diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000..ca204e42a6
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,273 @@
+{
+    "plugins": ["@typescript-eslint", "jest-dom"],
+    "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+    "rules": {
+        "@next/next/no-img-element": "off",
+        "react/display-name": "off",
+        "react/no-unescaped-entities": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "no-console": 2,
+        "padding-line-between-statements": [
+            "error",
+            { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+            { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] },
+            { "blankLine": "any", "prev": ["case", "default"], "next": "break" },
+            { "blankLine": "any", "prev": "case", "next": "case" },
+            { "blankLine": "always", "prev": "*", "next": "return" },
+            { "blankLine": "always", "prev": "block", "next": "*" },
+            { "blankLine": "always", "prev": "*", "next": "block" },
+            { "blankLine": "always", "prev": "block-like", "next": "*" },
+            { "blankLine": "always", "prev": "*", "next": "block-like" }
+        ]
+    }
+}
+// USE THE CONFIG BELOW DURING THE DEVELOPMENT
+// {
+//     "env": {
+//         "browser": true,
+//         "node": true,
+//         "es6": true
+//     },
+
+//     "plugins": ["@typescript-eslint", "jest-dom"],
+//     "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "prettier"],
+
+//     "ecmaFeatures": {
+//         "arrowFunctions": true,
+//         "binaryLiterals": true,
+//         "blockBindings": true,
+//         "classes": true,
+//         "defaultParams": true,
+//         "destructuring": true,
+//         "forOf": true,
+//         "generators": true,
+//         "modules": true,
+//         "objectLiteralComputedProperties": true,
+//         "objectLiteralDuplicateProperties": true,
+//         "objectLiteralShorthandMethods": true,
+//         "objectLiteralShorthandProperties": true,
+//         "octalLiterals": true,
+//         "regexUFlag": true,
+//         "regexYFlag": true,
+//         "spread": true,
+//         "superInFunctions": true,
+//         "templateStrings": true,
+//         "unicodeCodePointEscapes": true,
+//         "globalReturn": true,
+//         "jsx": true
+//     },
+
+//     "rules": {
+//         //
+//         //Possible Errors
+//         //
+//         // The following rules point out areas where you might have made mistakes.
+//         //
+//         "no-cond-assign": 2, // disallow assignment in conditional expressions
+//         "no-console": 1, // disallow use of console (off by default in the node environment)
+//         "no-constant-condition": 2, // disallow use of constant expressions in conditions
+//         "no-control-regex": 2, // disallow control characters in regular expressions
+//         "no-debugger": 2, // disallow use of debugger
+//         "no-dupe-args": 2, // disallow duplicate arguments in functions
+//         "no-dupe-keys": 2, // disallow duplicate keys when creating object literals
+//         "no-duplicate-case": 2, // disallow a duplicate case label.
+//         "no-empty": 2, // disallow empty statements
+//         "no-empty-class": 2, // disallow the use of empty character classes in regular expressions
+//         "no-ex-assign": 2, // disallow assigning to the exception in a catch block
+//         "no-extra-boolean-cast": 2, // disallow double-negation boolean casts in a boolean context
+//         "no-extra-parens": 0, // disallow unnecessary parentheses (off by default)
+//         "no-extra-semi": 2, // disallow unnecessary semicolons
+//         "no-func-assign": 2, // disallow overwriting functions written as function declarations
+//         "no-inner-declarations": 2, // disallow function or variable declarations in nested blocks
+//         "no-invalid-regexp": 2, // disallow invalid regular expression strings in the RegExp constructor
+//         "no-irregular-whitespace": 2, // disallow irregular whitespace outside of strings and comments
+//         "no-negated-in-lhs": 2, // disallow negation of the left operand of an in expression
+//         "no-obj-calls": 2, // disallow the use of object properties of the global object (Math and JSON) as functions
+//         "no-regex-spaces": 2, // disallow multiple spaces in a regular expression literal
+//         "no-reserved-keys": 2, // disallow reserved words being used as object literal keys (off by default)
+//         "no-sparse-arrays": 2, // disallow sparse arrays
+//         "no-unreachable": 2, // disallow unreachable statements after a return, throw, continue, or break statement
+//         "use-isnan": 2, // disallow comparisons with the value NaN
+//         "valid-jsdoc": 2, // Ensure JSDoc comments are valid (off by default)
+//         "valid-typeof": 2, // Ensure that the results of typeof are compared against a valid string
+
+//         //
+//         // Best Practices
+//         //
+//         // These are rules designed to prevent you from making mistakes.
+//         // They either prescribe a better way of doing something or help you avoid footguns.
+//         //
+//         "block-scoped-var": 0, // treat var statements as if they were block scoped (off by default). 0: deep destructuring is not compatible https://github.com/eslint/eslint/issues/1863
+//         "complexity": 0, // specify the maximum cyclomatic complexity allowed in a program (off by default)
+//         "consistent-return": 2, // require return statements to either always or never specify values
+//         "curly": 2, // specify curly brace conventions for all control statements
+//         "default-case": 2, // require default case in switch statements (off by default)
+//         "dot-notation": 2, // encourages use of dot notation whenever possible
+//         "eqeqeq": 2, // require the use of === and !==
+//         "guard-for-in": 2, // make sure for-in loops have an if statement (off by default)
+//         "no-alert": 2, // disallow the use of alert, confirm, and prompt
+//         "no-caller": 2, // disallow use of arguments.caller or arguments.callee
+//         "no-div-regex": 2, // disallow division operators explicitly at beginning of regular expression (off by default)
+//         "no-else-return": 2, // disallow else after a return in an if (off by default)
+//         "no-empty-label": 2, // disallow use of labels for anything other then loops and switches
+//         "no-eq-null": 2, // disallow comparisons to null without a type-checking operator (off by default)
+//         "no-eval": 2, // disallow use of eval()
+//         "no-extend-native": 2, // disallow adding to native types
+//         "no-extra-bind": 2, // disallow unnecessary function binding
+//         "no-fallthrough": 2, // disallow fallthrough of case statements
+//         "no-floating-decimal": 2, // disallow the use of leading or trailing decimal points in numeric literals (off by default)
+//         "no-implied-eval": 2, // disallow use of eval()-like methods
+//         "no-iterator": 2, // disallow usage of __iterator__ property
+//         "no-labels": 2, // disallow use of labeled statements
+//         "no-lone-blocks": 2, // disallow unnecessary nested blocks
+//         "no-loop-func": 2, // disallow creation of functions within loops
+//         "no-multi-spaces": 2, // disallow use of multiple spaces
+//         "no-multi-str": 2, // disallow use of multiline strings
+//         "no-native-reassign": 2, // disallow reassignments of native objects
+//         "no-new": 2, // disallow use of new operator when not part of the assignment or comparison
+//         "no-new-func": 2, // disallow use of new operator for Function object
+//         "no-new-wrappers": 2, // disallows creating new instances of String,Number, and Boolean
+//         "no-octal": 2, // disallow use of octal literals
+//         "no-octal-escape": 2, // disallow use of octal escape sequences in string literals, such as var foo = "Copyright \251";
+//         "no-param-reassign": 2, // disallow reassignment of function parameters (off by default)
+//         "no-process-env": 2, // disallow use of process.env (off by default)
+//         "no-proto": 2, // disallow usage of __proto__ property
+//         "no-redeclare": 2, // disallow declaring the same variable more then once
+//         "no-return-assign": 2, // disallow use of assignment in return statement
+//         "no-script-url": 2, // disallow use of javascript: urls.
+//         "no-self-compare": 2, // disallow comparisons where both sides are exactly the same (off by default)
+//         "no-sequences": 2, // disallow use of comma operator
+//         "no-throw-literal": 2, // restrict what can be thrown as an exception (off by default)
+//         "no-void": 2, // disallow use of void operator (off by default)
+//         "no-warning-comments": [0, { "terms": ["todo", "fixme"], "location": "start" }], // disallow usage of configurable warning terms in comments": 2, // e.g. TODO or FIXME (off by default)
+//         "no-with": 2, // disallow use of the with statement
+//         "radix": 2, // require use of the second argument for parseInt() (off by default)
+//         "vars-on-top": 2, // requires to declare all vars on top of their containing scope (off by default)
+//         "wrap-iife": 2, // require immediate function invocation to be wrapped in parentheses (off by default)
+//         "yoda": 2, // require or disallow Yoda conditions
+
+//         //
+//         // Strict Mode
+//         //
+//         // These rules relate to using strict mode.
+//         //
+//         "strict": 0, // controls location of Use Strict Directives. 0: required by `babel-eslint`
+
+//         //
+//         // Variables
+//         //
+//         // These rules have to do with variable declarations.
+//         //
+//         "no-catch-shadow": 2, // disallow the catch clause parameter name being the same as a variable in the outer scope (off by default in the node environment)
+//         "no-delete-var": 2, // disallow deletion of variables
+//         "no-label-var": 2, // disallow labels that share a name with a variable
+//         "no-shadow": 2, // disallow declaration of variables already declared in the outer scope
+//         "no-shadow-restricted-names": 2, // disallow shadowing of names such as arguments
+//         "no-undef": 2, // disallow use of undeclared variables unless mentioned in a /*global */ block
+//         "no-undef-init": 2, // disallow use of undefined when initializing variables
+//         "no-undefined": 2, // disallow use of undefined variable (off by default)
+//         "no-unused-vars": 2, // disallow declaration of variables that are not used in the code
+//         "no-use-before-define": 2, // disallow use of variables before they are defined
+
+//         //
+//         //Stylistic Issues
+//         //
+//         // These rules are purely matters of style and are quite subjective.
+//         //
+//         "indent": [1, 4], // this option sets a specific tab width for your code (off by default)
+//         "brace-style": 1, // enforce one true brace style (off by default)
+//         "camelcase": 1, // require camel case names
+//         "comma-spacing": [1, { "before": false, "after": true }], // enforce spacing before and after comma
+//         "comma-style": [1, "last"], // enforce one true comma style (off by default)
+//         "consistent-this": [1, "_this"], // enforces consistent naming when capturing the current execution context (off by default)
+//         "eol-last": 1, // enforce newline at the end of file, with no multiple empty lines
+//         "func-names": 0, // require function expressions to have a name (off by default)
+//         "func-style": 0, // enforces use of function declarations or expressions (off by default)
+//         "key-spacing": [1, { "beforeColon": false, "afterColon": true }], // enforces spacing between keys and values in object literal properties
+//         "max-nested-callbacks": [1, 3], // specify the maximum depth callbacks can be nested (off by default)
+//         "new-cap": [1, { "newIsCap": true, "capIsNew": false }], // require a capital letter for constructors
+//         "new-parens": 1, // disallow the omission of parentheses when invoking a constructor with no arguments
+//         "newline-after-var": 0, // allow/disallow an empty newline after var statement (off by default)
+//         "no-array-constructor": 1, // disallow use of the Array constructor
+//         "no-inline-comments": 1, // disallow comments inline after code (off by default)
+//         "no-lonely-if": 1, // disallow if as the only statement in an else block (off by default)
+//         "no-mixed-spaces-and-tabs": 1, // disallow mixed spaces and tabs for indentation
+//         "no-multiple-empty-lines": [1, { "max": 2 }], // disallow multiple empty lines (off by default)
+//         "no-new-object": 1, // disallow use of the Object constructor
+//         "no-spaced-func": 1, // disallow space between function identifier and application
+//         "no-trailing-spaces": 1, // disallow trailing whitespace at the end of lines
+//         "no-wrap-func": 1, // disallow wrapping of non-IIFE statements in parens
+//         "one-var": [1, "never"], // allow just one var statement per function (off by default)
+//         "operator-assignment": [1, "never"], // require assignment operator shorthand where possible or prohibit it entirely (off by default)
+//         "padded-blocks": [1, "never"], // enforce padding within blocks (off by default)
+//         "quote-props": [1, "as-needed"], // require quotes around object literal property names (off by default)
+//         "quotes": [1, "single"], // specify whether double or single quotes should be used
+//         "semi": [1, "always"], // require or disallow use of semicolons instead of ASI
+//         "semi-spacing": [1, { "before": false, "after": true }], // enforce spacing before and after semicolons
+//         "sort-vars": 0, // sort variables within the same declaration block (off by default)
+//         "space-after-keywords": [1, "always"], // require a space after certain keywords (off by default)
+//         "space-before-blocks": [1, "always"], // require or disallow space before blocks (off by default)
+//         "space-before-function-paren": [1, { "anonymous": "always", "named": "never" }], // require or disallow space before function opening parenthesis (off by default)
+//         "space-in-brackets": [1, "never"], // require or disallow spaces inside brackets (off by default)
+//         "space-in-parens": [1, "never"], // require or disallow spaces inside parentheses (off by default)
+//         "space-return-throw-case": [1, "always"], // require a space after return, throw, and case
+//         "space-unary-ops": [1, { "words": true, "nonwords": false }], // Require or disallow spaces before/after unary operators (words on by default, nonwords off by default)
+//         "spaced-line-comment": [1, "always"], // require or disallow a space immediately following the // in a line comment (off by default)
+//         "wrap-regex": 0, // require regex literals to be wrapped in parentheses (off by default)
+
+//         //
+//         // ECMAScript 6
+//         //
+//         // These rules are only relevant to ES6 environments and are off by default.
+//         //
+//         "no-var": 2, // require let or const instead of var (off by default)
+//         "generator-star-spacing": [2, "before"], // enforce the spacing around the * in generator functions (off by default)
+
+//         //
+//         // Legacy
+//         //
+//         // The following rules are included for compatibility with JSHint and JSLint.
+//         // While the names of the rules may not match up with the JSHint/JSLint counterpart,
+//         // the functionality is the same.
+//         //
+//         "max-depth": [2, 3], // specify the maximum depth that blocks can be nested (off by default)
+//         "max-params": [2, 5], // limits the number of parameters that can be used in the function declaration. (off by default)
+//         "max-statements": 0, // specify the maximum number of statement allowed in a function (off by default)
+//         "no-bitwise": 0, // disallow use of bitwise operators (off by default)
+//         "no-plusplus": 2, // disallow use of unary operators, ++ and -- (off by default)
+
+//         //
+//         // eslint-plugin-react
+//         //
+//         // React specific linting rules for ESLint
+//         //
+//         "react/display-name": 0, // Prevent missing displayName in a React component definition
+//         "react/jsx-quotes": [2, "double", "avoid-escape"], // Enforce quote style for JSX attributes
+//         "react/jsx-no-undef": 2, // Disallow undeclared variables in JSX
+//         "react/jsx-sort-props": 0, // Enforce props alphabetical sorting
+//         "react/jsx-uses-react": 2, // Prevent React to be incorrectly marked as unused
+//         "react/jsx-uses-vars": 2, // Prevent variables used in JSX to be incorrectly marked as unused
+//         "react/no-did-mount-set-state": 2, // Prevent usage of setState in componentDidMount
+//         "react/no-did-update-set-state": 2, // Prevent usage of setState in componentDidUpdate
+//         "react/no-multi-comp": 0, // Prevent multiple component definition per file
+//         "react/no-unknown-property": 2, // Prevent usage of unknown DOM property
+//         "react/react-in-jsx-scope": 2, // Prevent missing React when using JSX
+//         "react/self-closing-comp": 2, // Prevent extra closing tags for components without children
+//         "react/wrap-multilines": 2, // Prevent missing parentheses around multilines JSX
+//         "padding-line-between-statements": [
+//             "error",
+//             { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+//             { "blankLine": "any", "prev": ["const", "let", "var"], "next": ["const", "let", "var"] },
+//             { "blankLine": "any", "prev": ["case", "default"], "next": "break" },
+//             { "blankLine": "any", "prev": "case", "next": "case" },
+//             { "blankLine": "always", "prev": "*", "next": "return" },
+//             { "blankLine": "always", "prev": "block", "next": "*" },
+//             { "blankLine": "always", "prev": "*", "next": "block" },
+//             { "blankLine": "always", "prev": "block-like", "next": "*" },
+//             { "blankLine": "always", "prev": "*", "next": "block-like" }
+//         ]
+//     }
+// }
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000000..94f480de94
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
deleted file mode 100644
index ab36a17487..0000000000
--- a/.github/ISSUE_TEMPLATE.md
+++ /dev/null
@@ -1,40 +0,0 @@
-### There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider *PrimeReact PRO Support* where support is provided within 4 business hours
-
-**I'm submitting a ...**  (check one with "x")
-```
-[ ] bug report
-[ ] feature request
-[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57
-```
-
-**Codesandbox Case (Bug Reports)**
-Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.
-
-https://codesandbox.io/s/qjx332qq4
-
-**Current behavior**
-<!-- Describe how the bug manifests. -->
-
-**Expected behavior**
-<!-- Describe what the behavior would be without the bug. -->
-
-**Minimal reproduction of the problem with instructions**
-<!--
-If the current behavior is a bug or you can illustrate your feature request better with an example, 
-please provide the *STEPS TO REPRODUCE* and if possible a *MINIMAL DEMO* of the problem via
-https://codesandbox.io or similar (you can use this template as a starting point: https://codesandbox.io/s/qjx332qq4).
--->
-
-**Please tell us about your environment:**
-<!-- Operating system, IDE, package manager, HTTP server, ... -->
-
-* **React version:**
-<!-- Check whether this is still an issue in the most recent React version -->
-
-* **PrimeReact version:**
-<!-- Check whether this is still an issue in the most recent PrimeReact version -->
-
-* **Browser:** [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
-<!-- All browsers where this could be reproduced -->
- 
-* **Language:** [all | TypeScript X.X | ES6/7 | ES5]
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 0000000000..bcd6b6626a
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,61 @@
+name: Bug report
+description: Create a report to help PrimeReact improve.
+title: 'Replace_With_Component_Name: Brief_Bug_Description'
+labels: ['Status: Needs Triage']
+body:
+    - type: markdown
+      attributes:
+          # yamllint disable rule:line-length
+          value: >
+              ### There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider *PrimeReact PRO Support* where support is provided within 4 business hours
+          # yamllint enable rule:line-length
+    - type: textarea
+      id: description
+      attributes:
+          label: Describe the bug
+          description: A clear and concise description of what the bug is.
+      validations:
+          required: true
+    - type: input
+      id: reproducer
+      attributes:
+          label: Reproducer
+          placeholder: https://stackblitz.com/edit/vitejs-vite-pekean1c
+          description: |
+              Please fork [Stackblitz project](https://stackblitz.com/edit/vitejs-vite-pekean1c?file=src%2FApp.tsx) and create a case demonstrating your bug report. Issues **without** a CodeSandbox have much less possibility to be reviewed.
+      validations:
+          required: false
+    - type: textarea
+      id: system-info
+      attributes:
+          label: System Information
+          description: Output of `npx envinfo --system --npmPackages primereact,react,tailwindcss --binaries --browsers`
+          render: Shell
+          placeholder: >
+              System:...
+              Binaries:...
+              Browsers: ...
+              npmPackages:
+                 primereact: 10.7.0 => 10.7.0
+                 react: 18.3.1 => 18.3.1
+      validations:
+          required: true
+    - type: textarea
+      id: reproduce-steps
+      attributes:
+          label: Steps to reproduce the behavior
+          description: A clear and concise description of how to make the issue happen.
+          placeholder: >
+              1. Go to '...'
+              2. Click on '....'
+              3. Scroll down to '....'
+              4. See error
+      validations:
+          required: false
+    - type: textarea
+      id: expected-behavior
+      attributes:
+          label: Expected behavior
+          description: A clear and concise description of what you expected to happen.
+      validations:
+          required: false
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000000..c0d83c5d78
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,7 @@
+contact_links:
+    - name: Feature request
+      url: https://github.com/orgs/primefaces/discussions/categories/primereact
+      about: Propose an enhancement at discussions.
+    - name: Support
+      url: https://primereact.org/support/
+      about: Professional support for the open source innovation.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index da86c58a8c..2d51c7d228 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,6 +1,6 @@
-###Defect Fixes
-When submitting a PR, please also create an issue documenting the error.
+### Defect Fixes
+When submitting a PR, please also <ins>**create an issue**</ins> documenting the error and [manually link to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#manually-linking-a-pull-request-or-branch-to-an-issue-using-the-issue-sidebar) or mention it in the description using #<issue_id>.
 
-###Feature Requests
+### Feature Requests
 Due to company policy, we are unable to accept feature request PRs with significant changes as such cases has to be implemented by our team following our own processes.
-Smaller scaled feature implementations such as adding a property to a component will be considered for merging.
\ No newline at end of file
+Smaller scaled feature implementations such as adding a property to a component will be considered for merging.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000000..acc23b333e
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,14 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    ignore:
+      - dependency-name: "react"
+      - dependency-name: "react-dom"
+      - dependency-name: "typedoc"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
diff --git a/.github/workflows/comment_by_label.yml b/.github/workflows/comment_by_label.yml
new file mode 100644
index 0000000000..518ae1f6aa
--- /dev/null
+++ b/.github/workflows/comment_by_label.yml
@@ -0,0 +1,23 @@
+name: Comment By Label In Issues and PRs
+
+on:
+  issues:
+    types: [labeled]
+
+permissions:
+  contents: read
+
+jobs:
+  add-comment:
+    if: contains(github.event.label.name, 'Help Wanted')
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - name: Add comment
+        uses: peter-evans/create-or-update-comment@e8674b075228eee787fea43ef493e45ece1004c9
+        with:
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            This issue is available for anyone to work on. **Make sure to reference this issue in your pull request.** :sparkles: Thank you for your contribution! :sparkles:
diff --git a/.github/workflows/generate_api_doc.yml b/.github/workflows/generate_api_doc.yml
new file mode 100644
index 0000000000..035a707e4d
--- /dev/null
+++ b/.github/workflows/generate_api_doc.yml
@@ -0,0 +1,42 @@
+name: Generate API DOC
+
+on:
+  push:
+    branches: [ master ]
+    paths:
+      - '**/**/*.d.ts'
+      - 'api-generator/build-apidoc.js'
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    if: github.repository == 'primefaces/primereact' && github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+    - uses: actions/checkout@v6
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v6
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Install node packages
+      run: npm install
+
+    - name: Generate api doc
+      run: npm run apidoc
+
+    - name: Commit doc
+      run: |
+        git config user.name "GitHub Actions Bot"
+        git config user.email "<>"
+        git commit -a -m "Update API doc"
+        git push
diff --git a/.github/workflows/issue-inactive-checker.yml b/.github/workflows/issue-inactive-checker.yml
new file mode 100644
index 0000000000..c96f3d3067
--- /dev/null
+++ b/.github/workflows/issue-inactive-checker.yml
@@ -0,0 +1,34 @@
+name: Issue Inactive Checker
+
+on:
+  schedule:
+    - cron: "0 13 * * *" # Every Monday at 1PM UTC (9AM EST)
+
+permissions:
+  contents: read
+
+jobs:
+  issue-close-require:
+    permissions:
+      issues: write
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cannot Replicate
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: "close-issues"
+          labels: "Resolution: Cannot Replicate"
+          inactive-day: 20
+      - name: Needs Reproducer
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: "close-issues"
+          labels: "Status: Needs Reproducer"
+          inactive-day: 20
+      - name: Duplicate
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: "close-issues"
+          labels: "Resolution: Duplicate"
+          inactive-day: 20
diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml
new file mode 100644
index 0000000000..5b74ac2c0c
--- /dev/null
+++ b/.github/workflows/issue-labeled.yml
@@ -0,0 +1,43 @@
+name: Issue Labeled
+
+on:
+  issues:
+    types: [labeled]
+
+permissions:
+  contents: read
+
+jobs:
+  issue-labeled:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cannot Replicate
+        if: "${{ github.event.label.name == 'Resolution: Cannot Replicate'}}"
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days.
+      - name: Duplicate
+        if: "${{ github.event.label.name == 'Resolution: Duplicate'}}"
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            This issue is a duplicate and has already been reported and possibly fixed.  Please review other issues both open and closed for a similar issue to this one.
+      - name: Needs Reproducer
+        if: "${{ github.event.label.name == 'Status: Needs Reproducer'}}"
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Please fork the [Stackblitz project](https://stackblitz.com/edit/vitejs-vite-pekean1c?file=src%2FApp.tsx) and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.
diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml
new file mode 100644
index 0000000000..1820731e68
--- /dev/null
+++ b/.github/workflows/label.yml
@@ -0,0 +1,23 @@
+name: Label To Issues and PRs
+
+on:
+  issues:
+    types: [opened,reopened]
+  pull_request:
+    types: [opened,reopened]
+
+permissions:
+  contents: read
+
+jobs:
+  label_issues:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Label issues
+        uses: andymckay/labeler@1.0.4
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          add-labels: 'Status: Needs Triage'
+          remove-labels: 'Resolution: By Design,Resolution: Cannot Replicate,Resolution: Duplicate,Resolution: Help Wanted,Resolution: Invalid,Resolution: Needs Issue,Resolution: Needs More Information,Resolution: Needs Revision,Resolution: Wontfix'
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
new file mode 100644
index 0000000000..eea30f7d3f
--- /dev/null
+++ b/.github/workflows/nightly.yml
@@ -0,0 +1,32 @@
+name: Daily Build
+
+on:
+  schedule:
+    - cron: '0 6 * * *'
+
+permissions:
+  contents: read
+
+jobs:
+  nightly:
+    if: github.repository == 'primefaces/primereact' && github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    name: Node ${{ matrix.node-version }}
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
+    steps:
+    - uses: actions/checkout@v6
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v6
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Build
+      run: |
+        npm install
+        npm run build:lib
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 0000000000..faa6689116
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,56 @@
+name: NodeJS CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+permissions:
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v6
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v6
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Build
+      run: |
+        npm install
+
+    - name: Code Format
+      if: ${{ success() }}
+      run: |
+        npm run format:check
+
+    - name: Lint Check
+      if: ${{ success() }}
+      run: |
+        npm run lint
+
+    - name: TypeScript Check
+      if: ${{ success() }}
+      run: |
+        npm run type:check
+
+    - name: Security Check
+      if: ${{ success() }}
+      run: |
+        npm run security:check
+  
+    - name: Unit Tests Check
+      if: ${{ success() }}
+      run: |
+        npm run test:check
diff --git a/.github/workflows/pr_verify_linked_issue.yml b/.github/workflows/pr_verify_linked_issue.yml
new file mode 100644
index 0000000000..4745b4509c
--- /dev/null
+++ b/.github/workflows/pr_verify_linked_issue.yml
@@ -0,0 +1,25 @@
+name: Verify Linked Issue In PRs
+
+on:
+  pull_request_target:
+    types: [edited, synchronize, opened, reopened]
+  check_run:
+
+permissions:
+  contents: read
+
+jobs:
+  verify_linked_issue:
+    runs-on: ubuntu-latest
+    env:
+        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+    permissions:
+      issues: write
+      pull-requests: write
+    steps: 
+      - name: Verify Linked Issue
+        uses: hattan/verify-linked-issue-action@v1.1.5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          message: 'Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please [manually link to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#manually-linking-a-pull-request-or-branch-to-an-issue-using-the-issue-sidebar) or mention it in the description using #<issue_id>.'
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
new file mode 100644
index 0000000000..e5a69e23c6
--- /dev/null
+++ b/.github/workflows/stale.yml
@@ -0,0 +1,29 @@
+name: Stale Issues and PRs
+on:
+  schedule:
+    - cron: '0 0 * * *'
+permissions:
+  contents: read
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+      - uses: actions/stale@v10
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-label: 'Resolution: Stale'
+          stale-pr-label: 'Resolution: Stale'
+          exempt-issue-labels: 'Core Team,PRO Support,good first issue,question,Resolution: Help Wanted,Resolution: Workaround,Status: Discussion,Status: In Progress,Status: Needs Triage,Status: Pending Review,Type: Enhancement,Type: New Feature'
+          exempt-pr-labels: 'Core Team,Resolution: Help Wanted,Resolution: Workaround,Status: Discussion,Status: In Progress,Status: Pending Review'
+          exempt-all-milestones: true
+          days-before-stale: 360
+          days-before-close: 7
+          close-issue-reason: 'not_planned'
+          stale-issue-message: 'This issue has been automatically marked as stale. **If this issue is still affecting you with the latest version, please leave any comment**, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!'
+          close-issue-message: 'Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!'
+          stale-pr-message: 'This pull request has been automatically marked as stale. **If this pull request is still relevant, please leave any comment**, and we will keep it open. We are sorry that we have not been able to prioritize reviewing it yet. Your contribution is very much appreciated.'
+          close-pr-message: 'Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you for your understanding!'
diff --git a/.gitignore b/.gitignore
index 9a59e731ce..d65a72f731 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,17 +1,46 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
 /node_modules
-/public/resources/primereact.css
-/public/resources/primereact.min.css
-/public/resources/**/*.map
-/public/resources/images/
-.DS_Store
-/build
+/.pnp
+.pnp.js
 /vscode
 /.vscode
 /idea
 /.idea
 /.sass-cache
-/resources
-/components
-/src/sass/App.css
-/src/sass/App.css.map
-package-lock.json
\ No newline at end of file
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+tsconfig.tsbuildinfo
+
+# production
+/dist
+/build
+
+# misc
+.DS_Store
+*.pem
+*.code-workspace
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# next version
+/apps
+/packages
diff --git a/.npmignore b/.npmignore
index c813fa8674..a78787661b 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,5 +1,6 @@
 .sass-cache
 node_modules
+/dist
 public
 src
 .gitignore
@@ -10,4 +11,7 @@ yarn.lock
 .github
 exports
 vscode
-.vscode
\ No newline at end of file
+.vscode
+.editorconfig
+package-lock.json
+npm-shrinkwrap.json
diff --git a/.nvmrc b/.nvmrc
deleted file mode 100644
index 9773998bc1..0000000000
--- a/.nvmrc
+++ /dev/null
@@ -1 +0,0 @@
-v6.0.0
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..728fc9f8a7
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+# Ignore artifacts:
+build
+coverage
+dist
+out
+public
+styles
+node_modules
+.vscode
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000000..281eb9c283
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+    "useTabs": false,
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "semi": true,
+    "singleQuote": true,
+    "jsxSingleQuote": false,
+    "printWidth": 250,
+    "bracketSameLine": false
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000000..b650dca594
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "esbenp.prettier-vscode",
+        "sibiraj-s.vscode-scss-formatter"
+    ]
+}
diff --git a/.vscode/settings.team.json b/.vscode/settings.team.json
new file mode 100644
index 0000000000..6e322b1adf
--- /dev/null
+++ b/.vscode/settings.team.json
@@ -0,0 +1,27 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": true,
+        "source.organizeImports": true
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "[javascript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[typescriptreact]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode",
+        "editor.formatOnSave": true
+    },
+    "[css]": {
+        "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter",
+        "editor.formatOnSave": true
+    },
+    "[scss]": {
+        "editor.defaultFormatter": "sibiraj-s.vscode-scss-formatter",
+        "editor.formatOnSave": true
+    }
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 257b796589..dbbe608717 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,1347 +1,1081 @@
 # Changelog
 
-## [4.2.0](https://github.com/primefaces/primereact/tree/4.2.0) (2020-04-17)
-[Full Changelog](https://github.com/primefaces/primereact/compare/4.1.2...4.2.0)
-
-**Implemented New Features and Enhancements:**
-- New Component: InputNumber [\#1311](https://github.com/primefaces/primereact/issues/1311)
-- Add filterLocale property to Tree [\#1338](https://github.com/primefaces/primereact/issues/1338)
-- Add filterLocale property to TreeTable [\#1337](https://github.com/primefaces/primereact/issues/1337)
-- Add filterLocale property to MultiSelect [\#1336](https://github.com/primefaces/primereact/issues/1336)
-- Add filterLocale property to ListBox [\#1335](https://github.com/primefaces/primereact/issues/1335)
-- Add filterLocale property to Dropdown [\#1334](https://github.com/primefaces/primereact/issues/1334)
-- Add filterLocale property to DataTable [\#1333](https://github.com/primefaces/primereact/issues/1333)
-- Add checkValidity method to MultiSelect [\#1332](https://github.com/primefaces/primereact/issues/1332)
-- onFocus - onBlur for ToggleButton [\#1330](https://github.com/primefaces/primereact/issues/1330)
-- Update sortIcons [\#1329](https://github.com/primefaces/primereact/issues/1329)
-- Disabled prop for TriStateCheckbox [\#1325](https://github.com/primefaces/primereact/issues/1325)
-- Refactor OverlayPanel outside click detection [\#1320](https://github.com/primefaces/primereact/issues/1320)
-- Refactor MultiSelect outside click detection [\#1319](https://github.com/primefaces/primereact/issues/1319)
-- Refactor Menu outside click detection  [\#1318](https://github.com/primefaces/primereact/issues/1318)
-- Refactor ColorPicker outside click detection [\#1317](https://github.com/primefaces/primereact/issues/1317)
-- Refactor Dropdown outside click detection  [\#1310](https://github.com/primefaces/primereact/issues/1310)
-- Refactor AutoComplete outside click detection [\#1308](https://github.com/primefaces/primereact/issues/1308)
-- MultiSelect/Dropdown expose input attributes for labeling and validation purposes [\#1306](https://github.com/primefaces/primereact/issues/1306)
-- Autocomplete dropdown button close behavior enhancement [\#1305](https://github.com/primefaces/primereact/issues/1305)
-- Improve timepicker style on Calendar [\#1294](https://github.com/primefaces/primereact/issues/1294)
-- Add milliseconds support to Calendar [\#1293](https://github.com/primefaces/primereact/issues/1293)
-- Not nullable `dataKey` in DropDown break `selectedOption` property [\#1286](https://github.com/primefaces/primereact/issues/1286)
-- Separator for Chips [\#1285](https://github.com/primefaces/primereact/issues/1285)
+## [10.9.7](https://github.com/primefaces/primereact/tree/10.9.7) (2025-08-15)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.9.6...10.9.7)
+
+**Enhancements:**
+
+- Add in Multiselect filterInputKeyDown to filterTemplate options for consistency with Dropdown [#8199](https://github.com/primefaces/primereact/pull/8199)
+
+**Fixed Bugs:**
+
+- Dropdown: show emptyMessage when Dropdown with VirtualScroller has no data [#8125](https://github.com/primefaces/primereact/pull/8125)
+- fix(menubar): clicking submenu header inside dropdown [#8175](https://github.com/primefaces/primereact/pull/8175)
+- Datatable: onRowSelect and onRowUnselect callbacks inconsistent when clicking checkbox in DataTable (v10.9.5) [#8096](https://github.com/primefaces/primereact/issues/8096)
+- Missing Icons in API [#8095](https://github.com/primefaces/primereact/issues/8095)
+- SplitButton: Null id and custom menu items id [#8075](https://github.com/primefaces/primereact/issues/8075)
+- Data Table: Custom Fields documentation example is wrong [#8121](https://github.com/primefaces/primereact/issues/8121)
+- Datatable ignores Column sortFunction on initial sort [#7405](https://github.com/primefaces/primereact/issues/7405)
+- ToggleButton - Accessibility bug [#8021](https://github.com/primefaces/primereact/issues/8021)
+- Dialog: When out of the viewport, dialog cannot be esaily dragged back [#8090](https://github.com/primefaces/primereact/issues/8090)
+- MultiStateCheckbox: missing invalid and variant props in TypeScript interface [#8085](https://github.com/primefaces/primereact/issues/8085)
+- DataTable: Wrong TypeScript definition for cell selection [#8115](https://github.com/primefaces/primereact/issues/8115)
+- DataTable: Cell Editing and Dropdown Filter Interaction [#7158](https://github.com/primefaces/primereact/issues/7158)
+- Dropdown: Item list immediately closes after opening [#8080](https://github.com/primefaces/primereact/issues/8080)
+- Clear filter button not working when filters prop is not provided [#8138](https://github.com/primefaces/primereact/issues/8138)
+- InputNumber: wrong internal value for decimal numbers using the spin [#8132](https://github.com/primefaces/primereact/issues/8132)
+- DataTable changes data in another row when you changes something in a row [#8079](https://github.com/primefaces/primereact/issues/8079)
+- DataTable: Memo props leak to DOM - React does not recognize the ... prop on DOM element. [#8120](https://github.com/primefaces/primereact/issues/8120)
+- Button: When using a Button inside of a OrderList itemTemplate component, only outside of icon is clickable [#8145](https://github.com/primefaces/primereact/issues/8145)
+- Carousel: Broken when running without React.StrictMode [#3985](https://github.com/primefaces/primereact/issues/3985)
+- TreeSelect Filter Mode not Lenient [#8005](https://github.com/primefaces/primereact/issues/8005)
+- TreeSelect: Wrong position openning upward and using filter [#8089](https://github.com/primefaces/primereact/issues/8089)
+- DatePicker setting seconds when showTime is true and showSeconds is false [#8140](https://github.com/primefaces/primereact/issues/8140)
+- DataTable: Multiple frozen columns - Headers freeze but data columns don't align properly [#8107](https://github.com/primefaces/primereact/issues/8107)
+- TreeSelect: Collapse/Expand not working if filter is applied [#8197](https://github.com/primefaces/primereact/issues/8197)
+- Calendar: incorrect value via arrorws and month picker when use callback onMonthChange [#8201](https://github.com/primefaces/primereact/issues/8201)
+- DataTable: dissapearing values when clicking quickly [#8099](https://github.com/primefaces/primereact/issues/8099)
+- MultiSelect: missing filterInputKeyDown handler in filterTemplate options (unlike Dropdown) [#8152](https://github.com/primefaces/primereact/issues/8145)
+- Column Filter Accessibility issue in DataTable [#8219](https://github.com/primefaces/primereact/issues/8219)
+
+## [10.9.6](https://github.com/primefaces/primereact/tree/10.9.6) (2025-06-02)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.9.5...10.9.6)
+
+**Enhancements:**
+
+- CascadeSelect: Missing panelClassName and panelStyle props [#8000](https://github.com/primefaces/primereact/issues/8000)
+- CascadeSelect: Missing showClear prop [#8006](https://github.com/primefaces/primereact/issues/8006)
+- MultiStateCheckbox: Missing id prop [#7997](https://github.com/primefaces/primereact/issues/7997)
+- TreeSelect is missing onNodeClick and onNodeDoubleClick callbacks [#6778](https://github.com/primefaces/primereact/issues/6778)
+- MultiStateCheckbox: Missing support for invalid and variant props [#8019](https://github.com/primefaces/primereact/issues/8019)
+- Add showCloseIcon props to Dialog [#8053](https://github.com/primefaces/primereact/issues/8053)
+
+**Fixed Bugs:**
+
+- Datatable: CellEdit and general issues with portal editors [#7405](https://github.com/primefaces/primereact/issues/7405)
+- InputNumber: numpad decimal separator for locales that use comma as decimal separator [#7809](https://github.com/primefaces/primereact/issues/7809)
+- Calendar: When text input is focused the date cannot be selected from the first click on the panel [#7992](https://github.com/primefaces/primereact/issues/7992)
+- MultiSelect: keyboard down event does not pass to MultiSelectPanel component [#7756](https://github.com/primefaces/primereact/issues/7756)
+- File Upload: selecting the same file twice removes the file [#7989](https://github.com/primefaces/primereact/issues/7989)
+- DataTable: RowTogglerButton has no accessible name due to missing expandLabel and collapseLabel in locale config [#8023](https://github.com/primefaces/primereact/issues/8023)
+- MultiStateCheckbox: Conflicting aria-checked usage on both custom container and native input [#8022](https://github.com/primefaces/primereact/issues/8022)
+- FilterMatchMode: Missing enumeration case notIn [#8026](https://github.com/primefaces/primereact/issues/8026)
+- MenuItem: template property causes p-focus on the first item in the list [#7979](https://github.com/primefaces/primereact/issues/7979)
+- DataTable: Incorrect grouping of rows when using the Paginator [#8011](https://github.com/primefaces/primereact/issues/8011)
+- TriStateCheckbox: Missing id prop [#8018](https://github.com/primefaces/primereact/issues/8018)
+- AutoComplete: Bad type when using custom template definitions [#7984](https://github.com/primefaces/primereact/issues/7984)
+- Calendar: Manual Input breaking with dd M yy date format [#7675](https://github.com/primefaces/primereact/issues/7675)
+- Galleria: doesn't work correctly if value is set dynamically [#7450](https://github.com/primefaces/primereact/issues/7450)
+- Dropdown: onClick is called twice [#7941](https://github.com/primefaces/primereact/issues/7941)
+- File Upload: Shows Nan undefined text when trying to clear the uploaded file [#7949](https://github.com/primefaces/primereact/issues/7949)
+- DataTable: CSV export includes empty trailing column [#7953](https://github.com/primefaces/primereact/issues/7953)
+- PickList: Incorrect types in the documentation [#7938](https://github.com/primefaces/primereact/issues/7938)
+- HELP ! DataTable : Column body component dropdown doesn't update options when the source changes in the parent [#7987](https://github.com/primefaces/primereact/issues/7987)
+- InputNumber: PR #7868 (10.9.5) breaks existing code [#7977](https://github.com/primefaces/primereact/issues/7977)
+- ListBox: Inconsistent casing in component interface: ListboxPassThroughOptions should be ListBoxPassThroughOptions [#8020](https://github.com/primefaces/primereact/issues/8020)
+- File Upload: Remove icon only works with double click when using removeIcon prop [#8033](https://github.com/primefaces/primereact/issues/8033)
+- DataTable: bugs when updating data [#7942](https://github.com/primefaces/primereact/issues/7942)
+- Datatable: Expanding is erratic [#8031](https://github.com/primefaces/primereact/issues/8031)
+- DataTable: Cancel edit row causes undefined error [#8043](https://github.com/primefaces/primereact/issues/8043)
+- Calendar: invalid prevPropValue caused an error: Uncaught TypeError: prevPropValue.getTime is not a function [#8042](https://github.com/primefaces/primereact/issues/8042)
+- Column body function not re-executed when state value used inside changes [#8055](https://github.com/primefaces/primereact/issues/8055)
+- MultiSelect: A component is changing an uncontrolled input to be controlled. [#7896](https://github.com/primefaces/primereact/issues/7896)
+- MultiSelect has non-unique key warning [#8049](https://github.com/primefaces/primereact/issues/8049)
+
+## [10.9.5](https://github.com/primefaces/primereact/tree/10.9.5) (2025-04-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.9.4...10.9.5)
+
+**Fixed Bugs:**
+
+- OrderList: Scroll Not Updating with Item Movement [#7229](https://github.com/primefaces/primereact/issues/7229)
+- Dropdown component: onLazyLoad triggers on every open, and onFilter re-renders with empty search results, clearing typed input [#7337](https://github.com/primefaces/primereact/issues/7337)
+- InputNumber: No possibility to prevent decimal values [#7455](https://github.com/primefaces/primereact/issues/7455)
+- TreeSelect: Delayed character display when typing [#7805](https://github.com/primefaces/primereact/issues/7805)
+- InputOtp: autoFocus prop on InputOtp doesn't do anything [#7806](https://github.com/primefaces/primereact/issues/7806)
+- Dropdown: selecting the option when esc key pressed [#7828](https://github.com/primefaces/primereact/issues/7828)
+- TriStateCheckbox: spurious empty string given as value [#7844](https://github.com/primefaces/primereact/issues/7844)
+- Accessibility Issue: Readonly Components React to Keyboard Control [#7849](https://github.com/primefaces/primereact/issues/7849)
+- InputMask: Value not displayed when set directly in state [#7851](https://github.com/primefaces/primereact/issues/7851)
+- Mention: Component does not accept variant prop [#7864](https://github.com/primefaces/primereact/issues/7864)
+- TreeSelect: filterDelay issue [#7867](https://github.com/primefaces/primereact/issues/7867)
+- Dropdown - missing typescript definition for filterClearIcon pt options [#7887](https://github.com/primefaces/primereact/issues/7887)
+- AutoComplete/Dropdown: in props panelFooterTemplate, the hide() method is not being called as expected [#7881](https://github.com/primefaces/primereact/issues/7881)
+- Calendar (Accessibility issue): Component loses focus when closing popup using escape key [#7890](https://github.com/primefaces/primereact/issues/7890)
+- CascadeSelect: Problem with loading prop in typescript [#7892](https://github.com/primefaces/primereact/issues/7892)
+- Autocomplete: Can still remove values when readOnly is enabled [#7894](https://github.com/primefaces/primereact/issues/7894)
+- OverlayPanel: invalid position when on the edge [#7901](https://github.com/primefaces/primereact/issues/7901)
+- OverlayPanel: Position is not updated on scroll from wrapper element [#7903](https://github.com/primefaces/primereact/issues/7903)
+- Chip: When I use a React component as the value in the template prop of the Chip component, the template component unmounts and remounts whenever the state updates [#7911](https://github.com/primefaces/primereact/issues/7911)
+- Chip: Chip close icon click is not working properly in Menu component [#7912](https://github.com/primefaces/primereact/issues/7912)
+- TriStateCheckbox: 'null' state is an empty string, not null [#7914](https://github.com/primefaces/primereact/issues/7914)
+- MenuBar : remove aria-level attribute from list item [#7922](https://github.com/primefaces/primereact/issues/7922)
+- Datatable: takes long time to response upon grid selection on 1000+ rows [#7926](https://github.com/primefaces/primereact/issues/7926)
+- Breadcrumb: disabled item receives keyboard focus [#7929](https://github.com/primefaces/primereact/issues/7929)
+- Menubar: Clicking on different Menubar component items doesn't close Menu itself [#7931](https://github.com/primefaces/primereact/issues/7931)
+
+## [10.9.2](https://github.com/primefaces/primereact/tree/10.9.2) (2025-01-24)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.9.1...10.9.2)
+
+**Fixed Bugs:**
+
+- className Prop Doesn't Apply to Button Element in ToggleButton [#7630](https://github.com/primefaces/primereact/issues/7630)
+- checkboxElement in MultiSelectPanelHeaderTemplateEvent has wrong interface [#7622](https://github.com/primefaces/primereact/issues/7622)
+- AutoComplete: Typo in the empty message pass through [#7618](https://github.com/primefaces/primereact/issues/7618)
+- MultiSelect showClear Keyboard Trap [#7613](https://github.com/primefaces/primereact/issues/7613)
+- Setting RowReorderIcon breaks drag styles [#7612](https://github.com/primefaces/primereact/issues/7612)
+- Calendar KeyBoard Accessibility Issue When Showed Two Months And Pressed the ArrowRight [#7604](https://github.com/primefaces/primereact/issues/7604)
+- Today Button not visible for maxDate [#7602](https://github.com/primefaces/primereact/issues/7602)
+- Tree: Incorrect props and types in documentation [#7599](https://github.com/primefaces/primereact/issues/7599)
+- Today Button is hidden for maxDate with value as new Date() [#7598](https://github.com/primefaces/primereact/issues/7598)
+- MultiSelect: it recognised the group options as standalone groups because of the “group“ key appearance [#7595](https://github.com/primefaces/primereact/issues/7595)
+- Calendar: year is not getting updated on Clear button [#7581](https://github.com/primefaces/primereact/issues/7581)
+- Dropdown: The selected option is not unselected from the list on clear action [#7576](https://github.com/primefaces/primereact/issues/7576)
+- ListBox: No item is displayed when virtualScrollerOptions is used [#7574](https://github.com/primefaces/primereact/issues/7574)
+- Core: Allow hideOverlaysOnDocumentScrolling to also work in dialogs [#7566](https://github.com/primefaces/primereact/issues/7566)
+- KeyFilter: Incorrect handling of dash and dot in numeric inputs [#7557](https://github.com/primefaces/primereact/issues/7557)
+- Calendar: Improve type declaration using generic types with default parameters [#7555](https://github.com/primefaces/primereact/issues/7555)
+- Calendar: onSelect is forcing date while typing [#7553](https://github.com/primefaces/primereact/issues/7553)
+- Fix #7180 Screenreader improve hidden accessible [#7180](https://github.com/primefaces/primereact/issues/7180)
+- Dropdown/MultiSelect: Add filterDelay property for debounce [#7547](https://github.com/primefaces/primereact/issues/7547)
+- Datatable: Sort with multiselect - wrong selection [#7546](https://github.com/primefaces/primereact/issues/7546)
+- DataTable: Frozen alignRight not working [#7545](https://github.com/primefaces/primereact/issues/7545)
+- How to format the selected item in Autocomplete [#7522](https://github.com/primefaces/primereact/issues/7522)
+- TreeTable using stripedRows: children rows are not striped correctly [#7513](https://github.com/primefaces/primereact/issues/7513)
+- TreeTable: Wrong data format in the docs [#7504](https://github.com/primefaces/primereact/issues/7504)
+- InputTextarea: autoResize not working when disabled [#7502](https://github.com/primefaces/primereact/issues/7502)
+
+## [10.9.1](https://github.com/primefaces/primereact/tree/10.9.1) (2025-01-02)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.9.0...10.9.1)
+
+**Fixed Bugs:**
+
+- All (with icons) - react is not defined [#7544](https://github.com/primefaces/primereact/issues/7544)
+
+## [10.9.0](https://github.com/primefaces/primereact/tree/10.9.0) (2025-01-02)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.8.5...10.9.0)
+
+**Fixed Bugs:**
+
+- Filter: Does not work with space [#7529](https://github.com/primefaces/primereact/issues/7529)
+- Dropdown: Editable Dropdown search not working as expected. [#7527](https://github.com/primefaces/primereact/issues/7527)
+- ConfirmDialog: refs issue for react 19 [#7523](https://github.com/primefaces/primereact/issues/7523)
+- How to format the selected item in Autocomplete [#7522](https://github.com/primefaces/primereact/issues/7522)
+- Theming docs: configurator icon in the text does not match the referenced toolbar icon [#7518](https://github.com/primefaces/primereact/issues/7518)
+- The InputTextarea component with the autoResize property shrinks within the TabView when renderActiveOnly={false} is set. [#7517](https://github.com/primefaces/primereact/issues/7517)
+- DataTable is not displayed within the TabView when renderActiveOnly={false} is set. [#7516](https://github.com/primefaces/primereact/issues/7516)
+- Dropdown: Lack of the p-inputwrapper-filled class for the null value [#7515](https://github.com/primefaces/primereact/issues/7515)
+- [Dialog component] Warning: Accessing element.ref was removed in React 19 [#7510](https://github.com/primefaces/primereact/issues/7510)
+- Calendar: yearNavigator + view="month" doesn't work [#7496](https://github.com/primefaces/primereact/issues/7496)
+- ConfirmDialog: onHide prop is triggered immediately [#7494](https://github.com/primefaces/primereact/issues/7494)
+- TreeTable : Console warning when customizing the toggler [#7490](https://github.com/primefaces/primereact/issues/7490)
+- ScrollPanel: Null Reference Error in iOS Safari/WKWebView [#7489](https://github.com/primefaces/primereact/issues/7489)
+- Toast remove function removes all toasts with the same message when action is done on toast with pId = 0 [#7483](https://github.com/primefaces/primereact/issues/7483)
+- DataTable: Drag Selection Issue with Grouped Rows [#7480](https://github.com/primefaces/primereact/issues/7480)
+- Password: Warning message related to aria-hidden displayed when clicking the toggleMask icon  [#7473](https://github.com/primefaces/primereact/issues/7473)
+- TreeTable: Multiple filters set at once only keeps the last applied [#7469](https://github.com/primefaces/primereact/issues/7469)
+- Datatable: Sort with multiselect - wrong selection [#7468](https://github.com/primefaces/primereact/issues/7468)
+- Accordion: Incorrect imports in templatedoc [#7466](https://github.com/primefaces/primereact/issues/7466)
+- DataTable HeaderCell: menu-type text filter does not accept spaces if the column is sortable [#7459](https://github.com/primefaces/primereact/issues/7459)
+- Checkbox: onBlur does not forward event object [#7440](https://github.com/primefaces/primereact/issues/7440)
+- TabView: Unable to select closable icon of tabs through keyboard [#7437](https://github.com/primefaces/primereact/issues/7437)
+- Button: Global esc key listener with priority [1200, 0] already exists [#7436](https://github.com/primefaces/primereact/issues/7436)
+- Dropdown: warning when using useOptionAsValue [#7409](https://github.com/primefaces/primereact/issues/7409)
+- Issue with PrimeReact Dialog on Next.js 15 and React 19 [#7403](https://github.com/primefaces/primereact/issues/7403)
+- TreeTable: selected rows are not highlighted [#7387](https://github.com/primefaces/primereact/issues/7387)
+- Accessibility: Improve Screenreader support [#7180](https://github.com/primefaces/primereact/issues/7180)
+
+## [10.8.5](https://github.com/primefaces/primereact/tree/10.8.5) (2024-11-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.8.4...10.8.5)
+
+**Fixed Bugs:**
+
+- The dropdown options panel stays open on focus lost [#7313](https://github.com/primefaces/primereact/issues/7313)
+- DataTable - Sort cannot be triggered via keyboard [#7451](https://github.com/primefaces/primereact/issues/7451)
+- Calendars docs are inaccurate about aria-labels [#7452](https://github.com/primefaces/primereact/issues/7452)
+- ToggleButton : nbsp; when label is empty [#7330](https://github.com/primefaces/primereact/issues/7330)
+- DropdownItem: Error: "key" prop is being spread into JSX [#7423](https://github.com/primefaces/primereact/issues/7423)
+- DataTable 10.8.4: Drag Selection is still broken [#7321](https://github.com/primefaces/primereact/issues/7321)
+- PrimeReactProvider: cssTransition false does not disable animations globally [#7395](https://github.com/primefaces/primereact/issues/7395)
+- Calendar component in DataTable PrimeReact 10.x: Date selection sets value to null, Clear button works as expected [#7389](https://github.com/primefaces/primereact/issues/7389)
+- Fixed Typo in Sidebar gteMask to getMask [#7398](https://github.com/primefaces/primereact/issues/7398)
+- Need event inside the onHide callback [#7393](https://github.com/primefaces/primereact/issues/7393)
+- Row component does not receive className and style property [#7329](https://github.com/primefaces/primereact/issues/7329)
+- MultiSelect: Unable to select remove icon of chips through keyboard [#7349](https://github.com/primefaces/primereact/issues/7349)
+- MultiSelect: Cannot access the close Icon and clear the input using keyboard in Filled mode [#7377](https://github.com/primefaces/primereact/issues/7377)
+- Mention: Auto resize feature is not working [#7367](https://github.com/primefaces/primereact/issues/7367)
+- Dropdown: Allow null / "" / [] / {} again as option values [#7370](https://github.com/primefaces/primereact/issues/7370)
+- Mention - autoResize [#6296](https://github.com/primefaces/primereact/issues/6296)
+- Chip: unique "key" prop warning [#7368](https://github.com/primefaces/primereact/issues/7368)
+- TreeTable: Unable to custom columns' filter [#5382](https://github.com/primefaces/primereact/issues/5382)
+- Messages: aria-label not included in close button attributes [#7364](https://github.com/primefaces/primereact/issues/7364)
+- TreeSelect errors on render in storybook due to treeRef.current being null [#7362](https://github.com/primefaces/primereact/issues/7362)
+- Multiselect: All items at the same index in a group are marked focused [#6678](https://github.com/primefaces/primereact/issues/6678)
+- InputMask: Classname p-filled not works fine [#7354](https://github.com/primefaces/primereact/issues/7354)
+- Documentation for CSS Modules: Cascaded classes [#7347](https://github.com/primefaces/primereact/issues/7347)
+- AutoComplete: selectedItemTemplate displays [Object object] [#6633](https://github.com/primefaces/primereact/issues/6633)
+- MultiSelect: Inline is not working on tables filter anymore [#6838](https://github.com/primefaces/primereact/issues/6838)
+- InputTextarea: Duplicated class in DOM using className [#7345](https://github.com/primefaces/primereact/issues/7345)
+- MultiSelect: inline can't be used at first render [#7341](https://github.com/primefaces/primereact/issues/7341)
+- AutoComplete: Selected item is not getting highlighted when visited again unlike Dropdown component  [#7330](https://github.com/primefaces/primereact/issues/7330)
+- Multiselect: Сhip options can be closed outside of overflow [#7125](https://github.com/primefaces/primereact/issues/7125)
+- Dropdown: Arrows select not working when using optionValue [#7318](https://github.com/primefaces/primereact/issues/7318)
+- InputNumber: Infinite Loop When Unmount Component  [#7323](https://github.com/primefaces/primereact/issues/7323)
+
+## [10.8.4](https://github.com/primefaces/primereact/tree/10.8.4) (2024-09-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.8.3...10.8.4)
+
+**Fixed Bugs:**
+
+- TriStateCheckbox: Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components. [#7313](https://github.com/primefaces/primereact/issues/7313)
+- DataTable: onSelectionChange getting fired on column element click also [#7309](https://github.com/primefaces/primereact/issues/7309)
+- DOCS: Theme switcher don't show Material design indigo themes. Shows purple instead [#7304](https://github.com/primefaces/primereact/issues/7304)
+- Dialog : use the locale property aria.close [#7301](https://github.com/primefaces/primereact/issues/7301)
+- Steps component: Unable to control the active step using activeIndex prop [#7298](https://github.com/primefaces/primereact/issues/7298)
+- Dropdown: OptionGroup using optionGroupLabel is blank [#7285](https://github.com/primefaces/primereact/issues/7285)
+- InputText: props.invalid does not work correctly in Passthrough (Tailwind) [#7275](https://github.com/primefaces/primereact/issues/7275)
+- TreeTable: alignHeader takes no effect [#7270](https://github.com/primefaces/primereact/issues/7270)
+- TreeTable: size prop not working, even in official StackBlitz example [#7269](https://github.com/primefaces/primereact/issues/7269)
+- Menu: separators cannot be hidden [#7261](https://github.com/primefaces/primereact/issues/7261)
+- Tooltip event="both" does not work if element get focus state by clicking on it [#7260](https://github.com/primefaces/primereact/issues/7260)
+- SplitButton: menu pass-through not working [#7259](https://github.com/primefaces/primereact/issues/7259)
+- DataTable: Select all checkbox on header row not working properly when scrollable is true [#7258](https://github.com/primefaces/primereact/issues/7258)
+- Sidebar: closeIconRef parameter error [#7255](https://github.com/primefaces/primereact/issues/7255)
+- Calendar: selecting a new year is not being reflected when transitioning to the month view. [#7254](https://github.com/primefaces/primereact/issues/7254)
+- Mention: Add show/hide to typescript and docs [#7242](https://github.com/primefaces/primereact/pull/7242)
+- DataTable incorrectly indicates drop functionality for unrelated draggable elements [#7239](https://github.com/primefaces/primereact/issues/7239)
+- Calendar: The yearNavigator does not update the displayed year after selecting a new year. [#7234](https://github.com/primefaces/primereact/issues/7234)
+
+## [10.8.3](https://github.com/primefaces/primereact/tree/10.8.3) (2024-09-16)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.8.2...10.8.3)
+
+**Fixed Bugs:**
+
+- Fix #6987: Dropdown filter freezes screen [#6987](https://github.com/primefaces/primereact/pull/6991)
+- Fix #6997: MenuBar re-render on props.model changes [#6997](https://github.com/primefaces/primereact/pull/6999)
+- Fix #6993: fix Editor bullet issue when using Quill 2.0.2 [#6993](https://github.com/primefaces/primereact/pull/7004)
+- Fix #7002: Dropdown improve Android key handling [#7002](https://github.com/primefaces/primereact/pull/7003)
+- Fix #6995: Key should be reference on element and not spread [#6995](https://github.com/primefaces/primereact/pull/7000)
+- Fix #7005: Avoid droppoints within undroppable node, not around [#7005](https://github.com/primefaces/primereact/pull/7005)
+- Fix #7006: typos in DataTable documentation [#7006](https://github.com/primefaces/primereact/pull/7006)
+- Fix #7008: calendar not closing on escape key press [#7008](https://github.com/primefaces/primereact/pull/7008)
+- Fix #7016: Revert CascadeSelect type for input [#7016](https://github.com/primefaces/primereact/pull/7019)
+- Fix #7014: inserting mentions results in duplicated text [#7014](https://github.com/primefaces/primereact/pull/7017)
+- Fix #7015: Calendar passthrough type definition and docs [#7015](https://github.com/primefaces/primereact/pull/7021)
+- Fix #7016: CascadeSelect passthrough type definition and docs [#7016](https://github.com/primefaces/primereact/pull/7020)
+- Fix #6996: keep the selected row in its position when it gets focused [#6996](https://github.com/primefaces/primereact/pull/7022)
+- Fix #7023: Toast typescript def for content [#7023](https://github.com/primefaces/primereact/pull/7024)
+- Fix #7027: remove v-model example from iconfield documentation [#7027](https://github.com/primefaces/primereact/pull/7027)
+- Fix #7029: remove v-model example from iconfield documentation [#7029](https://github.com/primefaces/primereact/pull/7029)
+- Fix #7030: missing commas in PrimeReact message examples [#7030](https://github.com/primefaces/primereact/pull/7030)
+- Fix #7032: Passthrough options type and missing docs [#7032](https://github.com/primefaces/primereact/pull/7033)
+- Fix #7035: Dropdown: Remove unused depreciated code [#7035](https://github.com/primefaces/primereact/pull/7036)
+- Fix #7013: Fix RadioButton appearing without tailwind style [#7013](https://github.com/primefaces/primereact/pull/7047)
+- Fix #7046: TreeTable typescript for PT row/column [#7046](https://github.com/primefaces/primereact/pull/7048)
+- Fix #7050: HeaderCheckbox passthrough [#7050](https://github.com/primefaces/primereact/pull/7053)
+- Fix #6998: add closest check condition to detect handle icon drag [#6998](https://github.com/primefaces/primereact/pull/7051)
+- Fix #6868: Refactor location of tailwind styles [#6868](https://github.com/primefaces/primereact/pull/7057)
+- Fix #7037: Dropdown: Cannot change icon when expanding or collapsing options [#7037](https://github.com/primefaces/primereact/pull/7038)
+- Fix #7061: Typo in Tailwind secondary button style [#7061](https://github.com/primefaces/primereact/pull/7062)
+- Fix #7040: Stepper: add header position [#7040](https://github.com/primefaces/primereact/pull/7040)
+- Fix #7042: Add Tailwind styling for IconField [#7042](https://github.com/primefaces/primereact/pull/7066)
+- Fix #6855: ConfirmDialog group missing from typescript [#6855](https://github.com/primefaces/primereact/pull/7068)
+- Fix #7074: ConfirmDialog - RejectButton classes in unstyled mode are not applied [#7074](https://github.com/primefaces/primereact/pull/7075)
+- Fix #7069: Correct passthrough (pt) implementation for Stepperpanel [#7069](https://github.com/primefaces/primereact/pull/7069)
+- Fix #7078: Typo in tailwinddoc of splitter [#7078](https://github.com/primefaces/primereact/pull/7078)
+- Fix #7079: allow zero value using nullish coalescing operator(Slider) [#7079](https://github.com/primefaces/primereact/pull/7079)
+- Fix #7084: formatting [#7084](https://github.com/primefaces/primereact/pull/7084)
+- Fix #7086: add build project in window os [#7086](https://github.com/primefaces/primereact/pull/7086)
+- Fix #7098: chore(deps): bump chart.js from 4.4.3 to 4.4.4 [#7098](https://github.com/primefaces/primereact/pull/7098)
+- Fix #7099: chore(deps-dev): bump @types/node from 20.14.2 to 22.5.2 [#7099](https://github.com/primefaces/primereact/pull/7099)
+- Fix #7100: chore(deps-dev): bump @testing-library/jest-dom from 6.4.8 to 6.5.0 [#7100](https://github.com/primefaces/primereact/pull/7100)
+- Fix #7101: Ensure steps can be programmatically styled [#7101](https://github.com/primefaces/primereact/pull/7101)
+- Fix #7104: Don't mix controlled and uncontrolled filter [#7104](https://github.com/primefaces/primereact/pull/7104)
+- Fix #7102: DataView fix listTemplate typescript def [#7102](https://github.com/primefaces/primereact/pull/7105)
+- Fix #7113: Multiselect focus problem [#7113](https://github.com/primefaces/primereact/pull/7113)
+- Fix #7073: Add missing focused context [#7073](https://github.com/primefaces/primereact/pull/7107)
+- Fix #7109: SplitterPanel pass onClick through [#7109](https://github.com/primefaces/primereact/pull/7114)
+- Fix #6784: Toast onRemove message [#6784](https://github.com/primefaces/primereact/pull/7108)
+- Fix #7110: SpeedDial : Fix aria-controls values [#7110](https://github.com/primefaces/primereact/pull/7111)
+- Fix #7118: Updating Chart accessibility documentation [#7118](https://github.com/primefaces/primereact/pull/7119)
+- Fix #6093: Fix Tailwind styles in unstyled mode [#6093](https://github.com/primefaces/primereact/pull/7124)
+- Fix #7039: Correct Event handling for Cut Command [#7039](https://github.com/primefaces/primereact/pull/7127)
+- Fix #7120: Breadcrumb shows a trailing separator when there [#7120](https://github.com/primefaces/primereact/pull/7133)
+- Fix #7128: document undocumented start and end options, add types & improve [#7128](https://github.com/primefaces/primereact/pull/7128)
+- Fix #5644: Add missing tailwind styles [#5644](https://github.com/primefaces/primereact/pull/7123)
+- Fix #7134: Refactor Dropdown component to support using option as value [#7134](https://github.com/primefaces/primereact/pull/7141)
+- Fix #7137: MultiSelect template docs [#7137](https://github.com/primefaces/primereact/pull/7143)
+- Fix #7136: Defines a new File type extended with custom objectURL property [#7136](https://github.com/primefaces/primereact/pull/7145)
+- Fix #6857: Adjust top up by 1px when gridlines are active [#6857](https://github.com/primefaces/primereact/pull/7151)
+- Fix #7149: make AdditionalProps argument in IconOptions type optional [#7149](https://github.com/primefaces/primereact/pull/7149)
+- Fix #7126: update Tree TypeScript documentation [#7126](https://github.com/primefaces/primereact/pull/7160)
+- Fix #7161: replace src value in DataTable typescript documentation [#7161](https://github.com/primefaces/primereact/pull/7162)
+- Fix #7166: Datatable : fix ColumnFilter aria-controls [#7166](https://github.com/primefaces/primereact/pull/7167)
+- Fix #7163: Refactor AutoComplete.js to fix the group selection [#7163](https://github.com/primefaces/primereact/pull/7164)
+- Fix #7155: prevent onselect event when prev, next calendar button [#7155](https://github.com/primefaces/primereact/pull/7155)
+- Fix #7165: Badge/Tag typescript add secondary and contrast [#7165](https://github.com/primefaces/primereact/pull/7168)
+- Fix #7171: TabMenu - resolve rendering issue of stackblitz apps for Command and Template examples [#7171](https://github.com/primefaces/primereact/pull/7171)
+- Fix #7174: Datatable frozen columns bug [#7174](https://github.com/primefaces/primereact/pull/7174)
+- Fix #7175: Fixing accessibility issue of dropdown [#7175](https://github.com/primefaces/primereact/pull/7175)
+- Fix #7178: Panel Menu Component highlights bug [#7178](https://github.com/primefaces/primereact/pull/7178)
+- Fix #7139: InputOtp IntegerOnly mode accepts "space" [#7139](https://github.com/primefaces/primereact/pull/7139)
+- Fix #7181: Tree missing drag drop functionality [#7181](https://github.com/primefaces/primereact/pull/7181)
+- Fix #7183: FloatLabel proper SPAN attributes [#7183](https://github.com/primefaces/primereact/pull/7183)
+- Fix #7189: Pressing buttons on touch devices will not focus InputText in turn Keyboard [#7189](https://github.com/primefaces/primereact/pull/7189)
+- Fix #7190: ContextMenu import error [#7190](https://github.com/primefaces/primereact/pull/7191)
+- Fix #7188: Provide readable input value based on selected option labels [#7188](https://github.com/primefaces/primereact/pull/7188)
+
+## [10.8.2](https://github.com/primefaces/primereact/tree/10.8.2) (2024-08-06)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.8.1...10.8.2)
+
+**Fixed Bugs:**
+
+- Fixes Font Issues
+- Fix #6989: Datatable errors in console by @melloware [#6990](https://github.com/primefaces/primereact/pull/6990)
+- Fixes to undroppable tree nodes by @rpiaggio [#6988](https://github.com/primefaces/primereact/pull/6988)
+
+## [10.8.1](https://github.com/primefaces/primereact/tree/10.8.1) (2024-08-05)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.8.0...10.8.1)
+
+**Fixed Bugs:**
+
+- Fixed typo VUE => React by @sja-cslab [#6947](https://github.com/primefaces/primereact/pull/6947)
+- Editor doesn't show initial value in some cases by @avasuro [#6951](https://github.com/primefaces/primereact/pull/6951)
+- Update Transitions for unstyled Accordion in tailwinddoc.js by @samy-mssi [#6954](https://github.com/primefaces/primereact/pull/6954)
+- Autocomplete autoHighlight prop is inconsistent by @nitrogenous [#6958](https://github.com/primefaces/primereact/pull/6958)
+- Inplace update doc for active and controlled mode by @melloware [#6959](https://github.com/primefaces/primereact/pull/6959)
+- Added ((data: any) => string) to dataKey property definition by @sja-cslab [#6960](https://github.com/primefaces/primereact/pull/6960)
+- InputOtp passthrough input correctly by @melloware [#6965](https://github.com/primefaces/primereact/pull/6965)
+- Bump eslint-config-next from 14.2.4 to 14.2.5 by @dependabot [#6966](https://github.com/primefaces/primereact/pull/6966)
+- Bump @docsearch/react from 3.6.0 to 3.6.1 by @dependabot [#6968](https://github.com/primefaces/primereact/pull/6968)
+- Bump @stackblitz/sdk from 1.10.0 to 1.11.0 by @dependabot [#6969](https://github.com/primefaces/primereact/pull/6969)
+- Bump @testing-library/jest-dom from 6.4.6 to 6.4.8 by @dependabot [#6970](https://github.com/primefaces/primereact/pull/6970)
+- Fix calendar overlay requiring double click on date to select a value when mask is present by @frle10 [#6972](https://github.com/primefaces/primereact/pull/6972)
+- Show how to preserve filter object when mixing column and row by @Et7f3 [#6974](https://github.com/primefaces/primereact/pull/6974)
+- Fix failed to decode font by @KOliver94 [#6977](https://github.com/primefaces/primereact/pull/6977)
+- Make sure header checkbox pt gets set properly in datatable by @peconomou929 [#6979](https://github.com/primefaces/primereact/pull/6979)
+- DT HeaderCheckbox passthrough by @melloware [#6981](https://github.com/primefaces/primereact/pull/6981)
+- Fix(InputNumber): Remove styled true option in useHandleStyle by @KumJungMin [#6980](https://github.com/primefaces/primereact/pull/6980)
+- Stepper onChangeStep function not initially set by @meddvedev [#6982](https://github.com/primefaces/primereact/pull/6982)
+- DataTable with Virtual Scroller and Multiselect; onSelection by @kl-nevermore [#6985](https://github.com/primefaces/primereact/pull/6985)
+- Calendar does not display up-to-date value if date is manually entered by @avasuro [#6986](https://github.com/primefaces/primereact/pull/6986)
+
+## [10.8.0](https://github.com/primefaces/primereact/tree/10.8.0) (2024-07-29)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.7.0...10.8.0)
+
+**Fixed Bugs:**
+
+- Refactor Dropdown.js to improve optionLabel and optionValue retrieval by @Rekl0w [#6831](https://github.com/primefaces/primereact/pull/6831)
+- Update ToastMessage severity options by @Rekl0w [#6832](https://github.com/primefaces/primereact/pull/6832)
+- TreeTable onFilter type def by @melloware [#6837](https://github.com/primefaces/primereact/pull/6837)
+- Add 'contrast' style option to ButtonProps by @Rekl0w [#6839](https://github.com/primefaces/primereact/pull/6839)
+- Updating activeStep does not actually change the active step by @PuppetFoam [#6841](https://github.com/primefaces/primereact/pull/6841)
+- TreeTableSelectionKeys type def by @melloware [#6847](https://github.com/primefaces/primereact/pull/6847)
+- TreeTable Typescript for page event by @melloware [#6848](https://github.com/primefaces/primereact/pull/6848)
+- Datatable loader unstyled non-boolean attribute warning by @meddvedev [#6849](https://github.com/primefaces/primereact/pull/6849)
+- PanelMenu typedef for onOpen/onClose by @melloware [#6850](https://github.com/primefaces/primereact/pull/6850)
+- Sort icons match PrimeVue by @melloware [#6853](https://github.com/primefaces/primereact/pull/6853)
+- Fix panel style in DropdownBase.js by @Rekl0w [#6856](https://github.com/primefaces/primereact/pull/6856)
+- Update z-index for submenu list in MenubarBase.js by @Rekl0w [#6869](https://github.com/primefaces/primereact/pull/6869)
+- Re-rendering of Sidebar component by @jpranays [#6860](https://github.com/primefaces/primereact/pull/6860)
+- Dropdown crashes when label is an empty string by @VytautasLozickas [#6871](https://github.com/primefaces/primereact/pull/6871)
+- Return scalar values directly as a label for Dropdown by @VytautasLozickas [#6872](https://github.com/primefaces/primereact/pull/6872)
+- Change the order of applying default values to props by @KumJungMin [#6879](https://github.com/primefaces/primereact/pull/6879)
+- Hide clear button when options is empty in Dropdown by @KumJungMin [#6880](https://github.com/primefaces/primereact/pull/6880)
+- Revert #6058 by @melloware [#6885](https://github.com/primefaces/primereact/pull/6885)
+- Fix: Combine the className props in the Menu separator by @jijiseong [#6884](https://github.com/primefaces/primereact/pull/6884)
+- TreeTable onResizeEnd incorrect column value by @melloware [#6886](https://github.com/primefaces/primereact/pull/6886)
+- Update onDateSelect function to include isUpdateViewDate parameter by @Rekl0w [#6890](https://github.com/primefaces/primereact/pull/6890)
+- Tree inputText's onChange in nodeTemplate does not respond to a space key by @akshayaqburst [#6891](https://github.com/primefaces/primereact/pull/6891)
+- MultiSelect emptyMessage prop is not working by @ivanpajon [#6894](https://github.com/primefaces/primereact/pull/6894)
+- MultiSelect internal value is never updated by @ivanpajon [#6896](https://github.com/primefaces/primereact/pull/6896)
+- Related to PR #6896 by @ivanpajon [#6897](https://github.com/primefaces/primereact/pull/6897)
+- FocusOnShow prop in Dialog component by @ivanpajon [#6899](https://github.com/primefaces/primereact/pull/6899)
+- Custom passthrough options for bodyRow by @ivanpajon [#6902](https://github.com/primefaces/primereact/pull/6902)
+- Missing rowGroupToggler and rowGroupTogglerIcon by @ivanpajon [#6904](https://github.com/primefaces/primereact/pull/6904)
+- Missing props in MessagesPassThroughMethodOptions and MessagesProps by @ivanpajon [#6909](https://github.com/primefaces/primereact/pull/6909)
+- Improve changeTheme logic and javadoc by @melloware [#6913](https://github.com/primefaces/primereact/pull/6913)
+- Fix(Calendar): Reset the isOverlayClicked value after overlayVisibleState is set to false by @KumJungMin [#6921](https://github.com/primefaces/primereact/pull/6921)
+- Fix(Calendar): Allow the end date to be the same as the start date using input by @KumJungMin [#6919](https://github.com/primefaces/primereact/pull/6919)
+- Fix: Listbox crash in CI by @avasuro [#6925](https://github.com/primefaces/primereact/pull/6925)
+- Autocomplete fix input passthrough TS by @melloware [#6926](https://github.com/primefaces/primereact/pull/6926)
+- Unstyled prop forwarded to InputText by @melloware [#6930](https://github.com/primefaces/primereact/pull/6930)
+- Removing chips in multiselect cause open/close multiselect by @meddvedev [#6933](https://github.com/primefaces/primereact/pull/6933)
+- Radio Button Pass Through Options by @peconomou929 [#6935](https://github.com/primefaces/primereact/pull/6935)
+- Editor get focus on init and on every value change by @avasuro [#6937](https://github.com/primefaces/primereact/pull/6937)
+- Fix: Overlap icons in the dropdown filter component by @nitrogenous [#6865](https://github.com/primefaces/primereact/pull/6865)
+- Fix input passthrough TS by @melloware [#6938](https://github.com/primefaces/primereact/pull/6938)
+- Datatable fix row checkbox/radiobutton PT by @melloware [#6941](https://github.com/primefaces/primereact/pull/6941)
+- Datatable reorderable rows in unstyled mode by @gcko [#6943](https://github.com/primefaces/primereact/pull/6943)
+
+## [10.7.0](https://github.com/primefaces/primereact/tree/10.7.0) (2024-07-03)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.6...10.7.0)
+
+**Fixed Bugs:**
+
+- Error in type definition [\#6670](https://github.com/primefaces/primereact/pull/6670)
+- emptyMessage prop and default label in unstyled mode [\#6672](https://github.com/primefaces/primereact/pull/6672)
+- Bump quill from 2.0.0 to 2.0.2 [\#6673](https://github.com/primefaces/primereact/pull/6673)
+- Types in CalendarPassThroughOptions [\#6676](https://github.com/primefaces/primereact/pull/6676)
+- Bump sass from 1.69.5 to 1.77.2 [\#6674](https://github.com/primefaces/primereact/pull/6674)
+- Missing prop in SidebarPassThroughMethodOptions [\#6689](https://github.com/primefaces/primereact/pull/6689)
+- Tooltip: Escape key not dismissing tooltip (WCAG 2.1 1.4.13) [\#6687](https://github.com/primefaces/primereact/pull/6687)
+- onEditorCallback row data not being updated [\#6685](https://github.com/primefaces/primereact/pull/6685)
+- colorpicker: Color picker popup not closing on escape button click in some specific scenarios [\#6694](https://github.com/primefaces/primereact/pull/6694)
+- fix default editMode value [\#6692](https://github.com/primefaces/primereact/pull/6692)
+- metergroup typos [\#6699](https://github.com/primefaces/primereact/pull/6699)
+- TieredMenu remove aria-level [\#6705](https://github.com/primefaces/primereact/pull/6705)
+- Datatable selection aria locale label [\#6707](https://github.com/primefaces/primereact/pull/6707)
+- Dropdown: Select value with Enter when optionValue is set [\#6703](https://github.com/primefaces/primereact/pull/6703)
+- DataTable: Tabulation is not working properly [\#6710](https://github.com/primefaces/primereact/pull/6710)
+- escape key not working in dialog [\#6719](https://github.com/primefaces/primereact/pull/6719)
+- InputNumber keydown bugfix [\#6728](https://github.com/primefaces/primereact/pull/6728)
+- fix InputOtp keyDown [\#6731](https://github.com/primefaces/primereact/pull/6731)
+- Datatable respect editMode to determine if editable [\#6736](https://github.com/primefaces/primereact/pull/6736)
+- Calendar month navigator [\#6739](https://github.com/primefaces/primereact/pull/6739)
+- Add content prop to Menubar component [\#6742](https://github.com/primefaces/primereact/pull/6742)
+- Fix Calendar onDateSelect function [\#6748](https://github.com/primefaces/primereact/pull/6748)
+- package.json security updates for braces [\#6750](https://github.com/primefaces/primereact/pull/6750)
+- Bump @testing-library/jest-dom from 6.4.2 to 6.4.6 [\#6752](https://github.com/primefaces/primereact/pull/6752)
+- Bump gulp from 4.0.2 to 5.0.0 [\#6713](https://github.com/primefaces/primereact/pull/6713)
+- Fix TreeSelect filter for space key [\#6754](https://github.com/primefaces/primereact/pull/6754)
+- React 19 support [\#6725](https://github.com/primefaces/primereact/pull/6725)
+- incorrect default value for minFractionDigits when set to null [\#6762](https://github.com/primefaces/primereact/pull/6762)
+- highlight range of month in datePicker [\#6759](https://github.com/primefaces/primereact/pull/6759)
+- highlight range of year in datePicker [\#6760](https://github.com/primefaces/primereact/pull/6760)
+- (Tooltip): not dynamically update align when position is mouse [\#6764](https://github.com/primefaces/primereact/pull/6764)
+- Added checks for dragdropScope being defined before conversion [\#6767](https://github.com/primefaces/primereact/pull/6767)
+- Rename previousButton to prevButton [\#6775](https://github.com/primefaces/primereact/pull/6775)
+- (ColorPicker): apply s and b of previous hsb to hsbValue [\#6788](https://github.com/primefaces/primereact/pull/6788)
+- apply year change in Calendar when input changed [\#6794](https://github.com/primefaces/primereact/pull/6794)
+- check for visibleOptions existing before looking up the index [\#6797](https://github.com/primefaces/primereact/pull/6797)
+- onMonthChange prop not being called when user increments / decrements month using arrow buttons [\#6799](https://github.com/primefaces/primereact/pull/6799)
+- Fix a few typos in markdown files [\#6801](https://github.com/primefaces/primereact/pull/6801)
+- Make sure editable dropdown opens when user types [\#6810](https://github.com/primefaces/primereact/pull/6810)
+- DataTable column resize on touchscreens [\#6726](https://github.com/primefaces/primereact/pull/6726)
+- Calendar's monthNavigatorTemplate Not Working [\#6818](https://github.com/primefaces/primereact/pull/6818)
+- FocusTrap better handling of autoFocus property [\#6721](https://github.com/primefaces/primereact/pull/6721)
+- Datatable radiobuttons and types [\#6698](https://github.com/primefaces/primereact/pull/6698)
+- ListBox keyboard navigation like primevue [\#6570](https://github.com/primefaces/primereact/pull/6570)
+- Checkbox: Component fail to render [\#6679](https://github.com/primefaces/primereact/pull/6679)
+
+## [10.6.6](https://github.com/primefaces/primereact/tree/10.6.6) (2024-05-24)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.5...10.6.6)
+
+**Fixed Bugs:**
+
+- Add ariaLabel method to Typescript [\#6582](https://github.com/primefaces/primereact/pull/6582)
+- Locale fix [\#6586](https://github.com/primefaces/primereact/pull/6586)
+- Row reorder icon image won't break drag 'ghost' [\#6581](https://github.com/primefaces/primereact/pull/6581)
+- Add paste key [\#6577](https://github.com/primefaces/primereact/pull/6577)
+- Check meta key for MacOS [\#6588](https://github.com/primefaces/primereact/pull/6588)
+- InputOtp respect props.value change [\#6595](https://github.com/primefaces/primereact/pull/6595)
+- Fix typo in Scale doc [\#6596](https://github.com/primefaces/primereact/pull/6596)
+- Fix typo in PrimeFlex doc [\#6597](https://github.com/primefaces/primereact/pull/6597)
+- Password fix tab ordering of toggle mask [\#6598](https://github.com/primefaces/primereact/pull/6598)
+- Fix typo [\#6601](https://github.com/primefaces/primereact/pull/6601)
+- Show headless sidebar in all window sizes [\#6605](https://github.com/primefaces/primereact/pull/6605)
+- IconOptions typescript updated for FontAwesome [\#6579](https://github.com/primefaces/primereact/pull/6579)
+- PanelMenu MenuItem Id Prop Not Passed [\#6607](https://github.com/primefaces/primereact/pull/6607)
+- MeterGroup render items in percentage [\#6612](https://github.com/primefaces/primereact/pull/6612)
+- Minus sign after all selection - InputNumber [\#6566](https://github.com/primefaces/primereact/pull/6566)
+- Tabview Core Styles Moved to SASS Theme and Removed Inkbar for Lara [\#6616](https://github.com/primefaces/primereact/pull/6616)
+- Chart update TypeScript to inherit DIV [\#6618](https://github.com/primefaces/primereact/pull/6618)
+- Fix: Cannot npm link primereact on local project [\#6619](https://github.com/primefaces/primereact/pull/6619)
+- Added new capabilities and properties to Column and Dialog [\#6611](https://github.com/primefaces/primereact/pull/6611)
+- Dropdown fix checkIcon [\#6630](https://github.com/primefaces/primereact/pull/6630)
+- Feat: Stateful TreeTable [\#6384](https://github.com/primefaces/primereact/pull/6384)
+- InputOtp keyboard navigation [\#6638](https://github.com/primefaces/primereact/pull/6638)
+- DataTable: Column: onCellEditComplete is fired twice [\#6641](https://github.com/primefaces/primereact/pull/6641)
+- VirtualScroller improve useUpdate comparison [\#6643](https://github.com/primefaces/primereact/pull/6643)
+- Fixed typo [\#6654](https://github.com/primefaces/primereact/pull/6654)
+- BodyRow tab key handling [\#6658](https://github.com/primefaces/primereact/pull/6658)
+- Multiselect use unique label key [\#6652](https://github.com/primefaces/primereact/pull/6652)
+- Tooltip default position to 'right' if undefined [\#6651](https://github.com/primefaces/primereact/pull/6651)
+- PageLinks use totalPages [\#6649](https://github.com/primefaces/primereact/pull/6649)
+- Add missing components to primereact.all.js [\#6637](https://github.com/primefaces/primereact/pull/6637)
+- autocomplete value selection fix [\#6664](https://github.com/primefaces/primereact/pull/6664)
+- Galleria image in fullscreen mode not closing on escape button click [\#6645](https://github.com/primefaces/primereact/pull/6645)
+- DragDrop Tree keyboard navigation [\#6646](https://github.com/primefaces/primereact/pull/6646)
+
+## [10.6.5](https://github.com/primefaces/primereact/tree/10.6.5) (2024-05-03)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.4...10.6.5)
+
+**Fixed Bugs:**
+
+- pt headerContent fix in [\#6529](https://github.com/primefaces/primereact/pull/6529)
+- fix optionLabel in [\#6520](https://github.com/primefaces/primereact/pull/6520)
+- remove unused codes in [\#6509](https://github.com/primefaces/primereact/pull/6509)
+- remove unused code in [\#6511](https://github.com/primefaces/primereact/pull/6511)
+- fix unexpected type coercion and removed unused code in [\#6513](https://github.com/primefaces/primereact/pull/6513)
+- removed unused code in [\#6515](https://github.com/primefaces/primereact/pull/6515)
+- removed unused codes in [\#6517](https://github.com/primefaces/primereact/pull/6517)
+- Multiselect checkbox CSS class in [\#6532](https://github.com/primefaces/primereact/pull/6532)
+- Datatable expose sorts and filters in ref in [\#6533](https://github.com/primefaces/primereact/pull/6533)
+- MeterGroup correct CSS handle style in [\#6534](https://github.com/primefaces/primereact/pull/6534)
+- Stepper fix TS docs to onChangeStep in [\#6546](https://github.com/primefaces/primereact/pull/6546)
+- Button as link docs in [\#6547](https://github.com/primefaces/primereact/pull/6547)
+- pt submenu fix in [\#6544](https://github.com/primefaces/primereact/pull/6544)
+- AccordionTab PT error in [\#6549](https://github.com/primefaces/primereact/pull/6549)
+- Remove setTokens in onPaste on InputOtp to avoid duplicate values in [\#6526](https://github.com/primefaces/primereact/pull/6526)
+- dropdown filter fix in [\#6551](https://github.com/primefaces/primereact/pull/6551)
+- fix updateViewDate event in [\#6559](https://github.com/primefaces/primereact/pull/6559)
+- Missing PT Option for IconField in Password in [\#6560](https://github.com/primefaces/primereact/pull/6560)
+
+## [10.6.4](https://github.com/primefaces/primereact/tree/10.6.4) (2024-04-3O)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.3...10.6.4)
+
+**Enhancements:**
+
+- remove unused codes in [\#6504](https://github.com/primefaces/primereact/pull/6504)
+- add menu context to menu in [\#6488](https://github.com/primefaces/primereact/pull/6488)
+- OverlayPanel add isVisible method to external API in [\#6453](https://github.com/primefaces/primereact/pull/6453)
+
+**Fixed Bugs:**
+
+- unit tests in [\#6348](https://github.com/primefaces/primereact/pull/6348)
+- fix Tailwind classes for inputswitch and checkbox as styling is broken in [\#6347](https://github.com/primefaces/primereact/pull/6347)
+- Locale update to use ariaLabel method in [\#6313](https://github.com/primefaces/primereact/pull/6313)
+- Sidebar doc fix in [\#6354](https://github.com/primefaces/primereact/pull/6354)
+- InputOtp fix typescript case in [\#6361](https://github.com/primefaces/primereact/pull/6361)
+- Stepper proper forwardRef in [\#6362](https://github.com/primefaces/primereact/pull/6362)
+- Stepper demos in [\#6363](https://github.com/primefaces/primereact/pull/6363)
+- Revert typedoc in [\#6368](https://github.com/primefaces/primereact/pull/6368)
+- Bump chart.js from 4.4.1 to 4.4.2 in [\#6282](https://github.com/primefaces/primereact/pull/6282)
+- Bump @testing-library/user-event from 14.5.1 to 14.5.2 in [\#6280](https://github.com/primefaces/primereact/pull/6280)
+- Bump prettier from 3.1.0 to 3.2.5 in [\#6372](https://github.com/primefaces/primereact/pull/6372)
+- Bump @types/react-transition-group from 4.4.9 to 4.4.10 in [\#6373](https://github.com/primefaces/primereact/pull/6373)
+- Bump eslint-config-next from 14.1.0 to 14.1.4 in [\#6369](https://github.com/primefaces/primereact/pull/6369)
+- InputOtp wrong import in [\#6383](https://github.com/primefaces/primereact/pull/6383)
+- Add missing children prop in FloatLabel.d.ts in [\#6388](https://github.com/primefaces/primereact/pull/6388)
+- MultiSelect - SelectionLimit issue in [\#6218](https://github.com/primefaces/primereact/pull/6218)
+- fixed issue on selecting option by key event when using optionValue prop in [\#6374](https://github.com/primefaces/primereact/pull/6374)
+- typescript definition for ButtonGroup in [\#6360](https://github.com/primefaces/primereact/pull/6360)
+- Locale prevent prototype pollution in [\#6395](https://github.com/primefaces/primereact/pull/6395)
+- Showcase examples use IconField in [\#6386](https://github.com/primefaces/primereact/pull/6386)
+- Calendar inputClassName missing in [\#6398](https://github.com/primefaces/primereact/pull/6398)
+- FileUpload: add missing type definition for cancelIcon in [\#6400](https://github.com/primefaces/primereact/pull/6400)
+- DataTable custom filter example in [\#6401](https://github.com/primefaces/primereact/pull/6401)
+- DataTable - onContextMenu does not return row data in [\#6403](https://github.com/primefaces/primereact/pull/6403)
+- typescript definition for Stepper and StepperPanel in [\#6356](https://github.com/primefaces/primereact/pull/6356)
+- AutoComplete: Fix the issue of passing an undefined key while rendering lists. in [\#6365](https://github.com/primefaces/primereact/pull/6365)
+- Fix Tailwind theme for TriStateCheckbox in [\#6406](https://github.com/primefaces/primereact/pull/6406)
+- Password removed invalid props from PT in [\#6409](https://github.com/primefaces/primereact/pull/6409)
+- Password fix invalid/variant props in [\#6412](https://github.com/primefaces/primereact/pull/6412)
+- Megamenu single array fix in [\#6416](https://github.com/primefaces/primereact/pull/6416)
+- Added Fragment at doc in [\#6421](https://github.com/primefaces/primereact/pull/6421)
+- Calendar updateViewDate fix in [\#6425](https://github.com/primefaces/primereact/pull/6425)
+- InputOtp updateTokens fix in [\#6433](https://github.com/primefaces/primereact/pull/6433)
+- InputOtp import fix in [\#6441](https://github.com/primefaces/primereact/pull/6441)
+- FloatLabel prop fix in [\#6440](https://github.com/primefaces/primereact/pull/6440)
+- Variable names fix in [\#6444](https://github.com/primefaces/primereact/pull/6444)
+- TabView round scrollLeft like PrimeVue in [\#6449](https://github.com/primefaces/primereact/pull/6449)
+- TreeTable: call customer sortFunction for column set as sortField in [\#6436](https://github.com/primefaces/primereact/pull/6436)
+- Typescript boolean instead of false in [\#6378](https://github.com/primefaces/primereact/pull/6378)
+- Toast close by id fix in [\#6457](https://github.com/primefaces/primereact/pull/6457)
+- Dialog onHide prop call in [\#6458](https://github.com/primefaces/primereact/pull/6458)
+- PrimeIcons v7 constants in [\#6465](https://github.com/primefaces/primereact/pull/6465)
+- PrimeIcons v7 constants in [\#6466](https://github.com/primefaces/primereact/pull/6466)
+- PrimeIcons v7 constants in [\#6467](https://github.com/primefaces/primereact/pull/6467)
+- Ripple doc fix in [\#6470](https://github.com/primefaces/primereact/pull/6470)
+- VirtualScroller/Ripple TS updates in [\#6472](https://github.com/primefaces/primereact/pull/6472)
+- TreeSelect header fix in [\#6471](https://github.com/primefaces/primereact/pull/6471)
+- StepperHeader add type button in [\#6463](https://github.com/primefaces/primereact/pull/6463)
+- Chips respect removable function in [\#6428](https://github.com/primefaces/primereact/pull/6428)
+- TreeSelect pass emptyMessage to Tree in [\#6411](https://github.com/primefaces/primereact/pull/6411)
+- Passthrough accordiontab not tab in [\#6390](https://github.com/primefaces/primereact/pull/6390)
+- ColumnFilter proper ID handling in [\#6367](https://github.com/primefaces/primereact/pull/6367)
+- MeterGroup minor refactor similar to other components in [\#6355](https://github.com/primefaces/primereact/pull/6355)
+- DataScroller pt doc img fix in [\#6480](https://github.com/primefaces/primereact/pull/6480)
+- Checkbox onClick TS def in [\#6485](https://github.com/primefaces/primereact/pull/6485)
+- Stepper add p-component to Stepper action in [\#6350](https://github.com/primefaces/primereact/pull/6350)
+- date picker value entering in [\#6478](https://github.com/primefaces/primereact/pull/6478)
+- KeyFilter handle AZERTY and dead keys in [\#6484](https://github.com/primefaces/primereact/pull/6484)
+- fixed the issue with the home separator if home prop is null/undefined in [\#6375](https://github.com/primefaces/primereact/pull/6375)
+- InputNumber allowing accent/dead characters in [\#6352](https://github.com/primefaces/primereact/pull/6352)
+- Quill 2.0.0 support in [\#6429](https://github.com/primefaces/primereact/pull/6429)
+- Dropdown navigation like PrimeVue in [\#6430](https://github.com/primefaces/primereact/pull/6430)
+- Dropdown scroll into view on focus in [\#6452](https://github.com/primefaces/primereact/pull/6452)
+- Menu align focus with PrimeVue in [\#6381](https://github.com/primefaces/primereact/pull/6381)
+- Calendar updateViewDate fix in [\#6447](https://github.com/primefaces/primereact/pull/6447)
+- Autocomplete Not able to delete a manually added chip in [\#6474](https://github.com/primefaces/primereact/pull/6474)
+- primefaces #6234, TreeSelect: (accessiblility) cannot access and clear the selected input using using keyboard in [\#6235](https://github.com/primefaces/primereact/pull/6235)
+- Stepper add get/set active step in [\#6486](https://github.com/primefaces/primereact/pull/6486)
+- Update templatedoc.js with correct reference in [\#6495](https://github.com/primefaces/primereact/pull/6495)
+- Dialog refactor using FocusTrap in [\#6435](https://github.com/primefaces/primereact/pull/6435)
+- Listbox focused option index fix in [\#6500](https://github.com/primefaces/primereact/pull/6500)
+- Splitter can work with multiple panels in [\#6490](https://github.com/primefaces/primereact/pull/6490)
+- Password use IconField for toggle mask in [\#6493](https://github.com/primefaces/primereact/pull/6493)
+- PanelMenu isItemActive Update in [\#6502](https://github.com/primefaces/primereact/pull/6502)
+- Fix formatting in [\#6505](https://github.com/primefaces/primereact/pull/6505)
+
+## [10.6.3](https://github.com/primefaces/primereact/tree/10.6.3) (2024-04-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.2...10.6.3)
+
+**New Features:**
+
+- New component InputOtp [\#6327](https://github.com/primefaces/primereact/issues/6327)
+
+**Enhancements:**
+
+- Unable to select item in Autcomplete with keyboard [\#6308](https://github.com/primefaces/primereact/issues/6308)
+- Core: p-hidden-accessible modernization [\#6163](https://github.com/primefaces/primereact/issues/6163)
+- Multiselect: must hit TAB key twice to move focus to next dropdown element [\#6288](https://github.com/primefaces/primereact/issues/6288)
 
 **Fixed bugs:**
-- Dropdown checkValidity fails [\#1331](https://github.com/primefaces/primereact/issues/1331)
-- Calendar.showOtherMonths property not being used [\#1328](https://github.com/primefaces/primereact/issues/1328)
-- Disable prop on ToggleButton not working [\#1321](https://github.com/primefaces/primereact/issues/1321)
-- IE11: Autocomplete with dropdown and multiple selection requires doubleclick [\#1316](https://github.com/primefaces/primereact/issues/1316)
-- InputMask displayed value does not change when value changes to undefined or null [\#1309](https://github.com/primefaces/primereact/issues/1309)
-- multiSortMeta depends on single sort [\#1307](https://github.com/primefaces/primereact/issues/1307)
-- Carousel  - Button inside carousel-item is not clickable in mobile phones [\#1300](https://github.com/primefaces/primereact/issues/1300)
-- AutoComplete: selectedItemTemplate ts binding claims to expect JSX.Element in return, but at runtime a string is expected [\#1297](https://github.com/primefaces/primereact/issues/1297)
-- FileUpload in auto mode sends two post requests in IE11 [\#1282](https://github.com/primefaces/primereact/issues/1282)
-- Today Button doesn't work on prefilled Calendar with timeonly [\#1281](https://github.com/primefaces/primereact/issues/1281)
-- TreeTable goes to edit mode when expanded [\#1276](https://github.com/primefaces/primereact/issues/1276)
-- Tree drag&drop not working if dragdropScope contains upper case letter [\#1182](https://github.com/primefaces/primereact/issues/1182)
 
-## [4.1.2](https://github.com/primefaces/primereact/tree/4.1.2) (2020-03-20)
+- Dropdown filter : Filter Field Resets to Empty String on Empty Filter Result when uing onFilterEvent to fetch options dynamically [\#6265](https://github.com/primefaces/primereact/issues/6265)
+- Multiselect scroll position reset bug [\#6305](https://github.com/primefaces/primereact/issues/6305)
+- InputNumber: does not work with czech and slovak keyboard layout [\#6237](https://github.com/primefaces/primereact/issues/6237)
+- InputNumber: Cannot insert value on Android [\#6275](https://github.com/primefaces/primereact/issues/6275)
+- InputNumber: cannot shift + num key [\#6257](https://github.com/primefaces/primereact/issues/6257)
+- ButtonGroup: missing children prop [\#6333](https://github.com/primefaces/primereact/issues/6333)
+- InputText: It doesn't take classNames when unstyled is true [\#6274](https://github.com/primefaces/primereact/issues/6274)
+- Dropdown: Focus change when editable and filter enabled [\#6297](https://github.com/primefaces/primereact/issues/6297)
+- DataTable: Drag Selection Highlight Doesn't Appear in 10.6.2 [\#6272](https://github.com/primefaces/primereact/issues/6272)
+- Core: Merging PT props only respects lower-case props [\#6289](https://github.com/primefaces/primereact/issues/6289)
+- Calendar: Incorrect year with numberOfMonths and yearNavigator [\#6285](https://github.com/primefaces/primereact/issues/6285)
+- Core: Unstyled property does not inherit to children [\#6142](https://github.com/primefaces/primereact/issues/6142)
+- Vite: Build issues [\#6276](https://github.com/primefaces/primereact/issues/6276)
+- ButtonGroup: forwardRef render functions accept exactly two parameters [\#6263](https://github.com/primefaces/primereact/issues/6263)
+- MeterGroup: Component is not exported from the library [\#6268](https://github.com/primefaces/primereact/issues/6268)
+- Tree: row selection checkbox not getting checked [\#6216](https://github.com/primefaces/primereact/issues/6216)
+- Multiple Components: classnames not being set in unstyled mode [\#6329](https://github.com/primefaces/primereact/issues/6329)
+- ToggleButton: Checkboxes showing before button [\#6222](https://github.com/primefaces/primereact/issues/6222)
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/4.1.1...4.1.2)
+## [10.6.2](https://github.com/primefaces/primereact/tree/10.6.2) (2024-03-29)
 
-**Implemented New Features and Enhancements:**
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.1...10.6.2)
 
-- DataView: lazy loading implementation [\#1264](https://github.com/primefaces/primereact/issues/1264)
+## [10.6.1](https://github.com/primefaces/primereact/tree/10.6.1) (2024-03-29)
 
-**Fixed bugs:**
-
-- Multiple Sort doesn't work as expected in the DataTable if a sortable column has sortField and field properties [\#1279](https://github.com/primefaces/primereact/issues/1279)
-- Chips in disabled Autocomplete are not disabled [\#1278](https://github.com/primefaces/primereact/issues/1278)
-- Calendar display not update when value change. [\#1277](https://github.com/primefaces/primereact/issues/1277)
-- Calendar closes right away in Chrome when it has showTime={true} [\#1272](https://github.com/primefaces/primereact/issues/1272)
-- Setting state in onFocus of Datatable Editors crashes app [\#1271](https://github.com/primefaces/primereact/issues/1271)
-- Invalid Date in Calendar in IE11 crashes the app [\#1270](https://github.com/primefaces/primereact/issues/1270)
-- Tab-Key doesn't work in Datatable with cell editing on IE11 and Edge [\#1269](https://github.com/primefaces/primereact/issues/1269)
-- IE11: Autocomplete with dropdown requires doubleclick [\#1267](https://github.com/primefaces/primereact/issues/1267)
-- OnComplete callback has wrong property params on InputMask.d.ts [\#1265](https://github.com/primefaces/primereact/issues/1265)
-- Fix InputSwitch documentation for onLabel-offLabel [\#1263](https://github.com/primefaces/primereact/issues/1263)
-
-## [4.1.1](https://github.com/primefaces/primereact/tree/4.1.1) (2020-03-12)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/4.1.0...4.1.1)
-
-**Implemented New Features and Enhancements:**
-
-- Add onFocus-onBlur to Dropdown [\#1260](https://github.com/primefaces/primereact/issues/1260)
-- InputMask OnComplete does not contain the new value [\#1255](https://github.com/primefaces/primereact/issues/1255)
-- resetFilter function for Dropdown [\#1249](https://github.com/primefaces/primereact/issues/1249)
-- Improve type definition for onChange of form components [\#1199](https://github.com/primefaces/primereact/issues/1199)
-
-**Fixed bugs:**
-
-- DataTable scrollHeight doesn't calculate correctly with frozen columns and header groups [\#1261](https://github.com/primefaces/primereact/issues/1261)
-- Disabled TabPanel focussable with TAB-Key [\#1254](https://github.com/primefaces/primereact/issues/1254)
-- Error on TreeTable docs about responsive [\#1253](https://github.com/primefaces/primereact/issues/1253)
-- Select components don't correctly return value [\#1252](https://github.com/primefaces/primereact/issues/1252)
-- currentPageReport should check for {last} boundary [\#1251](https://github.com/primefaces/primereact/issues/1251)
-- onClose of GrowlMessage is also allowing onClick to fire. [\#1248](https://github.com/primefaces/primereact/issues/1248)
-- loadingBody type is different to Documentation [\#1111](https://github.com/primefaces/primereact/issues/1111)
-
-## [4.1.0](https://github.com/primefaces/primereact/tree/4.1.0) (2020-03-10)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/4.0.0...4.1.0)
-
-**Implemented New Features and Enhancements:**
-
-- Add reorderable to Column [\#1246](https://github.com/primefaces/primereact/issues/1246)
-- Implement filterBy and filterMatchMode for ListBox [\#1245](https://github.com/primefaces/primereact/issues/1245)
-- Implement filterBy and filterMatchMode for MultiSelect [\#1244](https://github.com/primefaces/primereact/issues/1244)
-- Add filterPlaceholder to MultiSelect [\#1242](https://github.com/primefaces/primereact/issues/1242)
-- Deprecate icon of SelectItem API [\#1239](https://github.com/primefaces/primereact/issues/1239)
-- Templating support to SelectButton [\#1238](https://github.com/primefaces/primereact/issues/1238)
-- Document SelectItem [\#1237](https://github.com/primefaces/primereact/issues/1237)
-- Change the type of emptyMessage property on DataTable [\#1236](https://github.com/primefaces/primereact/issues/1236)
-- Deprecate Lightbox [\#1235](https://github.com/primefaces/primereact/issues/1235)
-- Add optionValue to Select components [\#1230](https://github.com/primefaces/primereact/issues/1230)
-- Placeholder colors are not same [\#1229](https://github.com/primefaces/primereact/issues/1229)
-- Primitive values support in Select components [\#1228](https://github.com/primefaces/primereact/issues/1228)
-- Add filterHeaderStyle and filterHeaderClassName to Column [\#1227](https://github.com/primefaces/primereact/issues/1227)
-- Add rowHover to DataTable [\#1226](https://github.com/primefaces/primereact/issues/1226)
-- New options for CurrentPageReport [\#1225](https://github.com/primefaces/primereact/issues/1225)
-- New DataTable Customer Demo [\#1224](https://github.com/primefaces/primereact/issues/1224)
-- New filtering modes for Table [\#1223](https://github.com/primefaces/primereact/issues/1223)
-- Accents support in Table filtering [\#1222](https://github.com/primefaces/primereact/issues/1222)
-- Add filterField to column [\#1221](https://github.com/primefaces/primereact/issues/1221)
-- Move column filters to their own row [\#1220](https://github.com/primefaces/primereact/issues/1220)
-- Time support for min date or max date in calendar component [\#1217](https://github.com/primefaces/primereact/issues/1217)
-- Add filterPlaceholder to Listbox [\#1215](https://github.com/primefaces/primereact/issues/1215)
-- Improve style of p-link component [\#1213](https://github.com/primefaces/primereact/issues/1213)
-- Implement className in MultiSelect, Dropdown, SelectButton, ListBox options [\#1175](https://github.com/primefaces/primereact/issues/1175)
-- Allow Dialogs already maximized  [\#1170](https://github.com/primefaces/primereact/issues/1170)
-- Implement filterBy and filterMatchMode for Dropdown [\#1149](https://github.com/primefaces/primereact/issues/1149)
-- Change the type of the 'header' property on TabPanel [\#1079](https://github.com/primefaces/primereact/issues/1079)
-- DataTable Columns: Conditional reorder [\#1032](https://github.com/primefaces/primereact/issues/1032)
-- Datatable Columns: Conditional select [\#1031](https://github.com/primefaces/primereact/issues/1031)
-
-**Fixed bugs:**
-
-- Chips cover 100% although input is visually smaller [\#1241](https://github.com/primefaces/primereact/issues/1241)
-- Datatable doesn't change page when the last element on a page is removed. [\#1233](https://github.com/primefaces/primereact/issues/1233)
-- Filter does not work after adding a new node to the root node on Tree [\#1232](https://github.com/primefaces/primereact/issues/1232)
-- Clear Button does not clear the input value on Calendar [\#1231](https://github.com/primefaces/primereact/issues/1231)
--  Remove tabIndex from the headers of the non-sortable dataTable. [\#1219](https://github.com/primefaces/primereact/issues/1219)
-- The virtualScroll height is always added to rows on DataTable [\#1218](https://github.com/primefaces/primereact/issues/1218)
-- ContextMenu hide/onHide triggers even though already hidden [\#1189](https://github.com/primefaces/primereact/issues/1189)
-- Tree does not support Font Awesome icons [\#1187](https://github.com/primefaces/primereact/issues/1187)
-- Reset filter textbox of dropdown if options changes [\#1179](https://github.com/primefaces/primereact/issues/1179)
-- Deadlock situation in range slider [\#1094](https://github.com/primefaces/primereact/issues/1094)
-
-## [4.0.0](https://github.com/primefaces/primereact/tree/4.0.0) (2020-02-27)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.4.0...4.0.0)
-
-**Implemented New Features and Enhancements:**
-
-- Add keepInvalid property to Calendar [\#1204](https://github.com/primefaces/primereact/issues/1204)
-- Add position property to Dialog [\#1203](https://github.com/primefaces/primereact/issues/1203)
-- Add FocusTrap support to Dialog [\#1202](https://github.com/primefaces/primereact/issues/1202)
-- Add sortFunction support to DataTable with multiple column sorting [\#1201](https://github.com/primefaces/primereact/issues/1201)
-- Remove min-width style from Dropdown [\#1196](https://github.com/primefaces/primereact/issues/1196)
-- Add maskClassName property to Dialog [\#1194](https://github.com/primefaces/primereact/issues/1194)
-- ReImplemented Steps styles [\#1191](https://github.com/primefaces/primereact/issues/1191)
-- Leave animation for Dialog [\#1181](https://github.com/primefaces/primereact/issues/1181)
-- Dialog header not visible [\#1174](https://github.com/primefaces/primereact/issues/1174)
-- Dialog is not displayed correctly in mobile view [\#1165](https://github.com/primefaces/primereact/issues/1165)
-- Add sort number feature to sortable columns on DataTable and TreeTable with multi sorting [\#1164](https://github.com/primefaces/primereact/issues/1164)
-- Add onRemove callback to FileUpload [\#1152](https://github.com/primefaces/primereact/issues/1152)
-- Add editing support to the input field on Calendar [\#1141](https://github.com/primefaces/primereact/issues/1141)
-- New Component: Galleria [\#1105](https://github.com/primefaces/primereact/issues/1105)
-
-**Fixed bugs:**
-
-- Remove the legacy lifecycle method from Lightbox component [\#1200](https://github.com/primefaces/primereact/issues/1200)
-- The  disabled items can be focused in the Steps [\#1192](https://github.com/primefaces/primereact/issues/1192)
-- Alignment problem on Growl message without details [\#1190](https://github.com/primefaces/primereact/issues/1190)
-- Maximizable property is not working correctly on dialog [\#1169](https://github.com/primefaces/primereact/issues/1169)
-- Dismissable mask behaves over dialog [\#1167](https://github.com/primefaces/primereact/issues/1167)
-- Typedefinition for DataTable OnFilter is wrong. [\#1163](https://github.com/primefaces/primereact/issues/1163)
-
-## [3.4.0](https://github.com/primefaces/primereact/tree/3.4.0) (2020-01-17)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.3...3.4.0)
-
-**Implemented New Features and Enhancements:**
-
-- Calendar component keyboard support [\#1157](https://github.com/primefaces/primereact/issues/1157)
-- Add expandableRowGroups property to DataTable [\#1148](https://github.com/primefaces/primereact/issues/1148)
-- Add removableSort property to DataTable [\#1142](https://github.com/primefaces/primereact/issues/1142)
-- Enhance Dialog Positioning [\#1138](https://github.com/primefaces/primereact/issues/1138)
-
-**Fixed bugs:**
-
-- Wrong property name on the propTypes definition of Dropdown  [\#1158](https://github.com/primefaces/primereact/issues/1158)
-- When the InputMask is focused, the mask disappears [\#1156](https://github.com/primefaces/primereact/issues/1156)
-- When the buttons inside the components are clicked, they submit the form [\#1155](https://github.com/primefaces/primereact/issues/1155)
-- The icon of the next button has wrong class name on Carousel [\#1154](https://github.com/primefaces/primereact/issues/1154)
-- Some DataView lazy and loading types missing [\#1131](https://github.com/primefaces/primereact/issues/1131)
-- TreeTable default filter value is not showing in the filter widget  [\#1129](https://github.com/primefaces/primereact/issues/1129)
-- InputTextarea does not render props like cols and rows [\#1127](https://github.com/primefaces/primereact/issues/1127)
-- PanelMenu Icon does not show for entries without sub children [\#1121](https://github.com/primefaces/primereact/issues/1121)
-- ContextMenu.d.ts has wrong property name [\#1118](https://github.com/primefaces/primereact/issues/1118)
-- Dropdown cannot open the panel after double clicking an option [\#1053](https://github.com/primefaces/primereact/issues/1053)
-- InputMask is not changing the mask at runtime. [\#1021](https://github.com/primefaces/primereact/issues/1021)
-
-## [3.3.3](https://github.com/primefaces/primereact/tree/3.3.3) (2019-11-29)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.2...3.3.3)
-
-**Implemented New Features and Enhancements:**
-
-- Add exportable property to Column [\#1103](https://github.com/primefaces/primereact/issues/1103)
-- Add exportFunction property to DataTable [\#1102](https://github.com/primefaces/primereact/issues/1102)
-- Add repeat functionality to timer buttons on Calendar [\#1101](https://github.com/primefaces/primereact/issues/1101)
-- Add reset method to DataTable [\#1088](https://github.com/primefaces/primereact/issues/1088)
-- onColReorder in Datatable parameter missing [\#1080](https://github.com/primefaces/primereact/issues/1080)
-- Add disabled property to Tree [\#1078](https://github.com/primefaces/primereact/issues/1078)
-- Add selectedItemsLabel property to MultiSelect [\#1075](https://github.com/primefaces/primereact/issues/1075)
-- Add maxSelectedLabels property to MultiSelect [\#1074](https://github.com/primefaces/primereact/issues/1074)
-- Passing of data-\* Attributes as Props [\#1073](https://github.com/primefaces/primereact/issues/1073)
-
-**Fixed bugs:**
-
-- DomHandler functions throw NPE on components [\#1104](https://github.com/primefaces/primereact/issues/1104)
-- Growl messages from "bottom\*" is not displaying as expected [\#1095](https://github.com/primefaces/primereact/issues/1095)
-- Properties of TreeNodes on TreeTable not Working [\#1085](https://github.com/primefaces/primereact/issues/1085)
-- className property of Message component not working [\#1076](https://github.com/primefaces/primereact/issues/1076)
-- Tree className property not working  [\#1068](https://github.com/primefaces/primereact/issues/1068)
-- Sidebar dismissable is only updating whenever the visible prop updates [\#1065](https://github.com/primefaces/primereact/issues/1065)
-- selectDate\(\) set date to undefined when minDate is set and selected date is \<= minDate [\#1056](https://github.com/primefaces/primereact/issues/1056)
-- Datatable multisort broken [\#617](https://github.com/primefaces/primereact/issues/617)
-
-## [3.3.2](https://github.com/primefaces/primereact/tree/3.3.2) (2019-10-22)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.1...3.3.2)
-
-**Fixed bugs:**
-
-- Table state is not working with columnResizeMode="expand" on DataTable [\#1061](https://github.com/primefaces/primereact/issues/1061)
-- Calendar component throws NPE after updating the value [\#1060](https://github.com/primefaces/primereact/issues/1060)
-
-## [3.3.1](https://github.com/primefaces/primereact/tree/3.3.1) (2019-10-18)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.0...3.3.1)
-
-**Implemented New Features and Enhancements:**
-
-- Improve component styles on Luna, Nova and Rhea Themes [\#1052](https://github.com/primefaces/primereact/issues/1052)
-- Improve Carousel styles [\#1051](https://github.com/primefaces/primereact/issues/1051)
-
-**Fixed bugs:**
-
--  Carousel is not working with 'primereact/carousel' shortcut [\#1049](https://github.com/primefaces/primereact/issues/1049)
-
-## [3.3.0](https://github.com/primefaces/primereact/tree/3.3.0) (2019-10-16)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.2.0...3.3.0)
-
-**Implemented New Features and Enhancements:**
-
-- Add closeOnEscape property to Sidebar [\#1046](https://github.com/primefaces/primereact/issues/1046)
-- InputTextarea: Floating Label [\#1040](https://github.com/primefaces/primereact/issues/1040)
-- Upgrade QuillJS 1.3.7 [\#1037](https://github.com/primefaces/primereact/issues/1037)
-- Add filterInputAutoFocus property to Dropdown [\#1036](https://github.com/primefaces/primereact/issues/1036)
-- New Component: Carousel [\#1030](https://github.com/primefaces/primereact/issues/1030)
-- Add className support to SelectButtonItems [\#1019](https://github.com/primefaces/primereact/issues/1019)
-
-**Fixed bugs:**
-
-- AutoComplete mode multiple ignores maxlength property [\#1045](https://github.com/primefaces/primereact/issues/1045)
-- The datatable is broken with scrollable and no columns settings [\#1044](https://github.com/primefaces/primereact/issues/1044)
-- Calendar Overlay doesnt open with current date after value update [\#999](https://github.com/primefaces/primereact/issues/999)
-
-## [3.2.0](https://github.com/primefaces/primereact/tree/3.2.0) (2019-09-12)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.9...3.2.0)
-
-**Implemented New Features and Enhancements:**
-
-- Add type property to AutoComplete [\#1010](https://github.com/primefaces/primereact/issues/1010)
-- Add customUpload property to FileUpload [\#1008](https://github.com/primefaces/primereact/issues/1008)
-- Improve columns' editor option on editing mode [\#1007](https://github.com/primefaces/primereact/issues/1007)
-- Add keyboard support to DataTable with Checkbox selection [\#1005](https://github.com/primefaces/primereact/issues/1005)
-- Add row edit support to DataTable [\#809](https://github.com/primefaces/primereact/issues/809)
-
-**Fixed bugs:**
-
-- DataTable with global filter and header checkbox selection select all records [\#1012](https://github.com/primefaces/primereact/issues/1012)
-- DataTable column headers not displaying in nested table [\#1009](https://github.com/primefaces/primereact/issues/1009)
-- DataTable has null state under certain conditions [\#1003](https://github.com/primefaces/primereact/issues/1003)
-- Value doesnt change on Input mask when unmask is enabled [\#998](https://github.com/primefaces/primereact/issues/998)
-
-## [3.1.9](https://github.com/primefaces/primereact/tree/3.1.9) (2019-08-28)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.8...3.1.9)
-
-**Implemented New Features and Enhancements:**
-
-- Datatable EditRow [\#935](https://github.com/primefaces/primereact/issues/935)
-- Add className option to Tooltip [\#994](https://github.com/primefaces/primereact/issues/994)
-- Add focusOnShow property to Dialog [\#988](https://github.com/primefaces/primereact/issues/988)
-- Add displayValueTemplate property to ProgressBar [\#978](https://github.com/primefaces/primereact/issues/978)
-- Add tabIndex prop to Spinner [\#976](https://github.com/primefaces/primereact/issues/976)
-- Add tabIndex prop to RadioButton [\#975](https://github.com/primefaces/primereact/issues/975)
-
-**Fixed bugs:**
-
-- Wrong typings for the property of Spinner [\#1001](https://github.com/primefaces/primereact/issues/1001)
-- Export hide\(\) for ContextMenu in type definition file [\#1000](https://github.com/primefaces/primereact/issues/1000)
-- Style props doesnt update after re-rendering with Inputmask [\#996](https://github.com/primefaces/primereact/issues/996)
-- Nested originalEvent in DataTable header RowCheckbox event  [\#986](https://github.com/primefaces/primereact/issues/986)
-- Typings missing in DataTable: resetColumnOrder [\#980](https://github.com/primefaces/primereact/issues/980)
-- ProgressBar does not show value for 0% [\#973](https://github.com/primefaces/primereact/issues/973)
-- Tooltips appear with old contents after being undefined [\#972](https://github.com/primefaces/primereact/issues/972)
-
-## [3.1.8](https://github.com/primefaces/primereact/tree/3.1.8) (2019-07-25)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.7...3.1.8)
-
-**Implemented New Features and Enhancements:**
-
-- Resizable columns support with column groups [\#518](https://github.com/primefaces/primereact/issues/518)
-- Update to PrimeIcons 2.0.0 [\#970](https://github.com/primefaces/primereact/issues/970)
-- Datatable rowGroup with rowSpan mode: row separator line style on group break [\#967](https://github.com/primefaces/primereact/issues/967)
-- Growl detail should be placed in \<div\> not \<p\> [\#965](https://github.com/primefaces/primereact/issues/965)
-- Add autoFocus attribute to Autocomplete [\#963](https://github.com/primefaces/primereact/issues/963)
-- Add onTargetSelect and onSourceSelect props to Picklist [\#962](https://github.com/primefaces/primereact/issues/962)
-- Add tabIndex prop to ToggleButton [\#957](https://github.com/primefaces/primereact/issues/957)
-- Add required prop to RadioButton [\#953](https://github.com/primefaces/primereact/issues/953)
-- Add required prop to Checkbox [\#952](https://github.com/primefaces/primereact/issues/952)
-- Add shift key selection support to DataTable with multiple mode [\#934](https://github.com/primefaces/primereact/issues/934)
-
-**Fixed bugs:**
-
-- Calendar ButtonBar Clear button does not use clearButtonStyleClass prop [\#968](https://github.com/primefaces/primereact/issues/968)
-- Datatable rowGroup with rowSpan mode and pagination fails on page break [\#961](https://github.com/primefaces/primereact/issues/961)
-- DataTable fails to render if columns are mapped and has a static column [\#959](https://github.com/primefaces/primereact/issues/959)
-- Month View shows a redundant week on the calendar [\#956](https://github.com/primefaces/primereact/issues/956)
-- Simple DataScroller does not display items. [\#955](https://github.com/primefaces/primereact/issues/955)
-- The DataTable will sort a column when shrinking it on resize [\#944](https://github.com/primefaces/primereact/issues/944)
-
-## [3.1.7](https://github.com/primefaces/primereact/tree/3.1.7) (2019-06-25)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.6...3.1.7)
-
-**Fixed bugs:**
-
-- Charts always redraw when they are updated [\#946](https://github.com/primefaces/primereact/issues/946)
-
-## [3.1.6](https://github.com/primefaces/primereact/tree/3.1.6) (2019-06-25)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.5...3.1.6)
-
-**Fixed bugs:**
-
-- The ChartJs API is not imported correctly [\#945](https://github.com/primefaces/primereact/issues/945)
-- Inplace is not working with 'primereact/inplace' shortcut [\#943](https://github.com/primefaces/primereact/issues/943)
-
-## [3.1.5](https://github.com/primefaces/primereact/tree/3.1.5) (2019-06-24)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.4...3.1.5)
-
-**Implemented New Features and Enhancements:**
-
-- Add theme prop to Editor [\#938](https://github.com/primefaces/primereact/issues/938)
-- Add "replace" method in Messages component [\#930](https://github.com/primefaces/primereact/issues/930)
-- Add decimalSeparator and thousandSeparator props to Spinner [\#925](https://github.com/primefaces/primereact/issues/925)
-- Add formatInput prop to Spinner [\#924](https://github.com/primefaces/primereact/issues/924)
-- Add required, pattern and placeholder props to Spinner.  [\#920](https://github.com/primefaces/primereact/issues/920)
-- Add ariaCloseIconLabel prop to Dialog [\#916](https://github.com/primefaces/primereact/issues/916)
-
-**Fixed bugs:**
-
-- When components are placed placed inside a label element clicking on the component fires the click event twice [\#940](https://github.com/primefaces/primereact/issues/940)
-- The hide method of Dropdown throws an exception on console [\#937](https://github.com/primefaces/primereact/issues/937)
-- The "required" prop is not working on Dropdown [\#933](https://github.com/primefaces/primereact/issues/933)
-- Tooltip in chips does not work properly [\#932](https://github.com/primefaces/primereact/issues/932)
-- Empty array crashes Messages component [\#928](https://github.com/primefaces/primereact/issues/928)
-- The 'showWeek' prop throws an error with TypedScript on Calendar [\#926](https://github.com/primefaces/primereact/issues/926)
-- Close icon is still active on the disabled Chips  [\#918](https://github.com/primefaces/primereact/issues/918)
-- onRemove event does not exists on Growl component [\#914](https://github.com/primefaces/primereact/issues/914)
-- Can't resolve 'chart.js/src/chart.js' [\#913](https://github.com/primefaces/primereact/issues/913)
-- Second Sidebar reset blockScroll [\#910](https://github.com/primefaces/primereact/issues/910)
-- ProgressSpinner not visible in IE11 [\#908](https://github.com/primefaces/primereact/issues/908)
-- Wrong type for showWeek in Calendar.d.ts [\#907](https://github.com/primefaces/primereact/issues/907)
-
-## [3.1.4](https://github.com/primefaces/primereact/tree/3.1.4) (2019-05-30)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.3...3.1.4)
-
-**Implemented New Features and Enhancements:**
-
-- Add iconsTemplate to Dialog [\#905](https://github.com/primefaces/primereact/issues/905)
-- Modules property for Editor [\#904](https://github.com/primefaces/primereact/issues/904)
-- The ability to reset columnOrder in DataTable [\#899](https://github.com/primefaces/primereact/issues/899)
-- onFocus and onBlur for Chips [\#897](https://github.com/primefaces/primereact/issues/897)
-- Show week numbers for Calendar [\#894](https://github.com/primefaces/primereact/issues/894)
-- CellEditor should have onSubmit and onCancel method. [\#891](https://github.com/primefaces/primereact/issues/891)
-- Add expandIcon and collapseIcon props to Panel component [\#888](https://github.com/primefaces/primereact/issues/888)
-- Support for disabling dropdown item\(s\). [\#874](https://github.com/primefaces/primereact/issues/874)
-- Editable Dropdown should support maxLength [\#844](https://github.com/primefaces/primereact/issues/844)
-
-**Fixed bugs:**
-
-- Not able to set focus on Dropdown component [\#903](https://github.com/primefaces/primereact/issues/903)
-- Calendar time parsing broken for showSeconds == false [\#901](https://github.com/primefaces/primereact/issues/901)
-- DataTable sortFunction Typescript definition wrong [\#898](https://github.com/primefaces/primereact/issues/898)
-- Data\*: alwaysShowPaginator prop not used [\#896](https://github.com/primefaces/primereact/issues/896)
-- DataTable expanded rows collapse when modifying one property of a record [\#884](https://github.com/primefaces/primereact/issues/884)
-- The scroll bar is not moving correctly on the DataTable with resizeMode="expand" [\#881](https://github.com/primefaces/primereact/issues/881)
-- Dropdown showClear not always displayed [\#875](https://github.com/primefaces/primereact/issues/875)
-- Unlogical editor navigation with shift+tab in DataTable [\#843](https://github.com/primefaces/primereact/issues/843)
-- Cannot read property 'show' of undefined at FileUpload.validate  [\#802](https://github.com/primefaces/primereact/issues/802)
-- DataTable onValueChange callback one key press behind when using custom InputText filter  [\#777](https://github.com/primefaces/primereact/issues/777)
-
-## [3.1.3](https://github.com/primefaces/primereact/tree/3.1.3) (2019-05-06)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.2...3.1.3)
-
-**Implemented New Features and Enhancements:**
-
-- Multiple target support to OverlayPanel [\#873](https://github.com/primefaces/primereact/issues/873)
-- Improve outside click on OverlayPanel [\#872](https://github.com/primefaces/primereact/issues/872)
-- Calendar panel is not aligned correctly on window resize [\#870](https://github.com/primefaces/primereact/issues/870)
-- Improve outside click on Calendar [\#869](https://github.com/primefaces/primereact/issues/869)
-- The min/max date support is added to Calendar for monthNavigation and yearNavigation [\#859](https://github.com/primefaces/primereact/issues/859)
-- Add ariaLabel and ariaLabelledBy properties to DropDown [\#855](https://github.com/primefaces/primereact/issues/855)
-- Add contentStyle and contentClassName props to Tree [\#842](https://github.com/primefaces/primereact/issues/842)
-
-**Fixed bugs:**
-
-- OverlayPanel's icon is in the wrong position after window is resized [\#871](https://github.com/primefaces/primereact/issues/871)
-- Flipped OverlayPanel rendered behind browser [\#868](https://github.com/primefaces/primereact/issues/868)
-- Missing method typings for OverlayPanel [\#865](https://github.com/primefaces/primereact/issues/865)
-- Calendar used in DataTable is unable to switch months [\#860](https://github.com/primefaces/primereact/issues/860)
-- Calendar view="month" does not allow typing [\#856](https://github.com/primefaces/primereact/issues/856)
-- OnHide callback is not called when visibility property is changed [\#854](https://github.com/primefaces/primereact/issues/854)
-- Add stateStorage property to DataTable.d.ts [\#851](https://github.com/primefaces/primereact/issues/851)
-- The tableStyle and tableClassName props have no effect on Scrollable DataTable [\#849](https://github.com/primefaces/primereact/issues/849)
-- Calendar is rendering behind the browser window. [\#840](https://github.com/primefaces/primereact/issues/840)
-- onRowSelect called instead of onRowUnselect [\#835](https://github.com/primefaces/primereact/issues/835)
-- Chart doesn't reload when new data is added to it [\#834](https://github.com/primefaces/primereact/issues/834)
-- Datatable scrollHeight can't be changed [\#662](https://github.com/primefaces/primereact/issues/662)
-
-## [3.1.2](https://github.com/primefaces/primereact/tree/3.1.2) (2019-04-03)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.1...3.1.2)
-
-**Fixed bugs:**
-
-- DataTable selection with uncontrolled sorting broken [\#830](https://github.com/primefaces/primereact/issues/830)
-
-## [3.1.1](https://github.com/primefaces/primereact/tree/3.1.1) (2019-03-31)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.0...3.1.1)
-
-**Implemented New Features and Enhancements:**
-
-- Improve disabled header style on Accordion [\#828](https://github.com/primefaces/primereact/issues/828)
-- Update to FullCalendar 4.0.1 [\#827](https://github.com/primefaces/primereact/issues/827)
-- Remove autoWidth from Dropdown [\#826](https://github.com/primefaces/primereact/issues/826)
-- Improve DataTable VirtualScrolling [\#825](https://github.com/primefaces/primereact/issues/825)
-- Update dialog animations [\#823](https://github.com/primefaces/primereact/issues/823)
-- Close datatable cell editor programmatically [\#822](https://github.com/primefaces/primereact/issues/822)
-- DataTable row selection slow with sortable columns [\#813](https://github.com/primefaces/primereact/issues/813)
-- Add onBlur and onFocus events to multiselect and chips [\#782](https://github.com/primefaces/primereact/issues/782)
-
-**Fixed bugs:**
-
-- On Accordion, the disabled head can be focused on  [\#829](https://github.com/primefaces/primereact/issues/829)
-- Datatable property 'stateKey' is missing in types file [\#817](https://github.com/primefaces/primereact/issues/817)
-- Datatable row onClick typescript definition does not match the function or documentation [\#815](https://github.com/primefaces/primereact/issues/815)
-- Overlays wrong position on initial/first render [\#814](https://github.com/primefaces/primereact/issues/814)
-- Chart with latest chart.js does not build [\#812](https://github.com/primefaces/primereact/issues/812)
-- FileUpload thows JS exception in Edge [\#808](https://github.com/primefaces/primereact/issues/808)
-- SlideMenu empty after model change [\#807](https://github.com/primefaces/primereact/issues/807)
-- Dropdown duplicated IDs [\#805](https://github.com/primefaces/primereact/issues/805)
-- DataTable crashes with a "Cannot read property 'xxx' of undefined" for nested objects [\#791](https://github.com/primefaces/primereact/issues/791)
-- Syntax error in optional typescript function interface [\#790](https://github.com/primefaces/primereact/issues/790)
-- Using "maxlength" of Spinner causes errors [\#787](https://github.com/primefaces/primereact/issues/787)
-- "propTypes" incorrectly named as "propsTypes" [\#784](https://github.com/primefaces/primereact/issues/784)
-- Changes to prop does not render ProgressBar [\#783](https://github.com/primefaces/primereact/issues/783)
-- Dropdown - TypeError: Cannot read property 'element' of null [\#781](https://github.com/primefaces/primereact/issues/781)
-- propTypes error using new iconsTemplate [\#780](https://github.com/primefaces/primereact/issues/780)
-- Datatable does not scroll horizontally when there is no data [\#635](https://github.com/primefaces/primereact/issues/635)
-
-## [3.1.0](https://github.com/primefaces/primereact/tree/3.1.0) (2019-02-19)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.0.0...3.1.0)
-
-**Implemented New Features and Enhancements:**
-
-- Filtering for Tree [\#769](https://github.com/primefaces/primereact/issues/769)
-- onClose event for OverlayPanel  [\#763](https://github.com/primefaces/primereact/issues/763)
-- Arrow for OverlayPanel [\#762](https://github.com/primefaces/primereact/issues/762)
-- Improve style of p-link component [\#760](https://github.com/primefaces/primereact/issues/760)
-- TableState for DataTable [\#736](https://github.com/primefaces/primereact/issues/736)
-- Filtering for TreeTable [\#380](https://github.com/primefaces/primereact/issues/380)
-
-**Fixed bugs:**
-
-- Datatable toggle issue after reordering [\#774](https://github.com/primefaces/primereact/issues/774)
-- Inputtextarea autoresize invalid height issue after render [\#773](https://github.com/primefaces/primereact/issues/773)
-- TreeTableBodyCell.js: Uncaught TypeError: Cannot read property 'removeAttribute' of null [\#772](https://github.com/primefaces/primereact/issues/772)
-- Dropdown with dataKey attribute throws console errors. [\#768](https://github.com/primefaces/primereact/issues/768)
-- Multiple selection in a table without data is selected by default [\#766](https://github.com/primefaces/primereact/issues/766)
-- InputGroup border issue for using with other components [\#761](https://github.com/primefaces/primereact/issues/761)
-- code debugger in production mode "component input calendar" [\#751](https://github.com/primefaces/primereact/issues/751)
-
-## [3.0.0](https://github.com/primefaces/primereact/tree/3.0.0) (2019-01-22)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.0.0-rc.1...3.0.0)
-
-**Implemented New Features and Enhancements:**
-
-- Customizable editorValidatorEvent for IncellEditing [\#746](https://github.com/primefaces/primereact/issues/746)
-
-**Fixed bugs:**
-
-- Spinner arrow keys not working [\#743](https://github.com/primefaces/primereact/issues/743)
-- Toolbar of Editor Component with nova-dark theme does not render properly. [\#740](https://github.com/primefaces/primereact/issues/740)
-- Paginator - Uncaught TypeError: this.getOptionLabel\(...\).toLowerCase is not a function [\#739](https://github.com/primefaces/primereact/issues/739)
-
-## [3.0.0-rc.1](https://github.com/primefaces/primereact/tree/3.0.0-rc.1) (2019-01-10)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/3.0.0-beta.1...3.0.0-rc.1)
-
-**Implemented New Features and Enhancements:**
-
-- Rename defaultLabel to placeholder in MultiSelect [\#733](https://github.com/primefaces/primereact/issues/733)
-- Enhance accessibility for Checkbox with ARIA roles [\#729](https://github.com/primefaces/primereact/issues/729)
-- Ability to use dataKey as the key in Dropdown [\#727](https://github.com/primefaces/primereact/issues/727)
-- Focused editable Dropdown looks different than non-editable [\#725](https://github.com/primefaces/primereact/issues/725)
-- Header and Footer templates for Calendar component [\#706](https://github.com/primefaces/primereact/issues/706)
-- MultiSelect - Support a fixed defaultLabel [\#674](https://github.com/primefaces/primereact/issues/674)
-
-**Fixed bugs:**
-
-- InputSwitch focus visuals are missing [\#735](https://github.com/primefaces/primereact/issues/735)
-- DataTable edit throws error on route change [\#734](https://github.com/primefaces/primereact/issues/734)
-- Incorrect column sortable prop type definition [\#730](https://github.com/primefaces/primereact/issues/730)
-- ScrollPanel: Cannot read property 'classList' of null [\#726](https://github.com/primefaces/primereact/issues/726)
-- Editor component cannot refresh it's value when the state change [\#724](https://github.com/primefaces/primereact/issues/724)
-- Editor active item is not highlighted in toolbar [\#722](https://github.com/primefaces/primereact/issues/722)
-- InputMask doesn't update the value according to state [\#686](https://github.com/primefaces/primereact/issues/686)
-- DataTable: hide column after reordering columns throws exception [\#668](https://github.com/primefaces/primereact/issues/668)
-- Form validity is true, even though no Dropdown selection has been made. [\#665](https://github.com/primefaces/primereact/issues/665)
-
-## [3.0.0-beta.1](https://github.com/primefaces/primereact/tree/3.0.0-beta.1) (2018-12-24)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.1...3.0.0-beta.1)
-
-**Implemented New Features and Enhancements:**
-
-- Reimplement Menubar [\#721](https://github.com/primefaces/primereact/issues/721)
-- Reimplement TieredMenu [\#720](https://github.com/primefaces/primereact/issues/720)
-- Keyboard Accessibility for Menu [\#719](https://github.com/primefaces/primereact/issues/719)
-- Reimplement PanelMenu Animation with CSSTransition  [\#718](https://github.com/primefaces/primereact/issues/718)
-- Remove certain props from Dialog [\#717](https://github.com/primefaces/primereact/issues/717)
-- Reimplement Dialog Positioning [\#715](https://github.com/primefaces/primereact/issues/715)
-- Reimplement Accordion Animation with CSSTransition [\#714](https://github.com/primefaces/primereact/issues/714)
-- Reimplement Fieldset Animation with CSSTransition [\#712](https://github.com/primefaces/primereact/issues/712)
-- Enhance Dialog Animation [\#711](https://github.com/primefaces/primereact/issues/711)
-- Reimplement Panel Animation with CSSTransition [\#710](https://github.com/primefaces/primereact/issues/710)
-- Unify focus visuals in themes [\#709](https://github.com/primefaces/primereact/issues/709)
-- Keyboard Accessibility for PanelMenu [\#703](https://github.com/primefaces/primereact/issues/703)
-- Keyboard Accessibility for MegaMenu [\#702](https://github.com/primefaces/primereact/issues/702)
-- Keyboard Accessibility for Menubar [\#701](https://github.com/primefaces/primereact/issues/701)
-- Keyboard Accessibility for TieredMenu [\#700](https://github.com/primefaces/primereact/issues/700)
-- Improve Lightbox [\#699](https://github.com/primefaces/primereact/issues/699)
-- Keyboard Accessibility for Inplace [\#698](https://github.com/primefaces/primereact/issues/698)
-- Keyboard accessibility for PickList [\#697](https://github.com/primefaces/primereact/issues/697)
-- Keyboard Accessibility for OrderList [\#696](https://github.com/primefaces/primereact/issues/696)
-- Keyboard Accessibility for InputSwitch [\#695](https://github.com/primefaces/primereact/issues/695)
-- DataTable/TreeTable sort headers should be keyboard accessible [\#693](https://github.com/primefaces/primereact/issues/693)
-- Sidebar close icon should receive focus on open [\#692](https://github.com/primefaces/primereact/issues/692)
-- Keyboard Accessibility for MultiSelect [\#691](https://github.com/primefaces/primereact/issues/691)
-- Improve Listbox Accessibility [\#690](https://github.com/primefaces/primereact/issues/690)
-- Improve ToggleButton Accessibility [\#689](https://github.com/primefaces/primereact/issues/689)
-- Improve SelectButton Accessibility [\#687](https://github.com/primefaces/primereact/issues/687)
-- Keyboard navigation support for Showcsse [\#684](https://github.com/primefaces/primereact/issues/684)
-- Replace anchors without href with buttons [\#683](https://github.com/primefaces/primereact/issues/683)
-- Update to Babel 7 [\#682](https://github.com/primefaces/primereact/issues/682)
-- Improve Radio/Checkbox Accessibility [\#681](https://github.com/primefaces/primereact/issues/681)
-
-**Fixed bugs:**
-
-- AutoComplete in multiple mode does not receive focus [\#713](https://github.com/primefaces/primereact/issues/713)
-- OrderList droppoints are not highlighted [\#708](https://github.com/primefaces/primereact/issues/708)
-- TreeTable Pagination Error [\#685](https://github.com/primefaces/primereact/issues/685)
-- Problem TextArea component  "Disabled" [\#679](https://github.com/primefaces/primereact/issues/679)
-- Datatable horizontal scroll trigger onVirtualScroll [\#677](https://github.com/primefaces/primereact/issues/677)
-- Spinner does not show the value 0 [\#675](https://github.com/primefaces/primereact/issues/675)
-- KeyFilter uses static instance of the regex [\#672](https://github.com/primefaces/primereact/issues/672)
-- slider.d.ts has wrong import syntax [\#671](https://github.com/primefaces/primereact/issues/671)
-
-## [2.0.1](https://github.com/primefaces/primereact/tree/2.0.1) (2018-12-06)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0...2.0.1)
-
-**Fixed bugs:**
-
-- Align SplitButton Overlay with other overlays [\#667](https://github.com/primefaces/primereact/issues/667)
-- Standalone paginator causes replace is undefined error [\#666](https://github.com/primefaces/primereact/issues/666)
-- onRowCollapse doesn't work on expanded row [\#664](https://github.com/primefaces/primereact/issues/664)
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.6.0...10.6.1)
 
-## [2.0.0](https://github.com/primefaces/primereact/tree/2.0.0) (2018-12-05)
+## [10.6.0](https://github.com/primefaces/primereact/tree/10.6.0) (2024-03-29)
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-rc.1...2.0.0)
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.5.3...10.6.0)
 
-**Implemented New Features and Enhancements:**
+**New Features:**
 
-- More paginator options to DataView [\#657](https://github.com/primefaces/primereact/issues/657)
-- Filtered Dropdown does not close after pressing Enter [\#649](https://github.com/primefaces/primereact/issues/649)
-- Ability to get filtered and/or sorted data in DataTable [\#643](https://github.com/primefaces/primereact/issues/643)
-- Add modal prop to Sidebar [\#639](https://github.com/primefaces/primereact/issues/639)
-- Add currentPageReportTemplate property to Paginator  [\#636](https://github.com/primefaces/primereact/issues/636)
-- ProgressBar avoidable re-renders [\#597](https://github.com/primefaces/primereact/issues/597)
-- Feature request: Allow us to choose a different optionLabel to display selected items in MultiSelect [\#451](https://github.com/primefaces/primereact/issues/451)
+- New Component - Stepper [\#6250](https://github.com/primefaces/primereact/issues/6250)
+- New Component - ButtonGroup [\#6251](https://github.com/primefaces/primereact/issues/6251)
+- New Component - FloatLabel [\#6190](https://github.com/primefaces/primereact/issues/6190)
+- New Component - IconField | InputIcon [\#6229](https://github.com/primefaces/primereact/issues/6229)
+- Datatable: "not-in" mode for filter function [\#6252](https://github.com/primefaces/primereact/issues/6252)
 
-**Fixed bugs:**
+**Enhancements:**
 
-- Today cell is not highlighed in Calendar when selected [\#660](https://github.com/primefaces/primereact/issues/660)
-- Header checkbox fails with filtering [\#659](https://github.com/primefaces/primereact/issues/659)
-- Data Table resize: disable rightmost border [\#656](https://github.com/primefaces/primereact/issues/656)
-- DataTable Column sortField is ignored [\#653](https://github.com/primefaces/primereact/issues/653)
-- TreeTable: propagateSelectionUp Defect [\#650](https://github.com/primefaces/primereact/issues/650)
-- cannot read property 'dayNamesShort' of undefined [\#647](https://github.com/primefaces/primereact/issues/647)
-- this.props.onSelectionChange is not a function in DataTable [\#641](https://github.com/primefaces/primereact/issues/641)
-- viewDate.getMonth\(\) is not a function [\#612](https://github.com/primefaces/primereact/issues/612)
-
-## [2.0.0-rc.1](https://github.com/primefaces/primereact/tree/2.0.0-rc.1) (2018-11-12)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.9...2.0.0-rc.1)
-
-**Implemented New Features and Enhancements:**
-
-- Dialog default prop values [\#638](https://github.com/primefaces/primereact/issues/638)
-- Reimplement InputTextarea Resize [\#629](https://github.com/primefaces/primereact/issues/629)
-- Remove Schedule [\#628](https://github.com/primefaces/primereact/issues/628)
-- Replace event.data with event.value at onSelectionChange of DataTable [\#626](https://github.com/primefaces/primereact/issues/626)
-- Reimplement ContextMenu Selection of DataTable [\#625](https://github.com/primefaces/primereact/issues/625)
-- Enter key should select a Tree node [\#624](https://github.com/primefaces/primereact/issues/624)
-- Remove defaultExpanded from TreeNode [\#623](https://github.com/primefaces/primereact/issues/623)
-- renderActiveOnly prop for  Tabs [\#618](https://github.com/primefaces/primereact/issues/618)
-- virtualRowHeight attribute in Table component [\#616](https://github.com/primefaces/primereact/issues/616)
-- Remove defaultExpanded from TreeNode API [\#606](https://github.com/primefaces/primereact/issues/606)
-- Keyboard Support for Table Row Selection [\#605](https://github.com/primefaces/primereact/issues/605)
-- Select a tree node with enter key [\#604](https://github.com/primefaces/primereact/issues/604)
-- Improve button focus visuals on Nova and Luna [\#602](https://github.com/primefaces/primereact/issues/602)
+- Component structure enhancement - Tree TreeTable [\#6240](https://github.com/primefaces/primereact/issues/6240)
+- MultistateCheckbox update [\#6249](https://github.com/primefaces/primereact/issues/6249)
+- Enhancement focusOnHover Prop [\#6230](https://github.com/primefaces/primereact/issues/6230)
+- TreeSelect: can't change default text "No results found" when not find data in filter TreeSelect [\#6173](https://github.com/primefaces/primereact/issues/6173)
+- Listbox - focusOnHover prop [\#6171](https://github.com/primefaces/primereact/issues/6171)
+- Upgrade PrimeIcons 7.0.0 [\#6255](https://github.com/primefaces/primereact/issues/6255)
 
 **Fixed bugs:**
 
-- Dropdown throws error on hide [\#631](https://github.com/primefaces/primereact/issues/631)
-- AccordionTab title with custom HTML gives error [\#615](https://github.com/primefaces/primereact/issues/615)
-- Datatable autoLayout not working [\#599](https://github.com/primefaces/primereact/issues/599)
-- Tooltips not updating [\#598](https://github.com/primefaces/primereact/issues/598)
-- Dialog z-index [\#596](https://github.com/primefaces/primereact/issues/596)
-
-## [2.0.0-beta.9](https://github.com/primefaces/primereact/tree/2.0.0-beta.9) (2018-10-08)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.8...2.0.0-beta.9)
-
-**Implemented New Features and Enhancements:**
-
-- Reimplement Slider [\#592](https://github.com/primefaces/primereact/issues/592)
-- New Component: DeferredContent [\#591](https://github.com/primefaces/primereact/issues/591)
+- Paginator: JumpToPageInput is broken by latest changes in Paginator [\#6226](https://github.com/primefaces/primereact/issues/6226)
+- RadioButton: onChange is being triggered twice. [\#6223](https://github.com/primefaces/primereact/issues/6223)
+- MultiSelect: selectionMessage not changing using locales [\#6220](https://github.com/primefaces/primereact/issues/6220)
+- DataTable: NumpadEnter ignored during cell editing (and many other cases) [\#6023](https://github.com/primefaces/primereact/issues/6023)
+- InputNumber: Does not allow copy/pasting [\#6192](https://github.com/primefaces/primereact/issues/6192)
+- DataTable: RowClass conditional styling not working [\#6194](https://github.com/primefaces/primereact/issues/6194)
+- Calendar: AM/PM does not work properly if minDate and maxDate validations are provided as prop [\#6151](https://github.com/primefaces/primereact/issues/6151)
+- Calendar: When using timeonly and stepMinute prop together, minute is not showing correctly in the input field [\#5998](https://github.com/primefaces/primereact/issues/5998)
+- DataTable 10.5.3: Drag to select doesn't work on any page past page 1 when paginated [\#6211](https://github.com/primefaces/primereact/issues/6211)
+- Checkbox: Warning: specify either the checked prop, or the defaultChecked prop, but not both [\#6197](https://github.com/primefaces/primereact/issues/6197)
+- Dropdown: missing hover style [\#6196](https://github.com/primefaces/primereact/issues/6196)
+- TabView: Id doubles at root and nav elements [\#6201](https://github.com/primefaces/primereact/issues/6201)
+- RadioButton, ToggleButton: Warning: Invalid DOM property readonly. Did you mean readOnly? [\#6186](https://github.com/primefaces/primereact/issues/6186)
+- RadioButtoCheckBox wrong display [\#6181](https://github.com/primefaces/primereact/issues/6181)
+- Checkbox: prop onClick changes the event type in 10.5.3 [\#6231](https://github.com/primefaces/primereact/issues/6231)
+- TabView: TabPanel doesn't close if the 'closeIcon' prop is used [\#6165](https://github.com/primefaces/primereact/issues/6165)
+- DataTable: Column Filter Typescript fix [\#6233](https://github.com/primefaces/primereact/issues/6233)
+- ListBox: throw undefined error calling preventDefault() when running jest tests. [\#6184](https://github.com/primefaces/primereact/issues/6184)
+
+## [10.5.3](https://github.com/primefaces/primereact/tree/10.5.3) (2024-03-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.5.2...10.5.3)
 
 **Fixed bugs:**
 
-- Add disabled property to Slider [\#593](https://github.com/primefaces/primereact/issues/593)
-- Floating label for TextInput with number value fails [\#588](https://github.com/primefaces/primereact/issues/588)
-- Sidebar component not working when visible by default [\#587](https://github.com/primefaces/primereact/issues/587)
-- Presence of step prop will slow down reactivity of the Slider component [\#586](https://github.com/primefaces/primereact/issues/586)
+- Messages Missing MergeProps [\#6179](https://github.com/primefaces/primereact/issues/6179)
 
-## [2.0.0-beta.8](https://github.com/primefaces/primereact/tree/2.0.0-beta.8) (2018-09-24)
+## [10.5.2](https://github.com/primefaces/primereact/tree/10.5.2) (2024-03-19)
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.7...2.0.0-beta.8)
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.5.1...10.5.2)
 
-**Implemented New Features and Enhancements:**
+**New Features:**
 
-- PrimeReact input events are not compatible with React forms libraries [\#537](https://github.com/primefaces/primereact/issues/537)
-- Aria roles and attributes for Tree [\#580](https://github.com/primefaces/primereact/issues/580)
-- New Luna Free Dark Theme Family [\#579](https://github.com/primefaces/primereact/issues/579)
-- Keyboard navigation for Tree [\#578](https://github.com/primefaces/primereact/issues/578)
-- Enhanced keyboard search for dropdown [\#577](https://github.com/primefaces/primereact/issues/577)
+- Calendar: add 'hideOnRangeSelection' from PrimeVue [\#5970](https://github.com/primefaces/primereact/issues/5970)
+- New MeterGroup Component [\#5977](https://github.com/primefaces/primereact/issues/5977)
+- New invalid properties [\#6139](https://github.com/primefaces/primereact/issues/6139)
 
-**Fixed bugs:**
-
-- DataTable sort issue with sortIcon [\#585](https://github.com/primefaces/primereact/issues/585)
-- AutoComplete does not update input when value prop changes [\#576](https://github.com/primefaces/primereact/issues/576)
-- Typos in Tree.d.ts [\#573](https://github.com/primefaces/primereact/issues/573)
+**Enhancements:**
 
-## [2.0.0-beta.7](https://github.com/primefaces/primereact/tree/2.0.0-beta.7) (2018-09-18)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.6...2.0.0-beta.7)
+- Primereact uses document.getElementById(undefined) for appending component styles [\#6079](https://github.com/primefaces/primereact/issues/6079)
+- InputNumber: onChange and onValueChange events are not triggered when using keyboard shortcut for "cut" action [\#6047](https://github.com/primefaces/primereact/issues/6047)
+- StyleClass: deprecate enterClassName/leaveClassName use enterFromClassName/leaveFromClassName [\#6105](https://github.com/primefaces/primereact/issues/6105)
+- Contrast and Secondary Variants for Badge/Tag/Message/Toast [\#5985](https://github.com/primefaces/primereact/issues/5985)
+- LastPageLink in Paginator: doesn't give "totalPages" in options [\#5978](https://github.com/primefaces/primereact/issues/5978)
+- Toast: onRemove's message changes its data structure [\#5972](https://github.com/primefaces/primereact/issues/5972)
+- Password: (accessiblility) cannot access toggle button using keyboard [\#6046](https://github.com/primefaces/primereact/issues/6046)
+- DataTable_BodyCell: Duplicate key "aria-label" in object literal [\#6168](https://github.com/primefaces/primereact/issues/6168)
+- Splitter: Accessibility updates [\#6039](https://github.com/primefaces/primereact/issues/6039)
+- Tree : Accessibility issues [\#5426](https://github.com/primefaces/primereact/issues/5426)
+- Primereact Dropdown accessibility. Value isn't being read by VoiceOver screen reader. [\#5836](https://github.com/primefaces/primereact/issues/5836)
+- Multiselect: Accessibility issue aria-allowed-role - list-box role not allowed [\#5446](https://github.com/primefaces/primereact/issues/5446)
+- ListBox: options not focusable using keyboard [\#3672](https://github.com/primefaces/primereact/issues/3672)
+- Dropdown: NVDA failed to read correctly readonly [\#1413](https://github.com/primefaces/primereact/issues/1413)
 
 **Fixed bugs:**
 
-- Uncontrolled input text does not support floating labels [\#572](https://github.com/primefaces/primereact/issues/572)
-- VirtualScroll is broken [\#560](https://github.com/primefaces/primereact/issues/560)
-
-## [2.0.0-beta.6](https://github.com/primefaces/primereact/tree/2.0.0-beta.6) (2018-09-17)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.5...2.0.0-beta.6)
-
-**Fixed bugs:**
-
-- Dialog mask has no index at initial display [\#571](https://github.com/primefaces/primereact/issues/571)
-- New Tree component: duplicate key error when 2 TreeNodes has same label [\#570](https://github.com/primefaces/primereact/issues/570)
-
-## [2.0.0-beta.5](https://github.com/primefaces/primereact/tree/2.0.0-beta.5) (2018-09-11)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.4...2.0.0-beta.5)
+- MultiStateCheckbox: unstyled prop doesnt work properly [\#6061](https://github.com/primefaces/primereact/issues/6061)
+- Dropdown: unselects option when loses focus [\#6035](https://github.com/primefaces/primereact/issues/6035)
+- Image: Preview toolbar buttons only close the preview in unstyled NextJS 14 [\#6037](https://github.com/primefaces/primereact/issues/6037)
+- Dropdown component fails to expand the dropdown box after adding the filter and editable properties. [\#6027](https://github.com/primefaces/primereact/issues/6027)
+- Tree: Lazy loaded tree crashes when using keyboard navigation (right arrow) to expand [\#6049](https://github.com/primefaces/primereact/issues/6049)
+- DomHandler.js: getComputedStyle getPropertyValue should be in hyphen case. [\#6055](https://github.com/primefaces/primereact/issues/6055)
+- AutoComplete: Resetting value doesn't work [\#6044](https://github.com/primefaces/primereact/issues/6044)
+- Chips: the component doesn't function properly on mobile devices [\#6086](https://github.com/primefaces/primereact/issues/6086)
+- MultiSelect: selectedOption undefined on MultiSelectChangeEvent [\#6097](https://github.com/primefaces/primereact/issues/6097)
+- Documentation: Problem with Dark Theme in Default column on Components API section [\#6125](https://github.com/primefaces/primereact/issues/6125)
+- Datatable: Horizontal scroller with selection/checkbox resets to initial position on clicking row [\#3155](https://github.com/primefaces/primereact/issues/3155)
+- Password: the feedback bar does not reset when I clear the field [\#6119](https://github.com/primefaces/primereact/issues/6119)
+- Slider: Null event.value within the onSlideEnd [\#6101](https://github.com/primefaces/primereact/issues/6101)
+- Typescript: update LocaleOptions interface [\#6050](https://github.com/primefaces/primereact/issues/6050)
+- Accordion/PanelMenu: (Tailwind) animation issues [\#5540](https://github.com/primefaces/primereact/issues/5540)
+- InputNumber onValueChange ignores Numpad Enter [\#6107](https://github.com/primefaces/primereact/issues/6107)
+- Dialog: inconsistency between theming documentation and used classnames (from source code) [\#6024](https://github.com/primefaces/primereact/issues/6024)
+- OrganizationChart: Documentation issue in Basic and Template sections. [\#6070](https://github.com/primefaces/primereact/issues/6070)
+- TreeTable: Documentation issues [\#6078](https://github.com/primefaces/primereact/issues/6078)
+- Sidebar: "Pass Through" documentation corrections [\#6068](https://github.com/primefaces/primereact/issues/6068)
+- Speed Dial: TypeError: Cannot read properties of undefined (reading 'visible') [\#6156](https://github.com/primefaces/primereact/issues/6156)
+- TextInput: className property is written two times into the class attribute in DOM [\#6160](https://github.com/primefaces/primereact/issues/6160)
+- Typo error in the DataTable documentation [\#6147](https://github.com/primefaces/primereact/issues/6147)
+- MultiSelect: loading prop in typescript shows error when called [\#6113](https://github.com/primefaces/primereact/issues/6113)
+- Documentation: Duplicate useState in HeadlessSidebar Demo Full Code Example [\#6033](https://github.com/primefaces/primereact/issues/6033)
+- Tailwind: content does not exist in MenuPassThroughOption [\#6063](https://github.com/primefaces/primereact/issues/6063)
+- Tooltip component shows unstyled error [\#6080](https://github.com/primefaces/primereact/issues/6080)
+- Calendar: TypeScript Definitions do not match with actual PT props [\#6094](https://github.com/primefaces/primereact/issues/6094)
+- Tree_Drag and Drop: validateDropPoint function is throwing error [\#6048](https://github.com/primefaces/primereact/issues/6048)
+- Tree: Custom icon assignation is not working [\#6116](https://github.com/primefaces/primereact/issues/6116)
+- ConfirmDialog. Error message: "Warning: Invalid value for prop content on div tag. [\#6111](https://github.com/primefaces/primereact/issues/6111)
+- Accordion: Wrong prop in TailwindDoc [\#6132](https://github.com/primefaces/primereact/issues/6132)
+- AutoComplete: event type in onInput prop is FormEvent-HtmlSpanElement [\#6145](https://github.com/primefaces/primereact/issues/6145)
+- Dropdown: editable prop requires optionLabel to be exactly "name" and options object to contain a "name" key [\#6076](https://github.com/primefaces/primereact/issues/6076)
+- TreeTable: Accessibility navigation is triggered when editing a cell following 10.3.3 update [\#6018](https://github.com/primefaces/primereact/issues/6018)
+- DataTable: Memory leak when data updated continuously [\#5927](https://github.com/primefaces/primereact/issues/5927)
+- DataTable: Virtual Scroller position resets upon lazy loaded [\#6015](https://github.com/primefaces/primereact/issues/6015)
+- Knobs: Wrong component shown in basic code example for React Hook Form [\#6013](https://github.com/primefaces/primereact/issues/6013)
+- Showcase: Problem For DataTable in TS [\#6002](https://github.com/primefaces/primereact/issues/6002)
+- useDisplayOrder: clears incorrect [\#6000](https://github.com/primefaces/primereact/issues/6000)
+- DataTable: Virtual Scroll error in dev mode [\#6006](https://github.com/primefaces/primereact/issues/6006)
+- Datatable + Virtual Scroller: Multiselect passes undefined to onSelectionChange [\#5870](https://github.com/primefaces/primereact/issues/5870)
+- Dropdown: editable input get console error when optionValue is not 'name' [\#6004](https://github.com/primefaces/primereact/issues/6004)
+- DataTable: rowClassName don't take prevalence over passthrough tailwind [\#5983](https://github.com/primefaces/primereact/issues/5983)
+- TabMenu is not updating its style when using unstyled mode and controlled mode [\#5992](https://github.com/primefaces/primereact/issues/5992)
+- SelectButton: Inappropriate UI [\#5841](https://github.com/primefaces/primereact/issues/5841)
+- Calendar: using yearNavigator cause exception error [\#5973](https://github.com/primefaces/primereact/issues/5973)
+- MenubarSub: Each child in a list should have a unique "key" prop. [\#5976](https://github.com/primefaces/primereact/issues/5976)
+- Sidebar: Unable to write unit test: groupToDisplayedElements'group'.findLastIndex is not a function [\#5954](https://github.com/primefaces/primereact/issues/5954)
+- BlockUI: setting blocked to false has no effect [\#5889](https://github.com/primefaces/primereact/issues/5889)
+- Select button accepts children but doesnt render them [\#5888](https://github.com/primefaces/primereact/issues/5888)
+- DataTableColReorderEvent.columns has a wrong type [\#5962](https://github.com/primefaces/primereact/issues/5962)
+
+## [10.5.1](https://github.com/primefaces/primereact/tree/10.5.1) (2024-02-14)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.5.0...10.5.1)
+
+**New Features:**
+
+- Icon: BlankIcon [\#5957](https://github.com/primefaces/primereact/issues/5957)
+
+**Enhancements:**
+
+- Tree: Missing emptyMessage prop [\#5950](https://github.com/primefaces/primereact/issues/5950)
+- MultiSelect: no way to change MultiSelect chips appearence [\#5935](https://github.com/primefaces/primereact/issues/5935)
 
 **Fixed bugs:**
 
-- Calendar warning with omission of onChange from InputText [\#569](https://github.com/primefaces/primereact/issues/569)
+- metaKeySelection default type is changed as false [\#5956](https://github.com/primefaces/primereact/issues/5956)
+- Hydration attribute mismatch on Icons [\#5955](https://github.com/primefaces/primereact/issues/5955)
+- Dropdown component is triggering onChange when tabbing over [\#5942](https://github.com/primefaces/primereact/issues/5942)
+- Menu component with routes rerenders all the components on every route [\#5941](https://github.com/primefaces/primereact/issues/5941)
+- Remove CodeSandbox Demos [\#5946](https://github.com/primefaces/primereact/issues/5946)
+- Multi-select / Dropdown will not lose focus [\#5929](https://github.com/primefaces/primereact/issues/5929)
+- Add ID to menubar top level prevents focus [\#5930](https://github.com/primefaces/primereact/issues/5930)
+- Splitter: local storage sync is not working [\#5916](https://github.com/primefaces/primereact/issues/5916)
+- DataTable: onRowEditValidator rowData is old value not newly updated value [\#2424](https://github.com/primefaces/primereact/issues/2424)
+- Tooltip Passthrough Options Not Styling [\#5932](https://github.com/primefaces/primereact/issues/5932)
+- PanelMenu: "activeItems" is read-only [\#5928](https://github.com/primefaces/primereact/issues/5928)
+- SplitButton appendTo="self" placement is wrong [\#5921](https://github.com/primefaces/primereact/issues/5921)
+- MultiSelect: Enter | Space Overlay Closes [\#5914](https://github.com/primefaces/primereact/issues/5914)
+- Calendar: Panel width too small with default Tailwind [\#5830](https://github.com/primefaces/primereact/issues/5830)
+- Password: Hand/Pointer icon not displayed while hovering over the eye icon in password ToggleMask mode [\#5905](https://github.com/primefaces/primereact/issues/5905)
 
-## [2.0.0-beta.4](https://github.com/primefaces/primereact/tree/2.0.0-beta.4) (2018-09-11)
+## [10.5.0](https://github.com/primefaces/primereact/tree/10.5.0) (2024-02-06)
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.3...2.0.0-beta.4)
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.4.0...10.5.0)
 
-**Implemented New Features and Enhancements:**
+**Enhancements:**
 
-- Keyboard support for Dialog Icons [\#568](https://github.com/primefaces/primereact/issues/568)
-- Pass column props to columnResizeEnd [\#564](https://github.com/primefaces/primereact/issues/564)
-- New Tree Component [\#559](https://github.com/primefaces/primereact/issues/559)
-- Integrate PrimeFlex Grid System [\#556](https://github.com/primefaces/primereact/issues/556)
-- className parameter unsupported by Spinner component [\#548](https://github.com/primefaces/primereact/issues/548)
+- TabView/TabPanel: Can't have TabPanels in a JSX fragment [\#5900](https://github.com/primefaces/primereact/issues/5900)
+- Input Accessibility [\#5991](https://github.com/primefaces/primereact/issues/5991)
 
 **Fixed bugs:**
 
-- Dialog resize fails [\#567](https://github.com/primefaces/primereact/issues/567)
-- Dialog resizer css is broken [\#566](https://github.com/primefaces/primereact/issues/566)
-- OverlayPanel has no shadow [\#558](https://github.com/primefaces/primereact/issues/558)
-- Border radius missing in panel components [\#557](https://github.com/primefaces/primereact/issues/557)
-- Spinner does not recognize outside changes for value prop [\#555](https://github.com/primefaces/primereact/issues/555)
-- DataTable in IE: TypeError: Object expected [\#554](https://github.com/primefaces/primereact/issues/554)
-- DataTable's onRowUnselect causes exception [\#552](https://github.com/primefaces/primereact/issues/552)
-- Optimize functionality of filtered dropdowns [\#551](https://github.com/primefaces/primereact/issues/551)
-- Dialog blockScroll is undocumented [\#550](https://github.com/primefaces/primereact/issues/550)
-- Body text is selected during Dialog drag [\#549](https://github.com/primefaces/primereact/issues/549)
-- ui-float-label does not work properly for AutoComplete [\#517](https://github.com/primefaces/primereact/issues/517)
-- Float-label does not work properly for InputMask  [\#516](https://github.com/primefaces/primereact/issues/516)
-
-## [2.0.0-beta.3](https://github.com/primefaces/primereact/tree/2.0.0-beta.3) (2018-08-26)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.2...2.0.0-beta.3)
+- Menu: No ripple effect [\#5901](https://github.com/primefaces/primereact/issues/5901)
+- FilterMatchMode.CUSTOM & filterFunction broken + custom filter type errors [\#3325](https://github.com/primefaces/primereact/issues/3325)
+- Calendar: Panel width too small with default Tailwind [\#5830](https://github.com/primefaces/primereact/issues/5830)
+- Menu: separator style missing in default Tailwind [\#5890](https://github.com/primefaces/primereact/issues/5890)
+- Paginator JumpToPageInput not working [\#5893](https://github.com/primefaces/primereact/issues/5893)
+- Primereact Splitter resize [\#5892](https://github.com/primefaces/primereact/issues/5892)
+- Password component hide/show button shouldnt be wrapped with [\#5880](https://github.com/primefaces/primereact/issues/5880)
+- Menu: Unhandled Runtime Error with Nextjs and Tailwind passthrough [\#5885](https://github.com/primefaces/primereact/issues/5885)
+- Dock: Sample code missing DockDemo.css [\#5882](https://github.com/primefaces/primereact/issues/5882)
+- Prevent multiselect/dropdown box from closing on page scroll [\#5872](https://github.com/primefaces/primereact/issues/5872)
+- Calendar : enabledDates is not evaluated with disabledDays [\#5863](https://github.com/primefaces/primereact/issues/5863)
 
-## [2.0.0-beta.2](https://github.com/primefaces/primereact/tree/2.0.0-beta.2) (2018-08-25)
+## [10.4.0](https://github.com/primefaces/primereact/tree/10.4.0) (2024-02-01)
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.1...2.0.0-beta.2)
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.3.3...10.4.0)
 
-**Implemented New Features and Enhancements:**
+**Enhancements:**
 
-- Reimplement Tooltip [\#547](https://github.com/primefaces/primereact/issues/547)
-- Keyboard support for toggle button [\#545](https://github.com/primefaces/primereact/issues/545)
-- Remove font-awesome from Demos [\#544](https://github.com/primefaces/primereact/issues/544)
-- Remove DataGrid and DataList [\#543](https://github.com/primefaces/primereact/issues/543)
-- New styling engine [\#539](https://github.com/primefaces/primereact/issues/539)
-- Property appendTo in menus [\#535](https://github.com/primefaces/primereact/issues/535)
-- Deprecate Free Themes in favor of Nova Free Theme Family [\#527](https://github.com/primefaces/primereact/issues/527)
+- Splitter: missing/incorrect accessibility features [\#5849](https://github.com/primefaces/primereact/issues/5849)
+- New Component | FocusTrap [\#5829](https://github.com/primefaces/primereact/issues/5829)
+- Enhancement: DataTable accessibility [\#5839](https://github.com/primefaces/primereact/issues/5839)
 
 **Fixed bugs:**
 
-- Tooltip does not remove event listeners [\#542](https://github.com/primefaces/primereact/issues/542)
-- Accordion does not work with multiple controlled tabs [\#540](https://github.com/primefaces/primereact/issues/540)
-- Menubar import is not working [\#531](https://github.com/primefaces/primereact/issues/531)
-- ColumnGroup can't be imported [\#530](https://github.com/primefaces/primereact/issues/530)
-- InputTextProps not type correctly [\#529](https://github.com/primefaces/primereact/issues/529)
-- originalEvent in TabView has swapped typing/variable name in TabView.d.ts [\#528](https://github.com/primefaces/primereact/issues/528)
-- Calendar manual input doesn't work with time [\#526](https://github.com/primefaces/primereact/issues/526)
-- Breadcrumb component throws warning [\#522](https://github.com/primefaces/primereact/issues/522)
-
-## [2.0.0-beta.1](https://github.com/primefaces/primereact/tree/2.0.0-beta.1) (2018-07-19)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-alpha.1...2.0.0-beta.1)
-
-**Implemented New Features and Enhancements:**
-
-- Improve input overlay animations [\#514](https://github.com/primefaces/primereact/issues/514)
-- Reimplement InputSwitch UI [\#513](https://github.com/primefaces/primereact/issues/513)
-- Common Props for AutoComplete and Spinner [\#512](https://github.com/primefaces/primereact/issues/512)
-- Reimplement Calendar [\#504](https://github.com/primefaces/primereact/issues/504)
-- Update Schedule component to remove jQuery [\#476](https://github.com/primefaces/primereact/issues/476)
+- Divider (Tailwind): className not used [\#5862](https://github.com/primefaces/primereact/issues/5862)
+- Calendar : enabledDates is not evaluated with disabledDays [\#5863](https://github.com/primefaces/primereact/issues/5863)
+- Tree : Need "no results found" message if no matches found in the filter [\#5813](https://github.com/primefaces/primereact/issues/5813)
+- Showcase: TypeScript demos are failing in StackBlitz/CodeSandbox [\#5800](https://github.com/primefaces/primereact/issues/5800)
+- Dropdown: items focused when pressing letters in contexts where they shouldn't [\#5855](https://github.com/primefaces/primereact/issues/5855)
+- Unnecessary Javascript-Warning in Galleria onShow and onHide [\#5854](https://github.com/primefaces/primereact/issues/5854)
+- Calendar blur not working [\#5850](https://github.com/primefaces/primereact/issues/5850)
+- Dropdown: Missing property loading in DropdownProps Interface [\#5847](https://github.com/primefaces/primereact/issues/5847)
+- Carousel: Visual bugs when loading carousel with responsiveCarouselOptions [\#5166](https://github.com/primefaces/primereact/issues/5166)
+- Sidebar with content prop gives console warning [\#5834](https://github.com/primefaces/primereact/issues/5834)
+- Menubar: Does not respect the MenuItem id property [\#5827](https://github.com/primefaces/primereact/issues/5827)
+- Chips: Separator by new line doesn't work by pasting value [\#5824](https://github.com/primefaces/primereact/issues/5824)
+- Editor: Editor missing unordered list in the header [\#5818](https://github.com/primefaces/primereact/issues/5818)
+- Threshold not working useIntersectionObserver hook [\#5809](https://github.com/primefaces/primereact/issues/5809)
+- Accordion (Tailwind): Cannot read properties of undefined (reading 'disabled') [\#5804](https://github.com/primefaces/primereact/issues/5804)
+- Datatable Column Filter: Clear Button will not show if filter menu button is hidden [\#5802](https://github.com/primefaces/primereact/issues/5802)
+- className is not passes to TieredMenu items [\#5868](https://github.com/primefaces/primereact/issues/5868)
+
+## [10.3.3](https://github.com/primefaces/primereact/tree/10.3.3) (2024-01-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.3.2...10.3.3)
+
+**Enhancements:**
+
+- Accessibility | Data Components (Part 1) [\#5675](https://github.com/primefaces/primereact/issues/5675)
+- Accessibility | Input Components (Part 1) [\#5720](https://github.com/primefaces/primereact/issues/5720)
+- Calendar: timeOnly Today button should be Now [\#5722](https://github.com/primefaces/primereact/issues/5722)
+- Remove primeflex dependency from DataView [\#5798](https://github.com/primefaces/primereact/issues/5798)
 
 **Fixed bugs:**
 
-- Slider shorthand import fails [\#511](https://github.com/primefaces/primereact/issues/511)
-- Error importing Column component [\#509](https://github.com/primefaces/primereact/issues/509)
-- Typescript definition for Column's editor property [\#505](https://github.com/primefaces/primereact/issues/505)
-- Path to primereact/components/common/common.css not correct case [\#500](https://github.com/primefaces/primereact/issues/500)
-- InputText class ui-state-filled fails [\#499](https://github.com/primefaces/primereact/issues/499)
-- Calendar: popup translation not updating [\#478](https://github.com/primefaces/primereact/issues/478)
-- InputSwitch doesn't update programmatically [\#461](https://github.com/primefaces/primereact/issues/461)
-- preventDefault\(\) and stopPropagation\(\) appear to be missing from drag and drop of DataTable - Reorder and causes redirect to 'www.b.com' [\#460](https://github.com/primefaces/primereact/issues/460)
-
-## [2.0.0-alpha.1](https://github.com/primefaces/primereact/tree/2.0.0-alpha.1) (2018-07-06)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.2...2.0.0-alpha.1)
-
-**Implemented New Features and Enhancements:**
-
-- Review/Enhance all documentation [\#497](https://github.com/primefaces/primereact/issues/497)
-- Review all type definition files [\#496](https://github.com/primefaces/primereact/issues/496)
-- Reimplement Chips [\#494](https://github.com/primefaces/primereact/issues/494)
-- Chips should not keep value in state [\#493](https://github.com/primefaces/primereact/issues/493)
-- Controlled/Uncontrolled behavior support for DataTable Features [\#492](https://github.com/primefaces/primereact/issues/492)
-- Reimplement DataTable Lazy Loading [\#491](https://github.com/primefaces/primereact/issues/491)
-- onClick for Fieldset [\#487](https://github.com/primefaces/primereact/issues/487)
-- Refactor Sidebar [\#486](https://github.com/primefaces/primereact/issues/486)
-- Horizontal scroll support to ScrollPanel [\#485](https://github.com/primefaces/primereact/issues/485)
-- Reimplement DataView [\#484](https://github.com/primefaces/primereact/issues/484)
-- Add name prop to Chips [\#483](https://github.com/primefaces/primereact/issues/483)
-- Controlled/Uncontrolled modes for Toggleable Fieldset [\#480](https://github.com/primefaces/primereact/issues/480)
-- Controlled/Uncontrolled modes for Toggleable Panel [\#479](https://github.com/primefaces/primereact/issues/479)
-- Controlled/Uncontrolled modes for TabView [\#475](https://github.com/primefaces/primereact/issues/475)
-- Controlled/Uncontrolled modes for Accordion [\#474](https://github.com/primefaces/primereact/issues/474)
-- New Component: Inplace [\#471](https://github.com/primefaces/primereact/issues/471)
-- Shorter Imports [\#470](https://github.com/primefaces/primereact/issues/470)
-- Rewrite SlideMenu [\#469](https://github.com/primefaces/primereact/issues/469)
-- Rewrite PanelMenu [\#468](https://github.com/primefaces/primereact/issues/468)
-- Rewrite MegaMenu [\#467](https://github.com/primefaces/primereact/issues/467)
-- Rewrite ContextMenu [\#466](https://github.com/primefaces/primereact/issues/466)
-- Rewrite MenuBar [\#465](https://github.com/primefaces/primereact/issues/465)
-- Rewrite TieredMenu [\#464](https://github.com/primefaces/primereact/issues/464)
-- Rewrite Breadcrumb [\#463](https://github.com/primefaces/primereact/issues/463)
-- Rewrite Steps [\#462](https://github.com/primefaces/primereact/issues/462)
-- Controlled/Uncontrolled modes for TabMenu [\#459](https://github.com/primefaces/primereact/issues/459)
-- Rewrite Menu [\#458](https://github.com/primefaces/primereact/issues/458)
-- Maximizable Dialog [\#453](https://github.com/primefaces/primereact/issues/453)
-- Dialog should not derive visible state from props [\#452](https://github.com/primefaces/primereact/issues/452)
-- Add a 'closable' or 'dismissable' property to Sidebar for 'click outside' control. [\#377](https://github.com/primefaces/primereact/issues/377)
-
-**Fixed bugs:**
-
-- InputMask can not read property 'bind' of undefined [\#490](https://github.com/primefaces/primereact/issues/490)
-- Dropdown with autoFocus prop throws a JS error [\#489](https://github.com/primefaces/primereact/issues/489)
-- InputMask fail when unmask is true [\#488](https://github.com/primefaces/primereact/issues/488)
-- Toggleable Panel Icon Misaligned [\#481](https://github.com/primefaces/primereact/issues/481)
-- Calendar dateFormat day name or month name gives error [\#455](https://github.com/primefaces/primereact/issues/455)
-- wrong typings for itemTemplate property [\#454](https://github.com/primefaces/primereact/issues/454)
-- optionLabel prop is missing in MultiSelect [\#450](https://github.com/primefaces/primereact/issues/450)
-- Unable to change rows per page \(Paginator/DataTable\) [\#449](https://github.com/primefaces/primereact/issues/449)
-
-## [1.6.2](https://github.com/primefaces/primereact/tree/1.6.2) (2018-06-19)
+- Menu items are not rendered when the page is opened with a router [\#5794](https://github.com/primefaces/primereact/issues/5794)
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.1...1.6.2)
+## [10.3.2](https://github.com/primefaces/primereact/tree/10.3.2) (2024-01-17)
 
-**Implemented New Features and Enhancements:**
-
-- Refactor Rating to remove usage of state [\#447](https://github.com/primefaces/primereact/issues/447)
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.3.1...10.3.2)
 
 **Fixed bugs:**
 
-- Accordion onTabOpen-onTabClose does not trigger correctly [\#448](https://github.com/primefaces/primereact/issues/448)
-
-## [1.6.1](https://github.com/primefaces/primereact/tree/1.6.1) (2018-06-18)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.0...1.6.1)
-
-**Implemented New Features and Enhancements:**
-
-- Migrate to PrimeIcons [\#446](https://github.com/primefaces/primereact/issues/446)
+- FileUpload component, file content for non-image file types [\#5786](https://github.com/primefaces/primereact/issues/5786)
+- Mega Menu is not working on mobile devices [\#5788](https://github.com/primefaces/primereact/issues/5788)
+- Megamenu demo pages should sync with primevue megamenu demos [\#5791](https://github.com/primefaces/primereact/issues/5791)
+- Panel Menu opens empty item [\#5789](https://github.com/primefaces/primereact/issues/5789)
+- Menubar demo classname typo [\#5790](https://github.com/primefaces/primereact/issues/5790)
+- Float Label demo is broken in mobile mode [\#5781](https://github.com/primefaces/primereact/issues/5781)
+- Megamenu demo pages should sync with primevue megamenu demos [\#5791](https://github.com/primefaces/primereact/issues/5791)
+- PanelMenu:Items not displaying correctly [\#5777](https://github.com/primefaces/primereact/issues/5777)
+- ConfirmDialog：confirmDialog method in unstyled mode, the pop-up window style not apply [\#5656](https://github.com/primefaces/primereact/issues/5656)
+- Image: image zoomed out when opening second time [\#5771](https://github.com/primefaces/primereact/issues/5771)
+- Global Escape Key Listener Already Exists Error When Opening Multiple Dialogs [\#5767](https://github.com/primefaces/primereact/issues/5767)
+- Calendar: Month does not change when the onViewDateChange property is used [\#5754](https://github.com/primefaces/primereact/issues/5754)
+- TieredMenu and Megamenu: not rendering content [\#5766](https://github.com/primefaces/primereact/issues/5766)
+- InputMask: cannot test component with @testing-library/user-event >= 14.0.0 [\#5747](https://github.com/primefaces/primereact/issues/5747)
+- Locale: Clarify configuration [\#5760](https://github.com/primefaces/primereact/issues/5760)
+- Accordion: Error reading disabled [\#5757](https://github.com/primefaces/primereact/issues/5757)
+- DataTable: cell editing can't be cancelled when invalid [\#5750](https://github.com/primefaces/primereact/issues/5750)
+- Panel: Passthrough not working for header [\#5570](https://github.com/primefaces/primereact/issues/5570)
+- Calendar input pt [\#5564](https://github.com/primefaces/primereact/issues/5564)
+- ConfirmDialog pt prop style doesn't work with tailwind classes [\#5144](https://github.com/primefaces/primereact/issues/5144)
+- InputNumber: format error after the decimal point when Locale set de-DE [\#5745](https://github.com/primefaces/primereact/issues/5745)
+- TieredMenu: Reference error - create Submenu [\#5751](https://github.com/primefaces/primereact/issues/5751)
+- PrimeReactPTOptions: typo for multi state checkbox [\#5752](https://github.com/primefaces/primereact/issues/5752)
+- DataTable: Cannot update a component while rendering a different component warning [\#5556](https://github.com/primefaces/primereact/issues/5556)
+- TreeTable: column align header is not working [\#5315](https://github.com/primefaces/primereact/issues/5315)
+- TabView: the right scrollable is always true even if there is only one Tab [\#5743](https://github.com/primefaces/primereact/issues/5743)
+- Menu: click on menu item with url does nothing [\#5785](https://github.com/primefaces/primereact/issues/5785)
+- OrderList: Behavior when using spread syntax in onChange [\#4089](https://github.com/primefaces/primereact/issues/4089)
+- PickList: Behavior when using spread syntax in onChange [\#5739](https://github.com/primefaces/primereact/issues/5739)
+- InputNumber: Pos1/End places caret before/after prefix/postfix [\#5730](https://github.com/primefaces/primereact/issues/5730)
+- Documentation (Sidebar): fullScreen not visible by default [\#5741](https://github.com/primefaces/primereact/issues/5741)
+- DataTable: ResizeableColumns doesnt work with unstyled [\#5706](https://github.com/primefaces/primereact/issues/5706)
+- Dropdown: After selecting an option, clearing the value using close icon should clear the filter input [\#5735](https://github.com/primefaces/primereact/issues/5735)
+- InputNumber: 0 Decimal Entry Issue using Currency Mode [\#5728](https://github.com/primefaces/primereact/issues/5728)
+- Calendar - Pasting a datetime value with AM in it results in PM time instead [\#5719](https://github.com/primefaces/primereact/issues/5719)
+- Form Components: Convert class selector to data selector [\#5686](https://github.com/primefaces/primereact/issues/5686)
+- TieredMenu appears broken? - "ReferenceError: item is not defined" even on your own demo page [\#5724](https://github.com/primefaces/primereact/issues/5724)
+
+## [10.3.1](https://github.com/primefaces/primereact/tree/10.3.1) (2024-01-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.3.0...10.3.1)
 
 **Fixed bugs:**
 
-- DataTable props updating issue [\#443](https://github.com/primefaces/primereact/issues/443)
-- OrganizationChart is not working with React 16.4+ [\#441](https://github.com/primefaces/primereact/issues/441)
-- Sortable TreeTable is not working with React 16.4+ [\#440](https://github.com/primefaces/primereact/issues/440)
-- Calendar Toggle AM/PM is broken [\#438](https://github.com/primefaces/primereact/issues/438)
-- Keyboard navigation is not working on DataTable [\#425](https://github.com/primefaces/primereact/issues/425)
-
-## [1.6.0](https://github.com/primefaces/primereact/tree/1.6.0) (2018-06-07)
+- Port missing fixes [\#5707](https://github.com/primefaces/primereact/issues/5707)
+- Image: ReferenceError: rotate is not defined image.esm.js (948:0) [\#5704](https://github.com/primefaces/primereact/issues/5704)
+- 'content' property now required for several components [\#5701](https://github.com/primefaces/primereact/issues/5701)
+- MegaMenu: Menu Items not showing without StrictMode (production) only after a stateupdate [\#5699](https://github.com/primefaces/primereact/issues/5699)
+- Confirm Dialog: Demo opening dialog 3 times [\#5697](https://github.com/primefaces/primereact/issues/5697)
+- Primereact in the Shadow DOM has problems with the Dropdown component style [\#5246](https://github.com/primefaces/primereact/issues/5246)
+- TypeScript: 10.3.0 Components complaining content is required [\#5692](https://github.com/primefaces/primereact/issues/5692)
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.0-rc.1...1.6.0)
+## [10.3.0](https://github.com/primefaces/primereact/tree/10.3.0) (2024-01-05)
 
-**Implemented New Features and Enhancements:**
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.2.1...10.3.0)
 
-- Improve sort property on DataView [\#420](https://github.com/primefaces/primereact/issues/420)
-
-**Fixed bugs:**
+**New Features:**
 
-- slotChar issue on InputMask [\#439](https://github.com/primefaces/primereact/issues/439)
-- Missing type definition for DropDownProps [\#436](https://github.com/primefaces/primereact/issues/436)
-- Sidebar throws a JS exception on componentWillUnmount hook [\#435](https://github.com/primefaces/primereact/issues/435)
-- Can't set csv export filename in DataTable.js using Internet Explorer, it returns undefined.csv [\#433](https://github.com/primefaces/primereact/issues/433)
-- Missing optionsLabel property in interface ListBoxProps in ListBox.d.ts [\#431](https://github.com/primefaces/primereact/issues/431)
-- Width & Height props of Charts are not working [\#430](https://github.com/primefaces/primereact/issues/430)
-- After a sub node is selected on Tree, its parent node is closing [\#429](https://github.com/primefaces/primereact/issues/429)
-- Rating not being enabled on change from disabled=true to disabled=false [\#428](https://github.com/primefaces/primereact/issues/428)
-- The 'selection' property is not working on Tree [\#426](https://github.com/primefaces/primereact/issues/426)
-- Datatable missing definitions [\#423](https://github.com/primefaces/primereact/issues/423)
-- Improve sort property on DataTable [\#421](https://github.com/primefaces/primereact/issues/421)
-- Remove old overlay events on GMap after map is updated [\#419](https://github.com/primefaces/primereact/issues/419)
-- Growl types Failed to compile. [\#414](https://github.com/primefaces/primereact/issues/414)
-- InputMask is not updated if value property is changed [\#413](https://github.com/primefaces/primereact/issues/413)
-- ColorPicker is not updated if value property is changed [\#412](https://github.com/primefaces/primereact/issues/412)
-- Editable Dropdown content does not reflect input value [\#408](https://github.com/primefaces/primereact/issues/408)
+- ConfirmDialog/ConfirmPopup: Add defaultFocus option like PrimeVue [\#4051](https://github.com/primefaces/primereact/issues/4051)
 
-## [1.6.0-rc.1](https://github.com/primefaces/primereact/tree/1.6.0-rc.1) (2018-06-04)
+**Enhancements:**
 
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.3...1.6.0-rc.1)
-
-## [1.5.3](https://github.com/primefaces/primereact/tree/1.5.3) (2018-05-22)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.2...1.5.3)
-
-**Fixed bugs:**
-
-- onRowReorder missing from DataTable type definition [\#411](https://github.com/primefaces/primereact/issues/411)
-- Duplicate identifier 'number': DataScroller.d.ts [\#410](https://github.com/primefaces/primereact/issues/410)
-
-## [1.5.2](https://github.com/primefaces/primereact/tree/1.5.2) (2018-05-11)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.1...1.5.2)
-
-**Implemented New Features and Enhancements:**
-
-- Add metaKeySelection property to PickList [\#404](https://github.com/primefaces/primereact/issues/404)
-- Add sorting feature to TreeTable [\#400](https://github.com/primefaces/primereact/issues/400)
-- New mode to keyfilter to validate whole value [\#391](https://github.com/primefaces/primereact/issues/391)
-
-**Fixed bugs:**
-
-- BodyCell className using headerClassName prop [\#407](https://github.com/primefaces/primereact/issues/407)
-- Typings missing for colorPicker component [\#405](https://github.com/primefaces/primereact/issues/405)
-- Radio Button default selection throws warnings [\#403](https://github.com/primefaces/primereact/issues/403)
-- Container element has wrong width on Scrollable Datatable [\#402](https://github.com/primefaces/primereact/issues/402)
-- Warning when using Checkbox [\#399](https://github.com/primefaces/primereact/issues/399)
-- itemTemplate is declared as void [\#397](https://github.com/primefaces/primereact/issues/397)
-- FileUpload does not accept multiple files dropped or selected [\#395](https://github.com/primefaces/primereact/issues/395)
-- TabView activeIndex setting programmatically will not work the second time after manually choosing another tab [\#393](https://github.com/primefaces/primereact/issues/393)
-- ReadOnly attribute is not passed to the checkbox input  [\#392](https://github.com/primefaces/primereact/issues/392)
-- onColReorder return columns: undefined  [\#389](https://github.com/primefaces/primereact/issues/389)
-- onClick event doesn't work on Messages component [\#387](https://github.com/primefaces/primereact/issues/387)
-- Typings missing for messages component [\#386](https://github.com/primefaces/primereact/issues/386)
-- InputMask runtime error [\#385](https://github.com/primefaces/primereact/issues/385)
-- Slider component not always provide the originalEvent [\#384](https://github.com/primefaces/primereact/issues/384)
-- Org chart does not update when value property changes [\#382](https://github.com/primefaces/primereact/issues/382)
-- Bug in DataTable selection and Column [\#381](https://github.com/primefaces/primereact/issues/381)
-- Calendar min date does not work after primereact@1.3.0 [\#379](https://github.com/primefaces/primereact/issues/379)
-
-## [1.5.1](https://github.com/primefaces/primereact/tree/1.5.1) (2018-04-10)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.0...1.5.1)
-
-**Fixed bugs:**
-
-- placeholder not working on Chips component [\#374](https://github.com/primefaces/primereact/issues/374)
-- Tree doesn't update on external change [\#372](https://github.com/primefaces/primereact/issues/372)
-- Slider component does not support real values/step [\#371](https://github.com/primefaces/primereact/issues/371)
-- AutoResize for InputTextarea doesn't work without cols property [\#370](https://github.com/primefaces/primereact/issues/370)
-- Bug: incorrect highlight of dates in range Calendar [\#367](https://github.com/primefaces/primereact/issues/367)
-- TypeDefinitions for Message Control missing [\#366](https://github.com/primefaces/primereact/issues/366)
-- Dropdown autowidth is not working when it used inside the TabView [\#362](https://github.com/primefaces/primereact/issues/362)
-- Calendar as cell editor is not closed after selecting value [\#358](https://github.com/primefaces/primereact/issues/358)
-- Cannot format selection for single-value AutoComplete field [\#353](https://github.com/primefaces/primereact/issues/353)
-- Bug: Type definition for the Column component [\#350](https://github.com/primefaces/primereact/issues/350)
-- DataTable export doesn't respect filters and sorting [\#349](https://github.com/primefaces/primereact/issues/349)
-- sortFunction doesn't work for DataTable [\#348](https://github.com/primefaces/primereact/issues/348)
-
-## [1.5.0](https://github.com/primefaces/primereact/tree/1.5.0) (2018-03-15)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.1...1.5.0)
-
-**Implemented New Features and Enhancements:**
-
-- Clear icon to Dropdown [\#345](https://github.com/primefaces/primereact/issues/345)
-- Add event onRowDoubleClick for DataTable [\#341](https://github.com/primefaces/primereact/issues/341)
-- Add minX and minY to Dialog [\#339](https://github.com/primefaces/primereact/issues/339)
-- DragDrop based reorder for Table [\#337](https://github.com/primefaces/primereact/issues/337)
-- DataView Component [\#334](https://github.com/primefaces/primereact/issues/334)
-- InputMask required [\#321](https://github.com/primefaces/primereact/issues/321)
-- Improve dialog positioning with Dynamic content [\#320](https://github.com/primefaces/primereact/issues/320)
-- Custom filter for Column of the DataTable [\#312](https://github.com/primefaces/primereact/issues/312)
-
-**Fixed bugs:**
-
-- Datatable column reorder may not always work correctly [\#338](https://github.com/primefaces/primereact/issues/338)
-- Ultima theme 1.4.2: icon buttons are cutted [\#317](https://github.com/primefaces/primereact/issues/317)
-- Autocomplete input label is undefined [\#347](https://github.com/primefaces/primereact/issues/347)
-- DataTable TypeScript definition error [\#346](https://github.com/primefaces/primereact/issues/346)
-- Default filters not rendered at DataTable [\#344](https://github.com/primefaces/primereact/issues/344)
-- Dialog selects text during dragging or resizing [\#343](https://github.com/primefaces/primereact/issues/343)
-- TabView activeIndex ignored [\#342](https://github.com/primefaces/primereact/issues/342)
-- Dialog dragging may stuck [\#336](https://github.com/primefaces/primereact/issues/336)
-- ToolTip crashes in IE 11 [\#332](https://github.com/primefaces/primereact/issues/332)
-- Pagination dropdown resets for lazy loading dataTable [\#331](https://github.com/primefaces/primereact/issues/331)
-- DataTable onLazyLoad not called for advanced filter options [\#330](https://github.com/primefaces/primereact/issues/330)
-- Calendar : Enable/Highlight the date of adjacent month when selectOtherMonths is true [\#329](https://github.com/primefaces/primereact/issues/329)
-- Resizable DataTable rowsCountSelector not visible [\#318](https://github.com/primefaces/primereact/issues/318)
-- Dropdown list inside Dialog is only partially visible and creates scroll on dialog  [\#316](https://github.com/primefaces/primereact/issues/316)
-- Cannot enter Values into Spinner [\#314](https://github.com/primefaces/primereact/issues/314)
-
-## [1.4.1](https://github.com/primefaces/primereact/tree/1.4.1) (2018-02-14)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.0...1.4.1)
-
-**Implemented New Features and Enhancements:**
-
-- Filtering for OrderList [\#311](https://github.com/primefaces/primereact/issues/311)
-- autoLayout mode for DataTable [\#310](https://github.com/primefaces/primereact/issues/310)
-- Add baseZIndex to Dialog [\#309](https://github.com/primefaces/primereact/issues/309)
-- Refactor OrderList [\#308](https://github.com/primefaces/primereact/issues/308)
-- Disabled/readonly prop for Checkbox and RadioButton [\#302](https://github.com/primefaces/primereact/issues/302)
-- Checkbox and Radio should mark checked/onChange props as required [\#287](https://github.com/primefaces/primereact/issues/287)
-- DataTable pageLinkSize [\#276](https://github.com/primefaces/primereact/issues/276)
-
-**Fixed bugs:**
-
-- Dialog is displayed below topbar in showcase [\#284](https://github.com/primefaces/primereact/issues/284)
-- ResizableColumns fail inside Dialog [\#281](https://github.com/primefaces/primereact/issues/281)
-- File Upload Dialog opens only once if set to Auto [\#306](https://github.com/primefaces/primereact/issues/306)
-- rowsPerPage missing from DataTable d.ts file [\#304](https://github.com/primefaces/primereact/issues/304)
-- Dropdown does not show selected value when editable is true [\#301](https://github.com/primefaces/primereact/issues/301)
-- Calendar d.ts marks all props as required [\#296](https://github.com/primefaces/primereact/issues/296)
-- Dialog: closeOnEscape doesn't work [\#295](https://github.com/primefaces/primereact/issues/295)
-- Calendar yearNavigator fails [\#294](https://github.com/primefaces/primereact/issues/294)
-- Spinner shows weird Values [\#293](https://github.com/primefaces/primereact/issues/293)
-- OrderList error [\#291](https://github.com/primefaces/primereact/issues/291)
-- Duplicate identifier 'any': PickList.d.ts  [\#290](https://github.com/primefaces/primereact/issues/290)
-- In Lazy load mode selection highlight doesn't work properly [\#283](https://github.com/primefaces/primereact/issues/283)
-- Type Definitions incomplete for FileUpload [\#277](https://github.com/primefaces/primereact/issues/277)
-- Growl does not clear timeout on unmount [\#272](https://github.com/primefaces/primereact/issues/272)
-- Calender select day in adjacent month [\#266](https://github.com/primefaces/primereact/issues/266)
-
-## [1.4.0](https://github.com/primefaces/primereact/tree/1.4.0) (2018-01-04)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.0-rc.2...1.4.0)
-
-**Implemented New Features and Enhancements:**
-
-- Improve DataTable.d.ts RowExpansion config [\#269](https://github.com/primefaces/primereact/issues/269)
-- KeyFilter attribute [\#265](https://github.com/primefaces/primereact/issues/265)
-- Card Component [\#264](https://github.com/primefaces/primereact/issues/264)
-- Migrate to react-transition-group [\#259](https://github.com/primefaces/primereact/issues/259)
-- Calendar should consider props.disabled in shouldComponentUpdate [\#258](https://github.com/primefaces/primereact/issues/258)
+- Dialog: DialogProps missing footerClassName [\#5661](https://github.com/primefaces/primereact/issues/5661)
+- DataTable: disable the rowEditor prop dynamically, as is done in rowExpansion [\#5640](https://github.com/primefaces/primereact/issues/5640)
+- TreeSelect: TreeSelect component is not supporting tooltips and is an issue in multiple select mode. [\#5613](https://github.com/primefaces/primereact/issues/5613)
+- Calendar:about disabled logic [\#5581](https://github.com/primefaces/primereact/issues/5581)
+- TreeTable: Incorrect typing for sortable prop [\#5591](https://github.com/primefaces/primereact/issues/5591)
+- InputNumber: Support roundingMode for the InputNumber [\#5528](https://github.com/primefaces/primereact/issues/5528)
+- Chip: onRemove callback function doesn't return the removed value [\#5530](https://github.com/primefaces/primereact/issues/5530)
+- confirmPopup: Remove deprecated code imports [\#5520](https://github.com/primefaces/primereact/issues/5520)
+- confirmPopup: Remove deprecated code imports [\#5520](https://github.com/primefaces/primereact/issues/5520)
+- Accessibility | Messages [\#5428](https://github.com/primefaces/primereact/issues/5428)
+- Accessibility | Media Section [\#5422](https://github.com/primefaces/primereact/issues/5422)
+- Headless Mode Update
+  - Dialog, ConfirmDialog, ConfirmPopup, Sidebar, Toast
+- Showcase Updates
 
 **Fixed bugs:**
 
-- Spinner does not accept decimal or thousand separator as input [\#270](https://github.com/primefaces/primereact/issues/270)
-- Calendar does not rerender when we change "disabled" prop [\#263](https://github.com/primefaces/primereact/issues/263)
-- Calendar may reset date on update [\#262](https://github.com/primefaces/primereact/issues/262)
-- ExportCSV ignores headers in DataTable [\#261](https://github.com/primefaces/primereact/issues/261)
-- Spinner binds invalid event [\#260](https://github.com/primefaces/primereact/issues/260)
-- Autocomplete dropdown no longer working [\#254](https://github.com/primefaces/primereact/issues/254)
-
-## [1.4.0-rc.2](https://github.com/primefaces/primereact/tree/1.4.0-rc.2) (2018-01-04)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.0-rc.1...1.4.0-rc.2)
-
-## [1.4.0-rc.1](https://github.com/primefaces/primereact/tree/1.4.0-rc.1) (2018-01-04)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.3.1...1.4.0-rc.1)
-
-## [1.3.1](https://github.com/primefaces/primereact/tree/1.3.1) (2017-12-22)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.3.0...1.3.1)
-
-## [1.3.0](https://github.com/primefaces/primereact/tree/1.3.0) (2017-12-13)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.3.0-rc.1...1.3.0)
-
-**Implemented New Features and Enhancements:**
-
-- New Component: ScrollPanel [\#251](https://github.com/primefaces/primereact/issues/251)
-- Keyboard accessibility for Panel components [\#250](https://github.com/primefaces/primereact/issues/250)
-- Refactor FileUpload [\#247](https://github.com/primefaces/primereact/issues/247)
-
-**Fixed bugs:**
-
-- Missing dependency in primereact npm artifcat: 'react-addons-css-transition-group' [\#242](https://github.com/primefaces/primereact/issues/242)
-- AutoComplete dosn't accept spaces [\#249](https://github.com/primefaces/primereact/issues/249)
-- Calendar title month and year has no margin [\#248](https://github.com/primefaces/primereact/issues/248)
-- Toggleable fieldset resets if parent is updated [\#246](https://github.com/primefaces/primereact/issues/246)
-- Accordion resets if parent is updated [\#245](https://github.com/primefaces/primereact/issues/245)
-- Toggleable panel resets if parent is updated [\#244](https://github.com/primefaces/primereact/issues/244)
-- Growl.d.ts allow GrowlMessage.detail to be Element [\#241](https://github.com/primefaces/primereact/issues/241)
-- Password's 'inputProps' missing in d.ts file [\#240](https://github.com/primefaces/primereact/issues/240)
-- feedback={false} not working for Password [\#239](https://github.com/primefaces/primereact/issues/239)
-- AutoCompleteProps: Missing data object in itemTemplate [\#237](https://github.com/primefaces/primereact/issues/237)
-- Missing param name in d.ts-files [\#236](https://github.com/primefaces/primereact/issues/236)
-- Spinner d.ts missing onChange [\#235](https://github.com/primefaces/primereact/issues/235)
-
-## [1.3.0-rc.1](https://github.com/primefaces/primereact/tree/1.3.0-rc.1) (2017-12-07)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.2.0...1.3.0-rc.1)
-
-**Implemented New Features and Enhancements:**
-
-- Add style/classname props to Radio and Checkbox [\#233](https://github.com/primefaces/primereact/issues/233)
-- New properties to TriStateCheckbox [\#232](https://github.com/primefaces/primereact/issues/232)
-- Keyboard Accessibility for TriStateCheckbox [\#230](https://github.com/primefaces/primereact/issues/230)
-- Keyboard accessibility for Spinner [\#229](https://github.com/primefaces/primereact/issues/229)
-- Refactor Spinner [\#228](https://github.com/primefaces/primereact/issues/228)
-- Animation for FieldSet [\#223](https://github.com/primefaces/primereact/issues/223)
-- Refactor Calendar [\#222](https://github.com/primefaces/primereact/issues/222)
-- Resize support for Scrollable Table [\#219](https://github.com/primefaces/primereact/issues/219)
-- Password does not pass all input parameters [\#216](https://github.com/primefaces/primereact/issues/216)
-- Reimplement ColorPicker [\#214](https://github.com/primefaces/primereact/issues/214)
-- Rewrite Button CSS [\#213](https://github.com/primefaces/primereact/issues/213)
-- appendTo for MultiSelect [\#212](https://github.com/primefaces/primereact/issues/212)
-- Use Portal API in Dropdown appendTo [\#211](https://github.com/primefaces/primereact/issues/211)
-- Use Portal API in AutoComplete appendTo [\#210](https://github.com/primefaces/primereact/issues/210)
-- Use Portal API in Overlay appendTo [\#209](https://github.com/primefaces/primereact/issues/209)
-- Add inputId to Checkbox and Radio [\#208](https://github.com/primefaces/primereact/issues/208)
-- Keyboard accessibility for Checkbox and RadioButton [\#207](https://github.com/primefaces/primereact/issues/207)
-- Floating Labels for Inputs [\#205](https://github.com/primefaces/primereact/issues/205)
-- Add appendTo to Dialog [\#204](https://github.com/primefaces/primereact/issues/204)
-- Reimplement Messages [\#203](https://github.com/primefaces/primereact/issues/203)
-- Reimplement Growl [\#202](https://github.com/primefaces/primereact/issues/202)
-- Screen Reader and Keyboard Accessibility support for Fieldset [\#201](https://github.com/primefaces/primereact/issues/201)
-- Screen Reader support for Panel [\#200](https://github.com/primefaces/primereact/issues/200)
-- Screen Reader support for Dialog [\#199](https://github.com/primefaces/primereact/issues/199)
-- Screen Reader support for TabView [\#198](https://github.com/primefaces/primereact/issues/198)
-- Screen Reader and Keyboard Accessibility for Accordion [\#197](https://github.com/primefaces/primereact/issues/197)
-- Loading status for AutoComplete [\#193](https://github.com/primefaces/primereact/issues/193)
-- Custom content for paginator [\#189](https://github.com/primefaces/primereact/issues/189)
-- Animation for Accordion [\#182](https://github.com/primefaces/primereact/issues/182)
-- Unsortable option for DataTable columns [\#179](https://github.com/primefaces/primereact/issues/179)
-
-**Fixed bugs:**
-
-- Radio and Checkbox does pass props to super [\#231](https://github.com/primefaces/primereact/issues/231)
-- Dropdown Filter blocks keyboard navigation of items [\#227](https://github.com/primefaces/primereact/issues/227)
-- Dropdown keyboard navigation does not scroll items [\#226](https://github.com/primefaces/primereact/issues/226)
-- InputTextarea ignores focus, blur, input and keyup [\#225](https://github.com/primefaces/primereact/issues/225)
-- Browser textarea resize breaks autoResize of textarea [\#224](https://github.com/primefaces/primereact/issues/224)
-- DataTable dataKey ignored [\#221](https://github.com/primefaces/primereact/issues/221)
-- AutoComplete does not reflect model binding [\#220](https://github.com/primefaces/primereact/issues/220)
-- Clicking table header throws exception [\#218](https://github.com/primefaces/primereact/issues/218)
-- Resizing last column gives error on DataTable [\#217](https://github.com/primefaces/primereact/issues/217)
-- OverlayPanel: appendTo="body" throws exception [\#206](https://github.com/primefaces/primereact/issues/206)
-- Growl: messages appears again on any change state [\#196](https://github.com/primefaces/primereact/issues/196)
-- InputText: ui-state-filled class is not added, if value chaged in parent component [\#195](https://github.com/primefaces/primereact/issues/195)
-- AutoComplete Dropdown select not hiding [\#191](https://github.com/primefaces/primereact/issues/191)
-- Menu components\(menu,menubar...\) reload problem [\#190](https://github.com/primefaces/primereact/issues/190)
-- Datatable - not propagate prop filterMatchMode when lazyload is on [\#187](https://github.com/primefaces/primereact/issues/187)
-- datatable- Not Adjusted columns with expander  [\#186](https://github.com/primefaces/primereact/issues/186)
-- DataTable: page is not reseted after global filtering [\#184](https://github.com/primefaces/primereact/issues/184)
-- onNodeExpand and onNodeCollapse events are not working on Tree [\#183](https://github.com/primefaces/primereact/issues/183)
-- Panel Header and Dropdown problem [\#175](https://github.com/primefaces/primereact/issues/175)
-
-## [1.2.0](https://github.com/primefaces/primereact/tree/1.2.0) (2017-11-01)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.1.0...1.2.0)
-
-**Implemented New Features and Enhancements:**
-
-- Improve typings of some components [\#172](https://github.com/primefaces/primereact/issues/172)
-- Add rowsPerPageOptions to DataTable [\#171](https://github.com/primefaces/primereact/issues/171)
-- Animation for Panel toggle [\#170](https://github.com/primefaces/primereact/issues/170)
-- Disabled tabs for Accordion [\#169](https://github.com/primefaces/primereact/issues/169)
-- New style properties for Accordion Tab [\#168](https://github.com/primefaces/primereact/issues/168)
-- Disabled tabs in TabView [\#167](https://github.com/primefaces/primereact/issues/167)
-- Add style properties to TabView and TabPanel [\#166](https://github.com/primefaces/primereact/issues/166)
-- Disabled prop for TabPanel [\#164](https://github.com/primefaces/primereact/issues/164)
-- Use Dropdown component for Paginator rowsPerPage select [\#163](https://github.com/primefaces/primereact/issues/163)
-- Support any type of object as a select option [\#162](https://github.com/primefaces/primereact/issues/162)
-- Undeterminate ProgressBar [\#160](https://github.com/primefaces/primereact/issues/160)
-- New Message component [\#159](https://github.com/primefaces/primereact/issues/159)
-- New ProgressSpinner Component [\#143](https://github.com/primefaces/primereact/issues/143)
-
-**Fixed bugs:**
-
-- DataTable: `onLazyLoad` does not support `sortMode="multiple"` [\#157](https://github.com/primefaces/primereact/issues/157)
-- Password not trigger onChange event [\#177](https://github.com/primefaces/primereact/issues/177)
-- Virtual Scrolling Flickers [\#173](https://github.com/primefaces/primereact/issues/173)
-- Type definition missing from TabPanel [\#165](https://github.com/primefaces/primereact/issues/165)
-- DataTable: Changing a filter does not trigger `onLazyLoad` for async tables [\#158](https://github.com/primefaces/primereact/issues/158)
-- Growl throws error [\#149](https://github.com/primefaces/primereact/issues/149)
-- MultiSelect: onClick: event.stopPropagation is not a function [\#147](https://github.com/primefaces/primereact/issues/147)
-- utc parameter is not working when keying in the date [\#146](https://github.com/primefaces/primereact/issues/146)
-- Click on input filter causes sort [\#133](https://github.com/primefaces/primereact/issues/133)
-
-## [1.1.0](https://github.com/primefaces/primereact/tree/1.1.0) (2017-10-18)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.1...1.1.0)
-
-**Implemented New Features and Enhancements:**
-
-- Sidebar component [\#122](https://github.com/primefaces/primereact/issues/122)
-- Expose show\(\),hide\(\) and toggle\(\) in props of ContextMenu [\#113](https://github.com/primefaces/primereact/issues/113)
-- Reimplement AutoComplete [\#141](https://github.com/primefaces/primereact/issues/141)
-- Specific styles for header, body and footer [\#140](https://github.com/primefaces/primereact/issues/140)
-- Sticky mode for Growl [\#139](https://github.com/primefaces/primereact/issues/139)
-- Add onClick to Growl [\#138](https://github.com/primefaces/primereact/issues/138)
-- rowClassName for DataTable [\#137](https://github.com/primefaces/primereact/issues/137)
-- Typescript Support [\#131](https://github.com/primefaces/primereact/issues/131)
-- New Component: GMap [\#130](https://github.com/primefaces/primereact/issues/130)
-- Keyboard support for SelectButton [\#129](https://github.com/primefaces/primereact/issues/129)
-- Reimplement SelectButton [\#128](https://github.com/primefaces/primereact/issues/128)
-- license file [\#117](https://github.com/primefaces/primereact/issues/117)
-- Frozen Columns support for Column Groups [\#107](https://github.com/primefaces/primereact/issues/107)
-- Loading status for DataTable [\#94](https://github.com/primefaces/primereact/issues/94)
-- Editable Cells for DataTable [\#80](https://github.com/primefaces/primereact/issues/80)
-- Virtual Scrolling For DataTable [\#79](https://github.com/primefaces/primereact/issues/79)
-- Percentage support for DataTable ScrollWidth and ScrollHeight [\#77](https://github.com/primefaces/primereact/issues/77)
-
-**Fixed bugs:**
-
-- Dropdown Menu in DataTable with resizableColumns [\#123](https://github.com/primefaces/primereact/issues/123)
-- Sorting does not work when you are using Column Group feature [\#115](https://github.com/primefaces/primereact/issues/115)
-- TimeOnly calendar fails [\#144](https://github.com/primefaces/primereact/issues/144)
-- DataTable: OnLazyLoad repeatedly calling function / infinite loop [\#132](https://github.com/primefaces/primereact/issues/132)
-- Dropdown menu sits behind grid [\#126](https://github.com/primefaces/primereact/issues/126)
-- SelectButton cannot have initial State [\#121](https://github.com/primefaces/primereact/issues/121)
-- Calendar minDate and maxDate property does not reload dynamically [\#119](https://github.com/primefaces/primereact/issues/119)
-- Growl doesn't call onClear method [\#112](https://github.com/primefaces/primereact/issues/112)
-- AutoComplete completeMethod triggered twice / delay does not work as expected [\#111](https://github.com/primefaces/primereact/issues/111)
-- Calendar is not updated according when props.value is changed [\#110](https://github.com/primefaces/primereact/issues/110)
-
-## [1.0.1](https://github.com/primefaces/primereact/tree/1.0.1) (2017-09-21)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0...1.0.1)
-
-**Implemented New Features and Enhancements:**
-
-- appendTo for OverlayPanel [\#96](https://github.com/primefaces/primereact/issues/96)
-- Update demo to Router v4 [\#93](https://github.com/primefaces/primereact/issues/93)
-- Refactor InputText filled state implementation [\#91](https://github.com/primefaces/primereact/issues/91)
-- Missing event for components [\#90](https://github.com/primefaces/primereact/issues/90)
-- Customizable Paginator using Templating [\#88](https://github.com/primefaces/primereact/issues/88)
-- Column Reordering for DataTable [\#81](https://github.com/primefaces/primereact/issues/81)
-
-**Fixed bugs:**
-
-- Wrong documentation for BreadCrumb component [\#100](https://github.com/primefaces/primereact/issues/100)
-- Relative Position calculation is wrong [\#109](https://github.com/primefaces/primereact/issues/109)
-- Dropdown options does not update when props is changed [\#108](https://github.com/primefaces/primereact/issues/108)
-- Dynamic and Static Columns cause error [\#106](https://github.com/primefaces/primereact/issues/106)
-- Broken css in Version 1.0 [\#105](https://github.com/primefaces/primereact/issues/105)
-- Dropdown selected option not updated after value property changes [\#103](https://github.com/primefaces/primereact/issues/103)
-- Chart is not updated when data changes [\#102](https://github.com/primefaces/primereact/issues/102)
-- The value of AutoComplete is not reset after changing state [\#101](https://github.com/primefaces/primereact/issues/101)
-- FileUpload does not allow multiple files [\#99](https://github.com/primefaces/primereact/issues/99)
-- Dialog contentStyle doesn't work [\#92](https://github.com/primefaces/primereact/issues/92)
-- InputText disabled behavior missing readonly functionality [\#89](https://github.com/primefaces/primereact/issues/89)
-
-## [1.0.0](https://github.com/primefaces/primereact/tree/1.0.0) (2017-09-10)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-rc.3...1.0.0)
-
-**Implemented New Features and Enhancements:**
-
-- Reimplement Listbox [\#87](https://github.com/primefaces/primereact/issues/87)
-- Reimplement PickList [\#86](https://github.com/primefaces/primereact/issues/86)
-- Reimplement Rating [\#84](https://github.com/primefaces/primereact/issues/84)
-- Reimplement Calendar [\#83](https://github.com/primefaces/primereact/issues/83)
-- Disabled Dates for Calendar [\#82](https://github.com/primefaces/primereact/issues/82)
-
-## [1.0.0-rc.3](https://github.com/primefaces/primereact/tree/1.0.0-rc.3) (2017-09-09)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-rc.2...1.0.0-rc.3)
-
-## [1.0.0-rc.2](https://github.com/primefaces/primereact/tree/1.0.0-rc.2) (2017-09-08)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-rc.1...1.0.0-rc.2)
-
-## [1.0.0-rc.1](https://github.com/primefaces/primereact/tree/1.0.0-rc.1) (2017-08-31)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.6...1.0.0-rc.1)
-
-**Implemented New Features and Enhancements:**
-
-- Re implemented Dropdown component [\#76](https://github.com/primefaces/primereact/issues/76)
-- Re-implemented Dialog Component [\#75](https://github.com/primefaces/primereact/issues/75)
-
-**Fixed bugs:**
-
-- PickList callbacks reference error [\#74](https://github.com/primefaces/primereact/issues/74)
-- The state of user is not updated after closing dialog [\#72](https://github.com/primefaces/primereact/issues/72)
-- The onClick event of Choose button is fired twice on FileUpload [\#71](https://github.com/primefaces/primereact/issues/71)
-
-## [1.0.0-beta.6](https://github.com/primefaces/primereact/tree/1.0.0-beta.6) (2017-08-21)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.5...1.0.0-beta.6)
-
-## [1.0.0-beta.5](https://github.com/primefaces/primereact/tree/1.0.0-beta.5) (2017-08-21)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.4...1.0.0-beta.5)
-
-**Implemented New Features and Enhancements:**
-
-- Add id attribute to all components [\#70](https://github.com/primefaces/primereact/issues/70)
-- Inconsistent API to add CSS class with certain of your component [\#68](https://github.com/primefaces/primereact/issues/68)
-
-**Fixed bugs:**
-
-- InputText and InputTextarea components aren't re-rendered when props are updated [\#69](https://github.com/primefaces/primereact/issues/69)
-
-## [1.0.0-beta.4](https://github.com/primefaces/primereact/tree/1.0.0-beta.4) (2017-08-16)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.3...1.0.0-beta.4)
-
-**Implemented New Features and Enhancements:**
-
-- Text Editor [\#66](https://github.com/primefaces/primereact/issues/66)
-
-## [1.0.0-beta.3](https://github.com/primefaces/primereact/tree/1.0.0-beta.3) (2017-08-10)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.2...1.0.0-beta.3)
-
-## [1.0.0-beta.2](https://github.com/primefaces/primereact/tree/1.0.0-beta.2) (2017-08-10)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.1...1.0.0-beta.2)
-
-## [1.0.0-beta.1](https://github.com/primefaces/primereact/tree/1.0.0-beta.1) (2017-08-09)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-alpha.2...1.0.0-beta.1)
-
-**Implemented New Features and Enhancements:**
-
-- DataTable Crud [\#63](https://github.com/primefaces/primereact/issues/63)
-- MegaMenu component [\#62](https://github.com/primefaces/primereact/issues/62)
-- Steps component [\#61](https://github.com/primefaces/primereact/issues/61)
-- PanelMenu component [\#59](https://github.com/primefaces/primereact/issues/59)
-- ContextMenu component [\#58](https://github.com/primefaces/primereact/issues/58)
-- Menubar component [\#57](https://github.com/primefaces/primereact/issues/57)
-- TieredMenu component [\#56](https://github.com/primefaces/primereact/issues/56)
-- Breadcrumb component [\#54](https://github.com/primefaces/primereact/issues/54)
-- Add tabmenu component [\#53](https://github.com/primefaces/primereact/issues/53)
-- Add menu component [\#51](https://github.com/primefaces/primereact/issues/51)
-- Add lightbox component [\#46](https://github.com/primefaces/primereact/issues/46)
-- Add toolbar component [\#44](https://github.com/primefaces/primereact/issues/44)
-- Add password component [\#43](https://github.com/primefaces/primereact/issues/43)
-- Add keyboard support to dropdown [\#39](https://github.com/primefaces/primereact/issues/39)
-- Implemented DataScroller component  [\#37](https://github.com/primefaces/primereact/issues/37)
-- Implemented Rating component  [\#36](https://github.com/primefaces/primereact/issues/36)
-- Implemented ColorPicker component [\#35](https://github.com/primefaces/primereact/issues/35)
-
-## [1.0.0-alpha.2](https://github.com/primefaces/primereact/tree/1.0.0-alpha.2) (2017-05-25)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-alpha.1...1.0.0-alpha.2)
-
-**Implemented New Features and Enhancements:**
-
-- TreeTable Component [\#34](https://github.com/primefaces/primereact/issues/34)
-- Mobile Touch support to Slider Component [\#33](https://github.com/primefaces/primereact/issues/33)
-- Implemented Captcha Component [\#32](https://github.com/primefaces/primereact/issues/32)
-- Tree Component [\#31](https://github.com/primefaces/primereact/issues/31)
-
-**Fixed bugs:**
-
-- Accordion activeIndex doesn't work [\#30](https://github.com/primefaces/primereact/issues/30)
-- Dropdown onChange invoked on same item selection [\#28](https://github.com/primefaces/primereact/issues/28)
-- activeIndex property on TabView doesn't work [\#26](https://github.com/primefaces/primereact/issues/26)
-- Dropdown is missing input focus [\#21](https://github.com/primefaces/primereact/issues/21)
-- Spinner controls are not user friendly [\#20](https://github.com/primefaces/primereact/issues/20)
-- MultiSelect Input focus is missing [\#19](https://github.com/primefaces/primereact/issues/19)
-- Accordion Tab Caret icons are not toggleable [\#18](https://github.com/primefaces/primereact/issues/18)
-- Radio button label toggle state is missing [\#14](https://github.com/primefaces/primereact/issues/14)
-- Chips need input focus [\#13](https://github.com/primefaces/primereact/issues/13)
-- Checkbox label toggle state is not working [\#12](https://github.com/primefaces/primereact/issues/12)
-- Autocomplete Multiple feature missing input focus [\#10](https://github.com/primefaces/primereact/issues/10)
-
-## [1.0.0-alpha.1](https://github.com/primefaces/primereact/tree/1.0.0-alpha.1) (2017-03-28)
-
-[Full Changelog](https://github.com/primefaces/primereact/compare/2eb760f17382a3b3a47d70f6f6076e21f5c90cfb...1.0.0-alpha.1)
-
+- PrimeReactProvider: Error next14 app router [\#5127](https://github.com/primefaces/primereact/issues/5127)
+- TabView: Doesn't render in NextJS 14 [\#5395](https://github.com/primefaces/primereact/issues/5395)
+- Issue with fileUpload progressBarTemplate [\#5664](https://github.com/primefaces/primereact/issues/5664)
+- Calendar: When enabledDates array is set, user will get stuck on month/year selection [\#5662](https://github.com/primefaces/primereact/issues/5662)
+- DataTable: Subheader row group along with date sorting not working as intended [\#5651](https://github.com/primefaces/primereact/issues/5651)
+- Ripple effect is not working on buttons inside the sidebar [\#5652](https://github.com/primefaces/primereact/issues/5652)
+- Input Number: Value pasted by the user is not entered when suffix and decimals are used. [\#4802](https://github.com/primefaces/primereact/issues/4802)
+- SideBar: aria-label disappear on close button [\#5637](https://github.com/primefaces/primereact/issues/5637)
+- A maximizable dialog cannot be maximized properly after its position has been changed [\#5635](https://github.com/primefaces/primereact/issues/5635)
+- InputNumber:format error when Locale set de-DE [\#5633](https://github.com/primefaces/primereact/issues/5633)
+- TreeTable/Datatable: Calendar not showing correctly [\#5529](https://github.com/primefaces/primereact/issues/5529)
+- Image preview zoom in bug [\#5627](https://github.com/primefaces/primereact/issues/5627)
+- Otherprops not working for InputSwitch [\#5623](https://github.com/primefaces/primereact/issues/5623)
+- InputNumber: (Germany) second step of currency can't changed [\#5589](https://github.com/primefaces/primereact/issues/5589)
+- InputNumber: Incorrect duplication of fractional part of number [\#5607](https://github.com/primefaces/primereact/issues/5607)
+- InputNumber: Cursor stuck when using minFractionDigits and comma as decimal separator [\#5548](https://github.com/primefaces/primereact/issues/5548)
+- When RadioButton is selected, clicking on it does not trigger the onClick event. [\#5610](https://github.com/primefaces/primereact/issues/5610)
+- TreeTable: missing import [\#5600](https://github.com/primefaces/primereact/issues/5600)
+- TreeTable: Column "align" prop aligns the header rather than the content [\#5597](https://github.com/primefaces/primereact/issues/5597)
+- Dialog: breakpoints are janky [\#5551](https://github.com/primefaces/primereact/issues/5551)
+- TreeTable: sorting not triggered when clicking header with custom HTML [\#5584](https://github.com/primefaces/primereact/issues/5584)
+- Calendar: After the currentview changed, the panel position is wrong [\#5577](https://github.com/primefaces/primereact/issues/5577)
+- DataTable: appendTo on HTML element doesn't work [\#5266](https://github.com/primefaces/primereact/issues/5266)
+- Calendar position error when appendTo: 'self' is set [\#5058](https://github.com/primefaces/primereact/issues/5058)
+- select components: props appendTo Incorrect first time mount [\#5311](https://github.com/primefaces/primereact/issues/5311)
+- MultiSelect: selectAllLabel property error inside React Router [\#5572](https://github.com/primefaces/primereact/issues/5572)
+- Inplace: active prop not working [\#5561](https://github.com/primefaces/primereact/issues/5561)
+- DataTable: Error when updating a cell [\#5556](https://github.com/primefaces/primereact/issues/5556)
+- Calender: even with the viewDate prop the user can scroll past viewable dates [\#5558](https://github.com/primefaces/primereact/issues/5558)
+- InputNumber: Text selection not working on input focus when using a suffix or prefix [\#5537](https://github.com/primefaces/primereact/issues/5537)
+- TreeTable: Plenty of warnings in codesandbox demos [\#5542](https://github.com/primefaces/primereact/issues/5542)
+- DataTable: Resize "fit" doesnt work with unstyled [\#5489](https://github.com/primefaces/primereact/issues/5489)
+- Calendar: viewDate change does not update displayed year [\#4147](https://github.com/primefaces/primereact/issues/4147)
+- Incorrect year display in Calendar after navigating to next year [\#5533](https://github.com/primefaces/primereact/issues/5533)
+- Calendar: InputText does not immediately reflect locale changes [\#5535](https://github.com/primefaces/primereact/issues/5535)
+- BlockUI lost focus [\#5523](https://github.com/primefaces/primereact/issues/5523)
+- TreeTable: Header's columns not aligned with body's columns in scrollable mode [\#5487](https://github.com/primefaces/primereact/issues/5487)
+- TreeTable: Rows are not aligned when frozen [\#5508](https://github.com/primefaces/primereact/issues/5508)
+- useDebounce is wrong [\#5490](https://github.com/primefaces/primereact/issues/5490)
+- Messages: No animations in v10 [\#5485](https://github.com/primefaces/primereact/issues/5485)
+- ComponentBase: fkey used before declaration [\#5477](https://github.com/primefaces/primereact/issues/5477)
+- Tabview: There is No style when use PrimeReact & Tailwind [\#5445](https://github.com/primefaces/primereact/issues/5445)
+- Dialog: "esc" close dialogs in wrong order [\#5019](https://github.com/primefaces/primereact/issues/5019)
+- CascadeSelect: activeOptionState not working as expected [\#5425](https://github.com/primefaces/primereact/issues/5425)
+- Calendar: Size of picker panel when in month view [\#5435](https://github.com/primefaces/primereact/issues/5435)
+- DataTable demo performance | Add DeferredDemo component [\#5688](https://github.com/primefaces/primereact/issues/5688)
+- TreeSelect: panel hide after uncheck [\#5447](https://github.com/primefaces/primereact/issues/5447)
+- InputText: className is added twice [\#5440](https://github.com/primefaces/primereact/issues/5440)
+- TreeTable: Errors "React does not recognize the xxx prop on a DOM element" on rendering TreeTable component [\#5427](https://github.com/primefaces/primereact/issues/5427)
+- CascadeSelect: onInputKeyDown error in unstyled model [\#5424](https://github.com/primefaces/primereact/issues/5424)
+- Datatable: Cell editor ColumnEditorOptions param is broken [\#5233](https://github.com/primefaces/primereact/issues/5233)
+- Dropdown: component interactable in disabled div [\#5414](https://github.com/primefaces/primereact/issues/5414)
+- Dropdown: Tailwind optionDisabled with function not working [\#5676](https://github.com/primefaces/primereact/issues/5676)
+- ConfirmDialog：confirmDialog method in unstyled mode, the pop-up window style not apply [\#5656](https://github.com/primefaces/primereact/issues/5656)
+- ConfirmDialog: acceptButton's pt don't respect button [\#5653](https://github.com/primefaces/primereact/issues/5653)
+- ToggleButton (Tailwind): Imported theming from documentation crashes button [\#5609](https://github.com/primefaces/primereact/issues/5609)
+- Calendar (Tailwind): Calendar Input border rounded when showIcon is set [\#5590](https://github.com/primefaces/primereact/issues/5590)
+- Calendar (Tailwind): Calendar missing styling [\#5579](https://github.com/primefaces/primereact/issues/5579)
+- MultiSelect: PT filterInput not work [\#5568](https://github.com/primefaces/primereact/issues/5568)
+- DataTable (Tailwind): frozen is undefined when data is empty array [\#5555](https://github.com/primefaces/primereact/issues/5555)
+- TreeTable: need to be converted to data- lookups instead of className lookups [\#5553](https://github.com/primefaces/primereact/issues/5553)
+- Accordion (Tailwind): Prop type error in console [\#5546](https://github.com/primefaces/primereact/issues/5546)
+- OverlayPanel (Tailwind): showCloseIcon is at wrong position [\#5543](https://github.com/primefaces/primereact/issues/5543)
+- DataTable: need to be converted to data- lookups instead of className lookups [\#5524](https://github.com/primefaces/primereact/issues/5524)
+- Dropdown (Tailwind): Focus shadow not working [\#5512](https://github.com/primefaces/primereact/issues/5512)
+- FileUpload: Missing basicButton theming in Tailwind [\#5515](https://github.com/primefaces/primereact/issues/5515)
+- Button: Loading Spinner has no margin by default (Tailwind) [\#5509](https://github.com/primefaces/primereact/issues/5509)
+- CascadeSelect: missing some values in pt [\#5479](https://github.com/primefaces/primereact/issues/5479)
+- Picklist Tailwind is not responsive [\#5417](https://github.com/primefaces/primereact/issues/5417)
+- Tailwind: Chips camelCase properties [\#5500](https://github.com/primefaces/primereact/issues/5500)
+- Tailwind: Autocomplete camelCase [\#5499](https://github.com/primefaces/primereact/issues/5499)
+- Tailwind: Multiselect issues and camelCase on properties [\#5493](https://github.com/primefaces/primereact/issues/5493)
+- Tailwind: Listbox camelCase properties and Context property focused is missing [\#5492](https://github.com/primefaces/primereact/issues/5492)
+- Tailwind: Calendar dropdownbutton [\#5471](https://github.com/primefaces/primereact/issues/5471)
+- Tailwind: Button in Speedial does not have access to parent [\#5467](https://github.com/primefaces/primereact/issues/5467)
+- Tailwind: InputNumber input is not a function [\#5464](https://github.com/primefaces/primereact/issues/5464)
+- Tailwind: Tooltip missing context [\#5468](https://github.com/primefaces/primereact/issues/5468)
+- Tailwind: Slider starthandler and endhandler, deprecated? [\#5466](https://github.com/primefaces/primereact/issues/5466)
+- Tailwind: SidebarPassThroughOptions closeButtonIcon property missing [\#5465](https://github.com/primefaces/primereact/issues/5465)
+- Tailwind: Dropdown itemGroup camelCase missing [\#5469](https://github.com/primefaces/primereact/issues/5469)
+- Tailwind: ConfirmDialogPassThroughOptions does not a transition property [\#5463](https://github.com/primefaces/primereact/issues/5463)
+- Tailwind: Card subtitle vs subTitle and similar issues [\#5461](https://github.com/primefaces/primereact/issues/5461)
+- Tailwind: CascadeSelectPassThroughOptions is missing sublist [\#5462](https://github.com/primefaces/primereact/issues/5462)
+- TabMenu: activeIndex not rerendering tabs with Tailwind [\#5457](https://github.com/primefaces/primereact/issues/5457)
+- Tailwind: Rating readOnly property seems incorrect [\#5443](https://github.com/primefaces/primereact/issues/5443)
+- Tailwind: modelValue property [\#5444](https://github.com/primefaces/primereact/issues/5444)
+- RadioButton: data selector and Hook Form doc display error [\#5679](https://github.com/primefaces/primereact/issues/5679)
+- ScrollPanel: test failed [\#5672](https://github.com/primefaces/primereact/issues/5672)
+- Table: Sort icons are not showing correct amount directions [\#5617](https://github.com/primefaces/primereact/issues/5617)
+- TreeTable: Wrong typing for emptyMessage [\#5588](https://github.com/primefaces/primereact/issues/5588)
+- Button (Tailwind): Theming Documentation is missing attributes for button without label [\#5526](https://github.com/primefaces/primereact/issues/5526)
+- Updating demo environments to Vite [\#5455](https://github.com/primefaces/primereact/issues/5455)
+- Animated Text Highlight Problem [\#5480](https://github.com/primefaces/primereact/issues/5480)
+- RowEdit: Programmatic Demo [\#5452](https://github.com/primefaces/primereact/issues/5452)
+- Calendar: lag when navigating between months [\#5202](https://github.com/primefaces/primereact/issues/5202)
+- Datatable: CRUD Filter but [\#5691](https://github.com/primefaces/primereact/pull/5691)
diff --git a/CHANGELOG_ARCHIVE.md b/CHANGELOG_ARCHIVE.md
new file mode 100644
index 0000000000..8012c9172f
--- /dev/null
+++ b/CHANGELOG_ARCHIVE.md
@@ -0,0 +1,3641 @@
+
+## [10.2.1](https://github.com/primefaces/primereact/tree/10.2.1) (2023-11-27)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.2.0...10.2.1)
+
+**Fixed bugs:**
+
+- Tree Table Header Bug [\#5412](https://github.com/primefaces/primereact/issues/5412)
+
+## [10.2.0](https://github.com/primefaces/primereact/tree/10.2.0) (2023-11-27)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.1.1...10.2.0)
+
+**Enhancements:**
+
+- MISC Section | Accessibility [\#5356](https://github.com/primefaces/primereact/issues/5356)
+- Chip Removable Icon to have button role [\#4190](https://github.com/primefaces/primereact/issues/4190)
+- TreeTable: selected rows are not highlighted [\#5370](https://github.com/primefaces/primereact/issues/5370)
+- CascadeSelect: Popup does not close on escape key press [\#5360](https://github.com/primefaces/primereact/issues/5360)
+- SplitButton: SplitButton popup not closing on escape button click [\#5365](https://github.com/primefaces/primereact/issues/5365)
+- Speed Dial: Speed Dial Menu does not close on escape key press [\#5367](https://github.com/primefaces/primereact/issues/5367)
+- PanelMenu: Menu items with no sub-items toggling border [\#5349](https://github.com/primefaces/primereact/issues/5349)
+
+**Fixed bugs:**
+
+- DataTable: Cell editing with Dropdown doesn't work [\#3079](https://github.com/primefaces/primereact/issues/3079)
+- DataTable editor with 3rd party dropdown / overlay [\#2097](https://github.com/primefaces/primereact/issues/2097)
+- Mention: Page Breaks when navigating to Mention component [\#5363](https://github.com/primefaces/primereact/issues/5363)
+- TabView: Closes all tabs on click [\#5369](https://github.com/primefaces/primereact/issues/5369)
+- DataTable: Cell edit support Dropdown [\#2666](https://github.com/primefaces/primereact/issues/2666)
+- DataTable: editMode="cell" and Dropdown z-Index issue [\#5320](https://github.com/primefaces/primereact/issues/5320)
+- AccordionTab: Invalid values for props $$typeof, type on div tag [\#5379](https://github.com/primefaces/primereact/issues/5379)
+- Password: inputClassName doesn't work with Tailwind [\#5385](https://github.com/primefaces/primereact/issues/5385)
+- TreeTable: Unable to hide a column with hidden prop [\#5384](https://github.com/primefaces/primereact/issues/5384)
+- Calendar: monthNavigator={true} with numberOfMonths={>1} shows controls for the first month only [\#5390](https://github.com/primefaces/primereact/issues/5390)
+- TreeTable: column align header is not working [\#5315](https://github.com/primefaces/primereact/issues/5315)
+- Tree: Custom collapseIcon/expandIcon is not applied on children [\#5393](https://github.com/primefaces/primereact/issues/5393)
+- Slider: Setting min boundary value component is breaking the component. [\#5398](https://github.com/primefaces/primereact/issues/5398)
+- MultiSelect emptyMessage prop results in error [\#5340](https://github.com/primefaces/primereact/issues/5340)
+- SplitButton: pt attribute doesn't behave as described in documentation [\#4883](https://github.com/primefaces/primereact/issues/4883)
+- Tailwind: Button tailwind/index.js [\#5407](https://github.com/primefaces/primereact/issues/5407)
+- DataTable: memory leak when data updated continuously [\#4656](https://github.com/primefaces/primereact/issues/4656)
+- Removing style section from pages [\#5354](https://github.com/primefaces/primereact/issues/5354)
+- Missing type definition in for hideOverlaysOnDocumentScrolling in APIOptions [\#5378](https://github.com/primefaces/primereact/issues/5378)
+- Misc Demos Refactor [\#5357](https://github.com/primefaces/primereact/issues/5357)
+- Tailwind: Documentation transition: TRANSITIONS.overlay [\#5387](https://github.com/primefaces/primereact/issues/5387)
+- Mention: Component not rendering [\#5374](https://github.com/primefaces/primereact/issues/5374)
+- Primereact Tooltip props children and content have different types [\#5376](https://github.com/primefaces/primereact/issues/5376)
+- Slider: Setting min boundary value component is breaking the component. [\#5398](https://github.com/primefaces/primereact/issues/5398)
+
+## [10.1.1](https://github.com/primefaces/primereact/tree/10.1.1) (2023-11-21)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.1.0...10.1.1)
+
+**Fixed bugs:**
+
+- Calendar with touchUI prop always adds p-overflow-hidden to body in the mounted phase [\#5352](https://github.com/primefaces/primereact/issues/5352)
+- DataTable: Moving selection up with keyboard not working [\#5347](https://github.com/primefaces/primereact/issues/5347)
+- DataTable: fire onRowClickwhen unselect row [\#5342](https://github.com/primefaces/primereact/issues/5342)
+
+## [10.1.0](https://github.com/primefaces/primereact/tree/10.1.0) (2023-11-20)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.9...10.1.0)
+
+**Enhancements:**
+
+- MultiSelect: Add onRemove callback function, the same as in the Chip component [\#5247](https://github.com/primefaces/primereact/issues/5247)
+- Dropdown: Allow control of dropdownIcon based on state [\#5308](https://github.com/primefaces/primereact/issues/5308)
+- Password: Strength meter does not close on escape key press [\#5321](https://github.com/primefaces/primereact/issues/5321)
+- MultiSelect: Add onRemove callback function, the same as in the Chip component [\#5329](https://github.com/primefaces/primereact/issues/5329)
+- Lara theme enhancements [\#5343](https://github.com/primefaces/primereact/issues/5343)
+- New Showcase Implementation [\#5258](https://github.com/primefaces/primereact/issues/5258)
+
+**Fixed bugs:**
+
+- Slider - Prop style did not match [\#5346](https://github.com/primefaces/primereact/issues/5346)
+- Bootstrap: Example is broken [\#5310](https://github.com/primefaces/primereact/issues/5310)
+- Datatable: Setting rowEditorInitIcon has no effect. [\#4430](https://github.com/primefaces/primereact/issues/4430)
+- InputNumber: unable to input a decimal point [\#5338](https://github.com/primefaces/primereact/issues/5338)
+- Missing icons [\#5333](https://github.com/primefaces/primereact/issues/5333)
+- PrimeReactProvider: Panels closing on scroll even with hideOverlaysOnDocumentScrolling: false [\#5332](https://github.com/primefaces/primereact/issues/5332)
+- HeroSection:import case sensitive [\#5328](https://github.com/primefaces/primereact/issues/5328)
+- Tooltip: tooltip does not close when cpu throttled x6 [\#5312](https://github.com/primefaces/primereact/issues/5312)
+- Tooltip: Stuck after hovering when used in complex page [\#3965](https://github.com/primefaces/primereact/issues/3965)
+- select components: props appendTo Incorrect first time mount [\#5311](https://github.com/primefaces/primereact/issues/5311)
+- InputMask: Pasting does not respect the cursor selection [\#5285](https://github.com/primefaces/primereact/issues/5285)
+- Documentation: Ripple needs to be enable, docs says false [\#5316](https://github.com/primefaces/primereact/issues/5316)
+- Tailwind: Dialog - mask: modal property is undefined [\#5296](https://github.com/primefaces/primereact/issues/5296)
+- Tooltip with showOnDisabled prop breaks some input component style [\#5300](https://github.com/primefaces/primereact/issues/5300)
+- Fix with showondisabled prop breaks some input component style [\#5301](https://github.com/primefaces/primereact/issues/5301)
+- Code Display spacing [\#5303](https://github.com/primefaces/primereact/issues/5303)
+- Tailwind: CSS fixes from PrimeVue [\#5294](https://github.com/primefaces/primereact/issues/5294)
+- Tailwind: Under DataTable theming props.frozenRow but are not DataTableProps [\#5288](https://github.com/primefaces/primereact/issues/5288)
+- InputText inherits size from HTMLInputElement and size is number [\#5283](https://github.com/primefaces/primereact/issues/5283)
+- DataTable: Infinite loop onValueChange [\#5160](https://github.com/primefaces/primereact/issues/5160)
+- DataTable: onValueChange fires if the selection if updated [\#5281](https://github.com/primefaces/primereact/issues/5281)
+- InputNumer: PageSpeed Accessibility: ARIA IDs are unique [\#5270](https://github.com/primefaces/primereact/issues/5270)
+- Added plain text [\#5278](https://github.com/primefaces/primereact/issues/5278)
+- InputNumber: PageSpeed Accessibility - Buttons do not have an accessible name [\#5269](https://github.com/primefaces/primereact/issues/5269)
+- Splitter: stateString is undefined [\#5276](https://github.com/primefaces/primereact/issues/5276)
+- Tailwind Theming for Button uses a property plain but plain is not part of ButtonProps [\#5273](https://github.com/primefaces/primereact/issues/5273)
+- Tailwind CSS issue [\#4987](https://github.com/primefaces/primereact/issues/4987)
+- Component Styles: Remove use of !important now that @layer is used [\#5096](https://github.com/primefaces/primereact/issues/5096)
+- Sidebar fullscreen unnecessary class assignments fix [\#5271](https://github.com/primefaces/primereact/issues/5271)
+- Updating documentation under theming [\#5276](https://github.com/primefaces/primereact/issues/5276)
+- SplitButton: Outlined SplitButton right border duplication on hover [\#5264](https://github.com/primefaces/primereact/issues/5264)
+- PanelMenu: command of MenuItem without child cannot be triggered [\#5255](https://github.com/primefaces/primereact/issues/5255)
+- TreeSelect: In unstyled mode, the selected and checked style not work [\#5254](https://github.com/primefaces/primereact/issues/5254)
+- TabView: Dynamically created TabPanels and onTabClose closes more than one Tab [\#2842](https://github.com/primefaces/primereact/issues/2842)
+- TreeTable: filter row ignored when frozen column enabled [\#5252](https://github.com/primefaces/primereact/issues/5252)
+- MultiSelect: stopPropgation on multiSelect items [\#5250](https://github.com/primefaces/primereact/issues/5250)
+- Add support for faster progressive and incremental builds [\#5231](https://github.com/primefaces/primereact/issues/5231)
+- InputNumber: button event repeats infinitely if input is disabled [\#5245](https://github.com/primefaces/primereact/issues/5245)
+- AutoComplete: Primitive value 0 does not display correctly [\#5241](https://github.com/primefaces/primereact/issues/5241)
+- Calendar: Wrong docs in Pass Through [\#5243](https://github.com/primefaces/primereact/issues/5243)
+- TabView: Dynamic Tabs not working [\#5229](https://github.com/primefaces/primereact/issues/5229)
+- OverlayPanel: Toast is appearing when page is loaded [\#5235](https://github.com/primefaces/primereact/issues/5235)
+- InputNumber: Enter leading 0 when using prefix/suffix [\#5234](https://github.com/primefaces/primereact/issues/5234)
+- FileUpload: Uploaded file is cleared in advanced mode [\#5226](https://github.com/primefaces/primereact/issues/5226)
+- Mention: Mentioning someone keeps the search text [\#5216](https://github.com/primefaces/primereact/issues/5216)
+- ComponentBase: TypeError: Cannot read properties of undefined (reading 'unstyled') [\#5168](https://github.com/primefaces/primereact/issues/5168)
+- TypeError: Cannot read properties of undefined (reading 'unstyled') [\#5203](https://github.com/primefaces/primereact/issues/5203)
+
+## [10.0.9](https://github.com/primefaces/primereact/tree/10.0.9) (2023-11-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.8...10.0.9)
+
+**Fixed bugs:**
+
+- useHandleStyle Broken: Styles not loading [\#5213](https://github.com/primefaces/primereact/issues/5213)
+
+## [10.0.8](https://github.com/primefaces/primereact/tree/10.0.8) (2023-11-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.7...10.0.8)
+
+**Fixed bugs:**
+
+- MultiSelect: Dropdown body detaches from dropdown head/button [\#5210](https://github.com/primefaces/primereact/issues/5210)
+- "Command" docs are missing [\#5205](https://github.com/primefaces/primereact/issues/5205)
+- Tailwind: Panelmenu: Some classes not being picked up during Styling [\#5206](https://github.com/primefaces/primereact/issues/5206)
+- ComponentBase: TypeError: Cannot read properties of undefined (reading 'unstyled') [\#5168](https://github.com/primefaces/primereact/issues/5168)
+- TypeError: Cannot read properties of undefined (reading 'unstyled') [\#5203](https://github.com/primefaces/primereact/issues/5203)
+- Tailwind: MultiSelect: multiple conflicting classname keys [\#5200](https://github.com/primefaces/primereact/issues/5200)
+- Tailwind: PanelMenu: Documentation Pointing to Incorrect TRANSITION [\#5198](https://github.com/primefaces/primereact/issues/5198)
+- Datatable: Missing rowEditorSaveButton and rowEditorSaveIcon on ColumnPassThroughOptions [\#5196](https://github.com/primefaces/primereact/issues/5196)
+- DataTable: Redefine column width after resizing a column manually [\#5123](https://github.com/primefaces/primereact/issues/5123)
+- DataTable: When using InputTextarea as editor, pressing Ctrl + Enter or Shift + Enter results in a submission [\#5193](https://github.com/primefaces/primereact/issues/5193)
+- InputNumber: Minus Sign not working for Currency INR [\#5185](https://github.com/primefaces/primereact/issues/5185)
+- PanelMenu: Visual defect [\#5190](https://github.com/primefaces/primereact/issues/5190)
+- Tailwind with Menubar end attribute does not align-right [\#5181](https://github.com/primefaces/primereact/issues/5181)
+- DataTable with frozen columns and displayFilter 'row' doesn't freeze filter cell [\#5164](https://github.com/primefaces/primereact/issues/5164)
+- Add missing pi-file-edit icon [\#5179](https://github.com/primefaces/primereact/issues/5179)
+- OrderList: order of selection reversed when moving multiple items to top or bottom [\#5177](https://github.com/primefaces/primereact/issues/5177)
+- 10.0.7: forwardRef Warning [\#5172](https://github.com/primefaces/primereact/issues/5172)
+- id not passed to SplitterPanel [\#5169](https://github.com/primefaces/primereact/issues/5169)
+
+## [10.0.7](https://github.com/primefaces/primereact/tree/10.0.7) (2023-10-26)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.6...10.0.7)
+
+**Fixed bugs:**
+
+- SplitButton: Missing styles [\#5163](https://github.com/primefaces/primereact/issues/5163)
+
+## [10.0.6](https://github.com/primefaces/primereact/tree/10.0.6) (2023-10-26)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.5...10.0.6)
+
+**Fixed bugs:**
+
+- FileUpload: Adding pending text to localization in component [\#5161](https://github.com/primefaces/primereact/issues/5161)
+- AvatarGroup -> Avatar Hover tooltip [\#4181](https://github.com/primefaces/primereact/issues/4181)
+- MultiSelect: Clicking on "selectAll" checkbox closes options dropdown [\#5151](https://github.com/primefaces/primereact/issues/5151)
+- AccordionTab cannot be used in custom wrapper [\#2052](https://github.com/primefaces/primereact/issues/2052)
+- SpeedDial: className property not being applied to list items [\#5148](https://github.com/primefaces/primereact/issues/5148)
+- MultiSelect: Clear button marks variable as undefined [\#5142](https://github.com/primefaces/primereact/issues/5142)
+- Mispell of 'inteface' instead of 'interface' [\#5138](https://github.com/primefaces/primereact/issues/5138)
+- Calendar with mask does not work as expected when editing input. [\#5137](https://github.com/primefaces/primereact/issues/5137)
+- DataTable: passthrough styling is ignored [\#5131](https://github.com/primefaces/primereact/issues/5131)
+- Column: Pass Through does not apply header classes correctly [\#5125](https://github.com/primefaces/primereact/issues/5125)
+- InputNumber: Typescript type definition for 'incrementButtonIcon' and 'decrementButtonIcon' errorneous [\#5132](https://github.com/primefaces/primereact/issues/5132)
+- Mention: Mentioning someone deletes the first word of the comment [\#5114](https://github.com/primefaces/primereact/issues/5114)
+
+**New Features:**
+
+- Password with ability to toggle mask via a method and a unmasked property [\#5135](https://github.com/primefaces/primereact/issues/5135)
+
+## [10.0.5](https://github.com/primefaces/primereact/tree/10.0.5) (2023-10-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.4...10.0.5)
+
+**Fixed bugs:**
+
+- Overlay animations are not working with Tailwind preset [\#5117](https://github.com/primefaces/primereact/issues/5117)
+
+## [10.0.4](https://github.com/primefaces/primereact/tree/10.0.4) (2023-10-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.3...10.0.4)
+
+**Implemented New Features and Enhancements:**
+
+- MultiSelect: Formatting selected items with spaces after the commas [\#5100](https://github.com/primefaces/primereact/issues/5100)
+- Tree: onDrop should not attempt a copy of node values [\#5080](https://github.com/primefaces/primereact/issues/5080)
+
+**Fixed bugs:**
+
+- Tailwind preset animations are not working as expected [\#5110](https://github.com/primefaces/primereact/issues/5110)
+- Slider (range): Warning: NaN is an invalid value for the left css style property. [\#5111](https://github.com/primefaces/primereact/issues/5111)
+- Inplace Component Doc Image Responsive Issue [\#5103](https://github.com/primefaces/primereact/issues/5103)
+- TreeSelect: Incorrect TypeScript types for filterTemplate options [\#5102](https://github.com/primefaces/primereact/issues/5102)
+- TreeSelect: With selected value, close icon looks cluttered [\#5012](https://github.com/primefaces/primereact/issues/5012)
+- TreeSelect: Clear Icon Misplacement [\#5020](https://github.com/primefaces/primereact/issues/5020)
+- SelectButton: AllowEmpty not working [\#5094](https://github.com/primefaces/primereact/issues/5094)
+- Toast/Messages: remove not working [\#5083](https://github.com/primefaces/primereact/issues/5083)
+- Fieldset: Missing root className pass [\#5088](https://github.com/primefaces/primereact/issues/5088)
+- Panel: Missing props.className passthrough [\#5087](https://github.com/primefaces/primereact/issues/5087)
+- useDebounce: Missing type [\#5085](https://github.com/primefaces/primereact/issues/5085)
+- Message: Icon shrinks as text in message grows larger [\#5078](https://github.com/primefaces/primereact/issues/5078)
+
+## [9.6.3](https://github.com/primefaces/primereact/tree/9.6.3) (2023-10-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.6.2...9.6.3)
+
+**Fixed bugs:**
+
+- DataTable: Invalid attribute warning when passing custom icon to rowReorderIcon [\#5109](https://github.com/primefaces/primereact/issues/5109)
+
+## [10.0.3](https://github.com/primefaces/primereact/tree/10.0.3) (2023-10-11)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.2...10.0.3)
+
+**Deprecated:**
+
+- SlideMenu: Deprecate from PrimeReact [\#5063](https://github.com/primefaces/primereact/issues/5063)
+- Remove FullCalendar theme support [\#5062](https://github.com/primefaces/primereact/issues/5062)
+
+**Implemented New Features and Enhancements:**
+
+- Improve block/unblockScroll architecture [\#5077](https://github.com/primefaces/primereact/issues/5077)
+- SelectButton: Add allowEmpty property [\#5073](https://github.com/primefaces/primereact/issues/5073)
+- DataTable: Clicking the center mouse button on a row should open the row item in a new tab [\#5051](https://github.com/primefaces/primereact/issues/5051)
+- Dropdown: Allow to pass "className" with a group as well [\#5047](https://github.com/primefaces/primereact/issues/5047)
+
+**Fixed bugs:**
+
+- Dock: Toast Component not working properly [\#5076](https://github.com/primefaces/primereact/issues/5076)
+- DataTable bug when clicked in rowExpansion icon with selectionMode="single". [\#5074](https://github.com/primefaces/primereact/issues/5074)
+- Editor layer defect [\#5065](https://github.com/primefaces/primereact/issues/5065)
+- ContextMenu: Broken with nested items \(10.0\) [\#5064](https://github.com/primefaces/primereact/issues/5064)
+- Menu: Menu with popup prop passed doesnot close on Escape keypress. [\#5044](https://github.com/primefaces/primereact/issues/5044)
+- DataTable: Checkbox onChange stops propagation [\#5039](https://github.com/primefaces/primereact/issues/5039)
+- Scroll Panel: Scroll Panel does not scroll with mouse [\#5038](https://github.com/primefaces/primereact/issues/5038)
+- Context Menu In Datatable [\#5035](https://github.com/primefaces/primereact/issues/5035)
+- MultiSelect: FilterTemplate prop not working, execution error [\#5028](https://github.com/primefaces/primereact/issues/5028)
+- Calendar: When stepMinute is set, the time value does not "snap" on initial date change [\#5027](https://github.com/primefaces/primereact/issues/5027)
+- UseStorage hook window listener does not parse JSON [\#5026](https://github.com/primefaces/primereact/issues/5026)
+- Fixed lara blue state colors [\#5015](https://github.com/primefaces/primereact/issues/5015)
+- Progress bar determinate type doesnt apply classNames passed through props [\#5003](https://github.com/primefaces/primereact/issues/5003)
+- DataTable: Filter Menu Icon disappeared after sorting [\#4994](https://github.com/primefaces/primereact/issues/4994)
+- Column: headerClassName [\#4993](https://github.com/primefaces/primereact/issues/4993)
+- MultiSelect: Doesn't render items [\#4988](https://github.com/primefaces/primereact/issues/4988)
+- InputMask does not fire onComplete method when a slotChar is present [\#3240](https://github.com/primefaces/primereact/issues/3240)
+
+## [10.0.2](https://github.com/primefaces/primereact/tree/10.0.2) (2023-09-29)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.1...10.0.2)
+
+**Fixed bugs:**
+
+- The .esm builds not working as expected. [\#4984](https://github.com/primefaces/primereact/issues/4984)
+- Improve Tailwind import [\#4985](https://github.com/primefaces/primereact/issues/4985)
+
+## [10.0.1](https://github.com/primefaces/primereact/tree/10.0.1) (2023-09-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/10.0.0...10.0.1)
+
+**Fixed bugs:**
+
+- Base styles are not loading [\#4982](https://github.com/primefaces/primereact/issues/4982)
+
+## [10.0.0](https://github.com/primefaces/primereact/tree/10.0.0) (2023-09-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.6.2...10.0.0)
+
+**Breaking Changes:**
+
+- Theme updates: change `:focus` to `:focus-visible` [\#4972](https://github.com/primefaces/primereact/issues/4972)
+- New @layer implementation [\#4959](https://github.com/primefaces/primereact/issues/4959)
+- Core: Drop Internet Explorer Support [\#3238](https://github.com/primefaces/primereact/issues/3238)
+
+**Implemented New Features and Enhancements:**
+
+- Add / Update OG Image [\#4970](https://github.com/primefaces/primereact/issues/4970)
+- SlideMenu: SlideMenu with `popup` prop passed doesnot close on Escape keypress. [\#4961](https://github.com/primefaces/primereact/issues/4961)
+- Dialog: component scrollbar shift [\#4958](https://github.com/primefaces/primereact/issues/4958)
+- ConfirmPopup: Escape key does not close the popup. [\#4952](https://github.com/primefaces/primereact/issues/4952)
+- Multiselect: Display labels of selected items in filtered component [\#4944](https://github.com/primefaces/primereact/issues/4944)
+- Update Lara theme font to Inter Var [\#4942](https://github.com/primefaces/primereact/issues/4942)
+- Dialog: blockScroll + visible + fullscreen mode gives unexpected behavior if dialog is unmounted while visible [\#4940](https://github.com/primefaces/primereact/issues/4940)
+- Add gtag manager [\#4900](https://github.com/primefaces/primereact/issues/4900)
+- Dropdown: allow to set label's class name via the api [\#4877](https://github.com/primefaces/primereact/issues/4877)
+- FileUpload: Localize pending and file sizes [\#4872](https://github.com/primefaces/primereact/issues/4872)
+- Calendar: Missing `slotChar` prop [\#4866](https://github.com/primefaces/primereact/issues/4866)
+- AutoComplete: required property doesn't exist [\#4858](https://github.com/primefaces/primereact/issues/4858)
+- OverlayPanel: does not reposition itself when its content forces its size to change [\#4819](https://github.com/primefaces/primereact/issues/4819)
+- TreeTable: There's not a way to get the data after a change [\#4816](https://github.com/primefaces/primereact/issues/4816)
+- Autocomplete: selectionLimit ux enhancement [\#4784](https://github.com/primefaces/primereact/issues/4784)
+- SSR: Support Server Component [\#4634](https://github.com/primefaces/primereact/issues/4634)
+- Add `unstyled` mode for all components [\#4602](https://github.com/primefaces/primereact/issues/4602)
+
+**Fixed bugs:**
+
+- Messages: Icon shrinks as text in message grows larger [\#4977](https://github.com/primefaces/primereact/issues/4977)
+- Image: Image Preview shows a browser scrollbar. [\#4963](https://github.com/primefaces/primereact/issues/4963)
+- Tree Table: Footer is defined as a function but it doesn't work [\#4960](https://github.com/primefaces/primereact/issues/4960)
+- MegaMenu: click not navigating to `url` [\#4956](https://github.com/primefaces/primereact/issues/4956)
+- FileUpload: Input Triggered on Any Mouse Click [\#4948](https://github.com/primefaces/primereact/issues/4948)
+- Dialog: When using blockScroll and the dialog is unmounted while being visible, scrolling continues to be blocked [\#4938](https://github.com/primefaces/primereact/issues/4938)
+- Password: onKeyDown event is triggered twice. [\#4934](https://github.com/primefaces/primereact/issues/4934)
+- Menu | MenuItem API id property is ignored [\#4932](https://github.com/primefaces/primereact/issues/4932)
+- Ripple: Has no effect on touch enabled desktop screens [\#4909](https://github.com/primefaces/primereact/issues/4909)
+- Slider error on mobile devices [\#4906](https://github.com/primefaces/primereact/issues/4906)
+- Calendar: Multiple Month/Year selection mode not highlighting selected month [\#4892](https://github.com/primefaces/primereact/issues/4892)
+- Build: missing `components/lib/common/Common.css` [\#4889](https://github.com/primefaces/primereact/issues/4889)
+- InputMask: Autofocus crashes [\#4882](https://github.com/primefaces/primereact/issues/4882)
+- InputNumber: Doesn't allow minus sign in currency mode [\#4875](https://github.com/primefaces/primereact/issues/4875)
+- Toast: Toast Icon is too small when there is long text [\#4873](https://github.com/primefaces/primereact/issues/4873)
+- DataTable: conditional row reorder shows "false" instead of hiding reorder icon [\#4854](https://github.com/primefaces/primereact/issues/4854)
+- AutoComplete: can't remove item [\#4848](https://github.com/primefaces/primereact/issues/4848)
+- DataTable filterDisplay="menu", Uncaught TypeError [\#4845](https://github.com/primefaces/primereact/issues/4845)
+- Avatar: shape="circle" is not working [\#4839](https://github.com/primefaces/primereact/issues/4839)
+- Password: tabIndex duplication [\#4836](https://github.com/primefaces/primereact/issues/4836)
+- Calendar: Class ".p-inputwrapper-focus" is not removed when the input is unfocused [\#4834](https://github.com/primefaces/primereact/issues/4834)
+- DataTable: editorCallback does not update a value if the field name of column has nested elements [\#4814](https://github.com/primefaces/primereact/issues/4814)
+- Calendar: disabledDays do affect year to be also disabled [\#4803](https://github.com/primefaces/primereact/issues/4803)
+- Context: setInputStyle\("filled"\) doesn't switch the style [\#4799](https://github.com/primefaces/primereact/issues/4799)
+- Ripple: Ripple effect not working in some instances [\#4153](https://github.com/primefaces/primereact/issues/4153)
+- Calendar: Changing Calendar input \(with mask\) clears the rest of the form's state [\#4030](https://github.com/primefaces/primereact/issues/4030)
+- Datatable: onValueChange with Removable Sort [\#3133](https://github.com/primefaces/primereact/issues/3133)
+
+## [9.6.2](https://github.com/primefaces/primereact/tree/9.6.2) (2023-08-17)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.6.1...9.6.2)
+
+**Implemented New Features and Enhancements:**
+
+- DataTable: Type issue for Selection Mode [\#4777](https://github.com/primefaces/primereact/issues/4777)
+
+**Fixed bugs:**
+
+- Carousel: created style lifecycle issue [\#4779](https://github.com/primefaces/primereact/issues/4779)
+- Dropdown: MenuItem not respecting style attribute [\#4766](https://github.com/primefaces/primereact/issues/4766)
+- Slider: onSlideEnd behaviour has changed [\#4680](https://github.com/primefaces/primereact/issues/4680)
+- Tooltip: autoHide={false} broken on version 9 [\#4604](https://github.com/primefaces/primereact/issues/4604)
+- Calendar: Mask is not displayed [\#4579](https://github.com/primefaces/primereact/issues/4579)
+- Calendar: The date cannot be selected from the first click in the opened popup [\#4568](https://github.com/primefaces/primereact/issues/4568)
+- DataTable: Column resize is not working properly. [\#4471](https://github.com/primefaces/primereact/issues/4471)
+- Carousel: Swipe functionality [\#3788](https://github.com/primefaces/primereact/issues/3788)
+
+## [9.6.1](https://github.com/primefaces/primereact/tree/9.6.1) (2023-08-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.6.0...9.6.1)
+
+**Fixed bugs:**
+
+- FileUpload: Uploading file issue in multiple= false [\#4665](https://github.com/primefaces/primereact/issues/4665)
+- DataTable: Unexpected Behavior in Production Mode for ColumnResize [\#4655](https://github.com/primefaces/primereact/issues/4655)
+
+## [9.6.0](https://github.com/primefaces/primereact/tree/9.6.0) (2023-06-27)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.5.0...9.6.0)
+
+**Implemented New Features and Enhancements:**
+
+- TreeSelect: Support custom expand/collapse icons [\#4525](https://github.com/primefaces/primereact/issues/4525)
+- FileUpload: Uploaded files ref methods [\#4516](https://github.com/primefaces/primereact/issues/4516)
+- Carousel: Add start/stop autoplay to exposed methods [\#4513](https://github.com/primefaces/primereact/issues/4513)
+- TreeTable: Row hover event [\#4502](https://github.com/primefaces/primereact/issues/4502)
+- TreeTable: Add toggler template \(same as Tree component\) [\#4499](https://github.com/primefaces/primereact/issues/4499)
+- Dropdown: VirtualScrollerRef access for scrollToIndex [\#4489](https://github.com/primefaces/primereact/issues/4489)
+- New passthrough\(pt\) property implementation for Data Components [\#4432](https://github.com/primefaces/primereact/issues/4432)
+- New passthrough\(pt\) property implementation for Form Components [\#4431](https://github.com/primefaces/primereact/issues/4431)
+- InputNumber should support global locale [\#4291](https://github.com/primefaces/primereact/issues/4291)
+- TreeSelect: `nodeTemplate` property [\#3678](https://github.com/primefaces/primereact/issues/3678)
+
+**Fixed bugs:**
+
+- FileUpload component does not pass file information in the onSelect event [\#4557](https://github.com/primefaces/primereact/issues/4557)
+- Calendar: Mask prop does not work [\#4548](https://github.com/primefaces/primereact/issues/4548)
+- ContextMenu: Global not working in Strict Mode [\#4543](https://github.com/primefaces/primereact/issues/4543)
+- PickList: Error when Transferring Unselected Values in Pick List Functionality [\#4540](https://github.com/primefaces/primereact/issues/4540)
+- MultiSelect \(group\) SelectAll checked when all items in first group are selected [\#4535](https://github.com/primefaces/primereact/issues/4535)
+- FileUpload: input passthrough not working when mode="basic" [\#4533](https://github.com/primefaces/primereact/issues/4533)
+- MultiSelect: Dropdown closes on deselect [\#4523](https://github.com/primefaces/primereact/issues/4523)
+- Skeleton: children prop not rendering [\#4512](https://github.com/primefaces/primereact/issues/4512)
+- ScrollTop: doesn't work [\#4505](https://github.com/primefaces/primereact/issues/4505)
+- BreadCrumb: label home prop doesn't work [\#4504](https://github.com/primefaces/primereact/issues/4504)
+- DataTable: Checkbox/Radio not respecting isDataSelectable [\#4492](https://github.com/primefaces/primereact/issues/4492)
+- SplitButton: menu icon not visible in large size [\#4483](https://github.com/primefaces/primereact/issues/4483)
+- Menubar: Cannot use useRef [\#4467](https://github.com/primefaces/primereact/issues/4467)
+- TabView: On initial load, the page will scroll down to the Tab if it's below the scroll window [\#4462](https://github.com/primefaces/primereact/issues/4462)
+- Calendar: showMinMaxRange property is broken in multiple ways [\#4456](https://github.com/primefaces/primereact/issues/4456)
+- Calendar: Navigation broken when defining min and max values [\#4449](https://github.com/primefaces/primereact/issues/4449)
+
+## [9.5.0](https://github.com/primefaces/primereact/tree/9.5.0) (2023-05-24)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.4.0...9.5.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add `hideOverlaysOnDocumentScrolling` option to PrimeReact config [\#4448](https://github.com/primefaces/primereact/issues/4448)
+- Icons: clipPath improvements [\#4441](https://github.com/primefaces/primereact/issues/4441)
+- AutoComplete: panelFooterTemplate prop [\#4426](https://github.com/primefaces/primereact/issues/4426)
+- MultiSelect: No way to disable filter auto focus [\#4423](https://github.com/primefaces/primereact/issues/4423)
+- New passthrough\(pt\) property implementation for Media Components [\#4393](https://github.com/primefaces/primereact/issues/4393)
+- New passthrough\(pt\) property implementation for Chart & FileUpload & Message Components [\#4392](https://github.com/primefaces/primereact/issues/4392)
+- New passthrough\(pt\) property implementation for Menu Components [\#4391](https://github.com/primefaces/primereact/issues/4391)
+- Mention: suggestion panel to hide when scrolling away [\#4223](https://github.com/primefaces/primereact/issues/4223)
+- Messages-Toast: Inconsistency [\#4077](https://github.com/primefaces/primereact/issues/4077)
+- Menu: Add ability to right align [\#3753](https://github.com/primefaces/primereact/issues/3753)
+
+**Fixed bugs:**
+
+- Dropdown: Footer using incorrect style name [\#4446](https://github.com/primefaces/primereact/issues/4446)
+- InputNumber: preventing ripple on buttons [\#4443](https://github.com/primefaces/primereact/issues/4443)
+- Datatable: filterIcon and filterClearIcon not propagated [\#4439](https://github.com/primefaces/primereact/issues/4439)
+- BreadCrumb: SVG location of the DOM [\#4438](https://github.com/primefaces/primereact/issues/4438)
+- DataTable: Filter Clear icon is missing [\#4437](https://github.com/primefaces/primereact/issues/4437)
+- Datatable: Setting rowEditorInitIcon has no effect. [\#4430](https://github.com/primefaces/primereact/issues/4430)
+- MultiSelect clear icon not aligned correctly [\#4427](https://github.com/primefaces/primereact/issues/4427)
+- TriStateCheckbox: "undefined" value render checkbox highlighted but without value [\#4422](https://github.com/primefaces/primereact/issues/4422)
+- Checkbox: Toggling value by clicking the label broken [\#4402](https://github.com/primefaces/primereact/issues/4402)
+- Image: Zoom out action disabled when fully zoomed in [\#4400](https://github.com/primefaces/primereact/issues/4400)
+- ConfirmDialog: Missing dialog header [\#4397](https://github.com/primefaces/primereact/issues/4397)
+- Autocomplete: multiple + forceSelection [\#4363](https://github.com/primefaces/primereact/issues/4363)
+- DataTable: resizableColumns with stateStorage will not adjust saved column width after refresh. [\#4211](https://github.com/primefaces/primereact/issues/4211)
+- Autocomplete clears selected values onBlur when forceSelection and multiple are true [\#4203](https://github.com/primefaces/primereact/issues/4203)
+- Dropdown: rendering problem when used in a Dialog [\#2683](https://github.com/primefaces/primereact/issues/2683)
+
+## [9.4.0](https://github.com/primefaces/primereact/tree/9.4.0) (2023-05-12)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.3.1...9.4.0)
+
+**Implemented New Features and Enhancements:**
+
+- New passthrough\(pt\) property implementation for Button Components [\#4360](https://github.com/primefaces/primereact/issues/4360)
+- New passthrough\(pt\) property implementation for Overlay Components [\#4359](https://github.com/primefaces/primereact/issues/4359)
+- New passthrough\(pt\) property implementation for Misc Components [\#4352](https://github.com/primefaces/primereact/issues/4352)
+- New passthrough\(pt\) property implementation for Panel Components [\#4293](https://github.com/primefaces/primereact/issues/4293)
+- Events: Forward preventDefault, stopPropagation from original event [\#4375](https://github.com/primefaces/primereact/issues/4375)
+- MultiSelect: expose selected value in onChange event [\#4366](https://github.com/primefaces/primereact/issues/4366)
+- RadioButton/Checkbox: Add `onClick` event [\#4356](https://github.com/primefaces/primereact/issues/4356)
+- Toast/Messages: Fix updates incorrectly updating older version of the state [\#4350](https://github.com/primefaces/primereact/issues/4350)
+- DataTable: event.preventDefault\(\) not working in cell edit events [\#4339](https://github.com/primefaces/primereact/issues/4339)
+- DataTable: `showHeaders={false}` option [\#4337](https://github.com/primefaces/primereact/issues/4337)
+- DataTable: Custom icon prop for filter icon [\#4327](https://github.com/primefaces/primereact/issues/4327)
+- Dialog: Maximized should not have rounded borders? [\#4310](https://github.com/primefaces/primereact/issues/4310)
+- ColorPicker: Styling the Input [\#4267](https://github.com/primefaces/primereact/issues/4267)
+- Panel: Footer Option [\#4200](https://github.com/primefaces/primereact/issues/4200)
+- EmptyFilterMessage does not work on Dropdown with virtualscroll [\#4193](https://github.com/primefaces/primereact/issues/4193)
+- Dropdown: Footer Template [\#4026](https://github.com/primefaces/primereact/issues/4026)
+- Toast+Sidebar: Closing toast closes sidebar [\#3977](https://github.com/primefaces/primereact/issues/3977)
+- Datatable : Export custom header export to CSV [\#3975](https://github.com/primefaces/primereact/issues/3975)
+- DataTable - Impossible to implement Expandable Row Groups with Row Expansion [\#2213](https://github.com/primefaces/primereact/issues/2213)
+
+**Fixed bugs:**
+
+- Calendar: disabledDates prop not working for month [\#4370](https://github.com/primefaces/primereact/issues/4370)
+- useSessionStorage Hook: initialization issue [\#4353](https://github.com/primefaces/primereact/issues/4353)
+- InputText/InputTextArea: .p-filled class/isFilled bool not resetting after setValue\(""\) [\#4351](https://github.com/primefaces/primereact/issues/4351)
+- Dropdown: When using groups and filter options, if optionGroupChildren is set to a different name other than items, filter stops working properly [\#4348](https://github.com/primefaces/primereact/issues/4348)
+- DIalog: modal prop is not always respected [\#4334](https://github.com/primefaces/primereact/issues/4334)
+- DataTable preventDefault NOT WORKING [\#4333](https://github.com/primefaces/primereact/issues/4333)
+- Button: No margin/padding between button text and loading spinner [\#4320](https://github.com/primefaces/primereact/issues/4320)
+- Dialog: body scroll is not restored when closing maximized Dialog [\#4313](https://github.com/primefaces/primereact/issues/4313)
+- SpeedDial: `buttonTemplate` not working [\#4305](https://github.com/primefaces/primereact/issues/4305)
+- Carousel: onPageChange and autoplayInterval does not work together [\#4301](https://github.com/primefaces/primereact/issues/4301)
+- Image: Properties e.g. crossOrigin are only applied to the preview and not the full image [\#4300](https://github.com/primefaces/primereact/issues/4300)
+- Calendar: time select updates the parent component state through props.value [\#4298](https://github.com/primefaces/primereact/issues/4298)
+- FileUpload: console error [\#4294](https://github.com/primefaces/primereact/issues/4294)
+- DataTable: sort icon will be resized if the column title is multiline. [\#4283](https://github.com/primefaces/primereact/issues/4283)
+- ConfirmDialog: Event triggers multiple times if users spam Enter / Double click on button [\#4168](https://github.com/primefaces/primereact/issues/4168)
+- Calendar: disabledDays prop also disable months [\#4015](https://github.com/primefaces/primereact/issues/4015)
+- Galleria: Undefined imgSrc if `autoplay` with `circular={false}` [\#3973](https://github.com/primefaces/primereact/issues/3973)
+- DataTable: Resizing headers in expand mode does not work correctly [\#3970](https://github.com/primefaces/primereact/issues/3970)
+- Dialog: Performing "onMouseDown" inside the Dialog and "onMouseUp" outside of it closes the dialog when "dismissableMask" is true [\#3962](https://github.com/primefaces/primereact/issues/3962)
+- TreeTable : Support Custom Templating in Header [\#3946](https://github.com/primefaces/primereact/issues/3946)
+- DataTable: Resize column place is not correct [\#3795](https://github.com/primefaces/primereact/issues/3795)
+- Tooltip: registering show/hide events twice on each target [\#3701](https://github.com/primefaces/primereact/issues/3701)
+
+## [9.3.1](https://github.com/primefaces/primereact/tree/9.3.1) (2023-04-26)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.3.0...9.3.1)
+
+**Implemented New Features and Enhancements:**
+
+- Messages: Cannot pass Id property [\#4281](https://github.com/primefaces/primereact/issues/4281)
+- Image: missing `crossOrigin`, `referrerPolicy`, `loading` and `useMap` [\#4273](https://github.com/primefaces/primereact/issues/4273)
+- Mention: autoResize wont resize back to starting height [\#4197](https://github.com/primefaces/primereact/issues/4197)
+- DataTable: Cell edit support Dropdown. [\#2666](https://github.com/primefaces/primereact/issues/2666)
+
+**Fixed bugs:**
+
+- DataTable: Correct "Select All" behavior in checkbox selection mode [\#4284](https://github.com/primefaces/primereact/issues/4284)
+- DataTable: multisortField - Cannot read properties of undefined \(reading 'field'\) [\#4269](https://github.com/primefaces/primereact/issues/4269)
+- Image: No overload matches this call. [\#4268](https://github.com/primefaces/primereact/issues/4268)
+- Uncaught reference error for icons. [\#4264](https://github.com/primefaces/primereact/issues/4264)
+- Calendar: `numberOfMonths` \> 12 issue [\#4259](https://github.com/primefaces/primereact/issues/4259)
+- DataTable: paginator with alwaysShowPaginator: false is displayed for empty table [\#4254](https://github.com/primefaces/primereact/issues/4254)
+- PickList: source/target filterTemplate not working [\#4249](https://github.com/primefaces/primereact/issues/4249)
+- DataTable: Data are not displayed when "Column" has no "field" attributes [\#4248](https://github.com/primefaces/primereact/issues/4248)
+- Tooltip: Does not work if target is dynamic [\#4243](https://github.com/primefaces/primereact/issues/4243)
+- TabView: Conditionally render TabPanel under TabView [\#4235](https://github.com/primefaces/primereact/issues/4235)
+- Mention: wrong value when clicking on suggestion [\#4221](https://github.com/primefaces/primereact/issues/4221)
+- Dropdown: with react-hook-form . Control prop doesn't exist [\#4215](https://github.com/primefaces/primereact/issues/4215)
+- TieredMenu: Menu items in are assigned with id attribute with a value of \[object Object\] [\#4011](https://github.com/primefaces/primereact/issues/4011)
+
+## [9.3.0](https://github.com/primefaces/primereact/tree/9.3.0) (2023-04-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.2.3...9.3.0)
+
+**Implemented New Features and Enhancements:**
+
+- Improve icon implementation in core [\#4220](https://github.com/primefaces/primereact/issues/4220)
+- Add icon templating support to components [\#4226](https://github.com/primefaces/primereact/issues/4226)
+- Add new Icon components [\#4227](https://github.com/primefaces/primereact/issues/4227)
+
+## [9.2.3](https://github.com/primefaces/primereact/tree/9.2.3) (2023-04-11)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.2.2...9.2.3)
+
+**Fixed bugs:**
+
+- Type missing for PrimeReact.changeTheme [\#4240](https://github.com/primefaces/primereact/issues/4240)
+
+## [9.2.2](https://github.com/primefaces/primereact/tree/9.2.2) (2023-03-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.2.1...9.2.2)
+
+**Implemented New Features and Enhancements:**
+
+- Slider: Change positioning of handles in range mode [\#4184](https://github.com/primefaces/primereact/issues/4184)
+
+**Fixed bugs:**
+
+- OverlayEventOptions type inccorrect [\#4189](https://github.com/primefaces/primereact/issues/4189)
+- Mention: selected result to replace the search query [\#4188](https://github.com/primefaces/primereact/issues/4188)
+- Tree: Missing property `dropNode` in type signature of `TreeDragDropEvent` [\#4179](https://github.com/primefaces/primereact/issues/4179)
+- CodeSandbox demos are broken [\#4172](https://github.com/primefaces/primereact/issues/4172)
+- Sidebar: Unexpected component hide [\#4170](https://github.com/primefaces/primereact/issues/4170)
+- Calendar: `view` typescript missing `year` [\#4163](https://github.com/primefaces/primereact/issues/4163)
+- Ripple: first click on component has incorrect location [\#4160](https://github.com/primefaces/primereact/issues/4160)
+- primereact.min.css Error at background:transparent URL\(\) with base64 image [\#4097](https://github.com/primefaces/primereact/issues/4097)
+- ConfirmDialog: is not loading inside a Shadow DOM [\#4096](https://github.com/primefaces/primereact/issues/4096)
+
+## [9.2.1](https://github.com/primefaces/primereact/tree/9.2.1) (2023-03-15)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.2.0...9.2.1)
+
+**Implemented New Features and Enhancements:**
+
+- Timeline: subgroups [\#4154](https://github.com/primefaces/primereact/issues/4154)
+- Add new style props to SplitButton component [\#4144](https://github.com/primefaces/primereact/issues/4144)
+- Using the tooltip attribute inside the Shadow Dom crashes Primereact on hover [\#4143](https://github.com/primefaces/primereact/issues/4143)
+- DataTable: responsiveLayout="stack" and scrollable not working together [\#3693](https://github.com/primefaces/primereact/issues/3693)
+
+**Fixed bugs:**
+
+- Showcase: multiple pages have a typo of the word 'archive' [\#4146](https://github.com/primefaces/primereact/issues/4146)
+- MegaMenu: does not hide menuItem when visible = false [\#4140](https://github.com/primefaces/primereact/issues/4140)
+- Multiselect: Errors on types and behaviour not as documented [\#4129](https://github.com/primefaces/primereact/issues/4129)
+- DataTable with VirtualScroller: multi selection bug [\#4120](https://github.com/primefaces/primereact/issues/4120)
+- InputText: Tooltip and float-label incompatibility when using showOnDisabled [\#4110](https://github.com/primefaces/primereact/issues/4110)
+- useIntersectionObserver: Make the options parameter optional [\#4109](https://github.com/primefaces/primereact/issues/4109)
+- Button: Severity 'help' missing in TypeScript definition [\#4108](https://github.com/primefaces/primereact/issues/4108)
+- DataTable Virtual Scroller: Column Resize Not Working [\#4102](https://github.com/primefaces/primereact/issues/4102)
+- Dataview: Callback Documentation Typo [\#4099](https://github.com/primefaces/primereact/issues/4099)
+- Datatable: Duplicate events fire in `paginatorPosition=both` [\#4095](https://github.com/primefaces/primereact/issues/4095)
+- Button: Size 'large' vs 'lg' [\#4093](https://github.com/primefaces/primereact/issues/4093)
+- Theme: `vela-blue` TreeSelect inconsistent theming [\#3669](https://github.com/primefaces/primereact/issues/3669)
+
+## [9.2.0](https://github.com/primefaces/primereact/tree/9.2.0) (2023-02-21)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.1.1...9.2.0)
+
+**Breaking Changes:**
+
+- DataTable CSS and responsive structure improvements [\#4078](https://github.com/primefaces/primereact/issues/4078)
+
+**Implemented New Features and Enhancements:**
+
+- New Hook: useMatchMedia [\#4090](https://github.com/primefaces/primereact/issues/4090)
+- Add breakpoint and scrollHeight props to ContextMenu, MegaMenu and TieredMenu components. [\#4082](https://github.com/primefaces/primereact/issues/4082)
+- TreeTable CSS improvements [\#4081](https://github.com/primefaces/primereact/issues/4081)
+- Add `when` option to useResizeListener hook [\#4080](https://github.com/primefaces/primereact/issues/4080)
+- Add tabIndex, appendOnly and inline properties to VirtualScroller [\#4079](https://github.com/primefaces/primereact/issues/4079)
+
+**Fixed bugs:**
+
+- Toast: Flick issue on toast-message-exit-active class [\#4084](https://github.com/primefaces/primereact/issues/4084)
+- Inplace is not working as expected [\#4070](https://github.com/primefaces/primereact/issues/4070)
+- PrimeIcons: can't use pi-arrow-right-arrow-left [\#4062](https://github.com/primefaces/primereact/issues/4062)
+- Calendar: Popup incorrect year in multiple month [\#4058](https://github.com/primefaces/primereact/issues/4058)
+- Avatar: Wrong className is getting used when image is undefined [\#4049](https://github.com/primefaces/primereact/issues/4049)
+- Inline Calendar inside DataTable filter error [\#4042](https://github.com/primefaces/primereact/issues/4042)
+- Toast: Summary Overflow Bug [\#4023](https://github.com/primefaces/primereact/issues/4023)
+
+## [9.1.1](https://github.com/primefaces/primereact/tree/9.1.1) (2023-02-15)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.1.0...9.1.1)
+
+**Fixed bugs:**
+
+- primereact 9.1.0 it is not loaded using vite [\#4064](https://github.com/primefaces/primereact/issues/4064)
+
+## [9.1.0](https://github.com/primefaces/primereact/tree/9.1.0) (2023-02-15)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.0.0...9.1.0)
+
+**Implemented New Features and Enhancements:**
+
+- Improve responsive styling on Menubar [\#4060](https://github.com/primefaces/primereact/issues/4060)
+- FileUpload: Advanced Section same as PrimeVue FileUpload section [\#4059](https://github.com/primefaces/primereact/issues/4059)
+- Add breakpoint and scrollHeight properties to CascadeSelect [\#4052](https://github.com/primefaces/primereact/issues/4052)
+- Add breakpoint property to PickList and OrderList [\#4050](https://github.com/primefaces/primereact/issues/4050)
+
+## [9.0.0](https://github.com/primefaces/primereact/tree/9.0.0) (2023-02-13)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.0.0-rc.1...9.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add sideEffects: false to nested package.json files on components [\#4028](https://github.com/primefaces/primereact/issues/4028)
+- Remove GMap and Captcha [\#4025](https://github.com/primefaces/primereact/issues/4025)
+- Core: Deprecated defaultProps still used [\#3786](https://github.com/primefaces/primereact/issues/3786)
+
+**Fixed bugs:**
+
+- DataTable: Export Function Newline Separator [\#4001](https://github.com/primefaces/primereact/issues/4001)
+
+## [9.0.0-rc.1](https://github.com/primefaces/primereact/tree/9.0.0-rc.1) (2023-02-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/9.0.0-beta.1...9.0.0-rc.1)
+
+**Breaking Changes:**
+
+- Remove Maps [\#4038](https://github.com/primefaces/primereact/issues/4038)
+- Remove Recaptcha [\#4037](https://github.com/primefaces/primereact/issues/4037)
+
+**Implemented New Features and Enhancements:**
+
+- New Hooks [\#4039](https://github.com/primefaces/primereact/issues/4039)
+
+## [9.0.0-beta.1](https://github.com/primefaces/primereact/tree/9.0.0-beta.1) (2023-01-26)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.7.3...9.0.0-beta.1)
+
+**Breaking Changes:**
+
+- TypeScript: Improve definitions on all components [\#2734](https://github.com/primefaces/primereact/issues/2734)
+
+**Implemented New Features and Enhancements:**
+
+- Autocomplete: disable issue [\#3953](https://github.com/primefaces/primereact/issues/3953)
+- Dropdown button icon [\#3952](https://github.com/primefaces/primereact/issues/3952)
+- Dropdown: support `onClick` event to intercept the event propagation [\#3935](https://github.com/primefaces/primereact/issues/3935)
+- ReCaptcha: Allow for custom URL [\#3921](https://github.com/primefaces/primereact/issues/3921)
+- Sidebar: `dismissible` not working immediately while sidebar is visible [\#3811](https://github.com/primefaces/primereact/issues/3811)
+- Inputs: expose focus\(\) method on all input components [\#3806](https://github.com/primefaces/primereact/issues/3806)
+- FileUpload: Control internal files state [\#3750](https://github.com/primefaces/primereact/issues/3750)
+- Dropdown Item list responsive issue [\#2574](https://github.com/primefaces/primereact/issues/2574)
+- DataTable/TreeTable: stricter generically typed API [\#2523](https://github.com/primefaces/primereact/issues/2523)
+- TreeTable: accessibility improvements for keyboard navigation [\#2153](https://github.com/primefaces/primereact/issues/2153)
+- DataTable features in PickList lists [\#1374](https://github.com/primefaces/primereact/issues/1374)
+
+**Fixed bugs:**
+
+- Calendar: Year incorrectly disabled in navigator view due to minDate [\#3967](https://github.com/primefaces/primereact/issues/3967)
+- InputNumber : In Mobile mode value are getting trigger two times [\#3951](https://github.com/primefaces/primereact/issues/3951)
+- DataTable: CellEdit Filtering and NOT_EQUALS [\#3928](https://github.com/primefaces/primereact/issues/3928)
+- Dialog: breakpoints not working in \<React.StrictMode\> [\#3922](https://github.com/primefaces/primereact/issues/3922)
+- InputNumber: When using the InputNumber with the built in spinner buttons, "onValueChange" is called before "onChange". [\#3913](https://github.com/primefaces/primereact/issues/3913)
+- Chips separator not working on mobile [\#3885](https://github.com/primefaces/primereact/issues/3885)
+- DataTable: Global search won't reset when the field is empty on react 17 [\#3819](https://github.com/primefaces/primereact/issues/3819)
+- DataTable: RowReorder fails in case of pagination on page other than first & last [\#3817](https://github.com/primefaces/primereact/issues/3817)
+- DataTable: 'virtualScroll' + selection [\#3804](https://github.com/primefaces/primereact/issues/3804)
+- DataTable: Error when 'virtualScrollerOptions.showLoader' + 'dataKey' are enabled [\#3803](https://github.com/primefaces/primereact/issues/3803)
+- DataTable: Virtual Scroll with Loading template + frozen columns [\#3800](https://github.com/primefaces/primereact/issues/3800)
+- TreeTable: Error in resize mode expand [\#3796](https://github.com/primefaces/primereact/issues/3796)
+- File Upload: itemTemplate missing props [\#3792](https://github.com/primefaces/primereact/issues/3792)
+- SelectButton: Submit with React Hook Form [\#3790](https://github.com/primefaces/primereact/issues/3790)
+- Calendar: Inline display issue if more than one month [\#3789](https://github.com/primefaces/primereact/issues/3789)
+- DataTable: Edit Programmatic all row cannot read properties of undefined \(reading 'data'\) [\#3783](https://github.com/primefaces/primereact/issues/3783)
+- ConfirmPopup: Using Tag, when popup is dismissed it stops working forever [\#3779](https://github.com/primefaces/primereact/issues/3779)
+- Calendar: Console warning using ParseDateTime [\#3777](https://github.com/primefaces/primereact/issues/3777)
+- Calendar: StepMinute should initialize value [\#3770](https://github.com/primefaces/primereact/issues/3770)
+- ToggleButton: Received `false` for a non-boolean attribute `tabIndex` [\#3768](https://github.com/primefaces/primereact/issues/3768)
+- Hook: useOverlayListener incorrectly passing target [\#3766](https://github.com/primefaces/primereact/issues/3766)
+- SplitButton: className in menu api does not work [\#3757](https://github.com/primefaces/primereact/issues/3757)
+- Password: Eye icon problem in MS Edge and IE [\#3756](https://github.com/primefaces/primereact/issues/3756)
+- Dialog: Unintended margins [\#3755](https://github.com/primefaces/primereact/issues/3755)
+- DataTable: row reordering in lazy mode [\#3618](https://github.com/primefaces/primereact/issues/3618)
+- AutoComplete: space between overlay panel and the component [\#3463](https://github.com/primefaces/primereact/issues/3463)
+- InputStyle gets ignored within overlays bound to body [\#3428](https://github.com/primefaces/primereact/issues/3428)
+- Datatable: Virtualscroll and frozenvalue \(frozen rows\) hide first rows [\#3361](https://github.com/primefaces/primereact/issues/3361)
+- Dropdown: Incorrect flipFit detection when using filter [\#3203](https://github.com/primefaces/primereact/issues/3203)
+- DataTable: Edit Programmatic all row cannot read properties of undefined \(reading 'data'\) [\#3013](https://github.com/primefaces/primereact/issues/3013)
+- Menu: Popup menu positioning - appendTo [\#2980](https://github.com/primefaces/primereact/issues/2980)
+
+## [8.7.3](https://github.com/primefaces/primereact/tree/8.7.3) (2022-12-05)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.7.2...8.7.3)
+
+**Implemented New Features and Enhancements:**
+
+- MultiSelect vs Dropdown has different focus behaviour [\#3721](https://github.com/primefaces/primereact/issues/3721)
+- Datatable: Get the values from the table when the filter is done [\#3720](https://github.com/primefaces/primereact/issues/3720)
+- Carousel: Marquee animation [\#3710](https://github.com/primefaces/primereact/issues/3710)
+- Datatable: onRowMouseEnter callback [\#3703](https://github.com/primefaces/primereact/issues/3703)
+- DataTable: createResponsiveStyle not called on scrollable property change [\#3694](https://github.com/primefaces/primereact/issues/3694)
+- TreeSelect: allow focus in React Hook Form [\#3685](https://github.com/primefaces/primereact/issues/3685)
+- BlockUI: Add `style` and `className` to container [\#3683](https://github.com/primefaces/primereact/issues/3683)
+- Image: imageStyle prop is of type string instead of React.CSSProperties [\#3668](https://github.com/primefaces/primereact/issues/3668)
+- Datatable FilterDisplay as menu: Apply with 'Enter' [\#3655](https://github.com/primefaces/primereact/issues/3655)
+- ColorPicker: Allow to set the panel's className [\#3654](https://github.com/primefaces/primereact/issues/3654)
+- Listbox: Add emptyMessage like in Dropdown [\#3649](https://github.com/primefaces/primereact/issues/3649)
+- Avatar: Fallback to label or icon variant when image loading fails [\#3647](https://github.com/primefaces/primereact/issues/3647)
+- DataTable: RowGrouping Header Template allow control of colspan [\#3643](https://github.com/primefaces/primereact/issues/3643)
+- TreeNode: Add `id` property [\#3616](https://github.com/primefaces/primereact/issues/3616)
+- MultiSelect: not selecting correct value when "options" objects contain property "value" [\#3392](https://github.com/primefaces/primereact/issues/3392)
+- MultiSelect: Add "overlayVisible" property [\#3302](https://github.com/primefaces/primereact/issues/3302)
+- InputNumber just perform the onChange when blur [\#3003](https://github.com/primefaces/primereact/issues/3003)
+- Tooltip: incorrectly positioned [\#2796](https://github.com/primefaces/primereact/issues/2796)
+- MultiSelect: Enable more display options [\#2745](https://github.com/primefaces/primereact/issues/2745)
+- Showcase: Save theme setting in localStorage [\#2671](https://github.com/primefaces/primereact/issues/2671)
+- Tooltip: show at mouse position without following the mouse [\#2588](https://github.com/primefaces/primereact/issues/2588)
+- Multiple groupField issue [\#2333](https://github.com/primefaces/primereact/issues/2333)
+- ContextMenu: Submenu overflowing the page [\#2318](https://github.com/primefaces/primereact/issues/2318)
+- DataTable onRowBlur and onRowMouseLeave events [\#1945](https://github.com/primefaces/primereact/issues/1945)
+- DataTable grouping rows with similar names, more than one field at a time [\#1039](https://github.com/primefaces/primereact/issues/1039)
+- Multi Row Grouping for DataTable [\#728](https://github.com/primefaces/primereact/issues/728)
+
+**Fixed bugs:**
+
+- Slider with range and max=10 - initial right slider position is 1000 [\#3738](https://github.com/primefaces/primereact/issues/3738)
+- Chart initialized in unmounted component [\#3725](https://github.com/primefaces/primereact/issues/3725)
+- Messages/Toast: The messages.current.show\(\[\]\) method causes the browser to crash [\#3716](https://github.com/primefaces/primereact/issues/3716)
+- Core: PrimeReact.nullSortOrder not working correctly [\#3712](https://github.com/primefaces/primereact/issues/3712)
+- Button: Tooltip remains displayed after button is disabled [\#3692](https://github.com/primefaces/primereact/issues/3692)
+- TreeTable: cellClose throwing error [\#3689](https://github.com/primefaces/primereact/issues/3689)
+- Tooltip: Vertical scrollbar appears when tooltip shows the first time [\#3687](https://github.com/primefaces/primereact/issues/3687)
+- Dropdown: Expose focusInputRef for React Hook Form [\#3662](https://github.com/primefaces/primereact/issues/3662)
+- AutoComplete: Reusing references for suggestions prop bug [\#3659](https://github.com/primefaces/primereact/issues/3659)
+- Tristate and Multicheckbox: Unable to change disabled checkbox cursor [\#3641](https://github.com/primefaces/primereact/issues/3641)
+- RadioButton: onChange event is called for each click [\#3636](https://github.com/primefaces/primereact/issues/3636)
+- nmp run dev fails under Linux [\#3631](https://github.com/primefaces/primereact/issues/3631)
+- DataTable: TypeError when adding and starting editing a new row [\#3476](https://github.com/primefaces/primereact/issues/3476)
+- Dialog/Overlay: Flickering in Vite [\#3122](https://github.com/primefaces/primereact/issues/3122)
+- InputNumber: Value typed by the user is not entered, when suffix used [\#3029](https://github.com/primefaces/primereact/issues/3029)
+- TieredMenu: sub-items are not visible when there's not enough space at the bottom [\#2837](https://github.com/primefaces/primereact/issues/2837)
+- InputNumber: input content can desync from value prop after blur [\#2527](https://github.com/primefaces/primereact/issues/2527)
+- DataTable: ContextMenu showcase/theme doesn't highlight selection [\#2526](https://github.com/primefaces/primereact/issues/2526)
+- OrderList: Drag & drop is not working [\#1883](https://github.com/primefaces/primereact/issues/1883)
+- InputNumber: Arrow keys not working properly [\#1866](https://github.com/primefaces/primereact/issues/1866)
+- DataTable: onValueChange not called when setting filter state programmatically [\#1396](https://github.com/primefaces/primereact/issues/1396)
+- Cell editor with sort-filter fails [\#1257](https://github.com/primefaces/primereact/issues/1257)
+- Cell Editor reapplies focus to invalid field [\#1247](https://github.com/primefaces/primereact/issues/1247)
+
+## [8.7.2](https://github.com/primefaces/primereact/tree/8.7.2) (2022-11-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.7.1...8.7.2)
+
+**Implemented New Features and Enhancements:**
+
+- Skeleton: Jest test [\#3603](https://github.com/primefaces/primereact/issues/3603)
+- Avatar/AvatarGroup: Jest test [\#3601](https://github.com/primefaces/primereact/issues/3601)
+- Tag: Jest test [\#3599](https://github.com/primefaces/primereact/issues/3599)
+- InputNumber: Add maxLength Property [\#3595](https://github.com/primefaces/primereact/issues/3595)
+- InputTextarea: Jest Tests [\#3582](https://github.com/primefaces/primereact/issues/3582)
+- InputText: Jest tests [\#3580](https://github.com/primefaces/primereact/issues/3580)
+- Divider: Add jest unit testing to the Divider component [\#3577](https://github.com/primefaces/primereact/issues/3577)
+- InputTextArea: Add KeyFilter [\#3575](https://github.com/primefaces/primereact/issues/3575)
+- InputText/InputTextArea: Typescript won't allow setting `value` [\#3573](https://github.com/primefaces/primereact/issues/3573)
+- Tooltip: Add Jest testing [\#3569](https://github.com/primefaces/primereact/issues/3569)
+- Badge: Add jest unit testing to the Badge component [\#3567](https://github.com/primefaces/primereact/issues/3567)
+- Chip: Add test specifications [\#3557](https://github.com/primefaces/primereact/issues/3557)
+- Column: exportField missing from TypeScript parameters [\#3540](https://github.com/primefaces/primereact/issues/3540)
+- Autocomplete: add selectionLimit [\#2949](https://github.com/primefaces/primereact/issues/2949)
+
+**Fixed bugs:**
+
+- Ripple: Uncaught ReferenceError: isTouching is not defined [\#3593](https://github.com/primefaces/primereact/issues/3593)
+- TieredMenu: Close menu on selection \(like PrimeVue\) [\#3590](https://github.com/primefaces/primereact/issues/3590)
+- Calendar : `keepInvalid` no longer works [\#3559](https://github.com/primefaces/primereact/issues/3559)
+- DataTable : column name with dot [\#3548](https://github.com/primefaces/primereact/issues/3548)
+- Splitter: Error with only 1 panel [\#3546](https://github.com/primefaces/primereact/issues/3546)
+- Calendar: Setting value in range mode [\#3545](https://github.com/primefaces/primereact/issues/3545)
+- TreeTableHeader: Warning: Each child in a list should have a unique "key" prop. [\#3543](https://github.com/primefaces/primereact/issues/3543)
+- Calendar: Changing a value removes the entire value [\#2927](https://github.com/primefaces/primereact/issues/2927)
+
+## [8.7.1](https://github.com/primefaces/primereact/tree/8.7.1)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.7.0...8.7.1)
+
+**Implemented New Features and Enhancements:**
+
+- Image: Update default properties [\#3536](https://github.com/primefaces/primereact/issues/3536)
+- Button: Add test specifications [\#3533](https://github.com/primefaces/primereact/issues/3533)
+- Remove index.d.ts from primereact library [\#3513](https://github.com/primefaces/primereact/issues/3513)
+- Timeline: Add missing type of align as enum. [\#3509](https://github.com/primefaces/primereact/issues/3509)
+
+**Fixed bugs:**
+
+- Splitter: widths provided to SplitterPanel.size are not correctly applied [\#3534](https://github.com/primefaces/primereact/issues/3534)
+- Datatable doesn't render boolean values. [\#3529](https://github.com/primefaces/primereact/issues/3529)
+- Splitter: esm build throws TypeError due to improper use of const in a for loop [\#3527](https://github.com/primefaces/primereact/issues/3527)
+- Ripple: ripple start point is not init in mobile env [\#3526](https://github.com/primefaces/primereact/issues/3526)
+- Calendar: Inconsistent behaviour around viewDate and changed value. [\#3516](https://github.com/primefaces/primereact/issues/3516)
+- Calendar: Value does not update on external change [\#3515](https://github.com/primefaces/primereact/issues/3515)
+- tabIndex prop can be optional on Accordion [\#3512](https://github.com/primefaces/primereact/issues/3512)
+- Toast: non-responsive toast [\#3498](https://github.com/primefaces/primereact/issues/3498)
+
+## [8.7.0](https://github.com/primefaces/primereact/tree/8.7.0)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.6.1...8.7.0)
+
+**Implemented New Features and Enhancements:**
+
+- Paginator: `PaginatorTemplateOptions` interface elements should be optional \(TypeScript\) [\#3503](https://github.com/primefaces/primereact/issues/3503)
+- Tooltip: programmatic control show/hide [\#3500](https://github.com/primefaces/primereact/issues/3500)
+- Button: Ripple animation missing on touch down [\#3497](https://github.com/primefaces/primereact/issues/3497)
+- Calendar : Does not detection changes value in footer template [\#3484](https://github.com/primefaces/primereact/issues/3484)
+- Splitter: Non optimal handling of splitter sizing [\#3483](https://github.com/primefaces/primereact/issues/3483)
+- Core: Add Jest unit tests [\#3477](https://github.com/primefaces/primereact/issues/3477)
+- Toast: Delete Toast by Id [\#3455](https://github.com/primefaces/primereact/issues/3455)
+- Editor: respect maxLength property [\#3454](https://github.com/primefaces/primereact/issues/3454)
+- Implement the new PRO Support Page [\#3449](https://github.com/primefaces/primereact/issues/3449)
+- TypeScript: All `style` declarations should be `React.CSSProperties` [\#3440](https://github.com/primefaces/primereact/issues/3440)
+- Progressbar: Dynamic ProgressBar [\#3433](https://github.com/primefaces/primereact/issues/3433)
+- MultiSelect: Allow primitives in filter [\#3420](https://github.com/primefaces/primereact/issues/3420)
+- SlideMenu: Pass information about levelState [\#3407](https://github.com/primefaces/primereact/issues/3407)
+- SlideMenu: Issue with scrollbar [\#3398](https://github.com/primefaces/primereact/issues/3398)
+- SlideMenu: Add navigateBack to ref [\#3397](https://github.com/primefaces/primereact/issues/3397)
+- Image: Allow `zoomSrc` different than `src` [\#3390](https://github.com/primefaces/primereact/issues/3390)
+- Autocomplete: show\(\) and hide\(\) missing in ref [\#3387](https://github.com/primefaces/primereact/issues/3387)
+- DataTable: Expose restoreColumnWidths+ in ref [\#3384](https://github.com/primefaces/primereact/issues/3384)
+- Calendar: Overwrite formatDateTime and parseDateTime functions [\#3381](https://github.com/primefaces/primereact/issues/3381)
+- Data Attribute: Fix \#3321 [\#3378](https://github.com/primefaces/primereact/issues/3378)
+- DataTable: crash during third party drag and drop handling [\#3376](https://github.com/primefaces/primereact/issues/3376)
+- Filters: Allow filters on primitive arrays [\#3375](https://github.com/primefaces/primereact/issues/3375)
+- Column: Add tooltip to header [\#3368](https://github.com/primefaces/primereact/issues/3368)
+- Paginator: RowsPerPageDropdown fix ARIA label [\#3365](https://github.com/primefaces/primereact/issues/3365)
+- Toast: Pin a specific message on User Click [\#3260](https://github.com/primefaces/primereact/issues/3260)
+- Column: bodyClassName could accept a function with the corresponding DataTable value as a param, returning a string [\#3215](https://github.com/primefaces/primereact/issues/3215)
+- DataTable: Custom expander according to the rowData [\#2918](https://github.com/primefaces/primereact/issues/2918)
+- DataTable/TreeTable: global filter customization [\#1450](https://github.com/primefaces/primereact/issues/1450)
+- Calendar using locale date format [\#993](https://github.com/primefaces/primereact/issues/993)
+- Support custom date format function for the input element [\#852](https://github.com/primefaces/primereact/issues/852)
+
+**Fixed bugs:**
+
+- CONTRIBUTING: Fix forum URL [\#3492](https://github.com/primefaces/primereact/issues/3492)
+- DataTable: in controlled pagination mode onPage always called initially with first=0 [\#3489](https://github.com/primefaces/primereact/issues/3489)
+- Calendar: Year selection ignores maxDate [\#3488](https://github.com/primefaces/primereact/issues/3488)
+- TabView: Missing onKeyDown in header template [\#3479](https://github.com/primefaces/primereact/issues/3479)
+- Column: onCellEditComplete incorrect Typescript def [\#3469](https://github.com/primefaces/primereact/issues/3469)
+- AutoComplete: Missing dropdownAriaLabel property [\#3467](https://github.com/primefaces/primereact/issues/3467)
+- Mention: Some properties doesn't exist on type [\#3461](https://github.com/primefaces/primereact/issues/3461)
+- Button: getElement is undefined [\#3453](https://github.com/primefaces/primereact/issues/3453)
+- Dialog - Maximizable [\#3432](https://github.com/primefaces/primereact/issues/3432)
+- DataTable: Filter is not matching using globalFilter attribute [\#3430](https://github.com/primefaces/primereact/issues/3430)
+- InputNumber: Typing the minus sign at the start of the number does not work the first time [\#3426](https://github.com/primefaces/primereact/issues/3426)
+- Autocomplete: readOnly not working when 'multiple' prop is set [\#3423](https://github.com/primefaces/primereact/issues/3423)
+- Mention: Some properties doesn't exist on type [\#3419](https://github.com/primefaces/primereact/issues/3419)
+- Splitter state is not saved in StrictMode [\#3413](https://github.com/primefaces/primereact/issues/3413)
+- Dock: Showcase example broken [\#3393](https://github.com/primefaces/primereact/issues/3393)
+- Datatable: onSelectionChange event returns wrong rowIndex with shiftKey selection [\#3388](https://github.com/primefaces/primereact/issues/3388)
+- Button: bad rendering for button with icon and children [\#3382](https://github.com/primefaces/primereact/issues/3382)
+- DataTable: custom filter icon is not updating [\#3373](https://github.com/primefaces/primereact/issues/3373)
+- Gallaria: localeOption is not defined. Bug introduced in 8.6.0 [\#3370](https://github.com/primefaces/primereact/issues/3370)
+- Toast: Close button decreases as size increases [\#3116](https://github.com/primefaces/primereact/issues/3116)
+- Datatable: globalFilter option triggered with old value [\#2996](https://github.com/primefaces/primereact/issues/2996)
+- DataScroller: "first" is always 0 on OnLazyLoad [\#2987](https://github.com/primefaces/primereact/issues/2987)
+- AccordionTab: keyboard navigation not working when inside a Dialog [\#2864](https://github.com/primefaces/primereact/issues/2864)
+- InputNumber: delete numbers with decimal mode - bug [\#2677](https://github.com/primefaces/primereact/issues/2677)
+
+## [8.6.1](https://github.com/primefaces/primereact/tree/8.6.1) (2022-09-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.6.0...8.6.1)
+
+**Fixed bugs:**
+
+- Material Theme breaks in some components [\#3364](https://github.com/primefaces/primereact/issues/3364)
+- TreeTable filter behavior is not consistent between global and local filtering when using filterMatchMode `contains` [\#1288](https://github.com/primefaces/primereact/issues/1288)
+
+## [8.6.0](https://github.com/primefaces/primereact/tree/8.6.0) (2022-09-23)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.5.0...8.6.0)
+
+**Breaking Changes:**
+
+- Add data and multiSortMeta options to sortFunction on DataTable [\#3352](https://github.com/primefaces/primereact/issues/3352)
+- FullCalendar: Remove [\#3344](https://github.com/primefaces/primereact/issues/3344)
+
+**Implemented New Features and Enhancements:**
+
+- PrimeIcons: Update to v6 [\#3347](https://github.com/primefaces/primereact/issues/3347)
+- Knob/Rating/TriStateCheckbox: Ref Type Incompatibility [\#3334](https://github.com/primefaces/primereact/issues/3334)
+- Datatable: Add Typescript SortOrder constants [\#3327](https://github.com/primefaces/primereact/issues/3327)
+- InputNumber: missing data attribute [\#3321](https://github.com/primefaces/primereact/issues/3321)
+- Dropdown: Support aria-describedby [\#3319](https://github.com/primefaces/primereact/issues/3319)
+- TabView: Add 'beforeTabClose' event [\#3312](https://github.com/primefaces/primereact/issues/3312)
+- Datatable: Remove Expanded 'td' element returned with 'tr' [\#3310](https://github.com/primefaces/primereact/issues/3310)
+- ARIA: Standardize expand/collapse labels [\#3292](https://github.com/primefaces/primereact/issues/3292)
+- Password: Add KeyFilter [\#3290](https://github.com/primefaces/primereact/issues/3290)
+- TypeScript: Add index.d.ts to main libary [\#3288](https://github.com/primefaces/primereact/issues/3288)
+- ARIA: Standardize close/clear button labels [\#3280](https://github.com/primefaces/primereact/issues/3280)
+- Strange logging when linting [\#3277](https://github.com/primefaces/primereact/issues/3277)
+- AutoComplete: Accessibility Improvement [\#3275](https://github.com/primefaces/primereact/issues/3275)
+- Toast: Pause / resume timeout if hovered [\#3272](https://github.com/primefaces/primereact/issues/3272)
+- Accordion: No id causes remounting of AccordionTabs. [\#3270](https://github.com/primefaces/primereact/issues/3270)
+- DataTable: Aria-label issues [\#3263](https://github.com/primefaces/primereact/issues/3263)
+- TabView: allow aria-label attribute for scrollable buttons [\#3259](https://github.com/primefaces/primereact/issues/3259)
+- SpeedDial: allow aria-label attribute [\#3254](https://github.com/primefaces/primereact/issues/3254)
+- AutoComplete: Add EmptyMessage property [\#3244](https://github.com/primefaces/primereact/issues/3244)
+- Password: Add same color to label of password info [\#2913](https://github.com/primefaces/primereact/issues/2913)
+- TreeTable/DataTable: Callback similar to onFilter for global search [\#2028](https://github.com/primefaces/primereact/issues/2028)
+- Additional props for keyboard helpers \(input components with "hidden accessible" elements\) [\#1852](https://github.com/primefaces/primereact/issues/1852)
+- DataTable RowCheckbox/RowRadioButton input lacks title, label or aria attributes [\#1178](https://github.com/primefaces/primereact/issues/1178)
+- Allow aria-label and aria-labelledby attributes on all input components. [\#839](https://github.com/primefaces/primereact/issues/839)
+
+**Fixed bugs:**
+
+- SortFunction throws a exception on DataTable [\#3353](https://github.com/primefaces/primereact/issues/3353)
+- DataTable: error occurs when the field corresponding to the column is an Map, and the editor is not specified [\#3332](https://github.com/primefaces/primereact/issues/3332)
+- Dialog: Restore dialog size after maximize it close dialog keeping modal background active [\#3331](https://github.com/primefaces/primereact/issues/3331)
+- Editor: Ref Type Incompatibility [\#3329](https://github.com/primefaces/primereact/issues/3329)
+- Calendar: viewStateChanged minor bug [\#3315](https://github.com/primefaces/primereact/issues/3315)
+- DataTable: Multiple sorting with Date field as first sort [\#3284](https://github.com/primefaces/primereact/issues/3284)
+- Calendar \> When set two times value, calendar view is not updated [\#3258](https://github.com/primefaces/primereact/issues/3258)
+- Dialog: Focus trap issue with multiple dialogs [\#3256](https://github.com/primefaces/primereact/issues/3256)
+- InputTextarea: wrong ref type [\#3252](https://github.com/primefaces/primereact/issues/3252)
+- Toast/Messages: Replace method is broken in 8.5.0 [\#3250](https://github.com/primefaces/primereact/issues/3250)
+- ScrollPanel: Cannot scroll inside dialog [\#3171](https://github.com/primefaces/primereact/issues/3171)
+
+## [8.5.0](https://github.com/primefaces/primereact/tree/8.5.0) (2022-09-07)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.4.0...8.5.0)
+
+**Implemented New Features and Enhancements:**
+
+- Tooltip: Both 'focus' and 'hover' events cannot be set at the same time [\#3241](https://github.com/primefaces/primereact/issues/3241)
+- Carousel : Add new showIndicators/showNavigators attributes [\#3232](https://github.com/primefaces/primereact/issues/3232)
+- Checkbox/RadioButton: No support for selecting option with keyboard [\#3221](https://github.com/primefaces/primereact/issues/3221)
+- Rating: Add icon templates [\#3219](https://github.com/primefaces/primereact/issues/3219)
+- Message: Override Icon using icon attribute [\#3196](https://github.com/primefaces/primereact/issues/3196)
+- Button: Add visible property to remove from DOM [\#3193](https://github.com/primefaces/primereact/issues/3193)
+- Keyfilter: refactor to use event.key [\#3189](https://github.com/primefaces/primereact/issues/3189)
+- Add prettier to standardize formatting [\#3188](https://github.com/primefaces/primereact/issues/3188)
+- FileUpload: Access to files in the FileUpload Component [\#3174](https://github.com/primefaces/primereact/issues/3174)
+- MenuModel property for visibility like in Vue [\#3169](https://github.com/primefaces/primereact/issues/3169)
+- TreeSelect: Add collapseAll and expandAll methods [\#2964](https://github.com/primefaces/primereact/issues/2964)
+
+**Fixed bugs:**
+
+- Column: ColumnBodyRowEditorOptions type is missing "element" in type definition [\#3245](https://github.com/primefaces/primereact/issues/3245)
+- ConfirmPopup: dismissable property not working [\#3233](https://github.com/primefaces/primereact/issues/3233)
+- Split Button throws error when expanding the menu. [\#3228](https://github.com/primefaces/primereact/issues/3228)
+- RadioButton/Checkbox: label no longer works to select item [\#3220](https://github.com/primefaces/primereact/issues/3220)
+- Toast: Allow us to specify our own ids for each ToastMessage [\#3209](https://github.com/primefaces/primereact/issues/3209)
+- ConfirmPopup: Сomponent is not hidden when using the hide function [\#3202](https://github.com/primefaces/primereact/issues/3202)
+- ConfirmDialog and ConfirmPopup: onHide event bug [\#3197](https://github.com/primefaces/primereact/issues/3197)
+- Calendar: monthpicker disabled using min/max [\#3192](https://github.com/primefaces/primereact/issues/3192)
+- Menubar: hide menu if no items in model [\#3190](https://github.com/primefaces/primereact/issues/3190)
+- Dialog: Responsive breakpoints no longer working [\#3184](https://github.com/primefaces/primereact/issues/3184)
+- Animation of the floating label doesn't work in Chips [\#3181](https://github.com/primefaces/primereact/issues/3181)
+- Dropdown: Unmounting focused dropdown throws TypeError [\#3179](https://github.com/primefaces/primereact/issues/3179)
+- InputTextarea: wrong ref type [\#3172](https://github.com/primefaces/primereact/issues/3172)
+- Dialog: blockScroll not working [\#3166](https://github.com/primefaces/primereact/issues/3166)
+- Dialog: Flickering [\#3122](https://github.com/primefaces/primereact/issues/3122)
+- AutoComplete: shows "\[object Object\]" if value object instance is not one of suggestions [\#1392](https://github.com/primefaces/primereact/issues/1392)
+- Messages: Add content to TypeScript [\#3246](https://github.com/primefaces/primereact/issues/3246)
+- FileUpload: Fix TypeScript FileUploadSelectParams [\#3235](https://github.com/primefaces/primereact/issues/3235)
+
+## [8.4.0](https://github.com/primefaces/primereact/tree/8.4.0) (2022-08-22)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.3.0...8.4.0)
+
+**Implemented New Features and Enhancements:**
+
+- FileUpload: Needed Event: onBeforeSelect [\#3134](https://github.com/primefaces/primereact/issues/3134)
+- DataTable: Add setting to sort null records at the beginning when in ascending order like old versions of PrimeReact [\#3114](https://github.com/primefaces/primereact/issues/3114)
+
+**Fixed bugs:**
+
+- Dialog: blockScroll not working [\#3166](https://github.com/primefaces/primereact/issues/3166)
+- InputNumber: getInput\(\) returns the wrong reference [\#3161](https://github.com/primefaces/primereact/issues/3161)
+- Calendar: does not change "view" dynamicly [\#3153](https://github.com/primefaces/primereact/issues/3153)
+- DataTable.restoreTableState does not restore column width [\#3150](https://github.com/primefaces/primereact/issues/3150)
+- RadioButton/Checkbox: onChange event is called for each click [\#3148](https://github.com/primefaces/primereact/issues/3148)
+- PickList - Selection Change properties throw errors [\#3147](https://github.com/primefaces/primereact/issues/3147)
+- Calendar: Min/Max fixes ported from PrimeFaces [\#3125](https://github.com/primefaces/primereact/issues/3125)
+- Calendar: TouchUI dismissal issues [\#3111](https://github.com/primefaces/primereact/issues/3111)
+- InputNumber: Tab does not fire update events, meaning inputNumbers do not call callbacks in datatables [\#3109](https://github.com/primefaces/primereact/issues/3109)
+- Tree: Custom filter broken due to overwritten props in useImperativeHandle hook. [\#3107](https://github.com/primefaces/primereact/issues/3107)
+- Chips: keyfilter [\#3100](https://github.com/primefaces/primereact/issues/3100)
+- Editor: Explicit import of quill.js dependency doesn't allow for single pages with inline scripting [\#3097](https://github.com/primefaces/primereact/issues/3097)
+- Dropdown: Required attribute doesn't work [\#3092](https://github.com/primefaces/primereact/issues/3092)
+- TreeSelect: props.panelFooterTemplate doesn't work [\#3088](https://github.com/primefaces/primereact/issues/3088)
+- Tooltip: If the mouse hover ends before showDelay is reached, then the tooltip won't go away. [\#3083](https://github.com/primefaces/primereact/issues/3083)
+- Mention, InputText, InputTextArea and Password do not maintain p-filled properly [\#3081](https://github.com/primefaces/primereact/issues/3081)
+- StyleClass: Bug with "position: fixed" on chromium family only, firefox works OK [\#3080](https://github.com/primefaces/primereact/issues/3080)
+- OverlayPanel: Dismissable is ignored [\#3070](https://github.com/primefaces/primereact/issues/3070)
+- FileUpload: Ability to add file from variable [\#3044](https://github.com/primefaces/primereact/issues/3044)
+- Editor: 'Maximum update depth exceeded' on pasting formatted text [\#2271](https://github.com/primefaces/primereact/issues/2271)
+- Dropdown: Wrong event value on OnBlur [\#2224](https://github.com/primefaces/primereact/issues/2224)
+- Dropdown: search functionality can't find item starting with "+" key [\#2202](https://github.com/primefaces/primereact/issues/2202)
+
+## [8.3.0](https://github.com/primefaces/primereact/tree/8.3.0) (2022-07-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.2.0...8.3.0)
+
+**Implemented New Features and Enhancements:**
+
+- Charts: Explicit import of chart.js dependency doesn't allow for single pages with inline scripting [\#3059](https://github.com/primefaces/primereact/issues/3059)
+- FilterTemplate support for components [\#3039](https://github.com/primefaces/primereact/issues/3039)
+
+**Fixed bugs:**
+
+- maxDate & minDate are broken in month-picker on Calendar [\#3076](https://github.com/primefaces/primereact/issues/3076)
+- Chips: UX issue [\#3072](https://github.com/primefaces/primereact/issues/3072)
+- Tooltip: positioned incorrectly in React 18 [\#3065](https://github.com/primefaces/primereact/issues/3065)
+- Calendar: decade selection can't be changed [\#3064](https://github.com/primefaces/primereact/issues/3064)
+- ConfirmDialog: mismatch in new version [\#3063](https://github.com/primefaces/primereact/issues/3063)
+- Calendar triggers onChange event twice when typing in React 18 Strict Mode [\#3062](https://github.com/primefaces/primereact/issues/3062)
+- Tag/Badge: SeverityType incorrect [\#3056](https://github.com/primefaces/primereact/issues/3056)
+- Checkbox/RadioButton: stops working in labels [\#3054](https://github.com/primefaces/primereact/issues/3054)
+- DataTable: Checkbox Row Selection and VirtualScroller not working simultaneously [\#3053](https://github.com/primefaces/primereact/issues/3053)
+- Datatable: Filter icon gets highlighted without even applying the filter [\#3051](https://github.com/primefaces/primereact/issues/3051)
+- SplitButton: TypeScript Error "Cannot Find Name 'ButtonProps'" [\#3048](https://github.com/primefaces/primereact/issues/3048)
+- DataTable: DataTable row reorder is not working [\#3046](https://github.com/primefaces/primereact/issues/3046)
+- FileUpload: ref property does not show all the props [\#3045](https://github.com/primefaces/primereact/issues/3045)
+- Dropdown: hard to identify error on non matching label [\#3038](https://github.com/primefaces/primereact/issues/3038)
+- DataTable: custom filter icon is not updating [\#2976](https://github.com/primefaces/primereact/issues/2976)
+- Components: Cannot access ref [\#2963](https://github.com/primefaces/primereact/issues/2963)
+- InputNumber : Id not available in the OnChange [\#2908](https://github.com/primefaces/primereact/issues/2908)
+- Hooks: useImperativeHandle is preventing the default behaviour of useRef hook [\#2893](https://github.com/primefaces/primereact/issues/2893)
+- DataTable ignores sortFunction and sortField for initial sorting [\#2514](https://github.com/primefaces/primereact/issues/2514)
+
+## [8.2.0](https://github.com/primefaces/primereact/tree/8.2.0) (2022-07-06)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.1.1...8.2.0)
+
+**Implemented New Features and Enhancements:**
+
+- Improve virtualScroller implementation on components [\#3037](https://github.com/primefaces/primereact/issues/3037)
+- Add autoSize, resizeDelay and loaderIconTemplate properties to VirtualScroller [\#3036](https://github.com/primefaces/primereact/issues/3036)
+- Add filter feature to PickList [\#3035](https://github.com/primefaces/primereact/issues/3035)
+- Autocomplete: Submit form when hitting enter on input field [\#3033](https://github.com/primefaces/primereact/issues/3033)
+- Image: Add 'onError' property [\#3031](https://github.com/primefaces/primereact/issues/3031)
+- DataTable: Incorrect order by ASC \(empty values are at the beginning\) [\#3023](https://github.com/primefaces/primereact/issues/3023)
+- Placeholder for float label inputs [\#3020](https://github.com/primefaces/primereact/issues/3020)
+- Datatable: Can not get table data for Column sortFunction and sortFunction calls only by click in header [\#3019](https://github.com/primefaces/primereact/issues/3019)
+- Add color-scheme style to Themes [\#3010](https://github.com/primefaces/primereact/issues/3010)
+- Datatable: Add reference to virtualScroller [\#3009](https://github.com/primefaces/primereact/issues/3009)
+- Splitter: should support dynamic size prop [\#3006](https://github.com/primefaces/primereact/issues/3006)
+- SplitButton: "loading" and "loadingIcon" [\#2995](https://github.com/primefaces/primereact/issues/2995)
+- InputMask: Remove `inputRef` for just normal `ref` [\#2971](https://github.com/primefaces/primereact/issues/2971)
+- Add id option to MenuItem API [\#2914](https://github.com/primefaces/primereact/issues/2914)
+- Improve p-invalid class for InputSwitch [\#2909](https://github.com/primefaces/primereact/issues/2909)
+- MegaMenu: Start and End templates like MenuBar [\#2808](https://github.com/primefaces/primereact/issues/2808)
+- Chips: Add onKeyDown and KeyFilter [\#2797](https://github.com/primefaces/primereact/issues/2797)
+- Calendar: shows future and/or past dates even when minDate and/or maxDate props are set [\#1661](https://github.com/primefaces/primereact/issues/1661)
+
+**Fixed bugs:**
+
+- Restrict Toast/Message SeverityType to the only four valid values [\#3021](https://github.com/primefaces/primereact/issues/3021)
+- InputMask: Initial value not displayed when inside \<React.StrictMode\> in React 18 [\#3016](https://github.com/primefaces/primereact/issues/3016)
+- Tree: Can't switch between nodes with arrow up and arrow down keys if drag feature is enabled [\#3004](https://github.com/primefaces/primereact/issues/3004)
+- Editor/Charts: not usable with parceljs [\#2999](https://github.com/primefaces/primereact/issues/2999)
+- Badge: 0 as a value passed to a badge does not render properly [\#2997](https://github.com/primefaces/primereact/issues/2997)
+- Dialog bottom has no border radius when footer does not exist [\#2990](https://github.com/primefaces/primereact/issues/2990)
+- Dialog: Scrolling remains disabled for document even after dialog unmount [\#2981](https://github.com/primefaces/primereact/issues/2981)
+- DataTable: Scrollable headers out of sync on column resize [\#2978](https://github.com/primefaces/primereact/issues/2978)
+- MultiSelect treats a value of zero for maxSelectedLabels as null [\#2966](https://github.com/primefaces/primereact/issues/2966)
+- Calendar: After selecting Today from ButtonBar, Year is not set to current year [\#2961](https://github.com/primefaces/primereact/issues/2961)
+- Image: Preview mode do not hide buttons [\#2957](https://github.com/primefaces/primereact/issues/2957)
+- ConfirmationDialog: throws TS error in prod build [\#2953](https://github.com/primefaces/primereact/issues/2953)
+- Calendar: Selection Month DropDown Item at Index 1 for the first time, Selects Item at Index 2 [\#2948](https://github.com/primefaces/primereact/issues/2948)
+- Global Tooltip is not working with data-pr-classname [\#2946](https://github.com/primefaces/primereact/issues/2946)
+- DataTable with custom footer cell throws a JS exception [\#2943](https://github.com/primefaces/primereact/issues/2943)
+- DataTable: RowReorder handle displayed when table is not set for reordering [\#2935](https://github.com/primefaces/primereact/issues/2935)
+- When Toast component is closed, its zIndex does not clear. [\#2928](https://github.com/primefaces/primereact/issues/2928)
+- Toast: Long text does not display correctly [\#2926](https://github.com/primefaces/primereact/issues/2926)
+- Messages/Toast: fix/add replace\(newMessages\) method [\#2925](https://github.com/primefaces/primereact/issues/2925)
+- Frozen columns and non-frozen columns can be reordered with each other in DataTable [\#2923](https://github.com/primefaces/primereact/issues/2923)
+- FloatLabel: Incorrect position when using browser autofill [\#2921](https://github.com/primefaces/primereact/issues/2921)
+- Avatar: Wrong priority [\#2919](https://github.com/primefaces/primereact/issues/2919)
+- The default selected item does not appear in the view on VirtualScroller Listbox [\#2915](https://github.com/primefaces/primereact/issues/2915)
+- Inplace: Initial state not reflected when active is provided as true [\#2904](https://github.com/primefaces/primereact/issues/2904)
+- Tooltip: data-pr-position doesn't change where the tooltip goes [\#2878](https://github.com/primefaces/primereact/issues/2878)
+- DataTable: Filter Menu not displayed when inside \<React.StrictMode\> in React 18 [\#2777](https://github.com/primefaces/primereact/issues/2777)
+- Calendar: Does not respect minDate in format 12h with timeOnly=true. [\#2607](https://github.com/primefaces/primereact/issues/2607)
+- DataTable with scrollHeight="flex" and virtualScrollerOptions shows nothing [\#2531](https://github.com/primefaces/primereact/issues/2531)
+- DataTable resize visual bugs [\#2433](https://github.com/primefaces/primereact/issues/2433)
+- Calendar triggers onChange event twice when mask property is set [\#2018](https://github.com/primefaces/primereact/issues/2018)
+- Checkbox/Radio: Do not scroll page on click [\#1879](https://github.com/primefaces/primereact/issues/1879)
+
+## [8.1.1](https://github.com/primefaces/primereact/tree/8.1.1) (2022-05-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.1.0...8.1.1)
+
+**Implemented New Features and Enhancements:**
+
+- Hooks: useStorage hook multi tab awareness [\#2887](https://github.com/primefaces/primereact/issues/2887)
+
+**Fixed bugs:**
+
+- The headerStyle and headerClassName are not applied to the Dialog [\#2905](https://github.com/primefaces/primereact/issues/2905)
+- StyleClass is not working as expected on PrimeBlocks pages [\#2900](https://github.com/primefaces/primereact/issues/2900)
+- Dropdown: Causes horizontal scroll to align with multiselect option panel when opening panel when an item is selected [\#2898](https://github.com/primefaces/primereact/issues/2898)
+- Autocomplete: Virtual Scroller incompatible with arrow keys navigation [\#2894](https://github.com/primefaces/primereact/issues/2894)
+- Autocomplete: Virtual Scroller incompatible with autoHighlight [\#2891](https://github.com/primefaces/primereact/issues/2891)
+- TreeTable: resizeableColumns stopped working in 8.1 [\#2889](https://github.com/primefaces/primereact/issues/2889)
+- TreeTableProps: type error in treetable.d.ts file [\#2881](https://github.com/primefaces/primereact/issues/2881)
+- Calendar: footer is displayed above year and month picker panels [\#2880](https://github.com/primefaces/primereact/issues/2880)
+
+## [8.1.0](https://github.com/primefaces/primereact/tree/8.1.0) (2022-05-12)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.0.0...8.1.0)
+
+**Implemented New Features and Enhancements:**
+
+- Paginator: Accessible buttons [\#2827](https://github.com/primefaces/primereact/issues/2827)
+- FileUpload: Validate files before adding on drop [\#2690](https://github.com/primefaces/primereact/issues/2690)
+- PickList : Add itemTemplate for target and source lists [\#2606](https://github.com/primefaces/primereact/issues/2606)
+- Breadcrumb: home icon is not acccessible [\#2226](https://github.com/primefaces/primereact/issues/2226)
+- DataTable : Edit, save and cancel button do not have accessible names [\#2128](https://github.com/primefaces/primereact/issues/2128)
+- SlideMenu: Performance enhancement [\#2060](https://github.com/primefaces/primereact/issues/2060)
+- Dropdown: once focused to the field Enter key is not displaying list [\#1929](https://github.com/primefaces/primereact/issues/1929)
+- DataTable: drop p-resizable-column for expander columns [\#1862](https://github.com/primefaces/primereact/issues/1862)
+- FileUpload: Disable buttons while uploading [\#1525](https://github.com/primefaces/primereact/issues/1525)
+- Carousel: Improve button accessibility [\#1432](https://github.com/primefaces/primereact/issues/1432)
+- Column: resizable/reorderable for individual column level [\#1367](https://github.com/primefaces/primereact/issues/1367)
+
+**Fixed bugs:**
+
+- Datatable: reorderableColumns isn't working [\#2784](https://github.com/primefaces/primereact/issues/2784)
+- InputSwitch: InputSwitchProps says incompatible type [\#2876](https://github.com/primefaces/primereact/issues/2876)
+- StyleClass: may fail to enter the element [\#2873](https://github.com/primefaces/primereact/issues/2873)
+- TreeTable: column parameter not passed to ColumnBodyOptions [\#2870](https://github.com/primefaces/primereact/issues/2870)
+- \[v8\] Importing CSS omitted from bundle when using import syntax [\#2868](https://github.com/primefaces/primereact/issues/2868)
+- Paginator: Wrong check triggers on example [\#2866](https://github.com/primefaces/primereact/issues/2866)
+- Header elements in DataTable with virtualScroller are not in the correct position on the scroll. [\#2861](https://github.com/primefaces/primereact/issues/2861)
+- MultiSelect: Does not properly filter with groups if not using children name "items" [\#2856](https://github.com/primefaces/primereact/issues/2856)
+- MultiSelect: Causes horizontal scroll to align with multiselect option panel when opening panel when an item is selected [\#2855](https://github.com/primefaces/primereact/issues/2855)
+- OverlayPanel: breakpoints property breaks app [\#2852](https://github.com/primefaces/primereact/issues/2852)
+- InputNumber: Touch and hold button spin doesn't work on iOS browser [\#2849](https://github.com/primefaces/primereact/issues/2849)
+- Calendar: Wrong month names in multiple months view [\#2845](https://github.com/primefaces/primereact/issues/2845)
+- Calendar: wrong typing for onClick event of navigatorTemplate [\#2844](https://github.com/primefaces/primereact/issues/2844)
+- InputNumber: On mobile, the focus on input makes using increment / decrement buttons difficult [\#2843](https://github.com/primefaces/primereact/issues/2843)
+- FileUploader: Converts event.files into SyntheticBaseEvent when in advanced mode [\#2836](https://github.com/primefaces/primereact/issues/2836)
+- Splitter: Changed behavior in 8.x, when more than two panels are are used [\#2830](https://github.com/primefaces/primereact/issues/2830)
+- DataTable: Custom sort functions throw errors in single sort mode [\#2821](https://github.com/primefaces/primereact/issues/2821)
+- ARIA: Lint Failures [\#2819](https://github.com/primefaces/primereact/issues/2819)
+- Carousel: Display issues when loading less items that the allocated slots [\#2814](https://github.com/primefaces/primereact/issues/2814)
+- PanelMenu: is closing and opening again when menu is reloaded [\#2804](https://github.com/primefaces/primereact/issues/2804)
+- FileUpload when multiple false, can still add more than 1 file [\#2792](https://github.com/primefaces/primereact/issues/2792)
+- FileUpload: removing the "multiple" tag drag and drop [\#2782](https://github.com/primefaces/primereact/issues/2782)
+- Checkbox does not work as expected when pressing the space key [\#2781](https://github.com/primefaces/primereact/issues/2781)
+- Calendar's navigator template onChange param not working [\#2646](https://github.com/primefaces/primereact/issues/2646)
+- Drag & drop is not working on FileUploader when multiple is false [\#2624](https://github.com/primefaces/primereact/issues/2624)
+- CascadeSelect shows nothing on selection if optionValue is given [\#2601](https://github.com/primefaces/primereact/issues/2601)
+
+## [8.0.1](https://github.com/primefaces/primereact/tree/8.0.1) (2022-04-26)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.0.0...8.0.1)
+
+**Fixed bugs:**
+
+- Datatable: reorderableColumns isn't working [\#2784](https://github.com/primefaces/primereact/issues/2784)
+
+## [8.0.0](https://github.com/primefaces/primereact/tree/8.0.0)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.0.0-rc.2...8.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Hooks: add useStorage hook [\#2773](https://github.com/primefaces/primereact/issues/2773)
+- Chips onAdd should check Input before added to value list [\#2232](https://github.com/primefaces/primereact/issues/2232)
+
+**Fixed bugs:**
+
+- Carousel v8.0.0-rc.2 Data and Navigation Unusable [\#2769](https://github.com/primefaces/primereact/issues/2769)
+- Calendar: onMonthChange is marked as required [\#2767](https://github.com/primefaces/primereact/issues/2767)
+- TreeSelect onSelect/onNodeUnselect wrong types and not firing [\#2768](https://github.com/primefaces/primereact/issues/2768)
+
+## [8.0.0-rc.2](https://github.com/primefaces/primereact/tree/8.0.0-rc.2) (2022-04-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/8.0.0-rc.1...8.0.0-rc.2)
+
+**Implemented New Features and Enhancements:**
+
+- Calendar - Year and month picker enhancement [\#2748](https://github.com/primefaces/primereact/issues/2748)
+- Add icon template to Menu components [\#2733](https://github.com/primefaces/primereact/issues/2733)
+- Toast - Clear and then show doesn't clear existing messages [\#2668](https://github.com/primefaces/primereact/issues/2668)
+- No default jsDelivr CDN file set [\#1426](https://github.com/primefaces/primereact/issues/1426)
+
+**Fixed bugs:**
+
+- TreeSelect - problem with scroll jumping [\#2752](https://github.com/primefaces/primereact/issues/2752)
+- If the item's className option is null, Dropdown will throw a JS exception. [\#2749](https://github.com/primefaces/primereact/issues/2749)
+- Dialog typescript error [\#2747](https://github.com/primefaces/primereact/issues/2747)
+- Accordion Multiple Tabs Opened [\#2739](https://github.com/primefaces/primereact/issues/2739)
+- Dropdown throws a JS exception related to searchIndex [\#2737](https://github.com/primefaces/primereact/issues/2737)
+- Attribute 'children' is missing in primereact 8.0.0-rc.1 [\#2732](https://github.com/primefaces/primereact/issues/2732)
+- InputNumber crash on onInputBlur [\#2729](https://github.com/primefaces/primereact/issues/2729)
+- Cannot edit DataTable row with the pencil button when onRowEditChange is set [\#2726](https://github.com/primefaces/primereact/issues/2726)
+- Custom component properties override remove `ref` [\#2721](https://github.com/primefaces/primereact/issues/2721)
+- DataTable: if custom filter is used then clear/reset filter functionality is not working. [\#2715](https://github.com/primefaces/primereact/issues/2715)
+- GMap onOverlayDragEnd event callback has access to outdated react states [\#2714](https://github.com/primefaces/primereact/issues/2714)
+- DataTable custom filter function breaks table [\#2702](https://github.com/primefaces/primereact/issues/2702)
+- InputMask: on Android does not fire onChange until focus lost [\#2686](https://github.com/primefaces/primereact/issues/2686)
+- \[BUG\] InputText keyfilter [\#2214](https://github.com/primefaces/primereact/issues/2214)
+- Galleria Advanced sandbox links are wrong [\#2204](https://github.com/primefaces/primereact/issues/2204)
+- Toast component stale messages state issue, while quickly calling toastRef.show [\#1804](https://github.com/primefaces/primereact/issues/1804)
+
+## [8.0.0-rc.1](https://github.com/primefaces/primereact/tree/8.0.0-rc.1) (2022-04-04)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/7.2.1...8.0.0-rc.1)
+
+**Breaking Changes:**
+
+- Converted Class components to functional Hooks components [\#2704](https://github.com/primefaces/primereact/issues/2704)
+- Improve confirmDialog and confirmPopup methods [\#2718](https://github.com/primefaces/primereact/issues/2718)
+
+**Implemented New Features and Enhancements:**
+
+- React 18 support [\#2360](https://github.com/primefaces/primereact/issues/2360)
+- Pass other standard element attributes to all components [\#2716](https://github.com/primefaces/primereact/issues/2716)
+- forwardRef is not implemented at Card and Panel [\#2709](https://github.com/primefaces/primereact/issues/2709)
+- Add panelContainerStyle and panelContainerClassName properties to TabView [\#2706](https://github.com/primefaces/primereact/issues/2706)
+- Add gutter property to DataView [\#2705](https://github.com/primefaces/primereact/issues/2705)
+- Calendar: show/hide TypeScript declarations [\#2685](https://github.com/primefaces/primereact/issues/2685)
+- AutoComplete: option to not focus input on dropdown click [\#2679](https://github.com/primefaces/primereact/issues/2679)
+- Tooltip: onBeforeShow should be able to cancel showing [\#2653](https://github.com/primefaces/primereact/issues/2653)
+- Pass other standard element attributes to form components [\#2620](https://github.com/primefaces/primereact/issues/2620)
+- DataTable editingMeta is bound to row index, instead of row key [\#2609](https://github.com/primefaces/primereact/issues/2609)
+- Add inputId property to Chips [\#2717](https://github.com/primefaces/primereact/issues/2717)
+
+**Fixed bugs:**
+
+- The texts inside the cells are not copied in the dataTable [\#2710](https://github.com/primefaces/primereact/issues/2710)
+- Datatable re-order rows: can't reorder to last row when page is scrolled \(event.pageY \> 0\) [\#2703](https://github.com/primefaces/primereact/issues/2703)
+- Toast component throws error on show [\#2696](https://github.com/primefaces/primereact/issues/2696)
+- Tooltips crashing Chrome [\#2695](https://github.com/primefaces/primereact/issues/2695)
+- Row component does not pass down `className` and `style` props [\#2693](https://github.com/primefaces/primereact/issues/2693)
+- Issue with type definition of fileupload interface FileUploadRemoveParams [\#2681](https://github.com/primefaces/primereact/issues/2681)
+- v7.2.1 introduces "ReferenceError: PrimeReact is not defined" on sorting a DataView [\#2663](https://github.com/primefaces/primereact/issues/2663)
+- Tooltip autohide false not working on zIndexed parent [\#2658](https://github.com/primefaces/primereact/issues/2658)
+- Sidebar: onHide - closing on peripheral actions [\#2652](https://github.com/primefaces/primereact/issues/2652)
+- Typo in PrimeIcons Enum for ARROWS_H and ARROWS_V [\#2649](https://github.com/primefaces/primereact/issues/2649)
+- rowEditValidator validates the original data rather than the new one [\#2618](https://github.com/primefaces/primereact/issues/2618)
+- Tree component bug with functions onNodeClick and onNodeDoubleClick. Both of them not working [\#2599](https://github.com/primefaces/primereact/issues/2599)
+
+## [7.2.1](https://github.com/primefaces/primereact/tree/7.2.1) (2022-02-22)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/7.2.0...7.2.1)
+
+**Implemented New Features and Enhancements:**
+
+- Add p-button-\* class support to SplitButton [\#2647](https://github.com/primefaces/primereact/issues/2647)
+- Change lara to use system font [\#2645](https://github.com/primefaces/primereact/issues/2645)
+- Knob | replace surface letters with new surface variables [\#2643](https://github.com/primefaces/primereact/issues/2643)
+- Bug: When calendar is closed by clicking cancel button, It should be focus out [\#2638](https://github.com/primefaces/primereact/issues/2638)
+- Add possibility to reset scroll in DataTable [\#2636](https://github.com/primefaces/primereact/issues/2636)
+- The SplitButton type declarations are missing the "show" and "hide" methods [\#2625](https://github.com/primefaces/primereact/issues/2625)
+- Automated tests throw "TypeError: highlightItem.scrollIntoView is not a function" [\#2616](https://github.com/primefaces/primereact/issues/2616)
+- DataTable sorting lacks collation support [\#2604](https://github.com/primefaces/primereact/issues/2604)
+
+**Fixed bugs:**
+
+- TreeSelect templateHeader doesn't work [\#2641](https://github.com/primefaces/primereact/issues/2641)
+- dropIndex returns same index for different nodes in Tree component [\#2632](https://github.com/primefaces/primereact/issues/2632)
+- InputNumber editor in Datatable doesn't accept only numbers as input values anymore [\#2631](https://github.com/primefaces/primereact/issues/2631)
+- Bug on Dark Themes related with fixed columns [\#2630](https://github.com/primefaces/primereact/issues/2630)
+- DataTable with paginator and selection [\#2612](https://github.com/primefaces/primereact/issues/2612)
+- Datatable: Responsive broken in 7.2.0 [\#2594](https://github.com/primefaces/primereact/issues/2594)
+- TabMenu with MenuItem template function does not work properly [\#2590](https://github.com/primefaces/primereact/issues/2590)
+
+## [7.2.0](https://github.com/primefaces/primereact/tree/7.2.0) (2022-01-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/7.1.0...7.2.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add files and index options to itemTemplate on FileUpload [\#2584](https://github.com/primefaces/primereact/issues/2584)
+- Add rowHover property to TreeTable [\#2582](https://github.com/primefaces/primereact/issues/2582)
+- Improve resizable structure on DataTable [\#2581](https://github.com/primefaces/primereact/issues/2581)
+- Add appendTo property to Toast [\#2578](https://github.com/primefaces/primereact/issues/2578)
+- Add selectionAutoFocus property to DataTable [\#2575](https://github.com/primefaces/primereact/issues/2575)
+- Add align and alignHeader property to Column [\#2572](https://github.com/primefaces/primereact/issues/2572)
+- Keyboard click for TabView [\#2569](https://github.com/primefaces/primereact/issues/2569)
+- Column property for cellClassName function [\#2553](https://github.com/primefaces/primereact/issues/2553)
+- New Feature: 'downloadable' prop of 'Image' [\#2552](https://github.com/primefaces/primereact/issues/2552)
+- Add exportField property to DataTable [\#2544](https://github.com/primefaces/primereact/issues/2544)
+- Improve table row reorder highlight [\#2519](https://github.com/primefaces/primereact/issues/2519)
+- ColorPicker | Add border for Dark Themes [\#2516](https://github.com/primefaces/primereact/issues/2516)
+- Add isDataSelectable property to DataTable [\#1303](https://github.com/primefaces/primereact/issues/1303)
+
+**Fixed bugs:**
+
+- tailwind theme - wrong styles [\#2587](https://github.com/primefaces/primereact/issues/2587)
+- Body cell is not assigned with the className property of Column [\#2576](https://github.com/primefaces/primereact/issues/2576)
+- TabView programmatically set activeIndex is ignored in onTabClose function. [\#2573](https://github.com/primefaces/primereact/issues/2573)
+- Calendar as editor inside DataTable in row edit mode [\#2561](https://github.com/primefaces/primereact/issues/2561)
+- Dropdown with VirtualScroll not rendering items. [\#2560](https://github.com/primefaces/primereact/issues/2560)
+- \<Calendar /\> Minutes - increment and decrement operations do not work with stepMinute = 1 [\#2557](https://github.com/primefaces/primereact/issues/2557)
+- TreeNode: TypeScript def missing expanded property [\#2548](https://github.com/primefaces/primereact/issues/2548)
+- Row grouping breaking with pagination [\#2545](https://github.com/primefaces/primereact/issues/2545)
+- Styling of TabMenu is broken for multi line headings [\#2540](https://github.com/primefaces/primereact/issues/2540)
+- \[Bug\] Next.js - `document is not defined` when using Dialog and Sidebar component [\#2538](https://github.com/primefaces/primereact/issues/2538)
+- `progress` is not a part of state but using in multiple places. [\#2537](https://github.com/primefaces/primereact/issues/2537)
+- DataTable: ReferenceError: process is not defined regression in 7.1 [\#2536](https://github.com/primefaces/primereact/issues/2536)
+- DataTable: When scrollable and virtual scroller are enabled, scroll to the right to display blank [\#2534](https://github.com/primefaces/primereact/issues/2534)
+- DataTable, TreeTable | Checkbox and RadioButton Focus Missing on Material [\#2522](https://github.com/primefaces/primereact/issues/2522)
+- DataTable | scrollable-sortable header hover on dark themes [\#2517](https://github.com/primefaces/primereact/issues/2517)
+- DataTable with resizable property is not working as expected [\#2448](https://github.com/primefaces/primereact/issues/2448)
+
+## [7.1.0](https://github.com/primefaces/primereact/tree/7.1.0) (2021-12-13)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/7.0.1...7.1.0)
+
+**Breaking Changes:**
+
+- InputMask/AutoComplete: maxlength property [\#2408](https://github.com/primefaces/primereact/issues/2408)
+
+**Implemented New Features and Enhancements:**
+
+- Tree DragDrop inconsistent styling on drag hover [\#2501](https://github.com/primefaces/primereact/issues/2501)
+- Typescript DataTables with filters don't import or compile correctly. [\#2467](https://github.com/primefaces/primereact/issues/2467)
+- InputNumber Critical Issue [\#2465](https://github.com/primefaces/primereact/issues/2465)
+- Improve lazy loading on DataTable [\#2457](https://github.com/primefaces/primereact/issues/2457)
+- Add showSelectAll, selectAll and onSelectAll properties to DataTable [\#2455](https://github.com/primefaces/primereact/issues/2455)
+- Add selectionPageOnly property to DataTable [\#2454](https://github.com/primefaces/primereact/issues/2454)
+- Add style and className properties to TabPanel and AccordionPanel [\#2449](https://github.com/primefaces/primereact/issues/2449)
+- Improve resize listeners for Overlay Components [\#2446](https://github.com/primefaces/primereact/issues/2446)
+- AutoComplete Show Dropdown When Clicked [\#2445](https://github.com/primefaces/primereact/issues/2445)
+- Panel's expandIcon and collapseIcon Properties Accept Only Strings, Not Elements [\#2437](https://github.com/primefaces/primereact/issues/2437)
+- Add options to control CSSTransition in all overlay components [\#2426](https://github.com/primefaces/primereact/issues/2426)
+- CSP: Violating Inline Style Policy [\#2423](https://github.com/primefaces/primereact/issues/2423)
+- TabPanel onClose Event [\#2418](https://github.com/primefaces/primereact/issues/2418)
+- Tooltip not displayed for disabled components [\#2221](https://github.com/primefaces/primereact/issues/2221)
+- SplitButton does not carry through the classname [\#1939](https://github.com/primefaces/primereact/issues/1939)
+- Add "p-button-outlined" class for SplitButton [\#1882](https://github.com/primefaces/primereact/issues/1882)
+- Editor's header cannot be hidden no matter what [\#1567](https://github.com/primefaces/primereact/issues/1567)
+
+**Fixed bugs:**
+
+- There is typo in Image description [\#2512](https://github.com/primefaces/primereact/issues/2512)
+- Type definition issue with utils import [\#2506](https://github.com/primefaces/primereact/issues/2506)
+- Using the transition property on elements inside Carousel causes items become hidden [\#2499](https://github.com/primefaces/primereact/issues/2499)
+- MultiSelect - breaking when options is empty array [\#2496](https://github.com/primefaces/primereact/issues/2496)
+- ConfirmPopup crashes the app when using Next.js [\#2495](https://github.com/primefaces/primereact/issues/2495)
+- DataTable issue related to restoreState with nextjs [\#2493](https://github.com/primefaces/primereact/issues/2493)
+- Dropdown: Property selectedIndex being referenced from null current inputRef [\#2491](https://github.com/primefaces/primereact/issues/2491)
+- \[DataTable\] Row expander customization isn't working [\#2487](https://github.com/primefaces/primereact/issues/2487)
+- Docs for PrimeReact not working properly for v6 [\#2484](https://github.com/primefaces/primereact/issues/2484)
+- DataTable error when filters become available dynamically [\#2478](https://github.com/primefaces/primereact/issues/2478)
+- Tree selection types \(pt. 2\) [\#2473](https://github.com/primefaces/primereact/issues/2473)
+- DOMException in DataTable after React fast refresh [\#2469](https://github.com/primefaces/primereact/issues/2469)
+- ColumnFilterConstraintAddParams: constraint is mispelled [\#2463](https://github.com/primefaces/primereact/issues/2463)
+- When scrollable and virtual Scroller are enabled at the same time, the scroll style is incorrect when the scrollHeight is changed [\#2456](https://github.com/primefaces/primereact/issues/2456)
+- Menubar Component needs CSS styles for "text-decoration: none;" [\#2439](https://github.com/primefaces/primereact/issues/2439)
+- DataTable virtualScroll index bug [\#2431](https://github.com/primefaces/primereact/issues/2431)
+- Dropdown auto close in mobile when keyboard is open [\#2422](https://github.com/primefaces/primereact/issues/2422)
+- InputNumber value type should include null [\#2417](https://github.com/primefaces/primereact/issues/2417)
+- BlockUI: rapid blocking-unblocking leads to TypeError this.mask is null [\#2412](https://github.com/primefaces/primereact/issues/2412)
+- Calendar timepicker stepMinute should show zero-based multiples of step [\#2301](https://github.com/primefaces/primereact/issues/2301)
+- Issue in Grid sorting, null values not handled in sortMultiple function \(when sortMode=multiple\) [\#2157](https://github.com/primefaces/primereact/issues/2157)
+- ColorPicker: wrong value type definitions when using rgb or hsb format, part 2 [\#2045](https://github.com/primefaces/primereact/issues/2045)
+
+## [7.0.1](https://github.com/primefaces/primereact/tree/7.0.1) (2021-10-15)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/7.0.0...7.0.1)
+
+**Implemented New Features and Enhancements:**
+
+- New Themes with dark modes: Lara-Blue and Lara-Teal [\#2435](https://github.com/primefaces/primereact/issues/2435)
+- Remove default max-width style from Tooltip [\#2414](https://github.com/primefaces/primereact/issues/2414)
+
+**Fixed bugs:**
+
+- Button icon classes listed twice [\#2415](https://github.com/primefaces/primereact/issues/2415)
+- MultiSelect with transitionOptions property throws an exception [\#2413](https://github.com/primefaces/primereact/issues/2413)
+- Tooltip positioned incorrectly when target is an SVG [\#2406](https://github.com/primefaces/primereact/issues/2406)
+- ConfirmDialogProps breaks the build on Typescript due to double semicolon [\#2429](https://github.com/primefaces/primereact/issues/2429)
+
+## [7.0.0](https://github.com/primefaces/primereact/tree/7.0.0) (2021-10-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/7.0.0-rc.2...7.0.0)
+
+**Breaking Changes:**
+
+- Change default value of maxSelectedLabels property on MultiSelect [\#2389](https://github.com/primefaces/primereact/issues/2389)
+
+**Implemented New Features and Enhancements:**
+
+- New Theme: Lara [\#2409](https://github.com/primefaces/primereact/issues/2409)
+- Add maskStyle property to Dialog [\#2404](https://github.com/primefaces/primereact/issues/2404)
+- Material | Use box-shadow for outlined Buttons [\#2401](https://github.com/primefaces/primereact/issues/2401)
+- Material Focus Improvements [\#2400](https://github.com/primefaces/primereact/issues/2400)
+- Update PrimeIcons to 5.0 [\#2399](https://github.com/primefaces/primereact/issues/2399)
+- Improve custom icon support [\#2397](https://github.com/primefaces/primereact/issues/2397)
+- Improve FileUpload drop mode [\#2385](https://github.com/primefaces/primereact/issues/2385)
+- Add header, footer and magnification properties to Dock [\#2362](https://github.com/primefaces/primereact/issues/2362)
+- \(Yarn PnP\) Add react-transition-group as optional peer dependency [\#2346](https://github.com/primefaces/primereact/issues/2346)
+- Support locale for emptyMessage and emptyFilterMessage default value [\#2337](https://github.com/primefaces/primereact/issues/2337)
+- Chips component: add 'readOnly' property [\#2334](https://github.com/primefaces/primereact/issues/2334)
+- Message content hides icon [\#2321](https://github.com/primefaces/primereact/issues/2321)
+- The Menu type declaration is missing the "show" and "hide" methods [\#2295](https://github.com/primefaces/primereact/issues/2295)
+- Date gets deselected in Calendar with selection mode range [\#2279](https://github.com/primefaces/primereact/issues/2279)
+- Add closeable property to TabPanel [\#2278](https://github.com/primefaces/primereact/issues/2278)
+- Add removeIcon property to AutoComplete and MultiSelect components [\#2270](https://github.com/primefaces/primereact/issues/2270)
+- Slider - onSlideEnd not called when clicking on Slider rail [\#2265](https://github.com/primefaces/primereact/issues/2265)
+- Add iconPos property to Calendar [\#2239](https://github.com/primefaces/primereact/issues/2239)
+- Improve Sidebar component [\#2233](https://github.com/primefaces/primereact/issues/2233)
+- Extend exportFunction \(csv\) with the whole record [\#2209](https://github.com/primefaces/primereact/issues/2209)
+- Multiple Selection Using Shift Key for TreeTable [\#1120](https://github.com/primefaces/primereact/issues/1120)
+
+**Fixed Bugs:**
+
+- Splitter component always adds p-splitter-panel-nested class [\#2396](https://github.com/primefaces/primereact/issues/2396)
+- DataTable VirtualScroll alignment issue [\#2392](https://github.com/primefaces/primereact/issues/2392)
+- TabView with scrollable throws an exception [\#2391](https://github.com/primefaces/primereact/issues/2391)
+- Ripple is not working on Nextjs [\#2390](https://github.com/primefaces/primereact/issues/2390)
+- FileUpload not be directly mutated component’s state [\#2387](https://github.com/primefaces/primereact/issues/2387)
+- isSelectableTime checks value array instead of any value on Calendar [\#2386](https://github.com/primefaces/primereact/issues/2386)
+- Clicking the Clear Filter Button Should Clear the Filter But Leave the Dropdown Open [\#2384](https://github.com/primefaces/primereact/issues/2384)
+- DataTable filter mode is not working after filters are cleared [\#2383](https://github.com/primefaces/primereact/issues/2383)
+- \[Editor\] quill Invalid Quill container null [\#2381](https://github.com/primefaces/primereact/issues/2381)
+- Treeselect doesn't select the first node of the list [\#2372](https://github.com/primefaces/primereact/issues/2372)
+- Virtual Scroller Does Not React Properly When Underlying Array Changes Size [\#2366](https://github.com/primefaces/primereact/issues/2366)
+- Bug - FileUpload allows multiple even if "multiple" prop is not set [\#2363](https://github.com/primefaces/primereact/issues/2363)
+- Floating label is not yet on top of the inputbox when prefilled by Chrome [\#2358](https://github.com/primefaces/primereact/issues/2358)
+- Dropdown breaks in shadowRoot when getScrollableParent\(\) encounters document fragment [\#2352](https://github.com/primefaces/primereact/issues/2352)
+- Dropdown: Primitive values [\#2349](https://github.com/primefaces/primereact/issues/2349)
+- Add removable property to Chips [\#2345](https://github.com/primefaces/primereact/issues/2345)
+- InputNumber doesn't submit a form [\#2344](https://github.com/primefaces/primereact/issues/2344)
+- Multiselect adds items previously selected by clicking on the "select all" toggle \('Advanced with Templating and Filtering'\) [\#2341](https://github.com/primefaces/primereact/issues/2341)
+- TabView does not support dynamic panel visibility [\#2339](https://github.com/primefaces/primereact/issues/2339)
+- OverlayPanel - Uncaught TypeError: this is undefined [\#2338](https://github.com/primefaces/primereact/issues/2338)
+- MultiSelect should also limit the number of displayed chips [\#2331](https://github.com/primefaces/primereact/issues/2331)
+- Expander of ColumnProps has wrong in colums.td.d [\#2328](https://github.com/primefaces/primereact/issues/2328)
+- Lazy loaded menu overflowing the page [\#2320](https://github.com/primefaces/primereact/issues/2320)
+- InputSwitch inside Label doesn't toggle correctly. [\#2300](https://github.com/primefaces/primereact/issues/2300)
+- When Multiselect inside of label tag, click on it is not showing dropdown panel [\#2299](https://github.com/primefaces/primereact/issues/2299)
+- TreeSelect.value should be an array in multiselect mode [\#2276](https://github.com/primefaces/primereact/issues/2276)
+- TS2769: No overload matches this call.   Overload 1 of 2, '\(props: InputTextProps | Readonly\<InputTextProps\>\): InputText', gave the following error. [\#2274](https://github.com/primefaces/primereact/issues/2274)
+- Auto z-index isn't generating correctly [\#2266](https://github.com/primefaces/primereact/issues/2266)
+- Calendar prop \(tabIndex\) never passed into InputText element. [\#2260](https://github.com/primefaces/primereact/issues/2260)
+- DataTable: regression in single mode Space and Enter keys are catched and are not usable into cells [\#2259](https://github.com/primefaces/primereact/issues/2259)
+- Failed prop type: Invalid prop `appendTo` of type `string` supplied to `DropdownPanel`, expected `object`. [\#2258](https://github.com/primefaces/primereact/issues/2258)
+- Calendar throws exception when have the onViewDateChange property [\#2254](https://github.com/primefaces/primereact/issues/2254)
+- DataTable checked all rows does not honor ShowSelectionElement [\#2251](https://github.com/primefaces/primereact/issues/2251)
+- PickList not working webpack 5.5 [\#2250](https://github.com/primefaces/primereact/issues/2250)
+- Dialog: pressing escape in a nested dialog closes the parent dialog [\#2241](https://github.com/primefaces/primereact/issues/2241)
+- \[Bug\]: ReadOnly InputNumber is editable [\#2238](https://github.com/primefaces/primereact/issues/2238)
+- Tree DragDrop doesn't allow drag and drop between nodes [\#2177](https://github.com/primefaces/primereact/issues/2177)
+- DataTable cell editor only validates on enter [\#1024](https://github.com/primefaces/primereact/issues/1024)
+
+## [7.0.0-rc.2](https://github.com/primefaces/primereact/tree/7.0.0-rc.2) (2021-11-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/7.0.0-rc.1...7.0.0-rc.2)
+
+**Fixed Bugs:**
+
+- Table columns not visible on Prod [\#2380](https://github.com/primefaces/primereact/issues/2380)
+
+## [7.0.0-rc.1](https://github.com/primefaces/primereact/tree/7.0.0-rc.1) (2021-11-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.6.0...7.0.0-rc.1)
+
+**Breaking Changes:**
+
+- Improve DataTable implementation [\#2368](https://github.com/primefaces/primereact/issues/2368)
+- Remove FilterUtils class [\#2376](https://github.com/primefaces/primereact/issues/2376)
+- Improve Column attributes for Data components [\#2374](https://github.com/primefaces/primereact/issues/2374)
+- Improve VirtualScroller component [\#2373](https://github.com/primefaces/primereact/issues/2373)
+- Implemented new VirtualScroll feature for DataTable [\#2371](https://github.com/primefaces/primereact/issues/2371)
+- Implemented New Filter modes on DataTable [\#2370](https://github.com/primefaces/primereact/issues/2370)
+
+**Implemented New Features and Enhancements:**
+
+- Improve modal animation on Dialog [\#2378](https://github.com/primefaces/primereact/issues/2378)
+
+**Fixed Bugs:**
+
+- Calendar Panel closes on the panel's mouseup event [\#2369](https://github.com/primefaces/primereact/issues/2369)
+
+## [6.6.0](https://github.com/primefaces/primereact/tree/6.6.0) (2021-10-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.6.0-rc.1...6.6.0)
+
+**Implemented New Features and Enhancements:**
+
+- PrimeFlex 3 support for DataView [\#2332](https://github.com/primefaces/primereact/issues/2332)
+- Improve scrollbar style on BreadCrumb and TabMenu [\#2330](https://github.com/primefaces/primereact/issues/2330)
+
+**Fixed Bugs:**
+
+- Image component is missing in primereact.all.js [\#2329](https://github.com/primefaces/primereact/issues/2329)
+
+## [6.6.0-rc.1](https://github.com/primefaces/primereact/tree/6.6.0-rc.1) (2021-09-27)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.5.1...6.6.0-rc.1)
+
+**Implemented New Features and Enhancements:**
+
+- Improve Galleria Thumbnail animation [\#2326](https://github.com/primefaces/primereact/issues/2326)
+- Add trueValue-falseValue to Checkbox [\#2323](https://github.com/primefaces/primereact/issues/2323)
+- Add trueValue-falseValue to InputSwitch [\#2317](https://github.com/primefaces/primereact/issues/2317)
+- Modal layer enter-leave transition [\#2316](https://github.com/primefaces/primereact/issues/2316)
+- Make Dock component mobile friendly [\#2312](https://github.com/primefaces/primereact/issues/2312)
+- Set Paginator Page from InputNumber [\#2310](https://github.com/primefaces/primereact/issues/2310)
+- Tooltip: word wrap [\#2307](https://github.com/primefaces/primereact/issues/2307)
+- Tailwind Theme [\#2302](https://github.com/primefaces/primereact/issues/2302)
+- Scrollable feature for TabView Component [\#2298](https://github.com/primefaces/primereact/issues/2298)
+- New Component: Image [\#2297](https://github.com/primefaces/primereact/issues/2297)
+- Add p-inputwrapper class to InputNumber [\#2289](https://github.com/primefaces/primereact/issues/2289)
+- Add getFormatter method to InputNumber [\#2287](https://github.com/primefaces/primereact/issues/2287)
+- Add allowEmpty property to InputNumber [\#2285](https://github.com/primefaces/primereact/issues/2285)
+- InputNumber behaves odd when trying to insert fracitonal digits [\#2284](https://github.com/primefaces/primereact/issues/2284)
+- InputNumber: cannot insert fractional digits when minFractionDigits=0 [\#2283](https://github.com/primefaces/primereact/issues/2283)
+
+**Fixed Bugs:**
+
+- CurrentPageReport displays wrong value [\#2314](https://github.com/primefaces/primereact/issues/2314)
+- Filtered Dropdown unusable on Windows Tablet [\#2311](https://github.com/primefaces/primereact/issues/2311)
+- Material themes Surface Border Issue [\#2309](https://github.com/primefaces/primereact/issues/2309)
+- Dropdown scrolls top after reopened [\#2308](https://github.com/primefaces/primereact/issues/2308)
+- Dropdown with filter bug selecting with arrow keys [\#2306](https://github.com/primefaces/primereact/issues/2306)
+- Incorrect Sizing due to filter input width of dropdown [\#2305](https://github.com/primefaces/primereact/issues/2305)
+- Overlay panel hide when clicking on a label inside of it [\#2304](https://github.com/primefaces/primereact/issues/2304)
+- Thumbnails are not displayed correctly on Galleria if numVisible is greater than the length of value [\#2293](https://github.com/primefaces/primereact/issues/2293)
+- InputNumber: issues with decimal separator for some locales, 0s are added to input [\#2292](https://github.com/primefaces/primereact/issues/2292)
+- Negative sign in front of number is not possible for Finnish or Swedish locale [\#2291](https://github.com/primefaces/primereact/issues/2291)
+- Input number caret issue with negatives [\#2290](https://github.com/primefaces/primereact/issues/2290)
+- inputnumber : both prefix and currency Input error [\#2288](https://github.com/primefaces/primereact/issues/2288)
+- InputNumber: setting "min" to anything greater than 0 implies "required" [\#2286](https://github.com/primefaces/primereact/issues/2286)
+- InputNumber input event returns wrong value [\#2282](https://github.com/primefaces/primereact/issues/2282)
+- Checkbox causes layout issues when used inside an overflow: auto div [\#2281](https://github.com/primefaces/primereact/issues/2281)
+- Table Header Checkbox not working when lazy loading enabled [\#2253](https://github.com/primefaces/primereact/issues/2253)
+- \[BUG\] 6.5.1 Toast - ContentClassName prop should be optional [\#2247](https://github.com/primefaces/primereact/issues/2247)
+- InputNumber with min triggers onValueChange immediately if value is nully [\#2136](https://github.com/primefaces/primereact/issues/2136)
+
+## [6.5.1](https://github.com/primefaces/primereact/tree/6.5.1) (2021-08-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.5.0...6.5.1)
+
+**Implemented New Features and Enhancements:**
+
+- Add StyleClass Component [\#2242](https://github.com/primefaces/primereact/issues/2242)
+- Inline style and style class for ToastMessage and its content [\#2236](https://github.com/primefaces/primereact/issues/2236)
+
+**Fixed Bugs:**
+
+- Ripple animation is not working on components [\#2240](https://github.com/primefaces/primereact/issues/2240)
+- Dropdown keypress doesn't support Turkish characters [\#2217](https://github.com/primefaces/primereact/issues/2217)
+- TreeSelect Typescript error [\#2211](https://github.com/primefaces/primereact/issues/2211)
+- Typo in `Menu.d.ts` & `TieredMenu.d.ts` [\#2210](https://github.com/primefaces/primereact/issues/2210)
+- DataScroller increases the first index value even when there are no rows [\#1902](https://github.com/primefaces/primereact/issues/1902)
+
+## [6.5.0](https://github.com/primefaces/primereact/tree/6.5.0) (2021-07-16)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.5.0-rc.2...6.5.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add empty property to MultiStateCheckbox [\#2195](https://github.com/primefaces/primereact/issues/2195)
+- Add filter parameter to the lazyLoad method of VirtualScroller on Dropdown, MultiSelect and Listbox [\#2192](https://github.com/primefaces/primereact/issues/2192)
+- Add dataKey property to OrderList and PickList components [\#2187](https://github.com/primefaces/primereact/issues/2187)
+- Add support for using plugins in the Chart component [\#2186](https://github.com/primefaces/primereact/issues/2186)
+- New Component: Mention [\#2178](https://github.com/primefaces/primereact/issues/2178)
+- Add icon property to Checkbox [\#2173](https://github.com/primefaces/primereact/issues/2173)
+- Add onClick and onMaskClick events to Dialog [\#2163](https://github.com/primefaces/primereact/issues/2163)
+- Rename OverlayEventBus to OverlayService [\#2162](https://github.com/primefaces/primereact/issues/2162)
+- Add cellClassName property to DataTable [\#2160](https://github.com/primefaces/primereact/issues/2160)
+- Add inputMode property to Calendar [\#2158](https://github.com/primefaces/primereact/issues/2158)
+- New Component: Dock [\#2017](https://github.com/primefaces/primereact/issues/2017)
+- New Component: SpeedDial [\#1975](https://github.com/primefaces/primereact/issues/1975)
+- New Component: BlockUI [\#1268](https://github.com/primefaces/primereact/issues/1268)
+- Add dataKey property to DataView [\#1115](https://github.com/primefaces/primereact/issues/1115)
+- Add onNodeClick and onNodeDoubleClick events to Tree [\#1099](https://github.com/primefaces/primereact/issues/1099)
+- Primereact should not act on the global style [\#1082](https://github.com/primefaces/primereact/issues/1082)
+- New Component: Terminal [\#472](https://github.com/primefaces/primereact/issues/472)
+
+**Fixed Bugs:**
+
+- When the container is scrolled using the keyboard on VirtualScroller, this behavior does not continue when new elements are loaded. [\#2196](https://github.com/primefaces/primereact/issues/2196)
+- \[bug\] Sidebar Close button ripple effect on opposite side rather than on the button [\#2185](https://github.com/primefaces/primereact/issues/2185)
+- localeOption return type definition should be an any, not void [\#2181](https://github.com/primefaces/primereact/issues/2181)
+- Changing month with monthNavigator issue on Inline Calendar [\#2174](https://github.com/primefaces/primereact/issues/2174)
+- Dropdown filter closing issue [\#2171](https://github.com/primefaces/primereact/issues/2171)
+- Calendar min max doesn't work with showTime show second [\#2130](https://github.com/primefaces/primereact/issues/2130)
+- No whitespace when cell editing in DataTable [\#2124](https://github.com/primefaces/primereact/issues/2124)
+- OnPage datatable call api twice [\#2030](https://github.com/primefaces/primereact/issues/2030)
+
+## [6.5.0-rc.2](https://github.com/primefaces/primereact/tree/6.5.0-rc.2) (2021-06-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.5.0-rc.1...6.5.0-rc.2)
+
+**Implemented New Features and Enhancements:**
+
+- Webpack moduleFederation throws warning for micro front end apps [\#2146](https://github.com/primefaces/primereact/issues/2146)
+- Add onLoad property to Editor [\#2145](https://github.com/primefaces/primereact/issues/2145)
+- Add progressBarTemplate property to FileUpload [\#2144](https://github.com/primefaces/primereact/issues/2144)
+- Improve forwardRef structure on Button [\#2143](https://github.com/primefaces/primereact/issues/2143)
+- Add emptyMessage property to DataScroller [\#2141](https://github.com/primefaces/primereact/issues/2141)
+- Access to Quill object when using the Editor component [\#2122](https://github.com/primefaces/primereact/issues/2122)
+
+**Fixed Bugs:**
+
+- When clicking on the target element to open the confirmPopup, the browser's scroll moves [\#2142](https://github.com/primefaces/primereact/issues/2142)
+- Colors vars are not working [\#2126](https://github.com/primefaces/primereact/issues/2126)
+- Move cursor not showing if Dialog is not resizable [\#2064](https://github.com/primefaces/primereact/issues/2064)
+
+## [6.5.0-rc.1](https://github.com/primefaces/primereact/tree/6.5.0-rc1)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.4.1...6.5.0-rc1)
+
+**Implemented New Features and Enhancements:**
+
+- New PrimeReact Build [\#2135](https://github.com/primefaces/primereact/issues/2135)
+
+**Fixed Bugs:**
+
+- Tooltips closed on window resize after system keyboard appears on mobile devices [\#2140](https://github.com/primefaces/primereact/issues/2140)
+- Overlay components are not aligned correctly [\#2139](https://github.com/primefaces/primereact/issues/2139)
+- PickList crashes Application when using SourceSelection [\#2133](https://github.com/primefaces/primereact/issues/2133)
+- Calendar yearNavigator not working [\#2131](https://github.com/primefaces/primereact/issues/2131)
+- Building against primereact 6.4.1 generates TS1036 error against VirtualScroller.d.ts:38 [\#2123](https://github.com/primefaces/primereact/issues/2123)
+
+## [6.4.1](https://github.com/primefaces/primereact/tree/6.4.1) (2021-06-16)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.4.0...6.4.1)
+
+**Implemented New Features and Enhancements:**
+
+- Responsive TabMenu and Breadcrumb [\#2120](https://github.com/primefaces/primereact/issues/2120)
+- Add visible and onVisibleChange properties to Calendar [\#2119](https://github.com/primefaces/primereact/issues/2119)
+- Add monthNavigatorTemplate and yearNavigatorTemplate properties to Calendar [\#2116](https://github.com/primefaces/primereact/issues/2116)
+- Toast center positioning enhancement [\#2108](https://github.com/primefaces/primereact/issues/2108)
+
+**Fixed Bugs:**
+
+- InputMask cannot read property 'length' of null [\#2113](https://github.com/primefaces/primereact/issues/2113)
+- Dropdown search crashes when no match with VirtualScrollar [\#2112](https://github.com/primefaces/primereact/issues/2112)
+- The panel of Calendar is not aligned inside editable DataTable [\#2111](https://github.com/primefaces/primereact/issues/2111)
+- MultiSelect filtering broken in v6.4.0 [\#2110](https://github.com/primefaces/primereact/issues/2110)
+- DataTable - Headers of Columns with exportable at false are exported [\#2107](https://github.com/primefaces/primereact/issues/2107)
+- ColorPicker doesn't change its color \(react-hook-form\) [\#2071](https://github.com/primefaces/primereact/issues/2071)
+
+## [6.4.0](https://github.com/primefaces/primereact/tree/6.4.0) (2021-06-11)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.3.2...6.4.0)
+
+**Breaking Changes:**
+
+- Improve onFilterValueChange event on Tree [\#2037](https://github.com/primefaces/primereact/issues/2037)
+- FullCalendar component is deprecated [\#2092](https://github.com/primefaces/primereact/issues/2092)
+- Remove hidden select tag and required property from MultiSelect [\#2099](https://github.com/primefaces/primereact/issues/2099)
+- Update to Chart.js 3.3.2 [\#1802](https://github.com/primefaces/primereact/issues/1802)
+
+**Implemented New Features and Enhancements:**
+
+- New Component: VirtualScroller [\#2063](https://github.com/primefaces/primereact/issues/2063)
+- Add virtualScrollerOptions property to components [\#2075](https://github.com/primefaces/primereact/issues/2075)
+- Improve resize feature of Dialog [\#2102](https://github.com/primefaces/primereact/issues/2102)
+- Add showSelectAll, selectAll and onSelectAll properties to MultiSelect [\#2098](https://github.com/primefaces/primereact/issues/2098)
+- Add inputId property to Password [\#2096](https://github.com/primefaces/primereact/issues/2096)
+- Add onAllRowsSelect and onAllRowsUnselect callbacks to DataTable [\#2093](https://github.com/primefaces/primereact/issues/2093)
+- TieredMenu sub-items are not visible when there's not enough space on the right side [\#2091](https://github.com/primefaces/primereact/issues/2091)
+- Add 'toast' key to ZIndex option on PrimeReact api [\#2089](https://github.com/primefaces/primereact/issues/2089)
+- Add autoZIndex option to PrimReact api [\#2088](https://github.com/primefaces/primereact/issues/2088)
+- Add Vite support [\#2087](https://github.com/primefaces/primereact/issues/2087)
+- Add p-sidebar-view and p-sidebar-content classes to Sidebar [\#2081](https://github.com/primefaces/primereact/issues/2081)
+- Add unselectable property to SelectButton [\#2077](https://github.com/primefaces/primereact/issues/2077)
+- Add dropdownIcon property to components [\#2074](https://github.com/primefaces/primereact/issues/2074)
+- Add emptyMessage property to Dropdown [\#2062](https://github.com/primefaces/primereact/issues/2062)
+- Add showGridlines and stripedRows props to DataTable [\#2054](https://github.com/primefaces/primereact/issues/2054)
+- Rangepicker for Date and Time [\#2051](https://github.com/primefaces/primereact/issues/2051)
+- Add onColumnResizerClick and onColumnResizerDoubleClick callbacks for column resizers on DataTable [\#2047](https://github.com/primefaces/primereact/issues/2047)
+- Improve header element on Dialog [\#2044](https://github.com/primefaces/primereact/issues/2044)
+- ScrollPanel pushes content to the left in order to show scrollbar [\#2039](https://github.com/primefaces/primereact/issues/2039)
+- Add appendTo property to Sidebar [\#2038](https://github.com/primefaces/primereact/issues/2038)
+- Add filterValue and onFilterValueChange properties to TreeSelect [\#2033](https://github.com/primefaces/primereact/issues/2033)
+- Improve Tooltip alignment [\#1973](https://github.com/primefaces/primereact/issues/1973)
+
+**Fixed Bugs:**
+
+- The id property has no effect on Card [\#2105](https://github.com/primefaces/primereact/issues/2105)
+- Items are not aligned on BreadCrumb [\#2104](https://github.com/primefaces/primereact/issues/2104)
+- Drag and drop not working properly with frozen columns on TreeTable [\#2100](https://github.com/primefaces/primereact/issues/2100)
+- \(Datatable\) EmptyMessage is not 'No records found' but null [\#2094](https://github.com/primefaces/primereact/issues/2094)
+- Freezing Columns leads to wrong order on Column reorder of DataTable [\#2086](https://github.com/primefaces/primereact/issues/2086)
+- Resizing of splitter panels doesn't work on touch devices [\#2083](https://github.com/primefaces/primereact/issues/2083)
+- validateResize in splitter doesn't validate sizes if there are more than two panels [\#2082](https://github.com/primefaces/primereact/issues/2082)
+- Tooltip: wrong arrow position and orientation for certain combinations of my, at, position [\#2073](https://github.com/primefaces/primereact/issues/2073)
+- PageParams TypeScript interface improvement on DataTable, TreeTable and DataView [\#2070](https://github.com/primefaces/primereact/issues/2070)
+- Splitter considers the height as the size of the container irrespective of the layout [\#2067](https://github.com/primefaces/primereact/issues/2067)
+- DataView throws an exception when the last page is reached using Paginator [\#2066](https://github.com/primefaces/primereact/issues/2066)
+- Calender Component Type Error [\#2057](https://github.com/primefaces/primereact/issues/2057)
+- FileUpload - long filename [\#2055](https://github.com/primefaces/primereact/issues/2055)
+- Slider doesn't work with decimal step value [\#2036](https://github.com/primefaces/primereact/issues/2036)
+- PickList type definition is not in line with proptypes [\#2035](https://github.com/primefaces/primereact/issues/2035)
+- Sidebar content overflows its container [\#2034](https://github.com/primefaces/primereact/issues/2034)
+- options.clear\(\) NOT works in FileUpload [\#2026](https://github.com/primefaces/primereact/issues/2026)
+- Edit and Sort combination support for DataTable [\#878](https://github.com/primefaces/primereact/issues/878)
+
+**Deprecated:**
+
+- FullCalendar component is deprecated [\#2092](https://github.com/primefaces/primereact/issues/2092)
+
+## [6.3.2](https://github.com/primefaces/primereact/tree/6.3.2) (2021-05-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.3.1...6.3.2)
+
+**Breaking Changes:**
+
+- Remove activeItem property from TabMenu [\#2015](https://github.com/primefaces/primereact/issues/2015)
+- Replace 'data' params name with 'value' for onContextMenuSelectionChange on DataTable [\#2021](https://github.com/primefaces/primereact/issues/2021)
+- Improve nodeTemplate property on Tree [\#2019](https://github.com/primefaces/primereact/issues/2019)
+
+**Implemented New Features and Enhancements:**
+
+- Add options parameter to uploadHandler callback on FileUpload [\#2024](https://github.com/primefaces/primereact/issues/2024)
+- Improve footer template on ConfirmDialog and ConfirmPopup [\#2020](https://github.com/primefaces/primereact/issues/2020)
+- Add activeIndex property to TabMenu [\#2014](https://github.com/primefaces/primereact/issues/2014)
+- onBlur/onFocus's event argument should be typed as FocusEvent [\#2009](https://github.com/primefaces/primereact/issues/2009)
+- Add togglerTemplate property to Tree [\#2005](https://github.com/primefaces/primereact/issues/2005)
+- ColorPicker: wrong value type definitions when using rgb or hsb format [\#2004](https://github.com/primefaces/primereact/issues/2004)
+- Expand the root of filtered nodes on Tree [\#2001](https://github.com/primefaces/primereact/issues/2001)
+- Export classNames function from 'primereact/utils' package [\#1990](https://github.com/primefaces/primereact/issues/1990)
+- Striped class is not applied to expanded rows on DataTable [\#1987](https://github.com/primefaces/primereact/issues/1987)
+- Improve type definitions for IDEs [\#1986](https://github.com/primefaces/primereact/issues/1986)
+
+**Fixed Bugs:**
+
+- Multiselect item on 0 index is getting selected [\#2012](https://github.com/primefaces/primereact/issues/2012)
+- MultiSelect is not working nested value option [\#2011](https://github.com/primefaces/primereact/issues/2011)
+- DataTable checkbox-only selection:: behave as "single" mode. [\#2008](https://github.com/primefaces/primereact/issues/2008)
+- ColorPicker: add missing input attributes, part 2: type definitions [\#2006](https://github.com/primefaces/primereact/issues/2006)
+- ListBox fails on tap item in mobile [\#2000](https://github.com/primefaces/primereact/issues/2000)
+- InputTextarea with auto resize isn't sized correctly when initially populated with a long string [\#1999](https://github.com/primefaces/primereact/issues/1999)
+- The Toast component missed the 'top-center' and 'bottom-center' positions in the typings [\#1996](https://github.com/primefaces/primereact/issues/1996)
+- TreeSelect onNodeExpand Event Never Fires [\#1995](https://github.com/primefaces/primereact/issues/1995)
+- AccordionTab cannot be rendered conditionally [\#1992](https://github.com/primefaces/primereact/issues/1992)
+- When a selected date is deselected, the inputfield is not updated. [\#1991](https://github.com/primefaces/primereact/issues/1991)
+- Non-sortable columns call onSort callback in DataTable [\#1989](https://github.com/primefaces/primereact/issues/1989)
+- Treetable break after toggle columns [\#1988](https://github.com/primefaces/primereact/issues/1988)
+- Tooltip: Fixed tooltip doesnt work with elements inside Tooltip children \( autoHide = false \) [\#1985](https://github.com/primefaces/primereact/issues/1985)
+- The emptyFilterMessage no longer working on Dropdown/MuliSelect components [\#1984](https://github.com/primefaces/primereact/issues/1984)
+- InputNumber's onValueChange is called unconditionally when the onBlur event occurs. [\#1842](https://github.com/primefaces/primereact/issues/1842)
+- Overlay Components not working for Mobile devices [\#1694](https://github.com/primefaces/primereact/issues/1694)
+
+## [6.3.1](https://github.com/primefaces/primereact/tree/6.3.1) (2021-04-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.3.0...6.3.1)
+
+**Implemented New Features and Enhancements:**
+
+- Improve filled control on InputText [\#1977](https://github.com/primefaces/primereact/issues/1977)
+
+**Fixed Bugs:**
+
+- DataTable - EventParams - wrong interface attribute [\#1983](https://github.com/primefaces/primereact/issues/1983)
+- The optionDisabled property is wrongly typed [\#1982](https://github.com/primefaces/primereact/issues/1982)
+- Galleria and Carousel is not working as expected [\#1981](https://github.com/primefaces/primereact/issues/1981)
+- Typescript: Props aren't exported anymore [\#1979](https://github.com/primefaces/primereact/issues/1979)
+- The panel always stays open with browser's autofill feature on Password [\#1978](https://github.com/primefaces/primereact/issues/1978)
+- The rowData has wrong type on DataTable [\#1976](https://github.com/primefaces/primereact/issues/1976)
+
+## [6.3.0](https://github.com/primefaces/primereact/tree/6.3.0) (2021-04-22)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.2.1...6.3.0)
+
+**Breaking Changes:**
+
+- Improve type definitions on all components [\#1877](https://github.com/primefaces/primereact/issues/1877)
+
+**Implemented New Features and Enhancements:**
+
+- New Component: TreeSelect [\#1971](https://github.com/primefaces/primereact/issues/1971)
+- New Component: MultiStateCheckbox [\#1812](https://github.com/primefaces/primereact/issues/1812)
+- Add cellSelection property to DataTable [\#1942](https://github.com/primefaces/primereact/issues/1942)
+- Add dragSelection property to DataTable [\#1932](https://github.com/primefaces/primereact/issues/1932)
+- Improve selectionMode property on DataTable [\#1926](https://github.com/primefaces/primereact/issues/1926)
+- Add zIndex option to PrimeReact api [\#1924](https://github.com/primefaces/primereact/issues/1924)
+- Add appendTo option to PrimeReact api [\#1964](https://github.com/primefaces/primereact/issues/1964)
+- Improve ref property on Form components [\#1920](https://github.com/primefaces/primereact/issues/1920)
+- Add transitionOptions property to Components that use CSSTransition API [\#1917](https://github.com/primefaces/primereact/issues/1917)
+- Add showHeader property to Tree [\#1970](https://github.com/primefaces/primereact/issues/1970)
+- Add filterValue and onFilterValueChange property to Tree [\#1968](https://github.com/primefaces/primereact/issues/1968)
+- Add header and footer to Tree [\#1967](https://github.com/primefaces/primereact/issues/1967)
+- Constants for Message Severities [\#1962](https://github.com/primefaces/primereact/issues/1962)
+- Reimplement EventBus [\#1961](https://github.com/primefaces/primereact/issues/1961)
+- Add new params to filterFunction on Column [\#1956](https://github.com/primefaces/primereact/issues/1956)
+- Add headerTemplate property to TabPanel on TabView [\#1955](https://github.com/primefaces/primereact/issues/1955)
+- Add showOnFocus property to Dropdown [\#1954](https://github.com/primefaces/primereact/issues/1954)
+- Add onShow and onHide callbacks to Overlay and Modal Components [\#1951](https://github.com/primefaces/primereact/issues/1951)
+- Add 'self' value to appendTo property on Components [\#1949](https://github.com/primefaces/primereact/issues/1949)
+- Add autoHide property to Tooltip [\#1946](https://github.com/primefaces/primereact/issues/1946)
+- Improve Typing for ToolTips [\#1916](https://github.com/primefaces/primereact/issues/1916)
+- InputNumber with required property doesn't behave the same as html \<input required\> element. [\#1912](https://github.com/primefaces/primereact/issues/1912)
+- Add sortableDisabled property to Column [\#1911](https://github.com/primefaces/primereact/issues/1911)
+- Add headerTemplate property to FileUplaod [\#1907](https://github.com/primefaces/primereact/issues/1907)
+- Add headerClassName, headerStyle, contentClassName and contentStyle properties to FileUpload [\#1905](https://github.com/primefaces/primereact/issues/1905)
+- Add itemTemplate property to FileUpload [\#1904](https://github.com/primefaces/primereact/issues/1904)
+- Add chooseOptions, uploadOptions and cancelOptions properties to FileUpload [\#1903](https://github.com/primefaces/primereact/issues/1903)
+- Close multiselect dropdown on button click of panelFooterTemplate / Add onShow & onHide event [\#1891](https://github.com/primefaces/primereact/issues/1891)
+- Add loading property to Button [\#1876](https://github.com/primefaces/primereact/issues/1876)
+- Can't use multiple file upload when mode is set to "basic" [\#1649](https://github.com/primefaces/primereact/issues/1649)
+- Use of "\[key: string\]: any;" in type definitions circumvents type safety [\#1615](https://github.com/primefaces/primereact/issues/1615)
+- OverlayPanel: incorrect type definitions for show/hide arguments [\#1356](https://github.com/primefaces/primereact/issues/1356)
+
+**Fixed Bugs:**
+
+- Striped class is not working as expected on DataTable with expanded rows [\#1972](https://github.com/primefaces/primereact/issues/1972)
+- Touch event is not working on ColorPicker [\#1960](https://github.com/primefaces/primereact/issues/1960)
+- The root menuitem does not support template option on PanelMenu [\#1953](https://github.com/primefaces/primereact/issues/1953)
+- Dialog can't close when you press ESC key [\#1947](https://github.com/primefaces/primereact/issues/1947)
+- MultiSelect Button disabled issue [\#1943](https://github.com/primefaces/primereact/issues/1943)
+- Dialog minWidth and minHeight issue [\#1940](https://github.com/primefaces/primereact/issues/1940)
+- Dropdown, MultiSelect, Listbox option that has disabled property is not disabled [\#1936](https://github.com/primefaces/primereact/issues/1936)
+- MultiSelect, selecting disabled options [\#1934](https://github.com/primefaces/primereact/issues/1934)
+- Uncaught Error: Cannot find module './images/color.png' [\#1931](https://github.com/primefaces/primereact/issues/1931)
+- Randomly generated IDs in components throw a warning on SSR [\#1922](https://github.com/primefaces/primereact/issues/1922)
+- Dropdown 'optionDisabled' is wrongly typed as boolean [\#1921](https://github.com/primefaces/primereact/issues/1921)
+- "scrollHeight" for autocomplete doesn't work [\#1918](https://github.com/primefaces/primereact/issues/1918)
+- DataTable and TreeTable Typing is wrong [\#1914](https://github.com/primefaces/primereact/issues/1914)
+- Incorrect types for CascadeSelectProps and ConfirmDialogProps [\#1908](https://github.com/primefaces/primereact/issues/1908)
+- Tooltip is not working with 'disabled' attribute of HTML element as expected. [\#1906](https://github.com/primefaces/primereact/issues/1906)
+- Slider does not work with fractional step values [\#1901](https://github.com/primefaces/primereact/issues/1901)
+- Animation "none" not working for Skeleton [\#1900](https://github.com/primefaces/primereact/issues/1900)
+- PickList transfer buttons disable and items selection issue [\#1898](https://github.com/primefaces/primereact/issues/1898)
+- Multiselect malfunction with 'optionValue' prop setted [\#1897](https://github.com/primefaces/primereact/issues/1897)
+- SlideMenu menu model template has wrong classname [\#1894](https://github.com/primefaces/primereact/issues/1894)
+- SlideMenu does not correctly accept className prop [\#1893](https://github.com/primefaces/primereact/issues/1893)
+- A maximizable dialog cannot be maximized properly after its size or position has been changed [\#1888](https://github.com/primefaces/primereact/issues/1888)
+- Password component doesn't visualize properly the value of the variable serving as it's value when it is programmatically changed [\#1885](https://github.com/primefaces/primereact/issues/1885)
+- FullCalendar, Editor and Chart are not working with NEXT.js [\#1884](https://github.com/primefaces/primereact/issues/1884)
+- editor automatically gains focus when intializing model with data [\#1851](https://github.com/primefaces/primereact/issues/1851)
+- TreeTable does not account for changes in scrollHeight [\#1850](https://github.com/primefaces/primereact/issues/1850)
+- Picklist reorder causes high level error. [\#1843](https://github.com/primefaces/primereact/issues/1843)
+- Fieldset shows empty legend over its border [\#1433](https://github.com/primefaces/primereact/issues/1433)
+
+## [6.2.1](https://github.com/primefaces/primereact/tree/6.2.1) (2021-03-17)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.2.0...6.2.1)
+
+**Fixed Bugs:**
+
+- Overlay Components throw an exception with Next.js [\#1880](https://github.com/primefaces/primereact/issues/1880)
+
+## [6.2.0](https://github.com/primefaces/primereact/tree/6.2.0) (2021-03-16)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.1.0...6.2.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add zIndex options to PrimeReact api [\#1878](https://github.com/primefaces/primereact/issues/1878)
+- Set appendTo as body by default [\#1875](https://github.com/primefaces/primereact/issues/1875)
+- Add option group support to Dropdown [\#1874](https://github.com/primefaces/primereact/issues/1874)
+- Add option group support to MultiSelect [\#1873](https://github.com/primefaces/primereact/issues/1873)
+- Add option group support to Listbox [\#1872](https://github.com/primefaces/primereact/issues/1872)
+- Add option group support to Autocomplete [\#1871](https://github.com/primefaces/primereact/issues/1871)
+- Improve close button style on Inplace [\#1861](https://github.com/primefaces/primereact/issues/1861)
+- Improve type definition of completeMethod event on AutoComplete [\#1680](https://github.com/primefaces/primereact/issues/1680)
+
+**Fixed Bugs:**
+
+- Datatable rows per page doesn't work [\#1870](https://github.com/primefaces/primereact/issues/1870)
+- Server side error because OverlayEventBus [\#1869](https://github.com/primefaces/primereact/issues/1869)
+- Cell Editing doesn't work on child nodes in TreeTable [\#1865](https://github.com/primefaces/primereact/issues/1865)
+- Ability to clear password \(set value of password to blank\) [\#1854](https://github.com/primefaces/primereact/issues/1854)
+
+## [6.1.0](https://github.com/primefaces/primereact/tree/6.1.0) (2021-03-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.0.2...6.1.0)
+
+**Implemented New Features and Enhancements:**
+
+- Color Palettes for Each Theme [\#1860](https://github.com/primefaces/primereact/issues/1860)
+- Add touch support to ColorPicker [\#1857](https://github.com/primefaces/primereact/issues/1857)
+- Add breakpoints property to Dialog, ConfirmDialog and OverlayPanel [\#1856](https://github.com/primefaces/primereact/issues/1856)
+- Add selectionOnly options to CSV export on DataTable [\#1853](https://github.com/primefaces/primereact/issues/1853)
+- Add multiple property to PanelMenu [\#1846](https://github.com/primefaces/primereact/issues/1846)
+- Add expanded option to MenuModel [\#1845](https://github.com/primefaces/primereact/issues/1845)
+- Add panelHeaderTemplate and panelFooterTemplate properties to MultiSelect [\#1841](https://github.com/primefaces/primereact/issues/1841)
+- Add paginatorClassName to DataTable, TreeTable and DataView [\#1840](https://github.com/primefaces/primereact/issues/1840)
+- Improve template option on Paginator [\#1839](https://github.com/primefaces/primereact/issues/1839)
+- Improve the interaction of nested overlays [\#1832](https://github.com/primefaces/primereact/issues/1832)
+- Add disabled option to Tooltip [\#1827](https://github.com/primefaces/primereact/issues/1827)
+- Add onClick event to Avatar [\#1819](https://github.com/primefaces/primereact/issues/1819)
+- Improve checkbox selection on DataTable [\#1817](https://github.com/primefaces/primereact/issues/1817)
+- \[Multiselect\] Feature request: Configure Maximum allowed number of items selectable in Multiselect [\#1815](https://github.com/primefaces/primereact/issues/1815)
+- data-pr-{options} on Global Tooltip doesn't work [\#1811](https://github.com/primefaces/primereact/issues/1811)
+- Menubar and Toolbar, start/end wrong prop types, that don't accept JSX.Element type [\#1809](https://github.com/primefaces/primereact/issues/1809)
+- Tooltip does not disappear when components are disabled [\#1806](https://github.com/primefaces/primereact/issues/1806)
+- Add onClose callback to custom content on ToastMessage [\#1805](https://github.com/primefaces/primereact/issues/1805)
+- Add draggable and resizable features to Dialog [\#1616](https://github.com/primefaces/primereact/issues/1616)
+- DataTable/TreeTable: implement configurable filterDelay [\#1440](https://github.com/primefaces/primereact/issues/1440)
+- Disabling a Menu Item doesnt add aria-disabled label [\#1434](https://github.com/primefaces/primereact/issues/1434)
+- TreeTable/DataTable goes to edit mode when selected \(single click\) [\#1292](https://github.com/primefaces/primereact/issues/1292)
+- Add removableSort property on TreeTable component [\#1275](https://github.com/primefaces/primereact/issues/1275)
+- Change row navigation structure on DataTable with selection [\#1162](https://github.com/primefaces/primereact/issues/1162)
+- Trigger row editing on datatable programmatically [\#1135](https://github.com/primefaces/primereact/issues/1135)
+- Add showFilterClear proprty to Dropdown [\#1081](https://github.com/primefaces/primereact/issues/1081)
+- Improve the parameters of onDragDrop callback on Tree [\#1020](https://github.com/primefaces/primereact/issues/1020)
+- PanelMenu collapses on clicking the menu link instead of being in expanded state [\#1011](https://github.com/primefaces/primereact/issues/1011)
+- Support for svg element in icon properties [\#971](https://github.com/primefaces/primereact/issues/971)
+- Accessibility of the DataTable expander cell button [\#921](https://github.com/primefaces/primereact/issues/921)
+- Accessibility issues in Tooltip and Dialog components [\#862](https://github.com/primefaces/primereact/issues/862)
+- Add mask property to Calendar [\#765](https://github.com/primefaces/primereact/issues/765)
+- Keyboard Accessibility for Slider [\#694](https://github.com/primefaces/primereact/issues/694)
+- Add onBeforeEditorShow and onBeforeEditorHide callbacks to Column on DataTable with cell editing [\#589](https://github.com/primefaces/primereact/issues/589)
+- Add headerTemplate property to Panel [\#1858](https://github.com/primefaces/primereact/issues/1858)
+
+**Fixed Bugs:**
+
+- DataTable is not working with defaultSortOrder={-1} [\#1855](https://github.com/primefaces/primereact/issues/1855)
+- PanelMenu animation is not working as expected [\#1844](https://github.com/primefaces/primereact/issues/1844)
+- CascadeSelect is not working with appendTo property [\#1833](https://github.com/primefaces/primereact/issues/1833)
+- Editing DataTable and TreeTable are not working as expected on React/ReactDOM ^17.0.1 [\#1828](https://github.com/primefaces/primereact/issues/1828)
+- MenuItem interface missing template property [\#1823](https://github.com/primefaces/primereact/issues/1823)
+- When the 'rows' property changes, Pagination component does not update [\#1820](https://github.com/primefaces/primereact/issues/1820)
+- InputText component reference returns Invalid prop forwardRef [\#1818](https://github.com/primefaces/primereact/issues/1818)
+- PickList: Move Up \(Single\) and Move Down buttons are not working [\#1814](https://github.com/primefaces/primereact/issues/1814)
+- DataTable - accessibility of sorting buttons [\#1813](https://github.com/primefaces/primereact/issues/1813)
+- Dropdown menu is separate from the input field [\#1808](https://github.com/primefaces/primereact/issues/1808)
+- DataTable csv export fails in chrome but is working in IE [\#1098](https://github.com/primefaces/primereact/issues/1098)
+- The toggler icon of Tree/TreeTable is not displaying correctly in mobile mode [\#1859](https://github.com/primefaces/primereact/issues/1859)
+
+## [6.0.2](https://github.com/primefaces/primereact/tree/6.0.2) (2021-02-04)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.0.1...6.0.2)
+
+**Implemented New Features and Enhancements:**
+
+- Add autoHighlight property to AutoComplete [\#1801](https://github.com/primefaces/primereact/issues/1801)
+- Add forceSelection to AutoComplete [\#1800](https://github.com/primefaces/primereact/issues/1800)
+- Improve Password implementation [\#1799](https://github.com/primefaces/primereact/issues/1799)
+- InplaceDisplay has no ariaLabel property [\#1796](https://github.com/primefaces/primereact/issues/1796)
+- Add autoFocus property to InputNumber [\#1794](https://github.com/primefaces/primereact/issues/1794)
+- Change the type of loader property on DataScroller [\#1791](https://github.com/primefaces/primereact/issues/1791)
+- Improve PrimeReact components for React.StrictMode [\#1790](https://github.com/primefaces/primereact/issues/1790)
+- Improve rowEditor buttons on DataTable with editMode="row" [\#1788](https://github.com/primefaces/primereact/issues/1788)
+
+**Fixed Bugs:**
+
+- AutoComplete in FireFox does not pass focus on Tab [\#1798](https://github.com/primefaces/primereact/issues/1798)
+- Fullcalendar Week View Missing Vertical Lines [\#1797](https://github.com/primefaces/primereact/issues/1797)
+- SplitterPanel is not exported in TypeScript [\#1795](https://github.com/primefaces/primereact/issues/1795)
+- Navigator Calendar taking current year when yearRange property is less than current year [\#1793](https://github.com/primefaces/primereact/issues/1793)
+- Datatable doesn't change page when the last element on a page is removed. [\#1792](https://github.com/primefaces/primereact/issues/1792)
+- DataTable ContextMenu Third Reposition [\#1789](https://github.com/primefaces/primereact/issues/1789)
+- TreeTable tabbing between editable cells not working [\#1617](https://github.com/primefaces/primereact/issues/1617)
+
+## [6.0.1](https://github.com/primefaces/primereact/tree/6.0.1) (2021-01-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/6.0.0...6.0.1)
+
+**Implemented New Features and Enhancements:**
+
+- Clearing Dropdown returns null instead of undefined [\#1784](https://github.com/primefaces/primereact/issues/1784)
+- Improve template property on MenuModel API [\#1783](https://github.com/primefaces/primereact/issues/1783)
+- Add CascadeSelect to FloatLabelDemo [\#1781](https://github.com/primefaces/primereact/issues/1781)
+- Add imageAlt and onImageError to Avatar [\#1779](https://github.com/primefaces/primereact/issues/1779)
+- Add imageAlt and onImageError property to Chip [\#1778](https://github.com/primefaces/primereact/issues/1778)
+- Improve custom content option on Button [\#1777](https://github.com/primefaces/primereact/issues/1777)
+- Add restoreTableState method to DataTable [\#1776](https://github.com/primefaces/primereact/issues/1776)
+- If Tooltip's content is empty, the tooltip may not be rendered. [\#1770](https://github.com/primefaces/primereact/issues/1770)
+- Controlled Knob does not react to value changes on props [\#1766](https://github.com/primefaces/primereact/issues/1766)
+- Get filtered rows from global filter action [\#1763](https://github.com/primefaces/primereact/issues/1763)
+- Feature Request: DataTable hide expander when there are no children rows [\#1762](https://github.com/primefaces/primereact/issues/1762)
+- Change the type of content property in ToastMessage [\#1761](https://github.com/primefaces/primereact/issues/1761)
+- Add p-component class to Calendar [\#1756](https://github.com/primefaces/primereact/issues/1756)
+- Improve dynamic mask on InputMask [\#1718](https://github.com/primefaces/primereact/issues/1718)
+- MultiSelect implement SelectItem disabled [\#1698](https://github.com/primefaces/primereact/issues/1698)
+- Do not hide overlays on body scroll [\#1655](https://github.com/primefaces/primereact/issues/1655)
+- Add template property support to MenuModel API in all menu components [\#1635](https://github.com/primefaces/primereact/issues/1635)
+
+**Fixed Bugs:**
+
+- Button link is invisible in material themes [\#1786](https://github.com/primefaces/primereact/issues/1786)
+- Inline Calendar doesn't display correctly with time/button bar [\#1782](https://github.com/primefaces/primereact/issues/1782)
+- Improve float label support in overlay selects [\#1780](https://github.com/primefaces/primereact/issues/1780)
+- Avatar with image and shape="circle" doesn't have border-radius style [\#1773](https://github.com/primefaces/primereact/issues/1773)
+- Primereact 6 doesn't work once compiled with Webpack [\#1771](https://github.com/primefaces/primereact/issues/1771)
+- No typing for confirmPopup and confirmDialog [\#1765](https://github.com/primefaces/primereact/issues/1765)
+- Cascade Select material theming is inconsistent [\#1757](https://github.com/primefaces/primereact/issues/1757)
+- DataTable with editMode="cell" doesn't work as expected [\#1752](https://github.com/primefaces/primereact/issues/1752)
+- Problem in entering negative value in INPUTNUMBER. [\#1746](https://github.com/primefaces/primereact/issues/1746)
+- Calendar input does not update view when hourFormat changes [\#1711](https://github.com/primefaces/primereact/issues/1711)
+
+## [6.0.0](https://github.com/primefaces/primereact/tree/6.0.0) (2021-01-12)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/5.0.2...6.0.0)
+
+**Breaking Changes:**
+
+- Change the type of locale property on Calendar [\#1750](https://github.com/primefaces/primereact/issues/1750)
+- Change the import of PrimeReact class [\#1751](https://github.com/primefaces/primereact/issues/1751)
+- Rename 'readonly' property with 'readOnly' on all components [\#1738](https://github.com/primefaces/primereact/issues/1738)
+- Remove onSourceSelect and onTargetSelect callbacks from PickList [\#1707](https://github.com/primefaces/primereact/issues/1707)
+- Change the type of tabIndex property on all components [\#1566](https://github.com/primefaces/primereact/issues/1566)
+
+**Implemented New Features and Enhancements:**
+
+- Locale API [\#1749](https://github.com/primefaces/primereact/issues/1749)
+- New Component: CascadeSelect [\#1736](https://github.com/primefaces/primereact/issues/1736)
+- New Component: Chip [\#1734](https://github.com/primefaces/primereact/issues/1734)
+- New Component: ScrollTop [\#1733](https://github.com/primefaces/primereact/issues/1733)
+- New Component: ConfirmPopup [\#1731](https://github.com/primefaces/primereact/issues/1731)
+- New Component: ConfirmDialog [\#1730](https://github.com/primefaces/primereact/issues/1730)
+- New Component: Splitter [\#1729](https://github.com/primefaces/primereact/issues/1729)
+- New Component: Knob [\#1727](https://github.com/primefaces/primereact/issues/1727)
+- New Component: Divider [\#1726](https://github.com/primefaces/primereact/issues/1726)
+- New Component: Skeleton [\#1725](https://github.com/primefaces/primereact/issues/1725)
+- New Component: Tag [\#1723](https://github.com/primefaces/primereact/issues/1723)
+- New Component: Badge [\#1719](https://github.com/primefaces/primereact/issues/1719)
+- New Component: Avatar [\#1717](https://github.com/primefaces/primereact/issues/1717)
+- Add icons property to Panel [\#1748](https://github.com/primefaces/primereact/issues/1748)
+- Change the type of header property on Panel [\#1747](https://github.com/primefaces/primereact/issues/1747)
+- Dialog dismissableMask didn't work if hide the close icon [\#1745](https://github.com/primefaces/primereact/issues/1745)
+- Chips and AutoComplete\(multiple mode\) support multiline input mode [\#1740](https://github.com/primefaces/primereact/issues/1740)
+- Improving the initial focus of the Dialog [\#1737](https://github.com/primefaces/primereact/issues/1737)
+- Improve Dialog implementation for ConfirmDialog [\#1732](https://github.com/primefaces/primereact/issues/1732)
+- Add tabIndex property to Checkbox [\#1716](https://github.com/primefaces/primereact/issues/1716)
+- Add sourceSelection and targetSelection properties to PickList [\#1708](https://github.com/primefaces/primereact/issues/1708)
+- Add filterValue and onFilterValueChange properties to ListBox [\#1706](https://github.com/primefaces/primereact/issues/1706)
+- Add onKeyDown event to InputNumber [\#1695](https://github.com/primefaces/primereact/issues/1695)
+- Constants for PrimeIcons [\#1625](https://github.com/primefaces/primereact/issues/1625)
+
+**Fixed Bugs:**
+
+- Chips throws a JS exception [\#1754](https://github.com/primefaces/primereact/issues/1754)
+- Typo in tabIndex property name [\#1710](https://github.com/primefaces/primereact/issues/1710)
+- DataTable with empty frozen column throws a JS exception [\#1703](https://github.com/primefaces/primereact/issues/1703)
+- Prop type incorrect for Timeline [\#1700](https://github.com/primefaces/primereact/issues/1700)
+- Datatable with stateStorage property saves filterheader as extra columnwidth [\#1697](https://github.com/primefaces/primereact/issues/1697)
+- DataTable edit not work \(Input disappears immediately after clicking cell\) in react-dom@17.0.1 [\#1685](https://github.com/primefaces/primereact/issues/1685)
+
+## [5.0.2](https://github.com/primefaces/primereact/tree/5.0.2) (2020-11-30)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/5.0.1...5.0.2)
+
+**Breaking Changes:**
+
+- Change params of onEditorInit, onEditorSubmit, onEditorCancel and editorValidator callbacks on Column [\#1692](https://github.com/primefaces/primereact/issues/1692)
+
+**Implemented New Features and Enhancements:**
+
+- Remove PrimeFlex dependency from MegaMenu [\#1690](https://github.com/primefaces/primereact/issues/1690)
+- Chips display for MultiSelect [\#1689](https://github.com/primefaces/primereact/issues/1689)
+- Add the 'enter' key support to InputNumber [\#1688](https://github.com/primefaces/primereact/issues/1688)
+- New Component: Timeline [\#1687](https://github.com/primefaces/primereact/issues/1687)
+- Improve Password implementation [\#1684](https://github.com/primefaces/primereact/issues/1684)
+- Improve Tooltip implementation [\#1683](https://github.com/primefaces/primereact/issues/1683)
+- Add onFocus and onBlur events on InputMask [\#1677](https://github.com/primefaces/primereact/issues/1677)
+- OverlayPanel - arrow always on the left side of the panel. [\#1671](https://github.com/primefaces/primereact/issues/1671)
+- Change the types of header, footer, title, subTitle properties on Card [\#1658](https://github.com/primefaces/primereact/issues/1658)
+- Add separator support to SplitButton [\#1656](https://github.com/primefaces/primereact/issues/1656)
+- Do not hide overlays on body scroll [\#1655](https://github.com/primefaces/primereact/issues/1655)
+- Remove 'classnames' dependency from PrimeReact components [\#1653](https://github.com/primefaces/primereact/issues/1653)
+- Add showClear property to MultiSelect [\#1627](https://github.com/primefaces/primereact/issues/1627)
+- Add mediumRegex and strongRegex property to Password [\#1623](https://github.com/primefaces/primereact/issues/1623)
+- Add browser event param to editor callbacks on Datatable [\#1577](https://github.com/primefaces/primereact/issues/1577)
+
+**Fixed Bugs:**
+
+- DataView throws an exception when the last page is reached using Paginator [\#1691](https://github.com/primefaces/primereact/issues/1691)
+- DataTable edit not work \(Input disappears immediately after clicking cell\) in react-dom@17.0.1 [\#1685](https://github.com/primefaces/primereact/issues/1685)
+- Chips is not working when the initial value sets 'null' [\#1678](https://github.com/primefaces/primereact/issues/1678)
+- Global tooltip documentation missing [\#1676](https://github.com/primefaces/primereact/issues/1676)
+- Calendar value change does not update UI [\#1672](https://github.com/primefaces/primereact/issues/1672)
+- Tooltip with `showDelay` appears despite cursor has already left the Input [\#1667](https://github.com/primefaces/primereact/issues/1667)
+- When a partial selection is made among children of a node, the minus icon doesn't appear in the checkbox of that node. [\#1657](https://github.com/primefaces/primereact/issues/1657)
+- Float label is not working on Chips [\#1654](https://github.com/primefaces/primereact/issues/1654)
+- DataTable with lazy mode and multiple selection doesn't work as expected [\#1636](https://github.com/primefaces/primereact/issues/1636)
+- pRipple working when disabled\(etc menuitem\) [\#1634](https://github.com/primefaces/primereact/issues/1634)
+- DataTable Context Menu doesn't reposition [\#1574](https://github.com/primefaces/primereact/issues/1574)
+- Multiple sort in TreeTable is not working when passing multisortmeta props [\#1442](https://github.com/primefaces/primereact/issues/1442)
+
+## [5.0.1](https://github.com/primefaces/primereact/tree/5.0.1) (2020-10-12)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/5.0.0...5.0.1)
+
+**Implemented New Features and Enhancements:**
+
+- Soho Theme [\#1632](https://github.com/primefaces/primereact/issues/1632)
+- FluentUI Theme [\#1631](https://github.com/primefaces/primereact/issues/1631)
+- Accordion border radius visual on PrimeOne themes [\#1629](https://github.com/primefaces/primereact/issues/1629)
+- Galleria and Carousel highlight item visual improvement on PrimeOne Themes [\#1626](https://github.com/primefaces/primereact/issues/1626)
+- Add dropdownAppendTo property to Paginator [\#1622](https://github.com/primefaces/primereact/issues/1622)
+- Add paginatorDropdownAppendTo property to DataTable, TreeTable and DataView [\#1621](https://github.com/primefaces/primereact/issues/1621)
+- Tooltip doesn't close in scrollable containers [\#1607](https://github.com/primefaces/primereact/issues/1607)
+
+**Fixed Bugs:**
+
+- Fullcalendar button styling issues [\#1633](https://github.com/primefaces/primereact/issues/1633)
+- TriStateCheckbox X icon not visible on Material themes [\#1630](https://github.com/primefaces/primereact/issues/1630)
+- TreeNode toggler is not readable on hover when highlighted on bootstrap theme [\#1628](https://github.com/primefaces/primereact/issues/1628)
+- Dropdown items throws a JS exception [\#1624](https://github.com/primefaces/primereact/issues/1624)
+- TypeScript applications cannot find the 'Tooltip' module [\#1618](https://github.com/primefaces/primereact/issues/1618)
+- InputNumber with spinner mode throws a JS exception [\#1614](https://github.com/primefaces/primereact/issues/1614)
+- inputNumber with numeric prefix is not working as expected [\#1613](https://github.com/primefaces/primereact/issues/1613)
+- Problems when typing or pasting numbers into InputNumber [\#1612](https://github.com/primefaces/primereact/issues/1612)
+
+## [5.0.0](https://github.com/primefaces/primereact/tree/5.0.0) (2020-10-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/5.0.0-rc.2...5.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Lighter Highlight Color for PrimeOne Themes [\#1605](https://github.com/primefaces/primereact/issues/1605)
+- Add template property support to MenuModel API [\#1597](https://github.com/primefaces/primereact/issues/1597)
+- Add buttonTemplate property to SplitButton [\#1596](https://github.com/primefaces/primereact/issues/1596)
+- Add headerTemplate property to AccordionTab on Accordion [\#1594](https://github.com/primefaces/primereact/issues/1594)
+- Add expandIcon and collapseIcon properties to Accordion [\#1593](https://github.com/primefaces/primereact/issues/1593)
+- Add id property to Password [\#1590](https://github.com/primefaces/primereact/issues/1590)
+- Improvement in behavior of components that have overlay panels in scrollable containers [\#1589](https://github.com/primefaces/primereact/issues/1589)
+- InputNumber feature - allow negative values [\#1585](https://github.com/primefaces/primereact/issues/1585)
+- Add panelClassName and panelStyle properties for appendable overlays [\#1459](https://github.com/primefaces/primereact/issues/1459)
+- TreeTable: expose the filter method for TypeScript [\#1435](https://github.com/primefaces/primereact/issues/1435)
+
+**Fixed Bugs:**
+
+- Alignment issue on Scrollable TreeTable [\#1599](https://github.com/primefaces/primereact/issues/1599)
+- Alignment issue on Scrollable Datatable [\#1598](https://github.com/primefaces/primereact/issues/1598)
+- Button shows "&nbsp" text if the label property is empty [\#1595](https://github.com/primefaces/primereact/issues/1595)
+- InputNumber cannot set value when format property is false [\#1582](https://github.com/primefaces/primereact/issues/1582)
+- Carousel page prop not detecting changes to prop value. [\#1464](https://github.com/primefaces/primereact/issues/1464)
+- Pagination \(currentPageReportTemplate\) is not showing correct page no for first [\#1453](https://github.com/primefaces/primereact/issues/1453)
+- MultiSelect: error when selecting option with null value [\#1446](https://github.com/primefaces/primereact/issues/1446)
+- MultiSelect: warning in console when using string array as options [\#1445](https://github.com/primefaces/primereact/issues/1445)
+
+## [5.0.0-rc.2](https://github.com/primefaces/primereact/tree/5.0.0-rc.2) (2020-09-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/5.0.0-rc.1...5.0.0-rc.2)
+
+**Implemented New Features and Enhancements:**
+
+- Add resetFilterOnHide property to MultiSelect [\#1565](https://github.com/primefaces/primereact/issues/1565)
+- Add resetFilterOnHide property to Dropdown [\#1564](https://github.com/primefaces/primereact/issues/1564)
+- Add keyboard support to MultiSelect [\#1563](https://github.com/primefaces/primereact/issues/1563)
+- Improve SelectButton implementation [\#1561](https://github.com/primefaces/primereact/issues/1561)
+- Add optionDisabled property to SelectButton [\#1560](https://github.com/primefaces/primereact/issues/1560)
+- Add emptyFilterMessage property to MultiSelect [\#1556](https://github.com/primefaces/primereact/issues/1556)
+- Add emptyFilterMessage property to Dropdown [\#1554](https://github.com/primefaces/primereact/issues/1554)
+- Negative sign with InputNumber [\#1551](https://github.com/primefaces/primereact/issues/1551)
+- InputNumber: pasting doesn't work correctly [\#1549](https://github.com/primefaces/primereact/issues/1549)
+- InputGroup support for input components with wrappers [\#1548](https://github.com/primefaces/primereact/issues/1548)
+- Update PrimeFlex documentation to 2.0.0 [\#1542](https://github.com/primefaces/primereact/issues/1542)
+- Scrollable Table alignment improvement [\#1541](https://github.com/primefaces/primereact/issues/1541)
+- DataTable onRowClick executes when multiple selection mode is enabled and user clicks on selection checkbox column cell [\#1534](https://github.com/primefaces/primereact/issues/1534)
+- Add content property to Message component [\#1463](https://github.com/primefaces/primereact/issues/1463)
+- Add color property to ProgressBar [\#1457](https://github.com/primefaces/primereact/issues/1457)
+- NumberInput does not pass down validation attributes to input element. [\#1444](https://github.com/primefaces/primereact/issues/1444)
+
+**Fixed Bugs:**
+
+- The left and right arrow keys not working on input elements inside Tree [\#1559](https://github.com/primefaces/primereact/issues/1559)
+- Items in PanelMenu are highlighted wrongly with Material dark themes [\#1557](https://github.com/primefaces/primereact/issues/1557)
+- Calendar misplaced layout if more than one month is shown [\#1553](https://github.com/primefaces/primereact/issues/1553)
+- inputNumber cannot set value bigger than 99.999 for an ES locale [\#1552](https://github.com/primefaces/primereact/issues/1552)
+- inputNumber with numeric prefix is not working as expected [\#1550](https://github.com/primefaces/primereact/issues/1550)
+- Item selection does not work on Dropdown with scrollable panel [\#1544](https://github.com/primefaces/primereact/issues/1544)
+- Dialog with Long Content does not scroll in IE11 [\#1538](https://github.com/primefaces/primereact/issues/1538)
+- Pill Text not centered [\#1532](https://github.com/primefaces/primereact/issues/1532)
+- Ripple effect with typescript [\#1530](https://github.com/primefaces/primereact/issues/1530)
+- Component TreeTable doesn't added props className [\#1473](https://github.com/primefaces/primereact/issues/1473)
+- Dialog aria-labelledby references an unexisting id [\#1405](https://github.com/primefaces/primereact/issues/1405)
+
+## [5.0.0-rc.1](https://github.com/primefaces/primereact/tree/5.0.0-rc.1) (2020-08-20)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.2.2...5.0.0-rc.1)
+
+**Breaking Changes:**
+
+- Change the values of position property on Dialog [\#1516](https://github.com/primefaces/primereact/issues/1516)
+- Rename iconsTemplate property to icons property on Dialog [\#1514](https://github.com/primefaces/primereact/issues/1514)
+- Rename iconsTemplate property to icons property on Sidebar [\#1513](https://github.com/primefaces/primereact/issues/1513)
+- Rename Growl component to Toast component [\#1512](https://github.com/primefaces/primereact/issues/1512)
+- Change some property names on Galleria [\#1503](https://github.com/primefaces/primereact/issues/1503)
+- Label Nova, Luna and Rhea as Legacy Themes [\#1501](https://github.com/primefaces/primereact/issues/1501)
+- Change the values of position property on Growl [\#1497](https://github.com/primefaces/primereact/issues/1497)
+- Remove responsive property from OrderList [\#1494](https://github.com/primefaces/primereact/issues/1494)
+- Remove responsive property from PickList [\#1493](https://github.com/primefaces/primereact/issues/1493)
+- Replace dotsContainerClassName with indicatorsContentClassName property on Carousel [\#1491](https://github.com/primefaces/primereact/issues/1491)
+- Remove Spinner Component [\#1488](https://github.com/primefaces/primereact/issues/1488)
+- Remove Lightbox component [\#1487](https://github.com/primefaces/primereact/issues/1487)
+- Migrate to PrimeOne Design Architecture [\#1484](https://github.com/primefaces/primereact/issues/1484)
+- Remove responsive attribute from DataTable [\#1250](https://github.com/primefaces/primereact/issues/1250)
+
+**Implemented New Features and Enhancements:**
+
+- Add emptyTemplate property to FileUpload [\#1508](https://github.com/primefaces/primereact/issues/1508)
+- New Component: Ripple [\#1507](https://github.com/primefaces/primereact/issues/1507)
+- Add index parameter to onRowEditInit and onRowSave callbacks on DataTable [\#1505](https://github.com/primefaces/primereact/issues/1505)
+- Add onEditorInit callback for cell editing mode to Column [\#1504](https://github.com/primefaces/primereact/issues/1504)
+- Add left and right properties to Toolbar [\#1502](https://github.com/primefaces/primereact/issues/1502)
+- Material Theme [\#1500](https://github.com/primefaces/primereact/issues/1500)
+- Bootstrap Theme [\#1499](https://github.com/primefaces/primereact/issues/1499)
+- Add start and end properties to Menubar [\#1498](https://github.com/primefaces/primereact/issues/1498)
+- Add valueTemplate property to Dropdown [\#1496](https://github.com/primefaces/primereact/issues/1496)
+- Add iconPos property to ToggleButton [\#1495](https://github.com/primefaces/primereact/issues/1495)
+- Add badge and badgeClassName properties to Button [\#1490](https://github.com/primefaces/primereact/issues/1490)
+- Add Badge styles to core css [\#1489](https://github.com/primefaces/primereact/issues/1489)
+- Improved Overlay Animations [\#1486](https://github.com/primefaces/primereact/issues/1486)
+- PrimeOne Themes [\#1485](https://github.com/primefaces/primereact/issues/1485)
+- Label Nova, Luna and Rhea as Legacy Themes [\#1483](https://github.com/primefaces/primereact/issues/1483)
+- Add contentClassName property to Dialog [\#1455](https://github.com/primefaces/primereact/issues/1455)
+- Add listClassName property to Listbox [\#1454](https://github.com/primefaces/primereact/issues/1454)
+- Change onSlideEnd callback param on Slider [\#1437](https://github.com/primefaces/primereact/issues/1437)
+- Improve Tooltip implementation [\#1436](https://github.com/primefaces/primereact/issues/1436)
+- Add onValueChange property to InputNumber [\#1418](https://github.com/primefaces/primereact/issues/1418)
+- It is impossible to type fractional digits on InputNumber [\#1380](https://github.com/primefaces/primereact/issues/1380)
+- Remove browserslist, leave processing and transpilation to applications [\#1312](https://github.com/primefaces/primereact/issues/1312)
+- Custom content support for Button [\#1258](https://github.com/primefaces/primereact/issues/1258)
+
+**Fixed Bugs:**
+
+- Global filter is not working with invalid values on TreeTable [\#1517](https://github.com/primefaces/primereact/issues/1517)
+- Captcha throws a JS exception [\#1509](https://github.com/primefaces/primereact/issues/1509)
+- Calendar with appendTo property isn't working as expected [\#1506](https://github.com/primefaces/primereact/issues/1506)
+- Chart does not update when its options and type properties change [\#1492](https://github.com/primefaces/primereact/issues/1492)
+- Dynamic options breaks InputNumber [\#1470](https://github.com/primefaces/primereact/issues/1470)
+- DatePicker Milliseconds jumps from 000 to 199 [\#1456](https://github.com/primefaces/primereact/issues/1456)
+- Typing for selectedItemTemplate in AutoComplete is wrong [\#1428](https://github.com/primefaces/primereact/issues/1428)
+- Can't type - as first symbol into an Inputnumber [\#1427](https://github.com/primefaces/primereact/issues/1427)
+- If the invalid value is entered to Calendar with keepInvalid property, the onChange event returns null [\#1422](https://github.com/primefaces/primereact/issues/1422)
+- Calling clearTimeout is required before unmounting AutoComplete [\#1421](https://github.com/primefaces/primereact/issues/1421)
+- Clear button is not closing Calendar [\#1416](https://github.com/primefaces/primereact/issues/1416)
+- File selection does not work after validation fails [\#1415](https://github.com/primefaces/primereact/issues/1415)
+- InputNumber prevents min key number [\#1412](https://github.com/primefaces/primereact/issues/1412)
+- ListBox, Dropdown: Using non-unique key [\#1397](https://github.com/primefaces/primereact/issues/1397)
+
+## [4.2.2](https://github.com/primefaces/primereact/tree/4.2.2) (2020-06-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.2.1...4.2.2)
+
+**Implemented New Features and Enhancements:**
+
+- Add onStateSave and onStateRestore callbacks to DataTable with stateStorage [\#1389](https://github.com/primefaces/primereact/issues/1389)
+- Change the type of iconsTemplate property on Dialog [\#1386](https://github.com/primefaces/primereact/issues/1386)
+- Calendar uses : instead of . as seperator for milliseconds [\#1385](https://github.com/primefaces/primereact/issues/1385)
+- Add custom mode to stateStorage [\#1382](https://github.com/primefaces/primereact/issues/1382)
+- ColorPicker: add missing input attributes [\#1323](https://github.com/primefaces/primereact/issues/1323)
+- Deprecate \*styleClass props in favor of \*className [\#1262](https://github.com/primefaces/primereact/issues/1262)
+
+**Fixed Bugs:**
+
+- Tree filter with onToggle method doesn't work as expected [\#1390](https://github.com/primefaces/primereact/issues/1390)
+- Calendar navigator skips one month [\#1388](https://github.com/primefaces/primereact/issues/1388)
+- Incorrect work page parameter in carousel [\#1387](https://github.com/primefaces/primereact/issues/1387)
+- The className property of Column is not set to \<col\> element [\#1384](https://github.com/primefaces/primereact/issues/1384)
+- EmptyMessage property is not working with empty string on DataTable [\#1383](https://github.com/primefaces/primereact/issues/1383)
+- When the month is changed in Calendar inside OverlayPanel, the panel automatically closes. [\#1381](https://github.com/primefaces/primereact/issues/1381)
+- TreeTable column body prop function does not contain column argument [\#1366](https://github.com/primefaces/primereact/issues/1366)
+- When the input filter element is clicked, the panel closes on DropDown [\#1360](https://github.com/primefaces/primereact/issues/1360)
+
+## [4.2.1](https://github.com/primefaces/primereact/tree/4.2.1) (2020-05-11)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.2.0...4.2.1)
+
+**Implemented New Features and Enhancements:**
+
+- Remove filter method from ObjectUtils [\#1343](https://github.com/primefaces/primereact/issues/1343)
+- AutoComplete: selectedItemTemplate gets called for query [\#1296](https://github.com/primefaces/primereact/issues/1296)
+
+**Fixed Bugs:**
+
+- Editable Dropdown is not working as expected [\#1359](https://github.com/primefaces/primereact/issues/1359)
+- Dropdown throws an exception on console after filtering and keyboard navigation [\#1358](https://github.com/primefaces/primereact/issues/1358)
+- DataTable: filters are not rerendered when their state is changed [\#1352](https://github.com/primefaces/primereact/issues/1352)
+- DataTable: wrong type definition for onFilter [\#1351](https://github.com/primefaces/primereact/issues/1351)
+- Autofocus property doesn't work as expected on Textarea [\#1350](https://github.com/primefaces/primereact/issues/1350)
+- Editor Component readOnly property name wrong [\#1346](https://github.com/primefaces/primereact/issues/1346)
+- React multiselect defaultValue warning [\#1344](https://github.com/primefaces/primereact/issues/1344)
+- InputMask displayed value does not change when value changes to undefined or null [\#1342](https://github.com/primefaces/primereact/issues/1342)
+- Wrong import for FilterUtils [\#1339](https://github.com/primefaces/primereact/issues/1339)
+
+## [4.2.0](https://github.com/primefaces/primereact/tree/4.2.0) (2020-04-17)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.1.2...4.2.0)
+
+**Implemented New Features and Enhancements:**
+
+- New Component: InputNumber [\#1311](https://github.com/primefaces/primereact/issues/1311)
+- Add filterLocale property to Tree [\#1338](https://github.com/primefaces/primereact/issues/1338)
+- Add filterLocale property to TreeTable [\#1337](https://github.com/primefaces/primereact/issues/1337)
+- Add filterLocale property to MultiSelect [\#1336](https://github.com/primefaces/primereact/issues/1336)
+- Add filterLocale property to ListBox [\#1335](https://github.com/primefaces/primereact/issues/1335)
+- Add filterLocale property to Dropdown [\#1334](https://github.com/primefaces/primereact/issues/1334)
+- Add filterLocale property to DataTable [\#1333](https://github.com/primefaces/primereact/issues/1333)
+- Add checkValidity method to MultiSelect [\#1332](https://github.com/primefaces/primereact/issues/1332)
+- onFocus - onBlur for ToggleButton [\#1330](https://github.com/primefaces/primereact/issues/1330)
+- Update sortIcons [\#1329](https://github.com/primefaces/primereact/issues/1329)
+- Disabled prop for TriStateCheckbox [\#1325](https://github.com/primefaces/primereact/issues/1325)
+- Refactor OverlayPanel outside click detection [\#1320](https://github.com/primefaces/primereact/issues/1320)
+- Refactor MultiSelect outside click detection [\#1319](https://github.com/primefaces/primereact/issues/1319)
+- Refactor Menu outside click detection [\#1318](https://github.com/primefaces/primereact/issues/1318)
+- Refactor ColorPicker outside click detection [\#1317](https://github.com/primefaces/primereact/issues/1317)
+- Refactor Dropdown outside click detection [\#1310](https://github.com/primefaces/primereact/issues/1310)
+- Refactor AutoComplete outside click detection [\#1308](https://github.com/primefaces/primereact/issues/1308)
+- MultiSelect/Dropdown expose input attributes for labeling and validation purposes [\#1306](https://github.com/primefaces/primereact/issues/1306)
+- Autocomplete dropdown button close behavior enhancement [\#1305](https://github.com/primefaces/primereact/issues/1305)
+- Improve timepicker style on Calendar [\#1294](https://github.com/primefaces/primereact/issues/1294)
+- Add milliseconds support to Calendar [\#1293](https://github.com/primefaces/primereact/issues/1293)
+- Not nullable `dataKey` in DropDown break `selectedOption` property [\#1286](https://github.com/primefaces/primereact/issues/1286)
+- Separator for Chips [\#1285](https://github.com/primefaces/primereact/issues/1285)
+
+**Fixed Bugs:**
+
+- Dropdown checkValidity fails [\#1331](https://github.com/primefaces/primereact/issues/1331)
+- Calendar.showOtherMonths property not being used [\#1328](https://github.com/primefaces/primereact/issues/1328)
+- Disable prop on ToggleButton not working [\#1321](https://github.com/primefaces/primereact/issues/1321)
+- IE11: Autocomplete with dropdown and multiple selection requires doubleclick [\#1316](https://github.com/primefaces/primereact/issues/1316)
+- InputMask displayed value does not change when value changes to undefined or null [\#1309](https://github.com/primefaces/primereact/issues/1309)
+- multiSortMeta depends on single sort [\#1307](https://github.com/primefaces/primereact/issues/1307)
+- Carousel - Button inside carousel-item is not clickable in mobile phones [\#1300](https://github.com/primefaces/primereact/issues/1300)
+- AutoComplete: selectedItemTemplate ts binding claims to expect JSX.Element in return, but at runtime a string is expected [\#1297](https://github.com/primefaces/primereact/issues/1297)
+- FileUpload in auto mode sends two post requests in IE11 [\#1282](https://github.com/primefaces/primereact/issues/1282)
+- Today Button doesn't work on prefilled Calendar with timeonly [\#1281](https://github.com/primefaces/primereact/issues/1281)
+- TreeTable goes to edit mode when expanded [\#1276](https://github.com/primefaces/primereact/issues/1276)
+- Tree drag&drop not working if dragdropScope contains upper case letter [\#1182](https://github.com/primefaces/primereact/issues/1182)
+
+## [4.1.2](https://github.com/primefaces/primereact/tree/4.1.2) (2020-03-20)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.1.1...4.1.2)
+
+**Implemented New Features and Enhancements:**
+
+- DataView: lazy loading implementation [\#1264](https://github.com/primefaces/primereact/issues/1264)
+
+**Fixed Bugs:**
+
+- Multiple Sort doesn't work as expected in the DataTable if a sortable column has sortField and field properties [\#1279](https://github.com/primefaces/primereact/issues/1279)
+- Chips in disabled Autocomplete are not disabled [\#1278](https://github.com/primefaces/primereact/issues/1278)
+- Calendar display not update when value change. [\#1277](https://github.com/primefaces/primereact/issues/1277)
+- Calendar closes right away in Chrome when it has showTime={true} [\#1272](https://github.com/primefaces/primereact/issues/1272)
+- Setting state in onFocus of Datatable Editors crashes app [\#1271](https://github.com/primefaces/primereact/issues/1271)
+- Invalid Date in Calendar in IE11 crashes the app [\#1270](https://github.com/primefaces/primereact/issues/1270)
+- Tab-Key doesn't work in Datatable with cell editing on IE11 and Edge [\#1269](https://github.com/primefaces/primereact/issues/1269)
+- IE11: Autocomplete with dropdown requires doubleclick [\#1267](https://github.com/primefaces/primereact/issues/1267)
+- OnComplete callback has wrong property params on InputMask.d.ts [\#1265](https://github.com/primefaces/primereact/issues/1265)
+- Fix InputSwitch documentation for onLabel-offLabel [\#1263](https://github.com/primefaces/primereact/issues/1263)
+
+## [4.1.1](https://github.com/primefaces/primereact/tree/4.1.1) (2020-03-12)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.1.0...4.1.1)
+
+**Implemented New Features and Enhancements:**
+
+- Add onFocus-onBlur to Dropdown [\#1260](https://github.com/primefaces/primereact/issues/1260)
+- InputMask OnComplete does not contain the new value [\#1255](https://github.com/primefaces/primereact/issues/1255)
+- resetFilter function for Dropdown [\#1249](https://github.com/primefaces/primereact/issues/1249)
+- Improve type definition for onChange of form components [\#1199](https://github.com/primefaces/primereact/issues/1199)
+
+**Fixed Bugs:**
+
+- DataTable scrollHeight doesn't calculate correctly with frozen columns and header groups [\#1261](https://github.com/primefaces/primereact/issues/1261)
+- Disabled TabPanel focussable with TAB-Key [\#1254](https://github.com/primefaces/primereact/issues/1254)
+- Error on TreeTable docs about responsive [\#1253](https://github.com/primefaces/primereact/issues/1253)
+- Select components don't correctly return value [\#1252](https://github.com/primefaces/primereact/issues/1252)
+- currentPageReport should check for {last} boundary [\#1251](https://github.com/primefaces/primereact/issues/1251)
+- onClose of GrowlMessage is also allowing onClick to fire. [\#1248](https://github.com/primefaces/primereact/issues/1248)
+- loadingBody type is different to Documentation [\#1111](https://github.com/primefaces/primereact/issues/1111)
+
+## [4.1.0](https://github.com/primefaces/primereact/tree/4.1.0) (2020-03-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/4.0.0...4.1.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add reorderable to Column [\#1246](https://github.com/primefaces/primereact/issues/1246)
+- Implement filterBy and filterMatchMode for ListBox [\#1245](https://github.com/primefaces/primereact/issues/1245)
+- Implement filterBy and filterMatchMode for MultiSelect [\#1244](https://github.com/primefaces/primereact/issues/1244)
+- Add filterPlaceholder to MultiSelect [\#1242](https://github.com/primefaces/primereact/issues/1242)
+- Deprecate icon of SelectItem API [\#1239](https://github.com/primefaces/primereact/issues/1239)
+- Templating support to SelectButton [\#1238](https://github.com/primefaces/primereact/issues/1238)
+- Document SelectItem [\#1237](https://github.com/primefaces/primereact/issues/1237)
+- Change the type of emptyMessage property on DataTable [\#1236](https://github.com/primefaces/primereact/issues/1236)
+- Deprecate Lightbox [\#1235](https://github.com/primefaces/primereact/issues/1235)
+- Add optionValue to Select components [\#1230](https://github.com/primefaces/primereact/issues/1230)
+- Placeholder colors are not same [\#1229](https://github.com/primefaces/primereact/issues/1229)
+- Primitive values support in Select components [\#1228](https://github.com/primefaces/primereact/issues/1228)
+- Add filterHeaderStyle and filterHeaderClassName to Column [\#1227](https://github.com/primefaces/primereact/issues/1227)
+- Add rowHover to DataTable [\#1226](https://github.com/primefaces/primereact/issues/1226)
+- New options for CurrentPageReport [\#1225](https://github.com/primefaces/primereact/issues/1225)
+- New DataTable Customer Demo [\#1224](https://github.com/primefaces/primereact/issues/1224)
+- New filtering modes for Table [\#1223](https://github.com/primefaces/primereact/issues/1223)
+- Accents support in Table filtering [\#1222](https://github.com/primefaces/primereact/issues/1222)
+- Add filterField to column [\#1221](https://github.com/primefaces/primereact/issues/1221)
+- Move column filters to their own row [\#1220](https://github.com/primefaces/primereact/issues/1220)
+- Time support for min date or max date in calendar component [\#1217](https://github.com/primefaces/primereact/issues/1217)
+- Add filterPlaceholder to Listbox [\#1215](https://github.com/primefaces/primereact/issues/1215)
+- Improve style of p-link component [\#1213](https://github.com/primefaces/primereact/issues/1213)
+- Implement className in MultiSelect, Dropdown, SelectButton, ListBox options [\#1175](https://github.com/primefaces/primereact/issues/1175)
+- Allow Dialogs already maximized [\#1170](https://github.com/primefaces/primereact/issues/1170)
+- Implement filterBy and filterMatchMode for Dropdown [\#1149](https://github.com/primefaces/primereact/issues/1149)
+- Change the type of the 'header' property on TabPanel [\#1079](https://github.com/primefaces/primereact/issues/1079)
+- DataTable Columns: Conditional reorder [\#1032](https://github.com/primefaces/primereact/issues/1032)
+- Datatable Columns: Conditional select [\#1031](https://github.com/primefaces/primereact/issues/1031)
+
+**Fixed Bugs:**
+
+- Chips cover 100% although input is visually smaller [\#1241](https://github.com/primefaces/primereact/issues/1241)
+- Datatable doesn't change page when the last element on a page is removed. [\#1233](https://github.com/primefaces/primereact/issues/1233)
+- Filter does not work after adding a new node to the root node on Tree [\#1232](https://github.com/primefaces/primereact/issues/1232)
+- Clear Button does not clear the input value on Calendar [\#1231](https://github.com/primefaces/primereact/issues/1231)
+- Remove tabIndex from the headers of the non-sortable dataTable. [\#1219](https://github.com/primefaces/primereact/issues/1219)
+- The virtualScroll height is always added to rows on DataTable [\#1218](https://github.com/primefaces/primereact/issues/1218)
+- ContextMenu hide/onHide triggers even though already hidden [\#1189](https://github.com/primefaces/primereact/issues/1189)
+- Tree does not support Font Awesome icons [\#1187](https://github.com/primefaces/primereact/issues/1187)
+- Reset filter textbox of dropdown if options changes [\#1179](https://github.com/primefaces/primereact/issues/1179)
+- Deadlock situation in range slider [\#1094](https://github.com/primefaces/primereact/issues/1094)
+
+## [4.0.0](https://github.com/primefaces/primereact/tree/4.0.0) (2020-02-27)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.4.0...4.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add keepInvalid property to Calendar [\#1204](https://github.com/primefaces/primereact/issues/1204)
+- Add position property to Dialog [\#1203](https://github.com/primefaces/primereact/issues/1203)
+- Add FocusTrap support to Dialog [\#1202](https://github.com/primefaces/primereact/issues/1202)
+- Add sortFunction support to DataTable with multiple column sorting [\#1201](https://github.com/primefaces/primereact/issues/1201)
+- Remove min-width style from Dropdown [\#1196](https://github.com/primefaces/primereact/issues/1196)
+- Add maskClassName property to Dialog [\#1194](https://github.com/primefaces/primereact/issues/1194)
+- ReImplemented Steps styles [\#1191](https://github.com/primefaces/primereact/issues/1191)
+- Leave animation for Dialog [\#1181](https://github.com/primefaces/primereact/issues/1181)
+- Dialog header not visible [\#1174](https://github.com/primefaces/primereact/issues/1174)
+- Dialog is not displayed correctly in mobile view [\#1165](https://github.com/primefaces/primereact/issues/1165)
+- Add sort number feature to sortable columns on DataTable and TreeTable with multi sorting [\#1164](https://github.com/primefaces/primereact/issues/1164)
+- Add onRemove callback to FileUpload [\#1152](https://github.com/primefaces/primereact/issues/1152)
+- Add editing support to the input field on Calendar [\#1141](https://github.com/primefaces/primereact/issues/1141)
+- New Component: Galleria [\#1105](https://github.com/primefaces/primereact/issues/1105)
+
+**Fixed Bugs:**
+
+- Remove the legacy lifecycle method from Lightbox component [\#1200](https://github.com/primefaces/primereact/issues/1200)
+- The disabled items can be focused in the Steps [\#1192](https://github.com/primefaces/primereact/issues/1192)
+- Alignment problem on Growl message without details [\#1190](https://github.com/primefaces/primereact/issues/1190)
+- Maximizable property is not working correctly on dialog [\#1169](https://github.com/primefaces/primereact/issues/1169)
+- Dismissable mask behaves over dialog [\#1167](https://github.com/primefaces/primereact/issues/1167)
+- Typedefinition for DataTable OnFilter is wrong. [\#1163](https://github.com/primefaces/primereact/issues/1163)
+
+## [3.4.0](https://github.com/primefaces/primereact/tree/3.4.0) (2020-01-17)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.3...3.4.0)
+
+**Implemented New Features and Enhancements:**
+
+- Calendar component keyboard support [\#1157](https://github.com/primefaces/primereact/issues/1157)
+- Add expandableRowGroups property to DataTable [\#1148](https://github.com/primefaces/primereact/issues/1148)
+- Add removableSort property to DataTable [\#1142](https://github.com/primefaces/primereact/issues/1142)
+- Enhance Dialog Positioning [\#1138](https://github.com/primefaces/primereact/issues/1138)
+
+**Fixed Bugs:**
+
+- Wrong property name on the propTypes definition of Dropdown [\#1158](https://github.com/primefaces/primereact/issues/1158)
+- When the InputMask is focused, the mask disappears [\#1156](https://github.com/primefaces/primereact/issues/1156)
+- When the buttons inside the components are clicked, they submit the form [\#1155](https://github.com/primefaces/primereact/issues/1155)
+- The icon of the next button has wrong class name on Carousel [\#1154](https://github.com/primefaces/primereact/issues/1154)
+- Some DataView lazy and loading types missing [\#1131](https://github.com/primefaces/primereact/issues/1131)
+- TreeTable default filter value is not showing in the filter widget [\#1129](https://github.com/primefaces/primereact/issues/1129)
+- InputTextarea does not render props like cols and rows [\#1127](https://github.com/primefaces/primereact/issues/1127)
+- PanelMenu Icon does not show for entries without sub children [\#1121](https://github.com/primefaces/primereact/issues/1121)
+- ContextMenu.d.ts has wrong property name [\#1118](https://github.com/primefaces/primereact/issues/1118)
+- Dropdown cannot open the panel after double clicking an option [\#1053](https://github.com/primefaces/primereact/issues/1053)
+- InputMask is not changing the mask at runtime. [\#1021](https://github.com/primefaces/primereact/issues/1021)
+
+## [3.3.3](https://github.com/primefaces/primereact/tree/3.3.3) (2019-11-29)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.2...3.3.3)
+
+**Implemented New Features and Enhancements:**
+
+- Add exportable property to Column [\#1103](https://github.com/primefaces/primereact/issues/1103)
+- Add exportFunction property to DataTable [\#1102](https://github.com/primefaces/primereact/issues/1102)
+- Add repeat functionality to timer buttons on Calendar [\#1101](https://github.com/primefaces/primereact/issues/1101)
+- Add reset method to DataTable [\#1088](https://github.com/primefaces/primereact/issues/1088)
+- onColReorder in Datatable parameter missing [\#1080](https://github.com/primefaces/primereact/issues/1080)
+- Add disabled property to Tree [\#1078](https://github.com/primefaces/primereact/issues/1078)
+- Add selectedItemsLabel property to MultiSelect [\#1075](https://github.com/primefaces/primereact/issues/1075)
+- Add maxSelectedLabels property to MultiSelect [\#1074](https://github.com/primefaces/primereact/issues/1074)
+- Passing of data-\* Attributes as Props [\#1073](https://github.com/primefaces/primereact/issues/1073)
+
+**Fixed Bugs:**
+
+- DomHandler functions throw NPE on components [\#1104](https://github.com/primefaces/primereact/issues/1104)
+- Growl messages from "bottom\*" is not displaying as expected [\#1095](https://github.com/primefaces/primereact/issues/1095)
+- Properties of TreeNodes on TreeTable not Working [\#1085](https://github.com/primefaces/primereact/issues/1085)
+- className property of Message component not working [\#1076](https://github.com/primefaces/primereact/issues/1076)
+- Tree className property not working [\#1068](https://github.com/primefaces/primereact/issues/1068)
+- Sidebar dismissable is only updating whenever the visible prop updates [\#1065](https://github.com/primefaces/primereact/issues/1065)
+- selectDate\(\) set date to undefined when minDate is set and selected date is \<= minDate [\#1056](https://github.com/primefaces/primereact/issues/1056)
+- Datatable multisort broken [\#617](https://github.com/primefaces/primereact/issues/617)
+
+## [3.3.2](https://github.com/primefaces/primereact/tree/3.3.2) (2019-10-22)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.1...3.3.2)
+
+**Fixed Bugs:**
+
+- Table state is not working with columnResizeMode="expand" on DataTable [\#1061](https://github.com/primefaces/primereact/issues/1061)
+- Calendar component throws NPE after updating the value [\#1060](https://github.com/primefaces/primereact/issues/1060)
+
+## [3.3.1](https://github.com/primefaces/primereact/tree/3.3.1) (2019-10-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.3.0...3.3.1)
+
+**Implemented New Features and Enhancements:**
+
+- Improve component styles on Luna, Nova and Rhea Themes [\#1052](https://github.com/primefaces/primereact/issues/1052)
+- Improve Carousel styles [\#1051](https://github.com/primefaces/primereact/issues/1051)
+
+**Fixed Bugs:**
+
+- Carousel is not working with 'primereact/carousel' shortcut [\#1049](https://github.com/primefaces/primereact/issues/1049)
+
+## [3.3.0](https://github.com/primefaces/primereact/tree/3.3.0) (2019-10-16)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.2.0...3.3.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add closeOnEscape property to Sidebar [\#1046](https://github.com/primefaces/primereact/issues/1046)
+- InputTextarea: Floating Label [\#1040](https://github.com/primefaces/primereact/issues/1040)
+- Upgrade QuillJS 1.3.7 [\#1037](https://github.com/primefaces/primereact/issues/1037)
+- Add filterInputAutoFocus property to Dropdown [\#1036](https://github.com/primefaces/primereact/issues/1036)
+- New Component: Carousel [\#1030](https://github.com/primefaces/primereact/issues/1030)
+- Add className support to SelectButtonItems [\#1019](https://github.com/primefaces/primereact/issues/1019)
+
+**Fixed Bugs:**
+
+- AutoComplete mode multiple ignores maxlength property [\#1045](https://github.com/primefaces/primereact/issues/1045)
+- The datatable is broken with scrollable and no columns settings [\#1044](https://github.com/primefaces/primereact/issues/1044)
+- Calendar Overlay doesnt open with current date after value update [\#999](https://github.com/primefaces/primereact/issues/999)
+
+## [3.2.0](https://github.com/primefaces/primereact/tree/3.2.0) (2019-09-12)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.9...3.2.0)
+
+**Implemented New Features and Enhancements:**
+
+- Add type property to AutoComplete [\#1010](https://github.com/primefaces/primereact/issues/1010)
+- Add customUpload property to FileUpload [\#1008](https://github.com/primefaces/primereact/issues/1008)
+- Improve columns' editor option on editing mode [\#1007](https://github.com/primefaces/primereact/issues/1007)
+- Add keyboard support to DataTable with Checkbox selection [\#1005](https://github.com/primefaces/primereact/issues/1005)
+- Add row edit support to DataTable [\#809](https://github.com/primefaces/primereact/issues/809)
+
+**Fixed Bugs:**
+
+- DataTable with global filter and header checkbox selection select all records [\#1012](https://github.com/primefaces/primereact/issues/1012)
+- DataTable column headers not displaying in nested table [\#1009](https://github.com/primefaces/primereact/issues/1009)
+- DataTable has null state under certain conditions [\#1003](https://github.com/primefaces/primereact/issues/1003)
+- Value doesnt change on Input mask when unmask is enabled [\#998](https://github.com/primefaces/primereact/issues/998)
+
+## [3.1.9](https://github.com/primefaces/primereact/tree/3.1.9) (2019-08-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.8...3.1.9)
+
+**Implemented New Features and Enhancements:**
+
+- Datatable EditRow [\#935](https://github.com/primefaces/primereact/issues/935)
+- Add className option to Tooltip [\#994](https://github.com/primefaces/primereact/issues/994)
+- Add focusOnShow property to Dialog [\#988](https://github.com/primefaces/primereact/issues/988)
+- Add displayValueTemplate property to ProgressBar [\#978](https://github.com/primefaces/primereact/issues/978)
+- Add tabIndex prop to Spinner [\#976](https://github.com/primefaces/primereact/issues/976)
+- Add tabIndex prop to RadioButton [\#975](https://github.com/primefaces/primereact/issues/975)
+
+**Fixed Bugs:**
+
+- Wrong typings for the property of Spinner [\#1001](https://github.com/primefaces/primereact/issues/1001)
+- Export hide\(\) for ContextMenu in type definition file [\#1000](https://github.com/primefaces/primereact/issues/1000)
+- Style props doesnt update after re-rendering with Inputmask [\#996](https://github.com/primefaces/primereact/issues/996)
+- Nested originalEvent in DataTable header RowCheckbox event [\#986](https://github.com/primefaces/primereact/issues/986)
+- Typings missing in DataTable: resetColumnOrder [\#980](https://github.com/primefaces/primereact/issues/980)
+- ProgressBar does not show value for 0% [\#973](https://github.com/primefaces/primereact/issues/973)
+- Tooltips appear with old contents after being undefined [\#972](https://github.com/primefaces/primereact/issues/972)
+
+## [3.1.8](https://github.com/primefaces/primereact/tree/3.1.8) (2019-07-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.7...3.1.8)
+
+**Implemented New Features and Enhancements:**
+
+- Resizable columns support with column groups [\#518](https://github.com/primefaces/primereact/issues/518)
+- Update to PrimeIcons 2.0.0 [\#970](https://github.com/primefaces/primereact/issues/970)
+- Datatable rowGroup with rowSpan mode: row separator line style on group break [\#967](https://github.com/primefaces/primereact/issues/967)
+- Growl detail should be placed in \<div\> not \<p\> [\#965](https://github.com/primefaces/primereact/issues/965)
+- Add autoFocus attribute to Autocomplete [\#963](https://github.com/primefaces/primereact/issues/963)
+- Add onTargetSelect and onSourceSelect props to Picklist [\#962](https://github.com/primefaces/primereact/issues/962)
+- Add tabIndex prop to ToggleButton [\#957](https://github.com/primefaces/primereact/issues/957)
+- Add required prop to RadioButton [\#953](https://github.com/primefaces/primereact/issues/953)
+- Add required prop to Checkbox [\#952](https://github.com/primefaces/primereact/issues/952)
+- Add shift key selection support to DataTable with multiple mode [\#934](https://github.com/primefaces/primereact/issues/934)
+
+**Fixed Bugs:**
+
+- Calendar ButtonBar Clear button does not use clearButtonStyleClass prop [\#968](https://github.com/primefaces/primereact/issues/968)
+- Datatable rowGroup with rowSpan mode and pagination fails on page break [\#961](https://github.com/primefaces/primereact/issues/961)
+- DataTable fails to render if columns are mapped and has a static column [\#959](https://github.com/primefaces/primereact/issues/959)
+- Month View shows a redundant week on the calendar [\#956](https://github.com/primefaces/primereact/issues/956)
+- Simple DataScroller does not display items. [\#955](https://github.com/primefaces/primereact/issues/955)
+- The DataTable will sort a column when shrinking it on resize [\#944](https://github.com/primefaces/primereact/issues/944)
+
+## [3.1.7](https://github.com/primefaces/primereact/tree/3.1.7) (2019-06-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.6...3.1.7)
+
+**Fixed Bugs:**
+
+- Charts always redraw when they are updated [\#946](https://github.com/primefaces/primereact/issues/946)
+
+## [3.1.6](https://github.com/primefaces/primereact/tree/3.1.6) (2019-06-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.5...3.1.6)
+
+**Fixed Bugs:**
+
+- The ChartJs API is not imported correctly [\#945](https://github.com/primefaces/primereact/issues/945)
+- Inplace is not working with 'primereact/inplace' shortcut [\#943](https://github.com/primefaces/primereact/issues/943)
+
+## [3.1.5](https://github.com/primefaces/primereact/tree/3.1.5) (2019-06-24)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.4...3.1.5)
+
+**Implemented New Features and Enhancements:**
+
+- Add theme prop to Editor [\#938](https://github.com/primefaces/primereact/issues/938)
+- Add "replace" method in Messages component [\#930](https://github.com/primefaces/primereact/issues/930)
+- Add decimalSeparator and thousandSeparator props to Spinner [\#925](https://github.com/primefaces/primereact/issues/925)
+- Add formatInput prop to Spinner [\#924](https://github.com/primefaces/primereact/issues/924)
+- Add required, pattern and placeholder props to Spinner. [\#920](https://github.com/primefaces/primereact/issues/920)
+- Add ariaCloseIconLabel prop to Dialog [\#916](https://github.com/primefaces/primereact/issues/916)
+
+**Fixed Bugs:**
+
+- When components are placed placed inside a label element clicking on the component fires the click event twice [\#940](https://github.com/primefaces/primereact/issues/940)
+- The hide method of Dropdown throws an exception on console [\#937](https://github.com/primefaces/primereact/issues/937)
+- The "required" prop is not working on Dropdown [\#933](https://github.com/primefaces/primereact/issues/933)
+- Tooltip in chips does not work properly [\#932](https://github.com/primefaces/primereact/issues/932)
+- Empty array crashes Messages component [\#928](https://github.com/primefaces/primereact/issues/928)
+- The 'showWeek' prop throws an error with TypedScript on Calendar [\#926](https://github.com/primefaces/primereact/issues/926)
+- Close icon is still active on the disabled Chips [\#918](https://github.com/primefaces/primereact/issues/918)
+- onRemove event does not exists on Growl component [\#914](https://github.com/primefaces/primereact/issues/914)
+- Can't resolve 'chart.js/src/chart.js' [\#913](https://github.com/primefaces/primereact/issues/913)
+- Second Sidebar reset blockScroll [\#910](https://github.com/primefaces/primereact/issues/910)
+- ProgressSpinner not visible in IE11 [\#908](https://github.com/primefaces/primereact/issues/908)
+- Wrong type for showWeek in Calendar.d.ts [\#907](https://github.com/primefaces/primereact/issues/907)
+
+## [3.1.4](https://github.com/primefaces/primereact/tree/3.1.4) (2019-05-30)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.3...3.1.4)
+
+**Implemented New Features and Enhancements:**
+
+- Add iconsTemplate to Dialog [\#905](https://github.com/primefaces/primereact/issues/905)
+- Modules property for Editor [\#904](https://github.com/primefaces/primereact/issues/904)
+- The ability to reset columnOrder in DataTable [\#899](https://github.com/primefaces/primereact/issues/899)
+- onFocus and onBlur for Chips [\#897](https://github.com/primefaces/primereact/issues/897)
+- Show week numbers for Calendar [\#894](https://github.com/primefaces/primereact/issues/894)
+- CellEditor should have onSubmit and onCancel method. [\#891](https://github.com/primefaces/primereact/issues/891)
+- Add expandIcon and collapseIcon props to Panel component [\#888](https://github.com/primefaces/primereact/issues/888)
+- Support for disabling dropdown item\(s\). [\#874](https://github.com/primefaces/primereact/issues/874)
+- Editable Dropdown should support maxLength [\#844](https://github.com/primefaces/primereact/issues/844)
+
+**Fixed Bugs:**
+
+- Not able to set focus on Dropdown component [\#903](https://github.com/primefaces/primereact/issues/903)
+- Calendar time parsing broken for showSeconds == false [\#901](https://github.com/primefaces/primereact/issues/901)
+- DataTable sortFunction Typescript definition wrong [\#898](https://github.com/primefaces/primereact/issues/898)
+- Data\*: alwaysShowPaginator prop not used [\#896](https://github.com/primefaces/primereact/issues/896)
+- DataTable expanded rows collapse when modifying one property of a record [\#884](https://github.com/primefaces/primereact/issues/884)
+- The scroll bar is not moving correctly on the DataTable with resizeMode="expand" [\#881](https://github.com/primefaces/primereact/issues/881)
+- Dropdown showClear not always displayed [\#875](https://github.com/primefaces/primereact/issues/875)
+- Unlogical editor navigation with shift+tab in DataTable [\#843](https://github.com/primefaces/primereact/issues/843)
+- Cannot read property 'show' of undefined at FileUpload.validate [\#802](https://github.com/primefaces/primereact/issues/802)
+- DataTable onValueChange callback one key press behind when using custom InputText filter [\#777](https://github.com/primefaces/primereact/issues/777)
+
+## [3.1.3](https://github.com/primefaces/primereact/tree/3.1.3) (2019-05-06)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.2...3.1.3)
+
+**Implemented New Features and Enhancements:**
+
+- Multiple target support to OverlayPanel [\#873](https://github.com/primefaces/primereact/issues/873)
+- Improve outside click on OverlayPanel [\#872](https://github.com/primefaces/primereact/issues/872)
+- Calendar panel is not aligned correctly on window resize [\#870](https://github.com/primefaces/primereact/issues/870)
+- Improve outside click on Calendar [\#869](https://github.com/primefaces/primereact/issues/869)
+- The min/max date support is added to Calendar for monthNavigation and yearNavigation [\#859](https://github.com/primefaces/primereact/issues/859)
+- Add ariaLabel and ariaLabelledBy properties to DropDown [\#855](https://github.com/primefaces/primereact/issues/855)
+- Add contentStyle and contentClassName props to Tree [\#842](https://github.com/primefaces/primereact/issues/842)
+
+**Fixed Bugs:**
+
+- OverlayPanel's icon is in the wrong position after window is resized [\#871](https://github.com/primefaces/primereact/issues/871)
+- Flipped OverlayPanel rendered behind browser [\#868](https://github.com/primefaces/primereact/issues/868)
+- Missing method typings for OverlayPanel [\#865](https://github.com/primefaces/primereact/issues/865)
+- Calendar used in DataTable is unable to switch months [\#860](https://github.com/primefaces/primereact/issues/860)
+- Calendar view="month" does not allow typing [\#856](https://github.com/primefaces/primereact/issues/856)
+- OnHide callback is not called when visibility property is changed [\#854](https://github.com/primefaces/primereact/issues/854)
+- Add stateStorage property to DataTable.d.ts [\#851](https://github.com/primefaces/primereact/issues/851)
+- The tableStyle and tableClassName props have no effect on Scrollable DataTable [\#849](https://github.com/primefaces/primereact/issues/849)
+- Calendar is rendering behind the browser window. [\#840](https://github.com/primefaces/primereact/issues/840)
+- onRowSelect called instead of onRowUnselect [\#835](https://github.com/primefaces/primereact/issues/835)
+- Chart doesn't reload when new data is added to it [\#834](https://github.com/primefaces/primereact/issues/834)
+- Datatable scrollHeight can't be changed [\#662](https://github.com/primefaces/primereact/issues/662)
+
+## [3.1.2](https://github.com/primefaces/primereact/tree/3.1.2) (2019-04-03)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.1...3.1.2)
+
+**Fixed Bugs:**
+
+- DataTable selection with uncontrolled sorting broken [\#830](https://github.com/primefaces/primereact/issues/830)
+
+## [3.1.1](https://github.com/primefaces/primereact/tree/3.1.1) (2019-03-31)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.1.0...3.1.1)
+
+**Implemented New Features and Enhancements:**
+
+- Improve disabled header style on Accordion [\#828](https://github.com/primefaces/primereact/issues/828)
+- Update to FullCalendar 4.0.1 [\#827](https://github.com/primefaces/primereact/issues/827)
+- Remove autoWidth from Dropdown [\#826](https://github.com/primefaces/primereact/issues/826)
+- Improve DataTable VirtualScrolling [\#825](https://github.com/primefaces/primereact/issues/825)
+- Update dialog animations [\#823](https://github.com/primefaces/primereact/issues/823)
+- Close datatable cell editor programmatically [\#822](https://github.com/primefaces/primereact/issues/822)
+- DataTable row selection slow with sortable columns [\#813](https://github.com/primefaces/primereact/issues/813)
+- Add onBlur and onFocus events to multiselect and chips [\#782](https://github.com/primefaces/primereact/issues/782)
+
+**Fixed Bugs:**
+
+- On Accordion, the disabled head can be focused on [\#829](https://github.com/primefaces/primereact/issues/829)
+- Datatable property 'stateKey' is missing in types file [\#817](https://github.com/primefaces/primereact/issues/817)
+- Datatable row onClick typescript definition does not match the function or documentation [\#815](https://github.com/primefaces/primereact/issues/815)
+- Overlays wrong position on initial/first render [\#814](https://github.com/primefaces/primereact/issues/814)
+- Chart with latest chart.js does not build [\#812](https://github.com/primefaces/primereact/issues/812)
+- FileUpload thows JS exception in Edge [\#808](https://github.com/primefaces/primereact/issues/808)
+- SlideMenu empty after model change [\#807](https://github.com/primefaces/primereact/issues/807)
+- Dropdown duplicated IDs [\#805](https://github.com/primefaces/primereact/issues/805)
+- DataTable crashes with a "Cannot read property 'xxx' of undefined" for nested objects [\#791](https://github.com/primefaces/primereact/issues/791)
+- Syntax error in optional typescript function interface [\#790](https://github.com/primefaces/primereact/issues/790)
+- Using "maxlength" of Spinner causes errors [\#787](https://github.com/primefaces/primereact/issues/787)
+- "propTypes" incorrectly named as "propsTypes" [\#784](https://github.com/primefaces/primereact/issues/784)
+- Changes to prop does not render ProgressBar [\#783](https://github.com/primefaces/primereact/issues/783)
+- Dropdown - TypeError: Cannot read property 'element' of null [\#781](https://github.com/primefaces/primereact/issues/781)
+- propTypes error using new iconsTemplate [\#780](https://github.com/primefaces/primereact/issues/780)
+- Datatable does not scroll horizontally when there is no data [\#635](https://github.com/primefaces/primereact/issues/635)
+
+## [3.1.0](https://github.com/primefaces/primereact/tree/3.1.0) (2019-02-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.0.0...3.1.0)
+
+**Implemented New Features and Enhancements:**
+
+- Filtering for Tree [\#769](https://github.com/primefaces/primereact/issues/769)
+- onClose event for OverlayPanel [\#763](https://github.com/primefaces/primereact/issues/763)
+- Arrow for OverlayPanel [\#762](https://github.com/primefaces/primereact/issues/762)
+- Improve style of p-link component [\#760](https://github.com/primefaces/primereact/issues/760)
+- TableState for DataTable [\#736](https://github.com/primefaces/primereact/issues/736)
+- Filtering for TreeTable [\#380](https://github.com/primefaces/primereact/issues/380)
+
+**Fixed Bugs:**
+
+- Datatable toggle issue after reordering [\#774](https://github.com/primefaces/primereact/issues/774)
+- Inputtextarea autoresize invalid height issue after render [\#773](https://github.com/primefaces/primereact/issues/773)
+- TreeTableBodyCell.js: Uncaught TypeError: Cannot read property 'removeAttribute' of null [\#772](https://github.com/primefaces/primereact/issues/772)
+- Dropdown with dataKey attribute throws console errors. [\#768](https://github.com/primefaces/primereact/issues/768)
+- Multiple selection in a table without data is selected by default [\#766](https://github.com/primefaces/primereact/issues/766)
+- InputGroup border issue for using with other components [\#761](https://github.com/primefaces/primereact/issues/761)
+- code debugger in production mode "component input calendar" [\#751](https://github.com/primefaces/primereact/issues/751)
+
+## [3.0.0](https://github.com/primefaces/primereact/tree/3.0.0) (2019-01-22)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.0.0-rc.1...3.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Customizable editorValidatorEvent for IncellEditing [\#746](https://github.com/primefaces/primereact/issues/746)
+
+**Fixed Bugs:**
+
+- Spinner arrow keys not working [\#743](https://github.com/primefaces/primereact/issues/743)
+- Toolbar of Editor Component with nova-dark theme does not render properly. [\#740](https://github.com/primefaces/primereact/issues/740)
+- Paginator - Uncaught TypeError: this.getOptionLabel\(...\).toLowerCase is not a function [\#739](https://github.com/primefaces/primereact/issues/739)
+
+## [3.0.0-rc.1](https://github.com/primefaces/primereact/tree/3.0.0-rc.1) (2019-01-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/3.0.0-beta.1...3.0.0-rc.1)
+
+**Implemented New Features and Enhancements:**
+
+- Rename defaultLabel to placeholder in MultiSelect [\#733](https://github.com/primefaces/primereact/issues/733)
+- Enhance accessibility for Checkbox with ARIA roles [\#729](https://github.com/primefaces/primereact/issues/729)
+- Ability to use dataKey as the key in Dropdown [\#727](https://github.com/primefaces/primereact/issues/727)
+- Focused editable Dropdown looks different than non-editable [\#725](https://github.com/primefaces/primereact/issues/725)
+- Header and Footer templates for Calendar component [\#706](https://github.com/primefaces/primereact/issues/706)
+- MultiSelect - Support a fixed defaultLabel [\#674](https://github.com/primefaces/primereact/issues/674)
+
+**Fixed Bugs:**
+
+- InputSwitch focus visuals are missing [\#735](https://github.com/primefaces/primereact/issues/735)
+- DataTable edit throws error on route change [\#734](https://github.com/primefaces/primereact/issues/734)
+- Incorrect column sortable prop type definition [\#730](https://github.com/primefaces/primereact/issues/730)
+- ScrollPanel: Cannot read property 'classList' of null [\#726](https://github.com/primefaces/primereact/issues/726)
+- Editor component cannot refresh it's value when the state change [\#724](https://github.com/primefaces/primereact/issues/724)
+- Editor active item is not highlighted in toolbar [\#722](https://github.com/primefaces/primereact/issues/722)
+- InputMask doesn't update the value according to state [\#686](https://github.com/primefaces/primereact/issues/686)
+- DataTable: hide column after reordering columns throws exception [\#668](https://github.com/primefaces/primereact/issues/668)
+- Form validity is true, even though no Dropdown selection has been made. [\#665](https://github.com/primefaces/primereact/issues/665)
+
+## [3.0.0-beta.1](https://github.com/primefaces/primereact/tree/3.0.0-beta.1) (2018-12-24)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.1...3.0.0-beta.1)
+
+**Implemented New Features and Enhancements:**
+
+- Reimplement Menubar [\#721](https://github.com/primefaces/primereact/issues/721)
+- Reimplement TieredMenu [\#720](https://github.com/primefaces/primereact/issues/720)
+- Keyboard Accessibility for Menu [\#719](https://github.com/primefaces/primereact/issues/719)
+- Reimplement PanelMenu Animation with CSSTransition [\#718](https://github.com/primefaces/primereact/issues/718)
+- Remove certain props from Dialog [\#717](https://github.com/primefaces/primereact/issues/717)
+- Reimplement Dialog Positioning [\#715](https://github.com/primefaces/primereact/issues/715)
+- Reimplement Accordion Animation with CSSTransition [\#714](https://github.com/primefaces/primereact/issues/714)
+- Reimplement Fieldset Animation with CSSTransition [\#712](https://github.com/primefaces/primereact/issues/712)
+- Enhance Dialog Animation [\#711](https://github.com/primefaces/primereact/issues/711)
+- Reimplement Panel Animation with CSSTransition [\#710](https://github.com/primefaces/primereact/issues/710)
+- Unify focus visuals in themes [\#709](https://github.com/primefaces/primereact/issues/709)
+- Keyboard Accessibility for PanelMenu [\#703](https://github.com/primefaces/primereact/issues/703)
+- Keyboard Accessibility for MegaMenu [\#702](https://github.com/primefaces/primereact/issues/702)
+- Keyboard Accessibility for Menubar [\#701](https://github.com/primefaces/primereact/issues/701)
+- Keyboard Accessibility for TieredMenu [\#700](https://github.com/primefaces/primereact/issues/700)
+- Improve Lightbox [\#699](https://github.com/primefaces/primereact/issues/699)
+- Keyboard Accessibility for Inplace [\#698](https://github.com/primefaces/primereact/issues/698)
+- Keyboard accessibility for PickList [\#697](https://github.com/primefaces/primereact/issues/697)
+- Keyboard Accessibility for OrderList [\#696](https://github.com/primefaces/primereact/issues/696)
+- Keyboard Accessibility for InputSwitch [\#695](https://github.com/primefaces/primereact/issues/695)
+- DataTable/TreeTable sort headers should be keyboard accessible [\#693](https://github.com/primefaces/primereact/issues/693)
+- Sidebar close icon should receive focus on open [\#692](https://github.com/primefaces/primereact/issues/692)
+- Keyboard Accessibility for MultiSelect [\#691](https://github.com/primefaces/primereact/issues/691)
+- Improve Listbox Accessibility [\#690](https://github.com/primefaces/primereact/issues/690)
+- Improve ToggleButton Accessibility [\#689](https://github.com/primefaces/primereact/issues/689)
+- Improve SelectButton Accessibility [\#687](https://github.com/primefaces/primereact/issues/687)
+- Keyboard navigation support for Showcsse [\#684](https://github.com/primefaces/primereact/issues/684)
+- Replace anchors without href with buttons [\#683](https://github.com/primefaces/primereact/issues/683)
+- Update to Babel 7 [\#682](https://github.com/primefaces/primereact/issues/682)
+- Improve Radio/Checkbox Accessibility [\#681](https://github.com/primefaces/primereact/issues/681)
+
+**Fixed Bugs:**
+
+- AutoComplete in multiple mode does not receive focus [\#713](https://github.com/primefaces/primereact/issues/713)
+- OrderList droppoints are not highlighted [\#708](https://github.com/primefaces/primereact/issues/708)
+- TreeTable Pagination Error [\#685](https://github.com/primefaces/primereact/issues/685)
+- Problem TextArea component "Disabled" [\#679](https://github.com/primefaces/primereact/issues/679)
+- Datatable horizontal scroll trigger onVirtualScroll [\#677](https://github.com/primefaces/primereact/issues/677)
+- Spinner does not show the value 0 [\#675](https://github.com/primefaces/primereact/issues/675)
+- KeyFilter uses static instance of the regex [\#672](https://github.com/primefaces/primereact/issues/672)
+- slider.d.ts has wrong import syntax [\#671](https://github.com/primefaces/primereact/issues/671)
+
+## [2.0.1](https://github.com/primefaces/primereact/tree/2.0.1) (2018-12-06)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0...2.0.1)
+
+**Fixed Bugs:**
+
+- Align SplitButton Overlay with other overlays [\#667](https://github.com/primefaces/primereact/issues/667)
+- Standalone paginator causes replace is undefined error [\#666](https://github.com/primefaces/primereact/issues/666)
+- onRowCollapse doesn't work on expanded row [\#664](https://github.com/primefaces/primereact/issues/664)
+
+## [2.0.0](https://github.com/primefaces/primereact/tree/2.0.0) (2018-12-05)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-rc.1...2.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- More paginator options to DataView [\#657](https://github.com/primefaces/primereact/issues/657)
+- Filtered Dropdown does not close after pressing Enter [\#649](https://github.com/primefaces/primereact/issues/649)
+- Ability to get filtered and/or sorted data in DataTable [\#643](https://github.com/primefaces/primereact/issues/643)
+- Add modal prop to Sidebar [\#639](https://github.com/primefaces/primereact/issues/639)
+- Add currentPageReportTemplate property to Paginator [\#636](https://github.com/primefaces/primereact/issues/636)
+- ProgressBar avoidable re-renders [\#597](https://github.com/primefaces/primereact/issues/597)
+- Feature request: Allow us to choose a different optionLabel to display selected items in MultiSelect [\#451](https://github.com/primefaces/primereact/issues/451)
+
+**Fixed Bugs:**
+
+- Today cell is not highlighed in Calendar when selected [\#660](https://github.com/primefaces/primereact/issues/660)
+- Header checkbox fails with filtering [\#659](https://github.com/primefaces/primereact/issues/659)
+- Data Table resize: disable rightmost border [\#656](https://github.com/primefaces/primereact/issues/656)
+- DataTable Column sortField is ignored [\#653](https://github.com/primefaces/primereact/issues/653)
+- TreeTable: propagateSelectionUp Defect [\#650](https://github.com/primefaces/primereact/issues/650)
+- cannot read property 'dayNamesShort' of undefined [\#647](https://github.com/primefaces/primereact/issues/647)
+- this.props.onSelectionChange is not a function in DataTable [\#641](https://github.com/primefaces/primereact/issues/641)
+- viewDate.getMonth\(\) is not a function [\#612](https://github.com/primefaces/primereact/issues/612)
+
+## [2.0.0-rc.1](https://github.com/primefaces/primereact/tree/2.0.0-rc.1) (2018-11-12)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.9...2.0.0-rc.1)
+
+**Implemented New Features and Enhancements:**
+
+- Dialog default prop values [\#638](https://github.com/primefaces/primereact/issues/638)
+- Reimplement InputTextarea Resize [\#629](https://github.com/primefaces/primereact/issues/629)
+- Remove Schedule [\#628](https://github.com/primefaces/primereact/issues/628)
+- Replace event.data with event.value at onSelectionChange of DataTable [\#626](https://github.com/primefaces/primereact/issues/626)
+- Reimplement ContextMenu Selection of DataTable [\#625](https://github.com/primefaces/primereact/issues/625)
+- Enter key should select a Tree node [\#624](https://github.com/primefaces/primereact/issues/624)
+- Remove defaultExpanded from TreeNode [\#623](https://github.com/primefaces/primereact/issues/623)
+- renderActiveOnly prop for Tabs [\#618](https://github.com/primefaces/primereact/issues/618)
+- virtualRowHeight attribute in Table component [\#616](https://github.com/primefaces/primereact/issues/616)
+- Remove defaultExpanded from TreeNode API [\#606](https://github.com/primefaces/primereact/issues/606)
+- Keyboard Support for Table Row Selection [\#605](https://github.com/primefaces/primereact/issues/605)
+- Select a tree node with enter key [\#604](https://github.com/primefaces/primereact/issues/604)
+- Improve button focus visuals on Nova and Luna [\#602](https://github.com/primefaces/primereact/issues/602)
+
+**Fixed Bugs:**
+
+- Dropdown throws error on hide [\#631](https://github.com/primefaces/primereact/issues/631)
+- AccordionTab title with custom HTML gives error [\#615](https://github.com/primefaces/primereact/issues/615)
+- Datatable autoLayout not working [\#599](https://github.com/primefaces/primereact/issues/599)
+- Tooltips not updating [\#598](https://github.com/primefaces/primereact/issues/598)
+- Dialog z-index [\#596](https://github.com/primefaces/primereact/issues/596)
+
+## [2.0.0-beta.9](https://github.com/primefaces/primereact/tree/2.0.0-beta.9) (2018-10-08)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.8...2.0.0-beta.9)
+
+**Implemented New Features and Enhancements:**
+
+- Reimplement Slider [\#592](https://github.com/primefaces/primereact/issues/592)
+- New Component: DeferredContent [\#591](https://github.com/primefaces/primereact/issues/591)
+
+**Fixed Bugs:**
+
+- Add disabled property to Slider [\#593](https://github.com/primefaces/primereact/issues/593)
+- Floating label for TextInput with number value fails [\#588](https://github.com/primefaces/primereact/issues/588)
+- Sidebar component not working when visible by default [\#587](https://github.com/primefaces/primereact/issues/587)
+- Presence of step prop will slow down reactivity of the Slider component [\#586](https://github.com/primefaces/primereact/issues/586)
+
+## [2.0.0-beta.8](https://github.com/primefaces/primereact/tree/2.0.0-beta.8) (2018-09-24)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.7...2.0.0-beta.8)
+
+**Implemented New Features and Enhancements:**
+
+- PrimeReact input events are not compatible with React forms libraries [\#537](https://github.com/primefaces/primereact/issues/537)
+- Aria roles and attributes for Tree [\#580](https://github.com/primefaces/primereact/issues/580)
+- New Luna Free Dark Theme Family [\#579](https://github.com/primefaces/primereact/issues/579)
+- Keyboard navigation for Tree [\#578](https://github.com/primefaces/primereact/issues/578)
+- Enhanced keyboard search for dropdown [\#577](https://github.com/primefaces/primereact/issues/577)
+
+**Fixed Bugs:**
+
+- DataTable sort issue with sortIcon [\#585](https://github.com/primefaces/primereact/issues/585)
+- AutoComplete does not update input when value prop changes [\#576](https://github.com/primefaces/primereact/issues/576)
+- Typos in Tree.d.ts [\#573](https://github.com/primefaces/primereact/issues/573)
+
+## [2.0.0-beta.7](https://github.com/primefaces/primereact/tree/2.0.0-beta.7) (2018-09-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.6...2.0.0-beta.7)
+
+**Fixed Bugs:**
+
+- Uncontrolled input text does not support floating labels [\#572](https://github.com/primefaces/primereact/issues/572)
+- VirtualScroll is broken [\#560](https://github.com/primefaces/primereact/issues/560)
+
+## [2.0.0-beta.6](https://github.com/primefaces/primereact/tree/2.0.0-beta.6) (2018-09-17)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.5...2.0.0-beta.6)
+
+**Fixed Bugs:**
+
+- Dialog mask has no index at initial display [\#571](https://github.com/primefaces/primereact/issues/571)
+- New Tree component: duplicate key error when 2 TreeNodes has same label [\#570](https://github.com/primefaces/primereact/issues/570)
+
+## [2.0.0-beta.5](https://github.com/primefaces/primereact/tree/2.0.0-beta.5) (2018-09-11)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.4...2.0.0-beta.5)
+
+**Fixed Bugs:**
+
+- Calendar warning with omission of onChange from InputText [\#569](https://github.com/primefaces/primereact/issues/569)
+
+## [2.0.0-beta.4](https://github.com/primefaces/primereact/tree/2.0.0-beta.4) (2018-09-11)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.3...2.0.0-beta.4)
+
+**Implemented New Features and Enhancements:**
+
+- Keyboard support for Dialog Icons [\#568](https://github.com/primefaces/primereact/issues/568)
+- Pass column props to columnResizeEnd [\#564](https://github.com/primefaces/primereact/issues/564)
+- New Tree Component [\#559](https://github.com/primefaces/primereact/issues/559)
+- Integrate PrimeFlex Grid System [\#556](https://github.com/primefaces/primereact/issues/556)
+- className parameter unsupported by Spinner component [\#548](https://github.com/primefaces/primereact/issues/548)
+
+**Fixed Bugs:**
+
+- Dialog resize fails [\#567](https://github.com/primefaces/primereact/issues/567)
+- Dialog resizer css is broken [\#566](https://github.com/primefaces/primereact/issues/566)
+- OverlayPanel has no shadow [\#558](https://github.com/primefaces/primereact/issues/558)
+- Border radius missing in panel components [\#557](https://github.com/primefaces/primereact/issues/557)
+- Spinner does not recognize outside changes for value prop [\#555](https://github.com/primefaces/primereact/issues/555)
+- DataTable in IE: TypeError: Object expected [\#554](https://github.com/primefaces/primereact/issues/554)
+- DataTable's onRowUnselect causes exception [\#552](https://github.com/primefaces/primereact/issues/552)
+- Optimize functionality of filtered dropdowns [\#551](https://github.com/primefaces/primereact/issues/551)
+- Dialog blockScroll is undocumented [\#550](https://github.com/primefaces/primereact/issues/550)
+- Body text is selected during Dialog drag [\#549](https://github.com/primefaces/primereact/issues/549)
+- ui-float-label does not work properly for AutoComplete [\#517](https://github.com/primefaces/primereact/issues/517)
+- Float-label does not work properly for InputMask [\#516](https://github.com/primefaces/primereact/issues/516)
+
+## [2.0.0-beta.3](https://github.com/primefaces/primereact/tree/2.0.0-beta.3) (2018-08-26)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.2...2.0.0-beta.3)
+
+## [2.0.0-beta.2](https://github.com/primefaces/primereact/tree/2.0.0-beta.2) (2018-08-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-beta.1...2.0.0-beta.2)
+
+**Implemented New Features and Enhancements:**
+
+- Reimplement Tooltip [\#547](https://github.com/primefaces/primereact/issues/547)
+- Keyboard support for toggle button [\#545](https://github.com/primefaces/primereact/issues/545)
+- Remove font-awesome from Demos [\#544](https://github.com/primefaces/primereact/issues/544)
+- Remove DataGrid and DataList [\#543](https://github.com/primefaces/primereact/issues/543)
+- New styling engine [\#539](https://github.com/primefaces/primereact/issues/539)
+- Property appendTo in menus [\#535](https://github.com/primefaces/primereact/issues/535)
+- Deprecate Free Themes in favor of Nova Free Theme Family [\#527](https://github.com/primefaces/primereact/issues/527)
+
+**Fixed Bugs:**
+
+- Tooltip does not remove event listeners [\#542](https://github.com/primefaces/primereact/issues/542)
+- Accordion does not work with multiple controlled tabs [\#540](https://github.com/primefaces/primereact/issues/540)
+- Menubar import is not working [\#531](https://github.com/primefaces/primereact/issues/531)
+- ColumnGroup can't be imported [\#530](https://github.com/primefaces/primereact/issues/530)
+- InputTextProps not type correctly [\#529](https://github.com/primefaces/primereact/issues/529)
+- originalEvent in TabView has swapped typing/variable name in TabView.d.ts [\#528](https://github.com/primefaces/primereact/issues/528)
+- Calendar manual input doesn't work with time [\#526](https://github.com/primefaces/primereact/issues/526)
+- Breadcrumb component throws warning [\#522](https://github.com/primefaces/primereact/issues/522)
+
+## [2.0.0-beta.1](https://github.com/primefaces/primereact/tree/2.0.0-beta.1) (2018-07-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2.0.0-alpha.1...2.0.0-beta.1)
+
+**Implemented New Features and Enhancements:**
+
+- Improve input overlay animations [\#514](https://github.com/primefaces/primereact/issues/514)
+- Reimplement InputSwitch UI [\#513](https://github.com/primefaces/primereact/issues/513)
+- Common Props for AutoComplete and Spinner [\#512](https://github.com/primefaces/primereact/issues/512)
+- Reimplement Calendar [\#504](https://github.com/primefaces/primereact/issues/504)
+- Update Schedule component to remove jQuery [\#476](https://github.com/primefaces/primereact/issues/476)
+
+**Fixed Bugs:**
+
+- Slider shorthand import fails [\#511](https://github.com/primefaces/primereact/issues/511)
+- Error importing Column component [\#509](https://github.com/primefaces/primereact/issues/509)
+- Typescript definition for Column's editor property [\#505](https://github.com/primefaces/primereact/issues/505)
+- Path to primereact/components/common/common.css not correct case [\#500](https://github.com/primefaces/primereact/issues/500)
+- InputText class ui-state-filled fails [\#499](https://github.com/primefaces/primereact/issues/499)
+- Calendar: popup translation not updating [\#478](https://github.com/primefaces/primereact/issues/478)
+- InputSwitch doesn't update programmatically [\#461](https://github.com/primefaces/primereact/issues/461)
+- preventDefault\(\) and stopPropagation\(\) appear to be missing from drag and drop of DataTable - Reorder and causes redirect to 'www.b.com' [\#460](https://github.com/primefaces/primereact/issues/460)
+
+## [2.0.0-alpha.1](https://github.com/primefaces/primereact/tree/2.0.0-alpha.1) (2018-07-06)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.2...2.0.0-alpha.1)
+
+**Implemented New Features and Enhancements:**
+
+- Review/Enhance all documentation [\#497](https://github.com/primefaces/primereact/issues/497)
+- Review all type definition files [\#496](https://github.com/primefaces/primereact/issues/496)
+- Reimplement Chips [\#494](https://github.com/primefaces/primereact/issues/494)
+- Chips should not keep value in state [\#493](https://github.com/primefaces/primereact/issues/493)
+- Controlled/Uncontrolled behavior support for DataTable Features [\#492](https://github.com/primefaces/primereact/issues/492)
+- Reimplement DataTable Lazy Loading [\#491](https://github.com/primefaces/primereact/issues/491)
+- onClick for Fieldset [\#487](https://github.com/primefaces/primereact/issues/487)
+- Refactor Sidebar [\#486](https://github.com/primefaces/primereact/issues/486)
+- Horizontal scroll support to ScrollPanel [\#485](https://github.com/primefaces/primereact/issues/485)
+- Reimplement DataView [\#484](https://github.com/primefaces/primereact/issues/484)
+- Add name prop to Chips [\#483](https://github.com/primefaces/primereact/issues/483)
+- Controlled/Uncontrolled modes for Toggleable Fieldset [\#480](https://github.com/primefaces/primereact/issues/480)
+- Controlled/Uncontrolled modes for Toggleable Panel [\#479](https://github.com/primefaces/primereact/issues/479)
+- Controlled/Uncontrolled modes for TabView [\#475](https://github.com/primefaces/primereact/issues/475)
+- Controlled/Uncontrolled modes for Accordion [\#474](https://github.com/primefaces/primereact/issues/474)
+- New Component: Inplace [\#471](https://github.com/primefaces/primereact/issues/471)
+- Shorter Imports [\#470](https://github.com/primefaces/primereact/issues/470)
+- Rewrite SlideMenu [\#469](https://github.com/primefaces/primereact/issues/469)
+- Rewrite PanelMenu [\#468](https://github.com/primefaces/primereact/issues/468)
+- Rewrite MegaMenu [\#467](https://github.com/primefaces/primereact/issues/467)
+- Rewrite ContextMenu [\#466](https://github.com/primefaces/primereact/issues/466)
+- Rewrite MenuBar [\#465](https://github.com/primefaces/primereact/issues/465)
+- Rewrite TieredMenu [\#464](https://github.com/primefaces/primereact/issues/464)
+- Rewrite Breadcrumb [\#463](https://github.com/primefaces/primereact/issues/463)
+- Rewrite Steps [\#462](https://github.com/primefaces/primereact/issues/462)
+- Controlled/Uncontrolled modes for TabMenu [\#459](https://github.com/primefaces/primereact/issues/459)
+- Rewrite Menu [\#458](https://github.com/primefaces/primereact/issues/458)
+- Maximizable Dialog [\#453](https://github.com/primefaces/primereact/issues/453)
+- Dialog should not derive visible state from props [\#452](https://github.com/primefaces/primereact/issues/452)
+- Add a 'closable' or 'dismissable' property to Sidebar for 'click outside' control. [\#377](https://github.com/primefaces/primereact/issues/377)
+
+**Fixed Bugs:**
+
+- InputMask can not read property 'bind' of undefined [\#490](https://github.com/primefaces/primereact/issues/490)
+- Dropdown with autoFocus prop throws a JS error [\#489](https://github.com/primefaces/primereact/issues/489)
+- InputMask fail when unmask is true [\#488](https://github.com/primefaces/primereact/issues/488)
+- Toggleable Panel Icon Misaligned [\#481](https://github.com/primefaces/primereact/issues/481)
+- Calendar dateFormat day name or month name gives error [\#455](https://github.com/primefaces/primereact/issues/455)
+- wrong typings for itemTemplate property [\#454](https://github.com/primefaces/primereact/issues/454)
+- optionLabel prop is missing in MultiSelect [\#450](https://github.com/primefaces/primereact/issues/450)
+- Unable to change rows per page \(Paginator/DataTable\) [\#449](https://github.com/primefaces/primereact/issues/449)
+
+## [1.6.2](https://github.com/primefaces/primereact/tree/1.6.2) (2018-06-19)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.1...1.6.2)
+
+**Implemented New Features and Enhancements:**
+
+- Refactor Rating to remove usage of state [\#447](https://github.com/primefaces/primereact/issues/447)
+
+**Fixed Bugs:**
+
+- Accordion onTabOpen-onTabClose does not trigger correctly [\#448](https://github.com/primefaces/primereact/issues/448)
+
+## [1.6.1](https://github.com/primefaces/primereact/tree/1.6.1) (2018-06-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.0...1.6.1)
+
+**Implemented New Features and Enhancements:**
+
+- Migrate to PrimeIcons [\#446](https://github.com/primefaces/primereact/issues/446)
+
+**Fixed Bugs:**
+
+- DataTable props updating issue [\#443](https://github.com/primefaces/primereact/issues/443)
+- OrganizationChart is not working with React 16.4+ [\#441](https://github.com/primefaces/primereact/issues/441)
+- Sortable TreeTable is not working with React 16.4+ [\#440](https://github.com/primefaces/primereact/issues/440)
+- Calendar Toggle AM/PM is broken [\#438](https://github.com/primefaces/primereact/issues/438)
+- Keyboard navigation is not working on DataTable [\#425](https://github.com/primefaces/primereact/issues/425)
+
+## [1.6.0](https://github.com/primefaces/primereact/tree/1.6.0) (2018-06-07)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.6.0-rc.1...1.6.0)
+
+**Implemented New Features and Enhancements:**
+
+- Improve sort property on DataView [\#420](https://github.com/primefaces/primereact/issues/420)
+
+**Fixed Bugs:**
+
+- slotChar issue on InputMask [\#439](https://github.com/primefaces/primereact/issues/439)
+- Missing type definition for DropDownProps [\#436](https://github.com/primefaces/primereact/issues/436)
+- Sidebar throws a JS exception on componentWillUnmount hook [\#435](https://github.com/primefaces/primereact/issues/435)
+- Can't set csv export filename in DataTable.js using Internet Explorer, it returns undefined.csv [\#433](https://github.com/primefaces/primereact/issues/433)
+- Missing optionsLabel property in interface ListBoxProps in ListBox.d.ts [\#431](https://github.com/primefaces/primereact/issues/431)
+- Width & Height props of Charts are not working [\#430](https://github.com/primefaces/primereact/issues/430)
+- After a sub node is selected on Tree, its parent node is closing [\#429](https://github.com/primefaces/primereact/issues/429)
+- Rating not being enabled on change from disabled=true to disabled=false [\#428](https://github.com/primefaces/primereact/issues/428)
+- The 'selection' property is not working on Tree [\#426](https://github.com/primefaces/primereact/issues/426)
+- Datatable missing definitions [\#423](https://github.com/primefaces/primereact/issues/423)
+- Improve sort property on DataTable [\#421](https://github.com/primefaces/primereact/issues/421)
+- Remove old overlay events on GMap after map is updated [\#419](https://github.com/primefaces/primereact/issues/419)
+- Growl types Failed to compile. [\#414](https://github.com/primefaces/primereact/issues/414)
+- InputMask is not updated if value property is changed [\#413](https://github.com/primefaces/primereact/issues/413)
+- ColorPicker is not updated if value property is changed [\#412](https://github.com/primefaces/primereact/issues/412)
+- Editable Dropdown content does not reflect input value [\#408](https://github.com/primefaces/primereact/issues/408)
+
+## [1.6.0-rc.1](https://github.com/primefaces/primereact/tree/1.6.0-rc.1) (2018-06-04)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.3...1.6.0-rc.1)
+
+## [1.5.3](https://github.com/primefaces/primereact/tree/1.5.3) (2018-05-22)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.2...1.5.3)
+
+**Fixed Bugs:**
+
+- onRowReorder missing from DataTable type definition [\#411](https://github.com/primefaces/primereact/issues/411)
+- Duplicate identifier 'number': DataScroller.d.ts [\#410](https://github.com/primefaces/primereact/issues/410)
+
+## [1.5.2](https://github.com/primefaces/primereact/tree/1.5.2) (2018-05-11)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.1...1.5.2)
+
+**Implemented New Features and Enhancements:**
+
+- Add metaKeySelection property to PickList [\#404](https://github.com/primefaces/primereact/issues/404)
+- Add sorting feature to TreeTable [\#400](https://github.com/primefaces/primereact/issues/400)
+- New mode to keyfilter to validate whole value [\#391](https://github.com/primefaces/primereact/issues/391)
+
+**Fixed Bugs:**
+
+- BodyCell className using headerClassName prop [\#407](https://github.com/primefaces/primereact/issues/407)
+- Typings missing for colorPicker component [\#405](https://github.com/primefaces/primereact/issues/405)
+- Radio Button default selection throws warnings [\#403](https://github.com/primefaces/primereact/issues/403)
+- Container element has wrong width on Scrollable Datatable [\#402](https://github.com/primefaces/primereact/issues/402)
+- Warning when using Checkbox [\#399](https://github.com/primefaces/primereact/issues/399)
+- itemTemplate is declared as void [\#397](https://github.com/primefaces/primereact/issues/397)
+- FileUpload does not accept multiple files dropped or selected [\#395](https://github.com/primefaces/primereact/issues/395)
+- TabView activeIndex setting programmatically will not work the second time after manually choosing another tab [\#393](https://github.com/primefaces/primereact/issues/393)
+- ReadOnly attribute is not passed to the checkbox input [\#392](https://github.com/primefaces/primereact/issues/392)
+- onColReorder return columns: undefined [\#389](https://github.com/primefaces/primereact/issues/389)
+- onClick event doesn't work on Messages component [\#387](https://github.com/primefaces/primereact/issues/387)
+- Typings missing for messages component [\#386](https://github.com/primefaces/primereact/issues/386)
+- InputMask runtime error [\#385](https://github.com/primefaces/primereact/issues/385)
+- Slider component not always provide the originalEvent [\#384](https://github.com/primefaces/primereact/issues/384)
+- Org chart does not update when value property changes [\#382](https://github.com/primefaces/primereact/issues/382)
+- Bug in DataTable selection and Column [\#381](https://github.com/primefaces/primereact/issues/381)
+- Calendar min date does not work after primereact@1.3.0 [\#379](https://github.com/primefaces/primereact/issues/379)
+
+## [1.5.1](https://github.com/primefaces/primereact/tree/1.5.1) (2018-04-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.5.0...1.5.1)
+
+**Fixed Bugs:**
+
+- placeholder not working on Chips component [\#374](https://github.com/primefaces/primereact/issues/374)
+- Tree doesn't update on external change [\#372](https://github.com/primefaces/primereact/issues/372)
+- Slider component does not support real values/step [\#371](https://github.com/primefaces/primereact/issues/371)
+- AutoResize for InputTextarea doesn't work without cols property [\#370](https://github.com/primefaces/primereact/issues/370)
+- Bug: incorrect highlight of dates in range Calendar [\#367](https://github.com/primefaces/primereact/issues/367)
+- TypeDefinitions for Message Control missing [\#366](https://github.com/primefaces/primereact/issues/366)
+- Dropdown autowidth is not working when it used inside the TabView [\#362](https://github.com/primefaces/primereact/issues/362)
+- Calendar as cell editor is not closed after selecting value [\#358](https://github.com/primefaces/primereact/issues/358)
+- Cannot format selection for single-value AutoComplete field [\#353](https://github.com/primefaces/primereact/issues/353)
+- Bug: Type definition for the Column component [\#350](https://github.com/primefaces/primereact/issues/350)
+- DataTable export doesn't respect filters and sorting [\#349](https://github.com/primefaces/primereact/issues/349)
+- sortFunction doesn't work for DataTable [\#348](https://github.com/primefaces/primereact/issues/348)
+
+## [1.5.0](https://github.com/primefaces/primereact/tree/1.5.0) (2018-03-15)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.1...1.5.0)
+
+**Implemented New Features and Enhancements:**
+
+- Clear icon to Dropdown [\#345](https://github.com/primefaces/primereact/issues/345)
+- Add event onRowDoubleClick for DataTable [\#341](https://github.com/primefaces/primereact/issues/341)
+- Add minX and minY to Dialog [\#339](https://github.com/primefaces/primereact/issues/339)
+- DragDrop based reorder for Table [\#337](https://github.com/primefaces/primereact/issues/337)
+- DataView Component [\#334](https://github.com/primefaces/primereact/issues/334)
+- InputMask required [\#321](https://github.com/primefaces/primereact/issues/321)
+- Improve dialog positioning with Dynamic content [\#320](https://github.com/primefaces/primereact/issues/320)
+- Custom filter for Column of the DataTable [\#312](https://github.com/primefaces/primereact/issues/312)
+
+**Fixed Bugs:**
+
+- Datatable column reorder may not always work correctly [\#338](https://github.com/primefaces/primereact/issues/338)
+- Ultima theme 1.4.2: icon buttons are cutted [\#317](https://github.com/primefaces/primereact/issues/317)
+- Autocomplete input label is undefined [\#347](https://github.com/primefaces/primereact/issues/347)
+- DataTable TypeScript definition error [\#346](https://github.com/primefaces/primereact/issues/346)
+- Default filters not rendered at DataTable [\#344](https://github.com/primefaces/primereact/issues/344)
+- Dialog selects text during dragging or resizing [\#343](https://github.com/primefaces/primereact/issues/343)
+- TabView activeIndex ignored [\#342](https://github.com/primefaces/primereact/issues/342)
+- Dialog dragging may stuck [\#336](https://github.com/primefaces/primereact/issues/336)
+- ToolTip crashes in IE 11 [\#332](https://github.com/primefaces/primereact/issues/332)
+- Pagination dropdown resets for lazy loading dataTable [\#331](https://github.com/primefaces/primereact/issues/331)
+- DataTable onLazyLoad not called for advanced filter options [\#330](https://github.com/primefaces/primereact/issues/330)
+- Calendar : Enable/Highlight the date of adjacent month when selectOtherMonths is true [\#329](https://github.com/primefaces/primereact/issues/329)
+- Resizable DataTable rowsCountSelector not visible [\#318](https://github.com/primefaces/primereact/issues/318)
+- Dropdown list inside Dialog is only partially visible and creates scroll on dialog [\#316](https://github.com/primefaces/primereact/issues/316)
+- Cannot enter Values into Spinner [\#314](https://github.com/primefaces/primereact/issues/314)
+
+## [1.4.1](https://github.com/primefaces/primereact/tree/1.4.1) (2018-02-14)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.0...1.4.1)
+
+**Implemented New Features and Enhancements:**
+
+- Filtering for OrderList [\#311](https://github.com/primefaces/primereact/issues/311)
+- autoLayout mode for DataTable [\#310](https://github.com/primefaces/primereact/issues/310)
+- Add baseZIndex to Dialog [\#309](https://github.com/primefaces/primereact/issues/309)
+- Refactor OrderList [\#308](https://github.com/primefaces/primereact/issues/308)
+- Disabled/readonly prop for Checkbox and RadioButton [\#302](https://github.com/primefaces/primereact/issues/302)
+- Checkbox and Radio should mark checked/onChange props as required [\#287](https://github.com/primefaces/primereact/issues/287)
+- DataTable pageLinkSize [\#276](https://github.com/primefaces/primereact/issues/276)
+
+**Fixed Bugs:**
+
+- Dialog is displayed below topbar in showcase [\#284](https://github.com/primefaces/primereact/issues/284)
+- ResizableColumns fail inside Dialog [\#281](https://github.com/primefaces/primereact/issues/281)
+- File Upload Dialog opens only once if set to Auto [\#306](https://github.com/primefaces/primereact/issues/306)
+- rowsPerPage missing from DataTable d.ts file [\#304](https://github.com/primefaces/primereact/issues/304)
+- Dropdown does not show selected value when editable is true [\#301](https://github.com/primefaces/primereact/issues/301)
+- Calendar d.ts marks all props as required [\#296](https://github.com/primefaces/primereact/issues/296)
+- Dialog: closeOnEscape doesn't work [\#295](https://github.com/primefaces/primereact/issues/295)
+- Calendar yearNavigator fails [\#294](https://github.com/primefaces/primereact/issues/294)
+- Spinner shows weird Values [\#293](https://github.com/primefaces/primereact/issues/293)
+- OrderList error [\#291](https://github.com/primefaces/primereact/issues/291)
+- Duplicate identifier 'any': PickList.d.ts [\#290](https://github.com/primefaces/primereact/issues/290)
+- In Lazy load mode selection highlight doesn't work properly [\#283](https://github.com/primefaces/primereact/issues/283)
+- Type Definitions incomplete for FileUpload [\#277](https://github.com/primefaces/primereact/issues/277)
+- Growl does not clear timeout on unmount [\#272](https://github.com/primefaces/primereact/issues/272)
+- Calender select day in adjacent month [\#266](https://github.com/primefaces/primereact/issues/266)
+
+## [1.4.0](https://github.com/primefaces/primereact/tree/1.4.0) (2018-01-04)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.0-rc.2...1.4.0)
+
+**Implemented New Features and Enhancements:**
+
+- Improve DataTable.d.ts RowExpansion config [\#269](https://github.com/primefaces/primereact/issues/269)
+- KeyFilter attribute [\#265](https://github.com/primefaces/primereact/issues/265)
+- Card Component [\#264](https://github.com/primefaces/primereact/issues/264)
+- Migrate to react-transition-group [\#259](https://github.com/primefaces/primereact/issues/259)
+- Calendar should consider props.disabled in shouldComponentUpdate [\#258](https://github.com/primefaces/primereact/issues/258)
+
+**Fixed Bugs:**
+
+- Spinner does not accept decimal or thousand separator as input [\#270](https://github.com/primefaces/primereact/issues/270)
+- Calendar does not rerender when we change "disabled" prop [\#263](https://github.com/primefaces/primereact/issues/263)
+- Calendar may reset date on update [\#262](https://github.com/primefaces/primereact/issues/262)
+- ExportCSV ignores headers in DataTable [\#261](https://github.com/primefaces/primereact/issues/261)
+- Spinner binds invalid event [\#260](https://github.com/primefaces/primereact/issues/260)
+- Autocomplete dropdown no longer working [\#254](https://github.com/primefaces/primereact/issues/254)
+
+## [1.4.0-rc.2](https://github.com/primefaces/primereact/tree/1.4.0-rc.2) (2018-01-04)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.4.0-rc.1...1.4.0-rc.2)
+
+## [1.4.0-rc.1](https://github.com/primefaces/primereact/tree/1.4.0-rc.1) (2018-01-04)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.3.1...1.4.0-rc.1)
+
+## [1.3.1](https://github.com/primefaces/primereact/tree/1.3.1) (2017-12-22)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.3.0...1.3.1)
+
+## [1.3.0](https://github.com/primefaces/primereact/tree/1.3.0) (2017-12-13)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.3.0-rc.1...1.3.0)
+
+**Implemented New Features and Enhancements:**
+
+- New Component: ScrollPanel [\#251](https://github.com/primefaces/primereact/issues/251)
+- Keyboard accessibility for Panel components [\#250](https://github.com/primefaces/primereact/issues/250)
+- Refactor FileUpload [\#247](https://github.com/primefaces/primereact/issues/247)
+
+**Fixed Bugs:**
+
+- Missing dependency in primereact npm artifcat: 'react-addons-css-transition-group' [\#242](https://github.com/primefaces/primereact/issues/242)
+- AutoComplete dosn't accept spaces [\#249](https://github.com/primefaces/primereact/issues/249)
+- Calendar title month and year has no margin [\#248](https://github.com/primefaces/primereact/issues/248)
+- Toggleable fieldset resets if parent is updated [\#246](https://github.com/primefaces/primereact/issues/246)
+- Accordion resets if parent is updated [\#245](https://github.com/primefaces/primereact/issues/245)
+- Toggleable panel resets if parent is updated [\#244](https://github.com/primefaces/primereact/issues/244)
+- Growl.d.ts allow GrowlMessage.detail to be Element [\#241](https://github.com/primefaces/primereact/issues/241)
+- Password's 'inputProps' missing in d.ts file [\#240](https://github.com/primefaces/primereact/issues/240)
+- feedback={false} not working for Password [\#239](https://github.com/primefaces/primereact/issues/239)
+- AutoCompleteProps: Missing data object in itemTemplate [\#237](https://github.com/primefaces/primereact/issues/237)
+- Missing param name in d.ts-files [\#236](https://github.com/primefaces/primereact/issues/236)
+- Spinner d.ts missing onChange [\#235](https://github.com/primefaces/primereact/issues/235)
+
+## [1.3.0-rc.1](https://github.com/primefaces/primereact/tree/1.3.0-rc.1) (2017-12-07)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.2.0...1.3.0-rc.1)
+
+**Implemented New Features and Enhancements:**
+
+- Add style/classname props to Radio and Checkbox [\#233](https://github.com/primefaces/primereact/issues/233)
+- New properties to TriStateCheckbox [\#232](https://github.com/primefaces/primereact/issues/232)
+- Keyboard Accessibility for TriStateCheckbox [\#230](https://github.com/primefaces/primereact/issues/230)
+- Keyboard accessibility for Spinner [\#229](https://github.com/primefaces/primereact/issues/229)
+- Refactor Spinner [\#228](https://github.com/primefaces/primereact/issues/228)
+- Animation for FieldSet [\#223](https://github.com/primefaces/primereact/issues/223)
+- Refactor Calendar [\#222](https://github.com/primefaces/primereact/issues/222)
+- Resize support for Scrollable Table [\#219](https://github.com/primefaces/primereact/issues/219)
+- Password does not pass all input parameters [\#216](https://github.com/primefaces/primereact/issues/216)
+- Reimplement ColorPicker [\#214](https://github.com/primefaces/primereact/issues/214)
+- Rewrite Button CSS [\#213](https://github.com/primefaces/primereact/issues/213)
+- appendTo for MultiSelect [\#212](https://github.com/primefaces/primereact/issues/212)
+- Use Portal API in Dropdown appendTo [\#211](https://github.com/primefaces/primereact/issues/211)
+- Use Portal API in AutoComplete appendTo [\#210](https://github.com/primefaces/primereact/issues/210)
+- Use Portal API in Overlay appendTo [\#209](https://github.com/primefaces/primereact/issues/209)
+- Add inputId to Checkbox and Radio [\#208](https://github.com/primefaces/primereact/issues/208)
+- Keyboard accessibility for Checkbox and RadioButton [\#207](https://github.com/primefaces/primereact/issues/207)
+- Floating Labels for Inputs [\#205](https://github.com/primefaces/primereact/issues/205)
+- Add appendTo to Dialog [\#204](https://github.com/primefaces/primereact/issues/204)
+- Reimplement Messages [\#203](https://github.com/primefaces/primereact/issues/203)
+- Reimplement Growl [\#202](https://github.com/primefaces/primereact/issues/202)
+- Screen Reader and Keyboard Accessibility support for Fieldset [\#201](https://github.com/primefaces/primereact/issues/201)
+- Screen Reader support for Panel [\#200](https://github.com/primefaces/primereact/issues/200)
+- Screen Reader support for Dialog [\#199](https://github.com/primefaces/primereact/issues/199)
+- Screen Reader support for TabView [\#198](https://github.com/primefaces/primereact/issues/198)
+- Screen Reader and Keyboard Accessibility for Accordion [\#197](https://github.com/primefaces/primereact/issues/197)
+- Loading status for AutoComplete [\#193](https://github.com/primefaces/primereact/issues/193)
+- Custom content for paginator [\#189](https://github.com/primefaces/primereact/issues/189)
+- Animation for Accordion [\#182](https://github.com/primefaces/primereact/issues/182)
+- Unsortable option for DataTable columns [\#179](https://github.com/primefaces/primereact/issues/179)
+
+**Fixed Bugs:**
+
+- Radio and Checkbox does pass props to super [\#231](https://github.com/primefaces/primereact/issues/231)
+- Dropdown Filter blocks keyboard navigation of items [\#227](https://github.com/primefaces/primereact/issues/227)
+- Dropdown keyboard navigation does not scroll items [\#226](https://github.com/primefaces/primereact/issues/226)
+- InputTextarea ignores focus, blur, input and keyup [\#225](https://github.com/primefaces/primereact/issues/225)
+- Browser textarea resize breaks autoResize of textarea [\#224](https://github.com/primefaces/primereact/issues/224)
+- DataTable dataKey ignored [\#221](https://github.com/primefaces/primereact/issues/221)
+- AutoComplete does not reflect model binding [\#220](https://github.com/primefaces/primereact/issues/220)
+- Clicking table header throws exception [\#218](https://github.com/primefaces/primereact/issues/218)
+- Resizing last column gives error on DataTable [\#217](https://github.com/primefaces/primereact/issues/217)
+- OverlayPanel: appendTo="body" throws exception [\#206](https://github.com/primefaces/primereact/issues/206)
+- Growl: messages appears again on any change state [\#196](https://github.com/primefaces/primereact/issues/196)
+- InputText: ui-state-filled class is not added, if value chaged in parent component [\#195](https://github.com/primefaces/primereact/issues/195)
+- AutoComplete Dropdown select not hiding [\#191](https://github.com/primefaces/primereact/issues/191)
+- Menu components\(menu,menubar...\) reload problem [\#190](https://github.com/primefaces/primereact/issues/190)
+- Datatable - not propagate prop filterMatchMode when lazyload is on [\#187](https://github.com/primefaces/primereact/issues/187)
+- datatable- Not Adjusted columns with expander [\#186](https://github.com/primefaces/primereact/issues/186)
+- DataTable: page is not reseted after global filtering [\#184](https://github.com/primefaces/primereact/issues/184)
+- onNodeExpand and onNodeCollapse events are not working on Tree [\#183](https://github.com/primefaces/primereact/issues/183)
+- Panel Header and Dropdown problem [\#175](https://github.com/primefaces/primereact/issues/175)
+
+## [1.2.0](https://github.com/primefaces/primereact/tree/1.2.0) (2017-11-01)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.1.0...1.2.0)
+
+**Implemented New Features and Enhancements:**
+
+- Improve typings of some components [\#172](https://github.com/primefaces/primereact/issues/172)
+- Add rowsPerPageOptions to DataTable [\#171](https://github.com/primefaces/primereact/issues/171)
+- Animation for Panel toggle [\#170](https://github.com/primefaces/primereact/issues/170)
+- Disabled tabs for Accordion [\#169](https://github.com/primefaces/primereact/issues/169)
+- New style properties for Accordion Tab [\#168](https://github.com/primefaces/primereact/issues/168)
+- Disabled tabs in TabView [\#167](https://github.com/primefaces/primereact/issues/167)
+- Add style properties to TabView and TabPanel [\#166](https://github.com/primefaces/primereact/issues/166)
+- Disabled prop for TabPanel [\#164](https://github.com/primefaces/primereact/issues/164)
+- Use Dropdown component for Paginator rowsPerPage select [\#163](https://github.com/primefaces/primereact/issues/163)
+- Support any type of object as a select option [\#162](https://github.com/primefaces/primereact/issues/162)
+- Undeterminate ProgressBar [\#160](https://github.com/primefaces/primereact/issues/160)
+- New Message component [\#159](https://github.com/primefaces/primereact/issues/159)
+- New ProgressSpinner Component [\#143](https://github.com/primefaces/primereact/issues/143)
+
+**Fixed Bugs:**
+
+- DataTable: `onLazyLoad` does not support `sortMode="multiple"` [\#157](https://github.com/primefaces/primereact/issues/157)
+- Password not trigger onChange event [\#177](https://github.com/primefaces/primereact/issues/177)
+- Virtual Scrolling Flickers [\#173](https://github.com/primefaces/primereact/issues/173)
+- Type definition missing from TabPanel [\#165](https://github.com/primefaces/primereact/issues/165)
+- DataTable: Changing a filter does not trigger `onLazyLoad` for async tables [\#158](https://github.com/primefaces/primereact/issues/158)
+- Growl throws error [\#149](https://github.com/primefaces/primereact/issues/149)
+- MultiSelect: onClick: event.stopPropagation is not a function [\#147](https://github.com/primefaces/primereact/issues/147)
+- utc parameter is not working when keying in the date [\#146](https://github.com/primefaces/primereact/issues/146)
+- Click on input filter causes sort [\#133](https://github.com/primefaces/primereact/issues/133)
+
+## [1.1.0](https://github.com/primefaces/primereact/tree/1.1.0) (2017-10-18)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.1...1.1.0)
+
+**Implemented New Features and Enhancements:**
+
+- Sidebar component [\#122](https://github.com/primefaces/primereact/issues/122)
+- Expose show\(\),hide\(\) and toggle\(\) in props of ContextMenu [\#113](https://github.com/primefaces/primereact/issues/113)
+- Reimplement AutoComplete [\#141](https://github.com/primefaces/primereact/issues/141)
+- Specific styles for header, body and footer [\#140](https://github.com/primefaces/primereact/issues/140)
+- Sticky mode for Growl [\#139](https://github.com/primefaces/primereact/issues/139)
+- Add onClick to Growl [\#138](https://github.com/primefaces/primereact/issues/138)
+- rowClassName for DataTable [\#137](https://github.com/primefaces/primereact/issues/137)
+- Typescript Support [\#131](https://github.com/primefaces/primereact/issues/131)
+- New Component: GMap [\#130](https://github.com/primefaces/primereact/issues/130)
+- Keyboard support for SelectButton [\#129](https://github.com/primefaces/primereact/issues/129)
+- Reimplement SelectButton [\#128](https://github.com/primefaces/primereact/issues/128)
+- license file [\#117](https://github.com/primefaces/primereact/issues/117)
+- Frozen Columns support for Column Groups [\#107](https://github.com/primefaces/primereact/issues/107)
+- Loading status for DataTable [\#94](https://github.com/primefaces/primereact/issues/94)
+- Editable Cells for DataTable [\#80](https://github.com/primefaces/primereact/issues/80)
+- Virtual Scrolling For DataTable [\#79](https://github.com/primefaces/primereact/issues/79)
+- Percentage support for DataTable ScrollWidth and ScrollHeight [\#77](https://github.com/primefaces/primereact/issues/77)
+
+**Fixed Bugs:**
+
+- Dropdown Menu in DataTable with resizableColumns [\#123](https://github.com/primefaces/primereact/issues/123)
+- Sorting does not work when you are using Column Group feature [\#115](https://github.com/primefaces/primereact/issues/115)
+- TimeOnly calendar fails [\#144](https://github.com/primefaces/primereact/issues/144)
+- DataTable: OnLazyLoad repeatedly calling function / infinite loop [\#132](https://github.com/primefaces/primereact/issues/132)
+- Dropdown menu sits behind grid [\#126](https://github.com/primefaces/primereact/issues/126)
+- SelectButton cannot have initial State [\#121](https://github.com/primefaces/primereact/issues/121)
+- Calendar minDate and maxDate property does not reload dynamically [\#119](https://github.com/primefaces/primereact/issues/119)
+- Growl doesn't call onClear method [\#112](https://github.com/primefaces/primereact/issues/112)
+- AutoComplete completeMethod triggered twice / delay does not work as expected [\#111](https://github.com/primefaces/primereact/issues/111)
+- Calendar is not updated according when props.value is changed [\#110](https://github.com/primefaces/primereact/issues/110)
+
+## [1.0.1](https://github.com/primefaces/primereact/tree/1.0.1) (2017-09-21)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0...1.0.1)
+
+**Implemented New Features and Enhancements:**
+
+- appendTo for OverlayPanel [\#96](https://github.com/primefaces/primereact/issues/96)
+- Update demo to Router v4 [\#93](https://github.com/primefaces/primereact/issues/93)
+- Refactor InputText filled state implementation [\#91](https://github.com/primefaces/primereact/issues/91)
+- Missing event for components [\#90](https://github.com/primefaces/primereact/issues/90)
+- Customizable Paginator using Templating [\#88](https://github.com/primefaces/primereact/issues/88)
+- Column Reordering for DataTable [\#81](https://github.com/primefaces/primereact/issues/81)
+
+**Fixed Bugs:**
+
+- Wrong documentation for BreadCrumb component [\#100](https://github.com/primefaces/primereact/issues/100)
+- Relative Position calculation is wrong [\#109](https://github.com/primefaces/primereact/issues/109)
+- Dropdown options does not update when props is changed [\#108](https://github.com/primefaces/primereact/issues/108)
+- Dynamic and Static Columns cause error [\#106](https://github.com/primefaces/primereact/issues/106)
+- Broken css in Version 1.0 [\#105](https://github.com/primefaces/primereact/issues/105)
+- Dropdown selected option not updated after value property changes [\#103](https://github.com/primefaces/primereact/issues/103)
+- Chart is not updated when data changes [\#102](https://github.com/primefaces/primereact/issues/102)
+- The value of AutoComplete is not reset after changing state [\#101](https://github.com/primefaces/primereact/issues/101)
+- FileUpload does not allow multiple files [\#99](https://github.com/primefaces/primereact/issues/99)
+- Dialog contentStyle doesn't work [\#92](https://github.com/primefaces/primereact/issues/92)
+- InputText disabled behavior missing readonly functionality [\#89](https://github.com/primefaces/primereact/issues/89)
+
+## [1.0.0](https://github.com/primefaces/primereact/tree/1.0.0) (2017-09-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-rc.3...1.0.0)
+
+**Implemented New Features and Enhancements:**
+
+- Reimplement Listbox [\#87](https://github.com/primefaces/primereact/issues/87)
+- Reimplement PickList [\#86](https://github.com/primefaces/primereact/issues/86)
+- Reimplement Rating [\#84](https://github.com/primefaces/primereact/issues/84)
+- Reimplement Calendar [\#83](https://github.com/primefaces/primereact/issues/83)
+- Disabled Dates for Calendar [\#82](https://github.com/primefaces/primereact/issues/82)
+
+## [1.0.0-rc.3](https://github.com/primefaces/primereact/tree/1.0.0-rc.3) (2017-09-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-rc.2...1.0.0-rc.3)
+
+## [1.0.0-rc.2](https://github.com/primefaces/primereact/tree/1.0.0-rc.2) (2017-09-08)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-rc.1...1.0.0-rc.2)
+
+## [1.0.0-rc.1](https://github.com/primefaces/primereact/tree/1.0.0-rc.1) (2017-08-31)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.6...1.0.0-rc.1)
+
+**Implemented New Features and Enhancements:**
+
+- Re implemented Dropdown component [\#76](https://github.com/primefaces/primereact/issues/76)
+- Re-implemented Dialog Component [\#75](https://github.com/primefaces/primereact/issues/75)
+
+**Fixed Bugs:**
+
+- PickList callbacks reference error [\#74](https://github.com/primefaces/primereact/issues/74)
+- The state of user is not updated after closing dialog [\#72](https://github.com/primefaces/primereact/issues/72)
+- The onClick event of Choose button is fired twice on FileUpload [\#71](https://github.com/primefaces/primereact/issues/71)
+
+## [1.0.0-beta.6](https://github.com/primefaces/primereact/tree/1.0.0-beta.6) (2017-08-21)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.5...1.0.0-beta.6)
+
+## [1.0.0-beta.5](https://github.com/primefaces/primereact/tree/1.0.0-beta.5) (2017-08-21)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.4...1.0.0-beta.5)
+
+**Implemented New Features and Enhancements:**
+
+- Add id attribute to all components [\#70](https://github.com/primefaces/primereact/issues/70)
+- Inconsistent API to add CSS class with certain of your component [\#68](https://github.com/primefaces/primereact/issues/68)
+
+**Fixed Bugs:**
+
+- InputText and InputTextarea components aren't re-rendered when props are updated [\#69](https://github.com/primefaces/primereact/issues/69)
+
+## [1.0.0-beta.4](https://github.com/primefaces/primereact/tree/1.0.0-beta.4) (2017-08-16)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.3...1.0.0-beta.4)
+
+**Implemented New Features and Enhancements:**
+
+- Text Editor [\#66](https://github.com/primefaces/primereact/issues/66)
+
+## [1.0.0-beta.3](https://github.com/primefaces/primereact/tree/1.0.0-beta.3) (2017-08-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.2...1.0.0-beta.3)
+
+## [1.0.0-beta.2](https://github.com/primefaces/primereact/tree/1.0.0-beta.2) (2017-08-10)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-beta.1...1.0.0-beta.2)
+
+## [1.0.0-beta.1](https://github.com/primefaces/primereact/tree/1.0.0-beta.1) (2017-08-09)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-alpha.2...1.0.0-beta.1)
+
+**Implemented New Features and Enhancements:**
+
+- DataTable Crud [\#63](https://github.com/primefaces/primereact/issues/63)
+- MegaMenu component [\#62](https://github.com/primefaces/primereact/issues/62)
+- Steps component [\#61](https://github.com/primefaces/primereact/issues/61)
+- PanelMenu component [\#59](https://github.com/primefaces/primereact/issues/59)
+- ContextMenu component [\#58](https://github.com/primefaces/primereact/issues/58)
+- Menubar component [\#57](https://github.com/primefaces/primereact/issues/57)
+- TieredMenu component [\#56](https://github.com/primefaces/primereact/issues/56)
+- Breadcrumb component [\#54](https://github.com/primefaces/primereact/issues/54)
+- Add tabmenu component [\#53](https://github.com/primefaces/primereact/issues/53)
+- Add menu component [\#51](https://github.com/primefaces/primereact/issues/51)
+- Add lightbox component [\#46](https://github.com/primefaces/primereact/issues/46)
+- Add toolbar component [\#44](https://github.com/primefaces/primereact/issues/44)
+- Add password component [\#43](https://github.com/primefaces/primereact/issues/43)
+- Add keyboard support to dropdown [\#39](https://github.com/primefaces/primereact/issues/39)
+- Implemented DataScroller component [\#37](https://github.com/primefaces/primereact/issues/37)
+- Implemented Rating component [\#36](https://github.com/primefaces/primereact/issues/36)
+- Implemented ColorPicker component [\#35](https://github.com/primefaces/primereact/issues/35)
+
+## [1.0.0-alpha.2](https://github.com/primefaces/primereact/tree/1.0.0-alpha.2) (2017-05-25)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/1.0.0-alpha.1...1.0.0-alpha.2)
+
+**Implemented New Features and Enhancements:**
+
+- TreeTable Component [\#34](https://github.com/primefaces/primereact/issues/34)
+- Mobile Touch support to Slider Component [\#33](https://github.com/primefaces/primereact/issues/33)
+- Implemented Captcha Component [\#32](https://github.com/primefaces/primereact/issues/32)
+- Tree Component [\#31](https://github.com/primefaces/primereact/issues/31)
+
+**Fixed Bugs:**
+
+- Accordion activeIndex doesn't work [\#30](https://github.com/primefaces/primereact/issues/30)
+- Dropdown onChange invoked on same item selection [\#28](https://github.com/primefaces/primereact/issues/28)
+- activeIndex property on TabView doesn't work [\#26](https://github.com/primefaces/primereact/issues/26)
+- Dropdown is missing input focus [\#21](https://github.com/primefaces/primereact/issues/21)
+- Spinner controls are not user friendly [\#20](https://github.com/primefaces/primereact/issues/20)
+- MultiSelect Input focus is missing [\#19](https://github.com/primefaces/primereact/issues/19)
+- Accordion Tab Caret icons are not toggleable [\#18](https://github.com/primefaces/primereact/issues/18)
+- Radio button label toggle state is missing [\#14](https://github.com/primefaces/primereact/issues/14)
+- Chips need input focus [\#13](https://github.com/primefaces/primereact/issues/13)
+- Checkbox label toggle state is not working [\#12](https://github.com/primefaces/primereact/issues/12)
+- Autocomplete Multiple feature missing input focus [\#10](https://github.com/primefaces/primereact/issues/10)
+
+## [1.0.0-alpha.1](https://github.com/primefaces/primereact/tree/1.0.0-alpha.1) (2017-03-28)
+
+[Full Changelog](https://github.com/primefaces/primereact/compare/2eb760f17382a3b3a47d70f6f6076e21f5c90cfb...1.0.0-alpha.1)
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000000..56699aa980
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+contact@primetek.com.tr.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md
new file mode 100644
index 0000000000..64c8677441
--- /dev/null
+++ b/CODING_STANDARDS.md
@@ -0,0 +1,265 @@
+# Coding Standards
+
+## Declaration Rules
+
+### Using Explanatory Names for Variables
+
+    // Bad
+    let x = 10; // What does "x" represent?
+
+    // Good
+    let numberOfUsers = 10; // Clearly states what the variable represents
+
+    // Bad
+    let y = true; // What does "y" represent?
+
+    // Good
+    let isLoggedIn = true; // Clearly states the user's login status
+
+### Using Verbs for Boolean Variables
+
+    // Bad
+    let loggedIn = false;
+    let userAccess = true;
+
+    // Good
+    let isLoggedIn = false;
+    let canAccess = true;
+    let isActive = true;
+    let hasPermission = false;
+
+### Declarations on Top
+
+    function exampleFunction() {
+        let x; // Declare variable at the top
+        let y; // Declare variable at the top
+
+        // Function body
+        // Code that uses variables x and y
+    }
+
+### One Declaration per Line
+
+    \\Bad
+    let x,y,z;
+
+    \\Good
+    let x;
+    let y;
+    let z;
+
+### Initialize Variables
+
+    let hasBorder = false;
+    let repeatedTimes = 0;
+    let images = [];
+
+### Declare Arrays with Const
+
+    \\Bad
+    let images = ['img1', 'img2', 'img3'];
+    images = 3; \\Converted images to number
+
+    \\Good
+    const images = ['img1', 'img2', 'img3'];
+
+### End Switch Case's with Defaults
+
+    switch (new Date().getDay()) {
+    	case  0:
+    		day = "Sunday";
+    		break;
+    	case  1:
+    		day = "Monday";
+    		break;
+    	default:
+    		day = "Unknown";
+    }
+
+### Avoid Number, String, and Boolean as Objects
+
+Always treat numbers, strings, or booleans as primitive values. Not as objects.
+Declaring these types as objects, slows down execution speed, and produces nasty side effects:
+
+    // Example
+    let x = "John";
+    let y = new String("John");
+    (x === y) // is false because x is a string and y is an object.
+
+    // Bad
+    const num = new  Number(10);
+    const str = new  String("Hello");
+    const bool = new  Boolean(true);
+
+    // Good
+    const num = 10;
+    const str = "Hello";
+    const bool = true;
+
+## Spacing
+
+-   Indentation with tabs.
+-   No whitespace at the end of line or on blank lines.
+-   Lines should usually be no longer than 80 characters, and should not exceed 120 (counting tabs as 4 spaces).
+-   No filler spaces in empty constructs (e.g., {}, [], fn()).
+-   There should be a new line at the end of each file.
+-   All function bodies are indented by one tab, even if the entire file is wrapped in a closure.
+
+## Ordering
+
+Ensuring that each function is defined before it is used is a good practice for code readability and maintainability.
+
+    // Define functions before they are used
+    function validateUserData(userData) {
+        // Logic to validate user data
+    }
+
+    function sanitizeUserData(userData) {
+        validateUserData()
+    }
+
+    function saveUserData(userData) {
+        sanitizeUserData()
+    }
+
+### Imports order
+
+1.  React import
+2.  Library imports (Alphabetical order)
+3.  Absolute imports from the project (Alphabetical order)
+4.  Relative imports (Alphabetical order)
+5.  Import \* as
+6.  Import \<some file>.\<some extension>
+
+### Array and Object Declarations
+
+    // Preferred
+    var obj = {
+    	ready: 9,
+    	when: 4,
+    	'you are': 15,
+    };
+
+    var arr = [
+    	9,
+    	4,
+    	15,
+    ];
+
+    // Acceptable for small objects and arrays
+    var obj = { ready: 9, when: 4, 'you are': 15 };
+    var arr = [ 9, 4, 15 ];
+
+## Semicolons
+
+Use them. Never rely on Automatic Semicolon Insertion (ASI).
+
+## Equality
+
+### Use === Comparison
+
+    0 == ""; // true
+    1 == "1"; // true
+    1 == true; // true
+
+    0 === ""; // false
+    1 === "1"; // false
+    1 === true; // false
+
+## React
+
+### Breakdown Components
+
+Breaking down components refers to decomposing complex systems or functionalities into smaller, more manageable parts or components. This practice helps improve code organization, readability, and maintainability.
+
+    // Bad
+    function processUserData(userData) {
+        // Complex logic to process user data
+    }
+
+    // Good
+    function validateUserData(userData) {
+        // Logic to validate user data
+    }
+
+    function sanitizeUserData(userData) {
+        // Logic to sanitize user data
+    }
+
+    function saveUserData(userData) {
+        // Logic to save user data
+    }
+
+### Use Functional Components
+
+Using functional components instead of class components whenever possible is wise because functional components are easier to read and write. Functional components are generally faster and more efficient than class components because they don't require a constructor or lifecycle methods.
+
+    // Good:
+    const MyComponent = () => {
+        return (
+            <div>
+                {/* JSX */}
+            </div>
+        );
+    };
+
+### Avoid Using Inline Styles
+
+Avoiding inline styles is a best practice in web development because it promotes separation of concerns, improves maintainability, and makes it easier to manage styles across an application. Instead of applying styles directly in HTML elements, it's recommended to use external stylesheets or CSS-in-JS solutions.
+
+    // Bad:
+    const MyComponent = () => {
+        return (
+            <div style={{ color: 'red', fontSize: '16px' }}>
+                {/* Content */}
+            </div>
+        );
+    };
+    // Good:
+    import './MyComponent.css';
+
+    const MyComponent = () => {
+    return (
+            <div className="my-component">
+                {/* Content */}
+            </div>
+        );
+    };
+
+### Passing Objects Instead of Multiple Props
+
+Especially when there are more than **4 props**, can enhance code readability and maintainability.
+
+    //Bad
+    const updateTodo = (id, name, completed, date, user) => {
+    	 //...
+    }
+
+    // Good
+    const todoItem = {
+    	id: 1,
+    	name: "Morning Task",
+    	completed: false,
+    	date: new Date(),
+    	user: "Optimus"
+    }
+
+    const updateTodo = (todoItem) => {
+    	//...
+    }
+
+### Avoid default export
+
+Using named exports provides better **clarity** when importing components, making the codebase more organized and easier to navigate.
+
+-   Named imports work well with tree shaking.
+-   Refactoring becomes easier.
+-   Easier to identify and understand the dependencies of a module.
+
+## Utils
+
+### Avoid Using eval()
+
+The `eval()` function is used to run text as code. In almost all cases, it should not be necessary to use it.
+
+Because it allows arbitrary code to be run, it also represents a security problem.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000000..95f67a0d50
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,228 @@
+Contributing to PrimeReact: Terms and Conditions
+================================================
+
+------------------------------------------------------------------------------
+
+Do you want to contribute your work to PrimeReact? Well, then first and most important: **THANK YOU!** 
+
+
+Now, in order to accept your contribution, there are some terms you must expressly agree with, so please
+read them carefully. They might look a bit cumbersome, but they are here just in order to protect 
+you, your contribution, and especially the project's future.
+
+**Important**: submitting any contributions to the PrimeReact project implies your **full acceptance of these terms**,
+including the *"PrimeReact Individual Contributor License Agreement"* detailed at the end. 
+
+Who can contribute?
+-------------------
+
+Anyone, with the unique condition that he/she must be a **private individual**, acting in 
+his/her own name, and not being endorsed in their contributed work by any company or government.
+
+Note that this condition will not only refer to the ownership of the effort invested in contributing 
+to the project, but also to the fact that *no private or public company will be mentioned as a a part 
+of your contribution on the project's website or code*, including but not limited to web/email addresses 
+or package names.
+
+
+What is the first step to be taken?
+-----------------------------------
+
+First of all, **Discuss with the [project members](https://github.com/orgs/primefaces/discussions)** (a new thread should do) about 
+your ideas: new features, fixes, documentation... whatever you would like to contribute to the project. Let we 
+discuss the possibilities with you so that we make sure your contribution goes in the right direction and aligns 
+with the project's standards, intentions and roadmap. 
+
+
+
+How will your relation with the PrimeReact project be?
+-----------------------------------------------------
+
+Your contributions will have the form of GitHub *pull requests*. Note that contributors do not 
+have read+write (or *pull+push*) access to the project repositories, only project *members* do. 
+
+Also, please understand that *not all pull requests will be accepted and merged into the project's 
+repositories*. Talking about your planned contributions with the project members before creating pull requests
+will maximize the possibilities of your contributions being accepted.
+
+About the code you contribute
+-----------------------------
+
+### General guidelines:
+  
+  - Obviously, **your code must both compile and work correctly**. Also, the addition of any new patches to the 
+    codebase should not render it unstable in any way.
+  - All your code should be easy to read and understand by a human.
+  - There should be no compilation warnings at all.
+  - Checkstyle must pass without errors or warnings. Currently this is embedded into the maven build.
+
+### Detailed code quality standards:
+  
+  - All your code should compile and run in **Node 16.x or higher**.
+  - All comments, names of classes and variables, log messages, etc. must be **in English**.
+
+  
+
+About the documentation/articles you contribute
+-----------------------------------------------
+
+Note the following only applies to documentation/articles meant to be published at the PrimeReact website.
+
+  - All documentation artifacts, including articles, must be written **in correct English**.
+  - Your name and email will be displayed as *"author"* of any documentation artifacts you create.
+  - Topic and text structure must be first discussed and agreed upon with the project members.
+  - Project members may edit and make small changes to your texts --of which you will be informed-- before 
+    publishing them.
+  - Format and visual styles must adhere to the PrimeReact website standards, of which you will be informed
+    by the project members.
+
+
+
+Pay special attention to this
+-----------------------------
+
+All PrimeReact software is distributed under the **MIT** open source license, and your contributions
+will be licensed in the same way.
+
+If you work for a company which, by the way or place in which your code was written, by your contract terms 
+or by the laws in your country, could claim any rights (including but not limited to intellectual or industrial 
+property) over your contributed code, you will have to send the project members (either by email from your 
+authorised superiors or by signed fax), a statement indicating that your company agrees with the terms 
+explained in this page, and that it both authorises your contribution to PrimeReact and states that will 
+never claim any kind of rights over it.
+
+
+
+PrimeReact Individual Contributor License Agreement
+--------------------------------------------------
+
+This contributor agreement ("Agreement") documents the rights granted by contributors to the PrimeReact Project. 
+
+This is a legally binding document, so please read it carefully before agreeing to it. The Agreement
+may cover more than one software project managed by PrimeReact.
+
+### 1. Definitions
+
+  * _"PrimeReact"_ means the "PrimeReact Project organization and members".
+  * _"You"_ means the individual who submits a Contribution to PrimeReact.
+  * _"Contribution"_ means any work of authorship that is submitted by you to PrimeReact in which you own
+    or assert ownership of the Copyright.
+  * _"Copyright"_ means all rights protecting works of authorship owned or controlled by you,
+    including copyright, moral and neighboring rights, as appropriate, for the full term of their
+    existence including any extensions by you.
+  * _"Material"_ means the work of authorship which is made available by PrimeReact to third parties. When
+    this Agreement covers more than one software project, the Material means the work of authorship
+    to which the Contribution was submitted. After you submit the Contribution, it may be included
+    in the Material.
+  * _"Submit"_ means any form of electronic, verbal, or written communication sent to PrimeReact or its
+    representatives, including but not limited to electronic mailing lists, source code control systems,
+    and issue tracking systems that are managed by, or on behalf of, PrimeReact for the purpose of discussing
+    and improving the Material, but excluding communication that is conspicuously marked or
+    otherwise designated in writing by you as _"Not a Contribution."
+  * _"Submission Date"_ means the date on which you submit a Contribution to PrimeReact.
+  * _"Effective Date"_ means the date you execute this agreement or the date You first submit a
+    Contribution to PrimeReact, whichever is earlier.
+  
+### 2. Grant of Rights
+
+#### 2.1. Copyright License
+
+    (a) You retain ownership of the copyright in your Contribution and have the same rights to use or
+        license the Contribution which you would have had without entering into the agreement.
+    (b) To the maximum extent permitted by the relevant law, you grant to PrimeReact a perpetual, worldwide,
+        non-exclusive, transferable, royalty-free, irrevocable license under the copyright covering the
+        Contribution, with the right to sublicense such rights through multiple tiers of sublicensees, to
+        reproduce, modify, display, perform and distribute the Contribution as part of the Material; provided
+        that this license is conditioned upon compliance with Section 2.3.
+
+#### 2.2 Patent License
+
+For patent claims including, without limitation, method, process, and apparatus claims which you
+own, control or have the right to grant, now or in the future, you grant to PrimeReact a perpetual, worldwide,
+non-exclusive, transferable, royalty-free, irrevocable patent license, with the right to sublicense these
+rights to multiple tiers of sublicensees, to make, have made, use, sell, offer for sale, import and
+otherwise transfer the Contribution and the Contribution in combination with the Material (and
+portions of such combination). This license is granted only to the extent that the exercise of the
+licensed rights infringes such patent claims; and provided that this license is conditioned upon
+compliance with Section 2.3.
+
+
+#### 2.3 Outbound License
+
+As a condition on the grant of rights in Sections 2.1 and 2.2, PrimeReact agrees to license the Contribution only
+under the terms of the MIT License (including any right to adopt any future version of this license if 
+permitted).
+
+
+#### 2.4 Moral Rights 
+
+If moral rights apply to the Contribution, to the maximum extent permitted by law, you waive and agree not 
+to assert such moral rights against PrimeReact or its successors in interest, or any of our licensees, either 
+direct or indirect.
+
+
+#### 2.5 PrimeReact Rights 
+
+You acknowledge that PrimeReact is not obligated to use your Contribution as part of the
+Material and may decide to include any Contributions PrimeReact considers appropriate.
+
+#### 2.6 Reservation of Rights
+
+Any rights not expressly assigned or licensed under this section are expressly reserved by you.
+
+
+
+### 3. Agreement
+
+You confirm that:
+
+    (a) You have the legal authority to enter into this Agreement.
+    (b) You own the Copyright and patent claims covering the Contribution which are required to grant
+        the rights under Section 2.
+    (c) The grant of rights under Section 2 does not violate any grant of rights which you have made to
+        third parties, including your employer. If you are an employee, you have had your employer approve
+        this Agreement. If you are less than eighteen years old, please have your parents or guardian 
+        sign the Agreement.
+
+
+
+### 4. Disclaimer
+
+EXCEPT FOR THE EXPRESS WARRANTIES IN SECTION 3, THE CONTRIBUTION IS PROVIDED "AS IS". MORE PARTICULARLY, 
+ALL EXPRESS OR IMPLIED WARRANTIES INCLUDING, WITHOUT LIMITATION, ANY IMPLIED WARRANTY OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT ARE EXPRESSLY DISCLAIMED BY YOU TO PrimeReact AND BY
+PrimeReact TO YOU. TO THE EXTENT THAT ANY SUCH WARRANTIES CANNOT BE DISCLAIMED, SUCH WARRANTY IS LIMITED IN 
+DURATION TO THE MINIMUM PERIOD PERMITTED BY LAW.
+
+
+
+### 5. Consequential Damage Waiver
+
+TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT WILL YOU OR PrimeReact BE LIABLE FOR ANY LOSS OF 
+PROFITS, LOSS OF ANTICIPATED SAVINGS, LOSS OF DATA, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL AND EXEMPLARY
+DAMAGES ARISING OUT OF THIS AGREEMENT REGARDLESS OF THE LEGAL OR EQUITABLE THEORY (CONTRACT, TORT OR OTHERWISE) 
+UPON WHICH THE CLAIM IS BASED.
+
+
+
+### 6. Miscellaneous
+
+    6.1 This Agreement will be governed by and construed in accordance with the laws of Spain excluding its
+        conflicts of law provisions. Under certain circumstances, the governing law in this section might be
+        superseded by the United Nations Convention on Contracts for the International Sale of Goods ("UN
+        Convention") and the parties intend to avoid the application of the UN Convention to this Agreement
+        and, thus, exclude the application of the UN Convention in its entirety to this Agreement.
+    6.2 This Agreement sets out the entire agreement between you and PrimeReact for your Contributions to
+        PrimeReact and overrides all other agreements or understandings.
+    6.3 If You or PrimeReact assign the rights or obligations received through this Agreement to a third party, 
+        as a condition of the assignment, that third party must agree in writing to abide by all the rights and
+        obligations in the Agreement.
+    6.4 The failure of either party to require performance by the other party of any provision of this
+        Agreement in one situation shall not affect the right of a party to require such performance at any time
+        in the future. A waiver of performance under a provision in one situation shall not be considered a
+        waiver of the performance of the provision in the future or a waiver of the provision in its entirety.
+    6.5 If any provision of this Agreement is found void and unenforceable, such provision will be
+        replaced to the extent possible with a provision that comes closest to the meaning of the original
+        provision and which is enforceable. The terms and conditions set forth in this Agreement shall apply
+        notwithstanding any failure of essential purpose of this Agreement or any limited remedy to the
+        maximum extent possible under law.
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
new file mode 100644
index 0000000000..023c156575
--- /dev/null
+++ b/DEVELOPMENT.md
@@ -0,0 +1,94 @@
+## Local Development
+
+This document intends to establish a series of steps to take in order to set up a local environment for developing on the primereact components with live reload, quick builds, and incremental builds.
+
+## Instructions
+
+You must have a local copy of this repository somewhere on your machine. From that repository. Before starting, make sure that the version for your `primereact/package.json` is a [valid semantic version](https://docs.npmjs.com/about-semantic-versioning) and does not contain a suffix such as `-SNAPSHOT`.
+
+Once that is done, you will run:
+
+**Unix/MacOS:**
+
+```shell
+~/primereact/ $ npm run dev:link
+```
+
+**Windows:**
+dev:link:windows
+
+```shell
+C:\primereact> npm run dev:link:windows
+```
+
+This will alter the bundler to only emit non-minified esm modules. The aliasing plugin has also been disabled for components. Once everything has been bundled (this can take a few minutes) you should keep this command running. It will allow for incremental builds as you develop in the `primereact/` directory.
+
+> Note: if you get "Error: JavaScript heap out of memory", it may help to set the following node variable: `export NODE_OPTIONS=--max-old-space-size=8192`.
+
+> Note: The build will be finished when the terminal displays: `[20xx-xx-xx 00:00:00] waiting for changes...`.
+
+This will create a local copy of the package that is used instead of the registry version.
+Unlike `npm link`, `yalc` does not use symlinks, which avoids common module resolution issues.
+
+### Open a new terminal and navigate to the `primereact/dist/` directory
+
+Run yalc publish
+
+```shell 
+~/primereact/ $ cd dist
+~/primereact/dist/ $ npx yalc publish
+```
+
+### Now change your directory to your local project you are developing on!
+
+```shell
+~/primereact/dist/ $ cd ~/my-cool-project
+~/my-cool-project/ $
+```
+
+The goal now is to link your primereact dependency to the yalc package that we configured earlier:
+
+```shell
+~/my-cool-project/ $ npx yalc add primereact
+```
+
+As long at the dependencies version that you symlinked satisfies the version that is specified in `my-cool-project/package.json` then the link should have worked.
+
+You can validate that by running:
+
+```shell
+~/my-cool-project/ $  npx yalc check
+
+Yalc dependencies found: [ 'primereact' ]
+```
+
+After doing your changes in the `primereact/` directory, you can publish the changes to your local project by running:
+
+```shell
+~/primereact/dist/ $ npx yalc push
+```
+
+## Live Development
+If you want to push your changes automatically to your local project, you can use the following:
+
+```shell
+~/primereact $ npm run dev:link -- -- --watch.onEnd="cd dist && npx yalc push"
+```
+This command will watch for changes in the `primereact/` directory and automatically push updates to your local project whenever you save a file. (note the double -- before `watch.onEnd`)
+
+### Congratulations!
+
+You can now live develop in the `primereact/` directory and your changes should be represented in your `my-cool-project/` build. (Assuming you are running vite or another bundler for `my-cool-project`)
+
+### Cleanup
+
+Once done, you can clean up with:
+
+```shell
+~/my-cool-project/ $ yalc remove primereact
+~/my-cool-project/ $ rm -rf yalc.lock .yalc
+~/my-cool-project/ $ npm install primereact@latest
+```
+
+> Note: `yalc` stores the published package in `~/.yalc/primereact` and uses file references in your project.  
+> This avoids typical pitfalls of `npm link`, such as duplicated React versions or broken module scopes.
diff --git a/LICENSE.md b/LICENSE.md
index 9020d76ba5..049848cd38 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2019 PrimeTek
+Copyright (c) 2016-2025 PrimeTek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
\ No newline at end of file
+THE SOFTWARE.
diff --git a/README.md b/README.md
index cb69e494f9..88bbb8795c 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,67 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![npm version](https://badge.fury.io/js/primereact.svg)](https://badge.fury.io/js/primereact)
+[![primereact](https://snyk.io/advisor/npm-package/primereact/badge.svg)](https://snyk.io/advisor/npm-package/primereact)
+![NPM Downloads](https://img.shields.io/npm/dm/primereact?color=purple)
+[![Actions CI](https://github.com/primefaces/primereact/workflows/NodeJS%20CI/badge.svg)](https://github.com/primefaces/primereact/actions/workflows/node.js.yml)
+[![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)
+[![Stackoverflow](https://img.shields.io/badge/StackOverflow-primereact-chocolate.svg)](https://stackoverflow.com/questions/tagged/primereact)
+[![Prime Discussions](https://img.shields.io/github/discussions-search?query=org%3Aprimefaces&logo=github&label=Prime%20Discussions&link=https%3A%2F%2Fgithub.com%2Forgs%2Fprimefaces%2Fdiscussions)](https://github.com/orgs/primefaces/discussions)
 
-[![PrimeReact Hero](https://www.primefaces.org/wp-content/uploads/2020/03/primereact-github-02032020-2.jpg "PrimeReact Hero")](https://www.primefaces.org/primereact)
+[![PrimeReact Hero](https://www.primefaces.org/static/social/primereact-preview.jpg)](https://www.primereact.org)
 
 # PrimeReact
 
-PrimeReact is a rich set of open source UI Components for React.
-
-[![PrimeReact Logo](https://www.primefaces.org/wp-content/uploads/2017/09/primereact-transparent-250.png "PrimeReact")](https://www.primefaces.org/primereact)
-
-See [PrimeReact homepage](https://www.primefaces.org/react) for live showcase and documentation.
+PrimeReact is a rich set of open source UI Components for React. See [PrimeReact homepage](https://primereact.org/) for live showcase and documentation. 
 
 ## Download
 
-PrimeReact is available at npm, if you have an existing application run the following command to download it to your project.
+PrimeReact is available at [npm](https://www.npmjs.com/package/primereact).
 
 ```
-npm install primereact --save
-npm install primeicons --save
-```
+# Using npm
+npm install primereact
 
-## Import
+# Using yarn
+yarn add primereact
 
-```javascript
-//import {ComponentName} from 'primereact/{componentname}';
-import {Dialog} from 'primereact/dialog';
-import {Accordion,AccordionTab} from 'primereact/accordion';
+# Using pnpm
+pnpm add primereact
 ```
 
-## Dependencies
+## Import
 
-Majority of PrimeReact components (95%) are native and there are some exceptions having 3rd party dependencies such as Google Maps for GMap.
+Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.
 
-In addition, components require PrimeIcons for icons, classNames package to manage style classes and react-transition-group for animations.
+```javascript
+//import { ComponentName } from 'primereact/{componentname}';
+import { Button } from 'primereact/button';
 
-```json
-dependencies: {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-transition-group": "^2.2.1",
-    "classnames": "^2.2.5",
-    "primeicons": "^2.0.0"
+export default function MyComponent() {
+  return (
+    <Button label="PrimeReact" />
+  )
 }
 ```
 
-## Styles
-The css dependencies are as follows, note that you may change the theme with another one of your choice.
+## Theming
 
-```
-primereact/resources/themes/nova-light/theme.css
-primereact/resources/primereact.min.css
-primeicons/primeicons.css
-```
+PrimeReact has two theming modes; styled or unstyled.
+
+**Styled Mode**
 
-If you are using a bundler such as webpack with a css loader you may also import them to your main application component, an example from create-react-app would be.
+Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the [Themes](https://primereact.org/theming) section for the complete list of available themes to choose from.
 
 ```javascript
-import 'primereact/resources/themes/nova-light/theme.css';
-import 'primereact/resources/primereact.min.css';
-import 'primeicons/primeicons.css';
+// theme
+import 'primereact/resources/themes/lara-light-cyan/theme.css';
 ```
 
-## QuickStart
+**Unstyled Mode**
 
-An [example application](https://github.com/primefaces/primereact-quickstart) based on create-react-app is available at github.
+Unstyled mode is disabled by default for all components. Using the PrimeReact context, set `unstyled` as true to enable it globally. Visit the [Unstyled mode](https://primereact.org/unstyled) documentation for more information and examples.
 
-## TypeScript
+## Contributors
 
-Typescript is fully supported as type definition files are provided in the npm package of PrimeReact. A sample [typescript-primereact application](https://github.com/primefaces/primereact-typescript-quickstart) is available as well at github.
+<a href="https://github.com/primefaces/primereact/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=primefaces/primereact" />
+</a>
diff --git a/api-scripts/build-apidoc.js b/api-scripts/build-apidoc.js
new file mode 100644
index 0000000000..2ba9ce6aaa
--- /dev/null
+++ b/api-scripts/build-apidoc.js
@@ -0,0 +1,441 @@
+const TypeDoc = require('typedoc');
+const path = require('path');
+const fs = require('fs');
+
+const rootDir = path.resolve(__dirname, '../');
+const outputPath = path.resolve(rootDir, 'components/doc/common/apidoc');
+
+const staticMessages = {
+    methods: "Defines methods that can be accessed by the component's reference.",
+    callbacks: 'Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.',
+    functions: 'Defines the custom functions used by the module.',
+    events: "Defines the custom events used by the component's callbacks.",
+    interfaces: 'Defines the custom interfaces used by the module.',
+    types: 'Defines the custom types used by the module.'
+};
+
+const app = new TypeDoc.Application();
+
+// If you want TypeDoc to load tsconfig.json / typedoc.json files
+app.options.addReader(new TypeDoc.TSConfigReader());
+app.options.addReader(new TypeDoc.TypeDocReader());
+
+app.bootstrap({
+    // typedoc options here
+    name: 'PrimeReact',
+    entryPoints: [`components/lib`],
+    entryPointStrategy: 'expand',
+    tsconfig: 'api-scripts/tsconfig.json',
+    hideGenerator: true,
+    excludeExternals: true,
+    includeVersion: true,
+    searchInComments: true,
+    disableSources: true,
+    logLevel: 'Error',
+    sort: ['source-order'],
+    exclude: ['node_modules', 'components/lib/**/*.js'],
+    externalSymbolLinkMappings: {
+        '@types/react': {
+            'React.ReactNode': 'https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts',
+            'React.CSSProperties': 'https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts'
+        }
+    }
+});
+
+const project = app.convert();
+
+if (project) {
+    const doc = {};
+
+    const parseText = (text) => {
+        return text.replace(/&#123;/g, '{').replace(/&#125;/g, '}');
+    };
+
+    project.children.forEach((module) => {
+        const { name, comment } = module;
+
+        // if (name !== 'datatable') return; // REMOVE
+
+        const description = comment && comment.summary.map((s) => s.text || '').join(' ');
+
+        doc[name] = {
+            description
+        };
+
+        const module_component_group = module.groups.find((g) => g.title === 'Component');
+        const module_properties_group = module.groups.find((g) => g.title === 'Properties');
+
+        module_component_group &&
+            module_component_group.children.forEach((component) => {
+                const description =
+                    component.comment &&
+                    component.comment.summary
+                        .map((s) => {
+                            const text = s.text || '';
+                            const splittedText = text.split('_');
+
+                            return splittedText[1] ? splittedText[1] : text;
+                        })
+                        .join(' ');
+
+                !doc[name]['components'] && (doc[name]['components'] = {});
+
+                const methods = {
+                    description: staticMessages['methods'],
+                    values: []
+                };
+                const component_method_group = component.groups && component.groups.find((g) => g.title === 'Methods');
+
+                component_method_group &&
+                    component_method_group.children.forEach((method) => {
+                        const signature = method.getAllSignatures()[0];
+
+                        methods.values.push({
+                            name: signature.name,
+                            parameters: signature.parameters.map((param) => {
+                                return {
+                                    name: param.name,
+                                    type: param.type.toString(),
+                                    description: param.comment && param.comment.summary.map((s) => s.text || '').join(' ')
+                                };
+                            }),
+                            returnType: signature.type.toString(),
+                            description: signature.comment && signature.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                const component_props_id = component.extendedTypes && component.extendedTypes[0].typeArguments && component.extendedTypes[0].typeArguments[0] && component.extendedTypes[0].typeArguments[0]._target;
+                const component_properties = module_properties_group && module_properties_group.children.find((c) => (component_props_id ? c.id === component_props_id : true));
+
+                const props = {
+                    description: '',
+                    values: []
+                };
+                const callbacks = {
+                    description: staticMessages['callbacks'],
+                    values: []
+                };
+
+                if (component_properties) {
+                    let collected_properties = [component_properties];
+
+                    // Calendar/DataTable have multiple subtypes for properties
+                    if (component_properties.type && component_properties.type.types) {
+                        component_properties.type.types.forEach((type) => {
+                            const type_props = module_properties_group.children.find((c) => (type._target ? c.id === type._target : true));
+
+                            if (type_props) {
+                                collected_properties = [type_props];
+
+                                return;
+                            }
+                        });
+                    }
+
+                    collected_properties.forEach((component_props) => {
+                        props.description = component_props.comment ? component_props.comment.summary.map((s) => parseText(s.text || '')).join(' ') : '';
+
+                        const component_props_group = component_props.groups && component_props.groups.find((g) => g.title === 'Properties');
+
+                        component_props_group &&
+                            component_props_group.children.forEach((prop) => {
+                                if ((!prop.inheritedFrom || (prop.inheritedFrom && !prop.inheritedFrom.toString().startsWith('Omit.data-pr-'))) && !prop.name.startsWith('data-pr-')) {
+                                    props.values.push({
+                                        name: prop.name,
+                                        optional: prop.flags.isOptional,
+                                        readonly: prop.flags.isReadonly,
+                                        type: prop.type.toString(),
+                                        default: prop.comment && prop.comment.getTag('@defaultValue') ? parseText(prop.comment.getTag('@defaultValue').content[0].text) : '', // TODO: Check
+                                        description: prop.comment && prop.comment.summary.map((s) => parseText(s.text || '')).join(' '),
+                                        deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0].text) : undefined
+                                    });
+                                }
+                            });
+
+                        const component_props_methods_group = component_props.groups && component_props.groups.find((g) => g.title === 'Methods');
+
+                        component_props_methods_group &&
+                            component_props_methods_group.children.forEach((method) => {
+                                const signature = method.getAllSignatures()[0];
+
+                                callbacks.values.push({
+                                    name: signature.name,
+                                    parameters: signature.parameters.map((param) => {
+                                        return {
+                                            name: param.name,
+                                            optional: param.flags.isOptional,
+                                            type: param.type.toString(),
+                                            description: param.comment && param.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                        };
+                                    }),
+                                    returnType: signature.type.toString(),
+                                    description: signature.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                });
+                            });
+                    });
+                }
+
+                // sorts
+                props.values.sort((a, b) => a.name.localeCompare(b.name));
+                methods.values.sort((a, b) => a.name.localeCompare(b.name));
+                callbacks.values.sort((a, b) => a.name.localeCompare(b.name));
+
+                doc[name]['components'][component.name] = {
+                    description,
+                    methods,
+                    props,
+                    callbacks
+                };
+            });
+
+        const module_model_group = module.groups.find((g) => g.title === 'Model');
+
+        module_model_group &&
+            module_model_group.children.forEach((model) => {
+                const event_props_description = model.comment && model.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['model'] && (doc[name]['model'] = {});
+
+                const props = {
+                    description: '',
+                    values: []
+                };
+                const callbacks = {
+                    description: staticMessages['callbacks'],
+                    values: []
+                };
+                const model_props_group = model.groups.find((g) => g.title === 'Properties');
+
+                model_props_group &&
+                    model_props_group.children.forEach((prop) => {
+                        props.values.push({
+                            name: prop.name,
+                            optional: prop.flags.isOptional,
+                            readonly: prop.flags.isReadonly,
+                            type: prop.type.toString(),
+                            default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                            description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                const model_props_methods_group = model.groups && model.groups.find((g) => g.title === 'Methods');
+
+                model_props_methods_group &&
+                    model_props_methods_group.children.forEach((method) => {
+                        const signature = method.getAllSignatures()[0];
+
+                        callbacks.values.push({
+                            name: signature.name,
+                            parameters: signature.parameters.map((param) => {
+                                return {
+                                    name: param.name,
+                                    optional: param.flags.isOptional,
+                                    type: param.type.toString(),
+                                    description: param.comment && param.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                };
+                            }),
+                            returnType: signature.type.toString(),
+                            description: signature.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                        });
+                    });
+
+                doc[name]['model'][model.name] = {
+                    description: event_props_description,
+                    props,
+                    callbacks
+                };
+            });
+
+        const module_functions_group = module.groups.find((g) => g.title === 'Functions');
+
+        module_functions_group &&
+            module_functions_group.children.forEach((method) => {
+                !doc[name]['functions'] &&
+                    (doc[name]['functions'] = {
+                        description: staticMessages['functions'],
+                        values: {}
+                    });
+
+                const signatures = method.getAllSignatures();
+
+                if (signatures && signatures.length > 0) {
+                    const signature = signatures[0];
+
+                    doc[name]['functions'].values[method.name] = {
+                        name: signature.name,
+                        parameters: signature.parameters.map((param) => {
+                            return {
+                                name: param.name,
+                                type: param.type.toString(),
+                                description: param.comment && param.comment.summary.map((s) => s.text || '').join(' ')
+                            };
+                        }),
+                        returnType: signature.type.toString(),
+                        description: signature.comment && signature.comment.summary.map((s) => s.text || '').join(' ')
+                    };
+                }
+            });
+
+        const module_events_group = module.groups.find((g) => g.title === 'Events');
+
+        module_events_group &&
+            module_events_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                const component_prop = event.comment && event.comment.getTag('@see') ? event.comment.getTag('@see').content[0].text : ''; // TODO: Check
+                const event_extendedBy = event.extendedBy && event.extendedBy.toString();
+
+                !doc[name]['events'] &&
+                    (doc[name]['events'] = {
+                        description: staticMessages['events'],
+                        values: {}
+                    });
+
+                const props = [];
+                const event_props_group = event.groups.find((g) => g.title === 'Properties');
+
+                event_props_group &&
+                    event_props_group.children.forEach((prop) => {
+                        props.push({
+                            name: prop.name,
+                            optional: prop.flags.isOptional,
+                            readonly: prop.flags.isReadonly,
+                            type: prop.type.toString(),
+                            //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                            description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                doc[name]['events'].values[event.name] = {
+                    description: event_props_description,
+                    relatedProp: component_prop,
+                    props,
+                    extendedBy: event_extendedBy
+                };
+            });
+
+        const module_interfaces_group = module.groups.find((g) => g.title === 'Interfaces');
+
+        module_interfaces_group &&
+            module_interfaces_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                const component_prop = event.comment && event.comment.getTag('@see') ? event.comment.getTag('@see').content[0].text : ''; // TODO: Check
+                const event_extendedBy = event.extendedBy && event.extendedBy.toString();
+                const event_extendedTypes = event.extendedTypes && event.extendedTypes.toString();
+
+                !doc[name]['interfaces'] &&
+                    (doc[name]['interfaces'] = {
+                        description: staticMessages['interfaces'],
+                        values: {}
+                    });
+
+                const props = [];
+                const callbacks = [];
+
+                if (event.groups) {
+                    const event_props_group = event.groups.find((g) => g.title === 'Properties');
+
+                    event_props_group &&
+                        event_props_group.children.forEach((prop) => {
+                            props.push({
+                                name: prop.name,
+                                optional: prop.flags.isOptional,
+                                readonly: prop.flags.isReadonly,
+                                type: prop.type.toString(),
+                                //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                                description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                            });
+                        });
+
+                    const event_methods_group = event.groups.find((g) => g.title === 'Methods');
+
+                    event_methods_group &&
+                        event_methods_group.children.forEach((method) => {
+                            const signature = method.getAllSignatures()[0];
+
+                            callbacks.push({
+                                name: signature.name,
+                                parameters: signature.parameters.map((param) => {
+                                    return {
+                                        name: param.name,
+                                        optional: param.flags.isOptional,
+                                        type: param.type.toString(),
+                                        description: param.comment && param.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                    };
+                                }),
+                                returnType: signature.type.toString(),
+                                description: signature.comment && signature.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                            });
+                        });
+                }
+
+                const signature = event.getAllSignatures();
+
+                if (signature && signature.length > 0) {
+                    const parameter = signature[0].parameters[0];
+
+                    props.push({
+                        name: `[${parameter.name}: ${parameter.type.toString()}]`,
+                        optional: parameter.flags.isOptional,
+                        readonly: parameter.flags.isReadonly,
+                        type: signature[0].type.toString(),
+                        //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                        description: signature[0].comment && signature[0].comment.summary.map((s) => s.text || '').join(' ')
+                    });
+                }
+
+                doc[name]['interfaces'].values[event.name] = {
+                    description: event_props_description,
+                    relatedProp: component_prop,
+                    props,
+                    callbacks,
+                    extendedBy: event_extendedBy,
+                    extendedTypes: event_extendedTypes
+                };
+            });
+
+        const module_types_group = module.groups.find((g) => g.title === 'Type Aliases');
+
+        module_types_group &&
+            module_types_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['types'] &&
+                    (doc[name]['types'] = {
+                        description: staticMessages['types'],
+                        values: {}
+                    });
+
+                let values = event.type.toString();
+                const declaration = event.type.declaration;
+
+                if (declaration) {
+                    const groups = declaration.groups && declaration.groups.find((g) => g.title === 'Properties');
+
+                    const map = {};
+
+                    groups &&
+                        groups.children.forEach((prop) => {
+                            const description = prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ');
+
+                            map[`${prop.name}${prop.flags.isOptional ? '?' : ''}`] = `${prop.type.toString()}, ${description ? '// ' + description : ''}`;
+                        });
+
+                    values = JSON.stringify(map, null, 4);
+                }
+
+                doc[name]['types'].values[event.name] = {
+                    values,
+                    description: event_props_description
+                };
+            });
+
+        // app.generateJson(module, `./api-generator/module-typedoc.json`);
+    });
+
+    const typedocJSON = JSON.stringify(doc, null, 4);
+
+    !fs.existsSync(outputPath) && fs.mkdirSync(outputPath);
+    fs.writeFileSync(path.resolve(outputPath, 'index.json'), typedocJSON);
+
+    // app.generateJson(project, `./api-generator/typedoc.json`);
+}
diff --git a/api-scripts/build-webtypes.js b/api-scripts/build-webtypes.js
new file mode 100644
index 0000000000..7f5ebc065b
--- /dev/null
+++ b/api-scripts/build-webtypes.js
@@ -0,0 +1,435 @@
+const TypeDoc = require('typedoc');
+const path = require('path');
+const fs = require('fs');
+
+const rootDir = path.resolve(__dirname, '../');
+const distDir = path.resolve(rootDir, 'dist');
+const outputPath = path.resolve(rootDir, 'components/doc/common/apidoc');
+
+const staticMessages = {
+    methods: "Defines methods that can be accessed by the component's reference.",
+    callbacks: 'Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.',
+    functions: 'Defines the custom functions used by the module.',
+    events: "Defines the custom events used by the component's callbacks.",
+    interfaces: 'Defines the custom interfaces used by the module.',
+    types: 'Defines the custom types used by the module.'
+};
+
+const app = new TypeDoc.Application();
+
+// If you want TypeDoc to load tsconfig.json / typedoc.json files
+app.options.addReader(new TypeDoc.TSConfigReader());
+app.options.addReader(new TypeDoc.TypeDocReader());
+
+const pkg = require(path.resolve(rootDir, 'package.json'));
+const library = {
+    name: 'PrimeReact',
+    version: pkg.version,
+    repository: pkg.repository,
+    license: pkg.license
+};
+
+const webTypes = {
+    $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
+    framework: 'react',
+    name: library.name,
+    version: library.version,
+    repository: library.repository,
+    license: library.license,
+    contributions: {
+        html: {
+            'types-syntax': 'typescript',
+            'description-markup': 'markdown',
+            tags: [],
+            attributes: []
+        }
+    }
+};
+
+app.bootstrap({
+    // typedoc options here
+    name: 'PrimeReact',
+    entryPoints: [`components/lib`],
+    entryPointStrategy: 'expand',
+    tsconfig: 'api-scripts/tsconfig.json',
+    hideGenerator: true,
+    excludeExternals: true,
+    includeVersion: true,
+    searchInComments: true,
+    disableSources: true,
+    logLevel: 'Error',
+    sort: ['source-order'],
+    exclude: ['node_modules', 'components/lib/**/*.js'],
+    externalSymbolLinkMappings: {
+        '@types/react': {
+            'React.ReactNode': 'https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts',
+            'React.CSSProperties': 'https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts'
+        }
+    }
+});
+
+const project = app.convert();
+
+if (project) {
+    const doc = {};
+
+    const parseText = (text) => {
+        return text.replace(/&#123;/g, '{').replace(/&#125;/g, '}');
+    };
+
+    project.children.forEach((module) => {
+        const { name, comment } = module;
+
+        const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
+        const description = comment && comment.summary.map((s) => s.text || '').join(' ');
+        let url = '';
+
+        if (description) {
+            const urlRegex = /\[(Live Demo)\]\((https?:\/\/[^\s)]+)\)/;
+            const urlMatch = description.match(urlRegex);
+
+            if (urlMatch && urlMatch[2]) {
+                url = urlMatch[2];
+            }
+        }
+
+        const tag = {
+            name: capitalizedName,
+            source: {
+                module: library.name,
+                symbol: capitalizedName
+            },
+            description,
+            'doc-url': url
+        };
+
+        webTypes.contributions.html.tags.push(tag);
+
+        doc[name] = {
+            description
+        };
+
+        const module_component_group = module.groups.find((g) => g.title === 'Component');
+
+        module_component_group &&
+            module_component_group.children.forEach((component) => {
+                const description =
+                    component.comment &&
+                    component.comment.summary
+                        .map((s) => {
+                            const text = s.text || '';
+                            const splittedText = text.split('_');
+
+                            return splittedText[1] ? splittedText[1] : text;
+                        })
+                        .join(' ');
+
+                !doc[name]['components'] && (doc[name]['components'] = {});
+
+                const methods = {
+                    description: staticMessages['methods'],
+                    values: []
+                };
+                const component_method_group = component.groups && component.groups.find((g) => g.title === 'Methods');
+
+                component_method_group &&
+                    component_method_group.children.forEach((method) => {
+                        const signature = method.getAllSignatures()[0];
+
+                        methods.values.push({
+                            name: signature.name,
+                            parameters: signature.parameters.map((param) => {
+                                return {
+                                    name: param.name,
+                                    type: param.type.toString(),
+                                    description: param.comment && param.comment.summary.map((s) => s.text || '').join(' ')
+                                };
+                            }),
+                            returnType: signature.type.toString(),
+                            description: signature.comment && signature.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                const component_props_id = component.extendedTypes && component.extendedTypes[0].typeArguments && component.extendedTypes[0].typeArguments[0] && component.extendedTypes[0].typeArguments[0]._target;
+                const module_properties_group = module.groups.find((g) => g.title === 'Properties');
+                const component_props = module_properties_group && module_properties_group.children.find((c) => (component_props_id ? c.id === component_props_id : true));
+
+                const props = [];
+                const callbacks = [];
+
+                if (component_props) {
+                    //props.description = component_props.comment ? component_props.comment.summary.map((s) => parseText(s.text || '')).join(' ') : '';
+
+                    const component_props_group = component_props.groups && component_props.groups.find((g) => g.title === 'Properties');
+
+                    component_props_group &&
+                        component_props_group.children.forEach((prop) => {
+                            if (!prop.inheritedFrom || (prop.inheritedFrom && !prop.inheritedFrom.toString().startsWith('Omit.data-pr-'))) {
+                                props.push({
+                                    name: prop.name,
+                                    default: prop.comment && prop.comment.getTag('@defaultValue') ? parseText(prop.comment.getTag('@defaultValue').content[0].text) : 'null', // TODO: Check
+                                    description: prop.comment && prop.comment.summary.map((s) => parseText(s.text || '')).join(' '),
+                                    value: {
+                                        kind: 'expression',
+                                        type: prop.type.toString()
+                                    }
+                                    //optional: prop.flags.isOptional,
+                                    //readonly: prop.flags.isReadonly,
+                                    //deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0].text) : undefined
+                                });
+                            }
+                        });
+
+                    const component_props_methods_group = component_props.groups && component_props.groups.find((g) => g.title === 'Methods');
+
+                    component_props_methods_group &&
+                        component_props_methods_group.children.forEach((method) => {
+                            const signature = method.getAllSignatures()[0];
+
+                            callbacks.push({
+                                name: signature.name,
+                                description: signature.comment.summary.map((s) => parseText(s.text || '')).join(' '),
+                                arguments: signature.parameters.map((param) => {
+                                    return {
+                                        name: param.name,
+                                        // optional: param.flags.isOptional,
+                                        type: param.type.toString(),
+                                        description: param.comment && param.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                    };
+                                })
+                            });
+                        });
+                }
+
+                tag.attributes = props;
+                tag.events = callbacks;
+
+                doc[name]['components'][component.name] = {
+                    description,
+                    methods,
+                    props,
+                    callbacks
+                };
+            });
+
+        const module_model_group = module.groups.find((g) => g.title === 'Model');
+
+        module_model_group &&
+            module_model_group.children.forEach((model) => {
+                const event_props_description = model.comment && model.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['model'] && (doc[name]['model'] = {});
+
+                const props = {
+                    description: '',
+                    values: []
+                };
+                const model_props_group = model.groups.find((g) => g.title === 'Properties');
+
+                model_props_group &&
+                    model_props_group.children.forEach((prop) => {
+                        props.values.push({
+                            name: prop.name,
+                            optional: prop.flags.isOptional,
+                            readonly: prop.flags.isReadonly,
+                            type: prop.type.toString(),
+                            default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                            description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                doc[name]['model'][model.name] = {
+                    description: event_props_description,
+                    props
+                };
+            });
+
+        const module_functions_group = module.groups.find((g) => g.title === 'Functions');
+
+        module_functions_group &&
+            module_functions_group.children.forEach((method) => {
+                !doc[name]['functions'] &&
+                    (doc[name]['functions'] = {
+                        description: staticMessages['functions'],
+                        values: {}
+                    });
+
+                const signatures = method.getAllSignatures();
+
+                if (signatures && signatures.length > 0) {
+                    const signature = signatures[0];
+
+                    doc[name]['functions'].values[method.name] = {
+                        name: signature.name,
+                        parameters: signature.parameters.map((param) => {
+                            return {
+                                name: param.name,
+                                type: param.type.toString(),
+                                description: param.comment && param.comment.summary.map((s) => s.text || '').join(' ')
+                            };
+                        }),
+                        returnType: signature.type.toString(),
+                        description: signature.comment && signature.comment.summary.map((s) => s.text || '').join(' ')
+                    };
+                }
+            });
+
+        const module_events_group = module.groups.find((g) => g.title === 'Events');
+
+        module_events_group &&
+            module_events_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                const component_prop = event.comment && event.comment.getTag('@see') ? event.comment.getTag('@see').content[0].text : ''; // TODO: Check
+                const event_extendedBy = event.extendedBy && event.extendedBy.toString();
+
+                !doc[name]['events'] &&
+                    (doc[name]['events'] = {
+                        description: staticMessages['events'],
+                        values: {}
+                    });
+
+                const props = [];
+                const event_props_group = event.groups.find((g) => g.title === 'Properties');
+
+                event_props_group &&
+                    event_props_group.children.forEach((prop) => {
+                        props.push({
+                            name: prop.name,
+                            optional: prop.flags.isOptional,
+                            readonly: prop.flags.isReadonly,
+                            type: prop.type.toString(),
+                            //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                            description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                        });
+                    });
+
+                doc[name]['events'].values[event.name] = {
+                    description: event_props_description,
+                    relatedProp: component_prop,
+                    props,
+                    extendedBy: event_extendedBy
+                };
+            });
+
+        const module_interfaces_group = module.groups.find((g) => g.title === 'Interfaces');
+
+        module_interfaces_group &&
+            module_interfaces_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                const component_prop = event.comment && event.comment.getTag('@see') ? event.comment.getTag('@see').content[0].text : ''; // TODO: Check
+                const event_extendedBy = event.extendedBy && event.extendedBy.toString();
+                const event_extendedTypes = event.extendedTypes && event.extendedTypes.toString();
+
+                !doc[name]['interfaces'] &&
+                    (doc[name]['interfaces'] = {
+                        description: staticMessages['interfaces'],
+                        values: {}
+                    });
+
+                const props = [];
+                const callbacks = [];
+
+                if (event.groups) {
+                    const event_props_group = event.groups.find((g) => g.title === 'Properties');
+
+                    event_props_group &&
+                        event_props_group.children.forEach((prop) => {
+                            props.push({
+                                name: prop.name,
+                                optional: prop.flags.isOptional,
+                                readonly: prop.flags.isReadonly,
+                                type: prop.type.toString(),
+                                //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                                description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ')
+                            });
+                        });
+
+                    const event_methods_group = event.groups.find((g) => g.title === 'Methods');
+
+                    event_methods_group &&
+                        event_methods_group.children.forEach((method) => {
+                            const signature = method.getAllSignatures()[0];
+
+                            callbacks.push({
+                                name: signature.name,
+                                parameters: signature.parameters.map((param) => {
+                                    return {
+                                        name: param.name,
+                                        optional: param.flags.isOptional,
+                                        type: param.type.toString(),
+                                        description: param.comment && param.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                                    };
+                                }),
+                                returnType: signature.type.toString(),
+                                description: signature.comment && signature.comment.summary.map((s) => parseText(s.text || '')).join(' ')
+                            });
+                        });
+                }
+
+                const signature = event.getAllSignatures();
+
+                if (signature && signature.length > 0) {
+                    const parameter = signature[0].parameters[0];
+
+                    props.push({
+                        name: `[${parameter.name}: ${parameter.type.toString()}]`,
+                        optional: parameter.flags.isOptional,
+                        readonly: parameter.flags.isReadonly,
+                        type: signature[0].type.toString(),
+                        //default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
+                        description: signature[0].comment && signature[0].comment.summary.map((s) => s.text || '').join(' ')
+                    });
+                }
+
+                doc[name]['interfaces'].values[event.name] = {
+                    description: event_props_description,
+                    relatedProp: component_prop,
+                    props,
+                    callbacks,
+                    extendedBy: event_extendedBy,
+                    extendedTypes: event_extendedTypes
+                };
+            });
+
+        const module_types_group = module.groups.find((g) => g.title === 'Type Aliases');
+
+        module_types_group &&
+            module_types_group.children.forEach((event) => {
+                const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+
+                !doc[name]['types'] &&
+                    (doc[name]['types'] = {
+                        description: staticMessages['types'],
+                        values: {}
+                    });
+
+                let values = event.type.toString();
+                const declaration = event.type.declaration;
+
+                if (declaration) {
+                    const groups = declaration.groups && declaration.groups.find((g) => g.title === 'Properties');
+
+                    const map = {};
+
+                    groups &&
+                        groups.children.forEach((prop) => {
+                            const description = prop.comment && prop.comment.summary.map((s) => s.text || '').join(' ');
+
+                            map[`${prop.name}${prop.flags.isOptional ? '?' : ''}`] = `${prop.type.toString()}, ${description ? '// ' + description : ''}`;
+                        });
+
+                    values = JSON.stringify(map, null, 4);
+                }
+
+                doc[name]['types'].values[event.name] = {
+                    values,
+                    description: event_props_description
+                };
+            });
+    });
+
+    const webTypesJson = JSON.stringify(webTypes, null, 4);
+
+    !fs.existsSync(distDir) && fs.mkdirSync(distDir);
+    fs.writeFileSync(path.resolve(distDir, 'web-types.json'), webTypesJson);
+}
diff --git a/api-scripts/tsconfig.json b/api-scripts/tsconfig.json
new file mode 100644
index 0000000000..80f5cf6051
--- /dev/null
+++ b/api-scripts/tsconfig.json
@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": false,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "incremental": true
+    },
+    "include": ["../next-env.d.ts", "../**/*.ts", "../**/*.tsx"],
+    "exclude": ["../node_modules", "../dist"]
+}
diff --git a/components/analytics/analytics.js b/components/analytics/analytics.js
new file mode 100644
index 0000000000..650cc15945
--- /dev/null
+++ b/components/analytics/analytics.js
@@ -0,0 +1,44 @@
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import React, { useEffect } from 'react';
+
+export const GTagManager = () => {
+    const router = useRouter();
+
+    useEffect(() => {
+        const handleRouteChange = (url) => {
+            pageview(url);
+        };
+
+        router.events.on('routeChangeComplete', handleRouteChange);
+
+        return () => {
+            router.events.off('routeChangeComplete', handleRouteChange);
+        };
+    }, [router.events]);
+
+    useEffect(() => {
+        pageview(router.pathname);
+    }, [router.pathname]);
+
+    const pageview = (url) => {
+        window.gtag('config', 'G-FZJEC89ZVF', {
+            page_path: url
+        });
+    };
+
+    return (
+        <>
+            <Script src="https://www.googletagmanager.com/gtag/js?id=G-FZJEC89ZVF" />
+            <Script id="google-analytics">
+                {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          
+          gtag('config', 'G-FZJEC89ZVF');
+          `}
+            </Script>
+        </>
+    );
+};
diff --git a/components/demo/DeferredDemo.js b/components/demo/DeferredDemo.js
new file mode 100644
index 0000000000..bcf4979e9f
--- /dev/null
+++ b/components/demo/DeferredDemo.js
@@ -0,0 +1,50 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const DeferredDemo = ({ options, children, onLoad }) => {
+    const [visible, setVisible] = useState(false);
+
+    const timeoutRef = useRef(null);
+    const observerRef = useRef(null);
+    const elementRef = useRef(null);
+
+    useEffect(() => {
+        const handleIntersection = ([entry]) => {
+            clearTimeout(timeoutRef.current);
+
+            if (entry.isIntersecting) {
+                timeoutRef.current = setTimeout(() => {
+                    setVisible(true);
+                    observerRef.current.unobserve(elementRef.current);
+                    onLoad();
+                }, 350);
+            }
+        };
+
+        observerRef.current = new IntersectionObserver(handleIntersection, options);
+
+        if (elementRef.current) {
+            observerRef.current.observe(elementRef.current);
+        }
+
+        return () => {
+            if (!visible && elementRef.current) {
+                observerRef.current.unobserve(elementRef.current); // eslint-disable-line react-hooks/exhaustive-deps
+            }
+
+            clearTimeout(timeoutRef.current);
+        };
+    }, [visible, onLoad, options]);
+
+    return (
+        <>
+            {!visible && (
+                <div ref={elementRef} className="card">
+                    <div className="deferred-demo-loading" />
+                </div>
+            )}
+            {visible && children}
+        </>
+    );
+};
+
+export default DeferredDemo;
diff --git a/components/doc/accessibility/colorsdoc.js b/components/doc/accessibility/colorsdoc.js
new file mode 100644
index 0000000000..ddc046e3b0
--- /dev/null
+++ b/components/doc/accessibility/colorsdoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ColorsDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Colors on a web page should aim a contrast ratio of at least <strong>4.5:1</strong> and consider a selection of colors that do not cause vibration.
+                </p>
+            </DocSectionText>
+            <h3>Good Contrast</h3>
+            <p className="doc-section-description">Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.</p>
+
+            <div className="flex">
+                <div className="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-600" style={{ borderRadius: '10px' }}>
+                    <span className="text-white">GOOD</span>
+                </div>
+                <div className="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-blue-400" style={{ borderRadius: '10px' }}>
+                    <span className="text-white">BAD</span>
+                </div>
+            </div>
+
+            <h3>Vibration</h3>
+            <p className="doc-section-description">Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.</p>
+
+            <div className="flex">
+                <div className="h-8rem w-8rem flex justify-content-center align-items-center mr-5 font-bold bg-pink-500" style={{ borderRadius: '10px' }}>
+                    <span className="text-blue-500">VIBRATE</span>
+                </div>
+            </div>
+
+            <h3>Dark Mode</h3>
+            <p className="doc-section-description">Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.</p>
+
+            <div className="flex">
+                <div className="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style={{ borderRadius: '10px' }}>
+                    <span className="text-indigo-500">Indigo 500</span>
+                    <i className="text-indigo-500 pi pi-times-circle mt-3 text-xl" />
+                </div>
+                <div className="h-8rem w-8rem flex flex-column justify-content-center align-items-center mr-5 font-bold bg-gray-900" style={{ borderRadius: '10px' }}>
+                    <span className="text-indigo-200">Indigo 200</span>
+                    <i className="text-indigo-200 pi pi-check-circle mt-3 text-xl" />
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/accessibility/formcontrolsdoc.js b/components/doc/accessibility/formcontrolsdoc.js
new file mode 100644
index 0000000000..0facec92a9
--- /dev/null
+++ b/components/doc/accessibility/formcontrolsdoc.js
@@ -0,0 +1,47 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function FormControlsDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be
+                    used with space key as well to trigger.
+                </p>
+            </DocSectionText>
+            <CodeHighlight>
+                {`
+<button onClick={e => console.log(e)}>Click</button>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">On the other hand, a fancy css based button using a div has no keyboard or screen reader support.</p>
+            <CodeHighlight>
+                {`
+<div className="fancy-button" onClick={e => console.log(e)}>Click</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                <i>tabIndex</i> is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form
+                controls should be preferred.
+            </p>
+            <CodeHighlight>
+                {`
+<div className="fancy-button" onClick={e => console.log(e)} onKeyDown={e => e.code === 'Space' && console.log(e) } tabIndex="0">Click</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                Form components must be related to another element that describes what the form element is used for. This is usually achieved with the <i>label</i> element.
+            </p>
+            <CodeHighlight>
+                {`
+<label htmlFor="myinput">Username:</label>
+<input id="myinput" type="text" name="username" />
+`}
+            </CodeHighlight>
+        </>
+    );
+}
diff --git a/components/doc/accessibility/introductiondoc.js b/components/doc/accessibility/introductiondoc.js
new file mode 100644
index 0000000000..b1e44448cf
--- /dev/null
+++ b/components/doc/accessibility/introductiondoc.js
@@ -0,0 +1,56 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function IntroductionDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p className="notification">
+                    Accessibility is a major concern of the Prime UI libraries and PrimeReact is no exception. PrimeTek teams have initiated a significant process to review and enhance the accessibility features of the components. This guide
+                    documents the foundation of the general guidelines that PrimeReact will follow and each component documentation will have a separate <b>Accessibility</b> section that states the keyboard support, screen reader compatibility, the
+                    implementation details along with tips to achieve WCAG compliancy. This work has been completed for PrimeVue and PrimeNG and currently being ported to PrimeReact to be finalized in Q4 2023.
+                </p>
+                <p>
+                    According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are
+                    crucial to ensure content can be consumed by anyone.
+                </p>
+                <p>Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories;</p>
+            </DocSectionText>
+
+            <h3>Visual Impairments</h3>
+            <p className="doc-section-description">
+                Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page
+                developers are required to make sure content is readable by the readers. Popular readers are{' '}
+                <a href="https://www.nvaccess.org/" alt="NVDA Reader">
+                    NVDA
+                </a>
+                ,{' '}
+                <a href="https://www.freedomscientific.com/Products/software/JAWS/" alt="JAWS Reader">
+                    JAWS
+                </a>{' '}
+                and{' '}
+                <a href="https://www.chromevox.com/" alt="ChromeVox Reader">
+                    ChromeVox
+                </a>
+                .
+            </p>
+
+            <h3>Hearing Impairments</h3>
+            <p className="doc-section-description">
+                Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is
+                providing textual alternatives, transcripts and captions for content with audio.
+            </p>
+
+            <h3>Mobility Impairments</h3>
+            <p className="doc-section-description">
+                People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a
+                trackpad remain as solutions for people who are not able to utilize a mouse.
+            </p>
+
+            <h3>Cognitive Impairments</h3>
+            <p className="doc-section-description">
+                Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive
+                impairments result in better design for any user.
+            </p>
+        </>
+    );
+}
diff --git a/components/doc/accessibility/semantichtmldoc.js b/components/doc/accessibility/semantichtmldoc.js
new file mode 100644
index 0000000000..f29e950c9d
--- /dev/null
+++ b/components/doc/accessibility/semantichtmldoc.js
@@ -0,0 +1,56 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SemanticHTMLDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular <i>div</i>{' '}
+                    elements with classes are used. Consider the following example that do not mean too much for readers.
+                </p>
+            </DocSectionText>
+
+            <CodeHighlight>
+                {`
+<div className="header">
+    <div className="header-text">Header</div>
+</div>
+
+<div className="nav"></div>
+
+<div className="main">
+    <div className="content">
+    </div>
+
+    <div className="sidebar">
+    </div>
+</div>
+
+<div className="footer">
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">Same layout can be achieved using the semantic elements with screen reader support built-in.</p>
+            <CodeHighlight>
+                {`
+<header>
+    <h1>Header</h1>
+</header>
+
+<nav></nav>
+
+<main>
+    <article></article>
+
+    <aside></aside>
+</main>
+
+<footer>
+</footer>
+`}
+            </CodeHighlight>
+        </>
+    );
+}
diff --git a/components/doc/accessibility/waiariadoc.js b/components/doc/accessibility/waiariadoc.js
new file mode 100644
index 0000000000..58195e4f72
--- /dev/null
+++ b/components/doc/accessibility/waiariadoc.js
@@ -0,0 +1,81 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function WAIAriaDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components
+                    such as a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeReact. These types of
+                    components must provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized.
+                </p>
+                <p>
+                    ARIA consists of roles, properties and attributes. <b>Roles</b> define what the element is mainly used for e.g. <i>checkbox</i>, <i>dialog</i>, <i>tablist</i> whereas <b>States</b> and <b>Properties</b> define the metadata of the
+                    element like <i>aria-checked</i>, <i>aria-disabled</i>.
+                </p>
+
+                <p>Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.</p>
+            </DocSectionText>
+            <CodeHighlight>
+                {`
+<input type="checkbox" value="Prime" name="ui" checked>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot
+                be read by a reader.
+            </p>
+            <CodeHighlight>
+                {`
+<div className="fancy-checkbox">
+    {checked && <i className="checked-icon"></i>}
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of <i>aria-labelledby</i> as a replacement of the <i>label</i> tag with htmlFor.
+            </p>
+            <CodeHighlight>
+                {`
+<span id="chk-label">Remember Me</span>
+<div className="fancy-checkbox" role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="chk-label"
+    onClick="() => toggle()" onKeyDown="(e) => e.keyCode === 32 && toggle()">
+    {checked && <i className="checked-icon"></i>}
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">
+                However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the
+                usage of <i>p-hidden-accessible</i>
+                that hides the elements from the user but not from the screen reader.
+            </p>
+            <CodeHighlight>
+                {`
+<label htmlFor="chkbox">Remember Me</label>
+<div className="fancy-checkbox" onClick="() => toggle()">
+    <input className="p-hidden-accessible" type="checkbox" id="chkbox" onFocus="() => updateParentVisuals()" onBlur="() => updateParentVisuals()"
+        onKeyDown="(e) => e.keyCode === 32 && updateParentVisuals()">
+    {checked && <i className="checked-icon"></i>}
+</div>
+`}
+            </CodeHighlight>
+
+            <p className="doc-section-description">A working sample is the PrimeReact checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.</p>
+
+            <div className="card flex align-items-center justify-content-center">
+                <label htmlFor="binary" className="mr-2">
+                    Remember Me
+                </label>
+                <Checkbox inputId="binary" checked={checked} onChange={(e) => setChecked(e.checked)} />
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/accessibility/wcagdoc.js b/components/doc/accessibility/wcagdoc.js
new file mode 100644
index 0000000000..696b871505
--- /dev/null
+++ b/components/doc/accessibility/wcagdoc.js
@@ -0,0 +1,26 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function WCAGDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Correct page structure with the aid of assistive technologies are the core ingridients for an accessible web content. HTML is based on an accessible foundation, form controls can be used by keyboard by default and semantic HTML is
+                    easier to be processed by a screen reader.
+                </p>
+                <p>
+                    <a href="https://www.w3.org/WAI/standards-guidelines/wcag/" alt="WCAG Website">
+                        WCAG
+                    </a>{' '}
+                    refers to <strong>Web Content Accessibility Guideline</strong>, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more
+                    accessible. PrimeReact components aim high level of WCAG compliancy in the near future.
+                </p>
+
+                <p>
+                    Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are <a href="https://www.section508.gov/manage/laws-and-policies/">Section 508</a> in the US and{' '}
+                    <a href="https://digital-strategy.ec.europa.eu/en/policies/web-accessibility">Web Accessibility Directive</a> of the European Union.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/accordion/accessibilitydoc.js b/components/doc/accordion/accessibilitydoc.js
new file mode 100644
index 0000000000..1c4ef9fa77
--- /dev/null
+++ b/components/doc/accordion/accessibilitydoc.js
@@ -0,0 +1,78 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Accordion header elements have a <i>button</i> role and use <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read a header element defaults to the
+                value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>headerProps</i> property.
+            </p>
+            <p>
+                The content uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.
+            </p>
+
+            <h3>Header Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/accordion/basicdoc.js b/components/doc/accordion/basicdoc.js
new file mode 100644
index 0000000000..fd1960aecd
--- /dev/null
+++ b/components/doc/accordion/basicdoc.js
@@ -0,0 +1,144 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Accordion activeIndex={0}>
+    <AccordionTab header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
+            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+            Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
+            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </AccordionTab>
+</Accordion>
+        `,
+        javascript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Accordion consists of one or more AccordionTab elements which are collapsed by default. Tab to expand initially can be defined with the <i>activeIndex</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Accordion activeIndex={0}>
+                    <AccordionTab header="Header I">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header II">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header III">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </AccordionTab>
+                </Accordion>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/accordion/controlleddoc.js b/components/doc/accordion/controlleddoc.js
new file mode 100644
index 0000000000..0ffb23313c
--- /dev/null
+++ b/components/doc/accordion/controlleddoc.js
@@ -0,0 +1,177 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+import { Button } from '@/components/lib/button/Button';
+import { useState } from 'react';
+
+export function ControlledDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(null);
+
+    const code = {
+        basic: `
+<div className="flex flex-wrap justify-content-end gap-2 mb-3">
+    <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+    <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+    <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+</div>
+<Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+    <AccordionTab header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+            Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </AccordionTab>
+</Accordion>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Button } from 'primereact/button';
+
+export default function ControlledDoc() {
+    const [activeIndex, setActiveIndex] = useState();
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+            </div>
+            <Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Button } from 'primereact/button';
+
+export default function ControlledDoc() {
+    const [activeIndex, setActiveIndex] = useState<number | number[]>();
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+            </div>
+            <Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Accordion can be controlled programmatically using a binding to <i>activeIndex</i> along with <i>onTabChange</i> event to update the active index.
+                </p>
+            </DocSectionText>
+            <div className="accordion-demo">
+                <div className="card">
+                    <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                        <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                        <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                        <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+                    </div>
+                    <Accordion multiple activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                        <AccordionTab header="Header I">
+                            <p className="m-0">
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                                id est laborum.
+                            </p>
+                        </AccordionTab>
+                        <AccordionTab header="Header II">
+                            <p className="m-0">
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                            </p>
+                        </AccordionTab>
+                        <AccordionTab header="Header III">
+                            <p className="m-0">
+                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
+                                in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
+                                minus.
+                            </p>
+                        </AccordionTab>
+                    </Accordion>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/accordion/disableddoc.js b/components/doc/accordion/disableddoc.js
new file mode 100644
index 0000000000..fe7bfb691c
--- /dev/null
+++ b/components/doc/accordion/disableddoc.js
@@ -0,0 +1,148 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Accordion activeIndex={0}>
+    <AccordionTab header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+            Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header IV" disabled></AccordionTab>
+</Accordion>
+        `,
+        javascript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header IV" disabled></AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header IV" disabled></AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>disabled</i> property of an AccordionTab prevents user interaction.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Accordion activeIndex={0}>
+                    <AccordionTab header="Header I">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header II">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header III">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header IV" disabled />
+                </Accordion>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/accordion/dynamicdoc.js b/components/doc/accordion/dynamicdoc.js
new file mode 100644
index 0000000000..9845dc2b17
--- /dev/null
+++ b/components/doc/accordion/dynamicdoc.js
@@ -0,0 +1,123 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+import { useState } from 'react';
+
+export function DynamicDoc(props) {
+    const [tabs] = useState([
+        {
+            header: 'Title I',
+            children: <p className="m-0">Content 1</p>
+        },
+        {
+            header: 'Title II',
+            children: <p className="m-0">Content 2 </p>
+        },
+        {
+            header: 'Title III',
+            children: <p className="m-0">Content 3 </p>
+        }
+    ]);
+
+    const createDynamicTabs = () => {
+        return tabs.map((tab, i) => {
+            return (
+                <AccordionTab key={tab.header} header={tab.header} disabled={tab.disabled}>
+                    {tab.children}
+                </AccordionTab>
+            );
+        });
+    };
+
+    const code = {
+        basic: `
+ <Accordion>{createDynamicTabs()}</Accordion>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function DynamicDemo() {
+    const [tabs] = useState([
+        {
+            header: 'Title I',
+            children: <p className="m-0">Content 1</p>
+        },
+        {
+            header: 'Title II',
+            children: <p className="m-0">Content 2 </p>
+        },
+        {
+            header: 'Title III',
+            children: <p className="m-0">Content 3 </p>
+        }
+    ]);
+
+    const createDynamicTabs = () => {
+        return tabs.map((tab, i) => {
+            return (
+                <AccordionTab key={tab.header} header={tab.header} disabled={tab.disabled}>
+                    {tab.children}
+                </AccordionTab>
+            );
+        });
+    };
+
+    return (
+        <div className="card">
+             <Accordion>{createDynamicTabs()}</Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function DynamicDemo() {
+    const [tabs] = useState([
+        {
+            header: 'Title I',
+            children: <p className="m-0">Content 1</p>
+        },
+        {
+            header: 'Title II',
+            children: <p className="m-0">Content 2 </p>
+        },
+        {
+            header: 'Title III',
+            children: <p className="m-0">Content 3 </p>
+        }
+    ]);
+
+    const createDynamicTabs = () => {
+        return tabs.map((tab, i) => {
+            return (
+                <AccordionTab key={tab.header} header={tab.header} disabled={tab.disabled}>
+                    {tab.children}
+                </AccordionTab>
+            );
+        });
+    };
+    
+    return (
+        <div className="card">
+            <Accordion>{createDynamicTabs()}</Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Accordion tabs can be generated dynamically using code.</p>
+            </DocSectionText>
+            <div className="card">
+                <Accordion activeIndex={0}>{createDynamicTabs()}</Accordion>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/accordion/importdoc.js b/components/doc/accordion/importdoc.js
new file mode 100644
index 0000000000..21bc954346
--- /dev/null
+++ b/components/doc/accordion/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Accordion, AccordionTab } from 'primereact/accordion';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/accordion/multipledoc.js b/components/doc/accordion/multipledoc.js
new file mode 100644
index 0000000000..62a04f55f9
--- /dev/null
+++ b/components/doc/accordion/multipledoc.js
@@ -0,0 +1,144 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+
+export function MultipleDoc(props) {
+    const code = {
+        basic: `
+<Accordion multiple activeIndex={[0]}>
+    <AccordionTab header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+            Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </AccordionTab>
+    <AccordionTab header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </AccordionTab>
+</Accordion>
+        `,
+        javascript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function MultipleDemo() {
+    return (
+        <div className="card">
+            <Accordion multiple activeIndex={[0]}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function MultipleDemo() {
+    return (
+        <div className="card">
+            <Accordion multiple activeIndex={[0]}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Only one tab at a time can be active by default, enabling <i>multiple</i> property changes this behavior to allow multiple tabs. In this case <i>activeIndex</i> needs to be an array.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Accordion multiple activeIndex={[0]}>
+                    <AccordionTab header="Header I">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header II">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab header="Header III">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </AccordionTab>
+                </Accordion>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/accordion/pt/wireframe.js b/components/doc/accordion/pt/wireframe.js
new file mode 100644
index 0000000000..3db17977a1
--- /dev/null
+++ b/components/doc/accordion/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/accordion.jpg" alt="accordion" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/accordion/styledoc.js b/components/doc/accordion/styledoc.js
new file mode 100644
index 0000000000..ea59f382ae
--- /dev/null
+++ b/components/doc/accordion/styledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-accordion</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-accordion-header</td>
+                            <td>Header of a tab.</td>
+                        </tr>
+                        <tr>
+                            <td>p-accordion-content</td>
+                            <td>Container of a tab.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/accordion/templatedoc.js b/components/doc/accordion/templatedoc.js
new file mode 100644
index 0000000000..3fafc12938
--- /dev/null
+++ b/components/doc/accordion/templatedoc.js
@@ -0,0 +1,246 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Accordion, AccordionTab } from '@/components/lib/accordion/Accordion';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function TemplateDoc(props) {
+    const code = {
+        basic: `
+<Accordion activeIndex={0}>
+    <AccordionTab
+        header={
+            <span className="flex align-items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Amy Elsner</span>
+                <Badge value="3" className="ml-auto" />
+            </span>
+        }
+    >
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+            commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </AccordionTab>
+    <AccordionTab
+        header={
+            <span className="flex align-items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Onyama Limba</span>
+                <Badge value="4" className="ml-auto" />
+            </span>
+        }
+    >
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+            quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+            sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+            Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </AccordionTab>
+    <AccordionTab
+        header={
+            <span className="flex align-items-center gap-2 w-full">
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <Badge value="2" className="ml-auto" />
+            </span>
+        }
+    >
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+            mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </AccordionTab>
+</Accordion>
+        `,
+        javascript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab
+                    header={
+                        <span className="flex align-items-center gap-2 w-full">
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                            <span className="font-bold white-space-nowrap">Amy Elsner</span>
+                            <Badge value="3" className="ml-auto" />
+                        </span>
+                    }
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab
+                    header={
+                        <span className="flex align-items-center gap-2 w-full">
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                            <span className="font-bold white-space-nowrap">Onyama Limba</span>
+                            <Badge value="4" className="ml-auto" />
+                        </span>
+                    }
+                >
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab
+                    header={
+                        <span className="flex align-items-center gap-2 w-full">
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
+                            <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
+                            <Badge value="2" className="ml-auto" />
+                        </span>
+                    }
+                >
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab
+                    header={
+                        <span className="flex align-items-center gap-2 w-full">
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                            <span className="font-bold white-space-nowrap">Amy Elsner</span>
+                            <Badge value="3" className="ml-auto" />
+                        </span>
+                    }
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab
+                    header={
+                        <span className="flex align-items-center gap-2 w-full">
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                            <span className="font-bold white-space-nowrap">Onyama Limba</span>
+                            <Badge value="4" className="ml-auto" />
+                        </span>
+                    }
+                >
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab
+                    header={
+                        <span className="flex align-items-center gap-2 w-full">
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
+                            <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
+                            <Badge value="2" className="ml-auto" />
+                        </span>
+                    }
+                >
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt 
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Title section of a tab is customized with the <i>header</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Accordion activeIndex={0}>
+                    <AccordionTab
+                        header={
+                            <span className="flex align-items-center gap-2 w-full">
+                                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                                <span className="font-bold white-space-nowrap">Amy Elsner</span>
+                                <Badge value="3" className="ml-auto" />
+                            </span>
+                        }
+                    >
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab
+                        header={
+                            <span className="flex align-items-center gap-2 w-full">
+                                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                                <span className="font-bold white-space-nowrap">Onyama Limba</span>
+                                <Badge value="4" className="ml-auto" />
+                            </span>
+                        }
+                    >
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </AccordionTab>
+                    <AccordionTab
+                        header={
+                            <span className="flex align-items-center gap-2 w-full">
+                                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
+                                <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
+                                <Badge value="2" className="ml-auto" />
+                            </span>
+                        }
+                    >
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </AccordionTab>
+                </Accordion>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/accordion/theming/styleddoc.js b/components/doc/accordion/theming/styleddoc.js
new file mode 100644
index 0000000000..c4312a2801
--- /dev/null
+++ b/components/doc/accordion/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-accordion</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-accordion-header</td>
+                            <td>Header of a tab.</td>
+                        </tr>
+                        <tr>
+                            <td>p-accordion-content</td>
+                            <td>Container of a tab.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/accordion/theming/tailwinddoc.js b/components/doc/accordion/theming/tailwinddoc.js
new file mode 100644
index 0000000000..306058dbf8
--- /dev/null
+++ b/components/doc/accordion/theming/tailwinddoc.js
@@ -0,0 +1,111 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    toggleable: {
+        timeout: 500,
+        classNames: {
+          enter: 'max-h-0',
+          enterActive:
+            '!max-h-[1000px] overflow-hidden transition-[max-height] duration-500 ease-in',
+          exit: 'max-h-[1000px]',
+          exitActive:
+            '!max-h-0 overflow-hidden transition-[max-height] duration-500 ease-out',
+        }
+    }
+};
+
+const Tailwind = {  
+    accordion: {
+        root: 'mb-1',
+        accordiontab: {
+            root: 'mb-1',
+            header: ({ props }) => ({
+                className: classNames(
+                    { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled } // Condition
+                )
+            }),
+            headerAction: ({ context }) => ({
+                className: classNames(
+                    'flex items-center cursor-pointer relative no-underline select-none', // Alignments
+                    'p-5 transition duration-200 ease-in-out rounded-t-md font-bold transition-shadow duration-200', // Padding and transition
+                    'border border-gray-300 bg-gray-100 text-gray-600', // Borders and colors
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Dark mode
+                    'hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800', // Hover
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                    { 'rounded-br-md rounded-bl-md': !context.selected, 'rounded-br-0 rounded-bl-0 text-gray-800': context.selected } // Condition
+                )
+            }),
+            headerIcon: 'inline-block mr-2',
+            headerTitle: 'leading-none',
+            content: {
+                className: classNames(
+                    'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+                )
+            },
+            transition: TRANSITIONS.toggleable
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Accordion, AccordionTab } from 'primereact/accordion';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card">
+            <Accordion activeIndex={0}>
+                <AccordionTab header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+                        quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
+                        sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                        Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </AccordionTab>
+                <AccordionTab header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
+                        mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </AccordionTab>
+            </Accordion>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/accessibilitydoc.js b/components/doc/autocomplete/accessibilitydoc.js
new file mode 100644
index 0000000000..3cebfe97c0
--- /dev/null
+++ b/components/doc/autocomplete/accessibilitydoc.js
@@ -0,0 +1,150 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="ac1">Username</label>
+<AutoComplete inputId="ac1" />
+
+<span id="ac2">Email</span>
+<AutoComplete aria-labelledby="ac2" />
+
+<AutoComplete aria-label="City" />
+        `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to{' '}
+                <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct
+                screen reader which option to read during keyboard navigation within the popup list.
+            </p>
+            <p>
+                In multiple mode, chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
+            </p>
+            <p>
+                The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the
+                input element.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Highlights the previous item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Highlights the next item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the highlighted item and closes the popup if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Highlights the first item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Highlights the last item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Hides the popup.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Chips Input Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Deletes the previous chip if the input field is empty.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous chip if available and input field is empty.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Chip Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous chip if available.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Deletes the chips and adds focus to the input field.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/autocomplete/basicdoc.js b/components/doc/autocomplete/basicdoc.js
new file mode 100644
index 0000000000..90d641d862
--- /dev/null
+++ b/components/doc/autocomplete/basicdoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
+    };
+
+    const code = {
+        basic: `
+<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)}  />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    AutoComplete is used as a controlled component with <i>value</i> and <i>onChange</i> properties. In addition, <i>suggestions</i> and a <i>completeMethod</i> are required to query the results.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/disableddoc.js b/components/doc/autocomplete/disableddoc.js
new file mode 100644
index 0000000000..feba885b54
--- /dev/null
+++ b/components/doc/autocomplete/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<AutoComplete disabled placeholder="Disabled" />
+        `,
+        javascript: `
+import React from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete disabled placeholder="Disabled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/dropdowndoc.js b/components/doc/autocomplete/dropdowndoc.js
new file mode 100644
index 0000000000..fb8b1e023e
--- /dev/null
+++ b/components/doc/autocomplete/dropdowndoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function DropdownDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        let _items = [...Array(10).keys()];
+
+        setItems(event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items);
+    };
+
+    const code = {
+        basic: `
+<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} dropdown />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function DropdownDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        let _items = [...Array(10).keys()];
+        setItems(event.query ? [...Array(10).keys()].map(item => event.query + '-' + item) : _items);
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} dropdown />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function DropdownDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        let _items = [...Array(10).keys()];
+        setItems(event.query ? [...Array(10).keys()].map(item => event.query + '-' + item) : _items);
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setValue(e.value)} dropdown />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using <i>dropdownMode</i> property that takes <strong>blank</strong> or <strong>current</strong> as possible
+                    values. <i>blank</i> is the default mode to send a query with an empty string whereas <i>current</i> setting sends a query with the current value of the input.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} dropdown />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/filleddoc.js b/components/doc/autocomplete/filleddoc.js
new file mode 100644
index 0000000000..6de79a0a22
--- /dev/null
+++ b/components/doc/autocomplete/filleddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
+    };
+
+    const code = {
+        basic: `
+<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} variant="filled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/floatlabeldoc.js b/components/doc/autocomplete/floatlabeldoc.js
new file mode 100644
index 0000000000..3c767317e5
--- /dev/null
+++ b/components/doc/autocomplete/floatlabeldoc.js
@@ -0,0 +1,81 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
+    };
+
+    const code = {
+        basic: `
+<span className="p-float-label">
+    <AutoComplete inputId="ac" value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+    <label htmlFor="ac">Float Label</label>
+</span>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <span className="p-float-label">
+                <AutoComplete inputId="ac" value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+                <label htmlFor="ac">Float Label</label>
+            </span>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <span className="p-float-label">
+                <AutoComplete inputId="ac" value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+                <label htmlFor="ac">Float Label</label>
+            </span>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A floating label appears on top of the input field when focused.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <span className="p-float-label">
+                    <AutoComplete inputId="ac" value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+                    <label htmlFor="ac">Float Label</label>
+                </span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/forceselectiondoc.js b/components/doc/autocomplete/forceselectiondoc.js
new file mode 100644
index 0000000000..4780b4b67a
--- /dev/null
+++ b/components/doc/autocomplete/forceselectiondoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function ForceSelectionDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
+    };
+
+    const code = {
+        basic: `
+<AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} forceSelection />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function ForceSelectionDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} forceSelection />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function ForceSelectionDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setValue(e.value)} forceSelection />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions. Simply enable{' '}
+                    <i>forceSelection</i> to enforce that input is always from the suggestion list.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} forceSelection />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/groupdoc.js b/components/doc/autocomplete/groupdoc.js
new file mode 100644
index 0000000000..33e76cbb9f
--- /dev/null
+++ b/components/doc/autocomplete/groupdoc.js
@@ -0,0 +1,276 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function GroupDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const [filteredCities, setFilteredCities] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (item) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={item.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${item.code.toLowerCase()} mr-2`} style={{ width: '18px' }} />
+                <div>{item.label}</div>
+            </div>
+        );
+    };
+
+    const search = (event) => {
+        let query = event.query;
+        let _filteredCities = [];
+
+        for (let country of groupedCities) {
+            let filteredItems = country.items.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) !== -1);
+
+            if (filteredItems && filteredItems.length) {
+                _filteredCities.push({ ...country, ...{ items: filteredItems } });
+            }
+        }
+
+        setFilteredCities(_filteredCities);
+    };
+
+    const code = {
+        basic: `
+<AutoComplete value={selectedCity} onChange={(e) => setSelectedCity(e.value)} suggestions={filteredCities} completeMethod={search}
+        field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} placeholder="Hint: type 'a'" />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function GroupDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const [filteredCities, setFilteredCities] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (item) => {
+        return (
+            <div className="flex align-items-center">
+                <img
+                    alt={item.label}
+                    src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+                    className={\`flag flag-\${item.code.toLowerCase()} mr-2\`}
+                    style={{width: '18px'}}
+                />
+                <div>{item.label}</div>
+            </div>
+        );
+    };
+
+    const search = (event) => {
+        let query = event.query;
+        let _filteredCities = [];
+
+        for (let country of groupedCities) {
+            let filteredItems = country.items.filter((item) => item.label.toLowerCase().indexOf(query.toLowerCase()) !== -1);
+
+            if (filteredItems && filteredItems.length) {
+                _filteredCities.push({ ...country, ...{ items: filteredItems } });
+            }
+        }
+
+        setFilteredCities(_filteredCities);
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete value={selectedCity} onChange={(e) => setSelectedCity(e.value)} suggestions={filteredCities} completeMethod={search}
+                field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} placeholder="Hint: type 'a'" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import {
+  AutoComplete,
+  AutoCompleteChangeEvent,
+  AutoCompleteCompleteEvent,
+} from "primereact/autocomplete";
+
+interface City {
+  label: string;
+  value: string;
+}
+
+interface Country {
+  label: string;
+  code: string;
+  items: City[];
+}
+
+export default function GroupDemo() {
+  const [selectedCity, setSelectedCity] = useState<Country>();
+  const [filteredCities, setFilteredCities] = useState<Country[]>();
+  const groupedCities: Array<Country> = [
+    {
+      label: "Germany",
+      code: "DE",
+      items: [
+        { label: "Berlin", value: "Berlin" },
+        { label: "Frankfurt", value: "Frankfurt" },
+        { label: "Hamburg", value: "Hamburg" },
+        { label: "Munich", value: "Munich" },
+      ],
+    },
+    {
+      label: "USA",
+      code: "US",
+      items: [
+        { label: "Chicago", value: "Chicago" },
+        { label: "Los Angeles", value: "Los Angeles" },
+        { label: "New York", value: "New York" },
+        { label: "San Francisco", value: "San Francisco" },
+      ],
+    },
+    {
+      label: "Japan",
+      code: "JP",
+      items: [
+        { label: "Kyoto", value: "Kyoto" },
+        { label: "Osaka", value: "Osaka" },
+        { label: "Tokyo", value: "Tokyo" },
+        { label: "Yokohama", value: "Yokohama" },
+      ],
+    },
+  ];
+
+  const groupedItemTemplate = (item: Country) => {
+    return (
+      <div className="flex align-items-center">
+        <img
+          alt={item.label}
+          src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+          className={\`flag flag-\${item.code.toLowerCase()} mr-2\`}
+          style={{ width: "18px" }}
+        />
+        <div>{item.label}</div>
+      </div>
+    );
+  };
+
+  const search = (event: AutoCompleteCompleteEvent) => {
+    let query = event.query;
+    let _filteredCities = [];
+
+    for (let country of groupedCities) {
+      let filteredItems = country.items.filter(
+        (item) => item.label.toLowerCase().indexOf(query.toLowerCase()) !== -1
+      );
+
+      if (filteredItems && filteredItems.length) {
+        _filteredCities.push({ ...country, ...{ items: filteredItems } });
+      }
+    }
+
+    setFilteredCities(_filteredCities);
+  };
+
+  return (
+    <div className="card flex justify-content-center">
+      <AutoComplete
+        value={selectedCity}
+        onChange={(e: AutoCompleteChangeEvent) => setSelectedCity(e.value)}
+        suggestions={filteredCities}
+        completeMethod={search}
+        field="label"
+        optionGroupLabel="label"
+        optionGroupChildren="items"
+        optionGroupTemplate={groupedItemTemplate}
+        placeholder="Hint: type 'a'"
+      />
+    </div>
+  );
+}
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Option groups are specified with the <i>optionGroupLabel</i> and <i>optionGroupChildren</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    suggestions={filteredCities}
+                    completeMethod={search}
+                    field="label"
+                    optionGroupLabel="label"
+                    optionGroupChildren="items"
+                    optionGroupTemplate={groupedItemTemplate}
+                    placeholder="Hint: type 'a'"
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/importdoc.js b/components/doc/autocomplete/importdoc.js
new file mode 100644
index 0000000000..d10a63222a
--- /dev/null
+++ b/components/doc/autocomplete/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { AutoComplete } from 'primereact/autocomplete';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/invaliddoc.js b/components/doc/autocomplete/invaliddoc.js
new file mode 100644
index 0000000000..c374c7828c
--- /dev/null
+++ b/components/doc/autocomplete/invaliddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map((item) => event.query + '-' + item));
+    };
+
+    const code = {
+        basic: `
+<AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState<string>('');
+    const [items, setItems] = useState<string[]>([]);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete invalid={value.length < 1} value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/multipledoc.js b/components/doc/autocomplete/multipledoc.js
new file mode 100644
index 0000000000..671e93e94c
--- /dev/null
+++ b/components/doc/autocomplete/multipledoc.js
@@ -0,0 +1,145 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
+import { CountryService } from '../../../service/CountryService';
+
+export function MultipleDoc(props) {
+    const [countries, setCountries] = useState([]);
+    const [selectedCountries, setSelectedCountries] = useState(null);
+    const [filteredCountries, setFilteredCountries] = useState(null);
+
+    const search = (event) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            } else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    };
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<AutoComplete field="name" multiple value={selectedCountries} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountries(e.value)} />
+        `,
+        javascript: `
+import React, { useEffect, useState } from 'react';
+import { AutoComplete } from "primereact/autocomplete";
+import { CountryService } from "./service/CountryService";
+
+export default function MultipleDemo() {
+    const [countries, setCountries] = useState([]);
+    const [selectedCountries, setSelectedCountries] = useState(null);
+    const [filteredCountries, setFilteredCountries] = useState(null);
+
+    const search = (event) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            }
+            else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    }
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []);
+
+    return (
+        <div className="card p-fluid">
+            <AutoComplete field="name" multiple value={selectedCountries} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountries(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useState } from 'react';
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { CountryService } from "./service/CountryService";
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+export default function MultipleDemo() {
+    const [countries, setCountries] = useState<Country[]>([]);
+    const [selectedCountries, setSelectedCountries] = useState<Country>(null);
+    const [filteredCountries, setFilteredCountries] = useState<Country[]>(null);
+
+    const search = (event: AutoCompleteCompleteEvent) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            }
+            else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    }
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []);
+
+    return (
+        <div className="card p-fluid">
+            <AutoComplete field="name" multiple value={selectedCountries} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountries(e.value)} />
+        </div>
+    )
+}
+        `,
+        data: `
+        {
+            "data": [
+                {"name": "United Kingdom", "code": "UK"},
+                {"name": "United States", "code": "USA"},
+                ...
+            ]
+        }
+                `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array. The number of values selectable can be restricted using the{' '}
+                    <i>selectionLimit</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <AutoComplete field="name" multiple value={selectedCountries} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountries(e.value)} />
+            </div>
+            <DocSectionCode code={code} service={['CountryService']} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/objectsdoc.js b/components/doc/autocomplete/objectsdoc.js
new file mode 100644
index 0000000000..4cddc54272
--- /dev/null
+++ b/components/doc/autocomplete/objectsdoc.js
@@ -0,0 +1,142 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
+import { CountryService } from '../../../service/CountryService';
+
+export function ObjectsDoc(props) {
+    const [countries, setCountries] = useState([]);
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const [filteredCountries, setFilteredCountries] = useState(null);
+
+    const search = (event) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            } else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    };
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} />
+        `,
+        javascript: `
+import React, { useEffect, useState } from 'react';
+import { AutoComplete } from "primereact/autocomplete";
+import { CountryService } from './service/CountryService';
+
+export default function ObjectDemo() {
+    const [countries, setCountries] = useState([]);
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const [filteredCountries, setFilteredCountries] = useState(null);
+
+    const search = (event) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            }
+            else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    }
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useState } from 'react';
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { CountryService } from './service/CountryService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+export default function ObjectDemo() {
+    const [countries, setCountries] = useState<Country[]>([]);
+    const [selectedCountry, setSelectedCountry] = useState<Country>(null);
+    const [filteredCountries, setFilteredCountries] = useState<Country[]>(null);
+    
+    const search = (event: AutoCompleteCompleteEvent) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            }
+            else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    }
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} />
+        </div>
+    )
+}
+        `,
+        data: `
+ /* CountryService */
+{"name": "United Kingdom", "code": "UK"},
+{"name": "United States", "code": "USA"},
+...
+                `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    AutoComplete can work with objects using the <i>field</i> property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a
+                    Country object that has name and code fields such as <i>&#123;name: "United States", code:"USA"&#125;</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} />
+            </div>
+            <DocSectionCode code={code} service={['CountryService']} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/pt/wireframe.js b/components/doc/autocomplete/pt/wireframe.js
new file mode 100644
index 0000000000..1b4a953ab7
--- /dev/null
+++ b/components/doc/autocomplete/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/autocomplete.jpg" alt="autocomplete" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/autocomplete/styledoc.js b/components/doc/autocomplete/styledoc.js
new file mode 100644
index 0000000000..ba55597d4e
--- /dev/null
+++ b/components/doc/autocomplete/styledoc.js
@@ -0,0 +1,54 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-autocomplete</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-panel</td>
+                            <td>Overlay panel of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-items</td>
+                            <td>List container of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-item</td>
+                            <td>List item of a suggestion.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-token</td>
+                            <td>Element of a selected item in multiple mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-token-icon</td>
+                            <td>Close icon element of a selected item in multiple mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-token-label</td>
+                            <td>Label of a selected item in multiple mode.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/templatedoc.js b/components/doc/autocomplete/templatedoc.js
new file mode 100644
index 0000000000..dccb8307e0
--- /dev/null
+++ b/components/doc/autocomplete/templatedoc.js
@@ -0,0 +1,250 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
+import { CountryService } from '../../../service/CountryService';
+
+export function TemplateDoc(props) {
+    const [countries, setCountries] = useState([]);
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const [filteredCountries, setFilteredCountries] = useState(null);
+
+    const search = (event) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            } else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    };
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={item.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${item.code.toLowerCase()} mr-2`} style={{ width: '18px' }} />
+                <div>{item.name}</div>
+            </div>
+        );
+    };
+
+    const selectedItemTemplate = (item) => {
+        return `${item.name} (${item.code.toUpperCase()})`;
+    };
+
+    const panelFooterTemplate = () => {
+        const isCountrySelected = (filteredCountries || []).some((country) => country.name === selectedCountry);
+
+        return (
+            <div className="py-2 px-3">
+                {isCountrySelected ? (
+                    <span>
+                        <b>{selectedCountry}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries}  
+    completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} selectedItemTemplate={selectedItemTemplate} />
+        `,
+        javascript: `
+import React, { useEffect, useState } from 'react';
+import { AutoComplete } from "primereact/autocomplete";
+import { CountryService } from './service/CountryService';
+
+export default function TemplateDemo() {
+    const [countries, setCountries] = useState([]);
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const [filteredCountries, setFilteredCountries] = useState(null);
+
+    const panelFooterTemplate = () => {
+        const isCountrySelected = (filteredCountries || []).some( country => country['name'] === selectedCountry );
+           return (
+            <div className="py-2 px-3">
+                {isCountrySelected ? (
+                    <span>
+                        <b>{selectedCountry}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
+    const search = (event) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            }
+            else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    }
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex align-items-center">
+                <img
+                    alt={item.name}
+                    src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+                    className={\`flag flag-\${item.code.toLowerCase()} mr-2\`}
+                    style={{width: '18px'}}
+                />
+                <div>{item.name}</div>
+            </div>
+        );
+    };
+
+    const selectedItemTemplate = (item) => {
+        return item.name + ' (' + item.code.toUpperCase() + ')';
+    };
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
+                completeMethod={search} onChange={(e) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} selectedItemTemplate={selectedItemTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useState } from 'react';
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { CountryService } from './service/CountryService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+export default function TemplateDemo() {
+    const [countries, setCountries] = useState<Country[]>([]);
+    const [selectedCountry, setSelectedCountry] = useState<Country>(null);
+    const [filteredCountries, setFilteredCountries] = useState<Country[]>(null);
+    
+    const search = (event: AutoCompleteCompleteEvent) => {
+        // Timeout to emulate a network connection
+        setTimeout(() => {
+            let _filteredCountries;
+
+            if (!event.query.trim().length) {
+                _filteredCountries = [...countries];
+            }
+            else {
+                _filteredCountries = countries.filter((country) => {
+                    return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                });
+            }
+
+            setFilteredCountries(_filteredCountries);
+        }, 250);
+    }
+
+    const itemTemplate = (item: Country) => {
+        return (
+            <div className="flex align-items-center">
+                <img
+                    alt={item.name}
+                    src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+                    className={\`flag flag-\${item.code.toLowerCase()} mr-2\`}
+                    style={{width: '18px'}}
+                />
+                <div>{item.name}</div>
+            </div>
+        );
+    };
+
+    const selectedItemTemplate = (item: Country) => {
+        return item.name + ' (' + item.code.toUpperCase() + ')';
+    };
+    
+    const panelFooterTemplate = () => {
+        const isCountrySelected = (filteredCountries || []).some( country => country['name'] === selectedCountry );
+           return (
+            <div className="py-2 px-3">
+                {isCountrySelected ? (
+                    <span>
+                        <b>{selectedCountry}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
+    useEffect(() => {
+        CountryService.getCountries().then((data) => setCountries(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <AutoComplete field="name" value={selectedCountry} suggestions={filteredCountries} 
+                completeMethod={search} onChange={(e: AutoCompleteChangeEvent) => setSelectedCountry(e.value)} itemTemplate={itemTemplate} panelFooterTemplate={panelFooterTemplate} selectedItemTemplate={selectedItemTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+ /* CountryService */
+
+{"name": "United Kingdom", "code": "UK"},
+{"name": "United States", "code": "USA"},
+...
+                `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be displayed as an option using <i>itemTemplate</i> property that references a function with a suggestion option as a parameter and returns an element. Similarly <i>selectedItemTemplate</i> property is available
+                    to customize the chips in <i>multiple</i> mode and the text in <i>single</i> mode using the same approach.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete
+                    field="name"
+                    value={selectedCountry}
+                    suggestions={filteredCountries}
+                    completeMethod={search}
+                    onChange={(e) => setSelectedCountry(e.value)}
+                    itemTemplate={itemTemplate}
+                    panelFooterTemplate={panelFooterTemplate}
+                    selectedItemTemplate={selectedItemTemplate}
+                />
+            </div>
+            <DocSectionCode code={code} service={['CountryService']} />
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/theming/styleddoc.js b/components/doc/autocomplete/theming/styleddoc.js
new file mode 100644
index 0000000000..a6a3a1f998
--- /dev/null
+++ b/components/doc/autocomplete/theming/styleddoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-autocomplete</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-panel</td>
+                            <td>Overlay panel of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-items</td>
+                            <td>List container of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-item</td>
+                            <td>List item of a suggestion.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-token</td>
+                            <td>Element of a selected item in multiple mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-token-icon</td>
+                            <td>Close icon element of a selected item in multiple mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-autocomplete-token-label</td>
+                            <td>Label of a selected item in multiple mode.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/theming/tailwinddoc.js b/components/doc/autocomplete/theming/tailwinddoc.js
new file mode 100644
index 0000000000..9783e7648d
--- /dev/null
+++ b/components/doc/autocomplete/theming/tailwinddoc.js
@@ -0,0 +1,118 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {           
+    autocomplete: {
+        root: ({ props }) => ({
+            className: classNames(
+                'relative inline-flex',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                },
+                { 'w-full': props.multiple }
+            )
+        }),
+        container: {
+            className: classNames(
+                'm-0 list-none cursor-text overflow-hidden flex items-center flex-wrap w-full',
+                'px-3 py-2 gap-2',
+                'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  transition duration-200 ease-in-out appearance-none rounded-md',
+                'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        inputToken: {
+            className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
+        },
+        input: ({ props }) => ({
+            root: {
+                className: classNames(
+                    'm-0',
+                    'transition-colors duration-200 appearance-none rounded-lg',
+                    { 'rounded-tr-none rounded-br-none': props.dropdown },
+                    {
+                        'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] hover:border-blue-500 focus:outline-none':
+                            !props.multiple,
+                        'font-sans text-base text-gray-700 dark:text-white/80 border-0 outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full': props.multiple
+                    }
+                )
+            }
+        }),
+        token: {
+            className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
+        },
+        dropdownButton: {
+            root: 'rounded-tl-none rounded-bl-none'
+        },
+        panel: {
+            className: classNames('bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'dark:bg-gray-900 dark:text-white/80')
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.selected
+            })
+        }),
+        itemGroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState('');
+    const [items, setItems] = useState([]);
+
+    const search = (event) => {
+        setItems([...Array(10).keys()].map(item => event.query + '-' + item));
+    }
+
+    return (
+        <div className="card flex justify-center">
+            <AutoComplete value={value} suggestions={items} completeMethod={search} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/autocomplete/virtualscrolldoc.js b/components/doc/autocomplete/virtualscrolldoc.js
new file mode 100644
index 0000000000..823b2cd866
--- /dev/null
+++ b/components/doc/autocomplete/virtualscrolldoc.js
@@ -0,0 +1,114 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { AutoComplete } from '@/components/lib/autocomplete/AutoComplete';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function VirtualScrollDoc(props) {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [filteredItems, setFilteredItems] = useState(null);
+    const items = Array.from({ length: 100000 }).map((_, i) => ({ label: `Item #${i}`, value: i }));
+
+    const searchItems = (event) => {
+        //in a real application, make a request to a remote url with the query and return filtered results, for demo purposes we filter at client side
+        let query = event.query;
+        let _filteredItems = [];
+
+        for (let i = 0; i < items.length; i++) {
+            let item = items[i];
+
+            if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                _filteredItems.push(item);
+            }
+        }
+
+        setFilteredItems(_filteredItems);
+    };
+
+    const code = {
+        basic: `
+<AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems}
+    virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { AutoComplete } from "primereact/autocomplete";
+
+export default function VirtualScrollerDemo() {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const [filteredItems, setFilteredItems] = useState(null);
+    const items = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
+    const searchItems = (event) => {
+        //in a real application, make a request to a remote url with the query and return filtered results, for demo purposes we filter at client side
+        let query = event.query;
+        let _filteredItems = [];
+
+        for(let i = 0; i < items.length; i++) {
+            let item = items[i];
+            if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                _filteredItems.push(item);
+            }
+        }
+
+        setFilteredItems(_filteredItems);
+    }
+
+    return (
+        <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems}
+            virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} />
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+
+interface Item {
+    label: string;
+    value: number;
+}
+
+export default function VirtualScrollerDemo() {
+    const [selectedItem, setSelectedItem] = useState<Item>(null);
+    const [filteredItems, setFilteredItems] = useState<Item[]>(null);
+    const items = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
+    const searchItems = (event: AutoCompleteCompleteEvent) => {
+        //in a real application, make a request to a remote url with the query and return filtered results, for demo purposes we filter at client side
+        let query = event.query;
+        let _filteredItems = [];
+
+        for(let i = 0; i < items.length; i++) {
+            let item = items[i];
+            if (item.label.toLowerCase().indexOf(query.toLowerCase()) === 0) {
+                _filteredItems.push(item);
+            }
+        }
+
+        setFilteredItems(_filteredItems);
+    }
+
+    return (
+        <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems}
+            virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e: AutoCompleteChangeEvent) => setSelectedItem(e.value)} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Virtual Scrolling is a performant way to render large lists. Configuration of the scroll behavior is defined with <i>virtualScrollerOptions</i>
+                    that requires <i>itemSize</i> as the mandatory value to set the height of an item. Visit <Link href="http://github.com/virtualscroller">VirtualScroller</Link> documentation for more information about the configuration API.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/avatar/accessibilitydoc.js b/components/doc/avatar/accessibilitydoc.js
new file mode 100644
index 0000000000..9bbb016751
--- /dev/null
+++ b/components/doc/avatar/accessibilitydoc.js
@@ -0,0 +1,17 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like <i>img</i> along with <i>aria-labelledby</i> or <i>aria-label</i> to describe the component. In case
+                avatars need to be tabbable, <i>tabIndex</i> can be added as well to implement custom key handlers.
+            </p>
+
+            <h4>Keyboard Support</h4>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/avatar/groupdoc.js b/components/doc/avatar/groupdoc.js
new file mode 100644
index 0000000000..860941d3e4
--- /dev/null
+++ b/components/doc/avatar/groupdoc.js
@@ -0,0 +1,83 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { AvatarGroup } from '@/components/lib/avatargroup/AvatarGroup';
+
+export function GroupDoc(props) {
+    const code = {
+        basic: `
+<AvatarGroup>
+  <Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
+  <Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+  <Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
+  <Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
+  <Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+  <Avatar label="+2" shape="circle" size="large"/>
+</AvatarGroup>
+
+        `,
+        javascript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';
+import { Badge } from 'primereact/badge';
+
+export default function GroupDemo() {
+
+    return (
+        <div className="card flex justify-content-center">
+            <AvatarGroup>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+                <Avatar label="+2" shape="circle" size="large"/>
+            </AvatarGroup>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';
+import { Badge } from 'primereact/badge';
+
+export default function GroupDemo() {
+
+    return (
+        <div className="card flex justify-content-center">
+            <AvatarGroup>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+                <Avatar label="+2" shape="circle" size="large"/>
+            </AvatarGroup>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <AvatarGroup>
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+                    <Avatar label="+2" shape="circle" size="large" />
+                </AvatarGroup>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/avatar/icondoc.js b/components/doc/avatar/icondoc.js
new file mode 100644
index 0000000000..d9b6a1509e
--- /dev/null
+++ b/components/doc/avatar/icondoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function IconDoc(props) {
+    const code = {
+        basic: `
+<Avatar icon="pi pi-user" size="xlarge" />
+<Avatar icon="pi pi-user" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+<Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+
+<Avatar icon="pi pi-user" size="xlarge" shape="circle" />
+<Avatar icon="pi pi-user" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+<Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+
+<Avatar className="p-overlay-badge" icon="pi pi-user" size="xlarge">
+    <Badge value="4" />
+</Avatar>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function IconDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-5">
+                <div className="flex-auto">
+                    <h5>Icon</h5>
+                    <Avatar icon="pi pi-user" className="mr-2" size="xlarge" />
+                    <Avatar icon="pi pi-user" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+                    <Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Circle</h5>
+                    <Avatar icon="pi pi-user" className="mr-2" size="xlarge" shape="circle" />
+                    <Avatar icon="pi pi-user" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+                    <Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Badge</h5>
+                    <Avatar className="p-overlay-badge" icon="pi pi-user" size="xlarge">
+                        <Badge value="4" />
+                    </Avatar>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function IconDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-5">
+                <div className="flex-auto">
+                    <h5>Icon</h5>
+                    <Avatar icon="pi pi-user" className="mr-2" size="xlarge" />
+                    <Avatar icon="pi pi-user" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+                    <Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Circle</h5>
+                    <Avatar icon="pi pi-user" className="mr-2" size="xlarge" shape="circle" />
+                    <Avatar icon="pi pi-user" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+                    <Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Badge</h5>
+                    <Avatar className="p-overlay-badge" icon="pi pi-user" size="xlarge">
+                        <Badge value="4" />
+                    </Avatar>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A font icon is displayed as an Avatar with the <i>icon</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-5">
+                    <div className="flex-auto">
+                        <h5>Icon</h5>
+                        <Avatar icon="pi pi-user" className="mr-2" size="xlarge" />
+                        <Avatar icon="pi pi-user" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+                        <Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5>Circle</h5>
+                        <Avatar icon="pi pi-user" className="mr-2" size="xlarge" shape="circle" />
+                        <Avatar icon="pi pi-user" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+                        <Avatar icon="pi pi-user" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5>Badge</h5>
+                        <Avatar className="p-overlay-badge" icon="pi pi-user" size="xlarge">
+                            <Badge value="4" />
+                        </Avatar>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/avatar/imagedoc.js b/components/doc/avatar/imagedoc.js
new file mode 100644
index 0000000000..0ebea6d2a6
--- /dev/null
+++ b/components/doc/avatar/imagedoc.js
@@ -0,0 +1,117 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function ImageDoc(props) {
+    const code = {
+        basic: `
+<Avatar image="/images/avatar/amyelsner.png" size="xlarge" shape="circle" />
+<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
+
+<Avatar className="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge">
+    <Badge value="4" severity="danger" />
+</Avatar>
+
+<Avatar image={"https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"} className="flex align-items-center justify-content-center mr-2" size="xlarge" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function ImageDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-5">
+                <div className="flex-auto">
+                    <h5>Image</h5>
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" size="xlarge" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" className="mr-2" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Badge</h5>
+                    <Avatar className="p-overlay-badge" image="https://primefaces.org/cdn/primereact/images/organization/walter.jpg" size="xlarge">
+                        <Badge value="4" severity="danger" />
+                    </Avatar>
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Gravatar</h5>
+                    <Avatar image={"https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"} className="flex align-items-center justify-content-center mr-2" size="xlarge" />
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function ImageDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-5">
+                <div className="flex-auto">
+                    <h5>Image</h5>
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" size="xlarge" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" className="mr-2" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Badge</h5>
+                    <Avatar className="p-overlay-badge" image="https://primefaces.org/cdn/primereact/images/organization/walter.jpg" size="xlarge">
+                        <Badge value="4" severity="danger" />
+                    </Avatar>
+                </div>
+
+                <div className="flex-auto">
+                    <h5>Gravatar</h5>
+                    <Avatar image={"https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"} className="flex align-items-center justify-content-center mr-2" size="xlarge" />
+                </div>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Use the <i>image</i> property to display an image as an Avatar.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-5">
+                    <div className="flex-auto">
+                        <h5>Image</h5>
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" size="xlarge" shape="circle" />
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" className="mr-2" size="large" shape="circle" />
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5>Badge</h5>
+                        <Avatar className="p-overlay-badge" image="https://primefaces.org/cdn/primereact/images/organization/walter.jpg" size="xlarge">
+                            <Badge value="4" severity="danger" />
+                        </Avatar>
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5>Gravatar</h5>
+                        <Avatar image={'https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp'} className="flex align-items-center justify-content-center mr-2" size="xlarge" />
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/avatar/importdoc.js b/components/doc/avatar/importdoc.js
new file mode 100644
index 0000000000..1dfec4cc32
--- /dev/null
+++ b/components/doc/avatar/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';   //Optional for grouping
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/avatar/labeldoc.js b/components/doc/avatar/labeldoc.js
new file mode 100644
index 0000000000..3ced00d542
--- /dev/null
+++ b/components/doc/avatar/labeldoc.js
@@ -0,0 +1,120 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function LabelDoc(props) {
+    const code = {
+        basic: `
+<Avatar label="P" size="xlarge" />
+<Avatar label="V" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+<Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+
+<Avatar label="P" size="xlarge" shape="circle" />
+<Avatar label="V" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+<Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+
+<Avatar label="U" size="xlarge" className="p-overlay-badge">
+<Badge value="4" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function LabelDemo() {
+    return (
+        <div className="flex flex-wrap gap-5">
+            <div className="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" className="mr-2" size="xlarge" />
+                <Avatar label="V" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+                <Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+            </div>
+
+            <div className="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" className="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+                <Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+            </div>
+
+            <div className="flex-auto">
+                <h5>Badge</h5>
+                <Avatar label="U" size="xlarge" className="p-overlay-badge">
+                    <Badge value="4" />
+                </Avatar>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function LabelDemo() {
+    return (
+        <div className="flex flex-wrap gap-5">
+            <div className="flex-auto">
+                <h5>Label</h5>
+                <Avatar label="P" className="mr-2" size="xlarge" />
+                <Avatar label="V" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+                <Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+            </div>
+
+            <div className="flex-auto">
+                <h5>Circle</h5>
+                <Avatar label="P" className="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+                <Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+            </div>
+
+            <div className="flex-auto">
+                <h5>Badge</h5>
+                <Avatar label="U" size="xlarge" className="p-overlay-badge">
+                    <Badge value="4" />
+                </Avatar>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A letter Avatar is defined with the <i>label</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-5">
+                    <div className="flex-auto">
+                        <h5>Label</h5>
+                        <Avatar label="P" className="mr-2" size="xlarge" />
+                        <Avatar label="V" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} />
+                        <Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5>Circle</h5>
+                        <Avatar label="P" className="mr-2" size="xlarge" shape="circle" />
+                        <Avatar label="V" className="mr-2" size="large" style={{ backgroundColor: '#2196F3', color: '#ffffff' }} shape="circle" />
+                        <Avatar label="U" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} shape="circle" />
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5>Badge</h5>
+                        <Avatar label="U" size="xlarge" className="p-overlay-badge">
+                            <Badge value="4" />
+                        </Avatar>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/avatar/pt/wireframe.js b/components/doc/avatar/pt/wireframe.js
new file mode 100644
index 0000000000..8553999a8b
--- /dev/null
+++ b/components/doc/avatar/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/avatar.jpg" alt="avatar" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/avatar/styledoc.js b/components/doc/avatar/styledoc.js
new file mode 100644
index 0000000000..0ccdb228ce
--- /dev/null
+++ b/components/doc/avatar/styledoc.js
@@ -0,0 +1,58 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-avatar</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-image</td>
+                            <td>Container element in image mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-circle</td>
+                            <td>Container element with a circle shape.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-text</td>
+                            <td>Text of the Avatar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-icon</td>
+                            <td>Icon of the Avatar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-lg</td>
+                            <td>Container element with a large size.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-xl</td>
+                            <td>Container element with an xlarge size.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-group</td>
+                            <td>Container element of the group element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/avatar/theming/styleddoc.js b/components/doc/avatar/theming/styleddoc.js
new file mode 100644
index 0000000000..a1af46994b
--- /dev/null
+++ b/components/doc/avatar/theming/styleddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-avatar</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-image</td>
+                            <td>Container element in image mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-circle</td>
+                            <td>Container element with a circle shape.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-text</td>
+                            <td>Text of the Avatar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-icon</td>
+                            <td>Icon of the Avatar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-lg</td>
+                            <td>Container element with a large size.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-xl</td>
+                            <td>Container element with an xlarge size.</td>
+                        </tr>
+                        <tr>
+                            <td>p-avatar-group</td>
+                            <td>Container element of the group element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/avatar/theming/tailwinddoc.js b/components/doc/avatar/theming/tailwinddoc.js
new file mode 100644
index 0000000000..b0a3d7d24b
--- /dev/null
+++ b/components/doc/avatar/theming/tailwinddoc.js
@@ -0,0 +1,99 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {           
+    avatar: {
+        root: ({ props, state }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'bg-gray-300 dark:bg-gray-800',
+                {
+                    'rounded-lg': props.shape == 'square',
+                    'rounded-full': props.shape == 'circle'
+                },
+                {
+                    'text-base h-8 w-8': props.size == null || props.size == 'normal',
+                    'w-12 h-12 text-xl': props.size == 'large',
+                    'w-16 h-16 text-2xl': props.size == 'xlarge'
+                },
+                {
+                    '-ml-4 border-2 border-white dark:border-gray-900': state.isNestedInAvatarGroup
+                }
+            )
+        }),
+        image: 'h-full w-full'
+    },
+    avatargroup: {
+        root: 'flex items-center'
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Avatar } from 'primereact/avatar';
+import { AvatarGroup } from 'primereact/avatargroup';
+import { Badge } from 'primereact/badge';
+
+export default function UnstyledDemo() {
+    return (
+        <>
+            <div className="card">
+                <div className="flex flex-wrap gap-5">
+                    <div className="flex-auto">
+                        <h5 className="text-gray-700 dark:text-white/80">Image</h5>
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" size="xlarge" shape="circle" />
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" className="mr-2" size="large" shape="circle" />
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5 className="text-gray-700 dark:text-white/80">Badge</h5>
+                        <Avatar className="relative" image="https://primefaces.org/cdn/primereact/images/organization/walter.jpg" size="xlarge">
+                            <Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" value="4" severity="danger" />
+                        </Avatar>
+                    </div>
+
+                    <div className="flex-auto">
+                        <h5 className="text-gray-700 dark:text-white/80">Gravatar</h5>
+                        <Avatar image={"https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"} className="flex align-items-center justify-content-center mr-2" size="xlarge" />
+                    </div>
+                </div>
+            </div>
+
+            <div className="card flex justify-content-center">
+                <AvatarGroup>
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" size="large" shape="circle" />
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" size="large" shape="circle" />
+                    <Avatar label="+2" shape="circle" size="large" style={{ backgroundColor: '#9c27b0', color: '#ffffff' }} />
+                </AvatarGroup>
+            </div>
+        </>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/badge/accessibilitydoc.js b/components/doc/badge/accessibilitydoc.js
new file mode 100644
index 0000000000..c0e5e759d3
--- /dev/null
+++ b/components/doc/badge/accessibilitydoc.js
@@ -0,0 +1,16 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic,
+                <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabIndex</i> can be added to implement custom key handlers.
+            </p>
+
+            <h4>Keyboard Support</h4>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/badge/basicdoc.js b/components/doc/badge/basicdoc.js
new file mode 100644
index 0000000000..eaab7af004
--- /dev/null
+++ b/components/doc/badge/basicdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Badge value="2"></Badge>
+        `,
+        javascript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Badge value="2"></Badge>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Badge value="2"></Badge>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Text to display is defined with the <i>value</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Badge value="2" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/badge/buttondoc.js b/components/doc/badge/buttondoc.js
new file mode 100644
index 0000000000..8bcadfc398
--- /dev/null
+++ b/components/doc/badge/buttondoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Badge } from '@/components/lib/badge/Badge';
+import { Button } from '@/components/lib/button/Button';
+
+export function ButtonDoc(props) {
+    const code = {
+        basic: `
+<Button type="button" label="Emails">
+    <Badge value="8"></Badge>
+</Button>
+<Button type="button" label="Messages" icon="pi pi-users" severity="secondary">
+    <Badge value="8" severity="danger"></Badge>
+</Button>
+            `,
+        javascript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+import { Badge } from 'primereact/badge';
+
+export default function ButtonDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Button type="button" label="Emails">
+                <Badge value="8"></Badge>
+            </Button>
+            <Button type="button" label="Messages" icon="pi pi-users" severity="secondary">
+                <Badge value="8" severity="danger"></Badge>
+            </Button>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+import { Badge } from 'primereact/badge';
+
+export default function ButtonDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Button type="button" label="Emails">
+                <Badge value="8"></Badge>
+            </Button>
+            <Button type="button" label="Messages" icon="pi pi-users" severity="secondary">
+                <Badge value="8" severity="danger"></Badge>
+            </Button>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Buttons have built-in support for badges to display a badge inline.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <Button type="button" label="Emails">
+                    <Badge value="8" />
+                </Button>
+                <Button type="button" label="Messages" icon="pi pi-users" severity="secondary">
+                    <Badge value="8" severity="danger" />
+                </Button>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/badge/importdoc.js b/components/doc/badge/importdoc.js
new file mode 100644
index 0000000000..53b56ec03d
--- /dev/null
+++ b/components/doc/badge/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Badge } from 'primereact/badge';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/badge/positiondoc.js b/components/doc/badge/positiondoc.js
new file mode 100644
index 0000000000..1b77a34dfd
--- /dev/null
+++ b/components/doc/badge/positiondoc.js
@@ -0,0 +1,81 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function PositionDoc(props) {
+    const code = {
+        basic: `
+<i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
+    <Badge value="2"></Badge>
+</i>
+<i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
+    <Badge value="5+" severity="danger"></Badge>
+</i>
+<i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
+    <Badge severity="danger"></Badge>
+</i>
+            `,
+        javascript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function PositionDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-4">
+            <i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
+                <Badge value="2"></Badge>
+            </i>
+            <i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
+                <Badge value="5+" severity="danger"></Badge>
+            </i>
+            <i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
+                <Badge severity="danger"></Badge>
+            </i>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function PositionDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-4">
+            <i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
+                <Badge value="2"></Badge>
+            </i>
+            <i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
+                <Badge value="5+" severity="danger"></Badge>
+            </i>
+            <i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
+                <Badge severity="danger"></Badge>
+            </i>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A Badge can be positioned at the top right corner of an element by adding <i>p-overlay-badge</i> style class to the element and embedding the badge inside.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-4">
+                <i className="pi pi-bell p-overlay-badge" style={{ fontSize: '2rem' }}>
+                    <Badge value="2" />
+                </i>
+                <i className="pi pi-calendar p-overlay-badge" style={{ fontSize: '2rem' }}>
+                    <Badge value="5+" severity="danger" />
+                </i>
+                <i className="pi pi-envelope p-overlay-badge" style={{ fontSize: '2rem' }}>
+                    <Badge severity="danger" />
+                </i>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/badge/pt/wireframe.js b/components/doc/badge/pt/wireframe.js
new file mode 100644
index 0000000000..da473ac88a
--- /dev/null
+++ b/components/doc/badge/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/badge.jpg" alt="badge" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/badge/severitydoc.js b/components/doc/badge/severitydoc.js
new file mode 100644
index 0000000000..989b4137d8
--- /dev/null
+++ b/components/doc/badge/severitydoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function SeverityDoc(props) {
+    const code = {
+        basic: `
+<Badge value="2"></Badge>
+<Badge value="8" severity="success"></Badge>
+<Badge value="4" severity="info"></Badge>
+<Badge value="12" severity="warning"></Badge>
+<Badge value="3" severity="danger"></Badge>
+<Badge value="7" severity="secondary"></Badge>
+<Badge value="5" severity="contrast"></Badge>
+        `,
+        javascript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Badge value="2"></Badge>
+            <Badge value="8" severity="success"></Badge>
+            <Badge value="4" severity="info"></Badge >
+            <Badge value="12" severity="warning"></Badge>
+            <Badge value="3" severity="danger"></Badge>
+            <Badge value="7" severity="secondary"></Badge>
+            <Badge value="5" severity="contrast"></Badge>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Badge value="2"></Badge>
+            <Badge value="8" severity="success"></Badge>
+            <Badge value="4" severity="info"></Badge >
+            <Badge value="12" severity="warning"></Badge>
+            <Badge value="3" severity="danger"></Badge>
+            <Badge value="7" severity="secondary"></Badge>
+            <Badge value="5" severity="contrast"></Badge>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Severity defines the color of the badge, possible values are <i>success</i>, <i>info</i>, <i>warning</i> and <i>danger</i> in addition to the default theme color.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <Badge value="2" />
+                <Badge value="8" severity="success" />
+                <Badge value="4" severity="info" />
+                <Badge value="12" severity="warning" />
+                <Badge value="3" severity="danger" />
+                <Badge value="7" severity="secondary" />
+                <Badge value="5" severity="contrast" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/badge/sizedoc.js b/components/doc/badge/sizedoc.js
new file mode 100644
index 0000000000..ca52ec5659
--- /dev/null
+++ b/components/doc/badge/sizedoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function SizeDoc(props) {
+    const code = {
+        basic: `
+<Badge value="6" size="xlarge" severity="success"></Badge>
+<Badge value="4" size="large" severity="warning"></Badge>
+<Badge value="2"></Badge>
+        `,
+        javascript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function SizeDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center align-items-end gap-2">
+            <Badge value="6" size="xlarge" severity="success"></Badge>
+            <Badge value="4" size="large" severity="warning"></Badge>
+            <Badge value="2"></Badge>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function SizeDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center align-items-end gap-2">
+            <Badge value="6" size="xlarge" severity="success"></Badge>
+            <Badge value="4" size="large" severity="warning"></Badge>
+            <Badge value="2"></Badge>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Use the <i>size</i> property to customize the size of a Badge, currently <i>large</i> and <i>xlarge</i> are available as size options.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center align-items-end gap-2">
+                <Badge value="6" size="xlarge" severity="success" />
+                <Badge value="4" size="large" severity="warning" />
+                <Badge value="2" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/badge/styledoc.js b/components/doc/badge/styledoc.js
new file mode 100644
index 0000000000..265b71d6c3
--- /dev/null
+++ b/components/doc/badge/styledoc.js
@@ -0,0 +1,62 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-badge</td>
+                            <td>Badge element</td>
+                        </tr>
+                        <tr>
+                            <td>p-overlay-badge</td>
+                            <td>Wrapper of a badge and its target.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-dot</td>
+                            <td>Badge element with no value.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-success</td>
+                            <td>Badge element with success severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-info</td>
+                            <td>Badge element with info severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-warning</td>
+                            <td>Badge element with warning severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-danger</td>
+                            <td>Badge element with danger severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-lg</td>
+                            <td>Large badge element</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-xl</td>
+                            <td>Extra large badge element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/badge/theming/styleddoc.js b/components/doc/badge/theming/styleddoc.js
new file mode 100644
index 0000000000..5f3f890350
--- /dev/null
+++ b/components/doc/badge/theming/styleddoc.js
@@ -0,0 +1,59 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-badge</td>
+                            <td>Badge element</td>
+                        </tr>
+                        <tr>
+                            <td>p-overlay-badge</td>
+                            <td>Wrapper of a badge and its target.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-dot</td>
+                            <td>Badge element with no value.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-success</td>
+                            <td>Badge element with success severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-info</td>
+                            <td>Badge element with info severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-warning</td>
+                            <td>Badge element with warning severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-danger</td>
+                            <td>Badge element with danger severity.</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-lg</td>
+                            <td>Large badge element</td>
+                        </tr>
+                        <tr>
+                            <td>p-badge-xl</td>
+                            <td>Extra large badge element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/badge/theming/tailwinddoc.js b/components/doc/badge/theming/tailwinddoc.js
new file mode 100644
index 0000000000..ab8a4ddf32
--- /dev/null
+++ b/components/doc/badge/theming/tailwinddoc.js
@@ -0,0 +1,79 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    badge: {
+        root: ({ props }) => ({
+            className: classNames(
+                'rounded-full p-0 text-center inline-block',
+                'bg-blue-500 text-white font-bold',
+                {
+                    'bg-gray-500 ': props.severity == 'secondary',
+                    'bg-green-500 ': props.severity == 'success',
+                    'bg-blue-500 ': props.severity == 'info',
+                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-purple-500 ': props.severity == 'help',
+                    'bg-red-500 ': props.severity == 'danger'
+                },
+                {
+                    'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
+                    'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large',
+                    'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge'
+                }
+            )
+        })
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Badge } from 'primereact/badge';
+
+export default function UnstyledDemo() {
+    return (
+        <div>
+            <div className="card flex flex-wrap justify-center gap-2">
+                <Badge value="2"></Badge>
+                <Badge value="8" severity="success"></Badge>
+                <Badge value="4" severity="info"></Badge >
+                <Badge value="12" severity="warning"></Badge>
+                <Badge value="3" severity="danger"></Badge>
+            </div>
+            <div className="card flex flex-wrap justify-center gap-4">
+                <i className="pi pi-bell relative text-gray-700 dark:text-white/80" style={{ fontSize: '2rem' }}>
+                    <Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" value="2"></Badge>
+                </i>
+                <i className="pi pi-calendar relative text-gray-700 dark:text-white/80" style={{ fontSize: '2rem' }}>
+                    <Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" value="5+" severity="danger"></Badge>
+                </i>
+                <i className="pi pi-envelope relative text-gray-700 dark:text-white/80" style={{ fontSize: '2rem' }}>
+                    <Badge className="absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right m-0" severity="danger" style={{ minWidth:'0.75rem', height:'0.75rem' }}></Badge>
+                </i>
+            </div>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/blockui/accessibilitydoc.js b/components/doc/blockui/accessibilitydoc.js
new file mode 100644
index 0000000000..d4fc4af696
--- /dev/null
+++ b/components/doc/blockui/accessibilitydoc.js
@@ -0,0 +1,17 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                BlockUI manages <i>aria-busy</i> state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like <i>role</i> and <i>aria-live</i> can be used to define live
+                regions.
+            </p>
+
+            <h4>Keyboard Support</h4>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/blockui/basicdoc.js b/components/doc/blockui/basicdoc.js
new file mode 100644
index 0000000000..8825c1ae98
--- /dev/null
+++ b/components/doc/blockui/basicdoc.js
@@ -0,0 +1,110 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useState } from 'react';
+import { BlockUI } from '../../../components/lib/blockui/BlockUI';
+import { Panel } from '../../../components/lib/panel/Panel';
+
+export function BasicDoc(props) {
+    const [blocked, setBlocked] = useState(false);
+
+    const code = {
+        basic: `
+<div className="mb-3">
+    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
+    <Button label="Unblock" onClick={() => setBlocked(false)} severity="secondary"></Button>
+</div>
+<BlockUI blocked={blocked}>
+    <Panel header="Basic">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+        </p>
+    </Panel>
+</BlockUI>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const [blocked, setBlocked] = useState(false);
+
+    return (
+        <div className="card">
+            <div className="mb-3">
+                <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
+                <Button label="Unblock" onClick={() => setBlocked(false)} severity="secondary"></Button>
+            </div>
+            <BlockUI blocked={blocked}>
+                <Panel header="Basic">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                </Panel>
+            </BlockUI>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const [blocked, setBlocked] = useState<boolean>(false);
+
+    return (
+        <div className="card">
+            <div className="mb-3">
+                <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
+                <Button label="Unblock" onClick={() => setBlocked(false)} severity="secondary"></Button>
+            </div>
+            <BlockUI blocked={blocked}>
+                <Panel header="Basic">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                </Panel>
+            </BlockUI>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="mb-3">
+                    <Button label="Block" onClick={() => setBlocked(true)} className="mr-2" />
+                    <Button label="Unblock" onClick={() => setBlocked(false)} severity="secondary" />
+                </div>
+                <BlockUI blocked={blocked}>
+                    <Panel header="Basic">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </Panel>
+                </BlockUI>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/blockui/documentdoc.js b/components/doc/blockui/documentdoc.js
new file mode 100644
index 0000000000..429b1e1275
--- /dev/null
+++ b/components/doc/blockui/documentdoc.js
@@ -0,0 +1,89 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useEffect, useState } from 'react';
+import { BlockUI } from '../../../components/lib/blockui/BlockUI';
+import { Button } from '../../../components/lib/button/Button';
+
+export function DocumentDoc(props) {
+    const [blocked, setBlocked] = useState(false);
+
+    useEffect(() => {
+        if (blocked) {
+            setTimeout(() => {
+                setBlocked(false);
+            }, 3000);
+        }
+    }, [blocked]);
+
+    const code = {
+        basic: `
+<BlockUI blocked={blocked} fullScreen />
+<Button label="Block" onClick={() => setBlocked(true)} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+
+export default function DocumentDemo() {
+    const [blocked, setBlocked] = useState(false);
+
+    useEffect(() => {
+        if (blocked) {
+            setTimeout(() => {
+                setBlocked(false);
+            }, 3000);
+        }
+    }, [blocked]);
+
+    return (
+        <div className="card">
+            <BlockUI blocked={blocked} fullScreen />
+            <Button label="Block" onClick={() => setBlocked(true)} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+
+export default function DocumentDemo() {
+    const [blocked, setBlocked] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (blocked) {
+            setTimeout(() => {
+                setBlocked(false);
+            }, 3000);
+        }
+    }, [blocked]);
+
+    return (
+        <div className="card">
+            <BlockUI blocked={blocked} fullScreen />
+            <Button label="Block" onClick={() => setBlocked(true)} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>fullScreen</i> property controls the document.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <BlockUI blocked={blocked} fullScreen />
+                <Button label="Block" onClick={() => setBlocked(true)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/blockui/importdoc.js b/components/doc/blockui/importdoc.js
new file mode 100644
index 0000000000..368e90ca34
--- /dev/null
+++ b/components/doc/blockui/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { BlockUI } from 'primereact/blockui';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/blockui/pt/wireframe.js b/components/doc/blockui/pt/wireframe.js
new file mode 100644
index 0000000000..2919cfb370
--- /dev/null
+++ b/components/doc/blockui/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/blockui.jpg" alt="blockui" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/blockui/styledoc.js b/components/doc/blockui/styledoc.js
new file mode 100644
index 0000000000..c3436fef96
--- /dev/null
+++ b/components/doc/blockui/styledoc.js
@@ -0,0 +1,34 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-blockui</td>
+                            <td>Mask element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-blockui-document</td>
+                            <td>Mask element in full screen mode.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/blockui/templatedoc.js b/components/doc/blockui/templatedoc.js
new file mode 100644
index 0000000000..abc3d21e67
--- /dev/null
+++ b/components/doc/blockui/templatedoc.js
@@ -0,0 +1,113 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useState } from 'react';
+import { BlockUI } from '../../../components/lib/blockui/BlockUI';
+import { Panel } from '../../../components/lib/panel/Panel';
+
+export function TemplateDoc(props) {
+    const [blocked, setBlocked] = useState(true);
+    const buttonText = blocked ? 'Subscribe' : 'Unsubscribe';
+
+    const code = {
+        basic: `
+<BlockUI blocked={blocked} template={<i className="pi pi-lock" style={{ fontSize: '3rem' }}></i>}>
+    <Panel header="Prime React News">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+        </p>
+    </Panel>
+</BlockUI>
+<div className="mt-3 flex flex-column align-items-center">
+    <h3>Continue reading?</h3>
+    <Button label={buttonText} onClick={() => setBlocked((oldState) => !oldState)}></Button>
+</div>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const [blocked, setBlocked] = useState(false);
+    const buttonText = blocked ? 'Subscribe' : 'Unsubscribe';
+
+    return (
+       <div className="card">
+            <BlockUI blocked={blocked} template={<i className="pi pi-lock" style={{ fontSize: '3rem' }}></i>}>
+                <Panel header="Prime React News">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                </Panel>
+            </BlockUI>
+            <div className="mt-3 flex flex-column align-items-center">
+                <h3>Continue reading?</h3>
+                <Button label={buttonText} onClick={() => setBlocked((oldState) => !oldState)}></Button>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const [blocked, setBlocked] = useState<boolean>(false);
+    const buttonText = blocked ? 'Subscribe' : 'Unsubscribe';
+
+    return (
+       <div className="card">
+            <BlockUI blocked={blocked} template={<i className="pi pi-lock" style={{ fontSize: '3rem' }}></i>}>
+                <Panel header="Prime React News">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                </Panel>
+            </BlockUI>
+            <div className="mt-3 flex flex-column align-items-center">
+                <h3>Continue reading?</h3>
+                <Button label={buttonText} onClick={() => setBlocked((oldState) => !oldState)}></Button>
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be placed inside the modal layer using the <i>template</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <BlockUI blocked={blocked} template={<i className="pi pi-lock" style={{ fontSize: '3rem' }} />}>
+                    <Panel header="Prime React News">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </Panel>
+                </BlockUI>
+                <div className="mt-3 flex flex-column align-items-center">
+                    <h3>Continue reading?</h3>
+                    <Button label={buttonText} onClick={() => setBlocked((oldState) => !oldState)} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/blockui/theming/styleddoc.js b/components/doc/blockui/theming/styleddoc.js
new file mode 100644
index 0000000000..4bbbc9f794
--- /dev/null
+++ b/components/doc/blockui/theming/styleddoc.js
@@ -0,0 +1,31 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-blockui</td>
+                            <td>Mask element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-blockui-document</td>
+                            <td>Mask element in full screen mode.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/blockui/theming/tailwinddoc.js b/components/doc/blockui/theming/tailwinddoc.js
new file mode 100644
index 0000000000..b1a419c5b5
--- /dev/null
+++ b/components/doc/blockui/theming/tailwinddoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    blockui: {
+        root: 'relative',
+        mask: 'bg-black/40'
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { BlockUI } from 'primereact/blockui';
+import { Panel } from 'primereact/panel';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    const [blocked, setBlocked] = useState(false);
+
+    return (
+        <div className="card">
+            <div className="mb-3">
+                <Button label="Block" onClick={() => setBlocked(true)} className="mr-2"></Button>
+                <Button label="Unblock" onClick={() => setBlocked(false)}></Button>
+            </div>
+            <BlockUI blocked={blocked}>
+                <Panel header="Basic">
+                    <p className="text-gray-700 dark:text-white/80 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                        laborum.
+                    </p>
+                </Panel>
+            </BlockUI>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/bootstrap/exampledoc.js b/components/doc/bootstrap/exampledoc.js
new file mode 100644
index 0000000000..60b1859951
--- /dev/null
+++ b/components/doc/bootstrap/exampledoc.js
@@ -0,0 +1,18 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ExampleDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    As an example, <a href="https://getbootstrap.com/docs/4.0/components/modal/">Modal</a> and <a href="https://getbootstrap.com/docs/4.0/components/buttons/">Button</a> styles of Bootstrap are used to style PrimeReact Button and
+                    Dialog.
+                </p>
+
+                <div className="flex justify-content-center">
+                    <iframe className="w-full h-full" style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }} src="https://stackblitz.com/edit/stackblitz-starters-waigrp?file=src%2FApp.js" allowfullscreen />
+                </div>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/bootstrap/setupdoc.js b/components/doc/bootstrap/setupdoc.js
new file mode 100644
index 0000000000..9b3db45d1f
--- /dev/null
+++ b/components/doc/bootstrap/setupdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function SetupDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    This section assumes that Boostrap is already available in your application, if not visit the Bootstrap <a href="https://getbootstrap.com/docs/5.3/getting-started/introduction/">documentation</a> for the installation.
+                </p>
+                <p>
+                    Bootstrap integration with PrimeReact components is achieved with unstyled mode either using global setting or for a particular component only. Visit the <Link href="http://github.com/unstyled">unstyled</Link> mode documentation for getting
+                    started.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/breadcrumb/accessibilitydoc.js b/components/doc/breadcrumb/accessibilitydoc.js
new file mode 100644
index 0000000000..442edd036a
--- /dev/null
+++ b/components/doc/breadcrumb/accessibilitydoc.js
@@ -0,0 +1,17 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Breadcrumb uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the list item
+                separators have <i>aria-hidden</i> to be able to ignored by the screen readers. If the last link represents the current route, <i>aria-current</i> is added with "page" as the value.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <p>No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/breadcrumb/basicdoc.js b/components/doc/breadcrumb/basicdoc.js
new file mode 100644
index 0000000000..fa4016adbe
--- /dev/null
+++ b/components/doc/breadcrumb/basicdoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { BreadCrumb } from '@/components/lib/breadcrumb/BreadCrumb';
+
+export function BasicDoc(props) {
+    const items = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }];
+    const home = { icon: 'pi pi-home', url: 'https://primereact.org/' };
+
+    const code = {
+        basic: `
+<BreadCrumb model={items} home={home} />
+        `,
+        javascript: `
+import React from 'react';
+import { BreadCrumb } from 'primereact/breadcrumb';
+
+export default function BasicDemo() {
+    const items = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }];
+    const home = { icon: 'pi pi-home', url: 'https://primereact.org/' }
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { BreadCrumb } from 'primereact/breadcrumb';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }];
+    const home: MenuItem = { icon: 'pi pi-home', url: 'https://primereact.org/' }
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    BreadCrumb requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <BreadCrumb model={items} home={home} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/breadcrumb/importdoc.js b/components/doc/breadcrumb/importdoc.js
new file mode 100644
index 0000000000..c3bfd59890
--- /dev/null
+++ b/components/doc/breadcrumb/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { BreadCrumb } from 'primereact/breadcrumb';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/breadcrumb/pt/wireframe.js b/components/doc/breadcrumb/pt/wireframe.js
new file mode 100644
index 0000000000..d056e9633c
--- /dev/null
+++ b/components/doc/breadcrumb/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/breadcrumb.jpg" alt="breadcrumb" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/breadcrumb/routerdoc.js b/components/doc/breadcrumb/routerdoc.js
new file mode 100644
index 0000000000..ea14807bd3
--- /dev/null
+++ b/components/doc/breadcrumb/routerdoc.js
@@ -0,0 +1,81 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { BreadCrumb } from '@/components/lib/breadcrumb/BreadCrumb';
+import Link from 'next/link';
+
+export function RouterDoc(props) {
+    const items = [
+        { label: 'Components' },
+        { label: 'Form' },
+        {
+            label: 'InputText',
+            template: () => (
+                <Link href="http://github.com/inputtext">
+                    <a className="text-primary font-semibold">InputText</a>
+                </Link>
+            )
+        }
+    ];
+    const home = { icon: 'pi pi-home', url: 'https://primereact.org/' };
+
+    const code = {
+        basic: `
+<BreadCrumb model={items} home={home} />
+        `,
+        javascript: `
+import React from 'react';
+import { BreadCrumb } from 'primereact/breadcrumb';
+import Link from 'next/link';
+
+export default function RouterDemo() {
+    const items = [
+        { label: 'Components' },
+        { label: 'Form' },
+        {
+            label: 'InputText',
+            template: () => <Link href="http://github.com/inputtext"><a className="text-primary font-semibold">InputText</a></Link>
+        }
+    ];
+    const home = { icon: 'pi pi-home', url: 'https://primereact.org/' };
+
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { BreadCrumb } from 'primereact/breadcrumb';
+import { MenuItem } from 'primereact/menuitem';
+import Link from 'next/link';
+
+export default function RouterDemo() {
+    const items: MenuItem[] = [
+        { label: 'Components' },
+        { label: 'Form' },
+        {
+            label: 'InputText',
+            template: () => <Link href="http://github.com/inputtext"><a className="text-primary font-semibold">InputText</a></Link>
+        }
+    ];
+    const home: MenuItem = { icon: 'pi pi-home', url: 'https://primereact.org/' };
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <BreadCrumb home={home} model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/breadcrumb/styledoc.js b/components/doc/breadcrumb/styledoc.js
new file mode 100644
index 0000000000..42b5e923da
--- /dev/null
+++ b/components/doc/breadcrumb/styledoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-breadcrumb</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-breadcrumb-chevron</td>
+                            <td>Chevron element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/breadcrumb/templatedoc.js b/components/doc/breadcrumb/templatedoc.js
new file mode 100644
index 0000000000..5c99f309b2
--- /dev/null
+++ b/components/doc/breadcrumb/templatedoc.js
@@ -0,0 +1,100 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { BreadCrumb } from '@/components/lib/breadcrumb/BreadCrumb';
+
+export function TemplateDoc(props) {
+    const iconItemTemplate = (item, options) => {
+        return (
+            <a className={options.className}>
+                <span className={item.icon} />
+            </a>
+        );
+    };
+
+    const items = [
+        { icon: 'pi pi-sitemap', template: iconItemTemplate },
+        { icon: 'pi pi-book', template: iconItemTemplate },
+        { icon: 'pi pi-wallet', template: iconItemTemplate },
+        { icon: 'pi pi-shopping-bag', template: iconItemTemplate },
+        { icon: 'pi pi-calculator', template: iconItemTemplate }
+    ];
+
+    const home = { icon: 'pi pi-home', url: 'https://www.primereact.org/' };
+
+    const code = {
+        basic: `
+<BreadCrumb model={items} home={home} />
+        `,
+        javascript: `
+import React from 'react';
+import { BreadCrumb } from 'primereact/breadcrumb';
+
+export default function TemplateDemo() {
+    const iconItemTemplate = (item, options) => {
+        return (
+            <a className={options.className}>
+                <span className={item.icon}></span>
+            </a>
+        );
+    };
+
+    const items = [
+        { icon: 'pi pi-sitemap', template: iconItemTemplate },
+        { icon: 'pi pi-book', template: iconItemTemplate },
+        { icon: 'pi pi-wallet', template: iconItemTemplate },
+        { icon: 'pi pi-shopping-bag', template: iconItemTemplate },
+        { icon: 'pi pi-calculator', template: iconItemTemplate }
+    ];
+
+    const home = { icon: 'pi pi-home', url: 'https://www.primereact.org/' };
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { BreadCrumb } from 'primereact/breadcrumb';
+import { MenuItem, MenuItemOptions } from 'primereact/menuitem';
+
+export default function TemplateDoc() {
+    const iconItemTemplate = (item: MenuItem, options: MenuItemOptions) => {
+        return (
+            <a className={options.className}>
+                <span className={item.icon}></span>
+            </a>
+        );
+    };
+
+    const items: MenuItem[]  = [
+        { icon: 'pi pi-sitemap', template: iconItemTemplate },
+        { icon: 'pi pi-book', template: iconItemTemplate },
+        { icon: 'pi pi-wallet', template: iconItemTemplate },
+        { icon: 'pi pi-shopping-bag', template: iconItemTemplate },
+        { icon: 'pi pi-calculator', template: iconItemTemplate }
+    ];
+
+    const home: MenuItem = { icon: 'pi pi-home', url: 'https://www.primereact.org/' };
+
+    return (
+        <BreadCrumb model={items} home={home} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be placed inside the menuitem using the <i>template</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <BreadCrumb model={items} home={home} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/breadcrumb/theming/styleddoc.js b/components/doc/breadcrumb/theming/styleddoc.js
new file mode 100644
index 0000000000..c45990fad4
--- /dev/null
+++ b/components/doc/breadcrumb/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-breadcrumb</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-breadcrumb-chevron</td>
+                            <td>Chevron element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/breadcrumb/theming/tailwinddoc.js b/components/doc/breadcrumb/theming/tailwinddoc.js
new file mode 100644
index 0000000000..9b38f65f2e
--- /dev/null
+++ b/components/doc/breadcrumb/theming/tailwinddoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {    
+    breadcrumb: {
+        root: {
+            className: classNames('overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4')
+        },
+        menu: 'm-0 p-0 list-none flex items-center flex-nowrap',
+        action: {
+            className: classNames(
+                'text-decoration-none flex items-center',
+                'transition-shadow duration-200 rounded-md text-gray-600 dark:text-white/70',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        icon: 'text-gray-600 dark:text-white/70',
+        separator: {
+            className: classNames('mx-2 text-gray-600 dark:text-white/70', 'flex items-center')
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { BreadCrumb } from 'primereact/breadcrumb';
+
+export default function UnstyledDemo() {
+    const items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }];
+    const home = { icon: 'pi pi-home', url: 'https://primereact.org/' }
+
+    return (
+        <div className="card">
+            <BreadCrumb model={items} home={home} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/bulma/exampledoc.js b/components/doc/bulma/exampledoc.js
new file mode 100644
index 0000000000..6f3e52272b
--- /dev/null
+++ b/components/doc/bulma/exampledoc.js
@@ -0,0 +1,14 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ExampleDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Demonstration of various PrimeReact components like input field, button, table and panel styled with Bulma utilities.</p>
+                <div className="flex justify-content-center">
+                    <iframe className="w-full h-full" style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }} src="https://stackblitz.com/edit/react-w9xywf?file=src%2FApp.js" allowfullscreen />
+                </div>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/bulma/setupdoc.js b/components/doc/bulma/setupdoc.js
new file mode 100644
index 0000000000..d6c55ac790
--- /dev/null
+++ b/components/doc/bulma/setupdoc.js
@@ -0,0 +1,13 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SetupDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Bulma can either be used with a CDN or via NPM. Visit the official documentation for installation steps. PrimeReact does require an extra configuration other than using components as <i>unstyled</i>.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/button/accessibilitydoc.js b/components/doc/button/accessibilitydoc.js
new file mode 100644
index 0000000000..85967b6f61
--- /dev/null
+++ b/components/doc/button/accessibilitydoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<Button icon="pi pi-check" aria-label="Submit" />
+
+<Button icon="pi pi-check" label="Submit" />
+
+<Button className="youtube p-0" aria-label="Youtube">
+    <i className="pi pi-youtube px-2"></i>
+    <span className="px-3">Youtube</span>
+</Button>
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the <i>aria-label</i> prop, if not present <i>label</i> prop is used as the value. If the button is
+                icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the button.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/button/badgesdoc.js b/components/doc/button/badgesdoc.js
new file mode 100644
index 0000000000..7e89174a4c
--- /dev/null
+++ b/components/doc/button/badgesdoc.js
@@ -0,0 +1,53 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function BadgesDoc(props) {
+    const code = {
+        basic: `
+<Button type="button" label="Emails" badge="8" />
+<Button type="button" label="Messages" icon="pi pi-users" outlined badge="2" badgeClassName="p-badge-danger" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function BadgesDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button type="button" label="Emails" badge="8" />
+            <Button type="button" label="Messages" icon="pi pi-users" outlined badge="2" badgeClassName="p-badge-danger" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function BadgesDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button type="button" label="Emails" badge="8" />
+            <Button type="button" label="Messages" icon="pi pi-users" outlined badge="2" badgeClassName="p-badge-danger" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Buttons have built-in badge support with <i>badge</i> and <i>badgeClassName</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button type="button" label="Emails" badge="8" />
+                <Button type="button" label="Messages" icon="pi pi-users" outlined badge="2" badgeClassName="p-badge-danger" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/basicdoc.js b/components/doc/button/basicdoc.js
new file mode 100644
index 0000000000..0f7eb599b3
--- /dev/null
+++ b/components/doc/button/basicdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Button label="Submit" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Submit" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Submit" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Text to display on a button is defined with the <i>label</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Submit" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/buttongroupdoc.js b/components/doc/button/buttongroupdoc.js
new file mode 100644
index 0000000000..e9a7b94e73
--- /dev/null
+++ b/components/doc/button/buttongroupdoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ButtonGroup } from '@/components/lib/buttongroup/ButtonGroup';
+
+export function ButtonGroupDoc(props) {
+    const code = {
+        basic: `
+<ButtonGroup>
+    <Button label="Save" icon="pi pi-check" />
+    <Button label="Delete" icon="pi pi-trash" />
+    <Button label="Cancel" icon="pi pi-times" />
+</ButtonGroup>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { ButtonGroup } from 'primereact/buttongroup';
+
+export default function ButtonSetDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <ButtonGroup>
+                <Button label="Save" icon="pi pi-check" />
+                <Button label="Delete" icon="pi pi-trash" />
+                <Button label="Cancel" icon="pi pi-times" />
+            </ButtonGroup>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { ButtonGroup } from 'primereact/buttongroup';
+
+export default function ButtonSetDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <ButtonGroup>
+                <Button label="Save" icon="pi pi-check" />
+                <Button label="Delete" icon="pi pi-trash" />
+                <Button label="Cancel" icon="pi pi-times" />
+            </ButtonGroup>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ButtonGroup>
+                    <Button label="Save" icon="pi pi-check" />
+                    <Button label="Delete" icon="pi pi-trash" />
+                    <Button label="Cancel" icon="pi pi-times" />
+                </ButtonGroup>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/disableddoc.js b/components/doc/button/disableddoc.js
new file mode 100644
index 0000000000..5aaf8358ee
--- /dev/null
+++ b/components/doc/button/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Button label="Submit" disabled />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Submit" disabled />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Submit" disabled />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Submit" disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/icononlydoc.js b/components/doc/button/icononlydoc.js
new file mode 100644
index 0000000000..bea2523f97
--- /dev/null
+++ b/components/doc/button/icononlydoc.js
@@ -0,0 +1,229 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function IconOnlyDoc(props) {
+    const code = {
+        basic: `
+<Button icon="pi pi-check" aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" aria-label="Search" />
+<Button icon="pi pi-user" severity="info" aria-label="User" />
+<Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+
+<Button icon="pi pi-check" rounded aria-label="Filter" />
+<Button icon="pi pi-bookmark" rounded severity="secondary" aria-label="Bookmark" />
+<Button icon="pi pi-search" rounded severity="success" aria-label="Search" />
+<Button icon="pi pi-user" rounded severity="info" aria-label="User" />
+<Button icon="pi pi-bell" rounded severity="warning" aria-label="Notification" />
+<Button icon="pi pi-heart" rounded severity="help" aria-label="Favorite" />
+<Button icon="pi pi-times" rounded severity="danger" aria-label="Cancel" />
+
+<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+<Button icon="pi pi-bookmark" rounded outlined severity="secondary" aria-label="Bookmark" />
+<Button icon="pi pi-search" rounded outlined severity="success" aria-label="Search" />
+<Button icon="pi pi-user" rounded outlined severity="info" aria-label="User" />
+<Button icon="pi pi-bell" rounded outlined severity="warning" aria-label="Notification" />
+<Button icon="pi pi-heart" rounded outlined severity="help" aria-label="Favorite" />
+<Button icon="pi pi-times" rounded outlined severity="danger" aria-label="Cancel" />
+
+<Button icon="pi pi-check" rounded text raised aria-label="Filter" />
+<Button icon="pi pi-bookmark" rounded text raised severity="secondary" aria-label="Bookmark" />
+<Button icon="pi pi-search" rounded text raised severity="success" aria-label="Search" />
+<Button icon="pi pi-user" rounded text raised severity="info" aria-label="User" />
+<Button icon="pi pi-bell" rounded text raised severity="warning" aria-label="Notification" />
+<Button icon="pi pi-heart" rounded text raised severity="help" aria-label="Favorite" />
+<Button icon="pi pi-times" rounded text raised severity="danger" aria-label="Cancel" />
+
+<Button icon="pi pi-check" rounded text aria-label="Filter" />
+<Button icon="pi pi-bookmark" rounded text severity="secondary" aria-label="Bookmark" />
+<Button icon="pi pi-search" rounded text severity="success" aria-label="Search" />
+<Button icon="pi pi-user" rounded text severity="info" aria-label="User" />
+<Button icon="pi pi-bell" rounded text severity="warning" aria-label="Notification" />
+<Button icon="pi pi-heart" rounded text severity="help" aria-label="Favorite" />
+<Button icon="pi pi-times" rounded text severity="danger" aria-label="Cancel" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function IconOnlyDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" aria-label="Filter" />
+                <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" rounded aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded outlined severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded outlined severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded outlined severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded outlined severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded outlined severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded outlined severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" rounded text raised aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded text raised severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded text raised severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded text raised severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded text raised severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded text raised severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded text raised severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3">
+                <Button icon="pi pi-check" rounded text aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded text severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded text severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded text severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded text severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded text severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded text severity="danger" aria-label="Cancel" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function IconOnlyDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" aria-label="Filter" />
+                <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" rounded aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded outlined severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded outlined severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded outlined severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded outlined severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded outlined severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded outlined severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                <Button icon="pi pi-check" rounded text raised aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded text raised severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded text raised severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded text raised severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded text raised severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded text raised severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded text raised severity="danger" aria-label="Cancel" />
+            </div>
+
+            <div className="flex flex-wrap justify-content-center gap-3">
+                <Button icon="pi pi-check" rounded text aria-label="Filter" />
+                <Button icon="pi pi-bookmark" rounded text severity="secondary" aria-label="Bookmark" />
+                <Button icon="pi pi-search" rounded text severity="success" aria-label="Search" />
+                <Button icon="pi pi-user" rounded text severity="info" aria-label="User" />
+                <Button icon="pi pi-bell" rounded text severity="warning" aria-label="Notification" />
+                <Button icon="pi pi-heart" rounded text severity="help" aria-label="Favorite" />
+                <Button icon="pi pi-times" rounded text severity="danger" aria-label="Cancel" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Buttons can have icons without labels.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                    <Button icon="pi pi-check" aria-label="Filter" />
+                    <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+                    <Button icon="pi pi-search" severity="success" aria-label="Search" />
+                    <Button icon="pi pi-user" severity="info" aria-label="User" />
+                    <Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+                    <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+                    <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
+                </div>
+
+                <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                    <Button icon="pi pi-check" rounded aria-label="Filter" />
+                    <Button icon="pi pi-bookmark" rounded severity="secondary" aria-label="Bookmark" />
+                    <Button icon="pi pi-search" rounded severity="success" aria-label="Search" />
+                    <Button icon="pi pi-user" rounded severity="info" aria-label="User" />
+                    <Button icon="pi pi-bell" rounded severity="warning" aria-label="Notification" />
+                    <Button icon="pi pi-heart" rounded severity="help" aria-label="Favorite" />
+                    <Button icon="pi pi-times" rounded severity="danger" aria-label="Cancel" />
+                </div>
+
+                <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                    <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+                    <Button icon="pi pi-bookmark" rounded outlined severity="secondary" aria-label="Bookmark" />
+                    <Button icon="pi pi-search" rounded outlined severity="success" aria-label="Search" />
+                    <Button icon="pi pi-user" rounded outlined severity="info" aria-label="User" />
+                    <Button icon="pi pi-bell" rounded outlined severity="warning" aria-label="Notification" />
+                    <Button icon="pi pi-heart" rounded outlined severity="help" aria-label="Favorite" />
+                    <Button icon="pi pi-times" rounded outlined severity="danger" aria-label="Cancel" />
+                </div>
+
+                <div className="flex flex-wrap justify-content-center gap-3 mb-4">
+                    <Button icon="pi pi-check" rounded text raised aria-label="Filter" />
+                    <Button icon="pi pi-bookmark" rounded text raised severity="secondary" aria-label="Bookmark" />
+                    <Button icon="pi pi-search" rounded text raised severity="success" aria-label="Search" />
+                    <Button icon="pi pi-user" rounded text raised severity="info" aria-label="User" />
+                    <Button icon="pi pi-bell" rounded text raised severity="warning" aria-label="Notification" />
+                    <Button icon="pi pi-heart" rounded text raised severity="help" aria-label="Favorite" />
+                    <Button icon="pi pi-times" rounded text raised severity="danger" aria-label="Cancel" />
+                </div>
+
+                <div className="flex flex-wrap justify-content-center gap-3">
+                    <Button icon="pi pi-check" rounded text aria-label="Filter" />
+                    <Button icon="pi pi-bookmark" rounded text severity="secondary" aria-label="Bookmark" />
+                    <Button icon="pi pi-search" rounded text severity="success" aria-label="Search" />
+                    <Button icon="pi pi-user" rounded text severity="info" aria-label="User" />
+                    <Button icon="pi pi-bell" rounded text severity="warning" aria-label="Notification" />
+                    <Button icon="pi pi-heart" rounded text severity="help" aria-label="Favorite" />
+                    <Button icon="pi pi-times" rounded text severity="danger" aria-label="Cancel" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/iconsdoc.js b/components/doc/button/iconsdoc.js
new file mode 100644
index 0000000000..270411306a
--- /dev/null
+++ b/components/doc/button/iconsdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function IconsDoc(props) {
+    const code = {
+        basic: `
+<Button icon="pi pi-check" />
+<Button label="Submit" icon="pi pi-check" />
+<Button label="Submit" icon="pi pi-check" iconPos="right" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function IconsDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button icon="pi pi-check" />
+            <Button label="Submit" icon="pi pi-check" />
+            <Button label="Submit" icon="pi pi-check" iconPos="right" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function IconsDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button icon="pi pi-check" />
+            <Button label="Submit" icon="pi pi-check" />
+            <Button label="Submit" icon="pi pi-check" iconPos="right" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button icon="pi pi-check" />
+                <Button label="Submit" icon="pi pi-check" />
+                <Button label="Submit" icon="pi pi-check" iconPos="right" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/importdoc.js b/components/doc/button/importdoc.js
new file mode 100644
index 0000000000..20fd2ee66e
--- /dev/null
+++ b/components/doc/button/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Button } from 'primereact/button';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/button/linkdoc.js b/components/doc/button/linkdoc.js
new file mode 100644
index 0000000000..5aabd3238b
--- /dev/null
+++ b/components/doc/button/linkdoc.js
@@ -0,0 +1,62 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function LinkDoc(props) {
+    const code = {
+        basic: `
+<Button label="Link" link onClick={() =>  window.open('https://react.dev/', '_blank')}/>
+<a href="https://react.dev/" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
+    Navigate
+</a>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function LinkDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Link" link onClick={() =>  window.open('https://react.dev/', '_blank')}/>
+            <a href="https://react.dev/" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
+                Navigate
+            </a>
+
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function LinkDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Link" link onClick={() =>  window.open('https://react.dev/', '_blank')}/>
+            <a href="https://react.dev/" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
+                Navigate
+            </a>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A button can be rendered as a link when the <i>link</i> property is present. On the other hand, adding <i>.p-button</i> class to an anchor element displays the link as a button.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Link" link onClick={() => window.open('https://react.dev/', '_blank')} />
+                <a href="https://react.dev/" target="_blank" rel="noopener noreferrer" className="p-button font-bold">
+                    Navigate
+                </a>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/loadingdoc.js b/components/doc/button/loadingdoc.js
new file mode 100644
index 0000000000..e666cde2a9
--- /dev/null
+++ b/components/doc/button/loadingdoc.js
@@ -0,0 +1,80 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useState } from 'react';
+
+export function LoadingDoc(props) {
+    const [loading, setLoading] = useState(false);
+
+    const load = () => {
+        setLoading(true);
+
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+
+    const code = {
+        basic: `
+<Button label="Submit" icon="pi pi-check" loading={loading} onClick={load} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+
+export default function LoadingDemo() {
+    const [loading, setLoading] = useState(false);
+
+    const load = () => {
+        setLoading(true);
+
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Submit" icon="pi pi-check" loading={loading} onClick={load} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+
+export default function LoadingDemo() {
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const load = () => {
+        setLoading(true);
+
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    };
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Submit" icon="pi pi-check" loading={loading} onClick={load} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Busy state is controlled with the <i>loading</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button label="Submit" icon="pi pi-check" loading={loading} onClick={load} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/outlineddoc.js b/components/doc/button/outlineddoc.js
new file mode 100644
index 0000000000..ba4615b74d
--- /dev/null
+++ b/components/doc/button/outlineddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function OutlinedDoc(props) {
+    const code = {
+        basic: `
+<Button label="Primary" outlined />
+<Button label="Secondary" severity="secondary" outlined />
+<Button label="Success" severity="success" outlined />
+<Button label="Info" severity="info" outlined />
+<Button label="Warning" severity="warning" outlined />
+<Button label="Help" severity="help" outlined />
+<Button label="Danger" severity="danger" outlined />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function OutlinedDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" outlined />
+            <Button label="Secondary" severity="secondary" outlined />
+            <Button label="Success" severity="success" outlined />
+            <Button label="Info" severity="info" outlined />
+            <Button label="Warning" severity="warning" outlined />
+            <Button label="Help" severity="help" outlined />
+            <Button label="Danger" severity="danger" outlined />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function OutlinedDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" outlined />
+            <Button label="Secondary" severity="secondary" outlined />
+            <Button label="Success" severity="success" outlined />
+            <Button label="Info" severity="info" outlined />
+            <Button label="Warning" severity="warning" outlined />
+            <Button label="Help" severity="help" outlined />
+            <Button label="Danger" severity="danger" outlined />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Outlined buttons display a border without a background initially.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button label="Primary" outlined />
+                <Button label="Secondary" severity="secondary" outlined />
+                <Button label="Success" severity="success" outlined />
+                <Button label="Info" severity="info" outlined />
+                <Button label="Warning" severity="warning" outlined />
+                <Button label="Help" severity="help" outlined />
+                <Button label="Danger" severity="danger" outlined />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/pt/wireframe.js b/components/doc/button/pt/wireframe.js
new file mode 100644
index 0000000000..70f9902ca0
--- /dev/null
+++ b/components/doc/button/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/button.jpg" alt="button" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/button/raiseddoc.js b/components/doc/button/raiseddoc.js
new file mode 100644
index 0000000000..efb1f3f4e4
--- /dev/null
+++ b/components/doc/button/raiseddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function RaisedDoc(props) {
+    const code = {
+        basic: `
+<Button label="Primary" raised />
+<Button label="Secondary" severity="secondary" raised />
+<Button label="Success" severity="success" raised />
+<Button label="Info" severity="info" raised />
+<Button label="Warning" severity="warning" raised />
+<Button label="Help" severity="help" raised />
+<Button label="Danger" severity="danger" raised />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function RaisedDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" raised />
+            <Button label="Secondary" severity="secondary" raised />
+            <Button label="Success" severity="success" raised />
+            <Button label="Info" severity="info" raised />
+            <Button label="Warning" severity="warning" raised />
+            <Button label="Help" severity="help" raised />
+            <Button label="Danger" severity="danger" raised />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function RaisedDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" raised />
+            <Button label="Secondary" severity="secondary" raised />
+            <Button label="Success" severity="success" raised />
+            <Button label="Info" severity="info" raised />
+            <Button label="Warning" severity="warning" raised />
+            <Button label="Help" severity="help" raised />
+            <Button label="Danger" severity="danger" raised />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Raised buttons display a shadow to indicate elevation.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button label="Primary" raised />
+                <Button label="Secondary" severity="secondary" raised />
+                <Button label="Success" severity="success" raised />
+                <Button label="Info" severity="info" raised />
+                <Button label="Warning" severity="warning" raised />
+                <Button label="Help" severity="help" raised />
+                <Button label="Danger" severity="danger" raised />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/raisedtextdoc.js b/components/doc/button/raisedtextdoc.js
new file mode 100644
index 0000000000..83f74d16f4
--- /dev/null
+++ b/components/doc/button/raisedtextdoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function RaisedTextDoc(props) {
+    const code = {
+        basic: `
+<Button label="Primary" text raised />
+<Button label="Secondary" severity="secondary" text raised />
+<Button label="Success" severity="success" text raised />
+<Button label="Info" severity="info" text raised />
+<Button label="Warning" severity="warning" text raised />
+<Button label="Help" severity="help" text raised />
+<Button label="Danger" severity="danger" text raised />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function RaisedTextDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" text raised />
+            <Button label="Secondary" severity="secondary" text raised />
+            <Button label="Success" severity="success" text raised />
+            <Button label="Info" severity="info" text raised />
+            <Button label="Warning" severity="warning" text raised />
+            <Button label="Help" severity="help" text raised />
+            <Button label="Danger" severity="danger" text raised />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function RaisedTextDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" text raised />
+            <Button label="Secondary" severity="secondary" text raised />
+            <Button label="Success" severity="success" text raised />
+            <Button label="Info" severity="info" text raised />
+            <Button label="Warning" severity="warning" text raised />
+            <Button label="Help" severity="help" text raised />
+            <Button label="Danger" severity="danger" text raised />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Text buttons can be displayed as raised for elevation.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button label="Primary" text raised />
+                <Button label="Secondary" severity="secondary" text raised />
+                <Button label="Success" severity="success" text raised />
+                <Button label="Info" severity="info" text raised />
+                <Button label="Warning" severity="warning" text raised />
+                <Button label="Help" severity="help" text raised />
+                <Button label="Danger" severity="danger" text raised />
+                <Button label="Plain" plain text raised />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/roundeddoc.js b/components/doc/button/roundeddoc.js
new file mode 100644
index 0000000000..93c885a823
--- /dev/null
+++ b/components/doc/button/roundeddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function RoundedDoc(props) {
+    const code = {
+        basic: `
+<Button label="Primary" rounded />
+<Button label="Secondary" severity="secondary" rounded />
+<Button label="Success" severity="success" rounded />
+<Button label="Info" severity="info" rounded />
+<Button label="Warning" severity="warning" rounded />
+<Button label="Help" severity="help" rounded />
+<Button label="Danger" severity="danger" rounded />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function RoundedDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" rounded />
+            <Button label="Secondary" severity="secondary" rounded />
+            <Button label="Success" severity="success" rounded />
+            <Button label="Info" severity="info" rounded />
+            <Button label="Warning" severity="warning" rounded />
+            <Button label="Help" severity="help" rounded />
+            <Button label="Danger" severity="danger" rounded />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function RoundedDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" rounded />
+            <Button label="Secondary" severity="secondary" rounded />
+            <Button label="Success" severity="success" rounded />
+            <Button label="Info" severity="info" rounded />
+            <Button label="Warning" severity="warning" rounded />
+            <Button label="Help" severity="help" rounded />
+            <Button label="Danger" severity="danger" rounded />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Rounded buttons have a circular border radius.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button label="Primary" rounded />
+                <Button label="Secondary" severity="secondary" rounded />
+                <Button label="Success" severity="success" rounded />
+                <Button label="Info" severity="info" rounded />
+                <Button label="Warning" severity="warning" rounded />
+                <Button label="Help" severity="help" rounded />
+                <Button label="Danger" severity="danger" rounded />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/severitydoc.js b/components/doc/button/severitydoc.js
new file mode 100644
index 0000000000..6f3538f29e
--- /dev/null
+++ b/components/doc/button/severitydoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function SeverityDoc(props) {
+    const code = {
+        basic: `
+<Button label="Primary" />
+<Button label="Secondary" severity="secondary" />
+<Button label="Success" severity="success" />
+<Button label="Info" severity="info" />
+<Button label="Warning" severity="warning" />
+<Button label="Help" severity="help" />
+<Button label="Danger" severity="danger" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" />
+            <Button label="Secondary" severity="secondary" />
+            <Button label="Success" severity="success" />
+            <Button label="Info" severity="info" />
+            <Button label="Warning" severity="warning" />
+            <Button label="Help" severity="help" />
+            <Button label="Danger" severity="danger" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" />
+            <Button label="Secondary" severity="secondary" />
+            <Button label="Success" severity="success" />
+            <Button label="Info" severity="info" />
+            <Button label="Warning" severity="warning" />
+            <Button label="Help" severity="help" />
+            <Button label="Danger" severity="danger" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Severity defines the type of button.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button label="Primary" />
+                <Button label="Secondary" severity="secondary" />
+                <Button label="Success" severity="success" />
+                <Button label="Info" severity="info" />
+                <Button label="Warning" severity="warning" />
+                <Button label="Help" severity="help" />
+                <Button label="Danger" severity="danger" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/sizesdoc.js b/components/doc/button/sizesdoc.js
new file mode 100644
index 0000000000..8f473c73c0
--- /dev/null
+++ b/components/doc/button/sizesdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function SizesDoc(props) {
+    const code = {
+        basic: `
+<Button label="Small" icon="pi pi-check" size="small" />
+<Button label="Normal" icon="pi pi-check" />
+<Button label="Large" icon="pi pi-check" size="large" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function SizesDemo() {
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
+            <Button label="Small" icon="pi pi-check" size="small" />
+            <Button label="Normal" icon="pi pi-check" />
+            <Button label="Large" icon="pi pi-check" size="large" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function SizesDemo() {
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
+            <Button label="Small" icon="pi pi-check" size="small" />
+            <Button label="Normal" icon="pi pi-check" />
+            <Button label="Large" icon="pi pi-check" size="large" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
+                <Button label="Small" icon="pi pi-check" size="small" />
+                <Button label="Normal" icon="pi pi-check" />
+                <Button label="Large" icon="pi pi-check" size="large" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/styledoc.js b/components/doc/button/styledoc.js
new file mode 100644
index 0000000000..c932ef94ba
--- /dev/null
+++ b/components/doc/button/styledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-button</td>
+                            <td>Button element</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-icon</td>
+                            <td>Icon element</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-text</td>
+                            <td>Label element of the button</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/button/templatedoc.js b/components/doc/button/templatedoc.js
new file mode 100644
index 0000000000..4a56a25c3c
--- /dev/null
+++ b/components/doc/button/templatedoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function TemplateDoc(props) {
+    const code = {
+        basic: `
+<Button className="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
+    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/primereact-logo-light.svg" className="h-2rem"></img>
+</Button>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button className="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/primereact-logo-light.svg" className="h-2rem"></img>
+            </Button>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button className="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/primereact-logo-light.svg" className="h-2rem"></img>
+            </Button>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Custom content inside a button is defined as children.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button className="bg-bluegray-600 hover:bg-bluegray-400 border-bluegray-700">
+                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/primereact-logo-light.svg" className="h-2rem" />
+                </Button>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/textdoc.js b/components/doc/button/textdoc.js
new file mode 100644
index 0000000000..a0548f9209
--- /dev/null
+++ b/components/doc/button/textdoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function TextDoc(props) {
+    const code = {
+        basic: `
+<Button label="Primary" text />
+<Button label="Secondary" severity="secondary" text />
+<Button label="Success" severity="success" text />
+<Button label="Info" severity="info" text />
+<Button label="Warning" severity="warning" text />
+<Button label="Help" severity="help" text />
+<Button label="Danger" severity="danger" text />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function TextDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" text />
+            <Button label="Secondary" severity="secondary" text />
+            <Button label="Success" severity="success" text />
+            <Button label="Info" severity="info" text />
+            <Button label="Warning" severity="warning" text />
+            <Button label="Help" severity="help" text />
+            <Button label="Danger" severity="danger" text />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function TextDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <Button label="Primary" text />
+            <Button label="Secondary" severity="secondary" text />
+            <Button label="Success" severity="success" text />
+            <Button label="Info" severity="info" text />
+            <Button label="Warning" severity="warning" text />
+            <Button label="Help" severity="help" text />
+            <Button label="Danger" severity="danger" text />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Text buttons are displayed as textual elements.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Button label="Primary" text />
+                <Button label="Secondary" severity="secondary" text />
+                <Button label="Success" severity="success" text />
+                <Button label="Info" severity="info" text />
+                <Button label="Warning" severity="warning" text />
+                <Button label="Help" severity="help" text />
+                <Button label="Danger" severity="danger" text />
+                <Button label="Plain" plain text />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/button/theming/styleddoc.js b/components/doc/button/theming/styleddoc.js
new file mode 100644
index 0000000000..dc013c61cf
--- /dev/null
+++ b/components/doc/button/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-button</td>
+                            <td>Button element</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-icon</td>
+                            <td>Icon element</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-text</td>
+                            <td>Label element of the button</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js
new file mode 100644
index 0000000000..9882fcc5fc
--- /dev/null
+++ b/components/doc/button/theming/tailwinddoc.js
@@ -0,0 +1,149 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    button: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom',
+                'transition duration-200 ease-in-out',
+                'focus:outline-none focus:outline-offset-0',
+                {
+                    'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                    'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.link
+                },
+                {
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'secondary',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'success',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'info',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'warning',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'help',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'danger'
+                },
+                {
+                    'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
+                        props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
+                        props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
+                        props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
+                        props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
+                        props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
+                        props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+                },
+                { 'shadow-lg': props.raised },
+                { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+                {
+                    'bg-transparent border-transparent': props.text && !props.plain,
+                    'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
+                    'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
+                    'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
+                    'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
+                    'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
+                    'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
+                },
+                { 'shadow-lg': props.raised && props.text },
+                {
+                    'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
+                    'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
+                    'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
+                },
+                {
+                    'bg-transparent border': props.outlined && !props.plain,
+                    'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
+                    'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
+                    'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
+                    'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
+                    'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
+                    'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
+                },
+                { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
+                { 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
+                { 'opacity-60 pointer-events-none cursor-default': context.disabled }
+            )
+        }),
+        label: ({ props }) => ({
+            className: classNames(
+                'flex-1',
+                'duration-200',
+                'font-bold',
+                {
+                    'hover:underline': props.link
+                },
+                { 'invisible w-0': props.label == null }
+            )
+        }),
+        icon: ({ props }) => ({
+            className: classNames('mx-0', {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'mb-2': props.iconPos == 'top' && props.label != null,
+                'mt-2 order-2': props.iconPos == 'bottom' && props.label != null
+            })
+        }),
+        loadingIcon: ({ props }) => ({
+            className: classNames('mx-0', {
+                'mr-2': props.loading && props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.loading && props.iconPos == 'right' && props.label != null,
+                'mb-2': props.loading && props.iconPos == 'top' && props.label != null,
+                'mt-2 order-2': props.loading && props.iconPos == 'bottom' && props.label != null
+            })
+        }),
+        badge: ({ props }) => ({
+            className: classNames({ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge })
+        })
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex flex-wrap justify-center gap-3">
+            <Button label="Primary" />
+            <Button label="Secondary" severity="secondary" />
+            <Button label="Success" severity="success" />
+            <Button label="Info" severity="info" />
+            <Button label="Warning" severity="warning" />
+            <Button label="Help" severity="help" />
+            <Button label="Danger" severity="danger" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/calendar/accessibilitydoc.js b/components/doc/calendar/accessibilitydoc.js
new file mode 100644
index 0000000000..3d873264f1
--- /dev/null
+++ b/components/doc/calendar/accessibilitydoc.js
@@ -0,0 +1,251 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="date1">Date</label>
+<Calendar inputId="date1" />
+
+<span id="date2">Date</span>
+<Calendar aria-labelledby="date2" />
+
+<Calendar aria-label="Date" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to{' '}
+                <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.
+            </p>
+            <p>
+                The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the{' '}
+                <i>chooseDate</i>
+                key of the aria property from the <Link href="http://github.com/locale">locale</Link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to
+                notify users about the current value.
+            </p>
+
+            <p>
+                Popup has a <i>dialog</i> role along with <i>aria-modal</i> and <i>aria-label</i>. The navigation buttons at the header has an <i>aria-label</i> retrieved from the <i>prevYear</i>, <i>nextYear</i>, <i>prevMonth</i>, <i>nextMonth</i>,
+                <i>prevDecade</i> and <i>nextDecade</i> keys of the locale aria API. Similarly month picker button uses the <i>chooseMonth</i> and year picker button uses the <i>chooseYear</i> keys.
+            </p>
+
+            <p>
+                Main date table uses <i>grid</i> role that contains th elements with <i>col</i> as the scope along with <i>abbr</i> tag resolving to the full name of the month. Each date cell has an <i>aria-label</i> referring to the full date value.
+                Buttons at the footer utilize their readable labels as <i>aria-label</i> as well. Selected date also receives the <i>aria-selected</i> attribute.
+            </p>
+
+            <p>
+                Timepicker spinner buttons get their labels for <i>aria-label</i> from the aria locale API using the <i>prevHour</i>, <i>nextHour</i>, <i>prevMinute</i>, <i>nextMinute</i>, <i>prevSecond</i>, <i>nextSecond</i>, <i>am</i> and <i>pm</i>{' '}
+                keys.
+            </p>
+
+            <p>
+                Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Choose Date Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Popup Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next focusable element within the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next focusable element within the popup.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Header Buttons Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Triggers the button action.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Triggers the button action.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Date Grid Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the date, closes the popup and moves focus to the input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Selects the date, closes the popup and moves focus to the input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the same day of the previous week.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the same day of the next week.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next day.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous day.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first day of the current week.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last day of the current week.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>page up</i>
+                            </td>
+                            <td>Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>page up</i>
+                            </td>
+                            <td>Changes the date to previous year in date picker mode. Has no effect in month or year picker</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>page down</i>
+                            </td>
+                            <td>Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>page down</i>
+                            </td>
+                            <td>Changes the date to next year in date picker mode. Has no effect in month or year picker</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Footer Buttons Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Triggers the button action.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Triggers the button action.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/calendar/basicdoc.js b/components/doc/calendar/basicdoc.js
new file mode 100644
index 0000000000..8f6b3a7b58
--- /dev/null
+++ b/components/doc/calendar/basicdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function BasicDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function BasicDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Calendar is used a controlled input component with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/buttonbardoc.js b/components/doc/calendar/buttonbardoc.js
new file mode 100644
index 0000000000..dfb1cca97e
--- /dev/null
+++ b/components/doc/calendar/buttonbardoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function ButtonBarDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} showButtonBar />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function ButtonBarDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} showButtonBar />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function ButtonBarDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} showButtonBar />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>showButtonBar</i> is present, today and clear buttons are displayed at the footer.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showButtonBar />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/datetemplatedoc.js b/components/doc/calendar/datetemplatedoc.js
new file mode 100644
index 0000000000..426fe81f52
--- /dev/null
+++ b/components/doc/calendar/datetemplatedoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function DateTemplateDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const dateTemplate = (date) => {
+        if (date.day > 10 && date.day < 15) {
+            return <strong style={{ textDecoration: 'line-through' }}>{date.day}</strong>;
+        }
+
+        return date.day;
+    };
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} dateTemplate={dateTemplate} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function DateTemplateDemo() {
+    const [date, setDate] = useState(null);
+
+    const dateTemplate = (date) => {
+        if (date.day > 10 && date.day < 15) {
+            return (
+                <strong style={{ textDecoration: 'line-through' }}>{date.day}</strong>
+            );
+        }
+
+        return date.day;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} dateTemplate={dateTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function DateTemplateDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    const dateTemplate = (date: Date) => {
+        if (date.day > 10 && date.day < 15) {
+            return (
+                <strong style={{ textDecoration: 'line-through' }}>{date.day}</strong>
+            );
+        }
+
+        return date.day;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} dateTemplate={dateTemplate} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be placed inside date cells with the <i>dateTemplate</i> property that takes a Date as a parameter.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} dateTemplate={dateTemplate} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/disableddoc.js b/components/doc/calendar/disableddoc.js
new file mode 100644
index 0000000000..799c2b8efb
--- /dev/null
+++ b/components/doc/calendar/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Calendar disabled />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar disabled />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar disabled />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/filleddoc.js b/components/doc/calendar/filleddoc.js
new file mode 100644
index 0000000000..bc40cba1ea
--- /dev/null
+++ b/components/doc/calendar/filleddoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function FilledDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function FilledDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/floatlabeldoc.js b/components/doc/calendar/floatlabeldoc.js
new file mode 100644
index 0000000000..6645847e7f
--- /dev/null
+++ b/components/doc/calendar/floatlabeldoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
+    <label htmlFor="birth_date">Birth Date</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
+                <label htmlFor="birth_date">Birth Date</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { FloatLabel } from 'primereact/floatlabel';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function FloatLabelDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
+                <label htmlFor="birth_date">Birth Date</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <Calendar inputId="birth_date" value={date} onChange={(e) => setDate(e.value)} />
+                    <label htmlFor="birth_date">Birth Date</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/formatdoc.js b/components/doc/calendar/formatdoc.js
new file mode 100644
index 0000000000..059c446825
--- /dev/null
+++ b/components/doc/calendar/formatdoc.js
@@ -0,0 +1,110 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function FormatDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} dateFormat="dd/mm/yy" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function FormatDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} dateFormat="dd/mm/yy" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function FormatDemo() {
+     const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} dateFormat="dd/mm/yy" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Default date format is <i>mm/dd/yy</i> which can be customized using the <i>dateFormat</i> property. Following options can be a part of the format.
+                </p>
+                <ul className="mb-4 line-height-4">
+                    <li>
+                        <i>d</i> - day of month (no leading zero)
+                    </li>
+                    <li>
+                        <i>dd</i> - day of month (two digit)
+                    </li>
+                    <li>
+                        <i>o</i> - day of the year (no leading zeros)
+                    </li>
+                    <li>
+                        <i>oo</i> - day of the year (three digit)
+                    </li>
+                    <li>
+                        <i>D</i> - day name short
+                    </li>
+                    <li>
+                        <i>DD</i> - day name long
+                    </li>
+                    <li>
+                        <i>m</i> - month of year (no leading zero)
+                    </li>
+                    <li>
+                        <i>mm</i> - month of year (two digit)
+                    </li>
+                    <li>
+                        <i>M</i> - month name short
+                    </li>
+                    <li>
+                        <i>MM</i> - month name long
+                    </li>
+                    <li>
+                        <i>y</i> - year (two digit)
+                    </li>
+                    <li>
+                        <i>yy</i> - year (four digit)
+                    </li>
+                    <li>
+                        <i>@</i> - Unix timestamp (ms since 01/01/1970)
+                    </li>
+                    <li>
+                        <i>!</i> - Windows ticks (100ns since 01/01/0001)
+                    </li>
+                    <li>
+                        <i>'...'</i> - literal text
+                    </li>
+                    <li>
+                        <i>''</i> - single quote
+                    </li>
+                    <li>
+                        <i>anything else</i> - literal text
+                    </li>
+                </ul>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} dateFormat="dd/mm/yy" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/icondoc.js b/components/doc/calendar/icondoc.js
new file mode 100644
index 0000000000..ada519247b
--- /dev/null
+++ b/components/doc/calendar/icondoc.js
@@ -0,0 +1,114 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function IconDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} showIcon />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function IconDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                    Button Display
+                </label>
+                <Calendar id="buttondisplay" value={date} onChange={(e) => setDate(e.value)} showIcon />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                    Icon Display
+                </label>
+
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon  />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                    Icon Template
+                </label>
+
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly  icon={() => <i className="pi pi-clock" />} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function IconDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                    Button Display
+                </label>
+                <Calendar id="buttondisplay" value={date} onChange={(e) => setDate(e.value)} showIcon />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                    Icon Display
+                </label>
+
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon  />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                    Icon Template
+                </label>
+
+                <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly  icon={() => <i className="pi pi-clock" />} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An additional icon is displayed next to the input field when <i>showIcon</i> is present.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3 p-fluid">
+                <div className="flex-auto">
+                    <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                        Button Display
+                    </label>
+                    <Calendar id="buttondisplay" value={date} onChange={(e) => setDate(e.value)} showIcon />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                        Icon Display
+                    </label>
+
+                    <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="buttondisplay" className="font-bold block mb-2">
+                        Icon Template
+                    </label>
+
+                    <Calendar value={date} onChange={(e) => setDate(e.value)} showIcon timeOnly icon={() => <i className="pi pi-clock" />} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/importdoc.js b/components/doc/calendar/importdoc.js
new file mode 100644
index 0000000000..343b77b3ab
--- /dev/null
+++ b/components/doc/calendar/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Calendar } from 'primereact/calendar';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/calendar/inlinedoc.js b/components/doc/calendar/inlinedoc.js
new file mode 100644
index 0000000000..8fdfe9f892
--- /dev/null
+++ b/components/doc/calendar/inlinedoc.js
@@ -0,0 +1,59 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function InlineDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} inline showWeek />
+
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function InlineDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} inline showWeek />
+        </div>
+
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function InlineDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} inline showWeek />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Calendar is displayed as a popup by default, add <i>inline</i> property to customize this behavior.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} inline showWeek />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/invaliddoc.js b/components/doc/calendar/invaliddoc.js
new file mode 100644
index 0000000000..a05a779a64
--- /dev/null
+++ b/components/doc/calendar/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<Calendar invalid/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar invalid/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar invalid/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar invalid />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/localedoc.js b/components/doc/calendar/localedoc.js
new file mode 100644
index 0000000000..9e85edbae7
--- /dev/null
+++ b/components/doc/calendar/localedoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { addLocale } from '@/components/lib/api/Locale';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function LocaleDoc(props) {
+    const [date, setDate] = useState(null);
+
+    addLocale('es', {
+        firstDayOfWeek: 1,
+        showMonthAfterYear: true,
+        dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+        dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+        dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
+        monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+        monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+        today: 'Hoy',
+        clear: 'Limpiar'
+    });
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} locale="es" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { addLocale } from 'primereact/api';
+
+export default function LocaleDemo() {
+    const [date, setDate] = useState(null);
+
+    addLocale('es', {
+        firstDayOfWeek: 1,
+        showMonthAfterYear: true,
+        dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+        dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+        dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
+        monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+        monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+        today: 'Hoy',
+        clear: 'Limpiar'
+    });
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} locale="es" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { addLocale } from 'primereact/api';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function LocaleDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    addLocale('es', {
+        firstDayOfWeek: 1,
+        showMonthAfterYear: true,
+        dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+        dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+        dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
+        monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+        monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+        today: 'Hoy',
+        clear: 'Limpiar'
+    });
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} locale="es" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Locale based settings such as labels, dateFormat and firstDayOfWeek are derived from the global <Link href="http://github.com/locale">Locale</Link> configuration. In case, a certain calendar needs to be customized, <i>locale</i> property can be
+                    used to override the global setting.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} locale="es" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/minmaxdoc.js b/components/doc/calendar/minmaxdoc.js
new file mode 100644
index 0000000000..7a3a0151a5
--- /dev/null
+++ b/components/doc/calendar/minmaxdoc.js
@@ -0,0 +1,111 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function MinMaxDoc(props) {
+    let today = new Date();
+    let month = today.getMonth();
+    let year = today.getFullYear();
+    let prevMonth = month === 0 ? 11 : month - 1;
+    let prevYear = prevMonth === 11 ? year - 1 : year;
+    let nextMonth = month === 11 ? 0 : month + 1;
+    let nextYear = nextMonth === 0 ? year + 1 : year;
+
+    const [date, setDate] = useState(null);
+
+    let minDate = new Date();
+
+    minDate.setMonth(prevMonth);
+    minDate.setFullYear(prevYear);
+
+    let maxDate = new Date();
+
+    maxDate.setMonth(nextMonth);
+    maxDate.setFullYear(nextYear);
+
+    const code = {
+        basic: `
+<Calendar id="minmax" value={date} onChange={(e) => setDate(e.value)} minDate={minDate} maxDate={maxDate} readOnlyInput />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function MinMaxDemo() {
+    let today = new Date();
+    let month = today.getMonth();
+    let year = today.getFullYear();
+    let prevMonth = month === 0 ? 11 : month - 1;
+    let prevYear = prevMonth === 11 ? year - 1 : year;
+    let nextMonth = month === 11 ? 0 : month + 1;
+    let nextYear = nextMonth === 0 ? year + 1 : year;
+
+    const [date, setDate] = useState(null);
+
+    let minDate = new Date();
+
+    minDate.setMonth(prevMonth);
+    minDate.setFullYear(prevYear);
+
+    let maxDate = new Date();
+
+    maxDate.setMonth(nextMonth);
+    maxDate.setFullYear(nextYear);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} minDate={minDate} maxDate={maxDate} readOnlyInput />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function MinMaxDemo() {
+    let today = new Date();
+    let month = today.getMonth();
+    let year = today.getFullYear();
+    let prevMonth = month === 0 ? 11 : month - 1;
+    let prevYear = prevMonth === 11 ? year - 1 : year;
+    let nextMonth = month === 11 ? 0 : month + 1;
+    let nextYear = nextMonth === 0 ? year + 1 : year;
+
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    let minDate = new Date();
+
+    minDate.setMonth(prevMonth);
+    minDate.setFullYear(prevYear);
+
+    let maxDate = new Date();
+
+    maxDate.setMonth(nextMonth);
+    maxDate.setFullYear(nextYear);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} minDate={minDate} maxDate={maxDate} readOnlyInput />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Boundaries for the permitted dates that can be entered are defined with <i>minDate</i> and <i>maxDate</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} minDate={minDate} maxDate={maxDate} readOnlyInput />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/monthpickerdoc.js b/components/doc/calendar/monthpickerdoc.js
new file mode 100644
index 0000000000..3fb0d639f9
--- /dev/null
+++ b/components/doc/calendar/monthpickerdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function MonthPickerDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function MonthPickerDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function MonthPickerDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Month only picker is enabled by specifying <i>view</i> as <i>month</i> in addition to a suitable <i>dateFormat</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} view="month" dateFormat="mm/yy" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/multipledoc.js b/components/doc/calendar/multipledoc.js
new file mode 100644
index 0000000000..743abb2d13
--- /dev/null
+++ b/components/doc/calendar/multipledoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function MultipleDoc(props) {
+    const [dates, setDates] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="multiple" readOnlyInput />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function MultipleDemo() {
+    const [dates, setDates] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="multiple" readOnlyInput />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function MultipleDemo() {
+    const [dates, setDates] = useState<Nullable<Date[]>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="multiple" readOnlyInput />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    In order to choose multiple dates, set <i>selectionMode</i> as <i>multiple</i>. In this mode, the value binding should be an array.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="multiple" readOnlyInput />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/multiplemonthsdoc.js b/components/doc/calendar/multiplemonthsdoc.js
new file mode 100644
index 0000000000..c85f7e86b9
--- /dev/null
+++ b/components/doc/calendar/multiplemonthsdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function MultipleMonthsDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function MultipleMonthsDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function MultipleMonthsDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Number of months to display is configured with the <i>numberOfMonths</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} numberOfMonths={3} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/pt/wireframe.js b/components/doc/calendar/pt/wireframe.js
new file mode 100644
index 0000000000..a2cd812c85
--- /dev/null
+++ b/components/doc/calendar/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="calendar" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/calendar/rangedoc.js b/components/doc/calendar/rangedoc.js
new file mode 100644
index 0000000000..1b668042a7
--- /dev/null
+++ b/components/doc/calendar/rangedoc.js
@@ -0,0 +1,58 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function RangeDoc(props) {
+    const [dates, setDates] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function RangeDemo() {
+    const [dates, setDates] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function RangeDemo() {
+    const [dates, setDates] = useState<Nullable<(Date | null)[]>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
+        </div>
+
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A range of dates can be selected by defining <i>selectionMode</i> as <i>range</i>, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={dates} onChange={(e) => setDates(e.value)} selectionMode="range" readOnlyInput hideOnRangeSelection />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/styledoc.js b/components/doc/calendar/styledoc.js
new file mode 100644
index 0000000000..f583423e5e
--- /dev/null
+++ b/components/doc/calendar/styledoc.js
@@ -0,0 +1,74 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-calendar</td>
+                            <td>Main container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-calendar-w-btn</td>
+                            <td>Main container element when button is enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>p-calendar-timeonly</td>
+                            <td>Main container element in time picker only mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputtext</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker</td>
+                            <td>Datepicker element</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-inline</td>
+                            <td>Datepicker element in inline mode</td>
+                        </tr>
+                        <tr>
+                            <td>p-monthpicker</td>
+                            <td>Datepicker element in month view.</td>
+                        </tr>
+                        <tr>
+                            <td>p-monthpicker-month</td>
+                            <td>Month cell in month view mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-touch-ui</td>
+                            <td>Datepicker element in touch ui mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-calendar</td>
+                            <td>Table containing dates of a month.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-current-day</td>
+                            <td>Cell of selected date.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-today</td>
+                            <td>Cell of today's date.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/calendar/theming/styleddoc.js b/components/doc/calendar/theming/styleddoc.js
new file mode 100644
index 0000000000..f063a9170b
--- /dev/null
+++ b/components/doc/calendar/theming/styleddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-calendar</td>
+                            <td>Main container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-calendar-w-btn</td>
+                            <td>Main container element when button is enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>p-calendar-timeonly</td>
+                            <td>Main container element in time picker only mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputtext</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker</td>
+                            <td>Datepicker element</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-inline</td>
+                            <td>Datepicker element in inline mode</td>
+                        </tr>
+                        <tr>
+                            <td>p-monthpicker</td>
+                            <td>Datepicker element in month view.</td>
+                        </tr>
+                        <tr>
+                            <td>p-monthpicker-month</td>
+                            <td>Month cell in month view mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-touch-ui</td>
+                            <td>Datepicker element in touch ui mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-calendar</td>
+                            <td>Table containing dates of a month.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-current-day</td>
+                            <td>Cell of selected date.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datepicker-today</td>
+                            <td>Cell of today's date.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/calendar/theming/tailwinddoc.js b/components/doc/calendar/theming/tailwinddoc.js
new file mode 100644
index 0000000000..907058522a
--- /dev/null
+++ b/components/doc/calendar/theming/tailwinddoc.js
@@ -0,0 +1,176 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {
+    calendar: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex max-w-full relative', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        input: ({ props }) => ({
+            root: {
+                className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', {
+                    'rounded-lg': !props.showIcon,
+                    'border-r-0 rounded-l-lg': props.showIcon
+                })
+            }
+        }),
+        dropdownButton: {
+            root: ({ props }) => ({
+                className: classNames({ 'rounded-l-none': props.icon })
+            })
+        },
+        panel: ({ props }) => ({
+            className: classNames('bg-white dark:bg-gray-900', 'min-w-full', {
+                'shadow-md border-0 absolute': !props.inline,
+                'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline
+            })
+        }),
+        header: {
+            className: classNames('flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg')
+        },
+        previousButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        title: { className: 'leading-8 mx-auto' },
+        monthTitle: {
+            className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500')
+        },
+        yearTitle: {
+            className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500')
+        },
+        nextButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        table: {
+            className: classNames('border-collapse w-full', 'my-2')
+        },
+        tableHeaderCell: { className: 'p-2' },
+        weekday: { className: 'text-gray-600 dark:text-white/70' },
+        day: { className: 'p-2' },
+        dayLabel: ({ context }) => ({
+            className: classNames(
+                'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
+                'flex items-center justify-center mx-auto overflow-hidden relative',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'opacity-60 cursor-default': context.disabled,
+                    'cursor-pointer': !context.disabled
+                },
+                {
+                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
+            )
+        }),
+        monthPicker: { className: 'my-2' },
+        month: ({ context }) => ({
+            className: classNames(
+                'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'p-2 transition-shadow duration-200 rounded-lg',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
+            )
+        }),
+        yearPicker: {
+            className: classNames('my-2')
+        },
+        year: ({ context }) => ({
+            className: classNames(
+                'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'p-2 transition-shadow duration-200 rounded-lg',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
+            )
+        }),
+        timePicker: {
+            className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
+        },
+        separatorContainer: { className: 'flex items-center flex-col px-2' },
+        separator: { className: 'text-xl' },
+        hourPicker: { className: 'flex items-center flex-col px-2' },
+        minutePicker: { className: 'flex items-center flex-col px-2' },
+        ampmPicker: { className: 'flex items-center flex-col px-2' },
+        incrementButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        decrementButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        groupContainer: { className: 'flex' },
+        group: {
+            className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function UnstyledDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/calendar/timedoc.js b/components/doc/calendar/timedoc.js
new file mode 100644
index 0000000000..6c0b7e30ca
--- /dev/null
+++ b/components/doc/calendar/timedoc.js
@@ -0,0 +1,116 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function TimeDoc(props) {
+    const [datetime12h, setDateTime12h] = useState(null);
+    const [datetime24h, setDateTime24h] = useState(null);
+    const [time, setTime] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={datetime12h} onChange={(e) => setDateTime12h(e.value)} showTime hourFormat="12" />
+<Calendar value={datetime24h} onChange={(e) => setDateTime24h(e.value)} showTime hourFormat="24" />
+<Calendar value={time} onChange={(e) => setTime(e.value)} timeOnly />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function TimeDemo() {
+    const [datetime12h, setDateTime12h] = useState(null);
+    const [datetime24h, setDateTime24h] = useState(null);
+    const [time, setTime] = useState(null);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="calendar-12h" className="font-bold block mb-2">
+                    12h Format
+                </label>
+                <Calendar id="calendar-12h" value={datetime12h} onChange={(e) => setDateTime12h(e.value)} showTime hourFormat="12" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="calendar-24h" className="font-bold block mb-2">
+                    24h Format
+                </label>
+                <Calendar id="calendar-24h" value={datetime24h} onChange={(e) => setDateTime24h(e.value)} showTime hourFormat="24" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="calendar-timeonly" className="font-bold block mb-2">
+                    Time Only
+                </label>
+                <Calendar id="calendar-timeonly" value={time} onChange={(e) => setTime(e.value)} timeOnly />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar} from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function TimeDemo() {
+    const [datetime12h, setDateTime12h] = useState<Nullable<Date>>(null);
+    const [datetime24h, setDateTime24h] = useState<Nullable<Date>>(null);
+    const [time, setTime] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="calendar-12h" className="font-bold block mb-2">
+                    12h Format
+                </label>
+                <Calendar id="calendar-12h" value={datetime12h} onChange={(e) => setDateTime12h(e.value)} showTime hourFormat="12" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="calendar-24h" className="font-bold block mb-2">
+                    24h Format
+                </label>
+                <Calendar id="calendar-24h" value={datetime24h} onChange={(e) => setDateTime24h(e.value)} showTime hourFormat="24" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="calendar-timeonly" className="font-bold block mb-2">
+                    Time Only
+                </label>
+                <Calendar id="calendar-timeonly" value={time} onChange={(e) => setTime(e.value)} timeOnly />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A time picker is displayed when <i>showTime</i> is enabled where 12/24 hour format is configured with <i>hourFormat</i> property. In case, only time needs to be selected, add <i>timeOnly</i> to hide the date section.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3 p-fluid">
+                <div className="flex-auto">
+                    <label htmlFor="calendar-12h" className="font-bold block mb-2">
+                        12h Format
+                    </label>
+                    <Calendar id="calendar-12h" value={datetime12h} onChange={(e) => setDateTime12h(e.value)} showTime hourFormat="12" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="calendar-24h" className="font-bold block mb-2">
+                        24h Format
+                    </label>
+                    <Calendar id="calendar-24h" value={datetime24h} onChange={(e) => setDateTime24h(e.value)} showTime hourFormat="24" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="calendar-timeonly" className="font-bold block mb-2">
+                        Time Only
+                    </label>
+                    <Calendar id="calendar-timeonly" value={time} onChange={(e) => setTime(e.value)} timeOnly />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/touchuidoc.js b/components/doc/calendar/touchuidoc.js
new file mode 100644
index 0000000000..dd6a79463e
--- /dev/null
+++ b/components/doc/calendar/touchuidoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function TouchUIDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function TouchUIDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function TouchUIDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>touchUI</i> is enabled, overlay is displayed as optimized for touch devices.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} touchUI />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/yearpickerdoc.js b/components/doc/calendar/yearpickerdoc.js
new file mode 100644
index 0000000000..c5e59eb542
--- /dev/null
+++ b/components/doc/calendar/yearpickerdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function YearPickerDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar value={date} onChange={(e) => setDate(e.value)} view="year" dateFormat="yy" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function YearPickerDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} view="year" dateFormat="yy" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function YearPickerDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar value={date} onChange={(e) => setDate(e.value)} view="year" dateFormat="yy" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specifying <i>view</i> as <i>year</i> in addition to a suitable <i>dateFormat</i> enables the year picker.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar value={date} onChange={(e) => setDate(e.value)} view="year" dateFormat="yy" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/captcha/accessibilitydoc.js b/components/doc/captcha/accessibilitydoc.js
new file mode 100644
index 0000000000..87ed1bb7f2
--- /dev/null
+++ b/components/doc/captcha/accessibilitydoc.js
@@ -0,0 +1,15 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <p>
+                Refer to the{' '}
+                <a alt="Recaptcha Accessibility " href="https://support.google.com/recaptcha/answer/6175971?hl=en">
+                    Recaptcha Accessibility
+                </a>{' '}
+                documentation for more information.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/captcha/captchadoc.js b/components/doc/captcha/captchadoc.js
new file mode 100644
index 0000000000..ca5889f0ed
--- /dev/null
+++ b/components/doc/captcha/captchadoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Captcha } from '@/components/lib/captcha/Captcha';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function CaptchaDoc(props) {
+    const toast = useRef(null);
+
+    const showResponse = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'User Responded' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<Captcha siteKey="YOUR_SITE_KEY" onResponse={showResponse} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { Captcha } from 'primereact/captcha';
+
+export default function CaptchaDoc() {
+    const toast = useRef(null);
+
+    const showResponse = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'User Responded' });
+    };
+
+    return (
+        <div className="card">
+            <Toast ref={toast}></Toast>
+            <Captcha siteKey="YOUR_SITE_KEY" onResponse={showResponse} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { Captcha } from 'primereact/captcha';
+
+export default function CaptchaDoc() {
+    const toast = useRef<Toast>(null);
+
+    const showResponse = () => {
+        toast.current?.show({ severity: 'info', summary: 'Success', detail: 'User Responded' });
+    };
+
+    return (
+        <div className="card">
+            <Toast ref={toast}></Toast>
+            <Captcha siteKey="YOUR_SITE_KEY" onResponse={showResponse} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Styling Demo Content.</p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast} />
+                <Captcha siteKey="YOUR_SITE_KEY" onResponse={showResponse} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/captcha/importdoc.js b/components/doc/captcha/importdoc.js
new file mode 100644
index 0000000000..0d6e445c0c
--- /dev/null
+++ b/components/doc/captcha/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Captcha } from 'primereact/captcha';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/card/accessibilitydoc.js b/components/doc/card/accessibilitydoc.js
new file mode 100644
index 0000000000..99af585a8f
--- /dev/null
+++ b/components/doc/card/accessibilitydoc.js
@@ -0,0 +1,31 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<Card role="region">
+    Content
+</Card>
+        `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
+                require to use one of the{' '}
+                <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
+                    landmark
+                </a>{' '}
+                roles like <i>region</i>, you may use the <i>role</i> property.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/card/advanceddoc.js b/components/doc/card/advanceddoc.js
new file mode 100644
index 0000000000..d9321a2eeb
--- /dev/null
+++ b/components/doc/card/advanceddoc.js
@@ -0,0 +1,99 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Card } from '@/components/lib/card/Card';
+
+export function AdvancedDoc(props) {
+    const header = <img alt="Card" src="https://primefaces.org/cdn/primereact/images/usercard.png" />;
+    const footer = (
+        <>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Cancel" severity="secondary" icon="pi pi-times" style={{ marginLeft: '0.5em' }} />
+        </>
+    );
+    const code = {
+        basic: `
+<Card title="Advanced Card" subTitle="Card subtitle" footer={footer} header={header} className="md:w-25rem">
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
+        numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+    </p>
+</Card>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+
+export default function AdvancedDemo() {
+    const header = (
+        <img alt="Card" src="https://primefaces.org/cdn/primereact/images/usercard.png" />
+    );
+    const footer = (
+        <>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Cancel" severity="secondary" icon="pi pi-times" style={{ marginLeft: '0.5em' }} />
+        </>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Card title="Advanced Card" subTitle="Card subtitle" footer={footer} header={header} className="md:w-25rem">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
+                    numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </p>
+            </Card>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+
+export default function AdvancedDemo() {
+    const header = (
+        <img alt="Card" src="https://primefaces.org/cdn/primereact/images/usercard.png" />
+    );
+    const footer = (
+        <>
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Cancel" severity="secondary" icon="pi pi-times" style={{ marginLeft: '0.5em' }} />
+        </>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Card title="Advanced Card" subTitle="Card subtitle" footer={footer} header={header} className="md:w-25rem">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
+                    numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </p>
+            </Card>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Card content can be customized further with <i>subTitle</i>, <i>header</i> and <i>footer</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Card title="Advanced Card" subTitle="Card subtitle" footer={footer} header={header} className="md:w-25rem">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                        quas!
+                    </p>
+                </Card>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/card/basicdoc.js b/components/doc/card/basicdoc.js
new file mode 100644
index 0000000000..78397d5d6b
--- /dev/null
+++ b/components/doc/card/basicdoc.js
@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Card } from '@/components/lib/card/Card';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Card title="Simple Card">
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
+        numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+    </p>
+</Card>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Card } from 'primereact/card';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Card title="Simple Card">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
+                    numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </p>
+            </Card>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Card } from 'primereact/card';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Card title="Simple Card">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
+                    numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </p>
+            </Card>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A simple Card is created with a <i>title</i> property along with the content as children.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Card title="Simple Card">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                        quas!
+                    </p>
+                </Card>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/card/importdoc.js b/components/doc/card/importdoc.js
new file mode 100644
index 0000000000..caadf1fde8
--- /dev/null
+++ b/components/doc/card/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Card } from 'primereact/card';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/card/pt/wireframe.js b/components/doc/card/pt/wireframe.js
new file mode 100644
index 0000000000..c063492930
--- /dev/null
+++ b/components/doc/card/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/card.jpg" alt="card" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/card/styledoc.js b/components/doc/card/styledoc.js
new file mode 100644
index 0000000000..28c03fc159
--- /dev/null
+++ b/components/doc/card/styledoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-card</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-title</td>
+                            <td>Title element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-subtitle</td>
+                            <td>Subtitle element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-content</td>
+                            <td>Content of the card.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-footer</td>
+                            <td>Footer of the card.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/card/theming/styleddoc.js b/components/doc/card/theming/styleddoc.js
new file mode 100644
index 0000000000..2e8a0448e0
--- /dev/null
+++ b/components/doc/card/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-card</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-title</td>
+                            <td>Title element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-subtitle</td>
+                            <td>Subtitle element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-content</td>
+                            <td>Content of the card.</td>
+                        </tr>
+                        <tr>
+                            <td>p-card-footer</td>
+                            <td>Footer of the card.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/card/theming/tailwinddoc.js b/components/doc/card/theming/tailwinddoc.js
new file mode 100644
index 0000000000..817e718761
--- /dev/null
+++ b/components/doc/card/theming/tailwinddoc.js
@@ -0,0 +1,75 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    card: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 shadow-md rounded-md', // Background, text color, box shadow, and border radius.
+                'dark:bg-gray-900 dark:text-white ' //dark
+            )
+        },
+        body: 'p-5', // Padding.
+        title: 'text-2xl font-bold mb-2', // Font size, font weight, and margin bottom.
+        subtitle: {
+            className: classNames(
+                'font-normal mb-2 text-gray-600', // Font weight, margin bottom, and text color.
+                'dark:text-white/60 ' //dark
+            )
+        },
+        content: 'py-5', // Vertical padding.
+        footer: 'pt-5' // Top padding.
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';  
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    const header = (
+        <img alt="Card" src="https://primefaces.org/cdn/primereact/images/usercard.png" />
+    );
+    const footer = (
+        <div className="flex flex-wrap justify-content-end gap-2">
+            <Button label="Save" icon="pi pi-check" />
+            <Button label="Cancel" icon="pi pi-times" severity="secondary" />
+        </div>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Card title="Advanced Card" subTitle="Card Subtitle" footer={footer} header={header} className="md:w-25rem">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae 
+                    numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+                </p>
+            </Card>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/carousel/accessibilitydoc.js b/components/doc/carousel/accessibilitydoc.js
new file mode 100644
index 0000000000..d8bef5720a
--- /dev/null
+++ b/components/doc/carousel/accessibilitydoc.js
@@ -0,0 +1,116 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Carousel uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has <i>aria-live</i>{' '}
+                attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay.
+            </p>
+
+            <p>
+                A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <Link href="http://github.com/locale">locale</Link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the item.
+                Inactive slides are hidden from the readers with <i>aria-hidden</i>.
+            </p>
+
+            <p>
+                Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.nextPageLabel</i> and <i>aria.firstPageLabel</i> properties of the <Link href="http://github.com/locale">locale</Link> API by default
+                respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
+            </p>
+
+            <p>
+                Quick navigation elements are button elements with an <i>aria-label</i> attribute referring to the <i>aria.pageLabel</i> of the <Link href="http://github.com/locale">locale</Link> API. Current page is marked with <i>aria-current</i>.
+            </p>
+
+            <h3>Next/Prev Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through interactive elements in the carousel.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates navigation.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates navigation.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Quick Navigation Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the active slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last slide link.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/carousel/basicdoc.js b/components/doc/carousel/basicdoc.js
new file mode 100644
index 0000000000..6b5268f5d2
--- /dev/null
+++ b/components/doc/carousel/basicdoc.js
@@ -0,0 +1,275 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Carousel } from '@/components/lib/carousel/Carousel';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function BasicDoc(props) {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" rounded />
+                        <Button icon="pi pi-star-fill" rounded severity="success" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" rounded />
+                        <Button icon="pi pi-star-fill" rounded severity="success" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel, CarouselResponsiveOption } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const responsiveOptions: CarouselResponsiveOption[] = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+    
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product: Product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" rounded />
+                        <Button icon="pi pi-star-fill" rounded severity="success" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card">
+            <Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
+            </DocSectionText>
+            <div className="card">
+                <Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/carousel/circulardoc.js b/components/doc/carousel/circulardoc.js
new file mode 100644
index 0000000000..f30f8e4a0a
--- /dev/null
+++ b/components/doc/carousel/circulardoc.js
@@ -0,0 +1,280 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Carousel } from '@/components/lib/carousel/Carousel';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function CircularDoc(props) {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} className="custom-carousel" circular
+autoplayInterval={3000} itemTemplate={productTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function CircularDemo() {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} className="custom-carousel" circular
+            autoplayInterval={3000} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel, CarouselResponsiveOption } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function CircularDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const responsiveOptions: CarouselResponsiveOption[] = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product: Product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card">
+            <Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} className="custom-carousel" circular
+            autoplayInterval={3000} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `      
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be added which is enabled automatically in auto play mode.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} className="custom-carousel" circular autoplayInterval={3000} itemTemplate={productTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/carousel/importdoc.js b/components/doc/carousel/importdoc.js
new file mode 100644
index 0000000000..b7fffbb9d1
--- /dev/null
+++ b/components/doc/carousel/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Carousel } from 'primereact/carousel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/carousel/numscrolldoc.js b/components/doc/carousel/numscrolldoc.js
new file mode 100644
index 0000000000..9608e2c7ff
--- /dev/null
+++ b/components/doc/carousel/numscrolldoc.js
@@ -0,0 +1,277 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Carousel } from '@/components/lib/carousel/Carousel';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function NumScrollDoc(props) {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function NumScrollDemo() {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel, CarouselResponsiveOption } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function NumScrollDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const responsiveOptions: CarouselResponsiveOption[] = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product: Product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card">
+            <Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Number of items to scroll is specified with the <i>numScroll</i> option.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/carousel/pt/wireframe.js b/components/doc/carousel/pt/wireframe.js
new file mode 100644
index 0000000000..6df70da88b
--- /dev/null
+++ b/components/doc/carousel/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="carousel" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/carousel/responsivedoc.js b/components/doc/carousel/responsivedoc.js
new file mode 100644
index 0000000000..82d2404543
--- /dev/null
+++ b/components/doc/carousel/responsivedoc.js
@@ -0,0 +1,279 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Carousel } from '@/components/lib/carousel/Carousel';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function ResponsiveDoc(props) {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function ResponsiveDemo() {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+    
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel, CarouselResponsiveOption } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function ResponsiveDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const responsiveOptions: CarouselResponsiveOption[] = [
+        {
+            breakpoint: '1400px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '1199px',
+            numVisible: 3,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+    
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product: Product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card">
+            <Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Carousel supports specific configuration per screen size with the <i>responsiveOptions</i> property that takes an array of objects where each object defines the max-width <i>breakpoint</i>, <i>numVisible</i> for the number of
+                    items items per page and <i>numScroll</i> for number of items to scroll. When <i>responsiveOptions</i> is defined, the <i>numScroll</i> and <i>numVisible</i> properties of the Carousel are used as default when there is breakpoint
+                    that applies.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Carousel value={products} numScroll={1} numVisible={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/carousel/styledoc.js b/components/doc/carousel/styledoc.js
new file mode 100644
index 0000000000..006c7bfb9c
--- /dev/null
+++ b/components/doc/carousel/styledoc.js
@@ -0,0 +1,55 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-carousel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-content</td>
+                            <td>Main content element. It contains the container of the viewport.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-container</td>
+                            <td>Container of the viewport. It contains navigation buttons and viewport.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-items-content</td>
+                            <td>Viewport.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-indicators</td>
+                            <td>Container of the indicators.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-indicator</td>
+                            <td>Indicator element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/carousel/theming/styleddoc.js b/components/doc/carousel/theming/styleddoc.js
new file mode 100644
index 0000000000..d7aa0fe100
--- /dev/null
+++ b/components/doc/carousel/theming/styleddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-carousel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-content</td>
+                            <td>Main content element. It contains the container of the viewport.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-container</td>
+                            <td>Container of the viewport. It contains navigation buttons and viewport.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-items-content</td>
+                            <td>Viewport.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-indicators</td>
+                            <td>Container of the indicators.</td>
+                        </tr>
+                        <tr>
+                            <td>p-carousel-indicator</td>
+                            <td>Indicator element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/carousel/theming/tailwinddoc.js b/components/doc/carousel/theming/tailwinddoc.js
new file mode 100644
index 0000000000..2e945cb313
--- /dev/null
+++ b/components/doc/carousel/theming/tailwinddoc.js
@@ -0,0 +1,138 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    carousel: {
+        root: 'flex flex-col',
+        content: 'flex flex-col overflow-auto',
+        container: ({ props }) => ({
+            className: classNames('flex', {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col': props.orientation == 'vertical'
+            })
+        }),
+        previousbutton: {
+            className: classNames('flex justify-center items-center self-center overflow-hidden relative shrink-0 grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2')
+        },
+        itemscontent: 'overflow-hidden w-full',
+        itemscontainer: ({ props }) => ({
+            className: classNames('flex ', {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col h-full': props.orientation == 'vertical'
+            })
+        }),
+        item: ({ props }) => ({
+            className: classNames('flex shrink-0 grow', {
+                'w-1/3': props.orientation !== 'vertical',
+                'w-full': props.orientation == 'vertical'
+            })
+        }),
+        indicators: {
+            className: classNames('flex flex-row justify-center flex-wrap')
+        },
+        indicator: 'mr-2 mb-2',
+        indicatorbutton: ({ context }) => ({
+            className: classNames('w-8 h-2 transition duration-200 rounded-0', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]', {
+                'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.active,
+                'bg-blue-500 hover:bg-blue-600': context.active
+            })
+        })
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function UnstyledDemo() {
+    const [products, setProducts] = useState([]);
+    const responsiveOptions = [
+        {
+            breakpoint: '1199px',
+            numVisible: 1,
+            numScroll: 1
+        },
+        {
+            breakpoint: '991px',
+            numVisible: 2,
+            numScroll: 1
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 1,
+            numScroll: 1
+        }
+    ];
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 rounded-lg m-2 text-center py-5 px-3">
+                <div className="mb-3 flex justify-center">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-1/2 shadow-sm" />
+                </div>
+                <div>
+                    <h4 className="mb-1 text-gray-700 font-medium dark:text-white/80">{product.name}</h4>
+                    <h6 className="mt-0 mb-3 font-medium text-gray-700 dark:text-white/80">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-center align-center">
+                        <Button icon="pi pi-search" rounded className="mr-2 text-gray-700 dark:text-white/80 inline-flex"/>
+                        <Button icon="pi pi-star-fill" rounded severity="success" className="mr-2 text-gray-700 dark:text-white/80 inline-flex"/>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <Carousel value={products} numVisible={3} numScroll={3} responsiveOptions={responsiveOptions} itemTemplate={productTemplate} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['ProductService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/carousel/verticaldoc.js b/components/doc/carousel/verticaldoc.js
new file mode 100644
index 0000000000..93dac0d31d
--- /dev/null
+++ b/components/doc/carousel/verticaldoc.js
@@ -0,0 +1,213 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Carousel } from '@/components/lib/carousel/Carousel';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function VerticalDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Carousel value={products} numVisible={1} numScroll={1} orientation="vertical" verticalViewPortHeight="360px" itemTemplate={productTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function VerticalDemo() {
+    const [products, setProducts] = useState([]);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+    
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Carousel value={products} numVisible={1} numScroll={1} orientation="vertical" verticalViewPortHeight="360px"
+            itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Carousel } from 'primereact/carousel';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function VerticalDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+    
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 9)));
+    }, []);
+
+    const productTemplate = (product: Product) => {
+        return (
+            <div className="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div className="mb-3">
+                    <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} className="w-6 shadow-2" />
+                </div>
+                <div>
+                    <h4 className="mb-1">{product.name}</h4>
+                    <h6 className="mt-0 mb-3">\${product.price}</h6>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    <div className="mt-5 flex flex-wrap gap-2 justify-content-center">
+                        <Button icon="pi pi-search" className="p-button p-button-rounded" />
+                        <Button icon="pi pi-star-fill" className="p-button-success p-button-rounded" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card flex justify-content-center">
+            <Carousel value={products} numVisible={1} numScroll={1} orientation="vertical" verticalViewPortHeight="360px"
+            itemTemplate={productTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    To create a vertical Carousel, <i>orientation</i> needs to be set to <i>vertical</i> along with a <i>verticalViewPortHeight</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Carousel value={products} numVisible={1} numScroll={1} orientation="vertical" verticalViewPortHeight="360px" itemTemplate={productTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/accessibilitydoc.js b/components/doc/cascadeselect/accessibilitydoc.js
new file mode 100644
index 0000000000..bc1396b699
--- /dev/null
+++ b/components/doc/cascadeselect/accessibilitydoc.js
@@ -0,0 +1,133 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="dd1">Options</span>
+<CascadeSelect aria-labelledby="dd1" />
+
+<CascadeSelect aria-label="Options" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The cascadeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i>{' '}
+                attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
+            </p>
+            <p>
+                The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i>{' '}
+                and <i>aria-expanded</i> attributes. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
+            </p>
+
+            <p>
+                If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Closed State Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the cascadeselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Popup Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Hides the popup and moves focus to the next tabbable element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Hides the popup and moves focus to the previous tabbable element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the focused option and closes the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Selects the focused option and closes the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup, moves focus to the cascadeselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If option is closed, opens the option otherwise moves focus to the first child option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If option is open, closes the option otherwise moves focus to the parent option.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/cascadeselect/basicdoc.js b/components/doc/cascadeselect/basicdoc.js
new file mode 100644
index 0000000000..4ddbc6bcc6
--- /dev/null
+++ b/components/doc/cascadeselect/basicdoc.js
@@ -0,0 +1,316 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        { cname: 'Sydney', code: 'A-SY' },
+                        { cname: 'Newcastle', code: 'A-NE' },
+                        { cname: 'Wollongong', code: 'A-WO' }
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        { cname: 'Brisbane', code: 'A-BR' },
+                        { cname: 'Townsville', code: 'A-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        { cname: 'Montreal', code: 'C-MO' },
+                        { cname: 'Quebec City', code: 'C-QU' }
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        { cname: 'Ottawa', code: 'C-OT' },
+                        { cname: 'Toronto', code: 'C-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        { cname: 'Los Angeles', code: 'US-LA' },
+                        { cname: 'San Diego', code: 'US-SD' },
+                        { cname: 'San Francisco', code: 'US-SF' }
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        { cname: 'Jacksonville', code: 'US-JA' },
+                        { cname: 'Miami', code: 'US-MI' },
+                        { cname: 'Tampa', code: 'US-TA' },
+                        { cname: 'Orlando', code: 'US-OR' }
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        { cname: 'Austin', code: 'US-AU' },
+                        { cname: 'Dallas', code: 'US-DA' },
+                        { cname: 'Houston', code: 'US-HO' }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+
+interface City {
+    cname: string;
+    code: string;
+}
+
+interface CountryState {
+    name: string;
+    cities: City[];
+}
+
+interface Country {
+    name: string;
+    code: string;
+    states: CountryState[];
+}
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const countries: Country[] = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    CascadeSelect is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with an <i>options</i> collection. To define the label of a group <i>optionGroupLabel</i> property is needed and also{' '}
+                    <i>optionGroupChildren</i> is required to define the property that refers to the children of a group. Note that order of the <i>optionGroupChildren</i> matters as it should correspond to the data hierarchy.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={countries}
+                    optionLabel="cname"
+                    optionGroupLabel="name"
+                    optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem"
+                    breakpoint="767px"
+                    placeholder="Select a City"
+                    style={{ minWidth: '14rem' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/clearicondoc.js b/components/doc/cascadeselect/clearicondoc.js
new file mode 100644
index 0000000000..9a7ede9aac
--- /dev/null
+++ b/components/doc/cascadeselect/clearicondoc.js
@@ -0,0 +1,316 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { useState } from 'react';
+
+export function ClearIconDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        { cname: 'Sydney', code: 'A-SY' },
+                        { cname: 'Newcastle', code: 'A-NE' },
+                        { cname: 'Wollongong', code: 'A-WO' }
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        { cname: 'Brisbane', code: 'A-BR' },
+                        { cname: 'Townsville', code: 'A-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        { cname: 'Montreal', code: 'C-MO' },
+                        { cname: 'Quebec City', code: 'C-QU' }
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        { cname: 'Ottawa', code: 'C-OT' },
+                        { cname: 'Toronto', code: 'C-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        { cname: 'Los Angeles', code: 'US-LA' },
+                        { cname: 'San Diego', code: 'US-SD' },
+                        { cname: 'San Francisco', code: 'US-SF' }
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        { cname: 'Jacksonville', code: 'US-JA' },
+                        { cname: 'Miami', code: 'US-MI' },
+                        { cname: 'Tampa', code: 'US-TA' },
+                        { cname: 'Orlando', code: 'US-OR' }
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        { cname: 'Austin', code: 'US-AU' },
+                        { cname: 'Dallas', code: 'US-DA' },
+                        { cname: 'Houston', code: 'US-HO' }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<CascadeSelect value={selectedCity} showClear onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function ClearIconDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect value={selectedCity} showClear onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+
+interface City {
+    cname: string;
+    code: string;
+}
+
+interface CountryState {
+    name: string;
+    cities: City[];
+}
+
+interface Country {
+    name: string;
+    code: string;
+    states: CountryState[];
+}
+
+export default function ClearIconDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const countries: Country[] = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect value={selectedCity} showClear onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>showClear</i> is enabled, a clear icon is added to reset the CascadeSelect.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect
+                    value={selectedCity}
+                    showClear
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={countries}
+                    optionLabel="cname"
+                    optionGroupLabel="name"
+                    optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem"
+                    breakpoint="767px"
+                    placeholder="Select a City"
+                    style={{ minWidth: '14rem' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/disableddoc.js b/components/doc/cascadeselect/disableddoc.js
new file mode 100644
index 0000000000..bc574b2a08
--- /dev/null
+++ b/components/doc/cascadeselect/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<CascadeSelect disabled placeholder="Disabled" style={{ minWidth: '14rem' }} />
+        `,
+        javascript: `
+import React from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect disabled placeholder="Disabled" style={{ minWidth: '14rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect disabled placeholder="Disabled" style={{ minWidth: '14rem' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect disabled placeholder="Disabled" style={{ minWidth: '14rem' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/filleddoc.js b/components/doc/cascadeselect/filleddoc.js
new file mode 100644
index 0000000000..8fea37d572
--- /dev/null
+++ b/components/doc/cascadeselect/filleddoc.js
@@ -0,0 +1,316 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        { cname: 'Sydney', code: 'A-SY' },
+                        { cname: 'Newcastle', code: 'A-NE' },
+                        { cname: 'Wollongong', code: 'A-WO' }
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        { cname: 'Brisbane', code: 'A-BR' },
+                        { cname: 'Townsville', code: 'A-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        { cname: 'Montreal', code: 'C-MO' },
+                        { cname: 'Quebec City', code: 'C-QU' }
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        { cname: 'Ottawa', code: 'C-OT' },
+                        { cname: 'Toronto', code: 'C-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        { cname: 'Los Angeles', code: 'US-LA' },
+                        { cname: 'San Diego', code: 'US-SD' },
+                        { cname: 'San Francisco', code: 'US-SF' }
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        { cname: 'Jacksonville', code: 'US-JA' },
+                        { cname: 'Miami', code: 'US-MI' },
+                        { cname: 'Tampa', code: 'US-TA' },
+                        { cname: 'Orlando', code: 'US-OR' }
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        { cname: 'Austin', code: 'US-AU' },
+                        { cname: 'Dallas', code: 'US-DA' },
+                        { cname: 'Houston', code: 'US-HO' }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<CascadeSelect variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+
+interface City {
+    cname: string;
+    code: string;
+}
+
+interface CountryState {
+    name: string;
+    cities: City[];
+}
+
+interface Country {
+    name: string;
+    code: string;
+    states: CountryState[];
+}
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const countries: Country[] = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect variant="filled" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect
+                    variant="filled"
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={countries}
+                    optionLabel="cname"
+                    optionGroupLabel="name"
+                    optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem"
+                    breakpoint="767px"
+                    placeholder="Select a City"
+                    style={{ minWidth: '14rem' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/floatlabeldoc.js b/components/doc/cascadeselect/floatlabeldoc.js
new file mode 100644
index 0000000000..a6d3834a3f
--- /dev/null
+++ b/components/doc/cascadeselect/floatlabeldoc.js
@@ -0,0 +1,331 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        { cname: 'Sydney', code: 'A-SY' },
+                        { cname: 'Newcastle', code: 'A-NE' },
+                        { cname: 'Wollongong', code: 'A-WO' }
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        { cname: 'Brisbane', code: 'A-BR' },
+                        { cname: 'Townsville', code: 'A-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        { cname: 'Montreal', code: 'C-MO' },
+                        { cname: 'Quebec City', code: 'C-QU' }
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        { cname: 'Ottawa', code: 'C-OT' },
+                        { cname: 'Toronto', code: 'C-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        { cname: 'Los Angeles', code: 'US-LA' },
+                        { cname: 'San Diego', code: 'US-SD' },
+                        { cname: 'San Francisco', code: 'US-SF' }
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        { cname: 'Jacksonville', code: 'US-JA' },
+                        { cname: 'Miami', code: 'US-MI' },
+                        { cname: 'Tampa', code: 'US-TA' },
+                        { cname: 'Orlando', code: 'US-OR' }
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        { cname: 'Austin', code: 'US-AU' },
+                        { cname: 'Dallas', code: 'US-DA' },
+                        { cname: 'Houston', code: 'US-HO' }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
+        optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+        className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
+    <label htmlFor="cs-city">City</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries}
+                    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
+                <label htmlFor="cs-city">City</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+import { FloatLabel } from 'primereact/floatlabel';
+
+interface City {
+    cname: string;
+    code: string;
+}
+
+interface CountryState {
+    name: string;
+    cities: City[];
+}
+
+interface Country {
+    name: string;
+    code: string;
+    states: CountryState[];
+}
+
+export default function FloatLabelDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const countries: Country[] = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <CascadeSelect inputId="cs-city" value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries}
+                    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
+                <label htmlFor="cs-city">City</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <CascadeSelect
+                        inputId="cs-city"
+                        value={selectedCity}
+                        onChange={(e) => setSelectedCity(e.value)}
+                        options={countries}
+                        optionLabel="cname"
+                        optionGroupLabel="name"
+                        optionGroupChildren={['states', 'cities']}
+                        className="w-full md:w-14rem"
+                        breakpoint="767px"
+                        style={{ minWidth: '14rem' }}
+                    />
+                    <label htmlFor="cs-city">City</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/importdoc.js b/components/doc/cascadeselect/importdoc.js
new file mode 100644
index 0000000000..1f14e679cd
--- /dev/null
+++ b/components/doc/cascadeselect/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { CascadeSelect } from 'primereact/cascadeselect';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/invaliddoc.js b/components/doc/cascadeselect/invaliddoc.js
new file mode 100644
index 0000000000..b2d117fefa
--- /dev/null
+++ b/components/doc/cascadeselect/invaliddoc.js
@@ -0,0 +1,316 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        { cname: 'Sydney', code: 'A-SY' },
+                        { cname: 'Newcastle', code: 'A-NE' },
+                        { cname: 'Wollongong', code: 'A-WO' }
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        { cname: 'Brisbane', code: 'A-BR' },
+                        { cname: 'Townsville', code: 'A-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        { cname: 'Montreal', code: 'C-MO' },
+                        { cname: 'Quebec City', code: 'C-QU' }
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        { cname: 'Ottawa', code: 'C-OT' },
+                        { cname: 'Toronto', code: 'C-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        { cname: 'Los Angeles', code: 'US-LA' },
+                        { cname: 'San Diego', code: 'US-SD' },
+                        { cname: 'San Francisco', code: 'US-SF' }
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        { cname: 'Jacksonville', code: 'US-JA' },
+                        { cname: 'Miami', code: 'US-MI' },
+                        { cname: 'Tampa', code: 'US-TA' },
+                        { cname: 'Orlando', code: 'US-OR' }
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        { cname: 'Austin', code: 'US-AU' },
+                        { cname: 'Dallas', code: 'US-DA' },
+                        { cname: 'Houston', code: 'US-HO' }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<CascadeSelect invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function InvalidDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+
+interface City {
+    cname: string;
+    code: string;
+}
+
+interface CountryState {
+    name: string;
+    cities: City[];
+}
+
+interface Country {
+    name: string;
+    code: string;
+    states: CountryState[];
+}
+
+export default function InvalidDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const countries: Country[] = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect invalid value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect
+                    invalid
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={countries}
+                    optionLabel="cname"
+                    optionGroupLabel="name"
+                    optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem"
+                    breakpoint="767px"
+                    placeholder="Select a City"
+                    style={{ minWidth: '14rem' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/loadingdoc.js b/components/doc/cascadeselect/loadingdoc.js
new file mode 100644
index 0000000000..106997cc2f
--- /dev/null
+++ b/components/doc/cascadeselect/loadingdoc.js
@@ -0,0 +1,50 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+
+export function LoadingDoc(props) {
+    const code = {
+        basic: `
+<CascadeSelect loading placeholder="Loading..." className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
+        `,
+        javascript: `
+import React from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function LoadingDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect loading placeholder="Loading..." className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+
+export default function LoadingDemo() {
+   
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect loading placeholder="Loading..." className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />        
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Loading state can be used <i>loading</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect loading placeholder="Loading..." className="w-full md:w-14rem" breakpoint="767px" style={{ minWidth: '14rem' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/pt/wireframe.js b/components/doc/cascadeselect/pt/wireframe.js
new file mode 100644
index 0000000000..6db3fb675d
--- /dev/null
+++ b/components/doc/cascadeselect/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/cascadeselect.jpg" alt="cascadeselect" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/cascadeselect/styledoc.js b/components/doc/cascadeselect/styledoc.js
new file mode 100644
index 0000000000..66b1186e0e
--- /dev/null
+++ b/components/doc/cascadeselect/styledoc.js
@@ -0,0 +1,54 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-cascadeselect</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-label</td>
+                            <td>Element to display label of selected option.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-trigger</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-panel</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-items-wrapper</td>
+                            <td>Wrapper element of items list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-items</td>
+                            <td>List element of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/templatedoc.js b/components/doc/cascadeselect/templatedoc.js
new file mode 100644
index 0000000000..4cc9c01b02
--- /dev/null
+++ b/components/doc/cascadeselect/templatedoc.js
@@ -0,0 +1,350 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { CascadeSelect } from '@/components/lib/cascadeselect/CascadeSelect';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        { cname: 'Sydney', code: 'A-SY' },
+                        { cname: 'Newcastle', code: 'A-NE' },
+                        { cname: 'Wollongong', code: 'A-WO' }
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        { cname: 'Brisbane', code: 'A-BR' },
+                        { cname: 'Townsville', code: 'A-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        { cname: 'Montreal', code: 'C-MO' },
+                        { cname: 'Quebec City', code: 'C-QU' }
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        { cname: 'Ottawa', code: 'C-OT' },
+                        { cname: 'Toronto', code: 'C-TO' }
+                    ]
+                }
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        { cname: 'Los Angeles', code: 'US-LA' },
+                        { cname: 'San Diego', code: 'US-SD' },
+                        { cname: 'San Francisco', code: 'US-SF' }
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        { cname: 'Jacksonville', code: 'US-JA' },
+                        { cname: 'Miami', code: 'US-MI' },
+                        { cname: 'Tampa', code: 'US-TA' },
+                        { cname: 'Orlando', code: 'US-OR' }
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        { cname: 'Austin', code: 'US-AU' },
+                        { cname: 'Dallas', code: 'US-DA' },
+                        { cname: 'Houston', code: 'US-HO' }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const countryOptionTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                {option.states && <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />}
+                {option.cities && <i className="pi pi-compass" />}
+                {option.cname && <i className="pi pi-map-marker" />}
+                <span>{option.cname || option.name}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<CascadeSelect value={selectedCity} onChange={e => setSelectedCity(e.value)} options={countries} 
+    optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} 
+    className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} style={{ minWidth: '14rem' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function TemplateDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const countryOptionTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                {option.states && <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+                className={\`flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />}
+                {option.cities && <i className="pi pi-compass"/>}
+                {option.cname && <i className="pi pi-map-marker"/>}
+                <span>{option.cname || option.name}</span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect value={selectedCity} onChange={e => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} 
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} style={{ minWidth: '14rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { CascadeSelect, CascadeSelectChangeEvent } from 'primereact/cascadeselect';
+
+interface City {
+    cname: string;
+    code: string;
+}
+
+interface CountryState {
+    name: string;
+    cities: City[];
+}
+
+interface Country {
+    name: string;
+    code: string;
+    states: CountryState[];
+}
+
+export default function TemplateDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const countries: Country[] = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    const countryOptionTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                {option.states && <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+                className={\`flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />}
+                {option.cities && <i className="pi pi-compass"/>}
+                {option.cname && <i className="pi pi-map-marker"/>}
+                <span>{option.cname || option.name}</span>
+            </div>
+        );
+    }
+    return (
+        <div className="card flex justify-content-center">
+            <CascadeSelect value={selectedCity} onChange={(e: CascadeSelectChangeEvent) => setSelectedCity(event.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']} 
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" itemTemplate={countryOptionTemplate} style={{ minWidth: '14rem' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Content of an item is customized with the <i>itemTemplate</i> property that takes an option as a parameter.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <CascadeSelect
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={countries}
+                    optionLabel="cname"
+                    optionGroupLabel="name"
+                    optionGroupChildren={['states', 'cities']}
+                    className="w-full md:w-14rem"
+                    breakpoint="767px"
+                    placeholder="Select a City"
+                    itemTemplate={countryOptionTemplate}
+                    style={{ minWidth: '14rem' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/theming/styleddoc.js b/components/doc/cascadeselect/theming/styleddoc.js
new file mode 100644
index 0000000000..e026ddd459
--- /dev/null
+++ b/components/doc/cascadeselect/theming/styleddoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-cascadeselect</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-label</td>
+                            <td>Element to display label of selected option.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-trigger</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-panel</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-items-wrapper</td>
+                            <td>Wrapper element of items list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-items</td>
+                            <td>List element of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-cascadeselect-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/cascadeselect/theming/tailwinddoc.js b/components/doc/cascadeselect/theming/tailwinddoc.js
new file mode 100644
index 0000000000..c8eb3f6f6d
--- /dev/null
+++ b/components/doc/cascadeselect/theming/tailwinddoc.js
@@ -0,0 +1,162 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-0',
+            exitActive: 'transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {        
+    cascadeselect: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex cursor-pointer select-none relative', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition duration-200 ease-in-out rounded-lg', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        label: {
+            className: classNames('block whitespace-nowrap overflow-hidden flex flex-1 w-1 text-overflow-ellipsis cursor-pointer', 'bg-transparent border-0 p-3 text-gray-700 dark:text-white/80', 'appearance-none rounded-md')
+        },
+        dropdownButton: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6')
+        },
+        panel: { className: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md' },
+        list: { className: 'm-0 sm:p-0 list-none' },
+        sublist: {
+            className: classNames('block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md')
+        },
+        item: ({ state }) => ({
+            className: classNames('cursor-pointer font-normal whitespace-nowrap', 'm-0 border-0 bg-transparent transition-shadow rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/80': !state.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': state.selected
+            })
+        }),
+        content: {
+            className: classNames('flex items-center overflow-hidden relative', 'py-3 px-5')
+        },
+        optionGroupIcon: { className: 'ml-auto' },
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { CascadeSelect } from 'primereact/cascadeselect';
+
+export default function UnstyledDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const countries = [
+        {
+            name: 'Australia',
+            code: 'AU',
+            states: [
+                {
+                    name: 'New South Wales',
+                    cities: [
+                        {cname: 'Sydney', code: 'A-SY'},
+                        {cname: 'Newcastle', code: 'A-NE'},
+                        {cname: 'Wollongong', code: 'A-WO'}
+                    ]
+                },
+                {
+                    name: 'Queensland',
+                    cities: [
+                        {cname: 'Brisbane', code: 'A-BR'},
+                        {cname: 'Townsville', code: 'A-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'Canada',
+            code: 'CA',
+            states: [
+                {
+                    name: 'Quebec',
+                    cities: [
+                        {cname: 'Montreal', code: 'C-MO'},
+                        {cname: 'Quebec City', code: 'C-QU'}
+                    ]
+                },
+                {
+                    name: 'Ontario',
+                    cities: [
+                        {cname: 'Ottawa', code: 'C-OT'},
+                        {cname: 'Toronto', code: 'C-TO'}
+                    ]
+                },
+
+            ]
+        },
+        {
+            name: 'United States',
+            code: 'US',
+            states: [
+                {
+                    name: 'California',
+                    cities: [
+                        {cname: 'Los Angeles', code: 'US-LA'},
+                        {cname: 'San Diego', code: 'US-SD'},
+                        {cname: 'San Francisco', code: 'US-SF'}
+                    ]
+                },
+                {
+                    name: 'Florida',
+                    cities: [
+                        {cname: 'Jacksonville', code: 'US-JA'},
+                        {cname: 'Miami', code: 'US-MI'},
+                        {cname: 'Tampa', code: 'US-TA'},
+                        {cname: 'Orlando', code: 'US-OR'}
+                    ]
+                },
+                {
+                    name: 'Texas',
+                    cities: [
+                        {cname: 'Austin', code: 'US-AU'},
+                        {cname: 'Dallas', code: 'US-DA'},
+                        {cname: 'Houston', code: 'US-HO'}
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-center">
+            <CascadeSelect value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={countries} 
+                optionLabel="cname" optionGroupLabel="name" optionGroupChildren={['states', 'cities']}
+                className="w-full md:w-14rem" breakpoint="767px" placeholder="Select a City" style={{ minWidth: '14rem' }}  />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/chart/accessibilitydoc.js b/components/doc/chart/accessibilitydoc.js
new file mode 100644
index 0000000000..a8769f49da
--- /dev/null
+++ b/components/doc/chart/accessibilitydoc.js
@@ -0,0 +1,29 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<Chart type="line" data={data} pt={canvas: {'role': 'img', 'aria-label': 'Data'}}} />
+
+<Chart type="line" data={data}>
+    <DataTable />
+</Chart>
+        `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Chart components internally use <i>canvas</i> element, refer to the{' '}
+                <a className="text-primary hover:underline font-medium" href="https://www.chartjs.org/docs/latest/general/accessibility.html">
+                    Chart.js accessibility
+                </a>{' '}
+                guide for more information. The canvas element can be customized with <i>pt</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able to
+                provide fallback content like a table.
+            </p>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/chart/basicdoc.js b/components/doc/chart/basicdoc.js
new file mode 100644
index 0000000000..ddee6e0323
--- /dev/null
+++ b/components/doc/chart/basicdoc.js
@@ -0,0 +1,155 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function BasicDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const data = {
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+            datasets: [
+                {
+                    label: 'Sales',
+                    data: [540, 325, 702, 620],
+                    backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
+                    borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
+                    borderWidth: 1
+                }
+            ]
+        };
+        const options = {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="bar" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function BasicDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const data = {
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+            datasets: [
+                {
+                    label: 'Sales',
+                    data: [540, 325, 702, 620],
+                    backgroundColor: [
+                        'rgba(255, 159, 64, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(153, 102, 255, 0.2)'
+                      ],
+                      borderColor: [
+                        'rgb(255, 159, 64)',
+                        'rgb(75, 192, 192)',
+                        'rgb(54, 162, 235)',
+                        'rgb(153, 102, 255)'
+                      ],
+                      borderWidth: 1
+                }
+            ]
+        };
+        const options = {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function BasicDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const data = {
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+            datasets: [
+                {
+                    label: 'Sales',
+                    data: [540, 325, 702, 620],
+                    backgroundColor: [
+                        'rgba(255, 159, 64, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(153, 102, 255, 0.2)'
+                      ],
+                      borderColor: [
+                        'rgb(255, 159, 64)',
+                        'rgb(75, 192, 192)',
+                        'rgb(54, 162, 235)',
+                        'rgb(153, 102, 255)'
+                      ],
+                      borderWidth: 1
+                }
+            ]
+        };
+        const options = {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A chart is configured with 3 properties; <i>type</i>, <i>data</i> and <i>options</i>. Chart type is defined using the <i>type</i> property that accepts <i>pie</i>, <i>doughtnut</i>, <i>line</i>, <i>bar</i>, <i>radar</i> and{' '}
+                    <i>polarArea</i> as a value. The <i>data</i> defines datasets represented with the chart and the <i>options</i> provide numerous customization options to customize the presentation.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Chart type="bar" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/chartjsdoc.js b/components/doc/chart/chartjsdoc.js
new file mode 100644
index 0000000000..09db954d38
--- /dev/null
+++ b/components/doc/chart/chartjsdoc.js
@@ -0,0 +1,21 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ChartJSDoc(props) {
+    const code = {
+        basic: `
+npm install chart.js
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Chart component uses <a href="https://chartjs.org/">Chart.JS</a> underneath so it needs to be installed as a dependency.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/chart/combodoc.js b/components/doc/chart/combodoc.js
new file mode 100644
index 0000000000..8b9d7d7081
--- /dev/null
+++ b/components/doc/chart/combodoc.js
@@ -0,0 +1,260 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function ComboDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    type: 'line',
+                    label: 'Dataset 1',
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderWidth: 2,
+                    fill: false,
+                    tension: 0.4,
+                    data: [50, 25, 12, 48, 56, 76, 42]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: documentStyle.getPropertyValue('--green-500'),
+                    data: [21, 84, 24, 75, 37, 65, 34],
+                    borderColor: 'white',
+                    borderWidth: 2
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: documentStyle.getPropertyValue('--orange-500'),
+                    data: [41, 52, 24, 74, 23, 21, 32]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="line" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function ComboDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    type: 'line',
+                    label: 'Dataset 1',
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderWidth: 2,
+                    fill: false,
+                    tension: 0.4,
+                    data: [50, 25, 12, 48, 56, 76, 42]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: documentStyle.getPropertyValue('--green-500'),
+                    data: [21, 84, 24, 75, 37, 65, 34],
+                    borderColor: 'white',
+                    borderWidth: 2
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: documentStyle.getPropertyValue('--orange-500'),
+                    data: [41, 52, 24, 74, 23, 21, 32]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+    
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function ComboDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    type: 'line',
+                    label: 'Dataset 1',
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderWidth: 2,
+                    fill: false,
+                    tension: 0.4,
+                    data: [50, 25, 12, 48, 56, 76, 42]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: documentStyle.getPropertyValue('--green-500'),
+                    data: [21, 84, 24, 75, 37, 65, 34],
+                    borderColor: 'white',
+                    borderWidth: 2
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: documentStyle.getPropertyValue('--orange-500'),
+                    data: [41, 52, 24, 74, 23, 21, 32]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Different chart types can be combined in the same graph using the <i>type</i> option of a dataset.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Chart type="bar" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/doughnutdoc.js b/components/doc/chart/doughnutdoc.js
new file mode 100644
index 0000000000..694ccf93db
--- /dev/null
+++ b/components/doc/chart/doughnutdoc.js
@@ -0,0 +1,133 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function DoughnutChartDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const data = {
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
+                    hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
+                }
+            ]
+        };
+        const options = {
+            cutout: '60%'
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function DoughnutChartDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const data = {
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--blue-500'), 
+                        documentStyle.getPropertyValue('--yellow-500'), 
+                        documentStyle.getPropertyValue('--green-500')
+                    ],
+                    hoverBackgroundColor: [
+                        documentStyle.getPropertyValue('--blue-400'), 
+                        documentStyle.getPropertyValue('--yellow-400'), 
+                        documentStyle.getPropertyValue('--green-400')
+                    ]
+                }
+            ]
+        };
+        const options = {
+            cutout: '60%'
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function DoughnutChartDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const data = {
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [300, 50, 100],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--blue-500'), 
+                        documentStyle.getPropertyValue('--yellow-500'), 
+                        documentStyle.getPropertyValue('--green-500')
+                    ],
+                    hoverBackgroundColor: [
+                        documentStyle.getPropertyValue('--blue-400'), 
+                        documentStyle.getPropertyValue('--yellow-400'), 
+                        documentStyle.getPropertyValue('--green-400')
+                    ]
+                }
+            ]
+        };
+        const options = {
+            cutout: '60%'
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/horizontalbardoc.js b/components/doc/chart/horizontalbardoc.js
new file mode 100644
index 0000000000..7899c65cd4
--- /dev/null
+++ b/components/doc/chart/horizontalbardoc.js
@@ -0,0 +1,245 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function HorizontalBarDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--pink-500'),
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            indexAxis: 'y',
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="bar" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function HorizontalBarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--pink-500'),
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            indexAxis: 'y',
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        };
+
+        setChartData(data)
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function HorizontalBarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--pink-500'),
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            indexAxis: 'y',
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        };
+
+        setChartData(data)
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A bar chart is rendered horizontally when <i>indexAxis</i> option is set as <i>y</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Chart type="bar" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/importdoc.js b/components/doc/chart/importdoc.js
new file mode 100644
index 0000000000..94f5925528
--- /dev/null
+++ b/components/doc/chart/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Chart } from 'primereact/chart';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/chart/linedoc.js b/components/doc/chart/linedoc.js
new file mode 100644
index 0000000000..cd6d2be328
--- /dev/null
+++ b/components/doc/chart/linedoc.js
@@ -0,0 +1,231 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function LineDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    tension: 0.4
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    tension: 0.4
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="line" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function LineDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    tension: 0.4
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    tension: 0.4
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function LineDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    tension: 0.4
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    tension: 0.4
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
+            </DocSectionText>
+            <div className="card">
+                <Chart type="line" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/linestylesdoc.js b/components/doc/chart/linestylesdoc.js
new file mode 100644
index 0000000000..5757bb6a88
--- /dev/null
+++ b/components/doc/chart/linestylesdoc.js
@@ -0,0 +1,258 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function LineStylesDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue('--blue-500')
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderDash: [5, 5],
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue('--teal-500')
+                },
+                {
+                    label: 'Third Dataset',
+                    data: [12, 51, 62, 33, 21, 62, 45],
+                    fill: true,
+                    borderColor: documentStyle.getPropertyValue('--orange-500'),
+                    tension: 0.4,
+                    backgroundColor: 'rgba(255,167,38,0.2)'
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="line" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function LineStylesDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue('--blue-500')
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderDash: [5, 5],
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue('--teal-500')
+                },
+                {
+                    label: 'Third Dataset',
+                    data: [12, 51, 62, 33, 21, 62, 45],
+                    fill: true,
+                    borderColor: documentStyle.getPropertyValue('--orange-500'),
+                    tension: 0.4,
+                    backgroundColor: 'rgba(255,167,38,0.2)'
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function LineStylesDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue('--blue-500')
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    borderDash: [5, 5],
+                    tension: 0.4,
+                    borderColor: documentStyle.getPropertyValue('--teal-500')
+                },
+                {
+                    label: 'Third Dataset',
+                    data: [12, 51, 62, 33, 21, 62, 45],
+                    fill: true,
+                    borderColor: documentStyle.getPropertyValue('--orange-500'),
+                    tension: 0.4,
+                    backgroundColor: 'rgba(255,167,38,0.2)'
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+    
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Various styles of a line series can be customized to display customizations like an area chart.</p>
+            </DocSectionText>
+            <div className="card">
+                <Chart type="line" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/multiaxisdoc.js b/components/doc/chart/multiaxisdoc.js
new file mode 100644
index 0000000000..30eec1d9a9
--- /dev/null
+++ b/components/doc/chart/multiaxisdoc.js
@@ -0,0 +1,287 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function MultiAxisDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    yAxisID: 'y',
+                    tension: 0.4,
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                },
+                {
+                    label: 'Dataset 2',
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--green-500'),
+                    yAxisID: 'y1',
+                    tension: 0.4,
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            stacked: false,
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y1: {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        drawOnChartArea: false,
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="line" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function MultiAxisDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    yAxisID: 'y',
+                    tension: 0.4,
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                },
+                {
+                    label: 'Dataset 2',
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--green-500'),
+                    yAxisID: 'y1',
+                    tension: 0.4,
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            stacked: false,
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y1: {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        drawOnChartArea: false,
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function MultiAxisDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'Dataset 1',
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    yAxisID: 'y',
+                    tension: 0.4,
+                    data: [65, 59, 80, 81, 56, 55, 10]
+                },
+                {
+                    label: 'Dataset 2',
+                    fill: false,
+                    borderColor: documentStyle.getPropertyValue('--green-500'),
+                    yAxisID: 'y1',
+                    tension: 0.4,
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            stacked: false,
+            maintainAspectRatio: false,
+            aspectRatio: 0.6,
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    type: 'linear',
+                    display: true,
+                    position: 'left',
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y1: {
+                    type: 'linear',
+                    display: true,
+                    position: 'right',
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        drawOnChartArea: false,
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="line" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Multiple axes can be added using the <i>scales</i> option.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Chart type="line" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/piechartdoc.js b/components/doc/chart/piechartdoc.js
new file mode 100644
index 0000000000..23283f9044
--- /dev/null
+++ b/components/doc/chart/piechartdoc.js
@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function PieChartDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const data = {
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [540, 325, 702],
+                    backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500')],
+                    hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400')]
+                }
+            ]
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        usePointStyle: true
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="pie" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function PieChartDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const data = {
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [540, 325, 702],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--blue-500'), 
+                        documentStyle.getPropertyValue('--yellow-500'), 
+                        documentStyle.getPropertyValue('--green-500')
+                    ],
+                    hoverBackgroundColor: [
+                        documentStyle.getPropertyValue('--blue-400'), 
+                        documentStyle.getPropertyValue('--yellow-400'), 
+                        documentStyle.getPropertyValue('--green-400')
+                    ]
+                }
+            ]
+        }
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        usePointStyle: true
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="pie" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function PieChartDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const data = {
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [540, 325, 702],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--blue-500'), 
+                        documentStyle.getPropertyValue('--yellow-500'), 
+                        documentStyle.getPropertyValue('--green-500')
+                    ],
+                    hoverBackgroundColor: [
+                        documentStyle.getPropertyValue('--blue-400'), 
+                        documentStyle.getPropertyValue('--yellow-400'), 
+                        documentStyle.getPropertyValue('--green-400')
+                    ]
+                }
+            ]
+        }
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        usePointStyle: true
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="pie" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Chart type="pie" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/polarareadoc.js b/components/doc/chart/polarareadoc.js
new file mode 100644
index 0000000000..b9b2a7ba71
--- /dev/null
+++ b/components/doc/chart/polarareadoc.js
@@ -0,0 +1,180 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function PolarAreaDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            datasets: [
+                {
+                    data: [11, 16, 7, 3, 14],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--red-500'),
+                        documentStyle.getPropertyValue('--green-500'),
+                        documentStyle.getPropertyValue('--yellow-500'),
+                        documentStyle.getPropertyValue('--bluegray-500'),
+                        documentStyle.getPropertyValue('--blue-500')
+                    ],
+                    label: 'My dataset'
+                }
+            ],
+            labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="polarArea" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function PolarAreaDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            datasets: [
+                {
+                    data: [11, 16, 7, 3, 14],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--red-500'),
+                        documentStyle.getPropertyValue('--green-500'),
+                        documentStyle.getPropertyValue('--yellow-500'),
+                        documentStyle.getPropertyValue('--bluegray-500'),
+                        documentStyle.getPropertyValue('--blue-500')
+                    ],
+                    label: 'My dataset'
+                }
+            ],
+            labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="polarArea" data={chartData} options={chartOptions} style={{ position: 'relative', width: '40%' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function PolarAreaDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            datasets: [
+                {
+                    data: [11, 16, 7, 3, 14],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--red-500'),
+                        documentStyle.getPropertyValue('--green-500'),
+                        documentStyle.getPropertyValue('--yellow-500'),
+                        documentStyle.getPropertyValue('--bluegray-500'),
+                        documentStyle.getPropertyValue('--blue-500')
+                    ],
+                    label: 'My dataset'
+                }
+            ],
+            labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="polarArea" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Chart type="polarArea" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/pt/wireframe.js b/components/doc/chart/pt/wireframe.js
new file mode 100644
index 0000000000..f99580015f
--- /dev/null
+++ b/components/doc/chart/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="chart" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/chart/radardoc.js b/components/doc/chart/radardoc.js
new file mode 100644
index 0000000000..3fe9efeb54
--- /dev/null
+++ b/components/doc/chart/radardoc.js
@@ -0,0 +1,201 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function RadarDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const data = {
+            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    borderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    borderColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'),
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: textColorSecondary
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="radar" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function RadarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const data = {
+            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    borderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    borderColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'),
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: textColorSecondary
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="radar" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function RadarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const data = {
+            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    borderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    borderColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--pink-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'),
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        };
+        const options = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: textColorSecondary
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+    
+    return (
+        <div className="card flex justify-content-center">
+            <Chart type="radar" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Chart type="radar" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/stackedbardoc.js b/components/doc/chart/stackedbardoc.js
new file mode 100644
index 0000000000..119bfd07a6
--- /dev/null
+++ b/components/doc/chart/stackedbardoc.js
@@ -0,0 +1,263 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function StackedBarDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    type: 'bar',
+                    label: 'Dataset 1',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [50, 25, 12, 48, 90, 76, 42]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: documentStyle.getPropertyValue('--green-500'),
+                    data: [21, 84, 24, 75, 37, 65, 34]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: documentStyle.getPropertyValue('--yellow-500'),
+                    data: [41, 52, 24, 74, 23, 21, 32]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                tooltips: {
+                    mode: 'index',
+                    intersect: false
+                },
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="bar" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function StackedBarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    type: 'bar',
+                    label: 'Dataset 1',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [50, 25, 12, 48, 90, 76, 42]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: documentStyle.getPropertyValue('--green-500'),
+                    data: [21, 84, 24, 75, 37, 65, 34]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: documentStyle.getPropertyValue('--yellow-500'),
+                    data: [41, 52, 24, 74, 23, 21, 32]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                tooltips: {
+                    mode: 'index',
+                    intersect: false
+                },
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function StackedBarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    type: 'bar',
+                    label: 'Dataset 1',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [50, 25, 12, 48, 90, 76, 42]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 2',
+                    backgroundColor: documentStyle.getPropertyValue('--green-500'),
+                    data: [21, 84, 24, 75, 37, 65, 34]
+                },
+                {
+                    type: 'bar',
+                    label: 'Dataset 3',
+                    backgroundColor: documentStyle.getPropertyValue('--yellow-500'),
+                    data: [41, 52, 24, 74, 23, 21, 32]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                tooltips: {
+                    mode: 'index',
+                    intersect: false
+                },
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    stacked: true,
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Bars can be stacked on top of each other when <i>stacked</i> option of a scale is enabled.
+                </p>
+            </DocSectionText>
+            <div className="card ">
+                <Chart type="bar" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/chart/theming/styleddoc.js b/components/doc/chart/theming/styleddoc.js
new file mode 100644
index 0000000000..6113524b8e
--- /dev/null
+++ b/components/doc/chart/theming/styleddoc.js
@@ -0,0 +1,27 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chart</td>
+                            <td>Container element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/chart/theming/tailwinddoc.js b/components/doc/chart/theming/tailwinddoc.js
new file mode 100644
index 0000000000..1862e88f5f
--- /dev/null
+++ b/components/doc/chart/theming/tailwinddoc.js
@@ -0,0 +1,82 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    chart: {
+        root: 'relative'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function UnstyledDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const data = {
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+            datasets: [
+                {
+                    label: 'Sales',
+                    data: [540, 325, 702, 620],
+                    backgroundColor: [
+                        'rgba(255, 159, 64, 0.2)',
+                        'rgba(75, 192, 192, 0.2)',
+                        'rgba(54, 162, 235, 0.2)',
+                        'rgba(153, 102, 255, 0.2)'
+                      ],
+                      borderColor: [
+                        'rgb(255, 159, 64)',
+                        'rgb(75, 192, 192)',
+                        'rgb(54, 162, 235)',
+                        'rgb(153, 102, 255)'
+                      ],
+                      borderWidth: 1
+                }
+            ]
+        };
+        const options = {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} dependencies={{ 'chart.js': '3.9.1' }} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/chart/verticalbardoc.js b/components/doc/chart/verticalbardoc.js
new file mode 100644
index 0000000000..32b9a0e02e
--- /dev/null
+++ b/components/doc/chart/verticalbardoc.js
@@ -0,0 +1,240 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chart } from '@/components/lib/chart/Chart';
+import { useEffect, useState } from 'react';
+
+export function VerticalBarDoc(props) {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--pink-500'),
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    const code = {
+        basic: `
+<Chart type="bar" data={chartData} options={chartOptions} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function VerticalBarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--pink-500'),
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Chart } from 'primereact/chart';
+
+export default function VerticalBarDemo() {
+    const [chartData, setChartData] = useState({});
+    const [chartOptions, setChartOptions] = useState({});
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+        const data = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--blue-500'),
+                    borderColor: documentStyle.getPropertyValue('--blue-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--pink-500'),
+                    borderColor: documentStyle.getPropertyValue('--pink-500'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+        const options = {
+            maintainAspectRatio: false,
+            aspectRatio: 0.8,
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, []);
+    
+    return (
+        <div className="card">
+            <Chart type="bar" data={chartData} options={chartOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
+            </DocSectionText>
+            <div className="card">
+                <Chart type="bar" data={chartData} options={chartOptions} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ 'chart.js': '3.9.1' }} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/accessibilitydoc.js b/components/doc/checkbox/accessibilitydoc.js
new file mode 100644
index 0000000000..bd35f90b4f
--- /dev/null
+++ b/components/doc/checkbox/accessibilitydoc.js
@@ -0,0 +1,54 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="chkbox1">Remember Me</label>
+<Checkbox inputId="chkbox1" />
+
+<span id="chkbox2">Remember Me</span>
+<Checkbox aria-labelledby="chkbox2" />
+
+<Checkbox aria-label="Remember Me" />
+        `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using{' '}
+                <i>aria-labelledby</i>, <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the checkbox.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the checked state.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/checkbox/basicdoc.js b/components/doc/checkbox/basicdoc.js
new file mode 100644
index 0000000000..08f8de0f33
--- /dev/null
+++ b/components/doc/checkbox/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function BasicDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function BasicDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Checkbox is used as a controlled input with <i>checked</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Checkbox onChange={(e) => setChecked(e.checked)} checked={checked} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/disableddoc.js b/components/doc/checkbox/disableddoc.js
new file mode 100644
index 0000000000..4c6acfd0d0
--- /dev/null
+++ b/components/doc/checkbox/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Checkbox checked disabled></Checkbox>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Checkbox } from "primereact/checkbox";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox checked disabled></Checkbox>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Checkbox } from "primereact/checkbox";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox checked disabled></Checkbox>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Checkbox checked disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/dynamicdoc.js b/components/doc/checkbox/dynamicdoc.js
new file mode 100644
index 0000000000..2951288545
--- /dev/null
+++ b/components/doc/checkbox/dynamicdoc.js
@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function DynamicDoc(props) {
+    const categories = [
+        { name: 'Accounting', key: 'A' },
+        { name: 'Marketing', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+    const [selectedCategories, setSelectedCategories] = useState([categories[1]]);
+
+    const onCategoryChange = (e) => {
+        let _selectedCategories = [...selectedCategories];
+
+        if (e.checked) {
+            _selectedCategories.push(e.value);
+        } else {
+            _selectedCategories = _selectedCategories.filter((category) => category.key !== e.value.key);
+        }
+
+        setSelectedCategories(_selectedCategories);
+    };
+
+    const code = {
+        basic: `
+{categories.map((category) => {
+    return (
+        <div key={category.key} className="flex align-items-center">
+            <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
+            <label htmlFor={category.key} className="ml-2">{category.name}</label>
+        </div>
+    );
+})}
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function DynamicDemo() {
+    const categories = [
+        { name: 'Accounting', key: 'A' },
+        { name: 'Marketing', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+    const [selectedCategories, setSelectedCategories] = useState([categories[1]]);
+
+    const onCategoryChange = (e) => {
+        let _selectedCategories = [...selectedCategories];
+
+        if (e.checked)
+            _selectedCategories.push(e.value);
+        else
+            _selectedCategories = _selectedCategories.filter(category => category.key !== e.value.key);
+
+        setSelectedCategories(_selectedCategories);
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column gap-3">
+                {categories.map((category) => {
+                    return (
+                        <div key={category.key} className="flex align-items-center">
+                            <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
+                            <label htmlFor={category.key} className="ml-2">
+                                {category.name}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+interface Category {
+    name: string; 
+    key: string;
+}
+
+export default function DynamicDemo() {
+    const categories: Category[] = [
+        { name: 'Accounting', key: 'A' },
+        { name: 'Marketing', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+    const [selectedCategories, setSelectedCategories] = useState<Category[]>([categories[1]]);
+
+    const onCategoryChange = (e: CheckboxChangeEvent) => {
+        let _selectedCategories = [...selectedCategories];
+
+        if (e.checked)
+            _selectedCategories.push(e.value);
+        else
+            _selectedCategories = _selectedCategories.filter(category => category.key !== e.value.key);
+
+        setSelectedCategories(_selectedCategories);
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column gap-3">
+                {categories.map((category) => {
+                    return (
+                        <div key={category.key} className="flex align-items-center">
+                            <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
+                            <label htmlFor={category.key} className="ml-2">
+                                {category.name}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Checkboxes can be generated using a list of values.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="flex flex-column gap-3">
+                    {categories.map((category) => {
+                        return (
+                            <div key={category.key} className="flex align-items-center">
+                                <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
+                                <label htmlFor={category.key} className="ml-2">
+                                    {category.name}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/filleddoc.js b/components/doc/checkbox/filleddoc.js
new file mode 100644
index 0000000000..fd1ac79533
--- /dev/null
+++ b/components/doc/checkbox/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function FilledDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox variant="filled" onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function FilledDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox variant="filled" onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Checkbox variant="filled" onChange={(e) => setChecked(e.checked)} checked={checked} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/groupdoc.js b/components/doc/checkbox/groupdoc.js
new file mode 100644
index 0000000000..5cf5d5fb73
--- /dev/null
+++ b/components/doc/checkbox/groupdoc.js
@@ -0,0 +1,158 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function GroupDoc(props) {
+    const [ingredients, setIngredients] = useState([]);
+
+    const onIngredientsChange = (e) => {
+        let _ingredients = [...ingredients];
+
+        if (e.checked) {
+            _ingredients.push(e.value);
+        } else {
+            _ingredients.splice(_ingredients.indexOf(e.value), 1);
+        }
+
+        setIngredients(_ingredients);
+    };
+
+    const code = {
+        basic: `
+<div className="flex flex-wrap justify-content-center gap-3">
+    <div className="flex align-items-center">
+        <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
+        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+    </div>
+    <div className="flex align-items-center">
+        <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
+        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+    </div>
+    <div className="flex align-items-center">
+        <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
+        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+    </div>
+    <div className="flex align-items-center">
+        <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
+        <label htmlFor="ingredient4" className="ml-2">Onion</label>
+    </div>
+</div>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function GroupDemo() {
+    const [ingredients, setIngredients] = useState([]);
+
+    const onIngredientsChange = (e) => {
+        let _ingredients = [...ingredients];
+
+        if (e.checked)
+            _ingredients.push(e.value);
+        else
+            _ingredients.splice(_ingredients.indexOf(e.value), 1);
+
+        setIngredients(_ingredients);
+    }
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
+                <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+            </div>
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
+                <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+            </div>
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
+                <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+            </div>
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
+                <label htmlFor="ingredient4" className="ml-2">Onion</label>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function GroupDemo() {
+    const [ingredients, setIngredients] = useState<string[]>([]);
+
+    const onIngredientsChange = (e: CheckboxChangeEvent) => {
+        let _ingredients = [...ingredients];
+
+        if (e.checked)
+            _ingredients.push(e.value);
+        else
+            _ingredients.splice(_ingredients.indexOf(e.value), 1);
+
+        setIngredients(_ingredients);
+    }
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3">
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
+                <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+            </div>
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
+                <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+            </div>
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
+                <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+            </div>
+            <div className="flex align-items-center">
+                <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
+                <label htmlFor="ingredient4" className="ml-2">Onion</label>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Multiple checkboxes can be grouped together.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <div className="flex align-items-center">
+                    <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
+                    <label htmlFor="ingredient1" className="ml-2">
+                        Cheese
+                    </label>
+                </div>
+                <div className="flex align-items-center">
+                    <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
+                    <label htmlFor="ingredient2" className="ml-2">
+                        Mushroom
+                    </label>
+                </div>
+                <div className="flex align-items-center">
+                    <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
+                    <label htmlFor="ingredient3" className="ml-2">
+                        Pepper
+                    </label>
+                </div>
+                <div className="flex align-items-center">
+                    <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
+                    <label htmlFor="ingredient4" className="ml-2">
+                        Onion
+                    </label>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/importdoc.js b/components/doc/checkbox/importdoc.js
new file mode 100644
index 0000000000..3d6e114518
--- /dev/null
+++ b/components/doc/checkbox/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Checkbox } from 'primereact/checkbox';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/invaliddoc.js b/components/doc/checkbox/invaliddoc.js
new file mode 100644
index 0000000000..900cfddcfe
--- /dev/null
+++ b/components/doc/checkbox/invaliddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function InvalidDemo() { 
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/checkbox/pt/wireframe.js b/components/doc/checkbox/pt/wireframe.js
new file mode 100644
index 0000000000..7335dcf127
--- /dev/null
+++ b/components/doc/checkbox/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/checkbox.jpg" alt="checkbox" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/checkbox/styledoc.js b/components/doc/checkbox/styledoc.js
new file mode 100644
index 0000000000..2ef45fd94b
--- /dev/null
+++ b/components/doc/checkbox/styledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-checkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-checkbox-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-checkbox-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/checkbox/theming/styleddoc.js b/components/doc/checkbox/theming/styleddoc.js
new file mode 100644
index 0000000000..240ee4d504
--- /dev/null
+++ b/components/doc/checkbox/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-checkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-checkbox-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-checkbox-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/checkbox/theming/tailwinddoc.js b/components/doc/checkbox/theming/tailwinddoc.js
new file mode 100644
index 0000000000..c7393922bc
--- /dev/null
+++ b/components/doc/checkbox/theming/tailwinddoc.js
@@ -0,0 +1,66 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    checkbox: {
+        root: {
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+        },
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+
+export default function UnstyledDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-center">
+            <Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/chip/accessibilitydoc.js b/components/doc/chip/accessibilitydoc.js
new file mode 100644
index 0000000000..fa4cf915fb
--- /dev/null
+++ b/components/doc/chip/accessibilitydoc.js
@@ -0,0 +1,40 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Chip uses the <i>label</i> property as the default <i>aria-label</i>, since any attribute is passed to the root element <i>aria-labelledby</i> or <i>aria-label</i> can be used to override the default behavior. Removable chips have a{' '}
+                <i>tabIndex</i> and focusable with the tab key.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Hides removable.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Hides removable.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/chip/basicdoc.js b/components/doc/chip/basicdoc.js
new file mode 100644
index 0000000000..bdef791dd8
--- /dev/null
+++ b/components/doc/chip/basicdoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chip } from '../../../components/lib/chip/Chip';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Chip label="Action" />
+<Chip label="Comedy" />
+<Chip label="Mystery" />
+<Chip label="Thriller" removable />
+        `,
+        javascript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex flex-wrap gap-2">
+            <Chip label="Action" />
+            <Chip label="Comedy" />
+            <Chip label="Mystery" />
+            <Chip label="Thriller" removable />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex flex-wrap gap-2">
+            <Chip label="Action" />
+            <Chip label="Comedy" />
+            <Chip label="Mystery" />
+            <Chip label="Thriller" removable />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A basic chip with a text is created with the <i>label</i> property. In addition when <i>removable</i> is added, a delete icon is displayed to remove a chip.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-2">
+                <Chip label="Action" />
+                <Chip label="Comedy" />
+                <Chip label="Mystery" />
+                <Chip label="Thriller" removable />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chip/icondoc.js b/components/doc/chip/icondoc.js
new file mode 100644
index 0000000000..925aebb0ab
--- /dev/null
+++ b/components/doc/chip/icondoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chip } from '../../../components/lib/chip/Chip';
+
+export function IconDoc(props) {
+    const code = {
+        basic: `
+<Chip label="Apple" icon="pi pi-apple" />
+<Chip label="Facebook" icon="pi pi-facebook" />
+<Chip label="Google" icon="pi pi-google" />
+<Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        `,
+        javascript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function IconDemo() {
+    return (
+        <div className="card flex flex-wrap gap-2">
+            <Chip label="Apple" icon="pi pi-apple" />
+            <Chip label="Facebook" icon="pi pi-facebook" />
+            <Chip label="Google" icon="pi pi-google" />
+            <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function IconDemo() {
+    return (
+        <div className="card flex flex-wrap gap-2">
+            <Chip label="Apple" icon="pi pi-apple" />
+            <Chip label="Facebook" icon="pi pi-facebook" />
+            <Chip label="Google" icon="pi pi-google" />
+            <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A font icon next to the label can be displayed with the <i>icon</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-2">
+                <Chip label="Apple" icon="pi pi-apple" />
+                <Chip label="Facebook" icon="pi pi-facebook" />
+                <Chip label="Google" icon="pi pi-google" />
+                <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chip/imagedoc.js b/components/doc/chip/imagedoc.js
new file mode 100644
index 0000000000..3bc806d156
--- /dev/null
+++ b/components/doc/chip/imagedoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chip } from '../../../components/lib/chip/Chip';
+
+export function ImageDoc(props) {
+    const code = {
+        basic: `
+<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" />
+<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" />
+<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" />
+<Chip label="Xuxue Feng" image="/images/avatar/xuxuefeng.png" removable />
+        `,
+        javascript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function ImageDemo() {
+    return (
+        <div className="card flex flex-wrap gap-2">
+            <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" />
+            <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" />
+            <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" />
+            <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" removable />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function ImageDemo() {
+    return (
+        <div className="card flex flex-wrap gap-2">
+            <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" />
+            <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" />
+            <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" />
+            <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" removable />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>image</i> property is used to display an image like an avatar.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-2">
+                <Chip label="Amy Elsner" image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" />
+                <Chip label="Asiya Javayant" image="https://primefaces.org/cdn/primereact/images/avatar/asiyajavayant.png" />
+                <Chip label="Onyama Limba" image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" />
+                <Chip label="Xuxue Feng" image="https://primefaces.org/cdn/primereact/images/avatar/xuxuefeng.png" removable />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chip/importdoc.js b/components/doc/chip/importdoc.js
new file mode 100644
index 0000000000..cca7b13838
--- /dev/null
+++ b/components/doc/chip/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Chip } from 'primereact/chip';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/chip/pt/wireframe.js b/components/doc/chip/pt/wireframe.js
new file mode 100644
index 0000000000..a310e2de60
--- /dev/null
+++ b/components/doc/chip/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/chip.jpg" alt="chip" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/chip/styledoc.js b/components/doc/chip/styledoc.js
new file mode 100644
index 0000000000..313d6af090
--- /dev/null
+++ b/components/doc/chip/styledoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chip</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chip-image</td>
+                            <td>Container element in image mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chip-text</td>
+                            <td>Text of the chip.</td>
+                        </tr>
+                        <tr>
+                            <td>pi-chip-remove-icon</td>
+                            <td>Remove icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/chip/templatedoc.js b/components/doc/chip/templatedoc.js
new file mode 100644
index 0000000000..141802cab4
--- /dev/null
+++ b/components/doc/chip/templatedoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chip } from '../../../components/lib/chip/Chip';
+
+export function TemplateDoc(props) {
+    const content = (
+        <>
+            <span className="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
+            <span className="ml-2 font-medium">PRIME</span>
+        </>
+    );
+
+    const code = {
+        basic: `
+<Chip template={content} />
+        `,
+        javascript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function TemplateDemo() {
+    const content = (
+        <>
+            <span className="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
+            <span className="ml-2 font-medium">PRIME</span>
+        </>
+    );
+
+    return (
+        <div className="card">
+            <Chip className="pl-0 pr-3" template={content} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function TemplateDemo() {
+    const content = (
+        <>
+            <span className="bg-primary border-circle w-2rem h-2rem flex align-items-center justify-content-center">P</span>
+            <span className="ml-2 font-medium">PRIME</span>
+        </>
+    );
+
+    return (
+        <div className="card">
+            <Chip className="pl-0 pr-3" template={content} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>template</i> property allows displaying custom content inside a chip.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Chip className="pl-0 pr-3" template={content} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chip/theming/styleddoc.js b/components/doc/chip/theming/styleddoc.js
new file mode 100644
index 0000000000..d047fc9e7e
--- /dev/null
+++ b/components/doc/chip/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chip</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chip-image</td>
+                            <td>Container element in image mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chip-text</td>
+                            <td>Text of the chip.</td>
+                        </tr>
+                        <tr>
+                            <td>pi-chip-remove-icon</td>
+                            <td>Remove icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/chip/theming/tailwinddoc.js b/components/doc/chip/theming/tailwinddoc.js
new file mode 100644
index 0000000000..bc30477550
--- /dev/null
+++ b/components/doc/chip/theming/tailwinddoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    chip: {
+        root: {
+            className: classNames('inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900')
+        },
+        label: 'leading-6 mt-1.5 mb-1.5',
+        icon: 'leading-6 mr-2',
+        image: {
+            className: classNames('w-9 h-9 ml-[-0.75rem] mr-2', 'rounded-full')
+        },
+        removeIcon: {
+            className: classNames('ml-2 rounded-md transition duration-200 ease-in-out', 'cursor-pointer leading-6')
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Chip } from 'primereact/chip';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex flex-wrap gap-2">
+            <Chip label="Apple" icon="pi pi-apple" />
+            <Chip label="Facebook" icon="pi pi-facebook" />
+            <Chip label="Google" icon="pi pi-google" />
+            <Chip label="Microsoft" icon="pi pi-microsoft" removable />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/chips/accessibilitydoc.js b/components/doc/chips/accessibilitydoc.js
new file mode 100644
index 0000000000..ce0174b365
--- /dev/null
+++ b/components/doc/chips/accessibilitydoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="chips1">Tags</label>
+<Chips inputId="chips1" />
+
+<span id="chips2">Tags</span>
+<Chips aria-labelledby="chips2" />
+
+<Chips aria-label="Tags" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Chip list uses <i>listbox</i> role with <i>aria-orientation</i>{' '}
+                set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Input Field Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input element</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Adds a new chips using the input field value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Deletes the previous chip if the input field is empty.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous chip if available and input field is empty.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Chip Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous chip if available.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Deletes the chips and adds focus to the input field.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/chips/basicdoc.js b/components/doc/chips/basicdoc.js
new file mode 100644
index 0000000000..45a40e09ec
--- /dev/null
+++ b/components/doc/chips/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const code = {
+        basic: `
+<Chips value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Chips is used as a controlled input with <i>value</i> and <i>onChange</i> properties where <i>value</i> should be an array.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/disableddoc.js b/components/doc/chips/disableddoc.js
new file mode 100644
index 0000000000..bdde32fd35
--- /dev/null
+++ b/components/doc/chips/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Chips disabled placeholder="Disabled" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Chips } from "primereact/chips";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card p-fluid">
+            <Chips disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Chips } from "primereact/chips";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card p-fluid">
+            <Chips disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips disabled placeholder="Disabled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/filleddoc.js b/components/doc/chips/filleddoc.js
new file mode 100644
index 0000000000..ffc1b2f969
--- /dev/null
+++ b/components/doc/chips/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const code = {
+        basic: `
+<Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips variant="filled" value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/floatlabeldoc.js b/components/doc/chips/floatlabeldoc.js
new file mode 100644
index 0000000000..d0e4d09f99
--- /dev/null
+++ b/components/doc/chips/floatlabeldoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
+    <label htmlFor="username">Username</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card p-fluid">
+            <FloatLabel>
+                <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
+                <label htmlFor="username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+        <div className="card p-fluid">
+            <FloatLabel>
+                <Chips id="username" value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} />
+                <label htmlFor="username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <FloatLabel>
+                    <Chips id="username" value={value} onChange={(e) => setValue(e.value)} />
+                    <label htmlFor="username">Username</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/importdoc.js b/components/doc/chips/importdoc.js
new file mode 100644
index 0000000000..1188b8a6f0
--- /dev/null
+++ b/components/doc/chips/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Chips } from 'primereact/chips';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/chips/invaliddoc.js b/components/doc/chips/invaliddoc.js
new file mode 100644
index 0000000000..07fa6efed2
--- /dev/null
+++ b/components/doc/chips/invaliddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const code = {
+        basic: `
+<Chips invalid value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips invalid value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips invalid value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips invalid value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/keyfilterdoc.js b/components/doc/chips/keyfilterdoc.js
new file mode 100644
index 0000000000..d9cc09487c
--- /dev/null
+++ b/components/doc/chips/keyfilterdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function KeyFilterDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const code = {
+        basic: `
+<Chips value={value} onChange={(e) => setValue(e.value)} keyfilter="int" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function KeyFilterDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e) => setValue(e.value)} keyfilter="int" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+
+export default function KeyFilterDemo() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} keyfilter="int" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Chips has built-in key filtering support to block certain keys, refer to <Link href="http://github.com/keyfilter">keyfilter</Link> page for more information.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips value={value} onChange={(e) => setValue(e.value)} keyfilter="int" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/pt/wireframe.js b/components/doc/chips/pt/wireframe.js
new file mode 100644
index 0000000000..f004e874cd
--- /dev/null
+++ b/components/doc/chips/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/chips.jpg" alt="chips" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/chips/separatordoc.js b/components/doc/chips/separatordoc.js
new file mode 100644
index 0000000000..11fc2d5983
--- /dev/null
+++ b/components/doc/chips/separatordoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import { useState } from 'react';
+
+export function SeparatorDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const code = {
+        basic: `
+<Chips value={value} onChange={(e) => setValue(e.value)} separator="," />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function SeparatorDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e) => setValue(e.value)} separator="," />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+
+export default function SeparatorDemo() {
+    const [value, setValue] = useState<string[]>([]);
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} separator="," />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A new chip is added when <i>enter</i> key is pressed, <i>separator</i> property allows definining an additional key. Currently only valid value is <i>,</i> to create a new item when comma key is pressed.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips value={value} onChange={(e) => setValue(e.value)} separator="," />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/styledoc.js b/components/doc/chips/styledoc.js
new file mode 100644
index 0000000000..c063bfa924
--- /dev/null
+++ b/components/doc/chips/styledoc.js
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chips</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token</td>
+                            <td>Chip element container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-icon</td>
+                            <td>Icon of a chip.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-label</td>
+                            <td>label of a chip.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-input-token</td>
+                            <td>Container of input element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/chips/templatedoc.js b/components/doc/chips/templatedoc.js
new file mode 100644
index 0000000000..9f77ee7b9d
--- /dev/null
+++ b/components/doc/chips/templatedoc.js
@@ -0,0 +1,81 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Chips } from '@/components/lib/chips/Chips';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [value, setValue] = useState([]);
+
+    const customChip = (item) => {
+        return (
+            <div>
+                <span>{item} - (active)</span>
+                <i className="pi pi-user-plus" />
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Chips value={value} onChange={(e) => setValue(e.value)} itemTemplate={customChip} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState([]);
+    const customChip = (item) => {
+        return (
+            <div>
+                <span>{item} - (active)</span>
+                <i className="pi pi-user-plus"></i>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e) => setValue(e.value)} itemTemplate={customChip} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Chips, ChipsChangeEvent } from "primereact/chips";
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState<string[]>([]);
+    const customChip = (item: string) => {
+        return (
+            <div>
+                <span>{item} - (active)</span>
+                <i className="pi pi-user-plus"></i>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card p-fluid">
+            <Chips value={value} onChange={(e: ChipsChangeEvent) => setValue(e.value)} itemTemplate={customChip} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Chip content is customized using <i>itemTemplate</i> function that receives a single chip value as a parameter.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid">
+                <Chips value={value} onChange={(e) => setValue(e.value)} itemTemplate={customChip} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/chips/theming/styleddoc.js b/components/doc/chips/theming/styleddoc.js
new file mode 100644
index 0000000000..f08a1f1eeb
--- /dev/null
+++ b/components/doc/chips/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chips</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token</td>
+                            <td>Chip element container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-icon</td>
+                            <td>Icon of a chip.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-label</td>
+                            <td>label of a chip.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-input-token</td>
+                            <td>Container of input element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/chips/theming/tailwinddoc.js b/components/doc/chips/theming/tailwinddoc.js
new file mode 100644
index 0000000000..3f2ffb8b77
--- /dev/null
+++ b/components/doc/chips/theming/tailwinddoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {        
+    chips: {
+        root: ({ props }) => ({
+            className: classNames('flex', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        container: {
+            className: classNames(
+                'm-0 py-1.5 px-3 list-none cursor-text overflow-hidden flex items-center flex-wrap',
+                'w-full',
+                'font-sans text-base text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        inputToken: {
+            className: classNames('py-1.5 px-0', 'flex flex-1 inline-flex')
+        },
+        input: {
+            className: classNames('font-sans text-base text-gray-700 dark:text-white/80 p-0 m-0', 'border-0 outline-none bg-transparent shadow-none rounded-none w-full')
+        },
+        token: {
+            className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
+        },
+        removeTokenIcon: 'ml-2'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Chips } from "primereact/chips";
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState([]);
+
+    return (
+        <div className="card">
+            <Chips value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/accessibilitydoc.js b/components/doc/colorpicker/accessibilitydoc.js
new file mode 100644
index 0000000000..6b9b5c45d5
--- /dev/null
+++ b/components/doc/colorpicker/accessibilitydoc.js
@@ -0,0 +1,114 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen
+                readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.
+            </p>
+
+            <h3>Closed State Keyboard Support of Popup ColorPicker</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the color picker button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Opens the popup and moves focus to the color slider.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Popup Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the color and closes the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Selects the color and closes the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup, moves focus to the input.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Color Picker Slider</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>arrow keys</i>
+                            </td>
+                            <td>Changes color.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Hue Slider</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">up arrow</i>
+                                    <i>down arrow</i>
+                                </span>
+                            </td>
+                            <td>Changes hue.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/colorpicker/basicdoc.js b/components/doc/colorpicker/basicdoc.js
new file mode 100644
index 0000000000..ab71b82899
--- /dev/null
+++ b/components/doc/colorpicker/basicdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ColorPicker } from '@/components/lib/colorpicker/ColorPicker';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [color, setColor] = useState(null);
+
+    const code = {
+        basic: `
+<ColorPicker value={color} onChange={(e) => setColor(e.value)} />
+
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ColorPicker } from 'primereact/colorpicker';
+
+export default function BasicDemo() {
+    const [color, setColor] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ColorPicker value={color} onChange={(e) => setColor(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ColorPicker, ColorPickerChangeEvent } from 'primereact/colorpicker';
+
+export default function BasicDemo() {
+    const [color, setColor] = useState<string>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ColorPicker value={color} onChange={(e: ColorPickerChangeEvent) => setColor(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ColorPicker is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ColorPicker value={color} onChange={(e) => setColor(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/disableddoc.js b/components/doc/colorpicker/disableddoc.js
new file mode 100644
index 0000000000..975f79d147
--- /dev/null
+++ b/components/doc/colorpicker/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ColorPicker } from '@/components/lib/colorpicker/ColorPicker';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<ColorPicker disabled />
+        `,
+        javascript: `
+import React from "react";
+import { ColorPicker } from 'primereact/colorpicker';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <ColorPicker disabled />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { ColorPicker } from 'primereact/colorpicker';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <ColorPicker disabled />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ColorPicker disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/formatdoc.js b/components/doc/colorpicker/formatdoc.js
new file mode 100644
index 0000000000..6ff9ab7185
--- /dev/null
+++ b/components/doc/colorpicker/formatdoc.js
@@ -0,0 +1,136 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ColorPicker } from '@/components/lib/colorpicker/ColorPicker';
+import { useState } from 'react';
+
+export function FormatDoc(props) {
+    const [colorHEX, setColorHEX] = useState('6466f1');
+    const [colorRGB, setColorRGB] = useState({ r: 100, g: 102, b: 241 });
+    const [colorHSB, setColorHSB] = useState({ h: 239, s: 59, b: 95 });
+
+    const code = {
+        basic: `
+<ColorPicker format="hex" value={colorHEX} onChange={(e) => setColorHEX(e.value)} />
+<ColorPicker format="rgb" value={colorRGB} onChange={(e) => setColorRGB(e.value)} />
+<ColorPicker format="hsb" value={colorHSB} onChange={(e) => setColorHSB(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ColorPicker } from 'primereact/colorpicker';
+
+export default function FormatDemo() {
+    const [colorHEX, setColorHEX] = useState('6466f1');
+    const [colorRGB, setColorRGB] = useState({ r: 100, g: 102, b: 241 });
+    const [colorHSB, setColorHSB] = useState({ h: 239, s: 59, b: 95 });
+
+    return (
+        <div className="card flex flex-wrap gap-3">
+            <div className="flex-1 flex flex-column align-items-center">
+                <label htmlFor="cp-hex" className="font-bold block mb-2">
+                    HEX
+                </label>
+                <ColorPicker inputId="cp-hex" format="hex" value={colorHEX} onChange={(e) => setColorHEX(e.value)} className="mb-3" />
+                <span>{colorHEX}</span>
+            </div>
+            <div className="flex-1 flex flex-column align-items-center">
+                <label htmlFor="cp-rgb" className="font-bold block mb-2">
+                    RGB
+                </label>
+                <ColorPicker inputId="cp-rgb" format="rgb" value={colorRGB} onChange={(e) => setColorRGB(e.value)} className="mb-3" />
+                <span>{JSON.stringify(colorRGB)}</span>
+            </div>
+            <div className="flex-1 flex flex-column align-items-center">
+                <label htmlFor="cp-hsb" className="font-bold block mb-2">
+                    HSB
+                </label>
+                <ColorPicker inputId="cp-hsb" format="hsb" value={colorHSB} onChange={(e) => setColorHSB(e.value)} className="mb-3" />
+                <span>{JSON.stringify(colorHSB)}</span>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ColorPicker, ColorPickerChangeEvent } from 'primereact/colorpicker';
+
+interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+
+interface HSB {
+    h: number;
+    s: number;
+    b: number;
+}
+
+export default function FormatDemo() {
+    const [colorHEX, setColorHEX] = useState<string>('6466f1');
+    const [colorRGB, setColorRGB] = useState<RGB>({ r: 100, g: 102, b: 241 });
+    const [colorHSB, setColorHSB] = useState<HSB>({ h: 239, s: 59, b: 95 });
+
+    return (
+        <div className="card flex flex-wrap gap-3">
+            <div className="flex-1 flex flex-column align-items-center">
+                <label htmlFor="cp-hex" className="font-bold block mb-2">
+                    HEX
+                </label>
+                <ColorPicker inputId="cp-hex" format="hex" value={colorHEX} onChange={(e: ColorPickerChangeEvent) => setColorHEX(e.value)} className="mb-3" />
+                <span>{colorHEX}</span>
+            </div>
+            <div className="flex-1 flex flex-column align-items-center">
+                <label htmlFor="cp-rgb" className="font-bold block mb-2">
+                    RGB
+                </label>
+                <ColorPicker inputId="cp-rgb" format="rgb" value={colorRGB} onChange={(e: ColorPickerChangeEvent) => setColorRGB(e.value)} className="mb-3" />
+                <span>{JSON.stringify(colorRGB)}</span>
+            </div>
+            <div className="flex-1 flex flex-column align-items-center">
+                <label htmlFor="cp-hsb" className="font-bold block mb-2">
+                    HSB
+                </label>
+                <ColorPicker inputId="cp-hsb" format="hsb" value={colorHSB} onChange={(e: ColorPickerChangeEvent) => setColorHSB(e.value)} className="mb-3" />
+                <span>{JSON.stringify(colorHSB)}</span>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Default color format to use in value binding is <i>hex</i> and other possible values can be <i>rgb</i> and <i>hsb</i> using the <i>format</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3">
+                <div className="flex-1 flex flex-column align-items-center">
+                    <label htmlFor="cp-hex" className="font-bold block mb-2">
+                        HEX
+                    </label>
+                    <ColorPicker inputId="cp-hex" format="hex" value={colorHEX} onChange={(e) => setColorHEX(e.value)} className="mb-3" />
+                    <span>{colorHEX}</span>
+                </div>
+                <div className="flex-1 flex flex-column align-items-center">
+                    <label htmlFor="cp-rgb" className="font-bold block mb-2">
+                        RGB
+                    </label>
+                    <ColorPicker inputId="cp-rgb" format="rgb" value={colorRGB} onChange={(e) => setColorRGB(e.value)} className="mb-3" />
+                    <span>{JSON.stringify(colorRGB)}</span>
+                </div>
+                <div className="flex-1 flex flex-column align-items-center">
+                    <label htmlFor="cp-hsb" className="font-bold block mb-2">
+                        HSB
+                    </label>
+                    <ColorPicker inputId="cp-hsb" format="hsb" value={colorHSB} onChange={(e) => setColorHSB(e.value)} className="mb-3" />
+                    <span>{JSON.stringify(colorHSB)}</span>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/importdoc.js b/components/doc/colorpicker/importdoc.js
new file mode 100644
index 0000000000..b042a7cd57
--- /dev/null
+++ b/components/doc/colorpicker/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ColorPicker } from 'primereact/colorpicker';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/inlinedoc.js b/components/doc/colorpicker/inlinedoc.js
new file mode 100644
index 0000000000..ff539dbbf3
--- /dev/null
+++ b/components/doc/colorpicker/inlinedoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ColorPicker } from '@/components/lib/colorpicker/ColorPicker';
+import { useState } from 'react';
+
+export function InlineDoc(props) {
+    const [color, setColor] = useState(null);
+
+    const code = {
+        basic: `
+<ColorPicker value={color} onChange={(e) => setColor(e.value)} inline />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ColorPicker } from 'primereact/colorpicker';
+
+export default function InlineDemo() {
+    const [color, setColor] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ColorPicker value={color} onChange={(e) => setColor(e.value)} inline />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ColorPicker, ColorPickerChangeEvent } from 'primereact/colorpicker';
+
+export default function InlineDemo() {
+    const [color, setColor] = useState<string>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ColorPicker value={color} onChange={(e: ColorPickerChangeEvent) => setColor(e.value)} inline />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ColorPicker is displayed as a popup by default, add <i>inline</i> property to customize this behavior.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ColorPicker value={color} onChange={(e) => setColor(e.value)} inline />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/pt/wireframe.js b/components/doc/colorpicker/pt/wireframe.js
new file mode 100644
index 0000000000..10a2ec3496
--- /dev/null
+++ b/components/doc/colorpicker/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/colorpicker.jpg" alt="colorpicker" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/colorpicker/styledoc.js b/components/doc/colorpicker/styledoc.js
new file mode 100644
index 0000000000..d402501b71
--- /dev/null
+++ b/components/doc/colorpicker/styledoc.js
@@ -0,0 +1,63 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-colorpicker</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-overlay</td>
+                            <td>Container element in overlay mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-preview </td>
+                            <td>Preview input in overlay mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-panel</td>
+                            <td>Panel element of the colorpicker.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-content</td>
+                            <td>Wrapper that contains color and hue sections.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-color-selector</td>
+                            <td>Color selector container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-color</td>
+                            <td>Color element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-color-handle</td>
+                            <td>Handle of the color element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-hue</td>
+                            <td>Hue slider.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-hue-handle</td>
+                            <td>Handle of the hue slider.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/theming/styleddoc.js b/components/doc/colorpicker/theming/styleddoc.js
new file mode 100644
index 0000000000..111a00efea
--- /dev/null
+++ b/components/doc/colorpicker/theming/styleddoc.js
@@ -0,0 +1,63 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-colorpicker</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-overlay</td>
+                            <td>Container element in overlay mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-preview </td>
+                            <td>Preview input in overlay mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-panel</td>
+                            <td>Panel element of the colorpicker.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-content</td>
+                            <td>Wrapper that contains color and hue sections.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-color-selector</td>
+                            <td>Color selector container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-color</td>
+                            <td>Color element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-color-handle</td>
+                            <td>Handle of the color element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-hue</td>
+                            <td>Hue slider.</td>
+                        </tr>
+                        <tr>
+                            <td>p-colorpicker-hue-handle</td>
+                            <td>Handle of the hue slider.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/colorpicker/theming/tailwinddoc.js b/components/doc/colorpicker/theming/tailwinddoc.js
new file mode 100644
index 0000000000..2350e4e25e
--- /dev/null
+++ b/components/doc/colorpicker/theming/tailwinddoc.js
@@ -0,0 +1,87 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+const Tailwind = {        
+    colorpicker: {
+        root: ({ props }) => ({
+            className: classNames('inline-block', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        input: {
+            className: classNames(
+                'm-0',
+                'font-sans text-base text-gray-600 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 rounded-lg cursor-pointer',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'w-8 h-8'
+            )
+        },
+        panel: ({ props }) => ({
+            className: classNames('shadow-md', 'bg-gray-800 border-gray-900', {
+                'relative h-48 w-52': props.inline,
+                'absolute h-48 w-52': !props.inline
+            })
+        }),
+        selector: 'absolute h-44 w-40 top-2 left-2',
+        color: {
+            className: 'h-44 w-40',
+            style: { background: 'linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' }
+        },
+        colorhandle: {
+            className: classNames('rounded-full border border-solid cursor-pointer h-3 w-3 absolute  opacity-85', 'border-white')
+        },
+        hue: {
+            className: 'h-44 w-6 absolute top-2 left-44 opacity-85',
+            style: { background: 'linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' }
+        },
+        huehandle: 'border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute',
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { ColorPicker } from 'primereact/colorpicker';
+
+export default function UnstyledDemo() {
+    const [color, setColor] = useState(null);
+
+    return (
+        <div className="card flex justify-center">
+            <ColorPicker value={color} onChange={(e) => setColor(e.value)} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/colors/overviewdoc.js b/components/doc/colors/overviewdoc.js
new file mode 100644
index 0000000000..0497d57e57
--- /dev/null
+++ b/components/doc/colors/overviewdoc.js
@@ -0,0 +1,87 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function OverviewDoc(props) {
+    const code = {
+        basic: `
+<div style={{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>
+    Highlighted Item
+</div>
+<div style={{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>
+    Primary Color
+</div>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Colors are exported as CSS variables and used with the standard <i>var</i> syntax such as <i>var(--text-color)</i>. Following is the list of general variables used in a theme.
+                </p>
+            </DocSectionText>
+
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Variable</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>--text-color</td>
+                            <td>Font text color.</td>
+                        </tr>
+                        <tr>
+                            <td>--text-color-secondary</td>
+                            <td>Muted font text color with a secondary level.</td>
+                        </tr>
+                        <tr>
+                            <td>--primary-color</td>
+                            <td>Primary color of the theme.</td>
+                        </tr>
+                        <tr>
+                            <td>--primary-color-text</td>
+                            <td>Text color when background is primary color.</td>
+                        </tr>
+                        <tr>
+                            <td>--font-family</td>
+                            <td>Font family of the theme.</td>
+                        </tr>
+                        <tr>
+                            <td>--inline-spacing</td>
+                            <td>Spacing between to adjacent items.</td>
+                        </tr>
+                        <tr>
+                            <td>--border-radius</td>
+                            <td>Common border radius of elements.</td>
+                        </tr>
+                        <tr>
+                            <td>--focus-ring</td>
+                            <td>Box shadow of a focused element.</td>
+                        </tr>
+                        <tr>
+                            <td>--mask-bg</td>
+                            <td>Background of an overlay mask.</td>
+                        </tr>
+                        <tr>
+                            <td>--highlight-bg</td>
+                            <td>Background of a highlighted element.</td>
+                        </tr>
+                        <tr>
+                            <td>--highlight-text-color</td>
+                            <td>Text color of a highlighted element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div className="card flex justify-content-center gap-3 text-center">
+                <div style={{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>Highlighted Item</div>
+                <div style={{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>Primary Color</div>
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/colors/palettedoc.js b/components/doc/colors/palettedoc.js
new file mode 100644
index 0000000000..ab912d784e
--- /dev/null
+++ b/components/doc/colors/palettedoc.js
@@ -0,0 +1,36 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import React from 'react';
+
+export function PaletteDoc(props) {
+    const colors = ['primary', 'blue', 'green', 'yellow', 'cyan', 'pink', 'indigo', 'teal', 'orange', 'bluegray', 'purple', 'red', 'gray'];
+    const shades = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Colors palette consists of 13 main colors where each color provides tints/shades from 50 to 900.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-6">
+                    {colors.map((color) => {
+                        return (
+                            <div key={color} className="flex flex-column">
+                                {shades.map((shade) => {
+                                    return (
+                                        <React.Fragment key={shade}>
+                                            {shade !== 0 && (
+                                                <div className="w-18rem flex align-items-center p-3 font-bold" style={{ backgroundColor: `var(--${color}-${shade})`, color: shade > 500 ? '#fff' : '#000' }}>
+                                                    {color}-{shade}
+                                                </div>
+                                            )}
+                                        </React.Fragment>
+                                    );
+                                })}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/colors/surfacesdoc.js b/components/doc/colors/surfacesdoc.js
new file mode 100644
index 0000000000..fa0e78d652
--- /dev/null
+++ b/components/doc/colors/surfacesdoc.js
@@ -0,0 +1,60 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SurfacesDoc(props) {
+    const shades = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Surface palette is used when designing the layers such as headers, content, footers, overlays and dividers. Surface palette varies between 0 - 900 and named surfaces are also available.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-column">
+                    {shades.map((shade) => {
+                        return (
+                            <div key={shade} className="w-18rem flex align-items-center p-3 font-bold" style={{ backgroundColor: `var(--surface-${shade})`, color: shade < 600 ? 'var(--surface-900)' : 'var(--surface-0)' }}>
+                                --surface-{shade}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Variable</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>--surface-ground</td>
+                            <td>Base ground color.</td>
+                        </tr>
+                        <tr>
+                            <td>--surface-section</td>
+                            <td>Background color of a section on a ground surface.</td>
+                        </tr>
+                        <tr>
+                            <td>--surface-card</td>
+                            <td>Color of a surface used as a card.</td>
+                        </tr>
+                        <tr>
+                            <td>--surface-overlay</td>
+                            <td>Color of overlay surfaces.</td>
+                        </tr>
+                        <tr>
+                            <td>--surface-border</td>
+                            <td>Color of a divider.</td>
+                        </tr>
+                        <tr>
+                            <td>--surface-hover</td>
+                            <td>Color of an element in hover state.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
new file mode 100644
index 0000000000..d78cf592aa
--- /dev/null
+++ b/components/doc/common/apidoc/index.json
@@ -0,0 +1,58456 @@
+{
+    "accordion": {
+        "description": "Accordion groups a collection of contents in tabs.\n\n[Live Demo](https://www.primereact.org/accordion/)\n\nHelper Components:\n\n-  AccordionTab",
+        "components": {
+            "AccordionTab": {
+                "description": "AccordionTab is a helper component for Accordion.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AccordionTab component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tab header and content."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tab content."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the tab content."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the tab is disabled."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Used to define the header of the tab."
+                        },
+                        {
+                            "name": "headerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tab header."
+                        },
+                        {
+                            "name": "headerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the tab header."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom header template of the tab."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the tab header and content."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            },
+            "Accordion": {
+                "description": "Accordion groups a collection of contents in tabs.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Accordion component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "activeIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | number | number[]",
+                            "default": "",
+                            "description": "Active index or indexes of the element. Use an array of numbers for multiple indexes.\nThe  multiple  prop must be set to true in order to specify multiple indexes."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<AccordionProps>",
+                            "default": "",
+                            "description": "Icon of an expanded tab."
+                        },
+                        {
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<AccordionProps>",
+                            "default": "",
+                            "description": "Icon of a collapsed tab."
+                        },
+                        {
+                            "name": "multiple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, multiple tabs can be activated at the same time."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onTabChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AccordionTabChangeEvent",
+                                    "description": "Custom tab close event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when state of the accordion changes."
+                        },
+                        {
+                            "name": "onTabClose",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AccordionTabCloseEvent",
+                                    "description": "Custom tab close event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active tab is collapsed by clicking on the header."
+                        },
+                        {
+                            "name": "onTabOpen",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AccordionTabOpenEvent",
+                                    "description": "Custom tab open event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a tab gets expanded."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "AccordionTabOpenEvent": {
+                    "description": "Custom tab open event.",
+                    "relatedProp": "onTabOpen",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser mouse event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Opened tab index."
+                        }
+                    ],
+                    "extendedBy": "AccordionTabCloseEvent"
+                },
+                "AccordionTabCloseEvent": {
+                    "description": "Custom tab close event.",
+                    "relatedProp": "onTabClose",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser mouse event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Opened tab index."
+                        }
+                    ]
+                },
+                "AccordionTabChangeEvent": {
+                    "description": "Custom tab change event.",
+                    "relatedProp": "onTabChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser mouse event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | number[]",
+                            "description": "Opened tab index."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "AccordionTabPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AccordionTabProps"
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AccordionPassThroughMethodOptions"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AccordionContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AccordionTabPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerAction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the headeraction's DOM element."
+                        },
+                        {
+                            "name": "headerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the headericon's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the headertitle's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toggleablecontent's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AccordionContext": {
+                    "description": "Defines current inline context in Accordion component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Opened tab index."
+                        },
+                        {
+                            "name": "count",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of tabs"
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this the first tab?"
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this the last tab?"
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this tab currently selected."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this tab currently disabled."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AccordionPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AccordionProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AccordionState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AccordionPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "accordiontab",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to accordion tabs."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AccordionState": {
+                    "description": "Defines current inline state in Accordion component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current id state as a string"
+                        },
+                        {
+                            "name": "activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | number[]",
+                            "description": "Current active index state."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "AccordionPassThroughType": {
+                    "values": "PassThroughType<T, AccordionPassThroughMethodOptions>"
+                },
+                "AccordionTabPassThroughType": {
+                    "values": "PassThroughType<T, AccordionTabPassThroughMethodOptions>"
+                },
+                "AccordionPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "api": {
+        "description": "API for PrimeReact components.",
+        "functions": {
+            "description": "Defines the custom functions used by the module.",
+            "values": {
+                "PrimeReactProvider": {
+                    "name": "PrimeReactProvider",
+                    "parameters": [
+                        {
+                            "name": "props",
+                            "type": "PrimeReactProviderProps"
+                        },
+                        {
+                            "name": "deprecatedLegacyContext",
+                            "type": "any",
+                            "description": ""
+                        }
+                    ],
+                    "returnType": "ReactNode"
+                },
+                "locale": {
+                    "name": "locale",
+                    "parameters": [
+                        {
+                            "name": "locale",
+                            "type": "string",
+                            "description": "Locale string."
+                        }
+                    ],
+                    "returnType": "Object",
+                    "description": "Sets the current locale if installed."
+                },
+                "addLocale": {
+                    "name": "addLocale",
+                    "parameters": [
+                        {
+                            "name": "locale",
+                            "type": "string",
+                            "description": "Locale string."
+                        },
+                        {
+                            "name": "options",
+                            "type": "LocaleOptions",
+                            "description": "Locale options. See [PrimeLocale](https://github.com/primefaces/primelocale) on GitHub for possible options."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Installs a new locale."
+                },
+                "updateLocaleOption": {
+                    "name": "updateLocaleOption",
+                    "parameters": [
+                        {
+                            "name": "key",
+                            "type": "Key",
+                            "description": "Option key."
+                        },
+                        {
+                            "name": "value",
+                            "type": "Key extends keyof LocaleOptions ? LocaleOptions[Key] : any",
+                            "description": "Option value."
+                        },
+                        {
+                            "name": "locale",
+                            "type": "string",
+                            "description": "Locale string."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Changes the specific option value of a locale."
+                },
+                "updateLocaleOptions": {
+                    "name": "updateLocaleOptions",
+                    "parameters": [
+                        {
+                            "name": "options",
+                            "type": "object",
+                            "description": "Locale options."
+                        },
+                        {
+                            "name": "locale",
+                            "type": "string",
+                            "description": "Locale string."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Changes the option values of a locale."
+                },
+                "localeOption": {
+                    "name": "localeOption",
+                    "parameters": [
+                        {
+                            "name": "key",
+                            "type": "Key",
+                            "description": "Option key."
+                        },
+                        {
+                            "name": "locale",
+                            "type": "string",
+                            "description": "Locale string."
+                        }
+                    ],
+                    "returnType": "LocaleOptions[Key]",
+                    "description": "Return the value of a specific locale option."
+                },
+                "localeOptions": {
+                    "name": "localeOptions",
+                    "parameters": [
+                        {
+                            "name": "locale",
+                            "type": "string",
+                            "description": "Locale string."
+                        }
+                    ],
+                    "returnType": "object",
+                    "description": "Returns the values of locale options."
+                },
+                "ariaLabel": {
+                    "name": "ariaLabel",
+                    "parameters": [
+                        {
+                            "name": "ariaKey",
+                            "type": "string",
+                            "description": "Key of the ARIA label to look up in the locale."
+                        },
+                        {
+                            "name": "options",
+                            "type": "any",
+                            "description": "JSON options like { page: 2, user: \"John\", role: \"Admin\" }."
+                        }
+                    ],
+                    "returnType": "string",
+                    "description": "Finds an ARIA label in the locale by key and replaces options if provided."
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ZIndexOptions": {
+                    "description": "ZIndex configuration options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modal",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Sets the base index value for Dialog and Sidebar components."
+                        },
+                        {
+                            "name": "overlay",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Sets the base index value for Overlay components such as Dropdown and OverlayPanel."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Sets the base index value for Overlay menus."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Sets the base index value for Tooltip."
+                        },
+                        {
+                            "name": "toast",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Sets the base index value for Toast."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FilterMatchModeOptions": {
+                    "description": "Filter match modes for DataTable filter menus.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "text",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Array of filter match modes for text filtering."
+                        },
+                        {
+                            "name": "numeric",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Array of filter match modes for numeric filtering."
+                        },
+                        {
+                            "name": "date",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Array of filter match modes for date filtering."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "APIOptions": {
+                    "description": "Configuration options for the PrimeReact components.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AppendToType",
+                            "description": "This option allows components with overlays like dropdowns or popups to be mounted into either the component or any DOM element, such as document body and self."
+                        },
+                        {
+                            "name": "styleContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StyleContainerType",
+                            "description": "This option allows  `useStyle`  to insert dynamic CSS styles into a specific container. This is useful when styles need to be scoped such as in a Shadow DOM."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. When autoZIndex is false, each group increments its zIndex within itself."
+                        },
+                        {
+                            "name": "cssTransition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "PrimeReact components utilize \"react-transition-group\" internally to implement animations. Setting \"cssTransition\" to \"false\" disables all animations."
+                        },
+                        {
+                            "name": "filterMatchModeOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FilterMatchModeOptions",
+                            "description": "Default filter modes to display on DataTable filter menus."
+                        },
+                        {
+                            "name": "hideOverlaysOnDocumentScrolling",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the overlay follow the scroll."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputStyleType",
+                            "description": "Input fields have two styles: default (outlined with borders) and filled (background-colored). Applying 'p-input-filled' to an input's ancestor enables the filled style."
+                        },
+                        {
+                            "name": "locale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The locale configuration sets up the language and region specific preferences."
+                        },
+                        {
+                            "name": "nonce",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The nonce value to use on dynamically generated style elements."
+                        },
+                        {
+                            "name": "nullSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Determines how null values are sorted."
+                        },
+                        {
+                            "name": "ripple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Ripple is an optional animation for the supported components such as buttons."
+                        },
+                        {
+                            "name": "zIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Partial<ZIndexOptions>",
+                            "description": "ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. When autoZIndex is false, each group increments its zIndex within itself. Each property is optional, so when autoZIndex is enabled you can set the z-index for any component type, and the rest will be calculated automatically."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PrimeReactPTOptions",
+                            "description": "This option allows to direct implementation of all relevant attributes (e.g., style, classnames) within the respective HTML tag."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, it removes all of components styles in the core."
+                        },
+                        {
+                            "name": "setAppendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<AppendToType>>",
+                            "description": "Sets the \"appendTo\" state of the context."
+                        },
+                        {
+                            "name": "setStyleContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<StyleContainerType>>",
+                            "description": "Sets the \"styleContainer\" state of the context."
+                        },
+                        {
+                            "name": "setAutoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"autoZIndex\" state of the context."
+                        },
+                        {
+                            "name": "setCssTransition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"cssTransition\" state of the context."
+                        },
+                        {
+                            "name": "setFilterMatchModeOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<FilterMatchModeOptions>>",
+                            "description": "Sets the \"filterMatchModeOptions\" state of the context."
+                        },
+                        {
+                            "name": "setHideOverlaysOnDocumentScrolling",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"hideOverlaysOnDocumentScrolling\" state of the context."
+                        },
+                        {
+                            "name": "setInputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<InputStyleType>>",
+                            "description": "Sets the \"inputStyle\" state of the context."
+                        },
+                        {
+                            "name": "setLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<string>>",
+                            "description": "Sets the \"locale\" state of the context."
+                        },
+                        {
+                            "name": "setNonce",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<string>>",
+                            "description": "Sets the \"nonce\" state of the context."
+                        },
+                        {
+                            "name": "setNullSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<number>>",
+                            "description": "Sets the \"nullSortOrder\" state of the context."
+                        },
+                        {
+                            "name": "setRipple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"ripple\" state of the context."
+                        },
+                        {
+                            "name": "setZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<ZIndexOptions>>",
+                            "description": "Sets the \"zIndex\" state of the context."
+                        },
+                        {
+                            "name": "setPt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<PrimeReactPTOptions>>",
+                            "description": "Sets the \"pt\" state of the context."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "changeTheme",
+                            "parameters": [
+                                {
+                                    "name": "theme",
+                                    "optional": true,
+                                    "type": "string"
+                                },
+                                {
+                                    "name": "newTheme",
+                                    "optional": true,
+                                    "type": "string",
+                                    "description": "The name of the new theme to be applied. Example 'md-dark-deeppurple'"
+                                },
+                                {
+                                    "name": "linkElementId",
+                                    "optional": true,
+                                    "type": "string",
+                                    "description": "The id of the link element to be updated."
+                                },
+                                {
+                                    "name": "callback",
+                                    "optional": true,
+                                    "type": "Function",
+                                    "description": "Callback to invoke when the theme change is completed."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "This method is used to change the theme dynamically."
+                        }
+                    ],
+                    "extendedBy": "CascadeSelectContext"
+                },
+                "PrimeReactPTOptions": {
+                    "description": "This option allows to direct implementation of all relevant attributes (e.g., style, classnames) within the respective HTML tag globally for all components.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "accordion",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Accordion."
+                        },
+                        {
+                            "name": "accordiontab",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AccordionTabPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for AccordionTab."
+                        },
+                        {
+                            "name": "autocomplete",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for AutoComplete."
+                        },
+                        {
+                            "name": "avatar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Avatar."
+                        },
+                        {
+                            "name": "avatargroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarGroupPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for AvatarGroup."
+                        },
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Badge."
+                        },
+                        {
+                            "name": "blockui",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BlockUIPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for BlockUI."
+                        },
+                        {
+                            "name": "breadcrumb",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Breadcrumb."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Button."
+                        },
+                        {
+                            "name": "calendar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Calendar."
+                        },
+                        {
+                            "name": "card",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Card."
+                        },
+                        {
+                            "name": "carousel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Carousel."
+                        },
+                        {
+                            "name": "cascadeselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for CascadeSelect."
+                        },
+                        {
+                            "name": "chart",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChartPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Chart."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Checkbox."
+                        },
+                        {
+                            "name": "chip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Chip."
+                        },
+                        {
+                            "name": "chips",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Chips."
+                        },
+                        {
+                            "name": "colorpicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ColorPicker."
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Column."
+                        },
+                        {
+                            "name": "columngroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ColumnGroup."
+                        },
+                        {
+                            "name": "confirmdialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ConfirmDialog."
+                        },
+                        {
+                            "name": "confirmpopup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ConfirmPopup."
+                        },
+                        {
+                            "name": "contextmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ContextMenu."
+                        },
+                        {
+                            "name": "datatable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for DataTable."
+                        },
+                        {
+                            "name": "dataview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for DataView."
+                        },
+                        {
+                            "name": "dataviewlayoutoptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for DataViewLayoutOptions."
+                        },
+                        {
+                            "name": "deferredcontent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DeferredContentPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for DeferredContent."
+                        },
+                        {
+                            "name": "dialog",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Dialog."
+                        },
+                        {
+                            "name": "divider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DividerPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Divider."
+                        },
+                        {
+                            "name": "dock",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Dock."
+                        },
+                        {
+                            "name": "dropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Dropdown."
+                        },
+                        {
+                            "name": "editor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Editor."
+                        },
+                        {
+                            "name": "fieldset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Fieldset."
+                        },
+                        {
+                            "name": "fileupload",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for FileUpload."
+                        },
+                        {
+                            "name": "floatlabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FloatLabelPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for FloatLabel."
+                        },
+                        {
+                            "name": "galleria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for FullCalendar."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Galleria."
+                        },
+                        {
+                            "name": "inplace",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Inplace."
+                        },
+                        {
+                            "name": "inputmask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputMask."
+                        },
+                        {
+                            "name": "inputnumber",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputNumber."
+                        },
+                        {
+                            "name": "inputotp",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputOtp."
+                        },
+                        {
+                            "name": "inputswitch",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputSwitch."
+                        },
+                        {
+                            "name": "inputtext",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputText."
+                        },
+                        {
+                            "name": "inputtextarea",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextareaPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for InputTextarea."
+                        },
+                        {
+                            "name": "knob",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Knob."
+                        },
+                        {
+                            "name": "listbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Listbox."
+                        },
+                        {
+                            "name": "megamenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for MegaMenu."
+                        },
+                        {
+                            "name": "mention",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Mention."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Menu."
+                        },
+                        {
+                            "name": "menubar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Menubar."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Message."
+                        },
+                        {
+                            "name": "messages",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Messages."
+                        },
+                        {
+                            "name": "multiselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for MultiSelect."
+                        },
+                        {
+                            "name": "multistatecheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for MultiStateCheckbox."
+                        },
+                        {
+                            "name": "orderlist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for OrderList."
+                        },
+                        {
+                            "name": "organizationchart",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for OrganizationChart."
+                        },
+                        {
+                            "name": "overlaypanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for OverlayPanel."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Paginator."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Panel."
+                        },
+                        {
+                            "name": "panelmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for PanelMenu."
+                        },
+                        {
+                            "name": "password",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Password."
+                        },
+                        {
+                            "name": "picklist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for PickList."
+                        },
+                        {
+                            "name": "progressbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ProgressBar."
+                        },
+                        {
+                            "name": "progressspinner",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ProgressSpinner."
+                        },
+                        {
+                            "name": "radiobutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for RadioButton."
+                        },
+                        {
+                            "name": "rating",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Rating."
+                        },
+                        {
+                            "name": "ripple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RipplePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Ripple."
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RowPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Row."
+                        },
+                        {
+                            "name": "scrollpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollPanelPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ScrollPanel."
+                        },
+                        {
+                            "name": "scrolltop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ScrollTop."
+                        },
+                        {
+                            "name": "selectbutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for SelectButton."
+                        },
+                        {
+                            "name": "sidebar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Sidebar."
+                        },
+                        {
+                            "name": "skeleton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SkeletonPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Skeleton."
+                        },
+                        {
+                            "name": "slidemenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for SliderMenu."
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Slider."
+                        },
+                        {
+                            "name": "speeddial",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for SpeedDial."
+                        },
+                        {
+                            "name": "splitbutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for SplitButton."
+                        },
+                        {
+                            "name": "splitter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitterPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Splitter."
+                        },
+                        {
+                            "name": "steps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Steps."
+                        },
+                        {
+                            "name": "tabmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for TabMenu."
+                        },
+                        {
+                            "name": "tabpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for TabPanel."
+                        },
+                        {
+                            "name": "tabview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for TabView."
+                        },
+                        {
+                            "name": "tag",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Tag."
+                        },
+                        {
+                            "name": "terminal",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Terminal."
+                        },
+                        {
+                            "name": "tieredmenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for TieredMenu."
+                        },
+                        {
+                            "name": "timeline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Timeline."
+                        },
+                        {
+                            "name": "toast",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Toast."
+                        },
+                        {
+                            "name": "togglebutton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for ToffleButton."
+                        },
+                        {
+                            "name": "toolbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToolbarPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Toolbar."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Tooltip."
+                        },
+                        {
+                            "name": "tree",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for Tree."
+                        },
+                        {
+                            "name": "treeselect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for TreeSelect."
+                        },
+                        {
+                            "name": "treetable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptions",
+                            "description": "Custom passthrough(pt) options for TreeTable."
+                        },
+                        {
+                            "name": "virtualscroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "description": "Custom passthrough(pt) options for VirtualScroller."
+                        },
+                        {
+                            "name": "global",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "description": "Custom passthrough(pt) options for global css."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "LocaleOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "startsWith",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Starts with"
+                        },
+                        {
+                            "name": "contains",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Contains"
+                        },
+                        {
+                            "name": "notContains",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Not contains"
+                        },
+                        {
+                            "name": "endsWith",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Ends with"
+                        },
+                        {
+                            "name": "equals",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Equals"
+                        },
+                        {
+                            "name": "notEquals",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Not equals"
+                        },
+                        {
+                            "name": "noFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "No Filter"
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Filter"
+                        },
+                        {
+                            "name": "lt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Less than"
+                        },
+                        {
+                            "name": "lte",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Less than or equal to"
+                        },
+                        {
+                            "name": "gt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Greater than"
+                        },
+                        {
+                            "name": "gte",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Greater than or equal to"
+                        },
+                        {
+                            "name": "dateIs",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Date is"
+                        },
+                        {
+                            "name": "dateIsNot",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Date is not"
+                        },
+                        {
+                            "name": "dateBefore",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Date is before"
+                        },
+                        {
+                            "name": "dateAfter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Date is after"
+                        },
+                        {
+                            "name": "custom",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Custom"
+                        },
+                        {
+                            "name": "clear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Clear"
+                        },
+                        {
+                            "name": "apply",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Apply"
+                        },
+                        {
+                            "name": "matchAll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Match All"
+                        },
+                        {
+                            "name": "matchAny",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Match Any"
+                        },
+                        {
+                            "name": "addRule",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Add Rule"
+                        },
+                        {
+                            "name": "removeRule",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Remove Rule"
+                        },
+                        {
+                            "name": "accept",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Yes"
+                        },
+                        {
+                            "name": "reject",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "No"
+                        },
+                        {
+                            "name": "choose",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Choose"
+                        },
+                        {
+                            "name": "upload",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Upload"
+                        },
+                        {
+                            "name": "cancel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Cancel"
+                        },
+                        {
+                            "name": "close",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Close"
+                        },
+                        {
+                            "name": "pending",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Pending"
+                        },
+                        {
+                            "name": "fileSizeTypes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']"
+                        },
+                        {
+                            "name": "dayNames",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']"
+                        },
+                        {
+                            "name": "dayNamesShort",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']"
+                        },
+                        {
+                            "name": "dayNamesMin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']"
+                        },
+                        {
+                            "name": "monthNames",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']"
+                        },
+                        {
+                            "name": "monthNamesShort",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
+                        },
+                        {
+                            "name": "chooseYear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Choose Year"
+                        },
+                        {
+                            "name": "chooseMonth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Choose Month"
+                        },
+                        {
+                            "name": "chooseDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Choose Date"
+                        },
+                        {
+                            "name": "prevDecade",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Previous Decade"
+                        },
+                        {
+                            "name": "nextDecade",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Next Decade"
+                        },
+                        {
+                            "name": "prevYear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Previous Year"
+                        },
+                        {
+                            "name": "nextYear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Next Year"
+                        },
+                        {
+                            "name": "prevMonth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Previous Month"
+                        },
+                        {
+                            "name": "nextMonth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Next Month"
+                        },
+                        {
+                            "name": "prevHour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Previous Hour"
+                        },
+                        {
+                            "name": "nextHour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Next Hour"
+                        },
+                        {
+                            "name": "prevMinute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Previous Minute"
+                        },
+                        {
+                            "name": "nextMinute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Next Minute"
+                        },
+                        {
+                            "name": "prevSecond",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Previous Second"
+                        },
+                        {
+                            "name": "nextSecond",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Next Second"
+                        },
+                        {
+                            "name": "am",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "AM"
+                        },
+                        {
+                            "name": "pm",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "PM"
+                        },
+                        {
+                            "name": "today",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Today (Calendar date only)"
+                        },
+                        {
+                            "name": "now",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Now (Calendar using time)"
+                        },
+                        {
+                            "name": "weekHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Wk"
+                        },
+                        {
+                            "name": "firstDayOfWeek",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "0"
+                        },
+                        {
+                            "name": "dateFormat",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "mm/dd/yy"
+                        },
+                        {
+                            "name": "weak",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Weak"
+                        },
+                        {
+                            "name": "medium",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Medium"
+                        },
+                        {
+                            "name": "strong",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Strong"
+                        },
+                        {
+                            "name": "passwordPrompt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Enter a password"
+                        },
+                        {
+                            "name": "emptyFilterMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "No available options"
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "No results found"
+                        },
+                        {
+                            "name": "aria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "description": "ARIA labels"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PrimeIconsOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "ALIGN_CENTER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ALIGN_JUSTIFY",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ALIGN_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ALIGN_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "AMAZON",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANDROID",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_DOUBLE_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_DOUBLE_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_DOUBLE_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_DOUBLE_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ANGLE_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "APPLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_CIRCLE_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_CIRCLE_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_CIRCLE_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_CIRCLE_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_DOWN_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_DOWN_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_UP_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROW_UP_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROWS_H",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ARROWS_V",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "AT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BACKWARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BAN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BARS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BELL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BOLT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BOOK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BOOKMARK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BOOKMARK_FILL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BOX",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BRIEFCASE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "BUILDING",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CALENDAR",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CALENDAR_MINUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CALENDAR_PLUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CALENDAR_TIMES",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CAMERA",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CAR",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CARET_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CARET_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CARET_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CARET_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHART_BAR",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHART_LINE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHART_PIE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHECK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHECK_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHECK_SQUARE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_CIRCLE_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_CIRCLE_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_CIRCLE_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_CIRCLE_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_LEFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_RIGHT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CHEVRON_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CIRCLE_FILL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CLOCK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CLONE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CLOUD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CLOUD_DOWNLOAD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CLOUD_UPLOAD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CODE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "COG",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "COMMENT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "COMMENTS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "COMPASS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "COPY",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "CREDIT_CARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "DATABASE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "DESKTOP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "DIRECTIONS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "DIRECTIONS_ALT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "DISCORD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "DOLLAR",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "DOWNLOAD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "EJECT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ELLIPSIS_H",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ELLIPSIS_V",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ENVELOPE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "EURO",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "EXCLAMATION_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "EXCLAMATION_TRIANGLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "EXTERNAL_LINK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "EYE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "EYE_SLASH",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FACEBOOK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FAST_BACKWARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FAST_FORWARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FILE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FILE_EXCEL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FILE_PDF",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FILTER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FILTER_FILL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FILTER_SLASH",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FLAG",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FLAG_FILL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FOLDER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FOLDER_OPEN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "FORWARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "GITHUB",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "GLOBE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "GOOGLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "HASHTAG",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "HEADPHONES",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "HEART",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "HEART_FILL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "HISTORY",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "HOME",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "ID_CARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "IMAGE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "IMAGES",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "INBOX",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "INFO",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "INFO_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "INSTAGRAM",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "KEY",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "LINK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "LINKEDIN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "LIST",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "LOCK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "LOCK_OPEN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MAP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MAP_MARKER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MARS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MICROSOFT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MINUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MINUS_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MOBILE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MONEY_BILL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "MOON",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PALETTE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PAPERCLIP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PAUSE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PAYPAL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PENCIL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PERCENTAGE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PHONE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PLAY",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PLUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PLUS_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "POUND",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "POWER_OFF",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PRIME",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "PRINT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "QRCODE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "QUESTION",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "QUESTION_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "REDDIT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "REFRESH",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "REPLAY",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "REPLY",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SAVE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SEARCH",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SEARCH_MINUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SEARCH_PLUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SEND",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SERVER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SHARE_ALT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SHIELD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SHOPPING_BAG",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SHOPPING_CART",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SIGN_IN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SIGN_OUT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SITEMAP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SLACK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SLIDERS_H",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SLIDERS_V",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_ALPHA_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_ALPHA_ALT_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_ALPHA_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_ALPHA_ALT_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_ALT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_ALT_SLASH",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_AMOUNT_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_AMOUNT_DOWN_ALT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_AMOUNT_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_AMOUNT_UP_ALT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_NUMERIC_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_NUMERIC_ALT_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_NUMERIC_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_NUMERIC_ALT_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SORT_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SPINNER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STAR",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STAR_FILL",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STEP_BACKWARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STEP_BACKWARD_ALT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STEP_FORWARD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STEP_FORWARD_ALT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STOP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "STOP_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SUN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "SYNC",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TABLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TABLET",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TAG",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TAGS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TELEGRAM",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TH_LARGE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "THUMBS_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "THUMBS_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TICKET",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TIMES",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TIMES_CIRCLE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TRASH",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "TWITTER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "UNDO",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "UNLOCK",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "UPLOAD",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "USER",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "USER_EDIT",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "USER_MINUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "USER_PLUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "USERS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "VENUS",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "VIDEO",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "VIMEO",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "VOLUME_DOWN",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "VOLUME_OFF",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "VOLUME_UP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "WALLET",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "WAVE_PULSE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "WHATSAPP",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "WIFI",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "WINDOW_MAXIMIZE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "WINDOW_MINIMIZE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        },
+                        {
+                            "name": "YOUTUBE",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputStyleType": {
+                    "values": "\"outlined\" | \"filled\""
+                },
+                "AppendToType": {
+                    "values": "\"self\" | HTMLElement | undefined | null | Function"
+                },
+                "StyleContainerType": {
+                    "values": "ShadowRoot | HTMLElement | undefined | null"
+                }
+            }
+        }
+    },
+    "autocomplete": {
+        "description": "AutoComplete is an input component that provides real-time suggestions while being typed.\n\n[Live Demo](https://www.primereact.org/autocomplete/)",
+        "components": {
+            "AutoComplete": {
+                "description": "AutoComplete is an input component that provides real-time suggestions while being typed.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | ForwardRefExoticComponent<InputTextProps & RefAttributes<HTMLInputElement>>",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        },
+                        {
+                            "name": "getVirtualScroller",
+                            "parameters": [],
+                            "returnType": "null | VirtualScroller",
+                            "description": "Used to get the options of inline virtualScroller component."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the overlay."
+                        },
+                        {
+                            "name": "search",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                },
+                                {
+                                    "name": "query",
+                                    "type": "string",
+                                    "description": "Value to search with."
+                                },
+                                {
+                                    "name": "source",
+                                    "type": "null | \"input\" | \"dropdown\"",
+                                    "description": "Source type, valid values are 'dropdown' and 'input'"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to search new suggestions."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the overlay."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in AutoComplete component. In addition to these, all properties of HTMLSpanElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "autoHighlight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, highlights the first item in the list by default."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "delay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "300",
+                            "description": "Delay between keystrokes to wait before sending a query."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "dropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Displays a button next to the input field when enabled."
+                        },
+                        {
+                            "name": "dropdownAriaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Choose",
+                            "description": "ARIA label for the dropdown button. Defaults to placeholder then Locale \"choose\" label."
+                        },
+                        {
+                            "name": "dropdownAutoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Focus the input field when the dropdown button is clicked if enabled."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<AutoCompleteProps<T, false>>",
+                            "default": "",
+                            "description": "Icon of the dropdown."
+                        },
+                        {
+                            "name": "dropdownMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"blank\" | \"current\"",
+                            "default": "blank",
+                            "description": "Specifies the behavior dropdown button. Default \"blank\" mode sends an empty string and \"current\" mode sends the input value."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "No results found.",
+                            "description": "Text to display when there is no data. Defaults to global value in i18n translation configuration."
+                        },
+                        {
+                            "name": "field",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Field of a suggested object to resolve and display."
+                        },
+                        {
+                            "name": "forceSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "inputClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of a list item."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<AutoCompleteProps<any, false>>",
+                            "default": "",
+                            "description": "Icon of the loader."
+                        },
+                        {
+                            "name": "maxLength",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum number of characters to initiate a search."
+                        },
+                        {
+                            "name": "minLength",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Minimum number of characters to initiate a search."
+                        },
+                        {
+                            "name": "multiple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "M",
+                            "default": "false",
+                            "description": "Specifies if multiple values can be selected."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "optionGroupChildren",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function that refers to the children options of option group."
+                        },
+                        {
+                            "name": "optionGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option group."
+                        },
+                        {
+                            "name": "optionGroupTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of an option group item."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the overlay panel element."
+                        },
+                        {
+                            "name": "panelFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the panel footer."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay panel element."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Hint text for the input field."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the input cannot be typed."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<AutoCompleteProps<any, false>>",
+                            "default": "",
+                            "description": "Icon of the remove chip element in multiple mode."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "200px",
+                            "description": "Maximum height of the suggestions panel."
+                        },
+                        {
+                            "name": "selectedItemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of a selected item. In multiple mode, it is used to customize the chips using a ReactNode. In single mode, it is used to customize the text using a string."
+                        },
+                        {
+                            "name": "selectionLimit",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of maximum options that can be selected."
+                        },
+                        {
+                            "name": "showEmptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show the empty message or not."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Size of the input field."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "suggestions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "(T extends any[] ? T[number] : T)[]",
+                            "default": "",
+                            "description": "An array of suggestions to display."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Type of the input element."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "M extends true ? T[] : undefined | string | number | readonly string[] | T",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "virtualScrollerOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "default": "",
+                            "description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "completeMethod",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AutoCompleteCompleteEvent",
+                                    "description": "Custom complete method event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to search for suggestions."
+                        },
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AutoCompleteChangeEvent<M extends true ? T[] : T>",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete value changes."
+                        },
+                        {
+                            "name": "onClear",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when input is cleared by the user."
+                        },
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        },
+                        {
+                            "name": "onContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on right-click."
+                        },
+                        {
+                            "name": "onDblClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on double click."
+                        },
+                        {
+                            "name": "onDropdownClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AutoCompleteDropdownClickEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to when dropdown button is clicked."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete gets focus."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes hidden."
+                        },
+                        {
+                            "name": "onKeyPress",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KeyboardEvent<HTMLInputElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to when a key is pressed."
+                        },
+                        {
+                            "name": "onKeyUp",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KeyboardEvent<HTMLInputElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to when a key is released."
+                        },
+                        {
+                            "name": "onMouseDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to when a mouse button is pressed."
+                        },
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AutoCompleteSelectEvent<T>",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a suggestion is selected."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes visible."
+                        },
+                        {
+                            "name": "onUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "AutoCompleteUnselectEvent<T>",
+                                    "description": "Custom unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a selected value is removed."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "AutoCompleteChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "T"
+                        },
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<T>"
+                        }
+                    ]
+                },
+                "AutoCompleteSelectEvent": {
+                    "description": "Custom select event with generic type support",
+                    "relatedProp": "onSelect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "T extends any[] ? T[number] : T",
+                            "description": "Selected option value"
+                        }
+                    ],
+                    "extendedBy": "AutoCompleteUnselectEvent"
+                },
+                "AutoCompleteUnselectEvent": {
+                    "description": "Custom unselect event extending the select event",
+                    "relatedProp": "onUnselect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "T extends any[] ? T[number] : T",
+                            "description": "Selected option value"
+                        }
+                    ]
+                },
+                "AutoCompleteDropdownClickEvent": {
+                    "description": "Custom click event.",
+                    "relatedProp": "onDropdownClick",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "query",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current value of the input field"
+                        }
+                    ]
+                },
+                "AutoCompleteCompleteEvent": {
+                    "description": "Custom complete method event.",
+                    "relatedProp": "completeMethod",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "query",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Value to search with"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "AutoCompletePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AutoCompleteProps<any, false>"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AutoCompleteState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AutoCompleteContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AutoCompletePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "tokenLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the token label's DOM element."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the remove token icon's DOM element."
+                        },
+                        {
+                            "name": "inputToken",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the input token's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "dropdownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AutoCompletePassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AutoCompleteState": {
+                    "description": "Defines current inline state in AutoComplete component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "searching",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current search state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AutoCompleteContext": {
+                    "description": "Defines current options in AutoComplete component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selection state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "AutoCompletePassThroughType": {
+                    "values": "PassThroughType<T, AutoCompletePassThroughMethodOptions>"
+                },
+                "AutoCompletePassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "avatar": {
+        "description": "Avatar represents people using icons, labels and images.\n\n[Live Demo](https://www.primereact.org/avatar)",
+        "components": {
+            "Avatar": {
+                "description": "Avatar represents people using icons, labels and images.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<AvatarProps>",
+                            "default": "",
+                            "description": "Defines the icon to display."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines the image to display."
+                        },
+                        {
+                            "name": "imageAlt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "avatar",
+                            "description": "It specifies an alternate text for an image, if the image cannot be displayed."
+                        },
+                        {
+                            "name": "imageFallback",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "default",
+                            "description": "Defines a fallback image or URL if the main image fails to load. If \"default\" will fallback to label then icon."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines the text to display."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "shape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"square\" | \"circle\"",
+                            "default": "square",
+                            "description": "Shape of the element."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"normal\" | \"large\" | \"xlarge\"",
+                            "default": "normal",
+                            "description": "Size of the element."
+                        },
+                        {
+                            "name": "template",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the content."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        },
+                        {
+                            "name": "onImageError",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "This event is triggered if an error occurs while loading an image file."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "AvatarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AvatarProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "AvatarState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AvatarState": {
+                    "description": "Defines current inline state in Avatar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "imageFailed",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current imageFailed state as a boolean."
+                        },
+                        {
+                            "name": "isNestedInAvatarGroup",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current state that indicates whether the Avatar component is nested within an AvatarGroup component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "AvatarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarPassThroughType<ImgHTMLAttributes<HTMLImageElement>>",
+                            "description": "Uses to pass attributes to the image's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "AvatarPassThroughType": {
+                    "values": "PassThroughType<T, AvatarPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "avatargroup": {
+        "description": "A set of Avatars can be displayed together using the AvatarGroup component.\n\n[Live Demo](https://www.primereact.org/avatar/)",
+        "components": {
+            "AvatarGroup": {
+                "description": "A set of Avatars can be displayed together using the AvatarGroup component.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarGroupPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "AvatarGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": []
+                },
+                "AvatarGroupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AvatarGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "AvatarGroupPassThroughType": {
+                    "values": "PassThroughType<T, AvatarGroupPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "badge": {
+        "description": "Badge represents people using icons, labels and images.\n\n[Live Demo](https://www.primereact.org/badge)",
+        "components": {
+            "Badge": {
+                "description": "Badge represents people using icons, labels and images.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Badge component. In addition to these, all properties of HTMLSpanElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | \"success\" | \"warning\" | \"info\" | \"secondary\" | \"danger\" | \"contrast\"",
+                            "default": "null",
+                            "description": "Severity type of the badge."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | \"normal\" | \"large\" | \"xlarge\"",
+                            "default": "null",
+                            "description": "Size of the badge, valid options are \"large\" and \"xlarge\"."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value to display inside the badge."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "BadgePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BadgeProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "BadgePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "BadgePassThroughType": {
+                    "values": "PassThroughType<T, BadgePassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "blockui": {
+        "description": "BlockUI represents people using icons, labels and images.\n\n[Live Demo](https://www.primereact.org/blockui)",
+        "components": {
+            "BlockUI": {
+                "description": "BlockUI represents people using icons, labels and images.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "block",
+                            "parameters": [],
+                            "returnType": "void"
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "unblock",
+                            "parameters": [],
+                            "returnType": "void"
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in BlockUI component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "blocked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Controls the blocked state."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "containerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the container element."
+                        },
+                        {
+                            "name": "containerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the container element."
+                        },
+                        {
+                            "name": "fullScreen",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the whole document gets blocked."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BlockUIPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "template",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of mask."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlocked",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Fired when the element gets blocked."
+                        },
+                        {
+                            "name": "onUnblocked",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Fired when the element gets unblocked."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "BlockUIPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BlockUIProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BlockUIState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "BlockUIPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BlockUIPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BlockUIPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "BlockUIState": {
+                    "description": "Defines current inline state in BlockUI component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "blocked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current blocked state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "BlockUIPassThroughType": {
+                    "values": "PassThroughType<T, BlockUIPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "breadcrumb": {
+        "description": "Breadcrumb provides contextual information about page hierarchy.\n\n[Live Demo](https://www.primereact.org/breadcrumb/)",
+        "components": {
+            "BreadCrumb": {
+                "description": "Breadcrumb provides contextual information about page hierarchy.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in BreadCrumb component. In addition to these, all properties of HTMLElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "home",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "default": "",
+                            "description": "MenuItem configuration for the home icon."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "separatorIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<BreadCrumbProps>",
+                            "default": "",
+                            "description": "Icon of the separator."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "BreadCrumbPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "BreadCrumbProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "BreadCrumbPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "separatorIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BreadCrumbPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the separator icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "BreadCrumbPassThroughType": {
+                    "values": "PassThroughType<T, BreadCrumbPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "button": {
+        "description": "Button is an extension to standard button element with icons and theming.\n\n[Live Demo](https://www.primereact.org/button/)",
+        "components": {
+            "Button": {
+                "description": "Button is an extension to standard button element with icons and theming.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in Button component. In addition to these, all properties of HTMLButtonElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Value of the badge."
+                        },
+                        {
+                            "name": "badgeClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the badge."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ButtonProps>",
+                            "default": "",
+                            "description": "Name of the icon or JSX.Element for icon."
+                        },
+                        {
+                            "name": "iconPos",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "left",
+                            "description": "Position of the icon, valid values are \"left\", \"right\", \"top\" and \"bottom\"."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Text of the button."
+                        },
+                        {
+                            "name": "link",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a link style to the button."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Display loading icon of the button"
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ButtonProps>",
+                            "default": "",
+                            "description": "Name of the loading icon or JSX.Element for loading icon."
+                        },
+                        {
+                            "name": "outlined",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a border class without a background initially."
+                        },
+                        {
+                            "name": "plain",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a plain textual class to the button without a background initially."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "raised",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a shadow to indicate elevation."
+                        },
+                        {
+                            "name": "rounded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a circular border radius to the button."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"success\" | \"help\" | \"warning\" | \"info\" | \"secondary\" | \"danger\" | \"contrast\"",
+                            "default": "",
+                            "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"help\", \"contrast\"."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"small\" | \"large\"",
+                            "default": "",
+                            "description": "Defines the size of the button, valid values are \"small\" and \"large\"."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a textual class to the button without a background initially."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When present, it specifies that the element should be visible."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ButtonProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ButtonContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the badge's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes to the Tooltip component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ButtonContext": {
+                    "description": "Defines current options in Button component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the element as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ButtonPassThroughType": {
+                    "values": "PassThroughType<T, ButtonPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "buttongroup": {
+        "description": "A set of Buttons can be displayed together using the ButtonGroup component.\n\n[Live Demo](https://www.primereact.org/button/)",
+        "components": {
+            "ButtonGroup": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "",
+                    "values": []
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ButtonGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ButtonGroupProps",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ButtonGroupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonGroupPassThroughOptionType",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ButtonGroupPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ButtonGroupProps": {
+                    "description": "Defines valid properties in ButtonGroup component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonGroupPassThroughOptions",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ButtonGroupPassThroughOptionType": {
+                    "values": "ButtonGroupPassThroughAttributes | Function | string | null | undefined"
+                }
+            }
+        }
+    },
+    "calendar": {
+        "description": "Calendar also known as DatePicker, is a form component to work with dates.\n\n[Live Demo](https://www.primereact.org/calendar/)",
+        "components": {
+            "Calendar": {
+                "description": "Calendar also known as DatePicker, is a form component to work with dates.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getCurrentDateTime",
+                            "parameters": [],
+                            "returnType": "TValue",
+                            "description": "Used to get the current date."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        },
+                        {
+                            "name": "getViewDate",
+                            "parameters": [],
+                            "returnType": "TValue",
+                            "description": "Used to get the view date."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the overlay."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the overlay."
+                        },
+                        {
+                            "name": "updateViewDate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "null | SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                },
+                                {
+                                    "name": "value",
+                                    "type": "Nullable<TValue>",
+                                    "description": "New date."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to update the current view date."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Calendar component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "ARIA label for screenreader support."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "clearButtonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "p-secondary-button",
+                            "description": "Style class of the clear button."
+                        },
+                        {
+                            "name": "dateFormat",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "mm/dd/yy",
+                            "description": "Format of the date."
+                        },
+                        {
+                            "name": "decrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "default": "",
+                            "description": "Icon to show in each of the decrement buttons."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, disables the component."
+                        },
+                        {
+                            "name": "disabledDates",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date[]",
+                            "default": "",
+                            "description": "Array with dates to disable."
+                        },
+                        {
+                            "name": "disabledDays",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "default": "",
+                            "description": "Array with disabled weekday numbers."
+                        },
+                        {
+                            "name": "enabledDates",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date[]",
+                            "default": "",
+                            "description": "Array with dates to enable (all other dates will be disabled)."
+                        },
+                        {
+                            "name": "hideOnDateTimeSelect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to hide the overlay on date selection when showTime is enabled."
+                        },
+                        {
+                            "name": "hideOnRangeSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether to hide the overlay on date selection is completed when selectionMode is range."
+                        },
+                        {
+                            "name": "hourFormat",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"12\" | \"24\"",
+                            "default": "24",
+                            "description": "Specifies 12 or 24 hour format."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "default": "",
+                            "description": "Icon of the calendar button."
+                        },
+                        {
+                            "name": "iconPos",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "right",
+                            "description": "Icon position of the calendar button."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "incrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "default": "",
+                            "description": "Icon to show in each of the increment buttons."
+                        },
+                        {
+                            "name": "inline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, displays the calendar as inline instead of an overlay."
+                        },
+                        {
+                            "name": "inputClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the input element."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "keepInvalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Keep invalid value when input blur."
+                        },
+                        {
+                            "name": "locale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "en",
+                            "description": "Used to display the values ​​of the locale object defined in the Locale API."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Mask pattern for input element."
+                        },
+                        {
+                            "name": "maskSlotChar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "_",
+                            "description": "Placeholder character in mask."
+                        },
+                        {
+                            "name": "maxDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date",
+                            "default": "",
+                            "description": "The maximum selectable date."
+                        },
+                        {
+                            "name": "maxDateCount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum number of selectable dates in multiple mode."
+                        },
+                        {
+                            "name": "minDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date",
+                            "default": "",
+                            "description": "The minimum selectable date."
+                        },
+                        {
+                            "name": "monthNavigator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the month should be rendered as a dropdown instead of text."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "nextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "default": "",
+                            "description": "Icon to show in the next button."
+                        },
+                        {
+                            "name": "numberOfMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Number of months to display."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the datetimepicker panel."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the datetimepicker panel."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text for the input."
+                        },
+                        {
+                            "name": "prevIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "default": "",
+                            "description": "Icon to show in the previous button."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnlyInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, prevents entering the date manually with keyboard."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TMode",
+                            "default": "single",
+                            "description": "Specifies the selection mode either \"single\", \"range\", or \"multiple\";"
+                        },
+                        {
+                            "name": "selectOtherMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true."
+                        },
+                        {
+                            "name": "shortYearCutoff",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "+10",
+                            "description": "The cutoff year for determining the century for a date."
+                        },
+                        {
+                            "name": "showButtonBar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display today and clear buttons at the footer"
+                        },
+                        {
+                            "name": "showIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, displays a button with icon next to input."
+                        },
+                        {
+                            "name": "showMillisec",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show the milliseconds in time picker."
+                        },
+                        {
+                            "name": "showMinMaxRange",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Controls whether navigation beyond minimum and maximum dates is restricted. When true, navigation is limited to the min/max date range."
+                        },
+                        {
+                            "name": "showOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When disabled, datepicker will not be visible with input focus."
+                        },
+                        {
+                            "name": "showOtherMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option."
+                        },
+                        {
+                            "name": "showSeconds",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show the seconds in time picker."
+                        },
+                        {
+                            "name": "showTime",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display timepicker."
+                        },
+                        {
+                            "name": "showWeek",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, calendar will show week numbers."
+                        },
+                        {
+                            "name": "stepHour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Hours to change per step."
+                        },
+                        {
+                            "name": "stepMillisec",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Milliseconds to change per step."
+                        },
+                        {
+                            "name": "stepMinute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Minutes to change per step."
+                        },
+                        {
+                            "name": "stepSecond",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Seconds to change per step."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "timeOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display timepicker only."
+                        },
+                        {
+                            "name": "todayButtonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "p-secondary-button",
+                            "description": "Style class of the today button."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "touchUI",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, calendar overlay is displayed as optimized for touch devices."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Nullable<TValue>",
+                            "default": "null",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "view",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"month\" | \"year\" | \"date\"",
+                            "default": "date",
+                            "description": "Type of view to display."
+                        },
+                        {
+                            "name": "viewDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Nullable<Date>",
+                            "default": "",
+                            "description": "Date instance whose month and year are used to display the calendar."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the overlay."
+                        },
+                        {
+                            "name": "yearNavigator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the year should be rendered as a dropdown instead of text."
+                        },
+                        {
+                            "name": "yearRange",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020)."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "dateTemplate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarDateTemplateEvent",
+                                    "description": "Custom date template event"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a date information and returns the cell content in datepicker."
+                        },
+                        {
+                            "name": "decadeTemplate",
+                            "parameters": [
+                                {
+                                    "name": "yearValues",
+                                    "optional": false,
+                                    "type": "number[]",
+                                    "description": "The values of years"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a navigator information and returns the decade selections in the panel."
+                        },
+                        {
+                            "name": "footerTemplate",
+                            "parameters": [],
+                            "returnType": "ReactNode",
+                            "description": "Custom footer template of overlay."
+                        },
+                        {
+                            "name": "formatDateTime",
+                            "parameters": [
+                                {
+                                    "name": "date",
+                                    "optional": false,
+                                    "type": "Date",
+                                    "description": "Formating date"
+                                }
+                            ],
+                            "returnType": "string",
+                            "description": "Function for overriding default behavior that formats a Date to the string representation."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "parameters": [],
+                            "returnType": "ReactNode",
+                            "description": "Custom header template of overlay."
+                        },
+                        {
+                            "name": "monthNavigatorTemplate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarMonthNavigatorTemplateEvent",
+                                    "description": "Custom month navigator template event."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a navigator information and returns the navigator element in header."
+                        },
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on blur event of input field."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<TValue, SyntheticEvent<Element, Event>>",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when value changes."
+                        },
+                        {
+                            "name": "onClearButtonClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLButtonElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when clear button is clicked."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on focus event of input field."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel or modal becomes hidden."
+                        },
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on input event of input field."
+                        },
+                        {
+                            "name": "onMonthChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarMonthChangeEvent",
+                                    "description": "Custom month change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when month changes."
+                        },
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarSelectEvent",
+                                    "description": "Custom select event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a date is selected."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel or modal becomes visible."
+                        },
+                        {
+                            "name": "onTodayButtonClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLButtonElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when today button is clicked."
+                        },
+                        {
+                            "name": "onViewDateChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarViewChangeEvent",
+                                    "description": "Custom view change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the displayed month/year is changed."
+                        },
+                        {
+                            "name": "onVisibleChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarVisibleChangeEvent",
+                                    "description": "Custom visible change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when visible is changed."
+                        },
+                        {
+                            "name": "parseDateTime",
+                            "parameters": [
+                                {
+                                    "name": "text",
+                                    "optional": false,
+                                    "type": "string",
+                                    "description": "Parsing date"
+                                }
+                            ],
+                            "returnType": "Date",
+                            "description": "Function for overriding default behavior that parses text into the Date."
+                        },
+                        {
+                            "name": "yearNavigatorTemplate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarYearNavigatorTemplateEvent",
+                                    "description": "Custom year navigator template event"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a navigator information and returns the navigator in header."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "CalendarMonthChangeEvent": {
+                    "description": "Custom month change event.",
+                    "relatedProp": "onMonthChange",
+                    "props": [
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of month"
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of year"
+                        }
+                    ]
+                },
+                "CalendarViewChangeEvent": {
+                    "description": "Custom view change event",
+                    "relatedProp": "onViewDateChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Date",
+                            "description": "New date"
+                        }
+                    ]
+                },
+                "CalendarDateTemplateEvent": {
+                    "description": "Custom date template event",
+                    "relatedProp": "dateTemplate",
+                    "props": [
+                        {
+                            "name": "day",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current day"
+                        },
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current month"
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current year"
+                        },
+                        {
+                            "name": "otherMonth",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the date belongs to the other month"
+                        },
+                        {
+                            "name": "today",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the day is today"
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the date is selectable"
+                        }
+                    ]
+                },
+                "CalendarVisibleChangeEvent": {
+                    "description": "Custom visible change event",
+                    "relatedProp": "onVisibleChange",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the overlay is opened."
+                        },
+                        {
+                            "name": "type",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | \"outside\" | \"dateselect\"",
+                            "description": "The type of visible action when the overlay is visible/hidden."
+                        }
+                    ]
+                },
+                "CalendarMonthNavigatorTemplateEvent": {
+                    "description": "Custom month navigator template event",
+                    "relatedProp": "monthNavigatorTemplate",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the navigator."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | string | number",
+                            "description": "The value of the current navigator"
+                        },
+                        {
+                            "name": "names",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "The names of the current navigator"
+                        },
+                        {
+                            "name": "options",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "The options of the current navigator"
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "The default navigator component"
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarProps<\"single\", Date>",
+                            "description": "The props of Calendar component"
+                        }
+                    ]
+                },
+                "CalendarYearNavigatorTemplateEvent": {
+                    "description": "Custom year navigator template event",
+                    "relatedProp": "yearNavigatorTemplate",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the navigator."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | string | number",
+                            "description": "The value of the current navigator"
+                        },
+                        {
+                            "name": "names",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "The names of the current navigator"
+                        },
+                        {
+                            "name": "options",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "The options of the current navigator"
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "The default navigator component"
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarProps<\"single\", Date>",
+                            "description": "The props of Calendar component"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "CalendarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarProps<\"single\", Date>"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CalendarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the InputText component."
+                        },
+                        {
+                            "name": "dropdownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "groupContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the group container's DOM element."
+                        },
+                        {
+                            "name": "group",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the group's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "previousButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "previousIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the previous icon's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "monthTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the month title's DOM element."
+                        },
+                        {
+                            "name": "yearTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the year title's DOM element."
+                        },
+                        {
+                            "name": "decadeTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the decade title's DOM element."
+                        },
+                        {
+                            "name": "decadeTitleText",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the decade title text's DOM element."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "nextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the next icon's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableElement>>",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "tableHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the table header's DOM element."
+                        },
+                        {
+                            "name": "tableHeaderRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the table header row's DOM element."
+                        },
+                        {
+                            "name": "weekHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the week header's DOM element."
+                        },
+                        {
+                            "name": "tableHeaderCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the table header cell's DOM element."
+                        },
+                        {
+                            "name": "weekLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the week label's DOM element."
+                        },
+                        {
+                            "name": "weekDay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the week day's DOM element."
+                        },
+                        {
+                            "name": "tableBody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the table body's DOM element."
+                        },
+                        {
+                            "name": "tableBodyRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the table body row's DOM element."
+                        },
+                        {
+                            "name": "weekNumber",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the week number's DOM element."
+                        },
+                        {
+                            "name": "weekLabelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the week label container's DOM element."
+                        },
+                        {
+                            "name": "day",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the day's DOM element."
+                        },
+                        {
+                            "name": "dayLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the day label's DOM element."
+                        },
+                        {
+                            "name": "monthPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the month picker's DOM element."
+                        },
+                        {
+                            "name": "month",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the month's DOM element."
+                        },
+                        {
+                            "name": "yearPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the year picker's DOM element."
+                        },
+                        {
+                            "name": "year",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the year's DOM element."
+                        },
+                        {
+                            "name": "timePicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the time picker's DOM element."
+                        },
+                        {
+                            "name": "hourPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hour picker's DOM element."
+                        },
+                        {
+                            "name": "incrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the increment icon's DOM element."
+                        },
+                        {
+                            "name": "incrementButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the increment button's DOM element."
+                        },
+                        {
+                            "name": "decrementButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the decrement button's DOM element."
+                        },
+                        {
+                            "name": "decrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the increment icon's DOM element."
+                        },
+                        {
+                            "name": "hour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the hour's DOM element."
+                        },
+                        {
+                            "name": "separatorContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the separatorc ontainer's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "minutePicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the minute picker's DOM element."
+                        },
+                        {
+                            "name": "minute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the minute's DOM element."
+                        },
+                        {
+                            "name": "secondPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the second picker's DOM element."
+                        },
+                        {
+                            "name": "second",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the second's DOM element."
+                        },
+                        {
+                            "name": "ampmPicker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the ampm picker's DOM element."
+                        },
+                        {
+                            "name": "ampm",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the ampm's DOM element."
+                        },
+                        {
+                            "name": "buttonbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the buttonbar's DOM element."
+                        },
+                        {
+                            "name": "todayButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "clearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "select",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLSelectElement>>",
+                            "description": "Uses to pass attributes to the select's DOM element."
+                        },
+                        {
+                            "name": "option",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughType<HTMLAttributes<HTMLOptionElement>>",
+                            "description": "Uses to pass attributes to the option's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CalendarState": {
+                    "description": "Defines current inline state in Calendar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "viewDate",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<Date>",
+                            "description": "Current viewDate state."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CalendarContext": {
+                    "description": "Defines current options in Calendar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "date",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | string | string[] | Date | Date[]",
+                            "description": "Current date."
+                        },
+                        {
+                            "name": "today",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current today state of the calendar's day."
+                        },
+                        {
+                            "name": "otherMonth",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current other month state of the calendar's day."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selected state of the calendar's day or month or year."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the calendar's day or month or year."
+                        },
+                        {
+                            "name": "month",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarMonthOptions",
+                            "description": "Current month state."
+                        },
+                        {
+                            "name": "monthIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current month index state."
+                        },
+                        {
+                            "name": "year",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CalendarYearOptions",
+                            "description": "Current year state."
+                        },
+                        {
+                            "name": "yearIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current year index state."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CalendarMonthOptions": {
+                    "description": "Defines cuurent month options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Month value."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Selectable state of the month."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CalendarYearOptions": {
+                    "description": "Defines current year options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Year value."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Selectable state of the month."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CalendarSelectEvent": {
+                    "description": "Custom Select event",
+                    "relatedProp": "onSelect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<string | Date | Date[]>",
+                            "description": "Selected date"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CalendarBaseProps": {
+                    "description": "Defines valid base properties in Calendar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "ARIA label for screenreader support."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "clearButtonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the clear button."
+                        },
+                        {
+                            "name": "dateFormat",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Format of the date."
+                        },
+                        {
+                            "name": "decrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "description": "Icon to show in each of the decrement buttons."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When specified, disables the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "disabledDates",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date[]",
+                            "description": "Array with dates to disable."
+                        },
+                        {
+                            "name": "disabledDays",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "description": "Array with disabled weekday numbers."
+                        },
+                        {
+                            "name": "enabledDates",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date[]",
+                            "description": "Array with dates to enable (all other dates will be disabled)."
+                        },
+                        {
+                            "name": "hideOnDateTimeSelect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to hide the overlay on date selection when showTime is enabled."
+                        },
+                        {
+                            "name": "hideOnRangeSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to hide the overlay on date selection is completed when selectionMode is range."
+                        },
+                        {
+                            "name": "hourFormat",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"12\" | \"24\"",
+                            "description": "Specifies 12 or 24 hour format."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "description": "Icon of the calendar button."
+                        },
+                        {
+                            "name": "iconPos",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "description": "Icon position of the calendar button."
+                        },
+                        {
+                            "name": "incrementIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "description": "Icon to show in each of the increment buttons."
+                        },
+                        {
+                            "name": "inline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, displays the calendar as inline instead of an overlay."
+                        },
+                        {
+                            "name": "inputClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the input element."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "keepInvalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Keep invalid value when input blur."
+                        },
+                        {
+                            "name": "locale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Used to display the values ​​of the locale object defined in the Locale API."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Mask pattern for input element."
+                        },
+                        {
+                            "name": "maskSlotChar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Placeholder character in mask."
+                        },
+                        {
+                            "name": "maxDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date",
+                            "description": "The maximum selectable date."
+                        },
+                        {
+                            "name": "maxDateCount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Maximum number of selectable dates in multiple mode."
+                        },
+                        {
+                            "name": "minDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Date",
+                            "description": "The minimum selectable date."
+                        },
+                        {
+                            "name": "monthNavigator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the month should be rendered as a dropdown instead of text."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "nextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "description": "Icon to show in the next button."
+                        },
+                        {
+                            "name": "numberOfMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of months to display."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the datetimepicker panel."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the datetimepicker panel."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Placeholder text for the input."
+                        },
+                        {
+                            "name": "prevIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CalendarProps<\"single\", Date>>",
+                            "description": "Icon to show in the previous button."
+                        },
+                        {
+                            "name": "readOnlyInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When specified, prevents entering the date manually with keyboard."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When present, it specifies that an input field must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "selectOtherMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true."
+                        },
+                        {
+                            "name": "shortYearCutoff",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The cutoff year for determining the century for a date."
+                        },
+                        {
+                            "name": "showButtonBar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to display today and clear buttons at the footer"
+                        },
+                        {
+                            "name": "showIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, displays a button with icon next to input."
+                        },
+                        {
+                            "name": "showMillisec",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to show the milliseconds in time picker."
+                        },
+                        {
+                            "name": "showMinMaxRange",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Controls whether navigation beyond minimum and maximum dates is restricted. When true, navigation is limited to the min/max date range."
+                        },
+                        {
+                            "name": "showOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When disabled, datepicker will not be visible with input focus."
+                        },
+                        {
+                            "name": "showOtherMonths",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option."
+                        },
+                        {
+                            "name": "showSeconds",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to show the seconds in time picker."
+                        },
+                        {
+                            "name": "showTime",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to display timepicker."
+                        },
+                        {
+                            "name": "showWeek",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, calendar will show week numbers."
+                        },
+                        {
+                            "name": "stepHour",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Hours to change per step."
+                        },
+                        {
+                            "name": "stepMillisec",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Milliseconds to change per step."
+                        },
+                        {
+                            "name": "stepMinute",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Minutes to change per step."
+                        },
+                        {
+                            "name": "stepSecond",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Seconds to change per step."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "timeOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to display timepicker only."
+                        },
+                        {
+                            "name": "todayButtonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the today button."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "touchUI",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, calendar overlay is displayed as optimized for touch devices."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "view",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"month\" | \"year\" | \"date\"",
+                            "description": "Type of view to display."
+                        },
+                        {
+                            "name": "viewDate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Nullable<Date>",
+                            "description": "Date instance whose month and year are used to display the calendar."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Specifies the visibility of the overlay."
+                        },
+                        {
+                            "name": "yearNavigator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the year should be rendered as a dropdown instead of text."
+                        },
+                        {
+                            "name": "yearRange",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020)."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CalendarPassThroughOptions",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "formatDateTime",
+                            "parameters": [
+                                {
+                                    "name": "date",
+                                    "optional": false,
+                                    "type": "Date",
+                                    "description": "Formating date"
+                                }
+                            ],
+                            "returnType": "string",
+                            "description": "Function for overriding default behavior that formats a Date to the string representation."
+                        },
+                        {
+                            "name": "parseDateTime",
+                            "parameters": [
+                                {
+                                    "name": "text",
+                                    "optional": false,
+                                    "type": "string",
+                                    "description": "Parsing date"
+                                }
+                            ],
+                            "returnType": "Date",
+                            "description": "Function for overriding default behavior that parses text into the Date."
+                        },
+                        {
+                            "name": "dateTemplate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarDateTemplateEvent",
+                                    "description": "Custom date template event"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a date information and returns the cell content in datepicker."
+                        },
+                        {
+                            "name": "decadeTemplate",
+                            "parameters": [
+                                {
+                                    "name": "yearValues",
+                                    "optional": false,
+                                    "type": "number[]",
+                                    "description": "The values of years"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a navigator information and returns the decade selections in the panel."
+                        },
+                        {
+                            "name": "footerTemplate",
+                            "parameters": [],
+                            "returnType": "ReactNode",
+                            "description": "Custom footer template of overlay."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "parameters": [],
+                            "returnType": "ReactNode",
+                            "description": "Custom header template of overlay."
+                        },
+                        {
+                            "name": "monthNavigatorTemplate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarMonthNavigatorTemplateEvent",
+                                    "description": "Custom month navigator template event."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a navigator information and returns the navigator element in header."
+                        },
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on blur event of input field."
+                        },
+                        {
+                            "name": "onClearButtonClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLButtonElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when clear button is clicked."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on focus event of input field."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel or modal becomes hidden."
+                        },
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on input event of input field."
+                        },
+                        {
+                            "name": "onMonthChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarMonthChangeEvent",
+                                    "description": "Custom month change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when month changes."
+                        },
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarSelectEvent",
+                                    "description": "Custom select event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a date is selected."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel or modal becomes visible."
+                        },
+                        {
+                            "name": "onTodayButtonClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLButtonElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when today button is clicked."
+                        },
+                        {
+                            "name": "onViewDateChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarViewChangeEvent",
+                                    "description": "Custom view change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the displayed month/year is changed."
+                        },
+                        {
+                            "name": "onVisibleChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarVisibleChangeEvent",
+                                    "description": "Custom visible change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when visible is changed."
+                        },
+                        {
+                            "name": "yearNavigatorTemplate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CalendarYearNavigatorTemplateEvent",
+                                    "description": "Custom year navigator template event"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets a navigator information and returns the navigator in header."
+                        }
+                    ],
+                    "extendedBy": "CalendarProps"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CalendarPassThroughType": {
+                    "values": "PassThroughType<T, CalendarPassThroughMethodOptions>"
+                },
+                "CalendarPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                },
+                "CalendarSelectionMode": {
+                    "values": "\"single\" | \"range\" | \"multiple\""
+                }
+            }
+        }
+    },
+    "card": {
+        "description": "Card is a flexible container component.\n\n[Live Demo](https://www.primereact.org/card/)",
+        "components": {
+            "Card": {
+                "description": "Card is a flexible container component.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in Card component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Footer of the card."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Header of the card."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "subTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Secondary title of the card."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Title of the card."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "CardPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CardProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CardPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "body",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the body's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "subTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the subtitle's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CardPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CardPassThroughType": {
+                    "values": "PassThroughType<T, CardPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "carousel": {
+        "description": "Carousel is a content slider featuring various customization options.\n\n[Live Demo](https://www.primereact.org/carousel)",
+        "components": {
+            "Carousel": {
+                "description": "Carousel is a content slider featuring various customization options.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "startAutoplay",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to start the autoplay if it is currently stopped."
+                        },
+                        {
+                            "name": "stopAutoplay",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to stop the autoplay if it is currently started."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Carousel component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoplayInterval",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Time in milliseconds to scroll items automatically."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "circular",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if scrolling would be infinite."
+                        },
+                        {
+                            "name": "containerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the viewport container."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of main content."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Label of footer."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Label of header."
+                        },
+                        {
+                            "name": "indicatorsContentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the paginator items."
+                        },
+                        {
+                            "name": "nextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CarouselProps>",
+                            "default": "",
+                            "description": "Icon for the next button by orientation."
+                        },
+                        {
+                            "name": "numScroll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Number of items to scroll."
+                        },
+                        {
+                            "name": "numVisible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Number of items per page."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Specifies the layout of the component, valid values are \"horizontal\" and \"vertical\"."
+                        },
+                        {
+                            "name": "page",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the first item."
+                        },
+                        {
+                            "name": "prevIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CarouselProps>",
+                            "default": "",
+                            "description": "Icon for the previous button by orientation."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "responsiveOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselResponsiveOption[]",
+                            "default": "",
+                            "description": "An array of options for responsive design."
+                        },
+                        {
+                            "name": "showIndicators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display indicator container."
+                        },
+                        {
+                            "name": "showNavigators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display navigation buttons in container."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of objects to display."
+                        },
+                        {
+                            "name": "verticalViewPortHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "300px",
+                            "description": "Height of the viewport in vertical layout."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "itemTemplate",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current item"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets an item in the value and returns the content for it."
+                        },
+                        {
+                            "name": "onPageChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CarouselPageChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke after scroll."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "CarouselPageChangeEvent": {
+                    "description": "Custom complete method event.",
+                    "relatedProp": "onPageChange",
+                    "props": [
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Value of the new page."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "CarouselPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CarouselProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CarouselState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CarouselContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CarouselPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "previousButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the previous button's DOM element."
+                        },
+                        {
+                            "name": "previousButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the previous button icon's DOM element."
+                        },
+                        {
+                            "name": "itemsContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the items content's DOM element."
+                        },
+                        {
+                            "name": "itemsContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the items container's DOM element."
+                        },
+                        {
+                            "name": "itemCloned",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item cloned's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the next button's DOM element."
+                        },
+                        {
+                            "name": "nextButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the next button icon's DOM element."
+                        },
+                        {
+                            "name": "indicators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the indicators's DOM element."
+                        },
+                        {
+                            "name": "indicator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the indicator's DOM element."
+                        },
+                        {
+                            "name": "indicatorButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the indicator button's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CarouselPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CarouselState": {
+                    "description": "Defines current inline state in Carousel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "numVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of items per page as a number."
+                        },
+                        {
+                            "name": "numScroll",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of items to scroll as a number."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the first item."
+                        },
+                        {
+                            "name": "totalShiftedItems",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total shifted items' count as a number."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CarouselContext": {
+                    "description": "Defines current inline options in Carousel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of the indicator as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CarouselResponsiveOption": {
+                    "description": "Custom responsive option",
+                    "relatedProp": "responsiveOptions",
+                    "props": [
+                        {
+                            "name": "breakpoint",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The breakpoint to define the maximum width boundary."
+                        },
+                        {
+                            "name": "numVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of items per page."
+                        },
+                        {
+                            "name": "numScroll",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of items to scroll."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CarouselPassThroughType": {
+                    "values": "PassThroughType<T, CarouselPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "cascadeselect": {
+        "description": "CascadeSelect is a form component to select a value from a nested structure of options.\n\n[Live Demo](https://www.primereact.org/cascadeselect/)",
+        "components": {
+            "CascadeSelect": {
+                "description": "CascadeSelect is a form component to select a value from a nested structure of options.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getLabel",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get label element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in CascadeSelect component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A property to uniquely identify an option."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CascadeSelectProps>",
+                            "default": "",
+                            "description": "Icon of the dropdown icon."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of items."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Display loading icon."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CascadeSelectProps>",
+                            "default": "",
+                            "description": "Name of the loading icon or JSX.Element for loading icon."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "optionGroupChildren",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Property name or getter function to retrieve the items of a group."
+                        },
+                        {
+                            "name": "optionGroupIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CascadeSelectProps>",
+                            "default": "",
+                            "description": "Icon of the option group."
+                        },
+                        {
+                            "name": "optionGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option group."
+                        },
+                        {
+                            "name": "optionLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectItemOptionsType",
+                            "default": "",
+                            "description": "An array of selectitems to display as the available options."
+                        },
+                        {
+                            "name": "optionValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the value of an option, defaults to the option itself when not defined."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the cascadeselect panel."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the cascadeselect panel."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Default text to display when no option is selected."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "400px",
+                            "description": "Maximum height of the options panel on responsive mode."
+                        },
+                        {
+                            "name": "showClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBeforeHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the overlay is hidden."
+                        },
+                        {
+                            "name": "onBeforeShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the overlay is shown."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CascadeSelectChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change"
+                        },
+                        {
+                            "name": "onGroupChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CascadeSelectGroupChangeEvent",
+                                    "description": "Custom group change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a group changes."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "CascadeSelectChangeEvent": {
+                    "description": "Custom change event",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "New value"
+                        }
+                    ],
+                    "extendedBy": "CascadeSelectGroupChangeEvent"
+                },
+                "CascadeSelectGroupChangeEvent": {
+                    "description": "Custom group change event.",
+                    "relatedProp": "onGroupChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "New value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "CascadeSelectPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CascadeSelectProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CascadeSelectState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CascadeSelectContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CascadeSelectState": {
+                    "description": "Defines current inline state in CascadeSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "attributeSelector",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current overlay attributeSelector state as a string."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "For items, this is the state of the item."
+                        },
+                        {
+                            "name": "grouped",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "For items, this is whether it is a group item or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CascadeSelectContext": {
+                    "description": "Defines current inline context in CascadeSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "AppendToType",
+                            "description": "This option allows components with overlays like dropdowns or popups to be mounted into either the component or any DOM element, such as document body and self."
+                        },
+                        {
+                            "name": "styleContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StyleContainerType",
+                            "description": "This option allows  `useStyle`  to insert dynamic CSS styles into a specific container. This is useful when styles need to be scoped such as in a Shadow DOM."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. When autoZIndex is false, each group increments its zIndex within itself."
+                        },
+                        {
+                            "name": "cssTransition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "PrimeReact components utilize \"react-transition-group\" internally to implement animations. Setting \"cssTransition\" to \"false\" disables all animations."
+                        },
+                        {
+                            "name": "filterMatchModeOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FilterMatchModeOptions",
+                            "description": "Default filter modes to display on DataTable filter menus."
+                        },
+                        {
+                            "name": "hideOverlaysOnDocumentScrolling",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the overlay follow the scroll."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputStyleType",
+                            "description": "Input fields have two styles: default (outlined with borders) and filled (background-colored). Applying 'p-input-filled' to an input's ancestor enables the filled style."
+                        },
+                        {
+                            "name": "locale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The locale configuration sets up the language and region specific preferences."
+                        },
+                        {
+                            "name": "nonce",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The nonce value to use on dynamically generated style elements."
+                        },
+                        {
+                            "name": "nullSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Determines how null values are sorted."
+                        },
+                        {
+                            "name": "ripple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Ripple is an optional animation for the supported components such as buttons."
+                        },
+                        {
+                            "name": "zIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Partial<ZIndexOptions>",
+                            "description": "ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. When autoZIndex is false, each group increments its zIndex within itself. Each property is optional, so when autoZIndex is enabled you can set the z-index for any component type, and the rest will be calculated automatically."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PrimeReactPTOptions",
+                            "description": "This option allows to direct implementation of all relevant attributes (e.g., style, classnames) within the respective HTML tag."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, it removes all of components styles in the core."
+                        },
+                        {
+                            "name": "setAppendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<AppendToType>>",
+                            "description": "Sets the \"appendTo\" state of the context."
+                        },
+                        {
+                            "name": "setStyleContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<StyleContainerType>>",
+                            "description": "Sets the \"styleContainer\" state of the context."
+                        },
+                        {
+                            "name": "setAutoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"autoZIndex\" state of the context."
+                        },
+                        {
+                            "name": "setCssTransition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"cssTransition\" state of the context."
+                        },
+                        {
+                            "name": "setFilterMatchModeOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<FilterMatchModeOptions>>",
+                            "description": "Sets the \"filterMatchModeOptions\" state of the context."
+                        },
+                        {
+                            "name": "setHideOverlaysOnDocumentScrolling",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"hideOverlaysOnDocumentScrolling\" state of the context."
+                        },
+                        {
+                            "name": "setInputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<InputStyleType>>",
+                            "description": "Sets the \"inputStyle\" state of the context."
+                        },
+                        {
+                            "name": "setLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<string>>",
+                            "description": "Sets the \"locale\" state of the context."
+                        },
+                        {
+                            "name": "setNonce",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<string>>",
+                            "description": "Sets the \"nonce\" state of the context."
+                        },
+                        {
+                            "name": "setNullSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<number>>",
+                            "description": "Sets the \"nullSortOrder\" state of the context."
+                        },
+                        {
+                            "name": "setRipple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<boolean>>",
+                            "description": "Sets the \"ripple\" state of the context."
+                        },
+                        {
+                            "name": "setZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<ZIndexOptions>>",
+                            "description": "Sets the \"zIndex\" state of the context."
+                        },
+                        {
+                            "name": "setPt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Dispatch<SetStateAction<PrimeReactPTOptions>>",
+                            "description": "Sets the \"pt\" state of the context."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Label of the currently selected item"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "changeTheme",
+                            "parameters": [
+                                {
+                                    "name": "theme",
+                                    "optional": true,
+                                    "type": "string"
+                                },
+                                {
+                                    "name": "newTheme",
+                                    "optional": true,
+                                    "type": "string",
+                                    "description": "The name of the new theme to be applied. Example 'md-dark-deeppurple'"
+                                },
+                                {
+                                    "name": "linkElementId",
+                                    "optional": true,
+                                    "type": "string",
+                                    "description": "The id of the link element to be updated."
+                                },
+                                {
+                                    "name": "callback",
+                                    "optional": true,
+                                    "type": "Function",
+                                    "description": "Callback to invoke when the theme change is completed."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "This method is used to change the theme dynamically."
+                        }
+                    ],
+                    "extendedTypes": "APIOptions"
+                },
+                "CascadeSelectPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "dropdownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the dropdown button's DOM element."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the dropdown icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "sublist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the sub-list's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "optionGroupIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the optionGroup icon's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hidden selected message's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CascadeSelectPassThroughType": {
+                    "values": "PassThroughType<T, CascadeSelectPassThroughMethodOptions>"
+                },
+                "CascadeSelectPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "chart": {
+        "description": "Chart components are based on Chart.js, an open source HTML5 based charting library.\n\n[Live Demo](https://www.primereact.org/chart)",
+        "components": {
+            "Chart": {
+                "description": "Chart components are based on Chart.js, an open source HTML5 based charting library.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "generateLegend",
+                            "parameters": [],
+                            "returnType": "string",
+                            "description": "Used to generate legend."
+                        },
+                        {
+                            "name": "getBase64Image",
+                            "parameters": [],
+                            "returnType": "any",
+                            "description": "Used to get base64 image."
+                        },
+                        {
+                            "name": "getCanvas",
+                            "parameters": [],
+                            "returnType": "HTMLCanvasElement",
+                            "description": "Used to get canvas element."
+                        },
+                        {
+                            "name": "getChart",
+                            "parameters": [],
+                            "returnType": "any",
+                            "description": "Used to get chart instance."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "refresh",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Redraws the graph."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Chart component.",
+                    "values": [
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "ARIA label for the chart canvas. Defaults to options.plugins.title.text if available."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "data",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Data to display."
+                        },
+                        {
+                            "name": "height",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Height of the chart in non-responsive mode."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Options to customize the chart."
+                        },
+                        {
+                            "name": "plugins",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "Used to custom plugins of the chart."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChartPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Type of the chart."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "width",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Width of the chart in non-responsive mode."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ChartPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChartProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ChartPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChartPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "canvas",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChartPassThroughType<HTMLAttributes<HTMLCanvasElement>>",
+                            "description": "Uses to pass attributes to the canvas's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ChartPassThroughType": {
+                    "values": "PassThroughType<T, ChartPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "checkbox": {
+        "description": "Checkbox is an extension to standard checkbox element with skinning capabilities.\n\n[Live Demo](https://www.primereact.org/checkbox/)",
+        "components": {
+            "Checkbox": {
+                "description": "Checkbox is an extension to standard checkbox element with skinning capabilities.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies whether a checkbox should be checked or not."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element value cannot be altered."
+                        },
+                        {
+                            "name": "falseValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "false",
+                            "description": "Value in unchecked state."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<CheckboxProps>",
+                            "default": "",
+                            "description": "Icon to display in checkbox."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the checkbox element ."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the value cannot be changed."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "false",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "trueValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "true",
+                            "description": "Value in checked state."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "CheckboxChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change"
+                        },
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLInputElement, MouseEvent> & Object",
+                                    "description": "click event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        },
+                        {
+                            "name": "onContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on right-click."
+                        },
+                        {
+                            "name": "onMouseDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to when a mouse button is pressed."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "CheckboxChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<any>"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "CheckboxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CheckboxProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CheckboxContext"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CheckboxState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CheckboxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "box",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the box's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CheckboxContext": {
+                    "description": "Defines current options in Checkbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current checked state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CheckboxState": {
+                    "description": "Defines current inline state in Checkbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "CheckboxPassThroughType": {
+                    "values": "PassThroughType<T, CheckboxPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "chip": {
+        "description": "Chip represents people using icons, labels and images.\n\n[Live Demo](https://www.primereact.org/chip)",
+        "components": {
+            "Chip": {
+                "description": "Chip represents people using icons, labels and images.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getVisible",
+                            "parameters": [],
+                            "returnType": "boolean",
+                            "description": "Used to get the current visibility state of the chip."
+                        },
+                        {
+                            "name": "setVisible",
+                            "parameters": [
+                                {
+                                    "name": "visible",
+                                    "type": "boolean",
+                                    "description": "Whether to show or hide the chip"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to set the visibility of the chip."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Chip component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ChipProps>",
+                            "default": "",
+                            "description": "Defines the icon to display."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines the image to display."
+                        },
+                        {
+                            "name": "imageAlt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "It specifies an alternate text for an image, if the image cannot be displayed."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines the text to display."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "removable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display a remove icon."
+                        },
+                        {
+                            "name": "removeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ChipProps>",
+                            "default": "",
+                            "description": "Icon of the remove element."
+                        },
+                        {
+                            "name": "template",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TemplateType<ChipProps>",
+                            "default": "",
+                            "description": "Template of an item."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onImageError",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "This event is triggered if an error occurs while loading an image file."
+                        },
+                        {
+                            "name": "onRemove",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ChipRemoveEvent",
+                                    "description": "Custom remove event"
+                                }
+                            ],
+                            "returnType": "boolean",
+                            "description": "Callback to invoke when a chip is removed."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "ChipRemoveEvent": {
+                    "description": "Custom remove event",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Removed item value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ChipPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ChipPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughType<ImgHTMLAttributes<HTMLImageElement>>",
+                            "description": "Uses to pass attributes to the image's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label' DOM element."
+                        },
+                        {
+                            "name": "removeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the removeIcon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ChipState": {
+                    "description": "Defines current inline state in Chip component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ChipPassThroughType": {
+                    "values": "PassThroughType<T, ChipPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "chips": {
+        "description": "Chips is used to enter multiple values on an input field.\n\n[Live Demo](https://www.primereact.org/chips/)",
+        "components": {
+            "Chips": {
+                "description": "Chips is used to enter multiple values on an input field.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "HTMLInputElement",
+                            "description": "Used to get input element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Chips component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "addOnBlur",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to add an item when the input loses focus."
+                        },
+                        {
+                            "name": "allowDuplicate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to allow duplicate values or not."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "keyfilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KeyFilterType",
+                            "default": "",
+                            "description": "Format definition of the keys to block."
+                        },
+                        {
+                            "name": "max",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum number of entries allowed."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input field."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Advisory information to display on input."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be read-only."
+                        },
+                        {
+                            "name": "removable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean | Function",
+                            "default": "true",
+                            "description": "Whether an item is removable."
+                        },
+                        {
+                            "name": "removeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ChipsProps>",
+                            "default": "",
+                            "description": "Icon of the remove element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Separator char to add an item when pressed in addition to the enter key."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "itemTemplate",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current item"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "The template of each item"
+                        },
+                        {
+                            "name": "onAdd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ChipsAddEvent",
+                                    "description": "Custom add event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a chip is added. Return 'false' to prevent the item from being added."
+                        },
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ChipsChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a chip is added or removed."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component gets focus."
+                        },
+                        {
+                            "name": "onKeyDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KeyboardEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the key pressed."
+                        },
+                        {
+                            "name": "onRemove",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ChipsRemoveEvent",
+                                    "description": "Custom remove event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a chip is removed."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "ChipsRemoveEvent": {
+                    "description": "Custom remove event",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Removed item value"
+                        }
+                    ]
+                },
+                "ChipsChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<string[]>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<string[]>"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ChipsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipsProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ChipsState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ChipsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the remove token icon's DOM element."
+                        },
+                        {
+                            "name": "inputToken",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the input token's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChipsPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ChipsState": {
+                    "description": "Defines current inline state in Chips component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ChipsAddEvent": {
+                    "description": "Custom add event",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Added item value"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ChipsPassThroughType": {
+                    "values": "PassThroughType<T, ChipsPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "colorpicker": {
+        "description": "ColorPicker is an input component to select a color.\n\n[Live Demo](https://www.primereact.org/colorpicker/)",
+        "components": {
+            "ColorPicker": {
+                "description": "ColorPicker is an input component to select a color.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the overlay."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the overlay."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in AutoComplete component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "defaultColor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "ff0000",
+                            "description": "Default color to display when value is null."
+                        },
+                        {
+                            "name": "format",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"rgb\" | \"hex\" | \"hsb\"",
+                            "default": "hex",
+                            "description": "Format to use in value binding."
+                        },
+                        {
+                            "name": "inline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display as an overlay or not."
+                        },
+                        {
+                            "name": "inputClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the focus input to match a label defined for the dropdown."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the overlay panel."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay panel."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | ColorPickerRGBType | ColorPickerHSBType",
+                            "default": "",
+                            "description": "Value of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColorPickerChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a color is selected."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "ColorPickerChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<string | ColorPickerRGBType | ColorPickerHSBType>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<string | ColorPickerRGBType | ColorPickerHSBType>"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ColorPickerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColorPickerProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColorPickerState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColorPickerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "selector",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the selector's DOM element."
+                        },
+                        {
+                            "name": "color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the color's DOM element."
+                        },
+                        {
+                            "name": "colorHandle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the color handle's DOM element."
+                        },
+                        {
+                            "name": "hue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hue's DOM element."
+                        },
+                        {
+                            "name": "hueHandle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hue handle's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColorPickerPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColorPickerState": {
+                    "description": "Defines current inline state in ColorPicker component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColorPickerRGBType": {
+                    "description": "RGB type of value",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "r",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "red color number"
+                        },
+                        {
+                            "name": "g",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "green color number"
+                        },
+                        {
+                            "name": "b",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "blue color number"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColorPickerHSBType": {
+                    "description": "HSB type of value",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "h",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "hue number"
+                        },
+                        {
+                            "name": "s",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "saturation number"
+                        },
+                        {
+                            "name": "b",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "brightness number"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ColorPickerPassThroughType": {
+                    "values": "PassThroughType<T, ColorPickerPassThroughMethodOptions>"
+                },
+                "ColorPickerPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "column": {
+        "description": "Column component defines various options to specify corresponding features.\nIt is a helper component for DataTable and TreeTable.\n\n[Live Demo](https://www.primereact.org/datatable/)",
+        "components": {
+            "Column": {
+                "description": "Column is a helper component for DataTable and TreeTable.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ColumnProps component.",
+                    "values": [
+                        {
+                            "name": "align",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | \"center\" | \"left\" | \"right\"",
+                            "default": "",
+                            "description": "Aligns the content of the column, valid values are left, right and center."
+                        },
+                        {
+                            "name": "alignFrozen",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "",
+                            "description": "Position of a frozen column, valid values are left and right."
+                        },
+                        {
+                            "name": "alignHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | \"center\" | \"left\" | \"right\"",
+                            "default": "",
+                            "description": "Aligns the header of the column, valid values are left, right and center."
+                        },
+                        {
+                            "name": "body",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Body content of the column."
+                        },
+                        {
+                            "name": "bodyClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Style class of the body. If using a function must return a string."
+                        },
+                        {
+                            "name": "bodyStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the body."
+                        },
+                        {
+                            "name": "cellEditValidateOnClose",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled and cellEditorValidator is set, force to call cellEditorValidator\nbefore cell editor is closed. If cellEditorValidator returns false, editor stays open."
+                        },
+                        {
+                            "name": "cellEditValidatorEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "click",
+                            "description": "Event to trigger the validation, possible values are \"click\" and \"blur\"."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "colSpan",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of columns to span for grouping."
+                        },
+                        {
+                            "name": "columnKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of a column if field property is not defined. Only utilized by reorderableColumns feature at the moment."
+                        },
+                        {
+                            "name": "dataType",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Depending on the dataType of the column, suitable match modes are displayed."
+                        },
+                        {
+                            "name": "editor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Function to provide the cell editor input."
+                        },
+                        {
+                            "name": "excludeGlobalFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to exclude from global filtering or not."
+                        },
+                        {
+                            "name": "expander",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean | Function",
+                            "default": "false",
+                            "description": "Displays an icon to toggle row expansion."
+                        },
+                        {
+                            "name": "exportable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines whether the column is exported or not."
+                        },
+                        {
+                            "name": "exportField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property of a row data used for exporting, defaults to field."
+                        },
+                        {
+                            "name": "exportHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Custom export header of the column to be exported."
+                        },
+                        {
+                            "name": "field",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property of a row data."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if a column can be filtered."
+                        },
+                        {
+                            "name": "filterApply",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of apply element in menu."
+                        },
+                        {
+                            "name": "filterClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of clear element in menu."
+                        },
+                        {
+                            "name": "filterElement",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Element for custom filtering."
+                        },
+                        {
+                            "name": "filterField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property of a row data used for filtering, defaults to field."
+                        },
+                        {
+                            "name": "filterFooter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of footer element in menu."
+                        },
+                        {
+                            "name": "filterHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of header element in menu."
+                        },
+                        {
+                            "name": "filterHeaderClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the filter header."
+                        },
+                        {
+                            "name": "filterHeaderStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the filter header."
+                        },
+                        {
+                            "name": "filterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                        },
+                        {
+                            "name": "filterMatchModeOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnFilterMatchModeOptions[]",
+                            "default": "",
+                            "description": "An array of label-value pairs to override the global match mode options."
+                        },
+                        {
+                            "name": "filterMaxLength",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Specifies the maximum number of characters allowed in the filter element."
+                        },
+                        {
+                            "name": "filterMenuClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the column filter overlay."
+                        },
+                        {
+                            "name": "filterMenuStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the column filter overlay."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines placeholder of the input fields."
+                        },
+                        {
+                            "name": "filterType",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "text",
+                            "description": "Type of the filter input field."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Footer content of the table."
+                        },
+                        {
+                            "name": "footerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the footer."
+                        },
+                        {
+                            "name": "footerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the footer."
+                        },
+                        {
+                            "name": "frozen",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the column is fixed in horizontal scrolling or not."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Header content of the table."
+                        },
+                        {
+                            "name": "headerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the header."
+                        },
+                        {
+                            "name": "headerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the header."
+                        },
+                        {
+                            "name": "headerTooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the header tooltip."
+                        },
+                        {
+                            "name": "headerTooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the header tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "hidden",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the column is rendered."
+                        },
+                        {
+                            "name": "maxConstraints",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "2",
+                            "description": "Maximum number of constraints for a column filter."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "reorderable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns."
+                        },
+                        {
+                            "name": "resizeable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Used to defined resizeableColumns per column when resizeableColumns of table is enabled, defaults to value of resizeableColumns."
+                        },
+                        {
+                            "name": "rowEditor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean | Function",
+                            "default": "false",
+                            "description": "Displays icons to edit row."
+                        },
+                        {
+                            "name": "rowReorder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether this column displays an icon to reorder the rows."
+                        },
+                        {
+                            "name": "rowReorderIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ColumnProps>",
+                            "default": "",
+                            "description": "Icon of the drag handle to reorder rows."
+                        },
+                        {
+                            "name": "rowSpan",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of rows to span for grouping."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"single\"",
+                            "default": "",
+                            "description": "Specifies the selection mode, valid values are \"single\", \"multiple\", \"radiobutton\" and \"checkbox\"."
+                        },
+                        {
+                            "name": "showAddButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, a button is displayed to add more rules."
+                        },
+                        {
+                            "name": "showApplyButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Displays a button to apply the column filtering."
+                        },
+                        {
+                            "name": "showClearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Displays a button to clear the column filtering."
+                        },
+                        {
+                            "name": "showFilterMatchModes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the match modes selector."
+                        },
+                        {
+                            "name": "showFilterMenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display the filter overlay."
+                        },
+                        {
+                            "name": "showFilterMenuOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the match modes selector and match operator selector."
+                        },
+                        {
+                            "name": "showFilterOperator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, match all and match any operator selector is displayed."
+                        },
+                        {
+                            "name": "sortable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if a column is sortable."
+                        },
+                        {
+                            "name": "sortableDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the data of columns with this property cannot be sorted or changed by the user."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the field to sort data by default."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "cellEditValidator",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnEvent",
+                                    "description": "Custom event."
+                                }
+                            ],
+                            "returnType": "boolean",
+                            "description": "Validator function to validate the cell input value."
+                        },
+                        {
+                            "name": "filterFunction",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Value of the filter event."
+                                },
+                                {
+                                    "name": "filter",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Filter of the filter event."
+                                },
+                                {
+                                    "name": "filterLocale",
+                                    "optional": false,
+                                    "type": "string",
+                                    "description": "Filter locale of the event."
+                                },
+                                {
+                                    "name": "params",
+                                    "optional": false,
+                                    "type": "ColumnFilterEvent",
+                                    "description": "Params of the filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Custom filter function."
+                        },
+                        {
+                            "name": "onBeforeCellEditHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnEvent",
+                                    "description": "Custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the cell editor is hidden."
+                        },
+                        {
+                            "name": "onBeforeCellEditShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnEvent",
+                                    "description": "Custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the cell editor is shown. To prevent editor from showing return false or originalEvent.preventDefault()."
+                        },
+                        {
+                            "name": "onCellEditCancel",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnEvent",
+                                    "description": "Custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to execute when editor is cancelled."
+                        },
+                        {
+                            "name": "onCellEditComplete",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnEvent",
+                                    "description": "Custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to execute when editor is submitted."
+                        },
+                        {
+                            "name": "onCellEditInit",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnEvent",
+                                    "description": "Custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when cell edit is initiated. To prevent editor from showing return false or originalEvent.preventDefault()."
+                        },
+                        {
+                            "name": "onFilterApplyClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnFilterApplyClickEvent",
+                                    "description": "Custom filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the apply button is clicked."
+                        },
+                        {
+                            "name": "onFilterClear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the filter meta is cleared."
+                        },
+                        {
+                            "name": "onFilterConstraintAdd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnFilterConstraintAddEvent",
+                                    "description": "Custom filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a new constraint is added."
+                        },
+                        {
+                            "name": "onFilterConstraintRemove",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnFilterConstraintRemoveEvent",
+                                    "description": "Custom filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a constraint is removed."
+                        },
+                        {
+                            "name": "onFilterMatchModeChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnFilterMatchModeChangeEvent",
+                                    "description": "Custom filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the match mode option is changed."
+                        },
+                        {
+                            "name": "onFilterOperatorChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnFilterOperatorChangeEvent",
+                                    "description": "Custom filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the filter operator option is changed."
+                        },
+                        {
+                            "name": "sortFunction",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ColumnSortEvent",
+                                    "description": "Custom sort event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Sort function for custom sorting."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "ColumnEvent": {
+                    "description": "Custom event.",
+                    "relatedProp": "cellEditValidator",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Original event triggered."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Value of the element."
+                        },
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "rowData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Data of the selected row."
+                        },
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the selected row."
+                        },
+                        {
+                            "name": "cellIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the selected cell."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the element is selected or not."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Column of the element."
+                        },
+                        {
+                            "name": "newRowData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "New data of the row."
+                        },
+                        {
+                            "name": "newValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "New value of the element."
+                        }
+                    ]
+                },
+                "ColumnSortEvent": {
+                    "description": "Custom sort event.",
+                    "relatedProp": "sortFunction",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "order",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | 0 | 1 | -1",
+                            "description": "Sort order of the column."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Data to be sorted."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnSortMetaData[]",
+                            "description": "Array of multiple sort metadata for multi-column sorting."
+                        }
+                    ]
+                },
+                "ColumnFilterApplyClickEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "onFilterApplyClick",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "constraints",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterMetaData[]",
+                            "description": "Array of ColumnFilterMetaData objects representing the constraints."
+                        }
+                    ]
+                },
+                "ColumnFilterMatchModeChangeEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "onFilterMatchModeChange",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "matchMode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Type of filter match; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                        }
+                    ]
+                },
+                "ColumnFilterOperatorChangeEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "onFilterOperatorChange",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "operator",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"and\" | \"or\"",
+                            "description": "Logical operator for the filter."
+                        }
+                    ]
+                },
+                "ColumnFilterConstraintAddEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "onFilterConstraintAdd",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "constraint",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterMetaData",
+                            "description": "Array of ColumnFilterMetaData objects representing the constraints."
+                        }
+                    ],
+                    "extendedBy": "ColumnFilterConstraintRemoveEvent"
+                },
+                "ColumnFilterConstraintRemoveEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "onFilterConstraintRemove",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "constraint",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterMetaData",
+                            "description": "Array of ColumnFilterMetaData objects representing the constraints."
+                        }
+                    ]
+                },
+                "ColumnFilterEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "filterFunction",
+                    "props": [
+                        {
+                            "name": "rowData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Data of the current row.\""
+                        },
+                        {
+                            "name": "filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterMeta",
+                            "description": "Object containing filter metadata for all columns."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Additional properties passed to the filter function."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Object",
+                            "description": "Object containing metadata for the current column, including filter metadata, field name, and column properties."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ColumnPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnContext"
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnContext": {
+                    "description": "Defines current options in Column component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current checked state of row as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of row as a boolean."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of the column."
+                        },
+                        {
+                            "name": "sorted",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current sort state of the column as a boolean."
+                        },
+                        {
+                            "name": "resizable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current resizable state of the column as a boolean."
+                        },
+                        {
+                            "name": "size",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current size state of the table."
+                        },
+                        {
+                            "name": "showGridlines",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current gridlines state of the table as a boolean."
+                        },
+                        {
+                            "name": "highlighted",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current highlighted state of the filter row item as a boolean."
+                        },
+                        {
+                            "name": "hidden",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current hidden state of the filter clear button of a column as a boolean."
+                        },
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of the filter menu of a column as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnState": {
+                    "description": "Defines current inline state in Column component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "editing",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current editing state of the body cell."
+                        },
+                        {
+                            "name": "editingRowData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current editing row data of the body cell."
+                        },
+                        {
+                            "name": "styleObject",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "description": "Current style of the body cell."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state of the filter menu of a column as a boolean."
+                        },
+                        {
+                            "name": "rowGroupHeaderStyleObject",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "description": "Current style of the rowgroup header."
+                        },
+                        {
+                            "name": "sortableDisabledFields",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Current sortable disabled fields of the table header."
+                        },
+                        {
+                            "name": "allSortableDisabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current style of the table header."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "headerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the header cell's DOM element."
+                        },
+                        {
+                            "name": "columnResizer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the column resizer's DOM element."
+                        },
+                        {
+                            "name": "headerContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header content's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the header title's DOM element."
+                        },
+                        {
+                            "name": "sort",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the sort's DOM element."
+                        },
+                        {
+                            "name": "sortIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the sort's DOM element."
+                        },
+                        {
+                            "name": "sortBadge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the sort badge's DOM element."
+                        },
+                        {
+                            "name": "headerCheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptions",
+                            "description": "Uses to pass attributes to the header checkbox's component."
+                        },
+                        {
+                            "name": "columnFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the column filter's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterMenuButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the filter menu button's DOM element."
+                        },
+                        {
+                            "name": "headerFilterClearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the header filter clear button's DOM element."
+                        },
+                        {
+                            "name": "filterClearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the filter clear icon's DOM element."
+                        },
+                        {
+                            "name": "filterOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter overlay's DOM element."
+                        },
+                        {
+                            "name": "filterRowItems",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the filter row items' DOM element."
+                        },
+                        {
+                            "name": "filterRowItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the filter row item's DOM element."
+                        },
+                        {
+                            "name": "filterSeparator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the filter separator's DOM element."
+                        },
+                        {
+                            "name": "filterOperator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter operator's DOM element."
+                        },
+                        {
+                            "name": "filterOperatorDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "filterConstraints",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter constraints' DOM element."
+                        },
+                        {
+                            "name": "filterConstraint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter constraint's DOM element."
+                        },
+                        {
+                            "name": "filterMatchModeDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "filterRemove",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter remove button container's DOM element."
+                        },
+                        {
+                            "name": "filterRemoveButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "filterAddRule",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter add rule's DOM element."
+                        },
+                        {
+                            "name": "filterAddRuleButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "filterButtonbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter buttonbar's DOM element."
+                        },
+                        {
+                            "name": "filterClearButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "filterApplyButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "bodyCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the body cell's DOM element."
+                        },
+                        {
+                            "name": "footerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the footer cell's DOM element."
+                        },
+                        {
+                            "name": "rowGroupToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the rowgroup toggler's DOM element."
+                        },
+                        {
+                            "name": "rowGroupTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the rowgroup toggler icon's DOM element."
+                        },
+                        {
+                            "name": "columnTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the column title's DOM element."
+                        },
+                        {
+                            "name": "rowToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the rowtoggler's DOM element."
+                        },
+                        {
+                            "name": "rowTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the rowtoggler icon's DOM element."
+                        },
+                        {
+                            "name": "rowEditorInitButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the row editor init button's DOM element."
+                        },
+                        {
+                            "name": "rowEditorInitIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the row editor init icon's DOM element."
+                        },
+                        {
+                            "name": "rowEditorEditButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the row editor edit button's DOM element."
+                        },
+                        {
+                            "name": "rowEditorEditIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the row editor edit icon's DOM element."
+                        },
+                        {
+                            "name": "rowEditorSaveButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the row editor save button's DOM element."
+                        },
+                        {
+                            "name": "rowEditorSaveIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the row editor save icon's DOM element."
+                        },
+                        {
+                            "name": "rowEditorCancelButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the row editor cancel button's DOM element."
+                        },
+                        {
+                            "name": "rowEditorCancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the row editor cancel icon's DOM element."
+                        },
+                        {
+                            "name": "rowReorderIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the row reorder icon's DOM element."
+                        },
+                        {
+                            "name": "rowRadioButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the row radiobutton component."
+                        },
+                        {
+                            "name": "rowCheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptions",
+                            "description": "Uses to pass attributes to the row checkbox component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnHeaderOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Additional properties passed to the body component."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "ColumnFooterOptions"
+                },
+                "ColumnFooterOptions": {
+                    "description": "Column Header Options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Additional properties passed to the body component."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "ColumnHeaderOptions"
+                },
+                "ColumnBodyOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Column of the options."
+                        },
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        },
+                        {
+                            "name": "props",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Additional properties passed to the body component."
+                        },
+                        {
+                            "name": "frozenRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the row is frozen or not."
+                        },
+                        {
+                            "name": "expander",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnBodyExpanderOptions",
+                            "description": "Options for the expander component."
+                        },
+                        {
+                            "name": "rowEditor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnBodyRowEditorOptions",
+                            "description": "Options for the row editor component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnBodyExpanderOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the options."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the options icon."
+                        },
+                        {
+                            "name": "element",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Custom JSX element for the options."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Event on click of the expander."
+                        }
+                    ]
+                },
+                "ColumnBodyRowEditorOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "editing",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether row is in editing mode."
+                        },
+                        {
+                            "name": "element",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Custom JSX element for the options."
+                        },
+                        {
+                            "name": "saveClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the save button."
+                        },
+                        {
+                            "name": "saveIconClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the save icon."
+                        },
+                        {
+                            "name": "cancelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the cancel button."
+                        },
+                        {
+                            "name": "cancelIconClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the cancel icon."
+                        },
+                        {
+                            "name": "initClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the init button."
+                        },
+                        {
+                            "name": "initIconClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the init icon."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onSaveClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Event on save click of the row editor."
+                        },
+                        {
+                            "name": "onCancelClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Event on cancel click of the row editor."
+                        },
+                        {
+                            "name": "onInitClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Event on init click of the row editor."
+                        }
+                    ]
+                },
+                "ColumnEditorOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "node",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Node element of the editor."
+                        },
+                        {
+                            "name": "rowData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Data of the edited row."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Value of the editor."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Column of the editor."
+                        },
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the edited row."
+                        },
+                        {
+                            "name": "frozenRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the row is frozen or not."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Additional properties passed to the body component."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "editorCallback",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function triggered on editor change."
+                        }
+                    ]
+                },
+                "ColumnFilterModelOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterMetaData | ColumnFilterMetaDataWithConstraint"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnFilterClearTemplateOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "filterModel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterModelOptions",
+                            "description": "Object containing column filter model options."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "filterClearCallback",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback function to clear the filters."
+                        }
+                    ]
+                },
+                "ColumnFilterApplyTemplateOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "filterModel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterModelOptions",
+                            "description": "Object containing column filter model options."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "filterApplyCallback",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": true,
+                                    "type": "any",
+                                    "description": "Value of the filter."
+                                },
+                                {
+                                    "name": "index",
+                                    "optional": true,
+                                    "type": "number",
+                                    "description": "Index of the filter."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function to apply the filters with optional value and index parameters."
+                        }
+                    ],
+                    "extendedBy": "ColumnFilterHeaderTemplateOptions,ColumnFilterFooterTemplateOptions"
+                },
+                "ColumnFilterHeaderTemplateOptions": {
+                    "description": "Column Filter Header Template Opitons",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "filterModel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterModelOptions",
+                            "description": "Object containing column filter model options."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "filterApplyCallback",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": true,
+                                    "type": "any",
+                                    "description": "Value of the filter."
+                                },
+                                {
+                                    "name": "index",
+                                    "optional": true,
+                                    "type": "number",
+                                    "description": "Index of the filter."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function to apply the filters with optional value and index parameters."
+                        }
+                    ],
+                    "extendedTypes": "ColumnFilterApplyTemplateOptions"
+                },
+                "ColumnFilterFooterTemplateOptions": {
+                    "description": "Column Filter Footer Template Opitons",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "filterModel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterModelOptions",
+                            "description": "Object containing column filter model options."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "filterApplyCallback",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": true,
+                                    "type": "any",
+                                    "description": "Value of the filter."
+                                },
+                                {
+                                    "name": "index",
+                                    "optional": true,
+                                    "type": "number",
+                                    "description": "Index of the filter."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function to apply the filters with optional value and index parameters."
+                        }
+                    ],
+                    "extendedTypes": "ColumnFilterApplyTemplateOptions"
+                },
+                "ColumnFilterElementTemplateOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the filter."
+                        },
+                        {
+                            "name": "filterModel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterModelOptions",
+                            "description": "Object containing column filter model options."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Value of the filter."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "filterApplyCallback",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": true,
+                                    "type": "any",
+                                    "description": "Value of the filter."
+                                },
+                                {
+                                    "name": "index",
+                                    "optional": true,
+                                    "type": "number",
+                                    "description": "Index of the filter."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function to apply the filters with optional value and index parameters."
+                        },
+                        {
+                            "name": "filterCallback",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": true,
+                                    "type": "any",
+                                    "description": "Value of the filter."
+                                },
+                                {
+                                    "name": "index",
+                                    "optional": true,
+                                    "type": "number",
+                                    "description": "Index of the filter."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function with optional value and index parameters."
+                        }
+                    ]
+                },
+                "ColumnSortMetaData": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field name of the column."
+                        },
+                        {
+                            "name": "order",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | 0 | 1 | -1",
+                            "description": "Sort order of the column."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "ColumnSortEvent"
+                },
+                "ColumnFilterMetaData": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Value of the filter."
+                        },
+                        {
+                            "name": "matchMode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Type of filter match; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnFilterMetaDataWithConstraint": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "operator",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"and\" | \"or\"",
+                            "description": "Logical operator for the constraints."
+                        },
+                        {
+                            "name": "constraints",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterMetaData[]",
+                            "description": "Array of ColumnFilterMetaData objects representing the constraints."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnFilterMeta": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnFilterMetaData"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnFilterMatchModeOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "label",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The label to display for the match mode"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Type of filter match; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ColumnPassThroughType": {
+                    "values": "PassThroughType<T, ColumnPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "columngroup": {
+        "description": "Columns can be grouped at header and footer sections by defining a ColumnGroup component.\nIt is a helper component for DataTable.\n\n[Live Demo](https://www.primereact.org/datatable/)",
+        "components": {
+            "ColumnGroup": {
+                "description": "It is a helper component for DataTable.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ColumnGroup component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ColumnGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnGroupProps"
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ColumnGroupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ColumnGroupPassThroughType": {
+                    "values": "PassThroughType<T, ColumnGroupPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "componentbase/componentbase": {
+        "functions": {
+            "description": "Defines the custom functions used by the module.",
+            "values": {
+                "useHandleStyle": {
+                    "name": "useHandleStyle",
+                    "parameters": [
+                        {
+                            "name": "styles",
+                            "type": "string",
+                            "description": "The style text content."
+                        },
+                        {
+                            "name": "isUnstyled",
+                            "type": "Function",
+                            "description": "Flag removes component related styles in the core."
+                        },
+                        {
+                            "name": "config",
+                            "type": "Object",
+                            "description": "The component configuration."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Custom hook to use to load style options for a component."
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ComponentHooks": {
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": [
+                        {
+                            "name": "useMountEffect",
+                            "parameters": [],
+                            "returnType": "void"
+                        },
+                        {
+                            "name": "useUpdateEffect",
+                            "parameters": [],
+                            "returnType": "void"
+                        },
+                        {
+                            "name": "useUnmountEffect",
+                            "parameters": [],
+                            "returnType": "void"
+                        }
+                    ]
+                },
+                "ComponentBasePassThroughOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ComponentBasePassThroughMethodOptions": {
+                    "description": "",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | P"
+                        },
+                        {
+                            "name": "state",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | S"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        }
+    },
+    "confirmdialog": {
+        "description": "ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag.\n\n[Live Demo](https://www.primereact.org/confirmdialog)",
+        "components": {
+            "ConfirmDialog": {
+                "description": "ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "confirm",
+                            "parameters": [
+                                {
+                                    "name": "props",
+                                    "type": "ConfirmDialogProps",
+                                    "description": "All component props"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to call/update the component manually"
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ConfirmDialog component. In addition to these, all properties of  dialog  can be used in this component.",
+                    "values": [
+                        {
+                            "name": "acceptClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the accept button."
+                        },
+                        {
+                            "name": "acceptIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ConfirmDialogProps>",
+                            "default": "",
+                            "description": "Icon of the accept button."
+                        },
+                        {
+                            "name": "acceptLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Yes",
+                            "description": "Label of the accept button."
+                        },
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaCloseIconLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines a string that labels the close icon."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "blockScroll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether background scroll should be blocked when dialog is visible."
+                        },
+                        {
+                            "name": "breakpoints",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogBreakpoints",
+                            "default": "",
+                            "description": "Object literal to define widths per screen size."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "closable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the dialog can be closed by clicking the close icon, pressing escape key or clicking the modal background."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DialogProps>",
+                            "default": "",
+                            "description": "Icon to display in the dialog close button."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the dialog."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Specifies a custom content for the dialog. For more complex markup, use the \"content\" slot instead."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the content section."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Style of the content section."
+                        },
+                        {
+                            "name": "defaultFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "accept",
+                            "description": "Element to receive the focus when the dialog gets visible, valid values are \"accept\" and \"reject\"."
+                        },
+                        {
+                            "name": "dismissableMask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies if clicking the modal background should hide the dialog."
+                        },
+                        {
+                            "name": "draggable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Enables dragging to change the position using header."
+                        },
+                        {
+                            "name": "focusOnShow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, first button receives focus on show."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Footer content of the confirm dialog."
+                        },
+                        {
+                            "name": "group",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Title content of the dialog."
+                        },
+                        {
+                            "name": "headerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the header section."
+                        },
+                        {
+                            "name": "headerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Style of the header section."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ConfirmDialogProps>",
+                            "default": "",
+                            "description": "Icon to display next to the message."
+                        },
+                        {
+                            "name": "icons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom icons template for the header."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "keepInViewport",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Keeps dialog in the viewport."
+                        },
+                        {
+                            "name": "maskClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the mask."
+                        },
+                        {
+                            "name": "maskStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the mask."
+                        },
+                        {
+                            "name": "maximizable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the dialog can be displayed full screen."
+                        },
+                        {
+                            "name": "maximized",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the dialog is initially displayed full screen."
+                        },
+                        {
+                            "name": "maximizeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DialogProps>",
+                            "default": "",
+                            "description": "Icon to display in the dialog maximize button when dialog is not maximized."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Message of the confirmation."
+                        },
+                        {
+                            "name": "minimizeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DialogProps>",
+                            "default": "",
+                            "description": "Icon to display in the dialog maximize button when dialog is maximized."
+                        },
+                        {
+                            "name": "minX",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Minimum value for the left coordinate of dialog in dragging."
+                        },
+                        {
+                            "name": "minY",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Minimum value for the top coordinate of dialog in dragging."
+                        },
+                        {
+                            "name": "modal",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines if background should be blocked when dialog is displayed."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"center\" | \"left\" | \"top\" | \"bottom\" | \"right\" | \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\"",
+                            "default": "center",
+                            "description": "Position of the dialog, options are \"center\", \"top\", \"bottom\", \"left\", \"right\", \"top-left\", \"top-right\", \"bottom-left\" or \"bottom-right\"."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rejectClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the reject button."
+                        },
+                        {
+                            "name": "rejectIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ConfirmDialogProps>",
+                            "default": "",
+                            "description": "Icon of the reject button."
+                        },
+                        {
+                            "name": "rejectLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "No",
+                            "description": "Label of the reject button."
+                        },
+                        {
+                            "name": "resizable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Enables resizing of the content."
+                        },
+                        {
+                            "name": "rtl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled dialog is displayed in RTL direction."
+                        },
+                        {
+                            "name": "showCloseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the close icon is displayed in the header."
+                        },
+                        {
+                            "name": "showHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the header or not."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "tagKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique tag key used to separate the confirmDialog components in the page."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the confirm dialog."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "accept",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is confirmed."
+                        },
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PointerEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog is clicked."
+                        },
+                        {
+                            "name": "onDrag",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DragEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dragging dialog."
+                        },
+                        {
+                            "name": "onDragEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DragEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog dragging is completed."
+                        },
+                        {
+                            "name": "onDragStart",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DragEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog dragging is initiated."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "result",
+                                    "optional": false,
+                                    "type": "string"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when confirm dialog is hidden."
+                        },
+                        {
+                            "name": "onMaskClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the mask is clicked."
+                        },
+                        {
+                            "name": "onMaximize",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DialogMaximizeEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when toggle maximize icon is clicked."
+                        },
+                        {
+                            "name": "onResize",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke while resizing dialog."
+                        },
+                        {
+                            "name": "onResizeEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog resizing is completed."
+                        },
+                        {
+                            "name": "onResizeStart",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog resizing is initiated."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog is showed."
+                        },
+                        {
+                            "name": "reject",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is rejected."
+                        }
+                    ]
+                }
+            }
+        },
+        "functions": {
+            "description": "Defines the custom functions used by the module.",
+            "values": {
+                "confirmDialog": {
+                    "name": "confirmDialog",
+                    "parameters": [
+                        {
+                            "name": "props",
+                            "type": "ConfirmDialogProps"
+                        }
+                    ],
+                    "returnType": "ConfirmDialogReturn"
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ConfirmDialogPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmDialogProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmDialogState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ConfirmDialogPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header title's DOM element."
+                        },
+                        {
+                            "name": "headerIcons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the header icons' DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the close button's component."
+                        },
+                        {
+                            "name": "closeButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the close button icon's component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the message's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "rejectButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "acceptButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmDialogPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ConfirmDialogState": {
+                    "description": "Defines current inline state in ConfirmDialog component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "confirmation",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current confirmation message."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ConfirmDialogOptions": {
+                    "description": "Custom confirm dialog options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "acceptClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the accept button."
+                        },
+                        {
+                            "name": "rejectClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the reject button."
+                        },
+                        {
+                            "name": "acceptLabel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Label of the accept button."
+                        },
+                        {
+                            "name": "rejectLabel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Label of the reject button."
+                        },
+                        {
+                            "name": "defaultFocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Element to receive the focus when the dialog gets visible, valid values are \"accept\" and \"reject\"."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmDialogProps",
+                            "description": "All component props"
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "accept",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is confirmed."
+                        },
+                        {
+                            "name": "reject",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is rejected."
+                        }
+                    ]
+                },
+                "ConfirmDialogReturn": {
+                    "description": "Object returned by the  confirmDialog  method.",
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": [
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the dialog."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the dialog."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ConfirmDialogPassThroughType": {
+                    "values": "PassThroughType<T, ConfirmDialogPassThroughMethodOptions>"
+                },
+                "ConfirmDialogPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "confirmpopup": {
+        "description": "ConfirmPopup displays a confirmation overlay displayed relatively to its target.\n\n[Live Demo](https://www.primereact.org/confirmpopup)",
+        "components": {
+            "ConfirmPopup": {
+                "description": "ConfirmPopup displays a confirmation overlay displayed relatively to its target.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "confirm",
+                            "parameters": [
+                                {
+                                    "name": "props",
+                                    "type": "ConfirmPopupProps",
+                                    "description": "All component props"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to call/update the component manually"
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ConfirmPopup component.",
+                    "values": [
+                        {
+                            "name": "acceptClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the accept button."
+                        },
+                        {
+                            "name": "acceptIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ConfirmPopupProps>",
+                            "default": "",
+                            "description": "Icon of the accept button."
+                        },
+                        {
+                            "name": "acceptLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Yes",
+                            "description": "Label of the accept button."
+                        },
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the popup."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Specifies a custom content for the dialog. For more complex markup, use the \"content\" slot instead."
+                        },
+                        {
+                            "name": "defaultFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "accept",
+                            "description": "Element to receive the focus when the dialog gets visible, valid values are \"accept\" and \"reject\"."
+                        },
+                        {
+                            "name": "dismissable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Enables to hide the popup when outside is clicked."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Footer content of the confirm popup."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ConfirmPopupProps>",
+                            "default": "",
+                            "description": "Icon to display next to the message."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Message of the confirmation."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rejectClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the reject button."
+                        },
+                        {
+                            "name": "rejectIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ConfirmPopupProps>",
+                            "default": "",
+                            "description": "Icon of the reject button."
+                        },
+                        {
+                            "name": "rejectLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "No",
+                            "description": "Label of the reject button."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tagKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique tag key used to separate the confirmPopup components in the page."
+                        },
+                        {
+                            "name": "target",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLElement",
+                            "default": "",
+                            "description": "Target element to align the popup."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the confirm popup."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "accept",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is confirmed."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "result",
+                                    "optional": false,
+                                    "type": "string"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when confirm popup is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes visible."
+                        },
+                        {
+                            "name": "reject",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is rejected."
+                        }
+                    ]
+                }
+            }
+        },
+        "functions": {
+            "description": "Defines the custom functions used by the module.",
+            "values": {
+                "confirmPopup": {
+                    "name": "confirmPopup",
+                    "parameters": [
+                        {
+                            "name": "props",
+                            "type": "ConfirmPopupProps"
+                        }
+                    ],
+                    "returnType": "ConfirmPopupReturn"
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ConfirmPopupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmPopupProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmPopupState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ConfirmPopupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the message's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "rejectButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "acceptButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ConfirmPopupPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ConfirmPopupState": {
+                    "description": "Defines current inline state in ConfirmPopup component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "reshow",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current reshow state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ConfirmPopupOptions": {
+                    "description": "Custom confirm popup options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "acceptClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the accept button."
+                        },
+                        {
+                            "name": "rejectClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the reject button."
+                        },
+                        {
+                            "name": "acceptLabel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Label of the accept button."
+                        },
+                        {
+                            "name": "rejectLabel",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Label of the reject button."
+                        },
+                        {
+                            "name": "defaultFocus",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Element to receive the focus when the dialog gets visible, valid values are \"accept\" and \"reject\"."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ConfirmPopupProps",
+                            "description": "All component props"
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "accept",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is confirmed."
+                        },
+                        {
+                            "name": "reject",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to execute when action is rejected."
+                        }
+                    ]
+                },
+                "ContentProps": {
+                    "description": "Defines current content values and refs for headless development.",
+                    "relatedProp": "content",
+                    "props": [
+                        {
+                            "name": "acceptBtnRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLButtonElement>",
+                            "description": "Reference for the accept button. Used to focus the element and execute the action."
+                        },
+                        {
+                            "name": "rejectBtnRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLButtonElement>",
+                            "description": "Reference for the reject button. Used to focus the element and execute the action."
+                        },
+                        {
+                            "name": "message",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Message value of confirm popup."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Hide action of confirm popup."
+                        }
+                    ]
+                },
+                "ConfirmPopupReturn": {
+                    "description": "Object returned by the  confirmPopup  method.",
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": [
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the popup."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the popup."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ConfirmPopupPassThroughType": {
+                    "values": "PassThroughType<T, ConfirmPopupPassThroughMethodOptions>"
+                },
+                "ConfirmPopupPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "contextmenu": {
+        "description": "ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration.\n\n[Live Demo](https://www.primereact.org/contextmenu/)",
+        "components": {
+            "ContextMenu": {
+                "description": "ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Hides the popup menu."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Displays the popup menu."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ContextMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Used to define a string that labels the component."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "global",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Attaches the menu to document instead of a particular item."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "400px",
+                            "description": "Maximum height of the options panel on responsive mode."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ContextMenuProps>",
+                            "default": "",
+                            "description": "Icon of the submenu."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ContextMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContextMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContextMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ContextMenuPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the element in tabbing order."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when ContextMenu receives focus."
+                        },
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when ContextMenu loses focus."
+                        }
+                    ]
+                },
+                "ContextMenuState": {
+                    "description": "Defines current inline state in ContextMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "reshow",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current reshow state as a boolean."
+                        },
+                        {
+                            "name": "resetMenu",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current resetMenu state as a boolean."
+                        },
+                        {
+                            "name": "attributeSelector",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current attributeSelector visible state as a string."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContextMenuContext": {
+                    "description": "Defines current options in ContextMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ContextMenuPassThroughType": {
+                    "values": "PassThroughType<T, ContextMenuPassThroughMethodOptions>"
+                },
+                "ContextMenuPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "csstransition": {
+        "description": "CSSTransition component wraps [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API.\nIt allows us to easily manage animations. All PrimeReact components use this component.\n\n[Live Demo](https://www.primereact.org/dropdown/)",
+        "components": {
+            "CSSTransition": {
+                "description": "CSSTransition component wraps [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API.\nIt allows us to easily manage animations. All PrimeReact components use this component.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API. In addition to these, all properties of HTMLElement can be used in this component.",
+                    "values": []
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "datascroller": {
+        "description": "DataScroller displays data with on demand loading using scroll.\n\n[Live Demo](https://www.primereact.org/datascroller/)",
+        "components": {
+            "DataScroller": {
+                "description": "DataScroller displays data with on demand loading using scroll.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "load",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to load data manually"
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in DataScroller component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "buffer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0.9",
+                            "description": "Number of buffer size."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No records found",
+                            "description": "Text to display when there is no data."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Label of footer."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Label of header."
+                        },
+                        {
+                            "name": "inline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if the event target to listen the scroll event is the element itself."
+                        },
+                        {
+                            "name": "lazy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if data is loaded and interacted with in lazy manner."
+                        },
+                        {
+                            "name": "loader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Determines whether data is loaded by a target element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of rows to fetch in a load event."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Max height of the content area in inline mode."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of objects to display."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "itemTemplate",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current item"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets an item in the value and returns the content for it."
+                        },
+                        {
+                            "name": "onLazyLoad",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataScrollerLazyLoadEvents",
+                                    "description": "Custom lazy event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke in lazy mode to load new data."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "DataScrollerLazyLoadEvents": {
+                    "description": "Custom lazy event.",
+                    "relatedProp": "onLazyLoad",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "First row offset"
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of rows per page"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DataScrollerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataScrollerProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataScrollerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the emptyMessage's DOM element."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DataScrollerPassThroughType": {
+                    "values": "PassThroughType<T, DataScrollerPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "datatable": {
+        "description": "DataTable displays data in tabular format.\n\n[Live Demo](https://www.primereact.org/datatable/)",
+        "components": {
+            "DataTable": {
+                "description": "DataTable displays data in tabular format.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "clearState",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Clears the table state."
+                        },
+                        {
+                            "name": "closeEditingCell",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Closes the current editing cell when incell editing is enabled."
+                        },
+                        {
+                            "name": "closeEditingRows",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Closes the current editing rows when row editing is enabled."
+                        },
+                        {
+                            "name": "exportCSV",
+                            "parameters": [
+                                {
+                                    "name": "options",
+                                    "type": "Object",
+                                    "description": "Options to export"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Exports the data to CSV format."
+                        },
+                        {
+                            "name": "filter",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "type": "T",
+                                    "description": "The filter value"
+                                },
+                                {
+                                    "name": "field",
+                                    "type": "string",
+                                    "description": "The filter field"
+                                },
+                                {
+                                    "name": "mode",
+                                    "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
+                                    "description": "Filter match mode"
+                                },
+                                {
+                                    "name": "index",
+                                    "type": "number",
+                                    "description": "Index of the filter"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Filters the data."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getFilterMeta",
+                            "parameters": [],
+                            "returnType": "undefined | DataTableFilterMeta",
+                            "description": "Retrieves the currently applied filters for the data table."
+                        },
+                        {
+                            "name": "getProcessedData",
+                            "parameters": [],
+                            "returnType": "TValue",
+                            "description": "Used to get the processed data."
+                        },
+                        {
+                            "name": "getSortMeta",
+                            "parameters": [],
+                            "returnType": "undefined | DataTableSortMeta[]",
+                            "description": "Retrieves the currently applied multiple sort metadata for the data table."
+                        },
+                        {
+                            "name": "getTable",
+                            "parameters": [],
+                            "returnType": "null | HTMLTableElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getVirtualScroller",
+                            "parameters": [],
+                            "returnType": "null | VirtualScroller",
+                            "description": "Used to get the virtual scroller."
+                        },
+                        {
+                            "name": "reset",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Resets sort, filter, paginator and columnorder state."
+                        },
+                        {
+                            "name": "resetColumnOrder",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Resets column order when reorderableColumns is enabled."
+                        },
+                        {
+                            "name": "resetResizeColumnsWidth",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Resets resize columns width."
+                        },
+                        {
+                            "name": "resetScroll",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Resets scroll position."
+                        },
+                        {
+                            "name": "restoreColumnWidths",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Restores the column widths."
+                        },
+                        {
+                            "name": "restoreState",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Restores the table state."
+                        },
+                        {
+                            "name": "restoreTableState",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "type": "any",
+                                    "description": "The state to restore"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Stored states can be loaded at any time using this method if there is a stateStorage property."
+                        },
+                        {
+                            "name": "saveState",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Saves the state."
+                        },
+                        {
+                            "name": "setFilterMeta",
+                            "parameters": [
+                                {
+                                    "name": "filters",
+                                    "type": "DataTableFilterMeta",
+                                    "description": "The filters to be applied to the data table."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Sets the filters for the data table."
+                        },
+                        {
+                            "name": "setSortMeta",
+                            "parameters": [
+                                {
+                                    "name": "sorts",
+                                    "type": "DataTableSortMeta[]",
+                                    "description": "The sorts to be applied to the data table."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Sets the multiple sort metadata for the data table."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "alwaysShowPaginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show it even there is only one page."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "960px",
+                            "description": "The breakpoint to define the maximum width boundary when using stack responsive layout."
+                        },
+                        {
+                            "name": "cellMemo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to enable cell memoization.\n\nWhen the memoization is enabled, be sure to:\n     1- Update the value prop (i.e., row data) to trigger a re-render of the cells of a given row.\n     2- Where necessary, use the spread operator (...) when updating the value prop objs which creates new fresh\n     objects and avoids mutating the same objects.\n\nWhen the memoization is disabled, a re-render of the datatable will trigger a re-render of all cells, which can\nlead to performance issues with large datasets and is therefore not recommended."
+                        },
+                        {
+                            "name": "cellMemoProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex',\n'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol']",
+                            "description": "The cell props to be checked at memoization.\n\nPossible cell props are:\n    'hostName', 'allowCellSelection', 'cellMemo', 'cellMemoProps', 'cellMemoPropsDepth', 'cellClassName', 'checkIcon', 'collapsedRowIcon',\n    'field', 'resolveFieldData', 'column', 'cProps', 'dataKey', 'editMode', 'editing', 'editingMeta', 'onEditingMetaChange', 'editingKey',\n    'getEditingRowData', 'expanded', 'expandedRowIcon', 'frozenRow', 'frozenCol', 'alignFrozenCol', 'index', 'isSelectable', 'onCheckboxChange',\n    'onClick', 'onMouseDown', 'onMouseUp', 'onRadioChange', 'onRowEditCancel', 'onRowEditInit', 'onRowEditSave', 'onRowToggle', 'responsiveLayout',\n    'rowData', 'rowEditorCancelIcon', 'rowEditorInitIcon', 'rowEditorSaveIcon', 'rowIndex', 'rowSpan', 'selectOnEdit', 'isRowSelected', 'isCellSelected',\n    'selectionAriaLabel', 'showRowReorderElement', 'showSelectionElement', 'tabIndex', 'getTabIndex', 'tableProps', 'tableSelector', 'value',\n    'getVirtualScrollerOption', 'ptCallbacks', 'metaData', 'unstyled', 'findNextSelectableCell', 'findPrevSelectableCell', 'findDownSelectableCell',\n    'findUpSelectableCell', 'focusOnElement', 'focusOnInit', 'updateStickyPosition'\n\nIMPORTANT: Including a function to be checked will in general disable the memoization in practice, since functions are\ncompared by reference."
+                        },
+                        {
+                            "name": "cellMemoPropsDepth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "The comparison depth when checking cell props (e.g., rowData) at memoization."
+                        },
+                        {
+                            "name": "cellSelection",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "true",
+                            "default": "false",
+                            "description": "Whether to cell selection is enabled or not."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Icon to display in the checkbox."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "collapsedRowIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Icon of the row toggler to display the row as collapsed."
+                        },
+                        {
+                            "name": "columnResizeMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"expand\" | \"fit\"",
+                            "default": "fit",
+                            "description": "Used to define the resize mode of the columns, valid values are \"fit\" and \"expand\"."
+                        },
+                        {
+                            "name": "compareSelectionBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"equals\" | \"deepEquals\"",
+                            "default": "deepEquals",
+                            "description": "Algorithm to define if a row is selected, valid values are \"equals\" that compares by reference and \"deepEquals\" that compares all fields."
+                        },
+                        {
+                            "name": "contextMenuSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Selected row in single mode or an array of values in multiple mode."
+                        },
+                        {
+                            "name": "csvSeparator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ",",
+                            "description": "Character to use as the csv separator."
+                        },
+                        {
+                            "name": "currentPageReportTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "({currentPage} of {totalPages})",
+                            "description": "Template of the current page report element. Available placeholders are {currentPage}, {totalPages}, {rows}, {first}, {last} and {totalRecords}"
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "({currentPage} of {totalPages})",
+                            "description": "Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering."
+                        },
+                        {
+                            "name": "defaultSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | 0 | 1 | -1",
+                            "default": "({currentPage} of {totalPages})",
+                            "description": "Default sort order of an unsorted column."
+                        },
+                        {
+                            "name": "dragSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a rectangle that can be dragged can be used to make a range selection."
+                        },
+                        {
+                            "name": "editingRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableValueArray | DataTableEditingRows",
+                            "default": "",
+                            "description": "A collection of rows to represent the current editing data in row edit mode."
+                        },
+                        {
+                            "name": "editMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "null",
+                            "description": "Defines editing mode, options are \"cell\" and \"row\"."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No results found",
+                            "description": "Text to display when there is no data."
+                        },
+                        {
+                            "name": "expandableRowGroups",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Makes row groups toggleable, default is false."
+                        },
+                        {
+                            "name": "expandedRowIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Icon of the row toggler to display the row as expanded."
+                        },
+                        {
+                            "name": "expandedRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableValueArray | DataTableExpandedRows",
+                            "default": "",
+                            "description": "A collection of rows or a map object row data keys that are expanded."
+                        },
+                        {
+                            "name": "exportFilename",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "download",
+                            "description": "Name of the exported file."
+                        },
+                        {
+                            "name": "filterClearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTable<TValue>>",
+                            "default": "",
+                            "description": "Icon to display when the filter can be cleared."
+                        },
+                        {
+                            "name": "filterDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "300",
+                            "description": "Delay in milliseconds before filtering the data."
+                        },
+                        {
+                            "name": "filterDisplay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"menu\" | \"row\"",
+                            "default": "menu",
+                            "description": "Layout of the filter elements, valid values are \"row\" and \"menu\"."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTable<TValue>>",
+                            "default": "",
+                            "description": "Icon to display the current filtering status."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filters",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableFilterMeta",
+                            "default": "",
+                            "description": "An array of FilterMetadata objects to provide external filters."
+                        },
+                        {
+                            "name": "first",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the first row to be displayed."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableFooterTemplateType<TValue>",
+                            "default": "",
+                            "description": "Custom footer content of the table."
+                        },
+                        {
+                            "name": "footerColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "ColumnGroup component for footer."
+                        },
+                        {
+                            "name": "frozenRow",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the row is frozen or not. Read-Only necessary for unstyled TypeScript definition."
+                        },
+                        {
+                            "name": "frozenValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableRowDataArray<TValue>",
+                            "default": "",
+                            "description": "Items of the frozen part in scrollable DataTable."
+                        },
+                        {
+                            "name": "frozenWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Width of the frozen part in scrollable DataTable."
+                        },
+                        {
+                            "name": "globalFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string",
+                            "default": "",
+                            "description": "Value of the global filter to use in filtering."
+                        },
+                        {
+                            "name": "globalFilterFields",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Define fields to be filtered globally."
+                        },
+                        {
+                            "name": "globalFilterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                            "default": "contains",
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                        },
+                        {
+                            "name": "groupRowsBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Used for either be grouped by a separate grouping row or using rowspan."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableHeaderTemplateType<TValue>",
+                            "default": "",
+                            "description": "Custom header content of the table."
+                        },
+                        {
+                            "name": "headerColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "ColumnGroup component for header."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "lazy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if data is loaded and interacted with in lazy manner."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Displays a loader to indicate data load is in progress."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "The icon to show while indicating data load is in progress."
+                        },
+                        {
+                            "name": "metaKeySelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | DataTableSortMeta[]",
+                            "default": "",
+                            "description": "An array of SortMeta objects to sort the data by default in multiple sort mode."
+                        },
+                        {
+                            "name": "pageLinkSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Number of page links to display."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified as true, enables the pagination."
+                        },
+                        {
+                            "name": "paginatorClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the paginator element."
+                        },
+                        {
+                            "name": "paginatorDropdownAppendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "paginatorLeft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content for the left side of the paginator."
+                        },
+                        {
+                            "name": "paginatorPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"top\" | \"bottom\"",
+                            "default": "bottom",
+                            "description": "Position of the paginator, options are \"top\",\"bottom\" or \"both\"."
+                        },
+                        {
+                            "name": "paginatorRight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content for the right side of the paginator."
+                        },
+                        {
+                            "name": "paginatorTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorTemplate",
+                            "default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
+                            "description": "Template of the paginator. For details, refer to the template section of the paginator documentation for further options."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "removableSort",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, columns can have an un-sorted state."
+                        },
+                        {
+                            "name": "reorderableColumns",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, columns can be reordered using drag and drop."
+                        },
+                        {
+                            "name": "reorderableRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, rows can be reordered using drag and drop."
+                        },
+                        {
+                            "name": "reorderIndicatorDownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Defines the reorder indicator down icon."
+                        },
+                        {
+                            "name": "reorderIndicatorUpIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Defines the reorder indicator up icon."
+                        },
+                        {
+                            "name": "resizableColumns",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, columns can be resized using drag and drop."
+                        },
+                        {
+                            "name": "responsiveLayout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"scroll\" | \"stack\"",
+                            "default": "scroll",
+                            "description": "Defines the responsive mode, valid options are \"stack\" and \"scroll\".",
+                            "deprecated": "since version 9.2.0"
+                        },
+                        {
+                            "name": "rowEditorCancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Icon to display in the row editor cancel button."
+                        },
+                        {
+                            "name": "rowEditorInitIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Icon to display in the row editor init button."
+                        },
+                        {
+                            "name": "rowEditorSaveIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "default": "",
+                            "description": "Icon to display in the row editor save button."
+                        },
+                        {
+                            "name": "rowGroupFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableRowGroupFooterTemplateType<TValue>",
+                            "default": "",
+                            "description": "Function to provide the content of row group footer."
+                        },
+                        {
+                            "name": "rowGroupHeaderTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableRowGroupHeaderTemplateType<TValue>",
+                            "default": "",
+                            "description": "Function to provide the content of row group header."
+                        },
+                        {
+                            "name": "rowGroupMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines the row grouping mode, valid values are \"subheader\" and \"rowgroup\"."
+                        },
+                        {
+                            "name": "rowHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When enabled, background of the rows change on hover."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of rows to display per page."
+                        },
+                        {
+                            "name": "rowsPerPageOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "default": "",
+                            "description": "Array of integer values to display inside rows per page dropdown."
+                        },
+                        {
+                            "name": "scrollable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, enables horizontal and/or vertical scrolling."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Height of the scroll viewport."
+                        },
+                        {
+                            "name": "selectAll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, selects all rows on page."
+                        },
+                        {
+                            "name": "selection",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "null | DataTableCellSelection<TValue>[]",
+                            "default": "",
+                            "description": "Selected cells."
+                        },
+                        {
+                            "name": "selectionAriaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A field property from the row to add Select {field} and Unselect {field} ARIA labels to checkbox/radio buttons."
+                        },
+                        {
+                            "name": "selectionAutoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When a selectable row is clicked on RadioButton and Checkbox selection, it automatically decides whether to focus on elements such as checkbox or radio."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"multiple\"",
+                            "default": "",
+                            "description": "Specifies the selection mode, valid values are \"single\", \"multiple\", \"radiobutton\" and \"checkbox\"."
+                        },
+                        {
+                            "name": "selectionPageOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page."
+                        },
+                        {
+                            "name": "selectOnEdit",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Determines whether the cell editor will be opened when clicking to select any row on Selection and Cell Edit modes."
+                        },
+                        {
+                            "name": "showGridlines",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show grid lines between cells."
+                        },
+                        {
+                            "name": "showHeaders",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show headers."
+                        },
+                        {
+                            "name": "showSelectAll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether to show the select all checkbox inside the datatable's header."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"small\" | \"normal\" | \"large\"",
+                            "default": "normal",
+                            "description": "Define to set alternative sizes. Valid values: \"small\", \"normal\" and \"large\"."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property of a row data used for sorting, defaults to field."
+                        },
+                        {
+                            "name": "sortIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTable<TValue>, Object>",
+                            "default": "",
+                            "description": "Icon to display the current sorting status."
+                        },
+                        {
+                            "name": "sortMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"single\"",
+                            "default": "single",
+                            "description": "Defines whether sorting works on single column or on multiple columns."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SortOrder",
+                            "default": "",
+                            "description": "Order to sort the data by default."
+                        },
+                        {
+                            "name": "stateKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of a stateful table to use in state storage."
+                        },
+                        {
+                            "name": "stateStorage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"custom\" | \"local\" | \"session\"",
+                            "default": "session",
+                            "description": "Defines where a stateful table keeps its state, valid values are \"session\" for sessionStorage, \"local\" for localStorage and \"custom\"."
+                        },
+                        {
+                            "name": "stripedRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to displays rows with alternating colors."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tableClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the table element."
+                        },
+                        {
+                            "name": "tableStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the table element."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of total records, defaults to length of value when not defined."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TValue",
+                            "default": "",
+                            "description": "An array of objects to display."
+                        },
+                        {
+                            "name": "virtualScrollerOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "default": "",
+                            "description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.\n\nNote: Currently only vertical orientation mode is supported."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "cellClassName",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Value of the cell."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableCellClassNameOptions<TValue>",
+                                    "description": "ClassName options."
+                                }
+                            ],
+                            "returnType": "undefined | string | object",
+                            "description": "Function that takes the cell data and returns an object in {'styleclass' : condition} format to define a classname for a particular now."
+                        },
+                        {
+                            "name": "customRestoreState",
+                            "parameters": [],
+                            "returnType": "undefined | object",
+                            "description": "A function to implement custom restoreState with stateStorage=\"custom\". Need to return state object."
+                        },
+                        {
+                            "name": "customSaveState",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "The object to be stored."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "A function to implement custom saveState with stateStorage=\"custom\"."
+                        },
+                        {
+                            "name": "exportFunction",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableExportFunctionEvent<TValue>",
+                                    "description": "Custom export function event."
+                                }
+                            ],
+                            "returnType": "any",
+                            "description": "A function to implement custom export. Need to return string value."
+                        },
+                        {
+                            "name": "isDataSelectable",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableDataSelectableEvent",
+                                    "description": "Custom data selectable event."
+                                }
+                            ],
+                            "returnType": "null | boolean",
+                            "description": "Function that returns a boolean to decide whether the data should be selectable."
+                        },
+                        {
+                            "name": "onAllRowsSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableSelectEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when all rows are selected using the header checkbox."
+                        },
+                        {
+                            "name": "onAllRowsUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableUnselectEvent",
+                                    "description": "Custom unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when all rows are unselected using the header checkbox."
+                        },
+                        {
+                            "name": "onCellClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableCellClickEvent<TValue>",
+                                    "description": "Custom cell click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on cell click."
+                        },
+                        {
+                            "name": "onCellSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableCellClickEvent<TValue>",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on cell select."
+                        },
+                        {
+                            "name": "onCellUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableCellClickEvent<TValue>",
+                                    "description": "Custom unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on cell unselect."
+                        },
+                        {
+                            "name": "onColReorder",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColReorderEvent",
+                                    "description": "Custom column reorder event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a column is reordered."
+                        },
+                        {
+                            "name": "onColumnResizeEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColumnResizeEndEvent",
+                                    "description": "Custom column resize end event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a column is resized."
+                        },
+                        {
+                            "name": "onColumnResizerClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColumnResizerClickEvent",
+                                    "description": "Custom column resizer click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a resizer element is clicked."
+                        },
+                        {
+                            "name": "onColumnResizerDoubleClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColumnResizerClickEvent",
+                                    "description": "Custom column resizer double click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a resizer element is double clicked."
+                        },
+                        {
+                            "name": "onContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEvent",
+                                    "description": "Custom row event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a context menu is clicked."
+                        },
+                        {
+                            "name": "onContextMenuSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableContextMenuMultipleSelectionChangeEvent<TValue>",
+                                    "description": "Custom row event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row selected with right click."
+                        },
+                        {
+                            "name": "onFilter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableStateEvent",
+                                    "description": "Custom state event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on filtering."
+                        },
+                        {
+                            "name": "onPage",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableStateEvent",
+                                    "description": "Custom state event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on pagination."
+                        },
+                        {
+                            "name": "onRowClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowClickEvent",
+                                    "description": "Custom row click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is clicked."
+                        },
+                        {
+                            "name": "onRowCollapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEvent",
+                                    "description": "Custom row event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is collapsed."
+                        },
+                        {
+                            "name": "onRowDoubleClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowClickEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is double clicked."
+                        },
+                        {
+                            "name": "onRowEditCancel",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditEvent",
+                                    "description": "Custom row edit event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the cancel icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "onRowEditChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditEvent",
+                                    "description": "Custom row edit event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the editing icon is clicked on row editing mode. Use in conjuction with editingRows value from the Datatable to programmatically control editing rows."
+                        },
+                        {
+                            "name": "onRowEditComplete",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditCompleteEvent",
+                                    "description": "Custom row edit complete event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when row edit is completed."
+                        },
+                        {
+                            "name": "onRowEditInit",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditEvent",
+                                    "description": "Custom row edit event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the editing icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "onRowEditSave",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditSaveEvent<TValue>",
+                                    "description": "Custom row edit save event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the save icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "onRowExpand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEvent",
+                                    "description": "Custom row event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is expanded."
+                        },
+                        {
+                            "name": "onRowMouseEnter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowMouseEvent",
+                                    "description": "Custom row mouse event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is hovered with mouse."
+                        },
+                        {
+                            "name": "onRowMouseLeave",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowMouseEvent",
+                                    "description": "Custom row mouse event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is navigated away from with mouse."
+                        },
+                        {
+                            "name": "onRowPointerDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerDown event occurs."
+                        },
+                        {
+                            "name": "onRowPointerUp",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerUp event occurs."
+                        },
+                        {
+                            "name": "onRowReorder",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowReorderEvent<TValue>",
+                                    "description": "Custom row reorder event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to update the new order."
+                        },
+                        {
+                            "name": "onRowSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableSelectEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is selected."
+                        },
+                        {
+                            "name": "onRowToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowToggleEvent",
+                                    "description": "Custom row toggle event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is toggled or collapsed."
+                        },
+                        {
+                            "name": "onRowUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableUnselectEvent",
+                                    "description": "Custom unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is unselected."
+                        },
+                        {
+                            "name": "onSelectAllChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableSelectAllChangeEvent",
+                                    "description": "Custom select all change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when select all value changes."
+                        },
+                        {
+                            "name": "onSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableSelectionCellMultipleChangeEvent<TValue>",
+                                    "description": "Custom selection change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selection changes."
+                        },
+                        {
+                            "name": "onSort",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableStateEvent",
+                                    "description": "Custom state event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on sort."
+                        },
+                        {
+                            "name": "onStateRestore",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is restored."
+                        },
+                        {
+                            "name": "onStateSave",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is saved."
+                        },
+                        {
+                            "name": "onValueChange",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "DataTableRowDataArray<TValue>",
+                                    "description": "Value displayed by the table."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke after filtering and sorting to pass the rendered value."
+                        },
+                        {
+                            "name": "rowClassName",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Value displayed by the table."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableRowClassNameOptions<TValue>"
+                                }
+                            ],
+                            "returnType": "undefined | string | object",
+                            "description": "Function that takes the row data and returns an object in {'styleclass' : condition} format to define a classname for a particular now."
+                        },
+                        {
+                            "name": "rowEditValidator",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableRowEditValidatorOptions<TValue>"
+                                }
+                            ],
+                            "returnType": "boolean",
+                            "description": "Callback to invoke to validate the editing row when the save icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "rowExpansionTemplate",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableRowExpansionTemplate",
+                                    "description": "Options for the row expansion template."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that receives the row data as the parameter and returns the expanded row content. You can override the rendering of the content by setting options.customRendering = true."
+                        },
+                        {
+                            "name": "showRowReorderElement",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableShowRowReorderElementOptions<TValue>",
+                                    "description": "Options for the row reorder element."
+                                }
+                            ],
+                            "returnType": "null | boolean",
+                            "description": "Function that returns a boolean by passing the row data to decide if the row reorder element should be displayed per row."
+                        },
+                        {
+                            "name": "showSelectionElement",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableShowSelectionElementOptions<TValue>",
+                                    "description": "Options for the row reorder element."
+                                }
+                            ],
+                            "returnType": "null | boolean",
+                            "description": "Function that returns a boolean by passing the row data to decide if the radio or checkbox should be displayed per row."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "DataTableRowToggleEvent": {
+                    "description": "Custom row toggle event.",
+                    "relatedProp": "onRowToggle",
+                    "props": [
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[] | DataTableExpandedRows",
+                            "description": "Expanded rows."
+                        }
+                    ]
+                },
+                "DataTableColumnResizeEndEvent": {
+                    "description": "Custom resize end event.",
+                    "relatedProp": "onColumnResizeEnd",
+                    "props": [
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLElement",
+                            "description": "DOM element of the resized column."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Properties of the resized column."
+                        },
+                        {
+                            "name": "delta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Change in column width."
+                        }
+                    ]
+                },
+                "DataTableColumnResizerClickEvent": {
+                    "description": "Custom column resizer click event.",
+                    "relatedProp": "onColumnResizerClick",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLElement",
+                            "description": "DOM element of the column."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Properties of the column."
+                        }
+                    ]
+                },
+                "DataTablePageEvent": {
+                    "description": "Custom pagination event",
+                    "relatedProp": "onPage",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the first row."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Rows per page."
+                        },
+                        {
+                            "name": "page",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The page number of the datatable."
+                        },
+                        {
+                            "name": "pageCount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of pages."
+                        }
+                    ],
+                    "extendedBy": "DataTableStateEvent"
+                },
+                "DataTableSortEvent": {
+                    "description": "Custom sort event.",
+                    "relatedProp": "onSort",
+                    "props": [
+                        {
+                            "name": "sortField",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field to sort against."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | 0 | 1 | -1",
+                            "description": "Sort order as integer."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | DataTableSortMeta[]",
+                            "description": "MultiSort metadata."
+                        }
+                    ],
+                    "extendedBy": "DataTableStateEvent"
+                },
+                "DataTableFilterEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "onFilter",
+                    "props": [
+                        {
+                            "name": "filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableFilterMeta",
+                            "description": "Collection of active filters."
+                        }
+                    ],
+                    "extendedBy": "DataTableStateEvent"
+                },
+                "DataTableStateEvent": {
+                    "description": "Custom state event containing page, filter and sort states.",
+                    "relatedProp": " - ",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the first row."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Rows per page."
+                        },
+                        {
+                            "name": "page",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The page number of the datatable."
+                        },
+                        {
+                            "name": "pageCount",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of pages."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field to sort against."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | 0 | 1 | -1",
+                            "description": "Sort order as integer."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | DataTableSortMeta[]",
+                            "description": "MultiSort metadata."
+                        },
+                        {
+                            "name": "filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableFilterMeta",
+                            "description": "Collection of active filters."
+                        }
+                    ]
+                },
+                "DataTableDataSelectableEvent": {
+                    "description": "Custom data selectable event.",
+                    "relatedProp": "isDataSelectable",
+                    "props": [
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original data of the row."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        }
+                    ]
+                },
+                "DataTableContextMenuSingleSelectionChangeEvent": {
+                    "description": "Custom selection change event for context menu in single select mode.",
+                    "relatedProp": "DataTableProps.onContextMenuSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TValue[number]",
+                            "description": "Selection object."
+                        }
+                    ]
+                },
+                "DataTableContextMenuMultipleSelectionChangeEvent": {
+                    "description": "Custom selection change event for context menu in multiple select mode.",
+                    "relatedProp": "DataTableProps.onContextMenuSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TValue",
+                            "description": "Selection object."
+                        }
+                    ]
+                },
+                "DataTableSelectionMultipleChangeEvent": {
+                    "description": "Custom multiple selection change event.",
+                    "relatedProp": "DataTableProps.onSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TValue",
+                            "description": "Selection objects."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"all\" | \"multiple\" | \"checkbox\" | \"row\"",
+                            "description": "Type of the selection."
+                        }
+                    ]
+                },
+                "DataTableSelectionSingleChangeEvent": {
+                    "description": "Custom single selection change event.",
+                    "relatedProp": "DataTableProps.onSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TValue[number]",
+                            "description": "Selection object."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"radio\" | \"row\" | \"single\"",
+                            "description": "Type of the selection."
+                        }
+                    ]
+                },
+                "DataTableSelectionCellSingleChangeEvent": {
+                    "description": "Custom cell single selection change event.",
+                    "relatedProp": "DataTableProps.onSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableCellSelection<TValue>",
+                            "description": "Selection objects."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"cell\"",
+                            "description": "Type of the selection."
+                        }
+                    ]
+                },
+                "DataTableSelectionCellMultipleChangeEvent": {
+                    "description": "Custom cell multiple selection change event.",
+                    "relatedProp": "DataTableProps.onSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableCellSelection<TValue>[]",
+                            "description": "Selection objects."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"cell\"",
+                            "description": "Type of the selection."
+                        }
+                    ]
+                },
+                "DataTableRowEvent": {
+                    "description": "Custom context menu event.",
+                    "relatedProp": "onContextMenu",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Original event instance."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        }
+                    ],
+                    "extendedBy": "DataTableRowEditEvent,DataTableRowEditCompleteEvent"
+                },
+                "DataTableRowPointerEvent": {
+                    "description": "Custom row pointer event.",
+                    "relatedProp": "onRowPointerDown",
+                    "props": [
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        },
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PointerEvent<HTMLElement>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Clicked row data index"
+                        }
+                    ]
+                },
+                "DataTableRowClickEvent": {
+                    "description": "Custom row click event.",
+                    "relatedProp": "onRowClick",
+                    "props": [
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        },
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Clicked row data index"
+                        }
+                    ]
+                },
+                "DataTableRowEditEvent": {
+                    "description": "Custom row edit event.",
+                    "relatedProp": "onRowEditInit",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Original event instance."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        }
+                    ],
+                    "extendedBy": "DataTableRowEditSaveEvent"
+                },
+                "DataTableRowEditCompleteEvent": {
+                    "description": "Custom row edit complete event.",
+                    "relatedProp": "onRowEditComplete",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Original event instance."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        },
+                        {
+                            "name": "newData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Editing rows data."
+                        },
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Column field."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current editing row data index."
+                        }
+                    ]
+                },
+                "DataTableSelectEvent": {
+                    "description": "Custom select event.",
+                    "relatedProp": "onAllRowsSelect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Selected rows data."
+                        },
+                        {
+                            "name": "type",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | \"all\" | \"checkbox\" | \"radio\" | \"cell\" | \"row\"",
+                            "description": "Type of the selection, valid value is \"all\"."
+                        }
+                    ],
+                    "extendedBy": "DataTableUnselectEvent"
+                },
+                "DataTableUnselectEvent": {
+                    "description": "Custom unselect event.",
+                    "relatedProp": "onAllRowsUnselect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Selected rows data."
+                        },
+                        {
+                            "name": "type",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | \"all\" | \"checkbox\" | \"radio\" | \"cell\" | \"row\"",
+                            "description": "Type of the selection, valid value is \"all\"."
+                        }
+                    ]
+                },
+                "DataTableExportFunctionEvent": {
+                    "description": "Custom export function event.",
+                    "relatedProp": "exportFunction",
+                    "props": [
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableRowDataArray<TValue>",
+                            "description": "Field data."
+                        },
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Column field."
+                        },
+                        {
+                            "name": "rowData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableRowData<TValue>",
+                            "description": "Data of the row."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Column."
+                        }
+                    ]
+                },
+                "DataTableColReorderEvent": {
+                    "description": "Custom column reorder event.",
+                    "relatedProp": "onColReorder",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DragEvent<HTMLElement>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "dragIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the dragged column."
+                        },
+                        {
+                            "name": "dropIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the dropped column."
+                        },
+                        {
+                            "name": "columns",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column[]",
+                            "description": "Columns array after reorder."
+                        }
+                    ]
+                },
+                "DataTableRowReorderEvent": {
+                    "description": "Custom column reorder event.",
+                    "relatedProp": "onRowReorder",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DragEvent<HTMLElement>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableRowDataArray<TValue>",
+                            "description": "New value after reorder."
+                        },
+                        {
+                            "name": "dragIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the dragged row."
+                        },
+                        {
+                            "name": "dropIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the drop location."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DataTableHeaderTemplateOptions": {
+                    "description": "Custom datatable header template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "DataTableFooterTemplateOptions"
+                },
+                "DataTableFooterTemplateOptions": {
+                    "description": "Custom datatable header template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "DataTableHeaderTemplateOptions<TValue>"
+                },
+                "DataTableRowGroupHeaderTemplateOptions": {
+                    "description": "Custom datatable row group header template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "index of the row group header template."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        },
+                        {
+                            "name": "customRendering",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Used to override the rendering of the content."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "DataTableRowGroupFooterTemplateOptions"
+                },
+                "DataTableRowGroupFooterTemplateOptions": {
+                    "description": "Custom datatable row group footer template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "index of the row group header template."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<T>",
+                            "description": "The props of the datatable."
+                        },
+                        {
+                            "name": "customRendering",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Used to override the rendering of the content."
+                        },
+                        {
+                            "name": "colSpan",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of columns to span for grouping."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "DataTableRowGroupHeaderTemplateOptions<T>"
+                },
+                "DataTableSortMeta": {
+                    "description": "Custom datatable sort meta",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Column field to sort against."
+                        },
+                        {
+                            "name": "order",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | 0 | 1 | -1",
+                            "description": "Sort order as integer."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableFilterMetaData": {
+                    "description": "Custom datatable filter metadata.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Value to filter against."
+                        },
+                        {
+                            "name": "matchMode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
+                            "description": "Type of filter match."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableOperatorFilterMetaData": {
+                    "description": "Custom datatable operator filter metadata.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "operator",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Operator to use for filtering."
+                        },
+                        {
+                            "name": "constraints",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableFilterMetaData[]",
+                            "description": "Operator to use for filtering."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableFilterMeta": {
+                    "description": "Custom datatable filter meta.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableFilterMetaData | DataTableOperatorFilterMetaData"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableExpandedRows": {
+                    "description": "Custom datatable expanded rows.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableEditingRows": {
+                    "description": "Custom datatable editing rows.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableSelectAllChangeEvent": {
+                    "description": "Custom select all change event.",
+                    "relatedProp": "onSelectAllChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether all data is selected."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableRowMouseEvent": {
+                    "description": "Custom row mouse event.",
+                    "relatedProp": "onRowMouseEnter",
+                    "props": [
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        },
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Clicked row data index"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "DataTableRowClickEvent",
+                    "extendedTypes": "Omit<DataTableRowEvent, \"originalEvent\">"
+                },
+                "DataTableCellClickEvent": {
+                    "description": "Custom cell click event.",
+                    "relatedProp": "onCellClick",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Value of the cell."
+                        },
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Column field."
+                        },
+                        {
+                            "name": "rowData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableRowData<TValue>",
+                            "description": "Data of the row."
+                        },
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        },
+                        {
+                            "name": "cellIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the cell."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the cell is selected or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableRowEditSaveEvent": {
+                    "description": "Custom row edit save event.",
+                    "relatedProp": "onRowEditSave",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Original event instance."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableValue",
+                            "description": "Original rows data."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        },
+                        {
+                            "name": "valid",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the row is valid or not."
+                        },
+                        {
+                            "name": "newData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableRowData<TValue>",
+                            "description": "Editing row data."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "DataTableRowEditEvent"
+                },
+                "DataTableRowExpansionTemplate": {
+                    "description": "Options for the row expansion template",
+                    "relatedProp": "rowExpansionTemplate",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        },
+                        {
+                            "name": "customRendering",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Used to override the rendering of the content."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableRowClassNameOptions": {
+                    "description": "Custom row className options.",
+                    "relatedProp": "rowClassName",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableCellClassNameOptions": {
+                    "description": "Custom cell className options.",
+                    "relatedProp": "cellClassName",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Column element of the datatable."
+                        },
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Column field."
+                        },
+                        {
+                            "name": "frozenRow",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the row is frozen or not."
+                        },
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableShowSelectionElementOptions": {
+                    "description": "Custom show selection element options.",
+                    "relatedProp": "showSelectionElement",
+                    "props": [
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableShowRowReorderElementOptions": {
+                    "description": "Custom show row reorder element options.",
+                    "relatedProp": "showRowReorderElement",
+                    "props": [
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row element."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableRowEditValidatorOptions": {
+                    "description": "Custom row edit validator options.",
+                    "relatedProp": "rowEditValidator",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>",
+                            "description": "The props of the datatable."
+                        },
+                        {
+                            "name": "rowIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of validated row"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableValue": {
+                    "description": "Custom value definition.",
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": [],
+                    "extendedTypes": "Record<string, any>"
+                },
+                "DataTableValueArray": {
+                    "description": "Custom value array definition.",
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": [],
+                    "extendedTypes": "Array<DataTableValue>"
+                },
+                "DataTablePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableProps<TValue>"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableState": {
+                    "description": "Defines current inline state in DataTable component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of first record as a number."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current number of rows to display in new page as a number."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | string | Function",
+                            "description": "Current sort field."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current order to sort the data by default."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableSortMeta[]",
+                            "description": "Current sortmeta objects to sort the data."
+                        },
+                        {
+                            "name": "filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableFilterMeta",
+                            "description": "Current filters object."
+                        },
+                        {
+                            "name": "columnOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "Current order of the columns."
+                        },
+                        {
+                            "name": "groupRowsSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableSortMeta",
+                            "description": "Current group sortmeta objects to sort the data."
+                        },
+                        {
+                            "name": "editingMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "description": "Current editing meta data."
+                        },
+                        {
+                            "name": "d_rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current number of rows to display in new page as a number."
+                        },
+                        {
+                            "name": "d_filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "object",
+                            "description": "Current filters object."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableContext": {
+                    "description": "Defines current options in DataTable component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "scrollable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current scrollable state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTablePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the loading overlay's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptions",
+                            "description": "Uses to pass attributes to the Paginator component."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableElement>>",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "virtualScrollerSpacer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the virtual scroller spacer's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "thead",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the thead's DOM element."
+                        },
+                        {
+                            "name": "headerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the header row's DOM element."
+                        },
+                        {
+                            "name": "tbody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the tbody's DOM element."
+                        },
+                        {
+                            "name": "rowGroupHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the rowgroup header's DOM element."
+                        },
+                        {
+                            "name": "rowGroupHeaderName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the rowgroup header name's DOM element."
+                        },
+                        {
+                            "name": "bodyRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the row's DOM element."
+                        },
+                        {
+                            "name": "rowExpansion",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the row expansion's DOM element."
+                        },
+                        {
+                            "name": "rowGroupFooter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the rowgroup footer's DOM element."
+                        },
+                        {
+                            "name": "rowGroupToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the rowgroup toggler's DOM element."
+                        },
+                        {
+                            "name": "rowGroupTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the rowgroup toggler icon's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "tfoot",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the tfoot's DOM element."
+                        },
+                        {
+                            "name": "footerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the footerr ow's DOM element."
+                        },
+                        {
+                            "name": "footerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the footer cell's DOM element."
+                        },
+                        {
+                            "name": "resizeHelper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the resize helper's DOM element."
+                        },
+                        {
+                            "name": "reorderIndicatorUp",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the reorder indicator up's DOM element."
+                        },
+                        {
+                            "name": "reorderIndicatorUpIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the reorder indicator up icon's DOM element."
+                        },
+                        {
+                            "name": "reorderIndicatorDown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the reorder indicator down's DOM element."
+                        },
+                        {
+                            "name": "reorderIndicatorDownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the reorder indicator down icon's DOM element."
+                        },
+                        {
+                            "name": "columnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughOptions",
+                            "description": "Used to pass attributes to the ColumnGroup helper components."
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RowPassThroughOptions",
+                            "description": "Used to pass attributes to the Row helper components."
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptions",
+                            "description": "Used to pass attributes to the Column helper components."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableBodyRowContext": {
+                    "description": "Defines current options in DataTable BodyRow which is the table <TR> element.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the row is selected."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the row is selectable."
+                        },
+                        {
+                            "name": "stripedRows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the rows have striped styling."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the row. Note: this is not the index of the value array its the index of the row <TR in the table."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableBodyRowState": {
+                    "description": "Defines current inline state in DataTable BodyRow which is the table <TR> element.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "editing",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the row is in editing mode."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableBodyRowPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method for BodyRow which is the table <TR> element.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "hostName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Name of the component."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableBodyRowContext",
+                            "description": "Current context of the bodyRow."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTablePassThroughMethodOptions<TValue>",
+                            "description": "Parent options."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableBaseProps<TValue>",
+                            "description": "Component props."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataTableBodyRowState",
+                            "description": "Current state of the bodyRow."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataTableBaseProps": {
+                    "description": "Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TValue",
+                            "description": "An array of objects to display."
+                        },
+                        {
+                            "name": "alwaysShowPaginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to show it even there is only one page."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The breakpoint to define the maximum width boundary when using stack responsive layout."
+                        },
+                        {
+                            "name": "cellMemo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to enable cell memoization.\n\nWhen the memoization is enabled, be sure to:\n     1- Update the value prop (i.e., row data) to trigger a re-render of the cells of a given row.\n     2- Where necessary, use the spread operator (...) when updating the value prop objs which creates new fresh\n     objects and avoids mutating the same objects.\n\nWhen the memoization is disabled, a re-render of the datatable will trigger a re-render of all cells, which can\nlead to performance issues with large datasets and is therefore not recommended."
+                        },
+                        {
+                            "name": "cellMemoProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "The cell props to be checked at memoization.\n\nPossible cell props are:\n    'hostName', 'allowCellSelection', 'cellMemo', 'cellMemoProps', 'cellMemoPropsDepth', 'cellClassName', 'checkIcon', 'collapsedRowIcon',\n    'field', 'resolveFieldData', 'column', 'cProps', 'dataKey', 'editMode', 'editing', 'editingMeta', 'onEditingMetaChange', 'editingKey',\n    'getEditingRowData', 'expanded', 'expandedRowIcon', 'frozenRow', 'frozenCol', 'alignFrozenCol', 'index', 'isSelectable', 'onCheckboxChange',\n    'onClick', 'onMouseDown', 'onMouseUp', 'onRadioChange', 'onRowEditCancel', 'onRowEditInit', 'onRowEditSave', 'onRowToggle', 'responsiveLayout',\n    'rowData', 'rowEditorCancelIcon', 'rowEditorInitIcon', 'rowEditorSaveIcon', 'rowIndex', 'rowSpan', 'selectOnEdit', 'isRowSelected', 'isCellSelected',\n    'selectionAriaLabel', 'showRowReorderElement', 'showSelectionElement', 'tabIndex', 'getTabIndex', 'tableProps', 'tableSelector', 'value',\n    'getVirtualScrollerOption', 'ptCallbacks', 'metaData', 'unstyled', 'findNextSelectableCell', 'findPrevSelectableCell', 'findDownSelectableCell',\n    'findUpSelectableCell', 'focusOnElement', 'focusOnInit', 'updateStickyPosition'\n\nIMPORTANT: Including a function to be checked will in general disable the memoization in practice, since functions are\ncompared by reference."
+                        },
+                        {
+                            "name": "cellMemoPropsDepth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The comparison depth when checking cell props (e.g., rowData) at memoization."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Icon to display in the checkbox."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "collapsedRowIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Icon of the row toggler to display the row as collapsed."
+                        },
+                        {
+                            "name": "columnResizeMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"expand\" | \"fit\"",
+                            "description": "Used to define the resize mode of the columns, valid values are \"fit\" and \"expand\"."
+                        },
+                        {
+                            "name": "compareSelectionBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"equals\" | \"deepEquals\"",
+                            "description": "Algorithm to define if a row is selected, valid values are \"equals\" that compares by reference and \"deepEquals\" that compares all fields."
+                        },
+                        {
+                            "name": "contextMenuSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "description": "Selected row in single mode or an array of values in multiple mode."
+                        },
+                        {
+                            "name": "csvSeparator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Character to use as the csv separator."
+                        },
+                        {
+                            "name": "currentPageReportTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Template of the current page report element. Available placeholders are &#123;currentPage&#125;, &#123;totalPages&#125;, &#123;rows&#125;, &#123;first&#125;, &#123;last&#125; and &#123;totalRecords&#125;"
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "description": "Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering."
+                        },
+                        {
+                            "name": "defaultSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | 0 | 1 | -1",
+                            "description": "Default sort order of an unsorted column."
+                        },
+                        {
+                            "name": "dragSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, a rectangle that can be dragged can be used to make a range selection."
+                        },
+                        {
+                            "name": "editMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Defines editing mode, options are \"cell\" and \"row\"."
+                        },
+                        {
+                            "name": "editingRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableValueArray | DataTableEditingRows",
+                            "description": "A collection of rows to represent the current editing data in row edit mode."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "Text to display when there is no data."
+                        },
+                        {
+                            "name": "expandableRowGroups",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Makes row groups toggleable, default is false."
+                        },
+                        {
+                            "name": "expandedRowIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Icon of the row toggler to display the row as expanded."
+                        },
+                        {
+                            "name": "expandedRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableValueArray | DataTableExpandedRows",
+                            "description": "A collection of rows or a map object row data keys that are expanded."
+                        },
+                        {
+                            "name": "exportFilename",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Name of the exported file."
+                        },
+                        {
+                            "name": "filterDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Delay in milliseconds before filtering the data."
+                        },
+                        {
+                            "name": "filterDisplay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"menu\" | \"row\"",
+                            "description": "Layout of the filter elements, valid values are \"row\" and \"menu\"."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTable<TValue>>",
+                            "description": "Icon to display the current filtering status."
+                        },
+                        {
+                            "name": "filterClearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTable<TValue>>",
+                            "description": "Icon to display when the filter can be cleared."
+                        },
+                        {
+                            "name": "filters",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableFilterMeta",
+                            "description": "An array of FilterMetadata objects to provide external filters."
+                        },
+                        {
+                            "name": "first",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the first row to be displayed."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableFooterTemplateType<TValue>",
+                            "description": "Custom footer content of the table."
+                        },
+                        {
+                            "name": "footerColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "ColumnGroup component for footer."
+                        },
+                        {
+                            "name": "frozenValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableRowDataArray<TValue>",
+                            "description": "Items of the frozen part in scrollable DataTable."
+                        },
+                        {
+                            "name": "frozenWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Width of the frozen part in scrollable DataTable."
+                        },
+                        {
+                            "name": "frozenRow",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "boolean",
+                            "description": "Whether the row is frozen or not. Read-Only necessary for unstyled TypeScript definition."
+                        },
+                        {
+                            "name": "globalFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string",
+                            "description": "Value of the global filter to use in filtering."
+                        },
+                        {
+                            "name": "globalFilterFields",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "Define fields to be filtered globally."
+                        },
+                        {
+                            "name": "globalFilterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                        },
+                        {
+                            "name": "groupRowsBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Used for either be grouped by a separate grouping row or using rowspan."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableHeaderTemplateType<TValue>",
+                            "description": "Custom header content of the table."
+                        },
+                        {
+                            "name": "headerColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "ColumnGroup component for header."
+                        },
+                        {
+                            "name": "lazy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Defines if data is loaded and interacted with in lazy manner."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Displays a loader to indicate data load is in progress."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "The icon to show while indicating data load is in progress."
+                        },
+                        {
+                            "name": "metaKeySelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | DataTableSortMeta[]",
+                            "description": "An array of SortMeta objects to sort the data by default in multiple sort mode."
+                        },
+                        {
+                            "name": "pageLinkSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of page links to display."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When specified as true, enables the pagination."
+                        },
+                        {
+                            "name": "paginatorClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the paginator element."
+                        },
+                        {
+                            "name": "paginatorDropdownAppendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "paginatorLeft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Content for the left side of the paginator."
+                        },
+                        {
+                            "name": "paginatorPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"top\" | \"bottom\"",
+                            "description": "Position of the paginator, options are \"top\",\"bottom\" or \"both\"."
+                        },
+                        {
+                            "name": "paginatorRight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Content for the right side of the paginator."
+                        },
+                        {
+                            "name": "paginatorTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorTemplate",
+                            "description": "Template of the paginator. For details, refer to the template section of the paginator documentation for further options."
+                        },
+                        {
+                            "name": "removableSort",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, columns can have an un-sorted state."
+                        },
+                        {
+                            "name": "reorderableColumns",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, columns can be reordered using drag and drop."
+                        },
+                        {
+                            "name": "reorderableRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, rows can be reordered using drag and drop."
+                        },
+                        {
+                            "name": "reorderIndicatorDownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Defines the reorder indicator down icon."
+                        },
+                        {
+                            "name": "reorderIndicatorUpIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Defines the reorder indicator up icon."
+                        },
+                        {
+                            "name": "resizableColumns",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, columns can be resized using drag and drop."
+                        },
+                        {
+                            "name": "responsiveLayout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"scroll\" | \"stack\"",
+                            "description": "Defines the responsive mode, valid options are \"stack\" and \"scroll\"."
+                        },
+                        {
+                            "name": "rowEditorCancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Icon to display in the row editor cancel button."
+                        },
+                        {
+                            "name": "rowEditorInitIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Icon to display in the row editor init button."
+                        },
+                        {
+                            "name": "rowEditorSaveIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTableProps<TValue>>",
+                            "description": "Icon to display in the row editor save button."
+                        },
+                        {
+                            "name": "rowGroupFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableRowGroupFooterTemplateType<TValue>",
+                            "description": "Function to provide the content of row group footer."
+                        },
+                        {
+                            "name": "rowGroupHeaderTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTableRowGroupHeaderTemplateType<TValue>",
+                            "description": "Function to provide the content of row group header."
+                        },
+                        {
+                            "name": "rowGroupMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Defines the row grouping mode, valid values are \"subheader\" and \"rowgroup\"."
+                        },
+                        {
+                            "name": "rowHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, background of the rows change on hover."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of rows to display per page."
+                        },
+                        {
+                            "name": "rowsPerPageOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "description": "Array of integer values to display inside rows per page dropdown."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Height of the scroll viewport."
+                        },
+                        {
+                            "name": "scrollable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When specified, enables horizontal and/or vertical scrolling."
+                        },
+                        {
+                            "name": "selectAll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When specified, selects all rows on page."
+                        },
+                        {
+                            "name": "selectOnEdit",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Determines whether the cell editor will be opened when clicking to select any row on Selection and Cell Edit modes."
+                        },
+                        {
+                            "name": "selectionAutoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When a selectable row is clicked on RadioButton and Checkbox selection, it automatically decides whether to focus on elements such as checkbox or radio."
+                        },
+                        {
+                            "name": "selectionAriaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "A field property from the row to add Select &#123;field&#125; and Unselect &#123;field&#125; ARIA labels to checkbox/radio buttons."
+                        },
+                        {
+                            "name": "selectionPageOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page."
+                        },
+                        {
+                            "name": "showGridlines",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to show grid lines between cells."
+                        },
+                        {
+                            "name": "showHeaders",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to show headers."
+                        },
+                        {
+                            "name": "showSelectAll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to show the select all checkbox inside the datatable's header."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"small\" | \"normal\" | \"large\"",
+                            "description": "Define to set alternative sizes. Valid values: \"small\", \"normal\" and \"large\"."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Property of a row data used for sorting, defaults to field."
+                        },
+                        {
+                            "name": "sortMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"single\"",
+                            "description": "Defines whether sorting works on single column or on multiple columns."
+                        },
+                        {
+                            "name": "sortIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataTable<TValue>, Object>",
+                            "description": "Icon to display the current sorting status."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SortOrder",
+                            "description": "Order to sort the data by default."
+                        },
+                        {
+                            "name": "stateKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of a stateful table to use in state storage."
+                        },
+                        {
+                            "name": "stateStorage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"custom\" | \"local\" | \"session\"",
+                            "description": "Defines where a stateful table keeps its state, valid values are \"session\" for sessionStorage, \"local\" for localStorage and \"custom\"."
+                        },
+                        {
+                            "name": "stripedRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to displays rows with alternating colors."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tableClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the table element."
+                        },
+                        {
+                            "name": "tableStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the table element."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of total records, defaults to length of value when not defined."
+                        },
+                        {
+                            "name": "virtualScrollerOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.\n\nNote: Currently only vertical orientation mode is supported."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataTablePassThroughOptions",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "data-pr-tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Content to be displayed in tooltip."
+                        },
+                        {
+                            "name": "data-pr-disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When present, it specifies that the tooltip should be hidden."
+                        },
+                        {
+                            "name": "data-pr-classname",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the tooltip."
+                        },
+                        {
+                            "name": "data-pr-position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\" | \"mouse\"",
+                            "description": "Position of the tooltip."
+                        },
+                        {
+                            "name": "data-pr-my",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Defines which position on the tooltip being positioned to align with the target element."
+                        },
+                        {
+                            "name": "data-pr-at",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Defines which position on the target element to align the positioned tooltip."
+                        },
+                        {
+                            "name": "data-pr-event",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"focus\" | \"hover\"",
+                            "description": "Event to show the tooltip."
+                        },
+                        {
+                            "name": "data-pr-showevent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Event to show the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "data-pr-hideevent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Event to hide the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "data-pr-mousetrack",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the tooltip will follow the mouse."
+                        },
+                        {
+                            "name": "data-pr-mousetracktop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "data-pr-mousetrackleft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "data-pr-showdelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Delay to show the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "data-pr-updatedelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Delay to update the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "data-pr-hidedelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Delay to hide the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "data-pr-autohide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to hide tooltip when hovering over tooltip content."
+                        },
+                        {
+                            "name": "data-pr-showondisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to show tooltip for disabled elements."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "cellClassName",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Value of the cell."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableCellClassNameOptions<TValue>",
+                                    "description": "ClassName options."
+                                }
+                            ],
+                            "returnType": "undefined | string | object",
+                            "description": "Function that takes the cell data and returns an object in {'styleclass' : condition} format to define a classname for a particular now."
+                        },
+                        {
+                            "name": "customRestoreState",
+                            "parameters": [],
+                            "returnType": "undefined | object",
+                            "description": "A function to implement custom restoreState with stateStorage=\"custom\". Need to return state object."
+                        },
+                        {
+                            "name": "customSaveState",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "The object to be stored."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "A function to implement custom saveState with stateStorage=\"custom\"."
+                        },
+                        {
+                            "name": "exportFunction",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableExportFunctionEvent<TValue>",
+                                    "description": "Custom export function event."
+                                }
+                            ],
+                            "returnType": "any",
+                            "description": "A function to implement custom export. Need to return string value."
+                        },
+                        {
+                            "name": "isDataSelectable",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableDataSelectableEvent",
+                                    "description": "Custom data selectable event."
+                                }
+                            ],
+                            "returnType": "null | boolean",
+                            "description": "Function that returns a boolean to decide whether the data should be selectable."
+                        },
+                        {
+                            "name": "onAllRowsSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableSelectEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when all rows are selected using the header checkbox."
+                        },
+                        {
+                            "name": "onAllRowsUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableUnselectEvent",
+                                    "description": "Custom unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when all rows are unselected using the header checkbox."
+                        },
+                        {
+                            "name": "onCellClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableCellClickEvent<TValue>",
+                                    "description": "Custom cell click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on cell click."
+                        },
+                        {
+                            "name": "onCellSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableCellClickEvent<TValue>",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on cell select."
+                        },
+                        {
+                            "name": "onCellUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableCellClickEvent<TValue>",
+                                    "description": "Custom unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on cell unselect."
+                        },
+                        {
+                            "name": "onColReorder",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColReorderEvent",
+                                    "description": "Custom column reorder event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a column is reordered."
+                        },
+                        {
+                            "name": "onColumnResizeEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColumnResizeEndEvent",
+                                    "description": "Custom column resize end event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a column is resized."
+                        },
+                        {
+                            "name": "onColumnResizerClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColumnResizerClickEvent",
+                                    "description": "Custom column resizer click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a resizer element is clicked."
+                        },
+                        {
+                            "name": "onColumnResizerDoubleClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableColumnResizerClickEvent",
+                                    "description": "Custom column resizer double click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a resizer element is double clicked."
+                        },
+                        {
+                            "name": "onContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEvent",
+                                    "description": "Custom row event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a context menu is clicked."
+                        },
+                        {
+                            "name": "onFilter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableStateEvent",
+                                    "description": "Custom state event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on filtering."
+                        },
+                        {
+                            "name": "onPage",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableStateEvent",
+                                    "description": "Custom state event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on pagination."
+                        },
+                        {
+                            "name": "onRowClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowClickEvent",
+                                    "description": "Custom row click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is clicked."
+                        },
+                        {
+                            "name": "onRowCollapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEvent",
+                                    "description": "Custom row event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is collapsed."
+                        },
+                        {
+                            "name": "onRowDoubleClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowClickEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is double clicked."
+                        },
+                        {
+                            "name": "onRowPointerDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerDown event occurs."
+                        },
+                        {
+                            "name": "onRowPointerUp",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowPointerEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row pointerUp event occurs."
+                        },
+                        {
+                            "name": "onRowEditCancel",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditEvent",
+                                    "description": "Custom row edit event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the cancel icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "onRowEditChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditEvent",
+                                    "description": "Custom row edit event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the editing icon is clicked on row editing mode. Use in conjuction with editingRows value from the Datatable to programmatically control editing rows."
+                        },
+                        {
+                            "name": "onRowEditComplete",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditCompleteEvent",
+                                    "description": "Custom row edit complete event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when row edit is completed."
+                        },
+                        {
+                            "name": "onRowEditInit",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditEvent",
+                                    "description": "Custom row edit event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the editing icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "onRowEditSave",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEditSaveEvent<TValue>",
+                                    "description": "Custom row edit save event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the save icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "onRowExpand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowEvent",
+                                    "description": "Custom row event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is expanded."
+                        },
+                        {
+                            "name": "onRowMouseEnter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowMouseEvent",
+                                    "description": "Custom row mouse event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is hovered with mouse."
+                        },
+                        {
+                            "name": "onRowMouseLeave",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowMouseEvent",
+                                    "description": "Custom row mouse event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is navigated away from with mouse."
+                        },
+                        {
+                            "name": "onRowReorder",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowReorderEvent<TValue>",
+                                    "description": "Custom row reorder event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to update the new order."
+                        },
+                        {
+                            "name": "onRowSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableSelectEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is selected."
+                        },
+                        {
+                            "name": "onRowToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableRowToggleEvent",
+                                    "description": "Custom row toggle event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is toggled or collapsed."
+                        },
+                        {
+                            "name": "onRowUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableUnselectEvent",
+                                    "description": "Custom unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is unselected."
+                        },
+                        {
+                            "name": "onSelectAllChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableSelectAllChangeEvent",
+                                    "description": "Custom select all change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when select all value changes."
+                        },
+                        {
+                            "name": "onSort",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataTableStateEvent",
+                                    "description": "Custom state event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on sort."
+                        },
+                        {
+                            "name": "onStateRestore",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is restored."
+                        },
+                        {
+                            "name": "onStateSave",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is saved."
+                        },
+                        {
+                            "name": "onValueChange",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "DataTableRowDataArray<TValue>",
+                                    "description": "Value displayed by the table."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke after filtering and sorting to pass the rendered value."
+                        },
+                        {
+                            "name": "rowClassName",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Value displayed by the table."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableRowClassNameOptions<TValue>"
+                                }
+                            ],
+                            "returnType": "undefined | string | object",
+                            "description": "Function that takes the row data and returns an object in {'styleclass' : condition} format to define a classname for a particular now."
+                        },
+                        {
+                            "name": "rowEditValidator",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableRowEditValidatorOptions<TValue>"
+                                }
+                            ],
+                            "returnType": "boolean",
+                            "description": "Callback to invoke to validate the editing row when the save icon is clicked on row editing mode."
+                        },
+                        {
+                            "name": "rowExpansionTemplate",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableRowExpansionTemplate",
+                                    "description": "Options for the row expansion template."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that receives the row data as the parameter and returns the expanded row content. You can override the rendering of the content by setting options.customRendering = true."
+                        },
+                        {
+                            "name": "showRowReorderElement",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableShowRowReorderElementOptions<TValue>",
+                                    "description": "Options for the row reorder element."
+                                }
+                            ],
+                            "returnType": "null | boolean",
+                            "description": "Function that returns a boolean by passing the row data to decide if the row reorder element should be displayed per row."
+                        },
+                        {
+                            "name": "showSelectionElement",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "DataTableRowData<TValue>",
+                                    "description": "Editing row data."
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": false,
+                                    "type": "DataTableShowSelectionElementOptions<TValue>",
+                                    "description": "Options for the row reorder element."
+                                }
+                            ],
+                            "returnType": "null | boolean",
+                            "description": "Function that returns a boolean by passing the row data to decide if the radio or checkbox should be displayed per row."
+                        }
+                    ],
+                    "extendedBy": "DataTablePropsSingle,DataTablePropsMultiple,DataTablePropsCellSingle,DataTablePropsCellMultiple",
+                    "extendedTypes": "Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"size\" | \"onContextMenu\" | \"ref\" | \"value\">"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DataTableHeaderTemplateType": {
+                    "values": "React.ReactNode | Function"
+                },
+                "DataTableFooterTemplateType": {
+                    "values": "React.ReactNode | Function"
+                },
+                "DataTableRowGroupHeaderTemplateType": {
+                    "values": "React.ReactNode | Function"
+                },
+                "DataTableRowGroupFooterTemplateType": {
+                    "values": "React.ReactNode | Function"
+                },
+                "DataTableRowData": {
+                    "values": "TValueArray extends (infer TValue)[] ? TValue : never"
+                },
+                "DataTableRowDataArray": {
+                    "values": "DataTableRowData<TValue>[]"
+                },
+                "DataTableCellSelection": {
+                    "values": "{\n    \"cellIndex\": \"number, // Index of the cell.\",\n    \"column\": \"Column, // Column element of the datatable.\",\n    \"field\": \"string, // Column field.\",\n    \"props\": \"ColumnProps, // Properties of the column.\",\n    \"rowData\": \"DataTableRowData<TValue>, // Data of the row.\",\n    \"rowIndex\": \"number, // Index of the row.\",\n    \"selected\": \"boolean, // Whether the row is selected or not.\",\n    \"value\": \"TValue[number][keyof TValue[number]], // Value of the cell.\"\n}"
+                },
+                "DataTablePassThroughType": {
+                    "values": "PassThroughType<T, DataTablePassThroughMethodOptions<DataTableValueArray>>"
+                },
+                "SortOrder": {
+                    "values": "1 | 0 | -1 | null | undefined",
+                    "description": "Type for sort order values.\n- 1: Ascending order\n- 0: No sorting\n- -1: Descending order\n- null or undefined: No sorting"
+                }
+            }
+        }
+    },
+    "dataview": {
+        "description": "DataView displays data in grid or list layout with pagination and sorting features.\n\n[Live Demo](https://www.primereact.org/dataview/)",
+        "components": {
+            "DataView": {
+                "description": "DataView displays data in grid or list layout with pagination and sorting features.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in DataView component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "alwaysShowPaginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show it even there is only one page."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "currentPageReportTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "({currentPage} of {totalPages})",
+                            "description": "Template of the current page report element."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "No records found.",
+                            "description": "Text to display when there is no data."
+                        },
+                        {
+                            "name": "first",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the first record to render."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Footer content of the component."
+                        },
+                        {
+                            "name": "gutter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the grid structure in the container has gutter. Default value is false."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Header content of the component."
+                        },
+                        {
+                            "name": "layout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"grid\" | \"list\" | string & Record<string, unknown>",
+                            "default": "list",
+                            "description": "Layout of the items, valid values are \"list\" and \"grid\"."
+                        },
+                        {
+                            "name": "lazy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if data is loaded and interacted with in lazy manner."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Display loading icon of the button."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataViewProps>",
+                            "default": "",
+                            "description": "Name of the loading icon or JSX.Element for loading icon."
+                        },
+                        {
+                            "name": "pageLinkSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Number of page links to display."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified as true, enables the pagination."
+                        },
+                        {
+                            "name": "paginatorClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the paginator element."
+                        },
+                        {
+                            "name": "paginatorDropdownAppendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "paginatorLeft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content for the left side of the paginator."
+                        },
+                        {
+                            "name": "paginatorPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"top\" | \"bottom\"",
+                            "default": "bottom",
+                            "description": "Position of the paginator, options are \"top\",\"bottom\" or \"both\"."
+                        },
+                        {
+                            "name": "paginatorRight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content for the right side of the paginator."
+                        },
+                        {
+                            "name": "paginatorTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorTemplate",
+                            "default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
+                            "description": "Template of the paginator. For details, refer to the template section of the paginator documentation for further options."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of rows to display per page."
+                        },
+                        {
+                            "name": "rowsPerPageOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "default": "",
+                            "description": "Array of integer values to display inside rows per page dropdown."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the field to sort data by default."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | 0 | 1 | -1",
+                            "default": "",
+                            "description": "Order to sort the data by default."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of total records, defaults to length of value when not defined."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of objects to display."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "itemTemplate",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current item."
+                                },
+                                {
+                                    "name": "layout",
+                                    "optional": true,
+                                    "type": "\"grid\" | \"list\" | string & Record<string, unknown>",
+                                    "description": "Current layout."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets the option along with the layout mode and returns the content."
+                        },
+                        {
+                            "name": "listTemplate",
+                            "parameters": [
+                                {
+                                    "name": "items",
+                                    "optional": false,
+                                    "type": "any[]",
+                                    "description": "Array of items to be rendered."
+                                },
+                                {
+                                    "name": "layout",
+                                    "optional": true,
+                                    "type": "\"grid\" | \"list\" | string & Record<string, unknown>",
+                                    "description": "Current layout mode."
+                                }
+                            ],
+                            "returnType": "ReactNode | ReactNode[]",
+                            "description": "Function that gets the options along with the layout mode and returns the content."
+                        },
+                        {
+                            "name": "onPage",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataViewPageEvent",
+                                    "description": "Custom page event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on pagination."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "DataViewPageEvent": {
+                    "description": "Custom page event.",
+                    "relatedProp": "onPage",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the first records on page."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of records to display per page."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Value of the new page."
+                        },
+                        {
+                            "name": "pageCount",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of pages."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DataViewPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataViewProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataViewState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataViewLayoutOptionsPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataViewPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptions",
+                            "description": "Uses to pass attributes to the Paginator component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "loadingOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the loading overlay's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "grid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the grid's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataViewState": {
+                    "description": "Defines current inline state in DataView component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of first record as a number."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current number of rows to display in new page as a number."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataViewLayoutOptionsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "DataViewLayoutOptionsProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "listButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the list button's DOM element."
+                        },
+                        {
+                            "name": "listIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the list icon's DOM element."
+                        },
+                        {
+                            "name": "gridButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the grid button's DOM element."
+                        },
+                        {
+                            "name": "gridIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DataViewLayoutOptionsPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the grid icon's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataViewLayoutOptionsChangeEvent": {
+                    "description": "Custom data view layout options event.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLButtonElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"grid\" | \"list\" | string & Record<string, unknown>",
+                            "description": "New value."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DataViewLayoutOptionsProps": {
+                    "description": "Custom data view layout options props",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "layout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"grid\" | \"list\" | string & Record<string, unknown>",
+                            "description": "Orientation of the panels, valid values are \"list\" and \"grid\"."
+                        },
+                        {
+                            "name": "listIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataViewProps>",
+                            "description": "Defines the display mode list icon."
+                        },
+                        {
+                            "name": "gridIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DataViewProps>",
+                            "description": "Defines the display mode grid icon."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "description": "Used to get the child elements of the component."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DataViewLayoutOptionsChangeEvent",
+                                    "description": "Custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Layout options change callback"
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DataViewPassThroughType": {
+                    "values": "PassThroughType<T, DataViewPassThroughMethodOptions>"
+                },
+                "DataViewLayoutOptionsPassThroughType": {
+                    "values": "PassThroughType<T, DataViewLayoutOptionsPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "deferredcontent": {
+        "description": "DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.\n\n[Live Demo](https://www.primereact.org/deferredcontent/)",
+        "components": {
+            "DeferredContent": {
+                "description": "DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in DeferredContent component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DeferredContentPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onLoad",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Event object"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when deferred content is loaded."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DeferredContentPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DeferredContentProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DeferredContentState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DeferredContentPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DeferredContentPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DeferredContentState": {
+                    "description": "Defines current inline state in DeferredContent component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "loaded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current loaded state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DeferredContentPassThroughType": {
+                    "values": "PassThroughType<T, DeferredContentPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "dialog": {
+        "description": "Dialog is a container to display content in an overlay window.\n\n[Live Demo](https://www.primereact.org/dialog)",
+        "components": {
+            "Dialog": {
+                "description": "Dialog is a container to display content in an overlay window.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getCloseButton",
+                            "parameters": [],
+                            "returnType": "null | HTMLButtonElement",
+                            "description": "Used to get close button element."
+                        },
+                        {
+                            "name": "getContent",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get the content element of the dialog"
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get the container element of the dialog."
+                        },
+                        {
+                            "name": "getFooter",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get the dialog's footer element."
+                        },
+                        {
+                            "name": "getHeader",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get the header element of the dialog"
+                        },
+                        {
+                            "name": "getMask",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get mask element."
+                        },
+                        {
+                            "name": "resetPosition",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Reset the dialog's position."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Dialog component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaCloseIconLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines a string that labels the close icon."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "blockScroll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether background scroll should be blocked when dialog is visible."
+                        },
+                        {
+                            "name": "breakpoints",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogBreakpoints",
+                            "default": "",
+                            "description": "Object literal to define widths per screen size."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "closable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the dialog can be closed by clicking the close icon, pressing escape key or clicking the modal background."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DialogProps>",
+                            "default": "",
+                            "description": "Icon to display in the dialog close button."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the dialog."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Specifies a custom content for the dialog. For more complex markup, use the \"content\" slot instead."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the content section."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Style of the content section."
+                        },
+                        {
+                            "name": "dismissableMask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies if clicking the modal background should hide the dialog."
+                        },
+                        {
+                            "name": "draggable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Enables dragging to change the position using header."
+                        },
+                        {
+                            "name": "focusOnShow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, first button receives focus on show."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Footer content of the dialog."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Title content of the dialog."
+                        },
+                        {
+                            "name": "headerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the header section."
+                        },
+                        {
+                            "name": "headerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Style of the header section."
+                        },
+                        {
+                            "name": "icons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom icons template for the header."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "keepInViewport",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Keeps dialog in the viewport."
+                        },
+                        {
+                            "name": "maskClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the mask."
+                        },
+                        {
+                            "name": "maskStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the mask."
+                        },
+                        {
+                            "name": "maximizable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the dialog can be displayed full screen."
+                        },
+                        {
+                            "name": "maximized",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the dialog is initially displayed full screen."
+                        },
+                        {
+                            "name": "maximizeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DialogProps>",
+                            "default": "",
+                            "description": "Icon to display in the dialog maximize button when dialog is not maximized."
+                        },
+                        {
+                            "name": "minimizeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DialogProps>",
+                            "default": "",
+                            "description": "Icon to display in the dialog maximize button when dialog is maximized."
+                        },
+                        {
+                            "name": "minX",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Minimum value for the left coordinate of dialog in dragging."
+                        },
+                        {
+                            "name": "minY",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Minimum value for the top coordinate of dialog in dragging."
+                        },
+                        {
+                            "name": "modal",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines if background should be blocked when dialog is displayed."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"center\" | \"left\" | \"top\" | \"bottom\" | \"right\" | \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\"",
+                            "default": "center",
+                            "description": "Position of the dialog, options are \"center\", \"top\", \"bottom\", \"left\", \"right\", \"top-left\", \"top-right\", \"bottom-left\" or \"bottom-right\"."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "resizable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Enables resizing of the content."
+                        },
+                        {
+                            "name": "rtl",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled dialog is displayed in RTL direction."
+                        },
+                        {
+                            "name": "showCloseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the close icon is displayed in the header."
+                        },
+                        {
+                            "name": "showHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the header or not."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the dialog."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PointerEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog is clicked."
+                        },
+                        {
+                            "name": "onDrag",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DragEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dragging dialog."
+                        },
+                        {
+                            "name": "onDragEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DragEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog dragging is completed."
+                        },
+                        {
+                            "name": "onDragStart",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DragEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog dragging is initiated."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog is hidden (Required)."
+                        },
+                        {
+                            "name": "onMaskClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the mask is clicked."
+                        },
+                        {
+                            "name": "onMaximize",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DialogMaximizeEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when toggle maximize icon is clicked."
+                        },
+                        {
+                            "name": "onResize",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke while resizing dialog."
+                        },
+                        {
+                            "name": "onResizeEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog resizing is completed."
+                        },
+                        {
+                            "name": "onResizeStart",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog resizing is initiated."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dialog is showed."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "DialogMaximizeEvent": {
+                    "description": "Custom complete method event.",
+                    "relatedProp": "onMaximize",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser mouse event."
+                        },
+                        {
+                            "name": "maximized",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, the dialog is initially displayed full screen."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DialogPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DialogProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DialogState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DialogPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header title's DOM element."
+                        },
+                        {
+                            "name": "headerIcons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header icons' DOM element."
+                        },
+                        {
+                            "name": "maximizableButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the maximizable button's DOM element."
+                        },
+                        {
+                            "name": "maximizableIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the maximizable icon's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the close button's component."
+                        },
+                        {
+                            "name": "closeButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the close button icon's component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DialogPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DialogState": {
+                    "description": "Defines current inline state in Dialog component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state of the container as a boolean."
+                        },
+                        {
+                            "name": "maximized",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current maximized state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DialogBreakpoints": {
+                    "description": "Dialog break options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContentProps": {
+                    "description": "Defines current content values and refs for headless development.",
+                    "relatedProp": "content",
+                    "props": [
+                        {
+                            "name": "headerRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLElement>",
+                            "description": "Allows you to specify the header of the content."
+                        },
+                        {
+                            "name": "contentRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLElement>",
+                            "description": "Allows you to specify the content."
+                        },
+                        {
+                            "name": "footerRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLElement>",
+                            "description": "Allows you to specify the footer of the content."
+                        },
+                        {
+                            "name": "closeRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLElement | HTMLButtonElement>",
+                            "description": "Allows you to specify the close button of the dialog."
+                        },
+                        {
+                            "name": "message",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContentPropsMessage",
+                            "description": "Dialog's props values."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "hide",
+                            "parameters": [
+                                {
+                                    "name": "e",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback for hiding the dialog."
+                        }
+                    ]
+                },
+                "ContentPropsMessage": {
+                    "description": "Defines current content values and refs for headless development.",
+                    "relatedProp": "message",
+                    "props": [
+                        {
+                            "name": "header",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string",
+                            "description": "Header of the dialog."
+                        },
+                        {
+                            "name": "content",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string",
+                            "description": "Content of the dialog."
+                        },
+                        {
+                            "name": "message",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string",
+                            "description": "Message of the dialog."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DialogPassThroughType": {
+                    "values": "PassThroughType<T, DialogPassThroughMethodOptions>"
+                },
+                "DialogPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "divider": {
+        "description": "Divider is used to separate contents.\n\n[Live Demo](https://www.primereact.org/divider/)",
+        "components": {
+            "Divider": {
+                "description": "Divider is used to separate contents.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Divider component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "align",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"center\" | \"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "",
+                            "description": "Alignment of the content, options are \"left\", \"center\", \"right\" for horizontal layout and \"top\", \"center\", \"bottom\" for vertical."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "layout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Specifies the orientation, valid values are \"horizontal\" and \"vertical\"."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DividerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"dashed\" | \"dotted\" | \"solid\"",
+                            "default": "solid",
+                            "description": "Border style type, default is \"solid\" and other options are \"dashed\" and \"dotted\"."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DividerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DividerProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DividerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DividerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DividerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DividerPassThroughType": {
+                    "values": "PassThroughType<T, DividerPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "dock": {
+        "description": "Dock is a navigation component consisting of menuitems.\n\n[Live Demo](https://www.primereact.org/dock/)",
+        "components": {
+            "Dock": {
+                "description": "Dock is a navigation component consisting of menuitems.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Dock component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of footer element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of header element."
+                        },
+                        {
+                            "name": "magnification",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether to allow scale animation."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "MenuModel instance to define the action items."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "bottom",
+                            "description": "Position of element. Valid values are 'bottom', 'top', 'left' and 'right'."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dock loses focus."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when dock receives focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DockPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DockPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DockPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DockState": {
+                    "description": "Defines current inline state in Dock component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "currentIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index as a number."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DockContext": {
+                    "description": "Defines current options in Dock component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of the menuitem."
+                        },
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current menuitem"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DockHeaderTemplateOptions": {
+                    "description": "Custom header template",
+                    "relatedProp": "header",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockProps",
+                            "description": "All component props"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "DockFooterTemplateOptions"
+                },
+                "DockFooterTemplateOptions": {
+                    "description": "Custom footer template",
+                    "relatedProp": "footer",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DockProps",
+                            "description": "All component props"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "DockHeaderTemplateOptions"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DockPassThroughType": {
+                    "values": "PassThroughType<T, DockPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "dropdown": {
+        "description": "Dropdown also known as Select, is used to choose an item from a collection of options.\n\n[Live Demo](https://www.primereact.org/dropdown/)",
+        "components": {
+            "Dropdown": {
+                "description": "Dropdown also known as Select, is used to choose an item from a collection of options.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "clear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Clear the currently selected value."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getFocusInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get focusable input element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        },
+                        {
+                            "name": "getVirtualScroller",
+                            "parameters": [],
+                            "returnType": "null | VirtualScroller",
+                            "description": "Used to get the options of inline virtualScroller component."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Hide the dropdown overlay panel."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Show the dropdown overlay panel."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Dropdown component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Used to define a string that labels the component."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "autoOptionFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to focus on the first visible or selected element."
+                        },
+                        {
+                            "name": "checkmark",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the selected option will be shown with a check mark."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DropdownProps>",
+                            "default": "",
+                            "description": "Icon of the dropdown."
+                        },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DropdownProps>",
+                            "default": "",
+                            "description": "Icon of collapse action."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A property to uniquely match the value in options for better performance."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DropdownProps>",
+                            "default": "",
+                            "description": "Icon of the dropdown."
+                        },
+                        {
+                            "name": "editable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, custom value instead of predefined options can be entered using the editable input field."
+                        },
+                        {
+                            "name": "emptyFilterMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No results found",
+                            "description": "Template to display when filtering does not return any results."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No available options",
+                            "description": "Text to display when there are no options available."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, displays an input field to filter the items on keyup."
+                        },
+                        {
+                            "name": "filterBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "label",
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                        },
+                        {
+                            "name": "filterClearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DropdownProps>",
+                            "default": "",
+                            "description": "Icon of the filter to clear."
+                        },
+                        {
+                            "name": "filterDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "300",
+                            "description": "Delay in milliseconds before filtering the data."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DropdownProps>",
+                            "default": "",
+                            "description": "Icon of the filter to search."
+                        },
+                        {
+                            "name": "filterInputAutoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When the panel is opened, it specifies that the filter input should focus automatically."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
+                            "default": "contains",
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when filter input is empty."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of filter element.",
+                            "deprecated": "Since v9.3.0"
+                        },
+                        {
+                            "name": "focusInputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the focusable input element."
+                        },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
+                        {
+                            "name": "highlightOnSelect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the selected option will be add highlight class."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the focusable input."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLSelectElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of items."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Displays a loader to indicate data load is in progress."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<DropdownProps>",
+                            "default": "",
+                            "description": "The icon to show while indicating data load is in progress."
+                        },
+                        {
+                            "name": "maxLength",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum number of characters to be typed on an editable input."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "optionDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
+                        },
+                        {
+                            "name": "optionGroupChildren",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "items",
+                            "description": "Property name or getter function that refers to the children options of option group."
+                        },
+                        {
+                            "name": "optionGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option group."
+                        },
+                        {
+                            "name": "optionGroupTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of an option group item."
+                        },
+                        {
+                            "name": "optionLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the label field of an option when arbitrary objects are used as options instead of SelectItems."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectItemOptionsType",
+                            "default": "",
+                            "description": "An array of selectitems to display as the available options."
+                        },
+                        {
+                            "name": "optionValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the value field of an option when arbitrary objects are used as options instead of SelectItems."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the overlay panel element."
+                        },
+                        {
+                            "name": "panelFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the panel footer."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay panel element."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Default text to display when no option is selected."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "resetFilterOnHide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Clears the filter value when hiding the dropdown."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "200px",
+                            "description": "Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value."
+                        },
+                        {
+                            "name": "selectOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the focused tab is activated."
+                        },
+                        {
+                            "name": "showClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "showFilterClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the filtered value."
+                        },
+                        {
+                            "name": "showOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, overlay panel will be visible with input focus."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "useOptionAsValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether the option should be used as the value for the select element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "valueTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of selected item."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "virtualScrollerOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "default": "",
+                            "description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DropdownChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change"
+                        },
+                        {
+                            "name": "onContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on right-click."
+                        },
+                        {
+                            "name": "onFilter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DropdownFilterEvent",
+                                    "description": "Custom filter event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the value is filtered."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element receives focus."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is hidden."
+                        },
+                        {
+                            "name": "onMouseDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to when a mouse button is pressed."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the overlay is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "DropdownChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<any>"
+                        }
+                    ]
+                },
+                "DropdownFilterEvent": {
+                    "description": "Custom filter event",
+                    "relatedProp": "onFilter",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "filter",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Filter value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "DropdownPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DropdownProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DropdownState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DropdownContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DropdownPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the clear icon's DOM element."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the trigger' DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "filterClearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the filter clear icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "itemGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Used to pass attributes to the item group label's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "itemLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Used to pass attributes to the item label's DOM element."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<SVGSVGElement>>",
+                            "description": "Used to pass attributes to the check icon's DOM element."
+                        },
+                        {
+                            "name": "blankIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<SVGSVGElement>>",
+                            "description": "Used to pass attributes to the bank icon's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "select",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLSelectElement>>",
+                            "description": "Uses to pass attributes to the select's DOM element."
+                        },
+                        {
+                            "name": "option",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLOptionElement>>",
+                            "description": "Uses to pass attributes to the option's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hiddenSelectedMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hidden selected message's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DropdownState": {
+                    "description": "Defines current inline state in Dropdown component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current filter state as a string."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DropdownContext": {
+                    "description": "Defines current options in Dropdown component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selection state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focus state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "DropdownFilterOptions": {
+                    "description": "Custom filter options",
+                    "relatedProp": "filterTemplate",
+                    "props": [
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "reset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "DropdownPassThroughType": {
+                    "values": "PassThroughType<T, DropdownPassThroughMethodOptions>"
+                },
+                "DropdownPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "editor": {
+        "description": "Editor is rich text editor component based on Quill.\n\n[Live Demo](https://www.primereact.org/editor/)",
+        "components": {
+            "Editor": {
+                "description": "Editor is rich text editor component based on Quill.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getContent",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get content element."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getQuill",
+                            "parameters": [],
+                            "returnType": "any",
+                            "description": "Used to get quill instance."
+                        },
+                        {
+                            "name": "getToolbar",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get toolbar element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Editor component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "formats",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string[]",
+                            "default": "",
+                            "description": "Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Style and modules of the toolbar."
+                        },
+                        {
+                            "name": "modules",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when editor is empty."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to instantiate the editor to read-only mode."
+                        },
+                        {
+                            "name": "showHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the header of editor."
+                        },
+                        {
+                            "name": "theme",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The theme of editor"
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Value of the content."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onLoad",
+                            "parameters": [
+                                {
+                                    "name": "quill",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Quill instance"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the quill modules are loaded."
+                        },
+                        {
+                            "name": "onSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "EditorSelectionChangeEvent",
+                                    "description": "Custom selection change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selected text of editor changes."
+                        },
+                        {
+                            "name": "onTextChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "EditorTextChangeEvent",
+                                    "description": "Custom text change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when text of editor changes."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "EditorTextChangeEvent": {
+                    "description": "Custom text change event",
+                    "relatedProp": "onTextChange",
+                    "props": [
+                        {
+                            "name": "htmlValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "null | string",
+                            "description": "Current value as html."
+                        },
+                        {
+                            "name": "textValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current value as text."
+                        },
+                        {
+                            "name": "delta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Representation of the change."
+                        },
+                        {
+                            "name": "source",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Source of change. Will be either \"user\" or \"api\"."
+                        }
+                    ]
+                },
+                "EditorSelectionChangeEvent": {
+                    "description": "Custom selection change event",
+                    "relatedProp": "onSelectionChange",
+                    "props": [
+                        {
+                            "name": "range",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Object with index and length keys indicating where the selection exists"
+                        },
+                        {
+                            "name": "oldRange",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Object with index and length keys indicating where the previous selection was."
+                        },
+                        {
+                            "name": "source",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Source of change. Will be either \"user\" or \"api\"."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "EditorPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "EditorProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "EditorPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "toolbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toolbar's DOM element."
+                        },
+                        {
+                            "name": "formats",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the formats's DOM element."
+                        },
+                        {
+                            "name": "select",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughType<HTMLAttributes<HTMLSelectElement>>",
+                            "description": "Uses to pass attributes to the select's DOM element."
+                        },
+                        {
+                            "name": "option",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughType<HTMLAttributes<HTMLOptionElement>>",
+                            "description": "Uses to pass attributes to the option's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "EditorPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "EditorPassThroughType": {
+                    "values": "PassThroughType<T, EditorPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "fieldset": {
+        "description": "Fieldset is an input component that provides real-time suggestions when being typed.\n\n[Live Demo](https://www.primereact.org/fieldset/)",
+        "components": {
+            "Fieldset": {
+                "description": "Fieldset is an input component that provides real-time suggestions when being typed.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getContent",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get the content element of the fieldset."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLFieldSetElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Fieldset component. In addition to these, all properties of HTMLFieldSetElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "collapsed",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines the default visibility state of the content."
+                        },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<FieldsetProps>",
+                            "default": "",
+                            "description": "Icon of an expanded tab."
+                        },
+                        {
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<FieldsetProps>",
+                            "default": "",
+                            "description": "Icon of an collapsed tab."
+                        },
+                        {
+                            "name": "legend",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Header text of the fieldset."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "toggleable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, content can toggled by clicking the legend."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when fieldset is clicked."
+                        },
+                        {
+                            "name": "onCollapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active tab is collapsed by clicking on the header."
+                        },
+                        {
+                            "name": "onExpand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a tab gets expanded."
+                        },
+                        {
+                            "name": "onToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FieldsetToggleEvent",
+                                    "description": "Custom toggle event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a tab gets expanded."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "FieldsetPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FieldsetProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FieldsetState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FieldsetToggleEvent": {
+                    "description": "Custom toggle event.",
+                    "relatedProp": "FieldsetEmits.toggle",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Collapsed state as a boolean"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FieldsetPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughType<HTMLAttributes<HTMLFieldSetElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "legend",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughType<HTMLAttributes<HTMLLegendElement>>",
+                            "description": "Uses to pass attributes to the legend's DOM element."
+                        },
+                        {
+                            "name": "toggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the toggler's DOM element."
+                        },
+                        {
+                            "name": "togglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toggler icon's DOM element."
+                        },
+                        {
+                            "name": "legendTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the legend title's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toggleable content's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FieldsetPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FieldsetState": {
+                    "description": "Defines current inline state in Fieldset component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "collapse",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current collapsed state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "FieldsetPassThroughType": {
+                    "values": "PassThroughType<T, FieldsetPassThroughMethodOptions>"
+                },
+                "FieldsetPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "fileupload": {
+        "description": "FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.\n\n[Live Demo](https://www.primereact.org/fileupload)",
+        "components": {
+            "FileUpload": {
+                "description": "FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "clear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Clears the files list."
+                        },
+                        {
+                            "name": "formatSize",
+                            "parameters": [
+                                {
+                                    "name": "bytes",
+                                    "type": "number",
+                                    "description": "Custom size event."
+                                }
+                            ],
+                            "returnType": "number",
+                            "description": "Formats the number of bytes."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getFiles",
+                            "parameters": [],
+                            "returnType": "FileUploadFile[]",
+                            "description": "Gets the current files list."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getUploadedFiles",
+                            "parameters": [],
+                            "returnType": "FileUploadFile[]",
+                            "description": "Gets the current uploaded files list."
+                        },
+                        {
+                            "name": "onFileSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "FileUploadSelectEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Handles file selection event and updates."
+                        },
+                        {
+                            "name": "setFiles",
+                            "parameters": [
+                                {
+                                    "name": "files",
+                                    "type": "FileUploadFile[]",
+                                    "description": "Current files."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Sets the current files list."
+                        },
+                        {
+                            "name": "setUploadedFiles",
+                            "parameters": [
+                                {
+                                    "name": "files",
+                                    "type": "FileUploadFile[]",
+                                    "description": "Current uploaded files."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Sets the current uploaded files list."
+                        },
+                        {
+                            "name": "upload",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Uploads the selected files."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in FileUpload component.",
+                    "values": [
+                        {
+                            "name": "accept",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "false",
+                            "description": "Pattern to restrict the allowed file types such as \"image/*\"."
+                        },
+                        {
+                            "name": "auto",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, upload begins automatically after selection is completed."
+                        },
+                        {
+                            "name": "cancelLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Label of the cancel button. Defaults to global value in Locale configuration."
+                        },
+                        {
+                            "name": "cancelOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadOptions",
+                            "default": "",
+                            "description": "Options used to customize the cancel button. These options have \"label\", \"icon\", \"className\" and \"style\" properties."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "chooseLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Label of the choose button. Defaults to global value in Locale configuration."
+                        },
+                        {
+                            "name": "chooseOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadOptions",
+                            "default": "",
+                            "description": "Options used to customize the choose button. These options have \"label\", \"icon\", \"className\" and \"style\" properties."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the content."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the content."
+                        },
+                        {
+                            "name": "customUpload",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to use the default upload or a manual implementation defined in uploadHandler callback."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Disables the upload functionality."
+                        },
+                        {
+                            "name": "emptyTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of empty content in the container."
+                        },
+                        {
+                            "name": "headerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Custom template of the header."
+                        },
+                        {
+                            "name": "headerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the header."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of the header."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "invalidFileSizeMessageDetail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "\"Maximum upload size is.\"",
+                            "description": "Detail message of the invalid fize size."
+                        },
+                        {
+                            "name": "invalidFileSizeMessageSummary",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Invalid file size",
+                            "description": "Summary message of the invalid fize size."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of each item content in the container."
+                        },
+                        {
+                            "name": "maxFileSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum file size allowed in bytes."
+                        },
+                        {
+                            "name": "mode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"basic\" | \"advanced\"",
+                            "default": "advanced",
+                            "description": "Defines the UI of the component, possible values are \"advanced\" and \"basic\"."
+                        },
+                        {
+                            "name": "multiple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Used to select multiple files at once from file dialog."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the request parameter to identify the files at backend."
+                        },
+                        {
+                            "name": "previewWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "50",
+                            "description": "Width of the image thumbnail in pixels."
+                        },
+                        {
+                            "name": "progressBarTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of progressBar content in the container."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "removeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<FileUploadProps>",
+                            "default": "",
+                            "description": "Icon of the remove element."
+                        },
+                        {
+                            "name": "selectedFileLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Label of the choose button after a file is selected."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "uploadLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Label of the upload button. Defaults to global value in Locale configuration."
+                        },
+                        {
+                            "name": "uploadOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadOptions",
+                            "default": "",
+                            "description": "Options used to customize the upload button. These options have \"label\", \"icon\", \"className\" and \"style\" properties."
+                        },
+                        {
+                            "name": "url",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Remote url to upload the files."
+                        },
+                        {
+                            "name": "withCredentials",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBeforeDrop",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "DragEvent",
+                                    "description": "DragEvent instance."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before files dropped. Return false from callback to prevent drop."
+                        },
+                        {
+                            "name": "onBeforeSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadSelectEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before files are selected. Return false from callback to prevent selection."
+                        },
+                        {
+                            "name": "onBeforeSend",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadBeforeSendEvent",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before file send begins to customize the request such as adding headers."
+                        },
+                        {
+                            "name": "onBeforeUpload",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadBeforeUploadEvent",
+                                    "description": "Custom beforeUpload."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before file upload begins to customize the request such as post parameters before the files."
+                        },
+                        {
+                            "name": "onClear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when files in queue are removed without uploading."
+                        },
+                        {
+                            "name": "onError",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadErrorEvent",
+                                    "description": "Custom error event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke if file upload fails."
+                        },
+                        {
+                            "name": "onProgress",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadProgressEvent",
+                                    "description": "Custom progress event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when files are being uploaded."
+                        },
+                        {
+                            "name": "onRemove",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadRemoveEvent",
+                                    "description": "Custom remove event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a file is removed without uploading using clear button of a file."
+                        },
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadSelectEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when files are selected."
+                        },
+                        {
+                            "name": "onUpload",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadUploadEvent",
+                                    "description": "Custom upload event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when file upload is complete."
+                        },
+                        {
+                            "name": "onValidationFail",
+                            "parameters": [
+                                {
+                                    "name": "file",
+                                    "optional": false,
+                                    "type": "File",
+                                    "description": "Invalid file."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a validation file fails."
+                        },
+                        {
+                            "name": "uploadHandler",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FileUploadHandlerEvent",
+                                    "description": "Custom uploadHandler event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke in custom upload mode to upload the files manually."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "FileUploadBeforeUploadEvent": {
+                    "description": "Custom before upload event.",
+                    "relatedProp": "onBeforeUpload",
+                    "props": [
+                        {
+                            "name": "xhr",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "XMLHttpRequest",
+                            "description": "XmlHttpRequest instance."
+                        },
+                        {
+                            "name": "formData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormData",
+                            "description": "FormData object."
+                        }
+                    ],
+                    "extendedBy": "FileUploadBeforeSendEvent"
+                },
+                "FileUploadBeforeSendEvent": {
+                    "description": "Custom before send event.",
+                    "relatedProp": "onBeforeSend",
+                    "props": [
+                        {
+                            "name": "xhr",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "XMLHttpRequest",
+                            "description": "XmlHttpRequest instance."
+                        },
+                        {
+                            "name": "formData",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormData",
+                            "description": "FormData object."
+                        }
+                    ]
+                },
+                "FileUploadUploadEvent": {
+                    "description": "Custom upload event.",
+                    "relatedProp": "onUpload",
+                    "props": [
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Uploaded files."
+                        },
+                        {
+                            "name": "xhr",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "XMLHttpRequest",
+                            "description": "XmlHttpRequest instance."
+                        }
+                    ],
+                    "extendedBy": "FileUploadErrorEvent"
+                },
+                "FileUploadErrorEvent": {
+                    "description": "Custom error event.",
+                    "relatedProp": "onError",
+                    "props": [
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Uploaded files."
+                        },
+                        {
+                            "name": "xhr",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "XMLHttpRequest",
+                            "description": "XmlHttpRequest instance."
+                        }
+                    ]
+                },
+                "FileUploadSelectEvent": {
+                    "description": "Custom select event.",
+                    "relatedProp": "onSelect",
+                    "props": [
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Uploaded files."
+                        },
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DragEvent | ChangeEvent<HTMLInputElement>",
+                            "description": "Browser event."
+                        }
+                    ]
+                },
+                "FileUploadProgressEvent": {
+                    "description": "Custom progress event.",
+                    "relatedProp": "onProgress",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "progress",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Calculated progress value."
+                        }
+                    ]
+                },
+                "FileUploadHandlerEvent": {
+                    "description": "Custom uploadHandler event.",
+                    "relatedProp": "uploadHandler",
+                    "props": [
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Uploaded files."
+                        },
+                        {
+                            "name": "options",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadHandlerOptions",
+                            "description": "Handler options."
+                        }
+                    ]
+                },
+                "FileUploadRemoveEvent": {
+                    "description": "Custom remove event.",
+                    "relatedProp": "onRemove",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "file",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "File",
+                            "description": "Selected file."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "FileUploadPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FileUploadPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "buttonbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the buttonbar's DOM element."
+                        },
+                        {
+                            "name": "chooseButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the choose button's DOM element."
+                        },
+                        {
+                            "name": "chooseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the choose icon's DOM element."
+                        },
+                        {
+                            "name": "chooseButtonLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the choose button label's DOM element."
+                        },
+                        {
+                            "name": "uploadButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the upload button's DOM element."
+                        },
+                        {
+                            "name": "cancelButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the cancel button's DOM element."
+                        },
+                        {
+                            "name": "cancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the cancel icon's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "progressbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughOptions",
+                            "description": "Uses to pass attributes to the progressbar's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptions",
+                            "description": "Uses to pass attributes to the messages' DOM element."
+                        },
+                        {
+                            "name": "file",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the file's DOM element."
+                        },
+                        {
+                            "name": "thumbnail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<ImgHTMLAttributes<HTMLImageElement>>",
+                            "description": "Uses to pass attributes to the thumbnail's DOM element."
+                        },
+                        {
+                            "name": "details",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the details's DOM element."
+                        },
+                        {
+                            "name": "fileName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the fileName's DOM element."
+                        },
+                        {
+                            "name": "fileSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the fileSize's DOM element."
+                        },
+                        {
+                            "name": "badge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "BadgePassThroughOptions",
+                            "description": "Uses to pass attributes to the badge's DOM element."
+                        },
+                        {
+                            "name": "actions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the actions's DOM element."
+                        },
+                        {
+                            "name": "removeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the remove button's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "basicButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the basic button's DOM element."
+                        },
+                        {
+                            "name": "uploadIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FileUploadPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the upload icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FileUploadState": {
+                    "description": "Defines current inline state in FileUpload component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Current files."
+                        },
+                        {
+                            "name": "uploading",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current uplaoding state as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "progress",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current progress state as a number."
+                        },
+                        {
+                            "name": "uploadedFiles",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Current uploaded files."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FileUploadOptions": {
+                    "description": "Custom file upload options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Defines the text to display."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<FileUploadProps>",
+                            "description": "Defines the image to display."
+                        },
+                        {
+                            "name": "iconOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Defines whether to display only the icon."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FileUploadHeaderTemplateOptions": {
+                    "description": "Custom file upload header options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The class name for the header element."
+                        },
+                        {
+                            "name": "chooseButton",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The choose button element."
+                        },
+                        {
+                            "name": "uploadButton",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The upload button element."
+                        },
+                        {
+                            "name": "cancelButton",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The cancel button element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadProps",
+                            "description": "The props passed to the component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FileUploadProgressBarTemplateOptions": {
+                    "description": "Custom file upload progressbar template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "progress",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current progress state as a number."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadProps",
+                            "description": "The props passed to the component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ItemTemplateOptions": {
+                    "description": "Custom item template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "previewElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Element to display preview of the file."
+                        },
+                        {
+                            "name": "fileNameElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Element to display the name of the file."
+                        },
+                        {
+                            "name": "sizeElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Element to display the size of the file."
+                        },
+                        {
+                            "name": "removeElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Element to display the remove button."
+                        },
+                        {
+                            "name": "formatSize",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Formatted string of the file size."
+                        },
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Array of files."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the file."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadProps",
+                            "description": "All component props"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onRemove",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a item template is removed."
+                        }
+                    ]
+                },
+                "FileUploadFilesEvent": {
+                    "description": "Custom file upload event.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "files",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadFile[]",
+                            "description": "Uploaded files."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "FileUploadUploadEvent,FileUploadSelectEvent,FileUploadHandlerEvent"
+                },
+                "FileUploadHandlerOptions": {
+                    "description": "Custom file upload handler options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FileUploadProps",
+                            "description": "All component props"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "clear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Clears the current files selected for upload."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "FileUploadPassThroughType": {
+                    "values": "PassThroughType<T, FileUploadPassThroughMethodOptions>"
+                },
+                "FileUploadFile": {
+                    "values": "File & Object",
+                    "description": "Defines a custom File type extended with objectURL"
+                }
+            }
+        }
+    },
+    "floatlabel": {
+        "description": "FloatLabel appears on top of the input field when focused.\n\n[Live Demo](https://www.primereact.org/floatlabel/)",
+        "components": {
+            "FloatLabel": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in FloatLabel component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode[]",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FloatLabelPassThroughOptions",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "FloatLabelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FloatLabelProps",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Defines parent options."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FloatLabelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "FloatLabelPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "FloatLabelPassThroughType": {
+                    "values": "PassThroughType<T, FloatLabelPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "galleria": {
+        "description": "Galleria is a content gallery component.\n\n[Live Demo](https://www.primereact.org/galleria)",
+        "components": {
+            "Galleria": {
+                "description": "Galleria is a content gallery component.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the overlay."
+                        },
+                        {
+                            "name": "isAutoPlayActive",
+                            "parameters": [],
+                            "returnType": "boolean",
+                            "description": "Whether auto-play feature is currently active."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the overlay."
+                        },
+                        {
+                            "name": "startSlideShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to start the slideshow."
+                        },
+                        {
+                            "name": "stopSlideShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to stop the slideshow."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Galleria component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "activeIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the first item."
+                        },
+                        {
+                            "name": "autoPlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Items are displayed with a slideshow in autoPlay mode."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "changeItemOnIndicatorHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, item is changed on indicator item's hover."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "circular",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if scrolling would be infinite."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<GalleriaProps>",
+                            "default": "",
+                            "description": "Icon to display in the galleria close button."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Custom footer template."
+                        },
+                        {
+                            "name": "fullScreen",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display the component on fullscreen."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Custom header template."
+                        },
+                        {
+                            "name": "indicatorsPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "bottom",
+                            "description": "Position of indicators. Valid values are \"bottom\", \"top\", \"left\" and \"right\"."
+                        },
+                        {
+                            "name": "itemNextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<GalleriaProps>",
+                            "default": "",
+                            "description": "Icon to show in the next item button."
+                        },
+                        {
+                            "name": "itemPrevIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<GalleriaProps>",
+                            "default": "",
+                            "description": "Icon to show in the previous item button."
+                        },
+                        {
+                            "name": "nextThumbnailIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<GalleriaProps>",
+                            "default": "",
+                            "description": "Icon to show in the next thumbnail button."
+                        },
+                        {
+                            "name": "numVisible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "3",
+                            "description": "Number of items per page."
+                        },
+                        {
+                            "name": "prevThumbnailIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<GalleriaProps>",
+                            "default": "",
+                            "description": "Icon to show in the previous thumbnail button."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "responsiveOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaResponsiveOptions[]",
+                            "default": "",
+                            "description": "An array of options for responsive design."
+                        },
+                        {
+                            "name": "showIndicators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display indicator container."
+                        },
+                        {
+                            "name": "showIndicatorsOnItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, indicator container is displayed on item container."
+                        },
+                        {
+                            "name": "showItemNavigators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display navigation buttons in item container."
+                        },
+                        {
+                            "name": "showItemNavigatorsOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display navigation buttons on item container's hover."
+                        },
+                        {
+                            "name": "showThumbnailNavigators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display navigation buttons in thumbnail container."
+                        },
+                        {
+                            "name": "showThumbnails",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display thumbnail container."
+                        },
+                        {
+                            "name": "thumbnailsPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "bottom",
+                            "description": "Position of thumbnails. Valid values are \"bottom\", \"top\", \"left\" and \"right\"."
+                        },
+                        {
+                            "name": "transitionInterval",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "4000",
+                            "description": "Time in milliseconds to scroll items."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of objects to display."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "caption",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets an item in the value and returns the content for caption item."
+                        },
+                        {
+                            "name": "indicator",
+                            "parameters": [
+                                {
+                                    "name": "index",
+                                    "optional": false,
+                                    "type": "number",
+                                    "description": "Index of the indicator."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets an item in the value and returns the content for indicator item."
+                        },
+                        {
+                            "name": "item",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current item."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets an item in the value and returns the content for preview item."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when modal becomes hidden."
+                        },
+                        {
+                            "name": "onItemChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "GalleriaItemChangeEvent",
+                                    "description": "Custom change item."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke after changing item."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when modal becomes visible."
+                        },
+                        {
+                            "name": "thumbnail",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current thumbnail item."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets an item in the value and returns the content for thumbnail item."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "GalleriaItemChangeEvent": {
+                    "description": "Custom complete method event.",
+                    "relatedProp": "onItemChange",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "index of the new item."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "GalleriaPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "GalleriaProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "GalleriaState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "GalleriaPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "itemWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item wrapper's DOM element."
+                        },
+                        {
+                            "name": "itemContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item container's DOM element."
+                        },
+                        {
+                            "name": "previousItemButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the previous item button's DOM element."
+                        },
+                        {
+                            "name": "previousItemIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the previous item icon's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "nextItemButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the next item button's DOM element."
+                        },
+                        {
+                            "name": "nextItemIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the next item icon's DOM element."
+                        },
+                        {
+                            "name": "caption",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the caption's DOM element."
+                        },
+                        {
+                            "name": "indicators",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the indicators's DOM element."
+                        },
+                        {
+                            "name": "indicator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the indicator's DOM element."
+                        },
+                        {
+                            "name": "thumbnailWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the thumbnail wrapper's DOM element."
+                        },
+                        {
+                            "name": "thumbnailContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the thumbnail container's DOM element."
+                        },
+                        {
+                            "name": "previousThumbnailButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the previous thumbnail button's DOM element."
+                        },
+                        {
+                            "name": "previousThumbnailIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the previous thumbnail icon's DOM element."
+                        },
+                        {
+                            "name": "thumbnailItemsContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the thumbnail items container's DOM element."
+                        },
+                        {
+                            "name": "thumbnailItems",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the thumbnail items' DOM element."
+                        },
+                        {
+                            "name": "thumbnailItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the thumbnail item's DOM element."
+                        },
+                        {
+                            "name": "thumbnailItemContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the thumbnail item content's DOM element."
+                        },
+                        {
+                            "name": "nextThumbnailButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the next thumbnail button's DOM element."
+                        },
+                        {
+                            "name": "nextThumbnailIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the next thumbnail icon's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "GalleriaPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "GalleriaState": {
+                    "description": "Defines current inline state in Galleria component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "numVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of items per page as a number."
+                        },
+                        {
+                            "name": "slideShowActive",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current slide show active state."
+                        },
+                        {
+                            "name": "activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current active item index as a number."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "GalleriaResponsiveOptions": {
+                    "description": "Custom galleria responsive options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "breakpoint",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Breakpoint for this responsive option."
+                        },
+                        {
+                            "name": "numVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of visible items."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "GalleriaPassThroughType": {
+                    "values": "PassThroughType<T, GalleriaPassThroughMethodOptions>"
+                },
+                "GalleriaPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "hooks": {
+        "description": "The module includes custom hook methods to create shorthands for users.",
+        "functions": {
+            "description": "Defines the custom functions used by the module.",
+            "values": {
+                "usePrevious": {
+                    "name": "usePrevious",
+                    "parameters": [
+                        {
+                            "name": "value",
+                            "type": "V",
+                            "description": "The current value whose previous state is needed"
+                        }
+                    ],
+                    "returnType": "V | undefined",
+                    "description": "Custom hook to get the previous value of a property."
+                },
+                "useMountEffect": {
+                    "name": "useMountEffect",
+                    "parameters": [
+                        {
+                            "name": "effect",
+                            "type": "EffectCallback",
+                            "description": "The effect to run."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Custom hook to run a mount effect only once."
+                },
+                "useUpdateEffect": {
+                    "name": "useUpdateEffect",
+                    "parameters": [
+                        {
+                            "name": "effect",
+                            "type": "EffectCallback",
+                            "description": "The effect to run."
+                        },
+                        {
+                            "name": "deps",
+                            "type": "DependencyList",
+                            "description": "The dependencies."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Custom hook to run an update effect."
+                },
+                "useUnmountEffect": {
+                    "name": "useUnmountEffect",
+                    "parameters": [
+                        {
+                            "name": "effect",
+                            "type": "EffectCallback",
+                            "description": "The effect to run."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Custom hook to run an unmount effect."
+                },
+                "useEventListener": {
+                    "name": "useEventListener",
+                    "parameters": [
+                        {
+                            "name": "options",
+                            "type": "EventOptions",
+                            "description": "The event options."
+                        }
+                    ],
+                    "returnType": "any[]",
+                    "description": "Custom hook to listen to an event."
+                },
+                "useOverlayListener": {
+                    "name": "useOverlayListener",
+                    "parameters": [
+                        {
+                            "name": "options",
+                            "type": "OverlayEventOptions",
+                            "description": "The event options."
+                        }
+                    ],
+                    "returnType": "any[]",
+                    "description": "Custom hook to listen to overlay event. It can be used when an overlay is desired to behave like the overlays in PrimeReact."
+                },
+                "useOverlayScrollListener": {
+                    "name": "useOverlayScrollListener",
+                    "parameters": [
+                        {
+                            "name": "options",
+                            "type": "EventOptions",
+                            "description": "The event options."
+                        }
+                    ],
+                    "returnType": "any[]",
+                    "description": "Custom hook to listen to overlay scroll. It can be used when an overlay is desired to behave like the overlays in PrimeReact."
+                },
+                "useResizeListener": {
+                    "name": "useResizeListener",
+                    "parameters": [
+                        {
+                            "name": "options",
+                            "type": "ResizeEventOptions",
+                            "description": "The event options."
+                        }
+                    ],
+                    "returnType": "any[]",
+                    "description": "Custom hook to listen to a resize event."
+                },
+                "useInterval": {
+                    "name": "useInterval",
+                    "parameters": [
+                        {
+                            "name": "fn",
+                            "type": "any",
+                            "description": "The function that will be executed after the delay."
+                        },
+                        {
+                            "name": "delay",
+                            "type": "number",
+                            "description": "Delay in milliseconds."
+                        },
+                        {
+                            "name": "when",
+                            "type": "boolean",
+                            "description": "Whether to listen to the event or not."
+                        }
+                    ],
+                    "returnType": "any[]",
+                    "description": "Custom hook to use an interval."
+                },
+                "useTimeout": {
+                    "name": "useTimeout",
+                    "parameters": [
+                        {
+                            "name": "fn",
+                            "type": "any",
+                            "description": "The function that will be executed after the delay."
+                        },
+                        {
+                            "name": "delay",
+                            "type": "number",
+                            "description": "Delay in milliseconds."
+                        },
+                        {
+                            "name": "when",
+                            "type": "boolean",
+                            "description": "Whether to listen to the event or not."
+                        }
+                    ],
+                    "returnType": "any[]",
+                    "description": "Custom hook to use a timeout."
+                },
+                "useStorage": {
+                    "name": "useStorage",
+                    "parameters": [
+                        {
+                            "name": "initialValue",
+                            "type": "S",
+                            "description": "The initial value."
+                        },
+                        {
+                            "name": "key",
+                            "type": "K",
+                            "description": "The key to store the value."
+                        },
+                        {
+                            "name": "storage",
+                            "type": "\"local\" | \"session\"",
+                            "description": "The storage type. Valid values are 'local' and 'session'."
+                        }
+                    ],
+                    "returnType": "[S, React.Dispatch<React.SetStateAction<S>>]",
+                    "description": "Custom hook to use storage such as local and session storage."
+                },
+                "useLocalStorage": {
+                    "name": "useLocalStorage",
+                    "parameters": [
+                        {
+                            "name": "initialValue",
+                            "type": "S",
+                            "description": "The initial value."
+                        },
+                        {
+                            "name": "key",
+                            "type": "K",
+                            "description": "The key to store the value in local storage."
+                        }
+                    ],
+                    "returnType": "[S, React.Dispatch<React.SetStateAction<S>>]",
+                    "description": "Custom hook to use local storage."
+                },
+                "useSessionStorage": {
+                    "name": "useSessionStorage",
+                    "parameters": [
+                        {
+                            "name": "initialValue",
+                            "type": "S",
+                            "description": "The initial value."
+                        },
+                        {
+                            "name": "key",
+                            "type": "K",
+                            "description": "The key to store the value in session storage."
+                        }
+                    ],
+                    "returnType": "[S, React.Dispatch<React.SetStateAction<S>>]",
+                    "description": "Custom hook to use session storage."
+                },
+                "useCounter": {
+                    "name": "useCounter",
+                    "parameters": [
+                        {
+                            "name": "initialValue",
+                            "type": "number",
+                            "description": "The value to counter."
+                        },
+                        {
+                            "name": "options",
+                            "type": "Object"
+                        }
+                    ],
+                    "returnType": "any",
+                    "description": ""
+                },
+                "useDebounce": {
+                    "name": "useDebounce",
+                    "parameters": [
+                        {
+                            "name": "initialValue",
+                            "type": "S",
+                            "description": "The initial value for debounce."
+                        },
+                        {
+                            "name": "delay",
+                            "type": "number",
+                            "description": "The delay in milliseconds."
+                        }
+                    ],
+                    "returnType": "[S, S, React.Dispatch<React.SetStateAction<S>>]",
+                    "description": "Custom hook to use a debounced value."
+                },
+                "useMouse": {
+                    "name": "useMouse",
+                    "parameters": [],
+                    "returnType": "MouseDataOptions",
+                    "description": "Custom hook to use to get the current mouse position."
+                },
+                "useMove": {
+                    "name": "useMove",
+                    "parameters": [
+                        {
+                            "name": "mode",
+                            "type": "\"both\" | \"horizontal\" | \"vertical\"",
+                            "description": "The mode of the move. Valid values are 'horizontal', 'vertical' and 'both'."
+                        },
+                        {
+                            "name": "initialValue",
+                            "type": "MousePositionOptions",
+                            "description": "The initial value."
+                        }
+                    ],
+                    "returnType": "MouseMoveOptions",
+                    "description": "Custom hook to handles move behavior over any element."
+                },
+                "useStyle": {
+                    "name": "useStyle",
+                    "parameters": [
+                        {
+                            "name": "css",
+                            "type": "string",
+                            "description": "The style text content."
+                        },
+                        {
+                            "name": "options",
+                            "type": "UseStyleOptions",
+                            "description": "The options of the style."
+                        }
+                    ],
+                    "returnType": "StyleOptions",
+                    "description": "Custom hook to use to get style options."
+                },
+                "useFavicon": {
+                    "name": "useFavicon",
+                    "parameters": [
+                        {
+                            "name": "newIcon",
+                            "type": "string",
+                            "description": "The new favicon url to set."
+                        },
+                        {
+                            "name": "rel",
+                            "type": "string",
+                            "description": "The rel attribute of the link element."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Custom hook to use change the current favicon."
+                },
+                "useIntersectionObserver": {
+                    "name": "useIntersectionObserver",
+                    "parameters": [
+                        {
+                            "name": "ref",
+                            "type": "RefObject<Element>",
+                            "description": "The ref of the element to observe."
+                        },
+                        {
+                            "name": "options",
+                            "type": "IntersectionObserverInit",
+                            "description": "The options of the intersection observer."
+                        }
+                    ],
+                    "returnType": "boolean",
+                    "description": "Custom hook to use change the current favicon."
+                },
+                "useClickOutside": {
+                    "name": "useClickOutside",
+                    "parameters": [
+                        {
+                            "name": "ref",
+                            "type": "RefObject<Element>",
+                            "description": "The ref of the element to detect click outside."
+                        },
+                        {
+                            "name": "callback",
+                            "type": "any",
+                            "description": "The callback to run when click outside."
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Custom hook to use detect click outside."
+                },
+                "useMatchMedia": {
+                    "name": "useMatchMedia",
+                    "parameters": [
+                        {
+                            "name": "query",
+                            "type": "string",
+                            "description": "the media query"
+                        },
+                        {
+                            "name": "when",
+                            "type": "boolean",
+                            "description": "Whether to listen to the event or not."
+                        }
+                    ],
+                    "returnType": "boolean",
+                    "description": "Custom hook to detect if window size matches or not."
+                },
+                "useGlobalOnEscapeKey": {
+                    "name": "useGlobalOnEscapeKey",
+                    "parameters": [
+                        {
+                            "name": "props",
+                            "type": "Object"
+                        }
+                    ],
+                    "returnType": "void",
+                    "description": "Custom hook to use detect global escape button click."
+                },
+                "useDisplayOrder": {
+                    "name": "useDisplayOrder",
+                    "parameters": [
+                        {
+                            "name": "group",
+                            "type": "string",
+                            "description": ""
+                        },
+                        {
+                            "name": "isVisible",
+                            "type": "boolean",
+                            "description": ""
+                        }
+                    ],
+                    "returnType": "number | undefined",
+                    "description": "Custom hook to use display order of component of one and the same group"
+                },
+                "useMergeProps": {
+                    "name": "useMergeProps",
+                    "parameters": [],
+                    "returnType": "Function",
+                    "description": "Custom hook to return a function for merging properties."
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MousePositionOptions": {
+                    "description": "Custom MousePositionOptions",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "x",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Position of the mouse for the x-axis."
+                        },
+                        {
+                            "name": "y",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Position of the mouse for the y-axis."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "MouseDataOptions"
+                },
+                "UseStyleOptions": {
+                    "description": "Custom UseStyleOptions",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "document",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Document"
+                        },
+                        {
+                            "name": "immediate",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "manual",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "media",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StyleOptions": {
+                    "description": "Custom StyleOptions",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Defines data-pc-name attribute of the style tag."
+                        },
+                        {
+                            "name": "css",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<string>",
+                            "description": "The css object."
+                        },
+                        {
+                            "name": "load",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "unload",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "isLoaded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the style is loaded or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MouseDataOptions": {
+                    "description": "Custom MouseDataOptions",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "x",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Position of the mouse for the x-axis."
+                        },
+                        {
+                            "name": "y",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Position of the mouse for the y-axis."
+                        },
+                        {
+                            "name": "reset",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "ref",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLElement>",
+                            "description": "The ref of the element to position."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "MouseMoveOptions",
+                    "extendedTypes": "MousePositionOptions"
+                },
+                "MouseMoveOptions": {
+                    "description": "Custom MouseMoveOptions",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "x",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Position of the mouse for the x-axis."
+                        },
+                        {
+                            "name": "y",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Position of the mouse for the y-axis."
+                        },
+                        {
+                            "name": "reset",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "ref",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLElement>",
+                            "description": "The ref of the element to position."
+                        },
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the mouse is touching the element or not."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "MouseDataOptions"
+                },
+                "EventOptions": {
+                    "description": "Custom event options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "target",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"window\" | \"document\" | Ref<HTMLElement>",
+                            "description": "The target element to listen to."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The event type to listen to."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "The event options."
+                        },
+                        {
+                            "name": "when",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to listen to the event or not."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "listener",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "The event listener."
+                        }
+                    ]
+                },
+                "OverlayListenerOptions": {
+                    "description": "The options of event listener in OverlayEventOptions",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "type",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"resize\" | \"scroll\" | \"outside\" | \"orientationChange\"",
+                            "description": "Type of listener."
+                        },
+                        {
+                            "name": "valid",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether it is valid."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OverlayEventOptions": {
+                    "description": "Custom overlay event options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "target",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"window\" | \"document\" | Ref<HTMLElement>",
+                            "description": "The target element to listen to."
+                        },
+                        {
+                            "name": "overlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"window\" | \"document\" | Ref<HTMLElement>",
+                            "description": "The overlay element to listen to."
+                        },
+                        {
+                            "name": "when",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to listen to the event or not."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "listener",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event"
+                                },
+                                {
+                                    "name": "options",
+                                    "optional": true,
+                                    "type": "OverlayListenerOptions"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "The event listener."
+                        }
+                    ]
+                },
+                "ResizeEventOptions": {
+                    "description": "Custom resize event options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "when",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether to listen to the event or not."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "listener",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "The browser event object."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "The event listener."
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    "iconbase/iconbase": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "IconBaseProps": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "AngleDoubleDownIconProps,AngleDoubleLeftIconProps,AngleDoubleRightIconProps,AngleDoubleUpIconProps,AngleDownIconProps,AngleLeftIconProps,AngleRightIconProps,AngleUpIconProps,ArrowDownIconProps,ArrowUpIconProps,BanIconProps,BarsIconProps,BlankIconProps,CalendarIconProps,CheckIconProps,ChevronDownIconProps,ChevronLeftIconProps,ChevronRightIconProps,ChevronUpIconProps,DownloadIconProps,ExclamationTriangleIconProps,EyeIconProps,EyeSlashIconProps,FilterIconProps,FilterSlashIconProps,InfoCircleIconProps,MinusIconProps,PencilIconProps,PlusIconProps,RefreshIconProps,SearchIconProps,SearchMinusIconProps,SearchPlusIconProps,SortAltIconProps,SortAmountDownIconProps,SortAmountUpAltIconProps,SpinnerIconProps,StarIconProps,StarFillIconProps,ThLargeIconProps,TimesIconProps,TimesCircleIconProps,TrashIconProps,UndoIconProps,UploadIconProps,WindowMaximizeIconProps,WindowMinimizeIconProps",
+                    "extendedTypes": "Omit<React.SVGProps<SVGSVGElement>, \"ref\">"
+                }
+            }
+        }
+    },
+    "iconfield": {
+        "description": "IconField wraps an input and an icon.\n\n[Live Demo](https://www.primereact.org/iconfield/)",
+        "components": {
+            "IconField": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in IconField component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "iconPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "right",
+                            "description": "Position of the icon"
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconFieldPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "IconFieldPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "IconFieldProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "IconFieldContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "IconFieldPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconFieldPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "IconFieldContext": {
+                    "description": "Defines current options in IconField component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "iconPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "description": "Position of the icon"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "IconFieldPassThroughType": {
+                    "values": "PassThroughType<T, IconFieldPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "icons/angledoubledown": {
+        "components": {
+            "AngleDoubleDownIcon": {
+                "description": "**PrimeReact - AngleDoubleDownIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleDoubleDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/angledoubleleft": {
+        "components": {
+            "AngleDoubleLeftIcon": {
+                "description": "**PrimeReact - AngleDoubleLeftIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleDoubleLeftIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/angledoubleright": {
+        "components": {
+            "AngleDoubleRightIcon": {
+                "description": "**PrimeReact - AngleDoubleRightIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleDoubleRightIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/angledoubleup": {
+        "components": {
+            "AngleDoubleUpIcon": {
+                "description": "**PrimeReact - AngleDoubleUpIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleDoubleUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/angledown": {
+        "components": {
+            "AngleDownIcon": {
+                "description": "**PrimeReact - AngleDownIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/angleleft": {
+        "components": {
+            "AngleLeftIcon": {
+                "description": "**PrimeReact - AngleLeftIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleLeftIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/angleright": {
+        "components": {
+            "AngleRightIcon": {
+                "description": "**PrimeReact - AngleRightIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleRightIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/angleup": {
+        "components": {
+            "AngleUpIcon": {
+                "description": "**PrimeReact - AngleUpIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in AngleUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/arrowdown": {
+        "components": {
+            "ArrowDownIcon": {
+                "description": "**PrimeReact - ArrowDownIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ArrowDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/arrowup": {
+        "components": {
+            "ArrowUpIcon": {
+                "description": "**PrimeReact - ArrowUpIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ArrowUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/ban": {
+        "components": {
+            "BanIcon": {
+                "description": "**PrimeReact - BanIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in BanIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/bars": {
+        "components": {
+            "BarsIcon": {
+                "description": "**PrimeReact - BarsIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in BarsIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/blank": {
+        "components": {
+            "BlankIcon": {
+                "description": "**PrimeReact - BlankIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in BlankIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/calendar": {
+        "components": {
+            "CalendarIcon": {
+                "description": "**PrimeReact - CalendarIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in CalendarIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/check": {
+        "components": {
+            "CheckIcon": {
+                "description": "**PrimeReact - CheckIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in CheckIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/chevrondown": {
+        "components": {
+            "ChevronDownIcon": {
+                "description": "**PrimeReact - ChevronDownIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ChevronDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/chevronleft": {
+        "components": {
+            "ChevronLeftIcon": {
+                "description": "**PrimeReact - ChevronLeftIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ChevronLeftIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/chevronright": {
+        "components": {
+            "ChevronRightIcon": {
+                "description": "**PrimeReact - ChevronRightIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ChevronRightIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/chevronup": {
+        "components": {
+            "ChevronUpIcon": {
+                "description": "**PrimeReact - ChevronUpIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ChevronUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/download": {
+        "components": {
+            "DownloadIcon": {
+                "description": "**PrimeReact - DownloadIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in DownloadIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/exclamationtriangle": {
+        "components": {
+            "ExclamationTriangleIcon": {
+                "description": "**PrimeReact - ExclamationTriangleIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ExclamationTriangleIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/eye": {
+        "components": {
+            "EyeIcon": {
+                "description": "**PrimeReact - EyeIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in EyeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/eyeslash": {
+        "components": {
+            "EyeSlashIcon": {
+                "description": "**PrimeReact - EyeSlashIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in EyeSlashIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/filter": {
+        "components": {
+            "FilterIcon": {
+                "description": "**PrimeReact - FilterIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in FilterIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/filterslash": {
+        "components": {
+            "FilterSlashIcon": {
+                "description": "**PrimeReact - FilterSlashIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in FilterSlashIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/infocircle": {
+        "components": {
+            "InfoCircleIcon": {
+                "description": "**PrimeReact - InfoCircleIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in InfoCircleIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/minus": {
+        "components": {
+            "MinusIcon": {
+                "description": "**PrimeReact - MinusIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in MinusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/pencil": {
+        "components": {
+            "PencilIcon": {
+                "description": "**PrimeReact - PencilIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in PencilIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/plus": {
+        "components": {
+            "PlusIcon": {
+                "description": "**PrimeReact - PlusIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in PlusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/refresh": {
+        "components": {
+            "RefreshIcon": {
+                "description": "**PrimeReact - RefreshIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in RefreshIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/search": {
+        "components": {
+            "SearchIcon": {
+                "description": "**PrimeReact - SearchIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SearchIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/searchminus": {
+        "components": {
+            "SearchMinusIcon": {
+                "description": "**PrimeReact - SearchMinusIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SearchMinusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/searchplus": {
+        "components": {
+            "SearchPlusIcon": {
+                "description": "**PrimeReact - SearchPlusIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SearchPlusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/sortalt": {
+        "components": {
+            "SortAltIcon": {
+                "description": "**PrimeReact - SortAltIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SortAltIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/sortamountdown": {
+        "components": {
+            "SortAmountDownIcon": {
+                "description": "**PrimeReact - SortAmountDownIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SortAmountDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/sortamountupalt": {
+        "components": {
+            "SortAmountUpAltIcon": {
+                "description": "**PrimeReact - SortAmountUpAltIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SortAmountUpAltIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/spinner": {
+        "components": {
+            "SpinnerIcon": {
+                "description": "**PrimeReact - SpinnerIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SpinnerIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/star": {
+        "components": {
+            "StarIcon": {
+                "description": "**PrimeReact - StarIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in StarIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/starfill": {
+        "components": {
+            "StarFillIcon": {
+                "description": "**PrimeReact - StarFillIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in StarFillIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/thlarge": {
+        "components": {
+            "ThLargeIcon": {
+                "description": "**PrimeReact - ThLargeIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in ThLargeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/times": {
+        "components": {
+            "TimesIcon": {
+                "description": "**PrimeReact - TimesIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in TimesIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/timescircle": {
+        "components": {
+            "TimesCircleIcon": {
+                "description": "**PrimeReact - TimesCircleIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in TimesCircleIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/trash": {
+        "components": {
+            "TrashIcon": {
+                "description": "**PrimeReact - TrashIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in TrashIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/undo": {
+        "components": {
+            "UndoIcon": {
+                "description": "**PrimeReact - UndoIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in UndoIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/upload": {
+        "components": {
+            "UploadIcon": {
+                "description": "**PrimeReact - UploadIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in UploadIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/windowmaximize": {
+        "components": {
+            "WindowMaximizeIcon": {
+                "description": "**PrimeReact - WindowMaximizeIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in WindowMaximizeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "icons/windowminimize": {
+        "components": {
+            "WindowMinimizeIcon": {
+                "description": "**PrimeReact - WindowMinimizeIcon**\n\n[Live Demo](https://www.primereact.org/icons/)\n--- ---\n![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in WindowMinimizeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "spin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": ""
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "image": {
+        "description": "Displays a single image with preview and tranformation options.\n\n[Live Demo](https://www.primereact.org/image/)",
+        "components": {
+            "Image": {
+                "description": "Displays a single image with preview and tranformation options.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getImage",
+                            "parameters": [],
+                            "returnType": "null | HTMLImageElement",
+                            "description": "Used to get image element"
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the overlay."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the overlay."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Image component. In addition to these, all properties of HTMLSpanElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "alt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Specifies an alternate text for an area, if the image cannot be displayed."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ImageProps>",
+                            "default": "",
+                            "description": "Icon of the close button."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the preview."
+                        },
+                        {
+                            "name": "crossOrigin",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"\" | \"anonymous\" | \"use-credentials\"",
+                            "default": "",
+                            "description": "The crossorigin content attribute on media elements is a CORS settings attribute."
+                        },
+                        {
+                            "name": "downloadable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Adds a download button to the preview control menu."
+                        },
+                        {
+                            "name": "downloadIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ImageProps>",
+                            "default": "",
+                            "description": "Icon of the download button."
+                        },
+                        {
+                            "name": "height",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Height of the image element."
+                        },
+                        {
+                            "name": "imageClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the image element."
+                        },
+                        {
+                            "name": "imageStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the image element."
+                        },
+                        {
+                            "name": "indicatorIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ImageProps>",
+                            "default": "",
+                            "description": "Changing the default icon when the image is hovered in preview mode."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"eager\" | \"lazy\"",
+                            "default": "",
+                            "description": "Specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them."
+                        },
+                        {
+                            "name": "preview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Controls the preview functionality."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "referrerPolicy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLAttributeReferrerPolicy",
+                            "default": "",
+                            "description": "HTTP header controls how much referrer information (sent with the Referer header) should be included with requests."
+                        },
+                        {
+                            "name": "rotateLeftIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ImageProps>",
+                            "default": "",
+                            "description": "Icon of the rotate left button."
+                        },
+                        {
+                            "name": "rotateRightIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ImageProps>",
+                            "default": "",
+                            "description": "Icon of the rotate right button."
+                        },
+                        {
+                            "name": "src",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Specifies the path to the image."
+                        },
+                        {
+                            "name": "template",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Changing the default icon when the image is hovered in preview mode. Since v9, use  `indicatorIcon`  instead.",
+                            "deprecated": "Since v9, use "
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "useMap",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Specifies an image as a client-side image map (an image map is an image with clickable areas)"
+                        },
+                        {
+                            "name": "width",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Width of the image element."
+                        },
+                        {
+                            "name": "zoomInIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ImageProps>",
+                            "default": "",
+                            "description": "Icon of the zoom in button."
+                        },
+                        {
+                            "name": "zoomOutIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ImageProps>",
+                            "default": "",
+                            "description": "Icon of the zoom out button."
+                        },
+                        {
+                            "name": "zoomSrc",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Zoomed image that may be different than \"src\" image."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Triggered when the preview overlay is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Triggered when the preview overlay is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ImagePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ImageProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ImageState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ImagePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "image",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<ImgHTMLAttributes<HTMLImageElement>>",
+                            "description": "Uses to pass attributes to the image's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "toolbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toolbar's DOM element."
+                        },
+                        {
+                            "name": "downloadButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the download button's DOM element."
+                        },
+                        {
+                            "name": "downloadIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the download icon's DOM element."
+                        },
+                        {
+                            "name": "rotateRightButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the rotate right button's DOM element."
+                        },
+                        {
+                            "name": "rotateRightIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the rotate right icon's DOM element."
+                        },
+                        {
+                            "name": "rotateLeftButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the rotate left button's DOM element."
+                        },
+                        {
+                            "name": "rotateLeftIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the rotate left icon's DOM element."
+                        },
+                        {
+                            "name": "zoomOutButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the zoom out button's DOM element."
+                        },
+                        {
+                            "name": "zoomOutIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the zoom out icon's DOM element."
+                        },
+                        {
+                            "name": "zoomInButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the zoom in button's DOM element."
+                        },
+                        {
+                            "name": "zoomInIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the zoom in icon's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "previewContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the preview container's DOM element."
+                        },
+                        {
+                            "name": "preview",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughType<ImgHTMLAttributes<HTMLImageElement>>",
+                            "description": "Uses to pass attributes to the preview's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ImagePassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ImageState": {
+                    "description": "Defines current inline state in Image component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "maskVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Mask visible state as a boolean."
+                        },
+                        {
+                            "name": "previewVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Preview visible state as a boolean."
+                        },
+                        {
+                            "name": "rotate",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Rotate state as a number."
+                        },
+                        {
+                            "name": "scale",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Scale state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ImagePassThroughType": {
+                    "values": "PassThroughType<T, ImagePassThroughMethodOptions>"
+                },
+                "ImagePassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "inplace": {
+        "description": "Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.\n\n[Live Demo](https://www.primereact.org/inplace)\n\nHelper Components:\n\n-  InplaceDisplay \n\n-  InplaceContent",
+        "components": {
+            "Inplace": {
+                "description": "Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Inplace component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "active",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the content is displayed or not. To use in controlled mode you must implement  `onToggle`  callback at a minimum."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Used to define a string that labels the component."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "closable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Displays a button to switch back to display mode."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<InplaceProps>",
+                            "default": "",
+                            "description": "Icon of the close button."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClose",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when inplace is closed."
+                        },
+                        {
+                            "name": "onOpen",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when inplace is opened."
+                        },
+                        {
+                            "name": "onToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InplaceToggleEvent",
+                                    "description": "Custom toggle event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when inplace is opened or closed."
+                        }
+                    ]
+                }
+            },
+            "InplaceDisplay": {
+                "description": "InplaceDisplay is a helper component for Inplace.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            },
+            "InplaceContent": {
+                "description": "InplaceContent is a helper component for Inplace.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "InplaceToggleEvent": {
+                    "description": "Custom toggle event.",
+                    "relatedProp": "onToggle",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InplacePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InplaceProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InplaceState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InplacePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "display",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the display's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InplacePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InplaceState": {
+                    "description": "Defines current inline state in Inplace component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InplacePassThroughType": {
+                    "values": "PassThroughType<T, InplacePassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "inputicon": {
+        "description": "InputIcon displays an icon.\n\n[Live Demo](https://www.primereact.org/iconfield/)",
+        "components": {
+            "InputIcon": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in InputIcon component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputIconPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputIconPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputIconProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputIconPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputIconPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputIconPassThroughType": {
+                    "values": "PassThroughType<T, InputIconPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "inputmask": {
+        "description": "InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.\n\n[Live Demo](https://www.primereact.org/inputmask/)",
+        "components": {
+            "InputMask": {
+                "description": "InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | ForwardRefExoticComponent<InputTextProps & RefAttributes<HTMLInputElement>>",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in InputMask component. In addition to these, all properties of  inputtext  can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Clears the incomplete value on blur."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element value cannot be altered."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "keyfilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KeyFilterType",
+                            "default": "",
+                            "description": "Format definition of the keys to block."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Mask pattern."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | number",
+                            "default": "",
+                            "description": "Size of the input."
+                        },
+                        {
+                            "name": "slotChar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "_",
+                            "description": "Placeholder character in mask."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unmask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if model sets the raw unmasked value to bound value or the formatted mask value."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "validateOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, instead of blocking keys, input is validated internally to test against the regular expression."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string",
+                            "default": "",
+                            "description": "The value of component"
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when input loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputMaskChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "onComplete",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputMaskCompleteEvent",
+                                    "description": "Custom complete event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on when user completes the mask pattern."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when input receives focus."
+                        },
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                },
+                                {
+                                    "name": "validatePattern",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "Whether to validate the value"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke while typing value on input"
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "InputMaskCompleteEvent": {
+                    "description": "Custom complete event",
+                    "relatedProp": "onComplete",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | string",
+                            "description": "New value of the component"
+                        }
+                    ]
+                },
+                "InputMaskChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<string>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<string>"
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    "inputnumber": {
+        "description": "InputNumber is an input component to provide numerical input.\n\n[Live Demo](https://www.primereact.org/inputnumber/)",
+        "components": {
+            "InputNumber": {
+                "description": "InputNumber is an input component to provide numerical input.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getFormatter",
+                            "parameters": [],
+                            "returnType": "any",
+                            "description": "Used to get formatter."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | ForwardRefExoticComponent<InputTextProps & RefAttributes<HTMLInputElement>>",
+                            "description": "Used to get input element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in InputNumber component. In addition to these, all properties of HTMLSpanElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "allowEmpty",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Determines whether the input field is empty."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "buttonLayout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\" | \"stacked\"",
+                            "default": "stacked",
+                            "description": "Layout of the buttons."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "currency",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as \"USD\" for the US dollar, \"EUR\" for the euro, or \"CNY\" for the Chinese RMB.\nThere is no default value; if the style is \"currency\", the currency property must be provided."
+                        },
+                        {
+                            "name": "currencyDisplay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "symbol",
+                            "description": "How to display the currency in currency formatting. Possible values are \"symbol\" to use a localized currency symbol such as €, ü\"code\" to use the ISO currency code, \"name\" to use a localized currency name such as \"dollar\"; the default is \"symbol\"."
+                        },
+                        {
+                            "name": "decrementButtonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the decrement button."
+                        },
+                        {
+                            "name": "decrementButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<InputNumberProps>",
+                            "default": "",
+                            "description": "Style class of the decrement button."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "format",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to format the value."
+                        },
+                        {
+                            "name": "incrementButtonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the increment button."
+                        },
+                        {
+                            "name": "incrementButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<InputNumberProps>",
+                            "default": "",
+                            "description": "Style class of the increment button."
+                        },
+                        {
+                            "name": "inputClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "locale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Locale to be used in formatting."
+                        },
+                        {
+                            "name": "localeMatcher",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "best fit",
+                            "description": "The locale matching algorithm to use. See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation) for details."
+                        },
+                        {
+                            "name": "max",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum boundary value."
+                        },
+                        {
+                            "name": "maxFractionDigits",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3;\nthe default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) (2 if the list doesn't provide that information)."
+                        },
+                        {
+                            "name": "maxLength",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Maximum value length."
+                        },
+                        {
+                            "name": "min",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Mininum boundary value."
+                        },
+                        {
+                            "name": "minFractionDigits",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0;\nthe default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) (2 if the list doesn't provide that information)."
+                        },
+                        {
+                            "name": "mode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"decimal\" | \"currency\"",
+                            "default": "decimal",
+                            "description": "Defines the behavior of the component."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "pattern",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The pattern attribute specifies a regular expression that the element's value is checked against on form submission."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Hint text for the input field."
+                        },
+                        {
+                            "name": "prefix",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Text to display before the value."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, it specifies that the element should be read-only."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "roundingMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RoundingMode",
+                            "default": "halfExpand",
+                            "description": "How decimals should be rounded. [further information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode)."
+                        },
+                        {
+                            "name": "showButtons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Displays spinner buttons."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Size of the input field."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Step factor to increment/decrement the value."
+                        },
+                        {
+                            "name": "suffix",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Text to display after the value."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "text",
+                            "description": "Type of the input element."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "useGrouping",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | number",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when input loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputNumberChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when input receives focus."
+                        },
+                        {
+                            "name": "onKeyDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KeyboardEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the key pressed down."
+                        },
+                        {
+                            "name": "onValueChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputNumberValueChangeEvent",
+                                    "description": "Custom value change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke after validation check and value change."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "InputNumberValueChangeEvent": {
+                    "description": "Custom value change event.",
+                    "relatedProp": "onValueChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<null | number>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<null | number>"
+                        }
+                    ]
+                },
+                "InputNumberChangeEvent": {
+                    "description": "Custom change event",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "null | number",
+                            "description": "New value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputNumberPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputNumberProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputNumberState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputNumberPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "description": "Uses to pass attributes to the Input component."
+                        },
+                        {
+                            "name": "buttonGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the button group's DOM element."
+                        },
+                        {
+                            "name": "incrementButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the increment button's DOM element."
+                        },
+                        {
+                            "name": "decrementButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the decrement button's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputNumberState": {
+                    "description": "Defines current inline state in InputNumber component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RoundingMode": {
+                    "values": "\"ceil\" | \"floor\" | \"expand\" | \"trunc\" | \"halfCeil\" | \"halfFloor\" | \"halfExpand\" | \"halfTrunc\" | \"halfEven\""
+                },
+                "InputNumberPassThroughType": {
+                    "values": "PassThroughType<T, InputNumberPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "inputotp": {
+        "description": "InputOtp is an extension to standard input element with theming and keyfiltering.\n\n[Live Demo](https://www.primereact.org/inputotp/)",
+        "components": {
+            "InputOtp": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in InputOtp component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "inputTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TemplateType<InputOtpProps>",
+                            "default": "",
+                            "description": "Template of an item."
+                        },
+                        {
+                            "name": "integerOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is integer-only."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "length",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "4",
+                            "description": "Number of characters to initiate."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Mask pattern."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string | number",
+                            "default": "null",
+                            "description": "Specifies the value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputOtpChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete gets focus."
+                        },
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke while typing value on input"
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "InputOtpChangeEvent": {
+                    "description": "Custom change event",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string | number",
+                            "description": "New value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputOtpPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputOtpContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputOtpPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputOtpPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the Tooltip component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputOtpContext": {
+                    "description": "Defines current options in InputOtp component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputOtpPassThroughType": {
+                    "values": "PassThroughType<T, InputOtpPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "inputswitch": {
+        "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primereact.org/inputswitch/)",
+        "components": {
+            "InputSwitch": {
+                "description": "InputSwitch is used to select a boolean value.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in InputMask component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies whether a inputswitch should be checked or not."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "falseValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "false",
+                            "description": "Value in unchecked state."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "trueValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "true",
+                            "description": "Value in checked state."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "InputSwitchChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element receives focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "InputSwitchChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormBooleanTarget"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputSwitchPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputSwitchPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the slider's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputSwitchPassThroughType": {
+                    "values": "PassThroughType<T, InputSwitchPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "inputtext": {
+        "description": "InputText is an extension to standard input element with theming and keyfiltering.\n\n[Live Demo](https://www.primereact.org/inputtext/)",
+        "components": {
+            "InputText": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in InputText component. In addition to these, all properties of HTMLInputElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "keyfilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KeyFilterType",
+                            "default": "",
+                            "description": "Format definition of the keys to block."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | number",
+                            "default": "",
+                            "description": "Size of the input."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "validateOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, instead of blocking keys, input is validated internally to test against the regular expression."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string",
+                            "default": "",
+                            "description": "The value of component"
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                },
+                                {
+                                    "name": "validatePattern",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "Whether to validate the value"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke while typing value on input"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputTextPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputTextProps"
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputTextPassThroughMethodOptions"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputTextContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputTextPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes to the Tooltip component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputTextContext": {
+                    "description": "Defines current options in InputText component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current filled state of the component as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputTextPassThroughType": {
+                    "values": "PassThroughType<T, InputTextPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "inputtextarea": {
+        "description": "Inputtextarea add styling and autoResize functionality to standard textarea element.\n\n[Live Demo](https://www.primereact.org/inputtextarea/)",
+        "components": {
+            "InputTextarea": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in InputTextarea component. In addition to these, all properties of HTMLTextAreaElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoResize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, height of textarea changes as being typed."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "keyfilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KeyFilterType",
+                            "default": "",
+                            "description": "Format definition of the keys to block."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextareaPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The value of component"
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "InputTextareaPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputTextareaProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputTextareaContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputTextareaPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextareaPassThroughType<HTMLAttributes<HTMLTextAreaElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "InputTextareaContext": {
+                    "description": "Defines current options in Textarea component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputTextareaPassThroughType": {
+                    "values": "PassThroughType<T, InputTextareaPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "keyfilter": {
+        "description": "This module contains common options and types of components that use KeyFilter.",
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "KeyFilterType": {
+                    "values": "\"pint\" | \"int\" | \"pnum\" | \"money\" | \"num\" | \"hex\" | \"email\" | \"alpha\" | \"alphanum\" | RegExp",
+                    "description": "Defines the type of keyfilter property in components."
+                }
+            }
+        }
+    },
+    "knob": {
+        "description": "Knob is a form component to define number inputs with a dial.\n\n[Live Demo](https://www.primereact.org/knob/)",
+        "components": {
+            "Knob": {
+                "description": "Knob is a form component to define number inputs with a dial.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Knob component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "max",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "100",
+                            "description": "Maximum boundary value."
+                        },
+                        {
+                            "name": "min",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Mininum boundary value."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rangeColor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "var(--surface-border, LightGray)",
+                            "description": "Background color of the range."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component value cannot be edited."
+                        },
+                        {
+                            "name": "showValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the show the value inside the knob."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "100",
+                            "description": "Size of the component in pixels."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Step factor to increment/decrement the value."
+                        },
+                        {
+                            "name": "strokeWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "14",
+                            "description": "Width of the knob stroke."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "textColor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "var(--text-color-secondary, Black)",
+                            "description": "Color of the value text."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "valueColor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "var(--primary-color, Black)",
+                            "description": "Background of the value."
+                        },
+                        {
+                            "name": "valueTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "{value}",
+                            "description": "Template string of the value."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KnobChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "KnobChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "New value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "KnobPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "KnobProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "KnobPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "svg",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughType<SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the svg's DOM element."
+                        },
+                        {
+                            "name": "range",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughType<SVGProps<SVGPathElement>>",
+                            "description": "Uses to pass attributes to the range's DOM element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughType<SVGProps<SVGPathElement>>",
+                            "description": "Uses to pass attributes to the value' DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KnobPassThroughType<SVGProps<SVGTextElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "KnobPassThroughType": {
+                    "values": "PassThroughType<T, KnobPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "listbox": {
+        "description": "ListBox is used to select one or more values from a list of items.\n\n[Live Demo](https://www.primereact.org/listbox/)",
+        "components": {
+            "ListBox": {
+                "description": "ListBox is used to select one or more values from a list of items.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getVirtualScroller",
+                            "parameters": [],
+                            "returnType": "null | VirtualScroller",
+                            "description": "Used to get the virtual scroller instance."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ListBox component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoOptionFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to focus on the first visible or selected element."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "false",
+                            "description": "A property to uniquely match the value in options for better performance."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, disables the component."
+                        },
+                        {
+                            "name": "emptyFilterMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template to display when filtering does not return any results."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Text to display when there is no data."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, displays a filter input at header."
+                        },
+                        {
+                            "name": "filterBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "label",
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                        },
+                        {
+                            "name": "filterInputProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "undefined",
+                            "description": "Props for the filter input, any prop is passed implicity to the filter input element."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
+                            "default": "contains",
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when filter input is empty."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template for the filter element."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "When specified, filter displays with this value."
+                        },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template for the items."
+                        },
+                        {
+                            "name": "listClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Inline style class of inner list element."
+                        },
+                        {
+                            "name": "listStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of inner list element."
+                        },
+                        {
+                            "name": "metaKeySelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
+                        },
+                        {
+                            "name": "multiple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, allows selecting multiple values."
+                        },
+                        {
+                            "name": "optionDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
+                        },
+                        {
+                            "name": "optionGroupChildren",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function that refers to the children options of option group."
+                        },
+                        {
+                            "name": "optionGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option group."
+                        },
+                        {
+                            "name": "optionGroupTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of an option group item."
+                        },
+                        {
+                            "name": "optionLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectItemOptionsType",
+                            "default": "",
+                            "description": "An array of objects to display as the available options."
+                        },
+                        {
+                            "name": "optionValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the value field of an option when arbitrary objects are used as options instead of SelectItems."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "selectOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the focused option is selected."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Selected value to display."
+                        },
+                        {
+                            "name": "virtualScrollerOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "default": "",
+                            "description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ListBoxChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when value of listbox changes."
+                        },
+                        {
+                            "name": "onFilterValueChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ListBoxFilterValueChangeEvent",
+                                    "description": "Custom filter value change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when filter value changes."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "ListBoxChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Single value or an array of values depending on the selection mode"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ListBoxChangeTargetOptions",
+                            "description": "Target element."
+                        }
+                    ]
+                },
+                "ListBoxFilterValueChangeEvent": {
+                    "description": "Custom filter value change event.",
+                    "relatedProp": "onFilterValueChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "The filtered value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ListBoxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ListBoxProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ListBoxState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ListBoxContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ListBoxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the emptyMessage's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ListBoxState": {
+                    "description": "Defines current inline state in ListBox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current filter value state as a string."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ListBoxContext": {
+                    "description": "Defines current options in ListBox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selection state of the item as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ListBoxChangeTargetOptions": {
+                    "description": "Custom change target options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The name of the target."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "New value of the element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ListBoxFilterTemplateOptions": {
+                    "description": "Custom filter template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the option is disabled or not"
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLDivElement",
+                            "description": "The filter element."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The filter."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ListBox>",
+                            "description": "Icon of the filter."
+                        },
+                        {
+                            "name": "filterIconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter icon."
+                        },
+                        {
+                            "name": "filterInputChange",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChangeEvent<HTMLInputElement>",
+                            "description": "Browser change event for the filter input element."
+                        },
+                        {
+                            "name": "filterInputProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "The props of the filter input element."
+                        },
+                        {
+                            "name": "filterOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ListBoxFilterOptions",
+                            "description": "The filter input options."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The placeholder of the filter element."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "Custom filter template."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ListBoxFilterOptions": {
+                    "description": "Custom filter options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "reset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ListBoxPassThroughType": {
+                    "values": "PassThroughType<T, ListBoxPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "megamenu": {
+        "description": "MegaMenu is navigation component that displays submenus together.\n\n[Live Demo](https://www.primereact.org/megamenu/)",
+        "components": {
+            "MegaMenu": {
+                "description": "MegaMenu is navigation component that displays submenus together.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in MegaMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of trailing element"
+                        },
+                        {
+                            "name": "menuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MegaMenuProps>",
+                            "default": "",
+                            "description": "Icon to display in the horizontal menu."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Defines the orientation, valid values are horizontal and vertical."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "400px",
+                            "description": "Maximum height of the options panel on responsive mode."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of starting element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MegaMenuProps>",
+                            "default": "",
+                            "description": "Icon of the submenu."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu loses focus."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu receives focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MegaMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MegaMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MegaMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MegaMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MegaMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the menu button's DOM element."
+                        },
+                        {
+                            "name": "menuButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the menu icon's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "headerAction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the header action's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "grid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the grid's DOM element."
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the column's DOM element."
+                        },
+                        {
+                            "name": "submenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the submenu's DOM element."
+                        },
+                        {
+                            "name": "submenuItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the submenu items's DOM element."
+                        },
+                        {
+                            "name": "submenuHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the submenu header's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the start of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MegaMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the end of the component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MegaMenuFocusedItemInfo": {
+                    "description": "Defines focused item info",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Active item index"
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Active item level"
+                        },
+                        {
+                            "name": "parentKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Parent key info"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MegaMenuState": {
+                    "description": "Defines current inline state in MegaMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "mobileActive",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current mobileActive state as a boolean."
+                        },
+                        {
+                            "name": "attributeSelector",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current attributeSelector visible state as a string."
+                        },
+                        {
+                            "name": "activeItem",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "description": "Active item path."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MegaMenuContext": {
+                    "description": "Defines current options in MegaMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MegaMenuPassThroughType": {
+                    "values": "PassThroughType<T, MegaMenuPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "mention": {
+        "description": "Mention component is used to refer someone or something.\n\n[Live Demo](https://www.primereact.org/mention/)",
+        "components": {
+            "Mention": {
+                "description": "Mention component is used to refer someone or something.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | ForwardRefExoticComponent<InputTextareaProps & RefAttributes<HTMLTextAreaElement>>",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Hide the mention."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Show the mention."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Mention component. In addition to these, all properties of HTMLTextAreaElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoHighlight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, highlights the first item in the list by default."
+                        },
+                        {
+                            "name": "autoResize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, height of textarea changes as being typed."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "delay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay between keystrokes to wait before sending a query."
+                        },
+                        {
+                            "name": "field",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | string[]",
+                            "default": "",
+                            "description": "Field of a suggested object to resolve and display."
+                        },
+                        {
+                            "name": "footerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of footer."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of header."
+                        },
+                        {
+                            "name": "inputClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template for the items."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the overlay panel element."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay panel element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "200px",
+                            "description": "Maximum height of the suggestions panel."
+                        },
+                        {
+                            "name": "suggestions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of suggestions to display."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | string[]",
+                            "default": "\"@\"",
+                            "description": "Set trigger keyword."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when value changes."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element receives focus."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes hidden."
+                        },
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on input event of input field."
+                        },
+                        {
+                            "name": "onSearch",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MentionSearchEvent",
+                                    "description": "Custom search event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when search."
+                        },
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MentionSelectEvent",
+                                    "description": "Custom select event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selection changes."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "MentionSearchEvent": {
+                    "description": "Custom search event",
+                    "relatedProp": "onSearch",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current trigger keyword."
+                        },
+                        {
+                            "name": "query",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current query string entered by the user."
+                        }
+                    ]
+                },
+                "MentionSelectEvent": {
+                    "description": "Custom select event",
+                    "relatedProp": "onSelect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "suggestion",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Selected item"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MentionPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MentionProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MentionState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MentionPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the InputTextarea component."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "items",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the items' DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MentionPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MentionState": {
+                    "description": "Defines current inline state in Mention component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "searching",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current search state as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current trigger state."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "For item, this is the state of the item."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MentionContext": {
+                    "description": "Defines current options in Mention component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "trigger",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current trigger state."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MentionItemTemplateOptions": {
+                    "description": "",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the menu item."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Triggered the mention item."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MentionPassThroughType": {
+                    "values": "PassThroughType<T, MentionPassThroughMethodOptions>"
+                },
+                "MentionPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "menu": {
+        "description": "Menu is a navigation/command component that supports dynamic and static positioning.\n\n[Live Demo](https://www.primereact.org/menu/)",
+        "components": {
+            "Menu": {
+                "description": "Menu is a navigation/command component that supports dynamic and static positioning.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getTarget",
+                            "parameters": [],
+                            "returnType": "null | EventTarget",
+                            "description": "Used to get target element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Hides the popup menu."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Displays the popup menu."
+                        },
+                        {
+                            "name": "toggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Toggles the visibility of the popup menu."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Menu component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the Menu Popup."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "popup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if menu would displayed as a popup."
+                        },
+                        {
+                            "name": "popupAlignment",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "left",
+                            "description": "In popup mode determines how the overlay is aligned with its target. Values either 'left' or 'right'."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu loses focus."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu receives focus."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MenuContext": {
+                    "description": "Defines current options in Menu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the menuitem"
+                        },
+                        {
+                            "name": "parentId",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "null | string",
+                            "description": "Id of the submenu header containing the menuitem"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "submenuHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the submenu header's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MenuState": {
+                    "description": "Defines current inline state in Menu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current element id."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MenuPassThroughType": {
+                    "values": "PassThroughType<T, MenuPassThroughMethodOptions>"
+                },
+                "MenuPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "menubar": {
+        "description": "Manubar is an input component that provides real-time suggestions when being typed.\n\n[Live Demo](https://www.primereact.org/menubar/)",
+        "components": {
+            "Menubar": {
+                "description": "Manubar is an input component that provides real-time suggestions when being typed.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getMenuButton",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get menu button element."
+                        },
+                        {
+                            "name": "getRootMenu",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get root menu element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Menubar component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Used to define a string that labels the component."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of trailing element."
+                        },
+                        {
+                            "name": "menuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MenubarProps>",
+                            "default": "",
+                            "description": "Icon of the menu."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of starting element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MenubarProps>",
+                            "default": "",
+                            "description": "Icon of the submenu."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu loses focus."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu receives focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MenubarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenubarContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MenubarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the submenu's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLElement>>",
+                            "description": "Uses to pass attributes to the mobile popup menu button's DOM element."
+                        },
+                        {
+                            "name": "popupIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the mobile popup menu button icon's DOM element."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the start of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenubarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the end of the component."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MenubarState": {
+                    "description": "Defines current inline state in Menubar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "mobileActive",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current mobile menu active state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MenubarContext": {
+                    "description": "Defines current options in Menubar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of the menuitem."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of menuitem as a boolean."
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current level of the menuitem."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MenubarPassThroughType": {
+                    "values": "PassThroughType<T, MenubarPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "menuitem": {
+        "description": "PrimeReact menus components share a common api to specify the menuitems and submenus.\n\n[Live Demo](https://www.primereact.org/menumodel/)",
+        "model": {
+            "MenuItem": {
+                "description": "Defines model of MenuItem API.",
+                "props": {
+                    "description": "",
+                    "values": [
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the menuitem."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Text of the menuitem."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Icon of the item. It can be a string, JSX.Element or method."
+                        },
+                        {
+                            "name": "url",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "External link to navigate when item is clicked."
+                        },
+                        {
+                            "name": "items",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[] | MenuItem[][]",
+                            "default": "",
+                            "description": "An array of children the menuitems."
+                        },
+                        {
+                            "name": "expanded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Visibility of submenu."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When set as true, disables the menuitem."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When set as false, hides the menuitem."
+                        },
+                        {
+                            "name": "target",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Specifies where to open the linked document."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines the item as a separator."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the menuitem."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the menuitem."
+                        },
+                        {
+                            "name": "template",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the menuitem."
+                        },
+                        {
+                            "name": "data",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "The data of the menuitem."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "command",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MenuItemCommandEvent",
+                                    "description": "Custom command event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to execute when item is clicked."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "MenuItemCommandEvent": {
+                    "description": "Custom command event.",
+                    "relatedProp": "command",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "description": "Selected item instance."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MenuItemOptions": {
+                    "description": "Menu item options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "labelClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the label element."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Class name of the options icon."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "All component props"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    "message": {
+        "description": "Message is used to display inline message with various severities.\n\n[Live Demo](https://www.primereact.org/message)",
+        "components": {
+            "Message": {
+                "description": "Message is used to display inline message with various severities.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Message component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of the message."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MessageProps>",
+                            "default": "based on severity",
+                            "description": "Icon for the message. If not set it will default to severity icon."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"error\" | \"success\" | \"info\" | \"warn\" | \"secondary\" | \"contrast\"",
+                            "default": "",
+                            "description": "Severity level of the message."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Text of the message."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MessagePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MessageProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MessagePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MessagePassThroughType": {
+                    "values": "PassThroughType<T, MessagePassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "messages": {
+        "description": "Messages is used to display inline messages with various severities.\n\n[Live Demo](https://www.primereact.org/messages)",
+        "components": {
+            "Messages": {
+                "description": "Messages is used to display inline messages with various severities.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "clear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to clear the shown messages."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "remove",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "type": "MessagesMessage | MessagesMessage[]",
+                                    "description": "Message to remove"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to remove messages."
+                        },
+                        {
+                            "name": "replace",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "type": "MessagesMessage | MessagesMessage[]",
+                                    "description": "New message."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to add new messages after removing all old messages."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "type": "MessagesMessage | MessagesMessage[]",
+                                    "description": "Showed message."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to show the message."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Messages component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "optional": false,
+                                    "type": "MessagesMessage",
+                                    "description": "Clicked message."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a message gets clicked."
+                        },
+                        {
+                            "name": "onRemove",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "optional": false,
+                                    "type": "MessagesMessage",
+                                    "description": "Removed message."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a message is removed."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MessagesPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MessagesProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MessagesState"
+                        },
+                        {
+                            "name": "hostName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "index",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MessagesPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "summary",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the summary's DOM element."
+                        },
+                        {
+                            "name": "detail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the detail's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "buttonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the button icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MessagesState": {
+                    "description": "Defines current inline state in Messages component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "messages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Object[]",
+                            "description": "Array of messages"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MessagesMessage": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique id of the message."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"error\" | \"success\" | \"info\" | \"warn\" | \"secondary\" | \"contrast\"",
+                            "description": "Severity of the message."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Custom template of the message."
+                        },
+                        {
+                            "name": "summary",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Summary content of the message."
+                        },
+                        {
+                            "name": "detail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Detail content of the message."
+                        },
+                        {
+                            "name": "closable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the message can be closed manually using the close icon."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MessagesProps>",
+                            "description": "Icon of the close button."
+                        },
+                        {
+                            "name": "sticky",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, message is not removed automatically."
+                        },
+                        {
+                            "name": "life",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Delay in milliseconds to close the message automatically."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MessagesProps>",
+                            "description": "Defines the icon to display."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MessagesPassThroughOptions",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MessagesPassThroughType": {
+                    "values": "PassThroughType<T, MessagesPassThroughMethodOptions>"
+                },
+                "MessagesPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "metergroup": {
+        "description": "MeterGroup displays scalar measurements within a known range.\n\n[Live Demo](https://www.primereact.org/metergroup/)",
+        "components": {
+            "MeterGroup": {
+                "description": "MeterGroup is an extension to standard input element with theming and keyfiltering.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Additional CSS classes to apply to the MeterGroup."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "labelList",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "labelOrientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "'horizontal'",
+                            "description": "The orientation of the label. Can be either 'horizontal' or 'vertical'."
+                        },
+                        {
+                            "name": "labelPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"end\" | \"start\"",
+                            "default": "'end'",
+                            "description": "The position of the label. Can be either 'start' or 'end'."
+                        },
+                        {
+                            "name": "max",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "100",
+                            "description": "The maximum value for the MeterGroup."
+                        },
+                        {
+                            "name": "meter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "min",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "The minimum value for the MeterGroup."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "'horizontal'",
+                            "description": "The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "values",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupValue[]",
+                            "default": "",
+                            "description": "An array of values to be represented by the MeterGroup."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MeterGroupContext": {
+                    "description": "Defines current options in MeterGroup component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the component as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MeterGroupPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MeterGroupProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MeterGroupContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MeterGroupPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "labellist",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLOListElement>>",
+                            "description": "Used to pass attributes to the label list's DOM element."
+                        },
+                        {
+                            "name": "labellistitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Used to pass attributes to the label list item's DOM element."
+                        },
+                        {
+                            "name": "labellisttype",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<any>>",
+                            "description": "Used to pass attributes to the label list type's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Used to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "metercontainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the meter container's DOM element."
+                        },
+                        {
+                            "name": "meter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MeterGroupPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the meter's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MeterGroupValue": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number"
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | HTMLElement"
+                        },
+                        {
+                            "name": "color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "CustomRenderProps": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "totalPercent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number"
+                        },
+                        {
+                            "name": "percentages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number[]"
+                        },
+                        {
+                            "name": "values",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MeterGroupValue[]"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MeterGroupPassThroughType": {
+                    "values": "PassThroughType<T, MeterGroupPassThroughMethodOptions>"
+                },
+                "MeterGroupPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "multiselect": {
+        "description": "MultiSelect is used to select multiple items from a collection.\n\n[Live Demo](https://www.primereact.org/multiselect/)",
+        "components": {
+            "MultiSelect": {
+                "description": "MultiSelect is used to select multiple items from a collection.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the overlay."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the overlay."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in MultiSelect component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoOptionFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to focus on the first visible or selected element."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelectProps>",
+                            "default": "",
+                            "description": "Icon of the checkbox when checked."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelectProps>",
+                            "default": "",
+                            "description": "Clear icon of the multiselect input."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelectProps>",
+                            "default": "",
+                            "description": "Close icon of the multiselect panel header."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A property to uniquely match the value in options for better performance."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "display",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"comma\" | \"chip\"",
+                            "default": "comma",
+                            "description": "Used mode to display the selected item. Valid values are 'comma' and 'chip'."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelectProps>",
+                            "default": "",
+                            "description": "Icon class of the dropdown icon."
+                        },
+                        {
+                            "name": "emptyFilterMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No records found",
+                            "description": "Template to display when filtering does not return any results."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Text to display when there are no options available. Defaults to global value in Locale configuration."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When specified, displays an input field to filter the items on keyup."
+                        },
+                        {
+                            "name": "filterBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "label",
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                        },
+                        {
+                            "name": "filterDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "300",
+                            "description": "Delay in milliseconds before filtering the data."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelect>",
+                            "default": "",
+                            "description": "Icon of the filter icon."
+                        },
+                        {
+                            "name": "filterInputAutoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When the panel is opened, it specifies that the filter input should focus automatically."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
+                            "default": "contains",
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when filter input is empty."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of filter element."
+                        },
+                        {
+                            "name": "fixedPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display selected items in the label section or always display the placeholder as the default label."
+                        },
+                        {
+                            "name": "flex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Use flex layout for the items panel."
+                        },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "inline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Render the items panel inline."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the focusable input."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLSelectElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "itemCheckboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelect>",
+                            "default": "",
+                            "description": "The icon displayed in the header when all checkboxes are checked."
+                        },
+                        {
+                            "name": "itemClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the items."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Function that gets the option and returns the content for it."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Displays a loader to indicate data load is in progress."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelectProps>",
+                            "default": "",
+                            "description": "The icon to show while indicating data load is in progress."
+                        },
+                        {
+                            "name": "maxSelectedLabels",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Decides how many selected item labels to show at most."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "optionDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
+                        },
+                        {
+                            "name": "optionGroupChildren",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function that refers to the children options of option group."
+                        },
+                        {
+                            "name": "optionGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the label of an option group."
+                        },
+                        {
+                            "name": "optionGroupTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of an option group item."
+                        },
+                        {
+                            "name": "optionLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectItemOptionsType",
+                            "default": "",
+                            "description": "An array of selectitems to display as the available options."
+                        },
+                        {
+                            "name": "optionValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name or getter function to use as the value of an option, defaults to the option itself when not defined."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the overlay panel."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the overlay panel element."
+                        },
+                        {
+                            "name": "panelFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the panel footer."
+                        },
+                        {
+                            "name": "panelHeaderTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the panel header."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay panel element."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Label to display when there are no selections."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "removeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<MultiSelectProps>",
+                            "default": "",
+                            "description": "Icon of the remove chip element."
+                        },
+                        {
+                            "name": "resetFilterOnHide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Clears the filter value when hiding the dropdown."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "200px",
+                            "description": "Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value."
+                        },
+                        {
+                            "name": "selectAll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether all data is selected."
+                        },
+                        {
+                            "name": "selectAllLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Label to display if showSelectAll is true"
+                        },
+                        {
+                            "name": "selectedItemsLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "items selected",
+                            "description": "Label to display after exceeding max selected labels."
+                        },
+                        {
+                            "name": "selectedItemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Function that gets an item in the value and returns the content for it."
+                        },
+                        {
+                            "name": "selectionLimit",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of maximum options that can be selected."
+                        },
+                        {
+                            "name": "selectOnFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, the focused tab is activated."
+                        },
+                        {
+                            "name": "showClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "showSelectAll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the select all checkbox inside the panel's header."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "useOptionAsValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether the option should be used as the value for the select element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the component."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "virtualScrollerOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "default": "",
+                            "description": "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MultiSelectChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when value changes."
+                        },
+                        {
+                            "name": "onFilter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MultiSelectFilterEvent",
+                                    "description": "Custom filter event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on filtering."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLInputElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the element receives focus."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes hidden."
+                        },
+                        {
+                            "name": "onRemove",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MultiSelectRemoveEvent",
+                                    "description": "Custom remove event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a chip is removed."
+                        },
+                        {
+                            "name": "onSelectAll",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MultiSelectAllEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when all data is selected."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "MultiSelectHeaderCheckboxChangeEvent": {
+                    "description": "Custom checkbox change event",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormEvent<HTMLInputElement>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        }
+                    ]
+                },
+                "MultiSelectChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current selected values"
+                        },
+                        {
+                            "name": "selectedOption",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Selected option"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectChangeTargetOptions",
+                            "description": "Additional information about the event."
+                        }
+                    ]
+                },
+                "MultiSelectRemoveEvent": {
+                    "description": "Custom remove event when chip is removed.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Removed item value"
+                        }
+                    ]
+                },
+                "MultiSelectFilterEvent": {
+                    "description": "Custom filter event.",
+                    "relatedProp": "onFilter",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Filter value."
+                        }
+                    ]
+                },
+                "MultiSelectAllEvent": {
+                    "description": "Custom select event.",
+                    "relatedProp": "onSelectAll",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether all data is selected."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MultiSelectPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiSelectPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "labelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the label container's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "tokenLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the token label's DOM element."
+                        },
+                        {
+                            "name": "removeTokenIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the remove token icon's DOM element."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the trigger's DOM element."
+                        },
+                        {
+                            "name": "triggerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the trigger icon's DOM element."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the clear icon's DOM element."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the dropdown icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerCheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptions",
+                            "description": "Uses to pass attributes to the header checkbox's DOM element."
+                        },
+                        {
+                            "name": "headerCheckboxContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header checkbox's container DOM element."
+                        },
+                        {
+                            "name": "headerSelectAllLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLLabelElement>>",
+                            "description": "Uses to pass attributes to the header checkbox's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the filter input's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "virtualScroller",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "description": "Uses to pass attributes to the VirtualScroller component."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "itemGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item group's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "checkboxContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the checkbox container's DOM element."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughOptions",
+                            "description": "Uses to pass attributes to the checkbox's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the emptyMessage's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiSelectState": {
+                    "description": "Defines current inline state in MultiSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "filterState",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current filter state as a string."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiSelectContext": {
+                    "description": "Defines current options in MultiSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selection state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiSelectPanelHeaderTemplateEvent": {
+                    "description": "Custom multiselect panel header template event.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The class name for the header element."
+                        },
+                        {
+                            "name": "checkboxElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The checkbox element for selecting items."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the checkbox is checked."
+                        },
+                        {
+                            "name": "filterElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The element for filtering the items."
+                        },
+                        {
+                            "name": "closeElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The close element."
+                        },
+                        {
+                            "name": "closeElementClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The classname for the close element."
+                        },
+                        {
+                            "name": "closeIconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The classname for the close icon element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiSelectProps",
+                            "description": "The props of Multiselect component"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MultiSelectHeaderCheckboxChangeEvent",
+                                    "description": "Custom checkbox change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function when the checkbox state is changed."
+                        },
+                        {
+                            "name": "onCloseClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Current param"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function when the close button is clicked."
+                        }
+                    ]
+                },
+                "MultiSelectChangeTargetOptions": {
+                    "description": "Custom multiselect change target options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The name of the element."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "The value of the element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiSelectFilterOptions": {
+                    "description": "Multiselect filter options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "reset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiSelectTemplateOptions": {
+                    "description": "Custom filter template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLDivElement",
+                            "description": "The filter element."
+                        },
+                        {
+                            "name": "filterIconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter icon."
+                        },
+                        {
+                            "name": "filterOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectFilterOptions",
+                            "description": "The filter input options."
+                        },
+                        {
+                            "name": "props",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "The props of multiselect header."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MultiSelectPassThroughType": {
+                    "values": "PassThroughType<T, MultiSelectPassThroughMethodOptions>"
+                },
+                "MultiSelectPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "multistatecheckbox": {
+        "description": "MultiStateCheckbox is used to select a state from given multiple states.\n\n[Live Demo](https://www.primereact.org/multistatecheckbox/)",
+        "components": {
+            "MultiStateCheckbox": {
+                "description": "MultiStateCheckbox is used to select a state from given multiple states.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in MultiStateCheckbox component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A property to uniquely identify an option."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element value cannot be altered."
+                        },
+                        {
+                            "name": "empty",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "If false, the empty state is skipped in the chekbox."
+                        },
+                        {
+                            "name": "iconTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of icon for the selected option."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component has invalid state style."
+                        },
+                        {
+                            "name": "optionIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name to use as the icon of an option, defaults to the icon property."
+                        },
+                        {
+                            "name": "optionLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name to refer to the option label, used by screen readers only. Defaults to optionValue."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[] | MultiStateCheckboxOption[]",
+                            "default": "",
+                            "description": "An array to display as the available options."
+                        },
+                        {
+                            "name": "optionValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Property name to use as the value of an option, defaults to the option itself when not defined."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the value cannot be changed."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the MultiStateCheckbox."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "null",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MultiStateCheckboxChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change"
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "MultiStateCheckboxChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current value"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxChangeTargetOptions",
+                            "description": "Target options."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "MultiStateCheckboxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiStateCheckboxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the checkbox box's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "srOnlyAria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the sr only aria's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiStateCheckboxState": {
+                    "description": "Defines current inline state in MultiStateCheckbox component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Focused state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiStateCheckboxOption": {
+                    "description": "Custom MultiStateCheckbox option.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "icon",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "IconType<MultiStateCheckboxProps>",
+                            "description": "The icon of the option."
+                        },
+                        {
+                            "name": "style",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiStateCheckboxIconTemplateEvent": {
+                    "description": "Custom icon template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "option",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | MultiStateCheckboxOption",
+                            "description": "Option of the element."
+                        },
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MultiStateCheckboxProps",
+                            "description": "The props passed to the component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "MultiStateCheckboxChangeTargetOptions": {
+                    "description": "Custom change target options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The name of the element."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | boolean",
+                            "description": "Value of the MultiStateCheckbox."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "MultiStateCheckboxPassThroughType": {
+                    "values": "PassThroughType<T, MultiStateCheckboxPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "orderlist": {
+        "description": "OrderList is used to sort a collection.\n\n[Live Demo](https://www.primereact.org/orderlist/)",
+        "components": {
+            "OrderList": {
+                "description": "OrderList is used to sort a collection.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in OrderList component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Used to define a string that labels the component."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoOptionFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to focus on the first visible or selected element."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "'960px'.",
+                            "description": "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the field that uniquely identifies the a record in the data."
+                        },
+                        {
+                            "name": "dragdrop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to enable dragdrop based reordering."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "label",
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                        },
+                        {
+                            "name": "filterBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "label",
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<OrderListProps>",
+                            "default": "",
+                            "description": "Icon of the filter."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
+                            "default": "contains",
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when filter input is empty."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template of filter element."
+                        },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Text for the caption."
+                        },
+                        {
+                            "name": "listStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the list element."
+                        },
+                        {
+                            "name": "moveBottomIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<OrderListProps>",
+                            "default": "",
+                            "description": "Icon of the move bottom icon."
+                        },
+                        {
+                            "name": "moveDownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<OrderListProps>",
+                            "default": "",
+                            "description": "Icon of the move down icon."
+                        },
+                        {
+                            "name": "moveTopIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<OrderListProps>",
+                            "default": "",
+                            "description": "Icon of the move top icon."
+                        },
+                        {
+                            "name": "moveUpIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<OrderListProps>",
+                            "default": "",
+                            "description": "Icon of the move up icon."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of objects to reorder."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "itemTemplate",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current item"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "The template of each item"
+                        },
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "OrderListChangeEvent",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke to when a mouse button is pressed."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu receives focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "OrderListChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Reordered list"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "OrderListPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrderListProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrderListState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrderListContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrderListPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "controls",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the controls' DOM element."
+                        },
+                        {
+                            "name": "moveUpButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveTopButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveDownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveBottomButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "droppoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrderListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrderListState": {
+                    "description": "Defines current inline state in OrderList component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selection",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "[]",
+                            "description": "Current selection state as a boolean."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current filter value as a string.s"
+                        },
+                        {
+                            "name": "attributeSelector",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current attribute selector state as a string."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrderListContext": {
+                    "description": "Defines current options in OrderList component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selection state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrderListFilterOptions": {
+                    "description": "Custom filter options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "reset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "OrderListPassThroughType": {
+                    "values": "PassThroughType<T, OrderListPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "organizationchart": {
+        "description": "OrganizationChart visualizes hierarchical organization data.\n\n[Live Demo](https://www.primereact.org/organizationchart/)",
+        "components": {
+            "OrganizationChart": {
+                "description": "OrganizationChart visualizes hierarchical organization data.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in OrganizationChart component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "selection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | OrganizationChartNodeData | OrganizationChartNodeData[]",
+                            "default": "",
+                            "description": "A single treenode instance or an array to refer to the selections."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"single\"",
+                            "default": "",
+                            "description": "Defines the selection mode, valid values \"single\" and \"multiple\"."
+                        },
+                        {
+                            "name": "togglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<OrganizationChartProps>",
+                            "default": "",
+                            "description": "Toggle icon of an expanded and collapsed node."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartNodeData[]",
+                            "default": "",
+                            "description": "An array of nested TreeNodes."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "nodeTemplate",
+                            "parameters": [
+                                {
+                                    "name": "node",
+                                    "optional": false,
+                                    "type": "OrganizationChartNodeData",
+                                    "description": "A node instance."
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Template function that gets a node as a parameter and returns a content."
+                        },
+                        {
+                            "name": "onNodeSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "OrganizationChartNodeSelectEvent",
+                                    "description": "Custom node select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is selected."
+                        },
+                        {
+                            "name": "onNodeUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "OrganizationChartNodeUnselectEvent",
+                                    "description": "Custom node unselect event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is unselected."
+                        },
+                        {
+                            "name": "onSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "OrganizationChartSelectionChangeEvent",
+                                    "description": "Custom selection changed event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when node selection changes."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "OrganizationChartNodeSelectEvent": {
+                    "description": "Custom node select event.",
+                    "relatedProp": "onNodeSelect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | OrganizationChartNodeData",
+                            "description": "Selected node instance."
+                        }
+                    ]
+                },
+                "OrganizationChartNodeUnselectEvent": {
+                    "description": "Custom node unselect event.",
+                    "relatedProp": "onNodeUnselect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | OrganizationChartNodeData",
+                            "description": "Unselected node instance."
+                        }
+                    ]
+                },
+                "OrganizationChartSelectionChangeEvent": {
+                    "description": "Custom selection change event.",
+                    "relatedProp": "onSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "data",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | OrganizationChartNodeData | OrganizationChartNodeData[]",
+                            "description": "Selected node(s)."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "OrganizationChartPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrganizationChartProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrganizationChartState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OrganizationChartContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrganizationChartPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the row's DOM element."
+                        },
+                        {
+                            "name": "cell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the cell's DOM element."
+                        },
+                        {
+                            "name": "node",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the node's DOM element."
+                        },
+                        {
+                            "name": "nodeToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the nodeToggler's DOM element."
+                        },
+                        {
+                            "name": "nodeTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the nodeTogglerIcon's DOM element."
+                        },
+                        {
+                            "name": "lines",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the lines's DOM element."
+                        },
+                        {
+                            "name": "lineLeft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the lineLeft's DOM element."
+                        },
+                        {
+                            "name": "lineRight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the lineRight's DOM element."
+                        },
+                        {
+                            "name": "lineCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the lineCell's DOM element."
+                        },
+                        {
+                            "name": "lineDown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the lineDown's DOM element."
+                        },
+                        {
+                            "name": "nodes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the nodes's DOM element."
+                        },
+                        {
+                            "name": "nodeCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OrganizationChartPassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the nodeCell's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrganizationChartState": {
+                    "description": "Defines current inline state in OrganizationChart component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "expanded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focus expanded of the node as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrganizationChartContext": {
+                    "description": "Defines current options in OrganizationChart component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selection state of the node as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OrganizationChartNodeData": {
+                    "description": "Custom organizationchart node data.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the node."
+                        },
+                        {
+                            "name": "expanded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Visibility of node."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "OrganizationChartNodeData[]",
+                            "description": "The child elements of the component."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the node is selectable when selection mode is enabled."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Label of node."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "OrganizationChartPassThroughType": {
+                    "values": "PassThroughType<T, OrganizationChartPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "overlaypanel": {
+        "description": "OverlayPanel, also known as Popover, is a container component that can overlay other components on page.\n\n[Live Demo](https://www.primereact.org/overlaypanel)",
+        "components": {
+            "OverlayPanel": {
+                "description": "OverlayPanel, also known as Popover, is a container component that can overlay other components on page.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "align",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Align the overlay panel to its surroundings."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Hides the overlay."
+                        },
+                        {
+                            "name": "isVisible",
+                            "parameters": [],
+                            "returnType": "boolean",
+                            "description": "Checks whether the overlay is currently visible."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "undefined | null | SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                },
+                                {
+                                    "name": "target",
+                                    "type": "undefined | null | EventTarget | HTMLElement",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Shows the overlay."
+                        },
+                        {
+                            "name": "toggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "undefined | null | SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                },
+                                {
+                                    "name": "target",
+                                    "type": "null | EventTarget | HTMLElement",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Toggles the visiblity of the overlay."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in OverlayPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaCloseLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "close",
+                            "description": "Aria label of the close icon."
+                        },
+                        {
+                            "name": "breakpoints",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelBreakpoints",
+                            "default": "",
+                            "description": "Object literal to define widths per screen size."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<OverlayPanelProps>",
+                            "default": "",
+                            "description": "Icon to display as close icon."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the preview."
+                        },
+                        {
+                            "name": "dismissable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Enables to hide the overlay when outside is clicked."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "showCloseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, displays a close icon at top right corner."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay becomes hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "OverlayPanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OverlayPanelProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "OverlayPanelState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OverlayPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "OverlayPanelPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OverlayPanelState": {
+                    "description": "Defines current inline state in OverlayPanel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OverlayPanelBreakpoints": {
+                    "description": "Custom overlay panel breakpoints",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "OverlayPanelPassThroughType": {
+                    "values": "PassThroughType<T, OverlayPanelPassThroughMethodOptions>"
+                },
+                "OverlayPanelPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "overlayservice": {
+        "description": "OverlayService allows all overlay components to communicate with each other.\n\n[Live Demo](https://www.primereact.org/dropdown/)",
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "OverlayServiceEvent": {
+                    "description": "Overlay service event.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Original event that triggered the overlay."
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLElement",
+                            "description": "Target element that the overlay is bound to."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "OverlayServiceOptions": {
+                    "description": "",
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": [
+                        {
+                            "name": "on",
+                            "parameters": [
+                                {
+                                    "name": "action",
+                                    "optional": false,
+                                    "type": "\"overlay-click\"",
+                                    "description": "Custom listener."
+                                },
+                                {
+                                    "name": "fn",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Custom listener."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Add event listener for overlay click."
+                        },
+                        {
+                            "name": "emit",
+                            "parameters": [
+                                {
+                                    "name": "action",
+                                    "optional": false,
+                                    "type": "\"overlay-click\"",
+                                    "description": "Custom listener."
+                                },
+                                {
+                                    "name": "params",
+                                    "optional": true,
+                                    "type": "OverlayServiceEvent",
+                                    "description": "Custom listener."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Trigger overlay click event."
+                        },
+                        {
+                            "name": "off",
+                            "parameters": [
+                                {
+                                    "name": "action",
+                                    "optional": false,
+                                    "type": "\"overlay-click\"",
+                                    "description": "Custom listener."
+                                },
+                                {
+                                    "name": "fn",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Custom listener."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Remove event listener for overlay click."
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    "paginator": {
+        "description": "Paginator is a generic widget to display content in paged format.\n\n[Live Demo](https://www.primereact.org/paginator/)",
+        "components": {
+            "Paginator": {
+                "description": "Paginator is a generic widget to display content in paged format.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Paginator component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "alwaysShow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether to show it even there is only one page."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "currentPageReportTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "({currentPage} of {totalPages})",
+                            "description": "Template of the current page report element. Available placeholders are {currentPage}, {totalPages}, {rows}, {first}, {last} and {totalRecords}"
+                        },
+                        {
+                            "name": "dropdownAppendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "first",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Zero-relative number of the first row to be displayed."
+                        },
+                        {
+                            "name": "firstPageLinkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PaginatorProps>",
+                            "default": "",
+                            "description": "Icon of the first page link icon template."
+                        },
+                        {
+                            "name": "lastPageLinkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PaginatorProps>",
+                            "default": "",
+                            "description": "Icon of the last page link icon template."
+                        },
+                        {
+                            "name": "leftContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content to inject into the left side of the paginator."
+                        },
+                        {
+                            "name": "nextPageLinkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PaginatorProps>",
+                            "default": "",
+                            "description": "Icon of the next page link icon template."
+                        },
+                        {
+                            "name": "pageLinkSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Number of page links to display."
+                        },
+                        {
+                            "name": "prevPageLinkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PaginatorProps>",
+                            "default": "",
+                            "description": "Icon of the prev page link icon template."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rightContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content to inject into the right side of the paginator."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Data count to display per page."
+                        },
+                        {
+                            "name": "rowsPerPageOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "default": "",
+                            "description": "Array of integer values to display inside rows per page dropdown."
+                        },
+                        {
+                            "name": "template",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | PaginatorTemplateOptions",
+                            "default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
+                            "description": "Custom template of the paginator."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Number of total records."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onPageChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PaginatorPageChangeEvent",
+                                    "description": "Custom page change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when page changes, the event object contains information about the new state."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "PaginatorPageChangeEvent": {
+                    "description": "Custom page change event.",
+                    "relatedProp": "onPageChange",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of first record"
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of rows to display in new page"
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "New page number"
+                        },
+                        {
+                            "name": "pageCount",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of pages"
+                        }
+                    ]
+                },
+                "PaginatorChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | string",
+                            "description": "New value of the element."
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorChangeTargetOptions",
+                            "description": "Target options."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "PaginatorPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PaginatorPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "left",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the left's DOM element."
+                        },
+                        {
+                            "name": "firstPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the first page button's DOM element."
+                        },
+                        {
+                            "name": "firstPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the first page icon's DOM element."
+                        },
+                        {
+                            "name": "prevPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the prev page button's DOM element."
+                        },
+                        {
+                            "name": "prevPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the prev page icon's DOM element."
+                        },
+                        {
+                            "name": "nextPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the next page button's DOM element."
+                        },
+                        {
+                            "name": "nextPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the next page icon's DOM element."
+                        },
+                        {
+                            "name": "lastPageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the last page button's DOM element."
+                        },
+                        {
+                            "name": "lastPageIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the last page icon's DOM element."
+                        },
+                        {
+                            "name": "pages",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the pages's DOM element."
+                        },
+                        {
+                            "name": "pageButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the page button's DOM element."
+                        },
+                        {
+                            "name": "current",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the current's DOM element."
+                        },
+                        {
+                            "name": "RPPDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptions",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "JTPInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputNumberPassThroughOptions",
+                            "description": "Uses to pass attributes to the Dropdown component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the end's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PaginatorContext": {
+                    "description": "Defines current options in Paginator component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled state of the button as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PaginatorFirstPageLinkOptions": {
+                    "description": "Custom paginator first page link options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the first page link."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Icon classname of the first page link."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the link is disabled."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the first page link."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The page number."
+                        },
+                        {
+                            "name": "currentPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current page number."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of pages."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of records."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of rows per page."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event.v"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                },
+                "PaginatorPrevPageLinkOptions": {
+                    "description": "Custom paginator prev page link options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the prev page link."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Icon classname of the prev page link."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the link is disabled."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the prev page link."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The page number."
+                        },
+                        {
+                            "name": "currentPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current page number."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of pages."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of records."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of rows per page."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                },
+                "PaginatorViewOptions": {
+                    "description": "Custom paginator view options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "startPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Starting page number for the paginator view."
+                        },
+                        {
+                            "name": "endPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Ending page number for the paginator view."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PaginatorPageLinksOptions": {
+                    "description": "Custom paginator page links options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the page links."
+                        },
+                        {
+                            "name": "view",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorViewOptions",
+                            "description": "Paginator view options."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The page number."
+                        },
+                        {
+                            "name": "currentPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current page number."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of pages."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of records."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of rows per page."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the page links."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                },
+                "PaginatorNextPageLinkOptions": {
+                    "description": "Custom paginator next page link options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the next page link."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Icon classname of the next page link."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the link is disabled."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the next page link."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The page number."
+                        },
+                        {
+                            "name": "currentPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current page number."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of pages."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of records."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of rows per page."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                },
+                "PaginatorLastPageLinkOptions": {
+                    "description": "Custom paginator last page link options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the last page link."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Icon classname of the last page link."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the link is disabled."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the last page link."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The page number."
+                        },
+                        {
+                            "name": "currentPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current page number."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of pages."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of records."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of rows per page."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                },
+                "PaginatorChangeTargetOptions": {
+                    "description": "Custom paginator change target options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The name attribute of the target options."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The id attribute of the target options."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | string",
+                            "description": "The value attribute of the target options."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PaginatorRowsPerPageDropdownOptions": {
+                    "description": "Custom rows per page dropdown options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "New value of the element."
+                        },
+                        {
+                            "name": "options",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "The options available in the rows per page dropdown."
+                        },
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and \"self\". The \"self\" value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "currentPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current page number."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of pages."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of records."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the rows per page dropdown."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the dropdown is disabled."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PaginatorChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Paginator options change callback"
+                        }
+                    ]
+                },
+                "PaginatorCurrentPageReportOptions": {
+                    "description": "Custom paginator current page report options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "currentPage",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current page number."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of pages."
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The first number of the current page."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The last number of the current page."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The number of rows per page."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The total number of records."
+                        },
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the current page report element."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PaginatorJumpToPageInputOptions": {
+                    "description": "Custom paginator jump to page input options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The current value."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the input is disabled."
+                        },
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the jump to page input element."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PaginatorProps",
+                            "description": "The props of Paginator component."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "first",
+                                    "optional": false,
+                                    "type": "number",
+                                    "description": "Custom change event."
+                                },
+                                {
+                                    "name": "rows",
+                                    "optional": false,
+                                    "type": "number",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the input value changes."
+                        }
+                    ]
+                },
+                "PaginatorTemplateOptions": {
+                    "description": "Custom paginator template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "layout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The layout of the paginator."
+                        },
+                        {
+                            "name": "FirstPageLink",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The first page link component."
+                        },
+                        {
+                            "name": "PrevPageLink",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The prev page link component."
+                        },
+                        {
+                            "name": "PageLinks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The page links component."
+                        },
+                        {
+                            "name": "NextPageLink",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The next page link component."
+                        },
+                        {
+                            "name": "LastPageLink",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The last page link component."
+                        },
+                        {
+                            "name": "RowsPerPageDropdown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The rows per page dropdown component."
+                        },
+                        {
+                            "name": "CurrentPageReport",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The current page report component."
+                        },
+                        {
+                            "name": "JumpToPageInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "The jump to page input component."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PaginatorPassThroughType": {
+                    "values": "PassThroughType<T, PaginatorPassThroughMethodOptions>"
+                },
+                "PaginatorPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                },
+                "PaginatorTemplate": {
+                    "values": "PaginatorTemplateOptions | string | undefined",
+                    "description": "Custom template for the paginator."
+                }
+            }
+        }
+    },
+    "panel": {
+        "description": "Panel is a grouping component providing with content toggle feature.\n\n[Live Demo](https://www.primereact.org/panel/)",
+        "components": {
+            "Panel": {
+                "description": "Panel is a grouping component providing with content toggle feature.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "collapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "undefined | SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Collapse the panel if toggleable."
+                        },
+                        {
+                            "name": "expand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "undefined | SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Expand the panel if toggleable."
+                        },
+                        {
+                            "name": "getContent",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get content of the panel."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "toggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "undefined | SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Toggle the panel if toggleable."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Panel component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "collapsed",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines the initial state of panel content, supports one or two-way binding as well."
+                        },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PanelProps>",
+                            "default": "",
+                            "description": "Icon of a collapsed tab."
+                        },
+                        {
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PanelProps>",
+                            "default": "",
+                            "description": "Icon of a expanded tab."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Custom footer template of the panel."
+                        },
+                        {
+                            "name": "footerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Footer template of the panel to customize more."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Custom header template of the panel."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Header template of the panel to customize more."
+                        },
+                        {
+                            "name": "icons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom icons template for the header."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "toggleable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if content of panel can be expanded and collapsed."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onCollapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active tab is collapsed by clicking on the header."
+                        },
+                        {
+                            "name": "onExpand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a tab gets expanded."
+                        },
+                        {
+                            "name": "onToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PanelToggleEvent",
+                                    "description": "Custom toggle event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a tab gets expanded."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "PanelToggleEvent": {
+                    "description": "Custom toggle event.",
+                    "relatedProp": "onToggle",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Collapsed state as a boolean."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "PanelHeaderTemplateOptions": {
+                    "description": "Custom panel header template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel."
+                        },
+                        {
+                            "name": "titleClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel title."
+                        },
+                        {
+                            "name": "iconsClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel icons."
+                        },
+                        {
+                            "name": "togglerClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel toggler."
+                        },
+                        {
+                            "name": "togglerIconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel toggler icon."
+                        },
+                        {
+                            "name": "titleElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the title of the panel."
+                        },
+                        {
+                            "name": "iconsElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the icons of the panel."
+                        },
+                        {
+                            "name": "togglerElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the toggler of the panel."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the panel."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelProps",
+                            "description": "The props of the Panel component."
+                        },
+                        {
+                            "name": "collapsed",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the panel header is collapsed or not."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onTogglerClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the toggler button is clicked."
+                        }
+                    ]
+                },
+                "PanelFooterTemplateOptions": {
+                    "description": "Custom panel footer template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the panel."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelProps",
+                            "description": "The props of the Panel component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "icons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the icons' DOM element."
+                        },
+                        {
+                            "name": "toggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the toggler's DOM element."
+                        },
+                        {
+                            "name": "togglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the togglericon's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toggleablecontent's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelState": {
+                    "description": "Defines current inline state in Panel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current id state."
+                        },
+                        {
+                            "name": "collapsed",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current collapsed state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PanelPassThroughType": {
+                    "values": "PassThroughType<T, PanelPassThroughMethodOptions>"
+                },
+                "PanelPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "panelmenu": {
+        "description": "PanelMenu is a hybrid of accordion-tree components.\n\n[Live Demo](https://www.primereact.org/panelmenu/)",
+        "components": {
+            "PanelMenu": {
+                "description": "PanelMenu is a hybrid of accordion-tree components.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in PanelMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PanelMenuProps>",
+                            "default": "",
+                            "description": "Icon used when a submenu is expanded."
+                        },
+                        {
+                            "name": "expandedKeys",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuExpandedKeys",
+                            "default": "",
+                            "description": "A map of keys to represent the expansion state in controlled mode."
+                        },
+                        {
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PanelMenuProps>",
+                            "default": "",
+                            "description": "Icon used when a submenu is collapsed."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "multiple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether multiple tabs can be activated at the same time or not."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClose",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PanelMenuHeaderItemClickEvent",
+                                    "description": "custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a panel gets collapsed."
+                        },
+                        {
+                            "name": "onExpandedKeysChange",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to when the expandedKeys changes."
+                        },
+                        {
+                            "name": "onOpen",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PanelMenuHeaderItemClickEvent",
+                                    "description": "custom event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a panel gets expanded."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "PanelMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerAction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the header action's DOM element."
+                        },
+                        {
+                            "name": "headerContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header content's DOM element."
+                        },
+                        {
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the expand icon's DOM element."
+                        },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the collapse icon's DOM element."
+                        },
+                        {
+                            "name": "headerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the header icon's DOM element."
+                        },
+                        {
+                            "name": "headerSubmenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the header submenu icon's DOM element."
+                        },
+                        {
+                            "name": "headerLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the header label's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toggleable content's DOM element."
+                        },
+                        {
+                            "name": "headerToggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header toggleable content's DOM element."
+                        },
+                        {
+                            "name": "menuContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the menu content's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelMenuPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuState": {
+                    "description": "Defines current inline state in PanelMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current id state as a string."
+                        },
+                        {
+                            "name": "activeItem",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "description": "Active item path."
+                        },
+                        {
+                            "name": "animationDisabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the menu is visible or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuContext": {
+                    "description": "Defines current options in PanelMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuExpandedKeys": {
+                    "description": "Custom expanded keys metadata.",
+                    "relatedProp": "expandedKeys",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PanelMenuHeaderItemClickEvent": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>"
+                        },
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PanelMenuPassThroughType": {
+                    "values": "PassThroughType<T, PanelMenuPassThroughMethodOptions>"
+                },
+                "PanelMenuPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "passthrough": {
+        "functions": {
+            "description": "Defines the custom functions used by the module.",
+            "values": {
+                "usePassThrough": {
+                    "name": "usePassThrough",
+                    "parameters": [
+                        {
+                            "name": "pt1",
+                            "type": "object"
+                        },
+                        {
+                            "name": "pt2",
+                            "type": "object"
+                        },
+                        {
+                            "name": "options",
+                            "type": "PassThroughOptions"
+                        }
+                    ],
+                    "returnType": "object"
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "PassThroughOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "mergeSections",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Should the passthrough merge sections?"
+                        },
+                        {
+                            "name": "mergeProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Should the passthrough merge properties?"
+                        },
+                        {
+                            "name": "classNameMergeFunction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        }
+    },
+    "passthrough/tailwind": {},
+    "password": {
+        "description": "Password displays strength indicator for password fields.\n\n[Live Demo](https://www.primereact.org/password/)",
+        "components": {
+            "Password": {
+                "description": "Password displays strength indicator for password fields.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | ForwardRefExoticComponent<InputTextProps & RefAttributes<HTMLInputElement>>",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "getOverlay",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get overlay element."
+                        },
+                        {
+                            "name": "toggleMask",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Toggle the mask on or off."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Password component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of panel content if \"feedback\" is enabled."
+                        },
+                        {
+                            "name": "feedback",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the strength indicator or not."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of panel footer if \"feedback\" is enabled."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of panel header if \"feedback\" is enabled."
+                        },
+                        {
+                            "name": "hideIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PasswordProps>",
+                            "default": "",
+                            "description": "Hide icon template."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of mask icon if \"toggleMask\" is enabled."
+                        },
+                        {
+                            "name": "inputClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "keyfilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "KeyFilterType",
+                            "default": "",
+                            "description": "Format definition of the keys to block."
+                        },
+                        {
+                            "name": "mediumLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Medium",
+                            "description": "Text for a medium password."
+                        },
+                        {
+                            "name": "mediumRegex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).",
+                            "description": "Regex for a medium level password."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the overlay panel element."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay panel element."
+                        },
+                        {
+                            "name": "promptLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Please enter a password",
+                            "description": "Text to prompt password entry."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "showIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PasswordProps>",
+                            "default": "",
+                            "description": "Show icon template."
+                        },
+                        {
+                            "name": "strongLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Strong",
+                            "description": "Text for a strong password."
+                        },
+                        {
+                            "name": "strongRegex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})",
+                            "description": "Regex for a strong level password."
+                        },
+                        {
+                            "name": "toggleMask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show an icon to display the password as plain text."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        },
+                        {
+                            "name": "weakLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Weak",
+                            "description": "Text for a weak password."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay becomes hidden."
+                        },
+                        {
+                            "name": "onInput",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FormEvent<HTMLInputElement>",
+                                    "description": "Browser event"
+                                },
+                                {
+                                    "name": "validatePattern",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "Whether to validate the value"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on input event of input field."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "PasswordIconEvent": {
+                    "description": "Custom icon event",
+                    "relatedProp": "icon",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the default element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PasswordProps",
+                            "description": "All component props."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "PasswordPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PasswordProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PasswordState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PasswordPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the InputText component."
+                        },
+                        {
+                            "name": "hideIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the hide icon's DOM element."
+                        },
+                        {
+                            "name": "showIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the show icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "meter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the meter's DOM element."
+                        },
+                        {
+                            "name": "meterLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the meter label's DOM element."
+                        },
+                        {
+                            "name": "info",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the info's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        },
+                        {
+                            "name": "iconField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PasswordPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the IconField component"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PasswordState": {
+                    "description": "Defines current inline state in Password component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "meter",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PasswordMeterStateOptions",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "infoText",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current info test state as a string."
+                        },
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "unmasked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current unmasked state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PasswordMeterStateOptions": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "strength",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current strength of the meter state as a string."
+                        },
+                        {
+                            "name": "width",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current width of the meter state as a string."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PasswordPassThroughType": {
+                    "values": "PassThroughType<T, PasswordPassThroughMethodOptions>"
+                },
+                "PasswordPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "picklist": {
+        "description": "PickList is used to reorder items between different lists.\n\n[Live Demo](https://www.primereact.org/picklist/)",
+        "components": {
+            "PickList": {
+                "description": "PickList is used to reorder items between different lists.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in PickList component.",
+                    "values": [
+                        {
+                            "name": "autoOptionFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to focus on the first visible or selected element."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "'960px'.",
+                            "description": "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the field that uniquely identifies the a record in the data."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, displays an input field to filter the items on keyup."
+                        },
+                        {
+                            "name": "filterBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma)."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"contains\" | \"equals\" | \"notEquals\"",
+                            "default": "contains",
+                            "description": "Defines how the items are filtered, valid values are \"contains\", (default) \"startsWith\", \"endsWith\", \"equals\" and \"notEquals\"."
+                        },
+                        {
+                            "name": "focusOnHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When enabled, the focus is placed on the hovered option."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template that gets the options for both source and target items and returns the content for it. Useful if you want the same template for both lists else use the custom sourceItemTemplate or targetItemTemplate properties."
+                        },
+                        {
+                            "name": "metaKeySelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
+                        },
+                        {
+                            "name": "moveAllToSourceIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon for moving all items to the source list."
+                        },
+                        {
+                            "name": "moveAllToTargetIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon for moving all items to the target list."
+                        },
+                        {
+                            "name": "moveBottomIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon of the move bottom icon."
+                        },
+                        {
+                            "name": "moveDownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon of the move down icon."
+                        },
+                        {
+                            "name": "moveTopIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon of the move top icon."
+                        },
+                        {
+                            "name": "moveToSourceIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon for moving an item to the source list."
+                        },
+                        {
+                            "name": "moveToTargetIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon for moving an item to the target list."
+                        },
+                        {
+                            "name": "moveUpIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon of the move up icon."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "showSourceControls",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show buttons of source list."
+                        },
+                        {
+                            "name": "showSourceFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show filter input for source list when filterBy is enabled."
+                        },
+                        {
+                            "name": "showTargetControls",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show buttons of target list."
+                        },
+                        {
+                            "name": "showTargetFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show filter input for target list when filterBy is enabled."
+                        },
+                        {
+                            "name": "source",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of objects for the source list."
+                        },
+                        {
+                            "name": "sourceFilterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon of the source list filter."
+                        },
+                        {
+                            "name": "sourceFilterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text on source filter input."
+                        },
+                        {
+                            "name": "sourceFilterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template for the source filter content."
+                        },
+                        {
+                            "name": "sourceFilterValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Filter value in the target list."
+                        },
+                        {
+                            "name": "sourceHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Template for the source list caption."
+                        },
+                        {
+                            "name": "sourceItemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template that gets the options for the source items and returns the content for it."
+                        },
+                        {
+                            "name": "sourceSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Selected item in the source list."
+                        },
+                        {
+                            "name": "sourceStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the source list element."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "target",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of objects for the target list."
+                        },
+                        {
+                            "name": "targetFilterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<PickListProps>",
+                            "default": "",
+                            "description": "Icon of the target list filter."
+                        },
+                        {
+                            "name": "targetFilterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text on target filter input."
+                        },
+                        {
+                            "name": "targetFilterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Placeholder text on target filter input."
+                        },
+                        {
+                            "name": "targetFilterValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Filter value in the source list."
+                        },
+                        {
+                            "name": "targetHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Template for the target list caption."
+                        },
+                        {
+                            "name": "targetItemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template that gets the options for the target items and returns the content for it."
+                        },
+                        {
+                            "name": "targetSelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Selected items in the target list."
+                        },
+                        {
+                            "name": "targetStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the target list element."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when items are moved from source to target."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu receives focus."
+                        },
+                        {
+                            "name": "onMoveAllToSource",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when all items are moved from target to source."
+                        },
+                        {
+                            "name": "onMoveAllToTarget",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when all items are moved from source to target."
+                        },
+                        {
+                            "name": "onMoveToSource",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when items are moved from target to source."
+                        },
+                        {
+                            "name": "onMoveToTarget",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when items are moved from source to target."
+                        },
+                        {
+                            "name": "onSourceFilterChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when items are filtered within source list."
+                        },
+                        {
+                            "name": "onSourceSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when items are selected within source list."
+                        },
+                        {
+                            "name": "onTargetFilterChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when items are filtered within target list."
+                        },
+                        {
+                            "name": "onTargetSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "PickListEvent",
+                                    "description": "Custom picklist event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when items are selected within target list."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "PickListEvent": {
+                    "description": "Custom picklist event.",
+                    "relatedProp": "onMoveToSource",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Moved items"
+                        }
+                    ]
+                },
+                "PickListChangeEvent": {
+                    "description": "Custom picklist event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "source",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Source list"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Target list"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "PickListPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PickListProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PickListState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PickListContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PickListPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "controls",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the source controls' DOM element."
+                        },
+                        {
+                            "name": "moveUpButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveTopButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveDownButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveBottomButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "listWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the source wrapper's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the source header's DOM element."
+                        },
+                        {
+                            "name": "buttons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "moveToTargetButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveAllToTargetButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveToSourceButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "moveAllToSourceButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "list",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PickListPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the buttons' DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PickListState": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "sourceSelection",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "[]",
+                            "description": "Current source selection state as a []."
+                        },
+                        {
+                            "name": "targetSelection",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "[]",
+                            "description": "Current target selection state as a []."
+                        },
+                        {
+                            "name": "sourceFilterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current source filter state as a string."
+                        },
+                        {
+                            "name": "targetFilterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current source target filter state as a string."
+                        },
+                        {
+                            "name": "attributeSelector",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current attribute selector state as a any."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PickListContext": {
+                    "description": "Defines current options in PickList component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selection state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PickListFilterTemplateOptions": {
+                    "description": "Custom filter template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter."
+                        },
+                        {
+                            "name": "inputProps",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PickListFilterInputProps",
+                            "description": "Props of the filter input."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter icon."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "The JSX element that represents the picklist filter."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PickListProps",
+                            "description": "The props of the PickList component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "PickListFilterInputProps": {
+                    "description": "Custom filter input props.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter input."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Filter change callback."
+                        },
+                        {
+                            "name": "onKeyDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function to be invoked when the keydown event."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PickListPassThroughType": {
+                    "values": "PassThroughType<T, PickListPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "progressbar": {
+        "description": "ProgressBar is a process status indicator.\n\n[Live Demo](https://www.primereact.org/progressbar)",
+        "components": {
+            "ProgressBar": {
+                "description": "ProgressBar is a process status indicator.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ProgressBar component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Color for the background of the progress."
+                        },
+                        {
+                            "name": "mode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"determinate\" | \"indeterminate\"",
+                            "default": "determinate",
+                            "description": "Defines the mode of the progress, valid values are \"determinate\" and \"indeterminate\"."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "showValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Show or hide progress bar value."
+                        },
+                        {
+                            "name": "unit",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "%",
+                            "description": "Unit sign appended to the value."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string | number",
+                            "default": "",
+                            "description": "Current value of the progress."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "displayValueTemplate",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "undefined | null | string | number"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Custom display value template"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ProgressBarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ProgressBarProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ProgressBarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the value's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressBarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ProgressBarPassThroughType": {
+                    "values": "PassThroughType<T, ProgressBarPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "progressspinner": {
+        "description": "ProgressSpinner is a process status indicator.\n\n[Live Demo](https://www.primereact.org/progressspinner)",
+        "components": {
+            "ProgressSpinner": {
+                "description": "ProgressSpinner is a process status indicator.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ProgressSpinner component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "animationDuration",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "2s",
+                            "description": "Duration of the rotate animation."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "fill",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Color for the background of the circle."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "strokeWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "2",
+                            "description": "Width of the circle stroke."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ProgressSpinnerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ProgressSpinnerProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ProgressSpinnerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "spinner",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughType<HTMLAttributes<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the spinner's DOM element."
+                        },
+                        {
+                            "name": "circle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ProgressSpinnerPassThroughType<HTMLAttributes<SVGCircleElement>>",
+                            "description": "Uses to pass attributes to the circle's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ProgressSpinnerPassThroughType": {
+                    "values": "PassThroughType<T, ProgressSpinnerPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "radiobutton": {
+        "description": "RadioButton is an extension to standard radio button element with theming.\n\n[Live Demo](https://www.primereact.org/radiobutton/)",
+        "components": {
+            "RadioButton": {
+                "description": "RadioButton is an extension to standard radio button element with theming.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getInput",
+                            "parameters": [],
+                            "returnType": "null | HTMLInputElement",
+                            "description": "Used to get input element."
+                        },
+                        {
+                            "name": "select",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to select a button"
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in RadioButton component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies whether a checkbox should be checked or not."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the inner native radiobutton."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the checkbox element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "required",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that an input field must be filled out before submitting the form."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the radio."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "RadioButtonChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change"
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "RadioButtonChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<any>"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "RadioButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RadioButtonProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "RadioButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RadioButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "box",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the box's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RadioButtonPassThroughType": {
+                    "values": "PassThroughType<T, RadioButtonPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "rating": {
+        "description": "Rating component is a star based selection input.\n\n[Live Demo](https://www.primereact.org/rating/)",
+        "components": {
+            "Rating": {
+                "description": "Rating component is a star based selection input.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Rating component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "cancel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When specified a cancel icon is displayed to allow removing the value."
+                        },
+                        {
+                            "name": "cancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<RatingProps>",
+                            "default": "",
+                            "description": "Icon for the cancelable state."
+                        },
+                        {
+                            "name": "cancelIconProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLAttributes<HTMLSpanElement>",
+                            "default": "",
+                            "description": "Properties of the cancel icon."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "offIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<RatingProps>",
+                            "default": "",
+                            "description": "Icon for the off state."
+                        },
+                        {
+                            "name": "offIconProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLAttributes<HTMLSpanElement>",
+                            "default": "",
+                            "description": "Properties of the off icon."
+                        },
+                        {
+                            "name": "onIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<RatingProps>",
+                            "default": "",
+                            "description": "Icon for the on state."
+                        },
+                        {
+                            "name": "onIconProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "HTMLAttributes<HTMLSpanElement>",
+                            "default": "",
+                            "description": "Properties of the on icon."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the input cannot be typed."
+                        },
+                        {
+                            "name": "stars",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Number of stars."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Value of the rating."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "RatingChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "RatingChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<number>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<number>"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "RatingPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RatingProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RatingContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "RatingPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "cancelIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the cancel icon's DOM element."
+                        },
+                        {
+                            "name": "item",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the item's DOM element."
+                        },
+                        {
+                            "name": "cancelItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the cancel item's DOM element."
+                        },
+                        {
+                            "name": "onIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the on icon's DOM element."
+                        },
+                        {
+                            "name": "offIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RatingPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the off icon's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "RatingContext": {
+                    "description": "Defines current options in Rating component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of the item as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RatingPassThroughType": {
+                    "values": "PassThroughType<T, RatingPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "ripple": {
+        "description": "Ripple component adds ripple effect to the host element.\n\n[Live Demo](https://www.primereact.org/ripple)",
+        "components": {
+            "Ripple": {
+                "description": "Ripple component adds ripple effect to the host element.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in Ripple component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RipplePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "RipplePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RippleProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "RipplePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RipplePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RipplePassThroughType": {
+                    "values": "PassThroughType<T, RipplePassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "row": {
+        "description": "Row component is a helper component used to create grouping structures in DataTable.\n\n[Live Demo](https://www.primereact.org/datatable/)",
+        "components": {
+            "Row": {
+                "description": "Row component is a helper component used to create grouping structures in DataTable.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in Row component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the row."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RowPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the element."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "RowPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RowProps"
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ColumnGroupPassThroughOptions"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "RowPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RowPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "RowPassThroughType": {
+                    "values": "PassThroughType<T, RowPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "scrollpanel": {
+        "description": "ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.\n\n[Live Demo](https://www.primereact.org/scrollpanel/)",
+        "components": {
+            "ScrollPanel": {
+                "description": "ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getContent",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get content of the scrollpanel."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getXBar",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get horizontal scrollbar of the panel."
+                        },
+                        {
+                            "name": "getYBar",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get vertical scrollbar of the panel."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ScrollPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollPanelPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ScrollPanelThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ScrollPanelProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ScrollPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollPanelThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollPanelThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollPanelThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "barX",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollPanelThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the horizontal panel's DOM element."
+                        },
+                        {
+                            "name": "barY",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollPanelThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the vertical panel's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ScrollPanelThroughType": {
+                    "values": "PassThroughType<T, ScrollPanelThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "scrolltop": {
+        "description": "ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.\n\n[Live Demo](https://www.primereact.org/scrolltop/)",
+        "components": {
+            "ScrollTop": {
+                "description": "ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLButtonElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ScrollTop component.",
+                    "values": [
+                        {
+                            "name": "behavior",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"auto\" | \"smooth\"",
+                            "default": "smooth",
+                            "description": "Defines the scrolling behavior, \"smooth\" adds an animation and \"auto\" scrolls with a jump."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ScrollTopProps>",
+                            "default": "",
+                            "description": "Name of the icon or JSX.Element for icon."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "target",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"window\" | \"parent\"",
+                            "default": "window",
+                            "description": "Target of the ScrollTop, valid values are \"window\" and \"parent\"."
+                        },
+                        {
+                            "name": "threshold",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "400",
+                            "description": "Defines the threshold value of the vertical scroll position of the target to toggle the visibility."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay becomes hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ScrollTopPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ScrollTopProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ScrollTopState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ScrollTopPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ScrollTopPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ScrollTopState": {
+                    "description": "Defines current inline state in ScrollTop component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ScrollTopPassThroughType": {
+                    "values": "PassThroughType<T, ScrollTopPassThroughMethodOptions>"
+                },
+                "ScrollTopPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "selectbutton": {
+        "description": "SelectButton is used to choose single or multiple items from a list using buttons.\n\n[Live Demo](https://www.primereact.org/selectbutton/)",
+        "components": {
+            "SelectButton": {
+                "description": "SelectButton is used to choose single or multiple items from a list using buttons.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in SelectButton component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "allowEmpty",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether selection can not be cleared."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A property to uniquely match the value in options for better performance."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "multiple",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, allows selecting multiple values."
+                        },
+                        {
+                            "name": "optionDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | Function",
+                            "default": "",
+                            "description": "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
+                        },
+                        {
+                            "name": "optionLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectItemOptionsType",
+                            "default": "",
+                            "description": "An array of objects to display as the available options."
+                        },
+                        {
+                            "name": "optionValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the value field of an option when arbitrary objects are used as options instead of SelectItems."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unselectable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether selection can be cleared.",
+                            "deprecated": "Use 'allowEmpty' property instead."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Value of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "itemTemplate",
+                            "parameters": [
+                                {
+                                    "name": "item",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Current item"
+                                }
+                            ],
+                            "returnType": "ReactNode",
+                            "description": "Function that gets the option and returns the content."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SelectButtonChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "SelectButtonChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<any>"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SelectButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectButtonProps"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SelectButtonContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SelectButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the button's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SelectButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SelectButtonContext": {
+                    "description": "Defines current options in SelectButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selected value of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current disabled value of option or disabled property as a boolean."
+                        },
+                        {
+                            "name": "option",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Available option."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SelectButtonPassThroughType": {
+                    "values": "PassThroughType<T, SelectButtonPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "selectitem": {
+        "description": "This module contains the interface and types for options in a select component.",
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SelectItemOptionsType": {
+                    "values": "SelectItem[] | any[]",
+                    "description": "Custom options type."
+                }
+            }
+        }
+    },
+    "sidebar": {
+        "description": "Sidebar is a panel component displayed as an overlay.\n\n[Live Demo](https://www.primereact.org/sidebar/)",
+        "components": {
+            "Sidebar": {
+                "description": "Sidebar is a panel component displayed as an overlay.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getCloseIcon",
+                            "parameters": [],
+                            "returnType": "null | HTMLButtonElement",
+                            "description": "Used to get close icon element."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getMask",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get mask element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Sidebar component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and self. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaCloseLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "close",
+                            "description": "Aria label of the close icon."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "blockScroll",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to block scrolling of the document when sidebar is active."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SidebarProps>",
+                            "default": "",
+                            "description": "Icon of the close button."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the sidebar."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Specifies a custom content for the sidebar. For more complex markup, use the \"content\" slot instead."
+                        },
+                        {
+                            "name": "dismissable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to dismiss sidebar on click of the mask."
+                        },
+                        {
+                            "name": "fullScreen",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Adds a close icon to the header to hide the dialog."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "true",
+                            "description": "Custom template for the header."
+                        },
+                        {
+                            "name": "icons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "true",
+                            "description": "Custom icons template for the header."
+                        },
+                        {
+                            "name": "maskClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the mask."
+                        },
+                        {
+                            "name": "maskStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the mask."
+                        },
+                        {
+                            "name": "modal",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to a modal layer behind the sidebar."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "left",
+                            "description": "Specifies the position of the sidebar, valid values are \"left\" and \"right\"."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "showCloseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to display a close icon inside the panel."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the dialog."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the actions used to close the sidebar are triggered. Exp; close icon, mask and esc key."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when sidebar gets shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SidebarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SidebarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the close button icon's DOM element."
+                        },
+                        {
+                            "name": "icons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the custom icons content's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SidebarPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SidebarState": {
+                    "description": "Defines current inline state in Sidebar component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current container visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContentProps": {
+                    "description": "Defines current content values and refs for headless development.",
+                    "relatedProp": "content",
+                    "props": [
+                        {
+                            "name": "closeIconRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "RefObject<HTMLElement | HTMLButtonElement | Button>",
+                            "description": "Allows you to specify the close button of the sidebar."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "hide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Used to get the event of the element."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback for hiding the sidebar."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SidebarPassThroughType": {
+                    "values": "PassThroughType<T, SidebarPassThroughMethodOptions>"
+                },
+                "SidebarPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "skeleton": {
+        "description": "Skeleton is a placeholder to display instead of the actual content.\n\n[Live Demo](https://www.primereact.org/skeleton/)",
+        "components": {
+            "Skeleton": {
+                "description": "Skeleton is a placeholder to display instead of the actual content.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Skeleton component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "animation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"none\" | \"wave\"",
+                            "default": "wave",
+                            "description": "Type of the animation, valid options are \"wave\" and \"none\"."
+                        },
+                        {
+                            "name": "borderRadius",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Border radius of the element, defaults to value from theme."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "height",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "1rem",
+                            "description": "Height of the element."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SkeletonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "shape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"circle\" | \"rectangle\"",
+                            "default": "rectangle",
+                            "description": "It specifies an alternate text for an image, if the image cannot be displayed."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Size of the Circle or Square."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "width",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "100%",
+                            "description": "Width of the element."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SkeletonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SkeletonProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SkeletonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SkeletonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SkeletonPassThroughType": {
+                    "values": "PassThroughType<T, SkeletonPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "slidemenu": {
+        "description": "SlideMenu displays submenus with a slide animation.\n\n[Live Demo](https://www.primereact.org/slidemenu/)",
+        "components": {
+            "SlideMenu": {
+                "description": "SlideMenu displays submenus with a slide animation.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Hides the popup menu."
+                        },
+                        {
+                            "name": "navigateBack",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Navigates the slide menu backwards."
+                        },
+                        {
+                            "name": "navigateForward",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Navigates the slide menu forward."
+                        },
+                        {
+                            "name": "setLevelState",
+                            "parameters": [
+                                {
+                                    "name": "level",
+                                    "type": "number",
+                                    "description": "Number of the menu to set"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Navigates the slide menu to this specific level."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Displays the popup menu."
+                        },
+                        {
+                            "name": "toggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Toggles the visibility of the popup menu."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in SlideMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "backIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SlideMenuProps>",
+                            "default": "",
+                            "description": "Defines the backward icon."
+                        },
+                        {
+                            "name": "backLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "Back",
+                            "description": "Label of element to navigate back."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Specifies if pressing escape key should hide the SlideMenu Popup."
+                        },
+                        {
+                            "name": "easing",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "ease-out",
+                            "description": "Easing animation to use for sliding."
+                        },
+                        {
+                            "name": "effectDuration",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "250",
+                            "description": "Duration of the sliding animation in milliseconds."
+                        },
+                        {
+                            "name": "menuWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "190",
+                            "description": "Width of the submenus."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "popup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if menu would displayed as a popup."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SlideMenuProps>",
+                            "default": "",
+                            "description": "Icon of the submenu."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "viewportHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "175",
+                            "description": "Height of the scrollable area, a scrollbar appears if a menu height is longer than this value."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is hidden."
+                        },
+                        {
+                            "name": "onNavigate",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SlideMenuNavigateEvent",
+                                    "description": "Navigate event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a menu is navigated to."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "SlideMenuNavigateEvent": {
+                    "description": "Custom navigate event",
+                    "relatedProp": "onNavigate",
+                    "props": [
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Level of current displayed menu"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SlideMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SlideMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SlideMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SlideMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SlideMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "previous",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the previous's DOM element."
+                        },
+                        {
+                            "name": "previousIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the previous icon's DOM element."
+                        },
+                        {
+                            "name": "previousLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the previous label's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SlideMenuPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SlideMenuState": {
+                    "description": "Defines current inline state in SlideMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "level",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current level state as a number."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SlideMenuContext": {
+                    "description": "Defines current options in SlideMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SlideMenuPassThroughType": {
+                    "values": "PassThroughType<T, SlideMenuPassThroughMethodOptions>"
+                },
+                "SlideMenuPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "slider": {
+        "description": "Slider is a component to provide input with a drag handle.\n\n[Live Demo](https://www.primereact.org/slider/)",
+        "components": {
+            "Slider": {
+                "description": "Slider is a component to provide input with a drag handle.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Returns the reference of slider's container."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Slider component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "max",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "100",
+                            "description": "Maximum boundary value."
+                        },
+                        {
+                            "name": "min",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Mininum boundary value."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Orientation of the slider, valid values are horizontal and vertical."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "range",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When speficed, allows two boundary values to be picked."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Step factor to increment/decrement the value."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number | [number, number]",
+                            "default": "0",
+                            "description": "Value of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SliderChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change via slide."
+                        },
+                        {
+                            "name": "onSlideEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SliderSlideEndEvent",
+                                    "description": "Custom slide event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when slide ends."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "SliderChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Slide event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | [number, number]",
+                            "description": "New value"
+                        }
+                    ],
+                    "extendedBy": "SliderSlideEndEvent"
+                },
+                "SliderSlideEndEvent": {
+                    "description": "Custom slide event.",
+                    "relatedProp": "onSlideEnd",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Slide event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | [number, number]",
+                            "description": "New value"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SliderPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SliderProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SliderPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "range",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the range's DOM element."
+                        },
+                        {
+                            "name": "handle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SliderPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the handle's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SliderPassThroughType": {
+                    "values": "PassThroughType<T, SliderPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "speeddial": {
+        "description": "When pressed, a floating action button can display multiple primary actions that can be performed on a page.\n\n[Live Demo](https://www.primereact.org/speeddial/)",
+        "components": {
+            "SpeedDial": {
+                "description": "When pressed, a floating action button can display multiple primary actions that can be performed on a page.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the popup."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the popup."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in SpeedDial component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "buttonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the button element."
+                        },
+                        {
+                            "name": "buttonStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the button element."
+                        },
+                        {
+                            "name": "buttonTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of button element."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "direction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\" | \"up\" | \"down\" | \"up-left\" | \"up-right\" | \"down-left\" | \"down-right\"",
+                            "default": "up",
+                            "description": "Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'"
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the component is disabled."
+                        },
+                        {
+                            "name": "hideIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SpeedDialProps>",
+                            "default": "",
+                            "description": "Hide icon of the button element."
+                        },
+                        {
+                            "name": "hideOnClickOutside",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the actions close when clicked outside."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show a mask element behind the speeddial."
+                        },
+                        {
+                            "name": "maskClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the mask element."
+                        },
+                        {
+                            "name": "maskStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the mask element."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "MenuModel instance to define the action items."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "radius",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Radius for *circle types."
+                        },
+                        {
+                            "name": "rotateAnimation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defined to rotate showIcon when hideIcon is not present."
+                        },
+                        {
+                            "name": "showIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SpeedDialProps>",
+                            "default": "",
+                            "description": "Show icon of the button element."
+                        },
+                        {
+                            "name": "transitionDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "30",
+                            "description": "Transition delay step for each action item."
+                        },
+                        {
+                            "name": "type",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"linear\" | \"circle\" | \"semi-circle\" | \"quarter-circle\"",
+                            "default": "linear",
+                            "description": "Specifies the opening type of actions."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the visibility of the overlay."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Fired when the button element clicked."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Fired when the actions are hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Fired when the actions are visible."
+                        },
+                        {
+                            "name": "onVisibleChange",
+                            "parameters": [
+                                {
+                                    "name": "visible",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "Custom visible change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Fired when the visibility of element changed."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SpeedDialPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SpeedDialProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SpeedDialState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SpeedDialPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the menu's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the menu item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "actionIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the action icon's DOM element."
+                        },
+                        {
+                            "name": "mask",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SpeedDialPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the mask's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SpeedDialState": {
+                    "description": "Defines current inline state in SpeedDial component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SpeedDialButtonOptions": {
+                    "description": "",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Icon Classname of the element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Default element created by the component."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SpeedDialProps",
+                            "description": "Properties passed to the component."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the overlay is opened."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Fired when the button element clicked."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SpeedDialPassThroughType": {
+                    "values": "PassThroughType<T, SpeedDialPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "splitbutton": {
+        "description": "SplitButton groups a set of commands in an overlay with a default command.\n\n[Live Demo](https://www.primereact.org/splitbutton/)",
+        "components": {
+            "SplitButton": {
+                "description": "SplitButton groups a set of commands in an overlay with a default command.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the popup."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the popup."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in SplitButton component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "buttonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "ClassName of the button."
+                        },
+                        {
+                            "name": "buttonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Props for the main button, any prop is passed implicity to the button element."
+                        },
+                        {
+                            "name": "buttonTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TemplateType<SplitButtonProps>",
+                            "default": "",
+                            "description": "Template of the default button."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SplitButtonProps>",
+                            "default": "",
+                            "description": "Name of the dropdown icon or JSX.Element for dropdown icon."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SplitButtonProps>",
+                            "default": "",
+                            "description": "Name of the icon."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Text of the button."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Display loading icon of the button"
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<SplitButtonProps>",
+                            "default": "",
+                            "description": "Name of the loading icon or JSX.Element for loading icon."
+                        },
+                        {
+                            "name": "menuButtonClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "ClassName of the menu dropdown button."
+                        },
+                        {
+                            "name": "menuButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Props for the dropdown button, any prop is passed implicity to the dropdown button element."
+                        },
+                        {
+                            "name": "menuClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "ClassName class of the overlay menu."
+                        },
+                        {
+                            "name": "menuStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay menu."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "MenuModel instance to define the overlay items."
+                        },
+                        {
+                            "name": "outlined",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a border class without a background initially."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "raised",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a shadow to indicate elevation."
+                        },
+                        {
+                            "name": "rounded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a circular border radius to the button."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"success\" | \"help\" | \"warning\" | \"info\" | \"secondary\" | \"danger\" | \"contrast\"",
+                            "default": "",
+                            "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"contrast\", \"help\"."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"small\" | \"large\"",
+                            "default": "",
+                            "description": "Defines the size of the button, valid values are \"small\" and \"large\"."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a textual class to the button without a background initially."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When present, it specifies that the element should be visible."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when main button is clicked."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when overlay panel becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SplitButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitButtonProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SplitButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<SVGSVGElement | HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "button",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "menuButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ButtonPassThroughOptions",
+                            "description": "Uses to pass attributes to the Button component."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the menu's DOM element."
+                        },
+                        {
+                            "name": "menuList",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the menu list's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "menuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the menu icon's DOM element."
+                        },
+                        {
+                            "name": "menuLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the menu label's DOM element."
+                        },
+                        {
+                            "name": "anchor",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the anchor's DOM element."
+                        },
+                        {
+                            "name": "menuItem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the menu item's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitButtonPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SplitButtonState": {
+                    "description": "Defines current inline state in SplitButton component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current id state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SplitButtonPassThroughType": {
+                    "values": "PassThroughType<T, SplitButtonPassThroughMethodOptions>"
+                },
+                "SplitButtonPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "splitter": {
+        "description": "Splitter is utilized to separate and resize panels.\n\n[Live Demo](https://www.primereact.org/splitter/)\n\nHelper Components:\n\n-  SplitterPanel",
+        "components": {
+            "SplitterPanel": {
+                "description": "SplitterPanel is a helper component for Splitter.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in SplitterPanel component.",
+                    "values": [
+                        {
+                            "name": "aria-label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Splitter handle ARIA label for screenreader support."
+                        },
+                        {
+                            "name": "aria-labelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the splitter and panel label element IDs."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "ClassName of the component."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Returns the value of element's id content attribute. Can be set to change it."
+                        },
+                        {
+                            "name": "minSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Minimum size of the element relative to 100%."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitterPanelPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Size of the element relative to 100%."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            },
+            "Splitter": {
+                "description": "Splitter is utilized to separate and resize panels.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Splitter component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "gutterSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "4",
+                            "description": "Size of the divider in pixels."
+                        },
+                        {
+                            "name": "layout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Orientation of the panels, valid values are \"horizontal\" and \"vertical\"."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitterPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "stateKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Storage identifier of a stateful Splitter."
+                        },
+                        {
+                            "name": "stateStorage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"local\" | \"session\"",
+                            "default": "session",
+                            "description": "Defines where a stateful splitter keeps its state, valid values are \"session\" for sessionStorage and \"local\" for localStorage."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Step factor to increment/decrement the size of the panels while pressing the arrow keys."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onResizeEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SplitterResizeEndEvent",
+                                    "description": "Custom resize end event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when resize ends."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "SplitterResizeEndEvent": {
+                    "description": "Custom resize end event.",
+                    "relatedProp": "onResizeEnd",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "sizes",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number[]",
+                            "description": "Sizes of the panels as an array."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "SplitterPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitterProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitterState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SplitterState": {
+                    "description": "Defines current inline state in Panel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "panelSizes",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number[]",
+                            "description": "Previous size state as a number."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SplitterPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "PanelProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitterPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SplitterPanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitterPanelProps"
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SplitterPassThroughMethodOptions"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "SplitterPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitterPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "gutter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitterPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the gutter's DOM element."
+                        },
+                        {
+                            "name": "gutterHandler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SplitterPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the gutter handler's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "SplitterPassThroughType": {
+                    "values": "PassThroughType<T, SplitterPassThroughMethodOptions>"
+                },
+                "SplitterPanelPassThroughType": {
+                    "values": "PassThroughType<T, SplitterPanelPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "stepper": {
+        "description": "Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.\n\n[Live Demo](https://www.primereact.org/stepper/)",
+        "components": {
+            "Stepper": {
+                "description": "Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getActiveStep",
+                            "parameters": [],
+                            "returnType": "undefined | number",
+                            "description": "Used to get the current active step index."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "nextCallback",
+                            "parameters": [
+                                {
+                                    "name": "e",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to navigate to the next step."
+                        },
+                        {
+                            "name": "prevCallback",
+                            "parameters": [
+                                {
+                                    "name": "e",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to navigate to the previous step."
+                        },
+                        {
+                            "name": "setActiveStep",
+                            "parameters": [
+                                {
+                                    "name": "step",
+                                    "type": "number",
+                                    "description": "Index of step to set as active"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to set the active step index."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Stepper component.",
+                    "values": [
+                        {
+                            "name": "activeStep",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Active step index of stepper."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of end section."
+                        },
+                        {
+                            "name": "headerPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "",
+                            "description": "Position of the stepper panel header relative to the step number."
+                        },
+                        {
+                            "name": "linear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the steps are clickable or not."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "horizontal",
+                            "description": "Orientation of the stepper."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of start section."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChangeStep",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "StepperChangeEvent"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active panel is changed."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "StepperPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "Stepper.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptionType",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "nav",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptionType",
+                            "description": "Used to pass attributes to the nav's DOM element."
+                        },
+                        {
+                            "name": "panelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughOptionType",
+                            "description": "Used to pass attributes to the panel container's DOM element."
+                        },
+                        {
+                            "name": "stepperpanel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the end handler's DOM element."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the start's DOM element."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the right's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperState": {
+                    "description": "Defines current inline state in Stepper component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "activeStep",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current active index state."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperChangeEvent": {
+                    "description": "Custom tab change event.",
+                    "relatedProp": "StepperProps.onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Event",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the selected stepper panel"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "StepperPassThroughOptionType": {
+                    "values": "StepperPassThroughAttributes | Function | string | null | undefined"
+                },
+                "StepperPassThroughType": {
+                    "values": "PassThroughType<T, StepperPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "stepperpanel": {
+        "description": "StepperPanel is a helper component for Stepper component.\n\n[Live Demo](https://www.primereact.org/stepper/)",
+        "components": {
+            "StepperPanel": {
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in StepperPanel component.",
+                    "values": [
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Orientation of tab headers."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptions",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "StepperPanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperPanelProps",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepperPanelContext",
+                            "description": "Defines current options."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "number",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the number's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "toggleableContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughOptionType",
+                            "description": "Used to pass attributes to the toggleable content's DOM element."
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepperPanelPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPanelPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepperPanelContext": {
+                    "description": "Defines current options in StepperPanel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of the stepperpanel."
+                        },
+                        {
+                            "name": "count",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Count of stepperpanels"
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is first."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is last."
+                        },
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is active."
+                        },
+                        {
+                            "name": "highlighted",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is highlighted."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the stepperpanel is disabled."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "StepperPanelPassThroughOptionType": {
+                    "values": "StepperPanelPassThroughAttributes | Function | string | null | undefined"
+                },
+                "StepperPanelPassThroughTransitionType": {
+                    "values": "TransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "steps": {
+        "description": "Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.\n\n[Live Demo](https://www.primereact.org/steps/)",
+        "components": {
+            "Steps": {
+                "description": "Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Steps component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "activeIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the active item."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "model",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the items are clickable or not."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "StepsSelectEvent",
+                                    "description": "Custom select event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the new step is selected."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "StepsSelectEvent": {
+                    "description": "Custom select event",
+                    "relatedProp": "onSelect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "description": "Selected item instance"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of selected item instance"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "StepPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepsThroughMethodOptions"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepContext": {
+                    "description": "Defines current inline context in Steps component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Step index."
+                        },
+                        {
+                            "name": "count",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of steps"
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this the first step?"
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this the last step?"
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this step currently selected."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this step currently disabled."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepsThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "StepsProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "StepsPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepsPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the step's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "StepPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "StepsPassThroughType": {
+                    "values": "PassThroughType<T, StepsThroughMethodOptions>"
+                },
+                "StepPassThroughType": {
+                    "values": "PassThroughType<T, StepPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "styleclass": {
+        "description": "StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.\n\n[Live Demo](https://www.primereact.org/styleclass)",
+        "components": {
+            "StyleClass": {
+                "description": "StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getTarget",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get target element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in StyleClass component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "enterActiveClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add during enter animation."
+                        },
+                        {
+                            "name": "enterClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add when item begins to get displayed.",
+                            "deprecated": "since 10.5.2 Use 'enterFromClassName' option instead."
+                        },
+                        {
+                            "name": "enterFromClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add when item begins to get displayed."
+                        },
+                        {
+                            "name": "enterToClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add when item begins to get displayed."
+                        },
+                        {
+                            "name": "hideOnOutsideClick",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to trigger leave animation when outside of the element is clicked."
+                        },
+                        {
+                            "name": "leaveActiveClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add during leave animation."
+                        },
+                        {
+                            "name": "leaveClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add when item begins to get hidden.",
+                            "deprecated": "since 10.5.2 Use 'leaveFromClassName' option instead."
+                        },
+                        {
+                            "name": "leaveFromClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add when item begins to get hidden."
+                        },
+                        {
+                            "name": "leaveToClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class to add when leave animation is completed."
+                        },
+                        {
+                            "name": "nodeRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MutableRefObject<ReactNode>",
+                            "default": "",
+                            "description": "A React reference to DOM element that need to specify. Required."
+                        },
+                        {
+                            "name": "selector",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Selector to define the target element."
+                        },
+                        {
+                            "name": "toggleClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Adds or removes a class when no enter-leave animation is required."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "tabmenu": {
+        "description": "TabMenu is a navigation/command component that displays items as tab headers.\n\n[Live Demo](https://www.primereact.org/tabmenu/)",
+        "components": {
+            "TabMenu": {
+                "description": "TabMenu is a navigation/command component that displays items as tab headers.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in TabMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "activeIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Active index of menuitem."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onTabChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TabMenuTabChangeEvent",
+                                    "description": "Custom tab change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when active tab changes."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "TabMenuTabChangeEvent": {
+                    "description": "Custom tab change event.",
+                    "relatedProp": "onTabChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MenuItem",
+                            "description": "Selected menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the selected tab"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TabMenuThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabMenuContext": {
+                    "description": "Defines current options in TabMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "item",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Current menuitem"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the menuitem"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "inkbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the inkbar's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabMenuState": {
+                    "description": "Defines current inline state in TabMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current active index state as a number."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabMenuPassThroughType": {
+                    "values": "PassThroughType<T, TabMenuThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "tabview": {
+        "description": "TabView is a container component to group content with tabs.\n\n[Live Demo](https://www.primereact.org/tabview/)\n\nHelper Components:\n\n-  TabPanel",
+        "components": {
+            "TabPanel": {
+                "description": "TabPanel is a helper component for TabView.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "Defines valid properties in TabPanel component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tab header and content."
+                        },
+                        {
+                            "name": "closable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if tab can be removed."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TabPanel>",
+                            "default": "",
+                            "description": "Close button of the tab header."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tab content."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the tab content."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the tab is disabled."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Orientation of tab headers."
+                        },
+                        {
+                            "name": "headerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tab header."
+                        },
+                        {
+                            "name": "headerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the tab header."
+                        },
+                        {
+                            "name": "headerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Header template of the tab to customize more."
+                        },
+                        {
+                            "name": "leftIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TabPanel>",
+                            "default": "",
+                            "description": "Icons can be placed at left of a header."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TabPanel>",
+                            "default": "",
+                            "description": "Next button of the tab header."
+                        },
+                        {
+                            "name": "prevButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TabPanel>",
+                            "default": "",
+                            "description": "Previous button of the tab header."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rightIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TabPanel>",
+                            "default": "",
+                            "description": "Icons can be placed at right of a header."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the tab header and content."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When set as false, hides the tab panel."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            },
+            "TabView": {
+                "description": "TabView is a container component to group content with tabs.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "reset",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Resets all states."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in TabView component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "activeIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Active index of the TabView."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "panelContainerClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the panels container of the tabview."
+                        },
+                        {
+                            "name": "panelContainerStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the panels container of the tabview."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "renderActiveOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to render the contents of the selected tab or all tabs."
+                        },
+                        {
+                            "name": "scrollable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled displays buttons at each side of the tab headers to scroll the tab list."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBeforeTabChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TabViewTabChangeEvent",
+                                    "description": "Custom tab change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before an active tab is changed. Return false to prevent tab from changing."
+                        },
+                        {
+                            "name": "onBeforeTabClose",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TabViewTabCloseEvent",
+                                    "description": "Custom tab close event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before an active tab is close. Return false to prevent tab from closing."
+                        },
+                        {
+                            "name": "onTabChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TabViewTabChangeEvent",
+                                    "description": "Custom tab change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active tab is changed."
+                        },
+                        {
+                            "name": "onTabClose",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TabViewTabCloseEvent",
+                                    "description": "Custom tab close event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active tab is closed."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "TabViewTabChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onTabChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the selected tab"
+                        }
+                    ]
+                },
+                "TabViewTabCloseEvent": {
+                    "description": "Custom close event.",
+                    "relatedProp": "onTabClose",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the selected tab"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TabPanelHeaderTemplateOptions": {
+                    "description": "Custom Tabpanel header template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the header element."
+                        },
+                        {
+                            "name": "titleClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the header title element."
+                        },
+                        {
+                            "name": "leftIconElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Left icon of the tab header."
+                        },
+                        {
+                            "name": "titleElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The title element of the tab header."
+                        },
+                        {
+                            "name": "rightIconElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Right icon of the tab header."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element of the tab header."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabPanelProps",
+                            "description": "The props of the tab panel component."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The index of the tab header."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the tab header is selected or not."
+                        },
+                        {
+                            "name": "ariaControls",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The aria-controls attribute of the tab header."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "MouseEvent<HTMLElement, MouseEvent>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        },
+                        {
+                            "name": "onKeyDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KeyboardEvent<HTMLElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the key pressed."
+                        }
+                    ]
+                },
+                "TabPanelPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabPanelProps"
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabViewPassThroughMethodOptions"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabViewContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabViewContext": {
+                    "description": "Defines current inline context in Tabview component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Opened tab index."
+                        },
+                        {
+                            "name": "count",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of tabs"
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this the first tab?"
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this the last tab?"
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this tab currently selected."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Is this tab currently disabled."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabPanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headerAction",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the header action's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabViewPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabViewProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TabViewState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabViewState": {
+                    "description": "Defines current inline state in TabView component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "activeIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current active index state."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique id for the TabView component."
+                        },
+                        {
+                            "name": "hiddenTabsState",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "(string | number)[]",
+                            "description": "Current state of hidden tab."
+                        },
+                        {
+                            "name": "isPrevButtonDisabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current state of previous button."
+                        },
+                        {
+                            "name": "isNextButtonDisabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current state of the next button."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TabViewPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "navContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the nav container's DOM element."
+                        },
+                        {
+                            "name": "navContent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the nav content's DOM element."
+                        },
+                        {
+                            "name": "nav",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the list's DOM element."
+                        },
+                        {
+                            "name": "inkbar",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the inkbar's DOM element."
+                        },
+                        {
+                            "name": "prevButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the previous button's DOM element."
+                        },
+                        {
+                            "name": "previousIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the previous button icon's DOM element."
+                        },
+                        {
+                            "name": "nextButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the next button's DOM element."
+                        },
+                        {
+                            "name": "nextIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the next button icon's DOM element."
+                        },
+                        {
+                            "name": "panelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabViewPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "tab",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TabPanelPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to accordion tabs."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TabViewPassThroughType": {
+                    "values": "PassThroughType<T, TabViewPassThroughMethodOptions>"
+                },
+                "TabPanelPassThroughType": {
+                    "values": "PassThroughType<T, TabPanelPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "tag": {
+        "description": "Tag component is used to categorize content.\n\n[Live Demo](https://www.primereact.org/tag)",
+        "components": {
+            "Tag": {
+                "description": "Tag component is used to categorize content.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLSpanElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Tag component. In addition to these, all properties of HTMLSpanElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TagProps>",
+                            "default": "",
+                            "description": "Icon of the tag to display next to the value."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "rounded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the corners of the tag are rounded."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | \"success\" | \"warning\" | \"info\" | \"secondary\" | \"danger\" | \"contrast\"",
+                            "default": "null",
+                            "description": "Severity type of the tag."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Value to display inside the tag."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TagPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TagProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TagPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TagPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the value's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TagPassThroughType": {
+                    "values": "PassThroughType<T, TagPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "terminal": {
+        "description": "Terminal is a text based user interface.\n\n[Live Demo](https://www.primereact.org/terminal)",
+        "components": {
+            "Terminal": {
+                "description": "Terminal is a text based user interface.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Terminal component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "prompt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Prompt text for each command."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "welcomeMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Initial text to display on terminal."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TerminalState": {
+                    "description": "Defines current inline state in Terminal component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "commandText",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current command text as a string."
+                        },
+                        {
+                            "name": "commands",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "Current commands as an array."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TerminalPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TerminalProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TerminalState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TerminalPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "welcomeMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the welcome message's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "commands",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the commands' DOM element."
+                        },
+                        {
+                            "name": "prompt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the prompt's DOM element."
+                        },
+                        {
+                            "name": "command",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the command's DOM element."
+                        },
+                        {
+                            "name": "response",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the response's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "commandText",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TerminalPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the command text's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TerminalPassThroughType": {
+                    "values": "PassThroughType<T, TerminalPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "terminalservice": {
+        "description": "Terminal is a text based user interface.\n\n[Live Demo](https://www.primereact.org/terminal/)",
+        "components": {
+            "TerminalService": {
+                "description": "Terminal is a text based user interface.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                },
+                "props": {
+                    "description": "",
+                    "values": []
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TerminalServiceOptions": {
+                    "description": "Custom terminal service options.",
+                    "relatedProp": "",
+                    "props": [],
+                    "callbacks": [
+                        {
+                            "name": "on",
+                            "parameters": [
+                                {
+                                    "name": "action",
+                                    "optional": false,
+                                    "type": "\"clear\" | \"response\" | \"command\"",
+                                    "description": "Custom listener."
+                                },
+                                {
+                                    "name": "fn",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Custom listener."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Method to attach an event listener to a specific action."
+                        },
+                        {
+                            "name": "emit",
+                            "parameters": [
+                                {
+                                    "name": "action",
+                                    "optional": false,
+                                    "type": "\"clear\" | \"response\" | \"command\"",
+                                    "description": "Custom listener."
+                                },
+                                {
+                                    "name": "params",
+                                    "optional": true,
+                                    "type": "any",
+                                    "description": "Custom listener."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Method to emit an event for a specific action."
+                        },
+                        {
+                            "name": "off",
+                            "parameters": [
+                                {
+                                    "name": "action",
+                                    "optional": false,
+                                    "type": "\"clear\" | \"response\" | \"command\"",
+                                    "description": "Custom listener."
+                                },
+                                {
+                                    "name": "fn",
+                                    "optional": false,
+                                    "type": "any",
+                                    "description": "Custom listener."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Method to detach an event listener from a specific action."
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    "tieredmenu": {
+        "description": "TieredMenu is an input component that provides real-time suggestions when being typed.\n\n[Live Demo](https://www.primereact.org/tieredmenu/)",
+        "components": {
+            "TieredMenu": {
+                "description": "TieredMenu is an input component that provides real-time suggestions when being typed.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "toggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Toggles the visibility of the popup menu."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in TieredMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "breakpoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "The breakpoint to define the maximum width boundary when responsiveness is enabled."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "model",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MenuItem[]",
+                            "default": "",
+                            "description": "An array of menuitems."
+                        },
+                        {
+                            "name": "popup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if menu would displayed as a popup."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "400px",
+                            "description": "Maximum height of the options panel on responsive mode."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TieredMenuProps>",
+                            "default": "",
+                            "description": "Icon of the submenu."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu loses focus."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu receives focus."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a popup menu is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TieredMenuPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TieredMenuContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TieredMenuPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "menu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the menu's DOM element."
+                        },
+                        {
+                            "name": "submenu",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the submenu's DOM element."
+                        },
+                        {
+                            "name": "menuitem",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the list item's DOM element."
+                        },
+                        {
+                            "name": "action",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the action's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "submenuIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the submenu icon's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TieredMenuPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TieredMenuState": {
+                    "description": "Defines current inline state in TieredMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "attributeSelector",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current attributeSelector visible state as a string."
+                        },
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TieredMenuContext": {
+                    "description": "Defines current options in TieredMenu component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "active",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current active state of menuitem as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TieredMenuPassThroughType": {
+                    "values": "PassThroughType<T, TieredMenuPassThroughMethodOptions>"
+                },
+                "TieredMenuPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "timeline": {
+        "description": "Timeline visualizes a series of chained events.\n\n[Live Demo](https://www.primereact.org/timeline/)",
+        "components": {
+            "Timeline": {
+                "description": "Timeline visualizes a series of chained events.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Timeline component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "align",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"alternate\" | \"left\" | \"top\" | \"bottom\" | \"right\"",
+                            "default": "left",
+                            "description": "Position of the timeline bar relative to the content. Valid values are \"left\", \"right for vertical layout and \"top\", \"bottom\" for horizontal layout."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of the content."
+                        },
+                        {
+                            "name": "dataKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering."
+                        },
+                        {
+                            "name": "layout",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"horizontal\" | \"vertical\"",
+                            "default": "vertical",
+                            "description": "Orientation of the timeline, valid values are \"vertical\" and \"horizontal\"."
+                        },
+                        {
+                            "name": "marker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template content allows placing a custom event marker instead of the default one."
+                        },
+                        {
+                            "name": "opposite",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template content to be placed at the other side of the bar."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any[]",
+                            "default": "",
+                            "description": "An array of events to display."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TimelinePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Timeline"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TimelinePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "event",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the event's DOM element."
+                        },
+                        {
+                            "name": "opposite",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the opposite's DOM element."
+                        },
+                        {
+                            "name": "separator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the separator's DOM element."
+                        },
+                        {
+                            "name": "marker",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the marker's DOM element."
+                        },
+                        {
+                            "name": "connector",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the connector's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TimelinePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TimelinePassThroughType": {
+                    "values": "PassThroughType<T, TimelinePassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "toast": {
+        "description": "Toast is used to display messages in an overlay.\n\n[Live Demo](https://www.primereact.org/toast/)",
+        "components": {
+            "Toast": {
+                "description": "Toast is used to display messages in an overlay.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "clear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Clears the all messages from Toast."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "remove",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "type": "ToastMessage | ToastMessage[]",
+                                    "description": "Message to remove"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to remove messages."
+                        },
+                        {
+                            "name": "replace",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "type": "ToastMessage | ToastMessage[]",
+                                    "description": "Message to replace"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to add new messages after removing all old messages."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "type": "ToastMessage | ToastMessage[]",
+                                    "description": "Message to show"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to show the message."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Toast component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "self",
+                            "description": "DOM element instance where the component should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to add to initial layering of PrimeReact components which start from 1000."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Specifies a custom content for the toast. For more complex markup, use the \"content\" slot instead."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"center\" | \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\" | \"top-center\" | \"bottom-center\"",
+                            "default": "top-right",
+                            "description": "Position of the toast in viewport, valid values are 'center', 'top-center', 'top-left', 'top-right', 'bottom-center', 'bottom-left', 'bottom-right'."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "optional": false,
+                                    "type": "ToastMessage",
+                                    "description": "Clicked message"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when an active tab is collapsed by clicking on the header."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when message becomes hidden."
+                        },
+                        {
+                            "name": "onRemove",
+                            "parameters": [
+                                {
+                                    "name": "message",
+                                    "optional": false,
+                                    "type": "ToastMessage",
+                                    "description": "Removed message"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a message is removed."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when message becomes visible."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ToastPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToastProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToastState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToastPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the message's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        },
+                        {
+                            "name": "summary",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the summary's DOM element."
+                        },
+                        {
+                            "name": "detail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the detail's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "closeButtonIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the close button icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToastMessageOptions": {
+                    "description": "Defines message options in Toast component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"error\" | \"success\" | \"info\" | \"warn\" | \"secondary\" | \"contrast\"",
+                            "description": "Severity level of the message."
+                        },
+                        {
+                            "name": "summary",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Summary content of the message."
+                        },
+                        {
+                            "name": "detail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Detail content of the message."
+                        },
+                        {
+                            "name": "closable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the message can be closed manually using the close icon."
+                        },
+                        {
+                            "name": "life",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Delay in milliseconds to close the message automatically."
+                        },
+                        {
+                            "name": "group",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Key of the Toast to display the message."
+                        },
+                        {
+                            "name": "styleClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Style class of the message."
+                        },
+                        {
+                            "name": "contentStyleClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Style class of the content."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastPassThroughOptions",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToastState": {
+                    "description": "Defines current inline state in Toast component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "messages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Current messages."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToastMessage": {
+                    "description": "Message options for toast component",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique id of the message."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"error\" | \"success\" | \"info\" | \"warn\" | \"secondary\" | \"contrast\"",
+                            "description": "Severity of the message."
+                        },
+                        {
+                            "name": "summary",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Summary content of the message."
+                        },
+                        {
+                            "name": "detail",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "description": "Detail content of the message."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "Custom content of the message. If enabled, summary and details properties are ignored."
+                        },
+                        {
+                            "name": "closable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the message can be closed manually using the close icon."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ToastProps>",
+                            "description": "Icon of the message."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ToastProps>",
+                            "description": "Icon of the close button."
+                        },
+                        {
+                            "name": "sticky",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "When enabled, message is not removed automatically."
+                        },
+                        {
+                            "name": "life",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Delay in milliseconds to close the message automatically."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the message."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the message."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the message content."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Inline style of the message content."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Omit<ToastPassThroughOptions, \"message\">",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContentPropsMessage": {
+                    "description": "Defines current content values and refs for headless development.",
+                    "relatedProp": "message",
+                    "props": [
+                        {
+                            "name": "summary",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string",
+                            "description": "Summary of the toast."
+                        },
+                        {
+                            "name": "detail",
+                            "optional": false,
+                            "readonly": true,
+                            "type": "string",
+                            "description": "Detail of the toast."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ContentProps": {
+                    "description": "Defines current content values and refs for headless development.",
+                    "relatedProp": "content",
+                    "props": [
+                        {
+                            "name": "message",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ContentPropsMessage",
+                            "description": "Toast's props values."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ToastPassThroughType": {
+                    "values": "PassThroughType<T, ToastPassThroughMethodOptions>"
+                },
+                "ToastPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "togglebutton": {
+        "description": "ToggleButton is used to select a boolean value using a button.\n\n[Live Demo](https://www.primereact.org/togglebutton/)",
+        "components": {
+            "ToggleButton": {
+                "description": "ToggleButton is used to select a boolean value using a button.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in ToggleButton component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies the on/off state of the button."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element should be disabled."
+                        },
+                        {
+                            "name": "iconPos",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"right\"",
+                            "default": "left",
+                            "description": "Position of the icon, valid values are \"left\" and \"right\"."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "offIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ToggleButtonProps>",
+                            "default": "",
+                            "description": "Icon for the off state."
+                        },
+                        {
+                            "name": "offLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "no",
+                            "description": "Label for the off state."
+                        },
+                        {
+                            "name": "onIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<ToggleButtonProps>",
+                            "default": "",
+                            "description": "Icon for the on state."
+                        },
+                        {
+                            "name": "onLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "yes",
+                            "description": "Label for the on state."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete loses focus."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "ToggleButtonChangeEvent",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "FocusEvent<HTMLElement, Element>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when autocomplete gets focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "ToggleButtonChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Value as the checked state."
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToggleButtonChangeTargetOptions",
+                            "description": "Target element."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ToggleButtonPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToggleButtonProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToggleButtonPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "box",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the box's DOM element."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToggleButtonChangeTargetOptions": {
+                    "description": "Custom toggle button change target options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The name of the element."
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Collapsed state as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ToggleButtonPassThroughType": {
+                    "values": "PassThroughType<T, ToggleButtonPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "toolbar": {
+        "description": "Toolbar is a grouping component for buttons and other content.\n\n[Live Demo](https://www.primereact.org/toolbar/)",
+        "components": {
+            "Toolbar": {
+                "description": "Toolbar is a grouping component for buttons and other content.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Toolbar component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "center",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of center section."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of end section."
+                        },
+                        {
+                            "name": "left",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of left section.",
+                            "deprecated": "use start instead"
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToolbarPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "right",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of right section.",
+                            "deprecated": "use end instead"
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of start section."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "ToolbarPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToolbarProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "ToolbarPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "start",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the start's DOM element."
+                        },
+                        {
+                            "name": "center",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the center's DOM element."
+                        },
+                        {
+                            "name": "end",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the right's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "ToolbarPassThroughType": {
+                    "values": "PassThroughType<T, ToolbarPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "tooltip": {
+        "description": "Tooltip functionality is integrated within various PrimeReact components.\n\n[Live Demo](https://www.primereact.org/tooltip/)",
+        "components": {
+            "Tooltip": {
+                "description": "Tooltip functionality is integrated within various PrimeReact components.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "getTarget",
+                            "parameters": [],
+                            "returnType": "null | HTMLElement",
+                            "description": "Used to get target element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "null",
+                            "description": "Used to hide the tooltip."
+                        },
+                        {
+                            "name": "loadTargetEvents",
+                            "parameters": [
+                                {
+                                    "name": "target",
+                                    "type": "string | string[] | HTMLElement | RefObject<HTMLElement>",
+                                    "description": "Target element or if undefined will use current target."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to load target events."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "null",
+                            "description": "Used to show the tooltip."
+                        },
+                        {
+                            "name": "unloadTargetEvents",
+                            "parameters": [
+                                {
+                                    "name": "target",
+                                    "type": "string | string[] | HTMLElement | RefObject<HTMLElement>",
+                                    "description": "Target element or if undefined will use current target."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to unload target events."
+                        },
+                        {
+                            "name": "updateTargetEvents",
+                            "parameters": [
+                                {
+                                    "name": "target",
+                                    "type": "string | string[] | HTMLElement | RefObject<HTMLElement>",
+                                    "description": "Target element or if undefined will use current target."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Used to reload target events. In some cases, the target element can be hidden initially. Later, when this element becomes visible, it will be necessary to bind tooltip events to this element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in Tooltip component. In addition to these, all properties of TooltipOptions can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "at",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines which position on the target element to align the positioned tooltip."
+                        },
+                        {
+                            "name": "autoHide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to hide tooltip when hovering over tooltip content."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tooltip."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies if pressing escape key should hide the tooltip."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content to be displayed in tooltip."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the tooltip should be hidden."
+                        },
+                        {
+                            "name": "event",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"focus\" | \"hover\"",
+                            "default": "hover",
+                            "description": "Event to show the tooltip."
+                        },
+                        {
+                            "name": "hideDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to hide the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "hideEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "mouseleave",
+                            "description": "Event to hide the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "mouseTrack",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the tooltip will follow the mouse."
+                        },
+                        {
+                            "name": "mouseTrackLeft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "mouseTrackTop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "my",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines which position on the tooltip being positioned to align with the target element."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\" | \"mouse\"",
+                            "default": "right",
+                            "description": "Position of the tooltip."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "showDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to show the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "showEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "mouseenter",
+                            "description": "Event to show the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "showOnDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show tooltip for disabled elements."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Style of the tooltip."
+                        },
+                        {
+                            "name": "target",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | string[] | HTMLElement | RefObject<HTMLElement>",
+                            "default": "",
+                            "description": "Target element on global tooltip option."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "updateDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to update the tooltip in milliseconds."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBeforeHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the tooltip is hidden."
+                        },
+                        {
+                            "name": "onBeforeShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the tooltip is shown."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the tooltip is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the tooltip is shown."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TooltipPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TooltipProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TooltipState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TooltipContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TooltipPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "arrow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the arrow's DOM element."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the text's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TooltipContext": {
+                    "description": "Defines current inline context in Tooltip component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "right",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Right aligned tooltip as a boolean."
+                        },
+                        {
+                            "name": "left",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Right aligned tooltip as a boolean."
+                        },
+                        {
+                            "name": "top",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Right aligned tooltip as a boolean."
+                        },
+                        {
+                            "name": "bottom",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Right aligned tooltip as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TooltipState": {
+                    "description": "Defines current inline state in Tooltip component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "visible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current visible state as a boolean."
+                        },
+                        {
+                            "name": "position",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current position state as a string."
+                        },
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current className state as a string."
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TooltipPassThroughType": {
+                    "values": "PassThroughType<T, TooltipPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "tooltipoptions": {
+        "description": "This module contains the common options and events of Tooltip.",
+        "model": {
+            "TooltipOptions": {
+                "description": "Defines valid properties of TooltipOptions.",
+                "props": {
+                    "description": "",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "at",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines which position on the target element to align the positioned tooltip."
+                        },
+                        {
+                            "name": "autoHide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to hide tooltip when hovering over tooltip content."
+                        },
+                        {
+                            "name": "autoZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to automatically manage layering."
+                        },
+                        {
+                            "name": "baseZIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Base zIndex value to use in layering."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tooltip."
+                        },
+                        {
+                            "name": "closeOnEscape",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Specifies if pressing escape key should hide the tooltip."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the tooltip should be hidden."
+                        },
+                        {
+                            "name": "event",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"focus\" | \"hover\"",
+                            "default": "hover",
+                            "description": "Event to show the tooltip."
+                        },
+                        {
+                            "name": "hideDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to hide the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "hideEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "mouseleave",
+                            "description": "Event to hide the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "mouseTrack",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the tooltip will follow the mouse."
+                        },
+                        {
+                            "name": "mouseTrackLeft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "mouseTrackTop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "my",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines which position on the tooltip being positioned to align with the target element."
+                        },
+                        {
+                            "name": "position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\" | \"mouse\"",
+                            "default": "right",
+                            "description": "Position of the tooltip."
+                        },
+                        {
+                            "name": "showDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to show the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "showEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "mouseenter",
+                            "description": "Event to show the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "showOnDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show tooltip for disabled elements."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Style of the tooltip."
+                        },
+                        {
+                            "name": "updateDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to update the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onBeforeShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the tooltip is shown."
+                        },
+                        {
+                            "name": "onBeforeHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke before the tooltip is hidden."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the tooltip is shown."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TooltipEvent",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the tooltip is hidden."
+                        }
+                    ]
+                }
+            },
+            "TooltipHTMLAttributes": {
+                "description": "In addition to React.HTMLAttributes, the following attributes can be used on any HTMLElement if the page has a PrimeReact  tooltip  component.",
+                "props": {
+                    "description": "",
+                    "values": [
+                        {
+                            "name": "data-pr-tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content to be displayed in tooltip."
+                        },
+                        {
+                            "name": "data-pr-disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the tooltip should be hidden."
+                        },
+                        {
+                            "name": "data-pr-classname",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tooltip."
+                        },
+                        {
+                            "name": "data-pr-position",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"left\" | \"top\" | \"bottom\" | \"right\" | \"mouse\"",
+                            "default": "right",
+                            "description": "Position of the tooltip."
+                        },
+                        {
+                            "name": "data-pr-my",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines which position on the tooltip being positioned to align with the target element."
+                        },
+                        {
+                            "name": "data-pr-at",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines which position on the target element to align the positioned tooltip."
+                        },
+                        {
+                            "name": "data-pr-event",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"focus\" | \"hover\"",
+                            "default": "hover",
+                            "description": "Event to show the tooltip."
+                        },
+                        {
+                            "name": "data-pr-showevent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "mouseenter",
+                            "description": "Event to show the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "data-pr-hideevent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "mouseleave",
+                            "description": "Event to hide the tooltip if the event property is empty."
+                        },
+                        {
+                            "name": "data-pr-mousetrack",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the tooltip will follow the mouse."
+                        },
+                        {
+                            "name": "data-pr-mousetracktop",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "data-pr-mousetrackleft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled."
+                        },
+                        {
+                            "name": "data-pr-showdelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to show the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "data-pr-updatedelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to update the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "data-pr-hidedelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay to hide the tooltip in milliseconds."
+                        },
+                        {
+                            "name": "data-pr-autohide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to hide tooltip when hovering over tooltip content."
+                        },
+                        {
+                            "name": "data-pr-showondisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show tooltip for disabled elements."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "TooltipEvent": {
+                    "description": "Custom tooltip event",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLElement",
+                            "description": "Target element."
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    "tree": {
+        "description": "Tree is used to display hierarchical data.\n\n[Live Demo](https://www.primereact.org/tree/)",
+        "components": {
+            "Tree": {
+                "description": "Tree is used to display hierarchical data.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "filter",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "type": "T",
+                                    "description": "The filter value"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Filters the data."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in TreeProps component.",
+                    "values": [
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Defines a string value that labels an interactive element."
+                        },
+                        {
+                            "name": "ariaLabelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying menu element."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeProps>",
+                            "default": "",
+                            "description": "Icon to display in the checkbox."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "collapseIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeProps>",
+                            "default": "",
+                            "description": "Icon of an expanded tab."
+                        },
+                        {
+                            "name": "contentClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the tree content."
+                        },
+                        {
+                            "name": "contentStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the tree content."
+                        },
+                        {
+                            "name": "contextMenuSelectionKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A single key to control the selection with the context menu."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "dragdropScope",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "false",
+                            "description": "Unique key to enable dragdrop functionality."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No results found",
+                            "description": "Template to display when filtering does not return any results."
+                        },
+                        {
+                            "name": "expandedKeys",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeExpandedKeysType",
+                            "default": "",
+                            "description": "An array of keys to represent the state of the tree expansion state in controlled mode."
+                        },
+                        {
+                            "name": "expandIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeProps>",
+                            "default": "",
+                            "description": "Icon of an collapsed tab."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, displays an input field to filter the items."
+                        },
+                        {
+                            "name": "filterBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "label",
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                        },
+                        {
+                            "name": "filterDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "300",
+                            "description": "Delay in milliseconds before filtering the data."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeProps>",
+                            "default": "",
+                            "description": "Icon of the filter."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"strict\" | \"lenient\"",
+                            "default": "lenient",
+                            "description": "Mode for filtering valid values are \"lenient\" and \"strict\". Default is lenient."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when filter input is empty."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of filter element."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "When filtering is enabled, the value of input field. To control the value externally, use with onFilterValueChange."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of header."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of header."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to display loading indicator."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeProps>",
+                            "default": "",
+                            "description": "Icon to display when tree is loading."
+                        },
+                        {
+                            "name": "metaKeySelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
+                        },
+                        {
+                            "name": "nodeTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "false",
+                            "description": "Template of node element."
+                        },
+                        {
+                            "name": "propagateSelectionDown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether checkbox selections propagate to descendant nodes."
+                        },
+                        {
+                            "name": "propagateSelectionUp",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether checkbox selections propagate to ancestor nodes."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "selectionKeys",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string | TreeMultipleSelectionKeys | TreeCheckboxSelectionKeys",
+                            "default": "",
+                            "description": "A single or an array of keys to control the selection state."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"checkbox\" | \"single\"",
+                            "default": "",
+                            "description": "Defines the selection mode, valid values \"single\", \"multiple\", and \"checkbox\"."
+                        },
+                        {
+                            "name": "showHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show the header or not."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "togglerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of toggler element."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeNode[]",
+                            "default": "",
+                            "description": "An array of treenodes."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onCollapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeEventNodeEvent",
+                                    "description": "Custom node event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is collapsed."
+                        },
+                        {
+                            "name": "onContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeEventNodeEvent",
+                                    "description": "Custom node event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is selected with a context menu."
+                        },
+                        {
+                            "name": "onContextMenuSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectionEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selection changes with a context menu."
+                        },
+                        {
+                            "name": "onDragDrop",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeDragDropEvent",
+                                    "description": "Custom dragdrop event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is selected."
+                        },
+                        {
+                            "name": "onExpand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeEventNodeEvent",
+                                    "description": "Custom node event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is expanded."
+                        },
+                        {
+                            "name": "onFilterValueChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeFilterValueChangeEvent",
+                                    "description": "Custom filter value change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when filter value changes."
+                        },
+                        {
+                            "name": "onNodeClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeNodeClickEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the node is clicked."
+                        },
+                        {
+                            "name": "onNodeDoubleClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeNodeDoubleClickEvent",
+                                    "description": "Custom doubleclick event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the node is double-clicked."
+                        },
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeEventNodeEvent",
+                                    "description": "Custom node event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is selected."
+                        },
+                        {
+                            "name": "onSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectionEvent",
+                                    "description": "Custom select event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selection changes."
+                        },
+                        {
+                            "name": "onToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeExpandedEvent",
+                                    "description": "Custom expand event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is toggled."
+                        },
+                        {
+                            "name": "onUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeEventNodeEvent",
+                                    "description": "Custom node event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is unselected."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "TreeExpandedEvent": {
+                    "description": "Custom tree event.",
+                    "relatedProp": "onToggle",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeExpandedKeysType",
+                            "description": "Expanded node key."
+                        }
+                    ]
+                },
+                "TreeSelectionEvent": {
+                    "description": "Custom tree event.",
+                    "relatedProp": "onSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "null | string | TreeMultipleSelectionKeys | TreeCheckboxSelectionKeys",
+                            "description": "Selected node key(s)."
+                        }
+                    ]
+                },
+                "TreeEventNodeEvent": {
+                    "description": "Custom tree event.",
+                    "relatedProp": "onSelect",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "Unselected node instance."
+                        }
+                    ]
+                },
+                "TreeDragDropEvent": {
+                    "description": "Custom dragdrop event.",
+                    "relatedProp": "onDragDrop",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode[]",
+                            "description": "New value after the dragdrop."
+                        },
+                        {
+                            "name": "dragNode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "The node that is being dragged."
+                        },
+                        {
+                            "name": "dropNode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "The node that is being dropped on."
+                        },
+                        {
+                            "name": "dropIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The index of the drop."
+                        }
+                    ]
+                },
+                "TreeFilterValueChangeEvent": {
+                    "description": "Custom filter value change event.",
+                    "relatedProp": "onFilterValueChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormEvent<HTMLInputElement>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The filtered value."
+                        }
+                    ]
+                },
+                "TreeNodeDoubleClickEvent": {
+                    "description": "Custom click event.",
+                    "relatedProp": "onNodeDoubleClick",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "The current node"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TreePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the loading overlay's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "searchIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the search icon's DOM element."
+                        },
+                        {
+                            "name": "container",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the container's DOM element."
+                        },
+                        {
+                            "name": "node",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the node's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "toggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the toggler's DOM element."
+                        },
+                        {
+                            "name": "togglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the toggler icon's DOM element."
+                        },
+                        {
+                            "name": "nodeCheckbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the node checkbox's DOM element."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the checkbox icon's DOM element."
+                        },
+                        {
+                            "name": "nodeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the node icon's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "subgroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLUListElement>>",
+                            "description": "Uses to pass attributes to the subgroup's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "droppoint",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughType<HTMLAttributes<HTMLLIElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeState": {
+                    "description": "Defines current inline state in Tree component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "expandedKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeExpandedKeysType",
+                            "description": "Current expanded keys state."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current filter value state as a string."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeContext": {
+                    "description": "Defines current options in Tree component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "expanded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current expanded state of the node as a boolean."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selected state of the node as a boolean."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current checked state of the node as a boolean."
+                        },
+                        {
+                            "name": "leaf",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the node is a leaf node."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeHeaderTemplateOptions": {
+                    "description": "Custom tree header template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filterContainerClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter container element."
+                        },
+                        {
+                            "name": "filterIconClasssName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter icon element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeFilterInputOptions",
+                            "description": "The options for the filter input element."
+                        },
+                        {
+                            "name": "filterElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element of the filter input."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element of the tree header."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeProps",
+                            "description": "The props of the tree header component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeFilterInputOptions": {
+                    "description": "Custom tree filter input options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the tree filter input element."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onKeyDown",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KeyboardEvent<HTMLInputElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function to be invoked when the keydown event."
+                        },
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "KeyboardEvent<HTMLInputElement>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback function to be invoked when the change event."
+                        }
+                    ]
+                },
+                "TreeNodeTemplateOptions": {
+                    "description": "Custom tree node template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the tree node."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeProps",
+                            "description": "The props of the Tree component."
+                        },
+                        {
+                            "name": "expanded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the tree node is expanded or not."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onTogglerClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the toggler button is clicked."
+                        }
+                    ]
+                },
+                "TreeTogglerTemplateOptions": {
+                    "description": "Custom tree toggler template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panels container."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Icon classname."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the template options."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeProps",
+                            "description": "The props of Tree component"
+                        },
+                        {
+                            "name": "expanded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the tree node is expanded or not."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                },
+                "TreeMultipleSelectionKeys": {
+                    "description": "Custom tree multiple selection keys",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeCheckboxSelectionKeys": {
+                    "description": "Custom tree checkbox selection keys",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeCheckboxSelectionKeyType"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeCheckboxSelectionKeyType": {
+                    "description": "Custom tree checkbox selection type",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the checkbox is checked or not."
+                        },
+                        {
+                            "name": "partialChecked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the checkbox is partially checked or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeExpandedKeysType": {
+                    "description": "Custom tree expanded keys type",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeNodeClickEvent": {
+                    "description": "Custom click event",
+                    "relatedProp": "onNodeClick",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "The current node"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "TreeNodeDoubleClickEvent"
+                },
+                "TreeFilterOptions": {
+                    "description": "Custom tree filter options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "reset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TreePassThroughType": {
+                    "values": "PassThroughType<T, TreePassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "treenode": {
+        "description": "This module contains the data interface for nodes in tree components.",
+        "model": {
+            "TreeNode": {
+                "description": "Defines model of TreeNode API.",
+                "props": {
+                    "description": "",
+                    "values": [
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "key",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | number",
+                            "default": "",
+                            "description": "Unique key of the node."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Label of the node."
+                        },
+                        {
+                            "name": "data",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Data represented by the node."
+                        },
+                        {
+                            "name": "icon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeNode>",
+                            "default": "",
+                            "description": "Icon of the node to display next to content."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "TreeNode[]",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the node."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the node."
+                        },
+                        {
+                            "name": "droppable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the node is droppable when dragdrop is enabled."
+                        },
+                        {
+                            "name": "draggable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the node is draggable when dragdrop is enabled."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Whether the node is selectable when selection mode is enabled."
+                        },
+                        {
+                            "name": "leaf",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Specifies if the node has children. Used in lazy loading."
+                        },
+                        {
+                            "name": "expanded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Visibility of node."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": []
+                }
+            }
+        }
+    },
+    "treeselect": {
+        "description": "TreeSelect is a form component to choose from hierarchical data.\n\n[Live Demo](https://www.primereact.org/treeselect/)",
+        "components": {
+            "TreeSelect": {
+                "description": "TreeSelect is a form component to choose from hierarchical data.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "clear",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Clear the currently selected value."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        },
+                        {
+                            "name": "hide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Hide the dropdown overlay panel."
+                        },
+                        {
+                            "name": "show",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Show the dropdown overlay panel."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in TreeSelect component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "appendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Used to define a string that labels the component."
+                        },
+                        {
+                            "name": "ariaLabelledBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeSelectProps>",
+                            "default": "",
+                            "description": "Icon of the dropdown."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeSelectProps>",
+                            "default": "",
+                            "description": "Icon of the close button."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "display",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"comma\" | \"chip\"",
+                            "default": "comma",
+                            "description": "Defines how the selected items are displayed, valid values are \"comma\" and \"chip\"."
+                        },
+                        {
+                            "name": "dropdownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeSelectProps>",
+                            "default": "",
+                            "description": "Icon of the dropdown."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No available options",
+                            "description": "Text to display when there is no data."
+                        },
+                        {
+                            "name": "expandedKeys",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectExpandedKeysType",
+                            "default": "",
+                            "description": "An array of keys to represent the state of the treeselect expansion state in controlled mode."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, displays an input field to filter the items."
+                        },
+                        {
+                            "name": "filterBy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "label",
+                            "description": "When filtering is enabled, filterBy decides which field or fields (comma separated) to search against."
+                        },
+                        {
+                            "name": "filterDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "300",
+                            "description": "Delay in milliseconds before filtering the data."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeSelectProps>",
+                            "default": "",
+                            "description": "Icon of the filter."
+                        },
+                        {
+                            "name": "filterInputAutoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "When the panel is opened, it specifies that the filter input should focus automatically."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"strict\" | \"lenient\"",
+                            "default": "lenient",
+                            "description": "Mode for filtering valid values are \"lenient\" and \"strict\". Default is lenient."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Placeholder text to show when filter input is empty."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Custom template for the filter element."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "When filtering is enabled, the value of input field. To control the value externally, use with onFilterValueChange."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the input element."
+                        },
+                        {
+                            "name": "inputRef",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Ref<HTMLInputElement>",
+                            "default": "",
+                            "description": "Reference of the input element."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "metaKeySelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
+                        },
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the input element."
+                        },
+                        {
+                            "name": "nodeTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "false",
+                            "description": "Template of internally used tree component node element."
+                        },
+                        {
+                            "name": "options",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeNode[]",
+                            "default": "",
+                            "description": "An array of options to display."
+                        },
+                        {
+                            "name": "panelClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the overlay panel element."
+                        },
+                        {
+                            "name": "panelFooterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of footer."
+                        },
+                        {
+                            "name": "panelHeaderTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of header."
+                        },
+                        {
+                            "name": "panelStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the overlay panel element."
+                        },
+                        {
+                            "name": "placeholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Hint text for the input field."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "resetFilterOnHide",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Resets the filter when the overlay is hidden."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "400px",
+                            "description": "Maximum height of the options panel."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"checkbox\" | \"single\"",
+                            "default": "",
+                            "description": "Defines the selection mode, valid values \"single\", \"multiple\", and \"checkbox\"."
+                        },
+                        {
+                            "name": "showClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "togglerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of toggler element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "transitionOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSTransitionProps",
+                            "default": "",
+                            "description": "The properties of CSSTransition can be customized, except for \"nodeRef\" and \"in\" properties."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string | TreeSelectSelectionKeysType | TreeSelectSelectionKeysType[]",
+                            "default": "",
+                            "description": "A single or an object of keys to control the selection state."
+                        },
+                        {
+                            "name": "valueTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of selected values."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectChangeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selection changes."
+                        },
+                        {
+                            "name": "onFilterValueChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectFilterValueChangeEvent",
+                                    "description": "Custom filter change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when filter value changes."
+                        },
+                        {
+                            "name": "onHide",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to hide the overlay."
+                        },
+                        {
+                            "name": "onNodeClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectNodeClickEvent",
+                                    "description": "Custom click event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the node is clicked."
+                        },
+                        {
+                            "name": "onNodeCollapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectEventNodeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is collapsed."
+                        },
+                        {
+                            "name": "onNodeDoubleClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectNodeDoubleClickEvent",
+                                    "description": "Custom doubleclick event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the node is double-clicked."
+                        },
+                        {
+                            "name": "onNodeExpand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectEventNodeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is expanded."
+                        },
+                        {
+                            "name": "onNodeSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectEventNodeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is selected."
+                        },
+                        {
+                            "name": "onNodeUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectEventNodeEvent",
+                                    "description": "Custom change event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is unselected."
+                        },
+                        {
+                            "name": "onShow",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to show the overlay."
+                        },
+                        {
+                            "name": "onToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeSelectExpandedEvent",
+                                    "description": "Custom toggle event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is toggled."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "TreeSelectChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<string | TreeSelectSelectionKeysType | TreeSelectSelectionKeysType[]>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<string | TreeSelectSelectionKeysType | TreeSelectSelectionKeysType[]>"
+                        }
+                    ]
+                },
+                "TreeSelectEventNodeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onNodeCollapse",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "Unselected node instance."
+                        }
+                    ]
+                },
+                "TreeSelectExpandedEvent": {
+                    "description": "Custom toggle event.",
+                    "relatedProp": "onToggle",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeSelectExpandedKeysType",
+                            "description": "Toggled node instance"
+                        }
+                    ]
+                },
+                "TreeSelectFilterValueChangeEvent": {
+                    "description": "Custom filter change event.",
+                    "relatedProp": "onFilterValueChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormEvent<HTMLInputElement>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The filtered value"
+                        }
+                    ]
+                },
+                "TreeSelectNodeDoubleClickEvent": {
+                    "description": "Custom double click event.",
+                    "relatedProp": "onNodeDoubleClick",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "The current node"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TreeSelectPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeSelectProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeSelectState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeSelectPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "labelContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the label container's DOM element."
+                        },
+                        {
+                            "name": "label",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the label's DOM element."
+                        },
+                        {
+                            "name": "token",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the token's DOM element."
+                        },
+                        {
+                            "name": "tokenLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the token label's DOM element."
+                        },
+                        {
+                            "name": "trigger",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the trigger's DOM element."
+                        },
+                        {
+                            "name": "triggerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the trigger icon's DOM element."
+                        },
+                        {
+                            "name": "panel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the panel's DOM element."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "tree",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreePassThroughOptions",
+                            "description": "Uses to pass attributes to the trigger's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        },
+                        {
+                            "name": "filterContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the filter container's DOM element."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "uses to pass attributes to the filter's DOM element."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "uses to pass attributes to the filter icon's DOM element."
+                        },
+                        {
+                            "name": "closeIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "uses to pass attributes to the close icon's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "closeButton",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<SVGProps<SVGSVGElement> | HTMLAttributes<HTMLButtonElement>>",
+                            "description": "uses to pass attributes to the close button's DOM element."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "uses to pass attributes to the clear icon's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        },
+                        {
+                            "name": "transition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectPassThroughTransitionType",
+                            "description": "Used to control React Transition API."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes to the Tooltip component."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onFocus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu receives focus."
+                        },
+                        {
+                            "name": "onBlur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when menu loses focus."
+                        }
+                    ]
+                },
+                "TreeSelectState": {
+                    "description": "Defines current inline state in TreeSelect component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "focused",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current focused state as a boolean."
+                        },
+                        {
+                            "name": "overlayVisible",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current overlay visible state as a boolean."
+                        },
+                        {
+                            "name": "expandedKeys",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeSelectExpandedKeysType",
+                            "description": "Current expanded keys state."
+                        },
+                        {
+                            "name": "filterValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Current selected keys state."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeSelectPanelHeaderTemplateOptions": {
+                    "description": "Custom panel header template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel."
+                        },
+                        {
+                            "name": "filterElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the filter of the panel."
+                        },
+                        {
+                            "name": "closeElement",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the close of the panel."
+                        },
+                        {
+                            "name": "closeElementClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel close element."
+                        },
+                        {
+                            "name": "closeIconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panel close icon."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the panel."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeSelectProps",
+                            "description": "The props of the TreeSelect component."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onCloseClick",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the close button is clicked."
+                        }
+                    ]
+                },
+                "TreeSelectSelectionKeysType": {
+                    "description": "Custom treeselect selection keys type",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean | TreeSelectCheckboxSelectionKeyType"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeSelectCheckboxSelectionKeyType": {
+                    "description": "Custom checkbox selection key type",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the checkbox is checked or not."
+                        },
+                        {
+                            "name": "partialChecked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the checkbox is partially checked or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeSelectExpandedKeysType": {
+                    "description": "Custom expanded keys type.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeSelectFilterTemplateOptions": {
+                    "description": "Custom filter template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the option is disabled or not"
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLDivElement",
+                            "description": "The filter element."
+                        },
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The filter."
+                        },
+                        {
+                            "name": "filterIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeSelect>",
+                            "description": "Icon of the filter."
+                        },
+                        {
+                            "name": "filterIconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the filter icon."
+                        },
+                        {
+                            "name": "filterInputChange",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ChangeEvent<HTMLInputElement>",
+                            "description": "Browser change event for the filter input element."
+                        },
+                        {
+                            "name": "filterInputProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "The props of the filter input element."
+                        },
+                        {
+                            "name": "filterOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeSelectFilterOptions",
+                            "description": "The filter input options."
+                        },
+                        {
+                            "name": "filterPlaceholder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The placeholder of the filter element."
+                        },
+                        {
+                            "name": "filterTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "Custom filter template."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeSelectFilterOptions": {
+                    "description": "Custom filter options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "filter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        },
+                        {
+                            "name": "reset",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeSelectNodeClickEvent": {
+                    "description": "Custom click event",
+                    "relatedProp": "onNodeClick",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event"
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "The current node"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "TreeSelectNodeDoubleClickEvent"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TreeSelectPassThroughType": {
+                    "values": "PassThroughType<T, TreeSelectPassThroughMethodOptions>"
+                },
+                "TreeSelectPassThroughTransitionType": {
+                    "values": "ReactCSSTransitionProps | Function | undefined"
+                }
+            }
+        }
+    },
+    "treetable": {
+        "description": "TreeTable is used to display hierarchical data in tabular format.\n\n[Live Demo](https://www.primereact.org/treetable/)",
+        "components": {
+            "TreeTable": {
+                "description": "TreeTable is used to display hierarchical data in tabular format.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "filter",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "type": "T",
+                                    "description": "The filter value"
+                                },
+                                {
+                                    "name": "field",
+                                    "type": "string",
+                                    "description": "The filter field"
+                                },
+                                {
+                                    "name": "mode",
+                                    "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                                    "description": "Filter match mode."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Filters the data."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in TreeTable component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "alwaysShowPaginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether to show it even there is only one page."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeTableProps>",
+                            "default": "",
+                            "description": "Icon of the checkbox when checked."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the node."
+                        },
+                        {
+                            "name": "columnResizeMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"expand\" | \"fit\"",
+                            "default": "fit",
+                            "description": "Defines whether the overall table width should change on column resize, valid values are \"fit\" and \"expand\"."
+                        },
+                        {
+                            "name": "contextMenuSelectionKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "A single key to control the selection with the context menu."
+                        },
+                        {
+                            "name": "currentPageReportTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "({currentPage} of {totalPages})",
+                            "description": "Template of the current page report element. Available placeholders are {currentPage}, {totalPages}, {rows}, {first}, {last} and {totalRecords}"
+                        },
+                        {
+                            "name": "defaultSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | 0 | 1 | -1",
+                            "default": "1",
+                            "description": "Default sort order of an unsorted column."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "No results found",
+                            "description": "Text to display when there is no data."
+                        },
+                        {
+                            "name": "expandedKeys",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTableExpandedKeysType",
+                            "default": "",
+                            "description": "An array of keys to represent the state of the tree expansion state in controlled mode."
+                        },
+                        {
+                            "name": "filterDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "300",
+                            "description": "Delay in milliseconds before filtering the data."
+                        },
+                        {
+                            "name": "filterLocale",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "undefined",
+                            "description": "Locale to use in filtering. The default locale is the host environment's current locale."
+                        },
+                        {
+                            "name": "filterMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"strict\" | \"lenient\"",
+                            "default": "lenient",
+                            "description": "Mode for filtering valid values are lenient and strict. Default is lenient."
+                        },
+                        {
+                            "name": "filters",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTableFilterMeta",
+                            "default": "",
+                            "description": "An array of FilterMetadata objects to provide external filters."
+                        },
+                        {
+                            "name": "first",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the first row to be displayed."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Footer content of the table."
+                        },
+                        {
+                            "name": "footerColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactElement<any, string | JSXElementConstructor<any>>",
+                            "default": "",
+                            "description": "ColumnCroup component for footer."
+                        },
+                        {
+                            "name": "frozenFooterColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactElement<any, string | JSXElementConstructor<any>>",
+                            "default": "",
+                            "description": "ColumnCroup component for footer of frozen columns."
+                        },
+                        {
+                            "name": "frozenHeaderColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactElement<any, string | JSXElementConstructor<any>>",
+                            "default": "",
+                            "description": "ColumnCroup component for header of frozen columns."
+                        },
+                        {
+                            "name": "frozenWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Width of the frozen part in scrollable DataTable."
+                        },
+                        {
+                            "name": "globalFilter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string",
+                            "default": "",
+                            "description": "Value of the global filter to use in filtering."
+                        },
+                        {
+                            "name": "globalFilterMatchMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notContains\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\" | \"between\" | \"dateIs\" | \"dateIsNot\" | \"dateBefore\" | \"dateAfter\"",
+                            "default": "contains",
+                            "description": "Defines filterMatchMode; \"startsWith\", \"contains\", \"endsWith\", \"equals\", \"notEquals\", \"in\", \"notIn\", \"lt\", \"lte\", \"gt\", \"gte\" and \"custom\"."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Header content of the table."
+                        },
+                        {
+                            "name": "headerColumnGroup",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactElement<any, string | JSXElementConstructor<any>>",
+                            "default": "",
+                            "description": "ColumnCroup component for header."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "lazy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if data is loaded and interacted with in lazy manner."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Displays a loader to indicate data load is in progress."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeTableProps>",
+                            "default": "",
+                            "description": "The icon to show while indicating data load is in progress."
+                        },
+                        {
+                            "name": "metaKeySelection",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | TreeTableSortMeta[]",
+                            "default": "",
+                            "description": "An array of SortMeta objects to sort the data by default in multiple sort mode."
+                        },
+                        {
+                            "name": "pageLinkSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "5",
+                            "description": "Number of page links to display."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified as true, enables the pagination."
+                        },
+                        {
+                            "name": "paginatorClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the paginator element."
+                        },
+                        {
+                            "name": "paginatorDropdownAppendTo",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | HTMLElement | \"self\" | Function",
+                            "default": "document.body",
+                            "description": "DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located."
+                        },
+                        {
+                            "name": "paginatorLeft",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content for the left side of the paginator."
+                        },
+                        {
+                            "name": "paginatorPosition",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"top\" | \"bottom\"",
+                            "default": "bottom",
+                            "description": "Position of the paginator, options are \"top\",\"bottom\" or \"both\"."
+                        },
+                        {
+                            "name": "paginatorRight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Content for the right side of the paginator."
+                        },
+                        {
+                            "name": "paginatorTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorTemplate",
+                            "default": "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown",
+                            "description": "Template of the paginator. For details, refer to the template section of the paginator documentation for further options."
+                        },
+                        {
+                            "name": "propagateSelectionDown",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether checkbox selections propagate to descendant nodes."
+                        },
+                        {
+                            "name": "propagateSelectionUp",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether checkbox selections propagate to ancestor nodes."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "removableSort",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, columns can have an un-sorted state."
+                        },
+                        {
+                            "name": "reorderableColumns",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, columns can be reordered using drag and drop."
+                        },
+                        {
+                            "name": "reorderIndicatorDownIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeTableProps>",
+                            "default": "",
+                            "description": "Defines the reorder indicator down icon."
+                        },
+                        {
+                            "name": "reorderIndicatorUpIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeTableProps>",
+                            "default": "",
+                            "description": "Defines the reorder indicator up icon."
+                        },
+                        {
+                            "name": "resizableColumns",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, columns can be resized using drag and drop."
+                        },
+                        {
+                            "name": "rowHover",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, background of the rows change on hover."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of rows to display per page."
+                        },
+                        {
+                            "name": "rowsPerPageOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number[]",
+                            "default": "",
+                            "description": "Array of integer values to display inside rows per page dropdown."
+                        },
+                        {
+                            "name": "scrollable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When specified, enables horizontal and/or vertical scrolling."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Height of the scroll viewport."
+                        },
+                        {
+                            "name": "selectionKeys",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | string | TreeTableSelectionKeysType | TreeTableSelectionKeysType[]",
+                            "default": "",
+                            "description": "A single or an array of keys to control the selection state."
+                        },
+                        {
+                            "name": "selectionMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"checkbox\" | \"single\"",
+                            "default": "",
+                            "description": "Defines the selection mode, valid values \"single\", \"multiple\", and \"checkbox\"."
+                        },
+                        {
+                            "name": "selectOnEdit",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Determines whether the cell editor will be opened when clicking to select any row on Selection and Cell Edit modes."
+                        },
+                        {
+                            "name": "showGridlines",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show grid lines between cells."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Name of the field to sort data by default."
+                        },
+                        {
+                            "name": "sortIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TreeTableProps>",
+                            "default": "",
+                            "description": "Icon to display the current sorting status."
+                        },
+                        {
+                            "name": "sortMode",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"multiple\" | \"single\"",
+                            "default": "single",
+                            "description": "Defines whether sorting works on single column or on multiple columns."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | 0 | 1 | -1",
+                            "default": "",
+                            "description": "Order to sort the data by default."
+                        },
+                        {
+                            "name": "stateKey",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of a stateful table to use in state storage."
+                        },
+                        {
+                            "name": "stateStorage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"custom\" | \"local\" | \"session\"",
+                            "default": "session",
+                            "description": "Defines where a stateful table keeps its state, valid values are \"session\" for sessionStorage, \"local\" for localStorage and \"custom\"."
+                        },
+                        {
+                            "name": "stripedRows",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to displays rows with alternating colors."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "tableClassName",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the table element."
+                        },
+                        {
+                            "name": "tableStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the table element."
+                        },
+                        {
+                            "name": "togglerTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "Template of toggler element."
+                        },
+                        {
+                            "name": "totalRecords",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Number of total records, defaults to length of value when not defined."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeNode[]",
+                            "default": "",
+                            "description": "An array of treenodes to display."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "customRestoreState",
+                            "parameters": [],
+                            "returnType": "undefined | object",
+                            "description": "A function to implement custom restoreState with stateStorage=\"custom\". Need to return state object."
+                        },
+                        {
+                            "name": "customSaveState",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "The object to be stored."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "A function to implement custom saveState with stateStorage=\"custom\"."
+                        },
+                        {
+                            "name": "onCollapse",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableEvent",
+                                    "description": "Custom treetable event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is collapsed."
+                        },
+                        {
+                            "name": "onColReorder",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableColReorderEvent",
+                                    "description": "Custom column reorder event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a column is reordered."
+                        },
+                        {
+                            "name": "onColumnResizeEnd",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableColumnResizeEndEvent",
+                                    "description": "Custom resize event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a column is resized."
+                        },
+                        {
+                            "name": "onContextMenu",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableEvent",
+                                    "description": "Custom treetable event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a context menu is clicked."
+                        },
+                        {
+                            "name": "onContextMenuSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableSelectionEvent",
+                                    "description": "Custom selection event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selection changes with a context menu."
+                        },
+                        {
+                            "name": "onExpand",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableEvent",
+                                    "description": "Custom treetable event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is expanded."
+                        },
+                        {
+                            "name": "onFilter",
+                            "parameters": [
+                                {
+                                    "name": "filters",
+                                    "optional": false,
+                                    "type": "TreeTableFilterMeta",
+                                    "description": "Custom treetable event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on filtering."
+                        },
+                        {
+                            "name": "onPage",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTablePageEvent",
+                                    "description": "Custom page event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on pagination."
+                        },
+                        {
+                            "name": "onRowClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableEvent",
+                                    "description": "Custom treetable event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is clicked."
+                        },
+                        {
+                            "name": "onRowMouseEnter",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableRowMouseEvent",
+                                    "description": "Custom row mouse event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is hovered with mouse."
+                        },
+                        {
+                            "name": "onRowMouseLeave",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableRowMouseEvent",
+                                    "description": "Custom row mouse event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a row is navigated away from with mouse."
+                        },
+                        {
+                            "name": "onSelect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableEvent",
+                                    "description": "Custom treetable event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is selected."
+                        },
+                        {
+                            "name": "onSelectionChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableSelectionEvent",
+                                    "description": "Custom selection event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when selection changes."
+                        },
+                        {
+                            "name": "onSort",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableSortEvent",
+                                    "description": "Custom sort event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on sort."
+                        },
+                        {
+                            "name": "onStateRestore",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is restored."
+                        },
+                        {
+                            "name": "onStateSave",
+                            "parameters": [
+                                {
+                                    "name": "state",
+                                    "optional": false,
+                                    "type": "object",
+                                    "description": "Table state."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke table state is saved."
+                        },
+                        {
+                            "name": "onToggle",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableToggleEvent",
+                                    "description": "Custom toggle event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is toggled."
+                        },
+                        {
+                            "name": "onUnselect",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TreeTableEvent",
+                                    "description": "Custom treetable event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when a node is unselected."
+                        },
+                        {
+                            "name": "onValueChange",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "undefined | TreeNode[]",
+                                    "description": "Value displayed by the table."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke after filtering and sorting to pass the rendered value."
+                        },
+                        {
+                            "name": "rowClassName",
+                            "parameters": [
+                                {
+                                    "name": "data",
+                                    "optional": false,
+                                    "type": "TreeNode",
+                                    "description": "Value displayed by the treetable."
+                                }
+                            ],
+                            "returnType": "object",
+                            "description": "Function that takes the row data and returns an object in {'styleclass' : condition} format to define a classname for a particular now."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "TreeTableEvent": {
+                    "description": "Custom treetable event.",
+                    "relatedProp": "onCollapse",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "Expanded node instance."
+                        }
+                    ]
+                },
+                "TreeTableToggleEvent": {
+                    "description": "Custom toggle event.",
+                    "relatedProp": "onToggle",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableExpandedKeysType",
+                            "description": "Collapsed state as a boolean."
+                        }
+                    ]
+                },
+                "TreeTablePageEvent": {
+                    "description": "Custom page event.",
+                    "relatedProp": "onPage",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the first row."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Rows per page."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Value of the new page."
+                        },
+                        {
+                            "name": "totalPages",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of pages."
+                        }
+                    ]
+                },
+                "TreeTableSortEvent": {
+                    "description": "Custom sort event.",
+                    "relatedProp": "onSort",
+                    "props": [
+                        {
+                            "name": "sortField",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Field to sort against."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | 0 | 1 | -1",
+                            "description": "Sort order as integer."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | TreeTableSortMeta[]",
+                            "description": "MultiSort metadata."
+                        }
+                    ]
+                },
+                "TreeTableSelectionEvent": {
+                    "description": "Custom selection event.",
+                    "relatedProp": "onContextMenuSelectionChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string | TreeTableSelectionKeysType",
+                            "description": "Selected node key."
+                        }
+                    ]
+                },
+                "TreeTableColumnResizeEndEvent": {
+                    "description": "Custom resize event.",
+                    "relatedProp": "onColumnResizeEnd",
+                    "props": [
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "HTMLElement",
+                            "description": "DOM element of the resized."
+                        },
+                        {
+                            "name": "column",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Column",
+                            "description": "Properties of the resized column."
+                        },
+                        {
+                            "name": "delta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Change in column width."
+                        }
+                    ]
+                },
+                "TreeTableColReorderEvent": {
+                    "description": "Custom column reorder event.",
+                    "relatedProp": "onColReorder",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DragEvent<HTMLElement>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "dragIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the dragged column."
+                        },
+                        {
+                            "name": "dropIndex",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the dropped column."
+                        },
+                        {
+                            "name": "columns",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactElement<any, string | JSXElementConstructor<any>>",
+                            "description": "Columns array after reorder."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TreeTablePassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableState"
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableContext"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTablePassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "loadingWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the loading wrapper's DOM element."
+                        },
+                        {
+                            "name": "loadingOverlay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the loading overlay's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "paginator",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PaginatorPassThroughOptions",
+                            "description": "Uses to pass attributes to the Paginator component."
+                        },
+                        {
+                            "name": "wrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the wrapper's DOM element."
+                        },
+                        {
+                            "name": "table",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableElement>>",
+                            "description": "Uses to pass attributes to the table's DOM element."
+                        },
+                        {
+                            "name": "thead",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the thead's DOM element."
+                        },
+                        {
+                            "name": "headerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the header row's DOM element."
+                        },
+                        {
+                            "name": "headerCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the header cell's DOM element."
+                        },
+                        {
+                            "name": "tbody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the tbody's DOM element."
+                        },
+                        {
+                            "name": "emptyMessage",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the empty message's DOM element."
+                        },
+                        {
+                            "name": "emptyMessageCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the empty message cell's DOM element."
+                        },
+                        {
+                            "name": "bodyCell",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableCellElement>>",
+                            "description": "Uses to pass attributes to the body cell's DOM element."
+                        },
+                        {
+                            "name": "tfoot",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableSectionElement>>",
+                            "description": "Uses to pass attributes to the tfoot's DOM element."
+                        },
+                        {
+                            "name": "footerRow",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
+                            "description": "Uses to pass attributes to the footer row's DOM element."
+                        },
+                        {
+                            "name": "footer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the footer's DOM element."
+                        },
+                        {
+                            "name": "resizeHelper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the resize helper's DOM element."
+                        },
+                        {
+                            "name": "rowToggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLButtonElement>>",
+                            "description": "Uses to pass attributes to the row toggler's DOM element."
+                        },
+                        {
+                            "name": "rowTogglerIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the row toggler icon's DOM element."
+                        },
+                        {
+                            "name": "columnResizer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the column resizer's DOM element."
+                        },
+                        {
+                            "name": "sortBadge",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the sort badge's DOM element."
+                        },
+                        {
+                            "name": "headerTitle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the header title's DOM element."
+                        },
+                        {
+                            "name": "checkboxWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the checkbox wrapper's DOM element."
+                        },
+                        {
+                            "name": "checkbox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the checkbox's DOM element."
+                        },
+                        {
+                            "name": "checkboxIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the checkbox icon's DOM element."
+                        },
+                        {
+                            "name": "filterInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputTextPassThroughOptions",
+                            "description": "Uses to pass attributes to the resize helper's DOM element."
+                        },
+                        {
+                            "name": "sortIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the sort icon label's DOM element."
+                        },
+                        {
+                            "name": "scrollableWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable wrapper's DOM element."
+                        },
+                        {
+                            "name": "scrollable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable's DOM element."
+                        },
+                        {
+                            "name": "scrollableHeader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable header's DOM element."
+                        },
+                        {
+                            "name": "scrollableHeaderBox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable header box's DOM element."
+                        },
+                        {
+                            "name": "scrollableHeaderTable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableElement>>",
+                            "description": "Uses to pass attributes to the scrollable header table's DOM element."
+                        },
+                        {
+                            "name": "scrollableBody",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable body's DOM element."
+                        },
+                        {
+                            "name": "scrollableBodyBox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable body box's DOM element."
+                        },
+                        {
+                            "name": "scrollableBodyTable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableElement>>",
+                            "description": "Uses to pass attributes to the scrollable body table's DOM element."
+                        },
+                        {
+                            "name": "scrollableFooter",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable footer's DOM element."
+                        },
+                        {
+                            "name": "scrollableFooterBox",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the scrollable footer box's DOM element."
+                        },
+                        {
+                            "name": "scrollableFooterTable",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLTableElement>>",
+                            "description": "Uses to pass attributes to the scrollable footer table's DOM element."
+                        },
+                        {
+                            "name": "editorKeyHelper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLAnchorElement>>",
+                            "description": "Uses to pass attributes to the editor key helper's DOM element."
+                        },
+                        {
+                            "name": "editorKeyHelperLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the editor key helper label's DOM element."
+                        },
+                        {
+                            "name": "hiddenInputWrapper",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the hidden input wrapper's DOM element."
+                        },
+                        {
+                            "name": "hiddenInput",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TreeTablePassThroughType<HTMLAttributes<HTMLInputElement>>",
+                            "description": "Uses to pass attributes to the hidden input's DOM element."
+                        },
+                        {
+                            "name": "row",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "RowPassThroughOptions",
+                            "description": "Used to pass attributes to the Row helper components."
+                        },
+                        {
+                            "name": "column",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ColumnPassThroughOptions",
+                            "description": "Used to pass attributes to the Column helper components."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableState": {
+                    "description": "Defines current inline state in TreeTable component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index of first record as a number."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current number of rows to display in new page as a number."
+                        },
+                        {
+                            "name": "sortField",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | string | Function",
+                            "description": "Current sort field."
+                        },
+                        {
+                            "name": "sortOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current order to sort the data by default."
+                        },
+                        {
+                            "name": "multiSortMeta",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableSortMeta[]",
+                            "description": "Current sortmeta objects to sort the data."
+                        },
+                        {
+                            "name": "columnOrder",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string[]",
+                            "description": "Current order of the columns."
+                        },
+                        {
+                            "name": "filters",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableFilterMeta",
+                            "description": "Current filters object."
+                        },
+                        {
+                            "name": "editing",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current editing as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableContext": {
+                    "description": "Defines current options in TreeTable component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current index state of the item."
+                        },
+                        {
+                            "name": "frozen",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current frozen state of the row as a boolean."
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current checked state of the column checkbox as a boolean."
+                        },
+                        {
+                            "name": "partialChecked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current partial checked state of the column checkbox as a boolean."
+                        },
+                        {
+                            "name": "selectable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current selectable state of the row as a boolean."
+                        },
+                        {
+                            "name": "scrollable",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current scrollable state of the row as a boolean."
+                        },
+                        {
+                            "name": "showGridlines",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Current showGridlines state of the row as a boolean."
+                        },
+                        {
+                            "name": "selected",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "x\nCurrent selected state of the row as a boolean."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableTogglerTemplateOptions": {
+                    "description": "Custom treetable toggler template options",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "containerClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the panels container."
+                        },
+                        {
+                            "name": "iconClassName",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Icon classname."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "JSX element to be used as the template options."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableProps",
+                            "description": "The props of Tree component"
+                        },
+                        {
+                            "name": "expanded",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the tree node is expanded or not."
+                        },
+                        {
+                            "name": "buttonStyle",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "description": "Button style for tree indentation"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "onClick",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "SyntheticEvent<Element, Event>",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on click."
+                        }
+                    ]
+                },
+                "TreeTableSelectionKeysType": {
+                    "description": "Custom selection keys type.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean | TreeTableCheckboxSelectionKeyType | undefined"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableCheckboxSelectionKeyType": {
+                    "description": "Custom treetable checkbox selection type",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the checkbox is checked or not."
+                        },
+                        {
+                            "name": "partialChecked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the checkbox is partially checked or not."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableSortMeta": {
+                    "description": "Custom treetable sort meta.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "field",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "The field to sort against."
+                        },
+                        {
+                            "name": "order",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | 0 | 1 | -1",
+                            "description": "Sort order as integer."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableFilterMetaData": {
+                    "description": "Custom treetable filter metadata.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Value to filter against."
+                        },
+                        {
+                            "name": "matchMode",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | \"endsWith\" | \"startsWith\" | \"custom\" | \"contains\" | \"in\" | \"equals\" | \"notEquals\" | \"notIn\" | \"lt\" | \"lte\" | \"gt\" | \"gte\"",
+                            "description": "Type of filter match."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableFilterMeta": {
+                    "description": "Custom treetable filter meta.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeTableFilterMetaData"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TreeTableRowMouseEvent": {
+                    "description": "Custom row mouse event.",
+                    "relatedProp": "onRowMouseEnter",
+                    "props": [
+                        {
+                            "name": "node",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TreeNode",
+                            "description": "Expanded node instance."
+                        },
+                        {
+                            "name": "originalEvent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "MouseEvent<HTMLElement, MouseEvent>",
+                            "description": "Browser event."
+                        },
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Clicked row data index"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "Omit<TreeTableEvent, \"originalEvent\">"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TreeTablePassThroughType": {
+                    "values": "PassThroughType<T, TreeTablePassThroughMethodOptions>"
+                },
+                "TreeTableExpandedKeysType": {
+                    "values": "{}",
+                    "description": "Custom expanded keys type."
+                }
+            }
+        }
+    },
+    "tristatecheckbox": {
+        "description": "TriStateCheckbox is used to select either \"true\", \"false\" or \"null\" as the value.\n\n[Live Demo](https://www.primereact.org/tristatecheckbox/)",
+        "components": {
+            "TriStateCheckbox": {
+                "description": "TriStateCheckbox is used to select either \"true\", \"false\" or \"null\" as the value.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "focus",
+                            "parameters": [],
+                            "returnType": "void",
+                            "description": "Used to focus the component."
+                        },
+                        {
+                            "name": "getElement",
+                            "parameters": [],
+                            "returnType": "null | HTMLDivElement",
+                            "description": "Used to get container element."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in TriStateCheckbox component. In addition to these, all properties of HTMLDivElement can be used in this component.",
+                    "values": [
+                        {
+                            "name": "autoFocus",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should automatically get focus on load."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TriStateCheckboxProps>",
+                            "default": "",
+                            "description": "Icon of the checkbox when checked."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the element value cannot be altered."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "readOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the value cannot be changed."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Content of the tooltip."
+                        },
+                        {
+                            "name": "tooltipOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipOptions",
+                            "default": "",
+                            "description": "Configuration of the tooltip, refer to the tooltip documentation for more information."
+                        },
+                        {
+                            "name": "uncheckIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<TriStateCheckboxProps>",
+                            "default": "",
+                            "description": "Icon of the checkbox when unchecked."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        },
+                        {
+                            "name": "value",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | boolean",
+                            "default": "",
+                            "description": "Value of the TriStateCheckbox."
+                        },
+                        {
+                            "name": "variant",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"filled\" | \"outlined\"",
+                            "default": "outlined",
+                            "description": "Specifies the input variant of the component."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "TriStateCheckboxChangeEvent",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change"
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "TriStateCheckboxChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onChange",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "SyntheticEvent<Element, Event>"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<boolean>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<boolean>"
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "TriStateCheckboxPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "TriStateCheckboxProps"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "TriStateCheckboxPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "box",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CheckboxPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Used to pass attributes to the box's DOM element."
+                        },
+                        {
+                            "name": "tooltip",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TooltipPassThroughOptions",
+                            "description": "Uses to pass attributes tooltip's DOM element."
+                        },
+                        {
+                            "name": "checkIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the check icon's DOM element."
+                        },
+                        {
+                            "name": "uncheckIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the uncheck icon's DOM element."
+                        },
+                        {
+                            "name": "srOnlyAria",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "TriStateCheckboxPassThroughType<HTMLAttributes<HTMLSpanElement>>",
+                            "description": "Uses to pass attributes to the sr only aria's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "TriStateCheckboxPassThroughType": {
+                    "values": "PassThroughType<T, TriStateCheckboxPassThroughMethodOptions>"
+                }
+            }
+        }
+    },
+    "ts-helpers": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "FormTarget": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<T>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FormBooleanTarget": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "id",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "FormEvent": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "E"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Nullable<T>"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormTarget<T>"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "stopPropagation",
+                            "parameters": [],
+                            "returnType": "void"
+                        },
+                        {
+                            "name": "preventDefault",
+                            "parameters": [],
+                            "returnType": "void"
+                        }
+                    ],
+                    "extendedBy": "AutoCompleteChangeEvent,CheckboxChangeEvent,ChipsChangeEvent,ColorPickerChangeEvent,DropdownChangeEvent,InputMaskChangeEvent,InputNumberValueChangeEvent,RadioButtonChangeEvent,RatingChangeEvent,SelectButtonChangeEvent,TreeSelectChangeEvent,TriStateCheckboxChangeEvent"
+                },
+                "FormBooleanEvent": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "originalEvent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "E"
+                        },
+                        {
+                            "name": "value",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean"
+                        },
+                        {
+                            "name": "target",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "FormBooleanTarget"
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "stopPropagation",
+                            "parameters": [],
+                            "returnType": "void"
+                        },
+                        {
+                            "name": "preventDefault",
+                            "parameters": [],
+                            "returnType": "void"
+                        }
+                    ],
+                    "extendedBy": "InputSwitchChangeEvent"
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "Booleanish": {
+                    "values": "boolean | \"true\" | \"false\""
+                },
+                "Numberish": {
+                    "values": "number | string"
+                },
+                "Nullable": {
+                    "values": "T | null | undefined"
+                }
+            }
+        }
+    },
+    "utils": {
+        "description": "",
+        "functions": {
+            "description": "Defines the custom functions used by the module.",
+            "values": {
+                "classNames": {
+                    "name": "classNames",
+                    "parameters": [
+                        {
+                            "name": "args",
+                            "type": "any[]"
+                        }
+                    ],
+                    "returnType": "string | undefined"
+                },
+                "mergeProps": {
+                    "name": "mergeProps",
+                    "parameters": [
+                        {
+                            "name": "args",
+                            "type": "object[]",
+                            "description": "the array of object properties to merge"
+                        },
+                        {
+                            "name": "options",
+                            "type": "PassThroughOptions",
+                            "description": "either empty or could contain a custom merge function like TailwindMerge"
+                        }
+                    ],
+                    "returnType": "object | undefined",
+                    "description": "Merges properties together taking an Array of props and merging into one single set of\nproperties. The options can contain a \"classNameMergeFunction\" which can be something\nlike Tailwind Merge for properly merging Tailwind classes."
+                },
+                "EventBus": {
+                    "name": "EventBus",
+                    "parameters": [],
+                    "returnType": "Object"
+                },
+                "mask": {
+                    "name": "mask",
+                    "parameters": [
+                        {
+                            "name": "el",
+                            "type": "HTMLElement"
+                        },
+                        {
+                            "name": "options",
+                            "type": "object"
+                        }
+                    ],
+                    "returnType": "Object"
+                },
+                "UniqueComponentId": {
+                    "name": "UniqueComponentId",
+                    "parameters": [
+                        {
+                            "name": "prefix",
+                            "type": "string",
+                            "description": "the optional string prefix of the id"
+                        }
+                    ],
+                    "returnType": "string",
+                    "description": "Generate a unique id for components for a page."
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "IconOptions": {
+                    "values": "AdditionalProps & Object",
+                    "description": "Icon options passed to any icon."
+                },
+                "IconType": {
+                    "values": "React.ReactNode | Function"
+                },
+                "TemplateType": {
+                    "values": "React.ReactNode | Function"
+                },
+                "PassThroughType": {
+                    "values": "T | Function | null | undefined | Object"
+                }
+            }
+        }
+    },
+    "virtualscroller": {
+        "description": "VirtualScroller is a performant approach to handle huge data efficiently.\n\n[Live Demo](https://www.primereact.org/virtualscroller/)",
+        "components": {
+            "VirtualScroller": {
+                "description": "VirtualScroller is a performant approach to handle huge data efficiently.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": [
+                        {
+                            "name": "getElementRef",
+                            "parameters": [],
+                            "returnType": "Ref<HTMLDivElement>",
+                            "description": "Returns the reference of virtualScroller's container."
+                        },
+                        {
+                            "name": "getRenderedRange",
+                            "parameters": [],
+                            "returnType": "VirtualScrollerRenderedRange",
+                            "description": "Returns the range of items added to the DOM."
+                        },
+                        {
+                            "name": "scrollInView",
+                            "parameters": [
+                                {
+                                    "name": "index",
+                                    "type": "number | number[]",
+                                    "description": "Index of item according to orientation mode."
+                                },
+                                {
+                                    "name": "to",
+                                    "type": "\"to-start\" | \"to-end\"",
+                                    "description": "Defines the location of the item in view, valid values are 'to-start' and 'to-end'."
+                                },
+                                {
+                                    "name": "behavior",
+                                    "type": "\"auto\" | \"smooth\"",
+                                    "description": "Behavior of scroll, valid values are 'auto' and 'smooth'"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "It is used to move the specified index into the view. It is a method that will usually be needed when keyboard support is added to the virtualScroller component."
+                        },
+                        {
+                            "name": "scrollTo",
+                            "parameters": [
+                                {
+                                    "name": "options",
+                                    "type": "VirtualScrollerOptionsType",
+                                    "description": "Custom virtual scroller options."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Scroll to move to a specific position."
+                        },
+                        {
+                            "name": "scrollToIndex",
+                            "parameters": [
+                                {
+                                    "name": "index",
+                                    "type": "number | number[]",
+                                    "description": "Index of item according to orientation mode."
+                                },
+                                {
+                                    "name": "behavior",
+                                    "type": "\"auto\" | \"smooth\"",
+                                    "description": "Behavior of scroll, valid values are 'auto' and 'smooth'"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Scroll to move to a specific item."
+                        }
+                    ]
+                },
+                "props": {
+                    "description": "Defines valid properties in VirtualScroller component.",
+                    "values": [
+                        {
+                            "name": "appendOnly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash."
+                        },
+                        {
+                            "name": "autoSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to dynamically change the height or width of scrollable container."
+                        },
+                        {
+                            "name": "children",
+                            "optional": true,
+                            "readonly": true,
+                            "type": "ReactNode",
+                            "default": "",
+                            "description": "Used to get the child elements of the component."
+                        },
+                        {
+                            "name": "className",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Style class of the component."
+                        },
+                        {
+                            "name": "columns",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Columns of the virtual scroller for vertical option."
+                        },
+                        {
+                            "name": "contentTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of item's wrapper element."
+                        },
+                        {
+                            "name": "delay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Delay in scroll before new data is loaded."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "If disabled, the VirtualScroller feature is eliminated and the content is displayed directly."
+                        },
+                        {
+                            "name": "id",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Unique identifier of the element."
+                        },
+                        {
+                            "name": "inline",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, positions the content as inline."
+                        },
+                        {
+                            "name": "items",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "null | any[] | any[][]",
+                            "default": "",
+                            "description": "An array of objects to display."
+                        },
+                        {
+                            "name": "itemSize",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number | number[]",
+                            "default": "",
+                            "description": "The height/width of item according to orientation."
+                        },
+                        {
+                            "name": "itemTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of item."
+                        },
+                        {
+                            "name": "lazy",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Defines if data is loaded and interacted with in lazy manner."
+                        },
+                        {
+                            "name": "loaderDisabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Used to implement a custom loader instead of using the loader feature in the VirtualScroller."
+                        },
+                        {
+                            "name": "loaderIconTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of loader's icon.",
+                            "deprecated": "Since v9.2.3, use "
+                        },
+                        {
+                            "name": "loading",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether the data is loaded."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "IconType<VirtualScrollerProps>",
+                            "default": "",
+                            "description": "The icon to show while indicating data load is in progress."
+                        },
+                        {
+                            "name": "loadingTemplate",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "default": "",
+                            "description": "The template of loader."
+                        },
+                        {
+                            "name": "numToleratedItems",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. Default value is half the number of items shown in the view."
+                        },
+                        {
+                            "name": "orientation",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"both\" | \"horizontal\" | \"vertical\"",
+                            "default": "'vertical'",
+                            "description": "The orientation of scrollbar, valid values are 'vertical', 'horizontal' and 'both'."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "resizeDelay",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "10",
+                            "description": "Delay after window's resize finishes."
+                        },
+                        {
+                            "name": "scrollHeight",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Height of the scroll viewport."
+                        },
+                        {
+                            "name": "scrollWidth",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Width of the scroll viewport."
+                        },
+                        {
+                            "name": "showLoader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Whether to show loader."
+                        },
+                        {
+                            "name": "showSpacer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller."
+                        },
+                        {
+                            "name": "step",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Used to specify how many items to load in each load method in lazy mode."
+                        },
+                        {
+                            "name": "style",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CSSProperties",
+                            "default": "",
+                            "description": "Inline style of the component."
+                        },
+                        {
+                            "name": "tabIndex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "0",
+                            "description": "Index of the element in tabbing order."
+                        }
+                    ]
+                },
+                "callbacks": {
+                    "description": "Defines callbacks that determine the behavior of the component based on a given condition or report the actions that the component takes.",
+                    "values": [
+                        {
+                            "name": "onLazyLoad",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "VirtualScrollerLazyEvent",
+                                    "description": "Custom lazy load event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke in lazy mode to load new data."
+                        },
+                        {
+                            "name": "onScroll",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "UIEvent<HTMLElement, UIEvent>",
+                                    "description": "Browser event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when scroll position changes."
+                        },
+                        {
+                            "name": "onScrollIndexChange",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "VirtualScrollerChangeEvent",
+                                    "description": "Custom change event"
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when scroll position and item's range in view changes."
+                        }
+                    ]
+                }
+            }
+        },
+        "events": {
+            "description": "Defines the custom events used by the component's callbacks.",
+            "values": {
+                "VirtualScrollerChangeEvent": {
+                    "description": "Custom change event.",
+                    "relatedProp": "onScrollIndexChange",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | VirtualScrollerState",
+                            "description": "First index of the new data range to be loaded."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | VirtualScrollerState",
+                            "description": "Last index of the new data range to be loaded."
+                        }
+                    ],
+                    "extendedBy": "VirtualScrollerLazyEvent"
+                },
+                "VirtualScrollerLazyEvent": {
+                    "description": "Custom lazy load event.",
+                    "relatedProp": "onLazyLoad",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | VirtualScrollerState",
+                            "description": "First index of the new data range to be loaded."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | VirtualScrollerState",
+                            "description": "Last index of the new data range to be loaded."
+                        }
+                    ]
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "values": {
+                "VirtualScrollerPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps"
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerState"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "VirtualScrollerPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "loader",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the loader's DOM element."
+                        },
+                        {
+                            "name": "loadingIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
+                            "description": "Uses to pass attributes to the loading icon's DOM element."
+                        },
+                        {
+                            "name": "spacer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "VirtualScrollerPassThroughType<HTMLAttributes<HTMLDivElement>>",
+                            "description": "Uses to pass attributes to the spacer's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "description": "Used to manage all lifecycle hooks"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "VirtualScrollerState": {
+                    "description": "Defines current inline state in VirtualScroller component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "First index of the new data range to be loaded as a number."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Last index of the new data range to be loaded as a number."
+                        },
+                        {
+                            "name": "page",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the first item as a number."
+                        },
+                        {
+                            "name": "numItemsInViewport",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Visible item count in the viewport as a number."
+                        },
+                        {
+                            "name": "numToleratedItems",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Additional elements to add to the DOM outside of the view as a number."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Current loading state as a boolean."
+                        },
+                        {
+                            "name": "loaderArr",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Loadable items array."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of rows to be rendered."
+                        },
+                        {
+                            "name": "cols",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Number of columns to be rendered."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "VirtualScrollerOptionsType": {
+                    "description": "Custom virtual scroller options type.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "left",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Left position of scroll."
+                        },
+                        {
+                            "name": "top",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Top position of scroll"
+                        },
+                        {
+                            "name": "behavior",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "\"auto\" | \"smooth\"",
+                            "description": "Behavior of scroll, valid values are 'auto' and 'smooth'"
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "VirtualScrollerViewportRenderedRange": {
+                    "description": "Viewport rendered range.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The first number of the current viewport."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "The last number of the current viewport."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "VirtualScrollerRenderedRange": {
+                    "description": "Virtual scroller rendered range.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "First index of the new data range to be rendered."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Last index of the new data range to be rendered."
+                        },
+                        {
+                            "name": "viewport",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerViewportRenderedRange",
+                            "description": "Viewport of the rendered range."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "VirtualScrollerTemplateOptions": {
+                    "description": "Custom template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the item."
+                        },
+                        {
+                            "name": "count",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total numbers of items."
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether this is the first item."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether this is the last item."
+                        },
+                        {
+                            "name": "even",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the index is even."
+                        },
+                        {
+                            "name": "odd",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the index is odd."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "description": "The props of the virtual scroller."
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedBy": "VirtualScrollerLoadingTemplateOptions"
+                },
+                "VirtualScrollerLoadingTemplateOptions": {
+                    "description": "Custom template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "index",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Index of the item."
+                        },
+                        {
+                            "name": "count",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total numbers of items."
+                        },
+                        {
+                            "name": "first",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether this is the first item."
+                        },
+                        {
+                            "name": "last",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether this is the last item."
+                        },
+                        {
+                            "name": "even",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the index is even."
+                        },
+                        {
+                            "name": "odd",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the index is odd."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "description": "The props of the virtual scroller."
+                        },
+                        {
+                            "name": "numCols",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number",
+                            "description": "Total number of columns in a row in 'both' orientation mode in view."
+                        },
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "callbacks": [],
+                    "extendedTypes": "VirtualScrollerTemplateOptions"
+                },
+                "VirtualScrollerLoaderIconTemplateOptions": {
+                    "description": "Custom loader icon template props.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the loader icon."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "The JSX element that represents the loader icon."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "description": "The props of the VirtualScroller component."
+                        }
+                    ],
+                    "callbacks": []
+                },
+                "VirtualScrollerContentTemplateOptions": {
+                    "description": "Custom content template options.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "className",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Style class of the wrapper element."
+                        },
+                        {
+                            "name": "contentRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Ref of wrapper element."
+                        },
+                        {
+                            "name": "spacerRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Ref of spacer element."
+                        },
+                        {
+                            "name": "stickyRef",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Ref of sticky element in content."
+                        },
+                        {
+                            "name": "items",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | null | any[] | any[][]",
+                            "description": "Loaded data."
+                        },
+                        {
+                            "name": "children",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "description": "Items of wrapper element."
+                        },
+                        {
+                            "name": "element",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "Element",
+                            "description": "Default wrapper element."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "VirtualScrollerProps",
+                            "description": "Props of VirtualScroller component."
+                        },
+                        {
+                            "name": "loading",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the data is loaded."
+                        },
+                        {
+                            "name": "loadingTemplate",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ReactNode | Function",
+                            "description": "Template of loading item."
+                        },
+                        {
+                            "name": "itemSize",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "number | number[]",
+                            "description": "The height/width of item according to orientation."
+                        },
+                        {
+                            "name": "rows",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Rows of the virtual scroller."
+                        },
+                        {
+                            "name": "columns",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any[]",
+                            "description": "Columns of the virtual scroller."
+                        },
+                        {
+                            "name": "vertical",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the orientation is vertical."
+                        },
+                        {
+                            "name": "horizontal",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the orientation is horizontal."
+                        },
+                        {
+                            "name": "both",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "description": "Whether the orientation is both."
+                        }
+                    ],
+                    "callbacks": [
+                        {
+                            "name": "getItemOptions",
+                            "parameters": [
+                                {
+                                    "name": "index",
+                                    "optional": false,
+                                    "type": "number",
+                                    "description": "Index of the template item."
+                                }
+                            ],
+                            "returnType": "VirtualScrollerTemplateOptions",
+                            "description": "Information of any item."
+                        },
+                        {
+                            "name": "getLoaderOptions",
+                            "parameters": [
+                                {
+                                    "name": "index",
+                                    "optional": false,
+                                    "type": "number",
+                                    "description": "Index of the item."
+                                },
+                                {
+                                    "name": "ext",
+                                    "optional": true,
+                                    "type": "object",
+                                    "description": "The extra options to pass to the content."
+                                }
+                            ],
+                            "returnType": "VirtualScrollerLoadingTemplateOptions",
+                            "description": "Information of any item during the loading."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "VirtualScrollerPassThroughType": {
+                    "values": "PassThroughType<T, VirtualScrollerPassThroughMethodOptions>"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/doc/common/codeeditor/index.js b/components/doc/common/codeeditor/index.js
new file mode 100644
index 0000000000..2820cac576
--- /dev/null
+++ b/components/doc/common/codeeditor/index.js
@@ -0,0 +1,102 @@
+import sdk from '@stackblitz/sdk';
+import { getVite } from './templates';
+
+const useCodeSandbox = (props) => {
+    const getSandboxParameters = (sourceType) => {
+        const sandboxDependencies = {
+            vite: '^4.0.0',
+            '@vitejs/plugin-react': '^4.0.0'
+        };
+        const { files, dependencies, sourceFileName } = getVite({ dependencies: sandboxDependencies, ...props }, sourceType);
+
+        files['sandbox.config.json'] = {
+            content: {
+                infiniteLoopProtection: false,
+                container: {
+                    node: '16'
+                }
+            }
+        };
+
+        return { files, dependencies, sourceFileName };
+    };
+
+    return (sourceType, errorCallback) => {
+        const sandboxParameters = getSandboxParameters(sourceType);
+
+        if (!sandboxParameters) {
+            errorCallback && errorCallback({ summary: 'Not Available', detail: 'That code sandbox demonstration is not available!' });
+
+            return;
+        }
+
+        fetch('http://github.com/service/https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json'
+            },
+            body: JSON.stringify(sandboxParameters)
+        })
+            .then((response) => response.json())
+            .then((data) => window.open(`https://codesandbox.io/s/${data.sandbox_id}`, '_blank'));
+    };
+};
+
+export const useStackBlitz = (props) => {
+    const getStackBlitzParameters = (sourceType) => getVite(props, sourceType);
+
+    return (sourceType, errorCallback) => {
+        const stackBlitzParameters = getStackBlitzParameters(sourceType);
+
+        if (!stackBlitzParameters) {
+            errorCallback && errorCallback({ summary: 'Not Available', detail: 'That code sandbox demonstration is not available!' });
+
+            return;
+        }
+
+        let files = {};
+
+        Object.entries(stackBlitzParameters.files).forEach(([k, v]) => (files[`${k}`] = typeof v.content === 'object' ? JSON.stringify(v.content, null, 2) : v.content));
+
+        const primereactproject = {
+            title: props.title || 'PrimeReact Demo',
+            template: 'node',
+            description: props.embedded
+                ? "This example demonstrates how to style components with Tailwind CSS using PrimeReact's unstyled property. As mentioned in the PrimeReact documentation, components can be styled or have HTML attributes added using a global or inline pass through approach. In this example, we utilize the global PT approach with Tailwind CSS."
+                : '**' +
+                  (props.description || '') +
+                  '**\n PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.',
+            dependencies: stackBlitzParameters.dependencies,
+            files
+        };
+
+        if (props.embedded) {
+            sdk.embedProject('embed', primereactproject, {
+                openFile: 'src/App.jsx',
+                view: 'default',
+                height: '800px'
+            });
+        } else {
+            sdk.openProject(primereactproject, {
+                newWindow: true,
+                openFile: [stackBlitzParameters.sourceFileName]
+            });
+        }
+    };
+};
+
+/**
+ * @todo Write the documentation.
+ * @param {string} props.template - valid values are 'vite'.
+ * @returns
+ */
+export const useCodeEditor = (props) => {
+    const openCodeSandbox = useCodeSandbox(props);
+    const openStackBlitz = useStackBlitz(props);
+
+    return {
+        openCodeSandbox,
+        openStackBlitz
+    };
+};
diff --git a/components/doc/common/codeeditor/services.js b/components/doc/common/codeeditor/services.js
new file mode 100644
index 0000000000..4b393aa502
--- /dev/null
+++ b/components/doc/common/codeeditor/services.js
@@ -0,0 +1,11108 @@
+const services = {
+    CarService: `export const CarService = {
+    brands: ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'],
+
+    colors: ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'],
+
+    generateCar(id) {
+        return {
+            id,
+            vin: this.generateVin(),
+            brand: this.generateBrand(),
+            color: this.generateColor(),
+            year: this.generateYear()
+        };
+    },
+
+    generateVin() {
+        let text = '';
+        let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < 5; i++) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+
+        return text;
+    },
+
+    generateBrand() {
+        return this.brands[Math.floor(Math.random() * Math.floor(10))];
+    },
+
+    generateColor() {
+        return this.colors[Math.floor(Math.random() * Math.floor(7))];
+    },
+
+    generateYear() {
+        return 2000 + Math.floor(Math.random() * Math.floor(19));
+    }
+};
+    `,
+    CountryService: `export const CountryService = {
+    getData() {
+        return [
+            { name: 'Afghanistan', code: 'AF' },
+            { name: 'Albania', code: 'AL' },
+            { name: 'Algeria', code: 'DZ' },
+            { name: 'American Samoa', code: 'AS' },
+            { name: 'Andorra', code: 'AD' },
+            { name: 'Angola', code: 'AO' },
+            { name: 'Anguilla', code: 'AI' },
+            { name: 'Antarctica', code: 'AQ' },
+            { name: 'Antigua and Barbuda', code: 'AG' },
+            { name: 'Argentina', code: 'AR' },
+            { name: 'Armenia', code: 'AM' },
+            { name: 'Aruba', code: 'AW' },
+            { name: 'Australia', code: 'AU' },
+            { name: 'Austria', code: 'AT' },
+            { name: 'Azerbaijan', code: 'AZ' },
+            { name: 'Bahamas', code: 'BS' },
+            { name: 'Bahrain', code: 'BH' },
+            { name: 'Bangladesh', code: 'BD' },
+            { name: 'Barbados', code: 'BB' },
+            { name: 'Belarus', code: 'BY' },
+            { name: 'Belgium', code: 'BE' },
+            { name: 'Belize', code: 'BZ' },
+            { name: 'Benin', code: 'BJ' },
+            { name: 'Bermuda', code: 'BM' },
+            { name: 'Bhutan', code: 'BT' },
+            { name: 'Bolivia', code: 'BO' },
+            { name: 'Bosnia and Herzegovina', code: 'BA' },
+            { name: 'Botswana', code: 'BW' },
+            { name: 'Bouvet Island', code: 'BV' },
+            { name: 'Brazil', code: 'BR' },
+            { name: 'British Indian Ocean Territory', code: 'IO' },
+            { name: 'Brunei Darussalam', code: 'BN' },
+            { name: 'Bulgaria', code: 'BG' },
+            { name: 'Burkina Faso', code: 'BF' },
+            { name: 'Burundi', code: 'BI' },
+            { name: 'Cambodia', code: 'KH' },
+            { name: 'Cameroon', code: 'CM' },
+            { name: 'Canada', code: 'CA' },
+            { name: 'Cape Verde', code: 'CV' },
+            { name: 'Cayman Islands', code: 'KY' },
+            { name: 'Central African Republic', code: 'CF' },
+            { name: 'Chad', code: 'TD' },
+            { name: 'Chile', code: 'CL' },
+            { name: 'China', code: 'CN' },
+            { name: 'Christmas Island', code: 'CX' },
+            { name: 'Cocos (Keeling) Islands', code: 'CC' },
+            { name: 'Colombia', code: 'CO' },
+            { name: 'Comoros', code: 'KM' },
+            { name: 'Congo', code: 'CG' },
+            { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+            { name: 'Cook Islands', code: 'CK' },
+            { name: 'Costa Rica', code: 'CR' },
+            { name: 'Cote D"Ivoire', code: 'CI' },
+            { name: 'Croatia', code: 'HR' },
+            { name: 'Cuba', code: 'CU' },
+            { name: 'Cyprus', code: 'CY' },
+            { name: 'Czech Republic', code: 'CZ' },
+            { name: 'Denmark', code: 'DK' },
+            { name: 'Djibouti', code: 'DJ' },
+            { name: 'Dominica', code: 'DM' },
+            { name: 'Dominican Republic', code: 'DO' },
+            { name: 'Ecuador', code: 'EC' },
+            { name: 'Egypt', code: 'EG' },
+            { name: 'El Salvador', code: 'SV' },
+            { name: 'Equatorial Guinea', code: 'GQ' },
+            { name: 'Eritrea', code: 'ER' },
+            { name: 'Estonia', code: 'EE' },
+            { name: 'Ethiopia', code: 'ET' },
+            { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+            { name: 'Faroe Islands', code: 'FO' },
+            { name: 'Fiji', code: 'FJ' },
+            { name: 'Finland', code: 'FI' },
+            { name: 'France', code: 'FR' },
+            { name: 'French Guiana', code: 'GF' },
+            { name: 'French Polynesia', code: 'PF' },
+            { name: 'French Southern Territories', code: 'TF' },
+            { name: 'Gabon', code: 'GA' },
+            { name: 'Gambia', code: 'GM' },
+            { name: 'Georgia', code: 'GE' },
+            { name: 'Germany', code: 'DE' },
+            { name: 'Ghana', code: 'GH' },
+            { name: 'Gibraltar', code: 'GI' },
+            { name: 'Greece', code: 'GR' },
+            { name: 'Greenland', code: 'GL' },
+            { name: 'Grenada', code: 'GD' },
+            { name: 'Guadeloupe', code: 'GP' },
+            { name: 'Guam', code: 'GU' },
+            { name: 'Guatemala', code: 'GT' },
+            { name: 'Guernsey', code: 'GG' },
+            { name: 'Guinea', code: 'GN' },
+            { name: 'Guinea-Bissau', code: 'GW' },
+            { name: 'Guyana', code: 'GY' },
+            { name: 'Haiti', code: 'HT' },
+            { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+            { name: 'Holy See (Vatican City State)', code: 'VA' },
+            { name: 'Honduras', code: 'HN' },
+            { name: 'Hong Kong', code: 'HK' },
+            { name: 'Hungary', code: 'HU' },
+            { name: 'Iceland', code: 'IS' },
+            { name: 'India', code: 'IN' },
+            { name: 'Indonesia', code: 'ID' },
+            { name: 'Iran, Islamic Republic Of', code: 'IR' },
+            { name: 'Iraq', code: 'IQ' },
+            { name: 'Ireland', code: 'IE' },
+            { name: 'Isle of Man', code: 'IM' },
+            { name: 'Israel', code: 'IL' },
+            { name: 'Italy', code: 'IT' },
+            { name: 'Jamaica', code: 'JM' },
+            { name: 'Japan', code: 'JP' },
+            { name: 'Jersey', code: 'JE' },
+            { name: 'Jordan', code: 'JO' },
+            { name: 'Kazakhstan', code: 'KZ' },
+            { name: 'Kenya', code: 'KE' },
+            { name: 'Kiribati', code: 'KI' },
+            { name: 'Korea, Democratic People"S Republic of', code: 'KP' },
+            { name: 'Korea, Republic of', code: 'KR' },
+            { name: 'Kuwait', code: 'KW' },
+            { name: 'Kyrgyzstan', code: 'KG' },
+            { name: 'Lao People"S Democratic Republic', code: 'LA' },
+            { name: 'Latvia', code: 'LV' },
+            { name: 'Lebanon', code: 'LB' },
+            { name: 'Lesotho', code: 'LS' },
+            { name: 'Liberia', code: 'LR' },
+            { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+            { name: 'Liechtenstein', code: 'LI' },
+            { name: 'Lithuania', code: 'LT' },
+            { name: 'Luxembourg', code: 'LU' },
+            { name: 'Macao', code: 'MO' },
+            { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+            { name: 'Madagascar', code: 'MG' },
+            { name: 'Malawi', code: 'MW' },
+            { name: 'Malaysia', code: 'MY' },
+            { name: 'Maldives', code: 'MV' },
+            { name: 'Mali', code: 'ML' },
+            { name: 'Malta', code: 'MT' },
+            { name: 'Marshall Islands', code: 'MH' },
+            { name: 'Martinique', code: 'MQ' },
+            { name: 'Mauritania', code: 'MR' },
+            { name: 'Mauritius', code: 'MU' },
+            { name: 'Mayotte', code: 'YT' },
+            { name: 'Mexico', code: 'MX' },
+            { name: 'Micronesia, Federated States of', code: 'FM' },
+            { name: 'Moldova, Republic of', code: 'MD' },
+            { name: 'Monaco', code: 'MC' },
+            { name: 'Mongolia', code: 'MN' },
+            { name: 'Montserrat', code: 'MS' },
+            { name: 'Morocco', code: 'MA' },
+            { name: 'Mozambique', code: 'MZ' },
+            { name: 'Myanmar', code: 'MM' },
+            { name: 'Namibia', code: 'NA' },
+            { name: 'Nauru', code: 'NR' },
+            { name: 'Nepal', code: 'NP' },
+            { name: 'Netherlands', code: 'NL' },
+            { name: 'Netherlands Antilles', code: 'AN' },
+            { name: 'New Caledonia', code: 'NC' },
+            { name: 'New Zealand', code: 'NZ' },
+            { name: 'Nicaragua', code: 'NI' },
+            { name: 'Niger', code: 'NE' },
+            { name: 'Nigeria', code: 'NG' },
+            { name: 'Niue', code: 'NU' },
+            { name: 'Norfolk Island', code: 'NF' },
+            { name: 'Northern Mariana Islands', code: 'MP' },
+            { name: 'Norway', code: 'NO' },
+            { name: 'Oman', code: 'OM' },
+            { name: 'Pakistan', code: 'PK' },
+            { name: 'Palau', code: 'PW' },
+            { name: 'Palestinian Territory, Occupied', code: 'PS' },
+            { name: 'Panama', code: 'PA' },
+            { name: 'Papua New Guinea', code: 'PG' },
+            { name: 'Paraguay', code: 'PY' },
+            { name: 'Peru', code: 'PE' },
+            { name: 'Philippines', code: 'PH' },
+            { name: 'Pitcairn', code: 'PN' },
+            { name: 'Poland', code: 'PL' },
+            { name: 'Portugal', code: 'PT' },
+            { name: 'Puerto Rico', code: 'PR' },
+            { name: 'Qatar', code: 'QA' },
+            { name: 'Reunion', code: 'RE' },
+            { name: 'Romania', code: 'RO' },
+            { name: 'Russian Federation', code: 'RU' },
+            { name: 'RWANDA', code: 'RW' },
+            { name: 'Saint Helena', code: 'SH' },
+            { name: 'Saint Kitts and Nevis', code: 'KN' },
+            { name: 'Saint Lucia', code: 'LC' },
+            { name: 'Saint Pierre and Miquelon', code: 'PM' },
+            { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+            { name: 'Samoa', code: 'WS' },
+            { name: 'San Marino', code: 'SM' },
+            { name: 'Sao Tome and Principe', code: 'ST' },
+            { name: 'Saudi Arabia', code: 'SA' },
+            { name: 'Senegal', code: 'SN' },
+            { name: 'Serbia and Montenegro', code: 'CS' },
+            { name: 'Seychelles', code: 'SC' },
+            { name: 'Sierra Leone', code: 'SL' },
+            { name: 'Singapore', code: 'SG' },
+            { name: 'Slovakia', code: 'SK' },
+            { name: 'Slovenia', code: 'SI' },
+            { name: 'Solomon Islands', code: 'SB' },
+            { name: 'Somalia', code: 'SO' },
+            { name: 'South Africa', code: 'ZA' },
+            { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+            { name: 'Spain', code: 'ES' },
+            { name: 'Sri Lanka', code: 'LK' },
+            { name: 'Sudan', code: 'SD' },
+            { name: 'Suriname', code: 'SR' },
+            { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+            { name: 'Swaziland', code: 'SZ' },
+            { name: 'Sweden', code: 'SE' },
+            { name: 'Switzerland', code: 'CH' },
+            { name: 'Syrian Arab Republic', code: 'SY' },
+            { name: 'Taiwan, Province of China', code: 'TW' },
+            { name: 'Tajikistan', code: 'TJ' },
+            { name: 'Tanzania, United Republic of', code: 'TZ' },
+            { name: 'Thailand', code: 'TH' },
+            { name: 'Timor-Leste', code: 'TL' },
+            { name: 'Togo', code: 'TG' },
+            { name: 'Tokelau', code: 'TK' },
+            { name: 'Tonga', code: 'TO' },
+            { name: 'Trinidad and Tobago', code: 'TT' },
+            { name: 'Tunisia', code: 'TN' },
+            { name: 'Turkey', code: 'TR' },
+            { name: 'Turkmenistan', code: 'TM' },
+            { name: 'Turks and Caicos Islands', code: 'TC' },
+            { name: 'Tuvalu', code: 'TV' },
+            { name: 'Uganda', code: 'UG' },
+            { name: 'Ukraine', code: 'UA' },
+            { name: 'United Arab Emirates', code: 'AE' },
+            { name: 'United Kingdom', code: 'GB' },
+            { name: 'United States', code: 'US' },
+            { name: 'United States Minor Outlying Islands', code: 'UM' },
+            { name: 'Uruguay', code: 'UY' },
+            { name: 'Uzbekistan', code: 'UZ' },
+            { name: 'Vanuatu', code: 'VU' },
+            { name: 'Venezuela', code: 'VE' },
+            { name: 'Viet Nam', code: 'VN' },
+            { name: 'Virgin Islands, British', code: 'VG' },
+            { name: 'Virgin Islands, U.S.', code: 'VI' },
+            { name: 'Wallis and Futuna', code: 'WF' },
+            { name: 'Western Sahara', code: 'EH' },
+            { name: 'Yemen', code: 'YE' },
+            { name: 'Zambia', code: 'ZM' },
+            { name: 'Zimbabwe', code: 'ZW' }
+        ];
+    },
+
+    getCountries() {
+        return Promise.resolve(this.getData());
+    }
+};
+    `,
+    CustomerService: `export const CustomerService = {
+        getData() {
+            return [
+                {
+                    id: 1000,
+                    name: 'James Butt',
+                    country: {
+                        name: 'Algeria',
+                        code: 'dz'
+                    },
+                    company: 'Benton, John B Jr',
+                    date: '2015-09-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 17,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 70663
+                },
+                {
+                    id: 1001,
+                    name: 'Josephine Darakjy',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Chanay, Jeffrey A Esq',
+                    date: '2019-02-09',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82429
+                },
+                {
+                    id: 1002,
+                    name: 'Art Venere',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Chemel, James L Cpa',
+                    date: '2017-05-13',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 63,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 28334
+                },
+                {
+                    id: 1003,
+                    name: 'Lenna Paprocki',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Feltz Printing Service',
+                    date: '2020-09-15',
+                    status: 'new',
+                    verified: false,
+                    activity: 37,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 88521
+                },
+                {
+                    id: 1004,
+                    name: 'Donette Foller',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Printing Dimensions',
+                    date: '2016-05-20',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 93905
+                },
+                {
+                    id: 1005,
+                    name: 'Simona Morasca',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Chapman, Ross E Esq',
+                    date: '2018-02-16',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 68,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 50041
+                },
+                {
+                    id: 1006,
+                    name: 'Mitsue Tollner',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Morlong Associates',
+                    date: '2018-02-19',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 58706
+                },
+                {
+                    id: 1007,
+                    name: 'Leota Dilliard',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Commercial Press',
+                    date: '2019-08-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 26640
+                },
+                {
+                    id: 1008,
+                    name: 'Sage Wieser',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Truhlar And Truhlar Attys',
+                    date: '2018-11-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 65369
+                },
+                {
+                    id: 1009,
+                    name: 'Kris Marrier',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'King, Christopher A Esq',
+                    date: '2015-07-07',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 63451
+                },
+                {
+                    id: 1010,
+                    name: 'Minna Amigon',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Dorl, James J Esq',
+                    date: '2018-11-07',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 38,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 71169
+                },
+                {
+                    id: 1011,
+                    name: 'Abel Maclead',
+                    country: {
+                        name: 'Singapore',
+                        code: 'sg'
+                    },
+                    company: 'Rangoni Of Florence',
+                    date: '2017-03-11',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 87,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 96842
+                },
+                {
+                    id: 1012,
+                    name: 'Kiley Caldarera',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Feiner Bros',
+                    date: '2015-10-20',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 80,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 92734
+                },
+                {
+                    id: 1013,
+                    name: 'Graciela Ruta',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Buckley Miller & Wright',
+                    date: '2016-07-25',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 59,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 45250
+                },
+                {
+                    id: 1014,
+                    name: 'Cammy Albares',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Rousseaux, Michael Esq',
+                    date: '2019-06-25',
+                    status: 'new',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 30236
+                },
+                {
+                    id: 1015,
+                    name: 'Mattie Poquette',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Century Communications',
+                    date: '2017-12-12',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 52,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 64533
+                },
+                {
+                    id: 1016,
+                    name: 'Meaghan Garufi',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Bolton, Wilbur Esq',
+                    date: '2018-07-04',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 31,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 37279
+                },
+                {
+                    id: 1017,
+                    name: 'Gladys Rim',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'T M Byxbee Company Pc',
+                    date: '2020-02-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 27381
+                },
+                {
+                    id: 1018,
+                    name: 'Yuki Whobrey',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Farmers Insurance Group',
+                    date: '2017-12-21',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 9257
+                },
+                {
+                    id: 1019,
+                    name: 'Fletcher Flosi',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Post Box Services Plus',
+                    date: '2016-01-04',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 67783
+                },
+                {
+                    id: 1020,
+                    name: 'Bette Nicka',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Sport En Art',
+                    date: '2016-10-21',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 100,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 4609
+                },
+                {
+                    id: 1021,
+                    name: 'Veronika Inouye',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'C 4 Network Inc',
+                    date: '2017-03-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 72,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 26565
+                },
+                {
+                    id: 1022,
+                    name: 'Willard Kolmetz',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Ingalls, Donald R Esq',
+                    date: '2017-04-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 75876
+                },
+                {
+                    id: 1023,
+                    name: 'Maryann Royster',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'Franklin, Peter L Esq',
+                    date: '2017-03-11',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 56,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 41121
+                },
+                {
+                    id: 1024,
+                    name: 'Alisha Slusarski',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Wtlz Power 107 Fm',
+                    date: '2018-03-27',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 91691
+                },
+                {
+                    id: 1025,
+                    name: 'Allene Iturbide',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Ledecky, David Esq',
+                    date: '2016-02-20',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 1,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 40137
+                },
+                {
+                    id: 1026,
+                    name: 'Chanel Caudy',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Professional Image Inc',
+                    date: '2018-06-24',
+                    status: 'new',
+                    verified: true,
+                    activity: 26,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21304
+                },
+                {
+                    id: 1027,
+                    name: 'Ezekiel Chui',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Sider, Donald C Esq',
+                    date: '2016-09-24',
+                    status: 'new',
+                    verified: false,
+                    activity: 76,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 60454
+                },
+                {
+                    id: 1028,
+                    name: 'Willow Kusko',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'U Pull It',
+                    date: '2020-04-11',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 17565
+                },
+                {
+                    id: 1029,
+                    name: 'Bernardo Figeroa',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Clark, Richard Cpa',
+                    date: '2018-04-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 17774
+                },
+                {
+                    id: 1030,
+                    name: 'Ammie Corrio',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Moskowitz, Barry S',
+                    date: '2016-06-11',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 56,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 49201
+                },
+                {
+                    id: 1031,
+                    name: 'Francine Vocelka',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Cascade Realty Advisors Inc',
+                    date: '2017-08-02',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 67126
+                },
+                {
+                    id: 1032,
+                    name: 'Ernie Stenseth',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Knwz Newsradio',
+                    date: '2018-06-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 76017
+                },
+                {
+                    id: 1033,
+                    name: 'Albina Glick',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Giampetro, Anthony D',
+                    date: '2019-08-08',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 91201
+                },
+                {
+                    id: 1034,
+                    name: 'Alishia Sergi',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Milford Enterprises Inc',
+                    date: '2018-05-19',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 46,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 12237
+                },
+                {
+                    id: 1035,
+                    name: 'Solange Shinko',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Mosocco, Ronald A',
+                    date: '2015-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 34072
+                },
+                {
+                    id: 1036,
+                    name: 'Jose Stockham',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Tri State Refueler Co',
+                    date: '2018-04-25',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 94909
+                },
+                {
+                    id: 1037,
+                    name: 'Rozella Ostrosky',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Parkway Company',
+                    date: '2016-02-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 57245
+                },
+                {
+                    id: 1038,
+                    name: 'Valentine Gillian',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Fbs Business Finance',
+                    date: '2019-09-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 75502
+                },
+                {
+                    id: 1039,
+                    name: 'Kati Rulapaugh',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Eder Assocs Consltng Engrs Pc',
+                    date: '2016-12-03',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 51,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 82075
+                },
+                {
+                    id: 1040,
+                    name: 'Youlanda Schemmer',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Tri M Tool Inc',
+                    date: '2017-12-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 19208
+                },
+                {
+                    id: 1041,
+                    name: 'Dyan Oldroyd',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'International Eyelets Inc',
+                    date: '2017-02-02',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 5,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 50194
+                },
+                {
+                    id: 1042,
+                    name: 'Roxane Campain',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Rapid Trading Intl',
+                    date: '2018-12-25',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 100,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77714
+                },
+                {
+                    id: 1043,
+                    name: 'Lavera Perin',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Abc Enterprises Inc',
+                    date: '2018-04-10',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 71,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 35740
+                },
+                {
+                    id: 1044,
+                    name: 'Erick Ferencz',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Cindy Turner Associates',
+                    date: '2018-05-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 30790
+                },
+                {
+                    id: 1045,
+                    name: 'Fatima Saylors',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Stanton, James D Esq',
+                    date: '2019-07-10',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 93,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 52343
+                },
+                {
+                    id: 1046,
+                    name: 'Jina Briddick',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Grace Pastries Inc',
+                    date: '2018-02-19',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 97,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 53966
+                },
+                {
+                    id: 1047,
+                    name: 'Kanisha Waycott',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Schroer, Gene E Esq',
+                    date: '2019-11-27',
+                    status: 'new',
+                    verified: false,
+                    activity: 80,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 9920
+                },
+                {
+                    id: 1048,
+                    name: 'Emerson Bowley',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Knights Inn',
+                    date: '2018-11-24',
+                    status: 'new',
+                    verified: false,
+                    activity: 63,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 78069
+                },
+                {
+                    id: 1049,
+                    name: 'Blair Malet',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Bollinger Mach Shp & Shipyard',
+                    date: '2018-04-19',
+                    status: 'new',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 65005
+                },
+                {
+                    id: 1050,
+                    name: 'Brock Bolognia',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Orinda News',
+                    date: '2019-09-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 51038
+                },
+                {
+                    id: 1051,
+                    name: 'Lorrie Nestle',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Ballard Spahr Andrews',
+                    date: '2018-04-26',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 36,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 28218
+                },
+                {
+                    id: 1052,
+                    name: 'Sabra Uyetake',
+                    country: {
+                        name: 'Peru',
+                        code: 'pe'
+                    },
+                    company: 'Lowy Limousine Service',
+                    date: '2018-04-12',
+                    status: 'new',
+                    verified: false,
+                    activity: 31,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 78527
+                },
+                {
+                    id: 1053,
+                    name: 'Marjory Mastella',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Vicon Corporation',
+                    date: '2018-01-24',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 89,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 23381
+                },
+                {
+                    id: 1054,
+                    name: 'Karl Klonowski',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Rossi, Michael M',
+                    date: '2017-04-17',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 27,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 64821
+                },
+                {
+                    id: 1055,
+                    name: 'Tonette Wenner',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Northwest Publishing',
+                    date: '2019-04-14',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 27,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 55334
+                },
+                {
+                    id: 1056,
+                    name: 'Amber Monarrez',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Branford Wire & Mfg Co',
+                    date: '2019-09-09',
+                    status: 'new',
+                    verified: false,
+                    activity: 79,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 83391
+                },
+                {
+                    id: 1057,
+                    name: 'Shenika Seewald',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'East Coast Marketing',
+                    date: '2017-02-18',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 31580
+                },
+                {
+                    id: 1058,
+                    name: 'Delmy Ahle',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Wye Technologies Inc',
+                    date: '2020-10-05',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 55,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 11723
+                },
+                {
+                    id: 1059,
+                    name: 'Deeanna Juhas',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Healy, George W Iv',
+                    date: '2018-09-28',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 79,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 8454
+                },
+                {
+                    id: 1060,
+                    name: 'Blondell Pugh',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Alpenlite Inc',
+                    date: '2016-06-16',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 49,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 99235
+                },
+                {
+                    id: 1061,
+                    name: 'Jamal Vanausdal',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Hubbard, Bruce Esq',
+                    date: '2017-05-25',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 87,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 15656
+                },
+                {
+                    id: 1062,
+                    name: 'Cecily Hollack',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Arthur A Oliver & Son Inc',
+                    date: '2020-05-09',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 5,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 60586
+                },
+                {
+                    id: 1063,
+                    name: 'Carmelina Lindall',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'George Jessop Carter Jewelers',
+                    date: '2019-09-07',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 86239
+                },
+                {
+                    id: 1064,
+                    name: 'Maurine Yglesias',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Schultz, Thomas C Md',
+                    date: '2015-08-10',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 94,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 15621
+                },
+                {
+                    id: 1065,
+                    name: 'Tawna Buvens',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'H H H Enterprises Inc',
+                    date: '2018-03-20',
+                    status: 'new',
+                    verified: false,
+                    activity: 25,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 77248
+                },
+                {
+                    id: 1066,
+                    name: 'Penney Weight',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Hawaiian King Hotel',
+                    date: '2020-03-03',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 96,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 478
+                },
+                {
+                    id: 1067,
+                    name: 'Elly Morocco',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Killion Industries',
+                    date: '2018-09-18',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 62505
+                },
+                {
+                    id: 1068,
+                    name: 'Ilene Eroman',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Robinson, William J Esq',
+                    date: '2019-06-08',
+                    status: 'new',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 91480
+                },
+                {
+                    id: 1069,
+                    name: 'Vallie Mondella',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Private Properties',
+                    date: '2018-12-06',
+                    status: 'new',
+                    verified: false,
+                    activity: 16,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 21671
+                },
+                {
+                    id: 1070,
+                    name: 'Kallie Blackwood',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Rowley Schlimgen Inc',
+                    date: '2017-04-05',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 25,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 13775
+                },
+                {
+                    id: 1071,
+                    name: 'Johnetta Abdallah',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Forging Specialties',
+                    date: '2015-02-02',
+                    status: 'new',
+                    verified: false,
+                    activity: 16,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 60253
+                },
+                {
+                    id: 1072,
+                    name: 'Bobbye Rhym',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Smits, Patricia Garity',
+                    date: '2018-08-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 75225
+                },
+                {
+                    id: 1073,
+                    name: 'Micaela Rhymes',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'H Lee Leonard Attorney At Law',
+                    date: '2018-09-08',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 3308
+                },
+                {
+                    id: 1074,
+                    name: 'Tamar Hoogland',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'A K Construction Co',
+                    date: '2018-11-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 19711
+                },
+                {
+                    id: 1075,
+                    name: 'Moon Parlato',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Ambelang, Jessica M Md',
+                    date: '2019-08-18',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 64,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 55110
+                },
+                {
+                    id: 1076,
+                    name: 'Laurel Reitler',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Q A Service',
+                    date: '2015-04-02',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 80,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 62392
+                },
+                {
+                    id: 1077,
+                    name: 'Delisa Crupi',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Wood & Whitacre Contractors',
+                    date: '2017-09-15',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 70,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 76530
+                },
+                {
+                    id: 1078,
+                    name: 'Viva Toelkes',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Mark Iv Press Ltd',
+                    date: '2017-03-27',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 16,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 7460
+                },
+                {
+                    id: 1079,
+                    name: 'Elza Lipke',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Museum Of Science & Industry',
+                    date: '2017-06-01',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 42251
+                },
+                {
+                    id: 1080,
+                    name: 'Devorah Chickering',
+                    country: {
+                        name: 'Spain',
+                        code: 'es'
+                    },
+                    company: 'Garrison Ind',
+                    date: '2017-03-14',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 36435
+                },
+                {
+                    id: 1081,
+                    name: 'Timothy Mulqueen',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Saronix Nymph Products',
+                    date: '2018-07-09',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 39197
+                },
+                {
+                    id: 1082,
+                    name: 'Arlette Honeywell',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Smc Inc',
+                    date: '2018-09-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 72707
+                },
+                {
+                    id: 1083,
+                    name: 'Dominque Dickerson',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'E A I Electronic Assocs Inc',
+                    date: '2017-11-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 97965
+                },
+                {
+                    id: 1084,
+                    name: 'Lettie Isenhower',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Conte, Christopher A Esq',
+                    date: '2016-03-01',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 5823
+                },
+                {
+                    id: 1085,
+                    name: 'Myra Munns',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Anker Law Office',
+                    date: '2016-05-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 96471
+                },
+                {
+                    id: 1086,
+                    name: 'Stephaine Barfield',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Beutelschies & Company',
+                    date: '2016-01-22',
+                    status: 'new',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 33710
+                },
+                {
+                    id: 1087,
+                    name: 'Lai Gato',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Fligg, Kenneth I Jr',
+                    date: '2016-07-26',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 64,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 30611
+                },
+                {
+                    id: 1088,
+                    name: 'Stephen Emigh',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Sharp, J Daniel Esq',
+                    date: '2020-07-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 51,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 32960
+                },
+                {
+                    id: 1089,
+                    name: 'Tyra Shields',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Assink, Anne H Esq',
+                    date: '2019-11-10',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 11,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 57423
+                },
+                {
+                    id: 1090,
+                    name: 'Tammara Wardrip',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Jewel My Shop Inc',
+                    date: '2016-06-05',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 23027
+                },
+                {
+                    id: 1091,
+                    name: 'Cory Gibes',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Chinese Translation Resources',
+                    date: '2016-02-28',
+                    status: 'new',
+                    verified: false,
+                    activity: 44,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 84182
+                },
+                {
+                    id: 1092,
+                    name: 'Danica Bruschke',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Stevens, Charles T',
+                    date: '2018-12-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 25237
+                },
+                {
+                    id: 1093,
+                    name: 'Wilda Giguere',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Mclaughlin, Luther W Cpa',
+                    date: '2017-06-16',
+                    status: 'new',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 87736
+                },
+                {
+                    id: 1094,
+                    name: 'Elvera Benimadho',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Tree Musketeers',
+                    date: '2019-02-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 50,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 38674
+                },
+                {
+                    id: 1095,
+                    name: 'Carma Vanheusen',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Springfield Div Oh Edison Co',
+                    date: '2019-11-26',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 84,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 67762
+                },
+                {
+                    id: 1096,
+                    name: 'Malinda Hochard',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Logan Memorial Hospital',
+                    date: '2016-07-06',
+                    status: 'new',
+                    verified: false,
+                    activity: 88,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 81299
+                },
+                {
+                    id: 1097,
+                    name: 'Natalie Fern',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Kelly, Charles G Esq',
+                    date: '2019-10-02',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 44,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 64794
+                },
+                {
+                    id: 1098,
+                    name: 'Lisha Centini',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Industrial Paper Shredders Inc',
+                    date: '2018-07-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 7815
+                },
+                {
+                    id: 1099,
+                    name: 'Arlene Klusman',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Beck Horizon Builders',
+                    date: '2018-05-14',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 37976
+                },
+                {
+                    id: 1100,
+                    name: 'Alease Buemi',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Porto Cayo At Hawks Cay',
+                    date: '2018-03-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 59594
+                },
+                {
+                    id: 1101,
+                    name: 'Louisa Cronauer',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Pacific Grove Museum Ntrl Hist',
+                    date: '2018-09-23',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 92528
+                },
+                {
+                    id: 1102,
+                    name: 'Angella Cetta',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Bender & Hatley Pc',
+                    date: '2018-04-10',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 88,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 58964
+                },
+                {
+                    id: 1103,
+                    name: 'Cyndy Goldammer',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Di Cristina J & Son',
+                    date: '2017-09-18',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 92,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 65860
+                },
+                {
+                    id: 1104,
+                    name: 'Rosio Cork',
+                    country: {
+                        name: 'Singapore',
+                        code: 'sg'
+                    },
+                    company: 'Green Goddess',
+                    date: '2017-08-19',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 63863
+                },
+                {
+                    id: 1105,
+                    name: 'Celeste Korando',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'American Arts & Graphics',
+                    date: '2020-06-18',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 21,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 37510
+                },
+                {
+                    id: 1106,
+                    name: 'Twana Felger',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Opryland Hotel',
+                    date: '2016-11-18',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 97,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 63876
+                },
+                {
+                    id: 1107,
+                    name: 'Estrella Samu',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Marking Devices Pubg Co',
+                    date: '2017-06-25',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 27,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 93263
+                },
+                {
+                    id: 1108,
+                    name: 'Donte Kines',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'W Tc Industries Inc',
+                    date: '2019-02-16',
+                    status: 'new',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 57198
+                },
+                {
+                    id: 1109,
+                    name: 'Tiffiny Steffensmeier',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Whitehall Robbins Labs Divsn',
+                    date: '2018-03-11',
+                    status: 'new',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 89147
+                },
+                {
+                    id: 1110,
+                    name: 'Edna Miceli',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Sampler',
+                    date: '2017-10-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 41466
+                },
+                {
+                    id: 1111,
+                    name: 'Sue Kownacki',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Juno Chefs Incorporated',
+                    date: '2017-03-17',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 31,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 38918
+                },
+                {
+                    id: 1112,
+                    name: 'Jesusa Shin',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Carroccio, A Thomas Esq',
+                    date: '2017-04-06',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 11397
+                },
+                {
+                    id: 1113,
+                    name: 'Rolland Francescon',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Stanley, Richard L Esq',
+                    date: '2019-02-03',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 45,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 40930
+                },
+                {
+                    id: 1114,
+                    name: 'Pamella Schmierer',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'K Cs Cstm Mouldings Windows',
+                    date: '2016-09-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 40847
+                },
+                {
+                    id: 1115,
+                    name: 'Glory Kulzer',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Comfort Inn',
+                    date: '2017-09-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 36,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 27832
+                },
+                {
+                    id: 1116,
+                    name: 'Shawna Palaspas',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Windsor, James L Esq',
+                    date: '2017-06-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 89060
+                },
+                {
+                    id: 1117,
+                    name: 'Brandon Callaro',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Jackson Shields Yeiser',
+                    date: '2016-07-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 52474
+                },
+                {
+                    id: 1118,
+                    name: 'Scarlet Cartan',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Box, J Calvin Esq',
+                    date: '2018-09-13',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 1,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 19094
+                },
+                {
+                    id: 1119,
+                    name: 'Oretha Menter',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Custom Engineering Inc',
+                    date: '2017-09-11',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 8,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 93756
+                },
+                {
+                    id: 1120,
+                    name: 'Ty Smith',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Bresler Eitel Framg Gllry Ltd',
+                    date: '2019-07-06',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 50,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77388
+                },
+                {
+                    id: 1121,
+                    name: 'Xuan Rochin',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Carol, Drake Sparks Esq',
+                    date: '2018-05-22',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 48759
+                },
+                {
+                    id: 1122,
+                    name: 'Lindsey Dilello',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Biltmore Investors Bank',
+                    date: '2017-07-18',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 65,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 37568
+                },
+                {
+                    id: 1123,
+                    name: 'Devora Perez',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Desco Equipment Corp',
+                    date: '2017-10-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 4477
+                },
+                {
+                    id: 1124,
+                    name: 'Herman Demesa',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Merlin Electric Co',
+                    date: '2019-05-23',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 10,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13764
+                },
+                {
+                    id: 1125,
+                    name: 'Rory Papasergi',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Bailey Cntl Co Div Babcock',
+                    date: '2019-03-02',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 68222
+                },
+                {
+                    id: 1126,
+                    name: 'Talia Riopelle',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Ford Brothers Wholesale Inc',
+                    date: '2017-02-18',
+                    status: 'new',
+                    verified: false,
+                    activity: 69,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 29164
+                },
+                {
+                    id: 1127,
+                    name: 'Van Shire',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Cambridge Inn',
+                    date: '2020-05-12',
+                    status: 'new',
+                    verified: false,
+                    activity: 4,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 61651
+                },
+                {
+                    id: 1128,
+                    name: 'Lucina Lary',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Matricciani, Albert J Jr',
+                    date: '2019-11-20',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 11,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 79938
+                },
+                {
+                    id: 1129,
+                    name: 'Bok Isaacs',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Nelson Hawaiian Ltd',
+                    date: '2016-11-10',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 44037
+                },
+                {
+                    id: 1130,
+                    name: 'Rolande Spickerman',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Neland Travel Agency',
+                    date: '2016-07-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 84,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 89918
+                },
+                {
+                    id: 1131,
+                    name: 'Howard Paulas',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Asendorf, J Alan Esq',
+                    date: '2017-07-17',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 32372
+                },
+                {
+                    id: 1132,
+                    name: 'Kimbery Madarang',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Silberman, Arthur L Esq',
+                    date: '2018-08-19',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 46478
+                },
+                {
+                    id: 1133,
+                    name: 'Thurman Manno',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Honey Bee Breeding Genetics &',
+                    date: '2016-05-02',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 30674
+                },
+                {
+                    id: 1134,
+                    name: 'Becky Mirafuentes',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Wells Kravitz Schnitzer',
+                    date: '2018-04-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 47714
+                },
+                {
+                    id: 1135,
+                    name: 'Beatriz Corrington',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Prohab Rehabilitation Servs',
+                    date: '2020-01-04',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 14307
+                },
+                {
+                    id: 1136,
+                    name: 'Marti Maybury',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Eldridge, Kristin K Esq',
+                    date: '2016-02-05',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 82069
+                },
+                {
+                    id: 1137,
+                    name: 'Nieves Gotter',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Vlahos, John J Esq',
+                    date: '2017-03-12',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 3,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 11182
+                },
+                {
+                    id: 1138,
+                    name: 'Leatha Hagele',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Ninas Indian Grs & Videos',
+                    date: '2019-03-27',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 67,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 17126
+                },
+                {
+                    id: 1139,
+                    name: 'Valentin Klimek',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Schmid, Gayanne K Esq',
+                    date: '2019-08-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 19724
+                },
+                {
+                    id: 1140,
+                    name: 'Melissa Wiklund',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Moapa Valley Federal Credit Un',
+                    date: '2018-03-20',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 91888
+                },
+                {
+                    id: 1141,
+                    name: 'Sheridan Zane',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Kentucky Tennessee Clay Co',
+                    date: '2016-02-15',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 17,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 15016
+                },
+                {
+                    id: 1142,
+                    name: 'Bulah Padilla',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Admiral Party Rentals & Sales',
+                    date: '2016-02-10',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 58,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 23118
+                },
+                {
+                    id: 1143,
+                    name: 'Audra Kohnert',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Nelson, Karolyn King Esq',
+                    date: '2019-07-16',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 82,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 90560
+                },
+                {
+                    id: 1144,
+                    name: 'Daren Weirather',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Panasystems',
+                    date: '2015-07-23',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 96,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 34155
+                },
+                {
+                    id: 1145,
+                    name: 'Fernanda Jillson',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Shank, Edward L Esq',
+                    date: '2017-07-02',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 6350
+                },
+                {
+                    id: 1146,
+                    name: 'Gearldine Gellinger',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Megibow & Edwards',
+                    date: '2019-08-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 18,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77641
+                },
+                {
+                    id: 1147,
+                    name: 'Chau Kitzman',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Benoff, Edward Esq',
+                    date: '2019-07-04',
+                    status: 'new',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 43289
+                },
+                {
+                    id: 1148,
+                    name: 'Theola Frey',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Woodbridge Free Public Library',
+                    date: '2020-03-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 44,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 85657
+                },
+                {
+                    id: 1149,
+                    name: 'Cheryl Haroldson',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'New York Life John Thune',
+                    date: '2018-04-03',
+                    status: 'new',
+                    verified: false,
+                    activity: 55,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 82733
+                },
+                {
+                    id: 1150,
+                    name: 'Laticia Merced',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Alinabal Inc',
+                    date: '2017-03-04',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 21,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 38004
+                },
+                {
+                    id: 1151,
+                    name: 'Carissa Batman',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Poletto, Kim David Esq',
+                    date: '2016-05-05',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 29038
+                },
+                {
+                    id: 1152,
+                    name: 'Lezlie Craghead',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Chang, Carolyn Esq',
+                    date: '2019-05-28',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 75123
+                },
+                {
+                    id: 1153,
+                    name: 'Ozell Shealy',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Silver Bros Inc',
+                    date: '2016-08-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 33214
+                },
+                {
+                    id: 1154,
+                    name: 'Arminda Parvis',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Newtec Inc',
+                    date: '2020-02-09',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 80651
+                },
+                {
+                    id: 1155,
+                    name: 'Reita Leto',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Creative Business Systems',
+                    date: '2020-04-03',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 5085
+                },
+                {
+                    id: 1156,
+                    name: 'Yolando Luczki',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Dal Tile Corporation',
+                    date: '2015-01-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 93021
+                },
+                {
+                    id: 1157,
+                    name: 'Lizette Stem',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Edward S Katz',
+                    date: '2018-08-06',
+                    status: 'new',
+                    verified: false,
+                    activity: 67,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 37287
+                },
+                {
+                    id: 1158,
+                    name: 'Gregoria Pawlowicz',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Oh My Goodknits Inc',
+                    date: '2020-02-20',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 29,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 73070
+                },
+                {
+                    id: 1159,
+                    name: 'Carin Deleo',
+                    country: {
+                        name: 'China',
+                        code: 'cn'
+                    },
+                    company: 'Redeker, Debbie',
+                    date: '2015-05-28',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 64422
+                },
+                {
+                    id: 1160,
+                    name: 'Chantell Maynerich',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Desert Sands Motel',
+                    date: '2016-09-05',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 75,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 36826
+                },
+                {
+                    id: 1161,
+                    name: 'Dierdre Yum',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Cummins Southern Plains Inc',
+                    date: '2016-12-20',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 1,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 93101
+                },
+                {
+                    id: 1162,
+                    name: 'Larae Gudroe',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Lehigh Furn Divsn Lehigh',
+                    date: '2015-11-28',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 13,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 60177
+                },
+                {
+                    id: 1163,
+                    name: 'Latrice Tolfree',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'United Van Lines Agent',
+                    date: '2018-11-11',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 73,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 47198
+                },
+                {
+                    id: 1164,
+                    name: 'Kerry Theodorov',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Capitol Reporters',
+                    date: '2016-11-05',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 71305
+                },
+                {
+                    id: 1165,
+                    name: 'Dorthy Hidvegi',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Kwik Kopy Printing',
+                    date: '2020-08-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 60,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 17526
+                },
+                {
+                    id: 1166,
+                    name: 'Fannie Lungren',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'Centro Inc',
+                    date: '2015-07-06',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 24,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 16596
+                },
+                {
+                    id: 1167,
+                    name: 'Evangelina Radde',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Campbell, Jan Esq',
+                    date: '2020-02-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 93,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 56870
+                },
+                {
+                    id: 1168,
+                    name: 'Novella Degroot',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Evans, C Kelly Esq',
+                    date: '2017-12-19',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 30,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82928
+                },
+                {
+                    id: 1169,
+                    name: 'Clay Hoa',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Scat Enterprises',
+                    date: '2016-02-22',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 93,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 64181
+                },
+                {
+                    id: 1170,
+                    name: 'Jennifer Fallick',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Nagle, Daniel J Esq',
+                    date: '2016-12-24',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 88,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 30561
+                },
+                {
+                    id: 1171,
+                    name: 'Irma Wolfgramm',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Serendiquity Bed & Breakfast',
+                    date: '2020-10-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 24617
+                },
+                {
+                    id: 1172,
+                    name: 'Eun Coody',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Ray Carolyne Realty',
+                    date: '2018-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 77860
+                },
+                {
+                    id: 1173,
+                    name: 'Sylvia Cousey',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Berg, Charles E',
+                    date: '2018-06-10',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 91,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 25664
+                },
+                {
+                    id: 1174,
+                    name: 'Nana Wrinkles',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Ray, Milbern D',
+                    date: '2017-04-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 98113
+                },
+                {
+                    id: 1175,
+                    name: 'Layla Springe',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Chadds Ford Winery',
+                    date: '2019-07-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 97,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 14763
+                },
+                {
+                    id: 1176,
+                    name: 'Joesph Degonia',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'A R Packaging',
+                    date: '2020-04-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 56,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 31317
+                },
+                {
+                    id: 1177,
+                    name: 'Annabelle Boord',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Corn Popper',
+                    date: '2020-09-16',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 30883
+                },
+                {
+                    id: 1178,
+                    name: 'Stephaine Vinning',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Birite Foodservice Distr',
+                    date: '2016-05-14',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 93785
+                },
+                {
+                    id: 1179,
+                    name: 'Nelida Sawchuk',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Anchorage Museum Of Hist & Art',
+                    date: '2018-06-22',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 68380
+                },
+                {
+                    id: 1180,
+                    name: 'Marguerita Hiatt',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Haber, George D Md',
+                    date: '2018-10-25',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 72,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 93454
+                },
+                {
+                    id: 1181,
+                    name: 'Carmela Cookey',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Royal Pontiac Olds Inc',
+                    date: '2018-07-19',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 24,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 30570
+                },
+                {
+                    id: 1182,
+                    name: 'Junita Brideau',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Leonards Antiques Inc',
+                    date: '2015-03-15',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 79506
+                },
+                {
+                    id: 1183,
+                    name: 'Claribel Varriano',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Meca',
+                    date: '2017-04-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 15,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 8654
+                },
+                {
+                    id: 1184,
+                    name: 'Benton Skursky',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Nercon Engineering & Mfg Inc',
+                    date: '2015-02-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13368
+                },
+                {
+                    id: 1185,
+                    name: 'Hillary Skulski',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Replica I',
+                    date: '2016-03-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 92631
+                },
+                {
+                    id: 1186,
+                    name: 'Merilyn Bayless',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: '20 20 Printing Inc',
+                    date: '2020-10-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 4989
+                },
+                {
+                    id: 1187,
+                    name: 'Teri Ennaco',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Publishers Group West',
+                    date: '2019-12-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 77668
+                },
+                {
+                    id: 1188,
+                    name: 'Merlyn Lawler',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Nischwitz, Jeffrey L Esq',
+                    date: '2016-02-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 3525
+                },
+                {
+                    id: 1189,
+                    name: 'Georgene Montezuma',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Payne Blades & Wellborn Pa',
+                    date: '2018-10-11',
+                    status: 'new',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 45838
+                },
+                {
+                    id: 1190,
+                    name: 'Jettie Mconnell',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Coldwell Bnkr Wright Real Est',
+                    date: '2015-10-18',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 74,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 49148
+                },
+                {
+                    id: 1191,
+                    name: 'Lemuel Latzke',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Computer Repair Service',
+                    date: '2016-02-13',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 79,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 96709
+                },
+                {
+                    id: 1192,
+                    name: 'Melodie Knipp',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Fleetwood Building Block Inc',
+                    date: '2018-03-08',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 19,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 23253
+                },
+                {
+                    id: 1193,
+                    name: 'Candida Corbley',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Colts Neck Medical Assocs Inc',
+                    date: '2017-12-02',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 11,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 40836
+                },
+                {
+                    id: 1194,
+                    name: 'Karan Karpin',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'New England Taxidermy',
+                    date: '2019-01-07',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 60719
+                },
+                {
+                    id: 1195,
+                    name: 'Andra Scheyer',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Ludcke, George O Esq',
+                    date: '2016-08-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 17419
+                },
+                {
+                    id: 1196,
+                    name: 'Felicidad Poullion',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Mccorkle, Tom S Esq',
+                    date: '2016-03-05',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 94052
+                },
+                {
+                    id: 1197,
+                    name: 'Belen Strassner',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Eagle Software Inc',
+                    date: '2015-12-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 54241
+                },
+                {
+                    id: 1198,
+                    name: 'Gracia Melnyk',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Juvenile & Adult Super',
+                    date: '2019-06-01',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 40,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 87668
+                },
+                {
+                    id: 1199,
+                    name: 'Jolanda Hanafan',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Perez, Joseph J Esq',
+                    date: '2015-12-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 27,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 99417
+                },
+                {
+                    id: 1200,
+                    name: 'Barrett Toyama',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Case Foundation Co',
+                    date: '2019-08-16',
+                    status: 'new',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 89792
+                },
+                {
+                    id: 1201,
+                    name: 'Helga Fredicks',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Eis Environmental Engrs Inc',
+                    date: '2018-06-20',
+                    status: 'new',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 42356
+                },
+                {
+                    id: 1202,
+                    name: 'Ashlyn Pinilla',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Art Crafters',
+                    date: '2018-04-11',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 5,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 90979
+                },
+                {
+                    id: 1203,
+                    name: 'Fausto Agramonte',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Marriott Hotels Resorts Suites',
+                    date: '2019-06-25',
+                    status: 'new',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 45082
+                },
+                {
+                    id: 1204,
+                    name: 'Ronny Caiafa',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Remaco Inc',
+                    date: '2020-07-21',
+                    status: 'new',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 9871
+                },
+                {
+                    id: 1205,
+                    name: 'Marge Limmel',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Bjork, Robert D Jr',
+                    date: '2015-03-12',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 47043
+                },
+                {
+                    id: 1206,
+                    name: 'Norah Waymire',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Carmichael, Jeffery L Esq',
+                    date: '2019-06-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 92763
+                },
+                {
+                    id: 1207,
+                    name: 'Aliza Baltimore',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Andrews, J Robert Esq',
+                    date: '2020-11-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 18075
+                },
+                {
+                    id: 1208,
+                    name: 'Mozell Pelkowski',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Winship \u0026 Byrne',
+                    date: '2018-04-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 34393
+                },
+                {
+                    id: 1209,
+                    name: 'Viola Bitsuie',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Burton \u0026 Davis',
+                    date: '2018-07-07',
+                    status: 'new',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 16410
+                },
+                {
+                    id: 1210,
+                    name: 'Franklyn Emard',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Olympic Graphic Arts',
+                    date: '2018-02-25',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 1017
+                },
+                {
+                    id: 1211,
+                    name: 'Willodean Konopacki',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Magnuson',
+                    date: '2017-10-03',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 20,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 77843
+                },
+                {
+                    id: 1212,
+                    name: 'Beckie Silvestrini',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'A All American Travel Inc',
+                    date: '2016-11-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 30549
+                },
+                {
+                    id: 1213,
+                    name: 'Rebecka Gesick',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Polykote Inc',
+                    date: '2019-06-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 51738
+                },
+                {
+                    id: 1214,
+                    name: 'Frederica Blunk',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Jets Cybernetics',
+                    date: '2019-06-07',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 56,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 13111
+                },
+                {
+                    id: 1215,
+                    name: 'Glen Bartolet',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Metlab Testing Services',
+                    date: '2015-02-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 85802
+                },
+                {
+                    id: 1216,
+                    name: 'Freeman Gochal',
+                    country: {
+                        name: 'Slovenia',
+                        code: 'si'
+                    },
+                    company: 'Kellermann, William T Esq',
+                    date: '2019-08-27',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 2,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 89221
+                },
+                {
+                    id: 1217,
+                    name: 'Vincent Meinerding',
+                    country: {
+                        name: 'United States',
+                        code: 'us'
+                    },
+                    company: 'Arturi, Peter D Esq',
+                    date: '2018-06-18',
+                    status: 'new',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 32661
+                },
+                {
+                    id: 1218,
+                    name: 'Rima Bevelacqua',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Mcauley Mfg Co',
+                    date: '2019-05-18',
+                    status: 'new',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 18809
+                },
+                {
+                    id: 1219,
+                    name: 'Glendora Sarbacher',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Defur Voran Hanley Radcliff',
+                    date: '2018-04-21',
+                    status: 'new',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 94374
+                },
+                {
+                    id: 1220,
+                    name: 'Avery Steier',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Dill Dill Carr \u0026 Stonbraker Pc',
+                    date: '2017-07-27',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 45436
+                },
+                {
+                    id: 1221,
+                    name: 'Cristy Lother',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Kleensteel',
+                    date: '2018-05-19',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 72645
+                },
+                {
+                    id: 1222,
+                    name: 'Nicolette Brossart',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Goulds Pumps Inc Slurry Pump',
+                    date: '2015-05-26',
+                    status: 'new',
+                    verified: false,
+                    activity: 25,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 61023
+                },
+                {
+                    id: 1223,
+                    name: 'Tracey Modzelewski',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Kansas City Insurance Report',
+                    date: '2019-07-02',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 13685
+                },
+                {
+                    id: 1224,
+                    name: 'Virgina Tegarden',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Berhanu International Foods',
+                    date: '2017-10-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 84436
+                },
+                {
+                    id: 1225,
+                    name: 'Tiera Frankel',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Roland Ashcroft',
+                    date: '2018-03-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 61860
+                },
+                {
+                    id: 1226,
+                    name: 'Alaine Bergesen',
+                    country: {
+                        name: 'Peru',
+                        code: 'pe'
+                    },
+                    company: 'Hispanic Magazine',
+                    date: '2017-08-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 76679
+                },
+                {
+                    id: 1227,
+                    name: 'Earleen Mai',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Little Sheet Metal Co',
+                    date: '2016-06-22',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 14959
+                },
+                {
+                    id: 1228,
+                    name: 'Leonida Gobern',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Holmes, Armstead J Esq',
+                    date: '2020-02-24',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 14174
+                },
+                {
+                    id: 1229,
+                    name: 'Ressie Auffrey',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Faw, James C Cpa',
+                    date: '2016-10-21',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 80328
+                },
+                {
+                    id: 1230,
+                    name: 'Justine Mugnolo',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Evans Rule Company',
+                    date: '2016-02-21',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 56392
+                },
+                {
+                    id: 1231,
+                    name: 'Eladia Saulter',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Tyee Productions Inc',
+                    date: '2016-03-10',
+                    status: 'new',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 17176
+                },
+                {
+                    id: 1232,
+                    name: 'Chaya Malvin',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Dunnells \u0026 Duvall',
+                    date: '2016-07-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 90141
+                },
+                {
+                    id: 1233,
+                    name: 'Gwenn Suffield',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Deltam Systems Inc',
+                    date: '2019-06-23',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 38187
+                },
+                {
+                    id: 1234,
+                    name: 'Salena Karpel',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Hammill Mfg Co',
+                    date: '2016-08-02',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 35596
+                },
+                {
+                    id: 1235,
+                    name: 'Yoko Fishburne',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Sams Corner Store',
+                    date: '2017-08-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 73,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 73926
+                },
+                {
+                    id: 1236,
+                    name: 'Taryn Moyd',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Siskin, Mark J Esq',
+                    date: '2016-12-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 38375
+                },
+                {
+                    id: 1237,
+                    name: 'Katina Polidori',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Cape \u0026 Associates Real Estate',
+                    date: '2016-08-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 37,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 35932
+                },
+                {
+                    id: 1238,
+                    name: 'Rickie Plumer',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Merrill Lynch',
+                    date: '2018-11-04',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 71,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 28331
+                },
+                {
+                    id: 1239,
+                    name: 'Alex Loader',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Sublett, Scott Esq',
+                    date: '2016-01-07',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 22,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 33549
+                },
+                {
+                    id: 1240,
+                    name: 'Lashon Vizarro',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Sentry Signs',
+                    date: '2019-08-02',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 63860
+                },
+                {
+                    id: 1241,
+                    name: 'Lauran Burnard',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Professionals Unlimited',
+                    date: '2016-04-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 34992
+                },
+                {
+                    id: 1242,
+                    name: 'Ceola Setter',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Southern Steel Shelving Co',
+                    date: '2017-05-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 97068
+                },
+                {
+                    id: 1243,
+                    name: 'My Rantanen',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Bosco, Paul J',
+                    date: '2017-09-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 60,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 2316
+                },
+                {
+                    id: 1244,
+                    name: 'Lorrine Worlds',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Longo, Nicholas J Esq',
+                    date: '2018-05-10',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 51,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 89374
+                },
+                {
+                    id: 1245,
+                    name: 'Peggie Sturiale',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Henry County Middle School',
+                    date: '2019-11-03',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 51152
+                },
+                {
+                    id: 1246,
+                    name: 'Marvel Raymo',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Edison Supply \u0026 Equipment Co',
+                    date: '2016-03-08',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 39848
+                },
+                {
+                    id: 1247,
+                    name: 'Daron Dinos',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Wolf, Warren R Esq',
+                    date: '2016-03-25',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 35060
+                },
+                {
+                    id: 1248,
+                    name: 'An Fritz',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Linguistic Systems Inc',
+                    date: '2017-08-04',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 23037
+                },
+                {
+                    id: 1249,
+                    name: 'Portia Stimmel',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Peace Christian Center',
+                    date: '2020-01-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 35637
+                },
+                {
+                    id: 1250,
+                    name: 'Rhea Aredondo',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Double B Foods Inc',
+                    date: '2016-06-19',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 70379
+                },
+                {
+                    id: 1251,
+                    name: 'Benedict Sama',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Alexander \u0026 Alexander Inc',
+                    date: '2018-08-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 99271
+                },
+                {
+                    id: 1252,
+                    name: 'Alyce Arias',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Fairbanks Scales',
+                    date: '2018-09-14',
+                    status: 'new',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 69658
+                },
+                {
+                    id: 1253,
+                    name: 'Heike Berganza',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Cali Sportswear Cutting Dept',
+                    date: '2019-01-21',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 78159
+                },
+                {
+                    id: 1254,
+                    name: 'Carey Dopico',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Garofani, John Esq',
+                    date: '2020-05-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 84097
+                },
+                {
+                    id: 1255,
+                    name: 'Dottie Hellickson',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Thompson Fabricating Co',
+                    date: '2016-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 54606
+                },
+                {
+                    id: 1256,
+                    name: 'Deandrea Hughey',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Century 21 Krall Real Estate',
+                    date: '2018-09-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 2730
+                },
+                {
+                    id: 1257,
+                    name: 'Kimberlie Duenas',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Mid Contntl Rlty \u0026 Prop Mgmt',
+                    date: '2015-07-27',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 71836
+                },
+                {
+                    id: 1258,
+                    name: 'Martina Staback',
+                    country: {
+                        name: 'Luxembourg',
+                        code: 'lu'
+                    },
+                    company: 'Ace Signs Inc',
+                    date: '2017-02-14',
+                    status: 'new',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 37044
+                },
+                {
+                    id: 1259,
+                    name: 'Skye Fillingim',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Rodeway Inn',
+                    date: '2017-02-12',
+                    status: 'new',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 5990
+                },
+                {
+                    id: 1260,
+                    name: 'Jade Farrar',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Bonnet \u0026 Daughter',
+                    date: '2017-02-23',
+                    status: 'new',
+                    verified: true,
+                    activity: 73,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 7878
+                },
+                {
+                    id: 1261,
+                    name: 'Charlene Hamilton',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Oshins \u0026 Gibbons',
+                    date: '2017-09-23',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 38077
+                },
+                {
+                    id: 1262,
+                    name: 'Geoffrey Acey',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Price Business Services',
+                    date: '2019-10-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 24537
+                },
+                {
+                    id: 1263,
+                    name: 'Stevie Westerbeck',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Wise, Dennis W Md',
+                    date: '2017-08-01',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 19164
+                },
+                {
+                    id: 1264,
+                    name: 'Pamella Fortino',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Super 8 Motel',
+                    date: '2018-09-03',
+                    status: 'new',
+                    verified: true,
+                    activity: 100,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 21880
+                },
+                {
+                    id: 1265,
+                    name: 'Harrison Haufler',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'John Wagner Associates',
+                    date: '2016-08-25',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 14975
+                },
+                {
+                    id: 1266,
+                    name: 'Johnna Engelberg',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Thrifty Oil Co',
+                    date: '2019-06-02',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 1,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 28001
+                },
+                {
+                    id: 1267,
+                    name: 'Buddy Cloney',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Larkfield Photo',
+                    date: '2020-05-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 44811
+                },
+                {
+                    id: 1268,
+                    name: 'Dalene Riden',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Silverman Planetarium',
+                    date: '2019-08-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 70963
+                },
+                {
+                    id: 1269,
+                    name: 'Jerry Zurcher',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'J \u0026 F Lumber',
+                    date: '2015-05-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 52,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 27808
+                },
+                {
+                    id: 1270,
+                    name: 'Haydee Denooyer',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Cleaning Station Inc',
+                    date: '2016-04-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 80,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 41216
+                },
+                {
+                    id: 1271,
+                    name: 'Joseph Cryer',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Ames Stationers',
+                    date: '2019-11-26',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 53,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 8819
+                },
+                {
+                    id: 1272,
+                    name: 'Deonna Kippley',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Midas Muffler Shops',
+                    date: '2017-08-26',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 52,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 77610
+                },
+                {
+                    id: 1273,
+                    name: 'Raymon Calvaresi',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Seaboard Securities Inc',
+                    date: '2017-07-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 80612
+                },
+                {
+                    id: 1274,
+                    name: 'Alecia Bubash',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Petersen, James E Esq',
+                    date: '2016-05-19',
+                    status: 'new',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 45311
+                },
+                {
+                    id: 1275,
+                    name: 'Ma Layous',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Development Authority',
+                    date: '2016-02-11',
+                    status: 'qualified',
+                    verified: false,
+                    activity: 2,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 88737
+                },
+                {
+                    id: 1276,
+                    name: 'Detra Coyier',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'Schott Fiber Optics Inc',
+                    date: '2019-06-05',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13224
+                },
+                {
+                    id: 1277,
+                    name: 'Terrilyn Rodeigues',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Stuart J Agins',
+                    date: '2016-08-04',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 64656
+                },
+                {
+                    id: 1278,
+                    name: 'Salome Lacovara',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Mitsumi Electronics Corp',
+                    date: '2015-06-05',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 61947
+                },
+                {
+                    id: 1279,
+                    name: 'Garry Keetch',
+                    country: {
+                        name: 'Luxembourg',
+                        code: 'lu'
+                    },
+                    company: 'Italian Express Franchise Corp',
+                    date: '2015-06-20',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 6380
+                },
+                {
+                    id: 1280,
+                    name: 'Matthew Neither',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'American Council On Sci \u0026 Hlth',
+                    date: '2018-06-24',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 80112
+                },
+                {
+                    id: 1281,
+                    name: 'Theodora Restrepo',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Kleri, Patricia S Esq',
+                    date: '2017-08-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 42038
+                },
+                {
+                    id: 1282,
+                    name: 'Noah Kalafatis',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Twiggs Abrams Blanchard',
+                    date: '2020-06-24',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 36052
+                },
+                {
+                    id: 1283,
+                    name: 'Carmen Sweigard',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Maui Research \u0026 Technology Pk',
+                    date: '2019-08-08',
+                    status: 'new',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 51660
+                },
+                {
+                    id: 1284,
+                    name: 'Lavonda Hengel',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Bradley Nameplate Corp',
+                    date: '2019-10-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 56142
+                },
+                {
+                    id: 1285,
+                    name: 'Junita Stoltzman',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Geonex Martel Inc',
+                    date: '2015-03-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21631
+                },
+                {
+                    id: 1286,
+                    name: 'Herminia Nicolozakes',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Sea Island Div Of Fstr Ind Inc',
+                    date: '2019-09-09',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 59171
+                },
+                {
+                    id: 1287,
+                    name: 'Casie Good',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Papay, Debbie J Esq',
+                    date: '2016-11-27',
+                    status: 'new',
+                    verified: true,
+                    activity: 87,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 97858
+                },
+                {
+                    id: 1288,
+                    name: 'Reena Maisto',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Lane Promotions',
+                    date: '2016-08-22',
+                    status: 'new',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 90388
+                },
+                {
+                    id: 1289,
+                    name: 'Mirta Mallett',
+                    country: {
+                        name: 'Singapore',
+                        code: 'sg'
+                    },
+                    company: 'Stephen Kennerly Archts Inc Pc',
+                    date: '2017-11-27',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 68632
+                },
+                {
+                    id: 1290,
+                    name: 'Cathrine Pontoriero',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'Business Systems Of Wis Inc',
+                    date: '2020-02-07',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 95552
+                },
+                {
+                    id: 1291,
+                    name: 'Filiberto Tawil',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Flash, Elena Salerno Esq',
+                    date: '2018-01-28',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 39725
+                },
+                {
+                    id: 1292,
+                    name: 'Raul Upthegrove',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Neeley, Gregory W Esq',
+                    date: '2019-11-16',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 62251
+                },
+                {
+                    id: 1293,
+                    name: 'Sarah Candlish',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Alabama Educational Tv Comm',
+                    date: '2019-06-09',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 73523
+                },
+                {
+                    id: 1294,
+                    name: 'Lucy Treston',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Franz Inc',
+                    date: '2017-02-07',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 41331
+                },
+                {
+                    id: 1295,
+                    name: 'Judy Aquas',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Plantation Restaurant',
+                    date: '2020-09-14',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 24208
+                },
+                {
+                    id: 1296,
+                    name: 'Yvonne Tjepkema',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Radio Communications Co',
+                    date: '2017-01-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 56409
+                },
+                {
+                    id: 1297,
+                    name: 'Kayleigh Lace',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Dentalaw Divsn Hlth Care',
+                    date: '2019-11-04',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 70025
+                },
+                {
+                    id: 1298,
+                    name: 'Felix Hirpara',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'American Speedy Printing Ctrs',
+                    date: '2015-03-13',
+                    status: 'new',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 88115
+                },
+                {
+                    id: 1299,
+                    name: 'Tresa Sweely',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Grayson, Grant S Esq',
+                    date: '2019-12-22',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 69703
+                },
+                {
+                    id: 1300,
+                    name: 'Kristeen Turinetti',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Jeanerette Middle School',
+                    date: '2017-09-28',
+                    status: 'new',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 10718
+                },
+                {
+                    id: 1301,
+                    name: 'Jenelle Regusters',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Haavisto, Brian F Esq',
+                    date: '2019-07-27',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 29825
+                },
+                {
+                    id: 1302,
+                    name: 'Renea Monterrubio',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Wmmt Radio Station',
+                    date: '2016-03-28',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 73,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 90351
+                },
+                {
+                    id: 1303,
+                    name: 'Olive Matuszak',
+                    country: {
+                        name: 'Germany',
+                        code: 'de'
+                    },
+                    company: 'Colony Paints Sales Ofc \u0026 Plnt',
+                    date: '2018-04-15',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 75682
+                },
+                {
+                    id: 1304,
+                    name: 'Ligia Reiber',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'Floral Expressions',
+                    date: '2017-02-02',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 51,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 74935
+                },
+                {
+                    id: 1305,
+                    name: 'Christiane Eschberger',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Casco Services Inc',
+                    date: '2018-03-27',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 5254
+                },
+                {
+                    id: 1306,
+                    name: 'Goldie Schirpke',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Reuter, Arthur C Jr',
+                    date: '2015-04-21',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 37306
+                },
+                {
+                    id: 1307,
+                    name: 'Loreta Timenez',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Kaminski, Katherine Andritsaki',
+                    date: '2015-07-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 29,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 70520
+                },
+                {
+                    id: 1308,
+                    name: 'Fabiola Hauenstein',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Sidewinder Products Corp',
+                    date: '2015-12-12',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 42,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 74510
+                },
+                {
+                    id: 1309,
+                    name: 'Amie Perigo',
+                    country: {
+                        name: 'Russia',
+                        code: 'ru'
+                    },
+                    company: 'General Foam Corporation',
+                    date: '2016-06-13',
+                    status: 'new',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 74410
+                },
+                {
+                    id: 1310,
+                    name: 'Raina Brachle',
+                    country: {
+                        name: 'Greece',
+                        code: 'gr'
+                    },
+                    company: 'Ikg Borden Divsn Harsco Corp',
+                    date: '2016-11-28',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 56116
+                },
+                {
+                    id: 1311,
+                    name: 'Erinn Canlas',
+                    country: {
+                        name: 'United Kingdom',
+                        code: 'gb'
+                    },
+                    company: 'Anchor Computer Inc',
+                    date: '2018-12-08',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 89,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 46518
+                },
+                {
+                    id: 1312,
+                    name: 'Cherry Lietz',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Sebring \u0026 Co',
+                    date: '2017-11-04',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 92213
+                },
+                {
+                    id: 1313,
+                    name: 'Kattie Vonasek',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'H A C Farm Lines Co Optv Assoc',
+                    date: '2017-02-17',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 58,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 6405
+                },
+                {
+                    id: 1314,
+                    name: 'Lilli Scriven',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Hunter, John J Esq',
+                    date: '2017-04-15',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 92900
+                },
+                {
+                    id: 1315,
+                    name: 'Whitley Tomasulo',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Freehold Fence Co',
+                    date: '2017-11-16',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 6,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 86727
+                },
+                {
+                    id: 1316,
+                    name: 'Barbra Adkin',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Binswanger',
+                    date: '2019-07-24',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 48040
+                },
+                {
+                    id: 1317,
+                    name: 'Hermila Thyberg',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Chilton Malting Co',
+                    date: '2016-11-05',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 24026
+                },
+                {
+                    id: 1318,
+                    name: 'Jesusita Flister',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Schoen, Edward J Jr',
+                    date: '2017-03-03',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 29,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 76388
+                },
+                {
+                    id: 1319,
+                    name: 'Caitlin Julia',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Helderman, Seymour Cpa',
+                    date: '2018-03-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 89068
+                },
+                {
+                    id: 1320,
+                    name: 'Roosevelt Hoffis',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Denbrook, Myron',
+                    date: '2019-04-14',
+                    status: 'new',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 12727
+                },
+                {
+                    id: 1321,
+                    name: 'Helaine Halter',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Lippitt, Mike',
+                    date: '2019-09-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 83411
+                },
+                {
+                    id: 1322,
+                    name: 'Lorean Martabano',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Hiram, Hogg P Esq',
+                    date: '2017-03-23',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 44242
+                },
+                {
+                    id: 1323,
+                    name: 'France Buzick',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'In Travel Agency',
+                    date: '2016-12-14',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 22,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 5644
+                },
+                {
+                    id: 1324,
+                    name: 'Justine Ferrario',
+                    country: {
+                        name: 'Ukraine',
+                        code: 'ua'
+                    },
+                    company: 'Newhart Foods Inc',
+                    date: '2015-09-07',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 7,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 29321
+                },
+                {
+                    id: 1325,
+                    name: 'Adelina Nabours',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Courtyard By Marriott',
+                    date: '2018-05-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 13353
+                },
+                {
+                    id: 1326,
+                    name: 'Derick Dhamer',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Studer, Eugene A Esq',
+                    date: '2020-07-04',
+                    status: 'new',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 53454
+                },
+                {
+                    id: 1327,
+                    name: 'Jerry Dallen',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Seashore Supply Co Waretown',
+                    date: '2015-10-23',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 21,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 30074
+                },
+                {
+                    id: 1328,
+                    name: 'Leota Ragel',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Mayar Silk Inc',
+                    date: '2019-06-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 74,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 36310
+                },
+                {
+                    id: 1329,
+                    name: 'Jutta Amyot',
+                    country: {
+                        name: 'Cameroon',
+                        code: 'cm'
+                    },
+                    company: 'National Medical Excess Corp',
+                    date: '2019-09-01',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 27563
+                },
+                {
+                    id: 1330,
+                    name: 'Aja Gehrett',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Stero Company',
+                    date: '2018-01-28',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 45163
+                },
+                {
+                    id: 1331,
+                    name: 'Kirk Herritt',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Hasting, H Duane Esq',
+                    date: '2018-10-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 2,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 52970
+                },
+                {
+                    id: 1332,
+                    name: 'Leonora Mauson',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Insty Prints',
+                    date: '2019-02-02',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 18922
+                },
+                {
+                    id: 1333,
+                    name: 'Winfred Brucato',
+                    country: {
+                        name: 'Austria',
+                        code: 'at'
+                    },
+                    company: 'Glenridge Manor Mobile Home Pk',
+                    date: '2019-08-16',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 8,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 59632
+                },
+                {
+                    id: 1334,
+                    name: 'Tarra Nachor',
+                    country: {
+                        name: 'Panama',
+                        code: 'pa'
+                    },
+                    company: 'Circuit Solution Inc',
+                    date: '2019-07-10',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 88,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 6733
+                },
+                {
+                    id: 1335,
+                    name: 'Corinne Loder',
+                    country: {
+                        name: 'Brazil',
+                        code: 'br'
+                    },
+                    company: 'Local Office',
+                    date: '2016-05-21',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 22704
+                },
+                {
+                    id: 1336,
+                    name: 'Dulce Labreche',
+                    country: {
+                        name: 'South Africa',
+                        code: 'za'
+                    },
+                    company: 'Lee Kilkelly Paulson \u0026 Kabaker',
+                    date: '2019-11-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 24,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82613
+                },
+                {
+                    id: 1337,
+                    name: 'Kate Keneipp',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Davis, Maxon R Esq',
+                    date: '2019-06-20',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 44,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 97960
+                },
+                {
+                    id: 1338,
+                    name: 'Kaitlyn Ogg',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Garrison, Paul E Esq',
+                    date: '2019-08-01',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 63123
+                },
+                {
+                    id: 1339,
+                    name: 'Sherita Saras',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Black History Resource Center',
+                    date: '2017-06-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 38090
+                },
+                {
+                    id: 1340,
+                    name: 'Lashawnda Stuer',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Rodriguez, J Christopher Esq',
+                    date: '2018-01-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 6,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 58826
+                },
+                {
+                    id: 1341,
+                    name: 'Ernest Syrop',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Grant Family Health Center',
+                    date: '2016-10-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 22419
+                },
+                {
+                    id: 1342,
+                    name: 'Nobuko Halsey',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Goeman Wood Products Inc',
+                    date: '2019-01-02',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 86006
+                },
+                {
+                    id: 1343,
+                    name: 'Lavonna Wolny',
+                    country: {
+                        name: 'Czech Republic',
+                        code: 'cz'
+                    },
+                    company: 'Linhares, Kenneth A Esq',
+                    date: '2019-03-09',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 40641
+                },
+                {
+                    id: 1344,
+                    name: 'Lashaunda Lizama',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Earnhardt Printing',
+                    date: '2016-02-16',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 73493
+                },
+                {
+                    id: 1345,
+                    name: 'Mariann Bilden',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'H P G Industrys Inc',
+                    date: '2019-12-15',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 20,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 87704
+                },
+                {
+                    id: 1346,
+                    name: 'Helene Rodenberger',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Bailey Transportation Prod Inc',
+                    date: '2016-09-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 26,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 19662
+                },
+                {
+                    id: 1347,
+                    name: 'Roselle Estell',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Mcglynn Bliss Pc',
+                    date: '2016-11-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 80,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 80534
+                },
+                {
+                    id: 1348,
+                    name: 'Samira Heintzman',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Mutual Fish Co',
+                    date: '2019-11-26',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 19473
+                },
+                {
+                    id: 1349,
+                    name: 'Margart Meisel',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Yeates, Arthur L Aia',
+                    date: '2019-10-27',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 89796
+                },
+                {
+                    id: 1350,
+                    name: 'Kristofer Bennick',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Logan, Ronald J Esq',
+                    date: '2016-02-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 5,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 54429
+                },
+                {
+                    id: 1351,
+                    name: 'Weldon Acuff',
+                    country: {
+                        name: 'Estonia',
+                        code: 'ee'
+                    },
+                    company: 'Advantage Martgage Company',
+                    date: '2019-10-22',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 16134
+                },
+                {
+                    id: 1352,
+                    name: 'Shalon Shadrick',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Germer And Gertz Llp',
+                    date: '2015-01-03',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 9173
+                },
+                {
+                    id: 1353,
+                    name: 'Denise Patak',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Spence Law Offices',
+                    date: '2016-11-03',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 77,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 42857
+                },
+                {
+                    id: 1354,
+                    name: 'Louvenia Beech',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'John Ortiz Nts Therapy Center',
+                    date: '2016-04-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 62,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 54300
+                },
+                {
+                    id: 1355,
+                    name: 'Audry Yaw',
+                    country: {
+                        name: 'Portugal',
+                        code: 'pt'
+                    },
+                    company: 'Mike Uchrin Htg \u0026 Air Cond Inc',
+                    date: '2017-11-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 94652
+                },
+                {
+                    id: 1356,
+                    name: 'Kristel Ehmann',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Mccoy, Joy Reynolds Esq',
+                    date: '2016-06-23',
+                    status: 'new',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 88295
+                },
+                {
+                    id: 1357,
+                    name: 'Vincenza Zepp',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Kbor 1600 Am',
+                    date: '2016-01-04',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 92710
+                },
+                {
+                    id: 1358,
+                    name: 'Elouise Gwalthney',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'Quality Inn Northwest',
+                    date: '2016-04-05',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 25145
+                },
+                {
+                    id: 1359,
+                    name: 'Venita Maillard',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Wallace Church Assoc Inc',
+                    date: '2016-03-23',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 61630
+                },
+                {
+                    id: 1360,
+                    name: 'Kasandra Semidey',
+                    country: {
+                        name: 'Indonesia',
+                        code: 'id'
+                    },
+                    company: 'Can Tron',
+                    date: '2015-09-03',
+                    status: 'new',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 66134
+                },
+                {
+                    id: 1361,
+                    name: 'Xochitl Discipio',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Ravaal Enterprises Inc',
+                    date: '2016-11-14',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 14822
+                },
+                {
+                    id: 1362,
+                    name: 'Maile Linahan',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Thompson Steel Company Inc',
+                    date: '2016-07-24',
+                    status: 'new',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 17759
+                },
+                {
+                    id: 1363,
+                    name: 'Krissy Rauser',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Anderson, Mark A Esq',
+                    date: '2020-03-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 33,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 14922
+                },
+                {
+                    id: 1364,
+                    name: 'Pete Dubaldi',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Womack \u0026 Galich',
+                    date: '2015-11-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 96575
+                },
+                {
+                    id: 1365,
+                    name: 'Linn Paa',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Valerie \u0026 Company',
+                    date: '2015-08-12',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 26,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 5847
+                },
+                {
+                    id: 1366,
+                    name: 'Paris Wide',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Gehring Pumps Inc',
+                    date: '2018-10-21',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 90,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 22929
+                },
+                {
+                    id: 1367,
+                    name: 'Wynell Dorshorst',
+                    country: {
+                        name: 'Romania',
+                        code: 'ro'
+                    },
+                    company: 'Haehnel, Craig W Esq',
+                    date: '2018-05-10',
+                    status: 'new',
+                    verified: true,
+                    activity: 60,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 31837
+                },
+                {
+                    id: 1368,
+                    name: 'Quentin Birkner',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Spoor Behrins Campbell \u0026 Young',
+                    date: '2019-02-03',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 27095
+                },
+                {
+                    id: 1369,
+                    name: 'Regenia Kannady',
+                    country: {
+                        name: 'Portugal',
+                        code: 'pt'
+                    },
+                    company: 'Ken Jeter Store Equipment Inc',
+                    date: '2018-07-13',
+                    status: 'new',
+                    verified: true,
+                    activity: 74,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 43696
+                },
+                {
+                    id: 1370,
+                    name: 'Sheron Louissant',
+                    country: {
+                        name: 'France',
+                        code: 'fr'
+                    },
+                    company: 'Potter, Brenda J Cpa',
+                    date: '2017-01-04',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 79897
+                },
+                {
+                    id: 1371,
+                    name: 'Izetta Funnell',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Baird Kurtz \u0026 Dobson',
+                    date: '2019-11-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 27264
+                },
+                {
+                    id: 1372,
+                    name: 'Rodolfo Butzen',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Minor, Cynthia A Esq',
+                    date: '2020-09-25',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 17,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 16490
+                },
+                {
+                    id: 1373,
+                    name: 'Zona Colla',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Solove, Robert A Esq',
+                    date: '2020-10-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 21990
+                },
+                {
+                    id: 1374,
+                    name: 'Serina Zagen',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Mark Ii Imports Inc',
+                    date: '2018-07-14',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 11918
+                },
+                {
+                    id: 1375,
+                    name: 'Paz Sahagun',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'White Sign Div Ctrl Equip Co',
+                    date: '2018-03-23',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 13268
+                },
+                {
+                    id: 1376,
+                    name: 'Markus Lukasik',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'M \u0026 M Store Fixtures Co Inc',
+                    date: '2018-03-21',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 23,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 15941
+                },
+                {
+                    id: 1377,
+                    name: 'Jaclyn Bachman',
+                    country: {
+                        name: 'Slovakia',
+                        code: 'sk'
+                    },
+                    company: 'Judah Caster \u0026 Wheel Co',
+                    date: '2020-10-20',
+                    status: 'new',
+                    verified: true,
+                    activity: 10,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 53132
+                },
+                {
+                    id: 1378,
+                    name: 'Cyril Daufeldt',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Galaxy International Inc',
+                    date: '2019-02-11',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 47531
+                },
+                {
+                    id: 1379,
+                    name: 'Gayla Schnitzler',
+                    country: {
+                        name: 'Brazil',
+                        code: 'br'
+                    },
+                    company: 'Sigma Corp Of America',
+                    date: '2017-09-15',
+                    status: 'new',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 88950
+                },
+                {
+                    id: 1380,
+                    name: 'Erick Nievas',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Soward, Anne Esq',
+                    date: '2018-10-07',
+                    status: 'proposal',
+                    verified: false,
+                    activity: 28,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 88497
+                },
+                {
+                    id: 1381,
+                    name: 'Jennie Drymon',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'Osborne, Michelle M Esq',
+                    date: '2016-09-14',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 80,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 60634
+                },
+                {
+                    id: 1382,
+                    name: 'Mitsue Scipione',
+                    country: {
+                        name: 'Ecuador',
+                        code: 'ec'
+                    },
+                    company: 'Students In Free Entrprs Natl',
+                    date: '2019-07-28',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 24,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21164
+                },
+                {
+                    id: 1383,
+                    name: 'Ciara Ventura',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Johnson, Robert M Esq',
+                    date: '2018-04-02',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 24,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 83645
+                },
+                {
+                    id: 1384,
+                    name: 'Galen Cantres',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Del Charro Apartments',
+                    date: '2020-02-16',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 32433
+                },
+                {
+                    id: 1385,
+                    name: 'Truman Feichtner',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Legal Search Inc',
+                    date: '2019-10-16',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 96983
+                },
+                {
+                    id: 1386,
+                    name: 'Gail Kitty',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Service Supply Co Inc',
+                    date: '2020-01-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 67,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 72211
+                },
+                {
+                    id: 1387,
+                    name: 'Dalene Schoeneck',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Sameshima, Douglas J Esq',
+                    date: '2019-11-27',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 40262
+                },
+                {
+                    id: 1388,
+                    name: 'Gertude Witten',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Thompson, John Randolph Jr',
+                    date: '2017-08-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 40,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 91139
+                },
+                {
+                    id: 1389,
+                    name: 'Lizbeth Kohl',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'E T Balancing Co Inc',
+                    date: '2019-04-20',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 57,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 79659
+                },
+                {
+                    id: 1390,
+                    name: 'Glenn Berray',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Griswold, John E Esq',
+                    date: '2017-08-13',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 68,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 93576
+                },
+                {
+                    id: 1391,
+                    name: 'Lashandra Klang',
+                    country: {
+                        name: 'Bulgaria',
+                        code: 'bg'
+                    },
+                    company: 'Acqua Group',
+                    date: '2016-06-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 93576
+                },
+                {
+                    id: 1392,
+                    name: 'Lenna Newville',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Brooks, Morris J Jr',
+                    date: '2020-09-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 93576
+                },
+                {
+                    id: 1393,
+                    name: 'Laurel Pagliuca',
+                    country: {
+                        name: 'Russia',
+                        code: 'ru'
+                    },
+                    company: 'Printing Images Corp',
+                    date: '2017-05-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 21,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 2009
+                },
+                {
+                    id: 1394,
+                    name: 'Mireya Frerking',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'Roberts Supply Co Inc',
+                    date: '2017-04-21',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 54,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 35341
+                },
+                {
+                    id: 1395,
+                    name: 'Annelle Tagala',
+                    country: {
+                        name: 'Colombia',
+                        code: 'co'
+                    },
+                    company: 'Vico Products Mfg Co',
+                    date: '2017-10-02',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 53,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 13077
+                },
+                {
+                    id: 1396,
+                    name: 'Dean Ketelsen',
+                    country: {
+                        name: 'Ivory Coast',
+                        code: 'ci'
+                    },
+                    company: 'J M Custom Design Millwork',
+                    date: '2019-07-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 98,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 83423
+                },
+                {
+                    id: 1397,
+                    name: 'Levi Munis',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Farrell \u0026 Johnson Office Equip',
+                    date: '2017-06-24',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 14350
+                },
+                {
+                    id: 1398,
+                    name: 'Sylvie Ryser',
+                    country: {
+                        name: 'India',
+                        code: 'in'
+                    },
+                    company: 'Millers Market \u0026 Deli',
+                    date: '2016-02-23',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 89,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 98864
+                },
+                {
+                    id: 1399,
+                    name: 'Sharee Maile',
+                    country: {
+                        name: 'Ireland',
+                        code: 'ie'
+                    },
+                    company: 'Holiday Inn Naperville',
+                    date: '2020-07-17',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 29326
+                },
+                {
+                    id: 1400,
+                    name: 'Cordelia Storment',
+                    country: {
+                        name: 'Guatemala',
+                        code: 'gt'
+                    },
+                    company: 'Burrows, Jon H Esq',
+                    date: '2020-02-17',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 81198
+                },
+                {
+                    id: 1401,
+                    name: 'Mollie Mcdoniel',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Dock Seal Specialty',
+                    date: '2017-08-13',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 59,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 82391
+                },
+                {
+                    id: 1402,
+                    name: 'Brett Mccullan',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Five Star Limousines Of Tx Inc',
+                    date: '2015-05-21',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 48071
+                },
+                {
+                    id: 1403,
+                    name: 'Teddy Pedrozo',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Barkan, Neal J Esq',
+                    date: '2019-02-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 14593
+                },
+                {
+                    id: 1404,
+                    name: 'Tasia Andreason',
+                    country: {
+                        name: 'Venezuela',
+                        code: 've'
+                    },
+                    company: 'Campbell, Robert A',
+                    date: '2016-03-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 25,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 8750
+                },
+                {
+                    id: 1405,
+                    name: 'Hubert Walthall',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Dee, Deanna',
+                    date: '2020-12-19',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 32,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 39655
+                },
+                {
+                    id: 1406,
+                    name: 'Arthur Farrow',
+                    country: {
+                        name: 'Brazil',
+                        code: 'br'
+                    },
+                    company: 'Young, Timothy L Esq',
+                    date: '2019-02-05',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 55,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 71713
+                },
+                {
+                    id: 1407,
+                    name: 'Vilma Berlanga',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Wells, D Fred Esq',
+                    date: '2016-02-09',
+                    status: 'unqualified',
+                    verified: false,
+                    activity: 26,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 81056
+                },
+                {
+                    id: 1408,
+                    name: 'Billye Miro',
+                    country: {
+                        name: 'Hungary',
+                        code: 'hu'
+                    },
+                    company: 'Gray, Francine H Esq',
+                    date: '2015-09-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 70,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 34220
+                },
+                {
+                    id: 1409,
+                    name: 'Glenna Slayton',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Toledo Iv Care',
+                    date: '2016-03-10',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 21459
+                },
+                {
+                    id: 1410,
+                    name: 'Mitzie Hudnall',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Cangro Transmission Co',
+                    date: '2020-05-04',
+                    status: 'new',
+                    verified: true,
+                    activity: 19,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 51281
+                },
+                {
+                    id: 1411,
+                    name: 'Bernardine Rodefer',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Sat Poly Inc',
+                    date: '2020-10-19',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 53841
+                },
+                {
+                    id: 1412,
+                    name: 'Staci Schmaltz',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Midwest Contracting \u0026 Mfg Inc',
+                    date: '2018-03-14',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 81,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 34878
+                },
+                {
+                    id: 1413,
+                    name: 'Nichelle Meteer',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'Print Doctor',
+                    date: '2016-09-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 85399
+                },
+                {
+                    id: 1414,
+                    name: 'Janine Rhoden',
+                    country: {
+                        name: 'Nigeria',
+                        code: 'ng'
+                    },
+                    company: 'Nordic Group Inc',
+                    date: '2018-08-13',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 95,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 29237
+                },
+                {
+                    id: 1415,
+                    name: 'Ettie Hoopengardner',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Jackson Millwork Co',
+                    date: '2017-07-24',
+                    status: 'renewal',
+                    verified: false,
+                    activity: 23,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 12179
+                },
+                {
+                    id: 1416,
+                    name: 'Eden Jayson',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Harris Corporation',
+                    date: '2018-03-15',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 27840
+                },
+                {
+                    id: 1417,
+                    name: 'Lynelle Auber',
+                    country: {
+                        name: 'Netherlands',
+                        code: 'nl'
+                    },
+                    company: 'United Cerebral Palsy Of Ne Pa',
+                    date: '2020-12-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 51958
+                },
+                {
+                    id: 1418,
+                    name: 'Merissa Tomblin',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'One Day Surgery Center Inc',
+                    date: '2018-03-05',
+                    status: 'new',
+                    verified: true,
+                    activity: 50,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 33138
+                },
+                {
+                    id: 1419,
+                    name: 'Golda Kaniecki',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Calaveras Prospect',
+                    date: '2019-04-17',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 82539
+                },
+                {
+                    id: 1420,
+                    name: 'Catarina Gleich',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Terk, Robert E Esq',
+                    date: '2017-01-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 5619
+                },
+                {
+                    id: 1421,
+                    name: 'Virgie Kiel',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Cullen, Terrence P Esq',
+                    date: '2016-06-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 89,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 44763
+                },
+                {
+                    id: 1422,
+                    name: 'Jolene Ostolaza',
+                    country: {
+                        name: 'Puerto Rico',
+                        code: 'pr'
+                    },
+                    company: 'Central Die Casting Mfg Co Inc',
+                    date: '2016-08-08',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 97208
+                },
+                {
+                    id: 1423,
+                    name: 'Keneth Borgman',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Centerline Engineering',
+                    date: '2019-02-04',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 93316
+                },
+                {
+                    id: 1424,
+                    name: 'Rikki Nayar',
+                    country: {
+                        name: 'Norway',
+                        code: 'no'
+                    },
+                    company: 'Targan \u0026 Kievit Pa',
+                    date: '2017-03-06',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 23786
+                },
+                {
+                    id: 1425,
+                    name: 'Elke Sengbusch',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Riley Riper Hollin \u0026 Colagreco',
+                    date: '2019-05-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 98367
+                },
+                {
+                    id: 1426,
+                    name: 'Hoa Sarao',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Kaplan, Joel S Esq',
+                    date: '2020-08-13',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 0,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 68683
+                },
+                {
+                    id: 1427,
+                    name: 'Trinidad Mcrae',
+                    country: {
+                        name: 'Burkina Faso',
+                        code: 'bf'
+                    },
+                    company: 'Water Office',
+                    date: '2020-12-26',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 76,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 85602
+                },
+                {
+                    id: 1428,
+                    name: 'Mari Lueckenbach',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Westbrooks, Nelson E Jr',
+                    date: '2017-10-27',
+                    status: 'new',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 14402
+                },
+                {
+                    id: 1429,
+                    name: 'Selma Husser',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Armon Communications',
+                    date: '2018-02-16',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 84,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 81608
+                },
+                {
+                    id: 1430,
+                    name: 'Antione Onofrio',
+                    country: {
+                        name: 'Taiwan',
+                        code: 'tw'
+                    },
+                    company: 'Jacobs \u0026 Gerber Inc',
+                    date: '2017-11-07',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 37,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 15573
+                },
+                {
+                    id: 1431,
+                    name: 'Luisa Jurney',
+                    country: {
+                        name: 'Canada',
+                        code: 'ca'
+                    },
+                    company: 'Forest Fire Laboratory',
+                    date: '2018-06-12',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 96,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 50121
+                },
+                {
+                    id: 1432,
+                    name: 'Clorinda Heimann',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Haughey, Charles Jr',
+                    date: '2016-11-03',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 93911
+                },
+                {
+                    id: 1433,
+                    name: 'Dick Wenzinger',
+                    country: {
+                        name: 'Mexico',
+                        code: 'mx'
+                    },
+                    company: 'Wheaton Plastic Products',
+                    date: '2017-04-05',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 66383
+                },
+                {
+                    id: 1434,
+                    name: 'Ahmed Angalich',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Reese Plastics',
+                    date: '2018-11-20',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 83,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 89183
+                },
+                {
+                    id: 1435,
+                    name: 'Iluminada Ohms',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Nazette Marner Good Wendt',
+                    date: '2015-08-18',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 66,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 9752
+                },
+                {
+                    id: 1436,
+                    name: 'Joanna Leinenbach',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Levinson Axelrod Wheaton',
+                    date: '2016-02-11',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 64,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 2623
+                },
+                {
+                    id: 1437,
+                    name: 'Caprice Suell',
+                    country: {
+                        name: 'Algeria',
+                        code: 'dz'
+                    },
+                    company: 'Egnor, W Dan Esq',
+                    date: '2018-07-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 87620
+                },
+                {
+                    id: 1438,
+                    name: 'Stephane Myricks',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Portland Central Thriftlodge',
+                    date: '2018-05-28',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 51,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 14625
+                },
+                {
+                    id: 1439,
+                    name: 'Quentin Swayze',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Ulbrich Trucking',
+                    date: '2019-02-11',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 37,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 39339
+                },
+                {
+                    id: 1440,
+                    name: 'Annmarie Castros',
+                    country: {
+                        name: 'Jamaica',
+                        code: 'jm'
+                    },
+                    company: 'Tipiak Inc',
+                    date: '2015-08-24',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 46,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 77704
+                },
+                {
+                    id: 1441,
+                    name: 'Shonda Greenbush',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Saint George Well Drilling',
+                    date: '2018-06-01',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 75326
+                },
+                {
+                    id: 1442,
+                    name: 'Cecil Lapage',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Hawkes, Douglas D',
+                    date: '2018-11-09',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 71364
+                },
+                {
+                    id: 1443,
+                    name: 'Jeanice Claucherty',
+                    country: {
+                        name: 'Lithuania',
+                        code: 'lt'
+                    },
+                    company: 'Accurel Systems Intrntl Corp',
+                    date: '2016-06-02',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 48,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 73360
+                },
+                {
+                    id: 1444,
+                    name: 'Josphine Villanueva',
+                    country: {
+                        name: 'Japan',
+                        code: 'jp'
+                    },
+                    company: 'Santa Cruz Community Internet',
+                    date: '2019-11-08',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 39,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 59442
+                },
+                {
+                    id: 1445,
+                    name: 'Daniel Perruzza',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Gersh \u0026 Danielson',
+                    date: '2017-09-24',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 86,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 84338
+                },
+                {
+                    id: 1446,
+                    name: 'Cassi Wildfong',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Cobb, James O Esq',
+                    date: '2015-09-08',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 85,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 72545
+                },
+                {
+                    id: 1447,
+                    name: 'Britt Galam',
+                    country: {
+                        name: 'Poland',
+                        code: 'pl'
+                    },
+                    company: 'Wheatley Trucking Company',
+                    date: '2020-10-26',
+                    status: 'new',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 53307
+                },
+                {
+                    id: 1448,
+                    name: 'Adell Lipkin',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Systems Graph Inc Ab Dick Dlr',
+                    date: '2017-05-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 92,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 12178
+                },
+                {
+                    id: 1449,
+                    name: 'Jacqueline Rowling',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'John Hancock Mutl Life Ins Co',
+                    date: '2019-06-28',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 35576
+                },
+                {
+                    id: 1450,
+                    name: 'Lonny Weglarz',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'History Division Of State',
+                    date: '2016-08-12',
+                    status: 'new',
+                    verified: true,
+                    activity: 49,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 20507
+                },
+                {
+                    id: 1451,
+                    name: 'Lonna Diestel',
+                    country: {
+                        name: 'Philippines',
+                        code: 'ph'
+                    },
+                    company: 'Dimmock, Thomas J Esq',
+                    date: '2017-02-10',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 9,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 56415
+                },
+                {
+                    id: 1452,
+                    name: 'Cristal Samara',
+                    country: {
+                        name: 'Australia',
+                        code: 'au'
+                    },
+                    company: 'Intermed Inc',
+                    date: '2016-08-17',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 33427
+                },
+                {
+                    id: 1453,
+                    name: 'Kenneth Grenet',
+                    country: {
+                        name: 'Croatia',
+                        code: 'hr'
+                    },
+                    company: 'Bank Of New York',
+                    date: '2020-07-24',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 44004
+                },
+                {
+                    id: 1454,
+                    name: 'Elli Mclaird',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Sportmaster Intrnatl',
+                    date: '2017-06-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 37227
+                },
+                {
+                    id: 1455,
+                    name: 'Alline Jeanty',
+                    country: {
+                        name: 'Denmark',
+                        code: 'dk'
+                    },
+                    company: 'W W John Holden Inc',
+                    date: '2015-12-08',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 74,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 44560
+                },
+                {
+                    id: 1456,
+                    name: 'Sharika Eanes',
+                    country: {
+                        name: 'Chile',
+                        code: 'cl'
+                    },
+                    company: 'Maccani \u0026 Delp',
+                    date: '2018-08-16',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 50922
+                },
+                {
+                    id: 1457,
+                    name: 'Nu Mcnease',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Amazonia Film Project',
+                    date: '2018-07-03',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 47,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 61262
+                },
+                {
+                    id: 1458,
+                    name: 'Daniela Comnick',
+                    country: {
+                        name: 'Tunisia',
+                        code: 'tn'
+                    },
+                    company: 'Water \u0026 Sewer Department',
+                    date: '2017-07-07',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 13459
+                },
+                {
+                    id: 1459,
+                    name: 'Cecilia Colaizzo',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Switchcraft Inc',
+                    date: '2019-06-08',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 21,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 52299
+                },
+                {
+                    id: 1460,
+                    name: 'Leslie Threets',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'C W D C Metal Fabricators',
+                    date: '2016-11-26',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 50,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 61040
+                },
+                {
+                    id: 1461,
+                    name: 'Nan Koppinger',
+                    country: {
+                        name: 'Norway',
+                        code: 'no'
+                    },
+                    company: 'Shimotani, Grace T',
+                    date: '2020-11-15',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 94,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 91297
+                },
+                {
+                    id: 1462,
+                    name: 'Izetta Dewar',
+                    country: {
+                        name: 'Cuba',
+                        code: 'cu'
+                    },
+                    company: 'Lisatoni, Jean Esq',
+                    date: '2019-11-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 41,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 39947
+                },
+                {
+                    id: 1463,
+                    name: 'Tegan Arceo',
+                    country: {
+                        name: 'Iceland',
+                        code: 'is'
+                    },
+                    company: 'Ceramic Tile Sales Inc',
+                    date: '2016-08-07',
+                    status: 'new',
+                    verified: true,
+                    activity: 79,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 78224
+                },
+                {
+                    id: 1464,
+                    name: 'Ruthann Keener',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Maiden Craft Inc',
+                    date: '2019-04-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 43,
+                    representative: {
+                        name: 'Elwin Sharvill',
+                        image: 'elwinsharvill.png'
+                    },
+                    balance: 22727
+                },
+                {
+                    id: 1465,
+                    name: 'Joni Breland',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Carriage House Cllsn Rpr Inc',
+                    date: '2018-07-20',
+                    status: 'new',
+                    verified: true,
+                    activity: 18,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 70650
+                },
+                {
+                    id: 1466,
+                    name: 'Vi Rentfro',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Video Workshop',
+                    date: '2018-10-01',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 99,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 45956
+                },
+                {
+                    id: 1467,
+                    name: 'Colette Kardas',
+                    country: {
+                        name: 'Honduras',
+                        code: 'hn'
+                    },
+                    company: 'Fresno Tile Center Inc',
+                    date: '2017-08-22',
+                    status: 'new',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 72627
+                },
+                {
+                    id: 1468,
+                    name: 'Malcolm Tromblay',
+                    country: {
+                        name: 'Uruguay',
+                        code: 'uy'
+                    },
+                    company: 'Versatile Sash \u0026 Woodwork',
+                    date: '2019-11-25',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 23,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 80176
+                },
+                {
+                    id: 1469,
+                    name: 'Ryan Harnos',
+                    country: {
+                        name: 'Paraguay',
+                        code: 'py'
+                    },
+                    company: 'Warner Electric Brk \u0026 Cltch Co',
+                    date: '2019-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 71,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 97227
+                },
+                {
+                    id: 1470,
+                    name: 'Jess Chaffins',
+                    country: {
+                        name: 'Belarus',
+                        code: 'by'
+                    },
+                    company: 'New York Public Library',
+                    date: '2017-02-12',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 91,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 63121
+                },
+                {
+                    id: 1471,
+                    name: 'Sharen Bourbon',
+                    country: {
+                        name: 'Saudi Arabia',
+                        code: 'sa'
+                    },
+                    company: 'Mccaleb, John A Esq',
+                    date: '2017-06-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 35,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 44726
+                },
+                {
+                    id: 1472,
+                    name: 'Nickolas Juvera',
+                    country: {
+                        name: 'Finland',
+                        code: 'fi'
+                    },
+                    company: 'United Oil Co Inc',
+                    date: '2019-01-06',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 70748
+                },
+                {
+                    id: 1473,
+                    name: 'Gary Nunlee',
+                    country: {
+                        name: 'Turkey',
+                        code: 'tr'
+                    },
+                    company: 'Irving Foot Center',
+                    date: '2015-07-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 72,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 71061
+                },
+                {
+                    id: 1474,
+                    name: 'Diane Devreese',
+                    country: {
+                        name: 'Bolivia',
+                        code: 'bo'
+                    },
+                    company: 'Acme Supply Co',
+                    date: '2018-05-13',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 7486
+                },
+                {
+                    id: 1475,
+                    name: 'Roslyn Chavous',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Mcrae, James L',
+                    date: '2018-03-20',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 45,
+                    representative: {
+                        name: 'Bernardo Dominic',
+                        image: 'bernardodominic.png'
+                    },
+                    balance: 58495
+                },
+                {
+                    id: 1476,
+                    name: 'Glory Schieler',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Mcgraths Seafood',
+                    date: '2017-05-13',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 96252
+                },
+                {
+                    id: 1477,
+                    name: 'Rasheeda Sayaphon',
+                    country: {
+                        name: 'Latvia',
+                        code: 'lv'
+                    },
+                    company: 'Kummerer, J Michael Esq',
+                    date: '2017-02-21',
+                    status: 'proposal',
+                    verified: true,
+                    activity: 12,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 71454
+                },
+                {
+                    id: 1478,
+                    name: 'Alpha Palaia',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Stoffer, James M Jr',
+                    date: '2017-07-21',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 4,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 81894
+                },
+                {
+                    id: 1479,
+                    name: 'Refugia Jacobos',
+                    country: {
+                        name: 'China',
+                        code: 'cn'
+                    },
+                    company: 'North Central Fl Sfty Cncl',
+                    date: '2020-11-25',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 18,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 31601
+                },
+                {
+                    id: 1480,
+                    name: 'Shawnda Yori',
+                    country: {
+                        name: 'Luxembourg',
+                        code: 'lu'
+                    },
+                    company: 'Fiorucci Foods Usa Inc',
+                    date: '2018-05-09',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 11,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 12090
+                },
+                {
+                    id: 1481,
+                    name: 'Mona Delasancha',
+                    country: {
+                        name: 'Hong Kong',
+                        code: 'hk'
+                    },
+                    company: 'Sign All',
+                    date: '2017-10-06',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 61,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 24073
+                },
+                {
+                    id: 1482,
+                    name: 'Gilma Liukko',
+                    country: {
+                        name: 'Morocco',
+                        code: 'ma'
+                    },
+                    company: 'Sammys Steak Den',
+                    date: '2018-10-06',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 34,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 35129
+                },
+                {
+                    id: 1483,
+                    name: 'Janey Gabisi',
+                    country: {
+                        name: 'Israel',
+                        code: 'il'
+                    },
+                    company: 'Dobscha, Stephen F Esq',
+                    date: '2019-05-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 38,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 25518
+                },
+                {
+                    id: 1484,
+                    name: 'Lili Paskin',
+                    country: {
+                        name: 'Costa Rica',
+                        code: 'cr'
+                    },
+                    company: 'Morgan Custom Homes',
+                    date: '2018-06-11',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 69,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 7300
+                },
+                {
+                    id: 1485,
+                    name: 'Loren Asar',
+                    country: {
+                        name: 'Italy',
+                        code: 'it'
+                    },
+                    company: 'Olsen Payne \u0026 Company',
+                    date: '2017-12-11',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 16,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 82949
+                },
+                {
+                    id: 1486,
+                    name: 'Dorothy Chesterfield',
+                    country: {
+                        name: 'Spain',
+                        code: 'es'
+                    },
+                    company: 'Cowan \u0026 Kelly',
+                    date: '2015-08-11',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 31,
+                    representative: {
+                        name: 'Anna Fali',
+                        image: 'annafali.png'
+                    },
+                    balance: 25044
+                },
+                {
+                    id: 1487,
+                    name: 'Gail Similton',
+                    country: {
+                        name: 'Malaysia',
+                        code: 'my'
+                    },
+                    company: 'Johnson, Wes Esq',
+                    date: '2016-08-10',
+                    status: 'qualified',
+                    verified: true,
+                    activity: 63,
+                    representative: {
+                        name: 'Xuxue Feng',
+                        image: 'xuxuefeng.png'
+                    },
+                    balance: 97553
+                },
+                {
+                    id: 1488,
+                    name: 'Catalina Tillotson',
+                    country: {
+                        name: 'Pakistan',
+                        code: 'pk'
+                    },
+                    company: 'Icn Pharmaceuticals Inc',
+                    date: '2018-08-04',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 13,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 38294
+                },
+                {
+                    id: 1489,
+                    name: 'Lawrence Lorens',
+                    country: {
+                        name: 'Egypt',
+                        code: 'eg'
+                    },
+                    company: 'New England Sec Equip Co Inc',
+                    date: '2020-04-15',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 82,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 56617
+                },
+                {
+                    id: 1490,
+                    name: 'Carlee Boulter',
+                    country: {
+                        name: 'Vietnam',
+                        code: 'vn'
+                    },
+                    company: 'Tippett, Troy M Ii',
+                    date: '2016-09-22',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 71,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 76817
+                },
+                {
+                    id: 1491,
+                    name: 'Thaddeus Ankeny',
+                    country: {
+                        name: 'Qatar',
+                        code: 'qa'
+                    },
+                    company: 'Atc Contracting',
+                    date: '2015-03-08',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 78,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 80787
+                },
+                {
+                    id: 1492,
+                    name: 'Jovita Oles',
+                    country: {
+                        name: 'Sweden',
+                        code: 'se'
+                    },
+                    company: 'Pagano, Philip G Esq',
+                    date: '2019-07-18',
+                    status: 'negotiation',
+                    verified: true,
+                    activity: 42,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 4158
+                },
+                {
+                    id: 1493,
+                    name: 'Alesia Hixenbaugh',
+                    country: {
+                        name: 'Thailand',
+                        code: 'th'
+                    },
+                    company: 'Kwikprint',
+                    date: '2017-07-24',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 23,
+                    representative: {
+                        name: 'Ivan Magalhaes',
+                        image: 'ivanmagalhaes.png'
+                    },
+                    balance: 66993
+                },
+                {
+                    id: 1494,
+                    name: 'Lai Harabedian',
+                    country: {
+                        name: 'Serbia',
+                        code: 'rs'
+                    },
+                    company: 'Buergi \u0026 Madden Scale',
+                    date: '2018-11-11',
+                    status: 'new',
+                    verified: true,
+                    activity: 28,
+                    representative: {
+                        name: 'Asiya Javayant',
+                        image: 'asiyajavayant.png'
+                    },
+                    balance: 53330
+                },
+                {
+                    id: 1495,
+                    name: 'Brittni Gillaspie',
+                    country: {
+                        name: 'Senegal',
+                        code: 'sn'
+                    },
+                    company: 'Inner Label',
+                    date: '2019-11-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 14,
+                    representative: {
+                        name: 'Ioni Bowcher',
+                        image: 'ionibowcher.png'
+                    },
+                    balance: 72342
+                },
+                {
+                    id: 1496,
+                    name: 'Raylene Kampa',
+                    country: {
+                        name: 'Belgium',
+                        code: 'be'
+                    },
+                    company: 'Hermar Inc',
+                    date: '2020-04-22',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 65,
+                    representative: {
+                        name: 'Stephen Shaw',
+                        image: 'stephenshaw.png'
+                    },
+                    balance: 53660
+                },
+                {
+                    id: 1497,
+                    name: 'Flo Bookamer',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Simonton Howe \u0026 Schneider Pc',
+                    date: '2020-08-10',
+                    status: 'unqualified',
+                    verified: true,
+                    activity: 30,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 44528
+                },
+                {
+                    id: 1498,
+                    name: 'Jani Biddy',
+                    country: {
+                        name: 'Switzerland',
+                        code: 'ch'
+                    },
+                    company: 'Warehouse Office \u0026 Paper Prod',
+                    date: '2019-11-07',
+                    status: 'negotiation',
+                    verified: false,
+                    activity: 20,
+                    representative: {
+                        name: 'Onyama Limba',
+                        image: 'onyamalimba.png'
+                    },
+                    balance: 69613
+                },
+                {
+                    id: 1499,
+                    name: 'Chauncey Motley',
+                    country: {
+                        name: 'Argentina',
+                        code: 'ar'
+                    },
+                    company: 'Affiliated With Travelodge',
+                    date: '2019-04-23',
+                    status: 'renewal',
+                    verified: true,
+                    activity: 42,
+                    representative: {
+                        name: 'Amy Elsner',
+                        image: 'amyelsner.png'
+                    },
+                    balance: 88090
+                }
+            ];
+        },
+
+        getCustomersSmall() {
+            return Promise.resolve(this.getData().slice(0, 10));
+        },
+
+        getCustomersMedium() {
+            return Promise.resolve(this.getData().slice(0, 50));
+        },
+
+        getCustomersLarge() {
+            return Promise.resolve(this.getData().slice(0, 200));
+        },
+
+        getCustomersXLarge() {
+            return Promise.resolve(this.getData());
+        },
+
+        getCustomers(params) {
+            const queryParams = params
+                ? Object.keys(params)
+                      .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+                      .join('&')
+                : '';
+
+            return fetch('http://github.com/service/https://www.primefaces.org/data/customers?' + queryParams).then((res) => res.json());
+        }
+    };
+    `,
+    EventService: `export const EventService = {
+        getData() {
+            return [
+                { id: 1, title: 'All Day Event', start: '2017-02-01' },
+                { id: 2, title: 'Long Event', start: '2017-02-07', end: '2017-02-10' },
+                { id: 3, title: 'Repeating Event', start: '2017-02-09T16:00:00' },
+                { id: 4, title: 'Repeating Event', start: '2017-02-16T16:00:00' },
+                { id: 5, title: 'Conference', start: '2017-02-11', end: '2017-02-13' },
+                { id: 6, title: 'Meeting', start: '2017-02-12T10:30:00', end: '2017-02-12T12:30:00' },
+                { id: 7, title: 'Lunch', start: '2017-02-12T12:00:00' },
+                { id: 8, title: 'Meeting', start: '2017-02-12T14:30:00' },
+                { id: 9, title: 'Happy Hour', start: '2017-02-12T17:30:00' },
+                { id: 10, title: 'Dinner', start: '2017-02-12T20:00:00' },
+                { id: 11, title: 'Birthday Party', start: '2017-02-13T07:00:00' },
+                { id: 12, title: 'Click for Google', url: 'https://www.google.com/', start: '2017-02-28' }
+            ];
+        },
+
+        getEvents() {
+            return Promise.resolve(this.getData());
+        }
+    };
+    `,
+    NodeService: `export const NodeService = {
+        getTreeNodesData() {
+            return [
+                {
+                    key: '0',
+                    label: 'Documents',
+                    data: 'Documents Folder',
+                    icon: 'pi pi-fw pi-inbox',
+                    children: [
+                        {
+                            key: '0-0',
+                            label: 'Work',
+                            data: 'Work Folder',
+                            icon: 'pi pi-fw pi-cog',
+                            children: [
+                                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+                            ]
+                        },
+                        {
+                            key: '0-1',
+                            label: 'Home',
+                            data: 'Home Folder',
+                            icon: 'pi pi-fw pi-home',
+                            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    label: 'Events',
+                    data: 'Events Folder',
+                    icon: 'pi pi-fw pi-calendar',
+                    children: [
+                        { key: '1-0', label: 'Meeting', icon: 'pi pi-fw pi-calendar-plus', data: 'Meeting' },
+                        { key: '1-1', label: 'Product Launch', icon: 'pi pi-fw pi-calendar-plus', data: 'Product Launch' },
+                        { key: '1-2', label: 'Report Review', icon: 'pi pi-fw pi-calendar-plus', data: 'Report Review' }
+                    ]
+                },
+                {
+                    key: '2',
+                    label: 'Movies',
+                    data: 'Movies Folder',
+                    icon: 'pi pi-fw pi-star-fill',
+                    children: [
+                        {
+                            key: '2-0',
+                            icon: 'pi pi-fw pi-star-fill',
+                            label: 'Al Pacino',
+                            data: 'Pacino Movies',
+                            children: [
+                                { key: '2-0-0', label: 'Scarface', icon: 'pi pi-fw pi-video', data: 'Scarface Movie' },
+                                { key: '2-0-1', label: 'Serpico', icon: 'pi pi-fw pi-video', data: 'Serpico Movie' }
+                            ]
+                        },
+                        {
+                            key: '2-1',
+                            label: 'Robert De Niro',
+                            icon: 'pi pi-fw pi-star-fill',
+                            data: 'De Niro Movies',
+                            children: [
+                                { key: '2-1-0', label: 'Goodfellas', icon: 'pi pi-fw pi-video', data: 'Goodfellas Movie' },
+                                { key: '2-1-1', label: 'Untouchables', icon: 'pi pi-fw pi-video', data: 'Untouchables Movie' }
+                            ]
+                        }
+                    ]
+                }
+            ];
+        },
+
+        getTreeTableNodesData() {
+            return [
+                {
+                    key: '0',
+                    data: {
+                        name: 'Applications',
+                        size: '100kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '0-0',
+                            data: {
+                                name: 'React',
+                                size: '25kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '0-0-0',
+                                    data: {
+                                        name: 'react.app',
+                                        size: '10kb',
+                                        type: 'Application'
+                                    }
+                                },
+                                {
+                                    key: '0-0-1',
+                                    data: {
+                                        name: 'native.app',
+                                        size: '10kb',
+                                        type: 'Application'
+                                    }
+                                },
+                                {
+                                    key: '0-0-2',
+                                    data: {
+                                        name: 'mobile.app',
+                                        size: '5kb',
+                                        type: 'Application'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            key: '0-1',
+                            data: {
+                                name: 'editor.app',
+                                size: '25kb',
+                                type: 'Application'
+                            }
+                        },
+                        {
+                            key: '0-2',
+                            data: {
+                                name: 'settings.app',
+                                size: '50kb',
+                                type: 'Application'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '1',
+                    data: {
+                        name: 'Cloud',
+                        size: '20kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '1-0',
+                            data: {
+                                name: 'backup-1.zip',
+                                size: '10kb',
+                                type: 'Zip'
+                            }
+                        },
+                        {
+                            key: '1-1',
+                            data: {
+                                name: 'backup-2.zip',
+                                size: '10kb',
+                                type: 'Zip'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '2',
+                    data: {
+                        name: 'Desktop',
+                        size: '150kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '2-0',
+                            data: {
+                                name: 'note-meeting.txt',
+                                size: '50kb',
+                                type: 'Text'
+                            }
+                        },
+                        {
+                            key: '2-1',
+                            data: {
+                                name: 'note-todo.txt',
+                                size: '100kb',
+                                type: 'Text'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '3',
+                    data: {
+                        name: 'Documents',
+                        size: '75kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '3-0',
+                            data: {
+                                name: 'Work',
+                                size: '55kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '3-0-0',
+                                    data: {
+                                        name: 'Expenses.doc',
+                                        size: '30kb',
+                                        type: 'Document'
+                                    }
+                                },
+                                {
+                                    key: '3-0-1',
+                                    data: {
+                                        name: 'Resume.doc',
+                                        size: '25kb',
+                                        type: 'Resume'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            key: '3-1',
+                            data: {
+                                name: 'Home',
+                                size: '20kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '3-1-0',
+                                    data: {
+                                        name: 'Invoices',
+                                        size: '20kb',
+                                        type: 'Text'
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    key: '4',
+                    data: {
+                        name: 'Downloads',
+                        size: '25kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '4-0',
+                            data: {
+                                name: 'Spanish',
+                                size: '10kb',
+                                type: 'Folder'
+                            },
+                            children: [
+                                {
+                                    key: '4-0-0',
+                                    data: {
+                                        name: 'tutorial-a1.txt',
+                                        size: '5kb',
+                                        type: 'Text'
+                                    }
+                                },
+                                {
+                                    key: '4-0-1',
+                                    data: {
+                                        name: 'tutorial-a2.txt',
+                                        size: '5kb',
+                                        type: 'Text'
+                                    }
+                                }
+                            ]
+                        },
+                        {
+                            key: '4-1',
+                            data: {
+                                name: 'Travel',
+                                size: '15kb',
+                                type: 'Text'
+                            },
+                            children: [
+                                {
+                                    key: '4-1-0',
+                                    data: {
+                                        name: 'Hotel.pdf',
+                                        size: '10kb',
+                                        type: 'PDF'
+                                    }
+                                },
+                                {
+                                    key: '4-1-1',
+                                    data: {
+                                        name: 'Flight.pdf',
+                                        size: '5kb',
+                                        type: 'PDF'
+                                    }
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    key: '5',
+                    data: {
+                        name: 'Main',
+                        size: '50kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '5-0',
+                            data: {
+                                name: 'bin',
+                                size: '50kb',
+                                type: 'Link'
+                            }
+                        },
+                        {
+                            key: '5-1',
+                            data: {
+                                name: 'etc',
+                                size: '100kb',
+                                type: 'Link'
+                            }
+                        },
+                        {
+                            key: '5-2',
+                            data: {
+                                name: 'var',
+                                size: '100kb',
+                                type: 'Link'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '6',
+                    data: {
+                        name: 'Other',
+                        size: '5kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '6-0',
+                            data: {
+                                name: 'todo.txt',
+                                size: '3kb',
+                                type: 'Text'
+                            }
+                        },
+                        {
+                            key: '6-1',
+                            data: {
+                                name: 'logo.png',
+                                size: '2kb',
+                                type: 'Picture'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '7',
+                    data: {
+                        name: 'Pictures',
+                        size: '150kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '7-0',
+                            data: {
+                                name: 'barcelona.jpg',
+                                size: '90kb',
+                                type: 'Picture'
+                            }
+                        },
+                        {
+                            key: '7-1',
+                            data: {
+                                name: 'primeng.png',
+                                size: '30kb',
+                                type: 'Picture'
+                            }
+                        },
+                        {
+                            key: '7-2',
+                            data: {
+                                name: 'prime.jpg',
+                                size: '30kb',
+                                type: 'Picture'
+                            }
+                        }
+                    ]
+                },
+                {
+                    key: '8',
+                    data: {
+                        name: 'Videos',
+                        size: '1500kb',
+                        type: 'Folder'
+                    },
+                    children: [
+                        {
+                            key: '8-0',
+                            data: {
+                                name: 'primefaces.mkv',
+                                size: '1000kb',
+                                type: 'Video'
+                            }
+                        },
+                        {
+                            key: '8-1',
+                            data: {
+                                name: 'intro.avi',
+                                size: '500kb',
+                                type: 'Video'
+                            }
+                        }
+                    ]
+                }
+            ];
+        },
+
+        getTreeTableNodes() {
+            return Promise.resolve(this.getTreeTableNodesData());
+        },
+
+        getTreeNodes() {
+            return Promise.resolve(this.getTreeNodesData());
+        }
+    };
+    `,
+    PhotoService: `export const PhotoService = {
+        getData() {
+            return [
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+                    alt: 'Description for Image 1',
+                    title: 'Title 1'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria2.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria2s.jpg',
+                    alt: 'Description for Image 2',
+                    title: 'Title 2'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria3.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria3s.jpg',
+                    alt: 'Description for Image 3',
+                    title: 'Title 3'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria4.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria4s.jpg',
+                    alt: 'Description for Image 4',
+                    title: 'Title 4'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria5.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria5s.jpg',
+                    alt: 'Description for Image 5',
+                    title: 'Title 5'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria6.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria6s.jpg',
+                    alt: 'Description for Image 6',
+                    title: 'Title 6'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria7s.jpg',
+                    alt: 'Description for Image 7',
+                    title: 'Title 7'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria8.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria8s.jpg',
+                    alt: 'Description for Image 8',
+                    title: 'Title 8'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria9.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria9s.jpg',
+                    alt: 'Description for Image 9',
+                    title: 'Title 9'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria10.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria10s.jpg',
+                    alt: 'Description for Image 10',
+                    title: 'Title 10'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria11.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria11s.jpg',
+                    alt: 'Description for Image 11',
+                    title: 'Title 11'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria12s.jpg',
+                    alt: 'Description for Image 12',
+                    title: 'Title 12'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria13.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria13s.jpg',
+                    alt: 'Description for Image 13',
+                    title: 'Title 13'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria14.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria14s.jpg',
+                    alt: 'Description for Image 14',
+                    title: 'Title 14'
+                },
+                {
+                    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria15.jpg',
+                    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria15s.jpg',
+                    alt: 'Description for Image 15',
+                    title: 'Title 15'
+                }
+            ];
+        },
+
+        getImages() {
+            return Promise.resolve(this.getData());
+        }
+    };
+
+    `,
+    ProductService: `export const ProductService = {
+        getProductsData() {
+            return [
+                {
+                    id: '1000',
+                    code: 'f230fh0g3',
+                    name: 'Bamboo Watch',
+                    description: 'Product Description',
+                    image: 'bamboo-watch.jpg',
+                    price: 65,
+                    category: 'Accessories',
+                    quantity: 24,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1001',
+                    code: 'nvklal433',
+                    name: 'Black Watch',
+                    description: 'Product Description',
+                    image: 'black-watch.jpg',
+                    price: 72,
+                    category: 'Accessories',
+                    quantity: 61,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1002',
+                    code: 'zz21cz3c1',
+                    name: 'Blue Band',
+                    description: 'Product Description',
+                    image: 'blue-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1003',
+                    code: '244wgerg2',
+                    name: 'Blue T-Shirt',
+                    description: 'Product Description',
+                    image: 'blue-t-shirt.jpg',
+                    price: 29,
+                    category: 'Clothing',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1004',
+                    code: 'h456wer53',
+                    name: 'Bracelet',
+                    description: 'Product Description',
+                    image: 'bracelet.jpg',
+                    price: 15,
+                    category: 'Accessories',
+                    quantity: 73,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1005',
+                    code: 'av2231fwg',
+                    name: 'Brown Purse',
+                    description: 'Product Description',
+                    image: 'brown-purse.jpg',
+                    price: 120,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1006',
+                    code: 'bib36pfvm',
+                    name: 'Chakra Bracelet',
+                    description: 'Product Description',
+                    image: 'chakra-bracelet.jpg',
+                    price: 32,
+                    category: 'Accessories',
+                    quantity: 5,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1007',
+                    code: 'mbvjkgip5',
+                    name: 'Galaxy Earrings',
+                    description: 'Product Description',
+                    image: 'galaxy-earrings.jpg',
+                    price: 34,
+                    category: 'Accessories',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1008',
+                    code: 'vbb124btr',
+                    name: 'Game Controller',
+                    description: 'Product Description',
+                    image: 'game-controller.jpg',
+                    price: 99,
+                    category: 'Electronics',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1009',
+                    code: 'cm230f032',
+                    name: 'Gaming Set',
+                    description: 'Product Description',
+                    image: 'gaming-set.jpg',
+                    price: 299,
+                    category: 'Electronics',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1010',
+                    code: 'plb34234v',
+                    name: 'Gold Phone Case',
+                    description: 'Product Description',
+                    image: 'gold-phone-case.jpg',
+                    price: 24,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1011',
+                    code: '4920nnc2d',
+                    name: 'Green Earbuds',
+                    description: 'Product Description',
+                    image: 'green-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1012',
+                    code: '250vm23cc',
+                    name: 'Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 74,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1013',
+                    code: 'fldsmn31b',
+                    name: 'Grey T-Shirt',
+                    description: 'Product Description',
+                    image: 'grey-t-shirt.jpg',
+                    price: 48,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1014',
+                    code: 'waas1x2as',
+                    name: 'Headphones',
+                    description: 'Product Description',
+                    image: 'headphones.jpg',
+                    price: 175,
+                    category: 'Electronics',
+                    quantity: 8,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1015',
+                    code: 'vb34btbg5',
+                    name: 'Light Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'light-green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 34,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1016',
+                    code: 'k8l6j58jl',
+                    name: 'Lime Band',
+                    description: 'Product Description',
+                    image: 'lime-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 12,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1017',
+                    code: 'v435nn85n',
+                    name: 'Mini Speakers',
+                    description: 'Product Description',
+                    image: 'mini-speakers.jpg',
+                    price: 85,
+                    category: 'Clothing',
+                    quantity: 42,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1018',
+                    code: '09zx9c0zc',
+                    name: 'Painted Phone Case',
+                    description: 'Product Description',
+                    image: 'painted-phone-case.jpg',
+                    price: 56,
+                    category: 'Accessories',
+                    quantity: 41,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1019',
+                    code: 'mnb5mb2m5',
+                    name: 'Pink Band',
+                    description: 'Product Description',
+                    image: 'pink-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1020',
+                    code: 'r23fwf2w3',
+                    name: 'Pink Purse',
+                    description: 'Product Description',
+                    image: 'pink-purse.jpg',
+                    price: 110,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1021',
+                    code: 'pxpzczo23',
+                    name: 'Purple Band',
+                    description: 'Product Description',
+                    image: 'purple-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 6,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1022',
+                    code: '2c42cb5cb',
+                    name: 'Purple Gemstone Necklace',
+                    description: 'Product Description',
+                    image: 'purple-gemstone-necklace.jpg',
+                    price: 45,
+                    category: 'Accessories',
+                    quantity: 62,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1023',
+                    code: '5k43kkk23',
+                    name: 'Purple T-Shirt',
+                    description: 'Product Description',
+                    image: 'purple-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1024',
+                    code: 'lm2tny2k4',
+                    name: 'Shoes',
+                    description: 'Product Description',
+                    image: 'shoes.jpg',
+                    price: 64,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1025',
+                    code: 'nbm5mv45n',
+                    name: 'Sneakers',
+                    description: 'Product Description',
+                    image: 'sneakers.jpg',
+                    price: 78,
+                    category: 'Clothing',
+                    quantity: 52,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4
+                },
+                {
+                    id: '1026',
+                    code: 'zx23zc42c',
+                    name: 'Teal T-Shirt',
+                    description: 'Product Description',
+                    image: 'teal-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 3,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1027',
+                    code: 'acvx872gc',
+                    name: 'Yellow Earbuds',
+                    description: 'Product Description',
+                    image: 'yellow-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 35,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3
+                },
+                {
+                    id: '1028',
+                    code: 'tx125ck42',
+                    name: 'Yoga Mat',
+                    description: 'Product Description',
+                    image: 'yoga-mat.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 15,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5
+                },
+                {
+                    id: '1029',
+                    code: 'gwuby345v',
+                    name: 'Yoga Set',
+                    description: 'Product Description',
+                    image: 'yoga-set.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 8
+                }
+            ];
+        },
+
+        getProductsWithOrdersData() {
+            return [
+                {
+                    id: '1000',
+                    code: 'f230fh0g3',
+                    name: 'Bamboo Watch',
+                    description: 'Product Description',
+                    image: 'bamboo-watch.jpg',
+                    price: 65,
+                    category: 'Accessories',
+                    quantity: 24,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1000-0',
+                            productCode: 'f230fh0g3',
+                            date: '2020-09-13',
+                            amount: 65,
+                            quantity: 1,
+                            customer: 'David James',
+                            status: 'PENDING'
+                        },
+                        {
+                            id: '1000-1',
+                            productCode: 'f230fh0g3',
+                            date: '2020-05-14',
+                            amount: 130,
+                            quantity: 2,
+                            customer: 'Leon Rodrigues',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1000-2',
+                            productCode: 'f230fh0g3',
+                            date: '2019-01-04',
+                            amount: 65,
+                            quantity: 1,
+                            customer: 'Juan Alejandro',
+                            status: 'RETURNED'
+                        },
+                        {
+                            id: '1000-3',
+                            productCode: 'f230fh0g3',
+                            date: '2020-09-13',
+                            amount: 195,
+                            quantity: 3,
+                            customer: 'Claire Morrow',
+                            status: 'CANCELLED'
+                        }
+                    ]
+                },
+                {
+                    id: '1001',
+                    code: 'nvklal433',
+                    name: 'Black Watch',
+                    description: 'Product Description',
+                    image: 'black-watch.jpg',
+                    price: 72,
+                    category: 'Accessories',
+                    quantity: 61,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1001-0',
+                            productCode: 'nvklal433',
+                            date: '2020-05-14',
+                            amount: 72,
+                            quantity: 1,
+                            customer: 'Maisha Jefferson',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1001-1',
+                            productCode: 'nvklal433',
+                            date: '2020-02-28',
+                            amount: 144,
+                            quantity: 2,
+                            customer: 'Octavia Murillo',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1002',
+                    code: 'zz21cz3c1',
+                    name: 'Blue Band',
+                    description: 'Product Description',
+                    image: 'blue-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1002-0',
+                            productCode: 'zz21cz3c1',
+                            date: '2020-07-05',
+                            amount: 79,
+                            quantity: 1,
+                            customer: 'Stacey Leja',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1002-1',
+                            productCode: 'zz21cz3c1',
+                            date: '2020-02-06',
+                            amount: 79,
+                            quantity: 1,
+                            customer: 'Ashley Wickens',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1003',
+                    code: '244wgerg2',
+                    name: 'Blue T-Shirt',
+                    description: 'Product Description',
+                    image: 'blue-t-shirt.jpg',
+                    price: 29,
+                    category: 'Clothing',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: []
+                },
+                {
+                    id: '1004',
+                    code: 'h456wer53',
+                    name: 'Bracelet',
+                    description: 'Product Description',
+                    image: 'bracelet.jpg',
+                    price: 15,
+                    category: 'Accessories',
+                    quantity: 73,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1004-0',
+                            productCode: 'h456wer53',
+                            date: '2020-09-05',
+                            amount: 60,
+                            quantity: 4,
+                            customer: 'Mayumi Misaki',
+                            status: 'PENDING'
+                        },
+                        {
+                            id: '1004-1',
+                            productCode: 'h456wer53',
+                            date: '2019-04-16',
+                            amount: 2,
+                            quantity: 30,
+                            customer: 'Francesco Salvatore',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1005',
+                    code: 'av2231fwg',
+                    name: 'Brown Purse',
+                    description: 'Product Description',
+                    image: 'brown-purse.jpg',
+                    price: 120,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1005-0',
+                            productCode: 'av2231fwg',
+                            date: '2020-01-25',
+                            amount: 120,
+                            quantity: 1,
+                            customer: 'Isabel Sinclair',
+                            status: 'RETURNED'
+                        },
+                        {
+                            id: '1005-1',
+                            productCode: 'av2231fwg',
+                            date: '2019-03-12',
+                            amount: 240,
+                            quantity: 2,
+                            customer: 'Lionel Clifford',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1005-2',
+                            productCode: 'av2231fwg',
+                            date: '2019-05-05',
+                            amount: 120,
+                            quantity: 1,
+                            customer: 'Cody Chavez',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1006',
+                    code: 'bib36pfvm',
+                    name: 'Chakra Bracelet',
+                    description: 'Product Description',
+                    image: 'chakra-bracelet.jpg',
+                    price: 32,
+                    category: 'Accessories',
+                    quantity: 5,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1006-0',
+                            productCode: 'bib36pfvm',
+                            date: '2020-02-24',
+                            amount: 32,
+                            quantity: 1,
+                            customer: 'Arvin Darci',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1006-1',
+                            productCode: 'bib36pfvm',
+                            date: '2020-01-14',
+                            amount: 64,
+                            quantity: 2,
+                            customer: 'Izzy Jones',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1007',
+                    code: 'mbvjkgip5',
+                    name: 'Galaxy Earrings',
+                    description: 'Product Description',
+                    image: 'galaxy-earrings.jpg',
+                    price: 34,
+                    category: 'Accessories',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1007-0',
+                            productCode: 'mbvjkgip5',
+                            date: '2020-06-19',
+                            amount: 34,
+                            quantity: 1,
+                            customer: 'Jennifer Smith',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1008',
+                    code: 'vbb124btr',
+                    name: 'Game Controller',
+                    description: 'Product Description',
+                    image: 'game-controller.jpg',
+                    price: 99,
+                    category: 'Electronics',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1008-0',
+                            productCode: 'vbb124btr',
+                            date: '2020-01-05',
+                            amount: 99,
+                            quantity: 1,
+                            customer: 'Jeanfrancois David',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1008-1',
+                            productCode: 'vbb124btr',
+                            date: '2020-01-19',
+                            amount: 198,
+                            quantity: 2,
+                            customer: 'Ivar Greenwood',
+                            status: 'RETURNED'
+                        }
+                    ]
+                },
+                {
+                    id: '1009',
+                    code: 'cm230f032',
+                    name: 'Gaming Set',
+                    description: 'Product Description',
+                    image: 'gaming-set.jpg',
+                    price: 299,
+                    category: 'Electronics',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1009-0',
+                            productCode: 'cm230f032',
+                            date: '2020-06-24',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Kadeem Mujtaba',
+                            status: 'PENDING'
+                        },
+                        {
+                            id: '1009-1',
+                            productCode: 'cm230f032',
+                            date: '2020-05-11',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Ashley Wickens',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1009-2',
+                            productCode: 'cm230f032',
+                            date: '2019-02-07',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Julie Johnson',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1009-3',
+                            productCode: 'cm230f032',
+                            date: '2020-04-26',
+                            amount: 299,
+                            quantity: 1,
+                            customer: 'Tony Costa',
+                            status: 'CANCELLED'
+                        }
+                    ]
+                },
+                {
+                    id: '1010',
+                    code: 'plb34234v',
+                    name: 'Gold Phone Case',
+                    description: 'Product Description',
+                    image: 'gold-phone-case.jpg',
+                    price: 24,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1010-0',
+                            productCode: 'plb34234v',
+                            date: '2020-02-04',
+                            amount: 24,
+                            quantity: 1,
+                            customer: 'James Butt',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1010-1',
+                            productCode: 'plb34234v',
+                            date: '2020-05-05',
+                            amount: 48,
+                            quantity: 2,
+                            customer: 'Josephine Darakjy',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1011',
+                    code: '4920nnc2d',
+                    name: 'Green Earbuds',
+                    description: 'Product Description',
+                    image: 'green-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 23,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1011-0',
+                            productCode: '4920nnc2d',
+                            date: '2020-06-01',
+                            amount: 89,
+                            quantity: 1,
+                            customer: 'Art Venere',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1012',
+                    code: '250vm23cc',
+                    name: 'Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 74,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1012-0',
+                            productCode: '250vm23cc',
+                            date: '2020-02-05',
+                            amount: 49,
+                            quantity: 1,
+                            customer: 'Lenna Paprocki',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1012-1',
+                            productCode: '250vm23cc',
+                            date: '2020-02-15',
+                            amount: 49,
+                            quantity: 1,
+                            customer: 'Donette Foller',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1013',
+                    code: 'fldsmn31b',
+                    name: 'Grey T-Shirt',
+                    description: 'Product Description',
+                    image: 'grey-t-shirt.jpg',
+                    price: 48,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1013-0',
+                            productCode: 'fldsmn31b',
+                            date: '2020-04-01',
+                            amount: 48,
+                            quantity: 1,
+                            customer: 'Simona Morasca',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1014',
+                    code: 'waas1x2as',
+                    name: 'Headphones',
+                    description: 'Product Description',
+                    image: 'headphones.jpg',
+                    price: 175,
+                    category: 'Electronics',
+                    quantity: 8,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1014-0',
+                            productCode: 'waas1x2as',
+                            date: '2020-05-15',
+                            amount: 175,
+                            quantity: 1,
+                            customer: 'Lenna Paprocki',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1014-1',
+                            productCode: 'waas1x2as',
+                            date: '2020-01-02',
+                            amount: 175,
+                            quantity: 1,
+                            customer: 'Donette Foller',
+                            status: 'CANCELLED'
+                        }
+                    ]
+                },
+                {
+                    id: '1015',
+                    code: 'vb34btbg5',
+                    name: 'Light Green T-Shirt',
+                    description: 'Product Description',
+                    image: 'light-green-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 34,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1015-0',
+                            productCode: 'vb34btbg5',
+                            date: '2020-07-02',
+                            amount: 98,
+                            quantity: 2,
+                            customer: 'Mitsue Tollner',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1016',
+                    code: 'k8l6j58jl',
+                    name: 'Lime Band',
+                    description: 'Product Description',
+                    image: 'lime-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 12,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3,
+                    orders: []
+                },
+                {
+                    id: '1017',
+                    code: 'v435nn85n',
+                    name: 'Mini Speakers',
+                    description: 'Product Description',
+                    image: 'mini-speakers.jpg',
+                    price: 85,
+                    category: 'Clothing',
+                    quantity: 42,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1017-0',
+                            productCode: 'v435nn85n',
+                            date: '2020-07-12',
+                            amount: 85,
+                            quantity: 1,
+                            customer: 'Minna Amigon',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1018',
+                    code: '09zx9c0zc',
+                    name: 'Painted Phone Case',
+                    description: 'Product Description',
+                    image: 'painted-phone-case.jpg',
+                    price: 56,
+                    category: 'Accessories',
+                    quantity: 41,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1018-0',
+                            productCode: '09zx9c0zc',
+                            date: '2020-07-01',
+                            amount: 56,
+                            quantity: 1,
+                            customer: 'Abel Maclead',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1018-1',
+                            productCode: '09zx9c0zc',
+                            date: '2020-05-02',
+                            amount: 56,
+                            quantity: 1,
+                            customer: 'Minna Amigon',
+                            status: 'RETURNED'
+                        }
+                    ]
+                },
+                {
+                    id: '1019',
+                    code: 'mnb5mb2m5',
+                    name: 'Pink Band',
+                    description: 'Product Description',
+                    image: 'pink-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 63,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: []
+                },
+                {
+                    id: '1020',
+                    code: 'r23fwf2w3',
+                    name: 'Pink Purse',
+                    description: 'Product Description',
+                    image: 'pink-purse.jpg',
+                    price: 110,
+                    category: 'Accessories',
+                    quantity: 0,
+                    inventoryStatus: 'OUTOFSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1020-0',
+                            productCode: 'r23fwf2w3',
+                            date: '2020-05-29',
+                            amount: 110,
+                            quantity: 1,
+                            customer: 'Kiley Caldarera',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1020-1',
+                            productCode: 'r23fwf2w3',
+                            date: '2020-02-11',
+                            amount: 220,
+                            quantity: 2,
+                            customer: 'Graciela Ruta',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1021',
+                    code: 'pxpzczo23',
+                    name: 'Purple Band',
+                    description: 'Product Description',
+                    image: 'purple-band.jpg',
+                    price: 79,
+                    category: 'Fitness',
+                    quantity: 6,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1021-0',
+                            productCode: 'pxpzczo23',
+                            date: '2020-02-02',
+                            amount: 79,
+                            quantity: 1,
+                            customer: 'Cammy Albares',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1022',
+                    code: '2c42cb5cb',
+                    name: 'Purple Gemstone Necklace',
+                    description: 'Product Description',
+                    image: 'purple-gemstone-necklace.jpg',
+                    price: 45,
+                    category: 'Accessories',
+                    quantity: 62,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1022-0',
+                            productCode: '2c42cb5cb',
+                            date: '2020-06-29',
+                            amount: 45,
+                            quantity: 1,
+                            customer: 'Mattie Poquette',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1022-1',
+                            productCode: '2c42cb5cb',
+                            date: '2020-02-11',
+                            amount: 135,
+                            quantity: 3,
+                            customer: 'Meaghan Garufi',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1023',
+                    code: '5k43kkk23',
+                    name: 'Purple T-Shirt',
+                    description: 'Product Description',
+                    image: 'purple-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 2,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 5,
+                    orders: [
+                        {
+                            id: '1023-0',
+                            productCode: '5k43kkk23',
+                            date: '2020-04-15',
+                            amount: 49,
+                            quantity: 1,
+                            customer: 'Gladys Rim',
+                            status: 'RETURNED'
+                        }
+                    ]
+                },
+                {
+                    id: '1024',
+                    code: 'lm2tny2k4',
+                    name: 'Shoes',
+                    description: 'Product Description',
+                    image: 'shoes.jpg',
+                    price: 64,
+                    category: 'Clothing',
+                    quantity: 0,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: []
+                },
+                {
+                    id: '1025',
+                    code: 'nbm5mv45n',
+                    name: 'Sneakers',
+                    description: 'Product Description',
+                    image: 'sneakers.jpg',
+                    price: 78,
+                    category: 'Clothing',
+                    quantity: 52,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 4,
+                    orders: [
+                        {
+                            id: '1025-0',
+                            productCode: 'nbm5mv45n',
+                            date: '2020-02-19',
+                            amount: 78,
+                            quantity: 1,
+                            customer: 'Yuki Whobrey',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1025-1',
+                            productCode: 'nbm5mv45n',
+                            date: '2020-05-21',
+                            amount: 78,
+                            quantity: 1,
+                            customer: 'Fletcher Flosi',
+                            status: 'PENDING'
+                        }
+                    ]
+                },
+                {
+                    id: '1026',
+                    code: 'zx23zc42c',
+                    name: 'Teal T-Shirt',
+                    description: 'Product Description',
+                    image: 'teal-t-shirt.jpg',
+                    price: 49,
+                    category: 'Clothing',
+                    quantity: 3,
+                    inventoryStatus: 'LOWSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1026-0',
+                            productCode: 'zx23zc42c',
+                            date: '2020-04-24',
+                            amount: 98,
+                            quantity: 2,
+                            customer: 'Bette Nicka',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1027',
+                    code: 'acvx872gc',
+                    name: 'Yellow Earbuds',
+                    description: 'Product Description',
+                    image: 'yellow-earbuds.jpg',
+                    price: 89,
+                    category: 'Electronics',
+                    quantity: 35,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 3,
+                    orders: [
+                        {
+                            id: '1027-0',
+                            productCode: 'acvx872gc',
+                            date: '2020-01-29',
+                            amount: 89,
+                            quantity: 1,
+                            customer: 'Veronika Inouye',
+                            status: 'DELIVERED'
+                        },
+                        {
+                            id: '1027-1',
+                            productCode: 'acvx872gc',
+                            date: '2020-06-11',
+                            amount: 89,
+                            quantity: 1,
+                            customer: 'Willard Kolmetz',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                },
+                {
+                    id: '1028',
+                    code: 'tx125ck42',
+                    name: 'Yoga Mat',
+                    description: 'Product Description',
+                    image: 'yoga-mat.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 15,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 5,
+                    orders: []
+                },
+                {
+                    id: '1029',
+                    code: 'gwuby345v',
+                    name: 'Yoga Set',
+                    description: 'Product Description',
+                    image: 'yoga-set.jpg',
+                    price: 20,
+                    category: 'Fitness',
+                    quantity: 25,
+                    inventoryStatus: 'INSTOCK',
+                    rating: 8,
+                    orders: [
+                        {
+                            id: '1029-0',
+                            productCode: 'gwuby345v',
+                            date: '2020-02-14',
+                            amount: 4,
+                            quantity: 80,
+                            customer: 'Maryann Royster',
+                            status: 'DELIVERED'
+                        }
+                    ]
+                }
+            ];
+        },
+
+        getProductsMini() {
+            return Promise.resolve(this.getProductsData().slice(0, 5));
+        },
+
+        getProductsSmall() {
+            return Promise.resolve(this.getProductsData().slice(0, 10));
+        },
+
+        getProducts() {
+            return Promise.resolve(this.getProductsData());
+        },
+
+        getProductsWithOrdersSmall() {
+            return Promise.resolve(this.getProductsWithOrdersData().slice(0, 10));
+        },
+
+        getProductsWithOrders() {
+            return Promise.resolve(this.getProductsWithOrdersData());
+        }
+    };
+
+    `
+};
+
+export { services };
diff --git a/components/doc/common/codeeditor/templates.js b/components/doc/common/codeeditor/templates.js
new file mode 100644
index 0000000000..61432c97ef
--- /dev/null
+++ b/components/doc/common/codeeditor/templates.js
@@ -0,0 +1,1100 @@
+import pkg from 'package.json';
+import { services } from './services';
+
+const PrimeReact = {
+    version: 'latest' || pkg.version, // latest
+    description:
+        'PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.'
+};
+
+const app_dependencies = pkg ? pkg.dependencies : {};
+
+const typeScriptDependencies = {
+    '@types/react-dom': '^18.0.0',
+    '@vitejs/plugin-react': '^1.3.0',
+    typescript: '^4.6.3'
+};
+
+const typeScriptFiles = {
+    'tsconfig.json': {
+        content: `{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "allowJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+    `
+    },
+    'tsconfig.node.json': {
+        content: `{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "include": ["vite.config.ts"]
+}`
+    }
+};
+
+const getConfiguredDependencies = (isUnstyled, isTypeScript) => {
+    const defaultDependencies = {
+        '@types/react': '^18.2.38', // For stackblitz
+        react: app_dependencies.react || 'latest',
+        'react-dom': app_dependencies['react-dom'] || 'latest',
+        'react-transition-group': app_dependencies['react-transition-group'] || 'latest',
+        primereact: PrimeReact.version || 'latest', // latest
+        primeicons: app_dependencies.primeicons || 'latest',
+        vite: 'latest',
+        '@vitejs/plugin-react': 'latest',
+        ...(isTypeScript ? typeScriptDependencies : '')
+    };
+
+    if (isUnstyled) {
+        return {
+            ...defaultDependencies,
+            tailwindcss: app_dependencies.tailwindcss || 'latest',
+            postcss: app_dependencies.postcss || 'latest',
+            autoprefixer: app_dependencies.autoprefixer || 'latest'
+        };
+    }
+
+    return {
+        ...defaultDependencies,
+        primeflex: app_dependencies.primeflex || 'latest'
+    };
+};
+
+const getUnstyledFiles = (path, isTypeScript) => {
+    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
+
+    const tailwindConfig = {
+        content: `/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: 'class',
+    content: [
+        './index.html',
+        './src/**/*.{vue,js,ts,jsx,tsx}',
+        './node_modules/primereact/**/*.{js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};`
+    };
+
+    const postcssConfig = {
+        content: `export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}`
+    };
+
+    const tailwindCss = {
+        content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+    font-size: 14px;
+}
+
+body {
+    background: #eff3f8;
+    padding: 1rem;
+}
+
+.card {
+    background: #ffffff;
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}
+
+html.dark body {
+    background: #040d19;
+}
+
+html.dark .card {
+    background: #071426;
+}`
+    };
+
+    const themeSwitcher = {
+        content: `import React, { useState } from 'react';
+const ThemeSwitcher = () => {
+    const [iconClassName, setIconClassName] = useState('pi-moon');
+
+    const onThemeToggler = () => {
+        const root = document.getElementsByTagName('html')[0];
+
+        root.classList.toggle('dark');
+        setIconClassName((prevClasName) =>
+            prevClasName === 'pi-moon' ? 'pi-sun' : 'pi-moon'
+        );
+    };
+
+    return (
+        <div className="card flex justify-end p-2 mb-4">
+            <button
+                type="button"
+                className="flex border-1 w-2rem h-2rem p-0 align-center justify-center"
+                onClick={onThemeToggler}
+            >
+                <i className={\`dark:text-white pi \${iconClassName}\`} />
+            </button>
+        </div>
+    );
+};
+
+export default ThemeSwitcher;`
+    };
+
+    const mainJsx = {
+        content: `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import 'primeicons/primeicons.css';
+import { PrimeReactProvider } from 'primereact/api';
+import Tailwind from 'primereact/passthrough/tailwind';
+import ThemeSwitcher from './components/themeSwitcher';
+
+import './index.css';
+import './flags.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''});
+root.render(
+    <React.StrictMode>
+        <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
+        <ThemeSwitcher />
+        <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);`
+    };
+
+    return { 'tailwind.config.js': tailwindConfig, 'postcss.config.js': postcssConfig, [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: tailwindCss, [`${path}components/themeSwitcher.${fileExtension}`]: themeSwitcher };
+};
+
+const getStyledFiles = (path, isTypeScript) => {
+    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
+
+    const globalCss = {
+        content: `html {
+    font-size: 14px;
+}
+
+body {
+    font-family: var(--font-family);
+    font-weight: normal;
+    background: var(--surface-ground);
+    color: var(--text-color);
+    padding: 1rem;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.card {
+    background: var(--surface-card);
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}`
+    };
+
+    const mainJsx = {
+        content: `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import 'primeicons/primeicons.css';
+import { PrimeReactProvider } from 'primereact/api';
+import 'primeflex/primeflex.css';
+import 'primereact/resources/primereact.css';
+import 'primereact/resources/themes/lara-light-indigo/theme.css';
+
+import './index.css';
+import './flags.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')${isTypeScript ? ' as HTMLElement' : ''});
+root.render(
+<React.StrictMode>
+    <PrimeReactProvider>
+    <App />
+    </PrimeReactProvider>
+</React.StrictMode>
+);`
+    };
+
+    return { [`${path}main.${fileExtension}`]: mainJsx, [`${path}index.css`]: globalCss };
+};
+
+const getVite = (props = {}, template = 'javascript') => {
+    const path = 'src/';
+    const isUnstyled = props.embedded;
+    const isTypeScript = template === 'typescript';
+    const fileExtension = isTypeScript ? 'tsx' : 'jsx';
+
+    const { code: sources, title = 'primereact_demo', description = '', dependencies: pDependencies = {} } = props;
+
+    const configuredDependencies = getConfiguredDependencies(isUnstyled, isTypeScript);
+    const dependencies = { ...configuredDependencies, ...pDependencies, 'react-scripts': '5.0.1' };
+
+    const extFiles = {};
+
+    sources.extFiles &&
+        Object.entries(sources.extFiles).forEach(([key, value]) => {
+            extFiles[`${path + key}`] = {
+                content: value
+            };
+        });
+
+    const buildType = isTypeScript ? 'tsc && vite build' : 'vite build';
+
+    const packageJson = {
+        content: {
+            name: title.toLowerCase().replaceAll(' ', '_'),
+            description: `**${description}** ${PrimeReact.description}`,
+            type: 'module',
+            scripts: {
+                dev: 'vite',
+                build: buildType,
+                preview: 'vite preview'
+            },
+            main: `${path}main.${fileExtension}`,
+            keywords: ['primereact', 'react', 'vite', 'starter'],
+            dependencies
+        }
+    };
+
+    const viteConfig = {
+        content: `import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+});`
+    };
+
+    const indexHtml = {
+        content: `<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="http://github.com/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="**${description}** ${PrimeReact.description}" />
+        <title>PrimeReact App</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="http://github.com/src/main.$%7BfileExtension%7D"></script>
+    </body>
+</html>`
+    };
+
+    const configuredFiles = isUnstyled ? getUnstyledFiles(path, isTypeScript) : getStyledFiles(path, isTypeScript);
+
+    let files = {
+        'package.json': packageJson,
+        'vite.config.js': viteConfig,
+        'index.html': indexHtml,
+        [`${path}flags.css`]: flagsCss,
+        [`${path}App.${fileExtension}`]: {
+            content: sources[template].replace(/^\n/, '')
+        },
+        ...extFiles,
+        ...configuredFiles,
+        ...(isTypeScript ? typeScriptFiles : '')
+    };
+
+    if (props.service) {
+        props.service.forEach((name) => {
+            files[`${path}service/${name}.${fileExtension}`] = {
+                content: services[name]
+            };
+        });
+    }
+
+    return { files, dependencies, sourceFileName: `${path}App.${fileExtension}` };
+};
+
+const flagsCss = {
+    content: `span.flag {
+    width: 44px;
+    height: 30px;
+    display: inline-block;
+}
+img.flag {
+    width: 30px;
+}
+.flag {
+    background: url(https://primefaces.org/cdn/primereact/images/flag/flags_responsive.png)
+        no-repeat;
+    background-size: 100%;
+    vertical-align: middle;
+}
+.flag-ad {
+    background-position: 0 0.413223%;
+}
+.flag-ae {
+    background-position: 0 0.826446%;
+}
+.flag-af {
+    background-position: 0 1.239669%;
+}
+.flag-ag {
+    background-position: 0 1.652893%;
+}
+.flag-ai {
+    background-position: 0 2.066116%;
+}
+.flag-al {
+    background-position: 0 2.479339%;
+}
+.flag-am {
+    background-position: 0 2.892562%;
+}
+.flag-an {
+    background-position: 0 3.305785%;
+}
+.flag-ao {
+    background-position: 0 3.719008%;
+}
+.flag-aq {
+    background-position: 0 4.132231%;
+}
+.flag-ar {
+    background-position: 0 4.545455%;
+}
+.flag-as {
+    background-position: 0 4.958678%;
+}
+.flag-at {
+    background-position: 0 5.371901%;
+}
+.flag-au {
+    background-position: 0 5.785124%;
+}
+.flag-aw {
+    background-position: 0 6.198347%;
+}
+.flag-az {
+    background-position: 0 6.61157%;
+}
+.flag-ba {
+    background-position: 0 7.024793%;
+}
+.flag-bb {
+    background-position: 0 7.438017%;
+}
+.flag-bd {
+    background-position: 0 7.85124%;
+}
+.flag-be {
+    background-position: 0 8.264463%;
+}
+.flag-bf {
+    background-position: 0 8.677686%;
+}
+.flag-bg {
+    background-position: 0 9.090909%;
+}
+.flag-bh {
+    background-position: 0 9.504132%;
+}
+.flag-bi {
+    background-position: 0 9.917355%;
+}
+.flag-bj {
+    background-position: 0 10.330579%;
+}
+.flag-bm {
+    background-position: 0 10.743802%;
+}
+.flag-bn {
+    background-position: 0 11.157025%;
+}
+.flag-bo {
+    background-position: 0 11.570248%;
+}
+.flag-br {
+    background-position: 0 11.983471%;
+}
+.flag-bs {
+    background-position: 0 12.396694%;
+}
+.flag-bt {
+    background-position: 0 12.809917%;
+}
+.flag-bv {
+    background-position: 0 13.22314%;
+}
+.flag-bw {
+    background-position: 0 13.636364%;
+}
+.flag-by {
+    background-position: 0 14.049587%;
+}
+.flag-bz {
+    background-position: 0 14.46281%;
+}
+.flag-ca {
+    background-position: 0 14.876033%;
+}
+.flag-cc {
+    background-position: 0 15.289256%;
+}
+.flag-cd {
+    background-position: 0 15.702479%;
+}
+.flag-cf {
+    background-position: 0 16.115702%;
+}
+.flag-cg {
+    background-position: 0 16.528926%;
+}
+.flag-ch {
+    background-position: 0 16.942149%;
+}
+.flag-ci {
+    background-position: 0 17.355372%;
+}
+.flag-ck {
+    background-position: 0 17.768595%;
+}
+.flag-cl {
+    background-position: 0 18.181818%;
+}
+.flag-cm {
+    background-position: 0 18.595041%;
+}
+.flag-cn {
+    background-position: 0 19.008264%;
+}
+.flag-co {
+    background-position: 0 19.421488%;
+}
+.flag-cr {
+    background-position: 0 19.834711%;
+}
+.flag-cu {
+    background-position: 0 20.247934%;
+}
+.flag-cv {
+    background-position: 0 20.661157%;
+}
+.flag-cx {
+    background-position: 0 21.07438%;
+}
+.flag-cy {
+    background-position: 0 21.487603%;
+}
+.flag-cz {
+    background-position: 0 21.900826%;
+}
+.flag-de {
+    background-position: 0 22.31405%;
+}
+.flag-dj {
+    background-position: 0 22.727273%;
+}
+.flag-dk {
+    background-position: 0 23.140496%;
+}
+.flag-dm {
+    background-position: 0 23.553719%;
+}
+.flag-do {
+    background-position: 0 23.966942%;
+}
+.flag-dz {
+    background-position: 0 24.380165%;
+}
+.flag-ec {
+    background-position: 0 24.793388%;
+}
+.flag-ee {
+    background-position: 0 25.206612%;
+}
+.flag-eg {
+    background-position: 0 25.619835%;
+}
+.flag-eh {
+    background-position: 0 26.033058%;
+}
+.flag-er {
+    background-position: 0 26.446281%;
+}
+.flag-es {
+    background-position: 0 26.859504%;
+}
+.flag-et {
+    background-position: 0 27.272727%;
+}
+.flag-fi {
+    background-position: 0 27.68595%;
+}
+.flag-fj {
+    background-position: 0 28.099174%;
+}
+.flag-fk {
+    background-position: 0 28.512397%;
+}
+.flag-fm {
+    background-position: 0 28.92562%;
+}
+.flag-fo {
+    background-position: 0 29.338843%;
+}
+.flag-fr {
+    background-position: 0 29.752066%;
+}
+.flag-ga {
+    background-position: 0 30.165289%;
+}
+.flag-gd {
+    background-position: 0 30.578512%;
+}
+.flag-ge {
+    background-position: 0 30.991736%;
+}
+.flag-gf {
+    background-position: 0 31.404959%;
+}
+.flag-gh {
+    background-position: 0 31.818182%;
+}
+.flag-gi {
+    background-position: 0 32.231405%;
+}
+.flag-gl {
+    background-position: 0 32.644628%;
+}
+.flag-gm {
+    background-position: 0 33.057851%;
+}
+.flag-gn {
+    background-position: 0 33.471074%;
+}
+.flag-gp {
+    background-position: 0 33.884298%;
+}
+.flag-gq {
+    background-position: 0 34.297521%;
+}
+.flag-gr {
+    background-position: 0 34.710744%;
+}
+.flag-gs {
+    background-position: 0 35.123967%;
+}
+.flag-gt {
+    background-position: 0 35.53719%;
+}
+.flag-gu {
+    background-position: 0 35.950413%;
+}
+.flag-gw {
+    background-position: 0 36.363636%;
+}
+.flag-gy {
+    background-position: 0 36.77686%;
+}
+.flag-hk {
+    background-position: 0 37.190083%;
+}
+.flag-hm {
+    background-position: 0 37.603306%;
+}
+.flag-hn {
+    background-position: 0 38.016529%;
+}
+.flag-hr {
+    background-position: 0 38.429752%;
+}
+.flag-ht {
+    background-position: 0 38.842975%;
+}
+.flag-hu {
+    background-position: 0 39.256198%;
+}
+.flag-id {
+    background-position: 0 39.669421%;
+}
+.flag-ie {
+    background-position: 0 40.082645%;
+}
+.flag-il {
+    background-position: 0 40.495868%;
+}
+.flag-in {
+    background-position: 0 40.909091%;
+}
+.flag-io {
+    background-position: 0 41.322314%;
+}
+.flag-iq {
+    background-position: 0 41.735537%;
+}
+.flag-ir {
+    background-position: 0 42.14876%;
+}
+.flag-is {
+    background-position: 0 42.561983%;
+}
+.flag-it {
+    background-position: 0 42.975207%;
+}
+.flag-jm {
+    background-position: 0 43.38843%;
+}
+.flag-jo {
+    background-position: 0 43.801653%;
+}
+.flag-jp {
+    background-position: 0 44.214876%;
+}
+.flag-ke {
+    background-position: 0 44.628099%;
+}
+.flag-kg {
+    background-position: 0 45.041322%;
+}
+.flag-kh {
+    background-position: 0 45.454545%;
+}
+.flag-ki {
+    background-position: 0 45.867769%;
+}
+.flag-km {
+    background-position: 0 46.280992%;
+}
+.flag-kn {
+    background-position: 0 46.694215%;
+}
+.flag-kp {
+    background-position: 0 47.107438%;
+}
+.flag-kr {
+    background-position: 0 47.520661%;
+}
+.flag-kw {
+    background-position: 0 47.933884%;
+}
+.flag-ky {
+    background-position: 0 48.347107%;
+}
+.flag-kz {
+    background-position: 0 48.760331%;
+}
+.flag-la {
+    background-position: 0 49.173554%;
+}
+.flag-lb {
+    background-position: 0 49.586777%;
+}
+.flag-lc {
+    background-position: 0 50%;
+}
+.flag-li {
+    background-position: 0 50.413223%;
+}
+.flag-lk {
+    background-position: 0 50.826446%;
+}
+.flag-lr {
+    background-position: 0 51.239669%;
+}
+.flag-ls {
+    background-position: 0 51.652893%;
+}
+.flag-lt {
+    background-position: 0 52.066116%;
+}
+.flag-lu {
+    background-position: 0 52.479339%;
+}
+.flag-lv {
+    background-position: 0 52.892562%;
+}
+.flag-ly {
+    background-position: 0 53.305785%;
+}
+.flag-ma {
+    background-position: 0 53.719008%;
+}
+.flag-mc {
+    background-position: 0 54.132231%;
+}
+.flag-md {
+    background-position: 0 54.545455%;
+}
+.flag-me {
+    background-position: 0 54.958678%;
+}
+.flag-mg {
+    background-position: 0 55.371901%;
+}
+.flag-mh {
+    background-position: 0 55.785124%;
+}
+.flag-mk {
+    background-position: 0 56.198347%;
+}
+.flag-ml {
+    background-position: 0 56.61157%;
+}
+.flag-mm {
+    background-position: 0 57.024793%;
+}
+.flag-mn {
+    background-position: 0 57.438017%;
+}
+.flag-mo {
+    background-position: 0 57.85124%;
+}
+.flag-mp {
+    background-position: 0 58.264463%;
+}
+.flag-mq {
+    background-position: 0 58.677686%;
+}
+.flag-mr {
+    background-position: 0 59.090909%;
+}
+.flag-ms {
+    background-position: 0 59.504132%;
+}
+.flag-mt {
+    background-position: 0 59.917355%;
+}
+.flag-mu {
+    background-position: 0 60.330579%;
+}
+.flag-mv {
+    background-position: 0 60.743802%;
+}
+.flag-mw {
+    background-position: 0 61.157025%;
+}
+.flag-mx {
+    background-position: 0 61.570248%;
+}
+.flag-my {
+    background-position: 0 61.983471%;
+}
+.flag-mz {
+    background-position: 0 62.396694%;
+}
+.flag-na {
+    background-position: 0 62.809917%;
+}
+.flag-nc {
+    background-position: 0 63.22314%;
+}
+.flag-ne {
+    background-position: 0 63.636364%;
+}
+.flag-nf {
+    background-position: 0 64.049587%;
+}
+.flag-ng {
+    background-position: 0 64.46281%;
+}
+.flag-ni {
+    background-position: 0 64.876033%;
+}
+.flag-nl {
+    background-position: 0 65.289256%;
+}
+.flag-no {
+    background-position: 0 65.702479%;
+}
+.flag-np {
+    background-position: 0 66.115702%;
+}
+.flag-nr {
+    background-position: 0 66.528926%;
+}
+.flag-nu {
+    background-position: 0 66.942149%;
+}
+.flag-nz {
+    background-position: 0 67.355372%;
+}
+.flag-om {
+    background-position: 0 67.768595%;
+}
+.flag-pa {
+    background-position: 0 68.181818%;
+}
+.flag-pe {
+    background-position: 0 68.595041%;
+}
+.flag-pf {
+    background-position: 0 69.008264%;
+}
+.flag-pg {
+    background-position: 0 69.421488%;
+}
+.flag-ph {
+    background-position: 0 69.834711%;
+}
+.flag-pk {
+    background-position: 0 70.247934%;
+}
+.flag-pl {
+    background-position: 0 70.661157%;
+}
+.flag-pm {
+    background-position: 0 71.07438%;
+}
+.flag-pn {
+    background-position: 0 71.487603%;
+}
+.flag-pr {
+    background-position: 0 71.900826%;
+}
+.flag-pt {
+    background-position: 0 72.31405%;
+}
+.flag-pw {
+    background-position: 0 72.727273%;
+}
+.flag-py {
+    background-position: 0 73.140496%;
+}
+.flag-qa {
+    background-position: 0 73.553719%;
+}
+.flag-re {
+    background-position: 0 73.966942%;
+}
+.flag-ro {
+    background-position: 0 74.380165%;
+}
+.flag-rs {
+    background-position: 0 74.793388%;
+}
+.flag-ru {
+    background-position: 0 75.206612%;
+}
+.flag-rw {
+    background-position: 0 75.619835%;
+}
+.flag-sa {
+    background-position: 0 76.033058%;
+}
+.flag-sb {
+    background-position: 0 76.446281%;
+}
+.flag-sc {
+    background-position: 0 76.859504%;
+}
+.flag-sd {
+    background-position: 0 77.272727%;
+}
+.flag-se {
+    background-position: 0 77.68595%;
+}
+.flag-sg {
+    background-position: 0 78.099174%;
+}
+.flag-sh {
+    background-position: 0 78.512397%;
+}
+.flag-si {
+    background-position: 0 78.92562%;
+}
+.flag-sj {
+    background-position: 0 79.338843%;
+}
+.flag-sk {
+    background-position: 0 79.752066%;
+}
+.flag-sl {
+    background-position: 0 80.165289%;
+}
+.flag-sm {
+    background-position: 0 80.578512%;
+}
+.flag-sn {
+    background-position: 0 80.991736%;
+}
+.flag-so {
+    background-position: 0 81.404959%;
+}
+.flag-sr {
+    background-position: 0 81.818182%;
+}
+.flag-ss {
+    background-position: 0 82.231405%;
+}
+.flag-st {
+    background-position: 0 82.644628%;
+}
+.flag-sv {
+    background-position: 0 83.057851%;
+}
+.flag-sy {
+    background-position: 0 83.471074%;
+}
+.flag-sz {
+    background-position: 0 83.884298%;
+}
+.flag-tc {
+    background-position: 0 84.297521%;
+}
+.flag-td {
+    background-position: 0 84.710744%;
+}
+.flag-tf {
+    background-position: 0 85.123967%;
+}
+.flag-tg {
+    background-position: 0 85.53719%;
+}
+.flag-th {
+    background-position: 0 85.950413%;
+}
+.flag-tj {
+    background-position: 0 86.363636%;
+}
+.flag-tk {
+    background-position: 0 86.77686%;
+}
+.flag-tl {
+    background-position: 0 87.190083%;
+}
+.flag-tm {
+    background-position: 0 87.603306%;
+}
+.flag-tn {
+    background-position: 0 88.016529%;
+}
+.flag-to {
+    background-position: 0 88.429752%;
+}
+.flag-tp {
+    background-position: 0 88.842975%;
+}
+.flag-tr {
+    background-position: 0 89.256198%;
+}
+.flag-tt {
+    background-position: 0 89.669421%;
+}
+.flag-tv {
+    background-position: 0 90.082645%;
+}
+.flag-tw {
+    background-position: 0 90.495868%;
+}
+.flag-ty {
+    background-position: 0 90.909091%;
+}
+.flag-tz {
+    background-position: 0 91.322314%;
+}
+.flag-ua {
+    background-position: 0 91.735537%;
+}
+.flag-ug {
+    background-position: 0 92.14876%;
+}
+.flag-gb,
+.flag-uk {
+    background-position: 0 92.561983%;
+}
+.flag-um {
+    background-position: 0 92.975207%;
+}
+.flag-us {
+    background-position: 0 93.38843%;
+}
+.flag-uy {
+    background-position: 0 93.801653%;
+}
+.flag-uz {
+    background-position: 0 94.214876%;
+}
+.flag-va {
+    background-position: 0 94.628099%;
+}
+.flag-vc {
+    background-position: 0 95.041322%;
+}
+.flag-ve {
+    background-position: 0 95.454545%;
+}
+.flag-vg {
+    background-position: 0 95.867769%;
+}
+.flag-vi {
+    background-position: 0 96.280992%;
+}
+.flag-vn {
+    background-position: 0 96.694215%;
+}
+.flag-vu {
+    background-position: 0 97.107438%;
+}
+.flag-wf {
+    background-position: 0 97.520661%;
+}
+.flag-ws {
+    background-position: 0 97.933884%;
+}
+.flag-ye {
+    background-position: 0 98.347107%;
+}
+.flag-za {
+    background-position: 0 98.760331%;
+}
+.flag-zm {
+    background-position: 0 99.173554%;
+}
+.flag-zr {
+    background-position: 0 99.586777%;
+}
+.flag-zw {
+    background-position: 0 100%;
+}`
+};
+
+export { getVite };
diff --git a/components/doc/common/codehighlight.js b/components/doc/common/codehighlight.js
new file mode 100644
index 0000000000..53ba4c2ea6
--- /dev/null
+++ b/components/doc/common/codehighlight.js
@@ -0,0 +1,18 @@
+import React, { useEffect, useRef } from 'react';
+
+export function CodeHighlight(props) {
+    const codeElement = useRef();
+    const languageClassName = `language-${props.lang || 'jsx'}`;
+
+    useEffect(() => {
+        window.Prism.highlightElement(codeElement.current);
+    }, []);
+
+    return (
+        <pre style={props.style} tabIndex="-1">
+            <code ref={codeElement} className={languageClassName}>
+                {props.children}&nbsp;
+            </code>
+        </pre>
+    );
+}
diff --git a/components/doc/common/developmentsection.js b/components/doc/common/developmentsection.js
new file mode 100644
index 0000000000..b99567e5b3
--- /dev/null
+++ b/components/doc/common/developmentsection.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export const DevelopmentSection = React.memo((props) => {
+    return (
+        <>
+            <div className="flex align-items-center line-height-3 bg-primary-600 text-white p-3 text-lg border-round">
+                <i className="pi pi-info-circle text-lg text-white mr-2" />
+                Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.
+            </div>
+            {props.children}
+        </>
+    );
+});
diff --git a/components/doc/common/docapisection.js b/components/doc/common/docapisection.js
new file mode 100644
index 0000000000..b66dfc1cfe
--- /dev/null
+++ b/components/doc/common/docapisection.js
@@ -0,0 +1,330 @@
+import { ObjectUtils } from '@/components/lib/utils/Utils';
+import { useEffect } from 'react';
+import APIDoc from './apidoc';
+import DocApiTable from './docapitable';
+import { DocSectionNav } from './docsectionnav';
+import { DocSections } from './docsections';
+
+export function DocApiSection(props) {
+    const { doc, header } = props;
+    const capitalize = (s) => (s && s[0].toUpperCase() + s.slice(1)) || '';
+    const exclude = props.apiExclude;
+
+    const docs = doc.reduce((cDocs, name) => {
+        const splitedName = name.split('.');
+        const modName = capitalize(splitedName[0]);
+        const mod = APIDoc[modName.toLowerCase()];
+
+        const isExcluded = (option, key) => {
+            return exclude && exclude[option] && exclude[option].includes(key);
+        };
+
+        const isExcludedAll = (option) => {
+            return exclude && exclude[option] && exclude[option] === 'excludeAll';
+        };
+
+        if (mod) {
+            const addToChildDoc = (childDoc, componentName) => {
+                if (ObjectUtils.isNotEmpty(mod.events) && ObjectUtils.isNotEmpty(mod.events.values) && !isExcludedAll('events')) {
+                    const eMap = {
+                        id: `api.${componentName}.events`,
+                        label: 'Events',
+                        description: mod.events.description,
+                        children: []
+                    };
+
+                    Object.entries(mod.events.values).forEach(([eKey, eValue]) => {
+                        const [id, label] = [`api.${componentName}.${eKey}`, eKey];
+
+                        if (isExcluded('event', eKey)) {
+                            return;
+                        }
+
+                        eMap.children.push({
+                            id,
+                            label,
+                            component: (inProps) => (
+                                <DocApiTable
+                                    name={componentName}
+                                    data={eValue.props}
+                                    description={
+                                        <>
+                                            {eValue.description} See <i>{eValue.relatedProp}</i>.
+                                        </>
+                                    }
+                                    {...inProps}
+                                />
+                            )
+                        });
+                    });
+
+                    childDoc.push(eMap);
+                }
+
+                if (ObjectUtils.isNotEmpty(mod.interfaces) && ObjectUtils.isNotEmpty(mod.interfaces.values) && !isExcludedAll('interfaces')) {
+                    const iMap = {
+                        id: `api.${componentName}.interfaces`,
+                        label: 'Interfaces',
+                        description: mod.interfaces.description,
+                        children: []
+                    };
+
+                    Object.entries(mod.interfaces.values).forEach(([iKey, iValue]) => {
+                        const [id, label] = [`api.${componentName}.${iKey}`, iKey];
+
+                        if (isExcluded('interfaces', iKey)) {
+                            return;
+                        }
+
+                        iMap.children.push({
+                            id,
+                            label,
+                            component: (inProps) => (
+                                <DocApiTable
+                                    name={componentName}
+                                    data={iValue.props}
+                                    description={
+                                        <>
+                                            {iValue.description}{' '}
+                                            {iValue.extendedTypes && (
+                                                <>
+                                                    Extends <i>{iValue.extendedTypes}</i>.
+                                                </>
+                                            )}
+                                        </>
+                                    }
+                                    {...inProps}
+                                />
+                            )
+                        });
+                    });
+
+                    childDoc.push(iMap);
+                }
+
+                if (ObjectUtils.isNotEmpty(mod.types) && ObjectUtils.isNotEmpty(mod.types.values) && !isExcludedAll('types')) {
+                    const tMap = {
+                        id: `api.${componentName}.types`,
+                        label: 'Types',
+                        description: mod.types.description,
+                        children: []
+                    };
+
+                    Object.entries(mod.types.values).forEach(([tKey, tValue]) => {
+                        const [id, label] = [`api.${componentName}.${tKey}`, tKey];
+
+                        if (isExcluded('types', tKey)) {
+                            return;
+                        }
+
+                        tMap.children.push({
+                            id,
+                            label,
+                            component: (inProps) => <DocApiTable name={componentName} data={[tValue]} allowLink={false} {...inProps} />
+                        });
+                    });
+
+                    childDoc.push(tMap);
+                }
+            };
+
+            if (splitedName.length === 3) {
+                const type = splitedName[1];
+                const selectedName = splitedName[2];
+
+                if (type === 'functions') {
+                    const value = mod[type].values[selectedName];
+
+                    const fMap = {
+                        id: `api.${modName}`,
+                        label: modName,
+                        children: []
+                    };
+
+                    const [id, label] = [`api.${modName}.function`, 'Function'];
+
+                    const values = Object.entries(value).reduce((avs, [k, v]) => {
+                        k !== 'description' && (avs[k] = v);
+
+                        return avs;
+                    }, {});
+
+                    fMap.children.push({
+                        id,
+                        label,
+                        component: (inProps) => <DocApiTable name={modName} data={[values]} description={value.description} {...inProps} />
+                    });
+
+                    const types = value.parameters && value.parameters.map((p) => p.type);
+
+                    if (ObjectUtils.isNotEmpty(mod.interfaces) && ObjectUtils.isNotEmpty(mod.interfaces.values)) {
+                        const iMap = {
+                            id: `api.${modName}.interfaces`,
+                            label: 'Interfaces',
+                            description: mod.interfaces.description,
+                            children: []
+                        };
+
+                        Object.entries(mod.interfaces.values).forEach(([iKey, iValue]) => {
+                            if (types.includes(iKey)) {
+                                const [id, label] = [`api.${modName}.${iKey}`, iKey];
+
+                                const tMap = {
+                                    id,
+                                    label,
+                                    description: (
+                                        <>
+                                            {iValue.description}{' '}
+                                            {iValue.extendedTypes && (
+                                                <>
+                                                    Extends <i>{iValue.extendedTypes}</i>.
+                                                </>
+                                            )}
+                                        </>
+                                    ),
+                                    children: []
+                                };
+
+                                if (ObjectUtils.isNotEmpty(iValue.props)) {
+                                    tMap.children.push({
+                                        id: `${id}.props`,
+                                        label: 'Props',
+                                        component: (inProps) => <DocApiTable data={iValue.props} {...inProps} />
+                                    });
+                                }
+
+                                if (ObjectUtils.isNotEmpty(iValue.callbacks)) {
+                                    tMap.children.push({
+                                        id: `${id}.callbacks`,
+                                        label: 'Callbacks',
+                                        component: (inProps) => <DocApiTable data={iValue.callbacks} {...inProps} />
+                                    });
+                                }
+
+                                iMap.children.push(tMap);
+                            }
+                        });
+
+                        ObjectUtils.isNotEmpty(iMap.children) && fMap.children.push(iMap);
+                    }
+
+                    cDocs.push(fMap);
+                }
+            } else {
+                mod.components &&
+                    Object.entries(mod.components).forEach(([cKey, cValue]) => {
+                        const cMap = {
+                            id: `api.${cKey}`,
+                            label: cKey,
+                            description: cValue.description,
+                            children: []
+                        };
+
+                        if (ObjectUtils.isNotEmpty(cValue.props) && ObjectUtils.isNotEmpty(cValue.props.values) && !isExcludedAll('props')) {
+                            const [id, label] = [`api.${cKey}.props`, 'Props'];
+
+                            if (isExcluded('props', cKey)) {
+                                return;
+                            }
+
+                            cMap.children.push({
+                                id,
+                                label,
+                                component: (inProps) => <DocApiTable name={cKey} data={cValue.props.values} description={cValue.props.description} {...inProps} />
+                            });
+                        }
+
+                        if (ObjectUtils.isNotEmpty(cValue.callbacks) && ObjectUtils.isNotEmpty(cValue.callbacks.values) && !isExcludedAll('callbacks')) {
+                            const [id, label] = [`api.${cKey}.callbacks`, 'Callbacks'];
+
+                            if (isExcluded('callbacks', cKey)) {
+                                return;
+                            }
+
+                            cMap.children.push({
+                                id,
+                                label,
+                                component: (inProps) => <DocApiTable name={cKey} data={cValue.callbacks.values} description={cValue.callbacks.description} {...inProps} />
+                            });
+                        }
+
+                        if (ObjectUtils.isNotEmpty(cValue.methods) && ObjectUtils.isNotEmpty(cValue.methods.values) && !isExcludedAll('methods')) {
+                            const [id, label] = [`api.${cKey}.methods`, 'Methods'];
+
+                            if (isExcluded('methods', cKey)) {
+                                return;
+                            }
+
+                            cMap.children.push({
+                                id,
+                                label,
+                                component: (inProps) => <DocApiTable name={cKey} data={cValue.methods.values} description={cValue.methods.description} {...inProps} />
+                            });
+                        }
+
+                        if (cKey.toLocaleLowerCase() === name.toLowerCase()) {
+                            addToChildDoc(cMap.children, cKey);
+                        }
+
+                        cDocs.push(cMap);
+                    });
+
+                mod.model &&
+                    Object.entries(mod.model).forEach(([mKey, mValue]) => {
+                        const mMap = {
+                            id: `api.${mKey}`,
+                            label: mKey,
+                            description: mValue.description,
+                            children: []
+                        };
+
+                        if (ObjectUtils.isNotEmpty(mValue.props) && ObjectUtils.isNotEmpty(mValue.props.values) && !isExcludedAll('props')) {
+                            const [id, label] = [`api.${mKey}.props`, 'Props'];
+
+                            if (isExcluded('props', mKey)) {
+                                return;
+                            }
+
+                            mMap.children.push({
+                                id,
+                                label,
+                                component: (inProps) => <DocApiTable name={mKey} data={mValue.props.values} description={mValue.props.description} {...inProps} />
+                            });
+                        }
+
+                        if (mKey.toLocaleLowerCase() === name.toLowerCase()) {
+                            addToChildDoc(mMap.children, mKey);
+                        }
+
+                        cDocs.push(mMap);
+                    });
+
+                !mod.components && !mod.model && addToChildDoc(cDocs, modName);
+            }
+        }
+
+        return cDocs;
+    }, []);
+
+    useEffect(() => {
+        const hash = window.location.hash.substring(1);
+        const element = document.getElementById(hash);
+
+        setTimeout(() => {
+            element && element.scrollIntoView({ block: 'start' });
+        }, 1);
+    }, []);
+
+    return (
+        <>
+            <div className="doc-main">
+                <div className="doc-intro">
+                    <h1>{header} API</h1>
+                    <p>API defines helper props, events and others for the PrimeReact {header} module.</p>
+                </div>
+                <DocSections docs={docs} />
+            </div>
+            <DocSectionNav docs={docs} />
+        </>
+    );
+}
diff --git a/components/doc/common/docapitable.js b/components/doc/common/docapitable.js
new file mode 100644
index 0000000000..3fbe87100a
--- /dev/null
+++ b/components/doc/common/docapitable.js
@@ -0,0 +1,181 @@
+import { ObjectUtils, classNames } from '@/components/lib/utils/Utils';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { useContext } from 'react';
+import AppContentContext from '../../layout/appcontentcontext';
+import { DocSectionText } from './docsectiontext';
+
+const DocApiTable = (props) => {
+    const appContentContext = useContext(AppContentContext);
+
+    const { id, data, name, description, allowLink = true } = props;
+    const isPT = id.startsWith('pt.');
+
+    const router = useRouter();
+
+    if (ObjectUtils.isNotEmpty(data)) {
+        const headers = Object.keys(data[0]);
+
+        const onClick = (id, behavior) => {
+            const element = document.getElementById(id);
+
+            element && element.parentElement.scrollIntoView({ block: 'start', behavior });
+        };
+
+        const createContent = (value, isLinkableOption, deprecated) => {
+            if (allowLink && value) {
+                const splitedValues = value.split('|');
+
+                return splitedValues.map((sValue, i) => {
+                    if (sValue.includes(name)) {
+                        let matchedIndex = sValue.indexOf(name);
+                        let val = sValue
+                            .substring(matchedIndex)
+                            .replace(/(\[|\]|<|>).*$/gm, '')
+                            .trim();
+
+                        const apiId = name === val ? `api.${name}` : `api.${name}.${val === `${name}Props` ? 'props' : val}`;
+
+                        return (
+                            <React.Fragment key={i}>
+                                {i !== 0 ? '|' : ''}
+                                <Link href={router.basePath + router.pathname + `#${apiId}`} target="_self">
+                                    <a onClick={() => onClick(apiId, 'smooth')}>{sValue}</a>
+                                </Link>
+                            </React.Fragment>
+                        );
+                    }
+
+                    return (
+                        <React.Fragment key={i}>
+                            {i !== 0 ? '|' : ''}
+                            {isLinkableOption ? (
+                                <span id={id + '.' + sValue} className={classNames('doc-option-name', { 'line-through cursor-pointer': !!deprecated })} title={deprecated}>
+                                    {sValue}
+                                    <Link href={router.basePath + router.pathname + `#${id + '.' + sValue}`} target="_self">
+                                        <a onClick={() => onClick(id + '.' + sValue)} className="doc-option-link">
+                                            <i className="pi pi-link" />
+                                        </a>
+                                    </Link>
+                                </span>
+                            ) : (
+                                sValue
+                            )}
+                        </React.Fragment>
+                    );
+                });
+            }
+
+            const val = value && value.includes('": "') ? value.replace(/['"]+/g, '').replace(/\.,/gm, '.') : value;
+
+            return isLinkableOption ? (
+                <span id={id + '.' + val} className={classNames('doc-option-name', { 'line-through cursor-pointer': !!deprecated })} title={deprecated}>
+                    {val}
+                    <Link href={router.basePath + router.pathname + `#${id + '.' + val}`} target="_self">
+                        <a onClick={() => onClick(id + '.' + val)} className="doc-option-link">
+                            <i className="pi pi-link" />
+                        </a>
+                    </Link>
+                </span>
+            ) : (
+                val
+            );
+        };
+
+        const createTBody = () => {
+            return (
+                <React.Fragment>
+                    {data.map((d, i) => {
+                        if (isPT) {
+                            const { value, label, description } = d;
+
+                            return (
+                                <tr key={i}>
+                                    <td>{value}</td>
+                                    <td>{label}</td>
+                                    <td>{description}</td>
+                                </tr>
+                            );
+                        }
+
+                        return (
+                            <tr key={i}>
+                                {Object.entries(d).map(
+                                    ([k, v], index) =>
+                                        k !== 'readonly' &&
+                                        k !== 'optional' &&
+                                        k !== 'deprecated' && (
+                                            <td key={index}>
+                                                {k === 'parameters' ? (
+                                                    v.map((_v, i) => {
+                                                        return (
+                                                            <div className="doc-option-params" key={i}>
+                                                                <span className="doc-option-parameter-name">{_v.name}: </span>
+                                                                <span className="doc-option-parameter-type">{createContent(_v.type)}</span>
+                                                                <br />
+                                                            </div>
+                                                        );
+                                                    })
+                                                ) : k === 'default' ? (
+                                                    <div className={classNames('doc-option-default', { 'doc-option-dark': appContentContext.darkMode, 'doc-option-light': !appContentContext.darkMode })}>
+                                                        {ObjectUtils.isEmpty(v) ? 'null' : createContent(v, k === 'name', d.deprecated)}
+                                                    </div>
+                                                ) : k === 'type' ? (
+                                                    <span className="doc-option-type">{createContent(v, k === 'name', d.deprecated)}</span>
+                                                ) : k === 'returnType' ? (
+                                                    <div className={classNames('doc-option-returnType', { 'doc-option-dark': appContentContext.darkMode, 'doc-option-light': !appContentContext.darkMode })}>
+                                                        {createContent(v, k === 'name', d.deprecated)}
+                                                    </div>
+                                                ) : k === 'description' || k === 'values' ? (
+                                                    <span className="doc-option-description">{v}</span>
+                                                ) : (
+                                                    createContent(v, k === 'name', d.deprecated)
+                                                )}
+                                            </td>
+                                        )
+                                )}
+                            </tr>
+                        );
+                    })}
+                </React.Fragment>
+            );
+        };
+
+        const createTHead = () => {
+            return (
+                <React.Fragment>
+                    {isPT ? (
+                        <tr>
+                            {headers.map((h) => (
+                                <th key={h}>{h}</th>
+                            ))}
+                        </tr>
+                    ) : (
+                        <tr>{headers.map((h) => h !== 'readonly' && h !== 'optional' && h !== 'deprecated' && <th key={h}>{h}</th>)}</tr>
+                    )}
+                </React.Fragment>
+            );
+        };
+
+        const thead = createTHead();
+        const tbody = createTBody();
+
+        return (
+            <React.Fragment key={id}>
+                <DocSectionText {...props}>
+                    <p>{description}</p>
+                </DocSectionText>
+                <div className="doc-tablewrapper">
+                    <table className="doc-table">
+                        <thead>{thead}</thead>
+                        <tbody>{tbody}</tbody>
+                    </table>
+                </div>
+            </React.Fragment>
+        );
+    }
+
+    return null;
+};
+
+export default DocApiTable;
diff --git a/components/doc/common/doccomponent.js b/components/doc/common/doccomponent.js
new file mode 100644
index 0000000000..0cee2d5c1c
--- /dev/null
+++ b/components/doc/common/doccomponent.js
@@ -0,0 +1,134 @@
+import { classNames } from '@/components/lib/utils/Utils';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { DocApiSection } from './docapisection';
+import { DocSectionNav } from './docsectionnav';
+import { DocSections } from './docsections';
+
+export function DocComponent(props) {
+    const [tab, setTab] = useState(0);
+    const router = useRouter();
+    let header;
+
+    if (props.header.startsWith('use')) {
+        header = 'HOOK';
+    } else if (props.header === 'PassThrough' || props.header === 'Configuration') {
+        header = 'OVERVIEW';
+    } else {
+        header = 'FEATURES';
+    }
+
+    const activateTab = (i) => {
+        setTab(i);
+        router.replace(router.pathname);
+    };
+
+    useEffect(() => {
+        if (router.asPath.includes('#api')) {
+            setTab(1);
+        }
+
+        if (router.asPath.includes('#pt')) {
+            setTab(3);
+        }
+    }, [router.asPath]);
+
+    return (
+        <div className={classNames(props.className, 'doc-component')}>
+            <Head>
+                <title>{props.title}</title>
+                <meta name="description" content={props.description} />
+            </Head>
+            {!props.hideTabMenu ? (
+                <ul className="doc-tabmenu">
+                    <li className={classNames({ 'doc-tabmenu-active': tab === 0 })}>
+                        <button type="button" onClick={() => activateTab(0)}>
+                            {header}
+                        </button>
+                    </li>
+                    <li className={classNames({ 'doc-tabmenu-active': tab === 1 })}>
+                        <button type="button" onClick={() => activateTab(1)}>
+                            API
+                        </button>
+                    </li>
+                    {props.themingDocs ? (
+                        <li className={classNames({ 'doc-tabmenu-active': tab === 2 })}>
+                            <button type="button" onClick={() => activateTab(2)}>
+                                THEMING
+                            </button>
+                        </li>
+                    ) : null}
+                    {props.ptDocs ? (
+                        <li className={classNames({ 'doc-tabmenu-active': tab === 3 })}>
+                            <button type="button" onClick={() => activateTab(3)}>
+                                PASS THROUGH
+                            </button>
+                        </li>
+                    ) : null}
+                </ul>
+            ) : null}
+            <div className="doc-tabpanels">
+                {tab === 0 ? (
+                    <div className="doc-tabpanel">
+                        <div className="doc-main">
+                            <div className="doc-intro">
+                                <h1>{props.header}</h1>
+                                <p dangerouslySetInnerHTML={{ __html: props.description }} />
+                            </div>
+                            <DocSections docs={props.componentDocs} />
+                        </div>
+                        <DocSectionNav docs={props.componentDocs} />
+                    </div>
+                ) : null}
+                {tab === 1 ? (
+                    <div className="doc-tabpanel">
+                        {props.apiDocs ? (
+                            <DocApiSection header={props.header} doc={props.apiDocs} apiExclude={props.apiExclude} />
+                        ) : (
+                            <>
+                                <div className="doc-main">
+                                    <div className="doc-intro">
+                                        <h1>{props.header} API</h1>
+                                        <p>{props.header} is a CSS feature so does not provide a Javascript API</p>
+                                    </div>
+                                </div>
+                            </>
+                        )}
+                    </div>
+                ) : null}
+                {tab === 2 ? (
+                    <>
+                        {props.themingDocs ? (
+                            <div className="doc-tabpanel">
+                                <div className="doc-main">
+                                    <div className="doc-intro">
+                                        <h1>{props.header} Theming</h1>
+                                    </div>
+                                    <DocSections docs={props.themingDocs} />
+                                </div>
+                                <DocSectionNav docs={props.themingDocs} />
+                            </div>
+                        ) : null}
+                    </>
+                ) : null}
+                {tab === 3 ? (
+                    <>
+                        {props.ptDocs ? (
+                            <div className="doc-tabpanel">
+                                <div className="doc-main">
+                                    <div className="doc-intro">
+                                        <h1>{props.header} Pass Through</h1>
+                                        <p>{props.ptDescription}</p>
+                                    </div>
+                                    <DocSections docs={props.ptDocs} />
+                                </div>
+                                <DocSectionNav docs={props.ptDocs} />
+                            </div>
+                        ) : null}
+                    </>
+                ) : null}
+            </div>
+        </div>
+    );
+}
diff --git a/components/doc/common/docsectioncode.js b/components/doc/common/docsectioncode.js
new file mode 100644
index 0000000000..34e210ded5
--- /dev/null
+++ b/components/doc/common/docsectioncode.js
@@ -0,0 +1,135 @@
+import { Button } from '@/components/lib/button/Button';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useEffect, useState } from 'react';
+import { useCodeEditor } from './codeeditor';
+import { CodeHighlight } from './codehighlight';
+
+export function DocSectionCode(props) {
+    const [codeMode, setCodeMode] = useState('basic');
+    const [codeLang, setCodeLang] = useState(props.code.javascript ? 'javascript' : 'basic');
+    const codeEditor = useCodeEditor({ ...props, template: 'vite' });
+
+    useEffect(() => {
+        if (props.embedded) {
+            codeEditor.openStackBlitz(codeLang);
+        }
+    }, [codeEditor, codeLang, props.embedded]);
+
+    const toggleCodeMode = (content) => {
+        if (codeMode === 'data') {
+            setCodeMode('javascript');
+        } else {
+            setCodeMode(codeMode === 'basic' ? content : 'basic');
+        }
+
+        setCodeLang('javascript');
+    };
+
+    const copyCode = async () => {
+        await navigator.clipboard.writeText(props.code[codeLang]);
+    };
+
+    return (
+        <>
+            {!props.embedded && (
+                <div className="doc-section-code">
+                    <div className="doc-section-code-buttons scalein animation-duration-300">
+                        {codeMode !== 'basic' && !props.hideToggleCode && codeMode !== 'data' && (
+                            <>
+                                <Button
+                                    className={classNames('py-0 px-2 border-round h-2rem shadow-none', {
+                                        'code-active': codeLang === 'javascript' && codeMode !== 'data'
+                                    })}
+                                    label="JS"
+                                    onClick={() => setCodeLang('javascript')}
+                                    tooltip="JavaScript Code"
+                                    tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
+                                />
+                                <Button
+                                    className={classNames('py-0 px-2 border-round h-2rem shadow-none', { 'code-active': codeLang === 'typescript' })}
+                                    label="TS"
+                                    onClick={() => setCodeLang('typescript')}
+                                    tooltip="TypeScript Code"
+                                    tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
+                                />
+                            </>
+                        )}
+
+                        {!props.hideToggleCode && (
+                            <Button
+                                type="button"
+                                onClick={() => toggleCodeMode('javascript')}
+                                className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center shadow-none"
+                                tooltip="Toggle Full Code"
+                                tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
+                            >
+                                <i className="pi pi-code" />
+                            </Button>
+                        )}
+                        {!props.hideToggleCode && props.code.data ? (
+                            <Button
+                                type="button"
+                                onClick={() => setCodeMode('data')}
+                                className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center shadow-none"
+                                tooltip="View Data"
+                                tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
+                            >
+                                <i className="pi pi-database" />
+                            </Button>
+                        ) : null}
+                        {!props.hideStackBlitz && (
+                            <Button
+                                type="button"
+                                className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center shadow-none"
+                                tooltip="Edit in StackBlitz"
+                                tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
+                                onClick={() => codeEditor.openStackBlitz(codeLang)}
+                            >
+                                <svg role="img" viewBox="0 0 13 19" width={13} height={18} fill={'currentColor'} style={{ display: 'block' }}>
+                                    <path d="M0 10.6533H5.43896L2.26866 18.1733L12.6667 7.463H7.1986L10.3399 0L0 10.6533Z" />
+                                </svg>
+                            </Button>
+                        )}
+                        <Button
+                            type="button"
+                            onClick={copyCode}
+                            className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center shadow-none"
+                            tooltip="Copy Code"
+                            tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
+                        >
+                            <i className="pi pi-copy" />
+                        </Button>
+                    </div>
+
+                    {codeMode === 'basic' && (
+                        <div className={props.codeClassName}>
+                            <CodeHighlight code {...props}>
+                                {props.code.basic}
+                            </CodeHighlight>
+                        </div>
+                    )}
+                    {codeMode === 'data' && (
+                        <div className={props.codeClassName}>
+                            <CodeHighlight code lang={'json'}>
+                                {props.code.data}
+                            </CodeHighlight>
+                        </div>
+                    )}
+                    {codeMode !== 'basic' && codeLang === 'javascript' && (
+                        <div className={props.codeClassName}>
+                            <CodeHighlight code>{props.code.javascript}</CodeHighlight>
+                        </div>
+                    )}
+                    {codeMode !== 'basic' && codeLang === 'typescript' && (
+                        <div className={props.codeClassName}>
+                            <CodeHighlight code lang={'tsx'}>
+                                {props.code.typescript}
+                            </CodeHighlight>
+                        </div>
+                    )}
+                </div>
+            )}
+            {props.embedded && <div id="embed" />}
+        </>
+    );
+}
diff --git a/components/doc/common/docsectionnav.js b/components/doc/common/docsectionnav.js
new file mode 100644
index 0000000000..59e22f2ab2
--- /dev/null
+++ b/components/doc/common/docsectionnav.js
@@ -0,0 +1,151 @@
+import { useEventListener } from '@/components/lib/hooks/Hooks';
+import { DomHandler, ObjectUtils, classNames } from '@/components/lib/utils/Utils';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect, useRef, useState } from 'react';
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { useContext } from 'react';
+import { Button } from '@/components/lib/button/Button';
+
+export function DocSectionNav({ docs = [] }) {
+    const { darkMode } = useContext(AppContentContext);
+    const router = useRouter();
+    const [activeId, setActiveId] = useState(null);
+    const navRef = useRef(null);
+    const topbarHeight = useRef(0);
+    const isScrollBlocked = useRef(false);
+    const scrollEndTimer = useRef(undefined);
+
+    const [bindDocumentScrollListener] = useEventListener({
+        target: 'window',
+        type: 'scroll',
+        listener: (event) => {
+            if (!isScrollBlocked.current) {
+                const labels = DomHandler.find(event.target, ':is(h1,h2,h3).doc-section-label');
+                const windowScrollTop = DomHandler.getWindowScrollTop();
+
+                labels.forEach((label) => {
+                    const { top } = DomHandler.getOffset(label);
+                    const threshold = getThreshold(label);
+
+                    if (top - threshold <= windowScrollTop) {
+                        const link = DomHandler.findSingle(label, 'a');
+
+                        setActiveId(link.id);
+                    }
+                });
+            }
+
+            clearTimeout(scrollEndTimer.current);
+            scrollEndTimer.current = setTimeout(() => {
+                isScrollBlocked.current = false;
+
+                const activeItem = DomHandler.findSingle(navRef.current, '.active-navbar-item');
+
+                activeItem && activeItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }, 50);
+        }
+    });
+
+    const onClick = (id) => {
+        setActiveId(id);
+        setTimeout(() => {
+            scrollToLabelById(id, 'smooth');
+            isScrollBlocked.current = true;
+        }, 1);
+    };
+
+    const scrollToLabelById = (id, behavior) => {
+        const label = document.getElementById(id);
+
+        label && label.parentElement.scrollIntoView({ block: 'start', behavior });
+    };
+
+    const getThreshold = (label) => {
+        if (!topbarHeight.current) {
+            const topbar = DomHandler.findSingle(document.body, '.layout-topbar');
+
+            topbarHeight.current = topbar ? DomHandler.getHeight(topbar) : 0;
+        }
+
+        return topbarHeight.current + DomHandler.getHeight(label) * 1.5;
+    };
+
+    useEffect(() => {
+        const hash = window.location.hash.substring(1);
+        const hasHash = ObjectUtils.isNotEmpty(hash);
+        const id = hasHash ? hash : (docs[0] || {}).id;
+
+        setActiveId(id);
+        hasHash && scrollToLabelById(id);
+        bindDocumentScrollListener();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const createItem = ({ id, label, children }, level = 0) => {
+        const { basePath, pathname } = router;
+        const href = `${basePath}${pathname}#${id}`;
+
+        return (
+            <li key={id} className={classNames('navbar-item', { 'active-navbar-item': activeId === id })}>
+                <div className="navbar-item-content">
+                    <Link href={href}>
+                        <button className="px-link" onClick={() => onClick(id)} title={label}>
+                            {label}
+                        </button>
+                    </Link>
+                </div>
+
+                <ul>{level !== 1 && children && children.map((child) => createItem(child, 1))}</ul>
+            </li>
+        );
+    };
+
+    return (
+        <div className="doc-section-nav-container">
+            <ul ref={navRef} className="doc-section-nav">
+                {docs.map((item) => createItem(item))}
+            </ul>
+
+            <div
+                style={{
+                    marginTop: '2rem',
+                    border: '1px solid light-dark(var(--surface-200),var(--surface-800))',
+                    padding: '1rem',
+                    background: 'light-dark(var(--surface-0),var(--surface-900))',
+                    width: '100%',
+                    borderRadius: '0.5rem'
+                }}
+            >
+                <img
+                    style={{
+                        width: '100%',
+                        borderRadius: '0.5rem'
+                    }}
+                    src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/object/public/store.images/discount/dec25/showcase/primestore-endofyear-2025-sm.jpg"
+                    alt="November Sale 2025"
+                />
+                <div
+                    style={{
+                        textAlign: 'center',
+                        fontSize: '0.875rem',
+                        marginTop: '1rem',
+                        lineHeight: '1.25rem'
+                    }}
+                >
+                    Apply coupon code <b>ENDOFYEAR25</b> at checkout to enjoy 25% off your order.
+                </div>
+                <span
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'center',
+                        marginTop:'1rem'
+                    }}
+                >
+                    <a href="https://primeui.store/" target="_blank" rel="noopener" className='p-button p-component p-button-rounded p-button-sm'>
+                        <span className='p-button-label p-c'>Buy Now</span>
+                    </a>
+                </span>
+            </div>
+        </div>
+    );
+}
diff --git a/components/doc/common/docsections.js b/components/doc/common/docsections.js
new file mode 100644
index 0000000000..f2c79d53a4
--- /dev/null
+++ b/components/doc/common/docsections.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import APIDocs from './apidoc/index.json';
+import { DocSectionText } from './docsectiontext';
+
+export function DocSections({ docs }) {
+    const getPTOption = (name) => {
+        const key = name.toLowerCase();
+
+        let values = APIDocs[key]?.interfaces?.values[`${name}PassThroughOptions`] || null;
+
+        if (!values) {
+            for (const parentKey in APIDocs) {
+                if (APIDocs[parentKey]?.interfaces?.values[`${name}PassThroughOptions`]) {
+                    values = APIDocs[parentKey]?.interfaces?.values[`${name}PassThroughOptions`] || null;
+
+                    if (values) {
+                        break;
+                    }
+                }
+            }
+        }
+
+        let data = [];
+
+        if (values) {
+            for (const [i, prop] of values.props.entries()) {
+                data.push({
+                    value: i + 1,
+                    label: prop.name,
+                    description: prop.description
+                });
+            }
+        }
+
+        return data;
+    };
+
+    const renderDocChildren = (doc, level = 2) => {
+        return (
+            <React.Fragment key={doc.id + '_' + level}>
+                <DocSectionText {...doc} level={level}>
+                    {doc.description ? <p>{doc.description}</p> : null}
+                </DocSectionText>
+                {doc.children.map((d) => {
+                    const { id, label, component, children } = d;
+                    const Component = component;
+
+                    return component ? <Component id={id} key={id} label={label} level={level + 1} /> : children ? renderDocChildren(d, level + 1) : null;
+                })}
+            </React.Fragment>
+        );
+    };
+
+    const renderDocs = () => {
+        return docs.map((doc, i) => {
+            const { component: Comp, id, label, children } = doc;
+            const isPT = label.includes('PT');
+            const key = label.split(' ')[0];
+
+            const props = {
+                id,
+                label,
+                ...(isPT && { data: getPTOption(key) })
+            };
+
+            return (
+                <section key={`${label}_${i}`} className="py-4">
+                    {children ? renderDocChildren(doc) : Comp ? <Comp {...props} /> : null}
+                </section>
+            );
+        });
+    };
+
+    return renderDocs();
+}
diff --git a/components/doc/common/docsectiontext.js b/components/doc/common/docsectiontext.js
new file mode 100644
index 0000000000..0f467baa7e
--- /dev/null
+++ b/components/doc/common/docsectiontext.js
@@ -0,0 +1,41 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+export function DocSectionText(props) {
+    const { id, label, level = 2, children } = props;
+    const router = useRouter();
+
+    const onClick = (event) => {
+        const parentElement = event.currentTarget.parentElement;
+        const hash = window.location.hash.substring(1);
+
+        hash === id && event.preventDefault();
+
+        setTimeout(() => {
+            parentElement.scrollIntoView({ block: 'start' });
+        }, 0);
+    };
+
+    const content = (
+        <>
+            {label}
+            <Link href={router.basePath + router.pathname + '#' + id} target="_self">
+                <a id={id} onClick={onClick}>
+                    #
+                </a>
+            </Link>
+        </>
+    );
+
+    const Title = (titleProps) => {
+        return React.createElement(`h${level}`, { className: 'doc-section-label' }, titleProps.children);
+    };
+
+    return (
+        <>
+            <Title>{content}</Title>
+            <div className="doc-section-description">{children}</div>
+        </>
+    );
+}
diff --git a/components/doc/common/docsubsection.js b/components/doc/common/docsubsection.js
new file mode 100644
index 0000000000..8db971ccfa
--- /dev/null
+++ b/components/doc/common/docsubsection.js
@@ -0,0 +1,18 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+export function DocSubSection(props) {
+    const router = useRouter();
+
+    return (
+        <div style={{ marginBottom: '30px' }}>
+            <h3 className="doc-section-label">
+                {props.label}
+                <Link href={router.basePath + router.pathname + '#' + props.id} target="_self">
+                    <a id={props.id}>#</a>
+                </Link>
+            </h3>
+            {props.children}
+        </div>
+    );
+}
diff --git a/components/doc/configuration/appendtodoc.js b/components/doc/configuration/appendtodoc.js
new file mode 100644
index 0000000000..287ceacd4d
--- /dev/null
+++ b/components/doc/configuration/appendtodoc.js
@@ -0,0 +1,36 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AppendToDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        appendTo: 'self',
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    For components with an overlay like a dropdown, popups can be mounted either into the component or DOM element instance using this option. Valid values are any DOM Element like document body and <i>self</i>. By default all popups
+                    are appended to document body via Portals.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/csstransitiondoc.js b/components/doc/configuration/csstransitiondoc.js
new file mode 100644
index 0000000000..6c83fb5e10
--- /dev/null
+++ b/components/doc/configuration/csstransitiondoc.js
@@ -0,0 +1,35 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function CSSTransitionDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        cssTransition: false,
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact components utilize <a href="https://www.npmjs.com/package/react-transition-group">react-transition-group</a> internally to implement animations. Setting <i>cssTransition</i> to false disables all animations.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/filtermatchmodedoc.js b/components/doc/configuration/filtermatchmodedoc.js
new file mode 100644
index 0000000000..6b2e4f3bf3
--- /dev/null
+++ b/components/doc/configuration/filtermatchmodedoc.js
@@ -0,0 +1,37 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function FilterMatchModeDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        filterMatchMode: {
+            text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
+            numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
+            date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
+         },
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Default filter modes to display on DataTable filter menus.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/hideoverlaysdoc.js b/components/doc/configuration/hideoverlaysdoc.js
new file mode 100644
index 0000000000..ccf95d30ed
--- /dev/null
+++ b/components/doc/configuration/hideoverlaysdoc.js
@@ -0,0 +1,44 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function HideOverlaysDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        hideOverlaysOnDocumentScrolling: true,
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+
+//_app.css
+body {
+  margin: 0px;
+  min-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the
+                    overlay follow the scroll. Default value is false. IMPORTANT: Your <i>document.body</i> must have <i>overflow</i> CSS on this to work properly.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/inputstyledoc.js b/components/doc/configuration/inputstyledoc.js
new file mode 100644
index 0000000000..a02cb1f3fa
--- /dev/null
+++ b/components/doc/configuration/inputstyledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function InputStyleDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        inputStyle: 'filled',
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables
+                    the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application
+                    element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set
+                    inputStyle to <i>filled</i> at PrimeReact configuration as well.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/locale/addlocaledoc.js b/components/doc/configuration/locale/addlocaledoc.js
new file mode 100644
index 0000000000..f5435f0add
--- /dev/null
+++ b/components/doc/configuration/locale/addlocaledoc.js
@@ -0,0 +1,31 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AddLocaleDoc(props) {
+    const code = {
+        basic: `
+addLocale('es', {
+    firstDayOfWeek: 1,
+    dayNames: ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'],
+    dayNamesShort: ['dom', 'lun', 'mar', 'mié', 'jue', 'vie', 'sáb'],
+    dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
+    monthNames: ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'],
+    monthNamesShort: ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'],
+    today: 'Hoy',
+    clear: 'Limpiar',
+    //...
+});
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    New locale settings can be added using <i>addLocale</i> method.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/locale/importdoc.js b/components/doc/configuration/locale/importdoc.js
new file mode 100644
index 0000000000..2ac6c0615a
--- /dev/null
+++ b/components/doc/configuration/locale/importdoc.js
@@ -0,0 +1,22 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions } from 'primereact/api';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Configuration is managed by the <Link href="http://github.com/configuration/#api.API.LocaleOptions">Locale API</Link> imported from <i>primereact/api</i>.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/locale/repositorydoc.js b/components/doc/configuration/locale/repositorydoc.js
new file mode 100644
index 0000000000..8d61b4d64d
--- /dev/null
+++ b/components/doc/configuration/locale/repositorydoc.js
@@ -0,0 +1,14 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function RepositoryDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Ready to use settings for locales are available at the community supported <a href="https://github.com/primefaces/primelocale">PrimeLocale</a> repository. We'd appreciate if you could contribute to this repository with pull
+                    requests and share it with the rest of the community.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/configuration/locale/setlocaledoc.js b/components/doc/configuration/locale/setlocaledoc.js
new file mode 100644
index 0000000000..d572beec1a
--- /dev/null
+++ b/components/doc/configuration/locale/setlocaledoc.js
@@ -0,0 +1,21 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SetLocaleDoc(props) {
+    const code = {
+        basic: `
+locale('en');
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An available locale can be set with <i>locale</i> method at anytime.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/locale/setuplocaledoc.js b/components/doc/configuration/locale/setuplocaledoc.js
new file mode 100644
index 0000000000..aa932e4091
--- /dev/null
+++ b/components/doc/configuration/locale/setuplocaledoc.js
@@ -0,0 +1,35 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SetupLocaleDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        locale: 'de',
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    To establish the default locale for your entire application, you can utilize the <i>PrimeReactProvider</i>.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/noncedoc.js b/components/doc/configuration/noncedoc.js
new file mode 100644
index 0000000000..be461fd410
--- /dev/null
+++ b/components/doc/configuration/noncedoc.js
@@ -0,0 +1,35 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function NonceDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        nonce: '.........',
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce">nonce</a> value to use on dynamically generated style elements.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/nullsortorderdoc.js b/components/doc/configuration/nullsortorderdoc.js
new file mode 100644
index 0000000000..6faa9cff63
--- /dev/null
+++ b/components/doc/configuration/nullsortorderdoc.js
@@ -0,0 +1,36 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function NullSortOrderDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        nullSortOrder: 1,
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Determines how <i>null</i> values are sorted. The default value of <i>1</i> means sort like Excel with all NULL values at the bottom of the list. A value of <i>-1</i> sorts NULL at the top of the list in ascending mode and at the
+                    bottom of the list in descending mode.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/rippledoc.js b/components/doc/configuration/rippledoc.js
new file mode 100644
index 0000000000..7165916ffd
--- /dev/null
+++ b/components/doc/configuration/rippledoc.js
@@ -0,0 +1,33 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function RippleDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        ripple: true,
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/stylecontainer.js b/components/doc/configuration/stylecontainer.js
new file mode 100644
index 0000000000..3cd27616e6
--- /dev/null
+++ b/components/doc/configuration/stylecontainer.js
@@ -0,0 +1,39 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleContainer(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+root.attachShadow({ mode: 'open' }); // Open the shadowRoot
+const mountHere = root.shadowRoot;
+
+const options = { appendTo: mountHere, styleContainer: mountHere};
+
+ReactDOM.createRoot(mountHere).render(
+  <React.StrictMode>
+    <PrimeReactProvider value={options}>
+      <App />
+    </PrimeReactProvider>
+  </React.StrictMode>
+);
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    This option allows <i>useStyle</i> to insert dynamic CSS styles into a specific container. This is useful when styles need to be scoped such as in a{' '}
+                    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM" target="_blank">
+                        Shadow DOM
+                    </a>
+                    . By default all dynamic styles are appended to <i>document.head</i>.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/configuration/zindexdoc.js b/components/doc/configuration/zindexdoc.js
new file mode 100644
index 0000000000..35e35d23fe
--- /dev/null
+++ b/components/doc/configuration/zindexdoc.js
@@ -0,0 +1,47 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ZIndexDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        zIndex: {
+            modal: 1100,    // dialog, sidebar
+            overlay: 1000,  // dropdown, overlaypanel
+            menu: 1000,     // overlay menus
+            tooltip: 1100   // tooltip
+            toast: 1200     // toast
+        },
+        autoZIndex: true,
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a
+                    custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeReact configuration offers the <i>zIndex</i> property
+                    to customize the default values for components categories. Default values are described below and can be customized when setting up the context value.
+                </p>
+                <p>
+                    The ZIndex of all components is increased according to their groups in harmony with each other. When <i>autoZIndex</i> is false, each group increments its zIndex within itself.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/accessibilitydoc.js b/components/doc/confirmdialog/accessibilitydoc.js
new file mode 100644
index 0000000000..753cee3c95
--- /dev/null
+++ b/components/doc/confirmdialog/accessibilitydoc.js
@@ -0,0 +1,110 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ConfirmDialog component uses <i>alertdialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default
+                behavior. In addition <i>aria-modal</i> is added since focus is kept within the popup.
+            </p>
+            <p>
+                It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding <i>tabIndex</i> would be necessary.
+            </p>
+
+            <p>
+                When <i>confirm</i> function is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the trigger and the popup is
+                defined.
+            </p>
+
+            <CodeHighlight lang="js">
+                {`
+const confirm = (event) => {
+    confirmDialog({
+        trigger: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => acceptFunc(),
+        reject: () => rejectFunc()
+    });
+}
+
+<Button onClick={confirm} icon="pi pi-check" label="Confirm"></Button>
+
+<ConfirmDialog />
+`}
+            </CodeHighlight>
+
+            <p>
+                If the dialog is controlled with the <i>visible</i> property <i>aria-expanded</i> and <i>aria-controls</i> need to be handled explicitly.
+            </p>
+            <CodeHighlight>
+                {`
+<ConfirmDialog id="dlg_confirmation" visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?"
+header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+
+<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" aria-controls={visible ? 'dlg_confirmation' : null} aria-expanded={visible ? true : false} />
+`}
+            </CodeHighlight>
+            <h3>Overlay Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element within the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element within the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Buttons Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/confirmdialog/basicdoc.js b/components/doc/confirmdialog/basicdoc.js
new file mode 100644
index 0000000000..cc057dbe14
--- /dev/null
+++ b/components/doc/confirmdialog/basicdoc.js
@@ -0,0 +1,170 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { confirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = () => {
+        confirmDialog({
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = () => {
+        confirmDialog({
+            message: 'Do you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'pi pi-info-circle',
+            acceptClassName: 'p-button-danger',
+            defaultFocus: 'reject',
+            accept,
+            reject
+        });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmDialog />
+<Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+<Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    const confirm1 = () => {
+        confirmDialog({
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = () => {
+        confirmDialog({
+            message: 'Do you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" className="mr-2"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current?.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    const confirm1 = () => {
+        confirmDialog({
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = () => {
+        confirmDialog({
+            message: 'Do you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" className="mr-2"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A ConfirmDialog component needs to be present on the page that is interacted with the <i>confirmDialog</i> function that takes a configuration object for customization.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger p-button-outlined" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/declarativedoc.js b/components/doc/confirmdialog/declarativedoc.js
new file mode 100644
index 0000000000..d8f7f0285b
--- /dev/null
+++ b/components/doc/confirmdialog/declarativedoc.js
@@ -0,0 +1,104 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function DeclarativeDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmDialog group="declarative"  visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" 
+    header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+        `,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog group="declarative"  visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" 
+                header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primefaces/button';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current?.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog group="declarative"  visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" 
+                header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Declarative is an alternative to the programmatic approach where ConfirmDialog is controlled with a binding to <i>visible</i> and <i>onHide</i> event callback.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmDialog group="declarative" visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" header="Confirmation" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/headlessdoc.js b/components/doc/confirmdialog/headlessdoc.js
new file mode 100644
index 0000000000..64845bdb4f
--- /dev/null
+++ b/components/doc/confirmdialog/headlessdoc.js
@@ -0,0 +1,272 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmDialog, confirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function HeadlessDoc(props) {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = () => {
+        confirmDialog({
+            group: 'headless',
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmDialog
+    group="headless"
+    content={({ headerRef, contentRef, footerRef, hide, message }) => (
+        <div className="flex flex-column align-items-center p-5 surface-overlay border-round">
+            <div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                <i className="pi pi-question text-5xl"></i>
+            </div>
+            <span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
+                {message.header}
+            </span>
+            <p className="mb-0" ref={contentRef}>
+                {message.message}
+            </p>
+            <div className="flex align-items-center gap-2 mt-4" ref={footerRef}>
+                <Button
+                    label="Save"
+                    onClick={(event) => {
+                        hide(event);
+                        accept();
+                    }}
+                    className="w-8rem"
+                ></Button>
+                <Button
+                    label="Cancel"
+                    outlined
+                    onClick={(event) => {
+                        hide(event);
+                        reject();
+                    }}
+                    className="w-8rem"
+                ></Button>
+            </div>
+        </div>
+    )}
+/>
+<div className="card flex flex-wrap gap-2 justify-content-center">
+    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+</div>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function HeadlessDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = () => {
+        confirmDialog({
+            group: 'headless',
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="headless"
+                content={({ headerRef, contentRef, footerRef, hide, message }) => (
+                    <div className="flex flex-column align-items-center p-5 surface-overlay border-round">
+                        <div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                            <i className="pi pi-question text-5xl"></i>
+                        </div>
+                        <span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
+                            {message.header}
+                        </span>
+                        <p className="mb-0" ref={contentRef}>
+                            {message.message}
+                        </p>
+                        <div className="flex align-items-center gap-2 mt-4" ref={footerRef}>
+                            <Button
+                                label="Save"
+                                onClick={(event) => {
+                                    hide(event);
+                                    accept();
+                                }}
+                                className="w-8rem"
+                            ></Button>
+                            <Button
+                                label="Cancel"
+                                outlined
+                                onClick={(event) => {
+                                    hide(event);
+                                    reject();
+                                }}
+                                className="w-8rem"
+                            ></Button>
+                        </div>
+                    </div>
+                )}
+            />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function HeadlessDemo() {
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current?.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    const confirm1 = () => {
+        confirmDialog({
+            group: 'headless',
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="headless"
+                content={({ headerRef, contentRef, footerRef, hide, message }) => (
+                    <div className="flex flex-column align-items-center p-5 surface-overlay border-round">
+                        <div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                            <i className="pi pi-question text-5xl"></i>
+                        </div>
+                        <span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
+                            {message.header}
+                        </span>
+                        <p className="mb-0" ref={contentRef}>
+                            {message.message}
+                        </p>
+                        <div className="flex align-items-center gap-2 mt-4" ref={footerRef}>
+                            <Button
+                                label="Save"
+                                onClick={(event) => {
+                                    hide(event);
+                                    accept();
+                                }}
+                                className="w-8rem"
+                            ></Button>
+                            <Button
+                                label="Cancel"
+                                outlined
+                                onClick={(event) => {
+                                    hide(event);
+                                    reject();
+                                }}
+                                className="w-8rem"
+                            ></Button>
+                        </div>
+                    </div>
+                )}
+            />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <div>
+            <DocSectionText {...props}>
+                <p>
+                    Headless mode is enabled by defining a <i>content</i> prop that lets you implement entire confirmation UI instead of the default elements.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="headless"
+                content={({ headerRef, contentRef, footerRef, hide, message }) => (
+                    <div className="flex flex-column align-items-center p-5 surface-overlay border-round">
+                        <div className="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                            <i className="pi pi-question text-5xl" />
+                        </div>
+                        <span className="font-bold text-2xl block mb-2 mt-4" ref={headerRef}>
+                            {message.header}
+                        </span>
+                        <p className="mb-0" ref={contentRef}>
+                            {message.message}
+                        </p>
+                        <div className="flex align-items-center gap-2 mt-4" ref={footerRef}>
+                            <Button
+                                label="Save"
+                                onClick={(event) => {
+                                    hide(event);
+                                    accept();
+                                }}
+                                className="w-8rem"
+                            />
+                            <Button
+                                label="Cancel"
+                                outlined
+                                onClick={(event) => {
+                                    hide(event);
+                                    reject();
+                                }}
+                                className="w-8rem"
+                            />
+                        </div>
+                    </div>
+                )}
+            />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </div>
+    );
+}
diff --git a/components/doc/confirmdialog/importdoc.js b/components/doc/confirmdialog/importdoc.js
new file mode 100644
index 0000000000..ded7489e7d
--- /dev/null
+++ b/components/doc/confirmdialog/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ConfirmDialog } from 'primereact/confirmdialog'; // For <ConfirmDialog /> component
+import { confirmDialog } from 'primereact/confirmdialog'; // For confirmDialog method
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/positiondoc.js b/components/doc/confirmdialog/positiondoc.js
new file mode 100644
index 0000000000..8ce58e279d
--- /dev/null
+++ b/components/doc/confirmdialog/positiondoc.js
@@ -0,0 +1,179 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { confirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function PositionDoc(props) {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm = (position) => {
+        confirmDialog({
+            message: 'Do you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'pi pi-info-circle',
+            position,
+            accept,
+            reject
+        });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmDialog />
+<div className="flex flex-wrap justify-content-center gap-2 mb-2">
+    <Button label="Left" icon="pi pi-arrow-right" onClick={() => confirm('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+    <Button label="Right" icon="pi pi-arrow-left" onClick={() => confirm('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+</div>
+<div className="flex flex-wrap justify-content-center gap-2 mb-2">
+    <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => confirm('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+    <Button label="Top" icon="pi pi-arrow-down" onClick={() => confirm('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+    <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => confirm('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+</div>
+<div className="flex flex-wrap justify-content-center gap-2">
+    <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => confirm('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+    <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => confirm('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+    <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => confirm('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+</div>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function PositionDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    const confirm = (position) => {
+        confirmDialog({
+            message: 'Do you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'pi pi-info-circle',
+            position,
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <ConfirmDialog />
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="Left" icon="pi pi-arrow-right" onClick={() => confirm('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                <Button label="Right" icon="pi pi-arrow-left" onClick={() => confirm('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => confirm('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="Top" icon="pi pi-arrow-down" onClick={() => confirm('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => confirm('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2">
+                <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => confirm('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => confirm('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => confirm('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function PositionDemo() {
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current?.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    const confirm = (position) => {
+        confirmDialog({
+            message: 'Do you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'pi pi-info-circle',
+            position,
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <ConfirmDialog />
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="Left" icon="pi pi-arrow-right" onClick={() => confirm('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                <Button label="Right" icon="pi pi-arrow-left" onClick={() => confirm('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => confirm('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="Top" icon="pi pi-arrow-down" onClick={() => confirm('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => confirm('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2">
+                <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => confirm('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => confirm('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => confirm('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <DocSectionText {...props}>
+                <p>
+                    The <i>position</i> property of the confirm options is used to display a Dialog at all edges and corners of the screen.
+                </p>
+            </DocSectionText>
+
+            <div className="card">
+                <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                    <Button label="Left" icon="pi pi-arrow-right" onClick={() => confirm('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                    <Button label="Right" icon="pi pi-arrow-left" onClick={() => confirm('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                </div>
+                <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                    <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => confirm('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                    <Button label="Top" icon="pi pi-arrow-down" onClick={() => confirm('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                    <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => confirm('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                </div>
+                <div className="flex flex-wrap justify-content-center gap-2">
+                    <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => confirm('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                    <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => confirm('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                    <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => confirm('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/pt/wireframe.js b/components/doc/confirmdialog/pt/wireframe.js
new file mode 100644
index 0000000000..9b5df796e2
--- /dev/null
+++ b/components/doc/confirmdialog/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/confirmdialog.jpg" alt="confirmdialog" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/confirmdialog/responsivedoc.js b/components/doc/confirmdialog/responsivedoc.js
new file mode 100644
index 0000000000..d5e665fce9
--- /dev/null
+++ b/components/doc/confirmdialog/responsivedoc.js
@@ -0,0 +1,146 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function ResponsiveDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmDialog
+    group="declarative"
+    visible={visible}
+    onHide={() => setVisible(false)}
+    message="Are you sure you want to proceed?"
+    header="Confirmation"
+    icon="pi pi-exclamation-triangle"
+    accept={accept}
+    reject={reject}
+    style={{ width: '50vw' }}
+    breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+/>
+<Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+        `,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="declarative"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                message="Are you sure you want to proceed?"
+                header="Confirmation"
+                icon="pi pi-exclamation-triangle"
+                accept={accept}
+                reject={reject}
+                style={{ width: '50vw' }}
+                breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+            />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primefaces/button';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current?.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="declarative"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                message="Are you sure you want to proceed?"
+                header="Confirmation"
+                icon="pi pi-exclamation-triangle"
+                accept={accept}
+                reject={reject}
+                style={{ width: '50vw' }}
+                breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+            />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ConfirmDialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in style property
+                    is used.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmDialog
+                group="declarative"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                message="Are you sure you want to proceed?"
+                header="Confirmation"
+                icon="pi pi-exclamation-triangle"
+                accept={accept}
+                reject={reject}
+                style={{ width: '50vw' }}
+                breakpoints={{ '1100px': '75vw', '960px': '100vw' }}
+            />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/styledoc.js b/components/doc/confirmdialog/styledoc.js
new file mode 100644
index 0000000000..ebe2269d41
--- /dev/null
+++ b/components/doc/confirmdialog/styledoc.js
@@ -0,0 +1,30 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-confirm-dialog</td>
+                            <td>Container element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/templatedoc.js b/components/doc/confirmdialog/templatedoc.js
new file mode 100644
index 0000000000..a71391a02c
--- /dev/null
+++ b/components/doc/confirmdialog/templatedoc.js
@@ -0,0 +1,143 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmDialog, confirmDialog } from '@/components/lib/confirmdialog/ConfirmDialog';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function TemplateDoc(props) {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const showTemplate = () => {
+        confirmDialog({
+            group: 'templating',
+            header: 'Confirmation',
+            message: (
+                <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500" />
+                    <span>Please confirm to proceed moving forward.</span>
+                </div>
+            ),
+            accept,
+            reject
+        });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmDialog group="templating" />
+<div className="card flex justify-content-center">
+    <Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm"></Button>
+</div>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const showTemplate = () => {
+        confirmDialog({
+            group: 'templating',
+            header: 'Confirmation',
+            message: (
+                <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
+                    <span>Please confirm to proceed moving forward.</span>
+                </div>
+            ),
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog group="templating" />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm"></Button>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const showTemplate = () => {
+        confirmDialog({
+            group: 'templating',
+            header: 'Confirmation',
+            message: (
+                <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
+                    <span>Please confirm to proceed moving forward.</span>
+                </div>
+            ),
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog group="templating" />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm"></Button>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Templating allows customizing the message content. </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmDialog group="templating" />
+            <div className="card flex justify-content-center">
+                <Button onClick={() => showTemplate()} icon="pi pi-check" label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/theming/styleddoc.js b/components/doc/confirmdialog/theming/styleddoc.js
new file mode 100644
index 0000000000..e14e1287f1
--- /dev/null
+++ b/components/doc/confirmdialog/theming/styleddoc.js
@@ -0,0 +1,27 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-confirm-dialog</td>
+                            <td>Container element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/confirmdialog/theming/tailwinddoc.js b/components/doc/confirmdialog/theming/tailwinddoc.js
new file mode 100644
index 0000000000..b3fde6ce31
--- /dev/null
+++ b/components/doc/confirmdialog/theming/tailwinddoc.js
@@ -0,0 +1,95 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    confirmdialog: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-3 absolute left-0 top-0',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            )
+        },
+        content: 'p-5 items-center flex',
+        icon: 'text-2xl',
+        message: 'ml-4',
+        footer: 'flex gap-2 justify-end align-center text-right px-5 py-5 pt-0',
+        transition: TRANSITIONS.overlay
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    }
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    }
+
+    const confirm1 = () => {
+        confirmDialog({
+            message: 'Are you sure you want to proceed?',
+            header: 'Confirmation',
+            icon: 'pi pi-exclamation-triangle',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = () => {
+        confirmDialog({
+            message: 'Do you want to delete this record?',
+            header: 'Delete Confirmation',
+            icon: 'pi pi-info-circle',
+            acceptClassName: 'p-button-danger',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmDialog />
+            <div className="card flex flex-wrap gap-2 justify-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" className="mr-2"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete"></Button>
+            </div>
+        </>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/accessibilitydoc.js b/components/doc/confirmpopup/accessibilitydoc.js
new file mode 100644
index 0000000000..c31a164b6d
--- /dev/null
+++ b/components/doc/confirmpopup/accessibilitydoc.js
@@ -0,0 +1,79 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ConfirmPopup component uses <i>alertdialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition{' '}
+                <i>aria-modal</i> is added since focus is kept within the popup.
+            </p>
+            <p>
+                It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding <i>tabIndex</i> would be necessary. ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the
+                trigger so that the relation between the trigger and the popup is defined.
+            </p>
+
+            <h3>Overlay Keyboard Support</h3>
+            <p>
+                When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.
+            </p>
+
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element within the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element within the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Buttons Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Triggers the action, closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/confirmpopup/basicdoc.js b/components/doc/confirmpopup/basicdoc.js
new file mode 100644
index 0000000000..3e906a9120
--- /dev/null
+++ b/components/doc/confirmpopup/basicdoc.js
@@ -0,0 +1,173 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { confirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Do you want to delete this record?',
+            icon: 'pi pi-info-circle',
+            acceptClassName: 'p-button-danger',
+            defaultFocus: 'reject',
+            accept,
+            reject
+        });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmPopup />
+<div className="card flex flex-wrap gap-2 justify-content-center">
+    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+</div>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+    
+    const confirm1 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Do you want to delete this record?',
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Do you want to delete this record?',
+            icon: 'pi pi-info-circle',
+            defaultFocus: 'reject',
+            acceptClassName: 'p-button-danger',
+            accept,
+            reject
+        });
+    };
+
+    return ( 
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A ConfirmPopup component needs to be present on the page that is interacted with the <i>confirmPopup</i> function that takes a configuration object for customization. In order to align the popover, <i>target</i> property must be
+                    provided referring to the source element.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/declarativedoc.js b/components/doc/confirmpopup/declarativedoc.js
new file mode 100644
index 0000000000..1d64e87f06
--- /dev/null
+++ b/components/doc/confirmpopup/declarativedoc.js
@@ -0,0 +1,107 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function DeclarativeDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+    const buttonEl = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmPopup target={buttonEl.current} visible={visible} onHide={() => setVisible(false)} 
+    message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+<Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+        `,
+        javascript: `
+import React, { useRef, useState } from 'react';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState(false);
+    const toast = useRef(null);
+    const buttonEl = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup target={buttonEl.current} visible={visible} onHide={() => setVisible(false)} 
+                message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+            <div className="card flex justify-content-center">
+                <Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef, useState } from 'react';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function DeclarativeDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const toast = useRef<Toast>(null);
+    const buttonEl = useRef(null);
+
+    const accept = () => {
+        toast.current?.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current?.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup target={buttonEl.current} visible={visible} onHide={() => setVisible(false)} 
+                message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+            <div className="card flex justify-content-center">
+                <Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Declarative is an alternative to the programmatic approach where ConfirmDialog is controlled with a binding to <i>visible</i> and <i>onHide</i> event callback along with the <i>target</i> property to refer to the source element.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmPopup target={buttonEl.current} visible={visible} onHide={() => setVisible(false)} message="Are you sure you want to proceed?" icon="pi pi-exclamation-triangle" accept={accept} reject={reject} />
+            <div className="card flex justify-content-center">
+                <Button ref={buttonEl} onClick={() => setVisible(true)} icon="pi pi-check" label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/headlessdoc.js b/components/doc/confirmpopup/headlessdoc.js
new file mode 100644
index 0000000000..48d305e5ac
--- /dev/null
+++ b/components/doc/confirmpopup/headlessdoc.js
@@ -0,0 +1,240 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmPopup, confirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function HeadlessDoc(props) {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = (event) => {
+        confirmPopup({
+            group: 'headless',
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = (event) => {
+        confirmPopup({
+            group: 'headless',
+            target: event.currentTarget,
+            message: 'Do you want to delete this record?',
+            icon: 'pi pi-info-circle',
+            acceptClassName: 'p-button-danger',
+            defaultFocus: 'reject',
+            accept,
+            reject
+        });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmPopup
+    group="headless"
+    content={({message, acceptBtnRef, rejectBtnRef, hide}) => 
+        <div className="bg-gray-900 text-white border-round p-3">
+            <span>{message}</span>
+            <div className="flex align-items-center gap-2 mt-3">
+                <Button ref={acceptBtnRef} label="Save" onClick={() => {accept(); hide();}} className="p-button-sm p-button-outlined"></Button>
+                <Button ref={rejectBtnRef} label="Cancel" outlined onClick={() => {reject(); hide();}}className="p-button-sm p-button-text"></Button>
+            </div>
+        </div>
+    }
+/>
+<div className="card flex flex-wrap gap-2 justify-content-center">
+    <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+    <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+</div>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function HeadlessDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = (event) => {
+        confirmPopup({
+            group: 'headless',
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?', 
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = (event) => {
+        confirmPopup({
+            group: 'headless',
+            target: event.currentTarget,
+            message: 'Do you want to delete this record?',
+            icon: 'pi pi-info-circle',
+            acceptClassName: 'p-button-danger',
+            defaultFocus: 'reject',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup
+                group="headless"
+                content={({message, acceptBtnRef, rejectBtnRef, hide}) => 
+                    <div className="bg-gray-900 text-white border-round p-3">
+                        <span>{message}</span>
+                        <div className="flex align-items-center gap-2 mt-3">
+                            <Button ref={acceptBtnRef} label="Save" onClick={() => {accept(); hide();}} className="p-button-sm p-button-outlined"></Button>
+                            <Button ref={rejectBtnRef} label="Cancel" outlined onClick={() => {reject(); hide();}}className="p-button-sm p-button-text"></Button>
+                        </div>
+                    </div>
+                }
+            />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function HeadlessDemo() {
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const confirm1 = (event) => {
+        confirmPopup({
+            group: 'headless',
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?', 
+            icon: 'pi pi-exclamation-triangle',
+            defaultFocus: 'accept',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = (event) => {
+        confirmPopup({
+            group: 'headless',
+            target: event.currentTarget,
+            message: 'Do you want to delete this record?',
+            icon: 'pi pi-info-circle',
+            acceptClassName: 'p-button-danger',
+            defaultFocus: 'reject',
+            accept,
+            reject
+        });
+    };
+
+    return ( 
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup
+                group="headless"
+                content={({message, acceptBtnRef, rejectBtnRef, hide}) => 
+                    <div className="bg-gray-900 text-white border-round p-3">
+                        <span>{message}</span>
+                        <div className="flex align-items-center gap-2 mt-3">
+                            <Button ref={acceptBtnRef} label="Save" onClick={() => {accept(); hide();}} className="p-button-sm p-button-outlined"></Button>
+                            <Button ref={rejectBtnRef} label="Cancel" outlined onClick={() => {reject(); hide();}}className="p-button-sm p-button-text"></Button>
+                        </div>
+                    </div>
+                }
+            />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger"></Button>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Headless mode is enabled by defining a <i>content</i> prop that lets you implement entire confirmation UI instead of the default elements.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmPopup
+                group="headless"
+                content={({ message, acceptBtnRef, rejectBtnRef, hide }) => (
+                    <div className="bg-gray-900 text-white border-round p-3">
+                        <span>{message}</span>
+                        <div className="flex align-items-center gap-2 mt-3">
+                            <Button
+                                ref={acceptBtnRef}
+                                label="Save"
+                                onClick={() => {
+                                    accept();
+                                    hide();
+                                }}
+                                className="p-button-sm p-button-outlined"
+                            />
+                            <Button
+                                ref={rejectBtnRef}
+                                label="Cancel"
+                                outlined
+                                onClick={() => {
+                                    reject();
+                                    hide();
+                                }}
+                                className="p-button-sm p-button-text"
+                            />
+                        </div>
+                    </div>
+                )}
+            />
+            <div className="card flex flex-wrap gap-2 justify-content-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm" />
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/importdoc.js b/components/doc/confirmpopup/importdoc.js
new file mode 100644
index 0000000000..8192c4030e
--- /dev/null
+++ b/components/doc/confirmpopup/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ConfirmPopup } from 'primereact/confirmpopup'; // To use <ConfirmPopup> tag
+import { confirmPopup } from 'primereact/confirmpopup'; // To use confirmPopup method
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/pt/wireframe.js b/components/doc/confirmpopup/pt/wireframe.js
new file mode 100644
index 0000000000..dbd6b196a2
--- /dev/null
+++ b/components/doc/confirmpopup/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/confirmpopup.jpg" alt="confirmpopup" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/confirmpopup/styledoc.js b/components/doc/confirmpopup/styledoc.js
new file mode 100644
index 0000000000..2d3854ab24
--- /dev/null
+++ b/components/doc/confirmpopup/styledoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-confirm-popup</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-content</td>
+                            <td>Content element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-popup-icon</td>
+                            <td>Message icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-popup-message</td>
+                            <td>Message text.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-popup-footer</td>
+                            <td>Footer element for buttons.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/templatedoc.js b/components/doc/confirmpopup/templatedoc.js
new file mode 100644
index 0000000000..792ab98cb5
--- /dev/null
+++ b/components/doc/confirmpopup/templatedoc.js
@@ -0,0 +1,158 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { ConfirmPopup, confirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function TemplateDoc(props) {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const showTemplate = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            group: 'templating',
+            header: 'Confirmation',
+            message: (
+                <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500" />
+                    <span>Please confirm to proceed moving forward.</span>
+                </div>
+            ),
+            acceptIcon: 'pi pi-check',
+            rejectIcon: 'pi pi-times',
+            rejectClass: 'p-button-sm',
+            acceptClass: 'p-button-outlined p-button-sm',
+            accept,
+            reject
+        });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ConfirmPopup group="templating" />
+<div className="card flex justify-content-center">
+    <Button onClick={showTemplate} icon="pi pi-check" label="Confirm"></Button>
+</div>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { confirmPopup } from 'primereact/confirmpopup';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const showTemplate = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            group: 'templating',
+            header: 'Confirmation',
+            message: (
+                <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
+                    <span>Please confirm to proceed moving forward.</span>
+                </div>
+            ),
+            acceptIcon: 'pi pi-check',
+            rejectIcon: 'pi pi-times',
+            rejectClass: 'p-button-sm',
+            acceptClass: 'p-button-outlined p-button-sm',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup group="templating" />
+            <div className="card flex justify-content-center">
+                <Button onClick={showTemplate} icon="pi pi-check" label="Confirm"></Button>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { confirmPopup } from 'primereact/confirmpopup';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const toast = useRef<Toast>(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+
+    const showTemplate = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            group: 'templating',
+            header: 'Confirmation',
+            message: (
+                <div className="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                    <i className="pi pi-exclamation-circle text-6xl text-primary-500"></i>
+                    <span>Please confirm to proceed moving forward.</span>
+                </div>
+            ),
+            acceptIcon: 'pi pi-check',
+            rejectIcon: 'pi pi-times',
+            rejectClass: 'p-button-sm',
+            acceptClass: 'p-button-outlined p-button-sm',
+            accept,
+            reject
+        });
+    };
+
+    return ( 
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup group="templating" />
+            <div className="card flex justify-content-center">
+                <Button onClick={showTemplate} icon="pi pi-check" label="Confirm"></Button>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Templating allows customizing the message content.</p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <ConfirmPopup group="templating" />
+            <div className="card flex justify-content-center">
+                <Button onClick={showTemplate} icon="pi pi-check" label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/theming/styleddoc.js b/components/doc/confirmpopup/theming/styleddoc.js
new file mode 100644
index 0000000000..3b1058f802
--- /dev/null
+++ b/components/doc/confirmpopup/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-confirm-popup</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-content</td>
+                            <td>Content element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-popup-icon</td>
+                            <td>Message icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-popup-message</td>
+                            <td>Message text.</td>
+                        </tr>
+                        <tr>
+                            <td>p-confirm-popup-footer</td>
+                            <td>Footer element for buttons.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/confirmpopup/theming/tailwinddoc.js b/components/doc/confirmpopup/theming/tailwinddoc.js
new file mode 100644
index 0000000000..40b4defaab
--- /dev/null
+++ b/components/doc/confirmpopup/theming/tailwinddoc.js
@@ -0,0 +1,104 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+const Tailwind = {
+    confirmpopup: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-3 absolute left-0 top-0',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            )
+        },
+        content: 'p-5 items-center flex',
+        icon: 'text-2xl',
+        message: 'ml-4',
+        footer: 'text-right px-5 py-5 pt-0 ',
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useRef } from 'react';
+import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    const toast = useRef(null);
+
+    const accept = () => {
+        toast.current.show({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+    };
+
+    const reject = () => {
+        toast.current.show({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+    };
+    
+    const confirm1 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Are you sure you want to proceed?',
+            icon: 'pi pi-exclamation-triangle',
+            accept,
+            reject
+        });
+    };
+
+    const confirm2 = (event) => {
+        confirmPopup({
+            target: event.currentTarget,
+            message: 'Do you want to delete this record?',
+            icon: 'pi pi-info-circle',
+            acceptClassName: 'p-button-danger',
+            accept,
+            reject
+        });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <ConfirmPopup />
+            <div className="card flex flex-wrap gap-2 justify-center">
+                <Button onClick={confirm1} icon="pi pi-check" label="Confirm"></Button>
+                <Button onClick={confirm2} icon="pi pi-times" label="Delete" className="p-button-danger p-button-outlined"></Button>
+            </div>
+        </>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/accessibilitydoc.js b/components/doc/contextmenu/accessibilitydoc.js
new file mode 100644
index 0000000000..6102604be9
--- /dev/null
+++ b/components/doc/contextmenu/accessibilitydoc.js
@@ -0,0 +1,89 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ContextMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a{' '}
+                <i>presentation</i> role whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a ContextMenu uses the{' '}
+                <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the
+                relation between the item and the submenu.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the context menu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Opens a submenu if there is one available and moves focus to the first item.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last menuitem within the submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/contextmenu/basicdoc.js b/components/doc/contextmenu/basicdoc.js
new file mode 100644
index 0000000000..4bdad0dbd9
--- /dev/null
+++ b/components/doc/contextmenu/basicdoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const cm = useRef(null);
+    const items = [
+        { label: 'Copy', icon: 'pi pi-copy' },
+        { label: 'Rename', icon: 'pi pi-file-edit' }
+    ];
+
+    const code = {
+        basic: `
+<ContextMenu model={items} ref={cm} breakpoint="767px" />
+<img src="http://github.com/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+`,
+        javascript: `
+import React, { useRef } from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+
+export default function BasicDemo() {
+    const cm = useRef(null);
+    const items = [
+        { label: 'Copy', icon: 'pi pi-copy' },
+        { label: 'Rename', icon: 'pi pi-file-edit' }
+    ];
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <ContextMenu model={items} ref={cm} breakpoint="767px" />
+            <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const cm = useRef<ContextMenu>(null);
+    const items: MenuItem[] = [
+        { label: 'Copy', icon: 'pi pi-copy' },
+        { label: 'Rename', icon: 'pi pi-file-edit' }
+    ];
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <ContextMenu model={items} ref={cm} breakpoint="767px" />
+            <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current?.show(e)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>onContextMenu</i> event of the target to display the menu.
+                </p>
+            </DocSectionText>
+            <div className="card flex md:justify-content-center">
+                <ContextMenu model={items} ref={cm} breakpoint="767px" />
+                <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/commanddoc.js b/components/doc/contextmenu/commanddoc.js
new file mode 100644
index 0000000000..59b74b104e
--- /dev/null
+++ b/components/doc/contextmenu/commanddoc.js
@@ -0,0 +1,328 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+import { useState, useRef } from 'react';
+import { Toast } from '@/components/lib/toast/Toast';
+import { Tag } from '@/components/lib/tag/Tag';
+
+export function CommandDoc(props) {
+    const cm = useRef(null);
+    const toast = useRef();
+    const [selectedUser, setSelectedUser] = useState();
+    const [users, setUsers] = useState([
+        { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
+        { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
+        { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
+        { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
+        { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
+    ]);
+
+    const changeUserRole = (user, role) => {
+        const usersClone = [...users];
+        const userIndex = usersClone.findIndex((u) => u.id === user.id);
+
+        usersClone[userIndex].role = role;
+        setUsers(usersClone);
+    };
+
+    const items = [
+        {
+            label: 'Roles',
+            icon: 'pi pi-users',
+            items: [
+                {
+                    label: 'Admin',
+                    command: () => {
+                        changeUserRole(selectedUser, 'Admin');
+                    }
+                },
+                {
+                    label: 'Member',
+                    command: () => {
+                        changeUserRole(selectedUser, 'Member');
+                    }
+                },
+                {
+                    label: 'Guest',
+                    command: () => {
+                        changeUserRole(selectedUser, 'Guest');
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Invite',
+            icon: 'pi pi-user-plus',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
+            }
+        }
+    ];
+
+    const onRightClick = (event, user) => {
+        if (cm.current) {
+            setSelectedUser(user);
+            cm.current.show(event);
+        }
+    };
+
+    const getBadge = (user) => {
+        if (user.role === 'Member') {
+            return 'info';
+        } else if (user.role === 'Guest') {
+            return 'warning';
+        }
+
+        return null;
+    };
+
+    const code = {
+        basic: `
+<ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+    {users.map((user) => (
+        <li
+            key={user.id}
+            className={\`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between \${selectedUser?.id === user.id && 'border-primary'}\`}
+            onContextMenu={(event) => onRightClick(event, user)}
+        >
+            <div className="flex align-items-center gap-2">
+                <img alt="user.name" src={\`https://primefaces.org/cdn/primereact/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
+                <span className="font-bold">{user.name}</span>
+            </div>
+            <Tag value={user.role} severity={getBadge(user)} />
+        </li>
+    ))}
+</ul>
+<ContextMenu ref={cm} model={items} onHide={() => setSelectedUser(undefined)} />
+<Toast ref={toast} />
+`,
+        javascript: `
+import { ContextMenu } from 'primereact/contextmenu';
+import { useState, useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { Tag } from 'primereact/tag';
+
+export default function CommandDemo() {
+    const cm = useRef(null);
+    const toast = useRef();
+    const [selectedUser, setSelectedUser] = useState();
+    const [users, setUsers] = useState([
+        { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
+        { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
+        { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
+        { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
+        { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
+    ]);
+
+    const changeUserRole = (user, role) => {
+        const usersClone = [...users];
+        const userIndex = usersClone.findIndex((u) => u.id === user.id);
+
+        usersClone[userIndex].role = role;
+        setUsers(usersClone);
+    };
+
+    const items = [
+        {
+            label: 'Roles',
+            icon: 'pi pi-users',
+            items: [
+                {
+                    label: 'Admin',
+                    command: () => {
+                        changeUserRole(selectedUser, 'Admin');
+                    }
+                },
+                {
+                    label: 'Member',
+                    command: () => {
+                        changeUserRole(selectedUser, 'Member');
+                    }
+                },
+                {
+                    label: 'Guest',
+                    command: () => {
+                        changeUserRole(selectedUser, 'Guest');
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Invite',
+            icon: 'pi pi-user-plus',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
+            }
+        }
+    ];
+
+    const onRightClick = (event, user) => {
+        if (cm.current) {
+            setSelectedUser(user);
+            cm.current.show(event);
+        }
+    };
+
+    const getBadge = (user) => {
+        if (user.role === 'Member') return 'info';
+        else if (user.role === 'Guest') return 'warning';
+        else return null;
+    };
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+                {users.map((user) => (
+                    <li
+                        key={user.id}
+                        className={\`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between \${selectedUser?.id === user.id && 'border-primary'}\`}
+                        onContextMenu={(event) => onRightClick(event, user)}
+                    >
+                        <div className="flex align-items-center gap-2">
+                            <img alt="user.name" src={\`https://primefaces.org/cdn/primereact/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
+                            <span className="font-bold">{user.name}</span>
+                        </div>
+                        <Tag value={user.role} severity={getBadge(user)} />
+                    </li>
+                ))}
+            </ul>
+            <ContextMenu ref={cm} model={items} onHide={() => setSelectedUser(undefined)} />
+            <Toast ref={toast} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import { ContextMenu } from 'primereact/contextmenu';
+import { useState, useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { Tag } from 'primereact/tag';
+
+export default function CommandDemo() {
+    const cm = useRef<ContextMenuRef | null>(null);
+    const toast = useRef<ToastRef | null>(null);
+    const [selectedUser, setSelectedUser] = useState<User | undefined>();
+    const [users, setUsers] = useState<User[]>([
+        { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' },
+        { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' },
+        { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' },
+        { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' },
+        { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' }
+    ]);
+
+    const changeUserRole = (user: User, role: string) => {
+        const usersClone = [...users];
+        const userIndex = usersClone.findIndex((u) => u.id === user.id);
+
+        usersClone[userIndex].role = role;
+        setUsers(usersClone);
+    };
+
+    const items = [
+        {
+            label: 'Roles',
+            icon: 'pi pi-users',
+            items: [
+                {
+                    label: 'Admin',
+                    command: () => {
+                        if (selectedUser) {
+                            changeUserRole(selectedUser, 'Admin');
+                        }
+                    }
+                },
+                {
+                    label: 'Member',
+                    command: () => {
+                        if (selectedUser) {
+                            changeUserRole(selectedUser, 'Member');
+                        }
+                    }
+                },
+                {
+                    label: 'Guest',
+                    command: () => {
+                        if (selectedUser) {
+                            changeUserRole(selectedUser, 'Guest');
+                        }
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Invite',
+            icon: 'pi pi-user-plus',
+            command: () => {
+                toast.current?.show({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
+            }
+        }
+    ];
+
+    const onRightClick = (event: MouseEvent, user: User) => {
+        if (cm.current) {
+            setSelectedUser(user);
+            cm.current.show(event);
+        }
+    };
+
+    const getBadge = (user: User) => {
+        if (user.role === 'Member') return 'info';
+        else if (user.role === 'Guest') return 'warning';
+        else return null;
+    };
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+                {users.map((user) => (
+                    <li
+                        key={user.id}
+                        className={\`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between \${selectedUser?.id === user.id && 'border-primary'}\`}
+                        onContextMenu={(event) => onRightClick(event, user)}
+                    >
+                        <div className="flex align-items-center gap-2">
+                            <img alt={user.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${user.image}\`} style={{ width: '32px' }} />
+                            <span className="font-bold">{user.name}</span>
+                        </div>
+                        <Tag value={user.role} severity={getBadge(user)} />
+                    </li>
+                ))}
+            </ul>
+            <ContextMenu ref={cm} model={items} onHide={() => setSelectedUser(undefined)} />
+            <Toast ref={toast} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>command</i> property defines the callback to run when an item is activated by click or a key event.{' '}
+                </p>
+            </DocSectionText>
+            <div className="card flex md:justify-content-center">
+                <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+                    {users.map((user) => (
+                        <li
+                            key={user.id}
+                            className={`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 flex align-items-center justify-content-between ${selectedUser?.id === user.id && 'border-primary'}`}
+                            onContextMenu={(event) => onRightClick(event, user)}
+                        >
+                            <div className="flex align-items-center gap-2">
+                                <img alt="user.name" src={`https://primefaces.org/cdn/primereact/images/avatar/${user.image}`} style={{ width: '32px' }} />
+                                <span className="font-bold">{user.name}</span>
+                            </div>
+                            <Tag value={user.role} severity={getBadge(user)} />
+                        </li>
+                    ))}
+                </ul>
+                <ContextMenu ref={cm} model={items} onHide={() => setSelectedUser(undefined)} />
+                <Toast ref={toast} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/datatabledoc.js b/components/doc/contextmenu/datatabledoc.js
new file mode 100644
index 0000000000..ecbe267048
--- /dev/null
+++ b/components/doc/contextmenu/datatabledoc.js
@@ -0,0 +1,14 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function DataTableDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    DataTable has built-in support for ContextMenu, see the <Link href="http://github.com/datatable/#contextmenu">Context Menu</Link> demo for an example.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/documentdoc.js b/components/doc/contextmenu/documentdoc.js
new file mode 100644
index 0000000000..04264977e3
--- /dev/null
+++ b/components/doc/contextmenu/documentdoc.js
@@ -0,0 +1,135 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+
+export function DocumentDoc(props) {
+    const items = [
+        {
+            label: 'Translate',
+            icon: 'pi pi-language'
+        },
+        {
+            label: 'Speech',
+            icon: 'pi pi-volume-up',
+            items: [
+                {
+                    label: 'Start',
+                    icon: 'pi pi-caret-right'
+                },
+                {
+                    label: 'Stop',
+                    icon: 'pi pi-pause'
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Print',
+            icon: 'pi pi-print'
+        }
+    ];
+
+    const code = {
+        basic: `
+<ContextMenu global model={items} breakpoint="767px" />
+`,
+        javascript: `
+import React from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+
+export default function DocumentDemo() {
+    const items = [
+        {
+            label: 'Translate',
+            icon: 'pi pi-language'
+        },
+        {
+            label: 'Speech',
+            icon: 'pi pi-volume-up',
+            items: [
+                {
+                    label: 'Start',
+                    icon: 'pi pi-caret-right'
+                },
+                {
+                    label: 'Stop',
+                    icon: 'pi pi-pause'
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Print',
+            icon: 'pi pi-print'
+        }
+    ];
+
+    return (
+        <div className="card text-center">
+            <p className="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+            <ContextMenu global model={items} breakpoint="767px" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function DocumentDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Translate',
+            icon: 'pi pi-language'
+        },
+        {
+            label: 'Speech',
+            icon: 'pi pi-volume-up',
+            items: [
+                {
+                    label: 'Start',
+                    icon: 'pi pi-caret-right'
+                },
+                {
+                    label: 'Stop',
+                    icon: 'pi pi-pause'
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Print',
+            icon: 'pi pi-print'
+        }
+    ];
+
+    return (
+        <div className="card text-center">
+            <p className="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+            <ContextMenu global model={items} breakpoint="767px" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Setting global property attaches the context menu to the document.</p>
+            </DocSectionText>
+            <div className="card text-center">
+                <p className="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
+                <ContextMenu global model={items} breakpoint="767px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/importdoc.js b/components/doc/contextmenu/importdoc.js
new file mode 100644
index 0000000000..c35f0e5bec
--- /dev/null
+++ b/components/doc/contextmenu/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ContextMenu } from 'primereact/contextmenu';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/pt/wireframe.js b/components/doc/contextmenu/pt/wireframe.js
new file mode 100644
index 0000000000..7ed7a3783a
--- /dev/null
+++ b/components/doc/contextmenu/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="contextmenu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/contextmenu/routerdoc.js b/components/doc/contextmenu/routerdoc.js
new file mode 100644
index 0000000000..96cb87e245
--- /dev/null
+++ b/components/doc/contextmenu/routerdoc.js
@@ -0,0 +1,142 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+import { useRef } from 'react';
+import { useRouter } from 'next/router';
+
+export function RouterDoc(props) {
+    const cm = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router Link',
+            icon: 'pi pi-palette',
+            url: '/unstyled'
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            url: 'https://react.dev/'
+        }
+    ];
+
+    const onRightClick = (event) => {
+        cm.current.show(event);
+    };
+
+    const code = {
+        basic: `
+<span className="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" onContextMenu={(event) => onRightClick(event)} aria-haspopup="true">
+    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40"></img>
+</span>
+<ContextMenu model={items} ref={cm} />`,
+        javascript: `
+import { ContextMenu } from 'primereact/contextmenu';
+import { useRef } from 'react';
+import { useRouter } from 'next/router'
+
+export function RouterDemo(props) {
+    const cm = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router Link',
+            icon: 'pi pi-palette',
+            url: '/unstyled'
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            url: 'https://react.dev/'
+        }
+    ];
+
+    const onRightClick = (event) => {
+        cm.current.show(event);
+    };
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <span className="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" onContextMenu={(event) => onRightClick(event)} aria-haspopup="true">
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40"></img>
+            </span>
+            <ContextMenu model={items} ref={cm} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import { ContextMenu } from 'primereact/contextmenu';
+import { useRef, MouseEvent } from 'react';
+import { useRouter } from 'next/router'
+import { MenuItem } from 'primereact/menuitem';
+
+export function RouterDemo(props: any) {
+    const cm = useRef<ContextMenuRef | null>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Router Link',
+            icon: 'pi pi-palette',
+            url: '/unstyled'
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            url: 'https://react.dev/'
+        }
+    ];
+
+    const onRightClick = (event: MouseEvent) => {
+        cm.current?.show(event);
+    };
+
+    return (
+        <div className="card flex md:justify-content-center">
+            <span className="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" onContextMenu={(event) => onRightClick(event)} aria-haspopup="true">
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40"></img>
+            </span>
+            <ContextMenu model={items} ref={cm} />
+        </div>
+    )
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items with navigation are defined with <i>command</i> and <i>url</i> property to be able to use a router link component, an external link or programmatic navigation.
+                </p>
+            </DocSectionText>
+            <div className="card flex md:justify-content-center">
+                <span className="inline-flex align-items-center justify-content-center border-2 border-primary border-round w-4rem h-4rem" onContextMenu={(event) => onRightClick(event)} aria-haspopup="true">
+                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" />
+                </span>
+                <ContextMenu model={items} ref={cm} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/styledoc.js b/components/doc/contextmenu/styledoc.js
new file mode 100644
index 0000000000..71629df7ec
--- /dev/null
+++ b/components/doc/contextmenu/styledoc.js
@@ -0,0 +1,50 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-contextmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/templatedoc.js b/components/doc/contextmenu/templatedoc.js
new file mode 100644
index 0000000000..c5618a8605
--- /dev/null
+++ b/components/doc/contextmenu/templatedoc.js
@@ -0,0 +1,301 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+import { useState, useRef, useEffect } from 'react';
+import { ProductService } from '@/service/ProductService';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function TemplateDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedId, setSelectedId] = useState([]);
+    const cm = useRef(null);
+
+    const itemTemplate = (item) => (
+        <a className="flex align-items-center px-3 py-2 cursor-pointer">
+            <span className={item.icon} />
+            <span className="ml-2">{item.label}</span>
+            <Badge className="ml-auto" value={item.badge} />
+        </a>
+    );
+
+    const items = [
+        {
+            label: 'Favorite',
+            icon: 'pi pi-star',
+            shortcut: '⌘+D'
+        },
+        {
+            label: 'Add',
+            icon: 'pi pi-shopping-cart',
+            shortcut: '⌘+A'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp',
+                    badge: 2,
+                    template: itemTemplate
+                },
+                {
+                    label: 'Instagram',
+                    icon: 'pi pi-instagram',
+                    badge: 3,
+                    template: itemTemplate
+                }
+            ]
+        }
+    ];
+
+    const onRightClick = (event, id) => {
+        if (cm.current) {
+            setSelectedId(id);
+            cm.current.show(event);
+        }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<div className="card flex md:justify-content-center">
+    <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+        {products.map((product) => (
+            <li
+                key={product.id}
+                className={\`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 \${selectedId === product.id && 'border-primary'}\`}
+                onContextMenu={(e) => onRightClick(e, product.id)}
+            >
+                <div className="flex flex-wrap p-2 align-items-center gap-3">
+                    <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`/images/product/\${product.image}\`} alt="product.name" />
+                    <div className="flex-1 flex flex-column gap-1">
+                        <span className="font-bold">{product.name}</span>
+                        <div className="flex align-items-center gap-2">
+                            <i className="pi pi-tag text-sm"></i>
+                            <span>{product.category}</span>
+                        </div>
+                    </div>
+                    <span className="font-bold text-900 ml-5">{product.price}</span>
+                </div>
+            </li>
+        ))}
+    </ul>
+    <ContextMenu model={items} ref={cm} breakpoint="767px" onHide={() => setSelectedId(undefined)} />
+</div>
+`,
+        javascript: `
+import { useState, useRef, useEffect } from 'react';
+import { ProductService } from './service/ProductService';
+import { ContextMenu } from 'primereact/contextmenu';
+
+export default function TemplateDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedId, setSelectedId] = useState([]);
+    const cm = useRef(null);
+    const items = [
+        {
+            label: 'Favorite',
+            icon: 'pi pi-star',
+            shortcut: '⌘+D'
+        },
+        {
+            label: 'Add',
+            icon: 'pi pi-shopping-cart',
+            shortcut: '⌘+A'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp',
+                    badge: 2
+                },
+                {
+                    label: 'Instagram',
+                    icon: 'pi pi-instagram',
+                    badge: 3
+                }
+            ]
+        }
+    ];
+
+    const onRightClick = (event, id) => {
+      if (cm.current) {
+          setSelectedId(id);
+          cm.current.show(event);
+      }
+    };
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+      <div className="card flex md:justify-content-center">
+          <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+              {products.map((product) => (
+                  <li
+                      key={product.id}
+                      className={\`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 \${selectedId === product.id && 'border-primary'}\`}
+                      onContextMenu={(e) => onRightClick(e, product.id)}
+                  >
+                      <div className="flex flex-wrap p-2 align-items-center gap-3">
+                          <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`/images/product/\${product.image}\`} alt="product.name" />
+                          <div className="flex-1 flex flex-column gap-1">
+                              <span className="font-bold">{product.name}</span>
+                              <div className="flex align-items-center gap-2">
+                                  <i className="pi pi-tag text-sm"></i>
+                                  <span>{product.category}</span>
+                              </div>
+                          </div>
+                          <span className="font-bold text-900 ml-5">{product.price}</span>
+                      </div>
+                  </li>
+              ))}
+          </ul>
+          <ContextMenu model={items} ref={cm} breakpoint="767px" onHide={() => setSelectedId(undefined)} />
+      </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { ProductService } from './service/ProductService';
+import { MenuItem } from 'primereact/menuitem';
+
+interface Product {
+  id: string;
+  image: string;
+  name: string;
+  category: string;
+  price: number;
+}
+
+interface ContextMenuRef {
+  show: (e: MouseEvent) => void;
+}
+
+export default function TemplateDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedId, setSelectedId] = useState<number | null>(null);
+    const cm = useRef<ContextMenu>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Favorite',
+            icon: 'pi pi-star',
+            shortcut: '⌘+D'
+        },
+        {
+            label: 'Add',
+            icon: 'pi pi-shopping-cart',
+            shortcut: '⌘+A'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp',
+                    badge: 2
+                },
+                {
+                    label: 'Instagram',
+                    icon: 'pi pi-instagram',
+                    badge: 3
+                }
+            ]
+        }
+    ];
+
+    const onRightClick = (event: React.MouseEvent, id: string): void => {
+      if (cm.current) {
+        setSelectedId(id);
+        cm.current.show(event);
+      }
+    };
+
+    useEffect(() => {
+      ProductService.getProductsSmall().then((data: Product[]) => setProducts(data.slice(0, 5)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+      <div className="card flex md:justify-content-center">
+        <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+          {products.map((product: Product) => (
+            <li
+              key={product.id}
+              className={\`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 \${selectedId === product.id && 'border-primary'}\`}
+              onContextMenu={(e) => onRightClick(e, product.id)}
+            >
+              <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`/images/product/\${product.image}\`} alt={product.name} />
+                <div className="flex-1 flex flex-column gap-1">
+                  <span className="font-bold">{product.name}</span>
+                  <div className="flex align-items-center gap-2">
+                    <i className="pi pi-tag text-sm"></i>
+                    <span>{product.category}</span>
+                  </div>
+                </div>
+                <span className="font-bold text-900 ml-5">{product.price}</span>
+              </div>
+            </li>
+          ))}
+        </ul>
+        <ContextMenu model={items} ref={cm} breakpoint="767px" onHide={() => setSelectedId(undefined)} />
+      </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ContextMenu offers item customization with the items <i>template</i> property that receives the item instance and returns an element.
+                </p>
+            </DocSectionText>
+            <div className="card flex md:justify-content-center">
+                <ul className="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
+                    {products.map((product) => (
+                        <li
+                            key={product.id}
+                            className={`p-2 hover:surface-hover border-round border-1 border-transparent transition-all transition-duration-200 ${selectedId === product.id && 'border-primary'}`}
+                            onContextMenu={(e) => onRightClick(e, product.id)}
+                        >
+                            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`/images/product/${product.image}`} alt="product.name" />
+                                <div className="flex-1 flex flex-column gap-1">
+                                    <span className="font-bold">{product.name}</span>
+                                    <div className="flex align-items-center gap-2">
+                                        <i className="pi pi-tag text-sm" />
+                                        <span>{product.category}</span>
+                                    </div>
+                                </div>
+                                <span className="font-bold text-900 ml-5">{product.price}</span>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+                <ContextMenu model={items} ref={cm} breakpoint="767px" onHide={() => setSelectedId(undefined)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/theming/styleddoc.js b/components/doc/contextmenu/theming/styleddoc.js
new file mode 100644
index 0000000000..cc9ab69ae3
--- /dev/null
+++ b/components/doc/contextmenu/theming/styleddoc.js
@@ -0,0 +1,50 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-contextmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/contextmenu/theming/tailwinddoc.js b/components/doc/contextmenu/theming/tailwinddoc.js
new file mode 100644
index 0000000000..788ab7d602
--- /dev/null
+++ b/components/doc/contextmenu/theming/tailwinddoc.js
@@ -0,0 +1,78 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    contextmenu: {
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-none shadow-md rounded-lg w-52',
+        menu: {
+            className: classNames('m-0 p-0 list-none', 'outline-none')
+        },
+        menuitem: 'relative',
+        content: ({ context }) => ({
+            className: classNames(
+                'transition-shadow duration-200 rounded-none',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
+                {
+                    'text-gray-700': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                }
+            )
+        }),
+        action: {
+            className: classNames('cursor-pointer flex items-center no-underline overflow-hidden relative', 'text-gray-700 dark:text-white/80 py-3 px-5 select-none')
+        },
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
+        label: 'text-gray-600 dark:text-white/70',
+        transition: {
+            timeout: { enter: 250 },
+            classNames: {
+                enter: 'opacity-0',
+                enterActive: '!opacity-100 transition-opacity duration-250'
+            }
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useRef } from 'react';
+import { ContextMenu } from 'primereact/contextmenu';
+
+export default function UnstyledDemo() {
+    const cm = useRef(null);
+    const items = [
+        { label: 'View', icon: 'pi pi-fw pi-search' },
+        { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+    ];
+
+    return (
+        <div className="card flex md:justify-center">
+            <ContextMenu model={items} ref={cm} breakpoint="767px" />
+            <img src="https://primefaces.org/cdn/primereact/images/nature/nature3.jpg" alt="Logo" className="max-w-full" onContextMenu={(e) => cm.current.show(e)} />
+        </div>
+    )
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/contribution/benefitsdoc.js b/components/doc/contribution/benefitsdoc.js
new file mode 100644
index 0000000000..ef05a4b508
--- /dev/null
+++ b/components/doc/contribution/benefitsdoc.js
@@ -0,0 +1,14 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function BenefitsDoc(props) {
+    return (
+        <DocSectionText {...props}>
+            <p>
+                Contributing to PrimeReact comes with several benefits. Being part of an open-source project will enhance your career and open up exciting opportunities. Contributors and Committers will be listed on our{' '}
+                <Link href="http://github.com/team">team page</Link>. You'll gain significant visibility in the developer community while improving yourself as a professional.
+            </p>
+            <p>You'll be invited to a private communication channel at Discord to get in touch with PrimeTek. In addition, contributors have access to all PrimeReact add-ons like Premium Templates, Blocks, and UI Kit free of charge.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/contribution/cladoc.js b/components/doc/contribution/cladoc.js
new file mode 100644
index 0000000000..f30f9ea710
--- /dev/null
+++ b/components/doc/contribution/cladoc.js
@@ -0,0 +1,9 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function CLADoc(props) {
+    return (
+        <DocSectionText {...props}>
+            <p>When a community member is offered the Contributor role, they are expected to sign a Contributor License Agreement (CLA) for legal purposes. This helps protect both the contributor and PrimeTek.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/contribution/communicationdoc.js b/components/doc/contribution/communicationdoc.js
new file mode 100644
index 0000000000..e4e52dd71d
--- /dev/null
+++ b/components/doc/contribution/communicationdoc.js
@@ -0,0 +1,15 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function CommunicationDoc(props) {
+    return (
+        <DocSectionText {...props}>
+            <p>
+                Join the Contributors channel on the{' '}
+                <a href="https://discord.com/invite/gzKFYnpmCY" target="_blank" rel="noopener noreferrer">
+                    PrimeLand Discord
+                </a>{' '}
+                server to connect with PrimeReact staff and fellow contributors. In this channel, you can discuss the areas you want to contribute to and receive feedback. This channel is open to everyone who'd like to contribute.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/contribution/helpneededdoc.js b/components/doc/contribution/helpneededdoc.js
new file mode 100644
index 0000000000..cde93f9864
--- /dev/null
+++ b/components/doc/contribution/helpneededdoc.js
@@ -0,0 +1,34 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function HelpNeededDoc(props) {
+    return (
+        <DocSectionText {...props}>
+            <p>PrimeReact is a community-driven project backed by the expertise and sponsorship of PrimeTek, and we appreciate any help you can provide. Here are some areas where you can contribute:</p>
+            <h3>Issue Triage</h3>
+            <p>Help us manage issues by;</p>
+            <ul className="leading-normal px-10 m-0">
+                <li>Reproducing reported bugs</li>
+                <li>Clarifying issue descriptions</li>
+                <li>Tagging issues with appropriate labels</li>
+            </ul>
+
+            <h3>Sending Pull Requests</h3>
+            <p>
+                We encourage you to send pull requests, especially for issues tagged with the <i>help-needed</i> label.
+            </p>
+
+            <h3>Community Support</h3>
+            <p>
+                Assist other users by participating in the issue tracker,{' '}
+                <a href="https://github.com/orgs/primefaces/discussions/categories/primereact" target="_blank" rel="noopener noreferrer">
+                    GitHub Discussions
+                </a>
+                , and the{' '}
+                <a href="https://discord.com/invite/gzKFYnpmCY" target="_blank" rel="noopener noreferrer">
+                    PrimeLand Discord
+                </a>{' '}
+                server. Your expertise can help others solve problems and improve their experience with PrimeReact.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/contribution/introductiondoc.js b/components/doc/contribution/introductiondoc.js
new file mode 100644
index 0000000000..ff8b018352
--- /dev/null
+++ b/components/doc/contribution/introductiondoc.js
@@ -0,0 +1,49 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
+
+export function IntroductionDoc(props) {
+    const code = {
+        code1: {
+            basic: `
+git clone https://github.com/primefaces/primereact.git
+cd primereact
+`
+        },
+        code2: {
+            basic: `
+npm install
+npm run dev
+`
+        },
+        code3: {
+            basic: `
+- components
+    - doc // Documentations
+    - lib // Components
+- pages // Routing Pages
+- styles // Themes and Styles
+- service // Demo Services
+
+`
+        }
+    };
+
+    return (
+        <DocSectionText {...props}>
+            <p>
+                PrimeReact is a popular React library maintained by PrimeTek, a company renowned for its comprehensive set of UI components for various frameworks. PrimeTek is dedicated to providing high-quality, versatile, and accessible UI
+                components that help developers build better applications faster.
+            </p>
+            <h3>Development Setup</h3>
+            <p>To begin with, clone the PrimeReact repository from GitHub</p>
+            <DocSectionCode code={code.code1} hideToggleCode hideStackBlitz />
+            <p>
+                Then run the showcase in your local environment at <i>http://localhost:3000/</i>.
+            </p>
+            <DocSectionCode code={code.code2} hideToggleCode hideStackBlitz />
+            <h3>Project Structure</h3>
+
+            <DocSectionCode code={code.code3} hideToggleCode hideStackBlitz />
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/contribution/keypointsdoc.js b/components/doc/contribution/keypointsdoc.js
new file mode 100644
index 0000000000..eeb815f726
--- /dev/null
+++ b/components/doc/contribution/keypointsdoc.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function KeyPointsDoc(props) {
+    return (
+        <DocSectionText {...props}>
+            <p>
+                PrimeReact has several add-ons such as UI Kit, Premium Templates, and Blocks that rely on the core library. Any structural changes in the core, such as adding new props, events, or updating design tokens, should be communicated with
+                the core team to ensure consistency and compatibility.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/contribution/pathwaydoc.js b/components/doc/contribution/pathwaydoc.js
new file mode 100644
index 0000000000..fe1220a35b
--- /dev/null
+++ b/components/doc/contribution/pathwaydoc.js
@@ -0,0 +1,17 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function PathwayDoc(props) {
+    return (
+        <DocSectionText {...props}>
+            <p>PrimeTek offers an organization structure involving contributors and the core team:</p>
+            <h3>Contributor Role</h3>
+            <p>After a certain period of frequent contributions, a community member is offered the Contributor role. On average, it may take about three months, but the exact duration can vary depending on the individual commitment.</p>
+
+            <h3>Committer Role</h3>
+            <p>If a contributor actively participates in the codebase and PRs, their role may be upgraded to a Committer level, providing direct commit access to the PrimeReact codebase.</p>
+
+            <h3>Employment</h3>
+            <p>PrimeTek prefers to hire team members from open source committers, so you may be offered a full-time position when a position becomes available.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/csslayer/bootstrapdoc.js b/components/doc/csslayer/bootstrapdoc.js
new file mode 100644
index 0000000000..9f34e1a422
--- /dev/null
+++ b/components/doc/csslayer/bootstrapdoc.js
@@ -0,0 +1,21 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function BootstrapDoc(props) {
+    const code = {
+        basic: `
+@layer bootstrap-reboot, primereact;
+
+@import "http://github.com/bootstrap-reboot.css" layer(bootstrap-rebooot);
+`
+    };
+
+    return (
+        <DocSectionText {...props}>
+            <p>
+                Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.
+            </p>
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/csslayer/normalizedoc.js b/components/doc/csslayer/normalizedoc.js
new file mode 100644
index 0000000000..8c902bf678
--- /dev/null
+++ b/components/doc/csslayer/normalizedoc.js
@@ -0,0 +1,19 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function NormalizeDoc(props) {
+    const code = {
+        basic: `
+@layer normalize, primereact;
+
+@import "http://github.com/normalize.css" layer(normalize-reset);
+`
+    };
+
+    return (
+        <DocSectionText {...props}>
+            <p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primereact coming after the normalized layer.</p>
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/csslayer/resetdoc.js b/components/doc/csslayer/resetdoc.js
new file mode 100644
index 0000000000..0101ff77b2
--- /dev/null
+++ b/components/doc/csslayer/resetdoc.js
@@ -0,0 +1,30 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ResetDoc(props) {
+    const code = {
+        basic: `
+/* Order */
+@layer reset, primereact;
+
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}
+`
+    };
+
+    return (
+        <DocSectionText {...props}>
+            <p>
+                Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeReact because global styles with a broader scope e.g. <i>button {}</i> and no layer always
+                override the PrimeReact components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice
+                is wrapping your CSS in a layer like <i>reset</i> and make sure <i>primereact</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeReact components.
+            </p>
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/csslayer/specificitydoc.js b/components/doc/csslayer/specificitydoc.js
new file mode 100644
index 0000000000..82071fa5ce
--- /dev/null
+++ b/components/doc/csslayer/specificitydoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function SpecificityDoc(props) {
+    const [checked, setChecked] = useState(false);
+    const css = `
+        .my-switch-slider {
+            border-radius: 0;
+        }
+
+        .my-switch-slider:before {
+            border-radius: 0;
+        }
+    `;
+
+    const code = {
+        basic: `
+import React, { useState } from 'react';
+import { InputSwitch } from 'primereact/inputswitch';
+
+export function SpecificityDemo() {
+    const [checked, setChecked] = useState(false);
+    const css = \`
+        .my-switch-slider {
+            border-radius: 0;
+        }
+
+        .my-switch-slider:before {
+            border-radius: 0;
+        }
+    \`;
+
+    return (
+        <div className="card">
+            <InputSwitch
+                checked={checked}
+                onChange={(e) => setChecked(e.value)}
+                pt={{
+                    slider: {
+                        className: 'my-switch-slider'
+                    }
+                }}
+            />
+            <style>{css}</style>
+        </div>
+    );
+}
+`
+    };
+
+    return (
+        <DocSectionText {...props}>
+            <p className="notification">A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.</p>
+            <p>
+                The <i>@layer</i> is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at&nbsp;
+                <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer">MDN</a> to begin with. In styled mode, PrimeReact wraps the built-in style classes under the <i>primereact</i> cascade layer to make the library styles easy to
+                override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.
+            </p>
+            <p>
+                For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, <i>.p-inputswitch .p-inputswitch-slider</i> selector needs to be overriden. Without
+                the layers, we'd have to write a stronger css or use <i>!important</i> however, with layers, this does not present an issue as your CSS can always override PrimeReact with a more straightforward class name such as&nbsp;
+                <i>my-switch-slider</i>. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
+            </p>
+            <div className="card flex justify-content-center">
+                <InputSwitch
+                    checked={checked}
+                    onChange={(e) => setChecked(e.value)}
+                    pt={{
+                        slider: {
+                            className: 'my-switch-slider'
+                        }
+                    }}
+                />
+                <style>{css}</style>
+            </div>
+            <DocSectionCode code={code} hideToggleCode hideStackBlitz />
+            <p>
+                Layers also make it possible to use CSS Modules, view the <Link href="http://github.com/theming/#cssmodules">CSS Modules</Link> guide for examples.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/csslayer/tailwinddoc.js b/components/doc/csslayer/tailwinddoc.js
new file mode 100644
index 0000000000..c663e6a850
--- /dev/null
+++ b/components/doc/csslayer/tailwinddoc.js
@@ -0,0 +1,32 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+@layer tailwind-base, primereact, tailwind-utilities;
+
+@layer tailwind-base {
+    @tailwind base;
+}
+
+@layer tailwind-utilities {
+    @tailwind components;
+    @tailwind utilities;
+}
+`
+    };
+
+    return (
+        <DocSectionText {...props}>
+            <p>
+                Tailwind CSS includes a reset utility in base called&nbsp;
+                <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">
+                    preflight
+                </a>
+                . If you are using this feature, wrap the base and utilities in separate layers and make sure primereact layer comes after the base.{' '}
+            </p>
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/customicons/fontawesomedoc.js b/components/doc/customicons/fontawesomedoc.js
new file mode 100644
index 0000000000..899dedbbf0
--- /dev/null
+++ b/components/doc/customicons/fontawesomedoc.js
@@ -0,0 +1,25 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function FontAwesomeDoc(props) {
+    const code = {
+        basic: `
+// use the CSS style directly
+<Dropdown dropdownIcon="fa-light fa-chevron-down" />
+
+// use the pre-built icons
+<Dropdown dropdownIcon={(options) => <FontAwesomeIcon icon={["fal", "chevron-down"]}  {...options.iconProps} /> } />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    <a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/customicons/imagedoc.js b/components/doc/customicons/imagedoc.js
new file mode 100644
index 0000000000..c72986bea7
--- /dev/null
+++ b/components/doc/customicons/imagedoc.js
@@ -0,0 +1,19 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImageDoc(props) {
+    const code = {
+        basic: `
+<Dropdown dropdownIcon={(options) => <img alt="dropdown icon" src="http://github.com/icons/arrow_down.png" {...options.iconProps} />} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Any type of image can be used as an icon.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/customicons/materialdoc.js b/components/doc/customicons/materialdoc.js
new file mode 100644
index 0000000000..70fcccf499
--- /dev/null
+++ b/components/doc/customicons/materialdoc.js
@@ -0,0 +1,23 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function MaterialDoc(props) {
+    const code = {
+        basic: `
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+
+<Dropdown dropdownIcon={(options) => <ArrowDropDownIcon {...options.iconProps} />} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    <a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/customicons/svgdoc.js b/components/doc/customicons/svgdoc.js
new file mode 100644
index 0000000000..3dbfc0070b
--- /dev/null
+++ b/components/doc/customicons/svgdoc.js
@@ -0,0 +1,24 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SVGDoc(props) {
+    const code = {
+        basic: `
+<Dropdown dropdownIcon={(options) => 
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...options.iconProps}>
+        <g id="chevron-down">
+            <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
+        </g>
+    </svg>} />
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Inline SVGs are embedded inside the DOM.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/datascroller/accessibilitydoc.js b/components/doc/datascroller/accessibilitydoc.js
new file mode 100644
index 0000000000..656bbe63c2
--- /dev/null
+++ b/components/doc/datascroller/accessibilitydoc.js
@@ -0,0 +1,16 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                DataScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also customized
+                for accessibility using <i>listProps</i> property.
+            </p>
+
+            <h4>Keyboard Support</h4>
+            <p>Component does not include any built-in interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/datascroller/basicdoc.js b/components/doc/datascroller/basicdoc.js
new file mode 100644
index 0000000000..f3e157d605
--- /dev/null
+++ b/components/doc/datascroller/basicdoc.js
@@ -0,0 +1,246 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { DataScroller } from '@/components/lib/datascroller/DataScroller';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function BasicDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${data.image}`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false} />
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon" />
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataScroller } from 'primereact/datascroller';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">\${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataScroller } from 'primereact/datascroller';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data: Product) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">\${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />
+        </div>
+    )
+}
+        `,
+
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>DataScroller displays data with on demand loading using scroll.</p>
+            </DocSectionText>
+            <div className="card">
+                <DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datascroller/importdoc.js b/components/doc/datascroller/importdoc.js
new file mode 100644
index 0000000000..e09a3dea8c
--- /dev/null
+++ b/components/doc/datascroller/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { DataScroller } from 'primereact/datascroller';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/datascroller/inlinedoc.js b/components/doc/datascroller/inlinedoc.js
new file mode 100644
index 0000000000..00406fb6fb
--- /dev/null
+++ b/components/doc/datascroller/inlinedoc.js
@@ -0,0 +1,246 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { DataScroller } from '@/components/lib/datascroller/DataScroller';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function InlineDataScrollerDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${data.image}`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false} />
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon" />
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<DataScroller value={products} itemTemplate={itemTemplate} rows={5} inline scrollHeight="500px" header="Scroll Down to Load More" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataScroller } from 'primereact/datascroller';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function InlineDataScrollerDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">\${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataScroller value={products} itemTemplate={itemTemplate} rows={5} inline scrollHeight="500px" header="Scroll Down to Load More" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataScroller } from 'primereact/datascroller';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function InlineDataScrollerDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data: Product) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">\${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataScroller value={products} itemTemplate={itemTemplate} rows={5} inline scrollHeight="500px" header="Scroll Down to Load More" />
+        </div>
+    )
+}
+        `,
+
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>DataScroller can listen scroll event of itself rather than document in inline mode.</p>
+            </DocSectionText>
+            <div className="card">
+                <DataScroller value={products} itemTemplate={itemTemplate} rows={5} inline scrollHeight="500px" header="Scroll Down to Load More" />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datascroller/loaderdoc.js b/components/doc/datascroller/loaderdoc.js
new file mode 100644
index 0000000000..bc4bbfb199
--- /dev/null
+++ b/components/doc/datascroller/loaderdoc.js
@@ -0,0 +1,254 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { DataScroller } from '@/components/lib/datascroller/DataScroller';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useRef, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function LoaderDataScrollerDoc(props) {
+    const [products, setProducts] = useState([]);
+    const ds = useRef(null);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${data.image}`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false} />
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon" />
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'} />
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const footer = <Button type="text" icon="pi pi-plus" label="Load" onClick={() => ds.current.load()} />;
+
+    const code = {
+        basic: `
+<DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />
+        `,
+        javascript: `
+import React, { useEffect, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { DataScroller } from 'primereact/datascroller';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function LoaderDataScrollerDemo() {
+    const [products, setProducts] = useState([]);
+    const ds = useRef(null);
+    
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">\${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const footer = <Button type="text" icon="pi pi-plus" label="Load" onClick={() => ds.current.load()} />;
+
+    return (
+        <div className="card">
+            <DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { DataScroller } from 'primereact/datascroller';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function LoaderDataScrollerDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const ds = useRef<null>(null);
+    
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data: Product) => {
+        return (
+            <div className="col-12">
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
+                    <div className="flex flex-column lg:flex-row justify-content-between align-items-center xl:align-items-start lg:flex-1 gap-4">
+                        <div className="flex flex-column align-items-center lg:align-items-start gap-3">
+                            <div className="flex flex-column gap-1">
+                                <div className="text-2xl font-bold text-900">{data.name}</div>
+                                <div className="text-700">{data.description}</div>
+                            </div>
+                            <div className="flex flex-column gap-2">
+                                <Rating value={data.rating} readOnly cancel={false}></Rating>
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag product-category-icon"></i>
+                                    <span className="font-semibold">{data.category}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div className="flex flex-row lg:flex-column align-items-center lg:align-items-end gap-4 lg:gap-2">
+                            <span className="text-2xl font-semibold">\${data.price}</span>
+                            <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                            <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const footer = <Button type="text" icon="pi pi-plus" label="Load" onClick={() => ds.current.load()} />;
+
+    return (
+        <div className="card">
+            <DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Instead of scrolling, a custom element can be used to load data.</p>
+            </DocSectionText>
+            <div className="card">
+                <DataScroller ref={ds} value={products} itemTemplate={itemTemplate} rows={5} loader footer={footer} header="Click Load Button at Footer to Load More" />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datascroller/pt/wireframe.js b/components/doc/datascroller/pt/wireframe.js
new file mode 100644
index 0000000000..3a9e89b58f
--- /dev/null
+++ b/components/doc/datascroller/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/datascroller.jpg" alt="datascroller" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/datascroller/styledoc.js b/components/doc/datascroller/styledoc.js
new file mode 100644
index 0000000000..23eb285e20
--- /dev/null
+++ b/components/doc/datascroller/styledoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-datascroller</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-content</td>
+                            <td>Wrapper of item container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-list</td>
+                            <td>Item container element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/datascroller/theming/styleddoc.js b/components/doc/datascroller/theming/styleddoc.js
new file mode 100644
index 0000000000..1731dd4532
--- /dev/null
+++ b/components/doc/datascroller/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-datascroller</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-content</td>
+                            <td>Wrapper of item container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datascroller-list</td>
+                            <td>Item container element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/datascroller/theming/tailwinddoc.js b/components/doc/datascroller/theming/tailwinddoc.js
new file mode 100644
index 0000000000..f6e9994395
--- /dev/null
+++ b/components/doc/datascroller/theming/tailwinddoc.js
@@ -0,0 +1,105 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    datascroller: {
+        content: {
+            className: classNames(
+                'bg-white blue-gray-700 border-0 p-0',
+                'dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            )
+        },
+        grid: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900',
+        header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataScroller } from 'primereact/datascroller';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function UnstyledDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (data) => {
+        return (
+            <div className="flex flex-col xl:flex-row xl:items-start p-4 gap-4">
+                <img className="w-3/4 sm:w-64 xl:w-40 shadow-2 block xl:block mx-auto rounded" src={\`https://primefaces.org/cdn/primereact/images/product/\${data.image}\`} alt={data.name} />
+                <div className="flex flex-col lg:flex-row justify-between items-center xl:items-start lg:flex-1 gap-4">
+                    <div className="flex flex-col items-center lg:items-start gap-3">
+                        <div className="flex flex-col  gap-1">
+                            <div className="text-2xl font-bold text-900 dark:text-white/80">{data.name}</div>
+                            <div className="text-700 dark:text-white/80">{data.description}</div>
+                        </div>
+                        <div className="flex flex-col  gap-2">
+                            <Rating value={data.rating} readOnly cancel={false}></Rating>
+                            <span className="flex items-center gap-2">
+                                <i className="pi pi-tag product-category-icon dark:text-white/80"></i>
+                                <span className="font-semibold dark:text-white/80">{data.category}</span>
+                            </span>
+                        </div>
+                    </div>
+                    <div className="flex flex-row lg:flex-col items-center lg:items-end gap-4 lg:gap-2">
+                        <span className="text-2xl font-semibold dark:text-white/80">\${data.price}</span>
+                        <Button icon="pi pi-shopping-cart" label="Add to Cart" disabled={data.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        <Tag value={data.inventoryStatus} severity={getSeverity(data)}></Tag>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataScroller value={products} itemTemplate={itemTemplate} rows={5} buffer={0.4} header="List of Products" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['ProductService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/datatable/accessibilitydoc.js b/components/doc/datatable/accessibilitydoc.js
new file mode 100644
index 0000000000..92b433aa0f
--- /dev/null
+++ b/components/doc/datatable/accessibilitydoc.js
@@ -0,0 +1,200 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                DataTable uses a <i>table</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table
+                for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers
+                utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
+            </p>
+
+            <p>
+                Built-in checkbox and radiobutton components for row selection use <i>checkbox</i> and <i>radiobutton</i> roles respectively with <i>aria-checked</i> state attribute. The label to describe them is retrieved from the
+                <i>aria.selectRow</i> and <i>aria.unselectRow</i> properties of the <Link href="http://github.com/locale">locale</Link> API. Similarly header checkbox uses <i>selectAll</i> and <i>unselectAll</i> keys. When a row is selected, <i>aria-selected</i> is
+                set to true on a row.
+            </p>
+
+            <p>
+                The element to expand or collapse a row is a <i>button</i> with <i>aria-expanded</i> and <i>aria-controls</i> properties. Value to describe the buttons is derived from <i>aria.expandRow</i> and <i>aria.collapseRow</i> properties of
+                the <Link href="http://github.com/locale">locale</Link> API.
+            </p>
+
+            <p>
+                The filter menu button use <i>aria.showFilterMenu</i> and <i>aria.hideFilterMenu</i> properties as <i>aria-label</i> in addition to the <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between
+                the button and the overlay. Popop menu has <i>dialog</i> role with <i>aria-modal</i>
+                as focus is kept within the overlay. The operator dropdown use <i>aria.filterOperator</i> and filter constraints dropdown use <i>aria.filterConstraint</i> properties. Buttons to add rules on the other hand utilize <i>aria.addRule</i>{' '}
+                and <i>aria.removeRule</i> properties. The footer buttons similarly use
+                <i>aria.clear</i> and <i>aria.apply</i> properties. <i>filterInputProps</i> of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may
+                define your own aria labels as well.
+            </p>
+
+            <p>
+                Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with <i>aria.editRow</i>, <i>aria.cancelEdit</i> and <i>aria.saveEdit</i> used for
+                the <i>aria-label</i>.
+            </p>
+
+            <p>
+                Paginator is a standalone component used inside the DataTable, refer to the <Link href="http://github.com/paginator">paginator</Link> for more information about the accessibility features.
+            </p>
+
+            <h4>Sortable Headers Keyboard Support</h4>
+            <p>
+                Any button element inside the DataTable used for cases like filter, row expansion, edit are tabbable and can be used with <i>space</i> and <i>enter</i> keys.
+            </p>
+
+            <h3>Sortable Headers Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves through the headers.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Sorts the column.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Sorts the column.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Filter Menu Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves through the elements inside the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Hides the popup.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Selection Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the first selected row, if there is none then first row receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the selected state of the focused row depending on the metaKeySelection setting.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next row and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous row and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>space</i>
+                            </td>
+                            <td>Selects the rows between the most recently selected row and the focused row.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>home</i>
+                            </td>
+                            <td>Selects the focused rows and all the options up to the first one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>end</i>
+                            </td>
+                            <td>Selects the focused rows and all the options down to the last one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>a</i>
+                            </td>
+                            <td>Selects all rows.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/datatable/basicdoc.js b/components/doc/datatable/basicdoc.js
new file mode 100644
index 0000000000..062c67f00d
--- /dev/null
+++ b/components/doc/datatable/basicdoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function BasicDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    DataTable requires a <i>value</i> as data to display and <i>Column</i> components as children for the representation.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/cellselection/disableddoc.js b/components/doc/datatable/cellselection/disableddoc.js
new file mode 100644
index 0000000000..2a5aed9b21
--- /dev/null
+++ b/components/doc/datatable/cellselection/disableddoc.js
@@ -0,0 +1,182 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function DisabledCellSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    const isCellSelectable = (event) => (event.data.field === 'category' && event.data.value === 'Fitness' ? false : true);
+
+    const cellClassName = (data) => (data === 'Fitness' ? 'p-disabled' : '');
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+
+<DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
+        onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={metaKey}
+        isDataSelectable={isCellSelectable} cellClassName={cellClassName} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+export default function DisabledCellSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    const isCellSelectable = (event) => (event.data.field === 'category' && event.data.value === 'Fitness' ? false : true);
+
+    const cellClassName = (data) => (data === 'Fitness' ? 'p-disabled' : '');
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
+                    onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={metaKey}
+                    isDataSelectable={isCellSelectable} cellClassName={cellClassName} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent, DataTableCellSelection,
+        DataTableDataSelectableEvent, DataTableCellClassNameOptions } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function DisabledCellSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedCell, setSelectedCell] = useState<DataTableCellSelection<Product[]> | null>(null);
+    const [metaKey, setMetaKey] = useState<boolean>(true);
+
+    const isCellSelectable = (event: DataTableDataSelectableEvent) => (event.data.field === 'category' && event.data.value === 'Fitness' ? false : true);
+
+    const cellClassName = (data: any) => (data === 'Fitness' ? 'p-disabled' : '');
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value!)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell!} metaKeySelection={metaKey}
+                    onSelectionChange={(e) => {
+                        const value = e.value as DataTableCellSelection<Product[]>;
+                        setSelectedCell(value);
+                    }} 
+                    isDataSelectable={isCellSelectable} cellClassName={cellClassName} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Certain cells can be excluded from selection if <i>isDataSelectable</i> returns false.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                        <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                        <label htmlFor="input-metakey">MetaKey</label>
+                    </div>
+                    <DataTable
+                        value={products}
+                        selectionMode="single"
+                        cellSelection
+                        selection={selectedCell}
+                        onSelectionChange={(e) => {
+                            setSelectedCell(e.value);
+                        }}
+                        metaKeySelection={metaKey}
+                        isDataSelectable={isCellSelectable}
+                        cellClassName={cellClassName}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/cellselection/eventsdoc.js b/components/doc/datatable/cellselection/eventsdoc.js
new file mode 100644
index 0000000000..f31bfd3cba
--- /dev/null
+++ b/components/doc/datatable/cellselection/eventsdoc.js
@@ -0,0 +1,184 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useEffect, useRef, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function CellSelectEventsDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedCell, setSelectedCell] = useState(null);
+    const toast = useRef(null);
+
+    const onCellSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Cell Selected', detail: `Name: ${event.value}`, life: 3000 });
+    };
+
+    const onCellUnselect = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Cell Unselected', detail: `Name: ${event.value}`, life: 3000 });
+    };
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+
+<DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
+        onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={false}
+        onCellSelect={onCellSelect} onCellUnselect={onCellUnselect} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast'
+import { ProductService } from './service/ProductService';
+
+export default function CellSelectEventsDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedCell, setSelectedCell] = useState(null);
+    const toast = useRef(null);
+
+    const onCellSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Cell Selected', detail: \`Name: \${event.value}\`, life: 3000 });
+    };
+
+    const onCellUnselect = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Cell Unselected', detail: \`Name: \${event.value}\`, life: 3000 });
+    };
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
+                    onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={false}
+                    onCellSelect={onCellSelect} onCellUnselect={onCellUnselect} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent, DataTableCellSelection, DataTableSelectEvent, DataTableUnselectEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast'
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function CellSelectEventsDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedCell, setSelectedCell] = useState<DataTableCellSelection<Product[]> | null>(null);
+    const toast = useRef<Toast>(null);
+
+    const onCellSelect = (event: DataTableCellClickEvent<Product[]>) => {
+        toast.current?.show({ severity: 'info', summary: 'Cell Selected', detail: \`Name: \${event.value}\`, life: 3000 });
+    };
+
+    const onCellUnselect = (event: DataTableCellClickEvent<Product[]>) => {
+        toast.current?.show({ severity: 'warn', summary: 'Cell Unselected', detail: \`Name: \${event.value}\`, life: 3000 });
+    };
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell!} metaKeySelection={false}
+                    onSelectionChange={(e) => {
+                        const value = e.value as DataTableCellSelection<Product[]>;
+                        setSelectedCell(value);
+                    }}
+                    onCellSelect={onCellSelect} onCellUnselect={onCellUnselect} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    DataTable provides <i>onCellSelect</i> and <i>onCellUnselect</i> events to listen selection events.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={products}
+                        selectionMode="single"
+                        cellSelection
+                        selection={selectedCell}
+                        onSelectionChange={(e) => {
+                            setSelectedCell(e.value);
+                        }}
+                        metaKeySelection={false}
+                        onCellSelect={onCellSelect}
+                        onCellUnselect={onCellUnselect}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/cellselection/multipledoc.js b/components/doc/datatable/cellselection/multipledoc.js
new file mode 100644
index 0000000000..7d852948d0
--- /dev/null
+++ b/components/doc/datatable/cellselection/multipledoc.js
@@ -0,0 +1,169 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function MultipleCellsSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedCells, setSelectedCells] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+
+<DataTable value={products} cellSelection selectionMode="multiple" selection={selectedCells}
+        onSelectionChange={(e) => setSelectedCells(e.value)}
+        metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+export default function MultipleCellsSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedCells, setSelectedCells] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} cellSelection selectionMode="multiple" selection={selectedCells}
+                    onSelectionChange={(e) => setSelectedCells(e.value)}
+                    metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent, DataTableCellSelection } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function MultipleCellsSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedCells, setSelectedCells] = useState<DataTableCellSelection<Product[]> | null>(null);
+    const [metaKey, setMetaKey] = useState<boolean>(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value!)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} cellSelection selectionMode="multiple" selection={selectedCells!}
+                    onSelectionChange={(e) => setSelectedCells(e.value)}
+                    metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    More than one cell is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is necessary to add to existing selections however this can be configured
+                    with disabling the <i>metaKeySelection</i> property. Note that in touch enabled devices, DataTable always ignores metaKey.
+                </p>
+                <p>
+                    Additionaly, multiple cells can be selected using drag when <i>dragSelection</i> is present.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                        <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                        <label htmlFor="input-metakey">MetaKey</label>
+                    </div>
+                    <DataTable
+                        value={products}
+                        selectionMode="multiple"
+                        cellSelection
+                        selection={selectedCells}
+                        onSelectionChange={(e) => {
+                            setSelectedCells(e.value);
+                        }}
+                        metaKeySelection={metaKey}
+                        dragSelection
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/cellselection/singledoc.js b/components/doc/datatable/cellselection/singledoc.js
new file mode 100644
index 0000000000..b7343a2827
--- /dev/null
+++ b/components/doc/datatable/cellselection/singledoc.js
@@ -0,0 +1,167 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function SingleCellSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+
+<DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
+        onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+export default function SingleCellSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedCell, setSelectedCell] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
+                    onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent, DataTableCellSelection } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function SingleCellSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedCell, setSelectedCell] = useState<DataTableCellSelection<Product[]> | null>(null);
+    const [metaKey, setMetaKey] = useState<boolean>(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value!)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell!}
+                    onSelectionChange={(e) =>  setSelectedCell(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Single cell selection is enabled by adding <i>cellSelection</i>, defining <i>selectionMode</i> as <i>single</i> along with a value binding using <i>selection</i> and <i>onSelectionChange</i> properties. The type of the selection
+                    would be
+                    <i>DataTableCellSelection</i> that provides information about the cell such as <i>cellIndex</i> and <i>rowIndex</i>.
+                </p>
+                <p>
+                    By default, metaKey press (e.g. <i>⌘</i>) is necessary to unselect a cell however this can be configured with disabling the <i>metaKeySelection</i> property. In touch enabled devices this option has no effect and behavior is same
+                    as setting it to false.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                        <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                        <label htmlFor="input-metakey">MetaKey</label>
+                    </div>
+                    <DataTable
+                        value={products}
+                        selectionMode="single"
+                        cellSelection
+                        selection={selectedCell}
+                        onSelectionChange={(e) => {
+                            setSelectedCell(e.value);
+                        }}
+                        metaKeySelection={metaKey}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/colresize/expandmodedoc.js b/components/doc/datatable/colresize/expandmodedoc.js
new file mode 100644
index 0000000000..4ea2e39a88
--- /dev/null
+++ b/components/doc/datatable/colresize/expandmodedoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function ExpandModeDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} columnResizeMode="expand" resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function ExpandModeDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} columnResizeMode="expand" resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function ExpandModeDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} columnResizeMode="expand" resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} columnResizeMode="expand" resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/colresize/fitmodedoc.js b/components/doc/datatable/colresize/fitmodedoc.js
new file mode 100644
index 0000000000..cf5f765061
--- /dev/null
+++ b/components/doc/datatable/colresize/fitmodedoc.js
@@ -0,0 +1,126 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function FitModeDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function FitModeDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function FitModeDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Columns can be resized with drag and drop when <i>resizableColumns</i> is enabled. Default resize mode is <i>fit</i>
+                    that does not change the overall table width.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/columngroupdoc.js b/components/doc/datatable/columngroupdoc.js
new file mode 100644
index 0000000000..40431e28de
--- /dev/null
+++ b/components/doc/datatable/columngroupdoc.js
@@ -0,0 +1,345 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { ColumnGroup } from '@/components/lib/columngroup/ColumnGroup';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { Row } from '@/components/lib/row/Row';
+import { useState } from 'react';
+
+export function ColumnGroupDoc(props) {
+    const [sales, setSales] = useState([]);
+
+    const loadDemoData = () => {
+        setSales([
+            { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
+            { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
+            { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 },
+            { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 },
+            { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 },
+            { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 },
+            { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 },
+            { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 },
+            { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 },
+            { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 }
+        ]);
+    };
+
+    const lastYearSaleBodyTemplate = (rowData) => {
+        return `${rowData.lastYearSale}%`;
+    };
+
+    const thisYearSaleBodyTemplate = (rowData) => {
+        return `${rowData.thisYearSale}%`;
+    };
+
+    const lastYearProfitBodyTemplate = (rowData) => {
+        return `${formatCurrency(rowData.lastYearProfit)}`;
+    };
+
+    const thisYearProfitBodyTemplate = (rowData) => {
+        return `${formatCurrency(rowData.thisYearProfit)}`;
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const lastYearTotal = () => {
+        let total = 0;
+
+        for (let sale of sales) {
+            total = total + sale.lastYearProfit;
+        }
+
+        return formatCurrency(total);
+    };
+
+    const thisYearTotal = () => {
+        let total = 0;
+
+        for (let sale of sales) {
+            total = total + sale.thisYearProfit;
+        }
+
+        return formatCurrency(total);
+    };
+
+    const headerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column header="Product" rowSpan={3} />
+                <Column header="Sale Rate" colSpan={4} />
+            </Row>
+            <Row>
+                <Column header="Sales" colSpan={2} />
+                <Column header="Profits" colSpan={2} />
+            </Row>
+            <Row>
+                <Column header="Last Year" sortable field="lastYearSale" />
+                <Column header="This Year" sortable field="thisYearSale" />
+                <Column header="Last Year" sortable field="lastYearProfit" />
+                <Column header="This Year" sortable field="thisYearProfit" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const footerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column footer="Totals:" colSpan={3} footerStyle={{ textAlign: 'right' }} />
+                <Column footer={lastYearTotal} />
+                <Column footer={thisYearTotal} />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const code = {
+        basic: `
+<DataTable value={sales} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="product" />
+    <Column field="lastYearSale" body={lastYearSaleBodyTemplate} />
+    <Column field="thisYearSale" body={thisYearSaleBodyTemplate} />
+    <Column field="lastYearProfit" body={lastYearProfitBodyTemplate} />
+    <Column field="thisYearProfit" body={thisYearProfitBodyTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ColumnGroup } from 'primereact/columngroup';
+import { Row } from 'primereact/row';
+
+export default function ColumnGroupDemo() {
+    const [sales] = useState([
+        { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
+        { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
+        { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 },
+        { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 },
+        { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 },
+        { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 },
+        { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 },
+        { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 },
+        { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 },
+        { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 }
+    ]);
+
+    const lastYearSaleBodyTemplate = (rowData) => {
+        return \`\${rowData.lastYearSale}%\`;
+    };
+
+    const thisYearSaleBodyTemplate = (rowData) => {
+        return \`\${rowData.thisYearSale}%\`;
+    };
+
+    const lastYearProfitBodyTemplate = (rowData) => {
+        return \`\${formatCurrency(rowData.lastYearProfit)}\`;
+    };
+
+    const thisYearProfitBodyTemplate = (rowData) => {
+        return \`\${formatCurrency(rowData.thisYearProfit)}\`;
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const lastYearTotal = () => {
+        let total = 0;
+
+        for (let sale of sales) {
+            total += sale.lastYearProfit;
+        }
+
+        return formatCurrency(total);
+    };
+
+    const thisYearTotal = () => {
+        let total = 0;
+
+        for (let sale of sales) {
+            total += sale.thisYearProfit;
+        }
+
+        return formatCurrency(total);
+    };
+
+    const headerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column header="Product" rowSpan={3} />
+                <Column header="Sale Rate" colSpan={4} />
+            </Row>
+            <Row>
+                <Column header="Sales" colSpan={2} />
+                <Column header="Profits" colSpan={2} />
+            </Row>
+            <Row>
+                <Column header="Last Year" sortable field="lastYearSale" />
+                <Column header="This Year" sortable field="thisYearSale" />
+                <Column header="Last Year" sortable field="lastYearProfit" />
+                <Column header="This Year" sortable field="thisYearProfit" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const footerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column footer="Totals:" colSpan={3} footerStyle={{ textAlign: 'right' }} />
+                <Column footer={lastYearTotal} />
+                <Column footer={thisYearTotal} />
+            </Row>
+        </ColumnGroup>
+    );
+
+    return (
+        <div className="card">
+            <DataTable value={sales} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="product" />
+                <Column field="lastYearSale" body={lastYearSaleBodyTemplate} />
+                <Column field="thisYearSale" body={thisYearSaleBodyTemplate} />
+                <Column field="lastYearProfit" body={lastYearProfitBodyTemplate} />
+                <Column field="thisYearProfit" body={thisYearProfitBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ColumnGroup } from 'primereact/columngroup';
+import { Row } from 'primereact/row';
+
+interface Sale {
+    product: string;
+    lastYearSale: number;
+    thisYearSale: number;
+    lastYearProfit: number;
+    thisYearProfit: number;
+}
+
+export default function ColumnGroupDemo() {
+    const [sales] = useState<Sale[]>([
+        { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
+        { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
+        { product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500 },
+        { product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323 },
+        { product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332 },
+        { product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale: 65, lastYearProfit: 421132, thisYearProfit: 150005 },
+        { product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214 },
+        { product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322 },
+        { product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232 },
+        { product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533 }
+    ]);
+
+    const lastYearSaleBodyTemplate = (rowData: Sale) => {
+        return \`\${rowData.lastYearSale}%\`;
+    };
+
+    const thisYearSaleBodyTemplate = (rowData: Sale) => {
+        return \`\${rowData.thisYearSale}%\`;
+    };
+
+    const lastYearProfitBodyTemplate = (rowData: Sale) => {
+        return \`\${formatCurrency(rowData.lastYearProfit)}\`;
+    };
+
+    const thisYearProfitBodyTemplate = (rowData: Sale) => {
+        return \`\${formatCurrency(rowData.thisYearProfit)}\`;
+    };
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const lastYearTotal = () => {
+        let total = 0;
+
+        for (let sale of sales) {
+            total += sale.lastYearProfit;
+        }
+
+        return formatCurrency(total);
+    };
+
+    const thisYearTotal = () => {
+        let total = 0;
+
+        for (let sale of sales) {
+            total += sale.thisYearProfit;
+        }
+
+        return formatCurrency(total);
+    };
+
+    const headerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column header="Product" rowSpan={3} />
+                <Column header="Sale Rate" colSpan={4} />
+            </Row>
+            <Row>
+                <Column header="Sales" colSpan={2} />
+                <Column header="Profits" colSpan={2} />
+            </Row>
+            <Row>
+                <Column header="Last Year" sortable field="lastYearSale" />
+                <Column header="This Year" sortable field="thisYearSale" />
+                <Column header="Last Year" sortable field="lastYearProfit" />
+                <Column header="This Year" sortable field="thisYearProfit" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const footerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column footer="Totals:" colSpan={3} footerStyle={{ textAlign: 'right' }} />
+                <Column footer={lastYearTotal} />
+                <Column footer={thisYearTotal} />
+            </Row>
+        </ColumnGroup>
+    );
+
+    return (
+        <div className="card">
+            <DataTable value={sales} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="product" />
+                <Column field="lastYearSale" body={lastYearSaleBodyTemplate} />
+                <Column field="thisYearSale" body={thisYearSaleBodyTemplate} />
+                <Column field="lastYearProfit" body={lastYearProfitBodyTemplate} />
+                <Column field="thisYearProfit" body={thisYearProfitBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Columns can be grouped within a <i>Row</i> component and groups can be displayed at header and footer using <i>headerColumnGroup</i>, <i>footerColumnGroup</i> properties. Number of cells and rows to span are defined with the{' '}
+                    <i>colSpan</i> and <i>rowSpan</i> properties of a Column.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={sales} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="product" />
+                        <Column field="lastYearSale" body={lastYearSaleBodyTemplate} />
+                        <Column field="thisYearSale" body={thisYearSaleBodyTemplate} />
+                        <Column field="lastYearProfit" body={lastYearProfitBodyTemplate} />
+                        <Column field="thisYearProfit" body={thisYearProfitBodyTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/columntoggledoc.js b/components/doc/datatable/columntoggledoc.js
new file mode 100644
index 0000000000..10b228e4f7
--- /dev/null
+++ b/components/doc/datatable/columntoggledoc.js
@@ -0,0 +1,176 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function ColumnToggleDoc(props) {
+    const columns = [
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+    const [products, setProducts] = useState([]);
+    const [visibleColumns, setVisibleColumns] = useState(columns);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const onColumnToggle = (event) => {
+        let selectedColumns = event.value;
+        let orderedSelectedColumns = columns.filter((col) => selectedColumns.some((sCol) => sCol.field === col.field));
+
+        setVisibleColumns(orderedSelectedColumns);
+    };
+
+    const header = <MultiSelect value={visibleColumns} options={columns} optionLabel="header" onChange={onColumnToggle} className="w-full sm:w-20rem" display="chip" />;
+
+    const code = {
+        basic: `
+<DataTable value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code" />
+    {visibleColumns.map((col) => (
+        <Column key={col.field} field={col.field} header={col.header} />
+    ))}
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { MultiSelect } from 'primereact/multiselect';
+import { ProductService } from './service/ProductService';
+
+export default function ColumnToggleDemo() {
+    const columns = [
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+    const [products, setProducts] = useState([]);
+    const [visibleColumns, setVisibleColumns] = useState(columns);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const onColumnToggle = (event) => {
+        let selectedColumns = event.value;
+        let orderedSelectedColumns = columns.filter((col) => selectedColumns.some((sCol) => sCol.field === col.field));
+
+        setVisibleColumns(orderedSelectedColumns);
+    };
+
+    const header = <MultiSelect value={visibleColumns} options={columns} optionLabel="header" onChange={onColumnToggle} className="w-full sm:w-20rem" display="chip" />;
+
+    return (
+        <div className="card">
+            <DataTable value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" />
+                {visibleColumns.map((col) => (
+                    <Column key={col.field} field={col.field} header={col.header} />
+                ))}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+export default function ColumnToggleDemo() {
+    const columns: ColumnMeta[] = [
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+    const [products, setProducts] = useState<Product[]>([]);
+    const [visibleColumns, setVisibleColumns] = useState<ColumnMeta[]>(columns);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const onColumnToggle = (event: MultiSelectChangeEvent) => {
+        let selectedColumns = event.value;
+        let orderedSelectedColumns = columns.filter((col) => selectedColumns.some((sCol) => sCol.field === col.field));
+
+        setVisibleColumns(orderedSelectedColumns);
+    };
+
+    const header = <MultiSelect value={visibleColumns} options={columns} optionLabel="header" onChange={onColumnToggle} className="w-full sm:w-20rem" display="chip" />;
+
+    return (
+        <div className="card">
+            <DataTable value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" />
+                {visibleColumns.map((col) => (
+                    <Column key={col.field} field={col.field} header={col.header} />
+                ))}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        {visibleColumns.map((col) => (
+                            <Column key={col.field} field={col.field} header={col.header} />
+                        ))}
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/conditionalstyledoc.js b/components/doc/datatable/conditionalstyledoc.js
new file mode 100644
index 0000000000..a6330bd88c
--- /dev/null
+++ b/components/doc/datatable/conditionalstyledoc.js
@@ -0,0 +1,172 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function ConditionalStyleDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    };
+
+    const rowClass = (data) => {
+        return {
+            'bg-primary': data.category === 'Fitness'
+        };
+    };
+
+    const stockBodyTemplate = (rowData) => {
+        const stockClassName = classNames('border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm', {
+            'bg-red-100 text-red-900': rowData.quantity === 0,
+            'bg-blue-100 text-blue-900': rowData.quantity > 0 && rowData.quantity < 10,
+            'bg-teal-100 text-teal-900': rowData.quantity > 10
+        });
+
+        return <div className={stockClassName}>{rowData.quantity}</div>;
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} rowClassName={rowClass} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity" body={stockBodyTemplate}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function ConditionalStyleDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const rowClass = (data) => {
+        return {
+            'bg-primary': data.category === 'Fitness'
+        };
+    };
+
+    const stockBodyTemplate = (rowData) => {
+        const stockClassName = classNames('border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm', {
+            'bg-red-100 text-red-900': rowData.quantity === 0,
+            'bg-blue-100 text-blue-900': rowData.quantity > 0 && rowData.quantity < 10,
+            'bg-teal-100 text-teal-900': rowData.quantity > 10
+        });
+
+        return <div className={stockClassName}>{rowData.quantity}</div>;
+    };
+
+    return (
+        <DataTable value={products} rowClassName={rowClass} tableStyle={{ minWidth: '50rem' }}>
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity" body={stockBodyTemplate}></Column>
+        </DataTable>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function ConditionalStyleDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const rowClass = (data: Product) => {
+        return {
+            'bg-primary': data.category === 'Fitness'
+        };
+    };
+
+    const stockBodyTemplate = (rowData: Product) => {
+        const stockClassName = classNames('border-circle w-2rem h-2rem inline-flex font-bold justify-content-center align-items-center text-sm', {
+            'bg-red-100 text-red-900': rowData.quantity === 0,
+            'bg-blue-100 text-blue-900': rowData.quantity > 0 && rowData.quantity < 10,
+            'bg-teal-100 text-teal-900': rowData.quantity > 10
+        });
+
+        return <div className={stockClassName}>{rowData.quantity}</div>;
+    };
+
+    return (
+        <DataTable value={products} rowClassName={rowClass} tableStyle={{ minWidth: '50rem' }}>
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity" body={stockBodyTemplate}></Column>
+        </DataTable>
+    );
+}
+        `,
+        data: `
+      {
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Particular rows and cells can be styled based on conditions. The <i>rowClassName</i> receives a row data as a parameter to return a style class for a row whereas cells are customized using the <i>body</i> template.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} rowClassName={rowClass} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" body={stockBodyTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/contextmenudoc.js b/components/doc/datatable/contextmenudoc.js
new file mode 100644
index 0000000000..b513d6beba
--- /dev/null
+++ b/components/doc/datatable/contextmenudoc.js
@@ -0,0 +1,229 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useEffect, useRef, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function ContextMenuDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const toast = useRef(null);
+    const cm = useRef(null);
+    const menuModel = [
+        { label: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct) },
+        { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteProduct(selectedProduct) }
+    ];
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const viewProduct = (product) => {
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail: product.name });
+    };
+
+    const deleteProduct = (product) => {
+        let _products = [...products];
+
+        _products = _products.filter((p) => p.id !== product.id);
+
+        toast.current.show({ severity: 'error', summary: 'Product Deleted', detail: product.name });
+        setProducts(_products);
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<ContextMenu model={menuModel} ref={cm} onHide={() => setSelectedProduct(null)} />
+<DataTable value={products} onContextMenu={(e) => cm.current.show(e.originalEvent)}
+        contextMenuSelection={selectedProduct} onContextMenuSelectionChange={(e) => setSelectedProduct(e.value)} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="price" header="Price" body={priceBodyTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Toast } from 'primereact/toast';
+import { ProductService } from './service/ProductService';
+
+export default function ContextMenuDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const toast = useRef(null);
+    const cm = useRef(null);
+    const menuModel = [
+        { label: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct) },
+        { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteProduct(selectedProduct) }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const viewProduct = (product) => {
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail: product.name });
+    };
+
+    const deleteProduct = (product) => {
+        let _products = [...products];
+
+        _products = _products.filter((p) => p.id !== product.id);
+
+        toast.current.show({ severity: 'error', summary: 'Product Deleted', detail: product.name });
+        setProducts(_products);
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+
+            <ContextMenu model={menuModel} ref={cm} onHide={() => setSelectedProduct(null)} />
+            <DataTable value={products} onContextMenu={(e) => cm.current.show(e.originalEvent)} contextMenuSelection={selectedProduct} onContextMenuSelectionChange={(e) => setSelectedProduct(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Toast } from 'primereact/toast';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function ContextMenuDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+    const toast = useRef<Toast>(null);
+    const cm = useRef<ContextMenu>(null);
+    const menuModel = [
+        { label: 'View', icon: 'pi pi-fw pi-search', command: () => viewProduct(selectedProduct) },
+        { label: 'Delete', icon: 'pi pi-fw pi-times', command: () => deleteProduct(selectedProduct) }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const viewProduct = (product) => {
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail: product.name });
+    };
+
+    const deleteProduct = (product) => {
+        let _products = [...products];
+
+        _products = _products.filter((p) => p.id !== product.id);
+
+        toast.current.show({ severity: 'error', summary: 'Product Deleted', detail: product.name });
+        setProducts(_products);
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+
+            <ContextMenu model={menuModel} ref={cm} onHide={() => setSelectedProduct(null)} />
+            <DataTable value={products} onContextMenu={(e) => cm.current.show(e.originalEvent)} contextMenuSelection={selectedProduct} onContextMenuSelectionChange={(e) => setSelectedProduct(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    DataTable has exclusive integration with ContextMenu using the <i>onContextMenu</i> event to open a menu on right click alont with
+                    <i>contextMenuSelection</i> and <i>onContextMenuSelectionChange</i> properties to control the selection via the menu.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <Toast ref={toast} />
+
+                    <ContextMenu model={menuModel} ref={cm} onHide={() => setSelectedProduct(null)} />
+                    <DataTable value={products} onContextMenu={(e) => cm.current.show(e.originalEvent)} contextMenuSelection={selectedProduct} onContextMenuSelectionChange={(e) => setSelectedProduct(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="price" header="Price" body={priceBodyTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/dynamiccolumnsdoc.js b/components/doc/datatable/dynamiccolumnsdoc.js
new file mode 100644
index 0000000000..ed1b5cd77c
--- /dev/null
+++ b/components/doc/datatable/dynamiccolumnsdoc.js
@@ -0,0 +1,142 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function DynamicColumnsDoc(props) {
+    const [products, setProducts] = useState([]);
+    const columns = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+    {columns.map((col, i) => (
+        <Column key={col.field} field={col.field} header={col.header} />
+    ))}
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function DynamicColumnsDemo() {
+    const [products, setProducts] = useState([]);
+    const columns = [
+        {field: 'code', header: 'Code'},
+        {field: 'name', header: 'Name'},
+        {field: 'category', header: 'Category'},
+        {field: 'quantity', header: 'Quantity'}
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                {columns.map((col, i) => (
+                    <Column key={col.field} field={col.field} header={col.header} />
+                ))}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+export default function DynamicColumnsDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const columns: ColumnMeta[] = [
+        {field: 'code', header: 'Code'},
+        {field: 'name', header: 'Name'},
+        {field: 'category', header: 'Category'},
+        {field: 'quantity', header: 'Quantity'}
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                {columns.map((col, i) => (
+                    <Column key={col.field} field={col.field} header={col.header} />
+                ))}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Columns can be created programmatically.</p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                        {columns.map((col, i) => (
+                            <Column key={col.field} field={col.field} header={col.header} />
+                        ))}
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/edit/celleditdoc.js b/components/doc/datatable/edit/celleditdoc.js
new file mode 100644
index 0000000000..77b2d6cf76
--- /dev/null
+++ b/components/doc/datatable/edit/celleditdoc.js
@@ -0,0 +1,313 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+
+export function CellEditDoc(props) {
+    const [products, setProducts] = useState(null);
+
+    const columns = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'quantity', header: 'Quantity' },
+        { field: 'price', header: 'Price' }
+    ];
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const isPositiveInteger = (val) => {
+        let str = String(val);
+
+        str = str.trim();
+
+        if (!str) {
+            return false;
+        }
+
+        str = str.replace(/^0+/, '') || '0';
+        let n = Math.floor(Number(str));
+
+        return n !== Infinity && String(n) === str && n >= 0;
+    };
+
+    const onCellEditComplete = (e) => {
+        let { rowData, newValue, field, originalEvent: event } = e;
+
+        switch (field) {
+            case 'quantity':
+            case 'price':
+                if (isPositiveInteger(newValue)) {
+                    rowData[field] = newValue;
+                } else {
+                    event.preventDefault();
+                }
+
+                break;
+
+            default:
+                if (newValue.trim().length > 0) {
+                    rowData[field] = newValue;
+                } else {
+                    event.preventDefault();
+                }
+
+                break;
+        }
+    };
+
+    const cellEditor = (options) => {
+        if (options.field === 'price') {
+            return priceEditor(options);
+        }
+
+        return textEditor(options);
+    };
+
+    const textEditor = (options) => {
+        return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const priceEditor = (options) => {
+        return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} editMode="cell" tableStyle={{ minWidth: '50rem' }}>
+    {columns.map(({ field, header }) => {
+        return <Column key={field} field={field} header={header}
+            style={{ width: '25%' }} body={field === 'price' && priceBodyTemplate}
+            editor={(options) => cellEditor(options)} onCellEditComplete={onCellEditComplete} />;
+    })}
+</DataTable>
+        `,
+        javascript: `
+import React, { useEffect, useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+import { ProductService } from './service/ProductService';
+
+export default function CellEditingDemo() {
+    const [products, setProducts] = useState(null);
+
+    const columns = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'quantity', header: 'Quantity' },
+        { field: 'price', header: 'Price' }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const isPositiveInteger = (val) => {
+        let str = String(val);
+
+        str = str.trim();
+
+        if (!str) {
+            return false;
+        }
+
+        str = str.replace(/^0+/, '') || '0';
+        let n = Math.floor(Number(str));
+
+        return n !== Infinity && String(n) === str && n >= 0;
+    };
+
+    const onCellEditComplete = (e) => {
+        let { rowData, newValue, field, originalEvent: event } = e;
+
+        switch (field) {
+            case 'quantity':
+            case 'price':
+                if (isPositiveInteger(newValue)) rowData[field] = newValue;
+                else event.preventDefault();
+                break;
+
+            default:
+                if (newValue.trim().length > 0) rowData[field] = newValue;
+                else event.preventDefault();
+                break;
+        }
+    };
+
+    const cellEditor = (options) => {
+        if (options.field === 'price') return priceEditor(options);
+        else return textEditor(options);
+    };
+
+    const textEditor = (options) => {
+        return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const priceEditor = (options) => {
+        return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
+    };
+
+    return (
+        <div className="card p-fluid">
+            <DataTable value={products} editMode="cell" tableStyle={{ minWidth: '50rem' }}>
+                {columns.map(({ field, header }) => {
+                    return <Column key={field} field={field} header={header} style={{ width: '25%' }} body={field === 'price' && priceBodyTemplate} editor={(options) => cellEditor(options)} onCellEditComplete={onCellEditComplete} />;
+                })}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useEffect, useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column, ColumnEvent, ColumnEditorOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+export default function CellEditingDemo() {
+    const [products, setProducts] = useState<Product[] | null>(null);
+
+    const columns: ColumnMeta[] = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'quantity', header: 'Quantity' },
+        { field: 'price', header: 'Price' }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const isPositiveInteger = (val: any) => {
+        let str = String(val);
+
+        str = str.trim();
+
+        if (!str) {
+            return false;
+        }
+
+        str = str.replace(/^0+/, '') || '0';
+        let n = Math.floor(Number(str));
+
+        return n !== Infinity && String(n) === str && n >= 0;
+    };
+
+    const onCellEditComplete = (e: ColumnEvent) => {
+        let { rowData, newValue, field, originalEvent: event } = e;
+
+        switch (field) {
+            case 'quantity':
+            case 'price':
+                if (isPositiveInteger(newValue)) rowData[field] = newValue;
+                else event.preventDefault();
+                break;
+
+            default:
+                if (newValue.trim().length > 0) rowData[field] = newValue;
+                else event.preventDefault();
+                break;
+        }
+    };
+
+    const cellEditor = (options: ColumnEditorOptions) => {
+        if (options.field === 'price') return priceEditor(options);
+        else return textEditor(options);
+    };
+
+    const textEditor = (options: ColumnEditorOptions) => {
+        return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback(e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const priceEditor = (options: ColumnEditorOptions) => {
+        return <InputNumber value={options.value} onValueChange={(e: InputNumberValueChangeEvent) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const priceBodyTemplate = (rowData: Product) => {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
+    };
+
+    return (
+        <div className="card p-fluid">
+            <DataTable value={products} editMode="cell" tableStyle={{ minWidth: '50rem' }}>
+                {columns.map(({ field, header }) => {
+                    return <Column key={field} field={field} header={header} style={{ width: '25%' }} body={field === 'price' && priceBodyTemplate} editor={(options) => cellEditor(options)} onCellEditComplete={onCellEditComplete} />;
+                })}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> property of a Column and implementing <i>onCellEditComplete</i> to update the state.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card p-fluid">
+                    <DataTable value={products} editMode="cell" tableStyle={{ minWidth: '50rem' }}>
+                        {columns.map(({ field, header }) => {
+                            return <Column key={field} field={field} header={header} style={{ width: '25%' }} body={field === 'price' && priceBodyTemplate} editor={(options) => cellEditor(options)} onCellEditComplete={onCellEditComplete} />;
+                        })}
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/edit/roweditdoc.js b/components/doc/datatable/edit/roweditdoc.js
new file mode 100644
index 0000000000..b864b4d46c
--- /dev/null
+++ b/components/doc/datatable/edit/roweditdoc.js
@@ -0,0 +1,322 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function RowEditDoc(props) {
+    const [products, setProducts] = useState(null);
+    const [statuses] = useState(['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const getSeverity = (value) => {
+        switch (value) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const onRowEditComplete = (e) => {
+        let _products = [...products];
+        let { newData, index } = e;
+
+        _products[index] = newData;
+
+        setProducts(_products);
+    };
+
+    const textEditor = (options) => {
+        return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} />;
+    };
+
+    const statusEditor = (options) => {
+        return (
+            <Dropdown
+                value={options.value}
+                options={statuses}
+                onChange={(e) => options.editorCallback(e.value)}
+                placeholder="Select a Status"
+                itemTemplate={(option) => {
+                    return <Tag value={option} severity={getSeverity(option)} />;
+                }}
+            />
+        );
+    };
+
+    const priceEditor = (options) => {
+        return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData.inventoryStatus)} />;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
+    };
+
+    const allowEdit = (rowData) => {
+        return rowData.name !== 'Blue Band';
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
+    <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
+    <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
+    <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
+    <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useEffect, useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function RowEditingDemo() {
+    const [products, setProducts] = useState(null);
+    const [statuses] = useState(['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (value) => {
+        switch (value) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const onRowEditComplete = (e) => {
+        let _products = [...products];
+        let { newData, index } = e;
+
+        _products[index] = newData;
+
+        setProducts(_products);
+    };
+
+    const textEditor = (options) => {
+        return <InputText type="text" value={options.value} onChange={(e) => options.editorCallback(e.target.value)} />;
+    };
+
+    const statusEditor = (options) => {
+        return (
+            <Dropdown
+                value={options.value}
+                options={statuses}
+                onChange={(e) => options.editorCallback(e.value)}
+                placeholder="Select a Status"
+                itemTemplate={(option) => {
+                    return <Tag value={option} severity={getSeverity(option)}></Tag>;
+                }}
+            />
+        );
+    };
+
+    const priceEditor = (options) => {
+        return <InputNumber value={options.value} onValueChange={(e) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData.inventoryStatus)}></Tag>;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
+    };
+
+    const allowEdit = (rowData) => {
+        return rowData.name !== 'Blue Band';
+    };
+
+    return (
+        <div className="card p-fluid">
+            <DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
+                <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
+                <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
+                <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useEffect, useState } from 'react';
+import { DataTable, DataTableRowEditCompleteEvent } from 'primereact/datatable';
+import { Column, ColumnEditorOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function RowEditingDemo() {
+    const [products, setProducts] = useState<Product[]>();
+    const [statuses] = useState<string[]>(['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const getSeverity = (value: string) => {
+        switch (value) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const onRowEditComplete = (e: DataTableRowEditCompleteEvent) => {
+        let _products = [...products];
+        let { newData, index } = e;
+
+        _products[index] = newData as Product;
+
+        setProducts(_products);
+    };
+
+    const textEditor = (options: ColumnEditorOptions) => {
+        return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback!(e.target.value)} />;
+    };
+
+    const statusEditor = (options: ColumnEditorOptions) => {
+        return (
+            <Dropdown
+                value={options.value}
+                options={statuses}
+                onChange={(e: DropdownChangeEvent) => options.editorCallback!(e.value)}
+                placeholder="Select a Status"
+                itemTemplate={(option) => {
+                    return <Tag value={option} severity={getSeverity(option)}></Tag>;
+                }}
+            />
+        );
+    };
+
+    const priceEditor = (options: ColumnEditorOptions) => {
+        return <InputNumber value={options.value}  onValueChange={(e: InputNumberValueChangeEvent) => options.editorCallback!(e.value)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData: Product) => {
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData.inventoryStatus)}></Tag>;
+    };
+
+    const priceBodyTemplate = (rowData: Product) => {
+        return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
+    };
+
+    const allowEdit = (rowData: Product) => {
+        return rowData.name !== 'Blue Band';
+    };
+
+    return (
+        <div className="card p-fluid">
+            <DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
+                <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
+                <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
+                <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Row editing is configured with setting <i>editMode</i> as <i>row</i>. Similarly with cell edit mode, defining input elements with <i>editor</i> property of a Column and implementing <i>onRowEditComplete</i> are necessary to update
+                    the state. The column to control the editing state should have <i>rowEditor</i> property applied.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card p-fluid">
+                    <DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }} />
+                        <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }} />
+                        <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }} />
+                        <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/exportdoc.js b/components/doc/datatable/exportdoc.js
new file mode 100644
index 0000000000..c1d0f775cb
--- /dev/null
+++ b/components/doc/datatable/exportdoc.js
@@ -0,0 +1,328 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+import { useEffect, useRef, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function ExportDoc(props) {
+    const [products, setProducts] = useState([]);
+    const dt = useRef(null);
+
+    const cols = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+
+    const exportColumns = cols.map((col) => ({ title: col.header, dataKey: col.field }));
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const exportCSV = (selectionOnly) => {
+        dt.current.exportCSV({ selectionOnly });
+    };
+
+    const exportPdf = () => {
+        import('jspdf').then((jsPDFModule) => {
+            import('jspdf-autotable').then((autoTableModule) => {
+                const jsPDF = jsPDFModule.default;
+                const autoTable = autoTableModule.default;
+                const doc = new jsPDF(0, 0);
+
+                autoTable(doc, {
+                    head: [exportColumns.map((col) => col.title)],
+                    body: products.map((product) => exportColumns.map((col) => product[col.dataKey]))
+                });
+                doc.save('products.pdf');
+            });
+        });
+    };
+
+    const exportExcel = () => {
+        import('xlsx').then((xlsx) => {
+            const worksheet = xlsx.utils.json_to_sheet(products);
+            const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
+            const excelBuffer = xlsx.write(workbook, {
+                bookType: 'xlsx',
+                type: 'array'
+            });
+
+            saveAsExcelFile(excelBuffer, 'products');
+        });
+    };
+
+    const saveAsExcelFile = (buffer, fileName) => {
+        import('file-saver').then((module) => {
+            if (module && module.default) {
+                let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+                let EXCEL_EXTENSION = '.xlsx';
+                const data = new Blob([buffer], {
+                    type: EXCEL_TYPE
+                });
+
+                module.default.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
+            }
+        });
+    };
+
+    const header = (
+        <div className="flex align-items-center justify-content-end gap-2">
+            <Button type="button" icon="pi pi-file" rounded onClick={() => exportCSV(false)} data-pr-tooltip="CSV" />
+            <Button type="button" icon="pi pi-file-excel" severity="success" rounded onClick={exportExcel} data-pr-tooltip="XLS" />
+            <Button type="button" icon="pi pi-file-pdf" severity="warning" rounded onClick={exportPdf} data-pr-tooltip="PDF" />
+        </div>
+    );
+
+    const code = {
+        basic: `
+<Button type="button" icon="pi pi-file" rounded onClick={() => exportCSV(false)} data-pr-tooltip="CSV" />
+<Button type="button" icon="pi pi-file-excel" severity="success" rounded onClick={exportExcel} data-pr-tooltip="XLS" />
+<Button type="button" icon="pi pi-file-pdf" severity="warning" rounded onClick={exportPdf} data-pr-tooltip="PDF" />
+
+<DataTable ref={dt} value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+    {cols.map((col, index) => (
+        <Column key={index} field={col.field} header={col.header} />
+    ))}
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { Tooltip } from 'primereact/tooltip';
+import { ProductService } from './service/ProductService';
+
+export default function ExportDemo() {
+    const [products, setProducts] = useState([]);
+    const dt = useRef(null);
+
+    const cols = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+
+    const exportColumns = cols.map((col) => ({ title: col.header, dataKey: col.field }));
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const exportCSV = (selectionOnly) => {
+        dt.current.exportCSV({ selectionOnly });
+    };
+
+    const exportPdf = () => {
+        import('jspdf').then((jsPDF) => {
+            import('jspdf-autotable').then(() => {
+                const doc = new jsPDF.default(0, 0);
+
+                doc.autoTable(exportColumns, products);
+                doc.save('products.pdf');
+            });
+        });
+    };
+
+    const exportExcel = () => {
+        import('xlsx').then((xlsx) => {
+            const worksheet = xlsx.utils.json_to_sheet(products);
+            const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
+            const excelBuffer = xlsx.write(workbook, {
+                bookType: 'xlsx',
+                type: 'array'
+            });
+
+            saveAsExcelFile(excelBuffer, 'products');
+        });
+    };
+
+    const saveAsExcelFile = (buffer, fileName) => {
+        import('file-saver').then((module) => {
+            if (module && module.default) {
+                let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+                let EXCEL_EXTENSION = '.xlsx';
+                const data = new Blob([buffer], {
+                    type: EXCEL_TYPE
+                });
+
+                module.default.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
+            }
+        });
+    };
+
+    const header = (
+        <div className="flex align-items-center justify-content-end gap-2">
+            <Button type="button" icon="pi pi-file" rounded onClick={() => exportCSV(false)} data-pr-tooltip="CSV" />
+            <Button type="button" icon="pi pi-file-excel" severity="success" rounded onClick={exportExcel} data-pr-tooltip="XLS" />
+            <Button type="button" icon="pi pi-file-pdf" severity="warning" rounded onClick={exportPdf} data-pr-tooltip="PDF" />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Tooltip target=".export-buttons>button" position="bottom" />
+
+            <DataTable ref={dt} value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+                {cols.map((col, index) => (
+                    <Column key={index} field={col.field} header={col.header} />
+                ))}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { Tooltip } from 'primereact/tooltip';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+export default function ExportDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const dt = useRef<DataTable>(null);
+
+    const cols: ColumnMeta[] = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+
+    const exportColumns = cols.map((col) => ({ title: col.header, dataKey: col.field }));
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const exportCSV = (selectionOnly) => {
+        dt.current.exportCSV({ selectionOnly });
+    };
+
+    const exportPdf = () => {
+        import('jspdf').then((jsPDF) => {
+            import('jspdf-autotable').then(() => {
+                const doc = new jsPDF.default(0, 0);
+
+                doc.autoTable(exportColumns, products);
+                doc.save('products.pdf');
+            });
+        });
+    };
+
+    const exportExcel = () => {
+        import('xlsx').then((xlsx) => {
+            const worksheet = xlsx.utils.json_to_sheet(products);
+            const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] };
+            const excelBuffer = xlsx.write(workbook, {
+                bookType: 'xlsx',
+                type: 'array'
+            });
+
+            saveAsExcelFile(excelBuffer, 'products');
+        });
+    };
+
+    const saveAsExcelFile = (buffer, fileName) => {
+        import('file-saver').then((module) => {
+            if (module && module.default) {
+                let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
+                let EXCEL_EXTENSION = '.xlsx';
+                const data = new Blob([buffer], {
+                    type: EXCEL_TYPE
+                });
+
+                module.default.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
+            }
+        });
+    };
+
+    const header = (
+        <div className="flex align-items-center justify-content-end gap-2">
+            <Button type="button" icon="pi pi-file" rounded onClick={() => exportCSV(false)} data-pr-tooltip="CSV" />
+            <Button type="button" icon="pi pi-file-excel" severity="success" rounded onClick={exportExcel} data-pr-tooltip="XLS" />
+            <Button type="button" icon="pi pi-file-pdf" severity="warning" rounded onClick={exportPdf} data-pr-tooltip="PDF" />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Tooltip target=".export-buttons>button" position="bottom" />
+
+            <DataTable ref={dt} value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+                {cols.map((col, index) => (
+                    <Column key={index} field={col.field} header={col.header} />
+                ))}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    CSV export is a built-in feature, in this sample PDF & XLS export are also available using third party libraries like <i>jsPDF</i> and <i>xlsx</i>.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <Tooltip target=".export-buttons>button" position="bottom" />
+
+                    <DataTable ref={dt} value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
+                        {cols.map((col, index) => (
+                            <Column key={index} field={col.field} header={col.header} />
+                        ))}
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/filter/advanceddoc.js b/components/doc/datatable/filter/advanceddoc.js
new file mode 100644
index 0000000000..dccd2b14cd
--- /dev/null
+++ b/components/doc/datatable/filter/advanceddoc.js
@@ -0,0 +1,882 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FilterMatchMode, FilterOperator } from '@/components/lib/api/Api';
+import { Button } from '@/components/lib/button/Button';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+import { Slider } from '@/components/lib/slider/Slider';
+import { Tag } from '@/components/lib/tag/Tag';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { classNames } from '@/components/lib/utils/Utils';
+import React, { useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+
+export function AdvancedFilterDoc(props) {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+        initFilters();
+    };
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters.global.value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            representative: { value: null, matchMode: FilterMatchMode.IN },
+            date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+            verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+        });
+        setGlobalFilterValue('');
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-between">
+                <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined onClick={clearFilter} />
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const filterClearTemplate = (options) => {
+        return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary" />;
+    };
+
+    const filterApplyTemplate = (options) => {
+        return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success" />;
+    };
+
+    const filterFooterTemplate = () => {
+        return <div className="px-3 pt-0 pb-3 text-center">Filter by Country</div>;
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${representative.image}`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options) => {
+        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${option.image}`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const balanceFilterTemplate = (options) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const activityBodyTemplate = (rowData) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }} />;
+    };
+
+    const activityFilterTemplate = (options) => {
+        return (
+            <React.Fragment>
+                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3" />
+                <div className="flex align-items-center justify-content-between px-2">
+                    <span>{options.value ? options.value[0] : 0}</span>
+                    <span>{options.value ? options.value[1] : 100}</span>
+                </div>
+            </React.Fragment>
+        );
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'text-green-500 pi-check-circle': rowData.verified, 'text-red-500 pi-times-circle': !rowData.verified })} />;
+    };
+
+    const verifiedFilterTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <label htmlFor="verified-filter" className="font-bold">
+                    Verified
+                </label>
+                <TriStateCheckbox inputId="verified-filter" value={options.value} onChange={(e) => options.filterCallback(e.value)} />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    const code = {
+        basic: `
+<DataTable value={customers} paginator showGridlines rows={10} loading={loading} dataKey="id" 
+        filters={filters} globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']} header={header}
+        emptyMessage="No customers found." onFilter={(e) => setFilters(e.filters)}>
+    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate}
+        filter filterPlaceholder="Search by country" filterClear={filterClearTemplate} 
+        filterApply={filterApplyTemplate} filterFooter={filterFooterTemplate} />
+    <Column header="Agent" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+        body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
+    <Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+    <Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+    <Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+    <Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+    <Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { ProgressBar } from 'primereact/progressbar';
+import { Calendar } from 'primereact/calendar';
+import { MultiSelect } from 'primereact/multiselect';
+import { Slider } from 'primereact/slider';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+
+export default function AdvancedFilterDemo() {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+        initFilters();
+    }, []);
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            representative: { value: null, matchMode: FilterMatchMode.IN },
+            date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+            verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+        });
+        setGlobalFilterValue('');
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-between">
+                <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined onClick={clearFilter} />
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const filterClearTemplate = (options) => {
+        return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary"></Button>;
+    };
+
+    const filterApplyTemplate = (options) => {
+        return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success"></Button>;
+    };
+
+    const filterFooterTemplate = () => {
+        return <div className="px-3 pt-0 pb-3 text-center">Filter by Country</div>;
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options) => {
+        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const balanceFilterTemplate = (options) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const activityBodyTemplate = (rowData) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+    };
+
+    const activityFilterTemplate = (options) => {
+        return (
+            <React.Fragment>
+                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
+                <div className="flex align-items-center justify-content-between px-2">
+                    <span>{options.value ? options.value[0] : 0}</span>
+                    <span>{options.value ? options.value[1] : 100}</span>
+                </div>
+            </React.Fragment>
+        );
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'text-green-500 pi-check-circle': rowData.verified, 'text-red-500 pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const verifiedFilterTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <label htmlFor="verified-filter" className="font-bold">
+                    Verified
+                </label>
+                <TriStateCheckbox inputId="verified-filter" value={options.value} onChange={(e) => options.filterCallback(e.value)} />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator showGridlines rows={10} loading={loading} dataKey="id" 
+                    filters={filters} globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']} header={header}
+                    emptyMessage="No customers found." onFilter={(e) => setFilters(e.filters)}>
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate}
+                    filter filterPlaceholder="Search by country" filterClear={filterClearTemplate} 
+                    filterApply={filterApplyTemplate} filterFooter={filterFooterTemplate} />
+                <Column header="Agent" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
+                <Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+                <Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+                <Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+                <Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
+import { Column, ColumnFilterApplyTemplateOptions, ColumnFilterClearTemplateOptions, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { ProgressBar } from 'primereact/progressbar';
+import { Calendar } from 'primereact/calendar';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { Slider, SliderChangeEvent } from 'primereact/slider';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+
+interface Representative {
+  name: string;
+  image: string;
+}
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+  id: number;
+  name: string;
+  country: Country;
+  company: string;
+  date: string;
+  status: string;
+  verified: boolean;
+  activity: number;
+  representative: Representative;
+  balance: number;
+}
+
+const defaultFilters: DataTableFilterMeta = {
+  global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  name: {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
+  },
+  'country.name': {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }],
+  },
+  representative: { value: null, matchMode: FilterMatchMode.IN },
+  date: {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }],
+  },
+  balance: {
+    operator: FilterOperator.AND,
+    constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
+  },
+  status: {
+    operator: FilterOperator.OR,
+    constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }],
+  },
+  activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+  verified: { value: null, matchMode: FilterMatchMode.EQUALS },
+};
+
+export default function AdvancedFilterDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>(defaultFilters);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
+    const [representatives] = useState<Representative[]>([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState<string[]>(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data: Customer[]) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+        initFilters();
+    }, []);
+
+    const getCustomers = (data: Customer[]) => {
+        return [...(data || [])].map((d) => {
+            // @ts-ignore
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value: Date) => {
+        return value.toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        // @ts-ignore
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const initFilters = () => {
+        setFilters(defaultFilters);
+        setGlobalFilterValue('');
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-between">
+                <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined onClick={clearFilter} />
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const filterClearTemplate = (options: ColumnFilterClearTemplateOptions) => {
+        return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary"></Button>;
+    };
+
+    const filterApplyTemplate = (options: ColumnFilterApplyTemplateOptions) => {
+        return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success"></Button>;
+    };
+
+    const filterFooterTemplate = () => {
+        return <div className="px-3 pt-0 pb-3 text-center">Filter by Country</div>;
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e: MultiSelectChangeEvent) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
+    };
+
+    const representativesItemTemplate = (option: Representative) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData: Customer) => {
+        return formatDate(new Date(rowData.date));
+    };
+
+    const dateFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceBodyTemplate = (rowData: Customer) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const balanceFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <InputNumber value={options.value} onChange={(e: InputNumberChangeEvent) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e: DropdownChangeEvent) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option: string) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const activityBodyTemplate = (rowData: Customer) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+    };
+
+    const activityFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <React.Fragment>
+                <Slider value={options.value} onChange={(e: SliderChangeEvent) => options.filterCallback(e.value)} range className="m-3"></Slider>
+                <div className="flex align-items-center justify-content-between px-2">
+                    <span>{options.value ? options.value[0] : 0}</span>
+                    <span>{options.value ? options.value[1] : 100}</span>
+                </div>
+            </React.Fragment>
+        );
+    };
+
+    const verifiedBodyTemplate = (rowData: Customer) => {
+        return <i className={classNames('pi', { 'text-green-500 pi-check-circle': rowData.verified, 'text-red-500 pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const verifiedFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <label htmlFor="verified-filter" className="font-bold">
+                    Verified
+                </label>
+                <TriStateCheckbox id="verified-filter" value={options.value} onChange={(e: TriStateCheckboxChangeEvent) => options.filterCallback(e.value)} />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator showGridlines rows={10} loading={loading} dataKey="id" 
+                    filters={filters} globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']} header={header}
+                    emptyMessage="No customers found." onFilter={(e) => setFilters(e.filters)}>
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate}
+                    filter filterPlaceholder="Search by country" filterClear={filterClearTemplate} 
+                    filterApply={filterApplyTemplate} filterFooter={filterFooterTemplate} />
+                <Column header="Agent" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
+                <Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+                <Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+                <Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+                <Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>filterDisplay</i> is set as <i>menu</i>, filtering is done via popups with support for multiple constraints and advanced templating.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        showGridlines
+                        rows={10}
+                        loading={loading}
+                        dataKey="id"
+                        filters={filters}
+                        globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}
+                        header={header}
+                        emptyMessage="No customers found."
+                        onFilter={(e) => setFilters(e.filters)}
+                    >
+                        <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                        <Column
+                            header="Country"
+                            filterField="country.name"
+                            style={{ minWidth: '12rem' }}
+                            body={countryBodyTemplate}
+                            filter
+                            filterPlaceholder="Search by country"
+                            filterClear={filterClearTemplate}
+                            filterApply={filterApplyTemplate}
+                            filterFooter={filterFooterTemplate}
+                        />
+                        <Column
+                            header="Agent"
+                            filterField="representative"
+                            showFilterMatchModes={false}
+                            filterMenuStyle={{ width: '14rem' }}
+                            style={{ minWidth: '14rem' }}
+                            body={representativeBodyTemplate}
+                            filter
+                            filterElement={representativeFilterTemplate}
+                        />
+                        <Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+                        <Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+                        <Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+                        <Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+                        <Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/filter/basicdoc.js b/components/doc/datatable/filter/basicdoc.js
new file mode 100644
index 0000000000..b8eeed62dd
--- /dev/null
+++ b/components/doc/datatable/filter/basicdoc.js
@@ -0,0 +1,633 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FilterMatchMode } from '@/components/lib/api/Api';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { Tag } from '@/components/lib/tag/Tag';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+
+export function BasicFilterDoc(props) {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    };
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters.global.value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${representative.image}`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${option.image}`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })} />;
+    };
+
+    const representativeRowFilterTemplate = (options) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options) => {
+        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const header = renderHeader();
+
+    const code = {
+        basic: `
+<DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+        globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+    <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+        body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+    <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+    <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown } from 'primereact/dropdown';
+import { MultiSelect } from 'primereact/multiselect';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+
+export default function BasicFilterDemo() {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const representativeRowFilterTemplate = (options) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options) => {
+        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+                    globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+                <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode } from 'primereact/api';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
+import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+
+interface Representative {
+  name: string;
+  image: string;
+}
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+  id: number;
+  name: string;
+  country: Country;
+  company: string;
+  date: string;
+  status: string;
+  verified: boolean;
+  activity: number;
+  representative: Representative;
+  balance: number;
+}
+
+export default function BasicFilterDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState<boolean>(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
+    const [representatives] = useState<Representative[]>([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState<string[]>(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data: Customer[]) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data: Customer[]) => {
+        return [...(data || [])].map((d) => {
+            // @ts-ignore
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        // @ts-ignore
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option: Representative) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option: string) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData: Customer) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const representativeRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e: MultiSelectChangeEvent) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e: DropdownChangeEvent) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <TriStateCheckbox value={options.value} onChange={(e: TriStateCheckboxChangeEvent) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+                    globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+                <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Data filtering is enabled by defining the <i>filters</i> property referring to a <i>DataTableFilterMeta</i> instance. Each column to filter also requires <i>filter</i> to be enabled. Built-in filter element is a input field and
+                    using <i>filterElement</i>, it is possible to customize the filtering with your own UI. Filter elements are displayed within a separate row when <i>filterDisplay</i> is defined as <i>row</i>.
+                </p>
+                <p>
+                    The optional global filtering searches the data against a single value that is bound to the <i>global</i> key of the <i>filters</i> object. The fields to search against is defined with the <i>globalFilterFields</i>.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        rows={10}
+                        dataKey="id"
+                        filters={filters}
+                        filterDisplay="row"
+                        loading={loading}
+                        globalFilterFields={['name', 'country.name', 'representative.name', 'status']}
+                        header={header}
+                        emptyMessage="No customers found."
+                    >
+                        <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                        <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                        <Column
+                            header="Agent"
+                            filterField="representative"
+                            showFilterMenu={false}
+                            filterMenuStyle={{ width: '14rem' }}
+                            style={{ minWidth: '14rem' }}
+                            body={representativeBodyTemplate}
+                            filter
+                            filterElement={representativeRowFilterTemplate}
+                        />
+                        <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                        <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/filter/customdoc.js b/components/doc/datatable/filter/customdoc.js
new file mode 100644
index 0000000000..0c1492174b
--- /dev/null
+++ b/components/doc/datatable/filter/customdoc.js
@@ -0,0 +1,721 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FilterMatchMode, FilterService } from '@/components/lib/api/Api';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { Tag } from '@/components/lib/tag/Tag';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+    const [from, to] = filters ?? [null, null];
+
+    if (from === null && to === null) {
+        return true;
+    }
+
+    if (from !== null && to === null) {
+        return from <= value;
+    }
+
+    if (from === null && to !== null) {
+        return value <= to;
+    }
+
+    return from <= value && value <= to;
+});
+
+export function CustomFilterDoc(props) {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        // For using custom filters, you must set FilterMatchMode.CUSTOM to matchMode.
+        activity: { value: null, matchMode: FilterMatchMode.CUSTOM },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    };
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters.global.value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${representative.image}`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${option.image}`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })} />;
+    };
+
+    const representativeRowFilterTemplate = (options) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options) => {
+        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const activityRowFilterTemplate = (options) => {
+        const [from, to] = options.value ?? [null, null];
+
+        return (
+            <div className="flex gap-1">
+                <InputNumber value={from} onChange={(e) => options.filterApplyCallback([e.value, to])} className="w-full" placeholder="from" />
+                <InputNumber value={to} onChange={(e) => options.filterApplyCallback([from, e.value])} className="w-full" placeholder="to" />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    const code = {
+        basic: `
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+  const [from, to] = filters ?? [null, null];
+  if (from === null && to === null) return true;
+  if (from !== null && to === null) return from <= value;
+  if (from === null && to !== null) return value <= to;
+  return from <= value && value <= to;
+});
+
+<DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+        globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+    <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+        body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+    <Column header="Activity(Custom Filter)" field="activity" showFilterMenu={false} showClearButton={false} style={{ minWidth: '14rem' }} filter filterElement={activityRowFilterTemplate} />
+    <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+    <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterService } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputText } from 'primereact/inputtext';
+import { Dropdown } from 'primereact/dropdown';
+import { MultiSelect } from 'primereact/multiselect';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+  const [from, to] = filters ?? [null, null];
+  if (from === null && to === null) return true;
+  if (from !== null && to === null) return from <= value;
+  if (from === null && to !== null) return value <= to;
+  return from <= value && value <= to;
+});
+
+export default function CustomFilterDemo() {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        // For using custom filters, you must set FilterMatchMode.CUSTOM to matchMode.
+        activity: { value: null, matchMode: FilterMatchMode.CUSTOM },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const representativeRowFilterTemplate = (options) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options) => {
+        return <TriStateCheckbox value={options.value} onChange={(e) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const activityRowFilterTemplate = (options) => {
+        const [from, to] = options.value ?? [null, null];
+
+        return (
+            <div className="flex gap-1">
+                <InputNumber value={from} onChange={(e) => options.filterApplyCallback([e.value, to])} className="w-full" placeholder="from" />
+                <InputNumber value={to} onChange={(e) => options.filterApplyCallback([from, e.value])} className="w-full" placeholder="to" />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+                    globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+                <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterService } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputText } from 'primereact/inputtext';
+import { Dropdown } from 'primereact/dropdown';
+import { MultiSelect } from 'primereact/multiselect';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+
+interface Representative {
+  name: string;
+  image: string;
+}
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+  id: number;
+  name: string;
+  country: Country;
+  company: string;
+  date: string;
+  status: string;
+  verified: boolean;
+  activity: number;
+  representative: Representative;
+  balance: number;
+}
+
+// The rule argument should be a string in the format "custom_[field]".
+FilterService.register('custom_activity', (value, filters) => {
+  const [from, to] = filters ?? [null, null];
+  if (from === null && to === null) return true;
+  if (from !== null && to === null) return from <= value;
+  if (from === null && to !== null) return value <= to;
+  return from <= value && value <= to;
+});
+
+export default function CustomFilterDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        'country.name': { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        // For using custom filters, you must set FilterMatchMode.CUSTOM to matchMode.
+        activity: { value: null, matchMode: FilterMatchMode.CUSTOM },
+        status: { value: null, matchMode: FilterMatchMode.EQUALS },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    });
+    const [loading, setLoading] = useState<boolean>(true);
+    const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
+    const [representatives] = useState<Representative[]>([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState<string[]>(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data: Customer[]) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data: Customer[]) => {
+        return [...(data || [])].map((d) => {
+            // @ts-ignore
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        // @ts-ignore
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativesItemTemplate = (option: Representative) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusItemTemplate = (option: string) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const verifiedBodyTemplate = (rowData: Customer) => {
+        return <i className={classNames('pi', { 'true-icon pi-check-circle': rowData.verified, 'false-icon pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const representativeRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <MultiSelect
+                value={options.value}
+                options={representatives}
+                itemTemplate={representativesItemTemplate}
+                onChange={(e: MultiSelectChangeEvent) => options.filterApplyCallback(e.value)}
+                optionLabel="name"
+                placeholder="Any"
+                className="p-column-filter"
+                maxSelectedLabels={1}
+                style={{ minWidth: '14rem' }}
+            />
+        );
+    };
+
+    const statusRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <Dropdown value={options.value} options={statuses} onChange={(e: DropdownChangeEvent) => options.filterApplyCallback(e.value)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear style={{ minWidth: '12rem' }} />
+        );
+    };
+
+    const verifiedRowFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <TriStateCheckbox value={options.value} onChange={(e: TriStateCheckboxChangeEvent) => options.filterApplyCallback(e.value)} />;
+    };
+
+    const activityRowFilterTemplate = (options) => {
+        const [from, to] = options.value ?? [null, null];
+
+        return (
+            <div className="flex gap-1">
+                <InputNumber value={from} onChange={(e) => options.filterApplyCallback([e.value, to])} className="w-full" placeholder="from" />
+                <InputNumber value={to} onChange={(e) => options.filterApplyCallback([from, e.value])} className="w-full" placeholder="to" />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
+                    globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
+                <Column header="Activity(Custom Filter)" field="activity" showFilterMenu={false} showClearButton={false} style={{ minWidth: "14rem" }} filter filterElement={activityRowFilterTemplate} />
+                <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom filtering is enabled by defining a filter function using <i>FilterService.register</i> where the rule argument must be <i>"custom_[field]"</i>. The "Activity" field in this example allows custom filtering by a range of two
+                    values.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        rows={10}
+                        dataKey="id"
+                        filters={filters}
+                        filterDisplay="row"
+                        loading={loading}
+                        globalFilterFields={['name', 'country.name', 'representative.name', 'status']}
+                        header={header}
+                        emptyMessage="No customers found."
+                    >
+                        <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                        <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                        <Column
+                            header="Agent"
+                            filterField="representative"
+                            showFilterMenu={false}
+                            filterMenuStyle={{ width: '14rem' }}
+                            style={{ minWidth: '14rem' }}
+                            body={representativeBodyTemplate}
+                            filter
+                            filterElement={representativeRowFilterTemplate}
+                        />
+                        <Column header="Activity(Custom Filter)" field="activity" showFilterMenu={false} showClearButton={false} style={{ minWidth: '14rem' }} filter filterElement={activityRowFilterTemplate} />
+                        <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
+                        <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/gridlinesdoc.js b/components/doc/datatable/gridlinesdoc.js
new file mode 100644
index 0000000000..c460c12732
--- /dev/null
+++ b/components/doc/datatable/gridlinesdoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function GridLinesDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} showGridlines tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function GridLinesDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function GridLinesDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>showGridlines</i> displays borders between cells.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} showGridlines tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/importdoc.js b/components/doc/datatable/importdoc.js
new file mode 100644
index 0000000000..1a857db4c1
--- /dev/null
+++ b/components/doc/datatable/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/datatable/lazyloaddoc.js b/components/doc/datatable/lazyloaddoc.js
new file mode 100644
index 0000000000..4340986b38
--- /dev/null
+++ b/components/doc/datatable/lazyloaddoc.js
@@ -0,0 +1,460 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../service/CustomerService';
+
+export function LazyLoadDoc(props) {
+    const [loading, setLoading] = useState(false);
+    const [totalRecords, setTotalRecords] = useState(0);
+    const [customers, setCustomers] = useState(null);
+    const [selectAll, setSelectAll] = useState(false);
+    const [selectedCustomers, setSelectedCustomers] = useState(null);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 10,
+        page: 1,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: '', matchMode: 'contains' },
+            'country.name': { value: '', matchMode: 'contains' },
+            company: { value: '', matchMode: 'contains' },
+            'representative.name': { value: '', matchMode: 'contains' }
+        }
+    });
+
+    let networkTimeout = null;
+
+    useEffect(() => {
+        loadLazyData();
+    }, [lazyState]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const loadLazyData = () => {
+        setLoading(true);
+
+        if (networkTimeout) {
+            clearTimeout(networkTimeout);
+        }
+
+        //imitate delay of a backend call
+        networkTimeout = setTimeout(
+            () => {
+                CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyState) }).then((data) => {
+                    setTotalRecords(data.totalRecords);
+                    setCustomers(data.customers);
+                    setLoading(false);
+                });
+            },
+            Math.random() * 1000 + 250
+        );
+    };
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        setLazyState(event);
+    };
+
+    const onFilter = (event) => {
+        event.first = 0;
+        setLazyState(event);
+    };
+
+    const onSelectionChange = (event) => {
+        const value = event.value;
+
+        setSelectedCustomers(value);
+        setSelectAll(value.length === totalRecords);
+    };
+
+    const onSelectAllChange = (event) => {
+        const selectAll = event.checked;
+
+        if (selectAll) {
+            CustomerService.getCustomers().then((data) => {
+                setSelectAll(true);
+                setSelectedCustomers(data.customers);
+            });
+        } else {
+            setSelectAll(false);
+            setSelectedCustomers([]);
+        }
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${rowData.representative.image}`} width={32} />
+                <span>{rowData.representative.name}</span>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} lazy filterDisplay="row" dataKey="id" paginator
+        first={lazyState.first} rows={10} totalRecords={totalRecords} onPage={onPage}
+        onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+        onFilter={onFilter} filters={lazyState.filters} loading={loading} tableStyle={{ minWidth: '75rem' }}
+        selection={selectedCustomers} onSelectionChange={onSelectionChange} selectAll={selectAll} onSelectAllChange={onSelectAllChange}>
+    <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+    <Column field="name" header="Name" sortable filter filterPlaceholder="Search" />
+    <Column field="country.name" sortable header="Country" filterField="country.name" body={countryBodyTemplate} filter filterPlaceholder="Search" />
+    <Column field="company" sortable filter header="Company" filterPlaceholder="Search" />
+    <Column field="representative.name" header="Representative" body={representativeBodyTemplate} filter filterPlaceholder="Search" />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+export default function LazyLoadDemo() {
+    const [loading, setLoading] = useState(false);
+    const [totalRecords, setTotalRecords] = useState(0);
+    const [customers, setCustomers] = useState(null);
+    const [selectAll, setSelectAll] = useState(false);
+    const [selectedCustomers, setSelectedCustomers] = useState(null);
+    const [lazyState, setLazyState] = useState({
+        first: 0,
+        rows: 10,
+        page: 1,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: '', matchMode: 'contains' },
+            'country.name': { value: '', matchMode: 'contains' },
+            company: { value: '', matchMode: 'contains' },
+            'representative.name': { value: '', matchMode: 'contains' }
+        }
+    });
+
+    let networkTimeout = null;
+
+    useEffect(() => {
+        loadLazyData();
+    }, [lazyState]);
+
+    const loadLazyData = () => {
+        setLoading(true);
+
+        if (networkTimeout) {
+            clearTimeout(networkTimeout);
+        }
+
+        //imitate delay of a backend call
+        networkTimeout = setTimeout(() => {
+            CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyState) }).then((data) => {
+                setTotalRecords(data.totalRecords);
+                setCustomers(data.customers);
+                setLoading(false);
+            });
+        }, Math.random() * 1000 + 250);
+    };
+
+    const onPage = (event) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event) => {
+        setLazyState(event);
+    };
+
+    const onFilter = (event) => {
+        event['first'] = 0;
+        setLazyState(event);
+    };
+
+    const onSelectionChange = (event) => {
+        const value = event.value;
+
+        setSelectedCustomers(value);
+        setSelectAll(value.length === totalRecords);
+    };
+
+    const onSelectAllChange = (event) => {
+        const selectAll = event.checked;
+
+        if (selectAll) {
+            CustomerService.getCustomers().then((data) => {
+                setSelectAll(true);
+                setSelectedCustomers(data.customers);
+            });
+        } else {
+            setSelectAll(false);
+            setSelectedCustomers([]);
+        }
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${rowData.representative.image}\`} width={32} />
+                <span>{rowData.representative.name}</span>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} lazy filterDisplay="row" dataKey="id" paginator
+                    first={lazyState.first} rows={10} totalRecords={totalRecords} onPage={onPage}
+                    onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                    onFilter={onFilter} filters={lazyState.filters} loading={loading} tableStyle={{ minWidth: '75rem' }}
+                    selection={selectedCustomers} onSelectionChange={onSelectionChange} selectAll={selectAll} onSelectAllChange={onSelectAllChange}>
+                <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+                <Column field="name" header="Name" sortable filter filterPlaceholder="Search" />
+                <Column field="country.name" sortable header="Country" filterField="country.name" body={countryBodyTemplate} filter filterPlaceholder="Search" />
+                <Column field="company" sortable filter header="Company" filterPlaceholder="Search" />
+                <Column field="representative.name" header="Representative" body={representativeBodyTemplate} filter filterPlaceholder="Search" />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent, DataTableSelectAllChangeEvent,
+    DataTablePageEvent, DataTableSortEvent, DataTableFilterEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Representative {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+interface LazyTableState {
+    first: number;
+    rows: number;
+    page: number;
+    sortField?: string;
+    sortOrder?: number;
+    filters: DataTableFilterMeta;
+}
+
+export default function LazyLoadDemo() {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [totalRecords, setTotalRecords] = useState<number>(0);
+    const [customers, setCustomers] = useState<Customer[] | null>(null);
+    const [selectAll, setSelectAll] = useState<boolean>(false);
+    const [selectedCustomers, setSelectedCustomers] = useState<Customer[] | null>(null);
+    const [lazyState, setLazyState] = useState<LazyTableState>({
+        first: 0,
+        rows: 10,
+        page: 1,
+        sortField: null,
+        sortOrder: null,
+        filters: {
+            name: { value: '', matchMode: 'contains' },
+            'country.name': { value: '', matchMode: 'contains' },
+            company: { value: '', matchMode: 'contains' },
+            'representative.name': { value: '', matchMode: 'contains' }
+        }
+    });
+
+    let networkTimeout = null;
+
+    useEffect(() => {
+        loadLazyData();
+    }, [lazyState]);
+
+    const loadLazyData = () => {
+        setLoading(true);
+
+        if (networkTimeout) {
+            clearTimeout(networkTimeout);
+        }
+
+        //imitate delay of a backend call
+        networkTimeout = setTimeout(() => {
+            CustomerService.getCustomers({ lazyEvent: JSON.stringify(lazyState) }).then((data) => {
+                setTotalRecords(data.totalRecords);
+                setCustomers(data.customers);
+                setLoading(false);
+            });
+        }, Math.random() * 1000 + 250);
+    };
+
+    const onPage = (event: DataTablePageEvent) => {
+        setLazyState(event);
+    };
+
+    const onSort = (event: DataTableSortEvent) => {
+        setLazyState(event);
+    };
+
+    const onFilter = (event: DataTableFilterEvent) => {
+        event['first'] = 0;
+        setLazyState(event);
+    };
+
+    const onSelectionChange = (event: DataTableSelectionChangeEvent) => {
+        const value = event.value;
+
+        setSelectedCustomers(value);
+        setSelectAll(value.length === totalRecords);
+    };
+
+    const onSelectAllChange = (event: DataTableSelectAllChangeEvent) => {
+        const selectAll = event.checked;
+
+        if (selectAll) {
+            CustomerService.getCustomers().then((data) => {
+                setSelectAll(true);
+                setSelectedCustomers(data.customers);
+            });
+        } else {
+            setSelectAll(false);
+            setSelectedCustomers([]);
+        }
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${rowData.representative.image}\`} width={32} />
+                <span>{rowData.representative.name}</span>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} lazy filterDisplay="row" dataKey="id" paginator
+                    first={lazyState.first} rows={10} totalRecords={totalRecords} onPage={onPage}
+                    onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
+                    onFilter={onFilter} filters={lazyState.filters} loading={loading} tableStyle={{ minWidth: '75rem' }}
+                    selection={selectedCustomers} onSelectionChange={onSelectionChange} selectAll={selectAll} onSelectAllChange={onSelectAllChange}>
+                <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+                <Column field="name" header="Name" sortable filter filterPlaceholder="Search" />
+                <Column field="country.name" sortable header="Country" filterField="country.name" body={countryBodyTemplate} filter filterPlaceholder="Search" />
+                <Column field="company" sortable filter header="Company" filterPlaceholder="Search" />
+                <Column field="representative.name" header="Representative" body={representativeBodyTemplate} filter filterPlaceholder="Search" />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime <i>paging</i>, <i>sorting</i> and <i>filtering</i> occurs. Sample
+                    below imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
+                </p>
+                <p>
+                    Enabling the <i>lazy</i> property and assigning the logical number of rows to <i>totalRecords</i> by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually
+                    records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
+                </p>
+                <p>
+                    Note that, the implementation of <i>checkbox selection</i> in lazy mode needs to be handled manually as in this example since the DataTable cannot know about the whole dataset.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <DataTable
+                    value={customers}
+                    lazy
+                    filterDisplay="row"
+                    dataKey="id"
+                    paginator
+                    first={lazyState.first}
+                    rows={10}
+                    totalRecords={totalRecords}
+                    onPage={onPage}
+                    onSort={onSort}
+                    sortField={lazyState.sortField}
+                    sortOrder={lazyState.sortOrder}
+                    onFilter={onFilter}
+                    filters={lazyState.filters}
+                    loading={loading}
+                    tableStyle={{ minWidth: '75rem' }}
+                    selection={selectedCustomers}
+                    onSelectionChange={onSelectionChange}
+                    selectAll={selectAll}
+                    onSelectAllChange={onSelectAllChange}
+                >
+                    <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+                    <Column field="name" header="Name" sortable filter filterPlaceholder="Search" />
+                    <Column field="country.name" sortable header="Country" filterField="country.name" body={countryBodyTemplate} filter filterPlaceholder="Search" />
+                    <Column field="company" sortable filter header="Company" filterPlaceholder="Search" />
+                    <Column field="representative.name" header="Representative" body={representativeBodyTemplate} filter filterPlaceholder="Search" />
+                </DataTable>
+            </div>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/paginator/basicdoc.js b/components/doc/datatable/paginator/basicdoc.js
new file mode 100644
index 0000000000..34b6f846e0
--- /dev/null
+++ b/components/doc/datatable/paginator/basicdoc.js
@@ -0,0 +1,141 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function PaginatorBasicDoc(props) {
+    const [customers, setCustomers] = useState([]);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" style={{ width: '25%' }}></Column>
+    <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
+    <Column field="company" header="Company" style={{ width: '25%' }}></Column>
+    <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+export default function PaginatorBasicDemo() {
+    const [customers, setCustomers] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" style={{ width: '25%' }}></Column>
+                <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
+                <Column field="company" header="Company" style={{ width: '25%' }}></Column>
+                <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Representative {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function PaginatorBasicDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" style={{ width: '25%' }}></Column>
+                <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
+                <Column field="company" header="Company" style={{ width: '25%' }}></Column>
+                <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="name" header="Name" style={{ width: '25%' }} />
+                        <Column field="country.name" header="Country" style={{ width: '25%' }} />
+                        <Column field="company" header="Company" style={{ width: '25%' }} />
+                        <Column field="representative.name" header="Representative" style={{ width: '25%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/paginator/templatedoc.js b/components/doc/datatable/paginator/templatedoc.js
new file mode 100644
index 0000000000..718f051e6a
--- /dev/null
+++ b/components/doc/datatable/paginator/templatedoc.js
@@ -0,0 +1,171 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function PaginatorTemplateDoc(props) {
+    const [customers, setCustomers] = useState([]);
+
+    const paginatorLeft = <Button type="button" icon="pi pi-refresh" text />;
+    const paginatorRight = <Button type="button" icon="pi pi-download" text />;
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}
+        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        currentPageReportTemplate="{first} to {last} of {totalRecords}" paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
+    <Column field="name" header="Name" style={{ width: '25%' }}></Column>
+    <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
+    <Column field="company" header="Company" style={{ width: '25%' }}></Column>
+    <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+export default function PaginatorTemplateDemo() {
+    const [customers, setCustomers] = useState([]);
+
+    const paginatorLeft = <Button type="button" icon="pi pi-refresh" text />;
+    const paginatorRight = <Button type="button" icon="pi pi-download" text />;
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first} to {last} of {totalRecords}" paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
+                <Column field="name" header="Name" style={{ width: '25%' }}></Column>
+                <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
+                <Column field="company" header="Company" style={{ width: '25%' }}></Column>
+                <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Representative {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function PaginatorTemplateDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+
+    const paginatorLeft = <Button type="button" icon="pi pi-refresh" text />;
+    const paginatorRight = <Button type="button" icon="pi pi-download" text />;
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first} to {last} of {totalRecords}" paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
+                <Column field="name" header="Name" style={{ width: '25%' }}></Column>
+                <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
+                <Column field="company" header="Company" style={{ width: '25%' }}></Column>
+                <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Paginator UI is customized using the <i>paginatorTemplate</i> property. Each element can also be customized further with your own UI to replace the default one, refer to the <Link href="http://github.com/paginator">Paginator</Link> component for
+                    more information about the advanced customization options.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        rows={5}
+                        rowsPerPageOptions={[5, 10, 25, 50]}
+                        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                        currentPageReportTemplate="{first} to {last} of {totalRecords}"
+                        paginatorLeft={paginatorLeft}
+                        paginatorRight={paginatorRight}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="name" header="Name" style={{ width: '25%' }} />
+                        <Column field="country.name" header="Country" style={{ width: '25%' }} />
+                        <Column field="company" header="Company" style={{ width: '25%' }} />
+                        <Column field="representative.name" header="Representative" style={{ width: '25%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/pt/wireframe.js b/components/doc/datatable/pt/wireframe.js
new file mode 100644
index 0000000000..c127793e30
--- /dev/null
+++ b/components/doc/datatable/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="datatable" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/datatable/reorderdoc.js b/components/doc/datatable/reorderdoc.js
new file mode 100644
index 0000000000..03085ba446
--- /dev/null
+++ b/components/doc/datatable/reorderdoc.js
@@ -0,0 +1,156 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function ReorderDoc(props) {
+    const [products, setProducts] = useState([]);
+    const columns = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const dynamicColumns = columns.map((col, i) => {
+        return <Column key={col.field} columnKey={col.field} field={col.field} header={col.header} />;
+    });
+
+    const code = {
+        basic: `
+<DataTable value={products} reorderableColumns reorderableRows onRowReorder={(e) => setProducts(e.value)} tableStyle={{ minWidth: '50rem' }}>
+    <Column rowReorder style={{ width: '3rem' }} />
+    {dynamicColumns}
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function ReorderDemo() {
+    const [products, setProducts] = useState([]);
+    const columns = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const dynamicColumns = columns.map((col, i) => {
+        return <Column key={col.field} columnKey={col.field} field={col.field} header={col.header} />;
+    });
+
+    return (
+        <div className="card">
+            <DataTable value={products} reorderableColumns reorderableRows onRowReorder={(e) => setProducts(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                <Column rowReorder style={{ width: '3rem' }} />
+                {dynamicColumns}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+export default function ReorderDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const columns: ColumnMeta[] = [
+        { field: 'code', header: 'Code' },
+        { field: 'name', header: 'Name' },
+        { field: 'category', header: 'Category' },
+        { field: 'quantity', header: 'Quantity' }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const dynamicColumns = columns.map((col, i) => {
+        return <Column key={col.field} columnKey={col.field} field={col.field} header={col.header} />;
+    });
+
+    return (
+        <div className="card">
+            <DataTable value={products} reorderableColumns reorderableRows onRowReorder={(e) => setProducts(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                <Column rowReorder style={{ width: '3rem' }} />
+                {dynamicColumns}
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding <i>reorderableColumns</i> property.
+                </p>
+                <p>
+                    Similarly, adding <i>reorderableRows</i> property enables draggable rows. For the drag handle a column needs to have <i>rowReorder</i> property and <i>onRowReorder</i> callback is required to control the state of the rows after
+                    reorder completes.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} reorderableColumns reorderableRows onRowReorder={(e) => setProducts(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                        <Column rowReorder style={{ width: '3rem' }} />
+                        {dynamicColumns}
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowexpansiondoc.js b/components/doc/datatable/rowexpansiondoc.js
new file mode 100644
index 0000000000..2fcae4456b
--- /dev/null
+++ b/components/doc/datatable/rowexpansiondoc.js
@@ -0,0 +1,532 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function RowExpansionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [expandedRows, setExpandedRows] = useState(null);
+    const toast = useRef(null);
+
+    const loadDemoData = () => {
+        ProductService.getProductsWithOrdersSmall().then((data) => setProducts(data));
+    };
+
+    const onRowExpand = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
+    };
+
+    const onRowCollapse = (event) => {
+        toast.current.show({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
+    };
+
+    const expandAll = () => {
+        let _expandedRows = {};
+
+        products.forEach((p) => (_expandedRows[`${p.id}`] = true));
+
+        setExpandedRows(_expandedRows);
+    };
+
+    const collapseAll = () => {
+        setExpandedRows(null);
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const amountBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.amount);
+    };
+
+    const statusOrderBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status.toLowerCase()} severity={getOrderSeverity(rowData)} />;
+    };
+
+    const searchBodyTemplate = () => {
+        return <Button icon="pi pi-search" />;
+    };
+
+    const imageBodyTemplate = (rowData) => {
+        return <img src={`https://primefaces.org/cdn/primereact/images/product/${rowData.image}`} alt={rowData.image} width="64px" className="shadow-4" />;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const ratingBodyTemplate = (rowData) => {
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.inventoryStatus} severity={getProductSeverity(rowData)} />;
+    };
+
+    const getProductSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const getOrderSeverity = (order) => {
+        switch (order.status) {
+            case 'DELIVERED':
+                return 'success';
+
+            case 'CANCELLED':
+                return 'danger';
+
+            case 'PENDING':
+                return 'warning';
+
+            case 'RETURNED':
+                return 'info';
+
+            default:
+                return null;
+        }
+    };
+
+    const allowExpansion = (rowData) => {
+        return rowData.orders?.length > 0;
+    };
+
+    const rowExpansionTemplate = (data) => {
+        return (
+            <div className="p-3">
+                <h5>Orders for {data.name}</h5>
+                <DataTable value={data.orders}>
+                    <Column field="id" header="Id" sortable />
+                    <Column field="customer" header="Customer" sortable />
+                    <Column field="date" header="Date" sortable />
+                    <Column field="amount" header="Amount" body={amountBodyTemplate} sortable />
+                    <Column field="status" header="Status" body={statusOrderBodyTemplate} sortable />
+                    <Column headerStyle={{ width: '4rem' }} body={searchBodyTemplate} />
+                </DataTable>
+            </div>
+        );
+    };
+
+    const header = (
+        <div className="flex flex-wrap justify-content-end gap-2">
+            <Button icon="pi pi-plus" label="Expand All" onClick={expandAll} text />
+            <Button icon="pi pi-minus" label="Collapse All" onClick={collapseAll} text />
+        </div>
+    );
+
+    const code = {
+        basic: `
+<DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
+        onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} rowExpansionTemplate={rowExpansionTemplate}
+        dataKey="id" header={header} tableStyle={{ minWidth: '60rem' }}>
+    <Column expander={allowExpansion} style={{ width: '5rem' }} />
+    <Column field="name" header="Name" sortable />
+    <Column header="Image" body={imageBodyTemplate} />
+    <Column field="price" header="Price" sortable body={priceBodyTemplate} />
+    <Column field="category" header="Category" sortable />
+    <Column field="rating" header="Reviews" sortable body={ratingBodyTemplate} />
+    <Column field="inventoryStatus" header="Status" sortable body={statusBodyTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+import { Rating } from 'primereact/rating';
+import { Button } from 'primereact/button';
+import { Tag } from 'primereact/tag';
+import { Toast } from 'primereact/toast';
+
+export default function RowExpansionDemo() {
+    const [products, setProducts] = useState([]);
+    const [expandedRows, setExpandedRows] = useState(null);
+    const toast = useRef(null);
+
+    useEffect(() => {
+        ProductService.getProductsWithOrdersSmall().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onRowExpand = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
+    };
+
+    const onRowCollapse = (event) => {
+        toast.current.show({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
+    };
+
+    const expandAll = () => {
+        let _expandedRows = {};
+
+        products.forEach((p) => (_expandedRows[\`\${p.id}\`] = true));
+
+        setExpandedRows(_expandedRows);
+    };
+
+    const collapseAll = () => {
+        setExpandedRows(null);
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const amountBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.amount);
+    };
+
+    const statusOrderBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status.toLowerCase()} severity={getOrderSeverity(rowData)}></Tag>;
+    };
+
+    const searchBodyTemplate = () => {
+        return <Button icon="pi pi-search" />;
+    };
+
+    const imageBodyTemplate = (rowData) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image} width="64px" className="shadow-4" />;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const ratingBodyTemplate = (rowData) => {
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.inventoryStatus} severity={getProductSeverity(rowData)}></Tag>;
+    };
+
+    const getProductSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const getOrderSeverity = (order) => {
+        switch (order.status) {
+            case 'DELIVERED':
+                return 'success';
+
+            case 'CANCELLED':
+                return 'danger';
+
+            case 'PENDING':
+                return 'warning';
+
+            case 'RETURNED':
+                return 'info';
+
+            default:
+                return null;
+        }
+    };
+
+    const allowExpansion = (rowData) => {
+        return rowData.orders.length > 0;
+    };
+
+    const rowExpansionTemplate = (data) => {
+        return (
+            <div className="p-3">
+                <h5>Orders for {data.name}</h5>
+                <DataTable value={data.orders}>
+                    <Column field="id" header="Id" sortable></Column>
+                    <Column field="customer" header="Customer" sortable></Column>
+                    <Column field="date" header="Date" sortable></Column>
+                    <Column field="amount" header="Amount" body={amountBodyTemplate} sortable></Column>
+                    <Column field="status" header="Status" body={statusOrderBodyTemplate} sortable></Column>
+                    <Column headerStyle={{ width: '4rem' }} body={searchBodyTemplate}></Column>
+                </DataTable>
+            </div>
+        );
+    };
+
+    const header = (
+        <div className="flex flex-wrap justify-content-end gap-2">
+            <Button icon="pi pi-plus" label="Expand All" onClick={expandAll} text />
+            <Button icon="pi pi-minus" label="Collapse All" onClick={collapseAll} text />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
+                    onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} rowExpansionTemplate={rowExpansionTemplate}
+                    dataKey="id" header={header} tableStyle={{ minWidth: '60rem' }}>
+                <Column expander={allowExpansion} style={{ width: '5rem' }} />
+                <Column field="name" header="Name" sortable />
+                <Column header="Image" body={imageBodyTemplate} />
+                <Column field="price" header="Price" sortable body={priceBodyTemplate} />
+                <Column field="category" header="Category" sortable />
+                <Column field="rating" header="Reviews" sortable body={ratingBodyTemplate} />
+                <Column field="inventoryStatus" header="Status" sortable body={statusBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable, DataTableExpandedRows, DataTableRowEvent, DataTableValueArray } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+import { Rating } from 'primereact/rating';
+import { Button } from 'primereact/button';
+import { Tag } from 'primereact/tag';
+import { Toast } from 'primereact/toast';
+
+interface Order {
+    id: string;
+    productCode: string;
+    date: string;
+    amount: number,
+    quantity: number,
+    customer: string;
+    status: string;
+}
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+    orders?: Order[];
+}
+
+export default function RowExpansionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [expandedRows, setExpandedRows] = useState<DataTableExpandedRows | DataTableValueArray | undefined>(undefined);
+    const toast = useRef<Toast>(null);
+
+    useEffect(() => {
+        ProductService.getProductsWithOrdersSmall().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onRowExpand = (event: DataTableRowEvent) => {
+        toast.current?.show({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 });
+    };
+
+    const onRowCollapse = (event: DataTableRowEvent) => {
+        toast.current?.show({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 });
+    };
+
+    const expandAll = () => {
+        let _expandedRows: DataTableExpandedRows = {};
+
+        products.forEach((p) => (_expandedRows[\`\${p.id}\`] = true));
+
+        setExpandedRows(_expandedRows);
+    };
+
+    const collapseAll = () => {
+        setExpandedRows(undefined);
+    };
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const amountBodyTemplate = (rowData: Order) => {
+        return formatCurrency(rowData.amount);
+    };
+
+    const statusOrderBodyTemplate = (rowData: Order) => {
+        return <Tag value={rowData.status.toLowerCase()} severity={getOrderSeverity(rowData)}></Tag>;
+    };
+
+    const searchBodyTemplate = () => {
+        return <Button icon="pi pi-search" />;
+    };
+
+    const imageBodyTemplate = (rowData: Product) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image} width="64px" className="shadow-4" />;
+    };
+
+    const priceBodyTemplate = (rowData: Product) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const ratingBodyTemplate = (rowData: Product) => {
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (rowData: Product) => {
+        return <Tag value={rowData.inventoryStatus} severity={getProductSeverity(rowData)}></Tag>;
+    };
+
+    const getProductSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const getOrderSeverity = (order: Order) => {
+        switch (order.status) {
+            case 'DELIVERED':
+                return 'success';
+
+            case 'CANCELLED':
+                return 'danger';
+
+            case 'PENDING':
+                return 'warning';
+
+            case 'RETURNED':
+                return 'info';
+
+            default:
+                return null;
+        }
+    };
+
+    const allowExpansion = (rowData: Product) => {
+        return rowData.orders!.length > 0;
+    };
+
+    const rowExpansionTemplate = (data: Product) => {
+        return (
+            <div className="p-3">
+                <h5>Orders for {data.name}</h5>
+                <DataTable value={data.orders}>
+                    <Column field="id" header="Id" sortable></Column>
+                    <Column field="customer" header="Customer" sortable></Column>
+                    <Column field="date" header="Date" sortable></Column>
+                    <Column field="amount" header="Amount" body={amountBodyTemplate} sortable></Column>
+                    <Column field="status" header="Status" body={statusOrderBodyTemplate} sortable></Column>
+                    <Column headerStyle={{ width: '4rem' }} body={searchBodyTemplate}></Column>
+                </DataTable>
+            </div>
+        );
+    };
+
+    const header = (
+        <div className="flex flex-wrap justify-content-end gap-2">
+            <Button icon="pi pi-plus" label="Expand All" onClick={expandAll} text />
+            <Button icon="pi pi-minus" label="Collapse All" onClick={collapseAll} text />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
+                    onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} rowExpansionTemplate={rowExpansionTemplate}
+                    dataKey="id" header={header} tableStyle={{ minWidth: '60rem' }}>
+                <Column expander={allowExpansion} style={{ width: '5rem' }} />
+                <Column field="name" header="Name" sortable />
+                <Column header="Image" body={imageBodyTemplate} />
+                <Column field="price" header="Price" sortable body={priceBodyTemplate} />
+                <Column field="category" header="Category" sortable />
+                <Column field="rating" header="Reviews" sortable body={ratingBodyTemplate} />
+                <Column field="inventoryStatus" header="Status" sortable body={statusBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+        {
+            id: '1000',
+            code: 'f230fh0g3',
+            name: 'Bamboo Watch',
+            description: 'Product Description',
+            image: 'bamboo-watch.jpg',
+            price: 65,
+            category: 'Accessories',
+            quantity: 24,
+            inventoryStatus: 'INSTOCK',
+            rating: 5
+        },
+        ...
+                `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Row expansion is controlled with <i>expandedRows</i> and <i>onRowToggle</i> properties. The column that has the expander element requires <i>expander</i> property to be enabled. Optional <i>onRowExpand</i> and <i>onRowCollapse</i>{' '}
+                    events are available as callbacks.
+                </p>
+                <p>
+                    Expanded rows can either be an array of row data or when <i>dataKey</i> is present, an object whose keys are strings referring to the identifier of the row data and values are booleans to represent the expansion state e.g.{' '}
+                    <i>&#123;'1004': true&#125;</i>. The <i>dataKey</i> alternative is more performant for large amounts of data.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <Toast ref={toast} />
+                    <DataTable
+                        value={products}
+                        expandedRows={expandedRows}
+                        onRowToggle={(e) => setExpandedRows(e.data)}
+                        onRowExpand={onRowExpand}
+                        onRowCollapse={onRowCollapse}
+                        rowExpansionTemplate={rowExpansionTemplate}
+                        dataKey="id"
+                        header={header}
+                        tableStyle={{ minWidth: '60rem' }}
+                    >
+                        <Column expander={allowExpansion} style={{ width: '5rem' }} />
+                        <Column field="name" header="Name" sortable />
+                        <Column header="Image" body={imageBodyTemplate} />
+                        <Column field="price" header="Price" sortable body={priceBodyTemplate} />
+                        <Column field="category" header="Category" sortable />
+                        <Column field="rating" header="Reviews" sortable body={ratingBodyTemplate} />
+                        <Column field="inventoryStatus" header="Status" sortable body={statusBodyTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowgroup/expandabledoc.js b/components/doc/datatable/rowgroup/expandabledoc.js
new file mode 100644
index 0000000000..e2f7944d0c
--- /dev/null
+++ b/components/doc/datatable/rowgroup/expandabledoc.js
@@ -0,0 +1,368 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Tag } from '@/components/lib/tag/Tag';
+import React, { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function ExpandableRowGroupDoc(props) {
+    const [customers, setCustomers] = useState([]);
+    const [expandedRows, setExpandedRows] = useState([]);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const headerTemplate = (data) => {
+        return (
+            <React.Fragment>
+                <img alt={data.representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${data.representative.image}`} width="32" style={{ verticalAlign: 'middle' }} className="ml-2" />
+                <span className="vertical-align-middle ml-2 font-bold line-height-3">{data.representative.name}</span>
+            </React.Fragment>
+        );
+    };
+
+    const footerTemplate = (data) => {
+        return (
+            <React.Fragment>
+                <td colSpan={5}>
+                    <div className="flex justify-content-end font-bold w-full">Total Customers: {calculateCustomerTotal(data.representative.name)}</div>
+                </td>
+            </React.Fragment>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const calculateCustomerTotal = (name) => {
+        let total = 0;
+
+        if (customers) {
+            for (let customer of customers) {
+                if (customer.representative.name === name) {
+                    total++;
+                }
+            }
+        }
+
+        return total;
+    };
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name"
+    sortMode="single" sortField="representative.name" sortOrder={1}
+    expandableRowGroups expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
+    rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" style={{ width: '20%' }}></Column>
+    <Column field="country" header="Country" body={countryBodyTemplate} style={{ width: '20%' }}></Column>
+    <Column field="company" header="Company" style={{ width: '20%' }}></Column>
+    <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: '20%' }}></Column>
+    <Column field="date" header="Date" style={{ width: '20%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+export default function ExpandableRowGroupDemo() {
+    const [customers, setCustomers] = useState([]);
+    const [expandedRows, setExpandedRows] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const headerTemplate = (data) => {
+        return (
+            <React.Fragment>
+                <img alt={data.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${data.representative.image}\`} width="32" style={{ verticalAlign: 'middle' }} className="ml-2" />
+                <span className="vertical-align-middle ml-2 font-bold line-height-3">{data.representative.name}</span>
+            </React.Fragment>
+        );
+    };
+
+    const footerTemplate = (data) => {
+        return (
+            <React.Fragment>
+                <td colSpan={5}>
+                    <div className="flex justify-content-end font-bold w-full">Total Customers: {calculateCustomerTotal(data.representative.name)}</div>
+                </td>
+            </React.Fragment>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const calculateCustomerTotal = (name) => {
+        let total = 0;
+
+        if (customers) {
+            for (let customer of customers) {
+                if (customer.representative.name === name) {
+                    total++;
+                }
+            }
+        }
+
+        return total;
+    };
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name"
+                    sortMode="single" sortField="representative.name" sortOrder={1}
+                    expandableRowGroups expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
+                    rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" style={{ width: '20%' }}></Column>
+                <Column field="country" header="Country" body={countryBodyTemplate} style={{ width: '20%' }}></Column>
+                <Column field="company" header="Company" style={{ width: '20%' }}></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: '20%' }}></Column>
+                <Column field="date" header="Date" style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable, DataTableRowToggleEvent, DataTableExpandedRows } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Representative {
+    name: string;
+    image: string;
+}
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function ExpandableRowGroupDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [expandedRows, setExpandedRows] = useState<DataTableExpandedRows | Customer[]>([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const headerTemplate = (data: Customer) => {
+        return (
+            <React.Fragment>
+                <img alt={data.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${data.representative.image}\`} width="32" style={{ verticalAlign: 'middle' }} className="ml-2" />
+                <span className="vertical-align-middle ml-2 font-bold line-height-3">{data.representative.name}</span>
+            </React.Fragment>
+        );
+    };
+
+    const footerTemplate = (data: Customer) => {
+        return (
+            <React.Fragment>
+                <td colSpan={5}>
+                    <div className="flex justify-content-end font-bold w-full">Total Customers: {calculateCustomerTotal(data.representative.name)}</div>
+                </td>
+            </React.Fragment>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const calculateCustomerTotal = (name: string) => {
+        let total = 0;
+
+        if (customers) {
+            for (let customer of customers) {
+                if (customer.representative.name === name) {
+                    total++;
+                }
+            }
+        }
+
+        return total;
+    };
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name"
+                    sortMode="single" sortField="representative.name" sortOrder={1}
+                    expandableRowGroups expandedRows={expandedRows} onRowToggle={(e: DataTableRowToggleEvent) => setExpandedRows(e.data)}
+                    rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" style={{ width: '20%' }}></Column>
+                <Column field="country" header="Country" body={countryBodyTemplate} style={{ width: '20%' }}></Column>
+                <Column field="company" header="Company" style={{ width: '20%' }}></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: '20%' }}></Column>
+                <Column field="date" header="Date" style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+        }
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>expandableRowGroups</i> is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the <i>expandedRows</i> and <i>onRowToggle</i> properties.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        rowGroupMode="subheader"
+                        groupRowsBy="representative.name"
+                        sortMode="single"
+                        sortField="representative.name"
+                        sortOrder={1}
+                        expandableRowGroups
+                        expandedRows={expandedRows}
+                        onRowToggle={(e) => setExpandedRows(e.data)}
+                        rowGroupHeaderTemplate={headerTemplate}
+                        rowGroupFooterTemplate={footerTemplate}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="name" header="Name" style={{ width: '20%' }} />
+                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ width: '20%' }} />
+                        <Column field="company" header="Company" style={{ width: '20%' }} />
+                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: '20%' }} />
+                        <Column field="date" header="Date" style={{ width: '20%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowgroup/rowspandoc.js b/components/doc/datatable/rowgroup/rowspandoc.js
new file mode 100644
index 0000000000..4e32be63fc
--- /dev/null
+++ b/components/doc/datatable/rowgroup/rowspandoc.js
@@ -0,0 +1,282 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function RowSpanRowGroupDoc(props) {
+    const [customers, setCustomers] = useState([]);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${rowData.representative.image}`} width="32" />
+                <span className="font-bold">{rowData.representative.name}</span>
+            </div>
+        );
+    };
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} rowGroupMode="rowspan" groupRowsBy="representative.name"
+        sortMode="single" sortField="representative.name" sortOrder={1} tableStyle={{ minWidth: '50rem' }}>
+    <Column header="#" headerStyle={{ width: '3rem' }} body={(data, options) => options.rowIndex + 1}></Column>
+    <Column field="representative.name" header="Representative" body={representativeBodyTemplate} style={{ minWidth: '200px' }}></Column>
+    <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+    <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '150px' }}></Column>
+    <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+    <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '100px' }}></Column>
+    <Column field="date" header="Date" style={{ minWidth: '100px' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+export default function RowSpanGroupingDemo() {
+    const [customers, setCustomers] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${rowData.representative.image}\`} width="32" />
+                <span className="font-bold">{rowData.representative.name}</span>
+            </div>
+        );
+    };
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} rowGroupMode="rowspan" groupRowsBy="representative.name"
+                    sortMode="single" sortField="representative.name" sortOrder={1} tableStyle={{ minWidth: '50rem' }}>
+                <Column header="#" headerStyle={{ width: '3rem' }} body={(data, options) => options.rowIndex + 1}></Column>
+                <Column field="representative.name" header="Representative" body={representativeBodyTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '150px' }}></Column>
+                <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '100px' }}></Column>
+                <Column field="date" header="Date" style={{ minWidth: '100px' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Representative {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function RowSpanGroupingDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${rowData.representative.image}\`} width="32" />
+                <span className="font-bold">{rowData.representative.name}</span>
+            </div>
+        );
+    };
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} rowGroupMode="rowspan" groupRowsBy="representative.name"
+                    sortMode="single" sortField="representative.name" sortOrder={1} tableStyle={{ minWidth: '50rem' }}>
+                <Column header="#" headerStyle={{ width: '3rem' }} body={(data, options) => options.rowIndex + 1}></Column>
+                <Column field="representative.name" header="Representative" body={representativeBodyTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '150px' }}></Column>
+                <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '100px' }}></Column>
+                <Column field="date" header="Date" style={{ minWidth: '100px' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>rowGroupMode</i> is configured to be <i>rowspan</i>, the grouping column spans multiple rows.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={customers} rowGroupMode="rowspan" groupRowsBy="representative.name" sortMode="single" sortField="representative.name" sortOrder={1} tableStyle={{ minWidth: '50rem' }}>
+                        <Column header="#" headerStyle={{ width: '3rem' }} body={(data, options) => options.rowIndex + 1} />
+                        <Column field="representative.name" header="Representative" body={representativeBodyTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '150px' }} />
+                        <Column field="company" header="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '100px' }} />
+                        <Column field="date" header="Date" style={{ minWidth: '100px' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowgroup/subheaderdoc.js b/components/doc/datatable/rowgroup/subheaderdoc.js
new file mode 100644
index 0000000000..e48d789027
--- /dev/null
+++ b/components/doc/datatable/rowgroup/subheaderdoc.js
@@ -0,0 +1,359 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Tag } from '@/components/lib/tag/Tag';
+import React, { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function SubHeaderRowGroupDoc(props) {
+    const [customers, setCustomers] = useState([]);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const headerTemplate = (data) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={data.representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${data.representative.image}`} width="32" />
+                <span className="font-bold">{data.representative.name}</span>
+            </div>
+        );
+    };
+
+    const footerTemplate = (data) => {
+        return (
+            <React.Fragment>
+                <td colSpan="5">
+                    <div className="flex justify-content-end font-bold w-full">Total Customers: {calculateCustomerTotal(data.representative.name)}</div>
+                </td>
+            </React.Fragment>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const calculateCustomerTotal = (name) => {
+        let total = 0;
+
+        if (customers) {
+            for (let customer of customers) {
+                if (customer.representative.name === name) {
+                    total++;
+                }
+            }
+        }
+
+        return total;
+    };
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name"
+        sortOrder={1} scrollable scrollHeight="400px" rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+    <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }}></Column>
+    <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+    <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }}></Column>
+    <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+export default function SubHeaderRowGroupDemo() {
+    const [customers, setCustomers] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const headerTemplate = (data) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={data.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${data.representative.image}\`} width="32" />
+                <span className="font-bold">{data.representative.name}</span>
+            </div>
+        );
+    };
+
+    const footerTemplate = (data) => {
+        return (
+            <React.Fragment>
+                <td colSpan="5">
+                    <div className="flex justify-content-end font-bold w-full">Total Customers: {calculateCustomerTotal(data.representative.name)}</div>
+                </td>
+            </React.Fragment>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const calculateCustomerTotal = (name) => {
+        let total = 0;
+
+        if (customers) {
+            for (let customer of customers) {
+                if (customer.representative.name === name) {
+                    total++;
+                }
+            }
+        }
+
+        return total;
+    };
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name"
+                    sortOrder={1} scrollable scrollHeight="400px" rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+interface Representative {
+    name: string;
+    code: string;
+}
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function SubHeaderRowGroupDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const headerTemplate = (data: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={data.representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${data.representative.image}\`} width="32" />
+                <span className="font-bold">{data.representative.name}</span>
+            </div>
+        );
+    };
+
+    const footerTemplate = (data: Customer) => {
+        return (
+            <React.Fragment>
+                <td colSpan="5">
+                    <div className="flex justify-content-end font-bold w-full">Total Customers: {calculateCustomerTotal(data.representative.name)}</div>
+                </td>
+            </React.Fragment>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const calculateCustomerTotal = (name: string) => {
+        let total = 0;
+
+        if (customers) {
+            for (let customer of customers) {
+                if (customer.representative.name === name) {
+                    total++;
+                }
+            }
+        }
+
+        return total;
+    };
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name"
+                    sortOrder={1} scrollable scrollHeight="400px" rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Rows are grouped with the <i>groupRowsBy</i> property. When <i>rowGroupMode</i> is set as <i>subheader</i>, a header and footer can be displayed for each group. The content of a group header is provided with{' '}
+                    <i>rowGroupHeaderTemplate</i> and footer with <i>rowGroupFooterTemplate</i>.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        rowGroupMode="subheader"
+                        groupRowsBy="representative.name"
+                        sortMode="single"
+                        sortField="representative.name"
+                        sortOrder={1}
+                        scrollable
+                        scrollHeight="400px"
+                        rowGroupHeaderTemplate={headerTemplate}
+                        rowGroupFooterTemplate={footerTemplate}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="company" header="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="date" header="Date" style={{ minWidth: '200px' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowselection/checkboxdoc.js b/components/doc/datatable/rowselection/checkboxdoc.js
new file mode 100644
index 0000000000..c9689397be
--- /dev/null
+++ b/components/doc/datatable/rowselection/checkboxdoc.js
@@ -0,0 +1,157 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function CheckboxRowSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedProducts, setSelectedProducts] = useState(null);
+    const [rowClick, setRowClick] = useState(true);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={rowClick} onChange={(e) => setRowClick(e.value)} />
+
+<DataTable value={products} selectionMode={rowClick ? null : 'checkbox'} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+    <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+export default function CheckboxRowSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedProducts, setSelectedProducts] = useState(null);
+    const [rowClick, setRowClick] = useState(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-rowclick" checked={rowClick} onChange={(e) => setRowClick(e.value)} />
+                <label htmlFor="input-rowclick">Row Click</label>
+            </div>
+            <DataTable value={products} selectionMode={rowClick ? null : 'checkbox'} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function CheckboxRowSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProducts, setSelectedProducts] = useState<Product[] | null>(null);
+    const [rowClick, setRowClick] = useState<boolean>(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-rowclick" checked={rowClick} onChange={(e: InputSwitchChangeEvent) => setRowClick(e.value!)} />
+                <label htmlFor="input-rowclick">Row Click</label>
+            </div>
+            <DataTable value={products} selectionMode={rowClick ? undefined : 'multiple'} selection={selectedProducts!}
+                        onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specifying <i>selectionMode</i> as <i>multiple</i> on a Column, displays a checkbox inside that column for selection. By default, row clicks also trigger selection, set <i>selectionMode</i>
+                    of DataTable to <i>checkbox</i> to only trigger selection using the checkboxes.
+                </p>
+                <p>
+                    The header checkbox toggles the selection state of the whole dataset by default, when paginator is enabled you may add <i>selectionPageOnly</i> to only control the selection of visible rows.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                        <InputSwitch inputId="input-rowclick" checked={rowClick} onChange={(e) => setRowClick(e.value)} />
+                        <label htmlFor="input-rowclick">Row Click</label>
+                    </div>
+                    <DataTable value={products} selectionMode={rowClick ? null : 'checkbox'} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowselection/disableddoc.js b/components/doc/datatable/rowselection/disableddoc.js
new file mode 100644
index 0000000000..fa42f109ce
--- /dev/null
+++ b/components/doc/datatable/rowselection/disableddoc.js
@@ -0,0 +1,158 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function DisabledRowSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+
+    const isSelectable = (data) => data.quantity >= 10;
+
+    const isRowSelectable = (event) => (event.data ? isSelectable(event.data) : true);
+
+    const rowClassName = (data) => (isSelectable(data) ? '' : 'p-disabled');
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id"
+        isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function DisabledRowSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+
+    const isSelectable = (data) => data.quantity >= 10;
+
+    const isRowSelectable = (event) => (event.data ? isSelectable(event.data) : true);
+
+    const rowClassName = (data) => (isSelectable(data) ? '' : 'p-disabled');
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id"
+                    isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent, DataTableDataSelectableEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function DisabledRowSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+
+    const isSelectable = (data: Product) => data.quantity >= 10;
+
+    const isRowSelectable = (event: DataTableDataSelectableEvent) => (event.data ? isSelectable(event.data) : true);
+
+    const rowClassName = (data: Product) => (isSelectable(data) ? '' : 'p-disabled');
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} selectionMode="single" selection={selectedProduct!}
+                    onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Certain rows can be excluded from selection if <i>isDataSelectable</i> returns false.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={products}
+                        selectionMode="single"
+                        selection={selectedProduct}
+                        onSelectionChange={(e) => setSelectedProduct(e.value)}
+                        dataKey="id"
+                        isDataSelectable={isRowSelectable}
+                        rowClassName={rowClassName}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowselection/eventsdoc.js b/components/doc/datatable/rowselection/eventsdoc.js
new file mode 100644
index 0000000000..1765860543
--- /dev/null
+++ b/components/doc/datatable/rowselection/eventsdoc.js
@@ -0,0 +1,174 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useEffect, useRef, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function RowSelectEventsDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const toast = useRef(null);
+
+    const onRowSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail: `Name: ${event.data.name}`, life: 3000 });
+    };
+
+    const onRowUnselect = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Product Unselected', detail: `Name: ${event.data.name}`, life: 3000 });
+    };
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id"
+        onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { ProductService } from './service/ProductService';
+
+export default function RowSelectEventsDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const toast = useRef(null);
+
+    const onRowSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail: \`Name: \${event.data.name}\`, life: 3000 });
+    };
+
+    const onRowUnselect = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Product Unselected', detail: \`Name: \${event.data.name}\`, life: 3000 });
+    };
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id"
+                    onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent, DataTableSelectEvent, DataTableUnselectEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function RowSelectEventsDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+    const toast = useRef<Toast>(null);
+
+    const onRowSelect = (event: DataTableSelectEvent) => {
+        toast.current?.show({ severity: 'info', summary: 'Product Selected', detail: \`Name: \${event.data.name}\`, life: 3000 });
+    };
+
+    const onRowUnselect = (event: DataTableUnselectEvent) => {
+        toast.current?.show({ severity: 'warn', summary: 'Product Unselected', detail: \`Name: \${event.data.name}\`, life: 3000 });
+    };
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <DataTable value={products} selectionMode="single" selection={selectedProduct!} 
+                        onSelectionChange={(e) => setSelectedProduct(e.value)}  dataKey="id" onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    DataTable provides <i>onRowSelect</i> and <i>onRowUnselect</i> events to listen selection events.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={products}
+                        selectionMode="single"
+                        selection={selectedProduct}
+                        onSelectionChange={(e) => setSelectedProduct(e.value)}
+                        dataKey="id"
+                        onRowSelect={onRowSelect}
+                        onRowUnselect={onRowUnselect}
+                        metaKeySelection={false}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowselection/multipledoc.js b/components/doc/datatable/rowselection/multipledoc.js
new file mode 100644
index 0000000000..729db8d02b
--- /dev/null
+++ b/components/doc/datatable/rowselection/multipledoc.js
@@ -0,0 +1,156 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function MultipleRowsSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedProducts, setSelectedProducts] = useState([]);
+    const [metaKey, setMetaKey] = useState(true);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+
+<DataTable value={products} selectionMode="multiple" selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)}
+        dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+export default function MultipleRowsSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedProducts, setSelectedProducts] = useState([]);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} selectionMode="multiple" selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)}
+                    dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function MultipleRowsSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProducts, setSelectedProducts] = useState<Product[]>([]);
+    const [metaKey, setMetaKey] = useState<boolean>(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value!)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} selectionMode="multiple" selection={selectedProducts} 
+                    onSelectionChange={(e) => setSelectedProducts(e.value)}
+                    dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    More than one row is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is necessary to add to existing selections however this can be configured
+                    with disabling the <i>metaKeySelection</i> property. Note that in touch enabled devices, DataTable always ignores metaKey.
+                </p>
+                <p>
+                    Additionaly, multiple rows can be selected using drag when <i>dragSelection</i> is present.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                        <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                        <label htmlFor="input-metakey">MetaKey</label>
+                    </div>
+                    <DataTable value={products} selectionMode="multiple" selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowselection/radiobuttondoc.js b/components/doc/datatable/rowselection/radiobuttondoc.js
new file mode 100644
index 0000000000..b9081df4e4
--- /dev/null
+++ b/components/doc/datatable/rowselection/radiobuttondoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function RadioButtonRowSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const [rowClick, setRowClick] = useState(true);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={rowClick} onChange={(e) => setRowClick(e.value)} />
+
+<DataTable value={products} selectionMode={rowClick ? null : 'radiobutton'} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+    <Column selectionMode="single" headerStyle={{ width: '3rem' }}></Column>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+export default function RadioButtonRowSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const [rowClick, setRowClick] = useState(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-rowclick" checked={rowClick} onChange={(e) => setRowClick(e.value)} />
+                <label htmlFor="input-rowclick">Row Click</label>
+            </div>
+            <DataTable value={products} selectionMode={rowClick ? null : 'radiobutton'} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                <Column selectionMode="single" headerStyle={{ width: '3rem' }}></Column>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function RadioButtonRowSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+    const [rowClick, setRowClick] = useState<boolean>(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-rowclick" checked={rowClick} onChange={(e: InputSwitchChangeEvent) => setRowClick(e.value!)} />
+                <label htmlFor="input-rowclick">Row Click</label>
+            </div>
+            <DataTable value={products} selectionMode={rowClick ? undefined : 'radiobutton'} selection={selectedProduct!}
+                onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                <Column selectionMode="single" headerStyle={{ width: '3rem' }}></Column>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specifying <i>selectionMode</i> as <i>single</i> on a Column, displays a radio button inside that column for selection. By default, row clicks also trigger selection, set <i>selectionMode</i>
+                    of DataTable to <i>radiobutton</i> to only trigger selection using the radio buttons.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                        <InputSwitch inputId="input-rowclick" checked={rowClick} onChange={(e) => setRowClick(e.value)} />
+                        <label htmlFor="input-rowclick">Row Click</label>
+                    </div>
+                    <DataTable value={products} selectionMode={rowClick ? null : 'radiobutton'} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                        <Column selectionMode="single" headerStyle={{ width: '3rem' }} />
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/rowselection/singledoc.js b/components/doc/datatable/rowselection/singledoc.js
new file mode 100644
index 0000000000..c8c0ad0dd0
--- /dev/null
+++ b/components/doc/datatable/rowselection/singledoc.js
@@ -0,0 +1,155 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function SingleRowSelectionDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+
+<DataTable value={products} selectionMode="single" selection={selectedProduct}
+        onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+export default function SingleRowSelectionDemo() {
+    const [products, setProducts] = useState([]);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable, DataTableSelectionChangeEvent } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+}
+
+export default function SingleRowSelectionDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+    const [metaKey, setMetaKey] = useState<boolean>(true);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value!)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <DataTable value={products} selectionMode="single" selection={selectedProduct!} 
+                onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Single row selection is enabled by defining <i>selectionMode</i> as <i>single</i> along with a value binding using <i>selection</i> and <i>onSelectionChange</i> properties. When available, it is suggested to provide a unique
+                    identifier of a row with <i>dataKey</i> to optimize performance.
+                </p>
+                <p>
+                    By default, metaKey press (e.g. <i>⌘</i>) is necessary to unselect a row however this can be configured with disabling the <i>metaKeySelection</i> property. In touch enabled devices this option has no effect and behavior is same
+                    as setting it to false.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                        <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                        <label htmlFor="input-metakey">MetaKey</label>
+                    </div>
+                    <DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/samples/customersdoc.js b/components/doc/datatable/samples/customersdoc.js
new file mode 100644
index 0000000000..09e981c162
--- /dev/null
+++ b/components/doc/datatable/samples/customersdoc.js
@@ -0,0 +1,763 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FilterMatchMode, FilterOperator } from '@/components/lib/api/Api';
+import { Button } from '@/components/lib/button/Button';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+import { Slider } from '@/components/lib/slider/Slider';
+import { Tag } from '@/components/lib/tag/Tag';
+import React, { useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+
+export const CustomersDoc = (props) => {
+    const [customers, setCustomers] = useState([]);
+    const [selectedCustomers, setSelectedCustomers] = useState([]);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: null, matchMode: FilterMatchMode.BETWEEN }
+    });
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersLarge().then((data) => setCustomers(getCustomers(data)));
+    };
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters.global.value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex flex-wrap gap-2 justify-content-between align-items-center">
+                <h4 className="m-0">Customers</h4>
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${representative.image}`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options) => {
+        return (
+            <React.Fragment>
+                <div className="mb-3 font-bold">Agent Picker</div>
+                <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />
+            </React.Fragment>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${option.image}`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const balanceFilterTemplate = (options) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const activityBodyTemplate = (rowData) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }} />;
+    };
+
+    const activityFilterTemplate = (options) => {
+        return (
+            <>
+                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3" />
+                <div className="flex align-items-center justify-content-between px-2">
+                    <span>{options.value ? options.value[0] : 0}</span>
+                    <span>{options.value ? options.value[1] : 100}</span>
+                </div>
+            </>
+        );
+    };
+
+    const actionBodyTemplate = () => {
+        return <Button type="button" icon="pi pi-cog" rounded />;
+    };
+
+    const header = renderHeader();
+
+    const code = {
+        basic: `
+<DataTable value={customers} paginator header={header} rows={10}
+        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+        rowsPerPageOptions={[10, 25, 50]} dataKey="id" selectionMode="checkbox" selection={selectedCustomers} onSelectionChange={(e) => setSelectedCustomers(e.value)}
+        filters={filters} filterDisplay="menu" globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}
+        emptyMessage="No customers found." currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
+    <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+    <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" style={{ minWidth: '14rem' }} />
+    <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+    <Column header="Agent" sortable sortField="representative.name" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }}
+        style={{ minWidth: '14rem' }} body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
+    <Column field="date" header="Date" sortable filterField="date" dataType="date" style={{ minWidth: '12rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+    <Column field="balance" header="Balance" sortable dataType="numeric" style={{ minWidth: '12rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+    <Column field="status" header="Status" sortable filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+    <Column field="activity" header="Activity" sortable showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+    <Column headerStyle={{ width: '5rem', textAlign: 'center' }} bodyStyle={{ textAlign: 'center', overflow: 'visible' }} body={actionBodyTemplate} />
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { ProgressBar } from 'primereact/progressbar';
+import { Calendar } from 'primereact/calendar';
+import { MultiSelect } from 'primereact/multiselect';
+import { Slider } from 'primereact/slider';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+export default function CustomersDemo() {
+    const [customers, setCustomers] = useState([]);
+    const [selectedCustomers, setSelectedCustomers] = useState([]);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: null, matchMode: FilterMatchMode.BETWEEN }
+    });
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersLarge().then((data) => setCustomers(getCustomers(data)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex flex-wrap gap-2 justify-content-between align-items-center">
+                <h4 className="m-0">Customers</h4>
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options) => {
+        return (
+            <React.Fragment>
+                <div className="mb-3 font-bold">Agent Picker</div>
+                <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />
+            </React.Fragment>
+        );
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const balanceFilterTemplate = (options) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const activityBodyTemplate = (rowData) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+    };
+
+    const activityFilterTemplate = (options) => {
+        return (
+            <>
+                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
+                <div className="flex align-items-center justify-content-between px-2">
+                    <span>{options.value ? options.value[0] : 0}</span>
+                    <span>{options.value ? options.value[1] : 100}</span>
+                </div>
+            </>
+        );
+    };
+
+    const actionBodyTemplate = () => {
+        return <Button type="button" icon="pi pi-cog" rounded></Button>;
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator header={header} rows={10}
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                    rowsPerPageOptions={[10, 25, 50]} dataKey="id" selectionMode="checkbox" selection={selectedCustomers} onSelectionChange={(e) => setSelectedCustomers(e.value)}
+                    filters={filters} filterDisplay="menu" globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}
+                    emptyMessage="No customers found." currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
+                <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" style={{ minWidth: '14rem' }} />
+                <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" sortable sortField="representative.name" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }}
+                    style={{ minWidth: '14rem' }} body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
+                <Column field="date" header="Date" sortable filterField="date" dataType="date" style={{ minWidth: '12rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+                <Column field="balance" header="Balance" sortable dataType="numeric" style={{ minWidth: '12rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+                <Column field="status" header="Status" sortable filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+                <Column field="activity" header="Activity" sortable showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+                <Column headerStyle={{ width: '5rem', textAlign: 'center' }} bodyStyle={{ textAlign: 'center', overflow: 'visible' }} body={actionBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
+import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { ProgressBar } from 'primereact/progressbar';
+import { Calendar } from 'primereact/calendar';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { Slider, SliderChangeEvent } from 'primereact/slider';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+interface Country {
+  name: string;
+  code: string;
+}
+
+interface Representative {
+  name: string;
+  image: string;
+}
+
+interface Customer {
+  id: number;
+  name: string;
+  country: Country;
+  company: string;
+  date: string | Date;
+  status: string;
+  verified: boolean;
+  activity: number;
+  representative: Representative;
+  balance: number;
+}
+
+export default function CustomersDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [selectedCustomers, setSelectedCustomers] = useState<Customer[]>([]);
+    const [filters, setFilters] = useState<DataTableFilterMeta>({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: null, matchMode: FilterMatchMode.BETWEEN }
+    });
+    const [globalFilterValue, setGlobalFilterValue] = useState<string>('');
+    const [representatives] = useState<Representative[]>([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState<string[]>(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersLarge().then((data) => setCustomers(getCustomers(data)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getCustomers = (data: Customer[]) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value: string | Date) => {
+        return new Date(value).toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex flex-wrap gap-2 justify-content-between align-items-center">
+                <h4 className="m-0">Customers</h4>
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <React.Fragment>
+                <div className="mb-3 font-bold">Agent Picker</div>
+                <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e: MultiSelectChangeEvent) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />
+            </React.Fragment>
+        );
+    };
+
+    const representativesItemTemplate = (option: Representative) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData: Customer) => {
+        return formatDate(rowData.date);
+    };
+
+    const dateFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceBodyTemplate = (rowData: Customer) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const balanceFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e: DropdownChangeEvent) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option: string) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const activityBodyTemplate = (rowData: Customer) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+    };
+
+    const activityFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return (
+            <>
+                <Slider value={options.value} onChange={(e: SliderChangeEvent) => options.filterCallback(e.value)} range className="m-3"></Slider>
+                <div className="flex align-items-center justify-content-between px-2">
+                    <span>{options.value ? options.value[0] : 0}</span>
+                    <span>{options.value ? options.value[1] : 100}</span>
+                </div>
+            </>
+        );
+    };
+
+    const actionBodyTemplate = () => {
+        return <Button type="button" icon="pi pi-cog" rounded></Button>;
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator header={header} rows={10}
+                    paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                    rowsPerPageOptions={[10, 25, 50]} dataKey="id" selectionMode="checkbox" selection={selectedCustomers} 
+                    onSelectionChange={(e) => {
+                        const customers = e.value as Customer[];
+                        setSelectedCustomers(customers);
+                    }}
+                    filters={filters} filterDisplay="menu" globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}
+                    emptyMessage="No customers found." currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
+                <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" style={{ minWidth: '14rem' }} />
+                <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                <Column header="Agent" sortable sortField="representative.name" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }}
+                    style={{ minWidth: '14rem' }} body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
+                <Column field="date" header="Date" sortable filterField="date" dataType="date" style={{ minWidth: '12rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+                <Column field="balance" header="Balance" sortable dataType="numeric" style={{ minWidth: '12rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+                <Column field="status" header="Status" sortable filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+                <Column field="activity" header="Activity" sortable showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+                <Column headerStyle={{ width: '5rem', textAlign: 'center' }} bodyStyle={{ textAlign: 'center', overflow: 'visible' }} body={actionBodyTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>DataTable with selection, pagination, filtering, sorting and templating.</p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        header={header}
+                        rows={10}
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        rowsPerPageOptions={[10, 25, 50]}
+                        dataKey="id"
+                        selectionMode="checkbox"
+                        selection={selectedCustomers}
+                        onSelectionChange={(e) => setSelectedCustomers(e.value)}
+                        filters={filters}
+                        filterDisplay="menu"
+                        globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}
+                        emptyMessage="No customers found."
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                    >
+                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
+                        <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" style={{ minWidth: '14rem' }} />
+                        <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
+                        <Column
+                            header="Agent"
+                            sortable
+                            sortField="representative.name"
+                            filterField="representative"
+                            showFilterMatchModes={false}
+                            filterMenuStyle={{ width: '14rem' }}
+                            style={{ minWidth: '14rem' }}
+                            body={representativeBodyTemplate}
+                            filter
+                            filterElement={representativeFilterTemplate}
+                        />
+                        <Column field="date" header="Date" sortable filterField="date" dataType="date" style={{ minWidth: '12rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+                        <Column field="balance" header="Balance" sortable dataType="numeric" style={{ minWidth: '12rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+                        <Column field="status" header="Status" sortable filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+                        <Column field="activity" header="Activity" sortable showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+                        <Column headerStyle={{ width: '5rem', textAlign: 'center' }} bodyStyle={{ textAlign: 'center', overflow: 'visible' }} body={actionBodyTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} title="Datatable SamplesDoc" description="Datatable samples demo content." service={['CustomerService']} />
+        </>
+    );
+};
diff --git a/components/doc/datatable/samples/productsdoc.js b/components/doc/datatable/samples/productsdoc.js
new file mode 100644
index 0000000000..706e006ac5
--- /dev/null
+++ b/components/doc/datatable/samples/productsdoc.js
@@ -0,0 +1,1165 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { Toast } from '@/components/lib/toast/Toast';
+import { Toolbar } from '@/components/lib/toolbar/Toolbar';
+import { classNames } from '@/components/lib/utils/Utils';
+import React, { useRef, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+
+export function ProductsDoc(props) {
+    let emptyProduct = {
+        id: null,
+        name: '',
+        image: null,
+        description: '',
+        category: null,
+        price: 0,
+        quantity: 0,
+        rating: 0,
+        inventoryStatus: 'INSTOCK'
+    };
+
+    const [products, setProducts] = useState(null);
+    const [productDialog, setProductDialog] = useState(false);
+    const [deleteProductDialog, setDeleteProductDialog] = useState(false);
+    const [deleteProductsDialog, setDeleteProductsDialog] = useState(false);
+    const [product, setProduct] = useState(emptyProduct);
+    const [selectedProducts, setSelectedProducts] = useState(null);
+    const [submitted, setSubmitted] = useState(false);
+    const [globalFilter, setGlobalFilter] = useState(null);
+    const toast = useRef(null);
+    const dt = useRef(null);
+
+    const loadDemoData = () => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const openNew = () => {
+        setProduct(emptyProduct);
+        setSubmitted(false);
+        setProductDialog(true);
+    };
+
+    const hideDialog = () => {
+        setSubmitted(false);
+        setProductDialog(false);
+    };
+
+    const hideDeleteProductDialog = () => {
+        setDeleteProductDialog(false);
+    };
+
+    const hideDeleteProductsDialog = () => {
+        setDeleteProductsDialog(false);
+    };
+
+    const saveProduct = () => {
+        setSubmitted(true);
+
+        if (product.name.trim()) {
+            let _products = [...products];
+            let _product = { ...product };
+
+            if (product.id) {
+                const index = findIndexById(product.id);
+
+                _products[index] = _product;
+                toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
+            } else {
+                _product.id = createId();
+                _product.image = 'product-placeholder.svg';
+                _products.push(_product);
+                toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
+            }
+
+            setProducts(_products);
+            setProductDialog(false);
+            setProduct(emptyProduct);
+        }
+    };
+
+    const editProduct = (product) => {
+        setProduct({ ...product });
+        setProductDialog(true);
+    };
+
+    const confirmDeleteProduct = (product) => {
+        setProduct(product);
+        setDeleteProductDialog(true);
+    };
+
+    const deleteProduct = () => {
+        let _products = products.filter((val) => val.id !== product.id);
+
+        setProducts(_products);
+        setDeleteProductDialog(false);
+        setProduct(emptyProduct);
+        toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
+    };
+
+    const findIndexById = (id) => {
+        let index = -1;
+
+        for (let i = 0; i < products.length; i++) {
+            if (products[i].id === id) {
+                index = i;
+                break;
+            }
+        }
+
+        return index;
+    };
+
+    const createId = () => {
+        let id = '';
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < 5; i++) {
+            id = id + chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+
+        return id;
+    };
+
+    const exportCSV = () => {
+        dt.current.exportCSV();
+    };
+
+    const confirmDeleteSelected = () => {
+        setDeleteProductsDialog(true);
+    };
+
+    const deleteSelectedProducts = () => {
+        let _products = products.filter((val) => !selectedProducts.includes(val));
+
+        setProducts(_products);
+        setDeleteProductsDialog(false);
+        setSelectedProducts(null);
+        toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+    };
+
+    const onCategoryChange = (e) => {
+        let _product = { ...product };
+
+        _product.category = e.value;
+        setProduct(_product);
+    };
+
+    const onInputChange = (e, name) => {
+        const val = (e.target && e.target.value) || '';
+        let _product = { ...product };
+
+        _product[`${name}`] = val;
+
+        setProduct(_product);
+    };
+
+    const onInputNumberChange = (e, name) => {
+        const val = e.value || 0;
+        let _product = { ...product };
+
+        _product[`${name}`] = val;
+
+        setProduct(_product);
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button label="New" icon="pi pi-plus" severity="success" onClick={openNew} />
+                <Button label="Delete" icon="pi pi-trash" severity="danger" onClick={confirmDeleteSelected} disabled={!selectedProducts || !selectedProducts.length} />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return <Button label="Export" icon="pi pi-upload" className="p-button-help" onClick={exportCSV} />;
+    };
+
+    const imageBodyTemplate = (rowData) => {
+        return <img src={`https://primefaces.org/cdn/primereact/images/product/${rowData.image}`} alt={rowData.image} className="shadow-2 border-round" style={{ width: '64px' }} />;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const ratingBodyTemplate = (rowData) => {
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData)} />;
+    };
+
+    const actionBodyTemplate = (rowData) => {
+        return (
+            <React.Fragment>
+                <Button icon="pi pi-pencil" rounded outlined className="mr-2" onClick={() => editProduct(rowData)} />
+                <Button icon="pi pi-trash" rounded outlined severity="danger" onClick={() => confirmDeleteProduct(rowData)} />
+            </React.Fragment>
+        );
+    };
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const header = (
+        <div className="flex flex-wrap gap-2 align-items-center justify-content-between">
+            <h4 className="m-0">Manage Products</h4>
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search" />
+                <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Search..." />
+            </IconField>
+        </div>
+    );
+    const productDialogFooter = (
+        <React.Fragment>
+            <Button label="Cancel" icon="pi pi-times" outlined onClick={hideDialog} />
+            <Button label="Save" icon="pi pi-check" onClick={saveProduct} />
+        </React.Fragment>
+    );
+    const deleteProductDialogFooter = (
+        <React.Fragment>
+            <Button label="No" icon="pi pi-times" outlined onClick={hideDeleteProductDialog} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" onClick={deleteProduct} />
+        </React.Fragment>
+    );
+    const deleteProductsDialogFooter = (
+        <React.Fragment>
+            <Button label="No" icon="pi pi-times" outlined onClick={hideDeleteProductsDialog} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" onClick={deleteSelectedProducts} />
+        </React.Fragment>
+    );
+
+    const code = {
+        basic: `
+<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+<DataTable ref={dt} value={products} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)}
+        dataKey="id"  paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
+        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" globalFilter={globalFilter} header={header}>
+    <Column selectionMode="multiple" exportable={false}></Column>
+    <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }}></Column>
+    <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }}></Column>
+    <Column field="image" header="Image" body={imageBodyTemplate}></Column>
+    <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ minWidth: '8rem' }}></Column>
+    <Column field="category" header="Category" sortable style={{ minWidth: '10rem' }}></Column>
+    <Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
+    <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
+    <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '12rem' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { classNames } from 'primereact/utils';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+import { FileUpload } from 'primereact/fileupload';
+import { Rating } from 'primereact/rating';
+import { Toolbar } from 'primereact/toolbar';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { RadioButton } from 'primereact/radiobutton';
+import { InputNumber } from 'primereact/inputnumber';
+import { Dialog } from 'primereact/dialog';
+import { InputText } from 'primereact/inputtext';
+import { Tag } from 'primereact/tag';
+
+export default function ProductsDemo() {
+    let emptyProduct = {
+        id: null,
+        name: '',
+        image: null,
+        description: '',
+        category: null,
+        price: 0,
+        quantity: 0,
+        rating: 0,
+        inventoryStatus: 'INSTOCK'
+    };
+
+    const [products, setProducts] = useState(null);
+    const [productDialog, setProductDialog] = useState(false);
+    const [deleteProductDialog, setDeleteProductDialog] = useState(false);
+    const [deleteProductsDialog, setDeleteProductsDialog] = useState(false);
+    const [product, setProduct] = useState(emptyProduct);
+    const [selectedProducts, setSelectedProducts] = useState(null);
+    const [submitted, setSubmitted] = useState(false);
+    const [globalFilter, setGlobalFilter] = useState(null);
+    const toast = useRef(null);
+    const dt = useRef(null);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []);
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const openNew = () => {
+        setProduct(emptyProduct);
+        setSubmitted(false);
+        setProductDialog(true);
+    };
+
+    const hideDialog = () => {
+        setSubmitted(false);
+        setProductDialog(false);
+    };
+
+    const hideDeleteProductDialog = () => {
+        setDeleteProductDialog(false);
+    };
+
+    const hideDeleteProductsDialog = () => {
+        setDeleteProductsDialog(false);
+    };
+
+    const saveProduct = () => {
+        setSubmitted(true);
+
+        if (product.name.trim()) {
+            let _products = [...products];
+            let _product = { ...product };
+
+            if (product.id) {
+                const index = findIndexById(product.id);
+
+                _products[index] = _product;
+                toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
+            } else {
+                _product.id = createId();
+                _product.image = 'product-placeholder.svg';
+                _products.push(_product);
+                toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
+            }
+
+            setProducts(_products);
+            setProductDialog(false);
+            setProduct(emptyProduct);
+        }
+    };
+
+    const editProduct = (product) => {
+        setProduct({ ...product });
+        setProductDialog(true);
+    };
+
+    const confirmDeleteProduct = (product) => {
+        setProduct(product);
+        setDeleteProductDialog(true);
+    };
+
+    const deleteProduct = () => {
+        let _products = products.filter((val) => val.id !== product.id);
+
+        setProducts(_products);
+        setDeleteProductDialog(false);
+        setProduct(emptyProduct);
+        toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
+    };
+
+    const findIndexById = (id) => {
+        let index = -1;
+
+        for (let i = 0; i < products.length; i++) {
+            if (products[i].id === id) {
+                index = i;
+                break;
+            }
+        }
+
+        return index;
+    };
+
+    const createId = () => {
+        let id = '';
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < 5; i++) {
+            id += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+
+        return id;
+    };
+
+    const exportCSV = () => {
+        dt.current.exportCSV();
+    };
+
+    const confirmDeleteSelected = () => {
+        setDeleteProductsDialog(true);
+    };
+
+    const deleteSelectedProducts = () => {
+        let _products = products.filter((val) => !selectedProducts.includes(val));
+
+        setProducts(_products);
+        setDeleteProductsDialog(false);
+        setSelectedProducts(null);
+        toast.current.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+    };
+
+    const onCategoryChange = (e) => {
+        let _product = { ...product };
+
+        _product['category'] = e.value;
+        setProduct(_product);
+    };
+
+    const onInputChange = (e, name) => {
+        const val = (e.target && e.target.value) || '';
+        let _product = { ...product };
+
+        _product[\`\${name}\`] = val;
+
+        setProduct(_product);
+    };
+
+    const onInputNumberChange = (e, name) => {
+        const val = e.value || 0;
+        let _product = { ...product };
+
+        _product[\`\${name}\`] = val;
+
+        setProduct(_product);
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button label="New" icon="pi pi-plus" severity="success" onClick={openNew} />
+                <Button label="Delete" icon="pi pi-trash" severity="danger" onClick={confirmDeleteSelected} disabled={!selectedProducts || !selectedProducts.length} />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return <Button label="Export" icon="pi pi-upload" className="p-button-help" onClick={exportCSV} />;
+    };
+
+    const imageBodyTemplate = (rowData) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image} className="shadow-2 border-round" style={{ width: '64px' }} />;
+    };
+
+    const priceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const ratingBodyTemplate = (rowData) => {
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData)}></Tag>;
+    };
+
+    const actionBodyTemplate = (rowData) => {
+        return (
+            <React.Fragment>
+                <Button icon="pi pi-pencil" rounded outlined className="mr-2" onClick={() => editProduct(rowData)} />
+                <Button icon="pi pi-trash" rounded outlined severity="danger" onClick={() => confirmDeleteProduct(rowData)} />
+            </React.Fragment>
+        );
+    };
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const header = (
+        <div className="flex flex-wrap gap-2 align-items-center justify-content-between">
+            <h4 className="m-0">Manage Products</h4>
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search" />
+                <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Search..." />
+            </IconField>
+        </div>
+    );
+    const productDialogFooter = (
+        <React.Fragment>
+            <Button label="Cancel" icon="pi pi-times" outlined onClick={hideDialog} />
+            <Button label="Save" icon="pi pi-check" onClick={saveProduct} />
+        </React.Fragment>
+    );
+    const deleteProductDialogFooter = (
+        <React.Fragment>
+            <Button label="No" icon="pi pi-times" outlined onClick={hideDeleteProductDialog} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" onClick={deleteProduct} />
+        </React.Fragment>
+    );
+    const deleteProductsDialogFooter = (
+        <React.Fragment>
+            <Button label="No" icon="pi pi-times" outlined onClick={hideDeleteProductsDialog} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" onClick={deleteSelectedProducts} />
+        </React.Fragment>
+    );
+
+    return (
+        <div>
+            <Toast ref={toast} />
+            <div className="card">
+                <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+
+                <DataTable ref={dt} value={products} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)}
+                        dataKey="id"  paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" globalFilter={globalFilter} header={header}>
+                    <Column selectionMode="multiple" exportable={false}></Column>
+                    <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }}></Column>
+                    <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }}></Column>
+                    <Column field="image" header="Image" body={imageBodyTemplate}></Column>
+                    <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ minWidth: '8rem' }}></Column>
+                    <Column field="category" header="Category" sortable style={{ minWidth: '10rem' }}></Column>
+                    <Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
+                    <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
+                    <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '12rem' }}></Column>
+                </DataTable>
+            </div>
+
+            <Dialog visible={productDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Product Details" modal className="p-fluid" footer={productDialogFooter} onHide={hideDialog}>
+                {product.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.image} className="product-image block m-auto pb-3" />}
+                <div className="field">
+                    <label htmlFor="name" className="font-bold">
+                        Name
+                    </label>
+                    <InputText id="name" value={product.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && !product.name })} />
+                    {submitted && !product.name && <small className="p-error">Name is required.</small>}
+                </div>
+                <div className="field">
+                    <label htmlFor="description" className="font-bold">
+                        Description
+                    </label>
+                    <InputTextarea id="description" value={product.description} onChange={(e) => onInputChange(e, 'description')} required rows={3} cols={20} />
+                </div>
+
+                <div className="field">
+                    <label className="mb-3 font-bold">Category</label>
+                    <div className="formgrid grid">
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category1" name="category" value="Accessories" onChange={onCategoryChange} checked={product.category === 'Accessories'} />
+                            <label htmlFor="category1">Accessories</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category2" name="category" value="Clothing" onChange={onCategoryChange} checked={product.category === 'Clothing'} />
+                            <label htmlFor="category2">Clothing</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category3" name="category" value="Electronics" onChange={onCategoryChange} checked={product.category === 'Electronics'} />
+                            <label htmlFor="category3">Electronics</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category4" name="category" value="Fitness" onChange={onCategoryChange} checked={product.category === 'Fitness'} />
+                            <label htmlFor="category4">Fitness</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="formgrid grid">
+                    <div className="field col">
+                        <label htmlFor="price" className="font-bold">
+                            Price
+                        </label>
+                        <InputNumber id="price" value={product.price} onValueChange={(e) => onInputNumberChange(e, 'price')} mode="currency" currency="USD" locale="en-US" />
+                    </div>
+                    <div className="field col">
+                        <label htmlFor="quantity" className="font-bold">
+                            Quantity
+                        </label>
+                        <InputNumber id="quantity" value={product.quantity} onValueChange={(e) => onInputNumberChange(e, 'quantity')} />
+                    </div>
+                </div>
+            </Dialog>
+
+            <Dialog visible={deleteProductDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Confirm" modal footer={deleteProductDialogFooter} onHide={hideDeleteProductDialog}>
+                <div className="confirmation-content">
+                    <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                    {product && (
+                        <span>
+                            Are you sure you want to delete <b>{product.name}</b>?
+                        </span>
+                    )}
+                </div>
+            </Dialog>
+
+            <Dialog visible={deleteProductsDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Confirm" modal footer={deleteProductsDialogFooter} onHide={hideDeleteProductsDialog}>
+                <div className="confirmation-content">
+                    <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                    {product && <span>Are you sure you want to delete the selected products?</span>}
+                </div>
+            </Dialog>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { classNames } from 'primereact/utils';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+import { FileUpload } from 'primereact/fileupload';
+import { Rating } from 'primereact/rating';
+import { Toolbar } from 'primereact/toolbar';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { RadioButton, RadioButtonChangeEvent } from 'primereact/radiobutton';
+import { InputNumber,InputNumberValueChangeEvent } from 'primereact/inputnumber';
+import { Dialog } from 'primereact/dialog';
+import { InputText } from 'primereact/inputtext';
+import { Tag } from 'primereact/tag';
+
+interface Product {
+  id: string | null;
+  code: string;
+  name: string;
+  description: string;
+  image: string | null;
+  price: number;
+  category: string | null;
+  quantity: number;
+  inventoryStatus: string;
+  rating: number;
+}
+
+export default function ProductsDemo() {
+    let emptyProduct: Product = {
+       id: null,
+       code: '',
+       name: '',
+       image: null,
+       description: '',
+       category: null,
+       price: 0,
+       quantity: 0,
+       rating: 0,
+       inventoryStatus: 'INSTOCK',
+    };
+
+    const [products, setProducts] = useState<Product[]>([]);
+    const [productDialog, setProductDialog] = useState<boolean>(false);
+    const [deleteProductDialog, setDeleteProductDialog] = useState<boolean>(false);
+    const [deleteProductsDialog, setDeleteProductsDialog] = useState<boolean>(false);
+    const [product, setProduct] = useState<Product>(emptyProduct);
+    const [selectedProducts, setSelectedProducts] = useState<Product[]>([]);
+    const [submitted, setSubmitted] = useState<boolean>(false);
+    const [globalFilter, setGlobalFilter] = useState<string>('');
+    const toast = useRef<Toast>(null);
+    const dt = useRef<DataTable<Product[]>>(null);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []);
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const openNew = () => {
+        setProduct(emptyProduct);
+        setSubmitted(false);
+        setProductDialog(true);
+    };
+
+    const hideDialog = () => {
+        setSubmitted(false);
+        setProductDialog(false);
+    };
+
+    const hideDeleteProductDialog = () => {
+        setDeleteProductDialog(false);
+    };
+
+    const hideDeleteProductsDialog = () => {
+        setDeleteProductsDialog(false);
+    };
+
+    const saveProduct = () => {
+        setSubmitted(true);
+
+        if (product.name.trim()) {
+            let _products = [...products];
+            let _product = { ...product };
+
+            if (product.id) {
+                const index = findIndexById(product.id);
+
+                _products[index] = _product;
+                toast.current?.show({ severity: 'success', summary: 'Successful', detail: 'Product Updated', life: 3000 });
+            } else {
+                _product.id = createId();
+                _product.image = 'product-placeholder.svg';
+                _products.push(_product);
+                toast.current?.show({ severity: 'success', summary: 'Successful', detail: 'Product Created', life: 3000 });
+            }
+
+            setProducts(_products);
+            setProductDialog(false);
+            setProduct(emptyProduct);
+        }
+    };
+
+    const editProduct = (product: Product) => {
+        setProduct({ ...product });
+        setProductDialog(true);
+    };
+
+    const confirmDeleteProduct = (product: Product) => {
+        setProduct(product);
+        setDeleteProductDialog(true);
+    };
+
+    const deleteProduct = () => {
+        let _products = products.filter((val) => val.id !== product.id);
+
+        setProducts(_products);
+        setDeleteProductDialog(false);
+        setProduct(emptyProduct);
+        toast.current?.show({ severity: 'success', summary: 'Successful', detail: 'Product Deleted', life: 3000 });
+    };
+
+    const findIndexById = (id: string) => {
+        let index = -1;
+
+        for (let i = 0; i < products.length; i++) {
+            if (products[i].id === id) {
+                index = i;
+                break;
+            }
+        }
+
+        return index;
+    };
+
+    const createId = (): string => {
+        let id = '';
+        let chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < 5; i++) {
+            id += chars.charAt(Math.floor(Math.random() * chars.length));
+        }
+
+        return id;
+    };
+
+    const exportCSV = () => {
+        dt.current?.exportCSV();
+    };
+
+    const confirmDeleteSelected = () => {
+        setDeleteProductsDialog(true);
+    };
+
+    const deleteSelectedProducts = () => {
+        let _products = products.filter((val) => !selectedProducts.includes(val));
+
+        setProducts(_products);
+        setDeleteProductsDialog(false);
+        setSelectedProducts([]);
+        toast.current?.show({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
+    };
+
+    const onCategoryChange = (e: RadioButtonChangeEvent) => {
+        let _product = { ...product };
+
+        _product['category'] = e.value;
+        setProduct(_product);
+    };
+
+    const onInputChange = (e: React.ChangeEvent<HTMLInputElement>, name: string) => {
+        const val = (e.target && e.target.value) || '';
+        let _product = { ...product };
+
+        // @ts-ignore
+        _product[name] = val;
+
+        setProduct(_product);
+    };
+
+     const onInputTextAreaChange = (e: React.ChangeEvent<HTMLTextAreaElement>, name: string) => {
+        const val = (e.target && e.target.value) || '';
+        let _product = { ...product };
+
+        // @ts-ignore
+        _product[name] = val;
+
+        setProduct(_product);
+    };
+
+    const onInputNumberChange = (e: InputNumberValueChangeEvent, name: string) => {
+        const val = e.value ?? 0;
+        let _product = { ...product };
+
+        // @ts-ignore
+        _product[name] = val;
+
+        setProduct(_product);
+    };
+
+    const leftToolbarTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button label="New" icon="pi pi-plus" severity="success" onClick={openNew} />
+                <Button label="Delete" icon="pi pi-trash" severity="danger" onClick={confirmDeleteSelected} disabled={!selectedProducts || !selectedProducts.length} />
+            </div>
+        );
+    };
+
+    const rightToolbarTemplate = () => {
+        return <Button label="Export" icon="pi pi-upload" className="p-button-help" onClick={exportCSV} />;
+    };
+
+    const imageBodyTemplate = (rowData: Product) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image!} className="shadow-2 border-round" style={{ width: '64px' }} />;
+    };
+
+    const priceBodyTemplate = (rowData: Product) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const ratingBodyTemplate = (rowData: Product) => {
+        return <Rating value={rowData.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (rowData: Product) => {
+        return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData)}></Tag>;
+    };
+
+    const actionBodyTemplate = (rowData: Product) => {
+        return (
+            <React.Fragment>
+                <Button icon="pi pi-pencil" rounded outlined className="mr-2" onClick={() => editProduct(rowData)} />
+                <Button icon="pi pi-trash" rounded outlined severity="danger" onClick={() => confirmDeleteProduct(rowData)} />
+            </React.Fragment>
+        );
+    };
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const header = (
+        <div className="flex flex-wrap gap-2 align-items-center justify-content-between">
+            <h4 className="m-0">Manage Products</h4>
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search" />
+                 <InputText type="search" placeholder="Search..." onInput={(e) => {const target = e.target as HTMLInputElement; setGlobalFilter(target.value);}}  />
+            </IconField>
+        </div>
+    );
+    const productDialogFooter = (
+        <React.Fragment>
+            <Button label="Cancel" icon="pi pi-times" outlined onClick={hideDialog} />
+            <Button label="Save" icon="pi pi-check" onClick={saveProduct} />
+        </React.Fragment>
+    );
+    const deleteProductDialogFooter = (
+        <React.Fragment>
+            <Button label="No" icon="pi pi-times" outlined onClick={hideDeleteProductDialog} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" onClick={deleteProduct} />
+        </React.Fragment>
+    );
+    const deleteProductsDialogFooter = (
+        <React.Fragment>
+            <Button label="No" icon="pi pi-times" outlined onClick={hideDeleteProductsDialog} />
+            <Button label="Yes" icon="pi pi-check" severity="danger" onClick={deleteSelectedProducts} />
+        </React.Fragment>
+    );
+
+    return (
+        <div>
+            <Toast ref={toast} />
+            <div className="card">
+                <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+
+                <DataTable ref={dt} value={products} selection={selectedProducts} 
+                        onSelectionChange={(e) => {
+                            if (Array.isArray(e.value)) {
+                                setSelectedProducts(e.value);
+                            }
+                        }}
+                        dataKey="id"  paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" globalFilter={globalFilter} header={header}
+                        selectionMode="multiple"
+                >
+                    <Column selectionMode="multiple" exportable={false}></Column>
+                    <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }}></Column>
+                    <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }}></Column>
+                    <Column field="image" header="Image" body={imageBodyTemplate}></Column>
+                    <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ minWidth: '8rem' }}></Column>
+                    <Column field="category" header="Category" sortable style={{ minWidth: '10rem' }}></Column>
+                    <Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
+                    <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
+                    <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '12rem' }}></Column>
+                </DataTable>
+            </div>
+
+            <Dialog visible={productDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Product Details" modal className="p-fluid" footer={productDialogFooter} onHide={hideDialog}>
+                {product.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.image} className="product-image block m-auto pb-3" />}
+                <div className="field">
+                    <label htmlFor="name" className="font-bold">
+                        Name
+                    </label>
+                    <InputText id="name" value={product.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && !product.name })} />
+                    {submitted && !product.name && <small className="p-error">Name is required.</small>}
+                </div>
+                <div className="field">
+                    <label htmlFor="description" className="font-bold">
+                        Description
+                    </label>
+                    <InputTextarea id="description" value={product.description} onChange={(e:ChangeEvent<HTMLTextAreaElement>) => onInputTextAreaChange(e, 'description')} required rows={3} cols={20} />
+                </div>
+
+                <div className="field">
+                    <label className="mb-3 font-bold">Category</label>
+                    <div className="formgrid grid">
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category1" name="category" value="Accessories" onChange={onCategoryChange} checked={product.category === 'Accessories'} />
+                            <label htmlFor="category1">Accessories</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category2" name="category" value="Clothing" onChange={onCategoryChange} checked={product.category === 'Clothing'} />
+                            <label htmlFor="category2">Clothing</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category3" name="category" value="Electronics" onChange={onCategoryChange} checked={product.category === 'Electronics'} />
+                            <label htmlFor="category3">Electronics</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category4" name="category" value="Fitness" onChange={onCategoryChange} checked={product.category === 'Fitness'} />
+                            <label htmlFor="category4">Fitness</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="formgrid grid">
+                    <div className="field col">
+                        <label htmlFor="price" className="font-bold">
+                            Price
+                        </label>
+                        <InputNumber id="price" value={product.price} onValueChange={(e) => onInputNumberChange(e, 'price')} mode="currency" currency="USD" locale="en-US" />
+                    </div>
+                    <div className="field col">
+                        <label htmlFor="quantity" className="font-bold">
+                            Quantity
+                        </label>
+                        <InputNumber id="quantity" value={product.quantity} onValueChange={(e) => onInputNumberChange(e, 'quantity')} />
+                    </div>
+                </div>
+            </Dialog>
+
+            <Dialog visible={deleteProductDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Confirm" modal footer={deleteProductDialogFooter} onHide={hideDeleteProductDialog}>
+                <div className="confirmation-content">
+                    <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                    {product && (
+                        <span>
+                            Are you sure you want to delete <b>{product.name}</b>?
+                        </span>
+                    )}
+                </div>
+            </Dialog>
+
+            <Dialog visible={deleteProductsDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Confirm" modal footer={deleteProductsDialogFooter} onHide={hideDeleteProductsDialog}>
+                <div className="confirmation-content">
+                    <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                    {product && <span>Are you sure you want to delete the selected products?</span>}
+                </div>
+            </Dialog>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>CRUD implementation example with a Dialog.</p>
+            </DocSectionText>
+
+            <Toast ref={toast} />
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
+
+                    <DataTable
+                        ref={dt}
+                        value={products}
+                        selection={selectedProducts}
+                        onSelectionChange={(e) => setSelectedProducts(e.value)}
+                        dataKey="id"
+                        paginator
+                        rows={10}
+                        rowsPerPageOptions={[5, 10, 25]}
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
+                        globalFilter={globalFilter}
+                        header={header}
+                    >
+                        <Column selectionMode="multiple" exportable={false} />
+                        <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }} />
+                        <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }} />
+                        <Column field="image" header="Image" body={imageBodyTemplate} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ minWidth: '8rem' }} />
+                        <Column field="category" header="Category" sortable style={{ minWidth: '10rem' }} />
+                        <Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable style={{ minWidth: '12rem' }} />
+                        <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable style={{ minWidth: '12rem' }} />
+                        <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '12rem' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+
+            <Dialog visible={productDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Product Details" modal className="p-fluid" footer={productDialogFooter} onHide={hideDialog}>
+                {product.image && <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.image} className="product-image block m-auto pb-3" />}
+                <div className="field">
+                    <label htmlFor="name" className="font-bold">
+                        Name
+                    </label>
+                    <InputText id="name" value={product.name} onChange={(e) => onInputChange(e, 'name')} required autoFocus className={classNames({ 'p-invalid': submitted && !product.name })} />
+                    {submitted && !product.name && <small className="p-error">Name is required.</small>}
+                </div>
+                <div className="field">
+                    <label htmlFor="description" className="font-bold">
+                        Description
+                    </label>
+                    <InputTextarea id="description" value={product.description} onChange={(e) => onInputChange(e, 'description')} required rows={3} cols={20} />
+                </div>
+
+                <div className="field">
+                    <label className="mb-3 font-bold">Category</label>
+                    <div className="formgrid grid">
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category1" name="category" value="Accessories" onChange={onCategoryChange} checked={product.category === 'Accessories'} />
+                            <label htmlFor="category1">Accessories</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category2" name="category" value="Clothing" onChange={onCategoryChange} checked={product.category === 'Clothing'} />
+                            <label htmlFor="category2">Clothing</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category3" name="category" value="Electronics" onChange={onCategoryChange} checked={product.category === 'Electronics'} />
+                            <label htmlFor="category3">Electronics</label>
+                        </div>
+                        <div className="field-radiobutton col-6">
+                            <RadioButton inputId="category4" name="category" value="Fitness" onChange={onCategoryChange} checked={product.category === 'Fitness'} />
+                            <label htmlFor="category4">Fitness</label>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="formgrid grid">
+                    <div className="field col">
+                        <label htmlFor="price" className="font-bold">
+                            Price
+                        </label>
+                        <InputNumber id="price" value={product.price} onValueChange={(e) => onInputNumberChange(e, 'price')} mode="currency" currency="USD" locale="en-US" />
+                    </div>
+                    <div className="field col">
+                        <label htmlFor="quantity" className="font-bold">
+                            Quantity
+                        </label>
+                        <InputNumber id="quantity" value={product.quantity} onValueChange={(e) => onInputNumberChange(e, 'quantity')} />
+                    </div>
+                </div>
+            </Dialog>
+
+            <Dialog visible={deleteProductDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Confirm" modal footer={deleteProductDialogFooter} onHide={hideDeleteProductDialog}>
+                <div className="confirmation-content">
+                    <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                    {product && (
+                        <span>
+                            Are you sure you want to delete <b>{product.name}</b>?
+                        </span>
+                    )}
+                </div>
+            </Dialog>
+
+            <Dialog visible={deleteProductsDialog} style={{ width: '32rem' }} breakpoints={{ '960px': '75vw', '641px': '90vw' }} header="Confirm" modal footer={deleteProductsDialogFooter} onHide={hideDeleteProductsDialog}>
+                <div className="confirmation-content">
+                    <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                    {product && <span>Are you sure you want to delete the selected products?</span>}
+                </div>
+            </Dialog>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/scroll/flexibledoc.js b/components/doc/datatable/scroll/flexibledoc.js
new file mode 100644
index 0000000000..4a082a0ff4
--- /dev/null
+++ b/components/doc/datatable/scroll/flexibledoc.js
@@ -0,0 +1,168 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function FlexibleScrollDoc(props) {
+    const [customers, setCustomers] = useState([]);
+    const [dialogVisible, setDialogVisible] = useState(false);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const dialogFooterTemplate = () => {
+        return <Button label="Ok" icon="pi pi-check" onClick={() => setDialogVisible(false)} />;
+    };
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setDialogVisible(true)} />
+<Dialog header="Flex Scroll" visible={dialogVisible} style={{ width: '75vw' }} maximizable
+        modal contentStyle={{ height: '300px' }} onHide={() => setDialogVisible(false)} footer={dialogFooterTemplate}>
+    <DataTable value={customers} scrollable scrollHeight="flex" tableStyle={{ minWidth: '50rem' }}>
+        <Column field="name" header="Name"></Column>
+        <Column field="country.name" header="Country"></Column>
+        <Column field="representative.name" header="Representative"></Column>
+        <Column field="company" header="Company"></Column>
+    </DataTable>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { CustomerService } from './service/CustomerService';
+
+export default function FlexibleScrollDemo() {
+    const [customers, setCustomers] = useState([]);
+    const [dialogVisible, setDialogVisible] = useState(false);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    const dialogFooterTemplate = () => {
+        return <Button label="Ok" icon="pi pi-check" onClick={() => setDialogVisible(false)} />;
+    };
+
+    return (
+        <div className="card">
+        <Button label="Show" icon="pi pi-external-link" onClick={() => setDialogVisible(true)} />
+        <Dialog header="Flex Scroll" visible={dialogVisible} style={{ width: '75vw' }} maximizable
+                modal contentStyle={{ height: '300px' }} onHide={() => setDialogVisible(false)} footer={dialogFooterTemplate}>
+            <DataTable value={customers} scrollable scrollHeight="flex" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="company" header="Company"></Column>
+            </DataTable>
+        </Dialog>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { CustomerService } from './service/CustomerService';
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function FlexibleScrollDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [dialogVisible, setDialogVisible] = useState<boolean>(false);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    const dialogFooterTemplate = () => {
+        return <Button label="Ok" icon="pi pi-check" onClick={() => setDialogVisible(false)} />;
+    };
+
+    return (
+        <div className="card">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setDialogVisible(true)} />
+            <Dialog header="Flex Scroll" visible={dialogVisible} style={{ width: '75vw' }} maximizable
+                    modal contentStyle={{ height: '300px' }} onHide={() => setDialogVisible(false)} footer={dialogFooterTemplate}>
+                <DataTable value={customers} scrollable scrollHeight="flex" tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="country.name" header="Country"></Column>
+                    <Column field="representative.name" header="Representative"></Column>
+                    <Column field="company" header="Company"></Column>
+                </DataTable>
+            </Dialog>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data
+                    viewport adjusts itself according to the size changes.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card flex justify-content-center">
+                    <Button label="Show" icon="pi pi-external-link" onClick={() => setDialogVisible(true)} />
+                    <Dialog header="Flex Scroll" visible={dialogVisible} style={{ width: '75vw' }} maximizable modal contentStyle={{ height: '300px' }} onHide={() => setDialogVisible(false)} footer={dialogFooterTemplate}>
+                        <DataTable value={customers} scrollable scrollHeight="flex" tableStyle={{ minWidth: '50rem' }}>
+                            <Column field="name" header="Name" />
+                            <Column field="country.name" header="Country" />
+                            <Column field="representative.name" header="Representative" />
+                            <Column field="company" header="Company" />
+                        </DataTable>
+                    </Dialog>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/scroll/frozencolumnsdoc.js b/components/doc/datatable/scroll/frozencolumnsdoc.js
new file mode 100644
index 0000000000..17d13e4b6f
--- /dev/null
+++ b/components/doc/datatable/scroll/frozencolumnsdoc.js
@@ -0,0 +1,190 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
+import { useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+
+export function FrozenColumnsDoc(props) {
+    const [customers, setCustomers] = useState([]);
+    const [balanceFrozen, setBalanceFrozen] = useState(false);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersLarge().then((data) => setCustomers(data));
+    };
+
+    const balanceTemplate = (rowData) => {
+        return <span className="font-bold">{formatCurrency(rowData.balance)}</span>;
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const code = {
+        basic: `
+<ToggleButton checked={balanceFrozen} onChange={(e) => setBalanceFrozen(e.value)}
+    onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+<DataTable value={customers} scrollable scrollHeight="400px" className="mt-4">
+    <Column field="name" header="Name" style={{ minWidth: '200px' }} frozen className="font-bold"></Column>
+    <Column field="id" header="Id" style={{ minWidth: '100px' }}></Column>
+    <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+    <Column field="country.name" header="Country" style={{ minWidth: '200px' }}></Column>
+    <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
+    <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+    <Column field="status" header="Status" style={{ minWidth: '200px' }}></Column>
+    <Column field="activity" header="Activity" style={{ minWidth: '200px' }}></Column>
+    <Column field="representative.name" header="Representative" style={{ minWidth: '200px' }}></Column>
+    <Column field="balance" header="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} alignFrozen="right" frozen={balanceFrozen}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ToggleButton } from 'primereact/togglebutton';
+import { CustomerService } from './service/CustomerService';
+
+export default function FrozenColumnsDemo() {
+    const [customers, setCustomers] = useState([]);
+    const [balanceFrozen, setBalanceFrozen] = useState(false);
+
+    useEffect(() => {
+        CustomerService.getCustomersLarge().then((data) => setCustomers(data));
+    }, []);
+
+    const balanceTemplate = (rowData) => {
+        return <span className="font-bold">{formatCurrency(rowData.balance)}</span>;
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    return (
+        <div className="card">
+            <ToggleButton checked={balanceFrozen} onChange={(e) => setBalanceFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+            <DataTable value={customers} scrollable scrollHeight="400px" className="mt-4">
+                <Column field="name" header="Name" style={{ minWidth: '200px' }} frozen className="font-bold"></Column>
+                <Column field="id" header="Id" style={{ minWidth: '100px' }}></Column>
+                <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country.name" header="Country" style={{ minWidth: '200px' }}></Column>
+                <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
+                <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" style={{ minWidth: '200px' }}></Column>
+                <Column field="activity" header="Activity" style={{ minWidth: '200px' }}></Column>
+                <Column field="representative.name" header="Representative" style={{ minWidth: '200px' }}></Column>
+                <Column field="balance" header="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} alignFrozen="right" frozen={balanceFrozen}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ToggleButton } from 'primereact/togglebutton';
+import { CustomerService } from './service/CustomerService';
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function FrozenColumnsDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [balanceFrozen, setBalanceFrozen] = useState<boolean>(false);
+
+    useEffect(() => {
+        CustomerService.getCustomersLarge().then((data) => setCustomers(data));
+    }, []);
+
+    const balanceTemplate = (rowData: Customer) => {
+        return <span className="font-bold">{formatCurrency(rowData.balance)}</span>;
+    };
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    return (
+        <div className="card">
+            <ToggleButton checked={balanceFrozen} onChange={(e) => setBalanceFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+            <DataTable value={customers} scrollable scrollHeight="400px" className="mt-4">
+                <Column field="name" header="Name" style={{ minWidth: '200px' }} frozen className="font-bold"></Column>
+                <Column field="id" header="Id" style={{ minWidth: '100px' }}></Column>
+                <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country.name" header="Country" style={{ minWidth: '200px' }}></Column>
+                <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
+                <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" style={{ minWidth: '200px' }}></Column>
+                <Column field="activity" header="Activity" style={{ minWidth: '200px' }}></Column>
+                <Column field="representative.name" header="Representative" style={{ minWidth: '200px' }}></Column>
+                <Column field="balance" header="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} alignFrozen="right" frozen={balanceFrozen}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <ToggleButton checked={balanceFrozen} onChange={(e) => setBalanceFrozen(e.value)} onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
+                    <DataTable value={customers} scrollable scrollHeight="400px" className="mt-4">
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} frozen className="font-bold" />
+                        <Column field="id" header="Id" style={{ minWidth: '100px' }} />
+                        <Column field="name" header="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country.name" header="Country" style={{ minWidth: '200px' }} />
+                        <Column field="date" header="Date" style={{ minWidth: '200px' }} />
+                        <Column field="company" header="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" style={{ minWidth: '200px' }} />
+                        <Column field="activity" header="Activity" style={{ minWidth: '200px' }} />
+                        <Column field="representative.name" header="Representative" style={{ minWidth: '200px' }} />
+                        <Column field="balance" header="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} alignFrozen="right" frozen={balanceFrozen} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/scroll/frozenrowsdoc.js b/components/doc/datatable/scroll/frozenrowsdoc.js
new file mode 100644
index 0000000000..13f59a8091
--- /dev/null
+++ b/components/doc/datatable/scroll/frozenrowsdoc.js
@@ -0,0 +1,277 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function FrozenRowsDoc(props) {
+    const [customers, setCustomers] = useState([]);
+    const [lockedCustomers, setLockedCustomers] = useState([]);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+
+        setLockedCustomers([
+            {
+                id: 5135,
+                name: 'Geraldine Bisset',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Bisset Group',
+                status: 'proposal',
+                date: '2019-05-05',
+                activity: 0,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                }
+            }
+        ]);
+    };
+
+    const lockTemplate = (rowData, options) => {
+        const icon = options.frozenRow ? 'pi pi-lock' : 'pi pi-lock-open';
+        const disabled = options.frozenRow ? false : lockedCustomers.length >= 2;
+
+        return <Button type="button" icon={icon} disabled={disabled} className="p-button-sm p-button-text" onClick={() => toggleLock(rowData, options.frozenRow, options.rowIndex)} />;
+    };
+
+    const toggleLock = (data, frozen, index) => {
+        let _lockedCustomers;
+        let _unlockedCustomers;
+
+        if (frozen) {
+            _lockedCustomers = lockedCustomers.filter((c, i) => i !== index);
+            _unlockedCustomers = [...customers, data];
+        } else {
+            _unlockedCustomers = customers.filter((c, i) => i !== index);
+            _lockedCustomers = [...lockedCustomers, data];
+        }
+
+        _unlockedCustomers.sort((val1, val2) => {
+            return val1.id < val2.id ? -1 : 1;
+        });
+
+        setLockedCustomers(_lockedCustomers);
+        setCustomers(_unlockedCustomers);
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} frozenValue={lockedCustomers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name"></Column>
+    <Column field="country.name" header="Country"></Column>
+    <Column field="representative.name" header="Representative"></Column>
+    <Column field="status" header="Status"></Column>
+    <Column style={{ flex: '0 0 4rem' }} body={lockTemplate}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { CustomerService } from './service/CustomerService';
+
+export default function FrozenRowsDemo() {
+    const [customers, setCustomers] = useState([]);
+    const [lockedCustomers, setLockedCustomers] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+
+        setLockedCustomers([
+            {
+                id: 5135,
+                name: 'Geraldine Bisset',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Bisset Group',
+                status: 'proposal',
+                date: '2019-05-05',
+                activity: 0,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                }
+            }
+        ]);
+    }, []);
+
+    const lockTemplate = (rowData, options) => {
+        const icon = options.frozenRow ? 'pi pi-lock' : 'pi pi-lock-open';
+        const disabled = options.frozenRow ? false : lockedCustomers.length >= 2;
+
+        return <Button type="button" icon={icon} disabled={disabled} className="p-button-sm p-button-text" onClick={() => toggleLock(rowData, options.frozenRow, options.rowIndex)} />;
+    };
+
+    const toggleLock = (data, frozen, index) => {
+        let _lockedCustomers, _unlockedCustomers;
+
+        if (frozen) {
+            _lockedCustomers = lockedCustomers.filter((c, i) => i !== index);
+            _unlockedCustomers = [...customers, data];
+        } else {
+            _unlockedCustomers = customers.filter((c, i) => i !== index);
+            _lockedCustomers = [...lockedCustomers, data];
+        }
+
+        _unlockedCustomers.sort((val1, val2) => {
+            return val1.id < val2.id ? -1 : 1;
+        });
+
+        setLockedCustomers(_lockedCustomers);
+        setCustomers(_unlockedCustomers);
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} frozenValue={lockedCustomers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="status" header="Status"></Column>
+                <Column style={{ flex: '0 0 4rem' }} body={lockTemplate}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column, ColumnBodyOptions } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { CustomerService } from './service/CustomerService';
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function FrozenRowsDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+    const [lockedCustomers, setLockedCustomers] = useState<Customer[]>([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+
+        setLockedCustomers([
+            {
+                id: 5135,
+                name: 'Geraldine Bisset',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Bisset Group',
+                status: 'proposal',
+                date: '2019-05-05',
+                activity: 0,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                }
+            }
+        ]);
+    }, []);
+
+    const lockTemplate = (rowData: Customer, options: ColumnBodyOptions) => {
+        const icon = options.frozenRow ? 'pi pi-lock' : 'pi pi-lock-open';
+        const disabled = options.frozenRow ? false : lockedCustomers.length >= 2;
+
+        return <Button type="button" icon={icon} disabled={disabled} className="p-button-sm p-button-text" onClick={() => toggleLock(rowData, options.frozenRow, options.rowIndex)} />;
+    };
+
+    const toggleLock = (data: Customer, frozen: boolean, index: number) => {
+        let _lockedCustomers, _unlockedCustomers;
+
+        if (frozen) {
+            _lockedCustomers = lockedCustomers.filter((c, i) => i !== index);
+            _unlockedCustomers = [...customers, data];
+        } else {
+            _unlockedCustomers = customers.filter((c, i) => i !== index);
+            _lockedCustomers = [...lockedCustomers, data];
+        }
+
+        _unlockedCustomers.sort((val1, val2) => {
+            return val1.id < val2.id ? -1 : 1;
+        });
+
+        setLockedCustomers(_lockedCustomers);
+        setCustomers(_unlockedCustomers);
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={customers} frozenValue={lockedCustomers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="status" header="Status"></Column>
+                <Column style={{ flex: '0 0 4rem' }} body={lockTemplate}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Rows can be fixed during scrolling by enabling the <i>frozenValue</i> property.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={customers} frozenValue={lockedCustomers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="name" header="Name" />
+                        <Column field="country.name" header="Country" />
+                        <Column field="representative.name" header="Representative" />
+                        <Column field="status" header="Status" />
+                        <Column style={{ flex: '0 0 4rem' }} body={lockTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/scroll/horizontaldoc.js b/components/doc/datatable/scroll/horizontaldoc.js
new file mode 100644
index 0000000000..e0b8d76998
--- /dev/null
+++ b/components/doc/datatable/scroll/horizontaldoc.js
@@ -0,0 +1,173 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function HorizontalScrollDoc(props) {
+    const [customers, setCustomers] = useState([]);
+
+    const balanceTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} scrollable scrollHeight="400px">
+    <Column field="id" header="Id" footer="Id" style={{ minWidth: '100px' }}></Column>
+    <Column field="name" header="Name" footer="Name" style={{ minWidth: '200px' }}></Column>
+    <Column field="country.name" header="Country" footer="Country" style={{ minWidth: '200px' }}></Column>
+    <Column field="date" header="Date" footer="Date" style={{ minWidth: '200px' }}></Column>
+    <Column field="balance" header="Balance" footer="Balance" body={balanceTemplate} style={{ minWidth: '200px' }}></Column>
+    <Column field="company" header="Company" footer="Company" style={{ minWidth: '200px' }}></Column>
+    <Column field="status" header="Status" footer="Status" style={{ minWidth: '200px' }}></Column>
+    <Column field="activity" header="Activity" footer="Activity" style={{ minWidth: '200px' }}></Column>
+    <Column field="representative.name" header="Representative" footer="Representative" style={{ minWidth: '200px' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+export default function HorizontalScrollDemo() {
+    const [customers, setCustomers] = useState([]);
+
+    const balanceTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} scrollable scrollHeight="400px">
+                <Column field="id" header="Id" footer="Id" style={{ minWidth: '100px' }}></Column>
+                <Column field="name" header="Name" footer="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country.name" header="Country" footer="Country" style={{ minWidth: '200px' }}></Column>
+                <Column field="date" header="Date" footer="Date" style={{ minWidth: '200px' }}></Column>
+                <Column field="balance" header="Balance" footer="Balance" body={balanceTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="company" header="Company" footer="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" footer="Status" style={{ minWidth: '200px' }}></Column>
+                <Column field="activity" header="Activity" footer="Activity" style={{ minWidth: '200px' }}></Column>
+                <Column field="representative.name" header="Representative" footer="Representative" style={{ minWidth: '200px' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function HorizontalScrollDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+
+    const balanceTemplate = (rowData: Customer) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} scrollable scrollHeight="400px">
+                <Column field="id" header="Id" footer="Id" style={{ minWidth: '100px' }}></Column>
+                <Column field="name" header="Name" footer="Name" style={{ minWidth: '200px' }}></Column>
+                <Column field="country.name" header="Country" footer="Country" style={{ minWidth: '200px' }}></Column>
+                <Column field="date" header="Date" footer="Date" style={{ minWidth: '200px' }}></Column>
+                <Column field="balance" header="Balance" footer="Balance" body={balanceTemplate} style={{ minWidth: '200px' }}></Column>
+                <Column field="company" header="Company" footer="Company" style={{ minWidth: '200px' }}></Column>
+                <Column field="status" header="Status" footer="Status" style={{ minWidth: '200px' }}></Column>
+                <Column field="activity" header="Activity" footer="Activity" style={{ minWidth: '200px' }}></Column>
+                <Column field="representative.name" header="Representative" footer="Representative" style={{ minWidth: '200px' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Horizontal scrollbar is displayed when table width exceeds the parent width.</p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={customers} scrollable scrollHeight="400px">
+                        <Column field="id" header="Id" footer="Id" style={{ minWidth: '100px' }} />
+                        <Column field="name" header="Name" footer="Name" style={{ minWidth: '200px' }} />
+                        <Column field="country.name" header="Country" footer="Country" style={{ minWidth: '200px' }} />
+                        <Column field="date" header="Date" footer="Date" style={{ minWidth: '200px' }} />
+                        <Column field="balance" header="Balance" footer="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} />
+                        <Column field="company" header="Company" footer="Company" style={{ minWidth: '200px' }} />
+                        <Column field="status" header="Status" footer="Status" style={{ minWidth: '200px' }} />
+                        <Column field="activity" header="Activity" footer="Activity" style={{ minWidth: '200px' }} />
+                        <Column field="representative.name" header="Representative" footer="Representative" style={{ minWidth: '200px' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/scroll/verticaldoc.js b/components/doc/datatable/scroll/verticaldoc.js
new file mode 100644
index 0000000000..23044059a7
--- /dev/null
+++ b/components/doc/datatable/scroll/verticaldoc.js
@@ -0,0 +1,131 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../../service/CustomerService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function VerticalScrollDoc(props) {
+    const [customers, setCustomers] = useState([]);
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={customers} scrollable scrollHeight="400px" style={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name"></Column>
+    <Column field="country.name" header="Country"></Column>
+    <Column field="representative.name" header="Representative"></Column>
+    <Column field="company" header="Company"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+export default function VerticalScrollDemo() {
+    const [customers, setCustomers] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} scrollable scrollHeight="400px" style={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="company" header="Company"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CustomerService } from './service/CustomerService';
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function VerticalScrollDemo() {
+    const [customers, setCustomers] = useState<Customer[]>([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => setCustomers(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={customers} scrollable scrollHeight="400px" style={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name"></Column>
+                <Column field="country.name" header="Country"></Column>
+                <Column field="representative.name" header="Representative"></Column>
+                <Column field="company" header="Company"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={customers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="name" header="Name" />
+                        <Column field="country.name" header="Country" />
+                        <Column field="representative.name" header="Representative" />
+                        <Column field="company" header="Company" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/sizedoc.js b/components/doc/datatable/sizedoc.js
new file mode 100644
index 0000000000..20a74d113b
--- /dev/null
+++ b/components/doc/datatable/sizedoc.js
@@ -0,0 +1,159 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function SizeDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [sizeOptions] = useState([
+        { label: 'Small', value: 'small' },
+        { label: 'Normal', value: 'normal' },
+        { label: 'Large', value: 'large' }
+    ]);
+    const [size, setSize] = useState(sizeOptions[1].value);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<SelectButton value={size} onChange={(e) => setSize(e.value)} options={sizeOptions} />
+<DataTable value={products} size={size} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { SelectButton } from 'primereact/selectbutton';
+import { ProductService } from './service/ProductService';
+
+export default function SizeDemo() {
+    const [products, setProducts] = useState([]);
+    const [sizeOptions] = useState([
+        { label: 'Small', value: 'small' },
+        { label: 'Normal', value: 'normal' },
+        { label: 'Large', value: 'large' }
+    ]);
+    const [size, setSize] = useState(sizeOptions[1].value);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center mb-4">
+                <SelectButton value={size} onChange={(e) => setSize(e.value)} options={sizeOptions} />
+            </div>
+            <DataTable value={products} size={size} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+interface SizeOption {
+    label: string;
+    value: string;
+}
+
+export default function SizeDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [sizeOptions] = useState<SizeOption[]>([
+        { label: 'Small', value: 'small' },
+        { label: 'Normal', value: 'normal' },
+        { label: 'Large', value: 'large' }
+    ]);
+    const [size, setSize] = useState<string>(sizeOptions[1].value);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center mb-4">
+                <SelectButton value={size} onChange={(e: SelectButtonChangeEvent) => setSize(e.value)} options={sizeOptions} />
+            </div>
+            <DataTable value={products} size={size} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+            `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <div className="flex justify-content-center mb-4">
+                        <SelectButton value={size} onChange={(e) => setSize(e.value)} options={sizeOptions} />
+                    </div>
+                    <DataTable value={products} size={size} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/sort/multiplecolumnsdoc.js b/components/doc/datatable/sort/multiplecolumnsdoc.js
new file mode 100644
index 0000000000..93a3284b58
--- /dev/null
+++ b/components/doc/datatable/sort/multiplecolumnsdoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function MultipleColumnsDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+    <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+    <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+    <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function MultipleColumnsDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function MultipleColumnsDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" sortable style={{ width: '25%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '25%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '25%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/sort/presortdoc.js b/components/doc/datatable/sort/presortdoc.js
new file mode 100644
index 0000000000..9aea500d15
--- /dev/null
+++ b/components/doc/datatable/sort/presortdoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function PresortDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const priceBodyTemplate = (product) => {
+        return formatCurrency(product.price);
+    };
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} sortField="price" sortOrder={-1} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code" sortable style={{ width: '20%' }}></Column>
+    <Column field="name" header="Name" sortable style={{ width: '20%' }}></Column>
+    <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ width: '20%' }}></Column>
+    <Column field="category" header="Category" sortable style={{ width: '20%' }}></Column>
+    <Column field="quantity" header="Quantity" sortable style={{ width: '20%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function PresortDemo() {
+    const [products, setProducts] = useState([]);
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const priceBodyTemplate = (product) => {
+        return formatCurrency(product.price);
+    };
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} sortField="price" sortOrder={-1} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '20%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '20%' }}></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ width: '20%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '20%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function PresortDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const priceBodyTemplate = (product: Product) => {
+        return formatCurrency(product.price);
+    };
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} sortField="price" sortOrder={-1} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '20%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '20%' }}></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ width: '20%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '20%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Defining a default <i>sortField</i> and <i>sortOrder</i> displays data as sorted initially in single column sorting. In <i>multiple</i> sort mode,
+                    <i>multiSortMeta</i> should be used instead by providing an array of <i>DataTableSortMeta</i> objects.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} sortField="price" sortOrder={-1} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" sortable style={{ width: '20%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '20%' }} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ width: '20%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '20%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '20%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/sort/removablesortdoc.js b/components/doc/datatable/sort/removablesortdoc.js
new file mode 100644
index 0000000000..264f42af62
--- /dev/null
+++ b/components/doc/datatable/sort/removablesortdoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function RemovableSortDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} removableSort tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+    <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+    <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+    <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function RemovableSortDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} removableSort tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function RemovableSortDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} removableSort tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>removableSort</i> is present, the third click removes the sorting from the column.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} removableSort tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" sortable style={{ width: '25%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '25%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '25%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/sort/singlecolumndoc.js b/components/doc/datatable/sort/singlecolumndoc.js
new file mode 100644
index 0000000000..2ae31dedcd
--- /dev/null
+++ b/components/doc/datatable/sort/singlecolumndoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useState } from 'react';
+import { ProductService } from '../../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function SingleColumnDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+    <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+    <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+    <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function SingleColumnDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function SingleColumnDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
+                <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
+                <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
+                <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Sorting on a column is enabled by adding the <i>sortable</i> property.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" sortable style={{ width: '25%' }} />
+                        <Column field="name" header="Name" sortable style={{ width: '25%' }} />
+                        <Column field="category" header="Category" sortable style={{ width: '25%' }} />
+                        <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/statefuldoc.js b/components/doc/datatable/statefuldoc.js
new file mode 100644
index 0000000000..5d36a08401
--- /dev/null
+++ b/components/doc/datatable/statefuldoc.js
@@ -0,0 +1,519 @@
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FilterMatchMode, FilterOperator } from '@/components/lib/api/Api';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useState } from 'react';
+import { CustomerService } from '../../../service/CustomerService';
+
+export function StatefulDoc(props) {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+    });
+
+    const [selectedCustomer, setSelectedCustomer] = useState(null);
+    const representatives = [
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ];
+    const statuses = ['unqualified', 'qualified', 'new', 'negotiation', 'renewal'];
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const loadDemoData = () => {
+        CustomerService.getCustomersSmall().then((data) => setCustomers(data));
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.code} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${representative.image}`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options) => {
+        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${option.image}`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const onGlobalFilterChange = (event) => {
+        const value = event.target.value;
+        let _filters = { ...filters };
+
+        _filters.global.value = value;
+
+        setFilters(_filters);
+    };
+
+    const renderHeader = () => {
+        const value = filters.global ? filters.global.value : '';
+
+        return (
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search" />
+                <InputText type="search" value={value || ''} onChange={(e) => onGlobalFilterChange(e)} placeholder="Global Search" />
+            </IconField>
+        );
+    };
+
+    const header = renderHeader();
+
+    const code = {
+        basic: `
+<DataTable value={customers} paginator rows={5} header={header} filters={filters} onFilter={(e) => setFilters(e.filters)}
+        selection={selectedCustomer} onSelectionChange={(e) => setSelectedCustomer(e.value)} selectionMode="single" dataKey="id"
+        stateStorage="session" stateKey="dt-state-demo-local" emptyMessage="No customers found." tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '25%' }}></Column>
+    <Column header="Country" body={countryBodyTemplate} sortable sortField="country.name" filter filterField="country.name" filterPlaceholder="Search" style={{ width: '25%' }}></Column>
+    <Column header="Agent" body={representativeBodyTemplate} sortable sortField="representative.name" filter filterField="representative"
+        showFilterMatchModes={false} filterElement={representativeFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }} ></Column>
+    <Column field="status" header="Status" body={statusBodyTemplate} sortable filter filterElement={statusFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { MultiSelect } from 'primereact/multiselect';
+import { Dropdown } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+export default function BasicDemo() {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+    });
+
+    const [selectedCustomer, setSelectedCustomer] = useState(null);
+    const representatives = [
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ];
+    const statuses = ['unqualified', 'qualified', 'new', 'negotiation', 'renewal'];
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then((data) => setCustomers(data));
+    }, []);
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.code} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options) => {
+        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const onGlobalFilterChange = (event) => {
+        const value = event.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+    };
+
+    const renderHeader = () => {
+        const value = filters['global'] ? filters['global'].value : '';
+
+        return (
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search" />
+                <InputText type="search" value={value || ''} onChange={(e) => onGlobalFilterChange(e)} placeholder="Global Search" />
+            </IconField>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={5} header={header} filters={filters} onFilter={(e) => setFilters(e.filters)}
+                    selection={selectedCustomer} onSelectionChange={(e) => setSelectedCustomer(e.value)} selectionMode="single" dataKey="id"
+                    stateStorage="session" stateKey="dt-state-demo-local" emptyMessage="No customers found." tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '25%' }}></Column>
+                <Column header="Country" body={countryBodyTemplate} sortable sortField="country.name" filter filterField="country.name" filterPlaceholder="Search" style={{ width: '25%' }}></Column>
+                <Column header="Agent" body={representativeBodyTemplate} sortable sortField="representative.name" filter filterField="representative"
+                    showFilterMatchModes={false} filterElement={representativeFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }} ></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} sortable filter filterElement={statusFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable, DataTableFilterMeta } from 'primereact/datatable';
+import { Column, ColumnFilterElementTemplateOptions } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { Tag } from 'primereact/tag';
+import { CustomerService } from './service/CustomerService';
+
+interface RepresentativeOption {
+    name: string;
+    image: string;
+}
+
+interface Customer {
+    id: number;
+    name: string;
+    country: Country;
+    company: string;
+    date: string;
+    status: string;
+    verified: boolean;
+    activity: number;
+    representative: Representative;
+    balance: number;
+}
+
+export default function BasicDemo() {
+    const [customers, setCustomers] = useState<Customer[] | null>(null);
+    const [filters, setFilters] = useState<DataTableFilterMeta>({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+    });
+
+    const [selectedCustomer, setSelectedCustomer] = useState<Customer | null>(null);
+    const representatives: RepresentativeOption[] = [
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ];
+    const statuses: string[] = ['unqualified', 'qualified', 'new', 'negotiation', 'renewal'];
+
+    const getSeverity = (status: string) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then((data) => setCustomers(data));
+    }, []);
+
+    const countryBodyTemplate = (rowData: Customer) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.country.code} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData: Customer) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e: MultiSelectChangeEvent) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
+    };
+
+    const representativesItemTemplate = (option: RepresentativeOption) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const statusBodyTemplate = (rowData: Customer) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options: ColumnFilterElementTemplateOptions) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e: DropdownChangeEvent) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option: string) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const onGlobalFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const value = event.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+    };
+
+    const renderHeader = () => {
+        const value = filters['global'] ? filters['global'].value : '';
+
+        return (
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search" />
+                <InputText type="search" value={value || ''} onChange={(e) => onGlobalFilterChange(e)} placeholder="Global Search" />
+            </IconField>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator rows={5} header={header} filters={filters} onFilter={(e) => setFilters(e.filters)}
+                    selection={selectedCustomer} onSelectionChange={(e) => setSelectedCustomer(e.value)} selectionMode="single" dataKey="id"
+                    stateStorage="session" stateKey="dt-state-demo-local" emptyMessage="No customers found." tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '25%' }}></Column>
+                <Column header="Country" body={countryBodyTemplate} sortable sortField="country.name" filter filterField="country.name" filterPlaceholder="Search" style={{ width: '25%' }}></Column>
+                <Column header="Agent" body={representativeBodyTemplate} sortable sortField="representative.name" filter filterField="representative"
+                    showFilterMatchModes={false} filterElement={representativeFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }} ></Column>
+                <Column field="status" header="Status" body={statusBodyTemplate} sortable filter filterElement={statusFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+/* CustomerService */
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.</p>
+                <p>
+                    Change the state of the table e.g paginate, navigate away and then return to this table again to test this feature, the setting is set as <i>session</i> with the <i>stateStorage</i> property so that Table retains the state until
+                    the browser is closed. Other alternative is <i>local</i> referring to <i>localStorage</i> for an extended lifetime.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        rows={5}
+                        header={header}
+                        filters={filters}
+                        onFilter={(e) => setFilters(e.filters)}
+                        selection={selectedCustomer}
+                        onSelectionChange={(e) => setSelectedCustomer(e.value)}
+                        selectionMode="single"
+                        dataKey="id"
+                        stateStorage="session"
+                        stateKey="dt-state-demo-local"
+                        emptyMessage="No customers found."
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '25%' }} />
+                        <Column header="Country" body={countryBodyTemplate} sortable sortField="country.name" filter filterField="country.name" filterPlaceholder="Search" style={{ width: '25%' }} />
+                        <Column
+                            header="Agent"
+                            body={representativeBodyTemplate}
+                            sortable
+                            sortField="representative.name"
+                            filter
+                            filterField="representative"
+                            showFilterMatchModes={false}
+                            filterElement={representativeFilterTemplate}
+                            filterMenuStyle={{ width: '14rem' }}
+                            style={{ width: '25%' }}
+                        />
+                        <Column field="status" header="Status" body={statusBodyTemplate} sortable filter filterElement={statusFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/stripedrowsdoc.js b/components/doc/datatable/stripedrowsdoc.js
new file mode 100644
index 0000000000..730f3612a8
--- /dev/null
+++ b/components/doc/datatable/stripedrowsdoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function StripedRowsDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={products} stripedRows tableStyle={{ minWidth: '50rem' }}>
+    <Column field="code" header="Code"></Column>
+    <Column field="name" header="Name"></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="quantity" header="Quantity"></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function StripedRowsDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} stripedRows tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function StripedRowsDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then(data => setProducts(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <DataTable value={products} stripedRows tableStyle={{ minWidth: '50rem' }}>
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Alternating rows are displayed when <i>stripedRows</i> property is present.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} stripedRows tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/styledoc.js b/components/doc/datatable/styledoc.js
new file mode 100644
index 0000000000..6516422a5d
--- /dev/null
+++ b/components/doc/datatable/styledoc.js
@@ -0,0 +1,106 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-datatable</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-scrollable</td>
+                            <td>Container element when table is scrollable.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-wrapper</td>
+                            <td>Wrapper of table element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-table</td>
+                            <td>Table element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-thead</td>
+                            <td>Table thead element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-tbody</td>
+                            <td>Table tbody element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-tfoot</td>
+                            <td>Table tfoot element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-column-title</td>
+                            <td>Title of a column.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sortable-column</td>
+                            <td>Sortable column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-frozen-column</td>
+                            <td>Frozen column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rowgroup-header</td>
+                            <td>Header of a rowgroup.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rowgroup-footer</td>
+                            <td>Footer of a rowgroup.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-row-expansion</td>
+                            <td>Expanded row content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-toggler</td>
+                            <td>Toggle element for row expansion.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-emptymessage</td>
+                            <td>Cell containing the empty message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Pencil button of row editor.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Save button of row editor.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Cancel button of row editor.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/datatable/templatedoc.js b/components/doc/datatable/templatedoc.js
new file mode 100644
index 0000000000..b4a6bfcabe
--- /dev/null
+++ b/components/doc/datatable/templatedoc.js
@@ -0,0 +1,274 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function TemplateDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const loadDemoData = () => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const imageBodyTemplate = (product) => {
+        return <img src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.image} className="w-6rem shadow-2 border-round" />;
+    };
+
+    const priceBodyTemplate = (product) => {
+        return formatCurrency(product.price);
+    };
+
+    const ratingBodyTemplate = (product) => {
+        return <Rating value={product.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (product) => {
+        return <Tag value={product.inventoryStatus} severity={getSeverity(product)} />;
+    };
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const header = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+            <span className="text-xl text-900 font-bold">Products</span>
+            <Button icon="pi pi-refresh" rounded raised />
+        </div>
+    );
+    const footer = `In total there are ${products ? products.length : 0} products.`;
+
+    const code = {
+        basic: `
+<DataTable value={products} header={header} footer={footer} tableStyle={{ minWidth: '60rem' }}>
+    <Column field="name" header="Name"></Column>
+    <Column header="Image" body={imageBodyTemplate}></Column>
+    <Column field="price" header="Price" body={priceBodyTemplate}></Column>
+    <Column field="category" header="Category"></Column>
+    <Column field="rating" header="Reviews" body={ratingBodyTemplate}></Column>
+    <Column header="Status" body={statusBodyTemplate}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+export default function TemplateDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const imageBodyTemplate = (product) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.image} className="w-6rem shadow-2 border-round" />;
+    };
+
+    const priceBodyTemplate = (product) => {
+        return formatCurrency(product.price);
+    };
+
+    const ratingBodyTemplate = (product) => {
+        return <Rating value={product.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (product) => {
+        return <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>;
+    };
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const header = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+            <span className="text-xl text-900 font-bold">Products</span>
+            <Button icon="pi pi-refresh" rounded raised />
+        </div>
+    );
+    const footer = \`In total there are \${products ? products.length : 0} products.\`;
+
+    return (
+        <div className="card">
+            <DataTable value={products} header={header} footer={footer} tableStyle={{ minWidth: '60rem' }}>
+                <Column field="name" header="Name"></Column>
+                <Column header="Image" body={imageBodyTemplate}></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate}></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="rating" header="Reviews" body={ratingBodyTemplate}></Column>
+                <Column header="Status" body={statusBodyTemplate}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function TemplateDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsMini().then((data) => setProducts(data));
+    }, []);
+
+    const formatCurrency = (value: number) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const imageBodyTemplate = (product: Product) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.image} className="w-6rem shadow-2 border-round" />;
+    };
+
+    const priceBodyTemplate = (product: Product) => {
+        return formatCurrency(product.price);
+    };
+
+    const ratingBodyTemplate = (product: Product) => {
+        return <Rating value={product.rating} readOnly cancel={false} />;
+    };
+
+    const statusBodyTemplate = (product: Product) => {
+        return <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>;
+    };
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const header = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+            <span className="text-xl text-900 font-bold">Products</span>
+            <Button icon="pi pi-refresh" rounded raised />
+        </div>
+    );
+    const footer = \`In total there are \${products ? products.length : 0} products.\`;
+
+    return (
+        <div className="card">
+            <DataTable value={products} header={header} footer={footer} tableStyle={{ minWidth: '60rem' }}>
+                <Column field="name" header="Name"></Column>
+                <Column header="Image" body={imageBodyTemplate}></Column>
+                <Column field="price" header="Price" body={priceBodyTemplate}></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="rating" header="Reviews" body={ratingBodyTemplate}></Column>
+                <Column header="Status" body={statusBodyTemplate}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content at <i>header</i>, <i>body</i> and <i>footer</i> sections are supported via templating.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={products} header={header} footer={footer} tableStyle={{ minWidth: '60rem' }}>
+                        <Column field="name" header="Name" />
+                        <Column header="Image" body={imageBodyTemplate} />
+                        <Column field="price" header="Price" body={priceBodyTemplate} />
+                        <Column field="category" header="Category" />
+                        <Column field="rating" header="Reviews" body={ratingBodyTemplate} />
+                        <Column header="Status" body={statusBodyTemplate} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/theming/styleddoc.js b/components/doc/datatable/theming/styleddoc.js
new file mode 100644
index 0000000000..5b95cbf01e
--- /dev/null
+++ b/components/doc/datatable/theming/styleddoc.js
@@ -0,0 +1,103 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-datatable</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-scrollable</td>
+                            <td>Container element when table is scrollable.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-wrapper</td>
+                            <td>Wrapper of table element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-table</td>
+                            <td>Table element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-thead</td>
+                            <td>Table thead element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-tbody</td>
+                            <td>Table tbody element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-tfoot</td>
+                            <td>Table tfoot element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-column-title</td>
+                            <td>Title of a column.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sortable-column</td>
+                            <td>Sortable column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-frozen-column</td>
+                            <td>Frozen column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rowgroup-header</td>
+                            <td>Header of a rowgroup.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rowgroup-footer</td>
+                            <td>Footer of a rowgroup.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-row-expansion</td>
+                            <td>Expanded row content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-toggler</td>
+                            <td>Toggle element for row expansion.</td>
+                        </tr>
+                        <tr>
+                            <td>p-datatable-emptymessage</td>
+                            <td>Cell containing the empty message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Pencil button of row editor.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Save button of row editor.</td>
+                        </tr>
+                        <tr>
+                            <td>p-row-editor-init</td>
+                            <td>Cancel button of row editor.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/datatable/theming/tailwinddoc.js b/components/doc/datatable/theming/tailwinddoc.js
new file mode 100644
index 0000000000..bb36e0714e
--- /dev/null
+++ b/components/doc/datatable/theming/tailwinddoc.js
@@ -0,0 +1,593 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {
+    datatable: {
+        root: ({ props }) => ({
+            className: classNames('relative', {
+                'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex'
+            })
+        }),
+        loadingoverlay: {
+            className: classNames(
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            )
+        },
+        loadingicon: 'w-8 h-8',
+        wrapper: ({ props }) => ({
+            className: classNames({
+                relative: props.scrollable,
+                'flex flex-col grow h-full': props.scrollable && props.scrollHeight === 'flex'
+            })
+        }),
+        header: ({ props }) => ({
+            className: classNames(
+                'bg-slate-50 text-slate-700 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0'
+            )
+        }),
+        table: 'w-full border-spacing-0',
+        thead: ({ context }) => ({
+            className: classNames({
+                'bg-slate-50 top-0 z-[1]': context.scrollable
+            })
+        }),
+        tbody: ({ props, context }) => ({
+            className: classNames({
+                'sticky z-[1]': props.frozenRow && context.scrollable
+            })
+        }),
+        tfoot: ({ context }) => ({
+            className: classNames({
+                'bg-slate-50 bottom-0 z-[1]': context.scrollable
+            })
+        }),
+        footer: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+            )
+        },
+        column: {
+            headercell: ({ context, props }) => ({
+                className: classNames(
+                    'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
+                    context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
+                        'border-x border-y': context?.showGridlines,
+                        'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
+                    }
+                )
+            }),
+            headercontent: 'flex items-center',
+            bodycell: ({ props, context }) => ({
+                className: classNames(
+                    'text-left border-0 border-b border-solid border-gray-300',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'sticky bg-inherit': props && (props.frozen || props.frozen === ''), // Frozen Columns
+                        'border-x border-y': context.showGridlines
+                    }
+                )
+            }),
+            footercell: ({ context }) => ({
+                className: classNames(
+                    'text-left border-0 border-b border-solid border-gray-300 font-bold',
+                    'bg-slate-50 text-slate-700',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'border-x border-y': context.showGridlines
+                    }
+                )
+            }),
+            sorticon: ({ context }) => ({
+                className: classNames('ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70')
+            }),
+            sortbadge: {
+                className: classNames(
+                    'flex items-center justify-center align-middle',
+                    'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2',
+                    'text-blue-700 bg-blue-50',
+                    'dark:text-white/80 dark:bg-blue-400' // Dark Mode
+                )
+            },
+            columnfilter: 'inline-flex items-center ml-auto',
+            filteroverlay: {
+                className: classNames(
+                    'bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //Dark Mode
+                )
+            },
+            filtermatchmodedropdown: {
+                root: 'min-[0px]:flex mb-2'
+            },
+            filterrowitems: 'm-0 p-0 py-3 list-none ',
+            filterrowitem: ({ context }) => ({
+                className: classNames(
+                    'm-0 py-3 px-5 bg-transparent',
+                    'transition duration-200',
+                    context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent'
+                )
+            }),
+            filteroperator: {
+                className: classNames(
+                    'px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md',
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+                )
+            },
+            filteroperatordropdown: {
+                root: 'min-[0px]:flex'
+            },
+            filterconstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
+            filteraddrule: 'py-3 px-5',
+            filteraddrulebutton: {
+                root: 'justify-center w-full min-[0px]:text-sm',
+                label: 'flex-auto grow-0',
+                icon: 'mr-2'
+            },
+            filterremovebutton: {
+                root: 'ml-2',
+                label: 'grow-0'
+            },
+            filterbuttonbar: 'flex items-center justify-between p-5',
+            filterclearbutton: {
+                root: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
+            },
+            filterapplybutton: {
+                root: 'w-auto min-[0px]:text-sm px-4 py-3'
+            },
+            filtermenubutton: ({ context }) => ({
+                className: classNames(
+                    'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2',
+                    'w-8 h-8 rounded-[50%]',
+                    'transition duration-200',
+                    'hover:text-slate-700 hover:bg-gray-300/20', // Hover
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                    'dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'bg-blue-50 text-blue-700': context.active
+                    }
+                )
+            }),
+            headerfilterclearbutton: ({ context }) => ({
+                className: classNames('inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative', 'text-left bg-transparent m-0 p-0 border-none select-none ml-2', {
+                    invisible: !context.hidden
+                })
+            }),
+            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            rowreordericon: 'cursor-move',
+            roweditorinitbutton: {
+                className: classNames(
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                )
+            },
+            roweditorsavebutton: {
+                className: classNames(
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                )
+            },
+            roweditorcancelbutton: {
+                className: classNames(
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                )
+            },
+            radioButton: {
+                className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6')
+            },
+            radioButtonInput: {
+                className: classNames(
+                    'w-full h-full top-0 left-0 absolute appearance-none select-none',
+                    'p-0 m-0 opacity-0 z-[1] rounded-[50%] outline-none',
+                    'cursor-pointer peer'
+                )
+            },
+            radioButtonBox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'h-6 w-6 rounded-full border-2 text-gray-700 transition duration-200 ease-in-out',
+                    context.checked
+                        ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400 peer-hover:bg-blue-700 peer-hover:border-blue-700'
+                        : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 peer-hover:border-blue-500',
+                    {
+                        'hover:border-blue-500 focus:shadow-input-focus focus:outline-none focus:outline-offset-0 dark:hover:border-blue-400 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled,
+                    },
+                ),
+            }),
+            radioButtonIcon: ({ context }) => ({
+                className: classNames(
+                    'transform rounded-full',
+                    'block h-3 w-3 bg-white transition duration-200 dark:bg-gray-900',
+                    {
+                        'backface-hidden scale-10 invisible': context.checked === false,
+                        'visible scale-100 transform': context.checked === true,
+                    },
+                ),
+            }),
+            headercheckboxwrapper: {
+                className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+            },
+            headercheckbox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                )
+            }),
+            headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
+            checkboxwrapper: {
+                className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+            },
+            checkbox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                )
+            }),
+            checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
+            transition: TRANSITIONS.overlay
+        },
+        bodyrow: ({ context }) => ({
+            className: classNames(
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
+                context.stripedRows ? (context.index % 2 === 0 ? 'bg-white text-gray-600 dark:bg-gray-900' : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950') : '',
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                'dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]', // Dark Mode
+                {
+                    'cursor-pointer': context.selectable,
+                    'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected // Hover
+                }
+            )
+        }),
+        rowexpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+        rowgroupheader: {
+            className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
+        },
+        rowgroupfooter: {
+            className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
+        },
+        rowgrouptoggler: {
+            className: classNames(
+                'text-left m-0 p-0 cursor-pointer select-none',
+                'inline-flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]',
+                'transition duration-200',
+                'dark:text-white/70' // Dark Mode
+            )
+        },
+        rowgrouptogglericon: 'inline-block w-4 h-4',
+        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { classNames } from 'primereact/utils';
+import { FilterMatchMode, FilterOperator } from 'primereact/api';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { Button } from 'primereact/button';
+import { ProgressBar } from 'primereact/progressbar';
+import { Calendar } from 'primereact/calendar';
+import { MultiSelect } from 'primereact/multiselect';
+import { Slider } from 'primereact/slider';
+import { Tag } from 'primereact/tag';
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+import { CustomerService } from './service/CustomerService';
+
+export default function UnstyledDemo() {
+    const [customers, setCustomers] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [representatives] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Anna Fali', image: 'annafali.png' },
+        { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+        { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+        { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' },
+        { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+        { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+    ]);
+    const [statuses] = useState(['unqualified', 'qualified', 'new', 'negotiation', 'renewal']);
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersMedium().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+        initFilters();
+    }, []);
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const clearFilter = () => {
+        initFilters();
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters['global'].value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const initFilters = () => {
+        setFilters({
+            global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+            name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+            representative: { value: null, matchMode: FilterMatchMode.IN },
+            date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+            balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+            activity: { value: null, matchMode: FilterMatchMode.BETWEEN },
+            verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+        });
+        setGlobalFilterValue('');
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex justify-between">
+                <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined onClick={clearFilter} />
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Keyword Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${rowData.country.code}\`} style={{ width: '24px' }} />
+                <span>{rowData.country.name}</span>
+            </div>
+        );
+    };
+
+    const filterClearTemplate = (options) => {
+        return <Button type="button" icon="pi pi-times" onClick={options.filterClearCallback} severity="secondary"></Button>;
+    };
+
+    const filterApplyTemplate = (options) => {
+        return <Button type="button" icon="pi pi-check" onClick={options.filterApplyCallback} severity="success"></Button>;
+    };
+
+    const filterFooterTemplate = () => {
+        return <div className="px-3 pt-0 pb-3 text-center">Filter by Country</div>;
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={representative.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${representative.image}\`} width="32" />
+                <span>{representative.name}</span>
+            </div>
+        );
+    };
+
+    const representativeFilterTemplate = (options) => {
+        return <MultiSelect value={options.value} options={representatives} itemTemplate={representativesItemTemplate} onChange={(e) => options.filterCallback(e.value)} optionLabel="name" placeholder="Any" className="p-column-filter" />;
+    };
+
+    const representativesItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${option.image}\`} width="32" />
+                <span>{option.name}</span>
+            </div>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.date);
+    };
+
+    const dateFilterTemplate = (options) => {
+        return <Calendar value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />;
+    };
+
+    const balanceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const balanceFilterTemplate = (options) => {
+        return <InputNumber value={options.value} onChange={(e) => options.filterCallback(e.value, options.index)} mode="currency" currency="USD" locale="en-US" />;
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} />;
+    };
+
+    const statusFilterTemplate = (options) => {
+        return <Dropdown value={options.value} options={statuses} onChange={(e) => options.filterCallback(e.value, options.index)} itemTemplate={statusItemTemplate} placeholder="Select One" className="p-column-filter" showClear />;
+    };
+
+    const statusItemTemplate = (option) => {
+        return <Tag value={option} severity={getSeverity(option)} />;
+    };
+
+    const activityBodyTemplate = (rowData) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }}></ProgressBar>;
+    };
+
+    const activityFilterTemplate = (options) => {
+        return (
+            <React.Fragment>
+                <Slider value={options.value} onChange={(e) => options.filterCallback(e.value)} range className="m-3"></Slider>
+                <div className="flex align-items-center justify-between px-2">
+                    <span>{options.value ? options.value[0] : 0}</span>
+                    <span>{options.value ? options.value[1] : 100}</span>
+                </div>
+            </React.Fragment>
+        );
+    };
+
+    const verifiedBodyTemplate = (rowData) => {
+        return <i className={classNames('pi', { 'text-green-500 pi-check-circle': rowData.verified, 'text-red-500 pi-times-circle': !rowData.verified })}></i>;
+    };
+
+    const verifiedFilterTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <label htmlFor="verified-filter" className="font-bold">
+                    Verified
+                </label>
+                <TriStateCheckbox inputId="verified-filter" value={options.value} onChange={(e) => options.filterCallback(e.value)} />
+            </div>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <DataTable value={customers} paginator showGridlines rows={10} loading={loading} dataKey="id" 
+                    filters={filters} globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']} header={header}
+                    emptyMessage="No customers found.">
+                <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
+                <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate}
+                    filter filterPlaceholder="Search by country" filterClear={filterClearTemplate} 
+                    filterApply={filterApplyTemplate} filterFooter={filterFooterTemplate} />
+                <Column header="Agent" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
+                    body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
+                <Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
+                <Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
+                <Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
+                <Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
+                <Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
+            </DataTable>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['CustomerService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/datatable/virtualscroll/lazydoc.js b/components/doc/datatable/virtualscroll/lazydoc.js
new file mode 100644
index 0000000000..89d02ac9da
--- /dev/null
+++ b/components/doc/datatable/virtualscroll/lazydoc.js
@@ -0,0 +1,235 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+import { useState } from 'react';
+import { CarService } from '../../../../service/CarService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+
+export function LazyVirtualScrollDoc(props) {
+    const [virtualCars, setVirtualCars] = useState(Array.from({ length: 100000 }));
+    const [lazyLoading, setLazyLoading] = useState(false);
+    let loadLazyTimeout = null;
+
+    let cars = null;
+
+    const loadDemoData = () => {
+        cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+    };
+
+    const loadCarsLazy = (event) => {
+        !lazyLoading && setLazyLoading(true);
+
+        if (loadLazyTimeout) {
+            clearTimeout(loadLazyTimeout);
+        }
+
+        //simulate remote connection with a timeout
+        loadLazyTimeout = setTimeout(
+            () => {
+                let _virtualCars = [...virtualCars];
+                let { first, last } = event;
+
+                //load data of required page
+                const loadedCars = cars.slice(first, last);
+
+                //populate page of virtual cars
+                Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+                setVirtualCars(_virtualCars);
+                setLazyLoading(false);
+            },
+            Math.random() * 1000 + 250
+        );
+    };
+
+    const loadingTemplate = (options) => {
+        return (
+            <div className="flex align-items-center" style={{ height: '17px', flexGrow: '1', overflow: 'hidden' }}>
+                <Skeleton width={options.cellEven ? (options.field === 'year' ? '30%' : '40%') : '60%'} height="1rem" />
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<DataTable value={virtualCars} scrollable scrollHeight="400px"
+    virtualScrollerOptions={{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, loadingTemplate }}
+    tableStyle={{ minWidth: '50rem' }}>
+    <Column field="id" header="Id" style={{ width: '20%' }}></Column>
+    <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
+    <Column field="year" header="Year" style={{ width: '20%' }}></Column>
+    <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
+    <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Skeleton } from 'primereact/skeleton';
+import { CarService } from './service/CarService';
+
+export default function LazyVirtualScrollDemo() {
+    const cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+    const [virtualCars, setVirtualCars] = useState(Array.from({ length: 100000 }));
+    const [lazyLoading, setLazyLoading] = useState(false);
+    let loadLazyTimeout = null;
+
+    const loadCarsLazy = (event) => {
+        !lazyLoading && setLazyLoading(true);
+
+        if (loadLazyTimeout) {
+            clearTimeout(loadLazyTimeout);
+        }
+
+        //simulate remote connection with a timeout
+        loadLazyTimeout = setTimeout(() => {
+            let _virtualCars = [...virtualCars];
+            let { first, last } = event;
+
+            //load data of required page
+            const loadedCars = cars.slice(first, last);
+
+            //populate page of virtual cars
+            Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+            setVirtualCars(_virtualCars);
+            setLazyLoading(false);
+        }, Math.random() * 1000 + 250);
+    };
+
+    const loadingTemplate = (options) => {
+        return (
+            <div className="flex align-items-center" style={{ height: '17px', flexGrow: '1', overflow: 'hidden' }}>
+                <Skeleton width={options.cellEven ? (options.field === 'year' ? '30%' : '40%') : '60%'} height="1rem" />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={virtualCars} scrollable scrollHeight="400px"
+                virtualScrollerOptions={{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, loadingTemplate }}
+                tableStyle={{ minWidth: '50rem' }}>
+                <Column field="id" header="Id" style={{ width: '20%' }}></Column>
+                <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
+                <Column field="year" header="Year" style={{ width: '20%' }}></Column>
+                <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
+                <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Skeleton } from 'primereact/skeleton';
+import { VirtualScrollerLazyEvent, VirtualScrollerLoadingTemplateOptions } from 'primereact/virtualscroller';
+import { CarService } from './service/CarService';
+
+interface Car {
+    id: number;
+    vin: string;
+    brand: string;
+    color: string;
+    year: number;
+}
+
+export default function LazyVirtualScrollDemo() {
+    const cars: Car[] = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+    const [virtualCars, setVirtualCars] = useState<Car[]>(Array.from({ length: 100000 }));
+    const [lazyLoading, setLazyLoading] = useState<boolean>(false);
+    let loadLazyTimeout = null;
+
+    const loadCarsLazy = (event: VirtualScrollerLazyEvent) => {
+        !lazyLoading && setLazyLoading(true);
+
+        if (loadLazyTimeout) {
+            clearTimeout(loadLazyTimeout);
+        }
+
+        //simulate remote connection with a timeout
+        loadLazyTimeout = setTimeout(() => {
+            let _virtualCars = [...virtualCars];
+            let { first, last } = event;
+
+            //load data of required page
+            const loadedCars = cars.slice(first, last);
+
+            //populate page of virtual cars
+            Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+            setVirtualCars(_virtualCars);
+            setLazyLoading(false);
+        }, Math.random() * 1000 + 250);
+    };
+
+    const loadingTemplate = (options: VirtualScrollerLoadingTemplateOptions) => {
+        return (
+            <div className="flex align-items-center" style={{ height: '17px', flexGrow: '1', overflow: 'hidden' }}>
+                <Skeleton width={options.cellEven ? (options.field === 'year' ? '30%' : '40%') : '60%'} height="1rem" />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataTable value={virtualCars} scrollable scrollHeight="400px"
+                virtualScrollerOptions={{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, loadingTemplate }}
+                tableStyle={{ minWidth: '50rem' }}>
+                <Column field="id" header="Id" style={{ width: '20%' }}></Column>
+                <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
+                <Column field="year" header="Year" style={{ width: '20%' }}></Column>
+                <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
+                <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1
+    vin: tvACo,
+    brand: Norma,
+    color: Black,
+    year: 2002
+}
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When lazy loading is enabled via the <i>virtualScrollerOptions</i>, data is fetched on demand during scrolling instead of preload.
+                </p>
+                <p>
+                    In sample below, an in-memory list and timeout is used to mimic fetching from a remote datasource. The <i>virtualCars</i> is an empty array that is populated on scroll.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable
+                        value={virtualCars}
+                        scrollable
+                        scrollHeight="400px"
+                        virtualScrollerOptions={{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, loadingTemplate }}
+                        tableStyle={{ minWidth: '50rem' }}
+                    >
+                        <Column field="id" header="Id" style={{ width: '20%' }} />
+                        <Column field="vin" header="Vin" style={{ width: '20%' }} />
+                        <Column field="year" header="Year" style={{ width: '20%' }} />
+                        <Column field="brand" header="Brand" style={{ width: '20%' }} />
+                        <Column field="color" header="Color" style={{ width: '20%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CarService']} />
+        </>
+    );
+}
diff --git a/components/doc/datatable/virtualscroll/preloaddoc.js b/components/doc/datatable/virtualscroll/preloaddoc.js
new file mode 100644
index 0000000000..a635b0ca03
--- /dev/null
+++ b/components/doc/datatable/virtualscroll/preloaddoc.js
@@ -0,0 +1,115 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import Link from 'next/link';
+import { CarService } from '../../../../service/CarService';
+import DeferredDemo from '@/components/demo/DeferredDemo';
+import { useState } from 'react';
+
+export function PreloadVirtualScrollDoc(props) {
+    const [cars, setCars] = useState([]);
+
+    const loadDemoData = () => {
+        setCars(Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1)));
+    };
+
+    const code = {
+        basic: `
+<DataTable value={cars} scrollable scrollHeight="400px" virtualScrollerOptions={{ itemSize: 46 }} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="id" header="Id" style={{ width: '20%' }}></Column>
+    <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
+    <Column field="year" header="Year" style={{ width: '20%' }}></Column>
+    <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
+    <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CarService } from './service/CarService';
+
+export default function PreloadVirtualScrollDemo() {
+    const cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+
+    return (
+        <div className="card">
+            <DataTable value={cars} scrollable scrollHeight="400px" virtualScrollerOptions={{ itemSize: 46 }} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="id" header="Id" style={{ width: '20%' }}></Column>
+                <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
+                <Column field="year" header="Year" style={{ width: '20%' }}></Column>
+                <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
+                <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { CarService } from './service/CarService';
+
+interface Car {
+    id: number;
+    vin: string;
+    brand: string;
+    color: string;
+    year: number;
+}
+
+export default function PreloadVirtualScrollDemo() {
+    const cars: Car[] = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
+
+    return (
+        <div className="card">
+            <DataTable value={cars} scrollable scrollHeight="400px" virtualScrollerOptions={{ itemSize: 46 }} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="id" header="Id" style={{ width: '20%' }}></Column>
+                <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
+                <Column field="year" header="Year" style={{ width: '20%' }}></Column>
+                <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
+                <Column field="color" header="Color" style={{ width: '20%' }}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    id: 1
+    vin: tvACo,
+    brand: Norma,
+    color: Black,
+    year: 2002
+}
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Virtual Scrolling is an efficient way to render large amount data. Usage is similar to regular scrolling with the addition of <i>virtualScrollerOptions</i> property to define a fixed <i>itemSize</i>. Internally,{' '}
+                    <Link href="http://github.com/virtualscroller">VirtualScroller</Link> component is utilized so refer to the API of VirtualScroller for more information about the available options.
+                </p>
+                <p>
+                    In this example, <strong>100000</strong> preloaded records are rendered by the Table.
+                </p>
+            </DocSectionText>
+            <DeferredDemo onLoad={loadDemoData}>
+                <div className="card">
+                    <DataTable value={cars} scrollable scrollHeight="400px" virtualScrollerOptions={{ itemSize: 46 }} tableStyle={{ minWidth: '50rem' }}>
+                        <Column field="id" header="Id" style={{ width: '20%' }} />
+                        <Column field="vin" header="Vin" style={{ width: '20%' }} />
+                        <Column field="year" header="Year" style={{ width: '20%' }} />
+                        <Column field="brand" header="Brand" style={{ width: '20%' }} />
+                        <Column field="color" header="Color" style={{ width: '20%' }} />
+                    </DataTable>
+                </div>
+            </DeferredDemo>
+            <DocSectionCode code={code} service={['CarService']} />
+        </>
+    );
+}
diff --git a/components/doc/dataview/accessibilitydoc.js b/components/doc/dataview/accessibilitydoc.js
new file mode 100644
index 0000000000..c5b5faed46
--- /dev/null
+++ b/components/doc/dataview/accessibilitydoc.js
@@ -0,0 +1,45 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                The container element that wraps the layout options buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Values to describe the buttons
+                are derived from the <i>aria.listView</i> and <i>aria.gridView</i> properties of the <Link href="http://github.com/locale">locale</Link> API respectively.
+            </p>
+
+            <p>
+                Refer to <Link href="http://github.com/paginator">paginator</Link> accessibility documentation for the paginator of the component.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the checked state of a button.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/dataview/basicdoc.js b/components/doc/dataview/basicdoc.js
new file mode 100644
index 0000000000..369d5faae0
--- /dev/null
+++ b/components/doc/dataview/basicdoc.js
@@ -0,0 +1,273 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { DataView } from '@/components/lib/dataview/DataView';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function BasicDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false} />
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag" />
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) {
+            return null;
+        }
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    const code = {
+        basic: `
+<DataView value={products} listTemplate={listTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataView } from 'primereact/dataview';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataView } from 'primereact/dataview';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []);
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (product: Product, index: number) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items: Product[]) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    DataView requires a <i>value</i> to display along with an <i>listTemplate</i> that receives an object in the collection to return content.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <DataView value={products} listTemplate={listTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/dataview/importdoc.js b/components/doc/dataview/importdoc.js
new file mode 100644
index 0000000000..11d97c9a17
--- /dev/null
+++ b/components/doc/dataview/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/dataview/layoutdoc.js b/components/doc/dataview/layoutdoc.js
new file mode 100644
index 0000000000..6aa949cbd2
--- /dev/null
+++ b/components/doc/dataview/layoutdoc.js
@@ -0,0 +1,386 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { DataView, DataViewLayoutOptions } from '@/components/lib/dataview/DataView';
+import { Rating } from '@/components/lib/rating/Rating';
+import { classNames } from '@/components/lib/utils/Utils';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function LayoutDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [layout, setLayout] = useState('grid');
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data.slice(0, 12)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const listItem = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false} />
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag" />
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const gridItem = (product) => {
+        return (
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
+                <div className="p-4 border-1 surface-border surface-card border-round">
+                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+                        <div className="flex align-items-center gap-2">
+                            <i className="pi pi-tag" />
+                            <span className="font-semibold">{product.category}</span>
+                        </div>
+                        <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                    </div>
+                    <div className="flex flex-column align-items-center gap-3 py-5">
+                        <img className="w-9 shadow-2 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
+                        <div className="text-2xl font-bold">{product.name}</div>
+                        <Rating value={product.rating} readOnly cancel={false} />
+                    </div>
+                    <div className="flex align-items-center justify-content-between">
+                        <span className="text-2xl font-semibold">${product.price}</span>
+                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (product, layout, index) => {
+        if (!product) {
+            return;
+        }
+
+        if (layout === 'list') {
+            return listItem(product, index);
+        } else if (layout === 'grid') {
+            return gridItem(product);
+        }
+    };
+
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
+    const header = () => {
+        return (
+            <div className="flex justify-content-end">
+                <DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { ProductService } from './service/ProductService';
+import { Button } from 'primereact/button';
+import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+    const [layout, setLayout] = useState('grid');
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data.slice(0, 12)));
+    }, []);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const listItem = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const gridItem = (product) => {
+        return (
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
+                <div className="p-4 border-1 surface-border surface-card border-round">
+                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+                        <div className="flex align-items-center gap-2">
+                            <i className="pi pi-tag"></i>
+                            <span className="font-semibold">{product.category}</span>
+                        </div>
+                        <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    </div>
+                    <div className="flex flex-column align-items-center gap-3 py-5">
+                        <img className="w-9 shadow-2 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                        <div className="text-2xl font-bold">{product.name}</div>
+                        <Rating value={product.rating} readOnly cancel={false}></Rating>
+                    </div>
+                    <div className="flex align-items-center justify-content-between">
+                        <span className="text-2xl font-semibold">\${product.price}</span>
+                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (product, layout, index) => {
+        if (!product) {
+            return;
+        }
+
+        if (layout === 'list') return listItem(product, index);
+        else if (layout === 'grid') return gridItem(product);
+    };
+
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
+    const header = () => {
+        return (
+            <div className="flex justify-content-end">
+                <DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { ProductService } from './service/ProductService';
+import { Button } from 'primereact/button';
+import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [layout, setLayout] = useState('grid');
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data.slice(0, 12)));
+    }, []);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const listItem = (product: Product, index: number) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const gridItem = (product: Product) => {
+        return (
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
+                <div className="p-4 border-1 surface-border surface-card border-round">
+                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+                        <div className="flex align-items-center gap-2">
+                            <i className="pi pi-tag"></i>
+                            <span className="font-semibold">{product.category}</span>
+                        </div>
+                        <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                    </div>
+                    <div className="flex flex-column align-items-center gap-3 py-5">
+                        <img className="w-9 shadow-2 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                        <div className="text-2xl font-bold">{product.name}</div>
+                        <Rating value={product.rating} readOnly cancel={false}></Rating>
+                    </div>
+                    <div className="flex align-items-center justify-content-between">
+                        <span className="text-2xl font-semibold">\${product.price}</span>
+                        <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (product: Product, layout: string, index: number) => {
+        if (!product) {
+            return;
+        }
+
+        if (layout === 'list') return listItem(product: Product, index);
+        else if (layout === 'grid') return gridItem(product);
+    };
+
+    const listTemplate = (products: Product[], layout: string) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
+    const header = () => {
+        return (
+            <div className="flex justify-content-end">
+                <DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    DataView supports <i>list</i> and <i>grid</i> display modes defined with the <i>layout</i> property. The helper <i>DataViewLayoutOptions</i> component can be used to switch between the modes however this component is optional and
+                    you may use your own UI to switch modes as well. As in <i>list</i> layout, the <i>grid</i> layout also requires PrimeFlex Grid classes to define how the grid is displayed per screen sizes.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/dataview/loadingdoc.js b/components/doc/dataview/loadingdoc.js
new file mode 100644
index 0000000000..2dab9c1437
--- /dev/null
+++ b/components/doc/dataview/loadingdoc.js
@@ -0,0 +1,316 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { DataView, DataViewLayoutOptions } from '@/components/lib/dataview/DataView';
+import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+import { classNames } from '@/components/lib/utils/Utils';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function LoadingDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [layout, setLayout] = useState('grid');
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 6)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const listItem = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <Skeleton className="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <Skeleton className="w-8rem border-round h-2rem" />
+                            <Skeleton className="w-6rem border-round h-1rem" />
+                            <div className="flex align-items-center gap-3">
+                                <Skeleton className="w-6rem border-round h-1rem" />
+                                <Skeleton className="w-3rem border-round h-1rem" />
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <Skeleton className="w-4rem border-round h-2rem" />
+                            <Skeleton shape="circle" className="w-3rem h-3rem" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const gridItem = (product) => {
+        return (
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
+                <div className="p-4 border-1 surface-border surface-card border-round">
+                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+                        <Skeleton className="w-6rem border-round h-1rem" />
+                        <Skeleton className="w-3rem border-round h-1rem" />
+                    </div>
+                    <div className="flex flex-column align-items-center gap-3 py-5">
+                        <Skeleton className="w-9 shadow-2 border-round h-10rem" />
+                        <Skeleton className="w-8rem border-round h-2rem" />
+                        <Skeleton className="w-6rem border-round h-1rem" />
+                    </div>
+                    <div className="flex align-items-center justify-content-between">
+                        <Skeleton className="w-4rem border-round h-2rem" />
+                        <Skeleton shape="circle" className="w-3rem h-3rem" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (product, layout, index) => {
+        if (!product) {
+            return;
+        }
+
+        if (layout === 'list') {
+            return listItem(product, index);
+        } else if (layout === 'grid') {
+            return gridItem(product);
+        }
+    };
+
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
+    const header = () => {
+        return (
+            <div className="flex justify-content-end">
+                <DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
+import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+    const [layout, setLayout] = useState('grid');
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 6)));
+    }, []);
+
+    const listItem = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <Skeleton className="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <Skeleton className="w-8rem border-round h-2rem" />
+                            <Skeleton className="w-6rem border-round h-1rem" />
+                            <div className="flex align-items-center gap-3">
+                                <Skeleton className="w-6rem border-round h-1rem" />
+                                <Skeleton className="w-3rem border-round h-1rem" />
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <Skeleton className="w-4rem border-round h-2rem" />
+                            <Skeleton shape="circle" className="w-3rem h-3rem" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const gridItem = (product) => {
+        return (
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
+                <div className="p-4 border-1 surface-border surface-card border-round">
+                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+                        <Skeleton className="w-6rem border-round h-1rem" />
+                        <Skeleton className="w-3rem border-round h-1rem" />
+                    </div>
+                    <div className="flex flex-column align-items-center gap-3 py-5">
+                        <Skeleton className="w-9 shadow-2 border-round h-10rem" />
+                        <Skeleton className="w-8rem border-round h-2rem" />
+                        <Skeleton className="w-6rem border-round h-1rem" />
+                    </div>
+                    <div className="flex align-items-center justify-content-between">
+                        <Skeleton className="w-4rem border-round h-2rem" />
+                        <Skeleton shape="circle" className="w-3rem h-3rem" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (product, layout, index) => {
+        if (!product) {
+            return;
+        }
+
+        if (layout === 'list') return listItem(product, index);
+        else if (layout === 'grid') return gridItem(product);
+    };
+
+    const listTemplate = (products, layout) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
+    const header = () => {
+        return (
+            <div className="flex justify-content-end">
+                <DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
+import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+    const [layout, setLayout] = useState('grid');
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 6)));
+    }, []);
+
+    const listItem = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4">
+                    <Skeleton className="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <Skeleton className="w-8rem border-round h-2rem" />
+                            <Skeleton className="w-6rem border-round h-1rem" />
+                            <div className="flex align-items-center gap-3">
+                                <Skeleton className="w-6rem border-round h-1rem" />
+                                <Skeleton className="w-3rem border-round h-1rem" />
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <Skeleton className="w-4rem border-round h-2rem" />
+                            <Skeleton shape="circle" className="w-3rem h-3rem" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const gridItem = (product) => {
+        return (
+            <div className="col-12 sm:col-6 lg:col-12 xl:col-4 p-2" key={product.id}>
+                <div className="p-4 border-1 surface-border surface-card border-round">
+                    <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+                        <Skeleton className="w-6rem border-round h-1rem" />
+                        <Skeleton className="w-3rem border-round h-1rem" />
+                    </div>
+                    <div className="flex flex-column align-items-center gap-3 py-5">
+                        <Skeleton className="w-9 shadow-2 border-round h-10rem" />
+                        <Skeleton className="w-8rem border-round h-2rem" />
+                        <Skeleton className="w-6rem border-round h-1rem" />
+                    </div>
+                    <div className="flex align-items-center justify-content-between">
+                        <Skeleton className="w-4rem border-round h-2rem" />
+                        <Skeleton shape="circle" className="w-3rem h-3rem" />
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (product: Product, layout: string) => {
+        if (!product) {
+            return;
+        }
+
+        if (layout === 'list') return listItem(product, index);
+        else if (layout === 'grid') return gridItem(product);
+    };
+
+
+
+    const listTemplate = (products: Product[], layout: string) => {
+        return <div className="grid grid-nogutter">{products.map((product, index) => itemTemplate(product, layout, index))}</div>;
+    };
+
+    const header = () => {
+        return (
+            <div className="flex justify-content-end">
+                <DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    While data is being loaded. <Link href="http://github.com/skeleton">Skeleton</Link> component may be used to indicate the busy state.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <DataView value={products} listTemplate={listTemplate} layout={layout} header={header()} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/dataview/paginationdoc.js b/components/doc/dataview/paginationdoc.js
new file mode 100644
index 0000000000..bf0268233b
--- /dev/null
+++ b/components/doc/dataview/paginationdoc.js
@@ -0,0 +1,274 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { DataView } from '@/components/lib/dataview/DataView';
+import { Rating } from '@/components/lib/rating/Rating';
+import { Tag } from '@/components/lib/tag/Tag';
+import { classNames } from '@/components/lib/utils/Utils';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function PaginationDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false} />
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag" />
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) {
+            return null;
+        }
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    const code = {
+        basic: `
+<DataView value={products} itemTemplate={listTemplate} paginator rows={5} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataView } from 'primereact/dataview';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+export default function PaginationDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} paginator rows={5} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataView } from 'primereact/dataview';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+export default function PaginationDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data));
+    }, []);
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const itemTemplate = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items: Product) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    return (
+        <div className="card">
+        <DataView value={products} listTemplate={listTemplate} paginator rows={5} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Pagination is enabled with the <i>paginator</i> and <i>rows</i> properties. Refer to the <Link href="http://github.com/paginator">Paginator</Link> for more information about customizing the paginator.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <DataView value={products} listTemplate={listTemplate} paginator rows={5} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/dataview/pt/wireframe.js b/components/doc/dataview/pt/wireframe.js
new file mode 100644
index 0000000000..0a2c421ebf
--- /dev/null
+++ b/components/doc/dataview/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/dataview.jpg" alt="dataview" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/dataview/sortingdoc.js b/components/doc/dataview/sortingdoc.js
new file mode 100644
index 0000000000..3bfb899b70
--- /dev/null
+++ b/components/doc/dataview/sortingdoc.js
@@ -0,0 +1,356 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { DataView } from '@/components/lib/dataview/DataView';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { Rating } from '@/components/lib/rating/Rating';
+import { classNames } from '@/components/lib/utils/Utils';
+import { Tag } from '@/components/lib/tag/Tag';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function SortingDoc(props) {
+    const [products, setProducts] = useState([]);
+    const [sortKey, setSortKey] = useState('');
+    const [sortOrder, setSortOrder] = useState(0);
+    const [sortField, setSortField] = useState('');
+    const sortOptions = [
+        { label: 'Price High to Low', value: '!price' },
+        { label: 'Price Low to High', value: 'price' }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const onSortChange = (event) => {
+        const value = event.value;
+
+        if (value.indexOf('!') === 0) {
+            setSortOrder(-1);
+            setSortField(value.substring(1, value.length));
+            setSortKey(value);
+        } else {
+            setSortOrder(1);
+            setSortField(value);
+            setSortKey(value);
+        }
+    };
+
+    const header = () => {
+        return <Dropdown options={sortOptions} value={sortKey} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} className="w-full sm:w-14rem" />;
+    };
+
+    const itemTemplate = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={`https://primefaces.org/cdn/primereact/images/product/${product.image}`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false} />
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag" />
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) {
+            return null;
+        }
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    const code = {
+        basic: `
+<DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataView } from 'primereact/dataview';
+import { Dropdown } from 'primereact/dropdown';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+export default function SortingDemo() {
+    const [products, setProducts] = useState([]);
+    const [sortKey, setSortKey] = useState('');
+    const [sortOrder, setSortOrder] = useState(0);
+    const [sortField, setSortField] = useState('');
+    const sortOptions = [
+        { label: 'Price High to Low', value: '!price' },
+        { label: 'Price Low to High', value: 'price' }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const onSortChange = (event) => {
+        const value = event.value;
+
+        if (value.indexOf('!') === 0) {
+            setSortOrder(-1);
+            setSortField(value.substring(1, value.length));
+            setSortKey(value);
+        } else {
+            setSortOrder(1);
+            setSortField(value);
+            setSortKey(value);
+        }
+    };
+
+    const header = () => {
+        return <Dropdown options={sortOptions} value={sortKey} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} className="w-full sm:w-14rem" />;
+    };
+
+    const itemTemplate = (product, index) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { DataView } from 'primereact/dataview';
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+import { classNames } from 'primereact/utils';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: string;
+    rating: number;
+}
+
+interface SortOption {
+    label: string;
+    value: string;
+}
+
+export default function SortingDemo() {
+    const [products, setProducts] = useState<Product>([]);
+    const [sortKey, setSortKey] = useState<string>('');
+    const [sortOrder, setSortOrder] = useState<number>(0);
+    const [sortField, setSortField] = useState<string>('');
+    const sortOptions: SortOption[] = [
+        { label: 'Price High to Low', value: '!price' },
+        { label: 'Price Low to High', value: 'price' }
+    ];
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data.slice(0, 5)));
+    }, []);
+
+    const getSeverity = (product: Product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const onSortChange = (event: DropdownChangeEvent) => {
+        const value = event.value;
+
+        if (value.indexOf('!') === 0) {
+            setSortOrder(-1);
+            setSortField(value.substring(1, value.length));
+            setSortKey(value);
+        } else {
+            setSortOrder(1);
+            setSortField(value);
+            setSortKey(value);
+        }
+    };
+
+    const header = () => {
+        return <Dropdown options={sortOptions} value={sortKey} optionLabel="label" placeholder="Sort By Price" onChange={onSortChange} className="w-full sm:w-14rem" />;
+    };
+
+    const itemTemplate = (product: Product, index: number) => {
+        return (
+            <div className="col-12" key={product.id}>
+                <div className={classNames('flex flex-column xl:flex-row xl:align-items-start p-4 gap-4', { 'border-top-1 surface-border': index !== 0 })}>
+                    <img className="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
+                        <div className="flex flex-column align-items-center sm:align-items-start gap-3">
+                            <div className="text-2xl font-bold text-900">{product.name}</div>
+                            <Rating value={product.rating} readOnly cancel={false}></Rating>
+                            <div className="flex align-items-center gap-3">
+                                <span className="flex align-items-center gap-2">
+                                    <i className="pi pi-tag"></i>
+                                    <span className="font-semibold">{product.category}</span>
+                                </span>
+                                <Tag value={product.inventoryStatus} severity={getSeverity(product)}></Tag>
+                            </div>
+                        </div>
+                        <div className="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
+                            <span className="text-2xl font-semibold">\${product.price}</span>
+                            <Button icon="pi pi-shopping-cart" className="p-button-rounded" disabled={product.inventoryStatus === 'OUTOFSTOCK'}></Button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    const listTemplate = (items: Product[]) => {
+        if (!items || items.length === 0) return null;
+
+        let list = items.map((product, index) => {
+            return itemTemplate(product, index);
+        });
+
+        return <div className="grid grid-nogutter">{list}</div>;
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Built-in sorting is controlled by bindings <i>sortField</i> and <i>sortField</i> properties from a custom UI.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <DataView value={products} listTemplate={listTemplate} header={header()} sortField={sortField} sortOrder={sortOrder} />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/dataview/styledoc.js b/components/doc/dataview/styledoc.js
new file mode 100644
index 0000000000..a53110c85c
--- /dev/null
+++ b/components/doc/dataview/styledoc.js
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dataview</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-list</td>
+                            <td>Container element in list layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-grid</td>
+                            <td>Container element in grid layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-content</td>
+                            <td>Container of items.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dataview/theming/styleddoc.js b/components/doc/dataview/theming/styleddoc.js
new file mode 100644
index 0000000000..3260f8567a
--- /dev/null
+++ b/components/doc/dataview/theming/styleddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dataview</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-list</td>
+                            <td>Container element in list layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-grid</td>
+                            <td>Container element in grid layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dataview-content</td>
+                            <td>Container of items.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dataview/theming/tailwinddoc.js b/components/doc/dataview/theming/tailwinddoc.js
new file mode 100644
index 0000000000..5d9859283e
--- /dev/null
+++ b/components/doc/dataview/theming/tailwinddoc.js
@@ -0,0 +1,179 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    dataview: {
+        content: {
+            className: classNames(
+                'bg-white blue-gray-700 border-0 p-0',
+                'dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            )
+        },
+        grid: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900',
+        header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
+    },
+    dataviewlayoutoptions: {
+        listbutton: ({ props }) => ({
+            className: classNames(
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-r-none',
+                props.layout === 'list' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80'
+            )
+        }),
+        gridbutton: ({ props }) => ({
+            className: classNames(
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-l-none',
+                props.layout === 'grid' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80'
+            )
+        })
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { ProductService } from './service/ProductService';
+import { Button } from 'primereact/button';
+import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
+import { Rating } from 'primereact/rating';
+import { Tag } from 'primereact/tag';
+
+export default function UnstyledDemo() {
+    const [products, setProducts] = useState([]);
+    const [layout, setLayout] = useState('grid');
+
+    useEffect(() => {
+        ProductService.getProducts().then((data) => setProducts(data.slice(0, 12)));
+    }, []);
+
+    const getSeverity = (product) => {
+        switch (product.inventoryStatus) {
+            case 'INSTOCK':
+                return 'success';
+
+            case 'LOWSTOCK':
+                return 'warning';
+
+            case 'OUTOFSTOCK':
+                return 'danger';
+
+            default:
+                return null;
+        }
+    };
+
+    const listItem = (product) => {
+        return (
+            <div className="flex-initial shrink-0 w-full">
+            <div className="flex flex-col xl:flex-row xl:items-start p-4 gap-4 bg-white dark:bg-gray-900">
+                <img
+                    className="w-3/4 sm:w-64 xl:w-40 shadow-md block xl:block mx-auto rounded-md"
+                    src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`}
+                    alt={product.name}
+                />
+                <div className="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-4">
+                    <div className="flex flex-col items-center sm:items-start gap-3">
+                        <div className="text-2xl font-bold text-gray-700 dark:text-white/80">
+                            {product.name}
+                        </div>
+                        <Rating value={product.rating} readonly cancel={false} />
+                        <div className="flex items-center gap-3">
+                            <span className="flex items-center gap-2">
+                                <i className="pi pi-tag text-gray-700 dark:text-white/80"></i>
+                                <span className="font-semibold text-gray-700 dark:text-white/80">
+                                    {product.category}
+                                </span>
+                            </span>
+                            <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                        </div>
+                    </div>
+                    <div className="flex sm:flex-col items-center sm:align-end gap-3 sm:gap-2">
+                        <span className="text-2xl font-semibold text-gray-700 dark:text-white/80">
+                        \${product.price}
+                        </span>
+                        <Button
+                            icon="pi pi-shopping-cart"
+                            rounded
+                            disabled={product.inventoryStatus === 'OUTOFSTOCK'}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+        );
+    };
+
+    const gridItem = (product) => {
+        return (
+            <div className="flex-initial shrink-0 w-full sm:w-1/2 lg:w-full xl:w-1/3 p-2">
+            <div className="p-4 border rounded-md bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40">
+                <div className="flex flex-wrap items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
+                        <i className="pi pi-tag text-gray-700 dark:text-white/80"></i>
+                        <span className="font-semibold text-gray-700 dark:text-white/80">{product.category}</span>
+                    </div>
+                    <Tag value={product.inventoryStatus} severity={getSeverity(product)} />
+                </div>
+                <div className="flex flex-col items-center gap-3 py-5">
+                    <img className="w-3/4 shadow-md rounded-md" src={\`https://primefaces.org/cdn/primereact/images/product/\${product.image}\`} alt={product.name} />
+                    <div className="text-2xl font-bold text-gray-700 dark:text-white/80">{product.name}</div>
+                    <Rating value={product.rating} readonly cancel={false} />
+                </div>
+                <div className="flex items-center justify-between">
+                    <span className="text-2xl font-semibold text-gray-700 dark:text-white/80">\${product.price}</span>
+                    <Button icon="pi pi-shopping-cart" rounded disabled={product.inventoryStatus === 'OUTOFSTOCK'} />
+                </div>
+            </div>
+        </div>
+        );
+    };
+
+    const itemTemplate = (product, layout) => {
+        if (!product) {
+            return;
+        }
+
+        if (layout === 'list') return listItem(product);
+        else if (layout === 'grid') return gridItem(product);
+    };
+
+    const header = () => {
+        return (
+            <div className="flex justify-end bg-gray-100 dark:bg-gray-800">
+                <DataViewLayoutOptions layout={layout} onChange={(e) => setLayout(e.value)} />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <DataView value={products} itemTemplate={itemTemplate} layout={layout} header={header()} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['ProductService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/deferredcontent/accessibilitydoc.js b/components/doc/deferredcontent/accessibilitydoc.js
new file mode 100644
index 0000000000..f02f33bbb6
--- /dev/null
+++ b/components/doc/deferredcontent/accessibilitydoc.js
@@ -0,0 +1,28 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
+                have full control over the roles like{' '}
+                <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">
+                    landmark
+                </a>{' '}
+                and attributes like <i>aria-live</i>.
+            </p>
+            <CodeHighlight>
+                {`
+<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
+Content
+</DeferredContent>
+`}
+            </CodeHighlight>
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/deferredcontent/basicdoc.js b/components/doc/deferredcontent/basicdoc.js
new file mode 100644
index 0000000000..00c9a10037
--- /dev/null
+++ b/components/doc/deferredcontent/basicdoc.js
@@ -0,0 +1,83 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { DeferredContent } from '@/components/lib/deferredcontent/DeferredContent';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+
+    const onImageLoad = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Image loaded' });
+    };
+
+    const code = {
+        basic: `
+<DeferredContent onLoad={onImageLoad}>
+    <img className="w-full md:w-30rem md:block md:mx-auto" src="http://github.com/images/galleria/galleria3.jpg" alt="Prime" />
+</DeferredContent>
+        `,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { DeferredContent } from 'primereact/deferredcontent';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+
+    const onImageLoad = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Image loaded' });
+    };
+
+    return (
+        <div className="card">
+            <p style={{marginBottom: '70rem', textAlign: 'center'}}>Scroll down to lazy load an image.</p>
+            <Toast ref={toast} />
+            <DeferredContent onLoad={onImageLoad}>
+                <img className="w-full md:w-30rem md:block md:mx-auto" src="https://primefaces.org/cdn/primereact/images/galleria/galleria3.jpg" alt="Prime" />
+            </DeferredContent>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { DeferredContent } from 'primereact/deferredcontent';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef<Toast | null>(null);
+
+    const onImageLoad = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Image loaded' });
+    };
+
+    return (
+        <div className="card">
+            <p style={{marginBottom: '70rem', textAlign: 'center'}}>Scroll down to lazy load an image.</p>
+            <Toast ref={toast} />
+            <DeferredContent onLoad={onImageLoad}>
+                <img className="w-full md:w-30rem md:block md:mx-auto" src="https://primefaces.org/cdn/primereact/images/galleria/galleria3.jpg" alt="Prime" />
+            </DeferredContent>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>DeferredContent is used by wrapping the target.</p>
+            </DocSectionText>
+            <div className="card">
+                <p style={{ marginBottom: '70rem', textAlign: 'center' }}>Scroll down to lazy load an image.</p>
+                <Toast ref={toast} />
+                <DeferredContent onLoad={onImageLoad}>
+                    <img className="w-full md:w-30rem md:block md:mx-auto" src="https://primefaces.org/cdn/primereact/images/galleria/galleria3.jpg" alt="Prime" />
+                </DeferredContent>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/deferredcontent/datatabledoc.js b/components/doc/deferredcontent/datatabledoc.js
new file mode 100644
index 0000000000..d0dd74b163
--- /dev/null
+++ b/components/doc/deferredcontent/datatabledoc.js
@@ -0,0 +1,134 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { DeferredContent } from '@/components/lib/deferredcontent/DeferredContent';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function DataTableDoc(props) {
+    const toast = useRef(null);
+    const [products, setProducts] = useState(null);
+
+    const onDataLoad = () => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+        toast.current.show({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed' });
+    };
+
+    const code = {
+        basic: `
+<DeferredContent onLoad={onDataLoad}>
+    <DataTable value={products}>
+        <Column field="code" header="Code"></Column>
+        <Column field="name" header="Name"></Column>
+        <Column field="category" header="Category"></Column>
+        <Column field="quantity" header="Quantity"></Column>
+    </DataTable>
+</DeferredContent>
+        `,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { DeferredContent } from 'primereact/deferredcontent';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { ProductService } from './service/ProductService';
+
+export default function DataTableDemo() {
+    const toast = useRef(null);
+    const [products, setProducts] = useState(null);
+
+    const onDataLoad = () => {
+        ProductService.getProductsSmall().then(data => setProducts(data));
+        toast.current.show({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed' });
+    }
+
+    return (
+        <div className="card">
+            <p style={{marginBottom: '70rem', textAlign: 'center'}}>Scroll down to lazy load a DataTable.</p>
+            <Toast ref={toast} />
+            <DeferredContent onLoad={onDataLoad}>
+                <DataTable value={products}>
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </DeferredContent>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { DeferredContent } from 'primereact/deferredcontent';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Toast } from 'primereact/toast';
+import { ProductService } from './service/ProductService';
+
+export default function DataTableDemo() {
+    const toast = useRef<Toast>(null);
+    const [products, setProducts] = useState(null);
+
+    const onDataLoad = () => {
+        ProductService.getProductsSmall().then(data => setProducts(data));
+        toast.current.show({ severity: 'success', summary: 'Data Initialized', detail: 'Render Completed' });
+    }
+
+    return (
+        <div className="card">
+            <p style={{marginBottom: '70rem', textAlign: 'center'}}>Scroll down to lazy load a DataTable.</p>
+            <Toast ref={toast} />
+            <DeferredContent onLoad={onDataLoad}>
+                <DataTable value={products}>
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </DeferredContent>
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A practical example that loads only when table becomes visible in viewport.</p>
+            </DocSectionText>
+            <div className="card">
+                <p style={{ marginBottom: '70rem', textAlign: 'center' }}>Scroll down to lazy load a DataTable.</p>
+                <Toast ref={toast} />
+                <DeferredContent onLoad={onDataLoad}>
+                    <DataTable value={products}>
+                        <Column field="code" header="Code" />
+                        <Column field="name" header="Name" />
+                        <Column field="category" header="Category" />
+                        <Column field="quantity" header="Quantity" />
+                    </DataTable>
+                </DeferredContent>
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/deferredcontent/importdoc.js b/components/doc/deferredcontent/importdoc.js
new file mode 100644
index 0000000000..40c5014b77
--- /dev/null
+++ b/components/doc/deferredcontent/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { DeferredContent } from 'primereact/deferredcontent';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/deferredcontent/pt/wireframe.js b/components/doc/deferredcontent/pt/wireframe.js
new file mode 100644
index 0000000000..5208051b17
--- /dev/null
+++ b/components/doc/deferredcontent/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/deferred.jpg" alt="deferred" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/deferredcontent/styledoc.js b/components/doc/deferredcontent/styledoc.js
new file mode 100644
index 0000000000..f4d3eb444b
--- /dev/null
+++ b/components/doc/deferredcontent/styledoc.js
@@ -0,0 +1,11 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Component does not apply any styling.</p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/deferredcontent/theming/styleddoc.js b/components/doc/deferredcontent/theming/styleddoc.js
new file mode 100644
index 0000000000..cc0cdbe712
--- /dev/null
+++ b/components/doc/deferredcontent/theming/styleddoc.js
@@ -0,0 +1,11 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Component does not apply any styling.</p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/dialog/accessibilitydoc.js b/components/doc/dialog/accessibilitydoc.js
new file mode 100644
index 0000000000..dd589e2892
--- /dev/null
+++ b/components/doc/dialog/accessibilitydoc.js
@@ -0,0 +1,95 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Dialog component uses <i>dialog</i> role along with <i>aria-labelledby</i> referring to the header element however any attribute is passed to the root element so you may use <i>aria-labelledby</i> to override this default behavior. In
+                addition <i>aria-modal</i> is added since focus is kept within the popup.
+            </p>
+            <p>
+                It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding <i>tabIndex</i> would be necessary.
+            </p>
+            <p>
+                Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.
+            </p>
+            <p>
+                Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="http://github.com/locale">locale</Link> API by default, you may use
+                <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+            </p>
+            <CodeHighlight>
+                {`
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} aria-controls={visible ? 'dlg' : null} aria-expanded={visible ? true : false} />
+
+<Dialog id="dlg" header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+<p>Content</p>
+</Dialog>
+`}
+            </CodeHighlight>
+
+            <h3>Overlay Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element within the dialog.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element within the dialog.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>
+                                Closes the dialog if <i>closeOnEscape</i> is true.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the dialog.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the dialog.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/dialog/basicdoc.js b/components/doc/dialog/basicdoc.js
new file mode 100644
index 0000000000..584e8846d1
--- /dev/null
+++ b/components/doc/dialog/basicdoc.js
@@ -0,0 +1,97 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function BasicDoc() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Dialog is used as a container and visibility is controlled with a binding to <i>visible</i> and <i>onHide</i> event callback. Dialogs are <i>draggable</i> and <i>resizable</i> by default.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/footerdoc.js b/components/doc/dialog/footerdoc.js
new file mode 100644
index 0000000000..4f5056a727
--- /dev/null
+++ b/components/doc/dialog/footerdoc.js
@@ -0,0 +1,116 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function FooterDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const footerContent = (
+        <div>
+            <Button label="No" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+            <Button label="Yes" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function FooterDemo() {
+    const [visible, setVisible] = useState(false);
+    const footerContent = (
+        <div>
+            <Button label="No" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+            <Button label="Yes" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function FooterDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const footerContent = (
+        <div>
+            <Button label="No" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+            <Button label="Yes" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content such as buttons can be placed at the footer section with the <i>footer</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                    footer={footerContent}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/headlessdoc.js b/components/doc/dialog/headlessdoc.js
new file mode 100644
index 0000000000..d373a8fdaf
--- /dev/null
+++ b/components/doc/dialog/headlessdoc.js
@@ -0,0 +1,208 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { InputText } from '@/components/lib/primereact.all';
+import { useState } from 'react';
+
+export function HeadlessDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<Button label="Login" icon="pi pi-user" onClick={() => setVisible(true)} />
+<Dialog
+    visible={visible}
+    modal
+    onHide={() => {if (!visible) return; setVisible(false); }}
+    content={({ hide }) => (
+        <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
+            <...>
+        </div>
+    )}
+></Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function HeadlessDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Login" icon="pi pi-user" onClick={() => setVisible(true)} />
+            <Dialog
+                visible={visible}
+                modal
+                onHide={() => {if (!visible) return; setVisible(false); }}
+                content={({ hide }) => (
+                    <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
+                        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" className="block mx-auto">
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="white"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="white" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="white" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="white" />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="white" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="white" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="white" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="white" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="white" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="white" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="white" />
+                        </svg>
+                        <div className="inline-flex flex-column gap-2">
+                            <label htmlFor="username" className="text-primary-50 font-semibold">
+                                Username
+                            </label>
+                            <InputText id="username" label="Username" className="bg-white-alpha-20 border-none p-3 text-primary-50"></InputText>
+                        </div>
+                        <div className="inline-flex flex-column gap-2">
+                            <label htmlFor="username" className="text-primary-50 font-semibold">
+                                Username
+                            </label>
+                            <InputText id="password" label="Password" className="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
+                        </div>
+                        <div className="flex align-items-center gap-2">
+                            <Button label="Sign-In" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                            <Button label="Cancel" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        </div>
+                    </div>
+                )}
+            ></Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function HeadlessDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Login" icon="pi pi-user" onClick={() => setVisible(true)} />
+            <Dialog
+                visible={visible}
+                modal
+                onHide={() => {if (!visible) return; setVisible(false); }}
+                content={({ hide }) => (
+                    <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
+                        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" className="block mx-auto">
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="white"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="white" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="white" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="white" />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="white" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="white" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="white" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="white" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="white" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="white" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="white" />
+                        </svg>
+                        <div className="inline-flex flex-column gap-2">
+                            <label htmlFor="username" className="text-primary-50 font-semibold">
+                                Username
+                            </label>
+                            <InputText id="username" label="Username" className="bg-white-alpha-20 border-none p-3 text-primary-50"></InputText>
+                        </div>
+                        <div className="inline-flex flex-column gap-2">
+                            <label htmlFor="username" className="text-primary-50 font-semibold">
+                                Username
+                            </label>
+                            <InputText id="password" label="Password" className="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"></InputText>
+                        </div>
+                        <div className="flex align-items-center gap-2">
+                            <Button label="Sign-In" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                            <Button label="Cancel" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10"></Button>
+                        </div>
+                    </div>
+                )}
+            ></Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Headless mode is enabled by defining a <i>content</i> prop that lets you implement entire dialog UI instead of the default elements.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Login" icon="pi pi-user" onClick={() => setVisible(true)} />
+                <Dialog
+                    visible={visible}
+                    modal
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                    content={({ hide }) => (
+                        <div className="flex flex-column px-8 py-5 gap-4" style={{ borderRadius: '12px', backgroundImage: 'radial-gradient(circle at left top, var(--primary-400), var(--primary-700))' }}>
+                            <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg" className="block mx-auto">
+                                <g mask="url(#mask0_2642_713)">
+                                    <path
+                                        fillRule="evenodd"
+                                        clipRule="evenodd"
+                                        d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                        fill="white"
+                                    />
+                                </g>
+                                <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="white" />
+                                <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="white" />
+                                <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="white" />
+                                <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="white" />
+                                <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="white" />
+                                <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="white" />
+                                <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="white" />
+                                <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="white" />
+                                <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="white" />
+                                <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="white" />
+                            </svg>
+                            <div className="inline-flex flex-column gap-2">
+                                <label htmlFor="username" className="text-primary-50 font-semibold">
+                                    Username
+                                </label>
+                                <InputText id="username" label="Username" className="bg-white-alpha-20 border-none p-3 text-primary-50" />
+                            </div>
+                            <div className="inline-flex flex-column gap-2">
+                                <label htmlFor="username" className="text-primary-50 font-semibold">
+                                    Username
+                                </label>
+                                <InputText id="password" label="Password" className="bg-white-alpha-20 border-none p-3 text-primary-50" type="password" />
+                            </div>
+                            <div className="flex align-items-center gap-2">
+                                <Button label="Sign-In" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" />
+                                <Button label="Cancel" onClick={(e) => hide(e)} text className="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" />
+                            </div>
+                        </div>
+                    )}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/importdoc.js b/components/doc/dialog/importdoc.js
new file mode 100644
index 0000000000..156b95a0bb
--- /dev/null
+++ b/components/doc/dialog/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Dialog } from 'primereact/dialog';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/dialog/longcontentdoc.js b/components/doc/dialog/longcontentdoc.js
new file mode 100644
index 0000000000..18d3f9e9ca
--- /dev/null
+++ b/components/doc/dialog/longcontentdoc.js
@@ -0,0 +1,201 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function LongContentDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+    <p className="mb-5">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p className="mb-5">
+        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    </p>
+    <p className="mb-5">
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    </p>
+    <p className="mb-5">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p className="mb-5">
+        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    </p>
+    <p className="mb-5">
+        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function LongContentDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="mb-5">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p className="mb-5">
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                    ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                </p>
+                <p className="mb-5">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                    qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                    maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                    non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                </p>
+                <p className="mb-5">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p className="mb-5">
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                    ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                </p>
+                <p className="mb-5">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                    qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                    maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                    non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function LongContentDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="mb-5">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p className="mb-5">
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                    ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                </p>
+                <p className="mb-5">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                    qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                    maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                    non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                </p>
+                <p className="mb-5">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p className="mb-5">
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                    adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                    ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                </p>
+                <p className="mb-5">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                    qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                    maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                    non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Dialog automatically displays a scroller when content exceeeds viewport.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
+                    <p className="mb-5">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <p className="mb-5">
+                        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                    </p>
+                    <p className="mb-5">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                    </p>
+                    <p className="mb-5">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <p className="mb-5">
+                        "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+                        adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
+                        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+                    </p>
+                    <p className="mb-5">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
+                        maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae
+                        non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/maximizabledoc.js b/components/doc/dialog/maximizabledoc.js
new file mode 100644
index 0000000000..ca7dce6042
--- /dev/null
+++ b/components/doc/dialog/maximizabledoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function MaximizableDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+<Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function MaximizableDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function MaximizableDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} maximizable style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Adding <i>maximizable</i> property enables the full screen mode.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    maximizable
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/positiondoc.js b/components/doc/dialog/positiondoc.js
new file mode 100644
index 0000000000..2aa1dd6ef6
--- /dev/null
+++ b/components/doc/dialog/positiondoc.js
@@ -0,0 +1,193 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function PositionDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState('center');
+    const footerContent = (
+        <div>
+            <Button label="No" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+            <Button label="Yes" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    const show = (position) => {
+        setPosition(position);
+        setVisible(true);
+    };
+
+    const code = {
+        basic: `
+<div className="flex flex-wrap justify-content-center gap-2 mb-2">
+    <Button label="Left" icon="pi pi-arrow-right" onClick={() => show('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+    <Button label="Right" icon="pi pi-arrow-left" onClick={() => show('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+</div>
+<div className="flex flex-wrap justify-content-center gap-2 mb-2">
+    <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => show('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+    <Button label="Top" icon="pi pi-arrow-down" onClick={() => show('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+    <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => show('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+</div>
+<div className="flex flex-wrap justify-content-center gap-2">
+    <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => show('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+    <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => show('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+    <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+</div>
+
+<Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent} draggable={false} resizable={false}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+
+export default function PositionDemo() {
+    const [visible, setVisible] = useState(false);
+    const [position, setPosition] = useState('center');
+    const footerContent = (
+        <div>
+            <Button label="No" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+            <Button label="Yes" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    const show = (position) => {
+        setPosition(position);
+        setVisible(true);
+    };
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="Left" icon="pi pi-arrow-right" onClick={() => show('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                <Button label="Right" icon="pi pi-arrow-left" onClick={() => show('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => show('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="Top" icon="pi pi-arrow-down" onClick={() => show('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => show('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2">
+                <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => show('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => show('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+            </div>
+
+            <Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent} draggable={false} resizable={false}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+
+export default function PositionDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const [position, setPosition] = useState<string>('center');
+    const footerContent = (
+        <div>
+            <Button label="No" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+            <Button label="Yes" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    const show = (position: string) => {
+        setPosition(position);
+        setVisible(true);
+    };
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="Left" icon="pi pi-arrow-right" onClick={() => show('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                <Button label="Right" icon="pi pi-arrow-left" onClick={() => show('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => show('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="Top" icon="pi pi-arrow-down" onClick={() => show('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => show('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+            </div>
+            <div className="flex flex-wrap justify-content-center gap-2">
+                <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => show('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => show('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+            </div>
+
+            <Dialog header="Header" visible={visible} position={position} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }} footer={footerContent} draggable={false} resizable={false}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>position</i> property is used to display a Dialog at all edges and corners of the screen.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                    <Button label="Left" icon="pi pi-arrow-right" onClick={() => show('left')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                    <Button label="Right" icon="pi pi-arrow-left" onClick={() => show('right')} className="p-button-help" style={{ minWidth: '10rem' }} />
+                </div>
+                <div className="flex flex-wrap justify-content-center gap-2 mb-2">
+                    <Button label="TopLeft" icon="pi pi-arrow-down-right" onClick={() => show('top-left')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                    <Button label="Top" icon="pi pi-arrow-down" onClick={() => show('top')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                    <Button label="TopRight" icon="pi pi-arrow-down-left" onClick={() => show('top-right')} className="p-button-warning" style={{ minWidth: '10rem' }} />
+                </div>
+                <div className="flex flex-wrap justify-content-center gap-2">
+                    <Button label="BottomLeft" icon="pi pi-arrow-up-right" onClick={() => show('bottom-left')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                    <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => show('bottom')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                    <Button label="BottomRight" icon="pi pi-arrow-up-left" onClick={() => show('bottom-right')} className="p-button-success" style={{ minWidth: '10rem' }} />
+                </div>
+
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    position={position}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                    footer={footerContent}
+                    draggable={false}
+                    resizable={false}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/pt/wireframe.js b/components/doc/dialog/pt/wireframe.js
new file mode 100644
index 0000000000..abbfdd8bb3
--- /dev/null
+++ b/components/doc/dialog/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/dialog.jpg" alt="dialog" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/dialog/responsivedoc.js b/components/doc/dialog/responsivedoc.js
new file mode 100644
index 0000000000..9f912614d0
--- /dev/null
+++ b/components/doc/dialog/responsivedoc.js
@@ -0,0 +1,102 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function ResponsiveDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+<Dialog header="Header" visible={visible} onHide={() => {if (!visible) return; setVisible(false); }}
+    style={{ width: '50vw' }} breakpoints={{ '960px': '75vw', '641px': '100vw' }}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function ResponsiveDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} onHide={() => {if (!visible) return; setVisible(false); }}
+                style={{ width: '50vw' }} breakpoints={{ '960px': '75vw', '641px': '100vw' }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function ResponsiveDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} onHide={() => {if (!visible) return; setVisible(false); }}
+                style={{ width: '50vw' }} breakpoints={{ '960px': '75vw', '641px': '100vw' }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Dialog width can be adjusted per screen size with the <i>breakpoints</i> option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in <i>style</i>{' '}
+                    property is used
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                    style={{ width: '50vw' }}
+                    breakpoints={{ '960px': '75vw', '641px': '100vw' }}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/styledoc.js b/components/doc/dialog/styledoc.js
new file mode 100644
index 0000000000..b8cc447e27
--- /dev/null
+++ b/components/doc/dialog/styledoc.js
@@ -0,0 +1,50 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dialog</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-titlebar</td>
+                            <td>Container of header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-title</td>
+                            <td>Header element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-titlebar-icon</td>
+                            <td>Icon container inside header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-titlebar-close</td>
+                            <td>Close icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-content</td>
+                            <td>Content element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dialog/templatedoc.js b/components/doc/dialog/templatedoc.js
new file mode 100644
index 0000000000..780dd0e69c
--- /dev/null
+++ b/components/doc/dialog/templatedoc.js
@@ -0,0 +1,135 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const headerElement = (
+        <div className="inline-flex align-items-center justify-content-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold white-space-nowrap">Amy Elsner</span>
+        </div>
+    );
+
+    const footerContent = (
+        <div>
+            <Button label="Ok" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+
+export default function TemplateDemo() {
+    const [visible, setVisible] = useState(false);
+
+    const headerElement = (
+        <div className="inline-flex align-items-center justify-content-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold white-space-nowrap">Amy Elsner</span>
+        </div>
+    );
+
+    const footerContent = (
+        <div>
+            <Button label="Ok" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog visible={visible} modal header={headerElement} footer={footerContent} style={{ width: '50rem' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+
+export default function TemplateDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    const headerElement = (
+        <div className="inline-flex align-items-center justify-content-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold white-space-nowrap">Amy Elsner</span>
+        </div>
+    );
+
+    const footerContent = (
+        <div>
+            <Button label="Ok" icon="pi pi-check" onClick={() => setVisible(false)} autoFocus />
+        </div>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog visible={visible} modal header={headerElement} footer={footerContent} style={{ width: '50rem' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Header and Footer sections allow customization via templating.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+                <Dialog
+                    visible={visible}
+                    modal
+                    header={headerElement}
+                    footer={footerContent}
+                    style={{ width: '50rem' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dialog/theming/styleddoc.js b/components/doc/dialog/theming/styleddoc.js
new file mode 100644
index 0000000000..a505b64293
--- /dev/null
+++ b/components/doc/dialog/theming/styleddoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dialog</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-header</td>
+                            <td>Container of header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-title</td>
+                            <td>Header element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-header-icons</td>
+                            <td>Icon container inside header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-header-close</td>
+                            <td>Close icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-header-maximize</td>
+                            <td>Maximize icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dialog-content</td>
+                            <td>Content element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dialog/theming/tailwinddoc.js b/components/doc/dialog/theming/tailwinddoc.js
new file mode 100644
index 0000000000..c1cafae6c2
--- /dev/null
+++ b/components/doc/dialog/theming/tailwinddoc.js
@@ -0,0 +1,121 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    dialog: {
+        root: ({ state }) => ({
+            className: classNames('rounded-lg shadow-lg border-0', 'max-h-[90%] transform scale-100', 'm-0 w-[50vw]', 'dark:border dark:border-blue-900/40', {
+                'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized
+            })
+        }),
+        header: {
+            className: classNames('flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900  dark:text-white/80')
+        },
+        headerTitle: 'font-bold text-lg',
+        headerIcons: 'flex items-center',
+        closeButton: {
+            className: classNames(
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
+                'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
+        content: ({ state }) => ({
+            className: classNames('overflow-y-auto', 'bg-white text-gray-700 px-6 pb-8 pt-0', 'rounded-bl-lg rounded-br-lg', 'dark:bg-gray-900  dark:text-white/80 ', {
+                grow: state.maximized
+            })
+        }),
+        footer: {
+            className: classNames('shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900  dark:text-white/80')
+        },
+        mask: ({ state }) => ({
+            className: classNames('transition duration-200', { 'bg-black/40': state.containerVisible })
+        }),
+        transition: ({ props }) => {
+            return props.position === 'top'
+                ? {
+                      enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
+                      enterActiveClass: 'transition-all duration-200 ease-out',
+                      leaveActiveClass: 'transition-all duration-200 ease-out',
+                      leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0'
+                  }
+                : props.position === 'bottom'
+                ? {
+                      enterFromClass: 'opacity-0 scale-75 translate-y-full',
+                      enterActiveClass: 'transition-all duration-200 ease-out',
+                      leaveActiveClass: 'transition-all duration-200 ease-out',
+                      leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0'
+                  }
+                : props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left'
+                ? {
+                      enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
+                      enterActiveClass: 'transition-all duration-200 ease-out',
+                      leaveActiveClass: 'transition-all duration-200 ease-out',
+                      leaveToClass: 'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0'
+                  }
+                : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right'
+                ? {
+                      enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
+                      enterActiveClass: 'transition-all duration-200 ease-out',
+                      leaveActiveClass: 'transition-all duration-200 ease-out',
+                      leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0'
+                  }
+                : {
+                      enterFromClass: 'opacity-0 scale-75',
+                      enterActiveClass: 'transition-all duration-200 ease-out',
+                      leaveActiveClass: 'transition-all duration-200 ease-out',
+                      leaveToClass: 'opacity-0 scale-75'
+                  };
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function UnstyledDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/dialog/withoutmodaldoc.js b/components/doc/dialog/withoutmodaldoc.js
new file mode 100644
index 0000000000..98e66a11b2
--- /dev/null
+++ b/components/doc/dialog/withoutmodaldoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { useState } from 'react';
+
+export function WithoutModalDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+<Dialog header="Header" visible={visible} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Dialog>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function WithoutModalDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} modal={false} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+
+export default function WithoutModalDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+            <Dialog header="Header" visible={visible} modal={false} style={{ width: '50vw' }} onHide={() => {if (!visible) return; setVisible(false); }}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Dialog>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Mask layer behind the Dialog can be turned off by disabling the <i>modal</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} />
+                <Dialog
+                    header="Header"
+                    visible={visible}
+                    modal={false}
+                    style={{ width: '50vw' }}
+                    onHide={() => {
+                        if (!visible) return;
+                        setVisible(false);
+                    }}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Dialog>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/divider/accessibilitydoc.js b/components/doc/divider/accessibilitydoc.js
new file mode 100644
index 0000000000..e6b4b1756d
--- /dev/null
+++ b/components/doc/divider/accessibilitydoc.js
@@ -0,0 +1,15 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Divider uses a <i>separator</i> role with <i>aria-orientation</i> set to either "horizontal" or "vertical".
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/divider/basicdoc.js b/components/doc/divider/basicdoc.js
new file mode 100644
index 0000000000..cdf89a6fd2
--- /dev/null
+++ b/components/doc/divider/basicdoc.js
@@ -0,0 +1,119 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Divider } from '@/components/lib/divider/Divider';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+<Divider />
+<p>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+<Divider />
+<p>
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+<Divider />
+<p>
+    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+</p>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider />
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider />
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <Divider />
+            <p>
+                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+            </p>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider />
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider />
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <Divider />
+            <p>
+                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+            </p>
+        </div>  
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Divider is basically placed between the items to separate.</p>
+            </DocSectionText>
+            <div className="card">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <Divider />
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+                <Divider />
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+                <Divider />
+                <p>
+                    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+                </p>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/divider/contentdoc.js b/components/doc/divider/contentdoc.js
new file mode 100644
index 0000000000..118c27445d
--- /dev/null
+++ b/components/doc/divider/contentdoc.js
@@ -0,0 +1,161 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Divider } from '@/components/lib/divider/Divider';
+
+export function ContentDoc(props) {
+    const code = {
+        basic: `
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+<Divider align="left">
+    <div className="inline-flex align-items-center">
+        <i className="pi pi-user mr-2"></i>
+        <b>Text</b>
+    </div>
+</Divider>
+<p>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+<Divider align="center">
+    <span className="p-tag">Badge</span>
+</Divider>
+<p>
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+<Divider align="right">
+    <Button label="Button" icon="pi pi-search" className="p-button-outlined"></Button>
+</Divider>
+<p>
+    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+</p>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+import { Button } from 'primereact/button';
+
+export default function ContentDemo() {
+    return (
+        <div className="card">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider align="left">
+                <div className="inline-flex align-items-center">
+                    <i className="pi pi-user mr-2"></i>
+                    <b>Text</b>
+                </div>
+            </Divider>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider align="center">
+                <span className="p-tag">Badge</span>
+            </Divider>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <Divider align="right">
+                <Button label="Button" icon="pi pi-search" className="p-button-outlined"></Button>
+            </Divider>
+            <p>
+                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+            </p>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+import { Button } from 'primereact/button';
+
+export default function ContentDemo() {
+    return (
+        <div className="card">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider align="left">
+                <div className="inline-flex align-items-center">
+                    <i className="pi pi-user mr-2"></i>
+                    <b>Text</b>
+                </div>
+            </Divider>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider align="center">
+                <span className="p-tag">Badge</span>
+            </Divider>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <Divider align="right">
+                <Button label="Button" icon="pi pi-search" className="p-button-outlined"></Button>
+            </Divider>
+            <p>
+                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+            </p>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Children are rendered within the boundaries of the divider where location of the content is configured with the <i>align</i> property. In horizontal layout, alignment options are <i>left</i>, <i>center</i> and
+                    <i>right</i> whereas vertical mode supports <i>top</i>, <i>center</i> and <i>bottom</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <Divider align="left">
+                    <div className="inline-flex align-items-center">
+                        <i className="pi pi-user mr-2" />
+                        <b>Text</b>
+                    </div>
+                </Divider>
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+                <Divider align="center">
+                    <span className="p-tag">Badge</span>
+                </Divider>
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+                <Divider align="right">
+                    <Button label="Button" icon="pi pi-search" className="p-button-outlined" />
+                </Divider>
+                <p>
+                    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+                </p>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/divider/importdoc.js b/components/doc/divider/importdoc.js
new file mode 100644
index 0000000000..e74de32097
--- /dev/null
+++ b/components/doc/divider/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Divider } from 'primereact/divider';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/divider/logindoc.js b/components/doc/divider/logindoc.js
new file mode 100644
index 0000000000..6d92b58680
--- /dev/null
+++ b/components/doc/divider/logindoc.js
@@ -0,0 +1,148 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Divider } from '@/components/lib/divider/Divider';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function LoginDoc(props) {
+    const code = {
+        basic: `
+<div className="card">
+    <div className="flex flex-column md:flex-row">
+        <div className="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
+            <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                <label className="w-6rem">Username</label>
+                <InputText id="username" type="text" className="w-12rem" />
+            </div>
+            <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                <label className="w-6rem">Password</label>
+                <InputText id="password" type="password" className="w-12rem" />
+            </div>
+            <Button label="Login" icon="pi pi-user" className="w-10rem mx-auto"></Button>
+        </div>
+        <div className="w-full md:w-2">
+            <Divider layout="vertical" className="hidden md:flex">
+                <b>OR</b>
+            </Divider>
+            <Divider layout="horizontal" className="flex md:hidden" align="center">
+                <b>OR</b>
+            </Divider>
+        </div>
+        <div className="w-full md:w-5 flex align-items-center justify-content-center py-5">
+            <Button label="Sign Up" icon="pi pi-user-plus" severity="success" className="w-10rem"></Button>
+        </div>
+    </div>
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+export default function LoginDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-column md:flex-row">
+                <div className="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
+                    <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                        <label className="w-6rem">Username</label>
+                        <InputText id="username" type="text" className="w-12rem" />
+                    </div>
+                    <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                        <label className="w-6rem">Password</label>
+                        <InputText id="password" type="password" className="w-12rem" />
+                    </div>
+                    <Button label="Login" icon="pi pi-user" className="w-10rem mx-auto"></Button>
+                </div>
+                <div className="w-full md:w-2">
+                    <Divider layout="vertical" className="hidden md:flex">
+                        <b>OR</b>
+                    </Divider>
+                    <Divider layout="horizontal" className="flex md:hidden" align="center">
+                        <b>OR</b>
+                    </Divider>
+                </div>
+                <div className="w-full md:w-5 flex align-items-center justify-content-center py-5">
+                    <Button label="Sign Up" icon="pi pi-user-plus" severity="success" className="w-10rem"></Button>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+export default function LoginDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-column md:flex-row">
+                <div className="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
+                    <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                        <label className="w-6rem">Username</label>
+                        <InputText id="username" type="text" className="w-12rem" />
+                    </div>
+                    <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                        <label className="w-6rem">Password</label>
+                        <InputText id="password" type="password" className="w-12rem" />
+                    </div>
+                    <Button label="Login" icon="pi pi-user" className="w-10rem mx-auto"></Button>
+                </div>
+                <div className="w-full md:w-2">
+                    <Divider layout="vertical" className="hidden md:flex">
+                        <b>OR</b>
+                    </Divider>
+                    <Divider layout="horizontal" className="flex md:hidden" align="center">
+                        <b>OR</b>
+                    </Divider>
+                </div>
+                <div className="w-full md:w-5 flex align-items-center justify-content-center py-5">
+                    <Button label="Sign Up" icon="pi pi-user-plus" severity="success" className="w-10rem"></Button>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Sample implementation of a login form using a divider with content.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-column md:flex-row">
+                    <div className="w-full md:w-5 flex flex-column align-items-center justify-content-center gap-3 py-5">
+                        <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                            <label className="w-6rem">Username</label>
+                            <InputText id="username" type="text" className="w-12rem" />
+                        </div>
+                        <div className="flex flex-wrap justify-content-center align-items-center gap-2">
+                            <label className="w-6rem">Password</label>
+                            <InputText id="password" type="password" className="w-12rem" />
+                        </div>
+                        <Button label="Login" icon="pi pi-user" className="w-10rem mx-auto" />
+                    </div>
+                    <div className="w-full md:w-2">
+                        <Divider layout="vertical" className="hidden md:flex">
+                            <b>OR</b>
+                        </Divider>
+                        <Divider layout="horizontal" className="flex md:hidden" align="center">
+                            <b>OR</b>
+                        </Divider>
+                    </div>
+                    <div className="w-full md:w-5 flex align-items-center justify-content-center py-5">
+                        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" className="w-10rem" />
+                    </div>
+                </div>
+            </div>
+
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/divider/pt/wireframe.js b/components/doc/divider/pt/wireframe.js
new file mode 100644
index 0000000000..879764a229
--- /dev/null
+++ b/components/doc/divider/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/divider.jpg" alt="divider" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/divider/styledoc.js b/components/doc/divider/styledoc.js
new file mode 100644
index 0000000000..ae432f5daf
--- /dev/null
+++ b/components/doc/divider/styledoc.js
@@ -0,0 +1,70 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-divider</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-horizontal</td>
+                            <td>Container element in horizontal layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-vertical</td>
+                            <td>Container element in vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-solid</td>
+                            <td>Container element with solid border.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-dashed</td>
+                            <td>Container element with dashed border.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-dotted</td>
+                            <td>Container element with dotted border.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-left</td>
+                            <td>Container element with content aligned to left.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-right</td>
+                            <td>Container element with content aligned to right.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-center</td>
+                            <td>Container element with content aligned to center.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-bottom</td>
+                            <td>Container element with content aligned to bottom.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-top</td>
+                            <td>Container element with content aligned to top.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/divider/theming/styleddoc.js b/components/doc/divider/theming/styleddoc.js
new file mode 100644
index 0000000000..5ccec9c9c6
--- /dev/null
+++ b/components/doc/divider/theming/styleddoc.js
@@ -0,0 +1,67 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-divider</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-horizontal</td>
+                            <td>Container element in horizontal layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-vertical</td>
+                            <td>Container element in vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-solid</td>
+                            <td>Container element with solid border.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-dashed</td>
+                            <td>Container element with dashed border.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-dotted</td>
+                            <td>Container element with dotted border.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-left</td>
+                            <td>Container element with content aligned to left.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-right</td>
+                            <td>Container element with content aligned to right.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-center</td>
+                            <td>Container element with content aligned to center.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-bottom</td>
+                            <td>Container element with content aligned to bottom.</td>
+                        </tr>
+                        <tr>
+                            <td>p-divider-top</td>
+                            <td>Container element with content aligned to top.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/divider/theming/tailwinddoc.js b/components/doc/divider/theming/tailwinddoc.js
new file mode 100644
index 0000000000..b4a1978f08
--- /dev/null
+++ b/components/doc/divider/theming/tailwinddoc.js
@@ -0,0 +1,89 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    divider: {
+        root: ({ props }) => ({
+            className: classNames(
+                'flex relative', // alignments.
+                {
+                    'w-full my-5 mx-0 py-0 px-5 before:block before:left-0 before:absolute before:top-1/2 before:w-full before:border-t before:border-gray-300 before:dark:border-blue-900/40': props.layout == 'horizontal', // Padding and borders for horizontal layout.
+                    'min-h-full mx-4 md:mx-5 py-5 before:block before:min-h-full before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2 before:border-l before:border-gray-300 before:dark:border-blue-900/40':
+                        props.layout == 'vertical' // Padding and borders for vertical layout.
+                },
+                {
+                    'before:border-solid': props.type == 'solid',
+                    'before:border-dotted': props.type == 'dotted',
+                    'before:border-dashed': props.type == 'dashed'
+                } // Border type condition.
+            )
+        }),
+        content: 'px-1 bg-white z-10 dark:bg-gray-900' // Padding and background color.
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Divider } from 'primereact/divider';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card text-gray-700 dark:text-white/80">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider align="left">
+                <div className="inline-flex align-items-center">
+                    <b>Left</b>
+                </div>
+            </Divider>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+                voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider align="center" type="dotted">
+                <div className="inline-flex align-items-center">
+                    <b>Center</b>
+                </div>
+            </Divider>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <Divider align="right" type="dashed">
+                <div className="inline-flex align-items-center">
+                    <b>Right</b>
+                </div>
+            </Divider>
+            <p>
+                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+            </p>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/divider/typedoc.js b/components/doc/divider/typedoc.js
new file mode 100644
index 0000000000..14d2559ea3
--- /dev/null
+++ b/components/doc/divider/typedoc.js
@@ -0,0 +1,121 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Divider } from '@/components/lib/divider/Divider';
+
+export function TypeDoc(props) {
+    const code = {
+        basic: `
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+<Divider type="solid" />
+<p>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+<Divider type="dashed"/>
+<p>
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+<Divider type="dotted"/>
+<p>
+    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+</p>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+
+export default function TypeDemo() {
+    return (
+        <div className="card">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider type="solid" />
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider type="dashed"/>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <Divider type="dotted"/>
+            <p>
+                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+            </p>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+
+export default function TypeDemo() {
+    return (
+        <div className="card">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider type="solid" />
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider type="dashed"/>
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+            <Divider type="dotted"/>
+            <p>
+                Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+            </p>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Style of the border is configured with the <i>type</i> property that can either be <i>solid</i>, <i>dotted</i> or <i>dashed</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <Divider type="solid" />
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+                <Divider type="dashed" />
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+                <Divider type="dotted" />
+                <p>
+                    Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
+                    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
+                </p>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/divider/verticaldoc.js b/components/doc/divider/verticaldoc.js
new file mode 100644
index 0000000000..cf8bb8465c
--- /dev/null
+++ b/components/doc/divider/verticaldoc.js
@@ -0,0 +1,101 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Divider } from '@/components/lib/divider/Divider';
+
+export function VerticalDoc(props) {
+    const code = {
+        basic: `
+<p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+<Divider layout="vertical" />
+<p>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+</p>
+<Divider layout="vertical" />
+<p>
+    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+</p>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+
+export default function VerticalDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider layout="vertical" />
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider layout="vertical" />
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Divider } from 'primereact/divider';
+
+export default function VerticalDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <Divider layout="vertical" />
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+            </p>
+            <Divider layout="vertical" />
+            <p>
+                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+            </p>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Vertical divider is enabled by setting the <i>layout</i> property as <i>vertical</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <Divider layout="vertical" />
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+                <Divider layout="vertical" />
+                <p>
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
+                    officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dock/accessibilitydoc.js b/components/doc/dock/accessibilitydoc.js
new file mode 100644
index 0000000000..7c943470f2
--- /dev/null
+++ b/components/doc/dock/accessibilitydoc.js
@@ -0,0 +1,75 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Dock component uses the <i>menu</i> role with the <i>aria-orientation</i> and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role
+                whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next menuitem in vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous menuitem in vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first menuitem in horizontal layout.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last menuitem in horizontal layout.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/dock/advanceddoc.js b/components/doc/dock/advanceddoc.js
new file mode 100644
index 0000000000..7177a06066
--- /dev/null
+++ b/components/doc/dock/advanceddoc.js
@@ -0,0 +1,1051 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import PrimeReact, { PrimeReactContext } from '@/components/lib/api/Api';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { Dock } from '@/components/lib/dock/Dock';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { Menubar } from '@/components/lib/menubar/Menubar';
+import { Terminal } from '@/components/lib/terminal/Terminal';
+import { TerminalService } from '@/components/lib/terminalservice/TerminalService';
+import { Toast } from '@/components/lib/toast/Toast';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+import { Tree } from '@/components/lib/tree/Tree';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function AdvancedDoc(props) {
+    const [displayTerminal, setDisplayTerminal] = useState(false);
+    const [displayFinder, setDisplayFinder] = useState(false);
+    const [images, setImages] = useState(null);
+    const [nodes, setNodes] = useState(null);
+    const toast = useRef(null);
+    const toast2 = useRef(null);
+    const galleria = useRef(null);
+    const context = useContext(PrimeReactContext);
+
+    const dockItems = [
+        {
+            label: 'Finder',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
+            command: () => {
+                setDisplayFinder(true);
+            }
+        },
+        {
+            label: 'Terminal',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/terminal.svg" width="100%" />,
+            command: () => {
+                setDisplayTerminal(true);
+            }
+        },
+        {
+            label: 'App Store',
+            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
+            command: () => {
+                toast2.current.show({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE' });
+            }
+        },
+        {
+            label: 'Safari',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/safari.svg" width="100%" />,
+            command: () => {
+                toast2.current.show({ severity: 'warn', summary: 'Safari has stopped working' });
+            }
+        },
+        {
+            label: 'Photos',
+            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
+            command: () => {
+                galleria.current.show();
+            }
+        },
+        {
+            label: 'GitHub',
+            icon: () => <img alt="Settings" src="https://primefaces.org/cdn/primereact/images/dock/github.svg" width="100%" />
+        },
+        {
+            label: 'Trash',
+            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Empty Trash' });
+            }
+        }
+    ];
+
+    const menubarItems = [
+        {
+            label: 'Finder',
+            className: 'menubar-root'
+        },
+        {
+            label: 'File',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-plus',
+                    items: [
+                        {
+                            label: 'Bookmark',
+                            icon: 'pi pi-fw pi-bookmark'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-fw pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-trash'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            items: [
+                {
+                    label: 'Left',
+                    icon: 'pi pi-fw pi-align-left'
+                },
+                {
+                    label: 'Right',
+                    icon: 'pi pi-fw pi-align-right'
+                },
+                {
+                    label: 'Center',
+                    icon: 'pi pi-fw pi-align-center'
+                },
+                {
+                    label: 'Justify',
+                    icon: 'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label: 'Users',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-user-minus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        {
+                            label: 'Filter',
+                            icon: 'pi pi-fw pi-filter',
+                            items: [
+                                {
+                                    label: 'Print',
+                                    icon: 'pi pi-fw pi-print'
+                                }
+                            ]
+                        },
+                        {
+                            icon: 'pi pi-fw pi-bars',
+                            label: 'List'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Events',
+            items: [
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Save',
+                            icon: 'pi pi-fw pi-calendar-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                },
+                {
+                    label: 'Archive',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Quit'
+        }
+    ];
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 2
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const commandHandler = (text) => {
+        let response;
+        let argsIndex = text.indexOf(' ');
+        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+        switch (command) {
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
+
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
+
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
+
+            case 'clear':
+                response = null;
+                break;
+
+            default:
+                response = 'Unknown command: ' + command;
+                break;
+        }
+
+        if (response) {
+            TerminalService.emit('response', response);
+        } else {
+            TerminalService.emit('clear');
+        }
+    };
+
+    useEffect(() => {
+        TerminalService.on('command', commandHandler);
+
+        PhotoService.getImages().then((data) => setImages(data));
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+
+        if (context) {
+            context.setAppendTo('self');
+        } else {
+            PrimeReact.appendTo = 'self';
+        }
+
+        return () => {
+            TerminalService.off('command', commandHandler);
+
+            // reset
+            if (context) {
+                context.setAppendTo(null);
+            } else {
+                PrimeReact.appendTo = null;
+            }
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const start = <i className="pi pi-apple" />;
+    const end = (
+        <React.Fragment>
+            <i className="pi pi-video" />
+            <i className="pi pi-wifi" />
+            <i className="pi pi-volume-up" />
+            <span>Fri 13:07</span>
+            <i className="pi pi-search" />
+            <i className="pi pi-bars" />
+        </React.Fragment>
+    );
+    const code = {
+        basic: `
+<Tooltip className="dark-tooltip" target=".dock-advanced .p-dock-action" my="center+15 bottom-15" at="center top" showDelay={150} />
+<Menubar model={menubarItems} start={start} end={end} />
+<div className="dock-window dock-advanced">
+    <Toast ref={toast} />
+    <Toast ref={toast2} position="top-center" />
+    <Dock model={dockItems} />
+    <Dialog visible={displayTerminal} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw' }} onHide={() => setDisplayTerminal(false)} maximizable blockScroll={false}>
+        <Terminal welcomeMessage="Welcome to PrimeReact (cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primereact $" />
+    </Dialog>
+    <Dialog visible={displayFinder} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw', height: '18rem' }} onHide={() => setDisplayFinder(false)} maximizable blockScroll={false}>
+        <Tree value={nodes} />
+    </Dialog>
+    <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={2} style={{ width: '400px' }}
+        circular fullScreen showThumbnails={false} showItemNavigators item={itemTemplate} />
+</div>
+`,
+        javascript: `
+import React, { useRef, useState, useEffect } from 'react';
+import { Dock } from 'primereact/dock';
+import { Tooltip } from 'primereact/tooltip';
+import { Dialog } from 'primereact/dialog';
+import { Terminal } from 'primereact/terminal';
+import { TerminalService } from 'primereact/terminalservice';
+import { Galleria } from 'primereact/galleria';
+import { Toast } from 'primereact/toast';
+import { Tree } from 'primereact/tree';
+import { Menubar } from 'primereact/menubar';
+import { NodeService } from './service/NodeService';
+import { PhotoService } from './service/PhotoService';
+import './DockDemo.css';
+
+export default function AdvanceDemo() {
+    const [displayTerminal, setDisplayTerminal] = useState(false);
+    const [displayFinder, setDisplayFinder] = useState(false);
+    const [images, setImages] = useState(null);
+    const [nodes, setNodes] = useState(null);
+    const toast = useRef(null);
+    const toast2 = useRef(null);
+    const galleria = useRef(null);
+
+    const dockItems = [
+        {
+            label: 'Finder',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
+            command: () => {
+                setDisplayFinder(true);
+            }
+        },
+        {
+            label: 'Terminal',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/terminal.svg" width="100%" />,
+            command: () => {
+                setDisplayTerminal(true);
+            }
+        },
+        {
+            label: 'App Store',
+            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
+            command: () => {
+                toast2.current.show({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE' });
+            }
+        },
+        {
+            label: 'Safari',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/safari.svg" width="100%" />,
+            command: () => {
+                toast2.current.show({ severity: 'warn', summary: 'Safari has stopped working' });
+            }
+        },
+        {
+            label: 'Photos',
+            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
+            command: () => {
+                galleria.current.show();
+            }
+        },
+        {
+            label: 'GitHub',
+            icon: () => <img alt="Settings" src="https://primefaces.org/cdn/primereact/images/dock/github.svg" width="100%" />
+        },
+        {
+            label: 'Trash',
+            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Empty Trash' });
+            }
+        }
+    ];
+
+    const menubarItems = [
+        {
+            label: 'Finder',
+            className: 'menubar-root'
+        },
+        {
+            label: 'File',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-plus',
+                    items: [
+                        {
+                            label: 'Bookmark',
+                            icon: 'pi pi-fw pi-bookmark'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-fw pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-trash'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            items: [
+                {
+                    label: 'Left',
+                    icon: 'pi pi-fw pi-align-left'
+                },
+                {
+                    label: 'Right',
+                    icon: 'pi pi-fw pi-align-right'
+                },
+                {
+                    label: 'Center',
+                    icon: 'pi pi-fw pi-align-center'
+                },
+                {
+                    label: 'Justify',
+                    icon: 'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label: 'Users',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-user-minus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        {
+                            label: 'Filter',
+                            icon: 'pi pi-fw pi-filter',
+                            items: [
+                                {
+                                    label: 'Print',
+                                    icon: 'pi pi-fw pi-print'
+                                }
+                            ]
+                        },
+                        {
+                            icon: 'pi pi-fw pi-bars',
+                            label: 'List'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Events',
+            items: [
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Save',
+                            icon: 'pi pi-fw pi-calendar-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                },
+                {
+                    label: 'Archive',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Quit'
+        }
+    ];
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 2
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const commandHandler = (text) => {
+        let response;
+        let argsIndex = text.indexOf(' ');
+        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+        switch (command) {
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
+
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
+
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
+
+            case 'clear':
+                response = null;
+                break;
+
+            default:
+                response = 'Unknown command: ' + command;
+                break;
+        }
+
+        if (response) {
+            TerminalService.emit('response', response);
+        } else {
+            TerminalService.emit('clear');
+        }
+    };
+
+    useEffect(() => {
+        TerminalService.on('command', commandHandler);
+        PhotoService.getImages().then((data) => setImages(data));
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+
+        setAppendTo('self');
+
+        return () => {
+            TerminalService.off('command', commandHandler);
+
+            // reset
+            setAppendTo(null);
+        };
+    }, []);
+
+    const start = <i className="pi pi-apple"></i>;
+    const end = (
+        <React.Fragment>
+            <i className="pi pi-video" />
+            <i className="pi pi-wifi" />
+            <i className="pi pi-volume-up" />
+            <span>Fri 13:07</span>
+            <i className="pi pi-search" />
+            <i className="pi pi-bars" />
+        </React.Fragment>
+    );
+
+    return (
+        <div className="card dock-demo">
+            <Tooltip className="dark-tooltip" target=".dock-advanced .p-dock-action" my="center+15 bottom-15" at="center top" showDelay={150} />
+            <Menubar model={menubarItems} start={start} end={end} />
+            <div className="dock-window dock-advanced">
+                <Toast ref={toast} />
+                <Toast ref={toast2} position="top-center" />
+                <Dock model={dockItems} />
+                <Dialog visible={displayTerminal} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw' }} onHide={() => setDisplayTerminal(false)} maximizable blockScroll={false}>
+                    <Terminal welcomeMessage="Welcome to PrimeReact (cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primereact $" />
+                </Dialog>
+                <Dialog visible={displayFinder} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw', height: '18rem' }} onHide={() => setDisplayFinder(false)} maximizable blockScroll={false}>
+                    <Tree value={nodes} />
+                </Dialog>
+                <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={2} style={{ width: '400px' }}
+                    circular fullScreen showThumbnails={false} showItemNavigators item={itemTemplate} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef, useState, useEffect } from 'react';
+import { Dock } from 'primereact/dock';
+import { Tooltip } from 'primereact/tooltip';
+import { Dialog } from 'primereact/dialog';
+import { Terminal } from 'primereact/terminal';
+import { TerminalService } from 'primereact/terminalservice';
+import { Galleria } from 'primereact/galleria';
+import { Toast } from 'primereact/toast';
+import { Tree } from 'primereact/tree';
+import { Menubar } from 'primereact/menubar';
+import { MenuItem } from 'primereact/menuitem';
+import { NodeService } from './service/NodeService';
+import { PhotoService } from './service/PhotoService';
+import './DockDemo.css';
+
+export default function AdvanceDemo() {
+    const [displayTerminal, setDisplayTerminal] = useState(false);
+    const [displayFinder, setDisplayFinder] = useState(false);
+    const [images, setImages] = useState(null);
+    const [nodes, setNodes] = useState(null);
+    const toast = useRef<Toast>(null);
+    const toast2 = useRef<Toast>(null);
+    const galleria = useRef<Galleria>(null);
+
+    const dockItems = [
+        {
+            label: 'Finder',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
+            command: () => {
+                setDisplayFinder(true);
+            }
+        },
+        {
+            label: 'Terminal',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/terminal.svg" width="100%" />,
+            command: () => {
+                setDisplayTerminal(true);
+            }
+        },
+        {
+            label: 'App Store',
+            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
+            command: () => {
+                toast2.current.show({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE' });
+            }
+        },
+        {
+            label: 'Safari',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/safari.svg" width="100%" />,
+            command: () => {
+                toast2.current.show({ severity: 'warn', summary: 'Safari has stopped working' });
+            }
+        },
+        {
+            label: 'Photos',
+            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
+            command: () => {
+                galleria.current.show();
+            }
+        },
+        {
+            label: 'GitHub',
+            icon: () => <img alt="Settings" src="https://primefaces.org/cdn/primereact/images/dock/github.svg" width="100%" />
+        },
+        {
+            label: 'Trash',
+            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Empty Trash' });
+            }
+        }
+    ];
+
+    const menubarItems : MenuItem[] = [
+        {
+            label: 'Finder',
+            className: 'menubar-root'
+        },
+        {
+            label: 'File',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-plus',
+                    items: [
+                        {
+                            label: 'Bookmark',
+                            icon: 'pi pi-fw pi-bookmark'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-fw pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-trash'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            items: [
+                {
+                    label: 'Left',
+                    icon: 'pi pi-fw pi-align-left'
+                },
+                {
+                    label: 'Right',
+                    icon: 'pi pi-fw pi-align-right'
+                },
+                {
+                    label: 'Center',
+                    icon: 'pi pi-fw pi-align-center'
+                },
+                {
+                    label: 'Justify',
+                    icon: 'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label: 'Users',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-user-minus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        {
+                            label: 'Filter',
+                            icon: 'pi pi-fw pi-filter',
+                            items: [
+                                {
+                                    label: 'Print',
+                                    icon: 'pi pi-fw pi-print'
+                                }
+                            ]
+                        },
+                        {
+                            icon: 'pi pi-fw pi-bars',
+                            label: 'List'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Events',
+            items: [
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Save',
+                            icon: 'pi pi-fw pi-calendar-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                },
+                {
+                    label: 'Archive',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Quit'
+        }
+    ];
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 2
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const commandHandler = (text: string) => {
+        let response;
+        let argsIndex = text.indexOf(' ');
+        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+        switch (command) {
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
+
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
+
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
+
+            case 'clear':
+                response = null;
+                break;
+
+            default:
+                response = 'Unknown command: ' + command;
+                break;
+        }
+
+        if (response) {
+            TerminalService.emit('response', response);
+        } else {
+            TerminalService.emit('clear');
+        }
+    };
+
+    useEffect(() => {
+        TerminalService.on('command', commandHandler);
+        PhotoService.getImages().then((data) => setImages(data));
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+
+        setAppendTo('self');
+
+        return () => {
+            TerminalService.off('command', commandHandler);
+
+            // reset
+            setAppendTo(null);
+        };
+    }, []);
+
+    const start = <i className="pi pi-apple"></i>;
+    const end = (
+        <React.Fragment>
+            <i className="pi pi-video" />
+            <i className="pi pi-wifi" />
+            <i className="pi pi-volume-up" />
+            <span>Fri 13:07</span>
+            <i className="pi pi-search" />
+            <i className="pi pi-bars" />
+        </React.Fragment>
+    );
+
+    return (
+        <div className="card dock-demo">
+            <Tooltip className="dark-tooltip" target=".dock-advanced .p-dock-action" my="center+15 bottom-15" at="center top" showDelay={150} />
+            <Menubar model={menubarItems} start={start} end={end} />
+            <div className="dock-window dock-advanced">
+                <Toast ref={toast} />
+                <Toast ref={toast2} position="top-center" />
+                <Dock model={dockItems} />
+                <Dialog visible={displayTerminal} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw' }} onHide={() => setDisplayTerminal(false)} maximizable blockScroll={false}>
+                    <Terminal welcomeMessage="Welcome to PrimeReact (cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primereact $" />
+                </Dialog>
+                <Dialog visible={displayFinder} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw', height: '18rem' }} onHide={() => setDisplayFinder(false)} maximizable blockScroll={false}>
+                    <Tree value={nodes} />
+                </Dialog>
+                <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={2} style={{ width: '400px' }}
+                    circular fullScreen showThumbnails={false} showItemNavigators item={itemTemplate} />
+            </div>
+        </div>
+    )
+}
+        `,
+        extFiles: {
+            'DockDemo.css': `
+/* DockDemo.css */
+
+.dock-demo .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url('https://primefaces.org/cdn/primereact/images/dock/window.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.dock-demo .p-dock {
+    z-index: 1000;
+}
+.dock-demo .dock-advanced .p-dialog-mask, .dock-demo .dock-advanced .p-galleria-mask, .dock-demo .dock-advanced .p-galleria-mask .p-galleria-item-nav, .dock-demo .dock-advanced .p-toast {
+    position: absolute;
+}
+.dock-demo .dock-advanced .p-dialog .p-dialog-header {
+    padding: 0.2rem;
+}
+.dock-demo .dock-advanced .p-dialog .p-dialog-content {
+    padding: 0;
+}
+.dock-demo .dock-advanced .p-dialog p {
+    margin-top: 0;
+}
+.dock-demo .dock-advanced .p-dialog .p-terminal {
+    background-color: #212121;
+    color: #fff;
+    border: 0 none;
+    min-height: 18rem;
+    height: 100%;
+}
+.dock-demo .dock-advanced .p-dialog .p-terminal .p-terminal-command {
+    color: #80cbc4;
+}
+.dock-demo .dock-advanced .p-dialog .p-terminal .p-terminal-prompt {
+    color: #ffd54f;
+}
+.dock-demo .dock-advanced .p-dialog .p-terminal .p-terminal-response {
+    color: #9fa8da;
+}
+.dock-demo .dock-advanced .p-dialog .p-tree {
+    height: 100%;
+    border-radius: 0;
+    border-left-width: 0;
+    border-right-width: 0;
+    border-bottom-width: 0;
+}
+.dock-demo .dock-advanced .p-toast {
+    top: 20px;
+}
+.dock-demo .p-menubar {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-radius: 0;
+}
+.dock-demo .p-menubar .menubar-root {
+    font-weight: bold;
+    padding: 0 1rem;
+}
+.dock-demo .p-menubar .p-menuitem-link {
+    padding: 0.5rem 0.75rem;
+}
+.dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+    padding: 0.5rem 0.75rem;
+}
+.dock-demo .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    display: none;
+}
+.dock-demo .p-menubar .p-menubar-end span, .dock-demo .p-menubar .p-menubar-end i {
+    padding: 0 0.75rem;
+}
+.dark-tooltip .p-tooltip .p-tooltip-arrow {
+    border-top-color: var(--surface-900);
+}
+.dark-tooltip .p-tooltip .p-tooltip-text {
+    background-color: var(--surface-900);
+}
+    };
+    `,
+            data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+`
+        }
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A sample macOS implementation using various components.</p>
+            </DocSectionText>
+            <div className="card">
+                <Tooltip className="dark-tooltip" target=".dock-advanced .p-dock-action" my="center+15 bottom-15" at="center top" showDelay={150} />
+                <Menubar model={menubarItems} start={start} end={end} />
+                <div className="dock-window dock-advanced" style={{ backgroundImage: 'url(http://github.com/images/dock/window.jpg)' }}>
+                    <Toast ref={toast} className="absolute" />
+                    <Toast ref={toast2} className="absolute" />
+
+                    <Dock model={dockItems} />
+
+                    <Dialog visible={displayTerminal} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw' }} onHide={() => setDisplayTerminal(false)} maximizable blockScroll={false}>
+                        <Terminal welcomeMessage="Welcome to PrimeReact (cmd: 'date', 'greet {0}', 'random' and 'clear')" prompt="primereact $" />
+                    </Dialog>
+
+                    <Dialog visible={displayFinder} breakpoints={{ '960px': '50vw', '600px': '75vw' }} style={{ width: '30vw', height: '18rem' }} onHide={() => setDisplayFinder(false)} maximizable blockScroll={false}>
+                        <Tree value={nodes} />
+                    </Dialog>
+
+                    <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={2} style={{ width: '400px' }} circular fullScreen showThumbnails={false} showItemNavigators item={itemTemplate} />
+                </div>
+            </div>
+            <DocSectionCode code={code} service={['PhotoService', 'NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/dock/basicdoc.js b/components/doc/dock/basicdoc.js
new file mode 100644
index 0000000000..df69289b5a
--- /dev/null
+++ b/components/doc/dock/basicdoc.js
@@ -0,0 +1,237 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dock } from '@/components/lib/dock/Dock';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [position, setPosition] = useState('bottom');
+    const items = [
+        {
+            label: 'Finder',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />
+        },
+        {
+            label: 'App Store',
+            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />
+        },
+        {
+            label: 'Photos',
+            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />
+        },
+        {
+            label: 'Trash',
+            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />
+        }
+    ];
+
+    const positions = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Dock model={items} position="{position}" />
+`,
+        javascript: `
+import { useState } from 'react';
+import { Dock } from 'primereact/dock';
+import { RadioButton } from 'primereact/radiobutton';
+import './DockDemo.css';
+
+export default function BasicDemo() {
+    const [position, setPosition] = useState('bottom');    
+    const items = [
+        {
+            label: 'Finder',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
+        },
+        {
+            label: 'App Store',
+            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
+        },
+        {
+            label: 'Photos',
+            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
+        },
+        {
+            label: 'Trash',
+            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
+        }
+    ];
+
+    const positions = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+
+    return (
+        <div className="card dock-demo">
+            <div className="flex flex-wrap gap-3 mb-5">
+                {positions.map((option) => {
+                    const { value, label } = option;
+
+                    return (
+                        <div className="flex align-items-center" key={label}>
+                            <RadioButton value={label} onChange={() => setPosition(option.value)} checked={position === value} />
+                            <label htmlFor={label} className="ml-2">
+                                {label}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="dock-window" style={{ backgroundImage: 'url(https://primefaces.org/cdn/primereact/images/dock/window.jpg)' }}>
+                <Dock model={items} position={position} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import { useState } from 'react';
+import { Dock } from 'primereact/dock';
+import { MenuItem } from 'primereact/menuitem';
+import { RadioButton } from 'primereact/radiobutton';
+import './DockDemo.css';
+
+export default function BasicDemo() {
+    const [position, setPosition] = useState<string>('bottom');    
+    const items: MenuItem[] = [
+        {
+            label: 'Finder',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
+        },
+        {
+            label: 'App Store',
+            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
+        },
+        {
+            label: 'Photos',
+            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
+        },
+        {
+            label: 'Trash',
+            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
+        }
+    ];
+
+    const positions: Array<{label: string, value: string}> = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+
+    return (
+        <div className="card dock-demo">
+            <div className="flex flex-wrap gap-3 mb-5">
+                {positions.map((option) => {
+                    const { value, label } = option;
+
+                    return (
+                        <div className="flex align-items-center" key={label}>
+                            <RadioButton value={label} onChange={() => setPosition(option.value)} checked={position === value} />
+                            <label htmlFor={label} className="ml-2">
+                                {label}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="dock-window" style={{ backgroundImage: 'url(https://primefaces.org/cdn/primereact/images/dock/window.jpg)' }}>
+                <Dock model={items} position={position} />
+            </div>
+        </div>
+    )
+}
+        `,
+        extFiles: {
+            'DockDemo.css': `
+/* DockDemo.css */
+.dock-demo .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url('https://primefaces.org/cdn/primereact/images/dock/window.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+.dock-demo .p-dock {
+    z-index: 1000;
+}  
+    `
+        }
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-3 mb-5">
+                    {positions.map((option) => {
+                        const { value, label } = option;
+
+                        return (
+                            <div className="flex align-items-center" key={label}>
+                                <RadioButton value={label} onChange={() => setPosition(option.value)} checked={position === value} />
+                                <label htmlFor={label} className="ml-2">
+                                    {label}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className="dock-window" style={{ backgroundImage: 'url(http://github.com/images/dock/window.jpg)' }}>
+                    <Dock model={items} position={position} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dock/importdoc.js b/components/doc/dock/importdoc.js
new file mode 100644
index 0000000000..bfb8730cb8
--- /dev/null
+++ b/components/doc/dock/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Dock } from 'primereact/dock';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/dock/pt/wireframe.js b/components/doc/dock/pt/wireframe.js
new file mode 100644
index 0000000000..8d3f3253b3
--- /dev/null
+++ b/components/doc/dock/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/dock.jpg" alt="dock" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/dock/styledoc.js b/components/doc/dock/styledoc.js
new file mode 100644
index 0000000000..c70f1e21f4
--- /dev/null
+++ b/components/doc/dock/styledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dock</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dock-list</td>
+                            <td>List of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dock-item</td>
+                            <td>Each items in list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dock/theming/styleddoc.js b/components/doc/dock/theming/styleddoc.js
new file mode 100644
index 0000000000..248bf8ac28
--- /dev/null
+++ b/components/doc/dock/theming/styleddoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dock</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dock-list</td>
+                            <td>List of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dock-item</td>
+                            <td>Each items in list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dock/theming/tailwinddoc.js b/components/doc/dock/theming/tailwinddoc.js
new file mode 100644
index 0000000000..e492eeab19
--- /dev/null
+++ b/components/doc/dock/theming/tailwinddoc.js
@@ -0,0 +1,150 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    dock: {
+        root: ({ props }) => ({
+            className: classNames('absolute z-1 flex justify-center items-center pointer-events-none', {
+                'left-0 bottom-0 w-full': props.position == 'bottom',
+                'left-0 top-0 w-full': props.position == 'top',
+                'left-0 top-0 h-full': props.position == 'left',
+                'right-0 top-0 h-full': props.position == 'right'
+            })
+        }),
+        container: {
+            className: classNames('flex pointer-events-auto', 'bg-white/10 border-white/20 p-2 border rounded-md')
+        },
+        menu: ({ props }) => ({
+            className: classNames('m-0 p-0 list-none flex items-center justify-center', 'outline-none', {
+                'flex-col': props.position == 'left' || props.position == 'right'
+            })
+        }),
+        menuitem: ({ props, context, state }) => ({
+            className: classNames(
+                'p-2 rounded-md',
+                'transition-all duration-200 ease-cubic-bezier-will-change-transform transform ',
+                {
+                    'origin-bottom hover:mx-6': props.position == 'bottom',
+                    'origin-top hover:mx-6': props.position == 'top',
+                    'origin-left hover:my-6': props.position == 'left',
+                    'origin-right hover:my-6': props.position == 'right'
+                },
+                {
+                    'hover:scale-150': state.currentIndex === context.index,
+                    'scale-125': state.currentIndex - 1 === context.index || state.currentIndex + 1 === context.index,
+                    'scale-110': state.currentIndex - 2 === context.index || state.currentIndex + 2 === context.index
+                }
+            )
+        }),
+        action: {
+            className: classNames('flex flex-col items-center justify-center relative overflow-hidden cursor-default', 'w-16 h-16')
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { Dock } from 'primereact/dock';
+import { RadioButton } from 'primereact/radiobutton';
+import './DockDemo.css';
+
+export default function BasicDemo() {
+    const [position, setPosition] = useState('bottom');    
+    const items = [
+        {
+            label: 'Finder',
+            icon: () => <img alt="Finder" src="https://primefaces.org/cdn/primereact/images/dock/finder.svg" width="100%" />,
+        },
+        {
+            label: 'App Store',
+            icon: () => <img alt="App Store" src="https://primefaces.org/cdn/primereact/images/dock/appstore.svg" width="100%" />,
+        },
+        {
+            label: 'Photos',
+            icon: () => <img alt="Photos" src="https://primefaces.org/cdn/primereact/images/dock/photos.svg" width="100%" />,
+        },
+        {
+            label: 'Trash',
+            icon: () => <img alt="trash" src="https://primefaces.org/cdn/primereact/images/dock/trash.png" width="100%" />,
+        }
+    ];
+
+    const positions = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+
+    return (
+        <div className="card dock-demo">
+            <div className="flex flex-wrap gap-3 mb-5">
+                {positions.map((option) => {
+                    const { value, label } = option;
+
+                    return (
+                        <div className="flex items-center" key={label}>
+                            <RadioButton value={label} onChange={() => setPosition(option.value)} checked={position === value} />
+                            <label htmlFor={label} className="ml-2">
+                                {label}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="dock-window" style={{ backgroundImage: 'url(https://primefaces.org/cdn/primereact/images/dock/window.jpg)' }}>
+                <Dock model={items} position={position} />
+            </div>
+        </div>
+    )
+}`,
+        extFiles: {
+            'DockDemo.css': `
+/* DockDemo.css */
+.dock-demo .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url('https://primefaces.org/cdn/primereact/images/dock/window.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    }
+.dock-demo .p-dock {
+    z-index: 1000;
+}`
+        }
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/dropdown/accessibilitydoc.js b/components/doc/dropdown/accessibilitydoc.js
new file mode 100644
index 0000000000..35727b78e4
--- /dev/null
+++ b/components/doc/dropdown/accessibilitydoc.js
@@ -0,0 +1,184 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="dd1">Options</span>
+<Dropdown aria-labelledby="dd1" />
+
+<Dropdown aria-label="Options" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The dropdown element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. If
+                the editable option is enabled <i>aria-autocomplete</i> is also added. The relation between the combobox and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct screen reader
+                which option to read during keyboard navigation within the popup list.
+            </p>
+            <p>
+                The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>listbox</i> as the role. Each list item has an <i>option</i> role, an id to match the <i>aria-activedescendant</i>{' '}
+                of the input element along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
+            </p>
+
+            <p>
+                If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Closed State Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the dropdown element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Popup Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the focused option and closes the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Selects the focused option and closes the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup, moves focus to the dropdown element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character left.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If the dropdown is editable, removes the visual focus from the current option and moves input cursor to one character right.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>If the dropdown is editable, moves input cursor at the end, if not then moves focus to the first option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>If the dropdown is editable, moves input cursor at the beginning, if not then moves focus to the last option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>any printable character</i>
+                            </td>
+                            <td>Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Filter Input Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the dropdown element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the dropdown element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/dropdown/basicdoc.js b/components/doc/dropdown/basicdoc.js
new file mode 100644
index 0000000000..6f42e2811f
--- /dev/null
+++ b/components/doc/dropdown/basicdoc.js
@@ -0,0 +1,87 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select a City" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Dropdown is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i>{' '}
+                    properties respectively. Default property name for the <i>optionLabel</i> is <i>label</i> and <i>value</i> for the <i>optionValue</i>. If <i>optionValue</i> is omitted and the object has no <i>value</i> property, the object itself
+                    becomes the value of an option. Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/checkmarkdoc.js b/components/doc/dropdown/checkmarkdoc.js
new file mode 100644
index 0000000000..0543626b24
--- /dev/null
+++ b/components/doc/dropdown/checkmarkdoc.js
@@ -0,0 +1,83 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function CheckmarkDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select a City" className="w-full md:w-14rem" checkmark={true}  highlightOnSelect={false} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function CheckmarkDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function CheckmarkDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>An alternative way to highlight the selected option is displaying a checkmark instead. </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" checkmark={true} highlightOnSelect={false} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/clearicondoc.js b/components/doc/dropdown/clearicondoc.js
new file mode 100644
index 0000000000..2c3f470441
--- /dev/null
+++ b/components/doc/dropdown/clearicondoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function ClearIconDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    showClear placeholder="Select a City" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function ClearIconDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                showClear placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function ClearIconDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                showClear placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>showClear</i> is enabled, a clear icon is added to reset the Dropdown.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" showClear placeholder="Select a City" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/disableddoc.js b/components/doc/dropdown/disableddoc.js
new file mode 100644
index 0000000000..f80ccc0fcc
--- /dev/null
+++ b/components/doc/dropdown/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Dropdown disabled placeholder="Select a City" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown disabled placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown disabled placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown disabled placeholder="Select a City" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/editabledoc.js b/components/doc/dropdown/editabledoc.js
new file mode 100644
index 0000000000..901771ced8
--- /dev/null
+++ b/components/doc/dropdown/editabledoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function EditableDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    editable placeholder="Select a City" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function EditableDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                editable placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function EditableDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                editable placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>editable</i> is present, the input can also be entered with typing.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" editable placeholder="Select a City" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/filleddoc.js b/components/doc/dropdown/filleddoc.js
new file mode 100644
index 0000000000..39f787dbd7
--- /dev/null
+++ b/components/doc/dropdown/filleddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<Dropdown variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select a City" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FilledDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown variant="filled" value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown variant="filled" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/filterdoc.js b/components/doc/dropdown/filterdoc.js
new file mode 100644
index 0000000000..7acaecb1d0
--- /dev/null
+++ b/components/doc/dropdown/filterdoc.js
@@ -0,0 +1,178 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function FilterDoc(props) {
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return (
+                <div className="flex align-items-center">
+                    <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`mr-2 flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                    <div>{option.name}</div>
+                </div>
+            );
+        }
+
+        return <span>{props.placeholder}</span>;
+    };
+
+    const countryOptionTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`mr-2 flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
+    filter valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function FilterDemo() {
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return (
+                <div className="flex align-items-center">
+                    <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                    <div>{option.name}</div>
+                </div>
+            );
+        }
+
+        return <span>{props.placeholder}</span>;
+    };
+
+    const countryOptionTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
+                filter filterDelay={400} valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
+        </div>    
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+export default function FilterDemo() {
+    const [selectedCountry, setSelectedCountry] = useState<Country | null>(null);
+    const countries: Country[] = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const selectedCountryTemplate = (option: Country, props) => {
+        if (option) {
+            return (
+                <div className="flex align-items-center">
+                    <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                    <div>{option.name}</div>
+                </div>
+            );
+        }
+
+        return <span>{props.placeholder}</span>;
+    };
+
+    const countryOptionTemplate = (option: Country) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCountry} onChange={(e: DropdownChangeEvent) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
+                filter filterDelay={400} valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" />
+        </div>    
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Dropdown provides built-in filtering that is enabled by adding the <i>filter</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown
+                    value={selectedCountry}
+                    onChange={(e) => setSelectedCountry(e.value)}
+                    options={countries}
+                    optionLabel="name"
+                    placeholder="Select a Country"
+                    filter
+                    filterDelay={400}
+                    showClear
+                    valueTemplate={selectedCountryTemplate}
+                    itemTemplate={countryOptionTemplate}
+                    className="w-full md:w-14rem"
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/floatlabeldoc.js b/components/doc/dropdown/floatlabeldoc.js
new file mode 100644
index 0000000000..7477afe488
--- /dev/null
+++ b/components/doc/dropdown/floatlabeldoc.js
@@ -0,0 +1,95 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+    <label htmlFor="dd-city">Select a City</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel className="w-full md:w-14rem">
+                <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+                <label htmlFor="dd-city">Select a City</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FloatLabelDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel className="w-full md:w-14rem">
+                <Dropdown inputId="dd-city" value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+                <label htmlFor="dd-city">Select a City</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A floating label appears on top of the input field when focused.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel className="w-full md:w-14rem">
+                    <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+                    <label htmlFor="dd-city">Select a City</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/groupdoc.js b/components/doc/dropdown/groupdoc.js
new file mode 100644
index 0000000000..f84b8995ab
--- /dev/null
+++ b/components/doc/dropdown/groupdoc.js
@@ -0,0 +1,201 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function GroupDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`mr-2 flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={groupedCities} optionLabel="label" 
+    optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} className="w-full md:w-14rem" placeholder="Select a City" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function GroupedDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={groupedCities} optionLabel="label" 
+                optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} className="w-full md:w-14rem" placeholder="Select a City" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    label: string;
+    value: string;
+} 
+
+interface Country {
+    label: string;
+    code: string;
+    items: City[];
+}
+
+export default function GroupedDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const groupedCities: Country[] = [
+        {
+            label: 'Germany', code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA', code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan', code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (option: City) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={groupedCities} optionLabel="label" 
+                optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} className="w-full md:w-14rem" placeholder="Select a City" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the
+                    children of a group.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={groupedCities}
+                    optionLabel="label"
+                    optionGroupLabel="label"
+                    optionGroupChildren="items"
+                    optionGroupTemplate={groupedItemTemplate}
+                    className="w-full md:w-14rem"
+                    placeholder="Select a City"
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/importdoc.js b/components/doc/dropdown/importdoc.js
new file mode 100644
index 0000000000..ed6a0bca4b
--- /dev/null
+++ b/components/doc/dropdown/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Dropdown } from 'primereact/dropdown';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/invaliddoc.js b/components/doc/dropdown/invaliddoc.js
new file mode 100644
index 0000000000..94ba38a970
--- /dev/null
+++ b/components/doc/dropdown/invaliddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<Dropdown invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select a City" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function InvalidDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function InvalidDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown invalid value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" placeholder="Select a City" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/lazyvirtualscrolldoc.js b/components/doc/dropdown/lazyvirtualscrolldoc.js
new file mode 100644
index 0000000000..16c04c9438
--- /dev/null
+++ b/components/doc/dropdown/lazyvirtualscrolldoc.js
@@ -0,0 +1,159 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import Link from 'next/link';
+import { useState, useRef } from 'react';
+
+export function LazyVirtualScrollDoc(props) {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const items = useRef(Array.from({ length: 100000 }));
+    const [loading, setLoading] = useState(false);
+    const loadLazyTimeout = useRef();
+
+    const onLazyLoad = (event) => {
+        setLoading(true);
+
+        if (loadLazyTimeout.current) {
+            clearTimeout(loadLazyTimeout.current);
+        }
+
+        //imitate delay of a backend call
+        loadLazyTimeout.current = setTimeout(
+            () => {
+                const { first, last } = event;
+                const _items = [...items.current];
+
+                for (let i = first; i < last; i++) {
+                    _items[i] = { label: `Item #${i}`, value: i };
+                }
+
+                items.current = _items;
+                setLoading(false);
+            },
+            Math.random() * 1000 + 250
+        );
+    };
+
+    const code = {
+        basic: `
+<Dropdown value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} 
+    placeholder="Select Item" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function LazyVirtualScrollDemo() {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const items = useRef(Array.from({ length: 100000 }));
+    const [loading, setLoading] = useState(false);
+    const loadLazyTimeout = useRef();
+
+    const onLazyLoad = (event) => {
+        setLoading(true);
+
+        if (loadLazyTimeout.current) {
+            clearTimeout(loadLazyTimeout.current);
+        }
+
+        //imitate delay of a backend call
+        loadLazyTimeout.current = setTimeout(
+            () => {
+                const { first, last } = event;
+                const _items = [...items.current];
+
+                for (let i = first; i < last; i++) {
+                    _items[i] = { label: \`Item #\${i}\`, value: i };
+                }
+
+                items.current = _items;
+                setLoading(false);
+            },
+            Math.random() * 1000 + 250
+        );
+    };
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown
+                value={selectedItem}
+                onChange={(e) => setSelectedItem(e.value)}
+                options={items.current}
+                placeholder="Select Item"
+                className="w-full md:w-14rem"
+                virtualScrollerOptions={{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+type ItemType = { label: string; value: number };
+
+export default function LazyVirtualScrollDemo() {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const items = useRef(Array.from({ length: 100000 }));
+    const [loading, setLoading] = useState(false);
+    const loadLazyTimeout = useRef();
+
+    const onLazyLoad = (event) => {
+        setLoading(true);
+
+        if (loadLazyTimeout.current) {
+            clearTimeout(loadLazyTimeout.current);
+        }
+
+        //imitate delay of a backend call
+        loadLazyTimeout.current = setTimeout(
+            () => {
+                const { first, last } = event;
+                const _items = [...items.current];
+
+                for (let i = first; i < last; i++) {
+                    _items[i] = { label: \`Item #\${i}\`, value: i };
+                }
+
+                items.current = _items;
+                setLoading(false);
+            },
+            Math.random() * 1000 + 250
+        );
+    };
+
+    return (
+          <div className="card flex justify-content-center">
+              <Dropdown
+                  value={selectedItem}
+                  onChange={(e) => setSelectedItem(e.value)}
+                  options={items.current}
+                  placeholder="Select Item"
+                  className="w-full md:w-14rem"
+                  virtualScrollerOptions={{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }}
+              />
+          </div>
+      )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p />
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown
+                    value={selectedItem}
+                    onChange={(e) => setSelectedItem(e.value)}
+                    options={items.current}
+                    placeholder="Select Item"
+                    className="w-full md:w-14rem"
+                    virtualScrollerOptions={{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/loadingdoc.js b/components/doc/dropdown/loadingdoc.js
new file mode 100644
index 0000000000..dfffcd4500
--- /dev/null
+++ b/components/doc/dropdown/loadingdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+
+export function LoadingDoc(props) {
+    const code = {
+        basic: `
+<Dropdown loading placeholder="Loading..." className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function LoadingDemo() {
+
+    return (
+      <Dropdown loading placeholder="Loading..." className="w-full md:w-14rem" />
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function LoadingDemo() {
+
+    return (
+        <div className="card flex justify-content-center">
+          <Dropdown loading placeholder="Loading..." className="w-full md:w-14rem" />“
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Loading state can be used <i>loading</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown loading placeholder="Loading..." className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/pt/wireframe.js b/components/doc/dropdown/pt/wireframe.js
new file mode 100644
index 0000000000..7a37929ac0
--- /dev/null
+++ b/components/doc/dropdown/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/dropdown.jpg" alt="dropdown" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/dropdown/styledoc.js b/components/doc/dropdown/styledoc.js
new file mode 100644
index 0000000000..6f23a5fbf8
--- /dev/null
+++ b/components/doc/dropdown/styledoc.js
@@ -0,0 +1,67 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dropdown</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-label</td>
+                            <td>Element to display label of selected option.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-trigger</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-panel</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-items-wrapper</td>
+                            <td>Wrapper element of items list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-items</td>
+                            <td>List element of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-filter</td>
+                            <td>Filter element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-open</td>
+                            <td>Container element when overlay is visible.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dropdown/templatedoc.js b/components/doc/dropdown/templatedoc.js
new file mode 100644
index 0000000000..ed857975ba
--- /dev/null
+++ b/components/doc/dropdown/templatedoc.js
@@ -0,0 +1,237 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { ChevronDownIcon } from '@/components/lib/icons/chevrondown';
+import { ChevronRightIcon } from '@/components/lib/icons/chevronright';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return (
+                <div className="flex align-items-center">
+                    <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`mr-2 flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                    <div>{option.name}</div>
+                </div>
+            );
+        }
+
+        return <span>{props.placeholder}</span>;
+    };
+
+    const countryOptionTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`mr-2 flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const panelFooterTemplate = () => {
+        return (
+            <div className="py-2 px-3">
+                {selectedCountry ? (
+                    <span>
+                        <b>{selectedCountry.name}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
+    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate}
+    dropdownIcon={(opts) => {
+        return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+    }} 
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+import { ChevronDownIcon } from 'primereact/icons/chevrondown';
+import { ChevronRightIcon } from 'primereact/icons/chevronright';
+
+export default function TemplateDemo() {
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const selectedCountryTemplate = (option, props) => {
+        if (option) {
+            return (
+                <div className="flex align-items-center">
+                    <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                    <div>{option.name}</div>
+                </div>
+            );
+        }
+
+        return <span>{props.placeholder}</span>;
+    };
+
+    const countryOptionTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const panelFooterTemplate = () => {
+        return (
+            <div className="py-2 px-3">
+                {selectedCountry ? (
+                    <span>
+                        <b>{selectedCountry.name}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
+                valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} 
+                dropdownIcon={(opts) => {
+                    return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                }}/>
+        </div>    
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { CheckIcon } from 'primereact/icons/check';
+import { StarIcon } from 'primereact/icons/star';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+export default function TemplateDemo() {
+    const [selectedCountry, setSelectedCountry] = useState<Country | null>(null);
+    const countries: Country[] = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const selectedCountryTemplate = (option: Country, props) => {
+        if (option) {
+            return (
+                <div className="flex align-items-center">
+                    <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                    <div>{option.name}</div>
+                </div>
+            );
+        }
+
+        return <span>{props.placeholder}</span>;
+    };
+
+    const countryOptionTemplate = (option: Country) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const panelFooterTemplate = () => {
+        return (
+            <div className="py-2 px-3">
+                {selectedCountry ? (
+                    <span>
+                        <b>{selectedCountry.name}</b> selected.
+                    </span>
+                ) : (
+                    'No country selected.'
+                )}
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedCountry} onChange={(e: DropdownChangeEvent) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
+                valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} 
+                dropdownIcon={(opts) => {
+                    return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                }}/>/>
+        </div>    
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Options and the selected option display support templating with <i>itemTemplate</i> and <i>valueTemplate</i> properties respectively.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown
+                    value={selectedCountry}
+                    onChange={(e) => setSelectedCountry(e.value)}
+                    options={countries}
+                    optionLabel="name"
+                    placeholder="Select a Country"
+                    valueTemplate={selectedCountryTemplate}
+                    itemTemplate={countryOptionTemplate}
+                    panelFooterTemplate={panelFooterTemplate}
+                    className="w-full md:w-14rem"
+                    dropdownIcon={(opts) => {
+                        return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/dropdown/theming/styleddoc.js b/components/doc/dropdown/theming/styleddoc.js
new file mode 100644
index 0000000000..faf13ade7c
--- /dev/null
+++ b/components/doc/dropdown/theming/styleddoc.js
@@ -0,0 +1,63 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-dropdown</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-label</td>
+                            <td>Element to display label of selected option.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-trigger</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-panel</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-items-wrapper</td>
+                            <td>Wrapper element of items list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-items</td>
+                            <td>List element of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-filter</td>
+                            <td>Filter element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-dropdown-open</td>
+                            <td>Container element when overlay is visible.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/dropdown/theming/tailwinddoc.js b/components/doc/dropdown/theming/tailwinddoc.js
new file mode 100644
index 0000000000..836a6fc0db
--- /dev/null
+++ b/components/doc/dropdown/theming/tailwinddoc.js
@@ -0,0 +1,123 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+const Tailwind = {    
+    dropdown: {
+        root: ({ props }) => ({
+            className: classNames(
+                'cursor-pointer inline-flex relative select-none',
+                'bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300',
+                'w-full md:w-56',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            )
+        }),
+        input: ({ props }) => ({
+            className: classNames(
+                'cursor-pointer block flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative',
+                'bg-transparent border-0 text-gray-800',
+                'dark:text-white/80',
+                'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
+                'focus:outline-none focus:shadow-none',
+                { 'pr-7': props.showClear }
+            )
+        }),
+        trigger: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg')
+        },
+        wrapper: {
+            className: classNames('max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80')
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames(
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                {
+                    'text-gray-700': !context.focused && !context.selected,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
+                    'bg-blue-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                }
+            )
+        }),
+        itemgroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        header: {
+            className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40')
+        },
+        filtercontainer: 'relative',
+        filterinput: {
+            className: classNames(
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        filtericon: '-mt-2 absolute top-1/2',
+        clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function UnstyledDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-center">
+            <Dropdown value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select a City" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/dropdown/virtualscrolldoc.js b/components/doc/dropdown/virtualscrolldoc.js
new file mode 100644
index 0000000000..ac4c260d4c
--- /dev/null
+++ b/components/doc/dropdown/virtualscrolldoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function VirtualScrollDoc(props) {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const items = Array.from({ length: 100000 }).map((_, i) => ({ label: `Item #${i}`, value: i }));
+
+    const onItemChange = (e) => {
+        setSelectedItem(e.value);
+    };
+
+    const code = {
+        basic: `
+<Dropdown value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} 
+    placeholder="Select Item" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function VirtualScrollDemo() {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const items = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} 
+                placeholder="Select Item" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+
+interface Item {
+    label: string;
+    value: number;
+}
+
+export default function VirtualScrollDemo() {
+    const [selectedItem, setSelectedItem] = useState<Item | null>(null);
+    const items: Item[] = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
+    return (
+        <div className="card flex justify-content-center">
+            <Dropdown value={selectedItem} onChange={(e: DropdownChangeEvent) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} 
+                placeholder="Select Item" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the{' '}
+                    <Link href="http://github.com/virtualscroller">VirtualScroller</Link> for more information about the available options as it is used internally by Dropdown.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Dropdown value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} placeholder="Select Item" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/editor/accessibilitydoc.js b/components/doc/editor/accessibilitydoc.js
new file mode 100644
index 0000000000..f4437ef384
--- /dev/null
+++ b/components/doc/editor/accessibilitydoc.js
@@ -0,0 +1,9 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <p>Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/editor/basicdoc.js b/components/doc/editor/basicdoc.js
new file mode 100644
index 0000000000..aa06826e4f
--- /dev/null
+++ b/components/doc/editor/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Editor } from '@/components/lib/editor/Editor';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [text, setText] = useState('');
+
+    const code = {
+        basic: `
+<Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Editor } from "primereact/editor";
+
+export default function BasicDemo() {
+    const [text, setText] = useState('');
+
+    return (
+        <div className="card">
+            <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Editor, EditorTextChangeEvent } from "primereact/editor";
+
+export default function BasicDemo() {
+    const [text, setText] = useState<string>('');
+
+    return (
+        <div className="card">
+            <Editor value={text} onTextChange={(e: EditorTextChangeEvent) => setText(e.htmlValue)} style={{ height: '320px' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Editor is used as a controlled component with <i>value</i> and <i>onTextChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ quill: '2.0.0' }} />
+        </>
+    );
+}
diff --git a/components/doc/editor/importdoc.js b/components/doc/editor/importdoc.js
new file mode 100644
index 0000000000..628f5c7073
--- /dev/null
+++ b/components/doc/editor/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Editor } from 'primereact/editor';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/editor/pt/wireframe.js b/components/doc/editor/pt/wireframe.js
new file mode 100644
index 0000000000..67f59e61ae
--- /dev/null
+++ b/components/doc/editor/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="editor" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/editor/quilldoc.js b/components/doc/editor/quilldoc.js
new file mode 100644
index 0000000000..2c5d0fecb7
--- /dev/null
+++ b/components/doc/editor/quilldoc.js
@@ -0,0 +1,21 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function QuillDoc(props) {
+    const code = {
+        basic: `
+npm install quill
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/editor/readonlydoc.js b/components/doc/editor/readonlydoc.js
new file mode 100644
index 0000000000..ebafc5bfab
--- /dev/null
+++ b/components/doc/editor/readonlydoc.js
@@ -0,0 +1,50 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Editor } from '@/components/lib/editor/Editor';
+
+export function ReadOnlyDoc(props) {
+    const code = {
+        basic: `
+<Editor value="Always bet on Prime!" readOnly style={{ height: '320px' }} />
+        `,
+        javascript: `
+import React from "react";
+import { Editor } from "primereact/editor";
+
+export default function ReadOnlyDemo() {
+
+    return (
+        <div className="card">
+            <Editor value="Always bet on Prime!" readOnly style={{ height: '320px' }} />
+        </div>        
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { Editor } from "primereact/editor";
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="card">
+            <Editor value="Always bet on Prime!" readOnly style={{ height: '320px' }} />
+        </div>    
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>readOnly</i> is present, the value cannot be edited.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Editor value="Always bet on Prime!" readOnly style={{ height: '320px' }} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ quill: '2.0.0' }} />
+        </>
+    );
+}
diff --git a/components/doc/editor/styledoc.js b/components/doc/editor/styledoc.js
new file mode 100644
index 0000000000..035197e4aa
--- /dev/null
+++ b/components/doc/editor/styledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-editor-container</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-editor-toolbar</td>
+                            <td>Toolbar of the editor</td>
+                        </tr>
+                        <tr>
+                            <td>p-editor-content</td>
+                            <td>Editable area</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/editor/templatedoc.js b/components/doc/editor/templatedoc.js
new file mode 100644
index 0000000000..a505f1d232
--- /dev/null
+++ b/components/doc/editor/templatedoc.js
@@ -0,0 +1,92 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Editor } from '@/components/lib/editor/Editor';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [text, setText] = useState('<div>Hello World!</div><div>PrimeReact <b>Editor</b> Rocks</div><div><br></div>');
+
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold" />
+                <button className="ql-italic" aria-label="Italic" />
+                <button className="ql-underline" aria-label="Underline" />
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
+    const code = {
+        basic: `
+<Editor value={text} onTextChange={(e) => setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Editor } from "primereact/editor";
+
+export default function TemplateDemo() {
+    const [text, setText] = useState('<div>Hello World!</div><div>PrimeReact <b>Editor</b> Rocks</div><div><br></div>');
+
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold"></button>
+                <button className="ql-italic" aria-label="Italic"></button>
+                <button className="ql-underline" aria-label="Underline"></button>
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Editor, EditorTextChangeEvent } from "primereact/editor";
+
+export default function TemplateDemo() {
+    const [text, setText] = useState<string>('<div>Hello World!</div><div>PrimeReact <b>Editor</b> Rocks</div><div><br></div>');
+
+    const renderHeader = () => {
+        return (
+            <span className="ql-formats">
+                <button className="ql-bold" aria-label="Bold"></button>
+                <button className="ql-italic" aria-label="Italic"></button>
+                <button className="ql-underline" aria-label="Underline"></button>
+            </span>
+        );
+    };
+
+    const header = renderHeader();
+
+    return (
+        <div className="card">
+            <Editor value={text} onTextChange={(e: EditorTextChangeEvent) => setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Toolbar is customized with the <i>headerTemplate</i> property. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />
+            </div>
+            <DocSectionCode code={code} dependencies={{ quill: '2.0.0' }} />
+        </>
+    );
+}
diff --git a/components/doc/editor/theming/styleddoc.js b/components/doc/editor/theming/styleddoc.js
new file mode 100644
index 0000000000..578e9b0b06
--- /dev/null
+++ b/components/doc/editor/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-editor-container</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-editor-toolbar</td>
+                            <td>Toolbar of the editor</td>
+                        </tr>
+                        <tr>
+                            <td>p-editor-content</td>
+                            <td>Editable area</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/editor/theming/tailwinddoc.js b/components/doc/editor/theming/tailwinddoc.js
new file mode 100644
index 0000000000..bfe90e4d59
--- /dev/null
+++ b/components/doc/editor/theming/tailwinddoc.js
@@ -0,0 +1,54 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    editor: {
+        toolbar: {
+            className: classNames('bg-gray-100 rounded-tr-md rounded-tl-md', 'border border-gray-300 box-border font-sans px-2 py-1')
+        },
+        formats: {
+            className: classNames('inline-block align-middle', 'mr-4')
+        },
+        header: {
+            className: classNames('text-gray-700 inline-block float-left text-base font-medium h-6 relative align-middle', 'w-28', 'border-0 text-gray-600')
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Editor } from "primereact/editor";
+
+export default function UnstyledDemo() {
+    const [text, setText] = useState('');
+
+    return (
+        <div className="card">
+            <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded dependencies={{ quill: '2.0.0' }} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/fieldset/accessibilitydoc.js b/components/doc/fieldset/accessibilitydoc.js
new file mode 100644
index 0000000000..4e94ed15f8
--- /dev/null
+++ b/components/doc/fieldset/accessibilitydoc.js
@@ -0,0 +1,55 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button has <i>aria-controls</i> to define
+                the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the value of the <i>legend</i> property and can be customized by defining an <i>aria-label</i> or{' '}
+                <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
+            </p>
+            <p>
+                The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.
+            </p>
+
+            <h3>Content Toggle Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/fieldset/basicdoc.js b/components/doc/fieldset/basicdoc.js
new file mode 100644
index 0000000000..cc1b1dd851
--- /dev/null
+++ b/components/doc/fieldset/basicdoc.js
@@ -0,0 +1,75 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Fieldset } from '@/components/lib/fieldset/Fieldset';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Fieldset legend="Header">
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Fieldset>
+        `,
+        javascript: `
+import React from 'react';
+import { Fieldset } from 'primereact/fieldset';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Fieldset legend="Header">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Fieldset>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Fieldset } from 'primereact/fieldset';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Fieldset legend="Header">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Fieldset>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A simple Fieldset is created with a <i>legend</i> property along with the content as children.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Fieldset legend="Header">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Fieldset>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fieldset/importdoc.js b/components/doc/fieldset/importdoc.js
new file mode 100644
index 0000000000..e1f0677197
--- /dev/null
+++ b/components/doc/fieldset/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Fieldset } from 'primereact/fieldset';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/fieldset/pt/wireframe.js b/components/doc/fieldset/pt/wireframe.js
new file mode 100644
index 0000000000..1efa56bd4b
--- /dev/null
+++ b/components/doc/fieldset/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/fieldset.jpg" alt="fieldset" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/fieldset/styledoc.js b/components/doc/fieldset/styledoc.js
new file mode 100644
index 0000000000..dbf2891539
--- /dev/null
+++ b/components/doc/fieldset/styledoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-fieldset</td>
+                            <td>Fieldset element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fieldset-toggleable</td>
+                            <td>Toggleable fieldset element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fieldset-legend</td>
+                            <td>Legend element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fieldset-content</td>
+                            <td>Content element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/fieldset/templatedoc.js b/components/doc/fieldset/templatedoc.js
new file mode 100644
index 0000000000..8949bb7867
--- /dev/null
+++ b/components/doc/fieldset/templatedoc.js
@@ -0,0 +1,97 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Fieldset } from '@/components/lib/fieldset/Fieldset';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+
+export function TemplateDoc(props) {
+    const legendTemplate = (
+        <div className="flex align-items-center gap-2 px-2">
+            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold">Amy Elsner</span>
+        </div>
+    );
+
+    const code = {
+        basic: `
+<Fieldset legend={legendTemplate}>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Fieldset>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Fieldset } from 'primereact/fieldset';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+
+export default function TemplateDemo() {
+    const legendTemplate = (
+        <div className="flex align-items-center gap-2 px-2">
+            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold">Amy Elsner</span>
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Fieldset legend={legendTemplate}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Fieldset>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Fieldset } from 'primereact/fieldset';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+
+export default function TemplateDemo() {
+    const legendTemplate = (
+        <div className="flex align-items-center gap-2 px-2">
+            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold">Amy Elsner</span>
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Fieldset legend={legendTemplate}>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Fieldset>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Legend section can also be defined with custom content instead of primitive values.</p>
+            </DocSectionText>
+            <div className="card">
+                <Fieldset legend={legendTemplate}>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Fieldset>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fieldset/theming/styleddoc.js b/components/doc/fieldset/theming/styleddoc.js
new file mode 100644
index 0000000000..613b654013
--- /dev/null
+++ b/components/doc/fieldset/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-fieldset</td>
+                            <td>Fieldset element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fieldset-toggleable</td>
+                            <td>Toggleable fieldset element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fieldset-legend</td>
+                            <td>Legend element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fieldset-content</td>
+                            <td>Content element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/fieldset/theming/tailwinddoc.js b/components/doc/fieldset/theming/tailwinddoc.js
new file mode 100644
index 0000000000..59a92c16d1
--- /dev/null
+++ b/components/doc/fieldset/theming/tailwinddoc.js
@@ -0,0 +1,87 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    }
+};
+
+const Tailwind = {
+    fieldset: {
+        root: {
+            className: classNames(
+                'border border-gray-300 bg-white text-gray-700 rounded-md block mx-2 my-0.5 pl-4 pr-5 inline-size-min', // Borders, background, text color, spacing, and inline size.
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //dark
+            )
+        },
+        legend: ({ props }) => ({
+            className: classNames(
+                'border border-gray-300 text-gray-700 bg-gray-50 font-bold rounded-md',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ', //dark
+                {
+                    'p-0 transition-none hover:bg-gray-100 hover:border-gray-300 hover:text-gray-900 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': props.toggleable,
+                    'p-5': !props.toggleable
+                }
+            )
+        }),
+        toggler: ({ props }) => ({
+            className: classNames('flex items-center justify-center', {
+                'p-5 text-gray-700 rounded-md transition-none cursor-pointer overflow-hidden relative select-none hover:text-gray-900 focus:focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/60 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]':
+                    props.toggleable
+            })
+        }),
+        togglerIcon: 'mr-2 inline-block', // Margin and display style.
+        legendTitle: 'flex items-center justify-center leading-none', // alignments, and leading style.
+        content: 'p-5', // Padding.
+        transition: TRANSITIONS.toggleable
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Fieldset } from 'primereact/fieldset';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card">
+            <Fieldset legend="Header" toggleable>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Fieldset>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/fieldset/toggleabledoc.js b/components/doc/fieldset/toggleabledoc.js
new file mode 100644
index 0000000000..2f746ef6f3
--- /dev/null
+++ b/components/doc/fieldset/toggleabledoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Fieldset } from '@/components/lib/fieldset/Fieldset';
+
+export function ToggleableDoc(props) {
+    const code = {
+        basic: `
+<Fieldset legend="Header" toggleable>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Fieldset>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Fieldset } from 'primereact/fieldset';
+
+export default function ToggleableDemo() {
+    return (
+        <div className="card">
+            <Fieldset legend="Header" toggleable>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Fieldset>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Fieldset } from 'primereact/fieldset';
+
+export default function ToggleableDemo() {
+    return (
+        <div className="card">
+            <Fieldset legend="Header" toggleable>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Fieldset>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Content of the fieldset can be expanded and collapsed when <i>toggleable</i> option is enabled. A toggleable fieldset can either be used as a Controlled or Uncontrolled component. In controlled mode a binding to <i>collapsed</i>
+                    property along with <i>onToggle</i> event are needed to manage the content state.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Fieldset legend="Header" toggleable>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Fieldset>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fileupload/accessibilitydoc.js b/components/doc/fileupload/accessibilitydoc.js
new file mode 100644
index 0000000000..056500fa94
--- /dev/null
+++ b/components/doc/fileupload/accessibilitydoc.js
@@ -0,0 +1,18 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                FileUpload uses a hidden native <i>input</i> element with <i>type="file"</i> for screen readers.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <p>
+                Interactive elements of the uploader are buttons, visit the <Link href="http://github.com/button#accessibility">Button</Link> accessibility section for more information.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/fileupload/advanceddoc.js b/components/doc/fileupload/advanceddoc.js
new file mode 100644
index 0000000000..26e9e52817
--- /dev/null
+++ b/components/doc/fileupload/advanceddoc.js
@@ -0,0 +1,50 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FileUpload } from '@/components/lib/fileupload/FileUpload';
+
+export function AdvancedDoc(props) {
+    const code = {
+        basic: `
+<FileUpload name="demo[]" url={'/api/upload'} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+        `,
+        javascript: `
+import React from 'react';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function AdvanceDemo() {
+        
+    return (
+        <div className="card">
+            <FileUpload name="demo[]" url={'/api/upload'} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function AdvanceDemo() {
+        
+    return (
+        <div className="card">
+            <FileUpload name="demo[]" url={'/api/upload'} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
+            </DocSectionText>
+            <div className="card">
+                <FileUpload name="demo[]" url={'/api/upload'} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fileupload/autodoc.js b/components/doc/fileupload/autodoc.js
new file mode 100644
index 0000000000..898dd5650a
--- /dev/null
+++ b/components/doc/fileupload/autodoc.js
@@ -0,0 +1,75 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FileUpload } from '@/components/lib/fileupload/FileUpload';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function AutoDoc(props) {
+    const toast = useRef(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} auto chooseLabel="Browse" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function AutoDemo() {
+    const toast = useRef(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+        
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} auto chooseLabel="Browse" />
+        </div>  
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function AutoDemo() {
+    const toast = useRef<Toast>(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+        
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} auto chooseLabel="Browse" />
+        </div>  
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>auto</i> property is enabled, a file gets uploaded instantly after selection.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} auto chooseLabel="Browse" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fileupload/basicdoc.js b/components/doc/fileupload/basicdoc.js
new file mode 100644
index 0000000000..9d8f3dfd4b
--- /dev/null
+++ b/components/doc/fileupload/basicdoc.js
@@ -0,0 +1,75 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FileUpload } from '@/components/lib/fileupload/FileUpload';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+        
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />
+        </div>  
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function BasicDemo() {
+    const toast = useRef<Toast>(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+        
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />
+        </div>  
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    FileUpload basic <i>mode</i> provides a simpler UI as an alternative to default advanced mode.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" maxFileSize={1000000} onUpload={onUpload} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fileupload/customuploaddoc.js b/components/doc/fileupload/customuploaddoc.js
new file mode 100644
index 0000000000..8bbaac2598
--- /dev/null
+++ b/components/doc/fileupload/customuploaddoc.js
@@ -0,0 +1,91 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FileUpload } from '@/components/lib/fileupload/FileUpload';
+
+export function CustomUploadDoc(props) {
+    const customBase64Uploader = async (event) => {
+        // convert file to base64 encoded
+        const file = event.files[0];
+        const reader = new FileReader();
+        let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
+
+        reader.readAsDataURL(blob);
+
+        reader.onloadend = function () {
+            const base64data = reader.result;
+
+            // eslint-disable-next-line no-console
+            console.log(base64data);
+        };
+    };
+
+    const code = {
+        basic: `
+<FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { FileUpload } from 'primereact/fileupload';
+
+export default function CustomUploadDemo() {
+    const customBase64Uploader = async (event) => {
+        // convert file to base64 encoded
+        const file = event.files[0];
+        const reader = new FileReader();
+        let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
+
+        reader.readAsDataURL(blob);
+
+        reader.onloadend = function () {
+            const base64data = reader.result;
+        };
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { FileUpload, FileUploadHandlerEvent } from 'primereact/fileupload';
+
+export default function CustomUploadDemo() {
+    const customBase64Uploader = async (event: FileUploadHandlerEvent) => {
+        // convert file to base64 encoded
+        const file = event.files[0];
+        const reader = new FileReader();
+        let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
+
+        reader.readAsDataURL(blob);
+
+        reader.onloadend = function () {
+            const base64data = reader.result;
+        };
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Uploading implementation can be overriden with <i>customUpload</i> property and defining a custom <i>uploadHandler</i> function.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FileUpload mode="basic" name="demo[]" url="/api/upload" accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fileupload/importdoc.js b/components/doc/fileupload/importdoc.js
new file mode 100644
index 0000000000..6b7030b857
--- /dev/null
+++ b/components/doc/fileupload/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { FileUpload } from 'primereact/fileupload';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/fileupload/pt/wireframe.js b/components/doc/fileupload/pt/wireframe.js
new file mode 100644
index 0000000000..b99ad0477b
--- /dev/null
+++ b/components/doc/fileupload/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/fileupload.jpg" alt="fileupload" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/fileupload/styledoc.js b/components/doc/fileupload/styledoc.js
new file mode 100644
index 0000000000..2956b95726
--- /dev/null
+++ b/components/doc/fileupload/styledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-fileupload</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fileupload-buttonbar</td>
+                            <td>Header containing the buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fileupload-content</td>
+                            <td>Content section.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/fileupload/templatedoc.js b/components/doc/fileupload/templatedoc.js
new file mode 100644
index 0000000000..f92469311a
--- /dev/null
+++ b/components/doc/fileupload/templatedoc.js
@@ -0,0 +1,374 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { FileUpload } from '@/components/lib/fileupload/FileUpload';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+import { Tag } from '@/components/lib/tag/Tag';
+import { Toast } from '@/components/lib/toast/Toast';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+import { useRef, useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [totalSize, setTotalSize] = useState(0);
+    const toast = useRef(null);
+    const fileUploadRef = useRef(null);
+
+    const onTemplateSelect = (e) => {
+        let _totalSize = totalSize;
+        let files = e.files;
+
+        for (let i = 0; i < e.files.length; i++) {
+            _totalSize = _totalSize + (files[i].size || 0);
+        }
+
+        setTotalSize(_totalSize);
+    };
+
+    const onTemplateUpload = (e) => {
+        let _totalSize = 0;
+
+        e.files.forEach((file) => {
+            _totalSize = _totalSize + (file.size || 0);
+        });
+
+        setTotalSize(_totalSize);
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    const onTemplateRemove = (file, callback) => {
+        setTotalSize(totalSize - file.size);
+        callback();
+    };
+
+    const onTemplateClear = () => {
+        setTotalSize(0);
+    };
+
+    const headerTemplate = (options) => {
+        const { className, chooseButton, uploadButton, cancelButton } = options;
+        const value = totalSize / 10000;
+        const formatedValue = fileUploadRef && fileUploadRef.current ? fileUploadRef.current.formatSize(totalSize) : '0 B';
+
+        return (
+            <div className={className} style={{ backgroundColor: 'transparent', display: 'flex', alignItems: 'center' }}>
+                {chooseButton}
+                {uploadButton}
+                {cancelButton}
+                <div className="flex align-items-center gap-3 ml-auto">
+                    <span>{formatedValue} / 1 MB</span>
+                    <ProgressBar value={value} showValue={false} style={{ width: '10rem', height: '12px' }} />
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (file, props) => {
+        return (
+            <div className="flex align-items-center flex-wrap">
+                <div className="flex align-items-center" style={{ width: '40%' }}>
+                    <img alt={file.name} role="presentation" src={file.objectURL} width={100} />
+                    <span className="flex flex-column text-left ml-3">
+                        {file.name}
+                        <small>{new Date().toLocaleDateString()}</small>
+                    </span>
+                </div>
+                <Tag value={props.formatSize} severity="warning" className="px-3 py-2" />
+                <Button type="button" icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger ml-auto" onClick={() => onTemplateRemove(file, props.onRemove)} />
+            </div>
+        );
+    };
+
+    const emptyTemplate = () => {
+        return (
+            <div className="flex align-items-center flex-column">
+                <i className="pi pi-image mt-3 p-5" style={{ fontSize: '5em', borderRadius: '50%', backgroundColor: 'var(--surface-b)', color: 'var(--surface-d)' }} />
+                <span style={{ fontSize: '1.2em', color: 'var(--text-color-secondary)' }} className="my-5">
+                    Drag and Drop Image Here
+                </span>
+            </div>
+        );
+    };
+
+    const chooseOptions = { icon: 'pi pi-fw pi-images', iconOnly: true, className: 'custom-choose-btn p-button-rounded p-button-outlined' };
+    const uploadOptions = { icon: 'pi pi-fw pi-cloud-upload', iconOnly: true, className: 'custom-upload-btn p-button-success p-button-rounded p-button-outlined' };
+    const cancelOptions = { icon: 'pi pi-fw pi-times', iconOnly: true, className: 'custom-cancel-btn p-button-danger p-button-rounded p-button-outlined' };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+
+<Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
+<Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
+<Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" />
+
+<FileUpload ref={fileUploadRef} name="demo[]" url="/api/upload" multiple accept="image/*" maxFileSize={1000000}
+    onUpload={onTemplateUpload} onSelect={onTemplateSelect} onError={onTemplateClear} onClear={onTemplateClear}
+    headerTemplate={headerTemplate} itemTemplate={itemTemplate} emptyTemplate={emptyTemplate}
+    chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions} />
+        `,
+        javascript: `
+import React, { useRef, useState } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+import { ProgressBar } from 'primereact/progressbar';
+import { Button } from 'primereact/button';
+import { Tooltip } from 'primereact/tooltip';
+import { Tag } from 'primereact/tag';
+
+export default function TemplateDemo() {
+    const toast = useRef(null);
+    const [totalSize, setTotalSize] = useState(0);
+    const fileUploadRef = useRef(null);
+    
+    const onTemplateSelect = (e) => {
+        let _totalSize = totalSize;
+        let files = e.files;
+
+        Object.keys(files).forEach((key) => {
+            _totalSize += files[key].size || 0;
+        });
+
+        setTotalSize(_totalSize);
+    };
+
+    const onTemplateUpload = (e) => {
+        let _totalSize = 0;
+
+        e.files.forEach((file) => {
+            _totalSize += file.size || 0;
+        });
+
+        setTotalSize(_totalSize);
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    const onTemplateRemove = (file, callback) => {
+        setTotalSize(totalSize - file.size);
+        callback();
+    };
+
+    const onTemplateClear = () => {
+        setTotalSize(0);
+    };
+
+    const headerTemplate = (options) => {
+        const { className, chooseButton, uploadButton, cancelButton } = options;
+        const value = totalSize / 10000;
+        const formatedValue = fileUploadRef && fileUploadRef.current ? fileUploadRef.current.formatSize(totalSize) : '0 B';
+
+        return (
+            <div className={className} style={{ backgroundColor: 'transparent', display: 'flex', alignItems: 'center' }}>
+                {chooseButton}
+                {uploadButton}
+                {cancelButton}
+                <div className="flex align-items-center gap-3 ml-auto">
+                    <span>{formatedValue} / 1 MB</span>
+                    <ProgressBar value={value} showValue={false} style={{ width: '10rem', height: '12px' }}></ProgressBar>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (file, props) => {
+        return (
+            <div className="flex align-items-center flex-wrap">
+                <div className="flex align-items-center" style={{ width: '40%' }}>
+                    <img alt={file.name} role="presentation" src={file.objectURL} width={100} />
+                    <span className="flex flex-column text-left ml-3">
+                        {file.name}
+                        <small>{new Date().toLocaleDateString()}</small>
+                    </span>
+                </div>
+                <Tag value={props.formatSize} severity="warning" className="px-3 py-2" />
+                <Button type="button" icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger ml-auto" onClick={() => onTemplateRemove(file, props.onRemove)} />
+            </div>
+        );
+    };
+
+    const emptyTemplate = () => {
+        return (
+            <div className="flex align-items-center flex-column">
+                <i className="pi pi-image mt-3 p-5" style={{ fontSize: '5em', borderRadius: '50%', backgroundColor: 'var(--surface-b)', color: 'var(--surface-d)' }}></i>
+                <span style={{ fontSize: '1.2em', color: 'var(--text-color-secondary)' }} className="my-5">
+                    Drag and Drop Image Here
+                </span>
+            </div>
+        );
+    };
+
+    const chooseOptions = { icon: 'pi pi-fw pi-images', iconOnly: true, className: 'custom-choose-btn p-button-rounded p-button-outlined' };
+    const uploadOptions = { icon: 'pi pi-fw pi-cloud-upload', iconOnly: true, className: 'custom-upload-btn p-button-success p-button-rounded p-button-outlined' };
+    const cancelOptions = { icon: 'pi pi-fw pi-times', iconOnly: true, className: 'custom-cancel-btn p-button-danger p-button-rounded p-button-outlined' };
+
+    return (
+        <div>
+            <Toast ref={toast}></Toast>
+
+            <Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
+            <Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
+            <Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" />
+
+            <FileUpload ref={fileUploadRef} name="demo[]" url="/api/upload" multiple accept="image/*" maxFileSize={1000000}
+                onUpload={onTemplateUpload} onSelect={onTemplateSelect} onError={onTemplateClear} onClear={onTemplateClear}
+                headerTemplate={headerTemplate} itemTemplate={itemTemplate} emptyTemplate={emptyTemplate}
+                chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef, useState } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload, FileUploadHeaderTemplateOptions, FileUploadSelectEvent, FileUploadUploadEvent, ItemTemplateOptions,} from 'primereact/fileupload';
+import { ProgressBar } from 'primereact/progressbar';
+import { Button } from 'primereact/button';
+import { Tooltip } from 'primereact/tooltip';
+import { Tag } from 'primereact/tag';
+
+export default function TemplateDemo() {
+    const toast = useRef<Toast>(null);
+    const [totalSize, setTotalSize] = useState(0);
+    const fileUploadRef = useRef<FileUpload>(null);
+
+    const onTemplateSelect = (e: FileUploadSelectEvent) => {
+        let _totalSize = totalSize;
+        let files = e.files;
+
+        for (let i = 0; i < files.length; i++) {
+            _totalSize += files[i].size || 0;
+        }
+
+        setTotalSize(_totalSize);
+    };
+
+    const onTemplateUpload = (e: FileUploadUploadEvent) => {
+        let _totalSize = 0;
+
+        e.files.forEach((file) => {
+            _totalSize += file.size || 0;
+        });
+
+        setTotalSize(_totalSize);
+        toast.current?.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    const onTemplateRemove = (file: File, callback: Function) => {
+        setTotalSize(totalSize - file.size);
+        callback();
+    };
+
+    const onTemplateClear = () => {
+        setTotalSize(0);
+    };
+
+    const headerTemplate = (options: FileUploadHeaderTemplateOptions) => {
+        const { className, chooseButton, uploadButton, cancelButton } = options;
+        const value = totalSize / 10000;
+        const formatedValue = fileUploadRef && fileUploadRef.current ? fileUploadRef.current.formatSize(totalSize) : '0 B';
+
+        return (
+            <div className={className} style={{ backgroundColor: 'transparent', display: 'flex', alignItems: 'center' }}>
+                {chooseButton}
+                {uploadButton}
+                {cancelButton}
+                <div className="flex align-items-center gap-3 ml-auto">
+                    <span>{formatedValue} / 1 MB</span>
+                    <ProgressBar value={value} showValue={false} style={{ width: '10rem', height: '12px' }}></ProgressBar>
+                </div>
+            </div>
+        );
+    };
+
+    const itemTemplate = (inFile: object, props: ItemTemplateOptions) => {
+        const file = inFile as File;
+        return (
+            <div className="flex align-items-center flex-wrap">
+                <div className="flex align-items-center" style={{ width: '40%' }}>
+                    // @ts-ignore
+                    <img alt={file.name} role="presentation" src={file.objectURL} width={100} />
+                    <span className="flex flex-column text-left ml-3">
+                        {file.name}
+                        <small>{new Date().toLocaleDateString()}</small>
+                    </span>
+                </div>
+                <Tag value={props.formatSize} severity="warning" className="px-3 py-2" />
+                <Button type="button" icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger ml-auto" onClick={() => onTemplateRemove(file, props.onRemove)} />
+            </div>
+        );
+    };
+
+    const emptyTemplate = () => {
+        return (
+            <div className="flex align-items-center flex-column">
+                <i className="pi pi-image mt-3 p-5" style={{ fontSize: '5em', borderRadius: '50%', backgroundColor: 'var(--surface-b)', color: 'var(--surface-d)' }}></i>
+                <span style={{ fontSize: '1.2em', color: 'var(--text-color-secondary)' }} className="my-5">
+                    Drag and Drop Image Here
+                </span>
+            </div>
+        );
+    };
+
+    const chooseOptions = { icon: 'pi pi-fw pi-images', iconOnly: true, className: 'custom-choose-btn p-button-rounded p-button-outlined' };
+    const uploadOptions = { icon: 'pi pi-fw pi-cloud-upload', iconOnly: true, className: 'custom-upload-btn p-button-success p-button-rounded p-button-outlined' };
+    const cancelOptions = { icon: 'pi pi-fw pi-times', iconOnly: true, className: 'custom-cancel-btn p-button-danger p-button-rounded p-button-outlined' };
+
+    return (
+        <div>
+            <Toast ref={toast}></Toast>
+
+            <Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
+            <Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
+            <Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" />
+
+            <FileUpload ref={fileUploadRef} name="demo[]" url="/api/upload" multiple accept="image/*" maxFileSize={1000000}
+                onUpload={onTemplateUpload} onSelect={onTemplateSelect} onError={onTemplateClear} onClear={onTemplateClear}
+                headerTemplate={headerTemplate} itemTemplate={itemTemplate} emptyTemplate={emptyTemplate}
+                chooseOptions={chooseOptions} uploadOptions={uploadOptions} cancelOptions={cancelOptions} />
+        </div>
+    )
+}
+        `,
+        php: `
+/* public/upload.php */
+
+<?php
+header ("Access-Control-Allow-Origin: *");
+echo '<p>Fake Upload Process</p>'; ?>
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Uploader UI can be customized with templating.</p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast} />
+
+                <Tooltip target=".custom-choose-btn" content="Choose" position="bottom" />
+                <Tooltip target=".custom-upload-btn" content="Upload" position="bottom" />
+                <Tooltip target=".custom-cancel-btn" content="Clear" position="bottom" />
+
+                <FileUpload
+                    ref={fileUploadRef}
+                    name="demo[]"
+                    url="/api/upload"
+                    multiple
+                    accept="image/*"
+                    maxFileSize={1000000}
+                    onUpload={onTemplateUpload}
+                    onSelect={onTemplateSelect}
+                    onError={onTemplateClear}
+                    onClear={onTemplateClear}
+                    headerTemplate={headerTemplate}
+                    itemTemplate={itemTemplate}
+                    emptyTemplate={emptyTemplate}
+                    chooseOptions={chooseOptions}
+                    uploadOptions={uploadOptions}
+                    cancelOptions={cancelOptions}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/fileupload/theming/styleddoc.js b/components/doc/fileupload/theming/styleddoc.js
new file mode 100644
index 0000000000..a5a7e95b98
--- /dev/null
+++ b/components/doc/fileupload/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-fileupload</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fileupload-buttonbar</td>
+                            <td>Header containing the buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fileupload-content</td>
+                            <td>Content section.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/fileupload/theming/tailwinddoc.js b/components/doc/fileupload/theming/tailwinddoc.js
new file mode 100644
index 0000000000..52afd3ba1e
--- /dev/null
+++ b/components/doc/fileupload/theming/tailwinddoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    fileupload: {
+        input: 'hidden',
+        buttonbar: {
+            className: classNames('flex flex-wrap', 'bg-gray-50 dark:bg-gray-800 p-5 border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-tr-lg rounded-tl-lg gap-2 border-b-0')
+        },
+        basicButton: {
+            className: classNames('text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative')
+        },
+        chooseButton: {
+            className: classNames('text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative')
+        },
+        chooseIcon: 'mr-2 inline-block',
+        chooseButtonLabel: 'flex-1 font-bold',
+        uploadButton: {
+            icon: 'mr-2'
+        },
+        cancelButton: {
+            icon: 'mr-2'
+        },
+        content: {
+            className: classNames('relative', 'bg-white dark:bg-gray-900 p-8 border border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-b-lg')
+        },
+        file: {
+            className: classNames('flex items-center flex-wrap', 'p-4 border border-gray-300 dark:border-blue-900/40 rounded gap-2 mb-2', 'last:mb-0')
+        },
+        thumbnail: 'shrink-0',
+        fileName: 'mb-2',
+        fileSize: 'mr-2',
+        uploadIcon: 'mr-2'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function UnstyledDemo() {
+        
+    return (
+        <div className="card">
+            <FileUpload name="demo[]" url={'/api/upload'} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/floatlabel/accessibilitydoc.js b/components/doc/floatlabel/accessibilitydoc.js
new file mode 100644
index 0000000000..6ee3a04af1
--- /dev/null
+++ b/components/doc/floatlabel/accessibilitydoc.js
@@ -0,0 +1,13 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>FloatLabel does not require any roles and attributes.</p>
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/floatlabel/basicdoc.js b/components/doc/floatlabel/basicdoc.js
new file mode 100644
index 0000000000..9f600e1d0e
--- /dev/null
+++ b/components/doc/floatlabel/basicdoc.js
@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+    <label htmlFor="username">Username</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label htmlFor"username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label htmlFor="username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>FloatLabel is used by wrapping the input and its label.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                    <label htmlFor="username">Username</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/floatlabel/importdoc.js b/components/doc/floatlabel/importdoc.js
new file mode 100644
index 0000000000..86f5b12847
--- /dev/null
+++ b/components/doc/floatlabel/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { FloatLabel } from 'primereact/floatlabel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/floatlabel/pt/wireframe.js b/components/doc/floatlabel/pt/wireframe.js
new file mode 100644
index 0000000000..c4626e348a
--- /dev/null
+++ b/components/doc/floatlabel/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="floatlabel" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/floatlabel/theming/styleddoc.js b/components/doc/floatlabel/theming/styleddoc.js
new file mode 100644
index 0000000000..36bcb26686
--- /dev/null
+++ b/components/doc/floatlabel/theming/styleddoc.js
@@ -0,0 +1,30 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-float-label</td>
+                            <td>Float label element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/floatlabel/theming/tailwinddoc.js b/components/doc/floatlabel/theming/tailwinddoc.js
new file mode 100644
index 0000000000..dd7350886a
--- /dev/null
+++ b/components/doc/floatlabel/theming/tailwinddoc.js
@@ -0,0 +1,63 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+import React from 'react';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    floatlabel: {
+        root: {
+            className: classNames(
+                'block relative', // root component style
+                '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style
+                '[&>textarea~label]:top-4', // textarea
+                '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus
+                '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill
+                '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled
+                '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus
+                '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled
+                '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus
+                '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder
+                '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus
+            )
+        }
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label htmlFor="username">Username</label>
+              </FloatLabel>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/galleria/accessibilitydoc.js b/components/doc/galleria/accessibilitydoc.js
new file mode 100644
index 0000000000..619f3d30ea
--- /dev/null
+++ b/components/doc/galleria/accessibilitydoc.js
@@ -0,0 +1,122 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Galleria uses <i>region</i> role and since any attribute is passed to the main container element, attributes such as <i>aria-label</i> and <i>aria-roledescription</i> can be used as well. The slides container has <i>aria-live</i>{' '}
+                attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay.
+            </p>
+
+            <p>
+                A slide has a <i>group</i> role with an aria-label that refers to the <i>aria.slideNumber</i> property of the <Link href="http://github.com/locale">locale</Link> API. Similarly <i>aria.slide</i> is used as the <i>aria-roledescription</i> of the item.
+                Inactive slides are hidden from the readers with <i>aria-hidden</i>.
+            </p>
+
+            <p>
+                Next and Previous navigators are button elements with <i>aria-label</i> attributes referring to the <i>aria.nextPageLabel</i> and <i>aria.firstPageLabel</i> properties of the <Link href="http://github.com/locale">locale</Link> API by default
+                respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using <i>nextButtonProps</i> and <i>prevButtonProps</i>.
+            </p>
+
+            <p>
+                Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a <i>tablist</i> role whereas each item has a <i>tab</i> role with <i>aria-selected</i> and <i>aria-controls</i> attributes. The{' '}
+                <i>aria-label</i> attribute of a quick navigation item refers to the <i>aria.pageLabel</i> of the <Link href="http://github.com/locale">locale</Link> API. Current page is marked with <i>aria-current</i>.
+            </p>
+
+            <p>
+                In full screen mode, modal element uses <i>dialog</i> role with <i>aria-modal</i> enabled. The close button retrieves <i>aria-label</i> from the <i>aria.close</i> property of the <Link href="http://github.com/locale">locale</Link> API.
+            </p>
+
+            <h3>Next/Prev Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through interactive elements in the carousel.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates navigation.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates navigation.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Quick Navigation Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the active slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first slide link.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last slide link.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/galleria/advanceddoc.js b/components/doc/galleria/advanceddoc.js
new file mode 100644
index 0000000000..6d377880d4
--- /dev/null
+++ b/components/doc/galleria/advanceddoc.js
@@ -0,0 +1,656 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useEffect, useRef, useState } from 'react';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function AdvancedDoc(props) {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [showThumbnails, setShowThumbnails] = useState(false);
+    const [isAutoPlayActive, setAutoPlayActive] = useState(true);
+    const [isFullScreen, setFullScreen] = useState(false);
+    const galleria = useRef(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '960px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+        bindDocumentListeners();
+
+        return () => unbindDocumentListeners();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        setAutoPlayActive(galleria.current.isAutoPlayActive());
+    }, [isAutoPlayActive]);
+
+    const onItemChange = (event) => {
+        setActiveIndex(event.index);
+    };
+
+    const toggleFullScreen = () => {
+        if (isFullScreen) {
+            closeFullScreen();
+        } else {
+            openFullScreen();
+        }
+    };
+
+    const onFullScreenChange = () => {
+        setFullScreen((prevState) => !prevState);
+    };
+
+    const openFullScreen = () => {
+        let elem = document.querySelector('.custom-galleria');
+
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        } else if (elem.mozRequestFullScreen) {
+            /* Firefox */
+            elem.mozRequestFullScreen();
+        } else if (elem.webkitRequestFullscreen) {
+            /* Chrome, Safari & Opera */
+            elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) {
+            /* IE/Edge */
+            elem.msRequestFullscreen();
+        }
+    };
+
+    const closeFullScreen = () => {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    };
+
+    const bindDocumentListeners = () => {
+        document.addEventListener('fullscreenchange', onFullScreenChange);
+        document.addEventListener('mozfullscreenchange', onFullScreenChange);
+        document.addEventListener('webkitfullscreenchange', onFullScreenChange);
+        document.addEventListener('msfullscreenchange', onFullScreenChange);
+    };
+
+    const unbindDocumentListeners = () => {
+        document.removeEventListener('fullscreenchange', onFullScreenChange);
+        document.removeEventListener('mozfullscreenchange', onFullScreenChange);
+        document.removeEventListener('webkitfullscreenchange', onFullScreenChange);
+        document.removeEventListener('msfullscreenchange', onFullScreenChange);
+    };
+
+    const thumbnailTemplate = (item) => {
+        return (
+            <div className="grid grid-nogutter justify-content-center">
+                <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />
+            </div>
+        );
+    };
+
+    const itemTemplate = (item) => {
+        if (isFullScreen) {
+            return <img src={item.itemImageSrc} alt={item.alt} />;
+        }
+
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const renderFooter = () => {
+        let autoPlayClassName = classNames('pi', {
+            'pi-play': !isAutoPlayActive,
+            'pi-pause': isAutoPlayActive
+        });
+
+        let fullScreenClassName = classNames('pi', {
+            'pi-window-maximize': !isFullScreen,
+            'pi-window-minimize': isFullScreen
+        });
+
+        return (
+            <div className="custom-galleria-footer">
+                <Button icon="pi pi-list" onClick={() => setShowThumbnails((prevState) => !prevState)} />
+                <Button
+                    icon={autoPlayClassName}
+                    onClick={() => {
+                        if (!isAutoPlayActive) {
+                            galleria.current.startSlideShow();
+                            setAutoPlayActive(true);
+                        } else {
+                            galleria.current.stopSlideShow();
+                            setAutoPlayActive(false);
+                        }
+                    }}
+                />
+                {images && (
+                    <span className="title-container">
+                        <span>
+                            {activeIndex + 1}/{images.length}
+                        </span>
+                        <span className="title">{images[activeIndex].title}</span>
+                        <span>{images[activeIndex].alt}</span>
+                    </span>
+                )}
+                <Button icon={fullScreenClassName} onClick={() => toggleFullScreen()} className="fullscreen-button" />
+            </div>
+        );
+    };
+
+    const footer = renderFooter();
+    const galleriaClassName = classNames('custom-galleria', {
+        fullscreen: isFullScreen
+    });
+
+    const code = {
+        basic: `
+<Galleria ref={galleria} value={images} activeIndex={activeIndex} onItemChange={onItemChange}
+    showThumbnails={showThumbnails} showItemNavigators showItemNavigatorsOnHover
+    numVisible={5} circular autoPlay transitionInterval={3000} responsiveOptions={responsiveOptions}
+    item={itemTemplate} thumbnail={thumbnailTemplate} footer={footer}
+    style={{ maxWidth: '640px' }} className={galleriaClassName} />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { classNames } from 'primereact/utils';
+import { PhotoService } from './service/PhotoService';
+import './GalleriaAdvancedDemo.css';
+
+export default function AdvancedDemo() {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [showThumbnails, setShowThumbnails] = useState(false);
+    const [isAutoPlayActive, setAutoPlayActive] = useState(true);
+    const [isFullScreen, setFullScreen] = useState(false);
+    
+    const galleria = useRef(null)
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '960px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+        bindDocumentListeners();
+
+        return () => unbindDocumentListeners();
+    },[]);
+
+    useEffect(() => {
+        setAutoPlayActive(galleria.current.isAutoPlayActive())
+    },[isAutoPlayActive]);
+
+    const onItemChange = (event) => {
+        setActiveIndex(event.index)
+    }
+
+    const toggleFullScreen = () => {
+        if (isFullScreen) {
+            closeFullScreen();
+        }
+        else {
+            openFullScreen();
+        }
+    }
+
+    const onFullScreenChange = () => {
+        setFullScreen(prevState => !prevState )
+    }
+
+    const openFullScreen = () => {
+        let elem = document.querySelector('.custom-galleria');
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        }
+        else if (elem.mozRequestFullScreen) { /* Firefox */
+            elem.mozRequestFullScreen();
+        }
+        else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+            elem.webkitRequestFullscreen();
+        }
+        else if (elem.msRequestFullscreen) { /* IE/Edge */
+            elem.msRequestFullscreen();
+        }
+    }
+
+    const closeFullScreen = () => {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+        else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+        else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+        else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+
+    const bindDocumentListeners = () => {
+        document.addEventListener("fullscreenchange", onFullScreenChange);
+        document.addEventListener("mozfullscreenchange", onFullScreenChange);
+        document.addEventListener("webkitfullscreenchange", onFullScreenChange);
+        document.addEventListener("msfullscreenchange", onFullScreenChange);
+    }
+
+    const unbindDocumentListeners = () => {
+        document.removeEventListener("fullscreenchange", onFullScreenChange);
+        document.removeEventListener("mozfullscreenchange", onFullScreenChange);
+        document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
+        document.removeEventListener("msfullscreenchange", onFullScreenChange);
+    }
+
+    const thumbnailTemplate = (item) => {
+        return (
+            <div className="grid grid-nogutter justify-content-center">
+                <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />
+            </div>
+        );
+    }
+
+    const itemTemplate = (item) => {
+        if (isFullScreen) {
+            return <img src={item.itemImageSrc} alt={item.alt} />
+        }
+
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    const renderFooter = () => {
+        let autoPlayClassName = classNames('pi', {
+            'pi-play': !isAutoPlayActive,
+            'pi-pause': isAutoPlayActive
+        });
+
+        let fullScreenClassName = classNames('pi', {
+            'pi-window-maximize': !isFullScreen,
+            'pi-window-minimize': isFullScreen
+        });
+
+        return (
+            <div className="custom-galleria-footer">
+                <Button icon="pi pi-list" onClick={() => setShowThumbnails(prevState => !prevState)} />
+                <Button icon={autoPlayClassName} onClick={() => {
+                    if (!isAutoPlayActive) {
+                        galleria.current.startSlideShow();
+                        setAutoPlayActive(true)
+                    }
+                    else {
+                        galleria.current.stopSlideShow();
+                        setAutoPlayActive(false)
+                    }
+                }} />
+                {
+                    images && (
+                        <span className="title-container">
+                            <span>{activeIndex + 1}/{images.length}</span>
+                            <span className="title">{images[activeIndex].title}</span>
+                            <span>{images[activeIndex].alt}</span>
+                        </span>
+                    )
+                }
+                <Button icon={fullScreenClassName} onClick={() => toggleFullScreen()} className="fullscreen-button" />
+            </div>
+        );
+    }
+
+    const footer = renderFooter();
+    const galleriaClassName = classNames('custom-galleria', {
+        'fullscreen': isFullScreen
+    });
+
+    return (
+        <div className="card galleria-demo">
+            <Galleria ref={galleria} value={images} activeIndex={activeIndex} onItemChange={onItemChange}
+                showThumbnails={showThumbnails} showItemNavigators showItemNavigatorsOnHover
+                numVisible={5} circular autoPlay transitionInterval={3000} responsiveOptions={responsiveOptions}
+                item={itemTemplate} thumbnail={thumbnailTemplate} footer={footer}
+                style={{ maxWidth: '640px' }} className={galleriaClassName} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { classNames } from 'primereact/utils';
+import { PhotoService } from './service/PhotoService';
+import './GalleriaAdvancedDemo.css';
+
+export default function AdvancedDemo() {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+    const [showThumbnails, setShowThumbnails] = useState<boolean>(false);
+    const [isAutoPlayActive, setAutoPlayActive] = <boolean>useState(true);
+    const [isFullScreen, setFullScreen] = useState<boolean>(false);
+    
+    const galleria = useRef(null)
+
+    const responsiveOptions: GalleriaResponsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '960px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+        bindDocumentListeners();
+
+        return () => unbindDocumentListeners();
+    },[]);
+
+    useEffect(() => {
+        setAutoPlayActive(galleria.current.isAutoPlayActive())
+    },[isAutoPlayActive]);
+
+    const onItemChange = (event) => {
+        setActiveIndex(event.index)
+    }
+
+    const toggleFullScreen = () => {
+        if (isFullScreen) {
+            closeFullScreen();
+        }
+        else {
+            openFullScreen();
+        }
+    }
+
+    const onFullScreenChange = () => {
+        setFullScreen(prevState => !prevState )
+    }
+
+    const openFullScreen = () => {
+        let elem = document.querySelector('.custom-galleria');
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        }
+        else if (elem.mozRequestFullScreen) { /* Firefox */
+            elem.mozRequestFullScreen();
+        }
+        else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
+            elem.webkitRequestFullscreen();
+        }
+        else if (elem.msRequestFullscreen) { /* IE/Edge */
+            elem.msRequestFullscreen();
+        }
+    }
+
+    const closeFullScreen = () => {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        }
+        else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+        else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+        else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+
+    const bindDocumentListeners = () => {
+        document.addEventListener("fullscreenchange", onFullScreenChange);
+        document.addEventListener("mozfullscreenchange", onFullScreenChange);
+        document.addEventListener("webkitfullscreenchange", onFullScreenChange);
+        document.addEventListener("msfullscreenchange", onFullScreenChange);
+    }
+
+    const unbindDocumentListeners = () => {
+        document.removeEventListener("fullscreenchange", onFullScreenChange);
+        document.removeEventListener("mozfullscreenchange", onFullScreenChange);
+        document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
+        document.removeEventListener("msfullscreenchange", onFullScreenChange);
+    }
+
+    const thumbnailTemplate = (item) => {
+        return (
+            <div className="grid grid-nogutter justify-content-center">
+                <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />
+            </div>
+        );
+    }
+
+    const itemTemplate = (item) => {
+        if (isFullScreen) {
+            return <img src={item.itemImageSrc} alt={item.alt} />
+        }
+
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    const renderFooter = () => {
+        let autoPlayClassName = classNames('pi', {
+            'pi-play': !isAutoPlayActive,
+            'pi-pause': isAutoPlayActive
+        });
+
+        let fullScreenClassName = classNames('pi', {
+            'pi-window-maximize': !isFullScreen,
+            'pi-window-minimize': isFullScreen
+        });
+
+        return (
+            <div className="custom-galleria-footer">
+                <Button icon="pi pi-list" onClick={() => setShowThumbnails(prevState => !prevState)} />
+                <Button icon={autoPlayClassName} onClick={() => {
+                    if (!isAutoPlayActive) {
+                        galleria.current.startSlideShow();
+                        setAutoPlayActive(true)
+                    }
+                    else {
+                        galleria.current.stopSlideShow();
+                        setAutoPlayActive(false)
+                    }
+                }} />
+                {
+                    images && (
+                        <span className="title-container">
+                            <span>{activeIndex + 1}/{images.length}</span>
+                            <span className="title">{images[activeIndex].title}</span>
+                            <span>{images[activeIndex].alt}</span>
+                        </span>
+                    )
+                }
+                <Button icon={fullScreenClassName} onClick={() => toggleFullScreen()} className="fullscreen-button" />
+            </div>
+        );
+    }
+
+    const footer = renderFooter();
+    const galleriaClassName = classNames('custom-galleria', {
+        'fullscreen': isFullScreen
+    });
+    
+    return (
+        <div className="card galleria-demo">
+            <Galleria ref={galleria} value={images} activeIndex={activeIndex} onItemChange={onItemChange}
+                showThumbnails={showThumbnails} showItemNavigators showItemNavigatorsOnHover
+                numVisible={5} circular autoPlay transitionInterval={3000} responsiveOptions={responsiveOptions}
+                item={itemTemplate} thumbnail={thumbnailTemplate} footer={footer}
+                style={{ maxWidth: '640px' }} className={galleriaClassName} />
+        </div>
+    )
+}
+        `,
+
+        extFiles: {
+            'GalleriaAdvancedDemo.css': `
+/* GalleriaAdvancedDemo.css */
+
+.galleria-demo {
+    .custom-indicator-galleria {
+        .indicator-text {
+            color: #e9ecef;
+            cursor: pointer;
+        }
+
+        .p-highlight {
+            .indicator-text {
+                color: var(--primary-color);
+            }
+        }
+    }
+
+    .custom-galleria {
+        &.fullscreen {
+            display: flex;
+            flex-direction: column;
+
+            .p-galleria-content {
+                flex-grow: 1;
+                justify-content: center;
+            }
+        }
+
+        .p-galleria-content {
+            position: relative;
+        }
+
+        .p-galleria-thumbnail-wrapper {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+        }
+
+        .p-galleria-thumbnail-items-container {
+            width: 100%;
+        }
+
+        .custom-galleria-footer {
+            display: flex;
+            align-items: center;
+            background-color: rgba(0, 0, 0, .9);
+            color: #ffffff;
+
+            > button {
+                background-color: transparent;
+                color: #ffffff;
+                border: 0 none;
+                border-radius: 0;
+                margin: .2rem 0;
+
+                &.fullscreen-button {
+                    margin-left: auto;
+                }
+
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.1);
+                }
+            }
+        }
+
+        .title-container {
+            > span {
+                font-size: .9rem;
+                padding-left: .829rem;
+
+                &.title {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+}
+    `
+        },
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Advanced Galleria implementation with a custom UI.</p>
+            </DocSectionText>
+            <div className="card galleria-demo">
+                <Galleria
+                    ref={galleria}
+                    value={images}
+                    activeIndex={activeIndex}
+                    onItemChange={onItemChange}
+                    showThumbnails={showThumbnails}
+                    showItemNavigators
+                    showItemNavigatorsOnHover
+                    numVisible={5}
+                    circular
+                    autoPlay
+                    transitionInterval={3000}
+                    responsiveOptions={responsiveOptions}
+                    item={itemTemplate}
+                    thumbnail={thumbnailTemplate}
+                    footer={footer}
+                    style={{ maxWidth: '640px' }}
+                    className={galleriaClassName}
+                />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/autoplaydoc.js b/components/doc/galleria/autoplaydoc.js
new file mode 100644
index 0000000000..e482805362
--- /dev/null
+++ b/components/doc/galleria/autoplaydoc.js
@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function AutoPlayDoc(props) {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
+    item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function AutoPlayDemo() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card">
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
+                item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function AutoPlayDemo() {
+    const [images, setImages] = useState(null)
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+    
+    return (
+        <div className="card">
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
+                item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} item={itemTemplate} thumbnail={thumbnailTemplate} circular autoPlay transitionInterval={2000} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/basicdoc.js b/components/doc/galleria/basicdoc.js
new file mode 100644
index 0000000000..eb1243a217
--- /dev/null
+++ b/components/doc/galleria/basicdoc.js
@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function BasicDoc(props) {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
+    item={itemTemplate} thumbnail={thumbnailTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function BasicDemo() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, [])
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%' }} />
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} />
+    }
+
+    return (
+        <div className="card">
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
+                item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function BasicDemo() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item: any) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%' }} />
+    }
+
+    const thumbnailTemplate = (item: any) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} />
+    }
+
+    return (
+        <div className="card">
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
+                item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} item={itemTemplate} thumbnail={thumbnailTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/captiondoc.js b/components/doc/galleria/captiondoc.js
new file mode 100644
index 0000000000..e94a2c8046
--- /dev/null
+++ b/components/doc/galleria/captiondoc.js
@@ -0,0 +1,178 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import React, { useEffect, useState } from 'react';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function CaptionDoc(props) {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const caption = (item) => {
+        return (
+            <React.Fragment>
+                <div className="text-xl mb-2 font-bold">{item.title}</div>
+                <p className="text-white">{item.alt}</p>
+            </React.Fragment>
+        );
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} 
+    item={itemTemplate} thumbnail={thumbnailTemplate} caption={caption} style={{ maxWidth: '640px' }} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function CaptionDemo() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    const caption = (item) => {
+        return (
+            <React.Fragment>
+                <div className="text-xl mb-2 font-bold">{item.title}</div>
+                <p className="text-white">{item.alt}</p>
+            </React.Fragment>
+        );
+    }
+
+    return (
+        <div className="card">
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} 
+                item={itemTemplate} thumbnail={thumbnailTemplate} caption={caption} style={{ maxWidth: '640px' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function CaptionDoc() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    const caption = (item: any) => {
+        return (
+            <React.Fragment>
+                <div className="text-xl mb-2 font-bold">{item.title}</div>
+                <p className="text-white">{item.alt}</p>
+            </React.Fragment>
+        );
+    }
+
+    return (
+        <div className="card">
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} 
+                item={itemTemplate} thumbnail={thumbnailTemplate} caption={caption} style={{ maxWidth: '640px' }} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} item={itemTemplate} thumbnail={thumbnailTemplate} caption={caption} style={{ maxWidth: '640px' }} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/controlleddoc.js b/components/doc/galleria/controlleddoc.js
new file mode 100644
index 0000000000..a2742b342f
--- /dev/null
+++ b/components/doc/galleria/controlleddoc.js
@@ -0,0 +1,219 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function ControlledDoc(props) {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const next = () => {
+        setActiveIndex((prevState) => (prevState === images.length - 1 ? 0 : prevState + 1));
+    };
+
+    const prev = () => {
+        setActiveIndex((prevState) => (prevState === 0 ? 0 : prevState - 1));
+    };
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<div>
+    <Button icon="pi pi-minus" onClick={prev} className="p-button-secondary" />
+    <Button icon="pi pi-plus" onClick={next} className="p-button-secondary ml-2" />
+</div>
+
+<Galleria value={images} activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)} responsiveOptions={responsiveOptions} numVisible={5}
+    item={itemTemplate} thumbnail={thumbnailTemplate} style={{ maxWidth: '640px' }} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ControlledDemo() {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0)
+
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const next = () => {
+        setActiveIndex(prevState => (prevState === images.length - 1) ? 0 : prevState + 1)
+    }
+
+    const prev = () => {
+        setActiveIndex((prevState) => (prevState === 0 ? 0 : prevState - 1));
+    };
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card">
+            <div className="mb-3">
+                <Button icon="pi pi-minus" onClick={prev} />
+                <Button icon="pi pi-plus" onClick={next} className="p-button-secondary ml-2" />
+            </div>
+
+            <Galleria
+                value={images}
+                activeIndex={activeIndex}
+                onItemChange={(e) => setActiveIndex(e.index)}
+                responsiveOptions={responsiveOptions}
+                numVisible={5}
+                item={itemTemplate}
+                thumbnail={thumbnailTemplate}
+                style={{ maxWidth: '640px' }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ControlledDemo() {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0)
+    
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const next = () => {
+        setActiveIndex(prevState => (prevState === images.length - 1) ? 0 : prevState + 1)
+    }
+
+    const prev = () => {
+        setActiveIndex((prevState) => (prevState === 0 ? 0 : prevState - 1));
+    };
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card">
+            <div className="mb-3">
+                <Button icon="pi pi-minus" onClick={prev} />
+                <Button icon="pi pi-plus" onClick={next} className="p-button-secondary ml-2" />
+            </div>
+
+            <Galleria
+                value={images}
+                activeIndex={activeIndex}
+                onItemChange={(e) => setActiveIndex(e.index)}
+                responsiveOptions={responsiveOptions}
+                numVisible={5}
+                item={itemTemplate}
+                thumbnail={thumbnailTemplate}
+                style={{ maxWidth: '640px' }}
+            />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Galleria can be controlled programmatically using a binding to <i>activeIndex</i> along with <i>onItemChange</i> event to update the active index.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="mb-3">
+                    <Button icon="pi pi-minus" onClick={prev} />
+                    <Button icon="pi pi-plus" onClick={next} className="p-button-secondary ml-2" />
+                </div>
+
+                <Galleria value={images} activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)} responsiveOptions={responsiveOptions} numVisible={5} item={itemTemplate} thumbnail={thumbnailTemplate} style={{ maxWidth: '640px' }} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/fullscreen/customcontentdoc.js b/components/doc/galleria/fullscreen/customcontentdoc.js
new file mode 100644
index 0000000000..5a66116b07
--- /dev/null
+++ b/components/doc/galleria/fullscreen/customcontentdoc.js
@@ -0,0 +1,191 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useRef, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function CustomContentDoc(props) {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const galleria = useRef(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria ref={galleria} value={images} numVisible={7} style={{ maxWidth: '850px' }}
+    activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)}
+    circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+<div className="grid" style={{ maxWidth: '400px' }}>
+    {
+        images && images.map((image, index) => {
+            let imgEl = <img src={image.thumbnailImageSrc} onClick={
+                () => {setActiveIndex(index); galleria.current.show()}
+            } />
+            return (
+                <div className="col-3" key={index}>
+                    {imgEl}
+                </div>
+            )
+        })
+    }
+</div>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function CustomContentDemo() {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState(0);    
+    const galleria = useRef(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Galleria ref={galleria} value={images} numVisible={7} style={{ maxWidth: '850px' }}
+            activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)}
+            circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+            <div className="grid" style={{ maxWidth: '400px' }}>
+                {
+                    images && images.map((image, index) => {
+                        let imgEl = <img src={image.thumbnailImageSrc} alt={image.alt} style={{ cursor: 'pointer' }} onClick={
+                            () => {setActiveIndex(index); galleria.current.show()}
+                        } />
+                        return (
+                            <div className="col-3" key={index}>
+                                {imgEl}
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function CustomContentDemo() {
+    const [images, setImages] = useState(null);
+    const [activeIndex, setActiveIndex] = useState<number>(0);    
+    const galleria = useRef<Galleria>(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Galleria ref={galleria} value={images} numVisible={7} style={{ maxWidth: '850px' }}
+            activeIndex={activeIndex} onItemChange={(e) => setActiveIndex(e.index)}
+            circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+            <div className="grid" style={{ maxWidth: '400px' }}>
+                {
+                    images && images.map((image, index) => {
+                        let imgEl = <img src={image.thumbnailImageSrc} alt={image.alt} style={{ cursor: 'pointer' }} onClick={
+                            () => {setActiveIndex(index); galleria.current.show()}
+                        } />
+                        return (
+                            <div className="col-4" key={index}>
+                                {imgEl}
+                            </div>
+                        )
+                    })
+                }
+            </div>
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Using <i>activeIndex</i>, Galleria is displayed with a specific initial image.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Galleria
+                    ref={galleria}
+                    value={images}
+                    numVisible={7}
+                    style={{ maxWidth: '850px' }}
+                    activeIndex={activeIndex}
+                    onItemChange={(e) => setActiveIndex(e.index)}
+                    circular
+                    fullScreen
+                    showItemNavigators
+                    showThumbnails={false}
+                    item={itemTemplate}
+                    thumbnail={thumbnailTemplate}
+                />
+                <div className="grid" style={{ maxWidth: '400px' }}>
+                    {images &&
+                        images.map((image, index) => {
+                            return (
+                                <div className="col-4" key={index}>
+                                    <img
+                                        src={image.thumbnailImageSrc}
+                                        alt={image.alt}
+                                        style={{ cursor: 'pointer' }}
+                                        onClick={() => {
+                                            setActiveIndex(index);
+                                            galleria.current.show();
+                                        }}
+                                    />
+                                </div>
+                            );
+                        })}
+                </div>
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/fullscreen/withoutthumbnailsdoc.js b/components/doc/galleria/fullscreen/withoutthumbnailsdoc.js
new file mode 100644
index 0000000000..3b93f90df2
--- /dev/null
+++ b/components/doc/galleria/fullscreen/withoutthumbnailsdoc.js
@@ -0,0 +1,120 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useRef, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function WithoutThumbnailsDoc(props) {
+    const [images, setImages] = useState(null);
+    const galleria = useRef(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria ref={galleria} value={images} numVisible={9} style={{ maxWidth: '50%' }} 
+    circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+<Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function WithoutThumbnailsDemo() {
+    const [images, setImages] = useState(null);
+    const galleria = useRef(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Galleria ref={galleria} value={images} numVisible={9} style={{ maxWidth: '50%' }} 
+                circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+            <Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function WithoutThumbnailsDemo() {
+    const [images, setImages] = useState(null);
+    const galleria = useRef(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+    
+    return (
+        <div className="card flex justify-content-center">
+            <Galleria ref={galleria} value={images} numVisible={9} style={{ maxWidth: '50%' }} 
+                circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+            <Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Thumbnails can also be hidden in full screen mode.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Galleria ref={galleria} value={images} numVisible={9} style={{ maxWidth: '50%' }} circular fullScreen showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+                <Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/fullscreen/withthumbnailsdoc.js b/components/doc/galleria/fullscreen/withthumbnailsdoc.js
new file mode 100644
index 0000000000..86aef688f8
--- /dev/null
+++ b/components/doc/galleria/fullscreen/withthumbnailsdoc.js
@@ -0,0 +1,179 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useRef, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function WithThumbnailsDoc(props) {
+    const [images, setImages] = useState(null);
+    const galleria = useRef(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1500px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '1024px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 2
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={9} style={{ maxWidth: '50%' }} 
+    circular fullScreen showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+<Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function WithThumbnailsDemo() {
+    const [images, setImages] = useState(null);
+    const galleria = useRef(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1500px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '1024px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 2
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={9} style={{ maxWidth: '50%' }} 
+                circular fullScreen showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+            <Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function WithThumbnailsDemo() {
+    const [images, setImages] = useState(null);
+    const galleria = useRef(null);
+
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '1500px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '1024px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 2
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+    
+    return (
+        <div className="card flex justify-content-center">
+            <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={9} style={{ maxWidth: '50%' }} 
+                circular fullScreen showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+            <Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Full screen mode is enabled by adding <i>fullScreen</i> property and the <i>ref</i> of the Galleria needs to be defined so that <i>show</i> method can be called from a target like a button.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Galleria ref={galleria} value={images} responsiveOptions={responsiveOptions} numVisible={9} style={{ maxWidth: '50%' }} circular fullScreen showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+
+                <Button label="Show" icon="pi pi-external-link" onClick={() => galleria.current.show()} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/importdoc.js b/components/doc/galleria/importdoc.js
new file mode 100644
index 0000000000..124d10afc4
--- /dev/null
+++ b/components/doc/galleria/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Galleria } from 'primereact/galleria';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/galleria/indicator/clickeventdoc.js b/components/doc/galleria/indicator/clickeventdoc.js
new file mode 100644
index 0000000000..1d5d47f106
--- /dev/null
+++ b/components/doc/galleria/indicator/clickeventdoc.js
@@ -0,0 +1,93 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function ClickEventDoc(props) {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators item={itemTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ClickEventDemo() {
+    const [images, setImages] = useState(null);
+    
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    return (
+        <div className="card">
+            <Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators item={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ClickEventDemo() {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    return (
+        <div className="card">
+            <Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators item={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators item={itemTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/indicator/hovereventdoc.js b/components/doc/galleria/indicator/hovereventdoc.js
new file mode 100644
index 0000000000..7ffed33d86
--- /dev/null
+++ b/components/doc/galleria/indicator/hovereventdoc.js
@@ -0,0 +1,93 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function HoverEventDoc(props) {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators item={itemTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function HoverEventDemo() {
+    const [images, setImages] = useState(null);
+    
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    return (
+        <div className="card">
+            <Galleria value={images} style={{ maxWidth: '640px' }} changeItemOnIndicatorHover showThumbnails={false} showIndicators item={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function HoverEventDemo() {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    return (
+        <div className="card">
+            <Galleria value={images} style={{ maxWidth: '640px' }} changeItemOnIndicatorHover showThumbnails={false} showIndicators item={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} style={{ maxWidth: '640px' }} changeItemOnIndicatorHover showThumbnails={false} showIndicators item={itemTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/indicator/positiondoc.js b/components/doc/galleria/indicator/positiondoc.js
new file mode 100644
index 0000000000..a08090ec56
--- /dev/null
+++ b/components/doc/galleria/indicator/positiondoc.js
@@ -0,0 +1,213 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function PositionDoc(props) {
+    const [images, setImages] = useState(null);
+    const [inside, setInside] = useState(false);
+    const [position, setPosition] = useState('bottom');
+    const positionOptions = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators 
+    showIndicatorsOnItem={inside} indicatorsPosition={position} item={itemTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { Checkbox } from 'primereact/checkbox';
+import { RadioButton } from 'primereact/radiobutton';
+import { PhotoService } from './service/PhotoService';
+
+export default function PositionDemo() {
+    const [images, setImages] = useState(null);
+    const [inside, setInside] = useState(false);
+    const [position, setPosition] = useState('bottom');
+    const positionOptions = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+    
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3 mb-5">
+                {positionOptions.map((option) => {
+                    const { label, value } = option;
+
+                    return (
+                        <div className="flex align-items-center" key={label}>
+                            <RadioButton value={value} onChange={(e) => setPosition(e.value)} checked={position === value} />
+                            <label htmlFor={label} className="ml-2">{label}</label>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="flex align-items-center mb-5">
+                <Checkbox inputId="inside_cbox" onChange={e => setInside(e.checked)} checked={inside}></Checkbox>
+                <label htmlFor="inside_cbox" className="ml-2">Inside</label>
+            </div>
+            <Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators 
+                    showIndicatorsOnItem={inside} indicatorsPosition={position} item={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { Checkbox } from 'primereact/checkbox';
+import { PhotoService } from './service/PhotoService';
+
+export default function PositionDemo() {
+    const [images, setImages] = useState(null);
+    const [inside, setInside] = useState<boolean>(false);
+    const [position, setPosition] = useState<string>('bottom');
+    const positionOptions: Array<{label: string, value: string}> = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+    
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3 mb-5">
+                {positionOptions.map((option) => {
+                    const { label, value } = option;
+
+                    return (
+                        <div className="flex align-items-center" key={label}>
+                            <RadioButton value={value} onChange={(e) => setPosition(e.value)} checked={position === value} />
+                            <label htmlFor={label} className="ml-2">{label}</label>
+                        </div>
+                    );
+                })}
+            </div>
+            <div className="flex align-items-center mb-5">
+                <Checkbox inputId="inside_cbox" onChange={e => setInside(e.checked)} checked={inside}></Checkbox>
+                <label htmlFor="inside_cbox" className="ml-2">Inside</label>
+            </div>
+            <Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators 
+                    showIndicatorsOnItem={inside} indicatorsPosition={position} item={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Indicators can be placed at four different sides using the <i>indicatorsPosition</i> property. In addition, enabling <i>showIndicatorsOnItem</i> moves the indicators inside the image section.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-3 mb-5">
+                    {positionOptions.map((option) => {
+                        const { label, value } = option;
+
+                        return (
+                            <div className="flex align-items-center" key={label}>
+                                <RadioButton value={value} onChange={(e) => setPosition(e.value)} checked={position === value} />
+                                <label htmlFor={label} className="ml-2">
+                                    {label}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className="flex align-items-center mb-5">
+                    <Checkbox inputId="inside_cbox" onChange={(e) => setInside(e.checked)} checked={inside} />
+                    <label htmlFor="inside_cbox" className="ml-2">
+                        Inside
+                    </label>
+                </div>
+                <Galleria value={images} style={{ maxWidth: '640px' }} showThumbnails={false} showIndicators showIndicatorsOnItem={inside} indicatorsPosition={position} item={itemTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/indicator/templatedoc.js b/components/doc/galleria/indicator/templatedoc.js
new file mode 100644
index 0000000000..fdc3883ed7
--- /dev/null
+++ b/components/doc/galleria/indicator/templatedoc.js
@@ -0,0 +1,139 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function IndicatorTemplateDoc(props) {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const indicatorTemplate = (index) => {
+        return <span style={{ color: '#ffffff', cursor: 'pointer' }}>{index + 1}</span>;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} style={{ maxWidth: '640px' }} className="custom-indicator-galleria" showThumbnails={false} showIndicators changeItemOnIndicatorHover
+    showIndicatorsOnItem indicatorsPosition="left" item={itemTemplate} indicator={indicatorTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function IndicatorTemplateDemo() {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const indicatorTemplate = (index) => {
+        return <span style={{ color: '#ffffff', cursor: 'pointer'}}>{index + 1}</span>;
+    };
+
+    return (
+        <div className="card">
+            <Galleria
+                value={images}
+                style={{ maxWidth: '640px' }}
+                className="custom-indicator-galleria"
+                showThumbnails={false}
+                showIndicators
+                changeItemOnIndicatorHover
+                showIndicatorsOnItem
+                indicatorsPosition="left"
+                item={itemTemplate}
+                indicator={indicatorTemplate}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function IndicatorTemplateDemo() {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const indicatorTemplate = (index) => {
+        return <span style={{ color: '#ffffff', cursor: 'pointer'}}>{index + 1}</span>;
+    };
+    
+    return (
+        <div className="card">
+            <Galleria
+                value={images}
+                style={{ maxWidth: '640px' }}
+                className="custom-indicator-galleria"
+                showThumbnails={false}
+                showIndicators
+                changeItemOnIndicatorHover
+                showIndicatorsOnItem
+                indicatorsPosition="left"
+                item={itemTemplate}
+                indicator={indicatorTemplate}
+            />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria
+                    value={images}
+                    style={{ maxWidth: '640px' }}
+                    className="custom-indicator-gallerisa"
+                    showThumbnails={false}
+                    showIndicators
+                    changeItemOnIndicatorHover
+                    showIndicatorsOnItem
+                    indicatorsPosition="left"
+                    item={itemTemplate}
+                    indicator={indicatorTemplate}
+                />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/navigator/hoverdoc.js b/components/doc/galleria/navigator/hoverdoc.js
new file mode 100644
index 0000000000..f1096f854e
--- /dev/null
+++ b/components/doc/galleria/navigator/hoverdoc.js
@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function HoverDoc(props) {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }} 
+    showItemNavigators showItemNavigatorsOnHover item={itemTemplate} thumbnail={thumbnailTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function HoverDemo() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }}
+                showItemNavigators showItemNavigatorsOnHover item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function HoverDemo() {
+    const [images, setImages] = useState(null)
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }}
+                showItemNavigators showItemNavigatorsOnHover item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators showItemNavigatorsOnHover item={itemTemplate} thumbnail={thumbnailTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/navigator/indicatorsdoc.js b/components/doc/galleria/navigator/indicatorsdoc.js
new file mode 100644
index 0000000000..6d59fa9e06
--- /dev/null
+++ b/components/doc/galleria/navigator/indicatorsdoc.js
@@ -0,0 +1,109 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function IndicatorsDoc(props) {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} 
+    showItemNavigators showItemNavigatorsOnHover showIndicators
+    showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function IndicatorsDemo() {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} 
+                showItemNavigators showItemNavigatorsOnHover showIndicators
+                showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function IndicatorsDemo() {
+    const [images, setImages] = useState(null)
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} 
+                showItemNavigators showItemNavigatorsOnHover showIndicators
+                showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Navigators and Indicators can be combined as well.</p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators showItemNavigatorsOnHover showIndicators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/navigator/itemthumbnailsdoc.js b/components/doc/galleria/navigator/itemthumbnailsdoc.js
new file mode 100644
index 0000000000..f06c1a8c45
--- /dev/null
+++ b/components/doc/galleria/navigator/itemthumbnailsdoc.js
@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function ItemThumbnailsDoc(props) {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators 
+    item={itemTemplate} thumbnail={thumbnailTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ItemThumbnailsDemo() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }}
+                showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ItemThumbnailsDoc() {
+    const [images, setImages] = useState(null)
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }}
+                showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Add <i>showItemNavigators</i> to display navigator elements and the left and right side.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/navigator/itemwithouthumbnailsdoc.js b/components/doc/galleria/navigator/itemwithouthumbnailsdoc.js
new file mode 100644
index 0000000000..9589a02d32
--- /dev/null
+++ b/components/doc/galleria/navigator/itemwithouthumbnailsdoc.js
@@ -0,0 +1,106 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../../service/PhotoService';
+
+export function ItemWithoutThumbnailsDoc(props) {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators 
+    showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ItemWithoutThumbnailsDemo() {
+    const [images, setImages] = useState(null);
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }}
+                showThumbnails={false} showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ItemWithoutThumbnailsDemo() {
+    const [images, setImages] = useState(null)
+
+    useEffect(() => {
+            PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    }
+
+    return (
+        <div className="card"> 
+            <Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }}
+                showThumbnails={false} showItemNavigators item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Simple example with indicators only.</p>
+            </DocSectionText>
+            <div className="card">
+                <Galleria value={images} numVisible={5} circular style={{ maxWidth: '640px' }} showItemNavigators showThumbnails={false} item={itemTemplate} thumbnail={thumbnailTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/pt/wireframe.js b/components/doc/galleria/pt/wireframe.js
new file mode 100644
index 0000000000..0d0d18b0b0
--- /dev/null
+++ b/components/doc/galleria/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="galleria" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/galleria/responsivedoc.js b/components/doc/galleria/responsivedoc.js
new file mode 100644
index 0000000000..2bee44a925
--- /dev/null
+++ b/components/doc/galleria/responsivedoc.js
@@ -0,0 +1,169 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function ResponsiveDoc(props) {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '960px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria value={images} responsiveOptions={responsiveOptions} numVisible={7} circular style={{ maxWidth: '800px' }}
+    item={itemTemplate} thumbnail={thumbnailTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ResponsiveDoc() {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '960px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />
+    }
+
+    return (
+        <div>
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={7} circular style={{ maxWidth: '800px' }}
+                item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function ResponsiveDoc() {
+    const [images, setImages] = useState(null);
+
+    const responsiveOptions = [
+        {
+            breakpoint: '1024px',
+            numVisible: 5
+        },
+        {
+            breakpoint: '960px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '768px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '560px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ display: 'block' }} />
+    }
+    
+    return (
+        <div>
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={7} circular style={{ maxWidth: '800px' }}
+                item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Galleria responsiveness is defined with the <i>responsiveOptions</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div>
+                    <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={7} circular style={{ maxWidth: '800px' }} item={itemTemplate} thumbnail={thumbnailTemplate} />
+                </div>
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/galleria/styledoc.js b/components/doc/galleria/styledoc.js
new file mode 100644
index 0000000000..7b21846b6f
--- /dev/null
+++ b/components/doc/galleria/styledoc.js
@@ -0,0 +1,59 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-galleria</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-item-wrapper</td>
+                            <td>Item wrapper element. It contains item container and indicators.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-item-container</td>
+                            <td>Container of the item wrapper. It contains navigation buttons, items and caption content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-indicators</td>
+                            <td>Container of the indicators. It contains indicator items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-thumbnail-content</td>
+                            <td>Thumbnail content element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-thumbnail-container</td>
+                            <td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-caption</td>
+                            <td>Content of the item caption.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/galleria/theming/styleddoc.js b/components/doc/galleria/theming/styleddoc.js
new file mode 100644
index 0000000000..61a3d1fa57
--- /dev/null
+++ b/components/doc/galleria/theming/styleddoc.js
@@ -0,0 +1,59 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-galleria</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-item-wrapper</td>
+                            <td>Item wrapper element. It contains item container and indicators.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-item-container</td>
+                            <td>Container of the item wrapper. It contains navigation buttons, items and caption content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-indicators</td>
+                            <td>Container of the indicators. It contains indicator items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-thumbnail-content</td>
+                            <td>Thumbnail content element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-thumbnail-container</td>
+                            <td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-galleria-caption</td>
+                            <td>Content of the item caption.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/galleria/theming/tailwinddoc.js b/components/doc/galleria/theming/tailwinddoc.js
new file mode 100644
index 0000000000..0bea93b25a
--- /dev/null
+++ b/components/doc/galleria/theming/tailwinddoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {    
+    galleria: {
+        root: 'flex flex-col',
+        content: 'flex flex-col',
+        itemwrapper: 'flex flex-col relative',
+        itemcontainer: 'relative flex h-full',
+        item: 'flex justify-center items-center h-full w-full',
+        thumbnailwrapper: 'flex flex-col overflow-auto shrink-0',
+        thumbnailcontainer: {
+            className: classNames('flex flex-row', 'bg-black/90 p-4')
+        },
+        previousthumbnailbutton: {
+            className: classNames(
+                'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
+                'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        thumbnailitemscontainer: 'overflow-hidden w-full',
+        thumbnailitems: 'flex',
+        thumbnailitem: {
+            className: classNames('overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 grow-0 shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300')
+        },
+        nextthumbnailbutton: {
+            className: classNames(
+                'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
+                'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        indicators: {
+            className: classNames('flex items-center justify-center', 'p-4')
+        },
+        indicator: 'mr-2',
+        indicatorbutton: ({ context }) => ({
+            className: classNames('w-4 h-4 transition duration-200 rounded-full', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]', {
+                'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
+                'bg-blue-500 hover:bg-blue-600': context.highlighted
+            })
+        }),
+        mask: {
+            className: classNames('fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90')
+        },
+        closebutton: {
+            className: classNames(
+                'absolute top-0 right-0 flex justify-center items-center overflow-hidden m-2',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        closeicon: 'w-6 h-6',
+        previousitembutton: {
+            className: classNames(
+                'inline-flex justify-center items-center overflow-hidden',
+                'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
+                'fixed top-1/2 mt-[-0.5rem]',
+                'left-0',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        nextitembutton: {
+            className: classNames(
+                'inline-flex justify-center items-center overflow-hidden',
+                'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
+                'fixed top-1/2 mt-[-0.5rem]',
+                'right-0',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        caption: {
+            className: classNames('absolute bottom-0 left-0 w-full', 'bg-black/50 text-white p-4')
+        },
+        transition: {
+            enterFromClass: 'opacity-0 scale-75',
+            enterActiveClass: 'transition-all duration-150 ease-in-out',
+            leaveActiveClass: 'transition-all duration-150 ease-in',
+            leaveToClass: 'opacity-0 scale-75'
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { PhotoService } from './service/PhotoService';
+
+export default function UnstyleDemo() {
+    const [images, setImages] = useState(null);
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, [])
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%' }} />
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} />
+    }
+
+    return (
+        <div className="card">
+            <Galleria value={images} responsiveOptions={responsiveOptions} numVisible={5} style={{ maxWidth: '640px' }} 
+                item={itemTemplate} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['PhotoService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/galleria/thumbnaildoc.js b/components/doc/galleria/thumbnaildoc.js
new file mode 100644
index 0000000000..ca2343fb99
--- /dev/null
+++ b/components/doc/galleria/thumbnaildoc.js
@@ -0,0 +1,248 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Galleria } from '@/components/lib/galleria/Galleria';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { useEffect, useState } from 'react';
+import { PhotoService } from '../../../service/PhotoService';
+
+export function ThumbnailDoc(props) {
+    const [images, setImages] = useState(null);
+    const [position, setPosition] = useState('bottom');
+    const positionOptions = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then((data) => setImages(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />;
+    };
+
+    const code = {
+        basic: `
+<Galleria style={{ maxWidth: '640px' }} value={images} responsiveOptions={responsiveOptions} numVisible={5} 
+    item={itemTemplate} thumbnailsPosition={position} thumbnail={thumbnailTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria } from 'primereact/galleria';
+import { RadioButton } from 'primereact/radiobutton';
+import { PhotoService } from './service/PhotoService';
+
+export default function ThumbnailDemo() {
+    const [images, setImages] = useState(null);
+    const [position, setPosition] = useState('bottom');
+    const positionOptions = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+    const responsiveOptions = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3 mb-5">
+                {positionOptions.map((option) => {
+                    const { label, value } = option;
+
+                    return (
+                        <div className="flex align-items-center" key={label}>
+                            <RadioButton value={value} onChange={(e) => setPosition(e.value)} checked={position === value} />
+                            <label htmlFor={label} className="ml-2">
+                                {label}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+            <Galleria style={{ maxWidth: '640px' }} value={images} responsiveOptions={responsiveOptions} numVisible={5} item={itemTemplate} thumbnailsPosition={position} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Galleria, GalleriaResponsiveOptions } from 'primereact/galleria';
+import { RadioButton } from 'primereact/radiobutton';
+import { PhotoService } from './service/PhotoService';
+
+export default function ThumbnailDemo() {
+    const [images, setImages] = useState(null);
+    const [position, setPosition] = useState<string>('bottom');
+    const positionOptions: Array<{label: string, value: string}> = [
+        {
+            label: 'Bottom',
+            value: 'bottom'
+        },
+        {
+            label: 'Top',
+            value: 'top'
+        },
+        {
+            label: 'Left',
+            value: 'left'
+        },
+        {
+            label: 'Right',
+            value: 'right'
+        }
+    ];
+    const responsiveOptions: GalleriaResponsiveOptions[] = [
+        {
+            breakpoint: '991px',
+            numVisible: 4
+        },
+        {
+            breakpoint: '767px',
+            numVisible: 3
+        },
+        {
+            breakpoint: '575px',
+            numVisible: 1
+        }
+    ];
+
+    useEffect(() => {
+        PhotoService.getImages().then(data => setImages(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return <img src={item.itemImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    const thumbnailTemplate = (item) => {
+        return <img src={item.thumbnailImageSrc} alt={item.alt} style={{ width: '100%', display: 'block' }} />
+    }
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3 mb-5">
+                {positionOptions.map((option) => {
+                    const { label, value } = option;
+
+                    return (
+                        <div className="flex align-items-center" key={label}>
+                            <RadioButton value={value} onChange={(e) => setPosition(e.value)} checked={position === value} />
+                            <label htmlFor={label} className="ml-2">
+                                {label}
+                            </label>
+                        </div>
+                    );
+                })}
+            </div>
+            <Galleria style={{ maxWidth: '640px' }} value={images} responsiveOptions={responsiveOptions} numVisible={5} item={itemTemplate} thumbnailsPosition={position} thumbnail={thumbnailTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* PhotoService */
+{
+    itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+    thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+    alt: 'Description for Image 1',
+    title: 'Title 1'
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Thumbnails represent a smaller version of the actual content.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-3 mb-5">
+                    {positionOptions.map((option) => {
+                        const { label, value } = option;
+
+                        return (
+                            <div className="flex align-items-center" key={label}>
+                                <RadioButton value={value} onChange={(e) => setPosition(e.value)} checked={position === value} />
+                                <label htmlFor={label} className="ml-2">
+                                    {label}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+                <Galleria style={{ maxWidth: '640px' }} value={images} responsiveOptions={responsiveOptions} numVisible={5} item={itemTemplate} thumbnailsPosition={position} thumbnail={thumbnailTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['PhotoService']} />
+        </>
+    );
+}
diff --git a/components/doc/gmap/accessibilitydoc.js b/components/doc/gmap/accessibilitydoc.js
new file mode 100644
index 0000000000..62dd77fcb5
--- /dev/null
+++ b/components/doc/gmap/accessibilitydoc.js
@@ -0,0 +1,11 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <p>
+                Refer to the <a href="https://support.google.com/maps/answer/6396990?hl=en&co=GENIE.Platform%3DDesktop">Google Maps documentation</a> for more information about accessibility.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/gmap/gmapdoc.js b/components/doc/gmap/gmapdoc.js
new file mode 100644
index 0000000000..9a946b06a6
--- /dev/null
+++ b/components/doc/gmap/gmapdoc.js
@@ -0,0 +1,626 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { Dialog } from '@/components/lib/dialog/Dialog';
+import { GMap } from '@/components/lib/gmap/GMap';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useEffect, useRef, useState } from 'react';
+
+export function GMapDoc(props) {
+    const [googleMapsReady, setGoogleMapsReady] = useState(false);
+    const [dialogVisible, setDialogVisible] = useState(false);
+    const [markerTitle, setMarkerTitle] = useState('');
+    const [draggableMarker, setDraggableMarker] = useState(false);
+    const [overlays, setOverlays] = useState(null);
+    const [selectedPosition, setSelectedPosition] = useState(null);
+
+    const toast = useRef(null);
+    const infoWindow = useRef(null);
+
+    useEffect(() => {
+        loadGoogleMaps(() => {
+            setGoogleMapsReady(true);
+        });
+
+        return () => {
+            removeGoogleMaps();
+        };
+    }, []);
+
+    const onMapClick = (event) => {
+        setDialogVisible(true);
+        setSelectedPosition(event.latLng);
+    };
+
+    const onOverlayClick = (event) => {
+        let isMarker = event.overlay.getTitle !== undefined;
+
+        if (isMarker) {
+            let title = event.overlay.getTitle();
+
+            infoWindow.current = infoWindow.current || new google.maps.InfoWindow();
+            infoWindow.setContent('<div>' + title + '</div>');
+            infoWindow.open(event.map, event.overlay);
+            event.map.setCenter(event.overlay.getPosition());
+
+            toast.current.show({ severity: 'info', summary: 'Marker Selected', detail: title });
+        } else {
+            toast.current.show({ severity: 'info', summary: 'Shape Selected', detail: '' });
+        }
+    };
+
+    const handleDragEnd = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Marker Dragged', detail: event.overlay.getTitle() });
+    };
+
+    const addMarker = () => {
+        let newMarker = new google.maps.Marker({
+            position: {
+                lat: selectedPosition.lat(),
+                lng: selectedPosition.lng()
+            },
+            title: markerTitle,
+            draggable: draggableMarker
+        });
+
+        setOverlays([...overlays, newMarker]);
+        setDialogVisible(false);
+        setDraggableMarker(false);
+        setMarkerTitle('');
+    };
+
+    const onMapReady = (event) => {
+        setOverlays([
+            new google.maps.Marker({ position: { lat: 36.879466, lng: 30.667648 }, title: 'Konyaalti' }),
+            new google.maps.Marker({ position: { lat: 36.883707, lng: 30.689216 }, title: 'Ataturk Park' }),
+            new google.maps.Marker({ position: { lat: 36.885233, lng: 30.702323 }, title: 'Oldtown' }),
+            new google.maps.Polygon({
+                paths: [
+                    { lat: 36.9177, lng: 30.7854 },
+                    { lat: 36.8851, lng: 30.7802 },
+                    { lat: 36.8829, lng: 30.8111 },
+                    { lat: 36.9177, lng: 30.8159 }
+                ],
+                strokeOpacity: 0.5,
+                strokeWeight: 1,
+                fillColor: '#1976D2',
+                fillOpacity: 0.35
+            }),
+            new google.maps.Circle({ center: { lat: 36.90707, lng: 30.56533 }, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500 }),
+            new google.maps.Polyline({
+                path: [
+                    { lat: 36.86149, lng: 30.63743 },
+                    { lat: 36.86341, lng: 30.72463 }
+                ],
+                geodesic: true,
+                strokeColor: '#FF0000',
+                strokeOpacity: 0.5,
+                strokeWeight: 2
+            })
+        ]);
+    };
+
+    const onHide = (event) => {
+        setDialogVisible(false);
+    };
+
+    const options = {
+        center: { lat: 36.890257, lng: 30.707417 },
+        zoom: 12
+    };
+
+    const footer = (
+        <div>
+            <Button label="Yes" icon="pi pi-check" onClick={addMarker} />
+            <Button label="No" icon="pi pi-times" onClick={onHide} />
+        </div>
+    );
+
+    const loadGoogleMaps = (callback) => {
+        const existingScript = document.getElementById('googleMaps');
+
+        if (!existingScript) {
+            const script = document.createElement('script');
+
+            script.src = 'https://maps.google.com/maps/api/js?key=AIzaSyA6Ar0UymhiklJBzEPLKKn2QHwbjdz3XV0';
+            script.id = 'googleMaps';
+            script.async = true;
+            script.defer = true;
+            document.body.appendChild(script);
+
+            script.onload = () => {
+                if (callback) {
+                    callback();
+                }
+            };
+        }
+
+        if (existingScript && callback) {
+            callback();
+        }
+    };
+
+    const removeGoogleMaps = () => {
+        const mapScript = document.getElementById('googleMaps');
+
+        if (mapScript) {
+            mapScript.parentNode.removeChild(mapScript);
+
+            const head = document.getElementsByTagName('head')[0];
+            const scripts = head.getElementsByTagName('script');
+
+            for (let i = 0; i < scripts.length; i++) {
+                let script = scripts[i];
+                let src = script.src;
+
+                if (src.startsWith('https://maps.google.com/maps')) {
+                    head.removeChild(script);
+                }
+            }
+        }
+    };
+
+    const code = {
+        basic: `
+<GMap overlays={overlays} options={options} style={{ width: '100%', minHeight: '320px' }} onMapReady={onMapReady} onMapClick={onMapClick} onOverlayClick={onOverlayClick} onOverlayDragEnd={handleDragEnd} />
+        `,
+        javascript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { Checkbox } from 'primereact/checkbox';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Toast } from 'primereact/toast';
+import { GMap } from 'primereact/gmap';
+import { InputText } from 'primereact/inputtext';
+
+export default function GMapDoc() {
+    const [googleMapsReady, setGoogleMapsReady] = useState(false);
+    const [dialogVisible, setDialogVisible] = useState(false);
+    const [markerTitle, setMarkerTitle] = useState('');
+    const [draggableMarker, setDraggableMarker] = useState(false);
+    const [overlays, setOverlays] = useState(null);
+    const [selectedPosition, setSelectedPosition] = useState(null);
+
+    const toast = useRef(null);
+    const infoWindow = useRef(null);
+
+    useEffect(() => {
+        loadGoogleMaps(() => {
+            setGoogleMapsReady(true);
+        });
+
+        return () => {
+            removeGoogleMaps();
+        };
+    }, []);
+
+    const onMapClick = (event) => {
+        setDialogVisible(true);
+        setSelectedPosition(event.latLng);
+    };
+
+    const onOverlayClick = (event) => {
+        let isMarker = event.overlay.getTitle !== undefined;
+
+        if (isMarker) {
+            let title = event.overlay.getTitle();
+
+            infoWindow.current = infoWindow.current || new google.maps.InfoWindow();
+            infoWindow.setContent('<div>' + title + '</div>');
+            infoWindow.open(event.map, event.overlay);
+            event.map.setCenter(event.overlay.getPosition());
+
+            toast.current.show({ severity: 'info', summary: 'Marker Selected', detail: title });
+        } else {
+            toast.current.show({ severity: 'info', summary: 'Shape Selected', detail: '' });
+        }
+    };
+
+    const handleDragEnd = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Marker Dragged', detail: event.overlay.getTitle() });
+    };
+
+    const addMarker = () => {
+        let newMarker = new google.maps.Marker({
+            position: {
+                lat: selectedPosition.lat(),
+                lng: selectedPosition.lng()
+            },
+            title: markerTitle,
+            draggable: draggableMarker
+        });
+
+        setOverlays([...overlays, newMarker]);
+        setDialogVisible(false);
+        setDraggableMarker(false);
+        setMarkerTitle('');
+    };
+
+    const onMapReady = (event) => {
+        setOverlays([
+            new google.maps.Marker({ position: { lat: 36.879466, lng: 30.667648 }, title: 'Konyaalti' }),
+            new google.maps.Marker({ position: { lat: 36.883707, lng: 30.689216 }, title: 'Ataturk Park' }),
+            new google.maps.Marker({ position: { lat: 36.885233, lng: 30.702323 }, title: 'Oldtown' }),
+            new google.maps.Polygon({
+                paths: [
+                    { lat: 36.9177, lng: 30.7854 },
+                    { lat: 36.8851, lng: 30.7802 },
+                    { lat: 36.8829, lng: 30.8111 },
+                    { lat: 36.9177, lng: 30.8159 }
+                ],
+                strokeOpacity: 0.5,
+                strokeWeight: 1,
+                fillColor: '#1976D2',
+                fillOpacity: 0.35
+            }),
+            new google.maps.Circle({ center: { lat: 36.90707, lng: 30.56533 }, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500 }),
+            new google.maps.Polyline({
+                path: [
+                    { lat: 36.86149, lng: 30.63743 },
+                    { lat: 36.86341, lng: 30.72463 }
+                ],
+                geodesic: true,
+                strokeColor: '#FF0000',
+                strokeOpacity: 0.5,
+                strokeWeight: 2
+            })
+        ]);
+    };
+
+    const onHide = (event) => {
+        setDialogVisible(false);
+    };
+
+    const options = {
+        center: { lat: 36.890257, lng: 30.707417 },
+        zoom: 12
+    };
+
+    const footer = (
+        <div>
+            <Button label="Yes" icon="pi pi-check" onClick={addMarker} />
+            <Button label="No" icon="pi pi-times" onClick={onHide} />
+        </div>
+    );
+
+    const loadGoogleMaps = (callback) => {
+        const existingScript = document.getElementById('googleMaps');
+
+        if (!existingScript) {
+            const script = document.createElement('script');
+
+            script.src = 'https://maps.google.com/maps/api/js?key=AIzaSyA6Ar0UymhiklJBzEPLKKn2QHwbjdz3XV0';
+            script.id = 'googleMaps';
+            script.async = true;
+            script.defer = true;
+            document.body.appendChild(script);
+
+            script.onload = () => {
+                if (callback) callback();
+            };
+        }
+
+        if (existingScript && callback) callback();
+    };
+
+    const removeGoogleMaps = () => {
+        const mapScript = document.getElementById('googleMaps');
+
+        if (mapScript) {
+            mapScript.parentNode.removeChild(mapScript);
+
+            const head = document.getElementsByTagName('head')[0];
+            const scripts = head.getElementsByTagName('script');
+
+            for (let i = 0; i < scripts.length; i++) {
+                let script = scripts[i];
+                let src = script.src;
+
+                if (src.startsWith('https://maps.google.com/maps')) {
+                    head.removeChild(script);
+                }
+            }
+        }
+    };
+    return (
+        <React.Fragment>
+            <Toast ref={toast}></Toast>
+
+            {googleMapsReady && (
+                <div className="card">
+                    <GMap overlays={overlays} options={options} style={{ width: '100%', minHeight: '320px' }} onMapReady={onMapReady} onMapClick={onMapClick} onOverlayClick={onOverlayClick} onOverlayDragEnd={handleDragEnd} />
+                </div>
+            )}
+
+            <Dialog header="New Location" visible={dialogVisible} width="300px" modal footer={footer} onHide={onHide}>
+                <div className="grid p-fluid">
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        <label htmlFor="title">Label</label>
+                    </div>
+                    <div className="col-10">
+                        <InputText type="text" id="title" value={markerTitle} onChange={(e) => setMarkerTitle(e.target.value)} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        Lat
+                    </div>
+                    <div className="col-10">
+                        <InputText readOnly value={selectedPosition ? selectedPosition.lat() : ''} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        Lng
+                    </div>
+                    <div className="col-10">
+                        <InputText readOnly value={selectedPosition ? selectedPosition.lng() : ''} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        <label htmlFor="drg">Drag</label>
+                    </div>
+                    <div className="col-10">
+                        <Checkbox checked={draggableMarker} onChange={(event) => setDraggableMarker(event.checked)} />
+                    </div>
+                </div>
+            </Dialog>
+        </React.Fragment>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { Checkbox } from 'primereact/checkbox';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Toast } from 'primereact/toast';
+import { GMap } from 'primereact/gmap';
+import { InputText } from 'primereact/inputtext';
+
+export default function GMapDoc() {
+    const [googleMapsReady, setGoogleMapsReady] = useState(false);
+    const [dialogVisible, setDialogVisible] = useState(false);
+    const [markerTitle, setMarkerTitle] = useState('');
+    const [draggableMarker, setDraggableMarker] = useState(false);
+    const [overlays, setOverlays] = useState(null);
+    const [selectedPosition, setSelectedPosition] = useState(null);
+
+    const toast = useRef(null);
+    const infoWindow = useRef(null);
+
+    useEffect(() => {
+        loadGoogleMaps(() => {
+            setGoogleMapsReady(true);
+        });
+
+        return () => {
+            removeGoogleMaps();
+        };
+    }, []);
+
+    const onMapClick = (event) => {
+        setDialogVisible(true);
+        setSelectedPosition(event.latLng);
+    };
+
+    const onOverlayClick = (event) => {
+        let isMarker = event.overlay.getTitle !== undefined;
+
+        if (isMarker) {
+            let title = event.overlay.getTitle();
+
+            infoWindow.current = infoWindow.current || new google.maps.InfoWindow();
+            infoWindow.setContent('<div>' + title + '</div>');
+            infoWindow.open(event.map, event.overlay);
+            event.map.setCenter(event.overlay.getPosition());
+
+            toast.current.show({ severity: 'info', summary: 'Marker Selected', detail: title });
+        } else {
+            toast.current.show({ severity: 'info', summary: 'Shape Selected', detail: '' });
+        }
+    };
+
+    const handleDragEnd = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Marker Dragged', detail: event.overlay.getTitle() });
+    };
+
+    const addMarker = () => {
+        let newMarker = new google.maps.Marker({
+            position: {
+                lat: selectedPosition.lat(),
+                lng: selectedPosition.lng()
+            },
+            title: markerTitle,
+            draggable: draggableMarker
+        });
+
+        setOverlays([...overlays, newMarker]);
+        setDialogVisible(false);
+        setDraggableMarker(false);
+        setMarkerTitle('');
+    };
+
+    const onMapReady = (event) => {
+        setOverlays([
+            new google.maps.Marker({ position: { lat: 36.879466, lng: 30.667648 }, title: 'Konyaalti' }),
+            new google.maps.Marker({ position: { lat: 36.883707, lng: 30.689216 }, title: 'Ataturk Park' }),
+            new google.maps.Marker({ position: { lat: 36.885233, lng: 30.702323 }, title: 'Oldtown' }),
+            new google.maps.Polygon({
+                paths: [
+                    { lat: 36.9177, lng: 30.7854 },
+                    { lat: 36.8851, lng: 30.7802 },
+                    { lat: 36.8829, lng: 30.8111 },
+                    { lat: 36.9177, lng: 30.8159 }
+                ],
+                strokeOpacity: 0.5,
+                strokeWeight: 1,
+                fillColor: '#1976D2',
+                fillOpacity: 0.35
+            }),
+            new google.maps.Circle({ center: { lat: 36.90707, lng: 30.56533 }, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500 }),
+            new google.maps.Polyline({
+                path: [
+                    { lat: 36.86149, lng: 30.63743 },
+                    { lat: 36.86341, lng: 30.72463 }
+                ],
+                geodesic: true,
+                strokeColor: '#FF0000',
+                strokeOpacity: 0.5,
+                strokeWeight: 2
+            })
+        ]);
+    };
+
+    const onHide = (event) => {
+        setDialogVisible(false);
+    };
+
+    const options = {
+        center: { lat: 36.890257, lng: 30.707417 },
+        zoom: 12
+    };
+
+    const footer = (
+        <div>
+            <Button label="Yes" icon="pi pi-check" onClick={addMarker} />
+            <Button label="No" icon="pi pi-times" onClick={onHide} />
+        </div>
+    );
+
+    const loadGoogleMaps = (callback) => {
+        const existingScript = document.getElementById('googleMaps');
+
+        if (!existingScript) {
+            const script = document.createElement('script');
+
+            script.src = 'https://maps.google.com/maps/api/js?key=AIzaSyA6Ar0UymhiklJBzEPLKKn2QHwbjdz3XV0';
+            script.id = 'googleMaps';
+            script.async = true;
+            script.defer = true;
+            document.body.appendChild(script);
+
+            script.onload = () => {
+                if (callback) callback();
+            };
+        }
+
+        if (existingScript && callback) callback();
+    };
+
+    const removeGoogleMaps = () => {
+        const mapScript = document.getElementById('googleMaps');
+
+        if (mapScript) {
+            mapScript.parentNode.removeChild(mapScript);
+
+            const head = document.getElementsByTagName('head')[0];
+            const scripts = head.getElementsByTagName('script');
+
+            for (let i = 0; i < scripts.length; i++) {
+                let script = scripts[i];
+                let src = script.src;
+
+                if (src.startsWith('https://maps.google.com/maps')) {
+                    head.removeChild(script);
+                }
+            }
+        }
+    };
+    return (
+        <React.Fragment>
+            <Toast ref={toast}></Toast>
+
+            {googleMapsReady && (
+                <div className="card">
+                    <GMap overlays={overlays} options={options} style={{ width: '100%', minHeight: '320px' }} onMapReady={onMapReady} onMapClick={onMapClick} onOverlayClick={onOverlayClick} onOverlayDragEnd={handleDragEnd} />
+                </div>
+            )}
+
+            <Dialog header="New Location" visible={dialogVisible} width="300px" modal footer={footer} onHide={onHide}>
+                <div className="grid p-fluid">
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        <label htmlFor="title">Label</label>
+                    </div>
+                    <div className="col-10">
+                        <InputText type="text" id="title" value={markerTitle} onChange={(e) => setMarkerTitle(e.target.value)} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        Lat
+                    </div>
+                    <div className="col-10">
+                        <InputText readOnly value={selectedPosition ? selectedPosition.lat() : ''} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        Lng
+                    </div>
+                    <div className="col-10">
+                        <InputText readOnly value={selectedPosition ? selectedPosition.lng() : ''} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        <label htmlFor="drg">Drag</label>
+                    </div>
+                    <div className="col-10">
+                        <Checkbox checked={draggableMarker} onChange={(event) => setDraggableMarker(event.checked)} />
+                    </div>
+                </div>
+            </Dialog>
+        </React.Fragment>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Applying <i>p-invalid</i> class to an input element indicates a failed validation.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+
+            {googleMapsReady && (
+                <div className="card">
+                    <GMap overlays={overlays} options={options} style={{ width: '100%', minHeight: '320px' }} onMapReady={onMapReady} onMapClick={onMapClick} onOverlayClick={onOverlayClick} onOverlayDragEnd={handleDragEnd} />
+                </div>
+            )}
+
+            <Dialog header="New Location" visible={dialogVisible} width="300px" modal footer={footer} onHide={onHide}>
+                <div className="grid p-fluid">
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        <label htmlFor="title">Label</label>
+                    </div>
+                    <div className="col-10">
+                        <InputText type="text" id="title" value={markerTitle} onChange={(e) => setMarkerTitle(e.target.value)} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        Lat
+                    </div>
+                    <div className="col-10">
+                        <InputText readOnly value={selectedPosition ? selectedPosition.lat() : ''} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        Lng
+                    </div>
+                    <div className="col-10">
+                        <InputText readOnly value={selectedPosition ? selectedPosition.lng() : ''} />
+                    </div>
+
+                    <div className="col-2" style={{ paddingTop: '.75em' }}>
+                        <label htmlFor="drg">Drag</label>
+                    </div>
+                    <div className="col-10">
+                        <Checkbox checked={draggableMarker} onChange={(event) => setDraggableMarker(event.checked)} />
+                    </div>
+                </div>
+            </Dialog>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/gmap/importdoc.js b/components/doc/gmap/importdoc.js
new file mode 100644
index 0000000000..e6acd42bbe
--- /dev/null
+++ b/components/doc/gmap/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { GMap } from 'primereact/gmap';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/gmap/styledoc.js b/components/doc/gmap/styledoc.js
new file mode 100644
index 0000000000..f4d3eb444b
--- /dev/null
+++ b/components/doc/gmap/styledoc.js
@@ -0,0 +1,11 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Component does not apply any styling.</p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/hooks/useclickoutside/basicdoc.js b/components/doc/hooks/useclickoutside/basicdoc.js
new file mode 100644
index 0000000000..1b81e7a72b
--- /dev/null
+++ b/components/doc/hooks/useclickoutside/basicdoc.js
@@ -0,0 +1,97 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useClickOutside } from '@/components/lib/hooks/Hooks';
+import { useRef, useState } from 'react';
+
+export function BasicDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const overlayRef = useRef(null);
+
+    useClickOutside(overlayRef, () => {
+        setVisible(false);
+    });
+
+    const code = {
+        basic: `
+<div className="relative">
+    <Button onClick={() => setVisible(true)} label="Show" />
+    {visible ? (
+        <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
+            Popup Content
+        </div>
+    ) : null}
+</div>  
+        `,
+        javascript: `
+import React, { useState, useRef } from 'react'; 
+import { Button } from 'primereact/button';
+import { useClickOutside } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState(false);
+    const overlayRef = useRef(null);
+
+    useClickOutside(overlayRef, () => {
+        setVisible(false);
+    });
+
+    return (
+        <div className="relative">
+            <Button onClick={() => setVisible(true)} label="Show" />
+            {visible ? (
+                <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
+                    Popup Content
+                </div>
+            ) : null}
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { useClickOutside } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const overlayRef = useRef(null);
+
+    useClickOutside(overlayRef, () => {
+        setVisible(false);
+    });
+
+    return (
+        <div className="relative">
+            <Button onClick={() => setVisible(true)} label="Show" />
+            {visible ? (
+                <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
+                    Popup Content
+                </div>
+            ) : null}
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Click the button to display a popup and click outside to hide it.</p>
+            </DocSectionText>
+
+            <div className="card flex justify-content-center">
+                <div className="relative">
+                    <Button onClick={() => setVisible(true)} label="Show" />
+                    {visible ? (
+                        <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
+                            Popup Content
+                        </div>
+                    ) : null}
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useclickoutside/importdoc.js b/components/doc/hooks/useclickoutside/importdoc.js
new file mode 100644
index 0000000000..1da4f57e20
--- /dev/null
+++ b/components/doc/hooks/useclickoutside/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useClickOutside } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usecounter/basicdoc.js b/components/doc/hooks/usecounter/basicdoc.js
new file mode 100644
index 0000000000..fe76ca4b12
--- /dev/null
+++ b/components/doc/hooks/usecounter/basicdoc.js
@@ -0,0 +1,78 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '../../../../components/lib/button/Button';
+import { useCounter } from '../../../../components/lib/hooks/Hooks';
+
+export function BasicDoc(props) {
+    const { count, increment, decrement, reset } = useCounter(0);
+
+    const code = {
+        basic: `
+<span className="font-bold text-4xl mb-5">{count}</span>
+<div className="flex flex-wrap gap-3">
+    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
+    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
+    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { useCounter } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const { count, increment, decrement, reset } = useCounter(0);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
+                <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { useCounter } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const { count, increment, decrement, reset } = useCounter(0);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
+                <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Simple counter with <i>increment</i>, <i>decrement</i> and <i>reset</i> functions.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <span className="font-bold text-4xl mb-5">{count}</span>
+                <div className="flex flex-wrap gap-3">
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment} />
+                    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usecounter/importdoc.js b/components/doc/hooks/usecounter/importdoc.js
new file mode 100644
index 0000000000..d4e45c37e3
--- /dev/null
+++ b/components/doc/hooks/usecounter/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useCounter } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usecounter/optionsdoc.js b/components/doc/hooks/usecounter/optionsdoc.js
new file mode 100644
index 0000000000..6a5f40c483
--- /dev/null
+++ b/components/doc/hooks/usecounter/optionsdoc.js
@@ -0,0 +1,78 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '../../../../components/lib/button/Button';
+import { useCounter } from '../../../../components/lib/hooks/Hooks';
+
+export function OptionsDoc(props) {
+    const { count, increment, decrement, reset } = useCounter(10, { step: 0.25, min: 0, max: 15 });
+
+    const code = {
+        basic: `
+<span className="font-bold text-4xl mb-5">{count}</span>
+<div className="flex flex-wrap gap-3">
+    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
+    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
+    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { useCounter } from 'primereact/hooks';
+
+export default function OptionsDemo() {
+    const { count, increment, decrement, reset } = useCounter(10, { step: 0.25, min: 0, max: 15 });
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
+                <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { useCounter } from 'primereact/hooks';
+
+export default function OptionsDemo() {
+    const { count, increment, decrement, reset } = useCounter(10, { step: 0.25, min: 0, max: 15 });
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment}></Button>
+                <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset}></Button>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Step factor to change the counter is specified using the <i>step</i> option. In addition boundaries can be defined with <i>min</i> and <i>max</i> options.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <span className="font-bold text-4xl mb-5">{count}</span>
+                <div className="flex flex-wrap gap-3">
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={increment} />
+                    <Button icon="pi pi-minus" className="p-button-outlined p-button-rounded" onClick={decrement} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={reset} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usedebounce/basicdoc.js b/components/doc/hooks/usedebounce/basicdoc.js
new file mode 100644
index 0000000000..9d487771a8
--- /dev/null
+++ b/components/doc/hooks/usedebounce/basicdoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useDebounce } from '@/components/lib/hooks/Hooks';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function BasicDoc(props) {
+    const [inputValue, debouncedValue, setInputValue] = useDebounce('', 400);
+
+    const code = {
+        basic: `
+<InputText type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+<span className="text-xl">
+    Debounced Value: <strong>{debouncedValue}</strong>
+</span>
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+import { useDebounce } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [inputValue, debouncedValue, setInputValue] = useDebounce('', 400);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <InputText type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+            <span className="text-xl">
+                Debounced Value: <strong>{debouncedValue}</strong>
+            </span>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+import { useDebounce } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [inputValue, debouncedValue, setInputValue] = useDebounce('', 400);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <InputText type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+            <span className="text-xl">
+                Debounced Value: <strong>{debouncedValue}</strong>
+            </span>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>The value will only be reflected when time between keystrokes is above 400ms.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <InputText type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+                <span className="text-xl">
+                    Debounced Value: <strong>{debouncedValue}</strong>
+                </span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usedebounce/importdoc.js b/components/doc/hooks/usedebounce/importdoc.js
new file mode 100644
index 0000000000..42d9eb4ca6
--- /dev/null
+++ b/components/doc/hooks/usedebounce/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useDebounce } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useeventlistener/documentdoc.js b/components/doc/hooks/useeventlistener/documentdoc.js
new file mode 100644
index 0000000000..5ecf2ce7de
--- /dev/null
+++ b/components/doc/hooks/useeventlistener/documentdoc.js
@@ -0,0 +1,203 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useEventListener } from '@/components/lib/hooks/Hooks';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useEffect, useState } from 'react';
+
+export function DocumentDoc(props) {
+    const [pressed, setPressed] = useState(false);
+    const [value, setValue] = useState('');
+
+    const onKeyDown = (e) => {
+        setPressed(true);
+
+        if (e.code === 'Space') {
+            e.preventDefault();
+            setValue('space');
+
+            return;
+        }
+
+        setValue(e.key);
+    };
+
+    const [bindKeyDown, unbindKeyDown] = useEventListener({
+        type: 'keydown',
+        listener: (e) => {
+            onKeyDown(e);
+        }
+    });
+
+    const [bindKeyUp, unbindKeyUp] = useEventListener({
+        type: 'keyup',
+        listener: (e) => {
+            setPressed(false);
+        }
+    });
+
+    useEffect(() => {
+        bindKeyDown();
+        bindKeyUp();
+
+        return () => {
+            unbindKeyDown();
+            unbindKeyUp();
+        };
+    }, [bindKeyDown, bindKeyUp, unbindKeyDown, unbindKeyUp]);
+
+    const code = {
+        basic: `
+const [bindKeyDown, unbindKeyDown] = useEventListener({
+    type: 'keydown',
+    listener: (e) => {
+        onKeyDown(e);
+    }
+});
+
+const [bindKeyUp, unbindKeyUp] = useEventListener({
+    type: 'keyup',
+    listener: (e) => {
+        setPressed(false);
+    }
+});
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react'; 
+import { classNames } from 'primereact/utils';
+import { useEventListener } from 'primereact/hooks';
+
+export default function DocumentDemo() {
+    const [pressed, setPressed] = useState(false);
+    const [value, setValue] = useState('');
+
+    const onKeyDown = (e) => {
+        setPressed(true);
+
+        if (e.code === 'Space') {
+            setValue('space');
+
+            return;
+        }
+
+        setValue(e.key);
+    };
+
+    const [bindKeyDown, unbindKeyDown] = useEventListener({
+        type: 'keydown',
+        listener: (e) => {
+            onKeyDown(e);
+        }
+    });
+
+    const [bindKeyUp, unbindKeyUp] = useEventListener({
+        type: 'keyup',
+        listener: (e) => {
+            setPressed(false);
+        }
+    });
+
+    useEffect(() => {
+        bindKeyDown();
+        bindKeyUp();
+
+        return () => {
+            unbindKeyDown();
+            unbindKeyUp();
+        };
+    }, [bindKeyDown, bindKeyUp, unbindKeyDown, unbindKeyUp]);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <button
+                className={classNames('card border-1 surface-border border-round-md py-3 px-4 text-color font-semibold text-lg transition-all transition-duration-150', { 'shadow-1': pressed, 'shadow-5': !pressed })}
+                style={{
+                    background: '-webkit-linear-gradient(top, var(--surface-ground) 0%, var(--surface-card) 100%)',
+                    transform: pressed ? 'translateY(5px)' : 'translateY(0)'
+                }}>
+                {value.toUpperCase() || 'Press a Key'}
+            </button>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react'; 
+import { classNames } from 'primereact/utils';
+import { useEventListener } from 'primereact/hooks';
+
+export default function DocumentDemo() {
+    const [pressed, setPressed] = useState<boolean>(false);
+    const [value, setValue] = useState<string>('');
+
+    const onKeyDown = (e) => {
+        setPressed(true);
+
+        if (e.code === 'Space') {
+            setValue('space');
+
+            return;
+        }
+
+        setValue(e.key);
+    };
+
+    const [bindKeyDown, unbindKeyDown] = useEventListener({
+        type: 'keydown',
+        listener: (e) => {
+            onKeyDown(e);
+        }
+    });
+
+    const [bindKeyUp, unbindKeyUp] = useEventListener({
+        type: 'keyup',
+        listener: (e) => {
+            setPressed(false);
+        }
+    });
+
+    useEffect(() => {
+        bindKeyDown();
+        bindKeyUp();
+
+        return () => {
+            unbindKeyDown();
+            unbindKeyUp();
+        };
+    }, [bindKeyDown, bindKeyUp, unbindKeyDown, unbindKeyUp]);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <button
+                className={classNames('card border-1 surface-border border-round-md py-3 px-4 text-color font-semibold text-lg transition-all transition-duration-150', { 'shadow-1': pressed, 'shadow-5': !pressed })}
+                style={{
+                    background: '-webkit-linear-gradient(top, var(--surface-ground) 0%, var(--surface-card) 100%)',
+                    transform: pressed ? 'translateY(5px)' : 'translateY(0)'
+                }}>
+                {value.toUpperCase() || 'Press a Key'}
+            </button>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Events are attached to the document itself by default.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <button
+                    className={classNames('card border-1 surface-border border-round-md py-3 px-4 text-color font-semibold text-lg transition-all transition-duration-150', { 'shadow-1': pressed, 'shadow-5': !pressed })}
+                    style={{
+                        background: '-webkit-linear-gradient(top, var(--surface-ground) 0%, var(--surface-card) 100%)',
+                        transform: pressed ? 'translateY(5px)' : 'translateY(0)'
+                    }}
+                >
+                    {value.toUpperCase() || 'Press a Key'}
+                </button>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useeventlistener/elementdoc.js b/components/doc/hooks/useeventlistener/elementdoc.js
new file mode 100644
index 0000000000..b6bd84debc
--- /dev/null
+++ b/components/doc/hooks/useeventlistener/elementdoc.js
@@ -0,0 +1,160 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useEventListener } from '@/components/lib/hooks/Hooks';
+import { useEffect, useRef, useState } from 'react';
+
+export function ElementDoc(props) {
+    const [hover, setHover] = useState(false);
+    const elementRef = useRef(null);
+
+    const [bindMouseEnterListener, unbindMouseEnterListener] = useEventListener({
+        target: elementRef,
+        type: 'mouseenter',
+        listener: () => {
+            setHover(true);
+        }
+    });
+
+    const [bindMouseLeaveListener, unbindMouseLeaveListener] = useEventListener({
+        target: elementRef,
+        type: 'mouseleave',
+        listener: () => {
+            setHover(false);
+        }
+    });
+
+    useEffect(() => {
+        bindMouseEnterListener();
+        bindMouseLeaveListener();
+
+        return () => {
+            unbindMouseEnterListener();
+            unbindMouseLeaveListener();
+        };
+    }, [bindMouseEnterListener, bindMouseLeaveListener, unbindMouseEnterListener, unbindMouseLeaveListener]);
+
+    const code = {
+        basic: `
+const [hover, setHover] = useState(false);
+const elementRef = useRef(null);
+
+const [bindMouseEnterListener, unbindMouseEnterListener] = useEventListener({
+    target: elementRef,
+    type: 'mouseenter',
+    listener: () => {
+        setHover(true);
+    }
+});
+
+const [bindMouseLeaveListener, unbindMouseLeaveListener] = useEventListener({
+    target: elementRef,
+    type: 'mouseleave',
+    listener: () => {
+        setHover(false);
+    }
+});
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { useEventListener } from 'primereact/hooks';
+
+export default function ElementDemo() {
+    const [hover, setHover] = useState(false);
+    const elementRef = useRef(null);
+
+    const [bindMouseEnterListener, unbindMouseEnterListener] = useEventListener({
+        target: elementRef,
+        type: 'mouseenter',
+        listener: () => {
+            setHover(true);
+        }
+    });
+
+    const [bindMouseLeaveListener, unbindMouseLeaveListener] = useEventListener({
+        target: elementRef,
+        type: 'mouseleave',
+        listener: () => {
+            setHover(false);
+        }
+    });
+
+    useEffect(() => {
+        bindMouseEnterListener();
+        bindMouseLeaveListener();
+
+        return () => {
+            unbindMouseEnterListener();
+            unbindMouseLeaveListener();
+        };
+    }, [bindMouseEnterListener, bindMouseLeaveListener, unbindMouseEnterListener, unbindMouseLeaveListener]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div ref={elementRef} className="border-round border-2 border-dashed surface-border text-xl p-5 w-15rem text-center">
+                {hover ? 'Hovered' : 'Hover Me'}
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { useEventListener } from 'primereact/hooks';
+
+export default function ElementDemo() {
+    const [hover, setHover] = useState<boolean>(false);
+    const elementRef = useRef<string>(null);
+
+    const [bindMouseEnterListener, unbindMouseEnterListener] = useEventListener({
+        target: elementRef,
+        type: 'mouseenter',
+        listener: () => {
+            setHover(true);
+        }
+    });
+
+    const [bindMouseLeaveListener, unbindMouseLeaveListener] = useEventListener({
+        target: elementRef,
+        type: 'mouseleave',
+        listener: () => {
+            setHover(false);
+        }
+    });
+
+    useEffect(() => {
+        bindMouseEnterListener();
+        bindMouseLeaveListener();
+
+        return () => {
+            unbindMouseEnterListener();
+            unbindMouseLeaveListener();
+        };
+    }, [bindMouseEnterListener, bindMouseLeaveListener, unbindMouseEnterListener, unbindMouseLeaveListener]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div ref={elementRef} className="border-round border-2 border-dashed surface-border text-xl p-5 w-15rem text-center">
+                {hover ? 'Hovered' : 'Hover Me'}
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The element to bind and unbind the events is defined with the <i>target</i> option.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div ref={elementRef} className="border-round border-2 border-dashed surface-border text-xl p-5 w-15rem text-center">
+                    {hover ? 'Hovered' : 'Hover Me'}
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useeventlistener/importdoc.js b/components/doc/hooks/useeventlistener/importdoc.js
new file mode 100644
index 0000000000..64e6262a78
--- /dev/null
+++ b/components/doc/hooks/useeventlistener/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useEventListener } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usefavicon/basicdoc.js b/components/doc/hooks/usefavicon/basicdoc.js
new file mode 100644
index 0000000000..a159b2eed3
--- /dev/null
+++ b/components/doc/hooks/usefavicon/basicdoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useFavicon } from '@/components/lib/hooks/Hooks';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [favicon, setFavicon] = useState('');
+    const setFaviconToTwitter = () => setFavicon('https://twitter.com/favicon.ico');
+    const setFaviconToPrimeReact = () => setFavicon('https://primefaces.org/cdn/primereact/images/favicon.ico');
+
+    useFavicon(favicon);
+
+    const code = {
+        basic: `
+useFavicon(favicon);
+        `,
+        javascript: `
+import React, { useState } from 'react'; 
+import { Button } from 'primereact/button';
+import { useFavicon } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [favicon, setFavicon] = useState('');
+    const setFaviconToTwitter = () => setFavicon('https://twitter.com/favicon.ico');
+    const setFaviconToPrimeReact = () => setFavicon('https://primefaces.org/cdn/primereact/images/favicon.ico');
+
+    useFavicon(favicon);
+
+    return (
+        <div className="card flex justify-content-center gap-2">
+            <Button icon="pi pi-twitter" label="Twitter" onClick={setFaviconToTwitter} />
+            <Button icon="pi pi-prime" label="PrimeReact" onClick={setFaviconToPrimeReact} className="p-button-secondary" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react'; 
+import { Button } from 'primereact/button';
+import { useFavicon } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [favicon, setFavicon] = useState<string>('');
+    const setFaviconToTwitter = () => setFavicon('https://twitter.com/favicon.ico');
+    const setFaviconToPrimeReact = () => setFavicon('https://primefaces.org/cdn/primereact/images/favicon.ico');
+
+    useFavicon(favicon);
+
+    return (
+        <div className="card flex justify-content-center gap-2">
+            <Button icon="pi pi-twitter" label="Twitter" onClick={setFaviconToTwitter} />
+            <Button icon="pi pi-prime" label="PrimeReact" onClick={setFaviconToPrimeReact} className="p-button-secondary" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Click the buttons to change the favicon of this page dynamically.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center gap-2">
+                <Button icon="pi pi-twitter" label="Twitter" onClick={setFaviconToTwitter} />
+                <Button icon="pi pi-prime" label="PrimeReact" onClick={setFaviconToPrimeReact} className="p-button-secondary" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usefavicon/importdoc.js b/components/doc/hooks/usefavicon/importdoc.js
new file mode 100644
index 0000000000..b359e42cc7
--- /dev/null
+++ b/components/doc/hooks/usefavicon/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useFavicon } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useintersectionobserver/basicdoc.js b/components/doc/hooks/useintersectionobserver/basicdoc.js
new file mode 100644
index 0000000000..db06b4ba48
--- /dev/null
+++ b/components/doc/hooks/useintersectionobserver/basicdoc.js
@@ -0,0 +1,82 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useIntersectionObserver } from '@/components/lib/hooks/Hooks';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const elementRef = useRef(null);
+    const visible = useIntersectionObserver(elementRef);
+
+    const code = {
+        basic: `
+const elementRef = useRef(null);
+const visible = useIntersectionObserver(elementRef);
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { useIntersectionObserver } from 'primereact/hooks';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const elementRef = useRef(null);
+    const visible = useIntersectionObserver(elementRef);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="text-xl font-bold mb-3">{visible ? 'Visible' : 'Not Visible'}</div>
+            <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
+                <div className="flex align-items-center" style={{ height: '900px' }}>
+                    <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 text-white font-bold bg-primary flex align-items-center justify-content-center')}>
+                        <i className="pi pi-prime text-4xl"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { useIntersectionObserver } from 'primereact/hooks';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const elementRef = useRef(null);
+    const visible = useIntersectionObserver(elementRef);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="text-xl font-bold mb-3">{visible ? 'Visible' : 'Not Visible'}</div>
+            <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
+                <div className="flex align-items-center" style={{ height: '900px' }}>
+                    <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 text-white font-bold bg-primary flex align-items-center justify-content-center')}>
+                        <i className="pi pi-prime text-4xl"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Scroll the parent to view the child element.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <div className="text-xl font-bold mb-3">{visible ? 'Visible' : 'Not Visible'}</div>
+                <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
+                    <div className="flex align-items-center" style={{ height: '900px' }}>
+                        <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 text-white font-bold bg-primary flex align-items-center justify-content-center')}>
+                            <i className="pi pi-prime text-4xl" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useintersectionobserver/importdoc.js b/components/doc/hooks/useintersectionobserver/importdoc.js
new file mode 100644
index 0000000000..49078b71ba
--- /dev/null
+++ b/components/doc/hooks/useintersectionobserver/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useIntersectionObserver } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useintersectionobserver/thresholddoc.js b/components/doc/hooks/useintersectionobserver/thresholddoc.js
new file mode 100644
index 0000000000..46ee79fc15
--- /dev/null
+++ b/components/doc/hooks/useintersectionobserver/thresholddoc.js
@@ -0,0 +1,84 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useIntersectionObserver } from '@/components/lib/hooks/Hooks';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useRef } from 'react';
+
+export function ThresholdDoc(props) {
+    const elementRef = useRef(null);
+    const visible = useIntersectionObserver(elementRef, { threshold: 0.5 });
+
+    const code = {
+        basic: `
+const elementRef = useRef(null);
+const visible = useIntersectionObserver(elementRef, { threshold: 0.5 });
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { useIntersectionObserver } from 'primereact/hooks';
+import { classNames } from 'primereact/utils';
+
+export default function ThresholdDemo() {
+    const elementRef = useRef(null);
+    const visible = useIntersectionObserver(elementRef, { threshold: 0.5 });
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="text-xl font-bold mb-3">{visible ? 'Visible' : 'Not Visible'}</div>
+            <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
+                <div className="flex align-items-center" style={{ height: '900px' }}>
+                    <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 font-bold border-1 border-primary flex align-items-center justify-content-center transition-all transition-duration-300', { 'bg-primary': visible })}>
+                        <i className="pi pi-prime text-4xl"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { useIntersectionObserver } from 'primereact/hooks';
+import { classNames } from 'primereact/utils';
+
+export default function ThresholdDemo() {
+    const elementRef = useRef(null);
+    const visible = useIntersectionObserver(elementRef, { threshold: 0.5 });
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="text-xl font-bold mb-3">{visible ? 'Visible' : 'Not Visible'}</div>
+            <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
+                <div className="flex align-items-center" style={{ height: '900px' }}>
+                    <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 font-bold border-1 border-primary flex align-items-center justify-content-center transition-all transition-duration-300', { 'bg-primary': visible })}>
+                        <i className="pi pi-prime text-4xl"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>threshold</i> option defines the percentage of how much of the element should be visible, for example <i>0.5</i> means at least half of the element.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <div className="text-xl font-bold mb-3">{visible ? 'Visible' : 'Not Visible'}</div>
+                <div className="border-dashed surface-border border-round w-20rem overflow-y-scroll p-3" style={{ height: '300px' }}>
+                    <div className="flex align-items-center" style={{ height: '900px' }}>
+                        <div ref={elementRef} className={classNames('w-full h-8rem border-round p-3 font-bold border-1 border-primary flex align-items-center justify-content-center transition-all transition-duration-300', { 'bg-primary': visible })}>
+                            <i className="pi pi-prime text-4xl" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useinterval/basicdoc.js b/components/doc/hooks/useinterval/basicdoc.js
new file mode 100644
index 0000000000..b235129d5a
--- /dev/null
+++ b/components/doc/hooks/useinterval/basicdoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useInterval } from '@/components/lib/hooks/Hooks';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [seconds, setSeconds] = useState(0);
+    const [active, setActive] = useState(true);
+
+    useInterval(
+        () => {
+            setSeconds((prevSecond) => (prevSecond === 59 ? 0 : prevSecond + 1));
+        },
+        1000,
+        active
+    );
+
+    const code = {
+        basic: `
+useInterval(
+    () => {
+        setSeconds((prevSecond) => (prevSecond === 59 ? 0 : prevSecond + 1)); //fn
+    },
+    1000,   //delay (ms)
+    active  //condition (when)
+);
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { useInterval } from 'primereact/hooks';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const [seconds, setSeconds] = useState(0);
+    const [active, setActive] = useState(true);
+
+    useInterval(
+        () => {
+            setSeconds((prevSecond) => (prevSecond === 59 ? 0 : prevSecond + 1));
+        },
+        1000,
+        active
+    );
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="mb-3 font-bold text-4xl">{seconds}</div>
+            <Button className={classNames('w-8rem p-button-outlined', { 'p-button-danger': active })}
+                onClick={() => setActive(!active)} label={active ? 'Stop' : 'Resume'} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { useInterval } from 'primereact/hooks';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const [seconds, setSeconds] = useState<number>(0);
+    const [active, setActive] = useState<boolean>(true);
+
+    useInterval(
+        () => {
+            setSeconds((prevSecond) => (prevSecond === 59 ? 0 : prevSecond + 1));
+        },
+        1000,
+        active
+    );
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="mb-3 font-bold text-4xl">{seconds}</div>
+            <Button className={classNames('w-8rem p-button-outlined', { 'p-button-danger': active })}
+                onClick={() => setActive(!active)} label={active ? 'Stop' : 'Resume'} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Simple timer that is updated every second.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <div className="mb-3 font-bold text-4xl">{seconds}</div>
+                <Button className={classNames('w-8rem p-button-outlined', { 'p-button-danger': active })} onClick={() => setActive(!active)} label={active ? 'Stop' : 'Resume'} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useinterval/importdoc.js b/components/doc/hooks/useinterval/importdoc.js
new file mode 100644
index 0000000000..0e5a0c03e2
--- /dev/null
+++ b/components/doc/hooks/useinterval/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useInterval } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemounteffect/basicdoc.js b/components/doc/hooks/usemounteffect/basicdoc.js
new file mode 100644
index 0000000000..c74bdb8281
--- /dev/null
+++ b/components/doc/hooks/usemounteffect/basicdoc.js
@@ -0,0 +1,79 @@
+/* eslint-disable no-console */
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+
+    useMountEffect(() => {
+        toast.current.show({ severity: 'info', summary: 'Mounted', sticky: true });
+    });
+
+    const code = {
+        basic: `
+useMountEffect(() => {
+    toast.current.show({ severity: 'info', summary: 'Mounted', sticky: true });
+});
+        `,
+        javascript: `
+import React from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+
+    useMountEffect(() => {
+        toast.current.show({ severity: 'info', summary: 'Mounted', sticky: true });
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <span className="text-xl">View the Toast message at top right.</span>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef<Toast>(null);
+
+    useMountEffect(() => {
+        toast.current.show({ severity: 'info', summary: 'Mounted', sticky: true });
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <span className="text-xl">View the Toast message at top right.</span>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A message is displayed when the component is mounted.</p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <span className="text-xl">View the Toast message at top right.</span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemounteffect/importdoc.js b/components/doc/hooks/usemounteffect/importdoc.js
new file mode 100644
index 0000000000..bf7867f6d5
--- /dev/null
+++ b/components/doc/hooks/usemounteffect/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useMountEffect } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemouse/documentdoc.js b/components/doc/hooks/usemouse/documentdoc.js
new file mode 100644
index 0000000000..1bb4a342c9
--- /dev/null
+++ b/components/doc/hooks/usemouse/documentdoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMouse } from '@/components/lib/hooks/Hooks';
+
+export function DocumentDoc(props) {
+    const { x, y } = useMouse();
+
+    const code = {
+        basic: `
+const { x, y } = useMouse();
+        `,
+        javascript: `
+import React from 'react';
+import { useMouse } from 'primereact/hooks';
+
+export default function DocumentDemo() {
+    const { x, y } = useMouse();
+
+    return (
+        <div className="card flex justify-content-center gap-3 text-xl">
+            <span>
+                X: <strong>{x}</strong>
+            </span>
+            <span>
+                Y: <strong>{y}</strong>
+            </span>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { useMouse } from 'primereact/hooks';
+
+export default function DocumentDemo() {
+    const { x, y } = useMouse();
+
+    return (
+        <div className="card flex justify-content-center gap-3 text-xl">
+            <span>
+                X: <strong>{x}</strong>
+            </span>
+            <span>
+                Y: <strong>{y}</strong>
+            </span>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>ref</i> is not used, the document is used as the target.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center gap-3 text-xl">
+                <span>
+                    X: <strong>{x}</strong>
+                </span>
+                <span>
+                    Y: <strong>{y}</strong>
+                </span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemouse/elementdoc.js b/components/doc/hooks/usemouse/elementdoc.js
new file mode 100644
index 0000000000..ead5243dbb
--- /dev/null
+++ b/components/doc/hooks/usemouse/elementdoc.js
@@ -0,0 +1,74 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMouse } from '@/components/lib/hooks/Hooks';
+
+export function ElementDoc(props) {
+    const { ref, x, y } = useMouse();
+
+    const code = {
+        basic: `
+const { ref, x, y } = useMouse();
+        `,
+        javascript: `
+import React from 'react';
+import { useMouse } from 'primereact/hooks';
+
+export default function ElementDemo() {
+    const { ref, x, y } = useMouse();
+
+    return (
+        <div className="card flex justify-content-center">
+            <div ref={ref} className="border-round surface-ground flex flex-wrap gap-3 justify-content-center align-items-center w-full md:w-20rem h-10rem text-xl">
+                <span>
+                    X: <strong>{x}</strong>
+                </span>
+                <span>
+                    Y: <strong>{y}</strong>
+                </span>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { useMouse } from 'primereact/hooks';
+
+export default function ElementDemo() {
+    const { ref, x, y } = useMouse();
+
+    return (
+        <div className="card flex justify-content-center">
+            <div ref={ref} className="border-round surface-ground flex flex-wrap gap-3 justify-content-center align-items-center w-full md:w-20rem h-10rem text-xl">
+                <span>
+                    X: <strong>{x}</strong>
+                </span>
+                <span>
+                    Y: <strong>{y}</strong>
+                </span>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Hover the mouse over the element to track the mouse position.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div ref={ref} className="border-round surface-ground flex flex-wrap gap-3 justify-content-center align-items-center w-full md:w-20rem h-10rem text-xl">
+                    <span>
+                        X: <strong>{x}</strong>
+                    </span>
+                    <span>
+                        Y: <strong>{y}</strong>
+                    </span>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemouse/importdoc.js b/components/doc/hooks/usemouse/importdoc.js
new file mode 100644
index 0000000000..2db86f5506
--- /dev/null
+++ b/components/doc/hooks/usemouse/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useMouse } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemouse/resetdoc.js b/components/doc/hooks/usemouse/resetdoc.js
new file mode 100644
index 0000000000..4c0465242c
--- /dev/null
+++ b/components/doc/hooks/usemouse/resetdoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMouse } from '@/components/lib/hooks/Hooks';
+
+export function ResetDoc(props) {
+    const { ref, x, y, reset } = useMouse();
+
+    const code = {
+        basic: `
+const { ref, x, y } = useMouse();
+        `,
+        javascript: `
+import React from 'react';
+import { useMouse } from 'primereact/hooks';
+
+export default function ResetDemo() {
+    const { ref, x, y, reset } = useMouse();
+
+    return (
+        <div className="card flex justify-content-center">
+            <div ref={ref} onMouseLeave={reset} className="border-round surface-ground flex flex-wrap gap-3 justify-content-center align-items-center w-full md:w-20rem h-10rem text-xl">
+                <span>
+                    X: <strong>{x}</strong>
+                </span>
+                <span>
+                    Y: <strong>{y}</strong>
+                </span>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { useMouse } from 'primereact/hooks';
+
+export default function ResetDemo() {
+    const { ref, x, y, reset } = useMouse();
+
+    return (
+        <div className="card flex justify-content-center">
+            <div ref={ref} onMouseLeave={reset} className="border-round surface-ground flex flex-wrap gap-3 justify-content-center align-items-center w-full md:w-20rem h-10rem text-xl">
+                <span>
+                    X: <strong>{x}</strong>
+                </span>
+                <span>
+                    Y: <strong>{y}</strong>
+                </span>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>reset</i> callback is provided to clear the tracked mouse position.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div ref={ref} onMouseLeave={reset} className="border-round surface-ground flex flex-wrap gap-3 justify-content-center align-items-center w-full md:w-20rem h-10rem text-xl">
+                    <span>
+                        X: <strong>{x}</strong>
+                    </span>
+                    <span>
+                        Y: <strong>{y}</strong>
+                    </span>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemove/basicdoc.js b/components/doc/hooks/usemove/basicdoc.js
new file mode 100644
index 0000000000..568beea6ad
--- /dev/null
+++ b/components/doc/hooks/usemove/basicdoc.js
@@ -0,0 +1,115 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useMove } from '../../../../components/lib/hooks/Hooks';
+
+export function BasicDoc(props) {
+    const { ref, x, y, active, reset } = useMove({ initialValue: { x: 0.2, y: 0.6 } });
+
+    const code = {
+        basic: `
+const { ref, x, y, active, reset } = useMove({ initialValue: { x: 0.2, y: 0.6 } });
+        `,
+        javascript: `
+import React from 'react'; 
+import { useMove } from 'primereact/hooks';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const { ref, x, y, active, reset } = useMove({ initialValue: { x: 0.2, y: 0.6 } });
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <div className="flex gap-3 text-xl">
+                <span>
+                    X: <strong>{\`\${Math.round(x * 100)}\`}</strong>
+                </span>
+                <span>
+                    Y: <strong>{\`\${Math.round(y * 100)}\`}</strong>
+                </span>
+            </div>
+            <div ref={ref} className="relative w-14rem h-8rem surface-ground border-round">
+                <div className={classNames('absolute border-circle w-2rem h-2rem flex align-items-center justify-content-center', { 'bg-green-500': active, 'bg-primary': !active })}
+                    style={{
+                        left: \`calc(\${x * 100}% - 1rem)\`,
+                        top: \`calc(\${y * 100}% - 1rem)\`,
+                        cursor: 'grab'
+                    }}>
+                    <i className="pi pi-arrows-alt"></i>
+                </div>
+            </div>
+            <Button onClick={reset} label="Reset" className="p-button-outlined"></Button>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { useMove } from 'primereact/hooks';
+import { Button } from 'primereact/button';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const { ref, x, y, active, reset } = useMove({ initialValue: { x: 0.2, y: 0.6 } });
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <div className="flex gap-3 text-xl">
+                <span>
+                    X: <strong>{\`\${Math.round(x * 100)}\`}</strong>
+                </span>
+                <span>
+                    Y: <strong>{\`\${Math.round(y * 100)}\`}</strong>
+                </span>
+            </div>
+            <div ref={ref} className="relative w-14rem h-8rem surface-ground border-round">
+                <div className={classNames('absolute border-circle w-2rem h-2rem flex align-items-center justify-content-center', { 'bg-green-500': active, 'bg-primary': !active })}
+                    style={{
+                        left: \`calc(\${x * 100}% - 1rem)\`,
+                        top: \`calc(\${y * 100}% - 1rem)\`,
+                        cursor: 'grab'
+                    }}>
+                    <i className="pi pi-arrows-alt"></i>
+                </div>
+            </div>
+            <Button onClick={reset} label="Reset" className="p-button-outlined"></Button>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Drag the marker over the element to track the position.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <div className="flex gap-3 text-xl">
+                    <span>
+                        X: <strong>{`${Math.round(x * 100)}`}</strong>
+                    </span>
+                    <span>
+                        Y: <strong>{`${Math.round(y * 100)}`}</strong>
+                    </span>
+                </div>
+                <div ref={ref} className="relative w-14rem h-8rem surface-ground border-round">
+                    <div
+                        className={classNames('absolute border-circle w-2rem h-2rem flex align-items-center justify-content-center', { 'bg-green-500': active, 'bg-primary': !active })}
+                        style={{
+                            left: `calc(${x * 100}% - 1rem)`,
+                            top: `calc(${y * 100}% - 1rem)`,
+                            cursor: 'grab'
+                        }}
+                    >
+                        <i className="pi pi-arrows-alt" />
+                    </div>
+                </div>
+                <Button onClick={reset} label="Reset" className="p-button-outlined" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemove/horizontaldoc.js b/components/doc/hooks/usemove/horizontaldoc.js
new file mode 100644
index 0000000000..11deed1e28
--- /dev/null
+++ b/components/doc/hooks/usemove/horizontaldoc.js
@@ -0,0 +1,112 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMove } from '../../../../components/lib/hooks/Hooks';
+
+export function HorizontalDoc(props) {
+    const { ref, x } = useMove({ initialValue: { x: 0.2 } });
+
+    const code = {
+        basic: `
+const { ref, x } = useMove({ initialValue: { x: 0.2 } });
+        `,
+        javascript: `
+import React from 'react'; 
+import {useMove } from 'primereact/hooks';
+
+export default function HorizontalDemo() {
+    const { ref, x } = useMove({ initialValue: { x: 0.2 } });
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <div ref={ref} className="flex align-items-center justify-content-center relative surface-ground w-14rem z-1" style={{ height: '8px' }}>
+                <div className="absolute bg-teal-500 z-2"
+                    style={{
+                        left: 0,
+                        width: \`\${x * 100}%\`,
+                        height: '8px'
+                    }}>
+                </div>
+                <div className="absolute block border-circle border-solid border-2 border-teal-500 -ml-2 surface-overlay z-3"
+                    style={{
+                        width: '18px',
+                        height: '18px',
+                        left: \`calc(\${x * 100}%)\`,
+                        cursor: 'grab'
+                    }}>
+                </div>
+            </div>
+            <span className="text-xl">
+                Value: <strong>{Math.round(x * 100)}</strong>
+            </span>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import {useMove } from 'primereact/hooks';
+
+export default function HorizontalDemo() {
+    const { ref, x } = useMove({ initialValue: { x: 0.2 } });
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <div ref={ref} className="flex align-items-center justify-content-center relative surface-ground w-14rem z-1" style={{ height: '8px' }}>
+                <div className="absolute bg-teal-500 z-2"
+                    style={{
+                        left: 0,
+                        width: \`\${x * 100}%\`,
+                        height: '8px'
+                    }}>
+                </div>
+                <div className="absolute block border-circle border-solid border-2 border-teal-500 -ml-2 surface-overlay z-3"
+                    style={{
+                        width: '18px',
+                        height: '18px',
+                        left: \`calc(\${x * 100}%)\`,
+                        cursor: 'grab'
+                    }}>
+                </div>
+            </div>
+            <span className="text-xl">
+                Value: <strong>{Math.round(x * 100)}</strong>
+            </span>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A horizontal slider implementation by utilizing the x-axis only.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <div ref={ref} className="flex align-items-center justify-content-center relative surface-ground w-14rem z-1" style={{ height: '8px' }}>
+                    <div
+                        className="absolute bg-teal-500 z-2"
+                        style={{
+                            left: 0,
+                            width: `${x * 100}%`,
+                            height: '8px'
+                        }}
+                    />
+                    <div
+                        className="absolute block border-circle border-solid border-2 border-teal-500 -ml-2 surface-overlay z-3"
+                        style={{
+                            width: '18px',
+                            height: '18px',
+                            left: `calc(${x * 100}%)`,
+                            cursor: 'grab'
+                        }}
+                    />
+                </div>
+                <span className="text-xl">
+                    Value: <strong>{Math.round(x * 100)}</strong>
+                </span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemove/importdoc.js b/components/doc/hooks/usemove/importdoc.js
new file mode 100644
index 0000000000..2de49e2ea9
--- /dev/null
+++ b/components/doc/hooks/usemove/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useMove } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usemove/verticaldoc.js b/components/doc/hooks/usemove/verticaldoc.js
new file mode 100644
index 0000000000..20d64a40b5
--- /dev/null
+++ b/components/doc/hooks/usemove/verticaldoc.js
@@ -0,0 +1,112 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMove } from '../../../../components/lib/hooks/Hooks';
+
+export function VerticalDoc(props) {
+    const { ref, y } = useMove({ initialValue: { y: 0.2 }, mode: 'vertical' });
+
+    const code = {
+        basic: `
+const { ref, y } = useMove({ initialValue: { y: 0.2 } });
+        `,
+        javascript: `
+import React from 'react'; 
+import {useMove } from 'primereact/hooks';
+
+export default function VerticalDemo() {
+    const { ref, y } = useMove({ initialValue: { y: 0.2 }, mode: 'vertical' });
+
+    return (
+        <div className="card flex flex-column justify-content-center align-items-center gap-3">
+            <div ref={ref} className="flex align-items-center justify-content-center relative surface-ground h-14rem z-1" style={{ width: '8px' }}>
+                <div className="absolute bg-purple-500 z-2"
+                    style={{
+                        bottom: 0,
+                        width: '8px',
+                        height: \`\${y * 100}%\`
+                    }}>
+                </div>
+                <div className='absolute block border-circle border-solid border-2 border-purple -mb-2 surface-overlay z-3'
+                    style={{
+                        width: '18px',
+                        height: '18px',
+                        bottom: \`calc(\${y * 100}%)\`,
+                        cursor: 'grab'
+                    }}>
+                </div>
+            </div>
+            <span className="text-xl">
+                Value: <strong>{Math.round(y * 100)}</strong>
+            </span>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import {useMove } from 'primereact/hooks';
+
+export default function VerticalDemo() {
+    const { ref, y } = useMove({ initialValue: { y: 0.2 }, mode: 'vertical' });
+
+    return (
+        <div className="card flex flex-column justify-content-center align-items-center gap-3">
+            <div ref={ref} className="flex align-items-center justify-content-center relative surface-ground h-14rem z-1" style={{ width: '8px' }}>
+                <div className="absolute bg-purple-500 z-2"
+                    style={{
+                        bottom: 0,
+                        width: '8px',
+                        height: \`\${y * 100}%\`
+                    }}>
+                </div>
+                <div className='absolute block border-circle border-solid border-2 border-purple -mb-2 surface-overlay z-3'
+                    style={{
+                        width: '18px',
+                        height: '18px',
+                        bottom: \`calc(\${y * 100}%)\`,
+                        cursor: 'grab'
+                    }}>
+                </div>
+            </div>
+            <span className="text-xl">
+                Value: <strong>{Math.round(y * 100)}</strong>
+            </span>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A vertical slider implementation by utilizing the y-axis only.</p>
+            </DocSectionText>
+            <div className="card flex flex-column justify-content-center align-items-center gap-3">
+                <div ref={ref} className="flex align-items-center justify-content-center relative surface-ground h-14rem z-1" style={{ width: '8px' }}>
+                    <div
+                        className="absolute bg-purple-500 z-2"
+                        style={{
+                            bottom: 0,
+                            width: '8px',
+                            height: `${y * 100}%`
+                        }}
+                    />
+                    <div
+                        className="absolute block border-circle border-solid border-2 border-purple-500 -mb-2 surface-overlay z-3"
+                        style={{
+                            width: '18px',
+                            height: '18px',
+                            bottom: `calc(${y * 100}%)`,
+                            cursor: 'grab'
+                        }}
+                    />
+                </div>
+                <span className="text-xl">
+                    Value: <strong>{Math.round(y * 100)}</strong>
+                </span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useoverlaylistener/basicdoc.js b/components/doc/hooks/useoverlaylistener/basicdoc.js
new file mode 100644
index 0000000000..d23562163b
--- /dev/null
+++ b/components/doc/hooks/useoverlaylistener/basicdoc.js
@@ -0,0 +1,172 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useOverlayListener } from '@/components/lib/hooks/Hooks';
+import Link from 'next/link';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { PrimeReactContext } from '@/components/lib/api/PrimeReactContext';
+
+export function BasicDoc(props) {
+    const context = useContext(PrimeReactContext);
+    const [visible, setVisible] = useState(false);
+    const buttonRef = useRef(null);
+    const overlayRef = useRef(null);
+
+    const handleEvents = (event, options) => {
+        if (options.valid) {
+            if (context.hideOverlaysOnDocumentScrolling || options.type === 'outside') {
+                setVisible(false);
+            }
+        }
+    };
+
+    const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+        target: buttonRef.current,
+        overlay: overlayRef.current,
+        listener: handleEvents,
+        options: { passive: true },
+        when: visible
+    });
+
+    useEffect(() => {
+        bindOverlayListener();
+
+        return () => {
+            unbindOverlayListener();
+        };
+    }, [bindOverlayListener, unbindOverlayListener]);
+
+    const code = {
+        basic: `
+const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+    target: buttonRef.current,
+    overlay: overlayRef.current,
+    listener: handleScroll,
+    options: { passive: true },
+    when: visible
+});
+        `,
+        javascript: `
+import React, { useState, useRef, useEffect } from 'react'; 
+import { Button } from 'primereact/button';
+import { useOverlayScrollListener } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState(false);
+    const buttonRef = useRef(null);
+    const overlayRef = useRef(null);
+
+    const handleEvents = (event, options) => {
+        if (options.valid) setVisible(false);
+    };
+
+    const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+        target: buttonRef.current,
+        overlay: overlayRef.current,
+        listener: handleEvents,
+        options: { passive: true },
+        when: visible
+    });
+
+    useEffect(() => {
+        bindOverlayListener();
+
+        return () => {
+            unbindOverlayListener();
+        };
+    }, [bindOverlayListener, unbindOverlayListener]);
+
+    return (
+        <div className="card flex flex-column justify-content-center align-items-center gap-2">
+            <div className="w-20rem h-15rem p-3 surface-border border-round border-1 overflow-auto">
+                <div className="h-30rem">
+                    <div className="relative">
+                        <Button ref={buttonRef} onClick={() => setVisible(true)} label="Show" />
+                        {visible ? (
+                            <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
+                                Popup Content
+                            </div>
+                        ) : null}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef, useEffect } from 'react'; 
+import { Button } from 'primereact/button';
+import { useOverlayScrollListener } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState(false);
+    const buttonRef = useRef(null);
+    const overlayRef = useRef(null);
+
+    const handleEvents = (event, options) => {
+        if (options.valid) setVisible(false);
+    };
+
+    const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+        target: buttonRef.current,
+        overlay: overlayRef.current,
+        listener: handleEvents,
+        options: { passive: true },
+        when: visible
+    });
+
+    useEffect(() => {
+        bindOverlayListener();
+
+        return () => {
+            unbindOverlayListener();
+        };
+    }, [bindOverlayListener, unbindOverlayListener]);
+
+    return (
+        <div className="card flex flex-column justify-content-center align-items-center gap-2">
+            <div className="w-20rem h-15rem p-3 surface-border border-round border-1 overflow-auto">
+                <div className="h-30rem">
+                    <div className="relative">
+                        <Button ref={buttonRef} onClick={() => setVisible(true)} label="Show" />
+                        {visible ? (
+                            <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
+                                Popup Content
+                            </div>
+                        ) : null}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    This hook combines the features of <Link href="http://github.com/hooks/useclickotside">useClickOutside</Link>, <Link href="http://github.com/hooks/useoverlayscrollistener">useOverlayScrollListener</Link> and{' '}
+                    <Link href="http://github.com/hooks/useresizelistener">useResizeListener</Link> to handle popups positioned relative to another element.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column justify-content-center align-items-center gap-2">
+                <div className="w-20rem h-15rem p-3 surface-border border-round border-1 overflow-auto">
+                    <div className="h-30rem">
+                        <div className="relative">
+                            <Button ref={buttonRef} onClick={() => setVisible(true)} label="Show" />
+                            {visible ? (
+                                <div ref={overlayRef} className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">
+                                    Popup Content
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useoverlaylistener/importdoc.js b/components/doc/hooks/useoverlaylistener/importdoc.js
new file mode 100644
index 0000000000..4fe27aa55d
--- /dev/null
+++ b/components/doc/hooks/useoverlaylistener/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useOverlayListener } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useoverlayscrolllistener/basicdoc.js b/components/doc/hooks/useoverlayscrolllistener/basicdoc.js
new file mode 100644
index 0000000000..be47a7ca84
--- /dev/null
+++ b/components/doc/hooks/useoverlayscrolllistener/basicdoc.js
@@ -0,0 +1,143 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useOverlayScrollListener } from '@/components/lib/hooks/Hooks';
+import { useEffect, useRef, useState } from 'react';
+
+export function BasicDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const buttonRef = useRef(null);
+
+    const handleScroll = () => {
+        setVisible(false);
+    };
+
+    const [bindOverlayScrollListener, unbindOverlayScrollListener] = useOverlayScrollListener({
+        target: buttonRef.current,
+        listener: handleScroll,
+        options: { passive: true },
+        when: visible
+    });
+
+    useEffect(() => {
+        bindOverlayScrollListener();
+
+        return () => {
+            unbindOverlayScrollListener();
+        };
+    }, [bindOverlayScrollListener, unbindOverlayScrollListener]);
+
+    const code = {
+        basic: `
+const [bindOverlayScrollListener, unbindOverlayScrollListener] = useOverlayScrollListener({
+    target: buttonRef.current,
+    listener: handleScroll,
+    options: { passive: true },
+    when: visible
+});
+        `,
+        javascript: `
+import React, { useState, useRef, useEffect } from 'react'; 
+import { Button } from 'primereact/button';
+import { useOverlayScrollListener } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState(false);
+    const buttonRef = useRef(null);
+
+    const handleScroll = () => {
+        setVisible(false);
+    };
+
+    const [bindOverlayScrollListener, unbindOverlayScrollListener] = useOverlayScrollListener({
+        target: buttonRef.current,
+        listener: handleScroll,
+        options: { passive: true },
+        when: visible
+    });
+
+    useEffect(() => {
+        bindOverlayScrollListener();
+
+        return () => {
+            unbindOverlayScrollListener();
+        };
+    }, [bindOverlayScrollListener, unbindOverlayScrollListener]);
+
+    return (
+        <div className="card flex flex-column justify-content-center align-items-center gap-2">
+                <div className="w-20rem h-15rem p-3 surface-border border-round border-1 overflow-auto">
+                    <div className="h-30rem">
+                        <div className="relative">
+                            <Button ref={buttonRef} onClick={() => setVisible(true)} label="Show" />
+                            {visible ? <div className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">Popup Content</div> : null}
+                        </div>
+                    </div>
+                </div>
+            </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef, useEffect } from 'react'; 
+import { Button } from 'primereact/button';
+import { useOverlayScrollListener } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState(false);
+    const buttonRef = useRef(null);
+
+    const handleScroll = () => {
+        setVisible(false);
+    };
+
+    const [bindOverlayScrollListener, unbindOverlayScrollListener] = useOverlayScrollListener({
+        target: buttonRef.current,
+        listener: handleScroll,
+        options: { passive: true },
+        when: visible
+    });
+
+    useEffect(() => {
+        bindOverlayScrollListener();
+
+        return () => {
+            unbindOverlayScrollListener();
+        };
+    }, [bindOverlayScrollListener, unbindOverlayScrollListener]);
+
+    return (
+        <div className="card flex flex-column justify-content-center align-items-center gap-2">
+                <div className="w-20rem h-15rem p-3 surface-border border-round border-1 overflow-auto">
+                    <div className="h-30rem">
+                        <div className="relative">
+                            <Button ref={buttonRef} onClick={() => setVisible(true)} label="Show" />
+                            {visible ? <div className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">Popup Content</div> : null}
+                        </div>
+                    </div>
+                </div>
+            </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>When any ancestor component of the button is scrolled, the overlay gets hidden. This is especially useful to avoid alignment issues when the overlay is attached to the document body via a Portal.</p>
+            </DocSectionText>
+            <div className="card flex flex-column justify-content-center align-items-center gap-2">
+                <div className="w-20rem h-15rem p-3 surface-border border-round border-1 overflow-auto">
+                    <div className="h-30rem">
+                        <div className="relative">
+                            <Button ref={buttonRef} onClick={() => setVisible(true)} label="Show" />
+                            {visible ? <div className="absolute border-round shadow-2 p-5 surface-overlay z-2 white-space-nowrap scalein origin-top">Popup Content</div> : null}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useoverlayscrolllistener/importdoc.js b/components/doc/hooks/useoverlayscrolllistener/importdoc.js
new file mode 100644
index 0000000000..afcaeb7083
--- /dev/null
+++ b/components/doc/hooks/useoverlayscrolllistener/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useOverlayScrollListener } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useprevious/basicdoc.js b/components/doc/hooks/useprevious/basicdoc.js
new file mode 100644
index 0000000000..afdf41acdb
--- /dev/null
+++ b/components/doc/hooks/useprevious/basicdoc.js
@@ -0,0 +1,93 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { usePrevious } from '@/components/lib/hooks/Hooks';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+    const prevValue = usePrevious(value);
+
+    const code = {
+        basic: `
+const [value, setValue] = useState('');
+const prevValue = usePrevious(value);
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { usePrevious } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+    const prevValue = usePrevious(value);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <InputText value={value} className="mb-4" 
+                onChange={(e) => setValue(e.target.value)} />
+            <div className="flex flex-column align-items-start flex-wrap gap-3 text-xl">
+                <span>
+                    Current: <strong>{value}</strong>
+                </span>
+                <span>
+                    Previous: <strong>{prevValue}</strong>
+                </span>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { usePrevious } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+    const prevValue = usePrevious(value);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <InputText value={value} className="mb-4" 
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+            <div className="flex flex-column align-items-start flex-wrap gap-3 text-xl">
+                <span>
+                    Current: <strong>{value}</strong>
+                </span>
+                <span>
+                    Previous: <strong>{prevValue}</strong>
+                </span>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Previous value remains one step behind the current value while input is being typed.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <InputText
+                    value={value}
+                    className="mb-4"
+                    onChange={(e) => {
+                        setValue(e.target.value);
+                    }}
+                />
+                <div className="flex flex-column align-items-start flex-wrap gap-3 text-xl">
+                    <span>
+                        Current: <strong>{value}</strong>
+                    </span>
+                    <span>
+                        Previous: <strong>{prevValue}</strong>
+                    </span>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useprevious/importdoc.js b/components/doc/hooks/useprevious/importdoc.js
new file mode 100644
index 0000000000..bfa99b1600
--- /dev/null
+++ b/components/doc/hooks/useprevious/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { usePrevious } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useresizelistener/basicdoc.js b/components/doc/hooks/useresizelistener/basicdoc.js
new file mode 100644
index 0000000000..97a44f8828
--- /dev/null
+++ b/components/doc/hooks/useresizelistener/basicdoc.js
@@ -0,0 +1,139 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useResizeListener } from '@/components/lib/hooks/Hooks';
+import { useEffect, useState } from 'react';
+
+export function BasicDoc(props) {
+    const [eventData, setEventData] = useState({ width: 0, height: 0 });
+
+    const [bindWindowResizeListener, unbindWindowResizeListener] = useResizeListener({
+        listener: (event) => {
+            setEventData({
+                width: event.currentTarget.innerWidth,
+                height: event.currentTarget.innerHeight
+            });
+        }
+    });
+
+    useEffect(() => {
+        setEventData({ width: window.innerWidth, height: window.innerHeight });
+    }, []);
+
+    useEffect(() => {
+        bindWindowResizeListener();
+
+        return () => {
+            unbindWindowResizeListener();
+        };
+    }, [bindWindowResizeListener, unbindWindowResizeListener]);
+
+    const code = {
+        basic: `
+const [bindWindowResizeListener, unbindWindowResizeListener] = useResizeListener({
+    listener: (event) => {
+        setEventData({
+            width: event.currentTarget.innerWidth,
+            height: event.currentTarget.innerHeight,
+        })
+    }
+});
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { useResizeListener } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [eventData, setEventData] = useState({ width: 0, height: 0 });
+
+    const [bindWindowResizeListener, unbindWindowResizeListener] = useResizeListener({
+        listener: (event) => {
+            setEventData({
+                width: event.currentTarget.innerWidth,
+                height: event.currentTarget.innerHeight
+            });
+        }
+    });
+
+    useEffect(() => {
+        setEventData({ width: window.innerWidth, height: window.innerHeight });
+    }, []);
+
+    useEffect(() => {
+        bindWindowResizeListener();
+
+        return () => {
+            unbindWindowResizeListener();
+        };
+    }, [bindWindowResizeListener, unbindWindowResizeListener]);
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3 text-xl">
+            <span>
+                Width: <strong>{eventData.width}</strong>
+            </span>
+            <span>
+                Height: <strong>{eventData.height}</strong>
+            </span>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { useResizeListener } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [eventData, setEventData] = useState({ width: 0, height: 0 });
+
+    const [bindWindowResizeListener, unbindWindowResizeListener] = useResizeListener({
+        listener: (event) => {
+            setEventData({
+                width: event.currentTarget.innerWidth,
+                height: event.currentTarget.innerHeight
+            });
+        }
+    });
+
+    useEffect(() => {
+        setEventData({ width: window.innerWidth, height: window.innerHeight });
+    }, []);
+
+    useEffect(() => {
+        bindWindowResizeListener();
+
+        return () => {
+            unbindWindowResizeListener();
+        };
+    }, [bindWindowResizeListener, unbindWindowResizeListener]);
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-3 text-xl">
+            <span>
+                Width: <strong>{eventData.width}</strong>
+            </span>
+            <span>
+                Height: <strong>{eventData.height}</strong>
+            </span>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Resize the browser window to view information about the resize event.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3 text-xl">
+                <span>
+                    Width: <strong>{eventData.width}</strong>
+                </span>
+                <span>
+                    Height: <strong>{eventData.height}</strong>
+                </span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useresizelistener/importdoc.js b/components/doc/hooks/useresizelistener/importdoc.js
new file mode 100644
index 0000000000..8a1c9bf641
--- /dev/null
+++ b/components/doc/hooks/useresizelistener/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useResizeListener } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usestorage/importdoc.js b/components/doc/hooks/usestorage/importdoc.js
new file mode 100644
index 0000000000..c8f146d986
--- /dev/null
+++ b/components/doc/hooks/usestorage/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useLocalStorage } from 'primereact/hooks';
+import { useSessionStorage } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usestorage/localdoc.js b/components/doc/hooks/usestorage/localdoc.js
new file mode 100644
index 0000000000..776c85558e
--- /dev/null
+++ b/components/doc/hooks/usestorage/localdoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useLocalStorage } from '@/components/lib/hooks/Hooks';
+
+export function LocalDoc(props) {
+    const [count, setCount] = useLocalStorage(0, 'count');
+
+    const code = {
+        basic: `
+const [count, setCount] = useLocalStorage(0, 'count');
+        `,
+        javascript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+import { useLocalStorage } from 'primereact/hooks';
+
+export default function LocalDemo() {
+    const [count, setCount] = useLocalStorage(0, 'count');
+    
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)}></Button>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+import { useLocalStorage } from 'primereact/hooks';
+
+export default function LocalDemo() {
+    const [count, setCount] = useLocalStorage(0, 'count');
+    
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)}></Button>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Refresh to page to view the persisted value.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <span className="font-bold text-4xl mb-5">{count}</span>
+                <div className="flex flex-wrap gap-3">
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usestorage/sessiondoc.js b/components/doc/hooks/usestorage/sessiondoc.js
new file mode 100644
index 0000000000..02a5af6451
--- /dev/null
+++ b/components/doc/hooks/usestorage/sessiondoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useSessionStorage } from '@/components/lib/hooks/Hooks';
+
+export function SessionDoc(props) {
+    const [count, setCount] = useSessionStorage(0, 'count');
+
+    const code = {
+        basic: `
+const [count, setCount] = useSessionStorage(0, 'count');
+        `,
+        javascript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+import { useSessionStorage } from 'primereact/hooks';
+
+export default function SessionDoc() {
+    const [count, setCount] = useSessionStorage(0, 'count');
+    
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)}></Button>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+import { useSessionStorage } from 'primereact/hooks';
+
+export default function SessionDoc() {
+    const [count, setCount] = useSessionStorage(0, 'count');
+    
+    return (
+        <div className="card flex flex-column align-items-center">
+            <span className="font-bold text-4xl mb-5">{count}</span>
+            <div className="flex flex-wrap gap-3">
+                <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)}></Button>
+                <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)}></Button>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Close the browser and visit this page again to view the persisted value.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <span className="font-bold text-4xl mb-5">{count}</span>
+                <div className="flex flex-wrap gap-3">
+                    <Button icon="pi pi-plus" className="p-button-outlined p-button-rounded p-button-success" onClick={() => setCount(count + 1)} />
+                    <Button icon="pi pi-times" className="p-button-outlined p-button-rounded p-button-danger" onClick={() => setCount(0)} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usetimeout/basicdoc.js b/components/doc/hooks/usetimeout/basicdoc.js
new file mode 100644
index 0000000000..ca495368cb
--- /dev/null
+++ b/components/doc/hooks/usetimeout/basicdoc.js
@@ -0,0 +1,80 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useTimeout } from '@/components/lib/hooks/Hooks';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+
+    const [clearTimeout] = useTimeout(() => {
+        toast.current.show({ severity: 'info', summary: 'Loaded' });
+    }, 3000);
+
+    const code = {
+        basic: `
+const [clearTimeout] = useTimeout(() => {
+    toast.current.show({ severity: 'info', summary: 'Loaded' });
+}, 3000);
+        `,
+        javascript: `
+import React from 'react';
+import { InputText } from 'primereact/inputtext';
+import { useTimeout } from 'primereact/hooks';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+
+    const [clearTimeout] = useTimeout(() => {
+        toast.current.show({ severity: 'info', summary: 'Loaded' });
+    }, 3000);
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <span className="text-xl">A message will be displayed in 3 seconds after mount.</span>
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { InputText } from 'primereact/inputtext';
+import { useTimeout } from 'primereact/hooks';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef<Toast>(null);
+
+    const [clearTimeout] = useTimeout(() => {
+        toast.current.show({ severity: 'info', summary: 'Loaded' });
+    }, 3000);
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <span className="text-xl">A message will be displayed in 3 seconds after mount.</span>
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Wait for 3 seconds to view the Toast message.</p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <span className="text-xl">A message will be displayed in 3 seconds after mount.</span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/usetimeout/importdoc.js b/components/doc/hooks/usetimeout/importdoc.js
new file mode 100644
index 0000000000..ae6f738694
--- /dev/null
+++ b/components/doc/hooks/usetimeout/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useTimeout } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useunmounteffect/basicdoc.js b/components/doc/hooks/useunmounteffect/basicdoc.js
new file mode 100644
index 0000000000..281846c5f3
--- /dev/null
+++ b/components/doc/hooks/useunmounteffect/basicdoc.js
@@ -0,0 +1,97 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { useUnmountEffect } from '@/components/lib/hooks/Hooks';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function BasicDoc(props) {
+    const [hidden, setHidden] = useState(false);
+    const toast = useRef(null);
+
+    const DynamicBox = () => {
+        useUnmountEffect(() => {
+            toast.current && toast.current.show({ severity: 'info', summary: 'Unmounted' });
+        });
+
+        return <div className="w-8rem h-8rem border-round bg-primary border-1 border-primary mb-3 flex justify-content-center align-items-center">Mounted</div>;
+    };
+
+    const code = {
+        basic: `
+useUnmountEffect(() => {
+    toast.current && toast.current.show({ severity: 'info', summary: 'Unmounted' });
+});
+        `,
+        javascript: `
+import React, { useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { useUnmountEffect, useMountEffect } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [hidden, setHidden] = useState(false);
+    const toast = useRef(null);
+
+    const DynamicBox = () => {
+        useUnmountEffect(() => {
+            toast.current && toast.current.show({ severity: 'info', summary: 'Unmounted' });
+        });
+
+        return <div className="w-8rem h-8rem border-round bg-primary border-1 border-primary mb-3 flex justify-content-center align-items-center">Mounted</div>;
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex flex-column align-items-center">
+                {!hidden ? <DynamicBox /> : <div className="w-8rem h-8rem border-round surface-card border-1 surface-border border-dashed mb-3 flex justify-content-center align-items-center">Unmounted</div>}
+                <Button label={hidden ? 'Mount' : 'Unmount'} onClick={() => setHidden(() => !hidden)} className="p-button-outlined w-10rem" />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { useUnmountEffect, useMountEffect } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const [hidden, setHidden] = useState<boolean>(false);
+    const toast = useRef(null);
+
+    const DynamicBox = () => {
+        useUnmountEffect(() => {
+            toast.current && toast.current.show({ severity: 'info', summary: 'Unmounted' });
+        });
+
+        return <div className="w-8rem h-8rem border-round bg-primary border-1 border-primary mb-3 flex justify-content-center align-items-center">Mounted</div>;
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex flex-column align-items-center">
+                {!hidden ? <DynamicBox /> : <div className="w-8rem h-8rem border-round surface-card border-1 surface-border border-dashed mb-3 flex justify-content-center align-items-center">Unmounted</div>}
+                <Button label={hidden ? 'Mount' : 'Unmount'} onClick={() => setHidden(() => !hidden)} className="p-button-outlined w-10rem" />
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A messages is displayed at browser console when the box is unmounted.</p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <div className="card flex flex-column align-items-center">
+                {!hidden ? <DynamicBox /> : <div className="w-8rem h-8rem border-round surface-card border-1 surface-border border-dashed mb-3 flex justify-content-center align-items-center">Unmounted</div>}
+                <Button label={hidden ? 'Mount' : 'Unmount'} onClick={() => setHidden(() => !hidden)} className="p-button-outlined w-10rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useunmounteffect/importdoc.js b/components/doc/hooks/useunmounteffect/importdoc.js
new file mode 100644
index 0000000000..3941322682
--- /dev/null
+++ b/components/doc/hooks/useunmounteffect/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useUnmountEffect } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useupdateeffect/basicdoc.js b/components/doc/hooks/useupdateeffect/basicdoc.js
new file mode 100644
index 0000000000..a86dbff8e4
--- /dev/null
+++ b/components/doc/hooks/useupdateeffect/basicdoc.js
@@ -0,0 +1,87 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useUpdateEffect } from '@/components/lib/hooks/Hooks';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+    const [value, setValue] = useState('');
+
+    useUpdateEffect(() => {
+        toast.current.show({ severity: 'info', summary: 'Updated' });
+    }, [value]);
+
+    const code = {
+        basic: `
+const toast = useRef(null);
+const [value, setValue] = useState('');
+
+useUpdateEffect(() => {
+    toast.current.show({ severity: 'info', summary: 'Updated' });
+}, [value]);
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Toast } from 'primereact/toast';
+import { useUpdateEffect } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+    const [value, setValue] = useState('');
+
+    useUpdateEffect(() => {
+        toast.current.show({ severity: 'info', summary: 'Updated' });
+    }, [value]);
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <InputText type="text" defaultValue={value} onBlur={(e) => setValue(e.target.value)} />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Toast } from 'primereact/toast';
+import { useUpdateEffect } from 'primereact/hooks';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+    const [value, setValue] = useState<string>('');
+
+    useUpdateEffect(() => {
+        toast.current.show({ severity: 'info', summary: 'Updated' });
+    }, [value]);
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <InputText type="text" defaultValue={value} onBlur={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+            </div>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Updating the value at blur event triggers a message.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <InputText type="text" defaultValue={value} onBlur={(e) => setValue(e.target.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/hooks/useupdateeffect/importdoc.js b/components/doc/hooks/useupdateeffect/importdoc.js
new file mode 100644
index 0000000000..00aabd6774
--- /dev/null
+++ b/components/doc/hooks/useupdateeffect/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { useUpdateEffect } from 'primereact/hooks';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/iconfield/accessibilitydoc.js b/components/doc/iconfield/accessibilitydoc.js
new file mode 100644
index 0000000000..8c202c9261
--- /dev/null
+++ b/components/doc/iconfield/accessibilitydoc.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>IconField and InputIcon does not require any roles and attributes.</p>
+
+            <h3>Keyboard Support</h3>
+            <p>Components does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/iconfield/basicdoc.js b/components/doc/iconfield/basicdoc.js
new file mode 100644
index 0000000000..956c9dce97
--- /dev/null
+++ b/components/doc/iconfield/basicdoc.js
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<IconField iconPosition="left">
+    <InputIcon className="pi pi-search"> </InputIcon>
+    <InputText placeholder="Search" />
+</IconField>
+
+<IconField>
+    <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+    <InputText />
+</IconField>
+        `,
+        javascript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function BasicDemo() {
+    return (
+        <div className="flex gap-3">
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"> </InputIcon>
+                <InputText placeholder="Search" />
+            </IconField>
+
+            <IconField>
+                <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                <InputText />
+            </IconField>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function BasicDemo() {
+    return (
+        <div className="flex gap-3">
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"> </InputIcon>
+                <InputText placeholder="Search" />
+            </IconField>
+
+            <IconField>
+                <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                <InputText />
+            </IconField>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    IconField is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <div className="flex gap-3">
+                    <IconField iconPosition="left">
+                        <InputIcon className="pi pi-search" />
+                        <InputText placeholder="Search" />
+                    </IconField>
+
+                    <IconField>
+                        <InputIcon className="pi pi-spin pi-spinner" />
+                        <InputText />
+                    </IconField>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/iconfield/importdoc.js b/components/doc/iconfield/importdoc.js
new file mode 100644
index 0000000000..f0bc9f05d6
--- /dev/null
+++ b/components/doc/iconfield/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/iconfield/pt/wireframe.js b/components/doc/iconfield/pt/wireframe.js
new file mode 100644
index 0000000000..ba0f5cde16
--- /dev/null
+++ b/components/doc/iconfield/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="inputtext" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/iconfield/templatedoc.js b/components/doc/iconfield/templatedoc.js
new file mode 100644
index 0000000000..27c26d0fee
--- /dev/null
+++ b/components/doc/iconfield/templatedoc.js
@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function TemplateDoc(props) {
+    const code = {
+        basic: `
+<IconField iconPosition="left">
+    <InputIcon>
+        <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g mask="url(#mask0_2642_713)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="..."
+                    fill="var(--primary-color)"
+                />
+            </g>
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="..."
+                fill="var(--primary-color)"
+            />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+            <path d="..." fill="var(--primary-color)" />
+        </svg>
+    </InputIcon>
+    <InputText placeholder="Search" />
+</IconField>
+        `,
+        javascript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function TemplateDemo() {
+    return (
+        <IconField iconPosition="left">
+            <InputIcon>
+                <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g mask="url(#mask0_2642_713)">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="..."
+                            fill="var(--primary-color)"
+                        />
+                    </g>
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="..."
+                        fill="var(--primary-color)"
+                    />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                </svg>
+            </InputIcon>
+            <InputText placeholder="Search" />
+        </IconField>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+
+export default function TemplateDemo() {
+    return (
+        <IconField iconPosition="left">
+            <InputIcon>
+                <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g mask="url(#mask0_2642_713)">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="..."
+                            fill="var(--primary-color)"
+                        />
+                    </g>
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="..."
+                        fill="var(--primary-color)"
+                    />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path fillRule="evenodd" clipRule="evenodd" d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                    <path d="..." fill="var(--primary-color)" />
+                </svg>
+            </InputIcon>
+            <InputText placeholder="Search" />
+        </IconField>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    IconField is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <IconField iconPosition="left">
+                    <InputIcon>
+                        <svg width="14" height="14" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="var(--primary-color)"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z"
+                                fill="var(--primary-color)"
+                            />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                        </svg>
+                    </InputIcon>
+                    <InputText placeholder="Search" />
+                </IconField>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/iconfield/theming/styleddoc.js b/components/doc/iconfield/theming/styleddoc.js
new file mode 100644
index 0000000000..4b671474d5
--- /dev/null
+++ b/components/doc/iconfield/theming/styleddoc.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-icon-field</td>
+                            <td>Container of element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-icon-field-right</td>
+                            <td>Right input icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-icon-field-left</td>
+                            <td>Left input icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-input-icon</td>
+                            <td>Container of input icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/iconfield/theming/tailwinddoc.js b/components/doc/iconfield/theming/tailwinddoc.js
new file mode 100644
index 0000000000..de24dd8fef
--- /dev/null
+++ b/components/doc/iconfield/theming/tailwinddoc.js
@@ -0,0 +1,77 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    iconfield: {
+        root: {
+            className: classNames('relative')
+        }
+    },
+    inputicon: {
+        root: ({ context }) => ({
+            className: classNames('absolute top-1/2 -mt-2', {
+                'left-2': context.iconPosition === 'left',
+                'right-2': context.iconPosition === 'right'
+            })
+        })
+    },
+    // For each input wrapped with IconField you will need to add styling.
+    //  The following is an example for InputText
+    inputtext: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                // Extend the root stylings with the following:
+                {
+                    'pl-8': context.iconPosition === 'left',
+                    'pr-8': props.iconPosition === 'right'
+                }
+            )
+        })
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
+
+export default function BasicDemo() {
+    return (
+        <div className="flex gap-3">
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"> </InputIcon>
+                <InputText placeholder="Search" />
+            </IconField>
+
+            <IconField>
+                <InputIcon className="pi pi-spin pi-spinner"> </InputIcon>
+                <InputText />
+            </IconField>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/icons/basicdoc.js b/components/doc/icons/basicdoc.js
new file mode 100644
index 0000000000..44e920a546
--- /dev/null
+++ b/components/doc/icons/basicdoc.js
@@ -0,0 +1,30 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<i className="pi pi-check"></i>
+<i className="pi pi-times"></i>
+<span className="pi pi-search"></span>
+<span className="pi pi-user"></span>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeIcons use the <i>pi pi-&#123;icon&#125;</i> syntax such as <i>pi pi-check</i>. A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i>
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center gap-3">
+                <i className="pi pi-check" />
+                <i className="pi pi-times" />
+                <span className="pi pi-search" />
+                <span className="pi pi-user" />
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/icons/colordoc.js b/components/doc/icons/colordoc.js
new file mode 100644
index 0000000000..ee33ef4225
--- /dev/null
+++ b/components/doc/icons/colordoc.js
@@ -0,0 +1,30 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ColorDoc(props) {
+    const code = {
+        basic: `
+<i className="pi pi-check" style={{ color: 'slateblue' }}></i>
+<i className="pi pi-times" style={{ color: 'green' }}></i>
+<i className="pi pi-search" style={{ color: 'var(--primary-color)' }}></i>
+<i className="pi pi-user" style={{ color: '#708090' }}></i>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Icon color is defined with the <i>color</i> property which is inherited from parent by default.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center gap-3">
+                <i className="pi pi-check" style={{ color: 'slateblue' }} />
+                <i className="pi pi-times" style={{ color: 'green' }} />
+                <i className="pi pi-search" style={{ color: 'var(--primary-color)' }} />
+                <i className="pi pi-user" style={{ color: '#708090' }} />
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/icons/constantsdoc.js b/components/doc/icons/constantsdoc.js
new file mode 100644
index 0000000000..35e2c769f8
--- /dev/null
+++ b/components/doc/icons/constantsdoc.js
@@ -0,0 +1,52 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PrimeIcons } from '@/components/lib/api/PrimeIcons';
+import { Menu } from '@/components/lib/menu/Menu';
+
+export function ConstantsDoc(props) {
+    const items = [
+        {
+            label: 'File',
+            items: [
+                { label: 'New', icon: PrimeIcons.PLUS },
+                { label: 'Open', icon: PrimeIcons.DOWNLOAD }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+import { PrimeIcons } from 'primereact/api';
+
+export default function ConstantsDemo() {
+    const items = [
+        {
+            label: 'File',
+            items: [
+                { label: 'New', icon: PrimeIcons.PLUS },
+                { label: 'Open', icon: PrimeIcons.DOWNLOAD }
+            ]
+        }
+    ];
+
+    return (
+        <Menu model={items} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Constants API is available to reference icons easily when used programmatically.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Menu model={items} />
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/icons/downloaddoc.js b/components/doc/icons/downloaddoc.js
new file mode 100644
index 0000000000..be443e79a5
--- /dev/null
+++ b/components/doc/icons/downloaddoc.js
@@ -0,0 +1,19 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function DownloadDoc(props) {
+    const code = {
+        basic: `
+npm install primeicons
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/icons/figmadoc.js b/components/doc/icons/figmadoc.js
new file mode 100644
index 0000000000..796dee1744
--- /dev/null
+++ b/components/doc/icons/figmadoc.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function FigmaDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeIcons library is now available on{' '}
+                    <a href="https://www.figma.com/community/file/1354343849355792252/primeicons" target="_blank" rel="noopener noreferrer">
+                        Figma Community
+                    </a>
+                    . By adding them as a library, you can easily use these icons in your designs.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/icons/importdoc.js b/components/doc/icons/importdoc.js
new file mode 100644
index 0000000000..ef9428b9c3
--- /dev/null
+++ b/components/doc/icons/importdoc.js
@@ -0,0 +1,19 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import 'primeicons/primeicons.css';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>CSS file of the icon library needs to be imported in your application.</p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/icons/listdoc.js b/components/doc/icons/listdoc.js
new file mode 100644
index 0000000000..b22e005c5a
--- /dev/null
+++ b/components/doc/icons/listdoc.js
@@ -0,0 +1,88 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useEffect, useState } from 'react';
+import { IconService } from '../../../service/IconService';
+
+export function ListDoc(props) {
+    const [icons, setIcons] = useState(null);
+    const [filteredIcons, setFilteredIcons] = useState(null);
+
+    const onFilter = (event) => {
+        if (!icons) {
+            setFilteredIcons([]);
+        }
+
+        if (!event.target.value) {
+            setFilteredIcons(icons);
+        }
+
+        if (event.target.value && icons) {
+            let sanitizedInput = event.target.value.replace(/[^\w\s]/gi, '').replace(/\s/g, '');
+
+            let newFilteredIcons = icons.filter((icon) => {
+                return (
+                    icon.icon.tags.some((tag) =>
+                        tag
+                            .replace(/[^\w\s]/gi, '')
+                            .replace(/\s/g, '')
+                            .includes(sanitizedInput.toLowerCase())
+                    ) ||
+                    icon.properties.name
+                        .replace(/[^\w\s]/gi, '')
+                        .replace(/\s/g, '')
+                        .toLowerCase()
+                        .includes(sanitizedInput.toLowerCase())
+                );
+            });
+
+            setFilteredIcons(newFilteredIcons);
+        }
+    };
+
+    useEffect(() => {
+        IconService.getIcons().then((data) => {
+            data.sort((icon1, icon2) => {
+                if (icon1.properties.name < icon2.properties.name) {
+                    return -1;
+                } else if (icon1.properties.name < icon2.properties.name) {
+                    return 1;
+                }
+
+                return 0;
+            });
+
+            setIcons(data);
+            setFilteredIcons(data);
+        });
+    }, []);
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Here is the full list of PrimeIcons. More icons will be added periodically and you may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.
+                </p>
+            </DocSectionText>
+
+            <InputText className="w-full p-3 mt-3 mb-4" placeholder="Search an icon" onChange={onFilter} />
+
+            <div className="card">
+                <div className="grid text-center">
+                    {filteredIcons &&
+                        filteredIcons.map((iconMeta) => {
+                            const { icon, properties } = iconMeta;
+
+                            return (
+                                icon.tags.indexOf('deprecate') === -1 && (
+                                    <div className="col-12 md:col-2 mb-5" key={properties.name}>
+                                        <i className={'text-2xl mb-3 text-color-secondary pi pi-' + properties.name} />
+                                        <div>pi-{properties.name}</div>
+                                    </div>
+                                )
+                            );
+                        })}
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/icons/sizedoc.js b/components/doc/icons/sizedoc.js
new file mode 100644
index 0000000000..61cb0c2d26
--- /dev/null
+++ b/components/doc/icons/sizedoc.js
@@ -0,0 +1,28 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SizeDoc(props) {
+    const code = {
+        basic: `
+<i className="pi pi-check" style={{ fontSize: '1rem' }}></i>
+<i className="pi pi-times" style={{ fontSize: '1.5rem' }}></i>
+<i className="pi pi-search" style={{ fontSize: '2rem' }}></i>
+<i className="pi pi-user" style={{ fontSize: '2.5rem' }}></i>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Size of an icon is controlled with the fontSize property of the element.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center gap-3">
+                <i className="pi pi-check" style={{ fontSize: '1rem' }} />
+                <i className="pi pi-times" style={{ fontSize: '1.5rem' }} />
+                <i className="pi pi-search" style={{ fontSize: '2rem' }} />
+                <i className="pi pi-user" style={{ fontSize: '2.5rem' }} />
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/icons/spindoc.js b/components/doc/icons/spindoc.js
new file mode 100644
index 0000000000..b54d122e3f
--- /dev/null
+++ b/components/doc/icons/spindoc.js
@@ -0,0 +1,26 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SpinDoc(props) {
+    const code = {
+        basic: `
+<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
+<i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }}></i>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Special <i>pi-spin</i> class applies infinite rotation to an icon.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center gap-3">
+                <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }} />
+                <i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }} />
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/image/accessibilitydoc.js b/components/doc/image/accessibilitydoc.js
new file mode 100644
index 0000000000..559c0b8839
--- /dev/null
+++ b/components/doc/image/accessibilitydoc.js
@@ -0,0 +1,62 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                The preview button is a native <i>button</i> element with an <i>aria-label</i> that refers to the <i>aria.zoomImage</i> property of the <Link href="http://github.com/locale">locale</Link> API by default, with <i>previewButtonProps</i>
+                you may use your own aria roles and attributes as any valid attribute is passed to the button element implicitly.
+            </p>
+
+            <p>
+                When preview is active, <i>dialog</i> role with <i>aria-modal</i> is applied to the overlay image container.
+            </p>
+
+            <p>
+                Button controls use <i>aria.rotateRight</i>, <i>aria.rotateLeft</i>, <i>aria.zoomIn</i>, <i>aria.zoomOut</i> and <i>aria.close</i> from the <Link href="http://github.com/locale">locale</Link> API as <i>aria-label</i>.
+            </p>
+
+            <h3>ButtonBar Keyboard Support</h3>
+            <p>When preview is activated, close button receives the initial focus.</p>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through button bar.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>esc</i>
+                            </td>
+                            <td>Closes the image preview.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/image/basicdoc.js b/components/doc/image/basicdoc.js
new file mode 100644
index 0000000000..74a161b9de
--- /dev/null
+++ b/components/doc/image/basicdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Image } from '@/components/lib/image/Image';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Image src="http://github.com/images/galleria/galleria7.jpg" alt="Image" width="250" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg" alt="Image" width="250" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg" alt="Image" width="250" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Image is used similar to the standard <i>img</i> element.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg" alt="Image" width="250" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/image/importdoc.js b/components/doc/image/importdoc.js
new file mode 100644
index 0000000000..d55f23d8a9
--- /dev/null
+++ b/components/doc/image/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Image } from 'primereact/image';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/image/previewdoc.js b/components/doc/image/previewdoc.js
new file mode 100644
index 0000000000..d0902e6f00
--- /dev/null
+++ b/components/doc/image/previewdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Image } from '@/components/lib/image/Image';
+
+export function PreviewDoc(props) {
+    const code = {
+        basic: `
+<Image src="http://github.com/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function PreviewDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function PreviewDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/image/pt/wireframe.js b/components/doc/image/pt/wireframe.js
new file mode 100644
index 0000000000..0fc2d3fdaa
--- /dev/null
+++ b/components/doc/image/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="image" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/image/styledoc.js b/components/doc/image/styledoc.js
new file mode 100644
index 0000000000..144ca3c8b3
--- /dev/null
+++ b/components/doc/image/styledoc.js
@@ -0,0 +1,59 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-image</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview-container</td>
+                            <td>Container element with preview enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview-indicator</td>
+                            <td>Mask layer over the image when hovered.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview-icon</td>
+                            <td>Icon of the preview indicator.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-mask</td>
+                            <td>Preview overlay container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-toolbar</td>
+                            <td>Transformation options container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-action</td>
+                            <td>An element inside the toolbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview</td>
+                            <td>Image element inside the preview overlay.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/image/templatedoc.js b/components/doc/image/templatedoc.js
new file mode 100644
index 0000000000..a9f20446d4
--- /dev/null
+++ b/components/doc/image/templatedoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Image } from '@/components/lib/image/Image';
+
+export function TemplateDoc(props) {
+    const icon = <i className="pi pi-search" />;
+
+    const code = {
+        basic: `
+<Image src="http://github.com/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function TemplateDemo() {
+    const icon = (<i className="pi pi-search"></i>)
+
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function TemplateDemo() {
+    const icon = (<i className="pi pi-search"></i>)
+
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicatorIcon</i> prop for custom content.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg" indicatorIcon={icon} alt="Image" preview width="250" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/image/theming/styleddoc.js b/components/doc/image/theming/styleddoc.js
new file mode 100644
index 0000000000..04c2a793c9
--- /dev/null
+++ b/components/doc/image/theming/styleddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-image</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview-container</td>
+                            <td>Container element with preview enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview-indicator</td>
+                            <td>Mask layer over the image when hovered.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview-icon</td>
+                            <td>Icon of the preview indicator.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-mask</td>
+                            <td>Preview overlay container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-toolbar</td>
+                            <td>Transformation options container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-action</td>
+                            <td>An element inside the toolbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-image-preview</td>
+                            <td>Image element inside the preview overlay.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/image/theming/tailwinddoc.js b/components/doc/image/theming/tailwinddoc.js
new file mode 100644
index 0000000000..6727d82ab8
--- /dev/null
+++ b/components/doc/image/theming/tailwinddoc.js
@@ -0,0 +1,108 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    image: {
+        root: 'relative inline-block',
+        button: {
+            className: classNames(
+                'absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300',
+                'bg-transparent text-gray-100',
+                'hover:opacity-100 hover:cursor-pointer hover:bg-black hover:bg-opacity-50' //Hover
+            )
+        },
+        mask: {
+            className: classNames('fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90')
+        },
+        toolbar: {
+            className: classNames('absolute top-0 right-0 z-10 flex', 'p-4')
+        },
+        rotaterightbutton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        rotaterighticon: 'w-6 h-6',
+        rotateleftbutton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        rotatelefticon: 'w-6 h-6',
+        zoomoutbutton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        zoomouticon: 'w-6 h-6',
+        zoominbutton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        zoominicon: 'w-6 h-6',
+        closebutton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        closeicon: 'w-6 h-6',
+        transition: {
+            enterFromClass: 'opacity-0 scale-75',
+            enterActiveClass: 'transition-all duration-150 ease-in-out',
+            leaveActiveClass: 'transition-all duration-150 ease-in',
+            leaveToClass: 'opacity-0 scale-75'
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/image/thumbnaildoc.js b/components/doc/image/thumbnaildoc.js
new file mode 100644
index 0000000000..b32a173d92
--- /dev/null
+++ b/components/doc/image/thumbnaildoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Image } from '@/components/lib/image/Image';
+
+export function ThumbnailDoc(props) {
+    const code = {
+        basic: `
+<Image src="http://github.com/images/galleria/galleria14.jpg" zoomSrc="/images/galleria/galleria14.jpg" alt="Image" width="80" height="60" preview />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function ThumbnailDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria14.jpg" zoomSrc="https://primefaces.org/cdn/primereact/images/galleria/galleria14.jpg" alt="Image" width="80" height="60" preview />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Image } from 'primereact/image';
+
+export default function ThumbnailDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria14.jpg" zoomSrc="https://primefaces.org/cdn/primereact/images/galleria/galleria14.jpg" alt="Image" width="80" height="60" preview />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Use the <i>zoomSrc</i> to select a higher resolution image to display in preview mode.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Image src="https://primefaces.org/cdn/primereact/images/galleria/galleria14s.jpg" zoomSrc="https://primefaces.org/cdn/primereact/images/galleria/galleria14.jpg" alt="Image" width="80" height="60" preview />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inplace/accessibilitydoc.js b/components/doc/inplace/accessibilitydoc.js
new file mode 100644
index 0000000000..2b0e0b4f3a
--- /dev/null
+++ b/components/doc/inplace/accessibilitydoc.js
@@ -0,0 +1,69 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Inplace component defines <i>aria-live</i> as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.
+            </p>
+            <p>
+                Display element uses <i>button</i> role in view mode by default, <i>displayProps</i> can be used for customizations like adding <i>aria-label</i> or <i>aria-labelledby</i> attributes to describe the content of the view mode or even
+                overriding the default role.
+            </p>
+            <p>
+                Closable inplace components displays a button with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="http://github.com/locale">locale</Link> API by default, you may use
+                <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+            </p>
+
+            <h3>View Mode Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Switches to content.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Switches to display.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Switches to display.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inplace/basicdoc.js b/components/doc/inplace/basicdoc.js
new file mode 100644
index 0000000000..10b1a792b1
--- /dev/null
+++ b/components/doc/inplace/basicdoc.js
@@ -0,0 +1,84 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Inplace, InplaceContent, InplaceDisplay } from '../../../components/lib/inplace/Inplace';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Inplace>
+    <InplaceDisplay>View Content</InplaceDisplay>
+    <InplaceContent>
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </InplaceContent>
+</Inplace>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+
+export default function BasicDemo() {
+    return (
+        <Inplace>
+            <InplaceDisplay>View Content</InplaceDisplay>
+            <InplaceContent>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </InplaceContent>
+        </Inplace>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+
+export default function BasicDemo() {
+    return (
+        <Inplace>
+            <InplaceDisplay>View Content</InplaceDisplay>
+            <InplaceContent>
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </InplaceContent>
+        </Inplace>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    <i>Inplace</i> component requires <i>InplaceDisplay</i> for display mode and <i>InplaceContent</i> to reveal as the actual content.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Inplace>
+                    <InplaceDisplay>View Content</InplaceDisplay>
+                    <InplaceContent>
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </InplaceContent>
+                </Inplace>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inplace/imagedoc.js b/components/doc/inplace/imagedoc.js
new file mode 100644
index 0000000000..a3b2def575
--- /dev/null
+++ b/components/doc/inplace/imagedoc.js
@@ -0,0 +1,83 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Inplace, InplaceContent, InplaceDisplay } from '../../../components/lib/inplace/Inplace';
+
+export function ImageDoc(props) {
+    const code = {
+        basic: `
+<Inplace>
+    <InplaceDisplay>
+        <span className="inline-flex align-items-center">
+            <span className="pi pi-image"></span>
+            <span className="ml-2">View Picture</span>
+        </span>
+    </InplaceDisplay>
+    <InplaceContent>
+        <img className="w-full" alt="Nature" src="http://github.com/images/nature/nature1.jpg" />
+    </InplaceContent>
+</Inplace>
+        `,
+        javascript: `
+import React from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+
+export default function ImageDemo() {
+    return (
+        <Inplace>
+            <InplaceDisplay>
+                <span className="inline-flex align-items-center">
+                    <span className="pi pi-image"></span>
+                    <span className="ml-2">View Picture</span>
+                </span>
+            </InplaceDisplay>
+            <InplaceContent>
+                <img className="w-full" alt="Nature" src="https://primefaces.org/cdn/primereact/images/nature/nature1.jpg" />
+            </InplaceContent>
+        </Inplace>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+
+export default function ImageDemo() {
+    return (
+        <Inplace>
+            <InplaceDisplay>
+                <span className="inline-flex align-items-center">
+                    <span className="pi pi-image"></span>
+                    <span className="ml-2">View Picture</span>
+                </span>
+            </InplaceDisplay>
+            <InplaceContent>
+                <img className="w-full" alt="Nature" src="https://primefaces.org/cdn/primereact/images/nature/nature1.jpg" />
+            </InplaceContent>
+        </Inplace>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Any content such as an image can be placed inside an Inplace.</p>
+            </DocSectionText>
+            <div className="card">
+                <Inplace>
+                    <InplaceDisplay>
+                        <span className="inline-flex align-items-center">
+                            <span className="pi pi-image" />
+                            <span className="ml-2">View Picture</span>
+                        </span>
+                    </InplaceDisplay>
+                    <InplaceContent>
+                        <img className="w-full" alt="Nature" src="https://primefaces.org/cdn/primereact/images/nature/nature1.jpg" />
+                    </InplaceContent>
+                </Inplace>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inplace/importdoc.js b/components/doc/inplace/importdoc.js
new file mode 100644
index 0000000000..cf73bd311a
--- /dev/null
+++ b/components/doc/inplace/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inplace/inputdoc.js b/components/doc/inplace/inputdoc.js
new file mode 100644
index 0000000000..78c715ff5c
--- /dev/null
+++ b/components/doc/inplace/inputdoc.js
@@ -0,0 +1,79 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useState } from 'react';
+import { Inplace, InplaceContent, InplaceDisplay } from '../../../components/lib/inplace/Inplace';
+import { InputText } from '../../../components/lib/inputtext/InputText';
+
+export function InputDoc(props) {
+    const [text, setText] = useState('');
+
+    const code = {
+        basic: `
+ <Inplace closable>
+    <InplaceDisplay>{text || 'Click to Edit'}</InplaceDisplay>
+    <InplaceContent>
+        <InputText value={text} onChange={(e) => setText(e.target.value)} autoFocus />
+    </InplaceContent>
+</Inplace>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+import { InputText } from 'primereact/inputtext';
+
+export default function InputDemo() {
+    const [text, setText] = useState('');
+
+    return (
+        <div className="card">
+            <Inplace closable>
+                <InplaceDisplay>{text || 'Click to Edit'}</InplaceDisplay>
+                <InplaceContent>
+                    <InputText value={text} onChange={(e) => setText(e.target.value)} autoFocus />
+                </InplaceContent>
+            </Inplace>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+import { InputText } from 'primereact/inputtext';
+
+export default function InputDemo() {
+    const [text, setText] = useState<string>('');
+
+    return (
+        <div className="card">
+            <Inplace closable>
+                <InplaceDisplay>{text || 'Click to Edit'}</InplaceDisplay>
+                <InplaceContent>
+                    <InputText value={text} onChange={(e) => setText(e.target.value)} autoFocus />
+                </InplaceContent>
+            </Inplace>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Inplace can be used within a form to display a value as read only before making it editable. The <i>closable</i> property adds a close button next to the content to switch back to read only mode.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Inplace closable>
+                    <InplaceDisplay>{text || 'Click to Edit'}</InplaceDisplay>
+                    <InplaceContent>
+                        <InputText value={text} onChange={(e) => setText(e.target.value)} autoFocus />
+                    </InplaceContent>
+                </Inplace>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inplace/lazydoc.js b/components/doc/inplace/lazydoc.js
new file mode 100644
index 0000000000..0ce6123655
--- /dev/null
+++ b/components/doc/inplace/lazydoc.js
@@ -0,0 +1,135 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useState } from 'react';
+import { Column } from '../../../components/lib/column/Column';
+import { DataTable } from '../../../components/lib/datatable/DataTable';
+import { Inplace, InplaceContent, InplaceDisplay } from '../../../components/lib/inplace/Inplace';
+import { ProductService } from '../../../service/ProductService';
+
+export function LazyDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    const onOpen = () => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    };
+
+    const code = {
+        basic: `
+<Inplace onOpen={onOpen}>
+    <InplaceDisplay>
+        View Data
+    </InplaceDisplay>
+    <InplaceContent>
+        <DataTable value={products}>
+            <Column field="code" header="Code"></Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="category" header="Category"></Column>
+            <Column field="quantity" header="Quantity"></Column>
+        </DataTable>
+    </InplaceContent>
+</Inplace>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function LazyDemo() {
+    const [products, setProducts] = useState([]);
+    
+    const onOpen = () => {
+        ProductService.getProductsSmall().then(data => setProducts(data));
+    }
+
+    return (
+        <Inplace onOpen={onOpen}>
+            <InplaceDisplay>
+                View Data
+            </InplaceDisplay>
+            <InplaceContent>
+                <DataTable value={products}>
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </InplaceContent>
+        </Inplace>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { ProductService } from './service/ProductService';
+
+export default function LazyDemo() {
+    const [products, setProducts] = useState<any[]>([]);
+    
+    const onOpen = () => {
+        ProductService.getProductsSmall().then(data => setProducts(data));
+    }
+
+    return (
+        <Inplace onOpen={onOpen}>
+            <InplaceDisplay>
+                View Data
+            </InplaceDisplay>
+            <InplaceContent>
+                <DataTable value={products}>
+                    <Column field="code" header="Code"></Column>
+                    <Column field="name" header="Name"></Column>
+                    <Column field="category" header="Category"></Column>
+                    <Column field="quantity" header="Quantity"></Column>
+                </DataTable>
+            </InplaceContent>
+        </Inplace>
+    );
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Using the <i>onOpen</i> event, data can be loaded in a lazy manner before displaying it in a table.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Inplace onOpen={onOpen}>
+                    <InplaceDisplay>View Data</InplaceDisplay>
+                    <InplaceContent>
+                        <DataTable value={products}>
+                            <Column field="code" header="Code" />
+                            <Column field="name" header="Name" />
+                            <Column field="category" header="Category" />
+                            <Column field="quantity" header="Quantity" />
+                        </DataTable>
+                    </InplaceContent>
+                </Inplace>
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/inplace/pt/wireframe.js b/components/doc/inplace/pt/wireframe.js
new file mode 100644
index 0000000000..6cef470c3c
--- /dev/null
+++ b/components/doc/inplace/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/inplace.jpg" alt="inplace" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inplace/styledoc.js b/components/doc/inplace/styledoc.js
new file mode 100644
index 0000000000..3557339f9e
--- /dev/null
+++ b/components/doc/inplace/styledoc.js
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inplace</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inplace-display</td>
+                            <td>Display container</td>
+                        </tr>
+                        <tr>
+                            <td>p-inplace-content</td>
+                            <td>Content container</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inplace/theming/styleddoc.js b/components/doc/inplace/theming/styleddoc.js
new file mode 100644
index 0000000000..f73517fe64
--- /dev/null
+++ b/components/doc/inplace/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inplace</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inplace-display</td>
+                            <td>Display container</td>
+                        </tr>
+                        <tr>
+                            <td>p-inplace-content</td>
+                            <td>Content container</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inplace/theming/tailwinddoc.js b/components/doc/inplace/theming/tailwinddoc.js
new file mode 100644
index 0000000000..6180c4a749
--- /dev/null
+++ b/components/doc/inplace/theming/tailwinddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    inplace: {
+        display: {
+            className: classNames('p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80')
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card">
+            <Inplace>
+                <InplaceDisplay className="text-gray-700 dark:text-white/80">View Content</InplaceDisplay>
+                <InplaceContent>
+                    <p className="text-gray-700 dark:text-white/80 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </InplaceContent>
+            </Inplace>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/inputgroup/basicdoc.js b/components/doc/inputgroup/basicdoc.js
new file mode 100644
index 0000000000..2ba33b0c0d
--- /dev/null
+++ b/components/doc/inputgroup/basicdoc.js
@@ -0,0 +1,116 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<div className="p-inputgroup flex-1">
+    <span className="p-inputgroup-addon">
+        <i className="pi pi-user"></i>
+    </span>
+    <InputText placeholder="Username" />
+</div>
+
+<div className="p-inputgroup flex-1">
+    <span className="p-inputgroup-addon">$</span>
+    <InputNumber placeholder="Price" />
+    <span className="p-inputgroup-addon">.00</span>
+</div>
+
+<div className="p-inputgroup flex-1">
+    <span className="p-inputgroup-addon">www</span>
+    <InputText placeholder="Website" />
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex flex-column md:flex-row gap-3">
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">
+                    <i className="pi pi-user"></i>
+                </span>
+                <InputText placeholder="Username" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">$</span>
+                <InputNumber placeholder="Price" />
+                <span className="p-inputgroup-addon">.00</span>
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">www</span>
+                <InputText placeholder="Website" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex flex-column md:flex-row gap-3">
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">
+                    <i className="pi pi-user"></i>
+                </span>
+                <InputText placeholder="Username" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">$</span>
+                <InputNumber placeholder="Price" />
+                <span className="p-inputgroup-addon">.00</span>
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">www</span>
+                <InputText placeholder="Website" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An InputGroup is created by wrapping the input and add-ons inside an element with a <i>p-inputgroup</i> class where add-ons also should be inside an element with <i>.p-inputgroup-addon</i> class.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column md:flex-row gap-3">
+                <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">
+                        <i className="pi pi-user" />
+                    </span>
+                    <InputText placeholder="Username" />
+                </div>
+
+                <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">$</span>
+                    <InputNumber placeholder="Price" />
+                    <span className="p-inputgroup-addon">.00</span>
+                </div>
+
+                <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">www</span>
+                    <InputText placeholder="Website" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputgroup/buttondoc.js b/components/doc/inputgroup/buttondoc.js
new file mode 100644
index 0000000000..3bac183ac7
--- /dev/null
+++ b/components/doc/inputgroup/buttondoc.js
@@ -0,0 +1,108 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function ButtonDoc(props) {
+    const code = {
+        basic: `
+<div className="p-inputgroup flex-1">
+    <Button label="Search" />
+    <InputText placeholder="Keyword" />
+</div>
+
+<div className="p-inputgroup flex-1">
+    <InputText placeholder="Keyword" />
+    <Button icon="pi pi-search" className="p-button-warning" />
+</div>
+
+<div className="p-inputgroup flex-1">
+    <Button icon="pi pi-check" className="p-button-success" />
+    <InputText placeholder="Vote" />
+    <Button icon="pi pi-times" className="p-button-danger" />
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputNumber } from 'primereact/inputnumber';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+export default function ButtonDemo() {
+    return (
+        <div className="card flex flex-column md:flex-row gap-3">
+            <div className="p-inputgroup flex-1">
+                <Button label="Search" />
+                <InputText placeholder="Keyword" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <InputText placeholder="Keyword" />
+                <Button icon="pi pi-search" className="p-button-warning" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <Button icon="pi pi-check" className="p-button-success" />
+                <InputText placeholder="Vote" />
+                <Button icon="pi pi-times" className="p-button-danger" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputNumber } from 'primereact/inputnumber';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+export default function ButtonDemo() {
+    return (
+        <div className="card flex flex-column md:flex-row gap-3">
+            <div className="p-inputgroup flex-1">
+                <Button label="Search" />
+                <InputText placeholder="Keyword" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <InputText placeholder="Keyword" />
+                <Button icon="pi pi-search" className="p-button-warning" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <Button icon="pi pi-check" className="p-button-success" />
+                <InputText placeholder="Vote" />
+                <Button icon="pi pi-times" className="p-button-danger" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Buttons can be placed at either side of an input element.</p>
+            </DocSectionText>
+            <div className="card flex flex-column md:flex-row gap-3">
+                <div className="p-inputgroup flex-1">
+                    <Button label="Search" />
+                    <InputText placeholder="Keyword" />
+                </div>
+
+                <div className="p-inputgroup flex-1">
+                    <InputText placeholder="Keyword" />
+                    <Button icon="pi pi-search" className="p-button-warning" />
+                </div>
+
+                <div className="p-inputgroup flex-1">
+                    <Button icon="pi pi-check" className="p-button-success" />
+                    <InputText placeholder="Vote" />
+                    <Button icon="pi pi-times" className="p-button-danger" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputgroup/checkboxdoc.js b/components/doc/inputgroup/checkboxdoc.js
new file mode 100644
index 0000000000..414e9b90d3
--- /dev/null
+++ b/components/doc/inputgroup/checkboxdoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Checkbox } from '@/components/lib/checkbox/Checkbox';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { useState } from 'react';
+
+export function CheckboxDoc(props) {
+    const [checked1, setChecked1] = useState(false);
+    const [checked2, setChecked2] = useState(false);
+    const [radioValue, setRadioValue] = useState('');
+
+    const code = {
+        basic: `
+<div className="p-inputgroup flex-1">
+    <InputText placeholder="Price" />
+    <span className="p-inputgroup-addon">
+        <RadioButton name="rb1" value="rb1" checked={radioValue === 'rb1'} onChange={(e) => setRadioValue(e.value)} />
+    </span>
+</div>
+
+<div className="p-inputgroup flex-1">
+    <span className="p-inputgroup-addon">
+        <Checkbox checked={checked1} onChange={(e) => setChecked1(!checked1)} />
+    </span>
+    <InputText placeholder="Username" />
+</div>
+
+<div className="p-inputgroup flex-1">
+    <span className="p-inputgroup-addon">
+        <Checkbox checked={checked2} onChange={(e) => setChecked2(!checked2)} />
+    </span>
+    <InputText placeholder="Website" />
+    <span className="p-inputgroup-addon">
+        <RadioButton name="rb2" value="rb2" checked={radioValue === 'rb2'} onChange={(e) => setRadioValue(e.value)} />
+    </span>
+</div>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Checkbox } from 'primereact/checkbox';
+import { RadioButton } from 'primereact/radiobutton';
+
+export default function CheckboxDoc() {
+    const [checked1, setChecked1] = useState(false);
+    const [checked2, setChecked2] = useState(false);
+    const [radioValue, setRadioValue] = useState('');
+
+    return (
+        <div className="card flex flex-column md:flex-row gap-3">
+            <div className="p-inputgroup flex-1">
+                <InputText placeholder="Price" />
+                <span className="p-inputgroup-addon">
+                    <RadioButton name="rb1" value="rb1" checked={radioValue === 'rb1'} onChange={(e) => setRadioValue(e.value)} />
+                </span>
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">
+                    <Checkbox checked={checked1} onChange={(e) => setChecked1(!checked1)} />
+                </span>
+                <InputText placeholder="Username" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">
+                    <Checkbox checked={checked2} onChange={(e) => setChecked2(!checked2)} />
+                </span>
+                <InputText placeholder="Website" />
+                <span className="p-inputgroup-addon">
+                    <RadioButton name="rb2" value="rb2" checked={radioValue === 'rb2'} onChange={(e) => setRadioValue(e.value)} />
+                </span>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputText } from 'primereact/inputtext';
+import { Checkbox } from 'primereact/checkbox';
+import { RadioButton } from 'primereact/radiobutton';
+
+export default function CheckboxDoc() {
+    const [checked1, setChecked1] = useState<boolean>(false);
+    const [checked2, setChecked2] = useState<boolean>(false);
+    const [radioValue, setRadioValue] = useState<string>('');
+
+    return (
+        <div className="card flex flex-column md:flex-row gap-3">
+            <div className="p-inputgroup flex-1">
+                <InputText placeholder="Price" />
+                <span className="p-inputgroup-addon">
+                    <RadioButton name="rb1" value="rb1" checked={radioValue === 'rb1'} onChange={(e: RadioButtonChangeEvent) => setRadioValue(e.value)} />
+                </span>
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">
+                    <Checkbox checked={checked1} onChange={(e : CheckboxChangeEvent) => setChecked1(!checked1)} />
+                </span>
+                <InputText placeholder="Username" />
+            </div>
+
+            <div className="p-inputgroup flex-1">
+                <span className="p-inputgroup-addon">
+                    <Checkbox checked={checked2} onChange={(e : CheckboxChangeEvent) => setChecked2(!checked2)} />
+                </span>
+                <InputText placeholder="Website" />
+                <span className="p-inputgroup-addon">
+                    <RadioButton name="rb2" value="rb2" checked={radioValue === 'rb2'} onChange={(e: RadioButtonChangeEvent) => setRadioValue(e.value)} />
+                </span>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Checkbox and RadioButton components can be combined with an input element under the same group.</p>
+            </DocSectionText>
+            <div className="card flex flex-column md:flex-row gap-3">
+                <div className="p-inputgroup flex-1">
+                    <InputText placeholder="Price" />
+                    <span className="p-inputgroup-addon">
+                        <RadioButton name="rb1" value="rb1" checked={radioValue === 'rb1'} onChange={(e) => setRadioValue(e.value)} />
+                    </span>
+                </div>
+
+                <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">
+                        <Checkbox checked={checked1} onChange={(e) => setChecked1(!checked1)} />
+                    </span>
+                    <InputText placeholder="Username" />
+                </div>
+
+                <div className="p-inputgroup flex-1">
+                    <span className="p-inputgroup-addon">
+                        <Checkbox checked={checked2} onChange={(e) => setChecked2(!checked2)} />
+                    </span>
+                    <InputText placeholder="Website" />
+                    <span className="p-inputgroup-addon">
+                        <RadioButton name="rb2" value="rb2" checked={radioValue === 'rb2'} onChange={(e) => setRadioValue(e.value)} />
+                    </span>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputgroup/multipledoc.js b/components/doc/inputgroup/multipledoc.js
new file mode 100644
index 0000000000..839c0c0382
--- /dev/null
+++ b/components/doc/inputgroup/multipledoc.js
@@ -0,0 +1,87 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+
+export function MultipleDoc(props) {
+    const code = {
+        basic: `
+<div className="p-inputgroup w-full md:w-30rem">
+    <span className="p-inputgroup-addon">
+        <i className="pi pi-clock"></i>
+    </span>
+    <span className="p-inputgroup-addon">
+        <i className="pi pi-star-fill"></i>
+    </span>
+    <InputNumber placeholder="Price" />
+    <span className="p-inputgroup-addon">$</span>
+    <span className="p-inputgroup-addon">.00</span>
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function MultipleDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <div className="p-inputgroup w-full md:w-30rem">
+                <span className="p-inputgroup-addon">
+                    <i className="pi pi-clock"></i>
+                </span>
+                <span className="p-inputgroup-addon">
+                    <i className="pi pi-star-fill"></i>
+                </span>
+                <InputNumber placeholder="Price" />
+                <span className="p-inputgroup-addon">$</span>
+                <span className="p-inputgroup-addon">.00</span>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function MultipleDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <div className="p-inputgroup w-full md:w-30rem">
+                <span className="p-inputgroup-addon">
+                    <i className="pi pi-clock"></i>
+                </span>
+                <span className="p-inputgroup-addon">
+                    <i className="pi pi-star-fill"></i>
+                </span>
+                <InputNumber placeholder="Price" />
+                <span className="p-inputgroup-addon">$</span>
+                <span className="p-inputgroup-addon">.00</span>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Multiple add-ons can be placed inside the same group.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="p-inputgroup w-full md:w-30rem">
+                    <span className="p-inputgroup-addon">
+                        <i className="pi pi-clock" />
+                    </span>
+                    <span className="p-inputgroup-addon">
+                        <i className="pi pi-star-fill" />
+                    </span>
+                    <InputNumber placeholder="Price" />
+                    <span className="p-inputgroup-addon">$</span>
+                    <span className="p-inputgroup-addon">.00</span>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/accessibilitydoc.js b/components/doc/inputmask/accessibilitydoc.js
new file mode 100644
index 0000000000..630e508057
--- /dev/null
+++ b/components/doc/inputmask/accessibilitydoc.js
@@ -0,0 +1,48 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="date">Date</label>
+<InputMask id="date" />
+
+<span id="phone">Phone</span>
+<InputMask aria-labelledby="phone" />
+
+<InputMask aria-label="Age" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,{' '}
+                <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inputmask/basicdoc.js b/components/doc/inputmask/basicdoc.js
new file mode 100644
index 0000000000..62db67d121
--- /dev/null
+++ b/components/doc/inputmask/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState();
+
+    const code = {
+        basic: `
+<InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask value={value} onChange={(e: InputMaskChangeEvent) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputMask is used as a controlled input with <i>value</i> and <i>onChange</i> properties along with the <i>mask</i> property to define the mask.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/disableddoc.js b/components/doc/inputmask/disableddoc.js
new file mode 100644
index 0000000000..6b1c88cb57
--- /dev/null
+++ b/components/doc/inputmask/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<InputMask mask="99-999999" placeholder="99-999999" disabled />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputMask } from "primereact/inputmask";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputMask } from "primereact/inputmask";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputMask mask="99-999999" placeholder="99-999999" disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/filleddoc.js b/components/doc/inputmask/filleddoc.js
new file mode 100644
index 0000000000..0312504a88
--- /dev/null
+++ b/components/doc/inputmask/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState();
+
+    const code = {
+        basic: `
+<InputMask variant="filled" value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask variant="filled" value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask variant="filled" value={value} onChange={(e: InputMaskChangeEvent) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputMask variant="filled" value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/floatlabeldoc.js b/components/doc/inputmask/floatlabeldoc.js
new file mode 100644
index 0000000000..a3a81208f9
--- /dev/null
+++ b/components/doc/inputmask/floatlabeldoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState();
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <InputMask id="ssn_input" value={value} onChange={(e) => setValue(e.target.value)} mask="999-99-9999" />
+    <label htmlFor="ssn_input">SSN</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputMask id="ssn_input" value={value} onChange={(e) => setValue(e.target.value)} mask="999-99-9999" />
+                <label htmlFor="ssn_input">SSN</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputMask id="ssn_input" value={value} onChange={(e: InputMaskChangeEvent) => setValue(e.target.value)} mask="999-99-9999" />
+                <label htmlFor="ssn_input">SSN</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <InputMask id="ssn_input" value={value} onChange={(e) => setValue(e.target.value)} mask="999-99-9999" />
+                    <label htmlFor="ssn_input">SSN</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/importdoc.js b/components/doc/inputmask/importdoc.js
new file mode 100644
index 0000000000..b28e882e20
--- /dev/null
+++ b/components/doc/inputmask/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputMask } from 'primereact/inputmask';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/invaliddoc.js b/components/doc/inputmask/invaliddoc.js
new file mode 100644
index 0000000000..caefc2516b
--- /dev/null
+++ b/components/doc/inputmask/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<InputMask invalid mask="99-999999" placeholder="99-999999" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputMask } from "primereact/inputmask";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask invalid mask="99-999999" placeholder="99-999999" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputMask } from "primereact/inputmask";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask invalid mask="99-999999" placeholder="99-999999" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputMask invalid mask="99-999999" placeholder="99-999999" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/maskdoc.js b/components/doc/inputmask/maskdoc.js
new file mode 100644
index 0000000000..80c0dc8304
--- /dev/null
+++ b/components/doc/inputmask/maskdoc.js
@@ -0,0 +1,102 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+
+export function MaskDoc(props) {
+    const code = {
+        basic: `
+<label htmlFor="ssn" className="font-bold block mb-2">SSN</label>
+<InputMask id="ssn" mask="999-99-9999" placeholder="999-99-9999"></InputMask>
+
+<label htmlFor="phone" className="font-bold block mb-2">Phone</label>
+<InputMask id="phone" mask="(999) 999-9999" placeholder="(999) 999-9999"></InputMask>
+
+<label htmlFor="serial" className="font-bold block mb-2">Serial</label>
+<InputMask id="serial" mask="a*-999-a999" placeholder="a*-999-a999"></InputMask>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function MaskDemo() {
+    return (
+        <div className="card p-fluid flex flex-wrap gap-3">
+            <div className="flex-auto">
+                <label htmlFor="ssn" className="font-bold block mb-2">SSN</label>
+                <InputMask id="ssn" mask="999-99-9999" placeholder="999-99-9999"></InputMask>
+            </div>
+
+            <div className="flex-auto">
+                <label htmlFor="phone" className="font-bold block mb-2">Phone</label>
+                <InputMask id="phone" mask="(999) 999-9999" placeholder="(999) 999-9999"></InputMask>
+            </div>
+
+            <div className="flex-auto">
+                <label htmlFor="serial" className="font-bold block mb-2">Serial</label>
+                <InputMask id="serial" mask="a*-999-a999" placeholder="a*-999-a999"></InputMask>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function MaskDemo() {
+    return (
+        <div className="card p-fluid flex flex-wrap gap-3">
+            <div className="flex-auto">
+                <label htmlFor="ssn" className="font-bold block mb-2">SSN</label>
+                <InputMask id="ssn" mask="999-99-9999" placeholder="999-99-9999"></InputMask>
+            </div>
+
+            <div className="flex-auto">
+                <label htmlFor="phone" className="font-bold block mb-2">Phone</label>
+                <InputMask id="phone" mask="(999) 999-9999" placeholder="(999) 999-9999"></InputMask>
+            </div>
+
+            <div className="flex-auto">
+                <label htmlFor="serial" className="font-bold block mb-2">Serial</label>
+                <InputMask id="serial" mask="a*-999-a999" placeholder="a*-999-a999"></InputMask>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Mask format can be a combination of the following definitions; <i>a</i> for alphabetic characters, <i>9</i> for numeric characters and <i>*</i> for alphanumberic characters. In addition, formatting characters like <i>(</i> ,{' '}
+                    <i>)</i> , <i>-</i> are also accepted.
+                </p>
+            </DocSectionText>
+            <div className="card p-fluid flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <label htmlFor="ssn" className="font-bold block mb-2">
+                        SSN
+                    </label>
+                    <InputMask id="ssn" mask="999-99-9999" placeholder="999-99-9999" />
+                </div>
+
+                <div className="flex-auto">
+                    <label htmlFor="phone" className="font-bold block mb-2">
+                        Phone
+                    </label>
+                    <InputMask id="phone" mask="(999) 999-9999" placeholder="(999) 999-9999" />
+                </div>
+
+                <div className="flex-auto">
+                    <label htmlFor="serial" className="font-bold block mb-2">
+                        Serial
+                    </label>
+                    <InputMask id="serial" mask="a*-999-a999" placeholder="a*-999-a999" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/optionaldoc.js b/components/doc/inputmask/optionaldoc.js
new file mode 100644
index 0000000000..387df62020
--- /dev/null
+++ b/components/doc/inputmask/optionaldoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+import { useState } from 'react';
+
+export function OptionalDoc(props) {
+    const [value, setValue] = useState();
+
+    const code = {
+        basic: `
+<InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999"  />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function OptionalDemo() {
+    const [value, setValue] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputMask, InputMaskChangeEvent} from "primereact/inputmask";
+
+export default function OptionalDemo() {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask value={value} onChange={(e: InputMaskChangeEvent) => setValue(e.target.value)} mask="(999) 999-9999? x99999" placeholder="(999) 999-9999? x99999" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When the input does not complete the mask definition, it is cleared by default. Use <i>autoClear</i> property to control this behavior. In addition, <i>?</i> is used to mark anything after the question mark optional.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="(999) 999-9999? x999" placeholder="(999) 999-9999? x999" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/pt/wireframe.js b/components/doc/inputmask/pt/wireframe.js
new file mode 100644
index 0000000000..c9bd35db95
--- /dev/null
+++ b/components/doc/inputmask/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="inputmask" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inputmask/slotchardoc.js b/components/doc/inputmask/slotchardoc.js
new file mode 100644
index 0000000000..f424fb9bd3
--- /dev/null
+++ b/components/doc/inputmask/slotchardoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputMask } from '@/components/lib/inputmask/InputMask';
+import { useState } from 'react';
+
+export function SlotCharDoc(props) {
+    const [value, setValue] = useState();
+
+    const code = {
+        basic: `
+<InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function SlotCharDemo() {
+    const [value, setValue] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy"/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputMask, InputMaskChangeEvent } from "primereact/inputmask";
+
+export default function SlotCharDemo() {
+    const [value, setValue] = useState<string | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputMask value={value} onChange={(e: InputMaskChangeEvent) => setValue(e.target.value)} mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy"/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Default placeholder for a mask is underscore that can be customized using <i>slotChar</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99/99/9999" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputmask/styledoc.js b/components/doc/inputmask/styledoc.js
new file mode 100644
index 0000000000..a60d416617
--- /dev/null
+++ b/components/doc/inputmask/styledoc.js
@@ -0,0 +1,34 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputtext</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputmask</td>
+                            <td>Input element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputmask/theming/styleddoc.js b/components/doc/inputmask/theming/styleddoc.js
new file mode 100644
index 0000000000..4cace7a96d
--- /dev/null
+++ b/components/doc/inputmask/theming/styleddoc.js
@@ -0,0 +1,31 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputtext</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputmask</td>
+                            <td>Input element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputmask/theming/tailwinddoc.js b/components/doc/inputmask/theming/tailwinddoc.js
new file mode 100644
index 0000000000..66e56e33cb
--- /dev/null
+++ b/components/doc/inputmask/theming/tailwinddoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputmask: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                'm-0',
+                'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg',
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]':
+                        !context.disabled,
+                    'hover:border-blue-500': !props.invalid && !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled,
+                    'border-gray-300 dark:border-blue-900/40': !props.invalid,
+                    'border-red-500 hover:border-red-500/80 focus:border-red-500':
+                        props.invalid && !context.disabled,
+                    'border-red-500/50': props.invalid && context.disabled,
+                },
+                {
+                    'text-lg px-4 py-4': props.size === 'large',
+                    'text-xs px-2 py-2': props.size === 'small',
+                    'p-3 text-base': !props.size || typeof props.size === 'number'
+                },
+                {
+                    'pl-8': context.iconPosition === 'left',
+                    'pr-8': props.iconPosition === 'right'
+                }
+            ),
+        }),
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { InputMask } from "primereact/inputmask";
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-center">
+            <InputMask value={value} onChange={(e) => setValue(e.target.value)} mask="99-999999" placeholder="99-999999"/>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/accessibilitydoc.js b/components/doc/inputnumber/accessibilitydoc.js
new file mode 100644
index 0000000000..18df032273
--- /dev/null
+++ b/components/doc/inputnumber/accessibilitydoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="input-price">Price</label>
+<InputNumber id="span-price" inputId="input-price" />
+
+<span id="label_number">Number</span>
+<InputNumber aria-labelledby="label_number" />
+
+<InputNumber aria-label="Number" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element uses <i>spinbutton</i> role in addition to the{' '}
+                <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Make sure to assign unique identifiers for the <i>span</i>
+                and <i>input</i>.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Increments the value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Decrements the value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Set the minimum value if provided.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Set the maximum value if provided.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inputnumber/buttonsdoc.js b/components/doc/inputnumber/buttonsdoc.js
new file mode 100644
index 0000000000..284aa49f27
--- /dev/null
+++ b/components/doc/inputnumber/buttonsdoc.js
@@ -0,0 +1,125 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function ButtonsDoc(props) {
+    const [value1, setValue1] = useState(20);
+    const [value2, setValue2] = useState(10.5);
+    const [value3, setValue3] = useState(25);
+
+    const code = {
+        basic: `
+<InputNumber value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} showButtons mode="currency" currency="USD" />
+<InputNumber value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
+<InputNumber value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} showButtons buttonLayout="horizontal" step={0.25}
+            decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
+            mode="currency" currency="EUR" />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function ButtonsDemo() {
+    const [value1, setValue1] = useState(20);
+    const [value2, setValue2] = useState(10.50);
+    const [value3, setValue3] = useState(25);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="stacked-buttons" className="font-bold block mb-2">Stacked</label>
+                <InputNumber inputId="stacked-buttons" value={value1} onValueChange={(e) => setValue1(e.value)} showButtons mode="currency" currency="USD" />
+            </div>
+
+            <div className="flex-auto">
+                <label htmlFor="minmax-buttons" className="font-bold block mb-2">Min-Max Boundaries</label>
+                <InputNumber inputId="minmax-buttons" value={value3} onValueChange={(e) => setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="horizontal-buttons" className="font-bold block mb-2">Horizontal with Step</label>
+                <InputNumber inputId="horizontal-buttons" value={value2} onValueChange={(e) => setValue2(e.value)} showButtons buttonLayout="horizontal" step={0.25}
+                    decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
+                    mode="currency" currency="EUR" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function ButtonsDemo() {
+    const [value1, setValue1] = useState<number>(20);
+    const [value2, setValue2] = useState<number>(10.50);
+    const [value3, setValue3] = useState<number>(25);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="stacked-buttons" className="font-bold block mb-2">Stacked</label>
+                <InputNumber inputId="stacked-buttons" value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} showButtons mode="currency" currency="USD" />
+            </div>
+
+            <div className="flex-auto">
+                <label htmlFor="minmax-buttons" className="font-bold block mb-2">Min-Max Boundaries</label>
+                <InputNumber inputId="minmax-buttons" value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="horizontal-buttons" className="font-bold block mb-2">Horizontal with Step</label>
+                <InputNumber inputId="horizontal-buttons" value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} showButtons buttonLayout="horizontal" step={0.25}
+                    decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
+                    mode="currency" currency="EUR" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3 p-fluid">
+                <div className="flex-auto">
+                    <label htmlFor="stacked-buttons" className="font-bold block mb-2">
+                        Stacked
+                    </label>
+                    <InputNumber inputId="stacked-buttons" value={value1} onValueChange={(e) => setValue1(e.value)} showButtons mode="currency" currency="USD" />
+                </div>
+
+                <div className="flex-auto">
+                    <label htmlFor="minmax-buttons" className="font-bold block mb-2">
+                        Min-Max Boundaries
+                    </label>
+                    <InputNumber inputId="minmax-buttons" value={value3} onValueChange={(e) => setValue3(e.value)} mode="decimal" showButtons min={0} max={100} />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="horizontal-buttons" className="font-bold block mb-2">
+                        Horizontal with Step
+                    </label>
+                    <InputNumber
+                        inputId="horizontal-buttons"
+                        value={value2}
+                        onValueChange={(e) => setValue2(e.value)}
+                        showButtons
+                        buttonLayout="horizontal"
+                        step={0.25}
+                        decrementButtonClassName="p-button-danger"
+                        incrementButtonClassName="p-button-success"
+                        incrementButtonIcon="pi pi-plus"
+                        decrementButtonIcon="pi pi-minus"
+                        mode="currency"
+                        currency="EUR"
+                    />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/currencydoc.js b/components/doc/inputnumber/currencydoc.js
new file mode 100644
index 0000000000..1905ddcf04
--- /dev/null
+++ b/components/doc/inputnumber/currencydoc.js
@@ -0,0 +1,121 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function CurrencyDoc(props) {
+    const [value1, setValue1] = useState(1500);
+    const [value2, setValue2] = useState(2500);
+    const [value3, setValue3] = useState(4250);
+    const [value4, setValue4] = useState(5002);
+
+    const code = {
+        basic: `
+<InputNumber inputId="currency-us" value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
+<InputNumber inputId="currency-germany" value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
+<InputNumber inputId="currency-india" value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+<InputNumber inputId="currency-japan" value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function CurrencyDemo() {
+    const [value1, setValue1] = useState(1500);
+    const [value2, setValue2] = useState(2500);
+    const [value3, setValue3] = useState(4250);
+    const [value4, setValue4] = useState(5002);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="currency-us" className="font-bold block mb-2">United States</label>
+                <InputNumber inputId="currency-us" value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="currency-germany" className="font-bold block mb-2">Germany</label>
+                <InputNumber inputId="currency-germany" value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="currency-india" className="font-bold block mb-2">India</label>
+                <InputNumber inputId="currency-india" value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="currency-japan" className="font-bold block mb-2">Japan</label>
+                <InputNumber inputId="currency-japan" value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function CurrencyDemo() {
+    const [value1, setValue1] = useState<number>(1500);
+    const [value2, setValue2] = useState<number>(2500);
+    const [value3, setValue3] = useState<number>(4250);
+    const [value4, setValue4] = useState<number>(5002);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="currency-us" className="font-bold block mb-2">United States</label>
+                <InputNumber inputId="currency-us" value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="currency-germany" className="font-bold block mb-2">Germany</label>
+                <InputNumber inputId="currency-germany" value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="currency-india" className="font-bold block mb-2">India</label>
+                <InputNumber inputId="currency-india" value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="currency-japan" className="font-bold block mb-2">Japan</label>
+                <InputNumber inputId="currency-japan" value={value4} onValueChange={(e: InputNumberValueChangeEvent) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3 p-fluid">
+                <div className="flex-auto">
+                    <label htmlFor="currency-us" className="font-bold block mb-2">
+                        United States
+                    </label>
+                    <InputNumber inputId="currency-us" value={value1} onValueChange={(e) => setValue1(e.value)} mode="currency" currency="USD" locale="en-US" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="currency-germany" className="font-bold block mb-2">
+                        Germany
+                    </label>
+                    <InputNumber inputId="currency-germany" value={value2} onValueChange={(e) => setValue2(e.value)} mode="currency" currency="EUR" locale="de-DE" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="currency-india" className="font-bold block mb-2">
+                        India
+                    </label>
+                    <InputNumber inputId="currency-india" value={value3} onValueChange={(e) => setValue3(e.value)} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="currency-japan" className="font-bold block mb-2">
+                        Japan
+                    </label>
+                    <InputNumber inputId="currency-japan" value={value4} onValueChange={(e) => setValue4(e.value)} mode="currency" currency="JPY" locale="jp-JP" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/disableddoc.js b/components/doc/inputnumber/disableddoc.js
new file mode 100644
index 0000000000..8afa02fd68
--- /dev/null
+++ b/components/doc/inputnumber/disableddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function DisabledDoc(props) {
+    const [value, setValue] = useState(50);
+
+    const code = {
+        basic: `
+<InputNumber value={value} disabled prefix="%" />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function DisabledDemo() {
+    const [value, setValue] = useState(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber value={value} disabled prefix="%" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function DisabledDemo() {
+    const [value, setValue] = useState<number>(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber value={value} disabled prefix="%" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputNumber value={value} disabled prefix="%" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/filleddoc.js b/components/doc/inputnumber/filleddoc.js
new file mode 100644
index 0000000000..26372e29c3
--- /dev/null
+++ b/components/doc/inputnumber/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<number>(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber variant="filled" value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputNumber variant="filled" value={value} onValueChange={(e) => setValue(e.value)} minFractionDigits={2} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/floatlabeldoc.js b/components/doc/inputnumber/floatlabeldoc.js
new file mode 100644
index 0000000000..7157103acd
--- /dev/null
+++ b/components/doc/inputnumber/floatlabeldoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
+    <label htmlFor="number-input">Number</label>
+</FloatLabel>
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
+                <label htmlFor="number-input">Number</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState<number>(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputNumber id="number-input" value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} />
+                <label htmlFor="number-input">Number</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <InputNumber id="number-input" value={value} onValueChange={(e) => setValue(e.value)} />
+                    <label htmlFor="number-input">Number</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/importdoc.js b/components/doc/inputnumber/importdoc.js
new file mode 100644
index 0000000000..cfc6613731
--- /dev/null
+++ b/components/doc/inputnumber/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputNumber } from 'primereact/inputnumber';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/invaliddoc.js b/components/doc/inputnumber/invaliddoc.js
new file mode 100644
index 0000000000..9f168a79e6
--- /dev/null
+++ b/components/doc/inputnumber/invaliddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState<number>(151351);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber invalid value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} mode="decimal" minFractionDigits={2} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputNumber invalid value={value} onValueChange={(e) => setValue(e.value)} minFractionDigits={2} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/localedoc.js b/components/doc/inputnumber/localedoc.js
new file mode 100644
index 0000000000..eae84e74d1
--- /dev/null
+++ b/components/doc/inputnumber/localedoc.js
@@ -0,0 +1,121 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function LocaleDoc(props) {
+    const [value1, setValue1] = useState(151351);
+    const [value2, setValue2] = useState(115744);
+    const [value3, setValue3] = useState(635524);
+    const [value4, setValue4] = useState(732762);
+
+    const code = {
+        basic: `
+<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} minFractionDigits={2} />
+<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} locale="en-US" minFractionDigits={2} />
+<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
+<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} locale="en-IN" minFractionDigits={2} />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function LocaleDemo() {
+    const [value1, setValue1] = useState(151351);
+    const [value2, setValue2] = useState(115744);
+    const [value3, setValue3] = useState(635524);
+    const [value4, setValue4] = useState(732762);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="locale-user" className="font-bold block mb-2">User Locale</label>
+                <InputNumber inputId="locale-user" value={value1} onValueChange={(e) => setValue1(e.value)} minFractionDigits={2} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="locale-us" className="font-bold block mb-2">United States Locale</label>
+                <InputNumber inputId="locale-us" value={value2} onValueChange={(e) => setValue2(e.value)} locale="en-US" minFractionDigits={2} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="locale-german" className="font-bold block mb-2">German Locale</label>
+                <InputNumber inputId="locale-german" value={value3} onValueChange={(e) => setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="locale-indian" className="font-bold block mb-2">Indian Locale</label>
+                <InputNumber inputId="locale-indian" value={value4} onValueChange={(e) => setValue4(e.value)} locale="en-IN" minFractionDigits={2} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function LocaleDemo() {
+    const [value1, setValue1] = useState<number>(151351);
+    const [value2, setValue2] = useState<number>(115744);
+    const [value3, setValue3] = useState<number>(635524);
+    const [value4, setValue4] = useState<number>(732762);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="locale-user" className="font-bold block mb-2">User Locale</label>
+                <InputNumber inputId="locale-user" value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} minFractionDigits={2} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="locale-us" className="font-bold block mb-2">United States Locale</label>
+                <InputNumber inputId="locale-us" value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} locale="en-US" minFractionDigits={2} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="locale-german" className="font-bold block mb-2">German Locale</label>
+                <InputNumber inputId="locale-german" value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="locale-indian" className="font-bold block mb-2">Indian Locale</label>
+                <InputNumber inputId="locale-indian" value={value4} onValueChange={(e: InputNumberValueChangeEvent) => setValue4(e.value)} locale="en-IN" minFractionDigits={2} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3 p-fluid">
+                <div className="flex-auto">
+                    <label htmlFor="locale-user" className="font-bold block mb-2">
+                        User Locale
+                    </label>
+                    <InputNumber inputId="locale-user" value={value1} onValueChange={(e) => setValue1(e.value)} minFractionDigits={2} />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="locale-us" className="font-bold block mb-2">
+                        United States Locale
+                    </label>
+                    <InputNumber inputId="locale-us" value={value2} onValueChange={(e) => setValue2(e.value)} locale="en-US" minFractionDigits={2} />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="locale-german" className="font-bold block mb-2">
+                        German Locale
+                    </label>
+                    <InputNumber inputId="locale-german" value={value3} onValueChange={(e) => setValue3(e.value)} locale="de-DE" minFractionDigits={2} />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="locale-indian" className="font-bold block mb-2">
+                        Indian Locale
+                    </label>
+                    <InputNumber inputId="locale-indian" value={value4} onValueChange={(e) => setValue4(e.value)} locale="en-IN" minFractionDigits={2} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/numberalsdoc.js b/components/doc/inputnumber/numberalsdoc.js
new file mode 100644
index 0000000000..645b99930c
--- /dev/null
+++ b/components/doc/inputnumber/numberalsdoc.js
@@ -0,0 +1,121 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function NumeralsDoc(props) {
+    const [value1, setValue1] = useState(42723);
+    const [value2, setValue2] = useState(58151);
+    const [value3, setValue3] = useState(2351.35);
+    const [value4, setValue4] = useState(50);
+
+    const code = {
+        basic: `
+<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} />
+<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} useGrouping={false} />
+<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
+<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} min={0} max={100} />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function NumeralsDemo() {
+    const [value1, setValue1] = useState(42723);
+    const [value2, setValue2] = useState(58151);
+    const [value3, setValue3] = useState(2351.35);
+    const [value4, setValue4] = useState(50);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="integeronly" className="font-bold block mb-2">Integer Only</label>
+                <InputNumber inputId="integeronly" value={value1} onValueChange={(e) => setValue1(e.value)} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="withoutgrouping" className="font-bold block mb-2">Without Grouping</label>
+                <InputNumber inputId="withoutgrouping" value={value2} onValueChange={(e) => setValue2(e.value)} useGrouping={false} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="minmaxfraction" className="font-bold block mb-2">Min-Max Fraction Digits</label>
+                <InputNumber inputId="minmaxfraction" value={value3} onValueChange={(e) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="minmax" className="font-bold block mb-2">Min-Max Boundaries</label>
+                <InputNumber inputId="minmax" value={value4} onValueChange={(e) => setValue4(e.value)} min={0} max={100} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function NumeralsDemo() {
+    const [value1, setValue1] = useState<number>(42723);
+    const [value2, setValue2] = useState<number>(58151);
+    const [value3, setValue3] = useState<number>(2351.35);
+    const [value4, setValue4] = useState<number>(50);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="integeronly" className="font-bold block mb-2">Integer Only</label>
+                <InputNumber inputId="integeronly" value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="withoutgrouping" className="font-bold block mb-2">Without Grouping</label>
+                <InputNumber inputId="withoutgrouping" value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} useGrouping={false} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="minmaxfraction" className="font-bold block mb-2">Min-Max Fraction Digits</label>
+                <InputNumber inputId="minmaxfraction" value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="minmax" className="font-bold block mb-2">Min-Max Boundaries</label>
+                <InputNumber inputId="minmax" value={value4} onValueChange={(e: InputNumberValueChangeEvent) => setValue4(e.value)} min={0} max={100} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputNumber is used as a controlled input with <i>value</i> and <i>onValueChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3 p-fluid">
+                <div className="flex-auto">
+                    <label htmlFor="integeronly" className="font-bold block mb-2">
+                        Integer Only
+                    </label>
+                    <InputNumber inputId="integeronly" value={value1} onValueChange={(e) => setValue1(e.value)} />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="withoutgrouping" className="font-bold block mb-2">
+                        Without Grouping
+                    </label>
+                    <InputNumber inputId="withoutgrouping" value={value2} onValueChange={(e) => setValue2(e.value)} useGrouping={false} />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="minmaxfraction" className="font-bold block mb-2">
+                        Min-Max Fraction Digits
+                    </label>
+                    <InputNumber inputId="minmaxfraction" value={value3} onValueChange={(e) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="minmax" className="font-bold block mb-2">
+                        Min-Max Boundaries
+                    </label>
+                    <InputNumber inputId="minmax" value={value4} onValueChange={(e) => setValue4(e.value)} min={0} max={100} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/prefixsuffixdoc.js b/components/doc/inputnumber/prefixsuffixdoc.js
new file mode 100644
index 0000000000..ff757018f2
--- /dev/null
+++ b/components/doc/inputnumber/prefixsuffixdoc.js
@@ -0,0 +1,121 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function PrefixSuffixDoc(props) {
+    const [value1, setValue1] = useState(20);
+    const [value2, setValue2] = useState(50);
+    const [value3, setValue3] = useState(10);
+    const [value4, setValue4] = useState(20);
+
+    const code = {
+        basic: `
+<InputNumber value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />
+<InputNumber value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />
+<InputNumber value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />
+<InputNumber value={value4} onValueChange={(e) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function PrefixSuffixDemo() {
+    const [value1, setValue1] = useState(20);
+    const [value2, setValue2] = useState(50);
+    const [value3, setValue3] = useState(10);
+    const [value4, setValue4] = useState(20);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="mile" className="font-bold block mb-2">Mile</label>
+                <InputNumber inputId="mile" value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="percent" className="font-bold block mb-2">Percent</label>
+                <InputNumber inputId="percent" value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="expiry" className="font-bold block mb-2">Expiry</label>
+                <InputNumber inputId="expiry" value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="temperature" className="font-bold block mb-2">Temperature</label>
+                <InputNumber inputId="temperature" value={value4} onValueChange={(e) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function PrefixSuffixDemo() {
+    const [value1, setValue1] = useState<number>(20);
+    const [value2, setValue2] = useState<number>(50);
+    const [value3, setValue3] = useState<number>(10);
+    const [value4, setValue4] = useState<number>(20);
+
+    return (
+        <div className="card flex flex-wrap gap-3 p-fluid">
+            <div className="flex-auto">
+                <label htmlFor="mile" className="font-bold block mb-2">Mile</label>
+                <InputNumber inputId="mile" value={value1} onValueChange={(e: InputNumberValueChangeEvent) => setValue1(e.value)} suffix=" mi" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="percent" className="font-bold block mb-2">Percent</label>
+                <InputNumber inputId="percent" value={value2} onValueChange={(e: InputNumberValueChangeEvent) => setValue2(e.value)} prefix="%" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="expiry" className="font-bold block mb-2">Expiry</label>
+                <InputNumber inputId="expiry" value={value3} onValueChange={(e: InputNumberValueChangeEvent) => setValue3(e.value)} prefix="Expires in " suffix=" days" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="temperature" className="font-bold block mb-2">Temperature</label>
+                <InputNumber inputId="temperature" value={value4} onValueChange={(e: InputNumberValueChangeEvent) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3 p-fluid">
+                <div className="flex-auto">
+                    <label htmlFor="mile" className="font-bold block mb-2">
+                        Mile
+                    </label>
+                    <InputNumber inputId="mile" value={value1} onValueChange={(e) => setValue1(e.value)} suffix=" mi" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="percent" className="font-bold block mb-2">
+                        Percent
+                    </label>
+                    <InputNumber inputId="percent" value={value2} onValueChange={(e) => setValue2(e.value)} prefix="%" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="expiry" className="font-bold block mb-2">
+                        Expiry
+                    </label>
+                    <InputNumber inputId="expiry" value={value3} onValueChange={(e) => setValue3(e.value)} prefix="Expires in " suffix=" days" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="temperature" className="font-bold block mb-2">
+                        Temperature
+                    </label>
+                    <InputNumber inputId="temperature" value={value4} onValueChange={(e) => setValue4(e.value)} prefix="&uarr; " suffix="℃" min={0} max={40} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/pt/wireframe.js b/components/doc/inputnumber/pt/wireframe.js
new file mode 100644
index 0000000000..5a5b20f17a
--- /dev/null
+++ b/components/doc/inputnumber/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/inputnumber.jpg" alt="inputnumber" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inputnumber/styledoc.js b/components/doc/inputnumber/styledoc.js
new file mode 100644
index 0000000000..4a1b492641
--- /dev/null
+++ b/components/doc/inputnumber/styledoc.js
@@ -0,0 +1,63 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputnumber</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-stacked</td>
+                            <td>Container element with stacked buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-horizontal</td>
+                            <td>Container element with horizontal buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-vertical</td>
+                            <td>Container element with vertical buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-input</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button-up</td>
+                            <td>Increment button</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button-down</td>
+                            <td>Decrement button</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button-icon</td>
+                            <td>Button icon</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/theming/styleddoc.js b/components/doc/inputnumber/theming/styleddoc.js
new file mode 100644
index 0000000000..fb2bd6b9d0
--- /dev/null
+++ b/components/doc/inputnumber/theming/styleddoc.js
@@ -0,0 +1,59 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputnumber</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-stacked</td>
+                            <td>Container element with stacked buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-horizontal</td>
+                            <td>Container element with horizontal buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-vertical</td>
+                            <td>Container element with vertical buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-input</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button</td>
+                            <td>Input element</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button-up</td>
+                            <td>Increment button</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button-down</td>
+                            <td>Decrement button</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputnumber-button-icon</td>
+                            <td>Button icon</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/theming/tailwinddoc.js b/components/doc/inputnumber/theming/tailwinddoc.js
new file mode 100644
index 0000000000..520bee5c7b
--- /dev/null
+++ b/components/doc/inputnumber/theming/tailwinddoc.js
@@ -0,0 +1,82 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputnumber: {
+        root: 'w-full inline-flex',
+        input: {
+            root: ({ props }) => ({
+                className: classNames({ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' })
+            })
+        },
+        buttongroup: ({ props }) => ({
+            className: classNames({ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' })
+        }),
+        incrementbutton: ({ props }) => ({
+            className: classNames('flex !items-center !justify-center', {
+                'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+            })
+        }),
+        decrementbutton: ({ props }) => ({
+            className: classNames('flex !items-center !justify-center', {
+                'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+            })
+        })
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function UnstyledDemo() {
+    const [value1, setValue1] = useState(42723);
+    const [value2, setValue2] = useState(58151);
+    const [value3, setValue3] = useState(2351.35);
+    const [value4, setValue4] = useState(50);
+
+    return (
+        <div className="card flex flex-wrap">
+            <div className="flex-auto">
+                <label htmlFor="integeronly" className="font-bold block mb-2 text-gray-700 dark:text-white/80">Integer Only</label>
+                <InputNumber inputId="integeronly" value={value1} onValueChange={(e) => setValue1(e.value)} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="withoutgrouping" className="font-bold block mb-2 text-gray-700 dark:text-white/80">Without Grouping</label>
+                <InputNumber inputId="withoutgrouping" value={value2} onValueChange={(e) => setValue2(e.value)} useGrouping={false} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="minmaxfraction" className="font-bold block mb-2 text-gray-700 dark:text-white/80">Min-Max Fraction Digits</label>
+                <InputNumber inputId="minmaxfraction" value={value3} onValueChange={(e) => setValue3(e.value)} minFractionDigits={2} maxFractionDigits={5} />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="minmax" className="font-bold block mb-2 text-gray-700 dark:text-white/80">Min-Max Boundaries</label>
+                <InputNumber inputId="minmax" value={value4} onValueChange={(e) => setValue4(e.value)} min={0} max={100} />
+            </div>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/inputnumber/verticaldoc.js b/components/doc/inputnumber/verticaldoc.js
new file mode 100644
index 0000000000..48bd5a7f1e
--- /dev/null
+++ b/components/doc/inputnumber/verticaldoc.js
@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { useState } from 'react';
+
+export function VerticalDoc(props) {
+    const [value, setValue] = useState(50);
+
+    const code = {
+        basic: `
+<InputNumber value={value} onValueChange={(e) => setValue(e.value)} showButtons buttonLayout="vertical" style={{ width: '4rem' }} 
+    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+`,
+        javascript: `
+import React, { useState } from "react";
+import { InputNumber } from 'primereact/inputnumber';
+
+export default function VerticalDemo() {
+    const [value, setValue] = useState(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber value={value} onValueChange={(e) => setValue(e.value)} showButtons buttonLayout="vertical" style={{ width: '4rem' }} 
+                    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+        </div>
+)
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
+
+export default function VerticalDemo() {
+    const [value, setValue] = useState<number>(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputNumber value={value} onValueChange={(e: InputNumberValueChangeEvent) => setValue(e.value)} showButtons buttonLayout="vertical" style={{ width: '4rem' }} 
+                    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputNumber
+                    value={value}
+                    onValueChange={(e) => setValue(e.value)}
+                    showButtons
+                    buttonLayout="vertical"
+                    style={{ width: '4rem' }}
+                    decrementButtonClassName="p-button-secondary"
+                    incrementButtonClassName="p-button-secondary"
+                    incrementButtonIcon="pi pi-plus"
+                    decrementButtonIcon="pi pi-minus"
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/accessibilitydoc.js b/components/doc/inputotp/accessibilitydoc.js
new file mode 100644
index 0000000000..508eeaf59a
--- /dev/null
+++ b/components/doc/inputotp/accessibilitydoc.js
@@ -0,0 +1,52 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Input OTP uses a set of InputText components, refer to the <Link href="http://github.com/inputtext">InputText</Link> component for more information about the screen reader support.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input otp.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>backspace</i>
+                            </td>
+                            <td>Deletes the input and moves focus to the previous input element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inputotp/basicdoc.js b/components/doc/inputotp/basicdoc.js
new file mode 100644
index 0000000000..68e8ad5786
--- /dev/null
+++ b/components/doc/inputotp/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [token, setTokens] = useState();
+
+    const code = {
+        basic: `
+<InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function BasicDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function BasicDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The number of characters is defined with the <i>length</i> property, which is set to 4 by default.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/importdoc.js b/components/doc/inputotp/importdoc.js
new file mode 100644
index 0000000000..24ea2c4874
--- /dev/null
+++ b/components/doc/inputotp/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputOtp } from 'primereact/inputotp';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/integeronlydoc.js b/components/doc/inputotp/integeronlydoc.js
new file mode 100644
index 0000000000..bcc7fa9a65
--- /dev/null
+++ b/components/doc/inputotp/integeronlydoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
+
+export function IntegerOnlyDoc(props) {
+    const [token, setTokens] = useState();
+
+    const code = {
+        basic: `
+<InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function IntegerOnlyDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function IntegerOnlyDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly/>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>integerOnly</i> is present, only integers can be accepted as input.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} integerOnly />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/maskdoc.js b/components/doc/inputotp/maskdoc.js
new file mode 100644
index 0000000000..30997fe8c6
--- /dev/null
+++ b/components/doc/inputotp/maskdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
+
+export function MaskDoc(props) {
+    const [token, setTokens] = useState();
+
+    const code = {
+        basic: `
+<InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function MaskDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function MaskDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask/>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enable the <i>mask</i> option to hide the values in the input fields.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} mask />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/pt/wireframe.js b/components/doc/inputotp/pt/wireframe.js
new file mode 100644
index 0000000000..5e996e3927
--- /dev/null
+++ b/components/doc/inputotp/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="inputnumber" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inputotp/sampledoc.js b/components/doc/inputotp/sampledoc.js
new file mode 100644
index 0000000000..49d95f78f0
--- /dev/null
+++ b/components/doc/inputotp/sampledoc.js
@@ -0,0 +1,244 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
+
+export function SampleDoc(props) {
+    const [token, setTokens] = useState();
+
+    const customInput = ({ events, props: attr }) => {
+        return (
+            <>
+                <input {...events} {...attr} type="text" className="custom-otp-input-sample" />
+                {attr['data-index'] === 2 && (
+                    <div className="px-3">
+                        <i className="pi pi-minus" />
+                    </div>
+                )}
+            </>
+        );
+    };
+
+    const code = {
+        basic: `
+<div className="flex flex-column align-items-center">
+    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+    <div className="flex justify-content-between mt-5 align-self-stretch">
+        <Button label="Resend Code" link className="p-0"></Button>
+        <Button label="Submit Code"></Button>
+    </div>
+</div>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+import { Button } from 'primereact/button';
+
+export default function SampleDemo() {
+    const [token, setTokens] = useState();
+
+    const customInput = ({events, props}) => {
+        return <><input {...events} {...props} type="text" className="custom-otp-input-sample" />
+            {props['data-index'] === 2 && <div className="px-3">
+                <i className="pi pi-minus" />
+            </div>}
+        </>
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input-sample {
+                        width: 48px;
+                        height: 48px;
+                        font-size: 24px;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        border-radius: 0;
+                        border: 1px solid var(--surface-400);
+                        background: transparent;
+                        outline-offset: -2px;
+                        outline-color: transparent;
+                        border-right: 0 none;
+                        transition: outline-color 0.3s;
+                        color: var(--text-color);
+                    }
+
+                    .custom-otp-input-sample:focus {
+                        outline: 2px solid var(--primary-color);
+                    }
+
+                    .custom-otp-input-sample:first-child,
+                    .custom-otp-input-sample:nth-child(5) {
+                        border-top-left-radius: 12px;
+                        border-bottom-left-radius: 12px;
+                    }
+
+                    .custom-otp-input-sample:nth-child(3),
+                    .custom-otp-input-sample:last-child {
+                        border-top-right-radius: 12px;
+                        border-bottom-right-radius: 12px;
+                        border-right-width: 1px;
+                        border-right-style: solid;
+                        border-color: var(--surface-400);
+                    }
+                \`}
+            </style>
+            <div className="flex flex-column align-items-center">
+                <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+                <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+                <div className="flex justify-content-between mt-5 align-self-stretch">
+                    <Button label="Resend Code" link className="p-0"></Button>
+                    <Button label="Submit Code"></Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp, InputOtpProps } from 'primereact/inputotp';
+import { Button } from 'primereact/button';
+
+interface CustomInputProps extends InputOtpProps {
+    events?: any;
+    props?: any;
+}
+
+export default function SampleDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+    const customInput: FunctionComponent<CustomInputProps> = ({ events, props }) => {
+        return (
+          <>
+            <input {...events} {...props} type="text" className="custom-otp-input-sample" />
+            {props?.['data-index'] === 2 && (
+              <div className="px-3">
+                <i className="pi pi-minus" />
+              </div>
+            )}
+          </>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input-sample {
+                        width: 48px;
+                        height: 48px;
+                        font-size: 24px;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        border-radius: 0;
+                        border: 1px solid var(--surface-400);
+                        background: transparent;
+                        outline-offset: -2px;
+                        outline-color: transparent;
+                        border-right: 0 none;
+                        transition: outline-color 0.3s;
+                        color: var(--text-color);
+                    }
+
+                    .custom-otp-input-sample:focus {
+                        outline: 2px solid var(--primary-color);
+                    }
+
+                    .custom-otp-input-sample:first-child,
+                    .custom-otp-input-sample:nth-child(5) {
+                        border-top-left-radius: 12px;
+                        border-bottom-left-radius: 12px;
+                    }
+
+                    .custom-otp-input-sample:nth-child(3),
+                    .custom-otp-input-sample:last-child {
+                        border-top-right-radius: 12px;
+                        border-bottom-right-radius: 12px;
+                        border-right-width: 1px;
+                        border-right-style: solid;
+                        border-color: var(--surface-400);
+                    }
+                \`}
+            </style>
+            <div className="flex flex-column align-items-center">
+                <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+                <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{gap: 0}}/>
+                <div className="flex justify-content-between mt-5 align-self-stretch">
+                    <Button label="Resend Code" link className="p-0"></Button>
+                    <Button label="Submit Code"></Button>
+                </div>
+            </div>
+        </div>
+    );
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A sample UI implementation with templating and additional elements.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <style scoped>
+                    {`
+                        .custom-otp-input-sample {
+                            width: 48px;
+                            height: 48px;
+                            font-size: 24px;
+                            appearance: none;
+                            text-align: center;
+                            transition: all 0.2s;
+                            border-radius: 0;
+                            border: 1px solid var(--surface-400);
+                            background: transparent;
+                            outline-offset: -2px;
+                            outline-color: transparent;
+                            border-right: 0 none;
+                            transition: outline-color 0.3s;
+                            color: var(--text-color);
+                        }
+
+                        .custom-otp-input-sample:focus {
+                            outline: 2px solid var(--primary-color);
+                        }
+
+                        .custom-otp-input-sample:first-child,
+                        .custom-otp-input-sample:nth-child(5) {
+                            border-top-left-radius: 12px;
+                            border-bottom-left-radius: 12px;
+                        }
+
+                        .custom-otp-input-sample:nth-child(3),
+                        .custom-otp-input-sample:last-child {
+                            border-top-right-radius: 12px;
+                            border-bottom-right-radius: 12px;
+                            border-right-width: 1px;
+                            border-right-style: solid;
+                            border-color: var(--surface-400);
+                        }
+                    `}
+                </style>
+                <div className="flex flex-column align-items-center">
+                    <p className="font-bold text-xl mb-2">Authenticate Your Account</p>
+                    <p className="text-color-secondary block mb-5">Please enter the code sent to your phone.</p>
+                    <InputOtp value={token} onChange={(e) => setTokens(e.value)} length={6} inputTemplate={customInput} style={{ gap: 0 }} />
+                    <div className="flex justify-content-between mt-5 align-self-stretch">
+                        <Button label="Resend Code" link className="p-0"></Button>
+                        <Button label="Submit Code"></Button>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/templatedoc.js b/components/doc/inputotp/templatedoc.js
new file mode 100644
index 0000000000..75f1cbb70d
--- /dev/null
+++ b/components/doc/inputotp/templatedoc.js
@@ -0,0 +1,128 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputOtp } from '@/components/lib/inputotp/InputOtp';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [token, setTokens] = useState();
+
+    const customInput = ({ events, props: attr }) => <input {...events} {...attr} type="text" className="custom-otp-input" />;
+
+    const code = {
+        basic: `
+<InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function TemplateDemo() {
+    const [token, setTokens] = useState();
+
+    const customInput = ({events, props}) => <input {...events} {...props} type="text" className="custom-otp-input" />;
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input {
+                        width: 40px;
+                        font-size: 36px;
+                        border: 0 none;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        background: transparent;
+                        border-bottom: 2px solid var(--surface-500);
+                    }
+
+                    .custom-otp-input:focus {
+                        outline: 0 none;
+                        border-bottom-color: var(--primary-color);
+                    }
+                \`}
+            </style>
+
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput}/>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    events: React.HTMLAttributes<HTMLInputElement>;
+    props: React.HTMLAttributes<HTMLInputElement>;
+}
+
+export default function TemplateDemo() {
+    const [token, setTokens] = useState<string | number | undefined>();
+
+      
+    const customInput = ({ events, props }: CustomInputProps) => (
+    <input {...events} {...props} type="text" className="custom-otp-input" />
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <style scoped>
+                {\`
+                    .custom-otp-input {
+                        width: 40px;
+                        font-size: 36px;
+                        border: 0 none;
+                        appearance: none;
+                        text-align: center;
+                        transition: all 0.2s;
+                        background: transparent;
+                        border-bottom: 2px solid var(--surface-500);
+                    }
+
+                    .custom-otp-input:focus {
+                        outline: 0 none;
+                        border-bottom-color: var(--primary-color);
+                    }
+                \`}
+            </style>
+
+            <InputOtp value={token} onChange={(e: any) => setTokens(e?.value)} inputTemplate={customInput}/>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <style scoped>
+                    {`
+                        .custom-otp-input {
+                            width: 40px;
+                            font-size: 36px;
+                            border: 0 none;
+                            appearance: none;
+                            text-align: center;
+                            transition: all 0.2s;
+                            background: transparent;
+                            border-bottom: 2px solid var(--surface-500);
+                        }
+
+                        .custom-otp-input:focus {
+                            outline: 0 none;
+                            border-bottom-color: var(--primary-color);
+                        }
+                    `}
+                </style>
+
+                <InputOtp value={token} onChange={(e) => setTokens(e.value)} inputTemplate={customInput} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputotp/theming/styleddoc.js b/components/doc/inputotp/theming/styleddoc.js
new file mode 100644
index 0000000000..c1c63f36ba
--- /dev/null
+++ b/components/doc/inputotp/theming/styleddoc.js
@@ -0,0 +1,31 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputotp</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputotp-input</td>
+                            <td>Input element of the component.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputotp/theming/tailwinddoc.js b/components/doc/inputotp/theming/tailwinddoc.js
new file mode 100644
index 0000000000..84fc669f2c
--- /dev/null
+++ b/components/doc/inputotp/theming/tailwinddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputotp: {
+        root: { className: 'flex items-center gap-2' },
+        input: {
+            root: {
+                className: classNames(
+                    'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200',
+                    'hover:border-cyan-500',
+                    'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0'
+                )
+            }
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { InputOtp } from 'primereact/inputotp';
+
+export default function BasicDemo() {
+    const [token, setTokens] = useState();
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputOtp value={token} onChange={(e) => setTokens(e.value)}/>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/accessibilitydoc.js b/components/doc/inputswitch/accessibilitydoc.js
new file mode 100644
index 0000000000..a980ac52da
--- /dev/null
+++ b/components/doc/inputswitch/accessibilitydoc.js
@@ -0,0 +1,54 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="switch1">Remember Me</label>
+<InputSwitch inputId="switch1" />
+
+<span id="switch2">Remember Me</span>
+<InputSwitch aria-labelledby="switch2" />
+
+<InputSwitch aria-label="Remember Me" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with{' '}
+                <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the switch.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the checked state.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inputswitch/basicdoc.js b/components/doc/inputswitch/basicdoc.js
new file mode 100644
index 0000000000..2d2f1a317e
--- /dev/null
+++ b/components/doc/inputswitch/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+
+export default function BasicDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch";
+
+export default function BasicDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch checked={checked} onChange={(e: InputSwitchChangeEvent) => setChecked(e.value)} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputSwitch is used as a controlled input with <i>checked</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/disableddoc.js b/components/doc/inputswitch/disableddoc.js
new file mode 100644
index 0000000000..49e829a4cf
--- /dev/null
+++ b/components/doc/inputswitch/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<InputSwitch disabled />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch disabled />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch disabled />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputSwitch disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/importdoc.js b/components/doc/inputswitch/importdoc.js
new file mode 100644
index 0000000000..193ff907b3
--- /dev/null
+++ b/components/doc/inputswitch/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputSwitch } from 'primereact/inputswitch';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/invaliddoc.js b/components/doc/inputswitch/invaliddoc.js
new file mode 100644
index 0000000000..cc2f1eb1cd
--- /dev/null
+++ b/components/doc/inputswitch/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<InputSwitch className="p-invalid" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch className="p-invalid" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch className="p-invalid" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputSwitch className="p-invalid" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/preselectiondoc.js b/components/doc/inputswitch/preselectiondoc.js
new file mode 100644
index 0000000000..e116c65616
--- /dev/null
+++ b/components/doc/inputswitch/preselectiondoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { useState } from 'react';
+
+export function PreselectionDoc(props) {
+    const [checked, setChecked] = useState(true);
+
+    const code = {
+        basic: `
+<InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+
+export default function PreselectionDemo() {
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputSwitch, InputSwitchChangeEvent } from "primereact/inputswitch";
+
+export default function PreselectionDemo() {
+    const [checked, setChecked] = useState<boolean>(true);
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputSwitch checked={checked} onChange={(e: InputSwitchChangeEvent) => setChecked(e.value)} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>checked</i> property displays the component as active initially.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/pt/wireframe.js b/components/doc/inputswitch/pt/wireframe.js
new file mode 100644
index 0000000000..40bef14774
--- /dev/null
+++ b/components/doc/inputswitch/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/inputswitch.jpg" alt="inputswitch" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inputswitch/styledoc.js b/components/doc/inputswitch/styledoc.js
new file mode 100644
index 0000000000..4ff3b3f83b
--- /dev/null
+++ b/components/doc/inputswitch/styledoc.js
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputswitch</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputswitch-checked</td>
+                            <td>Container element in active state.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputswitch-slider</td>
+                            <td>Slider element behind the handle.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/theming/styleddoc.js b/components/doc/inputswitch/theming/styleddoc.js
new file mode 100644
index 0000000000..b9e8c2370a
--- /dev/null
+++ b/components/doc/inputswitch/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputswitch</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputswitch-checked</td>
+                            <td>Container element in active state.</td>
+                        </tr>
+                        <tr>
+                            <td>p-inputswitch-slider</td>
+                            <td>Slider element behind the handle.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputswitch/theming/tailwinddoc.js b/components/doc/inputswitch/theming/tailwinddoc.js
new file mode 100644
index 0000000000..937f3bbafc
--- /dev/null
+++ b/components/doc/inputswitch/theming/tailwinddoc.js
@@ -0,0 +1,66 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputswitch: {
+        root: ({ props }) => ({
+            className: classNames('inline-block relative', 'w-12 h-7', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        slider: ({ props }) => ({
+            className: classNames(
+                'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
+                'transition-colors duration-200 rounded-2xl',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                "before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
+                {
+                    'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.checked,
+                    'bg-blue-500 before:transform before:translate-x-5': props.checked
+                }
+            )
+        })
+    }
+}
+
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { InputSwitch } from "primereact/inputswitch";
+
+export default function UnstyledDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-center">
+            <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/inputtext/accessibilitydoc.js b/components/doc/inputtext/accessibilitydoc.js
new file mode 100644
index 0000000000..6f15812091
--- /dev/null
+++ b/components/doc/inputtext/accessibilitydoc.js
@@ -0,0 +1,48 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="firstname">Firstname</label>
+<InputText id="firstname" />
+
+<span id="lastname">Lastname</span>
+<InputText aria-labelledby="lastname" />
+
+<InputText aria-label="Age"/>
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>,{' '}
+                <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inputtext/basicdoc.js b/components/doc/inputtext/basicdoc.js
new file mode 100644
index 0000000000..0756ed3739
--- /dev/null
+++ b/components/doc/inputtext/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputText value={value} onChange={(e) => setValue(e.target.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText value={value} onChange={(e) => setValue(e.target.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/disableddoc.js b/components/doc/inputtext/disableddoc.js
new file mode 100644
index 0000000000..68f38f74d1
--- /dev/null
+++ b/components/doc/inputtext/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<InputText disabled placeholder="Disabled" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputText disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputText disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText disabled placeholder="Disabled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/filleddoc.js b/components/doc/inputtext/filleddoc.js
new file mode 100644
index 0000000000..62bb400b32
--- /dev/null
+++ b/components/doc/inputtext/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputText variant="filled" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/floatlabeldoc.js b/components/doc/inputtext/floatlabeldoc.js
new file mode 100644
index 0000000000..a4125050d2
--- /dev/null
+++ b/components/doc/inputtext/floatlabeldoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+    <label htmlFor="username">Username</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label htmlFor="username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputText id="username" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+                <label htmlFor="username">Username</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
+                    <label htmlFor="username">Username</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/helptextdoc.js b/components/doc/inputtext/helptextdoc.js
new file mode 100644
index 0000000000..9f1bae36dc
--- /dev/null
+++ b/components/doc/inputtext/helptextdoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function HelpTextDoc(props) {
+    const code = {
+        basic: `
+<div className="flex flex-column gap-2">
+    <label htmlFor="username">Username</label>
+    <InputText id="username" aria-describedby="username-help" />
+    <small id="username-help">
+        Enter your username to reset your password.
+    </small>
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function HelpTextDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column gap-2">
+                <label htmlFor="username">Username</label>
+                <InputText id="username" aria-describedby="username-help" />
+                <small id="username-help">
+                    Enter your username to reset your password.
+                </small>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function HelpTextDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column gap-2">
+                <label htmlFor="username">Username</label>
+                <InputText id="username" aria-describedby="username-help" />
+                <small id="username-help">
+                    Enter your username to reset your password.
+                </small>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An advisory text can be defined with the semantic <i>small</i> tag.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="flex flex-column gap-2">
+                    <label htmlFor="username">Username</label>
+                    <InputText id="username" aria-describedby="username-help" />
+                    <small id="username-help">Enter your username to reset your password.</small>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/importdoc.js b/components/doc/inputtext/importdoc.js
new file mode 100644
index 0000000000..75bb0a4059
--- /dev/null
+++ b/components/doc/inputtext/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputText } from 'primereact/inputtext';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/invaliddoc.js b/components/doc/inputtext/invaliddoc.js
new file mode 100644
index 0000000000..f85a9d4f05
--- /dev/null
+++ b/components/doc/inputtext/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<InputText invalid />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputText invalid />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputText invalid />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText invalid />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/keyfilterdoc.js b/components/doc/inputtext/keyfilterdoc.js
new file mode 100644
index 0000000000..c4b1111a67
--- /dev/null
+++ b/components/doc/inputtext/keyfilterdoc.js
@@ -0,0 +1,50 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import Link from 'next/link';
+
+export function KeyFilterDoc(props) {
+    const code = {
+        basic: `
+<InputText keyfilter="int" placeholder="Integers" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function KeyFilterDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputText keyfilter="int" placeholder="Integers" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function KeyFilterDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputText keyfilter="int" placeholder="Integers" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputText has built-in key filtering support to block certain keys, refer to <Link href="http://github.com/keyfilter">keyfilter</Link> page for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputText keyfilter="int" placeholder="Integers" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/pt/wireframe.js b/components/doc/inputtext/pt/wireframe.js
new file mode 100644
index 0000000000..47b4d3b1cb
--- /dev/null
+++ b/components/doc/inputtext/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/inputtext.jpg" alt="inputtext" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inputtext/sizesdoc.js b/components/doc/inputtext/sizesdoc.js
new file mode 100644
index 0000000000..9bb4e8f45f
--- /dev/null
+++ b/components/doc/inputtext/sizesdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function SizesDoc(props) {
+    const code = {
+        basic: `
+<InputText type="text" className="p-inputtext-sm" placeholder="Small" />
+<InputText type="text" placeholder="Normal" />
+<InputText type="text" className="p-inputtext-lg" placeholder="Large" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function SizesDemo() {
+    return (
+        <div className="card flex flex-column align-items-center gap-3 ">
+            <InputText type="text" className="p-inputtext-sm" placeholder="Small" />
+            <InputText type="text" placeholder="Normal" />
+            <InputText type="text" className="p-inputtext-lg" placeholder="Large" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from "primereact/inputtext";
+
+export default function SizesDemo() {
+    return (
+        <div className="card flex flex-column align-items-center gap-3 ">
+            <InputText type="text" className="p-inputtext-sm" placeholder="Small" />
+            <InputText type="text" placeholder="Normal" />
+            <InputText type="text" className="p-inputtext-lg" placeholder="Large" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Apply <i>.p-inputtext-sm</i> to reduce the size of the input element or <i>.p-inputtext-lg</i> to enlarge it.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3 ">
+                <InputText type="text" className="p-inputtext-sm" placeholder="Small" />
+                <InputText type="text" placeholder="Normal" />
+                <InputText type="text" className="p-inputtext-lg" placeholder="Large" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtext/styledoc.js b/components/doc/inputtext/styledoc.js
new file mode 100644
index 0000000000..faf0b5dbc1
--- /dev/null
+++ b/components/doc/inputtext/styledoc.js
@@ -0,0 +1,30 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputtext</td>
+                            <td>Input element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputtext/theming/styleddoc.js b/components/doc/inputtext/theming/styleddoc.js
new file mode 100644
index 0000000000..cd177ce72f
--- /dev/null
+++ b/components/doc/inputtext/theming/styleddoc.js
@@ -0,0 +1,27 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputtext</td>
+                            <td>Input element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputtext/theming/tailwinddoc.js b/components/doc/inputtext/theming/tailwinddoc.js
new file mode 100644
index 0000000000..2409be0049
--- /dev/null
+++ b/components/doc/inputtext/theming/tailwinddoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputtext: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                'm-0',
+                'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg',
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]':
+                        !context.disabled,
+                    'hover:border-blue-500': !props.invalid && !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled,
+                    'border-gray-300 dark:border-blue-900/40': !props.invalid,
+                    'border-red-500 hover:border-red-500/80 focus:border-red-500':
+                        props.invalid && !context.disabled,
+                    'border-red-500/50': props.invalid && context.disabled,
+                },
+                {
+                    'text-lg px-4 py-4': props.size === 'large',
+                    'text-xs px-2 py-2': props.size === 'small',
+                    'p-3 text-base': !props.size || typeof props.size === 'number'
+                },
+                {
+                    'pl-8': context.iconPosition === 'left',
+                    'pr-8': props.iconPosition === 'right'
+                }
+            ),
+        }),
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-center">
+            <InputText value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/accessibilitydoc.js b/components/doc/inputtextarea/accessibilitydoc.js
new file mode 100644
index 0000000000..0a926dcca2
--- /dev/null
+++ b/components/doc/inputtextarea/accessibilitydoc.js
@@ -0,0 +1,48 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="address1">Address 1</label>
+<InputTextarea id="address1" />
+
+<span id="address2">Address 2</span>
+<InputTextarea aria-labelledby="address2" />
+
+<InputTextarea aria-label="Address Details"/>
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                InputTextarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using{' '}
+                <i>aria-labelledby</i>, <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/inputtextarea/autoresizedoc.js b/components/doc/inputtextarea/autoresizedoc.js
new file mode 100644
index 0000000000..7e69a4afed
--- /dev/null
+++ b/components/doc/inputtextarea/autoresizedoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import { useState } from 'react';
+
+export function AutoResizeDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputTextarea autoResize value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function AutoResizeDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea autoResize value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function AutoResizeDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea autoResize value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea autoResize rows={5} cols={30} value={value} onChange={(e) => setValue(e.target.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/basicdoc.js b/components/doc/inputtextarea/basicdoc.js
new file mode 100644
index 0000000000..4f8b2b0a7c
--- /dev/null
+++ b/components/doc/inputtextarea/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputTextarea value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Textarea is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/disableddoc.js b/components/doc/inputtextarea/disableddoc.js
new file mode 100644
index 0000000000..aa3e6a4419
--- /dev/null
+++ b/components/doc/inputtextarea/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<InputTextarea disabled rows={5} cols={30} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea disabled rows={5} cols={30} value="Disabled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea disabled rows={5} cols={30} value="Disabled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea disabled rows={5} cols={30} value="Disabled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/filleddoc.js b/components/doc/inputtextarea/filleddoc.js
new file mode 100644
index 0000000000..b22c2657a1
--- /dev/null
+++ b/components/doc/inputtextarea/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea variant="filled" value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea variant="filled" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/floatlabeldoc.js b/components/doc/inputtextarea/floatlabeldoc.js
new file mode 100644
index 0000000000..af6c74e240
--- /dev/null
+++ b/components/doc/inputtextarea/floatlabeldoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <InputTextarea id="username" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+    <label htmlFor="username">Username</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputTextarea id="description" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+                <label htmlFor="description">Description</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+import { FloatLabel } from "primereact/floatlabel";
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <InputTextarea id="description" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+                <label htmlFor="description">Description</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <InputTextarea id="description" value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+                    <label htmlFor="description">Description</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/importdoc.js b/components/doc/inputtextarea/importdoc.js
new file mode 100644
index 0000000000..747fe0f710
--- /dev/null
+++ b/components/doc/inputtextarea/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputTextarea } from 'primereact/inputtextarea';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/invaliddoc.js b/components/doc/inputtextarea/invaliddoc.js
new file mode 100644
index 0000000000..5782f7dea0
--- /dev/null
+++ b/components/doc/inputtextarea/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<InputTextarea invalid rows={5} cols={30} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea invalid rows={5} cols={30} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea invalid rows={5} cols={30} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea invalid rows={5} cols={30} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/keyfilterdoc.js b/components/doc/inputtextarea/keyfilterdoc.js
new file mode 100644
index 0000000000..6153ace147
--- /dev/null
+++ b/components/doc/inputtextarea/keyfilterdoc.js
@@ -0,0 +1,50 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputTextarea } from '@/components/lib/inputtextarea/InputTextarea';
+import Link from 'next/link';
+
+export function KeyFilterDoc(props) {
+    const code = {
+        basic: `
+<InputTextarea keyfilter="int" placeholder="Integers" rows={5} cols={30} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function KeyFilterDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea keyfilter="int" placeholder="Integers" rows={5} cols={30}/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function KeyFilterDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <InputTextarea keyfilter="int" placeholder="Integers" rows={5} cols={30}/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    InputTextarea has built-in key filtering support to block certain keys, refer to <Link href="http://github.com/keyfilter">keyfilter</Link> page for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <InputTextarea keyfilter="int" placeholder="Integers" rows={5} cols={30} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/pt/wireframe.js b/components/doc/inputtextarea/pt/wireframe.js
new file mode 100644
index 0000000000..f34df6cc9a
--- /dev/null
+++ b/components/doc/inputtextarea/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/inputtextarea.jpg" alt="inputtextarea" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/inputtextarea/styledoc.js b/components/doc/inputtextarea/styledoc.js
new file mode 100644
index 0000000000..e07b161d8c
--- /dev/null
+++ b/components/doc/inputtextarea/styledoc.js
@@ -0,0 +1,30 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputtextarea</td>
+                            <td>Textarea element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/theming/styleddoc.js b/components/doc/inputtextarea/theming/styleddoc.js
new file mode 100644
index 0000000000..90934bd41d
--- /dev/null
+++ b/components/doc/inputtextarea/theming/styleddoc.js
@@ -0,0 +1,27 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-inputtextarea</td>
+                            <td>Textarea element</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/inputtextarea/theming/tailwinddoc.js b/components/doc/inputtextarea/theming/tailwinddoc.js
new file mode 100644
index 0000000000..e0cd265844
--- /dev/null
+++ b/components/doc/inputtextarea/theming/tailwinddoc.js
@@ -0,0 +1,53 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    inputtextarea: {
+        root: ({ context }) => ({
+            className: classNames(
+                'm-0',
+                'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }
+            )
+        })
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { InputTextarea } from "primereact/inputtextarea";
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-center">
+            <InputTextarea value={value} onChange={(e) => setValue(e.target.value)} rows={5} cols={30} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/installation/context.js b/components/doc/installation/context.js
new file mode 100644
index 0000000000..8f639fd99c
--- /dev/null
+++ b/components/doc/installation/context.js
@@ -0,0 +1,42 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ContextDoc(props) {
+    const code = {
+        basic: `
+import { PrimeReactProvider, PrimeReactContext } from 'primereact/api';
+        `
+    };
+
+    const code2 = {
+        basic: `
+// _app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component, pageProps }) {
+    return (
+        <PrimeReactProvider>
+            <Component {...pageProps} />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Configuration is managed by the <i>PrimeReactProvider</i> and <i>PrimeReactContext</i> imported from <i>primereact/api</i>.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+            <div className="doc-section-description">
+                <p>
+                    The <i>PrimeReactProvider</i> component is used to wrap the application and the <i>PrimeReactContext</i> is used to access the configuration options.
+                </p>
+            </div>
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/installation/downloaddoc.js b/components/doc/installation/downloaddoc.js
new file mode 100644
index 0000000000..321f7595ba
--- /dev/null
+++ b/components/doc/installation/downloaddoc.js
@@ -0,0 +1,25 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function DownloadDoc(props) {
+    const code = {
+        basic: `
+// with npm
+npm install primereact
+
+// with yarn
+yarn add primereact
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact is available for download at <a href="https://www.npmjs.com/package/primereact">npm</a>.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/installation/examplesdoc.js b/components/doc/installation/examplesdoc.js
new file mode 100644
index 0000000000..6a583bc530
--- /dev/null
+++ b/components/doc/installation/examplesdoc.js
@@ -0,0 +1,25 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ExamplesDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>We've created various samples for the popular options in the React ecosystem.</p>
+            </DocSectionText>
+            <div className="flex flex-wrap card justify-content-between gap-3">
+                <a href="https://github.com/primefaces/primereact-examples/tree/main/cra-basic">
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/cra.svg" alt="Create React App" className="w-8rem h-8rem" />
+                </a>
+                <a href="https://github.com/primefaces/primereact-examples/tree/main/nextjs-basic">
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/next-js.svg" alt="Next.JS" className="w-8rem h-8rem" />
+                </a>
+                <a href="https://github.com/primefaces/primereact-examples/tree/main/vite-basic-ts">
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/vite.png" alt="Vite" className="w-8rem h-8rem" />
+                </a>
+                <a href="https://github.com/refinedev/refine/tree/master/examples/blog-refine-primereact">
+                    <img src="https://primefaces.org/cdn/primereact/images/logos/refine.svg" alt="Refine" className="w-8rem h-8rem" />
+                </a>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/installation/styleddoc.js b/components/doc/installation/styleddoc.js
new file mode 100644
index 0000000000..dcec89a2d7
--- /dev/null
+++ b/components/doc/installation/styleddoc.js
@@ -0,0 +1,23 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyledModeDoc(props) {
+    const code = {
+        basic: `
+import "primereact/resources/themes/lara-light-cyan/theme.css";
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the <Link href="http://github.com/theming/#themes">Themes</Link> section for
+                    the complete list of available themes to choose from.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/installation/unstyledmodedoc.js b/components/doc/installation/unstyledmodedoc.js
new file mode 100644
index 0000000000..9b8018e6bf
--- /dev/null
+++ b/components/doc/installation/unstyledmodedoc.js
@@ -0,0 +1,29 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function UnstyledModeDoc(props) {
+    const code = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
+...
+return(
+    <PrimeReactProvider value={{ unstyled: true }}>
+        <App />
+    </PrimeReactProvider>
+)
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Unstyled mode is disabled by default for all components. Using the PrimeReactContext during installation, set <i>unstyled</i> as true to enable it globally. Visit the <Link href="http://github.com/unstyled">Unstyled mode</Link> documentation for
+                    more information and examples.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/installation/usagedoc.js b/components/doc/installation/usagedoc.js
new file mode 100644
index 0000000000..b0ae66bba6
--- /dev/null
+++ b/components/doc/installation/usagedoc.js
@@ -0,0 +1,47 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function UsageDoc(props) {
+    const code = {
+        basic: `
+import { Button } from 'primereact/button';                             
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Check" icon="pi pi-check" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Check" icon="pi pi-check" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button label="Check" icon="pi pi-check" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/installation/videos/nextjsdoc.js b/components/doc/installation/videos/nextjsdoc.js
new file mode 100644
index 0000000000..280d2f6dfb
--- /dev/null
+++ b/components/doc/installation/videos/nextjsdoc.js
@@ -0,0 +1,20 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function NextJSDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact has first class support for SSR and{' '}
+                    <a alt="NextJS" href="https://nextjs.org/">
+                        Next.JS
+                    </a>
+                    , in fact this website is also built with Next.js
+                </p>
+            </DocSectionText>
+            <div className="video-container">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/OrRffCobuts" frameBorder="0" allowFullScreen title="Getting Started With NextJs" />
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/keyfilter/accessibilitydoc.js b/components/doc/keyfilter/accessibilitydoc.js
new file mode 100644
index 0000000000..bda51325cc
--- /dev/null
+++ b/components/doc/keyfilter/accessibilitydoc.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <p>
+                Refer to <Link href="http://github.com/inputtext">InputText</Link> for accessibility as KeyFilter is a built-in add-on of the InputText.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/keyfilter/importdoc.js b/components/doc/keyfilter/importdoc.js
new file mode 100644
index 0000000000..75bb0a4059
--- /dev/null
+++ b/components/doc/keyfilter/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { InputText } from 'primereact/inputtext';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/keyfilter/presetsdoc.js b/components/doc/keyfilter/presetsdoc.js
new file mode 100644
index 0000000000..13d519d0d6
--- /dev/null
+++ b/components/doc/keyfilter/presetsdoc.js
@@ -0,0 +1,234 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function PresetsDoc(props) {
+    const code = {
+        basic: `
+<InputText keyfilter="int" />
+<InputText keyfilter="pint" />
+<InputText keyfilter="num" />
+<InputText keyfilter="pnum" />
+<InputText keyfilter="money" />
+<InputText keyfilter="hex" />
+<InputText keyfilter="alpha" />
+<InputText keyfilter="alphanum" />
+<InputText keyfilter="email" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function PresetsDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3 mb-4">
+                <div className="flex-auto">
+                    <label htmlFor="integer" className="font-bold block mb-2">
+                        Integer
+                    </label>
+                    <InputText id="integer" keyfilter="int" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="number" className="font-bold block mb-2">
+                        Number
+                    </label>
+                    <InputText id="number" keyfilter="num" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="money" className="font-bold block mb-2">
+                        Money
+                    </label>
+                    <InputText id="money" keyfilter="money" className="w-full" />
+                </div>
+            </div>
+            <div className="flex flex-wrap gap-3 mb-4">
+                <div className="flex-auto">
+                    <label htmlFor="hex" className="font-bold block mb-2">
+                        Hex
+                    </label>
+                    <InputText id="hex" keyfilter="hex" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="alphabetic" className="font-bold block mb-2">
+                        Alphabetic
+                    </label>
+                    <InputText id="alphabetic" keyfilter="alpha" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="alphanumeric" className="font-bold block mb-2">
+                        Alphanumeric
+                    </label>
+                    <InputText id="alphanumeric" keyfilter="alphanum" className="w-full" />
+                </div>
+            </div>
+            <div className="flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <label htmlFor="pint" className="font-bold block mb-2">
+                            Positive Integer
+                    </label>
+                    <InputText id="pint" keyfilter="pint" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="pnum" className="font-bold block mb-2">
+                            Positive Number
+                    </label>
+                    <InputText id="pnum" keyfilter="pnum" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="email" className="font-bold block mb-2">
+                            Email
+                    </label>
+                    <InputText id="email" keyfilter="email" className="w-full" />
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function PresetsDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap gap-3 mb-4">
+                <div className="flex-auto">
+                    <label htmlFor="integer" className="font-bold block mb-2">
+                        Integer
+                    </label>
+                    <InputText id="integer" keyfilter="int" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="number" className="font-bold block mb-2">
+                        Number
+                    </label>
+                    <InputText id="number" keyfilter="num" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="money" className="font-bold block mb-2">
+                        Money
+                    </label>
+                    <InputText id="money" keyfilter="money" className="w-full" />
+                </div>
+            </div>
+            <div className="flex flex-wrap gap-3 mb-4">
+                <div className="flex-auto">
+                    <label htmlFor="hex" className="font-bold block mb-2">
+                        Hex
+                    </label>
+                    <InputText id="hex" keyfilter="hex" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="alphabetic" className="font-bold block mb-2">
+                        Alphabetic
+                    </label>
+                    <InputText id="alphabetic" keyfilter="alpha" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="alphanumeric" className="font-bold block mb-2">
+                        Alphanumeric
+                    </label>
+                    <InputText id="alphanumeric" keyfilter="alphanum" className="w-full" />
+                </div>
+            </div>
+            <div className="flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <label htmlFor="pint" className="font-bold block mb-2">
+                            Positive Integer
+                    </label>
+                    <InputText id="pint" keyfilter="pint" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="pnum" className="font-bold block mb-2">
+                            Positive Number
+                    </label>
+                    <InputText id="pnum" keyfilter="pnum" className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="email" className="font-bold block mb-2">
+                            Email
+                    </label>
+                    <InputText id="email" keyfilter="email" className="w-full" />
+                </div>
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    KeyFilter provides various presets configured with the <i>keyfilter</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap gap-3 mb-4">
+                    <div className="flex-auto">
+                        <label htmlFor="integer" className="font-bold block mb-2">
+                            Integer
+                        </label>
+                        <InputText id="integer" keyfilter="int" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="number" className="font-bold block mb-2">
+                            Number
+                        </label>
+                        <InputText id="number" keyfilter="num" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="money" className="font-bold block mb-2">
+                            Money
+                        </label>
+                        <InputText id="money" keyfilter="money" className="w-full" />
+                    </div>
+                </div>
+                <div className="flex flex-wrap gap-3 mb-4">
+                    <div className="flex-auto">
+                        <label htmlFor="hex" className="font-bold block mb-2">
+                            Hex
+                        </label>
+                        <InputText id="hex" keyfilter="hex" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="alphabetic" className="font-bold block mb-2">
+                            Alphabetic
+                        </label>
+                        <InputText id="alphabetic" keyfilter="alpha" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="alphanumeric" className="font-bold block mb-2">
+                            Alphanumeric
+                        </label>
+                        <InputText id="alphanumeric" keyfilter="alphanum" className="w-full" />
+                    </div>
+                </div>
+                <div className="flex flex-wrap gap-3">
+                    <div className="flex-auto">
+                        <label htmlFor="pint" className="font-bold block mb-2">
+                            Positive Integer
+                        </label>
+                        <InputText id="pint" keyfilter="pint" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="pnum" className="font-bold block mb-2">
+                            Positive Number
+                        </label>
+                        <InputText id="pnum" keyfilter="pnum" className="w-full" />
+                    </div>
+                    <div className="flex-auto">
+                        <label htmlFor="email" className="font-bold block mb-2">
+                            Email
+                        </label>
+                        <InputText id="email" keyfilter="email" className="w-full" />
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/keyfilter/regexdoc.js b/components/doc/keyfilter/regexdoc.js
new file mode 100644
index 0000000000..cc5f965757
--- /dev/null
+++ b/components/doc/keyfilter/regexdoc.js
@@ -0,0 +1,81 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function RegexDoc(props) {
+    const code = {
+        basic: `
+<InputText keyfilter={/[^\s]/} />
+<InputText keyfilter={/^[^<>*!]+$/}  />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function RegexDemo() {
+    return (
+        <div className="card flex flex-wrap gap-3">
+            <div className="flex-auto">
+                <label htmlFor="spacekey" className="font-bold block mb-2">
+                    Block Space
+                </label>
+                <InputText id="spacekey" keyfilter={/[^\\s]/} className="w-full" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="chars" className="font-bold block mb-2">
+                    Block {\`< > * !\`}
+                </label>
+                <InputText id="chars" keyfilter={/^[^<>*!]+$/} className="w-full" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function RegexDemo() {
+    return (
+        <div className="card flex flex-wrap gap-3">
+            <div className="flex-auto">
+                <label htmlFor="spacekey" className="font-bold block mb-2">
+                    Block Space
+                </label>
+                <InputText id="spacekey" keyfilter={/[^\\s]/} className="w-full" />
+            </div>
+            <div className="flex-auto">
+                <label htmlFor="chars" className="font-bold block mb-2">
+                    Block {\`< > * !\`}
+                </label>
+                <InputText id="chars" keyfilter={/^[^<>*!]+$/} className="w-full" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>In addition to the presets, a regular expression can be configured for customization of blocking a single key press.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-3">
+                <div className="flex-auto">
+                    <label htmlFor="spacekey" className="font-bold block mb-2">
+                        Block Space
+                    </label>
+                    <InputText id="spacekey" keyfilter={/[^\s]/} className="w-full" />
+                </div>
+                <div className="flex-auto">
+                    <label htmlFor="chars" className="font-bold block mb-2">
+                        Block {'< > * !'}
+                    </label>
+                    <InputText id="chars" keyfilter={/^[^<>*!]+$/} className="w-full" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/keyfilter/regexworddoc.js b/components/doc/keyfilter/regexworddoc.js
new file mode 100644
index 0000000000..686e94f528
--- /dev/null
+++ b/components/doc/keyfilter/regexworddoc.js
@@ -0,0 +1,134 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { useState } from 'react';
+
+export function RegexWordDoc(props) {
+    const [prevValue, setPrevValue] = useState('');
+
+    const validateInput = (event, validated) => {
+        const target = event.target;
+
+        // validated is the result of the regex against the whole input string
+        if (validated) {
+            if (target.value.length > 0) {
+                setPrevValue(target.value);
+            }
+
+            // key was OK so do nothing
+            return;
+        }
+
+        // key made the whole input not valid so block this key
+        //  Compare current value with previous value
+        if (target.value.length > 0) {
+            // Set previous valid value
+            target.value = prevValue;
+        }
+    };
+
+    const code = {
+        basic: `
+<InputText id="numkeys" keyfilter={/^[+]?(\\d{1,12})?$/} validateOnly onInput={validateInput} />
+        `,
+        javascript: `
+import React, { useState }  from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function RegexDemo() {
+    const [prevValue, setPrevValue] = useState('');
+
+    const validateInput = (event, validatePattern) => {
+        const target = event.target;
+
+        // validatePattern is the result of the regex against the whole input string
+        if (validatePattern) {
+            if (target.value.length > 0) {
+                setPrevValue(target.value);
+            }
+
+            // key was OK so do nothing
+            return;
+        }
+
+        // key made the whole input not valid so block this key
+        //  Compare current value with previous value
+        if (target.value.length > 0) {
+            // Set previous valid value
+            target.value = prevValue;
+        }
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <div>
+                <label htmlFor="numkeys" className="font-bold block mb-2">
+                    Block Numeric (allow "+" only once at start)
+                </label>
+                <InputText id="numkeys" keyfilter={/^[+]?(\\d{1,12})?$/} validateOnly onInput={validateInput} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState }  from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function RegexDemo() {
+    const [prevValue, setPrevValue] = useState('');
+
+    const validateInput = (event: React.FormEvent<HTMLInputElement>, validatePattern: boolean) => {
+        const target = event.target as HTMLInputElement;
+
+        // validated is the result of the regex against the whole input string
+        if (validatePattern) {
+            if (target.value.length > 0) {
+                setPrevValue(target.value);
+            }
+
+        // key was OK so do nothing
+        return;
+        }
+
+        // key made the whole input not valid so block this key
+        //  Compare current value with previous value
+        if (target.value.length > 0) {
+            // Set previous valid value
+            target.value = prevValue;
+        }
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <div>
+                <label htmlFor="numkeys" className="font-bold block mb-2">
+                    Block Numeric (allow "+" only once at start)
+                </label>
+                <InputText id="numkeys" keyfilter={/^[+]?(\\d{1,12})?$/} validateOnly onInput={validateInput} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    In addition to the presets, a regular expression can be used to validate the entire word using <i>validateOnly</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div>
+                    <label htmlFor="numkeys" className="font-bold block mb-2">
+                        Numeric (allow "+" only once at start)
+                    </label>
+                    <InputText id="numkeys" keyfilter={/^[+]?(\d{1,12})?$/} validateOnly onInput={validateInput} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/accessibilitydoc.js b/components/doc/knob/accessibilitydoc.js
new file mode 100644
index 0000000000..88b0dce489
--- /dev/null
+++ b/components/doc/knob/accessibilitydoc.js
@@ -0,0 +1,90 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="firstname">Firstname</label>
+<InputText id="firstname" />
+
+<span id="lastname">Lastname</span>
+<InputText aria-labelledby="lastname" />
+
+<InputText aria-label="Age"/>
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using
+                <i>aria-labelledby</i> and <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the slider.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">left arrow</i>
+                                    <i>down arrow</i>
+                                </span>
+                            </td>
+                            <td>Decrements the value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">right arrow</i>
+                                    <i>up arrow</i>
+                                </span>
+                            </td>
+                            <td>Increments the value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Set the minimum value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Set the maximum value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>page up</i>
+                            </td>
+                            <td>Increments the value by 10 steps.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>page down</i>
+                            </td>
+                            <td>Decrements the value by 10 steps.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/knob/basicdoc.js b/components/doc/knob/basicdoc.js
new file mode 100644
index 0000000000..166b287783
--- /dev/null
+++ b/components/doc/knob/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState(0);
+
+    const code = {
+        basic: `
+<Knob value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Knob } from 'primereact/knob';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Knob, KnobChangeEvent } from 'primereact/knob';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<number>(0);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e: KnobChangeEvent) => setValue(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Knob is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/colordoc.js b/components/doc/knob/colordoc.js
new file mode 100644
index 0000000000..f38b6cbed1
--- /dev/null
+++ b/components/doc/knob/colordoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function ColorDoc(props) {
+    const [value, setValue] = useState(75);
+
+    const code = {
+        basic: `
+<Knob value={value} onChange={(e) => setValue(e.value)} valueColor="#708090" rangeColor="#48d1cc" />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function ColorDemo() {
+    const [value, setValue] = useState(75);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e) => setValue(e.value)} valueColor="#708090" rangeColor="#48d1cc" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Knob, KnobChangeEvent } from 'primereact/knob';
+
+export default function ColorDemo() {
+    const [value, setValue] = useState<number>(75);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e : KnobChangeEvent) => setValue(e.value)} valueColor="#708090" rangeColor="#48d1cc" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Colors are customized with the <i>textColor</i>, <i>rangeColor</i> and <i>valueColor</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={value} onChange={(e) => setValue(e.value)} valueColor="#708090" rangeColor="#48d1cc" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/disableddoc.js b/components/doc/knob/disableddoc.js
new file mode 100644
index 0000000000..fdbefe9447
--- /dev/null
+++ b/components/doc/knob/disableddoc.js
@@ -0,0 +1,52 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function DisabledDoc(props) {
+    const [value, setValue] = useState(75);
+
+    const code = {
+        basic: `
+<Knob value={50} disabled />
+        `,
+        javascript: `
+import React from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function DisabledDoc() {
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={50} disabled />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function DisabledDoc() {
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={50} disabled />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={50} disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/importdoc.js b/components/doc/knob/importdoc.js
new file mode 100644
index 0000000000..7d966656af
--- /dev/null
+++ b/components/doc/knob/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Knob } from 'primereact/knob';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/knob/minmaxdoc.js b/components/doc/knob/minmaxdoc.js
new file mode 100644
index 0000000000..da17e4325d
--- /dev/null
+++ b/components/doc/knob/minmaxdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function MinMaxDoc(props) {
+    const [value, setValue] = useState(10);
+
+    const code = {
+        basic: `
+<Knob value={value} onChange={(e) => setValue(e.value)} min={-50} max={50} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function MinMaxDemo() {
+    const [value, setValue] = useState(10);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e) =>  setValue(e.value)} min={-50} max={50} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Knob, KnobChangeEvent } from 'primereact/knob';
+
+export default function MinMaxDemo() {
+    const [value, setValue] = useState<number>(10);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e : KnobChangeEvent) => setValue(e.value)} min={-50} max={50} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Boundaries are configured with the <i>min</i> and <i>max</i> properties whose defaults are 0 and 100 respectively.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={value} onChange={(e) => setValue(e.value)} min={-50} max={50} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/pt/wireframe.js b/components/doc/knob/pt/wireframe.js
new file mode 100644
index 0000000000..a448fdb5e0
--- /dev/null
+++ b/components/doc/knob/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/knob.jpg" alt="knob" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/knob/reactivedoc.js b/components/doc/knob/reactivedoc.js
new file mode 100644
index 0000000000..94c56ed305
--- /dev/null
+++ b/components/doc/knob/reactivedoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function ReactiveDoc(props) {
+    const [value, setValue] = useState(0);
+
+    const code = {
+        basic: `
+<Knob value={value} size={150} />
+<Button icon="pi pi-plus" onClick={() => setValue(value + 1)} disabled={value === 100} />
+<Button icon="pi pi-minus" onClick={() => setValue(value - 1)} disabled={value === 0} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+import { Button } from 'primereact/button';
+
+export default function ReactiveDemo() {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-2">
+            <Knob value={value} size={150} />
+            <div className="flex gap-2">
+                <Button icon="pi pi-plus" onClick={() => setValue(value + 1)} disabled={value === 100} />
+                <Button icon="pi pi-minus" onClick={() => setValue(value - 1)} disabled={value === 0} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+import { Button } from 'primereact/button';
+
+export default function ReactiveDemo() {
+    const [value, setValue] = useState<number>(0);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-2">
+            <Knob value={value} size={150} />
+            <div className="flex gap-2">
+                <Button icon="pi pi-plus" onClick={() => setValue(value + 1)} disabled={value === 100} />
+                <Button icon="pi pi-minus" onClick={() => setValue(value - 1)} disabled={value === 0} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Knob can be controlled with custom controls as well.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-2">
+                <Knob value={value} size={150} />
+                <div className="flex gap-2">
+                    <Button icon="pi pi-plus" onClick={() => setValue(value + 1)} disabled={value === 100} />
+                    <Button icon="pi pi-minus" onClick={() => setValue(value - 1)} disabled={value === 0} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/readonlydoc.js b/components/doc/knob/readonlydoc.js
new file mode 100644
index 0000000000..445d661845
--- /dev/null
+++ b/components/doc/knob/readonlydoc.js
@@ -0,0 +1,52 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function ReadOnlyDoc(props) {
+    const [value, setValue] = useState(50);
+
+    const code = {
+        basic: `
+<Knob value={50} readOnly />
+        `,
+        javascript: `
+import React from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={50} readOnly />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={50} readOnly />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>readOnly</i> present, value cannot be edited.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={50} readOnly />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/sizedoc.js b/components/doc/knob/sizedoc.js
new file mode 100644
index 0000000000..6c299b47e5
--- /dev/null
+++ b/components/doc/knob/sizedoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function SizeDoc(props) {
+    const [value, setValue] = useState(60);
+
+    const code = {
+        basic: `
+<Knob value={value} onChange={(e) => setValue(e.value)} size={200} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function SizeDemo() {
+    const [value, setValue] = useState(60);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e) => setValue(e.value)} size={200} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Knob, KnobChangeEvent } from 'primereact/knob';
+
+export default function SizeDemo() {
+    const [value, setValue] = useState<number>(60);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e : KnobChangeEvent) => setValue(e.value)} size={200} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Diameter of the knob is defined in pixels using the <i>size</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={value} onChange={(e) => setValue(e.value)} size={200} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/stepdoc.js b/components/doc/knob/stepdoc.js
new file mode 100644
index 0000000000..c0ff5b5816
--- /dev/null
+++ b/components/doc/knob/stepdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function StepDoc(props) {
+    const [value, setValue] = useState(10);
+
+    const code = {
+        basic: `
+<Knob value={value} step={10} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function StepDemo() {
+    const [value, setValue] = useState(10);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} step={10} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Knob, KnobChangeEvent } from 'primereact/knob';
+
+export default function StepDemo() {
+    const [value, setValue] = useState<number>(10);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} step={10} onChange={(e : KnobChangeEvent) => setValue(e.value)}  />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Size of each movement is defined with the <i>step</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={value} step={10} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/strokedoc.js b/components/doc/knob/strokedoc.js
new file mode 100644
index 0000000000..11a2fe0e79
--- /dev/null
+++ b/components/doc/knob/strokedoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function StrokeDoc(props) {
+    const [value, setValue] = useState(40);
+
+    const code = {
+        basic: `
+<Knob value={value} onChange={(e) => setValue(e.value)} strokeWidth={5} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function StrokeDemo() {
+    const [value, setValue] = useState(40);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} strokeWidth={5} onChange={(e) => setValue(e.value)} strokeWidth={5} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Knob, KnobChangeEvent } from 'primereact/knob';
+
+export default function StrokeDemo() {
+    const [value, setValue] = useState<number>(40);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e : KnobChangeEvent) => setValue(e.value)} strokeWidth={5} />
+        </div>
+
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The border size is specified with the <i>stroke</i> property as a number in pixels.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={value} onChange={(e) => setValue(e.value)} strokeWidth={5} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/styledoc.js b/components/doc/knob/styledoc.js
new file mode 100644
index 0000000000..6f53112f8f
--- /dev/null
+++ b/components/doc/knob/styledoc.js
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-knob</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-knob-range</td>
+                            <td>Range element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-knob-value</td>
+                            <td>Value element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-knob-text</td>
+                            <td>Text element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/knob/templatedoc.js b/components/doc/knob/templatedoc.js
new file mode 100644
index 0000000000..cad1ce4a36
--- /dev/null
+++ b/components/doc/knob/templatedoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Knob } from '@/components/lib/knob/Knob';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [value, setValue] = useState(60);
+
+    const code = {
+        basic: `
+<Knob value={value} onChange={(e) => setValue(e.value)} valueTemplate={'{value}%'} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Knob } from 'primereact/knob';
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState(60);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e) => setValue(e.value)} valueTemplate={'{value}%'} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Knob, KnobChangeEvent } from 'primereact/knob';
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState<number>(60);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Knob value={value} onChange={(e : KnobChangeEvent) => setValue(e.value)} valueTemplate={"{value}%"} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Label is a string template that can be customized with the <i>valueTemplate</i> property having <i>{value}</i> as the placeholder .
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Knob value={value} onChange={(e) => setValue(e.value)} valueTemplate={'{value}%'} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/knob/theming/styleddoc.js b/components/doc/knob/theming/styleddoc.js
new file mode 100644
index 0000000000..f5a042a84e
--- /dev/null
+++ b/components/doc/knob/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-knob</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-knob-range</td>
+                            <td>Range element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-knob-value</td>
+                            <td>Value element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-knob-text</td>
+                            <td>Text element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/knob/theming/tailwinddoc.js b/components/doc/knob/theming/tailwinddoc.js
new file mode 100644
index 0000000000..70d6e868a6
--- /dev/null
+++ b/components/doc/knob/theming/tailwinddoc.js
@@ -0,0 +1,53 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    knob: {
+        root: ({ props }) => ({
+            className: classNames('focus:outline-none focus:outline-offset-0 focus:shadow-0', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        range: 'stroke-current transition duration-100 ease-in stroke-gray-200 dark:stroke-gray-700 fill-none',
+        value: 'animate-dash-frame  stroke-blue-500 fill-none',
+        label: 'text-center text-xl'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Knob } from 'primereact/knob';
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState(0);
+
+    return (
+        <div className="card flex justify-center">
+            <Knob value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/listbox/accessibilitydoc.js b/components/doc/listbox/accessibilitydoc.js
new file mode 100644
index 0000000000..4ca69b769d
--- /dev/null
+++ b/components/doc/listbox/accessibilitydoc.js
@@ -0,0 +1,120 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="lb">Options</span>
+<ListBox aria-labelledby="lb" />
+
+<ListBox aria-label="City" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can be provided <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute that sets to true when multiple selection is
+                enabled. Each list item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
+            </p>
+            <p>
+                If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the selected state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the selected state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>space</i>
+                            </td>
+                            <td>Selects the items between the most recently selected option and the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>home</i>
+                            </td>
+                            <td>Selects the focused options and all the options up to the first one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>end</i>
+                            </td>
+                            <td>Selects the focused options and all the options down to the last one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>a</i>
+                            </td>
+                            <td>Selects all options.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/listbox/basicdoc.js b/components/doc/listbox/basicdoc.js
new file mode 100644
index 0000000000..016aa777f8
--- /dev/null
+++ b/components/doc/listbox/basicdoc.js
@@ -0,0 +1,84 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
+
+interface City {
+    name: string;
+    code: string;
+} 
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox value={selectedCity} onChange={(e: ListBoxChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ListBox is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i>{' '}
+                    properties respectively. Default property name for the <i>optionLabel</i> is <i>label</i> and <i>value</i> for the <i>optionValue</i>. If <i>optionValue</i> is omitted and the object has no <i>value</i> property, the object itself
+                    becomes the value of an option. Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/listbox/disableddoc.js b/components/doc/listbox/disableddoc.js
new file mode 100644
index 0000000000..d628821be9
--- /dev/null
+++ b/components/doc/listbox/disableddoc.js
@@ -0,0 +1,78 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+
+export function DisabledDoc(props) {
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<ListBox disabled options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function DisabledDemo() {
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox disabled options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { ListBox } from 'primereact/listbox';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function DisabledDemo() {
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox disabled options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox disabled options={cities} optionLabel="name" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/listbox/filterdoc.js b/components/doc/listbox/filterdoc.js
new file mode 100644
index 0000000000..3a491b77ef
--- /dev/null
+++ b/components/doc/listbox/filterdoc.js
@@ -0,0 +1,82 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+import { useState } from 'react';
+
+export function FilterDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<ListBox filter value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox filter value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
+
+interface City {
+    name: string;
+    code: string;
+} 
+
+export default function BasicDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox filter value={selectedCity} onChange={(e: ListBoxChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ListBox provides built-in filtering that is enabled by adding the <i>filter</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox filter value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/listbox/groupdoc.js b/components/doc/listbox/groupdoc.js
new file mode 100644
index 0000000000..80f92234b9
--- /dev/null
+++ b/components/doc/listbox/groupdoc.js
@@ -0,0 +1,204 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+import { useState } from 'react';
+
+export function GroupDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={groupedCities} optionLabel="label" 
+    optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupTemplate} className="w-full md:w-14rem" listStyle={{ maxHeight: '250px' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function GroupDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupTemplate = (option) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={groupedCities} optionLabel="label" 
+                optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupTemplate} className="w-full md:w-14rem" listStyle={{ maxHeight: '250px' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
+
+interface City {
+    label: string;
+    value: string;
+} 
+
+interface Country {
+    label: string;
+    code: string;
+    items: City[];
+}
+
+export default function GroupDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const groupedCities: Country[] = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupTemplate = (option: City) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }}/>
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox value={selectedCity} onChange={(e: ListBoxChangeEvent) => setSelectedCity(e.value)} options={groupedCities} optionLabel="label" 
+                optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupTemplate} className="w-full md:w-14rem" listStyle={{ maxHeight: '250px' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the
+                    children of a group.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox
+                    value={selectedCity}
+                    onChange={(e) => setSelectedCity(e.value)}
+                    options={groupedCities}
+                    optionLabel="label"
+                    optionGroupLabel="label"
+                    optionGroupChildren="items"
+                    optionGroupTemplate={groupTemplate}
+                    className="w-full md:w-14rem"
+                    listStyle={{ maxHeight: '250px' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/listbox/importdoc.js b/components/doc/listbox/importdoc.js
new file mode 100644
index 0000000000..4bd1acb0c1
--- /dev/null
+++ b/components/doc/listbox/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ListBox } from 'primereact/listbox';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/listbox/invaliddoc.js b/components/doc/listbox/invaliddoc.js
new file mode 100644
index 0000000000..e077306e8d
--- /dev/null
+++ b/components/doc/listbox/invaliddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<ListBox invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+    className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function InvalidDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" 
+                className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
+
+interface City {
+    name: string;
+    code: string;
+} 
+
+export default function InvalidDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox invalid value={selectedCity} onChange={(e: ListBoxChangeEvent) => setSelectedCity(e.value)} 
+                options={cities} optionLabel="name"  className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox invalid value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/listbox/multipledoc.js b/components/doc/listbox/multipledoc.js
new file mode 100644
index 0000000000..7a9eaf7289
--- /dev/null
+++ b/components/doc/listbox/multipledoc.js
@@ -0,0 +1,83 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+import { useState } from 'react';
+
+export function MultipleDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<ListBox multiple value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function MultipleDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox multiple value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
+
+interface City {
+    name: string;
+    code: string;
+} 
+
+export default function MultipleDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">  
+            <ListBox multiple value={selectedCities} onChange={(e: ListBoxChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ListBox allows choosing a single item by default, enable <i>multiple</i> property to choose more than one. When the optional <i>metaKeySelection</i> is present, behavior is changed in a way that selecting a new item requires meta
+                    key to be present.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox multiple value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/listbox/pt/wireframe.js b/components/doc/listbox/pt/wireframe.js
new file mode 100644
index 0000000000..985f56f54c
--- /dev/null
+++ b/components/doc/listbox/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/listbox.jpg" alt="listbox" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/listbox/styledoc.js b/components/doc/listbox/styledoc.js
new file mode 100644
index 0000000000..2065f4b732
--- /dev/null
+++ b/components/doc/listbox/styledoc.js
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-listbox</td>
+                            <td>Main container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-header</td>
+                            <td>Header element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-list-wrapper</td>
+                            <td>Container of list element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-item</td>
+                            <td>An item in the list element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/listbox/templatedoc.js b/components/doc/listbox/templatedoc.js
new file mode 100644
index 0000000000..ced56d5169
--- /dev/null
+++ b/components/doc/listbox/templatedoc.js
@@ -0,0 +1,127 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const countryTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${option.code.toLowerCase()}`} style={{ width: '1.25rem', marginRight: '.5rem' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<ListBox value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" 
+    itemTemplate={countryTemplate} className="w-full md:w-14rem" listStyle={{ maxHeight: '250px' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function TemplateDemo() {
+    const [selectedCountry, setSelectedCountry] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const countryTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${option.code.toLowerCase()}\`} style={{ width: '1.25rem', marginRight: '.5rem' }}/>
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" 
+                itemTemplate={countryTemplate} className="w-full md:w-14rem" listStyle={{ maxHeight: '250px' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+export default function TemplateDemo() {
+    const [selectedCountries, setSelectedCountries] = useState<Country | null>(null);
+    const countries: Country[] = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const countryTemplate = (option: Country) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`flag flag-\${option.code.toLowerCase()}\`} style={{ width: '1.25rem', marginRight: '.5rem' }}/>
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox value={selectedCountry} onChange={(e: ListBoxChangeEvent) => setSelectedCountry(e.value)} options={countries} optionLabel="name" 
+                itemTemplate={countryTemplate} className="w-full md:w-14rem" listStyle={{ maxHeight: '250px' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content for an option is displayed with the <i>itemTemplate</i> property that takes an option as a parameter. Additional available templating sections are <i>filterTemplate</i> and <i>optionGroupTemplate</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" itemTemplate={countryTemplate} className="w-full md:w-14rem" listStyle={{ maxHeight: '250px' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/listbox/theming/styleddoc.js b/components/doc/listbox/theming/styleddoc.js
new file mode 100644
index 0000000000..81e7aff59a
--- /dev/null
+++ b/components/doc/listbox/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-listbox</td>
+                            <td>Main container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-header</td>
+                            <td>Header element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-list-wrapper</td>
+                            <td>Container of list element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-listbox-item</td>
+                            <td>An item in the list element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/listbox/theming/tailwinddoc.js b/components/doc/listbox/theming/tailwinddoc.js
new file mode 100644
index 0000000000..2669e3f0d2
--- /dev/null
+++ b/components/doc/listbox/theming/tailwinddoc.js
@@ -0,0 +1,84 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    listbox: {
+        root: {
+            className: classNames('bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56')
+        },
+        wrapper: 'overflow-auto',
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+            })
+        }),
+        itemGroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        header: {
+            className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40')
+        },
+        filterContainer: 'relative',
+        filterInput: {
+            root: {
+                className: classNames(
+                    'pr-7 -mr-7',
+                    'w-full',
+                    'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+                )
+            }
+        },
+        filterIcon: '-mt-2 absolute top-1/2'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function UnstyledDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-center">  
+            <ListBox value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full md:w-14rem" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/listbox/virtualscrolldoc.js b/components/doc/listbox/virtualscrolldoc.js
new file mode 100644
index 0000000000..587f467c5f
--- /dev/null
+++ b/components/doc/listbox/virtualscrolldoc.js
@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ListBox } from '@/components/lib/listbox/ListBox';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function VirtualScrollDoc(props) {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const items = Array.from({ length: 100000 }).map((_, i) => ({ label: `Item #${i}`, value: i }));
+
+    const code = {
+        basic: `
+<ListBox value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} 
+    virtualScrollerOptions={{ itemSize: 38 }} className="w-full md:w-14rem" listStyle={{ height: '250px' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ListBox } from 'primereact/listbox';
+
+export default function VirtualScrollDemo() {
+    const [selectedItem, setSelectedItem] = useState(null);
+    const items = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} 
+                virtualScrollerOptions={{ itemSize: 38 }} className="w-full md:w-14rem" listStyle={{ height: '250px' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ListBox, ListBoxChangeEvent } from 'primereact/listbox';
+
+interface Item {
+    label: string;
+    value: number;
+}
+
+export default function VirtualScrollDemo() {
+    const [selectedItem, setSelectedItem] = useState<Item | null>(null);
+    const items: Item[] = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
+
+    return (
+        <div className="card flex justify-content-center">
+            <ListBox value={selectedItem} onChange={(e: ListBoxChangeEvent) => setSelectedItem(e.value)} options={items} 
+                virtualScrollerOptions={{ itemSize: 38 }} className="w-full md:w-14rem" listStyle={{ height: '250px' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the{' '}
+                    <Link href="http://github.com/virtualscroller">VirtualScroller</Link> for more information about the available options as it is used internally by ListBox.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ListBox value={selectedItem} onChange={(e) => setSelectedItem(e.value)} options={items} virtualScrollerOptions={{ itemSize: 38 }} className="w-full md:w-14rem" listStyle={{ height: '250px' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/megamenu/accessibilitydoc.js b/components/doc/megamenu/accessibilitydoc.js
new file mode 100644
index 0000000000..dc05c16aba
--- /dev/null
+++ b/components/doc/megamenu/accessibilitydoc.js
@@ -0,0 +1,95 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                MegaMenu component uses the <i>menubar</i> role along with <i>aria-orientation</i> and the value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a{' '}
+                <i>presentation</i> role whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MegaMenu uses the{' '}
+                <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define
+                the relation between the item and the submenu.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last menuitem within the submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/megamenu/basicdoc.js b/components/doc/megamenu/basicdoc.js
new file mode 100644
index 0000000000..a2452b31d4
--- /dev/null
+++ b/components/doc/megamenu/basicdoc.js
@@ -0,0 +1,341 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MegaMenu } from '@/components/lib/megamenu/MegaMenu';
+
+export function BasicDoc(props) {
+    const items = [
+        {
+            label: 'Furniture',
+            icon: 'pi pi-box',
+            items: [
+                [
+                    {
+                        label: 'Living Room',
+                        items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Kitchen',
+                        items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                    },
+                    {
+                        label: 'Bathroom',
+                        items: [{ label: 'Accessories' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Bedroom',
+                        items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Office',
+                        items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Electronics',
+            icon: 'pi pi-mobile',
+            items: [
+                [
+                    {
+                        label: 'Computer',
+                        items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Home Theather',
+                        items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Gaming',
+                        items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Appliances',
+                        items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Sports',
+            icon: 'pi pi-clock',
+            items: [
+                [
+                    {
+                        label: 'Football',
+                        items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Running',
+                        items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Swimming',
+                        items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Tennis',
+                        items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                    }
+                ]
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<MegaMenu model={items}  breakpoint="960px" />
+`,
+        javascript: `
+import React from 'react';
+import { MegaMenu } from 'primereact/megamenu';
+
+export default function BasicDemo() {
+    const items = [
+        {
+            label: 'Furniture',
+            icon: 'pi pi-box',
+            items: [
+                [
+                    {
+                        label: 'Living Room',
+                        items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Kitchen',
+                        items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                    },
+                    {
+                        label: 'Bathroom',
+                        items: [{ label: 'Accessories' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Bedroom',
+                        items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Office',
+                        items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Electronics',
+            icon: 'pi pi-mobile',
+            items: [
+                [
+                    {
+                        label: 'Computer',
+                        items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Home Theather',
+                        items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Gaming',
+                        items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Appliances',
+                        items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Sports',
+            icon: 'pi pi-clock',
+            items: [
+                [
+                    {
+                        label: 'Football',
+                        items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Running',
+                        items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Swimming',
+                        items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Tennis',
+                        items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                    }
+                ]
+            ]
+        }
+    ];
+
+    return (
+        <div className="card">
+            <MegaMenu model={items} breakpoint="960px" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { MegaMenu } from 'primereact/megamenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Furniture',
+            icon: 'pi pi-box',
+            items: [
+                [
+                    {
+                        label: 'Living Room',
+                        items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Kitchen',
+                        items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                    },
+                    {
+                        label: 'Bathroom',
+                        items: [{ label: 'Accessories' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Bedroom',
+                        items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Office',
+                        items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Electronics',
+            icon: 'pi pi-mobile',
+            items: [
+                [
+                    {
+                        label: 'Computer',
+                        items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Home Theather',
+                        items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Gaming',
+                        items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Appliances',
+                        items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Sports',
+            icon: 'pi pi-clock',
+            items: [
+                [
+                    {
+                        label: 'Football',
+                        items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Running',
+                        items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Swimming',
+                        items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Tennis',
+                        items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                    }
+                ]
+            ]
+        }
+    ];
+
+    return (
+        <div className="card">
+            <MegaMenu model={items} breakpoint="960px" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MegaMenu requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MegaMenu model={items} breakpoint="960px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/megamenu/commanddoc.js b/components/doc/megamenu/commanddoc.js
new file mode 100644
index 0000000000..75b52fb07e
--- /dev/null
+++ b/components/doc/megamenu/commanddoc.js
@@ -0,0 +1,27 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function CommandDoc(props) {
+    const code = {
+        basic: `
+{
+    label: 'Log out',
+    icon: 'pi pi-signout',
+    command: () => {
+        // Callback to run
+    }
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>command</i> property of a menuitem defines the callback to run when an item is activated by click or a key event.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/megamenu/importdoc.js b/components/doc/megamenu/importdoc.js
new file mode 100644
index 0000000000..fb6e78e212
--- /dev/null
+++ b/components/doc/megamenu/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { MegaMenu } from 'primereact/megamenu';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/megamenu/pt/wireframe.js b/components/doc/megamenu/pt/wireframe.js
new file mode 100644
index 0000000000..446010f1a4
--- /dev/null
+++ b/components/doc/megamenu/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="megamenu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/megamenu/routerdoc.js b/components/doc/megamenu/routerdoc.js
new file mode 100644
index 0000000000..9b47d037e6
--- /dev/null
+++ b/components/doc/megamenu/routerdoc.js
@@ -0,0 +1,28 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function RouterDoc(props) {
+    const code = {
+        basic: `
+{
+    label: 'Log out',
+    icon: 'pi pi-signout',
+    url: 'https://www.react.dev/',
+    command: () => {
+        router.push('/installation');
+    }
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items with navigation are defined with <i>command</i> property to be able to use a router link component, an external link or programmatic navigation.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/megamenu/styledoc.js b/components/doc/megamenu/styledoc.js
new file mode 100644
index 0000000000..b4df6bc183
--- /dev/null
+++ b/components/doc/megamenu/styledoc.js
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-megamenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-megamenu-root-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/megamenu/templatedoc.js b/components/doc/megamenu/templatedoc.js
new file mode 100644
index 0000000000..b037f003e6
--- /dev/null
+++ b/components/doc/megamenu/templatedoc.js
@@ -0,0 +1,388 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { MegaMenu } from '@/components/lib/megamenu/MegaMenu';
+import { Button } from '@/components/lib/button/Button';
+import { Ripple } from '@/components/lib/primereact.all';
+
+export function TemplateDoc(props) {
+    const itemRenderer = (item) => {
+        if (item.root) {
+            return (
+                <a className="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase p-ripple" style={{ borderRadius: '2rem' }}>
+                    <span className={item.icon} />
+                    <span className="ml-2">{item.label}</span>
+                    <Ripple />
+                </a>
+            );
+        } else if (!item.image) {
+            return (
+                <a className="flex align-items-center p-3 cursor-pointer mb-2 gap-2 ">
+                    <span className="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                        <i className={`${item.icon} text-lg`} />
+                    </span>
+                    <span className="inline-flex flex-column gap-1">
+                        <span className="font-medium text-lg text-900">{item.label}</span>
+                        <span className="white-space-nowrap">{item.subtext}</span>
+                    </span>
+                </a>
+            );
+        }
+
+        return (
+            <div className="flex flex-column align-items-start gap-3">
+                <img alt="megamenu-demo" src={item.image} className="w-full" />
+                <span>{item.subtext}</span>
+                <Button className="p-button p-component p-button-outlined" label={item.label} />
+            </div>
+        );
+    };
+
+    const items = [
+        {
+            label: 'Company',
+            root: true,
+            template: itemRenderer,
+            items: [
+                [
+                    {
+                        items: [
+                            { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [
+                            { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [
+                            { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [{ image: 'https://primefaces.org/cdn/primereact/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Resources',
+            root: true,
+            template: itemRenderer
+        },
+        {
+            label: 'Contact',
+            root: true,
+            template: itemRenderer
+        }
+    ];
+
+    const start = (
+        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g mask="url(#mask0_2642_713)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                    fill="var(--primary-color)"
+                />
+            </g>
+            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+        </svg>
+    );
+    const end = <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />;
+
+    const code = {
+        basic: `
+<MegaMenu model={items} orientation="horizontal" start={start} end={end} breakpoint="960px" className="p-3 surface-0 shadow-2" style={{ borderRadius: '3rem' }} />
+`,
+        javascript: `
+import React from 'react';
+import { MegaMenu } from 'primereact/megamenu';
+import { InputText } from 'primereact/inputtext';
+import { Ripple } from 'primereact/ripple';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item, options) => {
+        if (item.root) {
+            return (
+                <a className="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase p-ripple hover:surface-ground" style={{ borderRadius: '2rem' }} onClick={(e) => options.onClick(e)}>
+                    <span className={item.icon} />
+                    <span className="ml-2">{item.label}</span>
+                    <Ripple />
+                </a>
+            );
+        } else if (!item.image) {
+            return (
+                <a className="flex align-items-center p-3 cursor-pointer mb-2 gap-2 " onClick={options.onClick}>
+                    <span className="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                        <i className={\`\${item.icon} text-lg\`}></i>
+                    </span>
+                    <span className="inline-flex flex-column gap-1">
+                        <span className="font-medium text-lg text-900">{item.label}</span>
+                        <span className="white-space-nowrap">{item.subtext}</span>
+                    </span>
+                </a>
+            );
+        } else {
+            return (
+                <div className="flex flex-column align-items-start gap-3" onClick={options.onClick}>
+                    <img alt="megamenu-demo" src={item.image} className="w-full" />
+                    <span>{item.subtext}</span>
+                    <Button className="p-button p-component p-button-outlined" label={item.label} />
+                </div>
+            );
+        }
+    };
+
+    const items = [
+        {
+            label: 'Company',
+            root: true,
+            template: itemRenderer,
+            items: [
+                [
+                    {
+                        items: [
+                            { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [
+                            { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [
+                            { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [{ image: 'https://primefaces.org/cdn/primereact/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Resources',
+            root: true,
+            template: itemRenderer
+        },
+        {
+            label: 'Contact',
+            root: true,
+            template: itemRenderer
+        }
+    ];
+
+    const start = (
+        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g mask="url(#mask0_2642_713)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                    fill="var(--primary-color)"
+                >
+            </g>
+            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z"
+                fill="var(--primary-color)"
+            />
+            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+        </svg>
+    );
+    const end = <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />;
+
+    return (
+        <div className="card">
+            <MegaMenu model={items} orientation="horizontal" start={start} end={end} breakpoint="960px" className="p-3 surface-0 shadow-2" style={{ borderRadius: '3rem' }} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { MegaMenu } from 'primereact/megamenu';
+import { InputText } from 'primereact/inputtext';
+import { MenuItem } from 'primereact/menuitem';
+import { Ripple } from 'primereact/ripple';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item, options) => {
+        if (item.root) {
+            return (
+                <a className="flex align-items-center cursor-pointer px-3 py-2 overflow-hidden relative font-semibold text-lg uppercase p-ripple hover:surface-ground" style={{ borderRadius: '2rem' }} onClick={(e) => options.onClick(e)}>
+                    <span className={item.icon} />
+                    <span className="ml-2">{item.label}</span>
+                    <Ripple />
+                </a>
+            );
+        } else if (!item.image) {
+            return (
+                <a className="flex align-items-center p-3 cursor-pointer mb-2 gap-2 " onClick={options.onClick}>
+                    <span className="inline-flex align-items-center justify-content-center border-circle bg-primary w-3rem h-3rem">
+                        <i className={\`\${item.icon} text-lg\`}></i>
+                    </span>
+                    <span className="inline-flex flex-column gap-1">
+                        <span className="font-medium text-lg text-900">{item.label}</span>
+                        <span className="white-space-nowrap">{item.subtext}</span>
+                    </span>
+                </a>
+            );
+        } else {
+            return (
+                <div className="flex flex-column align-items-start gap-3" onClick={options.onClick}>
+                    <img alt="megamenu-demo" src={item.image} className="w-full" />
+                    <span>{item.subtext}</span>
+                    <Button className="p-button p-component p-button-outlined" label={item.label} />
+                </div>
+            );
+        }
+    };
+
+    const items: MenuItem[] = [
+        {
+            label: 'Company',
+            root: true,
+            template: itemRenderer,
+            items: [
+                [
+                    {
+                        items: [
+                            { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [
+                            { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [
+                            { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item', template: itemRenderer },
+                            { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item', template: itemRenderer }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        items: [{ image: 'https://primefaces.org/cdn/primereact/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.', template: itemRenderer }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Resources',
+            root: true,
+            template: itemRenderer
+        },
+        {
+            label: 'Contact',
+            root: true,
+            template: itemRenderer
+        }
+    ];
+
+    const start = (
+        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g mask="url(#mask0_2642_713)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                    fill="var(--primary-color)"
+                />
+            </g>
+            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+        </svg>
+    );
+    const end = <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />;
+
+    return (
+        <div className="card">
+            <MegaMenu model={items} orientation="horizontal" start={start} end={end} breakpoint="960px" className="p-3 surface-0 shadow-2" style={{ borderRadius: '3rem' }} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be placed inside the megamenu using the <i>start</i> and <i>end</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MegaMenu model={items} orientation="horizontal" start={start} end={end} breakpoint="960px" className="p-3 surface-0 shadow-2" style={{ borderRadius: '3rem' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/megamenu/theming/styleddoc.js b/components/doc/megamenu/theming/styleddoc.js
new file mode 100644
index 0000000000..7955ab69db
--- /dev/null
+++ b/components/doc/megamenu/theming/styleddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-megamenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-megamenu-root-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/megamenu/theming/tailwinddoc.js b/components/doc/megamenu/theming/tailwinddoc.js
new file mode 100644
index 0000000000..0232f7323a
--- /dev/null
+++ b/components/doc/megamenu/theming/tailwinddoc.js
@@ -0,0 +1,211 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    megamenu: {
+        root: ({ props }) => ({
+            className: classNames('bg-gray-100 dark:bg-gray-900  border border-gray-300 dark:border-blue-900/40  rounded-md', 'flex relative', {
+                'p-2 items-center': props.orientation == 'horizontal',
+                'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal'
+            })
+        }),
+        menu: {
+            className: classNames('m-0 sm:p-0 list-none relative', 'outline-none', 'flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto')
+        },
+        menuitem: ({ props, context }) => ({
+            className: classNames(
+                'transition-shadow duration-200',
+                { 'rounded-md': props.orientation == 'horizontal' },
+                {
+                    'text-gray-700 dark:text-white/80': !context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.active
+                },
+                {
+                    'w-auto': props.orientation === 'horizontal',
+                    'w-full': props.orientation !== 'horizontal'
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
+                }
+            )
+        }),
+        headeraction: {
+            className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
+        },
+        action: {
+            className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
+        },
+        icon: {
+            className: 'mr-2'
+        },
+        submenuicon: ({ props }) => ({
+            className: classNames({
+                'ml-2': props.orientation === 'horizontal',
+                'ml-auto': props.orientation !== 'horizontal'
+            })
+        }),
+        panel: ({ props }) => ({
+            className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto', 'absolute z-10', {
+                'left-full top-0': props.orientation !== 'horizontal'
+            })
+        }),
+        grid: 'flex',
+        column: 'w-1/2',
+        submenu: {
+            className: classNames('m-0 list-none', 'py-1 w-48')
+        },
+        submenuheader: {
+            className: classNames('m-0 py-3 px-5 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold rounded-tr-md rounded-tl-md')
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { MegaMenu } from 'primereact/megamenu';
+
+export default function UnstyledDemo() {
+    const items = [
+        {
+            label: 'Videos', icon: 'pi pi-fw pi-video',
+            items: [
+                [
+                    {
+                        label: 'Video 1',
+                        items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                    },
+                    {
+                        label: 'Video 2',
+                        items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Video 3',
+                        items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                    },
+                    {
+                        label: 'Video 4',
+                        items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Users', icon: 'pi pi-fw pi-users',
+            items: [
+                [
+                    {
+                        label: 'User 1',
+                        items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                    },
+                    {
+                        label: 'User 2',
+                        items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                    },
+                ],
+                [
+                    {
+                        label: 'User 3',
+                        items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                    },
+                    {
+                        label: 'User 4',
+                        items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'User 5',
+                        items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                    },
+                    {
+                        label: 'User 6',
+                        items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Events', icon: 'pi pi-fw pi-calendar',
+            items: [
+                [
+                    {
+                        label: 'Event 1',
+                        items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                    },
+                    {
+                        label: 'Event 2',
+                        items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Event 3',
+                        items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                    },
+                    {
+                        label: 'Event 4',
+                        items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Settings', icon: 'pi pi-fw pi-cog',
+            items: [
+                [
+                    {
+                        label: 'Setting 1',
+                        items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                    },
+                    {
+                        label: 'Setting 2',
+                        items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                    },
+                    {
+                        label: 'Setting 3',
+                        items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Technology 4',
+                        items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                    }
+                ]
+            ]
+        }
+    ];
+
+    return (
+        <div className="card">
+            <MegaMenu model={items} breakpoint="960px" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/megamenu/verticaldoc.js b/components/doc/megamenu/verticaldoc.js
new file mode 100644
index 0000000000..65a6c7ba60
--- /dev/null
+++ b/components/doc/megamenu/verticaldoc.js
@@ -0,0 +1,341 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MegaMenu } from '@/components/lib/megamenu/MegaMenu';
+
+export function VerticalDoc(props) {
+    const items = [
+        {
+            label: 'Furniture',
+            icon: 'pi pi-box',
+            items: [
+                [
+                    {
+                        label: 'Living Room',
+                        items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Kitchen',
+                        items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                    },
+                    {
+                        label: 'Bathroom',
+                        items: [{ label: 'Accessories' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Bedroom',
+                        items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Office',
+                        items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Electronics',
+            icon: 'pi pi-mobile',
+            items: [
+                [
+                    {
+                        label: 'Computer',
+                        items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Home Theather',
+                        items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Gaming',
+                        items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Appliances',
+                        items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Sports',
+            icon: 'pi pi-clock',
+            items: [
+                [
+                    {
+                        label: 'Football',
+                        items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Running',
+                        items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Swimming',
+                        items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Tennis',
+                        items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                    }
+                ]
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<MegaMenu model={items} orientation="vertical" breakpoint="960px" />        
+`,
+        javascript: `
+import React from 'react'; 
+import { MegaMenu } from 'primereact/megamenu';
+
+export default function VerticalDemo() {
+    const items = [
+        {
+            label: 'Furniture',
+            icon: 'pi pi-box',
+            items: [
+                [
+                    {
+                        label: 'Living Room',
+                        items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Kitchen',
+                        items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                    },
+                    {
+                        label: 'Bathroom',
+                        items: [{ label: 'Accessories' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Bedroom',
+                        items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Office',
+                        items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Electronics',
+            icon: 'pi pi-mobile',
+            items: [
+                [
+                    {
+                        label: 'Computer',
+                        items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Home Theather',
+                        items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Gaming',
+                        items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Appliances',
+                        items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Sports',
+            icon: 'pi pi-clock',
+            items: [
+                [
+                    {
+                        label: 'Football',
+                        items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Running',
+                        items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Swimming',
+                        items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Tennis',
+                        items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                    }
+                ]
+            ]
+        }
+    ];
+
+    return (
+        <div className="card">
+            <MegaMenu model={items} orientation="vertical" breakpoint="960px" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { MegaMenu } from 'primereact/megamenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function VerticalDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Furniture',
+            icon: 'pi pi-box',
+            items: [
+                [
+                    {
+                        label: 'Living Room',
+                        items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Kitchen',
+                        items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }]
+                    },
+                    {
+                        label: 'Bathroom',
+                        items: [{ label: 'Accessories' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Bedroom',
+                        items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Office',
+                        items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Electronics',
+            icon: 'pi pi-mobile',
+            items: [
+                [
+                    {
+                        label: 'Computer',
+                        items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Home Theather',
+                        items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Gaming',
+                        items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Appliances',
+                        items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'Sports',
+            icon: 'pi pi-clock',
+            items: [
+                [
+                    {
+                        label: 'Football',
+                        items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Running',
+                        items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Swimming',
+                        items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }]
+                    }
+                ],
+                [
+                    {
+                        label: 'Tennis',
+                        items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }]
+                    }
+                ]
+            ]
+        }
+    ];
+
+    return (
+        <div className="card">
+            <MegaMenu model={items} orientation="vertical" breakpoint="960px" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Layout of the MegaMenu is changed with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as options.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MegaMenu model={items} orientation="vertical" breakpoint="960px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/mention/accessibilitydoc.js b/components/doc/mention/accessibilitydoc.js
new file mode 100644
index 0000000000..d839b5fc42
--- /dev/null
+++ b/components/doc/mention/accessibilitydoc.js
@@ -0,0 +1,89 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="men1">Username</label>
+<Mention inputId="men1" />
+
+<span id="men2">Email</span>
+<Mention aria-labelledby="men2" />
+
+<Mention aria-label="City" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role in addition to{' '}
+                <i>aria-autocomplete</i>, <i>aria-haspopup</i> and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> and <i>aria-activedescendant</i> attribute is used to instruct
+                screen reader which option to read during keyboard navigation within the popup list.
+            </p>
+            <p>
+                The popup list has an id that refers to the <i>aria-controls</i> attribute of the input element and uses <i>listbox</i> as the role. Each list item has <i>option</i> role and an id to match the <i>aria-activedescendant</i> of the
+                input element.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Highlights the previous item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Highlights the next item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the highlighted item and closes the popup if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Highlights the first item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Highlights the last item if popup is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Hides the popup.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/mention/autoresizedoc.js b/components/doc/mention/autoresizedoc.js
new file mode 100644
index 0000000000..011e9bbc97
--- /dev/null
+++ b/components/doc/mention/autoresizedoc.js
@@ -0,0 +1,210 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Mention } from '@/components/lib/mention/Mention';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../service/CustomerService';
+
+export function AutoResizeDoc(props) {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then((data) => {
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            setCustomers(data);
+        });
+    }, []);
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            } else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    };
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} autoResize />
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { Mention } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function AutoResizeDemo() {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+                placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { Mention, MentionSearchEvent } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function AutoResizeDemo() {
+    const [value, setValue] = useState<string>('');
+    const [customers, setCustomers] = useState<any>([]);
+    const [suggestions, setSuggestions] = useState<any>([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event: MentionSearchEvent) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion: any) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+                placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} autoResize />
+        </div>
+    )
+}
+        `,
+        data: `
+/* CustomerService */ 
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>autoResize</i> is enabled, textarea grows instead of displaying a scrollbar.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} autoResize />
+            </div>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/mention/basicdoc.js b/components/doc/mention/basicdoc.js
new file mode 100644
index 0000000000..adbd893dc8
--- /dev/null
+++ b/components/doc/mention/basicdoc.js
@@ -0,0 +1,210 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Mention } from '@/components/lib/mention/Mention';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../service/CustomerService';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then((data) => {
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            setCustomers(data);
+        });
+    }, []);
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            } else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    };
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { Mention } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+                placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { Mention, MentionSearchEvent } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+    const [customers, setCustomers] = useState<any>([]);
+    const [suggestions, setSuggestions] = useState<any>([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event: MentionSearchEvent) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion: any) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+                placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* CustomerService */ 
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Mention is used as a controlled component with <i>value</i> and <i>onChange</i> properties. In addition, <i>suggestions</i> and a <i>onSearch</i> are required to query the results.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
+            </div>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/mention/disableddoc.js b/components/doc/mention/disableddoc.js
new file mode 100644
index 0000000000..d5d3ed1452
--- /dev/null
+++ b/components/doc/mention/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Mention } from '@/components/lib/mention/Mention';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Mention disabled />
+        `,
+        javascript: `
+import React from "react";
+import { Mention } from 'primereact/mention';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Mention disabled />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { Mention } from 'primereact/mention';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Mention disabled />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Mention disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/mention/floatlabeldoc.js b/components/doc/mention/floatlabeldoc.js
new file mode 100644
index 0000000000..a83d3be4ae
--- /dev/null
+++ b/components/doc/mention/floatlabeldoc.js
@@ -0,0 +1,220 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Mention } from '@/components/lib/mention/Mention';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../service/CustomerService';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then((data) => {
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            setCustomers(data);
+        });
+    }, []);
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            } else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    };
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<span className="p-float-label">
+    <Mention inputId="newpost" value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} 
+        field="nickname" rows={5} cols={40} itemTemplate={itemTemplate} />
+    <label htmlFor="newpost">New Post</label>
+</span>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { Mention } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <span className="p-float-label">
+                <Mention inputId="newpost" value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} 
+                    field="nickname" rows={5} cols={40} itemTemplate={itemTemplate} />
+                <label htmlFor="newpost">New Post</label>
+            </span>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { Mention, MentionSearchEvent } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function FloatLabelDoc() {
+    const [value, setValue] = useState<string>('');
+    const [customers, setCustomers] = useState<any>([]);
+    const [suggestions, setSuggestions] = useState<any>([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event: MentionSearchEvent) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion: any) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <span className="p-float-label">
+                <Mention inputId="newpost" value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} 
+                    field="nickname" rows={5} cols={40} itemTemplate={itemTemplate} />
+                <label htmlFor="newpost">New Post</label>
+            </span>
+        </div>
+    )
+}
+        `,
+        data: `
+/* CustomerService */ 
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>A floating label appears on top of the input field when focused.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <span className="p-float-label">
+                    <Mention inputId="newpost" value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" rows={5} cols={40} itemTemplate={itemTemplate} />
+                    <label htmlFor="newpost">New Post</label>
+                </span>
+            </div>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/mention/importdoc.js b/components/doc/mention/importdoc.js
new file mode 100644
index 0000000000..68c30cad60
--- /dev/null
+++ b/components/doc/mention/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Mention } from 'primereact/mention';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/mention/invaliddoc.js b/components/doc/mention/invaliddoc.js
new file mode 100644
index 0000000000..d162d3719a
--- /dev/null
+++ b/components/doc/mention/invaliddoc.js
@@ -0,0 +1,221 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Mention } from '@/components/lib/mention/Mention';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../service/CustomerService';
+
+export function InvalidDoc(props) {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then((data) => {
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            setCustomers(data);
+        });
+    }, []);
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            } else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    };
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+    placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} inputClassName="p-invalid" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { Mention } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+                placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} inputClassName="p-invalid" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { Mention, MentionSearchEvent } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState<string>('');
+    const [customers, setCustomers] = useState<any>([]);
+    const [suggestions, setSuggestions] = useState<any>([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event: MentionSearchEvent) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion: any) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+                placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} inputClassName="p-invalid" />
+        </div>
+    )
+}
+        `,
+        data: `
+/* CustomerService */ 
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Mention
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    suggestions={suggestions}
+                    onSearch={onSearch}
+                    field="nickname"
+                    placeholder="Enter @ to mention people"
+                    rows={5}
+                    cols={40}
+                    itemTemplate={itemTemplate}
+                    inputClassName="p-invalid"
+                />
+            </div>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/mention/pt/wireframe.js b/components/doc/mention/pt/wireframe.js
new file mode 100644
index 0000000000..06d72aa642
--- /dev/null
+++ b/components/doc/mention/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/mention.jpg" alt="mention" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/mention/styledoc.js b/components/doc/mention/styledoc.js
new file mode 100644
index 0000000000..31c4a87eb2
--- /dev/null
+++ b/components/doc/mention/styledoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-mention</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-mention-panel</td>
+                            <td>Overlay panel of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-mention-items</td>
+                            <td>List container of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-mention-item</td>
+                            <td>List item of a suggestion.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/mention/theming/styleddoc.js b/components/doc/mention/theming/styleddoc.js
new file mode 100644
index 0000000000..e4f6489564
--- /dev/null
+++ b/components/doc/mention/theming/styleddoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-mention</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-mention-panel</td>
+                            <td>Overlay panel of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-mention-items</td>
+                            <td>List container of suggestions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-mention-item</td>
+                            <td>List item of a suggestion.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/mention/theming/tailwinddoc.js b/components/doc/mention/theming/tailwinddoc.js
new file mode 100644
index 0000000000..578de9d6ed
--- /dev/null
+++ b/components/doc/mention/theming/tailwinddoc.js
@@ -0,0 +1,102 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};        
+
+const Tailwind = {
+    mention: {
+        root: 'relative',
+        panel: 'max-h-[200px] overflow-auto bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg',
+        items: 'py-3 list-none m-0',
+        item: 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap m-0 p-3 border-0 transition-shadow duration-200 rounded-none dark:text-white/80 dark:hover:bg-gray-800 hover:text-gray-700 hover:bg-gray-200',
+        transition: TRANSITIONS.overlay
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { Mention } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [suggestions, setSuggestions] = useState([]);
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onSearch = (event) => {
+        //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+        setTimeout(() => {
+            const query = event.query;
+            let suggestions;
+
+            if (!query.trim().length) {
+                suggestions = [...customers];
+            }
+            else {
+                suggestions = customers.filter((customer) => {
+                    return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                });
+            }
+
+            setSuggestions(suggestions);
+        }, 250);
+    }
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-col ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="card flex justify-center">
+            <Mention value={value} onChange={(e) => setValue(e.target.value)} suggestions={suggestions} onSearch={onSearch} field="nickname" 
+                placeholder="Enter @ to mention people" rows={5} cols={40} itemTemplate={itemTemplate} />
+        </div>
+    )
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['CustomerService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/mention/triggersdoc.js b/components/doc/mention/triggersdoc.js
new file mode 100644
index 0000000000..6dcff755dd
--- /dev/null
+++ b/components/doc/mention/triggersdoc.js
@@ -0,0 +1,321 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Mention } from '@/components/lib/mention/Mention';
+import { useEffect, useState } from 'react';
+import { CustomerService } from '../../../service/CustomerService';
+
+export function TriggersDoc(props) {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [multipleSuggestions, setMultipleSuggestions] = useState([]);
+    const tagSuggestions = ['primereact', 'primefaces', 'primeng', 'primevue'];
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then((data) => {
+            data.forEach((d) => (d.nickname = `${d.name.replace(/\s+/g, '').toLowerCase()}_${d.id}`));
+            setCustomers(data);
+        });
+    }, []);
+
+    const onMultipleSearch = (event) => {
+        const trigger = event.trigger;
+
+        if (trigger === '@') {
+            //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+            setTimeout(() => {
+                const query = event.query;
+                let suggestions;
+
+                if (!query.trim().length) {
+                    suggestions = [...customers];
+                } else {
+                    suggestions = customers.filter((customer) => {
+                        return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                    });
+                }
+
+                setMultipleSuggestions(suggestions);
+            }, 250);
+        } else if (trigger === '#') {
+            setTimeout(() => {
+                const query = event.query;
+                let suggestions;
+
+                if (!query.trim().length) {
+                    suggestions = [...tagSuggestions];
+                } else {
+                    suggestions = tagSuggestions.filter((tag) => {
+                        return tag.toLowerCase().startsWith(query.toLowerCase());
+                    });
+                }
+
+                setMultipleSuggestions(suggestions);
+            }, 250);
+        }
+    };
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src} width="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    };
+
+    const multipleItemTemplate = (suggestion, options) => {
+        const trigger = options.trigger;
+
+        if (trigger === '@' && suggestion.nickname) {
+            return itemTemplate(suggestion);
+        } else if (trigger === '#' && !suggestion.nickname) {
+            return <span>{suggestion}</span>;
+        }
+
+        return null;
+    };
+
+    const code = {
+        basic: `
+<Mention value={value} onChange={(e) => setValue(e.target.value)} trigger={['@', '#']} suggestions={multipleSuggestions} onSearch={onMultipleSearch}
+    field={['nickname']} placeholder="Enter @ to mention people, # to mention tag" itemTemplate={multipleItemTemplate} rows={5} cols={40} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { Mention } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function TriggersDemo() {
+    const [value, setValue] = useState('');
+    const [customers, setCustomers] = useState([]);
+    const [multipleSuggestions, setMultipleSuggestions]= useState([]);
+    const tagSuggestions = ['primereact', 'primefaces', 'primeng', 'primevue'];
+
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onMultipleSearch = (event) => {
+        const trigger = event.trigger;
+
+        if (trigger === '@') {
+            //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+            setTimeout(() => {
+                const query = event.query;
+                let suggestions;
+
+                if (!query.trim().length) {
+                    suggestions = [...customers];
+                }
+                else {
+                    suggestions = customers.filter((customer) => {
+                        return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                    });
+                }
+
+                setMultipleSuggestions(suggestions);
+            }, 250);
+        }
+        else if (trigger === '#') {
+            setTimeout(() => {
+                const query = event.query;
+                let suggestions;
+
+                if (!query.trim().length) {
+                    suggestions = [...tagSuggestions];
+                }
+                else {
+                    suggestions = tagSuggestions.filter((tag) => {
+                        return tag.toLowerCase().startsWith(query.toLowerCase());
+                    });
+                }
+
+                setMultipleSuggestions(suggestions);
+            }, 250);
+        }
+    }
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+        
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src}th="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    const multipleItemTemplate = (suggestion, options) => {
+        const trigger = options.trigger;
+
+        if (trigger === '@' && suggestion.nickname) {
+            return itemTemplate(suggestion);
+        }
+        else if (trigger === '#' && !suggestion.nickname) {
+            return <span>{suggestion}</span>;
+        }
+
+        return null;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e) => setValue(e.target.value)} trigger={['@', '#']} suggestions={multipleSuggestions} onSearch={onMultipleSearch}
+                field={['nickname']} placeholder="Enter @ to mention people, # to mention tag" itemTemplate={multipleItemTemplate} rows={5} cols={40} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { Mention, MentionSearchEvent, MentionItemTemplateOptions } from 'primereact/mention';
+import { CustomerService } from './service/CustomerService';
+
+export default function TriggersDemo() {
+    const [value, setValue] = useState<string>('');
+    const [customers, setCustomers] = useState<any>([]);
+    const [multipleSuggestions, setMultipleSuggestions]= useState<any>([]);
+    const tagSuggestions = ['primereact', 'primefaces', 'primeng', 'primevue'];
+    
+    useEffect(() => {
+        CustomerService.getCustomersSmall().then(data => {
+            data.forEach(d => d['nickname'] = \`\${d.name.replace(/\\s+/g, '').toLowerCase()}_\${d.id}\`);
+            setCustomers(data);
+        });
+    }, [])
+
+    const onMultipleSearch = (event: MentionSearchEvent) => {
+        const trigger = event.trigger;
+
+        if (trigger === '@') {
+            //in a real application, make a request to a remote url with the query and return suggestions, for demo we filter at client side
+            setTimeout(() => {
+                const query = event.query;
+                let suggestions;
+
+                if (!query.trim().length) {
+                    suggestions = [...customers];
+                }
+                else {
+                    suggestions = customers.filter((customer) => {
+                        return customer.nickname.toLowerCase().startsWith(query.toLowerCase());
+                    });
+                }
+
+                setMultipleSuggestions(suggestions);
+            }, 250);
+        }
+        else if (trigger === '#') {
+            setTimeout(() => {
+                const query = event.query;
+                let suggestions;
+
+                if (!query.trim().length) {
+                    suggestions = [...tagSuggestions];
+                }
+                else {
+                    suggestions = tagSuggestions.filter((tag) => {
+                        return tag.toLowerCase().startsWith(query.toLowerCase());
+                    });
+                }
+
+                setMultipleSuggestions(suggestions);
+            }, 250);
+        }
+    }
+
+    const itemTemplate = (suggestion) => {
+        const src = 'https://primefaces.org/cdn/primereact/images/avatar/' + suggestion.representative.image;
+        
+        return (
+            <div className="flex align-items-center">
+                <img alt={suggestion.name} src={src}th="32" />
+                <span className="flex flex-column ml-2">
+                    {suggestion.name}
+                    <small style={{ fontSize: '.75rem', color: 'var(--text-color-secondary)' }}>@{suggestion.nickname}</small>
+                </span>
+            </div>
+        );
+    }
+
+    const multipleItemTemplate = (suggestion: any, options: MentionItemTemplateOptions) => {
+        const trigger = options.trigger;
+
+        if (trigger === '@' && suggestion.nickname) {
+            return itemTemplate(suggestion);
+        }
+        else if (trigger === '#' && !suggestion.nickname) {
+            return <span>{suggestion}</span>;
+        }
+
+        return null;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <Mention value={value} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)} trigger={['@', '#']} suggestions={multipleSuggestions} onSearch={onMultipleSearch}
+                field={['nickname']} placeholder="Enter @ to mention people, # to mention tag" itemTemplate={multipleItemTemplate} rows={5} cols={40} />
+        </div>
+    )
+}
+        `,
+        data: `
+/* CustomerService */ 
+{
+    id: 1000,
+    name: 'James Butt',
+    country: {
+        name: 'Algeria',
+        code: 'dz'
+    },
+    company: 'Benton, John B Jr',
+    date: '2015-09-13',
+    status: 'unqualified',
+    verified: true,
+    activity: 17,
+    representative: {
+        name: 'Ioni Bowcher',
+        image: 'ionibowcher.png'
+    },
+    balance: 70663
+},
+...
+       `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>It is used to define the expected keyword/s in the input field to mention someone or something.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Mention
+                    value={value}
+                    onChange={(e) => setValue(e.target.value)}
+                    trigger={['@', '#']}
+                    suggestions={multipleSuggestions}
+                    onSearch={onMultipleSearch}
+                    field={['nickname']}
+                    placeholder="Enter @ to mention people, # to mention tag"
+                    itemTemplate={multipleItemTemplate}
+                    rows={5}
+                    cols={40}
+                />
+            </div>
+            <DocSectionCode code={code} service={['CustomerService']} />
+        </>
+    );
+}
diff --git a/components/doc/menu/accessibilitydoc.js b/components/doc/menu/accessibilitydoc.js
new file mode 100644
index 0000000000..f56718e2a9
--- /dev/null
+++ b/components/doc/menu/accessibilitydoc.js
@@ -0,0 +1,86 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Menu component uses the <i>menu</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements have a{' '}
+                <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a Menu uses the <i>group</i> role with an <i>aria-labelledby</i> defined as the
+                id of the submenu root menuitem label.
+            </p>
+
+            <p>
+                In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>If menu is in overlay mode, popup gets closes and focus moves to target.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/menu/basicdoc.js b/components/doc/menu/basicdoc.js
new file mode 100644
index 0000000000..458b380ad2
--- /dev/null
+++ b/components/doc/menu/basicdoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Menu } from '@/components/lib/menu/Menu';
+
+export function BasicDoc(props) {
+    let items = [
+        { label: 'New', icon: 'pi pi-plus' },
+        { label: 'Search', icon: 'pi pi-search' }
+    ];
+
+    const code = {
+        basic: `
+<Menu model={items} />
+`,
+        javascript: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+
+export default function BasicDemo() {
+    let items = [
+        { label: 'New', icon: 'pi pi-plus' },
+        { label: 'Search', icon: 'pi pi-search' }
+    ];
+
+    return (
+        <Menu model={items} />
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    let items: MenuItem[] = [
+        { label: 'New', icon: 'pi pi-plus' },
+        { label: 'Search', icon: 'pi pi-search' }
+    ];
+
+    return (
+        <Menu model={items} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Menu requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Menu model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menu/commanddoc.js b/components/doc/menu/commanddoc.js
new file mode 100644
index 0000000000..2e77afa926
--- /dev/null
+++ b/components/doc/menu/commanddoc.js
@@ -0,0 +1,109 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Menu } from '@/components/lib/menu/Menu';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function CommandDoc(props) {
+    const toast = useRef(null);
+    let items = [
+        {
+            label: 'New',
+            icon: 'pi pi-plus',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+            }
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Menu model={items} />
+<Toast ref={toast} />
+`,
+        javascript: `
+import React, { useRef } from 'react'; 
+import { Menu } from 'primereact/menu';
+import { Toast } from 'primereact/toast';
+
+export default function CommandDemo() {
+    const toast = useRef(null);
+    let items = [
+        {
+            label: 'New',
+            icon: 'pi pi-plus',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+            }
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
+            }
+        }
+    ];
+
+    return (
+        <Menu model={items} />
+        <Toast ref={toast} />
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react'; 
+import { Menu } from 'primereact/menu';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+
+export default function CommandDemo() {
+    const toast = useRef<Toast>(null);
+    let items: MenuItem[] = [
+        {
+            label: 'New',
+            icon: 'pi pi-plus',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+            }
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 });
+            }
+        }
+    ];
+
+    return (
+        <Menu model={items} />
+        <Toast ref={toast} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>command</i> property defines the callback to run when an item is activated by click or a key event.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Menu model={items} />
+                <Toast ref={toast} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menu/groupdoc.js b/components/doc/menu/groupdoc.js
new file mode 100644
index 0000000000..aff5050fc6
--- /dev/null
+++ b/components/doc/menu/groupdoc.js
@@ -0,0 +1,150 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Menu } from '@/components/lib/menu/Menu';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function GroupDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Documents',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog'
+                },
+                {
+                    label: 'Logout',
+                    icon: 'pi pi-sign-out'
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Menu model={items} />
+`,
+        javascript: `
+import React, { useRef } from 'react';
+import { useRouter } from 'next/router';
+import { Menu } from 'primereact/menu';
+import { Toast } from 'primereact/toast';
+
+export default function GroupDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Documents',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog'
+                },
+                {
+                    label: 'Logout',
+                    icon: 'pi pi-sign-out'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <Menu model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { useRouter } from 'next/router';
+import { Menu } from 'primereact/menu';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function GroupDemo() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Documents',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search'
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog'
+                },
+                {
+                    label: 'Logout',
+                    icon: 'pi pi-sign-out'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <Menu model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <Menu model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menu/importdoc.js b/components/doc/menu/importdoc.js
new file mode 100644
index 0000000000..a9b3cf641d
--- /dev/null
+++ b/components/doc/menu/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Menu } from 'primereact/menu';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/menu/popupdoc.js b/components/doc/menu/popupdoc.js
new file mode 100644
index 0000000000..1ef7a5a9c7
--- /dev/null
+++ b/components/doc/menu/popupdoc.js
@@ -0,0 +1,168 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Menu } from '@/components/lib/menu/Menu';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function PopupDoc(props) {
+    const menuLeft = useRef(null);
+    const menuRight = useRef(null);
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Options',
+            items: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-upload'
+                },
+                {
+                    label: 'Custom template',
+                    template: (item, options) => {
+                        return (
+                            <div className="p-menuitem-content" data-pc-section="content" onMouseMove={(e) => options.onMouseMove(e)}>
+                                <a href="#" className="p-menuitem-link">
+                                    Lorem ipsum
+                                </a>
+                            </div>
+                        );
+                    }
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+<Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+<Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+<Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
+`,
+        javascript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Menu } from 'primereact/menu';
+import { Toast } from 'primereact/toast';
+
+export default function PopupDoc() {
+    const menuLeft = useRef(null);
+    const menuRight = useRef(null);
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Options',
+            items: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-upload'
+                },
+                {
+                    label: 'Custom template',
+                    template: (item, options) => {
+                        return (
+                            <div className="p-menuitem-content" data-pc-section="content" onMouseMove={(e) => options.onMouseMove(e)}>
+                                <a href="#" className="p-menuitem-link">
+                                    Lorem ipsum
+                                </a>
+                            </div>
+                        );
+                    }
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+            <Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+            <Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+            <Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Menu } from 'primereact/menu';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function PopupDoc() {
+    const menuLeft = useRef<Menu>(null);
+    const menuRight = useRef<Menu>(null);
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Options',
+            items: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-upload'
+                },
+                {
+                    label: 'Custom template',
+                    template: (item, options) => {
+                        return (
+                            <div className="p-menuitem-content" data-pc-section="content" onMouseMove={(e) => options.onMouseMove(e)}>
+                                <a href="#" className="p-menuitem-link">
+                                    Lorem ipsum
+                                </a>
+                            </div>
+                        );
+                    }
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+            <Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+            <Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+            <Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Popup mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> method with an event of the target. The <i>popupAlignment</i> property allows you to control how the overlay is aligned with its target.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+                <Button label="Show Left" icon="pi pi-align-left" className="mr-2" onClick={(event) => menuLeft.current.toggle(event)} aria-controls="popup_menu_left" aria-haspopup />
+                <Menu model={items} popup ref={menuRight} id="popup_menu_right" popupAlignment="right" />
+                <Button label="Show Right" icon="pi pi-align-right" className="mr-2" onClick={(event) => menuRight.current.toggle(event)} aria-controls="popup_menu_right" aria-haspopup />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menu/pt/wireframe.js b/components/doc/menu/pt/wireframe.js
new file mode 100644
index 0000000000..a32e461b8c
--- /dev/null
+++ b/components/doc/menu/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="menu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/menu/routerdoc.js b/components/doc/menu/routerdoc.js
new file mode 100644
index 0000000000..e6a067a8f2
--- /dev/null
+++ b/components/doc/menu/routerdoc.js
@@ -0,0 +1,112 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Menu } from '@/components/lib/menu/Menu';
+import { useRouter } from 'next/router';
+
+export function RouterDoc(props) {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router Link',
+            icon: 'pi pi-palette',
+            url: '/unstyled'
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            url: 'https://react.dev/'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Menu model={items} />
+`,
+        javascript: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router Link',
+            icon: 'pi pi-palette',
+            url: '/unstyled'
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            url: 'https://react.dev/'
+        }
+    ];
+
+    return (
+        <Menu model={items} />
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+import { MenuItem } from 'primereact/menuitem';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router Link',
+            icon: 'pi pi-palette',
+            url: '/unstyled'
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            url: 'https://react.dev/'
+        }
+    ];
+
+    return (
+        <Menu model={items} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items with navigation are defined with <i>command</i> and <i>url</i> property to be able to use a router link component, an external link or programmatic navigation.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Menu model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menu/styledoc.js b/components/doc/menu/styledoc.js
new file mode 100644
index 0000000000..eeae06e397
--- /dev/null
+++ b/components/doc/menu/styledoc.js
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-menu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/menu/templatedoc.js b/components/doc/menu/templatedoc.js
new file mode 100644
index 0000000000..2604ae5531
--- /dev/null
+++ b/components/doc/menu/templatedoc.js
@@ -0,0 +1,382 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Menu } from '@/components/lib/menu/Menu';
+import { classNames } from '@/components/lib/utils/Utils';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function TemplateDoc(props) {
+    const itemRenderer = (item) => (
+        <div className="p-menuitem-content">
+            <a className="flex align-items-center p-menuitem-link">
+                <span className={item.icon} />
+                <span className="mx-2">{item.label}</span>
+                {item.badge && <Badge className="ml-auto" value={item.badge} />}
+                {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+            </a>
+        </div>
+    );
+    let items = [
+        {
+            template: () => {
+                return (
+                    <span className="inline-flex align-items-center gap-1 px-2 py-2">
+                        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="var(--primary-color)"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z"
+                                fill="var(--primary-color)"
+                            />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                        </svg>
+                        <span className="font-medium text-xl font-semibold">
+                            PRIME<span className="text-primary">APP</span>
+                        </span>
+                    </span>
+                );
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Documents',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    shortcut: '⌘+N',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Messages',
+                    icon: 'pi pi-inbox',
+                    badge: 2,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Logout',
+                    icon: 'pi pi-sign-out',
+                    shortcut: '⌘+Q',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Info', detail: 'Item Selected', life: 3000 });
+            },
+            template: (item, options) => {
+                return (
+                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround')}>
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" shape="circle" />
+                        <div className="flex flex-column align">
+                            <span className="font-bold">Amy Elsner</span>
+                            <span className="text-sm">Agent</span>
+                        </div>
+                    </button>
+                );
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Menu model={items} className="w-full md:w-15rem"  />
+`,
+        javascript: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+import { Badge } from 'primereact/badge';
+import { Avatar } from 'primereact/avatar';
+import { classNames } from 'primereact/utils';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item) => (
+        <div className='p-menuitem-content'>
+            <a className="flex align-items-center p-menuitem-link">
+                <span className={item.icon} />
+                <span className="mx-2">{item.label}</span>
+                {item.badge && <Badge className="ml-auto" value={item.badge} />}
+                {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+            </a>
+        </div>
+    );
+    let items = [
+        {
+            template: () => {
+                return (
+                    <span className="inline-flex align-items-center gap-1 px-2 py-2">
+                        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="var(--primary-color)"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                        </svg>
+                        <span className="font-medium text-xl font-semibold">
+                            PRIME<span className="text-primary">APP</span>
+                        </span>
+                    </span>
+                );
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Documents',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    shortcut: '⌘+N',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Messages',
+                    icon: 'pi pi-inbox',
+                    badge: 2,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Logout',
+                    icon: 'pi pi-sign-out',
+                    shortcut: '⌘+Q',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Info', detail: 'Item Selected', life: 3000 });
+            },
+            template: (item, options) => {
+                return (
+                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround')}>
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" shape="circle" />
+                        <div className="flex flex-column align">
+                            <span className="font-bold">Amy Elsner</span>
+                            <span className="text-sm">Agent</span>
+                        </div>
+                    </button>
+                );
+            }
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Menu model={items} className="w-full md:w-15rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+import { Toast } from 'primereact/toast';
+import { Badge } from 'primereact/badge';
+import { MenuItem } from 'primereact/menuitem';
+import { classNames } from 'primereact/utils';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item) => (
+        <div className='p-menuitem-content'>
+            <a className="flex align-items-center p-menuitem-link">
+                <span className={item.icon} />
+                <span className="mx-2">{item.label}</span>
+                {item.badge && <Badge className="ml-auto" value={item.badge} />}
+                {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+            </a>
+        </div>
+    );
+    let items: MenuItem[] = [
+        {
+            template: () => {
+                return (
+                    <span className="inline-flex align-items-center gap-1 px-2 py-2">
+                        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="var(--primary-color)"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                        </svg>
+                        <span className="font-medium text-xl font-semibold">
+                            PRIME<span className="text-primary">APP</span>
+                        </span>
+                    </span>
+                );
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Documents',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    shortcut: '⌘+N',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Messages',
+                    icon: 'pi pi-inbox',
+                    badge: 2,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Logout',
+                    icon: 'pi pi-sign-out',
+                    shortcut: '⌘+Q',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Info', detail: 'Item Selected', life: 3000 });
+            },
+            template: (item, options) => {
+                return (
+                    <button onClick={(e) => options.onClick(e)} className={classNames(options.className, 'w-full p-link flex align-items-center p-2 pl-4 text-color hover:surface-200 border-noround')}>
+                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" className="mr-2" shape="circle" />
+                        <div className="flex flex-column align">
+                            <span className="font-bold">Amy Elsner</span>
+                            <span className="text-sm">Agent</span>
+                        </div>
+                    </button>
+                );
+            }
+        }
+    ]
+
+    return (
+        <div className="card flex justify-content-center">
+            <Menu model={items} className="w-full md:w-15rem"  />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be placed inside the menuitem using the <i>template</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Menu model={items} className="w-full md:w-15rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menu/theming/styleddoc.js b/components/doc/menu/theming/styleddoc.js
new file mode 100644
index 0000000000..e93a071970
--- /dev/null
+++ b/components/doc/menu/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-menu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/menu/theming/tailwinddoc.js b/components/doc/menu/theming/tailwinddoc.js
new file mode 100644
index 0000000000..f4184d8ffb
--- /dev/null
+++ b/components/doc/menu/theming/tailwinddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+export const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {
+    menu: {
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48',
+        menu: {
+            className: classNames('m-0 p-0 list-none', 'outline-none')
+        },
+        content: ({ state }) => ({
+            className: classNames(
+                'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
+                {
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': state.focused
+                }
+            )
+        }),
+        action: {
+            className: classNames('text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative')
+        },
+        menuitem: {
+            className: classNames('hover:bg-gray-200')
+        },
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
+        submenuheader: {
+            className: classNames('m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none')
+        },
+        separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Menu } from 'primereact/menu';
+
+export default function UnstyledDemo() {
+    let items = [
+        {label: 'New', icon: 'pi pi-fw pi-plus'},
+        {label: 'Delete', icon: 'pi pi-fw pi-trash'}
+    ];
+
+    return (
+        <div className="card flex justify-center">
+            <Menu model={items} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/menubar/accessibilitydoc.js b/components/doc/menubar/accessibilitydoc.js
new file mode 100644
index 0000000000..eccd026fb9
--- /dev/null
+++ b/components/doc/menubar/accessibilitydoc.js
@@ -0,0 +1,102 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Menubar component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements
+                have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a MenuBar uses the <i>menu</i> role with an <i>aria-labelledby</i>{' '}
+                defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the relation between the item and the submenu.
+            </p>
+
+            <p>
+                In mobile viewports, a menu icon appears with a <i>button</i> role along with <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to manage the relation between the overlay menubar and the button. The value to describe
+                the button can be defined <i>aria-label</i> or <i>aria-labelledby</i> specified using <i>buttonProps</i>, by default <i>navigation</i> key of the <i>aria</i> property from the <Link href="http://github.com/locale">locale</Link> API as the{' '}
+                <i>aria-label</i>.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last menuitem within the submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/menubar/basicdoc.js b/components/doc/menubar/basicdoc.js
new file mode 100644
index 0000000000..c674fd5bec
--- /dev/null
+++ b/components/doc/menubar/basicdoc.js
@@ -0,0 +1,191 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Menubar } from '@/components/lib/menubar/Menubar';
+
+export function BasicDoc(props) {
+    const items = [
+        {
+            label: 'Home',
+            icon: 'pi pi-home'
+        },
+        {
+            label: 'Features',
+            icon: 'pi pi-star'
+        },
+        {
+            label: 'Projects',
+            icon: 'pi pi-search',
+            items: [
+                {
+                    label: 'Components',
+                    icon: 'pi pi-bolt'
+                },
+                {
+                    label: 'Blocks',
+                    icon: 'pi pi-server'
+                },
+                {
+                    label: 'UI Kit',
+                    icon: 'pi pi-pencil'
+                },
+                {
+                    label: 'Templates',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Apollo',
+                            icon: 'pi pi-palette'
+                        },
+                        {
+                            label: 'Ultima',
+                            icon: 'pi pi-palette'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Contact',
+            icon: 'pi pi-envelope'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Menubar model={items} />    
+`,
+        javascript: `
+import React from 'react'; 
+import { Menubar } from 'primereact/menubar';
+
+export default function BasicDemo() {
+    const items = [
+        {
+            label: 'Home',
+            icon: 'pi pi-home'
+        },
+        {
+            label: 'Features',
+            icon: 'pi pi-star'
+        },
+        {
+            label: 'Projects',
+            icon: 'pi pi-search',
+            items: [
+                {
+                    label: 'Components',
+                    icon: 'pi pi-bolt'
+                },
+                {
+                    label: 'Blocks',
+                    icon: 'pi pi-server'
+                },
+                {
+                    label: 'UI Kit',
+                    icon: 'pi pi-pencil'
+                },
+                {
+                    label: 'Templates',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Apollo',
+                            icon: 'pi pi-palette'
+                        },
+                        {
+                            label: 'Ultima',
+                            icon: 'pi pi-palette'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Contact',
+            icon: 'pi pi-envelope'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Menubar model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Menubar } from 'primereact/menubar';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Home',
+            icon: 'pi pi-home'
+        },
+        {
+            label: 'Features',
+            icon: 'pi pi-star'
+        },
+        {
+            label: 'Projects',
+            icon: 'pi pi-search',
+            items: [
+                {
+                    label: 'Components',
+                    icon: 'pi pi-bolt'
+                },
+                {
+                    label: 'Blocks',
+                    icon: 'pi pi-server'
+                },
+                {
+                    label: 'UI Kit',
+                    icon: 'pi pi-pencil'
+                },
+                {
+                    label: 'Templates',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Apollo',
+                            icon: 'pi pi-palette'
+                        },
+                        {
+                            label: 'Ultima',
+                            icon: 'pi pi-palette'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Contact',
+            icon: 'pi pi-envelope'
+        }
+    ];
+    
+    return (
+        <div className="card">
+            <Menubar model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Menubar requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card relative z-2">
+                <Menubar model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menubar/commanddoc.js b/components/doc/menubar/commanddoc.js
new file mode 100644
index 0000000000..87d9b619a2
--- /dev/null
+++ b/components/doc/menubar/commanddoc.js
@@ -0,0 +1,218 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Menubar } from '@/components/lib/menubar/Menubar';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function CommandDoc(props) {
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<Menubar model={items} />
+<Toast ref={toast} />  
+`,
+        javascript: `
+import React from 'react'; 
+import { Menubar } from 'primereact/menubar';
+
+export default function CommandDemo() {
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Menubar model={items} />
+            <Toast ref={toast} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Menubar } from 'primereact/menubar';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function CommandDemo() {
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        }
+    ];
+    
+    return (
+        <div className="card">
+            <Menubar model={items} />
+            <Toast ref={toast} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>command</i> property defines the callback to run when an item is activated by click or a key event.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <div className="card relative z-2">
+                <Menubar model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menubar/importdoc.js b/components/doc/menubar/importdoc.js
new file mode 100644
index 0000000000..8690f069fc
--- /dev/null
+++ b/components/doc/menubar/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Menubar } from 'primereact/menubar';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/menubar/pt/wireframe.js b/components/doc/menubar/pt/wireframe.js
new file mode 100644
index 0000000000..f333ee14e7
--- /dev/null
+++ b/components/doc/menubar/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/menubar.jpg" alt="menubar" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/menubar/routerdoc.js b/components/doc/menubar/routerdoc.js
new file mode 100644
index 0000000000..b2bd063f31
--- /dev/null
+++ b/components/doc/menubar/routerdoc.js
@@ -0,0 +1,170 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Menubar } from '@/components/lib/menubar/Menubar';
+import { useRouter } from 'next/router';
+
+export function RouterDoc(props) {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    url: 'https://vitejs.dev/'
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<Menubar model={items} />    
+`,
+        javascript: `
+import React from 'react'; 
+import { Menubar } from 'primereact/menubar';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    url: 'https://vitejs.dev/'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Menubar model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Menubar } from 'primereact/menubar';
+import { MenuItem } from 'primereact/menuitem';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    url: 'https://vitejs.dev/'
+                }
+            ]
+        }
+    ];
+    
+    return (
+        <div className="card">
+            <Menubar model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items with navigation are defined with <i>command</i> and <i>url</i> property to be able to use a router link component, an external link or programmatic navigation.
+                </p>
+            </DocSectionText>
+            <div className="card relative z-2">
+                <Menubar model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menubar/styledoc.js b/components/doc/menubar/styledoc.js
new file mode 100644
index 0000000000..813ee7ee64
--- /dev/null
+++ b/components/doc/menubar/styledoc.js
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-menubar</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/menubar/templatedoc.js b/components/doc/menubar/templatedoc.js
new file mode 100644
index 0000000000..d353b5bc6a
--- /dev/null
+++ b/components/doc/menubar/templatedoc.js
@@ -0,0 +1,293 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { Menubar } from '@/components/lib/menubar/Menubar';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function TemplateDoc(props) {
+    const itemRenderer = (item) => (
+        <a className="flex align-items-center p-menuitem-link">
+            <span className={item.icon} />
+            <span className="mx-2">{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+    const items = [
+        {
+            label: 'Home',
+            icon: 'pi pi-home'
+        },
+        {
+            label: 'Features',
+            icon: 'pi pi-star'
+        },
+        {
+            label: 'Projects',
+            icon: 'pi pi-search',
+            items: [
+                {
+                    label: 'Core',
+                    icon: 'pi pi-bolt',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Blocks',
+                    icon: 'pi pi-server',
+                    shortcut: '⌘+B',
+                    template: itemRenderer
+                },
+                {
+                    label: 'UI Kit',
+                    icon: 'pi pi-pencil',
+                    shortcut: '⌘+U',
+                    template: itemRenderer
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Templates',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Apollo',
+                            icon: 'pi pi-palette',
+                            badge: 2,
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Ultima',
+                            icon: 'pi pi-palette',
+                            badge: 3,
+                            template: itemRenderer
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Contact',
+            icon: 'pi pi-envelope',
+            badge: 3,
+            template: itemRenderer
+        }
+    ];
+
+    const start = <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" className="mr-2" />;
+    const end = (
+        <div className="flex align-items-center gap-2">
+            <InputText placeholder="Search" type="text" className="w-8rem sm:w-auto" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+        </div>
+    );
+
+    const code = {
+        basic: `
+<Menubar model={items} start={start} end={end} />
+`,
+        javascript: `
+import React from 'react';
+import { Menubar } from 'primereact/menubar';
+import { InputText } from 'primereact/inputtext';
+import { Badge } from 'primereact/badge';
+import { Avatar } from 'primereact/avatar';  
+
+export default function TemplateDemo() {
+    const itemRenderer = (item) => (
+        <a className="flex align-items-center p-menuitem-link">
+            <span className={item.icon} />
+            <span className="mx-2">{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+    const items = [
+        {
+            label: 'Home',
+            icon: 'pi pi-home'
+        },
+        {
+            label: 'Features',
+            icon: 'pi pi-star'
+        },
+        {
+            label: 'Projects',
+            icon: 'pi pi-search',
+            items: [
+                {
+                    label: 'Core',
+                    icon: 'pi pi-bolt',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Blocks',
+                    icon: 'pi pi-server',
+                    shortcut: '⌘+B',
+                    template: itemRenderer
+                },
+                {
+                    label: 'UI Kit',
+                    icon: 'pi pi-pencil',
+                    shortcut: '⌘+U',
+                    template: itemRenderer
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Templates',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Apollo',
+                            icon: 'pi pi-palette',
+                            badge: 2,
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Ultima',
+                            icon: 'pi pi-palette',
+                            badge: 3,
+                            template: itemRenderer
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Contact',
+            icon: 'pi pi-envelope',
+            badge: 3,
+            template: itemRenderer
+        }
+    ];
+
+    const start = <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" className="mr-2"></img>;
+    const end = (
+        <div className="flex align-items-center gap-2">
+            <InputText placeholder="Search" type="text" className="w-8rem sm:w-auto" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Menubar model={items} start={start} end={end} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Menubar } from 'primereact/menubar';
+import { InputText } from 'primereact/inputtext';
+import { MenuItem } from 'primereact/menuitem';
+import { Badge } from 'primereact/badge';
+import { Avatar } from 'primereact/avatar';  
+
+export default function TemplateDemo() {
+    const itemRenderer = (item) => (
+        <a className="flex align-items-center p-menuitem-link">
+            <span className={item.icon} />
+            <span className="mx-2">{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+    const items: MenuItem[] = [
+        {
+            label: 'Home',
+            icon: 'pi pi-home'
+        },
+        {
+            label: 'Features',
+            icon: 'pi pi-star'
+        },
+        {
+            label: 'Projects',
+            icon: 'pi pi-search',
+            items: [
+                {
+                    label: 'Core',
+                    icon: 'pi pi-bolt',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Blocks',
+                    icon: 'pi pi-server',
+                    shortcut: '⌘+B',
+                    template: itemRenderer
+                },
+                {
+                    label: 'UI Kit',
+                    icon: 'pi pi-pencil',
+                    shortcut: '⌘+U',
+                    template: itemRenderer
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Templates',
+                    icon: 'pi pi-palette',
+                    items: [
+                        {
+                            label: 'Apollo',
+                            icon: 'pi pi-palette',
+                            badge: 2,
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Ultima',
+                            icon: 'pi pi-palette',
+                            badge: 3,
+                            template: itemRenderer
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Contact',
+            icon: 'pi pi-envelope',
+            badge: 3,
+            template: itemRenderer
+        }
+    ];
+
+    const start = <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" height="40" className="mr-2"></img>;
+    const end = (
+        <div className="flex align-items-center gap-2">
+            <InputText placeholder="Search" type="text" className="w-8rem sm:w-auto" />
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Menubar model={items} start={start} end={end} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be placed inside the menubar using the <i>start</i> and <i>end</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card relative">
+                <Menubar model={items} start={start} end={end} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/menubar/theming/styleddoc.js b/components/doc/menubar/theming/styleddoc.js
new file mode 100644
index 0000000000..b61d01c0ca
--- /dev/null
+++ b/components/doc/menubar/theming/styleddoc.js
@@ -0,0 +1,50 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-menubar</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/menubar/theming/tailwinddoc.js b/components/doc/menubar/theming/tailwinddoc.js
new file mode 100644
index 0000000000..48294a6f6d
--- /dev/null
+++ b/components/doc/menubar/theming/tailwinddoc.js
@@ -0,0 +1,228 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    menubar: {
+        root: {
+            className: classNames('p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative')
+        },
+        menu: ({ state }) => ({
+            className: classNames(
+                'm-0 sm:p-0 list-none',
+                'outline-none',
+                'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
+                'flex-col top-full left-0',
+                'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
+                {
+                    'hidden ': !state?.mobileActive,
+                    'flex ': state?.mobileActive
+                }
+            )
+        }),
+        menuitem: ({ props, context }) => ({
+            className: classNames(
+                'sm:relative sm:w-auto w-full static',
+                'transition-shadow duration-200',
+                { 'rounded-md': props.root },
+                {
+                    'text-gray-700 dark:text-white/80': !context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.active
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
+                }
+            )
+        }),
+        action: ({ context }) => ({
+            className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none', {
+                'pl-9 sm:pl-5': context.level === 1,
+                'pl-14 sm:pl-5': context.level === 2
+            })
+        }),
+        icon: 'mr-2',
+        submenuicon: ({ props }) => ({
+            className: classNames({
+                'ml-auto sm:ml-2': props.root,
+                'ml-auto': !props.root
+            })
+        }),
+        submenu: ({ props }) => ({
+            className: classNames('py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', {
+                'sm:absolute sm:left-full sm:top-0': !props.root
+            })
+        }),
+        separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
+        button: {
+            className: classNames(
+                'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out',
+                'cursor-pointer flex items-center justify-center no-underline',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Menubar } from 'primereact/menubar';
+
+export default function UnstyledDemo() {
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-fw pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-plus',
+                    items: [
+                        {
+                            label: 'Bookmark',
+                            icon: 'pi pi-fw pi-bookmark'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-fw pi-video'
+                        },
+
+                    ]
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-trash'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-fw pi-pencil',
+            items: [
+                {
+                    label: 'Left',
+                    icon: 'pi pi-fw pi-align-left'
+                },
+                {
+                    label: 'Right',
+                    icon: 'pi pi-fw pi-align-right'
+                },
+                {
+                    label: 'Center',
+                    icon: 'pi pi-fw pi-align-center'
+                },
+                {
+                    label: 'Justify',
+                    icon: 'pi pi-fw pi-align-justify'
+                },
+
+            ]
+        },
+        {
+            label: 'Users',
+            icon: 'pi pi-fw pi-user',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus',
+
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-user-minus',
+
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        {
+                            label: 'Filter',
+                            icon: 'pi pi-fw pi-filter',
+                            items: [
+                                {
+                                    label: 'Print',
+                                    icon: 'pi pi-fw pi-print'
+                                }
+                            ]
+                        },
+                        {
+                            icon: 'pi pi-fw pi-bars',
+                            label: 'List'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Events',
+            icon: 'pi pi-fw pi-calendar',
+            items: [
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Save',
+                            icon: 'pi pi-fw pi-calendar-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                },
+                {
+                    label: 'Archive',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Quit',
+            icon: 'pi pi-fw pi-power-off'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Menubar model={items} />
+        </div>
+    )
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/message/accessibilitydoc.js b/components/doc/message/accessibilitydoc.js
new file mode 100644
index 0000000000..a20d91ab3e
--- /dev/null
+++ b/components/doc/message/accessibilitydoc.js
@@ -0,0 +1,45 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and{' '}
+                <i>aria-label</i> can optionally be used as well.
+            </p>
+
+            <p>
+                Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="http://github.com/locale">locale</Link> API by default, you may use
+                <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+            </p>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the message.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/message/basicdoc.js b/components/doc/message/basicdoc.js
new file mode 100644
index 0000000000..5249287a24
--- /dev/null
+++ b/components/doc/message/basicdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Message } from '@/components/lib/message/Message';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Message text="Username is required" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Message } from 'primereact/message';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Message text="Username is required" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Message } from 'primereact/message';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Message text="Username is required" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Text to display is defined with the <i>text</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Message text="Username is required" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/message/importdoc.js b/components/doc/message/importdoc.js
new file mode 100644
index 0000000000..a6fdad6e7f
--- /dev/null
+++ b/components/doc/message/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Message } from 'primereact/message';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/message/pt/wireframe.js b/components/doc/message/pt/wireframe.js
new file mode 100644
index 0000000000..0c623f0cf5
--- /dev/null
+++ b/components/doc/message/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/message.jpg" alt="Message" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/message/severitydoc.js b/components/doc/message/severitydoc.js
new file mode 100644
index 0000000000..3816c16252
--- /dev/null
+++ b/components/doc/message/severitydoc.js
@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Message } from '@/components/lib/message/Message';
+
+export function SeverityDoc(props) {
+    const code = {
+        basic: `
+<Message severity="info" text="Info Message" />
+<Message severity="success" text="Success Message" />
+<Message severity="warn" text="Warning Message" />
+<Message severity="error" text="Error Message" />
+<Message severity="secondary" text="Secondary Message" />
+<Message severity="contrast" text="Contrast Message" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Message } from 'primereact/message';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
+            <Message severity="success" text="Success Message" />
+            <Message severity="info" text="Info Message" />
+            <Message severity="warn" text="Warning Message" />
+            <Message severity="error" text="Error Message" />
+            <Message severity="secondary" text="Secondary Message" />
+            <Message severity="contrast" text="Contrast Message" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Message } from 'primereact/message';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
+            <Message severity="success" text="Success Message" />
+            <Message severity="info" text="Info Message" />
+            <Message severity="warn" text="Warning Message" />
+            <Message severity="error" text="Error Message" />
+            <Message severity="secondary" text="Secondary Message" />
+            <Message severity="contrast" text="Contrast Message" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>severity</i> property specifies the type of the message.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
+                <Message severity="success" text="Success Message" />
+                <Message severity="info" text="Info Message" />
+                <Message severity="warn" text="Warning Message" />
+                <Message severity="error" text="Error Message" />
+                <Message severity="secondary" text="Secondary Message" />
+                <Message severity="contrast" text="Contrast Message" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/message/styledoc.js b/components/doc/message/styledoc.js
new file mode 100644
index 0000000000..c864cdc1a9
--- /dev/null
+++ b/components/doc/message/styledoc.js
@@ -0,0 +1,62 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-messages</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-info</td>
+                            <td>Container element when displaying info messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-warn</td>
+                            <td>Container element when displaying warning messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-error</td>
+                            <td>Container element when displaying error messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-success</td>
+                            <td>Container element when displaying success messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-close</td>
+                            <td>Close icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-icon</td>
+                            <td>Severity icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-summary</td>
+                            <td>Summary of a message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-detail</td>
+                            <td>Detail of a message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/message/templatedoc.js b/components/doc/message/templatedoc.js
new file mode 100644
index 0000000000..19a954cd0b
--- /dev/null
+++ b/components/doc/message/templatedoc.js
@@ -0,0 +1,106 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Message } from '@/components/lib/message/Message';
+
+export function TemplateDoc(props) {
+    const content = (
+        <div className="flex align-items-center">
+            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" width="32" />
+            <div className="ml-2">Always bet on Prime.</div>
+        </div>
+    );
+
+    const code = {
+        basic: `
+<Message
+style={{
+    border: 'solid #696cff',
+    borderWidth: '0 0 0 6px',
+    color: '#696cff'
+}}
+className="border-primary w-full justify-content-start"
+severity="info"
+content={content}
+/>
+        `,
+        javascript: `
+import React from 'react';
+import { Message } from 'primereact/message';
+
+export default function TemplateDemo() {
+    const content = (
+        <div className="flex align-items-center">
+            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" width="32" />
+            <div className="ml-2">Always bet on Prime.</div>
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Message
+                style={{
+                    border: 'solid #696cff',
+                    borderWidth: '0 0 0 6px',
+                    color: '#696cff'
+                }}
+                className="border-primary w-full justify-content-start"
+                severity="info"
+                content={content}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Message } from 'primereact/message';
+
+export default function TemplateDemo() {
+    const content = (
+        <div className="flex align-items-center">
+            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" width="32" />
+            <div className="ml-2">Always bet on Prime.</div>
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <Message
+                style={{
+                    border: 'solid #696cff',
+                    borderWidth: '0 0 0 6px',
+                    color: '#696cff'
+                }}
+                className="border-primary w-full justify-content-start"
+                severity="info"
+                content={content}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content is displayed with the <i>content</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Message
+                    style={{
+                        border: 'solid #696cff',
+                        borderWidth: '0 0 0 6px',
+                        color: '#696cff'
+                    }}
+                    className="border-primary w-full justify-content-start"
+                    severity="info"
+                    content={content}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/message/theming/styleddoc.js b/components/doc/message/theming/styleddoc.js
new file mode 100644
index 0000000000..0e6e729995
--- /dev/null
+++ b/components/doc/message/theming/styleddoc.js
@@ -0,0 +1,59 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-messages</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-info</td>
+                            <td>Container element when displaying info messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-warn</td>
+                            <td>Container element when displaying warning messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-error</td>
+                            <td>Container element when displaying error messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-success</td>
+                            <td>Container element when displaying success messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-close</td>
+                            <td>Close icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-icon</td>
+                            <td>Severity icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-summary</td>
+                            <td>Summary of a message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-messages-detail</td>
+                            <td>Detail of a message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/message/theming/tailwinddoc.js b/components/doc/message/theming/tailwinddoc.js
new file mode 100644
index 0000000000..857e575ab2
--- /dev/null
+++ b/components/doc/message/theming/tailwinddoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {  
+    message: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex items-center justify-center align-top', 'p-3 m-0 rounded-md', {
+                'bg-blue-100 border-0 text-blue-700': props.severity == 'info',
+                'bg-green-100 border-0 text-green-700': props.severity == 'success',
+                'bg-orange-100 border-0 text-orange-700': props.severity == 'warn',
+                'bg-red-100 border-0 text-red-700': props.severity == 'error'
+            })
+        }),
+        icon: 'text-base mr-2'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Message } from 'primereact/message';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex flex-wrap items-center justify-center gap-3">
+            <Message severity="info" text="Info Message" />
+            <Message severity="success" text="Success Message" />
+            <Message severity="warn" text="Warning Message" />
+            <Message severity="error" text="Error Message" />
+            <Message severity="secondary" text="Secondary Message" />
+            <Message severity="contrast" text="Contrast Message" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/message/validationdoc.js b/components/doc/message/validationdoc.js
new file mode 100644
index 0000000000..edc269f3db
--- /dev/null
+++ b/components/doc/message/validationdoc.js
@@ -0,0 +1,90 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { Message } from '@/components/lib/message/Message';
+
+export function ValidationDoc(props) {
+    const code = {
+        basic: `
+<div className="flex flex-wrap align-items-center mb-3 gap-2">
+    <label htmlFor="username" className="p-hidden-accessible">Username</label>
+    <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
+    <Message severity="error" text="Username is required" />
+</div>
+<div className="flex flex-wrap align-items-center gap-2">
+    <label htmlFor="email" className="p-hidden-accessible">Email</label>
+    <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
+    <Message severity="error" />
+</div>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Message } from 'primereact/message';
+import { InputText } from 'primereact/inputtext';
+
+export default function ValidationDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap align-items-center mb-3 gap-2">
+                <label htmlFor="username" className="p-hidden-accessible">Username</label>
+                <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
+                <Message severity="error" text="Username is required" />
+            </div>
+            <div className="flex flex-wrap align-items-center gap-2">
+                <label htmlFor="email" className="p-hidden-accessible">Email</label>
+                <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
+                <Message severity="error" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Message } from 'primereact/message';
+import { InputText } from 'primereact/inputtext';
+
+export default function ValidationDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap align-items-center mb-3 gap-2">
+                <label htmlFor="username" className="p-hidden-accessible">Username</label>
+                <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
+                <Message severity="error" text="Username is required" />
+            </div>
+            <div className="flex flex-wrap align-items-center gap-2">
+                <label htmlFor="email" className="p-hidden-accessible">Email</label>
+                <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
+                <Message severity="error" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Message component is handy when displaying error messages next to form elements.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap align-items-center mb-3 gap-2">
+                    <label htmlFor="username" className="p-hidden-accessible">
+                        Username
+                    </label>
+                    <InputText id="username" placeholder="Username" className="p-invalid mr-2" />
+                    <Message severity="error" text="Username is required" />
+                </div>
+                <div className="flex flex-wrap align-items-center gap-2">
+                    <label htmlFor="email" className="p-hidden-accessible">
+                        Email
+                    </label>
+                    <InputText id="email" placeholder="Email" className="p-invalid mr-2" />
+                    <Message severity="error" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/accessibilitydoc.js b/components/doc/messages/accessibilitydoc.js
new file mode 100644
index 0000000000..44120b6191
--- /dev/null
+++ b/components/doc/messages/accessibilitydoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Message components use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true". Since any attribute is passed to the root element, attributes like <i>aria-labelledby</i> and{' '}
+                <i>aria-label</i> can optionally be used as well.
+            </p>
+
+            <p>
+                Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="http://github.com/locale">locale</Link> API by default, you may use
+                <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+            </p>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the message.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/messages/basicdoc.js b/components/doc/messages/basicdoc.js
new file mode 100644
index 0000000000..d5abcc9c8e
--- /dev/null
+++ b/components/doc/messages/basicdoc.js
@@ -0,0 +1,79 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import { Messages } from '@/components/lib/messages/Messages';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false });
+        }
+    });
+
+    const code = {
+        basic: `
+<Messages ref={msgs} />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function BasicDemo() {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false });
+        }
+    }); 
+
+    return (
+        <div className="card flex justify-content-center">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function BasicDemo() {
+    const msgs = useRef<Messages>(null);
+
+    useMountEffect(() => {
+        msgs.current?.clear();
+        msgs.current?.show({ id: '1', sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false });
+    });
+
+    return (
+        <div className="card flex justify-content-center">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Messages are displayed by calling the <i>show</i> method provided by the component <i>ref</i>. A single message is specified by the Message interface that defines various properties such as <i>severity</i>, <i>summary</i> and{' '}
+                    <i>detail</i>
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Messages ref={msgs} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/closeabledoc.js b/components/doc/messages/closeabledoc.js
new file mode 100644
index 0000000000..41acfbc14b
--- /dev/null
+++ b/components/doc/messages/closeabledoc.js
@@ -0,0 +1,90 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import { Messages } from '@/components/lib/messages/Messages';
+import { useRef } from 'react';
+
+export function ClosableDoc(props) {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'success', summary: 'Success', detail: 'Closable Message' },
+                { sticky: true, severity: 'info', summary: 'Info', detail: 'Not Closable Message', closable: false }
+            ]);
+        }
+    });
+
+    const code = {
+        basic: `
+msgs.current.show([
+    { sticky: true, severity: 'success', summary: 'Success', detail: 'Message is closable'},
+    { sticky: true, severity: 'info', summary: 'Info', detail: 'Message is not closable', closable: false}
+]);
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function ClosableDemo() {
+    const msgs = useRef(null);
+    
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'success', summary: 'Success', detail: 'Closable Message' },
+                { sticky: true, severity: 'info', summary: 'Info', detail: 'Not Closable Message', closable: false }
+            ]);
+        }
+    });
+
+    return (
+        <div className="card">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function ClosableDemo() {
+    const msgs = useRef<Messages>(null);
+
+    useMountEffect(() => {
+        msgs.current?.clear();
+        msgs.current?.show([
+            { sticky: true, severity: 'success', summary: 'Success', detail: 'Closable Message' },
+            { sticky: true, severity: 'info', summary: 'Info', detail: 'Not Closable Message', closable: false }
+        ]);
+    };
+
+    return (
+        <div className="card">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A message displays a close icon by default, <i>closable</i> option is used to control this behavior.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Messages ref={msgs} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/customicon.js b/components/doc/messages/customicon.js
new file mode 100644
index 0000000000..955930c6b6
--- /dev/null
+++ b/components/doc/messages/customicon.js
@@ -0,0 +1,126 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import { Messages } from '@/components/lib/messages/Messages';
+import React, { useRef } from 'react';
+
+export function CustomIcon(props) {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'info', icon: 'pi pi-send', detail: 'Info message' },
+                {
+                    severity: 'success',
+                    sticky: true,
+                    content: (
+                        <React.Fragment>
+                            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
+                            <div className="ml-2">How may I help you?</div>
+                        </React.Fragment>
+                    )
+                }
+            ]);
+        }
+    });
+
+    const code = {
+        basic: `
+msgs.current.show([
+    { sticky: true, severity: 'info', icon: 'pi pi-send', detail: 'Info message' },
+    {
+        severity: 'success',
+        sticky: true,
+        content: (
+            <React.Fragment>
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
+                <div className="ml-2">How may I help you?</div>
+            </React.Fragment>
+        )
+    }
+]);
+        `,
+        javascript: `
+import React, { useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function BasicDemo() {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'info', icon: 'pi pi-send', detail: 'Info message' },
+                {
+                    severity: 'success',
+                    sticky: true,
+                    content: (
+                        <React.Fragment>
+                            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
+                            <div className="ml-2">How may I help you?</div>
+                        </React.Fragment>
+                    )
+                }
+            ]);
+        }
+    }); 
+
+    return (
+        <div className="card flex justify-content-center">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function BasicDemo() {
+    const msgs = useRef<Messages>(null);
+
+    useMountEffect(() => {
+        msgs.current?.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'info', icon: 'pi pi-send', detail: 'Info message' },
+                {
+                    severity: 'success',
+                    sticky: true,
+                    content: (
+                        <React.Fragment>
+                            <img alt="logo" src="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" width="32" />
+                            <div className="ml-2">How may I help you?</div>
+                        </React.Fragment>
+                    )
+                }
+            ]);
+    });
+
+    return (
+        <div className="card flex justify-content-center">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A message with custom icon can be created by simply using <i>icon</i> or <i>content</i> options.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Messages ref={msgs} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/dynamicdoc.js b/components/doc/messages/dynamicdoc.js
new file mode 100644
index 0000000000..7c58a4c4f4
--- /dev/null
+++ b/components/doc/messages/dynamicdoc.js
@@ -0,0 +1,110 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Messages } from '@/components/lib/messages/Messages';
+import { useRef } from 'react';
+
+export function DynamicDoc(props) {
+    const msgs = useRef(null);
+
+    const addMessages = () => {
+        msgs.current.show([
+            { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true, closable: false }
+        ]);
+    };
+
+    const clearMessages = () => {
+        msgs.current.clear();
+    };
+
+    const code = {
+        basic: `
+<Button type="button" onClick={addMessages} label="Show" className="mr-2" />
+<Button type="button" onClick={clearMessages} label="Clear" className="p-button-secondary" />
+
+<Messages ref={msgs} />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Messages } from 'primereact/messages';
+
+export default function DynamicDemo() {
+    const msgs = useRef(null);
+
+    const addMessages = () => {
+        msgs.current.show([
+            { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true, closable: false }
+        ]);
+    };
+
+    const clearMessages = () => {
+        msgs.current.clear();
+    };
+
+    return (
+        <div className="card">
+            <Button type="button" onClick={addMessages} label="Show" className="mr-2" />
+            <Button type="button" onClick={clearMessages} label="Clear" className="p-button-secondary" />
+
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Messages } from 'primereact/messages';
+
+export default function DynamicDemo() {
+    const msgs = useRef(null);
+
+    const addMessages = () => {
+        msgs.current.show([
+            { severity: 'success', summary: 'Success', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'info', summary: 'Info', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'warn', summary: 'Warning', detail: 'Message Content', sticky: true, closable: false },
+            { severity: 'error', summary: 'Error', detail: 'Message Content', sticky: true, closable: false }
+        ]);
+    };
+
+    const clearMessages = () => {
+        msgs.current?.clear();
+    };
+
+    return (
+        <div className="card">
+            <Button type="button" onClick={addMessages} label="Show" className="mr-2" />
+            <Button type="button" onClick={clearMessages} label="Clear" className="p-button-secondary" />
+
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Multiple messages are displayed by passing an array to the <i>show</i> method.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Button type="button" onClick={addMessages} label="Show" className="mr-2" />
+                <Button type="button" onClick={clearMessages} label="Clear" className="p-button-secondary" />
+
+                <Messages ref={msgs} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/importdoc.js b/components/doc/messages/importdoc.js
new file mode 100644
index 0000000000..bf5f37247a
--- /dev/null
+++ b/components/doc/messages/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Messages } from 'primereact/messages';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/messages/pt/wireframe.js b/components/doc/messages/pt/wireframe.js
new file mode 100644
index 0000000000..6e737aa645
--- /dev/null
+++ b/components/doc/messages/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="Messages" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/messages/severitydoc.js b/components/doc/messages/severitydoc.js
new file mode 100644
index 0000000000..f4db4d3e09
--- /dev/null
+++ b/components/doc/messages/severitydoc.js
@@ -0,0 +1,102 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import { Messages } from '@/components/lib/messages/Messages';
+import { useRef } from 'react';
+
+export function SeverityDoc(props) {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false }
+            ]);
+        }
+    });
+
+    const code = {
+        basic: `
+msgs.current.show([
+    {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false},
+    {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false},
+    {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false},
+    {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false},
+    {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false},
+    {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false}
+]);
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function SeverityDemo() {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content', closable: false },
+                { sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content', closable: false }
+            ]);
+        }
+    });
+
+    return (
+        <Messages ref={msgs} />
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function SeverityDemo() {
+    const msgs = useRef<Messages>(null);
+
+    useMountEffect(() => {
+        msgs.current?.clear();
+        msgs.current?.show([
+            {sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content'},
+            {sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content'},
+            {sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content'},
+            {sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content'},
+            {sticky: true, severity: 'secondary', summary: 'Secondary', detail: 'Message Content'},
+            {sticky: true, severity: 'contrast', summary: 'Contrast', detail: 'Message Content'}
+        ]);
+    });
+
+    return (
+        <Messages ref={msgs} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>severity</i> option specifies the type of the message.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Messages ref={msgs} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/stickydoc.js b/components/doc/messages/stickydoc.js
new file mode 100644
index 0000000000..afc3ed61a4
--- /dev/null
+++ b/components/doc/messages/stickydoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import { Messages } from '@/components/lib/messages/Messages';
+import { useRef } from 'react';
+
+export function StickyDoc(props) {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, life: 1000, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
+                { sticky: true, life: 2000, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
+                { sticky: true, life: 3000, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
+                { sticky: true, life: 4000, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
+            ]);
+        }
+    });
+
+    const code = {
+        basic: `
+msgs.current.show([
+    { sticky: true, life: 1000, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
+    { sticky: true, life: 2000, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
+    { sticky: true, life: 3000, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
+    { sticky: true, life: 4000, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
+]);
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function StickyDemo() {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, life: 1000, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
+                { sticky: true, life: 2000, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
+                { sticky: true, life: 3000, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
+                { sticky: true, life: 4000, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
+            ]);
+        }
+    });
+
+    return (
+        <div className="card">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function StickyDemo() {
+    const msgs = useRef<Messages>(null);
+
+    useMountEffect(() => {
+        msgs.current?.clear();
+        msgs.current?.show([
+            { sticky: true, life: 1000, severity: 'success', summary: 'Success', detail: 'Message Content', closable: false },
+            { sticky: true, life: 2000, severity: 'info', summary: 'Info', detail: 'Message Content', closable: false },
+            { sticky: true, life: 3000, severity: 'warn', summary: 'Warning', detail: 'Message Content', closable: false },
+            { sticky: true, life: 4000, severity: 'error', summary: 'Error', detail: 'Message Content', closable: false }
+        ]);
+    });
+
+    return (
+        <div className="card">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A message disappears after 3000ms defined the <i>life</i> option, set <i>sticky</i> option to displays message that do not hide automatically.
+                </p>
+            </DocSectionText>
+            <div className="card ">
+                <Messages ref={msgs} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/styledoc.js b/components/doc/messages/styledoc.js
new file mode 100644
index 0000000000..bf8bf36477
--- /dev/null
+++ b/components/doc/messages/styledoc.js
@@ -0,0 +1,63 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-message</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-info</td>
+                            <td>Container element when displaying info messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-warn</td>
+                            <td>Container element when displaying warning messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-error</td>
+                            <td>Container element when displaying error messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-success</td>
+                            <td>Container element when displaying success messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-close</td>
+                            <td>Close icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-icon</td>
+                            <td>Severity icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-summary</td>
+                            <td>Summary of a message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-detail</td>
+                            <td>Detail of a message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/messages/templatedoc.js b/components/doc/messages/templatedoc.js
new file mode 100644
index 0000000000..60ab6caf5c
--- /dev/null
+++ b/components/doc/messages/templatedoc.js
@@ -0,0 +1,112 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import { Messages } from '@/components/lib/messages/Messages';
+import React, { useRef } from 'react';
+
+export function TemplateDoc(props) {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show({
+                severity: 'info',
+                sticky: true,
+                content: (
+                    <React.Fragment>
+                        <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" width="32" />
+                        <div className="ml-2">Always bet on Prime.</div>
+                    </React.Fragment>
+                )
+            });
+        }
+    });
+
+    const code = {
+        basic: `
+    msgs.current.show({
+        severity: 'info',
+        sticky: true,
+        content: (
+            <React.Fragment>
+                <img alt="logo" src="http://github.com/images/logo.png" width="32" />
+                <div className="ml-2">Always bet on Prime.</div>
+            </React.Fragment>
+        )
+    });
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function TemplateDemo() {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show({
+                severity: 'info',
+                sticky: true,
+                content: (
+                    <React.Fragment>
+                        <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" width="32" />
+                        <div className="ml-2">Always bet on Prime.</div>
+                    </React.Fragment>
+                )
+            });
+        }
+    });
+
+    return (
+        <div className="card">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function TemplateDemo() {
+    const msgs = useRef<Messages>(null);
+
+    useMountEffect(() => {
+        msgs.current>.clear();
+        msgs.current?.show({
+            severity: 'info', sticky: true, content: (
+                <React.Fragment>
+                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" width="32" />
+                    <div className="ml-2">Always bet on Prime.</div>
+                </React.Fragment>
+            )
+        });
+    });
+
+    return (
+        <div className="card">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content inside a message is defined with the <i>content</i> option.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Messages ref={msgs} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/messages/theming/styleddoc.js b/components/doc/messages/theming/styleddoc.js
new file mode 100644
index 0000000000..73c6470f9f
--- /dev/null
+++ b/components/doc/messages/theming/styleddoc.js
@@ -0,0 +1,59 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-message</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-info</td>
+                            <td>Container element when displaying info messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-warn</td>
+                            <td>Container element when displaying warning messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-error</td>
+                            <td>Container element when displaying error messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-success</td>
+                            <td>Container element when displaying success messages.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-close</td>
+                            <td>Close icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-icon</td>
+                            <td>Severity icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-summary</td>
+                            <td>Summary of a message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-message-detail</td>
+                            <td>Detail of a message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/messages/theming/tailwinddoc.js b/components/doc/messages/theming/tailwinddoc.js
new file mode 100644
index 0000000000..237a035117
--- /dev/null
+++ b/components/doc/messages/theming/tailwinddoc.js
@@ -0,0 +1,83 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {  
+    messages: {
+        root: ({ state, index }) => {
+            return {
+                className: classNames('my-4 rounded-md', {
+                    'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': state.messages[index] && state.messages[index].message.severity == 'info',
+                    'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': state.messages[index] && state.messages[index].message.severity == 'success',
+                    'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': state.messages[index] && state.messages[index].message.severity == 'warn',
+                    'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': state.messages[index] && state.messages[index].message.severity == 'error'
+                })
+            };
+        },
+        wrapper: 'flex items-center py-5 px-7',
+        icon: {
+            className: classNames('w-6 h-6', 'text-lg mr-2')
+        },
+        text: 'text-base font-normal',
+        button: {
+            className: classNames('w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30')
+        },
+        transition: {
+            enterFromClass: 'opacity-0',
+            enterActiveClass: 'transition-opacity duration-300',
+            leaveFromClass: 'max-h-40',
+            leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+            leaveToClass: 'max-h-0 opacity-0 !m-0'
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useEffect, useRef } from 'react'; 
+import { useMountEffect } from 'primereact/hooks';
+import { Messages } from 'primereact/messages';
+
+export default function UnstyledDemo() {
+    const msgs = useRef(null);
+
+    useMountEffect(() => {
+        if (msgs.current) {
+            msgs.current.clear();
+            msgs.current.show([
+                { sticky: true, severity: 'info', summary: 'Info', detail: 'Message Content' },
+                { sticky: true, severity: 'success', summary: 'Success', detail: 'Message Content' },
+                { sticky: true, severity: 'warn', summary: 'Warning', detail: 'Message Content' },
+                { sticky: true, severity: 'error', summary: 'Error', detail: 'Message Content' }
+            ]);
+        }
+    });
+
+    return (
+        <div className="card">
+            <Messages ref={msgs} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/metergroup/accessibilitydoc.js b/components/doc/metergroup/accessibilitydoc.js
new file mode 100644
index 0000000000..6c1478a1e2
--- /dev/null
+++ b/components/doc/metergroup/accessibilitydoc.js
@@ -0,0 +1,26 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="dd1">Options</span>
+<MultiSelect aria-labelledby="dd1" />
+
+<MultiSelect aria-label="Options" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                MeterGroup component uses <i>meter</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> prop.
+            </p>
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/metergroup/basicdoc.js b/components/doc/metergroup/basicdoc.js
new file mode 100644
index 0000000000..c6052ad59a
--- /dev/null
+++ b/components/doc/metergroup/basicdoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function BasicDemo() {
+    const values = [{ label: 'Space used', value: 15 }];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function BasicDemo() {
+    const values = [{ label: 'Space used', value: 15 }];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `
+    };
+
+    const values = [{ label: 'Space used', value: 15 }];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MeterGroup values={values} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/metergroup/icondoc.js b/components/doc/metergroup/icondoc.js
new file mode 100644
index 0000000000..6c854c3698
--- /dev/null
+++ b/components/doc/metergroup/icondoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function IconDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function IconDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+        { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+        { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+        { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function IconDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+        { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+        { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+        { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `
+    };
+
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16, icon: 'pi pi-table' },
+        { label: 'Messages', color: '#fbbf24', value: 8, icon: 'pi pi-inbox' },
+        { label: 'Media', color: '#60a5fa', value: 24, icon: 'pi pi-image' },
+        { label: 'System', color: '#c084fc', value: 10, icon: 'pi pi-cog' }
+    ];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Icons can be displayed next to the labels instead of the default marker.</p>
+            </DocSectionText>
+            <div className="card">
+                <MeterGroup values={values} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/metergroup/importdoc.js b/components/doc/metergroup/importdoc.js
new file mode 100644
index 0000000000..e5e2b19cdd
--- /dev/null
+++ b/components/doc/metergroup/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { MeterGroup } from 'primereact/metergroup';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/metergroup/labeldoc.js b/components/doc/metergroup/labeldoc.js
new file mode 100644
index 0000000000..74897fb8da
--- /dev/null
+++ b/components/doc/metergroup/labeldoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function LabelDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} labelPosition="start" labelOrientation="vertical" />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function LabelDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} labelPosition="start" labelOrientation="vertical" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function LabelDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} labelPosition="start" labelOrientation="vertical" />
+        </div>
+    )
+}
+        `
+    };
+
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The position of the labels relative to the meters is defined using the <i>labelPosition</i> property. The default orientation of the labels is horizontal, and the vertical alternative is available through the{' '}
+                    <i>labelOrientation</i> option.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MeterGroup values={values} labelPosition="start" labelOrientation="vertical" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/metergroup/minmaxdoc.js b/components/doc/metergroup/minmaxdoc.js
new file mode 100644
index 0000000000..8bb78ce7e1
--- /dev/null
+++ b/components/doc/metergroup/minmaxdoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function MinMaxDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} max="200" />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function MinMaxDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} max="200" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function MinMaxDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }    
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} max="200" />
+        </div>
+    )
+}
+        `
+    };
+
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Boundaries are configured with the <i>min</i> and <i>max</i> values whose defaults are 0 and 100 respectively.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MeterGroup values={values} max="200" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/metergroup/multipledoc.js b/components/doc/metergroup/multipledoc.js
new file mode 100644
index 0000000000..580a13540a
--- /dev/null
+++ b/components/doc/metergroup/multipledoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function MultipleDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function MultipleDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function MultipleDemo() {
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup values={values} />
+        </div>
+    )
+}
+        `
+    };
+
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 16 },
+        { label: 'Messages', color: '#fbbf24', value: 8 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 10 }
+    ];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Adding more items to the array displays the meters in a group.</p>
+            </DocSectionText>
+            <div className="card">
+                <MeterGroup values={values} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/metergroup/pt/wireframe.js b/components/doc/metergroup/pt/wireframe.js
new file mode 100644
index 0000000000..2bfcccfa8c
--- /dev/null
+++ b/components/doc/metergroup/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="metergroup" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/metergroup/templatedoc.js b/components/doc/metergroup/templatedoc.js
new file mode 100644
index 0000000000..2680477e05
--- /dev/null
+++ b/components/doc/metergroup/templatedoc.js
@@ -0,0 +1,226 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+import { Button } from '@/components/lib/button/Button';
+import { Card } from '@/components/lib/card/Card';
+
+export function TemplateDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function TemplateDemo() {
+    const meter = (props, attr) => <span {...attr} key={props.index} style={{ background: \`linear-gradient(to right, \${props.color1}, \${props.color2})\`, width: props.percentage + '%' }} />;
+
+    const labelList = ({ values }) => (
+        <div className="flex flex-wrap gap-3">
+            {values.map((item, index) => (
+                <Card className="flex-1" key={index}>
+                    <div className="flex justify-content-between gap-5">
+                        <div className="flex flex-column gap-1">
+                            <span className="text-secondary text-sm">{item.label}</span>
+                            <span className="font-bold text-lg">{item.value}%</span>
+                        </div>
+                        <span className="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" style={{ backgroundColor: item.color1, color: '#ffffff' }}>
+                            <i className={item.icon} />
+                        </span>
+                    </div>
+                </Card>
+            ))}
+        </div>
+    );
+
+    const start = ({ totalPercent }) => (
+        <div className="flex justify-content-between mt-3 mb-2 relative">
+            <span>Storage</span>
+            <span style={{ width: totalPercent + '%' }} className="absolute text-right">
+                {totalPercent}%
+            </span>
+            <span className="font-medium">1TB</span>
+        </div>
+    );
+
+    const end = (
+        <div className="flex justify-content-between mt-3">
+            <Button label="Manage Storage" outlined size="small" />
+            <Button label="Update Plan" size="small" />
+        </div>
+    );
+
+    const values = [
+        { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+        { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+        { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+        { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meter }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup labelPosition="start" values={values} start={start} end={end} meter={meter} labelList={labelList} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function TemplateDemo() {
+    const meter = (props: any, attr: any) => (
+        <span
+            {...attr}
+            key={props.index}
+            style={{
+                background: \`linear-gradient(to right, \${props.color1}, \${props.color2})\`,
+                width: props.percentage + '%',
+            }}
+        />
+    );
+
+    const start = ({ totalPercent }: {totalPercent: number}) => (
+        <div className="flex justify-content-between mt-3 mb-2 relative">
+            <span>Storage</span>
+            <span
+                style={{ width: totalPercent + '%' }}
+                className="absolute text-right"
+            >
+                {totalPercent}%
+            </span>
+            <span className="font-medium">1TB</span>
+        </div>
+    );
+
+    const end = (
+        <div className="flex justify-content-between mt-3">
+            <Button label="Manage Storage" outlined size="small" />
+            <Button label="Update Plan" size="small" />
+        </div>
+    );
+
+    const labelList = ({ values }: {values: any[]}) => (
+        <div className="flex flex-wrap gap-3">
+            {values.map((item, index) => (
+                <Card
+                    className="flex-1"
+                    key={index}
+                >
+                    <div className="flex justify-content-between gap-5">
+                    <div className="flex flex-column gap-1">
+                        <span className="text-secondary text-sm">{item.label}</span>
+                        <span className="font-bold text-lg">{item.value}%</span>
+                    </div>
+                    <span
+                        className="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center"
+                        style={{ backgroundColor: item.color1, color: '#ffffff' }}
+                    >
+                        <i className={item.icon} />
+                    </span>
+                    </div>
+                </Card>
+            ))}
+        </div>
+    );
+
+    const values = [
+        {
+            label: 'Apps',
+            color1: '#34d399',
+            color2: '#fbbf24',
+            value: 25,
+            icon: 'pi pi-table',
+        },
+        {
+            label: 'Messages',
+            color1: '#fbbf24',
+            color2: '#60a5fa',
+            value: 15,
+            icon: 'pi pi-inbox',
+        }, 
+        {
+            label: 'Media',
+            color1: '#60a5fa',
+            color2: '#c084fc',
+            value: 20,
+            icon: 'pi pi-image',
+        },
+        {
+            label: 'System',
+            color1: '#c084fc',
+            color2: '#c084fc',
+            value: 10,
+            icon: 'pi pi-cog',
+            meterTemplate: meter,
+        },
+    ];
+    
+    return (
+        <div className="card flex justify-content-center">
+            <MeterGroup labelPosition="start" values={values} start={start} end={end} meter={meter} labelList={labelList} />
+        </div>
+    )
+}
+        `
+    };
+
+    const meter = (props, attr) => <span {...attr} key={props.index} style={{ background: `linear-gradient(to right, ${props.color1}, ${props.color2})`, width: props.percentage + '%' }} />;
+
+    const labelList = ({ values }) => (
+        <div className="flex flex-wrap gap-3">
+            {values.map((item, index) => (
+                <Card className="flex-1" key={index}>
+                    <div className="flex justify-content-between gap-5">
+                        <div className="flex flex-column gap-1">
+                            <span className="text-secondary text-sm">{item.label}</span>
+                            <span className="font-bold text-lg">{item.value}%</span>
+                        </div>
+                        <span className="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" style={{ backgroundColor: item.color1, color: '#ffffff' }}>
+                            <i className={item.icon} />
+                        </span>
+                    </div>
+                </Card>
+            ))}
+        </div>
+    );
+
+    const start = ({ totalPercent }) => (
+        <div className="flex justify-content-between mt-3 mb-2 relative">
+            <span>Storage</span>
+            <span style={{ width: totalPercent + '%' }} className="absolute text-right">
+                {totalPercent}%
+            </span>
+            <span className="font-medium">1TB</span>
+        </div>
+    );
+
+    const end = (
+        <div className="flex justify-content-between mt-3">
+            <Button label="Manage Storage" outlined size="small" />
+            <Button label="Update Plan" size="small" />
+        </div>
+    );
+
+    const values = [
+        { label: 'Apps', color1: '#34d399', color2: '#fbbf24', value: 25, icon: 'pi pi-table' },
+        { label: 'Messages', color1: '#fbbf24', color2: '#60a5fa', value: 15, icon: 'pi pi-inbox' },
+        { label: 'Media', color1: '#60a5fa', color2: '#c084fc', value: 20, icon: 'pi pi-image' },
+        { label: 'System', color1: '#c084fc', color2: '#c084fc', value: 10, icon: 'pi pi-cog', meterTemplate: meter }
+    ];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <MeterGroup labelPosition="start" values={values} start={start} end={end} meter={meter} labelList={labelList} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/metergroup/theming/styleddoc.js b/components/doc/metergroup/theming/styleddoc.js
new file mode 100644
index 0000000000..b1e38fa655
--- /dev/null
+++ b/components/doc/metergroup/theming/styleddoc.js
@@ -0,0 +1,76 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-metergroup</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-horizontal</td>
+                            <td>Container element when orientation mode is horizontal.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-vertical</td>
+                            <td>Container element when orientation mode is vertical.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-meter-container</td>
+                            <td>Container of the meters.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-meter</td>
+                            <td>Content of a meter.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label-list</td>
+                            <td>Container element of the list of labels.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label-list-start</td>
+                            <td>Container element when label position is start.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label-list-end</td>
+                            <td>Container element when label position is end.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label-list-horizontal</td>
+                            <td>Container element when label orientation is horizontal.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label-list-vertical</td>
+                            <td>Container element when label orientation is vertical.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label-list-item</td>
+                            <td>Container element of a list item.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label-list-type</td>
+                            <td>Container element of a list type.</td>
+                        </tr>
+                        <tr>
+                            <td>p-metergroup-label</td>
+                            <td>Content of a label.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/metergroup/verticaldoc.js b/components/doc/metergroup/verticaldoc.js
new file mode 100644
index 0000000000..13c2578acc
--- /dev/null
+++ b/components/doc/metergroup/verticaldoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MeterGroup } from '@/components/lib/metergroup/MeterGroup';
+
+export function VerticalDoc(props) {
+    const code = {
+        basic: `
+<MeterGroup values={values} orientation="vertical" labelOrientation="vertical" />
+        `,
+        javascript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function VerticalDemo() {
+    const values = [
+         { label: 'Apps', color: '#34d399', value: 24 },
+        { label: 'Messages', color: '#fbbf24', value: 16 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 12 }
+    ];
+
+    return (
+        <div className="card flex justify-content-center" style={{ height: '360px' }}>
+            <MeterGroup values={values} orientation="vertical" labelOrientation="vertical" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useEffect, useRef } from 'react';
+import { MeterGroup } from 'primereact/metergroup';
+
+export default function VerticalDemo() {
+    const values = [
+         { label: 'Apps', color: '#34d399', value: 24 },
+        { label: 'Messages', color: '#fbbf24', value: 16 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 12 }
+    ];
+
+    return (
+        <div className="card flex justify-content-center" style={{ height: '360px' }}>
+            <MeterGroup values={values} orientation="vertical" labelOrientation="vertical" />
+        </div>
+    )
+}
+        `
+    };
+
+    const values = [
+        { label: 'Apps', color: '#34d399', value: 24 },
+        { label: 'Messages', color: '#fbbf24', value: 16 },
+        { label: 'Media', color: '#60a5fa', value: 24 },
+        { label: 'System', color: '#c084fc', value: 12 }
+    ];
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MeterGroup requires a <i>value</i> as the data to display where each item in the collection should be a type of <i>MeterItem</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center" style={{ height: '360px' }}>
+                <MeterGroup values={values} orientation="vertical" labelOrientation="vertical" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/accessibilitydoc.js b/components/doc/multiselect/accessibilitydoc.js
new file mode 100644
index 0000000000..1b0997a053
--- /dev/null
+++ b/components/doc/multiselect/accessibilitydoc.js
@@ -0,0 +1,238 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="dd1">Options</span>
+<MultiSelect aria-labelledby="dd1" />
+
+<MultiSelect aria-label="Options" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The multiselect component has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i>{' '}
+                attributes. The relation between the combobox and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup listbox.
+            </p>
+            <p>
+                The popup listbox uses <i>listbox</i> as the role with <i>aria-multiselectable</i> enabled. Each list item has an <i>option</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-disabled</i> attributes.
+            </p>
+
+            <p>
+                Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the <i>selectAll</i> and <i>unselectAll</i> keys of the <i>aria</i> property from
+                the <Link href="http://github.com/locale">locale</Link> API.
+            </p>
+
+            <p>
+                If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element.
+            </p>
+
+            <p>
+                Close button uses <i>close</i> key of the <i>aria</i> property from the <Link href="http://github.com/locale">locale</Link> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Closed State Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the multiselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Popup Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the selection state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the selection state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup, moves focus to the multiselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option, if there is none then visual focus does not change.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option, if there is none then visual focus does not change.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>any printable character</i>
+                            </td>
+                            <td>Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Toggle All Checkbox Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the checked state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Filter Input Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the multiselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the multiselect element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the multiselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the multiselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the multiselect element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/multiselect/basicdoc.js b/components/doc/multiselect/basicdoc.js
new file mode 100644
index 0000000000..5878c37fca
--- /dev/null
+++ b/components/doc/multiselect/basicdoc.js
@@ -0,0 +1,87 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function BasicDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function BasicDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MultiSelect is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i>{' '}
+                    properties respectively. Default property name for the <i>optionLabel</i> is <i>label</i> and <i>value</i> for the <i>optionValue</i>. If <i>optionValue</i> is omitted and the object has no <i>value</i> property, the object itself
+                    becomes the value of an option. Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} showClear={true} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/chipsdoc.js b/components/doc/multiselect/chipsdoc.js
new file mode 100644
index 0000000000..67e2cea604
--- /dev/null
+++ b/components/doc/multiselect/chipsdoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function ChipsDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" display="chip"
+    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function ChipsDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" display="chip" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function ChipsDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} display="chip" optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Selected values are displayed as a comma separated list by default, setting <i>display</i> as <i>chip</i> displays them as chips.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} display="chip" optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/disableddoc.js b/components/doc/multiselect/disableddoc.js
new file mode 100644
index 0000000000..2cb5b89d28
--- /dev/null
+++ b/components/doc/multiselect/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<MultiSelect disabled placeholder="Select Cities" className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect disabled placeholder="Select Cities" className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect disabled placeholder="Select Cities" className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect disabled placeholder="Select Cities" className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/filleddoc.js b/components/doc/multiselect/filleddoc.js
new file mode 100644
index 0000000000..aee3f1d4b5
--- /dev/null
+++ b/components/doc/multiselect/filleddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function FilledDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FilledDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} showClear={true} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/filterdoc.js b/components/doc/multiselect/filterdoc.js
new file mode 100644
index 0000000000..5bb45ebc61
--- /dev/null
+++ b/components/doc/multiselect/filterdoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function FilterDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+    filter placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function FilterDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                filter filterDelay={400} placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FilterDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                filter filterDelay={400} placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MultiSelect provides built-in filtering that is enabled by adding the <i>filter</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" filter filterDelay={400} placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/floatlabeldoc.js b/components/doc/multiselect/floatlabeldoc.js
new file mode 100644
index 0000000000..23a3e5059b
--- /dev/null
+++ b/components/doc/multiselect/floatlabeldoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
+    <label htmlFor="ms-cities">MultiSelect</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel className="w-full md:w-20rem">
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
+                <label htmlFor="ms-cities">MultiSelect</label>
+            </FloatLabel>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { FloatLabel } from 'primereact/floatlabel';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FloatLabelDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel className="w-full md:w-20rem">
+                <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
+                <label htmlFor="ms-cities">MultiSelect</label>
+            </FloatLabel>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel className="w-full md:w-20rem">
+                    <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" maxSelectedLabels={3} className="w-full" />
+                    <label htmlFor="ms-cities">MultiSelect</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/groupdoc.js b/components/doc/multiselect/groupdoc.js
new file mode 100644
index 0000000000..a1b935f950
--- /dev/null
+++ b/components/doc/multiselect/groupdoc.js
@@ -0,0 +1,208 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function GroupDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`mr-2 flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<MultiSelect value={selectedCities} options={groupedCities} onChange={(e) => setSelectedCities(e.value)} optionLabel="label" 
+    optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate}
+    placeholder="Select Cities" display="chip" className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function GroupedDoc() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const groupedCities = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} options={groupedCities} onChange={(e) => setSelectedCities(e.value)} optionLabel="label" 
+                optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate}
+                placeholder="Select Cities" display="chip" className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+    label: string;
+    value: string;
+}
+
+interface Country {
+    label: string;
+    code: string;
+    items: City[];
+}
+
+export default function GroupedDoc() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const groupedCities: Country[] = [
+        {
+            label: 'Germany',
+            code: 'DE',
+            items: [
+                { label: 'Berlin', value: 'Berlin' },
+                { label: 'Frankfurt', value: 'Frankfurt' },
+                { label: 'Hamburg', value: 'Hamburg' },
+                { label: 'Munich', value: 'Munich' }
+            ]
+        },
+        {
+            label: 'USA',
+            code: 'US',
+            items: [
+                { label: 'Chicago', value: 'Chicago' },
+                { label: 'Los Angeles', value: 'Los Angeles' },
+                { label: 'New York', value: 'New York' },
+                { label: 'San Francisco', value: 'San Francisco' }
+            ]
+        },
+        {
+            label: 'Japan',
+            code: 'JP',
+            items: [
+                { label: 'Kyoto', value: 'Kyoto' },
+                { label: 'Osaka', value: 'Osaka' },
+                { label: 'Tokyo', value: 'Tokyo' },
+                { label: 'Yokohama', value: 'Yokohama' }
+            ]
+        }
+    ];
+
+    const groupedItemTemplate = (option: Country) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCities} options={groupedCities} onChange={(e) => setSelectedCities(e.value)} optionLabel="label" 
+                optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate}
+                placeholder="Select Cities" display="chip" className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Options can be grouped when a nested data structures is provided. To define the label of a group <i>optionGroupLabel</i> property is needed and also <i>optionGroupChildren</i> is required to define the property that refers to the
+                    children of a group.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect
+                    value={selectedCities}
+                    options={groupedCities}
+                    onChange={(e) => setSelectedCities(e.value)}
+                    optionLabel="label"
+                    optionGroupLabel="label"
+                    optionGroupChildren="items"
+                    optionGroupTemplate={groupedItemTemplate}
+                    placeholder="Select Cities"
+                    display="chip"
+                    className="w-full md:w-20rem"
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/importdoc.js b/components/doc/multiselect/importdoc.js
new file mode 100644
index 0000000000..c52198a789
--- /dev/null
+++ b/components/doc/multiselect/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { MultiSelect } from 'primereact/multiselect';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/invaliddoc.js b/components/doc/multiselect/invaliddoc.js
new file mode 100644
index 0000000000..6b0c514ca9
--- /dev/null
+++ b/components/doc/multiselect/invaliddoc.js
@@ -0,0 +1,85 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<MultiSelect invalid value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+    placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function InvalidDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect invalid value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function InvalidDemo() {
+    const [selectedCities, setSelectedCities] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect invalid value={selectedCities} onChange={(e: MultiSelectChangeEvent) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect invalid value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/loadingdoc.js b/components/doc/multiselect/loadingdoc.js
new file mode 100644
index 0000000000..cd8e728957
--- /dev/null
+++ b/components/doc/multiselect/loadingdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+
+export function LoadingDoc(props) {
+    const code = {
+        basic: `
+<MultiSelect loading placeholder="Loading..." className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function LoadingDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect loading placeholder="Loading..." className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function LoadingDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect loading placeholder="Loading..." className="w-full md:w-20rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Loading state can be used <i>loading</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect loading placeholder="Loading..." className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/pt/wireframe.js b/components/doc/multiselect/pt/wireframe.js
new file mode 100644
index 0000000000..3c483e9d8a
--- /dev/null
+++ b/components/doc/multiselect/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/multiselect.jpg" alt="multiselect" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/multiselect/styledoc.js b/components/doc/multiselect/styledoc.js
new file mode 100644
index 0000000000..77b932dee5
--- /dev/null
+++ b/components/doc/multiselect/styledoc.js
@@ -0,0 +1,75 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-multiselect</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-label-container</td>
+                            <td>Container of the label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-label-container</td>
+                            <td>Label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-trigger</td>
+                            <td>Dropdown button.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-panel</td>
+                            <td>Overlay panel for items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-items</td>
+                            <td>List container of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-token</td>
+                            <td>A selected item element container on display='chip' mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-icon</td>
+                            <td>Icon of a selected item element on display='chip' mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-label</td>
+                            <td>Label of a selected item element on display='chip' mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-select-all-label</td>
+                            <td>Label to display when selectAllLabel is defined.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/multiselect/templatedoc.js b/components/doc/multiselect/templatedoc.js
new file mode 100644
index 0000000000..88c26243c6
--- /dev/null
+++ b/components/doc/multiselect/templatedoc.js
@@ -0,0 +1,167 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [selectedCountries, setSelectedCountries] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const countryTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`mr-2 flag flag-${option.code.toLowerCase()}`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const panelFooterTemplate = () => {
+        const length = selectedCountries ? selectedCountries.length : 0;
+
+        return (
+            <div className="py-2 px-3">
+                <b>{length}</b> item{length > 1 ? 's' : ''} selected.
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<MultiSelect value={selectedCountries} options={countries} onChange={(e) => setSelectedCountries(e.value)} optionLabel="name" 
+    placeholder="Select Countries" itemTemplate={countryTemplate} panelFooterTemplate={panelFooterTemplate} className="w-full md:w-20rem" display="chip" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function TemplateDemo() {
+    const [selectedCountries, setSelectedCountries] = useState(null);
+    const countries = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const countryTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const panelFooterTemplate = () => {
+        const length = selectedCountries ? selectedCountries.length : 0;
+
+        return (
+            <div className="py-2 px-3">
+                <b>{length}</b> item{length > 1 ? 's' : ''} selected.
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCountries} options={countries} onChange={(e) => setSelectedCountries(e.value)} optionLabel="name" 
+                placeholder="Select Countries" itemTemplate={countryTemplate} panelFooterTemplate={panelFooterTemplate} className="w-full md:w-20rem" display="chip" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+
+interface Country {
+    name: string;
+    code: string;
+}
+
+export default function TemplateDemo() {
+    const [selectedCountries, setSelectedCountries] = useState<Country[] | null>(null);
+    const countries: Country[] = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Brazil', code: 'BR' },
+        { name: 'China', code: 'CN' },
+        { name: 'Egypt', code: 'EG' },
+        { name: 'France', code: 'FR' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'India', code: 'IN' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Spain', code: 'ES' },
+        { name: 'United States', code: 'US' }
+    ];
+
+    const countryTemplate = (option) => {
+        return (
+            <div className="flex align-items-center">
+                <img alt={option.name} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`mr-2 flag flag-\${option.code.toLowerCase()}\`} style={{ width: '18px' }} />
+                <div>{option.name}</div>
+            </div>
+        );
+    };
+
+    const panelFooterTemplate = () => {
+        const length = selectedCountries ? selectedCountries.length : 0;
+
+        return (
+            <div className="py-2 px-3">
+                <b>{length}</b> item{length > 1 ? 's' : ''} selected.
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect value={selectedCountries} options={countries} onChange={(e: MultiSelectChangeEvent) => setSelectedCountries(e.value)} optionLabel="name" 
+                placeholder="Select Countries" itemTemplate={countryTemplate} panelFooterTemplate={panelFooterTemplate} className="w-full md:w-20rem" display="chip" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Available options and the selected options support templating with <i>itemTemplate</i> and <i>selectedItemTemplate</i> properties respectively. In addition, header, footer and filter sections can be templated as well.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect
+                    value={selectedCountries}
+                    options={countries}
+                    onChange={(e) => setSelectedCountries(e.value)}
+                    optionLabel="name"
+                    placeholder="Select Countries"
+                    itemTemplate={countryTemplate}
+                    panelFooterTemplate={panelFooterTemplate}
+                    className="w-full md:w-20rem"
+                    display="chip"
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multiselect/theming/styleddoc.js b/components/doc/multiselect/theming/styleddoc.js
new file mode 100644
index 0000000000..6f214a4a90
--- /dev/null
+++ b/components/doc/multiselect/theming/styleddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-multiselect</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-label-container</td>
+                            <td>Container of the label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-label-container</td>
+                            <td>Label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-trigger</td>
+                            <td>Dropdown button.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-panel</td>
+                            <td>Overlay panel for items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-items</td>
+                            <td>List container of items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-token</td>
+                            <td>A selected item element container on display='chip' mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-icon</td>
+                            <td>Icon of a selected item element on display='chip' mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chips-token-label</td>
+                            <td>Label of a selected item element on display='chip' mode.</td>
+                        </tr>
+                        <tr>
+                            <td>p-multiselect-select-all-label</td>
+                            <td>Label to display when selectAllLabel is defined.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/multiselect/theming/tailwinddoc.js b/components/doc/multiselect/theming/tailwinddoc.js
new file mode 100644
index 0000000000..ccedbc75b3
--- /dev/null
+++ b/components/doc/multiselect/theming/tailwinddoc.js
@@ -0,0 +1,161 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {
+    multiselect: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
+        label: ({ props }) => ({
+            className: classNames('block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200', {
+                '!p-3': props.display !== 'chip' && (props.value == null || props.value == undefined),
+                '!py-1.5 px-3': props.display === 'chip' && props.value !== null
+            })
+        }),
+        token: {
+            className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
+        },
+        removeTokenIcon: 'ml-2',
+        trigger: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg')
+        },
+        panel: {
+            className: classNames('bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg')
+        },
+        header: {
+            className: classNames('p-3 border-b border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-800 rounded-t-lg', 'flex items-center justify-between')
+        },
+        headerCheckboxContainer: {
+            className: classNames('inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6')
+        },
+        headerCheckbox: {
+            root: ({ props }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                    {
+                        'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !props?.checked,
+                        'border-blue-500 bg-blue-500': props?.checked
+                    }
+                )
+            })
+        },
+        headerCheckboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
+        closeButton: {
+            className: classNames(
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        closeIcon: 'w-4 h-4 inline-block',
+        wrapper: {
+            className: classNames('max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80')
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+            })
+        }),
+        checkboxContainer: {
+            className: classNames('inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6')
+        },
+        checkbox: ({ context }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context.selected,
+                    'border-blue-500 bg-blue-500': context.selected
+                }
+            )
+        }),
+        checkboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
+        itemGroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        filterContainer: 'relative',
+        filterInput: {
+            root: {
+                className: classNames(
+                    'pr-7 -mr-7',
+                    'w-full',
+                    'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+                )
+            }
+        },
+        filterIcon: '-mt-2 absolute top-1/2',
+        clearIcon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
+        transition: TRANSITIONS.overlay
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function UnstyledDemo() {
+    const [selectedCities, setSelectedCities] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-center">
+            <MultiSelect value={selectedCities} onChange={(e) => setSelectedCities(e.value)} options={cities} optionLabel="name" 
+                placeholder="Select Cities" maxSelectedLabels={3} className="w-full md:w-20rem" />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/multiselect/virtualscrolldoc.js b/components/doc/multiselect/virtualscrolldoc.js
new file mode 100644
index 0000000000..7a69c33f7d
--- /dev/null
+++ b/components/doc/multiselect/virtualscrolldoc.js
@@ -0,0 +1,128 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function VirtualScrollDoc(props) {
+    const [selectAll, setSelectAll] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(null);
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => ({ label: `Item #${i}`, value: i })));
+
+    const code = {
+        basic: `
+<MultiSelect
+    value={selectedItems}
+    options={items}
+    onChange={(e) => {
+        setSelectedItems(e.value);
+        setSelectAll(e.value.length === items.length);
+    }}
+    selectAll={selectAll}
+    onSelectAll={(e) => {
+        setSelectedItems(e.checked ? [] : items.map((item) => item.value));
+        setSelectAll(!e.checked);
+    }}
+    virtualScrollerOptions={{ itemSize: 43 }}
+    maxSelectedLabels={3}
+    placeholder="Select Items"
+    className="w-full md:w-20rem"
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function VirtualScrollDemo() {
+    const [selectAll, setSelectAll] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(null);
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i })));
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect
+            value={selectedItems}
+            options={items}
+            onChange={(e) => {
+                setSelectedItems(e.value);
+                setSelectAll(e.value.length === items.length);
+            }}
+            selectAll={selectAll}
+            onSelectAll={(e) => {
+                setSelectedItems(e.checked ? [] : items.map((item) => item.value));
+                setSelectAll(!e.checked);
+            }}
+            virtualScrollerOptions={{ itemSize: 43 }}
+            maxSelectedLabels={3}
+            placeholder="Select Items"
+            className="w-full md:w-20rem"
+        />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiSelect, MultiSelectChangeEvent, MultiSelectAllEvent } from 'primereact/multiselect';
+
+export default function VirtualScrollDemo() {
+    const [selectAll, setSelectAll] = useState(false);
+    const [selectedItems, setSelectedItems] = useState(null);
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i })));
+
+    return (
+        <div className="card flex justify-content-center">
+            <MultiSelect
+            value={selectedItems}
+            options={items}
+            onChange={(e: MultiSelectChangeEvent) => {
+                setSelectedItems(e.value);
+                setSelectAll(e.value.length === items.length);
+            }}
+            selectAll={selectAll}
+            onSelectAll={(e: MultiSelectAllEvent) => {
+                setSelectedItems(e.checked ? [] : items.map((item) => item.value));
+                setSelectAll(!e.checked);
+            }}
+            virtualScrollerOptions={{ itemSize: 43 }}
+            maxSelectedLabels={3}
+            placeholder="Select Items"
+            className="w-full md:w-20rem"
+        />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    VirtualScroller is used to render a long list of options efficiently like 100K records in this demo. The configuration is done with <i>virtualScrollerOptions</i> property, refer to the{' '}
+                    <Link href="http://github.com/virtualscroller">VirtualScroller</Link> for more information about the available options as it is used internally by MultiSelect.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiSelect
+                    value={selectedItems}
+                    options={items}
+                    onChange={(e) => {
+                        setSelectedItems(e.value);
+                        setSelectAll(e.value.length === items.length);
+                    }}
+                    selectAll={selectAll}
+                    onSelectAll={(e) => {
+                        setSelectedItems(e.checked ? [] : items.map((item) => item.value));
+                        setSelectAll(!e.checked);
+                    }}
+                    virtualScrollerOptions={{ itemSize: 43 }}
+                    maxSelectedLabels={3}
+                    placeholder="Select Items"
+                    className="w-full md:w-20rem"
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multistatecheckbox/accessibilitydoc.js b/components/doc/multistatecheckbox/accessibilitydoc.js
new file mode 100644
index 0000000000..ba475f4113
--- /dev/null
+++ b/components/doc/multistatecheckbox/accessibilitydoc.js
@@ -0,0 +1,54 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="chkbox1">Access Type</span>
+<MultiStateCheckbox aria-labelledby="chkbox1" />
+
+<TriStateCheckbox aria-label="Access Type" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                MultiStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with
+                <i>aria-live</i> attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>optionLabel</i> property that defaults to <i>optionValue</i> if not defined. Unchecked state label
+                on the other hand is retrieved from <i>nullLabel</i> key of the <i>aria</i> property from the <Link href="http://github.com/locale">locale</Link> API. This is an example of a custom accessibility implementation as there is no one to one mapping
+                between the component design and the WCAG specification.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the checkbox.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles between the values.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/multistatecheckbox/basicdoc.js b/components/doc/multistatecheckbox/basicdoc.js
new file mode 100644
index 0000000000..a79ac147dc
--- /dev/null
+++ b/components/doc/multistatecheckbox/basicdoc.js
@@ -0,0 +1,80 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiStateCheckbox } from '@/components/lib/multistatecheckbox/MultiStateCheckbox';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('public');
+    const options = [
+        { value: 'public', icon: 'pi pi-globe' },
+        { value: 'protected', icon: 'pi pi-lock-open' },
+        { value: 'private', icon: 'pi pi-lock' }
+    ];
+
+    const code = {
+        basic: `
+<MultiStateCheckbox value={value} onChange={(e) => setValue(e.value)} options={options} optionValue="value" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('public');
+    const options = [
+        { value: 'public', icon: 'pi pi-globe' },
+        { value: 'protected', icon: 'pi pi-lock-open' },
+        { value: 'private', icon: 'pi pi-lock' }
+    ];
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <MultiStateCheckbox value={value} onChange={(e) => setValue(e.value)} options={options} optionValue="value" />
+            <span>{value || 'no value'}</span>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { MultiStateCheckbox, MultiStateCheckboxChangeEvent } from 'primereact/multistatecheckbox';
+
+interface Item {
+    value: string;
+    icon: string;
+}
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('public');
+    const options: Item[] = [
+        { value: 'public', icon: 'pi pi-globe' },
+        { value: 'protected', icon: 'pi pi-lock-open' },
+        { value: 'private', icon: 'pi pi-lock' }
+    ];
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <MultiStateCheckbox value={value} onChange={(e: MultiStateCheckboxChangeEvent) => setValue(e.value)} options={options} optionValue="value" />
+            <span>{value || 'no value'}</span>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    MultiStateCheckbox is used as a controlled input with <i>value</i> and <i>onChange</i> properties along with the <i>option</i> collection. The <i>optionValue</i> field refers to the value of each option, if ommitted the object
+                    itself becomes the value of an option. The icon to display is retrieved from the <i>optionIcon</i> property that defaults to <i>icon</i> property name.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <MultiStateCheckbox value={value} onChange={(e) => setValue(e.value)} options={options} optionValue="value" />
+                <span>{value || 'no value'}</span>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multistatecheckbox/disableddoc.js b/components/doc/multistatecheckbox/disableddoc.js
new file mode 100644
index 0000000000..b5a236356e
--- /dev/null
+++ b/components/doc/multistatecheckbox/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiStateCheckbox } from '@/components/lib/multistatecheckbox/MultiStateCheckbox';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<MultiStateCheckbox disabled />
+        `,
+        javascript: `
+import React from "react";
+import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <MultiStateCheckbox disabled />
+        </div>
+    );
+}
+        `,
+        typescript: `
+    import React from "react";
+        import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
+        
+        export default function InvalidDemo() {
+            return (
+                <div className="card flex justify-content-center">
+                    <MultiStateCheckbox disabled />
+                </div>
+            );
+        }
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiStateCheckbox disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multistatecheckbox/importdoc.js b/components/doc/multistatecheckbox/importdoc.js
new file mode 100644
index 0000000000..36b6ad6fc0
--- /dev/null
+++ b/components/doc/multistatecheckbox/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/multistatecheckbox/invaliddoc.js b/components/doc/multistatecheckbox/invaliddoc.js
new file mode 100644
index 0000000000..a5ef220be1
--- /dev/null
+++ b/components/doc/multistatecheckbox/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { MultiStateCheckbox } from '@/components/lib/multistatecheckbox/MultiStateCheckbox';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<MultiStateCheckbox className="p-invalid" />
+        `,
+        javascript: `
+import React from "react";
+import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <MultiStateCheckbox className="p-invalid" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+    import React from "react";
+        import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
+        
+        export default function InvalidDemo() {
+            return (
+                <div className="card flex justify-content-center">
+                    <MultiStateCheckbox className="p-invalid" />
+                </div>
+            );
+        }
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <MultiStateCheckbox className="p-invalid" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/multistatecheckbox/pt/wireframe.js b/components/doc/multistatecheckbox/pt/wireframe.js
new file mode 100644
index 0000000000..20eccce913
--- /dev/null
+++ b/components/doc/multistatecheckbox/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/multistatecheckbox.jpg" alt="multistatecheckbox" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/multistatecheckbox/styledoc.js b/components/doc/multistatecheckbox/styledoc.js
new file mode 100644
index 0000000000..82808b484e
--- /dev/null
+++ b/components/doc/multistatecheckbox/styledoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-multistatechkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/multistatecheckbox/theming/styleddoc.js b/components/doc/multistatecheckbox/theming/styleddoc.js
new file mode 100644
index 0000000000..1d2ae70524
--- /dev/null
+++ b/components/doc/multistatecheckbox/theming/styleddoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-multistatechkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/multistatecheckbox/theming/tailwinddoc.js b/components/doc/multistatecheckbox/theming/tailwinddoc.js
new file mode 100644
index 0000000000..01dc7d9ac9
--- /dev/null
+++ b/components/doc/multistatecheckbox/theming/tailwinddoc.js
@@ -0,0 +1,67 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    multistatecheckbox: {
+        root: {
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+        },
+        checkbox: ({ props }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
+                {
+                    'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.value || !props.value,
+                    'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value == null
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        })
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState('public');
+    const options = [
+        { value: 'public', icon: 'pi pi-globe' },
+        { value: 'protected', icon: 'pi pi-lock-open' },
+        { value: 'private', icon: 'pi pi-lock' }
+    ];
+
+    return (
+        <div className="card flex flex-col items-center gap-3">
+            <MultiStateCheckbox value={value} onChange={(e) => setValue(e.value)} options={options} optionValue="value" />
+            <span>{value || 'no value'}</span>
+        </div>
+    );
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/orderlist/accessibilitydoc.js b/components/doc/orderlist/accessibilitydoc.js
new file mode 100644
index 0000000000..d19cd2aea4
--- /dev/null
+++ b/components/doc/orderlist/accessibilitydoc.js
@@ -0,0 +1,149 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="lb">Options</span>
+<OrderList aria-labelledby="lb" />
+
+<OrderList aria-label="City" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the listbox can be provided with <i>listProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list element has a <i>listbox</i> role with the <i>aria-multiselectable</i> attribute. Each list
+                item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
+            </p>
+            <p>
+                Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i> and <i>aria.moveBottom</i> properties of the <Link href="http://github.com/locale">locale</Link> API
+                by default, alternatively you may use
+                <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>ListBox Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the selected state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the selected state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>space</i>
+                            </td>
+                            <td>Selects the items between the most recently selected option and the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>home</i>
+                            </td>
+                            <td>Selects the focused options and all the options up to the first one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>end</i>
+                            </td>
+                            <td>Selects the focused options and all the options down to the first one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>a</i>
+                            </td>
+                            <td>Selects all options.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Buttons Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Executes button action.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Executes button action.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/orderlist/basicdoc.js b/components/doc/orderlist/basicdoc.js
new file mode 100644
index 0000000000..e32aecf732
--- /dev/null
+++ b/components/doc/orderlist/basicdoc.js
@@ -0,0 +1,148 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrderList } from '@/components/lib/orderlist/OrderList';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function BasicDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm" />
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">${item.price}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: 'string',
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item: Product) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    OrderList is used as a controlled input with <i>value</i> and <i>onChange</i> properties. Content of a list item needs to be defined with the <i>itemTemplate</i> property that receives an object in the list as parameter.
+                </p>
+            </DocSectionText>
+            <div className="card xl:flex xl:justify-content-center">
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/orderlist/dragdropdoc.js b/components/doc/orderlist/dragdropdoc.js
new file mode 100644
index 0000000000..09d5482f7c
--- /dev/null
+++ b/components/doc/orderlist/dragdropdoc.js
@@ -0,0 +1,149 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrderList } from '@/components/lib/orderlist/OrderList';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function DragDropDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm" />
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">${item.price}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} 
+    header="Products" dragdrop></OrderList>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: 'string',
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item: Product) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop></OrderList>
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items can be reordered using drag and drop by enabling <i>dragdrop</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card xl:flex xl:justify-content-center">
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" dragdrop />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/orderlist/filterdoc.js b/components/doc/orderlist/filterdoc.js
new file mode 100644
index 0000000000..b0925cc4d8
--- /dev/null
+++ b/components/doc/orderlist/filterdoc.js
@@ -0,0 +1,149 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrderList } from '@/components/lib/orderlist/OrderList';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function FilterDoc(props) {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm" />
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">${item.price}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+export default function FilterDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: 'string',
+    rating: number;
+}
+
+export default function FilterDemo() {
+    const [products, setProducts] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item: Product) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2 xl:mr-8">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-content-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products"></OrderList>
+        </div>
+    )
+}
+        `,
+        data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items are filtered using an input field by enabling the <i>filter</i> property. Filter value is checked against the property of an object configured with the <i>filterBy</i> property and the filtering match mode with{' '}
+                    <i>filterMatchMode</i> e.g. <i>contains</i>.
+                </p>
+            </DocSectionText>
+            <div className="card xl:flex xl:justify-content-center">
+                <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products" filter filterBy="name" filterPlaceholder="Search products" />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/orderlist/importdoc.js b/components/doc/orderlist/importdoc.js
new file mode 100644
index 0000000000..06fe60c725
--- /dev/null
+++ b/components/doc/orderlist/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { OrderList } from 'primereact/orderlist';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/orderlist/pt/wireframe.js b/components/doc/orderlist/pt/wireframe.js
new file mode 100644
index 0000000000..b2228017d6
--- /dev/null
+++ b/components/doc/orderlist/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/orderlist.jpg" alt="orderlist" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/orderlist/styledoc.js b/components/doc/orderlist/styledoc.js
new file mode 100644
index 0000000000..6aa1176a3e
--- /dev/null
+++ b/components/doc/orderlist/styledoc.js
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-orderlist</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-list</td>
+                            <td>List container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-item</td>
+                            <td>An item in the list</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter</td>
+                            <td>Filter element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-icon</td>
+                            <td>Filter icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/orderlist/theming/styleddoc.js b/components/doc/orderlist/theming/styleddoc.js
new file mode 100644
index 0000000000..6e48993d49
--- /dev/null
+++ b/components/doc/orderlist/theming/styleddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-orderlist</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-list</td>
+                            <td>List container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-item</td>
+                            <td>An item in the list</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-container</td>
+                            <td>Container of filter input.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter</td>
+                            <td>Filter element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-orderlist-filter-icon</td>
+                            <td>Filter icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/orderlist/theming/tailwinddoc.js b/components/doc/orderlist/theming/tailwinddoc.js
new file mode 100644
index 0000000000..6d50bb5cc5
--- /dev/null
+++ b/components/doc/orderlist/theming/tailwinddoc.js
@@ -0,0 +1,151 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {    
+    orderlist: {
+        root: 'flex',
+        controls: 'flex flex-col justify-center p-5',
+        moveupbutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2 w-12', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+            label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        movetopbutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+              label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        movedownbutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+              label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        movebottombutton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+              label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        container: 'flex-auto',
+        header: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            )
+        },
+        list: {
+            className: classNames(
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            )
+        },
+        item: ({ context }) => ({
+            className: classNames('relative cursor-pointer overflow-hidden', 'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80', 'transition duration-200', {
+                'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.selected
+            })
+        })
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { OrderList } from 'primereact/orderlist';
+import { ProductService } from './service/ProductService';
+
+export default function UnstyledDemo() {
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 items-center gap-3">
+                <img className="w-16 shadow-md shrink-0 rounded" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-col gap-2 xl:mr-8">
+                    <span className="font-bold text-gray-700 dark:text-white/80">{item.name}</span>
+                    <div className="flex items-center gap-2">
+                        <i className="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
+                        <span className="text-gray-700 dark:text-white/80">{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-gray-700 dark:text-white/80 text-900">\${item.price}</span>
+            </div>
+        );
+    };
+    
+    return (
+        <div className="card xl:flex xl:justify-center">
+            <OrderList dataKey="id" value={products} onChange={(e) => setProducts(e.value)} itemTemplate={itemTemplate} header="Products"></OrderList>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['ProductService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/accessibilitydoc.js b/components/doc/organizationchart/accessibilitydoc.js
new file mode 100644
index 0000000000..d021b3412a
--- /dev/null
+++ b/components/doc/organizationchart/accessibilitydoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level
+                of reader support in the upcoming versions.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the focusable elements within the chart.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the expanded state of a node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the expanded state of a node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>numpad enter</i>
+                            </td>
+                            <td>Toggles the expanded state of a node.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/organizationchart/basicdoc.js b/components/doc/organizationchart/basicdoc.js
new file mode 100644
index 0000000000..086050c441
--- /dev/null
+++ b/components/doc/organizationchart/basicdoc.js
@@ -0,0 +1,150 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrganizationChart } from '@/components/lib/organizationchart/OrganizationChart';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [data] = useState([
+        {
+            label: 'Argentina',
+            expanded: true,
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'Argentina'
+                        },
+                        {
+                            label: 'Croatia'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'France'
+                        },
+                        {
+                            label: 'Morocco'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const code = {
+        basic: `
+<OrganizationChart value={data} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+
+export default function BasicDoc() {
+    const [data] = useState([
+        {
+            label: 'Argentina',
+            expanded: true,
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'Argentina'
+                        },
+                        {
+                            label: 'Croatia'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'France'
+                        },
+                        {
+                            label: 'Morocco'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { TreeNode } from 'primereact/treenode';
+
+export default function BasicDoc() {
+    const [data] = useState<TreeNode[]>([
+        {
+            label: 'Argentina',
+            expanded: true,
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'Argentina'
+                        },
+                        {
+                            label: 'Croatia'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    children: [
+                        {
+                            label: 'France'
+                        },
+                        {
+                            label: 'Morocco'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    OrganizationChart requires a collection of <i>TreeNode</i> instances as a <i>value</i>.
+                </p>
+            </DocSectionText>
+            <div className="card overflow-x-auto">
+                <OrganizationChart value={data} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/coloreddoc.js b/components/doc/organizationchart/coloreddoc.js
new file mode 100644
index 0000000000..6479e2f11e
--- /dev/null
+++ b/components/doc/organizationchart/coloreddoc.js
@@ -0,0 +1,285 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrganizationChart } from '@/components/lib/organizationchart/OrganizationChart';
+import { useState } from 'react';
+
+export function ColoredDoc(props) {
+    const [data] = useState([
+        {
+            expanded: true,
+            type: 'person',
+            className: 'bg-indigo-500 text-white',
+            style: { borderRadius: '12px' },
+            data: {
+                image: 'https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png',
+                name: 'Amy Elsner',
+                title: 'CEO'
+            },
+            children: [
+                {
+                    expanded: true,
+                    type: 'person',
+                    className: 'bg-purple-500 text-white',
+                    style: { borderRadius: '12px' },
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/annafali.png',
+                        name: 'Anna Fali',
+                        title: 'CMO'
+                    },
+                    children: [
+                        {
+                            label: 'Sales',
+                            className: 'bg-purple-500 text-white',
+                            style: { borderRadius: '12px' }
+                        },
+                        {
+                            label: 'Marketing',
+                            className: 'bg-purple-500 text-white',
+                            style: { borderRadius: '12px' }
+                        }
+                    ]
+                },
+                {
+                    expanded: true,
+                    type: 'person',
+                    className: 'bg-teal-500 text-white',
+                    style: { borderRadius: '12px' },
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/stephenshaw.png',
+                        name: 'Stephen Shaw',
+                        title: 'CTO'
+                    },
+                    children: [
+                        {
+                            label: 'Development',
+                            className: 'bg-teal-500 text-white',
+                            style: { borderRadius: '12px' }
+                        },
+                        {
+                            label: 'UI/UX Design',
+                            className: 'bg-teal-500 text-white',
+                            style: { borderRadius: '12px' }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node) => {
+        if (node.type === 'person') {
+            return (
+                <div className="flex flex-column">
+                    <div className="flex flex-column align-items-center">
+                        <img alt={node.data.name} src={node.data.image} className="mb-3 w-3rem h-3rem" />
+                        <span className="font-bold mb-2">{node.data.name}</span>
+                        <span>{node.data.title}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return node.label;
+    };
+
+    const code = {
+        basic: `
+<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+
+export default function ColoredDemo() {
+    const [data] = useState([
+        {
+            expanded: true,
+            type: 'person',
+            className: 'bg-indigo-500 text-white',
+            style: { borderRadius: '12px' },
+            data: {
+                image: 'https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png',
+                name: 'Amy Elsner',
+                title: 'CEO'
+            },
+            children: [
+                {
+                    expanded: true,
+                    type: 'person',
+                    className: 'bg-purple-500 text-white',
+                    style: { borderRadius: '12px' },
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/annafali.png',
+                        name: 'Anna Fali',
+                        title: 'CMO'
+                    },
+                    children: [
+                        {
+                            label: 'Sales',
+                            className: 'bg-purple-500 text-white',
+                            style: { borderRadius: '12px' }
+                        },
+                        {
+                            label: 'Marketing',
+                            className: 'bg-purple-500 text-white',
+                            style: { borderRadius: '12px' }
+                        }
+                    ]
+                },
+                {
+                    expanded: true,
+                    type: 'person',
+                    className: 'bg-teal-500 text-white',
+                    style: { borderRadius: '12px' },
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/stephenshaw.png',
+                        name: 'Stephen Shaw',
+                        title: 'CTO'
+                    },
+                    children: [
+                        {
+                            label: 'Development',
+                            className: 'bg-teal-500 text-white',
+                            style: { borderRadius: '12px' }
+                        },
+                        {
+                            label: 'UI/UX Design',
+                            className: 'bg-teal-500 text-white',
+                            style: { borderRadius: '12px' }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node) => {
+        if (node.type === 'person') {
+            return (
+                <div className="flex flex-column">
+                    <div className="flex flex-column align-items-center">
+                        <img alt={node.data.name} src={node.data.image} className="mb-3 w-3rem h-3rem" />
+                        <span className="font-bold mb-2">{node.data.name}</span>
+                        <span>{node.data.title}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return node.label;
+    };
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { TreeNode } from 'primereact/treenode';
+
+export default function ColoredDemo() {
+    const [data] = useState<TreeNode[]>([
+        {
+            expanded: true,
+            type: 'person',
+            className: 'bg-indigo-500 text-white',
+            style: { borderRadius: '12px' },
+            data: {
+                image: 'https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png',
+                name: 'Amy Elsner',
+                title: 'CEO'
+            },
+            children: [
+                {
+                    expanded: true,
+                    type: 'person',
+                    className: 'bg-purple-500 text-white',
+                    style: { borderRadius: '12px' },
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/annafali.png',
+                        name: 'Anna Fali',
+                        title: 'CMO'
+                    },
+                    children: [
+                        {
+                            label: 'Sales',
+                            className: 'bg-purple-500 text-white',
+                            style: { borderRadius: '12px' }
+                        },
+                        {
+                            label: 'Marketing',
+                            className: 'bg-purple-500 text-white',
+                            style: { borderRadius: '12px' }
+                        }
+                    ]
+                },
+                {
+                    expanded: true,
+                    type: 'person',
+                    className: 'bg-teal-500 text-white',
+                    style: { borderRadius: '12px' },
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/stephenshaw.png',
+                        name: 'Stephen Shaw',
+                        title: 'CTO'
+                    },
+                    children: [
+                        {
+                            label: 'Development',
+                            className: 'bg-teal-500 text-white',
+                            style: { borderRadius: '12px' }
+                        },
+                        {
+                            label: 'UI/UX Design',
+                            className: 'bg-teal-500 text-white',
+                            style: { borderRadius: '12px' }
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node: TreeNode) => {
+        if (node.type === 'person') {
+            return (
+                <div className="flex flex-column">
+                    <div className="flex flex-column align-items-center">
+                        <img alt={node.data.name} src={node.data.image} className="mb-3 w-3rem h-3rem" />
+                        <span className="font-bold mb-2">{node.data.name}</span>
+                        <span>{node.data.title}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return node.label;
+    };
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Styling a specific node is configured with <i>className</i> and <i>style</i> options of a TreeNode.
+                </p>
+            </DocSectionText>
+            <div className="card overflow-x-auto">
+                <OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/importdoc.js b/components/doc/organizationchart/importdoc.js
new file mode 100644
index 0000000000..9c5d074b37
--- /dev/null
+++ b/components/doc/organizationchart/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { OrganizationChart } from 'primereact/organizationchart';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/pt/wireframe.js b/components/doc/organizationchart/pt/wireframe.js
new file mode 100644
index 0000000000..58eb355dd3
--- /dev/null
+++ b/components/doc/organizationchart/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/organizationchart.jpg" alt="organizationchart" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/organizationchart/selectiondoc.js b/components/doc/organizationchart/selectiondoc.js
new file mode 100644
index 0000000000..3be1243cc7
--- /dev/null
+++ b/components/doc/organizationchart/selectiondoc.js
@@ -0,0 +1,247 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrganizationChart } from '@/components/lib/organizationchart/OrganizationChart';
+import { useState } from 'react';
+
+export function SelectionDoc(props) {
+    const [selection, setSelection] = useState([]);
+    const [data] = useState([
+        {
+            expanded: true,
+            type: 'person',
+            data: {
+                image: 'https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png',
+                name: 'Amy Elsner',
+                title: 'CEO'
+            },
+            children: [
+                {
+                    expanded: true,
+                    type: 'person',
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/annafali.png',
+                        name: 'Anna Fali',
+                        title: 'CMO'
+                    },
+                    children: [
+                        {
+                            label: 'Sales'
+                        },
+                        {
+                            label: 'Marketing'
+                        }
+                    ]
+                },
+                {
+                    expanded: true,
+                    type: 'person',
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/stephenshaw.png',
+                        name: 'Stephen Shaw',
+                        title: 'CTO'
+                    },
+                    children: [
+                        {
+                            label: 'Development'
+                        },
+                        {
+                            label: 'UI/UX Design'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node) => {
+        if (node.type === 'person') {
+            return (
+                <div className="flex flex-column">
+                    <div className="flex flex-column align-items-center">
+                        <img alt={node.data.name} src={node.data.image} className="mb-3 w-3rem h-3rem" />
+                        <span className="font-bold mb-2">{node.data.name}</span>
+                        <span>{node.data.title}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return node.label;
+    };
+
+    const code = {
+        basic: `
+<OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+
+export default function SelectionDemo() {
+    const [selection, setSelection] = useState([]);
+    const [data] = useState([
+        {
+            expanded: true,
+            type: 'person',
+            data: {
+                image: 'https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png',
+                name: 'Amy Elsner',
+                title: 'CEO'
+            },
+            children: [
+                {
+                    expanded: true,
+                    type: 'person',
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/annafali.png',
+                        name: 'Anna Fali',
+                        title: 'CMO'
+                    },
+                    children: [
+                        {
+                            label: 'Sales'
+                        },
+                        {
+                            label: 'Marketing'
+                        }
+                    ]
+                },
+                {
+                    expanded: true,
+                    type: 'person',
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/stephenshaw.png',
+                        name: 'Stephen Shaw',
+                        title: 'CTO'
+                    },
+                    children: [
+                        {
+                            label: 'Development'
+                        },
+                        {
+                            label: 'UI/UX Design'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node) => {
+        if (node.type === 'person') {
+            return (
+                <div className="flex flex-column">
+                    <div className="flex flex-column align-items-center">
+                        <img alt={node.data.name} src={node.data.image} className="mb-3 w-3rem h-3rem" />
+                        <span className="font-bold mb-2">{node.data.name}</span>
+                        <span>{node.data.title}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return node.label;
+    };
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { TreeNode } from 'primereact/treenode';
+
+export default function SelectionDemo() {
+    const [selection, setSelection] = useState<TreeNode[]>([]);
+    const [data] = useState<TreeNode[]>([
+        {
+            expanded: true,
+            type: 'person',
+            data: {
+                image: 'https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png',
+                name: 'Amy Elsner',
+                title: 'CEO'
+            },
+            children: [
+                {
+                    expanded: true,
+                    type: 'person',
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/annafali.png',
+                        name: 'Anna Fali',
+                        title: 'CMO'
+                    },
+                    children: [
+                        {
+                            label: 'Sales'
+                        },
+                        {
+                            label: 'Marketing'
+                        }
+                    ]
+                },
+                {
+                    expanded: true,
+                    type: 'person',
+                    data: {
+                        image: 'https://primefaces.org/cdn/primereact/images/avatar/stephenshaw.png',
+                        name: 'Stephen Shaw',
+                        title: 'CTO'
+                    },
+                    children: [
+                        {
+                            label: 'Development'
+                        },
+                        {
+                            label: 'UI/UX Design'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node: TreeNode) => {
+        if (node.type === 'person') {
+            return (
+                <div className="flex flex-column">
+                    <div className="flex flex-column align-items-center">
+                        <img alt={node.data.name} src={node.data.image} className="mb-3 w-3rem h-3rem" />
+                        <span className="font-bold mb-2">{node.data.name}</span>
+                        <span>{node.data.title}</span>
+                    </div>
+                </div>
+            );
+        }
+
+        return node.label;
+    };
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Nodes can be selected by defining <i>selectionMode</i> along with a value binding with <i>selection</i> and <i>onSelectionChange</i> properties. By default only one node can be selected, set <i>selectionMode</i>
+                    as <i>multiple</i> to select more than one.
+                </p>
+            </DocSectionText>
+            <div className="card overflow-x-auto">
+                <OrganizationChart value={data} selectionMode="multiple" selection={selection} onSelectionChange={(e) => setSelection(e.data)} nodeTemplate={nodeTemplate} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/styledoc.js b/components/doc/organizationchart/styledoc.js
new file mode 100644
index 0000000000..a103b0f935
--- /dev/null
+++ b/components/doc/organizationchart/styledoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-organizationchart</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-table</td>
+                            <td>Table container of a node.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-lines</td>
+                            <td>Connector lines container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-nodes</td>
+                            <td>Contained of node children.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-line-right</td>
+                            <td>Right side line of a node connector.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-line-left</td>
+                            <td>Left side line of a node connector.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-line-top</td>
+                            <td>Top side line of a node connector.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/templatedoc.js b/components/doc/organizationchart/templatedoc.js
new file mode 100644
index 0000000000..a13e629aa7
--- /dev/null
+++ b/components/doc/organizationchart/templatedoc.js
@@ -0,0 +1,198 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { OrganizationChart } from '@/components/lib/organizationchart/OrganizationChart';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [data] = useState([
+        {
+            label: 'Argentina',
+            expanded: true,
+            data: 'ar',
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    data: 'ar',
+                    children: [
+                        {
+                            label: 'Argentina',
+                            data: 'ar'
+                        },
+                        {
+                            label: 'Croatia',
+                            data: 'hr'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    data: 'fr',
+                    children: [
+                        {
+                            label: 'France',
+                            data: 'fr'
+                        },
+                        {
+                            label: 'Morocco',
+                            data: 'ma'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node) => {
+        return (
+            <div className="flex flex-column align-items-center">
+                <img alt={node.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`w-2rem shadow-2 flag flag-${node.data}`} />
+                <div className="mt-3 font-medium text-lg">{node.label}</div>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+
+export default function TemplateDemo() {
+    const [data] = useState([
+        {
+            label: 'Argentina',
+            expanded: true,
+            data: 'ar',
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    data: 'ar',
+                    children: [
+                        {
+                            label: 'Argentina',
+                            data: 'ar'
+                        },
+                        {
+                            label: 'Croatia',
+                            data: 'hr'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    data: 'fr',
+                    children: [
+                        {
+                            label: 'France',
+                            data: 'fr'
+                        },
+                        {
+                            label: 'Morocco',
+                            data: 'ma'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node) => {
+        return (
+            <div className="flex flex-column align-items-center">
+                <img alt={node.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`w-2rem shadow-2 flag flag-\${node.data}\`} />
+                <div className="mt-3 font-medium text-lg">{node.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { TreeNode } from 'primereact/treenode';
+
+export default function TemplateDemo() {
+    const [data] = useState<TreeNode[]>([
+        {
+            label: 'Argentina',
+            expanded: true,
+            data: 'ar',
+            children: [
+                {
+                    label: 'Argentina',
+                    expanded: true,
+                    data: 'ar',
+                    children: [
+                        {
+                            label: 'Argentina',
+                            data: 'ar'
+                        },
+                        {
+                            label: 'Croatia',
+                            data: 'hr'
+                        }
+                    ]
+                },
+                {
+                    label: 'France',
+                    expanded: true,
+                    data: 'fr',
+                    children: [
+                        {
+                            label: 'France',
+                            data: 'fr'
+                        },
+                        {
+                            label: 'Morocco',
+                            data: 'ma'
+                        }
+                    ]
+                }
+            ]
+        }
+    ]);
+
+    const nodeTemplate = (node: TreeNode) => {
+        return (
+            <div className="flex flex-column align-items-center">
+                <img alt={node.label} src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={\`w-2rem shadow-2 flag flag-\${node.data}\`} />
+                <div className="mt-3 font-medium text-lg">{node.label}</div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card overflow-x-auto">
+            <OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content instead of a node <i>label</i> is defined using the <i>nodeTemplate</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card overflow-x-auto">
+                <OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/theming/styleddoc.js b/components/doc/organizationchart/theming/styleddoc.js
new file mode 100644
index 0000000000..3a07e9fdc5
--- /dev/null
+++ b/components/doc/organizationchart/theming/styleddoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-organizationchart</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-table</td>
+                            <td>Table container of a node.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-lines</td>
+                            <td>Connector lines container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-nodes</td>
+                            <td>Contained of node children.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-line-right</td>
+                            <td>Right side line of a node connector.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-line-left</td>
+                            <td>Left side line of a node connector.</td>
+                        </tr>
+                        <tr>
+                            <td>p-organizationchart-line-top</td>
+                            <td>Top side line of a node connector.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/organizationchart/theming/tailwinddoc.js b/components/doc/organizationchart/theming/tailwinddoc.js
new file mode 100644
index 0000000000..46c83accaf
--- /dev/null
+++ b/components/doc/organizationchart/theming/tailwinddoc.js
@@ -0,0 +1,136 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    organizationchart: {
+        table: 'mx-auto my-0 border-spacing-0 border-separate',
+        cell: 'text-center align-top py-0 px-3',
+        node: {
+            className: classNames(
+                'relative inline-block bg-white border border-gray-300 text-gray-600 p-5',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            )
+        },
+        linecell: 'text-center align-top py-0 px-3',
+        linedown: {
+            className: classNames(
+                'mx-auto my-0 w-px h-[20px] bg-gray-300',
+                'dark:bg-blue-900/40' //Dark Mode
+            )
+        },
+        lineleft: ({ context }) => ({
+            className: classNames(
+                'text-center align-top py-0 px-3 rounded-none border-r border-gray-300',
+                'dark:border-blue-900/40', //Dark Mode
+                {
+                    'border-t': context.lineTop
+                }
+            )
+        }),
+        lineright: ({ context }) => ({
+            className: classNames(
+                'text-center align-top py-0 px-3 rounded-none',
+                'dark:border-blue-900/40', //Dark Mode
+                {
+                    'border-t border-gray-300': context.lineTop
+                }
+            )
+        }),
+        nodecell: 'text-center align-top py-0 px-3',
+        nodetoggler: {
+            className: classNames(
+                'absolute bottom-[-0.75rem] left-2/4 -ml-3 w-6 h-6 bg-inherit text-inherit rounded-full z-2 cursor-pointer no-underline select-none',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus styles
+            )
+        },
+        nodetogglericon: 'relative inline-block w-4 h-4'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { OrganizationChart } from 'primereact/organizationchart';
+
+export default function UnstyledDemo() {
+  const [data] = useState([
+    {
+      label: 'Argentina',
+      expanded: true,
+      data: 'ar',
+      children: [
+        {
+          label: 'Argentina',
+          expanded: true,
+          data: 'ar',
+          children: [
+            {
+              label: 'Argentina',
+              data: 'ar',
+            },
+            {
+              label: 'Croatia',
+              data: 'hr',
+            },
+          ],
+        },
+        {
+          label: 'France',
+          expanded: true,
+          data: 'fr',
+          children: [
+            {
+              label: 'France',
+              data: 'fr',
+            },
+            {
+              label: 'Morocco',
+              data: 'ma',
+            },
+          ],
+        },
+      ],
+    },
+  ]);
+
+  const nodeTemplate = (node) => {
+    return (
+      <div className="flex flex-col items-center">
+        <img
+          alt={node.label}
+          src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+          className={\`w-8 shadow-md flag flag-\${node.data}\`}
+        />
+        <div className="mt-3 font-medium text-lg">{node.label}</div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="card overflow-x-auto">
+      <OrganizationChart value={data} nodeTemplate={nodeTemplate} />
+    </div>
+  );
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/overlaypanel/accessibilitydoc.js b/components/doc/overlaypanel/accessibilitydoc.js
new file mode 100644
index 0000000000..87f7c9984b
--- /dev/null
+++ b/components/doc/overlaypanel/accessibilitydoc.js
@@ -0,0 +1,79 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                OverlayPanel component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition{' '}
+                <i>aria-modal</i> is added since focus is kept within the popup.
+            </p>
+            <p>
+                It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding <i>tabIndex</i> would be necessary. OverlayPanel adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the
+                trigger so that the relation between the trigger and the popup is defined.
+            </p>
+
+            <h3>OverlayPanel Keyboard Support</h3>
+            <p>
+                When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.
+            </p>
+
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element within the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element within the popup.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the trigger.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/overlaypanel/basicdoc.js b/components/doc/overlaypanel/basicdoc.js
new file mode 100644
index 0000000000..97e393e2a1
--- /dev/null
+++ b/components/doc/overlaypanel/basicdoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { OverlayPanel } from '@/components/lib/overlaypanel/OverlayPanel';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const op = useRef(null);
+
+    const code = {
+        basic: `
+<Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+<OverlayPanel ref={op}>
+    <img src="http://github.com/images/product/bamboo-watch.jpg" alt="Bamboo Watch"></img>
+</OverlayPanel>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const op = useRef(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+            <OverlayPanel ref={op}>
+                <img src={'https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg'} alt="Bamboo Watch"></img>
+            </OverlayPanel>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const op = useRef(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+            <OverlayPanel ref={op}>
+                <img src={'https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg'} alt="Bamboo Watch"></img>
+            </OverlayPanel>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    OverlayPanel is accessed via its reference and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> methods with an event of the target.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+                <OverlayPanel ref={op}>
+                    <img src="https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg" alt="Bamboo Watch" />
+                </OverlayPanel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/overlaypanel/datatabledoc.js b/components/doc/overlaypanel/datatabledoc.js
new file mode 100644
index 0000000000..ce3abdc748
--- /dev/null
+++ b/components/doc/overlaypanel/datatabledoc.js
@@ -0,0 +1,256 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { OverlayPanel } from '@/components/lib/overlaypanel/OverlayPanel';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useEffect, useRef, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function DataTableDoc(props) {
+    const [products, setProducts] = useState(null);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+
+    const selectedProductContent = selectedProduct && (
+        <div className="p-5 surface-card shadow-2 border-round">
+            <div className="relative">
+                <img src={'https://primefaces.org/cdn/primereact/images/product/' + selectedProduct.image} alt={selectedProduct.name} />
+            </div>
+            <div className="flex align-items-center justify-content-between mt-3 mb-2">
+                <span className="text-900 font-medium text-xl">{selectedProduct.name}</span>
+                <span className="text-900 text-xl ml-3">{'$' + selectedProduct.price}</span>
+            </div>
+            <span className="text-600">{selectedProduct.category}</span>
+        </div>
+    );
+
+    const op = useRef(null);
+    const toast = useRef(null);
+    const isMounted = useRef(false);
+
+    const productSelect = (e) => {
+        op.current.hide();
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail: e.data.name, life: 3000 });
+    };
+
+    useEffect(() => {
+        isMounted.current = true;
+        ProductService.getProductsSmall().then((data) => {
+            setProducts(data);
+            setSelectedProduct(data[0]);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const imageBody = (rowData) => {
+        return <img src={`https://primefaces.org/cdn/primereact/images/product/${rowData.image}`} alt={rowData.image} className="w-4rem shadow-1" />;
+    };
+
+    const priceBody = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
+{selectedProductContent}
+<OverlayPanel ref={op} showCloseIcon>
+    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
+        <Column field="name" header="Name" sortable style={{minWidth: '12rem'}} />
+        <Column header="Image" body={imageBody} />
+        <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
+    </DataTable>
+</OverlayPanel>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { ProductService } from './service/ProductService';
+
+export default function DataTableDemo() {
+    const [products, setProducts] = useState(null);
+    const [selectedProduct, setSelectedProduct] = useState(null);
+
+    const selectedProductContent = selectedProduct && (
+        <div className="p-5 surface-card shadow-2 border-round">
+            <div className="relative">
+                <img src={'https://primefaces.org/cdn/primereact/images/product/' + selectedProduct.image} alt={selectedProduct.name}></img>
+            </div>
+            <div className="flex align-items-center justify-content-between mt-3 mb-2">
+                <span className="text-900 font-medium text-xl">{selectedProduct.name}</span>
+                <span className="text-900 text-xl ml-3">{'$' + selectedProduct.price}</span>
+            </div>
+            <span className="text-600">{selectedProduct.category}</span>
+        </div>
+    );
+
+    const op = useRef(null);
+    const toast = useRef(null);
+    const isMounted = useRef(false);
+
+    const productSelect = (e) => {
+        op.current.hide();
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
+    };
+
+    useEffect(() => {
+        isMounted.current = true;
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const onProductSelect = (e) => {
+        setSelectedProduct(e.value);
+    };
+
+    const imageBody = (rowData) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image} className="w-4rem shadow-1" />
+    };
+
+    const priceBody = (rowData) => {
+        return formatCurrency(rowData.price);
+    };
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <Toast ref={toast} />
+            <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
+            {selectedProductContent}
+            <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
+                    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} onRowClick={productSelect}>
+                        <Column field="name" header="Name" sortable style={{ minWidth: '12rem' }} />
+                        <Column header="Image" body={imageBody} />
+                        <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
+                    </DataTable>
+            </OverlayPanel>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+import { Column } from 'primereact/column';
+import { DataTable, DataTableSelectionChangeEvent } from 'primereact/datatable';
+import { ProductService } from './service/ProductService';
+
+export default function DataTableDemo() {
+    const [products, setProducts] = useState<Product[]>(null);
+    const [selectedProduct, setSelectedProduct] = useState<Product>(null);
+
+    const op = useRef<OverlayPanel>(null);
+    const toast = useRef<Toast>(null);
+    const isMounted = useRef(false);
+
+    const selectedProductContent = selectedProduct && (
+        <div className="p-5 surface-card shadow-2 border-round">
+            <div className="relative">
+                <img src={'https://primefaces.org/cdn/primereact/images/product/' + selectedProduct.image} alt={selectedProduct.name}></img>
+            </div>
+            <div className="flex align-items-center justify-content-between mt-3 mb-2">
+                <span className="text-900 font-medium text-xl">{selectedProduct.name}</span>
+                <span className="text-900 text-xl ml-3">{'$' + selectedProduct.price}</span>
+            </div>
+            <span className="text-600">{selectedProduct.category}</span>
+        </div>
+    );
+    
+    const productSelect = (e) => {
+        op.current.hide();
+        toast.current.show({ severity: 'info', summary: 'Product Selected', detail:e.data.name, life: 3000 }); 
+    };
+
+    useEffect(() => {
+        isMounted.current = true;
+        ProductService.getProductsSmall().then((data) => setProducts(data));
+    }, []);
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const onProductSelect = (e: DataTableSelectionChangeEvent) => {
+        setSelectedProduct(e.value);
+    };
+
+    const imageBody = (rowData: Product) => {
+        return <img src={\`https://primefaces.org/cdn/primereact/images/product/\${rowData.image}\`} alt={rowData.image} className="w-4rem shadow-1" />
+    };
+
+    const priceBody = (rowData: Product) => {
+        return formatCurrency(rowData.price);
+    };
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <Toast ref={toast} />
+            <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
+            {selectedProductContent}
+            <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
+                    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} onRowClick={productSelect}>
+                        <Column field="name" header="Name" sortable style={{ minWidth: '12rem' }} />
+                        <Column header="Image" body={imageBody} />
+                        <Column field="price" header="Price" sortable body={priceBody} style={{minWidth: '8rem'}} />
+                    </DataTable>
+            </OverlayPanel>
+        </div>
+    );
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An example that displays a DataTable inside a popup to select an item. <i>closeOnEscape</i> is enabled to close the popop when ESC is pressed. The <i>dismissable</i> property when set to <i>false</i> will not close the popup when
+                    the document is clicked outside the popup.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <Toast ref={toast} />
+                <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
+                {selectedProductContent}
+                <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
+                    <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} onRowClick={productSelect}>
+                        <Column field="name" header="Name" sortable style={{ minWidth: '12rem' }} />
+                        <Column header="Image" body={imageBody} />
+                        <Column field="price" header="Price" sortable body={priceBody} style={{ minWidth: '8rem' }} />
+                    </DataTable>
+                </OverlayPanel>
+            </div>
+
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/overlaypanel/importdoc.js b/components/doc/overlaypanel/importdoc.js
new file mode 100644
index 0000000000..13149a1c74
--- /dev/null
+++ b/components/doc/overlaypanel/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { OverlayPanel } from 'primereact/overlaypanel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/overlaypanel/pt/wireframe.js b/components/doc/overlaypanel/pt/wireframe.js
new file mode 100644
index 0000000000..5327ef2385
--- /dev/null
+++ b/components/doc/overlaypanel/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/overlaypanel.jpg" alt="overlaypanel" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/overlaypanel/styledoc.js b/components/doc/overlaypanel/styledoc.js
new file mode 100644
index 0000000000..e568bd501a
--- /dev/null
+++ b/components/doc/overlaypanel/styledoc.js
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-overlaypanel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-overlaypanel-content</td>
+                            <td>Content of the panel.</td>
+                        </tr>
+                        <tr>
+                            <td>p-overlaypanel-close</td>
+                            <td>Close icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/overlaypanel/theming/styleddoc.js b/components/doc/overlaypanel/theming/styleddoc.js
new file mode 100644
index 0000000000..f581dc5bbf
--- /dev/null
+++ b/components/doc/overlaypanel/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-overlaypanel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-overlaypanel-content</td>
+                            <td>Content of the panel.</td>
+                        </tr>
+                        <tr>
+                            <td>p-overlaypanel-close</td>
+                            <td>Close icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/overlaypanel/theming/tailwinddoc.js b/components/doc/overlaypanel/theming/tailwinddoc.js
new file mode 100644
index 0000000000..9f55cb0b47
--- /dev/null
+++ b/components/doc/overlaypanel/theming/tailwinddoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {
+    overlaypanel: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'absolute left-0 top-0 mt-3',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            )
+        },
+        closeButton: 'flex items-center justify-center overflow-hidden absolute top-0 right-0 w-6 h-6',
+        content: 'p-5 items-center flex',
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useRef } from 'react';
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    const op = useRef(null);
+
+    return (
+        <div className="card flex justify-center">
+            <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+            <OverlayPanel ref={op}>
+                <img src={'https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg'} alt="Bamboo Watch"></img>
+            </OverlayPanel>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/paginator/accessibilitydoc.js b/components/doc/paginator/accessibilitydoc.js
new file mode 100644
index 0000000000..8366ae459f
--- /dev/null
+++ b/components/doc/paginator/accessibilitydoc.js
@@ -0,0 +1,73 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Paginator is placed inside a <i>nav</i> element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.
+            </p>
+
+            <p>
+                First, previous, next and last page navigators elements with <i>aria-label</i> attributes referring to the <i>aria.firstPageLabel</i>, <i>aria.prevPageLabel</i>, <i>aria.nextPageLabel</i> and <i>aria.lastPageLabel</i>
+                properties of the <Link href="http://github.com/locale">locale</Link> API respectively.
+            </p>
+
+            <p>
+                Page links are also button elements with an <i>aria-label</i> attribute derived from the <i>aria.pageLabel</i> of the <Link href="http://github.com/locale">locale</Link> API. Current page is marked with <i>aria-current</i> set to "page" as well.
+            </p>
+
+            <p>
+                Current page report uses <i>aria-live="polite"</i> to instruct screen reader about the changes to the pagination state.
+            </p>
+
+            <p>
+                Rows per page dropdown internally uses a dropdown component, refer to the <Link href="http://github.com/dropdown">dropdown</Link> documentation for accessibility details. Additionally, the dropdown uses an <i>aria-label</i>
+                from the <i>aria.rowsPerPage</i> property of the <Link href="http://github.com/locale">locale</Link> API.
+            </p>
+
+            <p>
+                Jump to page input is an <i>input</i> element with an <i>aria-label</i> that refers to the <i>aria.jumpToPage</i> property of the <Link href="http://github.com/locale">locale</Link> API.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the paginator elements.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Executes the paginator element action.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Executes the paginator element action.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Rows Per Page Dropdown Keyboard Support</h3>
+            <p>
+                Refer to the <Link href="http://github.com/dropdown">dropdown</Link> documentation for more details about keyboard support.
+            </p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/paginator/basicdoc.js b/components/doc/paginator/basicdoc.js
new file mode 100644
index 0000000000..2b68646dd8
--- /dev/null
+++ b/components/doc/paginator/basicdoc.js
@@ -0,0 +1,75 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Paginator } from '@/components/lib/paginator/Paginator';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(10);
+
+    const onPageChange = (event) => {
+        setFirst(event.first);
+        setRows(event.rows);
+    };
+
+    const code = {
+        basic: `
+<Paginator first={first} rows={rows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onPageChange} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Paginator } from 'primereact/paginator';
+
+export default function BasicDemo() {
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(10);
+
+    const onPageChange = (event) => {
+        setFirst(event.first);
+        setRows(event.rows);
+    };
+
+    return (
+        <div className="card">
+            <Paginator first={first} rows={rows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onPageChange} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Paginator, PaginatorPageChangeEvent } from 'primereact/paginator';
+
+export default function BasicDemo() {
+    const [first, setFirst] = useState<number>(0);
+    const [rows, setRows] = useState<number>(10);
+
+    const onPageChange = (event: PaginatorPageChangeEvent) => {
+        setFirst(event.first);
+        setRows(event.rows);
+    };
+
+    return (
+        <div className="card">
+            <Paginator first={first} rows={rows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onPageChange} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Paginator is used as a controlled component with <i>first</i>, <i>rows</i> and <i>onPageChange</i> properties to manage the first index and number of records to display per page. Total number of records need to be with{' '}
+                    <i>totalRecords</i> property. Default template includes a dropdown to change the <i>rows</i> so <i>rowsPerPageOptions</i> is also necessary for the dropdown options.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Paginator first={first} rows={rows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onPageChange} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/paginator/imagesdoc.js b/components/doc/paginator/imagesdoc.js
new file mode 100644
index 0000000000..4de20d4aaa
--- /dev/null
+++ b/components/doc/paginator/imagesdoc.js
@@ -0,0 +1,82 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Paginator } from '@/components/lib/paginator/Paginator';
+import { useState } from 'react';
+
+export function ImagesDoc(props) {
+    const [first, setFirst] = useState(0);
+
+    const onPageChange = (event) => {
+        setFirst(event.first);
+    };
+
+    const code = {
+        basic: `
+<Paginator first={first} rows={1} totalRecords={12} onPageChange={onPageChange} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+<div className="p-3 text-center">
+    <img alt={first} src={\`https://primefaces.org/cdn/primereact/images/nature/nature\${first + 1}.jpg\`} className="shadow-2 border-round max-w-full" />
+</div>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Paginator } from 'primereact/paginator';
+
+export default function ImagesDemo() {
+    const [first, setFirst] = useState(0);
+
+    const onPageChange = (event) => {
+        setFirst(event.first);
+    };
+
+    return (
+        <div className="card">
+            <Paginator first={first} rows={1} totalRecords={12} onPageChange={onPageChange} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+            <div className="p-3 text-center">
+                <img alt={first} src={\`https://primefaces.org/cdn/primereact/images/nature/nature\${first + 1}.jpg\`} className="shadow-2 border-round max-w-full" />
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Paginator, PaginatorPageChangeEvent } from 'primereact/paginator';
+
+export default function ImagesDemo() {
+    const [first, setFirst] = useState<number>(0);
+
+    const onPageChange = (event: PaginatorPageChangeEvent) => {
+        setFirst(event.first);
+    };
+
+    return (
+        <div className="card">
+            <Paginator first={first} rows={1} totalRecords={12} onPageChange={onPageChange} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+            <div className="p-3 text-center">
+                <img alt={first} src={\`https://primefaces.org/cdn/primereact/images/nature/nature\${first + 1}.jpg\`} className="shadow-2 border-round max-w-full" />
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Sample image gallery implementation using paginator.</p>
+            </DocSectionText>
+            <div className="card">
+                <Paginator first={first} rows={1} totalRecords={12} onPageChange={onPageChange} template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
+
+                <div className="p-3 text-center">
+                    <img alt={first} src={`https://primefaces.org/cdn/primereact/images/nature/nature${first + 1}.jpg`} className="shadow-2 border-round max-w-full" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/paginator/importdoc.js b/components/doc/paginator/importdoc.js
new file mode 100644
index 0000000000..a5e3031e46
--- /dev/null
+++ b/components/doc/paginator/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Paginator } from 'primereact/paginator';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/paginator/layoutdoc.js b/components/doc/paginator/layoutdoc.js
new file mode 100644
index 0000000000..90a0a2580c
--- /dev/null
+++ b/components/doc/paginator/layoutdoc.js
@@ -0,0 +1,95 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Paginator } from '@/components/lib/paginator/Paginator';
+import { useState } from 'react';
+
+export function LayoutDoc(props) {
+    const [first, setFirst] = useState(0);
+
+    const onPageChange = (event) => {
+        setFirst(event.first);
+    };
+
+    const code = {
+        basic: `
+<Paginator first={first} rows={10} totalRecords={50} onPageChange={onPageChange} 
+    template={{ layout: 'PrevPageLink CurrentPageReport NextPageLink' }} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Paginator } from 'primereact/paginator';
+
+export default function LayoutDemo() {
+    const [first, setFirst] = useState(0);
+
+    const onPageChange = (event) => {
+        setFirst(event.first);
+    };
+
+    return (
+        <div className="card">
+            <Paginator first={first} rows={10} totalRecords={50} onPageChange={onPageChange} template={{ layout: 'PrevPageLink CurrentPageReport NextPageLink' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Paginator, PaginatorPageChangeEvent } from 'primereact/paginator';
+
+export default function LayoutDemo() {
+    const [first, setFirst] = useState<number>(0);
+
+    const onPageChange = (event: PaginatorPageChangeEvent) => {
+        setFirst(event.first);
+    };
+
+    return (
+        <div className="card">
+            <Paginator first={first} rows={10} totalRecords={50} onPageChange={onPageChange} template={{ layout: 'PrevPageLink CurrentPageReport NextPageLink' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Order and content of the default UI elements of the paginator is defined with the <i>layout</i> option of the <i>template</i> property. Default token names for the elements are as follows;
+                </p>
+                <ul className="mb-4 line-height-4">
+                    <li>
+                        <i>FirstPageLink</i>
+                    </li>
+                    <li>
+                        <i>PrevPageLink</i>
+                    </li>
+                    <li>
+                        <i>NextPageLink</i>
+                    </li>
+                    <li>
+                        <i>LastPageLink</i>
+                    </li>
+                    <li>
+                        <i>PageLinks</i>
+                    </li>
+                    <li>
+                        <i>RowsPerPageDropdown</i>
+                    </li>
+                    <li>
+                        <i>CurrentPageReport</i>
+                    </li>
+                    <li>
+                        <i>JumpToPageInput</i>
+                    </li>
+                </ul>
+            </DocSectionText>
+            <div className="card">
+                <Paginator first={first} rows={10} totalRecords={50} onPageChange={onPageChange} template={{ layout: 'PrevPageLink CurrentPageReport NextPageLink' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/paginator/pt/wireframe.js b/components/doc/paginator/pt/wireframe.js
new file mode 100644
index 0000000000..585c0dd589
--- /dev/null
+++ b/components/doc/paginator/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/paginator.jpg" alt="paginator" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/paginator/styledoc.js b/components/doc/paginator/styledoc.js
new file mode 100644
index 0000000000..9451b50377
--- /dev/null
+++ b/components/doc/paginator/styledoc.js
@@ -0,0 +1,59 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-paginator</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-first</td>
+                            <td>First page element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-prev</td>
+                            <td>Previous page element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-pages</td>
+                            <td>Container of page links.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-page</td>
+                            <td>A page link.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-next</td>
+                            <td>Next pge element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-last</td>
+                            <td>Last page element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-rpp-options</td>
+                            <td>Rows per page dropdown.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/paginator/templatedoc.js b/components/doc/paginator/templatedoc.js
new file mode 100644
index 0000000000..8dc34faaac
--- /dev/null
+++ b/components/doc/paginator/templatedoc.js
@@ -0,0 +1,507 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Divider } from '@/components/lib/divider/Divider';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { Paginator } from '@/components/lib/paginator/Paginator';
+import { Ripple } from '@/components/lib/ripple/Ripple';
+import { Slider } from '@/components/lib/slider/Slider';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+import { classNames } from '@/components/lib/utils/Utils';
+import React, { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [first, setFirst] = useState([0, 0, 0]);
+    const [rows, setRows] = useState([10, 10, 10]);
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageInputTooltip, setPageInputTooltip] = useState("Press 'Enter' key to go to this page.");
+
+    const onPageChange = (e, index) => {
+        setFirst(first.map((f, i) => (index === i ? e.first : f)));
+        setRows(rows.map((r, i) => (index === i ? e.rows : r)));
+    };
+
+    const onPageInputChange = (event) => {
+        setCurrentPage(event.target.value);
+    };
+
+    const onPageInputKeyDown = (event, options) => {
+        if (event.key === 'Enter') {
+            const page = parseInt(currentPage);
+
+            if (page < 0 || page > options.totalPages) {
+                setPageInputTooltip(`Value must be between 1 and ${options.totalPages}.`);
+            } else {
+                let _first = [...first];
+
+                _first[0] = currentPage ? options.rows * (page - 1) : 0;
+
+                setFirst(_first);
+                setPageInputTooltip("Press 'Enter' key to go to this page.");
+            }
+        }
+    };
+
+    const leftContent = <Button type="button" icon="pi pi-star" className="p-button-outlined" />;
+    const rightContent = <Button type="button" icon="pi pi-search" />;
+
+    const template1 = {
+        layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
+        PrevPageLink: (options) => {
+            return (
+                <button type="button" className={classNames(options.className, 'border-round')} onClick={options.onClick} disabled={options.disabled}>
+                    <span className="p-3">Previous</span>
+                    <Ripple />
+                </button>
+            );
+        },
+        NextPageLink: (options) => {
+            return (
+                <button type="button" className={classNames(options.className, 'border-round')} onClick={options.onClick} disabled={options.disabled}>
+                    <span className="p-3">Next</span>
+                    <Ripple />
+                </button>
+            );
+        },
+        PageLinks: (options) => {
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = classNames(options.className, { 'p-disabled': true });
+
+                return (
+                    <span className={className} style={{ userSelect: 'none' }}>
+                        ...
+                    </span>
+                );
+            }
+
+            return (
+                <button type="button" className={options.className} onClick={options.onClick}>
+                    {options.page + 1}
+                    <Ripple />
+                </button>
+            );
+        },
+        RowsPerPageDropdown: (options) => {
+            const dropdownOptions = [
+                { label: 10, value: 10 },
+                { label: 20, value: 20 },
+                { label: 30, value: 30 },
+                { label: 'All', value: options.totalRecords }
+            ];
+
+            return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />;
+        },
+        CurrentPageReport: (options) => {
+            return (
+                <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                    Go to <InputText size="2" className="ml-1" value={currentPage} tooltip={pageInputTooltip} onKeyDown={(e) => onPageInputKeyDown(e, options)} onChange={onPageInputChange} />
+                </span>
+            );
+        }
+    };
+    const template2 = {
+        layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
+        RowsPerPageDropdown: (options) => {
+            const dropdownOptions = [
+                { label: 5, value: 5 },
+                { label: 10, value: 10 },
+                { label: 20, value: 20 },
+                { label: 120, value: 120 }
+            ];
+
+            return (
+                <React.Fragment>
+                    <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                        Items per page:{' '}
+                    </span>
+                    <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
+                </React.Fragment>
+            );
+        },
+        CurrentPageReport: (options) => {
+            return (
+                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
+                    {options.first} - {options.last} of {options.totalRecords}
+                </span>
+            );
+        }
+    };
+    const template3 = {
+        layout: 'RowsPerPageDropdown PrevPageLink PageLinks NextPageLink CurrentPageReport',
+        RowsPerPageDropdown: (options) => {
+            return (
+                <div className="flex align-items-center">
+                    <Tooltip target=".slider>.p-slider-handle" content={`${options.value} / page`} position="top" event="focus" />
+
+                    <span className="mr-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                        Items per page:{' '}
+                    </span>
+                    <Slider className="slider" value={options.value} onChange={options.onChange} min={10} max={120} step={30} style={{ width: '10rem' }} />
+                </div>
+            );
+        },
+        CurrentPageReport: (options) => {
+            return (
+                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
+                    {options.first} - {options.last} of {options.totalRecords}
+                </span>
+            );
+        }
+    };
+
+    const code = {
+        basic: `
+<Paginator template={template1} first={first[0]} rows={rows[0]} totalRecords={120} onPageChange={(e) => onPageChange(e, 0)} leftContent={leftContent} rightContent={rightContent} />
+<Paginator template={template2} first={first[1]} rows={rows[1]} totalRecords={120} onPageChange={(e) => onPageChange(e, 1)} className="justify-content-end" />
+<Paginator template={template3} first={first[2]} rows={rows[2]} totalRecords={120} onPageChange={(e) => onPageChange(e, 2)} className="justify-content-start" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Button } from 'primereact/button';
+import { Paginator } from 'primereact/paginator';
+import { Ripple } from 'primereact/ripple';
+import { Divider } from 'primereact/divider';
+import { Dropdown } from 'primereact/dropdown';
+import { InputText } from 'primereact/inputtext';
+import { Slider } from 'primereact/slider';
+import { Tooltip } from 'primereact/tooltip';
+import { classNames } from 'primereact/utils';
+
+export default function TemplateDemo() {
+    const [first, setFirst] = useState([0, 0, 0]);
+    const [rows, setRows] = useState([10, 10, 10]);
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageInputTooltip, setPageInputTooltip] = useState("Press 'Enter' key to go to this page.");
+
+    const onPageChange = (e, index) => {
+        setFirst(first.map((f, i) => (index === i ? e.first : f)));
+        setRows(rows.map((r, i) => (index === i ? e.rows : r)));
+    };
+
+    const onPageInputChange = (event) => {
+        setCurrentPage(event.target.value);
+    };
+
+    const onPageInputKeyDown = (event, options) => {
+        if (event.key === 'Enter') {
+            const page = parseInt(currentPage);
+
+            if (page < 0 || page > options.totalPages) {
+                setPageInputTooltip(\`Value must be between 1 and \${options.totalPages}.\`);
+            } else {
+                let _first = [...first];
+
+                _first[0] = currentPage ? options.rows * (page - 1) : 0;
+
+                setFirst(_first);
+                setPageInputTooltip("Press 'Enter' key to go to this page.");
+            }
+        }
+    };
+
+    const leftContent = <Button type="button" icon="pi pi-star" className="p-button-outlined" />;
+    const rightContent = <Button type="button" icon="pi pi-search" />;
+
+    const template1 = {
+        layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
+        PrevPageLink: (options) => {
+            return (
+                <button type="button" className={classNames(options.className, 'border-round')} onClick={options.onClick} disabled={options.disabled}>
+                    <span className="p-3">Previous</span>
+                    <Ripple />
+                </button>
+            );
+        },
+        NextPageLink: (options) => {
+            return (
+                <button type="button" className={classNames(options.className, 'border-round')} onClick={options.onClick} disabled={options.disabled}>
+                    <span className="p-3">Next</span>
+                    <Ripple />
+                </button>
+            );
+        },
+        PageLinks: (options) => {
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = classNames(options.className, { 'p-disabled': true });
+
+                return (
+                    <span className={className} style={{ userSelect: 'none' }}>
+                        ...
+                    </span>
+                );
+            }
+
+            return (
+                <button type="button" className={options.className} onClick={options.onClick}>
+                    {options.page + 1}
+                    <Ripple />
+                </button>
+            );
+        },
+        RowsPerPageDropdown: (options) => {
+            const dropdownOptions = [
+                { label: 10, value: 10 },
+                { label: 20, value: 20 },
+                { label: 30, value: 30 },
+                { label: 'All', value: options.totalRecords }
+            ];
+
+            return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />;
+        },
+        CurrentPageReport: (options) => {
+            return (
+                <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                    Go to <InputText size="2" className="ml-1" value={currentPage} tooltip={pageInputTooltip} onKeyDown={(e) => onPageInputKeyDown(e, options)} onChange={onPageInputChange} />
+                </span>
+            );
+        }
+    };
+    const template2 = {
+        layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
+        RowsPerPageDropdown: (options) => {
+            const dropdownOptions = [
+                { label: 5, value: 5 },
+                { label: 10, value: 10 },
+                { label: 20, value: 20 },
+                { label: 120, value: 120 }
+            ];
+
+            return (
+                <React.Fragment>
+                    <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                        Items per page:{' '}
+                    </span>
+                    <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
+                </React.Fragment>
+            );
+        },
+        CurrentPageReport: (options) => {
+            return (
+                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
+                    {options.first} - {options.last} of {options.totalRecords}
+                </span>
+            );
+        }
+    };
+    const template3 = {
+        layout: 'RowsPerPageDropdown PrevPageLink PageLinks NextPageLink CurrentPageReport',
+        RowsPerPageDropdown: (options) => {
+            return (
+                <div className="flex align-items-center">
+                <Tooltip target=".slider>.p-slider-handle" content={\`\${options.value} / page\`} position="top" event="focus" />
+
+                    <span className="mr-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                        Items per page:{' '}
+                    </span>
+                    <Slider className="slider" value={options.value} onChange={options.onChange} min={10} max={120} step={30} style={{ width: '10rem' }} />
+                </div>
+            );
+        },
+        CurrentPageReport: (options) => {
+            return (
+                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
+                    {options.first} - {options.last} of {options.totalRecords}
+                </span>
+            );
+        }
+    };
+
+    return (
+        <div className="card">
+            <Paginator template={template1} first={first[0]} rows={rows[0]} totalRecords={120} onPageChange={(e) => onPageChange(e, 0)} leftContent={leftContent} rightContent={rightContent} />
+            <Divider />
+            <Paginator template={template2} first={first[1]} rows={rows[1]} totalRecords={120} onPageChange={(e) => onPageChange(e, 1)} className="justify-content-end" />
+            <Divider />
+            <Paginator template={template3} first={first[2]} rows={rows[2]} totalRecords={120} onPageChange={(e) => onPageChange(e, 2)} className="justify-content-start" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Paginator, PaginatorPageChangeEvent, PaginatorJumpToPageInputOptions, PaginatorCurrentPageReportOptions, PaginatorRowsPerPageDropdownOptions,
+    PaginatorLastPageLinkOptions, PaginatorNextPageLinkOptions, PaginatorPageLinksOptions, PaginatorPrevPageLinkOptions, PaginatorFirstPageLinkOptions } from 'primereact/paginator';
+import { Button } from 'primereact/button';
+import { Ripple } from 'primereact/ripple';
+import { Divider } from 'primereact/divider';
+import { Dropdown } from 'primereact/dropdown';
+import { InputText } from 'primereact/inputtext';
+import { Slider } from 'primereact/slider';
+import { Tooltip } from 'primereact/tooltip';
+import { classNames } from 'primereact/utils';
+
+export default function TemplateDemo() {
+    const [first, setFirst] = useState<number[]>([0, 0, 0]);
+    const [rows, setRows] = useState([10, 10, 10]);
+
+    const [currentPage, setCurrentPage] = useState<number>(1);
+    const [pageInputTooltip, setPageInputTooltip] = useState<string>("Press 'Enter' key to go to this page.");
+
+    const onPageChange = (e: PaginatorPageChangeEvent, index: number) => {
+        setFirst(first.map((f, i) => (index === i ? e.first : f)));
+        setRows(rows.map((r, i) => (index === i ? e.rows : r)));
+    };
+
+    const onPageInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setCurrentPage(event.target.value);
+    };
+
+    const onPageInputKeyDown = (event: React.KeydownEvent<HTMLInputElement>, options: PaginatorCurrentPageReportOptions) => {
+        if (event.key === 'Enter') {
+            const page = parseInt(currentPage);
+
+            if (page < 0 || page > options.totalPages) {
+                setPageInputTooltip(\`Value must be between 1 and \${options.totalPages}.\`);
+            } else {
+                let _first = [...first];
+
+                _first[0] = currentPage ? options.rows * (page - 1) : 0;
+
+                setFirst(_first);
+                setPageInputTooltip("Press 'Enter' key to go to this page.");
+            }
+        }
+    };
+
+    const leftContent = <Button type="button" icon="pi pi-star" className="p-button-outlined" />;
+    const rightContent = <Button type="button" icon="pi pi-search" />;
+
+    const template1 = {
+        layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
+        PrevPageLink: (options: PaginatorPrevPageLinkOptions) => {
+            return (
+                <button type="button" className={classNames(options.className, 'border-round')} onClick={options.onClick} disabled={options.disabled}>
+                    <span className="p-3">Previous</span>
+                    <Ripple />
+                </button>
+            );
+        },
+        NextPageLink: (options: PaginatorNextPageLinkOptions) => {
+            return (
+                <button type="button" className={classNames(options.className, 'border-round')} onClick={options.onClick} disabled={options.disabled}>
+                    <span className="p-3">Next</span>
+                    <Ripple />
+                </button>
+            );
+        },
+        PageLinks: (options: PaginatorPageLinksOptions) => {
+            if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
+                const className = classNames(options.className, { 'p-disabled': true });
+
+                return (
+                    <span className={className} style={{ userSelect: 'none' }}>
+                        ...
+                    </span>
+                );
+            }
+
+            return (
+                <button type="button" className={options.className} onClick={options.onClick}>
+                    {options.page + 1}
+                    <Ripple />
+                </button>
+            );
+        },
+        RowsPerPageDropdown: (options: PaginatorRowsPerPageDropdownOptions) => {
+            const dropdownOptions = [
+                { label: 10, value: 10 },
+                { label: 20, value: 20 },
+                { label: 30, value: 30 },
+                { label: 'All', value: options.totalRecords }
+            ];
+
+            return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />;
+        },
+        CurrentPageReport: (options: PaginatorCurrentPageReportOptions) => {
+            return (
+                <span className="mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                    Go to <InputText size="2" className="ml-1" value={currentPage} tooltip={pageInputTooltip} onKeyDown={(e) => onPageInputKeyDown(e, options)} onChange={onPageInputChange} />
+                </span>
+            );
+        }
+    };
+    const template2 = {
+        layout: 'RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink',
+        RowsPerPageDropdown: (options: PaginatorRowsPerPageDropdownOptions) => {
+            const dropdownOptions = [
+                { label: 5, value: 5 },
+                { label: 10, value: 10 },
+                { label: 20, value: 20 },
+                { label: 120, value: 120 }
+            ];
+
+            return (
+                <React.Fragment>
+                    <span className="mx-1" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                        Items per page:{' '}
+                    </span>
+                    <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />
+                </React.Fragment>
+            );
+        },
+        CurrentPageReport: (options: PaginatorCurrentPageReportOptions) => {
+            return (
+                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
+                    {options.first} - {options.last} of {options.totalRecords}
+                </span>
+            );
+        }
+    };
+    const template3 = {
+        layout: 'RowsPerPageDropdown PrevPageLink PageLinks NextPageLink CurrentPageReport',
+        RowsPerPageDropdown: (options: PaginatorRowsPerPageDropdownOptions) => {
+            return (
+                <div className="flex align-items-center">
+                <Tooltip target=".slider>.p-slider-handle" content={\`\${options.value} / page\`} position="top" event="focus" />
+
+                    <span className="mr-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
+                        Items per page:{' '}
+                    </span>
+                    <Slider className="slider" value={options.value} onChange={options.onChange} min={10} max={120} step={30} style={{ width: '10rem' }} />
+                </div>
+            );
+        },
+        CurrentPageReport: (options: PaginatorCurrentPageReportOptions) => {
+            return (
+                <span style={{ color: 'var(--text-color)', userSelect: 'none', width: '120px', textAlign: 'center' }}>
+                    {options.first} - {options.last} of {options.totalRecords}
+                </span>
+            );
+        }
+    };
+
+    return (
+        <div className="card">
+            <Paginator template={template1} first={first[0]} rows={rows[0]} totalRecords={120} onPageChange={(e) => onPageChange(e, 0)} leftContent={leftContent} rightContent={rightContent} />
+            <Divider />
+            <Paginator template={template2} first={first[1]} rows={rows[1]} totalRecords={120} onPageChange={(e) => onPageChange(e, 1)} className="justify-content-end" />
+            <Divider />
+            <Paginator template={template3} first={first[2]} rows={rows[2]} totalRecords={120} onPageChange={(e) => onPageChange(e, 2)} className="justify-content-start" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Templating allows overriding the default content of the UI elements by defining callbacks using the element name. The parameters passed to theese callbacks contain properties for binding to your custom elements like the event
+                    handler to trigger pagination. Additional <i>leftContent</i> and <i>rightContent</i> properties are available to insert content at both sides of the paginator.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Paginator template={template1} first={first[0]} rows={rows[0]} totalRecords={120} onPageChange={(e) => onPageChange(e, 0)} leftContent={leftContent} rightContent={rightContent} />
+                <Divider />
+                <Paginator template={template2} first={first[1]} rows={rows[1]} totalRecords={120} onPageChange={(e) => onPageChange(e, 1)} className="justify-content-end" />
+                <Divider />
+                <Paginator template={template3} first={first[2]} rows={rows[2]} totalRecords={120} onPageChange={(e) => onPageChange(e, 2)} className="justify-content-start" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/paginator/theming/styleddoc.js b/components/doc/paginator/theming/styleddoc.js
new file mode 100644
index 0000000000..14cf15a521
--- /dev/null
+++ b/components/doc/paginator/theming/styleddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-paginator</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-first</td>
+                            <td>First page element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-prev</td>
+                            <td>Previous page element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-pages</td>
+                            <td>Container of page links.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-page</td>
+                            <td>A page link.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-next</td>
+                            <td>Next pge element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-last</td>
+                            <td>Last page element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-paginator-rpp-options</td>
+                            <td>Rows per page dropdown.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/paginator/theming/tailwinddoc.js b/components/doc/paginator/theming/tailwinddoc.js
new file mode 100644
index 0000000000..aa0ae7bdea
--- /dev/null
+++ b/components/doc/paginator/theming/tailwinddoc.js
@@ -0,0 +1,226 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    paginator: {
+        root: {
+            className: classNames(
+                'flex items-center justify-center flex-wrap',
+                'bg-white text-gray-500 border-0 px-4 py-2 rounded-md',
+                'dark:bg-gray-900 dark:text-white/60 dark:border-blue-900/40' // Dark Mode
+            )
+        },
+        firstpagebutton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500  min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        previouspagebutton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        nextpagebutton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        lastpagebutton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        pagebutton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:border-blue-300 dark:text-white', // Dark Mode
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                {
+                    'bg-blue-50 border-blue-50 text-blue-700 dark:bg-blue-300': context.active
+                }
+            )
+        }),
+        rowperpagedropdown: {
+            root: ({ props, state }) => ({
+                className: classNames(
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                )
+            }),
+            input: {
+                className: classNames(
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                )
+            },
+            trigger: {
+                className: classNames('flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md')
+            },
+            panel: {
+                className: classNames(
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                )
+            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
+            item: ({ context }) => ({
+                className: classNames(
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                )
+            })
+        },
+        jumptopageinput: {
+            root: 'inline-flex mx-2',
+            input: {
+                className: classNames(
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border border-gray-300 pr-0',
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] focus:border-blue-300',
+                    'dark:text-white dark:bg-gray-950 dark:border-blue-900/40', //Dark Mode
+                    'm-0 flex-auto max-w-[3rem]'
+                )
+            }
+        },
+        jumptopagedropdown: {
+            root: ({ props, state }) => ({
+                className: classNames(
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                )
+            }),
+            input: {
+                className: classNames(
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                )
+            },
+            trigger: {
+                className: classNames('flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md')
+            },
+            panel: {
+                className: classNames(
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                )
+            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
+            item: ({ context }) => ({
+                className: classNames(
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                )
+            })
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Paginator } from 'primereact/paginator';
+
+export default function UnstyledDemo() {
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(10);
+
+    const onPageChange = (event) => {
+        setFirst(event.first);
+        setRows(event.rows);
+    };
+
+    return (
+        <div className="card">
+            <Paginator first={first} rows={rows} totalRecords={120} rowsPerPageOptions={[10, 20, 30]} onPageChange={onPageChange} />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/panel/accessibilitydoc.js b/components/doc/panel/accessibilitydoc.js
new file mode 100644
index 0000000000..2744fb3552
--- /dev/null
+++ b/components/doc/panel/accessibilitydoc.js
@@ -0,0 +1,54 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button defaults to the
+                value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.
+            </p>
+            <p>
+                The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.
+            </p>
+
+            <h3>Content Toggle Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/panel/basicdoc.js b/components/doc/panel/basicdoc.js
new file mode 100644
index 0000000000..3db400ea87
--- /dev/null
+++ b/components/doc/panel/basicdoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Panel } from '@/components/lib/panel/Panel';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Panel header="Header">
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function BasicDemo() {
+    return (
+        <Panel header="Header">
+            <p className="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function BasicDemo() {
+    return (
+        <Panel header="Header">
+            <p className="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A simple Panel is created with a <i>header</i> property along with the content as children.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Panel header="Header">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panel/importdoc.js b/components/doc/panel/importdoc.js
new file mode 100644
index 0000000000..8b91952d77
--- /dev/null
+++ b/components/doc/panel/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Panel } from 'primereact/panel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/panel/pt/wireframe.js b/components/doc/panel/pt/wireframe.js
new file mode 100644
index 0000000000..74aa7798bc
--- /dev/null
+++ b/components/doc/panel/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/panel.jpg" alt="panel" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/panel/styledoc.js b/components/doc/panel/styledoc.js
new file mode 100644
index 0000000000..f94b7f08aa
--- /dev/null
+++ b/components/doc/panel/styledoc.js
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-panel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-titlebar</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-title</td>
+                            <td>Title text of panel.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-titlebar-toggler</td>
+                            <td>Toggle icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-content</td>
+                            <td>Content of panel.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/panel/templatedoc.js b/components/doc/panel/templatedoc.js
new file mode 100644
index 0000000000..cb57ca6311
--- /dev/null
+++ b/components/doc/panel/templatedoc.js
@@ -0,0 +1,234 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Panel } from '@/components/lib/panel/Panel';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Button } from '@/components/lib/button/Button';
+import { Menu } from '@/components/lib/menu/Menu';
+import { useRef } from 'react';
+
+export function TemplateDoc(props) {
+    const configMenu = useRef(null);
+    const items = [
+        {
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times'
+        }
+    ];
+
+    const headerTemplate = (options) => {
+        const className = `${options.className} justify-content-space-between`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <span className="font-bold">Amy Elsner</span>
+                </div>
+                <div>
+                    <Menu model={items} popup ref={configMenu} id="config_menu" />
+                    <button className="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
+                        <span className="pi pi-cog" />
+                    </button>
+                    {options.togglerElement}
+                </div>
+            </div>
+        );
+    };
+
+    const footerTemplate = (options) => {
+        const className = `${options.className} flex flex-wrap align-items-center justify-content-between gap-3`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-2">
+                    <Button icon="pi pi-user" rounded text />
+                    <Button icon="pi pi-bookmark" severity="secondary" rounded text />
+                </div>
+                <span className="p-text-secondary">Updated 2 hours ago</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<Panel headerTemplate={headerTemplate} footerTemplate={footerTemplate} toggleable>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>
+        `,
+        javascript: `
+import React, { useRef } from 'react'; 
+import { Panel } from 'primereact/panel';
+import { Avatar } from 'primereact/Avatar';
+import { Menu } from 'primereact/Menu';
+import { Button } from 'primereact/Button';
+
+export default function TemplateDemo() {
+    const configMenu = useRef(null);
+    const items = [
+        {
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times'
+        }
+    ];
+
+    const headerTemplate = (options) => {
+        const className = \`\${options.className} justify-content-space-between\`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <span className="font-bold">Amy Elsner</span>
+                </div>
+                <div>
+                    <Menu model={items} popup ref={configMenu} id="config_menu" />
+                    <button className="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
+                        <span className="pi pi-cog"></span>
+                    </button>
+                    {options.togglerElement}
+                </div>
+            </div>
+        );
+    };
+
+    const footerTemplate = (options) => {
+        const className = \`\${options.className} flex flex-wrap align-items-center justify-content-between gap-3\`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-2">
+                    <Button icon="pi pi-user" rounded text></Button>
+                    <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
+                </div>
+                <span className="p-text-secondary">Updated 2 hours ago</span>
+            </div>
+        );
+    };
+
+    return (
+        <Panel headerTemplate={headerTemplate} footerTemplate={footerTemplate} toggleable>
+            <p className="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react'; 
+import { Panel } from 'primereact/panel';
+import { Avatar } from 'primereact/Avatar';
+import { Menu } from 'primereact/Menu';
+import { Button } from 'primereact/Button';
+
+export default function TemplateDemo() {
+    const configMenu = useRef<HTMLElement | null>(null);
+    const items = [
+        {
+            label: 'Refresh',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times'
+        }
+    ];
+
+    const headerTemplate = (options) => {
+        const className = \`\${options.className} justify-content-space-between\`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" size="large" shape="circle" />
+                    <span className="font-bold">Amy Elsner</span>
+                </div>
+                <div>
+                    <Menu model={items} popup ref={configMenu} id="config_menu" />
+                    <button className="p-panel-header-icon p-link mr-2" onClick={(e) => configMenu?.current?.toggle(e)}>
+                        <span className="pi pi-cog"></span>
+                    </button>
+                    {options.togglerElement}
+                </div>
+            </div>
+        );
+    };
+
+    const footerTemplate = (options) => {
+        const className = \`\${options.className} flex flex-wrap align-items-center justify-content-between gap-3\`;
+
+        return (
+            <div className={className}>
+                <div className="flex align-items-center gap-2">
+                    <Button icon="pi pi-user" rounded text></Button>
+                    <Button icon="pi pi-bookmark" severity="secondary" rounded text></Button>
+                </div>
+                <span className="p-text-secondary">Updated 2 hours ago</span>
+            </div>
+        );
+    };
+
+    return (
+        <Panel headerTemplate={headerTemplate} footerTemplate={footerTemplate} toggleable>
+            <p className="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Title section is customized with the <i>headerTemplate</i> property that takes a <i>PanelHeaderTemplateOptions</i> object as a parameter and returns content.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Panel headerTemplate={headerTemplate} footerTemplate={footerTemplate} toggleable>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panel/theming/styleddoc.js b/components/doc/panel/theming/styleddoc.js
new file mode 100644
index 0000000000..9cf0b7e263
--- /dev/null
+++ b/components/doc/panel/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-panel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-title</td>
+                            <td>Title text of panel.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-toggler</td>
+                            <td>Toggle icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panel-content</td>
+                            <td>Content of panel.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/panel/theming/tailwinddoc.js b/components/doc/panel/theming/tailwinddoc.js
new file mode 100644
index 0000000000..2a51cd7b8c
--- /dev/null
+++ b/components/doc/panel/theming/tailwinddoc.js
@@ -0,0 +1,86 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    }
+};
+
+const Tailwind = {
+    panel: {
+        header: ({ props }) => ({
+            className: classNames(
+                'flex items-center justify-between', // flex and alignments
+                'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
+                { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
+            )
+        }),
+        title: 'leading-none font-bold',
+        toggler: {
+            className: classNames(
+                'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
+                'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
+                'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
+            )
+        },
+        togglerIcon: 'inline-block',
+        content: {
+            className: classNames(
+                'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+            )
+        },
+        transition: TRANSITIONS.toggleable
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card">
+            <Panel header="Header">
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/panel/toggleabledoc.js b/components/doc/panel/toggleabledoc.js
new file mode 100644
index 0000000000..5a9bd8e9d2
--- /dev/null
+++ b/components/doc/panel/toggleabledoc.js
@@ -0,0 +1,89 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Panel } from '@/components/lib/panel/Panel';
+import { useRef } from 'react';
+
+export function ToggleableDoc(props) {
+    const ref = useRef(null);
+    const code = {
+        basic: `
+<Panel header="Header" toggleable>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
+
+export default function ToggleableDemo() {
+    const ref = useRef(null);
+    return (
+        <Button label="Toggle" className="m-2" onClick={() => ref.current.toggle()} />
+        <Button label="Expand" className="m-2" onClick={() => ref.current.expand()} />
+        <Button label="Collapse" className="m-2" onClick={() => ref.current.collapse()} />
+        <Panel ref={ref} header="Header" toggleable>
+            <p className="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+import { Panel } from 'primereact/panel';
+
+export default function ToggleableDemo() {
+    const ref = useRef<Panel>(null);
+    return (
+        <Button label="Toggle" className="m-2" onClick={() => ref.current?.toggle()} />
+        <Button label="Expand" className="m-2" onClick={() => ref.current?.expand()} />
+        <Button label="Collapse" className="m-2" onClick={() => ref.current?.collapse()} />
+        <Panel ref={ref} header="Header" toggleable>
+            <p className="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Panel>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Content of the panel can be expanded and collapsed when <i>toggleable</i> option is enabled. A toggleable panel can either be used as a Controlled or Uncontrolled component. In controlled mode a binding to <i>collapsed</i>{' '}
+                    property along with <i>onToggle</i> event are needed to manage the content state.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Button label="Toggle" className="m-2" onClick={() => ref.current.toggle()} />
+                <Button label="Expand" className="m-2" onClick={() => ref.current.expand()} />
+                <Button label="Collapse" className="m-2" onClick={() => ref.current.collapse()} />
+
+                <Panel ref={ref} header="Header" toggleable>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/accessibilitydoc.js b/components/doc/panelmenu/accessibilitydoc.js
new file mode 100644
index 0000000000..4e6fd851ce
--- /dev/null
+++ b/components/doc/panelmenu/accessibilitydoc.js
@@ -0,0 +1,139 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Accordion header elements have a <i>button</i> role, an <i>aria-label</i> defined using the <i>label</i> property of the menuitem model and <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i>{' '}
+                for the visibility state.
+            </p>
+            <p>
+                The content of an accordion panel uses <i>region</i> role, defines an id that matches the <i>aria-controls</i> of the header and <i>aria-labelledby</i> referring to the id of the header.
+            </p>
+
+            <p>
+                The tree elements has a <i>tree</i> as the role and each menu item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i> and <i>aria-expanded</i> attributes. The container element of a treenode has the{' '}
+                <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and added to each treeitem.
+            </p>
+
+            <h3>Header Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Adds focus to the first header when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the content.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>If panel is collapsed then moves focus to the next header, otherwise first treenode of the panel receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>If previous panel is collapsed then moves focus to the previous header, otherwise last treenode of the previous panel receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Tree Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next focusable element in the page tab order.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous focusable element in the page tab order.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/panelmenu/basicdoc.js b/components/doc/panelmenu/basicdoc.js
new file mode 100644
index 0000000000..595a3deb93
--- /dev/null
+++ b/components/doc/panelmenu/basicdoc.js
@@ -0,0 +1,284 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu';
+
+export function BasicDoc(props) {
+    const items = [
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'Documents',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Invoices',
+                            icon: 'pi pi-file-pdf',
+                            items: [
+                                {
+                                    label: 'Pending',
+                                    icon: 'pi pi-stop'
+                                },
+                                {
+                                    label: 'Paid',
+                                    icon: 'pi pi-check-circle'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Clients',
+                            icon: 'pi pi-users'
+                        }
+                    ]
+                },
+                {
+                    label: 'Images',
+                    icon: 'pi pi-image',
+                    items: [
+                        {
+                            label: 'Logos',
+                            icon: 'pi pi-image'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Cloud',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-cloud-upload'
+                },
+                {
+                    label: 'Download',
+                    icon: 'pi pi-cloud-download'
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-refresh'
+                }
+            ]
+        },
+        {
+            label: 'Devices',
+            icon: 'pi pi-desktop',
+            items: [
+                {
+                    label: 'Phone',
+                    icon: 'pi pi-mobile'
+                },
+                {
+                    label: 'Desktop',
+                    icon: 'pi pi-desktop'
+                },
+                {
+                    label: 'Tablet',
+                    icon: 'pi pi-tablet'
+                }
+            ]
+        }
+    ];
+    const code = {
+        basic: `
+<PanelMenu model={items} className="w-full md:w-20rem" />   
+`,
+        javascript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+
+export default function BasicDemo() {
+    const items = [     
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'Documents',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Invoices',
+                            icon: 'pi pi-file-pdf',
+                            items: [
+                                {
+                                    label: 'Pending',
+                                    icon: 'pi pi-stop'
+                                },
+                                {
+                                    label: 'Paid',
+                                    icon: 'pi pi-check-circle'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Clients',
+                            icon: 'pi pi-users'
+                        }
+                    ]
+                },
+                {
+                    label: 'Images',
+                    icon: 'pi pi-image',
+                    items: [
+                        {
+                            label: 'Logos',
+                            icon: 'pi pi-image'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Cloud',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-cloud-upload'
+                },
+                {
+                    label: 'Download',
+                    icon: 'pi pi-cloud-download'
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-refresh'
+                }
+            ]
+        },
+        {
+            label: 'Devices',
+            icon: 'pi pi-desktop',
+            items: [
+                {
+                    label: 'Phone',
+                    icon: 'pi pi-mobile'
+                },
+                {
+                    label: 'Desktop',
+                    icon: 'pi pi-desktop'
+                },
+                {
+                    label: 'Tablet',
+                    icon: 'pi pi-tablet'
+                }
+            ]
+        }
+    ];
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+    {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'Documents',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Invoices',
+                            icon: 'pi pi-file-pdf',
+                            items: [
+                                {
+                                    label: 'Pending',
+                                    icon: 'pi pi-stop'
+                                },
+                                {
+                                    label: 'Paid',
+                                    icon: 'pi pi-check-circle'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Clients',
+                            icon: 'pi pi-users'
+                        }
+                    ]
+                },
+                {
+                    label: 'Images',
+                    icon: 'pi pi-image',
+                    items: [
+                        {
+                            label: 'Logos',
+                            icon: 'pi pi-image'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Cloud',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-cloud-upload'
+                },
+                {
+                    label: 'Download',
+                    icon: 'pi pi-cloud-download'
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-refresh'
+                }
+            ]
+        },
+        {
+            label: 'Devices',
+            icon: 'pi pi-desktop',
+            items: [
+                {
+                    label: 'Phone',
+                    icon: 'pi pi-mobile'
+                },
+                {
+                    label: 'Desktop',
+                    icon: 'pi pi-desktop'
+                },
+                {
+                    label: 'Tablet',
+                    icon: 'pi pi-tablet'
+                }
+            ]
+        }
+    ];
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PanelMenu requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <PanelMenu model={items} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/commanddoc.js b/components/doc/panelmenu/commanddoc.js
new file mode 100644
index 0000000000..f36054da1d
--- /dev/null
+++ b/components/doc/panelmenu/commanddoc.js
@@ -0,0 +1,232 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu';
+import { useRef } from 'react';
+import { Toast } from '@/components/lib/toast/Toast';
+
+export function CommandDoc(props) {
+    const toast = useRef(null);
+
+    const items = [
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Sign Out',
+            icon: 'pi pi-sign-out',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+            }
+        }
+    ];
+    const code = {
+        basic: `
+<PanelMenu model={items} className="w-full md:w-20rem" />   
+<Toast ref={toast} />
+`,
+        javascript: `
+import React, { useRef } from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { Toast } from 'primereact/toast';
+
+export default function CommandDemo() {
+    const toast = useRef(null);
+
+    const items = [
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Sign Out',
+            icon: 'pi pi-sign-out',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+            }
+        }
+    ];
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+            <Toast ref={toast} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function CommandDemo() {
+    const toast = useRef<Toast>(null);
+
+    const items: MenuItem[] = [
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-search',
+                    command: () => {
+                        toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Sign Out',
+            icon: 'pi pi-sign-out',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 });
+            }
+        }
+    ];
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+            <Toast ref={toast} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>command</i> property defines the callback to run when an item is activated by click or a key event.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <PanelMenu model={items} className="w-full md:w-20rem" />
+                <Toast ref={toast} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/controlleddoc.js b/components/doc/panelmenu/controlleddoc.js
new file mode 100644
index 0000000000..95d33aa691
--- /dev/null
+++ b/components/doc/panelmenu/controlleddoc.js
@@ -0,0 +1,342 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu';
+import { useState } from 'react';
+
+export function ControlledDoc(props) {
+    const items = [
+        {
+            key: '0',
+            label: 'Users',
+            icon: 'pi pi-users',
+            items: [
+                {
+                    key: '0_1',
+                    label: 'New',
+                    items: [
+                        {
+                            key: '0_1_0',
+                            label: 'Member'
+                        },
+                        {
+                            key: '0_1_1',
+                            label: 'Group'
+                        }
+                    ]
+                },
+                {
+                    key: '0_2',
+                    label: 'Search'
+                }
+            ]
+        },
+        {
+            key: '1',
+            label: 'Tasks',
+            icon: 'pi pi-server',
+            items: [
+                {
+                    key: '1_0',
+                    label: 'Add New'
+                },
+                {
+                    key: '1_1',
+                    label: 'Pending'
+                },
+                {
+                    key: '1_2',
+                    label: 'Overdue'
+                }
+            ]
+        },
+        {
+            key: '2',
+            label: 'Calendar',
+            icon: 'pi pi-calendar',
+
+            items: [
+                {
+                    key: '2_0',
+                    label: 'New Event'
+                },
+                {
+                    key: '2_1',
+                    label: 'Today'
+                },
+                {
+                    key: '2_2',
+                    label: 'This Week'
+                }
+            ]
+        }
+    ];
+
+    const [expandedKeys, setExpandedKeys] = useState({});
+
+    const toggleAll = () => {
+        if (Object.keys(expandedKeys).length) {
+            collapseAll();
+        } else {
+            expandAll();
+        }
+    };
+
+    const expandAll = () => {
+        items.forEach(expandNode);
+        setExpandedKeys({ ...expandedKeys });
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node) => {
+        if (node.items && node.items.length) {
+            expandedKeys[node.key] = true;
+
+            node.items.forEach(expandNode);
+        }
+    };
+
+    const code = {
+        basic: `
+<div className="card flex flex-column align-items-center gap-3">
+    <Button type="button" label="Toggle All" text onClick={() => toggleAll()} />
+    <PanelMenu model={items} expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys} className="w-full md:w-20rem" multiple />
+</div>  
+`,
+        javascript: `
+import React, { useState } from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { Button } from 'primereact/button';
+
+export default function ControlledDemo() {
+    const items = [
+        {
+            key: '0',
+            label: 'Users',
+            icon: 'pi pi-users',
+            items: [
+                {
+                    key: '0_1',
+                    label: 'New',
+                    items: [
+                        {
+                            key: '0_1_0',
+                            label: 'Member',
+                        },
+                        {
+                            key: '0_1_1',
+                            label: 'Group',
+                        }
+                    ]
+                },
+                {
+                    key: '0_2',
+                    label: 'Search',
+                }
+            ]
+        },
+        {
+            key: '1',
+            label: 'Tasks',
+            icon: 'pi pi-server',
+            items: [
+                {
+                    key: '1_0',
+                    label: 'Add New',
+                },
+                {
+                    key: '1_1',
+                    label: 'Pending',
+                },
+                {
+                    key: '1_2',
+                    label: 'Overdue',
+                }
+            ]
+        },
+        {
+            key: '2',
+            label: 'Calendar',
+            icon: 'pi pi-calendar',
+
+            items: [
+                {
+                    key: '2_0',
+                    label: 'New Event',
+                },
+                {
+                    key: '2_1',
+                    label: 'Today',
+                },
+                {
+                    key: '2_2',
+                    label: 'This Week',
+                }
+            ]
+        }
+    ];
+
+    const [expandedKeys, setExpandedKeys] = useState({});
+
+    const toggleAll = () => {
+        if (Object.keys(expandedKeys).length) {
+            collapseAll();
+        } else {
+            expandAll();
+        }
+    };
+
+    const expandAll = () => {
+        items.forEach(expandNode);
+        setExpandedKeys({ ...expandedKeys });
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node) => {
+        if (node.items && node.items.length) {
+            expandedKeys[node.key] = true;
+
+            node.items.forEach(expandNode);
+        }
+    };
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <Button type="button" label="Toggle All" text onClick={() => toggleAll()} />
+            <PanelMenu model={items} expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys} className="w-full md:w-20rem" multiple />
+        </div>
+
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { Button } from 'primereact/button';
+
+export default function ControlledDemo() {
+    const items = [
+        {
+            key: '0',
+            label: 'Users',
+            icon: 'pi pi-users',
+            items: [
+                {
+                    key: '0_1',
+                    label: 'New',
+                    items: [
+                        {
+                            key: '0_1_0',
+                            label: 'Member',
+                        },
+                        {
+                            key: '0_1_1',
+                            label: 'Group',
+                        }
+                    ]
+                },
+                {
+                    key: '0_2',
+                    label: 'Search',
+                }
+            ]
+        },
+        {
+            key: '1',
+            label: 'Tasks',
+            icon: 'pi pi-server',
+            items: [
+                {
+                    key: '1_0',
+                    label: 'Add New',
+                },
+                {
+                    key: '1_1',
+                    label: 'Pending',
+                },
+                {
+                    key: '1_2',
+                    label: 'Overdue',
+                }
+            ]
+        },
+        {
+            key: '2',
+            label: 'Calendar',
+            icon: 'pi pi-calendar',
+            items: [
+                {
+                    key: '2_0',
+                    label: 'New Event',
+                },
+                {
+                    key: '2_1',
+                    label: 'Today',
+                },
+                {
+                    key: '2_2',
+                    label: 'This Week',
+                }
+            ]
+        }
+    ];
+
+    const [expandedKeys, setExpandedKeys] = useState<any>({});
+
+    const toggleAll = () => {
+        if (Object.keys(expandedKeys).length) {
+            collapseAll();
+        } else {
+            expandAll();
+        }
+    };
+
+    const expandAll = () => {
+        items.forEach(expandNode);
+        setExpandedKeys({ ...expandedKeys });
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node) => {
+        if (node.items && node.items.length) {
+            expandedKeys[node.key] = true;
+
+            node.items.forEach(expandNode);
+        }
+    };
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <Button type="button" label="Toggle All" text onClick={() => toggleAll()} />
+            <PanelMenu model={items} expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys} className="w-full md:w-20rem" multiple />
+            </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    If the menuitem has a <i>key</i> defined, PanelMenu state can be controlled programmatically with the <i>expandedKeys</i> property that defines the keys that are expanded. This property is a Map instance whose key is the key of a
+                    node and value is a boolean.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <Button type="button" label="Toggle All" text onClick={() => toggleAll()} />
+                <PanelMenu model={items} expandedKeys={expandedKeys} onExpandedKeysChange={setExpandedKeys} className="w-full md:w-20rem" multiple />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/importdoc.js b/components/doc/panelmenu/importdoc.js
new file mode 100644
index 0000000000..8cf4099294
--- /dev/null
+++ b/components/doc/panelmenu/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { PanelMenu } from 'primereact/panelmenu';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/multipledoc.js b/components/doc/panelmenu/multipledoc.js
new file mode 100644
index 0000000000..503112ac9c
--- /dev/null
+++ b/components/doc/panelmenu/multipledoc.js
@@ -0,0 +1,286 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu';
+
+export function MultipleDoc(props) {
+    const items = [
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'Documents',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Invoices',
+                            icon: 'pi pi-file-pdf',
+                            items: [
+                                {
+                                    label: 'Pending',
+                                    icon: 'pi pi-stop'
+                                },
+                                {
+                                    label: 'Paid',
+                                    icon: 'pi pi-check-circle'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Clients',
+                            icon: 'pi pi-users'
+                        }
+                    ]
+                },
+                {
+                    label: 'Images',
+                    icon: 'pi pi-image',
+                    items: [
+                        {
+                            label: 'Logos',
+                            icon: 'pi pi-image'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Cloud',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-cloud-upload'
+                },
+                {
+                    label: 'Download',
+                    icon: 'pi pi-cloud-download'
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-refresh'
+                }
+            ]
+        },
+        {
+            label: 'Devices',
+            icon: 'pi pi-desktop',
+            items: [
+                {
+                    label: 'Phone',
+                    icon: 'pi pi-mobile'
+                },
+                {
+                    label: 'Desktop',
+                    icon: 'pi pi-desktop'
+                },
+                {
+                    label: 'Tablet',
+                    icon: 'pi pi-tablet'
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<PanelMenu model={items} className="w-full md:w-20rem" />   
+`,
+        javascript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+
+export default function MultipleDemo() {
+    const items = [
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'Documents',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Invoices',
+                            icon: 'pi pi-file-pdf',
+                            items: [
+                                {
+                                    label: 'Pending',
+                                    icon: 'pi pi-stop'
+                                },
+                                {
+                                    label: 'Paid',
+                                    icon: 'pi pi-check-circle'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Clients',
+                            icon: 'pi pi-users'
+                        }
+                    ]
+                },
+                {
+                    label: 'Images',
+                    icon: 'pi pi-image',
+                    items: [
+                        {
+                            label: 'Logos',
+                            icon: 'pi pi-image'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Cloud',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-cloud-upload'
+                },
+                {
+                    label: 'Download',
+                    icon: 'pi pi-cloud-download'
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-refresh'
+                }
+            ]
+        },
+        {
+            label: 'Devices',
+            icon: 'pi pi-desktop',
+            items: [
+                {
+                    label: 'Phone',
+                    icon: 'pi pi-mobile'
+                },
+                {
+                    label: 'Desktop',
+                    icon: 'pi pi-desktop'
+                },
+                {
+                    label: 'Tablet',
+                    icon: 'pi pi-tablet'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function MultipleDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Files',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'Documents',
+                    icon: 'pi pi-file',
+                    items: [
+                        {
+                            label: 'Invoices',
+                            icon: 'pi pi-file-pdf',
+                            items: [
+                                {
+                                    label: 'Pending',
+                                    icon: 'pi pi-stop'
+                                },
+                                {
+                                    label: 'Paid',
+                                    icon: 'pi pi-check-circle'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Clients',
+                            icon: 'pi pi-users'
+                        }
+                    ]
+                },
+                {
+                    label: 'Images',
+                    icon: 'pi pi-image',
+                    items: [
+                        {
+                            label: 'Logos',
+                            icon: 'pi pi-image'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Cloud',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-cloud-upload'
+                },
+                {
+                    label: 'Download',
+                    icon: 'pi pi-cloud-download'
+                },
+                {
+                    label: 'Sync',
+                    icon: 'pi pi-refresh'
+                }
+            ]
+        },
+        {
+            label: 'Devices',
+            icon: 'pi pi-desktop',
+            items: [
+                {
+                    label: 'Phone',
+                    icon: 'pi pi-mobile'
+                },
+                {
+                    label: 'Desktop',
+                    icon: 'pi pi-desktop'
+                },
+                {
+                    label: 'Tablet',
+                    icon: 'pi pi-tablet'
+                }
+            ]
+        }
+    ];
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Only one single root menuitem can be active by default, enable <i>multiple</i> property to be able to open more than one items.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <PanelMenu model={items} className="w-full md:w-20rem" multiple />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/pt/wireframe.js b/components/doc/panelmenu/pt/wireframe.js
new file mode 100644
index 0000000000..4944b5931a
--- /dev/null
+++ b/components/doc/panelmenu/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="panelmenu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/panelmenu/routerdoc.js b/components/doc/panelmenu/routerdoc.js
new file mode 100644
index 0000000000..171a16268d
--- /dev/null
+++ b/components/doc/panelmenu/routerdoc.js
@@ -0,0 +1,182 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu';
+import { useRouter } from 'next/router';
+
+export function RouterDoc(props) {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    icon: 'pi pi-eraser',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    icon: 'pi pi-heart',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    icon: 'pi pi-star',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    icon: 'pi pi-bookmark',
+                    url: 'https://vite.dev/'
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<PanelMenu model={items} className="w-full md:w-20rem" />   
+`,
+        javascript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    icon: 'pi pi-eraser',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    icon: 'pi pi-heart',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    icon: 'pi pi-star',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    icon: 'pi pi-bookmark',
+                    url: 'https://vite.dev/'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    icon: 'pi pi-eraser',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    icon: 'pi pi-heart',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    icon: 'pi pi-star',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    icon: 'pi pi-bookmark',
+                    url: 'https://vite.dev/'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items with navigation are defined with <i>command</i> and <i>url</i> property to be able to use a router link component, an external link or programmatic navigation.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <PanelMenu model={items} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/styledoc.js b/components/doc/panelmenu/styledoc.js
new file mode 100644
index 0000000000..4afd1e0db9
--- /dev/null
+++ b/components/doc/panelmenu/styledoc.js
@@ -0,0 +1,59 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-panelmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panelmenu-header</td>
+                            <td>Accordion header of root submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panelmenu-content</td>
+                            <td>Accordion content of root submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panelmenu-icon</td>
+                            <td>Arrow icon of an accordion header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/templatedoc.js b/components/doc/panelmenu/templatedoc.js
new file mode 100644
index 0000000000..4e1332da13
--- /dev/null
+++ b/components/doc/panelmenu/templatedoc.js
@@ -0,0 +1,304 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PanelMenu } from '@/components/lib/panelmenu/PanelMenu';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function TemplateDoc(props) {
+    const itemRenderer = (item, options) => (
+        <a className="flex align-items-center px-3 py-2 cursor-pointer" onClick={options.onClick}>
+            <span className={`${item.icon} text-primary`} />
+            <span className={`mx-2 ${item.items && 'font-semibold'}`}>{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+
+    const items = [
+        {
+            label: 'Mail',
+            icon: 'pi pi-envelope',
+            badge: 5,
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Compose',
+                    icon: 'pi pi-file-edit',
+                    shortcut: '⌘+N',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Inbox',
+                    icon: 'pi pi-inbox',
+                    badge: 5,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Sent',
+                    icon: 'pi pi-send',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Trash',
+                    icon: 'pi pi-trash',
+                    shortcut: '⌘+T',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Reports',
+            icon: 'pi pi-chart-bar',
+            shortcut: '⌘+R',
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Sales',
+                    icon: 'pi pi-chart-line',
+                    badge: 3,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Products',
+                    icon: 'pi pi-list',
+                    badge: 6,
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            icon: 'pi pi-user',
+            shortcut: '⌘+W',
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Privacy',
+                    icon: 'pi pi-shield',
+                    shortcut: '⌘+P',
+                    template: itemRenderer
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<PanelMenu model={items} className="w-full md:w-20rem" />   
+`,
+        javascript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item, options) => (
+        <a className="flex align-items-center px-3 py-2 cursor-pointer" onClick={options.onClick}>
+            <span className={\`\${item.icon} text-primary\`} />
+            <span className={\`mx-2 \${item.items && 'font-semibold'}\`}>{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+
+    const items = [
+        {
+            label: 'Mail',
+            icon: 'pi pi-envelope',
+            badge: 5,
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Compose',
+                    icon: 'pi pi-file-edit',
+                    shortcut: '⌘+N',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Inbox',
+                    icon: 'pi pi-inbox',
+                    badge: 5,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Sent',
+                    icon: 'pi pi-send',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Trash',
+                    icon: 'pi pi-trash',
+                    shortcut: '⌘+T',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Reports',
+            icon: 'pi pi-chart-bar',
+            shortcut: '⌘+R',
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Sales',
+                    icon: 'pi pi-chart-line',
+                    badge: 3,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Products',
+                    icon: 'pi pi-list',
+                    badge: 6,
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            icon: 'pi pi-user',
+            shortcut: '⌘+W',
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Privacy',
+                    icon: 'pi pi-shield',
+                    shortcut: '⌘+P',
+                    template: itemRenderer
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item, options) => (
+        <a className="flex align-items-center px-3 py-2 cursor-pointer" onClick={options.onClick}>
+            <span className={\`\${item.icon} text-primary\`} />
+            <span className={\`mx-2 \${item.items && 'font-semibold'}\`}>{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+
+    const items: MenuItem[] = [
+        {
+            label: 'Mail',
+            icon: 'pi pi-envelope',
+            badge: 5,
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Compose',
+                    icon: 'pi pi-file-edit',
+                    shortcut: '⌘+N',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Inbox',
+                    icon: 'pi pi-inbox',
+                    badge: 5,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Sent',
+                    icon: 'pi pi-send',
+                    shortcut: '⌘+S',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Trash',
+                    icon: 'pi pi-trash',
+                    shortcut: '⌘+T',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Reports',
+            icon: 'pi pi-chart-bar',
+            shortcut: '⌘+R',
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Sales',
+                    icon: 'pi pi-chart-line',
+                    badge: 3,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Products',
+                    icon: 'pi pi-list',
+                    badge: 6,
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Profile',
+            icon: 'pi pi-user',
+            shortcut: '⌘+W',
+            template: itemRenderer,
+            items: [
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-cog',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Privacy',
+                    icon: 'pi pi-shield',
+                    shortcut: '⌘+P',
+                    template: itemRenderer
+                }
+            ]
+        }
+    ];
+    return (
+        <div className="card flex justify-content-center">
+            <PanelMenu model={items} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PanelMenu offers item customization with the items <i>template</i> property that receives the item instance and returns an element.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <PanelMenu model={items} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/theming/styleddoc.js b/components/doc/panelmenu/theming/styleddoc.js
new file mode 100644
index 0000000000..e8856ce23e
--- /dev/null
+++ b/components/doc/panelmenu/theming/styleddoc.js
@@ -0,0 +1,55 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-panelmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panelmenu-header</td>
+                            <td>Accordion header of root submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panelmenu-content</td>
+                            <td>Accordion content of root submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-panelmenu-icon</td>
+                            <td>Arrow icon of an accordion header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/panelmenu/theming/tailwinddoc.js b/components/doc/panelmenu/theming/tailwinddoc.js
new file mode 100644
index 0000000000..85d413af90
--- /dev/null
+++ b/components/doc/panelmenu/theming/tailwinddoc.js
@@ -0,0 +1,210 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    toggleable: {
+        timeout: 500,
+        classNames: {
+            enter: 'max-h-0',
+            enterActive: '!max-h-40 overflow-hidden transition-all duration-500 ease-in-out',
+            exit: 'max-h-40',
+            exitActive: '!max-h-0 overflow-hidden transition-all duration-500 ease-in'
+        }
+    },
+};
+
+const Tailwind = {
+    panelmenu: {
+        root: 'w-full md:w-[25rem]',
+        panel: 'mb-1',
+        header: {
+            className: classNames(
+                'outline-none',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus
+            )
+        },
+        headercontent: {
+            className: classNames(
+                'border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-900 rounded-md transition-shadow duration-200',
+                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80'
+            )
+        },
+        headeraction: {
+            className: classNames('flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold')
+        },
+        submenuicon: 'mr-2',
+        headericon: 'mr-2',
+        menucontent: 'py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md',
+        menu: {
+            className: classNames('outline-none', 'm-0 p-0 list-none')
+        },
+        menuitem: ({ context }) => ({
+            className: classNames(
+                'text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none',
+                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80', // Hover
+                {
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
+                }
+            )
+        }),
+        action: {
+            className: classNames('text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden')
+        },
+        icon: 'mr-2',
+        submenu: 'p-0 pl-4 m-0 list-none',
+        transition: TRANSITIONS.toggleable
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { PanelMenu } from 'primereact/panelmenu';
+
+export default function UnstyledDemo() {
+    const items = [
+        {
+            label:'File',
+            icon:'pi pi-fw pi-file',
+            items:[
+                {
+                    label:'New',
+                    icon:'pi pi-fw pi-plus',
+                    items:[
+                    {
+                        label:'Bookmark',
+                        icon:'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label:'Video',
+                        icon:'pi pi-fw pi-video'
+                    }
+                    ]
+                },
+                {
+                    label:'Delete',
+                    icon:'pi pi-fw pi-trash'
+                },
+                {
+                    label:'Export',
+                    icon:'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label:'Edit',
+            icon:'pi pi-fw pi-pencil',
+            items:[
+                {
+                    label:'Left',
+                    icon:'pi pi-fw pi-align-left'
+                },
+                {
+                    label:'Right',
+                    icon:'pi pi-fw pi-align-right'
+                },
+                {
+                    label:'Center',
+                    icon:'pi pi-fw pi-align-center'
+                },
+                {
+                    label:'Justify',
+                    icon:'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label:'Users',
+            icon:'pi pi-fw pi-user',
+            items:[
+                {
+                    label:'New',
+                    icon:'pi pi-fw pi-user-plus'
+                },
+                {
+                    label:'Delete',
+                    icon:'pi pi-fw pi-user-minus'
+                },
+                {
+                    label:'Search',
+                    icon:'pi pi-fw pi-users',
+                    items:[
+                    {
+                        label:'Filter',
+                        icon:'pi pi-fw pi-filter',
+                        items:[
+                            {
+                                label:'Print',
+                                icon:'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon:'pi pi-fw pi-bars',
+                        label:'List'
+                    }
+                    ]
+                }
+            ]
+        },
+        {
+            label:'Events',
+            icon:'pi pi-fw pi-calendar',
+            items:[
+                {
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                    {
+                        label:'Save',
+                        icon:'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label:'Delete',
+                        icon:'pi pi-fw pi-calendar-minus'
+                    }
+                    ]
+                },
+                {
+                    label:'Archive',
+                    icon:'pi pi-fw pi-calendar-times',
+                    items:[
+                    {
+                        label:'Remove',
+                        icon:'pi pi-fw pi-calendar-minus'
+                    }
+                    ]
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-center">
+            <PanelMenu model={items} className="w-full md:w-25rem" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/passthrough/basicdoc.js b/components/doc/passthrough/basicdoc.js
new file mode 100644
index 0000000000..0675446484
--- /dev/null
+++ b/components/doc/passthrough/basicdoc.js
@@ -0,0 +1,147 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Panel } from '@/components/lib/panel/Panel';
+import { classNames } from '@/components/lib/utils/Utils';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Panel
+    header="Header"
+    toggleable
+    pt={{
+        header: ({ state }) => ({
+            id: 'myPanelHeader',
+            style: {
+                'user-select': 'none'
+            },
+            className: classNames('border-primary', {
+                'bg-primary': state.collapsed,
+                'bg-primary-reverse': !state.collapsed
+            })
+        }),
+        content: { className: 'border-primary text-lg text-primary-700' },
+        title: 'text-xl', // OR { className: 'text-xl' }
+        toggler: 'bg-primary hover:bg-primary-reverse' // OR { className: 'bg-primary hover:bg-primary-reverse' }
+    }}
+>
+    <p className="m-0">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+</Panel>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Panel
+                header="Header"
+                toggleable
+                pt={{
+                    header: ({ state }) => ({
+                        id: 'myPanelHeader',
+                        style: {
+                            'user-select': 'none'
+                        },
+                        className: classNames('border-primary', {
+                            'bg-primary': state.collapsed,
+                            'bg-primary-reverse': !state.collapsed
+                        })
+                    }),
+                    content: { className: 'border-primary text-lg text-primary-700' },
+                    title: 'text-xl', // OR { className: 'text-xl' }
+                    toggler: 'bg-primary hover:bg-primary-reverse' // OR { className: 'bg-primary hover:bg-primary-reverse' }
+                }}
+            >
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <Panel
+                header="Header"
+                toggleable
+                pt={{
+                    header: ({ state }) => ({
+                        id: 'myPanelHeader',
+                        style: {
+                            'user-select': 'none'
+                        },
+                        className: classNames('border-primary', {
+                            'bg-primary': state.collapsed,
+                            'bg-primary-reverse': !state.collapsed
+                        })
+                    }),
+                    content: { className: 'border-primary text-lg text-primary-700' },
+                    title: 'text-xl', // OR { className: 'text-xl' }
+                    toggler: 'bg-primary hover:bg-primary-reverse' // OR { className: 'bg-primary hover:bg-primary-reverse' }
+                }}
+            >
+                <p className="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+            </Panel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Each component has a special <i>pt</i> property to define an object with keys corresponding to the available DOM elements. Each value is also an object to define the arbitrary properties to apply to the element such as styling,
+                    aria, data-* or custom attributes. Every component documentation has a dedicated section to document the available section names exposed via PT.
+                </p>
+                <p>
+                    Most common usage of <i>pt</i> is styling and customization. The <i>className</i> and <i>style</i> properties support the exact syntax of the corresponding <i>classNames</i> like objects and conditionals. Example below styles a
+                    Panel component with PrimeFlex CSS library.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Panel
+                    header="Header"
+                    toggleable
+                    pt={{
+                        header: ({ state }) => ({
+                            id: 'myPanelHeader',
+                            style: {
+                                'user-select': 'none'
+                            },
+                            className: classNames('border-primary', {
+                                'bg-primary': state.collapsed,
+                                'bg-primary-reverse': !state.collapsed
+                            })
+                        }),
+                        content: { className: 'border-primary text-lg text-primary-700' },
+                        title: 'text-xl', // OR { className: 'text-xl' }
+                        toggler: 'bg-primary hover:bg-primary-reverse' // OR { className: 'bg-primary hover:bg-primary-reverse' }
+                    }}
+                >
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/passthrough/customcss.js b/components/doc/passthrough/customcss.js
new file mode 100644
index 0000000000..a7f09cdd4c
--- /dev/null
+++ b/components/doc/passthrough/customcss.js
@@ -0,0 +1,63 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function CustomCSSDoc(props) {
+    const code = {
+        basic: `
+// _app.js        
+import { PrimeReactProvider } from "primereact/api";
+
+export default function CustomCSSDemo() {
+
+    const pt = {
+        global: {
+            css: \`
+                button {
+                    padding: 2rem;
+                }
+
+                .p-ink {
+                    display: block;
+                    position: absolute;
+                    background: rgba(255, 255, 255, 0.5);
+                    border-radius: 100%;
+                    transform: scale(0);
+                    pointer-events: none;
+                }
+
+                .p-ink-active {
+                    animation: ripple 0.4s linear;
+                }
+
+                @keyframes ripple {
+                    100% {
+                        opacity: 0;
+                        transform: scale(2.5);
+                    }
+                }
+            \`
+        }
+    };
+
+    return(
+        <PrimeReactProvider value={{ pt }}>
+            <App />
+        </PrimeReactProvider>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through props
+                    configuration.
+                </p>
+            </DocSectionText>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/passthrough/globalptdoc.js b/components/doc/passthrough/globalptdoc.js
new file mode 100644
index 0000000000..1d372c8534
--- /dev/null
+++ b/components/doc/passthrough/globalptdoc.js
@@ -0,0 +1,41 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function GlobalPTDoc(props) {
+    const code = {
+        basic: `
+// _app.js        
+import { PrimeReactProvider } from "primereact/api";
+
+export default function GlobalPTDemo() {
+
+    const pt = {
+        panel: {
+            header: { className: 'bg-primary' }
+        },
+        autocomplete: {
+            input: { root: { className: 'w-16rem' } }
+        }
+    };
+
+    return(
+        <PrimeReactProvider value={{ pt }}>
+            <App />
+        </PrimeReactProvider>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Defines the shared pass through properties per component type. For example, with the configuration below all panel headers have the <i>bg-primary</i> style class and the all autocomplete components have a fixed width. These
+                    settings can be overriden by a particular component as components <i>pt</i> property has higher precedence over global <i>pt</i>.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/passthrough/lifecycle.js b/components/doc/passthrough/lifecycle.js
new file mode 100644
index 0000000000..2f1f7712be
--- /dev/null
+++ b/components/doc/passthrough/lifecycle.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function LifeCyleDoc(props) {
+    const code = {
+        basic: `
+<Panel header="Header" pt={panelPT}>
+    Content
+</Panel>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function LifeCyleDemo() {
+    const panelPt = {
+        hooks: {
+            useMountEffect: () => {
+                //panel mounted
+            },
+            useUnmountEffect: () => {
+                //panel unmounted
+            }
+    };
+
+    return (
+        <div className="card">
+            <Panel header="Header" pt={panelPT}>
+                Content
+            </Panel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function LifeCyleDemo() {
+    const panelPt = {
+        hooks: {
+            useMountEffect: () => {
+                //panel mounted
+            },
+            useUnmountEffect: () => {
+                //panel unmounted
+            }
+    };
+    
+    return (
+        <div className="card">
+            <Panel header="Header" pt={panelPT}>
+                Content
+            </Panel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Lifecycle hooks of components are exposed as pass through using the <i>hooks</i> property so that callback functions can be registered. Available callbacks are <i>useMountEffect</i>, <i>useUpdateEffect</i>, <i>useUnmountEffect</i>
+                    . Refer to the React.js documentation for detailed information about lifecycle hooks.
+                </p>
+            </DocSectionText>
+
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/passthrough/usepassthroughdoc.js b/components/doc/passthrough/usepassthroughdoc.js
new file mode 100644
index 0000000000..a06c416dc7
--- /dev/null
+++ b/components/doc/passthrough/usepassthroughdoc.js
@@ -0,0 +1,128 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function UsePassThroughDoc(props) {
+    const code1 = {
+        basic: `
+import React from 'react'; 
+import { PrimeReactProvider } from "primereact/api";
+import { usePassThrough } from "primereact/passthrough";
+import Tailwind from "primereact/passthrough/tailwind";
+
+export default function UsePassThroughDemo() {
+
+    const CustomTailwind = usePassThrough(
+        Tailwind,
+        {
+            panel: {
+                title: {
+                    className: 'leading-none font-light text-2xl'
+                }
+            }
+        },
+        {
+            mergeSections: true,
+            mergeProps: false
+        }
+    );
+
+    return(
+        <PrimeReactProvider value={{ unstyled: true, pt: CustomTailwind }}>
+            <App />
+        </PrimeReactProvider>
+    )
+}
+    `
+    };
+    const code2 = {
+        basic: `
+const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: true, mergeProps: false }
+);
+
+// Output: 
+// panel.header.className => 'my_panel_header'
+// panel.title.className => Tailwind.panel.title.className`
+    };
+    const code3 = {
+        basic: `
+const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: true, mergeProps: true }
+);
+
+// Output: 
+// panel.header.className => classNames(Tailwind.panel.header.className, 'my_panel_header')
+// panel.title.className => Tailwind.panel.title.className
+`
+    };
+    const code4 = {
+        basic: `
+const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: false, mergeProps: true }
+);
+
+// Output: 
+// panel.header.className => classNames(Tailwind.panel.header.className, 'my_panel_header')
+// panel.title.className => undefined
+`
+    };
+    const code5 = {
+        basic: `
+const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            header: 'my_panel_header'
+        }
+    },
+    { mergeSections: false, mergeProps: false }
+);
+
+// Output: 
+// panel.header.className => 'my_panel_header'
+// panel.title.className => undefined
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of
+                    merging. One of the example use cases is customizing existing unstyled themes like Tailwind.
+                </p>
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+                <p>
+                    The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and
+                    <i>false</i> for <i>mergeProps</i>.
+                </p>
+                <p>
+                    Some CSS libraries, such as <i>Tailwind</i>, require that class names be merged in a non-conflicting manner. In order to support them a <i>classNameMergeFunction</i> may be passed as part of the <i>ptOptions</i> object to manually
+                    define how class names will be merged.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code3} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code4} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code5} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/password/accessibilitydoc.js b/components/doc/password/accessibilitydoc.js
new file mode 100644
index 0000000000..c3e58e1763
--- /dev/null
+++ b/components/doc/password/accessibilitydoc.js
@@ -0,0 +1,54 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="pwd1">Password</label>
+<Password id="pwd1" />
+
+<span id="pwd2">Password</span>
+<Password aria-labelledby="pwd2" />
+
+<Password aria-label="Password"/>
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader is notified about the changes to the strength of the
+                password using a section that has <i>aria-live</i> while typing.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the input.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Hides the strength meter if open.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/password/basicdoc.js b/components/doc/password/basicdoc.js
new file mode 100644
index 0000000000..2dcac90752
--- /dev/null
+++ b/components/doc/password/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<Password value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Password is used as a controlled component with <i>value</i> and <i>onChange</i> properties. Strength meter is enabled by default so <i>feedback</i> needs to be set as false for a basic password input.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/disableddoc.js b/components/doc/password/disableddoc.js
new file mode 100644
index 0000000000..c6c328fbf0
--- /dev/null
+++ b/components/doc/password/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Password disabled placeholder="Disabled" />
+        `,
+        javascript: `
+import React from "react";
+import { Password } from 'primereact/password';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Password disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { Password } from 'primereact/password';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Password disabled placeholder="Disabled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password disabled placeholder="Disabled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/filleddoc.js b/components/doc/password/filleddoc.js
new file mode 100644
index 0000000000..6cf7270e72
--- /dev/null
+++ b/components/doc/password/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password variant="filled" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password variant="filled" value={value} onChange={(e) => setValue(e.target.value)} feedback={false} tabIndex={1} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/floatlabeldoc.js b/components/doc/password/floatlabeldoc.js
new file mode 100644
index 0000000000..f0382da018
--- /dev/null
+++ b/components/doc/password/floatlabeldoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { Password } from '@/components/lib/password/Password';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function FloatLabelDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<FloatLabel>
+    <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
+    <label htmlFor="password">Password</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
+                <label htmlFor="password">Password</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+import { FloatLabel } from 'primereact/floatlabel';
+
+export default function FloatLabelDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel>
+                <Password inputId="password" value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+                <label htmlFor="password">Password</label>
+            </FloatLabel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel>
+                    <Password inputId="password" value={value} onChange={(e) => setValue(e.target.value)} />
+                    <label htmlFor="password">Password</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/importdoc.js b/components/doc/password/importdoc.js
new file mode 100644
index 0000000000..4e8dee2aa6
--- /dev/null
+++ b/components/doc/password/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Password } from 'primereact/password';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/password/invaliddoc.js b/components/doc/password/invaliddoc.js
new file mode 100644
index 0000000000..316a42a42f
--- /dev/null
+++ b/components/doc/password/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<Password invalid />
+        `,
+        javascript: `
+import React from "react";
+import { Password } from 'primereact/password';
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Password invalid />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from "react";
+import { Password } from 'primereact/password';
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Password invalid />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password invalid />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/localedoc.js b/components/doc/password/localedoc.js
new file mode 100644
index 0000000000..7f5c70961c
--- /dev/null
+++ b/components/doc/password/localedoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function LocaleDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<Password value={value} onChange={(e) => setValue(e.target.value)}
+    promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password"/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function LocaleDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e) => setValue(e.target.value)}
+                promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password"/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function LocaleDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} 
+                promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password"/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Labels are translated at component level by <i>promptLabel</i>, <i>weakLabel</i>, <i>mediumLabel</i> and <i>strongLabel</i> properties. In order to apply global translations for all Password components in the application, refer to
+                    the <Link href="http://github.com/locale">Locale API</Link>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password value={value} onChange={(e) => setValue(e.target.value)} promptLabel="Choose a password" weakLabel="Too simple" mediumLabel="Average complexity" strongLabel="Complex password" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/meterdoc.js b/components/doc/password/meterdoc.js
new file mode 100644
index 0000000000..e63cebb76b
--- /dev/null
+++ b/components/doc/password/meterdoc.js
@@ -0,0 +1,54 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+import { useState } from 'react';
+
+export function MeterDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<Password value={value} onChange={(e) => setValue(e.target.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function MeterDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function MeterDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Strength meter is displayed as a popup while a value is being entered.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password value={value} onChange={(e) => setValue(e.target.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/pt/wireframe.js b/components/doc/password/pt/wireframe.js
new file mode 100644
index 0000000000..70b8013005
--- /dev/null
+++ b/components/doc/password/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/password.jpg" alt="password" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/password/styledoc.js b/components/doc/password/styledoc.js
new file mode 100644
index 0000000000..5a1cb8d2f2
--- /dev/null
+++ b/components/doc/password/styledoc.js
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-password</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-input</td>
+                            <td>Input Element</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-panel</td>
+                            <td>Container of password panel</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-meter</td>
+                            <td>Meter element of password strength</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-info</td>
+                            <td>Text to display strength</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/password/templatedoc.js b/components/doc/password/templatedoc.js
new file mode 100644
index 0000000000..a16cf21585
--- /dev/null
+++ b/components/doc/password/templatedoc.js
@@ -0,0 +1,98 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Divider } from '@/components/lib/divider/Divider';
+import { Password } from '@/components/lib/password/Password';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [value, setValue] = useState('');
+    const header = <div className="font-bold mb-3">Pick a password</div>;
+    const footer = (
+        <>
+            <Divider />
+            <p className="mt-2">Suggestions</p>
+            <ul className="pl-2 ml-2 mt-0 line-height-3">
+                <li>At least one lowercase</li>
+                <li>At least one uppercase</li>
+                <li>At least one numeric</li>
+                <li>Minimum 8 characters</li>
+            </ul>
+        </>
+    );
+
+    const code = {
+        basic: `
+<Password value={value} onChange={(e) => setValue(e.target.value)} header={header} footer={footer} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+import { Divider } from 'primereact/divider';
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState('');
+    const header = <div className="font-bold mb-3">Pick a password</div>;
+    const footer = (
+        <>
+            <Divider />
+            <p className="mt-2">Suggestions</p>
+            <ul className="pl-2 ml-2 mt-0 line-height-3">
+                <li>At least one lowercase</li>
+                <li>At least one uppercase</li>
+                <li>At least one numeric</li>
+                <li>Minimum 8 characters</li>
+            </ul>
+        </>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e) => setValue(e.target.value)} header={header} footer={footer} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+import { Divider } from 'primereact/divider';
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState<string>('');
+    const header = <div className="font-bold mb-3">Pick a password</div>;
+    const footer = (
+        <>
+            <Divider />
+            <p className="mt-2">Suggestions</p>
+            <ul className="pl-2 ml-2 mt-0 line-height-3">
+                <li>At least one lowercase</li>
+                <li>At least one uppercase</li>
+                <li>At least one numeric</li>
+                <li>Minimum 8 characters</li>
+            </ul>
+        </>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} header={header} footer={footer} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content is placed inside the popup using <i>header</i> and <i>footer</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password value={value} onChange={(e) => setValue(e.target.value)} header={header} footer={footer} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/password/theming/styleddoc.js b/components/doc/password/theming/styleddoc.js
new file mode 100644
index 0000000000..06b4b78d90
--- /dev/null
+++ b/components/doc/password/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-password</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-input</td>
+                            <td>Input Element</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-panel</td>
+                            <td>Container of password panel</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-meter</td>
+                            <td>Meter element of password strength</td>
+                        </tr>
+                        <tr>
+                            <td>p-password-info</td>
+                            <td>Text to display strength</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/password/theming/tailwinddoc.js b/components/doc/password/theming/tailwinddoc.js
new file mode 100644
index 0000000000..4f1ad7b9e4
--- /dev/null
+++ b/components/doc/password/theming/tailwinddoc.js
@@ -0,0 +1,82 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+const Tailwind = {
+    password: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex relative', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        panel: 'p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md',
+        meter: 'mb-2 bg-gray-300 dark:bg-gray-700 h-3',
+        meterlabel: ({ state, props }) => ({
+            className: classNames(
+                'transition-width duration-1000 ease-in-out h-full',
+                {
+                    'bg-red-500': state.meter?.strength == 'weak',
+                    'bg-orange-500': state.meter?.strength == 'medium',
+                    'bg-green-500': state.meter?.strength == 'strong'
+                },
+                { 'pr-[2.5rem] ': props.toggleMask }
+            )
+        }),
+        showicon: {
+            className: classNames('absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70')
+        },
+        hideicon: {
+            className: classNames('absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70')
+        },
+        inputIcon: {
+            root: 'mt-0'
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-center">
+            <Password value={value} onChange={(e) => setValue(e.target.value)} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/password/togglemaskdoc.js b/components/doc/password/togglemaskdoc.js
new file mode 100644
index 0000000000..0f6199a09c
--- /dev/null
+++ b/components/doc/password/togglemaskdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Password } from '@/components/lib/password/Password';
+import { useState } from 'react';
+
+export function ToggleMaskDoc(props) {
+    const [value, setValue] = useState('');
+
+    const code = {
+        basic: `
+<Password value={value} onChange={(e) => setValue(e.target.value)} toggleMask />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function ToggleMaskDemo() {
+    const [value, setValue] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e) => setValue(e.target.value)} toggleMask />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Password } from 'primereact/password';
+
+export default function ToggleMaskDemo() {
+    const [value, setValue] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <Password value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} toggleMask />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>toggleMask</i> is present, an icon is displayed to show the value as plain text.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Password value={value} onChange={(e) => setValue(e.target.value)} toggleMask />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/picklist/accessibilitydoc.js b/components/doc/picklist/accessibilitydoc.js
new file mode 100644
index 0000000000..691cfb3c53
--- /dev/null
+++ b/components/doc/picklist/accessibilitydoc.js
@@ -0,0 +1,148 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the source listbox and target listbox can be provided with <i>sourceListProps</i> and <i>targetListProps</i> by passing <i>aria-labelledby</i> or <i>aria-label</i> props. The list elements has a <i>listbox</i> role
+                with the <i>aria-multiselectable</i> attribute. Each list item has an <i>option</i> role with <i>aria-selected</i> and <i>aria-disabled</i> as their attributes.
+            </p>
+            <p>
+                Controls buttons are <i>button</i> elements with an <i>aria-label</i> that refers to the <i>aria.moveTop</i>, <i>aria.moveUp</i>, <i>aria.moveDown</i>, <i>aria.moveBottom</i>,<i>aria.moveTo</i>, <i>aria.moveAllTo</i>,{' '}
+                <i>aria.moveFrom</i> and <i>aria.moveAllFrom</i> properties of the <Link href="http://github.com/locale">locale</Link> API by default, alternatively you may use
+                <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i>, <i>moveToButtonProps</i>, <i>moveAllToButtonProps</i>, <i>moveFromButtonProps</i>, <i>moveFromButtonProps</i> and <i>moveAllFromButtonProps</i> to
+                customize the buttons like overriding the default <i>aria-label</i> attributes.
+            </p>
+            <CodeHighlight>
+                {`
+<span id="lb">Options</span>
+<OrderList aria-labelledby="lb" />
+
+<OrderList aria-label="City" />
+`}
+            </CodeHighlight>
+
+            <h3>ListBox Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the first selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the selected state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the selected state of the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next option and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous option and toggles the selection state.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>space</i>
+                            </td>
+                            <td>Selects the items between the most recently selected option and the focused option.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>home</i>
+                            </td>
+                            <td>Selects the focused options and all the options up to the first one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>shift</i> + <i>end</i>
+                            </td>
+                            <td>Selects the focused options and all the options down to the first one.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>control</i> + <i>a</i>
+                            </td>
+                            <td>Selects all options.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Buttons Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Executes button action.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Executes button action.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/picklist/basicdoc.js b/components/doc/picklist/basicdoc.js
new file mode 100644
index 0000000000..2d6b0a1401
--- /dev/null
+++ b/components/doc/picklist/basicdoc.js
@@ -0,0 +1,181 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PickList } from '@/components/lib/picklist/PickList';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function BasicDoc(props) {
+    const [source, setSource] = useState([]);
+    const [target, setTarget] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setSource(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onChange = (event) => {
+        setSource(event.source);
+        setTarget(event.target);
+    };
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm" />
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">${item.price}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+    sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { PickList } from 'primereact/picklist';
+import { ProductService } from './service/ProductService';
+
+export default function BasicDemo() {
+    const [source, setSource] = useState([]);
+    const [target, setTarget] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setSource(data));
+    }, []);
+
+    const onChange = (event) => {
+        setSource(event.source);
+        setTarget(event.target);
+    };
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+                sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { PickList } from 'primereact/picklist';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: 'string',
+    rating: number;
+}
+
+export default function BasicDemo() {
+    const [source, setSource] = useState<Product[]>([]);
+    const [target, setTarget] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setSource(data));
+    }, []);
+
+    const onChange = (event) => {
+        setSource(event.source);
+        setTarget(event.target);
+    };
+
+    const itemTemplate = (item: Product) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+                sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
+        </div>
+    );
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    OrderList is used as a controlled input with <i>source</i>, <i>target</i> and <i>onChange</i> properties. Content of a list item needs to be defined with the <i>itemTemplate</i> property that receives an object in the list as
+                    parameter.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <PickList
+                    dataKey="id"
+                    source={source}
+                    target={target}
+                    onChange={onChange}
+                    itemTemplate={itemTemplate}
+                    breakpoint="1280px"
+                    sourceHeader="Available"
+                    targetHeader="Selected"
+                    sourceStyle={{ height: '24rem' }}
+                    targetStyle={{ height: '24rem' }}
+                />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/picklist/filterdoc.js b/components/doc/picklist/filterdoc.js
new file mode 100644
index 0000000000..a7cbf393a5
--- /dev/null
+++ b/components/doc/picklist/filterdoc.js
@@ -0,0 +1,188 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { PickList } from '@/components/lib/picklist/PickList';
+import { useEffect, useState } from 'react';
+import { ProductService } from '../../../service/ProductService';
+
+export function FilterDoc(props) {
+    const [source, setSource] = useState([]);
+    const [target, setTarget] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setSource(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onChange = (event) => {
+        setSource(event.source);
+        setTarget(event.target);
+    };
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm" />
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">${item.price}</span>
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
+    sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }}
+    sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { PickList } from 'primereact/picklist';
+import { ProductService } from './service/ProductService';
+
+export default function FilterDemo() {
+    const [source, setSource] = useState([]);
+    const [target, setTarget] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setSource(data));
+    }, []);
+
+    const onChange = (event) => {
+        setSource(event.source);
+        setTarget(event.target);
+    };
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
+                sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }}
+                sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { PickList } from 'primereact/picklist';
+import { ProductService } from './service/ProductService';
+
+interface Product {
+    id: string;
+    code: string;
+    name: string;
+    description: string;
+    image: string;
+    price: number;
+    category: string;
+    quantity: number;
+    inventoryStatus: 'string',
+    rating: number;
+}
+
+export default function FilterDemo() {
+    const [source, setSource] = useState<Product[]>([]);
+    const [target, setTarget] = useState<Product[]>([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setSource(data));
+    }, []);
+
+    const onChange = (event) => {
+        setSource(event.source);
+        setTarget(event.target);
+    };
+
+    const itemTemplate = (item: Product) => {
+        return (
+            <div className="flex flex-wrap p-2 align-items-center gap-3">
+                <img className="w-4rem shadow-2 flex-shrink-0 border-round" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-column gap-2">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex align-items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} filter filterBy="name" breakpoint="1280px"
+                sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }}
+                sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name" />
+        </div>
+    );
+}
+        `,
+        data: `
+/* ProductService */
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: '/bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items are filtered using an input field by enabling the <i>filter</i> property. Filter value is checked against the property of an object configured with the <i>filterBy</i> property and the filtering match mode with{' '}
+                    <i>filterMatchMode</i> e.g. <i>contains</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <PickList
+                    dataKey="id"
+                    source={source}
+                    target={target}
+                    onChange={onChange}
+                    itemTemplate={itemTemplate}
+                    sourceHeader="Available"
+                    targetHeader="Selected"
+                    sourceStyle={{ height: '24rem' }}
+                    targetStyle={{ height: '24rem' }}
+                    breakpoint="1280px"
+                    filter
+                    filterBy="name"
+                    sourceFilterPlaceholder="Search by name"
+                    targetFilterPlaceholder="Search by name"
+                />
+            </div>
+            <DocSectionCode code={code} service={['ProductService']} />
+        </>
+    );
+}
diff --git a/components/doc/picklist/importdoc.js b/components/doc/picklist/importdoc.js
new file mode 100644
index 0000000000..e98d714fa4
--- /dev/null
+++ b/components/doc/picklist/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { PickList } from 'primereact/picklist';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/picklist/pt/wireframe.js b/components/doc/picklist/pt/wireframe.js
new file mode 100644
index 0000000000..6801036b1c
--- /dev/null
+++ b/components/doc/picklist/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/picklist.jpg" alt="picklist" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/picklist/styledoc.js b/components/doc/picklist/styledoc.js
new file mode 100644
index 0000000000..e920ee9c6b
--- /dev/null
+++ b/components/doc/picklist/styledoc.js
@@ -0,0 +1,55 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-picklist</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-source-controls</td>
+                            <td>Container of source list buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-target-controls</td>
+                            <td>Container of target list buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-buttons</td>
+                            <td>Container of buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-listwrapper</td>
+                            <td>Parent of a list element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/picklist/theming/styleddoc.js b/components/doc/picklist/theming/styleddoc.js
new file mode 100644
index 0000000000..ab423ad0f2
--- /dev/null
+++ b/components/doc/picklist/theming/styleddoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-picklist</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-source-controls</td>
+                            <td>Container of source list buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-target-controls</td>
+                            <td>Container of target list buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-buttons</td>
+                            <td>Container of buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-listwrapper</td>
+                            <td>Parent of a list element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-picklist-item</td>
+                            <td>An item in the list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/picklist/theming/tailwinddoc.js b/components/doc/picklist/theming/tailwinddoc.js
new file mode 100644
index 0000000000..e921f478c3
--- /dev/null
+++ b/components/doc/picklist/theming/tailwinddoc.js
@@ -0,0 +1,224 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {    
+    picklist: {
+        root: 'flex flex-col xl:flex-row',
+        controls: 'flex flex-row xl:flex-col justify-center p-5',
+        moveUpButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveTopButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveDownButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveBottomButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        listWrapper: 'grow shrink basis-2/4',
+        header: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            )
+        },
+        list: {
+            className: classNames(
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            )
+        },
+        item: ({ context }) => ({
+            className: classNames('relative cursor-pointer overflow-hidden', 'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80', 'transition duration-200', {
+                'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.selected,
+                'text-gray-600 dark:bg-blue-900/40': !context.selected
+            })
+        }),
+        buttons: 'flex flex-row xl:flex-col justify-center p-5',
+        movetotargetbutton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        movealltotargetbutton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        movetosourcebutton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        movealltosourcebutton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        targetcontrols: 'flex flex-col justify-center p-5',
+        targetwrapper: 'grow shrink basis-2/4',
+        targetheader: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            )
+        },
+        targetlist: {
+            className: classNames(
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            )
+        },
+        transition: {
+            timeout: 0,
+            classNames: {
+                enter: '!transition-none',
+                enterActive: '!transition-none',
+                exit: '!transition-none',
+                exitActive: '!transition-none'
+            }
+        }
+    },
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { PickList } from 'primereact/picklist';
+import { ProductService } from './service/ProductService';
+
+export default function UnstyledDemo() {
+    const [source, setSource] = useState([]);
+    const [target, setTarget] = useState([]);
+
+    useEffect(() => {
+        ProductService.getProductsSmall().then((data) => setSource(data));
+    }, []);
+
+    const onChange = (event) => {
+        setSource(event.source);
+        setTarget(event.target);
+    };
+
+    const itemTemplate = (item) => {
+        return (
+            <div className="flex flex-wrap p-2 items-center gap-3">
+                <img className="w-16 shadow-md shrink-0 rounded" src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} />
+                <div className="flex-1 flex flex-col gap-2">
+                    <span className="font-bold">{item.name}</span>
+                    <div className="flex items-center gap-2">
+                        <i className="pi pi-tag text-sm"></i>
+                        <span>{item.category}</span>
+                    </div>
+                </div>
+                <span className="font-bold text-900">\${item.price}</span>
+            </div>
+        );
+    };
+
+    return (
+        <div className="card">
+            <PickList dataKey="id" source={source} target={target} onChange={onChange} itemTemplate={itemTemplate} breakpoint="1280px"
+                sourceHeader="Available" targetHeader="Selected" sourceStyle={{ height: '24rem' }} targetStyle={{ height: '24rem' }} />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['ProductService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/progressbar/accessibilitydoc.js b/components/doc/progressbar/accessibilitydoc.js
new file mode 100644
index 0000000000..176904e8b1
--- /dev/null
+++ b/components/doc/progressbar/accessibilitydoc.js
@@ -0,0 +1,25 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using
+                <i>aria-labelledby</i> and <i>aria-label</i> props.
+            </p>
+            <CodeHighlight>
+                {`
+<span id="label_status">Status</span>
+<ProgressBar aria-labelledby="label_status" />
+
+<ProgressBar aria-label="Status" />
+`}
+            </CodeHighlight>
+            <h3>Keyboard Support</h3>
+            <p>Not applicable.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/progressbar/basicdoc.js b/components/doc/progressbar/basicdoc.js
new file mode 100644
index 0000000000..d968fecb56
--- /dev/null
+++ b/components/doc/progressbar/basicdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<ProgressBar value={50}></ProgressBar>
+        `,
+        javascript: `
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <ProgressBar value={50}></ProgressBar>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <ProgressBar value={50}></ProgressBar>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ProgressBar is used with the <i>value</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <ProgressBar value={50} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/progressbar/dynamicdoc.js b/components/doc/progressbar/dynamicdoc.js
new file mode 100644
index 0000000000..191745b54e
--- /dev/null
+++ b/components/doc/progressbar/dynamicdoc.js
@@ -0,0 +1,135 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useEffect, useRef, useState } from 'react';
+
+export function DynamicDoc(props) {
+    const [value, setValue] = useState(0);
+    const toast = useRef(null);
+    const interval = useRef(null);
+
+    useEffect(() => {
+        let _val = value;
+
+        interval.current = setInterval(() => {
+            _val = _val + (Math.floor(Math.random() * 10) + 1);
+
+            if (_val >= 100) {
+                _val = 100;
+                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
+                clearInterval(interval.current);
+            }
+
+            setValue(_val);
+        }, 2000);
+
+        return () => {
+            if (interval.current) {
+                clearInterval(interval.current);
+                interval.current = null;
+            }
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<ProgressBar value={value}></ProgressBar>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+import { Toast } from 'primereact/toast';
+
+export default function DynamicDemo() {
+    const [value, setValue] = useState(0);
+    const toast = useRef(null);
+    const interval = useRef(null);
+
+    useEffect(() => {
+        let _val = value;
+
+        interval.current = setInterval(() => {
+            _val += Math.floor(Math.random() * 10) + 1;
+
+            if (_val >= 100) {
+                _val = 100;
+                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
+                clearInterval(interval.current);
+            }
+
+            setValue(_val);
+        }, 2000);
+
+        return () => {
+            if (interval.current) {
+                clearInterval(interval.current);
+                interval.current = null;
+            }
+        };
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast}></Toast>
+            <ProgressBar value={value}></ProgressBar>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+import { Toast } from 'primereact/toast';
+
+export default function DynamicDemo() {
+    const [value, setValue] = useState<number>(0);
+    const toast = useRef<Toast | null>(null);
+    const interval = useRef<number | null>(null);
+
+    useEffect(() => {
+        let _val = value;
+
+        interval.current = setInterval(() => {
+            _val += Math.floor(Math.random() * 10) + 1;
+
+            if (_val >= 100) {
+                _val = 100;
+                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
+                clearInterval(interval.current);
+            }
+
+            setValue(_val);
+        }, 2000);
+
+        return () => {
+            if (interval.current) {
+                clearInterval(interval.current);
+                interval.current = null;
+            }
+        };
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast}></Toast>
+            <ProgressBar value={value}></ProgressBar>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Value is reactive so updating it dynamically changes the bar as well.</p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast} />
+                <ProgressBar value={value} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/progressbar/importdoc.js b/components/doc/progressbar/importdoc.js
new file mode 100644
index 0000000000..7986bbcb51
--- /dev/null
+++ b/components/doc/progressbar/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ProgressBar } from 'primereact/progressbar';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/progressbar/indeterminatedoc.js b/components/doc/progressbar/indeterminatedoc.js
new file mode 100644
index 0000000000..f1bd827de3
--- /dev/null
+++ b/components/doc/progressbar/indeterminatedoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+
+export function IndeterminateDoc(props) {
+    const code = {
+        basic: `
+<ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
+        `,
+        javascript: `
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function IndeterminateDemo() {
+    return (
+        <div className="card">
+            <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function IndeterminateDemo() {
+    return (
+        <div className="card">
+            <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    For progresses with no value to track, set the <i>mode</i> property to <i>indeterminate</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <ProgressBar mode="indeterminate" style={{ height: '6px' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/progressbar/pt/wireframe.js b/components/doc/progressbar/pt/wireframe.js
new file mode 100644
index 0000000000..28f60bda9b
--- /dev/null
+++ b/components/doc/progressbar/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/progressbar.jpg" alt="progressbar" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/progressbar/styledoc.js b/components/doc/progressbar/styledoc.js
new file mode 100644
index 0000000000..83898e2c32
--- /dev/null
+++ b/components/doc/progressbar/styledoc.js
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-progressbar</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-determinate</td>
+                            <td>Container element of a determinate progressbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-indeterminate</td>
+                            <td>Container element of an indeterminate progressbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-value</td>
+                            <td>Element whose width changes according to value.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-label</td>
+                            <td>Label element that displays the current value.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/progressbar/templatedoc.js b/components/doc/progressbar/templatedoc.js
new file mode 100644
index 0000000000..162f6ad508
--- /dev/null
+++ b/components/doc/progressbar/templatedoc.js
@@ -0,0 +1,74 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+import React from 'react';
+
+export function TemplateDoc(props) {
+    const valueTemplate = (value) => {
+        return (
+            <React.Fragment>
+                {value}/<b>100</b>
+            </React.Fragment>
+        );
+    };
+
+    const code = {
+        basic: `
+<ProgressBar value={40} displayValueTemplate={valueTemplate}></ProgressBar>
+        `,
+        javascript: `
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function TemplateDemo() {
+    const valueTemplate = (value) => {
+        return (
+            <React.Fragment>
+                {value}/<b>100</b>
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <div className="card">
+            <ProgressBar value={40} displayValueTemplate={valueTemplate}></ProgressBar>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function TemplateDemo() {
+    const valueTemplate = (value) => {
+        return (
+            <React.Fragment>
+                {value}/<b>100</b>
+            </React.Fragment>
+        );
+    };
+
+    return (
+        <div className="card">
+            <ProgressBar value={40} displayValueTemplate={valueTemplate}></ProgressBar>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content inside the ProgressBar is defined with the <i>displayValueTemplate</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <ProgressBar value={40} displayValueTemplate={valueTemplate} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/progressbar/theming/styleddoc.js b/components/doc/progressbar/theming/styleddoc.js
new file mode 100644
index 0000000000..4880b489f3
--- /dev/null
+++ b/components/doc/progressbar/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-progressbar</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-determinate</td>
+                            <td>Container element of a determinate progressbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-indeterminate</td>
+                            <td>Container element of an indeterminate progressbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-value</td>
+                            <td>Element whose width changes according to value.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progressbar-label</td>
+                            <td>Label element that displays the current value.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/progressbar/theming/tailwinddoc.js b/components/doc/progressbar/theming/tailwinddoc.js
new file mode 100644
index 0000000000..f274f4be5b
--- /dev/null
+++ b/components/doc/progressbar/theming/tailwinddoc.js
@@ -0,0 +1,116 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    global: {
+        css: \`
+        .progressbar-value-animate::after {
+            will-change: left, right;
+            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        }
+        .progressbar-value-animate::before {
+            will-change: left, right;
+            animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        }
+        @keyframes p-progressbar-indeterminate-anim {
+            0% {
+                left: -35%;
+                right: 100%;
+            }
+            60% {
+                left: 100%;
+                right: -90%;
+            }
+            100% {
+                left: 100%;
+                right: -90%;
+            }
+        }
+    \`
+    },          
+    progressbar: {
+        root: {
+            className: classNames('overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800')
+        },
+        value: ({ props }) => ({
+            className: classNames('border-0 m-0 bg-blue-500', {
+                'transition-width duration-1000 ease-in-out absolute items-center border-0 flex h-full justify-center overflow-hidden w-0': props.mode !== 'indeterminate',
+                'progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
+            })
+        }),
+        label: {
+            className: classNames('inline-flex', 'text-white leading-6')
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { ProgressBar } from 'primereact/progressbar';
+import { Toast } from 'primereact/toast';
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState(0);
+    const toast = useRef(null);
+    const interval = useRef(null);
+
+    useEffect(() => {
+        let _val = value;
+
+        interval.current = setInterval(() => {
+            _val += Math.floor(Math.random() * 10) + 1;
+
+            if (_val >= 100) {
+                _val = 100;
+                toast.current.show({ severity: 'info', summary: 'Success', detail: 'Process Completed' });
+                clearInterval(interval.current);
+            }
+
+            setValue(_val);
+        }, 2000);
+
+        return () => {
+            if (interval.current) {
+                clearInterval(interval.current);
+                interval.current = null;
+            }
+        };
+    }, []);
+
+    return (
+        <div>
+            <div className="card">
+                <ProgressBar value={50}></ProgressBar>
+            </div>
+
+            <div className="card">
+                <Toast ref={toast}></Toast>
+                <ProgressBar value={value}></ProgressBar>
+            </div>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/progressspinner/accessibilitydoc.js b/components/doc/progressspinner/accessibilitydoc.js
new file mode 100644
index 0000000000..f1ef461e0d
--- /dev/null
+++ b/components/doc/progressspinner/accessibilitydoc.js
@@ -0,0 +1,21 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ProgressSpinner components uses <i>progressbar</i> role. Value to describe the component can be defined using <i>aria-labelledby</i> and <i>aria-label</i> props.
+            </p>
+            <CodeHighlight>
+                {`
+<ProgressSpinner aria-label="Loading" />
+`}
+            </CodeHighlight>
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/progressspinner/basicdoc.js b/components/doc/progressspinner/basicdoc.js
new file mode 100644
index 0000000000..9fa8b77314
--- /dev/null
+++ b/components/doc/progressspinner/basicdoc.js
@@ -0,0 +1,47 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ProgressSpinner } from '@/components/lib/progressspinner/ProgressSpinner';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<ProgressSpinner />
+        `,
+        javascript: `
+import React from 'react';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <ProgressSpinner />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <ProgressSpinner />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>An infinite spin animation is displayed by default.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ProgressSpinner />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/progressspinner/customdoc.js b/components/doc/progressspinner/customdoc.js
new file mode 100644
index 0000000000..9904f26028
--- /dev/null
+++ b/components/doc/progressspinner/customdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ProgressSpinner } from '@/components/lib/progressspinner/ProgressSpinner';
+
+export function CustomDoc(props) {
+    const code = {
+        basic: `
+<ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" />
+        `,
+        javascript: `
+import React from 'react';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+export default function CustomDemo() {
+    return (
+        <div className="card">
+            <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+export default function CustomDemo() {
+    return (
+        <div className="card">
+            <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ProgressSpinner can be customized with styling property like <i>style</i>, <i>strokeWidth</i> and <i>fill</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ProgressSpinner style={{ width: '50px', height: '50px' }} strokeWidth="8" fill="var(--surface-ground)" animationDuration=".5s" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/progressspinner/importdoc.js b/components/doc/progressspinner/importdoc.js
new file mode 100644
index 0000000000..4b73f36378
--- /dev/null
+++ b/components/doc/progressspinner/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ProgressSpinner } from 'primereact/progressspinner';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/progressspinner/pt/wireframe.js b/components/doc/progressspinner/pt/wireframe.js
new file mode 100644
index 0000000000..6950d1f8c9
--- /dev/null
+++ b/components/doc/progressspinner/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/progressspinner.jpg" alt="progressspinner" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/progressspinner/styledoc.js b/components/doc/progressspinner/styledoc.js
new file mode 100644
index 0000000000..c6d7fbfc84
--- /dev/null
+++ b/components/doc/progressspinner/styledoc.js
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-progress-spinner</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progress-circle</td>
+                            <td>SVG element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progress-path</td>
+                            <td>Circle element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/progressspinner/theming/styleddoc.js b/components/doc/progressspinner/theming/styleddoc.js
new file mode 100644
index 0000000000..c6a16889ba
--- /dev/null
+++ b/components/doc/progressspinner/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-progress-spinner</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progress-circle</td>
+                            <td>SVG element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-progress-path</td>
+                            <td>Circle element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/progressspinner/theming/tailwinddoc.js b/components/doc/progressspinner/theming/tailwinddoc.js
new file mode 100644
index 0000000000..5517df7637
--- /dev/null
+++ b/components/doc/progressspinner/theming/tailwinddoc.js
@@ -0,0 +1,88 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    global: {
+        css: \`
+        .progress-spinner-circle {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: 0;
+            animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+            stroke-linecap: round;
+        }
+
+        @keyframes p-progress-spinner-dash{
+            0% {
+                stroke-dasharray: 1, 200;
+                stroke-dashoffset: 0;
+            }
+            
+            50% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -35px;
+            }
+            100% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -124px;
+            }
+        }
+        @keyframes p-progress-spinner-color {
+            100%, 0% {
+                stroke: #ff5757;
+            }
+            40% {
+                stroke: #696cff;
+            }
+            66% {
+                stroke: #1ea97c;
+            }
+            80%, 90% {
+                stroke: #cc8925;
+            }
+        }
+    \`
+    },        
+    progressspinner: {
+        root: {
+            className: classNames('relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full')
+        },
+        spinner: 'absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin',
+        circle: 'text-red-500 progress-spinner-circle'
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { ProgressSpinner } from 'primereact/progressspinner';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <ProgressSpinner />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/accessibilitydoc.js b/components/doc/radiobutton/accessibilitydoc.js
new file mode 100644
index 0000000000..4086464dd9
--- /dev/null
+++ b/components/doc/radiobutton/accessibilitydoc.js
@@ -0,0 +1,72 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<label htmlFor="rb1">One</label>
+<RadioButton inputId="rb1" />
+
+<span id="rb2">Two</span>
+<RadioButton aria-labelledby="rb2" />
+
+<RadioButton aria-label="Three" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using{' '}
+                <i>aria-labelledby</i>, <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">left arrow</i>
+                                    <i>up arrow</i>
+                                </span>
+                            </td>
+                            <td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">right arrow</i>
+                                    <i>down arrow</i>
+                                </span>
+                            </td>
+                            <td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>If the focused radio button is unchecked, changes the state to checked.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/radiobutton/disableddoc.js b/components/doc/radiobutton/disableddoc.js
new file mode 100644
index 0000000000..3e2e5b8741
--- /dev/null
+++ b/components/doc/radiobutton/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<RadioButton checked disabled></RadioButton>
+        `,
+        javascript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <RadioButton checked disabled></RadioButton>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <RadioButton checked disabled></RadioButton>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <RadioButton checked disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/dynamicdoc.js b/components/doc/radiobutton/dynamicdoc.js
new file mode 100644
index 0000000000..983c9a1f53
--- /dev/null
+++ b/components/doc/radiobutton/dynamicdoc.js
@@ -0,0 +1,113 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { useState } from 'react';
+
+export function DynamicDoc(props) {
+    const categories = [
+        { name: 'Accounting', key: 'A' },
+        { name: 'Marketing', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+    const [selectedCategory, setSelectedCategory] = useState(categories[1]);
+
+    const code = {
+        basic: `
+{categories.map((category) => {
+    return (
+        <div key={category.key} className="flex align-items-center">
+            <RadioButton inputId={category.key} name="category" value={category} onChange={(e) => setSelectedCategory(e.value)} checked={selectedCategory.key === category.key} />
+            <label htmlFor={category.key} className="ml-2">{category.name}</label>
+        </div>
+    );
+})}
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { RadioButton } from "primereact/radiobutton";
+
+export default function DynamicDemo() {
+    const categories = [
+        { name: 'Accounting', key: 'A' },
+        { name: 'Marketing', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+    const [selectedCategory, setSelectedCategory] = useState(categories[1]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column gap-3">
+                {categories.map((category) => {
+                    return (
+                        <div key={category.key} className="flex align-items-center">
+                            <RadioButton inputId={category.key} name="category" value={category} onChange={(e) => setSelectedCategory(e.value)} checked={selectedCategory.key === category.key} />
+                            <label htmlFor={category.key} className="ml-2">{category.name}</label>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { RadioButton, RadioButtonChangeEvent } from "primereact/radiobutton";
+
+interface Category {
+    name: string;
+    key: string;
+}
+
+export default function DynamicDemo() {
+    const categories = [
+        { name: 'Accounting', key: 'A' },
+        { name: 'Marketing', key: 'M' },
+        { name: 'Production', key: 'P' },
+        { name: 'Research', key: 'R' }
+    ];
+    const [selectedCategory, setSelectedCategory] = useState<Category>(categories[1]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column gap-3">
+                {categories.map((category) => {
+                    return (
+                        <div key={category.key} className="flex align-items-center">
+                            <RadioButton inputId={category.key} name="category" value={category} onChange={(e: RadioButtonChangeEvent) => setSelectedCategory(e.value)} checked={selectedCategory.key === category.key} />
+                            <label htmlFor={category.key} className="ml-2">{category.name}</label>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>RadioButtons can be generated using a list of values.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="flex flex-column gap-3">
+                    {categories.map((category) => {
+                        return (
+                            <div key={category.key} className="flex align-items-center">
+                                <RadioButton inputId={category.key} name="category" value={category} onChange={(e) => setSelectedCategory(e.value)} checked={selectedCategory.key === category.key} />
+                                <label htmlFor={category.key} className="ml-2">
+                                    {category.name}
+                                </label>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/filleddoc.js b/components/doc/radiobutton/filleddoc.js
new file mode 100644
index 0000000000..8d5e8fbc01
--- /dev/null
+++ b/components/doc/radiobutton/filleddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+
+export function FilledDoc(props) {
+    const code = {
+        basic: `
+<RadioButton variant="filled" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function FilledDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <RadioButton variant="filled" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function FilledDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <RadioButton variant="filled" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center">
+                <RadioButton variant="filled" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/groupdoc.js b/components/doc/radiobutton/groupdoc.js
new file mode 100644
index 0000000000..b7fc1bfb6b
--- /dev/null
+++ b/components/doc/radiobutton/groupdoc.js
@@ -0,0 +1,132 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { useState } from 'react';
+
+export function GroupDoc(props) {
+    const [ingredient, setIngredient] = useState('');
+
+    const code = {
+        basic: `
+<div className="flex flex-wrap gap-3">
+    <div className="flex align-items-center">
+        <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
+        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+    </div>
+    <div className="flex align-items-center">
+        <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
+        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+    </div>
+    <div className="flex align-items-center">
+        <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
+        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+    </div>
+    <div className="flex align-items-center">
+        <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
+        <label htmlFor="ingredient4" className="ml-2">Onion</label>
+    </div>
+</div>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { RadioButton } from "primereact/radiobutton";
+
+export default function GroupDemo() {
+    const [ingredient, setIngredient] = useState('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-wrap gap-3">
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
+                    <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+                </div>
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
+                    <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+                </div>
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
+                    <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+                </div>
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
+                    <label htmlFor="ingredient4" className="ml-2">Onion</label>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { RadioButton, RadioButtonChangeEvent } from "primereact/radiobutton";
+
+export default function GroupDemo() {
+    const [ingredient, setIngredient] = useState<string>('');
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-wrap gap-3">
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e: RadioButtonChangeEvent) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
+                    <label htmlFor="ingredient1" className="ml-2">Cheese</label>
+                </div>
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e: RadioButtonChangeEvent) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
+                    <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
+                </div>
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e: RadioButtonChangeEvent) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
+                    <label htmlFor="ingredient3" className="ml-2">Pepper</label>
+                </div>
+                <div className="flex align-items-center">
+                    <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e: RadioButtonChangeEvent) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
+                    <label htmlFor="ingredient4" className="ml-2">Onion</label>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    RadioButton is used as a controlled input with <i>value</i>, <i>checked</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="flex flex-wrap gap-3">
+                    <div className="flex align-items-center">
+                        <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
+                        <label htmlFor="ingredient1" className="ml-2">
+                            Cheese
+                        </label>
+                    </div>
+                    <div className="flex align-items-center">
+                        <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
+                        <label htmlFor="ingredient2" className="ml-2">
+                            Mushroom
+                        </label>
+                    </div>
+                    <div className="flex align-items-center">
+                        <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
+                        <label htmlFor="ingredient3" className="ml-2">
+                            Pepper
+                        </label>
+                    </div>
+                    <div className="flex align-items-center">
+                        <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
+                        <label htmlFor="ingredient4" className="ml-2">
+                            Onion
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/importdoc.js b/components/doc/radiobutton/importdoc.js
new file mode 100644
index 0000000000..0c243a87a2
--- /dev/null
+++ b/components/doc/radiobutton/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { RadioButton } from 'primereact/radiobutton';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/invaliddoc.js b/components/doc/radiobutton/invaliddoc.js
new file mode 100644
index 0000000000..d24f4397f6
--- /dev/null
+++ b/components/doc/radiobutton/invaliddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+
+export function InvalidDoc(props) {
+    const code = {
+        basic: `
+<RadioButton invalid/>
+        `,
+        javascript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <RadioButton invalid/>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { RadioButton } from "primereact/radiobutton";
+
+export default function InvalidDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <RadioButton invalid/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center">
+                <RadioButton invalid />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/pt/wireframe.js b/components/doc/radiobutton/pt/wireframe.js
new file mode 100644
index 0000000000..2fab726105
--- /dev/null
+++ b/components/doc/radiobutton/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/radiobutton.jpg" alt="radiobutton" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/radiobutton/styledoc.js b/components/doc/radiobutton/styledoc.js
new file mode 100644
index 0000000000..eeb55e4173
--- /dev/null
+++ b/components/doc/radiobutton/styledoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-radiobutton</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-radiobutton-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-radiobutton-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-radiobutton-label</td>
+                            <td>Label element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/theming/styleddoc.js b/components/doc/radiobutton/theming/styleddoc.js
new file mode 100644
index 0000000000..3591e9286b
--- /dev/null
+++ b/components/doc/radiobutton/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-radiobutton</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-radiobutton-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-radiobutton-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-radiobutton-label</td>
+                            <td>Label element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/radiobutton/theming/tailwinddoc.js b/components/doc/radiobutton/theming/tailwinddoc.js
new file mode 100644
index 0000000000..1649789142
--- /dev/null
+++ b/components/doc/radiobutton/theming/tailwinddoc.js
@@ -0,0 +1,90 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    radiobutton: {
+        root: {
+            className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6')
+        },
+        input: {
+              className: classNames(
+                    'absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer'
+              ),
+        },
+        box: ({ props }) => ({
+            className: classNames(
+                'flex justify-center items-center',
+                'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': !props.checked,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        icon: ({ props }) => ({
+            className: classNames('transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', {
+                'backface-hidden scale-10 invisible': !props.checked,
+                'transform scale-100 visible': props.checked
+            })
+        })
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { RadioButton } from "primereact/radiobutton";
+
+export default function UnstyledDemo() {
+    const [ingredient, setIngredient] = useState('');
+
+    return (
+        <div className="card flex justify-center">
+            <div className="flex flex-wrap gap-3">
+                <div className="flex items-center">
+                    <RadioButton inputId="ingredient1" name="pizza" value="Cheese" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Cheese'} />
+                    <label htmlFor="ingredient1" className="text-gray-700 dark:text-white/80 ml-2">Cheese</label>
+                </div>
+                <div className="flex items-center">
+                    <RadioButton inputId="ingredient2" name="pizza" value="Mushroom" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Mushroom'} />
+                    <label htmlFor="ingredient2" className="text-gray-700 dark:text-white/80 ml-2">Mushroom</label>
+                </div>
+                <div className="flex items-center">
+                    <RadioButton inputId="ingredient3" name="pizza" value="Pepper" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Pepper'} />
+                    <label htmlFor="ingredient3" className="text-gray-700 dark:text-white/80 ml-2">Pepper</label>
+                </div>
+                <div className="flex items-center">
+                    <RadioButton inputId="ingredient4" name="pizza" value="Onion" onChange={(e) => setIngredient(e.value)} checked={ingredient === 'Onion'} />
+                    <label htmlFor="ingredient4" className="text-gray-700 dark:text-white/80 ml-2">Onion</label>
+                </div>
+            </div>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/rating/accessibilitydoc.js b/components/doc/rating/accessibilitydoc.js
new file mode 100644
index 0000000000..699ed637a4
--- /dev/null
+++ b/components/doc/rating/accessibilitydoc.js
@@ -0,0 +1,60 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <Link href="http://github.com/locale">locale</Link> API via <i>star</i> and <i>stars</i> of the <i>aria</i>{' '}
+                property.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">left arrow</i>
+                                    <i>up arrow</i>
+                                </span>
+                            </td>
+                            <td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">right arrow</i>
+                                    <i>down arrow</i>
+                                </span>
+                            </td>
+                            <td>Moves focus to the next star, if there is none then first star receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>If the focused star does not represent the value, changes the value to the star value.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/rating/basicdoc.js b/components/doc/rating/basicdoc.js
new file mode 100644
index 0000000000..b45968461b
--- /dev/null
+++ b/components/doc/rating/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Rating } from '@/components/lib/rating/Rating';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<Rating value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Rating } from "primereact/rating";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Rating, RatingChangeEvent } from "primereact/rating";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e : RatingChangeEvent) => setValue(e.value)} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Rating is used a controlled input component with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Rating value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/rating/disableddoc.js b/components/doc/rating/disableddoc.js
new file mode 100644
index 0000000000..048a8da41d
--- /dev/null
+++ b/components/doc/rating/disableddoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Rating } from '@/components/lib/rating/Rating';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Rating value={5} disabled cancel={false} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Rating } from "primereact/rating";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={5} disabled cancel={false} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Rating } from "primereact/rating";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={5} disabled cancel={false} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Rating value={5} disabled cancel={false} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/rating/importdoc.js b/components/doc/rating/importdoc.js
new file mode 100644
index 0000000000..eb35bea5bd
--- /dev/null
+++ b/components/doc/rating/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Rating } from 'primereact/rating';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/rating/numberofstarsdoc.js b/components/doc/rating/numberofstarsdoc.js
new file mode 100644
index 0000000000..26e4e58062
--- /dev/null
+++ b/components/doc/rating/numberofstarsdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Rating } from '@/components/lib/rating/Rating';
+import { useState } from 'react';
+
+export function NumberOfStarsDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<Rating value={value} onChange={(e) => setValue(e.value)} stars={10} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Rating } from "primereact/rating";
+
+export default function NumberOfStarsDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e) => setValue(e.value)} stars={10} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Rating, RatingChangeEvent } from "primereact/rating";
+
+export default function NumberOfStarsDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e : RatingChangeEvent) => setValue(e.value)} stars={10} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Number of stars to display is defined with <i>stars</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Rating value={value} onChange={(e) => setValue(e.value)} stars={10} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/rating/pt/wireframe.js b/components/doc/rating/pt/wireframe.js
new file mode 100644
index 0000000000..9b2cd7eb02
--- /dev/null
+++ b/components/doc/rating/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/rating.jpg" alt="rating" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/rating/readonlydoc.js b/components/doc/rating/readonlydoc.js
new file mode 100644
index 0000000000..f755642de1
--- /dev/null
+++ b/components/doc/rating/readonlydoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Rating } from '@/components/lib/rating/Rating';
+
+export function ReadOnlyDoc(props) {
+    const code = {
+        basic: `
+<Rating value={5} readOnly cancel={false} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Rating } from "primereact/rating";
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={5} readOnly cancel={false} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Rating } from "primereact/rating";
+
+export default function ReadOnlyDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={5} readOnly cancel={false} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>readOnly</i> present, value cannot be edited.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Rating value={5} readOnly cancel={false} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/rating/styledoc.js b/components/doc/rating/styledoc.js
new file mode 100644
index 0000000000..960c4e6a04
--- /dev/null
+++ b/components/doc/rating/styledoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-rating</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-rating-item</td>
+                            <td>Each item element</td>
+                        </tr>
+                        <tr>
+                            <td>p-rating-item-active</td>
+                            <td>Selected item elements.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rating-cancel-item</td>
+                            <td>Cancel item element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/rating/templatedoc.js b/components/doc/rating/templatedoc.js
new file mode 100644
index 0000000000..97be1c2fd9
--- /dev/null
+++ b/components/doc/rating/templatedoc.js
@@ -0,0 +1,74 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Rating } from '@/components/lib/rating/Rating';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<Rating value={value} onChange={(e) => setValue(e.value)}
+    cancelIcon={<img src="http://github.com/images/rating/cancel.png" alt="custom-cancel-image" width="25px" height="25px" />}
+    onIcon={<img src="http://github.com/images/rating/custom-icon-active.png" alt="custom-image-active" width="25px" height="25px" />}
+    offIcon={<img src="http://github.com/images/rating/custom-icon.png" alt="custom-image" width="25px" height="25px" />}
+/>
+`,
+        javascript: `
+import React, { useState } from "react";
+import { Rating } from "primereact/rating";
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e) => setValue(e.value)}
+                cancelIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/cancel.png" alt="custom-cancel-image" width="25px" height="25px" />}
+                onIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/custom-icon-active.png" alt="custom-image-active" width="25px" height="25px" />}
+                offIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/custom-icon.png" alt="custom-image" width="25px" height="25px" />}
+            />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Rating, RatingChangeEvent} from "primereact/rating";
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e: RatingChangeEvent) => setValue(e.value)}
+                cancelIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/cancel.png" alt="custom-cancel-image" width="25px" height="25px" />}
+                onIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/custom-icon-active.png" alt="custom-image-active" width="25px" height="25px" />}
+                offIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/custom-icon.png" alt="custom-image" width="25px" height="25px" />}
+            />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom icons are used to override the default icons with <i>onIcon</i>, <i>offIcon</i> and <i>cancelIcon</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Rating
+                    value={value}
+                    onChange={(e) => setValue(e.value)}
+                    cancelIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/cancel.png" alt="custom-cancel-image" width="25px" height="25px" />}
+                    onIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/custom-icon-active.png" alt="custom-image-active" width="25px" height="25px" />}
+                    offIcon={<img src="https://primefaces.org/cdn/primereact/images/rating/custom-icon.png" alt="custom-image" width="25px" height="25px" />}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/rating/theming/styleddoc.js b/components/doc/rating/theming/styleddoc.js
new file mode 100644
index 0000000000..1cfe8fc7e6
--- /dev/null
+++ b/components/doc/rating/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-rating</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-rating-item</td>
+                            <td>Each item element</td>
+                        </tr>
+                        <tr>
+                            <td>p-rating-item-active</td>
+                            <td>Selected item elements.</td>
+                        </tr>
+                        <tr>
+                            <td>p-rating-cancel-item</td>
+                            <td>Cancel item element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/rating/theming/tailwinddoc.js b/components/doc/rating/theming/tailwinddoc.js
new file mode 100644
index 0000000000..f322550e4d
--- /dev/null
+++ b/components/doc/rating/theming/tailwinddoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    rating: {
+        root: ({ props }) => ({
+            className: classNames('relative flex items-center', 'gap-2', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        cancelitem: ({ context }) => ({
+            className: classNames('inline-flex items-center cursor-pointer', {
+                'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+            })
+        }),
+        cancelicon: {
+            className: classNames('text-red-500', 'w-5 h-5', 'transition duration-200 ease-in')
+        },
+        item: ({ props, context }) => ({
+            className: classNames(
+                'inline-flex items-center',
+                {
+                    'cursor-pointer': !props.readOnly,
+                    'cursor-default': props.readOnly
+                },
+                {
+                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+                }
+            )
+        }),
+        officon: {
+            className: classNames('text-gray-700 hover:text-blue-400', 'w-5 h-5', 'transition duration-200 ease-in')
+        },
+        onicon: {
+            className: classNames('text-blue-500', 'w-5 h-5', 'transition duration-200 ease-in')
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Rating } from "primereact/rating";
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-center">
+            <Rating value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/rating/withoutcanceldoc.js b/components/doc/rating/withoutcanceldoc.js
new file mode 100644
index 0000000000..36ab49e605
--- /dev/null
+++ b/components/doc/rating/withoutcanceldoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Rating } from '@/components/lib/rating/Rating';
+import { useState } from 'react';
+
+export function WithoutCancelDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Rating } from "primereact/rating";
+
+export default function WithoutCancelDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Rating, RatingChangeEvent } from "primereact/rating";
+
+export default function WithoutCancelDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Rating value={value} onChange={(e : RatingChangeEvent) => setValue(e.value)} cancel={false} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Rating value={value} onChange={(e) => setValue(e.value)} cancel={false} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/ripple/accessibilitydoc.js b/components/doc/ripple/accessibilitydoc.js
new file mode 100644
index 0000000000..e89419e723
--- /dev/null
+++ b/components/doc/ripple/accessibilitydoc.js
@@ -0,0 +1,15 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h6>Screen Reader</h6>
+            <p>
+                Ripple element has the <i>aria-hidden</i> attribute as true so that it gets ignored by the screen readers.
+            </p>
+
+            <h6>Keyboard Support</h6>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/ripple/basicdoc.js b/components/doc/ripple/basicdoc.js
new file mode 100644
index 0000000000..b01e732526
--- /dev/null
+++ b/components/doc/ripple/basicdoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Ripple } from '@/components/lib/ripple/Ripple';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+    Click Me
+    <Ripple />
+</div>
+        `,
+        javascript: `
+import React from 'react';
+import { Ripple } from 'primereact/ripple';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+                Click Me
+                <Ripple />
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Ripple } from 'primereact/ripple';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center">
+            <div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+                Click Me
+                <Ripple />
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Ripple is enabled by adding the component as a child and applying <i>p-ripple</i> class to the element.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center">
+                <div className="bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold p-ripple">
+                    Click Me
+                    <Ripple />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/ripple/configurationdoc.js b/components/doc/ripple/configurationdoc.js
new file mode 100644
index 0000000000..e8517cb363
--- /dev/null
+++ b/components/doc/ripple/configurationdoc.js
@@ -0,0 +1,36 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function ConfigurationDoc(props) {
+    const code = {
+        basic: `
+//_app.js
+import { PrimeReactProvider } from 'primereact/api';
+
+export default function MyApp({ Component }) {
+    const value = {
+        ripple: true,
+        ...
+    };
+
+    return (
+        <PrimeReactProvider value={value}>
+            <App />
+        </PrimeReactProvider>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    To start with, Ripple needs to be enabled globally. See the <Link href="http://github.com/configuration/#ripple">Configuration API</Link> for details.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/ripple/customdoc.js b/components/doc/ripple/customdoc.js
new file mode 100644
index 0000000000..12c4f7ddc7
--- /dev/null
+++ b/components/doc/ripple/customdoc.js
@@ -0,0 +1,141 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Ripple } from '@/components/lib/ripple/Ripple';
+
+export function CustomDoc(props) {
+    const code = {
+        basic: `
+<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+    Green
+    <Ripple
+        pt={{
+            root: { style: { background: 'rgba(75, 175, 80, 0.3)' } }
+        }}
+    />
+</div>
+<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+    Orange
+    <Ripple
+        pt={{
+            root: { style: { background: 'rgba(255, 193, 6, 0.3)' } }
+        }}
+    />
+</div>
+<div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+    Purple
+    <Ripple
+        pt={{
+            root: { style: { background: 'rgba(156, 39, 176, 0.3)' } }
+        }}
+    />
+</div>
+        `,
+        javascript: `
+import React from 'react';
+import { Ripple } from 'primereact/ripple';
+
+export default function CustomDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center gap-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                Green
+                <Ripple
+                    pt={{
+                        root: { style: { background: 'rgba(75, 175, 80, 0.3)' } }
+                    }}
+                />
+            </div>
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                Orange
+                <Ripple
+                    pt={{
+                        root: { style: { background: 'rgba(255, 193, 6, 0.3)' } }
+                    }}
+                />
+            </div>
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                Purple
+                <Ripple
+                    pt={{
+                        root: { style: { background: 'rgba(156, 39, 176, 0.3)' } }
+                    }}
+                />
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Ripple } from 'primereact/ripple';
+
+export default function CustomDemo() {
+    return (
+        <div className="card flex justify-content-center align-items-center gap-2">
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                Green
+                <Ripple
+                    pt={{
+                        root: { style: { background: 'rgba(75, 175, 80, 0.3)' } }
+                    }}
+                />
+            </div>
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                Orange
+                <Ripple
+                    pt={{
+                        root: { style: { background: 'rgba(255, 193, 6, 0.3)' } }
+                    }}
+                />
+            </div>
+            <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                Purple
+                <Ripple
+                    pt={{
+                        root: { style: { background: 'rgba(156, 39, 176, 0.3)' } }
+                    }}
+                />
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center align-items-center gap-2">
+                <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                    Green
+                    <Ripple
+                        pt={{
+                            root: { style: { background: 'rgba(75, 175, 80, 0.3)' } }
+                        }}
+                    />
+                </div>
+                <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                    Orange
+                    <Ripple
+                        pt={{
+                            root: { style: { background: 'rgba(255, 193, 6, 0.3)' } }
+                        }}
+                    />
+                </div>
+                <div className="p-ripple p-5 border-round border-radius-10 shadow-2">
+                    Purple
+                    <Ripple
+                        pt={{
+                            root: { style: { background: 'rgba(156, 39, 176, 0.3)' } }
+                        }}
+                    />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/ripple/importdoc.js b/components/doc/ripple/importdoc.js
new file mode 100644
index 0000000000..b8a4b31626
--- /dev/null
+++ b/components/doc/ripple/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Ripple } from 'primereact/ripple';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/ripple/styledoc.js b/components/doc/ripple/styledoc.js
new file mode 100644
index 0000000000..2fce5b3037
--- /dev/null
+++ b/components/doc/ripple/styledoc.js
@@ -0,0 +1,34 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <div className="doc-tablewrapper">
+                    <table className="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>p-ripple</td>
+                                <td>Host element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-ink</td>
+                                <td>Ripple element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-ink-active</td>
+                                <td>Ripple element during animating.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/ripple/theming/styleddoc.js b/components/doc/ripple/theming/styleddoc.js
new file mode 100644
index 0000000000..007feee416
--- /dev/null
+++ b/components/doc/ripple/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-ripple</td>
+                            <td>Host element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-ink</td>
+                            <td>Ripple element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-ink-active</td>
+                            <td>Ripple element during animating.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/ripple/theming/tailwinddoc.js b/components/doc/ripple/theming/tailwinddoc.js
new file mode 100644
index 0000000000..672af3b2a6
--- /dev/null
+++ b/components/doc/ripple/theming/tailwinddoc.js
@@ -0,0 +1,58 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    global: {
+        css: \`
+        *[data-pd-ripple="true"]{
+            overflow: hidden;
+            position: relative;
+        }
+        span[data-p-ink-active="true"]{
+            animation: ripple 0.4s linear;
+        }
+        @keyframes ripple {
+            100% {
+                opacity: 0;
+                transform: scale(2.5);
+            }
+        }
+    \`
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex justify-center">
+            <Button label="Submit" />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/scrollpanel/accessibilitydoc.js b/components/doc/scrollpanel/accessibilitydoc.js
new file mode 100644
index 0000000000..3815a6e80a
--- /dev/null
+++ b/components/doc/scrollpanel/accessibilitydoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Scrollbars of the ScrollPanel has a <i>scrollbar</i> role along with the <i>aria-controls</i> attribute that refers to the id of the scrollable content container and the <i>aria-orientation</i> to indicate the orientation of
+                scrolling.
+            </p>
+
+            <h3>Header Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Scrolls content down when vertical scrolling is available.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Scrolls content up when vertical scrolling is available.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left</i>
+                            </td>
+                            <td>Scrolls content left when horizontal scrolling is available.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right</i>
+                            </td>
+                            <td>Scrolls content right when horizontal scrolling is available.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/scrollpanel/basicdoc.js b/components/doc/scrollpanel/basicdoc.js
new file mode 100644
index 0000000000..bb76a51d2f
--- /dev/null
+++ b/components/doc/scrollpanel/basicdoc.js
@@ -0,0 +1,102 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ScrollPanel } from '@/components/lib/scrollpanel/ScrollPanel';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<ScrollPanel style={{ width: '100%', height: '200px' }}>
+    <p>
+        Lorem ipsum dolor ...
+    </p>
+</ScrollPanel>
+        `,
+        javascript: `
+import React from 'react'; 
+import { ScrollPanel } from 'primereact/scrollpanel';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <ScrollPanel style={{ width: '100%', height: '200px' }}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                    enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                    ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+                <p className="m-0">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                    quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </ScrollPanel>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { ScrollPanel } from 'primereact/scrollpanel';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <ScrollPanel style={{ width: '100%', height: '200px' }}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p>
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                    enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                    ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+                <p className="m-0">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                    quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </ScrollPanel>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>ScrollPanel is defined using dimensions for the scrollable viewport.</p>
+            </DocSectionText>
+            <div className="card">
+                <ScrollPanel style={{ width: '100%', height: '200px' }}>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                    <p>
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
+                        ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                    <p>
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+                        qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </ScrollPanel>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/scrollpanel/customdoc.js b/components/doc/scrollpanel/customdoc.js
new file mode 100644
index 0000000000..2bf36abefc
--- /dev/null
+++ b/components/doc/scrollpanel/customdoc.js
@@ -0,0 +1,221 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ScrollPanel } from '@/components/lib/scrollpanel/ScrollPanel';
+
+export function CustomDemo(props) {
+    const code = {
+        basic: `
+<ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar1">
+    <p>
+        Lorem ipsum dolor ...
+    </p>
+</ScrollPanel>
+
+<ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar2">
+    <p>
+    Lorem ipsum dolor ...
+    </p>
+</ScrollPanel>
+        `,
+        javascript: `
+import React from 'react'; 
+import { ScrollPanel } from 'primereact/scrollpanel';
+import './ScrollPanelDemo.css';
+
+export default function CustomDemo() {
+    return (
+        <div className="card scrollpanel-demo">
+            <div className="flex flex-column md:flex-row gap-5">
+                <div className="flex-auto">
+                    <ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar1">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                        <p>
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                        <p>
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </ScrollPanel>
+                </div>
+                <div className="flex-auto">
+                    <ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar2">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                        <p>
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                        <p>
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </ScrollPanel>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { ScrollPanel } from 'primereact/scrollpanel';
+import './ScrollPanelDemo.css';
+
+export default function CustomDemo() {
+    return (
+        <div className="card scrollpanel-demo">
+            <div className="flex flex-column md:flex-row gap-5">
+                <div className="flex-auto">
+                    <ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar1">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                        <p>
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                        <p>
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </ScrollPanel>
+                </div>
+                <div className="flex-auto">
+                    <ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar2">
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                        </p>
+                        <p>
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                        <p>
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </ScrollPanel>
+                </div>
+            </div>
+        </div>
+    )
+}
+        `,
+        extFiles: {
+            'ScrollPanelDemo.css': `
+/* ScrollPanelDemo.css */
+
+.scrollpanel-demo .p-scrollpanel.custombar1 .p-scrollpanel-wrapper {
+    border-right: 10px solid var(--surface-ground);
+}
+
+.scrollpanel-demo .p-scrollpanel.custombar1 .p-scrollpanel-bar {
+    background-color: var(--primary-300);
+    opacity: 1;
+    transition: background-color .3s;
+}
+
+.scrollpanel-demo .p-scrollpanel.custombar1 .p-scrollpanel-bar:hover {
+    background-color: var(--primary-400);
+}
+
+.scrollpanel-demo .p-scrollpanel.custombar2 .p-scrollpanel-wrapper {
+    border-right: 10px solid var(--surface-50);
+    border-bottom: 10px solid var(--surface-50);
+}
+
+.scrollpanel-demo .p-scrollpanel.custombar2 .p-scrollpanel-bar {
+    background-color: var(--surface-300);
+    border-radius: 0;
+    opacity: 1;
+    transition: background-color .3s;
+}
+
+.scrollpanel-demo .col-12 {
+    padding: 2rem;
+}
+`
+        }
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Scrollbar visuals can be styled for a unified look across different platforms.</p>
+            </DocSectionText>
+            <div className="card scrollpanel-demo">
+                <div className="flex flex-column md:flex-row gap-5">
+                    <div className="flex-auto">
+                        <ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar1">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                                id est laborum.
+                            </p>
+                            <p>
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                            </p>
+                            <p>
+                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
+                                in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
+                                minus.
+                            </p>
+                        </ScrollPanel>
+                    </div>
+                    <div className="flex-auto">
+                        <ScrollPanel style={{ width: '100%', height: '200px' }} className="custombar2">
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+                                commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+                                id est laborum.
+                            </p>
+                            <p>
+                                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                            </p>
+                            <p>
+                                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt
+                                in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
+                                minus.
+                            </p>
+                        </ScrollPanel>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/scrollpanel/importdoc.js b/components/doc/scrollpanel/importdoc.js
new file mode 100644
index 0000000000..48e6d590c3
--- /dev/null
+++ b/components/doc/scrollpanel/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ScrollPanel } from 'primereact/scrollpanel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/scrollpanel/pt/wireframe.js b/components/doc/scrollpanel/pt/wireframe.js
new file mode 100644
index 0000000000..9a591d1398
--- /dev/null
+++ b/components/doc/scrollpanel/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/scrollpanel.jpg" alt="scrollpanel" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/scrollpanel/styledoc.js b/components/doc/scrollpanel/styledoc.js
new file mode 100644
index 0000000000..e4f5a7c819
--- /dev/null
+++ b/components/doc/scrollpanel/styledoc.js
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-scrollpanel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-wrapper</td>
+                            <td>Wrapper of content section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-content</td>
+                            <td>Content section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-bar</td>
+                            <td>Scrollbar handle.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-bar-x</td>
+                            <td>Scrollbar handle of a horizontal bar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-bar-y</td>
+                            <td>Scrollbar handle of a vertical bar</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/scrollpanel/theming/styleddoc.js b/components/doc/scrollpanel/theming/styleddoc.js
new file mode 100644
index 0000000000..db018af27e
--- /dev/null
+++ b/components/doc/scrollpanel/theming/styleddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-scrollpanel</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-wrapper</td>
+                            <td>Wrapper of content section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-content</td>
+                            <td>Content section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-bar</td>
+                            <td>Scrollbar handle.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-bar-x</td>
+                            <td>Scrollbar handle of a horizontal bar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrollpanel-bar-y</td>
+                            <td>Scrollbar handle of a vertical bar</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/scrollpanel/theming/tailwinddoc.js b/components/doc/scrollpanel/theming/tailwinddoc.js
new file mode 100644
index 0000000000..30f8cba86a
--- /dev/null
+++ b/components/doc/scrollpanel/theming/tailwinddoc.js
@@ -0,0 +1,70 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    scrollpanel: {
+        wrapper: 'overflow-hidden relative float-left h-full w-full z-[1]',
+        content: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden',
+        barX: {
+            className: classNames('relative bg-gray-100 invisible rounded cursor-pointer h-[9px] bottom-0 z-[2]', 'transition duration-[250ms] ease-linear')
+        },
+        barY: {
+            className: classNames('relative bg-gray-100 rounded cursor-pointer w-[9px] top-0 z-[2]', 'transition duration-[250ms] ease-linear')
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { ScrollPanel } from 'primereact/scrollpanel';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card">
+            <ScrollPanel style={{ width: '100%', height: '150px' }}>
+                <p className="text-gray-700 dark:text-white/80">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+                <p className="text-gray-700 dark:text-white/80">
+                    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                    eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                    enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                    ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                </p>
+                <p className="text-gray-700 dark:text-white/80 m-0">
+                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                    quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                </p>
+            </ScrollPanel>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/scrolltop/accessibilitydoc.js b/components/doc/scrolltop/accessibilitydoc.js
new file mode 100644
index 0000000000..9b2a8f8e71
--- /dev/null
+++ b/components/doc/scrolltop/accessibilitydoc.js
@@ -0,0 +1,42 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <Link href="http://github.com/locale">locale</Link> API by default, you may use your own aria roles and attributes as any valid
+                attribute is passed to the button element implicitly.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Scrolls to top.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Scrolls to top.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/scrolltop/basicdoc.js b/components/doc/scrolltop/basicdoc.js
new file mode 100644
index 0000000000..e1e0ebf327
--- /dev/null
+++ b/components/doc/scrolltop/basicdoc.js
@@ -0,0 +1,53 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ScrollTop } from '@/components/lib/scrolltop/ScrollTop';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<ScrollTop />
+        `,
+        javascript: `
+import React from 'react'; 
+import { ScrollTop } from 'primereact/scrolltop';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex flex-column align-items-center" style={{ height: '2000px' }}>
+            <p>Scroll down the page to display the ScrollTo component.</p>
+            <i className="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style={{ fontSize: '2rem' }}></i>
+            <ScrollTop />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { ScrollTop } from 'primereact/scrolltop';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex flex-column align-items-center" style={{ height: '2000px' }}>
+            <p>Scroll down the page to display the ScrollTo component.</p>
+            <i className="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite" style={{ fontSize: '2rem' }}></i>
+            <ScrollTop />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>ScrollTop listens window scroll by default.</p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <p>Scroll down the page to display the ScrollTo component.</p>
+                <i className="pi pi-angle-down fadeout animation-duration-1000 animation-iteration-infinite text-2xl" style={{ fontSize: '2rem', marginBottom: '30rem' }} />
+                <ScrollTop />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/scrolltop/elementdoc.js b/components/doc/scrolltop/elementdoc.js
new file mode 100644
index 0000000000..e79e2a5362
--- /dev/null
+++ b/components/doc/scrolltop/elementdoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ScrollTop } from '@/components/lib/scrolltop/ScrollTop';
+
+export function ElementDoc(props) {
+    const code = {
+        basic: `
+<ScrollTop target="parent" threshold={100} className="w-2rem h-2rem border-round-md bg-primary" icon="pi pi-arrow-up text-base" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { ScrollTop } from 'primereact/scrolltop';
+
+export default function ElementDemo() {
+    return (
+        <div className="card">
+            <div style={{ width: '250px', height: '200px', 'overflow': 'auto' }}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
+                    adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
+                    augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
+                    nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
+                    viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+                </p>
+                <ScrollTop target="parent" threshold={100} className="w-2rem h-2rem border-round bg-primary" icon="pi pi-arrow-up text-base" />
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { ScrollTop } from 'primereact/scrolltop';
+
+export default function ElementDemo() {
+    return (
+        <div className="card">
+            <div style={{ width: '250px', height: '200px', 'overflow': 'auto' }}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
+                    adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
+                    augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
+                    nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
+                    viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+                </p>
+                <ScrollTop target="parent" threshold={100} className="w-2rem h-2rem border-round bg-primary" icon="pi pi-arrow-up text-base" />
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Setting the <i>target</i> property to <i>parent</i> binds ScrollTop to its parent element that has scrolling content.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div style={{ width: '250px', height: '200px', overflow: 'auto' }}>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
+                        adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
+                        augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
+                        nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
+                        viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+                    </p>
+                    <ScrollTop target="parent" threshold={100} className="w-2rem h-2rem border-round bg-primary" icon="pi pi-arrow-up text-base" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/scrolltop/importdoc.js b/components/doc/scrolltop/importdoc.js
new file mode 100644
index 0000000000..b51120b535
--- /dev/null
+++ b/components/doc/scrolltop/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ScrollTop } from 'primereact/scrolltop';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/scrolltop/pt/wireframe.js b/components/doc/scrolltop/pt/wireframe.js
new file mode 100644
index 0000000000..c9e89f3e8a
--- /dev/null
+++ b/components/doc/scrolltop/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/scrolltop.jpg" alt="scrolltop" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/scrolltop/styledoc.js b/components/doc/scrolltop/styledoc.js
new file mode 100644
index 0000000000..fd1e63e6c6
--- /dev/null
+++ b/components/doc/scrolltop/styledoc.js
@@ -0,0 +1,34 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-scrolltop</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrolltop-sticky</td>
+                            <td>Container element when attached to its parent.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/scrolltop/theming/styleddoc.js b/components/doc/scrolltop/theming/styleddoc.js
new file mode 100644
index 0000000000..03717d3491
--- /dev/null
+++ b/components/doc/scrolltop/theming/styleddoc.js
@@ -0,0 +1,31 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-scrolltop</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-scrolltop-sticky</td>
+                            <td>Container element when attached to its parent.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/scrolltop/theming/tailwinddoc.js b/components/doc/scrolltop/theming/tailwinddoc.js
new file mode 100644
index 0000000000..a508175732
--- /dev/null
+++ b/components/doc/scrolltop/theming/tailwinddoc.js
@@ -0,0 +1,64 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    scrolltop: {
+        root: ({ props }) => ({
+            className: classNames('fixed bottom-20 right-20 flex items-center justify-center', 'ml-auto', {
+                '!bg-blue-500 hover:bg-blue-600 text-white rounded-md h-8 w-8': props.target == 'parent',
+                '!bg-gray-700 hover:bg-gray-800 h-12 w-12 rounded-full text-white': props.target !== 'parent'
+            })
+        }),
+        transition: {
+            enterFromClass: 'opacity-0',
+            enterActiveClass: 'transition-opacity duration-150',
+            leaveActiveClass: 'transition-opacity duration-150',
+            leaveToClass: 'opacity-0'
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { ScrollTop } from 'primereact/scrolltop';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card">
+            <div style={{ width: '250px', height: '200px', 'overflow': 'auto' }}>
+                <p className="text-gray-700 dark:text-white/80">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur
+                    adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor
+                    augue mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet
+                    nisl purus. Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus
+                    viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
+                </p>
+                <ScrollTop target="parent" threshold={100} className="w-2rem h-2rem border-round bg-primary" icon="pi pi-arrow-up text-base" />
+            </div>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/accessibilitydoc.js b/components/doc/selectbutton/accessibilitydoc.js
new file mode 100644
index 0000000000..53e1e6ac17
--- /dev/null
+++ b/components/doc/selectbutton/accessibilitydoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                The container element that wraps the buttons has a <i>group</i> role whereas each button element uses <i>button</i> role and <i>aria-pressed</i> is updated depending on selection state. Value to describe an option is automatically set
+                using the <i>aria-label</i> property that refers to the label of an option so it is still suggested to define a label even the option display consists of presentational content like icons only.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the buttons.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the checked state of a button.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/selectbutton/basicdoc.js b/components/doc/selectbutton/basicdoc.js
new file mode 100644
index 0000000000..709d049009
--- /dev/null
+++ b/components/doc/selectbutton/basicdoc.js
@@ -0,0 +1,61 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const options = ['Off', 'On'];
+    const [value, setValue] = useState(options[0]);
+
+    const code = {
+        basic: `
+<SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function BasicDemo() {
+    const options = ['Off', 'On'];
+    const [value, setValue] = useState(options[0]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+
+export default function BasicDemo() {
+    const options: string[] = ['Off', 'On'];
+    const [value, setValue] = useState<string>(options[0]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton value={value} onChange={(e: SelectButtonChangeEvent) => setValue(e.value)} options={options} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SelectButton is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with an <i>options</i> collection. Label and value of an option are defined with the <i>optionLabel</i> and <i>optionValue</i>{' '}
+                    properties respectively. Default property name for the <i>optionLabel</i> is <i>label</i> and <i>value</i> for the <i>optionValue</i>. If <i>optionValue</i> is omitted and the object has no <i>value</i> property, the object itself
+                    becomes the value of an option. Note that, when options are simple primitive values such as a string array, no <i>optionLabel</i> and <i>optionValue</i> would be necessary.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/disableddoc.js b/components/doc/selectbutton/disableddoc.js
new file mode 100644
index 0000000000..97f69b4fa0
--- /dev/null
+++ b/components/doc/selectbutton/disableddoc.js
@@ -0,0 +1,81 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { useState } from 'react';
+
+export function DisabledDoc(props) {
+    const [value, setValue] = useState(null);
+    const options1 = ['Off', 'On'];
+    const options2 = [
+        { name: 'Option 1', value: 1 },
+        { name: 'Option 2', value: 2, constant: true }
+    ];
+
+    const code = {
+        basic: `
+<SelectButton disabled options={options1} />
+<SelectButton value={value} onChange={(e) => setValue(e.value)} options={options2} optionLabel="name" optionDisabled="constant" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function DisabledDemo() {
+    const [value, setValue] = useState(null);
+    const options1 = ['Off', 'On'];
+    const options2 = [
+        { name: 'Option 1', value: 1 },
+        { name: 'Option 2', value: 2, constant: true }
+    ];
+    
+    return (
+        <div className="card flex flex-wrap justify-content-center flex-wrap gap-3">
+            <SelectButton disabled options={options1} />
+            <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options2} optionLabel="name" optionDisabled="constant" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+
+interface Item {
+    name: string;
+    value: number;
+    constant: boolean;
+}
+
+export default function DisabledDemo() {
+    const [value, setValue] = useState(null);
+    const options1: string[] = ['Off', 'On'];
+    const options2: Item[] = [
+        { name: 'Option 1', value: 1 },
+        { name: 'Option 2', value: 2, constant: true }
+    ];
+    
+    return (
+        <div className="card flex flex-wrap justify-content-center flex-wrap gap-3">
+            <SelectButton disabled options={options1} />
+            <SelectButton value={value} onChange={(e: SelectButtonChangeEvent) => setValue(e.value)} options={options2} optionLabel="name" optionDisabled="constant" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the <i>optionDisabled</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center flex-wrap gap-3">
+                <SelectButton disabled options={options1} />
+                <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options2} optionLabel="name" optionDisabled="constant" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/importdoc.js b/components/doc/selectbutton/importdoc.js
new file mode 100644
index 0000000000..e3cd0d89ae
--- /dev/null
+++ b/components/doc/selectbutton/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { SelectButton } from 'primereact/selectbutton';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/invaliddoc.js b/components/doc/selectbutton/invaliddoc.js
new file mode 100644
index 0000000000..2ae5a01c88
--- /dev/null
+++ b/components/doc/selectbutton/invaliddoc.js
@@ -0,0 +1,59 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const options = ['Off', 'On'];
+    const [value, setValue] = useState(options[0]);
+
+    const code = {
+        basic: `
+<SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function InvalidDemo() {
+    const options = ['Off', 'On'];
+    const [value, setValue] = useState(options[0]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+
+export default function InvalidDemo() {
+    const options: string[] = ['Off', 'On'];
+    const [value, setValue] = useState<string>(options[0]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton invalid value={value} onChange={(e: SelectButtonChangeEvent) => setValue(e.value)} options={options} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/multipledoc.js b/components/doc/selectbutton/multipledoc.js
new file mode 100644
index 0000000000..4fdd9b0c21
--- /dev/null
+++ b/components/doc/selectbutton/multipledoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { useState } from 'react';
+
+export function MultipleDoc(props) {
+    const [value, setValue] = useState(null);
+    const items = [
+        { name: 'Option 1', value: 1 },
+        { name: 'Option 2', value: 2 },
+        { name: 'Option 3', value: 3 }
+    ];
+
+    const code = {
+        basic: `
+<SelectButton value={value} onChange={(e) => setValue(e.value)} optionLabel="name" options={items} multiple />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function MultipleDemo() {
+    const [value, setValue] = useState(null);
+    const items = [
+        { name: 'Option 1', value: 1 },
+        { name: 'Option 2', value: 2 },
+        { name: 'Option 3', value: 3 }
+    ];
+    
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton value={value} onChange={(e) => setValue(e.value)} optionLabel="name" options={items} multiple />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+
+interface Item {
+    name: string;
+    value: number;
+}
+
+export default function MultipleDemo() {
+    const [value, setValue] = useState<Item>(null);
+    const items: Item[] = [
+        {name: 'Option 1', value: 1},
+        {name: 'Option 2', value: 2},
+        {name: 'Option 3', value: 3}
+    ];
+    
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton value={value} onChange={(e: SelectButtonChangeEvent) => setValue(e.value)} optionLabel="name" options={items} multiple />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SelectButton allows selecting only one item by default and enabling <i>multiple</i> allows choosing more. In multiple case, model property should be an array instead of a single value.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <SelectButton value={value} onChange={(e) => setValue(e.value)} optionLabel="name" options={items} multiple />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/pt/wireframe.js b/components/doc/selectbutton/pt/wireframe.js
new file mode 100644
index 0000000000..0528a8ecad
--- /dev/null
+++ b/components/doc/selectbutton/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/selectbutton.jpg" alt="selectbutton" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/selectbutton/templatedoc.js b/components/doc/selectbutton/templatedoc.js
new file mode 100644
index 0000000000..a3dee71799
--- /dev/null
+++ b/components/doc/selectbutton/templatedoc.js
@@ -0,0 +1,92 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [value, setValue] = useState(null);
+    const justifyOptions = [
+        { icon: 'pi pi-align-left', value: 'left' },
+        { icon: 'pi pi-align-right', value: 'Right' },
+        { icon: 'pi pi-align-center', value: 'Center' },
+        { icon: 'pi pi-align-justify', value: 'Justify' }
+    ];
+
+    const justifyTemplate = (option) => {
+        return <i className={option.icon} />;
+    };
+
+    const code = {
+        basic: `
+<SelectButton value={value} onChange={(e) => setValue(e.value)} itemTemplate={justifyTemplate} optionLabel="value" options={justifyOptions} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState(null);
+    const justifyOptions = [
+        {icon: 'pi pi-align-left', value: 'left'},
+        {icon: 'pi pi-align-right', value: 'Right'},
+        {icon: 'pi pi-align-center', value: 'Center'},
+        {icon: 'pi pi-align-justify', value: 'Justify'}
+    ];
+
+    const justifyTemplate = (option) => {
+        return <i className={option.icon}></i>;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton value={value} onChange={(e) => setValue(e.value)} itemTemplate={justifyTemplate} optionLabel="value" options={justifyOptions} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { SelectButton, SelectButtonChangeEvent } from 'primereact/selectbutton';
+
+interface JustifyOption {
+    icon: string;
+    value: string;
+}
+
+export default function TemplateDemo() {
+    const [value, setValue] = useState<JustifyOption>(null);
+    const justifyOptions: JustifyOption[] = [
+        {icon: 'pi pi-align-left', value: 'left'},
+        {icon: 'pi pi-align-right', value: 'Right'},
+        {icon: 'pi pi-align-center', value: 'Center'},
+        {icon: 'pi pi-align-justify', value: 'Justify'}
+    ];
+
+    const justifyTemplate = (option: JustifyOption) => {
+        return <i className={option.icon}></i>;
+    }
+
+    return (
+        <div className="card flex justify-content-center">
+            <SelectButton value={value} onChange={(e: SelectButtonChangeEvent) => setValue(e.value)} itemTemplate={justifyTemplate} optionLabel="value" options={justifyOptions} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Options support templating using the <i>itemTemplate</i> property that references a function to render the content. Notice the usage of <i>optionLabel</i>, although not rendered visually, it is still required to be used as the
+                    list key.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <SelectButton value={value} onChange={(e) => setValue(e.value)} itemTemplate={justifyTemplate} optionLabel="value" options={justifyOptions} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/theming/styleddoc.js b/components/doc/selectbutton/theming/styleddoc.js
new file mode 100644
index 0000000000..c881af9065
--- /dev/null
+++ b/components/doc/selectbutton/theming/styleddoc.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper" />
+        </>
+    );
+}
diff --git a/components/doc/selectbutton/theming/tailwinddoc.js b/components/doc/selectbutton/theming/tailwinddoc.js
new file mode 100644
index 0000000000..4d6a15d2d0
--- /dev/null
+++ b/components/doc/selectbutton/theming/tailwinddoc.js
@@ -0,0 +1,64 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    selectbutton: {
+        root: ({ props }) => ({
+            className: classNames({ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled })
+        }),
+        button: ({ context }) => ({
+            className: classNames(
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3',
+                'transition duration-200 border border-r-0',
+                'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.selected,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.selected,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                }
+            )
+        }),
+        label: 'font-bold'
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { SelectButton } from 'primereact/selectbutton';
+
+export default function UnstyledDemo() {
+    const options = ['Off', 'On'];
+    const [value, setValue] = useState(options[0]);
+
+    return (
+        <div className="card flex justify-center">
+            <SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/sidebar/accessibilitydoc.js b/components/doc/sidebar/accessibilitydoc.js
new file mode 100644
index 0000000000..f914546ca3
--- /dev/null
+++ b/components/doc/sidebar/accessibilitydoc.js
@@ -0,0 +1,89 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Sidebar component uses <i>complementary</i> role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like <i>aria-labelledby</i> can be added. In
+                addition <i>aria-modal</i> is added since focus is kept within the sidebar when opened.
+            </p>
+            <p>
+                It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding <i>tabIndex</i> would be necessary.
+            </p>
+            <p>
+                Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.
+            </p>
+            <CodeHighlight>
+                {`
+<Button icon="pi pi-arrow-right" onClick={(e) => setVisible(true)} aria-controls={visible ? 'sbar' : null} aria-expanded={visible ? true : false}/>
+
+<Sidebar id="sidebar" visible={visible} onHide={() => setVisible(false)} role="region">
+Content
+</Sidebar>
+`}
+            </CodeHighlight>
+
+            <h3>Overlay Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next the focusable element within the sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous the focusable element within the sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>
+                                Closes the dialog if <i>closeOnEscape</i> is true.
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the sidebar.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/sidebar/basicdoc.js b/components/doc/sidebar/basicdoc.js
new file mode 100644
index 0000000000..ffd466f116
--- /dev/null
+++ b/components/doc/sidebar/basicdoc.js
@@ -0,0 +1,89 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<div className="card flex justify-content-center">
+    <Sidebar visible={visible} onHide={() => setVisible(false)}>
+        <h2>Sidebar</h2>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+    </Sidebar>
+    <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+</div>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar visible={visible} onHide={() => setVisible(false)}>
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar visible={visible} onHide={() => setVisible(false)}>
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Sidebar is used as a container and visibility is controlled with a binding to <i>visible</i> and <i>onHide</i> event callback.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Sidebar visible={visible} onHide={() => setVisible(false)}>
+                    <h2>Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+                <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/fullscreendoc.js b/components/doc/sidebar/fullscreendoc.js
new file mode 100644
index 0000000000..c9494e1491
--- /dev/null
+++ b/components/doc/sidebar/fullscreendoc.js
@@ -0,0 +1,89 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
+import { useState } from 'react';
+
+export function FullScreenDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<div className="card flex justify-content-center">
+    <Sidebar visible={visible} onHide={() => setVisible(false)} fullScreen>
+        <h2>Sidebar</h2>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+    </Sidebar>
+    <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+</div>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function FullScreenDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar visible={visible} onHide={() => setVisible(false)} fullScreen>
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-window-maximize" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function FullScreenDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar visible={visible} onHide={() => setVisible(false)} fullScreen>
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-window-maximize" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Sidebar can cover the whole page when <i>fullScreen</i> property is enabled.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Sidebar visible={visible} onHide={() => setVisible(false)} fullScreen>
+                    <h2>Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+                <Button icon="pi pi-window-maximize" onClick={() => setVisible(true)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/headlessdoc.js b/components/doc/sidebar/headlessdoc.js
new file mode 100644
index 0000000000..42c6ec4dc9
--- /dev/null
+++ b/components/doc/sidebar/headlessdoc.js
@@ -0,0 +1,821 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Button } from '@/components/lib/button/Button';
+import { Ripple } from '@/components/lib/ripple/Ripple';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
+import { StyleClass } from '@/components/lib/styleclass/StyleClass';
+import { useRef, useState } from 'react';
+
+export function HeadlessDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const btnRef1 = useRef(null);
+    const btnRef2 = useRef(null);
+    const btnRef3 = useRef(null);
+    const btnRef4 = useRef(null);
+
+    const code = {
+        basic: `
+<Sidebar
+    visible={visible}
+    onHide={() => setVisible(false)}
+    content={({ closeIconRef, hide }) => (
+        <div className="min-h-screen flex relative lg:static surface-ground">
+            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                <div className="flex flex-column h-full">
+                    <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                        <span className="inline-flex align-items-center gap-2">
+                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="..."
+                                    fill="var(--primary-color)"
+                                />
+                                <path
+                                    d="..."
+                                    fill="var(--text-color)"
+                                />
+                            </svg>
+                            <span className="font-semibold text-2xl text-primary">Your Logo</span>
+                        </span>
+                        <span>
+                            <Button type="button" ref={closeIconRef} onClick={(e) => hide(e)} icon="pi pi-times" rounded outlined className="h-2rem w-2rem"></Button>
+                        </span>
+                    </div>
+                    <div className="overflow-y-auto">
+                        <ul className="list-none p-3 m-0">
+                            <li>
+                                <StyleClass nodeRef={btnRef1} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                    <div ref={btnRef1} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                        <span className="font-medium">FAVORITES</span>
+                                        <i className="pi pi-chevron-down"></i>
+                                        <Ripple />
+                                    </div>
+                                </StyleClass>
+                                <ul className="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-home mr-2"></i>
+                                            <span className="font-medium">Dashboard</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-bookmark mr-2"></i>
+                                            <span className="font-medium">Bookmarks</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <StyleClass nodeRef={btnRef2} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                            <a ref={btnRef2} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                <i className="pi pi-chart-line mr-2"></i>
+                                                <span className="font-medium">Reports</span>
+                                                <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                <Ripple />
+                                            </a>
+                                        </StyleClass>
+                                        <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                            <li>
+                                                <StyleClass nodeRef={btnRef3} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                    <a ref={btnRef3} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-chart-line mr-2"></i>
+                                                        <span className="font-medium">Revenue</span>
+                                                        <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                        <Ripple />
+                                                    </a>
+                                                </StyleClass>
+                                                <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-table mr-2"></i>
+                                                            <span className="font-medium">View</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-search mr-2"></i>
+                                                            <span className="font-medium">Search</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                    <i className="pi pi-chart-line mr-2"></i>
+                                                    <span className="font-medium">Expenses</span>
+                                                    <Ripple />
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-users mr-2"></i>
+                                            <span className="font-medium">Team</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-comments mr-2"></i>
+                                            <span className="font-medium">Messages</span>
+                                            <span className="inline-flex align-items-center justify-content-center ml-auto bg-blue-500 text-0 border-circle" style={{ minWidth: '1.5rem', height: '1.5rem' }}>
+                                                3
+                                            </span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-calendar mr-2"></i>
+                                            <span className="font-medium">Calendar</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-cog mr-2"></i>
+                                            <span className="font-medium">Settings</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <ul className="list-none p-3 m-0">
+                            <li>
+                                <StyleClass nodeRef={btnRef4} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                    <div ref={btnRef4} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                        <span className="font-medium">APPLICATION</span>
+                                        <i className="pi pi-chevron-down"></i>
+                                        <Ripple />
+                                    </div>
+                                </StyleClass>
+                                <ul className="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-folder mr-2"></i>
+                                            <span className="font-medium">Projects</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-chart-bar mr-2"></i>
+                                            <span className="font-medium">Performance</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                            <i className="pi pi-cog mr-2"></i>
+                                            <span className="font-medium">Settings</span>
+                                            <Ripple />
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="mt-auto">
+                        <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
+                        <a  className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                            <span className="font-bold">Amy Elsner</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )}
+></Sidebar>
+        `,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+import { Avatar } from 'primereact/avatar';
+import { Ripple } from 'primereact/ripple';
+import { StyleClass } from 'primereact/styleclass';
+
+export default function HeadlessDemo() {
+    const [visible, setVisible] = useState(false);
+    const btnRef1 = useRef(null);
+    const btnRef2 = useRef(null);
+    const btnRef3 = useRef(null);
+    const btnRef4 = useRef(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar
+                visible={visible}
+                onHide={() => setVisible(false)}
+                content={({ closeIconRef, hide }) => (
+                    <div className="min-h-screen flex relative lg:static surface-ground">
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                            <div className="flex flex-column h-full">
+                                <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                                    <span className="inline-flex align-items-center gap-2">
+                                        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <g mask="url(#mask0_2642_713)">
+                                                <path
+                                                    fillRule="evenodd"
+                                                    clipRule="evenodd"
+                                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                                    fill="var(--primary-color)"
+                                                />
+                                            </g>
+                                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                                            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+                                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                                        </svg>
+                                        <span className="font-semibold text-2xl text-primary">Your Logo</span>
+                                    </span>
+                                    <span>
+                                        <Button type="button" ref={closeIconRef} onClick={(e) => hide(e)} icon="pi pi-times" rounded outlined className="h-2rem w-2rem"></Button>
+                                    </span>
+                                </div>
+                                <div className="overflow-y-auto">
+                                    <ul className="list-none p-3 m-0">
+                                        <li>
+                                            <StyleClass nodeRef={btnRef1} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                <div ref={btnRef1} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                                    <span className="font-medium">FAVORITES</span>
+                                                    <i className="pi pi-chevron-down"></i>
+                                                    <Ripple />
+                                                </div>
+                                            </StyleClass>
+                                            <ul className="list-none p-0 m-0 overflow-hidden">
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-home mr-2"></i>
+                                                        <span className="font-medium">Dashboard</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-bookmark mr-2"></i>
+                                                        <span className="font-medium">Bookmarks</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <StyleClass nodeRef={btnRef2} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                        <a ref={btnRef2} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-chart-line mr-2"></i>
+                                                            <span className="font-medium">Reports</span>
+                                                            <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                            <Ripple />
+                                                        </a>
+                                                    </StyleClass>
+                                                    <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                        <li>
+                                                            <StyleClass nodeRef={btnRef3} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                                <a ref={btnRef3} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                    <i className="pi pi-chart-line mr-2"></i>
+                                                                    <span className="font-medium">Revenue</span>
+                                                                    <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                                    <Ripple />
+                                                                </a>
+                                                            </StyleClass>
+                                                            <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                                <li>
+                                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                        <i className="pi pi-table mr-2"></i>
+                                                                        <span className="font-medium">View</span>
+                                                                        <Ripple />
+                                                                    </a>
+                                                                </li>
+                                                                <li>
+                                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                        <i className="pi pi-search mr-2"></i>
+                                                                        <span className="font-medium">Search</span>
+                                                                        <Ripple />
+                                                                    </a>
+                                                                </li>
+                                                            </ul>
+                                                        </li>
+                                                        <li>
+                                                            <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                <i className="pi pi-chart-line mr-2"></i>
+                                                                <span className="font-medium">Expenses</span>
+                                                                <Ripple />
+                                                            </a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-users mr-2"></i>
+                                                        <span className="font-medium">Team</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-comments mr-2"></i>
+                                                        <span className="font-medium">Messages</span>
+                                                        <span className="inline-flex align-items-center justify-content-center ml-auto bg-blue-500 text-0 border-circle" style={{ minWidth: '1.5rem', height: '1.5rem' }}>
+                                                            3
+                                                        </span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-calendar mr-2"></i>
+                                                        <span className="font-medium">Calendar</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-cog mr-2"></i>
+                                                        <span className="font-medium">Settings</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    <ul className="list-none p-3 m-0">
+                                        <li>
+                                            <StyleClass nodeRef={btnRef4} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                <div ref={btnRef4} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                                    <span className="font-medium">APPLICATION</span>
+                                                    <i className="pi pi-chevron-down"></i>
+                                                    <Ripple />
+                                                </div>
+                                            </StyleClass>
+                                            <ul className="list-none p-0 m-0 overflow-hidden">
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-folder mr-2"></i>
+                                                        <span className="font-medium">Projects</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-chart-bar mr-2"></i>
+                                                        <span className="font-medium">Performance</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-cog mr-2"></i>
+                                                        <span className="font-medium">Settings</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="mt-auto">
+                                    <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
+                                    <a  className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                                        <span className="font-bold">Amy Elsner</span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            ></Sidebar>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+import { Avatar } from 'primereact/avatar';
+import { Ripple } from 'primereact/ripple';
+import { StyleClass } from 'primereact/styleclass';
+
+export default function HeadlessDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+    const btnRef1 = useRef<any>(null);
+    const btnRef2 = useRef<any>(null);
+    const btnRef3 = useRef<any>(null);
+    const btnRef4 = useRef<any>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar
+                visible={visible}
+                onHide={() => setVisible(false)}
+                content={({ closeIconRef, hide }) => (
+                    <div className="min-h-screen flex relative lg:static surface-ground">
+                        <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                            <div className="flex flex-column h-full">
+                                <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                                    <span className="inline-flex align-items-center gap-2">
+                                        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                            <g mask="url(#mask0_2642_713)">
+                                                <path
+                                                    fillRule="evenodd"
+                                                    clipRule="evenodd"
+                                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                                    fill="var(--primary-color)"
+                                                />
+                                            </g>
+                                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                                            <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+                                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                                        </svg>
+                                        <span className="font-semibold text-2xl text-primary">Your Logo</span>
+                                    </span>
+                                    <span>
+                                        <Button type="button" ref={closeIconRef} onClick={(e) => hide(e)} icon="pi pi-times" rounded outlined className="h-2rem w-2rem"></Button>
+                                    </span>
+                                </div>
+                                <div className="overflow-y-auto">
+                                    <ul className="list-none p-3 m-0">
+                                        <li>
+                                            <StyleClass nodeRef={btnRef1} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                <div ref={btnRef1} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                                    <span className="font-medium">FAVORITES</span>
+                                                    <i className="pi pi-chevron-down"></i>
+                                                    <Ripple />
+                                                </div>
+                                            </StyleClass>
+                                            <ul className="list-none p-0 m-0 overflow-hidden">
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-home mr-2"></i>
+                                                        <span className="font-medium">Dashboard</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-bookmark mr-2"></i>
+                                                        <span className="font-medium">Bookmarks</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <StyleClass nodeRef={btnRef2} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                        <a ref={btnRef2} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-chart-line mr-2"></i>
+                                                            <span className="font-medium">Reports</span>
+                                                            <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                            <Ripple />
+                                                        </a>
+                                                    </StyleClass>
+                                                    <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                        <li>
+                                                            <StyleClass nodeRef={btnRef3} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                                <a ref={btnRef3} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                    <i className="pi pi-chart-line mr-2"></i>
+                                                                    <span className="font-medium">Revenue</span>
+                                                                    <i className="pi pi-chevron-down ml-auto mr-1"></i>
+                                                                    <Ripple />
+                                                                </a>
+                                                            </StyleClass>
+                                                            <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                                <li>
+                                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                        <i className="pi pi-table mr-2"></i>
+                                                                        <span className="font-medium">View</span>
+                                                                        <Ripple />
+                                                                    </a>
+                                                                </li>
+                                                                <li>
+                                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                        <i className="pi pi-search mr-2"></i>
+                                                                        <span className="font-medium">Search</span>
+                                                                        <Ripple />
+                                                                    </a>
+                                                                </li>
+                                                            </ul>
+                                                        </li>
+                                                        <li>
+                                                            <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                <i className="pi pi-chart-line mr-2"></i>
+                                                                <span className="font-medium">Expenses</span>
+                                                                <Ripple />
+                                                            </a>
+                                                        </li>
+                                                    </ul>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-users mr-2"></i>
+                                                        <span className="font-medium">Team</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-comments mr-2"></i>
+                                                        <span className="font-medium">Messages</span>
+                                                        <span className="inline-flex align-items-center justify-content-center ml-auto bg-blue-500 text-0 border-circle" style={{ minWidth: '1.5rem', height: '1.5rem' }}>
+                                                            3
+                                                        </span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-calendar mr-2"></i>
+                                                        <span className="font-medium">Calendar</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-cog mr-2"></i>
+                                                        <span className="font-medium">Settings</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                    <ul className="list-none p-3 m-0">
+                                        <li>
+                                            <StyleClass nodeRef={btnRef4} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                <div ref={btnRef4} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                                    <span className="font-medium">APPLICATION</span>
+                                                    <i className="pi pi-chevron-down"></i>
+                                                    <Ripple />
+                                                </div>
+                                            </StyleClass>
+                                            <ul className="list-none p-0 m-0 overflow-hidden">
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-folder mr-2"></i>
+                                                        <span className="font-medium">Projects</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-chart-bar mr-2"></i>
+                                                        <span className="font-medium">Performance</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                                <li>
+                                                    <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                        <i className="pi pi-cog mr-2"></i>
+                                                        <span className="font-medium">Settings</span>
+                                                        <Ripple />
+                                                    </a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div className="mt-auto">
+                                    <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
+                                    <a  className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                        <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                                        <span className="font-bold">Amy Elsner</span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            ></Sidebar>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Headless mode is enabled by defining a <i>content</i> prop that lets you implement entire sidebar UI instead of the default elements.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Sidebar
+                    visible={visible}
+                    onHide={() => setVisible(false)}
+                    content={({ closeIconRef, hide }) => (
+                        <div className="min-h-screen flex relative lg:static surface-ground">
+                            <div id="app-sidebar-2" className="surface-section h-screen block flex-shrink-0 absolute lg:static left-0 top-0 z-1 border-right-1 surface-border select-none" style={{ width: '280px' }}>
+                                <div className="flex flex-column h-full">
+                                    <div className="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                                        <span className="inline-flex align-items-center gap-2">
+                                            <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                                <g mask="url(#mask0_2642_713)">
+                                                    <path
+                                                        fillRule="evenodd"
+                                                        clipRule="evenodd"
+                                                        d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                                        fill="var(--primary-color)"
+                                                    />
+                                                </g>
+                                                <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                                                <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                                                <path
+                                                    fillRule="evenodd"
+                                                    clipRule="evenodd"
+                                                    d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z"
+                                                    fill="var(--primary-color)"
+                                                />
+                                                <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                                <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                                <path
+                                                    fillRule="evenodd"
+                                                    clipRule="evenodd"
+                                                    d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z"
+                                                    fill="var(--primary-color)"
+                                                />
+                                                <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                                                <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                                                <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                                                <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                                            </svg>
+                                            <span className="font-semibold text-2xl text-primary">Your Logo</span>
+                                        </span>
+                                        <span>
+                                            <Button type="button" ref={closeIconRef} onClick={(e) => hide(e)} icon="pi pi-times" rounded outlined className="h-2rem w-2rem" />
+                                        </span>
+                                    </div>
+                                    <div className="overflow-y-auto">
+                                        <ul className="list-none p-3 m-0">
+                                            <li>
+                                                <StyleClass nodeRef={btnRef1} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                    <div ref={btnRef1} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                                        <span className="font-medium">FAVORITES</span>
+                                                        <i className="pi pi-chevron-down" />
+                                                        <Ripple />
+                                                    </div>
+                                                </StyleClass>
+                                                <ul className="list-none p-0 m-0 overflow-hidden">
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-home mr-2" />
+                                                            <span className="font-medium">Dashboard</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-bookmark mr-2" />
+                                                            <span className="font-medium">Bookmarks</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <StyleClass nodeRef={btnRef2} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                            <a ref={btnRef2} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                <i className="pi pi-chart-line mr-2" />
+                                                                <span className="font-medium">Reports</span>
+                                                                <i className="pi pi-chevron-down ml-auto mr-1" />
+                                                                <Ripple />
+                                                            </a>
+                                                        </StyleClass>
+                                                        <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                            <li>
+                                                                <StyleClass nodeRef={btnRef3} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                                    <a ref={btnRef3} className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                        <i className="pi pi-chart-line mr-2" />
+                                                                        <span className="font-medium">Revenue</span>
+                                                                        <i className="pi pi-chevron-down ml-auto mr-1" />
+                                                                        <Ripple />
+                                                                    </a>
+                                                                </StyleClass>
+                                                                <ul className="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                                    <li>
+                                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                            <i className="pi pi-table mr-2" />
+                                                                            <span className="font-medium">View</span>
+                                                                            <Ripple />
+                                                                        </a>
+                                                                    </li>
+                                                                    <li>
+                                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                            <i className="pi pi-search mr-2" />
+                                                                            <span className="font-medium">Search</span>
+                                                                            <Ripple />
+                                                                        </a>
+                                                                    </li>
+                                                                </ul>
+                                                            </li>
+                                                            <li>
+                                                                <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                                    <i className="pi pi-chart-line mr-2" />
+                                                                    <span className="font-medium">Expenses</span>
+                                                                    <Ripple />
+                                                                </a>
+                                                            </li>
+                                                        </ul>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-users mr-2" />
+                                                            <span className="font-medium">Team</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-comments mr-2" />
+                                                            <span className="font-medium">Messages</span>
+                                                            <span className="inline-flex align-items-center justify-content-center ml-auto bg-blue-500 text-0 border-circle" style={{ minWidth: '1.5rem', height: '1.5rem' }}>
+                                                                3
+                                                            </span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-calendar mr-2" />
+                                                            <span className="font-medium">Calendar</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-cog mr-2" />
+                                                            <span className="font-medium">Settings</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                        </ul>
+                                        <ul className="list-none p-3 m-0">
+                                            <li>
+                                                <StyleClass nodeRef={btnRef4} selector="@next" enterFromClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                                                    <div ref={btnRef4} className="p-ripple p-3 flex align-items-center justify-content-between text-600 cursor-pointer">
+                                                        <span className="font-medium">APPLICATION</span>
+                                                        <i className="pi pi-chevron-down" />
+                                                        <Ripple />
+                                                    </div>
+                                                </StyleClass>
+                                                <ul className="list-none p-0 m-0 overflow-hidden">
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-folder mr-2" />
+                                                            <span className="font-medium">Projects</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-chart-bar mr-2" />
+                                                            <span className="font-medium">Performance</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a className="p-ripple flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors w-full">
+                                                            <i className="pi pi-cog mr-2" />
+                                                            <span className="font-medium">Settings</span>
+                                                            <Ripple />
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                    <div className="mt-auto">
+                                        <hr className="mb-3 mx-3 border-top-1 border-none surface-border" />
+                                        <a className="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                                            <span className="font-bold">Amy Elsner</span>
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                />
+                <Button icon="pi pi-bars" onClick={() => setVisible(true)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/importdoc.js b/components/doc/sidebar/importdoc.js
new file mode 100644
index 0000000000..ff9a810b58
--- /dev/null
+++ b/components/doc/sidebar/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Sidebar } from 'primereact/sidebar';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/positiondoc.js b/components/doc/sidebar/positiondoc.js
new file mode 100644
index 0000000000..77c49eff95
--- /dev/null
+++ b/components/doc/sidebar/positiondoc.js
@@ -0,0 +1,216 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
+import { useState } from 'react';
+
+export function PositionDoc(props) {
+    const [visibleLeft, setVisibleLeft] = useState(false);
+    const [visibleRight, setVisibleRight] = useState(false);
+    const [visibleTop, setVisibleTop] = useState(false);
+    const [visibleBottom, setVisibleBottom] = useState(false);
+
+    const code = {
+        basic: `
+<div className="flex gap-2 justify-content-center">
+    <Button icon="pi pi-arrow-right" onClick={() => setVisibleLeft(true)} />
+    <Button icon="pi pi-arrow-left" onClick={() => setVisibleRight(true)} />
+    <Button icon="pi pi-arrow-down" onClick={() => setVisibleTop(true)} />
+    <Button icon="pi pi-arrow-up" onClick={() => setVisibleBottom(true)} />
+</div>
+
+<Sidebar visible={visibleLeft} position="left" onHide={() => setVisibleLeft(false)}>
+    <h2>Left Sidebar</h2>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+</Sidebar>
+
+<Sidebar visible={visibleRight} position="right" onHide={() => setVisibleRight(false)}>
+    <h2>Right Sidebar</h2>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+</Sidebar>
+
+<Sidebar visible={visibleTop} position="top" onHide={() => setVisibleTop(false)}>
+    <h2>Top Sidebar</h2>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+</Sidebar>
+
+<Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+    <h2>Bottom Sidebar</h2>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+</Sidebar>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function PositionDemo() {
+    const [visibleLeft, setVisibleLeft] = useState(false);
+    const [visibleRight, setVisibleRight] = useState(false);
+    const [visibleTop, setVisibleTop] = useState(false);
+    const [visibleBottom, setVisibleBottom] = useState(false);
+
+    return (
+        <div className="card">
+            <div className="flex gap-2 justify-content-center">
+                <Button icon="pi pi-arrow-right" onClick={() => setVisibleLeft(true)} />
+                <Button icon="pi pi-arrow-left" onClick={() => setVisibleRight(true)} />
+                <Button icon="pi pi-arrow-down" onClick={() => setVisibleTop(true)} />
+                <Button icon="pi pi-arrow-up" onClick={() => setVisibleBottom(true)} />
+            </div>
+
+            <Sidebar visible={visibleLeft} position="left" onHide={() => setVisibleLeft(false)}>
+                <h2>Left Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleRight} position="right" onHide={() => setVisibleRight(false)}>
+                <h2>Right Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleTop} position="top" onHide={() => setVisibleTop(false)}>
+                <h2>Top Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <h2>Bottom Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function PositionDemo() {
+    const [visibleLeft, setVisibleLeft] = useState<boolean>(false);
+    const [visibleRight, setVisibleRight] = useState<boolean>(false);
+    const [visibleTop, setVisibleTop] = useState<boolean>(false);
+    const [visibleBottom, setVisibleBottom] = useState<boolean>(false);
+
+    return (
+        <div className="card">
+            <div className="flex gap-2 justify-content-center">
+                <Button icon="pi pi-arrow-right" onClick={() => setVisibleLeft(true)} />
+                <Button icon="pi pi-arrow-left" onClick={() => setVisibleRight(true)} />
+                <Button icon="pi pi-arrow-down" onClick={() => setVisibleTop(true)} />
+                <Button icon="pi pi-arrow-up" onClick={() => setVisibleBottom(true)} />
+            </div>
+
+            <Sidebar visible={visibleLeft} position="left" onHide={() => setVisibleLeft(false)}>
+                <h2>Left Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleRight} position="right" onHide={() => setVisibleRight(false)}>
+                <h2>Right Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleTop} position="top" onHide={() => setVisibleTop(false)}>
+                <h2>Top Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <h2>Bottom Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Sidebar location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as a value.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex gap-2 justify-content-center">
+                    <Button icon="pi pi-arrow-right" onClick={() => setVisibleLeft(true)} />
+                    <Button icon="pi pi-arrow-left" onClick={() => setVisibleRight(true)} />
+                    <Button icon="pi pi-arrow-down" onClick={() => setVisibleTop(true)} />
+                    <Button icon="pi pi-arrow-up" onClick={() => setVisibleBottom(true)} />
+                </div>
+
+                <Sidebar visible={visibleLeft} position="left" onHide={() => setVisibleLeft(false)}>
+                    <h2>Left Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+
+                <Sidebar visible={visibleRight} position="right" onHide={() => setVisibleRight(false)}>
+                    <h2>Right Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+
+                <Sidebar visible={visibleTop} position="top" onHide={() => setVisibleTop(false)}>
+                    <h2>Top Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+
+                <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                    <h2>Bottom Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/pt/wireframe.js b/components/doc/sidebar/pt/wireframe.js
new file mode 100644
index 0000000000..c24ac88a00
--- /dev/null
+++ b/components/doc/sidebar/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/sidebar.jpg" alt="sidebar" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/sidebar/sizedoc.js b/components/doc/sidebar/sizedoc.js
new file mode 100644
index 0000000000..1f1967dee7
--- /dev/null
+++ b/components/doc/sidebar/sizedoc.js
@@ -0,0 +1,89 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
+import { useState } from 'react';
+
+export function SizeDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const code = {
+        basic: `
+<div className="card flex justify-content-center">
+    <Sidebar visible={visible} onHide={() => setVisible(false)} fullScreen>
+        <h2>Sidebar</h2>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        </p>
+    </Sidebar>
+    <Button icon="pi pi-th-large" onClick={() => setVisible(true)} />
+</div>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function SizeDemo() {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar visible={visible} onHide={() => setVisible(false)} className="w-full md:w-20rem lg:w-30rem">
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function SizeDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar visible={visible} onHide={() => setVisible(false)} className="w-full md:w-20rem lg:w-30rem">
+                <h2>Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Sidebar dimension can be defined with <i>style</i> or <i>className</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Sidebar visible={visible} onHide={() => setVisible(false)} className="w-full md:w-20rem lg:w-30rem">
+                    <h2>Sidebar</h2>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+                <Button icon="pi pi-arrow-right" onClick={() => setVisible(true)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/styledoc.js b/components/doc/sidebar/styledoc.js
new file mode 100644
index 0000000000..0483fbaf26
--- /dev/null
+++ b/components/doc/sidebar/styledoc.js
@@ -0,0 +1,79 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-sidebar</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-left</td>
+                            <td>Container element of left sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-right</td>
+                            <td>Container element of right sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-top</td>
+                            <td>Container element of top sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-bottom</td>
+                            <td>Container element of bottom sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-full</td>
+                            <td>Container element of a full screen sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-active</td>
+                            <td>Container element when sidebar is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-close</td>
+                            <td>Close anchor element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-sm</td>
+                            <td>Small sized sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-md</td>
+                            <td>Medium sized sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-lg</td>
+                            <td>Large sized sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-view</td>
+                            <td>The page view is displayed according to the sidebar position.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-content</td>
+                            <td>Content of sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-mask</td>
+                            <td>Modal layer of the sidebar.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/sidebar/templatedoc.js b/components/doc/sidebar/templatedoc.js
new file mode 100644
index 0000000000..efb3998015
--- /dev/null
+++ b/components/doc/sidebar/templatedoc.js
@@ -0,0 +1,132 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
+import { Avatar } from '@/components/lib/primereact.all';
+import React, { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [visible, setVisible] = useState(false);
+
+    const customIcons = (
+        <React.Fragment>
+            <button className="p-sidebar-icon p-link mr-2">
+                <span className="pi pi-search" />
+            </button>
+        </React.Fragment>
+    );
+
+    const customHeader = (
+        <div className="flex align-items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold">Amy Elsner</span>
+        </div>
+    );
+
+    const code = {
+        basic: `
+<Sidebar visible={visible} onHide={() => setVisible(false)} icons={customIcons}>
+    <h2>Sidebar</h2>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+</Sidebar>
+<Button icon="pi pi-plus" onClick={() => setVisible(true)} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+import { Avatar } from 'primereact/avatar';
+
+export default function TemplateDemo() {
+    const [visible, setVisible] = useState(false);
+
+    const customIcons = (
+        <React.Fragment>
+            <button className="p-sidebar-icon p-link mr-2">
+                <span className="pi pi-search" />
+            </button>
+        </React.Fragment>
+    );
+
+    const customHeader = (
+        <div className="flex align-items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold">Amy Elsner</span>
+        </div>
+    );
+    
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar header={customHeader} visible={visible} onHide={() => setVisible(false)} icons={customIcons}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-plus" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+import { Avatar } from 'primereact/avatar';
+
+export default function TemplateDemo() {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    const customIcons = (
+        <React.Fragment>
+            <button className="p-sidebar-icon p-link mr-2">
+                <span className="pi pi-search" />
+            </button>
+        </React.Fragment>
+    );
+
+    const customHeader = (
+        <div className="flex align-items-center gap-2">
+            <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+            <span className="font-bold">Amy Elsner</span>
+        </div>
+    );
+
+    return (
+        <div className="card flex justify-content-center">
+            <Sidebar header={customHeader} visible={visible} onHide={() => setVisible(false)} icons={customIcons}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                    consequat.
+                </p>
+            </Sidebar>
+            <Button icon="pi pi-plus" onClick={() => setVisible(true)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Additional content at the header section is provided using the <i>icons</i> and <i>header</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Sidebar header={customHeader} visible={visible} onHide={() => setVisible(false)} icons={customIcons}>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat.
+                    </p>
+                </Sidebar>
+                <Button icon="pi pi-plus" onClick={() => setVisible(true)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/sidebar/theming/styleddoc.js b/components/doc/sidebar/theming/styleddoc.js
new file mode 100644
index 0000000000..cc369f8317
--- /dev/null
+++ b/components/doc/sidebar/theming/styleddoc.js
@@ -0,0 +1,79 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-sidebar</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-left</td>
+                            <td>Container element of left sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-right</td>
+                            <td>Container element of right sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-top</td>
+                            <td>Container element of top sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-bottom</td>
+                            <td>Container element of bottom sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-full</td>
+                            <td>Container element of a full screen sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-active</td>
+                            <td>Container element when sidebar is visible.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-close</td>
+                            <td>Close anchor element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-sm</td>
+                            <td>Small sized sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-md</td>
+                            <td>Medium sized sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-lg</td>
+                            <td>Large sized sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-view</td>
+                            <td>The page view is displayed according to the sidebar position.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-content</td>
+                            <td>Content of sidebar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sidebar-mask</td>
+                            <td>Modal layer of the sidebar.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/sidebar/theming/tailwinddoc.js b/components/doc/sidebar/theming/tailwinddoc.js
new file mode 100644
index 0000000000..0766004e58
--- /dev/null
+++ b/components/doc/sidebar/theming/tailwinddoc.js
@@ -0,0 +1,145 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    sidebar: {
+        root: ({ props }) => ({
+            className: classNames(
+                'flex flex-col pointer-events-auto relative transform translate-x-0 translate-y-0 translate-z-0 relative transition-transform duration-300',
+                'bg-white text-gray-700 border-0 shadow-lg',
+                {
+                    '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full',
+                    'h-full w-80': props.position == 'left' || props.position == 'right',
+                    'h-40 w-full': props.position == 'top' || props.position == 'bottom'
+                },
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
+            )
+        }),
+        header: {
+            className: classNames('flex items-center justify-end', 'p-5')
+        },
+        closeButton: {
+            className: classNames(
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
+                'dark:hover:text-white/80 dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
+        content: {
+            className: classNames('p-5 pt-0 h-full w-full', 'grow overflow-y-auto')
+        },
+        mask: {
+            className: classNames('flex pointer-events-auto', 'bg-black bg-opacity-40 transition duration-200 z-20 transition-colors')
+        },
+        transition: ({ props }) => {
+            return props.position === 'top'
+                ? {
+                      enterFromClass: 'translate-x-0 -translate-y-full translate-z-0',
+                      leaveToClass: 'translate-x-0 -translate-y-full translate-z-0'
+                  }
+                : props.position === 'bottom'
+                ? {
+                      enterFromClass: 'translate-x-0 translate-y-full translate-z-0',
+                      leaveToClass: 'translate-x-0 translate-y-full translate-z-0'
+                  }
+                : props.position === 'left'
+                ? {
+                      enterFromClass: '-translate-x-full translate-y-0 translate-z-0',
+                      leaveToClass: '-translate-x-full translate-y-0 translate-z-0'
+                  }
+                : props.position === 'right'
+                ? {
+                      enterFromClass: 'translate-x-full translate-y-0 translate-z-0',
+                      leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0'
+                  }
+                : {
+                      enterFromClass: 'opacity-0',
+                      enterActiveClass: 'transition-opacity duration-400 ease-in',
+                      leaveActiveClass: 'transition-opacity duration-400 ease-in',
+                      leaveToClass: 'opacity-0'
+                  };
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from 'react';
+import { Sidebar } from 'primereact/sidebar';
+import { Button } from 'primereact/button';
+
+export default function UnstyledDemo() {
+    const [visibleLeft, setVisibleLeft] = useState(false);
+    const [visibleRight, setVisibleRight] = useState(false);
+    const [visibleTop, setVisibleTop] = useState(false);
+    const [visibleBottom, setVisibleBottom] = useState(false);
+
+    return (
+        <div className="card">
+            <div className="flex gap-2 justify-content-center">
+                <Button icon="pi pi-arrow-right" onClick={() => setVisibleLeft(true)} />
+                <Button icon="pi pi-arrow-left" onClick={() => setVisibleRight(true)} />
+                <Button icon="pi pi-arrow-down" onClick={() => setVisibleTop(true)} />
+                <Button icon="pi pi-arrow-up" onClick={() => setVisibleBottom(true)} />
+            </div>
+
+            <Sidebar visible={visibleLeft} position="left" onHide={() => setVisibleLeft(false)}>
+                <h2>Left Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleRight} position="right" onHide={() => setVisibleRight(false)}>
+                <h2>Right Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleTop} position="top" onHide={() => setVisibleTop(false)}>
+                <h2>Top Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+
+            <Sidebar visible={visibleBottom} position="bottom" onHide={() => setVisibleBottom(false)}>
+                <h2>Bottom Sidebar</h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+            </Sidebar>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/skeleton/accessibilitydoc.js b/components/doc/skeleton/accessibilitydoc.js
new file mode 100644
index 0000000000..0c3e3e9172
--- /dev/null
+++ b/components/doc/skeleton/accessibilitydoc.js
@@ -0,0 +1,17 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Skeleton uses <i>aria-hidden</i> as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container,
+                you may use <i>aria-busy</i> on the container element as well to indicate the loading process.
+            </p>
+
+            <h4>Keyboard Support</h4>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/skeleton/carddoc.js b/components/doc/skeleton/carddoc.js
new file mode 100644
index 0000000000..a4df881003
--- /dev/null
+++ b/components/doc/skeleton/carddoc.js
@@ -0,0 +1,103 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+
+export function CardDoc(props) {
+    const code = {
+        basic: `
+<div className="border-round border-1 surface-border p-4 surface-card">
+    <div className="flex mb-3">
+        <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+        <div>
+            <Skeleton width="10rem" className="mb-2"></Skeleton>
+            <Skeleton width="5rem" className="mb-2"></Skeleton>
+            <Skeleton height=".5rem"></Skeleton>
+        </div>
+    </div>
+    <Skeleton width="100%" height="150px"></Skeleton>
+    <div className="flex justify-content-between mt-3">
+        <Skeleton width="4rem" height="2rem"></Skeleton>
+        <Skeleton width="4rem" height="2rem"></Skeleton>
+    </div>
+</div>
+        `,
+        javascript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+
+export default function CardDemo() {
+    return (
+        <div className="card">
+            <div className="border-round border-1 surface-border p-4 surface-card">
+                <div className="flex mb-3">
+                    <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                    <div>
+                        <Skeleton width="10rem" className="mb-2"></Skeleton>
+                        <Skeleton width="5rem" className="mb-2"></Skeleton>
+                        <Skeleton height=".5rem"></Skeleton>
+                    </div>
+                </div>
+                <Skeleton width="100%" height="150px"></Skeleton>
+                <div className="flex justify-content-between mt-3">
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+
+export default function CardDemo() {
+    return (
+        <div className="card">
+            <div className="border-round border-1 surface-border p-4 surface-card">
+                <div className="flex mb-3">
+                    <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                    <div>
+                        <Skeleton width="10rem" className="mb-2"></Skeleton>
+                        <Skeleton width="5rem" className="mb-2"></Skeleton>
+                        <Skeleton height=".5rem"></Skeleton>
+                    </div>
+                </div>
+                <Skeleton width="100%" height="150px"></Skeleton>
+                <div className="flex justify-content-between mt-3">
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="border-round border-1 surface-border p-4 surface-card">
+                    <div className="flex mb-3">
+                        <Skeleton shape="circle" size="4rem" className="mr-2" />
+                        <div>
+                            <Skeleton width="10rem" className="mb-2" />
+                            <Skeleton width="5rem" className="mb-2" />
+                            <Skeleton height=".5rem" />
+                        </div>
+                    </div>
+                    <Skeleton width="100%" height="150px" />
+                    <div className="flex justify-content-between mt-3">
+                        <Skeleton width="4rem" height="2rem" />
+                        <Skeleton width="4rem" height="2rem" />
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/skeleton/datatabledoc.js b/components/doc/skeleton/datatabledoc.js
new file mode 100644
index 0000000000..39b535a802
--- /dev/null
+++ b/components/doc/skeleton/datatabledoc.js
@@ -0,0 +1,79 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+
+export function DataTableDoc(props) {
+    const items = Array.from({ length: 5 }, (v, i) => i);
+
+    const code = {
+        basic: `
+<DataTable value={items} className="p-datatable-striped">
+    <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />}></Column>
+    <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />}></Column>
+    <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />}></Column>
+    <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />}></Column>
+</DataTable>
+        `,
+        javascript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+
+export default function DataTableDemo() {
+    const items = Array.from({ length: 5 }, (v, i) => i);
+
+    return (
+        <div className="card">
+            <DataTable value={items} className="p-datatable-striped">
+                <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />}></Column>
+                <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />}></Column>
+                <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />}></Column>
+                <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+
+export default function DataTableDemo() {
+    const items: number[] = Array.from({ length: 5 }, (v, i) => i);
+
+    return (
+        <div className="card">
+            <DataTable value={items} className="p-datatable-striped">
+                <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />}></Column>
+                <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />}></Column>
+                <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />}></Column>
+                <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />}></Column>
+            </DataTable>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+            </DocSectionText>
+            <div className="card">
+                <DataTable value={items} className="p-datatable-striped">
+                    <Column field="code" header="Code" style={{ width: '25%' }} body={<Skeleton />} />
+                    <Column field="name" header="Name" style={{ width: '25%' }} body={<Skeleton />} />
+                    <Column field="category" header="Category" style={{ width: '25%' }} body={<Skeleton />} />
+                    <Column field="quantity" header="Quantity" style={{ width: '25%' }} body={<Skeleton />} />
+                </DataTable>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/skeleton/importdoc.js b/components/doc/skeleton/importdoc.js
new file mode 100644
index 0000000000..ee3dd17adc
--- /dev/null
+++ b/components/doc/skeleton/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Skeleton } from 'primereact/skeleton';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/skeleton/listdoc.js b/components/doc/skeleton/listdoc.js
new file mode 100644
index 0000000000..2f9307bffe
--- /dev/null
+++ b/components/doc/skeleton/listdoc.js
@@ -0,0 +1,203 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+
+export function ListDoc(props) {
+    const code = {
+        basic: `
+<div className="border-round border-1 surface-border p-4">
+    <ul className="m-0 p-0 list-none">
+        <li className="mb-3">
+            <div className="flex">
+                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                <div style={{ flex: '1' }}>
+                    <Skeleton width="100%" className="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+        <li className="mb-3">
+            <div className="flex">
+                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                <div style={{ flex: '1' }}>
+                    <Skeleton width="100%" className="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+        <li className="mb-3">
+            <div className="flex">
+                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                <div style={{ flex: '1' }}>
+                    <Skeleton width="100%" className="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+        <li>
+            <div className="flex">
+                <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                <div style={{ flex: '1' }}>
+                    <Skeleton width="100%" className="mb-2"></Skeleton>
+                    <Skeleton width="75%"></Skeleton>
+                </div>
+            </div>
+        </li>
+    </ul>
+</div>
+        `,
+        javascript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+
+export default function ListDemo() {
+    return (
+        <div className="card">
+            <div className="border-round border-1 surface-border p-4">
+                <ul className="m-0 p-0 list-none">
+                    <li className="mb-3">
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                    <li className="mb-3">
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                    <li className="mb-3">
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+
+export default function ListDemo() {
+    return (
+        <div className="card">
+            <div className="border-round border-1 surface-border p-4">
+                <ul className="m-0 p-0 list-none">
+                    <li className="mb-3">
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                    <li className="mb-3">
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                    <li className="mb-3">
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div className="flex">
+                            <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                            <div style={{ flex: '1' }}>
+                                <Skeleton width="100%" className="mb-2"></Skeleton>
+                                <Skeleton width="75%"></Skeleton>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+            </DocSectionText>
+            <div className="card">
+                <div className="border-round border-1 surface-border p-4">
+                    <ul className="m-0 p-0 list-none">
+                        <li className="mb-3">
+                            <div className="flex">
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
+                                <div style={{ flex: '1' }}>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
+                                </div>
+                            </div>
+                        </li>
+                        <li className="mb-3">
+                            <div className="flex">
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
+                                <div style={{ flex: '1' }}>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
+                                </div>
+                            </div>
+                        </li>
+                        <li className="mb-3">
+                            <div className="flex">
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
+                                <div style={{ flex: '1' }}>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
+                                </div>
+                            </div>
+                        </li>
+                        <li>
+                            <div className="flex">
+                                <Skeleton shape="circle" size="4rem" className="mr-2" />
+                                <div style={{ flex: '1' }}>
+                                    <Skeleton width="100%" className="mb-2" />
+                                    <Skeleton width="75%" />
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/skeleton/pt/wireframe.js b/components/doc/skeleton/pt/wireframe.js
new file mode 100644
index 0000000000..ff5ce80c5b
--- /dev/null
+++ b/components/doc/skeleton/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/skeleton.jpg" alt="skeleton" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/skeleton/shapesdoc.js b/components/doc/skeleton/shapesdoc.js
new file mode 100644
index 0000000000..3046a212cf
--- /dev/null
+++ b/components/doc/skeleton/shapesdoc.js
@@ -0,0 +1,178 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Skeleton } from '../../../components/lib/skeleton/Skeleton';
+
+export function ShapesDoc(props) {
+    const code = {
+        basic: `
+<h5>Rectangle</h5>
+<Skeleton className="mb-2"></Skeleton>
+<Skeleton width="10rem" className="mb-2"></Skeleton>
+<Skeleton width="5rem" className="mb-2"></Skeleton>
+<Skeleton height="2rem" className="mb-2"></Skeleton>
+<Skeleton width="10rem" height="4rem"></Skeleton>
+
+<h5>Rounded</h5>
+<Skeleton className="mb-2" borderRadius="16px"></Skeleton>
+<Skeleton width="10rem" className="mb-2" borderRadius="16px"></Skeleton>
+<Skeleton width="5rem" borderRadius="16px" className="mb-2"></Skeleton>
+<Skeleton height="2rem" className="mb-2" borderRadius="16px"></Skeleton>
+<Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+
+<h5 className="mt-3">Square</h5>
+<Skeleton size="2rem" className="mr-2"></Skeleton>
+<Skeleton size="3rem" className="mr-2"></Skeleton>
+<Skeleton size="4rem" className="mr-2"></Skeleton>
+<Skeleton size="5rem"></Skeleton>
+
+<h5 className="mt-3">Circle</h5>
+<Skeleton shape="circle" size="2rem" className="mr-2"></Skeleton>
+<Skeleton shape="circle" size="3rem" className="mr-2"></Skeleton>
+<Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+<Skeleton shape="circle" size="5rem"></Skeleton>
+        `,
+        javascript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+
+export default function ShapesDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap">
+                <div className="w-full md:w-6 p-3">
+                    <h5>Rectangle</h5>
+                    <Skeleton className="mb-2"></Skeleton>
+                    <Skeleton width="10rem" className="mb-2"></Skeleton>
+                    <Skeleton width="5rem" className="mb-2"></Skeleton>
+                    <Skeleton height="2rem" className="mb-2"></Skeleton>
+                    <Skeleton width="10rem" height="4rem"></Skeleton>
+                </div>
+                <div className="w-full md:w-6 p-3">
+                    <h5>Rounded</h5>
+                    <Skeleton className="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" className="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="5rem" borderRadius="16px" className="mb-2"></Skeleton>
+                    <Skeleton height="2rem" className="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                </div>
+                <div className="w-full md:w-6 p-3">
+                    <h5>Square</h5>
+                    <div className="flex align-items-end">
+                        <Skeleton size="2rem" className="mr-2"></Skeleton>
+                        <Skeleton size="3rem" className="mr-2"></Skeleton>
+                        <Skeleton size="4rem" className="mr-2"></Skeleton>
+                        <Skeleton size="5rem"></Skeleton>
+                    </div>
+                </div>
+                <div className="w-full md:w-6 p-3">
+                    <h5>Circle</h5>
+                    <div className="flex align-items-end">
+                        <Skeleton shape="circle" size="2rem" className="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="3rem" className="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="5rem"></Skeleton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+
+export default function ShapesDemo() {
+    return (
+        <div className="card">
+            <div className="flex flex-wrap">
+                <div className="w-full md:w-6 p-3">
+                    <h5>Rectangle</h5>
+                    <Skeleton className="mb-2"></Skeleton>
+                    <Skeleton width="10rem" className="mb-2"></Skeleton>
+                    <Skeleton width="5rem" className="mb-2"></Skeleton>
+                    <Skeleton height="2rem" className="mb-2"></Skeleton>
+                    <Skeleton width="10rem" height="4rem"></Skeleton>
+                </div>
+                <div className="w-full md:w-6 p-3">
+                    <h5>Rounded</h5>
+                    <Skeleton className="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" className="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="5rem" borderRadius="16px" className="mb-2"></Skeleton>
+                    <Skeleton height="2rem" className="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+                </div>
+                <div className="w-full md:w-6 p-3">
+                    <h5>Square</h5>
+                    <div className="flex align-items-end">
+                        <Skeleton size="2rem" className="mr-2"></Skeleton>
+                        <Skeleton size="3rem" className="mr-2"></Skeleton>
+                        <Skeleton size="4rem" className="mr-2"></Skeleton>
+                        <Skeleton size="5rem"></Skeleton>
+                    </div>
+                </div>
+                <div className="w-full md:w-6 p-3">
+                    <h5>Circle</h5>
+                    <div className="flex align-items-end">
+                        <Skeleton shape="circle" size="2rem" className="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="3rem" className="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="5rem"></Skeleton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Various shapes and sizes can be created using styling properties like <i>shape</i>, <i>width</i>, <i>height</i>, <i>borderRadius</i> and <i>className</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap">
+                    <div className="w-full md:w-6 p-3">
+                        <h5>Rectangle</h5>
+                        <Skeleton className="mb-2" />
+                        <Skeleton width="10rem" className="mb-2" />
+                        <Skeleton width="5rem" className="mb-2" />
+                        <Skeleton height="2rem" className="mb-2" />
+                        <Skeleton width="10rem" height="4rem" />
+                    </div>
+                    <div className="w-full md:w-6 p-3">
+                        <h5>Rounded</h5>
+                        <Skeleton className="mb-2" borderRadius="16px" />
+                        <Skeleton width="10rem" className="mb-2" borderRadius="16px" />
+                        <Skeleton width="5rem" borderRadius="16px" className="mb-2" />
+                        <Skeleton height="2rem" className="mb-2" borderRadius="16px" />
+                        <Skeleton width="10rem" height="4rem" borderRadius="16px" />
+                    </div>
+                    <div className="w-full md:w-6 p-3">
+                        <h5>Square</h5>
+                        <div className="flex align-items-end">
+                            <Skeleton size="2rem" className="mr-2" />
+                            <Skeleton size="3rem" className="mr-2" />
+                            <Skeleton size="4rem" className="mr-2" />
+                            <Skeleton size="5rem" />
+                        </div>
+                    </div>
+                    <div className="w-full md:w-6 p-3">
+                        <h5>Circle</h5>
+                        <div className="flex align-items-end">
+                            <Skeleton shape="circle" size="2rem" className="mr-2" />
+                            <Skeleton shape="circle" size="3rem" className="mr-2" />
+                            <Skeleton shape="circle" size="4rem" className="mr-2" />
+                            <Skeleton shape="circle" size="5rem" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/skeleton/styledoc.js b/components/doc/skeleton/styledoc.js
new file mode 100644
index 0000000000..ba81a99cba
--- /dev/null
+++ b/components/doc/skeleton/styledoc.js
@@ -0,0 +1,38 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-skeleton</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-skeleton-circle</td>
+                            <td>Container element of a determinate progressbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-skeleton-none</td>
+                            <td>Container element of an indeterminate progressbar.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/skeleton/theming/styleddoc.js b/components/doc/skeleton/theming/styleddoc.js
new file mode 100644
index 0000000000..0ce92d0fa0
--- /dev/null
+++ b/components/doc/skeleton/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-skeleton</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-skeleton-circle</td>
+                            <td>Container element of a determinate progressbar.</td>
+                        </tr>
+                        <tr>
+                            <td>p-skeleton-none</td>
+                            <td>Container element of an indeterminate progressbar.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/skeleton/theming/tailwinddoc.js b/components/doc/skeleton/theming/tailwinddoc.js
new file mode 100644
index 0000000000..7e1dd3852e
--- /dev/null
+++ b/components/doc/skeleton/theming/tailwinddoc.js
@@ -0,0 +1,88 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    skeleton: {
+        root: ({ props }) => ({
+            className: classNames(
+                'overflow-hidden',
+                '!mb-2',
+                'bg-gray-300 dark:bg-gray-800',
+                'after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content after:w-full after:h-full after:bg-blue-400 after:left-full after:transform after:translate-x-full after:z-10 after:bg-gradient-to-r after:from-transparent after:via-white after:to-transparent animate-pulse',
+                {
+                    'rounded-md': props.shape !== 'circle',
+                    'rounded-full': props.shape == 'circle'
+                }
+            )
+        })
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Skeleton } from 'primereact/skeleton';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card text-gray-700 dark:text-white/80">
+            <div className="w-full">
+                <h5>Rectangle</h5>
+                <Skeleton className="mb-2"></Skeleton>
+                <Skeleton width="10rem" className="mb-2"></Skeleton>
+                <Skeleton width="5rem" className="mb-2"></Skeleton>
+                <Skeleton height="2rem" className="mb-2"></Skeleton>
+                <Skeleton width="10rem" height="4rem"></Skeleton>
+            </div>
+            <div className="w-full">
+                <h5>Rounded</h5>
+                <Skeleton className="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" className="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="5rem" borderRadius="16px" className="mb-2"></Skeleton>
+                <Skeleton height="2rem" className="mb-2" borderRadius="16px"></Skeleton>
+                <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
+            </div>
+            <div className="w-full">
+                <h5>Square</h5>
+                <div className="flex items-end">
+                    <Skeleton size="2rem" className="mr-2"></Skeleton>
+                    <Skeleton size="3rem" className="mr-2"></Skeleton>
+                    <Skeleton size="4rem" className="mr-2"></Skeleton>
+                    <Skeleton size="5rem"></Skeleton>
+                </div>
+            </div>
+            <div className="w-full ">
+                <h5>Circle</h5>
+                <div className="flex items-end">
+                    <Skeleton shape="circle" size="2rem" className="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="3rem" className="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="4rem" className="mr-2"></Skeleton>
+                    <Skeleton shape="circle" size="5rem"></Skeleton>
+                </div>
+            </div>
+      </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/slider/accessibilitydoc.js b/components/doc/slider/accessibilitydoc.js
new file mode 100644
index 0000000000..8dc0f69ed2
--- /dev/null
+++ b/components/doc/slider/accessibilitydoc.js
@@ -0,0 +1,88 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="label_number">Number</span>
+<Slider aria-labelledby="label_number" />
+
+<Slider aria-label="Number" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined
+                using
+                <i>aria-labelledby</i> and <i>aria-label</i> props.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the slider.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">left arrow</i>
+                                    <i>up arrow</i>
+                                </span>
+                            </td>
+                            <td>Decrements the value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <span className="inline-flex flex-column">
+                                    <i className="mb-1">right arrow</i>
+                                    <i>down arrow</i>
+                                </span>
+                            </td>
+                            <td>Increments the value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Set the minimum value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Set the maximum value.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>page up</i>
+                            </td>
+                            <td>Increments the value by 10 steps.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>page down</i>
+                            </td>
+                            <td>Decrements the value by 10 steps.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/slider/basicdoc.js b/components/doc/slider/basicdoc.js
new file mode 100644
index 0000000000..e3a2802c69
--- /dev/null
+++ b/components/doc/slider/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Slider } from '@/components/lib/slider/Slider';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<Slider value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e: SliderChangeEvent) => setValue(e.value)} className="w-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Slider is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/slider/filterdoc.js b/components/doc/slider/filterdoc.js
new file mode 100644
index 0000000000..b6efe436ec
--- /dev/null
+++ b/components/doc/slider/filterdoc.js
@@ -0,0 +1,127 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { Slider } from '@/components/lib/slider/Slider';
+import { useState } from 'react';
+
+export function FilterDoc(props) {
+    const [filter, setFilter] = useState(0);
+    const [filterValues, setFilterValues] = useState([100, 100, 0]);
+
+    const filterOptions = [
+        { label: 'Contrast', value: 0 },
+        { label: 'Brightness', value: 1 },
+        { label: 'Sepia', value: 2 }
+    ];
+
+    const filterStyle = () => {
+        return {
+            filter: `contrast(${filterValues[0]}%) brightness(${filterValues[1]}%) sepia(${filterValues[2]}%)`
+        };
+    };
+
+    const code = {
+        basic: `
+<img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+<SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+<Slider
+    value={filterValues[filter]}
+    onChange={(e) => {
+        const newFilterValues = [...filterValues];
+        newFilterValues[filter] = e.value;
+        setFilterValues(newFilterValues);
+    }}
+    className="w-14rem"
+    min={0}
+    max={200}
+/>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+import { SelectButton } from "primereact/selectbutton";
+
+export default function FilterDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column align-items-center">
+                <img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+                <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+                <Slider
+                    value={filterValues[filter]}
+                    onChange={(e) => {
+                        const newFilterValues = [...filterValues];
+                        newFilterValues[filter] = e.value;
+                        setFilterValues(newFilterValues);
+                    }}
+                    className="w-14rem"
+                    min={0}
+                    max={200}
+                />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+import { SelectButton } from "primereact/selectbutton";
+
+export default function FilterDemo() {
+    const [value, setValue] = useState<number>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="flex flex-column align-items-center">
+                <img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+                <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+                <Slider
+                    value={filterValues[filter]}
+                    onChange={(e) => {
+                        const newFilterValues = [...filterValues];
+                        newFilterValues[filter] = e.value;
+                        setFilterValues(newFilterValues);
+                    }}
+                    className="w-14rem"
+                    min={0}
+                    max={200}
+                />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Slider is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="flex flex-column align-items-center">
+                    <img alt="user header" className="w-full md:w-20rem border-round mb-4" src="https://primefaces.org/cdn/primevue/images/card-vue.jpg" style={filterStyle()} />
+                    <SelectButton value={filter} onChange={(e) => setFilter(e.value)} options={filterOptions} className="mb-3" />
+                    <Slider
+                        value={filterValues[filter]}
+                        onChange={(e) => {
+                            const newFilterValues = [...filterValues];
+
+                            newFilterValues[filter] = e.value;
+                            setFilterValues(newFilterValues);
+                        }}
+                        className="w-14rem"
+                        min={0}
+                        max={200}
+                    />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/slider/importdoc.js b/components/doc/slider/importdoc.js
new file mode 100644
index 0000000000..ff4c29979d
--- /dev/null
+++ b/components/doc/slider/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Slider } from 'primereact/slider';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/slider/inputdoc.js b/components/doc/slider/inputdoc.js
new file mode 100644
index 0000000000..b54991ac73
--- /dev/null
+++ b/components/doc/slider/inputdoc.js
@@ -0,0 +1,67 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { Slider } from '@/components/lib/slider/Slider';
+import { useState } from 'react';
+
+export function InputDoc(props) {
+    const [value, setValue] = useState(50);
+
+    const code = {
+        basic: `
+<InputText value={value} onChange={(e) => setValue(e.target.value)} />
+<Slider value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+import { InputText } from "primereact/inputtext";
+
+export default function InputDemo() {
+    const [value, setValue] = useState(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="w-14rem">
+                <InputText value={value} onChange={(e) => setValue(e.target.value)} className="w-full" />
+                <Slider value={value} onChange={(e) => setValue(e.value)} className="w-full" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+import { InputText } from "primereact/inputtext";
+
+export default function InputDemo() {
+    const [value, setValue] = useState<number>(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="w-14rem">
+                <InputText value={value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value)} className="w-full" />
+                <Slider value={value} onChange={(e: SliderChangeEvent) => setValue(e.value)} className="w-full" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Slider is connected to an input field using two-way binding.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="w-14rem">
+                    <InputText value={value} onChange={(e) => setValue(e.target.value)} className="w-full" />
+                    <Slider value={value} onChange={(e) => setValue(e.value)} className="w-full" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/slider/pt/wireframe.js b/components/doc/slider/pt/wireframe.js
new file mode 100644
index 0000000000..2e3ccab9a3
--- /dev/null
+++ b/components/doc/slider/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/slider.jpg" alt="slider" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/slider/rangedoc.js b/components/doc/slider/rangedoc.js
new file mode 100644
index 0000000000..f7d9ddcfe3
--- /dev/null
+++ b/components/doc/slider/rangedoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Slider } from '@/components/lib/slider/Slider';
+import { useState } from 'react';
+
+export function RangeDoc(props) {
+    const [value, setValue] = useState([20, 80]);
+
+    const code = {
+        basic: `
+<Slider value={value} onChange={(e) => setValue(e.value)} range />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+
+export default function RangeDemo() {
+    const [value, setValue] = useState([20,80]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" range />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+
+export default function RangeDemo() {
+    const [value, setValue] = useState<number[]>([20,80]);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e: SliderChangeEvent) => setValue(e.value)} className="w-14rem" range/>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>range</i> property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Slider value={value} onChange={(e) => setValue(e.value)} range className="w-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/slider/stepdoc.js b/components/doc/slider/stepdoc.js
new file mode 100644
index 0000000000..90ef9a909c
--- /dev/null
+++ b/components/doc/slider/stepdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Slider } from '@/components/lib/slider/Slider';
+import { useState } from 'react';
+
+export function StepDoc(props) {
+    const [value, setValue] = useState(20);
+
+    const code = {
+        basic: `
+<Slider value={value} onChange={(e) => setValue(e.value)} step={20} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+
+export default function StepDemo() {
+    const [value, setValue] = useState(20);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" step={20} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+
+export default function StepDemo() {
+    const [value, setValue] = useState<number>(20);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e: SliderChangeEvent) => setValue(e.value)} className="w-14rem" step={20} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Size of each movement is defined with the <i>step</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" step={20} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/slider/styledoc.js b/components/doc/slider/styledoc.js
new file mode 100644
index 0000000000..d5df085a3c
--- /dev/null
+++ b/components/doc/slider/styledoc.js
@@ -0,0 +1,35 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-slider</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-slider-handle</td>
+                            <td>Handle element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/slider/theming/styleddoc.js b/components/doc/slider/theming/styleddoc.js
new file mode 100644
index 0000000000..422f93a30a
--- /dev/null
+++ b/components/doc/slider/theming/styleddoc.js
@@ -0,0 +1,31 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-slider</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-slider-handle</td>
+                            <td>Handle element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/slider/theming/tailwinddoc.js b/components/doc/slider/theming/tailwinddoc.js
new file mode 100644
index 0000000000..bd5d5ada22
--- /dev/null
+++ b/components/doc/slider/theming/tailwinddoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {  
+    slider: {
+        root: ({ props }) => ({
+            className: classNames(
+                'relative',
+                'bg-gray-100 dark:bg-gray-800 border-0 rounded-6',
+                { 'h-1 w-56': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            )
+        }),
+        range: ({ props }) => ({
+            className: classNames('bg-blue-500', 'block absolute', {
+                'top-0 left-0 h-full': props.orientation == 'horizontal',
+                'bottom-0 left-0 w-full': props.orientation == 'vertical'
+            })
+        }),
+        handle: ({ props }) => ({
+            className: classNames(
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
+            )
+        })
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex justify-center">
+            <Slider value={value} onChange={(e) => setValue(e.value)} className="w-14rem" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/slider/verticaldoc.js b/components/doc/slider/verticaldoc.js
new file mode 100644
index 0000000000..bceaf63385
--- /dev/null
+++ b/components/doc/slider/verticaldoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Slider } from '@/components/lib/slider/Slider';
+import { useState } from 'react';
+
+export function VerticalDoc(props) {
+    const [value, setValue] = useState(50);
+
+    const code = {
+        basic: `
+<Slider value={value} onChange={(e) => setValue(e.value)} orientation="vertical" />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Slider } from "primereact/slider";
+
+export default function VerticalDemo() {
+    const [value, setValue] = useState(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e) => setValue(e.value)} orientation="vertical" className="h-14rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Slider, SliderChangeEvent } from "primereact/slider";
+
+export default function VerticalDemo() {
+    const [value, setValue] = useState<number>(50);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Slider value={value} onChange={(e: SliderChangeEvent) => setValue(e.value)} orientation="vertical" className="h-14rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Default layout of slider is <i>horizontal</i>, use <i>orientation</i> property for the alternative <i>vertical</i> mode.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Slider value={value} onChange={(e) => setValue(e.value)} orientation="vertical" className="h-14rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/accessibilitydoc.js b/components/doc/speeddial/accessibilitydoc.js
new file mode 100644
index 0000000000..605d825cee
--- /dev/null
+++ b/components/doc/speeddial/accessibilitydoc.js
@@ -0,0 +1,108 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<SpeedDial aria-label="Options" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the <i>aria-labelledby</i> or <i>aria-label</i> props. Addititonally the button includes
+                includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
+            </p>
+
+            <p>
+                The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the button.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Menu Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the menu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the menu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Opens the menu and moves focus to the first item.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Opens the menu and moves focus to the last item.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Menu Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the menu and sets focus on the menu button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>arrow keys</i>
+                            </td>
+                            <td>Navigates between the menu items.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first item.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last item.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/speeddial/circledoc.js b/components/doc/speeddial/circledoc.js
new file mode 100644
index 0000000000..8e6350fada
--- /dev/null
+++ b/components/doc/speeddial/circledoc.js
@@ -0,0 +1,187 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function CircleDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { useRouter } from 'next/router';
+import { Toast } from 'primereact/toast';
+
+export default function CircleDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ height: '500px' }} className="flex align-items-center justify-content-center">
+                <Toast ref={toast} />
+                <SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { useRouter } from 'next/router';
+import { Toast } from 'primereact/toast';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function CircleDemo() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ height: '500px' }} className="flex align-items-center justify-content-center">
+                <Toast ref={toast} />
+                <SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items can be displayed around the button when <i>type</i> is set to <i>circle</i>. Additional <i>radius</i> property defines the radius of the circle.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div style={{ height: '500px' }} className="flex align-items-center justify-content-center">
+                    <Toast ref={toast} />
+                    <SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/customdoc.js b/components/doc/speeddial/customdoc.js
new file mode 100644
index 0000000000..d7fd9af6e5
--- /dev/null
+++ b/components/doc/speeddial/customdoc.js
@@ -0,0 +1,187 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function CustomDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<SpeedDial model={items} direction="up" transitionDelay={80} showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { useRouter } from 'next/router';
+import { Toast } from 'primereact/toast';
+
+export default function CustomDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '350px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} direction="up" transitionDelay={80} showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Toast } from 'primereact/toast';
+import { useRouter } from 'next/router';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function CustomDemo() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '350px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} direction="up" transitionDelay={80} showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SpeedDial sample with an outlined button, custom icons and <i>transitionDelay</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex align-items-end justify-content-center" style={{ height: '350px' }}>
+                    <Toast ref={toast} />
+                    <SpeedDial model={items} direction="up" transitionDelay={80} showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/importdoc.js b/components/doc/speeddial/importdoc.js
new file mode 100644
index 0000000000..5823f5cb83
--- /dev/null
+++ b/components/doc/speeddial/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { SpeedDial } from 'primereact/speeddial';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/lineardoc.js b/components/doc/speeddial/lineardoc.js
new file mode 100644
index 0000000000..fb9bc2aec8
--- /dev/null
+++ b/components/doc/speeddial/lineardoc.js
@@ -0,0 +1,199 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function LinearDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+<SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+<SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+<SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Toast } from 'primereact/toast';
+import { useRouter } from 'next/router';
+
+export default function LinearDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '500px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+                <SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+                <SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+                <SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Toast } from 'primereact/toast';
+import { MenuItem } from 'primereact/menuitem';
+import { useRouter } from 'next/router';
+
+export default function LinearDoc() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '500px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+                <SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+                <SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+                <SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SpeedDial items are defined with the <i>model</i> property based on MenuModel API. Default orientation of the items is linear and <i>direction</i> property is used to define the position of the items related to the button.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div style={{ position: 'relative', height: '500px' }}>
+                    <Toast ref={toast} />
+                    <SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+                    <SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+                    <SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+                    <SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/maskdoc.js b/components/doc/speeddial/maskdoc.js
new file mode 100644
index 0000000000..4d180f480b
--- /dev/null
+++ b/components/doc/speeddial/maskdoc.js
@@ -0,0 +1,187 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function MaskDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<SpeedDial mask model={items} radius={120} direction="up" style={{ right: 0, bottom: 0 }} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { useRouter } from 'next/router';
+import { Toast } from 'primereact/toast';
+
+export default function MaskDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '350px' }}>
+                <Toast ref={toast} />
+                <SpeedDial mask model={items} radius={120} direction="up" style={{ right: 0, bottom: 0 }} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Toast } from 'primereact/toast';
+import { useRouter } from 'next/router';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function MaskDemo() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '350px' }}>
+                <Toast ref={toast} />
+                <SpeedDial mask model={items} radius={120} direction="up" style={{ right: 0, bottom: 0 }} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Adding <i>mask</i> property displays a modal layer behind the popup items.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div style={{ position: 'relative', height: '350px' }}>
+                    <Toast ref={toast} />
+                    <SpeedDial mask model={items} radius={120} direction="up" style={{ right: 0, bottom: 0 }} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/pt/wireframe.js b/components/doc/speeddial/pt/wireframe.js
new file mode 100644
index 0000000000..0f5a997415
--- /dev/null
+++ b/components/doc/speeddial/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/speeddial.jpg" alt="speeddial" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/speeddial/quartercircledoc.js b/components/doc/speeddial/quartercircledoc.js
new file mode 100644
index 0000000000..8ef7ccc206
--- /dev/null
+++ b/components/doc/speeddial/quartercircledoc.js
@@ -0,0 +1,198 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function QuarterCircleDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<SpeedDial model={items} radius={120} type="quarter-circle" direction="up-left" style={{ right: 0, bottom: 0 }} />
+<SpeedDial model={items} radius={120} type="quarter-circle" direction="up-right" style={{ left: 0, bottom: 0 }} />
+<SpeedDial model={items} radius={120} type="quarter-circle" direction="down-left" style={{ right: 0, top: 0 }} />
+<SpeedDial model={items} radius={120} type="quarter-circle" direction="down-right" style={{ left: 0, top: 0 }} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { useRouter } from 'next/router';
+import { Toast } from 'primereact/toast';
+
+export default function QuarterCircleDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '500px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-left" style={{ right: 0, bottom: 0 }} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-right" style={{ left: 0, bottom: 0 }} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-left" style={{ right: 0, top: 0 }} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-right" style={{ left: 0, top: 0 }} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Toast } from 'primereact/toast';
+import { useRouter } from 'next/router';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function QuarterCircleDemo() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '500px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-left" style={{ right: 0, bottom: 0 }} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-right" style={{ left: 0, bottom: 0 }} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-left" style={{ right: 0, top: 0 }} />
+                <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-right" style={{ left: 0, top: 0 }} />
+            </div>
+        </div>
+    )
+}`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Setting <i>type</i> as <i>quarter-circle</i> displays the items at one of four corners of a button based on the <i>direction</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div style={{ position: 'relative', height: '500px' }}>
+                    <Toast ref={toast} />
+                    <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-left" style={{ right: 0, bottom: 0 }} />
+                    <SpeedDial model={items} radius={120} type="quarter-circle" direction="up-right" style={{ left: 0, bottom: 0 }} />
+                    <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-left" style={{ right: 0, top: 0 }} />
+                    <SpeedDial model={items} radius={120} type="quarter-circle" direction="down-right" style={{ left: 0, top: 0 }} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/semicircledoc.js b/components/doc/speeddial/semicircledoc.js
new file mode 100644
index 0000000000..accacdc559
--- /dev/null
+++ b/components/doc/speeddial/semicircledoc.js
@@ -0,0 +1,199 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function SemiCircleDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<SpeedDial model={items} radius={80} type="semi-circle" direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+<SpeedDial model={items} radius={80} type="semi-circle" direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+<SpeedDial model={items} radius={80} type="semi-circle" direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+<SpeedDial model={items} radius={80} type="semi-circle" direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { useRouter } from 'next/router';
+import { Toast } from 'primereact/toast';
+
+export default function SemiCircleDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '500px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Toast } from 'primereact/toast';
+import { useRouter } from 'next/router';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function SemiCircleDemo() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '500px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+                <SpeedDial model={items} radius={80} type="semi-circle" direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>type</i> is defined as <i>semi-circle</i>, items are displayed in a half-circle around the button.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div style={{ position: 'relative', height: '500px' }}>
+                    <Toast ref={toast} />
+                    <SpeedDial model={items} radius={80} type="semi-circle" direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+                    <SpeedDial model={items} radius={80} type="semi-circle" direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+                    <SpeedDial model={items} radius={80} type="semi-circle" direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+                    <SpeedDial model={items} radius={80} type="semi-circle" direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/speeddial/styledoc.js b/components/doc/speeddial/styledoc.js
new file mode 100644
index 0000000000..a70763a255
--- /dev/null
+++ b/components/doc/speeddial/styledoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-speeddial</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-button</td>
+                            <td>Button element of speeddial.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-mask</td>
+                            <td>Mask element of speeddial.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-list</td>
+                            <td>List of the actions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-item</td>
+                            <td>Each action item of list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/speeddial/theming/styleddoc.js b/components/doc/speeddial/theming/styleddoc.js
new file mode 100644
index 0000000000..50dd9bbbb5
--- /dev/null
+++ b/components/doc/speeddial/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-speeddial</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-button</td>
+                            <td>Button element of speeddial.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-mask</td>
+                            <td>Mask element of speeddial.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-list</td>
+                            <td>List of the actions.</td>
+                        </tr>
+                        <tr>
+                            <td>p-speeddial-item</td>
+                            <td>Each action item of list.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/speeddial/theming/tailwinddoc.js b/components/doc/speeddial/theming/tailwinddoc.js
new file mode 100644
index 0000000000..c8bbbe4f49
--- /dev/null
+++ b/components/doc/speeddial/theming/tailwinddoc.js
@@ -0,0 +1,116 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {         
+    speeddial: {
+        root: 'absolute flex',
+        button: {
+            root: ({ state }) => ({
+                className: classNames('w-16 !h-16 !rounded-full justify-center z-10', {
+                    'rotate-45': state.visible
+                })
+            }),
+            label: {
+                className: 'hidden'
+            }
+        },
+        menu: 'm-0 p-0 list-none flex items-center justify-center transition delay-200 z-20',
+        menuitem: ({ props, state }) => ({
+            className: classNames(
+                'transform transition-transform duration-200 ease-out transition-opacity duration-800',
+                !state.visible ? 'opacity-0 scale-0' : 'opacity-1 scale-100',
+                {
+                    'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
+                    'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
+                    'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
+                    'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
+                },
+                { absolute: props.type !== 'linear' }
+            )
+        }),
+        action: {
+            className: classNames('flex items-center justify-center rounded-full relative overflow-hidden', 'w-12 h-12 bg-gray-700 hover:bg-gray-800 text-white')
+        },
+        mask: ({ state }) => ({
+            className: classNames('absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0', {
+                'opacity-0': !state.visible,
+                'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.visible
+            })
+        })
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Toast } from 'primereact/toast';
+
+export default function UnstyledDemo() {
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://facebook.github.io/react/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '500px' }}>
+                <Toast ref={toast} />
+                <SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
+                <SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
+                <SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
+                <SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />
+            </div>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/speeddial/tooltipdoc.js b/components/doc/speeddial/tooltipdoc.js
new file mode 100644
index 0000000000..31f70bb673
--- /dev/null
+++ b/components/doc/speeddial/tooltipdoc.js
@@ -0,0 +1,204 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SpeedDial } from '@/components/lib/speeddial/SpeedDial';
+import { Toast } from '@/components/lib/toast/Toast';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function TooltipDoc(props) {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Tooltip target=".speeddial-bottom-right .p-speeddial-action" position="left" />
+<SpeedDial model={items} direction="up" className="speeddial-bottom-right right-0 bottom-0" buttonClassName="p-button-danger" />
+
+<Tooltip target=".speeddial-bottom-left .p-speeddial-action" />
+<SpeedDial model={items} direction="up" className="speeddial-bottom-left left-0 bottom-0" buttonClassName="p-button-help" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Tooltip } from 'primereact/tooltip';
+import { useRouter } from 'next/router';
+import { Toast } from 'primereact/toast';
+
+export default function TooltipDemo() {
+    const toast = useRef(null);
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '350px' }}>
+                <Toast ref={toast} />
+                <Tooltip target=".speeddial-bottom-right .p-speeddial-action" position="left" />
+                <SpeedDial model={items} direction="up" className="speeddial-bottom-right right-0 bottom-0" buttonClassName="p-button-danger" />
+                <Tooltip target=".speeddial-bottom-left .p-speeddial-action" />
+                <SpeedDial model={items} direction="up" className="speeddial-bottom-left left-0 bottom-0" buttonClassName="p-button-help" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { SpeedDial } from 'primereact/speeddial';
+import { Tooltip } from 'primereact/tooltip';
+import { Toast } from 'primereact/toast';
+import { useRouter } from 'next/router';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function TooltipDoc() {
+    const toast = useRef<Toast>(null);
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Add',
+            icon: 'pi pi-pencil',
+            command: () => {
+                toast.current.show({ severity: 'info', summary: 'Add', detail: 'Data Added' });
+            }
+        },
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Update', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-trash',
+            command: () => {
+                toast.current.show({ severity: 'error', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div style={{ position: 'relative', height: '350px' }}>
+                <Toast ref={toast} />
+                <Tooltip target=".speeddial-bottom-right .p-speeddial-action" position="left" />
+                <SpeedDial model={items} direction="up" className="speeddial-bottom-right right-0 bottom-0" buttonClassName="p-button-danger" />
+                <Tooltip target=".speeddial-bottom-left .p-speeddial-action" />
+                <SpeedDial model={items} direction="up" className="speeddial-bottom-left left-0 bottom-0" buttonClassName="p-button-help" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items display a tooltip on hober when a standalone <Link href="http://github.com/tooltip">Tooltip</Link> is present with a target that matches the items.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div style={{ position: 'relative', height: '350px' }}>
+                    <Toast ref={toast} />
+                    <Tooltip target=".speeddial-bottom-right .p-speeddial-action" position="left" />
+                    <SpeedDial model={items} direction="up" className="speeddial-bottom-right right-0 bottom-0" buttonClassName="p-button-danger" />
+                    <Tooltip target=".speeddial-bottom-left .p-speeddial-action" />
+                    <SpeedDial model={items} direction="up" className="speeddial-bottom-left left-0 bottom-0" buttonClassName="p-button-help" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/accessibilitydoc.js b/components/doc/splitbutton/accessibilitydoc.js
new file mode 100644
index 0000000000..706a4e555d
--- /dev/null
+++ b/components/doc/splitbutton/accessibilitydoc.js
@@ -0,0 +1,137 @@
+import { CodeHighlight } from '@/components/doc/common/codehighlight';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                SplitButton component renders two native button elements, main button uses the label property to define <i>aria-label</i> by default which can be customized with <i>buttonProps</i>. Dropdown button requires an explicit definition to
+                describe it using <i>menuButtonProps</i> option and also includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button.
+            </p>
+
+            <p>
+                The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the dropdown button.
+            </p>
+            <CodeHighlight>
+                {`
+<SplitButton buttonProps={{'aria-label': 'Default Action'}} menuButtonProps={{'aria-label': 'More Options'}} />
+`}
+            </CodeHighlight>
+
+            <h3>Main Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the button.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Menu Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the visibility of the menu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the visibility of the menu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Opens the menu and moves focus to the first item.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Opens the menu and moves focus to the last item.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Menu Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Actives the menuitem, closes the menu and sets focus on the menu button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the menu and sets focus on the menu button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next item, if it is the last one then first item receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous item, if it is the first one then last item receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first item.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last item.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/splitbutton/basicdoc.js b/components/doc/splitbutton/basicdoc.js
new file mode 100644
index 0000000000..cc0c349ac9
--- /dev/null
+++ b/components/doc/splitbutton/basicdoc.js
@@ -0,0 +1,172 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SplitButton has a default action button and a collection of additional options defined by the <i>model</i> property based on MenuModel API.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/disableddoc.js b/components/doc/splitbutton/disableddoc.js
new file mode 100644
index 0000000000..1751286b4e
--- /dev/null
+++ b/components/doc/splitbutton/disableddoc.js
@@ -0,0 +1,172 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function DisabledDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function DisabledDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} disabled />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function DisabledDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} disabled />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/iconsdoc.js b/components/doc/splitbutton/iconsdoc.js
new file mode 100644
index 0000000000..bbbd57b5b7
--- /dev/null
+++ b/components/doc/splitbutton/iconsdoc.js
@@ -0,0 +1,172 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function IconsDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function IconsDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function IconsDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SplitButton has a default action button and a collection of additional options defined by the <i>model</i> property based on MenuModel API.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/importdoc.js b/components/doc/splitbutton/importdoc.js
new file mode 100644
index 0000000000..69b04b524c
--- /dev/null
+++ b/components/doc/splitbutton/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { SplitButton } from 'primereact/splitbutton';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/loadingdoc.js b/components/doc/splitbutton/loadingdoc.js
new file mode 100644
index 0000000000..a05a18aa38
--- /dev/null
+++ b/components/doc/splitbutton/loadingdoc.js
@@ -0,0 +1,192 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef, useState } from 'react';
+
+export function LoadingDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+    const [loading, setLoading] = useState(false);
+
+    const save = () => {
+        setLoading(true);
+
+        setTimeout(() => {
+            setLoading(false);
+            toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+        }, 2000);
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} loading={loading} />
+        `,
+        javascript: `
+import React, { useRef, useState } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function LoadingDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const [loading, setLoading] = useState(false);
+
+    const save = () => {
+        setLoading(true);
+
+        setTimeout(() => {
+            setLoading(false);
+            toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+        }, 2000);
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} loading={loading} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef, useState } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function LoadingDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const save = () => {
+        setLoading(true);
+
+        setTimeout(() => {
+            setLoading(false);
+            toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+        }, 2000);
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} loading={loading} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SplitButton has a default action button and a collection of additional options defined by the <i>model</i> property based on MenuModel API.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} loading={loading} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/outlineddoc.js b/components/doc/splitbutton/outlineddoc.js
new file mode 100644
index 0000000000..8a2559d535
--- /dev/null
+++ b/components/doc/splitbutton/outlineddoc.js
@@ -0,0 +1,198 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function OutlinedDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function OutlinedDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function OutlinedDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Outlined buttons display a border without a background initially.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/pt/wireframe.js b/components/doc/splitbutton/pt/wireframe.js
new file mode 100644
index 0000000000..77fc38f3f2
--- /dev/null
+++ b/components/doc/splitbutton/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/splitbutton.jpg" alt="splitbutton" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/splitbutton/raiseddoc.js b/components/doc/splitbutton/raiseddoc.js
new file mode 100644
index 0000000000..4547e57cd6
--- /dev/null
+++ b/components/doc/splitbutton/raiseddoc.js
@@ -0,0 +1,198 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function RaisedDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function RaisedDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function RaisedDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Raised buttons display a shadow to indicate elevation.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/raisedtextdoc.js b/components/doc/splitbutton/raisedtextdoc.js
new file mode 100644
index 0000000000..7897cbcdcf
--- /dev/null
+++ b/components/doc/splitbutton/raisedtextdoc.js
@@ -0,0 +1,194 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function RaisedTextDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function RaisedTextDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function RaisedTextDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Text buttons can be displayed as raised as well for elevation.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/roundeddoc.js b/components/doc/splitbutton/roundeddoc.js
new file mode 100644
index 0000000000..a5684656e2
--- /dev/null
+++ b/components/doc/splitbutton/roundeddoc.js
@@ -0,0 +1,198 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function RoundedDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function RoundedDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function RoundedDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Rounded buttons have a circular border radius.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/severitydoc.js b/components/doc/splitbutton/severitydoc.js
new file mode 100644
index 0000000000..43d2e700d2
--- /dev/null
+++ b/components/doc/splitbutton/severitydoc.js
@@ -0,0 +1,198 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function SeverityDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function SeverityDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function SeverityDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Severity defines the type of button.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/sizesdoc.js b/components/doc/splitbutton/sizesdoc.js
new file mode 100644
index 0000000000..7eae98a21e
--- /dev/null
+++ b/components/doc/splitbutton/sizesdoc.js
@@ -0,0 +1,180 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function SizesDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function SizesDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function SizesDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SplitButton provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap align-items-center justify-content-center gap-3">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/styledoc.js b/components/doc/splitbutton/styledoc.js
new file mode 100644
index 0000000000..f4126ceb5d
--- /dev/null
+++ b/components/doc/splitbutton/styledoc.js
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-splitbutton</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitbutton-button</td>
+                            <td>Dropdown button.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tieredmenu</td>
+                            <td>Overlay menu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/templatedoc.js b/components/doc/splitbutton/templatedoc.js
new file mode 100644
index 0000000000..2ed120cf78
--- /dev/null
+++ b/components/doc/splitbutton/templatedoc.js
@@ -0,0 +1,160 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function TemplateDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function TemplateDemo() {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function TemplateDemo() {
+    const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://react.dev/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    SplitButton has a <i>label</i> and <i>icon</i> properties that allows to define the main button.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/textdoc.js b/components/doc/splitbutton/textdoc.js
new file mode 100644
index 0000000000..3044e6f8a2
--- /dev/null
+++ b/components/doc/splitbutton/textdoc.js
@@ -0,0 +1,194 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+export function TextDoc(props) {
+    const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function TextDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function TextDemo() {
+    //const router = useRouter();
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Text buttons are displayed as textual elements.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-3">
+                <Toast ref={toast} />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/theming/styleddoc.js b/components/doc/splitbutton/theming/styleddoc.js
new file mode 100644
index 0000000000..9312ed1df8
--- /dev/null
+++ b/components/doc/splitbutton/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-splitbutton</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitbutton-button</td>
+                            <td>Dropdown button.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu</td>
+                            <td>Overlay menu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/splitbutton/theming/tailwinddoc.js b/components/doc/splitbutton/theming/tailwinddoc.js
new file mode 100644
index 0000000000..7b21d973b8
--- /dev/null
+++ b/components/doc/splitbutton/theming/tailwinddoc.js
@@ -0,0 +1,118 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+const Tailwind = {  
+    splitbutton: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised })
+        }),
+        button: {
+            root: ({ parent }) => ({
+                className: classNames('rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded })
+            }),
+            icon: 'mr-2'
+        },
+        menu: {
+            className: classNames('outline-none', 'm-0 p-0 list-none')
+        },
+        menulist: 'relative',
+        menubutton: {
+            root: ({ parent }) => ({
+                className: classNames('rounded-l-none', { 'rounded-r-full': parent.props.rounded })
+            }),
+            label: 'hidden'
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useRef } from 'react';
+//import { useRouter } from 'next/router';
+import { SplitButton } from 'primereact/splitbutton';
+import { Toast } from 'primereact/toast';
+
+export default function UnstyledDemo() {
+    //const router = useRouter();
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Updated', detail: 'Data Updated' });
+            }
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' });
+            }
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/';
+            }
+        },
+        {
+            label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const save = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Data Saved' });
+    };
+
+    return (
+        <div className="card flex justify-content-center flex-wrap">
+            <Toast ref={toast}></Toast>
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" className="mb-2" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" className="mb-2" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/splitter/accessibilitydoc.js b/components/doc/splitter/accessibilitydoc.js
new file mode 100644
index 0000000000..f9a6ddde35
--- /dev/null
+++ b/components/doc/splitter/accessibilitydoc.js
@@ -0,0 +1,74 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Splitter bar defines <i>separator</i> as the role with <i>aria-orientation</i> set to either horizontal or vertical.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the splitter bar.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter down.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter up.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter to the left.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves a vertical splitter to the right.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Maximizes the primary panel.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Minimizes the primary panel.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles the primary panel between minimum and maximum sizes.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/splitter/horizontaldoc.js b/components/doc/splitter/horizontaldoc.js
new file mode 100644
index 0000000000..98aedf2fa9
--- /dev/null
+++ b/components/doc/splitter/horizontaldoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Splitter, SplitterPanel } from '@/components/lib/splitter/Splitter';
+
+export function HorizontalDoc(props) {
+    const code = {
+        basic: `
+<Splitter style={{ height: '300px' }}>
+    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+</Splitter>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function HorizontalDemo() {
+    return (
+        <Splitter style={{ height: '300px' }}>
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+        </Splitter>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function HorizontalDemo() {
+    return (
+        <Splitter style={{ height: '300px' }}>
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+        </Splitter>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Splitter requires two SplitterPanel components as children which are displayed horizontally by default.</p>
+            </DocSectionText>
+            <div className="card">
+                <Splitter style={{ height: '300px' }}>
+                    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+                    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+                </Splitter>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitter/importdoc.js b/components/doc/splitter/importdoc.js
new file mode 100644
index 0000000000..94499cdaa1
--- /dev/null
+++ b/components/doc/splitter/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/splitter/nesteddoc.js b/components/doc/splitter/nesteddoc.js
new file mode 100644
index 0000000000..d0f366835d
--- /dev/null
+++ b/components/doc/splitter/nesteddoc.js
@@ -0,0 +1,127 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Splitter, SplitterPanel } from '@/components/lib/splitter/Splitter';
+
+export function NestedDoc(props) {
+    const code = {
+        basic: `
+<Splitter style={{ height: '300px' }}>
+    <SplitterPanel className="flex align-items-center justify-content-center" size={20} minSize={10}>
+        Panel 1
+    </SplitterPanel>
+    <SplitterPanel size={80}>
+        <Splitter layout="vertical">
+            <SplitterPanel className="flex align-items-center justify-content-center" size={15}>
+                Panel 2
+            </SplitterPanel>
+            <SplitterPanel size={85}>
+                <Splitter>
+                    <SplitterPanel className="flex align-items-center justify-content-center" size={20}>
+                        Panel 3
+                    </SplitterPanel>
+                    <SplitterPanel className="flex align-items-center justify-content-center" size={80}>
+                        Panel 4
+                     </SplitterPanel>
+                </Splitter>
+             </SplitterPanel>
+        </Splitter>
+    </SplitterPanel>
+</Splitter>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function NestedDemo() {
+    return (
+        <Splitter style={{ height: '300px' }}>
+            <SplitterPanel className="flex align-items-center justify-content-center" size={20} minSize={10}>
+                Panel 1
+            </SplitterPanel>
+            <SplitterPanel size={80}>
+                <Splitter layout="vertical">
+                    <SplitterPanel className="flex align-items-center justify-content-center" size={15}>
+                        Panel 2
+                    </SplitterPanel>
+                    <SplitterPanel size={85}>
+                        <Splitter>
+                            <SplitterPanel className="flex align-items-center justify-content-center" size={20}>
+                                Panel 3
+                            </SplitterPanel>
+                            <SplitterPanel className="flex align-items-center justify-content-center" size={80}>
+                                Panel 4
+                            </SplitterPanel>
+                        </Splitter>
+                    </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+        </Splitter>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function NestedDemo() {
+    return (
+        <Splitter style={{ height: '300px' }}>
+            <SplitterPanel className="flex align-items-center justify-content-center" size={20} minSize={10}>
+                Panel 1
+            </SplitterPanel>
+            <SplitterPanel size={80}>
+                <Splitter layout="vertical">
+                    <SplitterPanel className="flex align-items-center justify-content-center" size={15}>
+                        Panel 2
+                    </SplitterPanel>
+                    <SplitterPanel size={85}>
+                        <Splitter>
+                            <SplitterPanel className="flex align-items-center justify-content-center" size={20}>
+                                Panel 3
+                            </SplitterPanel>
+                            <SplitterPanel className="flex align-items-center justify-content-center" size={80}>
+                                Panel 4
+                            </SplitterPanel>
+                        </Splitter>
+                    </SplitterPanel>
+                </Splitter>
+            </SplitterPanel>
+        </Splitter>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Splitters can be combined to create advanced layouts.</p>
+            </DocSectionText>
+            <div className="card">
+                <Splitter style={{ height: '300px' }}>
+                    <SplitterPanel className="flex align-items-center justify-content-center" size={20} minSize={10}>
+                        Panel 1
+                    </SplitterPanel>
+                    <SplitterPanel size={80}>
+                        <Splitter layout="vertical">
+                            <SplitterPanel className="flex align-items-center justify-content-center" size={15}>
+                                Panel 2
+                            </SplitterPanel>
+                            <SplitterPanel size={85}>
+                                <Splitter>
+                                    <SplitterPanel className="flex align-items-center justify-content-center" size={20}>
+                                        Panel 3
+                                    </SplitterPanel>
+                                    <SplitterPanel className="flex align-items-center justify-content-center" size={80}>
+                                        Panel 4
+                                    </SplitterPanel>
+                                </Splitter>
+                            </SplitterPanel>
+                        </Splitter>
+                    </SplitterPanel>
+                </Splitter>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitter/pt/wireframe.js b/components/doc/splitter/pt/wireframe.js
new file mode 100644
index 0000000000..d53085e299
--- /dev/null
+++ b/components/doc/splitter/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/splitter.jpg" alt="splitter" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/splitter/sizedoc.js b/components/doc/splitter/sizedoc.js
new file mode 100644
index 0000000000..96a5801b72
--- /dev/null
+++ b/components/doc/splitter/sizedoc.js
@@ -0,0 +1,62 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Splitter, SplitterPanel } from '@/components/lib/splitter/Splitter';
+
+export function SizeDoc(props) {
+    const code = {
+        basic: `
+<Splitter style={{ height: '300px' }}>
+    <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>Panel 1</SplitterPanel>
+    <SplitterPanel className="flex align-items-center justify-content-center" size={75}>Panel 2</SplitterPanel>
+</Splitter>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function SizeDemo() {
+    return (
+        <Splitter style={{ height: '300px' }}>
+            <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>Panel 1</SplitterPanel>
+            <SplitterPanel className="flex align-items-center justify-content-center" size={75}>Panel 2</SplitterPanel>
+        </Splitter>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function SizeDemo() {
+    return (
+        <Splitter style={{ height: '300px' }}>
+            <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>Panel 1</SplitterPanel>
+            <SplitterPanel className="flex align-items-center justify-content-center" size={75}>Panel 2</SplitterPanel>
+        </Splitter>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Initial dimension of a panel is percentage based and defined using the <i>size</i> property. In addition,
+                    <i>minSize</i> is provided to set a minimum value during a resize.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Splitter style={{ height: '300px' }}>
+                    <SplitterPanel className="flex align-items-center justify-content-center" size={25} minSize={10}>
+                        Panel 1
+                    </SplitterPanel>
+                    <SplitterPanel className="flex align-items-center justify-content-center" size={75}>
+                        Panel 2
+                    </SplitterPanel>
+                </Splitter>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/splitter/styledoc.js b/components/doc/splitter/styledoc.js
new file mode 100644
index 0000000000..f8a865d12a
--- /dev/null
+++ b/components/doc/splitter/styledoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-splitter</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter</td>
+                            <td>Container element during resize.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-horizontal</td>
+                            <td>Container element with horizontal layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-vertical</td>
+                            <td>Container element with vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-panel</td>
+                            <td>Splitter panel element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-gutter</td>
+                            <td>Gutter element to use when resizing the panels.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-gutter-handle</td>
+                            <td>Handl element of the gutter.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/splitter/theming/styleddoc.js b/components/doc/splitter/theming/styleddoc.js
new file mode 100644
index 0000000000..3d929ae326
--- /dev/null
+++ b/components/doc/splitter/theming/styleddoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-splitter</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter</td>
+                            <td>Container element during resize.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-horizontal</td>
+                            <td>Container element with horizontal layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-vertical</td>
+                            <td>Container element with vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-panel</td>
+                            <td>Splitter panel element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-gutter</td>
+                            <td>Gutter element to use when resizing the panels.</td>
+                        </tr>
+                        <tr>
+                            <td>p-splitter-gutter-handle</td>
+                            <td>Handl element of the gutter.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/splitter/theming/tailwinddoc.js b/components/doc/splitter/theming/tailwinddoc.js
new file mode 100644
index 0000000000..9c69d87ab6
--- /dev/null
+++ b/components/doc/splitter/theming/tailwinddoc.js
@@ -0,0 +1,64 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    splitter: {
+        root: ({ context }) => ({
+            className: classNames('bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80', {
+                'border border-solid border-gray-300 dark:border-blue-900/40': !context.nested
+            })
+        }),
+        splitterpanel: {
+            root: 'flex grow'
+        },
+        gutter: ({ props }) => ({
+            className: classNames('flex items-center justify-center shrink-0', 'transition-all duration-200 bg-gray-100 dark:bg-gray-800', {
+                'cursor-col-resize': props.layout == 'horizontal',
+                'cursor-row-resize': props.layout !== 'horizontal'
+            })
+        }),
+        gutterhandler: ({ props }) => ({
+            className: classNames('bg-gray-300 dark:bg-gray-600 transition-all duration-200', {
+                'h-7': props.layout == 'horizontal',
+                'w-7 h-2': props.layout !== 'horizontal'
+            })
+        })
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function UnstyledDemo() {
+    return (
+        <Splitter style={{ height: '300px' }}>
+            <SplitterPanel className="flex items-center justify-center">Panel 1</SplitterPanel>
+            <SplitterPanel className="flex items-center justify-center">Panel 2</SplitterPanel>
+        </Splitter>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/splitter/verticaldoc.js b/components/doc/splitter/verticaldoc.js
new file mode 100644
index 0000000000..8a19903709
--- /dev/null
+++ b/components/doc/splitter/verticaldoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Splitter, SplitterPanel } from '@/components/lib/splitter/Splitter';
+
+export function VerticalDoc(props) {
+    const code = {
+        basic: `
+<Splitter style={{ height: '300px' }} layout="vertical">
+    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+</Splitter>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function VerticalDemo() {
+    return (
+        <Splitter style={{ height: '300px' }} layout="vertical">
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+        </Splitter>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Splitter, SplitterPanel } from 'primereact/splitter';
+
+export default function VerticalDemo() {
+    return (
+        <Splitter style={{ height: '300px' }} layout="vertical">
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+            <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+        </Splitter>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Panels are displayed as stacked by setting the <i>layout</i> to <i>vertical</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Splitter style={{ height: '300px' }} layout="vertical">
+                    <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+                    <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+                </Splitter>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/stepper/accessibilitydoc.js b/components/doc/stepper/accessibilitydoc.js
new file mode 100644
index 0000000000..70a18a6cf9
--- /dev/null
+++ b/components/doc/stepper/accessibilitydoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Stepper container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the Stepper. Each stepper header has a
+                <i>tab</i> role and <i>aria-controls</i> to refer to the corresponding stepper content element. The content element of each stepper has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of the header and
+                <i>aria-labelledby</i> reference to the header as the accessible name.
+            </p>
+
+            <h3>Tab Header Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused stepper header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused stepper header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/stepper/basicdoc.js b/components/doc/stepper/basicdoc.js
new file mode 100644
index 0000000000..08d6f1c0c8
--- /dev/null
+++ b/components/doc/stepper/basicdoc.js
@@ -0,0 +1,167 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const stepperRef = useRef(null);
+
+    const code = {
+        basic: `
+<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+    <StepperPanel header="Header I">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+        </div>
+        <div className="flex pt-4 justify-content-end">
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+        </div>
+        <div className="flex pt-4 justify-content-between">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+        </div>
+        <div className="flex pt-4 justify-content-start">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+        </div>
+    </StepperPanel>
+</Stepper>
+        `,
+        javascript: `
+import React, { useRef } from "react";
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from "react";
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead <i>prevCallback</i> and{' '}
+                    <i>nextCallback</i> events should be bound to your custom UI elements.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
+                    <StepperPanel header="Header I">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-end">
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header II">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-between">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header III">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-start">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        </div>
+                    </StepperPanel>
+                </Stepper>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/stepper/headerdoc.js b/components/doc/stepper/headerdoc.js
new file mode 100644
index 0000000000..0bd13bd38e
--- /dev/null
+++ b/components/doc/stepper/headerdoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { useRef } from 'react';
+
+export function HeaderDoc(props) {
+    const stepperRef = useRef([]);
+
+    const code = {
+        basic: `
+<h5>Position top</h5>
+<Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="top">
+    <StepperPanel header="Header I"></StepperPanel>
+    <StepperPanel header="Header II"></StepperPanel>
+    <StepperPanel header="Header III"></StepperPanel>
+</Stepper>
+<h5>Position right</h5>
+<Stepper ref={(ref) => (stepperRef.current[0] = ref)} headerPosition="right">
+    <StepperPanel header="Header I"></StepperPanel>
+    <StepperPanel header="Header II"></StepperPanel>
+    <StepperPanel header="Header III"></StepperPanel>
+</Stepper>
+<h5>Position left</h5>
+<Stepper ref={(ref) => (stepperRef.current[1] = ref)} headerPosition="left">
+    <StepperPanel header="Header I"></StepperPanel>
+    <StepperPanel header="Header II"></StepperPanel>
+    <StepperPanel header="Header III"></StepperPanel>
+</Stepper>
+<h5>Position bottom</h5>
+<Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="bottom">
+    <StepperPanel header="Header I"></StepperPanel>
+    <StepperPanel header="Header II"></StepperPanel>
+    <StepperPanel header="Header III"></StepperPanel>
+</Stepper>
+        `,
+        javascript: `
+import { useRef } from 'react';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+        <h5>Position top</h5>
+        <Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="top">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+        <h5>Position right</h5>
+        <Stepper ref={(ref) => (stepperRef.current[0] = ref)} headerPosition="right">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+        <h5>Position left</h5>
+        <Stepper ref={(ref) => (stepperRef.current[1] = ref)} headerPosition="left">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+        <h5>Position bottom</h5>
+        <Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="bottom">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+    );
+}
+        `,
+        typescript: `
+import { useRef } from 'react';
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+        <h5>Position top</h5>
+        <Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="top">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+        <h5>Position right</h5>
+        <Stepper ref={(ref) => (stepperRef.current[0] = ref)} headerPosition="right">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+        <h5>Position left</h5>
+        <Stepper ref={(ref) => (stepperRef.current[1] = ref)} headerPosition="left">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+        <h5>Position bottom</h5>
+        <Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="bottom">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Header position of the stepper can be customized using the <i>headerPosition</i> property. Default value is <i>right</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column justify-content-center">
+                <h5>Position top</h5>
+                <Stepper ref={(ref) => (stepperRef.current[0] = ref)} headerPosition="top">
+                    <StepperPanel header="Header I"></StepperPanel>
+                    <StepperPanel header="Header II"></StepperPanel>
+                    <StepperPanel header="Header III"></StepperPanel>
+                </Stepper>
+                <h5>Position right</h5>
+                <Stepper ref={(ref) => (stepperRef.current[1] = ref)} headerPosition="right">
+                    <StepperPanel header="Header I"></StepperPanel>
+                    <StepperPanel header="Header II"></StepperPanel>
+                    <StepperPanel header="Header III"></StepperPanel>
+                </Stepper>
+                <h5>Position left</h5>
+                <Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="left">
+                    <StepperPanel header="Header I"></StepperPanel>
+                    <StepperPanel header="Header II"></StepperPanel>
+                    <StepperPanel header="Header III"></StepperPanel>
+                </Stepper>
+                <h5>Position bottom</h5>
+                <Stepper ref={(ref) => (stepperRef.current[3] = ref)} headerPosition="bottom">
+                    <StepperPanel header="Header I"></StepperPanel>
+                    <StepperPanel header="Header II"></StepperPanel>
+                    <StepperPanel header="Header III"></StepperPanel>
+                </Stepper>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.forEach((ref) => ref.prevCallback())} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.forEach((ref) => ref.nextCallback())} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/stepper/importdoc.js b/components/doc/stepper/importdoc.js
new file mode 100644
index 0000000000..0320f85e7b
--- /dev/null
+++ b/components/doc/stepper/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/stepper/lineardoc.js b/components/doc/stepper/lineardoc.js
new file mode 100644
index 0000000000..85a5b1d5d5
--- /dev/null
+++ b/components/doc/stepper/lineardoc.js
@@ -0,0 +1,166 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { useRef } from 'react';
+
+export function LinearDoc(props) {
+    const stepperRef = useRef(null);
+
+    const code = {
+        basic: `
+<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} linear>
+    <StepperPanel header="Header I">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+        </div>
+        <div className="flex pt-4 justify-content-end">
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+        </div>
+        <div className="flex pt-4 justify-content-between">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+        </div>
+        <div className="flex pt-4 justify-content-start">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+        </div>
+    </StepperPanel>
+</Stepper>
+        `,
+        javascript: `
+import React, { useRef } from "react";
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} linear>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from "react";
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+    <div className="card flex justify-content-center">
+        <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} linear>
+            <StepperPanel header="Header I">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                </div>
+                <div className="flex pt-4 justify-content-end">
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header II">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                </div>
+                <div className="flex pt-4 justify-content-between">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                </div>
+            </StepperPanel>
+            <StepperPanel header="Header III">
+                <div className="flex flex-column h-12rem">
+                    <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                </div>
+                <div className="flex pt-4 justify-content-start">
+                    <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                </div>
+            </StepperPanel>
+        </Stepper>
+    </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>linear</i> property is present, current step must be completed in order to move to the next step.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} linear>
+                    <StepperPanel header="Header I">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-end">
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header II">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-between">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header III">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                        </div>
+                        <div className="flex pt-4 justify-content-start">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        </div>
+                    </StepperPanel>
+                </Stepper>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/stepper/pt/wireframe.js b/components/doc/stepper/pt/wireframe.js
new file mode 100644
index 0000000000..b8893b0902
--- /dev/null
+++ b/components/doc/stepper/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="pt_image" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/stepper/theming/styleddoc.js b/components/doc/stepper/theming/styleddoc.js
new file mode 100644
index 0000000000..6e4e8330af
--- /dev/null
+++ b/components/doc/stepper/theming/styleddoc.js
@@ -0,0 +1,83 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc() {
+    return (
+        <>
+            <DocSectionText id="styled" label="Styled">
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-stepper</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-horizontal</td>
+                            <td>Container element with horizontal layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-vertical</td>
+                            <td>Container element with vertical layout.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-nav</td>
+                            <td>Container element of navigator.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-panels</td>
+                            <td>Container element of stepper panel elements.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-panel</td>
+                            <td>Container element of stepper panel element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-header</td>
+                            <td>Container element of stepper header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-action</td>
+                            <td>Container element of stepper action.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-number</td>
+                            <td>Container element of stepper number.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-title</td>
+                            <td>Container element of stepper title.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-separator</td>
+                            <td>Container element of stepper separator.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-toggleable-content</td>
+                            <td>Container element of stepper toggleable content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-content</td>
+                            <td>Container element of stepper content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-start</td>
+                            <td>Start content container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-stepper-end</td>
+                            <td>End content container.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/stepper/theming/tailwinddoc.js b/components/doc/stepper/theming/tailwinddoc.js
new file mode 100644
index 0000000000..cd547e8a63
--- /dev/null
+++ b/components/doc/stepper/theming/tailwinddoc.js
@@ -0,0 +1,13 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function TailwindDoc() {
+    return (
+        <DocSectionText id="style" label="Style">
+            Visit{' '}
+            <a href="https://github.com/primefaces/primereact-tailwind" target="_blank" rel="noopener noreferrer">
+                Tailwind Presets
+            </a>{' '}
+            project for detailed documentation, examples and ready-to-use presets about how to style PrimeReact components with Tailwind CSS.
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/stepper/verticaldoc.js b/components/doc/stepper/verticaldoc.js
new file mode 100644
index 0000000000..6e1caaa932
--- /dev/null
+++ b/components/doc/stepper/verticaldoc.js
@@ -0,0 +1,166 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Stepper } from '@/components/lib/stepper/Stepper';
+import { StepperPanel } from '@/components/lib/stepperpanel/StepperPanel';
+import { useRef } from 'react';
+
+export function VerticalDoc(props) {
+    const stepperRef = useRef(null);
+
+    const code = {
+        basic: `
+<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+    <StepperPanel header="Header I">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+        </div>
+        <div className="flex py-4">
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header II">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+        </div>
+        <div className="flex py-4 gap-2">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+        </div>
+    </StepperPanel>
+    <StepperPanel header="Header III">
+        <div className="flex flex-column h-12rem">
+            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+        </div>
+        <div className="flex py-4">
+            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+        </div>
+    </StepperPanel>
+</Stepper>
+        `,
+        javascript: `
+import React, { useRef } from "react";
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+        <div className="card">
+            <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+                <StepperPanel header="Header I">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header II">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div className="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header III">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    </div>
+                </StepperPanel>
+            </Stepper>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from "react";
+import { Stepper } from 'primereact/stepper';
+import { StepperPanel } from 'primereact/stepperpanel';
+import { Button } from 'primereact/button';
+
+export default function BasicDemo() {
+    const stepperRef = useRef(null);
+
+    return (
+        <div className="card">
+            <Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
+                <StepperPanel header="Header I">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header II">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                    </div>
+                    <div className="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                    </div>
+                </StepperPanel>
+                <StepperPanel header="Header III">
+                    <div className="flex flex-column h-12rem">
+                        <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                    </div>
+                    <div className="flex py-4">
+                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                    </div>
+                </StepperPanel>
+            </Stepper>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Layout of the Stepper is configured with the <i>orientation</i> property that accepts <i>horizontal</i> and <i>vertical</i> as available options.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Stepper ref={stepperRef} orientation="vertical">
+                    <StepperPanel header="Header I">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
+                        </div>
+                        <div className="flex py-4">
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header II">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
+                        </div>
+                        <div className="flex py-4 gap-2">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
+                        </div>
+                    </StepperPanel>
+                    <StepperPanel header="Header III">
+                        <div className="flex flex-column h-12rem">
+                            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
+                        </div>
+                        <div className="flex py-4">
+                            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
+                        </div>
+                    </StepperPanel>
+                </Stepper>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/steps/accessibilitydoc.js b/components/doc/steps/accessibilitydoc.js
new file mode 100644
index 0000000000..2ee41b5b3d
--- /dev/null
+++ b/components/doc/steps/accessibilitydoc.js
@@ -0,0 +1,69 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Steps component uses the <i>nav</i> element and since any attribute is passed to the root implicitly <i>aria-labelledby</i> or <i>aria-label</i> can be used to describe the component. Inside an ordered list is used where the current
+                step item defines <i>aria-current</i> as "step".
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused step if readonly is not enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused step if readonly is not enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next step if readonly is not enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous step if readonly is not enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first step if readonly is not enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last step if readonly is not enabled.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/steps/basicdoc.js b/components/doc/steps/basicdoc.js
new file mode 100644
index 0000000000..0e8e4cade3
--- /dev/null
+++ b/components/doc/steps/basicdoc.js
@@ -0,0 +1,86 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Steps } from '@/components/lib/steps/Steps';
+
+export function BasicDoc(props) {
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Steps model={items} />
+`,
+        javascript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+
+export default function BasicDemo() {
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Steps requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Steps model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/steps/controlleddoc.js b/components/doc/steps/controlleddoc.js
new file mode 100644
index 0000000000..9d1ed261e1
--- /dev/null
+++ b/components/doc/steps/controlleddoc.js
@@ -0,0 +1,109 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Steps } from '@/components/lib/steps/Steps';
+import { Button } from '@/components/lib/button/Button';
+import { useState } from 'react';
+
+export function ControlledDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Steps model={items} />
+`,
+        javascript: `
+import React, { useState } from 'react'; 
+import { Steps } from 'primereact/steps';
+import { Button } from 'primereact/button';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+            </div>
+            <Steps model={items} activeIndex={activeIndex} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react'; 
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+import { Button } from 'primereact/button';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const items: MenuItem[] = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+
+    return (
+        <div className="card">
+            <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+            </div>
+            <Steps model={items} activeIndex={activeIndex} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Steps can be controlled programmatically using <i>activeIndex</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                    <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                    <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                    <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+                </div>
+                <Steps model={items} activeIndex={activeIndex} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/steps/importdoc.js b/components/doc/steps/importdoc.js
new file mode 100644
index 0000000000..763b1ff067
--- /dev/null
+++ b/components/doc/steps/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Steps } from 'primereact/steps';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/steps/interactivedoc.js b/components/doc/steps/interactivedoc.js
new file mode 100644
index 0000000000..38281bfe50
--- /dev/null
+++ b/components/doc/steps/interactivedoc.js
@@ -0,0 +1,144 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Steps } from '@/components/lib/steps/Steps';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function InteractiveDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(1);
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Personal',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'First Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Seat',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Second Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Payment',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Third Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Confirmation',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Last Step', detail: event.item.label });
+            }
+        }
+    ];
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
+`,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { Steps } from 'primereact/steps';
+import { Toast } from 'primereact/toast';
+
+export default function InteractiveDemo() {
+    const [activeIndex, setActiveIndex] = useState(1);
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Personal',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'First Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Seat',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Second Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Payment',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Third Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Confirmation',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Last Step', detail: event.item.label });
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Toast ref={toast}></Toast>
+            <Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { Steps } from 'primereact/steps';
+import { Toast } from 'primereact/toast';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function InteractiveDemo() {
+    const [activeIndex, setActiveIndex] = useState<number>(1);
+    const toast = useRef(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Personal',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'First Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Seat',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Second Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Payment',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Third Step', detail: event.item.label });
+            }
+        },
+        {
+            label: 'Confirmation',
+            command: (event) => {
+                toast.current.show({ severity: 'info', summary: 'Last Step', detail: event.item.label });
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Toast ref={toast}></Toast>
+            <Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    In order to add interactivity to the component, disable <i>readOnly</i> and use a binding to <i>activeIndex</i> along with <i>onSelect</i> to control the Steps.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast} />
+                <Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/steps/lineardoc.js b/components/doc/steps/lineardoc.js
new file mode 100644
index 0000000000..b6a174c276
--- /dev/null
+++ b/components/doc/steps/lineardoc.js
@@ -0,0 +1,86 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Steps } from '@/components/lib/steps/Steps';
+
+export function LinearDoc(props) {
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    const code = {
+        basic: `
+<Steps readOnly model={items} />
+`,
+        javascript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+
+export default function LinearDemo() {
+    const items = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps readOnly model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function LinearDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Personal Info'
+        },
+        {
+            label: 'Reservation'
+        },
+        {
+            label: 'Review'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps readOnly model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Steps is linear by default to enforce completion of a previus step to proceed, set <i>readOnly</i> as false for non-linear mode.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Steps readOnly model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/steps/pt/wireframe.js b/components/doc/steps/pt/wireframe.js
new file mode 100644
index 0000000000..0a60850974
--- /dev/null
+++ b/components/doc/steps/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/steps.jpg" alt="steps" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/steps/styledoc.js b/components/doc/steps/styledoc.js
new file mode 100644
index 0000000000..3a906e9b3a
--- /dev/null
+++ b/components/doc/steps/styledoc.js
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-steps</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-steps-item</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-steps-number</td>
+                            <td>Number of menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-steps-title</td>
+                            <td>Label of menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/steps/templatedoc.js b/components/doc/steps/templatedoc.js
new file mode 100644
index 0000000000..dd18a8bcea
--- /dev/null
+++ b/components/doc/steps/templatedoc.js
@@ -0,0 +1,150 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Steps } from '@/components/lib/steps/Steps';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const itemRenderer = (item, itemIndex) => {
+        const isActiveItem = activeIndex === itemIndex;
+        const backgroundColor = isActiveItem ? 'var(--primary-color)' : 'var(--surface-b)';
+        const textColor = isActiveItem ? 'var(--surface-b)' : 'var(--text-color-secondary)';
+
+        return (
+            <span
+                className="inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer"
+                style={{ backgroundColor: backgroundColor, color: textColor, marginTop: '-25px' }}
+                onClick={() => setActiveIndex(itemIndex)}
+            >
+                <i className={`${item.icon} text-xl`} />
+            </span>
+        );
+    };
+
+    const items = [
+        {
+            icon: 'pi pi-user',
+            template: (item) => itemRenderer(item, 0)
+        },
+        {
+            icon: 'pi pi-calendar',
+            template: (item) => itemRenderer(item, 1)
+        },
+        {
+            icon: 'pi pi-check',
+            template: (item) => itemRenderer(item, 2)
+        }
+    ];
+
+    const code = {
+        basic: `
+<Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />
+`,
+        javascript: `
+import React, { useState } from 'react'; 
+import { Steps } from 'primereact/steps';
+
+export default function TemplateDemo() {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const itemRenderer = (item, itemIndex) => {
+        const isActiveItem = activeIndex === itemIndex;
+        const backgroundColor = isActiveItem ? 'var(--primary-color)' : 'var(--surface-b)';
+        const textColor = isActiveItem ? 'var(--surface-b)' : 'var(--text-color-secondary)';
+
+        return (
+            <span
+                className="inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer"
+                style={{ backgroundColor: backgroundColor, color: textColor, marginTop: '-25px' }}
+                onClick={() => setActiveIndex(itemIndex)}
+            >
+                <i className={\`\${item.icon} text-xl\`} />
+            </span>
+        );
+    };
+
+    const items = [
+        {
+            icon: 'pi pi-user',
+            template: (item) => itemRenderer(item, 0)
+        },
+        {
+            icon: 'pi pi-calendar',
+            template: (item) => itemRenderer(item, 1)
+        },
+        {
+            icon: 'pi pi-check',
+            template: (item) => itemRenderer(item, 2)
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react'; 
+import { Steps } from 'primereact/steps';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function TemplateDemo() {
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+
+    const itemRenderer = (item, itemIndex) => {
+        const isActiveItem = activeIndex === itemIndex;
+        const backgroundColor = isActiveItem ? 'var(--primary-color)' : 'var(--surface-b)';
+        const textColor = isActiveItem ? 'var(--surface-b)' : 'var(--text-color-secondary)';
+
+        return (
+            <span
+                className="inline-flex align-items-center justify-content-center align-items-center border-circle border-primary border-1 h-3rem w-3rem z-1 cursor-pointer"
+                style={{ backgroundColor: backgroundColor, color: textColor, marginTop: '-25px' }}
+                onClick={() => setActiveIndex(itemIndex)}
+            >
+                <i className={\`\${item.icon} text-xl\`} />
+            </span>
+        );
+    };
+
+    const items: MenuItem[] = [
+        {
+            icon: 'pi pi-user',
+            template: (item) => itemRenderer(item, 0)
+        },
+        {
+            icon: 'pi pi-calendar',
+            template: (item) => itemRenderer(item, 1)
+        },
+        {
+            icon: 'pi pi-check',
+            template: (item) => itemRenderer(item, 2)
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Steps offers item customization with the items <i>template</i> property that receives the item instance and returns an element.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/steps/theming/styleddoc.js b/components/doc/steps/theming/styleddoc.js
new file mode 100644
index 0000000000..8b57cb1854
--- /dev/null
+++ b/components/doc/steps/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-steps</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-steps-item</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-steps-number</td>
+                            <td>Number of menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-steps-title</td>
+                            <td>Label of menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/steps/theming/tailwinddoc.js b/components/doc/steps/theming/tailwinddoc.js
new file mode 100644
index 0000000000..68fb3658c3
--- /dev/null
+++ b/components/doc/steps/theming/tailwinddoc.js
@@ -0,0 +1,79 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {    
+    steps: {
+        root: 'relative',
+        menu: 'p-0 m-0 list-none flex',
+        menuitem: {
+            className: classNames(
+                'relative flex justify-center flex-1 overflow-hidden',
+                'before:border-t before:border-gray-300 before:dark:border-blue-900/40 before:w-full before:absolute before:top-1/4 before:left-0 before:transform before:-translate-y-1/2'
+            )
+        },
+        action: {
+            className: classNames(
+                'inline-flex flex-col items-center overflow-hidden',
+                'transition-shadow rounded-md bg-white dark:bg-transparent',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        step: {
+            className: classNames('flex items-center justify-center', 'text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900 w-[2rem] h-[2rem] leading-2rem text-sm z-10 rounded-full')
+        },
+        label: {
+            className: classNames('block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60')
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Steps } from 'primereact/steps';
+
+export default function UnstyledDemo() {
+    const items = [
+        {
+            label: 'Personal'
+        },
+        {
+            label: 'Seat'
+        },
+        {
+            label: 'Payment'
+        },
+        {
+            label: 'Confirmation'
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Steps model={items} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/styleclass/animationdoc.js b/components/doc/styleclass/animationdoc.js
new file mode 100644
index 0000000000..d1e09e6d76
--- /dev/null
+++ b/components/doc/styleclass/animationdoc.js
@@ -0,0 +1,111 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { StyleClass } from '@/components/lib/styleclass/StyleClass';
+import { useRef } from 'react';
+
+export function AnimationDoc(props) {
+    const openBtnRef = useRef(null);
+    const closeBtnRef = useRef(null);
+
+    const code = {
+        basic: `
+<StyleClass nodeRef={openBtnRef} selector=".box" enterClassName="hidden" enterActiveClassName="fadein">
+    <Button ref={openBtnRef} label="Show" className="mr-2" />
+</StyleClass>
+
+<StyleClass nodeRef={closeBtnRef} selector=".box" leaveActiveClassName="fadeout" leaveToClassName="hidden">
+    <Button ref={closeBtnRef} severity="secondary" label="Hide" />
+</StyleClass>
+
+<div className="hidden animation-duration-500 box">
+    <div className="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+</div>
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { StyleClass } from 'primereact/styleclass';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+
+export default function AnimationsDoc() {
+    const openBtnRef = useRef(null);
+    const closeBtnRef = useRef(null);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div>
+                <StyleClass nodeRef={openBtnRef} selector=".box" enterClassName="hidden" enterActiveClassName="fadein">
+                    <Button ref={openBtnRef} label="Show" className="mr-2" />
+                </StyleClass>
+
+                <StyleClass nodeRef={closeBtnRef} selector=".box" leaveActiveClassName="fadeout" leaveToClassName="hidden">
+                    <Button ref={closeBtnRef} severity="secondary" label="Hide" />
+                </StyleClass>
+            </div>
+
+            <div className="hidden animation-duration-500 box">
+                <div className="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { StyleClass } from 'primereact/styleclass';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+
+export default function AnimationsDoc() {
+    const openBtnRef = useRef<Button>(null);
+    const closeBtnRef = useRef<Button>(null);
+
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div>
+                <StyleClass nodeRef={openBtnRef} selector=".box" enterClassName="hidden" enterActiveClassName="fadein">
+                    <Button ref={openBtnRef} label="Show" className="mr-2" />
+                </StyleClass>
+
+                <StyleClass nodeRef={closeBtnRef} selector=".box" leaveActiveClassName="fadeout" leaveToClassName="hidden">
+                    <Button ref={closeBtnRef} severity="secondary" label="Hide" />
+                </StyleClass>
+            </div>
+
+            <div className="hidden animation-duration-500 box">
+                <div className="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Classes to apply during enter and leave animations are specified using the <i>enterClassName</i>, <i>enterActiveClassName</i>, <i>enterToClassName</i>, <i>leaveClassName</i>, <i>leaveActiveClassName</i>,<i>leaveToClassName</i>{' '}
+                    properties. In addition in case the target is an overlay, <i>hideOnOutsideClick</i> would be handy to hide the target if outside of the popup is clicked.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <div>
+                    <StyleClass nodeRef={openBtnRef} selector=".box" enterClassName="hidden" enterActiveClassName="fadein">
+                        <Button ref={openBtnRef} label="Show" className="mr-2" />
+                    </StyleClass>
+
+                    <StyleClass nodeRef={closeBtnRef} selector=".box" leaveActiveClassName="fadeout" leaveToClassName="hidden">
+                        <Button ref={closeBtnRef} severity="secondary" label="Hide" />
+                    </StyleClass>
+                </div>
+
+                <div className="hidden animation-duration-500 box ">
+                    <div className="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/styleclass/importdoc.js b/components/doc/styleclass/importdoc.js
new file mode 100644
index 0000000000..8c15cec019
--- /dev/null
+++ b/components/doc/styleclass/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { StyleClass } from 'primereact/styleclass';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/styleclass/toggleclassdoc.js b/components/doc/styleclass/toggleclassdoc.js
new file mode 100644
index 0000000000..25c38dcd9f
--- /dev/null
+++ b/components/doc/styleclass/toggleclassdoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { StyleClass } from '@/components/lib/styleclass/StyleClass';
+import { useRef } from 'react';
+
+export function ToggleClassDoc(props) {
+    const toggleBtnRef = useRef(null);
+
+    const code = {
+        basic: `
+<StyleClass nodeRef={toggleBtnRef} selector="@next" toggleClassName="p-disabled" />
+<Button ref={toggleBtnRef} label="Toggle p-disabled" />
+<InputText />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { StyleClass } from 'primereact/styleclass';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+
+export default function ToggleClassDoc() {
+    const toggleBtnRef = useRef(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <StyleClass nodeRef={toggleBtnRef} selector="@next" toggleClassName="p-disabled" />
+            <Button ref={toggleBtnRef} label="Toggle p-disabled" />
+            <InputText />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { StyleClass } from 'primereact/styleclass';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+
+export default function ToggleClassDoc() {
+    const toggleBtnRef = useRef<Button>(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <StyleClass nodeRef={toggleBtnRef} selector="@next" toggleClassName="p-disabled" />
+            <Button ref={toggleBtnRef} label="Toggle p-disabled" />
+            <InputText />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    <i>StyleClass</i> is bind to the element that triggers the click event with the <i>nodeRef</i> property that points to the <i>ref</i> of the element. The target element to change the styling is defined with the <i>selector</i>{' '}
+                    property that accepts any valid CSS selector or keywords including <i>@next</i>, <i>prev</i>, <i>parent</i>, <i>grandparent</i>
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <StyleClass nodeRef={toggleBtnRef} selector="@next" toggleClassName="p-disabled" />
+                <Button ref={toggleBtnRef} label="Toggle p-disabled" />
+                <InputText />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/accessibilitydoc.js b/components/doc/tabmenu/accessibilitydoc.js
new file mode 100644
index 0000000000..79b4135200
--- /dev/null
+++ b/components/doc/tabmenu/accessibilitydoc.js
@@ -0,0 +1,69 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                TabMenu component uses the <i>menubar</i> role and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a <i>presentation</i> role whereas anchor elements
+                have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused tab header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused tab header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/tabmenu/basicdoc.js b/components/doc/tabmenu/basicdoc.js
new file mode 100644
index 0000000000..26eeee293f
--- /dev/null
+++ b/components/doc/tabmenu/basicdoc.js
@@ -0,0 +1,71 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabMenu } from '@/components/lib/tabmenu/TabMenu';
+
+export function BasicDoc(props) {
+    const items = [
+        { label: 'Dashboard', icon: 'pi pi-home' },
+        { label: 'Transactions', icon: 'pi pi-chart-line' },
+        { label: 'Products', icon: 'pi pi-list' },
+        { label: 'Messages', icon: 'pi pi-inbox' }
+    ];
+
+    const code = {
+        basic: `
+<TabMenu model={items} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabMenu } from 'primereact/tabmenu';
+
+export default function BasicDemo() {
+    const items = [
+        { label: 'Dashboard', icon: 'pi pi-home' },
+        { label: 'Transactions', icon: 'pi pi-chart-line' },
+        { label: 'Products', icon: 'pi pi-list' },
+        { label: 'Messages', icon: 'pi pi-inbox' }
+    ];
+
+    return (
+        <div className="card">
+            <TabMenu model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabMenu } from 'primereact/tabmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+        { label: 'Dashboard', icon: 'pi pi-home' },
+        { label: 'Transactions', icon: 'pi pi-chart-line' },
+        { label: 'Products', icon: 'pi pi-list' },
+        { label: 'Messages', icon: 'pi pi-inbox' }
+    ];
+
+    return (
+        <div className="card">
+            <TabMenu model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Steps requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TabMenu model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/commanddoc.js b/components/doc/tabmenu/commanddoc.js
new file mode 100644
index 0000000000..9208edc093
--- /dev/null
+++ b/components/doc/tabmenu/commanddoc.js
@@ -0,0 +1,155 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabMenu } from '@/components/lib/tabmenu/TabMenu';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function CommandDoc(props) {
+    const toast = useRef(null);
+
+    const items = [
+        {
+            label: 'Dashboard',
+            icon: 'pi pi-home',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+            }
+        },
+        {
+            label: 'Transactions',
+            icon: 'pi pi-chart-line',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+            }
+        },
+        {
+            label: 'Products',
+            icon: 'pi pi-list',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+            }
+        },
+        {
+            label: 'Messages',
+            icon: 'pi pi-inbox',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+            }
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<TabMenu model={items} />
+        `,
+        javascript: `
+import { useRef } from 'react';
+import { TabMenu } from 'primereact/tabmenu';
+import { Toast } from 'primereact/toast';
+
+export default function CommandDemo() {
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Dashboard',
+            icon: 'pi pi-home',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+            }
+        },
+        {
+            label: 'Transactions',
+            icon: 'pi pi-chart-line',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+            }
+        },
+        {
+            label: 'Products',
+            icon: 'pi pi-list',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+            }
+        },
+        {
+            label: 'Messages',
+            icon: 'pi pi-inbox',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <TabMenu model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import { useRef } from 'react';
+import { TabMenu } from 'primereact/tabmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function CommandDemo() {
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'Dashboard',
+            icon: 'pi pi-home',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 });
+            }
+        },
+        {
+            label: 'Transactions',
+            icon: 'pi pi-chart-line',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 });
+            }
+        },
+        {
+            label: 'Products',
+            icon: 'pi pi-list',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 });
+            }
+        },
+        {
+            label: 'Messages',
+            icon: 'pi pi-inbox',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 });
+            }
+        }
+    ];
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <TabMenu model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>command</i> property defines the callback to run when an item is activated by click or a key event.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast} />
+                <TabMenu model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/controlleddoc.js b/components/doc/tabmenu/controlleddoc.js
new file mode 100644
index 0000000000..dee7d63980
--- /dev/null
+++ b/components/doc/tabmenu/controlleddoc.js
@@ -0,0 +1,86 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { TabMenu } from '@/components/lib/tabmenu/TabMenu';
+import { useState } from 'react';
+
+export function ControlledDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(1);
+    const items = [
+        { label: 'Dashboard', icon: 'pi pi-home' },
+        { label: 'Transactions', icon: 'pi pi-chart-line' },
+        { label: 'Products', icon: 'pi pi-list' },
+        { label: 'Messages', icon: 'pi pi-inbox' }
+    ];
+
+    const code = {
+        basic: `
+<Button onClick={() => setActiveIndex(0)} className="p-button-outlined mb-5" label="Activate 1st" />
+<TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Button } from 'primereact/button';
+import { TabMenu } from 'primereact/tabmenu';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState(3);
+    const items = [
+        { label: 'Dashboard', icon: 'pi pi-home' },
+        { label: 'Transactions', icon: 'pi pi-chart-line' },
+        { label: 'Products', icon: 'pi pi-list' },
+        { label: 'Messages', icon: 'pi pi-inbox' }
+    ];
+
+    return (
+        <div className="card">
+            <Button onClick={() => setActiveIndex(0)} className="p-button-outlined mb-5" label="Activate 1st" />
+            <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Button } from 'primereact/button';
+import { TabMenu } from 'primereact/tabmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState<number>(3);
+    const items: MenuItem[] = [
+        { label: 'Dashboard', icon: 'pi pi-home' },
+        { label: 'Transactions', icon: 'pi pi-chart-line' },
+        { label: 'Products', icon: 'pi pi-list' },
+        { label: 'Messages', icon: 'pi pi-inbox' }
+    ];
+
+    return (
+        <div className="card">
+            <Button onClick={() => setActiveIndex(0)} className="p-button-outlined mb-5" label="Activate 1st" />
+            <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    In controlled mode, a binding to <i>activeIndex</i> property along with <i>onTabChange</i> event are needed to manage the active item.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex flex-wrap justify-content-end gap-2 mb-3">
+                    <Button outlined={activeIndex !== 0} rounded label="1" onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" />
+                    <Button outlined={activeIndex !== 1} rounded label="2" onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" />
+                    <Button outlined={activeIndex !== 2} rounded label="3" onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" />
+                </div>
+                <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/importdoc.js b/components/doc/tabmenu/importdoc.js
new file mode 100644
index 0000000000..c73e185d3d
--- /dev/null
+++ b/components/doc/tabmenu/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { TabMenu } from 'primereact/tabmenu';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/pt/wireframe.js b/components/doc/tabmenu/pt/wireframe.js
new file mode 100644
index 0000000000..538928346a
--- /dev/null
+++ b/components/doc/tabmenu/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="tabmenu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/tabmenu/routerdoc.js b/components/doc/tabmenu/routerdoc.js
new file mode 100644
index 0000000000..2fb198ac33
--- /dev/null
+++ b/components/doc/tabmenu/routerdoc.js
@@ -0,0 +1,92 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabMenu } from '@/components/lib/tabmenu/TabMenu';
+import { useRouter } from 'next/router';
+
+export function RouterDoc(props) {
+    const router = useRouter();
+    const items = [
+        { label: 'Router Link', icon: 'pi pi-home', url: '/tabmenu' },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-palette',
+            command: () => {
+                router.push('/unstyled');
+            }
+        },
+        { label: 'External', icon: 'pi pi-link', url: 'https://react.dev/' }
+    ];
+
+    const code = {
+        basic: `
+<TabMenu model={items} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabMenu } from 'primereact/tabmenu';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items = [
+        { label: 'Router Link', icon: 'pi pi-home', url: '/tabmenu' },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-palette',
+            command: () => {
+                router.push('/unstyled');
+            }
+        },
+        { label: 'External', icon: 'pi pi-link', url: 'https://react.dev/' }
+    ];
+
+    return (
+        <div className="card">
+            <TabMenu model={items} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabMenu } from 'primereact/tabmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items: MenuItem[] = [
+        { label: 'Router Link', icon: 'pi pi-home', url: '/tabmenu' },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-palette',
+            command: () => {
+                router.push('/unstyled');
+            }
+        },
+        { label: 'External', icon: 'pi pi-link', url: 'https://react.dev/' }
+    ];
+
+    return (
+        <div className="card">
+            <TabMenu model={items} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items with navigation are defined with <i>command</i> property to be able to use a router link component, an external link or programmatic navigation.{' '}
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TabMenu model={items} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/styledoc.js b/components/doc/tabmenu/styledoc.js
new file mode 100644
index 0000000000..191a7dd26a
--- /dev/null
+++ b/components/doc/tabmenu/styledoc.js
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tabmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabmenu-nav</td>
+                            <td>List element of headers.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabmenuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-link</td>
+                            <td>Link inside a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/templatedoc.js b/components/doc/tabmenu/templatedoc.js
new file mode 100644
index 0000000000..f67335f108
--- /dev/null
+++ b/components/doc/tabmenu/templatedoc.js
@@ -0,0 +1,129 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabMenu } from '@/components/lib/tabmenu/TabMenu';
+import { useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const itemRenderer = (item, itemIndex) => (
+        <a className="p-menuitem-link flex align-items-center gap-2" onClick={() => setActiveIndex(itemIndex)}>
+            <img alt={item.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${item.image}`} style={{ width: '32px' }} />
+            <span className="font-bold">{item.name}</span>
+        </a>
+    );
+
+    const items = [
+        {
+            name: 'Amy Elsner',
+            image: 'amyelsner.png',
+            template: (item) => itemRenderer(item, 0)
+        },
+        {
+            name: 'Anna Fali',
+            image: 'annafali.png',
+            template: (item) => itemRenderer(item, 1)
+        },
+        {
+            name: 'Asiya Javayant',
+            image: 'asiyajavayant.png',
+            template: (item) => itemRenderer(item, 2)
+        }
+    ];
+
+    const code = {
+        basic: `
+<TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+        `,
+        javascript: `
+import { useState } from 'react';
+import { TabMenu } from 'primereact/tabmenu';
+
+export default function TemplateDemo() {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const itemRenderer = (item, itemIndex) => (
+        <a className="p-menuitem-link flex align-items-center gap-2" onClick={() => setActiveIndex(itemIndex)}>
+            <img alt={item.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${item.image}\`} style={{ width: '32px' }} />
+            <span className="font-bold">{item.name}</span>
+        </a>
+    );
+
+    const items = [
+        {
+            name: 'Amy Elsner',
+            image: 'amyelsner.png',
+            template: (item) => itemRenderer(item, 0)
+        },
+        {
+            name: 'Anna Fali',
+            image: 'annafali.png',
+            template: (item) => itemRenderer(item, 1)
+        },
+        {
+            name: 'Asiya Javayant',
+            image: 'asiyajavayant.png',
+            template: (item) => itemRenderer(item, 2)
+        }
+    ];
+
+
+    return (
+        <div className="card">
+            <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import { useState } from 'react';
+import { TabMenu } from 'primereact/tabmenu';
+
+export default function TemplateDemo() {
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+    const itemRenderer = (item, itemIndex) => (
+        <a className="p-menuitem-link flex align-items-center gap-2" onClick={() => setActiveIndex(itemIndex)}>
+            <img alt={item.name} src={\`https://primefaces.org/cdn/primereact/images/avatar/\${item.image}\`} style={{ width: '32px' }} />
+            <span className="font-bold">{item.name}</span>
+        </a>
+    );
+
+    const items = [
+        {
+            name: 'Amy Elsner',
+            image: 'amyelsner.png',
+            template: (item) => itemRenderer(item, 0)
+        },
+        {
+            name: 'Anna Fali',
+            image: 'annafali.png',
+            template: (item) => itemRenderer(item, 1)
+        },
+        {
+            name: 'Asiya Javayant',
+            image: 'asiyajavayant.png',
+            template: (item) => itemRenderer(item, 2)
+        }
+    ];
+
+    return (
+        <div className="card">
+            <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TabMenu offers item customization with the items <i>template</i> property that receives the item instance and returns an element.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/theming/styleddoc.js b/components/doc/tabmenu/theming/styleddoc.js
new file mode 100644
index 0000000000..bd86e58d28
--- /dev/null
+++ b/components/doc/tabmenu/theming/styleddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tabmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabmenu-nav</td>
+                            <td>List element of headers.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabmenuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-link</td>
+                            <td>Link inside a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tabmenu/theming/tailwinddoc.js b/components/doc/tabmenu/theming/tailwinddoc.js
new file mode 100644
index 0000000000..8f31407b77
--- /dev/null
+++ b/components/doc/tabmenu/theming/tailwinddoc.js
@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+     tabmenu: {
+        root: 'overflow-x-auto',
+        menu: {
+            className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none')
+        },
+        menuitem: 'mr-0',
+        action: ({ context, parent }) => ({
+            className: classNames(
+                'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
+                'border-b-2 p-5 font-bold rounded-t-lg ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles.
+                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles.
+                }
+            ),
+            style: { top: '2px' }
+        }),
+        icon: 'mr-2'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { TabMenu } from 'primereact/tabmenu';
+
+export default function UnstyledDemo() {
+    const items = [
+        {label: 'Home', icon: 'pi pi-fw pi-home'},
+        {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
+        {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
+        {label: 'Documentation', icon: 'pi pi-fw pi-file'},
+        {label: 'Settings', icon: 'pi pi-fw pi-cog'}
+    ];
+
+    return (
+        <div className="card">
+            <TabMenu model={items} />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/tabview/accessibilitydoc.js b/components/doc/tabview/accessibilitydoc.js
new file mode 100644
index 0000000000..720c279d8f
--- /dev/null
+++ b/components/doc/tabview/accessibilitydoc.js
@@ -0,0 +1,70 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                TabView container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the TabView. Each tab header has a{' '}
+                <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding tab content element. The content element of each tab has <i>tabpanel</i> role, an id to match the
+                <i>aria-controls</i> of the header and <i>aria-labelledby</i> reference to the header as the accessible name.
+            </p>
+
+            <h3>Tab Header Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Activates the focused tab header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Activates the focused tab header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Moves focus to the next header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Moves focus to the previous header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the last header.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the first header.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/tabview/basicdoc.js b/components/doc/tabview/basicdoc.js
new file mode 100644
index 0000000000..6bafb7745f
--- /dev/null
+++ b/components/doc/tabview/basicdoc.js
@@ -0,0 +1,143 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<TabView>
+    <TabPanel header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </TabPanel>
+</TabView>
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+import './TabViewDemo.css';
+
+export default function BasicDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>TabView consists of one or more TabPanel elements.</p>
+            </DocSectionText>
+            <div className="card">
+                <TabView>
+                    <TabPanel header="Header I">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header II">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header III">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </TabPanel>
+                </TabView>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabview/closabledoc.js b/components/doc/tabview/closabledoc.js
new file mode 100644
index 0000000000..6893c1724e
--- /dev/null
+++ b/components/doc/tabview/closabledoc.js
@@ -0,0 +1,146 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
+
+export function ClosableDoc(props) {
+    const code = {
+        basic: `
+<TabView>
+    <TabPanel header="Header I" key="tab1">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header II" key="tab2" closable>
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header III" key="tab3" closable>
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+</TabView>
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function ClosableDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I" key="tab1">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II" key="tab2" closable>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III" key="tab3" closable>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function ClosableDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I" key="tab1">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II" key="tab2" closable>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III" key="tab3" closable>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>closable</i> is enabled, a close icon is displayed to hide the tab .
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TabView>
+                    <TabPanel header="Header I" key="tab1">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header II" key="tab2" closable>
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header III" key="tab3" closable>
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                </TabView>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabview/controlleddoc.js b/components/doc/tabview/controlleddoc.js
new file mode 100644
index 0000000000..cce8774908
--- /dev/null
+++ b/components/doc/tabview/controlleddoc.js
@@ -0,0 +1,174 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
+import { useState } from 'react';
+
+export function ControlledDoc(props) {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    const code = {
+        basic: `
+<div className="flex mb-2 gap-2 justify-content-end">
+    <Button onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 0} label="1" />
+    <Button onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 1} label="2" />
+    <Button onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 2} label="3" />
+</div>
+<TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+    <TabPanel header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </TabPanel>
+</TabView>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { Button } from 'primereact/button';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState(0);
+
+    return (
+        <div className="card">
+            <div className="flex mb-2 gap-2 justify-content-end">
+                <Button onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 0} label="1" />
+                <Button onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 1} label="2" />
+                <Button onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 2} label="3" />
+            </div>
+            <TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                <TabPanel header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { Button } from 'primereact/button';
+
+export default function ControlledDemo() {
+    const [activeIndex, setActiveIndex] = useState<number>(0);
+
+    return (
+        <div className="card">
+            <div className="flex mb-2 gap-2 justify-content-end">
+                <Button onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 0} label="1" />
+                <Button onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 1} label="2" />
+                <Button onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 2} label="3" />
+            </div>
+            <TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                <TabPanel header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TabView can be controlled programmatically using a binding to <i>activeIndex</i> along with <i>onTabChange</i> event to update the active index.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex mb-2 gap-2 justify-content-end">
+                    <Button onClick={() => setActiveIndex(0)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 0} label="1" />
+                    <Button onClick={() => setActiveIndex(1)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 1} label="2" />
+                    <Button onClick={() => setActiveIndex(2)} className="w-2rem h-2rem p-0" rounded outlined={activeIndex !== 2} label="3" />
+                </div>
+                <TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
+                    <TabPanel header="Header I">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header II">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header III">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </TabPanel>
+                </TabView>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabview/disableddoc.js b/components/doc/tabview/disableddoc.js
new file mode 100644
index 0000000000..3ea804d98d
--- /dev/null
+++ b/components/doc/tabview/disableddoc.js
@@ -0,0 +1,148 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<TabView>
+    <TabPanel header="Header I">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header II">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header III">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header IV" disabled></TabPanel>
+</TabView>
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header IV" disabled></TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header IV" disabled></TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>disabled</i> property of a TabPanel prevents user interaction.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TabView>
+                    <TabPanel header="Header I">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header II">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header III">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header IV" disabled />
+                </TabView>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabview/headericondoc.js b/components/doc/tabview/headericondoc.js
new file mode 100644
index 0000000000..3ea4a75caf
--- /dev/null
+++ b/components/doc/tabview/headericondoc.js
@@ -0,0 +1,144 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
+
+export function HeaderIconDoc(props) {
+    const code = {
+        basic: `
+<TabView>
+    <TabPanel header="Header I" leftIcon="pi pi-calendar mr-2">
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header II" rightIcon="pi pi-user ml-2">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </TabPanel>
+    <TabPanel header="Header III" leftIcon="pi pi-search mr-2" rightIcon="pi pi-cog ml-2">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </TabPanel>
+</TabView>
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function HeaderIconDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I" leftIcon="pi pi-calendar mr-2">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II" rightIcon="pi pi-user ml-2">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III" leftIcon="pi pi-search mr-2" rightIcon="pi pi-cog ml-2">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function HeaderIconDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I" leftIcon="pi pi-calendar mr-2">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II" rightIcon="pi pi-user ml-2">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III" leftIcon="pi pi-search mr-2" rightIcon="pi pi-cog ml-2">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Icons next to the tab headers are specified with the <i>leftIcon</i> and <i>rightIcon</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TabView>
+                    <TabPanel header="Header I" leftIcon="pi pi-calendar mr-2">
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header II" rightIcon="pi pi-user ml-2">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </TabPanel>
+                    <TabPanel header="Header III" leftIcon="pi pi-search mr-2" rightIcon="pi pi-cog ml-2">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </TabPanel>
+                </TabView>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabview/importdoc.js b/components/doc/tabview/importdoc.js
new file mode 100644
index 0000000000..9220ca63a3
--- /dev/null
+++ b/components/doc/tabview/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { TabView, TabPanel } from 'primereact/tabview';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/tabview/pt/wireframe.js b/components/doc/tabview/pt/wireframe.js
new file mode 100644
index 0000000000..97d0125ff0
--- /dev/null
+++ b/components/doc/tabview/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/tabview.jpg" alt="panel" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/tabview/scrollabledoc.js b/components/doc/tabview/scrollabledoc.js
new file mode 100644
index 0000000000..450f4e5499
--- /dev/null
+++ b/components/doc/tabview/scrollabledoc.js
@@ -0,0 +1,86 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
+
+export function ScrollableDoc(props) {
+    const scrollableTabs = Array.from({ length: 50 }, (_, i) => ({ title: `Tab ${i + 1}`, content: `Tab ${i + 1} Content` }));
+    const code = {
+        basic: `
+<TabView scrollable>
+    {scrollableTabs.map((tab) => {
+        return (
+            <TabPanel key={tab.title} header={tab.title}>
+                <p className="m-0">{tab.content}</p>
+            </TabPanel>
+        );
+    })}
+</TabView>
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function ScrollableDemo() {
+    const scrollableTabs = Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` }))
+
+    return (
+        <div className="card">
+            <TabView scrollable>
+                {scrollableTabs.map((tab) => {
+                    return (
+                        <TabPanel key={tab.title} header={tab.title}>
+                            <p className="m-0">{tab.content}</p>
+                        </TabPanel>
+                    );
+                })}
+            </TabView>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function ScrollableDemo() {
+    const scrollableTabs = Array.from({ length: 50 }, (_, i) => ({ title: \`Tab \${i + 1}\`, content: \`Tab \${i + 1} Content\` }))
+
+    return (
+        <div className="card">
+            <TabView scrollable>
+                {scrollableTabs.map((tab) => {
+                    return (
+                        <TabPanel key={tab.title} header={tab.title}>
+                            <p className="m-0">{tab.content}</p>
+                        </TabPanel>
+                    );
+                })}
+            </TabView>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Adding <i>scrollable</i> property displays navigational buttons at each side to scroll between tabs.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TabView scrollable>
+                    {scrollableTabs.map((tab) => {
+                        return (
+                            <TabPanel key={tab.title} header={tab.title}>
+                                <p className="m-0">{tab.content}</p>
+                            </TabPanel>
+                        );
+                    })}
+                </TabView>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabview/styledoc.js b/components/doc/tabview/styledoc.js
new file mode 100644
index 0000000000..135407d225
--- /dev/null
+++ b/components/doc/tabview/styledoc.js
@@ -0,0 +1,47 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tabview</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-nav</td>
+                            <td>Container of headers.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-selected</td>
+                            <td>Selected tab header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-panels</td>
+                            <td>Container panels.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-panel</td>
+                            <td>Content of a tab.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tabview/templatedoc.js b/components/doc/tabview/templatedoc.js
new file mode 100644
index 0000000000..e5ece90664
--- /dev/null
+++ b/components/doc/tabview/templatedoc.js
@@ -0,0 +1,236 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Badge } from '@/components/lib/badge/Badge';
+import { TabPanel, TabView } from '@/components/lib/tabview/TabView';
+
+export function TemplateDoc(props) {
+    const tab1HeaderTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Amy Elsner</span>
+            </div>
+        );
+    };
+
+    const tab2HeaderTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Onyama Limba</span>
+            </div>
+        );
+    };
+
+    const tab3HeaderTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <Badge value="2" />
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<TabView>
+    <TabPanel header="Header I" headerTemplate={tab1HeaderTemplate}>
+        <p className="m-0">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+    </TabPanel>
+    <TabPanel headerTemplate={tab2HeaderTemplate} headerClassName="flex align-items-center">
+        <p className="m-0">
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+            eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+            ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+        </p>
+    </TabPanel>
+    <TabPanel headerTemplate={tab3HeaderTemplate} headerClassName="flex align-items-center">
+        <p className="m-0">
+            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+            quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+            Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+        </p>
+    </TabPanel>
+</TabView>
+        `,
+        javascript: `
+import React from 'react'; 
+import { TabView, TabPanel } from 'primereact/tabview';
+import { SplitButton } from 'primereact/splitbutton';
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    const tab1HeaderTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Amy Elsner</span>
+            </div>
+        );
+    };
+
+    const tab2HeaderTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Onyama Limba</span>
+            </div>
+        )
+    };
+
+    const tab3HeaderTemplate = (options) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <Badge value="2" />
+            </div>
+        )
+    };
+
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I" headerTemplate={tab1HeaderTemplate}>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel headerTemplate={tab2HeaderTemplate} headerClassName="flex align-items-center">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel headerTemplate={tab3HeaderTemplate} headerClassName="flex align-items-center">
+                <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { TabView, TabPanel, TabPanelHeaderTemplateOptions } from 'primereact/tabview';
+import { SplitButton } from 'primereact/splitbutton';
+import { Avatar } from 'primereact/avatar';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    const tab1HeaderTemplate = (options: TabPanelHeaderTemplateOptions) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Amy Elsner</span>
+            </div>
+        );
+    };
+
+    const tab2HeaderTemplate = (options: TabPanelHeaderTemplateOptions) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/onyamalimba.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Onyama Limba</span>
+            </div>
+        )
+    };
+
+    const tab3HeaderTemplate = (options: TabPanelHeaderTemplateOptions) => {
+        return (
+            <div className="flex align-items-center gap-2 p-3" style={{ cursor: 'pointer' }} onClick={options.onClick}>
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/ionibowcher.png" shape="circle" />
+                <span className="font-bold white-space-nowrap">Ioni Bowcher</span>
+                <Badge value="2" />
+            </div>
+        )
+    };
+
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I" headerTemplate={tab1HeaderTemplate}>
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel headerTemplate={tab2HeaderTemplate} headerClassName="flex align-items-center">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, 
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel headerTemplate={tab3HeaderTemplate} headerClassName="flex align-items-center">
+                <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti 
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+            </TabView>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Title section of a tab is customized with the <i>header</i> property that takes a <i>TabPanelHeaderTemplateOptions</i> object as a parameter and returns content.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TabView>
+                    <TabPanel header="Header I" headerTemplate={tab1HeaderTemplate}>
+                        <p className="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </TabPanel>
+                    <TabPanel headerTemplate={tab2HeaderTemplate} headerClassName="flex align-items-center">
+                        <p className="m-0">
+                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                            enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                        </p>
+                    </TabPanel>
+                    <TabPanel headerTemplate={tab3HeaderTemplate} headerClassName="flex align-items-center">
+                        <p className="m-0">
+                            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                            culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                        </p>
+                    </TabPanel>
+                </TabView>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tabview/theming/styleddoc.js b/components/doc/tabview/theming/styleddoc.js
new file mode 100644
index 0000000000..f5ba846605
--- /dev/null
+++ b/components/doc/tabview/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tabview</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-nav</td>
+                            <td>Container of headers.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-selected</td>
+                            <td>Selected tab header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-panels</td>
+                            <td>Container panels.</td>
+                        </tr>
+                        <tr>
+                            <td>p-tabview-panel</td>
+                            <td>Content of a tab.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tabview/theming/tailwinddoc.js b/components/doc/tabview/theming/tailwinddoc.js
new file mode 100644
index 0000000000..24f2678a72
--- /dev/null
+++ b/components/doc/tabview/theming/tailwinddoc.js
@@ -0,0 +1,110 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    tabview: {
+        navContainer: ({ props }) => ({
+            className: classNames(
+                'relative', // Relative positioning.
+                { 'overflow-hidden': props.scrollable } // Overflow condition.
+            )
+        }),
+        navContent: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden', // Overflow and scrollbar styles.
+        previousButton: {
+            className: classNames('h-full flex items-center justify-center !absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 )') // Flex and absolute positioning styles.
+        },
+        nextButton: {
+            className: classNames('h-full flex items-center justify-center !absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex and absolute positioning styles.
+        },
+        nav: {
+            className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles.
+        },
+    },
+    tabpanel: {
+        header: ({ props }) => ({
+            className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles.
+        }),
+        headerAction: ({ parent, context }) => ({
+            className: classNames(
+                'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles.
+                'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles.
+                'transition-colors duration-200', // Transition duration style.
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles.
+                {
+                    'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80':
+                        parent != null ? parent.state.activeIndex !== context.index : true, // Condition-based hover styles.
+                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent != null ? parent.state.activeIndex === context.index : false // Condition-based active styles.
+                }
+            ),
+            style: { marginBottom: '-2px' } // Negative margin style.
+        }),
+        headerTitle: {
+            className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles.
+        },
+        content: {
+            className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles.
+        }
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card">
+            <TabView>
+                <TabPanel header="Header I">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header II">
+                    <p className="m-0">
+                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
+                        eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+                        enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
+                        ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header III">
+                    <p className="m-0">
+                        At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti
+                        quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+                        culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+                        Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+                    </p>
+                </TabPanel>
+                <TabPanel header="Header IV" disabled></TabPanel>
+            </TabView>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/tag/accessibilitydoc.js b/components/doc/tag/accessibilitydoc.js
new file mode 100644
index 0000000000..f378294921
--- /dev/null
+++ b/components/doc/tag/accessibilitydoc.js
@@ -0,0 +1,16 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic,
+                <i>aria-live</i> may be utilized as well. In case badges need to be tabbable, <i>tabIndex</i> can be added to implement custom key handlers.
+            </p>
+
+            <h4>Keyboard Support</h4>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/tag/basicdoc.js b/components/doc/tag/basicdoc.js
new file mode 100644
index 0000000000..860bdcc373
--- /dev/null
+++ b/components/doc/tag/basicdoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tag } from '@/components/lib/tag/Tag';
+
+export function BasicDoc(props) {
+    const code = {
+        basic: `
+<Tag value="New"></Tag>
+        `,
+        javascript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tag value="New"></Tag>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function BasicDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tag value="New"></Tag>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Label of the tag is defined with the <i>value</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Tag value="New" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tag/icondoc.js b/components/doc/tag/icondoc.js
new file mode 100644
index 0000000000..99b95c1432
--- /dev/null
+++ b/components/doc/tag/icondoc.js
@@ -0,0 +1,65 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tag } from '@/components/lib/tag/Tag';
+
+export function IconDoc(props) {
+    const code = {
+        basic: `
+<Tag className="mr-2" icon="pi pi-user" value="Primary"></Tag>
+<Tag className="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+<Tag className="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+<Tag className="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        `,
+        javascript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function IconDemo() {
+    return (
+        <div className="card">
+            <Tag className="mr-2" icon="pi pi-user" value="Primary"></Tag>
+            <Tag className="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+            <Tag className="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+            <Tag className="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+            <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function IconDemo() {
+    return (
+        <div className="card">
+            <Tag className="mr-2" icon="pi pi-user" value="Primary"></Tag>
+            <Tag className="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+            <Tag className="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+            <Tag className="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+            <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A font icon next to the value can be displayed with the <i>icon</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <Tag icon="pi pi-user" value="Primary" />
+                <Tag icon="pi pi-check" severity="success" value="Success" />
+                <Tag icon="pi pi-info-circle" severity="info" value="Info" />
+                <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning" />
+                <Tag icon="pi pi-times" severity="danger" value="Danger" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tag/importdoc.js b/components/doc/tag/importdoc.js
new file mode 100644
index 0000000000..01e73eb1a8
--- /dev/null
+++ b/components/doc/tag/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Tag } from 'primereact/tag';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/tag/pilldoc.js b/components/doc/tag/pilldoc.js
new file mode 100644
index 0000000000..782634fb1f
--- /dev/null
+++ b/components/doc/tag/pilldoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tag } from '@/components/lib/tag/Tag';
+
+export function PillDoc(props) {
+    const code = {
+        basic: `
+<Tag value="Primary" rounded></Tag>
+<Tag severity="success" value="Success" rounded></Tag>
+<Tag severity="info" value="Info" rounded></Tag>
+<Tag severity="warning" value="Warning" rounded></Tag>
+<Tag severity="danger" value="Danger" rounded></Tag>
+<Tag severity="secondary" value="Secondary" rounded></Tag>
+<Tag severity="contrast" value="Contrast" rounded></Tag>
+        `,
+        javascript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function PillDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Tag value="Primary" rounded></Tag>
+            <Tag severity="success" value="Success" rounded></Tag>
+            <Tag severity="info" value="Info" rounded></Tag>
+            <Tag severity="warning" value="Warning" rounded></Tag>
+            <Tag severity="danger" value="Danger" rounded></Tag>
+            <Tag severity="secondary" value="Secondary" rounded></Tag>
+            <Tag severity="contrast" value="Contrast" rounded></Tag>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function PillDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Tag value="Primary" rounded></Tag>
+            <Tag severity="success" value="Success" rounded></Tag>
+            <Tag severity="info" value="Info" rounded></Tag>
+            <Tag severity="warning" value="Warning" rounded></Tag>
+            <Tag severity="danger" value="Danger" rounded></Tag>
+            <Tag severity="secondary" value="Secondary" rounded></Tag>
+            <Tag severity="contrast" value="Contrast" rounded></Tag>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Enabling <i>rounded</i>, displays a tag as a pill.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <Tag value="Primary" rounded />
+                <Tag severity="success" value="Success" rounded />
+                <Tag severity="info" value="Info" rounded />
+                <Tag severity="warning" value="Warning" rounded />
+                <Tag severity="danger" value="Danger" rounded />
+                <Tag severity="secondary" value="Secondary" rounded />
+                <Tag severity="contrast" value="Contrast" rounded />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tag/pt/wireframe.js b/components/doc/tag/pt/wireframe.js
new file mode 100644
index 0000000000..8dfb3db12c
--- /dev/null
+++ b/components/doc/tag/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/tag.jpg" alt="tag" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/tag/severitydoc.js b/components/doc/tag/severitydoc.js
new file mode 100644
index 0000000000..7f242966f4
--- /dev/null
+++ b/components/doc/tag/severitydoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tag } from '@/components/lib/tag/Tag';
+
+export function SeverityDoc(props) {
+    const code = {
+        basic: `
+<Tag value="Primary"></Tag>
+<Tag severity="success" value="Success"></Tag>
+<Tag severity="info" value="Info"></Tag>
+<Tag severity="warning" value="Warning"></Tag>
+<Tag severity="danger" value="Danger"></Tag>
+<Tag severity="secondary" value="Secondary"></Tag>
+<Tag severity="contrast" value="Contrast"></Tag>
+        `,
+        javascript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Tag value="Primary"></Tag>
+            <Tag severity="success" value="Success"></Tag>
+            <Tag severity="info" value="Info"></Tag>
+            <Tag severity="warning" value="Warning"></Tag>
+            <Tag severity="danger" value="Danger"></Tag>
+            <Tag severity="secondary" value="Secondary"></Tag>
+            <Tag severity="contrast" value="Contrast"></Tag>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function SeverityDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Tag value="Primary"></Tag>
+            <Tag severity="success" value="Success"></Tag>
+            <Tag severity="info" value="Info"></Tag>
+            <Tag severity="warning" value="Warning"></Tag>
+            <Tag severity="danger" value="Danger"></Tag>
+            <Tag severity="secondary" value="Secondary"></Tag>
+            <Tag severity="contrast" value="Contrast"></Tag>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Severity defines the color of the tag, possible values are <i>success</i>, <i>info</i>, <i>warning</i> and <i>danger</i> in addition to the default theme color.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <Tag value="Primary" />
+                <Tag severity="success" value="Success" />
+                <Tag severity="info" value="Info" />
+                <Tag severity="warning" value="Warning" />
+                <Tag severity="danger" value="Danger" />
+                <Tag severity="secondary" value="Secondary" />
+                <Tag severity="contrast" value="Contrast" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tag/styledoc.js b/components/doc/tag/styledoc.js
new file mode 100644
index 0000000000..486b5712c6
--- /dev/null
+++ b/components/doc/tag/styledoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tag</td>
+                            <td>Tag element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tag-rounded</td>
+                            <td>Rounded element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tag-icon</td>
+                            <td>Icon of the tag</td>
+                        </tr>
+                        <tr>
+                            <td>p-tag-value</td>
+                            <td>Value of the tag</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tag/templatedoc.js b/components/doc/tag/templatedoc.js
new file mode 100644
index 0000000000..003c9c2e04
--- /dev/null
+++ b/components/doc/tag/templatedoc.js
@@ -0,0 +1,69 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tag } from '@/components/lib/tag/Tag';
+
+export function TemplateDoc(props) {
+    const code = {
+        basic: `
+<Tag style={{background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}}>
+    <div className="flex align-items-center gap-2">
+        <img alt="Country" src="http://github.com/images/flag/flag_placeholder.png" className="flag flag-it" style={{ width: '18px' }}/>
+        <span className="text-base">Italy</span>
+        <i className="pi pi-times text-xs"></i>
+    </div>
+</Tag>
+        `,
+        javascript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function TemplateDemo() {
+    return (
+        <Tag style={{background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}}>
+            <div className="flex align-items-center gap-2">
+                <img alt="Country" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+                    className="flag flag-it" style={{ width: '18px' }}/>
+                <span className="text-base">Italy</span>
+                <i className="pi pi-times text-xs"></i>
+            </div>
+        </Tag>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function TemplateDemo() {
+    return (
+        <Tag style={{background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)'}}>
+            <div className="flex align-items-center gap-2">
+                <img alt="Country" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png"
+                    className="flag flag-it" style={{ width: '18px' }}/>
+                <span className="text-base">Italy</span>
+                <i className="pi pi-times text-xs"></i>
+            </div>
+        </Tag>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Children of the component are passed as the content for templating.</p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Tag style={{ background: 'linear-gradient(-225deg,#AC32E4 0%,#7918F2 48%,#4801FF 100%)' }}>
+                    <div className="flex align-items-center gap-2">
+                        <img alt="Country" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className="flag flag-it" style={{ width: '18px' }} />
+                        <span className="text-base">Italy</span>
+                        <i className="pi pi-times text-xs" />
+                    </div>
+                </Tag>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tag/theming/styleddoc.js b/components/doc/tag/theming/styleddoc.js
new file mode 100644
index 0000000000..085be5553e
--- /dev/null
+++ b/components/doc/tag/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tag</td>
+                            <td>Tag element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tag-rounded</td>
+                            <td>Rounded element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tag-icon</td>
+                            <td>Icon of the tag</td>
+                        </tr>
+                        <tr>
+                            <td>p-tag-value</td>
+                            <td>Value of the tag</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tag/theming/tailwinddoc.js b/components/doc/tag/theming/tailwinddoc.js
new file mode 100644
index 0000000000..b7861dce0c
--- /dev/null
+++ b/components/doc/tag/theming/tailwinddoc.js
@@ -0,0 +1,67 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {          
+    tag: {
+        root: ({ props }) => ({
+            className: classNames(
+                'inline-flex items-center justify-center',
+                'bg-blue-500 text-white text-xs font-semibold px-2 py-1 ',
+                {
+                    'bg-gray-500 ': props.severity == 'secondary',
+                    'bg-green-500 ': props.severity == 'success',
+                    'bg-blue-500 ': props.severity == 'info',
+                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-purple-500 ': props.severity == 'help',
+                    'bg-red-500 ': props.severity == 'danger'
+                },
+                {
+                    'rounded-md': !props.rounded,
+                    'rounded-full': props.rounded
+                }
+            )
+        }),
+        value: 'leading-6',
+        icon: 'mr-1 text-sm'
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { Tag } from 'primereact/tag';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex flex-wrap justify-center gap-2">
+            <Tag value="Primary"></Tag>
+            <Tag severity="success" value="Success"></Tag>
+            <Tag severity="info" value="Info"></Tag>
+            <Tag severity="warning" value="Warning"></Tag>
+            <Tag severity="danger" value="Danger"></Tag>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/tailwind/csslayerdoc.js b/components/doc/tailwind/csslayerdoc.js
new file mode 100644
index 0000000000..2c63a6b4b3
--- /dev/null
+++ b/components/doc/tailwind/csslayerdoc.js
@@ -0,0 +1,37 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function CSSLayerDoc(props) {
+    const code1 = {
+        basic: `
+@layer tailwind-base, primereact, tailwind-utilities;
+
+/* VITE ONLY: In "styled" mode you must add the PrimeReact Theme here. Do NOT include in "unstyled" mode */
+@import 'http://github.com/primereact/resources/themes/lara-light-blue/theme.css';
+
+/* NEXT.JS ONLY: In "styled" mode you must also add the layer(primereact) */
+@import 'http://github.com/primereact/resources/themes/lara-light-blue/theme.css' layer(primereact);
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Tailwind CSS can be used with styled or unstyled modes of PrimeReact. In both cases, <a href="https://tailwindcss.com/docs/preflight">preflight</a> mode may break styling of the core functionality so <i>@layer</i> configuration in
+                    your style file that includes tailwind styles is necessary for compatibility.
+                </p>
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/tailwind/unstyledmode/exampledoc.js b/components/doc/tailwind/unstyledmode/exampledoc.js
new file mode 100644
index 0000000000..a68c971aa2
--- /dev/null
+++ b/components/doc/tailwind/unstyledmode/exampledoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ExampleDoc(props) {
+    const code = {
+        javascript: `
+import React from 'react'; 
+import { Panel } from 'primereact/panel';
+
+export default function TailwindDemo() {
+    return (
+        <div
+        className="
+          bg-white
+          dark:bg-gray-800
+          p-10
+          rounded-xl
+          flex flex-col
+          gap-8
+          max-w-3xl
+        "
+      >
+        <h1 className="text-4xl text-black dark:text-white font-bold text-center">
+          Tailwind CSS + PrimeReact
+        </h1>
+        <Panel header="Default Preset">
+          <p>
+            First panel component uses the global pass through preset from the
+            Tailwind CSS based implementation of PrimeOne Design 2023.
+          </p>
+        </Panel>
+    
+        <Panel
+          header="Custom Header"
+          pt={{
+            header:
+              'p-5 flex items-center justify-between border border-indigo-300 bg-indigo-500 text-indigo-50 rounded-tl-lg rounded-tr-lg dark:bg-indigo-900 dark:border-indigo-900/40 dark:text-white/80',
+          }}
+        >
+          <p>
+            Second panel overrides the header section with custom a custom style.
+          </p>
+        </Panel>
+    
+        <Panel
+          header="Custom Design"
+          ptOptions={{ mergeSections: false }}
+          pt={{
+            header:
+              'flex items-center justify-center p-5 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 rounded-tl-2xl rounded-tr-2xl text-white',
+            title: 'leading-none font-bold uppercase text-2xl',
+            content:
+              'bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 px-5 pb-8 pt-3 text-white text-center rounded-bl-2xl rounded-br-2xl text-xl',
+          }}
+        >
+          <p>
+            Third panel ignores the default preset with
+            <b> mergeSections: false</b> and applies a custom style to all elements
+            of the panel instead.
+          </p>
+        </Panel>
+      </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>This example covers how to enable the default Tailwind based PrimeOne Design implementation and the customization options</p>
+            </DocSectionText>
+            <DocSectionCode code={code} embedded />
+        </>
+    );
+}
diff --git a/components/doc/tailwind/unstyledmode/setupdoc.js b/components/doc/tailwind/unstyledmode/setupdoc.js
new file mode 100644
index 0000000000..35efcd698e
--- /dev/null
+++ b/components/doc/tailwind/unstyledmode/setupdoc.js
@@ -0,0 +1,182 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function SetupDoc(props) {
+    const code1 = {
+        basic: `
+module.exports = {
+    ...
+    content: [
+        "./index.html",
+        "./app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+        "./node_modules/primereact/**/*.{js,ts,jsx,tsx}",
+
+        // Or if using \`\src\` directory:
+        "./src/**/*.{js,ts,jsx,tsx,mdx}",
+      ],
+      ...
+    }
+`
+    };
+    const code2 = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
+
+...
+return(
+    <PrimeReactProvider value={{ unstyled: true, pt: {} }}>
+        <App />
+    </PrimeReactProvider>
+)
+ 
+`
+    };
+
+    const code3 = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
+import Tailwind from 'primereact/passthrough/tailwind';
+
+...
+return(
+    <PrimeReactProvider value={{ unstyled: true, pt: Tailwind }}>
+        <App />
+    </PrimeReactProvider>
+)
+ 
+`
+    };
+
+    const code4 = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
+import { twMerge } from 'tailwind-merge';
+
+...
+return(
+    <PrimeReactProvider value={{ unstyled: true, pt: {}, ptOptions: { mergeSections: true, mergeProps: true, classNameMergeFunction: twMerge } }}>
+        <App />
+    </PrimeReactProvider>
+)
+ 
+`
+    };
+
+    const code5 = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
+
+export default function MyApp({ Component, pageProps }) {
+    
+    //My Design System with Tailwind
+    const MyDesignSystem = {
+        inputtext: {
+            root: ({ props, context }) => ({
+                className: classNames(
+                    'm-0',
+                    'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                    {
+                        'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                    },
+                    {
+                        'text-lg px-4 py-4': props.size == 'large',
+                        'text-xs px-2 py-2': props.size == 'small',
+                        'p-3 text-base': props.size == null
+                    }
+                )
+            })
+        },
+        panel: {
+            header: ({ props }) => ({
+                className: classNames(
+                    'flex items-center justify-between', // flex and alignments
+                    'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
+                    { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
+                )
+            }),
+            title: 'leading-none font-bold',
+            toggler: {
+                className: classNames(
+                    'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
+                    'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
+                    'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
+                )
+            },
+            togglerIcon: 'inline-block',
+            content: {
+                className: classNames(
+                    'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+                )
+            },
+            transition: TRANSITIONS.toggleable
+        } 
+    };
+
+    return (
+        <PrimeReactProvider value={{ unstyled: true, pt: MyDesignSystem }}>
+            <Component {...pageProps} />
+        </PrimeReactProvider>
+    );
+}
+ 
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS <a href="https://tailwindcss.com/docs/installation/framework-guides">framework guides </a>like Vite for the installation
+                    and make sure to apply the CSS layer configuration above when including the styles of Tailwind as well.
+                </p>
+                <p className="flex align-items-start gap-2">
+                    <Badge value="1" />
+                    <span>
+                        Tailwind uses PurgeCSS internally to remove unused classes, as PrimeReact components are loaded from <i>node_modules</i> the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeReact, otherwise the
+                        classes utilized in the theme will be removed as well.
+                    </span>
+                </p>
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+                <p className="flex align-items-start gap-2">
+                    <Badge value="2" />
+                    <span>
+                        Next step is enabling the <i>unstyled</i> option to remove the default style classes from the components and adding an empty <i>pt</i> so that they can be styled with Tailwind in the next section. Note that if you run your
+                        application at this stage, functionality and accessibility of the components will still work but everything will be transparent as there is no style.
+                    </span>
+                </p>
+                <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+                <p className="flex align-items-start gap-2">
+                    <Badge value="3" />
+                    <span>
+                        <b>Optional:</b> specify the built in <i>Tailwind</i> style of pre-configured Tailwind settings.
+                    </span>
+                </p>
+                <DocSectionCode code={code3} hideToggleCode import hideStackBlitz />
+                <p className="flex align-items-start gap-2">
+                    <Badge value="4" />
+                    <span>
+                        <b>Optional:</b> specify the classNameMergeFunction as <i>twMerge</i> to resolve className conflicts via <a href="https://www.npmjs.com/package/tailwind-merge">tailwind-merge</a>. This will prevent classNames specified in the
+                        global pass through from overriding those specified via pass through in your application.
+                    </span>
+                </p>
+                <DocSectionCode code={code4} hideToggleCode import hideStackBlitz />
+                <p className="flex align-items-start gap-2">
+                    <Badge value="5" />
+                    <span>
+                        At the final step, component styles are provided via a pass through configuration that utilizes Tailwind CSS. The default preset of each component is available at the Tailwind part under theming section of each component so
+                        you'll able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;
+                    </span>
+                </p>
+                <DocSectionCode code={code5} hideToggleCode import hideStackBlitz />
+                <p>Voilà 💙, you now have 90+ awesome React UI components styled with Tailwind that will work in harmony with the rest of your application. Time to customize it to bring in your own style with Tailwind.</p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/terminal/accessibilitydoc.js b/components/doc/terminal/accessibilitydoc.js
new file mode 100644
index 0000000000..6e6b584abd
--- /dev/null
+++ b/components/doc/terminal/accessibilitydoc.js
@@ -0,0 +1,39 @@
+import { DevelopmentSection } from '@/components/doc/common/developmentsection';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Terminal component has an input element that can be described with <i>aria-label</i> or <i>aria-labelledby</i> props. The element that lists the previous commands has <i>aria-live</i> so that changes are received by the screen reader.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus through the input element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Executes the command when focus in on the input element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/terminal/basicdoc.js b/components/doc/terminal/basicdoc.js
new file mode 100644
index 0000000000..7413c75528
--- /dev/null
+++ b/components/doc/terminal/basicdoc.js
@@ -0,0 +1,223 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Terminal } from '@/components/lib/terminal/Terminal';
+import { TerminalService } from '@/components/lib/terminalservice/TerminalService';
+import { useEffect } from 'react';
+
+export function BasicDoc(props) {
+    const commandHandler = (text) => {
+        let response;
+        let argsIndex = text.indexOf(' ');
+        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+        switch (command) {
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
+
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
+
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
+
+            case 'clear':
+                response = null;
+                break;
+
+            default:
+                response = 'Unknown command: ' + command;
+                break;
+        }
+
+        if (response) {
+            TerminalService.emit('response', response);
+        } else {
+            TerminalService.emit('clear');
+        }
+    };
+
+    useEffect(() => {
+        TerminalService.on('command', commandHandler);
+
+        return () => {
+            TerminalService.off('command', commandHandler);
+        };
+    }, []);
+
+    const code = {
+        basic: `
+<Terminal 
+    welcomeMessage="Welcome to PrimeReact" 
+    prompt="primereact $" 
+    pt={{
+        root: 'bg-gray-900 text-white border-round',
+        prompt: 'text-gray-400 mr-2',
+        command: 'text-primary-300',
+        response: 'text-primary-300'
+    }} 
+/>
+        `,
+        javascript: `
+import React, { useEffect } from 'react';
+import { Terminal } from 'primereact/terminal';
+import { TerminalService } from 'primereact/terminalservice';
+
+export default function TerminalDemo() {
+    const commandHandler = (text) => {
+        let response;
+        let argsIndex = text.indexOf(' ');
+        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+        switch (command) {
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
+
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
+
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
+
+            case 'clear':
+                response = null;
+                break;
+
+            default:
+                response = 'Unknown command: ' + command;
+                break;
+        }
+
+        if (response)
+            TerminalService.emit('response', response);
+        else
+            TerminalService.emit('clear');
+    };
+
+    useEffect(() => {
+        TerminalService.on('command', commandHandler);
+
+        return () => {
+            TerminalService.off('command', commandHandler);
+        };
+    }, []);
+
+    return (
+        <div className="card terminal-demo">
+            <p>
+                Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
+            </p>
+            <Terminal 
+                welcomeMessage="Welcome to PrimeReact" 
+                prompt="primereact $" 
+                pt={{
+                    root: 'bg-gray-900 text-white border-round',
+                    prompt: 'text-gray-400 mr-2',
+                    command: 'text-primary-300',
+                    response: 'text-primary-300'
+                }} 
+            />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useEffect } from 'react';
+import { Terminal } from 'primereact/terminal';
+import { TerminalService } from 'primereact/terminalservice';
+
+export default function TerminalDemo() {
+    const commandHandler = (text: string) => {
+        let response: string;
+        let argsIndex: number = text.indexOf(' ');
+        let command: string = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+        switch (command) {
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
+
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
+
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
+
+            case 'clear':
+                response = null;
+                break;
+
+            default:
+                response = 'Unknown command: ' + command;
+                break;
+        }
+
+        if (response)
+            TerminalService.emit('response', response);
+        else
+            TerminalService.emit('clear');
+    };
+
+    useEffect(() => {
+        TerminalService.on('command', commandHandler);
+
+        return () => {
+            TerminalService.off('command', commandHandler);
+        };
+    }, []);
+
+    return (
+        <div className="card terminal-demo">
+            <p>
+                Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
+            </p>
+            <Terminal 
+                welcomeMessage="Welcome to PrimeReact" 
+                prompt="primereact $" 
+                pt={{
+                    root: 'bg-gray-900 text-white border-round',
+                    prompt: 'text-gray-400 mr-2',
+                    command: 'text-primary-300',
+                    response: 'text-primary-300'
+                }} 
+            />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Terminal is interacted with <i>TerminalService</i> api using <i>command</i>, <i>response</i> and <i>clear</i> events. The <i>command</i> event requires a callback to handle the commands, the <i>response</i>
+                    emits the response of the command and emitting <i>clear</i> reset the terminal.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <p>
+                    Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
+                </p>
+                <Terminal
+                    welcomeMessage="Welcome to PrimeReact"
+                    prompt="primereact $"
+                    pt={{
+                        root: 'bg-gray-900 text-white border-round',
+                        prompt: 'text-gray-400 mr-2',
+                        command: 'text-primary-300',
+                        response: 'text-primary-300'
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/terminal/importdoc.js b/components/doc/terminal/importdoc.js
new file mode 100644
index 0000000000..4f20218972
--- /dev/null
+++ b/components/doc/terminal/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Terminal } from 'primereact/terminal';
+import { TerminalService } from 'primereact/terminalservice';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/terminal/pt/wireframe.js b/components/doc/terminal/pt/wireframe.js
new file mode 100644
index 0000000000..1e682380ad
--- /dev/null
+++ b/components/doc/terminal/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/terminal.jpg" alt="terminal" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/terminal/styledoc.js b/components/doc/terminal/styledoc.js
new file mode 100644
index 0000000000..d3176043ac
--- /dev/null
+++ b/components/doc/terminal/styledoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-terminal</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-content</td>
+                            <td>Content of terminal.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-prompt</td>
+                            <td>Prompt text.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-response</td>
+                            <td>Command response.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-input</td>
+                            <td>Input element to enter commands.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/terminal/theming/styleddoc.js b/components/doc/terminal/theming/styleddoc.js
new file mode 100644
index 0000000000..72be5433cd
--- /dev/null
+++ b/components/doc/terminal/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-terminal</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-content</td>
+                            <td>Content of terminal.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-prompt</td>
+                            <td>Prompt text.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-response</td>
+                            <td>Command response.</td>
+                        </tr>
+                        <tr>
+                            <td>p-terminal-input</td>
+                            <td>Input element to enter commands.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/terminal/theming/tailwinddoc.js b/components/doc/terminal/theming/tailwinddoc.js
new file mode 100644
index 0000000000..6ad15fa0f6
--- /dev/null
+++ b/components/doc/terminal/theming/tailwinddoc.js
@@ -0,0 +1,94 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    terminal: {
+        root: {
+            className: classNames('border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto')
+        },
+        container: 'flex items-center',
+        prompt: 'text-yellow-400',
+        commandtext: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useEffect } from 'react';
+import { Terminal } from 'primereact/terminal';
+import { TerminalService } from 'primereact/terminalservice';
+
+export default function UnstyledDemo() {
+    const commandHandler = (text) => {
+        let response;
+        let argsIndex = text.indexOf(' ');
+        let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
+
+        switch (command) {
+            case 'date':
+                response = 'Today is ' + new Date().toDateString();
+                break;
+
+            case 'greet':
+                response = 'Hola ' + text.substring(argsIndex + 1) + '!';
+                break;
+
+            case 'random':
+                response = Math.floor(Math.random() * 100);
+                break;
+
+            case 'clear':
+                response = null;
+                break;
+
+            default:
+                response = 'Unknown command: ' + command;
+                break;
+        }
+
+        if (response)
+            TerminalService.emit('response', response);
+        else
+            TerminalService.emit('clear');
+    };
+
+    useEffect(() => {
+        TerminalService.on('command', commandHandler);
+
+        return () => {
+            TerminalService.off('command', commandHandler);
+        };
+    }, []);
+
+    return (
+        <div className="card text-gray-700 dark:text-white/80">
+            <p>
+                Enter "<strong>date</strong>" to display the current date, "<strong>greet {'{0}'}</strong>" for a message, "<strong>random</strong>" to get a random number and "<strong>clear</strong>" to clear all commands.
+            </p>
+            <Terminal welcomeMessage="Welcome to PrimeReact" prompt="primereact $" />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/theming/architecturedoc.js b/components/doc/theming/architecturedoc.js
new file mode 100644
index 0000000000..f67de29945
--- /dev/null
+++ b/components/doc/theming/architecturedoc.js
@@ -0,0 +1,18 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ArchitectureDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p className="notification">
+                    <strong>Note</strong>: In near future, theming architecture of the styled mode will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach.
+                </p>
+                <p>
+                    PrimeReact is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into two parts, core and theme. The
+                    core resides inside PrimeReact to implement the structure of the components such as positioning whereas theme brings the colors and spacing.
+                </p>
+                <img alt="Architecture" src="https://primefaces.org/cdn/primereact/images/architecture.jpg" className="w-full" />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/theming/builtinthemesdoc.js b/components/doc/theming/builtinthemesdoc.js
new file mode 100644
index 0000000000..fc48ef43c5
--- /dev/null
+++ b/components/doc/theming/builtinthemesdoc.js
@@ -0,0 +1,64 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function BuiltInThemesDoc(props) {
+    const code = {
+        basic: `
+primereact/resources/themes/bootstrap4-light-blue/theme.css
+primereact/resources/themes/bootstrap4-light-purple/theme.css
+primereact/resources/themes/bootstrap4-dark-blue/theme.css
+primereact/resources/themes/bootstrap4-dark-purple/theme.css
+primereact/resources/themes/md-light-indigo/theme.css
+primereact/resources/themes/md-light-deeppurple/theme.css
+primereact/resources/themes/md-dark-indigo/theme.css
+primereact/resources/themes/md-dark-deeppurple/theme.css
+primereact/resources/themes/mdc-light-indigo/theme.css
+primereact/resources/themes/mdc-light-deeppurple/theme.css
+primereact/resources/themes/mdc-dark-indigo/theme.css
+primereact/resources/themes/mdc-dark-deeppurple/theme.css
+primereact/resources/themes/tailwind-light/theme.css
+primereact/resources/themes/fluent-light/theme.css
+primereact/resources/themes/lara-light-blue/theme.css
+primereact/resources/themes/lara-light-indigo/theme.css
+primereact/resources/themes/lara-light-purple/theme.css
+primereact/resources/themes/lara-light-teal/theme.css
+primereact/resources/themes/lara-dark-blue/theme.css
+primereact/resources/themes/lara-dark-indigo/theme.css
+primereact/resources/themes/lara-dark-purple/theme.css
+primereact/resources/themes/lara-dark-teal/theme.css
+primereact/resources/themes/soho-light/theme.css
+primereact/resources/themes/soho-dark/theme.css
+primereact/resources/themes/viva-light/theme.css
+primereact/resources/themes/viva-dark/theme.css
+primereact/resources/themes/mira/theme.css
+primereact/resources/themes/nano/theme.css
+primereact/resources/themes/saga-blue/theme.css
+primereact/resources/themes/saga-green/theme.css
+primereact/resources/themes/saga-orange/theme.css
+primereact/resources/themes/saga-purple/theme.css
+primereact/resources/themes/vela-blue/theme.css
+primereact/resources/themes/vela-green/theme.css
+primereact/resources/themes/vela-orange/theme.css
+primereact/resources/themes/vela-purple/theme.css
+primereact/resources/themes/arya-blue/theme.css
+primereact/resources/themes/arya-green/theme.css
+primereact/resources/themes/arya-orange/theme.css
+primereact/resources/themes/arya-purple/theme.css
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths. For a live preview, use the configurator{' '}
+                    <span className="border-round inline-flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center bg-primary">
+                        <span className="pi pi-palette" />
+                    </span>{' '}
+                    at the topbar to switch themes.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz codeClassName="h-20rem overflow-auto" />
+        </>
+    );
+}
diff --git a/components/doc/theming/cssvariablesdoc.js b/components/doc/theming/cssvariablesdoc.js
new file mode 100644
index 0000000000..fcfff0ab8e
--- /dev/null
+++ b/components/doc/theming/cssvariablesdoc.js
@@ -0,0 +1,14 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function CSSVariablesDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Each PrimeReact theme exports numerous CSS variables, refer to <Link href="http://github.com/colors">Colors</Link> page for more details.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/theming/customthemedoc.js b/components/doc/theming/customthemedoc.js
new file mode 100644
index 0000000000..b7397463ab
--- /dev/null
+++ b/components/doc/theming/customthemedoc.js
@@ -0,0 +1,62 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function CustomThemeDoc(props) {
+    const code1 = {
+        basic: `
+sass --update themes/mytheme/theme.scss:themes/mytheme/theme.css
+        `
+    };
+
+    const code2 = {
+        basic: `
+import './assets/theme.css';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Themes are created with SASS using the <i>primereact-sass-theme</i> project available at <a href="http://github.com/primefaces/primereact-sass-theme">github</a>. This repository contains all the scss files for the components and
+                    the variables of the built-in themes so that you may customize an existing theme or create your own. The scss variables used in a theme are available at the{' '}
+                    <a href="https://www.primefaces.org/designer/api/primereact/9.0.0">SASS API</a> documentation.
+                </p>
+                <p>
+                    There are 2 alternatives to create your own theme. First option is compiling a theme with command line sass and final alternative is embedding scss files within your project to let your build environment do the compilation. In all
+                    cases, the generated theme file should be imported to your project. We've created a video tutorial that demonstrates all three options.
+                </p>
+
+                <h3>Theme SCSS</h3>
+                <p>
+                    The theme scss is available as open source at <a href="http://github.com/primefaces/primereact-sass-theme">primereact-sass-theme</a> repository. The <i>theme-base</i> folder contains the theming structure of the components, themes
+                    under
+                    <i>themes</i> folder import the base and define the SCSS variables. The <i>themes</i> folder also contains all the built-in themes so you can customize their code as well.
+                </p>
+                <p>
+                    To create your own theme, <a href="https://github.com/primefaces/primereact-sass-theme/releases">download</a> the release matching your PrimeReact version and access the <i>themes/mytheme</i> folder. The sass variables to
+                    customize are available under the
+                    <i>variables</i> folder. The <i>_fonts</i> file can be used to define a custom font for your project whereas the optional <i>_extensions</i> file is provided to add overrides to the components designs. The <i>theme.scss</i> file
+                    imports the theme files along with the <i>theme-base</i> folder at the root to combine everything together. Next step would be compilation of the scss that can either be command line or within your project.
+                </p>
+
+                <h3>Compile SCSS Manually</h3>
+                <p>
+                    Once your theme is ready run the following command to compile it. Note that <a href="https://www.npmjs.com/package/sass">sass</a> command should be available in your terminal.
+                </p>
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+                <p>
+                    Then copy and import the theme.css file in your application. For example, in <a href="https://nextjs.org/docs/basic-features/built-in-css-support">Next.js</a>, ideal location could be the <i>_app.js</i>.
+                </p>
+                <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+
+                <h3>Build Time Compilation</h3>
+                <p>
+                    This approach eliminates the manual compilation by delegating it to your build environment that has the ability to compile SCSS. Copy the <i>theme-base</i> folder along with <i>themes/mytheme</i> folder to your application where
+                    assets reside. At a suitable entry point like <i>_app.js</i> or <i>index.js</i>, import the <i>theme.scss</i> from <i>assets/themes/mytheme</i>. That would be it, during build time, your project will compile the sass and import
+                    the theme. Any changes to your theme will be reflected instantly.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/theming/primeflexdoc.js b/components/doc/theming/primeflexdoc.js
new file mode 100644
index 0000000000..6df01e91e6
--- /dev/null
+++ b/components/doc/theming/primeflexdoc.js
@@ -0,0 +1,35 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function PrimeFlexDoc(props) {
+    const code = {
+        basic: `
+<div className="flex flex-column md:flex-row justify-content-between my-5">
+    <Button type="button" label="Button 1" className="mb-3 md:mb-0"></Button>
+    <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0"></Button>
+    <Button type="button" label="Button 3" className="p-button-help"></Button>
+</div>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    <a href="https://primeflex.org/">PrimeFlex</a> is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeReact can be used with any CSS utility library like bootstrap and
+                    tailwind however PrimeFlex has benefits like integration with PrimeReact themes using CSS variables so that colors classes e.g. <i>bg-blue-500</i> receive the color code from the PrimeReact theme being used. PrimeReact follows the
+                    CSS utility approach of PrimeFlex and currently does not provide an extended style property like <i>sx</i>. Same approach is also utilized in <a href="https://blocks.primereact.org/">PrimeBlocks for PrimeReact</a> project as well.
+                </p>
+
+                <p>Here is an example to demonstrate how to align 3 buttons horizontally on bigger screens and display them as stacked on smaller ones.</p>
+            </DocSectionText>
+            <div className="card flex flex-column md:flex-row justify-content-between my-5">
+                <Button type="button" label="Button 1" className="mb-3 md:mb-0" />
+                <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0" />
+                <Button type="button" label="Button 3" className="p-button-help" />
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/theming/scaledoc.js b/components/doc/theming/scaledoc.js
new file mode 100644
index 0000000000..11147b9959
--- /dev/null
+++ b/components/doc/theming/scaledoc.js
@@ -0,0 +1,24 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ScaleDoc(props) {
+    const code = {
+        basic: `
+html {
+    font-size: 14px;
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact utilizes <i>rem</i> units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your
+                    document. Code below sets the scale of the components based on <i>16px</i>. If you require bigger or smaller components, just change this variable and components will scale accordingly.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/theming/scopedstyling/cssinjsdoc.js b/components/doc/theming/scopedstyling/cssinjsdoc.js
new file mode 100644
index 0000000000..dd487ea9e2
--- /dev/null
+++ b/components/doc/theming/scopedstyling/cssinjsdoc.js
@@ -0,0 +1,63 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Panel } from '@/components/lib/panel/Panel';
+import css from 'styled-jsx/css';
+
+export function CssInJsDoc(props) {
+    const { className, styles } = css.resolve`
+        .p-panel > :global(.p-panel-header) {
+            background-color: #54b5a6;
+            color: #ffffff;
+        }
+    `;
+
+    const code = {
+        basic: `
+import React from 'react';
+import { Panel } from 'primereact/panel';
+import css from 'styled-jsx/css';
+
+export default function PanelDemo() {
+    const {className, styles} = css.resolve\`
+        .p-panel > :global(.p-panel-header) {
+            background-color: #54b5a6;
+            color: #ffffff;
+        }
+    \`;
+
+    return (
+        <>
+            <style jsx>{styles}</style>
+            <Panel header="CSS Module" className={className}>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </Panel>
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    CSS-in-JS solutions are also popular to implement scoped css, as an example we'll be using <a href="https://github.com/vercel/styled-jsx">styled-jsx</a> to customize our panel. Note that use of <i>:global</i> does not make the
+                    styling global and only removes the namespacing from the inner element as it is enough to scope the main container element, in this case <i>.p-panel</i>.
+                </p>
+            </DocSectionText>
+            <style>{styles}</style>
+            <div className="card">
+                <Panel header="Styled Component" className={className}>
+                    <p className="p-0 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/theming/scopedstyling/cssmodulesdoc.js b/components/doc/theming/scopedstyling/cssmodulesdoc.js
new file mode 100644
index 0000000000..96cde3cd89
--- /dev/null
+++ b/components/doc/theming/scopedstyling/cssmodulesdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Panel } from '@/components/lib/panel/Panel';
+import panelDemoModule from './paneldemo.module.css';
+
+export function CSSModulesDoc(props) {
+    const code1 = {
+        basic: `
+/* paneldemo.module.css */
+.mypanel :global(.p-panel-header) {
+    background-color: #07c4e8;
+    color: #ffffff;
+}
+        `
+    };
+
+    const code2 = {
+        basic: `
+import React from 'react';
+import { Panel } from 'primereact/panel';
+import panelDemoModule from './paneldemo.module.css';
+
+export default function PanelDemo() {
+    return (
+        <Panel header="CSS Module" className={panelDemoModule.mypanel}>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </Panel>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    CSS modules allow importing a css file to your react component and refer the classes inside using a variable. To provide cascaded classes that is applied to external components, use <i>:global</i> selectors (check the{' '}
+                    <a href="https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions">CSS Modules documentation</a>). NextJS has built-in support for CSS modules allowing css files with <i>.module.css</i> suffix to be
+                    interpreted as modules.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Panel header="CSS Module" className={panelDemoModule.mypanel}>
+                    <p className="p-0 m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/theming/scopedstyling/namedclassdoc.js b/components/doc/theming/scopedstyling/namedclassdoc.js
new file mode 100644
index 0000000000..d0f954e3ab
--- /dev/null
+++ b/components/doc/theming/scopedstyling/namedclassdoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Panel } from '@/components/lib/panel/Panel';
+
+export function NamedClassDoc(props) {
+    const code1 = {
+        basic: `
+/* .custompanel.css */
+.mypanel .p-panel-header {
+    background-color: #07c4e8;
+    color: #ffffff;
+}
+        `
+    };
+
+    const code2 = {
+        basic: `
+import React from 'react';
+import { Panel } from 'primereact/panel';
+import './custompanel.css';
+
+export default function PanelDemo() {
+    return (
+        <Panel header="Named ClassName" className="mypanel">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </Panel>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A named class is bound to the <i>className</i> property of a component and the CSS is included with an import. Note that, the css still is still bundled globally so prefer this approach if your application doesn't have a built-in
+                    solution to do CSS scoping.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Panel header="Named ClassName" className="mypanel">
+                    <p className="m-0">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel>
+            </div>
+            <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/theming/scopedstyling/paneldemo.module.css b/components/doc/theming/scopedstyling/paneldemo.module.css
new file mode 100644
index 0000000000..e51b3dbbfd
--- /dev/null
+++ b/components/doc/theming/scopedstyling/paneldemo.module.css
@@ -0,0 +1,4 @@
+.mypanel > [class~="p-panel-header"] {
+    background-color: #626ae9;
+    color: #ffffff;
+}
\ No newline at end of file
diff --git a/components/doc/theming/switchthemesdoc.js b/components/doc/theming/switchthemesdoc.js
new file mode 100644
index 0000000000..aa3c785539
--- /dev/null
+++ b/components/doc/theming/switchthemesdoc.js
@@ -0,0 +1,58 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function SwitchThemesDoc(props) {
+    const code1 = {
+        basic: `
+import { PrimeReactContext } from 'primereact/api';
+
+//Use in a component
+const { changeTheme } = useContext(PrimeReactContext);
+
+changeTheme(currentTheme: string, newTheme: string, linkElementId: string, callback: Function)
+        `
+    };
+
+    const code2 = {
+        basic: `
+<link id="theme-link" rel="stylesheet" href="http://github.com/themes/lara-light-blue/theme.css">
+        `
+    };
+
+    const code3 = {
+        basic: `
+<Head>
+    <link id="theme-link" rel="stylesheet" href="http://github.com/themes/lara-light-blue/theme.css">
+</Head>
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p className="notification">
+                    Solution below works however there is room for improvement. The upcoming styling api will greatly improve dynamic theme switching ability, eliminates the prerequisites with the introduction of CSS variables and dynamic imports.
+                </p>
+                <p>
+                    Themes can be dynamically changed using the <i>changeTheme</i> function in <i>PrimeReactContext</i>. For this feature to work, there are two prerequisites. To begin with, the themes should be publicly available under the{' '}
+                    <i>public</i> folder in your project by copying them from PrimeReact <i>resources/themes</i> folder. Second part is making the theme.css accessible via a link element so that the id of the link can be provided as the 3rd parameter
+                    to the <i>changeTheme</i> function.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+            <div className="doc-section-description">
+                <p>
+                    If you have access to the <i>index.html</i> directly, the link can be placed at head section.
+                </p>
+            </div>
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+            <div className="doc-section-description">
+                <p>
+                    <a href="https://nextjs.org/">Next.js</a> applications can configure the link element using <a href="https://nextjs.org/docs/api-reference/next/head">next/head</a> component or custom{' '}
+                    <a href="https://nextjs.org/docs/advanced-features/custom-document">document</a>.
+                </p>
+            </div>
+            <DocSectionCode code={code3} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/theming/utilsdoc.js b/components/doc/theming/utilsdoc.js
new file mode 100644
index 0000000000..798ce13204
--- /dev/null
+++ b/components/doc/theming/utilsdoc.js
@@ -0,0 +1,59 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function UtilsDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>In addition to PrimeFlex, PrimeReact has a couple of css utility classes on its own as well.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Description</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-component</td>
+                            <td>Applies component theming such as font-family and font-size to an element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-fluid</td>
+                            <td>Applies 100% width to all descendant components.</td>
+                        </tr>
+                        <tr>
+                            <td>p-disabled</td>
+                            <td>Applies an opacity to display as disabled.</td>
+                        </tr>
+                        <tr>
+                            <td>p-hidden-accessible</td>
+                            <td>Element becomes visually hidden however accessibility is still available.</td>
+                        </tr>
+                        <tr>
+                            <td>p-reset</td>
+                            <td>Resets the browsers defaults.</td>
+                        </tr>
+                        <tr>
+                            <td>p-link</td>
+                            <td>Renders a button as a link.</td>
+                        </tr>
+                        <tr>
+                            <td>p-error</td>
+                            <td>Indicates an error text.</td>
+                        </tr>
+                        <tr>
+                            <td>p-invalid</td>
+                            <td>Applies the invalid style to a text or a form field.</td>
+                        </tr>
+                        <tr>
+                            <td>p-text-secondary</td>
+                            <td>Applies the text color of the theme with the secondary priority.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/accessibilitydoc.js b/components/doc/tieredmenu/accessibilitydoc.js
new file mode 100644
index 0000000000..ccf8136d18
--- /dev/null
+++ b/components/doc/tieredmenu/accessibilitydoc.js
@@ -0,0 +1,106 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                TieredMenu component uses the <i>menubar</i> role with <i>aria-orientation</i> set to "vertical" and the value to describe the menu can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Each list item has a{' '}
+                <i>presentation</i> role whereas anchor elements have a <i>menuitem</i> role with <i>aria-label</i> referring to the label of the item and <i>aria-disabled</i> defined if the item is disabled. A submenu within a TieredMenu uses the{' '}
+                <i>menu</i> role with an <i>aria-labelledby</i> defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have <i>aria-haspopup</i>, <i>aria-expanded</i> and <i>aria-controls</i> to define the
+                relation between the item and the submenu.
+            </p>
+
+            <p>
+                In popup mode, the component implicitly manages the <i>aria-expanded</i>, <i>aria-haspopup</i> and <i>aria-controls</i> attributes of the target element to define the relation between the target and the popup.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>Opens a submenu if there is one available and moves focus to the first item.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>Closes a submenu and moves focus to the root item of the closed submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>home</i>
+                            </td>
+                            <td>Moves focus to the first menuitem within the submenu.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>end</i>
+                            </td>
+                            <td>Moves focus to the last menuitem within the submenu.</td>
+                        </tr>
+
+                        <tr>
+                            <td>
+                                <i>any printable character</i>
+                            </td>
+                            <td>Moves focus to the menuitem whose label starts with the characters being typed.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/tieredmenu/basicdoc.js b/components/doc/tieredmenu/basicdoc.js
new file mode 100644
index 0000000000..efdc69f880
--- /dev/null
+++ b/components/doc/tieredmenu/basicdoc.js
@@ -0,0 +1,256 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TieredMenu } from '@/components/lib/tieredmenu/TieredMenu';
+
+export function BasicDoc(props) {
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file'
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open'
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack'
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp'
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<TieredMenu model={items} breakpoint="767px" />
+        `,
+        javascript: `
+import React from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+
+export default function BasicDemo() {
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file'
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open'
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack'
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <TieredMenu model={items} breakpoint="767px" />
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file'
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open'
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack'
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <TieredMenu model={items} breakpoint="767px" />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TieredMenu requires a collection of menuitems as its <i>model</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TieredMenu model={items} breakpoint="767px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/commanddoc.js b/components/doc/tieredmenu/commanddoc.js
new file mode 100644
index 0000000000..46ba0b686f
--- /dev/null
+++ b/components/doc/tieredmenu/commanddoc.js
@@ -0,0 +1,220 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TieredMenu } from '@/components/lib/tieredmenu/TieredMenu';
+import { useRef } from 'react';
+import { Toast } from '@/components/lib/toast/Toast';
+
+export function CommandDoc(props) {
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<TieredMenu model={items} breakpoint="767px" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { Toast } from 'primereact/toast';
+
+export default function CommandDemo() {
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        }
+    ];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <TieredMenu model={items} breakpoint="767px" />
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { Toast } from 'primereact/toast';
+
+export default function CommandDemo() {
+    const toast = useRef<Toast>(null);
+    const items: MenuItem[] = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    command: () => {
+                        toast.current.show({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    command: () => {
+                        toast.current.show({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 });
+                    }
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 });
+            }
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Sync',
+            icon: 'pi pi-cloud',
+            items: [
+                {
+                    label: 'Import',
+                    icon: 'pi pi-cloud-download',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 });
+                    }
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-cloud-upload',
+                    command: () => {
+                        toast.current.show({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 });
+                    }
+                }
+            ]
+        }
+    ];
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <TieredMenu model={items} breakpoint="767px" />
+        </>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>command</i> property defines the callback to run when an item is activated by click or a key event.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <TieredMenu model={items} breakpoint="767px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/importdoc.js b/components/doc/tieredmenu/importdoc.js
new file mode 100644
index 0000000000..aa9831da9f
--- /dev/null
+++ b/components/doc/tieredmenu/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { TieredMenu } from 'primereact/tieredmenu';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/popupdoc.js b/components/doc/tieredmenu/popupdoc.js
new file mode 100644
index 0000000000..b993951936
--- /dev/null
+++ b/components/doc/tieredmenu/popupdoc.js
@@ -0,0 +1,271 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { TieredMenu } from '@/components/lib/tieredmenu/TieredMenu';
+import { useRef } from 'react';
+
+export function PopupDoc(props) {
+    const menu = useRef(null);
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file'
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open'
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack'
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp'
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<TieredMenu model={items} popup ref={menu} breakpoint="767px" />
+<Button label="Show" onClick={(e) => menu.current.toggle(e)} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { TieredMenu } from 'primereact/tieredmenu';
+
+export default function PopupDemo() {
+    const menu = useRef(null);
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file'
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open'
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack'
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <TieredMenu model={items} popup ref={menu} breakpoint="767px" />
+            <Button label="Show" onClick={(e) => menu.current.toggle(e)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { MenuItem } from 'primereact/menuitem';
+
+export default function PopupDemo() {
+    const menu = useRef(null);
+    const items: MenuItem[] = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file'
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open'
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times'
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search'
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack'
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <TieredMenu model={items} popup ref={menu} breakpoint="767px" />
+            <Button label="Show" onClick={(e) => menu.current.toggle(e)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Popup mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> method with an event of the target.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TieredMenu model={items} popup ref={menu} breakpoint="767px" />
+                <Button label="Toggle" onClick={(e) => menu.current.toggle(e)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/pt/wireframe.js b/components/doc/tieredmenu/pt/wireframe.js
new file mode 100644
index 0000000000..0c12755674
--- /dev/null
+++ b/components/doc/tieredmenu/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="tieredmenu" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/tieredmenu/routerdoc.js b/components/doc/tieredmenu/routerdoc.js
new file mode 100644
index 0000000000..2c98a3cd49
--- /dev/null
+++ b/components/doc/tieredmenu/routerdoc.js
@@ -0,0 +1,166 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TieredMenu } from '@/components/lib/tieredmenu/TieredMenu';
+import { useRouter } from 'next/router';
+
+export function RouterDoc(props) {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    url: 'https://vitejs.dev/'
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<TieredMenu model={items} breakpoint="767px" />
+        `,
+        javascript: `
+import React from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    url: 'https://vitejs.dev/'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <TieredMenu model={items} breakpoint="767px" />
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { useRouter } from 'next/router';
+
+export default function RouterDemo() {
+    const router = useRouter();
+    const items: MenuItem[] = [
+        {
+            label: 'Router',
+            icon: 'pi pi-palette',
+            items: [
+                {
+                    label: 'Styled',
+                    url: '/theming'
+                },
+                {
+                    label: 'Unstyled',
+                    url: '/unstyled'
+                }
+            ]
+        },
+        {
+            label: 'Programmatic',
+            icon: 'pi pi-link',
+            command: () => {
+                router.push('/installation');
+            }
+        },
+        {
+            label: 'External',
+            icon: 'pi pi-home',
+            items: [
+                {
+                    label: 'React.js',
+                    url: 'https://react.dev/'
+                },
+                {
+                    label: 'Vite.js',
+                    url: 'https://vitejs.dev/'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <TieredMenu model={items} breakpoint="767px" />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Items with navigation are defined with <i>command</i> and <i>url</i> property to be able to use a router link component, an external link or programmatic navigation.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TieredMenu model={items} breakpoint="767px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/styledoc.js b/components/doc/tieredmenu/styledoc.js
new file mode 100644
index 0000000000..1a8863ba97
--- /dev/null
+++ b/components/doc/tieredmenu/styledoc.js
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tieredmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/templatedoc.js b/components/doc/tieredmenu/templatedoc.js
new file mode 100644
index 0000000000..4dae5bf161
--- /dev/null
+++ b/components/doc/tieredmenu/templatedoc.js
@@ -0,0 +1,343 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TieredMenu } from '@/components/lib/tieredmenu/TieredMenu';
+import { Badge } from '@/components/lib/badge/Badge';
+
+export function TemplateDoc(props) {
+    const itemRenderer = (item) => (
+        <a className="flex align-items-center p-menuitem-link">
+            <span className={item.icon} />
+            <span className="mx-2">{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file',
+                            shortcut: '⌘+N',
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image',
+                            shortcut: '⌘+I',
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video',
+                            shortcut: '⌘+L',
+                            template: itemRenderer
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    shortcut: '⌘+P',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy',
+                    shortcut: '⌘+C',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    shortcut: '⌘+D',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            shortcut: '⌘+S',
+            template: itemRenderer
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack',
+                    badge: 2,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp',
+                    badge: 3,
+                    template: itemRenderer
+                }
+            ]
+        }
+    ];
+
+    const code = {
+        basic: `
+<TieredMenu model={items} breakpoint="767px" />
+        `,
+        javascript: `
+import React from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item) => (
+        <a className="flex align-items-center p-menuitem-link">
+            <span className={item.icon} />
+            <span className="mx-2">{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file',
+                            shortcut: '⌘+N',
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image',
+                            shortcut: '⌘+I',
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video',
+                            shortcut: '⌘+L',
+                            template: itemRenderer
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    shortcut: '⌘+P',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy',
+                    shortcut: '⌘+C',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    shortcut: '⌘+D',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            shortcut: '⌘+S',
+            template: itemRenderer
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack',
+                    badge: 2,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp',
+                    badge: 3,
+                    template: itemRenderer
+                }
+            ]
+        }
+    ]
+
+    return (
+        <TieredMenu model={items} breakpoint="767px" />
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+import { MenuItem } from 'primereact/menuitem';
+import { Badge } from 'primereact/badge';
+
+export default function TemplateDemo() {
+    const itemRenderer = (item) => (
+        <a className="flex align-items-center p-menuitem-link">
+            <span className={item.icon} />
+            <span className="mx-2">{item.label}</span>
+            {item.badge && <Badge className="ml-auto" value={item.badge} />}
+            {item.shortcut && <span className="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{item.shortcut}</span>}
+        </a>
+    );
+    const items: MenuItem[] = [
+        {
+            label: 'File',
+            icon: 'pi pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-plus',
+                    items: [
+                        {
+                            label: 'Document',
+                            icon: 'pi pi-file',
+                            shortcut: '⌘+N',
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Image',
+                            icon: 'pi pi-image',
+                            shortcut: '⌘+I',
+                            template: itemRenderer
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-video',
+                            shortcut: '⌘+L',
+                            template: itemRenderer
+                        }
+                    ]
+                },
+                {
+                    label: 'Open',
+                    icon: 'pi pi-folder-open',
+                    shortcut: '⌘+O',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Print',
+                    icon: 'pi pi-print',
+                    shortcut: '⌘+P',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-file-edit',
+            items: [
+                {
+                    label: 'Copy',
+                    icon: 'pi pi-copy',
+                    shortcut: '⌘+C',
+                    template: itemRenderer
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-times',
+                    shortcut: '⌘+D',
+                    template: itemRenderer
+                }
+            ]
+        },
+        {
+            label: 'Search',
+            icon: 'pi pi-search',
+            shortcut: '⌘+S',
+            template: itemRenderer
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Share',
+            icon: 'pi pi-share-alt',
+            items: [
+                {
+                    label: 'Slack',
+                    icon: 'pi pi-slack',
+                    badge: 2,
+                    template: itemRenderer
+                },
+                {
+                    label: 'Whatsapp',
+                    icon: 'pi pi-whatsapp',
+                    badge: 3,
+                    template: itemRenderer
+                }
+            ]
+        }
+    ]
+
+    return (
+        <TieredMenu model={items} breakpoint="767px" />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TieredMenu offers item customization with the items <i>template</i> property that receives the item instance and returns an element.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TieredMenu model={items} breakpoint="767px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/theming/styleddoc.js b/components/doc/tieredmenu/theming/styleddoc.js
new file mode 100644
index 0000000000..43cde59cbb
--- /dev/null
+++ b/components/doc/tieredmenu/theming/styleddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tieredmenu</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menu-list</td>
+                            <td>List element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem</td>
+                            <td>Menuitem element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-text</td>
+                            <td>Label of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-menuitem-icon</td>
+                            <td>Icon of a menuitem.</td>
+                        </tr>
+                        <tr>
+                            <td>p-submenu-icon</td>
+                            <td>Arrow icon of a submenu.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tieredmenu/theming/tailwinddoc.js b/components/doc/tieredmenu/theming/tailwinddoc.js
new file mode 100644
index 0000000000..70e659a11b
--- /dev/null
+++ b/components/doc/tieredmenu/theming/tailwinddoc.js
@@ -0,0 +1,214 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+export const TRANSITIONS = {
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {
+    tieredmenu: {
+        root: {
+            className: classNames('py-1 bg-white border border-gray-300 rounded-lg w-[12.5rem]', 'dark:border-blue-900/40 dark:bg-gray-900')
+        },
+        menu: {
+            className: classNames('outline-none', 'm-0 p-0 list-none')
+        },
+        menuitem: 'relative',
+        content: ({ context }) => ({
+            className: classNames(
+                'transition-shadow duration-200 border-none rounded-none',
+                'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80', //Hover
+                {
+                    'text-gray-700': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                }
+            )
+        }),
+        action: ({ context }) => ({
+            className: classNames('py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden', {
+                'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                'text-blue-600 bg-blue-100': context.active
+            })
+        }),
+        icon: 'mr-2',
+        submenuicon: 'ml-auto',
+        separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
+        submenu: {
+            className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0')
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { TieredMenu } from 'primereact/tieredmenu';
+
+export default function UnstyledDemo() {
+    const items = [
+        {
+            label: 'File',
+            icon: 'pi pi-fw pi-file',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-plus',
+                    items: [
+                        {
+                            label: 'Bookmark',
+                            icon: 'pi pi-fw pi-bookmark'
+                        },
+                        {
+                            label: 'Video',
+                            icon: 'pi pi-fw pi-video'
+                        }
+                    ]
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-trash'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-fw pi-external-link'
+                }
+            ]
+        },
+        {
+            label: 'Edit',
+            icon: 'pi pi-fw pi-pencil',
+            items: [
+                {
+                    label: 'Left',
+                    icon: 'pi pi-fw pi-align-left'
+                },
+                {
+                    label: 'Right',
+                    icon: 'pi pi-fw pi-align-right'
+                },
+                {
+                    label: 'Center',
+                    icon: 'pi pi-fw pi-align-center'
+                },
+                {
+                    label: 'Justify',
+                    icon: 'pi pi-fw pi-align-justify'
+                }
+            ]
+        },
+        {
+            label: 'Users',
+            icon: 'pi pi-fw pi-user',
+            items: [
+                {
+                    label: 'New',
+                    icon: 'pi pi-fw pi-user-plus'
+                },
+                {
+                    label: 'Delete',
+                    icon: 'pi pi-fw pi-user-minus'
+                },
+                {
+                    label: 'Search',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        {
+                            label: 'Filter',
+                            icon: 'pi pi-fw pi-filter',
+                            items: [
+                                {
+                                    label: 'Print',
+                                    icon: 'pi pi-fw pi-print'
+                                }
+                            ]
+                        },
+                        {
+                            icon: 'pi pi-fw pi-bars',
+                            label: 'List'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            label: 'Events',
+            icon: 'pi pi-fw pi-calendar',
+            items: [
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Save',
+                            icon: 'pi pi-fw pi-calendar-plus'
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                },
+                {
+                    label: 'Archive',
+                    icon: 'pi pi-fw pi-calendar-times',
+                    items: [
+                        {
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            separator: true
+        },
+        {
+            label: 'Quit',
+            icon: 'pi pi-fw pi-power-off'
+        }
+    ];
+
+    return (
+        <div className="card flex justify-center">
+            <TieredMenu model={items} breakpoint="767px" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/timeline/accessibilitydoc.js b/components/doc/timeline/accessibilitydoc.js
new file mode 100644
index 0000000000..feae3cb421
--- /dev/null
+++ b/components/doc/timeline/accessibilitydoc.js
@@ -0,0 +1,13 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.</p>
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/timeline/alignmentdoc.js b/components/doc/timeline/alignmentdoc.js
new file mode 100644
index 0000000000..d6fe5087ff
--- /dev/null
+++ b/components/doc/timeline/alignmentdoc.js
@@ -0,0 +1,86 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Timeline } from '@/components/lib/timeline/Timeline';
+
+export function AlignmentDoc(props) {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+
+    const code = {
+        basic: `
+<Timeline value={events} content={(item) => item.status} className="w-full md:w-20rem" />
+<Timeline value={events} align="right" content={(item) => item.status} className="w-full md:w-20rem" />
+<Timeline value={events} align="alternate" content={(item) => item.status} className="w-full md:w-20rem" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+export default function AlignmentDemo() {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+        
+    return (
+        <div className="card flex flex-wrap gap-6">
+            <Timeline value={events} content={(item) => item.status} className="w-full md:w-20rem" />
+            <Timeline value={events} align="right" content={(item) => item.status} className="w-full md:w-20rem" />
+            <Timeline value={events} align="alternate" content={(item) => item.status} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+interface TimelineEvent {
+    status?: string;
+    date?: string;
+    icon?: string;
+    color?: string;
+    image?: string;
+}
+
+export default function AlignmentDemo() {
+    const events: TimelineEvent[] = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+        
+    return (
+        <div className="card flex flex-wrap gap-6">
+            <Timeline value={events} content={(item) => item.status} className="w-full md:w-20rem" />
+            <Timeline value={events} align="right" content={(item) => item.status} className="w-full md:w-20rem" />
+            <Timeline value={events} align="alternate" content={(item) => item.status} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Content location relative the line is defined with the <i>align</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap gap-6">
+                <Timeline value={events} content={(item) => item.status} className="w-full md:w-20rem" />
+                <Timeline value={events} align="right" content={(item) => item.status} className="w-full md:w-20rem" />
+                <Timeline value={events} align="alternate" content={(item) => item.status} className="w-full md:w-20rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/timeline/basicdoc.js b/components/doc/timeline/basicdoc.js
new file mode 100644
index 0000000000..279f507206
--- /dev/null
+++ b/components/doc/timeline/basicdoc.js
@@ -0,0 +1,78 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Timeline } from '@/components/lib/timeline/Timeline';
+
+export function BasicDoc(props) {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+
+    const code = {
+        basic: `
+<Timeline value={events} content={(item) => item.status} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+export default function BasicDemo() {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+        
+    return (
+        <div className="card">
+            <Timeline value={events} content={(item) => item.status} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+interface TimelineEvent {
+    status?: string;
+    date?: string;
+    icon?: string;
+    color?: string;
+    image?: string;
+}
+
+export default function BasicDemo() {
+    const events: TimelineEvent[] = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+        
+    return (
+        <div className="card">
+            <Timeline value={events} content={(item) => item.status} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Timeline requires a <i>value</i> for the collection of events and <i>content</i> function that receives an object as a parameter to return content.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Timeline value={events} content={(item) => item.status} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/timeline/horizontaldoc.js b/components/doc/timeline/horizontaldoc.js
new file mode 100644
index 0000000000..c4d4c889c4
--- /dev/null
+++ b/components/doc/timeline/horizontaldoc.js
@@ -0,0 +1,63 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Timeline } from '@/components/lib/timeline/Timeline';
+
+export function HorizontalDoc(props) {
+    const events = ['2020', '2021', '2022', '2023'];
+
+    const code = {
+        basic: `
+<Timeline value={events} layout="horizontal" align="top" content={(item) => item} />
+<Timeline value={events} layout="horizontal" align="bottom" content={(item) => item} />
+<Timeline value={events} layout="horizontal" align="alternate" content={(item) => item} opposite={<span>&nbsp;</span>} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+export default function HorizontalDemo() {
+    const events = ['2020', '2021', '2022', '2023'];
+
+    return (
+        <div className="card flex flex-column gap-3">
+            <Timeline value={events} layout="horizontal" align="top" content={(item) => item} />
+            <Timeline value={events} layout="horizontal" align="bottom" content={(item) => item} />
+            <Timeline value={events} layout="horizontal" align="alternate" content={(item) => item} opposite={<span>&nbsp;</span>} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+export default function HorizontalDemo() {
+    const events: string[] = ['2020', '2021', '2022', '2023'];
+
+    return (
+        <div className="card flex flex-column gap-3">
+            <Timeline value={events} layout="horizontal" align="top" content={(item) => item} />
+            <Timeline value={events} layout="horizontal" align="bottom" content={(item) => item} />
+            <Timeline value={events} layout="horizontal" align="alternate" content={(item) => item} opposite={<span>&nbsp;</span>} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TimeLine orientation is controlled with the <i>layout</i> property, default is <i>vertical</i> having <i>horizontal</i> as the alternative.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column gap-3">
+                <Timeline value={events} layout="horizontal" align="top" content={(item) => item} />
+                <Timeline value={events} layout="horizontal" align="bottom" content={(item) => item} />
+                <Timeline value={events} layout="horizontal" align="alternate" content={(item) => item} opposite={<span>&nbsp;</span>} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/timeline/importdoc.js b/components/doc/timeline/importdoc.js
new file mode 100644
index 0000000000..399e7e7fec
--- /dev/null
+++ b/components/doc/timeline/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Timeline } from 'primereact/timeline';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/timeline/oppositedoc.js b/components/doc/timeline/oppositedoc.js
new file mode 100644
index 0000000000..2920e926df
--- /dev/null
+++ b/components/doc/timeline/oppositedoc.js
@@ -0,0 +1,79 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Timeline } from '@/components/lib/timeline/Timeline';
+
+export function OppositeDoc(props) {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+
+    const code = {
+        basic: `
+<Timeline value={events} opposite={(item) => item.status} 
+    content={(item) => <small className="text-color-secondary">{item.date}</small>} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+export default function OppositeDemo() {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+        
+    return (
+        <div className="card">
+            <Timeline value={events} opposite={(item) => item.status} content={(item) => <small className="text-color-secondary">{item.date}</small>} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+interface TimelineEvent {
+    status?: string;
+    date?: string;
+    icon?: string;
+    color?: string;
+    image?: string;
+}
+
+export default function OppositeDemo() {
+    const events: TimelineEvent[] = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+        
+    return (
+        <div className="card">
+            <Timeline value={events} opposite={(item) => item.status} content={(item) => <small className="text-color-secondary">{item.date}</small>} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Additional content at the other side of the line can be provided with the <i>opposite</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Timeline value={events} opposite={(item) => item.status} content={(item) => <small className="text-color-secondary">{item.date}</small>} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/timeline/pt/wireframe.js b/components/doc/timeline/pt/wireframe.js
new file mode 100644
index 0000000000..646abbd651
--- /dev/null
+++ b/components/doc/timeline/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/timeline.jpg" alt="timeline" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/timeline/styledoc.js b/components/doc/timeline/styledoc.js
new file mode 100644
index 0000000000..0923b9d61d
--- /dev/null
+++ b/components/doc/timeline/styledoc.js
@@ -0,0 +1,83 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-timeline</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-left</td>
+                            <td>Container element when alignment is left.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-right</td>
+                            <td>Container element when alignment is right.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-top</td>
+                            <td>Container element when alignment is top.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-bottom</td>
+                            <td>Container element when alignment is bottom.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-alternate</td>
+                            <td>Container element when alignment is alternating.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-vertical</td>
+                            <td>Container element of a vertical timeline.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-horizontal</td>
+                            <td>Container element of a horizontal timeline.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event</td>
+                            <td>Event element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-opposite</td>
+                            <td>Opposite of an event content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-content</td>
+                            <td>Event content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-separator</td>
+                            <td>Separator element of an event.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-marker</td>
+                            <td>Marker element of an event.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-connector</td>
+                            <td>Connector element of an event.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/timeline/templatedoc.js b/components/doc/timeline/templatedoc.js
new file mode 100644
index 0000000000..bbebf08470
--- /dev/null
+++ b/components/doc/timeline/templatedoc.js
@@ -0,0 +1,162 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Card } from '@/components/lib/card/Card';
+import { Timeline } from '@/components/lib/timeline/Timeline';
+
+export function TemplateDoc(props) {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+
+    const customizedMarker = (item) => {
+        return (
+            <span className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" style={{ backgroundColor: item.color }}>
+                <i className={item.icon} />
+            </span>
+        );
+    };
+
+    const customizedContent = (item) => {
+        return (
+            <Card title={item.status} subTitle={item.date}>
+                {item.image && <img src={`https://primefaces.org/cdn/primereact/images/product/${item.image}`} alt={item.name} width={200} className="shadow-1" />}
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+                <Button label="Read more" className="p-button-text" />
+            </Card>
+        );
+    };
+
+    const code = {
+        basic: `
+<Timeline value={events} align="alternate" className="customized-timeline" 
+    marker={customizedMarker} content={customizedContent} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import './TimelineDemo.css';
+
+export default function TemplateDemo() {
+        const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+
+    const customizedMarker = (item) => {
+        return (
+            <span className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" style={{ backgroundColor: item.color }}>
+                <i className={item.icon}></i>
+            </span>
+        );
+    };
+
+    const customizedContent = (item) => {
+        return (
+            <Card title={item.status} subTitle={item.date}>
+                { item.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.name} width={200} className="shadow-1" />}
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                <Button label="Read more" className="p-button-text"></Button>
+            </Card>
+        );
+    };
+        
+    return (
+        <div className="card">
+            <Timeline value={events} align="alternate" className="customized-timeline" marker={customizedMarker} content={customizedContent} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+import { Card } from 'primereact/card';
+import { Button } from 'primereact/button';
+import './TimelineDemo.css';
+
+interface TimelineEvent {
+    status?: string;
+    date?: string;
+    icon?: string;
+    color?: string;
+    image?: string;
+}
+
+export default function TemplateDemo() {
+    const events: TimelineEvent[] = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+
+    const customizedMarker = (item: TimelineEvent) => {
+        return (
+            <span className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" style={{ backgroundColor: item.color }}>
+                <i className={item.icon}></i>
+            </span>
+        );
+    };
+
+    const customizedContent = (item: TimelineEvent) => {
+        return (
+            <Card title={item.status} subTitle={item.date}>
+                { item.image && <img src={\`https://primefaces.org/cdn/primereact/images/product/\${item.image}\`} alt={item.image} width={200} className="shadow-1" />}
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
+                    quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
+                <Button label="Read more" className="p-button-text"></Button>
+            </Card>
+        );
+    };
+
+    return (
+        <div className="card">
+            <Timeline value={events} align="alternate" className="customized-timeline" marker={customizedMarker} content={customizedContent} />
+        </div>
+    )
+}
+        `,
+        extFiles: {
+            'TimelineDemo.css': `
+@media screen and (max-width: 991px) {
+    .customized-timeline .p-timeline-event:nth-child(even) {
+        flex-direction: row !important;
+    }
+    .customized-timeline .p-timeline-event:nth-child(even) .p-timeline-event-content {
+        text-align: left !important;
+    }
+    .customized-timeline .p-timeline-event-opposite {
+        flex: 0;
+    }
+    .customized-timeline .p-card {
+        margin-top: 1rem;
+    }
+}
+    `
+        }
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Sample implementation with custom content and styled markers.</p>
+            </DocSectionText>
+            <div className="card">
+                <Timeline value={events} align="alternate" className="customized-timeline" marker={customizedMarker} content={customizedContent} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/timeline/theming/styleddoc.js b/components/doc/timeline/theming/styleddoc.js
new file mode 100644
index 0000000000..876f4584fb
--- /dev/null
+++ b/components/doc/timeline/theming/styleddoc.js
@@ -0,0 +1,79 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-timeline</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-left</td>
+                            <td>Container element when alignment is left.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-right</td>
+                            <td>Container element when alignment is right.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-top</td>
+                            <td>Container element when alignment is top.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-bottom</td>
+                            <td>Container element when alignment is bottom.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-alternate</td>
+                            <td>Container element when alignment is alternating.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-vertical</td>
+                            <td>Container element of a vertical timeline.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-horizontal</td>
+                            <td>Container element of a horizontal timeline.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event</td>
+                            <td>Event element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-opposite</td>
+                            <td>Opposite of an event content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-content</td>
+                            <td>Event content.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-separator</td>
+                            <td>Separator element of an event.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-marker</td>
+                            <td>Marker element of an event.</td>
+                        </tr>
+                        <tr>
+                            <td>p-timeline-event-connector</td>
+                            <td>Connector element of an event.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/timeline/theming/tailwinddoc.js b/components/doc/timeline/theming/tailwinddoc.js
new file mode 100644
index 0000000000..4b1dd0aeeb
--- /dev/null
+++ b/components/doc/timeline/theming/tailwinddoc.js
@@ -0,0 +1,108 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    timeline: {
+        root: ({ props }) => ({
+            className: classNames('flex grow', {
+                'flex-col': props.layout === 'vertical',
+                'flex-row flex-1': props.layout === 'horizontal'
+            })
+        }),
+        event: ({ props, context }) => ({
+            className: classNames('flex relative min-h-[70px]', {
+                'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+                'flex-col flex-1': props.layout === 'horizontal',
+                'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+            })
+        }),
+        opposite: ({ props, context }) => ({
+            className: classNames(
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                }
+            )
+        }),
+        separator: ({ props }) => ({
+            className: classNames('flex items-center flex-initial', {
+                'flex-col': props.layout === 'vertical',
+                'flex-row': props.layout === 'horizontal'
+            })
+        }),
+        marker: 'flex self-baseline w-4 h-4 rounded-full border-2 border-blue-500 bg-white dark:border-blue-300 dark:bg-blue-900/40',
+        connector: ({ props }) => ({
+            className: classNames('grow bg-gray-300 dark:bg-blue-900/40', {
+                'w-[2px]': props.layout === 'vertical',
+                'w-full h-[2px]': props.layout === 'horizontal'
+            })
+        }),
+        content: ({ props, context }) => ({
+            className: classNames(
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                },
+                {
+                    'min-h-0': props.layout === 'vertical' && context.index === context.count,
+                    'grow-0': props.layout === 'horizontal' && context.index === context.count
+                }
+            )
+        })
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react'; 
+import { Timeline } from 'primereact/timeline';
+
+export default function UnstyledDemo() {
+    const events = [
+        { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg' },
+        { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+        { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+        { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+    ];
+        
+    return (
+        <div className="card flex flex-wrap gap-6">
+            <Timeline value={events} content={(item) => item.status} className="w-full md:w-20rem" />
+            <Timeline value={events} align="right" content={(item) => item.status} className="w-full md:w-20rem" />
+            <Timeline value={events} align="alternate" content={(item) => item.status} className="w-full md:w-20rem" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/toast/accessibilitydoc.js b/components/doc/toast/accessibilitydoc.js
new file mode 100644
index 0000000000..bbc3ac6914
--- /dev/null
+++ b/components/doc/toast/accessibilitydoc.js
@@ -0,0 +1,45 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Toast component use <i>alert</i> role that implicitly defines <i>aria-live</i> as "assertive" and <i>aria-atomic</i> as "true".
+            </p>
+
+            <p>
+                Close element is a <i>button</i> with an <i>aria-label</i> that refers to the <i>aria.close</i> property of the <Link href="http://github.com/locale">locale</Link> API by default, you may use
+                <i>closeButtonProps</i> to customize the element and override the default <i>aria-label</i>.
+            </p>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the message.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/toast/basicdoc.js b/components/doc/toast/basicdoc.js
new file mode 100644
index 0000000000..8844aed6af
--- /dev/null
+++ b/components/doc/toast/basicdoc.js
@@ -0,0 +1,76 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+
+    const show = () => {
+        toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Button onClick={show} label="Basic" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef(null);
+
+    const show = () => {
+        toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <Button onClick={show} label="Show" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function BasicDemo() {
+    const toast = useRef<Toast>(null);
+
+    const show = () => {
+        toast.current?.show({ severity: 'info', summary: 'Info', detail: 'Message Content' });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <Button onClick={show} label="Show" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Messages are displayed by calling the <i>show</i> method provided by the component ref. A single message is specified by the Message interface that defines various properties such as <i>severity</i>, <i>summary</i> and{' '}
+                    <i>detail</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <Button onClick={show} label="Show" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toast/headlessdoc.js b/components/doc/toast/headlessdoc.js
new file mode 100644
index 0000000000..91005cdeec
--- /dev/null
+++ b/components/doc/toast/headlessdoc.js
@@ -0,0 +1,251 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Toast } from '@/components/lib/toast/Toast';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+import { useState, useRef } from 'react';
+
+export function HeadlessDoc(props) {
+    const toast = useRef(null);
+    const [progress, setProgress] = useState(0);
+    const interval = useRef(null);
+
+    const clear = () => {
+        setProgress(0);
+        toast.current.clear();
+        clearInterval(interval.current);
+        interval.current = undefined;
+    };
+
+    const show = () => {
+        if (!interval.current) {
+            toast.current.show({
+                summary: 'Uploading your files.'
+            });
+
+            setProgress(0);
+
+            if (interval.current) {
+                clearInterval(interval.current);
+            }
+
+            interval.current = setInterval(() => {
+                setProgress((prevProgress) => {
+                    const newProgress = prevProgress + 20;
+
+                    if (newProgress >= 100) {
+                        clearInterval(interval.current);
+
+                        return 100;
+                    }
+
+                    return newProgress;
+                });
+            }, 1000);
+        }
+    };
+
+    const code = {
+        basic: `
+<Toast
+    ref={toast}
+    content={({ message }) => (
+        <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
+            <i className="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+            <div className="flex flex-column gap-3 w-full">
+                <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
+                <p className="m-0 text-base text-700">{message.detail}</p>
+                <div className="flex flex-column gap-2">
+                    <ProgressBar value={progress} showValue="false"></ProgressBar>
+                    <label className="text-right text-xs text-white">{progress}% uploaded...</label>
+                </div>
+                <div className="flex gap-3 mb-3">
+                    <Button label="Another Upload?" text className="p-0" onClick={clear}></Button>
+                    <Button label="Cancel" text className="text-white p-0" onClick={clear}></Button>
+                </div>
+            </div>
+        </section>
+    )}
+></Toast>
+<Button onClick={show} label="View" />
+            `,
+        javascript: `
+import React, { useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function HeadlessDemo() {
+    const toast = useRef(null);
+    const [progress, setProgress] = useState(0);
+    const interval = useRef(null);
+
+    const clear = () => {
+        setProgress(0);
+        toast.current.clear();
+        clearInterval(interval.current);
+        interval.current = undefined;
+    };
+
+    const show = () => {
+        if (!interval.current) {
+            toast.current.show({
+                summary: 'Uploading your files.',
+            });
+
+            setProgress(0);
+
+            if (interval.current) {
+                clearInterval(interval.current);
+            }
+
+            interval.current = setInterval(() => {
+                setProgress((prevProgress) => {
+                    const newProgress = prevProgress + 20;
+
+                    if (newProgress >= 100) {
+                        clearInterval(interval.current);
+
+                        return 100;
+                    }
+
+                    return newProgress;
+                });
+            }, 1000);
+        }
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast
+                ref={toast}
+                content={({ message }) => (
+                    <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
+                        <i className="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+                        <div className="flex flex-column gap-3 w-full">
+                            <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
+                            <p className="m-0 text-base text-700">{message.detail}</p>
+                            <div className="flex flex-column gap-2">
+                                <ProgressBar value={progress} showValue="false"></ProgressBar>
+                                <label className="text-right text-xs text-white">{progress}% uploaded...</label>
+                            </div>
+                            <div className="flex gap-3 mb-3">
+                                <Button label="Another Upload?" text className="p-0" onClick={clear}></Button>
+                                <Button label="Cancel" text className="text-white p-0" onClick={clear}></Button>
+                            </div>
+                        </div>
+                    </section>
+                )}
+            ></Toast>
+            <Button onClick={show} label="View" />
+        </div>
+    )
+            `,
+        typescript: `
+import React, { useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+import { ProgressBar } from 'primereact/progressbar';
+
+export default function HeadlessDemo() {
+    const toast = useRef<Toast>(null);
+
+    const clear = () => {
+        setProgress(0);
+        toast.current.clear();
+        clearInterval(interval.current);
+        interval.current = undefined;
+    };
+
+    const show = () => {
+        if (!interval.current) {
+            toast.current.show({
+                summary: 'Uploading your files.',
+            });
+
+            setProgress(0);
+
+            if (interval.current) {
+                clearInterval(interval.current);
+            }
+
+            interval.current = setInterval(() => {
+                setProgress((prevProgress) => {
+                    const newProgress = prevProgress + 20;
+
+                    if (newProgress >= 100) {
+                        clearInterval(interval.current);
+
+                        return 100;
+                    }
+
+                    return newProgress;
+                });
+            }, 1000);
+        }
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast
+                ref={toast}
+                content={({ message }) => (
+                    <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
+                        <i className="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+                        <div className="flex flex-column gap-3 w-full">
+                            <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
+                            <p className="m-0 text-base text-700">{message.detail}</p>
+                            <div className="flex flex-column gap-2">
+                                <ProgressBar value={progress} showValue="false"></ProgressBar>
+                                <label className="text-right text-xs text-white">{progress}% uploaded...</label>
+                            </div>
+                            <div className="flex gap-3 mb-3">
+                                <Button label="Another Upload?" text className="p-0" onClick={clear}></Button>
+                                <Button label="Cancel" text className="text-white p-0" onClick={clear}></Button>
+                            </div>
+                        </div>
+                    </section>
+                )}
+            ></Toast>
+            <Button onClick={show} label="View" />
+        </div>
+    )
+}
+            `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Headless mode is enabled by defining a <i>content</i> prop that lets you implement entire dialog UI instead of the default elements.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast
+                    ref={toast}
+                    position="top-center"
+                    content={({ message }) => (
+                        <section className="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2 fadeindown" style={{ borderRadius: '10px' }}>
+                            <i className="pi pi-cloud-upload text-primary-500 text-2xl" />
+                            <div className="flex flex-column gap-3 w-full">
+                                <p className="m-0 font-semibold text-base text-white">{message.summary}</p>
+                                <p className="m-0 text-base text-700">{message.detail}</p>
+                                <div className="flex flex-column gap-2">
+                                    <ProgressBar value={progress} showValue={false} style={{ height: '4px' }} />
+                                    <label className="text-right text-xs text-white">{progress}% uploaded...</label>
+                                </div>
+                                <div className="flex gap-3 mb-3">
+                                    <Button label="Another Upload?" text className="p-0" onClick={clear} />
+                                    <Button label="Cancel" text className="text-white p-0" onClick={clear} />
+                                </div>
+                            </div>
+                        </section>
+                    )}
+                />
+                <Button onClick={show} label="View" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toast/importdoc.js b/components/doc/toast/importdoc.js
new file mode 100644
index 0000000000..d18c894074
--- /dev/null
+++ b/components/doc/toast/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Toast } from 'primereact/toast';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/toast/multipledoc.js b/components/doc/toast/multipledoc.js
new file mode 100644
index 0000000000..cde4008efe
--- /dev/null
+++ b/components/doc/toast/multipledoc.js
@@ -0,0 +1,90 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function MultipleDoc(props) {
+    const toast = useRef(null);
+
+    const showMultiple = () => {
+        toast.current.show([
+            { severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 },
+            { severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 },
+            { severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 },
+            { severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 }
+        ]);
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Button onClick={showMultiple} label="Multiple" className="p-button-warning" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function MultipleDemo() {
+    const toast = useRef(null);
+
+    const showMultiple = () => {
+        toast.current.show([
+            { severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 },
+            { severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 },
+            { severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 },
+            { severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 }
+        ]);
+    };
+
+    return (
+        <div className="card flex justify-content-center gap-2">
+            <Toast ref={toast} />
+            <Button onClick={showMultiple} label="Multiple" severity='warning' />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { Button } from 'primereact/button';
+
+export default function MultipleDemo() {
+    const toast = useRef<Toast>(null);
+
+    const showMultiple = () => {
+        toast.current?.show([
+            { severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 },
+            { severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 },
+            { severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 },
+            { severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 }
+        ]);
+    };
+
+    return (
+        <div className="card flex justify-content-center gap-2">
+            <Toast ref={toast} />
+            <Button onClick={showMultiple} label="Multiple" severity='warning' />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Multiple messages are displayed by passing an array to the <i>show</i> method.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center gap-2">
+                <Toast ref={toast} />
+                <Button onClick={showMultiple} label="Multiple" severity="warning" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toast/positiondoc.js b/components/doc/toast/positiondoc.js
new file mode 100644
index 0000000000..7f94a56810
--- /dev/null
+++ b/components/doc/toast/positiondoc.js
@@ -0,0 +1,146 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function PositionDoc(props) {
+    const toastTopCenter = useRef(null);
+    const toastTopLeft = useRef(null);
+    const toastTopRight = useRef(null);
+    const toastCenter = useRef(null);
+    const toastBottomLeft = useRef(null);
+    const toastBottomCenter = useRef(null);
+    const toastBottomRight = useRef(null);
+
+    const showMessage = (event, ref, severity) => {
+        const label = event.target.innerText;
+
+        ref.current.show({ severity: severity, summary: label, detail: label, life: 3000 });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toastTL} position="top-left" />
+<Toast ref={toastBL} position="bottom-left" />
+<Toast ref={toastBR} position="bottom-right" />
+<Button label="Top Left" className="mr-2" onClick={showTopLeft} />
+<Button label="Bottom Left" className="p-button-warning" onClick={showBottomLeft} />
+<Button label="Bottom Right" className="p-button-success" onClick={showBottomRight} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function PositionDemo() {
+    const toastTopCenter = useRef(null);
+    const toastTopLeft = useRef(null);
+    const toastTopRight = useRef(null);
+    const toastCenter = useRef(null);
+    const toastBottomLeft = useRef(null);
+    const toastBottomCenter = useRef(null);
+    const toastBottomRight = useRef(null);
+
+    const showMessage = (event, ref, severity) => {
+        const label = event.target.innerText;
+
+        ref.current.show({ severity: severity, summary: label, detail: label, life: 3000 });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toastTopLeft} position="top-left" />
+            <Toast ref={toastTopCenter} position="top-center" />
+            <Toast ref={toastTopRight} position="top-right" />
+            <Toast ref={toastCenter} position="center" />
+            <Toast ref={toastBottomLeft} position="bottom-left" />
+            <Toast ref={toastBottomCenter} position="bottom-center" />
+            <Toast ref={toastBottomRight} position="bottom-right" />
+            <div className="flex flex-wrap gap-2">
+                <Button label="Top Left" className="p-button-success" onClick={(e) => showMessage(e, toastTopLeft, 'success')} />
+                <Button label="Top Center" onClick={(e) => showMessage(e, toastTopCenter, 'info')} />
+                <Button label="Top Right" className="p-button-warning" onClick={(e) => showMessage(e, toastTopRight, 'warn')} />
+                <Button label="Center" className="p-button-danger" onClick={(e) => showMessage(e, toastCenter, 'error')} />
+                <Button label="Bottom Left" className="p-button-success" onClick={(e) => showMessage(e, toastBottomLeft, 'success')} />
+                <Button label="Bottom Center" onClick={(e) => showMessage(e, toastBottomCenter, 'info')} />
+                <Button label="Bottom Right" className="p-button-warning" onClick={(e) => showMessage(e, toastBottomRight, 'warn')} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast, ToastMessage } from 'primereact/toast';
+
+export default function PositionDemo() {
+    const toastTopCenter = useRef<Toast>(null);
+    const toastTopLeft = useRef<Toast>(null);
+    const toastTopRight = useRef<Toast>(null);
+    const toastCenter = useRef<Toast>(null);
+    const toastBottomLeft = useRef<Toast>(null);
+    const toastBottomCenter = useRef<Toast>(null);
+    const toastBottomRight = useRef<Toast>(null);
+
+    const showMessage = (event: React.MouseEvent<HTMLButtonElement>, ref: React.RefObject<Toast>, severity: ToastMessage['severity']) => {
+        const target = event.target as HTMLButtonElement;
+        const label = target.innerText;
+
+        ref.current?.show({ severity: severity, summary: label, detail: label, life: 3000 });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toastTopLeft} position="top-left" />
+            <Toast ref={toastTopCenter} position="top-center" />
+            <Toast ref={toastTopRight} position="top-right" />
+            <Toast ref={toastCenter} position="center" />
+            <Toast ref={toastBottomLeft} position="bottom-left" />
+            <Toast ref={toastBottomCenter} position="bottom-center" />
+            <Toast ref={toastBottomRight} position="bottom-right" />
+            <div className="flex flex-wrap gap-2">
+                <Button label="Top Left" className="p-button-success" onClick={(e) => showMessage(e, toastTopLeft, 'success')} />
+                <Button label="Top Center" onClick={(e) => showMessage(e, toastTopCenter, 'info')} />
+                <Button label="Top Right" className="p-button-warning" onClick={(e) => showMessage(e, toastTopRight, 'warn')} />
+                <Button label="Center" className="p-button-danger" onClick={(e) => showMessage(e, toastCenter, 'error')} />
+                <Button label="Bottom Left" className="p-button-success" onClick={(e) => showMessage(e, toastBottomLeft, 'success')} />
+                <Button label="Bottom Center" onClick={(e) => showMessage(e, toastBottomCenter, 'info')} />
+                <Button label="Bottom Right" className="p-button-warning" onClick={(e) => showMessage(e, toastBottomRight, 'warn')} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Location of the messages is customized with the <i>position</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toastTopLeft} position="top-left" />
+                <Toast ref={toastTopCenter} position="top-center" />
+                <Toast ref={toastTopRight} position="top-right" />
+                <Toast ref={toastCenter} position="center" />
+                <Toast ref={toastBottomLeft} position="bottom-left" />
+                <Toast ref={toastBottomCenter} position="bottom-center" />
+                <Toast ref={toastBottomRight} position="bottom-right" />
+                <div className="flex flex-wrap gap-2">
+                    <Button label="Top Left" className="p-button-success" onClick={(e) => showMessage(e, toastTopLeft, 'success')} />
+                    <Button label="Top Center" onClick={(e) => showMessage(e, toastTopCenter, 'info')} />
+                    <Button label="Top Right" className="p-button-warning" onClick={(e) => showMessage(e, toastTopRight, 'warn')} />
+                    <Button label="Center" className="p-button-danger" onClick={(e) => showMessage(e, toastCenter, 'error')} />
+                    <Button label="Bottom Left" className="p-button-success" onClick={(e) => showMessage(e, toastBottomLeft, 'success')} />
+                    <Button label="Bottom Center" onClick={(e) => showMessage(e, toastBottomCenter, 'info')} />
+                    <Button label="Bottom Right" className="p-button-warning" onClick={(e) => showMessage(e, toastBottomRight, 'warn')} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toast/pt/wireframe.js b/components/doc/toast/pt/wireframe.js
new file mode 100644
index 0000000000..027c40afb6
--- /dev/null
+++ b/components/doc/toast/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="toast" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/toast/severitydoc.js b/components/doc/toast/severitydoc.js
new file mode 100644
index 0000000000..fbabdaebe7
--- /dev/null
+++ b/components/doc/toast/severitydoc.js
@@ -0,0 +1,162 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function SeverityDoc(props) {
+    const toast = useRef(null);
+
+    const showSuccess = () => {
+        toast.current.show({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
+    };
+
+    const showInfo = () => {
+        toast.current.show({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
+    };
+
+    const showWarn = () => {
+        toast.current.show({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3000 });
+    };
+
+    const showError = () => {
+        toast.current.show({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3000 });
+    };
+
+    const showSecondary = () => {
+        toast.current.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 });
+    };
+
+    const showContrast = () => {
+        toast.current.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Button label="Success" severity="success" onClick={showSuccess} />
+<Button label="Info" severity="info" onClick={showInfo} />
+<Button label="Warn" severity="warning" onClick={showWarn} />
+<Button label="Error" severity="danger" onClick={showError} />
+<Button label="Secondary" severity="secondary" onClick={showSecondary} />
+<Button label="Contrast" severity="contrast" onClick={showContrast} />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function SeverityDemo() {
+    const toast = useRef(null);
+
+    const showSuccess = () => {
+        toast.current.show({severity:'success', summary: 'Success', detail:'Message Content', life: 3000});
+    }
+
+    const showInfo = () => {
+        toast.current.show({severity:'info', summary: 'Info', detail:'Message Content', life: 3000});
+    }
+
+    const showWarn = () => {
+        toast.current.show({severity:'warn', summary: 'Warning', detail:'Message Content', life: 3000});
+    }
+
+    const showError = () => {
+        toast.current.show({severity:'error', summary: 'Error', detail:'Message Content', life: 3000});
+    }
+
+    const showSecondary = () => {
+        toast.current.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 });
+    };
+
+    const showContrast = () => {
+        toast.current.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 });
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <div className="flex flex-wrap gap-2">
+                <Button label="Success" severity="success" onClick={showSuccess} />
+                <Button label="Info" severity="info" onClick={showInfo} />
+                <Button label="Warn" severity="warning" onClick={showWarn} />
+                <Button label="Error" severity="danger" onClick={showError} />
+                <Button label="Secondary" severity="secondary" onClick={showSecondary} />
+                <Button label="Contrast" severity="contrast" onClick={showContrast} />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function SeverityDemo() {
+    const toast = useRef<Toast>(null);
+
+    const showSuccess = () => {
+        toast.current?.show({severity:'success', summary: 'Success', detail:'Message Content', life: 3000});
+    }
+
+    const showInfo = () => {
+        toast.current?.show({severity:'info', summary: 'Info', detail:'Message Content', life: 3000});
+    }
+
+    const showWarn = () => {
+        toast.current?.show({severity:'warn', summary: 'Warning', detail:'Message Content', life: 3000});
+    }
+
+    const showError = () => {
+        toast.current?.show({severity:'error', summary: 'Error', detail:'Message Content', life: 3000});
+    }
+
+    const showSecondary = () => {
+        toast.current?.show({ severity: 'secondary', summary: 'Secondary', detail: 'Message Content', life: 3000 });
+    };
+
+    const showContrast = () => {
+        toast.current?.show({ severity: 'contrast', summary: 'Contrast', detail: 'Message Content', life: 3000 });
+    };
+
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <div className="flex flex-wrap gap-2">
+                <Button label="Success" severity="success" onClick={showSuccess} />
+                <Button label="Info" severity="info" onClick={showInfo} />
+                <Button label="Warn" severity="warning" onClick={showWarn} />
+                <Button label="Error" severity="danger" onClick={showError} />
+                <Button label="Secondary" severity="secondary" onClick={showSecondary} />
+                <Button label="Contrast" severity="contrast" onClick={showContrast} />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>severity</i> option specifies the type of the message.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <div className="flex flex-wrap gap-2">
+                    <Button label="Success" severity="success" onClick={showSuccess} />
+                    <Button label="Info" severity="info" onClick={showInfo} />
+                    <Button label="Warn" severity="warning" onClick={showWarn} />
+                    <Button label="Error" severity="danger" onClick={showError} />
+                    <Button label="Secondary" severity="secondary" onClick={showSecondary} />
+                    <Button label="Contrast" severity="contrast" onClick={showContrast} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toast/stickydoc.js b/components/doc/toast/stickydoc.js
new file mode 100644
index 0000000000..df5a3d9412
--- /dev/null
+++ b/components/doc/toast/stickydoc.js
@@ -0,0 +1,97 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef } from 'react';
+
+export function StickyDoc(props) {
+    const toast = useRef(null);
+
+    const showSticky = () => {
+        toast.current.show({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true });
+    };
+
+    const clear = () => {
+        toast.current.clear();
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Button onClick={showSticky} label="Sticky" severity="success" />
+<Button onClick={clear} label="Clear" />
+        `,
+        javascript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function StickyDemo() {
+    const toast = useRef(null);
+
+    const showSticky = () => {
+        toast.current.show({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true });
+    };
+
+    const clear = () => {
+        toast.current.clear();
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <div className="flex flex-wrap gap-2">
+                <Button onClick={showSticky} label="Sticky" severity="success" />
+                <Button onClick={clear} label="Clear" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function StickyDemo() {
+    const toast = useRef<Toast>(null);
+
+    const showSticky = () => {
+        toast.current?.show({ severity: 'info', summary: 'Sticky', detail: 'Message Content', sticky: true });
+    };
+
+    const clear = () => {
+        toast.current?.clear();
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toast} />
+            <div className="flex flex-wrap gap-2">
+                <Button onClick={showSticky} label="Sticky" severity="success" />
+                <Button onClick={clear} label="Clear" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A message will disappear after 3000ms, the default value defined for the <i>life</i> option. To display messages that remain visible and do not hide automatically, set the <i>sticky</i> option to "true".
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toast} />
+                <div className="flex flex-wrap gap-2">
+                    <Button onClick={showSticky} label="Sticky" />
+                    <Button onClick={clear} label="Clear" severity="secondary" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toast/styledoc.js b/components/doc/toast/styledoc.js
new file mode 100644
index 0000000000..ab18e1e22e
--- /dev/null
+++ b/components/doc/toast/styledoc.js
@@ -0,0 +1,55 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-toast</td>
+                            <td>Main container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-container</td>
+                            <td>Container of a message item.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-item</td>
+                            <td>Message element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-icon-close</td>
+                            <td>Close icon of a message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-image</td>
+                            <td>Severity icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-message</td>
+                            <td>Container of message texts.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-title</td>
+                            <td>Summary of the message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/toast/templatedoc.js b/components/doc/toast/templatedoc.js
new file mode 100644
index 0000000000..ffde2b066e
--- /dev/null
+++ b/components/doc/toast/templatedoc.js
@@ -0,0 +1,162 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Toast } from '@/components/lib/toast/Toast';
+import { useRef, useState } from 'react';
+
+export function TemplateDoc(props) {
+    const [visible, setVisible] = useState(false);
+    const toastBC = useRef(null);
+
+    const clear = () => {
+        toastBC.current.clear();
+        setVisible(false);
+    };
+
+    const confirm = () => {
+        if (!visible) {
+            setVisible(true);
+            toastBC.current.clear();
+            toastBC.current.show({
+                severity: 'success',
+                summary: 'Can you send me the report?',
+                sticky: true,
+                content: (props) => (
+                    <div className="flex flex-column align-items-start" style={{ flex: '1' }}>
+                        <div className="flex align-items-center gap-2">
+                            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+                            <span className="font-bold text-900">Amy Elsner</span>
+                        </div>
+                        <div className="font-medium text-lg my-3 text-900">{props.message.summary}</div>
+                        <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear} />
+                    </div>
+                )
+            });
+        }
+    };
+
+    const code = {
+        basic: `
+toastBC.current.show({
+    severity: 'success',
+    summary: 'Can you send me the report?',
+    sticky: true,
+    content: (props) => (
+        <div className="flex flex-column align-items-left" style={{ flex: '1' }}>
+            <div className="flex align-items-center gap-2">
+                <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold text-900">Amy Elsner</span>
+            </div>
+            <div className="font-medium text-lg my-3 text-900">{props.message.summary}</div>
+            <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear}></Button>
+        </div>
+    )
+});`,
+        javascript: `
+import React, { useState, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Toast } from 'primereact/toast';
+
+export default function TemplateDemo() {
+    const [visible, setVisible] = useState(false);
+    const toastBC = useRef(null);
+
+    const clear = () => {
+        toastBC.current.clear();
+        setVisible(false);
+    };
+
+    const confirm = () => {
+        if (!visible) {
+            setVisible(true);
+            toastBC.current.clear();
+            toastBC.current.show({
+                severity: 'success',
+                summary: 'Can you send me the report?',
+                sticky: true,
+                content: (props) => (
+                    <div className="flex flex-column align-items-left" style={{ flex: '1' }}>
+                        <div className="flex align-items-center gap-2">
+                            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+                            <span className="font-bold text-900">Amy Elsner</span>
+                        </div>
+                        <div className="font-medium text-lg my-3 text-900">{props.message.summary}</div>
+                        <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear}></Button>
+                    </div>
+                )
+            });
+        }
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toastBC} position="bottom-center" onRemove={clear} />
+            <Button onClick={confirm} label="Confirm" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import { Toast } from 'primereact/toast';
+
+export default function TemplateDemo() {
+    const [visible, setVisible] = useState(false);
+    const toastBC = useRef<Toast>(null);
+
+    const clear = () => {
+        toastBC.current?.clear();
+        setVisible(false);
+    };
+
+    const confirm = () => {
+        if (!visible) {
+            setVisible(true);
+            toastBC.current?.clear();
+            toastBC.current.show({
+                severity: 'success',
+                summary: 'Can you send me the report?',
+                sticky: true,
+                content: (props) => (
+                    <div className="flex flex-column align-items-left" style={{ flex: '1' }}>
+                        <div className="flex align-items-center gap-2">
+                            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+                            <span className="font-bold text-900">Amy Elsner</span>
+                        </div>
+                        <div className="font-medium text-lg my-3 text-900">{props.message.summary}</div>
+                        <Button className="p-button-sm flex" label="Reply" severity="success" onClick={clear}></Button>
+                    </div>
+                )
+            });
+        }
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Toast ref={toastBC} position="bottom-center" onRemove={clear} />
+            <Button onClick={confirm} label="Confirm" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content inside a message is defined with the <i>content</i> option.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Toast ref={toastBC} position="bottom-center" onRemove={clear} />
+                <Button onClick={confirm} label="Confirm" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toast/theming/styleddoc.js b/components/doc/toast/theming/styleddoc.js
new file mode 100644
index 0000000000..a61754a511
--- /dev/null
+++ b/components/doc/toast/theming/styleddoc.js
@@ -0,0 +1,51 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-toast</td>
+                            <td>Main container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-container</td>
+                            <td>Container of a message item.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-item</td>
+                            <td>Message element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-icon-close</td>
+                            <td>Close icon of a message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-image</td>
+                            <td>Severity icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-message</td>
+                            <td>Container of message texts.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toast-title</td>
+                            <td>Summary of the message.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/toast/theming/tailwinddoc.js b/components/doc/toast/theming/tailwinddoc.js
new file mode 100644
index 0000000000..dffe262e65
--- /dev/null
+++ b/components/doc/toast/theming/tailwinddoc.js
@@ -0,0 +1,96 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {  
+    toast: {
+        root: {
+            className: classNames('w-96', 'opacity-90')
+        },
+        message: ({ state, index }) => ({
+            className: classNames('my-4 rounded-md w-full', {
+                'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': state.messages[index] && state.messages[index].message.severity == 'info',
+                'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': state.messages[index] && state.messages[index].message.severity == 'success',
+                'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': state.messages[index] && state.messages[index].message.severity == 'warn',
+                'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': state.messages[index] && state.messages[index].message.severity == 'error'
+            })
+        }),
+        content: 'flex items-center py-5 px-7',
+        icon: {
+            className: classNames('w-6 h-6', 'text-lg mr-2')
+        },
+        text: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4',
+        summary: 'font-bold block',
+        detail: 'mt-1 block',
+        closebutton: {
+            className: classNames('w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30')
+        },
+        transition: {
+            enterFromClass: 'opacity-0 translate-x-0 translate-y-2/4 translate-z-0',
+            enterActiveClass: 'transition-transform transition-opacity duration-300',
+            leaveFromClass: 'max-h-40',
+            leaveActiveClass: 'transition-all duration-500 ease-in',
+            leaveToClass: 'max-h-0 opacity-0 mb-0 overflow-hidden'
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useRef } from 'react';
+import { Button } from 'primereact/button';
+import { Toast } from 'primereact/toast';
+
+export default function UnstyledDemo() {
+    const toast = useRef(null);
+
+    const showSuccess = () => {
+        toast.current.show({severity:'success', summary: 'Success', detail:'Message Content', life: 3000});
+    }
+
+    const showInfo = () => {
+        toast.current.show({severity:'info', summary: 'Info', detail:'Message Content', life: 3000});
+    }
+
+    const showWarn = () => {
+        toast.current.show({severity:'warn', summary: 'Warning', detail:'Message Content', life: 3000});
+    }
+
+    const showError = () => {
+        toast.current.show({severity:'error', summary: 'Error', detail:'Message Content', life: 3000});
+    }
+
+    return (
+        <div className="card flex justify-center">
+            <Toast ref={toast} />
+            <div className="flex flex-wrap gap-2">
+                <Button label="Success" severity="success" onClick={showSuccess} />
+                <Button label="Info" severity="info" onClick={showInfo} />
+                <Button label="Warn" severity="warning" onClick={showWarn} />
+                <Button label="Error" severity="danger" onClick={showError} />
+            </div>
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/accessibilitydoc.js b/components/doc/togglebutton/accessibilitydoc.js
new file mode 100644
index 0000000000..110ac85520
--- /dev/null
+++ b/components/doc/togglebutton/accessibilitydoc.js
@@ -0,0 +1,52 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="rememberme">Remember Me</span>
+<ToggleButton aria-labelledby="rememberme" />
+
+<ToggleButton aria-label="Remember Me" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ToggleButton component uses an element with <i>button</i> role and updates <i>aria-pressed</i> state for screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
+                highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label
+                that does not change related to state.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the button.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles the checked state.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/togglebutton/basicdoc.js b/components/doc/togglebutton/basicdoc.js
new file mode 100644
index 0000000000..42557fd710
--- /dev/null
+++ b/components/doc/togglebutton/basicdoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<ToggleButton checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function BasicDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function BasicDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton checked={checked} onChange={(e: ToggleButtonChangeEvent) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    ToggleButton is used a controlled input component with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ToggleButton checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/customizeddoc.js b/components/doc/togglebutton/customizeddoc.js
new file mode 100644
index 0000000000..a11c302d53
--- /dev/null
+++ b/components/doc/togglebutton/customizeddoc.js
@@ -0,0 +1,58 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
+import { useState } from 'react';
+
+export function CustomizedDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" 
+    checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function CustomizedDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" 
+                checked={checked} onChange={(e) => setChecked(e.value)} className="w-9rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function CustomizedDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" 
+                checked={checked} onChange={(e:  ToggleButtonChangeEvent) => setChecked(e.value)} className="w-9rem" />
+        </div>
+    );
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} className="w-9rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/disableddoc.js b/components/doc/togglebutton/disableddoc.js
new file mode 100644
index 0000000000..89b9421540
--- /dev/null
+++ b/components/doc/togglebutton/disableddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
+import { useState } from 'react';
+
+export function DisabledDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function DisabledDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function DisabledDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton disabled checked={checked} onChange={(e: ToggleButtonChangeEvent) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/importdoc.js b/components/doc/togglebutton/importdoc.js
new file mode 100644
index 0000000000..b89a247e0f
--- /dev/null
+++ b/components/doc/togglebutton/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { ToggleButton } from 'primereact/togglebutton';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/invaliddoc.js b/components/doc/togglebutton/invaliddoc.js
new file mode 100644
index 0000000000..2f94e51fb8
--- /dev/null
+++ b/components/doc/togglebutton/invaliddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ToggleButton } from '@/components/lib/togglebutton/ToggleButton';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [checked, setChecked] = useState(false);
+
+    const code = {
+        basic: `
+<ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { ToggleButton, ToggleButtonChangeEvent } from 'primereact/togglebutton';
+
+export default function InvalidDemo() {
+    const [checked, setChecked] = useState<boolean>(false);
+
+    return (
+        <div className="card flex justify-content-center">
+            <ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e: ToggleButtonChangeEvent) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/pt/wireframe.js b/components/doc/togglebutton/pt/wireframe.js
new file mode 100644
index 0000000000..b28c2c0dff
--- /dev/null
+++ b/components/doc/togglebutton/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/togglebutton.jpg" alt="togglebutton" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/togglebutton/styledoc.js b/components/doc/togglebutton/styledoc.js
new file mode 100644
index 0000000000..e08c7094e9
--- /dev/null
+++ b/components/doc/togglebutton/styledoc.js
@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-togglebutton</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-icon-left</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-text</td>
+                            <td>Label element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/theming/styleddoc.js b/components/doc/togglebutton/theming/styleddoc.js
new file mode 100644
index 0000000000..101d836199
--- /dev/null
+++ b/components/doc/togglebutton/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-togglebutton</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-icon-left</td>
+                            <td>Icon element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-button-text</td>
+                            <td>Label element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/togglebutton/theming/tailwinddoc.js b/components/doc/togglebutton/theming/tailwinddoc.js
new file mode 100644
index 0000000000..fcb24f40e7
--- /dev/null
+++ b/components/doc/togglebutton/theming/tailwinddoc.js
@@ -0,0 +1,65 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    togglebutton: {
+        root: ({ props }) => ({
+            className: classNames(
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3 rounded-md text-base w-36',
+                'border transition duration-200 ease-in-out',
+                {
+                    'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80':
+                        !props.checked,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600': props.checked
+                },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            )
+        }),
+        label: 'font-bold text-center w-full',
+        icon: ({ props }) => ({
+            className: classNames(' mr-2', {
+                'text-gray-600 dark:text-white/70': !props.checked,
+                'text-white': props.checked
+            })
+        })
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { ToggleButton } from 'primereact/togglebutton';
+
+export default function UnstyledDemo() {
+    const [checked, setChecked] = useState(false);
+
+    return (
+        <div className="card flex justify-center">
+            <ToggleButton checked={checked} onChange={(e) => setChecked(e.value)} className="w-8rem" />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/toolbar/accessibilitydoc.js b/components/doc/toolbar/accessibilitydoc.js
new file mode 100644
index 0000000000..09cfb19b62
--- /dev/null
+++ b/components/doc/toolbar/accessibilitydoc.js
@@ -0,0 +1,27 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<Toolbar aria-label="Actions">
+    Content
+</Toolbar>
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Toolbar uses <i>toolbar</i> role for the root element, <i>aria-orientation</i> is not included as it defaults to <i>horizontal</i>. Any valid attribute is passed to the root element so you may add additional properties like{' '}
+                <i>aria-labelledby</i> and <i>aria-labelled</i> to define the element if required.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <p>Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/toolbar/basicdoc.js b/components/doc/toolbar/basicdoc.js
new file mode 100644
index 0000000000..643fd0cb29
--- /dev/null
+++ b/components/doc/toolbar/basicdoc.js
@@ -0,0 +1,162 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { SplitButton } from '@/components/lib/splitbutton/SplitButton';
+import { Toolbar } from '@/components/lib/toolbar/Toolbar';
+import React from 'react';
+
+export function BasicDoc(props) {
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times'
+        }
+    ];
+
+    const startContent = (
+        <React.Fragment>
+            <Button icon="pi pi-plus" className="mr-2" />
+            <Button icon="pi pi-print" className="mr-2" />
+            <Button icon="pi pi-upload" />
+        </React.Fragment>
+    );
+
+    const centerContent = (
+        <IconField iconPosition="left">
+            <InputIcon className="pi pi-search" />
+            <InputText placeholder="Search" />
+        </IconField>
+    );
+
+    const endContent = (
+        <React.Fragment>
+            <SplitButton label="Save" model={items} icon="pi pi-check" />
+        </React.Fragment>
+    );
+
+    const code = {
+        basic: `
+<Toolbar start={startContent} end={endContent} />
+        `,
+        javascript: `
+import React from 'react';
+import { Toolbar } from 'primereact/toolbar';
+import { Button } from 'primereact/button';
+import { SplitButton } from 'primereact/splitbutton';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+
+export default function BasicDemo() {
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times'
+        }
+    ];
+
+    const startContent = (
+        <React.Fragment>
+            <Button icon="pi pi-plus" className="mr-2" />
+            <Button icon="pi pi-print" className="mr-2" />
+            <Button icon="pi pi-upload" />
+        </React.Fragment>
+    );
+
+    const centerContent = (
+        <IconField iconPosition="left">
+            <InputIcon className="pi pi-search" />
+            <InputText placeholder="Search" />
+        </IconField>
+    );
+
+    const endContent = (
+        <React.Fragment>
+            <SplitButton label="Save" model={items} icon="pi pi-check"></SplitButton>
+        </React.Fragment>
+    );
+
+    return (
+        <div className="card">
+            <Toolbar start={startContent} center={centerContent} end={endContent} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Toolbar } from 'primereact/toolbar';
+import { Button } from 'primereact/button';
+import { MenuItem } from 'primereact/menuitem';
+import { SplitButton } from 'primereact/splitbutton';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+
+export default function BasicDemo() {
+    const items: MenuItem[] = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times'
+        }
+    ];
+
+    const startContent = (
+        <React.Fragment>
+            <Button icon="pi pi-plus" className="mr-2" />
+            <Button icon="pi pi-print" className="mr-2" />
+            <Button icon="pi pi-upload" />
+        </React.Fragment>
+    );
+
+    const centerContent = (
+        <IconField iconPosition="left">
+            <InputIcon className="pi pi-search" />
+            <InputText placeholder="Search" />
+        </IconField>
+    );
+
+    const endContent = (
+        <React.Fragment>
+            <SplitButton label="Save" model={items} icon="pi pi-check"></SplitButton>
+        </React.Fragment>
+    );
+
+    return (
+        <div className="card">
+            <Toolbar start={startContent} center={centerContent} end={endContent} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> properties to place content at these sections.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Toolbar start={startContent} center={centerContent} end={endContent} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toolbar/customdoc.js b/components/doc/toolbar/customdoc.js
new file mode 100644
index 0000000000..1e35a43272
--- /dev/null
+++ b/components/doc/toolbar/customdoc.js
@@ -0,0 +1,197 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Toolbar } from '@/components/lib/toolbar/Toolbar';
+import { Avatar } from '@/components/lib/avatar/Avatar';
+import React from 'react';
+
+export function CustomDoc(props) {
+    const startContent = (
+        <React.Fragment>
+            <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g mask="url(#mask0_2642_713)">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                        fill="var(--primary-color)"
+                    />
+                </g>
+                <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+                <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+            </svg>
+        </React.Fragment>
+    );
+
+    const centerContent = (
+        <div className="flex flex-wrap align-items-center gap-3">
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-home text-2xl" />
+            </button>
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-user text-2xl" />
+            </button>
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-search text-2xl" />
+            </button>
+        </div>
+    );
+
+    const endContent = (
+        <React.Fragment>
+            <div className="flex align-items-center gap-2">
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold text-bluegray-50">Amy Elsner</span>
+            </div>
+        </React.Fragment>
+    );
+
+    const code = {
+        basic: `
+<Toolbar start={startContent} end={endContent} />
+        `,
+        javascript: `
+import React from 'react';
+import { Toolbar } from 'primereact/toolbar';
+import { Avatar } from 'primereact/avatar';
+
+export default function CustomDemo() {
+    const startContent = (
+        <React.Fragment>
+            <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g mask="url(#mask0_2642_713)">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                        fill="var(--primary-color)"
+                    />
+                </g>
+                <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+                <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+            </svg>
+        </React.Fragment>
+    );
+
+    const centerContent = (
+        <div className="flex flex-wrap align-items-center gap-3">
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-home text-2xl"></i>
+            </button>
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-user text-2xl"></i>
+            </button>
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-search text-2xl"></i>
+            </button>
+        </div>
+    );
+
+    const endContent = (
+        <React.Fragment>
+            <div className="flex align-items-center gap-2">
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold text-bluegray-50">Amy Elsner</span>
+            </div>
+        </React.Fragment>
+    );
+
+    return (
+        <div className="card">
+            <Toolbar start={startContent} center={centerContent} end={endContent} className="bg-gray-900 shadow-2" style={{ borderRadius: '3rem', backgroundImage: 'linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Toolbar } from 'primereact/toolbar';
+import { Avatar } from 'primereact/avatar';
+
+export default function CustomDemo() {
+    const startContent = (
+        <React.Fragment>
+            <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g mask="url(#mask0_2642_713)">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                        fill="var(--primary-color)"
+                    />
+                </g>
+                <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z" fill="var(--primary-color)" />
+                <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+            </svg>
+        </React.Fragment>
+    );
+
+    const centerContent = (
+        <div className="flex flex-wrap align-items-center gap-3">
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-home text-2xl"></i>
+            </button>
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-user text-2xl"></i>
+            </button>
+            <button className="p-link inline-flex justify-content-center align-items-center text-white h-3rem w-3rem border-circle hover:bg-white-alpha-10 transition-all transition-duration-200">
+                <i className="pi pi-search text-2xl"></i>
+            </button>
+        </div>
+    );
+
+    const endContent = (
+        <React.Fragment>
+            <div className="flex align-items-center gap-2">
+                <Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />
+                <span className="font-bold text-bluegray-50">Amy Elsner</span>
+            </div>
+        </React.Fragment>
+    );
+
+    return (
+        <div className="card">
+            <Toolbar start={startContent} center={centerContent} end={endContent} className="bg-gray-900 shadow-2" style={{ borderRadius: '3rem', backgroundImage: 'linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> properties to place content at these sections.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Toolbar start={startContent} center={centerContent} end={endContent} className="bg-gray-900 shadow-2" style={{ borderRadius: '3rem', backgroundImage: 'linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/toolbar/importdoc.js b/components/doc/toolbar/importdoc.js
new file mode 100644
index 0000000000..cb27d00328
--- /dev/null
+++ b/components/doc/toolbar/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Toolbar } from 'primereact/toolbar';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/toolbar/pt/wireframe.js b/components/doc/toolbar/pt/wireframe.js
new file mode 100644
index 0000000000..599b086feb
--- /dev/null
+++ b/components/doc/toolbar/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/toolbar.jpg" alt="toolbar" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/toolbar/styledoc.js b/components/doc/toolbar/styledoc.js
new file mode 100644
index 0000000000..85440bf729
--- /dev/null
+++ b/components/doc/toolbar/styledoc.js
@@ -0,0 +1,43 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-toolbar</td>
+                            <td>Main container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toolbar-group-start</td>
+                            <td>Left content container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toolbar-group-center</td>
+                            <td>Center content container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toolbar-group-end</td>
+                            <td>Right content container.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/toolbar/theming/styleddoc.js b/components/doc/toolbar/theming/styleddoc.js
new file mode 100644
index 0000000000..46ff5df389
--- /dev/null
+++ b/components/doc/toolbar/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-toolbar</td>
+                            <td>Main container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toolbar-group-start</td>
+                            <td>Left content container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toolbar-group-center</td>
+                            <td>Center content container.</td>
+                        </tr>
+                        <tr>
+                            <td>p-toolbar-group-end</td>
+                            <td>Right content container.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/toolbar/theming/tailwinddoc.js b/components/doc/toolbar/theming/tailwinddoc.js
new file mode 100644
index 0000000000..954bb944bf
--- /dev/null
+++ b/components/doc/toolbar/theming/tailwinddoc.js
@@ -0,0 +1,94 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    toolbar: {
+        root: {
+            className: classNames('flex items-center justify-between flex-wrap', 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-blue-900/40  p-5 rounded-md gap-2')
+        },
+        start: 'flex items-center',
+        center: 'flex items-center',
+        end: 'flex items-center'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+//import { useRouter } from 'next/router';
+import { Toolbar } from 'primereact/toolbar';
+import { Button } from 'primereact/button';
+import { SplitButton } from 'primereact/splitbutton';
+
+export default function UnstyledDemo() {
+    //const router = useRouter();
+    const items = [
+        {
+            label: 'Update',
+            icon: 'pi pi-refresh'
+        },
+        {
+            label: 'Delete',
+            icon: 'pi pi-times'
+        },
+        {
+            label: 'React Website',
+            icon: 'pi pi-external-link',
+            command: () => {
+                window.location.href = 'https://reactjs.org/'
+            }
+        },
+        {   label: 'Upload',
+            icon: 'pi pi-upload',
+            command: () => {
+                //router.push('/fileupload');
+            }
+        }
+    ];
+
+    const startContent = (
+        <React.Fragment>
+            <Button label="New" icon="pi pi-plus" className="mr-2" />
+            <Button label="Upload" icon="pi pi-upload" className="p-button-success" />
+            <i className="pi pi-bars text-gray-700 dark:text-white/80 mr-2" />
+            <SplitButton label="Save" icon="pi pi-check" model={items} className="p-button-warning"></SplitButton>
+        </React.Fragment>
+    );
+
+    const endContent = (
+        <React.Fragment>
+            <Button icon="pi pi-search" className="mr-2" />
+            <Button icon="pi pi-calendar" className="p-button-success mr-2" />
+            <Button icon="pi pi-times" className="p-button-danger" />
+        </React.Fragment>
+    );
+
+    return (
+        <div className="card">
+            <Toolbar start={startContent} end={endContent} />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/tooltip/accessibilitydoc.js b/components/doc/tooltip/accessibilitydoc.js
new file mode 100644
index 0000000000..d02e67a280
--- /dev/null
+++ b/components/doc/tooltip/accessibilitydoc.js
@@ -0,0 +1,32 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Tooltip component uses <i>tooltip</i> role and when it becomes visible the generated id of the tooltip is defined as the <i>aria-describedby</i> of the target.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the tooltip when focus is on the target.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/tooltip/autohidedoc.js b/components/doc/tooltip/autohidedoc.js
new file mode 100644
index 0000000000..fc5a2369a4
--- /dev/null
+++ b/components/doc/tooltip/autohidedoc.js
@@ -0,0 +1,55 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function AutoHideDoc(props) {
+    const code = {
+        basic: `
+<InputText type="text" placeholder="autoHide: false" tooltip="Enter your username" tooltipOptions={{ autoHide: false }} />
+<InputText type="text" placeholder="autoHide: true" tooltip="Enter your username" />
+        `,
+        javascript: `
+import React from 'react';
+import { InputText } from 'primereact/inputtext';
+
+export default function AutoHideDemo() {
+
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-2">
+            <InputText type="text" placeholder="autoHide: false" tooltip="Enter your username" tooltipOptions={{ autoHide: false }} />
+            <InputText type="text" placeholder="autoHide: true" tooltip="Enter your username" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { InputText } from 'primereact/inputtext';
+
+export default function AutoHideDemo() {
+
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-2">
+            <InputText type="text" placeholder="autoHide: false" tooltip="Enter your username" tooltipOptions={{ autoHide: false }} />
+            <InputText type="text" placeholder="autoHide: true" tooltip="Enter your username" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set <i>autoHide</i> to false to change the default behavior.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap align-items-center justify-content-center gap-2">
+                <InputText type="text" placeholder="autoHide: false" tooltip="Enter your username" tooltipOptions={{ autoHide: false }} />
+                <InputText type="text" placeholder="autoHide: true" tooltip="Enter your username" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/delaydoc.js b/components/doc/tooltip/delaydoc.js
new file mode 100644
index 0000000000..1a8ef86abb
--- /dev/null
+++ b/components/doc/tooltip/delaydoc.js
@@ -0,0 +1,49 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function DelayDoc(props) {
+    const code = {
+        basic: `
+<Button tooltip="Confirm to proceed" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} label="Save" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function DelayDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button tooltip="Confirm to proceed" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} label="Save" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function DelayDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button tooltip="Confirm to proceed" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} label="Save" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Adding delays to the show and hide events are defined with <i>showDelay</i> and <i>hideDelay</i> options respectively.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button tooltip="Confirm to proceed" tooltipOptions={{ showDelay: 1000, hideDelay: 300 }} label="Save" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/disableddoc.js b/components/doc/tooltip/disableddoc.js
new file mode 100644
index 0000000000..6d614540a8
--- /dev/null
+++ b/components/doc/tooltip/disableddoc.js
@@ -0,0 +1,73 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<Tooltip target=".disabled-button" />
+<span className="disabled-button" data-pr-tooltip="Disabled">
+    <Button type="button" label="Save" icon="pi pi-check" disabled />
+</span>
+
+<Button type="button" label="Save" icon="pi pi-check" disabled tooltip="Disabled" tooltipOptions={{ showOnDisabled: true }} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Tooltip } from 'primereact/tooltip';
+import { Button } from 'primereact/button';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Tooltip target=".disabled-button" />
+            <span className="disabled-button" data-pr-tooltip="Disabled">
+                <Button type="button" label="Save" icon="pi pi-check" disabled />
+            </span>
+
+            <Button type="button" label="Save" icon="pi pi-check" disabled tooltip="Disabled" tooltipOptions={{ showOnDisabled: true }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Tooltip } from 'primereact/tooltip';
+import { Button } from 'primereact/button';
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <Tooltip target=".disabled-button" />
+            <span className="disabled-button" data-pr-tooltip="Disabled">
+                <Button type="button" label="Save" icon="pi pi-check" disabled />
+            </span>
+
+            <Button type="button" label="Save" icon="pi pi-check" disabled tooltip="Disabled" tooltipOptions={{ showOnDisabled: true }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Disabled elements do not trigger user interactions due to standard behavior. A common workaround for such cases is wrapping the disabled element with another element that has a tooltip attached. If the tooltip is built-in to the
+                    component then enable <i>showOnDisabled</i> option instead.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <Tooltip target=".disabled-button" />
+                <span className="disabled-button" data-pr-tooltip="Disabled">
+                    <Button type="button" label="Save" icon="pi pi-check" disabled />
+                </span>
+
+                <Button type="button" label="Save" icon="pi pi-check" disabled tooltip="Disabled" tooltipOptions={{ showOnDisabled: true }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/eventdoc.js b/components/doc/tooltip/eventdoc.js
new file mode 100644
index 0000000000..9e63b39d47
--- /dev/null
+++ b/components/doc/tooltip/eventdoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function EventDoc(props) {
+    const code = {
+        basic: `
+<InputText type="text" placeholder="Hover" tooltip="Enter your username"/>
+<InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{ event: 'focus' }} />
+<InputText type="text" placeholder="Both" tooltip="Enter your username" tooltipOptions={{ event: 'both' }} />
+        `,
+        javascript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function EventDemo() {
+    return (
+        <div className="card flex justify-content-center gap-2">
+            <InputText type="text" placeholder="Hover" tooltip="Enter your username"/>
+            <InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{ event: 'focus' }} />
+            <InputText type="text" placeholder="Both" tooltip="Enter your username" tooltipOptions={{ event: 'both' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { InputText } from 'primereact/inputtext';
+
+export default function EventDemo() {
+    return (
+        <div className="card flex justify-content-center gap-2">
+            <InputText type="text" placeholder="Hover" tooltip="Enter your username"/>
+            <InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{ event: 'focus' }} />
+            <InputText type="text" placeholder="Both" tooltip="Enter your username" tooltipOptions={{ event: 'both' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Tooltip gets displayed on hover event by default, use the <i>event</i> option to set <i>focus</i> or <i>both</i> as alternatives.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <InputText type="text" placeholder="Hover" tooltip="Enter your username" />
+                <InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{ event: 'focus' }} />
+                <InputText type="text" placeholder="Both" tooltip="Enter your username" tooltipOptions={{ event: 'both' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/importdoc.js b/components/doc/tooltip/importdoc.js
new file mode 100644
index 0000000000..bfedcf3790
--- /dev/null
+++ b/components/doc/tooltip/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Tooltip } from 'primereact/tooltip';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/mousetrackdoc.js b/components/doc/tooltip/mousetrackdoc.js
new file mode 100644
index 0000000000..0f37be5933
--- /dev/null
+++ b/components/doc/tooltip/mousetrackdoc.js
@@ -0,0 +1,64 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+
+export function MouseTrackDoc(props) {
+    const code = {
+        basic: `
+<Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />
+
+<Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
+<img className="logo" alt="logo" src="http://github.com/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Tooltip } from 'primereact/tooltip';
+import { Button } from 'primereact/button';
+
+export default function MouseTrackDemo() {
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-5">
+            <Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />
+
+            <Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
+            <img className="logo" alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Tooltip } from 'primereact/tooltip';
+import { Button } from 'primereact/button';
+
+export default function MouseTrackDemo() {
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-5">
+            <Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />
+
+            <Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
+            <img className="logo" alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>mouseTrack</i> option is enabled, position of the Tooltip is updated according to the pointer coordinates.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap align-items-center justify-content-center gap-5">
+                <Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />
+
+                <Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
+                <img className="logo" alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/positiondoc.js b/components/doc/tooltip/positiondoc.js
new file mode 100644
index 0000000000..cdb509e03e
--- /dev/null
+++ b/components/doc/tooltip/positiondoc.js
@@ -0,0 +1,65 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputText } from '@/components/lib/inputtext/InputText';
+
+export function PositionDoc(props) {
+    const code = {
+        basic: `
+<InputText type="text" placeholder="Right" tooltip="Enter your username" />
+<InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
+<InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
+<InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
+<InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
+        `,
+        javascript: `
+import React from 'react';
+import { InputText } from 'primereact/inputtext';
+
+export default function PositionDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <InputText type="text" placeholder="Right" tooltip="Enter your username" />
+            <InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
+            <InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
+            <InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
+            <InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { InputText } from 'primereact/inputtext';
+
+export default function PositionDemo() {
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-2">
+            <InputText type="text" placeholder="Right" tooltip="Enter your username" />
+            <InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
+            <InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
+            <InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
+            <InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Form components have built-in support with the <i>tooltip</i> property and customizations like positioning is provided with <i>tooltipOptions</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-2">
+                <InputText type="text" placeholder="Right" tooltip="Enter your username" />
+                <InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
+                <InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
+                <InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
+                <InputText type="text" placeholder="Mouse" tooltip="Enter your username" tooltipOptions={{ position: 'mouse' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/pt/wireframe.js b/components/doc/tooltip/pt/wireframe.js
new file mode 100644
index 0000000000..769ed3aa3e
--- /dev/null
+++ b/components/doc/tooltip/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/tooltip.jpg" alt="tag" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/tooltip/reactivedoc.js b/components/doc/tooltip/reactivedoc.js
new file mode 100644
index 0000000000..bd1d5884b6
--- /dev/null
+++ b/components/doc/tooltip/reactivedoc.js
@@ -0,0 +1,93 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Knob } from '@/components/lib/knob/Knob';
+import { Slider } from '@/components/lib/slider/Slider';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+import { useState } from 'react';
+
+export function ReactiveDoc(props) {
+    const [buttonTooltip, setButtonTooltip] = useState('Click to proceed');
+    const [knobValue, setKnobValue] = useState(60);
+    const [sliderValue, setSliderValue] = useState(20);
+
+    const code = {
+        basic: `
+<Button type="button" label="Save" icon="pi pi-check" tooltip={buttonTooltip} onClick={() => setButtonTooltip('Completed')} />
+
+<Tooltip target=".knob" content={\`\${knobValue}%\`} />
+<Knob className="knob" value={knobValue} onChange={(e) => setKnobValue(e.value)} showValue={false} />
+
+<Tooltip target=".slider>.p-slider-handle" content={\`\${sliderValue}%\`} position="top" event="focus" />
+<Slider className="slider" value={sliderValue} onChange={(e) => setSliderValue(e.value)} style={{ width: '14rem' }} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { Tooltip } from 'primereact/tooltip';
+import { Slider } from 'primereact/slider';
+import { Knob } from 'primereact/knob';
+import { Button } from 'primereact/button';
+
+export default function ReactiveDemo() {
+    const [buttonTooltip, setButtonTooltip] = useState('Click to proceed');
+    const [knobValue, setKnobValue] = useState(60);
+    const [sliderValue, setSliderValue] = useState(20);
+
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-5">
+            <Button type="button" label="Save" icon="pi pi-check" tooltip={buttonTooltip} onClick={() => setButtonTooltip('Completed')} />
+
+            <Tooltip target=".knob" content={\`\${knobValue}%\`} />
+            <Knob className="knob" value={knobValue} onChange={(e) => setKnobValue(e.value)} showValue={false} />
+
+            <Tooltip target=".slider>.p-slider-handle" content={\`\${sliderValue}%\`} position="top" event="focus" />
+            <Slider className="slider" value={sliderValue} onChange={(e) => setSliderValue(e.value)} style={{ width: '14rem' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { Tooltip } from 'primereact/tooltip';
+import { Slider } from 'primereact/slider';
+import { Knob } from 'primereact/knob';
+import { Button } from 'primereact/button';
+
+export default function ReactiveDemo() {
+    const [buttonTooltip, setButtonTooltip] = useState<string>('Click to proceed');
+    const [knobValue, setKnobValue] = useState<number>(60);
+    const [sliderValue, setSliderValue] = useState<number>(20);
+
+    return (
+        <div className="card flex flex-wrap align-items-center justify-content-center gap-5">
+            <Button type="button" label="Save" icon="pi pi-check" tooltip={buttonTooltip} onClick={() => setButtonTooltip('Completed')} />
+
+            <Tooltip target=".knob" content={\`\${knobValue}%\`} />
+            <Knob className="knob" value={knobValue} onChange={(e) => setKnobValue(e.value)} showValue={false} />
+
+            <Tooltip target=".slider>.p-slider-handle" content={\`\${sliderValue}%\`} position="top" event="focus" />
+            <Slider className="slider" value={sliderValue} onChange={(e) => setSliderValue(e.value)} style={{ width: '14rem' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Tooltip content is reactive to reflect changes related to the target component.</p>
+            </DocSectionText>
+            <div className="card flex flex-wrap align-items-center justify-content-center gap-5">
+                <Button type="button" label="Save" icon="pi pi-check" tooltip={buttonTooltip} onClick={() => setButtonTooltip('Completed')} />
+
+                <Tooltip target=".knob" content={`${knobValue}%`} />
+                <Knob className="knob" value={knobValue} onChange={(e) => setKnobValue(e.value)} showValue={false} />
+
+                <Tooltip target=".slider>.p-slider-handle" content={`${sliderValue}%`} position="top" event="focus" />
+                <Slider className="slider" value={sliderValue} onChange={(e) => setSliderValue(e.value)} style={{ width: '14rem' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/styledoc.js b/components/doc/tooltip/styledoc.js
new file mode 100644
index 0000000000..49152e904d
--- /dev/null
+++ b/components/doc/tooltip/styledoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tooltip</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tooltip-arrow</td>
+                            <td>Arrow of the tooltip</td>
+                        </tr>
+                        <tr>
+                            <td>p-tooltip-text</td>
+                            <td>Text of the tooltip</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tooltip/targetdoc.js b/components/doc/tooltip/targetdoc.js
new file mode 100644
index 0000000000..3d96c77e10
--- /dev/null
+++ b/components/doc/tooltip/targetdoc.js
@@ -0,0 +1,90 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Badge } from '@/components/lib/badge/Badge';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+
+export function TargetDoc(props) {
+    const code = {
+        basic: `
+<Tooltip target=".custom-target-icon" />
+
+<i className="custom-target-icon pi pi-envelope p-text-secondary p-overlay-badge"
+    data-pr-tooltip="No notifications"
+    data-pr-position="right"
+    data-pr-at="right+5 top"
+    data-pr-my="left center-2"
+    style={{ fontSize: '2rem', cursor: 'pointer' }}>
+    <Badge severity="danger"></Badge>
+</i>
+        `,
+        javascript: `
+import React from 'react';
+import { Tooltip } from 'primereact/tooltip';
+import { Badge } from 'primereact/badge';
+
+export default function TargetDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tooltip target=".custom-target-icon" />
+
+            <i className="custom-target-icon pi pi-envelope p-text-secondary p-overlay-badge"
+                data-pr-tooltip="No notifications"
+                data-pr-position="right"
+                data-pr-at="right+5 top"
+                data-pr-my="left center-2"
+                style={{ fontSize: '2rem', cursor: 'pointer' }}>
+                <Badge severity="danger"></Badge>
+            </i>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react';
+import { Tooltip } from 'primereact/tooltip';
+import { Badge } from 'primereact/badge';
+
+export default function TargetDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tooltip target=".custom-target-icon" />
+
+            <i className="custom-target-icon pi pi-envelope p-text-secondary p-overlay-badge"
+                data-pr-tooltip="No notifications"
+                data-pr-position="right"
+                data-pr-at="right+5 top"
+                data-pr-my="left center-2"
+                style={{ fontSize: '2rem', cursor: 'pointer' }}>
+                <Badge severity="danger"></Badge>
+            </i>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Standalone <i>Tooltip</i> component can attach to any element using the <i>target</i> property that accepts a valid query selector. In this case, content and options need to be defined with <i>data-pr</i> attributes.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Tooltip target=".custom-target-icon" />
+
+                <i
+                    className="custom-target-icon pi pi-envelope p-text-secondary p-overlay-badge"
+                    data-pr-tooltip="No notifications"
+                    data-pr-position="right"
+                    data-pr-at="right+5 top"
+                    data-pr-my="left center-2"
+                    style={{ fontSize: '2rem', cursor: 'pointer' }}
+                >
+                    <Badge severity="danger" />
+                </i>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/templatedoc.js b/components/doc/tooltip/templatedoc.js
new file mode 100644
index 0000000000..1caa340a27
--- /dev/null
+++ b/components/doc/tooltip/templatedoc.js
@@ -0,0 +1,68 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+
+export function TemplateDoc(props) {
+    const code = {
+        basic: `
+<Tooltip target=".custom-tooltip-btn">
+    <img alt="logo" src="http://github.com/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+</Tooltip>
+
+<Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { Tooltip } from 'primereact/tooltip';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tooltip target=".custom-tooltip-btn">
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+            </Tooltip>
+
+            <Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Tooltip } from 'primereact/tooltip';
+import { Button } from 'primereact/button';
+
+export default function TemplateDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Tooltip target=".custom-tooltip-btn">
+                <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+            </Tooltip>
+
+            <Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content can be placed as the tooltip value either with <i>content</i> property or nesting the content as children.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Tooltip target=".custom-tooltip-btn">
+                    <img alt="logo" src="https://primefaces.org/cdn/primereact/images/logo.png" data-pr-tooltip="PrimeReact-Logo" height="80px" />
+                </Tooltip>
+
+                <Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tooltip/theming/styleddoc.js b/components/doc/tooltip/theming/styleddoc.js
new file mode 100644
index 0000000000..2e728a39b8
--- /dev/null
+++ b/components/doc/tooltip/theming/styleddoc.js
@@ -0,0 +1,35 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tooltip</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tooltip-arrow</td>
+                            <td>Arrow of the tooltip</td>
+                        </tr>
+                        <tr>
+                            <td>p-tooltip-text</td>
+                            <td>Text of the tooltip</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tooltip/theming/tailwinddoc.js b/components/doc/tooltip/theming/tailwinddoc.js
new file mode 100644
index 0000000000..94ef90ddab
--- /dev/null
+++ b/components/doc/tooltip/theming/tailwinddoc.js
@@ -0,0 +1,65 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    tooltip: {
+        root: ({ context }) => {
+            return {
+                className: classNames('absolute shadow-md', {
+                    'py-0 px-1': context.right || context.left || (!context.right && !context.left && !context.top && !context.bottom),
+                    'py-1 px-0': context.top || context.bottom
+                })
+            };
+        },
+        arrow: ({ context }) => ({
+            className: classNames('absolute w-0 h-0 border-transparent border-solid', {
+                '-mt-1 border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-gray-600': context.right,
+                '-mt-1 border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-gray-600': context.left,
+                '-ml-1 border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-gray-600': context.top,
+                '-ml-1 border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-gray-600': context.bottom
+            })
+        }),
+        text: {
+            className: 'p-3 bg-gray-600 text-white rounded-md whitespace-pre-line break-words'
+        }
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React from 'react';
+import { InputText } from 'primereact/inputtext';
+
+export default function UnstyledDemo() {
+    return (
+        <div className="card flex flex-wrap justify-center gap-2">
+            <InputText type="text" placeholder="Right" tooltip="Enter your username" />
+            <InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{ position: 'top' }} />
+            <InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{ position: 'bottom' }} />
+            <InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{ position: 'left' }} />
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/tree/accessibilitydoc.js b/components/doc/tree/accessibilitydoc.js
new file mode 100644
index 0000000000..185c083af6
--- /dev/null
+++ b/components/doc/tree/accessibilitydoc.js
@@ -0,0 +1,83 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The root list element has a <i>tree</i> role whereas each list item has a <i>treeitem</i> role along with <i>aria-label</i>
+                , <i>aria-selected</i> and <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. The container element of a treenode has the <i>group</i> role. Checkbox and toggle icons
+                are hidden from screen readers as their parent element with <i>treeitem</i> role and attributes are used instead for readers and keyboard support. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are
+                calculated implicitly and added to each treeitem.
+            </p>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>
+                                Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+                                page tab sequence.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>
+                                Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in
+                                the page tab sequence.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the focused treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Selects the focused treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/tree/basicdoc.js b/components/doc/tree/basicdoc.js
new file mode 100644
index 0000000000..0e61077d01
--- /dev/null
+++ b/components/doc/tree/basicdoc.js
@@ -0,0 +1,100 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function BasicDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<Tree value={nodes} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState([]);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Tree requires a collection of <i>TreeNode</i> instances as a <i>value</i>.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/contextmenudoc.js b/components/doc/tree/contextmenudoc.js
new file mode 100644
index 0000000000..f28e7694b3
--- /dev/null
+++ b/components/doc/tree/contextmenudoc.js
@@ -0,0 +1,219 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+import { Toast } from '@/components/lib/toast/Toast';
+import { Tree } from '@/components/lib/tree/Tree';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ContextMenuDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState({});
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const toast = useRef(null);
+    const cm = useRef(null);
+    const menu = [
+        {
+            label: 'View Key',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            }
+        },
+        {
+            label: 'Toggle',
+            icon: 'pi pi-sort',
+            command: () => {
+                let _expandedKeys = { ...expandedKeys };
+
+                if (_expandedKeys[selectedNodeKey]) {
+                    delete _expandedKeys[selectedNodeKey];
+                } else {
+                    _expandedKeys[selectedNodeKey] = true;
+                }
+
+                setExpandedKeys(_expandedKeys);
+            }
+        }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+
+<ContextMenu model={menu} ref={cm} />
+
+<Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} 
+    contextMenuSelectionKey={selectedNodeKey} onContextMenuSelectionChange={(e) => setSelectedNodeKey(e.value)} 
+    onContextMenu={(e) => cm.current.show(e.originalEvent)} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Tree } from 'primereact/tree';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Toast } from 'primereact/toast';
+import { NodeService } from './service/NodeService';
+
+export default function ContextMenuDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState({});
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const toast = useRef(null);
+    const cm = useRef(null);
+    const menu = [
+        {
+            label: 'View Key',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            }
+        },
+        {
+            label: 'Toggle',
+            icon: 'pi pi-sort',
+            command: () => {
+                let _expandedKeys = { ...expandedKeys };
+
+                if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
+                else _expandedKeys[selectedNodeKey] = true;
+
+                setExpandedKeys(_expandedKeys);
+            }
+        }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <>
+            <Toast ref={toast} />
+            
+            <ContextMenu model={menu} ref={cm} />
+
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} 
+                    contextMenuSelectionKey={selectedNodeKey} onContextMenuSelectionChange={(e) => setSelectedNodeKey(e.value)} 
+                    onContextMenu={(e) => cm.current.show(e.originalEvent)} className="w-full md:w-30rem" />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Tree, TreeExpandedKeysType } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Toast } from 'primereact/toast';
+import { NodeService } from './service/NodeService';
+
+export default function ContextMenuDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [expandedKeys, setExpandedKeys] = useState<TreeExpandedKeysType>({});
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string | null>(null);
+    const toast = useRef<Toast>(null);
+    const cm = useRef<ContextMenu>(null);
+    const menu = [
+        {
+            label: 'View Key',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            }
+        },
+        {
+            label: 'Toggle',
+            icon: 'pi pi-sort',
+            command: () => {
+                let _expandedKeys = { ...expandedKeys };
+
+                if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
+                else _expandedKeys[selectedNodeKey] = true;
+
+                setExpandedKeys(_expandedKeys);
+            }
+        }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <>
+            <Toast ref={toast} />
+
+            <ContextMenu model={menu} ref={cm} />
+
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} 
+                    contextMenuSelectionKey={selectedNodeKey} onContextMenuSelectionChange={(e) => setSelectedNodeKey(e.value)} 
+                    onContextMenu={(e) => cm.current.show(e.originalEvent)} className="w-full md:w-30rem" />
+            </div>
+        </>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-sort',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Tree has exclusive integration with <Link href="http://github.com/contextMenu">ContextMenu</Link> using <i>contextMenuSelectionKey</i>, <i>onContextMenuSelectionChange</i> and <i>onContextMenu</i> properties.
+                </p>
+            </DocSectionText>
+            <Toast ref={toast} />
+
+            <ContextMenu model={menu} ref={cm} />
+
+            <div className="card flex justify-content-center">
+                <Tree
+                    value={nodes}
+                    expandedKeys={expandedKeys}
+                    onToggle={(e) => setExpandedKeys(e.value)}
+                    contextMenuSelectionKey={selectedNodeKey}
+                    onContextMenuSelectionChange={(e) => setSelectedNodeKey(e.value)}
+                    onContextMenu={(e) => cm.current.show(e.originalEvent)}
+                    className="w-full md:w-30rem"
+                />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/controlleddoc.js b/components/doc/tree/controlleddoc.js
new file mode 100644
index 0000000000..cb35349e78
--- /dev/null
+++ b/components/doc/tree/controlleddoc.js
@@ -0,0 +1,198 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ControlledDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState({ 0: true, '0-0': true });
+
+    const expandAll = () => {
+        let _expandedKeys = {};
+
+        for (let node of nodes) {
+            expandNode(node, _expandedKeys);
+        }
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node, _expandedKeys) => {
+        if (node.children && node.children.length) {
+            _expandedKeys[node.key] = true;
+
+            for (let child of node.children) {
+                expandNode(child, _expandedKeys);
+            }
+        }
+    };
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<div className="flex flex-wrap gap-2 mb-4">
+    <Button type="button" icon="pi pi-plus" label="Expand All" onClick={expandAll} />
+    <Button type="button" icon="pi pi-minus" label="Collapse All" onClick={collapseAll} />
+</div>
+
+<Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { Button } from 'primereact/button';
+import { NodeService } from './service/NodeService';
+
+export default function ControlledDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState({'0': true, '0-0': true});
+
+    const expandAll = () => {
+        let _expandedKeys = {};
+
+        for (let node of nodes) {
+            expandNode(node, _expandedKeys);
+        }
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node, _expandedKeys) => {
+        if (node.children && node.children.length) {
+            _expandedKeys[node.key] = true;
+
+            for (let child of node.children) {
+                expandNode(child, _expandedKeys);
+            }
+        }
+    };
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+    
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="flex flex-wrap gap-2 mb-4">
+                <Button type="button" icon="pi pi-plus" label="Expand All" onClick={expandAll} />
+                <Button type="button" icon="pi pi-minus" label="Collapse All" onClick={collapseAll} />
+            </div>
+
+            <Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Tree, TreeExpandedKeysType } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { Button } from 'primereact/button';
+import { NodeService } from './service/NodeService';
+
+export default function ControlledDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [expandedKeys, setExpandedKeys] = useState<TreeExpandedKeysType>({'0': true, '0-0': true});
+
+    const expandAll = () => {
+        let _expandedKeys = {};
+
+        for (let node of nodes) {
+            expandNode(node, _expandedKeys);
+        }
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node: TreeNode, _expandedKeys: TreeExpandedKeysType) => {
+        if (node.children && node.children.length) {
+            _expandedKeys[node.key] = true;
+
+            for (let child of node.children) {
+                expandNode(child, _expandedKeys);
+            }
+        }
+    };
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+    
+    return (
+        <div className="card flex flex-column align-items-center">
+            <div className="flex flex-wrap gap-2 mb-4">
+                <Button type="button" icon="pi pi-plus" label="Expand All" onClick={expandAll} />
+                <Button type="button" icon="pi pi-minus" label="Collapse All" onClick={collapseAll} />
+            </div>
+
+            <Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Expanded state of nodes is managed programmatically with <i>expandedKeys</i> and <i>onToggle</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center">
+                <div className="flex flex-wrap gap-2 mb-4">
+                    <Button type="button" icon="pi pi-plus" label="Expand All" onClick={expandAll} />
+                    <Button type="button" icon="pi pi-minus" label="Collapse All" onClick={collapseAll} />
+                </div>
+
+                <Tree value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/dragdropdoc.js b/components/doc/tree/dragdropdoc.js
new file mode 100644
index 0000000000..60aec64580
--- /dev/null
+++ b/components/doc/tree/dragdropdoc.js
@@ -0,0 +1,101 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function DragDropDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<Tree value={nodes} dragdropScope="demo" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { NodeService } from './service/NodeService';
+
+export default function DragDropDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} dragdropScope="demo" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Tree, TreeDragDropEvent } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function DragDropDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} dragdropScope="demo" onDragDrop={(e: TreeDragDropEvent) => setNodes(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Nodes can be reordered with dragdrop using <i>dragdropScope</i> and <i>onDragDrop</i> properties. The <i>dragdropScope</i> defines a unique scope of the component so that other drag events do not intervene with the component
+                    whereas <i>onDragDrop</i> is a callback to update the new state after a drop.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} dragdropScope="demo" onDragDrop={(e) => setNodes(e.value)} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/eventsdoc.js b/components/doc/tree/eventsdoc.js
new file mode 100644
index 0000000000..c4e8b9a7d4
--- /dev/null
+++ b/components/doc/tree/eventsdoc.js
@@ -0,0 +1,176 @@
+import { useState, useEffect, useRef } from 'react';
+import { Tree } from '../../../components/lib/tree/Tree';
+import { Toast } from '../../../components/lib/toast/Toast';
+import { DocSectionCode } from '../../../components/doc/common/docsectioncode';
+import { DocSectionText } from '../../../components/doc/common/docsectiontext';
+import { NodeService } from '../../../service/NodeService';
+
+export function EventsDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState('');
+    const toast = useRef(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onExpand = (event) => {
+        toast.current.show({ severity: 'success', summary: 'Node Expanded', detail: event.node.label });
+    };
+
+    const onCollapse = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Node Collapsed', detail: event.node.label });
+    };
+
+    const onSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Node Selected', detail: event.node.label });
+    };
+
+    const onUnselect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Node Unselected', detail: event.node.label });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast} />
+<Tree value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} 
+    onExpand={onExpand} onCollapse={onCollapse} onSelect={onSelect} onUnselect={onUnselect} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Tree } from 'primereact/tree';
+import { Toast } from 'primereact/toast';
+import { NodeService } from './service/NodeService';
+
+export default function EventsDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState('');
+    const toast = useRef(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    const onExpand = (event) => {
+        toast.current.show({ severity: 'success', summary: 'Node Expanded', detail: event.node.label });
+    };
+
+    const onCollapse = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Node Collapsed', detail: event.node.label });
+    };
+
+    const onSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Node Selected', detail: event.node.label });
+    };
+
+    const onUnselect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Node Unselected', detail: event.node.label });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} 
+                    onExpand={onExpand} onCollapse={onCollapse} onSelect={onSelect} onUnselect={onUnselect} className="w-full md:w-30rem" />
+            </div>
+        </>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Tree, TreeEventNodeEvent } from 'primereact/tree';
+import { Toast } from 'primereact/toast';
+import { TreeNode } from "primereact/treenode";
+import { NodeService } from './service/NodeService';
+
+export default function EventsDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>('');
+    const toast = useRef<Toast>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    const onExpand = (event: TreeEventNodeEvent) => {
+        toast.current.show({ severity: 'success', summary: 'Node Expanded', detail: event.node.label });
+    };
+
+    const onCollapse = (event: TreeEventNodeEvent) => {
+        toast.current.show({ severity: 'warn', summary: 'Node Collapsed', detail: event.node.label });
+    };
+
+    const onSelect = (event: TreeEventNodeEvent) => {
+        toast.current.show({ severity: 'info', summary: 'Node Selected', detail: event.node.label });
+    };
+
+    const onUnselect = (event: TreeEventNodeEvent) => {
+        toast.current.show({ severity: 'info', summary: 'Node Unselected', detail: event.node.label });
+    };
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} 
+                    onExpand={onExpand} onCollapse={onCollapse} onSelect={onSelect} onUnselect={onUnselect} className="w-full md:w-30rem" />
+            </div>
+        </>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>An event is provided for each type of user interaction such as expand, collapse and selection.</p>
+            </DocSectionText>
+            <Toast ref={toast} />
+            <div className="card flex justify-content-center">
+                <Tree
+                    value={nodes}
+                    selectionMode="single"
+                    selectionKeys={selectedNodeKey}
+                    onSelectionChange={(e) => setSelectedNodeKey(e.value)}
+                    onExpand={onExpand}
+                    onCollapse={onCollapse}
+                    onSelect={onSelect}
+                    onUnselect={onUnselect}
+                    className="w-full md:w-30rem"
+                />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/filterdoc.js b/components/doc/tree/filterdoc.js
new file mode 100644
index 0000000000..f4ffbb2260
--- /dev/null
+++ b/components/doc/tree/filterdoc.js
@@ -0,0 +1,106 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function FilterDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<Tree value={nodes} filter filterMode="lenient" filterPlaceholder="Lenient Filter" className="w-full md:w-30rem" />
+<Tree value={nodes} filter filterMode="strict" filterPlaceholder="Strict Filter" className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { NodeService } from './service/NodeService';
+
+export default function FilterDemo() {
+    const [nodes, setNodes] = useState([]);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-5">
+            <Tree value={nodes} filter filterMode="lenient" filterPlaceholder="Lenient Filter" className="w-full md:w-30rem" />
+            <Tree value={nodes} filter filterMode="strict" filterPlaceholder="Strict Filter" className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function FilterDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex flex-wrap justify-content-center gap-5">
+            <Tree value={nodes} filter filterMode="lenient" filterPlaceholder="Lenient Filter" className="w-full md:w-30rem" />
+            <Tree value={nodes} filter filterMode="strict" filterPlaceholder="Strict Filter" className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Filtering is enabled by adding the <i>filter</i> property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define{' '}
+                    <i>filterBy</i> property. In addition <i>filterMode</i> specifies the filtering strategy. In <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all descendants of the node are
+                    included. On the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-5">
+                <Tree value={nodes} filter filterMode="lenient" filterPlaceholder="Lenient Filter" className="w-full md:w-30rem" />
+                <Tree value={nodes} filter filterMode="strict" filterPlaceholder="Strict Filter" className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/importdoc.js b/components/doc/tree/importdoc.js
new file mode 100644
index 0000000000..015aad027f
--- /dev/null
+++ b/components/doc/tree/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { Tree } from 'primereact/tree';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/tree/lazydoc.js b/components/doc/tree/lazydoc.js
new file mode 100644
index 0000000000..9a046f36aa
--- /dev/null
+++ b/components/doc/tree/lazydoc.js
@@ -0,0 +1,217 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+
+export function LazyDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    const createLazyNodes = () => {
+        return [
+            {
+                key: '0',
+                label: 'Node 0',
+                leaf: false
+            },
+            {
+                key: '1',
+                label: 'Node 1',
+                leaf: false
+            },
+            {
+                key: '2',
+                label: 'Node 2',
+                leaf: false
+            }
+        ];
+    };
+
+    const loadOnExpand = (event) => {
+        if (!event.node.children) {
+            setLoading(true);
+
+            setTimeout(() => {
+                let node = { ...event.node };
+
+                node.children = [];
+
+                for (let i = 0; i < 3; i++) {
+                    node.children.push({
+                        key: node.key + '-' + i,
+                        label: 'Lazy ' + node.label + '-' + i
+                    });
+                }
+
+                let value = [...nodes];
+
+                value[parseInt(event.node.key, 10)] = node;
+                setNodes(value);
+                setLoading(false);
+            }, 200);
+        }
+    };
+
+    useEffect(() => {
+        setTimeout(() => {
+            setNodes(createLazyNodes());
+            setLoading(false);
+        }, 2000);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<Tree value={nodes} onExpand={loadOnExpand} loading={loading} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Tree } from 'primereact/tree';
+
+export default function LazyDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    const createLazyNodes = () => {
+        return [
+            {
+                key: '0',
+                label: 'Node 0',
+                leaf: false
+            },
+            {
+                key: '1',
+                label: 'Node 1',
+                leaf: false
+            },
+            {
+                key: '2',
+                label: 'Node 2',
+                leaf: false
+            }
+        ];
+    }
+
+    const loadOnExpand = (event) => {
+        if (!event.node.children) {
+            setLoading(true);
+
+            setTimeout(() => {
+                let node = { ...event.node };
+
+                node.children = [];
+
+                for (let i = 0; i < 3; i++) {
+                    node.children.push({
+                        key: node.key + '-' + i,
+                        label: 'Lazy ' + node.label + '-' + i
+                    });
+                }
+
+                let value = [...nodes];
+                
+                value[parseInt(event.node.key, 10)] = node;
+                setNodes(value);
+                setLoading(false);
+            }, 200);
+        }
+    }
+
+    useEffect(() => {
+        setTimeout(() => {
+            setNodes(createLazyNodes());
+            setLoading(false);
+        }, 2000);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} onExpand={loadOnExpand} loading={loading} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { Tree } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+
+export default function LazyDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    const createLazyNodes = () => {
+        return [
+            {
+                key: '0',
+                label: 'Node 0',
+                leaf: false
+            },
+            {
+                key: '1',
+                label: 'Node 1',
+                leaf: false
+            },
+            {
+                key: '2',
+                label: 'Node 2',
+                leaf: false
+            }
+        ];
+    }
+
+    const loadOnExpand = (event) => {
+        if (!event.node.children) {
+            setLoading(true);
+
+            setTimeout(() => {
+                let node = { ...event.node };
+
+                node.children = [];
+
+                for (let i = 0; i < 3; i++) {
+                    node.children.push({
+                        key: node.key + '-' + i,
+                        label: 'Lazy ' + node.label + '-' + i
+                    });
+                }
+
+                let value = [...nodes];
+                
+                value[parseInt(event.node.key, 10)] = node;
+                setNodes(value);
+                setLoading(false);
+            }, 200);
+        }
+    }
+
+    useEffect(() => {
+        setTimeout(() => {
+            setNodes(createLazyNodes());
+            setLoading(false);
+        }, 2000);
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} onExpand={loadOnExpand} loading={loading} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using <i>onExpand</i> event.
+                </p>
+            </DocSectionText>
+
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} onExpand={loadOnExpand} loading={loading} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tree/pt/wireframe.js b/components/doc/tree/pt/wireframe.js
new file mode 100644
index 0000000000..3389f7f807
--- /dev/null
+++ b/components/doc/tree/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/tree.jpg" alt="tree" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/tree/selection/checkboxselectiondoc.js b/components/doc/tree/selection/checkboxselectiondoc.js
new file mode 100644
index 0000000000..7851fbb01c
--- /dev/null
+++ b/components/doc/tree/selection/checkboxselectiondoc.js
@@ -0,0 +1,119 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function CheckboxSelectionDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const introCode = {
+        basic: `
+{
+    '0-0': {
+        partialChecked: false,
+        checked: true
+    }
+}
+        `
+    };
+
+    const code = {
+        basic: `
+<Tree value={nodes} selectionMode="checkbox" selectionKeys={selectedKeys} 
+    onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { NodeService } from './service/NodeService';
+
+export default function CheckboxSelectionDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} selectionMode="checkbox" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Tree, TreeCheckboxSelectionKeys } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function CheckboxSelectionDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedKeys, setSelectedKeys] = useState<TreeCheckboxSelectionKeys | null>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} selectionMode="checkbox" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.
+                </p>
+                <p>
+                    In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} selectionMode="checkbox" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/selection/multipleselectiondoc.js b/components/doc/tree/selection/multipleselectiondoc.js
new file mode 100644
index 0000000000..720e9e3d6b
--- /dev/null
+++ b/components/doc/tree/selection/multipleselectiondoc.js
@@ -0,0 +1,138 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function MultipleSelectionDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState(null);
+    const [metaKey, setMetaKey] = useState(false);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const introCode = {
+        basic: `
+{
+    '0-0': true,
+    '0-1-0': true
+}
+        `
+    };
+
+    const code = {
+        basic: `
+<div className="flex align-items-center mb-4 gap-2">
+    <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+    <label htmlFor="input-metakey">MetaKey</label>
+</div>
+<Tree value={nodes} metaKeySelection={metaKey} selectionMode="multiple" selectionKeys={selectedKeys} 
+    onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Tree } from 'primereact/tree';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleSelectionDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedKeys, setSelectedKeys] = useState(null);
+    const [metaKey, setMetaKey] = useState(false);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex flex-column align-items-center justify-content-center">
+            <div className="flex align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <Tree value={nodes} metaKeySelection={metaKey} selectionMode="multiple" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { Tree, TreeMultipleSelectionKeys } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleSelectionDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedKeys, setSelectedKeys] = useState<TreeMultipleSelectionKeys | null>(null);
+    const [metaKey, setMetaKey] = useState<boolean>(false);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex flex-column align-items-center justify-content-center">
+            <div className="flex align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <Tree value={nodes} metaKeySelection={metaKey} selectionMode="multiple" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is necessary to add to existing selections however this can be configured
+                    with disabling the <i>metaKeySelection</i> property. Note that in touch enabled devices, Tree always ignores metaKey.
+                </p>
+                <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
+            </DocSectionText>
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
+            <div className="card flex flex-column align-items-center justify-content-center">
+                <div className="flex align-items-center mb-4 gap-2">
+                    <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                    <label htmlFor="input-metakey">MetaKey</label>
+                </div>
+                <Tree value={nodes} metaKeySelection={metaKey} selectionMode="multiple" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/selection/singleselectiondoc.js b/components/doc/tree/selection/singleselectiondoc.js
new file mode 100644
index 0000000000..b94bebe101
--- /dev/null
+++ b/components/doc/tree/selection/singleselectiondoc.js
@@ -0,0 +1,104 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tree } from '@/components/lib/tree/Tree';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function SingleSelectionDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedKey, setSelectedKey] = useState('');
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<Tree value={nodes} selectionMode="single" selectionKeys={selectedKey} 
+    onSelectionChange={(e) => setSelectedKey(e.value)} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { NodeService } from './service/NodeService';
+
+export default function SingleSelectionDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedKey, setSelectedKey] = useState('');
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} selectionMode="single" selectionKeys={selectedKey} onSelectionChange={(e) => setSelectedKey(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function SingleSelectionDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedKey, setSelectedKey] = useState<string>('');
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} selectionMode="single" selectionKeys={selectedKey} onSelectionChange={(e) => setSelectedKey(e.value)} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> and <i>onSelectionChange</i> properties to manage the selection value binding.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} selectionMode="single" selectionKeys={selectedKey} onSelectionChange={(e) => setSelectedKey(e.value)} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/tree/styledoc.js b/components/doc/tree/styledoc.js
new file mode 100644
index 0000000000..1a6ea349c6
--- /dev/null
+++ b/components/doc/tree/styledoc.js
@@ -0,0 +1,63 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tree</td>
+                            <td>Main container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tree-horizontal</td>
+                            <td>Main container element in horizontal mode</td>
+                        </tr>
+                        <tr>
+                            <td>p-tree-container</td>
+                            <td>Container of nodes</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode</td>
+                            <td>A treenode element</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-content</td>
+                            <td>Content of a treenode</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-toggler</td>
+                            <td>Toggle element</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-toggler-icon</td>
+                            <td>Toggle icon</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-icon</td>
+                            <td>Icon of a treenode</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-label</td>
+                            <td>Label of a treenode</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-children</td>
+                            <td>Container element for node children</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tree/templatedoc.js b/components/doc/tree/templatedoc.js
new file mode 100644
index 0000000000..3aaa6fdde0
--- /dev/null
+++ b/components/doc/tree/templatedoc.js
@@ -0,0 +1,217 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Tree } from '@/components/lib/tree/Tree';
+import { classNames } from '@/components/lib/utils/Utils';
+
+export function TemplateDoc(props) {
+    const nodes = [
+        {
+            key: '0',
+            label: 'Installation',
+            children: [
+                { key: '0-0', label: 'Getting Started', url: 'https://reactjs.org/docs/getting-started.html' },
+                { key: '0-1', label: 'Add React', url: 'https://reactjs.org/docs/add-react-to-a-website.html' },
+                { key: '0-2', label: 'Create an App', url: 'https://reactjs.org/docs/create-a-new-react-app.html' },
+                { key: '0-3', label: 'CDN Links', url: 'https://reactjs.org/docs/cdn-links.html' }
+            ]
+        },
+        {
+            key: '1',
+            label: 'Main Concepts',
+            children: [
+                { key: '1-0', label: 'Hello World', url: 'https://reactjs.org/docs/hello-world.html' },
+                { key: '1-1', label: 'Introducing JSX', url: 'https://reactjs.org/docs/introducing-jsx.html' },
+                { key: '1-2', label: 'Rendering Elements', url: 'https://reactjs.org/docs/rendering-elements.html' },
+                { key: '1-3', label: 'Components and Props', url: 'https://reactjs.org/docs/components-and-props.html' },
+                { key: '1-4', label: 'State and LifeCycle', url: 'https://reactjs.org/docs/state-and-lifecycle.html' },
+                { key: '1-5', label: 'Handling Events', url: 'https://reactjs.org/docs/handling-events.html' }
+            ]
+        }
+    ];
+
+    const nodeTemplate = (node, options) => {
+        let label = <b>{node.label}</b>;
+
+        if (node.url) {
+            label = (
+                <a href={node.url} className="text-700 hover:text-primary" target="_blank" rel="noopener noreferrer">
+                    {node.label}
+                </a>
+            );
+        }
+
+        return <span className={options.className}>{label}</span>;
+    };
+
+    const togglerTemplate = (node, options) => {
+        if (!node) {
+            return;
+        }
+
+        const expanded = options.expanded;
+        const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {
+            'pi-caret-right': !expanded,
+            'pi-caret-down': expanded
+        });
+
+        return (
+            <button type="button" data-pc-section="toggler" className="p-tree-toggler p-link" tabIndex={-1} onClick={options.onClick}>
+                <span className={iconClassName} aria-hidden="true" />
+            </button>
+        );
+    };
+
+    const code = {
+        basic: `
+<Tree value={nodes} nodeTemplate={nodeTemplate} togglerTemplate={togglerTemplate} className="w-full md:w-30rem" />
+        `,
+        javascript: `
+import React from 'react'; 
+import { classNames } from 'primereact/utils';
+import { Tree } from 'primereact/tree';
+
+export default function TemplateDemo() {
+    const nodes = [
+        {
+            key: "0",
+            label: 'Installation',
+            children: [
+                { key: "0-0", label: 'Getting Started', url: 'https://reactjs.org/docs/getting-started.html' },
+                { key: "0-1", label: 'Add React', url: 'https://reactjs.org/docs/add-react-to-a-website.html' },
+                { key: "0-2", label: 'Create an App', url: 'https://reactjs.org/docs/create-a-new-react-app.html' },
+                { key: "0-3", label: 'CDN Links', url: 'https://reactjs.org/docs/cdn-links.html' }
+            ]
+        },
+        {
+            key: "1",
+            label: 'Main Concepts',
+            children: [
+                { key: "1-0", label: 'Hello World', url: 'https://reactjs.org/docs/hello-world.html' },
+                { key: "1-1", label: 'Introducing JSX', url: 'https://reactjs.org/docs/introducing-jsx.html' },
+                { key: "1-2", label: 'Rendering Elements', url: 'https://reactjs.org/docs/rendering-elements.html' },
+                { key: "1-3", label: 'Components and Props', url: 'https://reactjs.org/docs/components-and-props.html' },
+                { key: "1-4", label: 'State and LifeCycle', url: 'https://reactjs.org/docs/state-and-lifecycle.html' },
+                { key: "1-5", label: 'Handling Events', url: 'https://reactjs.org/docs/handling-events.html' }
+            ]
+        }
+    ];
+
+    const nodeTemplate = (node, options) => {
+        let label = <b>{node.label}</b>;
+
+        if (node.url) {
+            label = <a href={node.url} className="text-700 hover:text-primary" target="_blank" rel="noopener noreferrer">{node.label}</a>;
+        }
+
+        return <span className={options.className}>{label}</span>;
+    }
+
+    const togglerTemplate = (node, options) => {
+        if (!node) {
+            return;
+        }
+
+        const expanded = options.expanded;
+        const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {
+            'pi-caret-right': !expanded,
+            'pi-caret-down': expanded
+        });
+
+        return (
+            <button type="button" className="p-tree-toggler p-link" tabIndex={-1} onClick={options.onClick}>
+                <span className={iconClassName} aria-hidden="true"></span>
+            </button>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} nodeTemplate={nodeTemplate} togglerTemplate={togglerTemplate} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { classNames } from 'primereact/utils';
+import { Tree, TreeNodeTemplateOptions, TreeTogglerTemplateOptions } from 'primereact/tree';
+import { TreeNode } from 'primereact/treenode';
+
+export default function TemplateDemo() {
+    const nodes: TreeNode[] = [
+        {
+            key: "0",
+            label: 'Installation',
+            children: [
+                { key: "0-0", label: 'Getting Started', url: 'https://reactjs.org/docs/getting-started.html' },
+                { key: "0-1", label: 'Add React', url: 'https://reactjs.org/docs/add-react-to-a-website.html' },
+                { key: "0-2", label: 'Create an App', url: 'https://reactjs.org/docs/create-a-new-react-app.html' },
+                { key: "0-3", label: 'CDN Links', url: 'https://reactjs.org/docs/cdn-links.html' }
+            ]
+        },
+        {
+            key: "1",
+            label: 'Main Concepts',
+            children: [
+                { key: "1-0", label: 'Hello World', url: 'https://reactjs.org/docs/hello-world.html' },
+                { key: "1-1", label: 'Introducing JSX', url: 'https://reactjs.org/docs/introducing-jsx.html' },
+                { key: "1-2", label: 'Rendering Elements', url: 'https://reactjs.org/docs/rendering-elements.html' },
+                { key: "1-3", label: 'Components and Props', url: 'https://reactjs.org/docs/components-and-props.html' },
+                { key: "1-4", label: 'State and LifeCycle', url: 'https://reactjs.org/docs/state-and-lifecycle.html' },
+                { key: "1-5", label: 'Handling Events', url: 'https://reactjs.org/docs/handling-events.html' }
+            ]
+        }
+    ];
+
+    const nodeTemplate = (node: TreeNode, options: TreeNodeTemplateOptions) => {
+        let label = <b>{node.label}</b>;
+
+        if (node.url) {
+            label = <a href={node.url} className="text-700 hover:text-primary" target="_blank" rel="noopener noreferrer">{node.label}</a>;
+        }
+
+        return <span className={options.className}>{label}</span>;
+    }
+
+    const togglerTemplate = (node: TreeNode, options: TreeTogglerTemplateOptions) => {
+        if (!node) {
+            return;
+        }
+
+        const expanded = options.expanded;
+        const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {
+            'pi-caret-right': !expanded,
+            'pi-caret-down': expanded
+        });
+
+        return (
+            <button type="button" className="p-tree-toggler p-link" tabIndex={-1} onClick={options.onClick}>
+                <span className={iconClassName} aria-hidden="true"></span>
+            </button>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} nodeTemplate={nodeTemplate} togglerTemplate={togglerTemplate} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom node content instead of a node label is defined with the <i>nodeTemplate</i> property. The toggler can be customized with the <i>togglerTemplate</i> property.
+                </p>
+            </DocSectionText>
+
+            <div className="card flex justify-content-center">
+                <Tree value={nodes} nodeTemplate={nodeTemplate} togglerTemplate={togglerTemplate} className="w-full md:w-30rem" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tree/theming/styleddoc.js b/components/doc/tree/theming/styleddoc.js
new file mode 100644
index 0000000000..bf8f888ed1
--- /dev/null
+++ b/components/doc/tree/theming/styleddoc.js
@@ -0,0 +1,63 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-tree</td>
+                            <td>Main container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tree-horizontal</td>
+                            <td>Main container element in horizontal mode</td>
+                        </tr>
+                        <tr>
+                            <td>p-tree-container</td>
+                            <td>Container of nodes</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode</td>
+                            <td>A treenode element</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-content</td>
+                            <td>Content of a treenode</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-toggler</td>
+                            <td>Toggle element</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-toggler-icon</td>
+                            <td>Toggle icon</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-icon</td>
+                            <td>Icon of a treenode</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-label</td>
+                            <td>Label of a treenode</td>
+                        </tr>
+                        <tr>
+                            <td>p-treenode-children</td>
+                            <td>Container element for node children</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tree/theming/tailwinddoc.js b/components/doc/tree/theming/tailwinddoc.js
new file mode 100644
index 0000000000..ab1b2e4a67
--- /dev/null
+++ b/components/doc/tree/theming/tailwinddoc.js
@@ -0,0 +1,111 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    tree: {
+        root: {
+            className: classNames('max-w-[30rem] md:w-full', 'border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5 rounded-md')
+        },
+        wrapper: 'overflow-auto',
+        container: 'm-0 p-0 list-none overflow-auto',
+        node: 'p-1 outline-none',
+        content: ({ context, props }) => ({
+            className: classNames(
+                'flex items-center',
+                'rounded-lg transition-shadow duration-200 p-2',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'bg-blue-50 text-blue-600': context.selected },
+                { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+            )
+        }),
+        toggler: ({ context }) => ({
+            className: classNames(
+                'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative shrink-0',
+                'mr-2 w-8 h-8 border-0 bg-transparent rounded-full transition duration-200',
+                'hover:border-transparent focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'text-gray-500 dark:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-800 dark:hover:text-white/80': !context.selected,
+                    'text-blue-600 hover:bg-white/30': context.selected
+                },
+                {
+                    hidden: context.leaf
+                }
+            )
+        }),
+        checkboxcontainer: 'mr-2',
+        checkbox: ({ context, props }) => ({
+            className: classNames(
+                'cursor-pointer inline-flex relative select-none align-bottom',
+                'w-6 h-6',
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200 text-white text-base dark:text-gray-900',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        nodeicon: 'mr-2 text-gray-600 dark:text-white/70',
+        subgroup: {
+            className: classNames('m-0 list-none', 'p-0 pl-4')
+        },
+        filtercontainer: {
+            className: classNames('mb-2', 'relative block w-full')
+        },
+        input: {
+            className: classNames(
+                'm-0 p-3 text-base w-full pr-7',
+                'font-sans text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        searchicon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Tree } from 'primereact/tree';
+import { NodeService } from './service/NodeService';
+
+export default function UnstyledDemo() {
+    const [nodes, setNodes] = useState([]);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Tree value={nodes} className="w-full md:w-30rem" />
+        </div>
+    )
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['NodeService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/treeselect/accessibilitydoc.js b/components/doc/treeselect/accessibilitydoc.js
new file mode 100644
index 0000000000..1e548ccb46
--- /dev/null
+++ b/components/doc/treeselect/accessibilitydoc.js
@@ -0,0 +1,193 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="dd1">Options</span>
+<TreeSelect aria-labelledby="dd1" />
+
+<TreeSelect aria-label="Options" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. The treeselect element has a <i>combobox</i> role in addition to <i>aria-haspopup</i> and <i>aria-expanded</i> attributes.
+                The relation between the combobox and the popup is created with <i>aria-controls</i> that refers to the id of the popup.
+            </p>
+            <p>
+                The popup list has an id that refers to the <i>aria-controls</i> attribute of the <i>combobox</i> element and uses <i>tree</i> as the role. Each list item has a <i>treeitem</i> role along with <i>aria-label</i>, <i>aria-selected</i>{' '}
+                and <i>aria-expanded</i> attributes. In checkbox selection, <i>aria-checked</i> is used instead of <i>aria-selected</i>. Checkbox and toggle icons are hidden from screen readers as their parent element with <i>treeitem</i> role and
+                attributes are used instead for readers and keyboard support. The container element of a treenode has the <i>group</i> role. The <i>aria-setsize</i>, <i>aria-posinset</i> and <i>aria-level</i> attributes are calculated implicitly and
+                added to each treeitem.
+            </p>
+
+            <p>
+                If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Closed State Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the treeselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Popup Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the focused option, closes the popup if selection mode is single.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Selects the focused option, closes the popup if selection mode is single.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup, moves focus to the treeselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Filter Input Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the treeselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the treeselect element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Close Button Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the treeselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the treeselect element.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>escape</i>
+                            </td>
+                            <td>Closes the popup and moves focus to the treeselect element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/treeselect/basicdoc.js b/components/doc/treeselect/basicdoc.js
new file mode 100644
index 0000000000..30ccb2eca0
--- /dev/null
+++ b/components/doc/treeselect/basicdoc.js
@@ -0,0 +1,112 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function BasicDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TreeSelect is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with an <i>options</i> collection. Internally <Link href="http://github.com/tree">Tree</Link> component is used so the options model is based on
+                    TreeNode API.
+                </p>
+                <p>
+                    In single selection mode, value binding should be the <i>key</i> value of a node.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/checkboxdoc.js b/components/doc/treeselect/checkboxdoc.js
new file mode 100644
index 0000000000..4d159eac9b
--- /dev/null
+++ b/components/doc/treeselect/checkboxdoc.js
@@ -0,0 +1,123 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function CheckboxDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const introCode = {
+        basic: `
+{
+    '0-0': {
+        partialChecked: false,
+        checked: true
+    }
+}
+        `
+    };
+
+    const code = {
+        basic: `
+<TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false}  
+    className="md:w-20rem w-full" selectionMode="checkbox" display="chip" placeholder="Select Items"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function CheckboxDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} 
+                metaKeySelection={false} className="md:w-20rem w-full" selectionMode="checkbox" display="chip" placeholder="Select Items"></TreeSelect>
+        </div>    
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function CheckboxDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState<string[]>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKeys} onChange={(e: TreeSelectChangeEvent) => setSelectedNodeKeys(e.value)} options={nodes} 
+                metaKeySelection={false} className="md:w-20rem w-full" selectionMode="checkbox" display="chip" placeholder="Select Items"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.
+                </p>
+                <p>
+                    In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node obje to
+                    indicate selection.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
+            <div className="card flex justify-content-center">
+                <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false} className="md:w-20rem w-full" selectionMode="checkbox" display="chip" placeholder="Select Items" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/clearicondoc.js b/components/doc/treeselect/clearicondoc.js
new file mode 100644
index 0000000000..881f505b36
--- /dev/null
+++ b/components/doc/treeselect/clearicondoc.js
@@ -0,0 +1,107 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ClearIconDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item" showClear></TreeSelect>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                className="md:w-20rem w-full" placeholder="Select Item" showClear></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>showClear</i> is enabled, a clear icon is added to reset the TreeSelect.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" showClear />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/controlleddoc.js b/components/doc/treeselect/controlleddoc.js
new file mode 100644
index 0000000000..593ee48b3f
--- /dev/null
+++ b/components/doc/treeselect/controlleddoc.js
@@ -0,0 +1,222 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ControlledDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const [expandedKeys, setExpandedKeys] = useState({});
+
+    const expandAll = () => {
+        let _expandedKeys = {};
+
+        for (let node of nodes) {
+            expandNode(node, _expandedKeys);
+        }
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node, _expandedKeys) => {
+        if (node.children && node.children.length) {
+            _expandedKeys[node.key] = true;
+
+            for (let child of node.children) {
+                expandNode(child, _expandedKeys);
+            }
+        }
+    };
+
+    const headerTemplate = (
+        <div className="p-3 pb-0">
+            <Button type="button" icon="pi pi-plus" onClick={expandAll} className="w-2rem h-2rem mr-2 p-button-outlined" />
+            <Button type="button" icon="pi pi-minus" onClick={collapseAll} className="w-2rem h-2rem p-button-outlined" />
+        </div>
+    );
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    className="md:w-20rem w-full" placeholder="Select Item"
+    expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} panelHeaderTemplate={headerTemplate}></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { Button } from 'primereact/button';
+import { NodeService } from './service/NodeService';
+
+export default function ControlledDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const [expandedKeys, setExpandedKeys] = useState({});
+
+    const expandAll = () => {
+        let _expandedKeys = {};
+
+        for (let node of nodes) {
+            expandNode(node, _expandedKeys);
+        }
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node, _expandedKeys) => {
+        if (node.children && node.children.length) {
+            _expandedKeys[node.key] = true;
+
+            for (let child of node.children) {
+                expandNode(child, _expandedKeys);
+            }
+        }
+    };
+
+    const headerTemplate = (
+        <div className="p-3 pb-0">
+            <Button type="button" icon="pi pi-plus" onClick={expandAll} className="w-2rem h-2rem mr-2 p-button-outlined" />
+            <Button type="button" icon="pi pi-minus" onClick={collapseAll} className="w-2rem h-2rem p-button-outlined" />
+        </div>
+    );
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item"
+                expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} panelHeaderTemplate={headerTemplate}></TreeSelect>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent, TreeSelectExpandedEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { Button } from 'primereact/button';
+import { NodeService } from './service/NodeService';
+
+interface NodeKey {
+    [key: string]: boolean;
+ }
+
+export default function ControlledDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    const [expandedKeys, setExpandedKeys] = useState<NodeKey>({});
+
+    const expandAll = () => {
+        let _expandedKeys = {};
+
+        for (let node of nodes) {
+            expandNode(node, _expandedKeys);
+        }
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    const collapseAll = () => {
+        setExpandedKeys({});
+    };
+
+    const expandNode = (node, _expandedKeys) => {
+        if (node.children && node.children.length) {
+            _expandedKeys[node.key] = true;
+
+            for (let child of node.children) {
+                expandNode(child, _expandedKeys);
+            }
+        }
+    };
+
+    const headerTemplate = (
+        <div className="p-3 pb-0">
+            <Button type="button" icon="pi pi-plus" onClick={expandAll} className="w-2rem h-2rem mr-2 p-button-outlined" />
+            <Button type="button" icon="pi pi-minus" onClick={collapseAll} className="w-2rem h-2rem p-button-outlined" />
+        </div>
+    );
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                className="md:w-20rem w-full" placeholder="Select Item" 
+                expandedKeys={expandedKeys} onToggle={(e: TreeSelectExpandedEvent) => setExpandedKeys(e.value)} panelHeaderTemplate={headerTemplate}></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Expanded state of nodes is managed programmatically with <i>expandedKeys</i> and <i>onToggle</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect
+                    value={selectedNodeKey}
+                    onChange={(e) => setSelectedNodeKey(e.value)}
+                    options={nodes}
+                    className="md:w-20rem w-full"
+                    placeholder="Select Item"
+                    expandedKeys={expandedKeys}
+                    onToggle={(e) => setExpandedKeys(e.value)}
+                    panelHeaderTemplate={headerTemplate}
+                />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/disableddoc.js b/components/doc/treeselect/disableddoc.js
new file mode 100644
index 0000000000..52b934ac10
--- /dev/null
+++ b/components/doc/treeselect/disableddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function DisabledDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect disabled placeholder="Select Item" className="md:w-20rem w-full" />
+        `,
+        javascript: `
+import React from "react";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect disabled placeholder="Select Item" className="md:w-20rem w-full" />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from "react";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect disabled placeholder="Select Item" className="md:w-20rem w-full" />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect disabled placeholder="Select Item" className="md:w-20rem w-full" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/filleddoc.js b/components/doc/treeselect/filleddoc.js
new file mode 100644
index 0000000000..1fb1c3ab5b
--- /dev/null
+++ b/components/doc/treeselect/filleddoc.js
@@ -0,0 +1,107 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function FilledDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function FilledDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function FilledDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect variant="filled" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect variant="filled" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/filterdoc.js b/components/doc/treeselect/filterdoc.js
new file mode 100644
index 0000000000..74c72302f9
--- /dev/null
+++ b/components/doc/treeselect/filterdoc.js
@@ -0,0 +1,109 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function FilterDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    filter className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function FilterDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                filter className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function FilterDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                filter className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Filtering is enabled by adding the <i>filter</i> property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define{' '}
+                    <i>filterBy</i> property. In addition <i>filterMode</i> specifies the filtering strategy. In <i>lenient</i> mode when the query matches a node, children of the node are not searched further as all descendants of the node are
+                    included. On the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} filter className="md:w-20rem w-full" placeholder="Select Item" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/floatlabeldoc.js b/components/doc/treeselect/floatlabeldoc.js
new file mode 100644
index 0000000000..a25c2fd572
--- /dev/null
+++ b/components/doc/treeselect/floatlabeldoc.js
@@ -0,0 +1,123 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { FloatLabel } from '@/components/lib/floatlabel/FloatLabel';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function FloatLabelDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<FloatLabel className="w-full md:w-20rem">
+    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
+        className="w-full"></TreeSelect>
+    <label htmlFor="treeselect">TreeSelect</label>
+</FloatLabel>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { FloatLabel } from 'primereact/floatlabel';
+import { NodeService } from './service/NodeService';
+
+export default function FloatLabelDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel className="w-full md:w-20rem">
+                <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes}
+                    className="w-full"></TreeSelect>
+                <label htmlFor="treeselect">TreeSelect</label>
+            </FloatLabel>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { FloatLabel } from 'primereact/floatlabel';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function FloatLabelDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <FloatLabel className="w-full md:w-20rem">
+                <TreeSelect inputId="treeselect" value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)}
+                    className="w-full"></TreeSelect>
+                <label htmlFor="treeselect">TreeSelect</label>
+            </FloatLabel>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A floating label appears on top of the input field when focused. Visit <Link href="http://github.com/floatlabel">FloatLabel</Link> documentation for more information.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <FloatLabel className="w-full md:w-20rem">
+                    <TreeSelect inputId="treeselect" value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="w-full" />
+                    <label htmlFor="treeselect">TreeSelect</label>
+                </FloatLabel>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/importdoc.js b/components/doc/treeselect/importdoc.js
new file mode 100644
index 0000000000..21f30def73
--- /dev/null
+++ b/components/doc/treeselect/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { TreeSelect } from 'primereact/treeselect';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/invaliddoc.js b/components/doc/treeselect/invaliddoc.js
new file mode 100644
index 0000000000..6294b4ee6b
--- /dev/null
+++ b/components/doc/treeselect/invaliddoc.js
@@ -0,0 +1,107 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function InvalidDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+    className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function InvalidDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function InvalidDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect invalid value={selectedNodeKey} options={nodes} onChange={(e : TreeSelectChangeEvent) => setSelectedNodeKey(e.value)} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TreeSelect invalid value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} className="md:w-20rem w-full" placeholder="Select Item" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/multipledoc.js b/components/doc/treeselect/multipledoc.js
new file mode 100644
index 0000000000..3570ed7c7a
--- /dev/null
+++ b/components/doc/treeselect/multipledoc.js
@@ -0,0 +1,119 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TreeSelect } from '@/components/lib/treeselect/TreeSelect';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function MultipleDoc(props) {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState();
+
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const introCode = {
+        basic: `
+{
+    '0-0': true,
+    '0-1-0': true
+}
+        `
+    };
+
+    const code = {
+        basic: `
+<TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false}  
+    className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items"></TreeSelect>
+        `,
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} 
+                metaKeySelection={false} className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items"></TreeSelect>
+        </div>    
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect, TreeSelectChangeEvent } from 'primereact/treeselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleDemo() {
+    const [nodes, setNodes] = useState<TreeNode[] | null>(null);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState<string[]>(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <div className="card flex justify-content-center">
+            <TreeSelect value={selectedNodeKeys} onChange={(e: TreeSelectChangeEvent) => setSelectedNodeKeys(e.value)} options={nodes} 
+                metaKeySelection={false} className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items"></TreeSelect>
+        </div>
+    );
+}
+        `,
+        data: `
+/* NodeService */
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is necessary to add to existing selections however this can be configured
+                    with disabling the <i>metaKeySelection</i> property. Note that in touch enabled devices, TreeSelect always ignores metaKey.
+                </p>
+                <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
+            </DocSectionText>
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
+            <div className="card flex justify-content-center">
+                <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false} className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items" />
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treeselect/pt/wireframe.js b/components/doc/treeselect/pt/wireframe.js
new file mode 100644
index 0000000000..be22de92be
--- /dev/null
+++ b/components/doc/treeselect/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/treeselect.jpg" alt="treeselect" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/treeselect/styledoc.js b/components/doc/treeselect/styledoc.js
new file mode 100644
index 0000000000..2755b329ba
--- /dev/null
+++ b/components/doc/treeselect/styledoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>Following is the list of structural style classes</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-treeselect</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-label-container</td>
+                            <td>Container of the label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-label</td>
+                            <td>Label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-trigger</td>
+                            <td>Dropdown button.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-panel</td>
+                            <td>Overlay panel for items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-items-wrapper</td>
+                            <td>List container of items.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/treeselect/theming/styleddoc.js b/components/doc/treeselect/theming/styleddoc.js
new file mode 100644
index 0000000000..86b10ff5d3
--- /dev/null
+++ b/components/doc/treeselect/theming/styleddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-treeselect</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-label-container</td>
+                            <td>Container of the label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-label</td>
+                            <td>Label to display selected items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-trigger</td>
+                            <td>Dropdown button.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-panel</td>
+                            <td>Overlay panel for items.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treeselect-items-wrapper</td>
+                            <td>List container of items.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/treeselect/theming/tailwinddoc.js b/components/doc/treeselect/theming/tailwinddoc.js
new file mode 100644
index 0000000000..f836ce0ab2
--- /dev/null
+++ b/components/doc/treeselect/theming/tailwinddoc.js
@@ -0,0 +1,82 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+const Tailwind = {
+    treeselect: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', {
+                'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
+            })
+        }),
+        labelContainer: {
+            className: classNames('overflow-hidden flex flex-auto cursor-pointer')
+        },
+        label: {
+            className: classNames('block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200')
+        },
+        trigger: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg')
+        },
+        panel: {
+            className: classNames('bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg')
+        },
+        wrapper: {
+            className: classNames('max-h-[200px] overflow-auto', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg')
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from "react";
+import { TreeSelect } from 'primereact/treeselect';
+import { NodeService } from './service/NodeService';
+
+export default function UnstyledDemo() {
+    const [nodes, setNodes] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    
+    useEffect(() => {
+        NodeService.getTreeNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card flex justify-center">
+            <TreeSelect value={selectedNodeKey} onChange={(e) => setSelectedNodeKey(e.value)} options={nodes} 
+                className="md:w-20rem w-full" placeholder="Select Item"></TreeSelect>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['NodeService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/treetable/accessibilitydoc.js b/components/doc/treetable/accessibilitydoc.js
new file mode 100644
index 0000000000..cbf9a6c6d1
--- /dev/null
+++ b/components/doc/treetable/accessibilitydoc.js
@@ -0,0 +1,129 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                TreeTable uses a <i>treegrid</i> element whose attributes can be extended with the <i>tableProps</i> option. This property allows passing aria roles and attributes like <i>aria-label</i> and <i>aria-describedby</i> to define the table
+                for readers. Default role of the table is <i>table</i>. Header, body and footer elements use <i>rowgroup</i>, rows use <i>row</i> role, header cells have <i>columnheader</i> and body cells use <i>cell</i> roles. Sortable headers
+                utilizer <i>aria-sort</i> attribute either set to "ascending" or "descending".
+            </p>
+
+            <p>
+                Row elements manage <i>aria-expanded</i> for state along with <i>aria-posinset</i>, <i>aria-setsize</i> and <i>aria-level</i> attribute to define the hierachy.
+            </p>
+
+            <p>
+                When selection is enabled, <i>aria-selected</i> is set to true on a row. In checkbox mode, the built-in checkbox component use <i>checkbox</i> role with <i>aria-checked</i> state attribute.
+            </p>
+
+            <p>Editable cells use custom templating so you need to manage aria roles and attributes manually if required.</p>
+
+            <p>
+                Paginator is a standalone component used inside the TreeTable, refer to the <Link href="http://github.com/paginator">paginator</Link> for more information about the accessibility features.
+            </p>
+
+            <h3>Sortable Headers Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves through the headers.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Sorts the column.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Sorts the column.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>
+                                Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+                                page tab sequence.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>shift</i> + <i>tab</i>
+                            </td>
+                            <td>
+                                Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in
+                                the page tab sequence.
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Selects the focused treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Selects the focused treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>down arrow</i>
+                            </td>
+                            <td>Moves focus to the next treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>up arrow</i>
+                            </td>
+                            <td>Moves focus to the previous treenode.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>right arrow</i>
+                            </td>
+                            <td>If node is closed, opens the node otherwise moves focus to the first child node.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>left arrow</i>
+                            </td>
+                            <td>If node is open, closes the node otherwise moves focus to the parent node.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/treetable/basicdoc.js b/components/doc/treetable/basicdoc.js
new file mode 100644
index 0000000000..49720ac089
--- /dev/null
+++ b/components/doc/treetable/basicdoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function BasicDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TreeTable requires a collection of <i>TreeNode</i> instances as a <i>value</i> and <i>Column</i> components as children for the representation. The column with the element to toggle a node should have <i>expander</i> enabled.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/columngroupdoc.js b/components/doc/treetable/columngroupdoc.js
new file mode 100644
index 0000000000..d46b031379
--- /dev/null
+++ b/components/doc/treetable/columngroupdoc.js
@@ -0,0 +1,630 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { ColumnGroup } from '@/components/lib/columngroup/ColumnGroup';
+import { Row } from '@/components/lib/row/Row';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+
+export function ColumnGroupDoc(props) {
+    const nodes = [
+        {
+            key: '0',
+            data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
+            children: [
+                {
+                    key: '0-0',
+                    data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' },
+                    children: [
+                        {
+                            key: '0-0-0',
+                            data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' }
+                        },
+                        {
+                            key: '0-0-1',
+                            data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' }
+                        }
+                    ]
+                },
+                {
+                    key: '0-1',
+                    data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' }
+                }
+            ]
+        },
+        {
+            key: '1',
+            data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
+            children: [
+                {
+                    key: '1-0',
+                    data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' }
+                },
+                {
+                    key: '1-1',
+                    data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' }
+                }
+            ]
+        },
+        {
+            key: '2',
+            data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
+            children: [
+                {
+                    key: '2-0',
+                    data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' }
+                },
+                {
+                    key: '2-1',
+                    data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' }
+                }
+            ]
+        },
+        {
+            key: '3',
+            data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
+            children: [
+                {
+                    key: '3-0',
+                    data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' }
+                },
+                {
+                    key: '3-1',
+                    data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' }
+                }
+            ]
+        },
+        {
+            key: '4',
+            data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
+            children: [
+                {
+                    key: '4-0',
+                    data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' }
+                },
+                {
+                    key: '4-1',
+                    data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' }
+                }
+            ]
+        },
+        {
+            key: '5',
+            data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
+            children: [
+                {
+                    key: '5-0',
+                    data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' }
+                },
+                {
+                    key: '5-1',
+                    data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' }
+                }
+            ]
+        },
+        {
+            key: '6',
+            data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
+            children: [
+                {
+                    key: '6-0',
+                    data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' }
+                },
+                {
+                    key: '6-1',
+                    data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' }
+                }
+            ]
+        },
+        {
+            key: '7',
+            data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
+            children: [
+                {
+                    key: '7-0',
+                    data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' }
+                },
+                {
+                    key: '7-1',
+                    data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' }
+                }
+            ]
+        },
+        {
+            key: '8',
+            data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
+            children: [
+                {
+                    key: '8-0',
+                    data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' }
+                },
+                {
+                    key: '8-1',
+                    data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' }
+                }
+            ]
+        },
+        {
+            key: '9',
+            data: { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
+            children: [
+                {
+                    key: '9-0',
+                    data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' }
+                },
+                {
+                    key: '9-1',
+                    data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' }
+                }
+            ]
+        }
+    ];
+
+    const headerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column header="Brand" rowSpan={3} />
+                <Column header="Sale Rate" colSpan={4} />
+            </Row>
+            <Row>
+                <Column header="Sales" colSpan={2} />
+                <Column header="Profits" colSpan={2} />
+            </Row>
+            <Row>
+                <Column header="Last Year" />
+                <Column header="This Year" />
+                <Column header="Last Year" />
+                <Column header="This Year" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const footerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column footer="Totals:" colSpan={3} />
+                <Column footer="$506,202" />
+                <Column footer="$531,020" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="brand" expander />
+    <Column field="lastYearSale" />
+    <Column field="thisYearSale" />
+    <Column field="lastYearProfit" />
+    <Column field="thisYearProfit" />
+</TreeTable>
+        `,
+        javascript: `
+import React from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { ColumnGroup } from 'primereact/columngroup';
+import { Row } from 'primereact/row';
+
+export default function ColumnGroupDemo() {
+    const nodes = [
+        {
+            key: '0',
+            data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
+            children: [
+                {
+                    key: '0-0',
+                    data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' },
+                    children: [
+                        {
+                            key: '0-0-0',
+                            data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' },
+                        },
+                        {
+                            key: '0-0-1',
+                            data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' },
+                        }
+                    ]
+                },
+                {
+                    key: '0-1',
+                    data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' },
+                }
+            ]
+        },
+        {
+            key: '1',
+            data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
+            children: [
+                {
+                    key: '1-0',
+                    data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' },
+                },
+                {
+                    key: '1-1',
+                    data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' },
+                }
+            ]
+        },
+        {
+            key: '2',
+            data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
+            children: [
+                {
+                    key: '2-0',
+                    data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' },
+                },
+                {
+                    key: '2-1',
+                    data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' },
+                }
+            ]
+        },
+        {
+            key: '3',
+            data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
+            children: [
+                {
+                    key: '3-0',
+                    data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' },
+                },
+                {
+                    key: '3-1',
+                    data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' },
+                }
+            ]
+        },
+        {
+            key: '4',
+            data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
+            children: [
+                {
+                    key: '4-0',
+                    data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' },
+                },
+                {
+                    key: '4-1',
+                    data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' },
+                }
+            ]
+        },
+        {
+            key: '5',
+            data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
+            children: [
+                {
+                    key: '5-0',
+                    data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' },
+                },
+                {
+                    key: '5-1',
+                    data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' },
+                }
+            ]
+        },
+        {
+            key: '6',
+            data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
+            children: [
+                {
+                    key: '6-0',
+                    data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' },
+                },
+                {
+                    key: '6-1',
+                    data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' },
+                }
+            ]
+        },
+        {
+            key: '7',
+            data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
+            children: [
+                {
+                    key: '7-0',
+                    data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' },
+                },
+                {
+                    key: '7-1',
+                    data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' },
+                }
+            ]
+        },
+        {
+            key: '8',
+            data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
+            children: [
+                {
+                    key: '8-0',
+                    data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' },
+                },
+                {
+                    key: '8-1',
+                    data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' },
+                }
+            ]
+        },
+        {
+            key: '9',
+            data: { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
+            children: [
+                {
+                    key: '9-0',
+                    data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' },
+                },
+                {
+                    key: '9-1',
+                    data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' },
+                }
+            ]
+        }
+    ];
+
+    const headerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column header="Brand" rowSpan={3} />
+                <Column header="Sale Rate" colSpan={4} />
+            </Row>
+            <Row>
+                <Column header="Sales" colSpan={2} />
+                <Column header="Profits" colSpan={2} />
+            </Row>
+            <Row>
+                <Column header="Last Year" />
+                <Column header="This Year" />
+                <Column header="Last Year" />
+                <Column header="This Year" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const footerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column footer="Totals:" colSpan={3} />
+                <Column footer="$506,202" />
+                <Column footer="$531,020" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="brand" expander />
+                <Column field="lastYearSale" />
+                <Column field="thisYearSale" />
+                <Column field="lastYearProfit" />
+                <Column field="thisYearProfit" />
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { ColumnGroup } from 'primereact/columngroup';
+import { Row } from 'primereact/row';
+import { TreeNode } from 'primereact/treenode';
+
+export default function ColGroupDemo() {
+    const nodes: TreeNode[] = [
+        {
+            key: '0',
+            data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342' },
+            children: [
+                {
+                    key: '0-0',
+                    data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' },
+                    children: [
+                        {
+                            key: '0-0-0',
+                            data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' },
+                        },
+                        {
+                            key: '0-0-1',
+                            data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' },
+                        }
+                    ]
+                },
+                {
+                    key: '0-1',
+                    data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' },
+                }
+            ]
+        },
+        {
+            key: '1',
+            data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
+            children: [
+                {
+                    key: '1-0',
+                    data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' },
+                },
+                {
+                    key: '1-1',
+                    data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' },
+                }
+            ]
+        },
+        {
+            key: '2',
+            data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
+            children: [
+                {
+                    key: '2-0',
+                    data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' },
+                },
+                {
+                    key: '2-1',
+                    data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' },
+                }
+            ]
+        },
+        {
+            key: '3',
+            data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
+            children: [
+                {
+                    key: '3-0',
+                    data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' },
+                },
+                {
+                    key: '3-1',
+                    data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' },
+                }
+            ]
+        },
+        {
+            key: '4',
+            data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
+            children: [
+                {
+                    key: '4-0',
+                    data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' },
+                },
+                {
+                    key: '4-1',
+                    data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' },
+                }
+            ]
+        },
+        {
+            key: '5',
+            data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
+            children: [
+                {
+                    key: '5-0',
+                    data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' },
+                },
+                {
+                    key: '5-1',
+                    data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' },
+                }
+            ]
+        },
+        {
+            key: '6',
+            data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
+            children: [
+                {
+                    key: '6-0',
+                    data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' },
+                },
+                {
+                    key: '6-1',
+                    data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' },
+                }
+            ]
+        },
+        {
+            key: '7',
+            data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
+            children: [
+                {
+                    key: '7-0',
+                    data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' },
+                },
+                {
+                    key: '7-1',
+                    data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' },
+                }
+            ]
+        },
+        {
+            key: '8',
+            data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
+            children: [
+                {
+                    key: '8-0',
+                    data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' },
+                },
+                {
+                    key: '8-1',
+                    data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' },
+                }
+            ]
+        },
+        {
+            key: '9',
+            data: { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
+            children: [
+                {
+                    key: '9-0',
+                    data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' },
+                },
+                {
+                    key: '9-1',
+                    data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' },
+                }
+            ]
+        }
+    ];
+
+    const headerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column header="Brand" rowSpan={3} />
+                <Column header="Sale Rate" colSpan={4} />
+            </Row>
+            <Row>
+                <Column header="Sales" colSpan={2} />
+                <Column header="Profits" colSpan={2} />
+            </Row>
+            <Row>
+                <Column header="Last Year" />
+                <Column header="This Year" />
+                <Column header="Last Year" />
+                <Column header="This Year" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    const footerGroup = (
+        <ColumnGroup>
+            <Row>
+                <Column footer="Totals:" colSpan={3} />
+                <Column footer="$506,202" />
+                <Column footer="$531,020" />
+            </Row>
+        </ColumnGroup>
+    );
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup}>
+                <Column field="brand" expander />
+                <Column field="lastYearSale" />
+                <Column field="thisYearSale" />
+                <Column field="lastYearProfit" />
+                <Column field="thisYearProfit" />
+            </TreeTable>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Columns can be grouped within a <i>Row</i> component and groups can be displayed at header and footer using <i>headerColumnGroup</i>, <i>footerColumnGroup</i> properties. Number of cells and rows to span are defined with the{' '}
+                    <i>colSpan</i> and <i>rowSpan</i> properties of a Column.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="brand" expander />
+                    <Column field="lastYearSale" />
+                    <Column field="thisYearSale" />
+                    <Column field="lastYearProfit" />
+                    <Column field="thisYearProfit" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/columntoggledoc.js b/components/doc/treetable/columntoggledoc.js
new file mode 100644
index 0000000000..a378edb309
--- /dev/null
+++ b/components/doc/treetable/columntoggledoc.js
@@ -0,0 +1,206 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { MultiSelect } from '@/components/lib/multiselect/MultiSelect';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ColumnToggleDoc(props) {
+    let columns = [
+        { field: 'size', header: 'Size' },
+        { field: 'type', header: 'Type' }
+    ];
+    const [nodes, setNodes] = useState([]);
+    const [visibleColumns, setVisibleColumns] = useState(columns);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onColumnToggle = (event) => {
+        let selectedColumns = event.value;
+        let orderedSelectedColumns = columns.filter((col) => selectedColumns.some((sCol) => sCol.field === col.field));
+
+        setVisibleColumns(orderedSelectedColumns);
+    };
+
+    const header = <MultiSelect value={visibleColumns} options={columns} onChange={onColumnToggle} optionLabel="header" className="w-full sm:w-16rem" display="chip" />;
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} header={header} tableStyle={{ minWidth: '50rem' }}>
+    <Column key="name" field="name" header="Name" expander />
+    {visibleColumns.map((col) => (
+        <Column key={col.field} field={col.field} header={col.header} />
+    ))}
+</TreeTable>
+        `,
+        javascript: `
+import React, {useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+import { MultiSelect } from 'primereact/multiselect';
+
+export default function ColumnToggleDemo() {
+    let columns = [
+        { field: 'size', header: 'Size' },
+        { field: 'type', header: 'Type' }
+    ];
+    const [nodes, setNodes] = useState([]);
+    const [visibleColumns, setVisibleColumns] = useState(columns);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const onColumnToggle = (event) => {
+        let selectedColumns = event.value;
+        let orderedSelectedColumns = columns.filter((col) => selectedColumns.some((sCol) => sCol.field === col.field));
+
+        setVisibleColumns(orderedSelectedColumns);
+    };
+
+    const header = <MultiSelect value={visibleColumns} options={columns} onChange={onColumnToggle} optionLabel="header" className="w-full sm:w-16rem" display="chip" />;
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} header={header} tableStyle={{ minWidth: '50rem' }}>
+                <Column key="name" field="name" header="Name" expander />
+                {visibleColumns.map((col) => (
+                    <Column key={col.field} field={col.field} header={col.header} />
+                ))}
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, {useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { MultiSelect, MultiSelectChangeEvent } from 'primereact/multiselect';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+export default function ColumnToggleDemo() {
+    let columns: ColumnMeta[] = [
+        { field: 'size', header: 'Size' },
+        { field: 'type', header: 'Type' }
+    ];
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [visibleColumns, setVisibleColumns] = useState<ColumnMeta>(columns);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const onColumnToggle = (event: MultiSelectChangeEvent) => {
+        let selectedColumns = event.value;
+        let orderedSelectedColumns = columns.filter((col) => selectedColumns.some((sCol) => sCol.field === col.field));
+
+        setVisibleColumns(orderedSelectedColumns);
+    };
+
+    const header = <MultiSelect value={visibleColumns} options={columns} onChange={onColumnToggle} optionLabel="header" className="w-full sm:w-16rem" display="chip" />;
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} header={header} tableStyle={{ minWidth: '50rem' }}>
+                <Column key="name" field="name" header="Name" expander />
+                {visibleColumns.map((col) => (
+                    <Column key={col.field} field={col.field} header={col.header} />
+                ))}
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.</p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} header={header} tableStyle={{ minWidth: '50rem' }}>
+                    <Column key="name" field="name" header="Name" expander />
+                    {visibleColumns.map((col) => (
+                        <Column key={col.field} field={col.field} header={col.header} />
+                    ))}
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/conditionalstyledoc.js b/components/doc/treetable/conditionalstyledoc.js
new file mode 100644
index 0000000000..9044b7e940
--- /dev/null
+++ b/components/doc/treetable/conditionalstyledoc.js
@@ -0,0 +1,187 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ConditionalStyleDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const sizeTemplate = (node) => {
+        let size = node.data.size;
+        let fontWeight = parseInt(size, 10) > 75 ? 'bold' : 'normal';
+
+        return <span style={{ fontWeight: fontWeight }}>{size}</span>;
+    };
+
+    const rowClassName = (node) => {
+        return { 'p-highlight': node.children && node.children.length === 3 };
+    };
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size" body={sizeTemplate}></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function ConditionalStyleDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    const sizeTemplate = (node) => {
+        let size = node.data.size;
+        let fontWeight = parseInt(size, 10) > 75 ? 'bold' : 'normal';
+
+        return <span style={{ fontWeight: fontWeight }}>{size}</span>;
+    }
+
+    const rowClassName = (node) => {
+        return { 'p-highlight': (node.children && node.children.length === 3) };
+    }
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size" body={sizeTemplate}></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function ConditionalStyleDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    const sizeTemplate = (node: TreeNode) => {
+        let size = node.data.size;
+        let fontWeight = parseInt(size, 10) > 75 ? 'bold' : 'normal';
+
+        return <span style={{ fontWeight: fontWeight }}>{size}</span>;
+    }
+
+    const rowClassName = (node: TreeNode) => {
+        return { 'p-highlight': (node.children && node.children.length === 3) };
+    }
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size" body={sizeTemplate}></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Particular rows and cells can be styled based on conditions. The <i>rowClassName</i> receives a row data as a parameter to return a style class for a row whereas cells are customized using the <i>body</i> template.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" body={sizeTemplate} />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/contextmenudoc.js b/components/doc/treetable/contextmenudoc.js
new file mode 100644
index 0000000000..c6104fc0e9
--- /dev/null
+++ b/components/doc/treetable/contextmenudoc.js
@@ -0,0 +1,224 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { ContextMenu } from '@/components/lib/contextmenu/ContextMenu';
+import { Toast } from '@/components/lib/toast/Toast';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useRef, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ContextMenuDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const toast = useRef(null);
+    const cm = useRef(null);
+    const menu = [
+        {
+            label: 'View Key',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            }
+        },
+        {
+            label: 'Toggle',
+            icon: 'pi pi-sort',
+            command: () => {
+                let _expandedKeys = { ...expandedKeys };
+
+                if (_expandedKeys[selectedNodeKey]) {
+                    delete _expandedKeys[selectedNodeKey];
+                } else {
+                    _expandedKeys[selectedNodeKey] = true;
+                }
+
+                setExpandedKeys(_expandedKeys);
+            }
+        }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<ContextMenu model={menu} ref={cm} onHide={() => setSelectedNodeKey(null)} />
+<TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} contextMenuSelectionKey={selectedNodeKey}
+    onContextMenuSelectionChange={(event) => setSelectedNodeKey(event.value)} onContextMenu={(event) => cm.current.show(event.originalEvent)} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Toast } from 'primereact/toast';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function ContextMenuDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const toast = useRef(null);
+    const cm = useRef(null);
+    const menu = [
+        {
+            label: 'View Key',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            }
+        },
+        {
+            label: 'Toggle',
+            icon: 'pi pi-sort',
+            command: () => {
+                let _expandedKeys = { ...expandedKeys };
+
+                if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
+                else _expandedKeys[selectedNodeKey] = true;
+
+                setExpandedKeys(_expandedKeys);
+            }
+        }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+
+            <ContextMenu model={menu} ref={cm} onHide={() => setSelectedNodeKey(null)} />
+            <TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} contextMenuSelectionKey={selectedNodeKey}
+                    onContextMenuSelectionChange={(event) => setSelectedNodeKey(event.value)} onContextMenu={(event) => cm.current.show(event.originalEvent)} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { TreeTable, TreeTableExpandedKeysType } from 'primereact/treetable';
+import { ContextMenu } from 'primereact/contextmenu';
+import { Toast } from 'primereact/toast';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function ContextMenuDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [expandedKeys, setExpandedKeys] = useState<TreeTableExpandedKeysType | null>(null);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string | null>(null);
+    const toast = useRef<Toast>(null);
+    const cm = useRef<ContextMenu>(null);
+    const menu = [
+        {
+            label: 'View Key',
+            icon: 'pi pi-search',
+            command: () => {
+                toast.current.show({ severity: 'success', summary: 'Node Key', detail: selectedNodeKey });
+            }
+        },
+        {
+            label: 'Toggle',
+            icon: 'pi pi-sort',
+            command: () => {
+                let _expandedKeys = { ...expandedKeys };
+
+                if (_expandedKeys[selectedNodeKey]) delete _expandedKeys[selectedNodeKey];
+                else _expandedKeys[selectedNodeKey] = true;
+
+                setExpandedKeys(_expandedKeys);
+            }
+        }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+
+            <ContextMenu model={menu} ref={cm} onHide={() => setSelectedNodeKey(null)} />
+            <TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} contextMenuSelectionKey={selectedNodeKey}
+                    onContextMenuSelectionChange={(event) => setSelectedNodeKey(event.value)} onContextMenu={(event) => cm.current.show(event.originalEvent)} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    label: 'Documents',
+    data: 'Documents Folder',
+    icon: 'pi pi-fw pi-inbox',
+    children: [
+        {
+            key: '0-0',
+            label: 'Work',
+            data: 'Work Folder',
+            icon: 'pi pi-fw pi-cog',
+            children: [
+                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+            ]
+        },
+        {
+            key: '0-1',
+            label: 'Home',
+            data: 'Home Folder',
+            icon: 'pi pi-fw pi-home',
+            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TreeTable has exclusive integration with ContextMenu using the <i>onContextMenu</i> event to open a menu on right click alont with
+                    <i>contextMenuSelection</i> and <i>onContextMenuSelectionChange</i> properties to control the selection via the menu.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast} />
+                <ContextMenu model={menu} ref={cm} onHide={() => setSelectedNodeKey(null)} />
+                <TreeTable
+                    value={nodes}
+                    expandedKeys={expandedKeys}
+                    onToggle={(e) => setExpandedKeys(e.value)}
+                    contextMenuSelectionKey={selectedNodeKey}
+                    onContextMenuSelectionChange={(event) => setSelectedNodeKey(event.value)}
+                    onContextMenu={(event) => cm.current.show(event.originalEvent)}
+                    tableStyle={{ minWidth: '50rem' }}
+                >
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/controlleddoc.js b/components/doc/treetable/controlleddoc.js
new file mode 100644
index 0000000000..15d9628bac
--- /dev/null
+++ b/components/doc/treetable/controlleddoc.js
@@ -0,0 +1,195 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ControlledDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState(null);
+
+    const toggleApplications = () => {
+        let _expandedKeys = { ...expandedKeys };
+
+        if (_expandedKeys['0']) {
+            delete _expandedKeys['0'];
+        } else {
+            _expandedKeys['0'] = true;
+        }
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<Button onClick={toggleApplications} label="Toggle Applications" />
+<TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="mt-4" tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { NodeService } from './service/NodeService';
+
+export default function ControlledDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [expandedKeys, setExpandedKeys] = useState(null);
+
+    const toggleApplications = () => {
+        let _expandedKeys = { ...expandedKeys };
+
+        if (_expandedKeys['0']) delete _expandedKeys['0'];
+        else _expandedKeys['0'] = true;
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Button onClick={toggleApplications} label="Toggle Applications" />
+            <TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="mt-4" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable, TreeTableExpandedKeysType } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function ControlledDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [expandedKeys, setExpandedKeys] = useState<TreeTableExpandedKeysType | null>(null);
+
+    const toggleApplications = () => {
+        let _expandedKeys = { ...expandedKeys };
+
+        if (_expandedKeys['0']) delete _expandedKeys['0'];
+        else _expandedKeys['0'] = true;
+
+        setExpandedKeys(_expandedKeys);
+    };
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Button onClick={toggleApplications} label="Toggle Applications" />
+            <TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="mt-4" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Expansion state is controlled with <i>expandedKeys</i> and <i>onToggle</i> properties. The <i>expandedKeys</i> should be an object whose keys refer to the node key and values represent the expanded state e.g.{' '}
+                    <i>&#123;'0-0': true&#125;</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Button onClick={toggleApplications} label="Toggle Applications" />
+                <TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="mt-4" tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/dynamiccolumnsdoc.js b/components/doc/treetable/dynamiccolumnsdoc.js
new file mode 100644
index 0000000000..d799c1b796
--- /dev/null
+++ b/components/doc/treetable/dynamiccolumnsdoc.js
@@ -0,0 +1,172 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function DynamicColumnsDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const columns = [
+        { field: 'name', header: 'Name', expander: true },
+        { field: 'size', header: 'Type' },
+        { field: 'type', header: 'Size' }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+    {columns.map((col, i) => (
+        <Column key={col.field} field={col.field} header={col.header} expander={col.expander} />
+    ))}
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function DynamicColumnsDemo() {
+    const [nodes, setNodes] = useState([]);
+    const columns = [
+        { field: 'name', header: 'Name', expander: true },
+        { field: 'size', header: 'Type' },
+        { field: 'type', header: 'Size' }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                {columns.map((col, i) => (
+                    <Column key={col.field} field={col.field} header={col.header} expander={col.expander} />
+                ))}
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+interface ColumnMeta {
+    field: string;
+    header: string;
+}
+
+export default function DynamicColumnsDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const columns: Column[] = [
+        { field: 'name', header: 'Name', expander: true },
+        { field: 'size', header: 'Type' },
+        { field: 'type', header: 'Size' }
+    ];
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                {columns.map((col, i) => (
+                    <Column key={col.field} field={col.field} header={col.header} expander={col.expander} />
+                ))}
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Columns can be created programmatically.</p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                    {columns.map((col, i) => (
+                        <Column key={col.field} field={col.field} header={col.header} expander={col.expander} />
+                    ))}
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/editdoc.js b/components/doc/treetable/editdoc.js
new file mode 100644
index 0000000000..447107604c
--- /dev/null
+++ b/components/doc/treetable/editdoc.js
@@ -0,0 +1,283 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function EditDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onEditorValueChange = (options, value) => {
+        let newNodes = JSON.parse(JSON.stringify(nodes));
+        let editedNode = findNodeByKey(newNodes, options.node.key);
+
+        editedNode.data[options.field] = value;
+
+        setNodes(newNodes);
+    };
+
+    const findNodeByKey = (nodes, key) => {
+        let path = key.split('-');
+        let node;
+
+        while (path.length) {
+            let list = node ? node.children : nodes;
+
+            node = list[parseInt(path[0], 10)];
+            path.shift();
+        }
+
+        return node;
+    };
+
+    const inputTextEditor = (options) => {
+        return <InputText type="text" value={options.rowData[options.field]} onChange={(e) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const sizeEditor = (options) => {
+        return inputTextEditor(options);
+    };
+
+    const typeEditor = (options) => {
+        return inputTextEditor(options);
+    };
+
+    const requiredValidator = (e) => {
+        let props = e.columnProps;
+        let value = props.node.data[props.field];
+
+        return value && value.length > 0;
+    };
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander style={{ height: '3.5rem' }}></Column>
+    <Column field="size" header="Size" editor={sizeEditor} cellEditValidator={requiredValidator} style={{ height: '3.5rem' }}></Column>
+    <Column field="type" header="Type" editor={typeEditor} style={{ height: '3.5rem' }}></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { NodeService } from './service/NodeService';
+
+export default function EditDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const onEditorValueChange = (options, value) => {
+        let newNodes = JSON.parse(JSON.stringify(nodes));
+        let editedNode = findNodeByKey(newNodes, options.node.key);
+
+        editedNode.data[options.field] = value;
+
+        setNodes(newNodes);
+    };
+
+    const findNodeByKey = (nodes, key) => {
+        let path = key.split('-');
+        let node;
+
+        while (path.length) {
+            let list = node ? node.children : nodes;
+
+            node = list[parseInt(path[0], 10)];
+            path.shift();
+        }
+
+        return node;
+    };
+
+    const inputTextEditor = (options) => {
+        return <InputText type="text" value={options.rowData[options.field]} onChange={(e) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const sizeEditor = (options) => {
+        return inputTextEditor(options);
+    };
+
+    const typeEditor = (options) => {
+        return inputTextEditor(options);
+    };
+
+    const requiredValidator = (e) => {
+        let props = e.columnProps;
+        let value = props.node.data[props.field];
+
+        return value && value.length > 0;
+    };
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander style={{ height: '3.5rem' }}></Column>
+                <Column field="size" header="Size" editor={sizeEditor} cellEditValidator={requiredValidator} style={{ height: '3.5rem' }}></Column>
+                <Column field="type" header="Type" editor={typeEditor} style={{ height: '3.5rem' }}></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column, ColumnEditorOptions, ColumnEvent } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function EditDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const onEditorValueChange = (options: ColumnEditorOptions, value: string) => {
+        let newNodes = JSON.parse(JSON.stringify(nodes));
+        let editedNode = findNodeByKey(newNodes, options.node.key);
+
+        editedNode.data[options.field] = value;
+
+        setNodes(newNodes);
+    };
+
+    const findNodeByKey = (nodes: TreeNode[], key: string) => {
+        let path = key.split('-');
+        let node;
+
+        while (path.length) {
+            let list = node ? node.children : nodes;
+
+            node = list[parseInt(path[0], 10)];
+            path.shift();
+        }
+
+        return node;
+    };
+
+    const inputTextEditor = (options: ColumnEditorOptions) => {
+        return <InputText type="text" value={options.rowData[options.field]} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onEditorValueChange(options, e.target.value)} onKeyDown={(e) => e.stopPropagation()} />;
+    };
+
+    const sizeEditor = (options: ColumnEditorOptions) => {
+        return inputTextEditor(options);
+    };
+
+    const typeEditor = (options: ColumnEditorOptions) => {
+        return inputTextEditor(options);
+    };
+
+    const requiredValidator = (e: ColumnEvent) => {
+        let props = e.columnProps;
+        let value = props.node.data[props.field];
+
+        return value && value.length > 0;
+    };
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander style={{ height: '3.5rem' }}></Column>
+                <Column field="size" header="Size" editor={sizeEditor} cellEditValidator={requiredValidator} style={{ height: '3.5rem' }}></Column>
+                <Column field="type" header="Type" editor={typeEditor} style={{ height: '3.5rem' }}></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Incell editing is enabled by defining input elements with <i>editor</i> property of a Column.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander style={{ height: '3.5rem' }} />
+                    <Column field="size" header="Size" editor={sizeEditor} cellEditValidator={requiredValidator} style={{ height: '3.5rem' }} />
+                    <Column field="type" header="Type" editor={typeEditor} style={{ height: '3.5rem' }} />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/filterdoc.js b/components/doc/treetable/filterdoc.js
new file mode 100644
index 0000000000..cb564254fd
--- /dev/null
+++ b/components/doc/treetable/filterdoc.js
@@ -0,0 +1,241 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { IconField } from '@/components/lib/iconfield/IconField';
+import { InputIcon } from '@/components/lib/inputicon/InputIcon';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function FilterDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [filterMode, setFilterMode] = useState('lenient');
+    const [filterOptions] = useState([
+        { label: 'Lenient', value: 'lenient' },
+        { label: 'Strict', value: 'strict' }
+    ]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const getHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Global Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    let header = getHeader();
+
+    const code = {
+        basic: `
+<SelectButton value={filterMode} onChange={(e) => setFilterMode(e.value)} options={filterOptions} />
+
+<TreeTable value={nodes} globalFilter={globalFilter} header={header} filterMode={filterMode} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { SelectButton } from 'primereact/selectbutton';
+import { NodeService } from './service/NodeService';
+
+export default function FilterDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [filterMode, setFilterMode] = useState('lenient');
+    const [filterOptions] = useState([
+        { label: 'Lenient', value: 'lenient' },
+        { label: 'Strict', value: 'strict' }
+    ]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const getHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Global Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    let header = getHeader();
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center mb-4">
+                <SelectButton value={filterMode} onChange={(e) => setFilterMode(e.value)} options={filterOptions} />
+            </div>
+            <TreeTable value={nodes} globalFilter={globalFilter} header={header} filterMode={filterMode} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+                <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+                <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputText } from 'primereact/inputtext';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { SelectButton } from 'primereact/selectbutton';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+interface FilterModeOption {
+    label: string;
+    value: string;
+}
+
+export default function FilterDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [globalFilter, setGlobalFilter] = useState<string>('');
+    const [filterMode, setFilterMode] = useState<'lenient' | 'strict'>('lenient');
+    const [filterOptions] = useState<FilterModeOption[]>([
+        { label: 'Lenient', value: 'lenient' },
+        { label: 'Strict', value: 'strict' }
+    ]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const getHeader = () => {
+        return (
+            <div className="flex justify-content-end">
+                <IconField iconPosition="left">
+                    <InputIcon className="pi pi-search" />
+                    <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Global Search" />
+                </IconField>
+            </div>
+        );
+    };
+
+    let header = getHeader();
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center mb-4">
+                <SelectButton value={filterMode} onChange={(e) => setFilterMode(e.value)} options={filterOptions} />
+            </div>
+            <TreeTable value={nodes} globalFilter={globalFilter} header={header} filterMode={filterMode} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+                <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+                <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Filtering is enabled by adding the <i>filter</i> property to a Column. The <i>filterMode</i> specifies the filtering strategy, in <i>lenient</i> mode when the query matches a node, children of the node are not searched further as
+                    all descendants of the node are included. On the other hand, in <i>strict</i> mode when the query matches a node, filtering continues on all descendants. A general filled called <i>globalFilter</i> is also provided to search all
+                    columns that support filtering.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex justify-content-center mb-4">
+                    <SelectButton value={filterMode} onChange={(e) => setFilterMode(e.value)} options={filterOptions} />
+                </div>
+                <TreeTable value={nodes} globalFilter={globalFilter} header={header} filterMode={filterMode} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name" />
+                    <Column field="size" header="Size" filter filterPlaceholder="Filter by size" />
+                    <Column field="type" header="Type" filter filterPlaceholder="Filter by type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/importdoc.js b/components/doc/treetable/importdoc.js
new file mode 100644
index 0000000000..22bd196c7e
--- /dev/null
+++ b/components/doc/treetable/importdoc.js
@@ -0,0 +1,18 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/treetable/lazyloaddoc.js b/components/doc/treetable/lazyloaddoc.js
new file mode 100644
index 0000000000..5d15cb4c1b
--- /dev/null
+++ b/components/doc/treetable/lazyloaddoc.js
@@ -0,0 +1,336 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+
+export function LazyLoadDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(10);
+    const [totalRecords, setTotalRecords] = useState(0);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+            setNodes(loadNodes(first, rows));
+            setTotalRecords(1000);
+        }, 500);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const loadNodes = (first, rows) => {
+        let nodes = [];
+
+        for (let i = 0; i < rows; i++) {
+            let node = {
+                key: first + i,
+                data: {
+                    name: 'Item ' + (first + i),
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + (first + i)
+                },
+                leaf: false
+            };
+
+            nodes.push(node);
+        }
+
+        return nodes;
+    };
+
+    const onExpand = (event) => {
+        if (!event.node.children) {
+            setLoading(true);
+
+            setTimeout(() => {
+                setLoading(false);
+                let lazyNode = { ...event.node };
+
+                lazyNode.children = [
+                    {
+                        data: {
+                            name: lazyNode.data.name + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'File'
+                        }
+                    },
+                    {
+                        data: {
+                            name: lazyNode.data.name + ' - 1',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'File'
+                        }
+                    }
+                ];
+
+                let _nodes = nodes.map((node) => {
+                    if (node.key === event.node.key) {
+                        node = lazyNode;
+                    }
+
+                    return node;
+                });
+
+                setLoading(false);
+                setNodes(_nodes);
+            }, 250);
+        }
+    };
+
+    const onPage = (event) => {
+        setLoading(true);
+
+        //imitate delay of a backend call
+        setTimeout(() => {
+            setFirst(event.first);
+            setRows(event.rows);
+            setNodes(loadNodes(event.first, event.rows));
+            setLoading(false);
+        }, 500);
+    };
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} lazy paginator totalRecords={totalRecords}
+        first={first} rows={rows} onPage={onPage} onExpand={onExpand} loading={loading} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+
+export default function LazyLoadDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(10);
+    const [totalRecords, setTotalRecords] = useState(0);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+            setNodes(loadNodes(first, rows));
+            setTotalRecords(1000);
+        }, 500);
+    }, []);
+
+    const loadNodes = (first, rows) => {
+        let nodes = [];
+
+        for (let i = 0; i < rows; i++) {
+            let node = {
+                key: first + i,
+                data: {
+                    name: 'Item ' + (first + i),
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + (first + i)
+                },
+                leaf: false
+            };
+
+            nodes.push(node);
+        }
+
+        return nodes;
+    };
+
+    const onExpand = (event) => {
+        if (!event.node.children) {
+            setLoading(true);
+
+            setTimeout(() => {
+                setLoading(false);
+                let lazyNode = { ...event.node };
+
+                lazyNode.children = [
+                    {
+                        data: {
+                            name: lazyNode.data.name + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'File'
+                        }
+                    },
+                    {
+                        data: {
+                            name: lazyNode.data.name + ' - 1',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'File'
+                        }
+                    }
+                ];
+
+                let _nodes = nodes.map((node) => {
+                    if (node.key === event.node.key) {
+                        node = lazyNode;
+                    }
+
+                    return node;
+                });
+
+                setLoading(false);
+                setNodes(_nodes);
+            }, 250);
+        }
+    };
+
+    const onPage = (event) => {
+        setLoading(true);
+
+        //imitate delay of a backend call
+        setTimeout(() => {
+            setFirst(event.first);
+            setRows(event.rows);
+            setNodes(loadNodes(event.first, event.rows));
+            setLoading(false);
+        }, 500);
+    };
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} lazy paginator totalRecords={totalRecords}
+                first={first} rows={rows} onPage={onPage} onExpand={onExpand} loading={loading} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable, TreeTableEvent, TreeTablePageEvent } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+
+export default function LazyLoadDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [first, setFirst] = useState<number>(0);
+    const [rows, setRows] = useState<number>(10);
+    const [totalRecords, setTotalRecords] = useState<number>(0);
+    const [loading, setLoading] = useState<loading>(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+            setNodes(loadNodes(first, rows));
+            setTotalRecords(1000);
+        }, 500);
+    }, []);
+
+    const loadNodes = (first: number, rows: number) => {
+        let nodes = [];
+
+        for (let i = 0; i < rows; i++) {
+            let node = {
+                key: first + i,
+                data: {
+                    name: 'Item ' + (first + i),
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + (first + i)
+                },
+                leaf: false
+            };
+
+            nodes.push(node);
+        }
+
+        return nodes;
+    };
+
+    const onExpand = (event: TreeTableEvent) => {
+        if (!event.node.children) {
+            setLoading(true);
+
+            setTimeout(() => {
+                setLoading(false);
+                let lazyNode = { ...event.node };
+
+                lazyNode.children = [
+                    {
+                        data: {
+                            name: lazyNode.data.name + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'File'
+                        }
+                    },
+                    {
+                        data: {
+                            name: lazyNode.data.name + ' - 1',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'File'
+                        }
+                    }
+                ];
+
+                let _nodes = nodes.map((node) => {
+                    if (node.key === event.node.key) {
+                        node = lazyNode;
+                    }
+
+                    return node;
+                });
+
+                setLoading(false);
+                setNodes(_nodes);
+            }, 250);
+        }
+    };
+
+    const onPage = (event: TreeTablePageEvent) => {
+        setLoading(true);
+
+        //imitate delay of a backend call
+        setTimeout(() => {
+            setFirst(event.first);
+            setRows(event.rows);
+            setNodes(loadNodes(event.first, event.rows));
+            setLoading(false);
+        }, 500);
+    };
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} lazy paginator totalRecords={totalRecords}
+                first={first} rows={rows} onPage={onPage} onExpand={onExpand} loading={loading} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime <i>paging</i>, <i>sorting</i> and <i>filtering</i> occurs. Sample
+                    below imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
+                </p>
+                <p>
+                    Enabling the <i>lazy</i> property and assigning the logical number of rows to <i>totalRecords</i> by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually
+                    records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
+                </p>
+                <p>
+                    In addition, only the root elements should be loaded, children can be loaded on demand using <i>onExpand</i> callback.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} lazy paginator totalRecords={totalRecords} first={first} rows={rows} onPage={onPage} onExpand={onExpand} loading={loading} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/paginator/basicdoc.js b/components/doc/treetable/paginator/basicdoc.js
new file mode 100644
index 0000000000..ec79bd21bf
--- /dev/null
+++ b/components/doc/treetable/paginator/basicdoc.js
@@ -0,0 +1,163 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+
+export function PaginatorBasicDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        setNodes(files);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25]} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+
+export default function PaginatorBasicDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        setNodes(files);
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25]} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+
+export default function PaginatorBasicDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        setNodes(files);
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25]} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Pagination is enabled by adding <i>paginator</i> property and defining <i>rows</i> per page.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25]} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/paginator/templatedoc.js b/components/doc/treetable/paginator/templatedoc.js
new file mode 100644
index 0000000000..865af66ca9
--- /dev/null
+++ b/components/doc/treetable/paginator/templatedoc.js
@@ -0,0 +1,196 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+export function PaginatorTemplateDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        setNodes(files);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const paginatorLeft = <Button type="button" icon="pi pi-refresh" text />;
+    const paginatorRight = <Button type="button" icon="pi pi-download" text />;
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]}
+        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        currentPageReportTemplate="{first} to {last} of {totalRecords}"
+        paginatorLeft={paginatorLeft} paginatorRight={paginatorRight} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+
+export default function PaginatorTemplateDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        setNodes(files);
+    }, []);
+
+    const paginatorLeft = <Button type="button" icon="pi pi-refresh" text />;
+    const paginatorRight = <Button type="button" icon="pi pi-download" text />;
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]}
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first} to {last} of {totalRecords}"
+                    paginatorLeft={paginatorLeft} paginatorRight={paginatorRight} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { Button } from 'primereact/button';
+import { TreeTable } from 'primereact/treetable';
+import { TreeNode } from 'primereact/treenode';
+import { Column } from 'primereact/column';
+
+export default function PaginatorTemplateDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        let files = [];
+
+        for (let i = 0; i < 50; i++) {
+            let node = {
+                key: i,
+                data: {
+                    name: 'Item ' + i,
+                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                    type: 'Type ' + i
+                },
+                children: [
+                    {
+                        key: i + ' - 0',
+                        data: {
+                            name: 'Item ' + i + ' - 0',
+                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
+                            type: 'Type ' + i
+                        }
+                    }
+                ]
+            };
+
+            files.push(node);
+        }
+
+        setNodes(files);
+    }, []);
+
+    const paginatorLeft = <Button type="button" icon="pi pi-refresh" text />;
+    const paginatorRight = <Button type="button" icon="pi pi-download" text />;
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]}
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first} to {last} of {totalRecords}"
+                    paginatorLeft={paginatorLeft} paginatorRight={paginatorRight} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Paginator UI is customized using the <i>paginatorTemplate</i> property. Each element can also be customized further with your own UI to replace the default one, refer to the <Link href="http://github.com/paginator">Paginator</Link> component for
+                    more information about the advanced customization options.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable
+                    value={nodes}
+                    paginator
+                    rows={5}
+                    rowsPerPageOptions={[5, 10, 25, 50]}
+                    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+                    currentPageReportTemplate="{first} to {last} of {totalRecords}"
+                    paginatorLeft={paginatorLeft}
+                    paginatorRight={paginatorRight}
+                    tableStyle={{ minWidth: '50rem' }}
+                >
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/pt/wireframe.js b/components/doc/treetable/pt/wireframe.js
new file mode 100644
index 0000000000..91239aaf0e
--- /dev/null
+++ b/components/doc/treetable/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/wireframe-placeholder.jpg" alt="treetable" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/treetable/reorderdoc.js b/components/doc/treetable/reorderdoc.js
new file mode 100644
index 0000000000..520fb287a5
--- /dev/null
+++ b/components/doc/treetable/reorderdoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function ReorderDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} reorderableColumns tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function ReorderDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} reorderableColumns tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function ReorderDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} reorderableColumns tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Order of the columns can be changed using drag and drop when <i>reorderableColumns</i> is present.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} reorderableColumns tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/resize/expandmodedoc.js b/components/doc/treetable/resize/expandmodedoc.js
new file mode 100644
index 0000000000..d3a8ed7dd8
--- /dev/null
+++ b/components/doc/treetable/resize/expandmodedoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function ExpandModeDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} resizableColumns showGridlines columnResizeMode="expand" tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function ExpandModeDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} resizableColumns showGridlines columnResizeMode="expand" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function ExpandModeDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} resizableColumns showGridlines columnResizeMode="expand" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} resizableColumns showGridlines columnResizeMode="expand" tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/resize/fitmodedoc.js b/components/doc/treetable/resize/fitmodedoc.js
new file mode 100644
index 0000000000..ed08bf74b7
--- /dev/null
+++ b/components/doc/treetable/resize/fitmodedoc.js
@@ -0,0 +1,155 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function FitModeDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function FitModeDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function FitModeDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Columns can be resized with drag and drop when <i>resizableColumns</i> is enabled. Default resize mode is <i>fit</i>
+                    that does not change the overall table width.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/scroll/frozencolumnsdoc.js b/components/doc/treetable/scroll/frozencolumnsdoc.js
new file mode 100644
index 0000000000..7cd58a3d1e
--- /dev/null
+++ b/components/doc/treetable/scroll/frozencolumnsdoc.js
@@ -0,0 +1,170 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function FrozenColumnsDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} scrollable frozenWidth="200px" scrollHeight="250px">
+    <Column field="name" header="Name" expander frozen style={{ width: '250px', height: '57px' }}></Column>
+    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_0"></Column>
+    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_0"></Column>
+    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_1"></Column>
+    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_1"></Column>
+    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_2"></Column>
+    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_2"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function FrozenColumnsDemo() {
+    const [nodes, setNodes] = useState([]);
+    
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} scrollable frozenWidth="200px" scrollHeight="250px">
+                <Column field="name" header="Name" expander frozen style={{ width: '250px', height: '57px' }}></Column>
+                <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_0"></Column>
+                <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_0"></Column>
+                <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_1"></Column>
+                <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_1"></Column>
+                <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_2"></Column>
+                <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_2"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function FrozenColumnsDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} scrollable frozenWidth="200px" scrollHeight="250px">
+                <Column field="name" header="Name" expander frozen style={{ width: '250px', height: '57px' }}></Column>
+                <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_0"></Column>
+                <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_0"></Column>
+                <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_1"></Column>
+                <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_1"></Column>
+                <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_2"></Column>
+                <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_2"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} scrollable frozenWidth="200px" scrollHeight="250px">
+                    <Column field="name" header="Name" expander frozen style={{ width: '250px', height: '57px' }} />
+                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_0" />
+                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_0" />
+                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_1" />
+                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_1" />
+                    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_2" />
+                    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_2" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/scroll/horizontaldoc.js b/components/doc/treetable/scroll/horizontaldoc.js
new file mode 100644
index 0000000000..8d3a91a9af
--- /dev/null
+++ b/components/doc/treetable/scroll/horizontaldoc.js
@@ -0,0 +1,164 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function HorizontalScrollDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} scrollable scrollHeight="200px">
+    <Column field="name" header="Name" expander style={{ width: '250px' }}></Column>
+    <Column field="size" header="Size" style={{ width: '250px' }}></Column>
+    <Column field="type" header="Type 2" style={{ width: '250px' }}></Column>
+    <Column field="size" header="Size 2" style={{ width: '250px' }}></Column>
+    <Column field="type" header="Type 3" style={{ width: '250px' }}></Column>
+    <Column field="size" header="Size 3" style={{ width: '250px' }}></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function HorizontalScrollDemo() {
+    const [nodes, setNodes] = useState([]);
+    
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} scrollable scrollHeight="200px">
+                <Column field="name" header="Name" expander style={{ width: '250px' }}></Column>
+                <Column field="size" header="Size" style={{ width: '250px' }}></Column>
+                <Column field="type" header="Type 2" style={{ width: '250px' }}></Column>
+                <Column field="size" header="Size 2" style={{ width: '250px' }}></Column>
+                <Column field="type" header="Type 3" style={{ width: '250px' }}></Column>
+                <Column field="size" header="Size 3" style={{ width: '250px' }}></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function HorizontalScrollDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} scrollable scrollHeight="200px">
+                <Column field="name" header="Name" expander style={{ width: '250px' }}></Column>
+                <Column field="size" header="Size" style={{ width: '250px' }}></Column>
+                <Column field="type" header="Type 2" style={{ width: '250px' }}></Column>
+                <Column field="size" header="Size 2" style={{ width: '250px' }}></Column>
+                <Column field="type" header="Type 3" style={{ width: '250px' }}></Column>
+                <Column field="size" header="Size 3" style={{ width: '250px' }}></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} scrollable scrollHeight="200px">
+                    <Column field="name" header="Name" expander style={{ width: '250px' }} />
+                    <Column field="size" header="Size" style={{ width: '250px' }} />
+                    <Column field="type" header="Type 2" style={{ width: '250px' }} />
+                    <Column field="size" header="Size 2" style={{ width: '250px' }} />
+                    <Column field="type" header="Type 3" style={{ width: '250px' }} />
+                    <Column field="size" header="Size 3" style={{ width: '250px' }} />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/scroll/verticaldoc.js b/components/doc/treetable/scroll/verticaldoc.js
new file mode 100644
index 0000000000..5bcdd0c467
--- /dev/null
+++ b/components/doc/treetable/scroll/verticaldoc.js
@@ -0,0 +1,154 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function VerticalScrollDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} scrollable scrollHeight="200px">
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function VerticalScrollDemo() {
+    const [nodes, setNodes] = useState([]);
+    
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} scrollable scrollHeight="200px">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function VerticalScrollDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} scrollable scrollHeight="200px">
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} scrollable scrollHeight="200px">
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/selection/checkboxdoc.js b/components/doc/treetable/selection/checkboxdoc.js
new file mode 100644
index 0000000000..5ae5b0295c
--- /dev/null
+++ b/components/doc/treetable/selection/checkboxdoc.js
@@ -0,0 +1,173 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function CheckboxRowSelectionDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const introCode = {
+        basic: `
+{
+    '0-0': {
+        partialChecked: false,
+        checked: true
+    }
+}
+        `
+    };
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys}
+        onSelectionChange={(e) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function CheckboxRowSelectionDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable, TreeTableSelectionKeysType, TreeTableSelectionEvent } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function CheckboxRowSelectionDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState<TreeTableSelectionKeysType | null>(null);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys} onSelectionChange={(e: TreeTableSelectionEvent) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Selection of multiple nodes via checkboxes is enabled by configuring <i>selectionMode</i> as <i>checkbox</i>.
+                </p>
+                <p>
+                    In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
+            <div className="card">
+                <TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/selection/eventsdoc.js b/components/doc/treetable/selection/eventsdoc.js
new file mode 100644
index 0000000000..8ea99d6c5b
--- /dev/null
+++ b/components/doc/treetable/selection/eventsdoc.js
@@ -0,0 +1,203 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { Toast } from '@/components/lib/toast/Toast';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useRef, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function RowSelectionEventsDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const toast = useRef(null);
+
+    const onSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Node Selected', detail: event.node.data.name });
+    };
+
+    const onUnselect = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Node Unselected', detail: event.node.data.name });
+    };
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey}
+        onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={false}
+        onSelect={onSelect} onUnselect={onUnselect} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Toast } from 'primereact/toast';
+import { NodeService } from './service/NodeService';
+
+export default function SingleRowSelectionDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const toast = useRef(null);
+
+    const onSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Node Selected', detail: event.node.data.name });
+    };
+
+    const onUnselect = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Node Unselected', detail: event.node.data.name });
+    };
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={false} onSelect={onSelect} onUnselect={onUnselect} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useRef, useEffect } from 'react';
+import { TreeTable, TreeTableSelectionEvent } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { Toast } from 'primereact/toast';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function SingleRowSelectionDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string | null>(null);
+    const toast = useRef(null);
+
+    const onSelect = (event) => {
+        toast.current.show({ severity: 'info', summary: 'Node Selected', detail: event.node.data.name });
+    };
+
+    const onUnselect = (event) => {
+        toast.current.show({ severity: 'warn', summary: 'Node Unselected', detail: event.node.data.name });
+    };
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <Toast ref={toast} />
+            <TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e: TreeTableSelectionEvent) => setSelectedNodeKey(e.value)} metaKeySelection={false} onSelect={onSelect} onUnselect={onUnselect} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TreeTable provides <i>onSelect</i> and <i>onUnselect</i> events to listen selection events.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast} />
+                <TreeTable
+                    value={nodes}
+                    selectionMode="single"
+                    selectionKeys={selectedNodeKey}
+                    onSelectionChange={(e) => setSelectedNodeKey(e.value)}
+                    metaKeySelection={false}
+                    onSelect={onSelect}
+                    onUnselect={onUnselect}
+                    tableStyle={{ minWidth: '50rem' }}
+                >
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/selection/multipledoc.js b/components/doc/treetable/selection/multipledoc.js
new file mode 100644
index 0000000000..35bd887e7e
--- /dev/null
+++ b/components/doc/treetable/selection/multipledoc.js
@@ -0,0 +1,190 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function MultipleRowsSelectionDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const introCode = {
+        basic: `
+{
+    '0-0': true,
+    '0-1-0': true
+}
+        `
+    };
+
+    const code = {
+        basic: `
+<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+
+<TreeTable value={nodes} selectionMode="multiple" selectionKeys={selectedNodeKeys}
+        onSelectionChange={(e) => setSelectedNodeKeys(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleRowsSelectionDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable value={nodes} selectionMode="multiple" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable, TreeTableSelectionKeysType, TreeTableSelectionEvent } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleRowsSelectionDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedNodeKeys, setSelectedNodeKeys] = useState<TreeTableSelectionKeysType | null>(null);
+    const [metaKey, setMetaKey] = useState<boolean>(true);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable value={nodes} selectionMode="multiple" selectionKeys={selectedNodeKeys} onSelectionChange={(e: TreeTableSelectionEvent) => setSelectedNodeKeys(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    More than one node is selectable by setting <i>selectionMode</i> to <i>multiple</i>. By default in multiple selection mode, metaKey press (e.g. <i>⌘</i>) is necessary to add to existing selections however this can be configured
+                    with disabling the <i>metaKeySelection</i> property. Note that in touch enabled devices, TreeTable always ignores metaKey.
+                </p>
+                <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
+            </DocSectionText>
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
+            <div className="card">
+                <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                    <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                    <label htmlFor="input-metakey">MetaKey</label>
+                </div>
+                <TreeTable value={nodes} selectionMode="multiple" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/selection/singledoc.js b/components/doc/treetable/selection/singledoc.js
new file mode 100644
index 0000000000..ded32d11dc
--- /dev/null
+++ b/components/doc/treetable/selection/singledoc.js
@@ -0,0 +1,182 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function SingleRowSelectionDoc(props) {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+
+<TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey}
+        onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { InputSwitch } from 'primereact/inputswitch';
+import { NodeService } from './service/NodeService';
+
+export default function SingleRowSelectionDemo() {
+    const [nodes, setNodes] = useState([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState(null);
+    const [metaKey, setMetaKey] = useState(true);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable, TreeTableSelectionEvent } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { NodeService } from './service/NodeService';
+
+export default function SingleRowSelectionDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+    const [selectedNodeKey, setSelectedNodeKey] = useState<string | null>(null);
+    const [metaKey, setMetaKey] = useState<boolean>(true);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e: InputSwitchChangeEvent) => setMetaKey(e.value)} />
+                <label htmlFor="input-metakey">MetaKey</label>
+            </div>
+            <TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e: TreeTableSelectionEvent) => setSelectedNodeKey(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Single node selection is configured by setting <i>selectionMode</i> as <i>single</i> along with <i>selectionKeys</i> and <i>onSelectionChange</i> properties to manage the selection value binding.
+                </p>
+                <p>
+                    By default, metaKey press (e.g. <i>⌘</i>) is necessary to unselect a node however this can be configured with disabling the <i>metaKeySelection</i> property. In touch enabled devices this option has no effect and behavior is same
+                    as setting it to false.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <div className="flex justify-content-center align-items-center mb-4 gap-2">
+                    <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
+                    <label htmlFor="input-metakey">MetaKey</label>
+                </div>
+                <TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey} onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/sort/multiplecolumnsdoc.js b/components/doc/treetable/sort/multiplecolumnsdoc.js
new file mode 100644
index 0000000000..d54c467fac
--- /dev/null
+++ b/components/doc/treetable/sort/multiplecolumnsdoc.js
@@ -0,0 +1,160 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function MultipleColumnsDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => {
+            setNodes(data);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander sortable></Column>
+    <Column field="size" header="Size" sortable></Column>
+    <Column field="type" header="Type" sortable></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleColumnsDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => {
+            setNodes(data);
+        });
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander sortable></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function MultipleColumnsDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => {
+            setNodes(data);
+        });
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander sortable></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander sortable />
+                    <Column field="size" header="Size" sortable />
+                    <Column field="type" header="Type" sortable />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/sort/singlecolumndoc.js b/components/doc/treetable/sort/singlecolumndoc.js
new file mode 100644
index 0000000000..5b82731100
--- /dev/null
+++ b/components/doc/treetable/sort/singlecolumndoc.js
@@ -0,0 +1,160 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../../service/NodeService';
+
+export function SingleColumnDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => {
+            setNodes(data);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander sortable></Column>
+    <Column field="size" header="Size" sortable></Column>
+    <Column field="type" header="Type" sortable></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function SingleColumnDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => {
+            setNodes(data);
+        });
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander sortable></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function SingleColumnDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => {
+            setNodes(data);
+        });
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander sortable></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Sorting on a column is enabled by adding the <i>sortable</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander sortable />
+                    <Column field="size" header="Size" sortable />
+                    <Column field="type" header="Type" sortable />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/statefuldoc.js b/components/doc/treetable/statefuldoc.js
new file mode 100644
index 0000000000..c4c8a0fb74
--- /dev/null
+++ b/components/doc/treetable/statefuldoc.js
@@ -0,0 +1,160 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function StatefulDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} stateKey={'tree-table-state-demo-session'} stateStorage={'session'}>
+    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function StatefulDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }} stateKey={'tree-table-state-demo-session'} stateStorage={'session'}
+                    paginator rows={5} rowsPerPageOptions={[5, 10, 25]}>
+                <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+                <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+                <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function StatefulDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }} stateKey={'tree-table-state-demo-session'} stateStorage={'session'}
+                    paginator rows={5} rowsPerPageOptions={[5, 10, 25]}>
+                <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
+                <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
+                <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
+            </TreeTable>
+        </div>
+    )
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.</p>
+                <p>
+                    Change the state of the table e.g paginate or expand rows, navigate away and then return to this table again to test this feature. The setting is set as <i>session</i> with the <i>stateStorage</i> property so that Table retains
+                    the state until the browser is closed. Other alternative is <i>local</i> referring to <i>localStorage</i> for an extended lifetime.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }} stateKey={'tree-table-state-demo-session'} stateStorage={'session'} paginator rows={5} rowsPerPageOptions={[5, 10, 25]}>
+                    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name" sortable />
+                    <Column field="size" header="Size" filter filterPlaceholder="Filter by size" sortable />
+                    <Column field="type" header="Type" filter filterPlaceholder="Filter by type" sortable />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/styledoc.js b/components/doc/treetable/styledoc.js
new file mode 100644
index 0000000000..82b9d45ae0
--- /dev/null
+++ b/components/doc/treetable/styledoc.js
@@ -0,0 +1,67 @@
+import Link from 'next/link';
+
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming"> theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-treetable</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-column-title</td>
+                            <td>Title of a column.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sortable-column</td>
+                            <td>Sortable column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-scrollable-header</td>
+                            <td>Container of header in a scrollable table.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-scrollable-body</td>
+                            <td>Container of body in a scrollable table.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-scrollable-footer</td>
+                            <td>Container of footer in a scrollable table.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-emptymessage</td>
+                            <td>Cell containing the empty message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-toggler</td>
+                            <td>Toggler icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/treetable/templatedoc.js b/components/doc/treetable/templatedoc.js
new file mode 100644
index 0000000000..ded7109065
--- /dev/null
+++ b/components/doc/treetable/templatedoc.js
@@ -0,0 +1,264 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { TreeTable } from '@/components/lib/treetable/TreeTable';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useEffect, useState } from 'react';
+import { NodeService } from '../../../service/NodeService';
+
+export function TemplateDoc(props) {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const actionTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button type="button" icon="pi pi-search" rounded />
+                <Button type="button" icon="pi pi-pencil" severity="success" rounded />
+            </div>
+        );
+    };
+
+    const togglerTemplate = (node, options) => {
+        if (!node) {
+            return;
+        }
+
+        const expanded = options.expanded;
+        const iconClassName = classNames('p-treetable-toggler-icon pi pi-fw', {
+            'pi-caret-right': !expanded,
+            'pi-caret-down': expanded
+        });
+
+        return (
+            <button type="button" className="p-treetable-toggler p-link" style={options.buttonStyle} tabIndex={-1} onClick={options.onClick}>
+                <span className={iconClassName} aria-hidden="true" />
+            </button>
+        );
+    };
+
+    const header = <div className="text-xl font-bold">File Viewer</div>;
+    const footer = (
+        <div className="flex justify-content-start">
+            <Button icon="pi pi-refresh" label="Reload" severity="warning" />
+        </div>
+    );
+
+    const code = {
+        basic: `
+<TreeTable value={nodes} header={header} footer={footer} togglerTemplate={togglerTemplate} tableStyle={{ minWidth: '50rem' }}>
+    <Column field="name" header="Name" expander></Column>
+    <Column field="size" header="Size"></Column>
+    <Column field="type" header="Type"></Column>
+    <Column body={actionTemplate} headerClassName="w-10rem" />
+</TreeTable>
+        `,
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { NodeService } from './service/NodeService';
+
+export default function TemplateDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const actionTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button type="button" icon="pi pi-search" rounded></Button>
+                <Button type="button" icon="pi pi-pencil" severity="success" rounded></Button>
+            </div>
+        );
+    };
+
+    const togglerTemplate = (node, options) => {
+        if (!node) {
+            return;
+        }
+
+        const expanded = options.expanded;
+        const iconClassName = classNames('p-treetable-toggler-icon pi pi-fw', {
+            'pi-caret-right': !expanded,
+            'pi-caret-down': expanded
+        });
+
+        return (
+            <button type="button" className="p-treetable-toggler p-link" style={options.buttonStyle} tabIndex={-1} onClick={options.onClick}>
+                <span className={iconClassName} aria-hidden="true"></span>
+            </button>
+        );
+    };
+
+    const header = <div className="text-xl font-bold">File Viewer</div>;
+    const footer = (
+        <div className="flex justify-content-start">
+            <Button icon="pi pi-refresh" label="Reload" severity="warning" />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} header={header} footer={footer} togglerTemplate={togglerTemplate} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+                <Column body={actionTemplate} headerClassName="w-10rem" />
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable, TreeTableTogglerTemplateOptions } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { TreeNode } from 'primereact/treenode';
+import { NodeService } from './service/NodeService';
+
+export default function TemplateDemo() {
+    const [nodes, setNodes] = useState<TreeNode[]>([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then((data) => setNodes(data));
+    }, []);
+
+    const actionTemplate = () => {
+        return (
+            <div className="flex flex-wrap gap-2">
+                <Button type="button" icon="pi pi-search" rounded></Button>
+                <Button type="button" icon="pi pi-pencil" severity="success" rounded></Button>
+            </div>
+        );
+    };
+
+    const togglerTemplate = (node: TreeNode, options: TreeTableTogglerTemplateOptions) => {
+        if (!node) {
+            return;
+        }
+
+        const expanded = options.expanded;
+        const iconClassName = classNames('p-treetable-toggler-icon pi pi-fw', {
+            'pi-caret-right': !expanded,
+            'pi-caret-down': expanded
+        });
+
+        return (
+            <button type="button" className="p-treetable-toggler p-link" style={options.buttonStyle} tabIndex={-1} onClick={options.onClick}>
+                <span className={iconClassName} aria-hidden="true"></span>
+            </button>
+        );
+    };
+
+    const header = <div className="text-xl font-bold">File Viewer</div>;
+    const footer = (
+        <div className="flex justify-content-start">
+            <Button icon="pi pi-refresh" label="Reload" severity="warning" />
+        </div>
+    );
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} header={header} footer={footer} togglerTemplate={togglerTemplate} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander></Column>
+                <Column field="size" header="Size"></Column>
+                <Column field="type" header="Type"></Column>
+                <Column body={actionTemplate} headerClassName="w-10rem" />
+            </TreeTable>
+        </div>
+    );
+}
+        `,
+        data: `
+{
+    key: '0',
+    data: {
+        name: 'Applications',
+        size: '100kb',
+        type: 'Folder'
+    },
+    children: [
+        {
+            key: '0-0',
+            data: {
+                name: 'React',
+                size: '25kb',
+                type: 'Folder'
+            },
+            children: [
+                {
+                    key: '0-0-0',
+                    data: {
+                        name: 'react.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-1',
+                    data: {
+                        name: 'native.app',
+                        size: '10kb',
+                        type: 'Application'
+                    }
+                },
+                {
+                    key: '0-0-2',
+                    data: {
+                        name: 'mobile.app',
+                        size: '5kb',
+                        type: 'Application'
+                    }
+                }
+            ]
+        },
+        {
+            key: '0-1',
+            data: {
+                name: 'editor.app',
+                size: '25kb',
+                type: 'Application'
+            }
+        },
+        {
+            key: '0-2',
+            data: {
+                name: 'settings.app',
+                size: '50kb',
+                type: 'Application'
+            }
+        }
+    ]
+},
+...
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Custom content at <i>header</i>, <i>body</i> and <i>footer</i> sections are supported via templating. The toggler can be customized with the <i>togglerTemplate</i> property.
+                </p>
+            </DocSectionText>
+            <div className="card">
+                <TreeTable value={nodes} header={header} footer={footer} togglerTemplate={togglerTemplate} tableStyle={{ minWidth: '50rem' }}>
+                    <Column field="name" header="Name" expander />
+                    <Column field="size" header="Size" />
+                    <Column field="type" header="Type" />
+                    <Column body={actionTemplate} headerClassName="w-10rem" />
+                </TreeTable>
+            </div>
+            <DocSectionCode code={code} service={['NodeService']} />
+        </>
+    );
+}
diff --git a/components/doc/treetable/theming/styleddoc.js b/components/doc/treetable/theming/styleddoc.js
new file mode 100644
index 0000000000..3a8843f09e
--- /dev/null
+++ b/components/doc/treetable/theming/styleddoc.js
@@ -0,0 +1,63 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-treetable</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-header</td>
+                            <td>Header section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-footer</td>
+                            <td>Footer section.</td>
+                        </tr>
+                        <tr>
+                            <td>p-column-title</td>
+                            <td>Title of a column.</td>
+                        </tr>
+                        <tr>
+                            <td>p-sortable-column</td>
+                            <td>Sortable column header.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-scrollable-header</td>
+                            <td>Container of header in a scrollable table.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-scrollable-body</td>
+                            <td>Container of body in a scrollable table.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-scrollable-footer</td>
+                            <td>Container of footer in a scrollable table.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-emptymessage</td>
+                            <td>Cell containing the empty message.</td>
+                        </tr>
+                        <tr>
+                            <td>p-treetable-toggler</td>
+                            <td>Toggler icon.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/treetable/theming/tailwinddoc.js b/components/doc/treetable/theming/tailwinddoc.js
new file mode 100644
index 0000000000..0b4e98c7ba
--- /dev/null
+++ b/components/doc/treetable/theming/tailwinddoc.js
@@ -0,0 +1,205 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    treetable: {
+        root: ({ props }) => ({
+            className: classNames('relative', {
+                'flex flex-col h-full': props.scrollHeight
+            })
+        }),
+        loadingoverlay: {
+            className: classNames(
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            )
+        },
+        loadingicon: 'w-8 h-8',
+        header: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            )
+        },
+        scrollablewrapper: ({ props }) => ({
+            className: classNames({
+                'relative overflow-auto': props.scrollable,
+                'overflow-x-auto': props.resizableColumns
+            })
+        }),
+        wrapper: ({ props }) => ({
+            className: classNames({
+                'relative overflow-auto': props.scrollable,
+                'overflow-x-auto': props.resizableColumns
+            })
+        }),
+        footer: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            )
+        },
+        table: 'border-collapse table-fixed w-full',
+        thead: ({ props }) => ({
+            className: classNames({
+                'block sticky top-0 z-[1]': props.scrollable
+            })
+        }),
+        tbody: ({ props }) => ({
+            className: classNames({
+                block: props.scrollable
+            })
+        }),
+        tfoot: ({ props }) => ({
+            className: classNames({
+                block: props.scrollable
+            })
+        }),
+        headerrow: ({ props }) => ({
+            className: classNames({
+                'flex flex-nowrap w-full': props.scrollable
+            })
+        }),
+        row: ({ context }) => ({
+            className: classNames(
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80' : 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+                {
+                    'hover:bg-gray-300/20 hover:text-gray-600 dark:hover:bg-gray-950': context.selectable && !context.selected, // Hover
+                    'flex flex-nowrap w-full': context.scrollable
+                }
+            )
+        }),
+        column: {
+            headercell: ({ context }) => ({
+                className: classNames(
+                    'text-left border-gray-300 border font-bold',
+                    'transition duration-200 p-4',
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', //Dark Mode
+                    {
+                        'bg-blue-50 text-blue-700': context.sorted,
+                        'bg-slate-50': !context.sorted,
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && !context.frozen,
+                        'sticky z-[1]': context.scrollable && context.frozen,
+                        'border-x-0 border-l-0 border-t-0': !context.showGridlines,
+                        'overflow-hidden relative bg-clip-padding': !context.frozen
+                    }
+                )
+            }),
+            bodycell: ({ context }) => ({
+                className: classNames(
+                    'text-left border-gray-300 border',
+                    'transition duration-200 p-4',
+                    'dark:border-blue-900/40', //Dark Mode
+                    {
+                        'cursor-pointer': context.selectable,
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && !context.frozen,
+                        sticky: context.scrollable && context.frozen,
+                        'border-x-0 border-l-0': !context.showGridlines
+                    }
+                )
+            }),
+            rowtoggler: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex items-center justify-center align-center cursor-pointer select-none overflow-hidden bg-transparent',
+                    'w-8 h-8 border-0 rounded mr-0.5',
+                    {
+                        'text-blue-700': context.selected,
+                        'text-gray-500': !context.selected
+                    },
+                    'dark:text-white/70' //Dark Mode
+                )
+            }),
+            sorticon: ({ context }) => ({
+                className: classNames('ml-2', {
+                    'text-blue-700 dark:text-white/80': context.sorted,
+                    'text-slate-700 dark:text-white/70': !context.sorted
+                })
+            }),
+            sortbadge: {
+                className: classNames(
+                    'h-[1.143rem] min-w-[1.143rem] leading-[1.143rem] text-blue-700 bg-blue-50 ml-2 rounded-[50%]',
+                    'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
+                )
+            },
+            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            checkboxwrapper: {
+                className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2')
+            },
+            checkbox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    {
+                        'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked,
+                        'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked
+                    },
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled
+                    }
+                )
+            }),
+            checkboxicon: ({ context }) => ({
+                className: classNames('w-4 h-4 transition-all duration-200 text-base dark:text-gray-900', {
+                    'text-white': context.checked
+                })
+            })
+        },
+        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+    }
+}
+        `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState, useEffect } from 'react';
+import { TreeTable } from 'primereact/treetable';
+import { Column } from 'primereact/column';
+import { NodeService } from './service/NodeService';
+
+export default function UnstyledDemo() {
+    const [nodes, setNodes] = useState([]);
+
+    useEffect(() => {
+        NodeService.getTreeTableNodes().then(data => {
+            setNodes(data);
+        });
+    }, []);
+
+    return (
+        <div className="card">
+            <TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
+                <Column field="name" header="Name" expander sortable></Column>
+                <Column field="size" header="Size" sortable></Column>
+                <Column field="type" header="Type" sortable></Column>
+            </TreeTable>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded service={['NodeService']} />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/accessibilitydoc.js b/components/doc/tristatecheckbox/accessibilitydoc.js
new file mode 100644
index 0000000000..779aebf8f2
--- /dev/null
+++ b/components/doc/tristatecheckbox/accessibilitydoc.js
@@ -0,0 +1,59 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function AccessibilityDoc() {
+    const code = {
+        basic: `
+<span id="chkbox1">Remember Me</span>
+<TriStateCheckbox aria-labelledby="chkbox1" />
+
+<TriStateCheckbox aria-label="Remember Me" />
+    `
+    };
+
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with
+                <i>aria-live</i> attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i>
+                property from the <Link href="http://github.com/locale">locale</Link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
+            </p>
+
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>tab</i>
+                            </td>
+                            <td>Moves focus to the checkbox.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Toggles between the values.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Toggles between the values.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/tristatecheckbox/basicdoc.js b/components/doc/tristatecheckbox/basicdoc.js
new file mode 100644
index 0000000000..3c66f8780f
--- /dev/null
+++ b/components/doc/tristatecheckbox/basicdoc.js
@@ -0,0 +1,59 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
+            <label>{String(value)}</label>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+
+export default function BasicDemo() {
+    const [value, setValue] = useState<boolean | undefined | null>(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox value={value} onChange={(e : TriStateCheckboxChangeEvent) => setValue(e.value)} />
+            <label>{String(value)}</label>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    TriStateCheckbox is used as a controlled input with <i>value</i> and <i>onChange</i> properties.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
+                <label>{String(value)}</label>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/disableddoc.js b/components/doc/tristatecheckbox/disableddoc.js
new file mode 100644
index 0000000000..be837b757e
--- /dev/null
+++ b/components/doc/tristatecheckbox/disableddoc.js
@@ -0,0 +1,47 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+
+export function DisabledDoc(props) {
+    const code = {
+        basic: `
+<TriStateCheckbox disabled />
+        `,
+        javascript: `
+import React from "react";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <TriStateCheckbox disabled />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React from "react";
+
+export default function DisabledDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <TriStateCheckbox disabled />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    When <i>disabled</i> is present, the element cannot be edited and focused.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <TriStateCheckbox disabled />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/filleddoc.js b/components/doc/tristatecheckbox/filleddoc.js
new file mode 100644
index 0000000000..bf49280809
--- /dev/null
+++ b/components/doc/tristatecheckbox/filleddoc.js
@@ -0,0 +1,56 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+
+export default function FilledDemo() {
+    const [value, setValue] = useState<boolean | undefined | null>(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox variant="filled" value={value} onChange={(e : TriStateCheckboxChangeEvent) => setValue(e.value)} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/importdoc.js b/components/doc/tristatecheckbox/importdoc.js
new file mode 100644
index 0000000000..b103a07d37
--- /dev/null
+++ b/components/doc/tristatecheckbox/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/invaliddoc.js b/components/doc/tristatecheckbox/invaliddoc.js
new file mode 100644
index 0000000000..424d271523
--- /dev/null
+++ b/components/doc/tristatecheckbox/invaliddoc.js
@@ -0,0 +1,59 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { TriStateCheckbox } from '@/components/lib/tristatecheckbox/TriStateCheckbox';
+import { useState } from 'react';
+
+export function InvalidDoc(props) {
+    const [value, setValue] = useState(null);
+
+    const code = {
+        basic: `
+<TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
+            <label>{String(value)}</label>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { TriStateCheckbox, TriStateCheckboxChangeEvent } from 'primereact/tristatecheckbox';
+
+export default function InvalidDemo() {
+    const [value, setValue] = useState<boolean | undefined | null>(null);
+
+    return (
+        <div className="card flex flex-column align-items-center gap-3">
+            <TriStateCheckbox invalid value={value} onChange={(e : TriStateCheckboxChangeEvent) => setValue(e.value)} />
+            <label>{String(value)}</label>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-column align-items-center gap-3">
+                <TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
+                <label>{String(value)}</label>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/pt/wireframe.js b/components/doc/tristatecheckbox/pt/wireframe.js
new file mode 100644
index 0000000000..50d2a1a01f
--- /dev/null
+++ b/components/doc/tristatecheckbox/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/tristatecheckbox.jpg" alt="tristatecheckbox" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/tristatecheckbox/styledoc.js b/components/doc/tristatecheckbox/styledoc.js
new file mode 100644
index 0000000000..5824773b82
--- /dev/null
+++ b/components/doc/tristatecheckbox/styledoc.js
@@ -0,0 +1,42 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tristatechkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/theming/styleddoc.js b/components/doc/tristatecheckbox/theming/styleddoc.js
new file mode 100644
index 0000000000..3c7658a068
--- /dev/null
+++ b/components/doc/tristatecheckbox/theming/styleddoc.js
@@ -0,0 +1,39 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-chkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-tristatechkbox</td>
+                            <td>Container element</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-box</td>
+                            <td>Container of icon.</td>
+                        </tr>
+                        <tr>
+                            <td>p-chkbox-icon</td>
+                            <td>Icon element.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/tristatecheckbox/theming/tailwinddoc.js b/components/doc/tristatecheckbox/theming/tailwinddoc.js
new file mode 100644
index 0000000000..eb8de34d98
--- /dev/null
+++ b/components/doc/tristatecheckbox/theming/tailwinddoc.js
@@ -0,0 +1,67 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function TailwindDoc(props) {
+    const code = {
+        basic: `
+const Tailwind = {
+    tristatecheckbox: {
+        root: {
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+        },
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
+                {
+                    'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.value || !props.value,
+                    'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value == null
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
+    }
+}
+    `
+    };
+
+    const code2 = {
+        javascript: `
+import React, { useState } from "react";
+import { TriStateCheckbox } from 'primereact/tristatecheckbox';
+
+export default function UnstyledDemo() {
+    const [value, setValue] = useState(null);
+
+    return (
+        <div className="card flex flex-col items-center gap-3">
+            <TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
+            <label>{String(value)}</label>
+        </div>
+    );
+}
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
+                    <Link href="http://github.com/tailwind">Tailwind Customization</Link> section for an example.
+                </p>
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+                <p>A playground sample with the pre-built Tailwind theme.</p>
+                <DocSectionCode code={code2} embedded />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/unstyled/architecturedoc.js b/components/doc/unstyled/architecturedoc.js
new file mode 100644
index 0000000000..1010e0b9bc
--- /dev/null
+++ b/components/doc/unstyled/architecturedoc.js
@@ -0,0 +1,20 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function ArchitectureDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when <i>unstyled</i> setting is enabled components do not include any CSS selectors while core functionality is
+                    still available. For example, in the default styled mode, the dropdown component adds <i>.p-dropdown</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added
+                    to the root element and the CSS is not included in the page.
+                </p>
+                <p>
+                    The second part is custom styling as components are displayed as transparent without their styles. <Link href="http://github.com/passthrough">Pass Through Props</Link> feature is the key of since it also supports a global configuration to create
+                    themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom <i>pt</i> configuration.
+                </p>
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/unstyled/exampledoc.js b/components/doc/unstyled/exampledoc.js
new file mode 100644
index 0000000000..59bd4b1051
--- /dev/null
+++ b/components/doc/unstyled/exampledoc.js
@@ -0,0 +1,78 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+import Link from 'next/link';
+
+export function ExampleDoc(props) {
+    const code = {
+        basic: `
+<Button label="Submit" icon="pi pi-check" unstyled
+    pt={{
+        root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+        label: { className: 'text-white font-bold text-xl' },
+        icon: 'text-white text-2xl' // OR { className: 'text-white text-2xl' }
+    }}
+/>
+        `,
+        javascript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function ExampleDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Submit" icon="pi pi-check" unstyled
+                pt={{
+                    root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                    label: { className: 'text-white font-bold text-xl' },
+                    icon: 'text-white text-2xl' // OR { className: 'text-white text-2xl' }
+                }}
+            />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React from 'react'; 
+import { Button } from 'primereact/button';
+
+export default function ExampleDemo() {
+    return (
+        <div className="card flex justify-content-center">
+            <Button label="Submit" icon="pi pi-check" unstyled
+                pt={{
+                    root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                    label: { className: 'text-white font-bold text-xl' },
+                    icon: 'text-white text-2xl' // OR { className: 'text-white text-2xl' }
+                }}
+            />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Here is a sample that provides a style using PrimeFlex CSS library. Before beginning, head over to the pass through section <Link href="http://github.com/button">button</Link> documentation to learn more about the components internals. We'll be
+                    using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Button
+                    label="Submit"
+                    icon="pi pi-check"
+                    unstyled
+                    pt={{
+                        root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                        label: { className: 'text-white font-bold text-xl' },
+                        icon: 'text-white text-2xl'
+                    }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/unstyled/setupdoc.js b/components/doc/unstyled/setupdoc.js
new file mode 100644
index 0000000000..806d307550
--- /dev/null
+++ b/components/doc/unstyled/setupdoc.js
@@ -0,0 +1,40 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Button } from '@/components/lib/button/Button';
+
+export function SetupDoc(props) {
+    const code1 = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
+...
+return(
+    <PrimeReactProvider value={{ unstyled: true }}>
+        <App />
+    </PrimeReactProvider>
+)
+`
+    };
+    const code2 = {
+        basic: `
+<Button label="Check" icon="pi pi-check" unstyled></Button>
+`
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeReact installation.
+                </p>
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+                <p>
+                    Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.
+                </p>
+                <div className="card flex justify-content-center">
+                    <Button label="Check" icon="pi pi-check" unstyled />
+                </div>
+                <DocSectionCode code={code2} import hideToggleCode hideStackBlitz />
+            </DocSectionText>
+        </>
+    );
+}
diff --git a/components/doc/unstyled/themedoc.js b/components/doc/unstyled/themedoc.js
new file mode 100644
index 0000000000..23ba3ec48d
--- /dev/null
+++ b/components/doc/unstyled/themedoc.js
@@ -0,0 +1,44 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ThemeDoc(props) {
+    const code = {
+        basic: `
+import { PrimeReactProvider } from "primereact/api";
+...
+return(
+    <PrimeReactProvider
+        value={{
+            pt: {
+                button: {
+                    root: { className: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
+                    label: 'text-white font-bold text-xl', // OR { className: 'text-white font-bold text-xl' }
+                    icon: 'text-white text-2xl'
+                },
+                panel: {
+                    header: 'bg-primary border-primary',
+                    content: 'border-primary text-lg text-primary-700',
+                    title: 'bg-primary text-xl',
+                    toggler: 'bg-primary hover:bg-primary-reverse'
+                }
+            }
+        }}
+    >
+        <App />
+    </PrimeReactProvider>
+);
+    `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    An unstyled theme is basically a global <i>pt</i> configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the <i>pt</i> props of a component
+                    and the global setting is merged with component having higher precedencee.
+                </p>
+            </DocSectionText>
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/accessibilitydoc.js b/components/doc/virtualscroller/accessibilitydoc.js
new file mode 100644
index 0000000000..729ea9eb44
--- /dev/null
+++ b/components/doc/virtualscroller/accessibilitydoc.js
@@ -0,0 +1,16 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function AccessibilityDoc() {
+    return (
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. List element can be also
+                customized for accessibility using <i>listProps</i> property.
+            </p>
+
+            <h4>Keyboard Support</h4>
+            <p>Component does not include any built-in interactive elements.</p>
+        </DocSectionText>
+    );
+}
diff --git a/components/doc/virtualscroller/basicdoc.js b/components/doc/virtualscroller/basicdoc.js
new file mode 100644
index 0000000000..a09032be10
--- /dev/null
+++ b/components/doc/virtualscroller/basicdoc.js
@@ -0,0 +1,97 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { classNames } from '@/components/lib/utils/Utils';
+import { VirtualScroller } from '@/components/lib/virtualscroller/VirtualScroller';
+import { useState } from 'react';
+
+export function BasicDoc(props) {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => `Item #${i}`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} 
+    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function BasicDemo() {
+    const [items] = useState<string[]>(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item: string, options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    VirtualScroller requires <i>items</i> as the data to display, <i>itemSize</i> for the dimensions of an item and <i>itemTemplate</i> to define the content per item. Size of the viewport is configured using
+                    <i>scrollWidth</i>, <i>scrollHeight</i> properties directly or with CSS <i>width</i> and <i>height</i> styles.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/delaydoc.js b/components/doc/virtualscroller/delaydoc.js
new file mode 100644
index 0000000000..4b3d23784c
--- /dev/null
+++ b/components/doc/virtualscroller/delaydoc.js
@@ -0,0 +1,130 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { classNames } from '@/components/lib/utils/Utils';
+import { VirtualScroller } from '@/components/lib/virtualscroller/VirtualScroller';
+import { useState } from 'react';
+
+export function DelayDoc(props) {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => `Item #${i}`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={150} />
+<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={500} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function DelayDemo() {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex flex-wrap justify-content-center gap-5">
+            <div>
+                <span className="font-bold block mb-2">No Delay</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+            <div>
+                <span className="font-bold block mb-2">150ms</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={150} />
+            </div>
+            <div>
+                <span className="font-bold block mb-2">500ms</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={500} />
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function DelayDemo() {
+    const [items] = useState<string[]>(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item: string, options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex flex-wrap justify-content-center gap-5">
+            <div>
+                <span className="font-bold block mb-2">No Delay</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+            <div>
+                <span className="font-bold block mb-2">150ms</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={150} />
+            </div>
+            <div>
+                <span className="font-bold block mb-2">500ms</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={500} />
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    The <i>delay</i> property adds a threshold to wait in milliseconds during scrolling for render optimization.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-5">
+                <div>
+                    <span className="font-bold block mb-2">No Delay</span>
+                    <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+                </div>
+                <div>
+                    <span className="font-bold block mb-2">150ms</span>
+                    <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={150} />
+                </div>
+                <div>
+                    <span className="font-bold block mb-2">500ms</span>
+                    <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} delay={500} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/griddoc.js b/components/doc/virtualscroller/griddoc.js
new file mode 100644
index 0000000000..4a44816d5b
--- /dev/null
+++ b/components/doc/virtualscroller/griddoc.js
@@ -0,0 +1,114 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { classNames } from '@/components/lib/utils/Utils';
+import { VirtualScroller } from '@/components/lib/virtualscroller/VirtualScroller';
+import { useState } from 'react';
+
+export function GridDoc(props) {
+    const [items] = useState(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => `Item #${i}_${j}`)));
+
+    const itemTemplate = (items, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize[0] + 'px' }}>
+                {items.map((item, i) => {
+                    return (
+                        <div key={i} style={{ width: options.props.itemSize[1] + 'px' }}>
+                            {item}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<VirtualScroller items={items} itemSize={[50, 100]} itemTemplate={itemTemplate} orientation="both" 
+    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function GridDemo() {
+    const [items] = useState(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
+
+    const itemTemplate = (items, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize[0] + 'px' }}>
+                {items.map((item, i) => {
+                    return (
+                        <div key={i} style={{ width: options.props.itemSize[1] + 'px' }}>
+                            {item}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={items} itemSize={[50, 100]} itemTemplate={itemTemplate} orientation="both" className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function GridDemo() {
+    const [items] = useState<string[][]>(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
+
+    const itemTemplate = (items: string[], options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize[0] + 'px' }}>
+                {items.map((item, i) => {
+                    return (
+                        <div key={i} style={{ width: options.props.itemSize[1] + 'px' }}>
+                            {item}
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={items} itemSize={[50, 100]} itemTemplate={itemTemplate} orientation="both" className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Scrolling can be enabled vertically and horizontally when <i>orientation</i> is set as <i>both</i>. In this mode, <i>itemSize</i> should be an array where first value is the height of an item and second is the width.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <VirtualScroller items={items} itemSize={[50, 100]} itemTemplate={itemTemplate} orientation="both" className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/horizontaldoc.js b/components/doc/virtualscroller/horizontaldoc.js
new file mode 100644
index 0000000000..e1fd1c48f4
--- /dev/null
+++ b/components/doc/virtualscroller/horizontaldoc.js
@@ -0,0 +1,96 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { classNames } from '@/components/lib/utils/Utils';
+import { VirtualScroller } from '@/components/lib/virtualscroller/VirtualScroller';
+import { useState } from 'react';
+
+export function HorizontalDoc(props) {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => `Item #${i}`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ width: options.props.itemSize + 'px', writingMode: 'vertical-lr' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} orientation="horizontal"
+    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function HorizontalDemo() {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ width: options.props.itemSize + 'px', writingMode: 'vertical-lr' }}>
+                {item}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} orientation="horizontal" className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { classNames } from 'primereact/utils';
+
+export default function HorizontalDemo() {
+    const [items] = useState<string[]>(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item: string, options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ width: options.props.itemSize + 'px', writingMode: 'vertical-lr' }}>
+                {item}
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} orientation="horizontal" className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Setting <i>orientation</i> to <i>horizontal</i> enables scrolling horizontally. In this case, the <i>itemSize</i> should refer to the width of an item.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} orientation="horizontal" className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/importdoc.js b/components/doc/virtualscroller/importdoc.js
new file mode 100644
index 0000000000..1ab82d3d7a
--- /dev/null
+++ b/components/doc/virtualscroller/importdoc.js
@@ -0,0 +1,17 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { VirtualScroller } from 'primereact/virtualscroller';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props} />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/lazydoc.js b/components/doc/virtualscroller/lazydoc.js
new file mode 100644
index 0000000000..d318fb24c4
--- /dev/null
+++ b/components/doc/virtualscroller/lazydoc.js
@@ -0,0 +1,237 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+import { classNames } from '@/components/lib/utils/Utils';
+import { VirtualScroller } from '@/components/lib/virtualscroller/VirtualScroller';
+import { useEffect, useRef, useState } from 'react';
+
+export function LazyDoc(props) {
+    const [lazyItems, setLazyItems] = useState([]);
+    const [lazyLoading, setLazyLoading] = useState(true);
+    const loadLazyTimeout = useRef(null);
+
+    useEffect(() => {
+        setLazyItems(Array.from({ length: 100000 }));
+        setLazyLoading(false);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const onLazyLoad = (event) => {
+        setLazyLoading(true);
+
+        if (loadLazyTimeout.current) {
+            clearTimeout(loadLazyTimeout.current);
+        }
+
+        //imitate delay of a backend call
+        loadLazyTimeout.current = setTimeout(
+            () => {
+                const { first, last } = event;
+                const _lazyItems = [...lazyItems];
+
+                for (let i = first; i < last; i++) {
+                    _lazyItems[i] = `Item #${i}`;
+                }
+
+                setLazyItems(_lazyItems);
+                setLazyLoading(false);
+            },
+            Math.random() * 1000 + 250
+        );
+    };
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const loadingTemplate = (options) => {
+        const className = classNames('flex align-items-center p-2', {
+            odd: options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: '50px' }}>
+                <Skeleton width={options.even ? '60%' : '50%'} height="1.3rem" />
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<VirtualScroller items={lazyItems} itemSize={50} itemTemplate={itemTemplate} lazy onLazyLoad={onLazyLoad} 
+    loadingTemplate={loadingTemplate} showLoader loading={lazyLoading} 
+    className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        `,
+        javascript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+
+export default function LazyDemo() {
+    const [lazyItems, setLazyItems] = useState([]);
+    const [lazyLoading, setLazyLoading] = useState(true);
+    const loadLazyTimeout = useRef(null);
+
+    useEffect(() => {
+        setLazyItems(Array.from({ length: 100000 }));
+        setLazyLoading(false);
+    }, []);
+
+    const onLazyLoad = (event) => {
+        setLazyLoading(true);
+
+        if (loadLazyTimeout.current) {
+            clearTimeout(loadLazyTimeout.current);
+        }
+
+        //imitate delay of a backend call
+        loadLazyTimeout.current = setTimeout(() => {
+            const { first, last } = event;
+            const _lazyItems = [...lazyItems];
+
+            for (let i = first; i < last; i++) {
+                _lazyItems[i] = \`Item #\${i}\`;
+            }
+
+            setLazyItems(_lazyItems);
+            setLazyLoading(false);
+        }, Math.random() * 1000 + 250);
+    };
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const loadingTemplate = (options) => {
+        const className = classNames('flex align-items-center p-2', {
+            odd: options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: '50px' }}>
+                <Skeleton width={options.even ? '60%' : '50%'} height="1.3rem" />
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={lazyItems} itemSize={50} itemTemplate={itemTemplate} lazy onLazyLoad={onLazyLoad} loadingTemplate={loadingTemplate}
+                showLoader loading={lazyLoading} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState, useEffect, useRef } from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions, VirtualScrollerLazyEvent } from 'primereact/virtualscroller';
+import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+
+export default function LazyDemo() {
+    const [lazyItems, setLazyItems] = useState<string[]>([]);
+    const [lazyLoading, setLazyLoading] = useState<boolean>(true);
+    const loadLazyTimeout = useRef(null);
+
+    useEffect(() => {
+        setLazyItems(Array.from({ length: 100000 }));
+        setLazyLoading(false);
+    }, []);
+
+    const onLazyLoad = (event: VirtualScrollerLazyEvent) => {
+        setLazyLoading(true);
+
+        if (loadLazyTimeout.current) {
+            clearTimeout(loadLazyTimeout.current);
+        }
+
+        //imitate delay of a backend call
+        loadLazyTimeout.current = setTimeout(() => {
+            const { first, last } = event;
+            const _lazyItems = [...lazyItems];
+
+            for (let i = first; i < last; i++) {
+                _lazyItems[i] = \`Item #\${i}\`;
+            }
+
+            setLazyItems(_lazyItems);
+            setLazyLoading(false);
+        }, Math.random() * 1000 + 250);
+    };
+
+    const itemTemplate = (item: string, options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const loadingTemplate = (options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            odd: options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: '50px' }}>
+                <Skeleton width={options.even ? '60%' : '50%'} height="1.3rem" />
+            </div>
+        );
+    };
+
+    return (
+        <div className="card flex justify-content-center">
+            <VirtualScroller items={lazyItems} itemSize={50} itemTemplate={itemTemplate} lazy onLazyLoad={onLazyLoad} loadingTemplate={loadingTemplate}
+                showLoader loading={lazyLoading} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded on demand. To implement lazy loading, enable the <i>lazy</i>
+                    property and implement <i>onLazyLoad</i> callback to return data.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <VirtualScroller
+                    items={lazyItems}
+                    itemSize={50}
+                    itemTemplate={itemTemplate}
+                    lazy
+                    onLazyLoad={onLazyLoad}
+                    loadingTemplate={loadingTemplate}
+                    showLoader
+                    loading={lazyLoading}
+                    className="border-1 surface-border border-round"
+                    style={{ width: '200px', height: '200px' }}
+                />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/loadingdoc.js b/components/doc/virtualscroller/loadingdoc.js
new file mode 100644
index 0000000000..6e4795cb4d
--- /dev/null
+++ b/components/doc/virtualscroller/loadingdoc.js
@@ -0,0 +1,157 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Skeleton } from '@/components/lib/skeleton/Skeleton';
+import { classNames } from '@/components/lib/utils/Utils';
+import { VirtualScroller } from '@/components/lib/virtualscroller/VirtualScroller';
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function LoadingDoc(props) {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => `Item #${i}`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const loadingTemplate = (options) => {
+        const className = classNames('flex align-items-center p-2', {
+            odd: options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: '50px' }}>
+                <Skeleton width={options.even ? '60%' : '50%'} height="1.3rem" />
+            </div>
+        );
+    };
+
+    const code = {
+        basic: `
+<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+<VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+        `,
+        javascript: `
+import React, { useState } from 'react';
+import { VirtualScroller } from 'primereact/virtualscroller';
+import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+
+export default function LoadingDemo() {
+    const [items] = useState(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item, options) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const loadingTemplate = (options) => {
+        const className = classNames('flex align-items-center p-2', {
+            odd: options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: '50px' }}>
+                <Skeleton width={options.even ? '60%' : '50%'} height="1.3rem" />
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex flex-wrap justify-content-center gap-5">
+            <div>
+                <span className="font-bold block mb-2">Modal</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+            <div>
+                <span className="font-bold block mb-2">Skeleton</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+        </div>
+    );
+}
+        `,
+        typescript: `
+import React, { useState } from 'react';
+import { VirtualScroller, VirtualScrollerTemplateOptions } from 'primereact/virtualscroller';
+import { Skeleton } from 'primereact/skeleton';
+import { classNames } from 'primereact/utils';
+
+export default function LoadingDemo() {
+    const [items] = useState<string[]>(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+
+    const itemTemplate = (item: string, options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            'surface-hover': options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: options.props.itemSize + 'px' }}>
+                {item}
+            </div>
+        );
+    };
+
+    const loadingTemplate = (options: VirtualScrollerTemplateOptions) => {
+        const className = classNames('flex align-items-center p-2', {
+            odd: options.odd
+        });
+
+        return (
+            <div className={className} style={{ height: '50px' }}>
+                <Skeleton width={options.even ? '60%' : '50%'} height="1.3rem" />
+            </div>
+        );
+    };
+
+    return ( 
+        <div className="card flex flex-wrap justify-content-center gap-5">
+            <div>
+                <span className="font-bold block mb-2">Modal</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+            <div>
+                <span className="font-bold block mb-2">Skeleton</span>
+                <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+            </div>
+        </div>
+    );
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Busy state is enabled by adding <i>showLoader</i> property which blocks the UI with a modal by default. Alternatively, <i>loadingTemplate</i> can be used to customize items e.g. with <Link href="http://github.com/skeleton">Skeleton</Link>.
+                </p>
+            </DocSectionText>
+            <div className="card flex flex-wrap justify-content-center gap-5">
+                <div>
+                    <span className="font-bold block mb-2">Modal</span>
+                    <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+                </div>
+                <div>
+                    <span className="font-bold block mb-2">Skeleton</span>
+                    <VirtualScroller items={items} itemSize={50} itemTemplate={itemTemplate} showLoader delay={250} loadingTemplate={loadingTemplate} className="border-1 surface-border border-round" style={{ width: '200px', height: '200px' }} />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/pt/wireframe.js b/components/doc/virtualscroller/pt/wireframe.js
new file mode 100644
index 0000000000..e73dfbc191
--- /dev/null
+++ b/components/doc/virtualscroller/pt/wireframe.js
@@ -0,0 +1,12 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export const Wireframe = (props) => {
+    return (
+        <>
+            <DocSectionText {...props} />
+            <div>
+                <img className="w-full" src="https://primefaces.org/cdn/primereact/images/pt/virtualscroller.jpg" alt="virtualscroller" />
+            </div>
+        </>
+    );
+};
diff --git a/components/doc/virtualscroller/styledoc.js b/components/doc/virtualscroller/styledoc.js
new file mode 100644
index 0000000000..66cb9467d9
--- /dev/null
+++ b/components/doc/virtualscroller/styledoc.js
@@ -0,0 +1,46 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import Link from 'next/link';
+
+export function StyleDoc() {
+    return (
+        <>
+            <DocSectionText id="style" label="Style">
+                <p>
+                    Following is the list of structural style classes, for theming classes visit <Link href="http://github.com/theming">theming</Link> page.
+                </p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-virtualscroller</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-content</td>
+                            <td>Content element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-loader</td>
+                            <td>Loader element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-both</td>
+                            <td>Container element when horizontal and vertical scrolling enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-horizontal</td>
+                            <td>Container element when horizontal orientation.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/doc/virtualscroller/theming/styleddoc.js b/components/doc/virtualscroller/theming/styleddoc.js
new file mode 100644
index 0000000000..d4dce460b0
--- /dev/null
+++ b/components/doc/virtualscroller/theming/styleddoc.js
@@ -0,0 +1,43 @@
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+
+export function StyledDoc(props) {
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>List of class names used in the styled mode.</p>
+            </DocSectionText>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Element</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>p-virtualscroller</td>
+                            <td>Container element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-content</td>
+                            <td>Content element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-loader</td>
+                            <td>Loader element.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-both</td>
+                            <td>Container element when horizontal and vertical scrolling enabled.</td>
+                        </tr>
+                        <tr>
+                            <td>p-virtualscroller-horizontal</td>
+                            <td>Container element when horizontal orientation.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </>
+    );
+}
diff --git a/components/landing/blocksection.js b/components/landing/blocksection.js
new file mode 100644
index 0000000000..10fffe83ad
--- /dev/null
+++ b/components/landing/blocksection.js
@@ -0,0 +1,392 @@
+import { Tag } from '@/components/lib/tag/Tag';
+import { classNames } from '@/components/lib/utils/ClassNames';
+import { useEffect, useState } from 'react';
+
+const BlockSection = () => {
+    const [animation, setAnimation] = useState(false);
+
+    useEffect(() => {
+        setAnimation(true);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <section id="blocks-section" className="landing-blocks pt-8 overflow-hidden">
+            <div className="section-header" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
+                PrimeBlocks
+                <Tag value="Coming Soon" severity="warning"></Tag>
+            </div>
+            <p className="section-detail">490+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
+            <div className="flex justify-content-center mt-4">
+                <a href="https://primeblocks.org/" className="font-semibold p-3 border-round flex align-items-center linkbox active z-2">
+                    <span>Explore All</span>
+                    <i className="pi pi-arrow-right ml-2" />
+                </a>
+            </div>
+            <section className={classNames('prime-blocks flex justify-content-center align-items-center flex-column z-1', { 'blocks-animation': animation })}>
+                <div className="flex">
+                    <div className="prime-block flex align-self-stretch p-1">
+                        <div className="block-sidebar w-1 p-3">
+                            <div className="logo">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            </div>
+                            <div className="sidebar-menu mt-5">
+                                <div className="bar w-8 my-3" />
+                                <div className="bar w-9 my-3" />
+                                <div className="bar w-7 my-3" />
+                                <div className="bar w-6 my-3" />
+                                <div className="bar w-9 my-3" />
+                            </div>
+                        </div>
+                        <div className="block-content flex-1 p-4 flex flex-column">
+                            <div className="bar w-1" />
+                            <div className="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
+                                <div className="flex justify-content-between">
+                                    <div className="block-item w-6rem">
+                                        <div className="flex justify-content-between">
+                                            <div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
+                                            </div>
+                                            <div>
+                                                <div className="flex-1">
+                                                    <div className="circle circle-highlight" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-item block-item-active animation-1 mx-3 w-6rem">
+                                        <div className="flex justify-content-between">
+                                            <div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
+                                            </div>
+                                            <div>
+                                                <div className="circle" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-item w-6rem">
+                                        <div className="flex justify-content-between">
+                                            <div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
+                                            </div>
+                                            <div>
+                                                <div className="circle circle-highligh" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="flex justify-content-between mt-3">
+                                    <div className="block-item w-6rem">
+                                        <div className="flex justify-content-between">
+                                            <div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
+                                            </div>
+                                            <div>
+                                                <div className="circle circle-highligh" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-item mx-3 w-6rem">
+                                        <div className="flex justify-content-between">
+                                            <div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
+                                            </div>
+                                            <div>
+                                                <div className="circle circle-highligh" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-item w-6rem">
+                                        <div className="flex justify-content-between">
+                                            <div>
+                                                <div className="bar w-2rem mt-2" />
+                                                <div className="bar w-4rem mt-3" />
+                                            </div>
+                                            <div>
+                                                <div className="circle circle-highligh" />
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex -ml-8">
+                    <div className="prime-block p-1 flex align-self-stretch flex-column">
+                        <div className="block-header py-3 px-4 flex justify-content-between align-items-center">
+                            <div className="logo pr-5">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            </div>
+                            <div className="flex-auto sidebar-menu flex">
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                            </div>
+                            <div className="circle circle-highlight" />
+                        </div>
+                        <div className="block-content flex-1 p-4 flex flex-column">
+                            <div className="bar w-1" />
+                            <div className="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
+                                <div className="flex justify-content-between">
+                                    <div className="block-item w-4rem">
+                                        <div className="bar w-2rem" />
+                                        <span className="text my-2">26 %</span>
+                                        <div className="box box-orange" />
+                                    </div>
+                                    <div className="block-item block-item-active animation-2 ml-3 mr-3 w-4rem">
+                                        <div className="bar w-1rem" />
+                                        <span className="text my-2">6 %</span>
+                                        <div className="box box-pink" />
+                                    </div>
+                                    <div className="block-item mr-3 w-4rem">
+                                        <div className="bar w-4rem" />
+                                        <span className="text my-2">62 %</span>
+                                        <div className="box box-green" />
+                                    </div>
+                                    <div className="block-item w-4rem">
+                                        <div className="bar w-2rem" />
+                                        <span className="text my-2">39 %</span>
+                                        <div className="box box-blue" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="prime-block flex align-self-stretch p-1">
+                        <div className="block-sidebar p-3">
+                            <div className="logo">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-2.svg" alt="block logo" />
+                            </div>
+                            <div className="sidebar-menu mt-5">
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
+                            </div>
+                        </div>
+                        <div className="block-sidebar-list px-4">
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-1rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                        </div>
+                        <div className="block-content flex-1 my-5 mx-4 flex flex-column">
+                            <div className="block-main h-full flex justify-content-center align-items-center flex-column px-2">
+                                <div className="flex justify-content-between">
+                                    <div className="block-item w-3 flex justify-content-between flex-column">
+                                        <div className="bar w-full" />
+                                        <div className="flex align-items-center mt-3">
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
+                                        </div>
+                                        <div className="bar bar-button w-4rem mt-4" />
+                                    </div>
+                                    <div className="block-item block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
+                                        <div className="bar w-full" />
+                                        <div className="flex align-items-center mt-3">
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
+                                        </div>
+                                        <div className="flex align-items-center mt-3">
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-3rem" />
+                                        </div>
+                                        <div className="bar bar-button w-4rem mt-4" />
+                                    </div>
+                                    <div className="block-item w-3 flex justify-content-between flex-column">
+                                        <div className="bar w-full" />
+                                        <div className="flex align-items-center mt-3">
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
+                                        </div>
+                                        <div className="flex align-items-center mt-3">
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
+                                        </div>
+                                        <div className="flex align-items-center mt-3">
+                                            <div className="circle circle-small circle-highlight mr-2" />
+                                            <div className="bar w-2rem" />
+                                        </div>
+                                        <div className="bar bar-button w-4rem mt-4" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex -mr-8">
+                    <div className="prime-block flex align-self-stretch p-1">
+                        <div className="block-sidebar w-1 p-3">
+                            <div className="logo">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            </div>
+                            <div className="sidebar-menu mt-5">
+                                <div className="bar w-8 my-3" />
+                                <div className="bar w-9 my-3" />
+                                <div className="bar w-7 my-3" />
+                                <div className="bar w-6 my-3" />
+                                <div className="bar w-9 my-3" />
+                            </div>
+                        </div>
+                        <div className="block-content flex-1 p-4 flex flex-column">
+                            <div className="block-main h-full flex justify-content-center align-items-center flex-column">
+                                <div className="bar w-3 mb-3" />
+                                <div className="bar w-4 mb-5" />
+                                <div className="flex justify-content-between">
+                                    <div className="block-item w-6rem p-0">
+                                        <div className="block-image" />
+                                        <div className="p-2">
+                                            <div>
+                                                <div className="bar w-4rem my-2" />
+                                                <div className="bar w-2rem mb-2" />
+                                            </div>
+                                            <div>
+                                                <div className="flex-1">
+                                                    <div className="circle circle-highlight circle-medium" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-item block-item-active mx-3 animation-1 w-6rem p-0">
+                                        <div className="block-image" />
+                                        <div className="p-2">
+                                            <div>
+                                                <div className="bar w-4rem my-2" />
+                                                <div className="bar w-2rem mb-2" />
+                                            </div>
+                                            <div>
+                                                <div className="flex-1">
+                                                    <div className="circle circle-highlight circle-medium" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="block-item w-6rem p-0">
+                                        <div className="block-image" />
+                                        <div className="p-2">
+                                            <div>
+                                                <div className="bar w-4rem my-2" />
+                                                <div className="bar w-2rem mb-2" />
+                                            </div>
+                                            <div>
+                                                <div className="flex-1">
+                                                    <div className="circle circle-highlight circle-medium" />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="prime-block flex align-self-stretch p-1">
+                        <div className="block-sidebar p-3">
+                            <div className="logo">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-2.svg" alt="block logo" />
+                            </div>
+                            <div className="sidebar-menu mt-5">
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
+                                <div className="circle my-3" />
+                            </div>
+                        </div>
+                        <div className="block-sidebar-list px-4">
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                            <div className="bar w-1rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-3rem my-3" />
+                            <div className="bar w-2rem my-3" />
+                        </div>
+                        <div className="block-content flex-1 my-5 mx-4 flex flex-column">
+                            <div className="block-main h-full flex justify-content-center align-items-center flex-column px-2">
+                                <div className="flex justify-content-between">
+                                    <div className="block-item block-item-table block-item-active animation-1 flex">
+                                        <div className="bar w-3rem mx-3" />
+                                        <div className="bar w-3rem mx-3" />
+                                        <div className="bar w-3rem mx-3" />
+                                        <div className="bar w-3rem mx-3" />
+                                    </div>
+                                </div>
+                                <div className="block-item block-item-col flex">
+                                    <div className="flex">
+                                        <div className="circle circle-small circle-highlight -mr-1" />
+                                        <div className="bar w-3rem mx-3" />
+                                    </div>
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                </div>
+                                <div className="block-item block-item-col flex">
+                                    <div className="flex">
+                                        <div className="circle circle-small circle-highlight -mr-1" />
+                                        <div className="bar w-3rem mx-3" />
+                                    </div>
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                </div>
+                                <div className="block-item block-item-col flex">
+                                    <div className="flex">
+                                        <div className="circle circle-small circle-highlight -mr-1" />
+                                        <div className="bar w-3rem mx-3" />
+                                    </div>
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                    <div className="bar w-3rem mx-3" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="flex">
+                    <div className="prime-block p-1 flex align-self-stretch flex-column">
+                        <div className="block-header py-3 px-4 flex justify-content-between align-items-center">
+                            <div className="logo pr-5">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/logo-1.svg" alt="block logo" />
+                            </div>
+                            <div className="flex-auto sidebar-menu flex">
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                                <div className="bar w-2rem mx-2" />
+                            </div>
+                            <div className="circle" />
+                        </div>
+                        <div className="block-content flex-1 p-4 flex flex-column">
+                            <div className="block-main h-full flex justify-content-center align-items-center flex-column">
+                                <div className="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
+                                    <div className="-mt-4">
+                                        <img src="https://primefaces.org/cdn/primereact/images/landing/blocks/question.svg" alt="question mark" />
+                                    </div>
+                                    <div className="bar w-2rem mt-2" />
+                                    <div className="bar w-6rem mt-2" />
+                                    <div className="bar w-4rem mt-2" />
+                                    <div className="flex">
+                                        <div className="bar bar-highlight bar-button w-4rem mr-2 mt-4" />
+                                        <div className="bar bar-button w-4rem mr-2 mt-4" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </section>
+    );
+};
+
+export default BlockSection;
diff --git a/components/landing/featuressection.js b/components/landing/featuressection.js
new file mode 100644
index 0000000000..e1c0614223
--- /dev/null
+++ b/components/landing/featuressection.js
@@ -0,0 +1,72 @@
+const FeaturesSection = () => {
+    return (
+        <section className="landing-features py-8">
+            <div className="section-header">Features</div>
+            <p className="section-detail">PrimeReact is the most complete solution for your UI requirements.</p>
+            <div className=" mt-7 px-3 lg:px-8">
+                <div className="features-container">
+                    <div className="grid">
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-components.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">80+ UI Components</div>
+                                <p className="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 80+ impressive React Components.</p>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-theme.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">Styled or Unstyled</div>
+                                <p className="m-0 text-secondary font-medium">Choose from a variety of pre-built themes or implement your design systems with the CSS library of your choice like TailwindCSS.</p>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-community.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">Community</div>
+                                <p className="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-accessibility.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">Accessibility</div>
+                                <p className="m-0 text-secondary font-medium">Compliant with the Web Content Accessibility Guidelines (WCAG 2.0).</p>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-support.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">Enterprise Support</div>
+                                <p className="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-mobile.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">Mobile</div>
+                                <p className="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-productivity.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">Blocks</div>
+                                <p className="m-0 text-secondary font-medium">400+ pre-designed copy paste ready UI blocks to build spectacular apps in no time.</p>
+                            </div>
+                        </div>
+                        <div className="col-12 md:col-6 xl:col-3 flex justify-content-center">
+                            <div className="box p-4 w-full animation-duration-500">
+                                <img src="https://primefaces.org/cdn/primereact/images/landing/features/icon-ts.svg" alt="components icon" className="block mb-3" />
+                                <div className="font-semibold mb-3 text-lg">Typescript</div>
+                                <p className="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default FeaturesSection;
diff --git a/components/landing/footersection.js b/components/landing/footersection.js
new file mode 100644
index 0000000000..3aaabc4482
--- /dev/null
+++ b/components/landing/footersection.js
@@ -0,0 +1,165 @@
+import Link from 'next/link';
+
+const FooterSection = () => {
+    return (
+        <section className="landing-footer pt-8 px-5 lg:px-8">
+            <div className="landing-footer-container">
+                <div className="flex flex-wrap z-1">
+                    <div className="w-6 lg:w-3 flex">
+                        <ul className="list-none p-0 m-0">
+                            <li className="font-bold mb-5">General</li>
+                            <li className="mb-4">
+                                <Link href="http://github.com/installation">
+                                    <a className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</a>
+                                </Link>
+                            </li>
+                            <li className="mb-4">
+                                <a href="https://github.com/primefaces/primereact-examples" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Examples
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="w-6 lg:w-3 flex">
+                        <ul className="list-none p-0 m-0">
+                            <li className="font-bold mb-5">Support</li>
+                            <li className="mb-4">
+                                <a href="https://github.com/orgs/primefaces/discussions" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Forum
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <a href="https://discord.gg/gzKFYnpmCY" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Discord
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <Link href="http://github.com/support">
+                                    <a className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</a>
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="w-6 lg:w-3 flex">
+                        <ul className="list-none p-0 m-0">
+                            <li className="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
+                            <li className="mb-4">
+                                <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    PrimeTV
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <a href="https://primeui.store/" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Store
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <a href="https://github.com/primefaces/primereact" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Source Code
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <a href="https://twitter.com/primereact" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Twitter
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <a href="https://www.primefaces.org/newsletter" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Newsletter
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <a href="https://gear.primefaces.org/" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    PrimeGear
+                                </a>
+                            </li>
+                            <li className="mb-4">
+                                <a href="/service/mailto:contact@primetek.com.tr" className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" target="_blank" rel="noopener noreferrer">
+                                    Contact Us
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div className="w-6 lg:w-3 flex">
+                        <ul className="list-none p-0 m-0">
+                            <li className="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
+                            <li className="mb-4">
+                                <Link href="http://github.com/theming">
+                                    <a className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Styled Mode</a>
+                                </Link>
+                            </li>
+                            <li>
+                                <Link href="http://github.com/unstyled">
+                                    <a className="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Unstyled Mode</a>
+                                </Link>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <hr className="section-divider mt-8" />
+
+                <div className="flex flex-wrap justify-content-between py-6 gap-5">
+                    <span>
+                        <svg width="146" height="35" viewBox="0 0 146 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M39.5579 25.5583V8.52772C39.5579 8.30596 39.6909 8.17291 39.9127 8.17291H45.2347C47.3192 8.17291 48.428 9.28167 48.428 11.3661V16.7769C48.428 18.8392 47.3192 19.9701 45.2347 19.9701H42.5737V25.5583C42.5737 25.78 42.4628 25.9131 42.2189 25.9131H39.9127C39.6909 25.9131 39.5579 25.78 39.5579 25.5583ZM42.5735 17.0431H44.5249C45.1237 17.0431 45.4119 16.7105 45.4119 16.1561V11.9872C45.4119 11.4106 45.1237 11.1001 44.5249 11.1001H42.5735V17.0431ZM59.5378 16.7769V11.3662C59.5378 9.2817 58.429 8.17294 56.3445 8.17294H50.7785C50.5568 8.17294 50.4237 8.30599 50.4237 8.52774V25.5583C50.4237 25.7801 50.5568 25.9131 50.7785 25.9131H53.0848C53.3065 25.9131 53.4396 25.7801 53.4396 25.5583V19.9702H54.9697L56.4554 25.6027C56.4998 25.8022 56.6106 25.9131 56.8324 25.9131H59.1386C59.3825 25.9131 59.5156 25.7801 59.4491 25.514L57.919 19.7041C58.9834 19.2384 59.5378 18.2627 59.5378 16.7769ZM53.4394 17.0431H55.6348C56.2113 17.0431 56.5218 16.7327 56.5218 16.1561V11.9872C56.5218 11.4106 56.2113 11.1001 55.6348 11.1001H53.4394V17.0431ZM64.4162 8.17294H62.1099C61.866 8.17294 61.7551 8.30599 61.7551 8.52774V25.5583C61.7551 25.7801 61.866 25.9131 62.1099 25.9131H64.4162C64.6379 25.9131 64.771 25.7801 64.771 25.5583V8.52774C64.771 8.30599 64.6379 8.17294 64.4162 8.17294ZM76.2577 8.17294H79.1849C79.4731 8.17294 79.6284 8.32816 79.6284 8.61644V25.4696C79.6284 25.7579 79.4731 25.9131 79.1849 25.9131H77.1226C76.8343 25.9131 76.6791 25.7579 76.6791 25.4696V15.4908H76.5238L74.3285 25.514C74.262 25.7801 74.1067 25.9131 73.8406 25.9131H72.754C72.4879 25.9131 72.3327 25.7801 72.2662 25.514L70.0708 15.4908H69.9156V25.4696C69.9156 25.7579 69.7604 25.9131 69.4721 25.9131H67.432C67.1437 25.9131 66.9885 25.7579 66.9885 25.4696V8.61644C66.9885 8.32816 67.1437 8.17294 67.432 8.17294H70.3591C70.6252 8.17294 70.7804 8.30599 70.847 8.57209L73.3084 19.6154L75.7699 8.57209C75.8364 8.30599 75.9916 8.17294 76.2577 8.17294ZM90.694 10.7453V8.52774C90.694 8.30599 90.6053 8.17294 90.3392 8.17294H82.1787C81.9791 8.17294 81.8461 8.30599 81.8461 8.52774V25.5583C81.8461 25.7801 81.9791 25.9131 82.1787 25.9131H90.3392C90.6053 25.9131 90.694 25.7801 90.694 25.5583V23.3408C90.694 23.0969 90.6053 22.986 90.3392 22.986H84.7954V18.5066H89.0308C89.2526 18.5066 89.3856 18.3735 89.3856 18.1296V15.9343C89.3856 15.6903 89.2526 15.5573 89.0308 15.5573H84.7954V11.1222H90.3392C90.6053 11.1222 90.694 10.967 90.694 10.7453Z"
+                                fill="var(--surface-900)"
+                            />
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M101.937 11.3661V16.7769C101.937 18.2626 101.382 19.2384 100.318 19.704L101.848 25.5139C101.914 25.78 101.781 25.9131 101.537 25.9131H99.2312C99.0095 25.9131 98.8986 25.8022 98.8542 25.6026L97.3685 19.9701H95.8384V25.5583C95.8384 25.78 95.7054 25.9131 95.4836 25.9131H93.1774C92.9556 25.9131 92.8226 25.78 92.8226 25.5583V8.52772C92.8226 8.30596 92.9556 8.17291 93.1774 8.17291H98.7434C100.828 8.17291 101.937 9.28167 101.937 11.3661ZM95.8384 17.0431H98.0338C98.6103 17.0431 98.9208 16.7327 98.9208 16.1561V11.9872C98.9208 11.4106 98.6103 11.1001 98.0338 11.1001H95.8384V17.0431ZM113.002 10.7453V8.52774C113.002 8.30599 112.913 8.17294 112.647 8.17294H104.487C104.287 8.17294 104.154 8.30599 104.154 8.52774V25.5583C104.154 25.7801 104.287 25.9131 104.487 25.9131H112.647C112.913 25.9131 113.002 25.7801 113.002 25.5583V23.3408C113.002 23.0969 112.913 22.986 112.647 22.986H107.104V18.5066H111.339C111.561 18.5066 111.694 18.3735 111.694 18.1296V15.9343C111.694 15.6903 111.561 15.5573 111.339 15.5573H107.104V11.1222H112.647C112.913 11.1222 113.002 10.967 113.002 10.7453ZM125.243 25.9131H122.892C122.693 25.9131 122.582 25.8022 122.537 25.6027L121.916 22.3651H117.969L117.371 25.6027C117.326 25.8022 117.215 25.9131 117.016 25.9131H114.643C114.399 25.9131 114.288 25.7801 114.355 25.5361L118.036 8.48339C118.08 8.26164 118.213 8.17294 118.413 8.17294H121.495C121.695 8.17294 121.828 8.26164 121.872 8.48339L125.553 25.5361C125.598 25.7801 125.509 25.9131 125.243 25.9131ZM119.943 12.0536L121.362 19.7927H118.524L119.943 12.0536ZM135.998 11.3662V13.7611C135.998 13.9828 135.865 14.1159 135.643 14.1159H133.426C133.182 14.1159 133.071 13.9828 133.071 13.7611V11.9871C133.071 11.4105 132.76 11.1001 132.184 11.1001H131.031C130.432 11.1001 130.144 11.4105 130.144 11.9871V22.099C130.144 22.6977 130.454 22.986 131.031 22.986H132.184C132.76 22.986 133.071 22.6977 133.071 22.099V20.325C133.071 20.1032 133.182 19.9702 133.426 19.9702H135.643C135.865 19.9702 135.998 20.1032 135.998 20.325V22.7199C135.998 24.8044 134.867 25.9131 132.805 25.9131H130.321C128.237 25.9131 127.106 24.8044 127.106 22.7199V11.3662C127.106 9.2817 128.237 8.17294 130.321 8.17294H132.805C134.867 8.17294 135.998 9.2817 135.998 11.3662ZM145.622 8.17294H137.461C137.24 8.17294 137.107 8.30599 137.107 8.52774V10.7453C137.107 10.967 137.24 11.1001 137.461 11.1001H140.034V25.5583C140.034 25.8022 140.167 25.9131 140.389 25.9131H142.695C142.939 25.9131 143.05 25.8022 143.05 25.5583V11.1001H145.622C145.866 11.1001 145.977 10.967 145.977 10.7453V8.52774C145.977 8.30599 145.866 8.17294 145.622 8.17294Z"
+                                fill="var(--primary-color)"
+                            />
+                            <mask id="mask0_2642_713" className="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="35">
+                                <path fillRule="evenodd" clipRule="evenodd" d="M0.946167 0.0430908H32.1679V34.0431H0.946167V0.0430908Z" fill="white" />
+                            </mask>
+                            <g mask="url(#mask0_2642_713)">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                    fill="var(--primary-color)"
+                                />
+                            </g>
+                            <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                            <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                            <path
+                                fillRule="evenodd"
+                                clipRule="evenodd"
+                                d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z"
+                                fill="var(--primary-color)"
+                            />
+                            <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                            <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                            <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                            <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                            <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                            <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                        </svg>
+                    </span>
+                    <div className="flex align-items-center">
+                        <a href="https://twitter.com/primereact" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
+                            <i className="pi pi-twitter" />
+                        </a>
+                        <a href="https://github.com/primefaces/primereact" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
+                            <i className="pi pi-github" />
+                        </a>
+                        <a href="https://discord.gg/gzKFYnpmCY" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
+                            <i className="pi pi-discord" />
+                        </a>
+                        <a href="https://github.com/orgs/primefaces/discussions" className="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
+                            <i className="pi pi-comments" />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default FooterSection;
diff --git a/components/landing/getstartedsection.js b/components/landing/getstartedsection.js
new file mode 100644
index 0000000000..a01e69756a
--- /dev/null
+++ b/components/landing/getstartedsection.js
@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import { useState } from 'react';
+
+const GetStartedSection = () => {
+    const [npmText, npmCopied] = useState('npm i primereact');
+    const [downloadIcon, copiedIcon] = useState('pi pi-download mr-3 download-icon');
+
+    return (
+        <section className="landing-getstarted flex flex-column  align-items-center justify-content-center mt-8 z-1">
+            <div className="flex flex-column md:flex-row align-items-center justify-content-center">
+                <Link href="http://github.com/installation">
+                    <a className="linkbox active font-semibold py-3 px-4 fadeinleft animation-duration-2000 animation-ease-out">
+                        Get Started <i className="pi pi-arrow-right ml-3" />
+                    </a>
+                </Link>
+                <div
+                    className="relative cursor-pointer box download-box w-15rem font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out"
+                    onClick={() => {
+                        navigator.clipboard.writeText('npm i primereact');
+                        npmCopied('copied!');
+                        copiedIcon('pi pi-copy mr-3 download-icon');
+                        setTimeout(() => {
+                            npmCopied('npm i primereact');
+                            copiedIcon('pi pi-download mr-3 download-icon');
+                        }, 2000);
+                    }}
+                >
+                    <i className={downloadIcon} />
+                    <span className="font-bold select-all" style={{ fontFamily: 'monaco, monospace' }}>
+                        {npmText}
+                    </span>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default GetStartedSection;
diff --git a/components/landing/herosection.js b/components/landing/herosection.js
new file mode 100644
index 0000000000..dbf2ab7e6c
--- /dev/null
+++ b/components/landing/herosection.js
@@ -0,0 +1,236 @@
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { Badge } from '@/components/lib/badge/Badge';
+import { Button } from '@/components/lib/button/Button';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { Chart } from '@/components/lib/chart/Chart';
+import { Chip } from '@/components/lib/chip/Chip';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { InputNumber } from '@/components/lib/inputnumber/InputNumber';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { RadioButton } from '@/components/lib/radiobutton/RadioButton';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { Slider } from '@/components/lib/slider/Slider';
+import { TabMenu } from '@/components/lib/tabmenu/TabMenu';
+import Link from 'next/link';
+import { useContext, useEffect, useState } from 'react';
+
+const HeroSection = () => {
+    const { darkMode } = useContext(AppContentContext);
+    const selectButtonOptions = [
+        { name: 'Styled', value: 1 },
+        { name: 'Unstyled', value: 2 }
+    ];
+
+    const items = [
+        { label: 'Home', icon: 'pi pi-fw pi-home' },
+        { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }
+    ];
+
+    const [value1, setValue1] = useState(24);
+    const [category, setCategory] = useState('S');
+    const [dateValue, setDateValue] = useState(null);
+    const [chartOptions, setChartOptions] = useState({});
+    const [chartData, setChartData] = useState({});
+    const [checked, setChecked] = useState(true);
+    const [selectButtonValue, setSelectButtonValue] = useState(1);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [rangeValues, setRangeValues] = useState([20, 80]);
+    const [user, setUser] = useState(null);
+    const [users] = useState([
+        { name: 'Amy Elsner', image: 'amyelsner.png' },
+        { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+        { name: 'Onyama Limba', image: 'onyamalimba.png' }
+    ]);
+
+    const userTemplate = (rowData) => {
+        return (
+            <div className="flex align-items-center gap-2">
+                <img alt={rowData.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${rowData.image}`} width="32" />
+                <span>{rowData.name}</span>
+            </div>
+        );
+    };
+
+    useEffect(() => {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+        const data = {
+            labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+            datasets: [
+                {
+                    label: 'Annual Income',
+                    data: [40, 59, 40, 50, 56],
+                    fill: true,
+                    borderColor: '#03C4E8',
+                    tension: 0.4,
+                    backgroundColor: 'rgba(151, 210, 222, .2)'
+                }
+            ]
+        };
+
+        const options = {
+            plugins: {
+                legend: {
+                    display: false
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder
+                    }
+                },
+                y: {
+                    beginAtZero: true,
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    min: 0,
+                    max: 100,
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        setChartData(data);
+        setChartOptions(options);
+    }, [darkMode]);
+
+    return (
+        <section className="landing-hero py-8 px-5 lg:px-8">
+            <div className="flex flex-wrap">
+                <div className="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch">
+                    <h1 className="text-6xl font-bold text-center xl:text-left">
+                        The Most Complete UI Suite for <span className="font-bold text-primary">React.js</span>
+                    </h1>
+                    <p className="section-detail xl:text-left text-center px-0 mt-0 mb-5">
+                        Elevate your web applications with PrimeReact's comprehensive suite of customizable, feature-rich UI components. With PrimeReact, turning your development vision into reality has never been easier.
+                    </p>
+                    <div className="flex align-items-center gap-3">
+                        <Link href="http://github.com/installation">
+                            <a className="linkbox active font-semibold py-3 px-4">
+                                <span>Get Started</span>
+                                <i className="pi pi-arrow-right ml-3" />
+                            </a>
+                        </Link>
+                        <a href="https://github.com/primefaces/primereact" target="_blank" rel="noopener noreferrer" className="linkbox font-semibold py-3 px-4">
+                            <span>Give a Star</span>
+                            <i className="pi pi-star-fill ml-3 text-yellow-500" />
+                        </a>
+                    </div>
+                </div>
+                <div className="w-full xl:w-6 pt-7 xl:pt-0 hidden md:block">
+                    <div className="flex">
+                        <div className="flex flex-column w-6 gap-5 pt-8 pr-3">
+                            <div className="box p-4 fadein animation-duration-500">
+                                <div className="flex gap-2">
+                                    <div className="w-6rem">
+                                        <span className="text-secondary font-semibold block mb-3">Amount</span>
+                                        <InputNumber value={value1} mode="currency" currency="USD" locale="en-US" className="w-full" inputClassName="w-full" onValueChange={(e) => setValue1(e.value)} />
+                                    </div>
+                                    <div className="flex-auto" style={{ width: '1%' }}>
+                                        <span className="text-secondary font-semibold block mb-3">Beneficiary</span>
+                                        <Dropdown value={user} onChange={(e) => setUser(e.value)} options={users} optionLabel="name" placeholder="Select a User" className="w-full" itemTemplate={userTemplate} />
+                                    </div>
+                                </div>
+                                <span className="text-secondary font-semibold block mt-5 mb-3">Account</span>
+                                <div className="flex flex-wrap gap-3">
+                                    <div className="flex align-items-center">
+                                        <RadioButton inputId="category1" name="radiovalue" value="S" checked={category === 'S'} onChange={(e) => setCategory('S')} />
+                                        <label htmlFor="category1" className="ml-2 font-medium">
+                                            Savings
+                                        </label>
+                                    </div>
+                                    <div className="flex align-items-center">
+                                        <RadioButton inputId="category2" name="radiovalue" value="C" checked={category === 'C'} onChange={(e) => setCategory('C')} />
+                                        <label htmlFor="category2" className="ml-2 font-medium">
+                                            Checking
+                                        </label>
+                                    </div>
+                                </div>
+                                <span className="text-secondary font-semibold block mt-5 mb-3">Date</span>
+                                <Calendar value={dateValue} showWeek className="w-full" />
+                            </div>
+                            <div className="box p-4 fadein animation-duration-500">
+                                <Chart type="line" data={chartData} options={chartOptions} />
+                            </div>
+                            <div className="box p-4 fadein animation-duration-500">
+                                <div className="flex align-items-center">
+                                    <Chip label="React" className="mr-2 font-medium" />
+                                    <Chip label="Typescript" className="mr-2 font-medium" />
+                                    <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} className="ml-auto" />
+                                </div>
+                                <div className="mt-5 flex justify-content-center">
+                                    <SelectButton value={selectButtonValue} onChange={(e) => setSelectButtonValue(e.value)} options={selectButtonOptions} optionLabel="name" />
+                                </div>
+                                <div className="mt-5">
+                                    <Slider value={rangeValues} onChange={(e) => setRangeValues(e.value)} range className="w-full" />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="flex flex-column w-6 gap-5 pl-3">
+                            <div className="box p-4 fadein animation-duration-500">
+                                <div className="surface-card mb-4 w-full text-center p-5" style={{ borderRadius: '10px' }}>
+                                    <img src="https://primefaces.org/cdn/primereact/images/landing/air-jordan.png" alt="Watch" className="w-14rem" />
+                                </div>
+                                <div className="flex align-items-center mb-4">
+                                    <div className="flex flex-column">
+                                        <span className="block font-semibold mb-1">Sneaker</span>
+                                        <span className="text-secondary text-sm">Premium Quality</span>
+                                    </div>
+                                    <span className="font-medium text-xl ml-auto">$990</span>
+                                </div>
+                                <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined className="w-full" />
+                            </div>
+                            <div className="box p-4 fadein animation-duration-500">
+                                <ul className="list-none p-0 m-0">
+                                    <li className="flex align-items-center mb-3">
+                                        <span className="mr-3">
+                                            <img src="https://primefaces.org/cdn/primereact/images/landing/avatar.png" alt="Avatar" className="w-3rem h-3rem" />
+                                        </span>
+                                        <div className="flex flex-column">
+                                            <span className="font-bold mb-1">Amanda Williams</span>
+                                            <span className="text-secondary">Administrator</span>
+                                        </div>
+                                    </li>
+                                    <li className="flex">
+                                        <a className="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style={{ borderRadius: '10px' }}>
+                                            <i className="pi pi-home text-xl mr-3" />
+                                            <span className="flex flex-column">
+                                                <span className="font-bold mb-1">Dashboard</span>
+                                                <span className="m-0 text-secondary">Control Panel</span>
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li className="flex">
+                                        <a className="flex align-items-center p-3 border-round w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" style={{ borderRadius: '10px' }}>
+                                            <i className="pi pi-envelope text-xl mr-3" />
+                                            <span className="flex flex-column">
+                                                <span className="font-bold mb-1">Inbox</span>
+                                                <span className="m-0 text-secondary">View Messages</span>
+                                            </span>
+                                            <Badge value="3" className="ml-auto" />
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="box p-4 fadein animation-duration-500">
+                                <TabMenu model={items} activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default HeroSection;
diff --git a/components/landing/templatesection.js b/components/landing/templatesection.js
new file mode 100644
index 0000000000..45a30d8bb7
--- /dev/null
+++ b/components/landing/templatesection.js
@@ -0,0 +1,136 @@
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { classNames } from '@/components/lib/utils/ClassNames';
+import { useContext, useEffect, useState } from 'react';
+
+const TemplateSection = () => {
+    const [animation, setAnimation] = useState(false);
+    const { darkMode } = useContext(AppContentContext);
+
+    useEffect(() => {
+        setAnimation(true);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    const imageBg = (template) => {
+        const url = template === 'templates-text' ? 'png' : 'jpg';
+
+        return `url('https://primefaces.org/cdn/primereact/images/landing/templates/$%7Btemplate%7D-$%7BdarkMode%20?%20%27dark%27%20:%20%27light%27}.${url}')`;
+    };
+
+    const templateImg = () => {
+        return `https://primefaces.org/cdn/primereact/images/landing/templates/templates-text-new-${darkMode ? 'dark' : 'light'}.png`;
+    };
+
+    return (
+        <section className="landing-templates theme-dark py-8">
+            <div className="section-header relative z-3">Templates</div>
+            <p className="section-detail relative z-3">Professionally designed highly customizable application templates to get started in style.</p>
+            <div className="flex justify-content-center relative mt-4 z-3">
+                <a href="https://primeui.store/templates" className="font-semibold p-3 border-round flex align-items-center linkbox active">
+                    <span>Explore All</span>
+                    <i className="pi pi-arrow-right ml-2" />
+                </a>
+            </div>
+            <section className={classNames('templates flex justify-content-center align-items-center flex-column mt-7', { 'templates-animation': animation })}>
+                <div className="flex md:flex-row flex-column gap-4 lg:gap-0">
+                    <div className="template-block block-5 mr-2 lg:mb-0 flex justify-content-center align-items-center" style={{ backgroundImage: imageBg('verona') }}>
+                        <a className="templates-btn" target="_blank" href="https://verona.primereact.org/">
+                            Verona Preview
+                        </a>
+                    </div>
+                    <div className="template-block block-2 ml-2 flex justify-content-center align-items-center" style={{ backgroundImage: imageBg('freya') }}>
+                        <a className="templates-btn" target="_blank" href="https://freya.primereact.org/">
+                            Freya Preview
+                        </a>
+                    </div>
+                </div>
+                <div className="flex my-4 md:flex-row flex-column gap-4 lg:gap-0">
+                    <div className="template-block block-3 mr-2 lg:mb-0 flex justify-content-center align-items-center" style={{ backgroundImage: imageBg('atlantis') }}>
+                        <a className="templates-btn" target="_blank" href="https://atlantis.primereact.org/">
+                            Atlantis Preview
+                        </a>
+                    </div>
+                    <div className="template-block block-middle border-none box-shadow-none mr-2 hidden lg:flex justify-content-center align-items-center flex-column">
+                        <img className="img-1" src={templateImg()} height="110" alt="Template" />
+                    </div>
+                    <div className="template-block block-4 ml-2 flex justify-content-center align-items-center" style={{ backgroundImage: imageBg('apollo') }}>
+                        <a className="templates-btn" target="_blank" href="https://apollo.primereact.org/">
+                            Apollo Preview
+                        </a>
+                    </div>
+                </div>
+                <div className="flex md:flex-row flex-column gap-4 lg:gap-0">
+                    <div className="template-block block-1 mr-2 lg:mb-0 flex justify-content-center align-items-center" style={{ backgroundImage: imageBg('diamond') }}>
+                        <a className="templates-btn" target="_blank" href="https://diamond.primereact.org/">
+                            Diamond Preview
+                        </a>
+                    </div>
+                    <div className="template-block block-6 ml-2 flex justify-content-center align-items-center" style={{ backgroundImage: imageBg('ultima') }}>
+                        <a className="templates-btn" target="_blank" href="https://ultima.primereact.org/">
+                            Ultima Preview
+                        </a>
+                    </div>
+                </div>
+                <div className="lines">
+                    <div className="top">
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                    </div>
+                    <div className="left">
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                        <span />
+                    </div>
+                </div>
+            </section>
+        </section>
+    );
+};
+
+export default TemplateSection;
diff --git a/components/landing/themesection.js b/components/landing/themesection.js
new file mode 100644
index 0000000000..1ca1493f66
--- /dev/null
+++ b/components/landing/themesection.js
@@ -0,0 +1,231 @@
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { FilterMatchMode, FilterOperator } from '@/components/lib/api/Api';
+import { Button } from '@/components/lib/button/Button';
+import { Column } from '@/components/lib/column/Column';
+import { DataTable } from '@/components/lib/datatable/DataTable';
+import { useUpdateEffect } from '@/components/lib/hooks/useUpdateEffect';
+import { InputText } from '@/components/lib/inputtext/InputText';
+import { ProgressBar } from '@/components/lib/progressbar/ProgressBar';
+import { Tag } from '@/components/lib/tag/Tag';
+import { classNames } from '@/components/lib/utils/Utils';
+import { CustomerService } from '@/service/CustomerService';
+import React, { useContext, useEffect, useState } from 'react';
+
+const ThemeSection = () => {
+    const [tableTheme, setTableTheme] = useState('lara-light-cyan');
+    const { darkMode } = useContext(AppContentContext);
+    const [customers, setCustomers] = useState(null);
+    const [selectedCustomers, setSelectedCustomers] = useState(null);
+    const [filters, setFilters] = useState({
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: null, matchMode: FilterMatchMode.BETWEEN }
+    });
+    const [globalFilterValue, setGlobalFilterValue] = useState('');
+    const [loading, setLoading] = useState(true);
+
+    const replaceTableTheme = (newTheme) => {
+        const elementId = 'home-table-link';
+        const linkElement = document.getElementById(elementId);
+        const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null;
+        const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null;
+
+        if (currentTableTheme !== newTheme && tableThemeTokens) {
+            const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme);
+
+            const cloneLinkElement = linkElement.cloneNode(true);
+
+            cloneLinkElement.setAttribute('id', elementId + '-clone');
+            cloneLinkElement.setAttribute('href', newThemeUrl);
+            cloneLinkElement.addEventListener('load', () => {
+                linkElement.remove();
+                cloneLinkElement.setAttribute('id', elementId);
+
+                setTableTheme(newTheme);
+            });
+            linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+        }
+    };
+
+    const changeTheme = (name, color) => {
+        let newTheme = name + '-' + (darkMode ? 'dark' : 'light') + '-' + color;
+
+        replaceTableTheme(newTheme);
+    };
+
+    useEffect(() => {
+        CustomerService.getCustomersLarge().then((data) => {
+            setCustomers(getCustomers(data));
+            setLoading(false);
+        });
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useUpdateEffect(() => {
+        const newTheme = darkMode ? tableTheme.replace('light', 'dark') : tableTheme.replace('dark', 'light');
+
+        replaceTableTheme(newTheme);
+    }, [darkMode]);
+
+    const getCustomers = (data) => {
+        return [...(data || [])].map((d) => {
+            d.date = new Date(d.date);
+
+            return d;
+        });
+    };
+
+    const formatDate = (value) => {
+        return value.toLocaleDateString('en-US', {
+            day: '2-digit',
+            month: '2-digit',
+            year: 'numeric'
+        });
+    };
+
+    const formatCurrency = (value) => {
+        return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+    };
+
+    const onGlobalFilterChange = (e) => {
+        const value = e.target.value;
+        let _filters = { ...filters };
+
+        _filters.global.value = value;
+
+        setFilters(_filters);
+        setGlobalFilterValue(value);
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className="flex flex-column sm:flex-row sm:justify-content-between sm:align-items-center">
+                <h5 className="m-0">Customers</h5>
+                <span className="p-input-icon-left mt-3 sm:mt-0 w-full sm:w-auto">
+                    <i className="pi pi-search" />
+                    <InputText value={globalFilterValue} onChange={onGlobalFilterChange} placeholder="Search" className="w-full" />
+                </span>
+            </div>
+        );
+    };
+
+    const countryBodyTemplate = (rowData) => {
+        return (
+            <React.Fragment>
+                <img alt="flag" src="https://primefaces.org/cdn/primereact/images/flag/flag_placeholder.png" className={`flag flag-${rowData.country.code}`} width={30} />
+                <span className="vertical-align-middle ml-2">{rowData.country.name}</span>
+            </React.Fragment>
+        );
+    };
+
+    const representativeBodyTemplate = (rowData) => {
+        const representative = rowData.representative;
+
+        return (
+            <React.Fragment>
+                <img alt={representative.name} src={`https://primefaces.org/cdn/primereact/images/avatar/${representative.image}`} width={32} style={{ verticalAlign: 'middle' }} />
+                <span className="vertical-align-middle ml-2">{representative.name}</span>
+            </React.Fragment>
+        );
+    };
+
+    const dateBodyTemplate = (rowData) => {
+        return formatDate(rowData.date);
+    };
+
+    const balanceBodyTemplate = (rowData) => {
+        return formatCurrency(rowData.balance);
+    };
+
+    const statusBodyTemplate = (rowData) => {
+        return <Tag value={rowData.status} severity={getSeverity(rowData.status)} className="text-sm font-bold" />;
+    };
+
+    const activityBodyTemplate = (rowData) => {
+        return <ProgressBar value={rowData.activity} showValue={false} style={{ height: '6px' }} />;
+    };
+
+    const actionBodyTemplate = () => {
+        return <Button type="button" icon="pi pi-cog" className="p-button-text" />;
+    };
+
+    const getSeverity = (status) => {
+        switch (status) {
+            case 'unqualified':
+                return 'danger';
+
+            case 'qualified':
+                return 'success';
+
+            case 'new':
+                return 'info';
+
+            case 'negotiation':
+                return 'warning';
+
+            case 'renewal':
+                return null;
+        }
+    };
+
+    const header = renderHeader();
+
+    return (
+        <section className="landing-themes py-8 ">
+            <div className="section-header">Themes</div>
+            <p className="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p>
+            <div className="flex flex-wrap justify-content-center">
+                <button type="button" className={classNames('font-medium linkbox mr-3 mt-4', { active: tableTheme && tableTheme.startsWith('lara') })} onClick={() => changeTheme('lara', 'cyan')}>
+                    PrimeOne
+                </button>
+                <button type="button" className={classNames('font-medium linkbox mr-3 mt-4', { active: tableTheme && tableTheme.startsWith('md') })} onClick={() => changeTheme('md', 'indigo')}>
+                    Material
+                </button>
+                <button type="button" className={classNames('font-medium linkbox mr-3 mt-4', { active: tableTheme && tableTheme.startsWith('bootstrap4') })} onClick={() => changeTheme('bootstrap4', 'blue')}>
+                    Bootstrap
+                </button>
+            </div>
+            <div
+                className="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
+                style={{ backgroundImage: `url(https://primefaces.org/cdn/primereact/images/landing/wave-$%7BdarkMode%20?%20%27dark-alt-gray%27%20:%20%27light-alt-gray%27}.svg)`, backgroundSize: 'cover' }}
+            >
+                <div className="box overflow-hidden z-1 p-5 table-container">
+                    <DataTable
+                        value={customers}
+                        paginator
+                        className="p-datatable-customers"
+                        header={header}
+                        rows={5}
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport"
+                        dataKey="id"
+                        rowHover
+                        selection={selectedCustomers}
+                        onSelectionChange={(e) => setSelectedCustomers(e.value)}
+                        filters={filters}
+                        filterDisplay="menu"
+                        loading={loading}
+                        globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}
+                        emptyMessage="No customers found."
+                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                    >
+                        <Column selectionMode="multiple" style={{ width: '3rem' }} />
+                        <Column field="name" header="Name" sortable style={{ minWidth: '14rem' }} />
+                        <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filterPlaceholder="Search by country" />
+                        <Column sortable header="Agent" sortField="representative.name" filterField="representative" style={{ minWidth: '14rem' }} body={representativeBodyTemplate} />
+                        <Column field="date" header="Date" sortable filterField="date" dataType="date" style={{ minWidth: '8rem' }} body={dateBodyTemplate} />
+                        <Column field="balance" header="Balance" sortable dataType="numeric" style={{ minWidth: '8rem' }} body={balanceBodyTemplate} />
+                        <Column field="status" header="Status" sortable style={{ minWidth: '10rem' }} body={statusBodyTemplate} />
+                        <Column field="activity" header="Activity" sortable showFilterMatchModes={false} style={{ minWidth: '6rem' }} body={activityBodyTemplate} />
+                        <Column headerStyle={{ width: '4rem', textAlign: 'center' }} bodyStyle={{ textAlign: 'center', overflow: 'visible' }} body={actionBodyTemplate} />
+                    </DataTable>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default ThemeSection;
diff --git a/components/landing/userssection.js b/components/landing/userssection.js
new file mode 100644
index 0000000000..30b92ce57e
--- /dev/null
+++ b/components/landing/userssection.js
@@ -0,0 +1,63 @@
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { useContext } from 'react';
+
+const UsersSection = () => {
+    const { darkMode } = useContext(AppContentContext);
+    const colorScheme = darkMode ? 'light' : 'dark';
+    const usersData = ['fox', 'airbus', 'mercedes', 'ebay', 'ford', 'vw', 'intel', 'unicredit', 'lufthansa', 'nvidia', 'verizon', 'amex'];
+
+    const getUsersImages = () =>
+        usersData.map((name) => ({
+            name,
+            image: `https://primefaces.org/cdn/primereact/images/landing/whouses/${name}-${colorScheme}.svg`
+        }));
+
+    const Marquee = ({ users, reverse }) => (
+        <div className="marquee-wrapper overflow-hidden flex">
+            {Array(3)
+                .fill(users)
+                .map((users, index) => (
+                    <div key={index} className={`marquee${reverse ? ' marquee-reverse' : ''}`}>
+                        {users.map((user) => (
+                            <div className="w-full" key={user.name}>
+                                <img src={user.image} alt={`${user.name}-${colorScheme}`} />
+                            </div>
+                        ))}
+                    </div>
+                ))}
+        </div>
+    );
+
+    const usersImages = getUsersImages();
+
+    const users1 = usersImages.slice(0, 6);
+    const users2 = usersImages.slice(6);
+
+    return (
+        <section className="landing-users py-8 px-3 lg:px-8">
+            <div className="section-header">Who Uses</div>
+            <p className="section-detail">
+                PrimeTek libraries have reached over
+                <span className="font-semibold animated-text relative white-space-nowrap">
+                    <span className="select-none">400 Million Downloads </span>
+                </span>
+                on npm! Join the PrimeLand community and experience the difference yourself.
+            </p>
+            <div className="flex justify-content-center align-items-center mt-4">
+                <span className="ml-2"> </span>
+            </div>
+            <div className="logo-section relative w-full md:w-8 mt-6 users-container">
+                <div className="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" />
+                <Marquee users={users1} />
+                <div className="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" />
+            </div>
+            <div className="logo-section relative w-full md:w-8 mt-2 users-container">
+                <div className="fade-left h-6rem w-6rem block absolute top-0 left-0 z-2" />
+                <Marquee users={users2} reverse />
+                <div className="fade-right h-6rem w-6rem block absolute top-0 right-0 z-2" />
+            </div>
+        </section>
+    );
+};
+
+export default UsersSection;
diff --git a/src/AppContentContext.js b/components/layout/appcontentcontext.js
similarity index 100%
rename from src/AppContentContext.js
rename to components/layout/appcontentcontext.js
diff --git a/components/layout/config.js b/components/layout/config.js
new file mode 100644
index 0000000000..cec542f4f4
--- /dev/null
+++ b/components/layout/config.js
@@ -0,0 +1,368 @@
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { PrimeReactContext } from '@/components/lib/api/PrimeReactContext';
+import { Button } from '@/components/lib/button/Button';
+import { InputSwitch } from '@/components/lib/inputswitch/InputSwitch';
+import { SelectButton } from '@/components/lib/selectbutton/SelectButton';
+import { Sidebar } from '@/components/lib/sidebar/Sidebar';
+import { classNames } from '@/components/lib/utils/Utils';
+import { useContext, useEffect, useState } from 'react';
+
+export default function Config(props) {
+    const [scale, setScale] = useState(14);
+    const [scales, setScales] = useState([12, 13, 14, 15, 16]);
+    const [compactMaterial, setCompactMaterial] = useState(false);
+    const { theme, darkMode, changeTheme } = useContext(AppContentContext);
+    const { ripple, inputStyle, setRipple, setInputStyle } = useContext(PrimeReactContext);
+    const lightOnlyThemes = ['fluent-light', 'mira', 'nano'];
+
+    const decrementScale = () => {
+        setScale((prevScale) => --prevScale);
+    };
+
+    const incrementScale = () => {
+        setScale((prevScale) => ++prevScale);
+    };
+
+    const inputStyles = [
+        { label: 'Outlined', value: 'outlined' },
+        { label: 'Filled', value: 'filled' }
+    ];
+
+    const darkToggleDisabled = () => {
+        return lightOnlyThemes.includes(theme);
+    };
+
+    const switchTheme = (themeName, color) => {
+        if (lightOnlyThemes.includes(themeName)) {
+            changeTheme(themeName, false);
+        } else {
+            let newTheme = themeName + '-' + (darkMode ? 'dark' : 'light');
+
+            if (color) {
+                newTheme = newTheme + ('-' + color);
+            }
+
+            if (newTheme.startsWith('md-') && compactMaterial) {
+                newTheme = newTheme.replace('md-', 'mdc-');
+            }
+
+            changeTheme(newTheme, darkMode);
+        }
+    };
+
+    const isThemeActive = (themeFamily, color) => {
+        let themeName;
+        let themePrefix = themeFamily === 'md' && compactMaterial ? 'mdc' : themeFamily;
+
+        if (lightOnlyThemes.includes(themePrefix)) {
+            themeName = themePrefix;
+        } else {
+            themeName = themePrefix + (darkMode ? '-dark' : '-light');
+        }
+
+        if (color) {
+            themeName = themeName + ('-' + color);
+        }
+
+        return theme === themeName;
+    };
+
+    useEffect(() => {
+        document.documentElement.style.fontSize = scale + 'px';
+    }, [scale]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        if (theme.startsWith('md')) {
+            let tokens = theme.split('-');
+
+            switchTheme(tokens[0].substring(0, 2), tokens[2]);
+        }
+    }, [compactMaterial]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <Sidebar visible={props.active} onHide={() => props.onHide()} className={classNames('layout-config w-full sm:w-26rem', { 'layout-dark': props.dark }, { 'layout-light': !props.dark })} position="right">
+            <div className="p-2">
+                <section className="pb-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                    <span className="text-xl font-semibold">Scale</span>
+                    <div className="flex align-items-center gap-2 border-1 surface-border py-1 px-2" style={{ borderRadius: '30px' }}>
+                        <Button icon="pi pi-minus" onClick={decrementScale} text rounded className=" w-2rem h-2rem" disabled={scale === scales[0]} />
+                        {scales.map((s) => {
+                            return <i className={classNames('pi pi-circle-fill text-sm text-200', { 'text-lg text-primary': s === scale })} key={s} />;
+                        })}
+                        <Button icon="pi pi-plus" onClick={incrementScale} text rounded className="w-2rem h-2rem" disabled={scale === scales[scales.length - 1]} />
+                    </div>
+                </section>
+
+                <section className="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                    <span className="text-xl font-semibold">Input Style</span>
+                    <div className="flex gap-5">
+                        <SelectButton value={inputStyle} onChange={(e) => setInputStyle(e.value)} options={inputStyles} optionLabel="label" optionValue="value" allowEmpty={false} />
+                    </div>
+                </section>
+
+                <section className="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                    <span className="text-xl font-semibold">Ripple Effect</span>
+                    <InputSwitch checked={ripple} onChange={(e) => setRipple(e.value)} />
+                </section>
+
+                <section className="py-4 flex align-items-center justify-content-between border-bottom-1 surface-border">
+                    <span className={classNames('text-xl font-semibold', { 'p-disabled': darkToggleDisabled() })}>Dark Mode</span>
+                    <InputSwitch checked={darkMode} onChange={() => props.onDarkSwitchClick()} disabled={darkToggleDisabled()} />
+                </section>
+
+                <section className="py-4 border-bottom-1 surface-border">
+                    <div className="text-xl font-semibold mb-3">Themes</div>
+                    <div className="flex align-items-center gap-2 mb-3">
+                        <img src="https://primefaces.org/cdn/primereact/images/themes/lara-light-teal.png" alt="Lara Light Teal" className="border-circle" style={{ width: '1.5rem' }} />
+                        <span className="font-medium">Lara</span>
+                    </div>
+                    <div className="flex align-items-center justify-content-between gap-3 mb-3">
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'cyan'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'cyan')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'cyan')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #06b6d4 0%, rgba(6, 182, 212, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'green'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'green')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'green')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #4dac9c 0%, rgba(77, 172, 156, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'blue'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'blue')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'blue')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #4378e6 0%, rgba(67, 120, 230, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'indigo'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'indigo')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'indigo')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #585fe0 0%, rgba(88, 95, 224, 0.5) 100%)' }} />
+                        </button>
+                    </div>
+                    <div className="flex align-items-center justify-content-between gap-3">
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'purple'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'purple')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'purple')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #7758e4 0%, rgba(119, 88, 228, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'amber'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'amber')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'amber')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'teal'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'teal')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'teal')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #14b8a6 0%, rgba(20, 184, 166, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('lara', 'pink'),
+                                'hover:border-500 surface-border': !isThemeActive('lara', 'pink')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('lara', 'pink')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: ' 30px', background: 'linear-gradient(180deg, #ec4899 0%, rgba(236, 72, 153, 0.5) 100%)' }} />
+                        </button>
+                    </div>
+                </section>
+
+                <section className="py-4 border-bottom-1 surface-border">
+                    <div className="flex align-items-center gap-2 mb-3">
+                        <img src="https://primefaces.org/cdn/primereact/images/themes/md-light-indigo.svg" alt="Material Design" className="border-circle" style={{ width: '1.5rem' }} />
+                        <span className="font-medium">Material Design</span>
+                        <div className="ml-auto flex align-items-center gap-2">
+                            <label htmlFor="material-condensed" className="text-sm">
+                                Condensed
+                            </label>
+                            <InputSwitch inputId="material-condensed" checked={compactMaterial} onChange={(e) => setCompactMaterial(e.value)} className="ml-auto" />
+                        </div>
+                    </div>
+                    <div className="flex align-items-center justify-content-between gap-3">
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('md', 'indigo'),
+                                'hover:border-500 surface-border': !isThemeActive('md', 'indigo')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('md', 'indigo')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: '30px', background: 'linear-gradient(180deg, #0565f2 0%, rgba(5, 101, 242, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('md', 'deeppurple'),
+                                'hover:border-500 surface-border': !isThemeActive('md', 'deeppurple')
+                            })}
+                            style={{ borderRadius: '30px' }}
+                            onClick={() => switchTheme('md', 'deeppurple')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: '30px', background: 'linear-gradient(180deg, #702f92 0%, rgba(112, 47, 146, 0.5) 100%)' }} />
+                        </button>
+                        <div className="w-3" />
+                        <div className="w-3" />
+                    </div>
+                </section>
+
+                <section className="py-4 border-bottom-1 surface-border">
+                    <div className="flex align-items-center gap-2 mb-3">
+                        <img src="https://primefaces.org/cdn/primereact/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap" className="border-circle" style={{ width: '1.5rem' }} />
+                        <span className="font-medium">Bootstrap</span>
+                    </div>
+                    <div className="flex align-items-center justify-content-between gap-3">
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('bootstrap4', 'blue'),
+                                'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'blue')
+                            })}
+                            style={{ borderRadius: 30 }}
+                            onClick={() => switchTheme('bootstrap4', 'blue')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #027bff 0%, rgba(2, 123, 255, 0.5) 100%)' }} />
+                        </button>
+                        <button
+                            className={classNames('bg-transparent border-1 cursor-pointer p-2 w-3 flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                'border-primary': isThemeActive('bootstrap4', 'purple'),
+                                'hover:border-500 surface-border': !isThemeActive('bootstrap4', 'purple')
+                            })}
+                            style={{ borderRadius: 30 }}
+                            onClick={() => switchTheme('bootstrap4', 'purple')}
+                        >
+                            <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #893cae 0%, rgba(137, 60, 174, 0.5) 100%)' }} />
+                        </button>
+                        <div className="w-3" />
+                        <div className="w-3" />
+                    </div>
+                </section>
+
+                <section className="py-4 border-bottom-1 surface-border">
+                    <div className="flex gap-3">
+                        <div className="w-3">
+                            <div className="flex align-items-center gap-2 mb-3">
+                                <img src="https://primefaces.org/cdn/primereact/images/themes/soho-light.png" alt="Soho" className="border-circle" style={{ width: '1.5rem' }} />
+                                <span className="font-medium">Soho</span>
+                            </div>
+                            <button
+                                className={classNames('bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                    'border-primary': isThemeActive('soho'),
+                                    'hover:border-500 surface-border': !isThemeActive('soho')
+                                })}
+                                style={{ borderRadius: 30 }}
+                                onClick={() => switchTheme('soho')}
+                            >
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #664beb 0%, rgba(102, 75, 235, 0.5) 100%)' }} />
+                            </button>
+                        </div>
+                        <div className="w-3">
+                            <div className="flex align-items-center gap-2 mb-3">
+                                <img src="https://primefaces.org/cdn/primereact/images/themes/viva-light.svg" alt="Viva" className="border-circle" style={{ width: '1.5rem' }} />
+                                <span className="font-medium">Viva</span>
+                            </div>
+                            <button
+                                className={classNames('bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                    'border-primary': isThemeActive('viva'),
+                                    'hover:border-500 surface-border': !isThemeActive('viva')
+                                })}
+                                style={{ borderRadius: 30 }}
+                                onClick={() => switchTheme('viva')}
+                            >
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #4a67c9 0%, rgba(74, 103, 201, 0.5) 100%)' }} />
+                            </button>
+                        </div>
+                        <div className="w-3" />
+                        <div className="w-3" />
+                    </div>
+                </section>
+
+                <section className="py-4">
+                    <div className="flex gap-3">
+                        <div className="w-3">
+                            <div className="flex align-items-center gap-2 mb-3">
+                                <img src="https://primefaces.org/cdn/primereact/images/themes/fluent-light.png" alt="Fluent" className="border-circle" style={{ width: '1.5rem' }} />
+                                <span className="font-medium">Fluent</span>
+                            </div>
+                            <button
+                                className={classNames('bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                    'border-primary': isThemeActive('fluent-light'),
+                                    'hover:border-500 surface-border': !isThemeActive('fluent-light')
+                                })}
+                                style={{ borderRadius: 30 }}
+                                onClick={() => switchTheme('fluent-light')}
+                            >
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #0078d4 0%, rgba(0, 120, 212, 0.5) 100%)' }} />
+                            </button>
+                        </div>
+                        <div className="w-3">
+                            <div className="flex align-items-center gap-2 mb-3">
+                                <img src="https://primefaces.org/cdn/primereact/images/themes/mira.jpg" alt="Mira" className="border-circle" style={{ width: '1.5rem' }} />
+                                <span className="font-medium">Mira</span>
+                            </div>
+                            <button
+                                className={classNames('bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                    'border-primary': isThemeActive('mira'),
+                                    'hover:border-500 surface-border': !isThemeActive('mira')
+                                })}
+                                style={{ borderRadius: 30 }}
+                                onClick={() => switchTheme('mira')}
+                            >
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #81a1c1 0%, rgba(129, 161, 193, 0.5) 100%)' }} />
+                            </button>
+                        </div>
+                        <div className="w-3">
+                            <div className="flex align-items-center gap-2 mb-3">
+                                <img src="https://primefaces.org/cdn/primereact/images/themes/nano.jpg" alt="Nano" className="border-circle" style={{ width: '1.5rem' }} />
+                                <span className="font-medium">Nano</span>
+                            </div>
+                            <button
+                                className={classNames('bg-transparent border-1 cursor-pointer p-2 w-full flex align-items-center justify-content-center transition-all transition-duration-200', {
+                                    'border-primary': isThemeActive('nano'),
+                                    'hover:border-500 surface-border': !isThemeActive('nano')
+                                })}
+                                style={{ borderRadius: 30 }}
+                                onClick={() => switchTheme('nano')}
+                            >
+                                <span className="block h-1rem w-full" style={{ borderRadius: 30, background: 'linear-gradient(180deg, #1469b4 0%, rgba(20, 105, 180, 0.5) 100%)' }} />
+                            </button>
+                        </div>
+                        <div className="w-3" />
+                    </div>
+                </section>
+            </div>
+        </Sidebar>
+    );
+}
diff --git a/components/layout/footer.js b/components/layout/footer.js
new file mode 100644
index 0000000000..aaa508cab1
--- /dev/null
+++ b/components/layout/footer.js
@@ -0,0 +1,16 @@
+import pkg from 'package.json';
+
+export default function Footer() {
+    const version = pkg.version;
+
+    return (
+        <div className="layout-footer">
+            <div>
+                <span>PrimeReact {version} by </span>
+                <a href="http://www.primetek.com.tr/" target="_blank" rel="noopener noreferrer">
+                    PrimeTek
+                </a>
+            </div>
+        </div>
+    );
+}
diff --git a/components/layout/layout.js b/components/layout/layout.js
new file mode 100644
index 0000000000..c86ff6daa0
--- /dev/null
+++ b/components/layout/layout.js
@@ -0,0 +1,93 @@
+import AppContentContext from '@/components/layout/appcontentcontext';
+import Config from '@/components/layout/config';
+import Footer from '@/components/layout/footer';
+import Menu from '@/components/layout/menu';
+import Topbar from '@/components/layout/topbar';
+import { PrimeReactContext } from '@/components/lib/api/PrimeReactContext';
+import { DomHandler, classNames } from '@/components/lib/utils/Utils';
+import NewsSection from '@/components/news/newssection';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { useContext, useEffect, useState } from 'react';
+
+export default function Layout({ children }) {
+    const [sidebarActive, setSidebarActive] = useState(false);
+    const [configActive, setConfigActive] = useState(false);
+    const { ripple, inputStyle } = useContext(PrimeReactContext);
+    const { theme, darkMode, newsActive, changeTheme } = useContext(AppContentContext);
+    const router = useRouter();
+
+    const wrapperClassName = classNames('layout-wrapper', {
+        'layout-news-active': newsActive,
+        'p-input-filled': inputStyle === 'filled',
+        'p-ripple-disabled': ripple === false,
+        'layout-dark': darkMode,
+        'layout-light': !darkMode
+    });
+
+    const toggleDarkMode = () => {
+        let newTheme = null;
+
+        if (darkMode) {
+            newTheme = theme.replace('dark', 'light');
+        } else if (theme.includes('light') && theme !== 'fluent-light') {
+            newTheme = theme.replace('light', 'dark');
+        } else {
+            newTheme = 'lara-dark-cyan';
+        }
+
+        changeTheme(newTheme, !darkMode);
+    };
+
+    useEffect(() => {
+        if (sidebarActive) {
+            DomHandler.blockBodyScroll('blocked-scroll');
+        } else {
+            DomHandler.unblockBodyScroll('blocked-scroll');
+        }
+    }, [sidebarActive]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+        const handleRouteChangeComplete = (l) => {
+            setSidebarActive(false);
+        };
+
+        router.events.on('routeChangeComplete', handleRouteChangeComplete);
+
+        return () => {
+            router.events.off('routeChangeComplete', handleRouteChangeComplete);
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+    return (
+        <div className={wrapperClassName} data-p-theme={theme}>
+            <Head>
+                <title>PrimeReact - React UI Component Library</title>
+                <meta charSet="UTF-8" />
+                <meta name="description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
+                <meta name="robots" content="index, follow" />
+                <meta name="viewport" content="initial-scale=1, width=device-width" />
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:site" content="@primereact" />
+                <meta name="twitter:title" content="PrimeReact | React UI Component Library" />
+                <meta name="twitter:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content="PrimeReact | React UI Component Library" />
+                <meta property="og:url" content="https://primereact.org/" />
+                <meta property="og:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
+                <meta property="og:image" content="https://www.primefaces.org/static/social/primereact-preview.jpg" />
+                <meta property="og:ttl" content="604800" />
+                <link rel="icon" href="https://primefaces.org/cdn/primereact/images/favicon.ico" type="image/x-icon" />
+            </Head>
+            <NewsSection />
+            <Topbar showConfigurator showMenuButton onMenuButtonClick={() => setSidebarActive(true)} onConfigButtonClick={() => setConfigActive(true)} onDarkSwitchClick={toggleDarkMode} />
+            <div className={classNames('layout-mask', { 'layout-mask-active': sidebarActive })} onClick={() => setSidebarActive(false)} />
+            <Config active={configActive} onHide={() => setConfigActive(false)} onDarkSwitchClick={toggleDarkMode} />
+            <div className="layout-content">
+                <Menu active={sidebarActive} />
+                <div className="layout-content-slot">{children}</div>
+            </div>
+            <Footer />
+        </div>
+    );
+}
diff --git a/components/layout/menu.js b/components/layout/menu.js
new file mode 100644
index 0000000000..805003b173
--- /dev/null
+++ b/components/layout/menu.js
@@ -0,0 +1,44 @@
+import { classNames } from '@/components/lib/utils/Utils';
+import { useRouter } from 'next/router';
+import { memo, useEffect } from 'react';
+import MenuData from './menu.json';
+import MenuItem from './menuitem';
+
+const Menu = memo((props) => {
+    const router = useRouter();
+    const menu = MenuData.data.map((data) => {
+        const rootItem = { ...data };
+
+        rootItem.expanded = rootItem.children && rootItem.children.some((item) => item.to === router.pathname || (item.children && item.children.some((it) => it.to === router.pathname)));
+
+        return rootItem;
+    });
+
+    const scrollToActiveItem = () => {
+        const activeItem = document.querySelector('.router-link-active');
+
+        if (activeItem) {
+            activeItem.scrollIntoView({ block: 'center' });
+        }
+    };
+
+    useEffect(() => {
+        scrollToActiveItem();
+    }, []);
+
+    const sidebarClassName = classNames('layout-sidebar', { active: props.active });
+
+    return (
+        <aside className={sidebarClassName}>
+            <nav>
+                <ol className="layout-menu">
+                    {menu.map((item, index) => (
+                        <MenuItem menuItem={item} root={true} key={`_root${index}`} />
+                    ))}
+                </ol>
+            </nav>
+        </aside>
+    );
+});
+
+export default Menu;
diff --git a/components/layout/menu.json b/components/layout/menu.json
new file mode 100644
index 0000000000..7ad028c80d
--- /dev/null
+++ b/components/layout/menu.json
@@ -0,0 +1,724 @@
+{
+    "data": [
+        {
+            "name": "Getting Started",
+            "icon": "pi pi-home",
+            "children": [
+                {
+                    "name": "Installation",
+                    "to": "/installation"
+                },
+                {
+                    "name": "Configuration",
+                    "to": "/configuration"
+                },
+                {
+                    "name": "Playground",
+                    "to": "/playground"
+                }
+            ]
+        },
+        {
+            "name": "Components",
+            "icon": "pi pi-compass",
+            "children": [
+                {
+                    "name": "Form",
+                    "children": [
+                        {
+                            "name": "AutoComplete",
+                            "to": "/autocomplete"
+                        },
+                        {
+                            "name": "Calendar",
+                            "to": "/calendar"
+                        },
+                        {
+                            "name": "CascadeSelect",
+                            "to": "/cascadeselect"
+                        },
+                        {
+                            "name": "Checkbox",
+                            "to": "/checkbox"
+                        },
+                        {
+                            "name": "Chips",
+                            "to": "/chips"
+                        },
+                        {
+                            "name": "ColorPicker",
+                            "to": "/colorpicker"
+                        },
+                        {
+                            "name": "Dropdown",
+                            "to": "/dropdown"
+                        },
+                        {
+                            "name": "Editor",
+                            "to": "/editor"
+                        },
+                        {
+                            "name": "FloatLabel",
+                            "to": "/floatlabel"
+                        },
+                        {
+                            "name": "IconField",
+                            "to": "/iconfield"
+                        },
+                        {
+                            "name": "InputGroup",
+                            "to": "/inputgroup"
+                        },
+                        {
+                            "name": "InputMask",
+                            "to": "/inputmask"
+                        },
+                        {
+                            "name": "InputSwitch",
+                            "to": "/inputswitch"
+                        },
+                        {
+                            "name": "InputNumber",
+                            "to": "/inputnumber"
+                        },
+                        {
+                            "name": "InputOtp",
+                            "to": "/inputotp"
+                        },
+                        {
+                            "name": "InputText",
+                            "to": "/inputtext"
+                        },
+                        {
+                            "name": "InputTextarea",
+                            "to": "/inputtextarea"
+                        },
+                        {
+                            "name": "KeyFilter",
+                            "to": "/keyfilter"
+                        },
+                        {
+                            "name": "Knob",
+                            "to": "/knob"
+                        },
+                        {
+                            "name": "Listbox",
+                            "to": "/listbox"
+                        },
+                        {
+                            "name": "Mention",
+                            "to": "/mention"
+                        },
+                        {
+                            "name": "MultiSelect",
+                            "to": "/multiselect"
+                        },
+                        {
+                            "name": "MultiStateCheckbox",
+                            "to": "/multistatecheckbox"
+                        },
+                        {
+                            "name": "Password",
+                            "to": "/password"
+                        },
+                        {
+                            "name": "RadioButton",
+                            "to": "/radiobutton"
+                        },
+                        {
+                            "name": "Rating",
+                            "to": "/rating"
+                        },
+                        {
+                            "name": "SelectButton",
+                            "to": "/selectbutton"
+                        },
+                        {
+                            "name": "Slider",
+                            "to": "/slider"
+                        },
+                        {
+                            "name": "TreeSelect",
+                            "to": "/treeselect"
+                        },
+                        {
+                            "name": "TriStateCheckbox",
+                            "to": "/tristatecheckbox"
+                        },
+                        {
+                            "name": "ToggleButton",
+                            "to": "/togglebutton"
+                        }
+                    ]
+                },
+                {
+                    "name": "Button",
+                    "children": [
+                        {
+                            "name": "Button",
+                            "to": "/button"
+                        },
+                        {
+                            "name": "Speed Dial",
+                            "to": "/speeddial"
+                        },
+                        {
+                            "name": "SplitButton",
+                            "to": "/splitbutton"
+                        }
+                    ]
+                },
+                {
+                    "name": "Data",
+                    "children": [
+                        {
+                            "name": "DataTable",
+                            "to": "/datatable"
+                        },
+                        {
+                            "name": "DataView",
+                            "to": "/dataview"
+                        },
+                        {
+                            "name": "DataScroller",
+                            "to": "/datascroller"
+                        },
+                        {
+                            "name": "OrderList",
+                            "to": "/orderlist"
+                        },
+                        {
+                            "name": "Org Chart",
+                            "to": "/organizationchart"
+                        },
+                        {
+                            "name": "Paginator",
+                            "to": "/paginator"
+                        },
+                        {
+                            "name": "PickList",
+                            "to": "/picklist"
+                        },
+                        {
+                            "name": "Tree",
+                            "to": "/tree"
+                        },
+                        {
+                            "name": "TreeTable",
+                            "to": "/treetable"
+                        },
+                        {
+                            "name": "Timeline",
+                            "to": "/timeline"
+                        },
+                        {
+                            "name": "VirtualScroller",
+                            "to": "/virtualscroller"
+                        }
+                    ]
+                },
+                {
+                    "name": "Panel",
+                    "children": [
+                        {
+                            "name": "Accordion",
+                            "to": "/accordion"
+                        },
+                        {
+                            "name": "Card",
+                            "to": "/card"
+                        },
+                        {
+                            "name": "Deferred",
+                            "to": "/deferredcontent"
+                        },
+                        {
+                            "name": "Divider",
+                            "to": "/divider"
+                        },
+                        {
+                            "name": "Fieldset",
+                            "to": "/fieldset"
+                        },
+                        {
+                            "name": "Panel",
+                            "to": "/panel"
+                        },
+                        {
+                            "name": "ScrollPanel",
+                            "to": "/scrollpanel"
+                        },
+                        {
+                            "name": "Splitter",
+                            "to": "/splitter"
+                        },
+                        {
+                            "name": "Stepper",
+                            "to": "/stepper"
+                        },
+                        {
+                            "name": "TabView",
+                            "to": "/tabview"
+                        },
+                        {
+                            "name": "Toolbar",
+                            "to": "/toolbar"
+                        }
+                    ]
+                },
+                {
+                    "name": "Overlay",
+                    "children": [
+                        {
+                            "name": "ConfirmDialog",
+                            "to": "/confirmdialog"
+                        },
+                        {
+                            "name": "ConfirmPopup",
+                            "to": "/confirmpopup"
+                        },
+                        {
+                            "name": "Dialog",
+                            "to": "/dialog"
+                        },
+                        {
+                            "name": "OverlayPanel",
+                            "to": "/overlaypanel"
+                        },
+                        {
+                            "name": "Sidebar",
+                            "to": "/sidebar"
+                        },
+                        {
+                            "name": "Tooltip",
+                            "to": "/tooltip"
+                        }
+                    ]
+                },
+                {
+                    "name": "File",
+                    "children": [
+                        {
+                            "name": "Upload",
+                            "to": "/fileupload"
+                        }
+                    ]
+                },
+                {
+                    "name": "Menu",
+                    "children": [
+                        {
+                            "name": "Breadcrumb",
+                            "to": "/breadcrumb"
+                        },
+                        {
+                            "name": "ContextMenu",
+                            "to": "/contextmenu"
+                        },
+                        {
+                            "name": "Dock",
+                            "to": "/dock"
+                        },
+                        {
+                            "name": "MegaMenu",
+                            "to": "/megamenu"
+                        },
+                        {
+                            "name": "Menu",
+                            "to": "/menu"
+                        },
+                        {
+                            "name": "Menubar",
+                            "to": "/menubar"
+                        },
+                        {
+                            "name": "PanelMenu",
+                            "to": "/panelmenu"
+                        },
+                        {
+                            "name": "Steps",
+                            "to": "/steps"
+                        },
+                        {
+                            "name": "TabMenu",
+                            "to": "/tabmenu"
+                        },
+                        {
+                            "name": "TieredMenu",
+                            "to": "/tieredmenu"
+                        }
+                    ]
+                },
+                {
+                    "name": "Chart",
+                    "children": [
+                        {
+                            "name": "Chart.js",
+                            "to": "/chart"
+                        }
+                    ]
+                },
+                {
+                    "name": "Messages",
+                    "children": [
+                        {
+                            "name": "Message",
+                            "to": "/message"
+                        },
+                        {
+                            "name": "Messages",
+                            "to": "/messages"
+                        },
+                        {
+                            "name": "Toast",
+                            "to": "/toast"
+                        }
+                    ]
+                },
+                {
+                    "name": "Media",
+                    "children": [
+                        {
+                            "name": "Carousel",
+                            "to": "/carousel"
+                        },
+                        {
+                            "name": "Galleria",
+                            "to": "/galleria"
+                        },
+                        {
+                            "name": "Image",
+                            "to": "/image"
+                        }
+                    ]
+                },
+                {
+                    "name": "Misc",
+                    "children": [
+                        {
+                            "name": "Avatar",
+                            "to": "/avatar"
+                        },
+                        {
+                            "name": "Badge",
+                            "to": "/badge"
+                        },
+                        {
+                            "name": "BlockUI",
+                            "to": "/blockui"
+                        },
+                        {
+                            "name": "Chip",
+                            "to": "/chip"
+                        },
+                        {
+                            "name": "Inplace",
+                            "to": "/inplace"
+                        },
+                        {
+                            "name": "MeterGroup",
+                            "to": "/metergroup"
+                        },
+                        {
+                            "name": "ScrollTop",
+                            "to": "/scrolltop"
+                        },
+                        {
+                            "name": "Skeleton",
+                            "to": "/skeleton"
+                        },
+                        {
+                            "name": "ProgressBar",
+                            "to": "/progressbar"
+                        },
+                        {
+                            "name": "ProgressSpinner",
+                            "to": "/progressspinner"
+                        },
+                        {
+                            "name": "Ripple",
+                            "to": "/ripple"
+                        },
+                        {
+                            "name": "StyleClass",
+                            "to": "/styleclass"
+                        },
+                        {
+                            "name": "Tag",
+                            "to": "/tag"
+                        },
+                        {
+                            "name": "Terminal",
+                            "to": "/terminal"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Theming",
+            "icon": "pi pi-palette",
+            "children": [
+                {
+                    "name": "Overview",
+                    "to": "/theming"
+                },
+                {
+                    "name": "Colors",
+                    "to": "/colors"
+                },
+                {
+                    "name": "SASS API",
+                    "href": "https://www.primefaces.org/designer/api/primereact/9.0.0"
+                },
+                {
+                    "name": "Unstyled Mode",
+                    "children": [
+                        {
+                            "name": "Overview",
+                            "to": "/unstyled"
+                        },
+                        {
+                            "name": "Bootstrap",
+                            "to": "/bootstrap"
+                        },
+                        {
+                            "name": "Bulma",
+                            "to": "/bulma"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Pass Through",
+            "icon": "pi pi-directions",
+            "to": "/passthrough"
+        },
+        {
+            "name": "Tailwind",
+            "icon": "pi pi-heart",
+            "to": "/tailwind"
+        },
+        {
+            "name": "Figma UI Kit",
+            "icon": "pi pi-pencil",
+            "to": "/uikit"
+        },
+        {
+            "name": "Icons",
+            "icon": "pi pi-eye",
+            "children": [
+                {
+                    "name": "Prime Icons",
+                    "to": "/icons",
+                    "badge": "UPDATED"
+                },
+                {
+                    "name": "Custom Icons",
+                    "to": "/customicons"
+                }
+            ]
+        },
+        {
+            "name": "Hooks",
+            "icon": "pi pi-link",
+            "children": [
+                {
+                    "name": "Lifecycle",
+                    "children": [
+                        {
+                            "name": "useMountEffect",
+                            "to": "/hooks/usemounteffect"
+                        },
+                        {
+                            "name": "useUpdateEffect",
+                            "to": "/hooks/useupdateeffect"
+                        },
+                        {
+                            "name": "useUnmountEffect",
+                            "to": "/hooks/useunmounteffect"
+                        }
+                    ]
+                },
+                {
+                    "name": "Listener",
+                    "children": [
+                        {
+                            "name": "useEventListener",
+                            "to": "/hooks/useeventlistener"
+                        },
+                        {
+                            "name": "useOverlayListener",
+                            "to": "/hooks/useoverlaylistener"
+                        },
+                        {
+                            "name": "useOverlayScrollListener",
+                            "to": "/hooks/useoverlayscrolllistener"
+                        },
+                        {
+                            "name": "useResizeListener",
+                            "to": "/hooks/useresizelistener"
+                        }
+                    ]
+                },
+                {
+                    "name": "Element",
+                    "children": [
+                        {
+                            "name": "useClickOutside",
+                            "to": "/hooks/useclickoutside"
+                        },
+                        {
+                            "name": "useIntersectionObserver",
+                            "to": "/hooks/useintersectionobserver"
+                        },
+                        {
+                            "name": "useMouse",
+                            "to": "/hooks/usemouse"
+                        },
+                        {
+                            "name": "useMove",
+                            "to": "/hooks/usemove"
+                        }
+                    ]
+                },
+                {
+                    "name": "Timer",
+                    "children": [
+                        {
+                            "name": "useInterval",
+                            "to": "/hooks/useinterval"
+                        },
+                        {
+                            "name": "useTimeout",
+                            "to": "/hooks/usetimeout"
+                        }
+                    ]
+                },
+                {
+                    "name": "State",
+                    "children": [
+                        {
+                            "name": "useCounter",
+                            "to": "/hooks/usecounter"
+                        },
+                        {
+                            "name": "useDebounce",
+                            "to": "/hooks/usedebounce"
+                        },
+                        {
+                            "name": "useFavicon",
+                            "to": "/hooks/usefavicon"
+                        },
+                        {
+                            "name": "usePrevious",
+                            "to": "/hooks/useprevious"
+                        },
+                        {
+                            "name": "useStorage",
+                            "to": "/hooks/usestorage"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "name": "Templates",
+            "icon": "pi pi-star",
+            "to": "/templates"
+        },
+        {
+            "name": "New PrimeBlocks",
+            "icon": "pi pi-server",
+            "href": "https://primeblocks.org/",
+            "badge": "Soon"
+        },
+        {
+            "name": "PrimeFlex CSS",
+            "icon": "pi pi-table",
+            "href": "https://primeflex.org/",
+            "target": "_blank"
+        },
+        {
+            "name": "Guides",
+            "icon": "pi pi-book",
+            "children": [
+                {
+                    "name": "Accessibility",
+                    "to": "/guides/accessibility"
+                },
+                {
+                    "name": "CSS Layer",
+                    "to": "/guides/csslayer"
+                },
+                {
+                    "name": "PrimeTV",
+                    "icon": "pi pi-youtube",
+                    "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw"
+                }
+            ]
+        },
+        {
+            "name": "Support",
+            "icon": "pi pi-question",
+            "children": [
+                {
+                    "name": "Discord",
+                    "href": "https://discord.gg/gzKFYnpmCY"
+                },
+                {
+                    "name": "Forum",
+                    "href": "https://github.com/orgs/primefaces/discussions"
+                },
+                {
+                    "name": "PRO Support",
+                    "to": "/support"
+                }
+            ]
+        },
+        {
+            "name": "Contribution",
+            "to": "/contribution",
+            "icon": "pi pi-users"
+        },
+        {
+            "name": "Discover",
+            "icon": "pi pi-search",
+            "children": [
+                {
+                    "name": "About Us",
+                    "to": "/team"
+                },
+                {
+                    "name": "Roadmap",
+                    "to": "/roadmap"
+                },
+                {
+                    "name": "Source Code",
+                    "href": "https://github.com/primefaces/primereact"
+                },
+                {
+                    "name": "Changelog",
+                    "href": "https://github.com/primefaces/primereact/blob/master/CHANGELOG.md"
+                },
+                {
+                    "name": "Store",
+                    "href": "https://primeui.store/"
+                },
+                {
+                    "name": "Twitter",
+                    "href": "https://twitter.com/primereact?lang=en"
+                },
+                {
+                    "name": "Newsletter",
+                    "href": "https://www.primefaces.org/newsletter"
+                },
+                {
+                    "name": "PrimeGear",
+                    "href": "https://gear.primefaces.org/"
+                }
+            ]
+        }
+    ]
+}
diff --git a/components/layout/menuitem.js b/components/layout/menuitem.js
new file mode 100644
index 0000000000..41b78937ed
--- /dev/null
+++ b/components/layout/menuitem.js
@@ -0,0 +1,71 @@
+import { Badge } from '@/components/lib/badge/Badge';
+import { StyleClass } from '@/components/lib/styleclass/StyleClass';
+import { classNames } from '@/components/lib/utils/Utils';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useRef } from 'react';
+
+function MenuItem(props) {
+    const router = useRouter();
+    const { menuItem, root } = props;
+
+    const btnRef = useRef(null);
+
+    const isActiveRootmenuItem = (rootItem) => {
+        return rootItem.children && !rootItem.children.some((item) => item.to === router.pathname || (item.children && item.children.some((it) => it.to === router.pathname)));
+    };
+
+    return (
+        <li>
+            {menuItem.children && root && (
+                <StyleClass nodeRef={btnRef} selector="@next" enterClassName="hidden" enterActiveClassName="slidedown" leaveToClassName="hidden" leaveActiveClassName="slideup">
+                    <button ref={btnRef} type="button" className="px-link">
+                        <span className="menu-icon">
+                            <i className={menuItem.icon} />
+                        </span>
+                        <span>{menuItem.name}</span>
+                        <i className="menu-toggle-icon pi pi-angle-down" />
+                    </button>
+                </StyleClass>
+            )}
+            {menuItem?.href && (
+                <Link href={menuItem.href} passHref>
+                    <a target="_blank" rel="noopener noreferrer">
+                        {menuItem?.icon && root && (
+                            <span className="menu-icon">
+                                <i className={menuItem?.icon} />
+                            </span>
+                        )}
+                        <span>{menuItem?.name}</span>
+                        {menuItem?.badge && <Badge value={menuItem?.badge} className="ml-auto" />}
+                    </a>
+                </Link>
+            )}
+            {menuItem?.to && (
+                <Link href={menuItem?.to} passHref>
+                    <a className={classNames({ 'router-link-active': menuItem.to === router.pathname })}>
+                        {menuItem?.icon && root && (
+                            <span className="menu-icon">
+                                <i className={menuItem.icon} />
+                            </span>
+                        )}
+                        <span>{menuItem?.name}</span>
+                        {menuItem?.badge && <Badge value={menuItem.badge} className="ml-auto" />}
+                    </a>
+                </Link>
+            )}
+            {!root && menuItem.children && <span className="menu-child-category">{menuItem?.name}</span>}
+            {menuItem?.children && (
+                <div className={classNames('overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out', { hidden: menuItem.children && root && isActiveRootmenuItem(menuItem) })}>
+                    <ol>
+                        {menuItem.children.map((item, index) => (
+                            <MenuItem root={false} menuItem={item} key={`_root${index}`} />
+                        ))}
+                    </ol>
+                </div>
+            )}
+        </li>
+    );
+}
+
+export default MenuItem;
diff --git a/components/layout/topbar.js b/components/layout/topbar.js
new file mode 100644
index 0000000000..06ccf7b7e1
--- /dev/null
+++ b/components/layout/topbar.js
@@ -0,0 +1,270 @@
+import { StyleClass } from '@/components/lib/styleclass/StyleClass';
+import { classNames } from '@/components/lib/utils/Utils';
+import { DocSearch } from '@docsearch/react';
+import Link from 'next/link';
+import pkg from 'package.json';
+import { useEffect, useRef } from 'react';
+
+export default function Topbar(props) {
+    const versionsRef = useRef(null);
+    const versions = [
+        {
+            name: 'v11',
+            version: '11.0.0',
+            url: 'https://v11.primereact.org/'
+        },
+        {
+            name: `v${pkg.version.split('.')[0]}`,
+            version: pkg.version,
+            url: 'https://www.primereact.org/'
+        },
+        {
+            name: 'v9',
+            version: '9.6.3',
+            url: 'https://v9.primereact.org/'
+        }
+    ];
+
+    {
+        /* doc https://docsearch.algolia.com/docs/api/#transformitems */
+    }
+
+    function handleDocSearchTransformItems(items) {
+        const isLocalhost = process.env.NODE_ENV !== 'production';
+
+        return items.map((item) => {
+            if (isLocalhost) {
+                const url = new URL(item.url);
+
+                url.protocol = window.location.protocol;
+                url.hostname = window.location.hostname;
+                url.port = window.location.port;
+                item.url = url.toString();
+            }
+
+            return item;
+        });
+    }
+
+    const onMenuButtonClick = () => {
+        props.onMenuButtonClick();
+    };
+
+    const onConfigButtonClick = () => {
+        props.onConfigButtonClick();
+    };
+
+    const containerElement = useRef(null);
+    const scrollListener = useRef();
+
+    const bindScrollListener = () => {
+        scrollListener.current = () => {
+            if (containerElement && containerElement.current) {
+                if (window.scrollY > 0) {
+                    containerElement.current.classList.add('layout-topbar-sticky');
+                } else {
+                    containerElement.current.classList.remove('layout-topbar-sticky');
+                }
+            }
+        };
+
+        window.addEventListener('scroll', scrollListener.current);
+    };
+
+    const unbindScrollListener = () => {
+        if (scrollListener.current) {
+            window.removeEventListener('scroll', scrollListener.current);
+            scrollListener.current = null;
+        }
+    };
+
+    useEffect(() => {
+        bindScrollListener();
+
+        return function unbind() {
+            unbindScrollListener();
+        };
+    }, []);
+
+    const toggleDarkMode = () => {
+        props.onDarkSwitchClick();
+    };
+
+    return (
+        <div ref={containerElement} className="layout-topbar">
+            <div className="layout-topbar-inner">
+                <div className="layout-topbar-logo-container">
+                    <Link href="http://github.com/">
+                        <a className="layout-topbar-logo" aria-label="PrimeReact logo">
+                            <svg width="146" height="35" viewBox="0 0 146 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M39.5579 25.5583V8.52772C39.5579 8.30596 39.6909 8.17291 39.9127 8.17291H45.2347C47.3192 8.17291 48.428 9.28167 48.428 11.3661V16.7769C48.428 18.8392 47.3192 19.9701 45.2347 19.9701H42.5737V25.5583C42.5737 25.78 42.4628 25.9131 42.2189 25.9131H39.9127C39.6909 25.9131 39.5579 25.78 39.5579 25.5583ZM42.5735 17.0431H44.5249C45.1237 17.0431 45.4119 16.7105 45.4119 16.1561V11.9872C45.4119 11.4106 45.1237 11.1001 44.5249 11.1001H42.5735V17.0431ZM59.5378 16.7769V11.3662C59.5378 9.2817 58.429 8.17294 56.3445 8.17294H50.7785C50.5568 8.17294 50.4237 8.30599 50.4237 8.52774V25.5583C50.4237 25.7801 50.5568 25.9131 50.7785 25.9131H53.0848C53.3065 25.9131 53.4396 25.7801 53.4396 25.5583V19.9702H54.9697L56.4554 25.6027C56.4998 25.8022 56.6106 25.9131 56.8324 25.9131H59.1386C59.3825 25.9131 59.5156 25.7801 59.4491 25.514L57.919 19.7041C58.9834 19.2384 59.5378 18.2627 59.5378 16.7769ZM53.4394 17.0431H55.6348C56.2113 17.0431 56.5218 16.7327 56.5218 16.1561V11.9872C56.5218 11.4106 56.2113 11.1001 55.6348 11.1001H53.4394V17.0431ZM64.4162 8.17294H62.1099C61.866 8.17294 61.7551 8.30599 61.7551 8.52774V25.5583C61.7551 25.7801 61.866 25.9131 62.1099 25.9131H64.4162C64.6379 25.9131 64.771 25.7801 64.771 25.5583V8.52774C64.771 8.30599 64.6379 8.17294 64.4162 8.17294ZM76.2577 8.17294H79.1849C79.4731 8.17294 79.6284 8.32816 79.6284 8.61644V25.4696C79.6284 25.7579 79.4731 25.9131 79.1849 25.9131H77.1226C76.8343 25.9131 76.6791 25.7579 76.6791 25.4696V15.4908H76.5238L74.3285 25.514C74.262 25.7801 74.1067 25.9131 73.8406 25.9131H72.754C72.4879 25.9131 72.3327 25.7801 72.2662 25.514L70.0708 15.4908H69.9156V25.4696C69.9156 25.7579 69.7604 25.9131 69.4721 25.9131H67.432C67.1437 25.9131 66.9885 25.7579 66.9885 25.4696V8.61644C66.9885 8.32816 67.1437 8.17294 67.432 8.17294H70.3591C70.6252 8.17294 70.7804 8.30599 70.847 8.57209L73.3084 19.6154L75.7699 8.57209C75.8364 8.30599 75.9916 8.17294 76.2577 8.17294ZM90.694 10.7453V8.52774C90.694 8.30599 90.6053 8.17294 90.3392 8.17294H82.1787C81.9791 8.17294 81.8461 8.30599 81.8461 8.52774V25.5583C81.8461 25.7801 81.9791 25.9131 82.1787 25.9131H90.3392C90.6053 25.9131 90.694 25.7801 90.694 25.5583V23.3408C90.694 23.0969 90.6053 22.986 90.3392 22.986H84.7954V18.5066H89.0308C89.2526 18.5066 89.3856 18.3735 89.3856 18.1296V15.9343C89.3856 15.6903 89.2526 15.5573 89.0308 15.5573H84.7954V11.1222H90.3392C90.6053 11.1222 90.694 10.967 90.694 10.7453Z"
+                                    fill="var(--surface-900)"
+                                />
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M101.937 11.3661V16.7769C101.937 18.2626 101.382 19.2384 100.318 19.704L101.848 25.5139C101.914 25.78 101.781 25.9131 101.537 25.9131H99.2312C99.0095 25.9131 98.8986 25.8022 98.8542 25.6026L97.3685 19.9701H95.8384V25.5583C95.8384 25.78 95.7054 25.9131 95.4836 25.9131H93.1774C92.9556 25.9131 92.8226 25.78 92.8226 25.5583V8.52772C92.8226 8.30596 92.9556 8.17291 93.1774 8.17291H98.7434C100.828 8.17291 101.937 9.28167 101.937 11.3661ZM95.8384 17.0431H98.0338C98.6103 17.0431 98.9208 16.7327 98.9208 16.1561V11.9872C98.9208 11.4106 98.6103 11.1001 98.0338 11.1001H95.8384V17.0431ZM113.002 10.7453V8.52774C113.002 8.30599 112.913 8.17294 112.647 8.17294H104.487C104.287 8.17294 104.154 8.30599 104.154 8.52774V25.5583C104.154 25.7801 104.287 25.9131 104.487 25.9131H112.647C112.913 25.9131 113.002 25.7801 113.002 25.5583V23.3408C113.002 23.0969 112.913 22.986 112.647 22.986H107.104V18.5066H111.339C111.561 18.5066 111.694 18.3735 111.694 18.1296V15.9343C111.694 15.6903 111.561 15.5573 111.339 15.5573H107.104V11.1222H112.647C112.913 11.1222 113.002 10.967 113.002 10.7453ZM125.243 25.9131H122.892C122.693 25.9131 122.582 25.8022 122.537 25.6027L121.916 22.3651H117.969L117.371 25.6027C117.326 25.8022 117.215 25.9131 117.016 25.9131H114.643C114.399 25.9131 114.288 25.7801 114.355 25.5361L118.036 8.48339C118.08 8.26164 118.213 8.17294 118.413 8.17294H121.495C121.695 8.17294 121.828 8.26164 121.872 8.48339L125.553 25.5361C125.598 25.7801 125.509 25.9131 125.243 25.9131ZM119.943 12.0536L121.362 19.7927H118.524L119.943 12.0536ZM135.998 11.3662V13.7611C135.998 13.9828 135.865 14.1159 135.643 14.1159H133.426C133.182 14.1159 133.071 13.9828 133.071 13.7611V11.9871C133.071 11.4105 132.76 11.1001 132.184 11.1001H131.031C130.432 11.1001 130.144 11.4105 130.144 11.9871V22.099C130.144 22.6977 130.454 22.986 131.031 22.986H132.184C132.76 22.986 133.071 22.6977 133.071 22.099V20.325C133.071 20.1032 133.182 19.9702 133.426 19.9702H135.643C135.865 19.9702 135.998 20.1032 135.998 20.325V22.7199C135.998 24.8044 134.867 25.9131 132.805 25.9131H130.321C128.237 25.9131 127.106 24.8044 127.106 22.7199V11.3662C127.106 9.2817 128.237 8.17294 130.321 8.17294H132.805C134.867 8.17294 135.998 9.2817 135.998 11.3662ZM145.622 8.17294H137.461C137.24 8.17294 137.107 8.30599 137.107 8.52774V10.7453C137.107 10.967 137.24 11.1001 137.461 11.1001H140.034V25.5583C140.034 25.8022 140.167 25.9131 140.389 25.9131H142.695C142.939 25.9131 143.05 25.8022 143.05 25.5583V11.1001H145.622C145.866 11.1001 145.977 10.967 145.977 10.7453V8.52774C145.977 8.30599 145.866 8.17294 145.622 8.17294Z"
+                                    fill="var(--primary-color)"
+                                />
+                                <mask id="mask0_2642_713" className="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="33" height="35">
+                                    <path fillRule="evenodd" clipRule="evenodd" d="M0.946167 0.0430908H32.1679V34.0431H0.946167V0.0430908Z" fill="white" />
+                                </mask>
+                                <g mask="url(#mask0_2642_713)">
+                                    <path
+                                        fillRule="evenodd"
+                                        clipRule="evenodd"
+                                        d="M31.5357 13.0197L29.2036 17.0218L31.531 21.0161C32.3802 22.4733 32.3802 24.2131 31.5311 25.6702C30.682 27.1274 29.1612 27.9973 27.463 27.9973H22.8081L20.6555 31.6915C19.7975 33.164 18.2608 34.0431 16.5447 34.0431C14.8286 34.0431 13.2918 33.164 12.4337 31.6915L10.2811 27.9973H5.617C3.93113 27.9973 2.42136 27.1337 1.57841 25.6871C0.735451 24.2405 0.735451 22.5131 1.57841 21.0666L3.91045 17.0644L1.58298 13.0702C0.733895 11.613 0.733895 9.87311 1.58298 8.41596C2.43207 6.95878 3.95286 6.08884 5.65104 6.08884H10.306L12.4585 2.39474C13.3165 0.922318 14.8535 0.0430908 16.5695 0.0430908C18.2856 0.0430908 19.8223 0.922227 20.6803 2.39474L22.8329 6.08884H27.4971C29.183 6.08884 30.6927 6.95252 31.5357 8.3991C32.3787 9.84573 32.3787 11.573 31.5357 13.0197ZM16.5695 1.06124C15.225 1.0612 14.0208 1.74999 13.3486 2.90374L11.4927 6.08873H21.6463L19.7904 2.90374C19.1182 1.74999 17.914 1.06124 16.5695 1.06124ZM22.7105 26.1286L22.6607 26.2141L22.6534 26.2266L22.5337 26.432L21.8976 27.5237L21.7881 27.7117L20.4662 29.9803L20.0676 30.6643L19.7869 31.146L19.7763 31.1484L19.77 31.1592C19.0978 32.313 17.8714 32.6453 16.5269 32.6453C15.1843 32.6453 14.004 32.3149 13.3312 31.1641L13.31 31.1588L12.6277 29.9878L12.4567 29.6945L5.09715 17.0644L6.43206 14.7736L6.43225 14.7744L8.78685 10.7356L8.7852 10.7353L9.05248 10.2767L9.05421 10.277L10.9022 7.10709L22.2401 7.10314L28.017 17.0219L22.7105 26.1286ZM30.6411 25.1613C29.9777 26.2996 28.7896 26.9792 27.4629 26.9792H23.4014L28.6101 18.0401L30.641 21.5253C31.3043 22.6636 31.3043 24.0229 30.6411 25.1613ZM2.46839 25.178C3.1256 26.3058 4.30263 26.9791 5.617 26.9791H9.6878L4.50379 18.0826L2.46839 21.5756C1.81123 22.7035 1.81123 24.0502 2.46839 25.178ZM2.47303 12.5611C1.80969 11.4227 1.80969 10.0634 2.47303 8.92507C3.13632 7.78669 4.32437 7.10706 5.65105 7.10706H9.71266L4.50381 16.0462L2.47303 12.5611ZM27.497 7.10706C28.8114 7.10706 29.9885 7.78039 30.6456 8.90826C31.3028 10.036 31.3028 11.3827 30.6456 12.5106L28.6102 16.0036L23.4262 7.10706H27.497Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                </g>
+                                <path d="M22.0969 18.6465L20.3461 18.2616L21.7078 20.1862V26.1522L26.0214 22.3031L26.3764 15.7598L24.2367 16.5296L22.0969 18.6465Z" fill="var(--primary-color)" />
+                                <path d="M11.2035 18.6465L12.9543 18.2616L11.5926 20.1862V26.1522L7.27906 22.3031L6.92397 15.7598L9.06376 16.5296L11.2035 18.6465Z" fill="var(--primary-color)" />
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M12.1761 20.5713L13.7323 18.2618L14.7049 18.8392H18.5955L19.5681 18.2618L21.1243 20.5713V29.2316L19.3056 32.6659H13.6397L12.1761 29.2316V20.5713Z"
+                                    fill="var(--primary-color)"
+                                />
+                                <path d="M21.7079 29.8089L24.2367 27.3071V24.8052L21.7079 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                <path d="M11.5927 29.8089L9.06387 27.3071V24.8052L11.5927 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                <path fillRule="evenodd" clipRule="evenodd" d="M16.2613 7.09967H14.1215L12.5652 10.7563L15.0941 18.0694H18.401L20.7353 10.7563L19.1791 7.09967H17.0394V18.0694H16.2613V7.09967Z" fill="var(--primary-color)" />
+                                <path d="M15.0942 18.0694L6.7296 14.9901L5.56244 10.1788L12.7599 10.7562L15.2887 18.0694H15.0942Z" fill="var(--primary-color)" />
+                                <path d="M18.4011 18.0694L26.7658 14.9901L27.9329 10.1788L20.5409 10.7562L18.2066 18.0694H18.4011Z" fill="var(--primary-color)" />
+                                <path d="M21.1245 10.1789L24.8545 9.794L22.4862 7.09967H19.7628L21.1245 10.1789Z" fill="var(--primary-color)" />
+                                <path d="M12.1762 10.1789L8.4462 9.794L10.8145 7.09967H13.5378L12.1762 10.1789Z" fill="var(--primary-color)" />
+                            </svg>
+                        </a>
+                    </Link>
+                    <Link href="http://github.com/" aria-label="PrimeReact logo">
+                        <a className="layout-topbar-icon">
+                            <svg width="32" height="35" viewBox="0 0 32 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <mask id="mask0_2642_813" className="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="35">
+                                    <path fillRule="evenodd" clipRule="evenodd" d="M0.68338 0.0430908H31.9051V34.0431H0.68338V0.0430908Z" fill="white" />
+                                </mask>
+                                <g mask="url(#mask0_2642_813)">
+                                    <path
+                                        fillRule="evenodd"
+                                        clipRule="evenodd"
+                                        d="M31.2729 13.0197L28.9408 17.0218L31.2682 21.0161C32.1174 22.4733 32.1174 24.2131 31.2683 25.6702C30.4192 27.1274 28.8984 27.9973 27.2002 27.9973H22.5453L20.3927 31.6915C19.5348 33.164 17.998 34.0431 16.2819 34.0431C14.5658 34.0431 13.029 33.164 12.1709 31.6915L10.0184 27.9973H5.35421C3.66835 27.9973 2.15858 27.1337 1.31562 25.6871C0.472664 24.2405 0.472664 22.5131 1.31562 21.0666L3.64767 17.0644L1.32019 13.0702C0.471109 11.613 0.471109 9.87311 1.32019 8.41596C2.16928 6.95878 3.69008 6.08884 5.38825 6.08884H10.0432L12.1958 2.39474C13.0537 0.922318 14.5907 0.0430908 16.3067 0.0430908C18.0228 0.0430908 19.5595 0.922227 20.4176 2.39474L22.5701 6.08884H27.2343C28.9202 6.08884 30.43 6.95252 31.2729 8.3991C32.1159 9.84573 32.1159 11.573 31.2729 13.0197ZM16.3067 1.06124C14.9622 1.0612 13.7581 1.74999 13.0858 2.90374L11.2299 6.08873H21.3835L19.5276 2.90374C18.8554 1.74999 17.6513 1.06124 16.3067 1.06124ZM22.4477 26.1286L22.3979 26.2141L22.3906 26.2266L22.2709 26.432L21.6348 27.5237L21.5253 27.7117L20.2034 29.9803L19.8048 30.6643L19.5241 31.146L19.5135 31.1484L19.5072 31.1592C18.835 32.313 17.6086 32.6453 16.2641 32.6453C14.9215 32.6453 13.7412 32.3149 13.0684 31.1641L13.0472 31.1588L12.3649 29.9878L12.1939 29.6945L4.83436 17.0644L6.16928 14.7736L6.16946 14.7744L8.52406 10.7356L8.52241 10.7353L8.78969 10.2767L8.79143 10.277L10.6394 7.10709L21.9773 7.10314L27.7542 17.0219L22.4477 26.1286ZM30.3783 25.1613C29.7149 26.2996 28.5268 26.9792 27.2002 26.9792H23.1386L28.3474 18.0401L30.3782 21.5253C31.0416 22.6636 31.0416 24.0229 30.3783 25.1613ZM2.20561 25.178C2.86282 26.3058 4.03984 26.9791 5.35421 26.9791H9.42501L4.24101 18.0826L2.20561 21.5756C1.54845 22.7035 1.54845 24.0502 2.20561 25.178ZM2.21024 12.5611C1.5469 11.4227 1.5469 10.0634 2.21024 8.92507C2.87353 7.78669 4.06159 7.10706 5.38826 7.10706H9.44987L4.24102 16.0462L2.21024 12.5611ZM27.2342 7.10706C28.5486 7.10706 29.7257 7.78039 30.3828 8.90826C31.04 10.036 31.04 11.3827 30.3828 12.5106L28.3474 16.0036L23.1634 7.10706H27.2342Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                </g>
+                                <path d="M21.8341 18.6465L20.0833 18.2616L21.445 20.1862V26.1522L25.7586 22.3031L26.1137 15.7598L23.9739 16.5296L21.8341 18.6465Z" fill="var(--primary-color)" />
+                                <path d="M10.9407 18.6465L12.6914 18.2616L11.3298 20.1862V26.1522L7.01621 22.3031L6.66113 15.7598L8.80091 16.5296L10.9407 18.6465Z" fill="var(--primary-color)" />
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M11.9133 20.5713L13.4695 18.2618L14.4421 18.8392H18.3327L19.3053 18.2618L20.8615 20.5713V29.2316L19.0428 32.6659H13.3769L11.9133 29.2316V20.5713Z"
+                                    fill="var(--primary-color)"
+                                />
+                                <path d="M21.4451 29.8089L23.9739 27.3071V24.8052L21.4451 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                <path d="M11.3299 29.8089L8.80102 27.3071V24.8052L11.3299 26.9221V29.8089Z" fill="var(--primary-color)" />
+                                <path fillRule="evenodd" clipRule="evenodd" d="M15.9985 7.09967H13.8586L12.3024 10.7563L14.8313 18.0694H18.1382L20.4725 10.7563L18.9163 7.09967H16.7766V18.0694H15.9985V7.09967Z" fill="var(--primary-color)" />
+                                <path d="M14.8314 18.0694L6.46675 14.9901L5.29959 10.1788L12.4971 10.7562L15.0259 18.0694H14.8314Z" fill="var(--primary-color)" />
+                                <path d="M18.1383 18.0694L26.5029 14.9901L27.6701 10.1788L20.2781 10.7562L17.9438 18.0694H18.1383Z" fill="var(--primary-color)" />
+                                <path d="M20.8617 10.1789L24.5916 9.794L22.2233 7.09967H19.5L20.8617 10.1789Z" fill="var(--primary-color)" />
+                                <path d="M11.9134 10.1789L8.18341 9.794L10.5517 7.09967H13.2751L11.9134 10.1789Z" fill="var(--primary-color)" />
+                            </svg>
+                        </a>
+                    </Link>
+                </div>
+
+                <ul className="flex list-none m-0 p-0 gap-2 align-items-center">
+                    <li>
+                        <DocSearch appId="SCRI13XXZO" apiKey="ea9e6c8a983c5646d6b9079921d4aed7" indexName="primereact" container="" debug={false} transformItems={handleDocSearchTransformItems} />
+                    </li>
+                    <li>
+                        <a
+                            href="https://github.com/primefaces/primereact"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+                        >
+                            <i className="pi pi-github text-700" />
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="https://discord.gg/gzKFYnpmCY"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+                        >
+                            <i className="pi pi-discord text-700" />
+                        </a>
+                    </li>
+                    <li>
+                        <a
+                            href="https://github.com/orgs/primefaces/discussions"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+                        >
+                            <i className="pi pi-comments text-700" />
+                        </a>
+                    </li>
+                    <li>
+                        <button
+                            type="button"
+                            className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary"
+                            onClick={toggleDarkMode}
+                        >
+                            <i className={classNames('pi text-700', { 'pi-moon': props.dark, 'pi-sun': !props.dark })} />
+                        </button>
+                    </li>
+                    {props.showConfigurator && (
+                        <li>
+                            <button type="button" className="p-button flex-shrink-0 flex border-1 w-2rem h-2rem p-0 align-items-center justify-content-center transition-all transition-duration-300 min-w-0" onClick={onConfigButtonClick}>
+                                <i className="pi pi-palette" />
+                            </button>
+                        </li>
+                    )}
+
+                    <li className="relative">
+                        <StyleClass nodeRef={versionsRef} selector="@next" enterClassName="hidden" enterActiveClassName="scalein" leaveToClassName="hidden" leaveActiveClassName="fadeout" hideOnOutsideClick>
+                            <button
+                                ref={versionsRef}
+                                type="button"
+                                style={{ maxWidth: '8rem' }}
+                                className="px-link flex align-items-center surface-card h-2rem px-2 border-1 border-solid surface-border transition-all transition-duration-300 hover:border-primary"
+                            >
+                                <span className="text-900 block white-space-nowrap overflow-hidden">{versions && versions.length ? versions[1].version : ''}</span>
+                                <span className="ml-2 pi pi-angle-down text-600" />
+                            </button>
+                        </StyleClass>
+                        <div className="p-3 surface-overlay hidden absolute right-0 top-auto border-round shadow-2 origin-top w-8rem">
+                            <ul className="list-none m-0 p-0">
+                                {versions.map((version) => {
+                                    return (
+                                        <li role="none" key={version.version}>
+                                            <a href={version.url} className="inline-flex p-2 border-round hover:surface-hover w-full">
+                                                <span className="font-bold text-900">{version.name}</span>
+                                                <span className="ml-2 text-700 white-space-nowrap block overflow-hidden text-overflow-ellipsis">({version.version})</span>
+                                            </a>
+                                        </li>
+                                    );
+                                })}
+                            </ul>
+                        </div>
+                    </li>
+                    {props.showMenuButton && (
+                        <li className="menu-button">
+                            <button
+                                type="button"
+                                className="flex flex-shrink-0 px-link border-1 border-solid w-2rem h-2rem surface-border border-round surface-card align-items-center justify-content-center transition-all transition-duration-300 hover:border-primary menu-button"
+                                onClick={onMenuButtonClick}
+                                aria-haspopup
+                                aria-label="Menu"
+                            >
+                                <i className="pi pi-bars text-700" />
+                            </button>
+                        </li>
+                    )}
+                </ul>
+            </div>
+        </div>
+    );
+}
diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
new file mode 100644
index 0000000000..edaa0d03e0
--- /dev/null
+++ b/components/lib/accordion/Accordion.js
@@ -0,0 +1,349 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { AccordionBase, AccordionTabBase } from './AccordionBase';
+
+export const AccordionTab = () => {};
+
+export const Accordion = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = AccordionBase.getProps(inProps, context);
+    const [idState, setIdState] = React.useState(props.id);
+    const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
+    const elementRef = React.useRef(null);
+    const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
+    const count = React.Children.count(props.children);
+    const metaData = {
+        props,
+        state: {
+            id: idState,
+            activeIndex: activeIndexState
+        }
+    };
+
+    const { ptm, ptmo, cx, isUnstyled } = AccordionBase.setMetaData({
+        ...metaData
+    });
+
+    useHandleStyle(AccordionBase.css.styles, isUnstyled, { name: 'accordion' });
+
+    const getTabProp = (tab, name) => AccordionTabBase.getCProp(tab, name);
+
+    const getTabPT = (tab, key, index) => {
+        const tabMetaData = {
+            // props: atProps, /* @todo */
+            parent: metaData,
+            context: {
+                index,
+                count,
+                first: index === 0,
+                last: index === count - 1,
+                selected: isSelected(index),
+                disabled: getTabProp(tab, 'disabled')
+            }
+        };
+
+        return mergeProps(ptm(`tab.${key}`, { tab: tabMetaData }), ptm(`accordiontab.${key}`, { accordiontab: tabMetaData }), ptm(`accordiontab.${key}`, tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
+    };
+
+    const onTabHeaderClick = (event, tab, index) => {
+        changeActiveIndex(event, tab, index);
+    };
+
+    const changeActiveIndex = (event, tab, index) => {
+        if (!getTabProp(tab, 'disabled')) {
+            const selected = isSelected(index);
+            let newActiveIndex = null;
+
+            if (props.multiple) {
+                const indexes = activeIndex || [];
+
+                newActiveIndex = selected ? indexes.filter((i) => i !== index) : [...indexes, index];
+            } else {
+                newActiveIndex = selected ? null : index;
+            }
+
+            const callback = selected ? props.onTabClose : props.onTabOpen;
+
+            callback && callback({ originalEvent: event, index: index });
+
+            if (props.onTabChange) {
+                props.onTabChange({
+                    originalEvent: event,
+                    index: newActiveIndex
+                });
+            } else {
+                setActiveIndexState(newActiveIndex);
+            }
+        }
+
+        event.preventDefault();
+    };
+
+    const onTabHeaderKeyDown = (event, tab, index) => {
+        switch (event.code) {
+            case 'ArrowDown':
+                onTabArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onTabArrowUpKey(event);
+                break;
+
+            case 'Home':
+                onTabHomeKey(event);
+                break;
+
+            case 'End':
+                onTabEndKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onTabEnterKey(event, tab, index);
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    const onTabArrowDownKey = (event) => {
+        const nextHeaderAction = findNextHeaderAction(event.target.parentElement.parentElement);
+
+        nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
+        event.preventDefault();
+    };
+
+    const onTabArrowUpKey = (event) => {
+        const prevHeaderAction = findPrevHeaderAction(event.target.parentElement.parentElement);
+
+        prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
+        event.preventDefault();
+    };
+
+    const onTabHomeKey = (event) => {
+        const firstHeaderAction = findFirstHeaderAction();
+
+        changeFocusedTab(firstHeaderAction);
+        event.preventDefault();
+    };
+
+    const onTabEndKey = (event) => {
+        const lastHeaderAction = findLastHeaderAction();
+
+        changeFocusedTab(lastHeaderAction);
+        event.preventDefault();
+    };
+
+    const onTabEnterKey = (event, tab, index) => {
+        changeActiveIndex(event, tab, index);
+        event.preventDefault();
+    };
+
+    const findNextHeaderAction = (tabElement, selfCheck = false) => {
+        const nextTabElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+        const headerElement = DomHandler.findSingle(nextTabElement, '[data-pc-section="header"]');
+
+        return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findNextHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
+    };
+
+    const findPrevHeaderAction = (tabElement, selfCheck = false) => {
+        const prevTabElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+        const headerElement = DomHandler.findSingle(prevTabElement, '[data-pc-section="header"]');
+
+        return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findPrevHeaderAction(headerElement.parentElement) : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')) : null;
+    };
+
+    const findFirstHeaderAction = () => {
+        return findNextHeaderAction(elementRef.current.firstElementChild, true);
+    };
+
+    const findLastHeaderAction = () => {
+        return findPrevHeaderAction(elementRef.current.lastElementChild, true);
+    };
+
+    const changeFocusedTab = (element) => {
+        if (element) {
+            DomHandler.focus(element);
+        }
+    };
+
+    const isSelected = (index) => {
+        return props.multiple && Array.isArray(activeIndex) ? activeIndex && activeIndex.some((i) => i === index) : activeIndex === index;
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current
+    }));
+
+    useMountEffect(() => {
+        if (!idState) {
+            setIdState(UniqueComponentId());
+        }
+    });
+
+    if (!idState) {
+        return null;
+    }
+
+    const createTabHeader = (tab, selected, index) => {
+        const style = { ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'headerStyle') || {}) };
+        const headerId = idState + '_header_' + index;
+        const ariaControls = idState + '_content_' + index;
+        const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
+        const headerTitleProps = mergeProps(
+            {
+                className: cx('accordiontab.headertitle')
+            },
+            getTabPT(tab, 'headertitle', index)
+        );
+        const tabCProps = AccordionTabBase.getCProps(tab);
+        const header = getTabProp(tab, 'headerTemplate') ? ObjectUtils.getJSXElement(getTabProp(tab, 'headerTemplate'), tabCProps) : <span {...headerTitleProps}>{ObjectUtils.getJSXElement(getTabProp(tab, 'header'), tabCProps)}</span>;
+        const headerIconProps = mergeProps(
+            {
+                'aria-hidden': 'true',
+                className: cx('accordiontab.headericon')
+            },
+            getTabPT(tab, 'headericon', index)
+        );
+        const icon = selected ? props.collapseIcon || <ChevronDownIcon {...headerIconProps} /> : props.expandIcon || <ChevronRightIcon {...headerIconProps} />;
+        const toggleIcon = IconUtils.getJSXIcon(icon, { ...headerIconProps }, { props, selected });
+        const headerProps = mergeProps(
+            {
+                className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('accordiontab.header', { selected, getTabProp, tab })),
+                style,
+                'data-p-highlight': selected,
+                'data-p-disabled': getTabProp(tab, 'disabled')
+            },
+            getTabPT(tab, 'header', index)
+        );
+
+        const headerActionProps = mergeProps(
+            {
+                id: headerId,
+                href: '#' + ariaControls,
+                className: cx('accordiontab.headeraction'),
+                role: 'button',
+                tabIndex,
+                onClick: (e) => onTabHeaderClick(e, tab, index),
+                onKeyDown: (e) => onTabHeaderKeyDown(e, tab, index),
+                'aria-disabled': getTabProp(tab, 'disabled'),
+                'aria-controls': ariaControls,
+                'aria-expanded': selected
+            },
+            getTabPT(tab, 'headeraction', index)
+        );
+
+        return (
+            <div {...headerProps}>
+                <a {...headerActionProps}>
+                    {toggleIcon}
+                    {header}
+                </a>
+            </div>
+        );
+    };
+
+    const createTabContent = (tab, selected, index) => {
+        const style = { ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'contentStyle') || {}) };
+        const contentId = idState + '_content_' + index;
+        const ariaLabelledby = idState + '_header_' + index;
+        const contentRef = React.createRef();
+        const toggleableContentProps = mergeProps(
+            {
+                id: contentId,
+                ref: contentRef,
+                className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('accordiontab.toggleablecontent')),
+                style,
+                role: 'region',
+                'aria-labelledby': ariaLabelledby
+            },
+            getTabPT(tab, 'toggleablecontent', index)
+        );
+
+        const contentProps = mergeProps(
+            {
+                className: cx('accordiontab.content')
+            },
+            getTabPT(tab, 'content', index)
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('accordiontab.transition'),
+                timeout: { enter: 1000, exit: 450 },
+                in: selected,
+                unmountOnExit: true,
+                options: props.transitionOptions
+            },
+            getTabPT(tab, 'transition', index)
+        );
+
+        return (
+            <CSSTransition nodeRef={contentRef} {...transitionProps}>
+                <div {...toggleableContentProps}>
+                    <div {...contentProps}>{getTabProp(tab, 'children')}</div>
+                </div>
+            </CSSTransition>
+        );
+    };
+
+    const createTab = (tab, index) => {
+        if (ObjectUtils.isValidChild(tab, 'AccordionTab')) {
+            const key = idState + '_' + index;
+            const selected = isSelected(index);
+            const tabHeader = createTabHeader(tab, selected, index);
+            const tabContent = createTabContent(tab, selected, index);
+
+            const rootProps = mergeProps(
+                {
+                    className: cx('accordiontab.root', { selected })
+                },
+                AccordionTabBase.getCOtherProps(tab),
+                getTabPT(tab, 'root', index)
+            );
+
+            return (
+                <div {...rootProps} key={key}>
+                    {tabHeader}
+                    {tabContent}
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    const createTabs = () => {
+        return React.Children.map(props.children, createTab);
+    };
+
+    const tabs = createTabs();
+    const rootProps = mergeProps(
+        {
+            className: classNames(props.className, cx('root')),
+            style: props.style
+        },
+        AccordionBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    return (
+        <div id={idState} ref={elementRef} {...rootProps}>
+            {tabs}
+        </div>
+    );
+});
+
+AccordionTab.displayName = 'AccordionTab';
+
+Accordion.displayName = 'Accordion';
diff --git a/components/lib/accordion/AccordionBase.js b/components/lib/accordion/AccordionBase.js
new file mode 100644
index 0000000000..c2972d96b2
--- /dev/null
+++ b/components/lib/accordion/AccordionBase.js
@@ -0,0 +1,87 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-accordion p-component',
+    accordiontab: {
+        root: ({ selected }) =>
+            classNames('p-accordion-tab', {
+                'p-accordion-tab-active': selected
+            }),
+        content: 'p-accordion-content',
+        header: ({ selected, getTabProp, tab }) =>
+            classNames('p-accordion-header', {
+                'p-highlight': selected,
+                'p-disabled': getTabProp(tab, 'disabled')
+            }),
+        headeraction: 'p-accordion-header-link',
+        headericon: 'p-accordion-toggle-icon',
+        headertitle: 'p-accordion-header-text',
+        toggleablecontent: 'p-toggleable-content',
+        transition: 'p-toggleable-content'
+    }
+};
+
+const styles = `
+@layer primereact {
+    .p-accordion-header-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        user-select: none;
+        position: relative;
+        text-decoration: none;
+    }
+    
+    .p-accordion-header-link:focus {
+        z-index: 1;
+    }
+    
+    .p-accordion-header-text {
+        line-height: 1;
+        width: 100%;
+    }
+}
+`;
+
+export const AccordionBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Accordion',
+        id: null,
+        activeIndex: null,
+        className: null,
+        style: null,
+        multiple: false,
+        expandIcon: null,
+        collapseIcon: null,
+        transitionOptions: null,
+        onTabOpen: null,
+        onTabClose: null,
+        onTabChange: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
+
+export const AccordionTabBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'AccordionTab',
+        className: null,
+        contentClassName: null,
+        contentStyle: null,
+        disabled: false,
+        header: null,
+        headerClassName: null,
+        headerStyle: null,
+        headerTemplate: null,
+        style: null,
+        tabIndex: 0,
+        children: undefined
+    },
+    getCProp: (tab, name) => ObjectUtils.getComponentProp(tab, name, AccordionTabBase.defaultProps),
+    getCProps: (tab) => ObjectUtils.getComponentProps(tab, AccordionTabBase.defaultProps),
+    getCOtherProps: (tab) => ObjectUtils.getComponentDiffProps(tab, AccordionTabBase.defaultProps)
+});
diff --git a/components/lib/accordion/accordion.d.ts b/components/lib/accordion/accordion.d.ts
new file mode 100644
index 0000000000..86fd46a3fd
--- /dev/null
+++ b/components/lib/accordion/accordion.d.ts
@@ -0,0 +1,342 @@
+/**
+ *
+ * Accordion groups a collection of contents in tabs.
+ *
+ * [Live Demo](https://www.primereact.org/accordion/)
+ *
+ * Helper Components:
+ *
+ * - {@link AccordionTab}
+ *
+ * @module accordion
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type AccordionPassThroughType<T> = PassThroughType<T, AccordionPassThroughMethodOptions>;
+export declare type AccordionTabPassThroughType<T> = PassThroughType<T, AccordionTabPassThroughMethodOptions>;
+export declare type AccordionPassThroughTransitionType = ReactCSSTransitionProps | ((options: AccordionPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionTabPassThroughMethodOptions {
+    props: AccordionTabProps;
+    parent: AccordionPassThroughMethodOptions;
+    context: AccordionContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionTabProps.pt}
+ */
+export interface AccordionTabPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the headeraction's DOM element.
+     */
+    headerAction?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the headericon's DOM element.
+     */
+    headerIcon?: AccordionTabPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the headertitle's DOM element.
+     */
+    headerTitle?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleableContent?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: AccordionPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline context in Accordion component.
+ */
+export interface AccordionContext {
+    /**
+     * Opened tab index.
+     */
+    index: number;
+    /**
+     * Total number of tabs
+     */
+    count: number;
+    /**
+     * Is this the first tab?
+     * @defaultValue false
+     */
+    first: boolean;
+    /**
+     * Is this the last tab?
+     * @defaultValue false
+     */
+    last: boolean;
+    /**
+     * Is this tab currently selected.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Is this tab currently disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in AccordionTab component.
+ * @group Properties
+ */
+interface AccordionTabProps {
+    /**
+     * Style class of the tab header and content.
+     */
+    className?: string | undefined;
+    /**
+     * Style class of the tab content.
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: React.CSSProperties | undefined;
+    /**
+     * Whether the tab is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Used to define the header of the tab.
+     */
+    header?: React.ReactNode | ((props: AccordionTabProps) => React.ReactNode) | undefined;
+    /**
+     * Style class of the tab header.
+     */
+    headerClassName?: string | undefined;
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: React.CSSProperties | undefined;
+    /**
+     * Custom header template of the tab.
+     */
+    headerTemplate?: React.ReactNode | ((props: AccordionTabProps) => React.ReactNode);
+    /**
+     * Inline style of the tab header and content.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Index of the element in tabbing order.
+     * @defaultValue 0
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionTabPassThroughOptions}
+     */
+    pt?: AccordionTabPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * AccordionTab is a helper component for Accordion.
+ * @group Component
+ */
+export declare class AccordionTab extends React.Component<AccordionTabProps, any> {}
+
+/**
+ * Custom tab open event.
+ * @see {@link AccordionProps.onTabOpen}
+ * @event
+ */
+export interface AccordionTabOpenEvent {
+    /**
+     * Browser mouse event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Opened tab index.
+     */
+    index: number;
+}
+
+/**
+ * Custom tab close event.
+ * @see {@link AccordionProps.onTabClose}
+ * @extends {AccordionTabOpenEvent}
+ * @event
+ */
+export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
+
+/**
+ * Custom tab change event.
+ * @see {@link AccordionProps.onTabChange}
+ * @event
+ */
+export interface AccordionTabChangeEvent {
+    /**
+     * Browser mouse event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Opened tab index.
+     */
+    index: number | number[];
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionPassThroughMethodOptions {
+    props: AccordionProps;
+    state: AccordionState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionProps.pt}
+ */
+export interface AccordionPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to accordion tabs.
+     */
+    accordiontab?: AccordionTabPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in Accordion component.
+ */
+export interface AccordionState {
+    /**
+     * Current id state as a string
+     */
+    id: string;
+    /**
+     * Current active index state.
+     */
+    activeIndex: number | number[];
+}
+
+/**
+ * Defines valid properties in Accordion component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface AccordionProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Active index or indexes of the element. Use an array of numbers for multiple indexes.
+     * The {@link multiple} prop must be set to true in order to specify multiple indexes.
+     */
+    activeIndex?: number | number[] | null | undefined;
+    /**
+     * When enabled, multiple tabs can be activated at the same time.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Icon of a collapsed tab.
+     */
+    expandIcon?: IconType<AccordionProps> | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: IconType<AccordionProps> | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {AccordionTabOpenEvent} event - Custom tab open event.
+     */
+    onTabOpen?(event: AccordionTabOpenEvent): void;
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {AccordionTabCloseEvent} event - Custom tab close event.
+     */
+    onTabClose?(event: AccordionTabCloseEvent): void;
+    /**
+     * Callback to invoke when state of the accordion changes.
+     * @param {AccordionTabChangeEvent} event - Custom tab close event.
+     */
+    onTabChange?(event: AccordionTabChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionPassThroughOptions}
+     */
+    pt?: AccordionPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * **PrimeReact - Accordion**
+ *
+ * _Accordion groups a collection of contents in tabs._
+ *
+ * [Live Demo](https://www.primereact.org/accordion/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+// tslint:disable-next-line:max-classes-per-file
+export declare class Accordion extends React.Component<AccordionProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/accordion/package.json b/components/lib/accordion/package.json
new file mode 100644
index 0000000000..143525e000
--- /dev/null
+++ b/components/lib/accordion/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./accordion.cjs.js",
+    "module": "./accordion.esm.js",
+    "unpkg": "./accordion.min.js",
+    "types": "./accordion.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/api/Api.js b/components/lib/api/Api.js
new file mode 100644
index 0000000000..ec5db1178e
--- /dev/null
+++ b/components/lib/api/Api.js
@@ -0,0 +1,13 @@
+import { FilterMatchMode } from './FilterMatchMode';
+import { FilterOperator } from './FilterOperator';
+import { FilterService } from './FilterService';
+import { addLocale, ariaLabel, locale, localeOption, localeOptions, updateLocaleOption, updateLocaleOptions } from './Locale';
+import { MessageSeverity } from './MessageSeverity';
+import { PrimeIcons } from './PrimeIcons';
+import PrimeReact from './PrimeReact';
+import { SortOrder } from './SortOrder';
+import { PrimeReactContext, PrimeReactProvider } from './PrimeReactContext';
+
+export default PrimeReact;
+
+export { locale, addLocale, ariaLabel, localeOption, localeOptions, updateLocaleOption, updateLocaleOptions, PrimeIcons, MessageSeverity, FilterMatchMode, FilterOperator, FilterService, SortOrder, PrimeReactProvider, PrimeReactContext };
diff --git a/components/lib/api/FilterMatchMode.js b/components/lib/api/FilterMatchMode.js
new file mode 100644
index 0000000000..75aa24803b
--- /dev/null
+++ b/components/lib/api/FilterMatchMode.js
@@ -0,0 +1,20 @@
+export const FilterMatchMode = Object.freeze({
+    STARTS_WITH: 'startsWith',
+    CONTAINS: 'contains',
+    NOT_CONTAINS: 'notContains',
+    ENDS_WITH: 'endsWith',
+    EQUALS: 'equals',
+    NOT_EQUALS: 'notEquals',
+    IN: 'in',
+    NOT_IN: 'notIn',
+    LESS_THAN: 'lt',
+    LESS_THAN_OR_EQUAL_TO: 'lte',
+    GREATER_THAN: 'gt',
+    GREATER_THAN_OR_EQUAL_TO: 'gte',
+    BETWEEN: 'between',
+    DATE_IS: 'dateIs',
+    DATE_IS_NOT: 'dateIsNot',
+    DATE_BEFORE: 'dateBefore',
+    DATE_AFTER: 'dateAfter',
+    CUSTOM: 'custom'
+});
diff --git a/components/lib/api/FilterOperator.js b/components/lib/api/FilterOperator.js
new file mode 100644
index 0000000000..502be1aeaf
--- /dev/null
+++ b/components/lib/api/FilterOperator.js
@@ -0,0 +1,4 @@
+export const FilterOperator = Object.freeze({
+    AND: 'and',
+    OR: 'or'
+});
diff --git a/components/lib/api/FilterService.js b/components/lib/api/FilterService.js
new file mode 100644
index 0000000000..8505e2fb42
--- /dev/null
+++ b/components/lib/api/FilterService.js
@@ -0,0 +1,267 @@
+import { ObjectUtils } from '../utils/Utils';
+
+export const FilterService = {
+    filter(value, fields, filterValue, filterMatchMode, filterLocale) {
+        let filteredItems = [];
+
+        if (!value) {
+            return filteredItems;
+        }
+
+        for (const item of value) {
+            if (typeof item === 'string') {
+                if (this.filters[filterMatchMode](item, filterValue, filterLocale)) {
+                    filteredItems.push(item);
+                    continue;
+                }
+            } else {
+                for (const field of fields) {
+                    const fieldValue = ObjectUtils.resolveFieldData(item, field);
+
+                    if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
+                        filteredItems.push(item);
+                        break;
+                    }
+                }
+            }
+        }
+
+        return filteredItems;
+    },
+    filters: {
+        startsWith(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.slice(0, filterValue.length) === filterValue;
+        },
+        contains(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue) !== -1;
+        },
+        notContains(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue) === -1;
+        },
+        endsWith(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || filter.trim() === '') {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+            let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
+
+            return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
+        },
+        equals(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime) {
+                return value.getTime() === filter.getTime();
+            }
+
+            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+        },
+        notEquals(value, filter, filterLocale) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return true;
+            }
+
+            if (value.getTime && filter.getTime) {
+                return value.getTime() !== filter.getTime();
+            }
+
+            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
+        },
+        in(value, filter) {
+            if (filter === undefined || filter === null || filter.length === 0) {
+                return true;
+            }
+
+            for (let i = 0; i < filter.length; i++) {
+                if (ObjectUtils.equals(value, filter[i])) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
+        notIn(value, filter) {
+            if (filter === undefined || filter === null || filter.length === 0) {
+                return true;
+            }
+
+            for (let i = 0; i < filter.length; i++) {
+                if (ObjectUtils.equals(value, filter[i])) {
+                    return false;
+                }
+            }
+
+            return true;
+        },
+        between(value, filter) {
+            if (filter == null || filter[0] == null || filter[1] == null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime) {
+                return filter[0].getTime() <= value.getTime() && value.getTime() <= filter[1].getTime();
+            }
+
+            return filter[0] <= value && value <= filter[1];
+        },
+        lt(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime) {
+                return value.getTime() < filter.getTime();
+            }
+
+            return value < filter;
+        },
+        lte(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime) {
+                return value.getTime() <= filter.getTime();
+            }
+
+            return value <= filter;
+        },
+        gt(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime) {
+                return value.getTime() > filter.getTime();
+            }
+
+            return value > filter;
+        },
+        gte(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            if (value.getTime && filter.getTime) {
+                return value.getTime() >= filter.getTime();
+            }
+
+            return value >= filter;
+        },
+        dateIs(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.toDateString() === filter.toDateString();
+        },
+        dateIsNot(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.toDateString() !== filter.toDateString();
+        },
+        dateBefore(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() < filter.getTime();
+        },
+        dateAfter(value, filter) {
+            if (filter === undefined || filter === null) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value.getTime() > filter.getTime();
+        }
+    },
+    register(rule, fn) {
+        this.filters[rule] = fn;
+    }
+};
diff --git a/components/lib/api/Locale.js b/components/lib/api/Locale.js
new file mode 100644
index 0000000000..ac683d2e81
--- /dev/null
+++ b/components/lib/api/Locale.js
@@ -0,0 +1,233 @@
+import PrimeReact from './PrimeReact';
+
+let locales = {
+    en: {
+        accept: 'Yes',
+        addRule: 'Add Rule',
+        am: 'AM',
+        apply: 'Apply',
+        cancel: 'Cancel',
+        choose: 'Choose',
+        chooseDate: 'Choose Date',
+        chooseMonth: 'Choose Month',
+        chooseYear: 'Choose Year',
+        clear: 'Clear',
+        completed: 'Completed',
+        contains: 'Contains',
+        custom: 'Custom',
+        dateAfter: 'Date is after',
+        dateBefore: 'Date is before',
+        dateFormat: 'mm/dd/yy',
+        dateIs: 'Date is',
+        dateIsNot: 'Date is not',
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        emptyFilterMessage: 'No results found',
+        emptyMessage: 'No available options',
+        emptySearchMessage: 'No results found',
+        emptySelectionMessage: 'No selected item',
+        endsWith: 'Ends with',
+        equals: 'Equals',
+        fileChosenMessage: '{0} files',
+        fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+        filter: 'Filter',
+        firstDayOfWeek: 0,
+        gt: 'Greater than',
+        gte: 'Greater than or equal to',
+        lt: 'Less than',
+        lte: 'Less than or equal to',
+        matchAll: 'Match All',
+        matchAny: 'Match Any',
+        medium: 'Medium',
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        nextDecade: 'Next Decade',
+        nextHour: 'Next Hour',
+        nextMinute: 'Next Minute',
+        nextMonth: 'Next Month',
+        nextSecond: 'Next Second',
+        nextYear: 'Next Year',
+        noFileChosenMessage: 'No file chosen',
+        noFilter: 'No Filter',
+        notContains: 'Not contains',
+        notEquals: 'Not equals',
+        now: 'Now',
+        passwordPrompt: 'Enter a password',
+        pending: 'Pending',
+        pm: 'PM',
+        prevDecade: 'Previous Decade',
+        prevHour: 'Previous Hour',
+        prevMinute: 'Previous Minute',
+        prevMonth: 'Previous Month',
+        prevSecond: 'Previous Second',
+        prevYear: 'Previous Year',
+        reject: 'No',
+        removeRule: 'Remove Rule',
+        searchMessage: '{0} results are available',
+        selectionMessage: '{0} items selected',
+        showMonthAfterYear: false,
+        startsWith: 'Starts with',
+        strong: 'Strong',
+        today: 'Today',
+        upload: 'Upload',
+        weak: 'Weak',
+        weekHeader: 'Wk',
+        aria: {
+            cancelEdit: 'Cancel Edit',
+            close: 'Close',
+            collapseLabel: 'Collapse',
+            collapseRow: 'Row Collapsed',
+            editRow: 'Edit Row',
+            expandLabel: 'Expand',
+            expandRow: 'Row Expanded',
+            falseLabel: 'False',
+            filterConstraint: 'Filter Constraint',
+            filterOperator: 'Filter Operator',
+            firstPageLabel: 'First Page',
+            gridView: 'Grid View',
+            hideFilterMenu: 'Hide Filter Menu',
+            jumpToPageDropdownLabel: 'Jump to Page Dropdown',
+            jumpToPageInputLabel: 'Jump to Page Input',
+            lastPageLabel: 'Last Page',
+            listLabel: 'Option List',
+            listView: 'List View',
+            moveAllToSource: 'Move All to Source',
+            moveAllToTarget: 'Move All to Target',
+            moveBottom: 'Move Bottom',
+            moveDown: 'Move Down',
+            moveToSource: 'Move to Source',
+            moveToTarget: 'Move to Target',
+            moveTop: 'Move Top',
+            moveUp: 'Move Up',
+            navigation: 'Navigation',
+            next: 'Next',
+            nextPageLabel: 'Next Page',
+            nullLabel: 'Not Selected',
+            otpLabel: 'Please enter one time password character {0}',
+            pageLabel: 'Page {page}',
+            passwordHide: 'Hide Password',
+            passwordShow: 'Show Password',
+            previous: 'Previous',
+            prevPageLabel: 'Previous Page',
+            removeLabel: 'Remove',
+            rotateLeft: 'Rotate Left',
+            rotateRight: 'Rotate Right',
+            rowsPerPageLabel: 'Rows per page',
+            saveEdit: 'Save Edit',
+            scrollTop: 'Scroll Top',
+            selectAll: 'All items selected',
+            selectLabel: 'Select',
+            selectRow: 'Row Selected',
+            showFilterMenu: 'Show Filter Menu',
+            slide: 'Slide',
+            slideNumber: '{slideNumber}',
+            star: '1 star',
+            stars: '{star} stars',
+            trueLabel: 'True',
+            unselectAll: 'All items unselected',
+            unselectLabel: 'Unselect',
+            unselectRow: 'Row Unselected',
+            zoomImage: 'Zoom Image',
+            zoomIn: 'Zoom In',
+            zoomOut: 'Zoom Out'
+        }
+    }
+};
+
+function locale(locale) {
+    locale && (PrimeReact.locale = locale);
+
+    return {
+        locale: PrimeReact.locale,
+        options: locales[PrimeReact.locale]
+    };
+}
+
+function addLocale(locale, options) {
+    if (locale.includes('__proto__') || locale.includes('prototype')) {
+        throw new Error('Unsafe locale detected');
+    }
+
+    locales[locale] = { ...locales.en, ...options };
+}
+
+function updateLocaleOption(key, value, locale) {
+    if (key.includes('__proto__') || key.includes('prototype')) {
+        throw new Error('Unsafe key detected');
+    }
+
+    localeOptions(locale)[key] = value;
+}
+
+function updateLocaleOptions(options, locale) {
+    if (locale.includes('__proto__') || locale.includes('prototype')) {
+        throw new Error('Unsafe locale detected');
+    }
+
+    const _locale = locale || PrimeReact.locale;
+
+    locales[_locale] = { ...locales[_locale], ...options };
+}
+
+function localeOption(key, locale) {
+    if (key.includes('__proto__') || key.includes('prototype')) {
+        throw new Error('Unsafe key detected');
+    }
+
+    const _locale = locale || PrimeReact.locale;
+
+    try {
+        return localeOptions(_locale)[key];
+    } catch (error) {
+        throw new Error(`The ${key} option is not found in the current locale('${_locale}').`);
+    }
+}
+
+/**
+ * Find an ARIA label in the locale by key.  If options are passed it will replace all options:
+ * ```ts
+ * const ariaValue = "Page {page}, User {user}, Role {role}";
+ * const options = { page: 2, user: "John", role: "Admin" };
+ * const result = ariaLabel('yourLabel', { page: 2, user: "John", role: "Admin" })
+ * console.log(result); // Output: Page 2, User John, Role Admin
+ * ```
+ * @param {string} ariaKey key of the ARIA label to look up in locale.
+ * @param {any} options JSON options like { page: 2, user: "John", role: "Admin" }
+ * @returns the ARIA label with replaced values
+ */
+function ariaLabel(ariaKey, options) {
+    if (ariaKey.includes('__proto__') || ariaKey.includes('prototype')) {
+        throw new Error('Unsafe ariaKey detected');
+    }
+
+    const _locale = PrimeReact.locale;
+
+    try {
+        let ariaLabel = localeOptions(_locale).aria[ariaKey];
+
+        if (ariaLabel) {
+            for (const key in options) {
+                if (options.hasOwnProperty(key)) {
+                    ariaLabel = ariaLabel.replace(`{${key}}`, options[key]);
+                }
+            }
+        }
+
+        return ariaLabel;
+    } catch (error) {
+        throw new Error(`The ${ariaKey} option is not found in the current locale('${_locale}').`);
+    }
+}
+
+function localeOptions(locale) {
+    const _locale = locale || PrimeReact.locale;
+
+    if (_locale.includes('__proto__') || _locale.includes('prototype')) {
+        throw new Error('Unsafe locale detected');
+    }
+
+    return locales[_locale];
+}
+
+export { addLocale, ariaLabel, locale, localeOption, localeOptions, updateLocaleOption, updateLocaleOptions };
diff --git a/components/lib/api/MessageSeverity.js b/components/lib/api/MessageSeverity.js
new file mode 100644
index 0000000000..6a7ee1b5a4
--- /dev/null
+++ b/components/lib/api/MessageSeverity.js
@@ -0,0 +1,8 @@
+export const MessageSeverity = Object.freeze({
+    SUCCESS: 'success',
+    INFO: 'info',
+    WARN: 'warn',
+    ERROR: 'error',
+    SECONDARY: 'secondary',
+    CONTRAST: 'contrast'
+});
diff --git a/components/lib/api/PrimeIcons.js b/components/lib/api/PrimeIcons.js
new file mode 100644
index 0000000000..62a40dd2be
--- /dev/null
+++ b/components/lib/api/PrimeIcons.js
@@ -0,0 +1,316 @@
+export const PrimeIcons = Object.freeze({
+    ADDRESS_BOOK: 'pi pi-address-book',
+    ALIGN_CENTER: 'pi pi-align-center',
+    ALIGN_JUSTIFY: 'pi pi-align-justify',
+    ALIGN_LEFT: 'pi pi-align-left',
+    ALIGN_RIGHT: 'pi pi-align-right',
+    AMAZON: 'pi pi-amazon',
+    ANDROID: 'pi pi-android',
+    ANGLE_DOUBLE_DOWN: 'pi pi-angle-double-down',
+    ANGLE_DOUBLE_LEFT: 'pi pi-angle-double-left',
+    ANGLE_DOUBLE_RIGHT: 'pi pi-angle-double-right',
+    ANGLE_DOUBLE_UP: 'pi pi-angle-double-up',
+    ANGLE_DOWN: 'pi pi-angle-down',
+    ANGLE_LEFT: 'pi pi-angle-left',
+    ANGLE_RIGHT: 'pi pi-angle-right',
+    ANGLE_UP: 'pi pi-angle-up',
+    APPLE: 'pi pi-apple',
+    ARROW_CIRCLE_DOWN: 'pi pi-arrow-circle-down',
+    ARROW_CIRCLE_LEFT: 'pi pi-arrow-circle-left',
+    ARROW_CIRCLE_RIGHT: 'pi pi-arrow-circle-right',
+    ARROW_CIRCLE_UP: 'pi pi-arrow-circle-up',
+    ARROW_DOWN_LEFT_AND_ARROW_UP_RIGHT_TO_CENTER: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
+    ARROW_DOWN_LEFT: 'pi pi-arrow-down-left',
+    ARROW_DOWN_RIGHT: 'pi pi-arrow-down-right',
+    ARROW_DOWN: 'pi pi-arrow-down',
+    ARROW_LEFT: 'pi pi-arrow-left',
+    ARROW_RIGHT_ARROW_LEFT: 'pi pi-arrow-right-arrow-left',
+    ARROW_RIGHT: 'pi pi-arrow-right',
+    ARROW_UP_LEFT: 'pi pi-arrow-up-left',
+    ARROW_UP_RIGHT_AND_ARROW_DOWN_LEFT_FROM_CENTER: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
+    ARROW_UP_RIGHT: 'pi pi-arrow-up-right',
+    ARROW_UP: 'pi pi-arrow-up',
+    ARROWS_ALT: 'pi pi-arrows-alt',
+    ARROWS_H: 'pi pi-arrows-h',
+    ARROWS_V: 'pi pi-arrows-v',
+    ASTERISK: 'pi pi-asterisk',
+    AT: 'pi pi-at',
+    BACKWARD: 'pi pi-backward',
+    BAN: 'pi pi-ban',
+    BARCODE: 'pi pi-barcode',
+    BARS: 'pi pi-bars',
+    BELL_SLASH: 'pi pi-bell-slash',
+    BELL: 'pi pi-bell',
+    BITCOIN: 'pi pi-bitcoin',
+    BOLT: 'pi pi-bolt',
+    BOOK: 'pi pi-book',
+    BOOKMARK_FILL: 'pi pi-bookmark-fill',
+    BOOKMARK: 'pi pi-bookmark',
+    BOX: 'pi pi-box',
+    BRIEFCASE: 'pi pi-briefcase',
+    BUILDING_COLUMNS: 'pi pi-building-columns',
+    BUILDING: 'pi pi-building',
+    BULLSEYE: 'pi pi-bullseye',
+    CALCULATOR: 'pi pi-calculator',
+    CALENDAR_CLOCK: 'pi pi-calendar-clock',
+    CALENDAR_MINUS: 'pi pi-calendar-minus',
+    CALENDAR_PLUS: 'pi pi-calendar-plus',
+    CALENDAR_TIMES: 'pi pi-calendar-times',
+    CALENDAR: 'pi pi-calendar',
+    CAMERA: 'pi pi-camera',
+    CAR: 'pi pi-car',
+    CARET_DOWN: 'pi pi-caret-down',
+    CARET_LEFT: 'pi pi-caret-left',
+    CARET_RIGHT: 'pi pi-caret-right',
+    CARET_UP: 'pi pi-caret-up',
+    CART_ARROW_DOWN: 'pi pi-cart-arrow-down',
+    CART_MINUS: 'pi pi-cart-minus',
+    CART_PLUS: 'pi pi-cart-plus',
+    CHART_BAR: 'pi pi-chart-bar',
+    CHART_LINE: 'pi pi-chart-line',
+    CHART_PIE: 'pi pi-chart-pie',
+    CHART_SCATTER: 'pi pi-chart-scatter',
+    CHECK_CIRCLE: 'pi pi-check-circle',
+    CHECK_SQUARE: 'pi pi-check-square',
+    CHECK: 'pi pi-check',
+    CHEVRON_CIRCLE_DOWN: 'pi pi-chevron-circle-down',
+    CHEVRON_CIRCLE_LEFT: 'pi pi-chevron-circle-left',
+    CHEVRON_CIRCLE_RIGHT: 'pi pi-chevron-circle-right',
+    CHEVRON_CIRCLE_UP: 'pi pi-chevron-circle-up',
+    CHEVRON_DOWN: 'pi pi-chevron-down',
+    CHEVRON_LEFT: 'pi pi-chevron-left',
+    CHEVRON_RIGHT: 'pi pi-chevron-right',
+    CHEVRON_UP: 'pi pi-chevron-up',
+    CIRCLE_FILL: 'pi pi-circle-fill',
+    CIRCLE_OFF: 'pi pi-circle-off',
+    CIRCLE_ON: 'pi pi-circle-on',
+    CIRCLE: 'pi pi-circle',
+    CLIPBOARD: 'pi pi-clipboard',
+    CLOCK: 'pi pi-clock',
+    CLONE: 'pi pi-clone',
+    CLOUD_DOWNLOAD: 'pi pi-cloud-download',
+    CLOUD_UPLOAD: 'pi pi-cloud-upload',
+    CLOUD: 'pi pi-cloud',
+    CODE: 'pi pi-code',
+    COG: 'pi pi-cog',
+    COMMENT: 'pi pi-comment',
+    COMMENTS: 'pi pi-comments',
+    COMPASS: 'pi pi-compass',
+    COPY: 'pi pi-copy',
+    CREDIT_CARD: 'pi pi-credit-card',
+    CROWN: 'pi pi-crown',
+    DATABASE: 'pi pi-database',
+    DELETE_LEFT: 'pi pi-delete-left',
+    DESKTOP: 'pi pi-desktop',
+    DIRECTIONS_ALT: 'pi pi-directions-alt',
+    DIRECTIONS: 'pi pi-directions',
+    DISCORD: 'pi pi-discord',
+    DOLLAR: 'pi pi-dollar',
+    DOWNLOAD: 'pi pi-download',
+    EJECT: 'pi pi-eject',
+    ELLIPSIS_H: 'pi pi-ellipsis-h',
+    ELLIPSIS_V: 'pi pi-ellipsis-v',
+    ENVELOPE: 'pi pi-envelope',
+    EQUALS: 'pi pi-equals',
+    ERASER: 'pi pi-eraser',
+    ETHEREUM: 'pi pi-ethereum',
+    EURO: 'pi pi-euro',
+    EXCLAMATION_CIRCLE: 'pi pi-exclamation-circle',
+    EXCLAMATION_TRIANGLE: 'pi pi-exclamation-triangle',
+    EXPAND: 'pi pi-expand',
+    EXTERNAL_LINK: 'pi pi-external-link',
+    EYE_SLASH: 'pi pi-eye-slash',
+    EYE: 'pi pi-eye',
+    FACE_SMILE: 'pi pi-face-smile',
+    FACEBOOK: 'pi pi-facebook',
+    FAST_BACKWARD: 'pi pi-fast-backward',
+    FAST_FORWARD: 'pi pi-fast-forward',
+    FILE_ARROW_UP: 'pi pi-file-arrow-up',
+    FILE_CHECK: 'pi pi-file-check',
+    FILE_EDIT: 'pi pi-file-edit',
+    FILE_EXCEL: 'pi pi-file-excel',
+    FILE_EXPORT: 'pi pi-file-export',
+    FILE_IMPORT: 'pi pi-file-import',
+    FILE_O: 'pi pi-file-o',
+    FILE_PDF: 'pi pi-file-pdf',
+    FILE_PLUS: 'pi pi-file-plus',
+    FILE_WORD: 'pi pi-file-word',
+    FILE: 'pi pi-file',
+    FILTER_FILL: 'pi pi-filter-fill',
+    FILTER_SLASH: 'pi pi-filter-slash',
+    FILTER: 'pi pi-filter',
+    FLAG_FILL: 'pi pi-flag-fill',
+    FLAG: 'pi pi-flag',
+    FOLDER_OPEN: 'pi pi-folder-open',
+    FOLDER_PLUS: 'pi pi-folder-plus',
+    FOLDER: 'pi pi-folder',
+    FORWARD: 'pi pi-forward',
+    GAUGE: 'pi pi-gauge',
+    GIFT: 'pi pi-gift',
+    GITHUB: 'pi pi-github',
+    GLOBE: 'pi pi-globe',
+    GOOGLE: 'pi pi-google',
+    GRADUATION_CAP: 'pi pi-graduation-cap',
+    HAMMER: 'pi pi-hammer',
+    HASHTAG: 'pi pi-hashtag',
+    HEADPHONES: 'pi pi-headphones',
+    HEART_FILL: 'pi pi-heart-fill',
+    HEART: 'pi pi-heart',
+    HISTORY: 'pi pi-history',
+    HOME: 'pi pi-home',
+    HOURGLASS: 'pi pi-hourglass',
+    ID_CARD: 'pi pi-id-card',
+    IMAGE: 'pi pi-image',
+    IMAGES: 'pi pi-images',
+    INBOX: 'pi pi-inbox',
+    INDIAN_RUPEE: 'pi pi-indian-rupee',
+    INFO_CIRCLE: 'pi pi-info-circle',
+    INFO: 'pi pi-info',
+    INSTAGRAM: 'pi pi-instagram',
+    KEY: 'pi pi-key',
+    LANGUAGE: 'pi pi-language',
+    LIGHTBULB: 'pi pi-lightbulb',
+    LINK: 'pi pi-link',
+    LINKEDIN: 'pi pi-linkedin',
+    LIST_CHECK: 'pi pi-list-check',
+    LIST: 'pi pi-list',
+    LOCK_OPEN: 'pi pi-lock-open',
+    LOCK: 'pi pi-lock',
+    MAP_MARKER: 'pi pi-map-marker',
+    MAP: 'pi pi-map',
+    MARS: 'pi pi-mars',
+    MEGAPHONE: 'pi pi-megaphone',
+    MICROCHIP_AI: 'pi pi-microchip-ai',
+    MICROCHIP: 'pi pi-microchip',
+    MICROPHONE: 'pi pi-microphone',
+    MICROSOFT: 'pi pi-microsoft',
+    MINUS_CIRCLE: 'pi pi-minus-circle',
+    MINUS: 'pi pi-minus',
+    MOBILE: 'pi pi-mobile',
+    MONEY_BILL: 'pi pi-money-bill',
+    MOON: 'pi pi-moon',
+    OBJECTS_COLUMN: 'pi pi-objects-column',
+    PALETTE: 'pi pi-palette',
+    PAPERCLIP: 'pi pi-paperclip',
+    PAUSE_CIRCLE: 'pi pi-pause-circle',
+    PAUSE: 'pi pi-pause',
+    PAYPAL: 'pi pi-paypal',
+    PEN_TO_SQUARE: 'pi pi-pen-to-square',
+    PENCIL: 'pi pi-pencil',
+    PERCENTAGE: 'pi pi-percentage',
+    PHONE: 'pi pi-phone',
+    PINTEREST: 'pi pi-pinterest',
+    PLAY_CIRCLE: 'pi pi-play-circle',
+    PLAY: 'pi pi-play',
+    PLUS_CIRCLE: 'pi pi-plus-circle',
+    PLUS: 'pi pi-plus',
+    POUND: 'pi pi-pound',
+    POWER_OFF: 'pi pi-power-off',
+    PRIME: 'pi pi-prime',
+    PRINT: 'pi pi-print',
+    QRCODE: 'pi pi-qrcode',
+    QUESTION_CIRCLE: 'pi pi-question-circle',
+    QUESTION: 'pi pi-question',
+    RECEIPT: 'pi pi-receipt',
+    REDDIT: 'pi pi-reddit',
+    REFRESH: 'pi pi-refresh',
+    REPLAY: 'pi pi-replay',
+    REPLY: 'pi pi-reply',
+    SAVE: 'pi pi-save',
+    SEARCH_MINUS: 'pi pi-search-minus',
+    SEARCH_PLUS: 'pi pi-search-plus',
+    SEARCH: 'pi pi-search',
+    SEND: 'pi pi-send',
+    SERVER: 'pi pi-server',
+    SHARE_ALT: 'pi pi-share-alt',
+    SHIELD: 'pi pi-shield',
+    SHOP: 'pi pi-shop',
+    SHOPPING_BAG: 'pi pi-shopping-bag',
+    SHOPPING_CART: 'pi pi-shopping-cart',
+    SIGN_IN: 'pi pi-sign-in',
+    SIGN_OUT: 'pi pi-sign-out',
+    SITEMAP: 'pi pi-sitemap',
+    SLACK: 'pi pi-slack',
+    SLIDERS_H: 'pi pi-sliders-h',
+    SLIDERS_V: 'pi pi-sliders-v',
+    SORT_ALPHA_DOWN_ALT: 'pi pi-sort-alpha-down-alt',
+    SORT_ALPHA_DOWN: 'pi pi-sort-alpha-down',
+    SORT_ALPHA_UP_ALT: 'pi pi-sort-alpha-up-alt',
+    SORT_ALPHA_UP: 'pi pi-sort-alpha-up',
+    SORT_ALT_SLASH: 'pi pi-sort-alt-slash',
+    SORT_ALT: 'pi pi-sort-alt',
+    SORT_AMOUNT_DOWN_ALT: 'pi pi-sort-amount-down-alt',
+    SORT_AMOUNT_DOWN: 'pi pi-sort-amount-down',
+    SORT_AMOUNT_UP_ALT: 'pi pi-sort-amount-up-alt',
+    SORT_AMOUNT_UP: 'pi pi-sort-amount-up',
+    SORT_DOWN_FILL: 'pi pi-sort-down-fill',
+    SORT_DOWN: 'pi pi-sort-down',
+    SORT_NUMERIC_DOWN_ALT: 'pi pi-sort-numeric-down-alt',
+    SORT_NUMERIC_DOWN: 'pi pi-sort-numeric-down',
+    SORT_NUMERIC_UP_ALT: 'pi pi-sort-numeric-up-alt',
+    SORT_NUMERIC_UP: 'pi pi-sort-numeric-up',
+    SORT_UP_FILL: 'pi pi-sort-up-fill',
+    SORT_UP: 'pi pi-sort-up',
+    SORT: 'pi pi-sort',
+    SPARKLES: 'pi pi-sparkles',
+    SPINNER_DOTTED: 'pi pi-spinner-dotted',
+    SPINNER: 'pi pi-spinner',
+    STAR_FILL: 'pi pi-star-fill',
+    STAR_HALF_FILL: 'pi pi-star-half-fill',
+    STAR_HALF: 'pi pi-star-half',
+    STAR: 'pi pi-star',
+    STEP_BACKWARD_ALT: 'pi pi-step-backward-alt',
+    STEP_BACKWARD: 'pi pi-step-backward',
+    STEP_FORWARD_ALT: 'pi pi-step-forward-alt',
+    STEP_FORWARD: 'pi pi-step-forward',
+    STOP_CIRCLE: 'pi pi-stop-circle',
+    STOP: 'pi pi-stop',
+    STOPWATCH: 'pi pi-stopwatch',
+    SUN: 'pi pi-sun',
+    SYNC: 'pi pi-sync',
+    TABLE: 'pi pi-table',
+    TABLET: 'pi pi-tablet',
+    TAG: 'pi pi-tag',
+    TAGS: 'pi pi-tags',
+    TELEGRAM: 'pi pi-telegram',
+    TH_LARGE: 'pi pi-th-large',
+    THUMBS_DOWN_FILL: 'pi pi-thumbs-down-fill',
+    THUMBS_DOWN: 'pi pi-thumbs-down',
+    THUMBS_UP_FILL: 'pi pi-thumbs-up-fill',
+    THUMBS_UP: 'pi pi-thumbs-up',
+    THUMBTACK: 'pi pi-thumbtack',
+    TICKET: 'pi pi-ticket',
+    TIKTOK: 'pi pi-tiktok',
+    TIMES_CIRCLE: 'pi pi-times-circle',
+    TIMES: 'pi pi-times',
+    TRASH: 'pi pi-trash',
+    TROPHY: 'pi pi-trophy',
+    TRUCK: 'pi pi-truck',
+    TURKISH_LIRA: 'pi pi-turkish-lira',
+    TWITCH: 'pi pi-twitch',
+    TWITTER: 'pi pi-twitter',
+    UNDO: 'pi pi-undo',
+    UNLOCK: 'pi pi-unlock',
+    UPLOAD: 'pi pi-upload',
+    USER_EDIT: 'pi pi-user-edit',
+    USER_MINUS: 'pi pi-user-minus',
+    USER_PLUS: 'pi pi-user-plus',
+    USER: 'pi pi-user',
+    USERS: 'pi pi-users',
+    VENUS: 'pi pi-venus',
+    VERIFIED: 'pi pi-verified',
+    VIDEO: 'pi pi-video',
+    VIMEO: 'pi pi-vimeo',
+    VOLUME_DOWN: 'pi pi-volume-down',
+    VOLUME_OFF: 'pi pi-volume-off',
+    VOLUME_UP: 'pi pi-volume-up',
+    WALLET: 'pi pi-wallet',
+    WAREHOUSE: 'pi pi-warehouse',
+    WAVE_PULSE: 'pi pi-wave-pulse',
+    WHATSAPP: 'pi pi-whatsapp',
+    WIFI: 'pi pi-wifi',
+    WINDOW_MAXIMIZE: 'pi pi-window-maximize',
+    WINDOW_MINIMIZE: 'pi pi-window-minimize',
+    WRENCH: 'pi pi-wrench',
+    YOUTUBE: 'pi pi-youtube'
+});
diff --git a/components/lib/api/PrimeReact.js b/components/lib/api/PrimeReact.js
new file mode 100644
index 0000000000..ac0d354cec
--- /dev/null
+++ b/components/lib/api/PrimeReact.js
@@ -0,0 +1,62 @@
+import { FilterMatchMode } from './FilterMatchMode';
+
+/**
+ * @deprecated please use PrimeReactContext
+ */
+export default class PrimeReact {
+    static ripple = false;
+
+    static inputStyle = 'outlined';
+
+    static locale = 'en';
+
+    static appendTo = null;
+
+    static cssTransition = true;
+
+    static autoZIndex = true;
+
+    static hideOverlaysOnDocumentScrolling = false;
+
+    static nonce = null;
+
+    static nullSortOrder = 1;
+
+    static zIndex = {
+        modal: 1100,
+        overlay: 1000,
+        menu: 1000,
+        tooltip: 1100,
+        toast: 1200
+    };
+
+    static pt = undefined;
+
+    static filterMatchModeOptions = {
+        text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
+        numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
+        date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
+    };
+
+    static changeTheme = function (currentTheme, newTheme, linkElementId, callback) {
+        const linkElement = document.getElementById(linkElementId);
+
+        if (!linkElement) {
+            throw Error(`Element with id ${linkElementId} not found.`);
+        }
+
+        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        const newLinkElement = document.createElement('link');
+
+        newLinkElement.setAttribute('rel', 'stylesheet');
+        newLinkElement.setAttribute('id', linkElementId);
+        newLinkElement.setAttribute('href', newThemeUrl);
+        newLinkElement.addEventListener('load', () => {
+            if (callback) {
+                callback();
+            }
+        });
+
+        linkElement.parentNode?.replaceChild(newLinkElement, linkElement);
+    };
+}
diff --git a/components/lib/api/PrimeReactContext.js b/components/lib/api/PrimeReactContext.js
new file mode 100644
index 0000000000..3a645ca210
--- /dev/null
+++ b/components/lib/api/PrimeReactContext.js
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { FilterMatchMode } from './FilterMatchMode';
+import PrimeReact from './PrimeReact';
+
+export const PrimeReactContext = React.createContext();
+
+export const PrimeReactProvider = (props) => {
+    const propsValue = props.value ?? {};
+
+    const [ripple, setRipple] = useState(propsValue.ripple ?? false);
+    const [inputStyle, setInputStyle] = useState(propsValue.inputStyle ?? 'outlined');
+    const [locale, setLocale] = useState(propsValue.locale ?? 'en');
+    const [appendTo, setAppendTo] = useState(propsValue.appendTo ?? null);
+    const [styleContainer, setStyleContainer] = useState(propsValue.styleContainer ?? null);
+    const [cssTransition, setCssTransition] = useState(propsValue.cssTransition ?? true);
+    const [autoZIndex, setAutoZIndex] = useState(propsValue.autoZIndex ?? true);
+    const [hideOverlaysOnDocumentScrolling, setHideOverlaysOnDocumentScrolling] = useState(propsValue.hideOverlaysOnDocumentScrolling ?? false);
+    const [nonce, setNonce] = useState(propsValue.nonce ?? null);
+    const [nullSortOrder, setNullSortOrder] = useState(propsValue.nullSortOrder ?? 1);
+    const [zIndex, setZIndex] = useState(
+        propsValue.zIndex ?? {
+            modal: 1100,
+            overlay: 1000,
+            menu: 1000,
+            tooltip: 1100,
+            toast: 1200
+        }
+    );
+    const [ptOptions, setPtOptions] = useState(
+        propsValue.ptOptions ?? {
+            mergeSections: true,
+            mergeProps: true
+        }
+    );
+    const [pt, setPt] = useState(propsValue.pt ?? undefined);
+    const [unstyled, setUnstyled] = useState(propsValue.unstyled ?? false);
+    const [filterMatchModeOptions, setFilterMatchModeOptions] = useState(
+        propsValue.filterMatchModeOptions ?? {
+            text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
+            numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
+            date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
+        }
+    );
+
+    const changeTheme = (currentTheme, newTheme, linkElementId, callback) => {
+        const linkElement = document.getElementById(linkElementId);
+
+        if (!linkElement) {
+            throw Error(`Element with id ${linkElementId} not found.`);
+        }
+
+        const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        const newLinkElement = document.createElement('link');
+
+        newLinkElement.setAttribute('rel', 'stylesheet');
+        newLinkElement.setAttribute('id', linkElementId);
+        newLinkElement.setAttribute('href', newThemeUrl);
+        newLinkElement.addEventListener('load', () => {
+            if (callback) {
+                callback();
+            }
+        });
+
+        linkElement.parentNode?.replaceChild(newLinkElement, linkElement);
+    };
+
+    /**
+     * @deprecated
+     */
+    React.useEffect(() => {
+        PrimeReact.ripple = ripple;
+    }, [ripple]);
+
+    /**
+     * @deprecated
+     */
+    React.useEffect(() => {
+        PrimeReact.inputStyle = inputStyle;
+    }, [inputStyle]);
+
+    /**
+     * @deprecated
+     */
+    React.useEffect(() => {
+        PrimeReact.locale = locale;
+    }, [locale]);
+
+    const value = {
+        changeTheme,
+        ripple,
+        setRipple,
+        inputStyle,
+        setInputStyle,
+        locale,
+        setLocale,
+        appendTo,
+        setAppendTo,
+        styleContainer,
+        setStyleContainer,
+        cssTransition,
+        setCssTransition,
+        autoZIndex,
+        setAutoZIndex,
+        hideOverlaysOnDocumentScrolling,
+        setHideOverlaysOnDocumentScrolling,
+        nonce,
+        setNonce,
+        nullSortOrder,
+        setNullSortOrder,
+        zIndex,
+        setZIndex,
+        ptOptions,
+        setPtOptions,
+        pt,
+        setPt,
+        filterMatchModeOptions,
+        setFilterMatchModeOptions,
+        unstyled,
+        setUnstyled
+    };
+
+    return <PrimeReactContext.Provider value={value}>{props.children}</PrimeReactContext.Provider>;
+};
diff --git a/components/lib/api/SortOrder.js b/components/lib/api/SortOrder.js
new file mode 100644
index 0000000000..01f0177fb3
--- /dev/null
+++ b/components/lib/api/SortOrder.js
@@ -0,0 +1,5 @@
+export const SortOrder = Object.freeze({
+    DESC: -1,
+    UNSORTED: 0,
+    ASC: 1
+});
diff --git a/components/lib/api/api.d.ts b/components/lib/api/api.d.ts
new file mode 100644
index 0000000000..16b37feed3
--- /dev/null
+++ b/components/lib/api/api.d.ts
@@ -0,0 +1,1527 @@
+/**
+ *
+ * API for PrimeReact components.
+ *
+ * @module api
+ *
+ */
+import { Dispatch, SetStateAction } from 'react';
+import { AccordionPassThroughOptions, AccordionTabPassThroughOptions } from '../accordion/accordion';
+import { AutoCompletePassThroughOptions } from '../autocomplete/autocomplete';
+import { AvatarPassThroughOptions } from '../avatar/avatar';
+import { AvatarGroupPassThroughOptions } from '../avatargroup/avatargroup';
+import { BadgePassThroughOptions } from '../badge/badge';
+import { BlockUIPassThroughOptions } from '../blockui/blockui';
+import { BreadCrumbPassThroughOptions } from '../breadcrumb/breadcrumb';
+import { ButtonPassThroughOptions } from '../button/button';
+import { CalendarPassThroughOptions } from '../calendar/calendar';
+import { CardPassThroughOptions } from '../card/card';
+import { CarouselPassThroughOptions } from '../carousel/carousel';
+import { CascadeSelectPassThroughOptions } from '../cascadeselect/cascadeselect';
+import { ChartPassThroughOptions } from '../chart/chart';
+import { CheckboxPassThroughOptions } from '../checkbox/checkbox';
+import { ChipPassThroughOptions } from '../chip/chip';
+import { ChipsPassThroughOptions } from '../chips/chips';
+import { ColorPickerPassThroughOptions } from '../colorpicker/colorpicker';
+import { ColumnPassThroughOptions } from '../column/column';
+import { ColumnGroupPassThroughOptions } from '../columngroup/columngroup';
+import { ConfirmDialogPassThroughOptions } from '../confirmdialog/confirmdialog';
+import { ConfirmPopupPassThroughOptions } from '../confirmpopup/confirmpopup';
+import { ContextMenuPassThroughOptions } from '../contextmenu/contextmenu';
+import { DataTablePassThroughOptions } from '../datatable/datatable';
+import { DataViewLayoutOptionsPassThroughOptions, DataViewPassThroughOptions } from '../dataview/dataview';
+import { DeferredContentPassThroughOptions } from '../deferredcontent/deferredcontent';
+import { DialogPassThroughOptions } from '../dialog/dialog';
+import { DividerPassThroughOptions } from '../divider/divider';
+import { DockPassThroughOptions } from '../dock/dock';
+import { DropdownPassThroughOptions } from '../dropdown/dropdown';
+import { EditorPassThroughOptions } from '../editor/editor';
+import { FieldsetPassThroughOptions } from '../fieldset/fieldset';
+import { FileUploadPassThroughOptions } from '../fileupload/fileupload';
+import { FloatLabelPassThroughOptions } from '../floatlabel/floatlabel';
+import { GalleriaPassThroughOptions } from '../galleria/galleria';
+import { ImagePassThroughOptions } from '../image/image';
+import { InplacePassThroughOptions } from '../inplace/inplace';
+import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber';
+import { InputOtpPassThroughOptions } from '../inputotp/inputotp';
+import { InputSwitchPassThroughOptions } from '../inputswitch/inputswitch';
+import { InputTextPassThroughOptions } from '../inputtext/inputtext';
+import { InputTextareaPassThroughOptions } from '../inputtextarea/inputtextarea';
+import { KnobPassThroughOptions } from '../knob/knob';
+import { ListBoxPassThroughOptions } from '../listbox/listbox';
+import { MegaMenuPassThroughOptions } from '../megamenu/megamenu';
+import { MentionPassThroughOptions } from '../mention/mention';
+import { MenuPassThroughOptions } from '../menu/menu';
+import { MenubarPassThroughOptions } from '../menubar/menubar';
+import { MessagePassThroughOptions } from '../message/message';
+import { MessagesPassThroughOptions } from '../messages/messages';
+import { MultiSelectPassThroughOptions } from '../multiselect/multiselect';
+import { MultiStateCheckboxPassThroughOptions } from '../multistatecheckbox/multistatecheckbox';
+import { OrderListPassThroughOptions } from '../orderlist/orderlist';
+import { OrganizationChartPassThroughOptions } from '../organizationchart/organizationchart';
+import { OverlayPanelPassThroughOptions } from '../overlaypanel/overlaypanel';
+import { PaginatorPassThroughOptions } from '../paginator/paginator';
+import { PanelPassThroughOptions } from '../panel/panel';
+import { PanelMenuPassThroughOptions } from '../panelmenu/panelmenu';
+import { PassThroughOptions } from '../passthrough';
+import { PasswordPassThroughOptions } from '../password/password';
+import { PickListPassThroughOptions } from '../picklist/picklist';
+import { ProgressBarPassThroughOptions } from '../progressbar/progressbar';
+import { ProgressSpinnerPassThroughOptions } from '../progressspinner/progressspinner';
+import { RadioButtonPassThroughOptions } from '../radiobutton/radiobutton';
+import { RatingPassThroughOptions } from '../rating/rating';
+import { RipplePassThroughOptions } from '../ripple/ripple';
+import { RowPassThroughOptions } from '../row/row';
+import { ScrollPanelPassThroughOptions } from '../scrollpanel/scrollpanel';
+import { ScrollTopPassThroughOptions } from '../scrolltop/scrolltop';
+import { SelectButtonPassThroughOptions } from '../selectbutton/selectbutton';
+import { SidebarPassThroughOptions } from '../sidebar/sidebar';
+import { SkeletonPassThroughOptions } from '../skeleton/skeleton';
+import { SlideMenuPassThroughOptions } from '../slidemenu/slidemenu';
+import { SliderPassThroughOptions } from '../slider/slider';
+import { SpeedDialPassThroughOptions } from '../speeddial/speeddial';
+import { SplitButtonPassThroughOptions } from '../splitbutton/splitbutton';
+import { SplitterPassThroughOptions } from '../splitter/splitter';
+import { StepsPassThroughOptions } from '../steps/steps';
+import { TabMenuPassThroughOptions } from '../tabmenu/tabmenu';
+import { TabPanelPassThroughOptions, TabViewPassThroughOptions } from '../tabview/tabview';
+import { TagPassThroughOptions } from '../tag/tag';
+import { TerminalPassThroughOptions } from '../terminal/terminal';
+import { TieredMenuPassThroughOptions } from '../tieredmenu/tieredmenu';
+import { TimelinePassThroughOptions } from '../timeline/timeline';
+import { ToastPassThroughOptions } from '../toast/toast';
+import { ToggleButtonPassThroughOptions } from '../togglebutton/togglebutton';
+import { ToolbarPassThroughOptions } from '../toolbar/toolbar';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TreePassThroughOptions } from '../tree/tree';
+import { TreeSelectPassThroughOptions } from '../treeselect/treeselect';
+import { TreeTablePassThroughOptions } from '../treetable/treetable';
+import { VirtualScrollerPassThroughOptions } from '../virtualscroller/virtualscroller';
+
+// Config
+/**
+ * ZIndex configuration options.
+ */
+export interface ZIndexOptions {
+    /**
+     * Sets the base index value for Dialog and Sidebar components.
+     * @defaultValue 1100
+     */
+    modal: number;
+    /**
+     * Sets the base index value for Overlay components such as Dropdown and OverlayPanel.
+     * @defaultValue 1000
+     */
+    overlay: number;
+    /**
+     * Sets the base index value for Overlay menus.
+     * @defaultValue 1000
+     */
+    menu: number;
+    /**
+     * Sets the base index value for Tooltip.
+     * @defaultValue 1100
+     */
+    tooltip: number;
+    /**
+     * Sets the base index value for Toast.
+     * @defaultValue 1200
+     */
+    toast: number;
+}
+
+export type InputStyleType = 'outlined' | 'filled';
+
+export type AppendToType = 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+
+export type StyleContainerType = ShadowRoot | HTMLElement | undefined | null;
+
+/**
+ * Filter match modes for DataTable filter menus.
+ */
+export interface FilterMatchModeOptions {
+    /**
+     * Array of filter match modes for text filtering.
+     */
+    text: any[];
+    /**
+     * Array of filter match modes for numeric filtering.
+     */
+    numeric: any[];
+    /**
+     * Array of filter match modes for date filtering.
+     */
+    date: any[];
+}
+
+/**
+ * Configuration options for the PrimeReact components.
+ */
+export interface APIOptions {
+    /**
+     * This option allows components with overlays like dropdowns or popups to be mounted into either the component or any DOM element, such as document body and self.
+     */
+    appendTo?: AppendToType;
+    /**
+     * This option allows `useStyle` to insert dynamic CSS styles into a specific container. This is useful when styles need to be scoped such as in a Shadow DOM.
+     * @defaultValue document.head
+     */
+    styleContainer?: StyleContainerType;
+    /**
+     * ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. When autoZIndex is false, each group increments its zIndex within itself.
+     */
+    autoZIndex?: boolean;
+    /**
+     * PrimeReact components utilize "react-transition-group" internally to implement animations. Setting "cssTransition" to "false" disables all animations.
+     * @defaultValue true
+     */
+    cssTransition?: boolean;
+    /**
+     * Default filter modes to display on DataTable filter menus.
+     */
+    filterMatchModeOptions?: FilterMatchModeOptions;
+    /**
+     * Define behavior if the browser window is scrolled while displaying an overlay panel like a Dropdown or Calendar. Depending on your organization's accessibility needs some prefer panels to be closed on scrolling and some prefer the overlay follow the scroll.
+     * @defaultValue false
+     */
+    hideOverlaysOnDocumentScrolling?: boolean;
+    /**
+     * Input fields have two styles: default (outlined with borders) and filled (background-colored). Applying 'p-input-filled' to an input's ancestor enables the filled style.
+     */
+    inputStyle?: InputStyleType;
+    /**
+     * The locale configuration sets up the language and region specific preferences.
+     * @defaultValue 'en'
+     */
+    locale?: string;
+    /**
+     * The nonce value to use on dynamically generated style elements.
+     */
+    nonce?: string;
+    /**
+     * Determines how null values are sorted.
+     * @defaultValue 1
+     */
+    nullSortOrder?: number;
+    /**
+     * Ripple is an optional animation for the supported components such as buttons.
+     * @defaultValue false
+     */
+    ripple?: boolean;
+    /**
+     * ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. When autoZIndex is false, each group increments its zIndex within itself. Each property is optional, so when autoZIndex is enabled you can set the z-index for any component type, and the rest will be calculated automatically.
+     * @defaultValue { modal: 1100, overlay: 1000, menu: 1000, tooltip: 1100, toast: 1200}
+     */
+    zIndex?: Partial<ZIndexOptions>;
+    /**
+     * This option allows to direct implementation of all relevant attributes (e.g., style, classnames) within the respective HTML tag.
+     */
+    pt?: PrimeReactPTOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes all of components styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * This method is used to change the theme dynamically.
+     * @param {string} currentTheme - The name of the current theme. Example 'lara-light-blue'
+     * @param {string} newTheme - The name of the new theme to be applied. Example 'md-dark-deeppurple'
+     * @param {string} linkElementId - The id of the link element to be updated.
+     * @param {() => void} [callback] - Callback to invoke when the theme change is completed.
+     */
+    changeTheme?(theme?: string, newTheme?: string, linkElementId?: string, callback?: () => void): void;
+    /**
+     * Sets the "appendTo" state of the context.
+     */
+    setAppendTo?: Dispatch<SetStateAction<AppendToType>>;
+    /**
+     * Sets the "styleContainer" state of the context.
+     */
+    setStyleContainer?: Dispatch<SetStateAction<StyleContainerType>>;
+    /**
+     * Sets the "autoZIndex" state of the context.
+     */
+    setAutoZIndex?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Sets the "cssTransition" state of the context.
+     */
+    setCssTransition?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Sets the "filterMatchModeOptions" state of the context.
+     */
+    setFilterMatchModeOptions?: Dispatch<SetStateAction<FilterMatchModeOptions>>;
+    /**
+     * Sets the "hideOverlaysOnDocumentScrolling" state of the context.
+     */
+    setHideOverlaysOnDocumentScrolling?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Sets the "inputStyle" state of the context.
+     */
+    setInputStyle?: Dispatch<SetStateAction<InputStyleType>>;
+    /**
+     * Sets the "locale" state of the context.
+     */
+    setLocale?: Dispatch<SetStateAction<string>>;
+    /**
+     * Sets the "nonce" state of the context.
+     */
+    setNonce?: Dispatch<SetStateAction<string>>;
+    /**
+     * Sets the "nullSortOrder" state of the context.
+     */
+    setNullSortOrder?: Dispatch<SetStateAction<number>>;
+    /**
+     * Sets the "ripple" state of the context.
+     */
+    setRipple?: Dispatch<SetStateAction<boolean>>;
+    /**
+     * Sets the "zIndex" state of the context.
+     */
+    setZIndex?: Dispatch<SetStateAction<ZIndexOptions>>;
+    /**
+     * Sets the "pt" state of the context.
+     */
+    setPt?: Dispatch<SetStateAction<PrimeReactPTOptions>>;
+}
+
+/**
+ * This option allows to direct implementation of all relevant attributes (e.g., style, classnames) within the respective HTML tag globally for all components.
+ */
+export interface PrimeReactPTOptions {
+    /**
+     * Custom passthrough(pt) options for Accordion.
+     */
+    accordion?: AccordionPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for AccordionTab.
+     */
+    accordiontab?: AccordionTabPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for AutoComplete.
+     */
+    autocomplete?: AutoCompletePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Avatar.
+     */
+    avatar?: AvatarPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for AvatarGroup.
+     */
+    avatargroup?: AvatarGroupPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Badge.
+     */
+    badge?: BadgePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for BlockUI.
+     */
+    blockui?: BlockUIPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Breadcrumb.
+     */
+    breadcrumb?: BreadCrumbPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Button.
+     */
+    button?: ButtonPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Calendar.
+     */
+    calendar?: CalendarPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Card.
+     */
+    card?: CardPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Carousel.
+     */
+    carousel?: CarouselPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for CascadeSelect.
+     */
+    cascadeselect?: CascadeSelectPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Chart.
+     */
+    chart?: ChartPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Checkbox.
+     */
+    checkbox?: CheckboxPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Chip.
+     */
+    chip?: ChipPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Chips.
+     */
+    chips?: ChipsPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ColorPicker.
+     */
+    colorpicker?: ColorPickerPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Column.
+     */
+    column?: ColumnPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ColumnGroup.
+     */
+    columngroup?: ColumnGroupPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ConfirmDialog.
+     */
+    confirmdialog?: ConfirmDialogPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ConfirmPopup.
+     */
+    confirmpopup?: ConfirmPopupPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ContextMenu.
+     */
+    contextmenu?: ContextMenuPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for DataTable.
+     */
+    datatable?: DataTablePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for DataView.
+     */
+    dataview?: DataViewPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for DataViewLayoutOptions.
+     */
+    dataviewlayoutoptions?: DataViewLayoutOptionsPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for DeferredContent.
+     */
+    deferredcontent?: DeferredContentPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Dialog.
+     */
+    dialog?: DialogPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Divider.
+     */
+    divider?: DividerPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Dock.
+     */
+    dock?: DockPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Dropdown.
+     */
+    dropdown?: DropdownPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Editor.
+     */
+    editor?: EditorPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Fieldset.
+     */
+    fieldset?: FieldsetPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for FileUpload.
+     */
+    fileupload?: FileUploadPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for FloatLabel.
+     */
+    floatlabel?: FloatLabelPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for FullCalendar.
+     */
+    galleria?: GalleriaPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Galleria.
+     */
+    image?: ImagePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Inplace.
+     */
+    inplace?: InplacePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for InputMask.
+     */
+    inputmask?: InputTextPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for InputNumber.
+     */
+    inputnumber?: InputNumberPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for InputOtp.
+     */
+    inputotp?: InputOtpPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for InputSwitch.
+     */
+    inputswitch?: InputSwitchPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for InputText.
+     */
+    inputtext?: InputTextPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for InputTextarea.
+     */
+    inputtextarea?: InputTextareaPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Knob.
+     */
+    knob?: KnobPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Listbox.
+     */
+    listbox?: ListBoxPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for MegaMenu.
+     */
+    megamenu?: MegaMenuPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Mention.
+     */
+    mention?: MentionPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Menu.
+     */
+    menu?: MenuPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Menubar.
+     */
+    menubar?: MenubarPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Message.
+     */
+    message?: MessagePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Messages.
+     */
+    messages?: MessagesPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for MultiSelect.
+     */
+    multiselect?: MultiSelectPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for MultiStateCheckbox.
+     */
+    multistatecheckbox?: MultiStateCheckboxPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for OrderList.
+     */
+    orderlist?: OrderListPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for OrganizationChart.
+     */
+    organizationchart?: OrganizationChartPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for OverlayPanel.
+     */
+    overlaypanel?: OverlayPanelPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Paginator.
+     */
+    paginator?: PaginatorPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Panel.
+     */
+    panel?: PanelPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for PanelMenu.
+     */
+    panelmenu?: PanelMenuPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Password.
+     */
+    password?: PasswordPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for PickList.
+     */
+    picklist?: PickListPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ProgressBar.
+     */
+    progressbar?: ProgressBarPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ProgressSpinner.
+     */
+    progressspinner?: ProgressSpinnerPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for RadioButton.
+     */
+    radiobutton?: RadioButtonPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Rating.
+     */
+    rating?: RatingPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Ripple.
+     */
+    ripple?: RipplePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Row.
+     */
+    row?: RowPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ScrollPanel.
+     */
+    scrollpanel?: ScrollPanelPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ScrollTop.
+     */
+    scrolltop?: ScrollTopPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for SelectButton.
+     */
+    selectbutton?: SelectButtonPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Sidebar.
+     */
+    sidebar?: SidebarPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Skeleton.
+     */
+    skeleton?: SkeletonPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for SliderMenu.
+     */
+    slidemenu?: SlideMenuPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Slider.
+     */
+    slider?: SliderPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for SpeedDial.
+     */
+    speeddial?: SpeedDialPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for SplitButton.
+     */
+    splitbutton?: SplitButtonPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Splitter.
+     */
+    splitter?: SplitterPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Steps.
+     */
+    steps?: StepsPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for TabMenu.
+     */
+    tabmenu?: TabMenuPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for TabPanel.
+     */
+    tabpanel?: TabPanelPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for TabView.
+     */
+    tabview?: TabViewPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Tag.
+     */
+    tag?: TagPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Terminal.
+     */
+    terminal?: TerminalPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for TieredMenu.
+     */
+    tieredmenu?: TieredMenuPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Timeline.
+     */
+    timeline?: TimelinePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Toast.
+     */
+    toast?: ToastPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for ToffleButton.
+     */
+    togglebutton?: ToggleButtonPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Toolbar.
+     */
+    toolbar?: ToolbarPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Tooltip.
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for Tree.
+     */
+    tree?: TreePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for TreeSelect.
+     */
+    treeselect?: TreeSelectPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for TreeTable.
+     */
+    treetable?: TreeTablePassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for VirtualScroller.
+     */
+    virtualscroller?: VirtualScrollerPassThroughOptions;
+    /**
+     * Custom passthrough(pt) options for global css.
+     */
+    global?: {
+        css?: (options: any) => string | string | undefined;
+    };
+}
+
+/**
+ * @deprecated since version 9.6.0. Use PrimeReactContext instead.
+ */
+declare const PrimeReact: APIOptions;
+
+export default PrimeReact;
+
+type PrimeReactProviderProps = {
+    /**
+     * Any default global API options
+     */
+    value?: Partial<APIOptions>;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children: React.ReactNode;
+};
+
+declare const PrimeReactProvider: React.FC<PrimeReactProviderProps>;
+declare const PrimeReactContext: React.Context<APIOptions>;
+
+export { PrimeReactContext, PrimeReactProvider };
+
+// Locale
+/**
+ * Sets the current locale if installed.
+ * @param {string} locale - Locale string.
+ * @return {object} - Locale object.
+ */
+export declare function locale(locale: string): { locale: string; options: object };
+/**
+ * Installs a new locale.
+ * @param {string} locale - Locale string.
+ * @param {LocaleOptions} options - Locale options. See [PrimeLocale](https://github.com/primefaces/primelocale) on GitHub for possible options.
+ */
+export declare function addLocale(locale: string, options: LocaleOptions): void;
+/**
+ * Changes the specific option value of a locale.
+ * @param {string} key - Option key.
+ * @param {*} value - Option value.
+ * @param {string} locale - Locale string.
+ */
+export declare function updateLocaleOption<Key extends keyof LocaleOptions>(key: Key, value: Key extends keyof LocaleOptions ? LocaleOptions[Key] : any, locale: string): void;
+export declare function updateLocaleOption<Key extends string>(key: Key, value: Key extends keyof LocaleOptions ? LocaleOptions[Key] : any, locale: string): void;
+/**
+ * Changes the option values of a locale.
+ * @param {LocaleOptions} options - Locale options.
+ * @param {string} locale - Locale string.
+ */
+export declare function updateLocaleOptions(options: object, locale: string): void;
+/**
+ * Return the value of a specific locale option.
+ * @param {string} key - Option key.
+ * @param {string} locale - Locale string.
+ */
+export declare function localeOption<Key extends keyof LocaleOptions>(key: Key, locale: string): LocaleOptions[Key];
+export declare function localeOption(key: string, locale: string): any;
+/**
+ * Returns the values of locale options.
+ * @param {string} locale - Locale string.
+ */
+export declare function localeOptions(locale: string): object;
+
+/**
+ * Finds an ARIA label in the locale by key and replaces options if provided.
+ * @param {string} ariaKey - Key of the ARIA label to look up in the locale.
+ * @param {Object} options - JSON options like { page: 2, user: "John", role: "Admin" }.
+ * @returns {string} The ARIA label with replaced values.
+ */
+export declare function ariaLabel(ariaKey: string, options: any): string;
+
+// Locale Options
+export interface LocaleOptions {
+    /**
+     * Starts with
+     */
+    startsWith?: string;
+    /**
+     * Contains
+     */
+    contains?: string;
+    /**
+     * Not contains
+     */
+    notContains?: string;
+    /**
+     * Ends with
+     */
+    endsWith?: string;
+    /**
+     * Equals
+     */
+    equals?: string;
+    /**
+     * Not equals
+     */
+    notEquals?: string;
+    /**
+     * No Filter
+     */
+    noFilter?: string;
+    /**
+     * Filter
+     */
+    filter?: string;
+    /**
+     * Less than
+     */
+    lt?: string;
+    /**
+     * Less than or equal to
+     */
+    lte?: string;
+    /**
+     * Greater than
+     */
+    gt?: string;
+    /**
+     * Greater than or equal to
+     */
+    gte?: string;
+    /**
+     * Date is
+     */
+    dateIs?: string;
+    /**
+     * Date is not
+     */
+    dateIsNot?: string;
+    /**
+     * Date is before
+     */
+    dateBefore?: string;
+    /**
+     * Date is after
+     */
+    dateAfter?: string;
+    /**
+     * Custom
+     */
+    custom?: string;
+    /**
+     * Clear
+     */
+    clear?: string;
+    /**
+     * Apply
+     */
+    apply?: string;
+    /**
+     * Match All
+     */
+    matchAll?: string;
+    /**
+     * Match Any
+     */
+    matchAny?: string;
+    /**
+     * Add Rule
+     */
+    addRule?: string;
+    /**
+     * Remove Rule
+     */
+    removeRule?: string;
+    /**
+     * Yes
+     */
+    accept?: string;
+    /**
+     * No
+     */
+    reject?: string;
+    /**
+     * Choose
+     */
+    choose?: string;
+    /**
+     * Upload
+     */
+    upload?: string;
+    /**
+     * Cancel
+     */
+    cancel?: string;
+    /**
+     * Close
+     */
+    close?: string;
+    /**
+     * Pending
+     */
+    pending?: string;
+    /**
+     * ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+     */
+    fileSizeTypes?: string[];
+    /**
+     * ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+     */
+    dayNames?: string[];
+    /**
+     * ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+     */
+    dayNamesShort?: string[];
+    /**
+     * ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
+     */
+    dayNamesMin?: string[];
+    /**
+     * ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
+     */
+    monthNames?: string[];
+    /**
+     * ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+     */
+    monthNamesShort?: string[];
+    /**
+     * Choose Year
+     */
+    chooseYear?: string;
+    /**
+     * Choose Month
+     */
+    chooseMonth?: string;
+    /**
+     * Choose Date
+     */
+    chooseDate?: string;
+    /**
+     * Previous Decade
+     */
+    prevDecade?: string;
+    /**
+     * Next Decade
+     */
+    nextDecade?: string;
+    /**
+     * Previous Year
+     */
+    prevYear?: string;
+    /**
+     * Next Year
+     */
+    nextYear?: string;
+    /**
+     * Previous Month
+     */
+    prevMonth?: string;
+    /**
+     * Next Month
+     */
+    nextMonth?: string;
+    /**
+     * Previous Hour
+     */
+    prevHour?: string;
+    /**
+     * Next Hour
+     */
+    nextHour?: string;
+    /**
+     * Previous Minute
+     */
+    prevMinute?: string;
+    /**
+     * Next Minute
+     */
+    nextMinute?: string;
+    /**
+     * Previous Second
+     */
+    prevSecond?: string;
+    /**
+     * Next Second
+     */
+    nextSecond?: string;
+    /**
+     * AM
+     */
+    am?: string;
+    /**
+     * PM
+     */
+    pm?: string;
+    /**
+     * Today (Calendar date only)
+     */
+    today?: string;
+    /**
+     * Now (Calendar using time)
+     */
+    now?: string;
+    /**
+     * Wk
+     */
+    weekHeader?: string;
+    /**
+     * 0
+     */
+    firstDayOfWeek?: number;
+    /**
+     * mm/dd/yy
+     */
+    dateFormat?: string;
+    /**
+     * Weak
+     */
+    weak?: string;
+    /**
+     * Medium
+     */
+    medium?: string;
+    /**
+     * Strong
+     */
+    strong?: string;
+    /**
+     * Enter a password
+     */
+    passwordPrompt?: string;
+    /**
+     * No available options
+     */
+    emptyFilterMessage?: string;
+    /**
+     * No results found
+     */
+    emptyMessage?: string;
+    /**
+     * ARIA labels
+     */
+    aria?: {
+        /**
+         * True
+         */
+        trueLabel?: string;
+        /**
+         * False
+         */
+        falseLabel?: string;
+        /**
+         * Not Selected
+         */
+        nullLabel?: string;
+        /**
+         * 1 star
+         */
+        star?: string;
+        /**
+         * {star} stars
+         */
+        stars?: string;
+        /**
+         *  All items selected
+         */
+        selectAll?: string;
+        /**
+         * All items unselected
+         */
+        unselectAll?: string;
+        /**
+         * Close
+         */
+        close?: string;
+        /**
+         * Previous
+         */
+        previous?: string;
+        /**
+         * Next
+         */
+        next?: string;
+        /**
+         * Navigation
+         */
+        navigation?: string;
+        /**
+         * Scroll Top
+         */
+        scrollTop?: string;
+        /**
+         * Move Top
+         */
+        moveTop?: string;
+        /**
+         * Move Up
+         */
+        moveUp?: string;
+        /**
+         * Move Down
+         */
+        moveDown?: string;
+        /**
+         * Move Bottom
+         */
+        moveBottom?: string;
+        /**
+         * Move to Target
+         */
+        moveToTarget?: string;
+        /**
+         * Move to Source
+         */
+        moveToSource?: string;
+        /**
+         * Move All to Target
+         */
+        moveAllToTarget?: string;
+        /**
+         * Move All to Source
+         */
+        moveAllToSource?: string;
+        /**
+         * Page {page}
+         */
+        pageLabel?: string;
+        /**
+         * Please enter one time password character {0}
+         */
+        otpLabel?: string;
+        /**
+         * First Page
+         */
+        firstPageLabel?: string;
+        /**
+         * Last Page
+         */
+        lastPageLabel?: string;
+        /**
+         * Next Page
+         */
+        nextPageLabel?: string;
+        /**
+         * Previous Page
+         */
+        prevPageLabel?: string;
+        /**
+         * Rows per page
+         */
+        rowsPerPageLabel?: string;
+        /**
+         *  Jump to Page Dropdown
+         */
+        jumpToPageDropdownLabel?: string;
+        /**
+         *  Jump to Page Input
+         */
+        jumpToPageInputLabel?: string;
+        /**
+         *  Row Selected
+         */
+        selectRow?: string;
+        /**
+         * Row Unselected
+         */
+        unselectRow?: string;
+        /**
+         * Row Expanded
+         */
+        expandRow?: string;
+        /**
+         * Row Collapsed
+         */
+        collapseRow?: string;
+        /**
+         * Show Filter Menu
+         */
+        showFilterMenu?: string;
+        /**
+         * Hide Filter Menu
+         */
+        hideFilterMenu?: string;
+        /**
+         * Filter Operator
+         */
+        filterOperator?: string;
+        /**
+         * Filter Constraint
+         */
+        filterConstraint?: string;
+        /**
+         *  Edit Row
+         */
+        editRow?: string;
+        /**
+         * Save Edit
+         */
+        saveEdit?: string;
+        /**
+         * Cancel Edit
+         */
+        cancelEdit?: string;
+        /**
+         * List View
+         */
+        listView?: string;
+        /**
+         * Grid View
+         */
+        gridView?: string;
+        /**
+         * Slide
+         */
+        slide?: string;
+        /**
+         * {slideNumber}
+         */
+        slideNumber?: string;
+        /**
+         * Zoom Image
+         */
+        zoomImage?: string;
+        /**
+         * Zoom In
+         */
+        zoomIn?: string;
+        /**
+         * Zoom Out
+         */
+        zoomOut?: string;
+        /**
+         * Rotate Right
+         */
+        rotateRight?: string;
+        /**
+         * Rotate Left
+         */
+        rotateLeft?: string;
+        /**
+         * Options List Label
+         */
+        listLabel?: string;
+    };
+}
+
+// Icons
+export interface PrimeIconsOptions {
+    readonly ALIGN_CENTER: string;
+    readonly ALIGN_JUSTIFY: string;
+    readonly ALIGN_LEFT: string;
+    readonly ALIGN_RIGHT: string;
+    readonly AMAZON: string;
+    readonly ANDROID: string;
+    readonly ANGLE_DOUBLE_DOWN: string;
+    readonly ANGLE_DOUBLE_LEFT: string;
+    readonly ANGLE_DOUBLE_RIGHT: string;
+    readonly ANGLE_DOUBLE_UP: string;
+    readonly ANGLE_DOWN: string;
+    readonly ANGLE_LEFT: string;
+    readonly ANGLE_RIGHT: string;
+    readonly ANGLE_UP: string;
+    readonly APPLE: string;
+    readonly ARROW_CIRCLE_DOWN: string;
+    readonly ARROW_CIRCLE_LEFT: string;
+    readonly ARROW_CIRCLE_RIGHT: string;
+    readonly ARROW_CIRCLE_UP: string;
+    readonly ARROW_DOWN: string;
+    readonly ARROW_DOWN_LEFT: string;
+    readonly ARROW_DOWN_RIGHT: string;
+    readonly ARROW_LEFT: string;
+    readonly ARROW_RIGHT: string;
+    readonly ARROW_UP: string;
+    readonly ARROW_UP_LEFT: string;
+    readonly ARROW_UP_RIGHT: string;
+    readonly ARROWS_H: string;
+    readonly ARROWS_V: string;
+    readonly AT: string;
+    readonly BACKWARD: string;
+    readonly BAN: string;
+    readonly BARS: string;
+    readonly BELL: string;
+    readonly BOLT: string;
+    readonly BOOK: string;
+    readonly BOOKMARK: string;
+    readonly BOOKMARK_FILL: string;
+    readonly BOX: string;
+    readonly BRIEFCASE: string;
+    readonly BUILDING: string;
+    readonly CALENDAR: string;
+    readonly CALENDAR_MINUS: string;
+    readonly CALENDAR_PLUS: string;
+    readonly CALENDAR_TIMES: string;
+    readonly CAMERA: string;
+    readonly CAR: string;
+    readonly CARET_DOWN: string;
+    readonly CARET_LEFT: string;
+    readonly CARET_RIGHT: string;
+    readonly CARET_UP: string;
+    readonly CHART_BAR: string;
+    readonly CHART_LINE: string;
+    readonly CHART_PIE: string;
+    readonly CHECK: string;
+    readonly CHECK_CIRCLE: string;
+    readonly CHECK_SQUARE: string;
+    readonly CHEVRON_CIRCLE_DOWN: string;
+    readonly CHEVRON_CIRCLE_LEFT: string;
+    readonly CHEVRON_CIRCLE_RIGHT: string;
+    readonly CHEVRON_CIRCLE_UP: string;
+    readonly CHEVRON_DOWN: string;
+    readonly CHEVRON_LEFT: string;
+    readonly CHEVRON_RIGHT: string;
+    readonly CHEVRON_UP: string;
+    readonly CIRCLE: string;
+    readonly CIRCLE_FILL: string;
+    readonly CLOCK: string;
+    readonly CLONE: string;
+    readonly CLOUD: string;
+    readonly CLOUD_DOWNLOAD: string;
+    readonly CLOUD_UPLOAD: string;
+    readonly CODE: string;
+    readonly COG: string;
+    readonly COMMENT: string;
+    readonly COMMENTS: string;
+    readonly COMPASS: string;
+    readonly COPY: string;
+    readonly CREDIT_CARD: string;
+    readonly DATABASE: string;
+    readonly DESKTOP: string;
+    readonly DIRECTIONS: string;
+    readonly DIRECTIONS_ALT: string;
+    readonly DISCORD: string;
+    readonly DOLLAR: string;
+    readonly DOWNLOAD: string;
+    readonly EJECT: string;
+    readonly ELLIPSIS_H: string;
+    readonly ELLIPSIS_V: string;
+    readonly ENVELOPE: string;
+    readonly EURO: string;
+    readonly EXCLAMATION_CIRCLE: string;
+    readonly EXCLAMATION_TRIANGLE: string;
+    readonly EXTERNAL_LINK: string;
+    readonly EYE: string;
+    readonly EYE_SLASH: string;
+    readonly FACEBOOK: string;
+    readonly FAST_BACKWARD: string;
+    readonly FAST_FORWARD: string;
+    readonly FILE: string;
+    readonly FILE_EXCEL: string;
+    readonly FILE_PDF: string;
+    readonly FILTER: string;
+    readonly FILTER_FILL: string;
+    readonly FILTER_SLASH: string;
+    readonly FLAG: string;
+    readonly FLAG_FILL: string;
+    readonly FOLDER: string;
+    readonly FOLDER_OPEN: string;
+    readonly FORWARD: string;
+    readonly GITHUB: string;
+    readonly GLOBE: string;
+    readonly GOOGLE: string;
+    readonly HASHTAG: string;
+    readonly HEADPHONES: string;
+    readonly HEART: string;
+    readonly HEART_FILL: string;
+    readonly HISTORY: string;
+    readonly HOME: string;
+    readonly ID_CARD: string;
+    readonly IMAGE: string;
+    readonly IMAGES: string;
+    readonly INBOX: string;
+    readonly INFO: string;
+    readonly INFO_CIRCLE: string;
+    readonly INSTAGRAM: string;
+    readonly KEY: string;
+    readonly LINK: string;
+    readonly LINKEDIN: string;
+    readonly LIST: string;
+    readonly LOCK: string;
+    readonly LOCK_OPEN: string;
+    readonly MAP: string;
+    readonly MAP_MARKER: string;
+    readonly MARS: string;
+    readonly MICROSOFT: string;
+    readonly MINUS: string;
+    readonly MINUS_CIRCLE: string;
+    readonly MOBILE: string;
+    readonly MONEY_BILL: string;
+    readonly MOON: string;
+    readonly PALETTE: string;
+    readonly PAPERCLIP: string;
+    readonly PAUSE: string;
+    readonly PAYPAL: string;
+    readonly PENCIL: string;
+    readonly PERCENTAGE: string;
+    readonly PHONE: string;
+    readonly PLAY: string;
+    readonly PLUS: string;
+    readonly PLUS_CIRCLE: string;
+    readonly POUND: string;
+    readonly POWER_OFF: string;
+    readonly PRIME: string;
+    readonly PRINT: string;
+    readonly QRCODE: string;
+    readonly QUESTION: string;
+    readonly QUESTION_CIRCLE: string;
+    readonly REDDIT: string;
+    readonly REFRESH: string;
+    readonly REPLAY: string;
+    readonly REPLY: string;
+    readonly SAVE: string;
+    readonly SEARCH: string;
+    readonly SEARCH_MINUS: string;
+    readonly SEARCH_PLUS: string;
+    readonly SEND: string;
+    readonly SERVER: string;
+    readonly SHARE_ALT: string;
+    readonly SHIELD: string;
+    readonly SHOPPING_BAG: string;
+    readonly SHOPPING_CART: string;
+    readonly SIGN_IN: string;
+    readonly SIGN_OUT: string;
+    readonly SITEMAP: string;
+    readonly SLACK: string;
+    readonly SLIDERS_H: string;
+    readonly SLIDERS_V: string;
+    readonly SORT: string;
+    readonly SORT_ALPHA_DOWN: string;
+    readonly SORT_ALPHA_ALT_DOWN: string;
+    readonly SORT_ALPHA_UP: string;
+    readonly SORT_ALPHA_ALT_UP: string;
+    readonly SORT_ALT: string;
+    readonly SORT_ALT_SLASH: string;
+    readonly SORT_AMOUNT_DOWN: string;
+    readonly SORT_AMOUNT_DOWN_ALT: string;
+    readonly SORT_AMOUNT_UP: string;
+    readonly SORT_AMOUNT_UP_ALT: string;
+    readonly SORT_DOWN: string;
+    readonly SORT_NUMERIC_DOWN: string;
+    readonly SORT_NUMERIC_ALT_DOWN: string;
+    readonly SORT_NUMERIC_UP: string;
+    readonly SORT_NUMERIC_ALT_UP: string;
+    readonly SORT_UP: string;
+    readonly SPINNER: string;
+    readonly STAR: string;
+    readonly STAR_FILL: string;
+    readonly STEP_BACKWARD: string;
+    readonly STEP_BACKWARD_ALT: string;
+    readonly STEP_FORWARD: string;
+    readonly STEP_FORWARD_ALT: string;
+    readonly STOP: string;
+    readonly STOP_CIRCLE: string;
+    readonly SUN: string;
+    readonly SYNC: string;
+    readonly TABLE: string;
+    readonly TABLET: string;
+    readonly TAG: string;
+    readonly TAGS: string;
+    readonly TELEGRAM: string;
+    readonly TH_LARGE: string;
+    readonly THUMBS_DOWN: string;
+    readonly THUMBS_UP: string;
+    readonly TICKET: string;
+    readonly TIMES: string;
+    readonly TIMES_CIRCLE: string;
+    readonly TRASH: string;
+    readonly TWITTER: string;
+    readonly UNDO: string;
+    readonly UNLOCK: string;
+    readonly UPLOAD: string;
+    readonly USER: string;
+    readonly USER_EDIT: string;
+    readonly USER_MINUS: string;
+    readonly USER_PLUS: string;
+    readonly USERS: string;
+    readonly VENUS: string;
+    readonly VIDEO: string;
+    readonly VIMEO: string;
+    readonly VOLUME_DOWN: string;
+    readonly VOLUME_OFF: string;
+    readonly VOLUME_UP: string;
+    readonly WALLET: string;
+    readonly WAVE_PULSE: string;
+    readonly WHATSAPP: string;
+    readonly WIFI: string;
+    readonly WINDOW_MAXIMIZE: string;
+    readonly WINDOW_MINIMIZE: string;
+    readonly YOUTUBE: string;
+}
+
+export declare const PrimeIcons: PrimeIconsOptions;
+
+// Severity
+export declare enum MessageSeverity {
+    SUCCESS = 'success',
+    INFO = 'info',
+    WARN = 'warn',
+    ERROR = 'error',
+    SECONDARY = 'secondary',
+    CONTRAST = 'contrast'
+}
+
+// Filter
+export declare enum FilterMatchMode {
+    STARTS_WITH = 'startsWith',
+    CONTAINS = 'contains',
+    NOT_CONTAINS = 'notContains',
+    ENDS_WITH = 'endsWith',
+    EQUALS = 'equals',
+    NOT_EQUALS = 'notEquals',
+    IN = 'in',
+    NOT_IN = 'notIn',
+    LESS_THAN = 'lt',
+    LESS_THAN_OR_EQUAL_TO = 'lte',
+    GREATER_THAN = 'gt',
+    GREATER_THAN_OR_EQUAL_TO = 'gte',
+    BETWEEN = 'between',
+    DATE_IS = 'dateIs',
+    DATE_IS_NOT = 'dateIsNot',
+    DATE_BEFORE = 'dateBefore',
+    DATE_AFTER = 'dateAfter',
+    CUSTOM = 'custom'
+}
+
+export declare enum FilterOperator {
+    AND = 'and',
+    OR = 'or'
+}
+
+export declare enum SortOrder {
+    DESC = -1,
+    UNSORTED = 0,
+    ASC = 1
+}
+
+export declare namespace FilterService {
+    export function filter(value: any, fields: string[], filterValue: any, filterMatchMode: string, filterLocale?: string): any[];
+    export const filters: {
+        startsWith(value: any, filter: string, filterLocale?: string): boolean;
+        contains(value: any, filter: string, filterLocale?: string): boolean;
+        notContains(value: any, filter: string, filterLocale?: string): boolean;
+        endsWith(value: any, filter: string, filterLocale?: string): boolean;
+        equals(value: any, filter: string, filterLocale?: string): boolean;
+        notEquals(value: any, filter: string, filterLocale?: string): boolean;
+        in(value: any, filter: string): boolean;
+        between(value: any, filter: string): boolean;
+        lt(value: any, filter: string): boolean;
+        lte(value: any, filter: string): boolean;
+        gt(value: any, filter: string): boolean;
+        gte(value: any, filter: string): boolean;
+        dateIs(value: any, filter: string): boolean;
+        dateIsNot(value: any, filter: string): boolean;
+        dateBefore(value: any, filter: string): boolean;
+        dateAfter(value: any, filter: string): boolean;
+    };
+    export function register(rule: string, fn: (...arg: any[]) => boolean): void;
+}
diff --git a/components/lib/api/package.json b/components/lib/api/package.json
new file mode 100644
index 0000000000..41deaa42fe
--- /dev/null
+++ b/components/lib/api/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./api.cjs.js",
+    "module": "./api.esm.js",
+    "unpkg": "./api.min.js",
+    "types": "./api.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/api/test/FilterService.spec.js b/components/lib/api/test/FilterService.spec.js
new file mode 100644
index 0000000000..51e0169a65
--- /dev/null
+++ b/components/lib/api/test/FilterService.spec.js
@@ -0,0 +1,331 @@
+import { FilterService } from '../FilterService';
+const filters = FilterService.filters;
+
+import { ObjectUtils } from '../../utils/Utils';
+
+afterEach(() => {
+    jest.restoreAllMocks();
+});
+
+const checkParametersNullOrUndefined = (filterType) => {
+    it('When filter parameter is undefined', () => {
+        expect(filters[filterType]('value', undefined)).toBeTruthy();
+    });
+
+    it('When filter parameter is null', () => {
+        expect(filters[filterType]('value', null)).toBeTruthy();
+    });
+
+    it('When value parameter is undefined', () => {
+        expect(filters[filterType](undefined, 'filter')).toBeFalsy();
+    });
+
+    it('When value parameter is null', () => {
+        expect(filters[filterType](null, 'filter')).toBeFalsy();
+    });
+};
+
+describe('FilterService', () => {
+    describe('StartsWith filter test', () => {
+        checkParametersNullOrUndefined('startsWith');
+        it('When value and filter parameter is not null or undefined', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockReturnValue('value');
+
+            const startsWith = filters.startsWith('value', 'filter', 'tr');
+
+            expect(startsWith).toBeTruthy();
+        });
+    });
+
+    describe('Contains filter test', () => {
+        checkParametersNullOrUndefined('contains');
+
+        it('When value and filter parameter is not null or undefined', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockReturnValue('value');
+
+            const contains = filters.contains('value', 'filter', 'tr');
+
+            expect(contains).toBeTruthy();
+        });
+    });
+
+    describe('NotContains filter test', () => {
+        checkParametersNullOrUndefined('notContains');
+
+        it('When value and filter parameter is not null or undefined', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockReturnValue('value');
+
+            const notContains = filters.notContains('value', 'filter', 'tr');
+
+            expect(notContains).toBeFalsy();
+        });
+    });
+
+    describe('endsWith filter test', () => {
+        checkParametersNullOrUndefined('endsWith');
+
+        it('When value and filter parameter is not null or undefined', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockReturnValue('value');
+
+            const endsWith = filters.endsWith('value', 'filter', 'tr');
+
+            expect(endsWith).toBeTruthy();
+        });
+    });
+
+    describe('equals filter test', () => {
+        checkParametersNullOrUndefined('equals');
+
+        it('When value and filter parameter has getTime property', () => {
+            const getTimeMock = jest.fn(() => true);
+            const equals = filters.equals({ getTime: getTimeMock }, { getTime: getTimeMock }, 'tr');
+
+            expect(equals).toBeTruthy();
+        });
+
+        it('When value and filter parameter is not null or undefined', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockReturnValue('value');
+
+            const equals = filters.equals('value', 'filter', 'tr');
+
+            expect(equals).toBeTruthy();
+        });
+    });
+
+    describe('notEquals filter test', () => {
+        it('When filter parameter is undefined', () => {
+            expect(filters.notEquals('value', undefined)).toBeTruthy();
+        });
+
+        it('When value parameter is undefined', () => {
+            expect(filters.notEquals(undefined, 'filter')).toBeTruthy();
+        });
+
+        it('When value parameter is null', () => {
+            expect(filters.notEquals(undefined, 'filter')).toBeTruthy();
+        });
+
+        it('When value and filter parameter has getTime property', () => {
+            const getTimeMock = jest.fn(() => true);
+            const notEquals = filters.notEquals({ getTime: getTimeMock }, { getTime: getTimeMock }, 'tr');
+
+            expect(notEquals).toBeFalsy();
+        });
+
+        it('When value and filter parameter is not null or undefined', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockReturnValue('value');
+
+            const notEquals = filters.notEquals('value', 'filter', 'tr');
+
+            expect(notEquals).toBeFalsy();
+        });
+    });
+
+    describe('in filter test', () => {
+        checkParametersNullOrUndefined('in');
+
+        it('When value parameter equal to any filter word', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockImplementation((value, filter) => value === filter);
+
+            const inFilter = filters.in('e', 'filter');
+
+            expect(inFilter).toBeTruthy();
+        });
+
+        it('When value parameter not equal to any filter word', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockImplementation((value, filter) => value === filter);
+
+            const inFilter = filters.in('d', 'filter');
+
+            expect(inFilter).toBeFalsy();
+        });
+    });
+
+    describe('notIn filter test', () => {
+        it('When filter parameter is undefined', () => {
+            expect(filters.notIn('value', undefined)).toBeTruthy();
+        });
+
+        it('When filter parameter is null', () => {
+            expect(filters.notIn('value', null)).toBeTruthy();
+        });
+
+        it('When value parameter is undefined', () => {
+            expect(filters.notIn(undefined, 'filter')).toBeTruthy();
+        });
+
+        it('When value parameter is null', () => {
+            expect(filters.notIn(null, 'filter')).toBeTruthy();
+        });
+
+        it('When value parameter equal to any filter word', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockImplementation((value, filter) => value === filter);
+
+            const notInFilter = filters.notIn('e', 'filter');
+
+            expect(notInFilter).toBeFalsy();
+        });
+
+        it('When value parameter not equal to any filter word', () => {
+            jest.spyOn(ObjectUtils, 'removeAccents').mockImplementation((value, filter) => value === filter);
+
+            const notInFilter = filters.notIn('d', 'filter');
+
+            expect(notInFilter).toBeTruthy();
+        });
+    });
+
+    describe('between filter test', () => {
+        checkParametersNullOrUndefined('between');
+        it('When value has getTime func and smaller than filter[0]', () => {
+            const filterGetTime = jest.fn(() => 1);
+            const filterGetTime1 = jest.fn(() => 3);
+            const valueGetTime = jest.fn(() => 2);
+
+            const between = filters.between({ getTime: valueGetTime }, [{ getTime: filterGetTime }, { getTime: filterGetTime1 }], 'tr');
+
+            expect(between).toBeTruthy();
+        });
+
+        it('When value has getTime func and smaller than filter[0]', () => {
+            const filter = 1;
+            const filter1 = 2;
+            const value = 2;
+
+            const between = filters.between(value, [filter, filter1], 'tr');
+
+            expect(between).toBeTruthy();
+        });
+    });
+
+    describe('lt filter test', () => {
+        checkParametersNullOrUndefined('lt');
+        it('When value has getTime func and smaller than filter', () => {
+            const filterGetTime = jest.fn(() => 2);
+            const valueGetTime = jest.fn(() => 1);
+
+            const lt = filters.lt({ getTime: valueGetTime }, { getTime: filterGetTime });
+
+            expect(lt).toBeTruthy();
+        });
+
+        it('When value smaller than filter', () => {
+            const filter = 2;
+            const value = 1;
+
+            const lt = filters.lt(value, filter);
+
+            expect(lt).toBeTruthy();
+        });
+    });
+
+    describe('lte filter test', () => {
+        checkParametersNullOrUndefined('lte');
+        it('When value has getTime func and smaller than filter', () => {
+            const filterGetTime = jest.fn(() => 2);
+            const valueGetTime = jest.fn(() => 1);
+
+            const lte = filters.lte({ getTime: valueGetTime }, { getTime: filterGetTime });
+
+            expect(lte).toBeTruthy();
+        });
+
+        it('When value  smaller than filter', () => {
+            const filter = 2;
+            const value = 1;
+
+            const lte = filters.lte(value, filter);
+
+            expect(lte).toBeTruthy();
+        });
+    });
+
+    describe('gt filter test', () => {
+        checkParametersNullOrUndefined('gt');
+        it('When value has getTime func and smaller than filter[0]', () => {
+            const filterGetTime = jest.fn(() => 2);
+            const valueGetTime = jest.fn(() => 1);
+
+            const gt = filters.gt({ getTime: valueGetTime }, { getTime: filterGetTime });
+
+            expect(gt).toBeFalsy();
+        });
+
+        it('When value smaller than filter[0]', () => {
+            const filter = 2;
+            const value = 1;
+
+            const gt = filters.gt(value, filter);
+
+            expect(gt).toBeFalsy();
+        });
+    });
+    describe('gte filter test', () => {
+        checkParametersNullOrUndefined('gte');
+        it('When value has getTime func and smaller than filter[0]', () => {
+            const filterGetTime = jest.fn(() => 2);
+            const valueGetTime = jest.fn(() => 1);
+
+            const gte = filters.gte({ getTime: valueGetTime }, { getTime: filterGetTime });
+
+            expect(gte).toBeFalsy();
+        });
+
+        it('When value parameter smaller than filter[0]', () => {
+            const filter = 2;
+            const value = 1;
+
+            const gte = filters.gte(value, filter);
+
+            expect(gte).toBeFalsy();
+        });
+    });
+
+    describe('dateIs filter test', () => {
+        checkParametersNullOrUndefined('dateIs');
+        it('When value and filter are equal', () => {
+            const filter = new Date(1993, 6, 28, 14, 39, 7);
+            const value = new Date(1993, 6, 28, 14, 39, 7);
+
+            const dateIs = filters.dateIs(value, filter);
+
+            expect(dateIs).toBeTruthy();
+        });
+    });
+
+    describe('dateIsNot filter test', () => {
+        checkParametersNullOrUndefined('dateIsNot');
+        it('When value and filter are not equal', () => {
+            const filter = new Date(1993, 6, 28, 14, 39, 7);
+            const value = new Date(1993, 6, 28, 14, 39, 7);
+
+            const dateIsNot = filters.dateIsNot(value, filter);
+
+            expect(dateIsNot).toBeFalsy();
+        });
+    });
+
+    describe('dateBefore filter test', () => {
+        checkParametersNullOrUndefined('dateBefore');
+        it('When filter value bigger than value', () => {
+            const filter = new Date(1996, 6, 28, 14, 39, 8);
+            const value = new Date(1993, 6, 28, 14, 39, 7);
+
+            const dateBefore = filters.dateBefore(value, filter);
+
+            expect(dateBefore).toBeTruthy();
+        });
+    });
+
+    describe('dateAfter filter test', () => {
+        checkParametersNullOrUndefined('dateAfter');
+        it('When value is not smaller than value', () => {
+            const filter = new Date(1996, 6, 28, 14, 39, 8);
+            const value = new Date(1993, 6, 28, 14, 39, 7);
+
+            const dateAfter = filters.dateAfter(value, filter);
+
+            expect(dateAfter).toBeFalsy();
+        });
+    });
+});
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
new file mode 100644
index 0000000000..c8f441173b
--- /dev/null
+++ b/components/lib/autocomplete/AutoComplete.js
@@ -0,0 +1,821 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { SpinnerIcon } from '../icons/spinner';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { InputText } from '../inputtext/InputText';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { AutoCompleteBase } from './AutoCompleteBase';
+import { AutoCompletePanel } from './AutoCompletePanel';
+
+export const AutoComplete = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = AutoCompleteBase.getProps(inProps, context);
+        const [idState, setIdState] = React.useState(props.id);
+        const [searchingState, setSearchingState] = React.useState(false);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+
+        const metaData = {
+            props,
+            state: {
+                id: idState,
+                searching: searchingState,
+                focused: focusedState,
+                overlayVisible: overlayVisibleState
+            }
+        };
+
+        const { ptm, cx, sx, isUnstyled } = AutoCompleteBase.setMetaData(metaData);
+
+        useHandleStyle(AutoCompleteBase.css.styles, isUnstyled, { name: 'autocomplete' });
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const multiContainerRef = React.useRef(null);
+        const virtualScrollerRef = React.useRef(null);
+        const timeout = React.useRef(null);
+        const selectedItem = React.useRef(null);
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { type, valid }) => {
+                if (valid) {
+                    if (type === 'outside') {
+                        if (!isInputClicked(event)) {
+                            hide();
+                        }
+                    } else if (context.hideOverlaysOnDocumentScrolling) {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const isInputClicked = (event) => {
+            return props.multiple ? event.target === multiContainerRef.current || multiContainerRef.current.contains(event.target) : event.target === inputRef.current;
+        };
+
+        const onInputChange = (event) => {
+            //Cancel the search request if user types within the timeout
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
+
+            const query = event.target.value;
+
+            if (!props.multiple) {
+                updateModel(event, query);
+            }
+
+            if (ObjectUtils.isEmpty(query)) {
+                hide();
+                props.onClear && props.onClear(event);
+            } else if (query.length >= props.minLength) {
+                timeout.current = setTimeout(() => {
+                    search(event, query, 'input');
+                }, props.delay);
+            } else {
+                hide();
+            }
+        };
+
+        const search = (event, query, source) => {
+            //allow empty string but not undefined or null
+            if (query === undefined || query === null) {
+                return;
+            }
+
+            //do not search blank values on input change
+            if (source === 'input' && query.trim().length === 0) {
+                return;
+            }
+
+            if (props.completeMethod) {
+                setSearchingState(true);
+                props.completeMethod({
+                    originalEvent: event,
+                    query
+                });
+            }
+        };
+
+        const selectItem = (event, option, preventInputFocus) => {
+            if (props.multiple) {
+                inputRef.current.value = '';
+
+                // allows empty value/selectionlimit and within sectionlimit
+                if (!isSelected(option) && isAllowMoreValues()) {
+                    const newValue = props.value ? [...props.value, option] : [option];
+
+                    updateModel(event, newValue);
+                }
+            } else {
+                updateInputField(option);
+                updateModel(event, option);
+            }
+
+            if (props.onSelect) {
+                props.onSelect({
+                    originalEvent: event,
+                    value: option
+                });
+            }
+
+            if (!preventInputFocus) {
+                DomHandler.focus(inputRef.current);
+                hide();
+            }
+        };
+
+        const updateModel = (event, value) => {
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value,
+                    stopPropagation: () => {
+                        event.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: idState,
+                        value
+                    }
+                });
+            }
+
+            selectedItem.current = ObjectUtils.isNotEmpty(value) ? value : null;
+        };
+
+        const formatValue = (value) => {
+            if (ObjectUtils.isEmpty(value)) return '';
+
+            if (typeof value === 'string') return value;
+
+            if (props.selectedItemTemplate) {
+                const valueFromTemplate = ObjectUtils.getJSXElement(props.selectedItemTemplate, value);
+
+                return props.multiple || typeof valueFromTemplate === 'string' ? valueFromTemplate : value;
+            }
+
+            if (props.field) {
+                return ObjectUtils.resolveFieldData(value, props.field) ?? value;
+            }
+
+            return value;
+        };
+
+        const updateInputField = (value) => {
+            inputRef.current.value = formatValue(value);
+        };
+
+        const show = () => {
+            setOverlayVisibleState(true);
+        };
+
+        const hide = () => {
+            setOverlayVisibleState(false);
+            setSearchingState(false);
+        };
+
+        const onOverlayEnter = () => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            alignOverlay();
+        };
+
+        const onOverlayEntering = () => {
+            if (props.autoHighlight && props.suggestions && props.suggestions.length) {
+                autoHighlightFirstOption();
+            }
+        };
+
+        const autoHighlightFirstOption = () => {
+            const element = getScrollableElement()?.firstChild?.firstChild;
+
+            if (element) {
+                !isUnstyled() && DomHandler.addClass(element, 'p-highlight');
+                element.setAttribute('data-p-highlight', true);
+            }
+        };
+
+        const onOverlayEntered = () => {
+            bindOverlayListener();
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const alignOverlay = () => {
+            const target = props.multiple ? multiContainerRef.current : inputRef.current;
+
+            DomHandler.alignOverlay(overlayRef.current, target, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+        };
+
+        const onPanelClick = (event) => {
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: elementRef.current
+            });
+        };
+
+        const onDropdownClick = (event) => {
+            if (props.dropdownAutoFocus) {
+                DomHandler.focus(inputRef.current, props.dropdownAutoFocus);
+            }
+
+            if (props.dropdownMode === 'blank') {
+                search(event, '', 'dropdown');
+            } else if (props.dropdownMode === 'current') {
+                search(event, inputRef.current.value, 'dropdown');
+            }
+
+            if (props.onDropdownClick) {
+                props.onDropdownClick({
+                    originalEvent: event,
+                    query: inputRef.current.value
+                });
+            }
+        };
+
+        const removeItem = (event, index) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            const removedValue = props.value[index];
+            const newValue = props.value.filter((_, i) => index !== i);
+
+            updateModel(event, newValue);
+
+            if (props.onUnselect) {
+                props.onUnselect({
+                    originalEvent: event,
+                    value: removedValue
+                });
+            }
+        };
+
+        const onInputKeyDown = (event) => {
+            if (overlayVisibleState) {
+                let highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+
+                switch (event.which) {
+                    //down
+                    case 40:
+                        if (highlightItem) {
+                            let nextElement = findNextItem(highlightItem);
+
+                            if (nextElement) {
+                                !isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight');
+                                nextElement.setAttribute('data-p-highlight', true);
+                                !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
+                                highlightItem.setAttribute('data-p-highlight', false);
+                                DomHandler.scrollInView(getScrollableElement(), nextElement);
+                            }
+                        } else {
+                            highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
+
+                            if (DomHandler.getAttribute(highlightItem, 'data-pc-section') === 'itemgroup') {
+                                highlightItem = findNextItem(highlightItem);
+                            }
+
+                            if (highlightItem) {
+                                !isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight');
+                                highlightItem.setAttribute('data-p-highlight', true);
+                            }
+                        }
+
+                        event.preventDefault();
+                        break;
+
+                    //up
+                    case 38:
+                        if (highlightItem) {
+                            let previousElement = findPrevItem(highlightItem);
+
+                            if (previousElement) {
+                                !isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight');
+                                previousElement.setAttribute('data-p-highlight', true);
+                                !isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
+                                highlightItem.setAttribute('data-p-highlight', false);
+                                DomHandler.scrollInView(getScrollableElement(), previousElement);
+                            }
+                        }
+
+                        event.preventDefault();
+                        break;
+
+                    //enter
+                    case 13:
+                        if (highlightItem) {
+                            selectHighlightItem(event, highlightItem);
+                            hide();
+                            event.preventDefault();
+                        }
+
+                        break;
+
+                    //escape
+                    case 27:
+                        hide();
+                        event.preventDefault();
+                        break;
+
+                    //tab
+                    case 9:
+                        if (highlightItem) {
+                            selectHighlightItem(event, highlightItem);
+                        }
+
+                        hide();
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+
+            if (props.multiple) {
+                switch (event.which) {
+                    //backspace
+                    case 8:
+                        if (props.value && props.value.length && !inputRef.current.value) {
+                            const removedValue = props.value[props.value.length - 1];
+                            const newValue = props.value.slice(0, -1);
+
+                            updateModel(event, newValue);
+
+                            if (props.onUnselect) {
+                                props.onUnselect({
+                                    originalEvent: event,
+                                    value: removedValue
+                                });
+                            }
+                        }
+
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+        };
+
+        const selectHighlightItem = (event, item) => {
+            if (props.optionGroupLabel) {
+                const optionGroup = props.suggestions[item.dataset.group];
+
+                selectItem(event, getOptionGroupChildren(optionGroup)[item.dataset.index]);
+            } else {
+                selectItem(event, props.suggestions[item.getAttribute('index')]);
+            }
+        };
+
+        const findNextItem = (item) => {
+            const nextItem = item.nextElementSibling;
+
+            return nextItem ? (DomHandler.getAttribute(nextItem, 'data-pc-section') === 'itemgroup' ? findNextItem(nextItem) : nextItem) : null;
+        };
+
+        const findPrevItem = (item) => {
+            let prevItem = item.previousElementSibling;
+
+            return prevItem ? (DomHandler.getAttribute(prevItem, 'data-pc-section') === 'itemgroup' ? findPrevItem(prevItem) : prevItem) : null;
+        };
+
+        const onInputFocus = (event) => {
+            setFocusedState(true);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const forceItemSelection = (event) => {
+            if (props.multiple) {
+                inputRef.current.value = '';
+
+                return;
+            }
+
+            const inputValue = ObjectUtils.trim(event.target.value).toLowerCase();
+            const allItems = (props.suggestions || []).flatMap((group) => {
+                return group.items ? group.items : [group];
+            });
+
+            const item = allItems.find((it) => {
+                const value = props.field ? ObjectUtils.resolveFieldData(it, props.field) : it;
+                const trimmedValue = value ? ObjectUtils.trim(value).toLowerCase() : '';
+
+                return trimmedValue && inputValue === trimmedValue;
+            });
+
+            if (item) {
+                selectItem(event, item, true);
+            } else {
+                inputRef.current.value = '';
+                updateModel(event, null);
+
+                props.onClear && props.onClear(event);
+            }
+        };
+
+        const onInputBlur = (event) => {
+            setFocusedState(false);
+
+            if (props.forceSelection) {
+                forceItemSelection(event);
+            }
+
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onMultiContainerClick = (event) => {
+            DomHandler.focus(inputRef.current);
+
+            props.onClick && props.onClick(event);
+        };
+
+        const onMultiInputFocus = (event) => {
+            onInputFocus(event);
+            !isUnstyled() && DomHandler.addClass(multiContainerRef.current, 'p-focus');
+            multiContainerRef.current.setAttribute('data-p-focus', true);
+        };
+
+        const onMultiInputBlur = (event) => {
+            onInputBlur(event);
+            !isUnstyled() && DomHandler.removeClass(multiContainerRef.current, 'p-focus');
+            multiContainerRef.current.setAttribute('data-p-focus', false);
+        };
+
+        const isSelected = (val) => {
+            return props.value ? props.value.some((v) => ObjectUtils.equals(v, val)) : false;
+        };
+
+        const getScrollableElement = () => {
+            return overlayRef?.current?.firstChild;
+        };
+
+        const getOptionGroupLabel = (optionGroup) => {
+            return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : optionGroup;
+        };
+
+        const getOptionGroupChildren = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
+        };
+
+        const isAllowMoreValues = () => {
+            return !props.value || !props.selectionLimit || props.value.length < props.selectionLimit;
+        };
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        React.useEffect(() => {
+            if (ObjectUtils.isNotEmpty(props.value)) {
+                selectedItem.current = props.value;
+            }
+        }, [props.value]);
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+
+            if (props.autoFocus) {
+                DomHandler.focus(inputRef.current, props.autoFocus);
+            }
+
+            alignOverlay();
+        });
+
+        useUpdateEffect(() => {
+            if (searchingState && props.autoHighlight && props.suggestions && props.suggestions.length) {
+                autoHighlightFirstOption();
+            }
+        }, [searchingState]);
+
+        useUpdateEffect(() => {
+            if (searchingState) {
+                ObjectUtils.isNotEmpty(props.suggestions) || props.showEmptyMessage ? show() : hide();
+                setSearchingState(false);
+            }
+        }, [props.suggestions]);
+
+        useUpdateEffect(() => {
+            if (inputRef.current && !props.multiple) {
+                updateInputField(props.value);
+            }
+
+            if (overlayVisibleState) {
+                alignOverlay();
+            }
+        });
+
+        useUnmountEffect(() => {
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
+
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            search,
+            show,
+            hide,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current,
+            getVirtualScroller: () => virtualScrollerRef.current
+        }));
+
+        const createSimpleAutoComplete = () => {
+            const value = formatValue(props.value);
+            const ariaControls = overlayVisibleState ? idState + '_list' : null;
+
+            return (
+                <InputText
+                    ref={inputRef}
+                    id={props.inputId}
+                    type={props.type}
+                    name={props.name}
+                    defaultValue={value}
+                    role="combobox"
+                    aria-autocomplete="list"
+                    aria-controls={ariaControls}
+                    aria-haspopup="listbox"
+                    aria-expanded={overlayVisibleState}
+                    className={classNames(props.inputClassName, cx('input', { context }))}
+                    style={props.inputStyle}
+                    autoComplete="off"
+                    readOnly={props.readOnly}
+                    required={props.required}
+                    disabled={props.disabled}
+                    placeholder={props.placeholder}
+                    size={props.size}
+                    maxLength={props.maxLength}
+                    tabIndex={props.tabIndex}
+                    onBlur={onInputBlur}
+                    onFocus={onInputFocus}
+                    onChange={onInputChange}
+                    onMouseDown={props.onMouseDown}
+                    onKeyUp={props.onKeyUp}
+                    onKeyDown={onInputKeyDown}
+                    onKeyPress={props.onKeyPress}
+                    onContextMenu={props.onContextMenu}
+                    onClick={props.onClick}
+                    onDoubleClick={props.onDblClick}
+                    pt={ptm('input')}
+                    unstyled={props.unstyled}
+                    {...ariaProps}
+                    __parentMetadata={{ parent: metaData }}
+                />
+            );
+        };
+
+        const onRemoveTokenIconKeyDown = (event, val) => {
+            switch (event.code) {
+                case 'Space':
+                case 'NumpadEnter':
+                case 'Enter':
+                    removeItem(event, val);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+            }
+        };
+
+        const createChips = () => {
+            if (ObjectUtils.isNotEmpty(props.value)) {
+                return props.value.map((val, index) => {
+                    const key = index + 'multi-item';
+                    const removeTokenIconProps = mergeProps(
+                        {
+                            className: cx('removeTokenIcon'),
+                            onClick: (e) => removeItem(e, index),
+                            tabIndex: props.tabIndex || '0',
+                            'aria-label': localeOption('clear'),
+                            onKeyDown: (e) => onRemoveTokenIconKeyDown(e, index)
+                        },
+                        ptm('removeTokenIcon')
+                    );
+                    const icon = props.removeTokenIcon || <TimesCircleIcon {...removeTokenIconProps} />;
+                    const removeTokenIcon = !props.disabled && IconUtils.getJSXIcon(icon, { ...removeTokenIconProps }, { props });
+                    const tokenProps = mergeProps(
+                        {
+                            className: cx('token')
+                        },
+                        ptm('token')
+                    );
+                    const tokenLabelProps = mergeProps(
+                        {
+                            className: cx('tokenLabel')
+                        },
+                        ptm('tokenLabel')
+                    );
+
+                    return (
+                        <li key={key} {...tokenProps}>
+                            <span {...tokenLabelProps}>{formatValue(val)}</span>
+                            {removeTokenIcon}
+                        </li>
+                    );
+                });
+            }
+
+            selectedItem.current = null;
+
+            return null;
+        };
+
+        const createMultiInput = (allowMoreValues) => {
+            const ariaControls = overlayVisibleState ? idState + '_list' : null;
+            const inputTokenProps = mergeProps(
+                {
+                    className: cx('inputToken')
+                },
+                ptm('inputToken')
+            );
+            const inputProps = mergeProps(
+                {
+                    id: props.inputId,
+                    ref: inputRef,
+                    'aria-autocomplete': 'list',
+                    'aria-controls': ariaControls,
+                    'aria-expanded': overlayVisibleState,
+                    'aria-haspopup': 'listbox',
+                    autoComplete: 'off',
+                    className: props.inputClassName,
+                    disabled: props.disabled,
+                    maxLength: props.maxLength,
+                    name: props.name,
+                    onBlur: onMultiInputBlur,
+                    onChange: allowMoreValues ? onInputChange : undefined,
+                    onFocus: onMultiInputFocus,
+                    onKeyDown: allowMoreValues ? onInputKeyDown : undefined,
+                    onKeyPress: props.onKeyPress,
+                    onKeyUp: props.onKeyUp,
+                    placeholder: allowMoreValues ? props.placeholder : undefined,
+                    readOnly: props.readOnly || !allowMoreValues,
+                    required: props.required,
+                    role: 'combobox',
+                    style: props.inputStyle,
+                    tabIndex: props.tabIndex,
+                    type: props.type,
+                    ...ariaProps
+                },
+                ptm('input')
+            );
+
+            return (
+                <li {...inputTokenProps}>
+                    <input {...inputProps} />
+                </li>
+            );
+        };
+
+        const createMultipleAutoComplete = () => {
+            const allowMoreValues = isAllowMoreValues();
+            const tokens = createChips();
+            const input = createMultiInput(allowMoreValues);
+            const containerProps = mergeProps(
+                {
+                    ref: multiContainerRef,
+                    className: cx('container', { context }),
+                    onClick: allowMoreValues ? onMultiContainerClick : undefined,
+                    onContextMenu: props.onContextMenu,
+                    onMouseDown: props.onMouseDown,
+                    onDoubleClick: props.onDblClick,
+                    'data-p-focus': focusedState,
+                    'data-p-disabled': props.disabled
+                },
+                ptm('container')
+            );
+
+            return (
+                <ul {...containerProps}>
+                    {tokens}
+                    {input}
+                </ul>
+            );
+        };
+
+        const createDropdown = () => {
+            if (props.dropdown) {
+                const ariaLabel = props.dropdownAriaLabel || props.placeholder || localeOption('choose');
+
+                return (
+                    <Button
+                        type="button"
+                        icon={props.dropdownIcon || <ChevronDownIcon />}
+                        className={cx('dropdownButton')}
+                        disabled={props.disabled}
+                        onClick={onDropdownClick}
+                        aria-label={ariaLabel}
+                        pt={ptm('dropdownButton')}
+                        __parentMetadata={{ parent: metaData }}
+                    />
+                );
+            }
+
+            return null;
+        };
+
+        const createLoader = () => {
+            if (searchingState) {
+                const loadingIconProps = mergeProps(
+                    {
+                        className: cx('loadingIcon')
+                    },
+                    ptm('loadingIcon')
+                );
+                const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
+                const loaderIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+
+                return loaderIcon;
+            }
+
+            return null;
+        };
+
+        const createInput = () => {
+            return props.multiple ? createMultipleAutoComplete() : createSimpleAutoComplete();
+        };
+
+        const listId = idState + '_list';
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = AutoCompleteBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const loader = createLoader();
+        const input = createInput();
+        const dropdown = createDropdown();
+        const rootProps = mergeProps(
+            {
+                id: idState,
+                ref: elementRef,
+                style: props.style,
+                className: classNames(props.className, cx('root', { focusedState }))
+            },
+            otherProps,
+            ptm('root')
+        );
+
+        return (
+            <>
+                <span {...rootProps}>
+                    {input}
+                    {loader}
+                    {dropdown}
+                    <AutoCompletePanel
+                        hostName="AutoComplete"
+                        ref={overlayRef}
+                        virtualScrollerRef={virtualScrollerRef}
+                        {...props}
+                        listId={listId}
+                        onItemClick={selectItem}
+                        selectedItem={selectedItem}
+                        onOverlayHide={hide}
+                        onClick={onPanelClick}
+                        getOptionGroupLabel={getOptionGroupLabel}
+                        getOptionGroupChildren={getOptionGroupChildren}
+                        in={overlayVisibleState}
+                        onEnter={onOverlayEnter}
+                        onEntering={onOverlayEntering}
+                        onEntered={onOverlayEntered}
+                        onExit={onOverlayExit}
+                        onExited={onOverlayExited}
+                        ptm={ptm}
+                        cx={cx}
+                        sx={sx}
+                    />
+                </span>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+AutoComplete.displayName = 'AutoComplete';
diff --git a/components/lib/autocomplete/AutoCompleteBase.js b/components/lib/autocomplete/AutoCompleteBase.js
new file mode 100644
index 0000000000..7382dd4641
--- /dev/null
+++ b/components/lib/autocomplete/AutoCompleteBase.js
@@ -0,0 +1,223 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, focusedState }) =>
+        classNames('p-autocomplete p-component p-inputwrapper', {
+            'p-autocomplete-dd': props.dropdown,
+            'p-autocomplete-multiple': props.multiple,
+            'p-inputwrapper-filled': props.value,
+            'p-invalid': props.invalid,
+            'p-inputwrapper-focus': focusedState
+        }),
+    container: ({ props, context }) =>
+        classNames('p-autocomplete-multiple-container p-component p-inputtext', {
+            'p-disabled': props.disabled,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    loadingIcon: 'p-autocomplete-loader',
+    dropdownButton: 'p-autocomplete-dropdown',
+    removeTokenIcon: 'p-autocomplete-token-icon',
+    token: 'p-autocomplete-token p-highlight',
+    tokenLabel: 'p-autocomplete-token-label',
+    inputToken: 'p-autocomplete-input-token',
+    input: ({ props, context }) =>
+        classNames('p-autocomplete-input', {
+            'p-autocomplete-dd-input': props.dropdown,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    panel: ({ context }) =>
+        classNames('p-autocomplete-panel p-component', {
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    listWrapper: 'p-autocomplete-items-wrapper',
+    list: ({ virtualScrollerOptions, options }) => (virtualScrollerOptions ? classNames('p-autocomplete-items', options.className) : 'p-autocomplete-items'),
+    emptyMessage: 'p-autocomplete-item',
+    item: ({ suggestion, optionGroupLabel, selected }) =>
+        optionGroupLabel ? classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled }, { selected: selected }) : classNames('p-autocomplete-item', { 'p-disabled': suggestion.disabled }, { 'p-highlight': selected }),
+    itemGroup: 'p-autocomplete-item-group',
+    footer: 'p-autocomplete-footer',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-autocomplete {
+        display: inline-flex;
+        position: relative;
+    }
+    
+    .p-autocomplete-loader {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+    
+    .p-autocomplete-dd .p-autocomplete-input {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+    
+    .p-autocomplete-dd .p-autocomplete-input,
+    .p-autocomplete-dd .p-autocomplete-multiple-container {
+         border-top-right-radius: 0;
+         border-bottom-right-radius: 0;
+     }
+    
+    .p-autocomplete-dd .p-autocomplete-dropdown {
+         border-top-left-radius: 0;
+         border-bottom-left-radius: 0px;
+    }
+    
+    .p-autocomplete .p-autocomplete-panel {
+        min-width: 100%;
+    }
+    
+    .p-autocomplete-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    
+    .p-autocomplete-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+    
+    .p-autocomplete-item {
+        cursor: pointer;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .p-autocomplete-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    
+    .p-autocomplete-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+    
+    .p-autocomplete-token-icon {
+        cursor: pointer;
+    }
+    
+    .p-autocomplete-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+    
+    .p-autocomplete-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+    
+    .p-fluid .p-autocomplete {
+        display: flex;
+    }
+    
+    .p-fluid .p-autocomplete-dd .p-autocomplete-input {
+        width: 1%;
+    }
+    
+    .p-autocomplete-items-wrapper {
+        overflow: auto;
+    } 
+}
+`;
+
+export const AutoCompleteBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'AutoComplete',
+        id: null,
+        appendTo: null,
+        autoFocus: false,
+        autoHighlight: false,
+        className: null,
+        completeMethod: null,
+        delay: 300,
+        disabled: false,
+        dropdown: false,
+        dropdownAriaLabel: null,
+        dropdownAutoFocus: true,
+        dropdownIcon: null,
+        dropdownMode: 'blank',
+        emptyMessage: null,
+        field: null,
+        forceSelection: false,
+        inputClassName: null,
+        inputId: null,
+        inputRef: null,
+        inputStyle: null,
+        variant: null,
+        invalid: false,
+        itemTemplate: null,
+        loadingIcon: null,
+        maxLength: null,
+        minLength: 1,
+        multiple: false,
+        name: null,
+        onBlur: null,
+        onChange: null,
+        onClear: null,
+        onClick: null,
+        onContextMenu: null,
+        onDblClick: null,
+        onDropdownClick: null,
+        onFocus: null,
+        onHide: null,
+        onKeyPress: null,
+        onKeyUp: null,
+        onMouseDown: null,
+        onSelect: null,
+        onShow: null,
+        onUnselect: null,
+        optionGroupChildren: null,
+        optionGroupLabel: null,
+        optionGroupTemplate: null,
+        panelClassName: null,
+        panelFooterTemplate: null,
+        panelStyle: null,
+        placeholder: null,
+        readOnly: false,
+        removeTokenIcon: null,
+        scrollHeight: '200px',
+        selectedItemTemplate: null,
+        selectionLimit: null,
+        showEmptyMessage: false,
+        size: null,
+        style: null,
+        suggestions: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        transitionOptions: null,
+        type: 'text',
+        value: null,
+        virtualScrollerOptions: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
new file mode 100644
index 0000000000..fb9b35240f
--- /dev/null
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -0,0 +1,309 @@
+import * as React from 'react';
+import { localeOption, PrimeReactContext } from '../api/Api';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, ObjectUtils } from '../utils/Utils';
+import { VirtualScroller } from '../virtualscroller/VirtualScroller';
+
+export const AutoCompletePanel = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { ptm, cx } = props;
+        const context = React.useContext(PrimeReactContext);
+
+        const _ptm = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const getPTOptions = (item, key) => {
+            return _ptm(key, {
+                context: {
+                    selected: props.selectedItem.current === item,
+                    disabled: item.disabled
+                }
+            });
+        };
+
+        const getOptionGroupRenderKey = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
+        };
+
+        const getOptionRenderKey = (option) => {
+            return ObjectUtils.resolveFieldData(option, props.field);
+        };
+
+        const createFooter = () => {
+            if (props.panelFooterTemplate) {
+                const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
+                const footerProps = mergeProps(
+                    {
+                        className: cx('footer')
+                    },
+                    _ptm('footer')
+                );
+
+                return <div {...footerProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const findKeyIndex = (array, key, value) => {
+            return array.findIndex((obj) => obj[key] === value);
+        };
+
+        const latestKey = React.useRef({ key: null, index: 0, keyIndex: 0 });
+
+        const createLabelItem = (item, key, index, labelItemProps) => {
+            const content = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, item, index) : props.getOptionGroupLabel(item) || item;
+            const itemGroupProps = mergeProps(
+                {
+                    index,
+                    className: cx('itemGroup'),
+                    'data-p-highlight': false,
+                    ...labelItemProps
+                },
+                _ptm('itemGroup')
+            );
+
+            return (
+                <li {...itemGroupProps} key={key ? key : null}>
+                    {content}
+                </li>
+            );
+        };
+
+        const isOptionSelected = (item) => {
+            if (props.selectedItem && props.selectedItem.current && Array.isArray(props.selectedItem.current)) {
+                return props.selectedItem.current.some((selectedItem) => ObjectUtils.deepEquals(selectedItem, item));
+            } else {
+                return ObjectUtils.deepEquals(props.selectedItem.current, item);
+            }
+        };
+
+        const createListItem = (item, key, index, listItemProps) => {
+            const selected = isOptionSelected(item);
+            const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, item, index) : props.field ? ObjectUtils.resolveFieldData(item, props.field) : item;
+            const itemProps = mergeProps(
+                {
+                    index: index,
+                    role: 'option',
+                    className: cx('item', { optionGroupLabel: props.optionGroupLabel, suggestion: item, selected: selected }),
+                    onClick: (e) => props.onItemClick(e, item),
+                    'aria-selected': selected,
+                    ...listItemProps
+                },
+                getPTOptions(item, 'item')
+            );
+
+            return (
+                <li key={key} {...itemProps}>
+                    {content}
+                    <Ripple />
+                </li>
+            );
+        };
+
+        const createGroupChildren = (optionGroup, i) => {
+            const groupChildren = props.getOptionGroupChildren(optionGroup);
+
+            return groupChildren.map((item, j) => {
+                const key = i + '_' + j;
+                const itemProps = mergeProps({
+                    'data-group': i,
+                    'data-index': j,
+                    'data-p-disabled': item.disabled
+                });
+
+                return createListItem(item, key, j, itemProps);
+            });
+        };
+
+        const createItem = (suggestion, index, scrollerOptions = {}) => {
+            const style = { height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined };
+
+            if (props.optionGroupLabel) {
+                if (props.virtualScrollerOptions) {
+                    const keyIndex = findKeyIndex(props.suggestions, props.optionGroupLabel, suggestion);
+
+                    if (keyIndex !== -1) {
+                        latestKey.current = { key: suggestion, index, keyIndex };
+                        const key = index + '_' + getOptionGroupRenderKey(suggestion);
+
+                        return createLabelItem(suggestion, key, index, { style });
+                    }
+
+                    const key = index + '_' + latestKey.current.keyIndex;
+                    const itemProps = mergeProps({
+                        style,
+                        'data-group': latestKey.current.keyIndex,
+                        'data-index': index - latestKey.current.index - 1,
+                        'data-p-disabled': suggestion.disabled
+                    });
+
+                    return createListItem(suggestion, key, index, itemProps);
+                }
+
+                const childrenContent = createGroupChildren(suggestion, index, style);
+                const key = index + '_' + getOptionGroupRenderKey(suggestion);
+
+                return (
+                    <React.Fragment key={key}>
+                        {createLabelItem(suggestion, undefined, index, { style })}
+                        {childrenContent}
+                    </React.Fragment>
+                );
+            }
+
+            const key = `${index}_${ObjectUtils.isObject(suggestion) ? getOptionRenderKey(suggestion) : suggestion}`;
+            const itemProps = mergeProps(
+                {
+                    style,
+                    'data-p-disabled': suggestion.disabled
+                },
+                getPTOptions(suggestion, 'item')
+            );
+
+            return createListItem(suggestion, key, index, itemProps);
+        };
+
+        const createItems = () => {
+            return props.suggestions ? props.suggestions.map(createItem) : null;
+        };
+
+        const flattenGroupedItems = (items) => {
+            try {
+                return items?.map((item) => [item?.[props?.optionGroupLabel], ...item?.[props?.optionGroupChildren]]).flat();
+            } catch (e) {}
+        };
+
+        const createContent = () => {
+            if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) {
+                const emptyMessage = props.emptyMessage || localeOption('emptyMessage');
+                const emptyMessageProps = mergeProps(
+                    {
+                        className: cx('emptyMessage')
+                    },
+                    _ptm('emptyMessage')
+                );
+
+                const listProps = mergeProps(
+                    {
+                        className: cx('list')
+                    },
+                    _ptm('list')
+                );
+
+                return (
+                    <ul {...listProps}>
+                        <li {...emptyMessageProps}>{emptyMessage}</li>
+                    </ul>
+                );
+            }
+
+            if (props.virtualScrollerOptions) {
+                const items = props.suggestions ? (props.optionGroupLabel ? flattenGroupedItems(props?.suggestions) : props.suggestions) : null;
+                const virtualScrollerProps = {
+                    ...props.virtualScrollerOptions,
+                    ...{
+                        style: { ...props.virtualScrollerOptions.style, ...{ height: props.scrollHeight } },
+                        autoSize: true,
+                        items: items,
+                        itemTemplate: (item, options) => item && createItem(item, options.index, options),
+                        contentTemplate: (options) => {
+                            const listProps = mergeProps(
+                                {
+                                    id: props.listId,
+                                    ref: options.contentRef,
+                                    style: options.style,
+                                    className: cx('list', { virtualScrollerProps, options }),
+                                    role: 'listbox'
+                                },
+                                _ptm('list')
+                            );
+
+                            return <ul {...listProps}>{options.children}</ul>;
+                        }
+                    }
+                };
+
+                return <VirtualScroller ref={props.virtualScrollerRef} {...virtualScrollerProps} pt={_ptm('virtualScroller')} __parentMetadata={{ parent: props.metaData }} />;
+            }
+
+            const items = createItems();
+            const listProps = mergeProps(
+                {
+                    id: props.listId,
+                    className: cx('list'),
+                    role: 'listbox'
+                },
+                _ptm('list')
+            );
+
+            const listWrapperProps = mergeProps(
+                {
+                    className: cx('listWrapper'),
+                    style: { maxHeight: props.scrollHeight || 'auto' }
+                },
+                _ptm('listWrapper')
+            );
+
+            return (
+                <div {...listWrapperProps}>
+                    <ul {...listProps}>{items}</ul>
+                </div>
+            );
+        };
+
+        const createElement = () => {
+            const style = { ...(props.panelStyle || {}) };
+            const content = createContent();
+            const footer = createFooter();
+            const panelProps = mergeProps(
+                {
+                    className: classNames(props.panelClassName, cx('panel', { context })),
+                    style,
+                    onClick: (e) => props.onClick(e),
+                    'data-pr-is-overlay': true
+                },
+                _ptm('panel')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: props.in,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter: props.onEnter,
+                    onEntering: props.onEntering,
+                    onEntered: props.onEntered,
+                    onExit: props.onExit,
+                    onExited: props.onExited
+                },
+                _ptm('transition')
+            );
+
+            return (
+                <CSSTransition nodeRef={ref} {...transitionProps}>
+                    <div ref={ref} {...panelProps}>
+                        {content}
+                        {footer}
+                    </div>
+                </CSSTransition>
+            );
+        };
+
+        const element = createElement();
+
+        return <Portal element={element} appendTo={props.appendTo} />;
+    })
+);
+
+AutoCompletePanel.displayName = 'AutoCompletePanel';
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
new file mode 100755
index 0000000000..b13443cc44
--- /dev/null
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -0,0 +1,611 @@
+/**
+ *
+ * AutoComplete is an input component that provides real-time suggestions while being typed.
+ *
+ * [Live Demo](https://www.primereact.org/autocomplete/)
+ *
+ * @module autocomplete
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ButtonPassThroughOptions } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils';
+import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type AutoCompletePassThroughType<T> = PassThroughType<T, AutoCompletePassThroughMethodOptions>;
+export declare type AutoCompletePassThroughTransitionType = ReactCSSTransitionProps | ((options: AutoCompletePassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AutoCompletePassThroughMethodOptions {
+    props: AutoCompleteProps;
+    state: AutoCompleteState;
+    context: AutoCompleteContext;
+}
+
+/**
+ * Custom change event.
+ * @see {@link AutoCompleteProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface AutoCompleteChangeEvent<T = any> extends FormEvent<T> {
+    value: T;
+}
+
+/**
+ * Custom select event with generic type support
+ * @see {@link AutoCompleteProps.onSelect}
+ * @event
+ */
+interface AutoCompleteSelectEvent<T = any> {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected option value
+     */
+    value: T extends any[] ? T[number] : T;
+}
+
+/**
+ * Custom unselect event extending the select event
+ * @see {@link AutoCompleteProps.onUnselect}
+ * @extends {AutoCompleteSelectEvent}
+ * @event
+ */
+interface AutoCompleteUnselectEvent<T = any> extends AutoCompleteSelectEvent<T> {}
+
+/**
+ * Custom click event.
+ * @see {@link AutoCompleteProps.onDropdownClick}
+ * @event
+ */
+interface AutoCompleteDropdownClickEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Current value of the input field
+     */
+    query: string;
+}
+
+/**
+ * Custom complete method event.
+ * @see {@link AutoCompleteProps.completeMethod}
+ * @event
+ */
+interface AutoCompleteCompleteEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Value to search with
+     */
+    query: string;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AutoCompleteProps.pt}
+ */
+export interface AutoCompletePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    footer?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: InputTextPassThroughOptions;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: AutoCompletePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the input token's DOM element.
+     */
+    inputToken?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: AutoCompletePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     *  @see {@link ButtonPassThroughOptions}
+     */
+    dropdownButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptions}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptions;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: AutoCompletePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: AutoCompletePassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in AutoComplete component.
+ */
+export interface AutoCompleteState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current search state as a boolean.
+     * @defaultValue false
+     */
+    searching: boolean;
+}
+
+/**
+ * Defines current options in AutoComplete component.
+ */
+export interface AutoCompleteContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in AutoComplete component. In addition to these, all properties of HTMLSpanElement can be used in this component.
+ * @group Properties
+ */
+export interface AutoCompleteProps<T = any, M extends boolean = false> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref' | 'value'> {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * When enabled, highlights the first item in the list by default.
+     * @defaultValue false
+     */
+    autoHighlight?: boolean | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Delay between keystrokes to wait before sending a query.
+     * @defaultValue 300
+     */
+    delay?: number | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Displays a button next to the input field when enabled.
+     * @defaultValue false
+     */
+    dropdown?: boolean | undefined;
+    /**
+     * ARIA label for the dropdown button. Defaults to placeholder then Locale "choose" label.
+     * @defaultValue Choose
+     */
+    dropdownAriaLabel?: string | undefined;
+    /**
+     * Focus the input field when the dropdown button is clicked if enabled.
+     * @defaultValue true
+     */
+    dropdownAutoFocus?: boolean | undefined;
+    /**
+     * Icon of the dropdown.
+     */
+    dropdownIcon?: IconType<AutoCompleteProps<T>> | undefined;
+    /**
+     * Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.
+     * @defaultValue blank
+     */
+    dropdownMode?: 'blank' | 'current' | undefined;
+    /**
+     * Text to display when there is no data. Defaults to global value in i18n translation configuration.
+     * @defaultValue No results found.
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Field of a suggested object to resolve and display.
+     */
+    field?: string | undefined;
+    /**
+     * When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions.
+     * @defaultValue false
+     */
+    forceSelection?: boolean | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: React.CSSProperties | undefined;
+    /**
+     * Icon of the loader.
+     */
+    loadingIcon?: IconType<AutoCompleteProps> | undefined;
+    /**
+     * Template of a list item.
+     */
+    itemTemplate?: React.ReactNode | ((suggestion: T, index: number) => React.ReactNode);
+    /**
+     * Maximum number of characters to initiate a search.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Minimum number of characters to initiate a search.
+     * @defaultValue 1
+     */
+    minLength?: number | undefined;
+    /**
+     * Specifies if multiple values can be selected.
+     * @defaultValue false
+     */
+    multiple?: M;
+    /**
+     * Number of maximum options that can be selected.
+     */
+    selectionLimit?: number | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Property name or getter function that refers to the children options of option group.
+     */
+    optionGroupChildren?: string | undefined;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     */
+    optionGroupLabel?: string | undefined;
+    /**
+     * Template of an option group item.
+     */
+    optionGroupTemplate?: React.ReactNode | ((suggestion: T, index: number) => React.ReactNode);
+    /**
+     * Style class of the overlay panel element.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * Template of the panel footer.
+     */
+    panelFooterTemplate?: React.ReactNode | ((props: AutoCompleteProps, hide: () => void) => React.ReactNode);
+    /**
+     * Inline style of the overlay panel element.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Hint text for the input field.
+     */
+    placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the input cannot be typed.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * Icon of the remove chip element in multiple mode.
+     */
+    removeTokenIcon?: IconType<AutoCompleteProps> | undefined;
+    /**
+     * Maximum height of the suggestions panel.
+     * @defaultValue 200px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * Template of a selected item. In multiple mode, it is used to customize the chips using a ReactNode. In single mode, it is used to customize the text using a string.
+     */
+    selectedItemTemplate?: React.ReactNode | string | undefined | null | ((value: T) => React.ReactNode | string | undefined | null);
+    /**
+     * Whether to show the empty message or not.
+     * @defaultValue false
+     */
+    showEmptyMessage?: boolean | undefined;
+    /**
+     * Size of the input field.
+     */
+    size?: number | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * An array of suggestions to display.
+     */
+    suggestions?: (T extends any[] ? T[number] : T)[];
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Type of the input element.
+     */
+    type?: string | undefined;
+    /**
+     * Value of the component.
+     */
+    value?: M extends true ? T[] : T | string | number | readonly string[] | undefined;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     * @type {VirtualScrollerProps}
+     */
+    virtualScrollerOptions?: VirtualScrollerProps | undefined;
+    /**
+     * Callback to invoke to search for suggestions.
+     * @param {AutoCompleteCompleteEvent} event - Custom complete method event.
+     */
+    completeMethod?(event: AutoCompleteCompleteEvent): void;
+    /**
+     * Callback to invoke when autocomplete loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete value changes.
+     * @param {AutoCompleteChangeEvent} event - Custom change event.
+     */
+    onChange?(event: AutoCompleteChangeEvent<M extends true ? T[] : T>): void;
+    /**
+     * Callback to invoke when input is cleared by the user.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClear?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke on click.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke on right-click.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onContextMenu?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke on double click.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onDblClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke to when dropdown button is clicked.
+     * @param {AutoCompleteDropdownClickEvent} event - Custom click event.
+     */
+    onDropdownClick?(event: AutoCompleteDropdownClickEvent): void;
+    /**
+     * Callback to invoke when autocomplete gets focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when overlay panel becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Callback to invoke to when a key is pressed.
+     * @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event.
+     */
+    onKeyPress?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke to when a key is released.
+     * @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event.
+     */
+    onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke to when a mouse button is pressed.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when a suggestion is selected.
+     * @param {AutoCompleteSelectEvent} event - Custom select event.
+     */
+    onSelect?(event: AutoCompleteSelectEvent<T>): void;
+    /**
+     * Callback to invoke when overlay panel becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when a selected value is removed.
+     * @param {AutoCompleteUnselectEvent} event - Custom unselect event.
+     */
+    onUnselect?(event: AutoCompleteUnselectEvent<T>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AutoCompletePassThroughOptions}
+     */
+    pt?: AutoCompletePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - AutoComplete**
+ *
+ * _AutoComplete is an input component that provides real-time suggestions while being typed._
+ *
+ * [Live Demo](https://www.primereact.org/autocomplete/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AutoComplete<T = any, M extends boolean = false> extends React.Component<AutoCompleteProps<T, M>, any> {
+    /**
+     * Used to show the overlay.
+     */
+    public show(): void;
+    /**
+     * Used to hide the overlay.
+     */
+    public hide(): void;
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to search new suggestions.
+     * @param {React.SyntheticEvent} event - Browser event.
+     * @param {string} query - Value to search with.
+     * @param {string} [source] - Source type, valid values are 'dropdown' and 'input'
+     */
+    public search(event: React.SyntheticEvent, query: string, source?: 'dropdown' | 'input' | null | undefined): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement | null} Container element
+     */
+    public getElement(): HTMLSpanElement | null;
+    /**
+     * Used to get input element.
+     * @return {InputText | null} Input element
+     */
+    public getInput(): typeof InputText | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+    /**
+     * Used to get the options of inline virtualScroller component.
+     * @return {VirtualScroller | null} VirtualScroller component
+     */
+    public getVirtualScroller(): VirtualScroller | null;
+}
diff --git a/components/lib/autocomplete/package.json b/components/lib/autocomplete/package.json
new file mode 100644
index 0000000000..cb695c150e
--- /dev/null
+++ b/components/lib/autocomplete/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./autocomplete.cjs.js",
+    "module": "./autocomplete.esm.js",
+    "unpkg": "./autocomplete.min.js",
+    "types": "./autocomplete.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
new file mode 100644
index 0000000000..c9ebe378a5
--- /dev/null
+++ b/components/lib/avatar/Avatar.js
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { AvatarBase } from './AvatarBase';
+
+export const Avatar = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = AvatarBase.getProps(inProps, context);
+
+    const elementRef = React.useRef(null);
+    const [imageFailed, setImageFailed] = React.useState(false);
+    const [nested, setNested] = React.useState(false);
+
+    const { ptm, cx, isUnstyled } = AvatarBase.setMetaData({
+        props,
+        state: {
+            imageFailed: imageFailed,
+            nested
+        }
+    });
+
+    useHandleStyle(AvatarBase.css.styles, isUnstyled, { name: 'avatar' });
+
+    const createContent = () => {
+        if (ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
+            const imageProps = mergeProps(
+                {
+                    src: props.image,
+                    onError: onImageError
+                },
+                ptm('image')
+            );
+
+            return <img alt={props.imageAlt} {...imageProps} />;
+        } else if (props.label) {
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+
+            return <span {...labelProps}>{props.label}</span>;
+        } else if (props.icon) {
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+
+            return IconUtils.getJSXIcon(props.icon, { ...iconProps }, { props });
+        }
+
+        return null;
+    };
+
+    const onImageError = (event) => {
+        if (props.imageFallback === 'default') {
+            if (!props.onImageError) {
+                // fallback to label or icon
+                setImageFailed(true);
+                event.target.src = null;
+            }
+        } else {
+            // try fallback as an image
+            event.target.src = props.imageFallback;
+        }
+
+        props.onImageError && props.onImageError(event);
+    };
+
+    React.useEffect(() => {
+        const nested = DomHandler.isAttributeEquals(elementRef.current.parentElement, 'data-pc-name', 'avatargroup');
+
+        setNested(nested);
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current
+    }));
+
+    const rootProps = mergeProps(
+        {
+            ref: elementRef,
+            style: props.style,
+            className: classNames(props.className, cx('root', { imageFailed }))
+        },
+        AvatarBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
+
+    return (
+        <div {...rootProps}>
+            {content}
+            {props.children}
+        </div>
+    );
+});
+
+Avatar.displayName = 'Avatar';
diff --git a/components/lib/avatar/Avatar.spec.js b/components/lib/avatar/Avatar.spec.js
new file mode 100644
index 0000000000..a8284e9706
--- /dev/null
+++ b/components/lib/avatar/Avatar.spec.js
@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { Badge } from '../badge/Badge';
+import { Avatar } from './Avatar';
+
+import { snapshot } from '../../test';
+
+describe('Avatar', () => {
+    snapshot(<Avatar />, 'default');
+    snapshot(<Avatar label="P" />, 'label');
+    snapshot(<Avatar icon="pi pi-search" />, 'icon');
+    snapshot(<Avatar image="user.png" />, 'image');
+    snapshot(<Avatar size="large" />, 'size large');
+    snapshot(<Avatar size="xlarge" />, 'size xlarge');
+    snapshot(<Avatar shape="square" />, 'shape square');
+    snapshot(<Avatar size="cirle" />, 'shape cirle');
+    snapshot(<Avatar>Content</Avatar>, 'templating');
+    snapshot(
+        <Avatar image="user.png" size="xlarge">
+            <Badge value="4" severity="danger" />
+        </Avatar>,
+        'badge'
+    );
+});
diff --git a/components/lib/avatar/AvatarBase.js b/components/lib/avatar/AvatarBase.js
new file mode 100644
index 0000000000..cc94a6713b
--- /dev/null
+++ b/components/lib/avatar/AvatarBase.js
@@ -0,0 +1,75 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, state }) =>
+        classNames('p-avatar p-component', {
+            'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !state.imageFailed,
+            'p-avatar-circle': props.shape === 'circle',
+            'p-avatar-lg': props.size === 'large',
+            'p-avatar-xl': props.size === 'xlarge',
+            'p-avatar-clickable': !!props.onClick
+        }),
+    label: 'p-avatar-text',
+    icon: 'p-avatar-icon'
+};
+
+const styles = `
+@layer primereact {
+    .p-avatar {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        font-size: 1rem;
+    }
+    
+    .p-avatar.p-avatar-image {
+        background-color: transparent;
+    }
+    
+    .p-avatar.p-avatar-circle {
+        border-radius: 50%;
+    }
+    
+    .p-avatar.p-avatar-circle img {
+        border-radius: 50%;
+    }
+    
+    .p-avatar .p-avatar-icon {
+        font-size: 1rem;
+    }
+    
+    .p-avatar img {
+        width: 100%;
+        height: 100%;
+    }
+    
+    .p-avatar-clickable {
+        cursor: pointer;
+    }
+}
+`;
+
+export const AvatarBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Avatar',
+        className: null,
+        icon: null,
+        image: null,
+        imageAlt: 'avatar',
+        imageFallback: 'default',
+        label: null,
+        onImageError: null,
+        shape: 'square',
+        size: 'normal',
+        style: null,
+        template: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/avatar/__snapshots__/Avatar.spec.js.snap b/components/lib/avatar/__snapshots__/Avatar.spec.js.snap
new file mode 100644
index 0000000000..136011b982
--- /dev/null
+++ b/components/lib/avatar/__snapshots__/Avatar.spec.js.snap
@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar badge 1`] = `
+<div>
+  <div
+    class="p-avatar p-component p-avatar-image p-avatar-xl"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  >
+    <img
+      alt="avatar"
+      data-pc-section="image"
+      src="http://github.com/user.png"
+    />
+    <span
+      class="p-badge p-component p-badge-no-gutter p-badge-danger"
+      data-pc-name="badge"
+      data-pc-section="root"
+    >
+      4
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Avatar default 1`] = `
+<div>
+  <div
+    class="p-avatar p-component"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Avatar icon 1`] = `
+<div>
+  <div
+    class="p-avatar p-component"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  >
+    <span
+      class="p-avatar-icon pi pi-search"
+      data-pc-section="icon"
+    />
+  </div>
+</div>
+`;
+
+exports[`Avatar image 1`] = `
+<div>
+  <div
+    class="p-avatar p-component p-avatar-image"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  >
+    <img
+      alt="avatar"
+      data-pc-section="image"
+      src="http://github.com/user.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Avatar label 1`] = `
+<div>
+  <div
+    class="p-avatar p-component"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  >
+    <span
+      class="p-avatar-text"
+      data-pc-section="label"
+    >
+      P
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Avatar shape cirle 1`] = `
+<div>
+  <div
+    class="p-avatar p-component"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Avatar shape square 1`] = `
+<div>
+  <div
+    class="p-avatar p-component"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Avatar size large 1`] = `
+<div>
+  <div
+    class="p-avatar p-component p-avatar-lg"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Avatar size xlarge 1`] = `
+<div>
+  <div
+    class="p-avatar p-component p-avatar-xl"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Avatar templating 1`] = `
+<div>
+  <div
+    class="p-avatar p-component"
+    data-pc-name="avatar"
+    data-pc-section="root"
+  >
+    Content
+  </div>
+</div>
+`;
diff --git a/components/lib/avatar/avatar.d.ts b/components/lib/avatar/avatar.d.ts
new file mode 100644
index 0000000000..71c31ac08b
--- /dev/null
+++ b/components/lib/avatar/avatar.d.ts
@@ -0,0 +1,158 @@
+/**
+ *
+ * Avatar represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primereact.org/avatar)
+ *
+ * @module avatar
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type AvatarPassThroughType<T> = PassThroughType<T, AvatarPassThroughMethodOptions>;
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AvatarPassThroughMethodOptions {
+    props: AvatarProps;
+    state: AvatarState;
+}
+
+/**
+ * Defines current inline state in Avatar component.
+ */
+export interface AvatarState {
+    /**
+     * Current imageFailed state as a boolean.
+     * @defaultValue false
+     */
+    imageFailed: boolean;
+    /**
+     * Current state that indicates whether the Avatar component is nested within an AvatarGroup component.
+     * @defaultValue false
+     */
+    isNestedInAvatarGroup: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarProps.pt}
+ */
+export interface AvatarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: AvatarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: AvatarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: AvatarPassThroughType<React.ImgHTMLAttributes<HTMLImageElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface AvatarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Defines the icon to display.
+     */
+    icon?: IconType<AvatarProps> | undefined;
+    /**
+     * Defines the image to display.
+     */
+    image?: string | undefined;
+    /**
+     * It specifies an alternate text for an image, if the image cannot be displayed.
+     * @defaultValue avatar
+     */
+    imageAlt?: string | undefined;
+    /**
+     * Defines a fallback image or URL if the main image fails to load. If "default" will fallback to label then icon.
+     * @defaultValue default
+     */
+    imageFallback?: 'default' | string | undefined;
+    /**
+     * Defines the text to display.
+     */
+    label?: string | undefined;
+    /**
+     * Shape of the element.
+     * @defaultValue square
+     */
+    shape?: 'square' | 'circle' | undefined;
+    /**
+     * Size of the element.
+     * @defaultValue normal
+     */
+    size?: 'normal' | 'large' | 'xlarge' | undefined;
+    /**
+     * Template of the content.
+     */
+    template?: React.ReactNode | ((props: AvatarProps) => React.ReactNode);
+    /**
+     * This event is triggered if an error occurs while loading an image file.
+     * @param {React.SyntheticEvent}  event - Browser event.
+     */
+    onImageError?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke on click.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarPassThroughOptions}
+     */
+    pt?: AvatarPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Avatar**
+ *
+ * _Avatar represents people using icons, labels and images._
+ *
+ * [Live Demo](https://www.primereact.org/avatar/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Avatar extends React.Component<AvatarProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/avatar/package.json b/components/lib/avatar/package.json
new file mode 100644
index 0000000000..952c0ebdb5
--- /dev/null
+++ b/components/lib/avatar/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./avatar.cjs.js",
+    "module": "./avatar.esm.js",
+    "unpkg": "./avatar.min.js",
+    "types": "./avatar.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
new file mode 100644
index 0000000000..995b30072e
--- /dev/null
+++ b/components/lib/avatargroup/AvatarGroup.js
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { AvatarGroupBase } from './AvatarGroupBase';
+
+export const AvatarGroup = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = AvatarGroupBase.getProps(inProps, context);
+
+    const { ptm, cx, isUnstyled } = AvatarGroupBase.setMetaData({
+        props
+    });
+
+    useHandleStyle(AvatarGroupBase.css.styles, isUnstyled, { name: 'avatargroup' });
+
+    const elementRef = React.useRef(null);
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current
+    }));
+
+    const rootProps = mergeProps(
+        {
+            ref: elementRef,
+            style: props.style,
+            className: classNames(props.className, cx('root'))
+        },
+        AvatarGroupBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    return <div {...rootProps}>{props.children}</div>;
+});
+
+AvatarGroup.displayName = 'AvatarGroup';
diff --git a/components/lib/avatargroup/AvatarGroup.spec.js b/components/lib/avatargroup/AvatarGroup.spec.js
new file mode 100644
index 0000000000..8daaad6565
--- /dev/null
+++ b/components/lib/avatargroup/AvatarGroup.spec.js
@@ -0,0 +1,18 @@
+import '@testing-library/jest-dom';
+import { Avatar } from '../avatar/Avatar';
+import { AvatarGroup } from './AvatarGroup';
+
+import { snapshot } from '../../test';
+
+describe('AvatarGroup', () => {
+    snapshot(<AvatarGroup />, 'default');
+    snapshot(
+        <AvatarGroup>
+            <Avatar label="P" />
+            <Avatar icon="pi pi-search" />
+            <Avatar image="user.png" />
+            <Avatar label="+2" />
+        </AvatarGroup>,
+        'group'
+    );
+});
diff --git a/components/lib/avatargroup/AvatarGroupBase.js b/components/lib/avatargroup/AvatarGroupBase.js
new file mode 100644
index 0000000000..7fe48fb774
--- /dev/null
+++ b/components/lib/avatargroup/AvatarGroupBase.js
@@ -0,0 +1,31 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-avatar-group p-component'
+};
+
+const styles = `
+@layer primereact {
+    .p-avatar-group .p-avatar + .p-avatar {
+        margin-left: -1rem;
+    }
+    
+    .p-avatar-group {
+        display: flex;
+        align-items: center;
+    }
+}
+`;
+
+export const AvatarGroupBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'AvatarGroup',
+        style: null,
+        className: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/avatargroup/__snapshots__/AvatarGroup.spec.js.snap b/components/lib/avatargroup/__snapshots__/AvatarGroup.spec.js.snap
new file mode 100644
index 0000000000..0738fe29eb
--- /dev/null
+++ b/components/lib/avatargroup/__snapshots__/AvatarGroup.spec.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarGroup default 1`] = `
+<div>
+  <div
+    class="p-avatar-group p-component"
+    data-pc-name="avatargroup"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`AvatarGroup group 1`] = `
+<div>
+  <div
+    class="p-avatar-group p-component"
+    data-pc-name="avatargroup"
+    data-pc-section="root"
+  >
+    <div
+      class="p-avatar p-component"
+      data-pc-name="avatar"
+      data-pc-section="root"
+    >
+      <span
+        class="p-avatar-text"
+        data-pc-section="label"
+      >
+        P
+      </span>
+    </div>
+    <div
+      class="p-avatar p-component"
+      data-pc-name="avatar"
+      data-pc-section="root"
+    >
+      <span
+        class="p-avatar-icon pi pi-search"
+        data-pc-section="icon"
+      />
+    </div>
+    <div
+      class="p-avatar p-component p-avatar-image"
+      data-pc-name="avatar"
+      data-pc-section="root"
+    >
+      <img
+        alt="avatar"
+        data-pc-section="image"
+        src="http://github.com/user.png"
+      />
+    </div>
+    <div
+      class="p-avatar p-component"
+      data-pc-name="avatar"
+      data-pc-section="root"
+    >
+      <span
+        class="p-avatar-text"
+        data-pc-section="label"
+      >
+        +2
+      </span>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/lib/avatargroup/avatargroup.d.ts b/components/lib/avatargroup/avatargroup.d.ts
new file mode 100644
index 0000000000..29fbcf0c43
--- /dev/null
+++ b/components/lib/avatargroup/avatargroup.d.ts
@@ -0,0 +1,82 @@
+/**
+ *
+ * A set of Avatars can be displayed together using the AvatarGroup component.
+ *
+ * [Live Demo](https://www.primereact.org/avatar/)
+ *
+ * @module avatargroup
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type AvatarGroupPassThroughType<T> = PassThroughType<T, AvatarGroupPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AvatarGroupPassThroughMethodOptions {}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AvatarGroupProps.pt}
+ */
+export interface AvatarGroupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AvatarGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Avatar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface AvatarGroupProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AvatarGroupPassThroughOptions}
+     */
+    pt?: AvatarGroupPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - AvatarGroup**
+ *
+ * _A set of Avatars can be displayed together using the AvatarGroup component._
+ *
+ * [Live Demo](https://www.primereact.org/avatargroup/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AvatarGroup extends React.Component<AvatarGroupProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/avatargroup/package.json b/components/lib/avatargroup/package.json
new file mode 100644
index 0000000000..a51a16a3a2
--- /dev/null
+++ b/components/lib/avatargroup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./avatargroup.cjs.js",
+    "module": "./avatargroup.esm.js",
+    "unpkg": "./avatargroup.min.js",
+    "types": "./avatargroup.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
new file mode 100644
index 0000000000..736a91f7bd
--- /dev/null
+++ b/components/lib/badge/Badge.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { BadgeBase } from './BadgeBase';
+
+export const Badge = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = BadgeBase.getProps(inProps, context);
+
+        const { ptm, cx, isUnstyled } = BadgeBase.setMetaData({
+            props,
+            ...props.__parentMetadata
+        });
+
+        useHandleStyle(BadgeBase.css.styles, isUnstyled, { name: 'badge' });
+
+        const elementRef = React.useRef(null);
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                style: props.style,
+                className: classNames(props.className, cx('root'))
+            },
+            BadgeBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <span {...rootProps}>{props.value}</span>;
+    })
+);
+
+Badge.displayName = 'Badge';
diff --git a/components/lib/badge/Badge.spec.js b/components/lib/badge/Badge.spec.js
new file mode 100644
index 0000000000..23a88e3610
--- /dev/null
+++ b/components/lib/badge/Badge.spec.js
@@ -0,0 +1,17 @@
+import '@testing-library/jest-dom';
+import { Badge } from './Badge';
+
+import { snapshot } from '../../test';
+
+describe('Badge', () => {
+    snapshot(<Badge />, 'default');
+    snapshot(<Badge value={22} />, 'value');
+    snapshot(<Badge size="large" />, 'size large');
+    snapshot(<Badge size="xlarge" />, 'size xlarge');
+    snapshot(<Badge size="invalid" />, 'size invalid');
+    snapshot(<Badge severity="success" />, 'severity success');
+    snapshot(<Badge severity="info" />, 'severity info');
+    snapshot(<Badge severity="warning" />, 'severity warning');
+    snapshot(<Badge severity="danger" />, 'severity danger');
+    snapshot(<Badge severity="invalid" />, 'severity invalid');
+});
diff --git a/components/lib/badge/BadgeBase.js b/components/lib/badge/BadgeBase.js
new file mode 100644
index 0000000000..0c03acb43f
--- /dev/null
+++ b/components/lib/badge/BadgeBase.js
@@ -0,0 +1,67 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-badge p-component', {
+            'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+            'p-badge-dot': ObjectUtils.isEmpty(props.value),
+            'p-badge-lg': props.size === 'large',
+            'p-badge-xl': props.size === 'xlarge',
+            [`p-badge-${props.severity}`]: props.severity !== null
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-badge {
+        display: inline-block;
+        border-radius: 10px;
+        text-align: center;
+        padding: 0 .5rem;
+    }
+    
+    .p-overlay-badge {
+        position: relative;
+    }
+    
+    .p-overlay-badge .p-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        transform: translate(50%,-50%);
+        transform-origin: 100% 0;
+        margin: 0;
+    }
+    
+    .p-badge-dot {
+        width: .5rem;
+        min-width: .5rem;
+        height: .5rem;
+        border-radius: 50%;
+        padding: 0;
+    }
+    
+    .p-badge-no-gutter {
+        padding: 0;
+        border-radius: 50%;
+    }
+}
+`;
+
+export const BadgeBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Badge',
+        __parentMetadata: null,
+        value: null,
+        severity: null,
+        size: null,
+        style: null,
+        className: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/badge/__snapshots__/Badge.spec.js.snap b/components/lib/badge/__snapshots__/Badge.spec.js.snap
new file mode 100644
index 0000000000..28143fd0d4
--- /dev/null
+++ b/components/lib/badge/__snapshots__/Badge.spec.js.snap
@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge default 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge severity danger 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot p-badge-danger"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge severity info 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot p-badge-info"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge severity invalid 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot p-badge-invalid"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge severity success 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot p-badge-success"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge severity warning 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot p-badge-warning"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge size invalid 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge size large 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot p-badge-lg"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge size xlarge 1`] = `
+<div>
+  <span
+    class="p-badge p-component p-badge-dot p-badge-xl"
+    data-pc-name="badge"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Badge value 1`] = `
+<div>
+  <span
+    class="p-badge p-component"
+    data-pc-name="badge"
+    data-pc-section="root"
+  >
+    22
+  </span>
+</div>
+`;
diff --git a/components/lib/badge/badge.d.ts b/components/lib/badge/badge.d.ts
new file mode 100644
index 0000000000..a693d528ba
--- /dev/null
+++ b/components/lib/badge/badge.d.ts
@@ -0,0 +1,99 @@
+/**
+ *
+ * Badge represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primereact.org/badge)
+ *
+ * @module badge
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type BadgePassThroughType<T> = PassThroughType<T, BadgePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BadgePassThroughMethodOptions {
+    props: BadgeProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BadgeProps.pt}
+ */
+export interface BadgePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BadgePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Badge component. In addition to these, all properties of HTMLSpanElement can be used in this component.
+ * @group Properties
+ */
+export interface BadgeProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref'> {
+    /**
+     * Value to display inside the badge.
+     *
+     */
+    value?: any | null | undefined;
+    /**
+     * Severity type of the badge.
+     * @defaultValue null
+     */
+    severity?: 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null | undefined;
+    /**
+     * Size of the badge, valid options are "large" and "xlarge".
+     * @defaultValue null
+     */
+    size?: 'normal' | 'large' | 'xlarge' | null | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BadgePassThroughOptions}
+     */
+    pt?: BadgePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Badge**
+ *
+ * _Badge represents people using icons, labels and images._
+ *
+ * [Live Demo](https://www.primereact.org/badge/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Badge extends React.Component<BadgeProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement | null} Container element
+     */
+    public getElement(): HTMLSpanElement | null;
+}
diff --git a/components/lib/badge/package.json b/components/lib/badge/package.json
new file mode 100644
index 0000000000..c80acb8c8d
--- /dev/null
+++ b/components/lib/badge/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./badge.cjs.js",
+    "module": "./badge.esm.js",
+    "unpkg": "./badge.min.js",
+    "types": "./badge.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
new file mode 100644
index 0000000000..777d1b489a
--- /dev/null
+++ b/components/lib/blockui/BlockUI.js
@@ -0,0 +1,142 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { BlockUIBase } from './BlockUIBase';
+
+export const BlockUI = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = BlockUIBase.getProps(inProps, context);
+
+    const [visibleState, setVisibleState] = React.useState(props.blocked);
+    const elementRef = React.useRef(null);
+    const maskRef = React.useRef(null);
+    const activeElementRef = React.useRef(null);
+
+    const { ptm, cx, isUnstyled } = BlockUIBase.setMetaData({
+        props
+    });
+
+    useHandleStyle(BlockUIBase.css.styles, isUnstyled, { name: 'blockui' });
+
+    const block = () => {
+        setVisibleState(true);
+        activeElementRef.current = document.activeElement;
+    };
+
+    const unblock = () => {
+        !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+
+        if (DomHandler.hasCSSAnimation(maskRef.current) > 0) {
+            maskRef.current.addEventListener('animationend', () => {
+                removeMask();
+            });
+        } else {
+            removeMask();
+        }
+    };
+
+    const removeMask = () => {
+        ZIndexUtils.clear(maskRef.current);
+        setVisibleState(false);
+
+        if (props.fullScreen) {
+            DomHandler.unblockBodyScroll();
+            activeElementRef.current && activeElementRef.current.focus();
+        }
+
+        props.onUnblocked && props.onUnblocked();
+    };
+
+    const onPortalMounted = () => {
+        if (props.fullScreen) {
+            DomHandler.blockBodyScroll();
+            activeElementRef.current && activeElementRef.current.blur();
+        }
+
+        if (props.autoZIndex) {
+            const key = props.fullScreen ? 'modal' : 'overlay';
+
+            ZIndexUtils.set(key, maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex[key]) || PrimeReact.zIndex[key]);
+        }
+
+        props.onBlocked && props.onBlocked();
+    };
+
+    useMountEffect(() => {
+        visibleState && block();
+    });
+
+    useUpdateEffect(() => {
+        props.blocked ? block() : unblock();
+    }, [props.blocked]);
+
+    useUnmountEffect(() => {
+        props.fullScreen && DomHandler.unblockBodyScroll();
+
+        ZIndexUtils.clear(maskRef.current);
+    });
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        block,
+        unblock,
+        getElement: () => elementRef.current
+    }));
+
+    const createMask = () => {
+        if (visibleState) {
+            const appendTo = props.fullScreen ? document.body : 'self';
+            const maskProps = mergeProps(
+                {
+                    className: classNames(props.className, cx('mask')),
+                    style: {
+                        ...props.style,
+                        position: props.fullScreen ? 'fixed' : 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%'
+                    }
+                },
+                ptm('mask')
+            );
+            const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : null;
+            const mask = (
+                <div ref={maskRef} {...maskProps}>
+                    {content}
+                </div>
+            );
+
+            return <Portal element={mask} appendTo={appendTo} onMounted={onPortalMounted} />;
+        }
+
+        return null;
+    };
+
+    const mask = createMask();
+
+    const rootProps = mergeProps(
+        {
+            id: props.id,
+            ref: elementRef,
+            style: props.containerStyle,
+            className: classNames(props.containerClassName, cx('root')),
+            'aria-busy': props.blocked
+        },
+        BlockUIBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    return (
+        <div {...rootProps}>
+            {props.children}
+            {mask}
+        </div>
+    );
+});
+
+BlockUI.displayName = 'BlockUI';
diff --git a/components/lib/blockui/BlockUI.spec.js b/components/lib/blockui/BlockUI.spec.js
new file mode 100644
index 0000000000..fbcc43a387
--- /dev/null
+++ b/components/lib/blockui/BlockUI.spec.js
@@ -0,0 +1,93 @@
+import '@testing-library/jest-dom';
+import { act, render } from '@testing-library/react';
+import * as React from 'react';
+import { snapshotParent } from '../../test';
+import { PrimeReactProvider } from '../api/Api';
+import { Panel } from '../panel/Panel';
+import { BlockUI } from './BlockUI';
+
+describe('BlockUI', () => {
+    snapshotParent(
+        <PrimeReactProvider>
+            <BlockUI blocked={true} fullScreen />
+        </PrimeReactProvider>,
+        'block fullscreen'
+    );
+    snapshotParent(
+        <PrimeReactProvider>
+            <BlockUI blocked={true}>
+                <Panel>blocked</Panel>
+            </BlockUI>
+        </PrimeReactProvider>,
+        'block panel'
+    );
+    snapshotParent(
+        <PrimeReactProvider>
+            <BlockUI blocked={false}>
+                <Panel>unblocked</Panel>
+            </BlockUI>
+        </PrimeReactProvider>,
+        'unblock panel'
+    );
+    test('block and unblock panel events', async () => {
+        // Arrange
+        const ref = React.createRef();
+        const { container } = render(
+            <PrimeReactProvider>
+                <BlockUI ref={ref} blocked={false}>
+                    <Panel>unblocked</Panel>
+                </BlockUI>
+            </PrimeReactProvider>
+        );
+
+        // Act
+        act(() => {
+            ref.current.block();
+            ref.current.getElement();
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot('blocked-event');
+
+        // Act
+        act(() => {
+            ref.current.unblock();
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot('unblocked-event');
+    });
+    test('block and unblock fullscreen events', async () => {
+        // Arrange
+        const ref = React.createRef();
+        const { container } = render(
+            <PrimeReactProvider>
+                <BlockUI ref={ref} blocked={false} fullScreen />
+            </PrimeReactProvider>
+        );
+
+        // Act
+        act(() => {
+            ref.current.block();
+        });
+
+        // Assert
+        expect(container.parentElement).toMatchSnapshot('blocked-event-fullscreen');
+
+        // Act
+        act(() => {
+            ref.current.unblock();
+        });
+
+        // Assert
+        expect(container.parentElement).toMatchSnapshot('unblocked-event-fullscreen');
+    });
+    snapshotParent(
+        <PrimeReactProvider>
+            <BlockUI blocked={true} className="block-jest" style={{ cursor: 'move' }} containerClassName="container-jest" containerStyle={{ cursor: 'pointer' }}>
+                <Panel>style + class</Panel>
+            </BlockUI>
+        </PrimeReactProvider>,
+        'container style and className'
+    );
+});
diff --git a/components/lib/blockui/BlockUIBase.js b/components/lib/blockui/BlockUIBase.js
new file mode 100644
index 0000000000..0a3e3f7e75
--- /dev/null
+++ b/components/lib/blockui/BlockUIBase.js
@@ -0,0 +1,56 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-blockui-container',
+    mask: ({ props }) =>
+        classNames('p-blockui p-component-overlay p-component-overlay-enter', {
+            'p-blockui-document': props.fullScreen
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-blockui-container {
+        position: relative;
+    }
+    
+    .p-blockui {
+        opacity: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-blockui.p-component-overlay {
+        position: absolute;
+    }
+    
+    .p-blockui-document.p-component-overlay {
+        position: fixed;
+    }
+}
+`;
+
+export const BlockUIBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'BlockUI',
+        autoZIndex: true,
+        baseZIndex: 0,
+        blocked: false,
+        className: null,
+        containerClassName: null,
+        containerStyle: null,
+        fullScreen: false,
+        id: null,
+        onBlocked: null,
+        onUnblocked: null,
+        style: null,
+        template: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
new file mode 100644
index 0000000000..fe2ab850e3
--- /dev/null
+++ b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
@@ -0,0 +1,260 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockUI block and unblock fullscreen events: blocked-event-fullscreen 1`] = `
+<body
+  class="p-overflow-hidden"
+  style="--scrollbar-width: 1024px;"
+>
+  <div>
+    <div
+      aria-busy="false"
+      class="p-blockui-container"
+      data-pc-name="blockui"
+      data-pc-section="root"
+    />
+  </div>
+  <div
+    class="p-blockui p-component-overlay p-component-overlay-enter p-blockui-document"
+    data-pc-section="mask"
+    style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3203;"
+  />
+</body>
+`;
+
+exports[`BlockUI block and unblock fullscreen events: unblocked-event-fullscreen 1`] = `
+<body
+  class=""
+  style=""
+>
+  <div>
+    <div
+      aria-busy="false"
+      class="p-blockui-container"
+      data-pc-name="blockui"
+      data-pc-section="root"
+    />
+  </div>
+</body>
+`;
+
+exports[`BlockUI block and unblock panel events: blocked-event 1`] = `
+<div>
+  <div
+    aria-busy="false"
+    class="p-blockui-container"
+    data-pc-name="blockui"
+    data-pc-section="root"
+  >
+    <div
+      class="p-panel p-component"
+      data-pc-name="panel"
+      data-pc-section="root"
+      id="pr_id_3"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="pr_id_3_header"
+        class="p-toggleable-content"
+        data-pc-section="toggleablecontent"
+        id="pr_id_3_content"
+        role="region"
+      >
+        <div
+          class="p-panel-content"
+          data-pc-section="content"
+        >
+          unblocked
+        </div>
+      </div>
+    </div>
+    <div
+      class="p-blockui p-component-overlay p-component-overlay-enter"
+      data-pc-section="mask"
+      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2103;"
+    />
+  </div>
+</div>
+`;
+
+exports[`BlockUI block and unblock panel events: unblocked-event 1`] = `
+<div>
+  <div
+    aria-busy="false"
+    class="p-blockui-container"
+    data-pc-name="blockui"
+    data-pc-section="root"
+  >
+    <div
+      class="p-panel p-component"
+      data-pc-name="panel"
+      data-pc-section="root"
+      id="pr_id_3"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="pr_id_3_header"
+        class="p-toggleable-content"
+        data-pc-section="toggleablecontent"
+        id="pr_id_3_content"
+        role="region"
+      >
+        <div
+          class="p-panel-content"
+          data-pc-section="content"
+        >
+          unblocked
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`BlockUI block fullscreen 1`] = `
+<body
+  class="p-overflow-hidden"
+  style="--scrollbar-width: 1024px;"
+>
+  <div>
+    <div
+      aria-busy="true"
+      class="p-blockui-container"
+      data-pc-name="blockui"
+      data-pc-section="root"
+    />
+  </div>
+  <div
+    class="p-blockui p-component-overlay p-component-overlay-enter p-blockui-document"
+    data-pc-section="mask"
+    style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1101;"
+  />
+</body>
+`;
+
+exports[`BlockUI block panel 1`] = `
+<body
+  class=""
+  style=""
+>
+  <div>
+    <div
+      aria-busy="true"
+      class="p-blockui-container"
+      data-pc-name="blockui"
+      data-pc-section="root"
+    >
+      <div
+        class="p-panel p-component"
+        data-pc-name="panel"
+        data-pc-section="root"
+        id="pr_id_1"
+      >
+        <div
+          aria-hidden="false"
+          aria-labelledby="pr_id_1_header"
+          class="p-toggleable-content"
+          data-pc-section="toggleablecontent"
+          id="pr_id_1_content"
+          role="region"
+        >
+          <div
+            class="p-panel-content"
+            data-pc-section="content"
+          >
+            blocked
+          </div>
+        </div>
+      </div>
+      <div
+        class="p-blockui p-component-overlay p-component-overlay-enter"
+        data-pc-section="mask"
+        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2102;"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`BlockUI container style and className 1`] = `
+<body
+  class=""
+  style=""
+>
+  <div>
+    <div
+      aria-busy="true"
+      class="container-jest p-blockui-container"
+      data-pc-name="blockui"
+      data-pc-section="root"
+      style="cursor: pointer;"
+    >
+      <div
+        class="p-panel p-component"
+        data-pc-name="panel"
+        data-pc-section="root"
+        id="pr_id_4"
+      >
+        <div
+          aria-hidden="false"
+          aria-labelledby="pr_id_4_header"
+          class="p-toggleable-content"
+          data-pc-section="toggleablecontent"
+          id="pr_id_4_content"
+          role="region"
+        >
+          <div
+            class="p-panel-content"
+            data-pc-section="content"
+          >
+            style + class
+          </div>
+        </div>
+      </div>
+      <div
+        class="block-jest p-blockui p-component-overlay p-component-overlay-enter"
+        data-pc-section="mask"
+        style="cursor: move; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2103;"
+      />
+    </div>
+  </div>
+</body>
+`;
+
+exports[`BlockUI unblock panel 1`] = `
+<body
+  class=""
+  style=""
+>
+  <div>
+    <div
+      aria-busy="false"
+      class="p-blockui-container"
+      data-pc-name="blockui"
+      data-pc-section="root"
+    >
+      <div
+        class="p-panel p-component"
+        data-pc-name="panel"
+        data-pc-section="root"
+        id="pr_id_2"
+      >
+        <div
+          aria-hidden="false"
+          aria-labelledby="pr_id_2_header"
+          class="p-toggleable-content"
+          data-pc-section="toggleablecontent"
+          id="pr_id_2_content"
+          role="region"
+        >
+          <div
+            class="p-panel-content"
+            data-pc-section="content"
+          >
+            unblocked
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/components/lib/blockui/blockui.d.ts b/components/lib/blockui/blockui.d.ts
new file mode 100644
index 0000000000..e0dc00c476
--- /dev/null
+++ b/components/lib/blockui/blockui.d.ts
@@ -0,0 +1,142 @@
+/**
+ *
+ * BlockUI represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primereact.org/blockui)
+ *
+ * @module blockui
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type BlockUIPassThroughType<T> = PassThroughType<T, BlockUIPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BlockUIPassThroughMethodOptions {
+    props: BlockUIProps;
+    state: BlockUIState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BlockUIProps.pt}
+ */
+export interface BlockUIPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BlockUIPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: BlockUIPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in BlockUI component.
+ */
+export interface BlockUIState {
+    /**
+     * Current blocked state as a boolean.
+     * @defaultValue false
+     */
+    blocked: boolean;
+}
+
+/**
+ * Defines valid properties in BlockUI component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface BlockUIProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Controls the blocked state.
+     * @defaultValue false
+     */
+    blocked?: boolean | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Style class of the container element.
+     */
+    containerClassName?: string | undefined;
+    /**
+     * Inline style of the container element.
+     */
+    containerStyle?: React.CSSProperties | undefined;
+    /**
+     * When enabled, the whole document gets blocked.
+     * @defaultValue false
+     */
+    fullScreen?: boolean | undefined;
+    /**
+     * Template of mask.
+     */
+    template?: React.ReactNode | ((props: BlockUIProps) => React.ReactNode) | null | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BlockUIPassThroughOptions}
+     */
+    pt?: BlockUIPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Fired when the element gets blocked.
+     */
+    onBlocked?(): void;
+    /**
+     * Fired when the element gets unblocked.
+     */
+    onUnblocked?(): void;
+}
+
+/**
+ * **PrimeReact - BlockUI**
+ *
+ * _BlockUI represents people using icons, labels and images._
+ *
+ * [Live Demo](https://www.primereact.org/blockui/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class BlockUI extends React.Component<BlockUIProps, any> {
+    public block(): void;
+    public unblock(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/blockui/package.json b/components/lib/blockui/package.json
new file mode 100644
index 0000000000..2ed8720d4b
--- /dev/null
+++ b/components/lib/blockui/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./blockui.cjs.js",
+    "module": "./blockui.esm.js",
+    "unpkg": "./blockui.min.js",
+    "types": "./blockui.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
new file mode 100644
index 0000000000..92aa0afdd8
--- /dev/null
+++ b/components/lib/breadcrumb/BreadCrumb.js
@@ -0,0 +1,275 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { BreadCrumbBase } from './BreadCrumbBase';
+
+export const BreadCrumb = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = BreadCrumbBase.getProps(inProps, context);
+        const [idState, setIdState] = React.useState(props.id);
+        const elementRef = React.useRef(null);
+        const { ptm, cx, isUnstyled } = BreadCrumbBase.setMetaData({
+            props,
+            state: {
+                id: idState
+            }
+        });
+
+        useHandleStyle(BreadCrumbBase.css.styles, isUnstyled, { name: 'breadcrumb' });
+
+        const itemClick = (event, item) => {
+            if (item.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item
+                });
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const isCurrent = (url) => {
+            const lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
+
+            return url === lastPath ? 'page' : undefined;
+        };
+
+        const createHome = () => {
+            const home = props.home;
+
+            if (home) {
+                if (home.visible === false) {
+                    return null;
+                }
+
+                const { icon: _icon, target, url, disabled, style, className: _className, template, label: _label } = home;
+                const iconProps = mergeProps(
+                    {
+                        className: cx('icon')
+                    },
+                    ptm('icon')
+                );
+                const icon = IconUtils.getJSXIcon(_icon, { ...iconProps }, { props });
+                const actionProps = mergeProps(
+                    {
+                        href: url || '#',
+                        className: cx('action'),
+                        'aria-disabled': disabled,
+                        'aria-current': isCurrent(url),
+                        target,
+                        onClick: (event) => itemClick(event, home)
+                    },
+                    ptm('action')
+                );
+
+                const labelProps = mergeProps(
+                    {
+                        className: cx('label')
+                    },
+                    ptm('label')
+                );
+                const label = _label && <span {...labelProps}>{_label}</span>;
+                let content = (
+                    <a {...actionProps}>
+                        {icon}
+                        {label}
+                    </a>
+                );
+
+                if (template) {
+                    const defaultContentOptions = {
+                        onClick: (event) => itemClick(event, home),
+                        className: 'p-menuitem-link',
+                        labelClassName: 'p-menuitem-text',
+                        element: content,
+                        props
+                    };
+
+                    content = ObjectUtils.getJSXElement(template, home, defaultContentOptions);
+                }
+
+                const key = idState + '_home';
+                const menuitemProps = mergeProps(
+                    {
+                        id: key,
+                        className: cx('home', { _className, disabled }),
+                        style
+                    },
+                    ptm('home')
+                );
+
+                return (
+                    <li {...menuitemProps} key={key}>
+                        {content}
+                    </li>
+                );
+            }
+
+            return null;
+        };
+
+        const createSeparator = (index) => {
+            const key = idState + '_sep_' + index;
+            const separatorIconProps = mergeProps(
+                {
+                    className: cx('separatorIcon'),
+                    'aria-hidden': 'true'
+                },
+                ptm('separatorIcon')
+            );
+            const icon = props.separatorIcon || <ChevronRightIcon {...separatorIconProps} />;
+            const separatorIcon = IconUtils.getJSXIcon(icon, { ...separatorIconProps }, { props });
+            const separatorProps = mergeProps(
+                {
+                    id: key,
+                    className: cx('separator'),
+                    role: 'separator'
+                },
+                ptm('separator')
+            );
+
+            return (
+                <li {...separatorProps} key={key}>
+                    {separatorIcon}
+                </li>
+            );
+        };
+
+        const createMenuitem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: cx('action'),
+                    target: item.target,
+                    'aria-current': isCurrent(item.url),
+                    onClick: (event) => itemClick(event, item),
+                    'aria-disabled': item.disabled,
+                    tabIndex: item.disabled ? -1 : undefined
+                },
+                ptm('action')
+            );
+            let content = <a {...actionProps}>{label}</a>;
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    onClick: (event) => itemClick(event, item),
+                    className: 'p-menuitem-link',
+                    labelClassName: 'p-menuitem-text',
+                    element: content,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const key = item.id || idState + '_' + index;
+            const menuitemProps = mergeProps(
+                {
+                    id: key,
+                    className: cx('menuitem', { item }),
+                    style: item.style
+                },
+                ptm('menuitem')
+            );
+
+            return (
+                <li {...menuitemProps} key={key}>
+                    {content}
+                </li>
+            );
+        };
+
+        const createMenuitems = () => {
+            if (props.model) {
+                const items = props.model.map((item, index) => {
+                    if (item.visible === false) {
+                        return null;
+                    }
+
+                    const menuitem = createMenuitem(item, index);
+                    const separator = index === props.model.length - 1 ? null : createSeparator(index);
+                    const key = idState + '_' + index;
+
+                    return (
+                        <React.Fragment key={key}>
+                            {menuitem}
+                            {separator}
+                        </React.Fragment>
+                    );
+                });
+
+                return items;
+            }
+
+            return null;
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const home = createHome();
+        const items = createMenuitems();
+        const separator = createSeparator('home');
+        const menuProps = mergeProps(
+            {
+                className: cx('menu')
+            },
+            ptm('menu')
+        );
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            BreadCrumbBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <nav {...rootProps}>
+                <ol {...menuProps}>
+                    {home}
+                    {home && !!items?.length && separator}
+                    {items}
+                </ol>
+            </nav>
+        );
+    })
+);
+
+BreadCrumb.displayName = 'BreadCrumb';
diff --git a/components/lib/breadcrumb/BreadCrumbBase.js b/components/lib/breadcrumb/BreadCrumbBase.js
new file mode 100644
index 0000000000..33fe86f860
--- /dev/null
+++ b/components/lib/breadcrumb/BreadCrumbBase.js
@@ -0,0 +1,68 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    icon: 'p-menuitem-icon',
+    action: 'p-menuitem-link',
+    label: 'p-menuitem-text',
+    home: ({ _className, disabled }) => classNames('p-breadcrumb-home p-menuitem', { 'p-disabled': disabled }, _className),
+    separatorIcon: 'p-breadcrumb-chevron',
+    separator: 'p-menuitem-separator',
+    menuitem: ({ item }) => classNames('p-menuitem', item.className, { 'p-disabled': item.disabled }),
+    menu: 'p-breadcrumb-list',
+    root: 'p-breadcrumb p-component'
+};
+
+const styles = `
+@layer primereact {
+    .p-breadcrumb {
+        overflow-x: auto;
+        display: flex;
+    }
+
+    .p-breadcrumb ol {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    .p-breadcrumb .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-breadcrumb .p-menuitem-link {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .p-breadcrumb .p-menuitem-separator {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-breadcrumb::-webkit-scrollbar {
+        display: none;
+    }
+}
+`;
+
+export const BreadCrumbBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'BreadCrumb',
+        id: null,
+        model: null,
+        home: null,
+        separatorIcon: null,
+        style: null,
+        className: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/breadcrumb/breadcrumb.d.ts b/components/lib/breadcrumb/breadcrumb.d.ts
new file mode 100644
index 0000000000..6ea11d9114
--- /dev/null
+++ b/components/lib/breadcrumb/breadcrumb.d.ts
@@ -0,0 +1,124 @@
+/**
+ *
+ * Breadcrumb provides contextual information about page hierarchy.
+ *
+ * [Live Demo](https://www.primereact.org/breadcrumb/)
+ *
+ * @module breadcrumb
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type BreadCrumbPassThroughType<T> = PassThroughType<T, BreadCrumbPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BreadCrumbPassThroughMethodOptions {
+    props: BreadCrumbProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BreadCrumbProps.pt}
+ */
+export interface BreadCrumbPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: BreadCrumbPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: BreadCrumbPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the separator icon's DOM element.
+     */
+    separatorIcon?: BreadCrumbPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+/**
+ * Defines valid properties in BreadCrumb component. In addition to these, all properties of HTMLElement can be used in this component.
+ * @group Properties
+ */
+export interface BreadCrumbProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'ref'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * MenuItem configuration for the home icon.
+     */
+    home?: MenuItem | undefined;
+    /**
+     * Icon of the separator.
+     */
+    separatorIcon?: IconType<BreadCrumbProps> | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BreadCrumbPassThroughOptions}
+     */
+    pt?: BreadCrumbPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - BreadCrumb**
+ *
+ * _Breadcrumb provides contextual information about page hierarchy._
+ *
+ * [Live Demo](https://www.primereact.org/breadcrumb/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class BreadCrumb extends React.Component<BreadCrumbProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLElement | null} Container element
+     */
+    public getElement(): HTMLElement | null;
+}
diff --git a/components/lib/breadcrumb/package.json b/components/lib/breadcrumb/package.json
new file mode 100644
index 0000000000..566282745d
--- /dev/null
+++ b/components/lib/breadcrumb/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./breadcrumb.cjs.js",
+    "module": "./breadcrumb.esm.js",
+    "unpkg": "./breadcrumb.min.js",
+    "types": "./breadcrumb.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
new file mode 100644
index 0000000000..01aeae0e08
--- /dev/null
+++ b/components/lib/button/Button.js
@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { Badge } from '../badge/Badge';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { SpinnerIcon } from '../icons/spinner';
+import { Ripple } from '../ripple/Ripple';
+import { Tooltip } from '../tooltip/Tooltip';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { ButtonBase } from './ButtonBase';
+
+export const Button = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ButtonBase.getProps(inProps, context);
+        const disabled = props.disabled || props.loading;
+
+        const metaData = {
+            props,
+            ...props.__parentMetadata,
+            context: {
+                disabled
+            }
+        };
+
+        const { ptm, cx, isUnstyled } = ButtonBase.setMetaData(metaData);
+
+        useHandleStyle(ButtonBase.css.styles, isUnstyled, { name: 'button', styled: true });
+
+        const elementRef = React.useRef(ref);
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        if (props.visible === false) {
+            return null;
+        }
+
+        const createIcon = () => {
+            let className = classNames('p-button-icon p-c', {
+                [`p-button-icon-${props.iconPos}`]: props.label
+            });
+
+            const iconsProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+
+            className = classNames(className, {
+                'p-button-loading-icon': props.loading
+            });
+
+            const loadingIconProps = mergeProps(
+                {
+                    className: cx('loadingIcon', { className })
+                },
+                ptm('loadingIcon')
+            );
+
+            const icon = props.loading ? props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin /> : props.icon;
+
+            return IconUtils.getJSXIcon(icon, { ...iconsProps }, { props });
+        };
+
+        const createLabel = () => {
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+
+            if (props.label) {
+                return <span {...labelProps}>{props.label}</span>;
+            }
+
+            return !props.children && !props.label && <span {...labelProps} dangerouslySetInnerHTML={{ __html: '&nbsp;' }} />;
+        };
+
+        const createBadge = () => {
+            if (props.badge) {
+                const badgeProps = mergeProps(
+                    {
+                        className: classNames(props.badgeClassName),
+                        value: props.badge,
+                        unstyled: props.unstyled,
+                        __parentMetadata: { parent: metaData }
+                    },
+                    ptm('badge')
+                );
+
+                return <Badge {...badgeProps}>{props.badge}</Badge>;
+            }
+
+            return null;
+        };
+
+        const showTooltip = !disabled || (props.tooltipOptions && props.tooltipOptions.showOnDisabled);
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
+        const sizeMapping = {
+            large: 'lg',
+            small: 'sm'
+        };
+        const size = sizeMapping[props.size];
+
+        const icon = createIcon();
+        const label = createLabel();
+        const badge = createBadge();
+        const defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                'aria-label': defaultAriaLabel,
+                'data-pc-autofocus': props.autoFocus,
+                className: classNames(props.className, cx('root', { size, disabled })),
+                disabled: disabled
+            },
+            ButtonBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <button {...rootProps}>
+                    {icon}
+                    {label}
+                    {props.children}
+                    {badge}
+                    <Ripple />
+                </button>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+Button.displayName = 'Button';
diff --git a/components/lib/button/Button.spec.js b/components/lib/button/Button.spec.js
new file mode 100644
index 0000000000..21cae19f0f
--- /dev/null
+++ b/components/lib/button/Button.spec.js
@@ -0,0 +1,165 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { snapshot } from '../../test';
+import { PrimeReactProvider } from '../api/Api';
+import { Button } from './Button';
+
+describe('Button', () => {
+    snapshot(
+        <PrimeReactProvider>
+            <Button label={'test'} visible={false} />
+        </PrimeReactProvider>,
+        'when visible is false Button return null'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button label={'test'} visible={true} />
+        </PrimeReactProvider>,
+        'when visible is true Button render correctly'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button label={'test'} iconPos={'bottom'} visible={true} />
+        </PrimeReactProvider>,
+        'when iconPos is bottom Button is vertical'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button visible={true} />
+        </PrimeReactProvider>,
+        'when label is empty it returns empty button'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button badge={'test'} />
+        </PrimeReactProvider>,
+        'when badge is true it renders Button with badge'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button />
+        </PrimeReactProvider>,
+        'when badge is null it renders Button without badge'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button loading={'test'} />
+        </PrimeReactProvider>,
+        'when click the button if loading is true it renders Button with loading icon'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button />
+        </PrimeReactProvider>,
+        'when click the button if loading is false it renders Button without loading icon'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button />
+        </PrimeReactProvider>,
+        'when label is true it renders Button with default aria label'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button label={'test'} />
+        </PrimeReactProvider>,
+        'when aria-label prop is not exist aria-label prop should be equal to label prop '
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button aria-label={'test'} />
+        </PrimeReactProvider>,
+        'when label prop is not exist label prop should be equal to aria-label prop'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button label={'test'} badge={'lost'} />
+        </PrimeReactProvider>,
+        'when using badge and label the aria-label should contain both values'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Button label={'test'} badge={'lost'} />
+        </PrimeReactProvider>,
+        'when using badge and label the aria-label should contain both values'
+    );
+    test('when using tooltip make sure the tooltip is rendered', async () => {
+        // Arrange
+        const { container } = render(
+            <PrimeReactProvider>
+                <Button label={'test'} tooltip="Jest Tooltip" />
+            </PrimeReactProvider>
+        );
+        const button = container.getElementsByClassName('p-button')[0];
+        const tooltipText = /Jest Tooltip/i;
+
+        // tooltip does not exist to start
+        expect(screen.queryByText(tooltipText)).toBeNull();
+
+        // Act
+        fireEvent.mouseEnter(button);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        expect(screen.getByText(tooltipText)).toBeVisible();
+
+        // tooltip disappears when we mouse out
+        fireEvent.mouseLeave(button);
+        expect(screen.queryByText(tooltipText)).toBeNull();
+    });
+
+    test('when button is clicked ensure onClick is fired', async () => {
+        // Arrange
+        const clickOn = jest.fn();
+        const { container } = render(
+            <PrimeReactProvider>
+                <Button onClick={clickOn} />
+            </PrimeReactProvider>
+        );
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        await userEvent.click(button);
+
+        // Assert
+        expect(button).toBeEnabled();
+        expect(clickOn).toHaveBeenCalledTimes(1);
+    });
+    test('when button is disabled the click event should not fire', async () => {
+        // Arrange
+        const clickOn = jest.fn();
+        const { container } = render(
+            <PrimeReactProvider>
+                <Button onClick={clickOn} disabled />
+            </PrimeReactProvider>
+        );
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        //expect(() => userEvent.click(button)).toThrow();
+
+        // Assert
+        expect(button).toBeDisabled();
+        expect(clickOn).not.toHaveBeenCalled();
+    });
+    test('when Ripple is enabled button should have ripple effect', async () => {
+        // Arrange
+        const clickOn = jest.fn();
+
+        const { container } = render(
+            <PrimeReactProvider ripple={true}>
+                <Button onClick={clickOn} />
+            </PrimeReactProvider>
+        );
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        await userEvent.click(button);
+
+        // Assert
+        expect(button).toBeEnabled();
+        expect(clickOn).toHaveBeenCalledTimes(1);
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/components/lib/button/ButtonBase.js b/components/lib/button/ButtonBase.js
new file mode 100644
index 0000000000..1dcd1be404
--- /dev/null
+++ b/components/lib/button/ButtonBase.js
@@ -0,0 +1,62 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    icon: ({ props }) =>
+        classNames('p-button-icon p-c', {
+            [`p-button-icon-${props.iconPos}`]: props.label
+        }),
+    loadingIcon: ({ props, className }) =>
+        classNames(className, {
+            'p-button-loading-icon': props.loading
+        }),
+    label: 'p-button-label p-c',
+    root: ({ props, size, disabled }) =>
+        classNames('p-button p-component', {
+            'p-button-icon-only': (props.icon || props.loading) && !props.label && !props.children,
+            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
+            'p-disabled': disabled,
+            'p-button-loading': props.loading,
+            'p-button-outlined': props.outlined,
+            'p-button-raised': props.raised,
+            'p-button-link': props.link,
+            'p-button-text': props.text,
+            'p-button-rounded': props.rounded,
+            'p-button-loading-label-only': props.loading && !props.icon && props.label,
+            [`p-button-loading-${props.iconPos}`]: props.loading && props.label,
+            [`p-button-${size}`]: size,
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-plain': props.plain
+        })
+};
+
+export const ButtonBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Button',
+        __parentMetadata: null,
+        badge: null,
+        badgeClassName: null,
+        className: null,
+        children: undefined,
+        disabled: false,
+        icon: null,
+        iconPos: 'left',
+        label: null,
+        link: false,
+        loading: false,
+        loadingIcon: null,
+        outlined: false,
+        plain: false,
+        raised: false,
+        rounded: false,
+        severity: null,
+        size: null,
+        text: false,
+        tooltip: null,
+        tooltipOptions: null,
+        visible: true
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/button/__snapshots__/Button.spec.js.snap b/components/lib/button/__snapshots__/Button.spec.js.snap
new file mode 100644
index 0000000000..603ee73b87
--- /dev/null
+++ b/components/lib/button/__snapshots__/Button.spec.js.snap
@@ -0,0 +1,266 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button when Ripple is enabled button should have ripple effect 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when aria-label prop is not exist aria-label prop should be equal to label prop  1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when badge is null it renders Button without badge 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when badge is true it renders Button with badge 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+    <span
+      class="p-badge p-component"
+      data-pc-name="badge"
+      data-pc-section="root"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when click the button if loading is false it renders Button without loading icon 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when click the button if loading is true it renders Button with loading icon 1`] = `
+<div>
+  <button
+    class="p-button p-component p-button-icon-only p-disabled p-button-loading"
+    data-pc-name="button"
+    data-pc-section="root"
+    disabled=""
+  >
+    <svg
+      class="p-icon p-icon-spin p-button-icon p-c p-button-loading-icon p-button-loading-icon"
+      data-pc-section="loadingicon"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when iconPos is bottom Button is vertical 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component p-button-vertical"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when label is empty it returns empty button 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when label is true it renders Button with default aria label 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when label prop is not exist label prop should be equal to aria-label prop 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when using badge and label the aria-label should contain both values 1`] = `
+<div>
+  <button
+    aria-label="test lost"
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+      test
+    </span>
+    <span
+      class="p-badge p-component"
+      data-pc-name="badge"
+      data-pc-section="root"
+    >
+      lost
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when using badge and label the aria-label should contain both values 2`] = `
+<div>
+  <button
+    aria-label="test lost"
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+      test
+    </span>
+    <span
+      class="p-badge p-component"
+      data-pc-name="badge"
+      data-pc-section="root"
+    >
+      lost
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Button when visible is false Button return null 1`] = `<div />`;
+
+exports[`Button when visible is true Button render correctly 1`] = `
+<div>
+  <button
+    aria-label="test"
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+      test
+    </span>
+  </button>
+</div>
+`;
diff --git a/components/lib/button/button.d.ts b/components/lib/button/button.d.ts
new file mode 100644
index 0000000000..a4cfadc634
--- /dev/null
+++ b/components/lib/button/button.d.ts
@@ -0,0 +1,199 @@
+/**
+ *
+ * Button is an extension to standard button element with icons and theming.
+ *
+ * [Live Demo](https://www.primereact.org/button/)
+ *
+ * @module button
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type ButtonPassThroughType<T> = PassThroughType<T, ButtonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonPassThroughMethodOptions {
+    props: ButtonProps;
+    context: ButtonContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonProps.pt}
+ */
+export interface ButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ButtonPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: ButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the badge's DOM element.
+     */
+    badge?: ButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in Button component.
+ */
+export interface ButtonContext {
+    /**
+     * Current disabled state of the element as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in Button component. In addition to these, all properties of HTMLButtonElement can be used in this component.
+ * @group Properties
+ */
+export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled' | 'ref'> {
+    /**
+     * Value of the badge.
+     */
+    badge?: string | undefined;
+    /**
+     * Style class of the badge.
+     */
+    badgeClassName?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Name of the icon or JSX.Element for icon.
+     */
+    icon?: IconType<ButtonProps> | undefined;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    text?: boolean | undefined;
+    /**
+     * Add a circular border radius to the button.
+     * @defaultValue false
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @defaultValue false
+     */
+    raised?: boolean | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @defaultValue false
+     */
+    outlined?: boolean | undefined;
+    /**
+     * Add a link style to the button.
+     * @defaultValue false
+     */
+    link?: boolean | undefined;
+    /**
+     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger", "help", "contrast".
+     */
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | 'contrast' | undefined;
+    /**
+     * Defines the size of the button, valid values are "small" and "large".
+     */
+    size?: 'small' | 'large' | undefined;
+    /**
+     * Position of the icon, valid values are "left", "right", "top" and "bottom".
+     * @defaultValue left
+     */
+    iconPos?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Text of the button.
+     */
+    label?: string | undefined;
+    /**
+     * Display loading icon of the button
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Name of the loading icon or JSX.Element for loading icon.
+     */
+    loadingIcon?: IconType<ButtonProps> | undefined;
+    /**
+     * Add a plain textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    plain?: boolean | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * When present, it specifies that the element should be visible.
+     * @defaultValue true
+     */
+    visible?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ButtonPassThroughOptions}
+     */
+    pt?: ButtonPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Button**
+ *
+ * _Button is an extension to standard button element with icons and theming._
+ *
+ * [Live Demo](https://www.primereact.org/button/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Button extends React.Component<ButtonProps, any> {}
diff --git a/components/lib/button/package.json b/components/lib/button/package.json
new file mode 100644
index 0000000000..ad49d57c4e
--- /dev/null
+++ b/components/lib/button/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./button.cjs.js",
+    "module": "./button.esm.js",
+    "unpkg": "./button.min.js",
+    "types": "./button.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/buttongroup/ButtonGroup.js b/components/lib/buttongroup/ButtonGroup.js
new file mode 100644
index 0000000000..87dd8da49e
--- /dev/null
+++ b/components/lib/buttongroup/ButtonGroup.js
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils, classNames } from '../utils/Utils';
+import { ButtonGroupBase } from './ButtonGroupBase';
+
+export const ButtonGroup = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ButtonGroupBase.getProps(inProps, context);
+        const elementRef = React.useRef(ref);
+        const { ptm, cx, isUnstyled } = ButtonGroupBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(ButtonGroupBase.css.styles, isUnstyled, { name: 'buttongroup' });
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        const isSingleButton = React.Children.count(props.children) === 1;
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(cx('root'), { 'p-button-group-single': isSingleButton }),
+                role: 'group'
+            },
+            ButtonGroupBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <span {...rootProps}>{props.children}</span>;
+    })
+);
+
+ButtonGroup.displayName = 'ButtonGroup';
diff --git a/components/lib/buttongroup/ButtonGroupBase.js b/components/lib/buttongroup/ButtonGroupBase.js
new file mode 100644
index 0000000000..d74beda063
--- /dev/null
+++ b/components/lib/buttongroup/ButtonGroupBase.js
@@ -0,0 +1,15 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-button-group p-component'
+};
+
+export const ButtonGroupBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ButtonGroup',
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/buttongroup/buttongroup.d.ts b/components/lib/buttongroup/buttongroup.d.ts
new file mode 100644
index 0000000000..86cfcf36e9
--- /dev/null
+++ b/components/lib/buttongroup/buttongroup.d.ts
@@ -0,0 +1,86 @@
+/**
+ *
+ * A set of Buttons can be displayed together using the ButtonGroup component.
+ *
+ * [Live Demo](https://www.primereact.org/button/)
+ *
+ * @module buttongroup
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+
+export declare type ButtonGroupPassThroughOptionType = ButtonGroupPassThroughAttributes | ((options: ButtonGroupPassThroughMethodOptions) => ButtonGroupPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonGroupPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ButtonGroupProps;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonGroupProps.pt}
+ */
+export interface ButtonGroupPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: ButtonGroupPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ButtonGroupPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in ButtonGroup component.
+ */
+export interface ButtonGroupProps {
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {ButtonGroupPassThroughOptions}
+     */
+    pt?: ButtonGroupPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ButtonGroup**
+ *
+ * _ButtonGroup appears on top of the input field when focused._
+ *
+ * [Live Demo](https://www.primereact.org/button/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<React.PropsWithChildren<ButtonGroupProps> & React.RefAttributes<HTMLDivElement>>;
diff --git a/components/lib/buttongroup/package.json b/components/lib/buttongroup/package.json
new file mode 100644
index 0000000000..5d738aa920
--- /dev/null
+++ b/components/lib/buttongroup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./buttongroup.cjs.js",
+    "module": "./buttongroup.esm.js",
+    "unpkg": "./buttongroup.min.js",
+    "types": "./buttongroup.d.ts",
+    "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
new file mode 100644
index 0000000000..4bd32d9a58
--- /dev/null
+++ b/components/lib/calendar/Calendar.js
@@ -0,0 +1,4492 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, localeOption, localeOptions } from '../api/Api';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { CalendarIcon } from '../icons/calendar';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronLeftIcon } from '../icons/chevronleft';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { ChevronUpIcon } from '../icons/chevronup';
+import { InputText } from '../inputtext/InputText';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask } from '../utils/Utils';
+import { CalendarBase } from './CalendarBase';
+import { CalendarPanel } from './CalendarPanel';
+
+export const Calendar = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = CalendarBase.getProps(inProps, context);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const [viewDateState, setViewDateState] = React.useState(null);
+        const [idState, setIdState] = React.useState(props.id);
+        const isCloseOnEscape = overlayVisibleState && props.closeOnEscape;
+        const overlayDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape);
+
+        const metaData = {
+            props,
+            state: {
+                focused: focusedState,
+                overlayVisible: overlayVisibleState,
+                viewDate: viewDateState
+            }
+        };
+        const { ptm, cx, isUnstyled } = CalendarBase.setMetaData(metaData);
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide(null, reFocusInputField);
+            },
+            when: overlayVisibleState && overlayDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder]
+        });
+
+        useHandleStyle(CalendarBase.css.styles, isUnstyled, { name: 'calendar' });
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const navigation = React.useRef(null);
+        const ignoreFocusFunctionality = React.useRef(false);
+        const timePickerTimer = React.useRef(null);
+        const viewStateChanged = React.useRef(false);
+        const touchUIMask = React.useRef(null);
+        const overlayEventListener = React.useRef(null);
+        const touchUIMaskClickListener = React.useRef(null);
+        const isOverlayClicked = React.useRef(false);
+        const previousButton = React.useRef(false);
+        const nextButton = React.useRef(false);
+        const viewChangedWithKeyDown = React.useRef(false);
+        const onChangeRef = React.useRef(null);
+        const isClearClicked = React.useRef(false);
+
+        const [currentView, setCurrentView] = React.useState('date');
+        const [currentMonth, setCurrentMonth] = React.useState(null);
+        const [currentYear, setCurrentYear] = React.useState(null);
+        const [yearOptions, setYearOptions] = React.useState([]);
+
+        const previousValue = usePrevious(props.value);
+        const visible = props.inline || (props.onVisibleChange ? props.visible : overlayVisibleState);
+        const attributeSelector = UniqueComponentId();
+        const panelId = idState + '_panel';
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { type, valid }) => {
+                if (valid) {
+                    if (type === 'outside') {
+                        if (!isOverlayClicked.current && !isNavIconClicked(event.target)) {
+                            hide('outside');
+                        }
+                    } else if ((context && context.hideOverlaysOnDocumentScrolling) || PrimeReact.hideOverlaysOnDocumentScrolling) {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+
+                isOverlayClicked.current = false;
+            },
+            when: !(props.touchUI || props.inline) && visible,
+            type: 'mousedown'
+        });
+
+        const getDateFormat = () => {
+            return props.dateFormat || localeOption('dateFormat', props.locale);
+        };
+
+        const onInputFocus = (event) => {
+            if (ignoreFocusFunctionality.current) {
+                setFocusedState(true);
+                ignoreFocusFunctionality.current = false;
+            } else {
+                if (props.showOnFocus && !visible) {
+                    show();
+                }
+
+                setFocusedState(true);
+                props.onFocus && props.onFocus(event);
+            }
+        };
+
+        const onInputBlur = (event) => {
+            updateInputfield(props.value);
+            props.onBlur && props.onBlur(event);
+            setFocusedState(false);
+        };
+
+        const onInputKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown': {
+                    if (!overlayVisibleState) {
+                        show();
+                    } else {
+                        focusToFirstCell();
+
+                        event.preventDefault();
+                    }
+
+                    break;
+                }
+
+                case 'Escape': {
+                    hide();
+                    props.touchUI && disableModality();
+                    break;
+                }
+
+                case 'Tab': {
+                    if (overlayRef && overlayRef.current) {
+                        DomHandler.getFocusableElements(overlayRef.current).forEach((el) => (el.tabIndex = '-1'));
+                        hide();
+                        props.touchUI && disableModality();
+                    }
+
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        };
+
+        const onUserInput = (event) => {
+            updateValueOnInput(event, event.target.value);
+            props.onInput && props.onInput(event);
+        };
+
+        const updateValueOnInput = (event, rawValue, invalidCallback) => {
+            try {
+                const value = parseValueFromString(props.timeOnly ? rawValue.replace('_', '') : rawValue);
+
+                if (isValidSelection(value)) {
+                    validateDate(value);
+                    updateModel(event, value);
+
+                    const date = value.length ? value[0] : value;
+
+                    updateViewDate(event, date);
+                }
+            } catch (err) {
+                //invalid date
+                if (invalidCallback) {
+                    invalidCallback();
+                } else {
+                    const value = props.keepInvalid ? rawValue : null;
+
+                    updateModel(event, value);
+                }
+            }
+        };
+
+        const onViewDateSelect = ({ event, date }) => {
+            if (date && props.onSelect) {
+                const day = date.getDate();
+                const month = date.getMonth();
+                const year = date.getFullYear();
+
+                onDateSelect(event, { day, month, year, selectable: isSelectable(day, month, year) }, null, true);
+            }
+        };
+
+        const reFocusInputField = () => {
+            if (!props.inline && inputRef.current) {
+                ignoreFocusFunctionality.current = true;
+                DomHandler.focus(inputRef.current);
+            }
+        };
+
+        const isValidSelection = (value) => {
+            let isValid = true;
+
+            if (isSingleSelection()) {
+                if (!(isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false) && (!props.showTime || isSelectableTime(value)))) {
+                    isValid = false;
+                }
+            } else if (value.every((v) => isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && isSelectableTime(v))) {
+                if (isRangeSelection()) {
+                    isValid = value.length > 1 && value[1] >= value[0];
+                }
+            }
+
+            return isValid;
+        };
+
+        const onButtonClick = () => {
+            visible ? hide() : show();
+        };
+
+        const onPrevButtonClick = (event) => {
+            navigation.current = { backward: true, button: true };
+            navBackward(event);
+        };
+
+        const onNextButtonClick = (event) => {
+            navigation.current = { backward: false, button: true };
+            navForward(event);
+        };
+
+        const onContainerButtonKeydown = (event) => {
+            switch (event.code) {
+                case 'Tab':
+                    !props.inline && trapFocus(event);
+                    break;
+
+                case 'Escape':
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
+
+                    break;
+
+                default:
+                    //no op
+                    break;
+            }
+        };
+
+        const onPickerKeyDown = (event, type, direction) => {
+            if (event.key === 'Enter' || event.key === 'Space') {
+                onTimePickerElementMouseDown(event, type, direction);
+                event.preventDefault();
+
+                return;
+            }
+
+            onContainerButtonKeydown(event);
+        };
+
+        const onPickerKeyUp = (event) => {
+            if (event.key === 'Enter' || event.key === 'Space') {
+                onTimePickerElementMouseUp();
+                event.preventDefault();
+
+                return;
+            }
+        };
+
+        const trapFocus = (event) => {
+            event?.preventDefault();
+            const focusableElements = DomHandler.getFocusableElements(overlayRef.current);
+
+            if (focusableElements && focusableElements.length > 0) {
+                if (!document.activeElement) {
+                    focusableElements[0].focus();
+                } else {
+                    const focusedIndex = focusableElements.indexOf(document.activeElement);
+
+                    if (event?.shiftKey) {
+                        if (focusedIndex === -1 || focusedIndex === 0) {
+                            focusableElements[focusableElements.length - 1].focus();
+                        } else {
+                            focusableElements[focusedIndex - 1].focus();
+                        }
+                    } else if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) {
+                        focusableElements[0].focus();
+                    } else {
+                        focusableElements[focusedIndex + 1].focus();
+                    }
+                }
+            }
+        };
+
+        const updateFocus = () => {
+            if (navigation.current) {
+                if (navigation.current.button) {
+                    initFocusableCell();
+
+                    if (navigation.current.backward) {
+                        previousButton.current.focus();
+                    } else {
+                        nextButton.current.focus();
+                    }
+                } else {
+                    let cell;
+
+                    if (navigation.current.backward) {
+                        let cells = DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
+
+                        cell = cells[cells.length - 1];
+                    } else {
+                        cell = DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
+                    }
+
+                    if (cell) {
+                        cell.tabIndex = '0';
+                        cell.focus();
+                    }
+                }
+
+                navigation.current = null;
+            } else {
+                initFocusableCell();
+            }
+        };
+
+        const initFocusableCell = () => {
+            let cell;
+
+            if (currentView === 'month') {
+                const cells = DomHandler.find(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
+                const selectedCell = DomHandler.findSingle(overlayRef.current, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
+
+                cells.forEach((cell) => (cell.tabIndex = -1));
+                cell = selectedCell || cells[0];
+            } else {
+                cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
+
+                if (!cell) {
+                    const todayCell = DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
+
+                    cell = todayCell || DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
+                }
+            }
+
+            if (cell) {
+                cell.tabIndex = '0';
+            }
+        };
+
+        const focusToFirstCell = () => {
+            if (currentView) {
+                let cell;
+
+                if (currentView === 'date') {
+                    cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
+
+                    if (!cell) {
+                        const todayCell = DomHandler.findSingle(overlayRef.current, 'td.p-datepicker-today span:not(.p-disabled)');
+
+                        cell = todayCell || DomHandler.findSingle(overlayRef.current, 'table td span:not([data-p-disabled="true"])');
+                    }
+                } else if (currentView === 'month' || currentView === 'year') {
+                    cell = DomHandler.findSingle(overlayRef.current, 'span[data-p-highlight="true"]');
+
+                    if (!cell) {
+                        cell = DomHandler.findSingle(overlayRef.current, `[data-pc-section="${currentView}picker"] [data-pc-section="${currentView}"]:not([data-p-disabled="true"])`);
+                    }
+                }
+
+                if (cell) {
+                    cell.tabIndex = '0';
+                    cell && cell.focus();
+                }
+            }
+        };
+
+        const navBackward = (event) => {
+            if (props.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            let newViewDate = cloneDate(getViewDate());
+
+            newViewDate.setDate(1);
+
+            if (currentView === 'date') {
+                if (newViewDate.getMonth() === 0) {
+                    const newYear = decrementYear();
+
+                    newViewDate.setMonth(11);
+                    newViewDate.setFullYear(newYear);
+                    props.onMonthChange && props.onMonthChange({ month: 12, year: newYear });
+                    setCurrentMonth(11);
+                } else {
+                    newViewDate.setMonth(newViewDate.getMonth() - 1);
+                    props.onMonthChange && props.onMonthChange({ month: currentMonth, year: currentYear });
+                    setCurrentMonth((prevState) => prevState - 1);
+                }
+            } else if (currentView === 'month') {
+                let newYear = newViewDate.getFullYear() - 1;
+
+                if (props.yearNavigator) {
+                    const minYear = parseInt(props.yearRange.split(':')[0], 10);
+
+                    if (newYear < minYear) {
+                        newYear = minYear;
+                    }
+                }
+
+                newViewDate.setFullYear(newYear);
+            }
+
+            if (currentView === 'month') {
+                newViewDate.setFullYear(decrementYear());
+            } else if (currentView === 'year') {
+                newViewDate.setFullYear(decrementDecade());
+            }
+
+            updateViewDate(event, newViewDate);
+
+            event.preventDefault();
+        };
+
+        const navForward = (event) => {
+            if (props.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            let newViewDate = cloneDate(getViewDate());
+
+            newViewDate.setDate(1);
+
+            if (currentView === 'date') {
+                if (newViewDate.getMonth() === 11) {
+                    const newYear = incrementYear();
+
+                    newViewDate.setMonth(0);
+                    newViewDate.setFullYear(newYear);
+                    props.onMonthChange && props.onMonthChange({ month: 1, year: newYear });
+                    setCurrentMonth(0);
+                } else {
+                    newViewDate.setMonth(newViewDate.getMonth() + 1);
+                    props.onMonthChange && props.onMonthChange({ month: currentMonth + 2, year: currentYear });
+                    setCurrentMonth((prevState) => prevState + 1);
+                }
+            } else if (currentView === 'month') {
+                let newYear = newViewDate.getFullYear() + 1;
+
+                if (props.yearNavigator) {
+                    const maxYear = parseInt(props.yearRange.split(':')[1], 10);
+
+                    if (newYear > maxYear) {
+                        newYear = maxYear;
+                    }
+                }
+
+                newViewDate.setFullYear(newYear);
+            }
+
+            if (currentView === 'month') {
+                newViewDate.setFullYear(incrementYear());
+            } else if (currentView === 'year') {
+                newViewDate.setFullYear(incrementDecade());
+            }
+
+            updateViewDate(event, newViewDate);
+
+            event.preventDefault();
+        };
+
+        const populateYearOptions = (start, end) => {
+            let _yearOptions = [];
+
+            for (let i = start; i <= end; i++) {
+                yearOptions.push(i);
+            }
+
+            setYearOptions(_yearOptions);
+        };
+
+        const decrementYear = () => {
+            const year = getViewYear();
+            const _currentYear = year - 1;
+
+            setCurrentYear(_currentYear);
+
+            if (props.yearNavigator && _currentYear < yearOptions[0]) {
+                let difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
+
+                populateYearOptions(yearOptions[0] - difference, yearOptions[yearOptions.length - 1] - difference);
+            }
+
+            return _currentYear;
+        };
+
+        const incrementYear = () => {
+            const year = getViewYear();
+            const _currentYear = year + 1;
+
+            setCurrentYear(_currentYear);
+
+            if (props.yearNavigator && _currentYear.current > yearOptions[yearOptions.length - 1]) {
+                let difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
+
+                populateYearOptions(yearOptions[0] + difference, yearOptions[yearOptions.length - 1] + difference);
+            }
+
+            return _currentYear;
+        };
+
+        const onMonthDropdownChange = (event, value) => {
+            const currentViewDate = getViewDate();
+            let newViewDate = cloneDate(currentViewDate);
+
+            newViewDate.setDate(1);
+            newViewDate.setMonth(parseInt(value, 10));
+
+            updateViewDate(event, newViewDate);
+        };
+
+        const onYearDropdownChange = (event, value) => {
+            const currentViewDate = getViewDate();
+            let newViewDate = cloneDate(currentViewDate);
+
+            newViewDate.setFullYear(parseInt(value, 10));
+
+            updateViewDate(event, newViewDate);
+        };
+
+        const onTodayButtonClick = (event) => {
+            const today = new Date();
+            const dateMeta = {
+                day: today.getDate(),
+                month: today.getMonth(),
+                year: today.getFullYear(),
+                today: true,
+                selectable: true
+            };
+            const timeMeta = {
+                hours: today.getHours(),
+                minutes: today.getMinutes(),
+                seconds: props.showSeconds ? today.getSeconds() : 0,
+                milliseconds: props.showMillisec ? today.getMilliseconds() : 0
+            };
+
+            updateViewDate(event, today);
+            onDateSelect(event, dateMeta, timeMeta);
+
+            props.onTodayButtonClick && props.onTodayButtonClick(event);
+        };
+
+        const onClearButtonClick = (event) => {
+            isClearClicked.current = true;
+
+            updateModel(event, null);
+            updateInputfield(null);
+            setCurrentYear(new Date().getFullYear()); // #7581
+            hide();
+
+            props.onClearButtonClick && props.onClearButtonClick(event);
+        };
+
+        const onPanelClick = (event) => {
+            if (!props.inline) {
+                OverlayService.emit('overlay-click', {
+                    originalEvent: event,
+                    target: elementRef.current
+                });
+            }
+        };
+
+        const onPanelMouseUp = (event) => {
+            onPanelClick(event);
+        };
+
+        const onTimePickerElementMouseDown = (event, type, direction) => {
+            if (!props.disabled) {
+                repeat(event, null, type, direction);
+                event.preventDefault();
+            }
+        };
+
+        const onTimePickerElementMouseUp = () => {
+            if (!props.disabled) {
+                clearTimePickerTimer();
+            }
+        };
+
+        const onTimePickerElementMouseLeave = () => {
+            if (!props.disabled) {
+                clearTimePickerTimer();
+            }
+        };
+
+        const repeat = (event, interval, type, direction) => {
+            clearTimePickerTimer();
+            timePickerTimer.current = setTimeout(() => {
+                repeat(event, 100, type, direction);
+            }, interval || 500);
+
+            switch (type) {
+                case 0:
+                    if (direction === 1) {
+                        incrementHour(event);
+                    } else {
+                        decrementHour(event);
+                    }
+
+                    break;
+
+                case 1:
+                    if (direction === 1) {
+                        incrementMinute(event);
+                    } else {
+                        decrementMinute(event);
+                    }
+
+                    break;
+
+                case 2:
+                    if (direction === 1) {
+                        incrementSecond(event);
+                    } else {
+                        decrementSecond(event);
+                    }
+
+                    break;
+
+                case 3:
+                    if (direction === 1) {
+                        incrementMilliSecond(event);
+                    } else {
+                        decrementMilliSecond(event);
+                    }
+
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const clearTimePickerTimer = () => {
+            if (timePickerTimer.current) {
+                clearTimeout(timePickerTimer.current);
+            }
+        };
+
+        const roundMinutesToStep = (minutes) => {
+            if (props.stepMinute) {
+                return Math.round(minutes / props.stepMinute) * props.stepMinute;
+            }
+
+            return minutes;
+        };
+
+        const incrementHour = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentHour = currentTime.getHours();
+            let newHour = currentHour + props.stepHour;
+
+            newHour = newHour >= 24 ? newHour - 24 : newHour;
+
+            if (validateHour(newHour, currentTime)) {
+                if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getHours() === newHour) {
+                    if (props.maxDate.getMinutes() < currentTime.getMinutes()) {
+                        if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
+                            if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
+                                updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
+                            } else {
+                                updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
+                            }
+                        } else {
+                            updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                        }
+                    } else if (props.maxDate.getMinutes() === currentTime.getMinutes()) {
+                        if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
+                            if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
+                                updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
+                            } else {
+                                updateTime(event, newHour, props.maxDate.getMinutes(), props.maxDate.getSeconds(), currentTime.getMilliseconds());
+                            }
+                        } else {
+                            updateTime(event, newHour, props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                        }
+                    } else {
+                        updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
+                    }
+                } else {
+                    updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const decrementHour = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentHour = currentTime.getHours();
+            let newHour = currentHour - props.stepHour;
+
+            newHour = newHour < 0 ? newHour + 24 : newHour;
+
+            if (validateHour(newHour, currentTime)) {
+                if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getHours() === newHour) {
+                    if (props.minDate.getMinutes() > currentTime.getMinutes()) {
+                        if (props.minDate.getSeconds() > currentTime.getSeconds()) {
+                            if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
+                                updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
+                            } else {
+                                updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
+                            }
+                        } else {
+                            updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                        }
+                    } else if (props.minDate.getMinutes() === currentTime.getMinutes()) {
+                        if (props.minDate.getSeconds() > currentTime.getSeconds()) {
+                            if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
+                                updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), props.minDate.getMilliseconds());
+                            } else {
+                                updateTime(event, newHour, props.minDate.getMinutes(), props.minDate.getSeconds(), currentTime.getMilliseconds());
+                            }
+                        } else {
+                            updateTime(event, newHour, props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+                        }
+                    } else {
+                        updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
+                    }
+                } else {
+                    updateTime(event, newHour, roundMinutesToStep(currentTime.getMinutes()), currentTime.getSeconds(), currentTime.getMilliseconds());
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const doStepMinute = (currentMinute, step) => {
+            if (props.stepMinute <= 1) {
+                return step ? currentMinute + step : currentMinute;
+            }
+
+            if (!step) {
+                step = props.stepMinute;
+
+                if (currentMinute % step === 0) {
+                    return currentMinute;
+                }
+            }
+
+            return Math.floor((currentMinute + step) / step) * step;
+        };
+
+        const incrementMinute = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentMinute = currentTime.getMinutes();
+            let newMinute = doStepMinute(currentMinute, props.stepMinute);
+
+            newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
+
+            if (validateMinute(newMinute, currentTime)) {
+                if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getMinutes() === newMinute) {
+                    if (props.maxDate.getSeconds() < currentTime.getSeconds()) {
+                        if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
+                            updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), props.maxDate.getMilliseconds());
+                        } else {
+                            updateTime(event, currentTime.getHours(), newMinute, props.maxDate.getSeconds(), currentTime.getMilliseconds());
+                        }
+                    } else {
+                        updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
+                    }
+                } else {
+                    updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const decrementMinute = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentMinute = currentTime.getMinutes();
+            let newMinute = doStepMinute(currentMinute, -props.stepMinute);
+
+            newMinute = newMinute < 0 ? newMinute + 60 : newMinute;
+
+            if (validateMinute(newMinute, currentTime)) {
+                if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getMinutes() === newMinute) {
+                    if (props.minDate.getSeconds() > currentTime.getSeconds()) {
+                        if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
+                            updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), props.minDate.getMilliseconds());
+                        } else {
+                            updateTime(event, currentTime.getHours(), newMinute, props.minDate.getSeconds(), currentTime.getMilliseconds());
+                        }
+                    } else {
+                        updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
+                    }
+                } else {
+                    updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const incrementSecond = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentSecond = currentTime.getSeconds();
+            let newSecond = currentSecond + props.stepSecond;
+
+            newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
+
+            if (validateSecond(newSecond, currentTime)) {
+                if (props.maxDate && props.maxDate.toDateString() === currentTime.toDateString() && props.maxDate.getSeconds() === newSecond) {
+                    if (props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
+                        updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.maxDate.getMilliseconds());
+                    } else {
+                        updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
+                    }
+                } else {
+                    updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const decrementSecond = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentSecond = currentTime.getSeconds();
+            let newSecond = currentSecond - props.stepSecond;
+
+            newSecond = newSecond < 0 ? newSecond + 60 : newSecond;
+
+            if (validateSecond(newSecond, currentTime)) {
+                if (props.minDate && props.minDate.toDateString() === currentTime.toDateString() && props.minDate.getSeconds() === newSecond) {
+                    if (props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
+                        updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, props.minDate.getMilliseconds());
+                    } else {
+                        updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
+                    }
+                } else {
+                    updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const incrementMilliSecond = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentMillisecond = currentTime.getMilliseconds();
+            let newMillisecond = currentMillisecond + props.stepMillisec;
+
+            newMillisecond = newMillisecond > 999 ? newMillisecond - 1000 : newMillisecond;
+
+            if (validateMillisecond(newMillisecond, currentTime)) {
+                updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
+            }
+
+            event.preventDefault();
+        };
+
+        const decrementMilliSecond = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentMillisecond = currentTime.getMilliseconds();
+            let newMillisecond = currentMillisecond - props.stepMillisec;
+
+            newMillisecond = newMillisecond < 0 ? newMillisecond + 999 : newMillisecond;
+
+            if (validateMillisecond(newMillisecond, currentTime)) {
+                updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
+            }
+
+            event.preventDefault();
+        };
+
+        const toggleAmPm = (event) => {
+            const currentTime = getCurrentDateTime();
+            const currentHour = currentTime.getHours();
+            const newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
+
+            if (validateHour(convertTo24Hour(newHour, currentHour > 11), currentTime)) {
+                updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+            }
+
+            event.preventDefault();
+        };
+
+        const getViewDate = (date) => {
+            let propValue = props.value;
+            let viewDate = date || (props.onViewDateChange ? props.viewDate : viewDateState);
+
+            if (Array.isArray(propValue)) {
+                propValue = propValue[0];
+            }
+
+            return viewDate && isValidDate(viewDate) ? viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
+        };
+
+        const getCurrentDateTime = () => {
+            if (isSingleSelection()) {
+                return props.value && props.value instanceof Date ? cloneDate(props.value) : getViewDate();
+            } else if (isMultipleSelection()) {
+                if (props.value && props.value.length) {
+                    return cloneDate(props.value[props.value.length - 1]);
+                }
+            } else if (isRangeSelection()) {
+                if (props.value && props.value.length) {
+                    let startDate = cloneDate(props.value[0]);
+                    let endDate = cloneDate(props.value[1]);
+
+                    return endDate || startDate;
+                }
+            }
+
+            return new Date();
+        };
+
+        const cloneDate = (date) => {
+            return isValidDate(date) ? new Date(date.valueOf()) : date;
+        };
+
+        const isValidDate = (date) => {
+            return date instanceof Date && !isNaN(date);
+        };
+
+        const convertTo24Hour = (hour, pm) => {
+            if (props.hourFormat === '12') {
+                return hour === 12 ? (pm ? 12 : 0) : pm ? hour + 12 : hour;
+            }
+
+            return hour;
+        };
+
+        const validateHour = (hour, value) => {
+            let valid = true;
+            let valueDateString = value ? value.toDateString() : null;
+
+            if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
+                if (props.minDate.getHours() > hour) {
+                    valid = false;
+                }
+            }
+
+            if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
+                if (props.maxDate.getHours() < hour) {
+                    valid = false;
+                }
+            }
+
+            return valid;
+        };
+
+        const validateMinute = (minute, value) => {
+            let valid = true;
+            let valueDateString = value ? value.toDateString() : null;
+
+            if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
+                if (value.getHours() === props.minDate.getHours()) {
+                    if (props.minDate.getMinutes() > minute) {
+                        valid = false;
+                    }
+                }
+            }
+
+            if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
+                if (value.getHours() === props.maxDate.getHours()) {
+                    if (props.maxDate.getMinutes() < minute) {
+                        valid = false;
+                    }
+                }
+            }
+
+            return valid;
+        };
+
+        const validateSecond = (second, value) => {
+            let valid = true;
+            let valueDateString = value ? value.toDateString() : null;
+
+            if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
+                if (value.getHours() === props.minDate.getHours() && value.getMinutes() === props.minDate.getMinutes()) {
+                    if (props.minDate.getSeconds() > second) {
+                        valid = false;
+                    }
+                }
+            }
+
+            if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
+                if (value.getHours() === props.maxDate.getHours() && value.getMinutes() === props.maxDate.getMinutes()) {
+                    if (props.maxDate.getSeconds() < second) {
+                        valid = false;
+                    }
+                }
+            }
+
+            return valid;
+        };
+
+        const validateMillisecond = (millisecond, value) => {
+            let valid = true;
+            let valueDateString = value ? value.toDateString() : null;
+
+            if (props.minDate && valueDateString && props.minDate.toDateString() === valueDateString) {
+                if (value.getHours() === props.minDate.getHours() && value.getSeconds() === props.minDate.getSeconds() && value.getMinutes() === props.minDate.getMinutes()) {
+                    if (props.minDate.getMilliseconds() > millisecond) {
+                        valid = false;
+                    }
+                }
+            }
+
+            if (props.maxDate && valueDateString && props.maxDate.toDateString() === valueDateString) {
+                if (value.getHours() === props.maxDate.getHours() && value.getSeconds() === props.maxDate.getSeconds() && value.getMinutes() === props.maxDate.getMinutes()) {
+                    if (props.maxDate.getMilliseconds() < millisecond) {
+                        valid = false;
+                    }
+                }
+            }
+
+            return valid;
+        };
+
+        const validateDate = (value) => {
+            if (props.yearNavigator) {
+                const [minRangeYear, maxRangeYear] = props.yearRange ? props.yearRange.split(':').map((year) => parseInt(year, 10)) : [null, null];
+
+                let viewYear = value.getFullYear();
+                let minYear = null;
+                let maxYear = null;
+
+                if (minRangeYear !== null) {
+                    minYear = props.minDate ? Math.max(props.minDate.getFullYear(), minRangeYear) : minRangeYear;
+                } else {
+                    minYear = props.minDate?.getFullYear() || minRangeYear;
+                }
+
+                if (maxRangeYear !== null) {
+                    maxYear = props.maxDate ? Math.min(props.maxDate.getFullYear(), maxRangeYear) : maxRangeYear;
+                } else {
+                    maxYear = props.maxDate?.getFullYear() || maxRangeYear;
+                }
+
+                if (minYear && minYear > viewYear) viewYear = minYear;
+
+                if (maxYear && maxYear < viewYear) viewYear = maxYear;
+
+                value.setFullYear(viewYear);
+            }
+
+            if (renderMonthsNavigator(0)) {
+                let viewMonth = value.getMonth();
+                let viewMonthWithMinMax = parseInt((isInMinYear(value) && Math.max(props.minDate.getMonth(), viewMonth).toString()) || (isInMaxYear(value) && Math.min(props.maxDate.getMonth(), viewMonth).toString()) || viewMonth);
+
+                value.setMonth(viewMonthWithMinMax);
+            }
+        };
+
+        const updateTime = (event, hour, minute, second, millisecond) => {
+            let newDateTime = getCurrentDateTime();
+
+            newDateTime.setHours(hour);
+            newDateTime.setMinutes(minute);
+            newDateTime.setSeconds(second);
+            newDateTime.setMilliseconds(millisecond);
+
+            if (isMultipleSelection()) {
+                if (props.value && props.value.length) {
+                    let value = [...props.value];
+
+                    value[value.length - 1] = newDateTime;
+
+                    newDateTime = value;
+                } else {
+                    newDateTime = [newDateTime];
+                }
+            } else if (isRangeSelection()) {
+                if (props.value && props.value.length) {
+                    let startDate = props.value[0];
+                    let endDate = props.value[1];
+
+                    newDateTime = endDate ? [startDate, newDateTime] : [newDateTime, null];
+                } else {
+                    newDateTime = [newDateTime, null];
+                }
+            }
+
+            updateModel(event, newDateTime);
+
+            if (props.onSelect) {
+                props.onSelect({
+                    originalEvent: event,
+                    value: newDateTime
+                });
+            }
+
+            updateInputfield(newDateTime);
+        };
+
+        const updateViewDate = (event, value) => {
+            validateDate(value);
+
+            if (props.onViewDateChange && event) {
+                props.onViewDateChange({
+                    originalEvent: event,
+                    value
+                });
+            } else {
+                viewStateChanged.current = true;
+                setViewDateState(value);
+            }
+
+            if (!value) onClearButtonClick(event);
+        };
+
+        const setNavigationState = (newViewDate) => {
+            if (!newViewDate || !props.showMinMaxRange || props.view !== 'date' || !overlayRef.current) {
+                return;
+            }
+
+            const navPrev = DomHandler.findSingle(overlayRef.current, '[data-pc-section="previousbutton"]');
+            const navNext = DomHandler.findSingle(overlayRef.current, '[data-pc-section="nextbutton"]');
+
+            if (props.disabled) {
+                !isUnstyled() && DomHandler.addClass(navPrev, 'p-disabled');
+                navPrev.setAttribute('data-p-disabled', true);
+                !isUnstyled() && DomHandler.addClass(navNext, 'p-disabled');
+                navNext.setAttribute('data-p-disabled', true);
+
+                return;
+            }
+
+            // previous (check first day of month at 00:00:00)
+            if (props.minDate) {
+                let firstDayOfMonth = cloneDate(newViewDate);
+
+                if (firstDayOfMonth.getMonth() === 0) {
+                    firstDayOfMonth.setMonth(11, 1);
+                    firstDayOfMonth.setFullYear(firstDayOfMonth.getFullYear() - 1);
+                } else {
+                    firstDayOfMonth.setMonth(firstDayOfMonth.getMonth(), 1);
+                }
+
+                firstDayOfMonth.setHours(0);
+                firstDayOfMonth.setMinutes(0);
+                firstDayOfMonth.setSeconds(0);
+
+                if (props.minDate > firstDayOfMonth) {
+                    DomHandler.addClass(navPrev, 'p-disabled');
+                } else {
+                    DomHandler.removeClass(navPrev, 'p-disabled');
+                }
+            }
+
+            // next (check last day of month at 11:59:59)
+            if (props.maxDate) {
+                let lastDayOfMonth = cloneDate(newViewDate);
+
+                if (lastDayOfMonth.getMonth() === 11) {
+                    lastDayOfMonth.setMonth(0, 1);
+                    lastDayOfMonth.setFullYear(lastDayOfMonth.getFullYear() + 1);
+                } else {
+                    lastDayOfMonth.setMonth(lastDayOfMonth.getMonth() + 1, 1);
+                }
+
+                lastDayOfMonth.setHours(0);
+                lastDayOfMonth.setMinutes(0);
+                lastDayOfMonth.setSeconds(0);
+                lastDayOfMonth.setSeconds(-1);
+
+                if (props.maxDate < lastDayOfMonth) {
+                    DomHandler.addClass(navNext, 'p-disabled');
+                } else {
+                    DomHandler.removeClass(navNext, 'p-disabled');
+                }
+            }
+        };
+
+        const onDateCellKeydown = (event, date, groupIndex) => {
+            const cellContent = event.currentTarget;
+            const cell = cellContent.parentElement;
+            const cellIndex = DomHandler.index(cell);
+
+            switch (event.code) {
+                case 'ArrowDown': {
+                    cellContent.tabIndex = '-1';
+
+                    let nextRow = cell.parentElement.nextElementSibling;
+
+                    if (nextRow) {
+                        let tableRowIndex = DomHandler.index(cell.parentElement);
+                        const tableRows = Array.from(cell.parentElement.parentElement.children);
+                        const nextTableRows = tableRows.slice(tableRowIndex + 1);
+
+                        let hasNextFocusableDate = nextTableRows.find((el) => {
+                            let focusCell = el.children[cellIndex].children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            navigation.current = { backward: false };
+                            navForward(event);
+                        }
+                    } else {
+                        navigation.current = { backward: false };
+                        navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    cellContent.tabIndex = '-1';
+
+                    if (event.altKey) {
+                        hide(null, reFocusInputField);
+                    } else {
+                        let prevRow = cell.parentElement.previousElementSibling;
+
+                        if (prevRow) {
+                            let tableRowIndex = DomHandler.index(cell.parentElement);
+                            const tableRows = Array.from(cell.parentElement.parentElement.children);
+                            const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
+
+                            let hasNextFocusableDate = prevTableRows.find((el) => {
+                                let focusCell = el.children[cellIndex].children[0];
+
+                                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                            });
+
+                            if (hasNextFocusableDate) {
+                                let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                                focusCell.tabIndex = '0';
+                                focusCell.focus();
+                            } else {
+                                navigation.current = { backward: true };
+                                navBackward(event);
+                            }
+                        } else {
+                            navigation.current = { backward: true };
+                            navBackward(event);
+                        }
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cellContent.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const prevCells = cells.slice(0, cellIndex).reverse();
+
+                        let hasNextFocusableDate = prevCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            navigateToMonth(true, groupIndex, event);
+                        }
+                    } else {
+                        navigateToMonth(true, groupIndex, event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cellContent.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const nextCells = cells.slice(cellIndex + 1);
+                        let hasNextFocusableDate = nextCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            navigateToMonth(false, groupIndex, event);
+                        }
+                    } else {
+                        navigateToMonth(false, groupIndex, event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    onDateSelect(event, date);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    if (!props.inline) {
+                        trapFocus(event);
+                    }
+
+                    break;
+                }
+
+                case 'Home': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[0].children[0];
+
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        navigateToMonth(groupIndex, true, event);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
+
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        navigateToMonth(groupIndex, false, event);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    cellContent.tabIndex = '-1';
+
+                    if (event.shiftKey) {
+                        navigation.current = { backward: true };
+                        navBackward(event);
+                    } else {
+                        navigateToMonth(groupIndex, true, event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageDown': {
+                    cellContent.tabIndex = '-1';
+
+                    if (event.shiftKey) {
+                        navigation.current = { backward: false };
+                        navForward(event);
+                    } else {
+                        navigateToMonth(groupIndex, false, event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        };
+
+        const navigateToMonth = (prev, groupIndex, event) => {
+            if (prev) {
+                if (props.numberOfMonths === 1 || groupIndex === 0) {
+                    navigation.current = { backward: true };
+                    navBackward(event);
+                } else {
+                    const prevMonthContainer = overlayRef.current.children[0].children[groupIndex - 1];
+                    const cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"])');
+                    const focusCell = cells[cells.length - 1];
+
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
+            } else if (props.numberOfMonths === 1 || groupIndex === props.numberOfMonths - 1) {
+                navigation.current = { backward: false };
+                navForward(event);
+            } else {
+                const nextMonthContainer = overlayRef.current.children[0].children[groupIndex + 1];
+                const focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
+
+                focusCell.tabIndex = '0';
+                focusCell.focus();
+            }
+        };
+
+        const onMonthCellKeydown = (event, index) => {
+            const cell = event.currentTarget;
+
+            switch (event.code) {
+                //arrows
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    const cells = cell.parentElement.children;
+                    const cellIndex = DomHandler.index(cell);
+                    const nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    const prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        navigation.current = { backward: true };
+                        navBackward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    const nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        navigation.current = { backward: false };
+                        navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    if (event.shiftKey) {
+                        return;
+                    }
+
+                    navigation.current = { backward: true };
+                    navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) {
+                        return;
+                    }
+
+                    navigation.current = { backward: false };
+                    navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    if (props.view !== 'month') {
+                        viewChangedWithKeyDown.current = true;
+                    }
+
+                    onMonthSelect(event, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    trapFocus(event);
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        };
+
+        const onYearCellKeydown = (event, index) => {
+            const cell = event.currentTarget;
+
+            switch (event.code) {
+                //arrows
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    let cells = cell.parentElement.children;
+                    let cellIndex = DomHandler.index(cell);
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        navigation.current = { backward: true };
+                        navBackward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        navigation.current = { backward: false };
+                        navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    if (event.shiftKey) {
+                        return;
+                    }
+
+                    navigation.current = { backward: true };
+                    navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) {
+                        return;
+                    }
+
+                    navigation.current = { backward: false };
+                    navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    if (props.view !== 'year') {
+                        viewChangedWithKeyDown.current = true;
+                    }
+
+                    onYearSelect(event, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    hide(null, reFocusInputField);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    trapFocus(event);
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        };
+
+        const onDateSelect = (event, dateMeta, timeMeta, isUpdateViewDate) => {
+            if (!event) {
+                return;
+            }
+
+            if (props.disabled || !dateMeta.selectable) {
+                event.preventDefault();
+
+                return;
+            }
+
+            DomHandler.find(overlayRef.current, 'table td span:not([data-p-disabled="true"])').forEach((cell) => (cell.tabIndex = -1));
+            event.currentTarget.focus();
+
+            if (isMultipleSelection()) {
+                if (isSelected(dateMeta)) {
+                    let value = props.value.filter((date) => {
+                        return !isDateEquals(date, dateMeta);
+                    });
+
+                    updateModel(event, value);
+                    updateInputfield(value);
+                } else if (!props.maxDateCount || !props.value || props.maxDateCount > props.value.length) {
+                    selectDate(event, dateMeta, timeMeta);
+                }
+            } else {
+                selectDate(event, dateMeta, timeMeta);
+            }
+
+            if (!props.inline && isSingleSelection() && (!props.showTime || props.hideOnDateTimeSelect) && !isUpdateViewDate) {
+                setTimeout(() => {
+                    hide('dateselect');
+
+                    if (props.selectionMode !== 'single') {
+                        reFocusInputField();
+                    }
+                }, 100);
+
+                if (touchUIMask.current) {
+                    disableModality();
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const selectTime = (date, timeMeta) => {
+            if (props.showTime) {
+                let hours;
+                let minutes;
+                let seconds;
+                let milliseconds;
+
+                if (timeMeta) {
+                    ({ hours, minutes, seconds, milliseconds } = timeMeta);
+                } else {
+                    let time = getCurrentDateTime();
+
+                    [hours, minutes, seconds, milliseconds] = [time.getHours(), time.getMinutes(), props.showSeconds ? time.getSeconds() : 0, props.showMillisec ? time.getMilliseconds() : 0];
+                }
+
+                date.setHours(hours);
+                date.setMinutes(doStepMinute(minutes));
+                date.setSeconds(seconds);
+                date.setMilliseconds(milliseconds);
+            }
+        };
+
+        const selectDate = (event, dateMeta, timeMeta) => {
+            let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
+            selectTime(date, timeMeta);
+
+            if (props.minDate && props.minDate > date) {
+                date = props.minDate;
+            }
+
+            if (props.maxDate && props.maxDate < date) {
+                date = props.maxDate;
+            }
+
+            let selectedValues = date;
+
+            if (isSingleSelection()) {
+                updateModel(event, date);
+            } else if (isMultipleSelection()) {
+                selectedValues = props.value ? [...props.value, date] : [date];
+                updateModel(event, selectedValues);
+            } else if (isRangeSelection()) {
+                if (props.value && props.value.length) {
+                    let startDate = props.value[0];
+                    let endDate = props.value[1];
+
+                    if (!endDate) {
+                        if (date.getTime() >= startDate.getTime()) {
+                            endDate = date;
+                        } else {
+                            endDate = startDate;
+                            startDate = date;
+                        }
+                    } else {
+                        startDate = date;
+                        endDate = null;
+                    }
+
+                    selectedValues = [startDate, endDate];
+                    updateModel(event, selectedValues);
+
+                    if (props.hideOnRangeSelection && endDate !== null) {
+                        setTimeout(() => {
+                            setOverlayVisibleState(false);
+                        }, 150);
+                    }
+                } else {
+                    selectedValues = [date, null];
+                    updateModel(event, selectedValues);
+                }
+            }
+
+            if (props.onSelect) {
+                props.onSelect({
+                    originalEvent: event,
+                    value: date
+                });
+            }
+
+            updateInputfield(selectedValues);
+        };
+
+        const decrementDecade = () => {
+            const _currentYear = currentYear - 10;
+
+            setCurrentYear(_currentYear);
+
+            return _currentYear;
+        };
+
+        const incrementDecade = () => {
+            const _currentYear = currentYear + 10;
+
+            setCurrentYear(_currentYear);
+
+            return _currentYear;
+        };
+
+        const switchToMonthView = (event) => {
+            if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
+                viewChangedWithKeyDown.current = true;
+            }
+
+            setCurrentView('month');
+            event.preventDefault();
+        };
+
+        const switchToYearView = (event) => {
+            if (event && event.code && (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space')) {
+                viewChangedWithKeyDown.current = true;
+            }
+
+            setCurrentView('year');
+            event.preventDefault();
+        };
+
+        const onMonthSelect = (event, month) => {
+            if (props.view === 'month') {
+                const year = getViewYear();
+
+                onDateSelect(event, { year, month: month, day: 1, selectable: true });
+                event.preventDefault();
+            } else {
+                setCurrentMonth(month);
+                createMonthsMeta(month, currentYear);
+                const currentDate = cloneDate(getCurrentDateTime());
+
+                currentDate.setDate(1); // #2948 always set to 1st of month
+                currentDate.setMonth(month);
+                currentDate.setYear(currentYear);
+
+                setViewDateState(currentDate);
+                setCurrentView('date');
+                props.onMonthChange && props.onMonthChange({ month: month + 1, year: currentYear });
+
+                updateViewDate(event, currentDate);
+                onViewDateSelect({ event, date: currentDate });
+            }
+        };
+
+        const getViewYear = () => {
+            return props.yearNavigator ? getViewDate().getFullYear() : currentYear;
+        };
+
+        const onYearSelect = (event, year) => {
+            if (props.view === 'year') {
+                onDateSelect(event, { year: year, month: 0, day: 1, selectable: true });
+            } else {
+                setCurrentYear(year);
+                setCurrentView('month');
+                props.onMonthChange && props.onMonthChange({ month: currentMonth + 1, year: year });
+            }
+        };
+
+        const updateModel = (event, value) => {
+            if (props.onChange) {
+                const newValue = cloneDate(value);
+
+                viewStateChanged.current = true;
+
+                onChangeRef.current({
+                    originalEvent: event,
+                    value: newValue,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: newValue
+                    }
+                });
+            }
+        };
+
+        const show = (type) => {
+            if (props.onVisibleChange) {
+                props.onVisibleChange({
+                    visible: true,
+                    type
+                });
+            } else {
+                setOverlayVisibleState(true);
+
+                overlayEventListener.current = (e) => {
+                    if (!isOutsideClicked(e) && visible) {
+                        isOverlayClicked.current = true;
+                    }
+                };
+
+                OverlayService.on('overlay-click', overlayEventListener.current);
+            }
+        };
+
+        const hide = (type, callback) => {
+            const _hideCallback = () => {
+                viewStateChanged.current = false;
+                ignoreFocusFunctionality.current = false;
+                isOverlayClicked.current = false;
+
+                callback && callback();
+
+                OverlayService.off('overlay-click', overlayEventListener.current);
+                overlayEventListener.current = null;
+            };
+
+            props.touchUI && disableModality();
+
+            if (props.onVisibleChange) {
+                props.onVisibleChange({
+                    visible: type !== 'dateselect', // false only if selecting a value to close panel
+                    type,
+                    callback: _hideCallback
+                });
+            } else {
+                setOverlayVisibleState(false);
+                _hideCallback();
+            }
+        };
+
+        const onOverlayEnter = () => {
+            const styles = props.touchUI
+                ? {
+                      position: 'fixed',
+                      top: '50%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)'
+                  }
+                : !props.inline
+                  ? { position: 'absolute', top: '0', left: '0' }
+                  : undefined;
+
+            DomHandler.addStyles(overlayRef.current, styles);
+
+            if (props.autoZIndex) {
+                const key = props.touchUI ? 'modal' : 'overlay';
+
+                ZIndexUtils.set(key, overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex[key]) || PrimeReact.zIndex[key]);
+            }
+
+            if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
+                let inputWidth = DomHandler.getOuterWidth(inputRef.current);
+
+                // #5435 must have reasonable width if input is too small
+                if (inputWidth < 220) {
+                    inputWidth = 220;
+                }
+
+                if (props.view === 'date') {
+                    overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
+                } else {
+                    overlayRef.current.style.width = inputWidth + 'px';
+                }
+
+                // #5830 Tailwind does not need a min width it breaks the styling
+                if (!isUnstyled()) {
+                    overlayRef.current.style.minWidth = inputWidth + 'px';
+                }
+            }
+
+            alignOverlay();
+        };
+
+        const onOverlayEntered = () => {
+            bindOverlayListener();
+            props.onShow && props.onShow();
+            setFocusedState(false);
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const appendDisabled = () => {
+            const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
+
+            return appendTo === 'self' || props.inline;
+        };
+
+        const alignOverlay = () => {
+            if (props.touchUI) {
+                enableModality();
+            } else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
+                DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+
+                if (appendDisabled()) {
+                    DomHandler.relativePosition(overlayRef.current, inputRef.current);
+                } else {
+                    DomHandler.absolutePosition(overlayRef.current, inputRef.current);
+                }
+            }
+
+            // #6093 Forcibly remove minWidth when in unstyled mode
+            if (isUnstyled()) {
+                overlayRef.current.style.minWidth = '';
+            }
+        };
+
+        const enableModality = () => {
+            if (!touchUIMask.current) {
+                touchUIMask.current = document.createElement('div');
+                touchUIMask.current.style.zIndex = String(ZIndexUtils.get(overlayRef.current) - 1);
+                !isUnstyled() && DomHandler.addMultipleClasses(touchUIMask.current, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
+
+                touchUIMaskClickListener.current = () => {
+                    disableModality();
+                    hide();
+                };
+
+                touchUIMask.current.addEventListener('click', touchUIMaskClickListener.current);
+
+                document.body.appendChild(touchUIMask.current);
+                DomHandler.blockBodyScroll();
+            }
+        };
+
+        const disableModality = () => {
+            if (touchUIMask.current) {
+                if (isUnstyled) {
+                    destroyMask();
+                } else {
+                    !isUnstyled() && DomHandler.addClass(touchUIMask.current, 'p-component-overlay-leave');
+
+                    if (DomHandler.hasCSSAnimation(touchUIMask.current) > 0) {
+                        touchUIMask.current.addEventListener('animationend', () => {
+                            destroyMask();
+                        });
+                    } else {
+                        destroyMask();
+                    }
+                }
+            }
+        };
+
+        const destroyMask = () => {
+            if (touchUIMask.current) {
+                touchUIMask.current.removeEventListener('click', touchUIMaskClickListener.current);
+                touchUIMaskClickListener.current = null;
+                document.body.removeChild(touchUIMask.current);
+                touchUIMask.current = null;
+            }
+
+            let bodyChildren = document.body.children;
+            let hasBlockerMasks;
+
+            for (let i = 0; i < bodyChildren.length; i++) {
+                let bodyChild = bodyChildren[i];
+
+                if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
+                    hasBlockerMasks = true;
+                    break;
+                }
+            }
+
+            if (!hasBlockerMasks) {
+                DomHandler.unblockBodyScroll();
+            }
+        };
+
+        const isOutsideClicked = (event) => {
+            return elementRef.current && !(elementRef.current.isSameNode(event.target) || isNavIconClicked(event.target) || elementRef.current.contains(event.target) || (overlayRef.current && overlayRef.current.contains(event.target)));
+        };
+
+        const isNavIconClicked = (target) => {
+            return (previousButton.current && (previousButton.current.isSameNode(target) || previousButton.current.contains(target))) || (nextButton.current && (nextButton.current.isSameNode(target) || nextButton.current.contains(target)));
+        };
+
+        const getFirstDayOfMonthIndex = (month, year) => {
+            let day = new Date();
+
+            day.setDate(1);
+            day.setMonth(month);
+            day.setFullYear(year);
+
+            let dayIndex = day.getDay() + getSundayIndex();
+
+            return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
+        };
+
+        const getDaysCountInMonth = (month, year) => {
+            return 32 - daylightSavingAdjust(new Date(year, month, 32)).getDate();
+        };
+
+        const getDaysCountInPrevMonth = (month, year) => {
+            let prev = getPreviousMonthAndYear(month, year);
+
+            return getDaysCountInMonth(prev.month, prev.year);
+        };
+
+        const daylightSavingAdjust = (date) => {
+            if (!date) {
+                return null;
+            }
+
+            date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
+
+            return date;
+        };
+
+        const getPreviousMonthAndYear = (month, year) => {
+            let m;
+            let y;
+
+            if (month === 0) {
+                m = 11;
+                y = year - 1;
+            } else {
+                m = month - 1;
+                y = year;
+            }
+
+            return { month: m, year: y };
+        };
+
+        const getNextMonthAndYear = (month, year) => {
+            let m;
+            let y;
+
+            if (month === 11) {
+                m = 0;
+                y = year + 1;
+            } else {
+                m = month + 1;
+                y = year;
+            }
+
+            return { month: m, year: y };
+        };
+
+        const getSundayIndex = () => {
+            const firstDayOfWeek = localeOption('firstDayOfWeek', props.locale);
+
+            return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
+        };
+
+        const createWeekDaysMeta = () => {
+            let weekDays = [];
+            let { firstDayOfWeek: dayIndex, dayNamesMin } = localeOptions(props.locale);
+
+            for (let i = 0; i < 7; i++) {
+                weekDays.push(dayNamesMin[dayIndex]);
+                dayIndex = dayIndex === 6 ? 0 : ++dayIndex;
+            }
+
+            return weekDays;
+        };
+
+        const createMonthsMeta = (month, year) => {
+            let months = [];
+
+            for (let i = 0; i < props.numberOfMonths; i++) {
+                let m = month + i;
+                let y = year;
+
+                if (m > 11) {
+                    m = (m % 11) - 1;
+                    y = year + 1;
+                }
+
+                months.push(createMonthMeta(m, y));
+            }
+
+            return months;
+        };
+
+        const createMonthMeta = (month, year) => {
+            let dates = [];
+            let firstDay = getFirstDayOfMonthIndex(month, year);
+            let daysLength = getDaysCountInMonth(month, year);
+            let prevMonthDaysLength = getDaysCountInPrevMonth(month, year);
+            let dayNo = 1;
+            let today = new Date();
+            let weekNumbers = [];
+            let monthRows = Math.ceil((daysLength + firstDay) / 7);
+
+            for (let i = 0; i < monthRows; i++) {
+                let week = [];
+
+                if (i === 0) {
+                    for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
+                        let prev = getPreviousMonthAndYear(month, year);
+
+                        week.push({
+                            day: j,
+                            month: prev.month,
+                            year: prev.year,
+                            otherMonth: true,
+                            today: isToday(today, j, prev.month, prev.year),
+                            selectable: isSelectable(j, prev.month, prev.year, true)
+                        });
+                    }
+
+                    let remainingDaysLength = 7 - week.length;
+
+                    for (let j = 0; j < remainingDaysLength; j++) {
+                        week.push({
+                            day: dayNo,
+                            month: month,
+                            year: year,
+                            today: isToday(today, dayNo, month, year),
+                            selectable: isSelectable(dayNo, month, year, false)
+                        });
+                        dayNo++;
+                    }
+                } else {
+                    for (let j = 0; j < 7; j++) {
+                        if (dayNo > daysLength) {
+                            let next = getNextMonthAndYear(month, year);
+
+                            week.push({
+                                day: dayNo - daysLength,
+                                month: next.month,
+                                year: next.year,
+                                otherMonth: true,
+                                today: isToday(today, dayNo - daysLength, next.month, next.year),
+                                selectable: isSelectable(dayNo - daysLength, next.month, next.year, true)
+                            });
+                        } else {
+                            week.push({
+                                day: dayNo,
+                                month: month,
+                                year: year,
+                                today: isToday(today, dayNo, month, year),
+                                selectable: isSelectable(dayNo, month, year, false)
+                            });
+                        }
+
+                        dayNo++;
+                    }
+                }
+
+                if (props.showWeek) {
+                    weekNumbers.push(getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
+                }
+
+                dates.push(week);
+            }
+
+            return {
+                month: month,
+                year: year,
+                dates: dates,
+                weekNumbers: weekNumbers
+            };
+        };
+
+        const getWeekNumber = (date) => {
+            let checkDate = cloneDate(date);
+
+            checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
+            let time = checkDate.getTime();
+
+            checkDate.setMonth(0);
+            checkDate.setDate(1);
+
+            return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
+        };
+
+        const isSelectable = (day, month, year, otherMonth) => {
+            let validMin = true;
+            let validMax = true;
+            let validDate = true;
+            let validDay = true;
+            let validMonth = true;
+
+            if (props.minDate) {
+                if (props.minDate.getFullYear() > year) {
+                    validMin = false;
+                } else if (props.minDate.getFullYear() === year) {
+                    if (month > -1 && props.minDate.getMonth() > month) {
+                        validMin = false;
+                    } else if (month > -1 && props.minDate.getMonth() === month) {
+                        if (day > 0 && props.minDate.getDate() > day) {
+                            validMin = false;
+                        }
+                    }
+                }
+            }
+
+            if (props.maxDate) {
+                if (props.maxDate.getFullYear() < year) {
+                    validMax = false;
+                } else if (props.maxDate.getFullYear() === year) {
+                    if (month > -1 && props.maxDate.getMonth() < month) {
+                        validMax = false;
+                    } else if (month > -1 && props.maxDate.getMonth() === month) {
+                        if (day > 0 && props.maxDate.getDate() < day) {
+                            validMax = false;
+                        }
+                    }
+                }
+            }
+
+            if (props.disabledDates || props.enabledDates || props.disabledDays) {
+                validDay = !isDayDisabled(day, month, year);
+            }
+
+            if (props.selectOtherMonths === false && otherMonth) {
+                validMonth = false;
+            }
+
+            return validMin && validMax && validDate && validDay && validMonth;
+        };
+
+        const isSelectableTime = (value) => {
+            let validMin = true;
+            let validMax = true;
+
+            if (props.minDate && props.minDate.toDateString() === value.toDateString()) {
+                if (props.minDate.getHours() > value.getHours()) {
+                    validMin = false;
+                } else if (props.minDate.getHours() === value.getHours()) {
+                    if (props.minDate.getMinutes() > value.getMinutes()) {
+                        validMin = false;
+                    } else if (props.minDate.getMinutes() === value.getMinutes()) {
+                        if (props.showSeconds) {
+                            if (props.minDate.getSeconds() > value.getSeconds()) {
+                                validMin = false;
+                            } else if (props.minDate.getSeconds() === value.getSeconds()) {
+                                if (!props.showMillisec || props.minDate.getMilliseconds() > value.getMilliseconds()) {
+                                    validMin = false;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            if (props.maxDate && props.maxDate.toDateString() === value.toDateString()) {
+                if (props.maxDate.getHours() < value.getHours()) {
+                    validMax = false;
+                } else if (props.maxDate.getHours() === value.getHours()) {
+                    if (props.maxDate.getMinutes() < value.getMinutes()) {
+                        validMax = false;
+                    } else if (props.maxDate.getMinutes() === value.getMinutes()) {
+                        if (props.showSeconds) {
+                            if (props.maxDate.getSeconds() < value.getSeconds()) {
+                                validMax = false;
+                            } else if (props.maxDate.getSeconds() === value.getSeconds()) {
+                                if (!props.showMillisec || props.maxDate.getMilliseconds() < value.getMilliseconds()) {
+                                    validMax = false;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            return validMin && validMax;
+        };
+
+        const isSelected = (dateMeta) => {
+            if (props.value) {
+                if (isSingleSelection()) {
+                    return isDateEquals(props.value, dateMeta);
+                } else if (isMultipleSelection()) {
+                    let selected = false;
+
+                    for (let date of props.value) {
+                        selected = isDateEquals(date, dateMeta);
+
+                        if (selected) {
+                            break;
+                        }
+                    }
+
+                    return selected;
+                } else if (isRangeSelection()) {
+                    if (props.value[1]) {
+                        return isDateEquals(props.value[0], dateMeta) || isDateEquals(props.value[1], dateMeta) || isDateBetween(props.value[0], props.value[1], dateMeta);
+                    }
+
+                    return isDateEquals(props.value[0], dateMeta);
+                }
+            } else {
+                return false;
+            }
+        };
+
+        const isComparable = () => {
+            return props.value != null && typeof props.value !== 'string';
+        };
+
+        const isMonthSelected = (month) => {
+            if (!isComparable()) return false;
+
+            if (isMultipleSelection()) {
+                return props.value.some((v) => v.getMonth() === month && v.getFullYear() === currentYear);
+            } else if (isRangeSelection()) {
+                const [start, end] = props.value;
+                const startYear = start ? start.getFullYear() : null;
+                const endYear = end ? end.getFullYear() : null;
+                const startMonth = start ? start.getMonth() : null;
+                const endMonth = end ? end.getMonth() : null;
+
+                if (!end) {
+                    return startYear === currentYear && startMonth === month;
+                } else {
+                    const currentDate = new Date(currentYear, month, 1);
+                    const startDate = new Date(startYear, startMonth, 1);
+                    const endDate = new Date(endYear, endMonth, 1);
+
+                    return currentDate >= startDate && currentDate <= endDate;
+                }
+            } else {
+                return props.value.getMonth() === month && props.value.getFullYear() === currentYear;
+            }
+        };
+
+        const isYearSelected = (year) => {
+            if (!isComparable()) return false;
+
+            if (isMultipleSelection()) {
+                return props.value.some((v) => v.getFullYear() === year);
+            } else if (isRangeSelection()) {
+                const start = props.value[0] ? props.value[0].getFullYear() : null;
+                const end = props.value[1] ? props.value[1].getFullYear() : null;
+
+                return start === year || end === year || (start < year && end > year);
+            } else {
+                return props.value.getFullYear() === year;
+            }
+        };
+
+        const switchViewButtonDisabled = () => {
+            return props.numberOfMonths > 1 || props.disabled;
+        };
+
+        const isDateEquals = (value, dateMeta) => {
+            if (value && value instanceof Date) {
+                return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
+            }
+
+            return false;
+        };
+
+        const isDateBetween = (start, end, dateMeta) => {
+            let between = false;
+
+            if (start && end) {
+                let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
+                return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
+            }
+
+            return between;
+        };
+
+        const isSingleSelection = () => {
+            return props.selectionMode === 'single';
+        };
+
+        const isRangeSelection = () => {
+            return props.selectionMode === 'range';
+        };
+
+        const isMultipleSelection = () => {
+            return props.selectionMode === 'multiple';
+        };
+
+        const isToday = (today, day, month, year) => {
+            return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+        };
+
+        const isDayDisabled = (day, month, year) => {
+            let isDisabled = false;
+
+            // first check for disabled dates
+            if (props.disabledDates) {
+                if (props.disabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === day)) {
+                    isDisabled = true;
+                }
+            }
+
+            // next if not disabled then check for disabled days
+            if (!isDisabled && props.disabledDays && currentView === 'date') {
+                let weekday = new Date(year, month, day);
+                let weekdayNumber = weekday.getDay();
+
+                if (props.disabledDays.indexOf(weekdayNumber) !== -1) {
+                    isDisabled = true;
+                }
+            }
+
+            // last check for enabled dates to force dates enabled
+            if (props.enabledDates) {
+                const isEnabled = props.enabledDates.some((d) => d.getFullYear() === year && d.getMonth() === month && d.getDate() === day);
+
+                if (isEnabled) {
+                    isDisabled = false;
+                } else if (!props.disabledDays && !props.disabledDates) {
+                    // disable other dates when only enabledDates are present
+                    isDisabled = true;
+                }
+            }
+
+            return isDisabled;
+        };
+
+        const isMonthYearDisabled = (month, year) => {
+            const daysCountInAllMonth = month === -1 ? new Array(12).fill(0).map((_, i) => getDaysCountInMonth(i, year)) : [getDaysCountInMonth(month, year)];
+
+            for (let i = 0; i < daysCountInAllMonth.length; i++) {
+                const monthDays = daysCountInAllMonth[i];
+                const _month = month === -1 ? i : month;
+
+                for (let day = 1; day <= monthDays; day++) {
+                    let isDateSelectable = isSelectable(day, _month, year);
+
+                    if (isDateSelectable) {
+                        return false;
+                    }
+                }
+            }
+
+            return true;
+        };
+
+        const updateInputfield = (value) => {
+            if (!inputRef.current) {
+                return;
+            }
+
+            let formattedValue = '';
+
+            if (value) {
+                try {
+                    if (isSingleSelection()) {
+                        formattedValue = isValidDate(value) ? formatDateTime(value) : props.keepInvalid ? value : '';
+                    } else if (isMultipleSelection()) {
+                        for (let i = 0; i < value.length; i++) {
+                            let selectedValue = value[i];
+                            let dateAsString = isValidDate(selectedValue) ? formatDateTime(selectedValue) : '';
+
+                            formattedValue = formattedValue + dateAsString;
+
+                            if (i !== value.length - 1) {
+                                formattedValue = formattedValue + ', ';
+                            }
+                        }
+                    } else if (isRangeSelection()) {
+                        if (value && value.length) {
+                            let startDate = value[0];
+                            let endDate = value[1];
+
+                            formattedValue = isValidDate(startDate) ? formatDateTime(startDate) : '';
+
+                            if (endDate) {
+                                formattedValue = formattedValue + (isValidDate(endDate) ? ' - ' + formatDateTime(endDate) : '');
+                            }
+                        }
+                    }
+                } catch (err) {
+                    formattedValue = value;
+                }
+            }
+
+            inputRef.current.value = formattedValue;
+        };
+
+        const formatDateTime = (date) => {
+            if (props.formatDateTime) {
+                return props.formatDateTime(date);
+            }
+
+            let formattedValue = null;
+
+            if (date) {
+                if (props.timeOnly) {
+                    formattedValue = formatTime(date);
+                } else {
+                    formattedValue = formatDate(date, getDateFormat());
+
+                    if (props.showTime) {
+                        formattedValue = formattedValue + (' ' + formatTime(date));
+                    }
+                }
+            }
+
+            return formattedValue;
+        };
+
+        const formatDate = (date, format) => {
+            if (!date) {
+                return '';
+            }
+
+            let iFormat;
+
+            const lookAhead = (match) => {
+                const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+
+                if (matches) {
+                    iFormat++;
+                }
+
+                return matches;
+            };
+
+            const formatNumber = (match, value, len) => {
+                let num = '' + value;
+
+                if (lookAhead(match)) {
+                    while (num.length < len) {
+                        num = '0' + num;
+                    }
+                }
+
+                return num;
+            };
+
+            const formatName = (match, value, shortNames, longNames) => {
+                return lookAhead(match) ? longNames[value] : shortNames[value];
+            };
+
+            let output = '';
+            let literal = false;
+            const { dayNamesShort, dayNames, monthNamesShort, monthNames } = localeOptions(props.locale);
+
+            if (date) {
+                for (iFormat = 0; iFormat < format.length; iFormat++) {
+                    if (literal) {
+                        if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                            literal = false;
+                        } else {
+                            output = output + format.charAt(iFormat);
+                        }
+                    } else {
+                        switch (format.charAt(iFormat)) {
+                            case 'd':
+                                output = output + formatNumber('d', date.getDate(), 2);
+                                break;
+                            case 'D':
+                                output = output + formatName('D', date.getDay(), dayNamesShort, dayNames);
+                                break;
+                            case 'o':
+                                output = output + formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                                break;
+                            case 'm':
+                                output = output + formatNumber('m', date.getMonth() + 1, 2);
+                                break;
+                            case 'M':
+                                output = output + formatName('M', date.getMonth(), monthNamesShort, monthNames);
+                                break;
+                            case 'y':
+                                output = output + (lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100));
+                                break;
+                            case '@':
+                                output = output + date.getTime();
+                                break;
+                            case '!':
+                                output = output + (date.getTime() * 10000 + ticksTo1970);
+                                break;
+                            case "'":
+                                if (lookAhead("'")) {
+                                    output = output + "'";
+                                } else {
+                                    literal = true;
+                                }
+
+                                break;
+                            default:
+                                output = output + format.charAt(iFormat);
+                        }
+                    }
+                }
+            }
+
+            return output;
+        };
+
+        const formatTime = (date) => {
+            if (!date) {
+                return '';
+            }
+
+            let output = '';
+            let hours = date.getHours();
+            let minutes = date.getMinutes();
+            let seconds = date.getSeconds();
+            let milliseconds = date.getMilliseconds();
+
+            if (props.hourFormat === '12' && hours > 11 && hours !== 12) {
+                hours = hours - 12;
+            }
+
+            if (props.hourFormat === '12') {
+                output = output + (hours === 0 ? 12 : hours < 10 ? '0' + hours : hours);
+            } else {
+                output = output + (hours < 10 ? '0' + hours : hours);
+            }
+
+            output = output + ':';
+            output = output + (minutes < 10 ? '0' + minutes : minutes);
+
+            if (props.showSeconds) {
+                output = output + ':';
+                output = output + (seconds < 10 ? '0' + seconds : seconds);
+            }
+
+            if (props.showMillisec) {
+                output = output + '.';
+                output = output + (milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds);
+            }
+
+            if (props.hourFormat === '12') {
+                output = output + (date.getHours() > 11 ? ' PM' : ' AM');
+            }
+
+            return output;
+        };
+
+        const parseValueFromString = (text) => {
+            if (!text || text.trim().length === 0) {
+                return null;
+            }
+
+            let value;
+
+            if (isSingleSelection()) {
+                value = parseDateTime(text);
+            } else if (isMultipleSelection()) {
+                let tokens = text.split(',');
+
+                value = [];
+
+                for (let token of tokens) {
+                    value.push(parseDateTime(token.trim()));
+                }
+            } else if (isRangeSelection()) {
+                let tokens = text.split(' - ');
+
+                value = [];
+
+                for (let i = 0; i < tokens.length; i++) {
+                    value[i] = parseDateTime(tokens[i].trim());
+                }
+            }
+
+            return value;
+        };
+
+        const parseDateTime = (text) => {
+            if (props.parseDateTime) {
+                return props.parseDateTime(text);
+            }
+
+            let date;
+
+            if (props.timeOnly) {
+                date = new Date();
+                const match = text.match(/(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)?/i);
+
+                if (match) {
+                    populateTime(date, match[1], match[2]);
+                } else {
+                    return null;
+                }
+            } else if (props.showTime) {
+                const time12 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)/i;
+                const time24 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)$/;
+
+                let match, datePart, timePart, ampm;
+
+                if (props.hourFormat === '12' && (match = text.match(time12))) {
+                    timePart = match[1];
+                    ampm = match[2];
+                    datePart = text.replace(time12, '').trim();
+                } else if (props.hourFormat === '24' && (match = text.match(time24))) {
+                    timePart = match[1];
+                    datePart = text.replace(time24, '').trim();
+                }
+
+                if (datePart && timePart) {
+                    date = parseDate(datePart, getDateFormat());
+                    populateTime(date, timePart, ampm);
+                } else {
+                    date = parseDate(text, getDateFormat());
+                }
+            } else {
+                date = parseDate(text, getDateFormat());
+            }
+
+            return date;
+        };
+
+        const populateTime = (value, timeString, ampm) => {
+            if (props.hourFormat === '12' && ampm !== 'PM' && ampm !== 'AM') {
+                throw new Error('Invalid Time');
+            }
+
+            let time = parseTime(timeString, ampm);
+
+            value.setHours(time.hour);
+            value.setMinutes(time.minute);
+            value.setSeconds(time.second);
+            value.setMilliseconds(time.millisecond);
+        };
+
+        const parseTime = (value, ampm) => {
+            value = props.showMillisec ? value.replace('.', ':') : value;
+            let tokens = value.split(':');
+            let validTokenLength = props.showSeconds ? 3 : 2;
+
+            validTokenLength = props.showMillisec ? validTokenLength + 1 : validTokenLength;
+
+            if (tokens.length !== validTokenLength || tokens[0].length !== 2 || tokens[1].length !== 2 || (props.showSeconds && tokens[2].length !== 2) || (props.showMillisec && tokens[3].length !== 3)) {
+                throw new Error('Invalid time');
+            }
+
+            let h = parseInt(tokens[0], 10);
+            let m = parseInt(tokens[1], 10);
+            let s = props.showSeconds ? parseInt(tokens[2], 10) : null;
+            let ms = props.showMillisec ? parseInt(tokens[3], 10) : null;
+
+            if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (props.hourFormat === '12' && h > 12) || (props.showSeconds && (isNaN(s) || s > 59)) || (props.showMillisec && (isNaN(s) || s > 1000))) {
+                throw new Error('Invalid time');
+            } else {
+                if (props.hourFormat === '12') {
+                    if (h !== 12 && ampm === 'PM') {
+                        h = h + 12;
+                    }
+
+                    if (h === 12 && ampm === 'AM') {
+                        h = h - 12;
+                    }
+                }
+
+                return { hour: h, minute: m, second: s, millisecond: ms };
+            }
+        };
+
+        // Ported from jquery-ui datepicker parseDate
+        const parseDate = (value, format) => {
+            if (format == null || value == null) {
+                throw new Error('Invalid arguments');
+            }
+
+            value = typeof value === 'object' ? value.toString() : value + '';
+
+            if (value === '') {
+                return null;
+            }
+
+            let iFormat;
+            let dim;
+            let extra;
+            let iValue = 0;
+            let shortYearCutoff = typeof props.shortYearCutoff !== 'string' ? props.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(props.shortYearCutoff, 10);
+            let year = -1;
+            let month = -1;
+            let day = -1;
+            let doy = -1;
+            let literal = false;
+            let date;
+
+            let lookAhead = (match) => {
+                let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+
+                if (matches) {
+                    iFormat++;
+                }
+
+                return matches;
+            };
+
+            let getNumber = (match) => {
+                let isDoubled = lookAhead(match);
+                let size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2;
+                let minSize = match === 'y' ? size : 1;
+                let digits = new RegExp('^\\d{' + minSize + ',' + size + '}');
+                let num = value.substring(iValue).match(digits);
+
+                if (!num) {
+                    throw new Error('Missing number at position ' + iValue);
+                }
+
+                iValue = iValue + num[0].length;
+
+                return parseInt(num[0], 10);
+            };
+
+            let getName = (match, shortNames, longNames) => {
+                let index = -1;
+                let arr = lookAhead(match) ? longNames : shortNames;
+                let names = [];
+
+                for (let i = 0; i < arr.length; i++) {
+                    names.push([i, arr[i]]);
+                }
+
+                names.sort((a, b) => {
+                    return -(a[1].length - b[1].length);
+                });
+
+                for (let i = 0; i < names.length; i++) {
+                    let name = names[i][1];
+
+                    if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
+                        index = names[i][0];
+                        iValue = iValue + name.length;
+                        break;
+                    }
+                }
+
+                if (index !== -1) {
+                    return index + 1;
+                }
+
+                throw new Error('Unknown name at position ' + iValue);
+            };
+
+            let checkLiteral = () => {
+                if (value.charAt(iValue) !== format.charAt(iFormat)) {
+                    throw new Error('Unexpected literal at position ' + iValue);
+                }
+
+                iValue++;
+            };
+
+            if (props.view === 'month') {
+                day = 1;
+            }
+
+            if (props.view === 'year') {
+                day = 1;
+                month = 1;
+            }
+
+            const { dayNamesShort, dayNames, monthNamesShort, monthNames } = localeOptions(props.locale);
+
+            for (iFormat = 0; iFormat < format.length; iFormat++) {
+                if (literal) {
+                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                        literal = false;
+                    } else {
+                        checkLiteral();
+                    }
+                } else {
+                    switch (format.charAt(iFormat)) {
+                        case 'd':
+                            day = getNumber('d');
+                            break;
+                        case 'D':
+                            getName('D', dayNamesShort, dayNames);
+                            break;
+                        case 'o':
+                            doy = getNumber('o');
+                            break;
+                        case 'm':
+                            month = getNumber('m');
+                            break;
+                        case 'M':
+                            month = getName('M', monthNamesShort, monthNames);
+                            break;
+                        case 'y':
+                            year = getNumber('y');
+                            break;
+                        case '@':
+                            date = new Date(getNumber('@'));
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case '!':
+                            date = new Date((getNumber('!') - ticksTo1970) / 10000);
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case "'":
+                            if (lookAhead("'")) {
+                                checkLiteral();
+                            } else {
+                                literal = true;
+                            }
+
+                            break;
+                        default:
+                            checkLiteral();
+                    }
+                }
+            }
+
+            if (iValue < value.length) {
+                extra = value.substr(iValue);
+
+                if (!/^\s+/.test(extra)) {
+                    throw new Error('Extra/unparsed characters found in date: ' + extra);
+                }
+            }
+
+            if (year === -1) {
+                year = new Date().getFullYear();
+            } else if (year < 100) {
+                year = year + (new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100));
+            }
+
+            if (doy > -1) {
+                month = 1;
+                day = doy;
+
+                do {
+                    dim = getDaysCountInMonth(year, month - 1);
+
+                    if (day <= dim) {
+                        break;
+                    }
+
+                    month++;
+                    day = day - dim;
+                } while (true);
+            }
+
+            date = daylightSavingAdjust(new Date(year, month - 1, day));
+
+            if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
+                throw new Error('Invalid date'); // E.g. 31/02/00
+            }
+
+            return date;
+        };
+
+        const isInMinYear = (viewDate) => {
+            return props.minDate && props.minDate.getFullYear() === viewDate.getFullYear();
+        };
+
+        const isInMaxYear = (viewDate) => {
+            return props.maxDate && props.maxDate.getFullYear() === viewDate.getFullYear();
+        };
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useMountEffect(() => {
+            let viewDate = getViewDate(props.viewDate);
+
+            validateDate(viewDate);
+            setViewDateState(viewDate);
+
+            setCurrentMonth(viewDate.getMonth());
+            setCurrentYear(viewDate.getFullYear());
+            setCurrentView(props.view);
+
+            if (!idState) {
+                const uniqueId = UniqueComponentId();
+
+                !idState && setIdState(uniqueId);
+            }
+
+            if (props.inline) {
+                overlayRef && overlayRef.current.setAttribute(attributeSelector, '');
+
+                if (!props.disabled) {
+                    initFocusableCell();
+
+                    if (props.numberOfMonths === 1) {
+                        overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
+                    }
+                }
+            } else {
+                // @todo
+                //alignOverlay();
+            }
+
+            if (props.value) {
+                updateInputfield(props.value);
+                setValue(props.value);
+            }
+
+            if (props.autoFocus) {
+                // delay showing until rendered so `alignPanel()` method aligns the popup in the right location
+                setTimeout(() => DomHandler.focus(inputRef.current, props.autoFocus), 200);
+            }
+        });
+
+        React.useEffect(() => {
+            // see https://github.com/primefaces/primereact/issues/4030
+            onChangeRef.current = props.onChange;
+        }, [props.onChange]);
+
+        React.useEffect(() => {
+            let unbindMaskEvents = null;
+
+            if (props.mask) {
+                unbindMaskEvents = mask(inputRef.current, {
+                    mask: props.mask,
+                    slotChar: props.maskSlotChar,
+                    readOnly: props.readOnlyInput || props.disabled,
+                    onChange: (e) => {
+                        updateValueOnInput(e.originalEvent, e.value, () => {
+                            return false;
+                        });
+                    },
+                    onBlur: (e) => {
+                        updateValueOnInput(e, e.target.value);
+                    }
+                }).unbindEvents;
+            }
+
+            return () => {
+                props.mask && unbindMaskEvents && unbindMaskEvents();
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.disabled, props.mask, props.readOnlyInput]);
+
+        useUpdateEffect(() => {
+            if (viewChangedWithKeyDown.current) {
+                setCurrentView(props.view);
+            }
+
+            viewChangedWithKeyDown.current = false;
+        }, [props.view]);
+
+        useUpdateEffect(() => {
+            if (visible && !props.inline) {
+                focusToFirstCell();
+            }
+        }, [visible, currentView, props.inline]);
+
+        useUpdateEffect(() => {
+            if (!props.onViewDateChange && !viewStateChanged.current) {
+                setValue(props.value);
+            }
+
+            if (props.viewDate) {
+                const date = getViewDate(props.viewDate);
+
+                updateViewDate(null, date);
+                onViewDateSelect({ event: null, date });
+            }
+        }, [props.onViewDateChange, props.value, props.viewDate]);
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState || props.visible) {
+                // Github #5529
+                setTimeout(() => {
+                    alignOverlay();
+                });
+            }
+        }, [currentView, overlayVisibleState, props.visible]);
+
+        useUpdateEffect(() => {
+            const newDate = props.value;
+
+            if (previousValue !== newDate) {
+                const isInputFocused = document.activeElement === inputRef.current;
+
+                // Do not update value in input if user types something in it:
+                if (!isInputFocused) {
+                    updateInputfield(newDate);
+                }
+
+                // #3516 view date not updated when value set programatically
+                if (!newDate) return;
+
+                let viewDate = newDate;
+
+                if (isMultipleSelection()) {
+                    if (newDate.length) {
+                        viewDate = newDate[newDate.length - 1];
+                    }
+                } else if (isRangeSelection()) {
+                    if (newDate.length) {
+                        let startDate = newDate[0];
+                        let endDate = newDate[1];
+
+                        viewDate = endDate || startDate;
+                    }
+                }
+
+                if (viewDate instanceof Date) {
+                    validateDate(viewDate);
+                    setViewDateState(viewDate);
+                    setCurrentMonth(viewDate.getMonth());
+                    setCurrentYear(viewDate.getFullYear());
+                }
+            }
+        }, [props.value, visible]);
+
+        useUpdateEffect(() => {
+            updateInputfield(props.value);
+        }, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec, props.showTime, props.locale]);
+
+        useUpdateEffect(() => {
+            if (overlayRef.current) {
+                setNavigationState(viewDateState);
+                updateFocus();
+            }
+        });
+
+        useUnmountEffect(() => {
+            if (touchUIMask.current) {
+                disableModality();
+                touchUIMask.current = null;
+            }
+
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            getCurrentDateTime,
+            getViewDate,
+            updateViewDate,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        const setValue = (propValue) => {
+            if (Array.isArray(propValue)) {
+                propValue = propValue[0];
+            }
+
+            let prevPropValue = previousValue;
+
+            if (Array.isArray(prevPropValue)) {
+                prevPropValue = prevPropValue[0];
+            }
+
+            let viewDate = props.viewDate && isValidDate(props.viewDate) ? props.viewDate : propValue && isValidDate(propValue) ? propValue : new Date();
+
+            if (isClearClicked.current && props.showTime) {
+                viewDate.setHours(0, 0, 0);
+
+                isClearClicked.current = false;
+            }
+
+            if ((!prevPropValue && propValue) || (propValue && propValue instanceof Date && prevPropValue instanceof Date && propValue.getTime() !== prevPropValue.getTime())) {
+                validateDate(viewDate);
+            }
+
+            setViewDateState(viewDate);
+            viewStateChanged.current = true;
+        };
+
+        const createBackwardNavigator = (isVisible) => {
+            const navigatorProps = isVisible
+                ? {
+                      onClick: onPrevButtonClick,
+                      onKeyDown: (e) => onContainerButtonKeydown(e, trapFocus)
+                  }
+                : { style: { visibility: 'hidden' } };
+            const previousIconProps = mergeProps(
+                {
+                    className: cx('previousIcon')
+                },
+                ptm('previousIcon')
+            );
+            const icon = props.prevIcon || <ChevronLeftIcon {...previousIconProps} />;
+            const backwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...previousIconProps }, { props });
+            const { prevDecade, prevYear, prevMonth } = localeOptions(props.locale);
+            const previousButtonLabel = currentView === 'year' ? prevDecade : currentView === 'month' ? prevYear : prevMonth;
+            const previousButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('previousButton'),
+                    'aria-label': previousButtonLabel,
+                    ...navigatorProps
+                },
+                ptm('previousButton')
+            );
+
+            return (
+                <button ref={previousButton} {...previousButtonProps}>
+                    {backwardNavigatorIcon}
+                    <Ripple />
+                </button>
+            );
+        };
+
+        const createForwardNavigator = (isVisible) => {
+            const navigatorProps = isVisible
+                ? {
+                      onClick: onNextButtonClick,
+                      onKeyDown: (e) => onContainerButtonKeydown(e)
+                  }
+                : { style: { visibility: 'hidden' } };
+            const nextIconProps = mergeProps(
+                {
+                    className: cx('nextIcon')
+                },
+                ptm('nextIcon')
+            );
+            const icon = props.nextIcon || <ChevronRightIcon {...nextIconProps} />;
+            const forwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...nextIconProps }, { props });
+            const { nextDecade, nextYear, nextMonth } = localeOptions(props.locale);
+            const nextButtonLabel = currentView === 'year' ? nextDecade : currentView === 'month' ? nextYear : nextMonth;
+            const nextButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('nextButton'),
+                    'aria-label': nextButtonLabel,
+                    ...navigatorProps
+                },
+                ptm('nextButton')
+            );
+
+            return (
+                <button ref={nextButton} {...nextButtonProps}>
+                    {forwardNavigatorIcon}
+                    <Ripple />
+                </button>
+            );
+        };
+
+        const renderMonthsNavigator = (index) => {
+            return props.monthNavigator && props.view !== 'month' && (props.numberOfMonths === 1 || index === 0);
+        };
+
+        const createTitleMonthElement = (month, monthIndex) => {
+            const monthNames = localeOption('monthNames', props.locale);
+
+            if (renderMonthsNavigator(monthIndex)) {
+                const viewDate = getViewDate();
+                const viewMonth = viewDate.getMonth();
+                const displayedMonthOptions = monthNames
+                    .map((month, index) =>
+                        (!isInMinYear(viewDate) || index >= props.minDate.getMonth()) && (!isInMaxYear(viewDate) || index <= props.maxDate.getMonth())
+                            ? {
+                                  label: month,
+                                  value: index,
+                                  index
+                              }
+                            : null
+                    )
+                    .filter((option) => !!option);
+                const displayedMonthNames = displayedMonthOptions.map((option) => option.label);
+                const selectProps = mergeProps(
+                    {
+                        className: cx('select'),
+                        onChange: (e) => onMonthDropdownChange(e, e.target.value),
+                        value: viewMonth
+                    },
+                    ptm('select')
+                );
+                const content = (
+                    <select {...selectProps}>
+                        {displayedMonthOptions.map((option) => {
+                            const optionProps = mergeProps(
+                                {
+                                    value: option.value
+                                },
+                                ptm('option')
+                            );
+
+                            return (
+                                <option {...optionProps} key={option.label}>
+                                    {option.label}
+                                </option>
+                            );
+                        })}
+                    </select>
+                );
+
+                if (props.monthNavigatorTemplate) {
+                    const defaultContentOptions = {
+                        onChange: onMonthDropdownChange,
+                        className: 'p-datepicker-month',
+                        value: viewMonth,
+                        names: displayedMonthNames,
+                        options: displayedMonthOptions,
+                        element: content,
+                        props
+                    };
+
+                    return ObjectUtils.getJSXElement(props.monthNavigatorTemplate, defaultContentOptions);
+                }
+
+                return content;
+            }
+
+            const monthTitleProps = mergeProps(
+                {
+                    className: cx('monthTitle'),
+                    onKeyDown: onContainerButtonKeydown,
+                    'aria-label': localeOption('chooseMonth', props.locale),
+                    onClick: switchToMonthView,
+                    disabled: switchViewButtonDisabled()
+                },
+                ptm('monthTitle')
+            );
+
+            return currentView === 'date' && <button {...monthTitleProps}>{monthNames[month]}</button>;
+        };
+
+        const createTitleYearElement = (metaYear) => {
+            const viewDate = getViewDate();
+            const viewYear = viewDate.getFullYear();
+            const displayYear = props.numberOfMonths > 1 || props.yearNavigator ? metaYear : currentYear;
+
+            if (props.yearNavigator) {
+                let yearOptions = [];
+
+                if (props.yearRange) {
+                    const years = props.yearRange.split(':');
+                    const yearStart = parseInt(years[0], 10);
+                    const yearEnd = parseInt(years[1], 10);
+
+                    for (let i = yearStart; i <= yearEnd; i++) {
+                        yearOptions.push(i);
+                    }
+                } else {
+                    const base = viewYear - (viewYear % 10);
+
+                    for (let i = 0; i < 10; i++) {
+                        yearOptions.push(base + i);
+                    }
+                }
+
+                const displayedYearNames = yearOptions.filter((year) => !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year));
+                const selectProps = mergeProps(
+                    {
+                        className: cx('select'),
+                        onChange: (e) => onYearDropdownChange(e, e.target.value),
+                        value: displayYear
+                    },
+                    ptm('select')
+                );
+
+                const content = (
+                    <select {...selectProps}>
+                        {displayedYearNames.map((year) => {
+                            const optionProps = mergeProps(
+                                {
+                                    value: year
+                                },
+                                ptm('option')
+                            );
+
+                            return (
+                                <option {...optionProps} key={year}>
+                                    {year}
+                                </option>
+                            );
+                        })}
+                    </select>
+                );
+
+                if (props.yearNavigatorTemplate) {
+                    const options = displayedYearNames.map((name, i) => ({ label: name, value: name, index: i }));
+                    const defaultContentOptions = {
+                        onChange: onYearDropdownChange,
+                        className: 'p-datepicker-year',
+                        value: viewYear,
+                        names: displayedYearNames,
+                        options,
+                        element: content,
+                        props
+                    };
+
+                    return ObjectUtils.getJSXElement(props.yearNavigatorTemplate, defaultContentOptions);
+                }
+
+                return content;
+            }
+
+            const yearTitleProps = mergeProps(
+                {
+                    className: cx('yearTitle'),
+                    'aria-label': localeOption('chooseYear', props.locale),
+                    onClick: (e) => switchToYearView(e),
+                    disabled: switchViewButtonDisabled()
+                },
+                ptm('yearTitle')
+            );
+
+            return currentView !== 'year' && <button {...yearTitleProps}>{displayYear}</button>;
+        };
+
+        const createTitleDecadeElement = () => {
+            const years = yearPickerValues();
+            const decadeTitleProps = mergeProps(
+                {
+                    className: cx('decadeTitle')
+                },
+                ptm('decadeTitle')
+            );
+
+            if (currentView === 'year') {
+                const decadeTitleTextProps = mergeProps(ptm('decadeTitleText'));
+
+                return <span {...decadeTitleProps}>{props.decadeTemplate ? props.decadeTemplate(years) : <span {...decadeTitleTextProps}>{`${yearPickerValues()[0]} - ${yearPickerValues()[yearPickerValues().length - 1]}`}</span>}</span>;
+            }
+
+            return null;
+        };
+
+        const createTitle = (monthMetaData, index) => {
+            const month = createTitleMonthElement(monthMetaData.month, index);
+            const year = createTitleYearElement(monthMetaData.year);
+            const decade = createTitleDecadeElement();
+            const titleProps = mergeProps(
+                {
+                    className: cx('title')
+                },
+                ptm('title')
+            );
+            const showMonthAfterYear = localeOption('showMonthAfterYear', props.locale);
+
+            return (
+                <div {...titleProps}>
+                    {showMonthAfterYear ? year : month}
+                    {showMonthAfterYear ? month : year}
+                    {decade}
+                </div>
+            );
+        };
+
+        const createDayNames = (weekDays) => {
+            const weekDayProps = mergeProps(ptm('weekDay'));
+            const tableHeaderCellProps = mergeProps(
+                {
+                    scope: 'col'
+                },
+                ptm('tableHeaderCell')
+            );
+            const dayNames = weekDays.map((weekDay, index) => (
+                <th {...tableHeaderCellProps} key={`${weekDay}-${index}`}>
+                    <span {...weekDayProps}>{weekDay}</span>
+                </th>
+            ));
+
+            if (props.showWeek) {
+                const weekHeaderProps = mergeProps(
+                    {
+                        scope: 'col',
+                        className: cx('weekHeader'),
+                        'data-p-disabled': props.showWeek
+                    },
+                    ptm('weekHeader', {
+                        context: {
+                            disabled: props.showWeek
+                        }
+                    })
+                );
+
+                const weekLabel = mergeProps(ptm('weekLabel'));
+
+                const weekHeader = (
+                    <th {...weekHeaderProps} key="wn">
+                        <span {...weekLabel}>{localeOption('weekHeader', props.locale)}</span>
+                    </th>
+                );
+
+                return [weekHeader, ...dayNames];
+            }
+
+            return dayNames;
+        };
+
+        const createDateCellContent = (date, className, groupIndex) => {
+            const content = props.dateTemplate ? props.dateTemplate(date) : date.day;
+
+            const selected = isSelected(date);
+
+            const dayLabelProps = mergeProps(
+                {
+                    className: cx('dayLabel', { className }),
+                    'aria-selected': selected,
+                    'aria-disabled': !date.selectable,
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: (e) => onDateSelect(e, date),
+                    onKeyDown: (e) => onDateCellKeydown(e, date, groupIndex),
+                    'data-p-highlight': selected,
+                    'data-p-disabled': !date.selectable
+                },
+                ptm('dayLabel', {
+                    context: {
+                        selected: selected,
+                        disabled: !date.selectable
+                    }
+                })
+            );
+
+            return (
+                <span {...dayLabelProps}>
+                    {content}
+                    {selected && <div aria-live="polite" className="p-hidden-accessible" data-p-hidden-accessible={true} pt={ptm('hiddenSelectedDay')} />}
+                </span>
+            );
+        };
+
+        const createWeek = (weekDates, weekNumber, groupIndex) => {
+            const week = weekDates.map((date) => {
+                const selected = isSelected(date);
+                const dateClassName = classNames({ 'p-highlight': selected, 'p-disabled': !date.selectable });
+                const content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex);
+                const formattedValue = formatDate(new Date(date.year, date.month, date.day), getDateFormat());
+
+                const dayProps = mergeProps(
+                    {
+                        className: cx('day', { date }),
+                        'aria-label': formattedValue,
+                        'data-p-today': date.today,
+                        'data-p-other-month': date.otherMonth,
+                        'data-p-day': date.day,
+                        'data-p-month': date.month,
+                        'data-p-year': date.year
+                    },
+                    ptm('day', {
+                        context: {
+                            date,
+                            today: date.today,
+                            otherMonth: date.otherMonth
+                        }
+                    })
+                );
+
+                return (
+                    <td {...dayProps} key={date.day}>
+                        {content}
+                    </td>
+                );
+            });
+
+            if (props.showWeek) {
+                const weekNumberProps = mergeProps(
+                    {
+                        className: cx('weekNumber')
+                    },
+                    ptm('weekNumber')
+                );
+
+                const weekLabelContainerProps = mergeProps(
+                    {
+                        className: cx('weekLabelContainer'),
+                        'data-p-disabled': props.showWeek
+                    },
+                    ptm('weekLabelContainer', {
+                        context: {
+                            disabled: props.showWeek
+                        }
+                    })
+                );
+
+                const weekNumberCell = (
+                    <td {...weekNumberProps} key={'wn' + weekNumber}>
+                        <span {...weekLabelContainerProps}>{weekNumber}</span>
+                    </td>
+                );
+
+                return [weekNumberCell, ...week];
+            }
+
+            return week;
+        };
+
+        const createDates = (monthMetaData, groupIndex) => {
+            const tableBodyRowProps = mergeProps(ptm('tableBodyRowProps'));
+
+            return monthMetaData.dates.map((weekDates, index) => (
+                <tr {...tableBodyRowProps} key={index}>
+                    {createWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex)}
+                </tr>
+            ));
+        };
+
+        const createDateViewGrid = (monthMetaData, weekDays, groupIndex) => {
+            const dayNames = createDayNames(weekDays);
+            const dates = createDates(monthMetaData, groupIndex);
+            const containerProps = mergeProps(
+                {
+                    className: cx('container')
+                },
+                ptm('container')
+            );
+            const tableProps = mergeProps(
+                {
+                    role: 'grid',
+                    className: cx('table')
+                },
+                ptm('table')
+            );
+            const tableHeaderProps = mergeProps(ptm('tableHeader'));
+            const tableHeaderRowProps = mergeProps(ptm('tableHeaderRow'));
+            const tableBodyProps = mergeProps(ptm('tableBody'));
+
+            return (
+                currentView === 'date' && (
+                    <div {...containerProps} key={UniqueComponentId('calendar_container_')}>
+                        <table {...tableProps}>
+                            <thead {...tableHeaderProps}>
+                                <tr {...tableHeaderRowProps}>{dayNames}</tr>
+                            </thead>
+                            <tbody {...tableBodyProps}>{dates}</tbody>
+                        </table>
+                    </div>
+                )
+            );
+        };
+
+        const createMonth = (monthMetaData, index) => {
+            const weekDays = createWeekDaysMeta();
+            const backwardNavigator = createBackwardNavigator(index === 0);
+            const forwardNavigator = createForwardNavigator(props.numberOfMonths === 1 || index === props.numberOfMonths - 1);
+            const title = createTitle(monthMetaData, index);
+
+            const dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
+            const header = props.headerTemplate ? props.headerTemplate() : null;
+            const monthKey = monthMetaData.month + '-' + monthMetaData.year;
+            const groupProps = mergeProps(
+                {
+                    className: cx('group')
+                },
+                ptm('group')
+            );
+
+            const headerProps = mergeProps(
+                {
+                    className: cx('header')
+                },
+                ptm('header')
+            );
+
+            return (
+                <div {...groupProps} key={monthKey}>
+                    <div {...headerProps} key={index}>
+                        {header}
+                        {backwardNavigator}
+                        {title}
+                        {forwardNavigator}
+                    </div>
+                    {dateViewGrid}
+                </div>
+            );
+        };
+
+        const createMonths = (monthsMetaData) => {
+            const groups = monthsMetaData.map(createMonth);
+
+            const groupContainerProps = mergeProps(
+                {
+                    className: cx('groupContainer')
+                },
+                ptm('groupContainer')
+            );
+
+            return <div {...groupContainerProps}>{groups}</div>;
+        };
+
+        const createDateView = () => {
+            const viewDate = getViewDate();
+            const monthsMetaData = createMonthsMeta(viewDate.getMonth(), viewDate.getFullYear());
+            const months = createMonths(monthsMetaData);
+
+            return months;
+        };
+
+        const monthPickerValues = () => {
+            let monthPickerValues = [];
+            const monthNamesShort = localeOption('monthNamesShort', props.locale);
+
+            for (let i = 0; i <= 11; i++) {
+                monthPickerValues.push(monthNamesShort[i]);
+            }
+
+            return monthPickerValues;
+        };
+
+        const yearPickerValues = () => {
+            let yearPickerValues = [];
+            let base = currentYear - (currentYear % 10);
+
+            for (let i = 0; i < 10; i++) {
+                yearPickerValues.push(base + i);
+            }
+
+            return yearPickerValues;
+        };
+
+        const createMonthYearView = () => {
+            const backwardNavigator = createBackwardNavigator(true);
+            const forwardNavigator = createForwardNavigator(true);
+            const yearElement = createTitleYearElement(getViewDate().getFullYear());
+            const decade = createTitleDecadeElement();
+            const groupContainerProps = mergeProps(
+                {
+                    className: cx('groupContainer')
+                },
+                ptm('groupContainer')
+            );
+
+            const groupProps = mergeProps(
+                {
+                    className: cx('group')
+                },
+                ptm('group')
+            );
+
+            const headerProps = mergeProps(
+                {
+                    className: cx('header')
+                },
+                ptm('header')
+            );
+
+            const titleProps = mergeProps(
+                {
+                    className: cx('title')
+                },
+                ptm('title')
+            );
+
+            return (
+                <>
+                    <div {...groupContainerProps}>
+                        <div {...groupProps}>
+                            <div {...headerProps}>
+                                {backwardNavigator}
+                                <div {...titleProps}>
+                                    {yearElement}
+                                    {decade}
+                                </div>
+                                {forwardNavigator}
+                            </div>
+                        </div>
+                    </div>
+                </>
+            );
+        };
+
+        const createDatePicker = () => {
+            if (!props.timeOnly) {
+                if (props.view === 'date') {
+                    return createDateView();
+                }
+
+                return createMonthYearView();
+            }
+
+            return null;
+        };
+
+        const incrementIconProps = mergeProps(ptm('incrementIcon'));
+        const decrementIconProps = mergeProps(ptm('decrementIcon'));
+        const incrementIcon = IconUtils.getJSXIcon(props.incrementIcon || <ChevronUpIcon {...incrementIconProps} />, { ...incrementIconProps }, { props });
+        const decrementIcon = IconUtils.getJSXIcon(props.decrementIcon || <ChevronDownIcon {...decrementIconProps} />, { ...decrementIconProps }, { props });
+
+        const createHourPicker = () => {
+            const currentTime = getCurrentDateTime();
+            const minute = doStepMinute(currentTime.getMinutes());
+            let hour = currentTime.getHours();
+
+            // #3770 account for step minutes rolling to next hour
+            hour = minute > 59 ? hour + 1 : hour;
+
+            if (props.hourFormat === '12') {
+                if (hour === 0) {
+                    hour = 12;
+                } else if (hour > 11 && hour !== 12) {
+                    hour = hour - 12;
+                }
+            }
+
+            const hourProps = mergeProps(ptm('hour'));
+            const { nextHour, prevHour } = localeOptions(props.locale);
+            const hourDisplay = hour < 10 ? '0' + hour : hour;
+            const hourPickerProps = mergeProps(
+                {
+                    className: cx('hourPicker')
+                },
+                ptm('hourPicker')
+            );
+
+            const incrementButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('incrementButton'),
+                    'aria-label': nextHour,
+                    onMouseDown: (e) => onTimePickerElementMouseDown(e, 0, 1),
+                    onMouseUp: onTimePickerElementMouseUp,
+                    onMouseLeave: onTimePickerElementMouseLeave,
+                    onKeyDown: (e) => onPickerKeyDown(e, 0, 1),
+                    onKeyUp: onPickerKeyUp
+                },
+                ptm('incrementButton')
+            );
+
+            const decrementButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('decrementButton'),
+                    'aria-label': prevHour,
+                    onMouseDown: (e) => onTimePickerElementMouseDown(e, 0, -1),
+                    onMouseUp: onTimePickerElementMouseUp,
+                    onMouseLeave: onTimePickerElementMouseLeave,
+                    onKeyDown: (e) => onPickerKeyDown(e, 0, -1),
+                    onKeyUp: onPickerKeyUp
+                },
+                ptm('decrementButton')
+            );
+
+            return (
+                <div {...hourPickerProps}>
+                    <button {...incrementButtonProps}>
+                        {incrementIcon}
+                        <Ripple />
+                    </button>
+                    <span {...hourProps}>{hourDisplay}</span>
+                    <button {...decrementButtonProps}>
+                        {decrementIcon}
+                        <Ripple />
+                    </button>
+                </div>
+            );
+        };
+
+        const createMinutePicker = () => {
+            const currentTime = getCurrentDateTime();
+            let minute = doStepMinute(currentTime.getMinutes());
+
+            minute = minute > 59 ? minute - 60 : minute;
+            const minuteProps = mergeProps(ptm('minute'));
+            const { nextMinute, prevMinute } = localeOptions(props.locale);
+            const minuteDisplay = minute < 10 ? '0' + minute : minute;
+            const minutePickerProps = mergeProps(
+                {
+                    className: cx('minutePicker')
+                },
+                ptm('minutePicker')
+            );
+
+            const incrementButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('incrementButton'),
+                    'aria-label': nextMinute,
+                    onMouseDown: (e) => onTimePickerElementMouseDown(e, 1, 1),
+                    onMouseUp: onTimePickerElementMouseUp,
+                    onMouseLeave: onTimePickerElementMouseLeave,
+                    onKeyDown: (e) => onPickerKeyDown(e, 1, 1),
+                    onKeyUp: onPickerKeyUp
+                },
+                ptm('incrementButton')
+            );
+
+            const decrementButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('decrementButton'),
+                    'aria-label': prevMinute,
+                    onMouseDown: (e) => onTimePickerElementMouseDown(e, 1, -1),
+                    onMouseUp: onTimePickerElementMouseUp,
+                    onMouseLeave: onTimePickerElementMouseLeave,
+                    onKeyDown: (e) => onPickerKeyDown(e, 1, -1),
+                    onKeyUp: onPickerKeyUp
+                },
+                ptm('decrementButton')
+            );
+
+            return (
+                <div {...minutePickerProps}>
+                    <button {...incrementButtonProps}>
+                        {incrementIcon}
+                        <Ripple />
+                    </button>
+                    <span {...minuteProps}>{minuteDisplay}</span>
+                    <button {...decrementButtonProps}>
+                        {decrementIcon}
+                        <Ripple />
+                    </button>
+                </div>
+            );
+        };
+
+        const createSecondPicker = () => {
+            if (props.showSeconds) {
+                const currentTime = getCurrentDateTime();
+                const { nextSecond, prevSecond } = localeOptions(props.locale);
+                const secondProps = mergeProps(ptm('second'));
+                const second = currentTime.getSeconds();
+                const secondDisplay = second < 10 ? '0' + second : second;
+                const secondPickerProps = mergeProps(
+                    {
+                        className: cx('secondPicker')
+                    },
+                    ptm('secondPicker')
+                );
+
+                const incrementButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('incrementButton'),
+                        'aria-label': nextSecond,
+                        onMouseDown: (e) => onTimePickerElementMouseDown(e, 2, 1),
+                        onMouseUp: onTimePickerElementMouseUp,
+                        onMouseLeave: onTimePickerElementMouseLeave,
+                        onKeyDown: (e) => onPickerKeyDown(e, 2, 1),
+                        onKeyUp: onPickerKeyUp
+                    },
+                    ptm('incrementButton')
+                );
+
+                const decrementButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('decrementButton'),
+                        'aria-label': prevSecond,
+                        onMouseDown: (e) => onTimePickerElementMouseDown(e, 2, -1),
+                        onMouseUp: onTimePickerElementMouseUp,
+                        onMouseLeave: onTimePickerElementMouseLeave,
+                        onKeyDown: (e) => onPickerKeyDown(e, 2, -1),
+                        onKeyUp: onPickerKeyUp
+                    },
+                    ptm('decrementButton')
+                );
+
+                return (
+                    <div {...secondPickerProps}>
+                        <button {...incrementButtonProps}>
+                            {incrementIcon}
+                            <Ripple />
+                        </button>
+                        <span {...secondProps}>{secondDisplay}</span>
+                        <button {...decrementButtonProps}>
+                            {decrementIcon}
+                            <Ripple />
+                        </button>
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createMiliSecondPicker = () => {
+            if (props.showMillisec) {
+                const currentTime = getCurrentDateTime();
+                const { nextMilliSecond, prevMilliSecond } = localeOptions(props.locale);
+                const millisecondProps = mergeProps(ptm('millisecond'));
+                const millisecond = currentTime.getMilliseconds();
+                const millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
+                const millisecondPickerProps = mergeProps(
+                    {
+                        className: cx('millisecondPicker')
+                    },
+                    ptm('millisecondPicker')
+                );
+
+                const incrementButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('incrementButton'),
+                        'aria-label': nextMilliSecond,
+                        onMouseDown: (e) => onTimePickerElementMouseDown(e, 3, 1),
+                        onMouseUp: onTimePickerElementMouseUp,
+                        onMouseLeave: onTimePickerElementMouseLeave,
+                        onKeyDown: (e) => onPickerKeyDown(e, 3, 1),
+                        onKeyUp: onPickerKeyUp
+                    },
+                    ptm('incrementButton')
+                );
+
+                const decrementButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('decrementButton'),
+                        'aria-label': prevMilliSecond,
+                        onMouseDown: (e) => onTimePickerElementMouseDown(e, 3, -1),
+                        onMouseUp: onTimePickerElementMouseUp,
+                        onMouseLeave: onTimePickerElementMouseLeave,
+                        onKeyDown: (e) => onPickerKeyDown(e, 3, -1),
+                        onKeyUp: onPickerKeyUp
+                    },
+                    ptm('decrementButton')
+                );
+
+                return (
+                    <div {...millisecondPickerProps}>
+                        <button {...incrementButtonProps}>
+                            {incrementIcon}
+                            <Ripple />
+                        </button>
+                        <span {...millisecondProps}>{millisecondDisplay}</span>
+                        <button {...decrementButtonProps}>
+                            {decrementIcon}
+                            <Ripple />
+                        </button>
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createAmPmPicker = () => {
+            if (props.hourFormat === '12') {
+                const currentTime = getCurrentDateTime();
+                const { am, pm } = localeOptions(props.locale);
+                const hour = currentTime.getHours();
+                const display = hour > 11 ? 'PM' : 'AM';
+                const ampmProps = mergeProps(ptm('ampm'));
+                const ampmPickerProps = mergeProps(
+                    {
+                        className: cx('ampmPicker')
+                    },
+                    ptm('ampmPicker')
+                );
+
+                const incrementButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('incrementButton'),
+                        'aria-label': am,
+                        onClick: (e) => toggleAmPm(e)
+                    },
+                    ptm('incrementButton')
+                );
+
+                const decrementButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('decrementButton'),
+                        'aria-label': pm,
+                        onClick: (e) => toggleAmPm(e)
+                    },
+                    ptm('decrementButton')
+                );
+
+                return (
+                    <div {...ampmPickerProps}>
+                        <button {...incrementButtonProps}>
+                            {incrementIcon}
+                            <Ripple />
+                        </button>
+                        <span {...ampmProps}>{display}</span>
+                        <button {...decrementButtonProps}>
+                            {decrementIcon}
+                            <Ripple />
+                        </button>
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createSeparator = (separator) => {
+            const separatorContainerProps = mergeProps(
+                {
+                    className: cx('separatorContainer')
+                },
+                ptm('separatorContainer')
+            );
+
+            const separatorProps = mergeProps(ptm('separator'));
+
+            return (
+                <div {...separatorContainerProps}>
+                    <span {...separatorProps}>{separator}</span>
+                </div>
+            );
+        };
+
+        const createTimePicker = () => {
+            if ((props.showTime || props.timeOnly) && currentView === 'date') {
+                const timePickerProps = mergeProps(
+                    {
+                        className: cx('timePicker')
+                    },
+                    ptm('timePicker')
+                );
+
+                return (
+                    <div {...timePickerProps}>
+                        {createHourPicker()}
+                        {createSeparator(':')}
+                        {createMinutePicker()}
+                        {props.showSeconds && createSeparator(':')}
+                        {createSecondPicker()}
+                        {props.showMillisec && createSeparator('.')}
+                        {createMiliSecondPicker()}
+                        {props.hourFormat === '12' && createSeparator(':')}
+                        {createAmPmPicker()}
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createInputElement = () => {
+            if (!props.inline) {
+                return (
+                    <InputText
+                        ref={inputRef}
+                        id={props.inputId}
+                        name={props.name}
+                        type="text"
+                        role="combobox"
+                        className={classNames(props.inputClassName, cx('input', { context }))}
+                        style={props.inputStyle}
+                        readOnly={props.readOnlyInput}
+                        disabled={props.disabled}
+                        required={props.required}
+                        autoComplete="off"
+                        placeholder={props.placeholder}
+                        tabIndex={props.tabIndex}
+                        onInput={onUserInput}
+                        onFocus={onInputFocus}
+                        onBlur={onInputBlur}
+                        onKeyDown={onInputKeyDown}
+                        aria-expanded={overlayVisibleState}
+                        aria-autocomplete="none"
+                        aria-haspopup="dialog"
+                        aria-controls={panelId}
+                        aria-labelledby={props.ariaLabelledBy}
+                        aria-label={props.ariaLabel}
+                        inputMode={props.inputMode}
+                        tooltip={props.tooltip}
+                        tooltipOptions={props.tooltipOptions}
+                        pt={ptm('input')}
+                        unstyled={props.unstyled}
+                        __parentMetadata={{ parent: metaData }}
+                    />
+                );
+            }
+
+            return null;
+        };
+
+        const createButton = () => {
+            if (props.showIcon) {
+                return (
+                    <Button
+                        type="button"
+                        icon={props.icon || <CalendarIcon />}
+                        onClick={onButtonClick}
+                        tabIndex="-1"
+                        disabled={props.disabled}
+                        aria-haspopup="dialog"
+                        aria-label={localeOption('chooseDate', props.locale)}
+                        aria-expanded={overlayVisibleState}
+                        aria-controls={panelId}
+                        className={cx('dropdownButton')}
+                        pt={ptm('dropdownButton')}
+                        __parentMetadata={{ parent: metaData }}
+                    />
+                );
+            }
+
+            return null;
+        };
+
+        const createContent = () => {
+            const input = createInputElement();
+            const button = createButton();
+
+            if (props.iconPos === 'left') {
+                return (
+                    <>
+                        {button}
+                        {input}
+                    </>
+                );
+            }
+
+            return (
+                <>
+                    {input}
+                    {button}
+                </>
+            );
+        };
+
+        const isPastMaxDateWithBuffer = (bufferInSeconds = 10) => {
+            const now = new Date();
+            const maxDate = props.maxDate;
+
+            return maxDate < now && Math.abs((now.getTime() - maxDate.getTime()) / 1000) > bufferInSeconds;
+        };
+
+        const createButtonBar = () => {
+            if (props.showButtonBar) {
+                const { today, clear, now } = localeOptions(props.locale);
+                const nowDate = new Date();
+                const isHidden = (props.minDate && props.minDate > nowDate) || (props.maxDate && isPastMaxDateWithBuffer());
+                const buttonbarProps = mergeProps(
+                    {
+                        className: cx('buttonbar')
+                    },
+                    ptm('buttonbar')
+                );
+
+                return (
+                    <div {...buttonbarProps}>
+                        <Button
+                            type="button"
+                            label={props.showTime ? now : today}
+                            onClick={onTodayButtonClick}
+                            onKeyDown={(e) => onContainerButtonKeydown(e)}
+                            className={classNames(props.todayButtonClassName, cx('todayButton'))}
+                            pt={ptm('todayButton')}
+                            style={isHidden ? { visibility: 'hidden' } : undefined}
+                        />
+                        <Button type="button" label={clear} onClick={onClearButtonClick} onKeyDown={(e) => onContainerButtonKeydown(e)} className={classNames(props.clearButtonClassName, cx('clearButton'))} pt={ptm('clearButton')} />
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createFooter = () => {
+            if (props.footerTemplate) {
+                const content = props.footerTemplate();
+                const footerProps = mergeProps(
+                    {
+                        className: cx('footer')
+                    },
+                    ptm('footer')
+                );
+
+                return <div {...footerProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const createMonthPicker = () => {
+            if (currentView === 'month') {
+                const monthPickerProps = mergeProps(
+                    {
+                        className: cx('monthPicker')
+                    },
+                    ptm('monthPicker')
+                );
+
+                return (
+                    <div {...monthPickerProps}>
+                        {monthPickerValues().map((m, i) => {
+                            const selected = isMonthSelected(i);
+                            const monthProps = mergeProps(
+                                {
+                                    className: cx('month', { isMonthSelected, isMonthYearDisabled, i, currentYear }),
+                                    onClick: (event) => onMonthSelect(event, i),
+                                    onKeyDown: (event) => onMonthCellKeydown(event, i),
+                                    'data-p-disabled': isMonthYearDisabled(i, currentYear),
+                                    'data-p-highlight': selected
+                                },
+                                ptm('month', {
+                                    context: {
+                                        month: m,
+                                        monthIndex: i,
+                                        selected: selected,
+                                        disabled: isMonthYearDisabled(i, currentYear)
+                                    }
+                                })
+                            );
+
+                            return (
+                                <span {...monthProps} key={`month${i + 1}`}>
+                                    {m}
+                                    {selected && (
+                                        <div aria-live="polite" className="p-hidden-accessible" data-p-hidden-accessible={true} pt={ptm('hiddenMonth')}>
+                                            {m}
+                                        </div>
+                                    )}
+                                </span>
+                            );
+                        })}
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createYearPicker = () => {
+            if (currentView === 'year') {
+                const yearPickerProps = mergeProps(
+                    {
+                        className: cx('yearPicker')
+                    },
+                    ptm('yearPicker')
+                );
+
+                return (
+                    <div {...yearPickerProps}>
+                        {yearPickerValues().map((y, i) => {
+                            const selected = isYearSelected(y);
+
+                            const yearProps = mergeProps(
+                                {
+                                    className: cx('year', { isYearSelected, isMonthYearDisabled, y }),
+                                    onClick: (event) => onYearSelect(event, y),
+                                    onKeyDown: (event) => onYearCellKeydown(event, y),
+                                    'data-p-highlight': isYearSelected(y),
+                                    'data-p-disabled': isMonthYearDisabled(-1, y)
+                                },
+                                ptm('year', {
+                                    context: {
+                                        year: y,
+                                        yearIndex: i,
+                                        selected,
+                                        disabled: isMonthYearDisabled(-1, y)
+                                    }
+                                })
+                            );
+
+                            return (
+                                <span {...yearProps} key={`year${i + 1}`}>
+                                    {y}
+                                    {selected && (
+                                        <div aria-live="polite" className="p-hidden-accessible" data-p-hidden-accessible={true} pt={ptm('hiddenYear')}>
+                                            {y}
+                                        </div>
+                                    )}
+                                </span>
+                            );
+                        })}
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const panelClassName = classNames('p-datepicker p-component', props.panelClassName, {
+            'p-datepicker-inline': props.inline,
+            'p-disabled': props.disabled,
+            'p-datepicker-timeonly': props.timeOnly,
+            'p-datepicker-multiple-month': props.numberOfMonths > 1,
+            'p-datepicker-monthpicker': currentView === 'month',
+            'p-datepicker-touch-ui': props.touchUI,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        });
+        const content = createContent();
+        const datePicker = createDatePicker();
+        const timePicker = createTimePicker();
+        const buttonBar = createButtonBar();
+        const footer = createFooter();
+        const monthPicker = createMonthPicker();
+        const yearPicker = createYearPicker();
+        const isFilled = DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== '';
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                className: classNames(props.className, cx('root', { focusedState, isFilled, panelVisible: visible })),
+                style: props.style
+            },
+            CalendarBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <span ref={elementRef} {...rootProps}>
+                {content}
+                <CalendarPanel
+                    hostName="Calendar"
+                    id={panelId}
+                    locale={props.locale}
+                    ref={overlayRef}
+                    className={panelClassName}
+                    style={props.panelStyle}
+                    appendTo={props.appendTo}
+                    inline={props.inline}
+                    onClick={onPanelClick}
+                    onMouseUp={onPanelMouseUp}
+                    in={visible}
+                    onEnter={onOverlayEnter}
+                    onEntered={onOverlayEntered}
+                    onExit={onOverlayExit}
+                    onExited={onOverlayExited}
+                    transitionOptions={props.transitionOptions}
+                    ptm={ptm}
+                    cx={cx}
+                >
+                    {datePicker}
+                    {timePicker}
+                    {monthPicker}
+                    {yearPicker}
+                    {buttonBar}
+                    {footer}
+                </CalendarPanel>
+            </span>
+        );
+    })
+);
+
+Calendar.displayName = 'Calendar';
diff --git a/components/lib/calendar/Calendar.spec.js b/components/lib/calendar/Calendar.spec.js
new file mode 100644
index 0000000000..4464570784
--- /dev/null
+++ b/components/lib/calendar/Calendar.spec.js
@@ -0,0 +1,93 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import { PrimeReactProvider } from '../api/Api';
+import { Calendar } from './Calendar';
+
+describe('Calendar', () => {
+    function getAllDatesOfYear(year) {
+        let startDate = new Date(year, 0, 1);
+        let endDate = new Date(year, 11, 31);
+
+        let dates = [];
+        let currentDate = startDate;
+
+        while (currentDate <= endDate) {
+            dates.push(new Date(currentDate));
+            currentDate.setDate(currentDate.getDate() + 1);
+        }
+
+        return dates;
+    }
+
+    test('When the days of the year are disabled, then the years and month should be disabled', async () => {
+        const { container } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="year" disabledDates={getAllDatesOfYear(2023)} />
+            </PrimeReactProvider>
+        );
+
+        const years = container.querySelectorAll('.p-yearpicker-year');
+
+        for (const year of years) {
+            if (year.innerHTML.startsWith('2023')) {
+                expect(year).toHaveAttribute('data-p-disabled', 'true');
+                expect(year).toHaveClass('p-disabled');
+            } else {
+                expect(year).toHaveAttribute('data-p-disabled', 'false');
+                expect(year).not.toHaveClass('p-disabled');
+            }
+        }
+
+        const { container: monthContainer } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="month" disabledDates={getAllDatesOfYear(2023)} />
+            </PrimeReactProvider>
+        );
+
+        const months = monthContainer.querySelectorAll('.p-monthpicker-month');
+
+        for (const month of months) {
+            expect(month).toHaveAttribute('data-p-disabled', 'true');
+            expect(month).toHaveClass('p-disabled');
+        }
+    });
+
+    test('If any day of the month is not disabled, then both the year and month can be selected', async () => {
+        const disabledDates = getAllDatesOfYear(2023);
+
+        // January and December are not disabled.
+        disabledDates.shift();
+        disabledDates.pop();
+
+        const { container: yearContainer } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="year" disabledDates={disabledDates} />
+            </PrimeReactProvider>
+        );
+        const years = yearContainer.querySelectorAll('.p-yearpicker-year');
+
+        for (const year of years) {
+            expect(year).toHaveAttribute('data-p-disabled', 'false');
+            expect(year).not.toHaveClass('p-disabled');
+        }
+
+        // month
+        const { container: monthContainer } = render(
+            <PrimeReactProvider>
+                <Calendar value={new Date(2023, 11, 15)} inline view="month" disabledDates={disabledDates} />
+            </PrimeReactProvider>
+        );
+
+        const months = monthContainer.querySelectorAll('.p-monthpicker-month');
+
+        Array.from(months).forEach((month, index) => {
+            if (index === 0 || index === 11) {
+                expect(month).toHaveAttribute('data-p-disabled', 'false');
+                expect(month).not.toHaveClass('p-disabled');
+            } else {
+                expect(month).toHaveAttribute('data-p-disabled', 'true');
+                expect(month).toHaveClass('p-disabled');
+            }
+        });
+    });
+});
diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js
new file mode 100644
index 0000000000..d06bd90367
--- /dev/null
+++ b/components/lib/calendar/CalendarBase.js
@@ -0,0 +1,339 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-calendar {
+        position: relative;
+        display: inline-flex;
+        max-width: 100%;
+    }
+
+    .p-calendar .p-inputtext {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-calendar-w-btn-right .p-inputtext {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .p-calendar-w-btn-right .p-datepicker-trigger {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .p-calendar-w-btn-left .p-inputtext {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .p-calendar-w-btn-left .p-datepicker-trigger {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    /* Fluid */
+    .p-fluid .p-calendar {
+        display: flex;
+    }
+
+    .p-fluid .p-calendar .p-inputtext {
+        width: 1%;
+    }
+
+    /* Datepicker */
+    .p-calendar .p-datepicker {
+        min-width: 100%;
+    }
+
+    .p-datepicker {
+        width: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .p-datepicker-inline {
+        display: inline-block;
+        position: static;
+        overflow-x: auto;
+    }
+
+    /* Header */
+    .p-datepicker-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .p-datepicker-header .p-datepicker-title {
+        margin: 0 auto;
+    }
+
+    .p-datepicker-prev,
+    .p-datepicker-next {
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Multiple Month DatePicker */
+    .p-datepicker-multiple-month .p-datepicker-group-container {
+        display: flex;
+    }
+
+    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
+        flex: 1 1 auto;
+    }
+
+    /* Multiple Month DatePicker */
+    .p-datepicker-multiple-month .p-datepicker-group-container {
+        display: flex;
+    }
+
+    /* DatePicker Table */
+    .p-datepicker table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .p-datepicker td > span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Month Picker */
+    .p-monthpicker-month {
+        width: 33.3%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /*  Button Bar */
+    .p-datepicker-buttonbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    /* Time Picker */
+    .p-timepicker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .p-timepicker button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-timepicker > div {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+    }
+
+    /* Touch UI */
+    .p-datepicker-touch-ui,
+    .p-calendar .p-datepicker-touch-ui {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        min-width: 80vw;
+        transform: translate(-50%, -50%);
+    }
+
+    /* Year Picker */
+    .p-yearpicker-year {
+        width: 50%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, focusedState, isFilled, panelVisible }) =>
+        classNames('p-calendar p-component p-inputwrapper', {
+            [`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon,
+            'p-calendar-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-calendar-timeonly': props.timeOnly,
+            'p-inputwrapper-filled': props.value || isFilled,
+            'p-inputwrapper-focus': focusedState,
+            'p-focus': focusedState || panelVisible
+        }),
+    input: ({ props, context }) =>
+        classNames('p-inputtext p-component', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    dropdownButton: 'p-datepicker-trigger',
+    buttonbar: 'p-datepicker-buttonbar',
+    todayButton: 'p-button-text',
+    clearButton: 'p-button-text',
+    footer: 'p-datepicker-footer',
+    yearPicker: 'p-yearpicker',
+    year: ({ isYearSelected, y, isMonthYearDisabled }) => classNames('p-yearpicker-year', { 'p-highlight': isYearSelected(y), 'p-disabled': isMonthYearDisabled(-1, y) }),
+    monthPicker: 'p-monthpicker',
+    month: ({ isMonthSelected, isMonthYearDisabled, i, currentYear }) => classNames('p-monthpicker-month', { 'p-highlight': isMonthSelected(i), 'p-disabled': isMonthYearDisabled(i, currentYear) }),
+    hourPicker: 'p-hour-picker',
+    secondPicker: 'p-second-picker',
+    minutePicker: 'p-minute-picker',
+    millisecondPicker: 'p-millisecond-picker',
+    ampmPicker: 'p-ampm-picker',
+    separatorContainer: 'p-separator',
+    dayLabel: ({ className }) => className,
+    day: ({ date }) => classNames({ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }),
+    panel: ({ panelClassName }) => panelClassName,
+    previousIcon: 'p-datepicker-prev-icon',
+    previousButton: 'p-datepicker-prev',
+    nextIcon: 'p-datepicker-next-icon',
+    nextButton: 'p-datepicker-next',
+    incrementButton: 'p-link',
+    decrementButton: 'p-link',
+    title: 'p-datepicker-title',
+    timePicker: 'p-timepicker',
+    monthTitle: 'p-datepicker-month p-link',
+    yearTitle: 'p-datepicker-year p-link',
+    decadeTitle: 'p-datepicker-decade',
+    header: 'p-datepicker-header',
+    groupContainer: 'p-datepicker-group-container',
+    group: 'p-datepicker-group',
+    select: ({ props }) => (props.monthNavigator && props.view !== 'month' ? 'p-datepicker-month' : props.yearNavigator ? 'p-datepicker-year' : undefined),
+    weekHeader: 'p-datepicker-weekheader p-disabled',
+    weekNumber: 'p-datepicker-weeknumber',
+    weekLabelContainer: 'p-disabled',
+    container: 'p-datepicker-calendar-container',
+    table: 'p-datepicker-calendar',
+    transition: 'p-connected-overlay'
+};
+
+export const CalendarBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Calendar',
+        appendTo: null,
+        ariaLabelledBy: null,
+        ariaLabel: null,
+        autoZIndex: true,
+        autoFocus: false,
+        baseZIndex: 0,
+        className: null,
+        clearButtonClassName: 'p-button-secondary',
+        dateFormat: null,
+        dateTemplate: null,
+        decadeTemplate: null,
+        decrementIcon: null,
+        disabled: false,
+        disabledDates: null,
+        disabledDays: null,
+        enabledDates: null,
+        footerTemplate: null,
+        formatDateTime: null,
+        headerTemplate: null,
+        hideOnDateTimeSelect: false,
+        hideOnRangeSelection: false,
+        hourFormat: '24',
+        icon: null,
+        iconPos: 'right',
+        id: null,
+        incrementIcon: null,
+        inline: false,
+        inputClassName: null,
+        inputId: null,
+        inputMode: 'none',
+        inputRef: null,
+        inputStyle: null,
+        variant: null,
+        invalid: false,
+        keepInvalid: false,
+        locale: null,
+        mask: null,
+        maskSlotChar: '_',
+        maxDate: null,
+        maxDateCount: null,
+        minDate: null,
+        monthNavigator: false,
+        monthNavigatorTemplate: null,
+        name: null,
+        nextIcon: null,
+        numberOfMonths: 1,
+        onBlur: null,
+        onChange: null,
+        onClearButtonClick: null,
+        onFocus: null,
+        onHide: null,
+        onInput: null,
+        onMonthChange: null,
+        onSelect: null,
+        onShow: null,
+        onTodayButtonClick: null,
+        onViewDateChange: null,
+        onVisibleChange: null,
+        panelClassName: null,
+        panelStyle: null,
+        parseDateTime: null,
+        placeholder: null,
+        prevIcon: null,
+        readOnlyInput: false,
+        required: false,
+        selectOtherMonths: false,
+        selectionMode: 'single',
+        shortYearCutoff: '+10',
+        showButtonBar: false,
+        showIcon: false,
+        showMillisec: false,
+        showMinMaxRange: false,
+        showOnFocus: true,
+        showOtherMonths: true,
+        showSeconds: false,
+        showTime: false,
+        showWeek: false,
+        stepHour: 1,
+        stepMillisec: 1,
+        stepMinute: 1,
+        stepSecond: 1,
+        style: null,
+        tabIndex: null,
+        timeOnly: false,
+        todayButtonClassName: 'p-button-secondary',
+        tooltip: null,
+        tooltipOptions: null,
+        touchUI: false,
+        transitionOptions: null,
+        value: null,
+        view: 'date',
+        viewDate: null,
+        visible: false,
+        yearNavigator: false,
+        yearNavigatorTemplate: null,
+        yearRange: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/calendar/CalendarPanel.js b/components/lib/calendar/CalendarPanel.js
new file mode 100644
index 0000000000..64f5f8a788
--- /dev/null
+++ b/components/lib/calendar/CalendarPanel.js
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { localeOption } from '../api/Api';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+
+export const CalendarPanel = React.forwardRef((props, ref) => {
+    const cx = props.cx;
+    const mergeProps = useMergeProps();
+
+    const createElement = () => {
+        const panelProps = mergeProps(
+            {
+                className: cx('panel', { panelClassName: props.className }),
+                style: props.style,
+                role: props.inline ? null : 'dialog',
+                id: props.id,
+                'aria-label': localeOption('chooseDate', props.locale),
+                'aria-modal': props.inline ? null : 'true',
+                onClick: props.onClick,
+                onMouseUp: props.onMouseUp,
+                'data-pr-is-overlay': true
+            },
+            props.ptm('panel', { hostName: props.hostName })
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                in: props.in,
+                timeout: { enter: 120, exit: 100 },
+                options: props.transitionOptions,
+                unmountOnExit: true,
+                onEnter: props.onEnter,
+                onEntered: props.onEntered,
+                onExit: props.onExit,
+                onExited: props.onExited
+            },
+            props.ptm('transition', { hostName: props.hostName })
+        );
+
+        return (
+            <CSSTransition nodeRef={ref} {...transitionProps}>
+                <div ref={ref} {...panelProps}>
+                    {props.children}
+                </div>
+            </CSSTransition>
+        );
+    };
+
+    const element = createElement();
+
+    return props.inline ? element : <Portal element={element} appendTo={props.appendTo} />;
+});
+
+CalendarPanel.displayName = 'CalendarPanel';
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
new file mode 100644
index 0000000000..dc41cbfd33
--- /dev/null
+++ b/components/lib/calendar/calendar.d.ts
@@ -0,0 +1,1048 @@
+/**
+ *
+ * Calendar also known as DatePicker, is a form component to work with dates.
+ *
+ * [Live Demo](https://www.primereact.org/calendar/)
+ *
+ * @module calendar
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent, Nullable } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type CalendarPassThroughType<T> = PassThroughType<T, CalendarPassThroughMethodOptions>;
+export declare type CalendarPassThroughTransitionType = ReactCSSTransitionProps | ((options: CalendarPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CalendarPassThroughMethodOptions {
+    props: CalendarProps;
+    state: CalendarState;
+    context: CalendarContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CalendarProps.pt}
+ */
+export interface CalendarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the InputText component.
+     */
+    input?: CalendarPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    dropdownButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the group container's DOM element.
+     */
+    groupContainer?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the group's DOM element.
+     */
+    group?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    previousButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous icon's DOM element.
+     */
+    previousIcon?: CalendarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the month title's DOM element.
+     */
+    monthTitle?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the year title's DOM element.
+     */
+    yearTitle?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the decade title's DOM element.
+     */
+    decadeTitle?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the decade title text's DOM element.
+     */
+    decadeTitleText?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    nextButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next icon's DOM element.
+     */
+    nextIcon?: CalendarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableElement>>;
+    /**
+     * Uses to pass attributes to the table header's DOM element.
+     */
+    tableHeader?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the table header row's DOM element.
+     */
+    tableHeaderRow?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the week header's DOM element.
+     */
+    weekHeader?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the table header cell's DOM element.
+     */
+    tableHeaderCell?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the week label's DOM element.
+     */
+    weekLabel?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the week day's DOM element.
+     */
+    weekDay?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the table body's DOM element.
+     */
+    tableBody?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the table body row's DOM element.
+     */
+    tableBodyRow?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the week number's DOM element.
+     */
+    weekNumber?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the week label container's DOM element.
+     */
+    weekLabelContainer?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the day's DOM element.
+     */
+    day?: CalendarPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the day label's DOM element.
+     */
+    dayLabel?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the month picker's DOM element.
+     */
+    monthPicker?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the month's DOM element.
+     */
+    month?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the year picker's DOM element.
+     */
+    yearPicker?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the year's DOM element.
+     */
+    year?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the time picker's DOM element.
+     */
+    timePicker?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hour picker's DOM element.
+     */
+    hourPicker?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the increment icon's DOM element.
+     */
+    incrementIcon?: CalendarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the increment button's DOM element.
+     */
+    incrementButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the decrement button's DOM element.
+     */
+    decrementButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the increment icon's DOM element.
+     */
+    decrementIcon?: CalendarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the hour's DOM element.
+     */
+    hour?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separatorc ontainer's DOM element.
+     */
+    separatorContainer?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the minute picker's DOM element.
+     */
+    minutePicker?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the minute's DOM element.
+     */
+    minute?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the second picker's DOM element.
+     */
+    secondPicker?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the second's DOM element.
+     */
+    second?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the ampm picker's DOM element.
+     */
+    ampmPicker?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the ampm's DOM element.
+     */
+    ampm?: CalendarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: CalendarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link CalendarPassThroughType}
+     */
+    todayButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link CalendarPassThroughType}
+     */
+    clearButton?: CalendarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the select's DOM element.
+     */
+    select?: CalendarPassThroughType<React.HTMLAttributes<HTMLSelectElement>>;
+    /**
+     * Uses to pass attributes to the option's DOM element.
+     */
+    option?: CalendarPassThroughType<React.HTMLAttributes<HTMLOptionElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: CalendarPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Calendar component.
+ */
+export interface CalendarState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current viewDate state.
+     */
+    viewDate: Nullable<Date>;
+}
+
+/**
+ * Defines current options in Calendar component.
+ */
+export interface CalendarContext {
+    /**
+     * Current date.
+     */
+    date: string | Date | string[] | Date[] | undefined | null;
+    /**
+     * Current today state of the calendar's day.
+     * @defaultValue false
+     */
+    today: boolean;
+    /**
+     * Current other month state of the calendar's day.
+     */
+    otherMonth: boolean;
+    /**
+     * Current selected state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current disabled state of the calendar's day or month or year.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Current month state.
+     */
+    month: CalendarMonthOptions;
+    /**
+     * Current month index state.
+     */
+    monthIndex: number;
+    /**
+     * Current year state.
+     */
+    year: CalendarYearOptions;
+    /**
+     * Current year index state.
+     */
+    yearIndex: number;
+}
+
+/**
+ * Defines cuurent month options.
+ */
+export interface CalendarMonthOptions {
+    /**
+     * Month value.
+     */
+    value: string;
+    /**
+     * Selectable state of the month.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Defines current year options.
+ */
+export interface CalendarYearOptions {
+    /**
+     * Year value.
+     */
+    value: number;
+    /**
+     * Selectable state of the month.
+     */
+    selectable: boolean;
+}
+
+/**
+ * Custom month change event.
+ * @see {@link CalendarProps.onMonthChange}
+ * @event
+ */
+interface CalendarMonthChangeEvent {
+    /**
+     * The number of month
+     */
+    month: number;
+    /**
+     * The number of year
+     */
+    year: number;
+}
+
+/**
+ * Custom view change event
+ * @see {@link CalendarProps.onViewDateChange}
+ * @event
+ */
+interface CalendarViewChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New date
+     */
+    value: Date;
+}
+
+/**
+ * Custom Select event
+ * @see {@link CalendarProps.onSelect}
+ */
+interface CalendarSelectEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected date
+     */
+    value: Nullable<Date | Date[] | string>;
+}
+
+/**
+ * Custom date template event
+ * @see {@link CalendarProps.dateTemplate}
+ * @event
+ */
+interface CalendarDateTemplateEvent {
+    /**
+     * Current day
+     */
+    day: number;
+    /**
+     * Current month
+     */
+    month: number;
+    /**
+     * Current year
+     */
+    year: number;
+    /**
+     * Whether the date belongs to the other month
+     */
+    otherMonth: boolean;
+    /**
+     * Whether the day is today
+     */
+    today: boolean;
+    /**
+     * Whether the date is selectable
+     */
+    selectable: boolean;
+}
+
+/**
+ * Custom visible change event
+ * @see {@link CalendarProps.onVisibleChange}
+ * @event
+ */
+interface CalendarVisibleChangeEvent {
+    /**
+     * Whether the overlay is opened.
+     */
+    visible: boolean;
+    /**
+     * The type of visible action when the overlay is visible/hidden.
+     */
+    type: 'outside' | 'dateselect' | undefined | null;
+    /**
+     *  Used to refocus the input field in some cases when the overlay is hidden.
+     */
+    callback?(): void;
+}
+
+/**
+ * Custom common navigator template event
+ * @hidden
+ */
+interface CalendarNavigatorTemplateEvent {
+    /**
+     * Navigator change callback
+     * @param {React.SyntheticEvent} event - Browser event
+     * @param {string | number | null} [value] - The value of current navigator
+     */
+    onChange(event: React.SyntheticEvent, value?: string | number | undefined | null): void;
+    /**
+     * Style class of the navigator.
+     */
+    className: string;
+    /**
+     * The value of the current navigator
+     */
+    value: string | number | undefined | null;
+    /**
+     * The names of the current navigator
+     */
+    names: any[];
+    /**
+     * The options of the current navigator
+     */
+    options: any[];
+    /**
+     * The default navigator component
+     */
+    element: React.ReactNode;
+    /**
+     * The props of Calendar component
+     */
+    props: CalendarProps;
+}
+
+/**
+ * Custom month navigator template event
+ * @see {@link CalendarProps.monthNavigatorTemplate}
+ * @extends {CalendarNavigatorTemplateEvent}
+ * @event
+ */
+interface CalendarMonthNavigatorTemplateEvent extends CalendarNavigatorTemplateEvent {}
+
+/**
+ * Custom year navigator template event
+ * @see {@link CalendarProps.yearNavigatorTemplate}
+ * @extends {CalendarNavigatorTemplateEvent}
+ * @event
+ */
+interface CalendarYearNavigatorTemplateEvent extends CalendarNavigatorTemplateEvent {}
+
+/**
+ * Defines valid base properties in Calendar component.
+ */
+interface CalendarBaseProps {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * ARIA label for screenreader support.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Style class of the clear button.
+     * @defaultValue p-secondary-button
+     */
+    clearButtonClassName?: string | undefined;
+    /**
+     * Format of the date.
+     * @defaultValue mm/dd/yy
+     */
+    dateFormat?: string | undefined;
+    /**
+     * Icon to show in each of the decrement buttons.
+     */
+    decrementIcon?: IconType<CalendarProps> | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When specified, disables the component.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Array with dates to disable.
+     */
+    disabledDates?: Date[] | undefined;
+    /**
+     * Array with disabled weekday numbers.
+     */
+    disabledDays?: number[] | undefined;
+    /**
+     * Array with dates to enable (all other dates will be disabled).
+     */
+    enabledDates?: Date[] | undefined;
+    /**
+     * Whether to hide the overlay on date selection when showTime is enabled.
+     * @defaultValue false
+     */
+    hideOnDateTimeSelect?: boolean | undefined;
+    /**
+     * Whether to hide the overlay on date selection is completed when selectionMode is range.
+     */
+    hideOnRangeSelection?: boolean | undefined;
+    /**
+     * Specifies 12 or 24 hour format.
+     * @defaultValue 24
+     */
+    hourFormat?: '12' | '24' | undefined;
+    /**
+     * Icon of the calendar button.
+     */
+    icon?: IconType<CalendarProps> | undefined;
+    /**
+     * Icon position of the calendar button.
+     * @defaultValue right
+     */
+    iconPos?: 'left' | 'right' | undefined;
+    /**
+     * Icon to show in each of the increment buttons.
+     */
+    incrementIcon?: IconType<CalendarProps> | undefined;
+    /**
+     * When enabled, displays the calendar as inline instead of an overlay.
+     * @defaultValue false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Style class of the input element.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: React.CSSProperties | undefined;
+    /**
+     * Keep invalid value when input blur.
+     * @defaultValue false
+     */
+    keepInvalid?: boolean | undefined;
+    /**
+     * Used to display the values ​​of the locale object defined in the Locale API.
+     * @defaultValue en
+     */
+    locale?: string | undefined;
+    /**
+     * Mask pattern for input element.
+     */
+    mask?: string | undefined;
+    /**
+     * Placeholder character in mask.
+     * @defaultValue _
+     */
+    maskSlotChar?: string | undefined;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: Date | undefined;
+    /**
+     * Maximum number of selectable dates in multiple mode.
+     */
+    maxDateCount?: number | undefined;
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: Date | undefined;
+    /**
+     * Whether the month should be rendered as a dropdown instead of text.
+     * @defaultValue false
+     */
+    monthNavigator?: boolean | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Icon to show in the next button.
+     */
+    nextIcon?: IconType<CalendarProps> | undefined;
+    /**
+     * Number of months to display.
+     * @defaultValue 1
+     */
+    numberOfMonths?: number | undefined;
+    /**
+     * Style class of the datetimepicker panel.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * Inline style of the datetimepicker panel.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Placeholder text for the input.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Icon to show in the previous button.
+     */
+    prevIcon?: IconType<CalendarProps> | undefined;
+    /**
+     * When specified, prevents entering the date manually with keyboard.
+     * @defaultValue false
+     */
+    readOnlyInput?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
+     * @defaultValue false
+     */
+    selectOtherMonths?: boolean | undefined;
+    /**
+     * The cutoff year for determining the century for a date.
+     * @defaultValue +10
+     */
+    shortYearCutoff?: string | undefined;
+    /**
+     * Whether to display today and clear buttons at the footer
+     * @defaultValue false
+     */
+    showButtonBar?: boolean | undefined;
+    /**
+     * When enabled, displays a button with icon next to input.
+     * @defaultValue false
+     */
+    showIcon?: boolean | undefined;
+    /**
+     * Whether to show the milliseconds in time picker.
+     * @defaultValue false
+     */
+    showMillisec?: boolean | undefined;
+    /**
+     * Controls whether navigation beyond minimum and maximum dates is restricted. When true, navigation is limited to the min/max date range.
+     * @defaultValue false
+     */
+    showMinMaxRange?: boolean | undefined;
+    /**
+     * When disabled, datepicker will not be visible with input focus.
+     * @defaultValue true
+     */
+    showOnFocus?: boolean | undefined;
+    /**
+     * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
+     * @defaultValue true
+     */
+    showOtherMonths?: boolean | undefined;
+    /**
+     * Whether to show the seconds in time picker.
+     * @defaultValue false
+     */
+    showSeconds?: boolean | undefined;
+    /**
+     * Whether to display timepicker.
+     * @defaultValue false
+     */
+    showTime?: boolean | undefined;
+    /**
+     * When enabled, calendar will show week numbers.
+     * @defaultValue false
+     */
+    showWeek?: boolean | undefined;
+    /**
+     * Hours to change per step.
+     * @defaultValue 1
+     */
+    stepHour?: number | undefined;
+    /**
+     * Milliseconds to change per step.
+     * @defaultValue 1
+     */
+    stepMillisec?: number | undefined;
+    /**
+     * Minutes to change per step.
+     * @defaultValue 1
+     */
+    stepMinute?: number | undefined;
+    /**
+     * Seconds to change per step.
+     * @defaultValue 1
+     */
+    stepSecond?: number | undefined;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Whether to display timepicker only.
+     * @defaultValue false
+     */
+    timeOnly?: boolean | undefined;
+    /**
+     * Style class of the today button.
+     * @defaultValue p-secondary-button
+     */
+    todayButtonClassName?: string | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * When enabled, calendar overlay is displayed as optimized for touch devices.
+     * @defaultValue false
+     */
+    touchUI?: boolean | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Type of view to display.
+     * @defaultValue date
+     */
+    view?: 'date' | 'month' | 'year' | undefined;
+    /**
+     * Date instance whose month and year are used to display the calendar.
+     */
+    viewDate?: Nullable<Date>;
+    /**
+     * Specifies the visibility of the overlay.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Whether the year should be rendered as a dropdown instead of text.
+     * @defaultValue false
+     */
+    yearNavigator?: boolean | undefined;
+    /**
+     * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
+     */
+    yearRange?: string | undefined;
+    /**
+     * Function for overriding default behavior that formats a Date to the string representation.
+     * @param {Date} date - Formating date
+     * @return {string} Formatted date
+     */
+    formatDateTime?(date: Date): string;
+    /**
+     * Function for overriding default behavior that parses text into the Date.
+     * @param {string} text - Parsing date
+     * @return {Date} Parsed date
+     */
+    parseDateTime?(text: string): Date;
+    /**
+     * Function that gets a date information and returns the cell content in datepicker.
+     * @param {CalendarDateTemplateEvent} event - Custom date template event
+     * @return {React.ReactNode}
+     */
+    dateTemplate?(event: CalendarDateTemplateEvent): React.ReactNode;
+    /**
+     * Function that gets a navigator information and returns the decade selections in the panel.
+     * @param {number[]} yearValues - The values of years
+     * @return {React.ReactNode}
+     */
+    decadeTemplate?(yearValues: number[]): React.ReactNode;
+    /**
+     * Custom footer template of overlay.
+     * @return {React.ReactNode}
+     */
+    footerTemplate?(): React.ReactNode;
+    /**
+     * Custom header template of overlay.
+     * @return {React.ReactNode}
+     */
+    headerTemplate?(): React.ReactNode;
+    /**
+     * Function that gets a navigator information and returns the navigator element in header.
+     * @param {CalendarMonthNavigatorTemplateEvent} event - Custom month navigator template event.
+     * @return {React.ReactNode}
+     */
+    monthNavigatorTemplate?(event: CalendarMonthNavigatorTemplateEvent): React.ReactNode;
+    /**
+     * Callback to invoke on blur event of input field.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when clear button is clicked.
+     * @param {React.MouseEvent<HTMLButtonElement>} event - Browser event
+     */
+    onClearButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+    /**
+     * Callback to invoke on focus event of input field.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when overlay panel or modal becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Callback to invoke on input event of input field.
+     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when month changes.
+     * @param {CalendarMonthChangeEvent} event - Custom month change event
+     */
+    onMonthChange?(event: CalendarMonthChangeEvent): void;
+    /**
+     * Callback to invoke when a date is selected.
+     * @param {CalendarSelectEvent} event - Custom select event
+     */
+    onSelect?(event: CalendarSelectEvent): void;
+    /**
+     * Callback to invoke when overlay panel or modal becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when today button is clicked.
+     * @param {React.MouseEvent<HTMLButtonElement>} event - Browser event
+     */
+    onTodayButtonClick?(event: React.MouseEvent<HTMLButtonElement>): void;
+    /**
+     * Callback to invoke when the displayed month/year is changed.
+     * @param {CalendarViewChangeEvent} event - Custom view change event
+     */
+    onViewDateChange?(event: CalendarViewChangeEvent): void;
+    /**
+     * Callback to invoke when visible is changed.
+     * @param {CalendarVisibleChangeEvent} event - Custom visible change event
+     */
+    onVisibleChange?(event: CalendarVisibleChangeEvent): void;
+    /**
+     * Function that gets a navigator information and returns the navigator in header.
+     * @param {CalendarYearNavigatorTemplateEvent} event - Custom year navigator template event
+     */
+    yearNavigatorTemplate?(event: CalendarYearNavigatorTemplateEvent): React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CalendarPassThroughOptions}
+     */
+    pt?: CalendarPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+export type CalendarSelectionMode = 'single' | 'range' | 'multiple';
+
+/**
+ * Defines valid properties in Calendar component.
+ * @group Properties
+ */
+export interface CalendarProps<TMode extends CalendarSelectionMode = 'single', TValue = TMode extends 'multiple' ? Date[] : TMode extends 'range' ? (Date | null)[] : Date> extends CalendarBaseProps {
+    /**
+     * Specifies the selection mode either "single", "range", or "multiple";
+     * @defaultValue single
+     */
+    selectionMode?: TMode;
+    /**
+     * Value of the component.
+     * @defaultValue null
+     */
+    value?: Nullable<TValue>;
+    /**
+     * Callback to invoke when value changes.
+     * @param {FormEvent<TValue>} event - Custom change event
+     */
+    onChange?(event: FormEvent<TValue>): void;
+}
+
+/**
+ * **PrimeReact - Calendar**
+ *
+ * _Calendar also known as DatePicker, is a form component to work with dates._
+ *
+ * [Live Demo](https://www.primereact.org/calendar/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Calendar<TMode extends CalendarSelectionMode = 'single', TValue = TMode extends 'multiple' ? Date[] : TMode extends 'range' ? (Date | null)[] : Date> extends React.Component<CalendarProps<TMode>, any> {
+    /**
+     * Used to show the overlay.
+     */
+    public show(): void;
+    /**
+     * Used to hide the overlay.
+     */
+    public hide(): void;
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get the current date.
+     * @return {TValue} Current Date
+     */
+    public getCurrentDateTime(): TValue;
+    /**
+     * Used to get the view date.
+     * @return {TValue} View Date
+     */
+    public getViewDate(): TValue;
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement | null} Container element
+     */
+    public getElement(): HTMLSpanElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+    /**
+     * Used to update the current view date.
+     * @param {React.SyntheticEvent | null} event - Browser event.
+     * @param {TValue | null} value - New date.
+     */
+    public updateViewDate(event: React.SyntheticEvent | null, value: Nullable<TValue>): void;
+}
diff --git a/components/lib/calendar/package.json b/components/lib/calendar/package.json
new file mode 100644
index 0000000000..5f2cb25caa
--- /dev/null
+++ b/components/lib/calendar/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./calendar.cjs.js",
+    "module": "./calendar.esm.js",
+    "unpkg": "./calendar.min.js",
+    "types": "./calendar.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/card/Card.js b/components/lib/card/Card.js
new file mode 100644
index 0000000000..a12ec9c1ac
--- /dev/null
+++ b/components/lib/card/Card.js
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils, classNames } from '../utils/Utils';
+import { CardBase } from './CardBase';
+
+export const Card = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = CardBase.getProps(inProps, context);
+
+    const elementRef = React.useRef(ref);
+
+    const { ptm, cx, isUnstyled } = CardBase.setMetaData({
+        props
+    });
+
+    useHandleStyle(CardBase.css.styles, isUnstyled, { name: 'card' });
+
+    const createHeader = () => {
+        const headerProps = mergeProps(
+            {
+                className: cx('header')
+            },
+            ptm('header')
+        );
+
+        if (props.header) {
+            return <div {...headerProps}>{ObjectUtils.getJSXElement(props.header, props)}</div>;
+        }
+
+        return null;
+    };
+
+    const createBody = () => {
+        const titleProps = mergeProps(
+            {
+                className: cx('title')
+            },
+            ptm('title')
+        );
+
+        const title = props.title && <div {...titleProps}>{ObjectUtils.getJSXElement(props.title, props)}</div>;
+
+        const subTitleProps = mergeProps(
+            {
+                className: cx('subTitle')
+            },
+            ptm('subTitle')
+        );
+
+        const subTitle = props.subTitle && <div {...subTitleProps}>{ObjectUtils.getJSXElement(props.subTitle, props)}</div>;
+
+        const contentProps = mergeProps(
+            {
+                className: cx('content')
+            },
+            ptm('content')
+        );
+
+        const children = props.children && <div {...contentProps}>{props.children}</div>;
+
+        const footerProps = mergeProps(
+            {
+                className: cx('footer')
+            },
+            ptm('footer')
+        );
+
+        const footer = props.footer && <div {...footerProps}>{ObjectUtils.getJSXElement(props.footer, props)}</div>;
+
+        const bodyProps = mergeProps(
+            {
+                className: cx('body')
+            },
+            ptm('body')
+        );
+
+        return (
+            <div {...bodyProps}>
+                {title}
+                {subTitle}
+                {children}
+                {footer}
+            </div>
+        );
+    };
+
+    React.useEffect(() => {
+        ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
+
+    const rootProps = mergeProps(
+        {
+            id: props.id,
+            ref: elementRef,
+            style: props.style,
+            className: classNames(props.className, cx('root'))
+        },
+        CardBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const header = createHeader();
+    const body = createBody();
+
+    return (
+        <div {...rootProps}>
+            {header}
+            {body}
+        </div>
+    );
+});
+
+Card.displayName = 'Card';
diff --git a/components/lib/card/Card.spec.js b/components/lib/card/Card.spec.js
new file mode 100644
index 0000000000..8640639556
--- /dev/null
+++ b/components/lib/card/Card.spec.js
@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { snapshot } from '../../test';
+import { PrimeReactProvider } from '../api/Api';
+import { Button } from '../button/Button';
+import { Card } from './Card';
+
+const header = <img alt="Card" src="http://github.com/images/usercard.png" />;
+const footer = (
+    <span>
+        <Button label="Save" icon="pi pi-check" />
+        <Button label="Cancel" icon="pi pi-times" className="p-button-secondary ml-2" />
+    </span>
+);
+
+describe('Card', () => {
+    snapshot(
+        <PrimeReactProvider>
+            <Card />
+        </PrimeReactProvider>,
+        'default'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Card title="Simple Card">Content</Card>
+        </PrimeReactProvider>,
+        'title'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Card title="subtitle" subTitle="subtitle">
+                Content
+            </Card>
+        </PrimeReactProvider>,
+        'subtitle'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Card id="card" title="Advanced Card" style={{ width: '25rem', marginBottom: '2em' }} subTitle="Subtitle" footer={footer} header={header}>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
+                    quas!
+                </p>
+            </Card>
+        </PrimeReactProvider>,
+        'advanced'
+    );
+});
diff --git a/components/lib/card/CardBase.js b/components/lib/card/CardBase.js
new file mode 100644
index 0000000000..23c4210d3d
--- /dev/null
+++ b/components/lib/card/CardBase.js
@@ -0,0 +1,37 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-card p-component',
+    header: 'p-card-header',
+    title: 'p-card-title',
+    subTitle: 'p-card-subtitle',
+    content: 'p-card-content',
+    footer: 'p-card-footer',
+    body: 'p-card-body'
+};
+
+const styles = `
+@layer primereact {
+    .p-card-header img {
+        width: 100%;
+    }
+}
+`;
+
+export const CardBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Card',
+        id: null,
+        header: null,
+        footer: null,
+        title: null,
+        subTitle: null,
+        style: null,
+        className: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/card/__snapshots__/Card.spec.js.snap b/components/lib/card/__snapshots__/Card.spec.js.snap
new file mode 100644
index 0000000000..8aab7d482b
--- /dev/null
+++ b/components/lib/card/__snapshots__/Card.spec.js.snap
@@ -0,0 +1,166 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card advanced 1`] = `
+<div>
+  <div
+    class="p-card p-component"
+    data-pc-name="card"
+    data-pc-section="root"
+    id="card"
+    style="width: 25rem; margin-bottom: 2em;"
+  >
+    <div
+      class="p-card-header"
+      data-pc-section="header"
+    >
+      <img
+        alt="Card"
+        src="http://github.com/images/usercard.png"
+      />
+    </div>
+    <div
+      class="p-card-body"
+      data-pc-section="body"
+    >
+      <div
+        class="p-card-title"
+        data-pc-section="title"
+      >
+        Advanced Card
+      </div>
+      <div
+        class="p-card-subtitle"
+        data-pc-section="subtitle"
+      >
+        Subtitle
+      </div>
+      <div
+        class="p-card-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
+        </p>
+      </div>
+      <div
+        class="p-card-footer"
+        data-pc-section="footer"
+      >
+        <span>
+          <button
+            aria-label="Save"
+            class="p-button p-component"
+            data-pc-name="button"
+            data-pc-section="root"
+          >
+            <span
+              class="p-button-icon p-c p-button-icon-left pi pi-check"
+              data-pc-section="icon"
+            />
+            <span
+              class="p-button-label p-c"
+              data-pc-section="label"
+            >
+              Save
+            </span>
+          </button>
+          <button
+            aria-label="Cancel"
+            class="p-button-secondary ml-2 p-button p-component"
+            data-pc-name="button"
+            data-pc-section="root"
+          >
+            <span
+              class="p-button-icon p-c p-button-icon-left pi pi-times"
+              data-pc-section="icon"
+            />
+            <span
+              class="p-button-label p-c"
+              data-pc-section="label"
+            >
+              Cancel
+            </span>
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card default 1`] = `
+<div>
+  <div
+    class="p-card p-component"
+    data-pc-name="card"
+    data-pc-section="root"
+  >
+    <div
+      class="p-card-body"
+      data-pc-section="body"
+    />
+  </div>
+</div>
+`;
+
+exports[`Card subtitle 1`] = `
+<div>
+  <div
+    class="p-card p-component"
+    data-pc-name="card"
+    data-pc-section="root"
+  >
+    <div
+      class="p-card-body"
+      data-pc-section="body"
+    >
+      <div
+        class="p-card-title"
+        data-pc-section="title"
+      >
+        subtitle
+      </div>
+      <div
+        class="p-card-subtitle"
+        data-pc-section="subtitle"
+      >
+        subtitle
+      </div>
+      <div
+        class="p-card-content"
+        data-pc-section="content"
+      >
+        Content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card title 1`] = `
+<div>
+  <div
+    class="p-card p-component"
+    data-pc-name="card"
+    data-pc-section="root"
+  >
+    <div
+      class="p-card-body"
+      data-pc-section="body"
+    >
+      <div
+        class="p-card-title"
+        data-pc-section="title"
+      >
+        Simple Card
+      </div>
+      <div
+        class="p-card-content"
+        data-pc-section="content"
+      >
+        Content
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/lib/card/card.d.ts b/components/lib/card/card.d.ts
new file mode 100644
index 0000000000..6f16b54e90
--- /dev/null
+++ b/components/lib/card/card.d.ts
@@ -0,0 +1,118 @@
+/**
+ *
+ * Card is a flexible container component.
+ *
+ * [Live Demo](https://www.primereact.org/card/)
+ *
+ * @module card
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils';
+
+export declare type CardPassThroughType<T> = PassThroughType<T, CardPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CardPassThroughMethodOptions {
+    props: CardProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CardProps.pt}
+ */
+export interface CardPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the body's DOM element.
+     */
+    body?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the subtitle's DOM element.
+     */
+    subTitle?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: CardPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Card component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface CardProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'title'> {
+    /**
+     * Header of the card.
+     */
+    header?: React.ReactNode | ((props: CardProps) => React.ReactNode);
+    /**
+     * Footer of the card.
+     */
+    footer?: React.ReactNode | ((props: CardProps) => React.ReactNode);
+    /**
+     * Title of the card.
+     */
+    title?: React.ReactNode | ((props: CardProps) => React.ReactNode);
+    /**
+     * Secondary title of the card.
+     */
+    subTitle?: React.ReactNode | ((props: CardProps) => React.ReactNode);
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CardPassThroughOptions}
+     */
+    pt?: CardPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Card**
+ *
+ * _Card is a flexible container component._
+ *
+ * [Live Demo](https://www.primereact.org/card/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Card extends React.Component<CardProps, any> {}
diff --git a/components/lib/card/package.json b/components/lib/card/package.json
new file mode 100644
index 0000000000..7f98a917f3
--- /dev/null
+++ b/components/lib/card/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./card.cjs.js",
+    "module": "./card.esm.js",
+    "unpkg": "./card.min.js",
+    "types": "./card.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
new file mode 100644
index 0000000000..3dc9845ffb
--- /dev/null
+++ b/components/lib/carousel/Carousel.js
@@ -0,0 +1,841 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronLeftIcon } from '../icons/chevronleft';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { ChevronUpIcon } from '../icons/chevronup';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { CarouselBase } from './CarouselBase';
+
+const CarouselItem = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, cx } = props;
+    const key = props.className && props.className === 'p-carousel-item-cloned' ? 'itemCloned' : 'item';
+    const content = props.template(props.item);
+
+    const itemClonedProps = mergeProps(
+        {
+            className: cx(key, { itemProps: props }),
+            role: props.role,
+            'aria-roledescription': props.ariaRoledescription,
+            'aria-label': props.ariaLabel,
+            'aria-hidden': props.ariaHidden,
+            'data-p-carousel-item-active': props.active,
+            'data-p-carousel-item-start': props.start,
+            'data-p-carousel-item-end': props.end
+        },
+        ptm(key)
+    );
+
+    return <div {...itemClonedProps}>{content}</div>;
+});
+
+export const Carousel = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = CarouselBase.getProps(inProps, context);
+
+        const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible);
+        const [numScrollState, setNumScrollState] = React.useState(props.numScroll);
+        const [totalShiftedItemsState, setTotalShiftedItemsState] = React.useState(props.page * props.numScroll * -1);
+        const [pageState, setPageState] = React.useState(props.page);
+        const { ptm, cx, sx, isUnstyled } = CarouselBase.setMetaData({
+            props,
+            state: {
+                numVisible: numVisibleState,
+                numScroll: numScrollState,
+                totalShiftedItems: totalShiftedItemsState,
+                page: pageState
+            }
+        });
+
+        useHandleStyle(CarouselBase.css.styles, isUnstyled, { name: 'carousel' });
+        const elementRef = React.useRef(null);
+        const itemsContainerRef = React.useRef(null);
+        const remainingItems = React.useRef(0);
+        const allowAutoplay = React.useRef(!!props.autoplayInterval);
+        const attributeSelector = React.useRef('');
+        const swipeThreshold = React.useRef(20);
+        const startPos = React.useRef(null);
+        const interval = React.useRef(null);
+        const carouselStyle = React.useRef(null);
+        const indicatorContent = React.useRef(null);
+        const isRemainingItemsAdded = React.useRef(false);
+        const responsiveOptions = React.useRef(null);
+        const prevNumScroll = usePrevious(numScrollState);
+        const prevNumVisible = usePrevious(numVisibleState);
+        const prevValue = usePrevious(props.value);
+        const prevPage = usePrevious(props.page);
+        const isVertical = props.orientation === 'vertical';
+        const circular = props.circular || !!props.autoplayInterval;
+        const isCircular = circular && props.value && props.value.length >= numVisibleState;
+        const totalIndicators = props.value ? Math.max(Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1, 0) : 0;
+        const isAutoplay = totalIndicators && props.autoplayInterval && allowAutoplay.current;
+        const isControlled = props.onPageChange && !isAutoplay;
+        const currentPage = isControlled ? props.page : pageState;
+
+        const [bindWindowResizeListener] = useResizeListener({
+            listener: () => {
+                calculatePosition();
+            },
+            when: props.responsiveOptions
+        });
+
+        const step = (dir, page) => {
+            let totalShiftedItems = totalShiftedItemsState;
+
+            if (page != null) {
+                totalShiftedItems = numScrollState * page * -1;
+
+                if (isCircular) {
+                    totalShiftedItems = totalShiftedItems - numVisibleState;
+                }
+
+                isRemainingItemsAdded.current = false;
+            } else {
+                totalShiftedItems = totalShiftedItems + numScrollState * dir;
+
+                if (isRemainingItemsAdded.current) {
+                    totalShiftedItems = totalShiftedItems + (remainingItems.current - numScrollState * dir);
+                    isRemainingItemsAdded.current = false;
+                }
+
+                const originalShiftedItems = isCircular ? totalShiftedItems + numVisibleState : totalShiftedItems;
+
+                page = Math.abs(Math.floor(originalShiftedItems / numScrollState));
+            }
+
+            if (isCircular && pageState === totalIndicators - 1 && dir === -1) {
+                totalShiftedItems = -1 * (props.value.length + numVisibleState);
+                page = 0;
+            } else if (isCircular && pageState === 0 && dir === 1) {
+                totalShiftedItems = 0;
+                page = totalIndicators - 1;
+            } else if (page === totalIndicators - 1 && remainingItems.current > 0) {
+                totalShiftedItems = totalShiftedItems + (remainingItems.current * -1 - numScrollState * dir);
+                isRemainingItemsAdded.current = true;
+            }
+
+            if (itemsContainerRef.current) {
+                !isUnstyled() && DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
+                changePosition(totalShiftedItems);
+                itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
+            }
+
+            changePage(page);
+            setTotalShiftedItemsState(totalShiftedItems);
+        };
+
+        const calculatePosition = () => {
+            if (itemsContainerRef.current && responsiveOptions.current) {
+                let windowWidth = window.innerWidth;
+                let matchedResponsiveData = {
+                    numVisible: props.numVisible,
+                    numScroll: props.numScroll
+                };
+
+                for (let i = 0; i < responsiveOptions.current.length; i++) {
+                    let res = responsiveOptions.current[i];
+
+                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                        matchedResponsiveData = res;
+                    }
+                }
+
+                if (numScrollState !== matchedResponsiveData.numScroll) {
+                    let page = Math.floor((currentPage * numScrollState) / matchedResponsiveData.numScroll);
+                    let totalShiftedItems = matchedResponsiveData.numScroll * page * -1;
+
+                    if (isCircular) {
+                        totalShiftedItems = totalShiftedItems - matchedResponsiveData.numVisible;
+                    }
+
+                    setTotalShiftedItemsState(totalShiftedItems);
+                    setNumScrollState(matchedResponsiveData.numScroll);
+                    changePage(page);
+                }
+
+                if (numVisibleState !== matchedResponsiveData.numVisible) {
+                    setNumVisibleState(matchedResponsiveData.numVisible);
+                }
+            }
+        };
+
+        const navBackward = (e, page) => {
+            if (circular || currentPage !== 0) {
+                step(1, page);
+            }
+
+            allowAutoplay.current = false;
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const navForward = (e, page) => {
+            if (circular || currentPage < totalIndicators - 1) {
+                step(-1, page);
+            }
+
+            allowAutoplay.current = false;
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const onIndicatorClick = (e, page) => {
+            if (page > currentPage) {
+                navForward(e, page);
+            } else if (page < currentPage) {
+                navBackward(e, page);
+            }
+        };
+
+        const onTransitionEnd = (e) => {
+            if (itemsContainerRef.current && e.propertyName === 'transform') {
+                DomHandler.addClass(itemsContainerRef.current, 'p-items-hidden');
+                itemsContainerRef.current.style.transition = '';
+
+                if ((pageState === 0 || pageState === totalIndicators - 1) && isCircular) {
+                    changePosition(totalShiftedItemsState);
+                }
+            }
+        };
+
+        const onTouchStart = (e) => {
+            const touchobj = e.changedTouches[0];
+
+            startPos.current = {
+                x: touchobj.pageX,
+                y: touchobj.pageY
+            };
+        };
+
+        const onTouchMove = (e) => {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const onTouchEnd = (e) => {
+            const touchobj = e.changedTouches[0];
+
+            if (isVertical) {
+                changePageOnTouch(e, touchobj.pageY - startPos.current.y);
+            } else {
+                changePageOnTouch(e, touchobj.pageX - startPos.current.x);
+            }
+        };
+
+        const changePageOnTouch = (e, diff) => {
+            if (Math.abs(diff) > swipeThreshold.current) {
+                if (diff < 0) {
+                    // left
+                    navForward(e);
+                } else {
+                    // right
+                    navBackward(e);
+                }
+            }
+        };
+
+        const onIndicatorKeydown = (event) => {
+            switch (event.code) {
+                case 'ArrowRight':
+                    onRightKey();
+                    break;
+
+                case 'ArrowLeft':
+                    onLeftKey();
+                    break;
+
+                case 'Home':
+                    onHomeKey();
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    onEndKey();
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowUp':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    onTabKey();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onRightKey = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+        };
+
+        const onLeftKey = () => {
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+        };
+
+        const onHomeKey = () => {
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, 0);
+        };
+
+        const onEndKey = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]r')];
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, indicators.length - 1);
+        };
+
+        const onTabKey = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+            const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
+
+            const activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
+
+            const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+
+            indicators[activeIndex].children[0].tabIndex = '-1';
+            indicators[highlightedIndex].children[0].tabIndex = '0';
+        };
+
+        const findFocusedIndicatorIndex = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+            const activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
+
+            return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+        };
+
+        const changedFocusedIndicator = (prevInd, nextInd) => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+
+            indicators[prevInd].children[0].tabIndex = '-1';
+            indicators[nextInd].children[0].tabIndex = '0';
+            indicators[nextInd].children[0].focus();
+        };
+
+        const startAutoplay = () => {
+            if (props.autoplayInterval > 0) {
+                interval.current = setInterval(() => {
+                    if (pageState === totalIndicators - 1) {
+                        step(-1, 0);
+                    } else {
+                        step(-1, pageState + 1);
+                    }
+                }, props.autoplayInterval);
+            }
+        };
+
+        const stopAutoplay = () => {
+            if (interval.current) {
+                clearInterval(interval.current);
+            }
+        };
+
+        const createStyle = () => {
+            if (!carouselStyle.current) {
+                carouselStyle.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+            }
+
+            let innerHTML = `
+            .p-carousel[${attributeSelector.current}] .p-carousel-item {
+                flex: 1 0 ${100 / numVisibleState}%
+            }
+        `;
+
+            if (props.responsiveOptions) {
+                const comparator = ObjectUtils.localeComparator((context && context.locale) || PrimeReact.locale);
+
+                responsiveOptions.current = [...props.responsiveOptions];
+                responsiveOptions.current.sort((data1, data2) => {
+                    const value1 = data1.breakpoint;
+                    const value2 = data2.breakpoint;
+
+                    return ObjectUtils.sort(value1, value2, -1, comparator, (context && context.nullSortOrder) || PrimeReact.nullSortOrder);
+                });
+
+                for (let i = 0; i < responsiveOptions.current.length; i++) {
+                    let res = responsiveOptions.current[i];
+
+                    innerHTML =
+                        innerHTML +
+                        `
+                    @media screen and (max-width: ${res.breakpoint}) {
+                        .p-carousel[${attributeSelector.current}] .p-carousel-item {
+                            flex: 1 0 ${100 / res.numVisible}%
+                        }
+                    }
+                `;
+                }
+
+                calculatePosition();
+            }
+
+            carouselStyle.current.innerHTML = innerHTML;
+        };
+
+        const destroyStyle = () => {
+            carouselStyle.current = DomHandler.removeInlineStyle(carouselStyle.current);
+        };
+
+        const changePosition = (totalShiftedItems) => {
+            if (itemsContainerRef.current) {
+                itemsContainerRef.current.style.transform = isVertical ? `translate3d(0, ${totalShiftedItems * (100 / numVisibleState)}%, 0)` : `translate3d(${totalShiftedItems * (100 / numVisibleState)}%, 0, 0)`;
+            }
+        };
+
+        const changePage = (page) => {
+            !isControlled && setPageState(page);
+            props.onPageChange && props.onPageChange({ page });
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            startAutoplay,
+            stopAutoplay,
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            if (elementRef.current) {
+                attributeSelector.current = UniqueComponentId();
+                elementRef.current.setAttribute(attributeSelector.current, '');
+            }
+
+            if (!carouselStyle.current) {
+                calculatePosition();
+
+                // Workaround: force correct initial position for circular
+                if (isCircular) {
+                    const initialPosition = -1 * numVisibleState;
+
+                    setTotalShiftedItemsState(initialPosition);
+                    changePosition(initialPosition);
+                } else {
+                    changePosition(totalShiftedItemsState);
+                }
+
+                bindWindowResizeListener();
+            }
+        });
+
+        useUpdateEffect(() => {
+            let stateChanged = false;
+            let totalShiftedItems = totalShiftedItemsState;
+
+            createStyle();
+
+            if (props.autoplayInterval) {
+                stopAutoplay();
+            }
+
+            if (prevNumScroll !== numScrollState || prevNumVisible !== numVisibleState || (props.value && prevValue && prevValue.length !== props.value.length)) {
+                remainingItems.current = (props.value.length - numVisibleState) % numScrollState;
+
+                let page = currentPage;
+
+                if (totalIndicators !== 0 && page >= totalIndicators) {
+                    page = totalIndicators - 1;
+
+                    changePage(page);
+
+                    stateChanged = true;
+                }
+
+                totalShiftedItems = page * numScrollState * -1;
+
+                if (isCircular) {
+                    totalShiftedItems = totalShiftedItems - numVisibleState;
+                }
+
+                if (page === totalIndicators - 1 && remainingItems.current > 0) {
+                    totalShiftedItems = totalShiftedItems + (-1 * remainingItems.current + numScrollState);
+                    isRemainingItemsAdded.current = true;
+                } else {
+                    isRemainingItemsAdded.current = false;
+                }
+
+                if (totalShiftedItems !== totalShiftedItemsState) {
+                    setTotalShiftedItemsState(totalShiftedItems);
+                    stateChanged = true;
+                }
+
+                changePosition(totalShiftedItems);
+            }
+
+            if (isCircular) {
+                if (pageState === 0) {
+                    totalShiftedItems = -1 * numVisibleState;
+                } else if (totalShiftedItems === 0) {
+                    totalShiftedItems = -1 * props.value.length;
+
+                    if (remainingItems.current > 0) {
+                        isRemainingItemsAdded.current = true;
+                    }
+                }
+
+                if (totalShiftedItems !== totalShiftedItemsState) {
+                    setTotalShiftedItemsState(totalShiftedItems);
+                    stateChanged = true;
+                }
+            }
+
+            if (prevPage !== props.page) {
+                if (props.page > prevPage && props.page <= totalIndicators - 1) {
+                    step(-1, props.page);
+                } else if (props.page < prevPage) {
+                    step(1, props.page);
+                }
+            }
+
+            if (!stateChanged && isAutoplay) {
+                startAutoplay();
+            }
+
+            return () => {
+                if (props.autoplayInterval) {
+                    stopAutoplay();
+                }
+
+                destroyStyle();
+            };
+        });
+
+        const ariaSlideNumber = (value) => {
+            return ariaLabel('slideNumber', { slideNumber: value });
+        };
+
+        const createItems = () => {
+            if (props.value && props.value.length) {
+                let clonedItemsForStarting = null;
+                let clonedItemsForFinishing = null;
+
+                if (isCircular) {
+                    let clonedElements = null;
+
+                    clonedElements = props.value.slice(-1 * numVisibleState);
+                    clonedItemsForStarting = clonedElements.map((item, index) => {
+                        const isActive = totalShiftedItemsState * -1 === props.value.length + numVisibleState;
+                        const start = index === 0;
+                        const end = index === clonedElements.length - 1;
+                        const key = index + '_scloned';
+
+                        return <CarouselItem key={key} className="p-carousel-item-cloned" template={props.itemTemplate} item={item} active={isActive} start={start} end={end} ptm={ptm} cx={cx} />;
+                    });
+
+                    clonedElements = props.value.slice(0, numVisibleState);
+                    clonedItemsForFinishing = clonedElements.map((item, index) => {
+                        const isActive = totalShiftedItemsState === 0;
+                        const start = index === 0;
+                        const end = index === clonedElements.length - 1;
+                        const key = index + '_fcloned';
+
+                        return <CarouselItem key={key} className="p-carousel-item-cloned" template={props.itemTemplate} item={item} active={isActive} start={start} end={end} ptm={ptm} cx={cx} />;
+                    });
+                }
+
+                const items = props.value.map((item, index) => {
+                    const firstIndex = isCircular ? -1 * (totalShiftedItemsState + numVisibleState) : totalShiftedItemsState * -1;
+                    const lastIndex = firstIndex + numVisibleState - 1;
+                    const isActive = firstIndex <= index && lastIndex >= index;
+                    const start = firstIndex === index;
+                    const end = lastIndex === index;
+                    const ariaHidden = firstIndex > index || lastIndex < index ? true : undefined;
+                    const ariaLabel = ariaSlideNumber(index);
+                    const ariaRoledescription = localeOption('aria') ? localeOption('aria').slide : undefined;
+
+                    return (
+                        <CarouselItem
+                            key={index}
+                            template={props.itemTemplate}
+                            item={item}
+                            active={isActive}
+                            start={start}
+                            ariaHidden={ariaHidden}
+                            ariaLabel={ariaLabel}
+                            ariaRoledescription={ariaRoledescription}
+                            role="group"
+                            end={end}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                });
+
+                return (
+                    <>
+                        {clonedItemsForStarting}
+                        {items}
+                        {clonedItemsForFinishing}
+                    </>
+                );
+            }
+        };
+
+        const createHeader = () => {
+            if (props.header) {
+                const headerProps = mergeProps(
+                    {
+                        className: cx('header')
+                    },
+                    ptm('header')
+                );
+
+                return <div {...headerProps}>{props.header}</div>;
+            }
+
+            return null;
+        };
+
+        const createFooter = () => {
+            if (props.footer) {
+                const footerProps = mergeProps(
+                    {
+                        className: cx('footer')
+                    },
+                    ptm('footer')
+                );
+
+                return <div {...footerProps}>{props.footer}</div>;
+            }
+
+            return null;
+        };
+
+        const createContent = () => {
+            const items = createItems();
+            const height = isVertical ? props.verticalViewPortHeight : 'auto';
+            const backwardNavigator = createBackwardNavigator();
+            const forwardNavigator = createForwardNavigator();
+            const itemsContentProps = mergeProps(
+                {
+                    className: cx('itemsContent'),
+                    style: sx('itemsContent', { height }),
+                    onTouchStart: (e) => onTouchStart(e),
+                    onTouchMove: (e) => onTouchMove(e),
+                    onTouchEnd: (e) => onTouchEnd(e)
+                },
+                ptm('itemsContent')
+            );
+
+            const containerProps = mergeProps(
+                {
+                    className: classNames(props.containerClassName, cx('container')),
+                    'aria-live': allowAutoplay.current ? 'polite' : 'off'
+                },
+                ptm('container')
+            );
+
+            const itemsContainerProps = mergeProps(
+                {
+                    className: cx('itemsContainer'),
+                    onTransitionEnd: onTransitionEnd
+                },
+                ptm('itemsContainer')
+            );
+
+            return (
+                <div {...containerProps}>
+                    {backwardNavigator}
+                    <div {...itemsContentProps}>
+                        <div ref={itemsContainerRef} {...itemsContainerProps}>
+                            {items}
+                        </div>
+                    </div>
+                    {forwardNavigator}
+                </div>
+            );
+        };
+
+        const createBackwardNavigator = () => {
+            if (props.showNavigators) {
+                const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && currentPage === 0;
+                const previousButtonIconProps = mergeProps(
+                    {
+                        className: cx('previousButtonIcon')
+                    },
+                    ptm('previousButtonIcon')
+                );
+                const icon = isVertical ? props.prevIcon || <ChevronUpIcon {...previousButtonIconProps} /> : props.prevIcon || <ChevronLeftIcon {...previousButtonIconProps} />;
+                const backwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...previousButtonIconProps }, { props });
+                const previousButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('previousButton', { isDisabled }),
+                        onClick: (e) => navBackward(e),
+                        disabled: isDisabled,
+                        'aria-label': localeOption('aria') ? localeOption('aria').prevPageLabel : undefined,
+                        'data-pc-group-section': 'navigator'
+                    },
+                    ptm('previousButton')
+                );
+
+                return (
+                    <button {...previousButtonProps}>
+                        {backwardNavigatorIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return null;
+        };
+
+        const createForwardNavigator = () => {
+            if (props.showNavigators) {
+                const isDisabled = (!circular || (props.value && props.value.length < numVisibleState)) && (currentPage === totalIndicators - 1 || totalIndicators === 0);
+                const nextButtonIconProps = mergeProps(
+                    {
+                        className: cx('nextButtonIcon')
+                    },
+                    ptm('nextButtonIcon')
+                );
+                const icon = isVertical ? props.nextIcon || <ChevronDownIcon {...nextButtonIconProps} /> : props.nextIcon || <ChevronRightIcon {...nextButtonIconProps} />;
+                const forwardNavigatorIcon = IconUtils.getJSXIcon(icon, { ...nextButtonIconProps }, { props });
+                const nextButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('nextButton', { isDisabled }),
+                        onClick: (e) => navForward(e),
+                        disabled: isDisabled,
+                        'aria-label': localeOption('aria') ? localeOption('aria').nextPageLabel : undefined,
+                        'data-pc-group-section': 'navigator'
+                    },
+                    ptm('nextButton')
+                );
+
+                return (
+                    <button {...nextButtonProps}>
+                        {forwardNavigatorIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return null;
+        };
+
+        const ariaPageLabel = (value) => {
+            return ariaLabel('pageLabel', { page: value });
+        };
+
+        const createIndicator = (index) => {
+            const isActive = currentPage === index;
+
+            const getPTOptions = (key) => {
+                return ptm(key, {
+                    context: {
+                        active: isActive
+                    }
+                });
+            };
+
+            const key = 'carousel-indicator-' + index;
+            const indicatorProps = mergeProps(
+                {
+                    className: cx('indicator', { isActive }),
+                    'data-p-highlight': isActive
+                },
+                getPTOptions('indicator')
+            );
+            const indicatorButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('indicatorButton'),
+                    tabIndex: currentPage === index ? '0' : '-1',
+                    onClick: (e) => onIndicatorClick(e, index),
+                    'aria-label': ariaPageLabel(index + 1),
+                    'aria-current': currentPage === index ? 'page' : undefined
+                },
+                getPTOptions('indicatorButton')
+            );
+
+            return (
+                <li {...indicatorProps} key={key}>
+                    <button {...indicatorButtonProps}>
+                        <Ripple />
+                    </button>
+                </li>
+            );
+        };
+
+        const createIndicators = () => {
+            if (props.showIndicators) {
+                let indicators = [];
+
+                for (let i = 0; i < totalIndicators; i++) {
+                    indicators.push(createIndicator(i));
+                }
+
+                const indicatorsProps = mergeProps(
+                    {
+                        ref: indicatorContent,
+                        className: classNames(props.indicatorsContentClassName, cx('indicators')),
+                        onKeyDown: onIndicatorKeydown
+                    },
+                    ptm('indicators')
+                );
+
+                return <ul {...indicatorsProps}>{indicators}</ul>;
+            }
+
+            return null;
+        };
+
+        const content = createContent();
+        const indicators = createIndicators();
+        const header = createHeader();
+        const footer = createFooter();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root', { isVertical })),
+                style: props.style,
+                role: 'region'
+            },
+            CarouselBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const contentProps = mergeProps(
+            {
+                className: classNames(props.contentClassName, cx('content'))
+            },
+            ptm('content')
+        );
+
+        return (
+            <div {...rootProps}>
+                {header}
+                <div {...contentProps}>
+                    {content}
+                    {indicators}
+                </div>
+                {footer}
+            </div>
+        );
+    })
+);
+
+CarouselItem.displayName = 'CarouselItem';
+
+Carousel.displayName = 'Carousel';
diff --git a/components/lib/carousel/CarouselBase.js b/components/lib/carousel/CarouselBase.js
new file mode 100644
index 0000000000..a92ea555bf
--- /dev/null
+++ b/components/lib/carousel/CarouselBase.js
@@ -0,0 +1,157 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-carousel {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .p-carousel-content {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+    }
+    
+    .p-carousel-prev,
+    .p-carousel-next {
+        align-self: center;
+        flex-grow: 0;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-carousel-container {
+        display: flex;
+        flex-direction: row;
+    }
+    
+    .p-carousel-items-content {
+        overflow: hidden;
+        width: 100%;
+    }
+    
+    .p-carousel-items-container {
+        display: flex;
+        flex-direction: row;
+    }
+    
+    .p-carousel-indicators {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    
+    .p-carousel-indicator > button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    /* Vertical */
+    .p-carousel-vertical .p-carousel-container {
+        flex-direction: column;
+    }
+    
+    .p-carousel-vertical .p-carousel-items-container {
+        flex-direction: column;
+        height: 100%;
+    }
+    
+    /* Keyboard Support */
+    .p-items-hidden .p-carousel-item {
+        visibility: hidden;
+    }
+    
+    .p-items-hidden .p-carousel-item.p-carousel-item-active {
+        visibility: visible;
+    }
+}
+`;
+
+const classes = {
+    root: ({ isVertical }) =>
+        classNames('p-carousel p-component', {
+            'p-carousel-vertical': isVertical,
+            'p-carousel-horizontal': !isVertical
+        }),
+    container: 'p-carousel-container',
+    content: 'p-carousel-content',
+    indicators: 'p-carousel-indicators p-reset',
+    header: 'p-carousel-header',
+    footer: 'p-carousel-footer',
+    itemsContainer: 'p-carousel-items-container',
+    itemsContent: 'p-carousel-items-content',
+    previousButton: ({ isDisabled }) =>
+        classNames('p-carousel-prev p-link', {
+            'p-disabled': isDisabled
+        }),
+    previousButtonIcon: 'p-carousel-prev-icon',
+    nextButton: ({ isDisabled }) =>
+        classNames('p-carousel-next p-link', {
+            'p-disabled': isDisabled
+        }),
+    nextButtonIcon: 'p-carousel-next-icon',
+    indicator: ({ isActive }) =>
+        classNames('p-carousel-indicator', {
+            'p-highlight': isActive
+        }),
+    indicatorButton: 'p-link',
+    itemCloned: ({ itemProps: props }) =>
+        classNames(props.className, 'p-carousel-item', {
+            'p-carousel-item-active': props.active,
+            'p-carousel-item-start': props.start,
+            'p-carousel-item-end': props.end
+        }),
+    item: ({ itemProps: props }) =>
+        classNames(props.className, 'p-carousel-item', {
+            'p-carousel-item-active': props.active,
+            'p-carousel-item-start': props.start,
+            'p-carousel-item-end': props.end
+        })
+};
+
+const inlineStyles = {
+    itemsContent: ({ height }) => ({ height })
+};
+
+export const CarouselBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Carousel',
+        id: null,
+        value: null,
+        page: 0,
+        header: null,
+        footer: null,
+        style: null,
+        className: null,
+        itemTemplate: null,
+        circular: false,
+        showIndicators: true,
+        showNavigators: true,
+        autoplayInterval: 0,
+        numVisible: 1,
+        numScroll: 1,
+        prevIcon: null,
+        nextIcon: null,
+        responsiveOptions: null,
+        orientation: 'horizontal',
+        verticalViewPortHeight: '300px',
+        contentClassName: null,
+        containerClassName: null,
+        indicatorsContentClassName: null,
+        onPageChange: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/carousel/carousel.d.ts b/components/lib/carousel/carousel.d.ts
new file mode 100644
index 0000000000..1e6eaaa639
--- /dev/null
+++ b/components/lib/carousel/carousel.d.ts
@@ -0,0 +1,312 @@
+/**
+ *
+ * Carousel is a content slider featuring various customization options.
+ *
+ * [Live Demo](https://www.primereact.org/carousel)
+ *
+ * @module carousel
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type CarouselPassThroughType<T> = PassThroughType<T, CarouselPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CarouselPassThroughMethodOptions {
+    props: CarouselProps;
+    state: CarouselState;
+    context: CarouselContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CarouselProps.pt}
+ */
+export interface CarouselPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the previous button's DOM element.
+     */
+    previousButton?: CarouselPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous button icon's DOM element.
+     */
+    previousButtonIcon?: CarouselPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the items content's DOM element.
+     */
+    itemsContent?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the items container's DOM element.
+     */
+    itemsContainer?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item cloned's DOM element.
+     */
+    itemCloned?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the next button's DOM element.
+     */
+    nextButton?: CarouselPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next button icon's DOM element.
+     */
+    nextButtonIcon?: CarouselPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the indicators's DOM element.
+     */
+    indicators?: CarouselPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the indicator's DOM element.
+     */
+    indicator?: CarouselPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the indicator button's DOM element.
+     */
+    indicatorButton?: CarouselPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: CarouselPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in Carousel component.
+ */
+export interface CarouselState {
+    /**
+     * Number of items per page as a number.
+     * @defaultValue 1
+     */
+    numVisible: number;
+    /**
+     * Number of items to scroll as a number.
+     * @defaultValue 1
+     */
+    numScroll: number;
+    /**
+     * Index of the first item.
+     * @defaultValue 0
+     */
+    page: number;
+    /**
+     * Total shifted items' count as a number.
+     * @defaultValue 0
+     */
+    totalShiftedItems: number;
+}
+
+/**
+ * Defines current inline options in Carousel component.
+ */
+export interface CarouselContext {
+    /**
+     * Current active state of the indicator as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Custom responsive option
+ * @see {@link CarouselProps.responsiveOptions}
+ */
+interface CarouselResponsiveOption {
+    /**
+     * The breakpoint to define the maximum width boundary.
+     */
+    breakpoint: string;
+    /**
+     * Number of items per page.
+     */
+    numVisible: number;
+    /**
+     * Number of items to scroll.
+     */
+    numScroll: number;
+}
+
+/**
+ * Custom complete method event.
+ * @see {@link CarouselProps.onPageChange}
+ * @event
+ */
+interface CarouselPageChangeEvent {
+    /**
+     * Value of the new page.
+     */
+    page: number;
+}
+
+/**
+ * Defines valid properties in Carousel component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface CarouselProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * An array of objects to display.
+     */
+    value?: any[];
+    /**
+     * Index of the first item.
+     */
+    page?: number | undefined;
+    /**
+     * Label of header.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Label of footer.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for it.
+     * @param {*} item - Current item
+     */
+    itemTemplate?(item: any): React.ReactNode | undefined;
+    /**
+     * Defines if scrolling would be infinite.
+     * @defaultValue false
+     */
+    circular?: boolean | undefined;
+    /**
+     * Whether to display indicator container.
+     * @defaultValue true
+     */
+    showIndicators?: boolean | undefined;
+    /**
+     * Whether to display navigation buttons in container.
+     * @defaultValue true
+     */
+    showNavigators?: boolean | undefined;
+    /**
+     * Time in milliseconds to scroll items automatically.
+     */
+    autoplayInterval?: number | undefined;
+    /**
+     * Number of items per page.
+     * @defaultValue 1
+     */
+    numVisible?: number | undefined;
+    /**
+     * Number of items to scroll.
+     * @defaultValue 1
+     */
+    numScroll?: number | undefined;
+    /**
+     * Icon for the previous button by orientation.
+     */
+    prevIcon?: IconType<CarouselProps> | undefined;
+    /**
+     * Icon for the next button by orientation.
+     */
+    nextIcon?: IconType<CarouselProps> | undefined;
+    /**
+     * An array of options for responsive design.
+     * @type {CarouselResponsiveOption}
+     */
+    responsiveOptions?: CarouselResponsiveOption[] | undefined;
+    /**
+     * Specifies the layout of the component, valid values are "horizontal" and "vertical".
+     * @defaultValue horizontal
+     */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * Height of the viewport in vertical layout.
+     * @defaultValue 300px
+     */
+    verticalViewPortHeight?: string | undefined;
+    /**
+     * Style class of main content.
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Style class of the viewport container.
+     */
+    containerClassName?: string | undefined;
+    /**
+     * Style class of the paginator items.
+     */
+    indicatorsContentClassName?: string | undefined;
+    /**
+     * Callback to invoke after scroll.
+     * @param {CarouselPageChangeEvent} event - Custom change event.
+     */
+    onPageChange?(event: CarouselPageChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CarouselPassThroughOptions}
+     */
+    pt?: CarouselPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Carousel**
+ *
+ * _Carousel is a content slider featuring various customization options._
+ *
+ * [Live Demo](https://www.primereact.org/carousel/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Carousel extends React.Component<CarouselProps, any> {
+    /**
+     * Used to start the autoplay if it is currently stopped.
+     */
+    public startAutoplay(): void;
+    /**
+     * Used to stop the autoplay if it is currently started.
+     */
+    public stopAutoplay(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/carousel/package.json b/components/lib/carousel/package.json
new file mode 100644
index 0000000000..6bbd3fcc3f
--- /dev/null
+++ b/components/lib/carousel/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./carousel.cjs.js",
+    "module": "./carousel.esm.js",
+    "unpkg": "./carousel.min.js",
+    "types": "./carousel.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
new file mode 100644
index 0000000000..8e95614200
--- /dev/null
+++ b/components/lib/cascadeselect/CascadeSelect.js
@@ -0,0 +1,562 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { SpinnerIcon } from '../icons/spinner';
+import { TimesIcon } from '../icons/times';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { CascadeSelectBase } from './CascadeSelectBase';
+import { CascadeSelectSub } from './CascadeSelectSub';
+
+export const CascadeSelect = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = CascadeSelectBase.getProps(inProps, context);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
+        const { ptm, cx, isUnstyled } = CascadeSelectBase.setMetaData({
+            props,
+            state: {
+                focused: focusedState,
+                overlayVisible: overlayVisibleState,
+                attributeSelector: attributeSelectorState
+            },
+            context: {
+                ...context
+            }
+        });
+
+        useHandleStyle(CascadeSelectBase.css.styles, isUnstyled, { name: 'cascadeselect' });
+
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const inputRef = React.useRef(null);
+        const labelRef = React.useRef(null);
+        const styleElementRef = React.useRef(null);
+        const dirty = React.useRef(false);
+        const selectionPath = React.useRef(null);
+        const selfChange = React.useRef(null);
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { valid, type }) => {
+                if (valid) {
+                    if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const cascadeSelectOverlayDisplayOrder = useDisplayOrder('cascade-select', overlayVisibleState);
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: overlayVisibleState && cascadeSelectOverlayDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.CASCADE_SELECT, cascadeSelectOverlayDisplayOrder]
+        });
+
+        const onOptionSelect = (event) => {
+            if (props.onChange) {
+                selfChange.current = true;
+                props.onChange({
+                    originalEvent: event,
+                    value: event.value
+                });
+            }
+
+            updateSelectionPath();
+            hide();
+            DomHandler.focus(inputRef.current);
+        };
+
+        const onOptionGroupSelect = (event) => {
+            dirty.current = true;
+            props.onGroupChange && props.onGroupChange(event);
+        };
+
+        const getOptionLabel = (option) => {
+            const label = props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
+
+            return label || option;
+        };
+
+        const getOptionValue = (option) => {
+            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
+        };
+
+        const getOptionGroupChildren = (optionGroup, level) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[level]);
+        };
+
+        const isOptionGroup = (option, level) => {
+            return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[level]);
+        };
+
+        const updateSelectionPath = () => {
+            let path;
+
+            if (props.value != null && props.options) {
+                for (let option of props.options) {
+                    path = findModelOptionInGroup(option, 0);
+
+                    if (path) {
+                        break;
+                    }
+                }
+            }
+
+            selectionPath.current = path;
+        };
+
+        const findModelOptionInGroup = (option, level) => {
+            if (isOptionGroup(option, level)) {
+                let selectedOption;
+
+                for (let childOption of getOptionGroupChildren(option, level)) {
+                    selectedOption = findModelOptionInGroup(childOption, level + 1);
+
+                    if (selectedOption) {
+                        selectedOption.unshift(option);
+
+                        return selectedOption;
+                    }
+                }
+            } else if (ObjectUtils.equals(props.value, getOptionValue(option), props.dataKey)) {
+                return [option];
+            }
+
+            return null;
+        };
+
+        const onClick = (event) => {
+            if (props.disabled || props.loading) {
+                return;
+            }
+
+            if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
+                DomHandler.focus(inputRef.current);
+                overlayVisibleState ? hide() : show();
+            }
+        };
+
+        const onInputFocus = () => {
+            setFocusedState(true);
+        };
+
+        const onInputBlur = () => {
+            setFocusedState(false);
+        };
+
+        const onInputKeyDown = (event) => {
+            switch (event.which) {
+                //down
+                case 40:
+                    if (overlayVisibleState) {
+                        DomHandler.findSingle(overlayRef.current, '[data-pc-section="item"]').children[0].focus();
+                    } else if (event.altKey && props.options && props.options.length) {
+                        show();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                //space
+                case 32:
+                    overlayVisibleState ? hide() : show();
+
+                    event.preventDefault();
+                    break;
+
+                //tab
+                case 9:
+                    hide();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onPanelClick = (event) => {
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: elementRef.current
+            });
+        };
+
+        const show = () => {
+            props.onBeforeShow && props.onBeforeShow();
+            setOverlayVisibleState(true);
+        };
+
+        const hide = () => {
+            props.onBeforeHide && props.onBeforeHide();
+            setOverlayVisibleState(false);
+            DomHandler.focus(inputRef.current);
+        };
+
+        const onOverlayEnter = () => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            alignOverlay();
+
+            if (attributeSelectorState && props.breakpoint) {
+                overlayRef.current.setAttribute(attributeSelectorState + '_panel', '');
+                createStyle();
+            }
+        };
+
+        const onOverlayEntered = () => {
+            bindOverlayListener();
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+            dirty.current = false;
+        };
+
+        const onOverlayExited = () => {
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+            destroyStyle();
+        };
+
+        const alignOverlay = () => {
+            DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+        };
+
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+                const selector = `${attributeSelectorState}_panel`;
+                const innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-items-wrapper > ul {
+        max-height: ${props.scrollHeight};
+        overflow: ${props.scrollHeight ? 'auto' : ''};
+    }
+
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-sublist-wrapper {
+        position:relative;
+        left:0 !important;
+    }
+
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-sublist {
+        overflow: hidden !important;
+    }
+
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-item-active  .p-cascadeselect-sublist {
+        left: 0;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */
+    }
+
+    .p-cascadeselect-panel[${selector}] .p-cascadeselect-group-icon:before {
+        content: "\\e930";
+    }
+}
+`;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current,
+            getLabel: () => labelRef.current,
+            focus: () => DomHandler.focus(inputRef.current)
+        }));
+
+        useMountEffect(() => {
+            if (props.breakpoint) {
+                !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+            }
+
+            if (props.autoFocus) {
+                DomHandler.focus(inputRef.current, props.autoFocus);
+            }
+
+            alignOverlay();
+        });
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useUpdateEffect(() => {
+            updateSelectionPath();
+        }, [props.value]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        const createKeyboardHelper = () => {
+            const value = props.value ? getOptionLabel(props.value) : undefined;
+            const hiddenSelectedMessageProps = mergeProps(
+                {
+                    className: 'p-hidden-accessible'
+                },
+                ptm('hiddenSelectedMessage')
+            );
+
+            const inputProps = mergeProps(
+                {
+                    ref: inputRef,
+                    type: 'text',
+                    id: props.inputId,
+                    name: props.name,
+                    defaultValue: value,
+                    readOnly: true,
+                    disabled: props.disabled,
+                    onFocus: onInputFocus,
+                    onBlur: onInputBlur,
+                    onKeyDown: (e) => onInputKeyDown(e),
+                    tabIndex: props.tabIndex,
+                    'aria-haspopup': 'listbox',
+                    ...ariaProps
+                },
+                ptm('input')
+            );
+
+            return (
+                <div {...hiddenSelectedMessageProps}>
+                    <input {...inputProps} />
+                </div>
+            );
+        };
+
+        const clear = (event) => {
+            if (props.onChange) {
+                selfChange.current = true;
+
+                props.onChange({
+                    originalEvent: event,
+                    value: undefined,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: undefined
+                    }
+                });
+            }
+        };
+
+        const onClearIconKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                clear(event);
+                event.preventDefault();
+            }
+        };
+
+        const createClearIcon = () => {
+            if (props.value != null && props.showClear && !props.disabled) {
+                const clearIconProps = mergeProps(
+                    {
+                        className: cx('clearIcon'),
+                        onPointerUp: clear,
+                        tabIndex: props.tabIndex || '0',
+                        onKeyDown: onClearIconKeyDown,
+                        'aria-label': localeOption('clear')
+                    },
+                    ptm('clearIcon')
+                );
+                const icon = props.clearIcon || <TimesIcon {...clearIconProps} />;
+
+                return IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props });
+            }
+
+            return null;
+        };
+
+        const createLabel = () => {
+            const label = props.value ? getOptionLabel(props.value) : props.placeholder || 'p-emptylabel';
+
+            const labelProps = mergeProps(
+                {
+                    ref: labelRef,
+                    className: cx('label', { label })
+                },
+                ptm('label', { context: { label, ...context } })
+            );
+
+            return <span {...labelProps}>{label}</span>;
+        };
+
+        const createLoadingIcon = () => {
+            const loadingIconProps = mergeProps(
+                {
+                    className: cx('loadingIcon')
+                },
+                ptm('loadingIcon')
+            );
+            const icon = props.loadingIcon || <SpinnerIcon spin />;
+            const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+            const loadingButtonProps = mergeProps(
+                {
+                    className: cx('loadingButton'),
+                    role: 'button',
+                    'aria-haspopup': 'listbox',
+                    'aria-expanded': overlayVisibleState
+                },
+                ptm('dropdownButton')
+            );
+
+            return <div {...loadingButtonProps}>{loadingIcon}</div>;
+        };
+
+        const createDropdownIcon = () => {
+            const dropdownIconProps = mergeProps(
+                {
+                    className: cx('dropdownIcon')
+                },
+                ptm('dropdownIcon')
+            );
+            const icon = props.dropdownIcon || <ChevronDownIcon {...dropdownIconProps} />;
+            const dropdownIcon = IconUtils.getJSXIcon(icon, { ...dropdownIconProps }, { props });
+            const dropdownButtonProps = mergeProps(
+                {
+                    className: cx('dropdownButton'),
+                    role: 'button',
+                    'aria-haspopup': 'listbox',
+                    'aria-expanded': overlayVisibleState
+                },
+                ptm('dropdownButton')
+            );
+
+            return <div {...dropdownButtonProps}>{dropdownIcon}</div>;
+        };
+
+        const wrapperProps = mergeProps(
+            {
+                className: cx('wrapper')
+            },
+            ptm('wrapper')
+        );
+
+        const panelProps = mergeProps(
+            {
+                ref: overlayRef,
+                className: classNames(props.panelClassName, cx('panel')),
+                style: props.panelStyle,
+                onClick: (e) => onPanelClick(e)
+            },
+            ptm('panel')
+        );
+
+        const createOverlay = () => {
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: overlayVisibleState,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter: onOverlayEnter,
+                    onEntered: onOverlayEntered,
+                    onExit: onOverlayExit,
+                    onExited: onOverlayExited
+                },
+                ptm('transition')
+            );
+
+            const overlay = (
+                <CSSTransition nodeRef={overlayRef} {...transitionProps}>
+                    <div {...panelProps}>
+                        <div {...wrapperProps}>
+                            <CascadeSelectSub
+                                hostName="CascadeSelect"
+                                options={props.options}
+                                selectionPath={selectionPath.current}
+                                optionGroupIcon={props.optionGroupIcon}
+                                optionLabel={props.optionLabel}
+                                optionValue={props.optionValue}
+                                parentActive={props.value != null}
+                                level={0}
+                                optionGroupLabel={props.optionGroupLabel}
+                                optionGroupChildren={props.optionGroupChildren}
+                                onOptionSelect={onOptionSelect}
+                                onOptionGroupSelect={onOptionGroupSelect}
+                                root
+                                template={props.itemTemplate}
+                                onPanelHide={hide}
+                                ptm={ptm}
+                                cx={cx}
+                            />
+                        </div>
+                    </div>
+                </CSSTransition>
+            );
+
+            return <Portal element={overlay} appendTo={props.appendTo} />;
+        };
+
+        const createElement = () => {
+            const keyboardHelper = createKeyboardHelper();
+            const labelElement = createLabel();
+            const clearIcon = createClearIcon();
+            const dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
+            const overlay = createOverlay();
+            const rootProps = mergeProps(
+                {
+                    id: props.id,
+                    ref: elementRef,
+                    className: classNames(props.className, cx('root', { focusedState, overlayVisibleState, context })),
+                    style: props.style,
+                    onClick: (e) => onClick(e)
+                },
+                otherProps,
+                ptm('root')
+            );
+
+            return (
+                <div {...rootProps}>
+                    {keyboardHelper}
+                    {labelElement}
+                    {clearIcon}
+                    {dropdownIcon}
+                    {overlay}
+                </div>
+            );
+        };
+
+        const otherProps = CascadeSelectBase.getOtherProps(props);
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const element = createElement();
+
+        return element;
+    })
+);
+
+CascadeSelect.displayName = 'CascadeSelect';
diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
new file mode 100644
index 0000000000..3f159f15e5
--- /dev/null
+++ b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -0,0 +1,179 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, focusedState, overlayVisibleState, context }) =>
+        classNames('p-cascadeselect p-component p-inputwrapper', {
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
+            'p-focus': focusedState,
+            'p-inputwrapper-filled': props.value,
+            'p-inputwrapper-focus': focusedState || overlayVisibleState
+        }),
+    label: ({ props, label }) =>
+        classNames('p-cascadeselect-label ', {
+            'p-placeholder': label === props.placeholder,
+            'p-cascadeselect-label-empty': !props.value && label === 'p-emptylabel'
+        }),
+    list: 'p-cascadeselect-panel p-cascadeselect-items',
+    sublistWrapper: 'p-cascadeselect-sublist-wrapper',
+    sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
+    item: ({ option, isGroup, isSelected }) =>
+        classNames('p-cascadeselect-item', {
+            'p-cascadeselect-item-group': isGroup,
+            'p-cascadeselect-item-active p-highlight': isSelected
+        }),
+    dropdownIcon: 'p-cascadeselect-trigger-icon',
+    clearIcon: 'p-cascadeselect-clear-icon p-clickable',
+    loadingIcon: 'p-cascadeselect-trigger-icon',
+    dropdownButton: 'p-cascadeselect-trigger',
+    loadingButton: 'p-cascadeselect-trigger',
+    wrapper: 'p-cascadeselect-items-wrapper',
+    panel: 'p-cascadeselect-panel p-component',
+    content: 'p-cascadeselect-item-content',
+    optionGroupIcon: 'p-cascadeselect-group-icon',
+    text: 'p-cascadeselect-item-text',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-cascadeselect {
+        display: inline-flex;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+    }
+
+    .p-cascadeselect-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-cascadeselect-label {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        flex: 1 1 auto;
+        width: 1%;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+
+    .p-cascadeselect-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    .p-cascadeselect .p-cascadeselect-panel {
+        min-width: 100%;
+    }
+
+    .p-cascadeselect-item {
+        cursor: pointer;
+        font-weight: normal;
+        white-space: nowrap;
+    }
+
+    .p-cascadeselect-item-content {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-cascadeselect-group-icon {
+        margin-left: auto;
+    }
+
+    .p-cascadeselect-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        min-width: 100%;
+    }
+
+    .p-fluid .p-cascadeselect {
+        display: flex;
+    }
+
+    .p-fluid .p-cascadeselect .p-cascadeselect-label {
+        width: 1%;
+    }
+
+    .p-cascadeselect-sublist-wrapper {
+        position: absolute;
+        min-width: 100%;
+        z-index: 1;
+        display: none;
+    }
+
+    .p-cascadeselect-item-active {
+        overflow: visible;
+    }
+
+    .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {
+        display: block;
+        left: 100%;
+        top: 0;
+    }
+    .p-cascadeselect-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+        right: 3rem;
+    }
+}
+`;
+
+export const CascadeSelectBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'CascadeSelect',
+        appendTo: null,
+        ariaLabelledBy: null,
+        autoFocus: false,
+        breakpoint: undefined,
+        showClear: false,
+        className: null,
+        dataKey: null,
+        disabled: false,
+        loadingIcon: null,
+        dropdownIcon: null,
+        loading: false,
+        id: null,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        variant: null,
+        itemTemplate: null,
+        name: null,
+        onBeforeHide: null,
+        onBeforeShow: null,
+        onChange: null,
+        onGroupChange: null,
+        onHide: null,
+        onShow: null,
+        optionGroupChildren: null,
+        optionGroupIcon: null,
+        optionGroupLabel: null,
+        optionLabel: null,
+        optionValue: null,
+        options: null,
+        panelClassName: null,
+        panelStyle: null,
+        placeholder: null,
+        scrollHeight: '400px',
+        style: null,
+        tabIndex: null,
+        transitionOptions: null,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
new file mode 100644
index 0000000000..854deae360
--- /dev/null
+++ b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -0,0 +1,327 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { AngleRightIcon } from '../icons/angleright';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+export const CascadeSelectSub = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const [activeOptionState, setActiveOptionState] = React.useState(null);
+    const elementRef = React.useRef(null);
+    const shouldFocusSubmenu = React.useRef(false);
+    const context = React.useContext(PrimeReactContext);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            state: { ...options }
+        });
+    };
+
+    const position = () => {
+        const parentItem = elementRef.current.parentElement.parentElement;
+        const containerOffset = DomHandler.getOffset(parentItem);
+        const viewport = DomHandler.getViewport();
+        const sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(element);
+        const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
+
+        if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
+            elementRef.current.parentElement.style.left = '-100%';
+        }
+    };
+
+    const onOptionSelect = (event) => {
+        props.onOptionSelect && props.onOptionSelect(event);
+    };
+
+    const onKeyDown = (event, option) => {
+        const listItem = event.currentTarget.parentElement;
+
+        switch (event.key) {
+            case 'Down':
+            case 'ArrowDown':
+                const nextItem = findNextItem(listItem);
+
+                if (nextItem) {
+                    nextItem.children[0].focus();
+                }
+
+                break;
+
+            case 'Up':
+            case 'ArrowUp':
+                const prevItem = findPrevItem(listItem);
+
+                if (prevItem) {
+                    prevItem.children[0].focus();
+                }
+
+                break;
+
+            case 'Right':
+            case 'ArrowRight':
+                if (isOptionGroup(option)) {
+                    if (activeOptionState === option) {
+                        listItem.children[1].children[0].children[0].focus();
+                    } else {
+                        shouldFocusSubmenu.current = true;
+                        setActiveOptionState(option);
+                    }
+                }
+
+                break;
+
+            case 'Left':
+            case 'ArrowLeft':
+                setActiveOptionState(null);
+
+                const currentList = event.currentTarget.parentElement.parentElement;
+                const wrapperDiv = currentList.parentElement;
+                const parentListItem = wrapperDiv.parentElement;
+
+                if (parentListItem && parentListItem.tagName === 'LI') {
+                    const parentContent = parentListItem.querySelector('[data-pc-section="content"]');
+
+                    if (parentContent) {
+                        parentContent.focus();
+                    }
+                }
+
+                break;
+
+            case 'Enter':
+                onOptionClick(event, option);
+                break;
+
+            case 'Tab':
+            case 'Escape':
+                if (props.onPanelHide) {
+                    props.onPanelHide();
+                    event.preventDefault();
+                }
+
+                break;
+
+            default:
+                break;
+        }
+
+        event.preventDefault();
+    };
+
+    const findNextItem = (item) => {
+        const nextItem = item.nextElementSibling;
+
+        return nextItem ? (DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-cascadeselect-item') ? findNextItem(nextItem) : nextItem) : null;
+    };
+
+    const findPrevItem = (item) => {
+        const prevItem = item.previousElementSibling;
+
+        return prevItem ? (DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-cascadeselect-item') ? findPrevItem(prevItem) : prevItem) : null;
+    };
+
+    const onOptionClick = (event, option) => {
+        if (isOptionGroup(option)) {
+            setActiveOptionState((prevActiveOption) => (prevActiveOption === option ? null : option));
+
+            if (props.onOptionGroupSelect) {
+                props.onOptionGroupSelect({
+                    originalEvent: event,
+                    value: option
+                });
+            }
+        } else if (props.onOptionSelect) {
+            props.onOptionSelect({
+                originalEvent: event,
+                value: getOptionValue(option)
+            });
+        }
+    };
+
+    const onOptionGroupSelect = (event) => {
+        props.onOptionGroupSelect && props.onOptionGroupSelect(event);
+    };
+
+    const getOptionLabel = (option) => {
+        return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
+    };
+
+    const getOptionValue = (option) => {
+        return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
+    };
+
+    const getOptionGroupLabel = (optionGroup) => {
+        return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : null;
+    };
+
+    const getOptionGroupChildren = (optionGroup) => {
+        return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren[props.level]);
+    };
+
+    const isOptionGroup = (option) => {
+        return Object.prototype.hasOwnProperty.call(option, props.optionGroupChildren[props.level]);
+    };
+
+    const getOptionLabelToRender = (option) => {
+        return isOptionGroup(option) ? getOptionGroupLabel(option) : getOptionLabel(option);
+    };
+
+    useMountEffect(() => {
+        if (props.selectionPath && props.options && !props.dirty) {
+            const activeOption = props.options.find((o) => props.selectionPath.includes(o));
+
+            activeOption && setActiveOptionState(activeOption);
+        }
+
+        if (!props.root) {
+            position();
+        }
+    });
+
+    useUpdateEffect(() => {
+        if (!props.parentActive) {
+            setActiveOptionState(null);
+        }
+    }, [props.parentActive]);
+
+    useUpdateEffect(() => {
+        if (shouldFocusSubmenu.current && activeOptionState && elementRef.current) {
+            shouldFocusSubmenu.current = false;
+
+            setTimeout(() => {
+                const activeItem = elementRef.current.querySelector('[data-p-highlight="true"]');
+
+                if (activeItem && activeItem.children.length > 1) {
+                    const submenuWrapper = activeItem.children[1];
+                    const firstFocusable = submenuWrapper.querySelector('div[tabindex="0"]');
+
+                    if (firstFocusable) {
+                        firstFocusable.focus();
+                    }
+                }
+            }, 150);
+        }
+    }, [activeOptionState]);
+
+    const createSubmenu = (option) => {
+        if (isOptionGroup(option) && activeOptionState === option) {
+            const options = getOptionGroupChildren(option);
+            const parentActive = activeOptionState === option;
+            const level = props.level + 1;
+
+            return (
+                <CascadeSelectSub
+                    hostName={props.hostName}
+                    options={options}
+                    className={cx('sublist')}
+                    selectionPath={props.selectionPath}
+                    optionLabel={props.optionLabel}
+                    optionValue={props.optionValue}
+                    level={level}
+                    onOptionSelect={onOptionSelect}
+                    onOptionGroupSelect={onOptionGroupSelect}
+                    parentActive={parentActive}
+                    optionGroupLabel={props.optionGroupLabel}
+                    optionGroupChildren={props.optionGroupChildren}
+                    dirty={props.dirty}
+                    template={props.template}
+                    onPanelHide={props.onPanelHide}
+                    ptm={ptm}
+                    cx={cx}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    const createOption = (option, index) => {
+        const submenu = createSubmenu(option);
+        const textProps = mergeProps(
+            {
+                className: cx('text')
+            },
+            getPTOptions('text')
+        );
+        const content = props.template ? ObjectUtils.getJSXElement(props.template, getOptionValue(option)) : <span {...textProps}>{getOptionLabelToRender(option)}</span>;
+        const optionGroupIconProps = mergeProps(
+            {
+                className: cx('optionGroupIcon')
+            },
+            getPTOptions('optionGroupIcon')
+        );
+        const icon = props.optionGroupIcon || <AngleRightIcon {...optionGroupIconProps} />;
+        const optionGroup = isOptionGroup(option) && IconUtils.getJSXIcon(icon, { ...optionGroupIconProps }, { props });
+        const key = getOptionLabelToRender(option) + '_' + index;
+        const contentProps = mergeProps(
+            {
+                className: cx('content'),
+                onClick: (event) => onOptionClick(event, option),
+                tabIndex: 0,
+                onKeyDown: (event) => onKeyDown(event, option)
+            },
+            getPTOptions('content')
+        );
+
+        const isSelected = activeOptionState === option;
+        const isGroup = isOptionGroup(option);
+        const itemProps = mergeProps(
+            {
+                className: classNames(option.className, cx('item', { option, isGroup, isSelected })),
+                style: option.style,
+                role: 'none',
+                'data-p-item-group': isGroup,
+                'data-p-highlight': isSelected
+            },
+            getPTOptions('item', { selected: isSelected, group: isGroup })
+        );
+
+        return (
+            <li key={key} {...itemProps}>
+                <div {...contentProps}>
+                    {content}
+                    {optionGroup}
+                    <Ripple />
+                </div>
+                {submenu}
+            </li>
+        );
+    };
+
+    const createMenu = () => {
+        return props.options ? props.options.map(createOption) : null;
+    };
+
+    const createList = () => {
+        const listProps = mergeProps(
+            {
+                ref: elementRef,
+                className: cx(props.level === 0 ? 'list' : 'sublist', { context }),
+                role: 'listbox',
+                'aria-orientation': 'horizontal'
+            },
+            props.level === 0 ? getPTOptions('list') : getPTOptions('sublist')
+        );
+        const submenu = createMenu();
+
+        return <ul {...listProps}>{submenu}</ul>;
+    };
+
+    const createElement = () => {
+        const list = createList();
+        const listWrapperProps = mergeProps(
+            {
+                className: cx('sublistWrapper')
+            },
+            getPTOptions('sublistWrapper')
+        );
+
+        return props.level === 0 ? list : <div {...listWrapperProps}>{list}</div>;
+    };
+
+    const element = createElement();
+
+    return element;
+});
diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
new file mode 100644
index 0000000000..63ea02552d
--- /dev/null
+++ b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -0,0 +1,390 @@
+/**
+ *
+ * CascadeSelect is a form component to select a value from a nested structure of options.
+ *
+ * [Live Demo](https://www.primereact.org/cascadeselect/)
+ *
+ * @module cascadeselect
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { APIOptions } from '../api/api';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type CascadeSelectPassThroughType<T> = PassThroughType<T, CascadeSelectPassThroughMethodOptions>;
+export declare type CascadeSelectPassThroughTransitionType = ReactCSSTransitionProps | ((options: CascadeSelectPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CascadeSelectPassThroughMethodOptions {
+    props: CascadeSelectProps;
+    state: CascadeSelectState;
+    context: CascadeSelectContext;
+}
+
+/**
+ * Defines current inline state in CascadeSelect component.
+ */
+export interface CascadeSelectState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused?: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible?: boolean;
+    /**
+     * Current overlay attributeSelector state as a string.
+     */
+    attributeSelector?: string;
+    /**
+     * For items, this is the state of the item.
+     */
+    selected?: boolean;
+    /**
+     * For items, this is whether it is a group item or not.
+     */
+    grouped?: boolean;
+}
+
+/**
+ * Defines current inline context in CascadeSelect component.
+ */
+export interface CascadeSelectContext extends APIOptions {
+    /**
+     * Label of the currently selected item
+     */
+    label?: string;
+}
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CascadeSelectProps.pt}
+ */
+export interface CascadeSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the dropdown button's DOM element.
+     */
+    dropdownButton?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: CascadeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the sub-list's DOM element.
+     */
+    sublist?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the optionGroup icon's DOM element.
+     */
+    optionGroupIcon?: CascadeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: CascadeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: CascadeSelectPassThroughTransitionType;
+}
+
+/**
+ * Custom change event
+ * @see {@link CascadeSelectProps.onChange}
+ * @event
+ */
+interface CascadeSelectChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value: any;
+}
+
+/**
+ * Custom group change event.
+ * @see {@link CascadeSelectProps.onGroupChange}
+ * @extends {CascadeSelectChangeEvent}
+ * @event
+ */
+interface CascadeSelectGroupChangeEvent extends CascadeSelectChangeEvent {}
+
+/**
+ * Defines valid properties in CascadeSelect component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Value of the component.
+     */
+    value?: any;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * An array of selectitems to display as the available options.
+     */
+    options?: SelectItemOptionsType | undefined;
+    /**
+     * Property name or getter function to use as the label of an option.
+     */
+    optionLabel?: string | undefined;
+    /**
+     * Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
+     */
+    optionValue?: string | undefined;
+    /**
+     * Icon of the option group.
+     */
+    optionGroupIcon?: IconType<CascadeSelectProps> | undefined;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     */
+    optionGroupLabel?: string | undefined;
+    /**
+     * Property name or getter function to retrieve the items of a group.
+     */
+    optionGroupChildren?: string[] | undefined;
+    /**
+     * Default text to display when no option is selected.
+     */
+    placeholder?: string | undefined;
+    /**
+     * The template of items.
+     */
+    itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode) | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * A property to uniquely identify an option.
+     */
+    dataKey?: string | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Icon of the dropdown icon.
+     */
+    dropdownIcon?: IconType<CascadeSelectProps> | undefined;
+    /**
+     * Maximum height of the options panel on responsive mode.
+     * @defaultValue 400px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean;
+    /**
+     * Display loading icon.
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Name of the loading icon or JSX.Element for loading icon.
+     */
+    loadingIcon?: IconType<CascadeSelectProps> | undefined;
+    /**
+     * Callback to invoke on value change
+     * @param {CascadeSelectChangeEvent} event - Custom change event
+     */
+    onChange?(event: CascadeSelectChangeEvent): void;
+    /**
+     * Callback to invoke when a group changes.
+     * @param {CascadeSelectGroupChangeEvent} event - Custom group change event
+     */
+    onGroupChange?(event: CascadeSelectGroupChangeEvent): void;
+    /**
+     * Callback to invoke before the overlay is shown.
+     */
+    onBeforeShow?(): void;
+    /**
+     * Callback to invoke before the overlay is hidden.
+     */
+    onBeforeHide?(): void;
+    /**
+     * Callback to invoke when the overlay is shown.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when the overlay is hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CascadeSelectPassThroughOptions}
+     */
+    pt?: CascadeSelectPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Style class of the cascadeselect panel.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * Inline style of the cascadeselect panel.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+}
+
+/**
+ * **PrimeReact - CascadeSelect**
+ *
+ * _CascadeSelect is a form component to select a value from a nested structure of options._
+ *
+ * [Live Demo](https://www.primereact.org/cascadeselect/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class CascadeSelect extends React.Component<CascadeSelectProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+    /**
+     * Used to get label element.
+     * @return {HTMLSpanElement | null} Label element
+     */
+    public getLabel(): HTMLSpanElement | null;
+}
diff --git a/components/lib/cascadeselect/package.json b/components/lib/cascadeselect/package.json
new file mode 100644
index 0000000000..590e5d9b66
--- /dev/null
+++ b/components/lib/cascadeselect/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./cascadeselect.cjs.js",
+    "module": "./cascadeselect.esm.js",
+    "unpkg": "./cascadeselect.min.js",
+    "types": "./cascadeselect.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
new file mode 100644
index 0000000000..94984315ff
--- /dev/null
+++ b/components/lib/chart/Chart.js
@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useUnmountEffect } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { ChartBase } from './ChartBase';
+
+// GitHub #3059 wrapper if loaded by script tag
+const ChartJS = (function () {
+    try {
+        return Chart;
+    } catch {
+        return null;
+    }
+})();
+
+const PrimeReactChart = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ChartBase.getProps(inProps, context);
+
+        const { ptm, cx, sx, isUnstyled } = ChartBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(ChartBase.css.styles, isUnstyled, { name: 'chart' });
+        const elementRef = React.useRef(null);
+        const chartRef = React.useRef(null);
+        const canvasRef = React.useRef(null);
+
+        const initChart = () => {
+            destroyChart();
+
+            const configuration = {
+                type: props.type,
+                data: props.data,
+                options: props.options,
+                plugins: props.plugins
+            };
+
+            if (ChartJS) {
+                // GitHub #3059 loaded by script only
+                chartRef.current = new ChartJS(canvasRef.current, configuration);
+            } else {
+                import('chart.js/auto').then((module) => {
+                    destroyChart();
+
+                    // In case that the Chart component has been unmounted during asynchronous loading of ChartJS,
+                    // the canvasRef will not be available anymore, and no Chart should be created.
+                    if (!canvasRef.current) {
+                        return;
+                    }
+
+                    if (module) {
+                        if (module.default) {
+                            // WebPack
+                            chartRef.current = new module.default(canvasRef.current, configuration);
+                        } else {
+                            // ParcelJS
+                            chartRef.current = new module(canvasRef.current, configuration);
+                        }
+                    }
+                });
+            }
+        };
+
+        const destroyChart = () => {
+            if (chartRef.current) {
+                chartRef.current.destroy();
+                chartRef.current = null;
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getCanvas: () => canvasRef.current,
+            getChart: () => chartRef.current,
+            getBase64Image: () => chartRef.current.toBase64Image(),
+            getElement: () => elementRef.current,
+            generateLegend: () => chartRef.current && chartRef.current.generateLegend(),
+            refresh: () => chartRef.current && chartRef.current.update()
+        }));
+
+        React.useEffect(() => {
+            initChart();
+        });
+
+        useUnmountEffect(() => {
+            destroyChart();
+        });
+
+        const title = props.options && props.options.plugins && props.options.plugins.title && props.options.plugins.title.text;
+        const ariaLabel = props.ariaLabel || title;
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                style: sx('root'),
+                className: classNames(props.className, cx('root'))
+            },
+            ChartBase.getOtherProps(props),
+            ptm('root')
+        );
+        const canvasProps = mergeProps(
+            {
+                ref: canvasRef,
+                width: props.width,
+                height: props.height,
+                role: 'img',
+                'aria-label': ariaLabel
+            },
+            ptm('canvas')
+        );
+
+        return (
+            <div {...rootProps}>
+                <canvas {...canvasProps} />
+            </div>
+        );
+    }),
+    (prevProps, nextProps) => prevProps.data === nextProps.data && prevProps.options === nextProps.options && prevProps.type === nextProps.type
+);
+
+PrimeReactChart.displayName = 'Chart';
+
+export { PrimeReactChart as Chart };
diff --git a/components/lib/chart/ChartBase.js b/components/lib/chart/ChartBase.js
new file mode 100644
index 0000000000..cb03aa81c1
--- /dev/null
+++ b/components/lib/chart/ChartBase.js
@@ -0,0 +1,39 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+export const ChartBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Chart',
+        id: null,
+        type: null,
+        data: null,
+        options: null,
+        plugins: null,
+        width: null,
+        height: null,
+        style: null,
+        className: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            root: 'p-chart'
+        },
+        inlineStyles: {
+            root: ({ props }) =>
+                Object.assign(
+                    {
+                        width: props.width,
+                        height: props.height
+                    },
+                    props.style
+                )
+        },
+        styles: `
+        @layer primereact {
+            .p-chart {
+                position: relative
+            }
+        }
+        `
+    }
+});
diff --git a/components/lib/chart/chart.d.ts b/components/lib/chart/chart.d.ts
new file mode 100644
index 0000000000..fa564d62b2
--- /dev/null
+++ b/components/lib/chart/chart.d.ts
@@ -0,0 +1,141 @@
+/**
+ *
+ * Chart components are based on Chart.js, an open source HTML5 based charting library.
+ *
+ * [Live Demo](https://www.primereact.org/chart)
+ *
+ * @module chart
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ChartPassThroughType<T> = PassThroughType<T, ChartPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChartPassThroughMethodOptions {
+    props: ChartProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChartProps.pt}
+ */
+export interface ChartPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChartPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the canvas's DOM element.
+     */
+    canvas?: ChartPassThroughType<React.HTMLAttributes<HTMLCanvasElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Chart component.
+ * @group Properties
+ */
+export interface ChartProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'content' | 'pt'> {
+    /**
+     * Type of the chart.
+     */
+    type?: string | undefined;
+    /**
+     * Data to display.
+     */
+    data?: object | undefined;
+    /**
+     * Options to customize the chart.
+     */
+    options?: object | undefined;
+    /**
+     * Used to custom plugins of the chart.
+     */
+    plugins?: any[] | undefined;
+    /**
+     * Width of the chart in non-responsive mode.
+     */
+    width?: string | undefined;
+    /**
+     * Height of the chart in non-responsive mode.
+     */
+    height?: string | undefined;
+    /**
+     * ARIA label for the chart canvas. Defaults to options.plugins.title.text if available.
+     * @default options.plugins.title.text
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChartPassThroughOptions}
+     */
+    pt?: ChartPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Chart**
+ *
+ * _Chart components are based on Chart.js, an open source HTML5 based charting library._
+ *
+ * [Live Demo](https://www.primereact.org/chart/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Chart extends React.Component<ChartProps, any> {
+    /**
+     * Used to get canvas element.
+     * @return {HTMLCanvasElement} Canvas element
+     */
+    public getCanvas(): HTMLCanvasElement;
+    /**
+     * Used to get chart instance.
+     * @return {*} Chart instance
+     */
+    public getChart(): any;
+    /**
+     * Used to get base64 image.
+     * @return {*} base64 image
+     */
+    public getBase64Image(): any;
+    /**
+     * Used to generate legend.
+     * @return {string} Generated legend
+     */
+    public generateLegend(): string;
+    /**
+     * Redraws the graph.
+     */
+    public refresh(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/chart/package.json b/components/lib/chart/package.json
new file mode 100644
index 0000000000..8db22439f5
--- /dev/null
+++ b/components/lib/chart/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./chart.cjs.js",
+    "module": "./chart.esm.js",
+    "unpkg": "./chart.min.js",
+    "types": "./chart.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
new file mode 100644
index 0000000000..fd8b6a143a
--- /dev/null
+++ b/components/lib/checkbox/Checkbox.js
@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { CheckboxBase } from './CheckboxBase';
+
+export const Checkbox = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = CheckboxBase.getProps(inProps, context);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const { ptm, cx, isUnstyled } = CheckboxBase.setMetaData({
+            props,
+            state: {
+                focused: focusedState
+            },
+            context: {
+                checked: props.checked === props.trueValue,
+                disabled: props.disabled
+            }
+        });
+
+        useHandleStyle(CheckboxBase.css.styles, isUnstyled, { name: 'checkbox' });
+
+        const elementRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+
+        const isChecked = () => {
+            return props.checked === props.trueValue;
+        };
+
+        const onChange = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            if (props.onChange) {
+                const checked = isChecked();
+                const value = checked ? props.falseValue : props.trueValue;
+                const eventData = {
+                    originalEvent: event,
+                    value: props.value,
+                    checked: value,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        type: 'checkbox',
+                        name: props.name,
+                        id: props.id,
+                        value: props.value,
+                        checked: value
+                    }
+                };
+
+                props?.onChange?.(eventData);
+
+                // do not continue if the user defined click wants to prevent
+                if (event.defaultPrevented) {
+                    return;
+                }
+
+                DomHandler.focus(inputRef.current);
+            }
+        };
+
+        const onFocus = (event) => {
+            setFocusedState(true);
+            props?.onFocus?.(event);
+        };
+
+        const onBlur = (event) => {
+            setFocusedState(false);
+            props?.onBlur?.(event);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useUpdateEffect(() => {
+            inputRef.current.checked = isChecked();
+        }, [props.checked, props.trueValue]);
+
+        useMountEffect(() => {
+            if (props.autoFocus) {
+                DomHandler.focus(inputRef.current, props.autoFocus);
+            }
+        });
+
+        const checked = isChecked();
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = CheckboxBase.getOtherProps(props);
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                className: classNames(props.className, cx('root', { checked, context })),
+                style: props.style,
+                'data-p-highlight': checked,
+                'data-p-disabled': props.disabled,
+                onContextMenu: props.onContextMenu,
+                onMouseDown: props.onMouseDown
+            },
+            otherProps,
+            ptm('root')
+        );
+
+        const createInputElement = () => {
+            const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+            const inputProps = mergeProps(
+                {
+                    id: props.inputId,
+                    type: 'checkbox',
+                    className: cx('input'),
+                    name: props.name,
+                    tabIndex: props.tabIndex,
+                    onFocus: (e) => onFocus(e),
+                    onBlur: (e) => onBlur(e),
+                    onChange: (e) => onChange(e),
+                    disabled: props.disabled,
+                    readOnly: props.readOnly,
+                    required: props.required,
+                    'aria-invalid': props.invalid,
+                    checked: checked,
+                    ...ariaProps
+                },
+                ptm('input')
+            );
+
+            return <input ref={inputRef} {...inputProps} />;
+        };
+
+        const createBoxElement = () => {
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+            const boxProps = mergeProps(
+                {
+                    className: cx('box', { checked }),
+                    'data-p-highlight': checked,
+                    'data-p-disabled': props.disabled
+                },
+                ptm('box')
+            );
+
+            const icon = checked ? props.icon || <CheckIcon {...iconProps} /> : null;
+            const checkboxIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, checked });
+
+            return <div {...boxProps}>{checkboxIcon}</div>;
+        };
+
+        return (
+            <>
+                <div ref={elementRef} {...rootProps}>
+                    {createInputElement()}
+                    {createBoxElement()}
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+Checkbox.displayName = 'Checkbox';
diff --git a/components/lib/checkbox/CheckboxBase.js b/components/lib/checkbox/CheckboxBase.js
new file mode 100644
index 0000000000..e477a8a21a
--- /dev/null
+++ b/components/lib/checkbox/CheckboxBase.js
@@ -0,0 +1,48 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input',
+    icon: 'p-checkbox-icon',
+    root: ({ props, checked, context }) =>
+        classNames('p-checkbox p-component', {
+            'p-highlight': checked,
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
+};
+
+export const CheckboxBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Checkbox',
+        autoFocus: false,
+        checked: false,
+        className: null,
+        disabled: false,
+        falseValue: false,
+        icon: null,
+        id: null,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        variant: null,
+        name: null,
+        onChange: null,
+        onContextMenu: null,
+        onMouseDown: null,
+        readOnly: false,
+        required: false,
+        style: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        trueValue: true,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/checkbox/checkbox.d.ts b/components/lib/checkbox/checkbox.d.ts
new file mode 100644
index 0000000000..d854dce17b
--- /dev/null
+++ b/components/lib/checkbox/checkbox.d.ts
@@ -0,0 +1,261 @@
+/**
+ *
+ * Checkbox is an extension to standard checkbox element with skinning capabilities.
+ *
+ * [Live Demo](https://www.primereact.org/checkbox/)
+ *
+ * @module checkbox
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type CheckboxPassThroughType<T> = PassThroughType<T, CheckboxPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface CheckboxPassThroughMethodOptions {
+    props: CheckboxProps;
+    context: CheckboxContext;
+    state: CheckboxState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CheckboxProps.pt}
+ */
+export interface CheckboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: CheckboxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in Checkbox component.
+ */
+export interface CheckboxContext {
+    /**
+     * Current checked state of the item as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines current inline state in Checkbox component.
+ */
+export interface CheckboxState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link CheckboxProps.onChange}
+ * @extends {FormEvent }
+ * @event
+ */
+interface CheckboxChangeEvent extends FormEvent {}
+
+/**
+ * Defines valid properties in Checkbox component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLDivElement>, 'onChange' | 'onClick' | 'ref'> {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Value of the component.
+     */
+    value?: any;
+    /**
+     * Name of the checkbox element .
+     */
+    name?: string | undefined;
+    /**
+     * Specifies whether a checkbox should be checked or not.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Value in checked state.
+     * @defaultValue true
+     */
+    trueValue?: any;
+    /**
+     * Value in unchecked state.
+     * @defaultValue false
+     */
+    falseValue?: any;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the element value cannot be altered.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * When present, it specifies that the value cannot be changed.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     * @defaultValue false
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Icon to display in checkbox.
+     */
+    icon?: IconType<CheckboxProps> | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on click.
+     * @param {React.MouseEvent<HTMLInputElement> & { target: HTMLInputElement }} event - click event
+     */
+    onClick?(event: React.MouseEvent<HTMLInputElement> & { target: HTMLInputElement }): void;
+    /**
+     * Callback to invoke on value change
+     * @param {CheckboxChangeEvent} event - Custom change event
+     */
+    onChange?(event: CheckboxChangeEvent): void;
+    /**
+     * Callback to invoke to when a mouse button is pressed.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event
+     */
+    onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke on right-click.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event
+     */
+    onContextMenu?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CheckboxPassThroughOptions}
+     */
+    pt?: CheckboxPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Checkbox**
+ *
+ * _Checkbox is an extension to standard checkbox element with skinning capabilities._
+ *
+ * [Live Demo](https://www.primereact.org/checkbox/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Checkbox extends React.Component<CheckboxProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+}
diff --git a/components/lib/checkbox/package.json b/components/lib/checkbox/package.json
new file mode 100644
index 0000000000..f66e78e7e2
--- /dev/null
+++ b/components/lib/checkbox/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./checkbox.cjs.js",
+    "module": "./checkbox.esm.js",
+    "unpkg": "./checkbox.min.js",
+    "types": "./checkbox.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
new file mode 100644
index 0000000000..79fbb9d8f8
--- /dev/null
+++ b/components/lib/chip/Chip.js
@@ -0,0 +1,146 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { classNames, IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { ChipBase } from './ChipBase';
+
+export const Chip = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ChipBase.getProps(inProps, context);
+        const elementRef = React.useRef(null);
+        const [visibleState, setVisibleState] = React.useState(true);
+        const [idState, setIdState] = React.useState(props.id);
+        const { ptm, cx, isUnstyled } = ChipBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(ChipBase.css.styles, isUnstyled, { name: 'chip' });
+
+        const onKeyDown = (event) => {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Backspace') {
+                close(event);
+            }
+        };
+
+        const close = (event) => {
+            let result = true;
+
+            if (props.onRemove) {
+                event.stopPropagation();
+                result = props.onRemove({
+                    originalEvent: event,
+                    value: props.label || props.image || props.icon
+                });
+            }
+
+            if (result !== false) {
+                setVisibleState(false);
+            }
+        };
+
+        const createContent = () => {
+            let content = [];
+
+            const removeIconProps = mergeProps(
+                {
+                    role: 'button',
+                    tabIndex: 0,
+                    className: cx('removeIcon'),
+                    onClick: close,
+                    onKeyDown
+                },
+                ptm('removeIcon')
+            );
+
+            const icon = props.removeIcon || <TimesCircleIcon {...removeIconProps} key={`${idState}-removeIcon`} />;
+
+            if (props.image) {
+                const imageProps = mergeProps(
+                    {
+                        src: props.image,
+                        onError: props.onImageError
+                    },
+                    ptm('image')
+                );
+
+                content.push(<img alt={props.imageAlt} {...imageProps} key={`${idState}-image`} />);
+            } else if (props.icon) {
+                const chipIconProps = mergeProps(
+                    {
+                        className: cx('icon')
+                    },
+                    ptm('icon')
+                );
+
+                content.push(IconUtils.getJSXIcon(props.icon, { ...chipIconProps }, { props }));
+            }
+
+            if (props.label) {
+                const labelProps = mergeProps(
+                    {
+                        className: cx('label')
+                    },
+                    ptm('label')
+                );
+
+                content.push(
+                    <span {...labelProps} key={UniqueComponentId('label')}>
+                        {props.label}
+                    </span>
+                );
+            }
+
+            if (props.removable) {
+                content.push(IconUtils.getJSXIcon(icon, { ...removeIconProps }, { props }));
+            }
+
+            return content;
+        };
+
+        const createElement = () => {
+            const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
+
+            const rootProps = mergeProps(
+                {
+                    ref: elementRef,
+                    style: props.style,
+                    className: classNames(props.className, cx('root')),
+                    'aria-label': props.label
+                },
+                ChipBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            return (
+                <div {...rootProps} key={UniqueComponentId('chip')}>
+                    {content}
+                </div>
+            );
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getVisible: () => visibleState,
+            setVisible: (visible) => setVisibleState(visible),
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        if (!idState) {
+            return null;
+        }
+
+        return visibleState && createElement();
+    })
+);
+
+Chip.displayName = 'Chip';
diff --git a/components/lib/chip/Chip.spec.js b/components/lib/chip/Chip.spec.js
new file mode 100644
index 0000000000..5bc8725d69
--- /dev/null
+++ b/components/lib/chip/Chip.spec.js
@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import { Chip } from './Chip';
+
+import { snapshot } from '../../test';
+
+describe('Chip', () => {
+    snapshot(<Chip />, 'default');
+    snapshot(<Chip image="http://google.com/my.png" />, 'image');
+    snapshot(<Chip image="http://google.com/my.png" imageAlt="jest" />, 'image and alt');
+    snapshot(<Chip icon="pi pi-check" />, 'icon');
+    snapshot(<Chip label="jest" />, 'label');
+    test('when removable is true the chip is removed when ENTER is pressed', () => {
+        // Arrange
+        const removeOn = jest.fn();
+        const { container } = render(<Chip removable onRemove={removeOn} />);
+
+        expect(container).toMatchSnapshot('before remove');
+        const chipRemoveIcon = container.getElementsByClassName('p-chip-remove-icon')[0];
+
+        // Act
+        fireEvent.keyDown(chipRemoveIcon, { key: 'Enter', code: 'Enter' });
+
+        // Assert
+        expect(container).toMatchSnapshot('after remove');
+        expect(removeOn).toHaveBeenCalledTimes(1);
+    });
+    test('when removable is true it returns with remove icon', () => {
+        // Arrange
+        const removeOn = jest.fn();
+        const { container } = render(<Chip removable onRemove={removeOn} />);
+
+        expect(container).toMatchSnapshot('before remove');
+        const chipRemoveIcon = container.getElementsByClassName('p-chip-remove-icon')[0];
+
+        // Act
+        fireEvent.click(chipRemoveIcon);
+
+        // Assert
+        expect(container).toMatchSnapshot('after remove');
+        expect(removeOn).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/components/lib/chip/ChipBase.js b/components/lib/chip/ChipBase.js
new file mode 100644
index 0000000000..b66c442edb
--- /dev/null
+++ b/components/lib/chip/ChipBase.js
@@ -0,0 +1,60 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-chip p-component', {
+            'p-chip-image': props.image != null
+        }),
+    removeIcon: 'p-chip-remove-icon',
+    icon: 'p-chip-icon',
+    label: 'p-chip-text'
+};
+
+const styles = `
+@layer primereact {
+    .p-chip {
+        display: inline-flex;
+        align-items: center;
+    }
+    
+    .p-chip-text {
+        line-height: 1.5;
+    }
+    
+    .p-chip-icon.pi {
+        line-height: 1.5;
+    }
+    
+    .p-chip .p-chip-remove-icon {
+        line-height: 1.5;
+        cursor: pointer;
+    }
+    
+    .p-chip img {
+        border-radius: 50%;
+    }
+}
+`;
+
+export const ChipBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Chip',
+        label: null,
+        icon: null,
+        image: null,
+        removable: false,
+        removeIcon: null,
+        className: null,
+        style: null,
+        template: null,
+        imageAlt: 'chip',
+        onImageError: null,
+        onRemove: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/chip/__snapshots__/Chip.spec.js.snap b/components/lib/chip/__snapshots__/Chip.spec.js.snap
new file mode 100644
index 0000000000..0e5f298500
--- /dev/null
+++ b/components/lib/chip/__snapshots__/Chip.spec.js.snap
@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Chip default 1`] = `
+<div>
+  <div
+    class="p-chip p-component"
+    data-pc-name="chip"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`Chip icon 1`] = `
+<div>
+  <div
+    class="p-chip p-component"
+    data-pc-name="chip"
+    data-pc-section="root"
+  >
+    <span
+      class="p-chip-icon pi pi-check"
+      data-pc-section="icon"
+    />
+  </div>
+</div>
+`;
+
+exports[`Chip image 1`] = `
+<div>
+  <div
+    class="p-chip p-component p-chip-image"
+    data-pc-name="chip"
+    data-pc-section="root"
+  >
+    <img
+      alt="chip"
+      data-pc-section="image"
+      src="http://google.com/my.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Chip image and alt 1`] = `
+<div>
+  <div
+    class="p-chip p-component p-chip-image"
+    data-pc-name="chip"
+    data-pc-section="root"
+  >
+    <img
+      alt="jest"
+      data-pc-section="image"
+      src="http://google.com/my.png"
+    />
+  </div>
+</div>
+`;
+
+exports[`Chip label 1`] = `
+<div>
+  <div
+    aria-label="jest"
+    class="p-chip p-component"
+    data-pc-name="chip"
+    data-pc-section="root"
+  >
+    <span
+      class="p-chip-text"
+      data-pc-section="label"
+    >
+      jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Chip when removable is true it returns with remove icon: after remove 1`] = `<div />`;
+
+exports[`Chip when removable is true it returns with remove icon: before remove 1`] = `
+<div>
+  <div
+    class="p-chip p-component"
+    data-pc-name="chip"
+    data-pc-section="root"
+  >
+    <svg
+      class="p-icon p-chip-remove-icon"
+      data-pc-section="removeicon"
+      fill="none"
+      height="14"
+      role="button"
+      tabindex="0"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M7 14C5.61553 14 4.26215 13.5895 3.11101 12.8203C1.95987 12.0511 1.06266 10.9579 0.532846 9.67879C0.00303296 8.3997 -0.13559 6.99224 0.134506 5.63437C0.404603 4.2765 1.07129 3.02922 2.05026 2.05026C3.02922 1.07129 4.2765 0.404603 5.63437 0.134506C6.99224 -0.13559 8.3997 0.00303296 9.67879 0.532846C10.9579 1.06266 12.0511 1.95987 12.8203 3.11101C13.5895 4.26215 14 5.61553 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM7 1.16667C5.84628 1.16667 4.71846 1.50879 3.75918 2.14976C2.79989 2.79074 2.05222 3.70178 1.61071 4.76768C1.16919 5.83358 1.05367 7.00647 1.27876 8.13803C1.50384 9.26958 2.05941 10.309 2.87521 11.1248C3.69102 11.9406 4.73042 12.4962 5.86198 12.7212C6.99353 12.9463 8.16642 12.8308 9.23232 12.3893C10.2982 11.9478 11.2093 11.2001 11.8502 10.2408C12.4912 9.28154 12.8333 8.15373 12.8333 7C12.8333 5.45291 12.2188 3.96918 11.1248 2.87521C10.0308 1.78125 8.5471 1.16667 7 1.16667ZM4.66662 9.91668C4.58998 9.91704 4.51404 9.90209 4.44325 9.87271C4.37246 9.84333 4.30826 9.8001 4.2544 9.74557C4.14516 9.6362 4.0838 9.48793 4.0838 9.33335C4.0838 9.17876 4.14516 9.0305 4.2544 8.92113L6.17553 7L4.25443 5.07891C4.15139 4.96832 4.09529 4.82207 4.09796 4.67094C4.10063 4.51982 4.16185 4.37563 4.26872 4.26876C4.3756 4.16188 4.51979 4.10066 4.67091 4.09799C4.82204 4.09532 4.96829 4.15142 5.07887 4.25446L6.99997 6.17556L8.92106 4.25446C9.03164 4.15142 9.1779 4.09532 9.32903 4.09799C9.48015 4.10066 9.62434 4.16188 9.73121 4.26876C9.83809 4.37563 9.89931 4.51982 9.90198 4.67094C9.90464 4.82207 9.84855 4.96832 9.74551 5.07891L7.82441 7L9.74554 8.92113C9.85478 9.0305 9.91614 9.17876 9.91614 9.33335C9.91614 9.48793 9.85478 9.6362 9.74554 9.74557C9.69168 9.8001 9.62748 9.84333 9.55669 9.87271C9.4859 9.90209 9.40996 9.91704 9.33332 9.91668C9.25668 9.91704 9.18073 9.90209 9.10995 9.87271C9.03916 9.84333 8.97495 9.8001 8.9211 9.74557L6.99997 7.82444L5.07884 9.74557C5.02499 9.8001 4.96078 9.84333 4.88999 9.87271C4.81921 9.90209 4.74326 9.91704 4.66662 9.91668Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`Chip when removable is true the chip is removed when ENTER is pressed: after remove 1`] = `<div />`;
+
+exports[`Chip when removable is true the chip is removed when ENTER is pressed: before remove 1`] = `
+<div>
+  <div
+    class="p-chip p-component"
+    data-pc-name="chip"
+    data-pc-section="root"
+  >
+    <svg
+      class="p-icon p-chip-remove-icon"
+      data-pc-section="removeicon"
+      fill="none"
+      height="14"
+      role="button"
+      tabindex="0"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M7 14C5.61553 14 4.26215 13.5895 3.11101 12.8203C1.95987 12.0511 1.06266 10.9579 0.532846 9.67879C0.00303296 8.3997 -0.13559 6.99224 0.134506 5.63437C0.404603 4.2765 1.07129 3.02922 2.05026 2.05026C3.02922 1.07129 4.2765 0.404603 5.63437 0.134506C6.99224 -0.13559 8.3997 0.00303296 9.67879 0.532846C10.9579 1.06266 12.0511 1.95987 12.8203 3.11101C13.5895 4.26215 14 5.61553 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM7 1.16667C5.84628 1.16667 4.71846 1.50879 3.75918 2.14976C2.79989 2.79074 2.05222 3.70178 1.61071 4.76768C1.16919 5.83358 1.05367 7.00647 1.27876 8.13803C1.50384 9.26958 2.05941 10.309 2.87521 11.1248C3.69102 11.9406 4.73042 12.4962 5.86198 12.7212C6.99353 12.9463 8.16642 12.8308 9.23232 12.3893C10.2982 11.9478 11.2093 11.2001 11.8502 10.2408C12.4912 9.28154 12.8333 8.15373 12.8333 7C12.8333 5.45291 12.2188 3.96918 11.1248 2.87521C10.0308 1.78125 8.5471 1.16667 7 1.16667ZM4.66662 9.91668C4.58998 9.91704 4.51404 9.90209 4.44325 9.87271C4.37246 9.84333 4.30826 9.8001 4.2544 9.74557C4.14516 9.6362 4.0838 9.48793 4.0838 9.33335C4.0838 9.17876 4.14516 9.0305 4.2544 8.92113L6.17553 7L4.25443 5.07891C4.15139 4.96832 4.09529 4.82207 4.09796 4.67094C4.10063 4.51982 4.16185 4.37563 4.26872 4.26876C4.3756 4.16188 4.51979 4.10066 4.67091 4.09799C4.82204 4.09532 4.96829 4.15142 5.07887 4.25446L6.99997 6.17556L8.92106 4.25446C9.03164 4.15142 9.1779 4.09532 9.32903 4.09799C9.48015 4.10066 9.62434 4.16188 9.73121 4.26876C9.83809 4.37563 9.89931 4.51982 9.90198 4.67094C9.90464 4.82207 9.84855 4.96832 9.74551 5.07891L7.82441 7L9.74554 8.92113C9.85478 9.0305 9.91614 9.17876 9.91614 9.33335C9.91614 9.48793 9.85478 9.6362 9.74554 9.74557C9.69168 9.8001 9.62748 9.84333 9.55669 9.87271C9.4859 9.90209 9.40996 9.91704 9.33332 9.91668C9.25668 9.91704 9.18073 9.90209 9.10995 9.87271C9.03916 9.84333 8.97495 9.8001 8.9211 9.74557L6.99997 7.82444L5.07884 9.74557C5.02499 9.8001 4.96078 9.84333 4.88999 9.87271C4.81921 9.90209 4.74326 9.91704 4.66662 9.91668Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
+  </div>
+</div>
+`;
diff --git a/components/lib/chip/chip.d.ts b/components/lib/chip/chip.d.ts
new file mode 100644
index 0000000000..e828c0442b
--- /dev/null
+++ b/components/lib/chip/chip.d.ts
@@ -0,0 +1,177 @@
+/**
+ *
+ * Chip represents people using icons, labels and images.
+ *
+ * [Live Demo](https://www.primereact.org/chip)
+ *
+ * @module chip
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType, TemplateType } from '../utils';
+
+export declare type ChipPassThroughType<T> = PassThroughType<T, ChipPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChipPassThroughMethodOptions {
+    props: ChipProps;
+    state: ChipState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChipProps.pt}
+ */
+export interface ChipPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChipPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: ChipPassThroughType<React.ImgHTMLAttributes<HTMLImageElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ChipPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label' DOM element.
+     */
+    label?: ChipPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the removeIcon's DOM element.
+     */
+    removeIcon?: ChipPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in Chip component.
+ */
+export interface ChipState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
+/**
+ * Custom remove event
+ * @event
+ */
+interface ChipRemoveEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Removed item value
+     */
+    value: string;
+}
+
+/**
+ * Defines valid properties in Chip component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ChipProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Defines the text to display.
+     */
+    label?: string;
+    /**
+     * Defines the icon to display.
+     */
+    icon?: IconType<ChipProps> | undefined;
+    /**
+     * Defines the image to display.
+     */
+    image?: string | undefined;
+    /**
+     * Whether to display a remove icon.
+     * @defaultValue false
+     */
+    removable?: boolean | undefined;
+    /**
+     * Icon of the remove element.
+     */
+    removeIcon?: IconType<ChipProps> | undefined;
+    /**
+     * Template of an item.
+     */
+    template?: TemplateType<ChipProps> | undefined;
+    /**
+     * It specifies an alternate text for an image, if the image cannot be displayed.
+     */
+    imageAlt?: string | undefined;
+    /**
+     * This event is triggered if an error occurs while loading an image file.
+     * @param {React.SyntheticEvent}  event - Browser event.
+     */
+    onImageError?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a chip is removed.
+     * @param {ChipRemoveEvent} event - Custom remove event
+     * @return {boolean} - Return false to prevent hiding the chip after removal
+     */
+    onRemove?(event: ChipRemoveEvent): boolean;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipPassThroughOptions}
+     */
+    pt?: ChipPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Chip**
+ *
+ * _Chip represents people using icons, labels and images._
+ *
+ * [Live Demo](https://www.primereact.org/chip/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Chip extends React.Component<ChipProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to set the visibility of the chip.
+     * @param {boolean} visible - Whether to show or hide the chip
+     */
+    public setVisible(visible: boolean): void;
+    /**
+     * Used to get the current visibility state of the chip.
+     * @return {boolean} Current visibility state
+     */
+    public getVisible(): boolean;
+}
diff --git a/components/lib/chip/package.json b/components/lib/chip/package.json
new file mode 100644
index 0000000000..ffd0362c65
--- /dev/null
+++ b/components/lib/chip/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./chip.cjs.js",
+    "module": "./chip.esm.js",
+    "unpkg": "./chip.min.js",
+    "types": "./chip.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
new file mode 100644
index 0000000000..97167e816d
--- /dev/null
+++ b/components/lib/chips/Chips.js
@@ -0,0 +1,472 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { KeyFilter } from '../keyfilter/KeyFilter';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { ChipsBase } from './ChipsBase';
+
+export const Chips = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ChipsBase.getProps(inProps, context);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [focusedIndex, setFocusedIndex] = React.useState(null);
+
+        const { ptm, cx, isUnstyled } = ChipsBase.setMetaData({
+            props,
+            state: {
+                focused: focusedState
+            }
+        });
+
+        useHandleStyle(ChipsBase.css.styles, isUnstyled, { name: 'chips' });
+
+        const elementRef = React.useRef(null);
+        const listRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+
+        const removeItem = (event, index) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            let values = [...props.value];
+            const removedItem = values.splice(index, 1)[0];
+
+            if (!isRemovable(removedItem, index)) {
+                return;
+            }
+
+            if (props.onRemove) {
+                props.onRemove({
+                    originalEvent: event,
+                    value: removedItem
+                });
+            }
+
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value: values,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: values
+                    }
+                });
+            }
+        };
+
+        const addItem = (event, item, preventDefault) => {
+            if (item && item.trim().length) {
+                let values = props.value ? [...props.value] : [];
+
+                if (props.allowDuplicate || values.indexOf(item) === -1) {
+                    let allowAddition = true;
+
+                    if (props.onAdd) {
+                        allowAddition = props.onAdd({
+                            originalEvent: event,
+                            value: item
+                        });
+                    }
+
+                    if (allowAddition !== false) {
+                        values.push(item);
+                    }
+                }
+
+                updateInput(event, values, preventDefault);
+            }
+        };
+
+        const onWrapperClick = () => {
+            DomHandler.focus(inputRef.current);
+        };
+
+        const onContainerKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowLeft':
+                    onArrowLeftKeyOn(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKeyOn(event);
+                    break;
+
+                case 'Backspace':
+                    onBackspaceKeyOn(event);
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onArrowLeftKeyOn = () => {
+            let focusIndex = focusedIndex;
+
+            if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+                focusIndex = focusIndex === null ? props.value.length - 1 : focusIndex - 1;
+
+                if (focusIndex < 0) {
+                    focusIndex = 0;
+                }
+            }
+
+            setFocusedIndex(focusIndex);
+        };
+
+        const onArrowRightKeyOn = () => {
+            let focusIndex = focusedIndex;
+
+            if (inputRef.current.value.length === 0 && props.value && props.value.length > 0) {
+                if (focusIndex === props.value.length - 1) {
+                    focusIndex = null;
+                    inputRef.current.focus();
+                } else {
+                    focusIndex++;
+                }
+            }
+
+            setFocusedIndex(focusIndex);
+        };
+
+        const onBackspaceKeyOn = (event) => {
+            if (focusedIndex !== null) {
+                removeItem(event, focusedIndex);
+            }
+        };
+
+        const onKeyDown = (event) => {
+            const inputValue = event.target.value;
+            const values = props.value || [];
+
+            props.onKeyDown && props.onKeyDown(event);
+
+            if (event.defaultPrevented) {
+                return;
+            }
+
+            switch (event.key) {
+                case 'Backspace':
+                    if (inputValue.length === 0 && values.length > 0) {
+                        removeItem(event, values.length - 1);
+                    }
+
+                    break;
+
+                case 'Enter':
+                    if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
+                        addItem(event, inputValue, true);
+                    }
+
+                    break;
+
+                case 'ArrowLeft':
+                    if (inputValue.length === 0 && values && values.length > 0) {
+                        DomHandler.focus(listRef.current);
+                    }
+
+                    break;
+
+                case 'ArrowRight':
+                    event.stopPropagation();
+                    break;
+
+                default:
+                    if (props.keyfilter) {
+                        KeyFilter.onKeyPress(event, props.keyfilter);
+                    }
+
+                    if (isMaxedOut()) {
+                        event.preventDefault();
+                    }
+
+                    break;
+            }
+        };
+
+        const updateInput = (event, items, preventDefault) => {
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value: items,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: items
+                    }
+                });
+            }
+
+            inputRef.current.value = '';
+            preventDefault && event.preventDefault();
+        };
+
+        const onChange = (event) => {
+            const value = event.target.value?.trim();
+
+            if (value === props.separator) {
+                inputRef.current.value = '';
+
+                return;
+            }
+
+            if (props.separator && value.endsWith(props.separator)) {
+                const trimmedValue = value.slice(0, -1);
+
+                addItem(event, trimmedValue);
+            }
+        };
+
+        const onPaste = (event) => {
+            if (props.separator) {
+                let separator = props.separator.replace('\\n', '\n').replace('\\r', '\r').replace('\\t', '\t');
+                let pastedData = (event.clipboardData || window.clipboardData).getData('Text');
+
+                if (props.keyfilter) {
+                    KeyFilter.onPaste(event, props.keyfilter);
+                }
+
+                if (pastedData) {
+                    let values = props.value || [];
+                    let pastedValues = pastedData.split(separator);
+
+                    pastedValues = pastedValues.filter((val) => (props.allowDuplicate || values.indexOf(val) === -1) && val.trim().length);
+                    values = [...values, ...pastedValues];
+
+                    updateInput(event, values, true);
+                }
+            }
+        };
+
+        const onContainerFocus = () => {
+            setFocusedState(true);
+        };
+
+        const onContainerBlur = () => {
+            setFocusedIndex(-1);
+            setFocusedState(false);
+        };
+
+        const onFocus = (event) => {
+            setFocusedState(true);
+            setFocusedIndex(null);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            if (props.addOnBlur) {
+                const inputValue = event.target.value;
+                const values = props.value || [];
+
+                if (inputValue && inputValue.trim().length && (!props.max || props.max > values.length)) {
+                    addItem(event, inputValue, true);
+                }
+            }
+
+            setFocusedState(false);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const isMaxedOut = () => {
+            return props.max && props.value && props.max === props.value.length;
+        };
+
+        const currentValue = inputRef.current && inputRef.current.value;
+        const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(currentValue), [props.value, currentValue]);
+
+        const isRemovable = (value, index) => {
+            return ObjectUtils.getPropValue(props.removable, { value, index, props });
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useMountEffect(() => {
+            if (props.autoFocus) {
+                DomHandler.focus(inputRef.current, props.autoFocus);
+            }
+        });
+
+        const focusedOptionId = () => {
+            return focusedIndex !== null ? `${props.inputId}_chips_item_${focusedIndex}` : null;
+        };
+
+        const createRemoveIcon = (value, index) => {
+            if (!props.disabled && !props.readOnly && isRemovable(value, index)) {
+                const iconProps = mergeProps(
+                    {
+                        className: cx('removeTokenIcon'),
+                        onClick: (event) => removeItem(event, index),
+                        'aria-hidden': 'true'
+                    },
+                    ptm('removeTokenIcon')
+                );
+                const icon = props.removeIcon || <TimesCircleIcon {...iconProps} key={`${index}_icon`} />;
+                const removeIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+
+                return removeIcon;
+            }
+
+            return null;
+        };
+
+        const createItem = (value, index) => {
+            const content = props.itemTemplate ? props.itemTemplate(value) : value;
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+            const label = (
+                <span {...labelProps} key={`${index}_${value}_span`}>
+                    {content}
+                </span>
+            );
+            const icon = createRemoveIcon(value, index);
+            const tokenProps = mergeProps(
+                {
+                    id: props.inputId + '_chips_item_' + index,
+                    role: 'option',
+                    'aria-label': value,
+                    className: cx('token', { focusedIndex, index }),
+                    'aria-selected': true,
+                    'aria-setsize': props.value.length,
+                    'aria-posinset': index + 1,
+                    'data-p-highlight': true,
+                    'data-p-focused': focusedIndex === index
+                },
+                ptm('token')
+            );
+
+            return (
+                <li {...tokenProps} key={`${index}_${value}`}>
+                    {label}
+                    {icon}
+                </li>
+            );
+        };
+
+        const createInput = () => {
+            const inputTokenProps = mergeProps(
+                {
+                    className: cx('inputToken')
+                },
+                ptm('inputToken')
+            );
+
+            const inputProps = mergeProps(
+                {
+                    id: props.inputId,
+                    ref: inputRef,
+                    placeholder: props.placeholder,
+                    type: 'text',
+                    enterKeyHint: 'enter',
+                    name: props.name,
+                    disabled: props.disabled || isMaxedOut(),
+                    onKeyDown: (e) => onKeyDown(e),
+                    onChange: (e) => onChange(e),
+                    onPaste: (e) => onPaste(e),
+                    onFocus: (e) => onFocus(e),
+                    onBlur: (e) => onBlur(e),
+                    readOnly: props.readOnly,
+                    ...ariaProps
+                },
+                ptm('input')
+            );
+
+            return (
+                <li {...inputTokenProps} key={props.inputId + '_chips_input'}>
+                    <input {...inputProps} />
+                </li>
+            );
+        };
+
+        const createItems = () => {
+            return props.value ? props.value.map(createItem) : null;
+        };
+
+        const createList = () => {
+            const items = createItems();
+            const input = createInput();
+            const containerProps = mergeProps(
+                {
+                    ref: listRef,
+                    className: cx('container', { context }),
+                    onClick: (e) => onWrapperClick(e),
+                    onKeyDown: (e) => onContainerKeyDown(e),
+                    tabIndex: -1,
+                    role: 'listbox',
+                    'aria-orientation': 'horizontal',
+                    'aria-labelledby': props.ariaLabelledby,
+                    'aria-label': props.ariaLabel,
+                    'aria-activedescendant': focusedState ? focusedOptionId() : undefined,
+                    'data-p-disabled': props.disabled,
+                    'data-p-focus': focusedState,
+                    onFocus: onContainerFocus,
+                    onBlur: onContainerBlur
+                },
+                ptm('container')
+            );
+
+            return (
+                <ul {...containerProps}>
+                    {items}
+                    {input}
+                </ul>
+            );
+        };
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = ChipsBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const list = createList();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root', { isFilled, focusedState, disabled: props.disabled, invalid: props.invalid })),
+                style: props.style
+            },
+            ptm('root')
+        );
+
+        return (
+            <>
+                <div {...rootProps} key="chips">
+                    {list}
+                </div>
+                {hasTooltip && <Tooltip target={inputRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+Chips.displayName = 'Chips';
diff --git a/components/lib/chips/ChipsBase.js b/components/lib/chips/ChipsBase.js
new file mode 100644
index 0000000000..a1783ed506
--- /dev/null
+++ b/components/lib/chips/ChipsBase.js
@@ -0,0 +1,138 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-chips {
+        display: inline-flex;
+    }
+    
+    .p-chips-multiple-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        cursor: text;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+    
+    .p-chips-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+    
+    .p-chips-input-token {
+        flex: 1 1 auto;
+        display: inline-flex;
+    }
+    
+    .p-chips-token-icon {
+        cursor: pointer;
+    }
+    
+    .p-chips-input-token input {
+        border: 0 none;
+        outline: 0 none;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        box-shadow: none;
+        border-radius: 0;
+        width: 100%;
+    }
+    
+    .p-fluid .p-chips {
+        display: flex;
+    }
+    
+    .p-chips-icon-left,
+    .p-chips-icon-right {
+        position: relative;
+        display: inline-block;
+    }
+    
+    .p-chips-icon-left > i,
+    .p-chips-icon-right > i,
+    .p-chips-icon-left > svg,
+    .p-chips-icon-right > svg,
+    .p-chips-icon-left > .p-chips-prefix,
+    .p-chips-icon-right > .p-chips-suffix {
+        position: absolute;
+        top: 50%;
+        margin-top: -0.5rem;
+    }
+    
+    .p-fluid .p-chips-icon-left,
+    .p-fluid .p-chips-icon-right {
+        display: block;
+        width: 100%;
+    }
+}
+`;
+
+const classes = {
+    removeTokenIcon: 'p-chips-token-icon',
+    label: 'p-chips-token-label',
+    token: ({ focusedIndex, index }) =>
+        classNames('p-chips-token', {
+            'p-focus': focusedIndex === index
+        }),
+    inputToken: 'p-chips-input-token',
+    container: ({ props, context }) =>
+        classNames('p-inputtext p-chips-multiple-container', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    root: ({ isFilled, focusedState, disabled, invalid }) =>
+        classNames('p-chips p-component p-inputwrapper', {
+            'p-inputwrapper-filled': isFilled,
+            'p-inputwrapper-focus': focusedState,
+            'p-disabled': disabled,
+            'p-invalid': invalid,
+            'p-focus': focusedState
+        })
+};
+
+export const ChipsBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Chips',
+        addOnBlur: null,
+        allowDuplicate: true,
+        ariaLabelledBy: null,
+        autoFocus: false,
+        className: null,
+        disabled: null,
+        id: null,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        variant: null,
+        itemTemplate: null,
+        keyfilter: null,
+        max: null,
+        name: null,
+        onAdd: null,
+        onBlur: null,
+        onChange: null,
+        onFocus: null,
+        onKeyDown: null,
+        onRemove: null,
+        placeholder: null,
+        readOnly: false,
+        removable: true,
+        removeIcon: null,
+        separator: null,
+        style: null,
+        tooltip: null,
+        tooltipOptions: null,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/chips/chips.d.ts b/components/lib/chips/chips.d.ts
new file mode 100755
index 0000000000..e156270684
--- /dev/null
+++ b/components/lib/chips/chips.d.ts
@@ -0,0 +1,320 @@
+/**
+ *
+ * Chips is used to enter multiple values on an input field.
+ *
+ * [Live Demo](https://www.primereact.org/chips/)
+ *
+ * @module chips
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { KeyFilterType } from '../keyfilter';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type ChipsPassThroughType<T> = PassThroughType<T, ChipsPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChipsPassThroughMethodOptions {
+    props: ChipsProps;
+    state: ChipsState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChipsProps.pt}
+ */
+export interface ChipsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChipsPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: ChipsPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: ChipsPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ChipsPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: ChipsPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the input token's DOM element.
+     */
+    inputToken?: ChipsPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ChipsPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in Chips component.
+ */
+export interface ChipsState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
+/**
+ * @group Others
+ * @see {@link ChipsProps.removable}
+ */
+interface ChipsRemovableOptions {
+    /**
+     * Current value
+     */
+    value: string;
+    /**
+     * Current index
+     */
+    index: number;
+    /**
+     * Props of Chips component
+     * @type {ChipsProps}
+     */
+    props: ChipsProps;
+}
+
+/**
+ * Custom add event
+ */
+interface ChipsAddEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Added item value
+     */
+    value: string;
+}
+
+/**
+ * Custom remove event
+ * @event
+ */
+interface ChipsRemoveEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Removed item value
+     */
+    value: string;
+}
+
+/**
+ * Custom change event.
+ * @see {@link ChipsProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface ChipsChangeEvent extends FormEvent<string[]> {}
+
+/**
+ * Defines valid properties in Chips component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ChipsProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'ref'> {
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Name of the input field.
+     */
+    name?: string | undefined;
+    /**
+     * Advisory information to display on input.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Value of the component.
+     */
+    value?: string[] | undefined;
+    /**
+     * Maximum number of entries allowed.
+     */
+    max?: number | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that the element should be read-only.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether an item is removable.
+     * @defaultValue true
+     */
+    removable?: boolean | ((options: ChipsRemovableOptions) => boolean);
+    /**
+     * Icon of the remove element.
+     */
+    removeIcon?: IconType<ChipsProps> | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Separator char to add an item when pressed in addition to the enter key.
+     */
+    separator?: string | undefined;
+    /**
+     * Whether to allow duplicate values or not.
+     * @defaultValue true
+     */
+    allowDuplicate?: boolean;
+    /**
+     * Format definition of the keys to block.
+     * @type {KeyFilterType}
+     */
+    keyfilter?: KeyFilterType | undefined;
+    /**
+     * Whether to add an item when the input loses focus.
+     * @defaultValue false
+     */
+    addOnBlur?: boolean | undefined;
+    /**
+     * The template of each item
+     * @param {*} item - Current item
+     */
+    itemTemplate?(item: any): React.ReactNode;
+    /**
+     * Callback to invoke when a chip is added. Return 'false' to prevent the item from being added.
+     * @param {ChipsAddEvent} event - Custom add event
+     */
+    onAdd?(event: ChipsAddEvent): void;
+    /**
+     * Callback to invoke when a chip is removed.
+     * @param {ChipsRemoveEvent} event - Custom remove event
+     */
+    onRemove?(event: ChipsRemoveEvent): void;
+    /**
+     * Callback to invoke when a chip is added or removed.
+     * @param {ChipsChangeEvent} event - Custom change event
+     */
+    onChange?(event: ChipsChangeEvent): void;
+    /**
+     * Callback to invoke when the component gets focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when the key pressed.
+     * @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event
+     */
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipsPassThroughOptions}
+     */
+    pt?: ChipsPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Chips**
+ *
+ * _Chips is used to enter multiple values on an input field._
+ *
+ * [Live Demo](https://www.primereact.org/chips/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Chips extends React.Component<ChipsProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement} Input element
+     */
+    public getInput(): HTMLInputElement;
+}
diff --git a/components/lib/chips/package.json b/components/lib/chips/package.json
new file mode 100644
index 0000000000..921641ef9a
--- /dev/null
+++ b/components/lib/chips/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./chips.cjs.js",
+    "module": "./chips.esm.js",
+    "unpkg": "./chips.min.js",
+    "types": "./chips.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
new file mode 100644
index 0000000000..1c91366503
--- /dev/null
+++ b/components/lib/colorpicker/ColorPicker.js
@@ -0,0 +1,685 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder } from '../hooks/Hooks';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { ColorPickerBase } from './ColorPickerBase';
+import { ColorPickerPanel } from './ColorPickerPanel';
+
+export const ColorPicker = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ColorPickerBase.getProps(inProps, context);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const { ptm, cx, isUnstyled } = ColorPickerBase.setMetaData({
+            props,
+            state: {
+                overlayVisible: overlayVisibleState
+            }
+        });
+        const isCloseOnEscape = overlayVisibleState && props.closeOnEscape;
+        const overlayDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape);
+
+        useHandleStyle(ColorPickerBase.css.styles, isUnstyled, { name: 'colorpicker' });
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: overlayVisibleState && overlayDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder]
+        });
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const colorSelectorRef = React.useRef(null);
+        const colorHandleRef = React.useRef(null);
+        const hueHandleRef = React.useRef(null);
+        const hueViewRef = React.useRef(null);
+        const hueDragging = React.useRef(false);
+        const hsbValue = React.useRef(null);
+        const colorDragging = React.useRef(false);
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { valid, type }) => {
+                if (valid) {
+                    if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({
+            type: 'mousemove',
+            listener: (event) => {
+                colorDragging.current && pickColor(event);
+                hueDragging.current && pickHue(event);
+            }
+        });
+
+        const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({
+            type: 'mouseup',
+            listener: () => {
+                colorDragging.current = hueDragging.current = false;
+                DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
+                unbindDocumentMouseMoveListener();
+                unbindDocumentMouseUpListener();
+            }
+        });
+
+        const onPanelClick = (event) => {
+            if (!props.inline) {
+                OverlayService.emit('overlay-click', {
+                    originalEvent: event,
+                    target: elementRef.current
+                });
+            }
+        };
+
+        const onHueMousedown = (event) => {
+            if (props.disabled) {
+                return;
+            }
+
+            bindDragListeners();
+            onHueDragStart(event);
+        };
+
+        const onHueDragStart = (event) => {
+            if (props.disabled) {
+                return;
+            }
+
+            hueDragging.current = true;
+            pickHue(event);
+            !isUnstyled && DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
+            event.preventDefault();
+        };
+
+        const getPositionY = (event) => {
+            if (event.pageY !== undefined) return event.pageY;
+            else if (event.changedTouches !== undefined) return event.changedTouches[0].pageY;
+            else return 0;
+        };
+
+        const pickHue = (event) => {
+            const top = hueViewRef.current.getBoundingClientRect().top + (window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0);
+            const yPos = getPositionY(event);
+            const hue = Math.floor((360 * (150 - Math.max(0, Math.min(150, yPos - top)))) / 150);
+
+            hsbValue.current = validateHSB({
+                h: hue,
+                s: hsbValue.current.s,
+                b: hsbValue.current.b
+            });
+
+            updateColorSelector();
+            updateHue();
+            updateModel();
+        };
+
+        const onColorMousedown = (event) => {
+            if (props.disabled) {
+                return;
+            }
+
+            bindDragListeners();
+            onColorDragStart(event);
+        };
+
+        const onColorDragStart = (event) => {
+            if (props.disabled) {
+                return;
+            }
+
+            colorDragging.current = true;
+            pickColor(event);
+            !isUnstyled && DomHandler.addClass(elementRef.current, 'p-colorpicker-dragging');
+            event.preventDefault();
+        };
+
+        const onDrag = (event) => {
+            if (colorDragging.current) {
+                pickColor(event);
+                event.preventDefault();
+            }
+
+            if (hueDragging.current) {
+                pickHue(event);
+                event.preventDefault();
+            }
+        };
+
+        const onDragEnd = () => {
+            colorDragging.current = false;
+            hueDragging.current = false;
+            !isUnstyled && DomHandler.removeClass(elementRef.current, 'p-colorpicker-dragging');
+            unbindDragListeners();
+        };
+
+        const bindDragListeners = () => {
+            bindDocumentMouseMoveListener();
+            bindDocumentMouseUpListener();
+        };
+
+        const unbindDragListeners = () => {
+            unbindDocumentMouseMoveListener();
+            unbindDocumentMouseUpListener();
+        };
+
+        const pickColor = (event) => {
+            const rect = colorSelectorRef.current.getBoundingClientRect();
+            const top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
+            const left = rect.left + document.body.scrollLeft;
+            const saturation = Math.floor((100 * Math.max(0, Math.min(150, (event.pageX || event.changedTouches[0].pageX) - left))) / 150);
+            const brightness = Math.floor((100 * (150 - Math.max(0, Math.min(150, (event.pageY || event.changedTouches[0].pageY) - top)))) / 150);
+
+            hsbValue.current = validateHSB({
+                h: hsbValue.current.h,
+                s: saturation,
+                b: brightness
+            });
+
+            updateColorHandle();
+            updateInput();
+            updateModel();
+        };
+
+        const updateModel = () => {
+            switch (props.format) {
+                case 'hex':
+                    onChange(HSBtoHEX(hsbValue.current));
+                    break;
+
+                case 'rgb':
+                    onChange(HSBtoRGB(hsbValue.current));
+                    break;
+
+                case 'hsb':
+                    onChange(hsbValue.current);
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const toHSB = (value) => {
+            let hsb;
+
+            if (value) {
+                switch (props.format) {
+                    case 'hex':
+                        hsb = HEXtoHSB(value);
+                        break;
+
+                    case 'rgb':
+                        hsb = RGBtoHSB(value);
+                        break;
+
+                    case 'hsb':
+                        hsb = value;
+                        break;
+
+                    default:
+                        break;
+                }
+            } else {
+                hsb = HEXtoHSB(props.defaultColor);
+            }
+
+            return hsb;
+        };
+
+        const updateHSBValue = (value) => {
+            hsbValue.current = toHSB(value);
+        };
+
+        const onChange = (value) => {
+            if (props.onChange) {
+                props.onChange({
+                    value: value,
+                    stopPropagation: () => {},
+                    preventDefault: () => {},
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: value
+                    }
+                });
+            }
+        };
+
+        const updateColorSelector = () => {
+            if (colorSelectorRef.current) {
+                let newHsbValue = validateHSB({
+                    h: hsbValue.current.h,
+                    s: 100,
+                    b: 100
+                });
+
+                colorSelectorRef.current.style.backgroundColor = '#' + HSBtoHEX(newHsbValue);
+            }
+        };
+
+        const updateColorHandle = () => {
+            if (colorHandleRef.current) {
+                colorHandleRef.current.style.left = Math.floor((150 * hsbValue.current.s) / 100) + 'px';
+                colorHandleRef.current.style.top = Math.floor((150 * (100 - hsbValue.current.b)) / 100) + 'px';
+            }
+        };
+
+        const updateHue = () => {
+            if (hueHandleRef.current) {
+                hueHandleRef.current.style.top = Math.floor(150 - (150 * hsbValue.current.h) / 360) + 'px';
+            }
+        };
+
+        const updateInput = () => {
+            if (inputRef.current) {
+                inputRef.current.style.backgroundColor = '#' + HSBtoHEX(hsbValue.current);
+            }
+        };
+
+        const show = () => {
+            setOverlayVisibleState(true);
+        };
+
+        const hide = () => {
+            setOverlayVisibleState(false);
+        };
+
+        const onOverlayEnter = () => {
+            const styles = !props.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
+
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, styles);
+            alignOverlay();
+        };
+
+        const onOverlayEntered = () => {
+            bindOverlayListener();
+
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const onInputClick = () => {
+            togglePanel();
+        };
+
+        const togglePanel = () => {
+            overlayVisibleState ? hide() : show();
+        };
+
+        const onInputKeydown = (event) => {
+            switch (event.which) {
+                //space
+                case 32:
+                    togglePanel();
+                    event.preventDefault();
+                    break;
+
+                //escape and tab
+                case 27:
+                case 9:
+                    hide();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const validateHSB = (hsb) => {
+            return {
+                h: Math.min(360, Math.max(0, hsb.h)),
+                s: Math.min(100, Math.max(0, hsb.s)),
+                b: Math.min(100, Math.max(0, hsb.b))
+            };
+        };
+
+        const HEXtoRGB = (hex) => {
+            const hexValue = parseInt(hex.indexOf('#') > -1 ? hex.substring(1) : hex, 16);
+
+            return { r: hexValue >> 16, g: (hexValue & 0x00ff00) >> 8, b: hexValue & 0x0000ff };
+        };
+
+        const HEXtoHSB = (hex) => {
+            return RGBtoHSB(HEXtoRGB(hex));
+        };
+
+        const RGBtoHSB = (rgb) => {
+            let hsb = {
+                h: 0,
+                s: 0,
+                b: 0
+            };
+            let min = Math.min(rgb.r, rgb.g, rgb.b);
+            let max = Math.max(rgb.r, rgb.g, rgb.b);
+            let delta = max - min;
+
+            hsb.b = max;
+            hsb.s = max !== 0 ? (255 * delta) / max : 0;
+
+            if (hsb.s !== 0) {
+                if (rgb.r === max) {
+                    hsb.h = (rgb.g - rgb.b) / delta;
+                } else if (rgb.g === max) {
+                    hsb.h = 2 + (rgb.b - rgb.r) / delta;
+                } else {
+                    hsb.h = 4 + (rgb.r - rgb.g) / delta;
+                }
+            } else {
+                hsb.h = -1;
+            }
+
+            hsb.h = hsb.h * 60;
+
+            if (hsb.h < 0) {
+                hsb.h = hsb.h + 360;
+            }
+
+            hsb.s = hsb.s * (100 / 255);
+            hsb.b = hsb.b * (100 / 255);
+
+            return hsb;
+        };
+
+        const HSBtoRGB = (hsb) => {
+            let rgb = {
+                r: null,
+                g: null,
+                b: null
+            };
+            let h = Math.round(hsb.h);
+            let s = Math.round((hsb.s * 255) / 100);
+            let v = Math.round((hsb.b * 255) / 100);
+
+            if (s === 0) {
+                rgb = {
+                    r: v,
+                    g: v,
+                    b: v
+                };
+            } else {
+                let t1 = v;
+                let t2 = ((255 - s) * v) / 255;
+                let t3 = ((t1 - t2) * (h % 60)) / 60;
+
+                if (h === 360) {
+                    h = 0;
+                }
+
+                if (h < 60) {
+                    rgb.r = t1;
+                    rgb.b = t2;
+                    rgb.g = t2 + t3;
+                } else if (h < 120) {
+                    rgb.g = t1;
+                    rgb.b = t2;
+                    rgb.r = t1 - t3;
+                } else if (h < 180) {
+                    rgb.g = t1;
+                    rgb.r = t2;
+                    rgb.b = t2 + t3;
+                } else if (h < 240) {
+                    rgb.b = t1;
+                    rgb.r = t2;
+                    rgb.g = t1 - t3;
+                } else if (h < 300) {
+                    rgb.b = t1;
+                    rgb.g = t2;
+                    rgb.r = t2 + t3;
+                } else if (h < 360) {
+                    rgb.r = t1;
+                    rgb.g = t2;
+                    rgb.b = t1 - t3;
+                } else {
+                    rgb.r = 0;
+                    rgb.g = 0;
+                    rgb.b = 0;
+                }
+            }
+
+            return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
+        };
+
+        const RGBtoHEX = (rgb) => {
+            let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
+
+            for (let key in hex) {
+                if (hex[key].length === 1) {
+                    hex[key] = '0' + hex[key];
+                }
+            }
+
+            return hex.join('');
+        };
+
+        const HSBtoHEX = (hsb) => {
+            return RGBtoHEX(HSBtoRGB(hsb));
+        };
+
+        const updateUI = () => {
+            updateHue();
+            updateColorHandle();
+            updateInput();
+            updateColorSelector();
+        };
+
+        const alignOverlay = () => {
+            if (inputRef.current) {
+                DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useMountEffect(() => {
+            updateHSBValue(props.value);
+            updateUI();
+
+            if (props.autoFocus) {
+                DomHandler.focus(inputRef.current, props.autoFocus);
+            }
+
+            alignOverlay();
+        });
+
+        useUpdateEffect(() => {
+            if (!colorDragging.current && !hueDragging.current) {
+                updateHSBValue(props.value);
+            }
+        }, [props.value]);
+
+        useUpdateEffect(() => {
+            updateUI();
+        });
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        const createColorSelector = () => {
+            const selectorProps = mergeProps(
+                {
+                    ref: colorSelectorRef,
+                    className: cx('selector'),
+                    onMouseDown: (e) => onColorMousedown(e),
+                    onTouchStart: (e) => onColorDragStart(e),
+                    onTouchMove: (e) => onDrag(e),
+                    onTouchEnd: onDragEnd
+                },
+                ptm('selector')
+            );
+
+            const colorProps = mergeProps(
+                {
+                    className: cx('color')
+                },
+                ptm('color')
+            );
+
+            const colorHandlerProps = mergeProps(
+                {
+                    ref: colorHandleRef,
+                    className: cx('colorHandle')
+                },
+                ptm('colorHandle')
+            );
+
+            return (
+                <div {...selectorProps}>
+                    <div {...colorProps}>
+                        <div {...colorHandlerProps} />
+                    </div>
+                </div>
+            );
+        };
+
+        const createHue = () => {
+            const hueProps = mergeProps(
+                {
+                    className: cx('hue'),
+                    onMouseDown: (e) => onHueMousedown(e),
+                    onTouchStart: (e) => onHueDragStart(e),
+                    onTouchMove: (e) => onDrag(e),
+                    onTouchEnd: onDragEnd
+                },
+                ptm('hue')
+            );
+
+            const hueHandlerProps = mergeProps(
+                {
+                    className: cx('hueHandle')
+                },
+                ptm('hueHandle')
+            );
+
+            return (
+                <div ref={hueViewRef} {...hueProps}>
+                    <div ref={hueHandleRef} {...hueHandlerProps} />
+                </div>
+            );
+        };
+
+        const createContent = () => {
+            const colorSelector = createColorSelector();
+            const hue = createHue();
+            const contentProps = mergeProps(
+                {
+                    className: cx('content')
+                },
+                ptm('content')
+            );
+
+            return (
+                <div {...contentProps}>
+                    {colorSelector}
+                    {hue}
+                </div>
+            );
+        };
+
+        const createInput = () => {
+            if (!props.inline) {
+                const inputProps = ColorPickerBase.getOtherProps(props);
+                const _inputProps = mergeProps(
+                    {
+                        ref: inputRef,
+                        type: 'text',
+                        readOnly: true,
+                        className: cx('input'),
+                        style: props.inputStyle,
+                        id: props.inputId,
+                        tabIndex: props.tabIndex,
+                        disabled: props.disabled,
+                        onClick: onInputClick,
+                        onKeyDown: onInputKeydown,
+                        ...inputProps
+                    },
+                    ptm('input')
+                );
+
+                return <input {..._inputProps} />;
+            }
+
+            return null;
+        };
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const content = createContent();
+        const input = createInput();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                style: props.style,
+                className: classNames(props.className, cx('root'))
+            },
+            ColorPickerBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    {input}
+                    <ColorPickerPanel
+                        hostName="ColorPicker"
+                        ref={overlayRef}
+                        appendTo={props.appendTo}
+                        inline={props.inline}
+                        disabled={props.disabled}
+                        panelStyle={props.panelStyle}
+                        panelClassName={props.panelClassName}
+                        onClick={onPanelClick}
+                        in={props.inline || overlayVisibleState}
+                        onEnter={onOverlayEnter}
+                        onEntered={onOverlayEntered}
+                        onExit={onOverlayExit}
+                        onExited={onOverlayExited}
+                        transitionOptions={props.transitionOptions}
+                        ptm={ptm}
+                        cx={cx}
+                    >
+                        {content}
+                    </ColorPickerPanel>
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+ColorPicker.displayName = 'ColorPicker';
diff --git a/components/lib/colorpicker/ColorPickerBase.js b/components/lib/colorpicker/ColorPickerBase.js
new file mode 100644
index 0000000000..800ed104a2
--- /dev/null
+++ b/components/lib/colorpicker/ColorPickerBase.js
@@ -0,0 +1,155 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-colorpicker p-component', {
+            'p-colorpicker-overlay': !props.inline
+        }),
+    input: ({ props }) =>
+        classNames('p-colorpicker-preview p-inputtext', props.inputClassName, {
+            'p-disabled': props.disabled
+        }),
+    panel: ({ panelProps, context }) =>
+        classNames('p-colorpicker-panel', panelProps.panelClassName, {
+            'p-colorpicker-overlay-panel': !panelProps.inline,
+            'p-disabled': panelProps.disabled,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    content: 'p-colorpicker-content',
+    hueHandle: 'p-colorpicker-hue-handle',
+    hue: 'p-colorpicker-hue',
+    colorHandle: 'p-colorpicker-color-handle',
+    color: 'p-colorpicker-color',
+    selector: 'p-colorpicker-color-selector',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-colorpicker {
+        display: inline-block;
+    }
+    
+    .p-colorpicker-dragging {
+        cursor: pointer;
+    }
+    
+    .p-colorpicker-overlay {
+        position: relative;
+    }
+    
+    .p-colorpicker-panel {
+        position: relative;
+        width: 193px;
+        height: 166px;
+    }
+    
+    .p-colorpicker-overlay-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    
+    .p-colorpicker-preview {
+        cursor: pointer;
+    }
+    
+    .p-colorpicker-panel .p-colorpicker-content {
+        position: relative;
+    }
+    
+    .p-colorpicker-panel .p-colorpicker-color-selector {
+        width: 150px;
+        height: 150px;
+        top: 8px;
+        left: 8px;
+        position: absolute;
+    }
+    
+    .p-colorpicker-panel .p-colorpicker-color {
+        width: 150px;
+        height: 150px;
+    }
+    
+    .p-colorpicker-panel .p-colorpicker-color-handle {
+        position: absolute;
+        top: 0px;
+        left: 150px;
+        border-radius: 100%;
+        width: 10px;
+        height: 10px;
+        border-width: 1px;
+        border-style: solid;
+        margin: -5px 0 0 -5px;
+        cursor: pointer;
+        opacity: 0.85;
+    }
+    
+    .p-colorpicker-panel .p-colorpicker-hue {
+        width: 17px;
+        height: 150px;
+        top: 8px;
+        left: 167px;
+        position: absolute;
+        opacity: 0.85;
+    }
+    
+    .p-colorpicker-panel .p-colorpicker-hue-handle {
+        position: absolute;
+        top: 150px;
+        left: 0px;
+        width: 21px;
+        margin-left: -2px;
+        margin-top: -5px;
+        height: 10px;
+        border-width: 2px;
+        border-style: solid;
+        opacity: 0.85;
+        cursor: pointer;
+    }
+    
+    .p-colorpicker-panel .p-colorpicker-color {
+        background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
+    }
+    .p-colorpicker-panel .p-colorpicker-hue {
+        background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
+    }
+}
+`;
+
+export const ColorPickerBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ColorPicker',
+        appendTo: null,
+        autoFocus: false,
+        children: undefined,
+        className: null,
+        defaultColor: 'ff0000',
+        disabled: false,
+        format: 'hex',
+        id: null,
+        inline: false,
+        inputClassName: null,
+        inputId: null,
+        inputRef: null,
+        inputStyle: null,
+        onChange: null,
+        onHide: null,
+        onShow: null,
+        panelClassName: null,
+        panelStyle: null,
+        style: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        transitionOptions: null,
+        value: null
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/colorpicker/ColorPickerPanel.js b/components/lib/colorpicker/ColorPickerPanel.js
new file mode 100644
index 0000000000..1f5420d8b1
--- /dev/null
+++ b/components/lib/colorpicker/ColorPickerPanel.js
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+
+export const ColorPickerPanel = React.forwardRef((props, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const { ptm, cx } = props;
+
+    const createElement = () => {
+        const panelProps = mergeProps(
+            {
+                className: cx('panel', { panelProps: props, context }),
+                style: props.panelStyle,
+                onClick: props.onClick,
+                'data-pr-is-overlay': true
+            },
+            ptm('panel', { hostName: props.hostName })
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                in: props.in,
+                timeout: { enter: 120, exit: 100 },
+                options: props.transitionOptions,
+                unmountOnExit: true,
+                onEnter: props.onEnter,
+                onEntered: props.onEntered,
+                onExit: props.onExit,
+                onExited: props.onExited
+            },
+            ptm('transition', { hostName: props.hostName })
+        );
+
+        return (
+            <CSSTransition nodeRef={ref} {...transitionProps}>
+                <div ref={ref} {...panelProps}>
+                    {props.children}
+                </div>
+            </CSSTransition>
+        );
+    };
+
+    const element = createElement();
+
+    return props.inline ? element : <Portal element={element} appendTo={props.appendTo} />;
+});
+
+ColorPickerPanel.displayName = 'ColorPickerPanel';
diff --git a/components/lib/colorpicker/colorpicker.d.ts b/components/lib/colorpicker/colorpicker.d.ts
new file mode 100644
index 0000000000..bf508f1629
--- /dev/null
+++ b/components/lib/colorpicker/colorpicker.d.ts
@@ -0,0 +1,290 @@
+/**
+ *
+ * ColorPicker is an input component to select a color.
+ *
+ * [Live Demo](https://www.primereact.org/colorpicker/)
+ *
+ * @module colorpicker
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ColorPickerPassThroughType<T> = PassThroughType<T, ColorPickerPassThroughMethodOptions>;
+export declare type ColorPickerPassThroughTransitionType = ReactCSSTransitionProps | ((options: ColorPickerPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColorPickerPassThroughMethodOptions {
+    props: ColorPickerProps;
+    state: ColorPickerState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColorPickerProps.pt}
+ */
+export interface ColorPickerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the selector's DOM element.
+     */
+    selector?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the color's DOM element.
+     */
+    color?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the color handle's DOM element.
+     */
+    colorHandle?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hue's DOM element.
+     */
+    hue?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hue handle's DOM element.
+     */
+    hueHandle?: ColorPickerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: ColorPickerPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in ColorPicker component.
+ */
+export interface ColorPickerState {
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
+/**
+ * RGB type of value
+ */
+interface ColorPickerRGBType {
+    /**
+     * red color number
+     */
+    r: number;
+    /**
+     * green color number
+     */
+    g: number;
+    /**
+     * blue color number
+     */
+    b: number;
+}
+
+/**
+ * HSB type of value
+ */
+interface ColorPickerHSBType {
+    /**
+     * hue number
+     */
+    h: number;
+    /**
+     * saturation number
+     */
+    s: number;
+    /**
+     * brightness number
+     */
+    b: number;
+}
+
+/**
+ * Custom change event.
+ * @see {@link ColorPickerProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface ColorPickerChangeEvent extends FormEvent<string | ColorPickerRGBType | ColorPickerHSBType> {}
+
+/**
+ * Defines valid properties in AutoComplete component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface ColorPickerProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onChange' | 'value' | 'ref'> {
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Default color to display when value is null.
+     * @defaultValue ff0000
+     */
+    defaultColor?: string | undefined;
+    /**
+     * Format to use in value binding.
+     * @defaultValue hex
+     */
+    format?: 'hex' | 'rgb' | 'hsb' | undefined;
+    /**
+     * Whether to display as an overlay or not.
+     * @defaultValue false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Identifier of the focus input to match a label defined for the dropdown.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: React.CSSProperties | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Style class of the overlay panel.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * Inline style of the overlay panel.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Value of the component.
+     * @type {string | ColorPickerRGBType | ColorPickerHSBType}
+     */
+    value?: string | ColorPickerRGBType | ColorPickerHSBType | undefined;
+    /**
+     * Callback to invoke when a color is selected.
+     * @param {ColorPickerChangeEvent} event - Custom change event.
+     */
+    onChange?(event: ColorPickerChangeEvent): void;
+    /**
+     * Callback to invoke when overlay panel becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when overlay panel becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ColorPickerPassThroughOptions}
+     */
+    pt?: ColorPickerPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ColorPicker**
+ *
+ * _ColorPicker is an input component to select a color._
+ *
+ * [Live Demo](https://www.primereact.org/colorpicker/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ColorPicker extends React.Component<ColorPickerProps, any> {
+    /**
+     * Used to show the overlay.
+     */
+    public show(): void;
+    /**
+     * Used to hide the overlay.
+     */
+    public hide(): void;
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+}
diff --git a/components/lib/colorpicker/package.json b/components/lib/colorpicker/package.json
new file mode 100644
index 0000000000..cb3bd63d75
--- /dev/null
+++ b/components/lib/colorpicker/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./colorpicker.cjs.js",
+    "module": "./colorpicker.esm.js",
+    "unpkg": "./colorpicker.min.js",
+    "types": "./colorpicker.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/column/Column.js b/components/lib/column/Column.js
new file mode 100644
index 0000000000..0c8d1256f0
--- /dev/null
+++ b/components/lib/column/Column.js
@@ -0,0 +1,4 @@
+export const Column = () => {};
+//@todo Pass Parent MetaData
+
+Column.displayName = 'Column';
diff --git a/components/lib/column/ColumnBase.js b/components/lib/column/ColumnBase.js
new file mode 100644
index 0000000000..737bf7ac6a
--- /dev/null
+++ b/components/lib/column/ColumnBase.js
@@ -0,0 +1,89 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils } from '../utils/Utils';
+
+export const ColumnBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Column',
+        align: null,
+        alignFrozen: 'left',
+        alignHeader: null,
+        body: null,
+        bodyClassName: null,
+        bodyStyle: null,
+        cellEditValidateOnClose: false,
+        cellEditValidator: null,
+        cellEditValidatorEvent: 'click',
+        className: null,
+        colSpan: null,
+        columnKey: null,
+        dataType: 'text',
+        editor: null,
+        excludeGlobalFilter: false,
+        expander: false,
+        exportField: null,
+        exportable: true,
+        field: null,
+        filter: false,
+        filterApply: null,
+        filterClear: null,
+        filterElement: null,
+        filterField: null,
+        filterFooter: null,
+        filterFunction: null,
+        filterHeader: null,
+        filterHeaderClassName: null,
+        filterHeaderStyle: null,
+        filterMatchMode: null,
+        filterMatchModeOptions: null,
+        filterMaxLength: null,
+        filterMenuClassName: null,
+        filterMenuStyle: null,
+        filterPlaceholder: null,
+        filterType: 'text',
+        footer: null,
+        footerClassName: null,
+        footerStyle: null,
+        frozen: false,
+        header: null,
+        headerClassName: null,
+        headerStyle: null,
+        headerTooltip: null,
+        headerTooltipOptions: null,
+        hidden: false,
+        maxConstraints: 2,
+        onBeforeCellEditHide: null,
+        onBeforeCellEditShow: null,
+        onCellEditCancel: null,
+        onCellEditComplete: null,
+        onCellEditInit: null,
+        onFilterApplyClick: null,
+        onFilterClear: null,
+        onFilterConstraintAdd: null,
+        onFilterConstraintRemove: null,
+        onFilterMatchModeChange: null,
+        onFilterOperatorChange: null,
+        reorderable: true,
+        resizeable: true,
+        rowEditor: false,
+        rowReorder: false,
+        rowReorderIcon: null,
+        rowSpan: null,
+        selectionMode: null,
+        showAddButton: true,
+        showApplyButton: true,
+        showClearButton: true,
+        showFilterMatchModes: true,
+        showFilterMenu: true,
+        showFilterMenuOptions: true,
+        showFilterOperator: true,
+        sortField: null,
+        sortFunction: null,
+        sortable: false,
+        sortableDisabled: false,
+        style: null,
+        children: undefined
+    },
+    getCProp: (column, name) => ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps),
+    getCProps: (column) => ObjectUtils.getComponentProps(column, ColumnBase.defaultProps),
+    getCOtherProps: (column) => ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps)
+});
diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts
new file mode 100644
index 0000000000..bac78ab876
--- /dev/null
+++ b/components/lib/column/column.d.ts
@@ -0,0 +1,1180 @@
+/**
+ *
+ * Column component defines various options to specify corresponding features.
+ * It is a helper component for DataTable and TreeTable.
+ *
+ * [Live Demo](https://www.primereact.org/datatable/)
+ *
+ * @module column
+ *
+ */
+import * as React from 'react';
+import { FilterMatchMode } from '../api/api';
+import { CheckboxPassThroughOptions } from '../checkbox/checkbox';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { DataTablePassThroughOptions } from '../datatable/datatable';
+import { PassThroughOptions } from '../passthrough';
+import { RadioButtonPassThroughOptions } from '../radiobutton/radiobutton';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type ColumnPassThroughType<T> = PassThroughType<T, ColumnPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColumnPassThroughMethodOptions {
+    props: ColumnProps;
+    state: ColumnState;
+    context: ColumnContext;
+    parent: DataTablePassThroughOptions;
+}
+
+/**
+ * Defines current options in Column component.
+ */
+export interface ColumnContext {
+    /**
+     * Current checked state of row as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current disabled state of row as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Current index of the column.
+     */
+    index: number;
+    /**
+     * Current sort state of the column as a boolean.
+     * @defaultValue false
+     */
+    sorted: boolean;
+    /**
+     * Current resizable state of the column as a boolean.
+     * @defaultValue false
+     */
+    resizable: boolean;
+    /**
+     * Current size state of the table.
+     */
+    size: string;
+    /**
+     * Current gridlines state of the table as a boolean.
+     * @defaultValue false
+     */
+    showGridlines: boolean;
+    /**
+     * Current highlighted state of the filter row item as a boolean.
+     * @defaultValue false
+     */
+    highlighted: boolean;
+    /**
+     * Current hidden state of the filter clear button of a column as a boolean.
+     * @defaultValue false
+     */
+    hidden: boolean;
+    /**
+     * Current active state of the filter menu of a column as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Defines current inline state in Column component.
+ */
+export interface ColumnState {
+    /**
+     * Current editing state of the body cell.
+     */
+    editing: boolean;
+    /**
+     * Current editing row data of the body cell.
+     */
+    editingRowData: any;
+    /**
+     * Current style of the body cell.
+     */
+    styleObject: object;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current visible state of the filter menu of a column as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current style of the rowgroup header.
+     */
+    rowGroupHeaderStyleObject: object;
+    /**
+     * Current sortable disabled fields of the table header.
+     */
+    sortableDisabledFields: any[];
+    /**
+     * Current style of the table header.
+     * @defaultValue false
+     */
+    allSortableDisabled: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColumnProps.pt}
+ */
+export interface ColumnPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header cell's DOM element.
+     */
+    headerCell?: ColumnPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the column resizer's DOM element.
+     */
+    columnResizer?: ColumnPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: ColumnPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the sort's DOM element.
+     */
+    sort?: ColumnPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the sort's DOM element.
+     */
+    sortIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the sort badge's DOM element.
+     */
+    sortBadge?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header checkbox's component.
+     */
+    headerCheckbox?: CheckboxPassThroughOptions;
+    /**
+     * Uses to pass attributes to the column filter's DOM element.
+     */
+    columnFilter?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter menu button's DOM element.
+     */
+    filterMenuButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the header filter clear button's DOM element.
+     */
+    headerFilterClearButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the filter clear icon's DOM element.
+     */
+    filterClearIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the filter overlay's DOM element.
+     */
+    filterOverlay?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter row items' DOM element.
+     */
+    filterRowItems?: ColumnPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the filter row item's DOM element.
+     */
+    filterRowItem?: ColumnPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the filter separator's DOM element.
+     */
+    filterSeparator?: ColumnPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the filter operator's DOM element.
+     */
+    filterOperator?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     */
+    filterOperatorDropdown?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter constraints' DOM element.
+     */
+    filterConstraints?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter constraint's DOM element.
+     */
+    filterConstraint?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     */
+    filterMatchModeDropdown?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter remove button container's DOM element.
+     */
+    filterRemove?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    filterRemoveButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the filter add rule's DOM element.
+     */
+    filterAddRule?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    filterAddRuleButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the filter buttonbar's DOM element.
+     */
+    filterButtonbar?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    filterClearButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    filterApplyButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the body cell's DOM element.
+     */
+    bodyCell?: ColumnPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the footer cell's DOM element.
+     */
+    footerCell?: ColumnPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup toggler's DOM element.
+     */
+    rowGroupToggler?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup toggler icon's DOM element.
+     */
+    rowGroupTogglerIcon?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the column title's DOM element.
+     */
+    columnTitle?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the rowtoggler's DOM element.
+     */
+    rowToggler?: ColumnPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the rowtoggler icon's DOM element.
+     */
+    rowTogglerIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row editor init button's DOM element.
+     */
+    rowEditorInitButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the row editor init icon's DOM element.
+     */
+    rowEditorInitIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row editor edit button's DOM element.
+     */
+    rowEditorEditButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the row editor edit icon's DOM element.
+     */
+    rowEditorEditIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row editor save button's DOM element.
+     */
+    rowEditorSaveButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the row editor save icon's DOM element.
+     */
+    rowEditorSaveIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row editor cancel button's DOM element.
+     */
+    rowEditorCancelButton?: ColumnPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the row editor cancel icon's DOM element.
+     */
+    rowEditorCancelIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row reorder icon's DOM element.
+     */
+    rowReorderIcon?: ColumnPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row radiobutton component.
+     */
+    rowRadioButton?: RadioButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the row checkbox component.
+     */
+    rowCheckbox?: CheckboxPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+interface ColumnHeaderOptions {
+    /**
+     * Additional properties passed to the body component.
+     */
+    props: any;
+}
+
+/**
+ * Column Header Options
+ * @extends {ColumnHeaderOptions}
+ */
+interface ColumnFooterOptions extends ColumnHeaderOptions {}
+
+interface ColumnBodyOptions {
+    /**
+     * Column of the options.
+     */
+    column: Column;
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Index of the row.
+     */
+    rowIndex: number;
+    /**
+     * Additional properties passed to the body component.
+     */
+    props?: any;
+    /**
+     * Whether the row is frozen or not.
+     */
+    frozenRow?: boolean;
+    /**
+     * Options for the expander component.
+     */
+    expander?: ColumnBodyExpanderOptions;
+    /**
+     * Options for the row editor component.
+     */
+    rowEditor?: ColumnBodyRowEditorOptions;
+}
+
+interface ColumnBodyExpanderOptions {
+    /**
+     * Event on click of the expander.
+     * @param {*} event -  Browser event.
+     */
+    onClick?(event: any): void;
+    /**
+     * Class name of the options.
+     */
+    className?: string;
+    /**
+     * Class name of the options icon.
+     */
+    iconClassName?: string;
+    /**
+     * Custom JSX element for the options.
+     */
+    element?: JSX.Element;
+}
+
+interface ColumnBodyRowEditorOptions {
+    /**
+     * Whether row is in editing mode.
+     */
+    editing?: boolean;
+    /**
+     * Custom JSX element for the options.
+     */
+    element?: JSX.Element;
+    /**
+     * Event on save click of the row editor.
+     * @param {*} event  - Browser event.
+     */
+    onSaveClick?(event: any): void;
+    /**
+     * Class name of the save button.
+     */
+    saveClassName?: string;
+    /**
+     * Class name of the save icon.
+     */
+    saveIconClassName?: string;
+    /**
+     * Event on cancel click of the row editor.
+     * @param {*} event  - Browser event.
+     */
+    onCancelClick?(event: any): void;
+    /**
+     * Class name of the cancel button.
+     */
+    cancelClassName?: string;
+    /**
+     * Class name of the cancel icon.
+     */
+    cancelIconClassName?: string;
+    /**
+     * Event on init click of the row editor.
+     * @param {*} event  - Browser event.
+     */
+    onInitClick?(event: any): void;
+    /**
+     * Class name of the init button.
+     */
+    initClassName?: string;
+    /**
+     * Class name of the init icon.
+     */
+    initIconClassName?: string;
+}
+
+interface ColumnEditorOptions {
+    /**
+     * Node element of the editor.
+     */
+    node?: any;
+    /**
+     * Data of the edited row.
+     */
+    rowData: any;
+    /**
+     * Value of the editor.
+     */
+    value: any;
+    /**
+     * Column of the editor.
+     */
+    column: Column;
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Index of the edited row.
+     */
+    rowIndex: number;
+    /**
+     * Whether the row is frozen or not.
+     */
+    frozenRow?: boolean;
+    /**
+     * Additional properties passed to the body component.
+     */
+    props: any;
+    /**
+     * Callback function triggered on editor change.
+     * @param {*} value - Browser event
+     */
+    editorCallback?(value: any): void;
+}
+
+interface ColumnFilterModelOptions {
+    /**
+     * Object containing key-value pairs of column filter metadata or metadata with constraint.
+     */
+    [key: string]: ColumnFilterMetaData | ColumnFilterMetaDataWithConstraint;
+}
+
+interface ColumnFilterClearTemplateOptions {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Object containing column filter model options.
+     */
+    filterModel: ColumnFilterModelOptions;
+    /**
+     * Callback function to clear the filters.
+     */
+    filterClearCallback(): void;
+}
+
+interface ColumnFilterApplyTemplateOptions {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Object containing column filter model options.
+     */
+    filterModel: ColumnFilterModelOptions;
+    /**
+     * Callback function to apply the filters with optional value and index parameters.
+     * @param {*} value - Value of the filter.
+     * @param {number} index - Index of the filter.
+     */
+    filterApplyCallback(value?: any, index?: number): void;
+}
+
+/**
+ * Column Filter Header Template Opitons
+ * @extends {ColumnFilterApplyTemplateOptions}
+ */
+interface ColumnFilterHeaderTemplateOptions extends ColumnFilterApplyTemplateOptions {}
+
+/**
+ * Column Filter Footer Template Opitons
+ * @extends {ColumnFilterApplyTemplateOptions}
+ */
+interface ColumnFilterFooterTemplateOptions extends ColumnFilterApplyTemplateOptions {}
+
+interface ColumnFilterElementTemplateOptions {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Index of the filter.
+     */
+    index: number;
+    /**
+     * Object containing column filter model options.
+     */
+    filterModel: ColumnFilterModelOptions;
+    /**
+     * Value of the filter.
+     */
+    value: any;
+    /**
+     * Callback function to apply the filters with optional value and index parameters.
+     * @param {*} value - Value of the filter.
+     * @param {number} index - Index of the filter.
+     */
+    filterApplyCallback(value?: any, index?: number): void;
+    /**
+     * Callback function with optional value and index parameters.
+     * @param {*} value - Value of the filter.
+     * @param {number} index - Index of the filter.
+     */
+    filterCallback(value?: any, index?: number): void;
+}
+
+/**
+ * Custom event.
+ * @see {@link ColumnProps.cellEditValidator}, {@link ColumnProps.onBeforeCellEditHide}, {@link ColumnProps.onBeforeCellEditShow}, {@link ColumnProps.onCellEditCancel}, {@link ColumnProps.onCellEditComplete}, {@link ColumnProps.onCellEditInit}
+ * @event
+ */
+interface ColumnEvent {
+    /**
+     * Original event triggered.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Value of the element.
+     */
+    value: any;
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Data of the selected row.
+     */
+    rowData: any;
+    /**
+     * Index of the selected row.
+     */
+    rowIndex: number;
+    /**
+     * Index of the selected cell.
+     */
+    cellIndex: number;
+    /**
+     * Whether the element is selected or not.
+     */
+    selected: boolean;
+    /**
+     * Column of the element.
+     */
+    column: Column;
+    /**
+     * New data of the row.
+     */
+    newRowData: any;
+    /**
+     * New value of the element.
+     */
+    newValue: any;
+}
+
+interface ColumnSortMetaData {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Sort order of the column.
+     */
+    order: 1 | 0 | -1 | undefined | null;
+}
+
+/**
+ * Custom sort event.
+ * @see {@link ColumnProps.sortFunction}
+ * @event
+ */
+interface ColumnSortEvent extends ColumnSortMetaData {
+    /**
+     * Data to be sorted.
+     */
+    data: any;
+    /**
+     * Array of multiple sort metadata for multi-column sorting.
+     */
+    multiSortMeta?: ColumnSortMetaData[];
+}
+
+interface ColumnFilterMetaData {
+    /**
+     * Value of the filter.
+     */
+    value: any;
+    /**
+     * Type of filter match; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
+     */
+    matchMode: FilterMatchMode | string;
+}
+
+interface ColumnFilterMetaDataWithConstraint {
+    /**
+     * Logical operator for the constraints.
+     */
+    operator: 'and' | 'or';
+    /**
+     * Array of ColumnFilterMetaData objects representing the constraints.
+     */
+    constraints: ColumnFilterMetaData[];
+}
+
+/**
+ * Custom filter event.
+ * @see {@link ColumnProps.onFilterApplyClick}
+ * @event
+ */
+interface ColumnFilterApplyClickEvent {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Array of ColumnFilterMetaData objects representing the constraints.
+     */
+    constraints: ColumnFilterMetaData[];
+}
+
+/**
+ * Custom filter event.
+ * @see {@link ColumnProps.onFilterMatchModeChange}
+ * @event
+ */
+interface ColumnFilterMatchModeChangeEvent {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Type of filter match; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
+     */
+    matchMode: FilterMatchMode | string;
+}
+
+/**
+ * Custom filter event.
+ * @see {@link ColumnProps.onFilterOperatorChange}
+ * @event
+ */
+interface ColumnFilterOperatorChangeEvent {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Logical operator for the filter.
+     */
+    operator: 'and' | 'or';
+}
+
+/**
+ * Custom filter event.
+ * @see {@link ColumnProps.onFilterConstraintAdd}
+ * @event
+ */
+interface ColumnFilterConstraintAddEvent {
+    /**
+     * Field name of the column.
+     */
+    field: string;
+    /**
+     * Array of ColumnFilterMetaData objects representing the constraints.
+     */
+    constraint: ColumnFilterMetaData;
+}
+
+/**
+ * Custom filter event.
+ * @see {@link ColumnProps.onFilterConstraintRemove}
+ * @extends {ColumnFilterConstraintAddEvent}
+ * @event
+ */
+interface ColumnFilterConstraintRemoveEvent extends ColumnFilterConstraintAddEvent {}
+
+interface ColumnFilterMeta {
+    /**
+     * Filter metadata for specific columns.
+     */
+    [key: string]: ColumnFilterMetaData;
+}
+
+/**
+ * Custom filter event.
+ * @see {@link ColumnProps.filterFunction}
+ * @event
+ */
+interface ColumnFilterEvent {
+    /**
+     * Data of the current row."
+     */
+    rowData: any;
+    /**
+     * Object containing filter metadata for all columns.
+     */
+    filters: ColumnFilterMeta;
+    /**
+     * Additional properties passed to the filter function.
+     */
+    props: any;
+    /**
+     * Object containing metadata for the current column, including filter metadata, field name, and column properties.
+     */
+    column: {
+        /**
+         * Filter metadata for the current column.
+         */
+        filterMeta: object | undefined | null;
+        /**
+         * Field name of the current column.
+         */
+        filterField: string;
+        /**
+         * Properties of the current column.
+         */
+        props: ColumnProps;
+    };
+}
+
+interface ColumnFilterMatchModeOptions {
+    /**
+     * The label to display for the match mode
+     */
+    label: string;
+    /**
+     * Type of filter match; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
+     */
+    value: FilterMatchMode | string;
+}
+
+/**
+ * Defines valid properties in ColumnProps component.
+ * @group Properties
+ */
+export interface ColumnProps {
+    /**
+     * Aligns the content of the column, valid values are left, right and center.
+     */
+    align?: 'left' | 'right' | 'center' | undefined | null;
+    /**
+     * Position of a frozen column, valid values are left and right.
+     */
+    alignFrozen?: 'left' | 'right' | undefined;
+    /**
+     * Aligns the header of the column, valid values are left, right and center.
+     */
+    alignHeader?: 'left' | 'right' | 'center' | undefined | null;
+    /**
+     * Body content of the column.
+     */
+    body?: React.ReactNode | ((data: any, options: ColumnBodyOptions) => React.ReactNode);
+    /**
+     * Style class of the body. If using a function must return a string.
+     */
+    bodyClassName?: string | ((data: any, options: ColumnBodyOptions) => string);
+    /**
+     * Inline style of the body.
+     */
+    bodyStyle?: React.CSSProperties | undefined;
+    /**
+     * When enabled and cellEditorValidator is set, force to call cellEditorValidator
+     * before cell editor is closed. If cellEditorValidator returns false, editor stays open.
+     * @defaultValue false
+     */
+    cellEditValidateOnClose?: boolean | undefined;
+    /**
+     * Event to trigger the validation, possible values are "click" and "blur".
+     * @defaultValue click
+     */
+    cellEditValidatorEvent?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ColumnPassThroughOptions}
+     */
+    pt?: ColumnPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Number of columns to span for grouping.
+     */
+    colSpan?: number | undefined;
+    /**
+     * Identifier of a column if field property is not defined. Only utilized by reorderableColumns feature at the moment.
+     */
+    columnKey?: string | undefined;
+    /**
+     * Depending on the dataType of the column, suitable match modes are displayed.
+     */
+    dataType?: 'text' | 'numeric' | 'date' | string | undefined;
+    /**
+     * Function to provide the cell editor input.
+     */
+    editor?: React.ReactNode | ((options: ColumnEditorOptions) => React.ReactNode);
+    /**
+     * Whether to exclude from global filtering or not.
+     * @defaultValue false
+     */
+    excludeGlobalFilter?: boolean | undefined;
+    /**
+     * Displays an icon to toggle row expansion.
+     * @defaultValue false
+     */
+    expander?: boolean | ((data: any, options: ColumnBodyOptions) => boolean);
+    /**
+     * Defines whether the column is exported or not.
+     * @defaultValue true
+     */
+    exportable?: boolean | undefined;
+    /**
+     * Property of a row data used for exporting, defaults to field.
+     */
+    exportField?: string | undefined;
+    /**
+     * Custom export header of the column to be exported.
+     */
+    exportHeader?: string | undefined;
+    /**
+     * Property of a row data.
+     */
+    field?: string | undefined;
+    /**
+     * Defines if a column can be filtered.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
+    /**
+     * Template of apply element in menu.
+     */
+    filterApply?: React.ReactNode | ((options: ColumnFilterApplyTemplateOptions) => React.ReactNode);
+    /**
+     * Template of clear element in menu.
+     */
+    filterClear?: React.ReactNode | ((options: ColumnFilterClearTemplateOptions) => React.ReactNode);
+    /**
+     * Element for custom filtering.
+     */
+    filterElement?: React.ReactNode | ((options: ColumnFilterElementTemplateOptions) => React.ReactNode);
+    /**
+     * Property of a row data used for filtering, defaults to field.
+     */
+    filterField?: string | undefined;
+    /**
+     * Template of footer element in menu.
+     */
+    filterFooter?: React.ReactNode | ((options: ColumnFilterFooterTemplateOptions) => React.ReactNode);
+    /**
+     * Template of header element in menu.
+     */
+    filterHeader?: React.ReactNode | ((options: ColumnFilterHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Style class of the filter header.
+     */
+    filterHeaderClassName?: string | undefined;
+    /**
+     * Inline style of the filter header.
+     */
+    filterHeaderStyle?: React.CSSProperties | undefined;
+    /**
+     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
+     */
+    filterMatchMode?: FilterMatchMode | string | undefined;
+    /**
+     * An array of label-value pairs to override the global match mode options.
+     */
+    filterMatchModeOptions?: ColumnFilterMatchModeOptions[];
+    /**
+     * Specifies the maximum number of characters allowed in the filter element.
+     */
+    filterMaxLength?: number | undefined;
+    /**
+     * Style class of the column filter overlay.
+     */
+    filterMenuClassName?: string | undefined;
+    /**
+     * Inline style of the column filter overlay.
+     */
+    filterMenuStyle?: React.CSSProperties | undefined;
+    /**
+     * Defines placeholder of the input fields.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Type of the filter input field.
+     * @defaultValue text
+     */
+    filterType?: string | undefined;
+    /**
+     * Footer content of the table.
+     */
+    footer?: React.ReactNode | ((options: ColumnFooterOptions) => React.ReactNode);
+    /**
+     * Style class of the footer.
+     */
+    footerClassName?: string | undefined;
+    /**
+     * Inline style of the footer.
+     */
+    footerStyle?: React.CSSProperties | undefined;
+    /**
+     * Whether the column is fixed in horizontal scrolling or not.
+     * @defaultValue false
+     */
+    frozen?: boolean | undefined;
+    /**
+     * Header content of the table.
+     */
+    header?: React.ReactNode | ((options: ColumnHeaderOptions) => React.ReactNode);
+    /**
+     * Style class of the header.
+     */
+    headerClassName?: string | undefined;
+    /**
+     * Inline style of the header.
+     */
+    headerStyle?: React.CSSProperties | undefined;
+    /**
+     * Content of the header tooltip.
+     */
+    headerTooltip?: string | undefined;
+    /**
+     * Configuration of the header tooltip, refer to the tooltip documentation for more information.
+     */
+    headerTooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Whether the column is rendered.
+     * @defaultValue false
+     */
+    hidden?: boolean | undefined;
+    /**
+     * Maximum number of constraints for a column filter.
+     * @defaultValue 2
+     */
+    maxConstraints?: number | undefined;
+    /**
+     * Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns.
+     */
+    reorderable?: boolean | undefined;
+    /**
+     * Used to defined resizeableColumns per column when resizeableColumns of table is enabled, defaults to value of resizeableColumns.
+     */
+    resizeable?: boolean | undefined;
+    /**
+     * Displays icons to edit row.
+     * @defaultValue false
+     */
+    rowEditor?: boolean | ((data: any, options: ColumnBodyOptions) => boolean);
+    /**
+     * Whether this column displays an icon to reorder the rows.
+     * @defaultValue false
+     */
+    rowReorder?: boolean | undefined;
+    /**
+     * Icon of the drag handle to reorder rows.
+     */
+    rowReorderIcon?: IconType<ColumnProps> | undefined;
+    /**
+     * Number of rows to span for grouping.
+     */
+    rowSpan?: number | undefined;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode?: 'single' | 'multiple' | undefined;
+    /**
+     * When enabled, a button is displayed to add more rules.
+     * @defaultValue true
+     */
+    showAddButton?: boolean | undefined;
+    /**
+     * Displays a button to apply the column filtering.
+     * @defaultValue true
+     */
+    showApplyButton?: boolean | undefined;
+    /**
+     * Displays a button to clear the column filtering.
+     * @defaultValue true
+     */
+    showClearButton?: boolean | undefined;
+    /**
+     * Whether to show the match modes selector.
+     * @defaultValue true
+     */
+    showFilterMatchModes?: boolean | undefined;
+    /**
+     * Whether to display the filter overlay.
+     * @defaultValue true
+     */
+    showFilterMenu?: boolean | undefined;
+    /**
+     * Whether to show the match modes selector and match operator selector.
+     * @defaultValue true
+     */
+    showFilterMenuOptions?: boolean | undefined;
+    /**
+     * When enabled, match all and match any operator selector is displayed.
+     * @defaultValue true
+     */
+    showFilterOperator?: boolean | undefined;
+    /**
+     * Name of the field to sort data by default.
+     */
+    sortField?: string | undefined;
+    /**
+     * Defines if a column is sortable.
+     * @defaultValue false
+     */
+    sortable?: boolean | undefined;
+    /**
+     * When enabled, the data of columns with this property cannot be sorted or changed by the user.
+     * @defaultValue false
+     */
+    sortableDisabled?: boolean | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Validator function to validate the cell input value.
+     * @param {ColumnEvent} event - Custom event.
+     */
+    cellEditValidator?(event: ColumnEvent): boolean;
+    /**
+     * Custom filter function.
+     * @param {*} value - Value of the filter event.
+     * @param {*} filter - Filter of the filter event.
+     * @param {*} filterLocale - Filter locale of the event.
+     * @param {*} params - Params of the filter event.
+     */
+    filterFunction?(value: any, filter: any, filterLocale: string, params: ColumnFilterEvent): void;
+    /**
+     * Callback to invoke before the cell editor is hidden.
+     * @param {ColumnEvent} event - Custom event.
+     */
+    onBeforeCellEditHide?(event: ColumnEvent): void;
+    /**
+     * Callback to invoke before the cell editor is shown. To prevent editor from showing return false or originalEvent.preventDefault().
+     * @param {ColumnEvent} event - Custom event.
+     */
+    onBeforeCellEditShow?(event: ColumnEvent): void;
+    /**
+     * Callback to execute when editor is cancelled.
+     * @param {ColumnEvent} event - Custom event.
+     */
+    onCellEditCancel?(event: ColumnEvent): void;
+    /**
+     * Callback to execute when editor is submitted.
+     * @param {ColumnEvent} event - Custom event.
+     */
+    onCellEditComplete?(event: ColumnEvent): void;
+    /**
+     * Callback to invoke when cell edit is initiated. To prevent editor from showing return false or originalEvent.preventDefault().
+     * @param {ColumnEvent} event - Custom event.
+     */
+    onCellEditInit?(event: ColumnEvent): void;
+    /**
+     * Callback to invoke when the apply button is clicked.
+     * @param {ColumnFilterApplyClickEvent} event - Custom filter event.
+     */
+    onFilterApplyClick?(event: ColumnFilterApplyClickEvent): void;
+    /**
+     * Callback to invoke when the filter meta is cleared.
+     */
+    onFilterClear?(): void;
+    /**
+     * Callback to invoke when a new constraint is added.
+     * @param {ColumnFilterConstraintAddEvent} event - Custom filter event.
+     */
+    onFilterConstraintAdd?(event: ColumnFilterConstraintAddEvent): void;
+    /**
+     * Callback to invoke when a constraint is removed.
+     * @param {ColumnFilterConstraintRemoveEvent} event - Custom filter event.
+     */
+    onFilterConstraintRemove?(event: ColumnFilterConstraintRemoveEvent): void;
+    /**
+     * Callback to invoke when the match mode option is changed.
+     * @param {ColumnFilterMatchModeChangeEvent} event - Custom filter event.
+     */
+    onFilterMatchModeChange?(event: ColumnFilterMatchModeChangeEvent): void;
+    /**
+     * Callback to invoke when the filter operator option is changed.
+     * @param {ColumnFilterOperatorChangeEvent} event - Custom filter event.
+     */
+    onFilterOperatorChange?(event: ColumnFilterOperatorChangeEvent): void;
+    /**
+     * Sort function for custom sorting.
+     * @param {ColumnSortEvent} event - Custom sort event.
+     */
+    sortFunction?(event: ColumnSortEvent): void;
+}
+
+/**
+ * **PrimeReact - Column**
+ *
+ * _Column is a helper component for DataTable and TreeTable._
+ *
+ * [Live Demo](https://www.primereact.org/column/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Column extends React.Component<ColumnProps, any> {}
diff --git a/components/lib/column/package.json b/components/lib/column/package.json
new file mode 100644
index 0000000000..34f292eb8c
--- /dev/null
+++ b/components/lib/column/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./column.cjs.js",
+    "module": "./column.esm.js",
+    "unpkg": "./column.min.js",
+    "types": "./column.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/columngroup/ColumnGroup.js b/components/lib/columngroup/ColumnGroup.js
new file mode 100644
index 0000000000..48c7f55958
--- /dev/null
+++ b/components/lib/columngroup/ColumnGroup.js
@@ -0,0 +1,3 @@
+export const ColumnGroup = () => {};
+
+ColumnGroup.displayName = 'ColumnGroup';
diff --git a/components/lib/columngroup/ColumnGroupBase.js b/components/lib/columngroup/ColumnGroupBase.js
new file mode 100644
index 0000000000..0e6ea614bc
--- /dev/null
+++ b/components/lib/columngroup/ColumnGroupBase.js
@@ -0,0 +1,11 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils } from '../utils/Utils';
+
+export const ColumnGroupBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ColumnGroup',
+        children: undefined
+    },
+    getCProp: (group, name) => ObjectUtils.getComponentProp(group, name, ColumnGroupBase.defaultProps),
+    getCProps: (group) => ObjectUtils.getComponentProps(group, ColumnGroupBase.defaultProps)
+});
diff --git a/components/lib/columngroup/columngroup.d.ts b/components/lib/columngroup/columngroup.d.ts
new file mode 100644
index 0000000000..2a7b16ab76
--- /dev/null
+++ b/components/lib/columngroup/columngroup.d.ts
@@ -0,0 +1,82 @@
+/**
+ *
+ * Columns can be grouped at header and footer sections by defining a ColumnGroup component.
+ * It is a helper component for DataTable.
+ *
+ * [Live Demo](https://www.primereact.org/datatable/)
+ *
+ * @module columngroup
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { DataTablePassThroughOptions } from '../datatable/datatable';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ColumnGroupPassThroughType<T> = PassThroughType<T, ColumnGroupPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColumnGroupPassThroughMethodOptions {
+    props: ColumnGroupProps;
+    parent: DataTablePassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColumnGroupProps.pt}
+ */
+export interface ColumnGroupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColumnGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in ColumnGroup component.
+ * @group Properties
+ */
+// tslint:disable-next-line:no-empty-interface
+export interface ColumnGroupProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ColumnGroupPassThroughOptions}
+     */
+    pt?: ColumnGroupPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ColumnGroup**
+ *
+ * _It is a helper component for DataTable._
+ *
+ * [Live Demo](https://www.primereact.org/columngroup/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ColumnGroup extends React.Component<ColumnGroupProps, any> {}
diff --git a/components/lib/columngroup/package.json b/components/lib/columngroup/package.json
new file mode 100644
index 0000000000..a9368c7214
--- /dev/null
+++ b/components/lib/columngroup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./columngroup.cjs.js",
+    "module": "./columngroup.esm.js",
+    "unpkg": "./columngroup.min.js",
+    "types": "./columngroup.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/componentbase/ComponentBase.js b/components/lib/componentbase/ComponentBase.js
new file mode 100644
index 0000000000..ffb4f2a677
--- /dev/null
+++ b/components/lib/componentbase/ComponentBase.js
@@ -0,0 +1,650 @@
+import PrimeReact from '../api/Api';
+import { useMountEffect, useStyle, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ObjectUtils, classNames, mergeProps } from '../utils/Utils';
+
+const baseStyle = `
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    pointer-events: none;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.p-overflow-hidden {
+    overflow: hidden;
+    padding-right: var(--scrollbar-width);
+}
+`;
+
+const buttonStyles = `
+.p-button {
+    margin: 0;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-button-label {
+    flex: 1 1 auto;
+}
+
+.p-button-icon {
+    pointer-events: none;
+}
+
+.p-button-icon-right {
+    order: 1;
+}
+
+.p-button:disabled {
+    cursor: default;
+}
+
+.p-button-icon-only {
+    justify-content: center;
+}
+
+.p-button-icon-only .p-button-label {
+    visibility: hidden;
+    width: 0;
+    flex: 0 0 auto;
+}
+
+.p-button-vertical {
+    flex-direction: column;
+}
+
+.p-button-icon-bottom {
+    order: 2;
+}
+
+.p-button-group .p-button {
+    margin: 0;
+}
+
+.p-button-group .p-button:not(:last-child) {
+    border-right: 0 none;
+}
+
+.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+}
+
+.p-button-group .p-button:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-button-group .p-button:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-button-group .p-button:focus {
+    position: relative;
+    z-index: 1;
+}
+
+.p-button-group-single .p-button:first-of-type {
+    border-top-right-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.p-button-group-single .p-button:last-of-type {
+    border-top-left-radius: var(--border-radius) !important;
+    border-bottom-left-radius: var(--border-radius) !important;
+}
+`;
+const inputTextStyles = `
+.p-inputtext {
+    margin: 0;
+}
+
+.p-fluid .p-inputtext {
+    width: 100%;
+}
+
+/* InputGroup */
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -0.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+}
+
+.p-float-label textarea ~ label,
+.p-float-label .p-mention ~ label {
+    top: 1rem;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input:-webkit-autofill ~ 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,
+.p-float-label .p-tooltip-target-wrapper ~ label {
+    top: -0.75rem;
+    font-size: 12px;
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+    display: inline-block;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-right > i,
+.p-input-icon-left > svg,
+.p-input-icon-right > svg,
+.p-input-icon-left > .p-input-prefix,
+.p-input-icon-right > .p-input-suffix {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+}
+
+.p-fluid .p-input-icon-left,
+.p-fluid .p-input-icon-right {
+    display: block;
+    width: 100%;
+}
+`;
+const iconStyles = `
+.p-icon {
+    display: inline-block;
+}
+
+.p-icon-spin {
+    -webkit-animation: p-icon-spin 2s infinite linear;
+    animation: p-icon-spin 2s infinite linear;
+}
+
+svg.p-icon {
+    pointer-events: auto;
+}
+
+svg.p-icon g,
+.p-disabled svg.p-icon {
+    pointer-events: none;
+}
+
+@-webkit-keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+
+@keyframes p-icon-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+`;
+const commonStyle = `
+@layer primereact {
+    .p-component, .p-component * {
+        box-sizing: border-box;
+    }
+
+    .p-hidden {
+        display: none;
+    }
+
+    .p-hidden-space {
+        visibility: hidden;
+    }
+
+    .p-reset {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        outline: 0;
+        text-decoration: none;
+        font-size: 100%;
+        list-style: none;
+    }
+
+    .p-disabled, .p-disabled * {
+        cursor: default;
+        pointer-events: none;
+        user-select: none;
+    }
+
+    .p-component-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .p-unselectable-text {
+        user-select: none;
+    }
+
+    .p-scrollbar-measure {
+        width: 100px;
+        height: 100px;
+        overflow: scroll;
+        position: absolute;
+        top: -9999px;
+    }
+
+    @-webkit-keyframes p-fadein {
+      0%   { opacity: 0; }
+      100% { opacity: 1; }
+    }
+    @keyframes p-fadein {
+      0%   { opacity: 0; }
+      100% { opacity: 1; }
+    }
+
+    .p-link {
+        text-align: left;
+        background-color: transparent;
+        margin: 0;
+        padding: 0;
+        border: none;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-link:disabled {
+        cursor: default;
+    }
+
+    /* Non react overlay animations */
+    .p-connected-overlay {
+        opacity: 0;
+        transform: scaleY(0.8);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .p-connected-overlay-visible {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+
+    .p-connected-overlay-hidden {
+        opacity: 0;
+        transform: scaleY(1);
+        transition: opacity .1s linear;
+    }
+
+    /* React based overlay animations */
+    .p-connected-overlay-enter {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+
+    .p-connected-overlay-enter-active {
+        opacity: 1;
+        transform: scaleY(1);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .p-connected-overlay-enter-done {
+        transform: none;
+    }
+
+    .p-connected-overlay-exit {
+        opacity: 1;
+    }
+
+    .p-connected-overlay-exit-active {
+        opacity: 0;
+        transition: opacity .1s linear;
+    }
+
+    /* Toggleable Content */
+    .p-toggleable-content-enter {
+        max-height: 0;
+    }
+
+    .p-toggleable-content-enter-active {
+        overflow: hidden;
+        max-height: 1000px;
+        transition: max-height 1s ease-in-out;
+    }
+
+    .p-toggleable-content-enter-done {
+        transform: none;
+    }
+
+    .p-toggleable-content-exit {
+        max-height: 1000px;
+    }
+
+    .p-toggleable-content-exit-active {
+        overflow: hidden;
+        max-height: 0;
+        transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+    }
+
+    /* @todo Refactor */
+    .p-menu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    ${buttonStyles}
+    ${inputTextStyles}
+    ${iconStyles}
+}
+`;
+
+export const ComponentBase = {
+    cProps: undefined,
+    cParams: undefined,
+    cName: undefined,
+    defaultProps: {
+        pt: undefined,
+        ptOptions: undefined,
+        unstyled: false
+    },
+    context: {},
+    globalCSS: undefined,
+    classes: {},
+    styles: '',
+    extend: (props = {}) => {
+        const css = props.css;
+        const defaultProps = { ...props.defaultProps, ...ComponentBase.defaultProps };
+        const inlineStyles = {};
+
+        const getProps = (props, context = {}) => {
+            ComponentBase.context = context;
+            ComponentBase.cProps = props;
+
+            return ObjectUtils.getMergedProps(props, defaultProps);
+        };
+
+        const getOtherProps = (props) => ObjectUtils.getDiffProps(props, defaultProps);
+
+        const getPTValue = (obj = {}, key = '', params = {}, searchInDefaultPT = true) => {
+            // obj either is the passthrough options or has a .pt property.
+            if (obj.hasOwnProperty('pt') && obj.pt !== undefined) {
+                obj = obj.pt;
+            }
+
+            const originalkey = key;
+            const isNestedParam = /./g.test(originalkey) && !!params[originalkey.split('.')[0]];
+            const fkey = isNestedParam ? ObjectUtils.toFlatCase(originalkey.split('.')[1]) : ObjectUtils.toFlatCase(originalkey);
+            const hostName = params.hostName && ObjectUtils.toFlatCase(params.hostName);
+            const componentName = hostName || (params.props && params.props.__TYPE && ObjectUtils.toFlatCase(params.props.__TYPE)) || '';
+            const isTransition = fkey === 'transition';
+            const datasetPrefix = 'data-pc-';
+
+            const getHostInstance = (params) => {
+                return params?.props ? (params.hostName ? (params.props.__TYPE === params.hostName ? params.props : getHostInstance(params.parent)) : params.parent) : undefined;
+            };
+
+            const getPropValue = (name) => {
+                return params.props?.[name] || getHostInstance(params)?.[name];
+            };
+
+            ComponentBase.cParams = params;
+            ComponentBase.cName = componentName;
+            const { mergeSections = true, mergeProps: useMergeProps = false } = getPropValue('ptOptions') || ComponentBase.context.ptOptions || {};
+
+            const getPTClassValue = (...args) => {
+                const value = getOptionValue(...args);
+
+                if (Array.isArray(value)) {
+                    return { className: classNames(...value) };
+                }
+
+                if (ObjectUtils.isString(value)) {
+                    return { className: value };
+                }
+
+                if (value?.hasOwnProperty('className') && Array.isArray(value.className)) {
+                    return { className: classNames(...value.className) };
+                }
+
+                return value;
+            };
+
+            const globalPT = searchInDefaultPT ? (isNestedParam ? _useGlobalPT(getPTClassValue, originalkey, params) : _useDefaultPT(getPTClassValue, originalkey, params)) : undefined;
+            const self = isNestedParam ? undefined : _usePT(_getPT(obj, componentName), getPTClassValue, originalkey, params, componentName);
+
+            const datasetProps = !isTransition && {
+                ...(fkey === 'root' && { [`${datasetPrefix}name`]: params.props && params.props.__parentMetadata ? ObjectUtils.toFlatCase(params.props.__TYPE) : componentName }),
+                [`${datasetPrefix}section`]: fkey
+            };
+
+            return mergeSections || (!mergeSections && self)
+                ? useMergeProps
+                    ? mergeProps([globalPT, self, Object.keys(datasetProps).length ? datasetProps : {}], { classNameMergeFunction: ComponentBase.context.ptOptions?.classNameMergeFunction })
+                    : { ...globalPT, ...self, ...(Object.keys(datasetProps).length ? datasetProps : {}) }
+                : { ...self, ...(Object.keys(datasetProps).length ? datasetProps : {}) };
+        };
+
+        const setMetaData = (metadata = {}) => {
+            const { props, state } = metadata;
+            const ptm = (key = '', params = {}) => getPTValue((props || {}).pt, key, { ...metadata, ...params });
+            const ptmo = (obj = {}, key = '', params = {}) => getPTValue(obj, key, params, false);
+
+            const isUnstyled = () => {
+                return ComponentBase.context.unstyled || PrimeReact.unstyled || props.unstyled;
+            };
+
+            const cx = (key = '', params = {}) => {
+                return !isUnstyled() ? getOptionValue(css && css.classes, key, { props, state, ...params }) : undefined;
+            };
+
+            const sx = (key = '', params = {}, when = true) => {
+                if (when) {
+                    const self = getOptionValue(css && css.inlineStyles, key, { props, state, ...params });
+                    const base = getOptionValue(inlineStyles, key, { props, state, ...params });
+
+                    return mergeProps([base, self], { classNameMergeFunction: ComponentBase.context.ptOptions?.classNameMergeFunction });
+                }
+
+                return undefined;
+            };
+
+            return { ptm, ptmo, sx, cx, isUnstyled };
+        };
+
+        return {
+            getProps,
+            getOtherProps,
+            setMetaData,
+            ...props,
+            defaultProps
+        };
+    }
+};
+
+const getOptionValue = (obj, key = '', params = {}) => {
+    const fKeys = String(ObjectUtils.toFlatCase(key)).split('.');
+    const fKey = fKeys.shift();
+    const matchedPTOption = ObjectUtils.isNotEmpty(obj) ? Object.keys(obj).find((k) => ObjectUtils.toFlatCase(k) === fKey) : '';
+
+    return fKey ? (ObjectUtils.isObject(obj) ? getOptionValue(ObjectUtils.getItemValue(obj[matchedPTOption], params), fKeys.join('.'), params) : undefined) : ObjectUtils.getItemValue(obj, params);
+};
+
+const _getPT = (pt, key = '', callback) => {
+    const _usept = pt?._usept;
+
+    const getValue = (value, checkSameKey = false) => {
+        const _value = callback ? callback(value) : value;
+        const _key = ObjectUtils.toFlatCase(key);
+
+        return (checkSameKey ? (_key !== ComponentBase.cName ? _value?.[_key] : undefined) : _value?.[_key]) ?? _value;
+    };
+
+    return ObjectUtils.isNotEmpty(_usept)
+        ? {
+              _usept,
+              originalValue: getValue(pt.originalValue),
+              value: getValue(pt.value)
+          }
+        : getValue(pt, true);
+};
+
+const _usePT = (pt, callback, key, params) => {
+    const fn = (value) => callback(value, key, params);
+
+    if (pt?.hasOwnProperty('_usept')) {
+        const { mergeSections = true, mergeProps: useMergeProps = false, classNameMergeFunction } = pt._usept || ComponentBase.context.ptOptions || {};
+        const originalValue = fn(pt.originalValue);
+        const value = fn(pt.value);
+
+        if (originalValue === undefined && value === undefined) {
+            return undefined;
+        } else if (ObjectUtils.isString(value)) {
+            return value;
+        } else if (ObjectUtils.isString(originalValue)) {
+            return originalValue;
+        }
+
+        return mergeSections || (!mergeSections && value) ? (useMergeProps ? mergeProps([originalValue, value], { classNameMergeFunction }) : { ...originalValue, ...value }) : value;
+    }
+
+    return fn(pt);
+};
+
+const getGlobalPT = () => {
+    return _getPT(ComponentBase.context.pt || PrimeReact.pt, undefined, (value) => ObjectUtils.getItemValue(value, ComponentBase.cParams));
+};
+
+const getDefaultPT = () => {
+    return _getPT(ComponentBase.context.pt || PrimeReact.pt, undefined, (value) => getOptionValue(value, ComponentBase.cName, ComponentBase.cParams) || ObjectUtils.getItemValue(value, ComponentBase.cParams));
+};
+
+const _useGlobalPT = (callback, key, params) => {
+    return _usePT(getGlobalPT(), callback, key, params);
+};
+
+const _useDefaultPT = (callback, key, params) => {
+    return _usePT(getDefaultPT(), callback, key, params);
+};
+
+export const useHandleStyle = (styles, _isUnstyled = () => {}, config) => {
+    const { name, styled = false, hostName = '' } = config;
+
+    const globalCSS = _useGlobalPT(getOptionValue, 'global.css', ComponentBase.cParams);
+    const componentName = ObjectUtils.toFlatCase(name);
+
+    const { load: loadBaseStyle } = useStyle(baseStyle, { name: 'base', manual: true });
+    const { load: loadCommonStyle } = useStyle(commonStyle, { name: 'common', manual: true });
+    const { load: loadGlobalStyle } = useStyle(globalCSS, { name: 'global', manual: true });
+    const { load: loadComponentStyle } = useStyle(styles, { name: name, manual: true });
+
+    const hook = (hookName) => {
+        if (!hostName) {
+            const selfHook = _usePT(_getPT((ComponentBase.cProps || {}).pt, componentName), getOptionValue, `hooks.${hookName}`);
+            const defaultHook = _useDefaultPT(getOptionValue, `hooks.${hookName}`);
+
+            selfHook?.();
+            defaultHook?.();
+        }
+    };
+
+    hook('useMountEffect');
+    useMountEffect(() => {
+        // Load base and global styles first as they are always needed
+        loadBaseStyle();
+        loadGlobalStyle();
+
+        // Only load additional styles if component is styled
+        if (!_isUnstyled()) {
+            // Load common styles shared across components
+            loadCommonStyle();
+
+            // Load component-specific styles if not explicitly styled
+            if (!styled) {
+                loadComponentStyle();
+            }
+        }
+    });
+
+    useUpdateEffect(() => {
+        hook('useUpdateEffect');
+    });
+
+    useUnmountEffect(() => {
+        hook('useUnmountEffect');
+    });
+};
diff --git a/components/lib/componentbase/componentbase.d.ts b/components/lib/componentbase/componentbase.d.ts
new file mode 100644
index 0000000000..819177efda
--- /dev/null
+++ b/components/lib/componentbase/componentbase.d.ts
@@ -0,0 +1,25 @@
+export interface ComponentHooks {
+    useMountEffect?(): void;
+    useUpdateEffect?(): void;
+    useUnmountEffect?(): void;
+}
+
+/**
+ * Custom hook to use to load style options for a component.
+ * @param {string} styles - The style text content.
+ * @param {boolean} isUnstyled - Flag removes component related styles in the core.
+ * @param config - The component configuration.
+ */
+export declare function useHandleStyle(styles: string, isUnstyled: () => boolean, config: { name: string; styled?: boolean; hostName?: string }): void;
+
+export interface ComponentBasePassThroughOptions {
+    hooks?: ComponentHooks;
+}
+
+/**
+ * @todo Update all d.ts with it.
+ */
+export interface ComponentBasePassThroughMethodOptions<P = any, S = any> {
+    props?: P | undefined | null;
+    state?: S | undefined | null;
+}
diff --git a/components/lib/componentbase/package.json b/components/lib/componentbase/package.json
new file mode 100644
index 0000000000..263319f361
--- /dev/null
+++ b/components/lib/componentbase/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./componentbase.cjs.js",
+    "module": "./componentbase.esm.js",
+    "unpkg": "./componentbase.min.js",
+    "types": "./componentbase.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/confirmdialog/ConfirmDialog.js b/components/lib/confirmdialog/ConfirmDialog.js
new file mode 100644
index 0000000000..3692b573f8
--- /dev/null
+++ b/components/lib/confirmdialog/ConfirmDialog.js
@@ -0,0 +1,272 @@
+import * as React from 'react';
+import { PrimeReactContext, localeOption } from '../api/Api';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { Dialog } from '../dialog/Dialog';
+import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { ConfirmDialogBase } from './ConfirmDialogBase';
+
+export const confirmDialog = (props = {}) => {
+    props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
+    props.visible && OverlayService.emit('confirm-dialog', props);
+
+    const show = (updatedProps = {}) => {
+        OverlayService.emit('confirm-dialog', { ...props, ...updatedProps, ...{ visible: true } });
+    };
+
+    const hide = () => {
+        OverlayService.emit('confirm-dialog', { visible: false });
+    };
+
+    return { show, hide };
+};
+
+export const ConfirmDialog = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ConfirmDialogBase.getProps(inProps, context);
+
+        const [visibleState, setVisibleState] = React.useState(props.visible);
+        const [reshowState, setReshowState] = React.useState(false);
+        const confirmProps = React.useRef(null);
+        const isCallbackExecuting = React.useRef(false);
+        const focusElementOnHide = React.useRef(null);
+
+        const getCurrentProps = () => {
+            let group = props.group;
+
+            if (confirmProps.current) {
+                group = confirmProps.current.group;
+            }
+
+            return Object.assign({}, props, confirmProps.current, { group });
+        };
+
+        const getPropValue = (key) => getCurrentProps()[key];
+        const callbackFromProp = (key, ...param) => ObjectUtils.getPropValue(getPropValue(key), param);
+
+        const acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
+        const rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
+
+        const metaData = {
+            props,
+            state: {
+                visible: visibleState
+            }
+        };
+        const { ptm, cx, isUnstyled } = ConfirmDialogBase.setMetaData(metaData);
+
+        useHandleStyle(ConfirmDialogBase.css.styles, isUnstyled, { name: 'confirmdialog' });
+
+        const accept = () => {
+            if (!isCallbackExecuting.current) {
+                isCallbackExecuting.current = true;
+                callbackFromProp('accept');
+                hide('accept');
+            }
+        };
+
+        const reject = () => {
+            if (!isCallbackExecuting.current) {
+                isCallbackExecuting.current = true;
+                callbackFromProp('reject');
+                hide('reject');
+            }
+        };
+
+        const show = () => {
+            const currentProps = getCurrentProps();
+
+            if (currentProps.group === props.group) {
+                setVisibleState(true);
+                isCallbackExecuting.current = false;
+
+                // Remember the focused element before we opened the dialog
+                // so we can return focus to it once we close the dialog.
+                focusElementOnHide.current = document.activeElement;
+            }
+        };
+
+        const hide = (result = 'cancel') => {
+            if (visibleState) {
+                if (typeof result !== 'string') {
+                    result = 'cancel';
+                }
+
+                setVisibleState(false);
+                callbackFromProp('onHide', result);
+                DomHandler.focus(focusElementOnHide.current);
+                focusElementOnHide.current = null;
+            }
+        };
+
+        const confirm = (updatedProps) => {
+            if (updatedProps.tagKey === props.tagKey) {
+                const isVisibleChanged = visibleState !== updatedProps.visible;
+                const targetChanged = getPropValue('target') !== updatedProps.target;
+
+                if (targetChanged && !props.target) {
+                    hide();
+                    confirmProps.current = updatedProps;
+                    setReshowState(true);
+                } else if (isVisibleChanged) {
+                    confirmProps.current = updatedProps;
+                    updatedProps.visible ? show() : hide();
+                }
+            }
+        };
+
+        React.useEffect(() => {
+            props.visible ? show() : hide();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.visible]);
+
+        React.useEffect(() => {
+            if (!props.target && !props.message) {
+                OverlayService.on('confirm-dialog', confirm);
+            }
+
+            return () => {
+                OverlayService.off('confirm-dialog', confirm);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.target]);
+
+        useUpdateEffect(() => {
+            reshowState && show();
+        }, [reshowState]);
+
+        useUnmountEffect(() => {
+            OverlayService.off('confirm-dialog', confirm);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            confirm
+        }));
+
+        const createFooter = () => {
+            const defaultFocus = getPropValue('defaultFocus');
+            const acceptClassName = classNames('p-confirm-dialog-accept', getPropValue('acceptClassName'));
+            const rejectClassName = classNames(
+                'p-confirm-dialog-reject',
+                {
+                    'p-button-text': !getPropValue('rejectClassName')
+                },
+                getPropValue('rejectClassName')
+            );
+
+            const rejectButtonProps = mergeProps(
+                {
+                    label: rejectLabel,
+                    autoFocus: defaultFocus === 'reject',
+                    icon: getPropValue('rejectIcon'),
+                    className: classNames(getPropValue('rejectClassName'), cx('rejectButton', { getPropValue })),
+                    onClick: reject,
+                    pt: ptm('rejectButton'),
+                    unstyled: props.unstyled,
+                    __parentMetadata: {
+                        parent: metaData
+                    }
+                },
+                ptm('rejectButton')
+            );
+
+            const acceptButtonProps = mergeProps(
+                {
+                    label: acceptLabel,
+                    autoFocus: defaultFocus === undefined || defaultFocus === 'accept',
+                    icon: getPropValue('acceptIcon'),
+                    className: classNames(getPropValue('acceptClassName'), cx('acceptButton')),
+                    onClick: accept,
+                    pt: ptm('acceptButton'),
+                    unstyled: props.unstyled,
+                    __parentMetadata: {
+                        parent: metaData
+                    }
+                },
+                ptm('acceptButton')
+            );
+
+            const content = (
+                <>
+                    <Button {...rejectButtonProps} />
+                    <Button {...acceptButtonProps} />
+                </>
+            );
+
+            if (getPropValue('footer')) {
+                const defaultContentOptions = {
+                    accept,
+                    reject,
+                    acceptClassName,
+                    rejectClassName,
+                    acceptLabel,
+                    rejectLabel,
+                    element: content,
+                    props: getCurrentProps()
+                };
+
+                return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
+            }
+
+            return content;
+        };
+
+        const createElement = () => {
+            const currentProps = getCurrentProps();
+            const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+
+            const icon = IconUtils.getJSXIcon(getPropValue('icon'), { ...iconProps }, { props: currentProps });
+            const footer = createFooter();
+
+            const messageProps = mergeProps(
+                {
+                    className: cx('message')
+                },
+                ptm('message')
+            );
+
+            const rootProps = mergeProps(
+                {
+                    visible: visibleState,
+                    className: classNames(getPropValue('className'), cx('root')),
+                    footer,
+                    onHide: hide,
+                    breakpoints: getPropValue('breakpoints'),
+                    pt: currentProps.pt,
+                    unstyled: props.unstyled,
+                    appendTo: getPropValue('appendTo'),
+                    __parentMetadata: {
+                        parent: metaData
+                    }
+                },
+                ConfirmDialogBase.getOtherProps(currentProps)
+            );
+
+            return (
+                <Dialog {...rootProps} content={inProps?.content}>
+                    {icon}
+                    <span {...messageProps}>{message}</span>
+                </Dialog>
+            );
+        };
+
+        const element = createElement();
+
+        return <Portal element={element} appendTo={getPropValue('appendTo')} />;
+    })
+);
+
+ConfirmDialog.displayName = 'ConfirmDialog';
diff --git a/components/lib/confirmdialog/ConfirmDialogBase.js b/components/lib/confirmdialog/ConfirmDialogBase.js
new file mode 100644
index 0000000000..9e71b6a627
--- /dev/null
+++ b/components/lib/confirmdialog/ConfirmDialogBase.js
@@ -0,0 +1,42 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-confirm-dialog',
+    message: 'p-confirm-dialog-message',
+    icon: 'p-confirm-dialog-icon',
+    acceptButton: 'p-confirm-dialog-accept',
+    rejectButton: ({ getPropValue }) =>
+        classNames('p-confirm-dialog-reject', {
+            'p-button-text': !getPropValue('rejectClassName')
+        })
+};
+
+export const ConfirmDialogBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ConfirmDialog',
+        accept: null,
+        acceptClassName: null,
+        acceptIcon: null,
+        acceptLabel: null,
+        appendTo: null,
+        breakpoints: null,
+        children: undefined,
+        className: null,
+        content: null,
+        defaultFocus: 'accept',
+        footer: null,
+        icon: null,
+        message: null,
+        onHide: null,
+        reject: null,
+        rejectClassName: null,
+        rejectIcon: null,
+        rejectLabel: null,
+        tagKey: undefined,
+        visible: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/confirmdialog/confirmdialog.d.ts b/components/lib/confirmdialog/confirmdialog.d.ts
new file mode 100644
index 0000000000..d4be0f18fb
--- /dev/null
+++ b/components/lib/confirmdialog/confirmdialog.d.ts
@@ -0,0 +1,294 @@
+/**
+ *
+ * ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag.
+ *
+ * [Live Demo](https://www.primereact.org/confirmdialog)
+ *
+ * @module confirmdialog
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { DialogProps } from '../dialog';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type ConfirmDialogPassThroughType<T> = PassThroughType<T, ConfirmDialogPassThroughMethodOptions>;
+export declare type ConfirmDialogPassThroughTransitionType = ReactCSSTransitionProps | ((options: ConfirmDialogPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ConfirmDialogPassThroughMethodOptions {
+    props: ConfirmDialogProps;
+    state: ConfirmDialogState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ConfirmDialogProps.pt}
+ */
+export interface ConfirmDialogPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header icons' DOM element.
+     */
+    headerIcons?: ConfirmDialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the close button's component.
+     */
+    closeButton?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close button icon's component.
+     */
+    closeButtonIcon?: ConfirmDialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ConfirmDialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    rejectButton?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    acceptButton?: ConfirmDialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: ConfirmDialogPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in ConfirmDialog component.
+ */
+export interface ConfirmDialogState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current confirmation message.
+     */
+    confirmation: any;
+}
+
+/**
+ * Custom confirm dialog options
+ */
+interface ConfirmDialogOptions {
+    /**
+     * Callback to execute when action is confirmed.
+     */
+    accept(): void;
+    /**
+     * Callback to execute when action is rejected.
+     */
+    reject(): void;
+    /**
+     * Style class of the accept button.
+     */
+    acceptClassName: string;
+    /**
+     * Style class of the reject button.
+     */
+    rejectClassName: string;
+    /**
+     * Label of the accept button.
+     * @defaultValue Yes
+     */
+    acceptLabel: string;
+    /**
+     * Label of the reject button.
+     * @defaultValue No
+     */
+    rejectLabel: string;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus: string;
+    /**
+     * Default element created by the component.
+     */
+    element: React.ReactNode;
+    /**
+     * All component props
+     * @type {ConfirmDialogProps}
+     */
+    props: ConfirmDialogProps;
+    /**
+     * Extra options
+     */
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in ConfirmDialog component. In addition to these, all properties of {@link dialog} can be used in this component.
+ * @group Properties
+ */
+export interface ConfirmDialogProps extends Omit<DialogProps, 'onHide' | 'footer' | 'pt'> {
+    /**
+     * Optional key to match the key of the confirmation, useful to target a specific confirm dialog instance.
+     */
+    group?: string | undefined;
+    /**
+     * Unique tag key used to separate the confirmDialog components in the page.
+     */
+    tagKey?: string | undefined;
+    /**
+     * Specifies the visibility of the confirm dialog.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Message of the confirmation.
+     */
+    message?: React.ReactNode | ((options: ConfirmDialogOptions) => React.ReactNode);
+    /**
+     * Label of the reject button.
+     * @defaultValue No
+     */
+    rejectLabel?: string | undefined;
+    /**
+     * Label of the accept button.
+     * @defaultValue Yes
+     */
+    acceptLabel?: string | undefined;
+    /**
+     * Icon to display next to the message.
+     */
+    icon?: IconType<ConfirmDialogProps> | undefined;
+    /**
+     * Icon of the reject button.
+     */
+    rejectIcon?: IconType<ConfirmDialogProps> | undefined;
+    /**
+     * Icon of the accept button.
+     */
+    acceptIcon?: IconType<ConfirmDialogProps> | undefined;
+    /**
+     * Style class of the reject button.
+     */
+    rejectClassName?: string | undefined;
+    /**
+     * Style class of the accept button.
+     */
+    acceptClassName?: string | undefined;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Footer content of the confirm dialog.
+     */
+    footer?: React.ReactNode | ((options: ConfirmDialogOptions) => React.ReactNode);
+    /**
+     * Callback to invoke when confirm dialog is hidden.
+     */
+    onHide?(result: string): void;
+    /**
+     * Callback to execute when action is confirmed.
+     */
+    accept?(): void;
+    /**
+     * Callback to execute when action is rejected.
+     */
+    reject?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmDialogPassThroughOptions}
+     */
+    pt?: ConfirmDialogPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Object returned by the {@link confirmDialog} method.
+ */
+interface ConfirmDialogReturn {
+    /**
+     * Used to show the dialog.
+     */
+    show(): void;
+    /**
+     * Used to hide the dialog.
+     */
+    hide(): void;
+}
+
+/**
+ * **PrimeReact - ConfirmDialog**
+ *
+ * _ConfirmDialog uses a Dialog UI with confirmDialog method or <ConfirmDialog> tag._
+ *
+ * [Live Demo](https://www.primereact.org/confirmdialog/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ConfirmDialog extends React.Component<ConfirmDialogProps, any> {
+    /**
+     * Used to call/update the component manually
+     * @param {ConfirmDialogProps} props - All component props
+     */
+    public confirm(props?: ConfirmDialogProps): void;
+}
+
+export declare function confirmDialog(props: ConfirmDialogProps): ConfirmDialogReturn;
diff --git a/components/lib/confirmdialog/package.json b/components/lib/confirmdialog/package.json
new file mode 100644
index 0000000000..c1dd7a7a25
--- /dev/null
+++ b/components/lib/confirmdialog/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./confirmdialog.cjs.js",
+    "module": "./confirmdialog.esm.js",
+    "unpkg": "./confirmdialog.min.js",
+    "types": "./confirmdialog.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
new file mode 100644
index 0000000000..24736df714
--- /dev/null
+++ b/components/lib/confirmpopup/ConfirmPopup.js
@@ -0,0 +1,424 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { ConfirmPopupBase } from './ConfirmPopupBase';
+
+export const confirmPopup = (props = {}) => {
+    props = { ...props, ...{ visible: props.visible === undefined ? true : props.visible } };
+    props.visible && OverlayService.emit('confirm-popup', props);
+
+    const show = (updatedProps = {}) => {
+        OverlayService.emit('confirm-popup', { ...props, ...updatedProps, ...{ visible: true } });
+    };
+
+    const hide = () => {
+        OverlayService.emit('confirm-popup', { visible: false });
+    };
+
+    return { show, hide };
+};
+
+export const ConfirmPopup = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ConfirmPopupBase.getProps(inProps, context);
+
+        const [visibleState, setVisibleState] = React.useState(props.visible);
+        const [reshowState, setReshowState] = React.useState(false);
+        const metaData = {
+            props,
+            state: {
+                visible: visibleState,
+                reshow: reshowState
+            }
+        };
+        const { ptm, cx, isUnstyled } = ConfirmPopupBase.setMetaData(metaData);
+
+        useHandleStyle(ConfirmPopupBase.css.styles, isUnstyled, { name: 'confirmpopup' });
+
+        const overlayRef = React.useRef(null);
+        const acceptBtnRef = React.useRef(null);
+        const rejectBtnRef = React.useRef(null);
+        const isPanelClicked = React.useRef(false);
+        const overlayEventListener = React.useRef(null);
+        const confirmProps = React.useRef(null);
+        const focusElementOnHide = React.useRef(null);
+        const isCallbackExecuting = React.useRef(false);
+        const getCurrentProps = () => confirmProps.current || props;
+        const getPropValue = (key) => (confirmProps.current || props)[key];
+        const callbackFromProp = (key, ...param) => ObjectUtils.getPropValue(getPropValue(key), param);
+
+        const acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
+        const rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
+        const isCloseOnEscape = props.dismissable && props.closeOnEscape && visibleState;
+        const displayOrder = useDisplayOrder('dialog', isCloseOnEscape);
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide('hide');
+            },
+            when: isCloseOnEscape && displayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
+        });
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: getPropValue('target'),
+            overlay: overlayRef,
+            listener: (event, { type, valid }) => {
+                if (valid) {
+                    if (type === 'outside') {
+                        if (props.dismissable && !isPanelClicked.current) {
+                            hide('hide');
+                        }
+
+                        isPanelClicked.current = false;
+                    } else if (context.hideOverlaysOnDocumentScrolling) {
+                        hide('hide');
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        align();
+                    }
+                }
+            },
+            when: visibleState
+        });
+
+        const onPanelClick = (event) => {
+            isPanelClicked.current = true;
+
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: getPropValue('target')
+            });
+        };
+
+        const accept = () => {
+            if (!isCallbackExecuting.current) {
+                isCallbackExecuting.current = true;
+                callbackFromProp('accept');
+                hide('accept');
+            }
+        };
+
+        const reject = () => {
+            if (!isCallbackExecuting.current) {
+                isCallbackExecuting.current = true;
+                callbackFromProp('reject');
+                hide('reject');
+            }
+        };
+
+        const show = () => {
+            const currentProps = getCurrentProps();
+
+            setReshowState(false);
+
+            if (currentProps.group === props.group) {
+                setVisibleState(true);
+                isCallbackExecuting.current = false;
+
+                overlayEventListener.current = (e) => {
+                    !isOutsideClicked(e.target) && (isPanelClicked.current = true);
+                };
+
+                OverlayService.on('overlay-click', overlayEventListener.current);
+
+                // Remember the focused element before we opened the dialog
+                // so we can return focus to it once we close the dialog.
+                focusElementOnHide.current = document.activeElement;
+            }
+        };
+
+        const hide = (result) => {
+            setVisibleState(false);
+            OverlayService.off('overlay-click', overlayEventListener.current);
+            overlayEventListener.current = null;
+
+            if (result) {
+                callbackFromProp('onHide', result);
+            }
+
+            DomHandler.focus(focusElementOnHide.current);
+            focusElementOnHide.current = null;
+        };
+
+        const onEnter = () => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            align();
+        };
+
+        const onEntered = () => {
+            bindOverlayListener();
+
+            const defaultFocus = getPropValue('defaultFocus');
+
+            if (defaultFocus === undefined || defaultFocus === 'accept') {
+                acceptBtnRef.current && acceptBtnRef.current.focus();
+            }
+
+            if (defaultFocus === 'reject') {
+                rejectBtnRef.current && rejectBtnRef.current.focus();
+            }
+
+            callbackFromProp('onShow');
+        };
+
+        const onExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(overlayRef.current);
+            isPanelClicked.current = false;
+        };
+
+        const align = () => {
+            if (getPropValue('target')) {
+                DomHandler.absolutePosition(overlayRef.current, getPropValue('target'));
+
+                const containerOffset = DomHandler.getOffset(overlayRef.current);
+                const targetOffset = DomHandler.getOffset(getPropValue('target'));
+                let arrowLeft = 0;
+
+                if (containerOffset.left < targetOffset.left) {
+                    arrowLeft = targetOffset.left - containerOffset.left;
+                }
+
+                overlayRef.current.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
+
+                if (containerOffset.top < targetOffset.top) {
+                    !isUnstyled() && DomHandler.addClass(overlayRef.current, 'p-confirm-popup-flipped');
+                }
+            }
+        };
+
+        const isOutsideClicked = (target) => {
+            return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
+        };
+
+        const confirm = (updatedProps) => {
+            if (updatedProps.tagKey === props.tagKey) {
+                const isVisibleChanged = visibleState !== updatedProps.visible;
+                const targetChanged = getPropValue('target') !== updatedProps.target;
+
+                if (targetChanged && !props.target) {
+                    hide();
+                    confirmProps.current = updatedProps;
+                    setReshowState(true);
+                } else if (isVisibleChanged) {
+                    confirmProps.current = updatedProps;
+                    updatedProps.visible ? show() : hide();
+                }
+            }
+        };
+
+        React.useEffect(() => {
+            props.visible ? show() : hide();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.visible]);
+
+        React.useEffect(() => {
+            if (!props.target && !props.message) {
+                OverlayService.on('confirm-popup', confirm);
+            }
+
+            return () => {
+                OverlayService.off('confirm-popup', confirm);
+            };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.target]);
+
+        useUpdateEffect(() => {
+            reshowState && show();
+        }, [reshowState]);
+
+        useUnmountEffect(() => {
+            if (overlayEventListener.current) {
+                OverlayService.off('overlay-click', overlayEventListener.current);
+                overlayEventListener.current = null;
+            }
+
+            OverlayService.off('confirm-popup', confirm);
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            confirm
+        }));
+
+        const createContent = () => {
+            const currentProps = getCurrentProps();
+            const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+
+            const icon = IconUtils.getJSXIcon(getPropValue('icon'), { ...iconProps }, { props: currentProps });
+            const messageProps = mergeProps(
+                {
+                    className: cx('message')
+                },
+                ptm('message')
+            );
+
+            const contentProps = mergeProps(
+                {
+                    className: cx('content')
+                },
+                ptm('content')
+            );
+
+            return (
+                <div {...contentProps}>
+                    {icon}
+                    <span {...messageProps}>{message}</span>
+                </div>
+            );
+        };
+
+        const createFooter = () => {
+            const acceptClassName = classNames('p-confirm-popup-accept p-button-sm', getPropValue('acceptClassName'));
+            const rejectClassName = classNames(
+                'p-confirm-popup-reject p-button-sm',
+                {
+                    'p-button-text': !getPropValue('rejectClassName')
+                },
+                getPropValue('rejectClassName')
+            );
+
+            const footerProps = mergeProps(
+                {
+                    className: cx('footer')
+                },
+                ptm('footer')
+            );
+
+            const rejectButtonProps = mergeProps({
+                ref: rejectBtnRef,
+                label: rejectLabel,
+                icon: getPropValue('rejectIcon'),
+                className: cx('rejectButton', { getPropValue }),
+                onClick: reject,
+                pt: ptm('rejectButton'),
+                unstyled: props.unstyled,
+                __parentMetadata: {
+                    parent: metaData
+                }
+            });
+
+            const acceptButtonProps = mergeProps({
+                ref: acceptBtnRef,
+                label: acceptLabel,
+                icon: getPropValue('acceptIcon'),
+                className: cx('acceptButton', { getPropValue }),
+                onClick: accept,
+                pt: ptm('acceptButton'),
+                unstyled: props.unstyled,
+                __parentMetadata: {
+                    parent: metaData
+                }
+            });
+
+            const content = (
+                <div {...footerProps}>
+                    <Button {...rejectButtonProps} />
+                    <Button {...acceptButtonProps} />
+                </div>
+            );
+
+            if (getPropValue('footer')) {
+                const defaultContentOptions = {
+                    accept,
+                    reject,
+                    className: 'p-confirm-popup-footer',
+                    acceptClassName,
+                    rejectClassName,
+                    acceptLabel,
+                    rejectLabel,
+                    element: content,
+                    props: getCurrentProps()
+                };
+
+                return ObjectUtils.getJSXElement(getPropValue('footer'), defaultContentOptions);
+            }
+
+            return content;
+        };
+
+        const rootProps = mergeProps(
+            {
+                ref: overlayRef,
+                id: getPropValue('id'),
+                className: classNames(props.className, cx('root', { context, getPropValue })),
+                style: getPropValue('style'),
+                onClick: onPanelClick
+            },
+            ConfirmPopupBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                in: visibleState,
+                timeout: { enter: 120, exit: 100 },
+                options: getPropValue('transitionOptions'),
+                unmountOnExit: true,
+                onEnter,
+                onEntered,
+                onExit,
+                onExited
+            },
+            ptm('transition')
+        );
+
+        const createTemplateElement = () => {
+            const currentProps = getCurrentProps();
+            const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
+            const templateElementProps = {
+                message,
+                acceptBtnRef,
+                rejectBtnRef,
+                hide
+            };
+
+            return (
+                <CSSTransition nodeRef={overlayRef} {...transitionProps}>
+                    <div {...rootProps}>{ObjectUtils.getJSXElement(inProps.content, templateElementProps)}</div>
+                </CSSTransition>
+            );
+        };
+
+        const createElement = () => {
+            const content = createContent();
+            const footer = createFooter();
+
+            return (
+                <CSSTransition nodeRef={overlayRef} {...transitionProps}>
+                    <div {...rootProps}>
+                        {content}
+                        {footer}
+                    </div>
+                </CSSTransition>
+            );
+        };
+
+        const element = inProps?.content ? createTemplateElement() : createElement();
+
+        return <Portal element={element} appendTo={getPropValue('appendTo')} visible={getPropValue('visible')} />;
+    })
+);
+
+ConfirmPopup.displayName = 'ConfirmPopup';
diff --git a/components/lib/confirmpopup/ConfirmPopupBase.js b/components/lib/confirmpopup/ConfirmPopupBase.js
new file mode 100644
index 0000000000..91b7a15d93
--- /dev/null
+++ b/components/lib/confirmpopup/ConfirmPopupBase.js
@@ -0,0 +1,110 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+   .p-confirm-popup {
+        margin-top: 10px;       
+    }
+
+    .p-confirm-popup-flipped {
+        margin-top: -10px;
+    }
+    
+    .p-confirm-popup:after, .p-confirm-popup:before {
+        bottom: 100%;
+        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+    
+    .p-confirm-popup:after {
+        border-width: 8px;
+        margin-left: -8px;
+    }
+    
+    .p-confirm-popup:before {
+        border-width: 10px;
+        margin-left: -10px;
+    }
+    
+    .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {
+        bottom: auto;
+        top: 100%;
+    }
+    
+    .p-confirm-popup.p-confirm-popup-flipped:after {
+        border-bottom-color: transparent;
+    }
+    
+    .p-confirm-popup.p-confirm-popup-flipped:before {
+        border-bottom-color: transparent
+    }
+    
+    .p-confirm-popup .p-confirm-popup-content {
+        display: flex;
+        align-items: center;
+    }
+}
+`;
+
+const classes = {
+    root: ({ context, getPropValue }) =>
+        classNames('p-confirm-popup p-component', getPropValue('className'), {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    acceptButton: ({ getPropValue }) => classNames('p-confirm-popup-accept p-button-sm', getPropValue('acceptClassName')),
+    rejectButton: ({ getPropValue }) =>
+        classNames(
+            'p-confirm-popup-reject p-button-sm',
+            {
+                'p-button-text': !getPropValue('rejectClassName')
+            },
+            getPropValue('rejectClassName')
+        ),
+    content: 'p-confirm-popup-content',
+    icon: 'p-confirm-popup-icon',
+    message: 'p-confirm-popup-message',
+    footer: 'p-confirm-popup-footer',
+    transition: 'p-connected-overlay'
+};
+
+export const ConfirmPopupBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ConfirmPopup',
+        accept: null,
+        acceptClassName: null,
+        acceptIcon: null,
+        acceptLabel: null,
+        appendTo: null,
+        children: undefined,
+        className: null,
+        closeOnEscape: true,
+        content: null,
+        defaultFocus: 'accept',
+        dismissable: true,
+        footer: null,
+        icon: null,
+        message: null,
+        onHide: null,
+        onShow: null,
+        reject: null,
+        rejectClassName: null,
+        rejectIcon: null,
+        rejectLabel: null,
+        style: null,
+        tagKey: undefined,
+        target: null,
+        transitionOptions: null,
+        visible: false
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/confirmpopup/confirmpopup.d.ts b/components/lib/confirmpopup/confirmpopup.d.ts
new file mode 100644
index 0000000000..848f8c337f
--- /dev/null
+++ b/components/lib/confirmpopup/confirmpopup.d.ts
@@ -0,0 +1,333 @@
+/**
+ *
+ * ConfirmPopup displays a confirmation overlay displayed relatively to its target.
+ *
+ * [Live Demo](https://www.primereact.org/confirmpopup)
+ *
+ * @module confirmpopup
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ButtonPassThroughOptions } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type ConfirmPopupPassThroughType<T> = PassThroughType<T, ConfirmPopupPassThroughMethodOptions>;
+export declare type ConfirmPopupPassThroughTransitionType = ReactCSSTransitionProps | ((options: ConfirmPopupPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ConfirmPopupPassThroughMethodOptions {
+    props: ConfirmPopupProps;
+    state: ConfirmPopupState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ConfirmPopupProps.pt}
+ */
+export interface ConfirmPopupPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ConfirmPopupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ConfirmPopupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ConfirmPopupPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ConfirmPopupPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: ConfirmPopupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    rejectButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    acceptButton?: ButtonPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: ConfirmPopupPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in ConfirmPopup component.
+ */
+export interface ConfirmPopupState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current reshow state as a boolean.
+     * @defaultValue false
+     */
+    reshow: boolean;
+}
+
+/**
+ * Custom confirm popup options
+ */
+interface ConfirmPopupOptions {
+    /**
+     * Callback to execute when action is confirmed.
+     */
+    accept(): void;
+    /**
+     * Callback to execute when action is rejected.
+     */
+    reject(): void;
+    /**
+     * Style class of the component.
+     */
+    className: string;
+    /**
+     * Style class of the accept button.
+     */
+    acceptClassName: string;
+    /**
+     * Style class of the reject button.
+     */
+    rejectClassName: string;
+    /**
+     * Label of the accept button.
+     * @defaultValue Yes
+     */
+    acceptLabel: string;
+    /**
+     * Label of the reject button.
+     * @defaultValue No
+     */
+    rejectLabel: string;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus: string;
+    /**
+     * Default element created by the component.
+     */
+    element: React.ReactNode;
+    /**
+     * All component props
+     * @type {ConfirmPopupProps}
+     */
+    props: ConfirmPopupProps;
+    /**
+     * Extra options
+     */
+    [key: string]: any;
+}
+
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link ConfirmPopupProps.content}
+ */
+interface ContentProps {
+    /**
+     * Reference for the accept button. Used to focus the element and execute the action.
+     */
+    acceptBtnRef: React.RefObject<HTMLButtonElement>;
+    /**
+     * Reference for the reject button. Used to focus the element and execute the action.
+     */
+    rejectBtnRef: React.RefObject<HTMLButtonElement>;
+    /**
+     * Message value of confirm popup.
+     */
+    message: React.ReactNode | string;
+    /**
+     * Hide action of confirm popup.
+     */
+    hide(): void;
+}
+
+/**
+ * Defines valid properties in ConfirmPopup component.
+ * @group Properties
+ */
+export interface ConfirmPopupProps {
+    /**
+     * Unique tag key used to separate the confirmPopup components in the page.
+     */
+    tagKey?: string | undefined;
+    /**
+     * Target element to align the popup.
+     */
+    target?: HTMLElement | undefined;
+    /**
+     * Specifies the visibility of the confirm popup.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Element to receive the focus when the dialog gets visible, valid values are "accept" and "reject".
+     * @defaultValue accept
+     */
+    defaultFocus?: string | undefined;
+    /**
+     * Message of the confirmation.
+     */
+    message?: React.ReactNode | ((options: ConfirmPopupOptions) => React.ReactNode);
+    /**
+     * Label of the reject button.
+     * @defaultValue No
+     */
+    rejectLabel?: string | undefined;
+    /**
+     * Label of the accept button.
+     * @defaultValue Yes
+     */
+    acceptLabel?: string | undefined;
+    /**
+     * Icon to display next to the message.
+     */
+    icon?: IconType<ConfirmPopupProps> | undefined;
+    /**
+     * Icon of the reject button.
+     */
+    rejectIcon?: IconType<ConfirmPopupProps> | undefined;
+    /**
+     * Icon of the accept button.
+     */
+    acceptIcon?: IconType<ConfirmPopupProps> | undefined;
+    /**
+     * Style class of the reject button.
+     */
+    rejectClassName?: string | undefined;
+    /**
+     * Style class of the accept button.
+     */
+    acceptClassName?: string | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Enables to hide the popup when outside is clicked.
+     * @defaultValue true
+     */
+    dismissable?: boolean | undefined;
+    /**
+     * Specifies if pressing escape key should hide the popup.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Footer content of the confirm popup.
+     */
+    footer?: React.ReactNode | ((options: ConfirmPopupOptions) => React.ReactNode);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when overlay panel becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when confirm popup is hidden.
+     */
+    onHide?(result: string): void;
+    /**
+     * Callback to execute when action is confirmed.
+     */
+    accept?(): void;
+    /**
+     * Callback to execute when action is rejected.
+     */
+    reject?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ConfirmPopupPassThroughOptions}
+     */
+    pt?: ConfirmPopupPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Specifies a custom content for the dialog. For more complex markup, use the "content" slot instead.
+     * @param {ContentProps} props - The values of dialog.
+     * @return {React.ReactNode}
+     */
+    content?: React.ReactNode | ((props: ContentProps) => React.ReactNode);
+}
+
+/**
+ * Object returned by the {@link confirmPopup} method.
+ */
+interface ConfirmPopupReturn {
+    /**
+     * Used to show the popup.
+     */
+    show(): void;
+    /**
+     * Used to hide the popup.
+     */
+    hide(): void;
+}
+
+/**
+ * **PrimeReact - ConfirmPopup**
+ *
+ * _ConfirmPopup displays a confirmation overlay displayed relatively to its target._
+ *
+ * [Live Demo](https://www.primereact.org/confirmpopup/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ConfirmPopup extends React.Component<ConfirmPopupProps, any> {
+    /**
+     * Used to call/update the component manually
+     * @param {ConfirmPopupProps} props - All component props
+     */
+    public confirm(props?: ConfirmPopupProps): void;
+}
+
+export declare function confirmPopup(props: ConfirmPopupProps): ConfirmPopupReturn;
diff --git a/components/lib/confirmpopup/package.json b/components/lib/confirmpopup/package.json
new file mode 100644
index 0000000000..3fddf6b660
--- /dev/null
+++ b/components/lib/confirmpopup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./confirmpopup.cjs.js",
+    "module": "./confirmpopup.esm.js",
+    "unpkg": "./confirmpopup.min.js",
+    "types": "./confirmpopup.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
new file mode 100644
index 0000000000..c89eea6349
--- /dev/null
+++ b/components/lib/contextmenu/ContextMenu.js
@@ -0,0 +1,757 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { ContextMenuBase } from './ContextMenuBase';
+import { ContextMenuSub } from './ContextMenuSub';
+
+export const ContextMenu = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ContextMenuBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const [visibleState, setVisibleState] = React.useState(false);
+        const [reshowState, setReshowState] = React.useState(false);
+        const [resetMenuState, setResetMenuState] = React.useState(false);
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
+        const [focused, setFocused] = React.useState(false);
+        const [focusTrigger, setFocusTrigger] = React.useState(false);
+        const [focusedItemInfo, setFocusedItemInfo] = React.useState({ index: -1, level: 0, parentKey: '' });
+        const [activeItemPath, setActiveItemPath] = React.useState('');
+        const [processedItems, setProcessedItems] = React.useState([]);
+        const [visibleItems, setVisibleItems] = React.useState([]);
+        const [focusedItemId, setFocusedItemId] = React.useState(null);
+
+        const { ptm, cx, isUnstyled } = ContextMenuBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                visible: visibleState,
+                reshow: reshowState,
+                resetMenu: resetMenuState,
+                attributeSelector: attributeSelectorState
+            }
+        });
+
+        useHandleStyle(ContextMenuBase.css.styles, isUnstyled, { name: 'contextmenu' });
+        const menuRef = React.useRef(null);
+        const listRef = React.useRef(null);
+        const currentEvent = React.useRef(null);
+        const searchValue = React.useRef('');
+        const searchTimeout = React.useRef(null);
+        const styleElementRef = React.useRef(null);
+        const isMobileMode = useMatchMedia(`screen and (max-width: ${props.breakpoint})`, !!props.breakpoint);
+
+        const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+            type: 'click',
+            listener: (event) => {
+                if (isOutsideClicked(event) && event.button !== 2) {
+                    hide(event);
+                    setResetMenuState(true);
+                }
+            }
+        });
+
+        const [bindDocumentContextMenuListener] = useEventListener({
+            type: 'contextmenu',
+            when: props.global,
+            listener: (event) => {
+                show(event);
+            }
+        });
+
+        const [bindDocumentResizeListener, unbindDocumentResizeListener] = useResizeListener({
+            listener: (event) => {
+                if (visibleState && !DomHandler.isTouchDevice()) {
+                    hide(event);
+                }
+            }
+        });
+
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+                const selector = `${attributeSelectorState}`;
+                const innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    .p-contextmenu[${selector}] > ul {
+        max-height: ${props.scrollHeight};
+        overflow: ${props.scrollHeight ? 'auto' : ''};
+    }
+
+    .p-contextmenu[${selector}] .p-submenu-list {
+        position: relative;
+    }
+
+    .p-contextmenu[${selector}] .p-menuitem-active > .p-submenu-list {
+        left: 0;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */
+    }
+
+    .p-contextmenu[${selector}] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+        transform: rotate(-180deg);
+    }
+
+    .p-contextmenu[${selector}] .p-submenu-icon:before {
+        content: "\\e930";
+    }
+}
+`;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
+        const onMenuClick = () => {
+            setResetMenuState(false);
+        };
+
+        const onMenuMouseEnter = () => {
+            setResetMenuState(false);
+        };
+
+        const show = (event) => {
+            setActiveItemPath([]);
+            setFocusedItemInfo({ index: -1, level: 0, parentKey: '' });
+            event.stopPropagation();
+            event.preventDefault();
+
+            currentEvent.current = event;
+
+            if (visibleState) {
+                setReshowState(true);
+            } else {
+                setVisibleState(true);
+                props.onShow && props.onShow(currentEvent.current);
+            }
+
+            Promise.resolve().then(() => {
+                listRef.current && DomHandler.focus(listRef.current.getElement());
+            });
+        };
+
+        const hide = (event) => {
+            currentEvent.current = event;
+            setVisibleState(false);
+            setReshowState(false);
+            setActiveItemPath([]);
+            setFocusedItemInfo({ index: -1, level: 0, parentKey: '' });
+            props.onHide && props.onHide(currentEvent.current);
+        };
+
+        const onEnter = () => {
+            DomHandler.addStyles(menuRef.current, { position: 'absolute' });
+
+            if (props.autoZIndex) {
+                ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
+            }
+
+            position(currentEvent.current);
+
+            if (attributeSelectorState && props.breakpoint) {
+                menuRef.current.setAttribute(attributeSelectorState, '');
+                createStyle();
+            }
+        };
+
+        const onEntered = () => {
+            bindDocumentListeners();
+        };
+
+        const onExit = () => {
+            unbindDocumentListeners();
+            ZIndexUtils.clear(menuRef.current);
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(menuRef.current);
+            destroyStyle();
+        };
+
+        const position = (event) => {
+            if (event) {
+                let left = event.pageX + 1;
+                let top = event.pageY + 1;
+                let width = menuRef.current.offsetParent ? menuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(menuRef.current);
+                let height = menuRef.current.offsetParent ? menuRef.current.offsetHeight : DomHandler.getHiddenElementOuterHeight(menuRef.current);
+                let viewport = DomHandler.getViewport();
+
+                //flip
+                if (left + width - document.body.scrollLeft > viewport.width) {
+                    left = left - width;
+                }
+
+                //flip
+                if (top + height - document.body.scrollTop > viewport.height) {
+                    top = top - height;
+                }
+
+                //fit
+                if (left < document.body.scrollLeft) {
+                    left = document.body.scrollLeft;
+                }
+
+                //fit
+                if (top < document.body.scrollTop) {
+                    top = document.body.scrollTop;
+                }
+
+                menuRef.current.style.left = left + 'px';
+                menuRef.current.style.top = top + 'px';
+            }
+        };
+
+        const createProcessedItems = React.useCallback((items, level, parent = {}, parentKey = '') => {
+            const processedItems = [];
+
+            items &&
+                items.forEach((item, index) => {
+                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                    const newItem = {
+                        item,
+                        index,
+                        level,
+                        separator: item.separator,
+                        key,
+                        parent,
+                        parentKey
+                    };
+
+                    newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
+                    processedItems.push(newItem);
+                });
+
+            return processedItems;
+        }, []);
+
+        const onLeafClick = (event) => {
+            setResetMenuState(true);
+            hide(event);
+
+            event.stopPropagation();
+        };
+
+        const isOutsideClicked = (event) => {
+            return menuRef && menuRef.current && !(menuRef.current.isSameNode(event.target) || menuRef.current.contains(event.target));
+        };
+
+        const bindDocumentListeners = () => {
+            bindDocumentResizeListener();
+            bindDocumentClickListener();
+        };
+
+        const unbindDocumentListeners = () => {
+            unbindDocumentResizeListener();
+            unbindDocumentClickListener();
+        };
+
+        useMountEffect(() => {
+            const uniqueId = UniqueComponentId();
+
+            !idState && setIdState(uniqueId);
+
+            if (props.global) {
+                bindDocumentContextMenuListener();
+            }
+
+            if (props.breakpoint) {
+                !attributeSelectorState && setAttributeSelectorState(uniqueId);
+            }
+        });
+
+        useUpdateEffect(() => {
+            props.global && bindDocumentContextMenuListener();
+        }, [props.global]);
+
+        useUpdateEffect(() => {
+            if (attributeSelectorState && menuRef.current) {
+                menuRef.current.setAttribute(attributeSelectorState, '');
+                createStyle();
+            }
+
+            return () => {
+                destroyStyle();
+            };
+        }, [attributeSelectorState, props.breakpoint]);
+
+        useUpdateEffect(() => {
+            if (visibleState) {
+                setVisibleState(false);
+                setReshowState(false);
+                setResetMenuState(true);
+            } else if (!reshowState && !visibleState && resetMenuState) {
+                show(currentEvent.current);
+            }
+        }, [reshowState]);
+
+        React.useEffect(() => {
+            const itemsToProcess = props.model || [];
+            const processed = createProcessedItems(itemsToProcess, 0, null, '');
+
+            setProcessedItems(processed);
+        }, [props.model, createProcessedItems]);
+
+        useUpdateEffect(() => {
+            const _focusedItemId = focusedItemInfo.index !== -1 ? `${idState}${ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null;
+
+            setFocusedItemId(_focusedItemId);
+        }, [focusedItemInfo]);
+
+        useUpdateEffect(() => {
+            const processedItem = activeItemPath && activeItemPath.find((p) => p.key === focusedItemInfo.parentKey);
+            const _visibleItems = processedItem ? processedItem.items : processedItems;
+
+            setVisibleItems(_visibleItems);
+        }, [activeItemPath, focusedItemInfo]);
+
+        useUpdateEffect(() => {
+            if (focusTrigger) {
+                const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+                setActiveItemPath(activeItemPath.filter((p) => p.parentKey !== focusedItemInfo.parentKey));
+                setFocusTrigger(false);
+            }
+        }, [focusTrigger]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(menuRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            getElement: () => menuRef.current
+        }));
+
+        const onFocus = (event) => {
+            setFocused(true);
+            setFocusedItemInfo(focusedItemInfo.index !== -1 ? focusedItemInfo : { index: -1, level: 0, parentKey: '' });
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocused(false);
+            setFocusedItemInfo({ index: -1, level: 0, parentKey: '' });
+            searchValue.current = '';
+            searchValue.current = '';
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onKeyDown = (event) => {
+            const metaKey = event.metaKey || event.ctrlKey;
+
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    // NOOP
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event, event.key);
+                    }
+
+                    break;
+            }
+        };
+
+        const onItemChange = (event) => {
+            const { processedItem, isFocus, updateState = true } = event;
+
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
+
+            const { index, key, level, parentKey, items } = processedItem;
+            const grouped = ObjectUtils.isNotEmpty(items);
+            const _activeItemPath = activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+
+            if (grouped && updateState) {
+                _activeItemPath.push(processedItem);
+                setVisibleState(true);
+            }
+
+            setFocusedItemInfo({ index, level, parentKey });
+            setActiveItemPath(_activeItemPath);
+
+            isFocus && DomHandler.focus(listRef.current.getElement());
+        };
+
+        const onItemClick = (event) => {
+            const { processedItem } = event;
+            const grouped = isProccessedItemGroup(processedItem);
+            const selected = isSelected(processedItem);
+
+            if (selected) {
+                const { index, key, level, parentKey } = processedItem;
+
+                setActiveItemPath(activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key)));
+                setFocusedItemInfo({ index, level, parentKey });
+
+                DomHandler.focus(listRef.current.getElement());
+            } else {
+                grouped ? onItemChange(event) : hide();
+            }
+        };
+
+        const onItemMouseEnter = (event) => {
+            onItemChange(event);
+        };
+
+        const onArrowDownKey = (event) => {
+            const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+            changeFocusedItemIndex(itemIndex);
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event) => {
+            if (event.altKey) {
+                if (focusedItemInfo.index !== -1) {
+                    const processedItem = visibleItems[focusedItemInfo.index];
+                    const grouped = isProccessedItemGroup(processedItem);
+
+                    !grouped && onItemChange({ originalEvent: event, processedItem });
+                }
+
+                event.preventDefault();
+            } else {
+                const itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+                event.preventDefault();
+            }
+        };
+
+        const onArrowLeftKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const parentItem = activeItemPath.find((p) => p.key === processedItem.parentKey);
+            const root = ObjectUtils.isEmpty(processedItem.parent);
+
+            if (!root) {
+                setFocusedItemInfo({ index: -1, parentKey: parentItem ? parentItem.parentKey : '' });
+                searchValue.current = '';
+                setTimeout(() => setFocusTrigger(true), 0);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowRightKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const grouped = isProccessedItemGroup(processedItem);
+
+            if (grouped) {
+                onItemChange({ originalEvent: event, processedItem });
+                setFocusedItemInfo({ index: -1, parentKey: processedItem.key });
+                searchValue.current = '';
+                setTimeout(() => setFocusTrigger(true), 0);
+            }
+
+            event.preventDefault();
+        };
+
+        const onHomeKey = (event) => {
+            changeFocusedItemIndex(findFirstItemIndex());
+            event.preventDefault();
+        };
+
+        const onEndKey = (event) => {
+            changeFocusedItemIndex(findLastItemIndex());
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const element = DomHandler.findSingle(listRef.current.getElement(), `li[id="${`${focusedItemId}`}"]`);
+                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+
+                anchorElement ? anchorElement.click() : element && element.click();
+                const processedItem = visibleItems[focusedItemInfo.index];
+                const grouped = isProccessedItemGroup(processedItem);
+
+                !grouped && setFocusedItemInfo({ ...focusedItemInfo, index: findFirstFocusedItemIndex() });
+            }
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event) => {
+            onEnterKey(event);
+        };
+
+        const onEscapeKey = (event) => {
+            hide();
+            setFocusedItemInfo({ focusedItemInfo, index: findFirstFocusedItemIndex() });
+            event.preventDefault();
+        };
+
+        const onTabKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const processedItem = visibleItems[focusedItemInfo.index];
+                const grouped = isProccessedItemGroup(processedItem);
+
+                !grouped && onItemChange({ originalEvent: event, processedItem });
+            }
+
+            hide();
+        };
+
+        const searchItems = (event, char) => {
+            searchValue.current = searchValue.current || '' + char;
+
+            let itemIndex = -1;
+            let matched = false;
+
+            if (focusedItemInfo.index !== -1) {
+                itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem));
+                itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem)) : itemIndex + focusedItemInfo.index;
+            } else {
+                itemIndex = visibleItems.findIndex((processedItem) => isItemMatched(processedItem));
+            }
+
+            if (itemIndex !== -1) {
+                matched = true;
+            }
+
+            if (itemIndex === -1 && focusedItemInfo.index === -1) {
+                itemIndex = findFirstFocusedItemIndex();
+            }
+
+            if (itemIndex !== -1) {
+                changeFocusedItemIndex(itemIndex);
+            }
+
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout.current);
+            }
+
+            searchTimeout.current = setTimeout(() => {
+                searchValue.current = '';
+                searchTimeout.current = null;
+            }, 500);
+
+            return matched;
+        };
+
+        const changeFocusedItemIndex = (index) => {
+            if (focusedItemInfo.index !== index) {
+                setFocusedItemInfo({ ...focusedItemInfo, index });
+                scrollInView();
+            }
+        };
+
+        const scrollInView = (index = -1) => {
+            const _id = index !== -1 ? `${idState}_${index}` : focusedItemId;
+            const element = DomHandler.findSingle(listRef.current.getElement(), `li[id="${_id}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        };
+
+        const getItemProp = (item, name) => {
+            return item ? ObjectUtils.getItemValue(item[name]) : undefined;
+        };
+
+        const getItemLabel = (item) => {
+            return getItemProp(item, 'label');
+        };
+
+        const getProccessedItemLabel = (processedItem) => {
+            return processedItem ? getItemLabel(processedItem.item) : undefined;
+        };
+
+        const isProccessedItemGroup = (processedItem) => {
+            return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const isItemDisabled = (item) => {
+            return getItemProp(item, 'disabled');
+        };
+
+        const isItemSeparator = (item) => {
+            return getItemProp(item, 'separator');
+        };
+
+        const isValidItem = (processedItem) => {
+            return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
+        };
+
+        const isItemMatched = (processedItem) => {
+            return isValidItem(processedItem) && getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
+        };
+
+        const findNextItemIndex = (index) => {
+            const matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex((processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
+        };
+
+        const findPrevItemIndex = (index) => {
+            const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), (processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex : index;
+        };
+
+        const isSelected = (processedItem) => {
+            return activeItemPath && activeItemPath.some((p) => p.key === processedItem.key);
+        };
+
+        const isValidSelectedItem = (processedItem) => {
+            return isValidItem(processedItem) && isSelected(processedItem);
+        };
+
+        const findFirstItemIndex = () => {
+            return visibleItems.findIndex((processedItem) => isValidItem(processedItem));
+        };
+
+        const findLastItemIndex = () => {
+            return ObjectUtils.findLastIndex(visibleItems, (processedItem) => isValidItem(processedItem));
+        };
+
+        const findFirstFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex < 0 ? findFirstItemIndex() : selectedIndex;
+        };
+
+        const findLastFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex < 0 ? findLastItemIndex() : selectedIndex;
+        };
+
+        const findSelectedItemIndex = () => {
+            return visibleItems.findIndex((processedItem) => isValidSelectedItem(processedItem));
+        };
+
+        const createContextMenu = () => {
+            const rootProps = mergeProps(
+                {
+                    id: props.id,
+                    className: classNames(props.className, cx('root', { context })),
+                    style: props.style,
+                    onClick: (e) => onMenuClick(e),
+                    onMouseEnter: (e) => onMenuMouseEnter(e)
+                },
+                ContextMenuBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: visibleState,
+                    timeout: { enter: 250, exit: 0 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter: onEnter,
+                    onEntered: onEntered,
+                    onExit: onExit,
+                    onExited: onExited
+                },
+                ptm('transition')
+            );
+
+            return (
+                <CSSTransition nodeRef={menuRef} {...transitionProps}>
+                    <div ref={menuRef} {...rootProps}>
+                        <ContextMenuSub
+                            ref={listRef}
+                            ariaLabel={props.ariaLabel}
+                            ariaLabelledby={props.ariaLabelledby}
+                            activeItemPath={activeItemPath}
+                            hostName="ContextMenu"
+                            id={idState + '_list'}
+                            role="menubar"
+                            tabIndex={props.tabIndex || 0}
+                            ariaActivedescendant={focused ? focusedItemId : undefined}
+                            menuId={idState}
+                            focusedItemId={focused ? focusedItemId : undefined}
+                            menuProps={props}
+                            model={processedItems}
+                            level={0}
+                            root
+                            onItemClick={onItemClick}
+                            onItemMouseEnter={onItemMouseEnter}
+                            onFocus={onFocus}
+                            onBlur={onBlur}
+                            onKeyDown={onKeyDown}
+                            resetMenu={resetMenuState}
+                            onLeafClick={onLeafClick}
+                            isMobileMode={isMobileMode}
+                            submenuIcon={props.submenuIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    </div>
+                </CSSTransition>
+            );
+        };
+
+        const element = createContextMenu();
+
+        return <Portal element={element} appendTo={props.appendTo} />;
+    })
+);
+
+ContextMenu.displayName = 'ContextMenu';
diff --git a/components/lib/contextmenu/ContextMenuBase.js b/components/lib/contextmenu/ContextMenuBase.js
new file mode 100644
index 0000000000..bed789d470
--- /dev/null
+++ b/components/lib/contextmenu/ContextMenuBase.js
@@ -0,0 +1,101 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-contextmenu ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-contextmenu .p-submenu-list {
+        position: absolute;
+        min-width: 100%;
+        z-index: 1;
+    }
+
+    .p-contextmenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-contextmenu .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-contextmenu .p-menuitem {
+        position: relative;
+    }
+
+    .p-contextmenu .p-menuitem-link .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-contextmenu-enter {
+        opacity: 0;
+    }
+
+    .p-contextmenu-enter-active {
+        opacity: 1;
+        transition: opacity 250ms;
+    }
+}
+`;
+
+const classes = {
+    root: ({ context }) =>
+        classNames('p-contextmenu p-component', {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    menu: ({ menuProps: props }) =>
+        classNames({
+            ' p-contextmenu-root-list': props.root,
+            'p-submenu-list': !props.root
+        }),
+    menuitem: ({ item, active, focused, disabled }) => classNames('p-menuitem', { 'p-menuitem-active p-highlight': active, 'p-focus': focused, 'p-disabled': disabled }, item.className),
+    action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
+    content: 'p-menuitem-content',
+    icon: 'p-menuitem-icon',
+    submenuIcon: 'p-submenu-icon',
+    label: 'p-menuitem-text',
+    separator: 'p-menuitem-separator',
+    transition: 'p-contextmenu',
+    submenuTransition: 'p-contextmenusub'
+};
+
+export const ContextMenuBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ContextMenu',
+        id: null,
+        ariaLabel: null,
+        ariaLabelledby: null,
+        model: null,
+        style: null,
+        className: null,
+        global: false,
+        autoZIndex: true,
+        baseZIndex: 0,
+        tabIndex: 0,
+        breakpoint: undefined,
+        scrollHeight: '400px',
+        appendTo: null,
+        transitionOptions: null,
+        onFocus: null,
+        onBlur: null,
+        onShow: null,
+        onHide: null,
+        submenuIcon: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/contextmenu/ContextMenuSub.js b/components/lib/contextmenu/ContextMenuSub.js
new file mode 100644
index 0000000000..6ce748bb99
--- /dev/null
+++ b/components/lib/contextmenu/ContextMenuSub.js
@@ -0,0 +1,342 @@
+import * as React from 'react';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
+import { AngleRightIcon } from '../icons/angleright';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+
+export const ContextMenuSub = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const submenuRef = React.useRef(null);
+        const active = props.root || !props.resetMenu;
+        const { ptm, cx } = props;
+
+        const getPTOptions = (processedItem, key, index) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                context: {
+                    active: isItemActive(processedItem),
+                    focused: isItemFocused(processedItem),
+                    disabled: isItemDisabled(processedItem),
+                    index
+                }
+            });
+        };
+
+        const onItemMouseEnter = (event, item) => {
+            if (item.disabled || props.isMobileMode) {
+                event.preventDefault();
+
+                return;
+            }
+
+            props.onItemMouseEnter({ originalEvent: event, processedItem: item });
+        };
+
+        const onItemClick = (event, processedItem) => {
+            const item = processedItem.item;
+
+            if (item.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item
+                });
+            }
+
+            props.onItemClick({ originalEvent: event, processedItem, isFocus: true });
+
+            if (!item.items) {
+                props.onLeafClick(event);
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const position = () => {
+            if (!props.isMobileMode) {
+                const parentItem = submenuRef.current.parentElement;
+                const containerOffset = DomHandler.getOffset(parentItem);
+                const viewport = DomHandler.getViewport();
+                const sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(submenuRef.current);
+                const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
+                const top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - DomHandler.getWindowScrollTop();
+
+                if (top > viewport.height) {
+                    submenuRef.current.style.top = viewport.height - top + 'px';
+                } else {
+                    submenuRef.current.style.top = '0px';
+                }
+
+                if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
+                    submenuRef.current.style.left = -1 * sublistWidth + 'px';
+                } else {
+                    submenuRef.current.style.left = itemOuterWidth + 'px';
+                }
+            }
+        };
+
+        const onEnter = () => {
+            position();
+        };
+
+        useUpdateEffect(() => {
+            active && position();
+        });
+
+        const getItemId = (processedItem) => {
+            return `${props.menuId}_${processedItem.key}`;
+        };
+
+        const getItemProp = (processedItem, name, params) => {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
+        };
+
+        const getItemLabel = (processedItem) => {
+            return getItemProp(processedItem, 'label');
+        };
+
+        const isItemActive = (processedItem) => {
+            return props.activeItemPath && props.activeItemPath.some((path) => path.key === processedItem.key);
+        };
+
+        const isItemVisible = (processedItem) => {
+            return getItemProp(processedItem, 'visible') !== false;
+        };
+
+        const isItemDisabled = (processedItem) => {
+            return getItemProp(processedItem, 'disabled');
+        };
+
+        const isItemFocused = (processedItem) => {
+            return props.focusedItemId === getItemId(processedItem);
+        };
+
+        const isItemGroup = (processedItem) => {
+            return ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const getAriaSetSize = () => {
+            return props.model.filter((processedItem) => isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')).length;
+        };
+
+        const getAriaPosInset = (index) => {
+            return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => submenuRef.current
+        }));
+
+        const createSeparator = (index) => {
+            const key = props.id + '_separator_' + index;
+            const separatorProps = mergeProps(
+                {
+                    id: key,
+                    className: cx('separator'),
+                    role: 'separator'
+                },
+                ptm('separator', { hostName: props.hostName })
+            );
+
+            return <li {...separatorProps} key={key} />;
+        };
+
+        const createSubmenu = (item, index) => {
+            if (isItemGroup(item)) {
+                return (
+                    <ContextMenuSub
+                        id={props.id + '_' + index}
+                        role="menu"
+                        menuId={props.menuId}
+                        focusedItemId={props.focusedItemId}
+                        activeItemPath={props.activeItemPath}
+                        level={props.level + 1}
+                        hostName={props.hostName}
+                        ariaLabelledby={getItemId(item)}
+                        menuProps={props.menuProps}
+                        model={item.items}
+                        resetMenu={!isItemActive(item)}
+                        onLeafClick={props.onLeafClick}
+                        onItemClick={props.onItemClick}
+                        onItemMouseEnter={props.onItemMouseEnter}
+                        isMobileMode={props.isMobileMode}
+                        submenuIcon={props.submenuIcon}
+                        ptm={ptm}
+                        cx={cx}
+                    />
+                );
+            }
+
+            return null;
+        };
+
+        const createMenuItem = (processedItem, index) => {
+            if (!isItemVisible(processedItem)) {
+                return null;
+            }
+
+            const item = processedItem.item;
+            const active = isItemActive(processedItem);
+            const disabled = isItemDisabled(processedItem);
+            const focused = isItemFocused(processedItem);
+            const isGroup = isItemGroup(processedItem);
+            const key = getItemId(processedItem);
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                getPTOptions(processedItem, 'icon', index)
+            );
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps });
+            const submenuIconProps = mergeProps(
+                {
+                    className: cx('submenuIcon')
+                },
+                getPTOptions(processedItem, 'submenuIcon', index)
+            );
+
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getPTOptions(processedItem, 'label', index)
+            );
+
+            const items = getItemProp(processedItem, 'items');
+
+            const submenuIcon = items && IconUtils.getJSXIcon(props.submenuIcon || <AngleRightIcon {...submenuIconProps} />, { ...submenuIconProps }, { props: props.menuProps });
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+            const submenu = createSubmenu(processedItem, index);
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    tabIndex: -1,
+                    className: cx('action', { item }),
+                    target: item.target
+                },
+                getPTOptions(processedItem, 'action', index)
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    {label}
+                    {submenuIcon}
+                    <Ripple />
+                </a>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    className: 'p-menuitem-link',
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName: 'p-menuitem-icon',
+                    submenuIconClassName: cx('submenuIcon'),
+                    element: content,
+                    props,
+                    active
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onItemClick(event, processedItem, index),
+                    onMouseEnter: (event) => onItemMouseEnter(event, processedItem),
+                    className: cx('content')
+                },
+                getPTOptions(processedItem, 'content', index)
+            );
+
+            const menuitemProps = mergeProps(
+                {
+                    id: key,
+                    role: 'menuitem',
+                    'aria-label': item.label,
+                    'aria-disabled': disabled,
+                    'aria-expanded': isGroup ? active : undefined,
+                    'aria-haspopup': isGroup && !item.url ? 'menu' : undefined,
+                    'aria-level': props.level + 1,
+                    'aria-setsize': getAriaSetSize(),
+                    'aria-posinset': getAriaPosInset(index),
+                    'data-p-highlight': active,
+                    'data-p-focused': focused,
+                    'data-p-disabled': disabled,
+                    className: cx('menuitem', { item, active, focused, disabled: isItemDisabled(item) }),
+                    style: item.style
+                },
+                getPTOptions(processedItem, 'menuitem', index)
+            );
+
+            return (
+                <li {...menuitemProps} key={key}>
+                    <div {...contentProps}>{content}</div>
+                    {submenu}
+                </li>
+            );
+        };
+
+        const createItem = (processedItem, index) => {
+            if (processedItem.visible === false) {
+                return null;
+            }
+
+            return processedItem.separator ? createSeparator(index) : createMenuItem(processedItem, index);
+        };
+
+        const createMenu = () => {
+            return props.model ? props.model.map(createItem) : null;
+        };
+
+        const submenu = createMenu();
+
+        const menuProps = mergeProps(
+            {
+                className: cx('menu', { menuProps: props }),
+                onFocus: props.onFocus,
+                onBlur: props.onBlur,
+                onKeyDown: props.onKeyDown,
+                'aria-label': props.ariaLabel,
+                'aria-labelledby': props.ariaLabelledby,
+                'aria-orientation': 'vertical',
+                'aria-activedescendant': props.ariaActivedescendant,
+                tabIndex: props.tabIndex,
+                role: props.role
+            },
+            ptm('menu', { hostName: props.hostName })
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('submenuTransition'),
+                in: active,
+                timeout: { enter: 0, exit: 0 },
+                unmountOnExit: true,
+                onEnter
+            },
+            ptm('menu.transition', { hostName: props.hostName })
+        );
+
+        return (
+            <CSSTransition nodeRef={submenuRef} {...transitionProps}>
+                <ul ref={submenuRef} {...menuProps}>
+                    {submenu}
+                </ul>
+            </CSSTransition>
+        );
+    })
+);
+
+ContextMenuSub.displayName = 'ContextMenuSub';
diff --git a/components/lib/contextmenu/contextmenu.d.ts b/components/lib/contextmenu/contextmenu.d.ts
new file mode 100644
index 0000000000..8605405376
--- /dev/null
+++ b/components/lib/contextmenu/contextmenu.d.ts
@@ -0,0 +1,235 @@
+/**
+ *
+ * ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration.
+ *
+ * [Live Demo](https://www.primereact.org/contextmenu/)
+ *
+ * @module contextmenu
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { MenuItem } from '../menuitem';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type ContextMenuPassThroughType<T> = PassThroughType<T, ContextMenuPassThroughMethodOptions>;
+export declare type ContextMenuPassThroughTransitionType = ReactCSSTransitionProps | ((options: ContextMenuPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ContextMenuPassThroughMethodOptions {
+    props: ContextMenuProps;
+    state: ContextMenuState;
+    context: ContextMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ContextMenuProps.pt}
+ */
+export interface ContextMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ContextMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: ContextMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: ContextMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: ContextMenuPassThroughTransitionType;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Callback to invoke when ContextMenu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when ContextMenu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+}
+
+/**
+ * Defines current inline state in ContextMenu component.
+ */
+export interface ContextMenuState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current reshow state as a boolean.
+     * @defaultValue false
+     */
+    reshow: boolean;
+    /**
+     * Current resetMenu state as a boolean.
+     * @defaultValue false
+     */
+    resetMenu: boolean;
+    /**
+     * Current attributeSelector visible state as a string.
+     */
+    attributeSelector: boolean;
+}
+
+/**
+ * Defines current options in ContextMenu component.
+ */
+export interface ContextMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Defines valid properties in ContextMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ContextMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Attaches the menu to document instead of a particular item.
+     * @defaultValue false
+     */
+    global?: boolean | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Used to define a string that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Maximum height of the options panel on responsive mode.
+     * @defaultValue 400px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Icon of the submenu.
+     */
+    submenuIcon?: IconType<ContextMenuProps> | undefined;
+    /**
+     * Callback to invoke when a popup menu is shown.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onShow?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a popup menu is hidden.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onHide?(event: React.SyntheticEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ContextMenuPassThroughOptions}
+     */
+    pt?: ContextMenuPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ContextMenu**
+ *
+ * _ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration._
+ *
+ * [Live Demo](https://www.primereact.org/contextmenu/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ContextMenu extends React.Component<ContextMenuProps, any> {
+    /**
+     * Displays the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    public show(event: React.SyntheticEvent): void;
+    /**
+     * Hides the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    public hide(event: React.SyntheticEvent): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/contextmenu/package.json b/components/lib/contextmenu/package.json
new file mode 100644
index 0000000000..c236b78cb5
--- /dev/null
+++ b/components/lib/contextmenu/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./contextmenu.cjs.js",
+    "module": "./contextmenu.esm.js",
+    "unpkg": "./contextmenu.min.js",
+    "types": "./contextmenu.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/csstransition/CSSTransition.js b/components/lib/csstransition/CSSTransition.js
new file mode 100644
index 0000000000..003cf056f8
--- /dev/null
+++ b/components/lib/csstransition/CSSTransition.js
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { CSSTransition as ReactCSSTransition } from 'react-transition-group';
+import { useUpdateEffect } from '../hooks/Hooks';
+import { ObjectUtils } from '../utils/Utils';
+import { CSSTransitionBase } from './CSSTransitionBase';
+import { PrimeReactContext } from '../api/Api';
+import PrimeReact from '../api/Api';
+
+export const CSSTransition = React.forwardRef((inProps, ref) => {
+    const props = CSSTransitionBase.getProps(inProps);
+    const context = React.useContext(PrimeReactContext);
+
+    const disabled = props.disabled || (props.options && props.options.disabled) || (context && !context.cssTransition) || !PrimeReact.cssTransition;
+
+    const onEnter = (node, isAppearing) => {
+        props.onEnter && props.onEnter(node, isAppearing); // component
+        props.options && props.options.onEnter && props.options.onEnter(node, isAppearing); // user option
+    };
+
+    const onEntering = (node, isAppearing) => {
+        props.onEntering && props.onEntering(node, isAppearing); // component
+        props.options && props.options.onEntering && props.options.onEntering(node, isAppearing); // user option
+    };
+
+    const onEntered = (node, isAppearing) => {
+        props.onEntered && props.onEntered(node, isAppearing); // component
+        props.options && props.options.onEntered && props.options.onEntered(node, isAppearing); // user option
+    };
+
+    const onExit = (node) => {
+        props.onExit && props.onExit(node); // component
+        props.options && props.options.onExit && props.options.onExit(node); // user option
+    };
+
+    const onExiting = (node) => {
+        props.onExiting && props.onExiting(node); // component
+        props.options && props.options.onExiting && props.options.onExiting(node); // user option
+    };
+
+    const onExited = (node) => {
+        props.onExited && props.onExited(node); // component
+        props.options && props.options.onExited && props.options.onExited(node); // user option
+    };
+
+    useUpdateEffect(() => {
+        if (disabled) {
+            // no animation
+            const node = ObjectUtils.getRefElement(props.nodeRef);
+
+            if (props.in) {
+                onEnter(node, true);
+                onEntering(node, true);
+                onEntered(node, true);
+            } else {
+                onExit(node);
+                onExiting(node);
+                onExited(node);
+            }
+        }
+    }, [props.in]);
+
+    if (disabled) {
+        return props.in ? props.children : null;
+    }
+
+    const immutableProps = { nodeRef: props.nodeRef, in: props.in, appear: props.appear, onEnter: onEnter, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited };
+    const mutableProps = { classNames: props.classNames, timeout: props.timeout, unmountOnExit: props.unmountOnExit };
+    const mergedProps = { ...mutableProps, ...(props.options || {}), ...immutableProps };
+
+    return <ReactCSSTransition {...mergedProps}>{props.children}</ReactCSSTransition>;
+});
+
+CSSTransition.displayName = 'CSSTransition';
diff --git a/components/lib/csstransition/CSSTransitionBase.js b/components/lib/csstransition/CSSTransitionBase.js
new file mode 100644
index 0000000000..223601ce39
--- /dev/null
+++ b/components/lib/csstransition/CSSTransitionBase.js
@@ -0,0 +1,10 @@
+import { ObjectUtils } from '../utils/Utils';
+
+export const CSSTransitionBase = {
+    defaultProps: {
+        __TYPE: 'CSSTransition',
+        children: undefined
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, CSSTransitionBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, CSSTransitionBase.defaultProps)
+};
diff --git a/components/lib/csstransition/csstransition.d.ts b/components/lib/csstransition/csstransition.d.ts
new file mode 100644
index 0000000000..1ebe50f5ae
--- /dev/null
+++ b/components/lib/csstransition/csstransition.d.ts
@@ -0,0 +1,38 @@
+/**
+ *
+ * CSSTransition component wraps [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API.
+ * It allows us to easily manage animations. All PrimeReact components use this component.
+ *
+ * [Live Demo](https://www.primereact.org/dropdown/)
+ *
+ * @module csstransition
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+
+/**
+ * Defines valid properties in [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API. In addition to these, all properties of HTMLElement can be used in this component.
+ * @group Properties
+ */
+export type CSSTransitionProps<Ref extends undefined | HTMLElement = undefined> = ReactCSSTransitionProps<Ref> & {
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+};
+
+/**
+ * **PrimeReact - CSSTransition**
+ *
+ * _CSSTransition component wraps [ReactCSSTransition](https://reactcommunity.org/react-transition-group/css-transition) API.
+ * It allows us to easily manage animations. All PrimeReact components use this component._
+ *
+ * [Live Demo](https://www.primereact.org/dropdown/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class CSSTransition<Ref extends undefined | HTMLElement> extends React.Component<CSSTransitionProps<Ref>, any> {}
diff --git a/components/lib/csstransition/package.json b/components/lib/csstransition/package.json
new file mode 100644
index 0000000000..abc4265fac
--- /dev/null
+++ b/components/lib/csstransition/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./csstransition.cjs.js",
+    "module": "./csstransition.esm.js",
+    "unpkg": "./csstransition.min.js",
+    "types": "./csstransition.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
new file mode 100644
index 0000000000..5462d4621b
--- /dev/null
+++ b/components/lib/datascroller/DataScroller.js
@@ -0,0 +1,261 @@
+import * as React from 'react';
+import { PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ObjectUtils, classNames } from '../utils/Utils';
+import { DataScrollerBase } from './DataScrollerBase';
+
+export const DataScroller = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = DataScrollerBase.getProps(inProps, context);
+
+        const [dataToRenderState, setDataToRenderState] = React.useState([]);
+        const { ptm, cx, sx, isUnstyled } = DataScrollerBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(DataScrollerBase.css.styles, isUnstyled, { name: 'datascroller' });
+
+        const elementRef = React.useRef(null);
+        const contentRef = React.useRef(null);
+        const value = React.useRef(props.value);
+        const dataToRender = React.useRef([]);
+        const first = React.useRef(0);
+        const scrollFunction = React.useRef(null);
+
+        const handleDataChange = () => {
+            if (props.lazy) {
+                dataToRender.current = value.current;
+                setDataToRenderState([...dataToRender.current]);
+            } else {
+                load();
+            }
+        };
+
+        const load = () => {
+            if (props.lazy) {
+                if (props.onLazyLoad) {
+                    props.onLazyLoad(createLazyLoadMetadata());
+                }
+
+                first.current = first.current + props.rows;
+            } else if (value.current) {
+                for (let i = first.current; i < first.current + props.rows; i++) {
+                    if (i >= value.current.length) {
+                        break;
+                    }
+
+                    dataToRender.current.push(value.current[i]);
+                }
+
+                if (value.current.length !== 0) {
+                    first.current = first.current + props.rows;
+                }
+
+                setDataToRenderState([...dataToRender.current]);
+            }
+        };
+
+        const reset = () => {
+            first.current = 0;
+            dataToRender.current = [];
+            setDataToRenderState([...dataToRender.current]);
+            load();
+        };
+
+        const isEmpty = () => {
+            return !dataToRender.current || dataToRender.current.length === 0;
+        };
+
+        const createLazyLoadMetadata = () => {
+            return {
+                first: first.current,
+                rows: props.rows
+            };
+        };
+
+        const bindScrollListener = () => {
+            if (props.inline) {
+                scrollFunction.current = () => {
+                    let scrollTop = contentRef.current.scrollTop;
+                    let scrollHeight = contentRef.current.scrollHeight;
+                    let viewportHeight = contentRef.current.clientHeight;
+
+                    if (scrollTop >= scrollHeight * props.buffer - viewportHeight) {
+                        load();
+                    }
+                };
+
+                contentRef.current.addEventListener('scroll', scrollFunction.current);
+            } else {
+                scrollFunction.current = () => {
+                    let docBody = document.body;
+                    let docElement = document.documentElement;
+                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+                    let winHeight = docElement.clientHeight;
+                    let docHeight = Math.max(docBody.scrollHeight, docBody.offsetHeight, winHeight, docElement.scrollHeight, docElement.offsetHeight);
+
+                    if (scrollTop >= docHeight * props.buffer - winHeight) {
+                        load();
+                    }
+                };
+
+                window.addEventListener('scroll', scrollFunction.current);
+            }
+        };
+
+        const unbindScrollListener = () => {
+            if (scrollFunction.current) {
+                if (props.inline && contentRef.current) {
+                    contentRef.current.removeEventListener('scroll', scrollFunction.current);
+                } else if (!props.loader) {
+                    window.removeEventListener('scroll', scrollFunction.current);
+                }
+            }
+
+            scrollFunction.current = null;
+        };
+
+        useMountEffect(() => {
+            load();
+
+            if (!props.loader) {
+                bindScrollListener();
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (props.value) {
+                value.current = props.value;
+
+                if (!props.lazy) {
+                    first.current = 0;
+                }
+
+                dataToRender.current = [];
+                handleDataChange();
+            }
+        }, [props.value]);
+
+        useUpdateEffect(() => {
+            if (props.loader) {
+                unbindScrollListener();
+            } else {
+                bindScrollListener();
+            }
+        }, [props.loader]);
+
+        useUnmountEffect(() => {
+            if (scrollFunction.current) {
+                unbindScrollListener();
+            }
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            load,
+            reset,
+            getElement: () => elementRef.current,
+            getContent: () => contentRef.current
+        }));
+
+        const createHeader = () => {
+            const headerProps = mergeProps(
+                {
+                    className: cx('header')
+                },
+                ptm('header')
+            );
+
+            if (props.header) {
+                return <div {...headerProps}>{props.header}</div>;
+            }
+
+            return null;
+        };
+
+        const createFooter = () => {
+            const footerProps = mergeProps(
+                {
+                    className: cx('footer')
+                },
+                ptm('footer')
+            );
+
+            if (props.footer) {
+                return <div {...footerProps}>{props.footer}</div>;
+            }
+
+            return null;
+        };
+
+        const createItem = (_value, index) => {
+            const itemProps = ptm('item');
+            const content = props.itemTemplate ? props.itemTemplate(_value) : _value;
+
+            return (
+                <li {...itemProps} key={index + '_datascrollitem'}>
+                    {content}
+                </li>
+            );
+        };
+
+        const createEmptyMessage = () => {
+            const emptyMessageProps = mergeProps(ptm('emptyMessage'));
+
+            const content = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
+
+            return <li {...emptyMessageProps}>{content}</li>;
+        };
+
+        const createContent = () => {
+            const contentProps = mergeProps(
+                {
+                    ref: contentRef,
+                    className: cx('content'),
+                    style: sx('content')
+                },
+                ptm('content')
+            );
+            const listProps = mergeProps(
+                {
+                    className: cx('list')
+                },
+                ptm('list')
+            );
+            const content = ObjectUtils.isNotEmpty(dataToRenderState) ? dataToRenderState.map(createItem) : createEmptyMessage();
+
+            return (
+                <div {...contentProps}>
+                    <ul {...listProps}>{content}</ul>
+                </div>
+            );
+        };
+
+        const header = createHeader();
+        const footer = createFooter();
+        const content = createContent();
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root'))
+            },
+            DataScrollerBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {header}
+                {content}
+                {footer}
+            </div>
+        );
+    })
+);
+
+DataScroller.displayName = 'DataScroller';
diff --git a/components/lib/datascroller/DataScrollerBase.js b/components/lib/datascroller/DataScrollerBase.js
new file mode 100644
index 0000000000..fc86c50285
--- /dev/null
+++ b/components/lib/datascroller/DataScrollerBase.js
@@ -0,0 +1,76 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    header: 'p-datascroller-header',
+    footer: 'p-datascroller-footer',
+    content: 'p-datascroller-content',
+    list: 'p-datascroller-list',
+    root: ({ props }) =>
+        classNames('p-datascroller p-component', {
+            'p-datascroller-inline': props.inline
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-datascroller .p-datascroller-header {
+        text-align: center;
+        padding: .5em .75em;
+        border-bottom: 0 none;
+    }
+    
+    .p-datascroller .p-datascroller-footer {
+        text-align: center;
+        padding: .25em .625em;
+        border-top: 0px none;
+    }
+    
+    .p-datascroller .p-datascroller-content {
+        padding: .25em .625em;
+    }
+    
+    .p-datascroller-inline .p-datascroller-content {
+        overflow: auto;
+    }
+    
+    .p-datascroller .p-datascroller-list {
+        list-style-type: none; 
+        margin: 0;
+        padding: 0;
+    }
+}
+`;
+
+const inlineStyles = {
+    content: ({ props }) => ({
+        maxHeight: props.scrollHeight
+    })
+};
+
+export const DataScrollerBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'DataScroller',
+        id: null,
+        value: null,
+        rows: 0,
+        inline: false,
+        scrollHeight: null,
+        loader: false,
+        buffer: 0.9,
+        style: null,
+        className: null,
+        onLazyLoad: null,
+        emptyMessage: null,
+        itemTemplate: null,
+        header: null,
+        footer: null,
+        lazy: false,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/datascroller/datascroller.d.ts b/components/lib/datascroller/datascroller.d.ts
new file mode 100644
index 0000000000..f7f8934a99
--- /dev/null
+++ b/components/lib/datascroller/datascroller.d.ts
@@ -0,0 +1,182 @@
+/**
+ *
+ * DataScroller displays data with on demand loading using scroll.
+ *
+ * [Live Demo](https://www.primereact.org/datascroller/)
+ *
+ * @module datascroller
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils';
+
+export declare type DataScrollerPassThroughType<T> = PassThroughType<T, DataScrollerPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataScrollerPassThroughMethodOptions {
+    props: DataScrollerProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataScrollerProps.pt}
+ */
+export interface DataScrollerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DataScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DataScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: DataScrollerPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: DataScrollerPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: DataScrollerPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    content?: DataScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom lazy event.
+ * @see {@link DataScrollerProps.onLazyLoad}
+ * @event
+ */
+interface DataScrollerLazyLoadEvents {
+    /**
+     * First row offset
+     */
+    first: number;
+    /**
+     * Number of rows per page
+     */
+    rows: number;
+}
+
+/**
+ * Defines valid properties in DataScroller component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface DataScrollerProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * Number of buffer size.
+     * @defaultValue 0.9
+     */
+    buffer?: number | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Text to display when there is no data.
+     * @defaultValue No records found
+     */
+    emptyMessage?: React.ReactNode | ((props: DataScrollerProps) => React.ReactNode);
+    /**
+     * Label of footer.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Label of header.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Defines if the event target to listen the scroll event is the element itself.
+     * @defaultValue false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Determines whether data is loaded by a target element.
+     */
+    loader?: boolean | undefined;
+    /**
+     * Number of rows to fetch in a load event.
+     */
+    rows?: number | undefined;
+    /**
+     * Max height of the content area in inline mode.
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * An array of objects to display.
+     */
+    value?: any[] | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for it.
+     * @param {*} item - Current item
+     */
+    itemTemplate?(item: any): React.ReactNode | undefined;
+    /**
+     * Callback to invoke in lazy mode to load new data.
+     * @param {DataScrollerLazyLoadEvents} event - Custom lazy event
+     */
+    onLazyLoad?(event: DataScrollerLazyLoadEvents): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataScrollerPassThroughOptions}
+     */
+    pt?: DataScrollerPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - DataScroller**
+ *
+ * _DataScroller displays data with on demand loading using scroll._
+ *
+ * [Live Demo](https://www.primereact.org/datascroller/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class DataScroller extends React.Component<DataScrollerProps, any> {
+    /**
+     * Used to load data manually
+     */
+    public load(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/datascroller/package.json b/components/lib/datascroller/package.json
new file mode 100644
index 0000000000..32448eace6
--- /dev/null
+++ b/components/lib/datascroller/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./datascroller.cjs.js",
+    "module": "./datascroller.esm.js",
+    "unpkg": "./datascroller.min.js",
+    "types": "./datascroller.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/datatable/BodyCell.js b/components/lib/datatable/BodyCell.js
new file mode 100644
index 0000000000..14f89e2e2f
--- /dev/null
+++ b/components/lib/datatable/BodyCell.js
@@ -0,0 +1,704 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { ColumnBase } from '../column/ColumnBase';
+import { useEventListener, useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { BarsIcon } from '../icons/bars';
+import { CheckIcon } from '../icons/check';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { PencilIcon } from '../icons/pencil';
+import { TimesIcon } from '../icons/times';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { RowCheckbox } from './RowCheckbox';
+import { RowRadioButton } from './RowRadioButton';
+
+export const Cell = (props) => {
+    const mergeProps = useMergeProps();
+    const [editingState, setEditingState] = React.useState(props.editing);
+    const [editingRowDataState, setEditingRowDataState] = React.useState(props.rowData);
+    const [styleObjectState, setStyleObjectState] = React.useState({});
+    const elementRef = React.useRef(null);
+    const keyHelperRef = React.useRef(null);
+    const focusTimeout = React.useRef(null);
+    const initFocusTimeout = React.useRef(null);
+    const editingRowDataStateRef = React.useRef(null);
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
+
+    const getColumnPTOptions = (key) => {
+        const columnMetaData = {
+            props: props.cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {
+                styleObject: styleObjectState,
+                editing: editingState,
+                editingRowData: editingRowDataState
+            },
+            context: {
+                index: props.index,
+                size: props.metaData.props.size,
+                showGridlines: props.metaData.props.showGridlines
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(props.cProps, key, columnMetaData));
+    };
+
+    const isEditable = () => {
+        return ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
+    };
+
+    const cellEditValidateOnClose = () => {
+        return getColumnProp('cellEditValidateOnClose');
+    };
+
+    const isIgnoredElement = (element) => {
+        const isOverlay = (el) => el.getAttribute && el.getAttribute('data-pr-is-overlay');
+
+        return isOverlay(element) || DomHandler.getParents(element).find((el) => isOverlay(el));
+    };
+
+    const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+        type: 'click',
+        listener: (e) => {
+            if (!isIgnoredElement(e.target) && isOutsideClicked(e.target)) {
+                switchCellToViewMode(e, true);
+            }
+        },
+        options: true,
+        when: isEditable()
+    });
+
+    const isOutsideClicked = (target) => {
+        return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
+    };
+
+    const getStyle = () => {
+        const bodyStyle = getColumnProp('bodyStyle');
+        const columnStyle = getColumnProp('style');
+
+        return props.frozenCol ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
+    };
+
+    const getCellParams = () => {
+        return {
+            value: props.resolveFieldData(),
+            field: props.field,
+            rowData: props.rowData,
+            rowIndex: props.rowIndex,
+            cellIndex: props.index,
+            selected: props.isCellSelected,
+            column: props.column,
+            props
+        };
+    };
+
+    const getCellCallbackParams = (event) => {
+        const params = getCellParams();
+
+        return {
+            originalEvent: event,
+            ...params
+        };
+    };
+
+    const closeCell = (event) => {
+        const params = getCellCallbackParams(event);
+        const onBeforeCellEditHide = getColumnProp('onBeforeCellEditHide');
+
+        if (onBeforeCellEditHide) {
+            onBeforeCellEditHide(params);
+        }
+
+        /* When using the 'tab' key, the focus event of the next cell is not called in IE. */
+        setTimeout(() => {
+            setEditingState(false);
+            unbindDocumentClickListener();
+        }, 1);
+    };
+
+    const switchCellToViewMode = (event, submit) => {
+        const callbackParams = getCellCallbackParams(event);
+        const newRowData = { ...editingRowDataStateRef.current };
+        const newValue = props.resolveFieldData(newRowData);
+        const params = { ...callbackParams, newRowData, newValue };
+        const onCellEditCancel = getColumnProp('onCellEditCancel');
+        const cellEditValidator = getColumnProp('cellEditValidator');
+        const onCellEditComplete = getColumnProp('onCellEditComplete');
+
+        if (!submit && onCellEditCancel) {
+            onCellEditCancel(params);
+        }
+
+        let valid = true;
+
+        if ((!submit || cellEditValidateOnClose()) && cellEditValidator) {
+            valid = cellEditValidator(params);
+        }
+
+        if (valid) {
+            if (submit && onCellEditComplete) {
+                onCellEditComplete(params);
+            }
+
+            closeCell(event);
+        } else {
+            event.preventDefault();
+        }
+
+        setEditingRowDataState(newRowData);
+    };
+
+    const editorCallback = (val) => {
+        let editingRowData = { ...editingRowDataState };
+
+        ObjectUtils.mutateFieldData(editingRowData, props.field, val);
+        setEditingRowDataState(editingRowData);
+
+        // update editing meta for complete methods on row mode
+        const currentData = props.getEditingRowData();
+
+        if (currentData) {
+            ObjectUtils.mutateFieldData(currentData, props.field, val);
+        }
+
+        editingRowDataStateRef.current = editingRowData;
+    };
+
+    const onClick = (event) => {
+        props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, props.column, bindDocumentClickListener);
+    };
+
+    const onMouseDown = (event) => {
+        const params = getCellCallbackParams(event);
+
+        props.onMouseDown && props.onMouseDown(params);
+    };
+
+    const onMouseUp = (event) => {
+        const params = getCellCallbackParams(event);
+
+        props.onMouseUp && props.onMouseUp(params);
+    };
+
+    const onKeyDown = (event) => {
+        if (props.editMode !== 'row') {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Tab') {
+                switchCellToViewMode(event, true);
+            }
+
+            if (event.code === 'Escape') {
+                switchCellToViewMode(event, false);
+            }
+        }
+
+        if (props.allowCellSelection) {
+            const { target, currentTarget: cell } = event;
+
+            switch (event.code) {
+                case 'ArrowLeft':
+                    let prevCell = props.findPrevSelectableCell(cell);
+
+                    if (prevCell) {
+                        changeTabIndex(cell, prevCell);
+                        prevCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowRight':
+                    let nextCell = props.findNextSelectableCell(cell);
+
+                    if (nextCell) {
+                        changeTabIndex(cell, nextCell);
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowUp':
+                    let upCell = props.findUpSelectableCell(cell, index);
+
+                    if (upCell) {
+                        changeTabIndex(cell, upCell);
+                        upCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowDown':
+                    let downCell = props.findDownSelectableCell(cell, index);
+
+                    if (downCell) {
+                        changeTabIndex(cell, downCell);
+                        downCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    if (event.shiftKey || event.ctrlKey) {
+                        // #5192 allow TextArea to add new lines
+                    } else if (!DomHandler.isClickable(target)) {
+                        onClick(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                case 'Space':
+                    if (!DomHandler.isClickable(target) && !target.readOnly) {
+                        onClick(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                default:
+                    //no op
+                    break;
+            }
+        }
+    };
+
+    const onBlur = (event) => {
+        if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
+            switchCellToViewMode(event, true);
+        }
+    };
+
+    const onEditorFocus = (event) => {
+        onClick(event);
+    };
+
+    const onRadioChange = (event) => {
+        props.onRadioChange({
+            originalEvent: event,
+            data: props.rowData,
+            index: props.rowIndex
+        });
+    };
+
+    const onRowToggle = (event) => {
+        props.onRowToggle({
+            originalEvent: event,
+            data: props.rowData
+        });
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const onRowEditInit = (event) => {
+        props.onRowEditInit({
+            originalEvent: event,
+            data: props.rowData,
+            newData: props.getEditingRowData(),
+            field: props.field,
+            index: props.rowIndex
+        });
+    };
+
+    const onRowEditSave = (event) => {
+        props.onRowEditSave({
+            originalEvent: event,
+            data: props.rowData,
+            newData: props.getEditingRowData(),
+            field: props.field,
+            index: props.rowIndex
+        });
+        props.focusOnInit(initFocusTimeout, elementRef);
+    };
+
+    const onRowEditCancel = (event) => {
+        props.onRowEditCancel({ originalEvent: event, data: props.rowData, newData: props.getEditingRowData(), field: props.field, index: props.rowIndex });
+        props.focusOnInit(initFocusTimeout, elementRef);
+    };
+
+    React.useEffect(() => {
+        if (props.frozenCol) props.updateStickyPosition(elementRef, props.frozenCol, props.alignFrozenCol, styleObjectState, setStyleObjectState);
+
+        if (props.editMode === 'cell' || props.editMode === 'row') props.focusOnElement(focusTimeout, editingState, elementRef, keyHelperRef);
+    }, [props.editMode, props.editing, editingState, props.frozenCol, props.alignFrozenCol]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    React.useEffect(() => {
+        if (props.editMode === 'row' && props.editing !== editingState) {
+            setEditingState(props.editing);
+        }
+    }, [props.editMode, props.editing, editingState]);
+
+    useUpdateEffect(() => {
+        if (props.editMode === 'cell' || props.editMode === 'row') {
+            const editingRowData = props.getEditingRowData();
+
+            setEditingRowDataState(editingRowData);
+
+            editingRowDataStateRef.current = editingRowData;
+        }
+    }, [props.editingMeta]);
+
+    React.useEffect(() => {
+        if (props.editMode === 'cell' || props.editMode === 'row') {
+            const callbackParams = getCellCallbackParams();
+            const params = { ...callbackParams, editing: editingState, editingKey: props.editingKey };
+
+            props.onEditingMetaChange(params);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editingState]);
+
+    useUnmountEffect(() => {
+        if (editingRowDataStateRef.current) {
+            editingRowDataStateRef.current = null;
+        }
+    });
+
+    const createLoading = () => {
+        const options = props.getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
+            cellIndex: props.index,
+            cellFirst: props.index === 0,
+            cellLast: props.index === props.getVirtualScrollerOption('columns').length - 1,
+            cellEven: props.index % 2 === 0,
+            cellOdd: props.index % 2 !== 0,
+            column: props.column,
+            field: props.field
+        });
+        const content = ObjectUtils.getJSXElement(props.getVirtualScrollerOption('loadingTemplate'), options);
+        const bodyCellProps = mergeProps(getColumnPTOptions('bodyCell'), {
+            role: 'cell'
+        });
+
+        return <td {...bodyCellProps}>{content}</td>;
+    };
+
+    const createElement = () => {
+        let content;
+        let editorKeyHelper;
+        const cellSelected = props.allowCellSelection && props.isCellSelected;
+        const isRowEditor = props.editMode === 'row';
+        const tabIndex = props.getTabIndex(cellSelected, props.index);
+        const selectionMode = getColumnProp('selectionMode');
+        const rowReorder = getColumnProp('rowReorder');
+        const header = getColumnProp('header');
+        const body = getColumnProp('body');
+        const editor = getColumnProp('editor');
+        const frozen = props.frozenCol;
+        const align = getColumnProp('align');
+        const value = props.resolveFieldData();
+        const columnBodyOptions = { column: props.column, field: props.field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps };
+        const rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
+        const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
+        const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
+        const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
+        const style = getStyle();
+        const columnTitleProps = mergeProps(
+            {
+                className: cx('columnTitle')
+            },
+            getColumnPTOptions('columnTitle')
+        );
+
+        const title = props.responsiveLayout === 'stack' && <span {...columnTitleProps}>{ObjectUtils.getJSXElement(header, { props: props.tableProps })}</span>;
+
+        if (selectionMode) {
+            const showSelection = props.showSelectionElement ? props.showSelectionElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true;
+            let label;
+
+            if (showSelection) {
+                const ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
+                const ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
+
+                label = `${props.isRowSelected ? ariaLabel('unselectRow') : ariaLabel('selectRow')} ${ariaLabelText}`;
+            }
+
+            content = showSelection && (
+                <>
+                    {selectionMode === 'single' && (
+                        <RowRadioButton
+                            hostName={props.hostName}
+                            column={props.column}
+                            checked={props.isRowSelected}
+                            disabled={!props.isSelectable({ data: props.rowData, index: props.rowIndex })}
+                            onChange={onRadioChange}
+                            tabIndex={props.tabIndex}
+                            tableSelector={props.tableSelector}
+                            ariaLabel={label}
+                            ptCallbacks={props.ptCallbacks}
+                            metaData={props.metaData}
+                            unstyled={props.unstyled}
+                        />
+                    )}
+                    {selectionMode === 'multiple' && (
+                        <RowCheckbox
+                            hostName={props.hostName}
+                            column={props.column}
+                            checked={props.isRowSelected}
+                            disabled={!props.isSelectable({ data: props.rowData, index: props.rowIndex })}
+                            onChange={props.onCheckboxChange}
+                            tabIndex={props.tabIndex}
+                            ariaLabel={label}
+                            checkIcon={props.checkIcon}
+                            ptCallbacks={props.ptCallbacks}
+                            metaData={props.metaData}
+                            unstyled={props.unstyled}
+                        />
+                    )}
+                </>
+            );
+        } else if (rowReorder) {
+            const showReorder = props.showRowReorderElement ? props.showRowReorderElement(props.rowData, { rowIndex: props.rowIndex, props: props.tableProps }) : true;
+
+            const customIcon = getColumnProp('rowReorderIcon');
+            const rowReorderIconProps = mergeProps(
+                {
+                    className: cx('rowReorderIcon')
+                },
+                customIcon ? null : getColumnPTOptions('rowReorderIcon')
+            );
+
+            const rowReorderIcon = customIcon || <BarsIcon {...rowReorderIconProps} />;
+
+            content = showReorder ? IconUtils.getJSXIcon(rowReorderIcon, { ...rowReorderIconProps }, { props }) : null;
+        } else if (expander) {
+            const rowTogglerIconProps = mergeProps(
+                {
+                    className: cx('rowTogglerIcon'),
+                    'aria-hidden': true
+                },
+                getColumnPTOptions('rowTogglerIcon')
+            );
+            const icon = props.expanded ? props.expandedRowIcon || <ChevronDownIcon {...rowTogglerIconProps} /> : props.collapsedRowIcon || <ChevronRightIcon {...rowTogglerIconProps} />;
+            const togglerIcon = IconUtils.getJSXIcon(icon, { ...rowTogglerIconProps }, { props });
+            const ariaControls = `${props.tableSelector}_content_${props.rowIndex}_expanded`;
+            const ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
+            const ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
+            const label = `${props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel')} ${ariaLabelText}`;
+            const expanderProps = {
+                onClick: onRowToggle,
+                className: cx('rowToggler')
+            };
+            const rowTogglerProps = mergeProps(
+                {
+                    ...expanderProps,
+                    type: 'button',
+                    'aria-expanded': props.expanded,
+                    'aria-controls': ariaControls,
+                    tabIndex: props.tabIndex,
+                    'aria-label': label
+                },
+                getColumnPTOptions('rowToggler')
+            );
+
+            content = (
+                <button {...rowTogglerProps}>
+                    {togglerIcon}
+                    <Ripple />
+                </button>
+            );
+
+            if (body) {
+                expanderProps.element = content;
+                content = ObjectUtils.getJSXElement(body, props.rowData, { column: props.column, field: props.field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps, expander: expanderProps });
+            }
+        } else if (isRowEditor && rowEditor) {
+            let rowEditorProps = {};
+            const rowEditorSaveIconProps = mergeProps({ className: cx('rowEditorSaveIcon') }, getColumnPTOptions('rowEditorSaveIcon'));
+            const rowEditorCancelIconProps = mergeProps({ className: cx('rowEditorCancelIcon') }, getColumnPTOptions('rowEditorCancelIcon'));
+            const rowEditorInitIconProps = mergeProps({ className: cx('rowEditorInitIcon') }, getColumnPTOptions('rowEditorInitIcon'));
+            const rowEditorSaveIcon = IconUtils.getJSXIcon(props.rowEditorSaveIcon || <CheckIcon {...rowEditorSaveIconProps} />, { ...rowEditorSaveIconProps }, { props });
+            const rowEditorCancelIcon = IconUtils.getJSXIcon(props.rowEditorCancelIcon || <TimesIcon {...rowEditorCancelIconProps} />, { ...rowEditorCancelIconProps }, { props });
+            const rowEditorInitIcon = IconUtils.getJSXIcon(props.rowEditorInitIcon || <PencilIcon {...rowEditorInitIconProps} />, { ...rowEditorInitIconProps }, { props });
+
+            if (editingState) {
+                rowEditorProps = {
+                    editing: true,
+                    onSaveClick: onRowEditSave,
+                    saveClassName: cx('rowEditorSaveButton'),
+                    onCancelClick: onRowEditCancel,
+                    cancelClassName: cx('rowEditorCancelButton')
+                };
+
+                const rowEditorSaveButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        name: 'row-save',
+                        'aria-label': ariaLabel('saveEdit'),
+                        onClick: rowEditorProps.onSaveClick,
+                        className: rowEditorProps.saveClassName,
+                        tabIndex: props.tabIndex,
+                        'data-p-row-editor-save': true
+                    },
+                    getColumnPTOptions('rowEditorSaveButton')
+                );
+
+                const rowEditorCancelButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        name: 'row-cancel',
+                        'aria-label': ariaLabel('cancelEdit'),
+                        onClick: rowEditorProps.onCancelClick,
+                        className: rowEditorProps.cancelClassName,
+                        tabIndex: props.tabIndex
+                    },
+                    getColumnPTOptions('rowEditorCancelButton')
+                );
+
+                content = (
+                    <>
+                        <button {...rowEditorSaveButtonProps}>
+                            {rowEditorSaveIcon}
+                            <Ripple />
+                        </button>
+                        <button {...rowEditorCancelButtonProps}>
+                            {rowEditorCancelIcon}
+                            <Ripple />
+                        </button>
+                    </>
+                );
+            } else {
+                rowEditorProps = {
+                    editing: false,
+                    onInitClick: onRowEditInit,
+                    initClassName: cx('rowEditorInitButton')
+                };
+
+                const rowEditorInitButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        name: 'row-edit',
+                        'aria-label': ariaLabel('editRow'),
+                        onClick: rowEditorProps.onInitClick,
+                        className: rowEditorProps.initClassName,
+                        tabIndex: props.tabIndex,
+                        'data-p-row-editor-init': true
+                    },
+                    getColumnPTOptions('rowEditorInitButton')
+                );
+
+                content = (
+                    <button {...rowEditorInitButtonProps}>
+                        {rowEditorInitIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            if (body) {
+                rowEditorProps.element = content;
+                content = ObjectUtils.getJSXElement(body, props.rowData, { column: props.column, field: props.field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps, rowEditor: rowEditorProps });
+            }
+        } else if (body && (!editingState || !editor)) {
+            content = body ? ObjectUtils.getJSXElement(body, props.rowData, { column: props.column, field: props.field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps }) : value;
+        } else if (editor && editingState) {
+            content = ObjectUtils.getJSXElement(editor, {
+                rowData: editingRowDataState,
+                value: props.resolveFieldData(editingRowDataState),
+                column: props.column,
+                field: props.field,
+                rowIndex: props.rowIndex,
+                frozenRow: props.frozenRow,
+                props: props.tableProps,
+                editorCallback
+            });
+        } else {
+            content = value;
+        }
+
+        content = typeof content === 'boolean' ? content.toString() : content;
+
+        if (!isRowEditor && editor) {
+            const editorKeyHelperProps = mergeProps(
+                {
+                    tabIndex: '0',
+                    className: 'p-cell-editor-key-helper p-hidden-accessible',
+                    onFocus: (e) => onEditorFocus(e)
+                },
+                getColumnPTOptions('editorKeyHelperLabel')
+            );
+
+            const editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
+            /* eslint-disable */
+            editorKeyHelper = (
+                <a ref={keyHelperRef} {...editorKeyHelperProps}>
+                    <span {...editorKeyHelperLabelProps}></span>
+                </a>
+            );
+            /* eslint-enable */
+        }
+
+        const bodyCellProps = mergeProps(
+            {
+                style,
+                className: classNames(bodyClassName, getColumnProp('className'), cellClassName, cx('bodyCell', { selectionMode, editor, editingState, frozen, cellSelected, align, bodyProps: props, getCellParams })),
+                rowSpan: props.rowSpan,
+                tabIndex,
+                role: 'cell',
+                onClick: (e) => onClick(e),
+                onKeyDown: (e) => onKeyDown(e),
+                onBlur: (e) => onBlur(e),
+                onMouseDown: (e) => onMouseDown(e),
+                onMouseUp: (e) => onMouseUp(e),
+                'data-p-selectable-cell': props.allowCellSelection && props.isSelectable({ data: getCellParams(), index: props.rowIndex }),
+                'data-p-selection-column': getColumnProp('selectionMode') != null,
+                'data-p-editable-column': isEditable() != null,
+                'data-p-cell-editing': editingState,
+                'data-p-frozen-column': frozen
+            },
+            getColumnPTOptions('root'),
+            getColumnPTOptions('bodyCell')
+        );
+
+        return (
+            <td ref={elementRef} {...bodyCellProps}>
+                {editorKeyHelper}
+                {title}
+                {content}
+            </td>
+        );
+    };
+
+    return props.getVirtualScrollerOption('loading') ? createLoading() : createElement();
+};
+
+// RadioCheckCell is used for the Radio and Checkbox selection and has the isRowSelected dependency
+export const RadioCheckCell = React.memo(
+    (props) => {
+        return <Cell {...props} />;
+    },
+    (prevProps, nextProps) => {
+        if (nextProps.cellMemo === false) return false;
+
+        const keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
+
+        return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
+    }
+);
+
+RadioCheckCell.displayName = 'RadioCheckCell';
+
+const defaultKeysToCompare = ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'];
+
+export const BodyCell = React.memo(
+    (props) => {
+        return <Cell {...props} />;
+    },
+    (prevProps, nextProps) => {
+        if (nextProps.cellMemo === false) return false;
+
+        const memoProps = nextProps.cellMemoProps;
+        const keysToCompare = Array.isArray(memoProps) && memoProps.every((prop) => typeof prop === 'string') ? memoProps : defaultKeysToCompare;
+
+        const memoPropsDepth = nextProps.cellMemoPropsDepth;
+        const depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1;
+
+        return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare, depth);
+    }
+);
+
+BodyCell.displayName = 'BodyCell';
diff --git a/components/lib/datatable/BodyRow.js b/components/lib/datatable/BodyRow.js
new file mode 100644
index 0000000000..253da78a87
--- /dev/null
+++ b/components/lib/datatable/BodyRow.js
@@ -0,0 +1,714 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { BodyCell, RadioCheckCell } from './BodyCell';
+import { Fragment } from 'react';
+
+export const BodyRow = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const [editingState, setEditingState] = React.useState(false);
+    const editing = props.onRowEditChange ? props.editing : editingState;
+    const { ptm, cx } = props.ptCallbacks;
+
+    const isRowSelected = (!props.allowCellSelection && props.selected) || props.contextMenuSelected;
+
+    const getBodyRowPTOptions = (key) => {
+        return ptm(key, {
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {
+                editing: editing
+            },
+            context: {
+                index: props.index,
+                selectable: props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }),
+                selected: isRowSelected,
+                stripedRows: props.metaData.props.stripedRows
+            }
+        });
+    };
+
+    const getColumnProp = (column, name) => ColumnBase.getCProp(column, name);
+
+    const isFocusable = () => {
+        return props.selectionMode && props.selectionModeInColumn !== 'single' && props.selectionModeInColumn !== 'multiple';
+    };
+
+    const isGrouped = (column) => {
+        const columnField = getColumnProp(column, 'field');
+
+        if (props.groupRowsBy && columnField) {
+            return Array.isArray(props.groupRowsBy) ? props.groupRowsBy.indexOf(columnField) > -1 : props.groupRowsBy === columnField;
+        }
+
+        return false;
+    };
+
+    const equals = (data1, data2) => {
+        return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
+    };
+
+    const getTabIndex = () => {
+        return isFocusable() && !props.allowCellSelection ? (props.rowIndex === 0 ? props.tabIndex : -1) : null;
+    };
+
+    const findIndex = (collection, rowData) => {
+        return (collection || []).findIndex((data) => equals(rowData, data));
+    };
+
+    const changeTabIndex = (currentElement, nextElement) => {
+        if (currentElement && nextElement) {
+            currentElement.tabIndex = -1;
+            nextElement.tabIndex = props.tabIndex;
+        }
+    };
+
+    const findFirstSelectableRow = (row) => {
+        const firstRow = DomHandler.findSingle(row.parentNode, 'tr[data-p-selectable-row]');
+
+        return firstRow ? firstRow : null;
+    };
+
+    const findNextSelectableRow = (row) => {
+        const nextRow = row.nextElementSibling;
+
+        return nextRow ? (DomHandler.getAttribute(nextRow, 'data-p-selectable-row') === true ? nextRow : findNextSelectableRow(nextRow)) : null;
+    };
+
+    const findPrevSelectableRow = (row) => {
+        const prevRow = row.previousElementSibling;
+
+        return prevRow ? (DomHandler.getAttribute(prevRow, 'data-p-selectable-row') === true ? prevRow : findPrevSelectableRow(prevRow)) : null;
+    };
+
+    const findLastSelectableRow = (row) => {
+        const lastRow = DomHandler.findSingle(row.parentNode, 'tr[data-p-selectable-row]:last-child');
+
+        return lastRow ? lastRow : null;
+    };
+
+    const shouldRenderBodyCell = (value, column, i) => {
+        if (getColumnProp(column, 'hidden')) {
+            return false;
+        } else if (props.rowGroupMode && props.rowGroupMode === 'rowspan' && isGrouped(column)) {
+            let prevRowData = value[i - 1];
+
+            if (prevRowData) {
+                const currentRowFieldData = ObjectUtils.resolveFieldData(value[i], getColumnProp(column, 'field'));
+                const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, getColumnProp(column, 'field'));
+
+                return currentRowFieldData !== previousRowFieldData;
+            }
+        }
+
+        return true;
+    };
+
+    const calculateRowGroupSize = (value, column, index) => {
+        if (isGrouped(column)) {
+            let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], getColumnProp(column, 'field'));
+            let nextRowFieldData = currentRowFieldData;
+            let groupRowSpan = 0;
+
+            while (currentRowFieldData === nextRowFieldData) {
+                groupRowSpan++;
+                let nextRowData = value[++index];
+
+                if (nextRowData) {
+                    nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, getColumnProp(column, 'field'));
+                } else {
+                    break;
+                }
+            }
+
+            return groupRowSpan === 1 ? null : groupRowSpan;
+        }
+
+        return null;
+    };
+
+    const onClick = (event) => {
+        props.onRowClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onDoubleClick = (event) => {
+        props.onRowDoubleClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onPointerDown = (event) => {
+        props.onRowPointerDown({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onPointerUp = (event) => {
+        props.onRowPointerUp({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onRightClick = (event) => {
+        props.onRowRightClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onMouseEnter = (event) => {
+        props.onRowMouseEnter({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onMouseLeave = (event) => {
+        props.onRowMouseLeave({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onTouchEnd = (event) => {
+        props.onRowTouchEnd(event);
+    };
+
+    const onKeyDown = (event) => {
+        if (isFocusable() && !props.allowCellSelection) {
+            const { target, currentTarget: row } = event;
+
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(row, event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(row, event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(row, event);
+                    break;
+
+                case 'End':
+                    onEndKey(row, event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(row, event, target);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(row, event, target);
+                    break;
+
+                case 'Tab':
+                    onTabKey(row, event);
+                    break;
+
+                default:
+                    //no op
+                    break;
+            }
+        }
+    };
+
+    const onArrowDownKey = (row, event) => {
+        let nextRow = findNextSelectableRow(row);
+
+        if (nextRow) {
+            changeTabIndex(row, nextRow);
+            nextRow.focus();
+        }
+
+        event.preventDefault();
+    };
+
+    const onArrowUpKey = (row, event) => {
+        let prevRow = findPrevSelectableRow(row);
+
+        if (prevRow) {
+            changeTabIndex(row, prevRow);
+            prevRow.focus();
+        }
+
+        event.preventDefault();
+    };
+
+    const onHomeKey = (row, event) => {
+        const firstRow = findFirstSelectableRow(row);
+
+        if (firstRow) {
+            changeTabIndex(row, firstRow);
+            firstRow.focus();
+        }
+
+        event.preventDefault();
+    };
+
+    const onEndKey = (row, event) => {
+        const lastRow = findLastSelectableRow(row);
+
+        if (lastRow) {
+            changeTabIndex(row, lastRow);
+            lastRow.focus();
+        }
+
+        event.preventDefault();
+    };
+
+    const onEnterKey = (row, event, target) => {
+        if (!DomHandler.isClickable(target)) {
+            onClick(event);
+            event.preventDefault();
+        }
+    };
+
+    const onSpaceKey = (row, event, target) => {
+        if (!DomHandler.isClickable(target) && !target.readOnly) {
+            onClick(event);
+            event.preventDefault();
+        }
+    };
+
+    const onTabKey = (row, event) => {
+        const parent = row.parentNode;
+        const rows = DomHandler.find(parent, 'tr[data-p-selectable-row="true"]');
+
+        if (event.code === 'Tab' && rows && rows.length > 0) {
+            const firstSelectedRow = DomHandler.findSingle(parent, 'tr[data-p-highlight="true"]');
+            const focusedItem = DomHandler.findSingle(parent, 'tr[data-p-selectable-row="true"][tabindex="0"]');
+
+            if (firstSelectedRow) {
+                firstSelectedRow.tabIndex = '0';
+                focusedItem && focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
+            } else {
+                rows[0].tabIndex = '0';
+                focusedItem !== rows[0] && (rows[props.rowIndex].tabIndex = '-1');
+            }
+        }
+    };
+
+    const onMouseDown = (event) => {
+        props.onRowMouseDown({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onMouseUp = (event) => {
+        props.onRowMouseUp({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onDragStart = (event) => {
+        props.onRowDragStart({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onDragOver = (event) => {
+        props.onRowDragOver({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onDragLeave = (event) => {
+        props.onRowDragLeave({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onDragEnd = (event) => {
+        props.onRowDragEnd({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onDrop = (event) => {
+        props.onRowDrop({ originalEvent: event, data: props.rowData, index: props.rowIndex });
+    };
+
+    const onEditChange = (e, isEditing) => {
+        if (props.onRowEditChange) {
+            let editingRows;
+            const dataKey = props.dataKey;
+            const { originalEvent, data, index, newData } = e;
+
+            if (dataKey) {
+                let dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
+
+                editingRows = props.editingRows ? { ...props.editingRows } : {};
+
+                if (!isEditing) {
+                    delete editingRows[dataKeyValue];
+                    // if the key value was changed, stop editing for the new key value too
+                    let newDataKeyValue = String(ObjectUtils.resolveFieldData(newData, dataKey));
+
+                    delete editingRows[newDataKeyValue];
+                } else {
+                    editingRows[dataKeyValue] = true;
+                }
+            } else {
+                let editingRowIndex = findIndex(props.editingRows, data);
+
+                editingRows = props.editingRows ? [...props.editingRows] : [];
+
+                if (editingRowIndex !== -1) {
+                    editingRows = editingRows.filter((val, i) => i !== editingRowIndex);
+                } else {
+                    editingRows.push(data);
+                }
+            }
+
+            props.onRowEditChange({
+                originalEvent,
+                data: editingRows,
+                index
+            });
+        } else {
+            setEditingState(isEditing);
+        }
+    };
+
+    const onEditInit = (e) => {
+        const { originalEvent: event } = e;
+
+        if (props.onRowEditInit) {
+            props.onRowEditInit({
+                originalEvent: event,
+                data: props.rowData,
+                index: props.rowIndex
+            });
+        }
+
+        onEditChange(e, true);
+
+        event.preventDefault();
+    };
+
+    const onEditSave = (e) => {
+        const { originalEvent: event, newData } = e;
+        const valid = props.rowEditValidator ? props.rowEditValidator(newData, { props: props.tableProps, rowIndex: props.rowIndex }) : true;
+
+        if (props.onRowEditSave) {
+            props.onRowEditSave({
+                originalEvent: event,
+                data: props.rowData,
+                index: props.rowIndex,
+                newData,
+                valid
+            });
+        }
+
+        if (valid) {
+            if (props.onRowEditComplete) {
+                props.onRowEditComplete(e);
+            }
+
+            onEditChange(e, false);
+        }
+
+        event.preventDefault();
+    };
+
+    const onEditCancel = (e) => {
+        const { originalEvent: event } = e;
+
+        if (props.onRowEditCancel) {
+            props.onRowEditCancel({
+                originalEvent: event,
+                data: props.rowData,
+                index: props.rowIndex
+            });
+        }
+
+        onEditChange(e, false);
+
+        event.preventDefault();
+    };
+
+    const equalsDataCell = (data) => {
+        return props.compareSelectionBy === 'equals' ? data === props.rowData : ObjectUtils.equals(data, props.rowData, props.dataKey);
+    };
+
+    const equalsCell = (selectedCell, field, colIndex) => {
+        return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsDataCell(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === colIndex);
+    };
+
+    const findIndexCell = (collection, field, colIndex) => {
+        return (collection || []).findIndex((data) => equalsCell(data, field, colIndex));
+    };
+
+    const isCellSelected = (selection, field, colIndex) => {
+        return selection ? (selection instanceof Array ? findIndexCell(selection, field, colIndex) > -1 : equalsCell(selection, field, colIndex)) : false;
+    };
+
+    const onCheckboxChange = (event) => {
+        props.onCheckboxChange({
+            originalEvent: event,
+            data: props.rowData,
+            index: props.rowIndex
+        });
+    };
+
+    const editingKey = props.dataKey ? (props.rowData && props.rowData[props.dataKey]) || props.rowIndex : props.rowIndex;
+
+    const getVirtualScrollerOption = React.useCallback(
+        (option) => {
+            return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
+        },
+        [props.virtualScrollerOptions]
+    );
+
+    const getEditingRowData = () => {
+        return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
+    };
+
+    const getTabIndexCell = React.useCallback(
+        (cellSelected, cellIndex) => {
+            return props.allowCellSelection ? (cellSelected ? 0 : props.rowIndex === 0 && cellIndex === 0 ? props.tabIndex : -1) : null;
+        },
+        [props.allowCellSelection, props.rowIndex, props.tabIndex]
+    );
+
+    const findNextSelectableCell = React.useCallback((cell) => {
+        const nextCell = cell.nextElementSibling;
+
+        return nextCell ? (DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell)) : null;
+    }, []);
+
+    const findPrevSelectableCell = React.useCallback((cell) => {
+        const prevCell = cell.previousElementSibling;
+
+        return prevCell ? (DomHandler.getAttribute(prevCell, 'data-p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell)) : null;
+    }, []);
+
+    const findDownSelectableCell = React.useCallback((cell, cellIndex) => {
+        const downRow = cell.parentElement.nextElementSibling;
+        const downCell = downRow ? downRow.children[cellIndex] : null;
+
+        return downRow && downCell ? (DomHandler.getAttribute(downRow, 'data-p-selectable-row') && DomHandler.getAttribute(downCell, 'data-p-selectable-cell') ? downCell : findDownSelectableCell(downCell)) : null;
+    }, []);
+
+    const findUpSelectableCell = React.useCallback((cell, cellIndex) => {
+        const upRow = cell.parentElement.previousElementSibling;
+        const upCell = upRow ? upRow.children[cellIndex] : null;
+
+        return upRow && upCell ? (DomHandler.getAttribute(upRow, 'data-p-selectable-row') && DomHandler.getAttribute(upCell, 'data-p-selectable-cell') ? upCell : findUpSelectableCell(upCell)) : null;
+    }, []);
+
+    const focusOnElement = React.useCallback(
+        (focusTimeoutRef, editingState, elementRef, keyHelperRef) => {
+            clearTimeout(focusTimeoutRef.current);
+            focusTimeoutRef.current = setTimeout(() => {
+                if (editingState) {
+                    const focusableEl =
+                        props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+
+                    focusableEl && focusableEl.focus();
+                }
+
+                keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
+            }, 1);
+        },
+        [props.editMode]
+    );
+
+    const focusOnInit = React.useCallback(
+        (initFocusTimeoutRef, elementRef) => {
+            clearTimeout(initFocusTimeoutRef.current);
+            initFocusTimeoutRef.current = setTimeout(() => {
+                const focusableEl = props.editMode === 'row' ? DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
+
+                focusableEl && focusableEl.focus();
+            }, 1);
+        },
+        [props.editMode]
+    );
+
+    const updateStickyPosition = React.useCallback((elementRef, frozen, alignFrozen, styleObjectState, setStyleObjectState) => {
+        if (frozen) {
+            let styleObject = { ...styleObjectState };
+
+            if (alignFrozen === 'right') {
+                let right = 0;
+                let next = elementRef.current && elementRef.current.nextElementSibling;
+
+                if (next && next.classList.contains('p-frozen-column')) {
+                    right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+                }
+
+                styleObject.right = right + 'px';
+            } else {
+                let left = 0;
+                let prev = elementRef.current && elementRef.current.previousElementSibling;
+
+                while (prev) {
+                    if (prev.classList.contains('p-frozen-column')) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        elementRef.current.style.left = left + 'px';
+                        break;
+                    }
+
+                    prev = prev.previousElementSibling;
+                }
+
+                styleObject.left = left + 'px';
+            }
+
+            const isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
+
+            !isSameStyle && setStyleObjectState(styleObject);
+        }
+    }, []);
+
+    const onCellClick = (event, params, isEditable, editingState, setEditingState, column, bindDocumentClickListener) => {
+        if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || (!props.selectOnEdit && props.isRowSelected))) {
+            const onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
+            const onCellEditInit = getColumnProp(column, 'onCellEditInit');
+            const cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
+
+            if (onBeforeCellEditShow) {
+                // if user returns false do not show the editor
+                if (onBeforeCellEditShow(params) === false) {
+                    return;
+                }
+
+                // if user prevents default stop the editor
+                if (event && event.defaultPrevented) {
+                    return;
+                }
+            }
+
+            // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
+            setTimeout(() => {
+                setEditingState(true);
+
+                if (onCellEditInit) {
+                    if (onCellEditInit(params) === false) {
+                        return;
+                    }
+
+                    // if user prevents default stop the editor
+                    if (event && event.defaultPrevented) {
+                        return;
+                    }
+                }
+
+                if (cellEditValidatorEvent === 'click') {
+                    bindDocumentClickListener();
+                }
+            }, 1);
+        }
+
+        if (props.allowCellSelection && props.onCellClick) {
+            props.onCellClick(params);
+        }
+    };
+
+    const createContent = () => {
+        return props.columns.map((col, i) => {
+            if (shouldRenderBodyCell(props.value, col, props.index)) {
+                const key = `${props.rowIndex}_${getColumnProp(col, 'columnKey') || getColumnProp(col, 'field')}_${i}`;
+                const rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
+
+                const field = getColumnProp(col, 'field') || `field_${i}`;
+
+                const resolveFieldData = (data) => {
+                    return ObjectUtils.resolveFieldData(data || props.rowData, field);
+                };
+
+                const selectionMode = getColumnProp(col, 'selectionMode');
+
+                const cellProps = mergeProps({
+                    hostName: props.hostName,
+                    allowCellSelection: props.allowCellSelection,
+                    cellMemo: props.cellMemo,
+                    cellMemoProps: props.cellMemoProps,
+                    cellMemoPropsDepth: props.cellMemoPropsDepth,
+                    cellClassName: props.cellClassName,
+                    checkIcon: props.checkIcon,
+                    collapsedRowIcon: props.collapsedRowIcon,
+                    field: field,
+                    resolveFieldData: resolveFieldData,
+                    column: col,
+                    cProps: props.colsProps[i],
+                    dataKey: props.dataKey,
+                    editMode: props.editMode,
+                    editing: editing,
+                    editingMeta: props.editingMeta,
+                    onEditingMetaChange: props.onEditingMetaChange,
+                    editingKey: editingKey,
+                    getEditingRowData: getEditingRowData,
+                    expanded: props.expanded,
+                    expandedRowIcon: props.expandedRowIcon,
+                    frozenRow: props.frozenRow,
+                    frozenCol: getColumnProp(col, 'frozen'),
+                    alignFrozenCol: getColumnProp(col, 'alignFrozen'),
+                    index: i,
+                    isSelectable: props.isSelectable,
+                    onCheckboxChange: onCheckboxChange,
+                    onClick: onCellClick,
+                    onMouseDown: props.onCellMouseDown,
+                    onMouseUp: props.onCellMouseUp,
+                    onRadioChange: props.onRadioChange,
+                    onRowEditCancel: onEditCancel,
+                    onRowEditInit: onEditInit,
+                    onRowEditSave: onEditSave,
+                    onRowToggle: props.onRowToggle,
+                    responsiveLayout: props.responsiveLayout,
+                    rowData: props.rowData,
+                    rowEditorCancelIcon: props.rowEditorCancelIcon,
+                    rowEditorInitIcon: props.rowEditorInitIcon,
+                    rowEditorSaveIcon: props.rowEditorSaveIcon,
+                    rowIndex: props.rowIndex,
+                    rowSpan: rowSpan,
+                    selectOnEdit: props.selectOnEdit,
+                    isRowSelected: isRowSelected,
+                    isCellSelected: isCellSelected(props.selection, field, i),
+                    selectionAriaLabel: props.tableProps.selectionAriaLabel,
+                    showRowReorderElement: props.showRowReorderElement,
+                    showSelectionElement: props.showSelectionElement,
+                    tabIndex: props.tabIndex,
+                    getTabIndex: getTabIndexCell,
+                    tableProps: props.tableProps,
+                    tableSelector: props.tableSelector,
+                    value: props.value,
+                    getVirtualScrollerOption: getVirtualScrollerOption,
+                    ptCallbacks: props.ptCallbacks,
+                    metaData: props.metaData,
+                    unstyled: props.unstyled,
+                    findNextSelectableCell: findNextSelectableCell,
+                    findPrevSelectableCell: findPrevSelectableCell,
+                    findDownSelectableCell: findDownSelectableCell,
+                    findUpSelectableCell: findUpSelectableCell,
+                    focusOnElement: focusOnElement,
+                    focusOnInit: focusOnInit,
+                    updateStickyPosition: updateStickyPosition
+                });
+
+                return <Fragment key={key}>{selectionMode ? <RadioCheckCell {...cellProps} /> : <BodyCell {...cellProps} />}</Fragment>;
+            }
+
+            return null;
+        });
+    };
+
+    const rowClassName = ObjectUtils.getPropValue(props.rowClassName, props.rowData, { props: props.tableProps });
+    const style = { height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined };
+    const content = createContent();
+    const tabIndex = getTabIndex();
+    const rowProps = mergeProps(
+        {
+            role: 'row',
+            tabIndex: tabIndex,
+            className: classNames(cx('bodyRow', { rowProps: props })),
+            style: style,
+            onMouseDown: (e) => onMouseDown(e),
+            onMouseUp: (e) => onMouseUp(e),
+            onMouseEnter: (e) => onMouseEnter(e),
+            onMouseLeave: (e) => onMouseLeave(e),
+            onClick: (e) => onClick(e),
+            onDoubleClick: (e) => onDoubleClick(e),
+            onPointerDown: (e) => onPointerDown(e),
+            onPointerUp: (e) => onPointerUp(e),
+            onContextMenu: (e) => onRightClick(e),
+            onTouchEnd: (e) => onTouchEnd(e),
+            onKeyDown: (e) => onKeyDown(e),
+            onDragStart: (e) => onDragStart(e),
+            onDragOver: (e) => onDragOver(e),
+            onDragLeave: (e) => onDragLeave(e),
+            onDragEnd: (e) => onDragEnd(e),
+            onDrop: (e) => onDrop(e),
+            'aria-selected': props?.selectionMode ? props.selected : null,
+            'data-p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }),
+            'data-p-highlight': props.selected,
+            'data-p-highlight-contextmenu': props.contextMenuSelected
+        },
+        getBodyRowPTOptions('bodyRow'),
+        {
+            className: classNames(rowClassName) // #5983 must be last so all unstyled merging takes place first
+        }
+    );
+
+    return <tr {...rowProps}>{content}</tr>;
+});
+
+BodyRow.displayName = 'BodyRow';
diff --git a/components/lib/datatable/ColumnFilter.js b/components/lib/datatable/ColumnFilter.js
new file mode 100644
index 0000000000..368b54437b
--- /dev/null
+++ b/components/lib/datatable/ColumnFilter.js
@@ -0,0 +1,956 @@
+import * as React from 'react';
+import PrimeReact, { FilterMatchMode, FilterOperator, PrimeReactContext, localeOption } from '../api/Api';
+import { ariaLabel } from '../api/Locale';
+import { Button } from '../button/Button';
+import { ColumnBase } from '../column/ColumnBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { Dropdown } from '../dropdown/Dropdown';
+import FocusTrap from '../focustrap/FocusTrap';
+import { useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { FilterIcon } from '../icons/filter';
+import { FilterSlashIcon } from '../icons/filterslash';
+import { PlusIcon } from '../icons/plus';
+import { TrashIcon } from '../icons/trash';
+import { InputText } from '../inputtext/InputText';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+
+export const ColumnFilter = React.memo((props) => {
+    const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+    const overlayRef = React.useRef(null);
+    const overlayId = React.useRef(null);
+    const iconRef = React.useRef(null);
+    const selfClick = React.useRef(false);
+    const overlayEventListener = React.useRef(null);
+    const mergeProps = useMergeProps();
+    const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
+    const getColumnProps = () => ColumnBase.getCProps(props.column);
+    const context = React.useContext(PrimeReactContext);
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+
+    const getColumnPTOptions = (key, params) => {
+        const cProps = getColumnProps();
+
+        const columnMetadata = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {
+                overlayVisible: overlayVisibleState
+            },
+            ...params
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata));
+    };
+
+    const field = getColumnProp('filterField') || getColumnProp('field');
+    const filterModel = props.filters[field];
+    const filterStoreModel = props.filtersStore && props.filtersStore[field];
+
+    const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+        target: iconRef,
+        overlay: overlayRef,
+        listener: (event, { type, valid }) => {
+            if (valid) {
+                if (type === 'outside') {
+                    if (!selfClick.current && !isTargetClicked(event.target)) {
+                        hide();
+                    }
+
+                    selfClick.current = false;
+                } else if (context.hideOverlaysOnDocumentScrolling) {
+                    hide();
+                } else if (!DomHandler.isDocument(event.target)) {
+                    DomHandler.alignOverlay(overlayRef.current, iconRef.current, (context && context.appendTo) || PrimeReact.appendTo, false);
+                }
+            }
+        },
+        when: overlayVisibleState
+    });
+
+    const hasFilter = () => {
+        if (!filterStoreModel || !filterModel) {
+            return false;
+        }
+
+        return filterStoreModel.operator ? !isFilterBlank(filterModel.constraints[0].value) : !isFilterBlank(filterModel.value);
+    };
+
+    const hasRowFilter = () => {
+        return filterModel && !isFilterBlank(filterModel.value);
+    };
+
+    const isFilterBlank = (filter) => {
+        return ObjectUtils.isEmpty(filter);
+    };
+
+    const isRowMatchModeSelected = (matchMode) => {
+        return filterModel && filterModel.matchMode === matchMode;
+    };
+
+    const matchModes = () => {
+        return (
+            getColumnProp('filterMatchModeOptions') ||
+            (context && context.filterMatchModeOptions[findDataType()].map((key) => ({ label: localeOption(key), value: key }))) ||
+            PrimeReact.filterMatchModeOptions[findDataType()].map((key) => ({ label: localeOption(key), value: key }))
+        );
+    };
+
+    const isShowMenuButton = () => {
+        return getColumnProp('showFilterMenu') && (props.display === 'row' ? getColumnProp('dataType') !== 'boolean' : true);
+    };
+
+    const isShowClearButton = () => {
+        return getColumnProp('showClearButton') && props.display === 'row';
+    };
+
+    const isShowMatchModes = () => {
+        return getColumnProp('dataType') !== 'boolean' && getColumnProp('showFilterMatchModes') && matchModes() && getColumnProp('showFilterMenuOptions');
+    };
+
+    const isShowOperator = () => {
+        return getColumnProp('showFilterOperator') && filterModel && filterModel.operator && getColumnProp('showFilterMenuOptions');
+    };
+
+    const showRemoveIcon = () => {
+        return fieldConstraints().length > 1;
+    };
+
+    const isShowAddConstraint = () => {
+        return getColumnProp('showAddButton') && filterModel && filterModel.operator && fieldConstraints() && fieldConstraints().length < getColumnProp('maxConstraints') && getColumnProp('showFilterMenuOptions');
+    };
+
+    const isOutsideClicked = (target) => {
+        return !isTargetClicked(target) && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
+    };
+
+    const isTargetClicked = (target) => {
+        return iconRef.current && (iconRef.current.isSameNode(target) || iconRef.current.contains(target));
+    };
+
+    const getDefaultConstraint = () => {
+        if (filterStoreModel) {
+            if (filterStoreModel.operator) {
+                return {
+                    matchMode: filterStoreModel.constraints[0].matchMode,
+                    operator: filterStoreModel.operator
+                };
+            }
+
+            return {
+                matchMode: filterStoreModel.matchMode
+            };
+        }
+    };
+
+    const findDataType = () => {
+        const dataType = getColumnProp('dataType');
+        const matchMode = getColumnProp('filterMatchMode');
+        const hasMatchMode = (key) => (context && context.filterMatchModeOptions[key].some((mode) => mode === matchMode)) || PrimeReact.filterMatchModeOptions[key].some((mode) => mode === matchMode);
+
+        if (matchMode === 'custom' && !hasMatchMode(dataType)) {
+            (context && context.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM)) || PrimeReact.filterMatchModeOptions[dataType].push(FilterMatchMode.CUSTOM);
+
+            return dataType;
+        } else if (matchMode) {
+            return Object.keys((context && context.filterMatchModeOptions) || PrimeReact.filterMatchModeOptions).find((key) => hasMatchMode(key)) || dataType;
+        }
+
+        return dataType;
+    };
+
+    const clearFilter = () => {
+        const filterClearCallback = getColumnProp('onFilterClear');
+        const defaultConstraint = getDefaultConstraint();
+        let filters = { ...props.filters };
+
+        if (filters[field].operator) {
+            filters[field].constraints.splice(1);
+            filters[field].operator = defaultConstraint.operator;
+            filters[field].constraints[0] = { value: null, matchMode: defaultConstraint.matchMode };
+        } else {
+            filters[field].value = null;
+            filters[field].matchMode = defaultConstraint ? defaultConstraint.matchMode : filters[field].matchMode;
+        }
+
+        filterClearCallback && filterClearCallback();
+        props.onFilterChange(filters);
+        props.onFilterApply();
+        hide();
+    };
+
+    const applyFilter = () => {
+        const filterApplyClickCallback = getColumnProp('onFilterApplyClick');
+
+        filterApplyClickCallback && filterApplyClickCallback({ field, constraints: filterModel });
+        props.onFilterApply();
+        hide();
+    };
+
+    const toggleMenu = () => {
+        setOverlayVisibleState((prevVisible) => !prevVisible);
+    };
+
+    const onToggleButtonKeyDown = (event) => {
+        switch (event.key) {
+            case 'Escape':
+            case 'Tab':
+                hide();
+                break;
+
+            case 'ArrowDown':
+                if (overlayVisibleState) {
+                    const focusable = DomHandler.getFirstFocusableElement(overlayRef.current);
+
+                    focusable && focusable.focus();
+                    event.preventDefault();
+                } else if (event.altKey) {
+                    setOverlayVisibleState(true);
+                    event.preventDefault();
+                }
+
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    const onContentKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            hide();
+            iconRef.current && iconRef.current.focus();
+        }
+    };
+
+    const onInputChange = (event, index) => {
+        let filters = { ...props.filters };
+        let value = event.target.value;
+        let filterField = filters[field];
+
+        if (props.display === 'menu' && ObjectUtils.isNotEmpty(filterField.constraints)) {
+            filterField.constraints[index].value = value;
+        } else {
+            filterField.value = value;
+        }
+
+        props.onFilterChange(filters);
+
+        if (!getColumnProp('showApplyButton') || props.display === 'row') {
+            props.onFilterApply();
+        }
+    };
+
+    const onInputKeydown = (event, _index) => {
+        if (event.key === 'Enter') {
+            if (!getColumnProp('showApplyButton') || props.display === 'menu') {
+                applyFilter();
+            }
+        }
+    };
+
+    const onRowMatchModeChange = (matchMode) => {
+        const filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
+        let filters = { ...props.filters };
+
+        filters[field].matchMode = matchMode;
+
+        filterMatchModeChangeCallback && filterMatchModeChangeCallback({ field, matchMode });
+        props.onFilterChange(filters);
+        props.onFilterApply();
+        hide();
+        iconRef.current?.focus();
+    };
+
+    const onRowMatchModeKeyDown = (event, matchMode, clear) => {
+        let item = event.target;
+
+        switch (event.key) {
+            case 'ArrowDown':
+                const nextItem = findNextItem(item);
+
+                if (nextItem) {
+                    item.removeAttribute('tabindex');
+                    nextItem.tabIndex = 0;
+                    nextItem.focus();
+                }
+
+                event.preventDefault();
+                break;
+
+            case 'ArrowUp':
+                const prevItem = findPrevItem(item);
+
+                if (prevItem) {
+                    item.removeAttribute('tabindex');
+                    prevItem.tabIndex = 0;
+                    prevItem.focus();
+                }
+
+                event.preventDefault();
+                break;
+
+            case 'Enter':
+                clear ? clearFilter() : onRowMatchModeChange(matchMode.value);
+
+                event.preventDefault();
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    const onOperatorChange = (e) => {
+        const filterOperationChangeCallback = getColumnProp('onFilterOperatorChange');
+        let value = e.value;
+        let filters = { ...props.filters };
+
+        filters[field].operator = value;
+        props.onFilterChange(filters);
+
+        filterOperationChangeCallback && filterOperationChangeCallback({ field, operator: value });
+
+        if (!getColumnProp('showApplyButton')) {
+            props.onFilterApply();
+        }
+    };
+
+    const onMenuMatchModeChange = (value, index) => {
+        const filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
+        let filters = { ...props.filters };
+        let filterField = filters[field];
+
+        if (props.display === 'menu' && ObjectUtils.isNotEmpty(filterField.constraints)) {
+            filterField.constraints[index].matchMode = value;
+        } else {
+            filterField.matchMode = value;
+        }
+
+        props.onFilterChange(filters);
+        filterMatchModeChangeCallback && filterMatchModeChangeCallback({ field, matchMode: value, index: index });
+
+        if (!getColumnProp('showApplyButton')) {
+            props.onFilterApply();
+        }
+    };
+
+    const addConstraint = () => {
+        const filterConstraintAddCallback = getColumnProp('onFilterConstraintAdd');
+        const defaultConstraint = getDefaultConstraint();
+        let filters = { ...props.filters };
+        let newConstraint = { value: null, matchMode: defaultConstraint.matchMode };
+
+        filters[field].constraints.push(newConstraint);
+        filterConstraintAddCallback && filterConstraintAddCallback({ field, constraint: newConstraint });
+        props.onFilterChange(filters);
+
+        if (!getColumnProp('showApplyButton')) {
+            props.onFilterApply();
+        }
+    };
+
+    const removeConstraint = (index) => {
+        const filterConstraintRemoveCallback = getColumnProp('onFilterConstraintRemove');
+        let filters = { ...props.filters };
+        let removedConstraint = filters[field].constraints.splice(index, 1);
+
+        filterConstraintRemoveCallback && filterConstraintRemoveCallback({ field, constraint: removedConstraint });
+        props.onFilterChange(filters);
+
+        if (!getColumnProp('showApplyButton')) {
+            props.onFilterApply();
+        }
+    };
+
+    const findNextItem = (item) => {
+        const nextItem = item.nextElementSibling;
+
+        return nextItem ? (DomHandler.getAttribute(nextItem, 'data-p-column-filter-separator') === true ? findNextItem(nextItem) : nextItem) : item.parentElement.firstElementChild;
+    };
+
+    const findPrevItem = (item) => {
+        const prevItem = item.previousElementSibling;
+
+        return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-column-filter-separator') === true ? findPrevItem(prevItem) : prevItem) : item.parentElement.lastElementChild;
+    };
+
+    const hide = () => {
+        setOverlayVisibleState(false);
+    };
+
+    const onContentClick = (event) => {
+        selfClick.current = true;
+
+        OverlayService.emit('overlay-click', {
+            originalEvent: event,
+            target: overlayRef.current
+        });
+    };
+
+    const onContentMouseDown = () => {
+        selfClick.current = true;
+    };
+
+    const onOverlayEnter = () => {
+        ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+        DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+        DomHandler.alignOverlay(overlayRef.current, iconRef.current, (context && context.appendTo) || PrimeReact.appendTo, false);
+
+        overlayEventListener.current = (e) => {
+            if (!isOutsideClicked(e.target)) {
+                selfClick.current = true;
+            }
+        };
+
+        OverlayService.on('overlay-click', overlayEventListener.current);
+    };
+
+    const onOverlayEntered = () => {
+        bindOverlayListener();
+    };
+
+    const onOverlayExit = () => {
+        onOverlayHide();
+    };
+
+    const onOverlayExited = () => {
+        ZIndexUtils.clear(overlayRef.current);
+    };
+
+    const onOverlayHide = () => {
+        unbindOverlayListener();
+        OverlayService.off('overlay-click', overlayEventListener.current);
+        overlayEventListener.current = null;
+        selfClick.current = false;
+    };
+
+    const fieldConstraints = () => {
+        return filterModel ? filterModel.constraints || [filterModel] : [];
+    };
+
+    const operator = () => {
+        return filterModel.operator;
+    };
+
+    const operatorOptions = () => {
+        return [
+            { label: localeOption('matchAll'), value: FilterOperator.AND },
+            { label: localeOption('matchAny'), value: FilterOperator.OR }
+        ];
+    };
+
+    const filterLabel = () => {
+        return localeOption('filter');
+    };
+
+    const noFilterLabel = () => {
+        return localeOption('noFilter');
+    };
+
+    const removeRuleButtonLabel = () => {
+        return localeOption('removeRule');
+    };
+
+    const addRuleButtonLabel = () => {
+        return localeOption('addRule');
+    };
+
+    const clearButtonLabel = () => {
+        return localeOption('clear');
+    };
+
+    const applyButtonLabel = () => {
+        return localeOption('apply');
+    };
+
+    const filterCallback = (value, index = 0) => {
+        let filters = { ...props.filters };
+        let meta = filters[field];
+
+        props.display === 'menu' && meta && meta.operator ? (filters[field].constraints[index].value = value) : (filters[field].value = value);
+        props.onFilterChange(filters);
+    };
+
+    const filterApplyCallback = (...args) => {
+        args && filterCallback(args[0], args[1]);
+
+        props.onFilterApply();
+    };
+
+    useUpdateEffect(() => {
+        if (props.display === 'menu' && overlayVisibleState) {
+            DomHandler.alignOverlay(overlayRef.current, iconRef.current, (context && context.appendTo) || PrimeReact.appendTo, false);
+        }
+    });
+
+    useMountEffect(() => {
+        if (!overlayId.current) {
+            overlayId.current = UniqueComponentId();
+        }
+    });
+
+    useUnmountEffect(() => {
+        if (overlayEventListener.current) {
+            OverlayService.off('overlay-click', overlayEventListener.current);
+            overlayEventListener.current = null;
+        }
+
+        if (overlayRef.current) {
+            ZIndexUtils.clear(overlayRef.current);
+            onOverlayHide();
+        }
+    });
+
+    const createFilterElement = (model, index) => {
+        const value = model ? model.value : null;
+
+        return getColumnProp('filterElement') ? (
+            ObjectUtils.getJSXElement(getColumnProp('filterElement'), { field, index, filterModel: model, value, filterApplyCallback, filterCallback })
+        ) : (
+            <InputText
+                type={getColumnProp('filterType')}
+                value={value || ''}
+                onChange={(e) => onInputChange(e, index)}
+                onKeyDown={(e) => onInputKeydown(e, index)}
+                className="p-column-filter"
+                placeholder={getColumnProp('filterPlaceholder')}
+                maxLength={getColumnProp('filterMaxLength')}
+                aria-label={getColumnProp('filterPlaceholder')}
+                unstyled={props.unstyled}
+                __parentMetadata={{ parent: props.metaData }}
+            />
+        );
+    };
+
+    const createRowFilterElement = () => {
+        if (props.display === 'row') {
+            const content = createFilterElement(filterModel, 0);
+            const filterInputProps = mergeProps(
+                {
+                    className: cx('filterInput')
+                },
+                getColumnPTOptions('filterInput')
+            );
+
+            return <div {...filterInputProps}>{content}</div>;
+        }
+
+        return null;
+    };
+
+    const createMenuFilterElement = (fieldConstraint, index) => {
+        return props.display === 'menu' ? createFilterElement(fieldConstraint, index) : null;
+    };
+
+    const createMenuButton = () => {
+        if (!isShowMenuButton()) {
+            return null;
+        }
+
+        const filterIconProps = mergeProps(
+            {
+                'aria-hidden': true
+            },
+            getColumnPTOptions('filterIcon')
+        );
+        const icon = props.filterIcon || <FilterIcon {...filterIconProps} />;
+        const columnFilterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
+
+        const label = overlayVisibleState ? ariaLabel('hideFilterMenu') : ariaLabel('showFilterMenu');
+        const filterMenuButtonProps = mergeProps(
+            {
+                type: 'button',
+                className: cx('filterMenuButton', { overlayVisibleState, hasFilter }),
+                'aria-haspopup': true,
+                'aria-expanded': overlayVisibleState,
+                'aria-label': label,
+                'aria-controls': overlayVisibleState ? overlayId.current : undefined,
+                onClick: (e) => toggleMenu(e),
+                onKeyDown: (e) => onToggleButtonKeyDown(e)
+            },
+            getColumnPTOptions('filterMenuButton', {
+                context: {
+                    active: hasFilter()
+                }
+            })
+        );
+
+        return (
+            <button ref={iconRef} {...filterMenuButtonProps}>
+                {columnFilterIcon}
+                <Ripple />
+            </button>
+        );
+    };
+
+    const createClearButton = () => {
+        if (!isShowClearButton()) {
+            return null;
+        }
+
+        const filterClearIconProps = mergeProps(
+            {
+                'aria-hidden': true
+            },
+            getColumnPTOptions('filterClearIcon')
+        );
+        const icon = props.filterClearIcon || <FilterSlashIcon {...filterClearIconProps} />;
+        const filterClearIcon = IconUtils.getJSXIcon(icon, { ...filterClearIconProps }, { props });
+        const clearLabel = clearButtonLabel();
+        const headerFilterClearButtonProps = mergeProps(
+            {
+                className: cx('headerFilterClearButton', { hasRowFilter }),
+                type: 'button',
+                onClick: (e) => clearFilter(e),
+                'aria-label': clearLabel
+            },
+            getColumnPTOptions('headerFilterClearButton', {
+                context: {
+                    hidden: hasRowFilter()
+                }
+            })
+        );
+
+        return (
+            <button {...headerFilterClearButtonProps}>
+                {filterClearIcon}
+                <Ripple />
+            </button>
+        );
+    };
+
+    const createRowItems = () => {
+        if (isShowMatchModes()) {
+            const _matchModes = matchModes();
+            const _noFilterLabel = noFilterLabel();
+            const filterSeparatorProps = mergeProps(
+                {
+                    className: cx('filterSeparator'),
+                    'data-p-column-filter-separator': true
+                },
+                getColumnPTOptions('filterSeparator')
+            );
+
+            const filterRowItemProps = mergeProps(
+                {
+                    className: cx('filterRowItem', { isRowMatchModeSelected, isShowMatchModes }),
+                    onClick: (e) => clearFilter(e),
+                    onKeyDown: (e) => onRowMatchModeKeyDown(e, null, true)
+                },
+                getColumnPTOptions('filterRowItem')
+            );
+
+            const filterRowItemsProps = mergeProps(
+                {
+                    className: cx('filterRowItems')
+                },
+                getColumnPTOptions('filterRowItems')
+            );
+
+            return (
+                <ul {...filterRowItemsProps}>
+                    {_matchModes.map((matchMode, i) => {
+                        const { value, label } = matchMode;
+                        const tabIndex = i === 0 ? 0 : null;
+                        const filterRowItemProps = mergeProps(
+                            {
+                                className: cx('filterRowItem', { isRowMatchModeSelected, isShowMatchModes, value }),
+                                onClick: () => onRowMatchModeChange(value),
+                                onKeyDown: (e) => onRowMatchModeKeyDown(e, matchMode),
+                                tabIndex
+                            },
+                            getColumnPTOptions('filterRowItem', {
+                                context: {
+                                    highlighted: matchMode && isRowMatchModeSelected(value)
+                                }
+                            })
+                        );
+
+                        return (
+                            <li {...filterRowItemProps} key={label}>
+                                {label}
+                            </li>
+                        );
+                    })}
+                    <li {...filterSeparatorProps} />
+                    <li {...filterRowItemProps}>{_noFilterLabel}</li>
+                </ul>
+            );
+        }
+
+        return null;
+    };
+
+    const createOperator = () => {
+        if (isShowOperator()) {
+            const options = operatorOptions();
+            const value = operator();
+            const filterOperatorProps = mergeProps(
+                {
+                    className: cx('filterOperator')
+                },
+                getColumnPTOptions('filterOperator')
+            );
+
+            return (
+                <div {...filterOperatorProps}>
+                    <Dropdown
+                        options={options}
+                        value={value}
+                        onChange={onOperatorChange}
+                        className="p-column-filter-operator-dropdown"
+                        pt={getColumnPTOptions('filterOperatorDropdown')}
+                        unstyled={props.unstyled}
+                        __parentMetadata={{ parent: props.metaData }}
+                        aria-label={ariaLabel('filterOperator')}
+                    />
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    const createMatchModeDropdown = (constraint, index) => {
+        if (isShowMatchModes()) {
+            const options = matchModes();
+
+            return (
+                <Dropdown
+                    options={options}
+                    value={constraint.matchMode}
+                    onChange={(e) => onMenuMatchModeChange(e.value, index)}
+                    className="p-column-filter-matchmode-dropdown"
+                    pt={getColumnPTOptions('filterMatchModeDropdown')}
+                    unstyled={props.unstyled}
+                    __parentMetadata={{ parent: props.metaData }}
+                    aria-label={ariaLabel('filterConstraint')}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    const createRemoveButton = (index) => {
+        if (showRemoveIcon()) {
+            const removeRuleLabel = removeRuleButtonLabel();
+
+            return (
+                <Button
+                    type="button"
+                    icon={props.filterRemoveIcon || <TrashIcon />}
+                    className="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
+                    onClick={() => removeConstraint(index)}
+                    label={removeRuleLabel}
+                    pt={getColumnPTOptions('filterRemoveButton')}
+                    unstyled={props.unstyled}
+                    __parentMetadata={{ parent: props.metaData }}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    const createConstraints = () => {
+        const _fieldConstraints = fieldConstraints();
+        const filterConstraintsProps = mergeProps(
+            {
+                className: cx('filterConstraints')
+            },
+            getColumnPTOptions('filterConstraints')
+        );
+
+        const filterConstraintProps = mergeProps(
+            {
+                className: cx('filterConstraint')
+            },
+            getColumnPTOptions('filterConstraint')
+        );
+
+        return (
+            <div {...filterConstraintsProps}>
+                {_fieldConstraints.map((fieldConstraint, i) => {
+                    const matchModeDropdown = createMatchModeDropdown(fieldConstraint, i);
+                    const menuFilterElement = createMenuFilterElement(fieldConstraint, i);
+                    const removeButton = createRemoveButton(i);
+                    const filterRemoveProps = mergeProps(getColumnPTOptions('filterRemove'));
+
+                    return (
+                        <div {...filterConstraintProps} key={i}>
+                            {matchModeDropdown}
+                            {menuFilterElement}
+                            <div {...filterRemoveProps}>{removeButton}</div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    const createAddRule = () => {
+        if (isShowAddConstraint()) {
+            const addRuleLabel = addRuleButtonLabel();
+            const filterAddRuleProps = mergeProps(
+                {
+                    className: cx('filterAddRule')
+                },
+                getColumnPTOptions('filterAddRule')
+            );
+
+            return (
+                <div {...filterAddRuleProps}>
+                    <Button
+                        type="button"
+                        label={addRuleLabel}
+                        icon={props.filterAddIcon || <PlusIcon />}
+                        className="p-column-filter-add-button p-button-text p-button-sm"
+                        onClick={addConstraint}
+                        pt={getColumnPTOptions('filterAddRuleButton')}
+                        unstyled={props.unstyled}
+                        __parentMetadata={{ parent: props.metaData }}
+                    />
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    const createFilterClearButton = () => {
+        if (getColumnProp('showClearButton')) {
+            if (!getColumnProp('filterClear')) {
+                const clearLabel = clearButtonLabel();
+
+                return <Button type="button" outlined size="small" onClick={clearFilter} label={clearLabel} pt={getColumnPTOptions('filterClearButton')} unstyled={props.unstyled} __parentMetadata={{ parent: props.metaData }} />;
+            }
+
+            return ObjectUtils.getJSXElement(getColumnProp('filterClear'), { field, filterModel, filterClearCallback: clearFilter });
+        }
+
+        return null;
+    };
+
+    const createFilterApplyButton = () => {
+        if (getColumnProp('showApplyButton')) {
+            if (!getColumnProp('filterApply')) {
+                const applyLabel = applyButtonLabel();
+
+                return <Button type="button" size="small" onClick={applyFilter} label={applyLabel} pt={getColumnPTOptions('filterApplyButton')} unstyled={props.unstyled} __parentMetadata={{ parent: props.metaData }} />;
+            }
+
+            return ObjectUtils.getJSXElement(getColumnProp('filterApply'), { field, filterModel, filterApplyCallback: applyFilter });
+        }
+
+        return null;
+    };
+
+    const createButtonBar = () => {
+        const clearButton = createFilterClearButton();
+        const applyButton = createFilterApplyButton();
+        const filterButtonbarProps = mergeProps(
+            {
+                className: cx('filterButtonBar')
+            },
+            getColumnPTOptions('filterButtonBar')
+        );
+
+        return (
+            <div {...filterButtonbarProps}>
+                {clearButton}
+                {applyButton}
+            </div>
+        );
+    };
+
+    const createItems = () => {
+        const operator = createOperator();
+        const constraints = createConstraints();
+        const addRule = createAddRule();
+        const buttonBar = createButtonBar();
+
+        return (
+            <>
+                {operator}
+                {constraints}
+                {addRule}
+                {buttonBar}
+            </>
+        );
+    };
+
+    const createOverlay = () => {
+        const style = getColumnProp('filterMenuStyle');
+        const filterHeader = ObjectUtils.getJSXElement(getColumnProp('filterHeader'), { field, filterModel, filterApplyCallback });
+        const filterFooter = ObjectUtils.getJSXElement(getColumnProp('filterFooter'), { field, filterModel, filterApplyCallback });
+        const items = props.display === 'row' ? createRowItems() : createItems();
+        const filterOverlayProps = mergeProps(
+            {
+                style,
+                className: cx('filterOverlay', { columnFilterProps: props, context, getColumnProp }),
+                onKeyDown: (e) => onContentKeyDown(e),
+                onClick: (e) => onContentClick(e),
+                onMouseDown: (e) => onContentMouseDown(e),
+                id: overlayId.current,
+                'aria-modal': overlayVisibleState,
+                role: 'dialog'
+            },
+            getColumnPTOptions('filterOverlay')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                in: overlayVisibleState,
+                timeout: { enter: 120, exit: 100 },
+                unmountOnExit: true,
+                onEnter: onOverlayEnter,
+                onEntered: onOverlayEntered,
+                onExit: onOverlayExit,
+                onExited: onOverlayExited
+            },
+            getColumnPTOptions('transition')
+        );
+
+        return (
+            <Portal>
+                <CSSTransition nodeRef={overlayRef} {...transitionProps}>
+                    <div ref={overlayRef} {...filterOverlayProps}>
+                        <FocusTrap autoFocus>
+                            {filterHeader}
+                            {items}
+                            {filterFooter}
+                        </FocusTrap>
+                    </div>
+                </CSSTransition>
+            </Portal>
+        );
+    };
+
+    const rowFilterElement = createRowFilterElement();
+    const menuButton = createMenuButton();
+    const clearButton = createClearButton();
+    const overlay = createOverlay();
+    const columnFilter = mergeProps(
+        {
+            className: cx('columnFilter', { columnFilterProps: props })
+        },
+        getColumnPTOptions('columnFilter')
+    );
+
+    return (
+        <div {...columnFilter}>
+            {rowFilterElement}
+            {menuButton}
+            {clearButton}
+            {overlay}
+        </div>
+    );
+});
+
+ColumnFilter.displayName = 'ColumnFilter';
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
new file mode 100644
index 0000000000..f2d9494c93
--- /dev/null
+++ b/components/lib/datatable/DataTable.js
@@ -0,0 +1,2116 @@
+import * as React from 'react';
+import { getStorage } from '../../utils/utils';
+import PrimeReact, { FilterMatchMode, FilterOperator, FilterService, PrimeReactContext } from '../api/Api';
+import { ColumnBase } from '../column/ColumnBase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ArrowDownIcon } from '../icons/arrowdown';
+import { ArrowUpIcon } from '../icons/arrowup';
+import { SpinnerIcon } from '../icons/spinner';
+import { Paginator } from '../paginator/Paginator';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { VirtualScroller } from '../virtualscroller/VirtualScroller';
+import { DataTableBase } from './DataTableBase';
+import { TableBody } from './TableBody';
+import { TableFooter } from './TableFooter';
+import { TableHeader } from './TableHeader';
+
+export const DataTable = React.forwardRef((inProps, ref) => {
+    const context = React.useContext(PrimeReactContext);
+    const mergeProps = useMergeProps();
+    const props = DataTableBase.getProps(inProps, context);
+    const [firstState, setFirstState] = React.useState(props.first);
+    const [rowsState, setRowsState] = React.useState(props.rows);
+    const [sortFieldState, setSortFieldState] = React.useState(props.sortField);
+    const [sortOrderState, setSortOrderState] = React.useState(props.sortOrder);
+    const [multiSortMetaState, setMultiSortMetaState] = React.useState(props.multiSortMeta);
+    const [filtersState, setFiltersState] = React.useState(props.filters);
+    const [columnOrderState, setColumnOrderState] = React.useState([]);
+    const [groupRowsSortMetaState, setGroupRowsSortMetaState] = React.useState(null);
+    const [editingMetaState, setEditingMetaState] = React.useState({});
+    const [frozenEditingMetaState, setFrozenEditingMetaState] = React.useState({});
+    const [d_rowsState, setD_rowsState] = React.useState(props.rows);
+    const [d_filtersState, setD_filtersState] = React.useState({});
+    const metaData = {
+        props,
+        state: {
+            first: firstState,
+            rows: rowsState,
+            sortField: sortFieldState,
+            sortOrder: sortOrderState,
+            multiSortMeta: multiSortMetaState,
+            filters: filtersState,
+            columnOrder: columnOrderState,
+            groupRowsSortMeta: groupRowsSortMetaState,
+            editingMeta: editingMetaState,
+            frozenEditingMeta: frozenEditingMetaState,
+            d_rows: d_rowsState,
+            d_filters: d_filtersState
+        },
+        context: {
+            scrollable: props.scrollable
+        }
+    };
+    const ptCallbacks = DataTableBase.setMetaData(metaData);
+
+    useHandleStyle(DataTableBase.css.styles, ptCallbacks.isUnstyled, { name: 'datatable' });
+    const attributeSelector = React.useRef('');
+    const elementRef = React.useRef(null);
+    const tableRef = React.useRef(null);
+    const wrapperRef = React.useRef(null);
+    const bodyRef = React.useRef(null);
+    const frozenBodyRef = React.useRef(null);
+    const virtualScrollerRef = React.useRef(null);
+    const reorderIndicatorUpRef = React.useRef(null);
+    const reorderIndicatorDownRef = React.useRef(null);
+    const colReorderIconWidth = React.useRef(null);
+    const colReorderIconHeight = React.useRef(null);
+    const resizeHelperRef = React.useRef(null);
+    const draggedColumnElement = React.useRef(null);
+    const draggedColumn = React.useRef(null);
+    const dropPosition = React.useRef(null);
+    const styleElement = React.useRef(null);
+    const responsiveStyleElement = React.useRef(null);
+    const beforeResizeStyleElement = React.useRef(null);
+
+    const columnWidthsState = React.useRef(null);
+    const tableWidthState = React.useRef(null);
+    const resizeColumn = React.useRef(null);
+    const resizeColumnElement = React.useRef(null);
+    const columnResizing = React.useRef(false);
+    const lastResizeHelperX = React.useRef(null);
+    const columnSortable = React.useRef(false);
+    const columnSortFunction = React.useRef(null);
+    const columnField = React.useRef(null);
+    const filterTimeout = React.useRef(null);
+
+    if (props.rows !== d_rowsState && !props.onPage) {
+        setRowsState(props.rows);
+        setD_rowsState(props.rows);
+    }
+
+    const columnResizeStartListener = (event) => columnResizing.current && onColumnResize(event);
+
+    const columnResizeEndListener = () => columnResizing.current && ((columnResizing.current = false), onColumnResizeEnd());
+
+    const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({
+        type: 'mousemove',
+        listener: columnResizeStartListener
+    });
+
+    const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({
+        type: 'mouseup',
+        listener: columnResizeEndListener
+    });
+
+    const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({
+        type: 'touchmove',
+        listener: columnResizeStartListener
+    });
+
+    const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({
+        type: 'touchend',
+        listener: columnResizeEndListener
+    });
+
+    const isCustomStateStorage = () => {
+        return props.stateStorage === 'custom';
+    };
+
+    const isStateful = () => {
+        return props.stateKey != null || isCustomStateStorage();
+    };
+
+    const isVirtualScrollerDisabled = () => {
+        return ObjectUtils.isEmpty(props.virtualScrollerOptions) || !props.scrollable;
+    };
+
+    const isEquals = (data1, data2) => {
+        return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
+    };
+
+    const hasFilter = () => {
+        return ObjectUtils.isNotEmpty(getFilters()) || props.globalFilter;
+    };
+
+    const getFirst = () => {
+        return props.onPage ? props.first : firstState;
+    };
+
+    const getRows = () => {
+        return props.onPage ? props.rows : rowsState;
+    };
+
+    const getSortField = () => {
+        return props.onSort ? props.sortField : sortFieldState;
+    };
+
+    const getSortOrder = () => {
+        return props.onSort ? props.sortOrder : sortOrderState;
+    };
+
+    const getMultiSortMeta = () => {
+        return (props.onSort ? props.multiSortMeta : multiSortMetaState) || [];
+    };
+
+    const getFilters = () => {
+        return props.onFilter ? props.filters : filtersState;
+    };
+
+    const getColumnProp = (column, name) => {
+        return ColumnBase.getCProp(column, name);
+    };
+
+    const getColumns = (ignoreReorderable) => {
+        const columns = React.Children.toArray(props.children);
+
+        if (!columns) {
+            return null;
+        }
+
+        if (!ignoreReorderable && props.reorderableColumns && columnOrderState) {
+            let orderedColumns = columnOrderState.reduce((arr, columnKey) => {
+                const column = findColumnByKey(columns, columnKey);
+
+                column && arr.push(column);
+
+                return arr;
+            }, []);
+
+            return [...orderedColumns, ...columns.filter((col) => orderedColumns.indexOf(col) < 0)];
+        }
+
+        return columns;
+    };
+
+    const saveState = () => {
+        const state = {};
+
+        if (props.paginator) {
+            state.first = getFirst();
+            state.rows = getRows();
+        }
+
+        const sortField = getSortField();
+
+        if (sortField) {
+            state.sortField = sortField;
+            state.sortOrder = getSortOrder();
+        }
+
+        const multiSortMeta = getMultiSortMeta();
+
+        if (multiSortMeta) {
+            state.multiSortMeta = multiSortMeta;
+        }
+
+        if (hasFilter()) {
+            state.filters = getFilters();
+        }
+
+        if (props.resizableColumns) {
+            saveColumnWidths(state);
+        }
+
+        if (props.reorderableColumns) {
+            state.columnOrder = columnOrderState;
+        }
+
+        if (props.expandedRows) {
+            state.expandedRows = props.expandedRows;
+        }
+
+        if (props.selection && props.onSelectionChange) {
+            state.selection = props.selection;
+        }
+
+        if (isCustomStateStorage()) {
+            if (props.customSaveState) {
+                props.customSaveState(state);
+            }
+        } else {
+            const storage = getStorage(props.stateStorage);
+
+            if (ObjectUtils.isNotEmpty(state)) {
+                storage.setItem(props.stateKey, JSON.stringify(state));
+            }
+        }
+
+        if (props.onStateSave) {
+            props.onStateSave(state);
+        }
+    };
+
+    const clearState = () => {
+        const storage = getStorage(props.stateStorage);
+
+        if (storage && props.stateKey) {
+            storage.removeItem(props.stateKey);
+        }
+    };
+
+    const restoreState = () => {
+        let restoredState = {};
+
+        if (isCustomStateStorage()) {
+            if (props.customRestoreState) {
+                restoredState = props.customRestoreState();
+            }
+        } else {
+            const storage = getStorage(props.stateStorage);
+            const stateString = storage.getItem(props.stateKey);
+            const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
+
+            const reviver = function (key, value) {
+                return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
+            };
+
+            if (stateString) {
+                restoredState = JSON.parse(stateString, reviver);
+            }
+        }
+
+        _restoreState(restoredState);
+    };
+
+    const restoreTableState = (restoredState) => {
+        _restoreState(restoredState);
+    };
+
+    const _restoreState = (restoredState = {}) => {
+        if (ObjectUtils.isNotEmpty(restoredState)) {
+            if (props.paginator) {
+                if (props.onPage) {
+                    const getOnPageParams = (first, rows) => {
+                        const totalRecords = getTotalRecords(processedData());
+                        const pageCount = Math.ceil(totalRecords / rows) || 1;
+                        const page = Math.floor(first / rows);
+
+                        return { first, rows, page, pageCount };
+                    };
+
+                    props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
+                } else {
+                    setFirstState(restoredState.first);
+                    setRowsState(restoredState.rows);
+                }
+            }
+
+            if (restoredState.sortField) {
+                if (props.onSort) {
+                    props.onSort(
+                        createEvent({
+                            sortField: restoredState.sortField,
+                            sortOrder: restoredState.sortOrder
+                        })
+                    );
+                } else {
+                    setSortFieldState(restoredState.sortField);
+                    setSortOrderState(restoredState.sortOrder);
+                }
+            }
+
+            if (restoredState.multiSortMeta) {
+                if (props.onSort) {
+                    props.onSort(
+                        createEvent({
+                            multiSortMeta: restoredState.multiSortMeta
+                        })
+                    );
+                } else {
+                    const lastMeta = restoredState.multiSortMeta[restoredState.multiSortMeta.length - 1];
+                    const field = lastMeta && lastMeta.field ? lastMeta.field : null;
+
+                    if (field) {
+                        const sortColumn = findColumnByKey(getColumns(), field);
+
+                        if (sortColumn) {
+                            const sortFunction = getColumnProp(sortColumn, 'sortFunction');
+                            const sortable = getColumnProp(sortColumn, 'sortable');
+
+                            if (sortFunction && sortable) {
+                                columnSortFunction.current = sortFunction;
+                                columnSortable.current = sortable;
+                                columnField.current = field;
+                            }
+                        }
+                    }
+
+                    setMultiSortMetaState(restoredState.multiSortMeta);
+                }
+            }
+
+            if (restoredState.filters) {
+                setD_filtersState(cloneFilters(restoredState.filters));
+
+                if (props.onFilter) {
+                    props.onFilter(
+                        createEvent({
+                            filters: restoredState.filters
+                        })
+                    );
+                } else {
+                    setFiltersState(cloneFilters(restoredState.filters));
+                }
+            }
+
+            if (props.resizableColumns) {
+                columnWidthsState.current = restoredState.columnWidths;
+                tableWidthState.current = restoredState.tableWidth;
+                restoreColumnWidths();
+            }
+
+            if (props.reorderableColumns) {
+                setColumnOrderState(restoredState.columnOrder);
+            }
+
+            if (restoredState.expandedRows && props.onRowToggle) {
+                props.onRowToggle({
+                    data: restoredState.expandedRows
+                });
+            }
+
+            if (restoredState.selection && props.onSelectionChange) {
+                props.onSelectionChange({
+                    value: restoredState.selection
+                });
+            }
+
+            if (props.onStateRestore) {
+                props.onStateRestore(restoredState);
+            }
+        }
+    };
+
+    const saveColumnWidths = (state) => {
+        let widths = [];
+        let headers = DomHandler.find(elementRef.current, '[data-pc-section="thead"] > tr > th');
+
+        headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
+        state.columnWidths = widths.join(',');
+
+        if (props.columnResizeMode === 'expand') {
+            state.tableWidth = DomHandler.getOuterWidth(tableRef.current) + 'px';
+        }
+    };
+
+    const addColumnWidthStyles = (widths) => {
+        createStyleElement();
+        let innerHTML = '';
+        let selector = `[data-pc-name="datatable"][${attributeSelector.current}] > [data-pc-section="wrapper"] ${isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]'} > [data-pc-section="table"]`;
+
+        widths.forEach((width, index) => {
+            let style = `width: ${width}px !important; max-width: ${width}px !important`;
+
+            innerHTML =
+                innerHTML +
+                `
+                ${selector} > [data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
+                ${selector} > [data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
+                ${selector} > [data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
+                    ${style}
+                }
+            `;
+        });
+
+        styleElement.current.innerHTML = innerHTML;
+    };
+
+    const restoreColumnWidths = () => {
+        if (columnWidthsState.current) {
+            let widths = columnWidthsState.current.split(',');
+
+            if (props.columnResizeMode === 'expand' && tableWidthState.current) {
+                tableRef.current.style.width = tableWidthState.current;
+                tableRef.current.style.minWidth = tableWidthState.current;
+            }
+
+            if (ObjectUtils.isNotEmpty(widths)) {
+                addColumnWidthStyles(widths);
+            }
+        }
+    };
+
+    const findParentHeader = (element) => {
+        if (element.nodeName === 'TH') {
+            return element;
+        }
+
+        let parent = element.parentElement;
+
+        while (parent.nodeName !== 'TH') {
+            parent = parent.parentElement;
+
+            if (!parent) {
+                break;
+            }
+        }
+
+        return parent;
+    };
+
+    const getGroupRowSortField = () => {
+        return props.sortMode === 'single' ? props.sortField : groupRowsSortMetaState ? groupRowsSortMetaState.field : null;
+    };
+
+    const getSelectableData = (val) => {
+        if (props.showSelectionElement || props.isDataSelectable) {
+            return val.filter((data, index) => {
+                let isSelectable = true;
+
+                if (props.showSelectionElement) {
+                    isSelectable = props.showSelectionElement({ rowIndex: index, props });
+                }
+
+                if (props.isDataSelectable && isSelectable) {
+                    isSelectable = props.isDataSelectable({ data, index });
+                }
+
+                return isSelectable;
+            });
+        }
+
+        return val;
+    };
+
+    const allRowsSelected = (processedData) => {
+        if (props.onSelectAllChange) {
+            return props.selectAll;
+        }
+
+        const data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
+        const val = ObjectUtils.isNotEmpty(props.frozenValue) ? [...props.frozenValue, ...data] : data;
+        const selectableVal = getSelectableData(val);
+
+        return ObjectUtils.isNotEmpty(selectableVal) && props.selection && selectableVal.every((sv) => ObjectUtils.isArray(props.selection) && props.selection.some((s) => isEquals(s, sv)));
+    };
+
+    const getSelectionModeInColumn = (columns) => {
+        if (columns) {
+            const col = columns.find((c) => !!getColumnProp(c, 'selectionMode'));
+
+            return col ? getColumnProp(col, 'selectionMode') : null;
+        }
+
+        return null;
+    };
+
+    const findColumnByKey = (columns, key) => {
+        return ObjectUtils.isNotEmpty(columns) ? columns.find((col) => getColumnProp(col, 'columnKey') === key || getColumnProp(col, 'field') === key) : null;
+    };
+
+    const getTotalRecords = (data) => {
+        return props.lazy ? props.totalRecords : data ? data.length : 0;
+    };
+
+    const onEditingMetaChange = (e) => {
+        const { rowData, field, editingKey, rowIndex, editing } = e;
+        let editingMeta = { ...editingMetaState };
+        let meta = editingMeta[editingKey];
+
+        if (editing) {
+            !meta && (meta = editingMeta[editingKey] = { data: { ...rowData }, fields: [] });
+            meta.fields.push(field);
+        } else if (meta) {
+            const fields = meta.fields.filter((f) => f !== field);
+
+            !fields.length ? delete editingMeta[editingKey] : (meta.fields = fields);
+        }
+
+        setEditingMetaState(editingMeta);
+    };
+
+    const clearEditingMetaData = () => {
+        if (props.editMode && ObjectUtils.isNotEmpty(editingMetaState)) {
+            setEditingMetaState({});
+        }
+    };
+
+    const onFrozenEditingMetaChange = (e) => {
+        const { rowData, field, editingKey, editing } = e;
+        let frozenEditingMeta = { ...frozenEditingMetaState };
+        let meta = frozenEditingMeta[editingKey];
+
+        if (editing) {
+            !meta && (meta = frozenEditingMeta[editingKey] = { data: { ...rowData }, fields: [] });
+            meta.fields.push(field);
+        } else if (meta) {
+            const fields = meta.fields.filter((f) => f !== field);
+
+            !fields.length ? delete frozenEditingMeta[editingKey] : (meta.fields = fields);
+        }
+
+        setFrozenEditingMetaState(frozenEditingMeta);
+    };
+
+    const clearFrozenEditingMetaData = () => {
+        if (props.editMode && ObjectUtils.isNotEmpty(frozenEditingMetaState)) {
+            setFrozenEditingMetaState({});
+        }
+    };
+
+    const onColumnResizeStart = (e) => {
+        createBeforeResizeStyleElement();
+        const { originalEvent: event, column } = e;
+        const containerLeft = DomHandler.getOffset(elementRef.current).left;
+
+        resizeColumn.current = column;
+
+        resizeColumnElement.current = event.currentTarget.parentElement;
+
+        columnResizing.current = true;
+
+        lastResizeHelperX.current = (event.type === 'touchstart' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft;
+
+        bindColumnResizeEvents();
+    };
+
+    const onColumnResize = (event) => {
+        const containerLeft = DomHandler.getOffset(elementRef.current).left;
+
+        elementRef.current.setAttribute('data-p-unselectable-text', true);
+
+        resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
+        resizeHelperRef.current.style.top = 0 + 'px';
+
+        resizeHelperRef.current.style.left = (event.type === 'touchmove' ? event.changedTouches[0].clientX : event.pageX) - containerLeft + elementRef.current.scrollLeft + 'px';
+
+        resizeHelperRef.current.style.display = 'block';
+    };
+
+    const onColumnResizeEnd = () => {
+        let delta = resizeHelperRef.current.offsetLeft - lastResizeHelperX.current;
+        let columnWidth = resizeColumnElement.current.offsetWidth;
+        let newColumnWidth = columnWidth + delta;
+        let minWidth = resizeColumnElement.current.style.minWidth || 15;
+
+        if (columnWidth + delta > parseInt(minWidth, 10)) {
+            if (props.columnResizeMode === 'fit') {
+                let nextColumn = resizeColumnElement.current.nextElementSibling;
+                let nextColumnWidth = nextColumn.offsetWidth - delta;
+
+                if (newColumnWidth > 15 && nextColumnWidth > 15) {
+                    resizeTableCells(newColumnWidth, nextColumnWidth);
+                }
+            } else if (props.columnResizeMode === 'expand') {
+                const tableWidth = tableRef.current.offsetWidth + delta + 'px';
+
+                const updateTableWidth = (el) => {
+                    !!el && (el.style.width = el.style.minWidth = tableWidth);
+                };
+
+                // https://github.com/primefaces/primereact/issues/3970 Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
+                resizeTableCells(newColumnWidth);
+                updateTableWidth(tableRef.current);
+
+                if (!isVirtualScrollerDisabled()) {
+                    updateTableWidth(bodyRef.current);
+                    updateTableWidth(frozenBodyRef.current);
+
+                    if (wrapperRef.current) {
+                        updateTableWidth(DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"] > table > tbody'));
+                    }
+                }
+            }
+
+            if (props.onColumnResizeEnd) {
+                props.onColumnResizeEnd({
+                    element: resizeColumnElement.current,
+                    column: resizeColumn.current,
+                    delta: delta
+                });
+            }
+
+            if (isStateful()) {
+                saveState();
+            }
+        }
+
+        resizeHelperRef.current.style.display = 'none';
+        resizeColumn.current = null;
+        resizeColumnElement.current = null;
+        elementRef.current.setAttribute('data-p-unselectable-text', 'true');
+        destroyBeforeResizeStyleElement();
+        unbindColumnResizeEvents();
+    };
+
+    const resizeTableCells = (newColumnWidth, nextColumnWidth) => {
+        let widths = [];
+        let colIndex = DomHandler.index(resizeColumnElement.current);
+        let headers = DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
+
+        headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
+
+        destroyStyleElement();
+        createStyleElement();
+
+        let innerHTML = '';
+        let selector = `[data-pc-name="datatable"][${attributeSelector.current}] > [data-pc-section="wrapper"] ${isVirtualScrollerDisabled() ? '' : '> [data-pc-name="virtualscroller"]'} > [data-pc-section="table"]`;
+
+        widths.forEach((width, index) => {
+            let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
+            let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
+
+            innerHTML =
+                innerHTML +
+                `
+                 ${selector} > [data-pc-section="thead"] > tr > th:nth-child(${index + 1}),
+                ${selector} > [data-pc-section="tbody"] > tr > td:nth-child(${index + 1}),
+                ${selector} > [data-pc-section="tfoot"] > tr > td:nth-child(${index + 1}) {
+                    ${style}
+                }
+            `;
+        });
+
+        styleElement.current.innerHTML = innerHTML;
+    };
+
+    const bindColumnResizeEvents = () => {
+        bindDocumentMouseMoveListener();
+        bindDocumentMouseUpListener();
+        bindDocumentTouchMoveListener();
+        bindDocumentTouchEndListener();
+    };
+
+    const unbindColumnResizeEvents = () => {
+        unbindDocumentMouseMoveListener();
+        unbindDocumentMouseUpListener();
+        unbindDocumentTouchMoveListener();
+        unbindDocumentTouchEndListener();
+    };
+
+    const onColumnHeaderMouseDown = (e) => {
+        DomHandler.clearSelection();
+
+        const { originalEvent: event, column } = e;
+
+        if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
+            if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.getAttribute(event.target, '[data-pc-section="columnresizer"]')) {
+                event.currentTarget.draggable = false;
+            } else {
+                event.currentTarget.draggable = true;
+            }
+        }
+    };
+
+    const onColumnHeaderCheckboxChange = (e, processedData) => {
+        if (props.onSelectAllChange) {
+            props.onSelectAllChange(e);
+        } else {
+            const { originalEvent, checked } = e;
+            const data = props.selectionPageOnly ? dataToRender(processedData) : processedData;
+            let selection = props.selectionPageOnly && props.selection ? props.selection.filter((s) => !data.some((d) => isEquals(s, d))) : [];
+
+            if (checked) {
+                selection = ObjectUtils.isNotEmpty(props.frozenValue) ? [...selection, ...props.frozenValue, ...data] : [...selection, ...data];
+                selection = getSelectableData(selection);
+
+                props.onAllRowsSelect && props.onAllRowsSelect({ originalEvent, data: selection, type: 'all' });
+            } else {
+                props.onAllRowsUnselect && props.onAllRowsUnselect({ originalEvent, data: selection, type: 'all' });
+            }
+
+            if (props.onSelectionChange) {
+                props.onSelectionChange({
+                    originalEvent,
+                    value: selection,
+                    type: 'all'
+                });
+            }
+        }
+    };
+
+    const onColumnHeaderDragStart = (e) => {
+        const { originalEvent: event, column } = e;
+
+        if (columnResizing.current) {
+            event.preventDefault();
+
+            return;
+        }
+
+        if (!props.reorderableColumns) {
+            return;
+        }
+
+        colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
+        colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
+
+        draggedColumn.current = column;
+        draggedColumnElement.current = findParentHeader(event.currentTarget);
+        event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
+    };
+
+    const onColumnHeaderDragOver = (e) => {
+        const { originalEvent: event, column } = e;
+        const dropHeader = findParentHeader(event.currentTarget);
+
+        if (props.reorderableColumns && draggedColumnElement.current && dropHeader && !getColumnProp(column, 'frozen')) {
+            event.preventDefault();
+
+            if (draggedColumnElement.current !== dropHeader) {
+                const containerOffset = DomHandler.getOffset(elementRef.current);
+                const dropHeaderOffset = DomHandler.getOffset(dropHeader);
+                const targetLeft = dropHeaderOffset.left - containerOffset.left;
+                const columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
+                let dragIndex = DomHandler.index(draggedColumnElement.current);
+                let dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
+
+                reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight.current - 1) + 'px';
+                reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
+
+                if (event.pageX > columnCenter && dragIndex < dropIndex) {
+                    reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+                    reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+                    dropPosition.current = 1;
+                } else if (dragIndex > dropIndex) {
+                    reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+                    reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+                    dropPosition.current = -1;
+                }
+
+                reorderIndicatorUpRef.current.style.display = 'block';
+                reorderIndicatorDownRef.current.style.display = 'block';
+            }
+        }
+    };
+
+    const onColumnHeaderDragLeave = (e) => {
+        const { originalEvent: event } = e;
+
+        if (props.reorderableColumns && draggedColumnElement.current) {
+            event.preventDefault();
+            reorderIndicatorUpRef.current.style.display = 'none';
+            reorderIndicatorDownRef.current.style.display = 'none';
+        }
+    };
+
+    const onColumnHeaderDrop = (e) => {
+        const { originalEvent: event, column } = e;
+
+        event.preventDefault();
+
+        if (draggedColumnElement.current) {
+            let dragIndex = DomHandler.index(draggedColumnElement.current);
+            let dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
+            let allowDrop = dragIndex !== dropIndex;
+
+            if (allowDrop && ((dropIndex - dragIndex === 1 && dropPosition.current === -1) || (dragIndex - dropIndex === 1 && dropPosition.current === 1))) {
+                allowDrop = false;
+            }
+
+            if (allowDrop) {
+                let columns = getColumns();
+                let isSameColumn = (col1, col2) => (getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1.props, col2.props, 'columnKey') : ObjectUtils.equals(col1.props, col2.props, 'field'));
+                let dragColIndex = columns.findIndex((child) => isSameColumn(child, draggedColumn.current));
+                let dropColIndex = columns.findIndex((child) => isSameColumn(child, column));
+                let widths = [];
+                let headers = DomHandler.find(tableRef.current, '[data-pc-section="thead"] > tr > th');
+
+                headers.forEach((header) => widths.push(DomHandler.getOuterWidth(header)));
+                const movedItem = widths.find((items, index) => index === dragColIndex);
+                const remainingItems = widths.filter((items, index) => index !== dragColIndex);
+                const reorderedWidths = [...remainingItems.slice(0, dropColIndex), movedItem, ...remainingItems.slice(dropColIndex)];
+
+                addColumnWidthStyles(reorderedWidths);
+
+                if (dropColIndex < dragColIndex && dropPosition.current === 1) {
+                    dropColIndex++;
+                }
+
+                if (dropColIndex > dragColIndex && dropPosition.current === -1) {
+                    dropColIndex--;
+                }
+
+                ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
+
+                const columnOrder = columns.reduce((orders, col) => {
+                    orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
+
+                    return orders;
+                }, []);
+
+                setColumnOrderState(columnOrder);
+
+                if (props.onColReorder) {
+                    props.onColReorder({
+                        originalEvent: event,
+                        dragIndex: dragColIndex,
+                        dropIndex: dropColIndex,
+                        columns
+                    });
+                }
+            }
+
+            reorderIndicatorUpRef.current.style.display = 'none';
+            reorderIndicatorDownRef.current.style.display = 'none';
+            draggedColumnElement.current.draggable = false;
+            draggedColumnElement.current = null;
+            draggedColumn.current = null;
+            dropPosition.current = null;
+        }
+    };
+
+    const createBeforeResizeStyleElement = () => {
+        beforeResizeStyleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+        let innerHTML = `
+[data-pc-name="datatable"][${attributeSelector.current}] {
+    user-select:none;
+}
+        `;
+
+        beforeResizeStyleElement.current.innerHTML = innerHTML;
+    };
+
+    const createStyleElement = () => {
+        styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+    };
+
+    const createResponsiveStyle = () => {
+        if (!responsiveStyleElement.current) {
+            responsiveStyleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+            let tableSelector = `.p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
+            let selector = `.p-datatable[${attributeSelector.current}] > ${tableSelector}`;
+            let gridLinesSelector = `.p-datatable[${attributeSelector.current}].p-datatable-gridlines > ${tableSelector}`;
+            let innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    ${selector} > .p-datatable-thead > tr > th,
+    ${selector} > .p-datatable-tfoot > tr > td {
+        display: none;
+    }
+
+    ${selector} > .p-datatable-tbody > tr > td {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    ${selector} > .p-datatable-tbody > tr > td:not(:last-child) {
+        border: 0 none;
+    }
+
+    ${gridLinesSelector} > .p-datatable-tbody > tr > td:last-child {
+        border-top: 0;
+        border-right: 0;
+        border-left: 0;
+    }
+
+    ${selector} > .p-datatable-tbody > tr > td > .p-column-title {
+        display: block;
+    }
+}
+`;
+
+            responsiveStyleElement.current.innerHTML = innerHTML;
+        }
+    };
+
+    const destroyResponsiveStyle = () => {
+        responsiveStyleElement.current = DomHandler.removeInlineStyle(responsiveStyleElement.current);
+    };
+
+    const destroyStyleElement = () => {
+        styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
+    };
+
+    const destroyBeforeResizeStyleElement = () => {
+        beforeResizeStyleElement.current = DomHandler.removeInlineStyle(beforeResizeStyleElement.current);
+    };
+
+    const onPageChange = (e) => {
+        clearEditingMetaData();
+        clearFrozenEditingMetaData();
+
+        if (props.onPage) {
+            props.onPage(createEvent(e));
+        } else {
+            setFirstState(e.first);
+            setRowsState(e.rows);
+        }
+
+        if (props.onValueChange) {
+            props.onValueChange(processedData());
+        }
+    };
+
+    const onSortChange = (e) => {
+        clearEditingMetaData();
+        clearFrozenEditingMetaData();
+
+        const { originalEvent: event, column, sortableDisabledFields } = e;
+        let sortField = getColumnProp(column, 'sortField') || getColumnProp(column, 'field');
+        let sortOrder = props.defaultSortOrder;
+        let multiSortMeta;
+        let eventMeta;
+
+        columnSortable.current = getColumnProp(column, 'sortable');
+        columnSortFunction.current = getColumnProp(column, 'sortFunction');
+        columnField.current = sortField;
+
+        if (props.sortMode === 'multiple') {
+            let metaKey = event.metaKey || event.ctrlKey;
+
+            multiSortMeta = [...getMultiSortMeta()];
+
+            const sortMeta = multiSortMeta.find((sortMeta) => sortMeta.field === sortField);
+
+            sortOrder = sortMeta ? getCalculatedSortOrder(sortMeta.order) : sortOrder;
+
+            const newMetaData = { field: sortField, order: sortOrder };
+
+            if (sortOrder) {
+                multiSortMeta = metaKey ? multiSortMeta : multiSortMeta.filter((meta) => sortableDisabledFields.some((field) => field === meta.field));
+
+                addSortMeta(newMetaData, multiSortMeta);
+            } else if (props.removableSort) {
+                removeSortMeta(newMetaData, multiSortMeta);
+            }
+
+            eventMeta = {
+                multiSortMeta
+            };
+        } else {
+            sortOrder = getSortField() === sortField ? getCalculatedSortOrder(getSortOrder()) : sortOrder;
+
+            if (props.removableSort) {
+                sortField = sortOrder ? sortField : null;
+            }
+
+            eventMeta = {
+                sortField,
+                sortOrder
+            };
+        }
+
+        if (props.onSort) {
+            props.onSort(createEvent(eventMeta));
+        } else {
+            setFirstState(0);
+            setSortFieldState(eventMeta.sortField);
+            setSortOrderState(eventMeta.sortOrder);
+            setMultiSortMetaState(eventMeta.multiSortMeta);
+        }
+
+        if (props.onValueChange) {
+            props.onValueChange(
+                processedData({
+                    sortField,
+                    sortOrder,
+                    multiSortMeta
+                })
+            );
+        }
+    };
+
+    const getCalculatedSortOrder = (currentOrder) => {
+        return props.removableSort ? (props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0) : currentOrder * -1;
+    };
+
+    const compareValuesOnSort = (value1, value2, comparator, order) => {
+        return ObjectUtils.sort(value1, value2, order, comparator, (context && context.nullSortOrder) || PrimeReact.nullSortOrder);
+    };
+
+    const addSortMeta = (meta, multiSortMeta) => {
+        const index = multiSortMeta.findIndex((sortMeta) => sortMeta.field === meta.field);
+
+        if (index >= 0) {
+            multiSortMeta[index] = meta;
+        } else {
+            multiSortMeta.push(meta);
+        }
+    };
+
+    const removeSortMeta = (meta, multiSortMeta) => {
+        const index = multiSortMeta.findIndex((sortMeta) => sortMeta.field === meta.field);
+
+        if (index >= 0) {
+            multiSortMeta.splice(index, 1);
+        }
+
+        multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
+    };
+
+    const sortSingle = (data, field, order) => {
+        if (props.groupRowsBy && props.groupRowsBy === props.sortField) {
+            const multiSortMeta = [{ field: props.sortField, order: props.sortOrder || props.defaultSortOrder }];
+
+            props.sortField !== field && multiSortMeta.push({ field, order });
+
+            return sortMultiple(data, multiSortMeta);
+        }
+
+        let value = [...data];
+
+        if (columnSortable.current && columnSortFunction.current) {
+            value = columnSortFunction.current({ data, field, order });
+        } else {
+            // performance optimization to prevent resolving field data in each loop
+            const lookupMap = new Map();
+            const comparator = ObjectUtils.localeComparator((context && context.locale) || PrimeReact.locale);
+
+            for (let item of data) {
+                lookupMap.set(item, ObjectUtils.resolveFieldData(item, field));
+            }
+
+            value.sort((data1, data2) => {
+                const value1 = lookupMap.get(data1);
+                const value2 = lookupMap.get(data2);
+
+                return compareValuesOnSort(value1, value2, comparator, order);
+            });
+        }
+
+        return value;
+    };
+
+    const sortMultiple = (data, multiSortMeta = []) => {
+        if (props.groupRowsBy && (groupRowsSortMetaState || (multiSortMeta.length && props.groupRowsBy === multiSortMeta[0].field))) {
+            let groupRowsSortMeta = groupRowsSortMetaState;
+            const firstSortMeta = multiSortMeta[0];
+
+            if (!groupRowsSortMeta) {
+                groupRowsSortMeta = firstSortMeta;
+                setGroupRowsSortMetaState(groupRowsSortMeta);
+            }
+
+            if (firstSortMeta.field !== groupRowsSortMeta.field) {
+                multiSortMeta = [groupRowsSortMeta, ...multiSortMeta];
+            }
+        }
+
+        let value = [...data];
+
+        if (columnSortable.current && columnSortFunction.current) {
+            const meta = multiSortMeta.find((meta) => meta.field === columnField.current);
+            const field = columnField.current;
+            const order = meta ? meta.order : props.defaultSortOrder;
+
+            value = columnSortFunction.current({ data, field, order, multiSortMeta });
+        } else {
+            const comparator = ObjectUtils.localeComparator((context && context.locale) || PrimeReact.locale);
+
+            value.sort((data1, data2) => {
+                return multisortField(data1, data2, multiSortMeta, 0, comparator);
+            });
+        }
+
+        return value;
+    };
+
+    const multisortField = (data1, data2, multiSortMeta, index, comparator) => {
+        if (!multiSortMeta || !multiSortMeta[index]) {
+            return;
+        }
+
+        const value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
+        const value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
+
+        // check if they are equal handling dates and locales
+        if (ObjectUtils.compare(value1, value2, comparator) === 0) {
+            return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1, comparator) : 0;
+        }
+
+        return compareValuesOnSort(value1, value2, comparator, multiSortMeta[index].order);
+    };
+
+    const onFilterChange = (filters) => {
+        clearEditingMetaData();
+        clearFrozenEditingMetaData();
+
+        setD_filtersState(filters);
+    };
+
+    const onFilterApply = (filtersToApply) => {
+        clearTimeout(filterTimeout.current);
+        filterTimeout.current = setTimeout(() => {
+            const filters = cloneFilters(filtersToApply || d_filtersState);
+
+            if (props.onFilter) {
+                props.onFilter(createEvent({ filters }));
+            } else {
+                setFirstState(0);
+                setFiltersState(filters);
+            }
+
+            if (props.onValueChange) {
+                props.onValueChange(processedData({ filters }));
+            }
+        }, props.filterDelay);
+    };
+
+    const getActiveFilters = (filters) => {
+        const removeEmptyFilters = ([key, value]) => {
+            if (value.constraints) {
+                const filteredConstraints = value.constraints.filter((constraint) => constraint.value !== null);
+
+                if (filteredConstraints.length > 0) {
+                    return [key, { ...value, constraints: filteredConstraints }];
+                }
+            } else if (value.value !== null) {
+                return [key, value];
+            }
+
+            return undefined;
+        };
+
+        const filterValidEntries = (entry) => entry !== undefined;
+        const entries = Object.entries(filters).map(removeEmptyFilters).filter(filterValidEntries);
+
+        return Object.fromEntries(entries);
+    };
+
+    const filterLocal = (data, filters) => {
+        if (!data) {
+            return;
+        }
+
+        let activeFilters = filters ? getActiveFilters(filters) : {};
+
+        let columns = getColumns();
+        let filteredValue = [];
+
+        let isGlobalFilter = activeFilters.global || props.globalFilter;
+        let globalFilterFieldsArray;
+
+        if (isGlobalFilter) {
+            globalFilterFieldsArray = props.globalFilterFields || columns.filter((col) => !getColumnProp(col, 'excludeGlobalFilter')).map((col) => getColumnProp(col, 'filterField') || getColumnProp(col, 'field'));
+        }
+
+        for (let i = 0; i < data.length; i++) {
+            let localMatch = true;
+            let globalMatch = false;
+            let localFiltered = false;
+
+            for (let prop in activeFilters) {
+                if (prop === 'null') {
+                    continue;
+                }
+
+                if (Object.prototype.hasOwnProperty.call(activeFilters, prop) && prop !== 'global') {
+                    localFiltered = true;
+                    let filterField = prop;
+                    let filterMeta = activeFilters[filterField];
+
+                    if (filterMeta.operator) {
+                        for (let j = 0; j < filterMeta.constraints.length; j++) {
+                            let filterConstraint = filterMeta.constraints[j];
+
+                            localMatch = executeLocalFilter(filterField, data[i], filterConstraint, j);
+
+                            if ((filterMeta.operator === FilterOperator.OR && localMatch) || (filterMeta.operator === FilterOperator.AND && !localMatch)) {
+                                break;
+                            }
+                        }
+                    } else {
+                        localMatch = executeLocalFilter(filterField, data[i], filterMeta, 0);
+                    }
+
+                    if (!localMatch) {
+                        break;
+                    }
+                }
+            }
+
+            if (localMatch && isGlobalFilter && !globalMatch && globalFilterFieldsArray) {
+                for (let j = 0; j < globalFilterFieldsArray.length; j++) {
+                    let globalFilterField = globalFilterFieldsArray[j];
+                    let matchMode = activeFilters.global ? activeFilters.global.matchMode : props.globalFilterMatchMode;
+                    let value = activeFilters.global ? activeFilters.global.value : props.globalFilter;
+
+                    globalMatch = FilterService.filters[matchMode](ObjectUtils.resolveFieldData(data[i], globalFilterField), value, props.filterLocale);
+
+                    if (globalMatch) {
+                        break;
+                    }
+                }
+            }
+
+            let matches;
+
+            if (isGlobalFilter) {
+                matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
+            } else {
+                matches = localFiltered && localMatch;
+            }
+
+            if (matches) {
+                filteredValue.push(data[i]);
+            }
+        }
+
+        if (filteredValue.length === props.value.length || Object.keys(activeFilters).length === 0) {
+            filteredValue = data;
+        }
+
+        return filteredValue;
+    };
+
+    const executeLocalFilter = (field, rowData, filterMeta, index) => {
+        let filterValue = filterMeta.value;
+        let filterMatchMode = filterMeta.matchMode === 'custom' ? `custom_${field}` : filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
+        let dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
+        let filterConstraint = FilterService.filters[filterMatchMode];
+
+        return ObjectUtils.isFunction(filterConstraint) && filterConstraint(dataFieldValue, filterValue, props.filterLocale, index);
+    };
+
+    const cloneFilters = (filters) => {
+        filters = filters || props.filters;
+        let cloned = {};
+
+        if (filters) {
+            Object.entries(filters).forEach(([prop, value]) => {
+                cloned[prop] = value.operator
+                    ? {
+                          operator: value.operator,
+                          constraints: value.constraints.map((constraint) => {
+                              return { ...constraint };
+                          })
+                      }
+                    : { ...value };
+            });
+        } else {
+            const columns = getColumns();
+
+            cloned = columns.reduce((filters, col) => {
+                const field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
+                const filterFunction = getColumnProp(col, 'filterFunction');
+                const dataType = getColumnProp(col, 'dataType');
+                const matchMode =
+                    getColumnProp(col, 'filterMatchMode') ||
+                    ((context && context.filterMatchModeOptions[dataType]) || PrimeReact.filterMatchModeOptions[dataType]
+                        ? (context && context.filterMatchModeOptions[dataType][0]) || PrimeReact.filterMatchModeOptions[dataType][0]
+                        : FilterMatchMode.STARTS_WITH);
+                let constraint = { value: null, matchMode };
+
+                if (filterFunction) {
+                    FilterService.register(`custom_${field}`, (...args) => filterFunction(...args, { column: col }));
+                }
+
+                filters[field] = props.filterDisplay === 'menu' ? { operator: FilterOperator.AND, constraints: [constraint] } : constraint;
+
+                return filters;
+            }, {});
+        }
+
+        return cloned;
+    };
+
+    const filter = (value, field, matchMode, index = 0) => {
+        let filters = { ...d_filtersState };
+        let meta = filters[field];
+        let constraint = meta && meta.operator ? meta.constraints[index] : meta;
+
+        constraint = meta ? { value, matchMode: matchMode || constraint.matchMode } : { value, matchMode };
+        props.filterDisplay === 'menu' && meta && meta.operator ? (filters[field].constraints[index] = constraint) : (filters[field] = constraint);
+
+        setD_filtersState(filters);
+        onFilterApply(filters);
+    };
+
+    const reset = () => {
+        setD_rowsState(props.rows);
+        setD_filtersState(cloneFilters(props.filters));
+        setGroupRowsSortMetaState(null);
+        setEditingMetaState({});
+        setFrozenEditingMetaState({});
+
+        if (!props.onPage) {
+            setFirstState(props.first);
+            setRowsState(props.rows);
+        }
+
+        if (!props.onSort) {
+            setSortFieldState(props.sortField);
+            setSortOrderState(props.sortOrder);
+            setMultiSortMetaState(props.multiSortMeta);
+        }
+
+        if (!props.onFilter) {
+            setFiltersState(props.filters);
+        }
+
+        resetColumnOrder();
+    };
+
+    const resetScroll = () => {
+        if (wrapperRef.current) {
+            const scrollableContainer = !isVirtualScrollerDisabled() ? DomHandler.findSingle(wrapperRef.current, '[data-pc-name="virtualscroller"]') : wrapperRef.current;
+
+            scrollableContainer.scrollTo(0, 0);
+        }
+    };
+
+    const resetResizeColumnsWidth = () => {
+        destroyStyleElement();
+    };
+
+    const resetColumnOrder = () => {
+        const columns = getColumns(true);
+        let columnOrder = [];
+
+        if (columns) {
+            columnOrder = columns.reduce((orders, col) => {
+                orders.push(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'));
+
+                return orders;
+            }, []);
+        }
+
+        setColumnOrderState(columnOrder);
+    };
+
+    const exportCSV = (options) => {
+        let data;
+        let csv = '\ufeff';
+
+        if (options && options.selectionOnly) {
+            data = props.selection || [];
+        } else {
+            data = [...(props.frozenValue || []), ...(processedData() || [])];
+        }
+
+        // First build collection of exportable columns
+        const exportableColumns = getColumns().filter((column) => {
+            const exportable = getColumnProp(column, 'exportable');
+            const field = getColumnProp(column, 'field');
+
+            // Column must be exportable (or undefined/not set) and have a field defined
+            return exportable !== false && field;
+        });
+
+        // headers
+        exportableColumns.forEach((column, i) => {
+            const [field, header, exportHeader] = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader')];
+
+            const columnHeader = String(exportHeader || header || field)
+                .replace(/"/g, '""')
+                .replace(/\n/g, '\u2028');
+
+            csv = csv + ('"' + columnHeader + '"');
+
+            if (i < exportableColumns.length - 1) {
+                csv = csv + props.csvSeparator;
+            }
+        });
+
+        // body
+        data.forEach((record) => {
+            csv = csv + '\n';
+            exportableColumns.forEach((column, i) => {
+                const [colField, exportField] = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField')];
+                const field = exportField || colField;
+
+                let cellData = ObjectUtils.resolveFieldData(record, field);
+
+                if (cellData != null) {
+                    if (props.exportFunction) {
+                        cellData = props.exportFunction({
+                            data: cellData,
+                            field,
+                            rowData: record,
+                            column
+                        });
+                    } else {
+                        cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, '\u2028');
+                    }
+                } else {
+                    cellData = '';
+                }
+
+                csv = csv + ('"' + cellData + '"');
+
+                if (i < exportableColumns.length - 1) {
+                    csv = csv + props.csvSeparator;
+                }
+            });
+        });
+
+        DomHandler.exportCSV(csv, props.exportFilename);
+    };
+
+    const closeEditingCell = () => {
+        if (props.editMode !== 'row') {
+            document.body.click();
+        }
+    };
+
+    const closeEditingRows = () => {
+        DomHandler.find(document.body, '[data-pc-section="roweditorcancelbuttonprops"]').forEach((button, index) => {
+            setTimeout(() => {
+                button.click();
+            }, index * 5);
+        });
+    };
+
+    const createEvent = (event) => {
+        return {
+            first: getFirst(),
+            rows: getRows(),
+            sortField: getSortField(),
+            sortOrder: getSortOrder(),
+            multiSortMeta: getMultiSortMeta(),
+            filters: getFilters(),
+            ...event
+        };
+    };
+
+    const processedData = (localState) => {
+        let data = props.value || [];
+
+        if (!props.lazy) {
+            if (data && data.length) {
+                const filters = (localState && localState.filters) || getFilters();
+                const sortField = (localState && localState.sortField) || getSortField();
+                const sortOrder = (localState && localState.sortOrder) || getSortOrder();
+                const multiSortMeta = (localState && localState.multiSortMeta) || getMultiSortMeta();
+                const columns = getColumns();
+                const sortColumn = columns.find((col) => getColumnProp(col, 'field') === sortField);
+
+                if (sortColumn) {
+                    columnSortable.current = getColumnProp(sortColumn, 'sortable');
+                    columnSortFunction.current = getColumnProp(sortColumn, 'sortFunction');
+                }
+
+                if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
+                    data = filterLocal(data, filters);
+                }
+
+                if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
+                    if (props.sortMode === 'single') {
+                        data = sortSingle(data, sortField, sortOrder);
+                    } else if (props.sortMode === 'multiple') {
+                        data = sortMultiple(data, multiSortMeta);
+                    }
+                }
+            }
+        }
+
+        return data;
+    };
+
+    const dataToRender = (data) => {
+        if (data && props.paginator) {
+            const first = props.lazy ? 0 : getFirst();
+
+            return data.slice(first, first + getRows());
+        }
+
+        return data;
+    };
+
+    useMountEffect(() => {
+        if (elementRef.current) {
+            attributeSelector.current = UniqueComponentId();
+            elementRef.current.setAttribute(attributeSelector.current, '');
+        }
+
+        //setFiltersState(cloneFilters(props.filters)); // Github #4248
+        setD_filtersState(cloneFilters(props.filters));
+
+        if (isStateful()) {
+            restoreState();
+
+            if (props.resizableColumns) {
+                restoreColumnWidths();
+            }
+        }
+    });
+
+    useUpdateEffect(() => {
+        if (props.responsiveLayout === 'stack' && !props.scrollable) {
+            createResponsiveStyle();
+        }
+
+        return () => {
+            destroyResponsiveStyle();
+        };
+    }, [props.breakpoint]);
+
+    useUpdateEffect(() => {
+        const filters = cloneFilters(props.filters);
+
+        setFiltersState(filters);
+        setD_filtersState(cloneFilters(props.filters));
+
+        if (props.onValueChange) {
+            props.onValueChange(processedData({ filters }));
+        }
+    }, [props.filters]);
+
+    useUpdateEffect(() => {
+        if (isStateful()) {
+            saveState();
+        }
+    });
+
+    useUpdateEffect(() => {
+        destroyResponsiveStyle();
+
+        if (props.responsiveLayout === 'stack' && !props.scrollable) {
+            createResponsiveStyle();
+        }
+    }, [props.responsiveLayout, props.scrollable]);
+
+    useUpdateEffect(() => {
+        if (props.globalFilter) {
+            filter(props.globalFilter, 'global', props.globalFilterMatchMode);
+        } else {
+            // #3819 was filtering but now reset filter state
+            if (d_filtersState['global']) {
+                let filters = { ...d_filtersState };
+
+                delete filters['global'];
+                setD_filtersState(filters);
+                onFilterApply(filters);
+            }
+        }
+    }, [props.globalFilter, props.globalFilterMatchMode]);
+
+    useUnmountEffect(() => {
+        unbindColumnResizeEvents();
+        destroyStyleElement();
+        destroyResponsiveStyle();
+        destroyBeforeResizeStyleElement();
+    });
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        clearState,
+        closeEditingCell,
+        closeEditingRows,
+        exportCSV,
+        filter,
+        reset,
+        resetColumnOrder,
+        resetScroll,
+        resetResizeColumnsWidth,
+        restoreColumnWidths,
+        restoreState,
+        restoreTableState,
+        saveState,
+        getFilterMeta: () => filtersState,
+        setFilterMeta: (filters) => setFiltersState(filters),
+        getSortMeta: () => multiSortMetaState,
+        setSortMeta: (sorts) => setMultiSortMetaState(sorts),
+        getElement: () => elementRef.current,
+        getTable: () => tableRef.current,
+        getVirtualScroller: () => virtualScrollerRef.current,
+        getProcessedData: () => processedData()
+    }));
+
+    const createLoader = () => {
+        if (props.loading) {
+            const loadingIconProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('loadingIcon')
+                },
+                ptCallbacks.ptm('loadingIcon')
+            );
+            const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
+            const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+            const loadingOverlayProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('loadingOverlay')
+                },
+                ptCallbacks.ptm('loadingOverlay')
+            );
+
+            return <div {...loadingOverlayProps}>{loadingIcon}</div>;
+        }
+
+        return null;
+    };
+
+    const createHeader = () => {
+        if (props.header) {
+            const content = ObjectUtils.getJSXElement(props.header, { props });
+            const headerProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('header')
+                },
+                ptCallbacks.ptm('header')
+            );
+
+            return <div {...headerProps}>{content}</div>;
+        }
+
+        return null;
+    };
+
+    const createTableHeader = (options, empty, _isVirtualScrollerDisabled) => {
+        if (props.showHeaders === false) {
+            return null;
+        }
+
+        const sortField = getSortField();
+        const sortOrder = getSortOrder();
+        const multiSortMeta = [...getMultiSortMeta()];
+        const groupRowSortField = getGroupRowSortField();
+        const filters = d_filtersState;
+        const filtersStore = (!props.onFilter && props.filters) || getFilters();
+        const { items: processedData, props: virtualScrollerProps, columns } = options;
+        const data = _isVirtualScrollerDisabled || virtualScrollerProps.lazy ? processedData : virtualScrollerProps.items;
+
+        return (
+            <TableHeader
+                hostName="DataTable"
+                value={data}
+                tableProps={props}
+                columns={columns}
+                tabIndex={props.tabIndex}
+                empty={empty}
+                headerColumnGroup={props.headerColumnGroup}
+                resizableColumns={props.resizableColumns}
+                onColumnResizeStart={onColumnResizeStart}
+                onColumnResizerClick={props.onColumnResizerClick}
+                onColumnResizerDoubleClick={props.onColumnResizerDoubleClick}
+                sortMode={props.sortMode}
+                sortField={sortField}
+                sortIcon={props.sortIcon}
+                sortOrder={sortOrder}
+                multiSortMeta={multiSortMeta}
+                groupRowsBy={props.groupRowsBy}
+                groupRowSortField={groupRowSortField}
+                onSortChange={onSortChange}
+                filterDisplay={props.filterDisplay}
+                filters={filters}
+                filtersStore={filtersStore}
+                filterIcon={props.filterIcon}
+                filterClearIcon={props.filterClearIcon}
+                onFilterChange={onFilterChange}
+                onFilterApply={onFilterApply}
+                showSelectAll={props.showSelectAll}
+                allRowsSelected={allRowsSelected}
+                onColumnCheckboxChange={onColumnHeaderCheckboxChange}
+                onColumnMouseDown={onColumnHeaderMouseDown}
+                onColumnDragStart={onColumnHeaderDragStart}
+                onColumnDragOver={onColumnHeaderDragOver}
+                onColumnDragLeave={onColumnHeaderDragLeave}
+                onColumnDrop={onColumnHeaderDrop}
+                rowGroupMode={props.rowGroupMode}
+                reorderableColumns={props.reorderableColumns}
+                ptCallbacks={ptCallbacks}
+                metaData={metaData}
+                unstyled={props.unstyled}
+            />
+        );
+    };
+
+    const createTableBody = (options, selectionModeInColumn, empty, isVirtualScrollerDisabled, processedData) => {
+        const first = getFirst();
+        const { rows, columns, contentRef, style, className, spacerStyle, itemSize } = options;
+
+        const frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && (
+            <TableBody
+                hostName="DataTable"
+                ref={frozenBodyRef}
+                cellMemo={props.cellMemo}
+                cellMemoProps={props.cellMemoProps}
+                cellMemoPropsDepth={props.cellMemoPropsDepth}
+                cellClassName={props.cellClassName}
+                cellSelection={props.cellSelection}
+                checkIcon={props.checkIcon}
+                className="p-datatable-tbody p-datatable-frozen-tbody"
+                collapsedRowIcon={props.collapsedRowIcon}
+                columns={columns}
+                compareSelectionBy={props.compareSelectionBy}
+                contextMenuSelection={props.contextMenuSelection}
+                dataKey={props.dataKey}
+                dragSelection={props.dragSelection}
+                editMode={props.editMode}
+                editingMeta={frozenEditingMetaState}
+                editingRows={props.editingRows}
+                emptyMessage={props.emptyMessage}
+                expandableRowGroups={props.expandableRowGroups}
+                expandedRowIcon={props.expandedRowIcon}
+                expandedRows={props.expandedRows}
+                first={first}
+                frozenRow
+                groupRowsBy={props.groupRowsBy}
+                isDataSelectable={props.isDataSelectable}
+                isVirtualScrollerDisabled={true}
+                lazy={props.lazy}
+                loading={props.loading}
+                metaKeySelection={props.metaKeySelection}
+                onCellClick={props.onCellClick}
+                onCellSelect={props.onCellSelect}
+                onCellUnselect={props.onCellUnselect}
+                onContextMenu={props.onContextMenu}
+                onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                onEditingMetaChange={onFrozenEditingMetaChange}
+                onRowClick={props.onRowClick}
+                onRowCollapse={props.onRowCollapse}
+                onRowDoubleClick={props.onRowDoubleClick}
+                onRowPointerDown={props.onRowPointerDown}
+                onRowPointerUp={props.onRowPointerUp}
+                onRowEditCancel={props.onRowEditCancel}
+                onRowEditChange={props.onRowEditChange}
+                onRowEditComplete={props.onRowEditComplete}
+                onRowEditInit={props.onRowEditInit}
+                onRowEditSave={props.onRowEditSave}
+                onRowExpand={props.onRowExpand}
+                onRowMouseEnter={props.onRowMouseEnter}
+                onRowMouseLeave={props.onRowMouseLeave}
+                onRowReorder={props.onRowReorder}
+                onRowSelect={props.onRowSelect}
+                onRowToggle={props.onRowToggle}
+                onRowUnselect={props.onRowUnselect}
+                onSelectionChange={props.onSelectionChange}
+                paginator={props.paginator}
+                // pass processedData #7546
+                processedData={processedData}
+                reorderableRows={props.reorderableRows}
+                responsiveLayout={props.responsiveLayout}
+                rowClassName={props.rowClassName}
+                rowEditValidator={props.rowEditValidator}
+                rowEditorCancelIcon={props.rowEditorCancelIcon}
+                rowEditorInitIcon={props.rowEditorInitIcon}
+                rowEditorSaveIcon={props.rowEditorSaveIcon}
+                rowExpansionTemplate={props.rowExpansionTemplate}
+                rowGroupFooterTemplate={props.rowGroupFooterTemplate}
+                rowGroupHeaderTemplate={props.rowGroupHeaderTemplate}
+                rowGroupMode={props.rowGroupMode}
+                scrollable={props.scrollable}
+                selectOnEdit={props.selectOnEdit}
+                selection={props.selection}
+                selectionAutoFocus={props.selectionAutoFocus}
+                selectionMode={props.selectionMode}
+                selectionModeInColumn={selectionModeInColumn}
+                showRowReorderElement={props.showRowReorderElement}
+                showSelectionElement={props.showSelectionElement}
+                tabIndex={props.tabIndex}
+                tableProps={props}
+                tableSelector={attributeSelector.current}
+                value={props.frozenValue}
+                virtualScrollerOptions={options}
+                ptCallbacks={ptCallbacks}
+                metaData={metaData}
+                unstyled={props.unstyled}
+            />
+        );
+        const body = (
+            <TableBody
+                hostName="DataTable"
+                ref={bodyRef}
+                cellMemo={props.cellMemo}
+                cellMemoProps={props.cellMemoProps}
+                cellMemoPropsDepth={props.cellMemoPropsDepth}
+                cellClassName={props.cellClassName}
+                cellSelection={props.cellSelection}
+                checkIcon={props.checkIcon}
+                className={classNames('p-datatable-tbody', className)}
+                collapsedRowIcon={props.collapsedRowIcon}
+                columns={columns}
+                compareSelectionBy={props.compareSelectionBy}
+                contextMenuSelection={props.contextMenuSelection}
+                dataKey={props.dataKey}
+                dragSelection={props.dragSelection}
+                editMode={props.editMode}
+                editingMeta={editingMetaState}
+                editingRows={props.editingRows}
+                empty={empty}
+                emptyMessage={props.emptyMessage}
+                expandableRowGroups={props.expandableRowGroups}
+                expandedRowIcon={props.expandedRowIcon}
+                expandedRows={props.expandedRows}
+                first={first}
+                frozenRow={false}
+                groupRowsBy={props.groupRowsBy}
+                isDataSelectable={props.isDataSelectable}
+                isVirtualScrollerDisabled={isVirtualScrollerDisabled}
+                lazy={props.lazy}
+                loading={props.loading}
+                metaKeySelection={props.metaKeySelection}
+                onCellClick={props.onCellClick}
+                onCellSelect={props.onCellSelect}
+                onCellUnselect={props.onCellUnselect}
+                onContextMenu={props.onContextMenu}
+                onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                onEditingMetaChange={onEditingMetaChange}
+                onRowClick={props.onRowClick}
+                onRowCollapse={props.onRowCollapse}
+                onRowDoubleClick={props.onRowDoubleClick}
+                onRowEditCancel={props.onRowEditCancel}
+                onRowEditChange={props.onRowEditChange}
+                onRowEditComplete={props.onRowEditComplete}
+                onRowEditInit={props.onRowEditInit}
+                onRowEditSave={props.onRowEditSave}
+                onRowExpand={props.onRowExpand}
+                onRowMouseEnter={props.onRowMouseEnter}
+                onRowMouseLeave={props.onRowMouseLeave}
+                onRowPointerDown={props.onRowPointerDown}
+                onRowPointerUp={props.onRowPointerUp}
+                onRowReorder={props.onRowReorder}
+                onRowSelect={props.onRowSelect}
+                onRowToggle={props.onRowToggle}
+                onRowUnselect={props.onRowUnselect}
+                onSelectionChange={props.onSelectionChange}
+                paginator={props.paginator}
+                // pass processedData #7546
+                processedData={processedData}
+                reorderableRows={props.reorderableRows}
+                responsiveLayout={props.responsiveLayout}
+                rowClassName={props.rowClassName}
+                rowEditValidator={props.rowEditValidator}
+                rowEditorCancelIcon={props.rowEditorCancelIcon}
+                rowEditorInitIcon={props.rowEditorInitIcon}
+                rowEditorSaveIcon={props.rowEditorSaveIcon}
+                rowExpansionTemplate={props.rowExpansionTemplate}
+                rowGroupFooterTemplate={props.rowGroupFooterTemplate}
+                rowGroupHeaderTemplate={props.rowGroupHeaderTemplate}
+                rowGroupMode={props.rowGroupMode}
+                scrollable={props.scrollable}
+                selectOnEdit={props.selectOnEdit}
+                selection={props.selection}
+                selectionAutoFocus={props.selectionAutoFocus}
+                selectionMode={props.selectionMode}
+                selectionModeInColumn={selectionModeInColumn}
+                showRowReorderElement={props.showRowReorderElement}
+                showSelectionElement={props.showSelectionElement}
+                style={style}
+                tabIndex={props.tabIndex}
+                tableProps={props}
+                tableSelector={attributeSelector.current}
+                value={dataToRender(rows)}
+                virtualScrollerContentRef={contentRef}
+                virtualScrollerOptions={options}
+                ptCallbacks={ptCallbacks}
+                metaData={metaData}
+                unstyled={props.unstyled}
+            />
+        );
+        const spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? (
+            <TableBody hostName="DataTable" style={{ height: `calc(${spacerStyle.height} - ${rows.length * itemSize}px)` }} className="p-datatable-virtualscroller-spacer" ptCallbacks={ptCallbacks} metaData={metaData} unstyled={props.unstyled} />
+        ) : null;
+
+        return (
+            <>
+                {frozenBody}
+                {body}
+                {spacerBody}
+            </>
+        );
+    };
+
+    const createTableFooter = (options) => {
+        const { columns } = options;
+
+        return <TableFooter hostName="DataTable" tableProps={props} columns={columns} footerColumnGroup={props.footerColumnGroup} ptCallbacks={ptCallbacks} metaData={metaData} unstyled={props.unstyled} />;
+    };
+
+    const createContent = (processedData, columns, selectionModeInColumn, empty) => {
+        if (!columns) {
+            return;
+        }
+
+        const _isVirtualScrollerDisabled = isVirtualScrollerDisabled();
+        const virtualScrollerOptions = props.virtualScrollerOptions || {};
+        const wrapperProps = mergeProps(
+            {
+                className: ptCallbacks.cx('wrapper'),
+                style: { ...ptCallbacks.sx('wrapper'), maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null }
+            },
+            ptCallbacks.ptm('wrapper')
+        );
+
+        return (
+            <div ref={wrapperRef} {...wrapperProps}>
+                <VirtualScroller
+                    ref={virtualScrollerRef}
+                    {...virtualScrollerOptions}
+                    items={processedData}
+                    columns={columns}
+                    style={{ ...virtualScrollerOptions.style, ...{ height: props.scrollHeight !== 'flex' ? props.scrollHeight : undefined } }}
+                    scrollHeight={props.scrollHeight !== 'flex' ? undefined : '100%'}
+                    disabled={_isVirtualScrollerDisabled}
+                    loaderDisabled
+                    inline
+                    autoSize
+                    pt={ptCallbacks.ptm('virtualScroller')}
+                    __parentMetadata={{ parent: metaData }}
+                    showSpacer={false}
+                    unstyled={props.unstyled}
+                    contentTemplate={(options) => {
+                        const ref = (el) => {
+                            tableRef.current = el;
+                            options.spacerRef && options.spacerRef(el);
+                        };
+
+                        const tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
+                        const tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled, processedData);
+                        const tableFooter = createTableFooter(options);
+                        const tableProps = mergeProps(
+                            {
+                                className: classNames(props.tableClassName, ptCallbacks.cx('table')),
+                                style: props.tableStyle,
+                                role: 'table'
+                            },
+                            ptCallbacks.ptm('table')
+                        );
+
+                        return (
+                            <table ref={ref} {...tableProps}>
+                                {tableHeader}
+                                {tableBody}
+                                {tableFooter}
+                            </table>
+                        );
+                    }}
+                />
+            </div>
+        );
+    };
+
+    const createFooter = () => {
+        if (props.footer) {
+            const content = ObjectUtils.getJSXElement(props.footer, { props });
+            const footerProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('footer')
+                },
+                ptCallbacks.ptm('footer')
+            );
+
+            return <div {...footerProps}>{content}</div>;
+        }
+
+        return null;
+    };
+
+    const createPaginator = (position, totalRecords) => {
+        return (
+            <Paginator
+                first={getFirst()}
+                rows={getRows()}
+                pageLinkSize={props.pageLinkSize}
+                className={classNames(props.paginatorClassName, ptCallbacks.cx('paginator', { position }))}
+                onPageChange={onPageChange}
+                template={props.paginatorTemplate}
+                totalRecords={totalRecords}
+                rowsPerPageOptions={props.rowsPerPageOptions}
+                currentPageReportTemplate={props.currentPageReportTemplate}
+                leftContent={props.paginatorLeft}
+                rightContent={props.paginatorRight}
+                alwaysShow={props.alwaysShowPaginator}
+                dropdownAppendTo={props.paginatorDropdownAppendTo}
+                pt={ptCallbacks.ptm('paginator')}
+                unstyled={props.unstyled}
+                __parentMetadata={{ parent: metaData }}
+            />
+        );
+    };
+
+    const createPaginatorTop = (totalRecords) => {
+        if (props.paginator && props.paginatorPosition !== 'bottom') {
+            return createPaginator('top', totalRecords);
+        }
+
+        return null;
+    };
+
+    const createPaginatorBottom = (totalRecords) => {
+        if (props.paginator && props.paginatorPosition !== 'top') {
+            return createPaginator('bottom', totalRecords);
+        }
+
+        return null;
+    };
+
+    const createResizeHelper = () => {
+        if (props.resizableColumns) {
+            const resizeHelperProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('resizeHelper'),
+                    style: ptCallbacks.sx('resizeHelper')
+                },
+                ptCallbacks.ptm('resizeHelper')
+            );
+
+            return <div ref={resizeHelperRef} {...resizeHelperProps} />;
+        }
+
+        return null;
+    };
+
+    const createReorderIndicators = () => {
+        if (props.reorderableColumns) {
+            const style = { position: 'absolute', display: 'none' };
+            const reorderIndicatorUpProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('reorderIndicatorUp'),
+                    style: ptCallbacks.sx('reorderIndicatorUp', { style })
+                },
+                ptCallbacks.ptm('reorderIndicatorUp')
+            );
+            const reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
+            const reorderIndicatorUpIcon = IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || <ArrowDownIcon {...reorderIndicatorUpIconProps} />, { ...reorderIndicatorUpIconProps }, { props });
+            const reorderIndicatorDownProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('reorderIndicatorDown'),
+                    style: ptCallbacks.sx('reorderIndicatorDown', { style })
+                },
+                ptCallbacks.ptm('reorderIndicatorDown')
+            );
+            const reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
+            const reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || <ArrowUpIcon {...reorderIndicatorDownIconProps} />, { ...reorderIndicatorDownIconProps }, { props });
+
+            return (
+                <>
+                    <span ref={reorderIndicatorUpRef} {...reorderIndicatorUpProps}>
+                        {reorderIndicatorUpIcon}
+                    </span>
+                    <span ref={reorderIndicatorDownRef} {...reorderIndicatorDownProps}>
+                        {reorderIndicatorDownIcon}
+                    </span>
+                </>
+            );
+        }
+
+        return null;
+    };
+
+    const data = processedData();
+    const columns = getColumns();
+    const totalRecords = getTotalRecords(data);
+    const empty = ObjectUtils.isEmpty(data);
+    const selectionModeInColumn = getSelectionModeInColumn(columns);
+    const selectable = props.selectionMode || selectionModeInColumn;
+
+    const loader = createLoader();
+    const header = createHeader();
+    const paginatorTop = createPaginatorTop(totalRecords);
+    const content = createContent(data, columns, selectionModeInColumn, empty);
+    const paginatorBottom = createPaginatorBottom(totalRecords);
+    const footer = createFooter();
+    const resizeHelper = createResizeHelper();
+    const reorderIndicators = createReorderIndicators();
+    const rootProps = mergeProps(
+        {
+            id: props.id,
+            className: classNames(props.className, ptCallbacks.cx('root', { selectable })),
+            style: props.style,
+            'data-scrollselectors': '.p-datatable-wrapper',
+            'data-showgridlines': props.showGridlines
+        },
+        DataTableBase.getOtherProps(props),
+        ptCallbacks.ptm('root')
+    );
+
+    return (
+        <div ref={elementRef} {...rootProps}>
+            {loader}
+            {header}
+            {paginatorTop}
+            {content}
+            {paginatorBottom}
+            {footer}
+            {resizeHelper}
+            {reorderIndicators}
+        </div>
+    );
+});
+
+DataTable.displayName = 'DataTable';
diff --git a/components/lib/datatable/DataTableBase.js b/components/lib/datatable/DataTableBase.js
new file mode 100644
index 0000000000..61fa0dc446
--- /dev/null
+++ b/components/lib/datatable/DataTableBase.js
@@ -0,0 +1,583 @@
+import PrimeReact, { FilterMatchMode } from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-datatable {
+        position: relative;
+    }
+
+    .p-datatable > .p-datatable-wrapper {
+        overflow: auto;
+    }
+
+    .p-datatable-table {
+        border-spacing: 0px;
+        width: 100%;
+    }
+
+    .p-datatable .p-sortable-disabled {
+        cursor: auto;
+    }
+
+    .p-datatable .p-sortable-column {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-datatable .p-sortable-column .p-column-title,
+    .p-datatable .p-sortable-column .p-sortable-column-icon,
+    .p-datatable .p-sortable-column .p-sortable-column-badge {
+        vertical-align: middle;
+    }
+
+    .p-datatable .p-sortable-column .p-sortable-column-badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-datatable-selectable .p-selectable-row,
+    .p-datatable-selectable-cell .p-selectable-cell {
+        cursor: pointer;
+    }
+
+    .p-datatable-drag-selection-helper {
+        position: absolute;
+        z-index: 99999999;
+    }
+
+    /* Scrollable */
+    .p-datatable-scrollable > .p-datatable-wrapper {
+        position: relative;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-thead {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+    }
+
+    .p-datatable.p-datatable-gridlines .p-datatable-scrollable-table > .p-datatable-thead {
+        top: -1px;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+        position: sticky;
+        z-index: 1;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-tfoot {
+        position: sticky;
+        bottom: 0;
+        z-index: 1;
+    }
+
+    .p-datatable-scrollable .p-frozen-column {
+        position: sticky;
+        background: inherit;
+    }
+
+    .p-datatable-scrollable th.p-frozen-column {
+        z-index: 1;
+    }
+
+    .p-datatable-flex-scrollable {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .p-datatable-flex-scrollable > .p-datatable-wrapper {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+    }
+
+    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
+        position: sticky;
+        z-index: 1;
+    }
+
+    /* Resizable */
+    .p-datatable-resizable-table > .p-datatable-thead > tr > th,
+    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
+    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
+        background-clip: padding-box;
+        position: relative;
+    }
+
+    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
+        display: none;
+    }
+
+    .p-datatable .p-column-resizer {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0;
+        width: 0.5rem;
+        height: 100%;
+        padding: 0px;
+        cursor: col-resize;
+        border: 1px solid transparent;
+    }
+
+    .p-datatable .p-column-header-content {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-datatable .p-column-resizer-helper {
+        width: 1px;
+        position: absolute;
+        z-index: 10;
+        display: none;
+    }
+
+    .p-datatable .p-row-editor-init,
+    .p-datatable .p-row-editor-save,
+    .p-datatable .p-row-editor-cancel {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Expand */
+    .p-datatable .p-row-toggler {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    /* Reorder */
+    .p-datatable-reorder-indicator-up,
+    .p-datatable-reorder-indicator-down {
+        position: absolute;
+        display: none;
+    }
+
+    .p-reorderable-column,
+    .p-datatable-reorderablerow-handle {
+        cursor: move;
+    }
+
+    /* Loader */
+    .p-datatable .p-datatable-loading-overlay {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+
+    /* Filter */
+    .p-column-filter-row {
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+
+    .p-column-filter-menu {
+        display: inline-flex;
+        margin-left: auto;
+    }
+
+    .p-column-filter-row .p-column-filter-element {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .p-column-filter-menu-button,
+    .p-column-filter-clear-button {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-column-filter-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .p-column-filter-row-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-column-filter-row-item {
+        cursor: pointer;
+    }
+
+    .p-column-filter-add-button,
+    .p-column-filter-remove-button {
+        justify-content: center;
+    }
+
+    .p-column-filter-add-button .p-button-label,
+    .p-column-filter-remove-button .p-button-label {
+        flex-grow: 0;
+    }
+
+    .p-column-filter-buttonbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
+        width: auto;
+    }
+
+    /* Responsive */
+    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+        display: none;
+    }
+
+    /* VirtualScroller */
+    .p-datatable-virtualscroller-spacer {
+        display: flex;
+    }
+
+    .p-datatable .p-virtualscroller .p-virtualscroller-loading {
+        transform: none;
+        min-height: 0;
+        position: sticky;
+        top: 0;
+        left: 0;
+    }
+
+    /* Alignment */
+    .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,
+    .p-datatable .p-datatable-tbody > tr > td.p-align-left,
+    .p-datatable .p-datatable-tfoot > tr > td.p-align-left {
+        text-align: left;
+        justify-content: flex-start;
+    }
+
+    .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,
+    .p-datatable .p-datatable-tbody > tr > td.p-align-right,
+    .p-datatable .p-datatable-tfoot > tr > td.p-align-right {
+        text-align: right;
+        justify-content: flex-end;
+    }
+
+    .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,
+    .p-datatable .p-datatable-tbody > tr > td.p-align-center,
+    .p-datatable .p-datatable-tfoot > tr > td.p-align-center {
+        text-align: center;
+        justify-content: center;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, selectable }) =>
+        classNames('p-datatable p-component', {
+            'p-datatable-hoverable-rows': props.rowHover,
+            'p-datatable-selectable': selectable && !props.cellSelection,
+            'p-datatable-selectable-cell': selectable && props.cellSelection,
+            'p-datatable-resizable': props.resizableColumns,
+            'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
+            'p-datatable-scrollable': props.scrollable,
+            'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
+            'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
+            'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
+            'p-datatable-striped': props.stripedRows,
+            'p-datatable-gridlines': props.showGridlines,
+            'p-datatable-grouped-header': props.headerColumnGroup != null,
+            'p-datatable-grouped-footer': props.footerColumnGroup != null,
+            'p-datatable-sm': props.size === 'small',
+            'p-datatable-lg': props.size === 'large'
+        }),
+    loadingIcon: 'p-datatable-loading-icon',
+    loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
+    header: 'p-datatable-header',
+    wrapper: 'p-datatable-wrapper',
+    table: ({ props }) =>
+        classNames('p-datatable-table', {
+            'p-datatable-scrollable-table': props.scrollable,
+            'p-datatable-resizable-table': props.resizableColumns,
+            'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+        }),
+    thead: 'p-datatable-thead',
+    tfoot: 'p-datatable-tfoot',
+    footer: 'p-datatable-footer',
+    checkIcon: 'p-checkbox-icon',
+    resizeHelper: 'p-column-resizer-helper',
+    reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
+    reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
+    paginator: ({ position }) => classNames('p-paginator-' + position),
+    bodyCell: ({ selectionMode, editor, editingState, frozen, cellSelected, align, bodyProps: props, getCellParams }) =>
+        classNames({
+            'p-selection-column': selectionMode !== null,
+            'p-editable-column': editor,
+            'p-cell-editing': editor && editingState,
+            'p-frozen-column': frozen,
+            'p-selectable-cell': props.allowCellSelection && props.isSelectable({ data: getCellParams(), index: props.rowIndex }),
+            'p-highlight': cellSelected,
+            [`p-align-${align}`]: !!align
+        }),
+    columnTitle: 'p-column-title',
+    bodyRow: ({ rowProps: props }) =>
+        classNames({
+            'p-highlight': (!props.allowCellSelection && props.selected) || props.contextMenuSelected,
+            'p-highlight-contextmenu': props.contextMenuSelected,
+            'p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }),
+            'p-row-odd': props.rowIndex % 2 !== 0
+        }),
+    rowGroupTogglerIcon: 'p-row-toggler-icon',
+    rowGroupToggler: 'p-row-toggler p-link',
+    rowGroupHeader: 'p-rowgroup-header',
+    rowGroupHeaderName: 'p-rowgroup-header-name',
+    rowGroupFooter: 'p-rowgroup-footer',
+    rowReorderIcon: 'p-datatable-reorderablerow-handle',
+    rowTogglerIcon: 'p-row-toggler-icon',
+    rowToggler: 'p-row-toggler p-link',
+    rowEditorSaveIcon: 'p-row-editor-save-icon',
+    rowEditorSaveButton: 'p-row-editor-save p-link',
+    rowEditorCancelIcon: 'p-row-editor-cancel-icon',
+    rowEditorCancelButton: 'p-row-editor-cancel p-link',
+    rowEditorInitIcon: 'p-row-editor-init-icon',
+    rowEditorInitButton: 'p-row-editor-init p-link',
+    rowExpansion: 'p-datatable-row-expansion',
+    virtualScrollerSpacer: ({ className }) => className,
+    tbody: ({ className }) => className,
+    filterInput: 'p-fluid p-column-filter-element',
+    filterMenuButton: ({ overlayVisibleState, hasFilter }) =>
+        classNames('p-column-filter-menu-button p-link', {
+            'p-column-filter-menu-button-open': overlayVisibleState,
+            'p-column-filter-menu-button-active': hasFilter()
+        }),
+    headerFilterClearButton: ({ hasRowFilter }) =>
+        classNames('p-column-filter-clear-button p-link', {
+            'p-hidden-space': !hasRowFilter()
+        }),
+    filterSeparator: 'p-column-filter-separator',
+    filterRowItem: ({ isRowMatchModeSelected, isShowMatchModes, value }) => (isShowMatchModes() ? classNames('p-column-filter-row-item', { 'p-highlight': value && isRowMatchModeSelected(value) }) : undefined),
+    filterRowItems: 'p-column-filter-row-items',
+    filterOperator: 'p-column-filter-operator',
+    filterConstraints: 'p-column-filter-constraints',
+    filterConstraint: 'p-column-filter-constraint',
+    filterAddRule: 'p-column-filter-add-rule',
+    filterButtonBar: 'p-column-filter-buttonbar',
+    filterOverlay: ({ columnFilterProps: props, context, getColumnProp }) =>
+        classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
+            'p-column-filter-overlay-menu': props.display === 'menu',
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    columnFilter: ({ columnFilterProps: props }) =>
+        classNames('p-column-filter p-fluid', {
+            'p-column-filter-row': props.display === 'row',
+            'p-column-filter-menu': props.display === 'menu'
+        }),
+    columnResizer: 'p-column-resizer',
+    emptyMessage: 'p-datatable-emptymessage',
+    sortBadge: 'p-sortable-column-badge',
+    sortIcon: 'p-sortable-column-icon',
+    headerTitle: 'p-column-title',
+    headerContent: 'p-column-header-content',
+    headerCell: ({ headerProps: props, frozen, sortMeta, align, _isSortableDisabled, getColumnProp }) =>
+        ObjectUtils.isEmpty(props)
+            ? classNames('p-filter-column', { 'p-frozen-column': frozen })
+            : classNames({
+                  'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
+                  'p-sortable-column': getColumnProp('sortable'),
+                  'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
+                  'p-highlight': sortMeta.sorted,
+                  'p-frozen-column': frozen,
+                  'p-selection-column': getColumnProp('selectionMode'),
+                  'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
+                  'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen,
+                  [`p-align-${align}`]: !!align
+              }),
+    footerCell: ({ getColumnProp, align }) =>
+        classNames({
+            'p-frozen-column': getColumnProp('frozen'),
+            [`p-align-${align}`]: !!align
+        }),
+    transition: 'p-connected-overlay'
+};
+
+const inlineStyles = {
+    wrapper: { overflow: 'auto' },
+    resizeHelper: { display: 'none' },
+    reorderIndicatorUp: ({ style }) => ({ ...style }),
+    reorderIndicatorDown: ({ style }) => ({ ...style })
+};
+
+export const DataTableBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'DataTable',
+        alwaysShowPaginator: true,
+        breakpoint: '960px',
+        cellClassName: null,
+        cellMemo: true,
+        cellMemoProps: ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'],
+        cellMemoPropsDepth: 1,
+        cellSelection: false,
+        checkIcon: null,
+        className: null,
+        collapsedRowIcon: null,
+        columnResizeMode: 'fit',
+        compareSelectionBy: 'deepEquals',
+        contextMenuSelection: null,
+        csvSeparator: ',',
+        currentPageReportTemplate: '({currentPage} of {totalPages})',
+        customRestoreState: null,
+        customSaveState: null,
+        dataKey: null,
+        defaultSortOrder: 1,
+        dragSelection: false,
+        editMode: null,
+        editingRows: null,
+        emptyMessage: null,
+        expandableRowGroups: false,
+        expandedRowIcon: null,
+        expandedRows: null,
+        exportFilename: 'download',
+        exportFunction: null,
+        filterClearIcon: null,
+        filterDelay: 300,
+        filterDisplay: 'menu',
+        filterIcon: null,
+        filterLocale: undefined,
+        filters: null,
+        first: 0,
+        footer: null,
+        footerColumnGroup: null,
+        frozenRow: false,
+        frozenValue: null,
+        frozenWidth: null,
+        globalFilter: null,
+        globalFilterFields: null,
+        globalFilterMatchMode: FilterMatchMode.CONTAINS,
+        groupRowsBy: null,
+        header: null,
+        headerColumnGroup: null,
+        id: null,
+        isDataSelectable: null,
+        lazy: false,
+        loading: false,
+        loadingIcon: null,
+        metaKeySelection: false,
+        multiSortMeta: null,
+        onAllRowsSelect: null,
+        onAllRowsUnselect: null,
+        onCellClick: null,
+        onCellSelect: null,
+        onCellUnselect: null,
+        onColReorder: null,
+        onColumnResizeEnd: null,
+        onColumnResizerClick: null,
+        onColumnResizerDoubleClick: null,
+        onContextMenu: null,
+        onContextMenuSelectionChange: null,
+        onFilter: null,
+        onPage: null,
+        onRowClick: null,
+        onRowCollapse: null,
+        onRowDoubleClick: null,
+        onRowEditCancel: null,
+        onRowEditChange: null,
+        onRowEditComplete: null,
+        onRowEditInit: null,
+        onRowEditSave: null,
+        onRowExpand: null,
+        onRowMouseEnter: null,
+        onRowMouseLeave: null,
+        onRowPointerDown: null,
+        onRowPointerUp: null,
+        onRowReorder: null,
+        onRowSelect: null,
+        onRowToggle: null,
+        onRowUnselect: null,
+        onSelectAllChange: null,
+        onSelectionChange: null,
+        onSort: null,
+        onStateRestore: null,
+        onStateSave: null,
+        onValueChange: null,
+        pageLinkSize: 5,
+        paginator: false,
+        paginatorClassName: null,
+        paginatorDropdownAppendTo: null,
+        paginatorLeft: null,
+        paginatorPosition: 'bottom',
+        paginatorRight: null,
+        paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+        removableSort: false,
+        reorderIndicatorDownIcon: null,
+        reorderIndicatorUpIcon: null,
+        reorderableColumns: false,
+        reorderableRows: false,
+        resizableColumns: false,
+        responsiveLayout: 'scroll',
+        rowClassName: null,
+        rowEditValidator: null,
+        rowEditorCancelIcon: null,
+        rowEditorInitIcon: null,
+        rowEditorSaveIcon: null,
+        rowExpansionTemplate: null,
+        rowGroupFooterTemplate: null,
+        rowGroupHeaderTemplate: null,
+        rowGroupMode: null,
+        rowHover: false,
+        rows: null,
+        rowsPerPageOptions: null,
+        scrollHeight: null,
+        scrollable: false,
+        selectAll: false,
+        selectOnEdit: true,
+        selection: null,
+        selectionAriaLabel: null,
+        selectionAutoFocus: true,
+        selectionMode: null,
+        selectionPageOnly: false,
+        showGridlines: false,
+        showHeaders: true,
+        showRowReorderElement: null,
+        showSelectAll: true,
+        showSelectionElement: null,
+        size: 'normal',
+        sortField: null,
+        sortIcon: null,
+        sortMode: 'single',
+        sortOrder: null,
+        stateKey: null,
+        stateStorage: 'session',
+        stripedRows: false,
+        style: null,
+        tabIndex: 0,
+        tableClassName: null,
+        tableStyle: null,
+        totalRecords: null,
+        value: null,
+        virtualScrollerOptions: null,
+        children: undefined
+    },
+    css: {
+        styles,
+        classes,
+        inlineStyles
+    }
+});
diff --git a/components/lib/datatable/FooterCell.js b/components/lib/datatable/FooterCell.js
new file mode 100644
index 0000000000..233cbaf99a
--- /dev/null
+++ b/components/lib/datatable/FooterCell.js
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+
+export const FooterCell = React.memo((props) => {
+    const [styleObjectState, setStyleObjectState] = React.useState({});
+    const elementRef = React.useRef(null);
+    const mergeProps = useMergeProps();
+    const getColumnProps = () => ColumnBase.getCProps(props.column);
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+
+    const getColumnPTOptions = (key) => {
+        const cProps = getColumnProps();
+        const columnMetaData = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {
+                styleObject: styleObjectState
+            },
+            context: {
+                index: props.index,
+                size: props.metaData.props.size,
+                showGridlines: props.metaData.props.showGridlines
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData));
+    };
+
+    const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
+
+    const getStyle = () => {
+        const footerStyle = getColumnProp('footerStyle');
+        const columnStyle = getColumnProp('style');
+
+        return getColumnProp('frozen') ? Object.assign({}, columnStyle, footerStyle, styleObjectState) : Object.assign({}, columnStyle, footerStyle);
+    };
+
+    const updateStickyPosition = () => {
+        if (getColumnProp('frozen')) {
+            let styleObject = { ...styleObjectState };
+            let align = getColumnProp('alignFrozen');
+
+            if (align === 'right') {
+                let right = 0;
+                let next = elementRef.current && elementRef.current.nextElementSibling;
+
+                if (next && next.classList.contains('p-frozen-column')) {
+                    right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+                }
+
+                styleObject.right = right + 'px';
+            } else {
+                let left = 0;
+                let prev = elementRef.current && elementRef.current.previousElementSibling;
+
+                while (prev) {
+                    if (prev && prev.classList.contains('p-frozen-column')) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                        elementRef.current.style.left = left + 'px';
+                        break;
+                    }
+
+                    prev = prev.previousElementSibling;
+                }
+
+                styleObject.left = left + 'px';
+            }
+
+            const isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
+
+            !isSameStyle && setStyleObjectState(styleObject);
+        }
+    };
+
+    React.useEffect(() => {
+        if (getColumnProp('frozen')) {
+            updateStickyPosition();
+        }
+    });
+
+    const style = getStyle();
+    const align = getColumnProp('align');
+    const colSpan = getColumnProp('colSpan');
+    const rowSpan = getColumnProp('rowSpan');
+    const content = ObjectUtils.getJSXElement(getColumnProp('footer'), { props: props.tableProps });
+    const footerCellProps = mergeProps(
+        {
+            style,
+            className: classNames(getColumnProp('footerClassName'), getColumnProp('className'), cx('footerCell', { getColumnProp, align })),
+            role: 'cell',
+            colSpan,
+            rowSpan
+        },
+        getColumnPTOptions('root'),
+        getColumnPTOptions('footerCell')
+    );
+
+    return (
+        <td ref={elementRef} {...footerCellProps}>
+            {content}
+        </td>
+    );
+});
+
+FooterCell.displayName = 'FooterCell';
diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js
new file mode 100644
index 0000000000..bf9d22e14f
--- /dev/null
+++ b/components/lib/datatable/HeaderCell.js
@@ -0,0 +1,457 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps, usePrevious } from '../hooks/Hooks';
+import { SortAltIcon } from '../icons/sortalt';
+import { SortAmountDownIcon } from '../icons/sortamountdown';
+import { SortAmountUpAltIcon } from '../icons/sortamountupalt';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { ColumnFilter } from './ColumnFilter';
+import { HeaderCheckbox } from './HeaderCheckbox';
+
+export const HeaderCell = React.memo((props) => {
+    const [styleObjectState, setStyleObjectState] = React.useState({});
+    const elementRef = React.useRef(null);
+    const prevColumn = usePrevious(props.column);
+    const mergeProps = useMergeProps();
+    const { metaData: parentMetaData, ptCallbacks, index } = props;
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+
+    const params = { index };
+    const parentParams = { ...parentMetaData, ...params };
+    const getColumnProps = () => ColumnBase.getCProps(props.column);
+
+    const getColumnPTOptions = (key) => {
+        const cProps = getColumnProps();
+        const columnMetaData = {
+            props: cProps,
+            parent: parentParams,
+            hostName: props.hostName,
+            state: {
+                styleObject: styleObjectState
+            },
+            context: {
+                index: props.index,
+                sorted: getSortMeta().sorted,
+                resizable: props.resizableColumns,
+                size: props.metaData.props.size,
+                showGridlines: props.metaData.props.showGridlines
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData));
+    };
+
+    const isBadgeVisible = () => {
+        return props.multiSortMeta && props.multiSortMeta.length > 1;
+    };
+
+    const isSortableDisabled = () => {
+        return !getColumnProp('sortable') || (getColumnProp('sortable') && (props.allSortableDisabled || getColumnProp('sortableDisabled')));
+    };
+
+    const getColumnProp = (...args) => {
+        return props.column ? (typeof args[0] === 'string' ? ColumnBase.getCProp(props.column, args[0]) : ColumnBase.getCProp(args[0] || props.column, args[1])) : null;
+    };
+
+    const getStyle = () => {
+        const headerStyle = getColumnProp('headerStyle');
+        const columnStyle = getColumnProp('style');
+
+        return getColumnProp('frozen') ? Object.assign({}, columnStyle, headerStyle, styleObjectState) : Object.assign({}, columnStyle, headerStyle);
+    };
+
+    const getMultiSortMetaIndex = () => {
+        return props.multiSortMeta.findIndex((meta) => meta.field === getColumnProp('field') || meta.field === getColumnProp('sortField'));
+    };
+
+    const getSortMeta = () => {
+        let sorted = false;
+        let sortOrder = 0;
+        let metaIndex = -1;
+
+        if (props.sortMode === 'single') {
+            sorted = props.sortField && (props.sortField === getColumnProp('field') || props.sortField === getColumnProp('sortField'));
+            sortOrder = sorted ? props.sortOrder : 0;
+        } else if (props.sortMode === 'multiple') {
+            metaIndex = getMultiSortMetaIndex();
+
+            if (metaIndex > -1) {
+                sorted = true;
+                sortOrder = props.multiSortMeta[metaIndex].order;
+            }
+        }
+
+        return { sorted, sortOrder, metaIndex };
+    };
+
+    const getAriaSort = ({ sorted, sortOrder }) => {
+        if (getColumnProp('sortable')) {
+            if (sorted && sortOrder < 0) {
+                return 'descending';
+            } else if (sorted && sortOrder > 0) {
+                return 'ascending';
+            }
+
+            return 'none';
+        }
+
+        return null;
+    };
+
+    const updateStickyPosition = () => {
+        if (getColumnProp('frozen')) {
+            let styleObject = { ...styleObjectState };
+            let align = getColumnProp('alignFrozen');
+
+            if (align === 'right') {
+                let right = 0;
+                let next = elementRef.current && elementRef.current.nextElementSibling;
+
+                if (next && next.classList.contains('p-frozen-column')) {
+                    right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+                }
+
+                styleObject.right = right + 'px';
+            } else {
+                let left = 0;
+                let prev = elementRef.current?.previousElementSibling;
+
+                const thead = elementRef.current?.closest('thead');
+                const scrollContainer = thead?.parentElement.parentElement;
+                const scrollLeft = scrollContainer?.scrollLeft || 0;
+
+                const isMultiRow = thead && thead.querySelectorAll('tr').length > 1;
+
+                if (elementRef.current) {
+                    if (!isMultiRow) {
+                        while (prev) {
+                            if (prev.classList.contains('p-frozen-column')) {
+                                left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+                                break;
+                            }
+
+                            prev = prev.previousElementSibling;
+                        }
+                    } else {
+                        const targetLeft = elementRef.current.offsetLeft - scrollLeft;
+                        const frozenCells = Array.from(thead.querySelectorAll('th.p-frozen-column'));
+
+                        let candidate = null;
+
+                        for (const cell of frozenCells) {
+                            const cellLeft = cell.offsetLeft - scrollLeft;
+                            const cellRight = cellLeft + DomHandler.getOuterWidth(cell);
+
+                            if (cellRight <= targetLeft && (!candidate || cellRight > candidate.offsetLeft + DomHandler.getOuterWidth(candidate))) {
+                                candidate = cell;
+                            }
+                        }
+
+                        if (candidate) {
+                            left = candidate.offsetLeft + DomHandler.getOuterWidth(candidate) - scrollLeft;
+                        }
+                    }
+                }
+
+                styleObject.left = left + 'px';
+            }
+
+            let filterRow = elementRef.current.parentElement.nextElementSibling;
+
+            if (filterRow) {
+                let index = DomHandler.index(elementRef.current);
+
+                if (filterRow.children[index]) {
+                    filterRow.children[index].style.left = styleObject.left;
+                    filterRow.children[index].style.right = styleObject.right;
+                }
+            }
+
+            const isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
+
+            !isSameStyle && setStyleObjectState(styleObject);
+        }
+    };
+
+    const updateSortableDisabled = (prevColumn) => {
+        if (getColumnProp(prevColumn, 'sortableDisabled') !== getColumnProp('sortableDisabled') || getColumnProp(prevColumn, 'sortable') !== getColumnProp('sortable')) {
+            props.onSortableChange();
+        }
+    };
+
+    const onClick = (event) => {
+        if (!isSortableDisabled()) {
+            let targetNode = event.target;
+
+            if (
+                DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
+                DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' ||
+                DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' ||
+                DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sortIcon' ||
+                DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sortIcon' ||
+                (targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]'))
+            ) {
+                DomHandler.clearSelection();
+
+                props.onSortChange({
+                    originalEvent: event,
+                    column: props.column,
+                    sortableDisabledFields: props.sortableDisabledFields
+                });
+            }
+        }
+    };
+
+    const onMouseDown = (event) => {
+        props.onColumnMouseDown({ originalEvent: event, column: props.column });
+    };
+
+    const onKeyDown = (event) => {
+        if ((event.code == 'Enter' || event.code === 'NumpadEnter' || event.code == 'Space') && event.target === elementRef.current && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column') === true) {
+            onClick(event);
+
+            event.preventDefault();
+        }
+    };
+
+    const onDragStart = (event) => {
+        props.onColumnDragStart({ originalEvent: event, column: props.column });
+    };
+
+    const onDragOver = (event) => {
+        props.onColumnDragOver({ originalEvent: event, column: props.column });
+    };
+
+    const onDragLeave = (event) => {
+        props.onColumnDragLeave({ originalEvent: event, column: props.column });
+    };
+
+    const onDrop = (event) => {
+        props.onColumnDrop({ originalEvent: event, column: props.column });
+    };
+
+    const onResizeStart = (event) => {
+        props.onColumnResizeStart({ originalEvent: event, column: props.column });
+    };
+
+    const onResizerClick = (event) => {
+        if (props.onColumnResizerClick) {
+            props.onColumnResizerClick({
+                originalEvent: event,
+                element: event.currentTarget.parentElement,
+                column: props.column
+            });
+
+            event.preventDefault();
+        }
+    };
+
+    const onResizerDoubleClick = (event) => {
+        if (props.onColumnResizerDoubleClick) {
+            props.onColumnResizerDoubleClick({
+                originalEvent: event,
+                element: event.currentTarget.parentElement,
+                column: props.column
+            });
+
+            event.preventDefault();
+        }
+    };
+
+    React.useEffect(() => {
+        if (getColumnProp('frozen')) {
+            updateStickyPosition();
+        }
+
+        updateSortableDisabled(prevColumn);
+    });
+
+    const createResizer = () => {
+        if (props.resizableColumns && !getColumnProp('frozen')) {
+            const columnResizerProps = mergeProps(
+                {
+                    className: cx('columnResizer'),
+                    onMouseDown: (e) => onResizeStart(e),
+                    onTouchStart: (e) => onResizeStart(e),
+                    onClick: (e) => onResizerClick(e),
+                    onDoubleClick: (e) => onResizerDoubleClick(e)
+                },
+                getColumnPTOptions('columnResizer')
+            );
+
+            return <span {...columnResizerProps} />;
+        }
+
+        return null;
+    };
+
+    const createTitle = () => {
+        const title = ObjectUtils.getJSXElement(getColumnProp('header'), { props: props.tableProps });
+        const headerTitleProps = mergeProps(
+            {
+                className: cx('headerTitle')
+            },
+            getColumnPTOptions('headerTitle')
+        );
+
+        return <span {...headerTitleProps}>{title}</span>;
+    };
+
+    const createSortIcon = ({ sorted, sortOrder }) => {
+        if (getColumnProp('sortable')) {
+            const sortIconProps = mergeProps(
+                {
+                    className: cx('sortIcon')
+                },
+                getColumnPTOptions('sortIcon')
+            );
+
+            const sortProps = mergeProps(getColumnPTOptions('sort'));
+
+            let icon = sorted ? sortOrder < 0 ? <SortAmountDownIcon {...sortIconProps} /> : <SortAmountUpAltIcon {...sortIconProps} /> : <SortAltIcon {...sortIconProps} />;
+            let sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, { ...sortIconProps }, { props, sorted, sortOrder });
+
+            return <span {...sortProps}>{sortIcon}</span>;
+        }
+
+        return null;
+    };
+
+    const createBadge = ({ metaIndex }) => {
+        if (metaIndex !== -1 && isBadgeVisible()) {
+            const value = props.groupRowsBy && props.groupRowsBy === props.groupRowSortField ? metaIndex : metaIndex + 1;
+            const sortBadgeProps = mergeProps(
+                {
+                    className: cx('sortBadge')
+                },
+                getColumnPTOptions('root'),
+                getColumnPTOptions('sortBadge')
+            );
+
+            return <span {...sortBadgeProps}>{value}</span>;
+        }
+
+        return null;
+    };
+
+    const createCheckbox = () => {
+        if (props.showSelectAll && getColumnProp('selectionMode') === 'multiple' && props.filterDisplay !== 'row') {
+            const allRowsSelected = props.allRowsSelected(props.value);
+
+            return (
+                <HeaderCheckbox hostName={props.hostName} column={props.column} checked={allRowsSelected} onChange={props.onColumnCheckboxChange} disabled={props.empty} ptCallbacks={ptCallbacks} metaData={parentMetaData} unstyled={props.unstyled} />
+            );
+        }
+
+        return null;
+    };
+
+    const createFilter = () => {
+        if (props.filterDisplay === 'menu' && getColumnProp('filter')) {
+            return (
+                <ColumnFilter
+                    hostName={props.hostName}
+                    display="menu"
+                    column={props.column}
+                    filters={props.filters}
+                    onFilterChange={props.onFilterChange}
+                    onFilterApply={props.onFilterApply}
+                    filtersStore={props.filtersStore}
+                    filterIcon={props.filterIcon}
+                    filterClearIcon={props.filterClearIcon}
+                    ptCallbacks={ptCallbacks}
+                    metaData={parentMetaData}
+                    unstyled={props.unstyled}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    const createHeader = (sortMeta) => {
+        const title = createTitle();
+        const sortIcon = createSortIcon(sortMeta);
+        const badge = createBadge(sortMeta);
+        const checkbox = createCheckbox();
+        const filter = createFilter();
+        const headerContentProps = mergeProps(
+            {
+                className: cx('headerContent')
+            },
+            getColumnPTOptions('headerContent')
+        );
+
+        return (
+            <div {...headerContentProps}>
+                {title}
+                {sortIcon}
+                {badge}
+                {checkbox}
+                {filter}
+            </div>
+        );
+    };
+
+    const createElement = () => {
+        const _isSortableDisabled = isSortableDisabled();
+        const sortMeta = getSortMeta();
+        const style = getStyle();
+        const align = getColumnProp('alignHeader') || getColumnProp('align');
+        const frozen = getColumnProp('frozen');
+        const tabIndex = getColumnProp('sortable') && !_isSortableDisabled ? props.tabIndex : null;
+        const colSpan = getColumnProp('colSpan');
+        const rowSpan = getColumnProp('rowSpan');
+        const ariaSort = getAriaSort(sortMeta);
+        const headerTooltip = getColumnProp('headerTooltip');
+        const headerClassName = getColumnProp('headerClassName');
+        const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
+        const headerTooltipOptions = getColumnProp('headerTooltipOptions');
+
+        const resizer = createResizer();
+        const header = createHeader(sortMeta);
+        const headerCellProps = mergeProps(
+            {
+                className: classNames(headerClassName, cx('headerCell', { headerProps: props, frozen, sortMeta, align, _isSortableDisabled, getColumnProp })),
+                style,
+                role: 'columnheader',
+                onClick: (e) => onClick(e),
+                onKeyDown: (e) => onKeyDown(e),
+                onMouseDown: (e) => onMouseDown(e),
+                onDragStart: (e) => onDragStart(e),
+                onDragOver: (e) => onDragOver(e),
+                onDragLeave: (e) => onDragLeave(e),
+                onDrop: (e) => onDrop(e),
+                tabIndex,
+                colSpan,
+                rowSpan,
+                'aria-sort': ariaSort,
+                'data-p-sortable-column': getColumnProp('sortable'),
+                'data-p-resizable-column': props.resizableColumns,
+                'data-p-highlight': sortMeta.sorted,
+                'data-p-filter-column': !props.metaData.props.headerColumnGroup && props.filterDisplay === 'row',
+                'data-p-frozen-column': getColumnProp('frozen'),
+                'data-p-reorderable-column': props.reorderableColumns
+            },
+            getColumnPTOptions('root'),
+            getColumnPTOptions('headerCell')
+        );
+
+        return (
+            <>
+                <th ref={elementRef} {...headerCellProps}>
+                    {resizer}
+                    {header}
+                </th>
+                {hasTooltip && <Tooltip target={elementRef} content={headerTooltip} pt={getColumnPTOptions('tooltip')} unstyled={props.unstyled} {...headerTooltipOptions} />}
+            </>
+        );
+    };
+
+    const element = createElement();
+
+    return element;
+});
+
+HeaderCell.displayName = 'HeaderCell';
diff --git a/components/lib/datatable/HeaderCheckbox.js b/components/lib/datatable/HeaderCheckbox.js
new file mode 100644
index 0000000000..6ee9fde8aa
--- /dev/null
+++ b/components/lib/datatable/HeaderCheckbox.js
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Locale';
+import { Checkbox } from '../checkbox/Checkbox';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { IconUtils } from '../utils/Utils';
+
+export const HeaderCheckbox = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const getColumnProps = () => ColumnBase.getCProps(props.column);
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+
+    const getColumnPTOptions = (key) => {
+        const cProps = getColumnProps();
+
+        const columnMetaData = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {},
+            context: {
+                checked: props.checked,
+                disabled: props.disabled
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData));
+    };
+
+    const onChange = (event) => {
+        if (!props.disabled) {
+            props.onChange({
+                originalEvent: event,
+                checked: !props.checked
+            });
+        }
+    };
+
+    const headerCheckboxIconProps = mergeProps(
+        {
+            className: cx('checkIcon')
+        },
+        getColumnPTOptions('headerCheckbox.icon')
+    );
+
+    const icon = props.checked ? props.checkIcon || <CheckIcon {...headerCheckboxIconProps} /> : null;
+    const checkIcon = IconUtils.getJSXIcon(icon, { ...headerCheckboxIconProps }, { props });
+    const tabIndex = props.disabled ? null : 0;
+
+    const headerCheckboxProps = {
+        role: 'checkbox',
+        'aria-label': props.checked ? ariaLabel('selectAll') : ariaLabel('unselectAll'),
+        tabIndex: tabIndex,
+        onChange: onChange,
+        icon: checkIcon,
+        checked: props.checked,
+        disabled: props.disabled,
+        unstyled: props.unstyled,
+        pt: getColumnPTOptions('headerCheckbox')
+    };
+
+    return <Checkbox {...headerCheckboxProps} />;
+});
+
+HeaderCheckbox.displayName = 'HeaderCheckbox';
diff --git a/components/lib/datatable/RowCheckbox.js b/components/lib/datatable/RowCheckbox.js
new file mode 100644
index 0000000000..904f3b71ea
--- /dev/null
+++ b/components/lib/datatable/RowCheckbox.js
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { IconUtils } from '../utils/Utils';
+
+export const RowCheckbox = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const getColumnProps = () => ColumnBase.getCProps(props.column);
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+
+    const getColumnPTOptions = (key) => {
+        const columnMetaData = {
+            props: getColumnProps(),
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {},
+            context: {
+                index: props.tabIndex,
+                checked: props.checked,
+                disabled: props.disabled
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
+    };
+
+    const onChange = (event) => {
+        if (!props.disabled) {
+            props.onChange(event);
+        }
+    };
+
+    const checkboxIconProps = mergeProps(
+        {
+            className: cx('checkIcon')
+        },
+        getColumnPTOptions('rowCheckbox.icon')
+    );
+    const icon = props.checked ? props.checkIcon || <CheckIcon {...checkboxIconProps} /> : null;
+    const checkIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, { props });
+    const tabIndex = props.disabled ? null : '0';
+
+    const checkboxProps = {
+        role: 'checkbox',
+        tabIndex: tabIndex,
+        onChange: onChange,
+        'aria-label': props.ariaLabel,
+        checked: props.checked,
+        icon: checkIcon,
+        disabled: props.disabled,
+        unstyled: props.unstyled,
+        pt: getColumnPTOptions('rowCheckbox')
+    };
+
+    return <Checkbox {...checkboxProps} />;
+});
+
+RowCheckbox.displayName = 'RowCheckbox';
diff --git a/components/lib/datatable/RowRadioButton.js b/components/lib/datatable/RowRadioButton.js
new file mode 100644
index 0000000000..fb7c985be7
--- /dev/null
+++ b/components/lib/datatable/RowRadioButton.js
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { RadioButton } from '../radiobutton/RadioButton';
+
+export const RowRadioButton = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const getColumnProps = () => ColumnBase.getCProps(props.column);
+    const { ptm, ptmo } = props.ptCallbacks;
+
+    const getColumnPTOptions = (key) => {
+        const columnMetaData = {
+            props: getColumnProps(),
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {},
+            context: {
+                index: props.tabIndex,
+                checked: props.checked,
+                disabled: props.disabled
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
+    };
+
+    const onChange = (event) => {
+        if (!props.disabled) {
+            props.onChange(event);
+        }
+    };
+
+    const radioButtonProps = {
+        role: 'radio',
+        'aria-checked': props.checked,
+        checked: props.checked,
+        disabled: props.disabled,
+        name: `${props.tableSelector}_dt_radio`,
+        onChange: onChange,
+        unstyled: props.unstyled,
+        pt: getColumnPTOptions('rowRadioButton')
+    };
+
+    return <RadioButton {...radioButtonProps} />;
+});
+
+RowRadioButton.displayName = 'RowRadioButton';
diff --git a/components/lib/datatable/RowTogglerButton.js b/components/lib/datatable/RowTogglerButton.js
new file mode 100644
index 0000000000..df581a7b1c
--- /dev/null
+++ b/components/lib/datatable/RowTogglerButton.js
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { Ripple } from '../ripple/Ripple';
+import { IconUtils } from '../utils/Utils';
+
+export const RowTogglerButton = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks;
+
+    const onClick = (event) => {
+        props.onClick({
+            originalEvent: event,
+            data: props.rowData
+        });
+    };
+
+    const getColumnProps = () => ColumnBase.getCProps(props.column);
+
+    const getColumnPTOptions = (key) => {
+        const cProps = getColumnProps();
+        const columnMetaData = {
+            props: getColumnProps(),
+            parent: props.metaData,
+            hostName: props.hostName
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData));
+    };
+
+    const rowGroupTogglerIconProps = mergeProps(
+        {
+            className: cx('rowGroupTogglerIcon'),
+            'aria-hidden': true
+        },
+        ptm('rowGroupTogglerIcon'),
+        getColumnPTOptions('rowGroupTogglerIcon')
+    );
+    const icon = props.expanded ? props.expandedRowIcon || <ChevronDownIcon {...rowGroupTogglerIconProps} /> : props.collapsedRowIcon || <ChevronRightIcon {...rowGroupTogglerIconProps} />;
+    const togglerIcon = IconUtils.getJSXIcon(icon, { ...rowGroupTogglerIconProps }, { props });
+    const label = props.expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
+    const rowGroupTogglerProps = mergeProps(
+        {
+            type: 'button',
+            onClick: (e) => onClick(e),
+            className: cx('rowGroupToggler'),
+            tabIndex: props.tabIndex,
+            'aria-label': label
+        },
+        ptm('rowGroupToggler'),
+        getColumnPTOptions('rowGroupToggler')
+    );
+
+    return (
+        <button {...rowGroupTogglerProps}>
+            {togglerIcon}
+            <Ripple />
+        </button>
+    );
+});
+
+RowTogglerButton.displayName = 'RowTogglerButton';
diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js
new file mode 100644
index 0000000000..0107e1e667
--- /dev/null
+++ b/components/lib/datatable/TableBody.js
@@ -0,0 +1,1189 @@
+import * as React from 'react';
+import { localeOption } from '../api/Api';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { BodyRow } from './BodyRow';
+import { RowTogglerButton } from './RowTogglerButton';
+
+export const TableBody = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks;
+        const [rowGroupHeaderStyleObjectState, setRowGroupHeaderStyleObjectState] = React.useState({});
+        const getColumnProps = (column) => ColumnBase.getCProps(column);
+        const cProps = getColumnProps(props.column);
+        const colsProps = props.columns ? props.columns.map((col) => getColumnProps(col)) : [];
+
+        const getColumnPTOptions = (key) => {
+            const columnMetaData = {
+                props: cProps,
+                parent: props.metaData,
+                hostName: props.hostName,
+                state: {
+                    rowGroupHeaderStyleObject: rowGroupHeaderStyleObjectState
+                }
+            };
+
+            return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData));
+        };
+
+        const elementRef = React.useRef(null);
+        const refCallback = React.useCallback(
+            (el) => {
+                elementRef.current = el;
+                props.virtualScrollerContentRef && props.virtualScrollerContentRef(el);
+            },
+            [props]
+        );
+        const dragSelectionHelper = React.useRef(null);
+        const initialDragPosition = React.useRef(null);
+        const anchorRowIndex = React.useRef(null);
+        const anchorCellIndex = React.useRef(null);
+        const rangeRowIndex = React.useRef(null);
+        const anchorRowFirst = React.useRef(null);
+        const rowTouched = React.useRef(false);
+        const rowDragging = React.useRef(false);
+        const draggedRowIndex = React.useRef(null);
+        const droppedRowIndex = React.useRef(null);
+        const isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
+        const isRadioSelectionMode = props.selectionMode === 'radiobutton';
+        const isCheckboxSelectionMode = props.selectionMode === 'checkbox';
+        const isRadioSelectionModeInColumn = props.selectionModeInColumn === 'single';
+        const isCheckboxSelectionModeInColumn = props.selectionModeInColumn === 'multiple';
+
+        const equals = (data1, data2) => {
+            if (allowCellSelection()) {
+                return (data1.rowIndex === data2.rowIndex || data1.rowData === data2.rowData) && (data1.field === data2.field || data1.cellIndex === data2.cellIndex);
+            }
+
+            return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
+        };
+
+        const isSelectionEnabled = () => {
+            return props.selectionMode || props.selectionModeInColumn !== null || (props.columns && props.columns.some((col) => col && !!getColumnProp(col, 'selectionMode')));
+        };
+
+        const isSingleSelection = () => {
+            return (props.selectionMode === 'single' && !isCheckboxSelectionModeInColumn) || (!isRadioSelectionMode && isRadioSelectionModeInColumn);
+        };
+
+        const isMultipleSelection = () => {
+            return (props.selectionMode === 'multiple' && !isRadioSelectionModeInColumn) || isCheckboxSelectionModeInColumn;
+        };
+
+        const isRadioOnlySelection = () => {
+            return isRadioSelectionMode && isRadioSelectionModeInColumn;
+        };
+
+        const isCheckboxOnlySelection = () => {
+            return isCheckboxSelectionMode && isCheckboxSelectionModeInColumn;
+        };
+
+        const isSelected = (rowData) => {
+            if (rowData && props.selection) {
+                return props.selection instanceof Array ? findIndex(props.selection, rowData) > -1 : equals(rowData, props.selection);
+            }
+
+            return false;
+        };
+
+        const isContextMenuSelected = (rowData) => {
+            if (rowData && props.contextMenuSelection) {
+                return equals(rowData, props.contextMenuSelection);
+            }
+
+            return false;
+        };
+
+        const isSelectable = (options) => {
+            return props.isDataSelectable ? props.isDataSelectable(options) : true;
+        };
+
+        const isRowExpanded = (rowData) => {
+            if (rowData && props.expandedRows) {
+                if (isSubheaderGrouping && props.expandableRowGroups) {
+                    return isRowGroupExpanded(rowData);
+                }
+
+                if (props.dataKey) {
+                    const rowId = ObjectUtils.resolveFieldData(rowData, props.dataKey);
+                    let expanded = false;
+
+                    if (props.expandedRows) {
+                        if (Array.isArray(props.expandedRows)) {
+                            expanded = props.expandedRows.some((row) => ObjectUtils.resolveFieldData(row, props.dataKey) === rowId);
+                        } else {
+                            expanded = props.expandedRows[rowId] !== undefined;
+                        }
+                    }
+
+                    return expanded;
+                }
+
+                return findIndex(props.expandedRows, rowData) !== -1;
+            }
+
+            return false;
+        };
+
+        const isRowGroupExpanded = (rowData) => {
+            if (props.dataKey === props.groupRowsBy) {
+                return Object.keys(props.expandedRows).some((data) => ObjectUtils.equals(data, ObjectUtils.resolveFieldData(rowData, props.dataKey)));
+            }
+
+            return props.expandedRows.some((data) => ObjectUtils.equals(data, rowData, props.groupRowsBy));
+        };
+
+        const isRowEditing = (rowData) => {
+            if (props.editMode === 'row' && rowData && props.editingRows) {
+                if (props.dataKey) {
+                    return props.editingRows ? props.editingRows[ObjectUtils.resolveFieldData(rowData, props.dataKey)] !== undefined : false;
+                }
+
+                return findIndex(props.editingRows, rowData) !== -1;
+            }
+
+            return false;
+        };
+
+        const allowDrag = (event) => {
+            return props.dragSelection && isMultipleSelection() && !event.originalEvent.shiftKey;
+        };
+
+        const allowRowDrag = (event) => {
+            return (!allowCellSelection() && allowDrag(event)) || props.reorderableRows;
+        };
+
+        const allowCellDrag = (event) => {
+            return allowCellSelection() && allowDrag(event);
+        };
+
+        const allowSelection = (event) => {
+            return !DomHandler.isClickable(event.originalEvent.target);
+        };
+
+        const metaKeySelectionRef = React.useRef(props.metaKeySelection);
+
+        React.useEffect(() => {
+            metaKeySelectionRef.current = props.metaKeySelection;
+        }, [props.metaKeySelection]);
+
+        const allowMetaKeySelection = (event) => {
+            return !rowTouched.current && (!metaKeySelectionRef.current || (metaKeySelectionRef.current && (event.originalEvent.metaKey || event.originalEvent.ctrlKey)));
+        };
+
+        const allowRangeSelection = (event) => {
+            return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null;
+        };
+
+        const allowRowSelection = () => {
+            return (props.selectionMode || props.selectionModeInColumn) && !isRadioOnlySelection() && !isCheckboxOnlySelection();
+        };
+
+        const allowCellSelection = () => {
+            return props.cellSelection && !isRadioSelectionModeInColumn && !isCheckboxSelectionModeInColumn;
+        };
+
+        const getColumnsLength = () => {
+            return props.columns ? props.columns.length : 0;
+        };
+
+        const getColumnProp = (column, name) => {
+            return ColumnBase.getCProp(column, name);
+        };
+
+        const getVirtualScrollerOption = (option, options) => {
+            options = options || props.virtualScrollerOptions;
+
+            return options ? options[option] : null;
+        };
+
+        const findIndex = (collection, rowData) => {
+            return (collection || []).findIndex((data) => equals(rowData, data));
+        };
+
+        const rowGroupHeaderStyle = () => {
+            if (props.scrollable) {
+                return { top: rowGroupHeaderStyleObjectState.top };
+            }
+
+            return null;
+        };
+
+        const getRowKey = (rowData, index) => {
+            return props.dataKey ? ObjectUtils.resolveFieldData(rowData, props.dataKey) : index;
+        };
+
+        const shouldRenderRowGroupHeader = (value, rowData, i) => {
+            const currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
+            const prevRowData = value[i - 1];
+
+            if (prevRowData) {
+                const previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, props.groupRowsBy);
+
+                return !ObjectUtils.deepEquals(currentRowFieldData, previousRowFieldData);
+            }
+
+            return true;
+        };
+
+        const shouldRenderRowGroupFooter = (value, rowData, i, expanded) => {
+            if (props.expandableRowGroups && !expanded) {
+                return false;
+            }
+
+            const currentRowFieldData = ObjectUtils.resolveFieldData(rowData, props.groupRowsBy);
+            const nextRowData = value[i + 1];
+
+            if (nextRowData) {
+                const nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, props.groupRowsBy);
+
+                return !ObjectUtils.deepEquals(currentRowFieldData, nextRowFieldData);
+            }
+
+            return true;
+        };
+
+        const updateFrozenRowStickyPosition = () => {
+            elementRef.current.style.top = DomHandler.getOuterHeight(elementRef.current.previousElementSibling) + 'px';
+        };
+
+        const updateFrozenRowGroupHeaderStickyPosition = () => {
+            const tableHeaderHeight = DomHandler.getOuterHeight(elementRef.current.previousElementSibling);
+            const top = tableHeaderHeight + 'px';
+
+            if (rowGroupHeaderStyleObjectState.top !== top) {
+                setRowGroupHeaderStyleObjectState({ top });
+            }
+        };
+
+        const selectionRef = React.useRef(props.selection);
+
+        React.useEffect(() => {
+            selectionRef.current = props.selection;
+        }, [props.selection]);
+
+        const onSingleSelection = ({ originalEvent, data, index, toggleable, type }) => {
+            if (!isSelectable({ data, index })) {
+                return;
+            }
+
+            let selected = isSelected(data);
+            let currentSelection = selectionRef.current || [];
+            let newSelection = currentSelection;
+
+            if (selected) {
+                if (toggleable) {
+                    newSelection = null;
+                    onUnselect({ originalEvent, data, type });
+                }
+            } else {
+                newSelection = data;
+                onSelect({ originalEvent, data, type });
+            }
+
+            focusOnElement(originalEvent, true);
+
+            if (props.onSelectionChange && newSelection !== currentSelection) {
+                props.onSelectionChange({
+                    originalEvent,
+                    value: newSelection,
+                    type
+                });
+            }
+        };
+
+        const onMultipleSelection = ({ originalEvent, data, index, toggleable, type }) => {
+            if (!isSelectable({ data, index })) {
+                return;
+            }
+
+            let selected = isSelected(data);
+            let currentSelection = selectionRef.current || [];
+            let newSelection = currentSelection;
+
+            if (selected) {
+                if (toggleable) {
+                    let selectionIndex = findIndex(currentSelection, data);
+
+                    newSelection = currentSelection.filter((val, i) => i !== selectionIndex);
+                    onUnselect({ originalEvent, data, type });
+                } else if (currentSelection.length) {
+                    currentSelection.forEach((d) => onUnselect({ originalEvent, data: d, type }));
+                    newSelection = [data];
+                    onSelect({ originalEvent, data, type });
+                }
+            } else {
+                newSelection = ObjectUtils.isObject(currentSelection) ? [currentSelection] : currentSelection;
+                newSelection = toggleable && isMultipleSelection() ? [...newSelection, data] : [data];
+                onSelect({ originalEvent, data, type });
+            }
+
+            if (props.onSelectionChange && newSelection !== currentSelection) {
+                props.onSelectionChange({
+                    originalEvent,
+                    value: newSelection,
+                    type
+                });
+            }
+        };
+
+        const onRangeSelection = (event, type) => {
+            DomHandler.clearSelection();
+            rangeRowIndex.current = allowCellSelection() ? event.rowIndex : event.index;
+            const selection = selectRange(event);
+
+            if (props.onSelectionChange && selection !== props.selection) {
+                props.onSelectionChange({
+                    originalEvent: event.originalEvent,
+                    value: selection,
+                    type
+                });
+            }
+
+            anchorRowIndex.current = rangeRowIndex.current;
+            anchorCellIndex.current = event.cellIndex;
+        };
+
+        const selectRange = (event) => {
+            let rangeStart;
+            let rangeEnd;
+
+            const isAllowCellSelection = allowCellSelection();
+
+            if (rangeRowIndex.current > anchorRowIndex.current) {
+                rangeStart = anchorRowIndex.current;
+                rangeEnd = rangeRowIndex.current;
+            } else if (rangeRowIndex.current < anchorRowIndex.current) {
+                rangeStart = rangeRowIndex.current;
+                rangeEnd = anchorRowIndex.current;
+            } else {
+                rangeStart = rangeEnd = rangeRowIndex.current;
+            }
+
+            return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
+        };
+
+        const selectRangeOnRow = (event, rowRangeStart, rowRangeEnd) => {
+            let selection = [];
+
+            for (let i = rowRangeStart; i <= rowRangeEnd; i++) {
+                let rangeRowData = props.processedData[i];
+
+                if (!isSelectable({ data: rangeRowData, index: i })) {
+                    continue;
+                }
+
+                selection.push(rangeRowData);
+
+                onSelect({ originalEvent: event.originalEvent, data: rangeRowData, type: 'row' });
+            }
+
+            return selection;
+        };
+
+        const selectRangeOnCell = (event, rowRangeStart, rowRangeEnd) => {
+            let cellRangeStart;
+            let cellRangeEnd;
+            let cellIndex = event.cellIndex;
+
+            if (cellIndex > anchorCellIndex.current) {
+                cellRangeStart = anchorCellIndex.current;
+                cellRangeEnd = cellIndex;
+            } else if (cellIndex < anchorCellIndex.current) {
+                cellRangeStart = cellIndex;
+                cellRangeEnd = anchorCellIndex.current;
+            } else {
+                cellRangeStart = cellRangeEnd = cellIndex;
+            }
+
+            const value = props.value;
+            let selection = [];
+
+            for (let i = rowRangeStart; i <= rowRangeEnd; i++) {
+                let rowData = value[i];
+                let columns = props.columns;
+                let rowIndex = props.paginator ? i + props.first : i;
+
+                for (let j = cellRangeStart; j <= cellRangeEnd; j++) {
+                    let field = getColumnProp(columns[j], 'field');
+                    let value = ObjectUtils.resolveFieldData(rowData, field);
+                    let rangeRowData = {
+                        value,
+                        field,
+                        rowData,
+                        rowIndex,
+                        cellIndex: j,
+                        selected: true
+                    };
+
+                    if (!isSelectable({ data: rangeRowData, index: i })) {
+                        continue;
+                    }
+
+                    selection.push(rangeRowData);
+
+                    onSelect({ originalEvent: event.originalEvent, data: rangeRowData, type: 'cell' });
+                }
+            }
+
+            return selection;
+        };
+
+        const onSelect = (event) => {
+            if (allowCellSelection()) {
+                props.onCellSelect && props.onCellSelect({ originalEvent: event.originalEvent, ...event.data, type: event.type });
+            } else {
+                props.onRowSelect && props.onRowSelect(event);
+            }
+        };
+
+        const onUnselect = (event) => {
+            if (allowCellSelection()) {
+                props.onCellUnselect && props.onCellUnselect({ originalEvent: event.originalEvent, ...event.data, type: event.type });
+            } else {
+                props.onRowUnselect && props.onRowUnselect(event);
+            }
+        };
+
+        const enableDragSelection = (event) => {
+            if (props.dragSelection && !dragSelectionHelper.current) {
+                dragSelectionHelper.current = document.createElement('div');
+                dragSelectionHelper.current.setAttribute('p-datatable-drag-selection-helper', 'true');
+                !isUnstyled() && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
+
+                initialDragPosition.current = { x: event.clientX, y: event.clientY };
+                dragSelectionHelper.current.style.top = `${event.pageY}px`;
+                dragSelectionHelper.current.style.left = `${event.pageX}px`;
+
+                bindDragSelectionEvents();
+            }
+        };
+
+        const focusOnElement = (event, isFocused) => {
+            const target = event.currentTarget;
+
+            if (!allowCellSelection() && props.selectionAutoFocus) {
+                if (isCheckboxSelectionModeInColumn) {
+                    const checkbox = DomHandler.findSingle(target, 'td[data-p-selection-column="true"] [data-pc-section="checkbox"]');
+
+                    checkbox && checkbox.focus();
+                } else if (isRadioSelectionModeInColumn) {
+                    const radio = DomHandler.findSingle(target, 'td[data-p-selection-column="true"] input[type="radio"]');
+
+                    radio && radio.focus();
+                }
+            }
+
+            !isFocused && target && target.focus();
+        };
+
+        const changeTabIndex = (event, type) => {
+            const target = event.currentTarget;
+            const isSelectable = DomHandler.getAttribute(target, type === 'cell' ? 'data-p-selectable-cell' : 'data-p-selectable-row') === true;
+
+            if (isSelectable) {
+                const selector = type === 'cell' ? 'tr > td' : 'tr';
+                const tabbableEl = DomHandler.findSingle(elementRef.current, `${selector}[tabindex="${props.tabIndex}"]`);
+
+                if (tabbableEl && target) {
+                    tabbableEl.tabIndex = -1;
+                    target.tabIndex = props.tabIndex;
+                }
+            }
+        };
+
+        const onRowClick = (event) => {
+            if (event.defaultPrevented || (event.originalEvent && event.originalEvent.defaultPrevented) || allowCellSelection() || !allowSelection(event)) {
+                return;
+            }
+
+            props.onRowClick && props.onRowClick(event);
+
+            if (allowRowSelection()) {
+                if (allowRangeSelection(event)) {
+                    onRangeSelection(event, 'row');
+                } else {
+                    const toggleable = isRadioSelectionModeInColumn || isCheckboxSelectionModeInColumn || allowMetaKeySelection(event);
+
+                    anchorRowIndex.current = event.index;
+                    rangeRowIndex.current = event.index;
+                    anchorRowFirst.current = props.first;
+
+                    if (isSingleSelection()) {
+                        onSingleSelection({ ...event, toggleable, type: 'row' });
+                    } else {
+                        onMultipleSelection({ ...event, toggleable, type: 'row' });
+                    }
+                }
+
+                changeTabIndex(event.originalEvent, 'row');
+            } else {
+                focusOnElement(event.originalEvent);
+            }
+
+            rowTouched.current = false;
+        };
+
+        const onRowDoubleClick = (e) => {
+            const { originalEvent: event } = e;
+
+            if (DomHandler.isClickable(event.target)) {
+                return;
+            }
+
+            if (props.onRowDoubleClick) {
+                props.onRowDoubleClick(e);
+            }
+        };
+
+        const onRowPointerDown = (e) => {
+            const { originalEvent: event } = e;
+
+            if (DomHandler.isClickable(event.target)) {
+                return;
+            }
+
+            if (props.onRowPointerDown) {
+                props.onRowPointerDown(e);
+            }
+        };
+
+        const onRowPointerUp = (e) => {
+            const { originalEvent: event } = e;
+
+            if (DomHandler.isClickable(event.target)) {
+                return;
+            }
+
+            if (props.onRowPointerUp) {
+                props.onRowPointerUp(e);
+            }
+        };
+
+        const onRowRightClick = (event) => {
+            if (props.onContextMenu || props.onContextMenuSelectionChange) {
+                const hasSelection = ObjectUtils.isNotEmpty(props.selection);
+                const data = event.data;
+
+                if (hasSelection) {
+                    DomHandler.clearSelection();
+                }
+
+                if (props.onContextMenuSelectionChange) {
+                    props.onContextMenuSelectionChange({
+                        originalEvent: event.originalEvent,
+                        value: data,
+                        index: event.index
+                    });
+                }
+
+                if (props.onContextMenu) {
+                    props.onContextMenu({
+                        originalEvent: event.originalEvent,
+                        data,
+                        index: event.index
+                    });
+                }
+
+                event.originalEvent.preventDefault();
+            }
+        };
+
+        const onRowMouseEnter = (event) => {
+            props.onRowMouseEnter && props.onRowMouseEnter(event);
+        };
+
+        const onRowMouseLeave = (event) => {
+            props.onRowMouseLeave && props.onRowMouseLeave(event);
+        };
+
+        const onRowTouchEnd = () => {
+            rowTouched.current = true;
+        };
+
+        const onRowMouseDown = (e) => {
+            const { originalEvent: event } = e;
+
+            const isDraggableHandle = isUnstyled()
+                ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]')
+                : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle');
+
+            event.currentTarget.draggable = isDraggableHandle;
+            //event.target.draggable = isDraggableHandle;
+
+            if (allowRowDrag(e)) {
+                enableDragSelection(event, 'row');
+                anchorRowIndex.current = e.index;
+                rangeRowIndex.current = e.index;
+                anchorRowFirst.current = props.first;
+            }
+        };
+
+        const onRowMouseUp = (event) => {
+            const isSameRow = event.index === anchorRowIndex.current;
+
+            if (allowRowDrag(event) && !isSameRow) {
+                onRangeSelection(event, 'row');
+            }
+        };
+
+        const expandedRowsRef = React.useRef(props.expandedRows);
+
+        React.useEffect(() => {
+            expandedRowsRef.current = props.expandedRows;
+        }, [props.expandedRows]);
+
+        const onRowToggle = (event) => {
+            let expandedRows;
+            let dataKey = props.dataKey;
+            let hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
+
+            if (hasDataKey) {
+                let dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
+
+                expandedRows = expandedRowsRef.current ? { ...expandedRowsRef.current } : {};
+
+                if (expandedRows[dataKeyValue] != null) {
+                    delete expandedRows[dataKeyValue];
+
+                    if (props.onRowCollapse) {
+                        props.onRowCollapse({ originalEvent: event, data: event.data });
+                    }
+                } else {
+                    expandedRows[dataKeyValue] = true;
+
+                    if (props.onRowExpand) {
+                        props.onRowExpand({ originalEvent: event, data: event.data });
+                    }
+                }
+            } else {
+                let expandedRowIndex = findIndex(expandedRowsRef.current, event.data);
+
+                expandedRows = expandedRowsRef.current ? [...expandedRowsRef.current] : [];
+
+                if (expandedRowIndex !== -1) {
+                    expandedRows = expandedRows.filter((_, i) => i !== expandedRowIndex);
+
+                    if (props.onRowCollapse) {
+                        props.onRowCollapse({ originalEvent: event, data: event.data });
+                    }
+                } else {
+                    expandedRows.push(event.data);
+
+                    if (props.onRowExpand) {
+                        props.onRowExpand({ originalEvent: event, data: event.data });
+                    }
+                }
+            }
+
+            if (props.onRowToggle) {
+                props.onRowToggle({
+                    data: expandedRows
+                });
+            }
+        };
+
+        const onRowDragStart = (e) => {
+            const { originalEvent: event, index } = e;
+
+            if (allowRowDrag(e)) {
+                rowDragging.current = true;
+                draggedRowIndex.current = index;
+                event.dataTransfer.setData('text', 'b'); // For firefox
+            }
+        };
+
+        const onRowDragOver = (e) => {
+            const { originalEvent: event, index } = e;
+
+            if (!rowDragging.current) {
+                return;
+            }
+
+            if (draggedRowIndex.current !== index) {
+                const rowElement = event.currentTarget;
+                const rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
+                const pageY = event.pageY + window.scrollY;
+                const rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
+                const prevRowElement = rowElement.previousElementSibling;
+
+                if (pageY < rowMidY) {
+                    rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+                    !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+
+                    droppedRowIndex.current = index;
+
+                    if (prevRowElement) {
+                        prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
+                        !isUnstyled() && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    } else {
+                        rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
+                        !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    }
+                } else {
+                    if (prevRowElement) {
+                        prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+                        !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+                    } else {
+                        rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
+                        !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
+                    }
+
+                    if (index + 1 !== draggedRowIndex.current) droppedRowIndex.current = index + 1;
+                    rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
+                    !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const onRowDragLeave = (e) => {
+            const { originalEvent: event } = e;
+            const rowElement = event.currentTarget;
+            const prevRowElement = rowElement.previousElementSibling;
+
+            if (prevRowElement) {
+                prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+                !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
+            }
+
+            rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
+            !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
+            rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
+            !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
+        };
+
+        const onRowDragEnd = (e) => {
+            const { originalEvent: event } = e;
+
+            rowDragging.current = false;
+            draggedRowIndex.current = null;
+            droppedRowIndex.current = null;
+            event.currentTarget.draggable = false;
+        };
+
+        const onRowDrop = (e) => {
+            const { originalEvent: event } = e;
+
+            if (droppedRowIndex.current != null) {
+                let dropIndex = draggedRowIndex.current > droppedRowIndex.current ? droppedRowIndex.current : droppedRowIndex.current === 0 ? 0 : droppedRowIndex.current - 1;
+                let val = [...props.tableProps.value];
+
+                ObjectUtils.reorderArray(val, draggedRowIndex.current, dropIndex);
+
+                if (props.onRowReorder) {
+                    props.onRowReorder({
+                        originalEvent: event,
+                        value: val,
+                        dragIndex: draggedRowIndex.current,
+                        dropIndex: dropIndex
+                    });
+                }
+            }
+
+            //cleanup
+            onRowDragLeave(e);
+            onRowDragEnd(e);
+            event.preventDefault();
+        };
+
+        const onRadioChange = (event) => {
+            onSingleSelection({ ...event, toggleable: true, type: 'radio' });
+        };
+
+        const onCheckboxChange = (event) => {
+            onMultipleSelection({ ...event, toggleable: true, type: 'checkbox' });
+        };
+
+        const onDragSelectionMouseMove = (event) => {
+            const { x, y } = initialDragPosition.current;
+            const dx = event.clientX - x;
+            const dy = event.clientY - y;
+
+            if (dy < 0) {
+                dragSelectionHelper.current.style.top = `${event.pageY + 5}px`;
+            }
+
+            if (dx < 0) {
+                dragSelectionHelper.current.style.left = `${event.pageX + 5}px`;
+            }
+
+            dragSelectionHelper.current.style.height = `${Math.abs(dy)}px`;
+            dragSelectionHelper.current.style.width = `${Math.abs(dx)}px`;
+
+            event.preventDefault();
+        };
+
+        const onDragSelectionMouseUp = () => {
+            if (dragSelectionHelper.current) {
+                dragSelectionHelper.current.remove();
+                dragSelectionHelper.current = null;
+            }
+
+            document.removeEventListener('mousemove', onDragSelectionMouseMove);
+            document.removeEventListener('mouseup', onDragSelectionMouseUp);
+        };
+
+        const onCellClick = (event) => {
+            if (!allowSelection(event)) {
+                return;
+            }
+
+            props.onCellClick && props.onCellClick(event);
+
+            if (allowCellSelection()) {
+                if (allowRangeSelection(event)) {
+                    onRangeSelection(event, 'cell');
+                } else {
+                    let toggleable = allowMetaKeySelection(event);
+                    let { originalEvent, ...data } = event;
+
+                    anchorRowIndex.current = event.rowIndex;
+                    rangeRowIndex.current = event.rowIndex;
+                    anchorRowFirst.current = props.first;
+                    anchorCellIndex.current = event.cellIndex;
+
+                    if (isSingleSelection()) {
+                        onSingleSelection({ originalEvent, data, index: event.rowIndex, toggleable, type: 'cell' });
+                    } else {
+                        onMultipleSelection({ originalEvent, data, index: event.rowIndex, toggleable, type: 'cell' });
+                    }
+                }
+
+                changeTabIndex(event.originalEvent, 'cell');
+            }
+
+            rowTouched.current = false;
+        };
+
+        const onCellMouseDown = (event) => {
+            if (allowCellDrag(event)) {
+                enableDragSelection(event.originalEvent);
+                anchorRowIndex.current = event.rowIndex;
+                rangeRowIndex.current = event.rowIndex;
+                anchorRowFirst.current = props.first;
+                anchorCellIndex.current = event.cellIndex;
+            }
+        };
+
+        const onCellMouseUp = (event) => {
+            const isSameCell = event.rowIndex === anchorRowIndex.current && event.cellIndex === anchorCellIndex.current;
+
+            if (allowCellDrag(event) && !isSameCell) {
+                onRangeSelection(event, 'cell');
+            }
+        };
+
+        const bindDragSelectionEvents = () => {
+            document.addEventListener('mousemove', onDragSelectionMouseMove);
+            document.addEventListener('mouseup', onDragSelectionMouseUp);
+            document.body.appendChild(dragSelectionHelper.current);
+        };
+
+        const unbindDragSelectionEvents = () => {
+            onDragSelectionMouseUp();
+        };
+
+        React.useEffect(() => {
+            if (props.frozenRow) {
+                updateFrozenRowStickyPosition();
+            }
+
+            if (props.scrollable && props.rowGroupMode === 'subheader') {
+                updateFrozenRowGroupHeaderStickyPosition();
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (props.paginator && isMultipleSelection()) {
+                anchorRowIndex.current = null;
+            }
+        }, [props.first]);
+
+        useUnmountEffect(() => {
+            if (props.dragSelection) {
+                unbindDragSelectionEvents();
+            }
+        });
+
+        const createEmptyContent = () => {
+            if (!props.loading) {
+                const colSpan = getColumnsLength();
+                const content = ObjectUtils.getJSXElement(props.emptyMessage, { props: props.tableProps, frozen: props.frozenRow }) || localeOption('emptyMessage');
+                const emptyMessageProps = mergeProps(
+                    {
+                        className: cx('emptyMessage'),
+                        role: 'row'
+                    },
+                    ptm('emptyMessage')
+                );
+
+                const bodyCellProps = mergeProps(
+                    {
+                        colSpan,
+                        role: 'cell'
+                    },
+                    getColumnPTOptions('root'),
+                    getColumnPTOptions('bodyCell')
+                );
+
+                return (
+                    <tr {...emptyMessageProps}>
+                        <td {...bodyCellProps}>{content}</td>
+                    </tr>
+                );
+            }
+
+            return null;
+        };
+
+        const createGroupHeader = (rowData, rowIndex, expanded, colSpan) => {
+            if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
+                const style = rowGroupHeaderStyle();
+                const toggler = props.expandableRowGroups && (
+                    <RowTogglerButton
+                        hostName={props.hostName}
+                        onClick={onRowToggle}
+                        rowData={rowData}
+                        expanded={expanded}
+                        expandedRowIcon={props.expandedRowIcon}
+                        collapsedRowIcon={props.collapsedRowIcon}
+                        ptCallbacks={props.ptCallbacks}
+                        metaData={props.metaData}
+                        unstyled={isUnstyled()}
+                    />
+                );
+                const options = { index: rowIndex, props: props.tableProps, customRendering: false };
+                let content = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
+
+                // check if the user wants complete control of the rendering
+                if (!options.customRendering) {
+                    const bodyCellProps = mergeProps(
+                        {
+                            colSpan
+                        },
+                        getColumnPTOptions('root'),
+                        getColumnPTOptions('bodyCell')
+                    );
+
+                    const rowGroupHeaderNameProps = mergeProps(
+                        {
+                            className: cx('rowGroupHeaderName')
+                        },
+                        ptm('rowGroupHeaderName')
+                    );
+
+                    content = (
+                        <td {...bodyCellProps}>
+                            {toggler}
+                            <span {...rowGroupHeaderNameProps}>{content}</span>
+                        </td>
+                    );
+                }
+
+                const rowGroupHeaderProps = mergeProps(
+                    {
+                        className: cx('rowGroupHeader'),
+                        style,
+                        role: 'row'
+                    },
+                    ptm('rowGroupHeader')
+                );
+
+                return <tr {...rowGroupHeaderProps}>{content}</tr>;
+            }
+
+            return null;
+        };
+
+        const createRow = (rowData, rowIndex, index, expanded) => {
+            if (!props.expandableRowGroups || expanded) {
+                const selected = isSelectionEnabled() ? isSelected(rowData) : false;
+                const contextMenuSelected = isContextMenuSelected(rowData);
+                const _allowRowSelection = allowRowSelection();
+                const _allowCellSelection = allowCellSelection();
+                const editing = isRowEditing(rowData);
+
+                return (
+                    <BodyRow
+                        hostName={props.hostName}
+                        allowCellSelection={_allowCellSelection}
+                        allowRowSelection={_allowRowSelection}
+                        cellMemo={props.cellMemo}
+                        cellMemoProps={props.cellMemoProps}
+                        cellMemoPropsDepth={props.cellMemoPropsDepth}
+                        cellClassName={props.cellClassName}
+                        checkIcon={props.checkIcon}
+                        collapsedRowIcon={props.collapsedRowIcon}
+                        columns={props.columns}
+                        colsProps={colsProps}
+                        compareSelectionBy={props.compareSelectionBy}
+                        contextMenuSelected={contextMenuSelected}
+                        dataKey={props.dataKey}
+                        editMode={props.editMode}
+                        editing={editing}
+                        editingMeta={props.editingMeta}
+                        editingRows={props.editingRows}
+                        expanded={expanded}
+                        expandedRowIcon={props.expandedRowIcon}
+                        frozenRow={props.frozenRow}
+                        groupRowsBy={props.groupRowsBy}
+                        index={index}
+                        isSelectable={isSelectable}
+                        onCellClick={onCellClick}
+                        onCellMouseDown={onCellMouseDown}
+                        onCellMouseUp={onCellMouseUp}
+                        onCheckboxChange={onCheckboxChange}
+                        onEditingMetaChange={props.onEditingMetaChange}
+                        onRadioChange={onRadioChange}
+                        onRowClick={onRowClick}
+                        onRowDoubleClick={onRowDoubleClick}
+                        onRowPointerDown={onRowPointerDown}
+                        onRowPointerUp={onRowPointerUp}
+                        onRowDragEnd={onRowDragEnd}
+                        onRowDragLeave={onRowDragLeave}
+                        onRowDragOver={onRowDragOver}
+                        onRowDragStart={onRowDragStart}
+                        onRowDrop={onRowDrop}
+                        onRowEditCancel={props.onRowEditCancel}
+                        onRowEditChange={props.onRowEditChange}
+                        onRowEditComplete={props.onRowEditComplete}
+                        onRowEditInit={props.onRowEditInit}
+                        onRowEditSave={props.onRowEditSave}
+                        onRowMouseDown={onRowMouseDown}
+                        onRowMouseEnter={onRowMouseEnter}
+                        onRowMouseLeave={onRowMouseLeave}
+                        onRowMouseUp={onRowMouseUp}
+                        onRowRightClick={onRowRightClick}
+                        onRowToggle={onRowToggle}
+                        onRowTouchEnd={onRowTouchEnd}
+                        responsiveLayout={props.responsiveLayout}
+                        rowClassName={props.rowClassName}
+                        rowData={rowData}
+                        rowEditValidator={props.rowEditValidator}
+                        rowEditorCancelIcon={props.rowEditorCancelIcon}
+                        rowEditorInitIcon={props.rowEditorInitIcon}
+                        rowEditorSaveIcon={props.rowEditorSaveIcon}
+                        rowGroupMode={props.rowGroupMode}
+                        rowIndex={rowIndex}
+                        selectOnEdit={props.selectOnEdit}
+                        selected={selected}
+                        selection={props.selection}
+                        selectionMode={props.selectionMode}
+                        selectionModeInColumn={props.selectionModeInColumn}
+                        showRowReorderElement={props.showRowReorderElement}
+                        showSelectionElement={props.showSelectionElement}
+                        tabIndex={props.tabIndex}
+                        tableProps={props.tableProps}
+                        tableSelector={props.tableSelector}
+                        value={props.value}
+                        virtualScrollerOptions={props.virtualScrollerOptions}
+                        ptCallbacks={props.ptCallbacks}
+                        metaData={props.metaData}
+                        unstyled={isUnstyled()}
+                    />
+                );
+            }
+        };
+
+        const createExpansion = (rowData, rowIndex, expanded, colSpan) => {
+            if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
+                const id = `${props.tableSelector}_content_${rowIndex}_expanded`;
+                const options = { index: rowIndex, customRendering: false };
+                let content = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
+
+                // check if the user wants complete control of the rendering
+                if (!options.customRendering) {
+                    const bodyCellProps = mergeProps(
+                        {
+                            colSpan,
+                            role: 'cell'
+                        },
+                        getColumnPTOptions('root'),
+                        getColumnPTOptions('bodyCell')
+                    );
+
+                    content = <td {...bodyCellProps}>{content}</td>;
+                }
+
+                const rowExpansionProps = mergeProps(
+                    {
+                        id,
+                        className: cx('rowExpansion'),
+                        role: 'row'
+                    },
+                    ptm('rowExpansion')
+                );
+
+                return <tr {...rowExpansionProps}>{content}</tr>;
+            }
+
+            return null;
+        };
+
+        const createGroupFooter = (rowData, rowIndex, expanded, colSpan) => {
+            if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) {
+                const content = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, { index: rowIndex, colSpan, props: props.tableProps });
+                const rowGroupFooterProps = mergeProps(
+                    {
+                        className: cx('rowGroupFooter'),
+                        role: 'row'
+                    },
+                    ptm('rowGroupFooter')
+                );
+
+                return <tr {...rowGroupFooterProps}>{content}</tr>;
+            }
+
+            return null;
+        };
+
+        const createContent = () => {
+            return (
+                props.value &&
+                props.value.map((rowData, index) => {
+                    const rowIndex = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(index).index : props.first + index;
+                    const key = getRowKey(rowData, rowIndex);
+                    const expanded = isRowExpanded(rowData);
+                    const colSpan = getColumnsLength();
+
+                    const groupHeader = createGroupHeader(rowData, rowIndex, expanded, colSpan);
+                    const row = createRow(rowData, rowIndex, index, expanded);
+                    const expansion = createExpansion(rowData, rowIndex, expanded, colSpan);
+                    const groupFooter = createGroupFooter(rowData, rowIndex, expanded, colSpan);
+
+                    return (
+                        <React.Fragment key={key}>
+                            {groupHeader}
+                            {row}
+                            {expansion}
+                            {groupFooter}
+                        </React.Fragment>
+                    );
+                })
+            );
+        };
+
+        const content = props.empty ? createEmptyContent() : createContent();
+        const ptKey = props.className === 'p-datatable-virtualscroller-spacer' ? 'virtualScrollerSpacer' : 'tbody';
+        const tbodyProps = mergeProps(
+            {
+                style: props.style,
+                className: cx(ptKey, { className: props.className }),
+                role: ' rowgroup'
+            },
+            ptm(ptKey, { hostName: props.hostName })
+        );
+
+        return (
+            <tbody ref={refCallback} {...tbodyProps}>
+                {content}
+            </tbody>
+        );
+    })
+);
+
+TableBody.displayName = 'TableBody';
diff --git a/components/lib/datatable/TableFooter.js b/components/lib/datatable/TableFooter.js
new file mode 100644
index 0000000000..e3e9a50e5f
--- /dev/null
+++ b/components/lib/datatable/TableFooter.js
@@ -0,0 +1,114 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { ColumnGroupBase } from '../columngroup/ColumnGroupBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { RowBase } from '../row/RowBase';
+import { FooterCell } from './FooterCell';
+import { PrimeReactContext } from '../api/Api';
+
+export const TableFooter = React.memo((props) => {
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const mergeProps = useMergeProps();
+    const getRowProps = (row) => ColumnGroupBase.getCProps(row);
+    const context = React.useContext(PrimeReactContext);
+
+    const getColumnGroupProps = () => {
+        return props.footerColumnGroup ? ColumnGroupBase.getCProps(props.footerColumnGroup) : undefined;
+    };
+
+    const getRowPTOptions = (row, key) => {
+        const rProps = getRowProps(row);
+        const rowMetaData = {
+            props: rProps,
+            parent: props.metaData,
+            hostName: props.hostName
+        };
+
+        return mergeProps(ptm(`row.${key}`, { row: rowMetaData }), ptm(`row.${key}`, rowMetaData), ptmo(rProps, key, rowMetaData));
+    };
+
+    const getColumnGroupPTOptions = (key) => {
+        const cGProps = getColumnGroupProps();
+        const columnGroupMetaData = {
+            props: getColumnGroupProps(),
+            parent: props.metaData,
+            hostName: props.hostName
+        };
+
+        return mergeProps(ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ptm(`columnGroup.${key}`, columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData));
+    };
+
+    const hasFooter = () => {
+        return props.footerColumnGroup ? true : props.columns ? props.columns.some((col) => col && getColumnProp(col, 'footer')) : false;
+    };
+
+    const getColumnProp = (column, name) => {
+        return ColumnBase.getCProp(column, name);
+    };
+
+    const createGroupFooterCells = (row) => {
+        const columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
+
+        return createFooterCells(columns);
+    };
+
+    const createFooterCells = (columns) => {
+        return React.Children.map(columns, (col, i) => {
+            const isVisible = col ? !getColumnProp(col, 'hidden') : true;
+            const key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
+
+            return isVisible && <FooterCell hostName={props.hostName} key={key} tableProps={props.tableProps} column={col} ptCallbacks={props.ptCallbacks} metaData={props.metaData} />;
+        });
+    };
+
+    const createContent = () => {
+        if (props.footerColumnGroup) {
+            const rows = React.Children.toArray(ColumnGroupBase.getCProp(props.footerColumnGroup, 'children'));
+
+            return rows.map((row, i) => {
+                const { unstyled, __TYPE, ptOptions, ...rest } = RowBase.getProps(row.props, context);
+
+                const rootProps = mergeProps(
+                    {
+                        role: 'row'
+                    },
+                    unstyled ? { unstyled, ...rest } : rest,
+                    getRowPTOptions(row, 'root')
+                );
+
+                return (
+                    <tr {...rootProps} key={i}>
+                        {createGroupFooterCells(row)}
+                    </tr>
+                );
+            });
+        }
+
+        const footerRowProps = mergeProps(
+            {
+                role: 'row'
+            },
+            ptm('footerRow', { hostName: props.hostName })
+        );
+
+        return <tr {...footerRowProps}>{createFooterCells(props.columns)}</tr>;
+    };
+
+    if (hasFooter()) {
+        const content = createContent();
+        const tfootProps = mergeProps(
+            {
+                className: cx('tfoot'),
+                role: 'rowgroup'
+            },
+            getColumnGroupPTOptions('root'),
+            ptm('tfoot', { hostName: props.hostName })
+        );
+
+        return <tfoot {...tfootProps}>{content}</tfoot>;
+    }
+
+    return null;
+});
+
+TableFooter.displayName = 'TableFooter';
diff --git a/components/lib/datatable/TableHeader.js b/components/lib/datatable/TableHeader.js
new file mode 100644
index 0000000000..891c1ee017
--- /dev/null
+++ b/components/lib/datatable/TableHeader.js
@@ -0,0 +1,290 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { ColumnGroupBase } from '../columngroup/ColumnGroupBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { RowBase } from '../row/RowBase';
+import { classNames } from '../utils/Utils';
+import { ColumnFilter } from './ColumnFilter';
+import { HeaderCell } from './HeaderCell';
+import { HeaderCheckbox } from './HeaderCheckbox';
+import { PrimeReactContext } from '../api/Api';
+
+export const TableHeader = React.memo((props) => {
+    const [sortableDisabledFieldsState, setSortableDisabledFieldsState] = React.useState([]);
+    const [allSortableDisabledState, setAllSortableDisabledState] = React.useState(false);
+    const mergeProps = useMergeProps();
+    const isSingleSort = props.sortMode === 'single';
+    const isMultipleSort = props.sortMode === 'multiple';
+    const isAllSortableDisabled = isSingleSort && allSortableDisabledState;
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const context = React.useContext(PrimeReactContext);
+
+    const getColumnProp = (column, name) => {
+        return ColumnBase.getCProp(column, name);
+    };
+
+    const getColumnProps = (column) => ColumnBase.getCProps(column);
+    const getRowProps = (row) => ColumnGroupBase.getCProps(row);
+
+    const getColumnGroupProps = () => {
+        return props.headerColumnGroup ? ptmo(ColumnGroupBase.getCProps(props.headerColumnGroup)) : undefined;
+    };
+
+    const getColumnGroupPTOptions = (key) => {
+        const cGProps = getColumnGroupProps();
+
+        const columnGroupMetaData = {
+            props: cGProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {
+                sortableDisabledFields: sortableDisabledFieldsState,
+                allSortableDisabled: allSortableDisabledState
+            }
+        };
+
+        return mergeProps(ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ptm(`columnGroup.${key}`, columnGroupMetaData), ptmo(cGProps, key, columnGroupMetaData));
+    };
+
+    const getColumnPTOptions = (column, key) => {
+        const cProps = getColumnProps(column);
+        const columnMetaData = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {
+                sortableDisabledFields: sortableDisabledFieldsState,
+                allSortableDisabled: allSortableDisabledState
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetaData }), ptm(`column.${key}`, columnMetaData), ptmo(cProps, key, columnMetaData));
+    };
+
+    const getRowPTOptions = (row, key) => {
+        const rProps = getRowProps(row);
+        const rowMetaData = {
+            props: rProps,
+            parent: props.metaData,
+            hostName: props.hostName
+        };
+
+        return mergeProps(ptm(`row.${key}`, { row: rowMetaData }), ptm(`row.${key}`, rowMetaData), ptmo(rProps, key, rowMetaData));
+    };
+
+    const isColumnSorted = (column) => {
+        return props.sortField !== null ? getColumnProp(column, 'field') === props.sortField || getColumnProp(column, 'sortField') === props.sortField : false;
+    };
+
+    const updateSortableDisabled = () => {
+        if (isSingleSort || (isMultipleSort && props.onSortChange)) {
+            let sortableDisabledFields = [];
+            let allSortableDisabled = false;
+
+            props.columns.forEach((column) => {
+                if (getColumnProp(column, 'sortableDisabled')) {
+                    sortableDisabledFields.push(getColumnProp(column, 'sortField') || getColumnProp(column, 'field'));
+
+                    if (!allSortableDisabled && isColumnSorted(column)) {
+                        allSortableDisabled = true;
+                    }
+                }
+            });
+
+            setSortableDisabledFieldsState(sortableDisabledFields);
+            setAllSortableDisabledState(allSortableDisabled);
+        }
+    };
+
+    const onSortableChange = () => {
+        updateSortableDisabled();
+    };
+
+    const onCheckboxChange = (e) => {
+        props.onColumnCheckboxChange(e, props.value);
+    };
+
+    useMountEffect(() => {
+        updateSortableDisabled();
+    });
+
+    const createGroupHeaderCells = (row) => {
+        const columns = React.Children.toArray(RowBase.getCProp(row, 'children'));
+
+        return createHeaderCells(columns);
+    };
+
+    const createHeaderCells = (columns) => {
+        return React.Children.map(columns, (col, i) => {
+            const isVisible = col ? !getColumnProp(col, 'hidden') : true;
+            const key = col ? getColumnProp(col, 'columnKey') || getColumnProp(col, 'field') || i : i;
+
+            return (
+                isVisible && (
+                    <HeaderCell
+                        hostName={props.hostName}
+                        allRowsSelected={props.allRowsSelected}
+                        allSortableDisabled={isAllSortableDisabled}
+                        column={col}
+                        index={i}
+                        empty={props.empty}
+                        filterClearIcon={props.filterClearIcon}
+                        filterDisplay={props.filterDisplay}
+                        filterIcon={props.filterIcon}
+                        filters={props.filters}
+                        filtersStore={props.filtersStore}
+                        groupRowSortField={props.groupRowSortField}
+                        groupRowsBy={props.groupRowsBy}
+                        key={key}
+                        multiSortMeta={props.multiSortMeta}
+                        onColumnCheckboxChange={onCheckboxChange}
+                        onColumnDragLeave={props.onColumnDragLeave}
+                        onColumnDragOver={props.onColumnDragOver}
+                        onColumnDragStart={props.onColumnDragStart}
+                        onColumnDrop={props.onColumnDrop}
+                        onColumnMouseDown={props.onColumnMouseDown}
+                        onColumnResizeStart={props.onColumnResizeStart}
+                        onColumnResizerClick={props.onColumnResizerClick}
+                        onColumnResizerDoubleClick={props.onColumnResizerDoubleClick}
+                        onFilterApply={props.onFilterApply}
+                        onFilterChange={props.onFilterChange}
+                        onSortChange={props.onSortChange}
+                        onSortableChange={onSortableChange}
+                        reorderableColumns={props.reorderableColumns}
+                        resizableColumns={props.resizableColumns}
+                        showSelectAll={props.showSelectAll}
+                        sortField={props.sortField}
+                        sortIcon={props.sortIcon}
+                        sortMode={props.sortMode}
+                        sortOrder={props.sortOrder}
+                        sortableDisabledFields={sortableDisabledFieldsState}
+                        tabIndex={props.tabIndex}
+                        tableProps={props.tableProps}
+                        value={props.value}
+                        ptCallbacks={props.ptCallbacks}
+                        metaData={props.metaData}
+                        unstyled={props.unstyled}
+                    />
+                )
+            );
+        });
+    };
+
+    const createCheckbox = (column, selectionMode) => {
+        if (props.showSelectAll && selectionMode === 'multiple') {
+            const allRowsSelected = props.allRowsSelected(props.value);
+
+            return <HeaderCheckbox hostName={props.hostName} column={column} checked={allRowsSelected} onChange={onCheckboxChange} disabled={props.empty} ptCallbacks={props.ptCallbacks} metaData={props.metaData} unstyled={props.unstyled} />;
+        }
+
+        return null;
+    };
+
+    const createFilter = (column, filter) => {
+        if (filter) {
+            return (
+                <ColumnFilter
+                    hostName={props.hostName}
+                    display="row"
+                    column={column}
+                    filterClearIcon={props.filterClearIcon}
+                    filterIcon={props.filterIcon}
+                    filters={props.filters}
+                    filtersStore={props.filtersStore}
+                    metaData={props.metaData}
+                    onFilterApply={props.onFilterApply}
+                    onFilterChange={props.onFilterChange}
+                    ptCallbacks={props.ptCallbacks}
+                    unstyled={props.unstyled}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    const createFilterCells = () => {
+        return React.Children.map(props.columns, (col, i) => {
+            const isVisible = !getColumnProp(col, 'hidden');
+
+            if (isVisible) {
+                const { filterHeaderStyle, style, filterHeaderClassName, className, frozen, columnKey, field, selectionMode, filter } = ColumnBase.getCProps(col);
+                const colStyle = { ...(filterHeaderStyle || {}), ...(style || {}) };
+                const colKey = columnKey || field || i;
+                const checkbox = createCheckbox(col, selectionMode);
+                const filterRow = createFilter(col, filter);
+                const headerCellProps = mergeProps(
+                    {
+                        style: colStyle,
+                        className: classNames(filterHeaderClassName, className, cx('headerCell', { frozen, column: col }))
+                    },
+                    getColumnPTOptions(col, 'root'),
+                    getColumnPTOptions(col, 'headerCell')
+                );
+
+                return (
+                    <th key={colKey} {...headerCellProps}>
+                        {checkbox}
+                        {filterRow}
+                    </th>
+                );
+            }
+
+            return null;
+        });
+    };
+
+    const createContent = () => {
+        if (props.headerColumnGroup) {
+            const rows = React.Children.toArray(ColumnGroupBase.getCProp(props.headerColumnGroup, 'children'));
+
+            return rows.map((row, i) => {
+                const { unstyled, __TYPE, ptOptions, ...rest } = RowBase.getProps(row.props, context);
+
+                const headerRowProps = mergeProps(
+                    {
+                        role: 'row'
+                    },
+                    unstyled ? { unstyled, ...rest } : rest,
+                    getRowPTOptions(row, 'root')
+                );
+
+                return (
+                    <tr {...headerRowProps} key={i}>
+                        {createGroupHeaderCells(row)}
+                    </tr>
+                );
+            });
+        }
+
+        const headerRowProps = mergeProps(
+            {
+                role: 'row'
+            },
+            ptm('headerRow', { hostName: props.hostName })
+        );
+        const headerRow = <tr {...headerRowProps}>{createHeaderCells(props.columns)}</tr>;
+        const filterRow = props.filterDisplay === 'row' && <tr {...headerRowProps}>{createFilterCells()}</tr>;
+
+        return (
+            <>
+                {headerRow}
+                {filterRow}
+            </>
+        );
+    };
+
+    const content = createContent();
+    const theadProps = mergeProps(
+        {
+            className: cx('thead'),
+            role: 'rowgroup'
+        },
+        getColumnGroupPTOptions('root'),
+        ptm('thead', { hostName: props.hostName })
+    );
+
+    return <thead {...theadProps}>{content}</thead>;
+});
+
+TableHeader.displayName = 'TableHeader';
diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts
new file mode 100644
index 0000000000..bf925fdaea
--- /dev/null
+++ b/components/lib/datatable/datatable.d.ts
@@ -0,0 +1,2069 @@
+/**
+ *
+ * DataTable displays data in tabular format.
+ *
+ * [Live Demo](https://www.primereact.org/datatable/)
+ *
+ * @module datatable
+ *
+ */
+import * as React from 'react';
+import { Column, ColumnPassThroughOptions, ColumnProps } from '../column';
+import { ColumnGroupPassThroughOptions } from '../columngroup/columngroup';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator';
+import { PassThroughOptions } from '../passthrough';
+import { RowPassThroughOptions } from '../row/row';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { IconType, PassThroughType } from '../utils/utils';
+import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller/virtualscroller';
+
+type DataTableHeaderTemplateType<TValue extends DataTableValueArray> = React.ReactNode | ((options: DataTableHeaderTemplateOptions<TValue>) => React.ReactNode);
+
+type DataTableFooterTemplateType<TValue extends DataTableValueArray> = React.ReactNode | ((options: DataTableFooterTemplateOptions<TValue>) => React.ReactNode);
+
+type DataTableRowGroupHeaderTemplateType<TValue extends DataTableValueArray> = React.ReactNode | ((data: any, options: DataTableRowGroupHeaderTemplateOptions<TValue>) => React.ReactNode);
+
+type DataTableRowGroupFooterTemplateType<TValue extends DataTableValueArray> = React.ReactNode | ((data: any, options: DataTableRowGroupFooterTemplateOptions<TValue>) => React.ReactNode);
+
+/**
+ * Custom datatable header template options.
+ */
+interface DataTableHeaderTemplateOptions<TValue extends DataTableValueArray> {
+    /**
+     * The props of the datatable.
+     */
+    props: DataTableProps<TValue>;
+}
+
+interface DataTableFooterTemplateOptions<TValue extends DataTableValueArray> extends DataTableHeaderTemplateOptions<TValue> {}
+
+/**
+ * Custom datatable row group header template options.
+ */
+interface DataTableRowGroupHeaderTemplateOptions<TValue extends DataTableValueArray> {
+    /**
+     * index of the row group header template.
+     */
+    index: number;
+    /**
+     * The props of the datatable.
+     */
+    props: DataTableProps<TValue>;
+    /**
+     * Used to override the rendering of the content.
+     */
+    customRendering: boolean;
+}
+
+/**
+ * Custom datatable row group footer template options.
+ */
+interface DataTableRowGroupFooterTemplateOptions<T extends DataTableValueArray> extends DataTableRowGroupHeaderTemplateOptions<T> {
+    /**
+     * Number of columns to span for grouping.
+     */
+    colSpan: number;
+}
+
+/**
+ * Custom datatable sort meta
+ */
+interface DataTableSortMeta {
+    /**
+     * Column field to sort against.
+     */
+    field: string;
+    /**
+     * Sort order as integer.
+     */
+    order: 1 | 0 | -1 | null | undefined;
+}
+
+/**
+ * Custom datatable filter metadata.
+ */
+interface DataTableFilterMetaData {
+    /**
+     * Value to filter against.
+     */
+    value: any;
+    /**
+     * Type of filter match.
+     */
+    matchMode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom' | undefined;
+}
+
+/**
+ * Custom datatable operator filter metadata.
+ */
+interface DataTableOperatorFilterMetaData {
+    /**
+     * Operator to use for filtering.
+     */
+    operator: string;
+    /**
+     * Operator to use for filtering.
+     */
+    constraints: DataTableFilterMetaData[];
+}
+
+/**
+ * Custom datatable filter meta.
+ */
+interface DataTableFilterMeta {
+    /**
+     * Extra options.
+     */
+    [key: string]: DataTableFilterMetaData | DataTableOperatorFilterMetaData;
+}
+
+/**
+ * Custom datatable expanded rows.
+ */
+interface DataTableExpandedRows {
+    [key: string]: boolean;
+}
+
+/**
+ * Custom datatable editing rows.
+ */
+interface DataTableEditingRows {
+    [key: string]: boolean;
+}
+
+/**
+ * Custom row toggle event.
+ * @see {@link DataTableProps.onRowToggle}
+ * @event
+ */
+interface DataTableRowToggleEvent {
+    /**
+     * Expanded rows.
+     */
+    data: any[] | DataTableExpandedRows;
+}
+
+/**
+ * Custom resize end event.
+ * @see {@link DataTableProps.onColumnResizeEnd}
+ * @event
+ */
+interface DataTableColumnResizeEndEvent {
+    /**
+     * DOM element of the resized column.
+     */
+    element: HTMLElement;
+    /**
+     * Properties of the resized column.
+     */
+    column: Column;
+    /**
+     * Change in column width.
+     */
+    delta: number;
+}
+
+/**
+ * Custom column resizer click event.
+ * @see {@link DataTableProps.onColumnResizerClick}, {@link DataTableProps.onColumnResizerDoubleClick}
+ * @event
+ */
+interface DataTableColumnResizerClickEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * DOM element of the column.
+     */
+    element: HTMLElement;
+    /**
+     * Properties of the column.
+     */
+    column: Column;
+}
+
+/**
+ * Custom pagination event
+ * @see {@link DataTableProps.onPage}
+ * @event
+ */
+interface DataTablePageEvent {
+    /**
+     * Index of the first row.
+     */
+    first: number;
+    /**
+     * Rows per page.
+     */
+    rows: number;
+    /**
+     * The page number of the datatable.
+     */
+    page?: number;
+    /**
+     * Total number of pages.
+     */
+    pageCount?: number;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom sort event.
+ * @see {@link DataTableProps.onSort}
+ * @event
+ */
+interface DataTableSortEvent {
+    /**
+     * Field to sort against.
+     */
+    sortField: string;
+    /**
+     * Sort order as integer.
+     */
+    sortOrder: 1 | 0 | -1 | null | undefined;
+    /**
+     * MultiSort metadata.
+     */
+    multiSortMeta: DataTableSortMeta[] | null | undefined;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom filter event.
+ * @see {@link DataTableProps.onFilter}
+ * @event
+ */
+interface DataTableFilterEvent {
+    /**
+     * Collection of active filters.
+     */
+    filters: DataTableFilterMeta;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom state event containing page, filter and sort states.
+ * @see {@link DataTableProps.onFilter}
+ * @see {@link DataTableProps.onSort}
+ * @see {@link DataTableProps.onPage}
+ * @event
+ */
+interface DataTableStateEvent extends DataTablePageEvent, DataTableFilterEvent, DataTableSortEvent {
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom data selectable event.
+ * @see {@link DataTableProps.isDataSelectable}
+ * @event
+ */
+interface DataTableDataSelectableEvent {
+    /**
+     * Original data of the row.
+     */
+    data: DataTableValue;
+    /**
+     * Index of the row.
+     */
+    index: number;
+}
+
+/**
+ * Custom selection change event for context menu in single select mode.
+ * @see {@link DataTableProps.onContextMenuSelectionChange}
+ * @event
+ */
+interface DataTableContextMenuSingleSelectionChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection object.
+     */
+    value: TValue[number];
+}
+
+/**
+ * Custom selection change event for context menu in multiple select mode.
+ * @see {@link DataTableProps.onContextMenuSelectionChange}
+ * @event
+ */
+interface DataTableContextMenuMultipleSelectionChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection object.
+     */
+    value: TValue;
+}
+
+/**
+ * Custom multiple selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionMultipleChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: TValue;
+    /**
+     * Type of the selection.
+     */
+    type?: 'multiple' | 'all' | 'checkbox' | 'row' | undefined;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom single selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionSingleChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection object.
+     */
+    value: TValue[number];
+    /**
+     * Type of the selection.
+     */
+    type?: 'single' | 'radio' | 'row';
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom cell single selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionCellSingleChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: DataTableCellSelection<TValue>;
+    /**
+     * Type of the selection.
+     */
+    type?: 'cell';
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom cell multiple selection change event.
+ * @see {@link DataTableProps.onSelectionChange}
+ * @event
+ */
+interface DataTableSelectionCellMultipleChangeEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selection objects.
+     */
+    value: Array<DataTableCellSelection<TValue>>;
+    /**
+     * Type of the selection.
+     */
+    type?: 'cell';
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom select all change event.
+ * @see {@link DataTableProps.onSelectAllChange}
+ */
+interface DataTableSelectAllChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Whether all data is selected.
+     */
+    checked: boolean;
+}
+
+/**
+ * Custom context menu event.
+ * @see {@link DataTableProps.onContextMenu}, {@link DataTableProps.onRowCollapse}, {@link DataTableProps.onRowExpand}
+ * @event
+ */
+interface DataTableRowEvent {
+    /**
+     * Original event instance.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Original rows data.
+     */
+    data: DataTableValue;
+}
+
+/**
+ * Custom row mouse event.
+ * @see {@link DataTableProps.onRowMouseEnter}, {@link DataTableProps.onRowMouseLeave}
+ * @extends DataTableRowEvent
+ */
+interface DataTableRowMouseEvent extends Omit<DataTableRowEvent, 'originalEvent'> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Clicked row data index
+     */
+    index: number;
+}
+
+/**
+ * Custom row pointer event.
+ * @see {@link DataTableProps.onRowPointerDown}, {@link DataTableProps.onRowPointerUp}
+ * @extends DataTableRowMouseEvent
+ * @event
+ */
+interface DataTableRowPointerEvent extends Omit<DataTableRowEvent, 'originalEvent'> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.PointerEvent<HTMLElement>;
+    /**
+     * Clicked row data index
+     */
+    index: number;
+}
+
+/**
+ * Custom row click event.
+ * @see {@link DataTableProps.onRowClick}, {@link DataTableProps.onRowDoubleClick}
+ * @extends DataTableRowMouseEvent
+ * @event
+ */
+interface DataTableRowClickEvent extends DataTableRowMouseEvent {}
+
+/**
+ * Custom cell click event.
+ * @see {@link DataTableProps.onCellClick}
+ */
+interface DataTableCellClickEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Value of the cell.
+     */
+    value: any;
+    /**
+     * Column field.
+     */
+    field: string;
+    /**
+     * Data of the row.
+     */
+    rowData: DataTableRowData<TValue>;
+    /**
+     * Index of the row.
+     */
+    rowIndex: number;
+    /**
+     * Index of the cell.
+     */
+    cellIndex: number;
+    /**
+     * Whether the cell is selected or not.
+     */
+    selected: boolean;
+}
+
+/**
+ * Custom row edit event.
+ * @see {@link DataTableProps.onRowEditInit}, {@link DataTableProps.onRowEditChange}, {@link DataTableProps.onRowEditCancel}
+ * @extends DataTableRowEvent
+ * @event
+ */
+interface DataTableRowEditEvent extends DataTableRowEvent {
+    /**
+     * Index of the row.
+     */
+    index: number;
+}
+
+/**
+ * Custom row edit save event.
+ * @see {@link DataTableProps.onRowEditSave}
+ * @extends DataTableRowEditEvent
+ */
+interface DataTableRowEditSaveEvent<TValue extends DataTableValueArray> extends DataTableRowEditEvent {
+    /**
+     * Whether the row is valid or not.
+     */
+    valid: boolean;
+    /**
+     * Editing row data.
+     */
+    newData: DataTableRowData<TValue>;
+}
+
+/**
+ * Custom row edit complete event.
+ * @see {@link DataTableProps.onRowEditComplete}
+ * @extends DataTableRowEvent
+ * @event
+ */
+interface DataTableRowEditCompleteEvent extends DataTableRowEvent {
+    /**
+     * Editing rows data.
+     */
+    newData: DataTableValue;
+    /**
+     * Column field.
+     */
+    field: string;
+    /**
+     * Current editing row data index.
+     */
+    index: number;
+}
+
+/**
+ * Custom select event.
+ * @see {@link DataTableProps.onAllRowsSelect}, {@link DataTableProps.onRowSelect}
+ * @event
+ */
+interface DataTableSelectEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected rows data.
+     */
+    data: any;
+    /**
+     * Type of the selection, valid value is "all".
+     */
+    type: 'row' | 'cell' | 'checkbox' | 'radio' | 'all' | undefined;
+}
+
+/**
+ * Custom unselect event.
+ * @see {@link DataTableProps.onAllRowsUnselect}, {@link DataTableProps.onRowUnselect}
+ * @extends DataTableSelectEvent
+ * @event
+ */
+interface DataTableUnselectEvent extends DataTableSelectEvent {}
+
+/**
+ * Custom export function event.
+ * @see {@link DataTableProps.exportFunction}
+ * @event
+ */
+interface DataTableExportFunctionEvent<TValue extends DataTableValueArray> {
+    /**
+     * Field data.
+     */
+    data: DataTableRowDataArray<TValue>;
+    /**
+     * Column field.
+     */
+    field: string;
+    /**
+     * Data of the row.
+     */
+    rowData: DataTableRowData<TValue>;
+    /**
+     * Column.
+     */
+    column: Column;
+}
+
+/**
+ * Custom column reorder event.
+ * @see {@link DataTableProps.onColReorder}
+ * @event
+ */
+interface DataTableColReorderEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.DragEvent<HTMLElement>;
+    /**
+     * Index of the dragged column.
+     */
+    dragIndex: number;
+    /**
+     * Index of the dropped column.
+     */
+    dropIndex: number;
+    /**
+     * Columns array after reorder.
+     */
+    columns: Column[];
+}
+
+/**
+ * Custom column reorder event.
+ * @see {@link DataTableProps.onRowReorder}
+ * @event
+ */
+interface DataTableRowReorderEvent<TValue extends DataTableValueArray> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.DragEvent<HTMLElement>;
+    /**
+     * New value after reorder.
+     */
+    value: DataTableRowDataArray<TValue>;
+    /**
+     * Index of the dragged row.
+     */
+    dragIndex: number;
+    /**
+     * Index of the drop location.
+     */
+    dropIndex: number;
+}
+
+/**
+ * Options for the row expansion template
+ * @see {@link DataTableProps.rowExpansionTemplate}
+ */
+interface DataTableRowExpansionTemplate {
+    /**
+     * Index of the row.
+     */
+    index: number;
+    /**
+     * Used to override the rendering of the content.
+     */
+    customRendering: boolean;
+}
+
+/**
+ * Custom row className options.
+ * @see {@link DataTableProps.rowClassName}
+ */
+interface DataTableRowClassNameOptions<TValue extends DataTableValueArray> {
+    /**
+     * The props of the datatable.
+     */
+    props: DataTableProps<TValue>;
+}
+
+/**
+ * Custom cell className options.
+ * @see {@link DataTableProps.cellClassName}
+ */
+interface DataTableCellClassNameOptions<TValue extends DataTableValueArray> {
+    /**
+     * The props of the datatable.
+     */
+    props: DataTableProps<TValue>;
+    /**
+     * Column element of the datatable.
+     */
+    column: Column;
+    /**
+     * Column field.
+     */
+    field: string;
+    /**
+     * Whether the row is frozen or not.
+     * @defaultValue false
+     */
+    frozenRow: boolean;
+    /**
+     * Index of the row.
+     */
+    rowIndex: number;
+}
+
+/**
+ * Custom show selection element options.
+ * @see {@link DataTableProps.showSelectionElement}
+ */
+interface DataTableShowSelectionElementOptions<TValue extends DataTableValueArray> {
+    /**
+     * Index of the row.
+     */
+    rowIndex: number;
+    /**
+     * The props of the datatable.
+     */
+    props: DataTableProps<TValue>;
+}
+
+/**
+ * Custom show row reorder element options.
+ * @see {@link DataTableProps.showRowReorderElement}
+ */
+interface DataTableShowRowReorderElementOptions<TValue extends DataTableValueArray> {
+    /**
+     * Index of the row element.
+     */
+    rowIndex: number;
+    /**
+     * The props of the datatable.
+     */
+    props: DataTableProps<TValue>;
+}
+
+/**
+ * Custom row edit validator options.
+ * @see {@link DataTableProps.rowEditValidator}
+ */
+interface DataTableRowEditValidatorOptions<TValue extends DataTableValueArray> {
+    /**
+     * The props of the datatable.
+     */
+    props: DataTableProps<TValue>;
+    /**
+     * Index of validated row
+     */
+    rowIndex: number;
+}
+
+/**
+ * Custom value definition.
+ * @extends Record<string, any>
+ */
+interface DataTableValue extends Record<string, any> {}
+
+/**
+ * Custom value array definition.
+ * @extends Array<DataTableValue>
+ */
+interface DataTableValueArray extends Array<DataTableValue> {}
+
+type DataTableRowData<TValueArray extends DataTableValueArray> = TValueArray extends Array<infer TValue> ? TValue : never;
+
+type DataTableRowDataArray<TValue extends DataTableValueArray> = DataTableRowData<TValue>[];
+
+type DataTableCellSelection<TValue extends DataTableValueArray> = {
+    /**
+     * Index of the cell.
+     */
+    cellIndex: number;
+    /**
+     * Column element of the datatable.
+     */
+    column: Column;
+    /**
+     * Column field.
+     */
+    field: string;
+    /**
+     * Properties of the column.
+     */
+    props: ColumnProps;
+    /**
+     * Data of the row.
+     */
+    rowData: DataTableRowData<TValue>;
+    /**
+     * Index of the row.
+     */
+    rowIndex: number;
+    /**
+     * Whether the row is selected or not.
+     */
+    selected: boolean;
+    /**
+     * Value of the cell.
+     */
+    value: TValue[number][keyof TValue[number]];
+};
+
+export declare type DataTablePassThroughType<T> = PassThroughType<T, DataTablePassThroughMethodOptions<DataTableValueArray>>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataTablePassThroughMethodOptions<TValue extends DataTableValueArray> {
+    props: DataTableProps<TValue>;
+    state: DataTableState;
+    context: DataTableContext;
+}
+
+/**
+ * Defines current inline state in DataTable component.
+ */
+export interface DataTableState {
+    /**
+     * Current index of first record as a number.
+     */
+    first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    rows: number;
+    /**
+     * Current sort field.
+     */
+    sortField: string | ((item: any) => string) | undefined;
+    /**
+     * Current order to sort the data by default.
+     */
+    sortOrder: number;
+    /**
+     * Current sortmeta objects to sort the data.
+     */
+    multiSortMeta: DataTableSortMeta[];
+    /**
+     * Current filters object.
+     */
+    filters: DataTableFilterMeta;
+    /**
+     * Current order of the columns.
+     */
+    columnOrder: string[];
+    /**
+     * Current group sortmeta objects to sort the data.
+     */
+    groupRowsSortMeta: DataTableSortMeta;
+    /**
+     * Current editing meta data.
+     */
+    editingMeta: object;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    d_rows: number;
+    /**
+     * Current filters object.
+     */
+    d_filters: object;
+}
+
+/**
+ * Defines current options in DataTable component.
+ */
+export interface DataTableContext {
+    /**
+     * Current scrollable state as a boolean.
+     * @defaultValue false
+     */
+    scrollable: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataTableProps.pt}
+ */
+export interface DataTablePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: DataTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DataTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptions}
+     */
+    paginator?: PaginatorPassThroughOptions;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: DataTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptions}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptions;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableElement>>;
+    /**
+     * Uses to pass attributes to the virtual scroller spacer's DOM element.
+     */
+    virtualScrollerSpacer?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DataTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thead's DOM element.
+     */
+    thead?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the header row's DOM element.
+     */
+    headerRow?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the tbody's DOM element.
+     */
+    tbody?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup header's DOM element.
+     */
+    rowGroupHeader?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup header name's DOM element.
+     */
+    rowGroupHeaderName?: DataTablePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the row's DOM element.
+     */
+    bodyRow?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the row expansion's DOM element.
+     */
+    rowExpansion?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup footer's DOM element.
+     */
+    rowGroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup toggler's DOM element.
+     */
+    rowGroupToggler?: DataTablePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the rowgroup toggler icon's DOM element.
+     */
+    rowGroupTogglerIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the tfoot's DOM element.
+     */
+    tfoot?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the footerr ow's DOM element.
+     */
+    footerRow?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the footer cell's DOM element.
+     */
+    footerCell?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the resize helper's DOM element.
+     */
+    resizeHelper?: DataTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the reorder indicator up's DOM element.
+     */
+    reorderIndicatorUp?: DataTablePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the reorder indicator up icon's DOM element.
+     */
+    reorderIndicatorUpIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the reorder indicator down's DOM element.
+     */
+    reorderIndicatorDown?: DataTablePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the reorder indicator down icon's DOM element.
+     */
+    reorderIndicatorDownIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to pass attributes to the ColumnGroup helper components.
+     */
+    columnGroup?: ColumnGroupPassThroughOptions;
+    /**
+     * Used to pass attributes to the Row helper components.
+     */
+    row?: RowPassThroughOptions;
+    /**
+     * Used to pass attributes to the Column helper components.
+     */
+    column?: ColumnPassThroughOptions;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in DataTable BodyRow which is the table <TR> element.
+ */
+export interface DataTableBodyRowContext {
+    /**
+     * Whether the row is selected.
+     */
+    selected: boolean;
+    /**
+     * Whether the row is selectable.
+     */
+    selectable: boolean;
+    /**
+     * Whether the rows have striped styling.
+     */
+    stripedRows: boolean;
+    /**
+     * Index of the row. Note: this is not the index of the value array its the index of the row <TR in the table.
+     */
+    index: number;
+}
+
+/**
+ * Defines current inline state in DataTable BodyRow which is the table <TR> element.
+ */
+export interface DataTableBodyRowState {
+    /**
+     * Whether the row is in editing mode.
+     */
+    editing: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method for BodyRow which is the table <TR> element.
+ */
+export interface DataTableBodyRowPassThroughMethodOptions<TValue extends DataTableValueArray> {
+    /**
+     * Name of the component.
+     */
+    hostName: string;
+    /**
+     * Current context of the bodyRow.
+     */
+    context: DataTableBodyRowContext;
+    /**
+     * Parent options.
+     */
+    parent: DataTablePassThroughMethodOptions<TValue>;
+    /**
+     * Component props.
+     */
+    props: DataTableBaseProps<TValue>;
+    /**
+     * Current state of the bodyRow.
+     */
+    state: DataTableBodyRowState;
+}
+
+/**
+ * Type for sort order values.
+ * - 1: Ascending order
+ * - 0: No sorting
+ * - -1: Descending order
+ * - null or undefined: No sorting
+ */
+type SortOrder = 1 | 0 | -1 | null | undefined;
+
+/**
+ * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ */
+interface DataTableBaseProps<TValue extends DataTableValueArray> extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu' | 'ref' | 'value'> {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * An array of objects to display.
+     */
+    value?: TValue | undefined;
+    /**
+     * Whether to show it even there is only one page.
+     * @defaultValue true
+     */
+    alwaysShowPaginator?: boolean;
+    /**
+     * The breakpoint to define the maximum width boundary when using stack responsive layout.
+     * @defaultValue 960px
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Whether to enable cell memoization.
+     *
+     * When the memoization is enabled, be sure to:
+     *      1- Update the value prop (i.e., row data) to trigger a re-render of the cells of a given row.
+     *      2- Where necessary, use the spread operator (...) when updating the value prop objs which creates new fresh
+     *      objects and avoids mutating the same objects.
+     *
+     * When the memoization is disabled, a re-render of the datatable will trigger a re-render of all cells, which can
+     * lead to performance issues with large datasets and is therefore not recommended.
+     * @defaultValue true
+     */
+    cellMemo?: boolean;
+    /**
+     * The cell props to be checked at memoization.
+     *
+     * Possible cell props are:
+     *     'hostName', 'allowCellSelection', 'cellMemo', 'cellMemoProps', 'cellMemoPropsDepth', 'cellClassName', 'checkIcon', 'collapsedRowIcon',
+     *     'field', 'resolveFieldData', 'column', 'cProps', 'dataKey', 'editMode', 'editing', 'editingMeta', 'onEditingMetaChange', 'editingKey',
+     *     'getEditingRowData', 'expanded', 'expandedRowIcon', 'frozenRow', 'frozenCol', 'alignFrozenCol', 'index', 'isSelectable', 'onCheckboxChange',
+     *     'onClick', 'onMouseDown', 'onMouseUp', 'onRadioChange', 'onRowEditCancel', 'onRowEditInit', 'onRowEditSave', 'onRowToggle', 'responsiveLayout',
+     *     'rowData', 'rowEditorCancelIcon', 'rowEditorInitIcon', 'rowEditorSaveIcon', 'rowIndex', 'rowSpan', 'selectOnEdit', 'isRowSelected', 'isCellSelected',
+     *     'selectionAriaLabel', 'showRowReorderElement', 'showSelectionElement', 'tabIndex', 'getTabIndex', 'tableProps', 'tableSelector', 'value',
+     *     'getVirtualScrollerOption', 'ptCallbacks', 'metaData', 'unstyled', 'findNextSelectableCell', 'findPrevSelectableCell', 'findDownSelectableCell',
+     *     'findUpSelectableCell', 'focusOnElement', 'focusOnInit', 'updateStickyPosition'
+     *
+     * IMPORTANT: Including a function to be checked will in general disable the memoization in practice, since functions are
+     * compared by reference.
+     *
+     * @defaultValue ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex',
+     * 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol']
+     */
+    cellMemoProps?: string[];
+    /**
+     * The comparison depth when checking cell props (e.g., rowData) at memoization.
+     *
+     * @defaultValue 1
+     */
+    cellMemoPropsDepth?: number;
+    /**
+     * Icon to display in the checkbox.
+     */
+    checkIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Icon of the row toggler to display the row as collapsed.
+     */
+    collapsedRowIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * Used to define the resize mode of the columns, valid values are "fit" and "expand".
+     * @defaultValue fit
+     */
+    columnResizeMode?: 'fit' | 'expand' | undefined;
+    /**
+     * Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
+     * @defaultValue deepEquals
+     */
+    compareSelectionBy?: 'deepEquals' | 'equals' | undefined;
+    /**
+     * Selected row in single mode or an array of values in multiple mode.
+     */
+    contextMenuSelection?: object | undefined;
+    /**
+     * Character to use as the csv separator.
+     * @defaultValue ,
+     */
+    csvSeparator?: string | undefined;
+    /**
+     * Template of the current page report element. Available placeholders are &#123;currentPage&#125;, &#123;totalPages&#125;, &#123;rows&#125;, &#123;first&#125;, &#123;last&#125; and &#123;totalRecords&#125;
+     * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
+     */
+    currentPageReportTemplate?: string | undefined;
+    /**
+     * Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.
+     * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
+     */
+    dataKey?: string | undefined | ((data: any) => string);
+    /**
+     * Default sort order of an unsorted column.
+     * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
+     */
+    defaultSortOrder?: 1 | 0 | -1 | null | undefined;
+    /**
+     * When enabled, a rectangle that can be dragged can be used to make a range selection.
+     * @defaultValue false
+     */
+    dragSelection?: boolean;
+    /**
+     * Defines editing mode, options are "cell" and "row".
+     * @defaultValue null
+     */
+    editMode?: string | undefined;
+    /**
+     * A collection of rows to represent the current editing data in row edit mode.
+     */
+    editingRows?: DataTableValueArray | DataTableEditingRows | undefined;
+    /**
+     * Text to display when there is no data.
+     * @defaultValue No results found
+     */
+    emptyMessage?: string | React.ReactNode | ((frozen: boolean) => React.ReactNode) | undefined;
+    /**
+     * Makes row groups toggleable, default is false.
+     * @defaultValue false
+     */
+    expandableRowGroups?: boolean;
+    /**
+     * Icon of the row toggler to display the row as expanded.
+     */
+    expandedRowIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * A collection of rows or a map object row data keys that are expanded.
+     */
+    expandedRows?: DataTableValueArray | DataTableExpandedRows | undefined;
+    /**
+     * Name of the exported file.
+     * @defaultValue download
+     */
+    exportFilename?: string | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
+    /**
+     * Layout of the filter elements, valid values are "row" and "menu".
+     * @defaultValue menu
+     */
+    filterDisplay?: 'menu' | 'row' | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Icon to display the current filtering status.
+     */
+    filterIcon?: IconType<DataTable<TValue>> | undefined;
+    /**
+     * Icon to display when the filter can be cleared.
+     */
+    filterClearIcon?: IconType<DataTable<TValue>> | undefined;
+    /**
+     * An array of FilterMetadata objects to provide external filters.
+     */
+    filters?: DataTableFilterMeta | undefined;
+    /**
+     * Index of the first row to be displayed.
+     * @defaultValue 0
+     */
+    first?: number | undefined;
+    /**
+     * Custom footer content of the table.
+     */
+    footer?: DataTableFooterTemplateType<TValue>;
+    /**
+     * ColumnGroup component for footer.
+     */
+    footerColumnGroup?: React.ReactNode | undefined;
+    /**
+     * Items of the frozen part in scrollable DataTable.
+     */
+    frozenValue?: DataTableRowDataArray<TValue>;
+    /**
+     * Width of the frozen part in scrollable DataTable.
+     */
+    frozenWidth?: string | undefined;
+    /**
+     * Whether the row is frozen or not. Read-Only necessary for unstyled TypeScript definition.
+     * @defaultValue false
+     */
+    readonly frozenRow?: boolean;
+    /**
+     * Value of the global filter to use in filtering.
+     */
+    globalFilter?: string | null | undefined;
+    /**
+     * Define fields to be filtered globally.
+     */
+    globalFilterFields?: string[] | undefined;
+    /**
+     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
+     * @defaultValue contains
+     */
+    globalFilterMatchMode?: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined;
+    /**
+     * Used for either be grouped by a separate grouping row or using rowspan.
+     */
+    groupRowsBy?: string | undefined;
+    /**
+     * Custom header content of the table.
+     */
+    header?: DataTableHeaderTemplateType<TValue> | undefined;
+    /**
+     * ColumnGroup component for header.
+     */
+    headerColumnGroup?: React.ReactNode | undefined;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
+     */
+    lazy?: boolean;
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * The icon to show while indicating data load is in progress.
+     */
+    loadingIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @defaultValue true
+     */
+    metaKeySelection?: boolean;
+    /**
+     * An array of SortMeta objects to sort the data by default in multiple sort mode.
+     */
+    multiSortMeta?: DataTableSortMeta[] | null | undefined;
+    /**
+     * Number of page links to display.
+     * @defaultValue 5
+     */
+    pageLinkSize?: number | undefined;
+    /**
+     * When specified as true, enables the pagination.
+     * @defaultValue false
+     */
+    paginator?: boolean;
+    /**
+     * Style class of the paginator element.
+     */
+    paginatorClassName?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Content for the left side of the paginator.
+     */
+    paginatorLeft?: React.ReactNode | undefined;
+    /**
+     * Position of the paginator, options are "top","bottom" or "both".
+     * @defaultValue bottom
+     */
+    paginatorPosition?: 'top' | 'bottom' | 'both' | undefined;
+    /**
+     * Content for the right side of the paginator.
+     */
+    paginatorRight?: React.ReactNode | undefined;
+    /**
+     * Template of the paginator. For details, refer to the template section of the paginator documentation for further options.
+     * @defaultValue FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown
+     */
+    paginatorTemplate?: PaginatorTemplate | undefined;
+    /**
+     * When enabled, columns can have an un-sorted state.
+     * @defaultValue false
+     */
+    removableSort?: boolean;
+    /**
+     * When enabled, columns can be reordered using drag and drop.
+     * @defaultValue false
+     */
+    reorderableColumns?: boolean;
+    /**
+     * When enabled, rows can be reordered using drag and drop.
+     * @defaultValue false
+     */
+    reorderableRows?: boolean;
+    /**
+     * Defines the reorder indicator down icon.
+     */
+    reorderIndicatorDownIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * Defines the reorder indicator up icon.
+     */
+    reorderIndicatorUpIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * When enabled, columns can be resized using drag and drop.
+     * @defaultValue false
+     */
+    resizableColumns?: boolean;
+    /**
+     * Defines the responsive mode, valid options are "stack" and "scroll".
+     * @defaultValue scroll
+     * @deprecated since version 9.2.0
+     */
+    responsiveLayout?: 'scroll' | 'stack' | undefined;
+    /**
+     * Icon to display in the row editor cancel button.
+     */
+    rowEditorCancelIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * Icon to display in the row editor init button.
+     */
+    rowEditorInitIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * Icon to display in the row editor save button.
+     */
+    rowEditorSaveIcon?: IconType<DataTableProps<TValue>> | undefined;
+    /**
+     * Function to provide the content of row group footer.
+     */
+    rowGroupFooterTemplate?: DataTableRowGroupFooterTemplateType<TValue> | undefined;
+    /**
+     * Function to provide the content of row group header.
+     */
+    rowGroupHeaderTemplate?: DataTableRowGroupHeaderTemplateType<TValue> | undefined;
+    /**
+     * Defines the row grouping mode, valid values are "subheader" and "rowgroup".
+     */
+    rowGroupMode?: string | undefined;
+    /**
+     * When enabled, background of the rows change on hover.
+     */
+    rowHover?: boolean;
+    /**
+     * Number of rows to display per page.
+     */
+    rows?: number | undefined;
+    /**
+     * Array of integer values to display inside rows per page dropdown.
+     */
+    rowsPerPageOptions?: number[] | undefined;
+    /**
+     * Height of the scroll viewport.
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * When specified, enables horizontal and/or vertical scrolling.
+     * @defaultValue false
+     */
+    scrollable?: boolean;
+    /**
+     * When specified, selects all rows on page.
+     * @defaultValue false
+     */
+    selectAll?: boolean;
+    /**
+     * Determines whether the cell editor will be opened when clicking to select any row on Selection and Cell Edit modes.
+     * @defaultValue true
+     */
+    selectOnEdit?: boolean;
+    /**
+     * When a selectable row is clicked on RadioButton and Checkbox selection, it automatically decides whether to focus on elements such as checkbox or radio.
+     * @defaultValue true
+     */
+    selectionAutoFocus?: boolean;
+    /**
+     * A field property from the row to add Select &#123;field&#125; and Unselect &#123;field&#125; ARIA labels to checkbox/radio buttons.
+     */
+    selectionAriaLabel?: string | undefined;
+    /**
+     * When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page.
+     * @defaultValue false
+     */
+    selectionPageOnly?: boolean;
+    /**
+     * Whether to show grid lines between cells.
+     * @defaultValue false
+     */
+    showGridlines?: boolean;
+    /**
+     * Whether to show headers.
+     * @defaultValue true
+     */
+    showHeaders?: boolean;
+    /**
+     * Whether to show the select all checkbox inside the datatable's header.
+     */
+    showSelectAll?: boolean;
+    /**
+     * Define to set alternative sizes. Valid values: "small", "normal" and "large".
+     * @defaultValue normal
+     */
+    size?: 'small' | 'normal' | 'large' | undefined;
+    /**
+     * Property of a row data used for sorting, defaults to field.
+     */
+    sortField?: string | undefined;
+    /**
+     * Defines whether sorting works on single column or on multiple columns.
+     * @defaultValue single
+     */
+    sortMode?: 'single' | 'multiple' | undefined;
+    /**
+     * Icon to display the current sorting status.
+     */
+    sortIcon?: IconType<DataTable<TValue>, { sortOrder?: SortOrder; sorted?: boolean }> | undefined;
+    /**
+     * Order to sort the data by default.
+     */
+    sortOrder?: SortOrder;
+    /**
+     * Unique identifier of a stateful table to use in state storage.
+     */
+    stateKey?: string | undefined;
+    /**
+     * Defines where a stateful table keeps its state, valid values are "session" for sessionStorage, "local" for localStorage and "custom".
+     * @defaultValue session
+     */
+    stateStorage?: 'session' | 'local' | 'custom' | undefined;
+    /**
+     * Whether to displays rows with alternating colors.
+     * @defaultValue false
+     */
+    stripedRows?: boolean;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Style class of the table element.
+     */
+    tableClassName?: string | undefined;
+    /**
+     * Inline style of the table element.
+     */
+    tableStyle?: React.CSSProperties | undefined;
+    /**
+     * Number of total records, defaults to length of value when not defined.
+     */
+    totalRecords?: number | undefined;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     *
+     * Note: Currently only vertical orientation mode is supported.
+     */
+    virtualScrollerOptions?: VirtualScrollerProps | undefined;
+    /**
+     * Function that takes the cell data and returns an object in &#123;'styleclass' : condition&#125; format to define a classname for a particular now.
+     * @param {*} value - Value of the cell.
+     * @param {DataTableCellClassNameOptions<TValue>} options - ClassName options.
+     * @return {object | string | undefined} A string or object to define a classname for a particular cell.
+     */
+    cellClassName?(value: any, options: DataTableCellClassNameOptions<TValue>): object | string | undefined;
+    /**
+     * A function to implement custom restoreState with stateStorage="custom". Need to return state object.
+     * @return {object | undefined} Returns the state object.
+     */
+    customRestoreState?(): object | undefined;
+    /**
+     * A function to implement custom saveState with stateStorage="custom".
+     * @param {object} state - The object to be stored.
+     */
+    customSaveState?(state: object): void;
+    /**
+     * A function to implement custom export. Need to return string value.
+     * @param {DataTableExportFunctionEvent<TValue>} event - Custom export function event.
+     */
+    exportFunction?(event: DataTableExportFunctionEvent<TValue>): any;
+    /**
+     * Function that returns a boolean to decide whether the data should be selectable.
+     * @param {DataTableDataSelectableEvent<TValue>} event - Custom data selectable event.
+     */
+    isDataSelectable?(event: DataTableDataSelectableEvent): boolean | null;
+    /**
+     * Callback to invoke when all rows are selected using the header checkbox.
+     * @param {DataTableSelectEvent} event - Custom select event.
+     */
+    onAllRowsSelect?(event: DataTableSelectEvent): void;
+    /**
+     * Callback to invoke when all rows are unselected using the header checkbox.
+     * @param {DataTableUnselectEvent} event - Custom unselect event.
+     */
+    onAllRowsUnselect?(event: DataTableUnselectEvent): void;
+    /**
+     * Callback to invoke on cell click.
+     * @param {DataTableCellClickEvent<TValue>} event - Custom cell click event.
+     */
+    onCellClick?(event: DataTableCellClickEvent<TValue>): void;
+    /**
+     * Callback to invoke on cell select.
+     * @param {DataTableCellClickEvent<TValue>} event - Custom select event.
+     */
+    onCellSelect?(event: DataTableCellClickEvent<TValue>): void;
+    /**
+     * Callback to invoke on cell unselect.
+     * @param {DataTableCellClickEvent<TValue>} event - Custom unselect event.
+     */
+    onCellUnselect?(event: DataTableCellClickEvent<TValue>): void;
+    /**
+     * Callback to invoke when a column is reordered.
+     * @param {DataTableColReorderEvent} event - Custom column reorder event.
+     */
+    onColReorder?(event: DataTableColReorderEvent): void;
+    /**
+     * Callback to invoke when a column is resized.
+     * @param {DataTableColumnResizeEndEvent} event - Custom column resize end event.
+     */
+    onColumnResizeEnd?(event: DataTableColumnResizeEndEvent): void;
+    /**
+     * Callback to invoke when a resizer element is clicked.
+     * @param {DataTableColumnResizerClickEvent} event - Custom column resizer click event.
+     */
+    onColumnResizerClick?(event: DataTableColumnResizerClickEvent): void;
+    /**
+     * Callback to invoke when a resizer element is double clicked.
+     * @param {DataTableColumnResizerClickEvent} event - Custom column resizer double click event.
+     */
+    onColumnResizerDoubleClick?(event: DataTableColumnResizerClickEvent): void;
+    /**
+     * Callback to invoke when a context menu is clicked.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onContextMenu?(event: DataTableRowEvent): void;
+    /**
+     * Callback to invoke on filtering.
+     * @param {DataTableStateEvent} event - Custom state event.
+     */
+    onFilter?(event: DataTableStateEvent): void;
+    /**
+     * Callback to invoke on pagination.
+     * @param {DataTableStateEvent} event - Custom state event.
+     */
+    onPage?(event: DataTableStateEvent): void;
+    /**
+     * Callback to invoke when a row is clicked.
+     * @param {DataTableRowClickEvent} event - Custom row click event.
+     */
+    onRowClick?(event: DataTableRowClickEvent): void;
+    /**
+     * Callback to invoke when a row is collapsed.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onRowCollapse?(event: DataTableRowEvent): void;
+    /**
+     * Callback to invoke when a row is double clicked.
+     * @param {DataTableRowClickEvent} event - Custom click event.
+     */
+    onRowDoubleClick?(event: DataTableRowClickEvent): void;
+    /**
+     * Callback to invoke when a row pointerDown event occurs.
+     * @param {DataTableRowPointerEvent} event - Custom click event.
+     */
+    onRowPointerDown?(event: DataTableRowPointerEvent): void;
+    /**
+     * Callback to invoke when a row pointerUp event occurs.
+     * @param {DataTableRowPointerEvent} event - Custom click event.
+     */
+    onRowPointerUp?(event: DataTableRowPointerEvent): void;
+    /**
+     * Callback to invoke when the cancel icon is clicked on row editing mode.
+     * @param {DataTableRowEditEvent} event - Custom row edit event.
+     */
+    onRowEditCancel?(event: DataTableRowEditEvent): void;
+    /**
+     * Callback to invoke when the editing icon is clicked on row editing mode. Use in conjuction with editingRows value from the Datatable to programmatically control editing rows.
+     * @param {DataTableRowEditEvent} event - Custom row edit event.
+     */
+    onRowEditChange?(event: DataTableRowEditEvent): void;
+    /**
+     * Callback to invoke when row edit is completed.
+     * @param {DataTableRowEditCompleteEvent} event - Custom row edit complete event.
+     */
+    onRowEditComplete?(event: DataTableRowEditCompleteEvent): void;
+    /**
+     * Callback to invoke when the editing icon is clicked on row editing mode.
+     * @param {DataTableRowEditEvent} event - Custom row edit event.
+     */
+    onRowEditInit?(event: DataTableRowEditEvent): void;
+    /**
+     * Callback to invoke when the save icon is clicked on row editing mode.
+     * @param {DataTableRowEditSaveEvent} event - Custom row edit save event.
+     */
+    onRowEditSave?(event: DataTableRowEditSaveEvent<TValue>): void;
+    /**
+     * Callback to invoke when a row is expanded.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onRowExpand?(event: DataTableRowEvent): void;
+    /**
+     * Callback to invoke when a row is hovered with mouse.
+     * @param {DataTableRowMouseEvent} event - Custom row mouse event.
+     */
+    onRowMouseEnter?(event: DataTableRowMouseEvent): void;
+    /**
+     * Callback to invoke when a row is navigated away from with mouse.
+     * @param {DataTableRowMouseEvent} event - Custom row mouse event.
+     */
+    onRowMouseLeave?(event: DataTableRowMouseEvent): void;
+    /**
+     * Callback to update the new order.
+     * @param {DataTableRowReorderEvent<TValue>} event - Custom row reorder event.
+     */
+    onRowReorder?(event: DataTableRowReorderEvent<TValue>): void;
+    /**
+     * Callback to invoke when a row is selected.
+     * @param {DataTableSelectEvent} event - Custom select event.
+     */
+    onRowSelect?(event: DataTableSelectEvent): void;
+    /**
+     * Callback to invoke when a row is toggled or collapsed.
+     * @param {DataTableRowToggleEvent} event - Custom row toggle event.
+     */
+    onRowToggle?(event: DataTableRowToggleEvent): void;
+    /**
+     * Callback to invoke when a row is unselected.
+     * @param {DataTableUnselectEvent} event - Custom unselect event.
+     */
+    onRowUnselect?(event: DataTableUnselectEvent): void;
+    /**
+     * Callback to invoke when select all value changes.
+     * @param {DataTableSelectAllChangeEvent} event - Custom select all change event.
+     */
+    onSelectAllChange?(event: DataTableSelectAllChangeEvent): void;
+    /**
+     * Callback to invoke on sort.
+     * @param {DataTableStateEvent} event - Custom state event.
+     */
+    onSort?(event: DataTableStateEvent): void;
+    /**
+     * Callback to invoke table state is restored.
+     * @param {object} state - Table state.
+     */
+    onStateRestore?(state: object): void;
+    /**
+     * Callback to invoke table state is saved.
+     * @param {object} state - Table state.
+     */
+    onStateSave?(state: object): void;
+    /**
+     * Callback to invoke after filtering and sorting to pass the rendered value.
+     * @param {DataTableRowDataArray<TValue>} value - Value displayed by the table.
+     */
+    onValueChange?(value: DataTableRowDataArray<TValue>): void;
+    /**
+     * Function that takes the row data and returns an object in &#123;'styleclass' : condition&#125; format to define a classname for a particular now.
+     * @param {DataTableRowData<TValue>} data - Value displayed by the table.
+     */
+    rowClassName?(data: DataTableRowData<TValue>, options: DataTableRowClassNameOptions<TValue>): object | string | undefined;
+    /**
+     * Callback to invoke to validate the editing row when the save icon is clicked on row editing mode.
+     * @param {DataTableRowData<TValue>} data - Editing row data.
+     */
+    rowEditValidator?(data: DataTableRowData<TValue>, options: DataTableRowEditValidatorOptions<TValue>): boolean;
+    /**
+     * Function that receives the row data as the parameter and returns the expanded row content. You can override the rendering of the content by setting options.customRendering = true.
+     * @param {DataTableRowData<TValue>} data - Editing row data.
+     * @param {DataTableRowExpansionTemplate} options - Options for the row expansion template.
+     */
+    rowExpansionTemplate?(data: DataTableRowData<TValue>, options: DataTableRowExpansionTemplate): React.ReactNode;
+    /**
+     * Function that returns a boolean by passing the row data to decide if the row reorder element should be displayed per row.
+     * @param {DataTableRowData<TValue>} data - Editing row data.
+     * @param {DataTableShowRowReorderElementOptions} options - Options for the row reorder element.
+     */
+    showRowReorderElement?(data: DataTableRowData<TValue>, options: DataTableShowRowReorderElementOptions<TValue>): boolean | null;
+    /**
+     * Function that returns a boolean by passing the row data to decide if the radio or checkbox should be displayed per row.
+     * @param {DataTableRowData<TValue>} data - Editing row data.
+     * @param {DataTableShowSelectionElementOptions} options - Options for the row reorder element.
+     */
+    showSelectionElement?(data: DataTableRowData<TValue>, options: DataTableShowSelectionElementOptions<TValue>): boolean | null;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataTablePassThroughOptions}
+     */
+    pt?: DataTablePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+interface DataTablePropsSingle<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection?: boolean;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode?: 'single' | 'radiobutton' | undefined;
+    /**
+     * Selected single value.
+     */
+    selection?: TValue[number] | undefined | null;
+    /**
+     * Callback to invoke when a row selected with right click.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onContextMenuSelectionChange?(event: DataTableContextMenuSingleSelectionChangeEvent<TValue>): void;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionSingleChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionSingleChangeEvent<TValue>): void;
+}
+
+/**
+ * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+interface DataTablePropsMultiple<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection?: boolean;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'multiple' | 'checkbox' | null;
+    /**
+     * Selected array of values.
+     */
+    selection: TValue;
+    /**
+     * Callback to invoke when a row selected with right click.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onContextMenuSelectionChange?(event: DataTableContextMenuMultipleSelectionChangeEvent<TValue>): void;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionMultipleChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionMultipleChangeEvent<TValue>): void;
+}
+
+/**
+ * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+interface DataTablePropsCellSingle<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection: true;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'single';
+    /**
+     * Selected cells.
+     */
+    selection: DataTableCellSelection<TValue> | null;
+    /**
+     * Callback to invoke when a row selected with right click.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onContextMenuSelectionChange?(event: DataTableContextMenuMultipleSelectionChangeEvent<TValue>): void;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionCellSingleChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionCellSingleChangeEvent<TValue>): void;
+}
+
+/**
+ * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+interface DataTablePropsCellMultiple<TValue extends DataTableValueArray> extends DataTableBaseProps<TValue> {
+    /**
+     * Whether to cell selection is enabled or not.
+     * @defaultValue false
+     */
+    cellSelection: true;
+    /**
+     * Specifies the selection mode, valid values are "single", "multiple", "radiobutton" and "checkbox".
+     */
+    selectionMode: 'multiple';
+    /**
+     * Selected cells.
+     */
+    selection: Array<DataTableCellSelection<TValue>> | null;
+    /**
+     * Callback to invoke when a row selected with right click.
+     * @param {DataTableRowEvent} event - Custom row event.
+     */
+    onContextMenuSelectionChange?(event: DataTableContextMenuMultipleSelectionChangeEvent<TValue>): void;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {DataTableSelectionCellMultipleChangeEvent<TValue>} event - Custom selection change event.
+     */
+    onSelectionChange?(event: DataTableSelectionCellMultipleChangeEvent<TValue>): void;
+}
+
+/**
+ * Defines valid properties in DataTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export type DataTableProps<TValue extends DataTableValueArray> = DataTablePropsSingle<TValue> | DataTablePropsCellSingle<TValue> | DataTablePropsMultiple<TValue> | DataTablePropsCellMultiple<TValue>;
+
+/**
+ * **PrimeReact - DataTable<TValue**
+ *
+ * _DataTable displays data in tabular format._
+ *
+ * [Live Demo](https://www.primereact.org/datatable/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class DataTable<TValue extends DataTableValueArray> extends React.Component<DataTableProps<TValue>, any> {
+    /**
+     * Clears the table state.
+     */
+    public clearState(): void;
+    /**
+     * Closes the current editing cell when incell editing is enabled.
+     */
+    public closeEditingCell(): void;
+    /**
+     * Closes the current editing rows when row editing is enabled.
+     */
+    public closeEditingRows(): void;
+    /**
+     * Exports the data to CSV format.
+     * @param {object} options - Options to export
+     */
+    public exportCSV(options?: { selectionOnly: boolean }): void;
+    /**
+     * Filters the data.
+     * @param {T} value - The filter value
+     * @param {string} field - The filter field
+     * @param {'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom'} mode - Filter match mode
+     * @param  {number} index - Index of the filter
+     */
+    public filter<T>(
+        /**
+         * The filter value.
+         */
+        value: T,
+        /**
+         * The filter field.
+         */
+        field: string,
+        /**
+         * Filter match mode.
+         */
+        mode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom',
+        /**
+         * Index of the filter.
+         */
+        index?: number
+    ): void;
+    /**
+     * Resets sort, filter, paginator and columnorder state.
+     */
+    public reset(): void;
+    /**
+     * Resets column order when reorderableColumns is enabled.
+     */
+    public resetColumnOrder(): void;
+    /**
+     * Resets scroll position.
+     */
+    public resetScroll(): void;
+    /**
+     * Resets resize columns width.
+     */
+    public resetResizeColumnsWidth(): void;
+    /**
+     * Restores the column widths.
+     */
+    public restoreColumnWidths(): void;
+    /**
+     * Restores the table state.
+     */
+    public restoreState(): void;
+    /**
+     * Stored states can be loaded at any time using this method if there is a stateStorage property.
+     * @param {*} state - The state to restore
+     */
+    public restoreTableState(state: any): void;
+    /**
+     * Saves the state.
+     */
+    public saveState(): void;
+    /**
+     * Retrieves the currently applied filters for the data table.
+     * @returns {DataTableFilterMeta | undefined} The currently applied filters, if any, or undefined if no filters are set.
+     */
+    public getFilterMeta(): DataTableFilterMeta | undefined;
+    /**
+     * Sets the filters for the data table.
+     * @param {DataTableFilterMeta} filters - The filters to be applied to the data table.
+     * @returns {void}
+     */
+    public setFilterMeta(filters: DataTableFilterMeta): void;
+    /**
+     * Retrieves the currently applied multiple sort metadata for the data table.
+     * @returns {DataTableSortMeta[] | undefined} The currently applied sorts, if any, or undefined if no sorts are set.
+     */
+    public getSortMeta(): DataTableSortMeta[] | undefined;
+    /**
+     * Sets the multiple sort metadata for the data table.
+     * @param {DataTableSortMeta[]} sorts - The sorts to be applied to the data table.
+     * @returns {void}
+     */
+    public setSortMeta(sorts: DataTableSortMeta[]): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get container element.
+     * @return {HTMLTableElement | null} Container element
+     */
+    public getTable(): HTMLTableElement | null;
+    /**
+     * Used to get the virtual scroller.
+     * @return {VirtualScroller | null} Virtual scroller instance
+     */
+    public getVirtualScroller(): VirtualScroller | null;
+    /**
+     * Used to get the processed data.
+     * @return {TValue} sorted and filtered data
+     */
+    public getProcessedData(): TValue;
+}
diff --git a/components/lib/datatable/package.json b/components/lib/datatable/package.json
new file mode 100644
index 0000000000..6719da3523
--- /dev/null
+++ b/components/lib/datatable/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./datatable.cjs.js",
+    "module": "./datatable.esm.js",
+    "unpkg": "./datatable.min.js",
+    "types": "./datatable.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
new file mode 100644
index 0000000000..6ff493a60a
--- /dev/null
+++ b/components/lib/dataview/DataView.js
@@ -0,0 +1,359 @@
+import * as React from 'react';
+import PrimeReact, { localeOption, PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { BarsIcon } from '../icons/bars';
+import { SpinnerIcon } from '../icons/spinner';
+import { ThLargeIcon } from '../icons/thlarge';
+import { Paginator } from '../paginator/Paginator';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { DataViewBase, DataViewLayoutOptionsBase } from './DataViewBase';
+
+export const DataViewLayoutOptions = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = DataViewLayoutOptionsBase.getProps(inProps, context);
+    const { ptm, cx } = DataViewLayoutOptionsBase.setMetaData({
+        props
+    });
+
+    const changeLayout = (event, layoutMode) => {
+        props.onChange({
+            originalEvent: event,
+            value: layoutMode
+        });
+        event.preventDefault();
+    };
+
+    const listIconProps = mergeProps(ptm('list'));
+    const gridIconProps = mergeProps(ptm('grid'));
+    const listIcon = IconUtils.getJSXIcon(props.listIcon || <BarsIcon {...listIconProps} />, { ...listIconProps }, { props });
+    const gridIcon = IconUtils.getJSXIcon(props.gridIcon || <ThLargeIcon {...gridIconProps} />, { ...gridIconProps }, { props });
+    const rootProps = mergeProps(
+        {
+            id: props.id,
+            style: props.style,
+            className: classNames(props.className, cx('root'))
+        },
+        DataViewLayoutOptionsBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const listButtonProps = mergeProps(
+        {
+            type: 'button',
+            className: cx('listButton'),
+            onClick: (event) => changeLayout(event, 'list')
+        },
+        ptm('listButton')
+    );
+
+    const gridButtonProps = mergeProps(
+        {
+            type: 'button',
+            className: cx('gridButton'),
+            onClick: (event) => changeLayout(event, 'grid')
+        },
+        ptm('gridButton')
+    );
+
+    return (
+        <div {...rootProps}>
+            <button {...listButtonProps}>
+                {listIcon}
+                <Ripple />
+            </button>
+            <button {...gridButtonProps}>
+                {gridIcon}
+                <Ripple />
+            </button>
+        </div>
+    );
+});
+
+export const DataViewItem = React.memo((props) => {
+    return props.template(props.item, props.layout);
+});
+
+export const DataView = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = DataViewBase.getProps(inProps, context);
+        const [firstState, setFirstState] = React.useState(props.first);
+        const [rowsState, setRowsState] = React.useState(props.rows);
+        const metaData = {
+            props,
+            state: {
+                first: firstState,
+                rows: rowsState
+            }
+        };
+        const { ptm, cx, isUnstyled } = DataViewBase.setMetaData(metaData);
+
+        useHandleStyle(DataViewBase.css.styles, isUnstyled, { name: 'dataview' });
+
+        const elementRef = React.useRef(null);
+        const first = props.onPage ? props.first : firstState;
+        const rows = props.onPage ? props.rows : rowsState;
+
+        const getItemRenderKey = (value) => {
+            return props.dataKey ? ObjectUtils.resolveFieldData(value, props.dataKey) : null;
+        };
+
+        const getTotalRecords = () => {
+            return props.totalRecords ? props.totalRecords : props.value ? props.value.length : 0;
+        };
+
+        const createPaginator = (position) => {
+            const className = classNames('p-paginator-' + position, props.paginatorClassName);
+            const totalRecords = getTotalRecords();
+
+            return (
+                <Paginator
+                    first={first}
+                    rows={rows}
+                    pageLinkSize={props.pageLinkSize}
+                    className={className}
+                    onPageChange={onPageChange}
+                    template={props.paginatorTemplate}
+                    totalRecords={totalRecords}
+                    rowsPerPageOptions={props.rowsPerPageOptions}
+                    currentPageReportTemplate={props.currentPageReportTemplate}
+                    leftContent={props.paginatorLeft}
+                    rightContent={props.paginatorRight}
+                    alwaysShow={props.alwaysShowPaginator}
+                    dropdownAppendTo={props.paginatorDropdownAppendTo}
+                    pt={ptm('paginator')}
+                    unstyled={props.unstyled}
+                    __parentMetadata={{ parent: metaData }}
+                />
+            );
+        };
+
+        const onPageChange = (event) => {
+            if (props.onPage) {
+                props.onPage(event);
+            } else {
+                setFirstState(event.first);
+                setRowsState(event.rows);
+            }
+        };
+
+        const getItems = (value) => {
+            if (props.paginator) {
+                const currentFirst = props.lazy ? 0 : first;
+                const totalRecords = getTotalRecords();
+                const last = Math.min(rows + currentFirst, totalRecords);
+
+                return value.slice(currentFirst, last) || [];
+            }
+
+            return value;
+        };
+
+        const sort = () => {
+            if (props.value) {
+                // performance optimization to prevent resolving field data in each loop
+                const lookupMap = new Map();
+                const comparator = ObjectUtils.localeComparator((context && context.locale) || PrimeReact.locale);
+                const value = [...props.value];
+
+                for (let item of value) {
+                    lookupMap.set(item, ObjectUtils.resolveFieldData(item, props.sortField));
+                }
+
+                value.sort((data1, data2) => {
+                    let value1 = lookupMap.get(data1);
+                    let value2 = lookupMap.get(data2);
+
+                    return ObjectUtils.sort(value1, value2, props.sortOrder, comparator, (context && context.nullSortOrder) || PrimeReact.nullSortOrder);
+                });
+
+                return value;
+            }
+
+            return null;
+        };
+
+        const createLoader = () => {
+            if (props.loading) {
+                const loadingIconProps = mergeProps(
+                    {
+                        className: cx('loadingIcon')
+                    },
+                    ptm('loadingIcon')
+                );
+                const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
+                const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+                const loadingOverlayProps = mergeProps(
+                    {
+                        className: cx('loadingOverlay')
+                    },
+                    ptm('loadingOverlay')
+                );
+
+                return <div {...loadingOverlayProps}>{loadingIcon}</div>;
+            }
+
+            return null;
+        };
+
+        const createTopPaginator = () => {
+            if (props.paginator && (props.paginatorPosition !== 'bottom' || props.paginatorPosition === 'both')) {
+                return createPaginator('top');
+            }
+
+            return null;
+        };
+
+        const createBottomPaginator = () => {
+            if (props.paginator && (props.paginatorPosition !== 'top' || props.paginatorPosition === 'both')) {
+                return createPaginator('bottom');
+            }
+
+            return null;
+        };
+
+        const createEmptyMessage = () => {
+            if (!props.loading) {
+                const content = props.emptyMessage || localeOption('emptyMessage');
+                const emptyMessageProps = mergeProps(
+                    {
+                        className: cx('emptyMessage')
+                    },
+                    ptm('emptyMessage')
+                );
+
+                return <div {...emptyMessageProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const createHeader = () => {
+            if (props.header) {
+                const headerProps = mergeProps(
+                    {
+                        className: cx('header')
+                    },
+                    ptm('header')
+                );
+
+                return <div {...headerProps}>{props.header}</div>;
+            }
+
+            return null;
+        };
+
+        const createFooter = () => {
+            if (props.footer) {
+                const footerProps = mergeProps(
+                    {
+                        className: cx('footer')
+                    },
+                    ptm('footer')
+                );
+
+                return <div {...footerProps}>{props.footer}</div>;
+            }
+
+            return null;
+        };
+
+        const createItems = (value) => {
+            if (ObjectUtils.isNotEmpty(value)) {
+                let items = getItems(value);
+
+                return items.map((item, index) => {
+                    return <DataViewItem key={getItemRenderKey(item) || index} template={props.itemTemplate} layout={props.layout} item={item} />;
+                });
+            }
+
+            return createEmptyMessage();
+        };
+
+        const createContent = (value) => {
+            const contentProps = mergeProps(
+                {
+                    className: cx('content')
+                },
+                ptm('content')
+            );
+            let content = null;
+
+            if (props.listTemplate) {
+                const items = getItems(value);
+
+                if (ObjectUtils.isNotEmpty(items)) {
+                    content = ObjectUtils.getJSXElement(props.listTemplate, items, props.layout);
+                } else {
+                    content = createEmptyMessage();
+                }
+            } else {
+                const items = createItems(value);
+                const gridProps = mergeProps(
+                    {
+                        className: cx('grid')
+                    },
+                    ptm('grid')
+                );
+
+                content = <div {...gridProps}>{items}</div>;
+            }
+
+            return <div {...contentProps}>{content}</div>;
+        };
+
+        const processData = () => {
+            let data = props.value;
+
+            if (ObjectUtils.isNotEmpty(data) && props.sortField) {
+                data = sort();
+            }
+
+            return data;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const data = processData();
+        const loader = createLoader();
+        const topPaginator = createTopPaginator();
+        const bottomPaginator = createBottomPaginator();
+        const header = createHeader();
+        const footer = createFooter();
+        const content = createContent(data);
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                style: props.style,
+                className: classNames(props.className, cx('root'))
+            },
+            DataViewBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {loader}
+                {header}
+                {topPaginator}
+                {content}
+                {bottomPaginator}
+                {footer}
+            </div>
+        );
+    })
+);
+
+DataViewLayoutOptions.displayName = 'DataViewLayoutOptions';
+
+DataViewItem.displayName = 'DataViewItem';
+
+DataView.displayName = 'DataView';
diff --git a/components/lib/dataview/DataViewBase.js b/components/lib/dataview/DataViewBase.js
new file mode 100644
index 0000000000..903178991d
--- /dev/null
+++ b/components/lib/dataview/DataViewBase.js
@@ -0,0 +1,101 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    loadingIcon: 'p-dataview-loading-icon',
+    loadingOverlay: 'p-dataview-loading-overlay p-component-overlay',
+    emptyMessage: 'p-dataview-emptymessage',
+    header: 'p-dataview-header',
+    footer: 'p-dataview-footer',
+    content: 'p-dataview-content',
+    grid: ({ props }) =>
+        classNames('p-grid grid', {
+            'p-nogutter grid-nogutter': !props.gutter
+        }),
+    root: ({ props }) =>
+        classNames('p-dataview p-component', {
+            [`p-dataview-${props.layout}`]: !!props.layout,
+            'p-dataview-loading': props.loading
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-dataview-loading {
+        position: relative;
+        min-height: 4rem;
+    }
+
+    .p-dataview .p-dataview-loading-overlay {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+`;
+
+export const DataViewBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'DataView',
+        id: null,
+        header: null,
+        footer: null,
+        value: null,
+        layout: 'list',
+        dataKey: null,
+        rows: null,
+        first: 0,
+        totalRecords: null,
+        paginator: false,
+        paginatorPosition: 'bottom',
+        alwaysShowPaginator: true,
+        paginatorClassName: null,
+        paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+        paginatorLeft: null,
+        paginatorRight: null,
+        paginatorDropdownAppendTo: null,
+        pageLinkSize: 5,
+        rowsPerPageOptions: null,
+        currentPageReportTemplate: '({currentPage} of {totalPages})',
+        emptyMessage: null,
+        sortField: null,
+        sortOrder: null,
+        style: null,
+        className: null,
+        lazy: false,
+        loading: false,
+        loadingIcon: null,
+        gutter: false,
+        itemTemplate: null,
+        listTemplate: null,
+        onPage: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
+
+export const DataViewLayoutOptionsBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'DataViewLayoutOptions',
+        id: null,
+        style: null,
+        className: null,
+        layout: null,
+        listIcon: null,
+        gridIcon: null,
+        onChange: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            root: 'p-dataview p-component p-dataview-layout-options p-selectbutton p-button-group',
+            listButton: ({ props }) => classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'list' }),
+            gridButton: ({ props }) => classNames('p-button p-button-icon-only', { 'p-highlight': props.layout === 'grid' })
+        }
+    }
+});
diff --git a/components/lib/dataview/dataview.d.ts b/components/lib/dataview/dataview.d.ts
new file mode 100755
index 0000000000..1f23dd9b31
--- /dev/null
+++ b/components/lib/dataview/dataview.d.ts
@@ -0,0 +1,388 @@
+/**
+ *
+ * DataView displays data in grid or list layout with pagination and sorting features.
+ *
+ * [Live Demo](https://www.primereact.org/dataview/)
+ *
+ * @module dataview
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type DataViewPassThroughType<T> = PassThroughType<T, DataViewPassThroughMethodOptions>;
+export declare type DataViewLayoutOptionsPassThroughType<T> = PassThroughType<T, DataViewLayoutOptionsPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewPassThroughMethodOptions {
+    props: DataViewProps;
+    state: DataViewState;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DataViewLayoutOptionsPassThroughMethodOptions {
+    props: DataViewLayoutOptionsProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewProps.pt}
+ */
+export interface DataViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptions}
+     */
+    paginator?: PaginatorPassThroughOptions;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: DataViewPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the grid's DOM element.
+     */
+    grid?: DataViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in DataView component.
+ */
+export interface DataViewState {
+    /**
+     * Current index of first record as a number.
+     */
+    first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    rows: number;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DataViewLayoutOptionsProps.pt}
+ */
+export interface DataViewLayoutOptionsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DataViewLayoutOptionsPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list button's DOM element.
+     */
+    listButton?: DataViewLayoutOptionsPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the list icon's DOM element.
+     */
+    listIcon?: DataViewLayoutOptionsPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the grid button's DOM element.
+     */
+    gridButton?: DataViewLayoutOptionsPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the grid icon's DOM element.
+     */
+    gridIcon?: DataViewLayoutOptionsPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+}
+
+/**
+ * Custom page event.
+ * @see {@link DataViewProps.onPage}
+ * @event
+ */
+interface DataViewPageEvent {
+    /**
+     * Index of the first records on page.
+     */
+    first: number;
+    /**
+     * Number of records to display per page.
+     */
+    rows: number;
+    /**
+     * Value of the new page.
+     */
+    page: number;
+    /**
+     * Total number of pages.
+     */
+    pageCount: number;
+}
+
+/**
+ * Custom data view layout options event.
+ */
+interface DataViewLayoutOptionsChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLButtonElement>;
+    /**
+     * New value.
+     */
+    value: 'list' | 'grid' | (string & Record<string, unknown>);
+}
+
+/**
+ * Custom data view layout options props
+ */
+export interface DataViewLayoutOptionsProps {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string;
+    /**
+     * Orientation of the panels, valid values are "list" and "grid".
+     */
+    layout?: 'list' | 'grid' | (string & Record<string, unknown>);
+    /**
+     * Defines the display mode list icon.
+     */
+    listIcon?: IconType<DataViewProps> | undefined;
+    /**
+     * Defines the display mode grid icon.
+     */
+    gridIcon?: IconType<DataViewProps> | undefined;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Style class of the element.
+     */
+    className?: string;
+    /**
+     * Layout options change callback
+     * @param {DataViewLayoutOptionsChangeEvent} event - Custom event.
+     */
+    onChange(event: DataViewLayoutOptionsChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * Custom data view layout options
+ * @extends {React.Component<DataViewLayoutOptionsProps, any>}
+ */
+export declare class DataViewLayoutOptions extends React.Component<DataViewLayoutOptionsProps, any> {}
+
+/**
+ * Defines valid properties in DataView component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface DataViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Header content of the component.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Footer content of the component.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * An array of objects to display.
+     */
+    value?: any[] | undefined;
+    /**
+     * Layout of the items, valid values are "list" and "grid".
+     * @defaultValue list
+     */
+    layout?: 'list' | 'grid' | (string & Record<string, unknown>);
+    /**
+     * Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.
+     */
+    dataKey?: string | undefined;
+    /**
+     * Number of rows to display per page.
+     */
+    rows?: number | undefined;
+    /**
+     * Index of the first record to render.
+     * @defaultValue 0
+     */
+    first?: number | undefined;
+    /**
+     * Number of total records, defaults to length of value when not defined.
+     */
+    totalRecords?: number | undefined;
+    /**
+     * When specified as true, enables the pagination.
+     * @defaultValue false
+     */
+    paginator?: boolean | undefined;
+    /**
+     * Position of the paginator, options are "top","bottom" or "both".
+     * @defaultValue bottom
+     */
+    paginatorPosition?: 'top' | 'bottom' | 'both' | undefined;
+    /**
+     * Whether to show it even there is only one page.
+     * @defaultValue true
+     */
+    alwaysShowPaginator?: boolean | undefined;
+    /**
+     * Style class of the paginator element.
+     */
+    paginatorClassName?: string | undefined;
+    /**
+     * Template of the paginator. For details, refer to the template section of the paginator documentation for further options.
+     * @defaultValue FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown
+     */
+    paginatorTemplate?: PaginatorTemplate | undefined;
+    /**
+     * Content for the left side of the paginator.
+     */
+    paginatorLeft?: React.ReactNode | undefined;
+    /**
+     * Content for the right side of the paginator.
+     */
+    paginatorRight?: React.ReactNode | undefined;
+    /**
+     * Number of page links to display.
+     * @defaultValue 5
+     */
+    pageLinkSize?: number | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Array of integer values to display inside rows per page dropdown.
+     */
+    rowsPerPageOptions?: number[] | undefined;
+    /**
+     * Template of the current page report element.
+     * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
+     */
+    currentPageReportTemplate?: string | undefined;
+    /**
+     * Text to display when there is no data.
+     * @defaultValue No records found.
+     */
+    emptyMessage?: string | undefined;
+    /**
+     * Name of the field to sort data by default.
+     */
+    sortField?: string | undefined;
+    /**
+     * Order to sort the data by default.
+     */
+    sortOrder?: 1 | 0 | -1 | undefined | null;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Display loading icon of the button.
+     */
+    loading?: boolean | undefined;
+    /**
+     * Name of the loading icon or JSX.Element for loading icon.
+     */
+    loadingIcon?: IconType<DataViewProps> | undefined;
+    /**
+     * Whether the grid structure in the container has gutter. Default value is false.
+     * @defaultValue false
+     */
+    gutter?: boolean | undefined;
+    /**
+     * Callback to invoke on pagination.
+     * @param {DataViewPageEvent} event - Custom page event.
+     */
+    onPage?(event: DataViewPageEvent): void;
+    /**
+     * Function that gets the option along with the layout mode and returns the content.
+     * @param {*} item - Current item.
+     * @param {'list' | 'grid' | (string & Record<string, unknown>)} layout - Current layout.
+     */
+    itemTemplate?(item: any, layout?: 'list' | 'grid' | (string & Record<string, unknown>)): React.ReactNode | undefined;
+    /**
+     * Function that gets the options along with the layout mode and returns the content.
+     * @param {*} items - Array of items to be rendered.
+     * @param {'list' | 'grid' | (string & Record<string, unknown>)} [layout] - Current layout mode.
+     * @returns {React.ReactNode | React.ReactNode[] | undefined} The content to be rendered.
+     */
+    listTemplate?(items: any[], layout?: 'list' | 'grid' | (string & Record<string, unknown>)): React.ReactNode | React.ReactNode[] | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DataViewPassThroughOptions}
+     */
+    pt?: DataViewPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - DataViewLayoutOptions**
+ *
+ * _DataView displays data in grid or list layout with pagination and sorting features._
+ *
+ * [Live Demo](https://www.primereact.org/dataview/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+// tslint:disable-next-line:max-classes-per-file
+export declare class DataView extends React.Component<DataViewProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/dataview/package.json b/components/lib/dataview/package.json
new file mode 100644
index 0000000000..0b55e93076
--- /dev/null
+++ b/components/lib/dataview/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./dataview.cjs.js",
+    "module": "./dataview.esm.js",
+    "unpkg": "./dataview.min.js",
+    "types": "./dataview.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/deferredcontent/DeferredContent.js b/components/lib/deferredcontent/DeferredContent.js
new file mode 100644
index 0000000000..c474fe6d2d
--- /dev/null
+++ b/components/lib/deferredcontent/DeferredContent.js
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useEventListener, useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { DeferredContentBase } from './DeferredContentBase';
+
+export const DeferredContent = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = DeferredContentBase.getProps(inProps, context);
+
+    const [loadedState, setLoadedState] = React.useState(false);
+    const elementRef = React.useRef(null);
+
+    const [bindScrollListener, unbindScrollListener] = useEventListener({
+        target: 'window',
+        type: 'scroll',
+        listener: () => {
+            if (shouldLoad()) {
+                load();
+                unbindScrollListener();
+            }
+        }
+    });
+
+    const { ptm } = DeferredContentBase.setMetaData({
+        props,
+        state: {
+            loaded: loadedState
+        }
+    });
+
+    const shouldLoad = () => {
+        if (loadedState) {
+            return false;
+        }
+
+        const rect = elementRef.current.getBoundingClientRect();
+        const winHeight = document.documentElement.clientHeight;
+
+        return winHeight >= rect.top;
+    };
+
+    const load = (event) => {
+        setLoadedState(true);
+        props.onLoad && props.onLoad(event);
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current
+    }));
+
+    useMountEffect(() => {
+        if (!loadedState) {
+            shouldLoad() ? load() : bindScrollListener();
+        }
+    });
+
+    const rootProps = mergeProps(
+        {
+            ref: elementRef
+        },
+        DeferredContentBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    return <div {...rootProps}>{loadedState && props.children}</div>;
+});
+
+DeferredContent.displayName = 'DeferredContent';
diff --git a/components/lib/deferredcontent/DeferredContentBase.js b/components/lib/deferredcontent/DeferredContentBase.js
new file mode 100644
index 0000000000..c1f7a5dfb9
--- /dev/null
+++ b/components/lib/deferredcontent/DeferredContentBase.js
@@ -0,0 +1,9 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+export const DeferredContentBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'DeferredContent',
+        onload: null,
+        children: undefined
+    }
+});
diff --git a/components/lib/deferredcontent/deferredcontent.d.ts b/components/lib/deferredcontent/deferredcontent.d.ts
new file mode 100644
index 0000000000..3737635d55
--- /dev/null
+++ b/components/lib/deferredcontent/deferredcontent.d.ts
@@ -0,0 +1,96 @@
+/**
+ *
+ * DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
+ *
+ * [Live Demo](https://www.primereact.org/deferredcontent/)
+ *
+ * @module deferredcontent
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type DeferredContentPassThroughType<T> = PassThroughType<T, DeferredContentPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DeferredContentPassThroughMethodOptions {
+    props: DeferredContentProps;
+    state: DeferredContentState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DeferredContentProps.pt}
+ */
+export interface DeferredContentPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DeferredContentPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in DeferredContent component.
+ */
+export interface DeferredContentState {
+    /**
+     * Current loaded state as a boolean.
+     * @defaultValue false
+     */
+    loaded?: boolean;
+}
+
+/**
+ * Defines valid properties in DeferredContent component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface DeferredContentProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Callback to invoke when deferred content is loaded.
+     * @param {React.SyntheticEvent} event - Event object
+     */
+    onLoad?(event: React.SyntheticEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DeferredContentPassThroughOptions}
+     */
+    pt?: DeferredContentPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * **PrimeReact - DeferredContent**
+ *
+ * _DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll._
+ *
+ * [Live Demo](https://www.primereact.org/deferredcontent/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class DeferredContent extends React.Component<DeferredContentProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/deferredcontent/package.json b/components/lib/deferredcontent/package.json
new file mode 100644
index 0000000000..15956772fb
--- /dev/null
+++ b/components/lib/deferredcontent/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./deferredcontent.cjs.js",
+    "module": "./deferredcontent.esm.js",
+    "unpkg": "./deferredcontent.min.js",
+    "types": "./deferredcontent.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
new file mode 100644
index 0000000000..03336e00ba
--- /dev/null
+++ b/components/lib/dialog/Dialog.js
@@ -0,0 +1,717 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import FocusTrap from '../focustrap/FocusTrap';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { TimesIcon } from '../icons/times';
+import { WindowMaximizeIcon } from '../icons/windowmaximize';
+import { WindowMinimizeIcon } from '../icons/windowminimize';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { DialogBase } from './DialogBase';
+
+export const Dialog = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = DialogBase.getProps(inProps, context);
+
+    const uniqueId = props.id ? props.id : UniqueComponentId();
+    const [idState, setIdState] = React.useState(uniqueId);
+    const [maskVisibleState, setMaskVisibleState] = React.useState(false);
+    const [visibleState, setVisibleState] = React.useState(false);
+    const [maximizedState, setMaximizedState] = React.useState(props.maximized);
+    const dialogRef = React.useRef(null);
+    const maskRef = React.useRef(null);
+    const pointerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const headerRef = React.useRef(null);
+    const footerRef = React.useRef(null);
+    const closeRef = React.useRef(null);
+    const dragging = React.useRef(false);
+    const resizing = React.useRef(false);
+    const lastPageX = React.useRef(null);
+    const lastPageY = React.useRef(null);
+    const styleElement = React.useRef(null);
+    const attributeSelector = React.useRef(uniqueId);
+    const focusElementOnHide = React.useRef(null);
+    const maximized = props.onMaximize ? props.maximized : maximizedState;
+    const shouldBlockScroll = visibleState && (props.blockScroll || (props.maximizable && maximized));
+    const isCloseOnEscape = props.closable && props.closeOnEscape && visibleState;
+    const displayOrder = useDisplayOrder('dialog', isCloseOnEscape);
+
+    const { ptm, cx, sx, isUnstyled } = DialogBase.setMetaData({
+        props,
+        ...props.__parentMetadata,
+        state: {
+            id: idState,
+            maximized: maximized,
+            containerVisible: maskVisibleState
+        }
+    });
+
+    useHandleStyle(DialogBase.css.styles, isUnstyled, { name: 'dialog' });
+
+    useGlobalOnEscapeKey({
+        callback: (event) => {
+            onClose(event);
+        },
+        when: isCloseOnEscape && displayOrder,
+        priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
+    });
+
+    const [bindDocumentResizeListener, unbindDocumentResizeListener] = useEventListener({ type: 'mousemove', target: () => window.document, listener: (event) => onResize(event) });
+    const [bindDocumentResizeEndListener, unbindDocumentResizEndListener] = useEventListener({ type: 'mouseup', target: () => window.document, listener: (event) => onResizeEnd(event) });
+    const [bindDocumentDragListener, unbindDocumentDragListener] = useEventListener({ type: 'mousemove', target: () => window.document, listener: (event) => onDrag(event) });
+    const [bindDocumentDragEndListener, unbindDocumentDragEndListener] = useEventListener({ type: 'mouseup', target: () => window.document, listener: (event) => onDragEnd(event) });
+
+    const onClose = (event) => {
+        props.onHide(event);
+        event.preventDefault();
+    };
+
+    const focus = () => {
+        let activeElement = document.activeElement;
+        let isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
+
+        if (!isActiveElementInDialog && props.closable && props.showCloseIcon && props.showHeader && closeRef.current) {
+            closeRef.current.focus();
+        }
+    };
+
+    const onDialogPointerDown = (event) => {
+        pointerRef.current = event.target;
+        props.onPointerDown && props.onPointerDown(event);
+    };
+
+    const onMaskPointerUp = (event) => {
+        if (props.dismissableMask && props.modal && maskRef.current === event.target && !pointerRef.current) {
+            onClose(event);
+        }
+
+        props.onMaskClick && props.onMaskClick(event);
+        pointerRef.current = null;
+    };
+
+    const toggleMaximize = (event) => {
+        if (props.onMaximize) {
+            props.onMaximize({
+                originalEvent: event,
+                maximized: !maximized
+            });
+        } else {
+            setMaximizedState((prevMaximized) => !prevMaximized);
+        }
+
+        event.preventDefault();
+    };
+
+    const onDragStart = (event) => {
+        if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass(event.target.parentElement, 'p-dialog-header-icon')) {
+            return;
+        }
+
+        if (props.draggable) {
+            dragging.current = true;
+            lastPageX.current = event.pageX;
+            lastPageY.current = event.pageY;
+            DomHandler.addClass(document.body, 'p-unselectable-text');
+
+            props.onDragStart && props.onDragStart(event);
+        }
+    };
+
+    const onDrag = (event) => {
+        if (dragging.current) {
+            const width = DomHandler.getOuterWidth(dialogRef.current);
+            const height = DomHandler.getOuterHeight(dialogRef.current);
+            const deltaX = event.pageX - lastPageX.current;
+            const deltaY = event.pageY - lastPageY.current;
+            const offset = dialogRef.current.getBoundingClientRect();
+            const leftPos = offset.left + deltaX;
+            const topPos = offset.top + deltaY;
+            const viewport = DomHandler.getViewport();
+            const computedStyle = getComputedStyle(dialogRef.current);
+            const leftMargin = parseFloat(computedStyle.marginLeft);
+            const topMargin = parseFloat(computedStyle.marginTop);
+
+            dialogRef.current.style.position = 'fixed';
+
+            if (props.keepInViewport) {
+                if (leftPos >= props.minX && leftPos + width < viewport.width) {
+                    lastPageX.current = event.pageX;
+                    dialogRef.current.style.left = leftPos - leftMargin + 'px';
+                }
+
+                if (topPos >= props.minY && (deltaY < 0 || topPos + height < viewport.height)) {
+                    lastPageY.current = event.pageY;
+                    dialogRef.current.style.top = topPos - topMargin + 'px';
+                }
+            } else {
+                lastPageX.current = event.pageX;
+                dialogRef.current.style.left = leftPos - leftMargin + 'px';
+                lastPageY.current = event.pageY;
+                dialogRef.current.style.top = topPos - topMargin + 'px';
+            }
+
+            props.onDrag && props.onDrag(event);
+        }
+    };
+
+    const onDragEnd = (event) => {
+        if (dragging.current) {
+            dragging.current = false;
+            DomHandler.removeClass(document.body, 'p-unselectable-text');
+
+            props.onDragEnd && props.onDragEnd(event);
+        }
+    };
+
+    const onResizeStart = (event) => {
+        if (props.resizable) {
+            resizing.current = true;
+            lastPageX.current = event.pageX;
+            lastPageY.current = event.pageY;
+            DomHandler.addClass(document.body, 'p-unselectable-text');
+
+            props.onResizeStart && props.onResizeStart(event);
+        }
+    };
+
+    const convertToPx = (value, property, viewport) => {
+        !viewport && (viewport = DomHandler.getViewport());
+
+        const val = parseInt(value);
+
+        if (/^(\d+|(\.\d+))(\.\d+)?%$/.test(value)) {
+            return val * (viewport[property] / 100);
+        }
+
+        return val;
+    };
+
+    const onResize = (event) => {
+        if (resizing.current) {
+            const deltaX = event.pageX - lastPageX.current;
+            const deltaY = event.pageY - lastPageY.current;
+            const width = DomHandler.getOuterWidth(dialogRef.current);
+            const height = DomHandler.getOuterHeight(dialogRef.current);
+            const offset = dialogRef.current.getBoundingClientRect();
+            const viewport = DomHandler.getViewport();
+
+            const hasBeenDragged = !parseInt(dialogRef.current.style.top) || !parseInt(dialogRef.current.style.left);
+            const minWidth = convertToPx(dialogRef.current.style.minWidth, 'width', viewport);
+            const minHeight = convertToPx(dialogRef.current.style.minHeight, 'height', viewport);
+            let newWidth = width + deltaX;
+            let newHeight = height + deltaY;
+
+            if (hasBeenDragged) {
+                newWidth = newWidth + deltaX;
+                newHeight = newHeight + deltaY;
+            }
+
+            if ((!minWidth || newWidth > minWidth) && (deltaX < 0 || offset.left + newWidth < viewport.width)) {
+                dialogRef.current.style.width = newWidth + 'px';
+            }
+
+            if ((!minHeight || newHeight > minHeight) && (deltaY < 0 || offset.top + newHeight < viewport.height)) {
+                dialogRef.current.style.height = newHeight + 'px';
+            }
+
+            lastPageX.current = event.pageX;
+            lastPageY.current = event.pageY;
+
+            props.onResize && props.onResize(event);
+        }
+    };
+
+    const onResizeEnd = (event) => {
+        if (resizing.current) {
+            resizing.current = false;
+            DomHandler.removeClass(document.body, 'p-unselectable-text');
+
+            props.onResizeEnd && props.onResizeEnd(event);
+        }
+    };
+
+    const resetPosition = () => {
+        dialogRef.current.style.position = '';
+        dialogRef.current.style.left = '';
+        dialogRef.current.style.top = '';
+        dialogRef.current.style.margin = '';
+    };
+
+    const onEnter = () => {
+        dialogRef.current.setAttribute(attributeSelector.current, '');
+    };
+
+    const onEntered = () => {
+        props.onShow && props.onShow();
+
+        if (props.focusOnShow) {
+            focus();
+        }
+
+        enableDocumentSettings();
+    };
+
+    const onExiting = () => {
+        if (props.modal) {
+            !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+        }
+    };
+
+    const onExited = () => {
+        dragging.current = false;
+        ZIndexUtils.clear(maskRef.current);
+        setMaskVisibleState(false);
+        disableDocumentSettings();
+
+        // return focus to element before dialog was open
+        DomHandler.focus(focusElementOnHide.current);
+        focusElementOnHide.current = null;
+    };
+
+    const enableDocumentSettings = () => {
+        bindGlobalListeners();
+    };
+
+    const disableDocumentSettings = () => {
+        unbindGlobalListeners();
+    };
+
+    const updateScrollBlocker = () => {
+        // Scroll should be unblocked if there is at least one dialog that blocks scrolling:
+        const isThereAnyDialogThatBlocksScrolling = document.primeDialogParams && document.primeDialogParams.some((i) => i.hasBlockScroll);
+
+        if (isThereAnyDialogThatBlocksScrolling) {
+            DomHandler.blockBodyScroll();
+        } else {
+            DomHandler.unblockBodyScroll();
+        }
+    };
+
+    const updateGlobalDialogsRegistry = (isMounted) => {
+        // Update current dialog info in global registry if it is mounted and visible:
+        if (isMounted && visibleState) {
+            const newParam = { id: idState, hasBlockScroll: shouldBlockScroll };
+
+            // Create registry if not yet created:
+            if (!document.primeDialogParams) {
+                document.primeDialogParams = [];
+            }
+
+            const currentDialogIndexInRegistry = document.primeDialogParams.findIndex((dialogInRegistry) => dialogInRegistry.id === idState);
+
+            if (currentDialogIndexInRegistry === -1) {
+                document.primeDialogParams = [...document.primeDialogParams, newParam];
+            } else {
+                document.primeDialogParams = document.primeDialogParams.toSpliced(currentDialogIndexInRegistry, 1, newParam);
+            }
+        }
+        // Or remove it from global registry if unmounted or invisible:
+        else {
+            document.primeDialogParams = document.primeDialogParams && document.primeDialogParams.filter((param) => param.id !== idState);
+        }
+
+        // Always update scroll blocker after dialog registry - this way we ensure that
+        // p-overflow-hidden class is properly added/removed:
+        updateScrollBlocker();
+    };
+
+    const bindGlobalListeners = () => {
+        if (props.draggable) {
+            bindDocumentDragListener();
+            bindDocumentDragEndListener();
+        }
+
+        if (props.resizable) {
+            bindDocumentResizeListener();
+            bindDocumentResizeEndListener();
+        }
+    };
+
+    const unbindGlobalListeners = () => {
+        unbindDocumentDragListener();
+        unbindDocumentDragEndListener();
+        unbindDocumentResizeListener();
+        unbindDocumentResizEndListener();
+    };
+
+    const createStyle = () => {
+        styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+        let innerHTML = '';
+
+        for (let breakpoint in props.breakpoints) {
+            innerHTML =
+                innerHTML +
+                `
+                @media screen and (max-width: ${breakpoint}) {
+                     [data-pc-name="dialog"][${attributeSelector.current}] {
+                        width: ${props.breakpoints[breakpoint]} !important;
+                    }
+                }
+            `;
+        }
+
+        styleElement.current.innerHTML = innerHTML;
+    };
+
+    const destroyStyle = () => {
+        styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
+    };
+
+    useMountEffect(() => {
+        updateGlobalDialogsRegistry(true);
+
+        if (props.visible) {
+            setMaskVisibleState(true);
+        }
+    });
+
+    React.useEffect(() => {
+        if (props.breakpoints) {
+            createStyle();
+        }
+
+        return () => {
+            destroyStyle();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.breakpoints]);
+
+    useUpdateEffect(() => {
+        if (props.visible && !maskVisibleState) {
+            setMaskVisibleState(true);
+        }
+
+        if (props.visible !== visibleState && maskVisibleState) {
+            setVisibleState(props.visible);
+        }
+
+        if (props.visible) {
+            // Remember the focused element before we opened the dialog
+            // so we can return focus to it once we close the dialog.
+            focusElementOnHide.current = document.activeElement;
+        }
+    }, [props.visible, maskVisibleState]);
+
+    useUpdateEffect(() => {
+        if (maskVisibleState) {
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
+            setVisibleState(true);
+        }
+    }, [maskVisibleState]);
+
+    useUpdateEffect(() => {
+        updateGlobalDialogsRegistry(true);
+    }, [shouldBlockScroll, visibleState]);
+
+    useUnmountEffect(() => {
+        disableDocumentSettings();
+        updateGlobalDialogsRegistry(false);
+        DomHandler.removeInlineStyle(styleElement.current);
+        ZIndexUtils.clear(maskRef.current);
+    });
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        resetPosition,
+        getElement: () => dialogRef.current,
+        getMask: () => maskRef.current,
+        getContent: () => contentRef.current,
+        getHeader: () => headerRef.current,
+        getFooter: () => footerRef.current,
+        getCloseButton: () => closeRef.current
+    }));
+
+    const createCloseIcon = () => {
+        if (props.closable && props.showCloseIcon) {
+            const labelAria = props.ariaCloseIconLabel || ariaLabel('close');
+
+            const closeButtonIconProps = mergeProps(
+                {
+                    className: cx('closeButtonIcon'),
+                    'aria-hidden': true
+                },
+                ptm('closeButtonIcon')
+            );
+
+            const icon = props.closeIcon || <TimesIcon {...closeButtonIconProps} />;
+            const headerCloseIcon = IconUtils.getJSXIcon(icon, { ...closeButtonIconProps }, { props });
+
+            const closeButtonProps = mergeProps(
+                {
+                    ref: closeRef,
+                    type: 'button',
+                    className: cx('closeButton'),
+                    'aria-label': labelAria,
+                    onClick: onClose,
+                    onKeyDown: (ev) => {
+                        if (ev.key !== 'Escape') {
+                            ev.stopPropagation();
+                        }
+                    }
+                },
+                ptm('closeButton')
+            );
+
+            return (
+                <button {...closeButtonProps}>
+                    {headerCloseIcon}
+                    <Ripple />
+                </button>
+            );
+        }
+
+        return null;
+    };
+
+    const createMaximizeIcon = () => {
+        let icon;
+        const maximizableIconProps = mergeProps(
+            {
+                className: cx('maximizableIcon')
+            },
+            ptm('maximizableIcon')
+        );
+
+        if (!maximized) {
+            icon = props.maximizeIcon || <WindowMaximizeIcon {...maximizableIconProps} />;
+        } else {
+            icon = props.minimizeIcon || <WindowMinimizeIcon {...maximizableIconProps} />;
+        }
+
+        const toggleIcon = IconUtils.getJSXIcon(icon, maximizableIconProps, { props });
+
+        if (props.maximizable) {
+            const maximizableButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('maximizableButton'),
+                    onClick: toggleMaximize
+                },
+                ptm('maximizableButton')
+            );
+
+            return (
+                <button {...maximizableButtonProps}>
+                    {toggleIcon}
+                    <Ripple />
+                </button>
+            );
+        }
+
+        return null;
+    };
+
+    const createHeader = () => {
+        if (props.showHeader) {
+            const closeIcon = createCloseIcon();
+            const maximizeIcon = createMaximizeIcon();
+            const icons = ObjectUtils.getJSXElement(props.icons, props);
+            const header = ObjectUtils.getJSXElement(props.header, props);
+            const headerId = idState + '_header';
+
+            const headerProps = mergeProps(
+                {
+                    ref: headerRef,
+                    style: props.headerStyle,
+                    className: cx('header'),
+                    onMouseDown: onDragStart
+                },
+                ptm('header')
+            );
+
+            const headerTitleProps = mergeProps(
+                {
+                    id: headerId,
+                    className: cx('headerTitle')
+                },
+                ptm('headerTitle')
+            );
+
+            const headerIconsProps = mergeProps(
+                {
+                    className: cx('headerIcons')
+                },
+                ptm('headerIcons')
+            );
+
+            return (
+                <div {...headerProps}>
+                    <div {...headerTitleProps}>{header}</div>
+                    <div {...headerIconsProps}>
+                        {icons}
+                        {maximizeIcon}
+                        {closeIcon}
+                    </div>
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    const createContent = () => {
+        const contentId = idState + '_content';
+
+        const contentProps = mergeProps(
+            {
+                id: contentId,
+                ref: contentRef,
+                style: props.contentStyle,
+                className: cx('content')
+            },
+            ptm('content')
+        );
+
+        return <div {...contentProps}>{props.children}</div>;
+    };
+
+    const createFooter = () => {
+        const footer = ObjectUtils.getJSXElement(props.footer, props);
+
+        const footerProps = mergeProps(
+            {
+                ref: footerRef,
+                className: cx('footer')
+            },
+            ptm('footer')
+        );
+
+        return footer && <div {...footerProps}>{footer}</div>;
+    };
+
+    const createResizer = () => {
+        if (props.resizable) {
+            return <span className="p-resizable-handle" style={{ zIndex: 90 }} onMouseDown={onResizeStart} />;
+        }
+
+        return null;
+    };
+
+    const findMessageProperty = (obj) => {
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                if (key === 'message') {
+                    return obj[key];
+                } else if (typeof obj[key] === 'object') {
+                    const result = findMessageProperty(obj[key]);
+
+                    if (result !== undefined) {
+                        return result;
+                    }
+                }
+            }
+        }
+
+        return undefined;
+    };
+
+    const createTemplateElement = () => {
+        const messageProps = {
+            header: props.header,
+            content: props.message,
+            message: props?.children?.[1]?.props?.children
+        };
+
+        const templateElementProps = { headerRef, contentRef, footerRef, closeRef, hide: onClose, message: messageProps };
+
+        return ObjectUtils.getJSXElement(inProps.content, templateElementProps);
+    };
+
+    const createElement = () => {
+        const header = createHeader();
+        const content = createContent();
+        const footer = createFooter();
+        const resizer = createResizer();
+
+        return (
+            <>
+                {header}
+                {content}
+                {footer}
+                {resizer}
+            </>
+        );
+    };
+
+    const createDialog = () => {
+        const headerId = idState + '_header';
+        const contentId = idState + '_content';
+
+        const transitionTimeout = {
+            enter: props.position === 'center' ? 150 : 300,
+            exit: props.position === 'center' ? 150 : 300
+        };
+
+        const maskProps = mergeProps(
+            {
+                ref: maskRef,
+                style: sx('mask'),
+                className: cx('mask'),
+                onPointerUp: onMaskPointerUp
+            },
+            ptm('mask')
+        );
+
+        const rootProps = mergeProps(
+            {
+                ref: dialogRef,
+                id: idState,
+                className: classNames(props.className, cx('root', { props, maximized, context })),
+                style: props.style,
+                onClick: props.onClick,
+                role: 'dialog',
+                'aria-labelledby': headerId,
+                'aria-describedby': contentId,
+                'aria-modal': props.modal,
+                onPointerDown: onDialogPointerDown
+            },
+            DialogBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                timeout: transitionTimeout,
+                in: visibleState,
+                options: props.transitionOptions,
+                unmountOnExit: true,
+                onEnter: onEnter,
+                onEntered: onEntered,
+                onExiting: onExiting,
+                onExited: onExited
+            },
+            ptm('transition')
+        );
+
+        let contentElement = null;
+
+        if (inProps?.content) {
+            contentElement = createTemplateElement();
+        } else {
+            contentElement = createElement();
+        }
+
+        const rootElement = (
+            <div {...maskProps}>
+                <CSSTransition nodeRef={dialogRef} {...transitionProps}>
+                    <div {...rootProps}>
+                        <FocusTrap autoFocus={props.focusOnShow}>{contentElement}</FocusTrap>
+                    </div>
+                </CSSTransition>
+            </div>
+        );
+
+        return <Portal element={rootElement} appendTo={props.appendTo} visible />;
+    };
+
+    return maskVisibleState && createDialog();
+});
+
+Dialog.displayName = 'Dialog';
diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js
new file mode 100644
index 0000000000..b01ffd18a7
--- /dev/null
+++ b/components/lib/dialog/DialogBase.js
@@ -0,0 +1,309 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    closeButtonIcon: 'p-dialog-header-close-icon',
+    closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
+    maximizableIcon: 'p-dialog-header-maximize-icon',
+    maximizableButton: 'p-dialog-header-icon p-dialog-header-maximize p-link',
+    header: ({ props }) => classNames('p-dialog-header', props.headerClassName),
+    headerTitle: 'p-dialog-title',
+    headerIcons: 'p-dialog-header-icons',
+    content: ({ props }) => classNames('p-dialog-content', props.contentClassName),
+    footer: ({ props }) => classNames('p-dialog-footer', props.footerClassName),
+    mask: ({ props, maskVisibleState }) => {
+        const positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'];
+        const pos = positions.find((item) => item === props.position || item.replace('-', '') === props.position);
+
+        return classNames(
+            'p-dialog-mask',
+            pos ? `p-dialog-${pos}` : '',
+            {
+                'p-component-overlay p-component-overlay-enter': props.modal,
+                'p-dialog-visible': maskVisibleState,
+                'p-dialog-draggable': props.draggable,
+                'p-dialog-resizable': props.resizable
+            },
+            props.maskClassName
+        );
+    },
+    root: ({ props, maximized, context }) =>
+        classNames('p-dialog p-component', {
+            'p-dialog-rtl': props.rtl,
+            'p-dialog-maximized': maximized,
+            'p-dialog-default': !maximized,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    transition: 'p-dialog'
+};
+
+const styles = `
+@layer primereact {
+    .p-dialog-mask {
+        background-color: transparent;
+        transition-property: background-color;
+    }
+
+    .p-dialog-visible {
+        display: flex;
+    }
+
+    .p-dialog-mask.p-component-overlay {
+        pointer-events: auto;
+    }
+
+    .p-dialog {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        max-height: 90%;
+        transform: scale(1);
+        position: relative;
+    }
+
+    .p-dialog-content {
+        overflow-y: auto;
+        flex-grow: 1;
+    }
+
+    .p-dialog-header {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    .p-dialog-footer {
+        flex-shrink: 0;
+    }
+
+    .p-dialog .p-dialog-header-icons {
+        display: flex;
+        align-items: center;
+        align-self: flex-start;
+        flex-shrink: 0;
+    }
+
+    .p-dialog .p-dialog-header-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-dialog .p-dialog-title {
+        flex-grow: 1;
+    }
+
+    /* Fluid */
+    .p-fluid .p-dialog-footer .p-button {
+        width: auto;
+    }
+
+    /* Animation */
+    /* Center */
+    .p-dialog-enter {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+
+    .p-dialog-enter-active {
+        opacity: 1;
+        transform: scale(1);
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .p-dialog-enter-done {
+        transform: none;
+    }
+
+    .p-dialog-exit-active {
+        opacity: 0;
+        transform: scale(0.7);
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Top, Bottom, Left, Right, Top* and Bottom* */
+    .p-dialog-top .p-dialog,
+    .p-dialog-bottom .p-dialog,
+    .p-dialog-left .p-dialog,
+    .p-dialog-right .p-dialog,
+    .p-dialog-top-left .p-dialog,
+    .p-dialog-top-right .p-dialog,
+    .p-dialog-bottom-left .p-dialog,
+    .p-dialog-bottom-right .p-dialog {
+        margin: 0.75em;
+    }
+
+    .p-dialog-top .p-dialog-enter,
+    .p-dialog-top .p-dialog-exit-active {
+        transform: translate3d(0px, -100%, 0px);
+    }
+
+    .p-dialog-bottom .p-dialog-enter,
+    .p-dialog-bottom .p-dialog-exit-active {
+        transform: translate3d(0px, 100%, 0px);
+    }
+
+    .p-dialog-left .p-dialog-enter,
+    .p-dialog-left .p-dialog-exit-active,
+    .p-dialog-top-left .p-dialog-enter,
+    .p-dialog-top-left .p-dialog-exit-active,
+    .p-dialog-bottom-left .p-dialog-enter,
+    .p-dialog-bottom-left .p-dialog-exit-active {
+        transform: translate3d(-100%, 0px, 0px);
+    }
+
+    .p-dialog-right .p-dialog-enter,
+    .p-dialog-right .p-dialog-exit-active,
+    .p-dialog-top-right .p-dialog-enter,
+    .p-dialog-top-right .p-dialog-exit-active,
+    .p-dialog-bottom-right .p-dialog-enter,
+    .p-dialog-bottom-right .p-dialog-exit-active {
+        transform: translate3d(100%, 0px, 0px);
+    }
+
+    .p-dialog-top .p-dialog-enter-active,
+    .p-dialog-bottom .p-dialog-enter-active,
+    .p-dialog-left .p-dialog-enter-active,
+    .p-dialog-top-left .p-dialog-enter-active,
+    .p-dialog-bottom-left .p-dialog-enter-active,
+    .p-dialog-right .p-dialog-enter-active,
+    .p-dialog-top-right .p-dialog-enter-active,
+    .p-dialog-bottom-right .p-dialog-enter-active {
+        transform: translate3d(0px, 0px, 0px);
+        transition: all 0.3s ease-out;
+    }
+
+    .p-dialog-top .p-dialog-exit-active,
+    .p-dialog-bottom .p-dialog-exit-active,
+    .p-dialog-left .p-dialog-exit-active,
+    .p-dialog-top-left .p-dialog-exit-active,
+    .p-dialog-bottom-left .p-dialog-exit-active,
+    .p-dialog-right .p-dialog-exit-active,
+    .p-dialog-top-right .p-dialog-exit-active,
+    .p-dialog-bottom-right .p-dialog-exit-active {
+        transition: all 0.3s ease-out;
+    }
+
+    /* Maximize */
+    .p-dialog-maximized {
+        transition: none;
+        transform: none;
+        margin: 0;
+        width: 100vw !important;
+        height: 100vh !important;
+        max-height: 100%;
+        top: 0px !important;
+        left: 0px !important;
+    }
+
+    .p-dialog-maximized .p-dialog-content {
+        flex-grow: 1;
+    }
+
+    .p-confirm-dialog .p-dialog-content {
+        display: flex;
+        align-items: center;
+    }
+
+    /* Resizable */
+    .p-dialog .p-resizable-handle {
+        position: absolute;
+        font-size: 0.1px;
+        display: block;
+        cursor: se-resize;
+        width: 12px;
+        height: 12px;
+        right: 1px;
+        bottom: 1px;
+    }
+
+    .p-dialog-draggable .p-dialog-header {
+        cursor: move;
+    }
+}
+`;
+
+const inlineStyles = {
+    mask: ({ props }) => ({
+        position: 'fixed',
+        height: '100%',
+        width: '100%',
+        left: 0,
+        top: 0,
+        display: 'flex',
+        justifyContent:
+            props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left' ? 'flex-start' : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right' ? 'flex-end' : 'center',
+        alignItems:
+            props.position === 'top' || props.position === 'top-left' || props.position === 'top-right' ? 'flex-start' : props.position === 'bottom' || props.position === 'bottom-left' || props.position === 'bottom-right' ? 'flex-end' : 'center',
+        pointerEvents: !props.modal && 'none',
+        ...props.maskStyle
+    })
+};
+
+export const DialogBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Dialog',
+        __parentMetadata: null,
+        appendTo: null,
+        ariaCloseIconLabel: null,
+        baseZIndex: 0,
+        blockScroll: false,
+        breakpoints: null,
+        className: null,
+        closable: true,
+        closeIcon: null,
+        closeOnEscape: true,
+        content: null,
+        contentClassName: null,
+        contentStyle: null,
+        dismissableMask: false,
+        draggable: true,
+        focusOnShow: true,
+        footer: null,
+        footerClassName: null,
+        header: null,
+        headerClassName: null,
+        headerStyle: null,
+        icons: null,
+        id: null,
+        keepInViewport: true,
+        maskClassName: null,
+        maskStyle: null,
+        maximizable: false,
+        maximizeIcon: null,
+        maximized: false,
+        minX: 0,
+        minY: 0,
+        minimizeIcon: null,
+        modal: true,
+        onClick: null,
+        onDrag: null,
+        onDragEnd: null,
+        onDragStart: null,
+        onHide: null,
+        onMaskClick: null,
+        onMaximize: null,
+        onResize: null,
+        onResizeEnd: null,
+        onResizeStart: null,
+        onShow: null,
+        position: 'center',
+        resizable: true,
+        rtl: false,
+        showHeader: true,
+        showCloseIcon: true,
+        style: null,
+        transitionOptions: null,
+        visible: false,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/dialog/dialog.d.ts b/components/lib/dialog/dialog.d.ts
new file mode 100644
index 0000000000..f1ccc381e7
--- /dev/null
+++ b/components/lib/dialog/dialog.d.ts
@@ -0,0 +1,488 @@
+/**
+ *
+ * Dialog is a container to display content in an overlay window.
+ *
+ * [Live Demo](https://www.primereact.org/dialog)
+ *
+ * @module dialog
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type DialogPassThroughType<T> = PassThroughType<T, DialogPassThroughMethodOptions>;
+export declare type DialogPassThroughTransitionType = ReactCSSTransitionProps | ((options: DialogPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DialogPassThroughMethodOptions {
+    props: DialogProps;
+    state: DialogState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DialogProps.pt}
+ */
+export interface DialogPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header icons' DOM element.
+     */
+    headerIcons?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the maximizable button's DOM element.
+     */
+    maximizableButton?: DialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the maximizable icon's DOM element.
+     */
+    maximizableIcon?: DialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the close button's component.
+     */
+    closeButton?: DialogPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the close button icon's component.
+     */
+    closeButtonIcon?: DialogPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: DialogPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: DialogPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Dialog component.
+ */
+export interface DialogState {
+    /**
+     * Current visible state of the container as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+    /**
+     * Current maximized state as a boolean.
+     * @defaultValue false
+     */
+    maximized: boolean;
+}
+
+/**
+ * Dialog break options
+ */
+interface DialogBreakpoints {
+    /**
+     * Extra options.
+     */
+    [key: string]: string;
+}
+
+/**
+ * Custom complete method event.
+ * @see {@link DialogProps.onMaximize}
+ * @event
+ */
+interface DialogMaximizeEvent {
+    /**
+     * Browser mouse event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * When enabled, the dialog is initially displayed full screen.
+     * @defaultValue false
+     */
+    maximized: boolean;
+}
+
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link DialogProps.content}
+ */
+interface ContentProps {
+    /**
+     * Allows you to specify the header of the content.
+     */
+    headerRef: React.RefObject<HTMLElement>;
+    /**
+     * Allows you to specify the content.
+     */
+    contentRef: React.RefObject<HTMLElement>;
+    /**
+     * Allows you to specify the footer of the content.
+     */
+    footerRef: React.RefObject<HTMLElement>;
+    /**
+     * Allows you to specify the close button of the dialog.
+     */
+    closeRef: React.RefObject<HTMLButtonElement | HTMLElement>;
+    /**
+     * Callback for hiding the dialog.
+     */
+    hide(e: React.SyntheticEvent): void;
+    /**
+     * Dialog's props values.
+     */
+    message: ContentPropsMessage;
+}
+
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link ContentProps.message}
+ */
+interface ContentPropsMessage {
+    /**
+     * Header of the dialog.
+     * @readonly
+     */
+    header: string;
+    /**
+     * Content of the dialog.
+     * @readonly
+     */
+    content: string;
+    /**
+     * Message of the dialog.
+     * @readonly
+     */
+    message: string;
+}
+
+/**
+ * Defines valid properties in Dialog component.
+ * @group Properties
+ */
+export interface DialogProps {
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Defines a string that labels the close icon.
+     */
+    ariaCloseIconLabel?: string | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Whether background scroll should be blocked when dialog is visible.
+     * @defaultValue false
+     */
+    blockScroll?: boolean | undefined;
+    /**
+     * Object literal to define widths per screen size.
+     */
+    breakpoints?: DialogBreakpoints | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * When enabled, the dialog can be closed by clicking the close icon, pressing escape key or clicking the modal background.
+     * @defaultValue true
+     */
+    closable?: boolean | undefined;
+    /**
+     * Specifies if pressing escape key should hide the dialog.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Style class of the content section.
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Style of the content section.
+     */
+    contentStyle?: React.CSSProperties | undefined;
+    /**
+     * Specifies if clicking the modal background should hide the dialog.
+     * @defaultValue false
+     */
+    dismissableMask?: boolean | undefined;
+    /**
+     * Enables dragging to change the position using header.
+     * @defaultValue true
+     */
+    draggable?: boolean | undefined;
+    /**
+     * When enabled, first button receives focus on show.
+     * @defaultValue true
+     */
+    focusOnShow?: boolean | undefined;
+    /**
+     * Footer content of the dialog.
+     */
+    footer?: React.ReactNode | ((props: DialogProps) => React.ReactNode);
+    /**
+     * Title content of the dialog.
+     */
+    header?: React.ReactNode | ((props: DialogProps) => React.ReactNode);
+    /**
+     * Style class of the header section.
+     */
+    headerClassName?: string | undefined;
+    /**
+     * Icon to display in the dialog close button.
+     */
+    closeIcon?: IconType<DialogProps> | undefined;
+    /**
+     * Style of the header section.
+     */
+    headerStyle?: React.CSSProperties | undefined;
+    /**
+     * Custom icons template for the header.
+     */
+    icons?: React.ReactNode | ((props: DialogProps) => React.ReactNode);
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Keeps dialog in the viewport.
+     * @defaultValue true
+     */
+    keepInViewport?: boolean | undefined;
+    /**
+     * Style class of the mask.
+     */
+    maskClassName?: string | undefined;
+    /**
+     * Inline style of the mask.
+     */
+    maskStyle?: React.CSSProperties | undefined;
+    /**
+     * Whether the dialog can be displayed full screen.
+     * @defaultValue false
+     */
+    maximizable?: boolean | undefined;
+    /**
+     * When enabled, the dialog is initially displayed full screen.
+     * @defaultValue false
+     */
+    maximized?: boolean | undefined;
+    /**
+     * Minimum value for the left coordinate of dialog in dragging.
+     * @defaultValue 0
+     */
+    minX?: number | undefined;
+    /**
+     * Minimum value for the top coordinate of dialog in dragging.
+     * @defaultValue 0
+     */
+    minY?: number | undefined;
+    /**
+     * Defines if background should be blocked when dialog is displayed.
+     * @defaultValue true
+     */
+    modal?: boolean | undefined;
+    /**
+     * Position of the dialog, options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left" or "bottom-right".
+     * @defaultValue center
+     */
+    position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | undefined;
+    /**
+     * Enables resizing of the content.
+     * @defaultValue true
+     */
+    resizable?: boolean | undefined;
+    /**
+     * When enabled dialog is displayed in RTL direction.
+     * @defaultValue false
+     */
+    rtl?: boolean | undefined;
+    /**
+     * Whether to show the header or not.
+     * @defaultValue true
+     */
+    showHeader?: boolean | undefined;
+    /**
+     * When enabled, the close icon is displayed in the header.
+     * @defaultValue true
+     */
+    showCloseIcon?: boolean | undefined;
+    /**
+     * Icon to display in the dialog maximize button when dialog is not maximized.
+     */
+    maximizeIcon?: IconType<DialogProps> | undefined;
+    /**
+     * Icon to display in the dialog maximize button when dialog is maximized.
+     */
+    minimizeIcon?: IconType<DialogProps> | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Specifies the visibility of the dialog.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DialogPassThroughOptions}
+     */
+    pt?: DialogPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Callback to invoke when dialog is clicked.
+     * @param {React.PointerEvent<HTMLElement>} event - Browser event.
+     */
+    onClick?(event: React.PointerEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when dragging dialog.
+     * @param {React.DragEvent<HTMLElement>} event - Browser event.
+     */
+    onDrag?(event: React.DragEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when dialog dragging is completed.
+     * @param {React.DragEvent<HTMLElement>} event - Browser event.
+     */
+    onDragEnd?(event: React.DragEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when dialog dragging is initiated.
+     * @param {React.DragEvent<HTMLElement>} event - Browser event.
+     */
+    onDragStart?(event: React.DragEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when dialog is hidden (Required).
+     */
+    onHide(): void;
+    /**
+     * Callback to invoke when the mask is clicked.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onMaskClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when toggle maximize icon is clicked.
+     * @param {DialogMaximizeEvent} event - Custom click event.
+     */
+    onMaximize?(event: DialogMaximizeEvent): void;
+    /**
+     * Callback to invoke while resizing dialog.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onResize?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when dialog resizing is completed.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onResizeEnd?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when dialog resizing is initiated.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onResizeStart?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when dialog is showed.
+     */
+    onShow?(): void;
+    /**
+     * Specifies a custom content for the dialog. For more complex markup, use the "content" slot instead.
+     * @param {ContentProps} props - The values of dialog.
+     * @return {React.ReactNode}
+     */
+    content?: React.ReactNode | ((props: ContentProps) => React.ReactNode);
+}
+
+/**
+ * **PrimeReact - Dialog**
+ *
+ * _Dialog is a container to display content in an overlay window._
+ *
+ * [Live Demo](https://www.primereact.org/dialog/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Dialog extends React.Component<DialogProps, any> {
+    /**
+     * Reset the dialog's position.
+     */
+    public resetPosition(): void;
+    /**
+     * Used to get the container element of the dialog.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get mask element.
+     * @return {HTMLDivElement | null} Mask element
+     */
+    public getMask(): HTMLDivElement | null;
+    /**
+     * Used to get the content element of the dialog
+     * @return {HTMLDivElement | null} Content element
+     */
+    public getContent(): HTMLDivElement | null;
+    /**
+     * Used to get the header element of the dialog
+     * @return {HTMLDivElement | null} Header element
+     */
+    public getHeader(): HTMLDivElement | null;
+    /**
+     * Used to get the dialog's footer element.
+     * @return {HTMLDivElement | null} Footer element
+     */
+    public getFooter(): HTMLDivElement | null;
+    /**
+     * Used to get close button element.
+     * @return {HTMLButtonElement | null} CloseButton element
+     */
+    public getCloseButton(): HTMLButtonElement | null;
+}
diff --git a/components/lib/dialog/package.json b/components/lib/dialog/package.json
new file mode 100644
index 0000000000..95605ca381
--- /dev/null
+++ b/components/lib/dialog/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./dialog.cjs.js",
+    "module": "./dialog.esm.js",
+    "unpkg": "./dialog.min.js",
+    "types": "./dialog.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/divider/Divider.js b/components/lib/divider/Divider.js
new file mode 100644
index 0000000000..bcf5ef6049
--- /dev/null
+++ b/components/lib/divider/Divider.js
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { DividerBase } from './DividerBase';
+
+export const Divider = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = DividerBase.getProps(inProps, context);
+
+    const { ptm, cx, sx, isUnstyled } = DividerBase.setMetaData({
+        props
+    });
+
+    useHandleStyle(DividerBase.css.styles, isUnstyled, { name: 'divider' });
+
+    const elementRef = React.useRef(null);
+    const horizontal = props.layout === 'horizontal';
+    const vertical = props.layout === 'vertical';
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current
+    }));
+
+    const rootProps = mergeProps(
+        {
+            ref: elementRef,
+            style: sx('root'),
+            className: cx('root', { horizontal, vertical }),
+            'aria-orientation': props.layout,
+            role: 'separator'
+        },
+        DividerBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const contentProps = mergeProps(
+        {
+            className: cx('content')
+        },
+        ptm('content')
+    );
+
+    return (
+        <div {...rootProps}>
+            <div {...contentProps}>{props.children}</div>
+        </div>
+    );
+});
+
+Divider.displayName = 'Divider';
diff --git a/components/lib/divider/Divider.spec.js b/components/lib/divider/Divider.spec.js
new file mode 100644
index 0000000000..d3fc5e0458
--- /dev/null
+++ b/components/lib/divider/Divider.spec.js
@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom';
+import { Divider } from './Divider';
+
+import { snapshot } from '../../test';
+
+describe('Divider', () => {
+    snapshot(<Divider />, 'default');
+    snapshot(<Divider layout="horizontal" align="left" />, 'horizontal left');
+    snapshot(<Divider layout="horizontal" align="right" />, 'horizontal right');
+    snapshot(<Divider layout="horizontal" align="center" />, 'horizontal center');
+    snapshot(<Divider layout="vertical" align="center" />, 'vertical center');
+    snapshot(<Divider layout="vertical" align="top" />, 'vertical top');
+    snapshot(<Divider layout="vertical" align="bottom" />, 'vertical bottom');
+    snapshot(<Divider type="dashed" />, 'type dashed');
+    snapshot(<Divider type="dotted" />, 'type dotted');
+});
diff --git a/components/lib/divider/DividerBase.js b/components/lib/divider/DividerBase.js
new file mode 100644
index 0000000000..b7b9e033fe
--- /dev/null
+++ b/components/lib/divider/DividerBase.js
@@ -0,0 +1,131 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, horizontal, vertical }) =>
+        classNames(
+            `p-divider p-component p-divider-${props.layout} p-divider-${props.type}`,
+            {
+                'p-divider-left': horizontal && (!props.align || props.align === 'left'),
+                'p-divider-right': horizontal && props.align === 'right',
+                'p-divider-center': (horizontal && props.align === 'center') || (vertical && (!props.align || props.align === 'center')),
+                'p-divider-top': vertical && props.align === 'top',
+                'p-divider-bottom': vertical && props.align === 'bottom'
+            },
+            props.className
+        ),
+    content: 'p-divider-content'
+};
+
+const styles = `
+@layer primereact {
+    .p-divider-horizontal {
+        display: flex;
+        width: 100%;
+        position: relative;
+        align-items: center;
+    }
+    
+    .p-divider-horizontal:before {
+        position: absolute;
+        display: block;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        content: "";
+    }
+    
+    .p-divider-horizontal.p-divider-left {
+        justify-content: flex-start;
+    }
+    
+    .p-divider-horizontal.p-divider-right {
+        justify-content: flex-end;
+    }
+    
+    .p-divider-horizontal.p-divider-center {
+        justify-content: center;
+    }
+    
+    .p-divider-content {
+        z-index: 1;
+    }
+    
+    .p-divider-vertical {
+        min-height: 100%;
+        margin: 0 1rem;
+        display: flex;
+        position: relative;
+        justify-content: center;
+    }
+    
+    .p-divider-vertical:before {
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        content: "";
+    }
+    
+    .p-divider-vertical.p-divider-top {
+        align-items: flex-start;
+    }
+    
+    .p-divider-vertical.p-divider-center {
+        align-items: center;
+    }
+    
+    .p-divider-vertical.p-divider-bottom {
+        align-items: flex-end;
+    }
+    
+    .p-divider-solid.p-divider-horizontal:before {
+        border-top-style: solid;
+    }
+    
+    .p-divider-solid.p-divider-vertical:before {
+        border-left-style: solid;
+    }
+    
+    .p-divider-dashed.p-divider-horizontal:before {
+        border-top-style: dashed;
+    }
+    
+    .p-divider-dashed.p-divider-vertical:before {
+        border-left-style: dashed;
+    }
+    
+    .p-divider-dotted.p-divider-horizontal:before {
+        border-top-style: dotted;
+    }
+    
+    .p-divider-dotted.p-divider-horizontal:before {
+        border-left-style: dotted;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) => ({
+        justifyContent: props.layout === 'horizontal' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
+        alignItems: props.layout === 'vertical' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
+    })
+};
+
+export const DividerBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Divider',
+        align: null,
+        layout: 'horizontal',
+        type: 'solid',
+        style: null,
+        className: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/divider/__snapshots__/Divider.spec.js.snap b/components/lib/divider/__snapshots__/Divider.spec.js.snap
new file mode 100644
index 0000000000..f0191ed4ac
--- /dev/null
+++ b/components/lib/divider/__snapshots__/Divider.spec.js.snap
@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Divider default 1`] = `
+<div>
+  <div
+    aria-orientation="horizontal"
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="justify-content: center;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider horizontal center 1`] = `
+<div>
+  <div
+    aria-orientation="horizontal"
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-center"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="justify-content: center;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider horizontal left 1`] = `
+<div>
+  <div
+    aria-orientation="horizontal"
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-left"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="justify-content: flex-start;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider horizontal right 1`] = `
+<div>
+  <div
+    aria-orientation="horizontal"
+    class="p-divider p-component p-divider-horizontal p-divider-solid p-divider-right"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="justify-content: flex-end;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider type dashed 1`] = `
+<div>
+  <div
+    aria-orientation="horizontal"
+    class="p-divider p-component p-divider-horizontal p-divider-dashed p-divider-left"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="justify-content: center;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider type dotted 1`] = `
+<div>
+  <div
+    aria-orientation="horizontal"
+    class="p-divider p-component p-divider-horizontal p-divider-dotted p-divider-left"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="justify-content: center;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider vertical bottom 1`] = `
+<div>
+  <div
+    aria-orientation="vertical"
+    class="p-divider p-component p-divider-vertical p-divider-solid p-divider-bottom"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="align-items: flex-end;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider vertical center 1`] = `
+<div>
+  <div
+    aria-orientation="vertical"
+    class="p-divider p-component p-divider-vertical p-divider-solid p-divider-center"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="align-items: center;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
+
+exports[`Divider vertical top 1`] = `
+<div>
+  <div
+    aria-orientation="vertical"
+    class="p-divider p-component p-divider-vertical p-divider-solid p-divider-top"
+    data-pc-name="divider"
+    data-pc-section="root"
+    role="separator"
+    style="align-items: flex-start;"
+  >
+    <div
+      class="p-divider-content"
+      data-pc-section="content"
+    />
+  </div>
+</div>
+`;
diff --git a/components/lib/divider/divider.d.ts b/components/lib/divider/divider.d.ts
new file mode 100644
index 0000000000..f6ea7c3873
--- /dev/null
+++ b/components/lib/divider/divider.d.ts
@@ -0,0 +1,102 @@
+/**
+ *
+ * Divider is used to separate contents.
+ *
+ * [Live Demo](https://www.primereact.org/divider/)
+ *
+ * @module divider
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils';
+
+export declare type DividerPassThroughType<T> = PassThroughType<T, DividerPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DividerPassThroughMethodOptions {
+    props: DividerProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DividerProps.pt}
+ */
+export interface DividerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DividerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DividerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Divider component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface DividerProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Alignment of the content, options are "left", "center", "right" for horizontal layout and "top", "center", "bottom" for vertical.
+     */
+    align?: 'center' | 'left' | 'right' | 'bottom' | 'top' | undefined;
+    /**
+     * Specifies the orientation, valid values are "horizontal" and "vertical".
+     * @defaultValue horizontal
+     */
+    layout?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * Border style type, default is "solid" and other options are "dashed" and "dotted".
+     * @defaultValue solid
+     */
+    type?: 'solid' | 'dashed' | 'dotted' | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DividerPassThroughOptions}
+     */
+    pt?: DividerPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Divider**
+ *
+ * _Divider is used to separate contents._
+ *
+ * [Live Demo](https://www.primereact.org/divider/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Divider extends React.Component<DividerProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/divider/package.json b/components/lib/divider/package.json
new file mode 100644
index 0000000000..29ea7ad2e4
--- /dev/null
+++ b/components/lib/divider/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./divider.cjs.js",
+    "module": "./divider.esm.js",
+    "unpkg": "./divider.min.js",
+    "types": "./divider.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/dock/Dock.js b/components/lib/dock/Dock.js
new file mode 100644
index 0000000000..e60c8d18d9
--- /dev/null
+++ b/components/lib/dock/Dock.js
@@ -0,0 +1,356 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { DockBase } from './DockBase';
+
+export const Dock = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const [currentIndexState, setCurrentIndexState] = React.useState(-3);
+        const [focused, setFocused] = React.useState(false);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = DockBase.getProps(inProps, context);
+        const [idState, setIdState] = React.useState(props.id);
+        const { ptm, cx, isUnstyled } = DockBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                currentIndex: currentIndexState
+            }
+        });
+        const elementRef = React.useRef(null);
+        const listRef = React.useRef(null);
+
+        useHandleStyle(DockBase.css.styles, isUnstyled, { name: 'dock' });
+
+        const getPTOptions = (key, item, index) => {
+            return ptm(key, {
+                context: {
+                    index,
+                    item
+                }
+            });
+        };
+
+        const onListMouseLeave = () => {
+            setCurrentIndexState(-3);
+        };
+
+        const onItemMouseEnter = (index) => {
+            setCurrentIndexState(index);
+        };
+
+        const onItemClick = (e, item) => {
+            if (item.command) {
+                item.command({ originalEvent: e, item });
+            }
+
+            e.preventDefault();
+        };
+
+        const onListFocus = (event) => {
+            setFocused(true);
+            changeFocusedOptionIndex(0);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onListBlur = (event) => {
+            setFocused(false);
+            setFocusedOptionIndex(-1);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onListKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    if (props.position === 'left' || props.position === 'right') {
+                        onArrowDownKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowUp':
+                    if (props.position === 'left' || props.position === 'right') {
+                        onArrowUpKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowRight':
+                    if (props.position === 'top' || props.position === 'bottom') {
+                        onArrowDownKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowLeft':
+                    if (props.position === 'top' || props.position === 'bottom') {
+                        onArrowUpKey();
+                    }
+
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    onHomeKey();
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    onEndKey();
+                    event.preventDefault();
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onSpaceKey(event);
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onArrowDownKey = () => {
+            const optionIndex = findNextOptionIndex(focusedOptionIndex);
+
+            changeFocusedOptionIndex(optionIndex);
+        };
+
+        const onArrowUpKey = () => {
+            const optionIndex = findPrevOptionIndex(focusedOptionIndex);
+
+            changeFocusedOptionIndex(optionIndex);
+        };
+
+        const onHomeKey = () => {
+            changeFocusedOptionIndex(0);
+        };
+
+        const onEndKey = () => {
+            changeFocusedOptionIndex(DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
+        };
+
+        const onSpaceKey = () => {
+            const element = DomHandler.findSingle(listRef.current, `li[id="${`${focusedOptionIndex}`}"]`);
+            const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
+
+            anchorElement ? anchorElement.click() : element && element.click();
+        };
+
+        const findNextOptionIndex = (index) => {
+            const menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        };
+
+        const findPrevOptionIndex = (index) => {
+            const menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        };
+
+        const changeFocusedOptionIndex = (index) => {
+            const menuitems = DomHandler.find(listRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
+
+            setFocusedOptionIndex(menuitems[order].getAttribute('id'));
+        };
+
+        const isItemActive = (id) => {
+            return id === focusedOptionIndex;
+        };
+
+        const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            const { disabled, icon: _icon, label, template, url, target } = item;
+            const key = item.id || idState + '_' + index;
+            const contentClassName = classNames('p-dock-action', { 'p-disabled': disabled });
+            const iconClassName = classNames('p-dock-action-icon', _icon);
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                getPTOptions('icon', item, index)
+            );
+            const icon = IconUtils.getJSXIcon(_icon, { ...iconProps }, { props });
+            const actionProps = mergeProps(
+                {
+                    href: url || '#',
+                    onFocus: (event) => event.stopPropagation(),
+                    className: cx('action', { disabled }),
+                    tabIndex: -1,
+                    target,
+                    'data-pr-tooltip': label,
+                    onClick: (e) => onItemClick(e, item)
+                },
+                getPTOptions('action', item, index)
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    <Ripple />
+                </a>
+            );
+
+            if (template) {
+                const defaultContentOptions = {
+                    onClick: (e) => onItemClick(e, item),
+                    className: contentClassName,
+                    iconClassName,
+                    'aria-hidden': 'true',
+                    tabIndex: -1,
+                    element: content,
+                    props,
+                    index
+                };
+
+                content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
+            }
+
+            const contentProps = mergeProps(
+                {
+                    className: cx('content')
+                },
+                getPTOptions('content', item, index)
+            );
+
+            const active = isItemActive(key);
+
+            const menuitemProps = mergeProps(
+                {
+                    id: key,
+                    role: 'menuitem',
+                    'aria-label': label,
+                    'aria-disabled': disabled,
+                    'data-p-focused': active,
+                    'data-p-disabled': disabled || false,
+                    className: cx('menuitem', { currentIndexState, index, active: isItemActive(key) }),
+                    role: 'none',
+                    onMouseEnter: () => onItemMouseEnter(index)
+                },
+                getPTOptions('menuitem', item, index)
+            );
+
+            return (
+                <li {...menuitemProps} key={key}>
+                    <div {...contentProps}>{content}</div>
+                </li>
+            );
+        };
+
+        const createItems = () => {
+            return props.model ? props.model.map(createItem) : null;
+        };
+
+        const createHeader = () => {
+            if (props.header) {
+                const header = ObjectUtils.getJSXElement(props.header, { props });
+                const headerProps = mergeProps(
+                    {
+                        className: cx('header')
+                    },
+                    ptm('header')
+                );
+
+                return <div {...headerProps}>{header}</div>;
+            }
+
+            return null;
+        };
+
+        const createList = () => {
+            const items = createItems();
+            const menuProps = mergeProps(
+                {
+                    ref: listRef,
+                    className: cx('menu'),
+                    role: 'menu',
+                    'aria-orientation': props.position === 'bottom' || props.position === 'top' ? 'horizontal' : 'vertical',
+                    'aria-activedescendant': focused ? (focusedOptionIndex !== -1 ? focusedOptionIndex : null) : undefined,
+                    tabIndex: props.tabIndex || 0,
+                    onFocus: onListFocus,
+                    onBlur: onListBlur,
+                    onKeyDown: onListKeyDown,
+                    onMouseLeave: onListMouseLeave
+                },
+                ptm('menu')
+            );
+
+            return <ul {...menuProps}>{items}</ul>;
+        };
+
+        const createFooter = () => {
+            if (props.footer) {
+                const footer = ObjectUtils.getJSXElement(props.footer, { props });
+                const footerProps = mergeProps(
+                    {
+                        className: cx('footer')
+                    },
+                    ptm('footer')
+                );
+
+                return <div {...footerProps}>{footer}</div>;
+            }
+
+            return null;
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const header = createHeader();
+        const list = createList();
+        const footer = createFooter();
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            DockBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const containerProps = mergeProps(
+            {
+                className: cx('container')
+            },
+            ptm('container')
+        );
+
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                <div {...containerProps}>
+                    {header}
+                    {list}
+                    {footer}
+                </div>
+            </div>
+        );
+    })
+);
+
+Dock.displayName = 'Dock';
diff --git a/components/lib/dock/DockBase.js b/components/lib/dock/DockBase.js
new file mode 100644
index 0000000000..05fec1b09f
--- /dev/null
+++ b/components/lib/dock/DockBase.js
@@ -0,0 +1,170 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    icon: 'p-dock-action-icon',
+    action: ({ disabled }) => classNames('p-dock-action', { 'p-disabled': disabled }),
+    menuitem: ({ currentIndexState, index, active }) =>
+        classNames('p-dock-item', {
+            'p-dock-item-second-prev': currentIndexState - 2 === index,
+            'p-dock-item-prev': currentIndexState - 1 === index,
+            'p-dock-item-current': currentIndexState === index,
+            'p-dock-item-next': currentIndexState + 1 === index,
+            'p-dock-item-second-next': currentIndexState + 2 === index,
+            'p-focus': active
+        }),
+    content: 'p-menuitem-content',
+    header: 'p-dock-header',
+    menu: 'p-dock-list',
+    footer: 'p-dock-footer',
+    root: ({ props }) =>
+        classNames(`p-dock p-component p-dock-${props.position}`, {
+            'p-dock-magnification': props.magnification
+        }),
+    container: 'p-dock-list-container'
+};
+
+const styles = `
+@layer primereact {
+    .p-dock {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+    }
+
+    .p-dock-list-container {
+        display: flex;
+        pointer-events: auto;
+    }
+
+    .p-dock-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: auto;
+    }
+
+    .p-dock-magnification .p-dock-item {
+        transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+    }
+
+    .p-dock-action {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+        cursor: default;
+    }
+
+    .p-dock-magnification .p-dock-item-second-prev,
+    .p-dock-magnification .p-dock-item-second-next {
+        transform: scale(1.2);
+    }
+
+    .p-dock-magnification .p-dock-item-prev,
+    .p-dock-magnification .p-dock-item-next {
+        transform: scale(1.4);
+    }
+
+    .p-dock-magnification .p-dock-item-current {
+        transform: scale(1.6);
+        z-index: 1;
+    }
+
+    /* Position */
+    /* top */
+    .p-dock-top {
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+
+    .p-dock-top.p-dock-magnification .p-dock-item {
+        transform-origin: center top;
+    }
+
+    .p-dock-top .p-dock-list-container {
+        flex-direction: column-reverse;
+    }
+
+    /* bottom */
+    .p-dock-bottom {
+        left: 0;
+        bottom: 0;
+        width: 100%;
+    }
+
+    .p-dock-bottom.p-dock-magnification .p-dock-item {
+        transform-origin: center bottom;
+    }
+
+    .p-dock-bottom .p-dock-list-container {
+        flex-direction: column;
+    }
+
+    /* right */
+    .p-dock-right {
+        right: 0;
+        top: 0;
+        height: 100%;
+    }
+
+    .p-dock-right.p-dock-magnification .p-dock-item {
+        transform-origin: center right;
+    }
+
+    .p-dock-right .p-dock-list {
+        flex-direction: column;
+    }
+
+    /* left */
+    .p-dock-left {
+        left: 0;
+        top: 0;
+        height: 100%;
+    }
+
+    .p-dock-left.p-dock-magnification .p-dock-item {
+        transform-origin: center left;
+    }
+
+    .p-dock-left .p-dock-list {
+        flex-direction: column;
+    }
+
+    .p-dock-left .p-dock-list-container {
+        flex-direction: row-reverse;
+    }
+}
+`;
+
+export const DockBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Dock',
+        id: null,
+        style: null,
+        className: null,
+        model: null,
+        tabIndex: 0,
+        onFocus: null,
+        onBlur: null,
+        position: 'bottom',
+        magnification: true,
+        header: null,
+        footer: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/dock/dock.d.ts b/components/lib/dock/dock.d.ts
new file mode 100644
index 0000000000..008822f206
--- /dev/null
+++ b/components/lib/dock/dock.d.ts
@@ -0,0 +1,194 @@
+/**
+ *
+ * Dock is a navigation component consisting of menuitems.
+ *
+ * [Live Demo](https://www.primereact.org/dock/)
+ *
+ * @module dock
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type DockPassThroughType<T> = PassThroughType<T, DockPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DockPassThroughMethodOptions {
+    props: DockProps;
+    state: DockState;
+    context: DockContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DockProps.pt}
+ */
+export interface DockPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DockPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: DockPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DockPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DockPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: DockPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: DockPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: DockPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: DockPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in Dock component.
+ */
+export interface DockState {
+    /**
+     * Current index as a number.
+     * @defaultvalue -3
+     */
+    currentIndex: number;
+}
+
+/**
+ * Defines current options in Dock component.
+ */
+export interface DockContext {
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
+    /**
+     * Current menuitem
+     */
+    item: any;
+}
+
+/**
+ * Custom header template
+ * @see {@link DockProps.header}
+ */
+interface DockHeaderTemplateOptions {
+    /**
+     * All component props
+     */
+    props: DockProps;
+}
+
+/**
+ * Custom footer template
+ * @see {@link DockProps.footer}
+ * @extends {DockHeaderTemplateOptions}
+ */
+interface DockFooterTemplateOptions extends DockHeaderTemplateOptions {}
+
+/**
+ * Defines valid properties in Dock component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface DockProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * MenuModel instance to define the action items.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Position of element. Valid values are 'bottom', 'top', 'left' and 'right'.
+     * @defaultValue bottom
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Whether to allow scale animation.
+     */
+    magnification?: boolean | undefined;
+    /**
+     * Template of header element.
+     */
+    header?: React.ReactNode | ((options: DockHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Template of footer element.
+     */
+    footer?: React.ReactNode | ((options: DockFooterTemplateOptions) => React.ReactNode);
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DockPassThroughOptions}
+     */
+    pt?: DockPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Callback to invoke when dock receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when dock loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Dock**
+ *
+ * _Dock is a navigation component consisting of menuitems._
+ *
+ * [Live Demo](https://www.primereact.org/dock/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Dock extends React.Component<DockProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/dock/package.json b/components/lib/dock/package.json
new file mode 100644
index 0000000000..9f95778636
--- /dev/null
+++ b/components/lib/dock/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./dock.cjs.js",
+    "module": "./dock.esm.js",
+    "unpkg": "./dock.min.js",
+    "types": "./dock.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
new file mode 100644
index 0000000000..0c4617517f
--- /dev/null
+++ b/components/lib/dropdown/Dropdown.js
@@ -0,0 +1,1302 @@
+import * as React from 'react';
+import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useDebounce, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronUpIcon } from '../icons/chevronup';
+import { SpinnerIcon } from '../icons/spinner';
+import { TimesIcon } from '../icons/times';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { DropdownBase } from './DropdownBase';
+import { DropdownPanel } from './DropdownPanel';
+
+export const Dropdown = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = DropdownBase.getProps(inProps, context);
+        const [filterValue, filterState, setFilterState] = useDebounce('', props.filterDelay || 0);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const clickedRef = React.useRef(false);
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const firstHiddenFocusableElementOnOverlay = React.useRef(null);
+        const lastHiddenFocusableElementOnOverlay = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const focusInputRef = React.useRef(props.focusInputRef);
+        const virtualScrollerRef = React.useRef(null);
+        const searchTimeout = React.useRef(null);
+        const searchValue = React.useRef(null);
+        const isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
+        const hasFilter = ObjectUtils.isNotEmpty(filterState);
+        const appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
+        const { ptm, cx, sx, isUnstyled } = DropdownBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            state: {
+                filter: filterState,
+                focused: focusedState,
+                overlayVisible: overlayVisibleState
+            }
+        });
+
+        useHandleStyle(DropdownBase.css.styles, isUnstyled, { name: 'dropdown' });
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { type, valid }) => {
+                if (valid) {
+                    if (type === 'outside') {
+                        if (!isClearClicked(event)) {
+                            hide();
+                        }
+                    } else if (context.hideOverlaysOnDocumentScrolling) {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const flatOptions = (options) => {
+            return (options || []).reduce((result, option, index) => {
+                result.push({ ...option, group: true, index });
+
+                const optionGroupChildren = getOptionGroupChildren(option);
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
+
+                return result;
+            }, []);
+        };
+
+        const getVisibleOptions = () => {
+            const options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
+
+            if (hasFilter && !isLazy) {
+                const filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
+                const searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
+
+                if (props.optionGroupLabel) {
+                    let filteredGroups = [];
+
+                    for (let optgroup of props.options) {
+                        let filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+
+                        if (filteredSubOptions && filteredSubOptions.length) {
+                            filteredGroups.push({ ...optgroup, ...{ [`${props.optionGroupChildren}`]: filteredSubOptions } });
+                        }
+                    }
+
+                    return flatOptions(filteredGroups);
+                }
+
+                return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+            }
+
+            return options;
+        };
+
+        const onFirstHiddenFocus = (event) => {
+            const focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+
+            DomHandler.focus(focusableEl);
+        };
+
+        const onLastHiddenFocus = (event) => {
+            const focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+
+            DomHandler.focus(focusableEl);
+        };
+
+        const isClearClicked = (event) => {
+            return DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'clearicon') || DomHandler.isAttributeEquals(event.target.parentElement || event.target, 'data-pc-section', 'filterclearicon');
+        };
+
+        const onClick = (event) => {
+            if (props.disabled || props.loading) {
+                return;
+            }
+
+            props.onClick && props.onClick(event);
+
+            // do not continue if the user defined click wants to prevent it
+            if (event.defaultPrevented) {
+                return;
+            }
+
+            if (isClearClicked(event) || event.target.tagName === 'INPUT') {
+                return;
+            } else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
+                DomHandler.focus(focusInputRef.current);
+                overlayVisibleState ? hide() : show();
+            }
+
+            event.preventDefault();
+            clickedRef.current = true;
+        };
+
+        const onInputFocus = (event) => {
+            if (props.showOnFocus && !overlayVisibleState) {
+                show();
+            }
+
+            setFocusedState(true);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onInputBlur = (event) => {
+            setFocusedState(false);
+
+            if (props.onBlur) {
+                setTimeout(() => {
+                    const currentValue = inputRef.current ? inputRef.current.value : undefined;
+
+                    props.onBlur({
+                        originalEvent: event.originalEvent,
+                        value: currentValue,
+                        stopPropagation: () => {
+                            event.originalEvent.stopPropagation();
+                        },
+                        preventDefault: () => {
+                            event.originalEvent.preventDefault();
+                        },
+                        target: {
+                            name: props.name,
+                            id: props.id,
+                            value: currentValue
+                        }
+                    });
+                }, 200);
+            }
+        };
+
+        const onOptionSelect = (event, option, isHide = true) => {
+            selectItem({
+                originalEvent: event,
+                option
+            });
+
+            if (isHide) {
+                hide(true);
+
+                DomHandler.focus(focusInputRef.current);
+            }
+        };
+
+        const onPanelClick = (event) => {
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: elementRef.current
+            });
+        };
+
+        const onInputKeyDown = (event) => {
+            if (props.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            const code = DomHandler.isAndroid() ? event.key : event.code;
+
+            switch (code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    onArrowLeftKey(event, props.editable);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event, props.editable);
+                    break;
+
+                case 'End':
+                    onEndKey(event, props.editable);
+                    break;
+
+                case 'PageDown':
+                    onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    onPageUpKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event, props.editable);
+                    break;
+
+                case 'NumpadEnter':
+                case 'Enter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'Backspace':
+                    onBackspaceKey(event, props.editable);
+                    break;
+
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    const metaKey = event.metaKey || event.ctrlKey || event.altKey;
+
+                    // Only handle printable characters when no meta keys are pressed
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        !overlayVisibleState && !props.editable && show();
+                        !props.editable && searchOptions(event, event.key);
+                    }
+
+                    break;
+            }
+
+            clickedRef.current = false;
+        };
+
+        const onFilterInputKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                    onArrowLeftKey(event, true);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+                default:
+                    break;
+            }
+        };
+
+        const hasFocusableElements = () => {
+            return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
+        };
+
+        const isOptionMatched = (option) => {
+            return isValidOption(option) && getOptionLabel(option)?.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
+        };
+
+        const isValidOption = (option) => {
+            return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+        };
+
+        const hasSelectedOption = () => {
+            return ObjectUtils.isNotEmpty(props.value);
+        };
+
+        const isValidSelectedOption = (option) => {
+            return isValidOption(option) && isSelected(option);
+        };
+
+        const findSelectedOptionIndex = () => {
+            return hasSelectedOption ? visibleOptions.findIndex((option) => isValidSelectedOption(option)) : -1;
+        };
+
+        const findFirstFocusedOptionIndex = () => {
+            const selectedIndex = findSelectedOptionIndex();
+
+            return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+        };
+
+        const searchOptions = (event, char) => {
+            searchValue.current = (searchValue.current || '') + char;
+
+            let optionIndex = -1;
+            let matched = false;
+
+            if (ObjectUtils.isNotEmpty(searchValue.current)) {
+                if (focusedOptionIndex !== -1) {
+                    optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex((option) => isOptionMatched(option));
+                    optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex((option) => isOptionMatched(option)) : optionIndex + focusedOptionIndex;
+                } else {
+                    optionIndex = visibleOptions.findIndex((option) => isOptionMatched(option));
+                }
+
+                if (optionIndex !== -1) {
+                    matched = true;
+                }
+
+                if (optionIndex === -1 && focusedOptionIndex === -1) {
+                    optionIndex = findFirstFocusedOptionIndex();
+                }
+
+                if (optionIndex !== -1) {
+                    changeFocusedOptionIndex(event, optionIndex);
+                }
+            }
+
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout.current);
+            }
+
+            searchTimeout.current = setTimeout(() => {
+                searchValue.current = '';
+                searchTimeout.current = null;
+            }, 500);
+
+            return matched;
+        };
+
+        const findLastFocusedOptionIndex = () => {
+            const selectedIndex = findSelectedOptionIndex();
+
+            return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
+        };
+
+        const findFirstOptionIndex = () => {
+            return visibleOptions.findIndex((option) => isValidOption(option));
+        };
+
+        const findLastOptionIndex = () => {
+            return ObjectUtils.findLastIndex(visibleOptions, (option) => isValidOption(option));
+        };
+
+        const findNextOptionIndex = (index) => {
+            const matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+        };
+
+        const findPrevOptionIndex = (index) => {
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+        };
+
+        const changeFocusedOptionIndex = (event, index) => {
+            if (focusedOptionIndex !== index) {
+                setFocusedOptionIndex(index);
+                focusOnItem(index);
+
+                if (props.selectOnFocus) {
+                    onOptionSelect(event, visibleOptions[index], false);
+                }
+            }
+        };
+
+        const focusOnItem = (index) => {
+            const focusedItem = DomHandler.findSingle(overlayRef.current, `li[id="dropdownItem_${index}"]`);
+
+            focusedItem && focusedItem.focus();
+        };
+
+        const onArrowDownKey = (event) => {
+            if (!overlayVisibleState) {
+                show();
+                props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
+            } else {
+                const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clickedRef.current ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+
+                changeFocusedOptionIndex(event, optionIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event, pressedInInputText = false) => {
+            if (event.altKey && !pressedInInputText) {
+                if (focusedOptionIndex !== -1) {
+                    onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                }
+
+                state.overlayVisible && hide();
+                event.preventDefault();
+            } else {
+                const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clickedRef.current ? findLastOptionIndex() : findLastFocusedOptionIndex();
+
+                changeFocusedOptionIndex(event, optionIndex);
+
+                !overlayVisibleState && show();
+                event.preventDefault();
+            }
+        };
+
+        const onArrowLeftKey = (event, pressedInInputText = false) => {
+            if (!pressedInInputText) return;
+
+            props.editable && DomHandler.focus(inputRef.current);
+            setFocusedOptionIndex(-1);
+        };
+
+        const onHomeKey = (event, pressedInInputText = false) => {
+            if (pressedInInputText) {
+                DomHandler.focus(inputRef.current);
+                inputRef.current.setSelectionRange(0, 0);
+                setFocusedOptionIndex(-1);
+            } else {
+                changeFocusedOptionIndex(event, findFirstOptionIndex());
+
+                !overlayVisibleState && show();
+            }
+
+            event.preventDefault();
+        };
+
+        const onEndKey = (event, pressedInInputText = false) => {
+            if (pressedInInputText) {
+                const target = inputRef.current;
+                const len = target.value.length;
+
+                DomHandler.focus(target);
+                target.setSelectionRange(len, len);
+                setFocusedOptionIndex(-1);
+            } else {
+                changeFocusedOptionIndex(event, findLastOptionIndex());
+
+                !overlayVisibleState && show();
+            }
+
+            event.preventDefault();
+        };
+
+        const onPageUpKey = (event) => {
+            event.preventDefault();
+        };
+
+        const onPageDownKey = (event) => {
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event, pressedInInputText = false) => {
+            !pressedInInputText && onEnterKey(event);
+        };
+
+        const onEnterKey = (event) => {
+            event.preventDefault();
+
+            if (!overlayVisibleState) {
+                setFocusedOptionIndex(-1);
+                onArrowDownKey(event);
+            } else {
+                if (focusedOptionIndex === -1) {
+                    return;
+                }
+
+                const focusedOption = visibleOptions[focusedOptionIndex];
+                const optionValue = getOptionValue(focusedOption);
+
+                if (optionValue == null || optionValue == undefined) {
+                    hide();
+                    resetFilter();
+                    updateEditableLabel(selectedOption);
+
+                    return;
+                }
+
+                onOptionSelect(event, focusedOption);
+            }
+        };
+
+        const onEscapeKey = (event) => {
+            overlayVisibleState && hide();
+            event.preventDefault();
+        };
+
+        const onTabKey = (event, pressedInInputText = false) => {
+            if (!pressedInInputText) {
+                if (overlayVisibleState && !hasFocusableElements()) {
+                    DomHandler.focus(firstHiddenFocusableElementOnOverlay.current);
+
+                    event.preventDefault();
+                } else {
+                    if (focusedOptionIndex !== -1) {
+                        onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                    }
+
+                    overlayVisibleState && hide();
+                }
+            }
+        };
+
+        const onBackspaceKey = (event, pressedInInputText = false) => {
+            if (event && pressedInInputText) {
+                !overlayVisibleState && show();
+            }
+        };
+
+        const findNextOption = (index) => {
+            if (props.optionGroupLabel) {
+                const groupIndex = index === -1 ? 0 : index.group;
+                const optionIndex = index === -1 ? -1 : index.option;
+                const option = findNextOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
+
+                if (option) {
+                    return option;
+                } else if (groupIndex + 1 !== visibleOptions.length) {
+                    return findNextOption({ group: groupIndex + 1, option: -1 });
+                }
+
+                return null;
+            }
+
+            return findNextOptionInList(visibleOptions, index);
+        };
+
+        const findNextOptionInList = (list, index) => {
+            const i = index + 1;
+
+            if (i === list.length) {
+                return null;
+            }
+
+            const option = list[i];
+
+            return isOptionDisabled(option) ? findNextOptionInList(i) : option;
+        };
+
+        const findPrevOption = (index) => {
+            if (index === -1) {
+                return null;
+            }
+
+            if (props.optionGroupLabel) {
+                const groupIndex = index.group;
+                const optionIndex = index.option;
+                const option = findPrevOptionInList(getOptionGroupChildren(visibleOptions[groupIndex]), optionIndex);
+
+                if (option) {
+                    return option;
+                } else if (groupIndex > 0) {
+                    return findPrevOption({
+                        group: groupIndex - 1,
+                        option: getOptionGroupChildren(visibleOptions[groupIndex - 1]).length
+                    });
+                }
+
+                return null;
+            }
+
+            return findPrevOptionInList(visibleOptions, index);
+        };
+
+        const findPrevOptionInList = (list, index) => {
+            const i = index - 1;
+
+            if (i < 0) {
+                return null;
+            }
+
+            const option = list[i];
+
+            return isOptionDisabled(option) ? findPrevOption(i) : option;
+        };
+
+        const findInArray = (visibleOptions, searchText) => {
+            if (!searchText || !visibleOptions?.length) return -1;
+
+            const normalizedSearch = searchText.toLocaleLowerCase();
+
+            const exactMatch = visibleOptions.findIndex((item) => getOptionLabel(item).toLocaleLowerCase() === normalizedSearch);
+
+            if (exactMatch !== -1) return exactMatch;
+
+            return visibleOptions.findIndex((item) => getOptionLabel(item).toLocaleLowerCase().startsWith(normalizedSearch));
+        };
+
+        const onEditableInputChange = (event) => {
+            !overlayVisibleState && show();
+            let searchIndex = null;
+
+            if (event.target.value && visibleOptions) {
+                searchIndex = findInArray(visibleOptions, event.target.value);
+            }
+
+            setFocusedOptionIndex(searchIndex);
+
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event.originalEvent,
+                    value: event.target.value,
+                    stopPropagation: () => {
+                        event.originalEvent.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event.originalEvent.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: event.target.value
+                    }
+                });
+            }
+        };
+
+        const onEditableInputFocus = (event) => {
+            setFocusedState(true);
+            hide();
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onOptionClick = (event) => {
+            const option = event.option;
+
+            if (!option.disabled) {
+                selectItem(event);
+                DomHandler.focus(focusInputRef.current);
+            }
+
+            hide();
+        };
+
+        const onFilterInputChange = (event) => {
+            const filter = event.target.value;
+
+            setFilterState(filter);
+
+            if (props.onFilter) {
+                props.onFilter({
+                    originalEvent: event,
+                    filter
+                });
+            }
+        };
+
+        const onFilterClearIconClick = (callback) => {
+            resetFilter(callback);
+        };
+
+        const resetFilter = (callback) => {
+            setFilterState('');
+            props.onFilter && props.onFilter({ filter: '' });
+            callback && callback();
+        };
+
+        const clear = (event) => {
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value: undefined,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: undefined
+                    }
+                });
+            }
+
+            if (props.filter) {
+                resetFilter();
+            }
+
+            updateEditableLabel();
+            setFocusedOptionIndex(-1);
+        };
+
+        const selectItem = (event) => {
+            if (selectedOption !== event.option) {
+                updateEditableLabel(event.option);
+                setFocusedOptionIndex(-1);
+                const optionValue = getOptionValue(event.option);
+
+                const selectedOptionIndex = findOptionIndexInList(event.option, visibleOptions);
+
+                if (props.onChange) {
+                    props.onChange({
+                        originalEvent: event.originalEvent,
+                        value: optionValue,
+                        stopPropagation: () => {
+                            event.originalEvent.stopPropagation();
+                        },
+                        preventDefault: () => {
+                            event.originalEvent.preventDefault();
+                        },
+                        target: {
+                            name: props.name,
+                            id: props.id,
+                            value: optionValue
+                        }
+                    });
+                }
+
+                changeFocusedOptionIndex(event.originalEvent, selectedOptionIndex);
+            }
+        };
+
+        const getSelectedOptionIndex = (options) => {
+            options = options || visibleOptions;
+
+            if (options) {
+                if (props.optionGroupLabel) {
+                    for (let i = 0; i < options.length; i++) {
+                        let selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(options[i]));
+
+                        if (selectedOptionIndex !== -1) {
+                            return { group: i, option: selectedOptionIndex };
+                        }
+                    }
+                } else {
+                    return findOptionIndexInList(props.value, options);
+                }
+            }
+
+            return -1;
+        };
+
+        const equalityKey = () => {
+            return props.optionValue ? null : props.dataKey;
+        };
+
+        const findOptionIndexInList = (value, list) => {
+            const key = equalityKey();
+
+            return list.findIndex((item) => ObjectUtils.equals(value, getOptionValue(item), key));
+        };
+
+        const isSelected = (option) => {
+            return ObjectUtils.equals(props.value, getOptionValue(option), equalityKey());
+        };
+
+        const show = () => {
+            setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : props.editable ? -1 : findSelectedOptionIndex());
+            setOverlayVisibleState(true);
+        };
+
+        const hide = () => {
+            setOverlayVisibleState(false);
+            clickedRef.current = false;
+        };
+
+        const onFocus = () => {
+            if (props.editable && !overlayVisibleState && clickedRef.current === false) {
+                DomHandler.focus(inputRef.current);
+            }
+        };
+
+        const onOverlayEnter = (callback) => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            alignOverlay();
+            callback && callback();
+        };
+
+        const onOverlayEntered = (callback) => {
+            callback && callback();
+            bindOverlayListener();
+
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            if (props.filter && props.resetFilterOnHide) {
+                resetFilter();
+            }
+
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const alignOverlay = () => {
+            DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+        };
+
+        const scrollInView = () => {
+            const focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-focused="true"]');
+
+            if (focusedItem && focusedItem.scrollIntoView) {
+                focusedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            } else {
+                const highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+
+                if (highlightItem && highlightItem.scrollIntoView) {
+                    highlightItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                }
+            }
+        };
+
+        const updateEditableLabel = (option) => {
+            if (inputRef.current) {
+                inputRef.current.value = option ? getOptionLabel(option) : props.value || '';
+
+                // #1413 NVDA screenreader
+                if (focusInputRef.current) {
+                    focusInputRef.current.value = inputRef.current.value;
+                }
+            }
+        };
+
+        const getOptionLabel = (option) => {
+            if (ObjectUtils.isScalar(option)) {
+                return `${option}`;
+            }
+
+            const optionLabel = props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option['label'];
+
+            return `${optionLabel}`;
+        };
+
+        const getOptionValue = (option) => {
+            if (props.useOptionAsValue) {
+                return option;
+            }
+
+            const optionValue = props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option ? option['value'] : ObjectUtils.resolveFieldData(option, 'value');
+
+            return props.optionValue || ObjectUtils.isNotEmpty(optionValue) ? optionValue : option;
+        };
+
+        const getOptionRenderKey = (option) => {
+            return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
+        };
+
+        const isOptionGroup = (option) => {
+            return props.optionGroupLabel && option.group;
+        };
+
+        const isOptionDisabled = (option) => {
+            if (props.optionDisabled) {
+                return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
+            }
+
+            return option && option.disabled !== undefined ? option.disabled : false;
+        };
+
+        const getOptionGroupRenderKey = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
+        };
+
+        const getOptionGroupLabel = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
+        };
+
+        const getOptionGroupChildren = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
+        };
+
+        const updateInputField = () => {
+            if (props.editable && inputRef.current) {
+                const label = selectedOption ? getOptionLabel(selectedOption) : null;
+                const value = label || props.value || '';
+
+                inputRef.current.value = value;
+
+                // #1413 NVDA screenreader
+                if (focusInputRef.current) {
+                    focusInputRef.current.value = value;
+                }
+            }
+        };
+
+        const getSelectedOption = () => {
+            const index = getSelectedOptionIndex(props.options);
+
+            return index !== -1 ? (props.optionGroupLabel ? getOptionGroupChildren(props.options[index.group])[index.option] : props.options[index]) : null;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            clear,
+            focus: () => DomHandler.focus(focusInputRef.current),
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current,
+            getFocusInput: () => focusInputRef.current,
+            getVirtualScroller: () => virtualScrollerRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+            ObjectUtils.combinedRefs(focusInputRef, props.focusInputRef);
+        }, [inputRef, props.inputRef, focusInputRef, props.focusInputRef]);
+
+        useMountEffect(() => {
+            if (props.autoFocus) {
+                DomHandler.focus(focusInputRef.current, props.autoFocus);
+            }
+
+            alignOverlay();
+        });
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState && (props.value || focusedOptionIndex >= 0)) {
+                scrollInView();
+            }
+        }, [overlayVisibleState, props.value, focusedOptionIndex]);
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState && filterState && props.filter) {
+                alignOverlay();
+            }
+        }, [overlayVisibleState, filterState, props.filter]);
+
+        useUpdateEffect(() => {
+            virtualScrollerRef.current && virtualScrollerRef.current.scrollInView(0);
+        }, [filterState]);
+
+        useUpdateEffect(() => {
+            updateInputField();
+
+            if (inputRef.current) {
+                inputRef.current.selectedIndex = 1;
+            }
+        });
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        const createHiddenSelect = () => {
+            let option = { value: '', label: props.placeholder };
+
+            if (selectedOption) {
+                const optionValue = getOptionValue(selectedOption);
+
+                option = {
+                    value: typeof optionValue === 'object' ? props.options.findIndex((o) => o === optionValue) : optionValue,
+                    label: getOptionLabel(selectedOption)
+                };
+            }
+
+            const hiddenSelectedMessageProps = mergeProps(
+                {
+                    className: 'p-hidden-accessible p-dropdown-hidden-select'
+                },
+                ptm('hiddenSelectedMessage')
+            );
+
+            const selectProps = mergeProps(
+                {
+                    ref: inputRef,
+                    required: props.required,
+                    defaultValue: option.value,
+                    name: props.name,
+                    tabIndex: -1
+                },
+                ptm('select')
+            );
+
+            const optionProps = mergeProps(
+                {
+                    value: option.value
+                },
+                ptm('option')
+            );
+
+            return (
+                <div {...hiddenSelectedMessageProps}>
+                    <select {...selectProps}>
+                        <option {...optionProps}>{option.label}</option>
+                    </select>
+                </div>
+            );
+        };
+
+        const createKeyboardHelper = () => {
+            let value = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
+
+            if (props.editable) {
+                value = value || props.value || '';
+            }
+
+            const hiddenSelectedMessageProps = mergeProps(
+                {
+                    className: 'p-hidden-accessible'
+                },
+                ptm('hiddenSelectedMessage')
+            );
+
+            const inputProps = mergeProps(
+                {
+                    ref: focusInputRef,
+                    id: props.inputId,
+                    defaultValue: value,
+                    type: 'text',
+                    readOnly: true,
+                    'aria-haspopup': 'listbox',
+                    onFocus: onInputFocus,
+                    onBlur: onInputBlur,
+                    onKeyDown: onInputKeyDown,
+                    disabled: props.disabled,
+                    tabIndex: !props.disabled ? props.tabIndex || 0 : -1,
+                    ...ariaProps
+                },
+                ptm('input')
+            );
+
+            return (
+                <div {...hiddenSelectedMessageProps}>
+                    <input {...inputProps} />
+                </div>
+            );
+        };
+
+        const createLabel = () => {
+            const label = ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
+
+            if (props.editable) {
+                const value = label || props.value || '';
+                const inputProps = mergeProps(
+                    {
+                        ref: inputRef,
+                        type: 'text',
+                        defaultValue: value,
+                        className: cx('input', { label }),
+                        disabled: props.disabled,
+                        placeholder: props.placeholder,
+                        maxLength: props.maxLength,
+                        onInput: onEditableInputChange,
+                        onFocus: onEditableInputFocus,
+                        onKeyDown: onInputKeyDown,
+                        onBlur: onInputBlur,
+                        tabIndex: !props.disabled ? props.tabIndex || 0 : -1,
+                        'aria-haspopup': 'listbox',
+                        ...ariaProps
+                    },
+                    ptm('input')
+                );
+
+                return <input {...inputProps} />;
+            }
+
+            const content = props.valueTemplate ? ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || props.emptyMessage || <>&nbsp;</>;
+            const inputProps = mergeProps(
+                {
+                    ref: inputRef,
+                    className: cx('input', { label }),
+                    tabIndex: '-1'
+                },
+                ptm('input')
+            );
+
+            return <span {...inputProps}>{content}</span>;
+        };
+
+        const onClearIconKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                clear(event);
+                event.preventDefault();
+            }
+        };
+
+        const createClearIcon = () => {
+            if (props.value != null && props.showClear && !props.disabled && !ObjectUtils.isEmpty(props.options)) {
+                const clearIconProps = mergeProps(
+                    {
+                        className: cx('clearIcon'),
+                        onPointerUp: clear,
+                        tabIndex: props.editable ? -1 : props.tabIndex || '0',
+                        onKeyDown: onClearIconKeyDown,
+                        'aria-label': localeOption('clear')
+                    },
+                    ptm('clearIcon')
+                );
+                const icon = props.clearIcon || <TimesIcon {...clearIconProps} />;
+
+                return IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props });
+            }
+
+            return null;
+        };
+
+        const createLoadingIcon = () => {
+            const loadingIconProps = mergeProps(
+                {
+                    className: cx('loadingIcon'),
+                    'data-pr-overlay-visible': overlayVisibleState
+                },
+                ptm('loadingIcon')
+            );
+            const icon = props.loadingIcon || <SpinnerIcon spin />;
+            const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+            const ariaLabel = props.placeholder || props.ariaLabel;
+            const loadingButtonProps = mergeProps(
+                {
+                    className: cx('trigger'),
+                    role: 'button',
+                    'aria-haspopup': 'listbox',
+                    'aria-expanded': overlayVisibleState,
+                    'aria-label': ariaLabel
+                },
+                ptm('trigger')
+            );
+
+            return <div {...loadingButtonProps}>{loadingIcon}</div>;
+        };
+
+        const createDropdownIcon = () => {
+            const dropdownIconProps = mergeProps(
+                {
+                    className: cx('dropdownIcon'),
+                    'data-pr-overlay-visible': overlayVisibleState
+                },
+                ptm('dropdownIcon')
+            );
+            const icon = !overlayVisibleState ? props.dropdownIcon || <ChevronDownIcon {...dropdownIconProps} /> : props.collapseIcon || <ChevronUpIcon {...dropdownIconProps} />;
+            const dropdownIcon = IconUtils.getJSXIcon(icon, { ...dropdownIconProps }, { props });
+
+            const ariaLabel = props.placeholder || props.ariaLabel;
+            const triggerProps = mergeProps(
+                {
+                    className: cx('trigger'),
+                    role: 'button',
+                    'aria-haspopup': 'listbox',
+                    'aria-expanded': overlayVisibleState,
+                    'aria-label': ariaLabel
+                },
+                ptm('trigger')
+            );
+
+            return <div {...triggerProps}>{dropdownIcon}</div>;
+        };
+
+        const visibleOptions = getVisibleOptions();
+        const selectedOption = getSelectedOption();
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = DropdownBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const hiddenSelect = createHiddenSelect();
+        const keyboardHelper = createKeyboardHelper();
+        const labelElement = createLabel();
+        const dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
+        const clearIcon = createClearIcon();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root', { context, focusedState, overlayVisibleState })),
+                style: props.style,
+                onClick: (e) => onClick(e),
+                onMouseDown: props.onMouseDown,
+                onContextMenu: props.onContextMenu,
+                onFocus: onFocus,
+                'data-p-disabled': props.disabled,
+                'data-p-focus': focusedState,
+                'aria-activedescendant': focusedState ? `dropdownItem_${focusedOptionIndex}` : undefined
+            },
+            otherProps,
+            ptm('root')
+        );
+
+        const firstHiddenFocusableElementProps = mergeProps(
+            {
+                ref: firstHiddenFocusableElementOnOverlay,
+                role: 'presentation',
+                className: 'p-hidden-accessible p-hidden-focusable',
+                tabIndex: '0',
+                onFocus: onFirstHiddenFocus,
+                'data-p-hidden-accessible': true,
+                'data-p-hidden-focusable': true
+            },
+            ptm('hiddenFirstFocusableEl')
+        );
+
+        const lastHiddenFocusableElementProps = mergeProps(
+            {
+                ref: lastHiddenFocusableElementOnOverlay,
+                role: 'presentation',
+                className: 'p-hidden-accessible p-hidden-focusable',
+                tabIndex: '0',
+                onFocus: onLastHiddenFocus,
+                'data-p-hidden-accessible': true,
+                'data-p-hidden-focusable': true
+            },
+            ptm('hiddenLastFocusableEl')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    {keyboardHelper}
+                    {hiddenSelect}
+                    {labelElement}
+                    {clearIcon}
+                    {dropdownIcon}
+                    <DropdownPanel
+                        hostName="Dropdown"
+                        ref={overlayRef}
+                        visibleOptions={visibleOptions}
+                        virtualScrollerRef={virtualScrollerRef}
+                        {...props}
+                        appendTo={appendTo}
+                        cx={cx}
+                        filterValue={filterValue}
+                        focusedOptionIndex={focusedOptionIndex}
+                        getOptionGroupChildren={getOptionGroupChildren}
+                        getOptionGroupLabel={getOptionGroupLabel}
+                        getOptionGroupRenderKey={getOptionGroupRenderKey}
+                        getOptionLabel={getOptionLabel}
+                        getOptionRenderKey={getOptionRenderKey}
+                        getSelectedOptionIndex={getSelectedOptionIndex}
+                        hasFilter={hasFilter}
+                        in={overlayVisibleState}
+                        isOptionDisabled={isOptionDisabled}
+                        isSelected={isSelected}
+                        onOverlayHide={hide}
+                        onClick={onPanelClick}
+                        onEnter={onOverlayEnter}
+                        onEntered={onOverlayEntered}
+                        onExit={onOverlayExit}
+                        onExited={onOverlayExited}
+                        onFilterClearIconClick={onFilterClearIconClick}
+                        onFilterInputChange={onFilterInputChange}
+                        onFilterInputKeyDown={onFilterInputKeyDown}
+                        onOptionClick={onOptionClick}
+                        onInputKeyDown={onInputKeyDown}
+                        ptm={ptm}
+                        resetFilter={resetFilter}
+                        changeFocusedOptionIndex={changeFocusedOptionIndex}
+                        firstFocusableElement={<span {...firstHiddenFocusableElementProps} />}
+                        lastFocusableElement={<span {...lastHiddenFocusableElementProps} />}
+                        sx={sx}
+                    />
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+Dropdown.displayName = 'Dropdown';
diff --git a/components/lib/dropdown/DropdownBase.js b/components/lib/dropdown/DropdownBase.js
new file mode 100644
index 0000000000..41393498c4
--- /dev/null
+++ b/components/lib/dropdown/DropdownBase.js
@@ -0,0 +1,244 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames, ObjectUtils } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, focusedState, overlayVisibleState, context }) =>
+        classNames('p-dropdown p-component p-inputwrapper', {
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-focus': focusedState,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
+            'p-dropdown-clearable': props.showClear && !props.disabled,
+            'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
+            'p-inputwrapper-focus': focusedState || overlayVisibleState
+        }),
+    input: ({ props, label }) =>
+        props.editable
+            ? 'p-dropdown-label p-inputtext'
+            : classNames('p-dropdown-label p-inputtext', {
+                  'p-placeholder': label === null && props.placeholder,
+                  'p-dropdown-label-empty': label === null && !props.placeholder
+              }),
+    trigger: 'p-dropdown-trigger',
+    emptyMessage: 'p-dropdown-empty-message',
+    itemGroup: ({ optionGroupLabel }) =>
+        classNames('p-dropdown-item-group', {
+            'p-dropdown-item-empty': !optionGroupLabel || optionGroupLabel.length === 0
+        }),
+    itemGroupLabel: 'p-dropdown-item-group-label',
+    dropdownIcon: 'p-dropdown-trigger-icon p-clickable',
+    loadingIcon: 'p-dropdown-trigger-icon p-clickable',
+    clearIcon: 'p-dropdown-clear-icon p-clickable',
+    filterIcon: 'p-dropdown-filter-icon',
+    filterClearIcon: 'p-dropdown-filter-clear-icon',
+    filterContainer: ({ clearIcon }) => classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon }),
+    filterInput: ({ props, context }) =>
+        classNames('p-dropdown-filter p-inputtext p-component', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    list: ({ virtualScrollerOptions }) => (virtualScrollerOptions ? 'p-dropdown-items' : 'p-dropdown-items'),
+    panel: ({ context }) =>
+        classNames('p-dropdown-panel p-component', {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    item: ({ selected, disabled, label, index, focusedOptionIndex, highlightOnSelect }) =>
+        classNames('p-dropdown-item', {
+            'p-highlight': selected && highlightOnSelect,
+            'p-disabled': disabled,
+            'p-focus': index === focusedOptionIndex,
+            'p-dropdown-item-empty': !label || label.length === 0
+        }),
+    itemLabel: 'p-dropdown-item-label',
+    checkIcon: 'p-dropdown-check-icon',
+    blankIcon: 'p-dropdown-blank-icon',
+    wrapper: 'p-dropdown-items-wrapper',
+    header: 'p-dropdown-header',
+    footer: 'p-dropdown-footer',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-dropdown {
+        display: inline-flex;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+    }
+    
+    .p-dropdown-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+    
+    .p-dropdown-label {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        flex: 1 1 auto;
+        width: 1%;
+        text-overflow: ellipsis;
+        cursor: pointer;
+    }
+    
+    .p-dropdown-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+    
+    input.p-dropdown-label  {
+        cursor: default;
+    }
+    
+    .p-dropdown .p-dropdown-panel {
+        min-width: 100%;
+    }
+    
+    .p-dropdown-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    
+    .p-dropdown-items-wrapper {
+        overflow: auto;
+    }
+    
+    .p-dropdown-item {
+        cursor: pointer;
+        font-weight: normal;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .p-dropdown-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+    
+    .p-dropdown-filter {
+        width: 100%;
+    }
+    
+    .p-dropdown-filter-container {
+        position: relative;
+    }
+    
+    .p-dropdown-clear-icon,
+    .p-dropdown-filter-icon,
+    .p-dropdown-filter-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+        right: 2rem;
+    }
+    
+    .p-fluid .p-dropdown {
+        display: flex;
+    }
+    
+    .p-fluid .p-dropdown .p-dropdown-label {
+        width: 1%;
+    }
+}
+`;
+
+const inlineStyles = {
+    wrapper: ({ props }) => ({ maxHeight: props.scrollHeight || 'auto' }),
+    panel: ({ props }) => ({
+        ...props.panelStyle
+    })
+};
+
+export const DropdownBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Dropdown',
+        __parentMetadata: null,
+        appendTo: null,
+        ariaLabel: null,
+        ariaLabelledBy: null,
+        autoFocus: false,
+        autoOptionFocus: false,
+        checkmark: false,
+        children: undefined,
+        className: null,
+        clearIcon: null,
+        collapseIcon: null,
+        dataKey: null,
+        disabled: false,
+        dropdownIcon: null,
+        editable: false,
+        emptyFilterMessage: null,
+        emptyMessage: null,
+        filter: false,
+        filterBy: null,
+        filterClearIcon: null,
+        filterDelay: 300,
+        filterIcon: null,
+        filterInputAutoFocus: false,
+        filterLocale: undefined,
+        filterMatchMode: 'contains',
+        filterPlaceholder: null,
+        filterTemplate: null,
+        focusInputRef: null,
+        focusOnHover: true,
+        highlightOnSelect: true,
+        id: null,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        itemTemplate: null,
+        loading: false,
+        loadingIcon: null,
+        maxLength: null,
+        name: null,
+        onBlur: null,
+        onChange: null,
+        onClick: null,
+        onContextMenu: null,
+        onFilter: null,
+        onFocus: null,
+        onHide: null,
+        onMouseDown: null,
+        onShow: null,
+        optionDisabled: null,
+        optionGroupChildren: 'items',
+        optionGroupLabel: null,
+        optionGroupTemplate: null,
+        optionLabel: null,
+        options: null,
+        optionValue: null,
+        panelClassName: null,
+        panelFooterTemplate: null,
+        panelStyle: null,
+        placeholder: null,
+        required: false,
+        resetFilterOnHide: false,
+        scrollHeight: '200px',
+        selectOnFocus: false,
+        showClear: false,
+        showFilterClear: false,
+        showOnFocus: false,
+        style: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        transitionOptions: null,
+        useOptionAsValue: false,
+        value: null,
+        valueTemplate: null,
+        variant: null,
+        virtualScrollerOptions: null
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/dropdown/DropdownItem.js b/components/lib/dropdown/DropdownItem.js
new file mode 100644
index 0000000000..52f4d4d5a6
--- /dev/null
+++ b/components/lib/dropdown/DropdownItem.js
@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, ObjectUtils } from '../utils/Utils';
+import { CheckIcon } from '../icons/check';
+import { BlankIcon } from '../icons/blank';
+
+export const DropdownItem = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, cx, selected, disabled, option, label, index, focusedOptionIndex, ariaSetSize, checkmark, highlightOnSelect, onInputKeyDown } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            context: {
+                selected,
+                disabled,
+                focused: index === focusedOptionIndex
+            }
+        });
+    };
+
+    const onClick = (event, i) => {
+        if (props.onClick) {
+            props.onClick({
+                originalEvent: event,
+                option
+            });
+        }
+    };
+
+    const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
+    const itemProps = mergeProps(
+        {
+            id: `dropdownItem_${index}`,
+            role: 'option',
+            className: classNames(option.className, cx('item', { selected, disabled, label, index, focusedOptionIndex, highlightOnSelect })),
+            style: props.style,
+            tabIndex: 0,
+            onClick: (e) => onClick(e, index),
+            onKeyDown: (e) => onInputKeyDown(e),
+            onMouseMove: (e) => props?.onMouseMove(e, index),
+            'aria-setsize': ariaSetSize,
+            'aria-posinset': index + 1,
+            'aria-label': label,
+            'aria-selected': selected,
+            'data-p-highlight': selected,
+            'data-p-focused': focusedOptionIndex === index,
+            'data-p-disabled': disabled
+        },
+        getPTOptions('item', { selected, disabled, option, label })
+    );
+    const itemGroupLabelProps = mergeProps(
+        {
+            className: cx('itemLabel')
+        },
+        getPTOptions('itemLabel')
+    );
+
+    const iconRenderer = () => {
+        if (selected) {
+            const checkIconProps = mergeProps(
+                {
+                    className: cx('checkIcon')
+                },
+                getPTOptions('checkIcon')
+            );
+
+            return <CheckIcon {...checkIconProps} />;
+        }
+
+        const blankIconProps = mergeProps(
+            {
+                className: cx('blankIcon')
+            },
+            getPTOptions('blankIcon')
+        );
+
+        return <BlankIcon {...blankIconProps} />;
+    };
+
+    return (
+        <li key={props.label} {...itemProps}>
+            {checkmark && iconRenderer()}
+            <span {...itemGroupLabelProps}>{content}</span>
+            <Ripple />
+        </li>
+    );
+});
+
+DropdownItem.displayName = 'DropdownItem';
diff --git a/components/lib/dropdown/DropdownPanel.js b/components/lib/dropdown/DropdownPanel.js
new file mode 100644
index 0000000000..bd30c539ba
--- /dev/null
+++ b/components/lib/dropdown/DropdownPanel.js
@@ -0,0 +1,352 @@
+import * as React from 'react';
+import { ariaLabel, localeOption, PrimeReactContext } from '../api/Api';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { SearchIcon } from '../icons/search';
+import { TimesIcon } from '../icons/times';
+import { Portal } from '../portal/Portal';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { VirtualScroller } from '../virtualscroller/VirtualScroller';
+import { DropdownItem } from './DropdownItem';
+
+export const DropdownPanel = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { ptm, cx, sx } = props;
+        const context = React.useContext(PrimeReactContext);
+
+        const filterInputRef = React.useRef(null);
+        const isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
+        const ariaSetSize = props.visibleOptions ? props.visibleOptions.length : 0;
+        const filterOptions = {
+            filter: (e) => onFilterInputChange(e),
+            reset: () => props.resetFilter()
+        };
+
+        const getPTOptions = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const onEnter = () => {
+            props.onEnter(() => {
+                if (props.virtualScrollerRef.current) {
+                    const selectedIndex = props.getSelectedOptionIndex();
+
+                    if (selectedIndex !== -1) {
+                        setTimeout(() => props.virtualScrollerRef.current.scrollToIndex(selectedIndex), 0);
+                    }
+                }
+            });
+        };
+
+        const onEntered = () => {
+            props.onEntered(() => {
+                if (props.filter && props.filterInputAutoFocus) {
+                    DomHandler.focus(filterInputRef.current, false);
+                }
+            });
+        };
+
+        const onFilterInputChange = (event) => {
+            props.onFilterInputChange && props.onFilterInputChange(event);
+        };
+
+        const createFooter = () => {
+            if (props.panelFooterTemplate) {
+                const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
+                const footerProps = mergeProps(
+                    {
+                        className: cx('footer')
+                    },
+                    getPTOptions('footer')
+                );
+
+                return <div {...footerProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const changeFocusedItemOnHover = (event, index) => {
+            if (props.focusOnHover) {
+                props?.changeFocusedOptionIndex?.(event, index);
+            }
+        };
+
+        const createEmptyMessage = (emptyMessage, isFilter) => {
+            const message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
+            const emptyMessageProps = mergeProps(
+                {
+                    className: cx('emptyMessage')
+                },
+                getPTOptions('emptyMessage')
+            );
+
+            return <li {...emptyMessageProps}>{message}</li>;
+        };
+
+        const createItem = (option, index, scrollerOptions = {}) => {
+            let style = { height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined };
+
+            style = { ...style, ...option.style };
+
+            if (option.group && props.optionGroupLabel) {
+                const { optionGroupLabel } = props;
+                const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
+                const key = index + '_' + props.getOptionGroupRenderKey(option);
+                const itemGroupProps = mergeProps(
+                    {
+                        className: cx('itemGroup', { optionGroupLabel }),
+                        style,
+                        'data-p-highlight': props.selected
+                    },
+                    getPTOptions('itemGroup')
+                );
+                const itemGroupLabelProps = mergeProps(
+                    {
+                        className: cx('itemGroupLabel')
+                    },
+                    getPTOptions('itemGroupLabel')
+                );
+
+                return (
+                    <li key={key} {...itemGroupProps}>
+                        <span {...itemGroupLabelProps}>{groupContent}</span>
+                    </li>
+                );
+            }
+
+            const optionKey = props.getOptionRenderKey(option) + '_' + index;
+            const optionLabel = props.getOptionLabel(option);
+            const disabled = props.isOptionDisabled(option);
+
+            return (
+                <DropdownItem
+                    key={optionKey}
+                    label={optionLabel}
+                    index={index}
+                    focusedOptionIndex={props.focusedOptionIndex}
+                    option={option}
+                    ariaSetSize={ariaSetSize}
+                    onInputKeyDown={props.onInputKeyDown}
+                    style={style}
+                    template={props.itemTemplate}
+                    selected={props.isSelected(option)}
+                    highlightOnSelect={props.highlightOnSelect}
+                    disabled={disabled}
+                    onClick={props.onOptionClick}
+                    onMouseMove={changeFocusedItemOnHover}
+                    ptm={ptm}
+                    cx={cx}
+                    checkmark={props.checkmark}
+                />
+            );
+        };
+
+        const createItems = () => {
+            if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
+                return props.visibleOptions.map(createItem);
+            } else if (props.hasFilter) {
+                return createEmptyMessage(props.emptyFilterMessage, true);
+            }
+
+            return createEmptyMessage(props.emptyMessage);
+        };
+
+        const createFilterClearIcon = () => {
+            if (props.showFilterClear && props.filterValue) {
+                const ariaLabelFilterClear = localeOption('clear');
+                const clearIconProps = mergeProps(
+                    {
+                        className: cx('filterClearIcon'),
+                        'aria-label': ariaLabelFilterClear,
+                        onClick: () => props.onFilterClearIconClick(() => DomHandler.focus(filterInputRef.current))
+                    },
+                    getPTOptions('filterClearIcon')
+                );
+                const icon = props.filterClearIcon || <TimesIcon {...clearIconProps} />;
+                const filterClearIcon = IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props });
+
+                return filterClearIcon;
+            }
+
+            return null;
+        };
+
+        const createFilter = () => {
+            if (props.filter) {
+                const clearIcon = createFilterClearIcon();
+                const filterIconProps = mergeProps(
+                    {
+                        className: cx('filterIcon')
+                    },
+                    getPTOptions('filterIcon')
+                );
+                const icon = props.filterIcon || <SearchIcon {...filterIconProps} />;
+                const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
+                const filterContainerProps = mergeProps(
+                    {
+                        className: cx('filterContainer', { clearIcon })
+                    },
+                    getPTOptions('filterContainer')
+                );
+                const filterInputProps = mergeProps(
+                    {
+                        ref: filterInputRef,
+                        type: 'text',
+                        autoComplete: 'off',
+                        className: cx('filterInput', { context }),
+                        placeholder: props.filterPlaceholder,
+                        onKeyDown: props.onFilterInputKeyDown,
+                        onChange: (e) => onFilterInputChange(e),
+                        value: props.filterValue
+                    },
+                    getPTOptions('filterInput')
+                );
+                let content = (
+                    <div {...filterContainerProps}>
+                        <input {...filterInputProps} />
+                        {clearIcon}
+                        {filterIcon}
+                    </div>
+                );
+
+                if (props.filterTemplate) {
+                    const defaultContentOptions = {
+                        className: classNames('p-dropdown-filter-container', { 'p-dropdown-clearable-filter': !!clearIcon }),
+                        element: content,
+                        filterOptions: filterOptions,
+                        filterInputKeyDown: props.onFilterInputKeyDown,
+                        filterInputChange: onFilterInputChange,
+                        filterIconClassName: 'p-dropdown-filter-icon',
+                        clearIcon: clearIcon,
+                        props
+                    };
+
+                    content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+                }
+
+                const headerProps = mergeProps(
+                    {
+                        className: cx('header')
+                    },
+                    getPTOptions('header')
+                );
+
+                return <div {...headerProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const createContent = () => {
+            if (props.virtualScrollerOptions) {
+                const virtualScrollerProps = {
+                    ...props.virtualScrollerOptions,
+                    ...{
+                        style: { ...props.virtualScrollerOptions.style, ...{ height: props.scrollHeight } },
+                        className: classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
+                        items: props.visibleOptions,
+                        autoSize: true,
+                        onLazyLoad: (event) => props.virtualScrollerOptions.onLazyLoad({ ...event, ...{ filter: props.filterValue } }),
+                        itemTemplate: (item, options) => item && createItem(item, options.index, options),
+                        contentTemplate: (options) => {
+                            const children = options.children || [];
+                            const emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage;
+                            const content = isEmptyFilter || children?.length === 0 ? createEmptyMessage(emptyMessage) : children;
+                            const listProps = mergeProps(
+                                {
+                                    ref: options.contentRef,
+                                    style: options.style,
+                                    className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })),
+                                    role: 'listbox',
+                                    'aria-label': ariaLabel('listLabel')
+                                },
+                                getPTOptions('list')
+                            );
+
+                            return <ul {...listProps}>{content}</ul>;
+                        }
+                    }
+                };
+
+                return <VirtualScroller ref={props.virtualScrollerRef} {...virtualScrollerProps} pt={ptm('virtualScroller')} />;
+            }
+
+            const items = createItems();
+            const wrapperProps = mergeProps(
+                {
+                    className: cx('wrapper'),
+                    style: sx('wrapper')
+                },
+                getPTOptions('wrapper')
+            );
+
+            const listProps = mergeProps(
+                {
+                    className: cx('list'),
+                    role: 'listbox',
+                    'aria-label': ariaLabel('listLabel')
+                },
+                getPTOptions('list')
+            );
+
+            return (
+                <div {...wrapperProps}>
+                    <ul {...listProps}>{items}</ul>
+                </div>
+            );
+        };
+
+        const createElement = () => {
+            const filter = createFilter();
+            const content = createContent();
+            const footer = createFooter();
+            const panelProps = mergeProps(
+                {
+                    className: classNames(props.panelClassName, cx('panel', { context })),
+                    style: sx('panel'),
+                    onClick: props.onClick,
+                    'data-pr-is-overlay': true
+                },
+                getPTOptions('panel')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: props.in,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter: onEnter,
+                    onEntered: onEntered,
+                    onExit: props.onExit,
+                    onExited: props.onExited
+                },
+                getPTOptions('transition')
+            );
+
+            return (
+                <CSSTransition nodeRef={ref} {...transitionProps}>
+                    <div ref={ref} {...panelProps}>
+                        {props.firstFocusableElement}
+                        {filter}
+                        {content}
+                        {footer}
+                        {props.lastFocusableElement}
+                    </div>
+                </CSSTransition>
+            );
+        };
+
+        const element = createElement();
+
+        return <Portal element={element} appendTo={props.appendTo} />;
+    })
+);
+
+DropdownPanel.displayName = 'DropdownPanel';
diff --git a/components/lib/dropdown/dropdown.d.ts b/components/lib/dropdown/dropdown.d.ts
new file mode 100644
index 0000000000..7d810018a4
--- /dev/null
+++ b/components/lib/dropdown/dropdown.d.ts
@@ -0,0 +1,643 @@
+/**
+ *
+ * Dropdown also known as Select, is used to choose an item from a collection of options.
+ *
+ * [Live Demo](https://www.primereact.org/dropdown/)
+ *
+ * @module dropdown
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils';
+import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type DropdownPassThroughType<T> = PassThroughType<T, DropdownPassThroughMethodOptions>;
+export declare type DropdownPassThroughTransitionType = ReactCSSTransitionProps | ((options: DropdownPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DropdownPassThroughMethodOptions {
+    props: DropdownProps;
+    state: DropdownState;
+    context: DropdownContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DropdownProps.pt}
+ */
+export interface DropdownPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: DropdownPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the clear icon's DOM element.
+     */
+    clearIcon?: DropdownPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the trigger' DOM element.
+     */
+    trigger?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: DropdownPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: DropdownPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the filter clear icon's DOM element.
+     */
+    filterClearIcon?: DropdownPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptions}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptions;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: DropdownPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: DropdownPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to pass attributes to the item group label's DOM element.
+     */
+    itemGroupLabel?: DropdownPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: DropdownPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to pass attributes to the item label's DOM element.
+     */
+    itemLabel?: DropdownPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to pass attributes to the check icon's DOM element.
+     */
+    checkIcon?: DropdownPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
+    /**
+     * Used to pass attributes to the bank icon's DOM element.
+     */
+    blankIcon?: DropdownPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: DropdownPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the select's DOM element.
+     */
+    select?: DropdownPassThroughType<React.HTMLAttributes<HTMLSelectElement>>;
+    /**
+     * Uses to pass attributes to the option's DOM element.
+     */
+    option?: DropdownPassThroughType<React.HTMLAttributes<HTMLOptionElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Uses to pass attributes to the hidden selected message's DOM element.
+     */
+    hiddenSelectedMessage?: DropdownPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: DropdownPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Dropdown component.
+ */
+export interface DropdownState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current filter state as a string.
+     */
+    filter: string;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
+/**
+ * Defines current options in Dropdown component.
+ */
+export interface DropdownContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focus state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link DropdownProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface DropdownChangeEvent extends FormEvent {}
+
+/**
+ * Custom filter event
+ * @see {@link DropdownProps.onFilter}
+ * @event
+ */
+interface DropdownFilterEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Filter value
+     */
+    filter: string;
+}
+
+/**
+ * Custom filter options
+ * @see {@link DropdownProps.filterTemplate}
+ * @deprecated Since v9.3.0
+ */
+interface DropdownFilterOptions {
+    /**
+     * Used to filter options
+     * @param {React.KeyboardEvent<HTMLElement>} event - Browser event
+     */
+    filter?: (event?: React.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Used to reset the filtered options
+     */
+    reset?: () => void;
+}
+
+/**
+ * Defines valid properties in Dropdown component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface DropdownProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Used to define a string that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Icon of the dropdown.
+     */
+    clearIcon?: IconType<DropdownProps> | undefined;
+    /**
+     * A property to uniquely match the value in options for better performance.
+     */
+    dataKey?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Icon of the dropdown.
+     */
+    dropdownIcon?: IconType<DropdownProps> | undefined;
+    /**
+     * Icon of collapse action.
+     */
+    collapseIcon?: IconType<DropdownProps> | undefined;
+    /**
+     * When present, custom value instead of predefined options can be entered using the editable input field.
+     * @defaultValue false
+     */
+    editable?: boolean;
+    /**
+     *  Whether the selected option will be add highlight class.
+     *  @defaultValue true
+     */
+    highlightOnSelect?: boolean;
+    /**
+     *  Whether the selected option will be shown with a check mark.
+     *  @defaultValue false
+     */
+    checkmark?: boolean;
+    /**
+     * Template to display when filtering does not return any results.
+     * @defaultValue No results found
+     */
+    emptyFilterMessage?: React.ReactNode | ((props: DropdownProps) => React.ReactNode) | undefined;
+    /**
+     * Text to display when there are no options available.
+     * @defaultValue No available options
+     */
+    emptyMessage?: React.ReactNode | ((props: DropdownProps) => React.ReactNode) | undefined;
+    /**
+     * When specified, displays an input field to filter the items on keyup.
+     * @defaultValue false
+     */
+    filter?: boolean;
+    /**
+     * Icon of the filter to search.
+     */
+    filterIcon?: IconType<DropdownProps> | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: 'label' | string | undefined;
+    /**
+     * Icon of the filter to clear.
+     */
+    filterClearIcon?: IconType<DropdownProps> | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
+    /**
+     * When the panel is opened, it specifies that the filter input should focus automatically.
+     * @defaultValue false
+     */
+    filterInputAutoFocus?: boolean;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
+     * @defaultValue contains
+     */
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * The template of filter element.
+     * @deprecated Since v9.3.0
+     */
+    filterTemplate?: React.ReactNode | ((options: { filterOptions: DropdownFilterOptions }) => React.ReactNode) | undefined;
+    /**
+     * Reference of the focusable input element.
+     */
+    focusInputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     * @defaultValue false
+     */
+    selectOnFocus?: boolean;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean;
+    /**
+     * Whether to focus on the first visible or selected element.
+     * @defaultValue false
+     */
+    autoOptionFocus?: boolean;
+    /**
+     * Identifier of the focusable input.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLSelectElement> | undefined;
+    /**
+     * The template of items.
+     */
+    itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode) | undefined;
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * The icon to show while indicating data load is in progress.
+     */
+    loadingIcon?: IconType<DropdownProps> | undefined;
+    /**
+     * Maximum number of characters to be typed on an editable input.
+     */
+    maxLength?: number | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     */
+    optionDisabled?: string | ((option: any) => boolean) | undefined;
+    /**
+     * Whether the option should be used as the value for the select element.
+     */
+    useOptionAsValue?: boolean;
+    /**
+     * Property name or getter function that refers to the children options of option group.
+     * @defaultValue items
+     */
+    optionGroupChildren?: string | undefined;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     */
+    optionGroupLabel?: string | undefined;
+    /**
+     * Template of an option group item.
+     */
+    optionGroupTemplate?: React.ReactNode | ((option: any, index: number) => React.ReactNode) | undefined;
+    /**
+     * Name of the label field of an option when arbitrary objects are used as options instead of SelectItems.
+     */
+    optionLabel?: string | undefined;
+    /**
+     * Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.
+     */
+    optionValue?: string | undefined;
+    /**
+     * An array of selectitems to display as the available options.
+     * @type {SelectItemOptionsType}
+     */
+    options?: SelectItemOptionsType | undefined;
+    /**
+     * Style class of the overlay panel element.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * Template of the panel footer.
+     */
+    panelFooterTemplate?: React.ReactNode | ((props: DropdownProps, hide: () => void) => React.ReactNode);
+    /**
+     * Inline style of the overlay panel element.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Default text to display when no option is selected.
+     */
+    placeholder?: string | undefined;
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean;
+    /**
+     * Clears the filter value when hiding the dropdown.
+     * @defaultValue false
+     */
+    resetFilterOnHide?: boolean;
+    /**
+     * Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 200px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean;
+    /**
+     * When enabled, a clear icon is displayed to clear the filtered value.
+     * @defaultValue false
+     */
+    showFilterClear?: boolean;
+    /**
+     * When enabled, overlay panel will be visible with input focus.
+     * @defaultValue false
+     */
+    showOnFocus?: boolean;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Value of the component.
+     */
+    value?: any;
+    /**
+     * The template of selected item.
+     */
+    valueTemplate?: React.ReactNode | ((option: any, props: DropdownProps) => React.ReactNode) | undefined;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     * @type {VirtualScrollerProps}
+     */
+    virtualScrollerOptions?: VirtualScrollerProps | undefined;
+    /**
+     * Callback to invoke on value change
+     * @param {DropdownChangeEvent} event - Custom change event
+     */
+    onChange?(event: DropdownChangeEvent): void;
+    /**
+     * Callback to invoke when the element receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when the element loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke to when a mouse button is pressed.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event
+     */
+    onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke on right-click.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event
+     */
+    onContextMenu?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when the overlay is shown.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when the overlay is hidden.
+     */
+    onHide?(): void;
+    /**
+     * Callback to invoke when the value is filtered.
+     * @param {DropdownFilterEvent} event - Custom filter event
+     */
+    onFilter?(event: DropdownFilterEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DropdownPassThroughOptions}
+     */
+    pt?: DropdownPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Dropdown**
+ *
+ * _Dropdown also known as Select, is used to choose an item from a collection of options._
+ *
+ * [Live Demo](https://www.primereact.org/dropdown/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Dropdown extends React.Component<DropdownProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Clear the currently selected value.
+     */
+    public clear(): void;
+    /**
+     * Show the dropdown overlay panel.
+     */
+    public show(): void;
+    /**
+     * Hide the dropdown overlay panel.
+     */
+    public hide(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+    /**
+     * Used to get focusable input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getFocusInput(): HTMLInputElement | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+    /**
+     * Used to get the options of inline virtualScroller component.
+     * @return {VirtualScroller | null} VirtualScroller component
+     */
+    public getVirtualScroller(): VirtualScroller | null;
+}
diff --git a/components/lib/dropdown/package.json b/components/lib/dropdown/package.json
new file mode 100644
index 0000000000..46bbfcfc86
--- /dev/null
+++ b/components/lib/dropdown/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./dropdown.cjs.js",
+    "module": "./dropdown.esm.js",
+    "unpkg": "./dropdown.min.js",
+    "types": "./dropdown.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/editor/Editor.js b/components/lib/editor/Editor.js
new file mode 100644
index 0000000000..01bf6d9740
--- /dev/null
+++ b/components/lib/editor/Editor.js
@@ -0,0 +1,276 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { DomHandler, classNames } from '../utils/Utils';
+import { EditorBase } from './EditorBase';
+import { useRef } from 'react';
+
+const QuillJS = (function () {
+    try {
+        return Quill;
+    } catch {
+        return null;
+    }
+})();
+
+export const Editor = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = EditorBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = EditorBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(EditorBase.css.styles, isUnstyled, { name: 'editor' });
+        const elementRef = React.useRef(null);
+        const contentRef = React.useRef(null);
+        const toolbarRef = React.useRef(null);
+        const quill = React.useRef(null);
+        const isQuillLoaded = React.useRef(false);
+
+        const [quillCreated, setQuillCreated] = React.useState(false);
+
+        useMountEffect(() => {
+            if (!isQuillLoaded.current) {
+                const configuration = {
+                    modules: {
+                        toolbar: props.showHeader ? toolbarRef.current : false,
+                        ...props.modules
+                    },
+                    placeholder: props.placeholder,
+                    readOnly: props.readOnly,
+                    theme: props.theme,
+                    formats: props.formats
+                };
+
+                if (QuillJS) {
+                    // GitHub #3097 loaded by script only
+                    initQuill(new Quill(contentRef.current, configuration));
+                } else {
+                    import('quill').then((module) => {
+                        if (module && DomHandler.isExist(contentRef.current)) {
+                            let quillInstance;
+
+                            if (module.default) {
+                                // webpack
+                                quillInstance = new module.default(contentRef.current, configuration);
+                            } else {
+                                // parceljs
+                                quillInstance = new module(contentRef.current, configuration);
+                            }
+
+                            initQuill(quillInstance);
+                        }
+                    });
+                }
+
+                isQuillLoaded.current = true;
+            }
+        });
+
+        const onTextChange = (delta, oldContents, source) => {
+            let firstChild = contentRef.current.children[0];
+            let html = firstChild ? firstChild.innerHTML : null;
+            let text = quill.current.getText();
+
+            if (html === '<p><br></p>') {
+                html = null;
+            }
+
+            // GitHub #2271 prevent infinite loop on clipboard paste of HTML
+            if (source === 'api') {
+                const htmlValue = contentRef.current.children[0];
+                const editorValue = document.createElement('div');
+
+                editorValue.innerHTML = props.value || '';
+
+                // this is necessary because Quill rearranged style elements
+                if (DomHandler.isEqualElement(htmlValue, editorValue)) {
+                    return;
+                }
+            }
+
+            if (props.maxLength) {
+                const length = quill.current.getLength();
+
+                if (length > props.maxLength) {
+                    quill.current.deleteText(props.maxLength, length);
+                }
+            }
+
+            if (props.onTextChange) {
+                props.onTextChange({
+                    htmlValue: html,
+                    textValue: text,
+                    delta: delta,
+                    source: source
+                });
+            }
+        };
+
+        const onSelectionChange = (range, oldRange, source) => {
+            if (props.onSelectionChange) {
+                props.onSelectionChange({
+                    range: range,
+                    oldRange: oldRange,
+                    source: source
+                });
+            }
+        };
+
+        const initValue = useRef(props.value);
+
+        initValue.current = props.value;
+
+        const initQuill = (quillInstance) => {
+            quill.current = quillInstance;
+
+            if (initValue.current) {
+                quillInstance.setContents(
+                    quillInstance.clipboard.convert({
+                        html: initValue.current,
+                        text: ''
+                    })
+                );
+            }
+
+            setQuillCreated(true);
+        };
+
+        useUpdateEffect(() => {
+            if (quillCreated) {
+                quill.current.on('text-change', onTextChange);
+                quill.current.on('selection-change', onSelectionChange);
+
+                return () => {
+                    quill.current.off('text-change', onTextChange);
+                    quill.current.off('selection-change', onSelectionChange);
+                };
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (quillCreated) {
+                if (quill.current && quill.current.getModule('toolbar')) {
+                    props.onLoad && props.onLoad(quill.current);
+                }
+            }
+        }, [quillCreated]);
+
+        useUpdateEffect(() => {
+            if (quill.current && !quill.current.hasFocus()) {
+                if (props.value) {
+                    quill.current.setContents(
+                        quill.current.clipboard.convert({
+                            html: props.value,
+                            text: ''
+                        })
+                    );
+                } else {
+                    quill.current.setText('');
+                }
+            }
+        }, [props.value]);
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getQuill: () => quill.current,
+            getElement: () => elementRef.current,
+            getContent: () => contentRef.current,
+            getToolbar: () => toolbarRef.current
+        }));
+
+        const createToolbarHeader = () => {
+            const toolbarProps = mergeProps(
+                {
+                    ref: toolbarRef,
+                    className: cx('toolbar')
+                },
+                ptm('toolbar')
+            );
+
+            if (props.showHeader === false) {
+                return null;
+            } else if (props.headerTemplate) {
+                return <div {...toolbarProps}>{props.headerTemplate}</div>;
+            }
+
+            const getMergeProps = (params, key) => mergeProps(params && { ...params }, ptm(key));
+
+            const formatsProps = mergeProps({ className: 'ql-formats' }, ptm('formats'));
+
+            return (
+                <div {...toolbarProps}>
+                    <span {...formatsProps}>
+                        <select {...getMergeProps({ className: 'ql-header', defaultValue: '0' }, 'header')}>
+                            <option {...getMergeProps({ value: '1' }, 'option')}>Heading</option>
+                            <option {...getMergeProps({ value: '2' }, 'option')}>Subheading</option>
+                            <option {...getMergeProps({ value: '0' }, 'option')}>Normal</option>
+                        </select>
+                        <select {...getMergeProps({ className: 'ql-font' }, 'font')}>
+                            <option {...getMergeProps(undefined, 'option')} />
+                            <option {...getMergeProps({ value: 'serif' }, 'option')} />
+                            <option {...getMergeProps({ value: 'monospace' }, 'option')} />
+                        </select>
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-bold', 'aria-label': 'Bold' }, 'bold')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-italic', 'aria-label': 'Italic' }, 'italic')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-underline', 'aria-label': 'Underline' }, 'underline')} />
+                    </span>
+                    <span {...formatsProps}>
+                        <select {...getMergeProps({ className: 'ql-color' }, 'color')} />
+                        <select {...getMergeProps({ className: 'ql-background' }, 'background')} />
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-list', value: 'ordered', 'aria-label': 'Ordered List' }, 'list')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-list', value: 'bullet', 'aria-label': 'Unordered List' }, 'list')} />
+                        <select {...getMergeProps({ className: 'ql-align' }, 'select')}>
+                            <option {...getMergeProps({ defaultValue: true }, 'option')} />
+                            <option {...getMergeProps({ value: 'center' }, 'option')} />
+                            <option {...getMergeProps({ value: 'right' }, 'option')} />
+                            <option {...getMergeProps({ value: 'justify' }, 'option')} />
+                        </select>
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-link', 'aria-label': 'Insert Link' }, 'link')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-image', 'aria-label': 'Insert Image' }, 'image')} />
+                        <button {...getMergeProps({ type: 'button', className: 'ql-code-block', 'aria-label': 'Insert Code Block' }, 'codeBlock')} />
+                    </span>
+                    <span {...formatsProps}>
+                        <button {...getMergeProps({ type: 'button', className: 'ql-clean', 'aria-label': 'Remove Styles' }, 'clean')} />
+                    </span>
+                </div>
+            );
+        };
+
+        const header = createToolbarHeader();
+        const contentProps = mergeProps(
+            {
+                ref: contentRef,
+                className: cx('content'),
+                style: props.style
+            },
+            ptm('content')
+        );
+        const content = <div {...contentProps} />;
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root'))
+            },
+            EditorBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {header}
+                {content}
+            </div>
+        );
+    })
+);
+
+Editor.displayName = 'Editor';
diff --git a/components/lib/editor/EditorBase.js b/components/lib/editor/EditorBase.js
new file mode 100644
index 0000000000..6bd3d1470b
--- /dev/null
+++ b/components/lib/editor/EditorBase.js
@@ -0,0 +1,1096 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) => classNames('', props.className),
+    toolbar: '',
+    content: ''
+};
+
+const styles = `
+/*!
+ * Quill Editor v2.0.2
+ * https://quilljs.com
+ * Copyright (c) 2017-2024, Slab
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container:not(.ql-disabled) li[data-list="checked"] > .ql-ui,
+.ql-container:not(.ql-disabled) li[data-list="unchecked"] > .ql-ui {
+  cursor: pointer;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
+    list-9;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+}
+@supports (counter-set: none) {
+  .ql-editor p,
+  .ql-editor h1,
+  .ql-editor h2,
+  .ql-editor h3,
+  .ql-editor h4,
+  .ql-editor h5,
+  .ql-editor h6 {
+    counter-set: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
+      list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor p,
+  .ql-editor h1,
+  .ql-editor h2,
+  .ql-editor h3,
+  .ql-editor h4,
+  .ql-editor h5,
+  .ql-editor h6 {
+    counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7
+      list-8 list-9;
+  }
+}
+.ql-editor table {
+  border-collapse: collapse;
+}
+.ql-editor td {
+  border: 1px solid #000;
+  padding: 2px 5px;
+}
+.ql-editor ol {
+  padding-left: 1.5em;
+}
+.ql-editor li {
+  list-style-type: none;
+  padding-left: 1.5em;
+  position: relative;
+}
+.ql-editor li > .ql-ui:before {
+  display: inline-block;
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+  white-space: nowrap;
+  width: 1.2em;
+}
+.ql-editor li[data-list="checked"] > .ql-ui,
+.ql-editor li[data-list="unchecked"] > .ql-ui {
+  color: #777;
+}
+.ql-editor li[data-list="bullet"] > .ql-ui:before {
+  content: "\\2022";
+}
+.ql-editor li[data-list="checked"] > .ql-ui:before {
+  content: "\\2611";
+}
+.ql-editor li[data-list="unchecked"] > .ql-ui:before {
+  content: "\\2610";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list] {
+    counter-set: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list] {
+    counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8
+      list-9;
+  }
+}
+.ql-editor li[data-list="ordered"] {
+  counter-increment: list-0;
+}
+.ql-editor li[data-list="ordered"] > .ql-ui:before {
+  content: counter(list-0, decimal) ". ";
+}
+.ql-editor li[data-list="ordered"].ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor li[data-list="ordered"].ql-indent-1 > .ql-ui:before {
+  content: counter(list-1, lower-alpha) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-1 {
+    counter-set: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-1 {
+    counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor li[data-list="ordered"].ql-indent-2 > .ql-ui:before {
+  content: counter(list-2, lower-roman) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-2 {
+    counter-set: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-2 {
+    counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor li[data-list="ordered"].ql-indent-3 > .ql-ui:before {
+  content: counter(list-3, decimal) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-3 {
+    counter-set: list-4 list-5 list-6 list-7 list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-3 {
+    counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor li[data-list="ordered"].ql-indent-4 > .ql-ui:before {
+  content: counter(list-4, lower-alpha) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-4 {
+    counter-set: list-5 list-6 list-7 list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-4 {
+    counter-reset: list-5 list-6 list-7 list-8 list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor li[data-list="ordered"].ql-indent-5 > .ql-ui:before {
+  content: counter(list-5, lower-roman) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-5 {
+    counter-set: list-6 list-7 list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-5 {
+    counter-reset: list-6 list-7 list-8 list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor li[data-list="ordered"].ql-indent-6 > .ql-ui:before {
+  content: counter(list-6, decimal) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-6 {
+    counter-set: list-7 list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-6 {
+    counter-reset: list-7 list-8 list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor li[data-list="ordered"].ql-indent-7 > .ql-ui:before {
+  content: counter(list-7, lower-alpha) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-7 {
+    counter-set: list-8 list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-7 {
+    counter-reset: list-8 list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor li[data-list="ordered"].ql-indent-8 > .ql-ui:before {
+  content: counter(list-8, lower-roman) ". ";
+}
+@supports (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-8 {
+    counter-set: list-9;
+  }
+}
+@supports not (counter-set: none) {
+  .ql-editor li[data-list].ql-indent-8 {
+    counter-reset: list-9;
+  }
+}
+.ql-editor li[data-list="ordered"].ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor li[data-list="ordered"].ql-indent-9 > .ql-ui:before {
+  content: counter(list-9, decimal) ". ";
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor li.ql-direction-rtl > .ql-ui:before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+  text-align: left;
+}
+.ql-editor table {
+  table-layout: fixed;
+  width: 100%;
+}
+.ql-editor table td {
+  outline: none;
+}
+.ql-editor .ql-code-block-container {
+  font-family: monospace;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+  font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor .ql-ui {
+  position: absolute;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0, 0, 0, 0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+  outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type="file"],
+.ql-snow .ql-toolbar input.ql-image[type="file"] {
+  display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #06c;
+}
+@media (pointer: coarse) {
+  .ql-snow.ql-toolbar button:hover:not(.ql-active),
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+    color: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #444;
+  }
+}
+.ql-snow {
+  box-sizing: border-box;
+}
+.ql-snow * {
+  box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+  display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+  visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+  position: absolute;
+  transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+  transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+.ql-snow .ql-stroke {
+  fill: none;
+  stroke: #444;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+  fill: none;
+  stroke: #444;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+  fill: #444;
+}
+.ql-snow .ql-empty {
+  fill: none;
+}
+.ql-snow .ql-even {
+  fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+  opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+  display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-snow .ql-editor h1 {
+  font-size: 2em;
+}
+.ql-snow .ql-editor h2 {
+  font-size: 1.5em;
+}
+.ql-snow .ql-editor h3 {
+  font-size: 1.17em;
+}
+.ql-snow .ql-editor h4 {
+  font-size: 1em;
+}
+.ql-snow .ql-editor h5 {
+  font-size: 0.83em;
+}
+.ql-snow .ql-editor h6 {
+  font-size: 0.67em;
+}
+.ql-snow .ql-editor a {
+  text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor .ql-code-block-container {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+.ql-snow .ql-editor .ql-code-block-container {
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+  font-size: 85%;
+  padding: 2px 4px;
+}
+.ql-snow .ql-editor .ql-code-block-container {
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-snow .ql-editor img {
+  max-width: 100%;
+}
+.ql-snow .ql-picker {
+  color: #444;
+  display: inline-block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+  background-color: #fff;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #ccc;
+  z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+  width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+  right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+  padding: 4px 0;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+  padding: 3px 5px;
+  width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0;
+  width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
+}
+.ql-snow
+  .ql-picker.ql-header
+  .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow
+  .ql-picker.ql-size
+  .ql-picker-label[data-label]:not([data-label=""])::before,
+.ql-snow
+  .ql-picker.ql-header
+  .ql-picker-item[data-label]:not([data-label=""])::before,
+.ql-snow
+  .ql-picker.ql-font
+  .ql-picker-item[data-label]:not([data-label=""])::before,
+.ql-snow
+  .ql-picker.ql-size
+  .ql-picker-item[data-label]:not([data-label=""])::before {
+  content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: "Normal";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: "Heading 1";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: "Heading 2";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: "Heading 3";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: "Heading 4";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: "Heading 5";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: "Heading 6";
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+  width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: "Sans Serif";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+  content: "Serif";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+  content: "Monospace";
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-snow .ql-picker.ql-size {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: "Normal";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+  content: "Small";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+  content: "Large";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+  content: "Huge";
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
+  font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
+  font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-code-block-container {
+  position: relative;
+}
+.ql-code-block-container .ql-ui {
+  right: 5px;
+  top: 5px;
+}
+.ql-toolbar.ql-snow {
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+  margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+  border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+  border: 1px solid transparent;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+  border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 0;
+}
+.ql-snow .ql-tooltip {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 5px #ddd;
+  color: #444;
+  padding: 5px 12px;
+  white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+  content: "Visit URL:";
+  line-height: 26px;
+  margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type="text"] {
+  display: none;
+  border: 1px solid #ccc;
+  font-size: 13px;
+  height: 26px;
+  margin: 0;
+  padding: 3px 5px;
+  width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+  display: inline-block;
+  max-width: 200px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+  border-right: 1px solid #ccc;
+  content: "Edit";
+  margin-left: 16px;
+  padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+  content: "Remove";
+  margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+  line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+  display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type="text"] {
+  display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0;
+  content: "Save";
+  padding-right: 0;
+}
+.ql-snow .ql-tooltip[data-mode="link"]::before {
+  content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode="formula"]::before {
+  content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode="video"]::before {
+  content: "Enter video:";
+}
+.ql-snow a {
+  color: #06c;
+}
+.ql-container.ql-snow {
+  border: 1px solid #ccc;
+}
+`;
+
+export const EditorBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Editor',
+        id: null,
+        value: null,
+        style: null,
+        className: null,
+        placeholder: null,
+        readOnly: false,
+        modules: null,
+        formats: null,
+        theme: 'snow',
+        showHeader: true,
+        headerTemplate: null,
+        onTextChange: null,
+        onSelectionChange: null,
+        onLoad: null,
+        maxLength: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/editor/editor.d.ts b/components/lib/editor/editor.d.ts
new file mode 100644
index 0000000000..307700c5d7
--- /dev/null
+++ b/components/lib/editor/editor.d.ts
@@ -0,0 +1,220 @@
+/**
+ *
+ * Editor is rich text editor component based on Quill.
+ *
+ * [Live Demo](https://www.primereact.org/editor/)
+ *
+ * @module editor
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type EditorPassThroughType<T> = PassThroughType<T, EditorPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface EditorPassThroughMethodOptions {
+    props: EditorProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link EditorProps.pt}
+ */
+export interface EditorPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: EditorPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the toolbar's DOM element.
+     */
+    toolbar?: EditorPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the formats's DOM element.
+     */
+    formats?: EditorPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the select's DOM element.
+     */
+    select?: EditorPassThroughType<React.HTMLAttributes<HTMLSelectElement>>;
+    /**
+     * Uses to pass attributes to the option's DOM element.
+     */
+    option?: EditorPassThroughType<React.HTMLAttributes<HTMLOptionElement>>;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: EditorPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: EditorPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom text change event
+ * @see {@link EditorProps.onTextChange}
+ * @event
+ */
+interface EditorTextChangeEvent {
+    /**
+     * Current value as html.
+     */
+    htmlValue: string | null;
+    /**
+     * Current value as text.
+     */
+    textValue: string;
+    /**
+     * Representation of the change.
+     */
+    delta: any;
+    /**
+     * Source of change. Will be either "user" or "api".
+     */
+    source: string;
+}
+
+/**
+ * Custom selection change event
+ * @see {@link EditorProps.onSelectionChange}
+ * @event
+ */
+interface EditorSelectionChangeEvent {
+    /**
+     * Object with index and length keys indicating where the selection exists
+     */
+    range: any;
+    /**
+     * Object with index and length keys indicating where the previous selection was.
+     */
+    oldRange: any;
+    /**
+     * Source of change. Will be either "user" or "api".
+     */
+    source: string;
+}
+
+/**
+ * Defines valid properties in Editor component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface EditorProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Value of the content.
+     */
+    value?: string | undefined;
+    /**
+     * Placeholder text to show when editor is empty.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Whether to instantiate the editor to read-only mode.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options.
+     */
+    modules?: any;
+    /**
+     * Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options.
+     */
+    formats?: string[] | undefined;
+    /**
+     * The theme of editor
+     */
+    theme?: string | undefined;
+    /**
+     * Whether to show the header of editor.
+     * @defaultValue true
+     */
+    showHeader?: boolean | undefined;
+    /**
+     * Style and modules of the toolbar.
+     */
+    headerTemplate?: React.ReactNode | undefined;
+    /**
+     * Callback to invoke when text of editor changes.
+     * @param {EditorTextChangeEvent} event - Custom text change event
+     */
+    onTextChange?(event: EditorTextChangeEvent): void;
+    /**
+     * Callback to invoke when selected text of editor changes.
+     * @param {EditorSelectionChangeEvent} event - Custom selection change event
+     */
+    onSelectionChange?(event: EditorSelectionChangeEvent): void;
+    /**
+     * Callback to invoke when the quill modules are loaded.
+     * @param {*} quill - Quill instance
+     */
+    onLoad?(quill: any): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {EditorPassThroughOptions}
+     */
+    pt?: EditorPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Editor**
+ *
+ * _Editor is rich text editor component based on Quill._
+ *
+ * [Live Demo](https://www.primereact.org/editor/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Editor extends React.Component<EditorProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get quill instance.
+     * @return {*} Quill Instance
+     */
+    public getQuill(): any;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get content element.
+     * @return {HTMLDivElement | null} Content element
+     */
+    public getContent(): HTMLDivElement | null;
+    /**
+     * Used to get toolbar element.
+     * @return {HTMLDivElement | null} Toolbar element
+     */
+    public getToolbar(): HTMLDivElement | null;
+}
diff --git a/components/lib/editor/package.json b/components/lib/editor/package.json
new file mode 100644
index 0000000000..15a7bedcc9
--- /dev/null
+++ b/components/lib/editor/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./editor.cjs.js",
+    "module": "./editor.esm.js",
+    "unpkg": "./editor.min.js",
+    "types": "./editor.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/fieldset/Fieldset.js b/components/lib/fieldset/Fieldset.js
new file mode 100644
index 0000000000..e0a1ba0524
--- /dev/null
+++ b/components/lib/fieldset/Fieldset.js
@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { MinusIcon } from '../icons/minus';
+import { PlusIcon } from '../icons/plus';
+import { Ripple } from '../ripple/Ripple';
+import { IconUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { FieldsetBase } from './FieldsetBase';
+
+export const Fieldset = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = FieldsetBase.getProps(inProps, context);
+    const [idState, setIdState] = React.useState(props.id);
+    const [collapsedState, setCollapsedState] = React.useState(props.collapsed);
+    const collapsed = props.toggleable ? (props.onToggle ? props.collapsed : collapsedState) : false;
+    const elementRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const headerId = idState + '_header';
+    const contentId = idState + '_content';
+
+    const { ptm, cx, isUnstyled } = FieldsetBase.setMetaData({
+        props,
+        state: {
+            id: idState,
+            collapsed: collapsed
+        }
+    });
+
+    useHandleStyle(FieldsetBase.css.styles, isUnstyled, { name: 'fieldset' });
+
+    const toggle = (event) => {
+        if (props.toggleable) {
+            collapsed ? expand(event) : collapse(event);
+
+            if (props.onToggle) {
+                props.onToggle({
+                    originalEvent: event,
+                    value: !collapsed
+                });
+            }
+        }
+
+        event.preventDefault();
+    };
+
+    const expand = (event) => {
+        if (!props.onToggle) {
+            setCollapsedState(false);
+        }
+
+        props.onExpand && props.onExpand(event);
+    };
+
+    const collapse = (event) => {
+        if (!props.onToggle) {
+            setCollapsedState(true);
+        }
+
+        props.onCollapse && props.onCollapse(event);
+    };
+
+    useMountEffect(() => {
+        if (!props.id) {
+            setIdState(UniqueComponentId());
+        }
+    });
+
+    const onKeyDown = (event) => {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
+            toggle(event);
+            event.preventDefault();
+        }
+    };
+
+    const createContent = () => {
+        const contentProps = mergeProps(
+            {
+                className: cx('content')
+            },
+            ptm('content')
+        );
+
+        const toggleableProps = mergeProps(
+            {
+                ref: contentRef,
+                id: contentId,
+                role: 'region',
+                'aria-labelledby': headerId,
+                className: cx('toggleableContent')
+            },
+            ptm('toggleableContent')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                timeout: { enter: 1000, exit: 450 },
+                in: !collapsed,
+                unmountOnExit: true,
+                options: props.transitionOptions
+            },
+            ptm('transition')
+        );
+
+        return (
+            <CSSTransition nodeRef={contentRef} {...transitionProps}>
+                <div {...toggleableProps}>
+                    <div {...contentProps}>{props.children}</div>
+                </div>
+            </CSSTransition>
+        );
+    };
+
+    const createToggleIcon = () => {
+        if (props.toggleable) {
+            const togglerIconProps = mergeProps(
+                {
+                    className: cx('togglericon')
+                },
+                ptm('togglericon')
+            );
+
+            const icon = collapsed ? props.expandIcon || <PlusIcon {...togglerIconProps} /> : props.collapseIcon || <MinusIcon {...togglerIconProps} />;
+            const toggleIcon = IconUtils.getJSXIcon(icon, togglerIconProps, { props });
+
+            return toggleIcon;
+        }
+
+        return null;
+    };
+
+    const createLegendContent = () => {
+        const legendTextProps = mergeProps(
+            {
+                className: cx('legendTitle')
+            },
+            ptm('legendTitle')
+        );
+
+        const togglerProps = mergeProps(
+            {
+                id: headerId,
+                role: 'button',
+                'aria-expanded': !collapsed,
+                'aria-controls': contentId,
+                onKeyDown,
+                onClick: toggle,
+                'aria-label': props.legend,
+                tabIndex: 0
+            },
+            ptm('toggler')
+        );
+
+        if (props.toggleable) {
+            const toggleIcon = createToggleIcon();
+
+            return (
+                <a {...togglerProps}>
+                    {toggleIcon}
+                    <span {...legendTextProps}>{props.legend}</span>
+                    <Ripple />
+                </a>
+            );
+        }
+
+        return (
+            <span {...legendTextProps} id={headerId}>
+                {props.legend}
+            </span>
+        );
+    };
+
+    const createLegend = () => {
+        const legendProps = mergeProps(
+            {
+                className: cx('legend')
+            },
+            ptm('legend')
+        );
+
+        if (props.legend != null || props.toggleable) {
+            const legendContent = createLegendContent();
+
+            return <legend {...legendProps}>{legendContent}</legend>;
+        }
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current,
+        getContent: () => contentRef.current
+    }));
+
+    const rootProps = mergeProps(
+        {
+            id: idState,
+            ref: elementRef,
+            style: props.style,
+            className: classNames(props.className, cx('root')),
+            onClick: props.onClick
+        },
+        FieldsetBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const legend = createLegend();
+    const content = createContent();
+
+    return (
+        <fieldset {...rootProps}>
+            {legend}
+            {content}
+        </fieldset>
+    );
+});
+
+Fieldset.displayName = 'Fieldset';
diff --git a/components/lib/fieldset/Fieldset.spec.js b/components/lib/fieldset/Fieldset.spec.js
new file mode 100644
index 0000000000..8bbf497f4c
--- /dev/null
+++ b/components/lib/fieldset/Fieldset.spec.js
@@ -0,0 +1,81 @@
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { snapshot } from '../../test';
+import { PrimeReactProvider } from '../api/Api';
+import { Fieldset } from './Fieldset';
+
+describe('Fieldset', () => {
+    snapshot(
+        <PrimeReactProvider>
+            <Fieldset />
+        </PrimeReactProvider>,
+        'default'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Fieldset id="fieldset" legend="Simple Fieldset">
+                Content
+            </Fieldset>
+        </PrimeReactProvider>,
+        'legend'
+    );
+    test('when Fieldset is toggleable it will toggle when clicked', async () => {
+        // Arrange
+        const toggleOn = jest.fn();
+        const { container } = render(
+            <PrimeReactProvider>
+                <Fieldset legend="Toggleable" toggleable onToggle={toggleOn}>
+                    <p>Lorem ipsum dolor sit amet</p>
+                </Fieldset>
+            </PrimeReactProvider>
+        );
+        const legend = container.querySelectorAll('[data-pc-section="toggler"]')[0];
+
+        expect(container).toMatchSnapshot('toggleable-open');
+
+        // Act
+        userEvent.click(legend);
+
+        // Assert
+        await waitFor(() => {
+            expect(toggleOn).toHaveBeenCalledTimes(1);
+            expect(container).toMatchSnapshot('toggleable-closed');
+        });
+    });
+    test('when Fieldset is toggleable it must expand and collapse', async () => {
+        // Arrange
+        const expandOn = jest.fn();
+        const collapseOn = jest.fn();
+        const { container } = render(
+            <PrimeReactProvider>
+                <Fieldset legend="Expand/Collapse" toggleable onExpand={expandOn} onCollapse={collapseOn}>
+                    <p>Lorem ipsum dolor sit amet</p>
+                </Fieldset>
+            </PrimeReactProvider>
+        );
+        const legend = container.querySelectorAll('[data-pc-section="toggler"]')[0];
+
+        expect(container).toMatchSnapshot('expandable-open');
+
+        // Act
+        userEvent.click(legend);
+
+        // Assert
+        await waitFor(() => {
+            expect(expandOn).toHaveBeenCalledTimes(0);
+            expect(collapseOn).toHaveBeenCalledTimes(1);
+            expect(container).toMatchSnapshot('expandable-closed');
+        });
+
+        // Act
+        userEvent.click(legend);
+
+        // Assert
+        await waitFor(() => {
+            expect(expandOn).toHaveBeenCalledTimes(1);
+            expect(collapseOn).toHaveBeenCalledTimes(1);
+            expect(container).toMatchSnapshot('expandable-open');
+        });
+    });
+});
diff --git a/components/lib/fieldset/FieldsetBase.js b/components/lib/fieldset/FieldsetBase.js
new file mode 100644
index 0000000000..112cb30402
--- /dev/null
+++ b/components/lib/fieldset/FieldsetBase.js
@@ -0,0 +1,58 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+export const FieldsetBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Fieldset',
+        id: null,
+        legend: null,
+        className: null,
+        style: null,
+        toggleable: null,
+        collapsed: null,
+        collapseIcon: null,
+        transitionOptions: null,
+        expandIcon: null,
+        onExpand: null,
+        onCollapse: null,
+        onToggle: null,
+        onClick: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) =>
+                classNames('p-fieldset p-component', {
+                    'p-fieldset-toggleable': props.toggleable
+                }),
+            toggleableContent: 'p-toggleable-content',
+            togglericon: 'p-fieldset-toggler',
+            legendTitle: 'p-fieldset-legend-text',
+            legend: 'p-fieldset-legend p-unselectable-text',
+            content: 'p-fieldset-content',
+            transition: 'p-toggleable-content'
+        },
+        styles: `
+        @layer primereact {
+            .p-fieldset-legend > a,
+            .p-fieldset-legend > span {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            
+            .p-fieldset-toggleable .p-fieldset-legend a {
+                cursor: pointer;
+                user-select: none;
+                overflow: hidden;
+                position: relative;
+                text-decoration: none;
+            }
+            
+            .p-fieldset-legend-text {
+                line-height: 1;
+            }
+        }
+        `
+    }
+});
diff --git a/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
new file mode 100644
index 0000000000..e94256c5f1
--- /dev/null
+++ b/components/lib/fieldset/__snapshots__/Fieldset.spec.js.snap
@@ -0,0 +1,378 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fieldset default 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_1"
+  >
+    <div
+      aria-labelledby="pr_id_1_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_1_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      />
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`Fieldset legend 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="fieldset"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <span
+        class="p-fieldset-legend-text"
+        data-pc-section="legendtitle"
+        id="fieldset_header"
+      >
+        Simple Fieldset
+      </span>
+    </legend>
+    <div
+      aria-labelledby="fieldset_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="fieldset_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        Content
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-closed 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_6"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_6_content"
+        aria-expanded="false"
+        aria-label="Expand/Collapse"
+        data-pc-section="toggler"
+        id="pr_id_6_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Expand/Collapse
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_6_header"
+      class="p-toggleable-content p-toggleable-content-exit p-toggleable-content-exit-active"
+      data-pc-section="toggleablecontent"
+      id="pr_id_6_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_6"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_6_content"
+        aria-expanded="true"
+        aria-label="Expand/Collapse"
+        data-pc-section="toggler"
+        id="pr_id_6_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Expand/Collapse
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_6_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_6_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`Fieldset when Fieldset is toggleable it must expand and collapse: expandable-open 2`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_6"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_6_content"
+        aria-expanded="true"
+        aria-label="Expand/Collapse"
+        data-pc-section="toggler"
+        id="pr_id_6_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Expand/Collapse
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_6_header"
+      class="p-toggleable-content p-toggleable-content-enter p-toggleable-content-enter-active"
+      data-pc-section="toggleablecontent"
+      id="pr_id_6_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-closed 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_3"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_3_content"
+        aria-expanded="true"
+        aria-label="Toggleable"
+        data-pc-section="toggler"
+        id="pr_id_3_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Toggleable
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_3_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_3_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
+
+exports[`Fieldset when Fieldset is toggleable it will toggle when clicked: toggleable-open 1`] = `
+<div>
+  <fieldset
+    class="p-fieldset p-component p-fieldset-toggleable"
+    data-pc-name="fieldset"
+    data-pc-section="root"
+    id="pr_id_3"
+  >
+    <legend
+      class="p-fieldset-legend p-unselectable-text"
+      data-pc-section="legend"
+    >
+      <a
+        aria-controls="pr_id_3_content"
+        aria-expanded="true"
+        aria-label="Toggleable"
+        data-pc-section="toggler"
+        id="pr_id_3_header"
+        role="button"
+        tabindex="0"
+      >
+        <svg
+          class="p-icon p-fieldset-toggler"
+          data-pc-section="togglericon"
+          fill="none"
+          height="14"
+          viewBox="0 0 14 14"
+          width="14"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="p-fieldset-legend-text"
+          data-pc-section="legendtitle"
+        >
+          Toggleable
+        </span>
+      </a>
+    </legend>
+    <div
+      aria-labelledby="pr_id_3_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_3_content"
+      role="region"
+    >
+      <div
+        class="p-fieldset-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </fieldset>
+</div>
+`;
diff --git a/components/lib/fieldset/fieldset.d.ts b/components/lib/fieldset/fieldset.d.ts
new file mode 100644
index 0000000000..dd1de804c8
--- /dev/null
+++ b/components/lib/fieldset/fieldset.d.ts
@@ -0,0 +1,210 @@
+/**
+ *
+ * Fieldset is an input component that provides real-time suggestions when being typed.
+ *
+ * [Live Demo](https://www.primereact.org/fieldset/)
+ *
+ * @module fieldset
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type FieldsetPassThroughType<T> = PassThroughType<T, FieldsetPassThroughMethodOptions>;
+export declare type FieldsetPassThroughTransitionType = ReactCSSTransitionProps | ((options: FieldsetPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FieldsetPassThroughMethodOptions {
+    props: FieldsetProps;
+    state: FieldsetState;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link FieldsetEmits.toggle}
+ */
+export interface FieldsetToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Collapsed state as a boolean
+     */
+    value: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FieldsetProps.pt}
+ */
+export interface FieldsetPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: FieldsetPassThroughType<React.HTMLAttributes<HTMLFieldSetElement>>;
+    /**
+     * Uses to pass attributes to the legend's DOM element.
+     */
+    legend?: FieldsetPassThroughType<React.HTMLAttributes<HTMLLegendElement>>;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: FieldsetPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the toggler icon's DOM element.
+     */
+    togglerIcon?: FieldsetPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the legend title's DOM element.
+     */
+    legendTitle?: FieldsetPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: FieldsetPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: FieldsetPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: FieldsetPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Fieldset component.
+ */
+export interface FieldsetState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    collapse: boolean;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link FieldsetProps.onToggle}
+ * @event
+ */
+interface FieldsetToggleEvent {
+    /**
+     * Browser mouse event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Collapsed state as a boolean.
+     */
+    value: boolean;
+}
+
+/**
+ * Defines valid properties in Fieldset component. In addition to these, all properties of HTMLFieldSetElement can be used in this component.
+ * @group Properties
+ */
+export interface FieldsetProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, 'ref'> {
+    /**
+     * Header text of the fieldset.
+     */
+    legend?: React.ReactNode | undefined;
+    /**
+     * When specified, content can toggled by clicking the legend.
+     * @defaultValue false
+     */
+    toggleable?: boolean | undefined;
+    /**
+     * Defines the default visibility state of the content.
+     * @defaultValue false
+     */
+    collapsed?: boolean | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: IconType<FieldsetProps> | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Icon of an collapsed tab.
+     */
+    expandIcon?: IconType<FieldsetProps> | undefined;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onExpand?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onCollapse?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {FieldsetToggleEvent} event - Custom toggle event.
+     */
+    onToggle?(event: FieldsetToggleEvent): void;
+    /**
+     * Callback to invoke when fieldset is clicked.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FieldsetPassThroughOptions}
+     */
+    pt?: FieldsetPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Fieldset**
+ *
+ * _Fieldset is an input component that provides real-time suggestions when being typed._
+ *
+ * [Live Demo](https://www.primereact.org/fieldset/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Fieldset extends React.Component<FieldsetProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLFieldSetElement | null} Container element
+     */
+    public getElement(): HTMLFieldSetElement | null;
+    /**
+     * Used to get the content element of the fieldset.
+     * @return {HTMLDivElement | null} Content element
+     */
+    public getContent(): HTMLDivElement | null;
+}
diff --git a/components/lib/fieldset/package.json b/components/lib/fieldset/package.json
new file mode 100644
index 0000000000..a2ec31e5a4
--- /dev/null
+++ b/components/lib/fieldset/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./fieldset.cjs.js",
+    "module": "./fieldset.esm.js",
+    "unpkg": "./fieldset.min.js",
+    "types": "./fieldset.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/fileupload/FileUpload.js b/components/lib/fileupload/FileUpload.js
new file mode 100644
index 0000000000..1eb97977af
--- /dev/null
+++ b/components/lib/fileupload/FileUpload.js
@@ -0,0 +1,761 @@
+import * as React from 'react';
+import { localeOption, PrimeReactContext } from '../api/Api';
+import { Badge } from '../badge/Badge';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { PlusIcon } from '../icons/plus';
+import { TimesIcon } from '../icons/times';
+import { UploadIcon } from '../icons/upload';
+import { Messages } from '../messages/Messages';
+import { ProgressBar } from '../progressbar/ProgressBar';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { FileUploadBase } from './FileUploadBase';
+
+export const FileUpload = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = FileUploadBase.getProps(inProps, context);
+        const [uploadedFilesState, setUploadedFilesState] = React.useState([]);
+        const [filesState, setFilesState] = React.useState([]);
+        const [progressState, setProgressState] = React.useState(0);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [uploadingState, setUploadingState] = React.useState(false);
+
+        const metaData = {
+            props,
+            state: {
+                progress: progressState,
+                uploading: uploadingState,
+                uploadedFiles: uploadedFilesState,
+                files: filesState,
+                focused: focusedState
+            }
+        };
+
+        const { ptm, cx, isUnstyled } = FileUploadBase.setMetaData(metaData);
+
+        useHandleStyle(FileUploadBase.css.styles, isUnstyled, { name: 'fileupload' });
+        const fileInputRef = React.useRef(null);
+        const messagesRef = React.useRef(null);
+        const contentRef = React.useRef(null);
+        const uploadedFileCount = React.useRef(0);
+        const hasFiles = ObjectUtils.isNotEmpty(filesState);
+        const hasUploadedFiles = ObjectUtils.isNotEmpty(uploadedFilesState);
+        const disabled = props.disabled || uploadingState;
+        const chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || localeOption('choose');
+        const uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || localeOption('upload');
+        const cancelButtonLabel = props.cancelLabel || props.cancelOptions.label || localeOption('cancel');
+        const chooseDisabled = disabled || (props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount);
+        const uploadDisabled = disabled || !hasFiles;
+        const cancelDisabled = disabled || !hasFiles;
+
+        const isImage = (file) => {
+            return /^image\//.test(file.type);
+        };
+
+        const remove = (event, index) => {
+            clearInput();
+            let currentFiles = [...filesState];
+            let removedFile = filesState[index];
+
+            currentFiles.splice(index, 1);
+            setFilesState(currentFiles);
+
+            if (props.onRemove) {
+                props.onRemove({
+                    originalEvent: event,
+                    file: removedFile
+                });
+            }
+        };
+
+        const removeUploadedFiles = (event, index) => {
+            clearInput();
+            let currentUploadedFiles = [...uploadedFilesState];
+            let removedFile = filesState[index];
+
+            currentUploadedFiles.splice(index, 1);
+            setUploadedFilesState(currentUploadedFiles);
+
+            if (props.onRemove) {
+                props.onRemove({
+                    originalEvent: event,
+                    file: removedFile
+                });
+            }
+        };
+
+        const clearInput = () => {
+            if (fileInputRef.current) {
+                fileInputRef.current.value = '';
+            }
+        };
+
+        const formatSize = (bytes) => {
+            const k = 1024;
+            const dm = 3;
+            const sizes = localeOption('fileSizeTypes');
+
+            if (bytes <= 0) {
+                return `0 ${sizes[0]}`;
+            }
+
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
+
+            return `${formattedSize} ${sizes[i]}`;
+        };
+
+        const onFileSelect = (event) => {
+            // give caller a chance to stop the selection
+            if (props.onBeforeSelect && props.onBeforeSelect({ originalEvent: event, files: filesState }) === false) {
+                return;
+            }
+
+            let currentFiles = [];
+
+            if (props.multiple) {
+                currentFiles = filesState ? [...filesState] : [];
+            }
+
+            let selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+
+            for (let i = 0; i < selectedFiles.length; i++) {
+                let file = selectedFiles[i];
+                const shouldAddFile = props.multiple ? !isFileSelected(file) && validate(file) : validate(file);
+
+                if (shouldAddFile) {
+                    file.objectURL = window.URL.createObjectURL(file);
+
+                    currentFiles.push(file);
+                }
+            }
+
+            setFilesState(currentFiles);
+
+            if (ObjectUtils.isNotEmpty(currentFiles) && props.auto) {
+                upload(currentFiles);
+            }
+
+            if (props.onSelect) {
+                props.onSelect({ originalEvent: event, files: currentFiles });
+            }
+
+            clearInput();
+
+            setFocusedState(false);
+
+            if (props.mode === 'basic' && currentFiles.length > 0) {
+                fileInputRef.current.style.display = 'none';
+            }
+        };
+
+        const isFileSelected = (file) => {
+            return filesState.some((f) => f.name + f.type + f.size === file.name + file.type + file.size);
+        };
+
+        const validate = (file) => {
+            if (props.maxFileSize && file.size > props.maxFileSize) {
+                const message = {
+                    severity: 'error',
+                    summary: props.invalidFileSizeMessageSummary.replace('{0}', file.name),
+                    detail: props.invalidFileSizeMessageDetail.replace('{0}', formatSize(props.maxFileSize)),
+                    sticky: true
+                };
+
+                if (props.mode === 'advanced') {
+                    messagesRef.current.show(message);
+                }
+
+                props.onValidationFail && props.onValidationFail(file);
+
+                return false;
+            }
+
+            return true;
+        };
+
+        const upload = (files) => {
+            files = files || filesState;
+
+            if (files && files.nativeEvent) {
+                files = filesState;
+            }
+
+            if (props.customUpload) {
+                if (props.fileLimit) {
+                    uploadedFileCount = uploadedFileCount + files.length;
+                }
+
+                if (props.uploadHandler) {
+                    props.uploadHandler({
+                        files,
+                        options: {
+                            clear,
+                            props
+                        }
+                    });
+                }
+            } else {
+                setUploadingState(true);
+                let xhr = new XMLHttpRequest();
+                let formData = new FormData();
+
+                if (props.onBeforeUpload) {
+                    props.onBeforeUpload({
+                        xhr: xhr,
+                        formData: formData
+                    });
+                }
+
+                for (let file of files) {
+                    formData.append(props.name, file, file.name);
+                }
+
+                xhr.upload.addEventListener('progress', (event) => {
+                    if (event.lengthComputable) {
+                        const progress = Math.round((event.loaded * 100) / event.total);
+
+                        setProgressState(progress);
+
+                        if (props.onProgress) {
+                            props.onProgress({
+                                originalEvent: event,
+                                progress
+                            });
+                        }
+                    }
+                });
+
+                xhr.onreadystatechange = () => {
+                    if (xhr.readyState === 4) {
+                        setProgressState(0);
+                        setUploadingState(false);
+
+                        if (xhr.status >= 200 && xhr.status < 300) {
+                            if (props.fileLimit) {
+                                uploadedFileCount = uploadedFileCount + files.length;
+                            }
+
+                            if (props.onUpload) {
+                                props.onUpload({
+                                    xhr,
+                                    files
+                                });
+                            }
+                        } else if (props.onError) {
+                            props.onError({
+                                xhr,
+                                files
+                            });
+                        }
+
+                        clear();
+                        setUploadedFilesState((prevUploadedFiles) => [...prevUploadedFiles, ...files]);
+                    }
+                };
+
+                xhr.open('POST', props.url, true);
+
+                if (props.onBeforeSend) {
+                    props.onBeforeSend({
+                        xhr: xhr,
+                        formData: formData
+                    });
+                }
+
+                xhr.withCredentials = props.withCredentials;
+                xhr.send(formData);
+            }
+        };
+
+        const clear = () => {
+            setFilesState([]);
+            setUploadedFilesState([]);
+            setUploadingState(false);
+            props.onClear && props.onClear();
+            clearInput();
+        };
+
+        const choose = () => {
+            fileInputRef.current.click();
+        };
+
+        const onFocus = () => {
+            setFocusedState(true);
+        };
+
+        const onBlur = () => {
+            setFocusedState(false);
+        };
+
+        const onKeyDown = (event) => {
+            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+                choose();
+            }
+        };
+
+        const onDragEnter = (event) => {
+            if (!disabled) {
+                event.dataTransfer.dropEffect = 'copy';
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+
+        const onDragOver = (event) => {
+            if (!disabled) {
+                event.dataTransfer.dropEffect = 'copy';
+                !isUnstyled() && DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
+                contentRef.current.setAttribute('data-p-highlight', true);
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        };
+
+        const onDragLeave = (event) => {
+            if (!disabled) {
+                event.dataTransfer.dropEffect = 'copy';
+                !isUnstyled() && DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
+                contentRef.current.setAttribute('data-p-highlight', false);
+            }
+        };
+
+        const onDrop = (event) => {
+            if (props.disabled) {
+                return;
+            }
+
+            !isUnstyled() && DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
+            contentRef.current.setAttribute('data-p-highlight', false);
+            event.stopPropagation();
+            event.preventDefault();
+
+            // give caller a chance to stop the drop
+            if (props.onBeforeDrop && props.onBeforeDrop(event) === false) {
+                return;
+            }
+
+            const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+            const allowDrop = props.multiple || (ObjectUtils.isEmpty(filesState) && files && files.length === 1);
+
+            allowDrop && onFileSelect(event);
+        };
+
+        const onSimpleUploaderClick = () => {
+            !disabled && hasFiles ? upload() : fileInputRef.current.click();
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            upload,
+            clear,
+            formatSize,
+            onFileSelect,
+            getInput: () => fileInputRef.current,
+            getContent: () => contentRef.current,
+            getFiles: () => filesState,
+            setFiles: (files) => setFilesState(files || []),
+            getUploadedFiles: () => uploadedFilesState,
+            setUploadedFiles: (files) => setUploadedFilesState(files || [])
+        }));
+
+        const createChooseButton = () => {
+            const { className, style, icon: _icon, iconOnly } = props.chooseOptions;
+            const chooseButtonLabelProps = mergeProps(
+                {
+                    className: cx('chooseButtonLabel')
+                },
+                ptm('chooseButtonLabel')
+            );
+            const label = iconOnly ? <span {...chooseButtonLabelProps} dangerouslySetInnerHTML={{ __html: '&nbsp;' }} /> : <span {...chooseButtonLabelProps}>{chooseButtonLabel}</span>;
+            const inputProps = mergeProps(
+                {
+                    ref: fileInputRef,
+                    type: 'file',
+                    onChange: (e) => onFileSelect(e),
+                    multiple: props.multiple,
+                    accept: props.accept,
+                    disabled: chooseDisabled
+                },
+                ptm('input')
+            );
+            const input = <input {...inputProps} />;
+            const chooseIconProps = mergeProps(
+                {
+                    className: cx('chooseIcon', { iconOnly }),
+                    'aria-hidden': 'true'
+                },
+                ptm('chooseIcon')
+            );
+            const icon = _icon || <PlusIcon {...chooseIconProps} />;
+            const chooseIcon = IconUtils.getJSXIcon(icon, { ...chooseIconProps }, { props });
+            const chooseButtonProps = mergeProps(
+                {
+                    className: classNames(className, cx('chooseButton', { iconOnly, disabled, className, focusedState })),
+                    style,
+                    onClick: choose,
+                    onKeyDown: (e) => onKeyDown(e),
+                    onFocus,
+                    onBlur,
+                    tabIndex: 0,
+                    'data-p-disabled': disabled,
+                    'data-p-focus': focusedState
+                },
+                ptm('chooseButton')
+            );
+
+            return (
+                <span {...chooseButtonProps}>
+                    {input}
+                    {chooseIcon}
+                    {label}
+                    <Ripple />
+                </span>
+            );
+        };
+
+        const onRemoveClick = (e, badgeOptions, index) => {
+            if (badgeOptions.severity === 'warning') {
+                remove(e, index);
+            } else {
+                removeUploadedFiles(e, index);
+            }
+        };
+
+        const createFile = (file, index, badgeOptions) => {
+            const key = file.name + file.type + file.size;
+            const thumbnailProps = mergeProps(
+                {
+                    role: 'presentation',
+                    className: cx('thumbnail'),
+                    src: file.objectURL,
+                    width: props.previewWidth
+                },
+                ptm('thumbnail')
+            );
+            const preview = isImage(file) ? <img {...thumbnailProps} alt={file.name} /> : null;
+            const detailsProps = mergeProps(ptm('details'));
+            const fileSizeProps = mergeProps(ptm('fileSize'));
+            const fileNameProps = mergeProps(
+                {
+                    className: cx('fileName')
+                },
+                ptm('fileName')
+            );
+            const actionsProps = mergeProps(ptm('actions'));
+            const fileName = <div {...fileNameProps}>{file.name}</div>;
+            const size = <div {...fileSizeProps}>{formatSize(file.size)}</div>;
+
+            const contentBody = (
+                <div {...detailsProps}>
+                    <div {...fileNameProps}> {file.name}</div>
+                    <span {...fileSizeProps}>{formatSize(file.size)}</span>
+                    <Badge className="p-fileupload-file-badge" value={badgeOptions.value} severity={badgeOptions.severity} pt={ptm('badge')} __parentMetadata={{ parent: metaData }} />
+                </div>
+            );
+            const removeButton = (
+                <div {...actionsProps}>
+                    <Button
+                        type="button"
+                        icon={props.removeIcon || <TimesIcon />}
+                        text
+                        rounded
+                        severity="danger"
+                        onClick={(e) => onRemoveClick(e, badgeOptions, index)}
+                        disabled={disabled}
+                        pt={ptm('removeButton')}
+                        __parentMetadata={{ parent: metaData }}
+                        unstyled={isUnstyled()}
+                    />
+                </div>
+            );
+            let content = (
+                <>
+                    {preview}
+                    {contentBody}
+                    {removeButton}
+                </>
+            );
+
+            if (props.itemTemplate) {
+                const defaultContentOptions = {
+                    onRemove: (event) => remove(event, index),
+                    previewElement: preview,
+                    fileNameElement: fileName,
+                    sizeElement: size,
+                    removeElement: removeButton,
+                    formatSize: formatSize(file.size),
+                    element: content,
+                    index: index,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(props.itemTemplate, file, defaultContentOptions);
+            }
+
+            const fileProps = mergeProps(
+                {
+                    key,
+                    className: cx('file')
+                },
+                ptm('file')
+            );
+
+            return <div {...fileProps}>{content}</div>;
+        };
+
+        const createFiles = () => {
+            const badgeOptions = {
+                severity: 'warning',
+                value: localeOption('pending') || 'Pending'
+            };
+            const content = filesState.map((file, index) => createFile(file, index, badgeOptions));
+
+            return <div>{content}</div>;
+        };
+
+        const createUploadedFiles = () => {
+            const badgeOptions = {
+                severity: 'success',
+                value: localeOption('completed') || 'Completed'
+            };
+            const content = uploadedFilesState && uploadedFilesState.map((file, index) => createFile(file, index, badgeOptions));
+
+            return <div>{content}</div>;
+        };
+
+        const createEmptyContent = () => {
+            return props.emptyTemplate && !hasFiles && !hasUploadedFiles ? ObjectUtils.getJSXElement(props.emptyTemplate, props) : null;
+        };
+
+        const createProgressBarContent = () => {
+            if (props.progressBarTemplate) {
+                const defaultProgressBarTemplateOptions = {
+                    progress: progressState,
+                    props
+                };
+
+                return ObjectUtils.getJSXElement(props.progressBarTemplate, defaultProgressBarTemplateOptions);
+            }
+
+            return <ProgressBar value={progressState} showValue={false} pt={ptm('progressbar')} __parentMetadata={{ parent: metaData }} />;
+        };
+
+        const createAdvanced = () => {
+            const chooseButton = createChooseButton();
+            const emptyContent = createEmptyContent();
+            let uploadButton;
+            let cancelButton;
+            let filesList;
+            let uplaodedFilesList;
+            let progressBar;
+
+            if (!props.auto) {
+                const uploadOptions = props.uploadOptions;
+                const cancelOptions = props.cancelOptions;
+                const uploadLabel = !uploadOptions.iconOnly ? uploadButtonLabel : '';
+                const cancelLabel = !cancelOptions.iconOnly ? cancelButtonLabel : '';
+                const uploadIconProps = mergeProps(
+                    {
+                        className: cx('uploadIcon', { iconOnly: uploadOptions.iconOnly }),
+                        'aria-hidden': 'true'
+                    },
+                    ptm('uploadIcon')
+                );
+                const uploadIcon = IconUtils.getJSXIcon(uploadOptions.icon || <UploadIcon {...uploadIconProps} />, { ...uploadIconProps }, { props });
+                const cancelIconProps = mergeProps(
+                    {
+                        className: cx('cancelIcon', { iconOnly: cancelOptions.iconOnly }),
+                        'aria-hidden': 'true'
+                    },
+                    ptm('cancelIcon')
+                );
+                const cancelIcon = IconUtils.getJSXIcon(cancelOptions.icon || <TimesIcon {...cancelIconProps} />, { ...cancelIconProps }, { props });
+
+                uploadButton = (
+                    <Button
+                        type="button"
+                        label={uploadLabel}
+                        aria-hidden="true"
+                        icon={uploadIcon}
+                        onClick={upload}
+                        disabled={uploadDisabled}
+                        style={uploadOptions.style}
+                        className={uploadOptions.className}
+                        pt={ptm('uploadButton')}
+                        __parentMetadata={{ parent: metaData }}
+                        unstyled={isUnstyled()}
+                    />
+                );
+                cancelButton = (
+                    <Button
+                        type="button"
+                        label={cancelLabel}
+                        aria-hidden="true"
+                        icon={cancelIcon}
+                        onClick={clear}
+                        disabled={cancelDisabled}
+                        style={cancelOptions.style}
+                        className={cancelOptions.className}
+                        pt={ptm('cancelButton')}
+                        __parentMetadata={{ parent: metaData }}
+                        unstyled={isUnstyled()}
+                    />
+                );
+            }
+
+            if (hasFiles) {
+                filesList = createFiles();
+                progressBar = createProgressBarContent();
+            }
+
+            if (hasUploadedFiles) {
+                uplaodedFilesList = createUploadedFiles();
+            }
+
+            const buttonbarProps = mergeProps(
+                {
+                    className: classNames(props.headerClassName, cx('buttonbar')),
+                    style: props.headerStyle
+                },
+                ptm('buttonbar')
+            );
+
+            let header = (
+                <div {...buttonbarProps}>
+                    {chooseButton}
+                    {uploadButton}
+                    {cancelButton}
+                </div>
+            );
+
+            if (props.headerTemplate) {
+                const defaultContentOptions = {
+                    className: classNames('p-fileupload-buttonbar', props.headerClassName),
+                    chooseButton,
+                    uploadButton,
+                    cancelButton,
+                    element: header,
+                    props
+                };
+
+                header = ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
+            }
+
+            const rootProps = mergeProps(
+                {
+                    id: props.id,
+                    className: classNames(props.className, cx('root')),
+                    style: props.style
+                },
+                FileUploadBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const contentProps = mergeProps(
+                {
+                    ref: contentRef,
+                    className: classNames(props.contentClassName, cx('content')),
+                    style: props.contentStyle,
+                    onDragEnter: (e) => onDragEnter(e),
+                    onDragOver: (e) => onDragOver(e),
+                    onDragLeave: (e) => onDragLeave(e),
+                    onDrop: (e) => onDrop(e),
+                    'data-p-highlight': false
+                },
+                ptm('content')
+            );
+
+            return (
+                <div {...rootProps}>
+                    {header}
+                    <div {...contentProps}>
+                        {progressBar}
+                        <Messages ref={messagesRef} __parentMetadata={{ parent: metaData }} />
+                        {hasFiles ? filesList : null}
+                        {hasUploadedFiles ? uplaodedFilesList : null}
+                        {emptyContent}
+                    </div>
+                </div>
+            );
+        };
+
+        const createBasic = () => {
+            const chooseOptions = props.chooseOptions;
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+            const chooseLabel = chooseOptions.iconOnly ? <span {...labelProps} dangerouslySetInnerHTML={{ __html: '&nbsp;' }} /> : <span {...labelProps}>{chooseButtonLabel}</span>;
+            const label = props.auto ? chooseLabel : <span {...labelProps}>{hasFiles ? props.selectedFileLabel || filesState[0].name : chooseLabel}</span>;
+            const chooseIconProps = mergeProps(
+                {
+                    className: cx('chooseIcon', { iconOnly: chooseOptions.iconOnly })
+                },
+                ptm('chooseIcon')
+            );
+            const icon = chooseOptions.icon ? chooseOptions.icon : !chooseOptions.icon && (!hasFiles || props.auto) ? <PlusIcon {...chooseIconProps} /> : !chooseOptions.icon && hasFiles && !props.auto && <UploadIcon {...chooseIconProps} />;
+            const chooseIcon = IconUtils.getJSXIcon(icon, { ...chooseIconProps }, { props, hasFiles });
+            const inputProps = mergeProps(
+                {
+                    ref: fileInputRef,
+                    type: 'file',
+                    onChange: (e) => onFileSelect(e),
+                    multiple: props.multiple,
+                    accept: props.accept,
+                    disabled: disabled
+                },
+                ptm('input')
+            );
+            const input = !hasFiles && <input {...inputProps} />;
+            const rootProps = mergeProps(
+                {
+                    className: classNames(props.className, cx('root')),
+                    style: props.style
+                },
+                FileUploadBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const basicButtonProps = mergeProps(
+                {
+                    className: classNames(chooseOptions.className, cx('basicButton', { hasFiles, disabled, focusedState })),
+                    style: chooseOptions.style,
+                    tabIndex: 0,
+                    onClick: onSimpleUploaderClick,
+                    onKeyDown: (e) => onKeyDown(e),
+                    onFocus,
+                    onBlur
+                },
+                FileUploadBase.getOtherProps(props),
+                ptm('basicButton')
+            );
+
+            return (
+                <div {...rootProps}>
+                    <Messages ref={messagesRef} pt={ptm('message')} __parentMetadata={{ parent: metaData }} />
+                    <span {...basicButtonProps}>
+                        {chooseIcon}
+                        {label}
+                        {input}
+                        <Ripple />
+                    </span>
+                </div>
+            );
+        };
+
+        if (props.mode === 'advanced') {
+            return createAdvanced();
+        } else if (props.mode === 'basic') {
+            return createBasic();
+        }
+    })
+);
+
+FileUpload.displayName = 'FileUpload';
diff --git a/components/lib/fileupload/FileUploadBase.js b/components/lib/fileupload/FileUploadBase.js
new file mode 100644
index 0000000000..800c902691
--- /dev/null
+++ b/components/lib/fileupload/FileUploadBase.js
@@ -0,0 +1,159 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) => classNames(`p-fileupload p-fileupload-${props.mode} p-component`),
+    buttonbar: 'p-fileupload-buttonbar',
+    content: 'p-fileupload-content',
+    chooseButton: ({ iconOnly, disabled, focusedState }) =>
+        classNames('p-button p-fileupload-choose p-component', {
+            'p-disabled': disabled,
+            'p-focus': focusedState,
+            'p-button-icon-only': iconOnly
+        }),
+    label: 'p-button-label p-clickable',
+    file: 'p-fileupload-row',
+    fileName: 'p-fileupload-filename',
+    thumbnail: 'p-fileupload-file-thumbnail',
+    chooseButtonLabel: 'p-button-label p-clickable',
+    basicButton: ({ disabled, focusedState, hasFiles }) => classNames('p-button p-component p-fileupload-choose', { 'p-fileupload-choose-selected': hasFiles, 'p-disabled': disabled, 'p-focus': focusedState }),
+    chooseIcon: ({ props, iconOnly }) => (props.mode === 'basic' ? classNames('p-button-icon', { 'p-button-icon-left': !iconOnly }) : classNames('p-button-icon p-clickable', { 'p-button-icon-left': !iconOnly })),
+    uploadIcon: ({ iconOnly }) => classNames('p-button-icon p-c', { 'p-button-icon-left': !iconOnly }),
+    cancelIcon: ({ iconOnly }) => classNames('p-button-icon p-c', { 'p-button-icon-left': !iconOnly })
+};
+
+const styles = `
+@layer primereact {
+    .p-fileupload-content {
+        position: relative;
+    }
+    
+    .p-fileupload-row {
+        display: flex;
+        align-items: center;
+    }
+    
+    .p-fileupload-row > div {
+        flex: 1 1 auto;
+        width: 25%;
+    }
+    
+    .p-fileupload-row > div:last-child {
+        text-align: right;
+    }
+    
+    .p-fileupload-content > .p-progressbar {
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    
+    .p-button.p-fileupload-choose {
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .p-fileupload-buttonbar {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    
+    .p-button.p-fileupload-choose input[type='file'] {
+        display: none;
+    }
+    
+    .p-fileupload-choose.p-fileupload-choose-selected input[type='file'] {
+        display: none;
+    }
+    
+    .p-fileupload-filename {
+        word-break: break-all;
+    }
+    
+    .p-fileupload-file-thumbnail {
+        flex-shrink: 0;
+    }
+    
+    .p-fileupload-file-badge {
+        margin: 0.5rem;
+    }
+    
+    .p-fluid .p-fileupload .p-button {
+        width: auto;
+    }
+}
+`;
+
+export const FileUploadBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'FileUpload',
+        id: null,
+        name: null,
+        url: null,
+        mode: 'advanced',
+        multiple: false,
+        accept: null,
+        removeIcon: null,
+        disabled: false,
+        auto: false,
+        maxFileSize: null,
+        invalidFileSizeMessageSummary: '{0}: Invalid file size, ',
+        invalidFileSizeMessageDetail: 'maximum upload size is {0}.',
+        style: null,
+        className: null,
+        withCredentials: false,
+        previewWidth: 50,
+        chooseLabel: null,
+        selectedFileLabel: null,
+        uploadLabel: null,
+        cancelLabel: null,
+        chooseOptions: {
+            label: null,
+            icon: null,
+            iconOnly: false,
+            className: null,
+            style: null
+        },
+        uploadOptions: {
+            label: null,
+            icon: null,
+            iconOnly: false,
+            className: null,
+            style: null
+        },
+        cancelOptions: {
+            label: null,
+            icon: null,
+            iconOnly: false,
+            className: null,
+            style: null
+        },
+        customUpload: false,
+        headerClassName: null,
+        headerStyle: null,
+        contentClassName: null,
+        contentStyle: null,
+        headerTemplate: null,
+        itemTemplate: null,
+        emptyTemplate: null,
+        progressBarTemplate: null,
+        onBeforeUpload: null,
+        onBeforeSend: null,
+        onBeforeDrop: null,
+        onBeforeSelect: null,
+        onUpload: null,
+        onError: null,
+        onClear: null,
+        onSelect: null,
+        onProgress: null,
+        onValidationFail: null,
+        uploadHandler: null,
+        onRemove: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/fileupload/fileupload.d.ts b/components/lib/fileupload/fileupload.d.ts
new file mode 100644
index 0000000000..9c7e5b44cd
--- /dev/null
+++ b/components/lib/fileupload/fileupload.d.ts
@@ -0,0 +1,706 @@
+/**
+ *
+ * FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+ *
+ * [Live Demo](https://www.primereact.org/fileupload)
+ *
+ * @module fileupload
+ *
+ */
+import * as React from 'react';
+import { BadgePassThroughOptions } from '../badge/badge';
+import { ButtonPassThroughOptions } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MessagePassThroughOptions } from '../message/message';
+import { PassThroughOptions } from '../passthrough';
+import { ProgressBarPassThroughOptions } from '../progressbar/progressbar';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type FileUploadPassThroughType<T> = PassThroughType<T, FileUploadPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FileUploadPassThroughMethodOptions {
+    props: FileUploadProps;
+    state: FileUploadState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FileUploadProps.pt}
+ */
+export interface FileUploadPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: FileUploadPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: FileUploadPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the buttonbar's DOM element.
+     */
+    buttonbar?: FileUploadPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the choose button's DOM element.
+     */
+    chooseButton?: FileUploadPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the choose icon's DOM element.
+     */
+    chooseIcon?: FileUploadPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the choose button label's DOM element.
+     */
+    chooseButtonLabel?: FileUploadPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the upload button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    uploadButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the cancel button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    cancelButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the cancel icon's DOM element.
+     */
+    cancelIcon?: FileUploadPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: FileUploadPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the progressbar's DOM element.
+     * @see {@link ProgressBarPassThroughOptions}
+     */
+    progressbar?: ProgressBarPassThroughOptions;
+    /**
+     * Uses to pass attributes to the messages' DOM element.
+     * @see {@link MessagePassThroughOptions}
+     */
+    message?: MessagePassThroughOptions;
+    /**
+     * Uses to pass attributes to the file's DOM element.
+     */
+    file?: FileUploadPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail's DOM element.
+     */
+    thumbnail?: FileUploadPassThroughType<React.ImgHTMLAttributes<HTMLImageElement>>;
+    /**
+     * Uses to pass attributes to the details's DOM element.
+     */
+    details?: FileUploadPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the fileName's DOM element.
+     */
+    fileName?: FileUploadPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the fileSize's DOM element.
+     */
+    fileSize?: FileUploadPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the badge's DOM element.
+     * @see {@link BadgePassThroughOptions}
+     */
+    badge?: BadgePassThroughOptions;
+    /**
+     * Uses to pass attributes to the actions's DOM element.
+     */
+    actions?: FileUploadPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the remove button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    removeButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: FileUploadPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the basic button's DOM element.
+     */
+    basicButton?: FileUploadPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the upload icon's DOM element.
+     */
+    uploadIcon?: FileUploadPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines a custom File type extended with objectURL
+ */
+type FileUploadFile = File & { objectURL: string };
+
+/**
+ * Defines current inline state in FileUpload component.
+ */
+export interface FileUploadState {
+    /**
+     * Current files.
+     */
+    files: FileUploadFile[];
+    /**
+     * Current uplaoding state as a boolean.
+     * @defaultValue false
+     */
+    uploading: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current progress state as a number.
+     * @defaultValue 0
+     */
+    progress: number;
+    /**
+     * Current uploaded files.
+     */
+    uploadedFiles: FileUploadFile[];
+}
+
+/**
+ * Custom file upload options
+ */
+interface FileUploadOptions {
+    /**
+     * Defines the text to display.
+     */
+    label?: string;
+    /**
+     * Defines the image to display.
+     */
+    icon?: IconType<FileUploadProps>;
+    /**
+     * Defines whether to display only the icon.
+     */
+    iconOnly?: boolean;
+    /**
+     * Style class of the component.
+     */
+    className?: string;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties;
+}
+
+/**
+ * Custom file upload header options
+ */
+interface FileUploadHeaderTemplateOptions {
+    /**
+     * The class name for the header element.
+     */
+    className: string;
+    /**
+     * The choose button element.
+     */
+    chooseButton: JSX.Element;
+    /**
+     * The upload button element.
+     */
+    uploadButton: JSX.Element;
+    /**
+     * The cancel button element.
+     */
+    cancelButton: JSX.Element;
+    /**
+     * The default element created by the component.
+     */
+    element: JSX.Element;
+    /**
+     * The props passed to the component.
+     * @type {FileUploadProps}
+     */
+    props: FileUploadProps;
+}
+
+/**
+ * Custom file upload progressbar template options
+ */
+interface FileUploadProgressBarTemplateOptions {
+    /**
+     * Current progress state as a number.
+     * @defaultValue 0
+     */
+    progress: number;
+    /**
+     * The props passed to the component.
+     * @type {FileUploadProps}
+     */
+    props: FileUploadProps;
+}
+
+/**
+ * Custom item template options
+ */
+interface ItemTemplateOptions {
+    /**
+     * Callback to invoke when a item template is removed.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    onRemove(event: React.SyntheticEvent): void;
+    /**
+     * Element to display preview of the file.
+     */
+    previewElement: JSX.Element;
+    /**
+     * Element to display the name of the file.
+     */
+    fileNameElement: JSX.Element;
+    /**
+     * Element to display the size of the file.
+     */
+    sizeElement: JSX.Element;
+    /**
+     * Element to display the remove button.
+     */
+    removeElement: JSX.Element;
+    /**
+     * Formatted string of the file size.
+     */
+    formatSize: string;
+    /**
+     * Array of files.
+     */
+    files: FileUploadFile[];
+    /**
+     * Index of the file.
+     */
+    index: number;
+    /**
+     * Default element created by the component.
+     */
+    element: JSX.Element;
+    /**
+     * All component props
+     * @type {FileUploadProps}
+     */
+    props: FileUploadProps;
+}
+
+/**
+ * Custom before upload event.
+ * @see {@link FileUploadProps.onBeforeUpload}
+ * @event
+ */
+interface FileUploadBeforeUploadEvent {
+    /**
+     * XmlHttpRequest instance.
+     */
+    xhr: XMLHttpRequest;
+    /**
+     * FormData object.
+     */
+    formData: FormData;
+}
+
+/**
+ * Custom before send event.
+ * @see {@link FileUploadProps.onBeforeSend}
+ * @extends {FileUploadBeforeUploadEvent}
+ * @event
+ */
+interface FileUploadBeforeSendEvent extends FileUploadBeforeUploadEvent {}
+
+/**
+ * Custom file upload event.
+ */
+interface FileUploadFilesEvent {
+    /**
+     * Uploaded files.
+     */
+    files: FileUploadFile[];
+}
+
+/**
+ * Custom upload event.
+ * @see {@link FileUploadProps.onUpload}
+ * @extends {FileUploadFilesEvent}
+ * @event
+ */
+interface FileUploadUploadEvent extends FileUploadFilesEvent {
+    /**
+     * XmlHttpRequest instance.
+     */
+    xhr: XMLHttpRequest;
+}
+
+/**
+ * Custom error event.
+ * @see {@link FileUploadProps.onError}
+ * @extends {FileUploadUploadEvent}
+ * @event
+ */
+interface FileUploadErrorEvent extends FileUploadUploadEvent {}
+
+/**
+ * Custom select event.
+ * @see {@link FileUploadProps.onSelect}, {@link FileUploadProps.onBeforeSelect}
+ * @extends {FileUploadFilesEvent}
+ * @event
+ */
+interface FileUploadSelectEvent extends FileUploadFilesEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.ChangeEvent<HTMLInputElement> | DragEvent;
+}
+
+/**
+ * Custom progress event.
+ * @see {@link FileUploadProps.onProgress}
+ * @event
+ */
+interface FileUploadProgressEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Calculated progress value.
+     */
+    progress: number;
+}
+
+/**
+ * Custom file upload handler options
+ */
+interface FileUploadHandlerOptions {
+    /**
+     * Clears the current files selected for upload.
+     */
+    clear(): void;
+    /**
+     * All component props
+     * @type {FileUploadProps}
+     */
+    props: FileUploadProps;
+}
+
+/**
+ * Custom uploadHandler event.
+ * @see {@link FileUploadProps.uploadHandler}
+ * @extends {FileUploadFilesEvent}
+ * @event
+ */
+interface FileUploadHandlerEvent extends FileUploadFilesEvent {
+    /**
+     * Handler options.
+     */
+    options: FileUploadHandlerOptions;
+}
+
+/**
+ * Custom remove event.
+ * @see {@link FileUploadProps.onRemove}
+ * @event
+ */
+interface FileUploadRemoveEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected file.
+     */
+    file: File;
+}
+
+/**
+ * Defines valid properties in FileUpload component.
+ * @group Properties
+ */
+interface FileUploadProps {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Name of the request parameter to identify the files at backend.
+     */
+    name?: string | undefined;
+    /**
+     * Remote url to upload the files.
+     */
+    url?: string | undefined;
+    /**
+     * Defines the UI of the component, possible values are "advanced" and "basic".
+     * @defaultValue advanced
+     */
+    mode?: 'basic' | 'advanced' | undefined;
+    /**
+     * Used to select multiple files at once from file dialog.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Pattern to restrict the allowed file types such as "image/*".
+     * @defaultValue false
+     */
+    accept?: string | undefined;
+    /**
+     * Icon of the remove element.
+     */
+    removeIcon?: IconType<FileUploadProps> | undefined;
+    /**
+     * Disables the upload functionality.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When enabled, upload begins automatically after selection is completed.
+     * @defaultValue false
+     */
+    auto?: boolean | undefined;
+    /**
+     * Maximum file size allowed in bytes.
+     */
+    maxFileSize?: number | undefined;
+    /**
+     * Summary message of the invalid fize size.
+     * @defaultValue Invalid file size
+     */
+    invalidFileSizeMessageSummary?: string | undefined;
+    /**
+     * Detail message of the invalid fize size.
+     * @defaultValue "Maximum upload size is."
+     */
+    invalidFileSizeMessageDetail?: string | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.
+     * @defaultValue false
+     */
+    withCredentials?: boolean | undefined;
+    /**
+     * Width of the image thumbnail in pixels.
+     * @defaultValue 50
+     */
+    previewWidth?: number | undefined;
+    /**
+     * Label of the choose button. Defaults to global value in Locale configuration.
+     */
+    chooseLabel?: string | undefined;
+    /**
+     * Label of the choose button after a file is selected.
+     */
+    selectedFileLabel?: string | undefined;
+    /**
+     * Label of the upload button. Defaults to global value in Locale configuration.
+     */
+    uploadLabel?: string | undefined;
+    /**
+     * Label of the cancel button. Defaults to global value in Locale configuration.
+     */
+    cancelLabel?: string | undefined;
+    /**
+     * Options used to customize the choose button. These options have "label", "icon", "className" and "style" properties.
+     */
+    chooseOptions?: FileUploadOptions | undefined;
+    /**
+     * Options used to customize the upload button. These options have "label", "icon", "className" and "style" properties.
+     */
+    uploadOptions?: FileUploadOptions | undefined;
+    /**
+     * Options used to customize the cancel button. These options have "label", "icon", "className" and "style" properties.
+     */
+    cancelOptions?: FileUploadOptions | undefined;
+    /**
+     * Whether to use the default upload or a manual implementation defined in uploadHandler callback.
+     * @defaultValue false
+     */
+    customUpload?: boolean | undefined;
+    /**
+     * Custom template of the header.
+     */
+    headerClassName?: string | undefined;
+    /**
+     * Inline style of the header.
+     */
+    headerStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the content.
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Inline style of the content.
+     */
+    contentStyle?: React.CSSProperties | undefined;
+    /**
+     * Custom template of the header.
+     */
+    headerTemplate?: React.ReactNode | ((options: FileUploadHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Custom template of each item content in the container.
+     */
+    itemTemplate?: React.ReactNode | ((file: object, options: ItemTemplateOptions) => React.ReactNode);
+    /**
+     * Custom template of empty content in the container.
+     */
+    emptyTemplate?: React.ReactNode | ((props: FileUploadProps) => React.ReactNode);
+    /**
+     * Custom template of progressBar content in the container.
+     */
+    progressBarTemplate?: React.ReactNode | ((options: FileUploadProgressBarTemplateOptions) => React.ReactNode);
+    /**
+     * Callback to invoke before file upload begins to customize the request such as post parameters before the files.
+     * @param {FileUploadBeforeUploadEvent} event - Custom beforeUpload.
+     */
+    onBeforeUpload?(event: FileUploadBeforeUploadEvent): void;
+    /**
+     * Callback to invoke before file send begins to customize the request such as adding headers.
+     * @param {FileUploadBeforeSendEvent} event - Browser event.
+     */
+    onBeforeSend?(event: FileUploadBeforeSendEvent): void;
+    /**
+     * Callback to invoke before files dropped. Return false from callback to prevent drop.
+     * @param {DragEvent} event - DragEvent instance.
+     */
+    onBeforeDrop?(event: DragEvent): void;
+    /**
+     * Callback to invoke before files are selected. Return false from callback to prevent selection.
+     * @param {FileUploadSelectEvent} event - Custom select event.
+     */
+    onBeforeSelect?(event: FileUploadSelectEvent): void;
+    /**
+     * Callback to invoke when file upload is complete.
+     * @param {FileUploadUploadEvent} event - Custom upload event.
+     */
+    onUpload?(event: FileUploadUploadEvent): void;
+    /**
+     * Callback to invoke if file upload fails.
+     * @param {FileUploadErrorEvent} event - Custom error event.
+     */
+    onError?(event: FileUploadErrorEvent): void;
+    /**
+     * Callback to invoke when files in queue are removed without uploading.
+     */
+    onClear?(): void;
+    /**
+     * Callback to invoke when files are selected.
+     * @param {FileUploadSelectEvent} event - Custom select event.
+     */
+    onSelect?(event: FileUploadSelectEvent): void;
+    /**
+     * Callback to invoke when files are being uploaded.
+     * @param {FileUploadProgressEvent} event - Custom progress event.
+     */
+    onProgress?(event: FileUploadProgressEvent): void;
+    /**
+     * Callback to invoke when a validation file fails.
+     * @param {File} file - Invalid file.
+     */
+    onValidationFail?(file: File): void;
+    /**
+     * Callback to invoke in custom upload mode to upload the files manually.
+     * @param {FileUploadHandlerEvent} event - Custom uploadHandler event
+     */
+    uploadHandler?(event: FileUploadHandlerEvent): void;
+    /**
+     * Callback to invoke when a file is removed without uploading using clear button of a file.
+     * @param {FileUploadRemoveEvent} event - Custom remove event.
+     */
+    onRemove?(event: FileUploadRemoveEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FileUploadPassThroughOptions}
+     */
+    pt?: FileUploadPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - FileUpload**
+ *
+ * _FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations._
+ *
+ * [Live Demo](https://www.primereact.org/fileupload/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class FileUpload extends React.Component<FileUploadProps, any> {
+    /**
+     * Uploads the selected files.
+     */
+    public upload(): void;
+    /**
+     * Clears the files list.
+     */
+    public clear(): void;
+    /**
+     * Formats the number of bytes.
+     * @param {number} bytes - Custom size event.
+     */
+    public formatSize(bytes: number): number;
+    /**
+     * Handles file selection event and updates.
+     * @param {FileUploadSelectEvent} event - Custom select event.
+     */
+    public onFileSelect(event: FileUploadSelectEvent): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLElement | null} Container element
+     */
+    public getElement(): HTMLElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+    /**
+     * Gets the current files list.
+     * @return {FileUploadFile[]} Current files.
+     */
+    public getFiles(): FileUploadFile[];
+    /**
+     * Sets the current files list.
+     * @param {FileUploadFile[]} files - Current files.
+     */
+    public setFiles(files: FileUploadFile[]): void;
+    /**
+     * Gets the current uploaded files list.
+     * @return {FileUploadFile[]} Current uploaded files.
+     */
+    public getUploadedFiles(): FileUploadFile[];
+    /**
+     * Sets the current uploaded files list.
+     * @param {FileUploadFile[]} files - Current uploaded files.
+     */
+    public setUploadedFiles(files: FileUploadFile[]): void;
+}
diff --git a/components/lib/fileupload/package.json b/components/lib/fileupload/package.json
new file mode 100644
index 0000000000..2a6a73cf57
--- /dev/null
+++ b/components/lib/fileupload/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./fileupload.cjs.js",
+    "module": "./fileupload.esm.js",
+    "unpkg": "./fileupload.min.js",
+    "types": "./fileupload.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/floatlabel/FloatLabel.js b/components/lib/floatlabel/FloatLabel.js
new file mode 100644
index 0000000000..4263c11725
--- /dev/null
+++ b/components/lib/floatlabel/FloatLabel.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames, ObjectUtils } from '../utils/Utils';
+import { FloatLabelBase } from './FloatLabelBase';
+
+export const FloatLabel = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = FloatLabelBase.getProps(inProps, context);
+        const elementRef = React.useRef(ref);
+        const { ptm, cx, isUnstyled } = FloatLabelBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(FloatLabelBase.css.styles, isUnstyled, { name: 'floatlabel' });
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(cx('root'))
+            },
+            FloatLabelBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <span {...rootProps}>{props.children}</span>;
+    })
+);
+
+FloatLabel.displayName = 'FloatLabel';
diff --git a/components/lib/floatlabel/FloatLabelBase.js b/components/lib/floatlabel/FloatLabelBase.js
new file mode 100644
index 0000000000..8bc1cf05d4
--- /dev/null
+++ b/components/lib/floatlabel/FloatLabelBase.js
@@ -0,0 +1,65 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-float-label'
+};
+
+const styles = `
+@layer primereact {
+    .p-float-label {
+        display: block;
+        position: relative;
+    }
+    
+    .p-float-label label {
+        position: absolute;
+        pointer-events: none;
+        top: 50%;
+        margin-top: -.5rem;
+        transition-property: all;
+        transition-timing-function: ease;
+        line-height: 1;
+    }
+    
+    .p-float-label:has(textarea) label {
+        top: 1rem;
+    }
+    
+    .p-float-label:has(input:focus) label,
+    .p-float-label:has(input.p-filled) label,
+    .p-float-label:has(input:-webkit-autofill) label,
+    .p-float-label:has(textarea:focus) label,
+    .p-float-label:has(textarea.p-filled) label,
+    .p-float-label:has(.p-inputwrapper-focus) label,
+    .p-float-label:has(.p-inputwrapper-filled) label {
+        top: -.75rem;
+        font-size: 12px;
+    }
+    
+    .p-float-label .p-placeholder,
+    .p-float-label input::placeholder,
+    .p-float-label .p-inputtext::placeholder {
+        opacity: 0;
+        transition-property: all;
+        transition-timing-function: ease;
+    }
+    
+    .p-float-label .p-focus .p-placeholder,
+    .p-float-label input:focus::placeholder,
+    .p-float-label .p-inputtext:focus::placeholder {
+        opacity: 1;
+        transition-property: all;
+        transition-timing-function: ease;
+    }
+}`;
+
+export const FloatLabelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'FloatLabel',
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/floatlabel/floatlabel.d.ts b/components/lib/floatlabel/floatlabel.d.ts
new file mode 100644
index 0000000000..2ce7574e9d
--- /dev/null
+++ b/components/lib/floatlabel/floatlabel.d.ts
@@ -0,0 +1,86 @@
+/**
+ *
+ * FloatLabel appears on top of the input field when focused.
+ *
+ * [Live Demo](https://www.primereact.org/floatlabel/)
+ *
+ * @module floatlabel
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type FloatLabelPassThroughType<T> = PassThroughType<T, FloatLabelPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FloatLabelPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: FloatLabelProps;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FloatLabelProps.pt}
+ */
+export interface FloatLabelPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: FloatLabelPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in FloatLabel component.
+ * @group Properties
+ */
+export interface FloatLabelProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode[] | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {FloatLabelPassThroughOptions}
+     */
+    pt?: FloatLabelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - FloatLabel**
+ *
+ * _FloatLabel appears on top of the input field when focused._
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+export declare const FloatLabel: React.ForwardRefExoticComponent<FloatLabelProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
diff --git a/components/lib/floatlabel/package.json b/components/lib/floatlabel/package.json
new file mode 100644
index 0000000000..2dc676763c
--- /dev/null
+++ b/components/lib/floatlabel/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./floatlabel.cjs.js",
+    "module": "./floatlabel.esm.js",
+    "unpkg": "./floatlabel.min.js",
+    "types": "./floatlabel.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/focustrap/FocusTrap.js b/components/lib/focustrap/FocusTrap.js
new file mode 100644
index 0000000000..4f3f85d342
--- /dev/null
+++ b/components/lib/focustrap/FocusTrap.js
@@ -0,0 +1,128 @@
+import React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useMountEffect, useStyle } from '../hooks/Hooks';
+import { DomHandler } from '../utils/Utils';
+import { FocusTrapBase } from './FocusTrapBase';
+
+export const FocusTrap = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const targetRef = React.useRef(null);
+        const firstFocusableElementRef = React.useRef(null);
+        const lastFocusableElementRef = React.useRef(null);
+        const context = React.useContext(PrimeReactContext);
+        const props = FocusTrapBase.getProps(inProps, context);
+
+        const metaData = {
+            props
+        };
+
+        useStyle(FocusTrapBase.css.styles, { name: 'focustrap' });
+
+        const { ptm } = FocusTrapBase.setMetaData({
+            ...metaData
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getInk: () => firstFocusableElementRef.current,
+            getTarget: () => targetRef.current
+        }));
+
+        useMountEffect(() => {
+            if (!props.disabled) {
+                targetRef.current = getTarget();
+                setAutoFocus(targetRef.current, props);
+            }
+        });
+
+        const getTarget = () => {
+            return firstFocusableElementRef.current && firstFocusableElementRef.current.parentElement;
+        };
+
+        /**
+         * This method sets the auto focus on the first focusable element within the target element.
+         * It first tries to find a focusable element using the autoFocusSelector. If no such element is found,
+         * it then tries to find a focusable element using the firstFocusableSelector.
+         * If the autoFocus prop is set to true and a focusable element is found, it sets the focus on that element.
+         *
+         * @param {HTMLElement} target - The target element within which to find a focusable element.
+         */
+        const setAutoFocus = (target) => {
+            const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = props || {};
+            const defaultAutoFocusSelector = `${getComputedSelector(autoFocusSelector)}`;
+            const computedAutoFocusSelector = `[autofocus]${defaultAutoFocusSelector}, [data-pc-autofocus='true']${defaultAutoFocusSelector}`;
+
+            let focusableElement = DomHandler.getFirstFocusableElement(target, computedAutoFocusSelector);
+
+            autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(target, getComputedSelector(firstFocusableSelector)));
+
+            DomHandler.focus(focusableElement);
+        };
+
+        const getComputedSelector = (selector) => {
+            return `:not(.p-hidden-focusable):not([data-p-hidden-focusable="true"])${selector ?? ''}`;
+        };
+
+        const onFirstHiddenElementFocus = (event) => {
+            const { currentTarget, relatedTarget } = event;
+
+            const focusableElement =
+                relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement || !targetRef.current?.contains(relatedTarget)
+                    ? DomHandler.getFirstFocusableElement(currentTarget.parentElement, getComputedSelector(currentTarget.$_pfocustrap_focusableselector))
+                    : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
+
+            DomHandler.focus(focusableElement);
+        };
+
+        const onLastHiddenElementFocus = (event) => {
+            const { currentTarget, relatedTarget } = event;
+
+            const focusableElement =
+                relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement || !targetRef.current?.contains(relatedTarget)
+                    ? DomHandler.getLastFocusableElement(currentTarget.parentElement, getComputedSelector(currentTarget.$_pfocustrap_focusableselector))
+                    : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
+
+            DomHandler.focus(focusableElement);
+        };
+
+        const createHiddenFocusableElements = () => {
+            const { tabIndex = 0 } = props || {};
+
+            const createFocusableElement = (inRef, onFocus, section) => {
+                return (
+                    <span
+                        ref={inRef}
+                        className={'p-hidden-accessible p-hidden-focusable'}
+                        tabIndex={tabIndex}
+                        role={'presentation'}
+                        aria-hidden={true}
+                        data-p-hidden-accessible={true}
+                        data-p-hidden-focusable={true}
+                        onFocus={onFocus}
+                        data-pc-section={section}
+                    />
+                );
+            };
+
+            const firstFocusableElement = createFocusableElement(firstFocusableElementRef, onFirstHiddenElementFocus, 'firstfocusableelement');
+            const lastFocusableElement = createFocusableElement(lastFocusableElementRef, onLastHiddenElementFocus, 'lastfocusableelement');
+
+            if (firstFocusableElementRef.current && lastFocusableElementRef.current) {
+                firstFocusableElementRef.current.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElementRef.current;
+                lastFocusableElementRef.current.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElementRef.current;
+            }
+
+            return (
+                <>
+                    {firstFocusableElement}
+                    {props.children}
+                    {lastFocusableElement}
+                </>
+            );
+        };
+
+        return createHiddenFocusableElements();
+    })
+);
+
+export default FocusTrap;
diff --git a/components/lib/focustrap/FocusTrapBase.js b/components/lib/focustrap/FocusTrapBase.js
new file mode 100644
index 0000000000..03c6c52db0
--- /dev/null
+++ b/components/lib/focustrap/FocusTrapBase.js
@@ -0,0 +1,16 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils } from '../utils/Utils';
+
+const styles = '';
+
+export const FocusTrapBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'FocusTrap',
+        children: undefined
+    },
+    css: {
+        styles
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, FocusTrapBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, FocusTrapBase.defaultProps)
+});
diff --git a/components/lib/focustrap/package.json b/components/lib/focustrap/package.json
new file mode 100644
index 0000000000..20440cfa3e
--- /dev/null
+++ b/components/lib/focustrap/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./focustrap.cjs.js",
+    "module": "./focustrap.esm.js",
+    "unpkg": "./focustrap.min.js",
+    "types": "./focustrap.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
new file mode 100644
index 0000000000..086cddc9c1
--- /dev/null
+++ b/components/lib/galleria/Galleria.js
@@ -0,0 +1,348 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useInterval, useMergeProps, useUnmountEffect, ESC_KEY_HANDLING_PRIORITIES, useGlobalOnEscapeKey } from '../hooks/Hooks';
+import { TimesIcon } from '../icons/times';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { GalleriaBase } from './GalleriaBase';
+import { GalleriaItem } from './GalleriaItem';
+import { GalleriaThumbnails } from './GalleriaThumbnails';
+
+export const Galleria = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = GalleriaBase.getProps(inProps, context);
+
+        const [visibleState, setVisibleState] = React.useState(false);
+        const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible);
+        const [slideShowActiveState, setSlideShowActiveState] = React.useState(false);
+        const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
+        const elementRef = React.useRef(null);
+        const previewContentRef = React.useRef(null);
+        const maskRef = React.useRef(null);
+        const activeItemIndex = props.onItemChange ? props.activeIndex : activeIndexState;
+        const isVertical = props.thumbnailsPosition === 'left' || props.thumbnailsPosition === 'right';
+        const id = props.id || UniqueComponentId();
+
+        const { ptm, cx, sx, isUnstyled } = GalleriaBase.setMetaData({
+            props,
+            state: {
+                visible: visibleState,
+                numVisible: numVisibleState,
+                slideShowActive: slideShowActiveState,
+                activeIndex: activeIndexState
+            }
+        });
+
+        useHandleStyle(GalleriaBase.css.styles, isUnstyled, { name: 'galleria' });
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: props.closeOnEscape && props.fullScreen,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.IMAGE, 0]
+        });
+
+        useInterval(
+            () => {
+                onActiveItemChange({ index: props.circular && props.value.length - 1 === activeItemIndex ? 0 : activeItemIndex + 1 });
+            },
+            props.transitionInterval,
+            slideShowActiveState
+        );
+
+        const onActiveItemChange = (event) => {
+            if (event.index >= props.value.length) {
+                // #3973 AutoPlay without circular should stop the slideshow when it reaches the end
+                stopSlideShow();
+
+                return;
+            }
+
+            if (props.onItemChange) {
+                props.onItemChange(event);
+            } else {
+                setActiveIndexState(event.index);
+            }
+        };
+
+        const show = () => {
+            setVisibleState(true);
+        };
+
+        const hide = () => {
+            setVisibleState(false);
+        };
+
+        const onEnter = () => {
+            DomHandler.blockBodyScroll();
+        };
+
+        const onEntering = () => {
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
+            !isUnstyled() && DomHandler.addMultipleClasses(maskRef.current, 'p-component-overlay p-component-overlay-enter');
+        };
+
+        const onEntered = () => {
+            props.onShow && props.onShow();
+        };
+
+        const onExit = () => {
+            DomHandler.unblockBodyScroll();
+            !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(maskRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const isAutoPlayActive = () => {
+            return slideShowActiveState;
+        };
+
+        const startSlideShow = () => {
+            setSlideShowActiveState(true);
+        };
+
+        const stopSlideShow = () => {
+            setSlideShowActiveState(false);
+        };
+
+        const getPositionClassName = (preClassName, position) => {
+            const positions = ['top', 'left', 'bottom', 'right'];
+            const pos = positions.find((item) => item === position);
+
+            return pos ? `${preClassName}-${pos}` : '';
+        };
+
+        React.useEffect(() => {
+            if (props.value && props.value.length < numVisibleState) {
+                setNumVisibleState(props.value.length);
+            }
+        }, [props.value, numVisibleState]);
+
+        React.useEffect(() => {
+            setNumVisibleState(props.numVisible);
+        }, [props.numVisible]);
+
+        useUnmountEffect(() => {
+            if (slideShowActiveState) {
+                stopSlideShow();
+            }
+
+            ZIndexUtils.clear(maskRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            isAutoPlayActive,
+            startSlideShow,
+            stopSlideShow,
+            getElement: () => elementRef.current,
+            getPreviewContent: () => previewContentRef.current
+        }));
+
+        const createHeader = () => {
+            const headerProps = mergeProps(
+                {
+                    className: cx('header')
+                },
+                ptm('header')
+            );
+
+            if (props.header) {
+                return <div {...headerProps}>{props.header}</div>;
+            }
+
+            return null;
+        };
+
+        const createFooter = () => {
+            const footerProps = mergeProps(
+                {
+                    className: cx('footer')
+                },
+                ptm('footer')
+            );
+
+            if (props.footer) {
+                return <div {...footerProps}>{props.footer}</div>;
+            }
+
+            return null;
+        };
+
+        const createElement = () => {
+            const thumbnailsPosClassName = props.showThumbnails && getPositionClassName('p-galleria-thumbnails', props.thumbnailsPosition);
+            const indicatorPosClassName = props.showIndicators && getPositionClassName('p-galleria-indicators', props.indicatorsPosition);
+
+            const closeIconProps = mergeProps(
+                {
+                    className: cx('closeIcon'),
+                    'aria-hidden': true
+                },
+                ptm('closeIcon')
+            );
+            const icon = props.closeIcon || <TimesIcon {...closeIconProps} />;
+            const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props });
+
+            const closeButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('closeButton'),
+                    'aria-label': localeOption('aria') ? localeOption('aria').close : undefined,
+                    onClick: hide
+                },
+                ptm('closeButton')
+            );
+
+            const closeButton = props.fullScreen && (
+                <button {...closeButtonProps}>
+                    {closeIcon}
+                    <Ripple />
+                </button>
+            );
+
+            const header = createHeader();
+            const footer = createFooter();
+
+            const rootProps = mergeProps(
+                {
+                    ref: elementRef,
+                    id: id,
+                    className: classNames(props.className, cx('root', { context, thumbnailsPosClassName, indicatorPosClassName })),
+                    style: props.style,
+                    role: 'region'
+                },
+                GalleriaBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const contentProps = mergeProps(
+                {
+                    className: cx('content'),
+                    'aria-live': props.autoPlay ? 'polite' : 'off'
+                },
+                ptm('content')
+            );
+
+            const element = (
+                <div {...rootProps}>
+                    {closeButton}
+                    {header}
+                    <div {...contentProps}>
+                        <GalleriaItem
+                            hostName="Galleria"
+                            ref={previewContentRef}
+                            id={id}
+                            value={props.value}
+                            activeItemIndex={activeItemIndex}
+                            onActiveItemChange={onActiveItemChange}
+                            itemTemplate={props.item}
+                            circular={props.circular}
+                            caption={props.caption}
+                            showIndicators={props.showIndicators}
+                            itemPrevIcon={props.itemPrevIcon}
+                            itemNextIcon={props.itemNextIcon}
+                            changeItemOnIndicatorHover={props.changeItemOnIndicatorHover}
+                            indicator={props.indicator}
+                            showItemNavigators={props.showItemNavigators}
+                            autoPlay={props.autoPlay}
+                            slideShowActive={slideShowActiveState}
+                            startSlideShow={startSlideShow}
+                            stopSlideShow={stopSlideShow}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+
+                        {props.showThumbnails && (
+                            <GalleriaThumbnails
+                                hostName="Galleria"
+                                value={props.value}
+                                containerId={id}
+                                activeItemIndex={activeItemIndex}
+                                onActiveItemChange={onActiveItemChange}
+                                itemTemplate={props.thumbnail}
+                                numVisible={numVisibleState}
+                                nextThumbnailIcon={props.nextThumbnailIcon}
+                                prevThumbnailIcon={props.prevThumbnailIcon}
+                                responsiveOptions={props.responsiveOptions}
+                                circular={props.circular}
+                                isVertical={isVertical}
+                                contentHeight={props.verticalThumbnailViewPortHeight}
+                                showThumbnailNavigators={props.showThumbnailNavigators}
+                                autoPlay={props.autoPlay}
+                                slideShowActive={slideShowActiveState}
+                                stopSlideShow={stopSlideShow}
+                                isUnstyled={isUnstyled}
+                                ptm={ptm}
+                                cx={cx}
+                                sx={sx}
+                            />
+                        )}
+                    </div>
+                    {footer}
+                </div>
+            );
+
+            return element;
+        };
+
+        const createGalleria = () => {
+            const element = createElement();
+
+            if (props.fullScreen) {
+                const maskProps = mergeProps(
+                    {
+                        className: cx('mask', { visibleState }),
+                        role: 'dialog',
+                        'aria-modal': 'true'
+                    },
+                    ptm('mask')
+                );
+
+                const transitionProps = mergeProps(
+                    {
+                        classNames: cx('transition'),
+                        in: visibleState,
+                        timeout: { enter: 150, exit: 150 },
+                        options: props.transitionOptions,
+                        unmountOnExit: true,
+                        appear: true,
+                        onEnter,
+                        onEntering,
+                        onEntered,
+                        onExit,
+                        onExited
+                    },
+                    ptm('transition')
+                );
+
+                const galleriaWrapper = (
+                    <div ref={maskRef} {...maskProps}>
+                        <CSSTransition nodeRef={elementRef} {...transitionProps}>
+                            {element}
+                        </CSSTransition>
+                    </div>
+                );
+
+                return <Portal element={galleriaWrapper} />;
+            }
+
+            return element;
+        };
+
+        return ObjectUtils.isNotEmpty(props.value) && createGalleria();
+    })
+);
+
+Galleria.displayName = 'Galleria';
diff --git a/components/lib/galleria/GalleriaBase.js b/components/lib/galleria/GalleriaBase.js
new file mode 100644
index 0000000000..e85588de48
--- /dev/null
+++ b/components/lib/galleria/GalleriaBase.js
@@ -0,0 +1,427 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    header: 'p-galleria-header',
+    footer: 'p-galleria-footer',
+    closeIcon: 'p-galleria-close-icon',
+    closeButton: 'p-galleria-close p-link',
+    root: ({ props, context, thumbnailsPosClassName, indicatorPosClassName }) =>
+        classNames(
+            'p-galleria p-component',
+            {
+                'p-galleria-fullscreen': props.fullScreen,
+                'p-galleria-indicator-onitem': props.showIndicatorsOnItem,
+                'p-galleria-item-nav-onhover': props.showItemNavigatorsOnHover && !props.fullScreen,
+                'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+                'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+            },
+            thumbnailsPosClassName,
+            indicatorPosClassName
+        ),
+    content: 'p-galleria-content',
+    mask: ({ visibleState }) =>
+        classNames('p-galleria-mask', {
+            'p-galleria-visible': visibleState
+        }),
+    thumbnailItem: ({ subProps }) =>
+        classNames('p-galleria-thumbnail-item', {
+            'p-galleria-thumbnail-item-current': subProps.current,
+            'p-galleria-thumbnail-item-active': subProps.active,
+            'p-galleria-thumbnail-item-start': subProps.start,
+            'p-galleria-thumbnail-item-end': subProps.end
+        }),
+    thumbnailItemContent: 'p-galleria-thumbnail-item-content',
+    previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
+    previousThumbnailButton: ({ isDisabled }) =>
+        classNames('p-galleria-thumbnail-prev p-link', {
+            'p-disabled': isDisabled
+        }),
+    nextThumbnailIcon: 'p-galleria-thumbnail-next-icon',
+    nextThumbnailButton: ({ isDisabled }) =>
+        classNames('p-galleria-thumbnail-next p-link', {
+            'p-disabled': isDisabled
+        }),
+    thumbnailContainer: 'p-galleria-thumbnail-container',
+    thumbnailItemsContainer: 'p-galleria-thumbnail-items-container',
+    thumbnailItems: 'p-galleria-thumbnail-items',
+    thumbnailWrapper: 'p-galleria-thumbnail-wrapper',
+    previousItemIcon: 'p-galleria-item-prev-icon',
+    previousItemButton: ({ isDisabled }) =>
+        classNames('p-galleria-item-prev p-galleria-item-nav p-link', {
+            'p-disabled': isDisabled
+        }),
+    nextItemIcon: 'p-galleria-item-next-icon',
+    nextItemButton: ({ isDisabled }) =>
+        classNames('p-galleria-item-next p-galleria-item-nav p-link', {
+            'p-disabled': isDisabled
+        }),
+    caption: 'p-galleria-caption',
+    indicator: ({ isActive }) =>
+        classNames('p-galleria-indicator', {
+            'p-highlight': isActive
+        }),
+    indicators: 'p-galleria-indicators p-reset',
+    itemWrapper: 'p-galleria-item-wrapper',
+    itemContainer: 'p-galleria-item-container',
+    item: 'p-galleria-item',
+    transition: 'p-galleria'
+};
+
+const styles = `
+@layer primereact {
+    .p-galleria-content {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .p-galleria-item-wrapper {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+    
+    .p-galleria-item-container {
+        position: relative;
+        display: flex;
+        height: 100%;
+    }
+    
+    .p-galleria-item-nav {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+    
+    .p-galleria-item-prev {
+        left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    
+    .p-galleria-item-next {
+        right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    
+    .p-galleria-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+    }
+    
+    .p-galleria-item-nav-onhover .p-galleria-item-nav {
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity .2s ease-in-out;
+    }
+    
+    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
+        pointer-events: all;
+        opacity: 1;
+    }
+    
+    .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
+        pointer-events: none;
+    }
+    
+    .p-galleria-caption {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+    
+    /* Thumbnails */
+    .p-galleria-thumbnail-wrapper {
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+        flex-shrink: 0;
+    }
+    
+    .p-galleria-thumbnail-prev,
+    .p-galleria-thumbnail-next {
+        align-self: center;
+        flex: 0 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-galleria-thumbnail-prev span,
+    .p-galleria-thumbnail-next span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .p-galleria-thumbnail-container {
+        display: flex;
+        flex-direction: row;
+    }
+    
+    .p-galleria-thumbnail-items-container {
+        overflow: hidden;
+        width: 100%;
+    }
+    
+    .p-galleria-thumbnail-items {
+        display: flex;
+    }
+    
+    .p-galleria-thumbnail-item {
+        overflow: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        opacity: .5;
+    }
+    
+    .p-galleria-thumbnail-item:hover {
+        opacity: 1;
+        transition: opacity .3s;
+    }
+    
+    .p-galleria-thumbnail-item-current {
+        opacity: 1;
+    }
+    
+    /* Positions */
+    /* Thumbnails */
+    .p-galleria-thumbnails-left .p-galleria-content,
+    .p-galleria-thumbnails-right .p-galleria-content {
+        flex-direction: row;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
+    .p-galleria-thumbnails-right .p-galleria-item-wrapper {
+        flex-direction: row;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-item-wrapper,
+    .p-galleria-thumbnails-top .p-galleria-item-wrapper {
+        order: 2;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
+    .p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {
+        order: 1;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-container,
+    .p-galleria-thumbnails-right .p-galleria-thumbnail-container {
+        flex-direction: column;
+        flex-grow: 1;
+    }
+    
+    .p-galleria-thumbnails-left .p-galleria-thumbnail-items,
+    .p-galleria-thumbnails-right .p-galleria-thumbnail-items {
+        flex-direction: column;
+        height: 100%;
+    }
+    
+    /* Indicators */
+    .p-galleria-indicators {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-galleria-indicator > button {
+        display: inline-flex;
+        align-items: center;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-item-wrapper,
+    .p-galleria-indicators-right .p-galleria-item-wrapper {
+        flex-direction: row;
+        align-items: center;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-item-container,
+    .p-galleria-indicators-top .p-galleria-item-container {
+        order: 2;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-indicators,
+    .p-galleria-indicators-top .p-galleria-indicators {
+        order: 1;
+    }
+    
+    .p-galleria-indicators-left .p-galleria-indicators,
+    .p-galleria-indicators-right .p-galleria-indicators {
+        flex-direction: column;
+    }
+    
+    .p-galleria-indicator-onitem .p-galleria-indicators {
+        position: absolute;
+        display: flex;
+        z-index: 1;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
+        top: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-start;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
+        right: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-end;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        align-items: flex-end;
+    }
+    
+    .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
+        left: 0;
+        top: 0;
+        height: 100%;
+        align-items: flex-start;
+    }
+    
+    /* FullScreen */
+    .p-galleria-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+    }
+    
+    .p-galleria-mask.p-component-overlay {
+        pointer-events: auto;
+    }
+    
+    .p-galleria-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+    }
+    
+    .p-galleria-mask .p-galleria-item-nav {
+        position: fixed;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+    
+    /* Animation */
+    .p-galleria-enter {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+    
+    .p-galleria-enter-active {
+        opacity: 1;
+        transform: scale(1);
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+    
+    .p-galleria-enter-done {
+        transform: none;
+    }
+    
+    .p-galleria-exit {
+        opacity: 1;
+    }
+    
+    .p-galleria-exit-active {
+        opacity: 0;
+        transform: scale(0.7);
+        transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    }
+    
+    .p-galleria-enter-active .p-galleria-item-nav {
+        opacity: 0;
+    }
+    
+    /* Keyboard Support */
+    .p-items-hidden .p-galleria-thumbnail-item {
+        visibility: hidden;
+    }
+    
+    .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+        visibility: visible;
+    }
+}
+`;
+
+const inlineStyles = {
+    thumbnailItemsContainer: ({ height }) => ({ height })
+};
+
+export const GalleriaBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Galleria',
+        activeIndex: 0,
+        autoPlay: false,
+        baseZIndex: 0,
+        caption: null,
+        changeItemOnIndicatorHover: false,
+        children: undefined,
+        circular: false,
+        className: null,
+        closeIcon: null,
+        footer: null,
+        fullScreen: false,
+        header: null,
+        id: null,
+        indicator: null,
+        indicatorsPosition: 'bottom',
+        item: null,
+        itemNextIcon: null,
+        itemPrevIcon: null,
+        nextThumbnailIcon: null,
+        numVisible: 3,
+        onHide: null,
+        onItemChange: null,
+        onShow: null,
+        prevThumbnailIcon: null,
+        responsiveOptions: null,
+        showIndicators: false,
+        showIndicatorsOnItem: false,
+        showItemNavigators: false,
+        showItemNavigatorsOnHover: false,
+        showThumbnailNavigators: true,
+        showThumbnails: true,
+        style: null,
+        thumbnail: null,
+        thumbnailsPosition: 'bottom',
+        transitionInterval: 4000,
+        transitionOptions: null,
+        value: null,
+        verticalThumbnailViewPortHeight: '300px'
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/galleria/GalleriaItem.js b/components/lib/galleria/GalleriaItem.js
new file mode 100644
index 0000000000..c76647ac49
--- /dev/null
+++ b/components/lib/galleria/GalleriaItem.js
@@ -0,0 +1,388 @@
+import * as React from 'react';
+import { ariaLabel, localeOption } from '../api/Api';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { ChevronLeftIcon } from '../icons/chevronleft';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, classNames } from '../utils/Utils';
+
+export const GalleriaItem = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const indicatorContent = React.useRef(null);
+
+        const { ptm, cx } = props;
+
+        const getPTOptions = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const ariaSlideNumber = (value) => {
+            return ariaLabel('slideNumber', { slideNumber: value });
+        };
+
+        const ariaPageLabel = (value) => {
+            return ariaLabel('pageLabel', { page: value });
+        };
+
+        const next = () => {
+            const nextItemIndex = props.activeItemIndex + 1;
+
+            props.onActiveItemChange({
+                index: props.circular && props.value.length - 1 === props.activeItemIndex ? 0 : nextItemIndex
+            });
+        };
+
+        const prev = () => {
+            const prevItemIndex = props.activeItemIndex !== 0 ? props.activeItemIndex - 1 : 0;
+
+            props.onActiveItemChange({
+                index: props.circular && props.activeItemIndex === 0 ? props.value.length - 1 : prevItemIndex
+            });
+        };
+
+        const stopSlideShow = () => {
+            if (props.slideShowActive && props.stopSlideShow) {
+                props.stopSlideShow();
+            }
+        };
+
+        const navBackward = (e) => {
+            stopSlideShow();
+            prev();
+
+            if (e && e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const navForward = (e) => {
+            stopSlideShow();
+            next();
+
+            if (e && e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const onIndicatorClick = (index) => {
+            stopSlideShow();
+            props.onActiveItemChange({
+                index
+            });
+        };
+
+        const onIndicatorMouseEnter = (index) => {
+            if (props.changeItemOnIndicatorHover) {
+                stopSlideShow();
+
+                props.onActiveItemChange({
+                    index
+                });
+            }
+        };
+
+        const onIndicatorKeyDown = (event, index) => {
+            switch (event.code) {
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    stopSlideShow();
+
+                    props.onActiveItemChange({
+                        index
+                    });
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowRight':
+                    onRightKey();
+                    break;
+
+                case 'ArrowLeft':
+                    onLeftKey();
+                    break;
+
+                case 'Home':
+                    onHomeKey();
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    onEndKey();
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    onTabKey();
+                    break;
+
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'PageUp':
+                case 'PageDown':
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onRightKey = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+        };
+
+        const onLeftKey = () => {
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+        };
+
+        const onHomeKey = () => {
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, 0);
+        };
+
+        const onEndKey = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+            const activeIndex = findFocusedIndicatorIndex();
+
+            changedFocusedIndicator(activeIndex, indicators.length - 1);
+        };
+
+        const onTabKey = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+            const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
+
+            const activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
+            const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+
+            indicators[activeIndex].children[0].tabIndex = '-1';
+            indicators[highlightedIndex].children[0].tabIndex = '0';
+        };
+
+        const findFocusedIndicatorIndex = () => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+            const activeIndicator = DomHandler.findSingle(indicatorContent.current, '[data-pc-section="indicator"] > button[tabindex="0"]');
+
+            return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+        };
+
+        const changedFocusedIndicator = (prevInd, nextInd) => {
+            const indicators = [...DomHandler.find(indicatorContent.current, '[data-pc-section="indicator"]')];
+
+            indicators[prevInd].children[0].tabIndex = '-1';
+            indicators[nextInd].children[0].tabIndex = '0';
+            indicators[nextInd].children[0].focus();
+        };
+
+        useMountEffect(() => {
+            if (props.autoPlay) {
+                props.startSlideShow();
+            }
+        });
+
+        const createBackwardNavigator = () => {
+            if (props.showItemNavigators) {
+                const isDisabled = !props.circular && props.activeItemIndex === 0;
+
+                const previousItemIconProps = mergeProps(
+                    {
+                        className: cx('previousItemIcon')
+                    },
+                    getPTOptions('previousItemIcon')
+                );
+                const icon = props.itemPrevIcon || <ChevronLeftIcon {...previousItemIconProps} />;
+                const itemPrevIcon = IconUtils.getJSXIcon(icon, { ...previousItemIconProps }, { props });
+
+                const previousItemButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('previousItemButton', { isDisabled }),
+                        onClick: navBackward,
+                        disabled: isDisabled,
+                        'data-p-disabled': isDisabled,
+                        'data-pc-group-section': 'itemnavigator'
+                    },
+                    getPTOptions('previousItemButton')
+                );
+
+                return (
+                    <button {...previousItemButtonProps}>
+                        {itemPrevIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return null;
+        };
+
+        const createForwardNavigator = () => {
+            if (props.showItemNavigators) {
+                const isDisabled = !props.circular && props.activeItemIndex === props.value.length - 1;
+
+                const nextItemIconProps = mergeProps(
+                    {
+                        className: cx('nextItemIcon')
+                    },
+                    getPTOptions('nextItemIcon')
+                );
+                const icon = props.itemNextIcon || <ChevronRightIcon {...nextItemIconProps} />;
+                const itemNextIcon = IconUtils.getJSXIcon(icon, { ...nextItemIconProps }, { props });
+
+                const nextItemButtonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('nextItemButton', { isDisabled }),
+                        onClick: navForward,
+                        disabled: isDisabled,
+                        'data-p-disabled': isDisabled,
+                        'data-pc-group-section': 'itemnavigator'
+                    },
+                    getPTOptions('nextItemButton')
+                );
+
+                return (
+                    <button {...nextItemButtonProps}>
+                        {itemNextIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return null;
+        };
+
+        const createCaption = () => {
+            const captionProps = mergeProps(
+                {
+                    className: cx('caption')
+                },
+                getPTOptions('caption')
+            );
+
+            if (props.caption) {
+                const content = props.caption(props.value[props.activeItemIndex]);
+
+                return <div {...captionProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const createIndicator = (index) => {
+            const key = 'p-galleria-indicator-' + index;
+            const isActive = props.activeItemIndex === index;
+            let indicator = props.indicator && props.indicator(index);
+
+            const indicatorProps = mergeProps(
+                {
+                    className: cx('indicator', { isActive }),
+                    tabIndex: 0,
+                    'aria-label': ariaPageLabel(index + 1),
+                    'aria-selected': props.activeIndex === index,
+                    'aria-controls': props.id + '_item_' + index,
+                    'data-p-highlight': isActive,
+                    onClick: () => onIndicatorClick(index),
+                    onMouseEnter: () => onIndicatorMouseEnter(index),
+                    onKeyDown: (e) => onIndicatorKeyDown(e, index)
+                },
+                getPTOptions('indicator')
+            );
+
+            if (!indicator) {
+                indicator = (
+                    <button tabIndex={props.activeIndex === index ? '0' : '-1'} type="button" className="p-link">
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return (
+                <li {...indicatorProps} key={key}>
+                    {indicator}
+                </li>
+            );
+        };
+
+        const createIndicators = () => {
+            if (props.showIndicators) {
+                let indicators = [];
+                const indicatorsProps = mergeProps(
+                    {
+                        className: classNames(props.indicatorsContentClassName, cx('indicators'))
+                    },
+                    getPTOptions('indicators')
+                );
+
+                for (let i = 0; i < props.value.length; i++) {
+                    indicators.push(createIndicator(i));
+                }
+
+                return (
+                    <ul ref={indicatorContent} {...indicatorsProps}>
+                        {indicators}
+                    </ul>
+                );
+            }
+
+            return null;
+        };
+
+        const content = props.itemTemplate && props.itemTemplate(props.value[props.activeItemIndex]);
+        const backwardNavigator = createBackwardNavigator();
+        const forwardNavigator = createForwardNavigator();
+        const caption = createCaption();
+        const indicators = createIndicators();
+
+        const itemWrapperProps = mergeProps(
+            {
+                ref: ref,
+                className: cx('itemWrapper')
+            },
+            getPTOptions('itemWrapper')
+        );
+
+        const itemContainerProps = mergeProps(
+            {
+                className: cx('itemContainer')
+            },
+            getPTOptions('itemContainer')
+        );
+
+        const itemProps = mergeProps(
+            {
+                className: cx('item'),
+                id: props.id + '_item_' + props.activeItemIndex,
+                role: 'group',
+                'aria-label': ariaSlideNumber(props.activeItemIndex + 1),
+                'aria-roledescription': localeOption('aria') ? localeOption('aria').slide : undefined
+            },
+            getPTOptions('item')
+        );
+
+        return (
+            <div {...itemWrapperProps}>
+                <div {...itemContainerProps}>
+                    {backwardNavigator}
+                    <div {...itemProps}>{content}</div>
+                    {forwardNavigator}
+                    {caption}
+                </div>
+
+                {indicators}
+            </div>
+        );
+    })
+);
+
+GalleriaItem.displayName = 'GalleriaItem';
diff --git a/components/lib/galleria/GalleriaThumbnails.js b/components/lib/galleria/GalleriaThumbnails.js
new file mode 100644
index 0000000000..0e8ae753a5
--- /dev/null
+++ b/components/lib/galleria/GalleriaThumbnails.js
@@ -0,0 +1,612 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
+import { useMergeProps, useMountEffect, usePrevious, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronLeftIcon } from '../icons/chevronleft';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { ChevronUpIcon } from '../icons/chevronup';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+
+const GalleriaThumbnailItem = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            ...options
+        });
+    };
+
+    const onItemClick = (event) => {
+        props.onItemClick({
+            originalEvent: event,
+            index: props.index
+        });
+    };
+
+    const ariaPageLabel = (value) => {
+        return ariaLabel('pageLabel', { page: value });
+    };
+
+    const onThumbnailKeydown = (event) => {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
+            props.onItemClick({
+                originalEvent: event,
+                index: props.index
+            });
+            event.preventDefault();
+        }
+
+        switch (event.code) {
+            case 'ArrowRight':
+                onRightKey();
+                break;
+
+            case 'ArrowLeft':
+                onLeftKey();
+                break;
+
+            case 'Home':
+                onHomeKey();
+                event.preventDefault();
+                break;
+
+            case 'End':
+                onEndKey();
+                event.preventDefault();
+                break;
+
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+
+            case 'Tab':
+                onTabKey();
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    const onRightKey = () => {
+        const indicators = DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]');
+
+        const activeIndex = findFocusedIndicatorIndex();
+
+        changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+    };
+
+    const onLeftKey = () => {
+        const activeIndex = findFocusedIndicatorIndex();
+
+        changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+    };
+
+    const onHomeKey = () => {
+        const activeIndex = findFocusedIndicatorIndex();
+
+        changedFocusedIndicator(activeIndex, 0);
+    };
+
+    const onEndKey = () => {
+        const indicators = DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]');
+        const activeIndex = findFocusedIndicatorIndex();
+
+        changedFocusedIndicator(activeIndex, indicators.length - 1);
+    };
+
+    const onTabKey = () => {
+        const indicators = [...DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]')];
+        const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
+
+        const activeIndicator = DomHandler.findSingle(props.itemsContainerRef.current, '[tabindex="0"]');
+
+        const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+
+        indicators[activeIndex].children[0].tabIndex = '-1';
+        indicators[highlightedIndex].children[0].tabIndex = '0';
+    };
+
+    const findFocusedIndicatorIndex = () => {
+        const indicators = [...DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]')];
+        const activeIndicator = DomHandler.findSingle(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
+
+        return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+    };
+
+    const changedFocusedIndicator = (prevInd, nextInd) => {
+        const indicators = DomHandler.find(props.itemsContainerRef.current, '[data-pc-section="thumbnailitem"]');
+
+        indicators[prevInd].children[0].tabIndex = '-1';
+        indicators[nextInd].children[0].tabIndex = '0';
+        indicators[nextInd].children[0].focus();
+    };
+
+    const content = props.template && props.template(props.item);
+
+    const thumbnailItemProps = mergeProps(
+        {
+            className: classNames(props.className, cx('thumbnailItem', { subProps: props })),
+            role: 'tab',
+            'data-p-active': props.current,
+            'aria-selected': props.current,
+            'aria-controls': props.containerId + '_item_' + props.index,
+            onKeyDown: onThumbnailKeydown,
+            'data-p-galleria-thumbnail-item-current': props.current,
+            'data-p-galleria-thumbnail-item-active': props.active,
+            'data-p-galleria-thumbnail-item-start': props.start,
+            'data-p-galleria-thumbnail-item-end': props.end
+        },
+        getPTOptions('thumbnailItem')
+    );
+
+    const thumbnailItemContentProps = mergeProps(
+        {
+            className: cx('thumbnailItemContent'),
+            tabIndex: props.current ? '0' : '-1',
+            'aria-label': ariaPageLabel(props.index + 1),
+            'aria-current': props.current ? 'page' : undefined,
+            onClick: onItemClick
+        },
+        getPTOptions('thumbnailItemContent')
+    );
+
+    return (
+        <div {...thumbnailItemProps} key={props.index + '_galleriathumbnailitem'}>
+            <div {...thumbnailItemContentProps}>{content}</div>
+        </div>
+    );
+});
+
+export const GalleriaThumbnails = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const [numVisibleState, setNumVisibleState] = React.useState(props.numVisible);
+        const [totalShiftedItemsState, setTotalShiftedItemsState] = React.useState(0);
+        const itemsContainerRef = React.useRef(null);
+        const startPos = React.useRef(null);
+        const attributeSelector = React.useRef('');
+        const thumbnailsStyle = React.useRef(null);
+        const responsiveOptions = React.useRef(null);
+        const prevNumVisible = usePrevious(numVisibleState);
+        const prevActiveItemIndex = usePrevious(props.activeItemIndex);
+        const context = React.useContext(PrimeReactContext);
+
+        const { ptm, cx, sx } = props;
+
+        const getPTOptions = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const [bindWindowResizeListener] = useResizeListener({
+            listener: () => {
+                calculatePosition();
+            },
+            when: props.responsiveOptions
+        });
+
+        const step = (dir) => {
+            let totalShiftedItems = totalShiftedItemsState + dir;
+
+            if (dir < 0 && -1 * totalShiftedItems + numVisibleState > props.value.length - 1) {
+                totalShiftedItems = numVisibleState - props.value.length;
+            } else if (dir > 0 && totalShiftedItems > 0) {
+                totalShiftedItems = 0;
+            }
+
+            if (props.circular) {
+                if (dir < 0 && props.value.length - 1 === props.activeItemIndex) {
+                    totalShiftedItems = 0;
+                } else if (dir > 0 && props.activeItemIndex === 0) {
+                    totalShiftedItems = numVisibleState - props.value.length;
+                }
+            }
+
+            if (itemsContainerRef.current) {
+                DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
+                itemsContainerRef.current.style.transform = props.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / numVisibleState)}%, 0)` : `translate3d(${totalShiftedItems * (100 / numVisibleState)}%, 0, 0)`;
+                itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
+            }
+
+            setTotalShiftedItemsState(totalShiftedItems);
+        };
+
+        const stopSlideShow = () => {
+            if (props.slideShowActive && props.stopSlideShow) {
+                props.stopSlideShow();
+            }
+        };
+
+        const getMedianItemIndex = () => {
+            const index = Math.floor(numVisibleState / 2);
+
+            return numVisibleState % 2 ? index : index - 1;
+        };
+
+        const navBackward = (e) => {
+            stopSlideShow();
+
+            let prevItemIndex = props.activeItemIndex !== 0 ? props.activeItemIndex - 1 : 0;
+            let diff = prevItemIndex + totalShiftedItemsState;
+
+            if (numVisibleState - diff - 1 > getMedianItemIndex() && (-1 * totalShiftedItemsState !== 0 || props.circular)) {
+                step(1);
+            }
+
+            props.onActiveItemChange({
+                index: props.circular && props.activeItemIndex === 0 ? props.value.length - 1 : prevItemIndex
+            });
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const navForward = (e) => {
+            stopSlideShow();
+
+            let nextItemIndex = props.activeItemIndex + 1;
+
+            if (nextItemIndex + totalShiftedItemsState > getMedianItemIndex() && (-1 * totalShiftedItemsState < getTotalPageNumber() - 1 || props.circular)) {
+                step(-1);
+            }
+
+            props.onActiveItemChange({
+                index: props.circular && props.value.length - 1 === props.activeItemIndex ? 0 : nextItemIndex
+            });
+
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const onItemClick = (event) => {
+            stopSlideShow();
+
+            let selectedItemIndex = event.index;
+
+            if (selectedItemIndex !== props.activeItemIndex) {
+                const diff = selectedItemIndex + totalShiftedItemsState;
+                let dir = 0;
+
+                if (selectedItemIndex < props.activeItemIndex) {
+                    dir = numVisibleState - diff - 1 - getMedianItemIndex();
+
+                    if (dir > 0 && -1 * totalShiftedItemsState !== 0) {
+                        step(dir);
+                    }
+                } else {
+                    dir = getMedianItemIndex() - diff;
+
+                    if (dir < 0 && -1 * totalShiftedItemsState < getTotalPageNumber() - 1) {
+                        step(dir);
+                    }
+                }
+
+                props.onActiveItemChange({
+                    index: selectedItemIndex
+                });
+            }
+        };
+
+        const onTransitionEnd = (e) => {
+            if (itemsContainerRef.current && e.propertyName === 'transform') {
+                document.body.setAttribute('data-p-items-hidden', 'false');
+                !props.isUnstyled() && DomHandler.addClass(itemsContainerRef.current, 'p-items-hidden');
+                itemsContainerRef.current.style.transition = '';
+            }
+        };
+
+        const onTouchStart = (e) => {
+            let touchobj = e.changedTouches[0];
+
+            startPos.current = {
+                x: touchobj.pageX,
+                y: touchobj.pageY
+            };
+        };
+
+        const onTouchMove = (e) => {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+        };
+
+        const onTouchEnd = (e) => {
+            let touchobj = e.changedTouches[0];
+
+            if (props.isVertical) {
+                changePageOnTouch(e, touchobj.pageY - startPos.current.y);
+            } else {
+                changePageOnTouch(e, touchobj.pageX - startPos.current.x);
+            }
+        };
+
+        const changePageOnTouch = (e, diff) => {
+            if (diff < 0) {
+                // left
+                navForward(e);
+            } else {
+                // right
+                navBackward(e);
+            }
+        };
+
+        const getTotalPageNumber = () => {
+            return props.value.length > numVisibleState ? props.value.length - numVisibleState + 1 : 0;
+        };
+
+        const createStyle = () => {
+            if (!thumbnailsStyle.current) {
+                thumbnailsStyle.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+            }
+
+            let innerHTML = `
+            [data-pc-section="thumbnailitems"][${attributeSelector.current}] {
+                [data-pc-section="thumbnailitem"] {
+                    flex: 1 0 ${100 / numVisibleState}%
+                }
+            } 
+        `;
+
+            if (props.responsiveOptions) {
+                const comparator = ObjectUtils.localeComparator((context && context.locale) || PrimeReact.locale);
+
+                responsiveOptions.current = [...props.responsiveOptions];
+                responsiveOptions.current.sort((data1, data2) => {
+                    const value1 = data1.breakpoint;
+                    const value2 = data2.breakpoint;
+
+                    return ObjectUtils.sort(value1, value2, -1, comparator, (context && context.nullSortOrder) || PrimeReact.nullSortOrder);
+                });
+
+                for (let i = 0; i < responsiveOptions.current.length; i++) {
+                    let res = responsiveOptions.current[i];
+
+                    innerHTML =
+                        innerHTML +
+                        `
+                    @media screen and (max-width: ${res.breakpoint}) {
+                        [data-pc-section="thumbnailitems"][${attributeSelector.current}] {
+                            [data-pc-section="thumbnailitem"] {
+                                flex: 1 0 ${100 / res.numVisible}%
+                            }
+                        } 
+                    }
+                `;
+                }
+            }
+
+            thumbnailsStyle.current.innerHTML = innerHTML;
+        };
+
+        const calculatePosition = () => {
+            if (itemsContainerRef.current && responsiveOptions.current) {
+                let windowWidth = window.innerWidth;
+                let matchedResponsiveData = {
+                    numVisible: props.numVisible
+                };
+
+                for (let i = 0; i < responsiveOptions.current.length; i++) {
+                    let res = responsiveOptions.current[i];
+
+                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
+                        matchedResponsiveData = res;
+                    }
+                }
+
+                if (numVisibleState !== matchedResponsiveData.numVisible) {
+                    setNumVisibleState(matchedResponsiveData.numVisible);
+                }
+            }
+        };
+
+        useMountEffect(() => {
+            if (itemsContainerRef.current) {
+                attributeSelector.current = UniqueComponentId();
+                itemsContainerRef.current.setAttribute(attributeSelector.current, '');
+            }
+
+            createStyle();
+            calculatePosition();
+            bindWindowResizeListener();
+        });
+
+        useUpdateEffect(() => {
+            let totalShiftedItems = totalShiftedItemsState;
+
+            if (prevNumVisible !== numVisibleState || prevActiveItemIndex !== props.activeItemIndex) {
+                if (props.activeItemIndex <= getMedianItemIndex()) {
+                    totalShiftedItems = 0;
+                } else if (props.value.length - numVisibleState + getMedianItemIndex() < props.activeItemIndex) {
+                    totalShiftedItems = numVisibleState - props.value.length;
+                } else if (props.value.length - numVisibleState < props.activeItemIndex && numVisibleState % 2 === 0) {
+                    totalShiftedItems = props.activeItemIndex * -1 + getMedianItemIndex() + 1;
+                } else {
+                    totalShiftedItems = props.activeItemIndex * -1 + getMedianItemIndex();
+                }
+
+                if (totalShiftedItems !== totalShiftedItemsState) {
+                    setTotalShiftedItemsState(totalShiftedItems);
+                }
+
+                itemsContainerRef.current.style.transform = props.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / numVisibleState)}%, 0)` : `translate3d(${totalShiftedItems * (100 / numVisibleState)}%, 0, 0)`;
+
+                if (prevActiveItemIndex !== props.activeItemIndex) {
+                    document.body.setAttribute('data-p-items-hidden', 'false');
+                    !props.isUnstyled() && DomHandler.removeClass(itemsContainerRef.current, 'p-items-hidden');
+                    itemsContainerRef.current.style.transition = 'transform 500ms ease 0s';
+                }
+            }
+        });
+
+        const createItems = () => {
+            return props.value.map((item, index) => {
+                const firstIndex = totalShiftedItemsState * -1;
+                const lastIndex = firstIndex + numVisibleState - 1;
+                const isActive = firstIndex <= index && lastIndex >= index;
+                const start = firstIndex === index;
+                const end = lastIndex === index;
+                const current = props.activeItemIndex === index;
+
+                return (
+                    <GalleriaThumbnailItem
+                        key={index}
+                        index={index}
+                        containerId={props.containerId}
+                        itemsContainerRef={itemsContainerRef}
+                        template={props.itemTemplate}
+                        item={item}
+                        active={isActive}
+                        start={start}
+                        end={end}
+                        onItemClick={onItemClick}
+                        current={current}
+                        ptm={ptm}
+                        cx={cx}
+                        sx={sx}
+                    />
+                );
+            });
+        };
+
+        const createBackwardNavigator = () => {
+            if (props.showThumbnailNavigators) {
+                let isDisabled = (!props.circular && props.activeItemIndex === 0) || props.value.length <= numVisibleState;
+
+                const previousThumbnailIconProps = mergeProps(
+                    {
+                        className: cx('previousThumbnailIcon')
+                    },
+                    getPTOptions('previousThumbnailIcon')
+                );
+                const icon = props.isVertical ? props.prevThumbnailIcon || <ChevronUpIcon {...previousThumbnailIconProps} /> : props.prevThumbnailIcon || <ChevronLeftIcon {...previousThumbnailIconProps} />;
+                const prevThumbnailIcon = IconUtils.getJSXIcon(icon, { ...previousThumbnailIconProps }, { props });
+                const previousThumbnailButtonProps = mergeProps(
+                    {
+                        className: cx('previousThumbnailButton', { isDisabled }),
+                        onClick: navBackward,
+                        type: 'button',
+                        disabled: isDisabled,
+                        'data-p-disabled': isDisabled,
+                        'aria-label': localeOption('aria') ? localeOption('aria').prevPageLabel : undefined,
+                        'data-pc-group-section': 'thumbnailnavigator'
+                    },
+                    getPTOptions('previousThumbnailButton')
+                );
+
+                return (
+                    <button {...previousThumbnailButtonProps}>
+                        {prevThumbnailIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return null;
+        };
+
+        const createForwardNavigator = () => {
+            if (props.showThumbnailNavigators) {
+                const isDisabled = (!props.circular && props.activeItemIndex === props.value.length - 1) || props.value.length <= numVisibleState;
+
+                const nextThumbnailIconProps = mergeProps(
+                    {
+                        className: cx('nextThumbnailIcon')
+                    },
+                    getPTOptions('nextThumbnailIcon')
+                );
+                const icon = props.isVertical ? props.nextThumbnailIcon || <ChevronDownIcon {...nextThumbnailIconProps} /> : props.nextThumbnailIcon || <ChevronRightIcon {...nextThumbnailIconProps} />;
+                const nextThumbnailIcon = IconUtils.getJSXIcon(icon, { ...nextThumbnailIconProps }, { props });
+
+                const nextThumbnailButtonProps = mergeProps(
+                    {
+                        className: cx('nextThumbnailButton', { isDisabled }),
+                        disabled: isDisabled,
+                        type: 'button',
+                        'aria-label': localeOption('aria') ? localeOption('aria').nextPageLabel : undefined,
+                        onClick: navForward,
+                        'data-p-disabled': isDisabled,
+                        'data-pc-group-section': 'thumbnailnavigator'
+                    },
+                    getPTOptions('nextThumbnailButton')
+                );
+
+                return (
+                    <button {...nextThumbnailButtonProps}>
+                        {nextThumbnailIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return null;
+        };
+
+        const createContent = () => {
+            const items = createItems();
+            const height = props.isVertical ? props.contentHeight : '';
+            const backwardNavigator = createBackwardNavigator();
+            const forwardNavigator = createForwardNavigator();
+
+            const thumbnailContainerProps = mergeProps(
+                {
+                    className: cx('thumbnailContainer')
+                },
+                getPTOptions('thumbnailContainer')
+            );
+
+            const thumbnailItemsContainerProps = mergeProps(
+                {
+                    className: cx('thumbnailItemsContainer'),
+                    style: sx('thumbnailItemsContainer', { height })
+                },
+                getPTOptions('thumbnailItemsContainer')
+            );
+
+            const thumbnailItemsProps = mergeProps(
+                {
+                    ref: itemsContainerRef,
+                    className: cx('thumbnailItems'),
+                    role: 'tablist',
+                    onTransitionEnd: onTransitionEnd,
+                    onTouchStart: onTouchStart,
+                    onTouchMove: onTouchMove,
+                    onTouchEnd: onTouchEnd
+                },
+                getPTOptions('thumbnailItems')
+            );
+
+            return (
+                <div {...thumbnailContainerProps}>
+                    {backwardNavigator}
+                    <div {...thumbnailItemsContainerProps}>
+                        <div {...thumbnailItemsProps}>{items}</div>
+                    </div>
+                    {forwardNavigator}
+                </div>
+            );
+        };
+
+        const content = createContent();
+
+        const thumbnailWrapperProps = mergeProps(
+            {
+                className: cx('thumbnailWrapper')
+            },
+            getPTOptions('thumbnailWrapper')
+        );
+
+        return <div {...thumbnailWrapperProps}>{content}</div>;
+    })
+);
+
+GalleriaThumbnailItem.displayName = 'GalleriaThumbnailItem';
+GalleriaThumbnails.displayName = 'GalleriaThumbnails';
diff --git a/components/lib/galleria/galleria.d.ts b/components/lib/galleria/galleria.d.ts
new file mode 100644
index 0000000000..4a0a6d36a5
--- /dev/null
+++ b/components/lib/galleria/galleria.d.ts
@@ -0,0 +1,419 @@
+/**
+ *
+ * Galleria is a content gallery component.
+ *
+ * [Live Demo](https://www.primereact.org/galleria)
+ *
+ * @module galleria
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type GalleriaPassThroughType<T> = PassThroughType<T, GalleriaPassThroughMethodOptions>;
+export declare type GalleriaPassThroughTransitionType = ReactCSSTransitionProps | ((options: GalleriaPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface GalleriaPassThroughMethodOptions {
+    props: GalleriaProps;
+    state: GalleriaState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link GalleriaProps.pt}
+ */
+export interface GalleriaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item wrapper's DOM element.
+     */
+    itemWrapper?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item container's DOM element.
+     */
+    itemContainer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the previous item button's DOM element.
+     */
+    previousItemButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous item icon's DOM element.
+     */
+    previousItemIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the next item button's DOM element.
+     */
+    nextItemButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next item icon's DOM element.
+     */
+    nextItemIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the caption's DOM element.
+     */
+    caption?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the indicators's DOM element.
+     */
+    indicators?: GalleriaPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the indicator's DOM element.
+     */
+    indicator?: GalleriaPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail wrapper's DOM element.
+     */
+    thumbnailWrapper?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail container's DOM element.
+     */
+    thumbnailContainer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the previous thumbnail button's DOM element.
+     */
+    previousThumbnailButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous thumbnail icon's DOM element.
+     */
+    previousThumbnailIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail items container's DOM element.
+     */
+    thumbnailItemsContainer?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail items' DOM element.
+     */
+    thumbnailItems?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail item's DOM element.
+     */
+    thumbnailItem?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the thumbnail item content's DOM element.
+     */
+    thumbnailItemContent?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the next thumbnail button's DOM element.
+     */
+    nextThumbnailButton?: GalleriaPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next thumbnail icon's DOM element.
+     */
+    nextThumbnailIcon?: GalleriaPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: GalleriaPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: GalleriaPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Galleria component.
+ */
+export interface GalleriaState {
+    /**
+     * Current visible state as a boolean.
+     * @default false
+     */
+    visible: number;
+    /**
+     * Number of items per page as a number.
+     */
+    numVisible: number;
+    /**
+     * Current slide show active state.
+     * @default false
+     */
+    slideShowActive: number;
+    /**
+     * Current active item index as a number.
+     */
+    activeIndex: number;
+}
+
+/**
+ * Custom galleria responsive options
+ */
+interface GalleriaResponsiveOptions {
+    /**
+     * Breakpoint for this responsive option.
+     */
+    breakpoint: string;
+    /**
+     * Number of visible items.
+     */
+    numVisible: number;
+}
+
+/**
+ * Custom complete method event.
+ * @see {@link GalleriaProps.onItemChange}
+ * @event
+ */
+interface GalleriaItemChangeEvent {
+    /**
+     * index of the new item.
+     */
+    index: number;
+}
+
+/**
+ * Defines valid properties in Galleria component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface GalleriaProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * An array of objects to display.
+     */
+    value?: any[] | undefined;
+    /**
+     * Index of the first item.
+     * @defaultValue 0
+     */
+    activeIndex?: number | undefined;
+    /**
+     * Whether to display the component on fullscreen.
+     * @defaultValue false
+     */
+    fullScreen?: boolean | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for preview item.
+     * @param {*} item - Current item.
+     */
+    item?(item: any): React.ReactNode | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for thumbnail item.
+     * @param {*} item - Current thumbnail item.
+     */
+    thumbnail?(item: any): React.ReactNode | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for indicator item.
+     * @param {number} index - Index of the indicator.
+     */
+    indicator?(index: number): React.ReactNode | undefined;
+    /**
+     * Icon to display in the galleria close button.
+     */
+    closeIcon?: IconType<GalleriaProps> | undefined;
+    /**
+     * Custom header template.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Custom footer template.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Number of items per page.
+     * @defaultValue 3
+     */
+    numVisible?: number | undefined;
+    /**
+     * An array of options for responsive design.
+     */
+    responsiveOptions?: GalleriaResponsiveOptions[] | undefined;
+    /**
+     * Whether to display navigation buttons in item container.
+     * @defaultValue false
+     */
+    showItemNavigators?: boolean | undefined;
+    /**
+     * Whether to display navigation buttons in thumbnail container.
+     * @defaultValue true
+     */
+    showThumbnailNavigators?: boolean | undefined;
+    /**
+     * Whether to display navigation buttons on item container's hover.
+     * @defaultValue false
+     */
+    showItemNavigatorsOnHover?: boolean | undefined;
+    /**
+     * When enabled, item is changed on indicator item's hover.
+     * @defaultValue false
+     */
+    changeItemOnIndicatorHover?: boolean | undefined;
+    /**
+     * Defines if scrolling would be infinite.
+     * @defaultValue false
+     */
+    circular?: boolean | undefined;
+    /**
+     * Items are displayed with a slideshow in autoPlay mode.
+     * @defaultValue false
+     */
+    autoPlay?: boolean | undefined;
+    /**
+     * Time in milliseconds to scroll items.
+     * @defaultValue 4000
+     */
+    transitionInterval?: number | undefined;
+    /**
+     * Function that gets an item in the value and returns the content for caption item.
+     * @param {*} item - Browser event.
+     */
+    caption?(item: any): React.ReactNode | undefined;
+    /**
+     * Whether to display thumbnail container.
+     * @defaultValue true
+     */
+    showThumbnails?: boolean | undefined;
+    /**
+     * Icon to show in the next item button.
+     */
+    itemNextIcon?: IconType<GalleriaProps> | undefined;
+    /**
+     * Icon to show in the previous item button.
+     */
+    itemPrevIcon?: IconType<GalleriaProps> | undefined;
+    /**
+     * Icon to show in the next thumbnail button.
+     */
+    nextThumbnailIcon?: IconType<GalleriaProps> | undefined;
+    /**
+     * Icon to show in the previous thumbnail button.
+     */
+    prevThumbnailIcon?: IconType<GalleriaProps> | undefined;
+    /**
+     * Position of thumbnails. Valid values are "bottom", "top", "left" and "right".
+     * @defaultValue bottom
+     */
+    thumbnailsPosition?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Whether to display indicator container.
+     * @defaultValue false
+     */
+    showIndicators?: boolean | undefined;
+    /**
+     * When enabled, indicator container is displayed on item container.
+     * @defaultValue false
+     */
+    showIndicatorsOnItem?: boolean | undefined;
+    /**
+     * Position of indicators. Valid values are "bottom", "top", "left" and "right".
+     * @defaultValue bottom
+     */
+    indicatorsPosition?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke after changing item.
+     * @param {GalleriaItemChangeEvent} event - Custom change item.
+     */
+    onItemChange?(event: GalleriaItemChangeEvent): void;
+    /**
+     * Callback to invoke when modal becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when modal becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {GalleriaPassThroughOptions}
+     */
+    pt?: GalleriaPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Galleria**
+ *
+ * _Galleria is a content gallery component._
+ *
+ * [Live Demo](https://www.primereact.org/galleria/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Galleria extends React.Component<GalleriaProps, any> {
+    /**
+     * Used to show the overlay.
+     */
+    public show(): void;
+    /**
+     * Used to hide the overlay.
+     */
+    public hide(): void;
+    /**
+     * Whether auto-play feature is currently active.
+     */
+    public isAutoPlayActive(): boolean;
+    /**
+     * Used to start the slideshow.
+     */
+    public startSlideShow(): void;
+    /**
+     * Used to stop the slideshow.
+     */
+    public stopSlideShow(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/galleria/package.json b/components/lib/galleria/package.json
new file mode 100644
index 0000000000..fe56b656e4
--- /dev/null
+++ b/components/lib/galleria/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./galleria.cjs.js",
+    "module": "./galleria.esm.js",
+    "unpkg": "./galleria.min.js",
+    "types": "./galleria.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/hooks/Hooks.js b/components/lib/hooks/Hooks.js
new file mode 100644
index 0000000000..5458bfc113
--- /dev/null
+++ b/components/lib/hooks/Hooks.js
@@ -0,0 +1,52 @@
+import { useClickOutside } from './useClickOutside';
+import { useCounter } from './useCounter';
+import { useDebounce } from './useDebounce';
+import { useDisplayOrder } from './useDisplayOrder';
+import { useEventListener } from './useEventListener';
+import { useFavicon } from './useFavicon';
+import { ESC_KEY_HANDLING_PRIORITIES, useGlobalOnEscapeKey } from './useGlobalOnEscapeKey';
+import { useIntersectionObserver } from './useIntersectionObserver';
+import { useInterval } from './useInterval';
+import { useMatchMedia } from './useMatchMedia';
+import { useMergeProps } from './useMergeProps';
+import { useMountEffect } from './useMountEffect';
+import { useMouse } from './useMouse';
+import { useMove } from './useMove';
+import { useOverlayListener } from './useOverlayListener';
+import { useOverlayScrollListener } from './useOverlayScrollListener';
+import { usePrevious } from './usePrevious';
+import { useResizeListener } from './useResizeListener';
+import { useLocalStorage, useSessionStorage, useStorage } from './useStorage';
+import { useStyle } from './useStyle';
+import { useTimeout } from './useTimeout';
+import { useUnmountEffect } from './useUnmountEffect';
+import { useUpdateEffect } from './useUpdateEffect';
+
+export {
+    ESC_KEY_HANDLING_PRIORITIES,
+    useClickOutside,
+    useCounter,
+    useDebounce,
+    useDisplayOrder,
+    useEventListener,
+    useFavicon,
+    useGlobalOnEscapeKey,
+    useIntersectionObserver,
+    useInterval,
+    useLocalStorage,
+    useMatchMedia,
+    useMergeProps,
+    useMountEffect,
+    useMouse,
+    useMove,
+    useOverlayListener,
+    useOverlayScrollListener,
+    usePrevious,
+    useResizeListener,
+    useSessionStorage,
+    useStorage,
+    useStyle,
+    useTimeout,
+    useUnmountEffect,
+    useUpdateEffect
+};
diff --git a/components/lib/hooks/hooks.d.ts b/components/lib/hooks/hooks.d.ts
new file mode 100644
index 0000000000..1ecd9cc321
--- /dev/null
+++ b/components/lib/hooks/hooks.d.ts
@@ -0,0 +1,308 @@
+/**
+ *
+ * The module includes custom hook methods to create shorthands for users.
+ *
+ * @module hooks
+ *
+ */
+import * as React from 'react';
+
+/**
+ * Custom MousePositionOptions
+ */
+interface MousePositionOptions {
+    /**
+     * Position of the mouse for the x-axis.
+     */
+    x: number;
+    /**
+     * Position of the mouse for the y-axis.
+     */
+    y: number;
+}
+
+/**
+ * Custom UseStyleOptions
+ */
+interface UseStyleOptions {
+    document?: Document;
+    immediate: boolean;
+    manual: boolean;
+    name: string;
+    media: string;
+}
+
+/**
+ * Custom StyleOptions
+ */
+interface StyleOptions {
+    /**
+     * Defines data-pc-name attribute of the style tag.
+     */
+    name: string;
+    /**
+     * The css object.
+     */
+    css: React.RefObject<string>;
+    /**
+     * This option is used to load the style tag by the name.
+     * @returns {void}
+     */
+    load: () => void;
+    /**
+     * This method is used to remove the style tag from the head.
+     * @returns {void}
+     */
+    unload: () => void;
+    /**
+     * Whether the style is loaded or not.
+     */
+    isLoaded: boolean;
+}
+
+/**
+ * Custom MouseDataOptions
+ */
+declare interface MouseDataOptions extends MousePositionOptions {
+    /**
+     * Used to reset the mouse position data.
+     */
+    reset: () => void;
+    /**
+     * The ref of the element to position.
+     */
+    ref: React.RefObject<HTMLElement>;
+}
+
+/**
+ * Custom MouseMoveOptions
+ */
+declare interface MouseMoveOptions extends MouseDataOptions {
+    /**
+     * Whether the mouse is touching the element or not.
+     */
+    active: boolean;
+}
+
+/**
+ * Custom event options.
+ */
+interface EventOptions {
+    /**
+     * The target element to listen to.
+     */
+    target?: 'document' | 'window' | React.Ref<HTMLElement>;
+    /**
+     * The event type to listen to.
+     */
+    type?: string;
+    /**
+     * The event listener.
+     */
+    listener?(event: Event): void;
+    /**
+     * The event options.
+     */
+    options?: any;
+    /**
+     * Whether to listen to the event or not.
+     * @defaultValue true
+     */
+    when?: boolean;
+}
+
+/**
+ * The options of event listener in OverlayEventOptions
+ */
+interface OverlayListenerOptions {
+    /**
+     * Type of listener.
+     */
+    type: 'scroll' | 'outside' | 'resize' | 'orientationChange';
+    /**
+     * Whether it is valid.
+     */
+    valid: boolean;
+}
+
+/**
+ * Custom overlay event options.
+ */
+interface OverlayEventOptions {
+    /**
+     * The target element to listen to.
+     */
+    target?: 'document' | 'window' | React.Ref<HTMLElement> | undefined;
+    /**
+     * The overlay element to listen to.
+     */
+    overlay?: 'document' | 'window' | React.Ref<HTMLElement> | undefined;
+    /**
+     * The event listener.
+     */
+    listener?(event: Event, options?: OverlayListenerOptions): void;
+    /**
+     * Whether to listen to the event or not.
+     * @defaultValue true
+     */
+    when?: boolean;
+}
+
+/**
+ * Custom resize event options.
+ */
+interface ResizeEventOptions {
+    /**
+     * The event listener.
+     * @param {Event} event - The browser event object.
+     */
+    listener?(event: Event): void;
+    /**
+     * Whether to listen to the event or not.
+     * @defaultValue true
+     */
+    when?: boolean;
+}
+
+/**
+ * Custom hook to get the previous value of a property.
+ * @param {V} value - The current value whose previous state is needed
+ * @returns {V | undefined} Returns undefined on first render, then returns the previous value on subsequent renders
+ */
+export declare function usePrevious<V>(value: V): V | undefined;
+/**
+ * Custom hook to run a mount effect only once.
+ * @param {React.EffectCallback} effect - The effect to run.
+ */
+export declare function useMountEffect(effect: React.EffectCallback): void;
+/**
+ * Custom hook to run an update effect.
+ * @param {React.EffectCallback} effect - The effect to run.
+ * @param {React.DependencyList} deps - The dependencies.
+ */
+export declare function useUpdateEffect(effect: React.EffectCallback, deps?: React.DependencyList): void;
+/**
+ * Custom hook to run an unmount effect.
+ * @param {React.EffectCallback} effect - The effect to run.
+ */
+export declare function useUnmountEffect(effect: React.EffectCallback): void;
+/**
+ * Custom hook to listen to an event.
+ * @param {EventOptions} options - The event options.
+ */
+export declare function useEventListener(options: EventOptions): any[];
+/**
+ * Custom hook to listen to overlay event. It can be used when an overlay is desired to behave like the overlays in PrimeReact.
+ * @param {OverlayEventOptions} options - The event options.
+ */
+export declare function useOverlayListener(options: OverlayEventOptions): any[];
+/**
+ * Custom hook to listen to overlay scroll. It can be used when an overlay is desired to behave like the overlays in PrimeReact.
+ * @param {EventOptions} options - The event options.
+ */
+export declare function useOverlayScrollListener(options: EventOptions): any[];
+/**
+ * Custom hook to listen to a resize event.
+ * @param {ResizeEventOptions} options - The event options.
+ */
+export declare function useResizeListener(options: ResizeEventOptions): any[];
+/**
+ * Custom hook to use an interval.
+ * @param {*} fn - The function that will be executed after the delay.
+ * @param {number} delay - Delay in milliseconds.
+ * @param {boolean} when - Whether to listen to the event or not.
+ */
+export declare function useInterval(fn: any, delay?: number, when?: boolean): any[];
+/**
+ * Custom hook to use a timeout.
+ * @param {*} fn - The function that will be executed after the delay.
+ * @param {number} delay - Delay in milliseconds.
+ * @param {boolean} when - Whether to listen to the event or not.
+ */
+export declare function useTimeout(fn: any, delay?: number, when?: boolean): any[];
+/**
+ * Custom hook to use storage such as local and session storage.
+ * @param {*} initialValue - The initial value.
+ * @param {string} key - The key to store the value.
+ * @param {string} storage - The storage type. Valid values are 'local' and 'session'.
+ */
+export declare function useStorage<S, K extends string = string>(initialValue: S, key: K, storage?: 'local' | 'session'): [S, React.Dispatch<React.SetStateAction<S>>];
+/**
+ * Custom hook to use local storage.
+ * @param {*} initialValue - The initial value.
+ * @param {string} key - The key to store the value in local storage.
+ */
+export declare function useLocalStorage<S, K extends string = string>(initialValue: S, key: K): [S, React.Dispatch<React.SetStateAction<S>>];
+/**
+ * Custom hook to use session storage.
+ * @param {*} initialValue - The initial value.
+ * @param {string} key - The key to store the value in session storage. */
+export declare function useSessionStorage<S, K extends string = string>(initialValue: S, key: K): [S, React.Dispatch<React.SetStateAction<S>>];
+/**
+ * @todo
+ * @param {number} [initialValue=0] - The value to counter.
+ * @param {{ min: number; max: number; step: number }} [options=&#123; step: 1 &#125;]  - The options of the counter.
+ */
+export declare function useCounter(initialValue: number, options: { min: number; max: number; step: number }): any;
+/**
+ * Custom hook to use a debounced value.
+ * @param {*} initialValue - The initial value for debounce.
+ * @param {number} delay - The delay in milliseconds.
+ */
+export declare function useDebounce<S>(initialValue: S, delay: number): [S, S, React.Dispatch<React.SetStateAction<S>>];
+/**
+ * Custom hook to use to get the current mouse position.
+ */
+export declare function useMouse(): MouseDataOptions;
+/**
+ * Custom hook to handles move behavior over any element.
+ * @param {'horizontal' | 'vertical' | 'both'} mode - The mode of the move. Valid values are 'horizontal', 'vertical' and 'both'.
+ * @param {MousePositionOptions} initialValue - The initial value.
+ */
+export declare function useMove(mode: 'horizontal' | 'vertical' | 'both', initialValue: MousePositionOptions): MouseMoveOptions;
+
+/**
+ * Custom hook to use to get style options.
+ * @param {string} css - The style text content.
+ * @param {UseStyleOptions} options - The options of the style.
+ */
+export declare function useStyle(css: string, options?: UseStyleOptions): StyleOptions;
+/**
+ * Custom hook to use change the current favicon.
+ * @param {string} newIcon - The new favicon url to set.
+ * @param {string} rel - The rel attribute of the link element. @defaultValue 'shortcut icon'
+ */
+export declare function useFavicon(newIcon: string, rel: string): void;
+/**
+ * Custom hook to use change the current favicon.
+ * @param {React.RefObject<Element>} ref The ref of the element to observe.
+ * @param {IntersectionObserver} options The options of the intersection observer.
+ * @return {boolean} Whether the element is intersecting or not.
+ */
+export declare function useIntersectionObserver(ref: React.RefObject<Element>, options?: IntersectionObserverInit): boolean;
+/**
+ * Custom hook to use detect click outside.
+ * @param {React.RefObject<Element>} ref - The ref of the element to detect click outside.
+ * @param {*} callback - The callback to run when click outside.
+ */
+export declare function useClickOutside(ref: React.RefObject<Element>, callback: any): void;
+/**
+ * Custom hook to detect if window size matches or not.
+ * @param {string} query - the media query
+ * @param {boolean} when - Whether to listen to the event or not.
+ */
+export declare function useMatchMedia(query: string, when?: boolean): boolean;
+/**
+ * Custom hook to use detect global escape button click.
+ */
+export declare function useGlobalOnEscapeKey(props: { callback: (event: KeyboardEvent) => void; when: boolean; priority: [number, number] }): void;
+/**
+ * Custom hook to use display order of component of one and the same group
+ * @param {string} group
+ * @param {boolean} [isVisible]
+ */
+export declare function useDisplayOrder(group: string, isVisible?: boolean): number | undefined;
+/**
+ * Custom hook to return a function for merging properties.
+ */
+export declare function useMergeProps(): (args: object[], options?: any) => object | undefined;
diff --git a/components/lib/hooks/package.json b/components/lib/hooks/package.json
new file mode 100644
index 0000000000..9554913426
--- /dev/null
+++ b/components/lib/hooks/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./hooks.cjs.js",
+    "module": "./hooks.esm.js",
+    "unpkg": "./hooks.min.js",
+    "types": "./hooks.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/hooks/useClickOutside.js b/components/lib/hooks/useClickOutside.js
new file mode 100644
index 0000000000..4bd743522a
--- /dev/null
+++ b/components/lib/hooks/useClickOutside.js
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useEventListener } from './useEventListener';
+
+export const useClickOutside = (ref, callback) => {
+    const isOutsideClicked = (event) => {
+        if (!ref.current || ref.current.contains(event.target)) {
+            return;
+        }
+
+        callback(event);
+    };
+
+    const [bindMouseDownListener, unbindMouseDownListener] = useEventListener({
+        type: 'mousedown',
+        listener: isOutsideClicked
+    });
+
+    const [bindTouchStartListener, unbindTouchStartListener] = useEventListener({
+        type: 'touchstart',
+        listener: isOutsideClicked
+    });
+
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+
+        bindMouseDownListener();
+        bindTouchStartListener();
+
+        return () => {
+            unbindMouseDownListener();
+            unbindTouchStartListener();
+        };
+    });
+
+    return [ref, callback];
+};
diff --git a/components/lib/hooks/useCounter.js b/components/lib/hooks/useCounter.js
new file mode 100644
index 0000000000..328ffe5bab
--- /dev/null
+++ b/components/lib/hooks/useCounter.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+export const useCounter = (initialValue = 0, options = { step: 1 }) => {
+    const [count, setCount] = React.useState(initialValue);
+
+    const increment = () => {
+        if (options.max && count >= options.max) {
+            return;
+        }
+
+        setCount(count + options.step);
+    };
+
+    const decrement = () => {
+        if (options.min || (options.min === 0 && count <= options.min)) {
+            return null;
+        }
+
+        setCount(count - options.step);
+    };
+
+    const reset = () => {
+        setCount(0);
+    };
+
+    return {
+        count,
+        increment,
+        decrement,
+        reset
+    };
+};
+
+export default useCounter;
diff --git a/components/lib/hooks/useDebounce.js b/components/lib/hooks/useDebounce.js
new file mode 100644
index 0000000000..1233441ec9
--- /dev/null
+++ b/components/lib/hooks/useDebounce.js
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useMountEffect, useUnmountEffect } from './Hooks';
+
+export const useDebounce = (initialValue, delay) => {
+    const [inputValue, setInputValue] = React.useState(initialValue);
+    const [debouncedValue, setDebouncedValue] = React.useState(initialValue);
+    const mountedRef = React.useRef(false);
+    const timeoutRef = React.useRef(null);
+    const cancelTimer = () => window.clearTimeout(timeoutRef.current);
+
+    useMountEffect(() => {
+        mountedRef.current = true;
+    });
+
+    useUnmountEffect(() => {
+        cancelTimer();
+    });
+
+    React.useEffect(() => {
+        if (!mountedRef.current) {
+            return;
+        }
+
+        cancelTimer();
+        timeoutRef.current = window.setTimeout(() => {
+            setDebouncedValue(inputValue);
+        }, delay);
+    }, [inputValue, delay]);
+
+    return [inputValue, debouncedValue, setInputValue];
+};
diff --git a/components/lib/hooks/useDisplayOrder.js b/components/lib/hooks/useDisplayOrder.js
new file mode 100644
index 0000000000..b6faf02719
--- /dev/null
+++ b/components/lib/hooks/useDisplayOrder.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ObjectUtils, UniqueComponentId } from '../utils/Utils';
+
+const groupToDisplayedElements = {};
+
+export const useDisplayOrder = (group, isVisible = true) => {
+    const [uid] = React.useState(() => UniqueComponentId());
+    const [displayOrder, setDisplayOrder] = React.useState(0);
+
+    React.useEffect(() => {
+        if (isVisible) {
+            if (!groupToDisplayedElements[group]) {
+                groupToDisplayedElements[group] = [];
+            }
+
+            const newDisplayOrder = groupToDisplayedElements[group].push(uid);
+
+            setDisplayOrder(newDisplayOrder);
+
+            return () => {
+                delete groupToDisplayedElements[group][newDisplayOrder - 1];
+
+                // Reduce array length, by removing undefined elements at the end of array:
+                const lastIndex = groupToDisplayedElements[group].length - 1;
+                const lastOrder = ObjectUtils.findLastIndex(groupToDisplayedElements[group], (el) => el !== undefined);
+
+                if (lastOrder !== lastIndex) {
+                    groupToDisplayedElements[group].splice(lastOrder + 1);
+                }
+
+                setDisplayOrder(undefined);
+            };
+        }
+    }, [group, uid, isVisible]);
+
+    return displayOrder;
+};
diff --git a/components/lib/hooks/useEventListener.js b/components/lib/hooks/useEventListener.js
new file mode 100644
index 0000000000..ac0b86cf25
--- /dev/null
+++ b/components/lib/hooks/useEventListener.js
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { usePrevious } from './usePrevious';
+import { useUnmountEffect } from './useUnmountEffect';
+
+export const useEventListener = ({ target = 'document', type, listener, options, when = true }) => {
+    const targetRef = React.useRef(null);
+    const listenerRef = React.useRef(null);
+    let prevListener = usePrevious(listener);
+    let prevOptions = usePrevious(options);
+
+    const bind = (bindOptions = {}) => {
+        const { target: bindTarget } = bindOptions;
+
+        if (ObjectUtils.isNotEmpty(bindTarget)) {
+            unbind();
+            (bindOptions.when || when) && (targetRef.current = DomHandler.getTargetElement(bindTarget));
+        }
+
+        if (!listenerRef.current && targetRef.current) {
+            listenerRef.current = (event) => listener && listener(event);
+            targetRef.current.addEventListener(type, listenerRef.current, options);
+        }
+    };
+
+    const unbind = () => {
+        if (listenerRef.current) {
+            targetRef.current.removeEventListener(type, listenerRef.current, options);
+            listenerRef.current = null;
+        }
+    };
+
+    const dispose = () => {
+        unbind();
+        // Prevent memory leak by releasing
+        prevListener = null;
+        prevOptions = null;
+    };
+
+    const updateTarget = React.useCallback(() => {
+        if (when) {
+            targetRef.current = DomHandler.getTargetElement(target);
+        } else {
+            unbind();
+            targetRef.current = null;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [target, when]);
+
+    React.useEffect(() => {
+        updateTarget();
+    }, [updateTarget]);
+
+    React.useEffect(() => {
+        const listenerChanged = `${prevListener}` !== `${listener}`;
+        const optionsChanged = prevOptions !== options;
+        const listenerExists = listenerRef.current;
+
+        if (listenerExists && (listenerChanged || optionsChanged)) {
+            unbind();
+            when && bind();
+        } else if (!listenerExists) {
+            dispose();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [listener, options, when]);
+
+    useUnmountEffect(() => {
+        dispose();
+    });
+
+    return [bind, unbind];
+};
diff --git a/components/lib/hooks/useFavicon.js b/components/lib/hooks/useFavicon.js
new file mode 100644
index 0000000000..24cb1b4e44
--- /dev/null
+++ b/components/lib/hooks/useFavicon.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+const TYPE_MAP = {
+    ico: 'image/x-icon',
+    png: 'image/png',
+    svg: 'image/svg+xml',
+    gif: 'image/gif'
+};
+
+export const useFavicon = (newIcon = '', rel = 'shortcut icon') => {
+    React.useLayoutEffect(() => {
+        if (newIcon) {
+            const linkElements = document.querySelectorAll("link[rel*='icon']");
+
+            linkElements.forEach((linkEl) => {
+                document.head.removeChild(linkEl);
+            });
+
+            const link = document.createElement('link');
+
+            link.setAttribute('type', TYPE_MAP[newIcon.split('.').pop()]);
+            link.setAttribute('rel', rel);
+            link.setAttribute('href', newIcon);
+            document.head.appendChild(link);
+        }
+    }, [newIcon, rel]);
+};
diff --git a/components/lib/hooks/useGlobalOnEscapeKey.js b/components/lib/hooks/useGlobalOnEscapeKey.js
new file mode 100644
index 0000000000..a04c7a753d
--- /dev/null
+++ b/components/lib/hooks/useGlobalOnEscapeKey.js
@@ -0,0 +1,113 @@
+import { useEffect } from 'react';
+import { DomHandler } from '../utils/Utils';
+
+/**
+ * Priorities of different components (bigger number handled first)
+ */
+export const ESC_KEY_HANDLING_PRIORITIES = {
+    SIDEBAR: 100,
+    SLIDE_MENU: 200,
+    DIALOG: 300,
+    IMAGE: 400,
+    MENU: 500,
+    OVERLAY_PANEL: 600,
+    PASSWORD: 700,
+    CASCADE_SELECT: 800,
+    SPLIT_BUTTON: 900,
+    SPEED_DIAL: 1000,
+    TOOLTIP: 1200
+};
+
+/**
+ * Object, that manages global escape key handling logic
+ */
+const globalEscKeyHandlingLogic = {
+    /**
+     * Mapping from ESC_KEY_HANDLING_PRIORITY to array of related listeners, grouped by priority
+     * @example
+     * Map<{
+     *     [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR]: Map<{
+     *         1: () => {...},
+     *         2: () => {...}
+     *     }>,
+     *     [ESC_KEY_HANDLING_PRIORITIES.DIALOG]: Map<{
+     *         1: () => {...},
+     *         2: () => {...}
+     *     }>
+     * }>;
+     */
+    escKeyListeners: new Map(),
+
+    /**
+     * Keydown handler (attached to any keydown)
+     */
+    onGlobalKeyDown(event) {
+        // Do nothing if not an "esc" key is pressed:
+        if (event.code !== 'Escape') {
+            return;
+        }
+
+        const escKeyListeners = globalEscKeyHandlingLogic.escKeyListeners;
+        const maxPrimaryPriority = Math.max(...escKeyListeners.keys());
+        const theMostImportantEscHandlersSet = escKeyListeners.get(maxPrimaryPriority);
+        const maxSecondaryPriority = Math.max(...theMostImportantEscHandlersSet.keys());
+        const theMostImportantEscHandler = theMostImportantEscHandlersSet.get(maxSecondaryPriority);
+
+        theMostImportantEscHandler(event);
+    },
+
+    /**
+     * Attach global keydown listener if there are any "esc" key handlers assigned,
+     * otherwise detach.
+     */
+    refreshGlobalKeyDownListener() {
+        const document = DomHandler.getTargetElement('document');
+
+        if (this.escKeyListeners.size > 0) {
+            document.addEventListener('keydown', this.onGlobalKeyDown);
+        } else {
+            document.removeEventListener('keydown', this.onGlobalKeyDown);
+        }
+    },
+
+    /**
+     * Add "Esc" key handler
+     */
+    addListener(callback, [primaryPriority, secondaryPriority]) {
+        const escKeyListeners = this.escKeyListeners;
+
+        if (!escKeyListeners.has(primaryPriority)) {
+            escKeyListeners.set(primaryPriority, new Map());
+        }
+
+        const primaryPriorityListeners = escKeyListeners.get(primaryPriority);
+
+        // To prevent unexpected override of callback:
+        if (primaryPriorityListeners.has(secondaryPriority)) {
+            throw new Error(`Unexpected: global esc key listener with priority [${primaryPriority}, ${secondaryPriority}] already exists.`);
+        }
+
+        primaryPriorityListeners.set(secondaryPriority, callback);
+        this.refreshGlobalKeyDownListener();
+
+        return () => {
+            primaryPriorityListeners.delete(secondaryPriority);
+
+            if (primaryPriorityListeners.size === 0) {
+                escKeyListeners.delete(primaryPriority);
+            }
+
+            this.refreshGlobalKeyDownListener();
+        };
+    }
+};
+
+export const useGlobalOnEscapeKey = ({ callback, when, priority }) => {
+    useEffect(() => {
+        if (!when) {
+            return;
+        }
+
+        return globalEscKeyHandlingLogic.addListener(callback, priority);
+    }, [callback, when, priority]);
+};
diff --git a/components/lib/hooks/useIntersectionObserver.js b/components/lib/hooks/useIntersectionObserver.js
new file mode 100644
index 0000000000..74fd3f924d
--- /dev/null
+++ b/components/lib/hooks/useIntersectionObserver.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export const useIntersectionObserver = (ref, options = {}) => {
+    const [isElementVisible, setIsElementVisible] = React.useState(false);
+
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+
+        const observer = new IntersectionObserver(([entry]) => {
+            setIsElementVisible(entry.isIntersecting);
+        }, options);
+
+        observer.observe(ref.current);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [options, ref]);
+
+    return isElementVisible;
+};
diff --git a/components/lib/hooks/useInterval.js b/components/lib/hooks/useInterval.js
new file mode 100644
index 0000000000..694525bd6d
--- /dev/null
+++ b/components/lib/hooks/useInterval.js
@@ -0,0 +1,34 @@
+/* eslint-disable */
+import * as React from 'react';
+import { useUnmountEffect } from './useUnmountEffect';
+
+export const useInterval = (fn, delay = 0, when = true) => {
+    const timeout = React.useRef(null);
+    const savedCallback = React.useRef(null);
+
+    const clear = React.useCallback(() => clearInterval(timeout.current), [timeout.current]);
+
+    React.useEffect(() => {
+        savedCallback.current = fn;
+    });
+
+    React.useEffect(() => {
+        function callback() {
+            savedCallback.current();
+        }
+
+        if (when) {
+            timeout.current = setInterval(callback, delay);
+            return clear;
+        } else {
+            clear();
+        }
+    }, [delay, when]);
+
+    useUnmountEffect(() => {
+        clear();
+    });
+
+    return [clear];
+};
+/* eslint-enable */
diff --git a/components/lib/hooks/useLocale.js b/components/lib/hooks/useLocale.js
new file mode 100644
index 0000000000..0eb74f18a8
--- /dev/null
+++ b/components/lib/hooks/useLocale.js
@@ -0,0 +1,240 @@
+/* eslint-disable */
+import * as React from 'react';
+import { PrimeReactContext } from '../../lib/api/Api';
+import PrimeReact from '../api/Api';
+
+let locales = {
+    en: {
+        accept: 'Yes',
+        addRule: 'Add Rule',
+        am: 'AM',
+        apply: 'Apply',
+        cancel: 'Cancel',
+        choose: 'Choose',
+        chooseDate: 'Choose Date',
+        chooseMonth: 'Choose Month',
+        chooseYear: 'Choose Year',
+        clear: 'Clear',
+        completed: 'Completed',
+        contains: 'Contains',
+        custom: 'Custom',
+        dateAfter: 'Date is after',
+        dateBefore: 'Date is before',
+        dateFormat: 'mm/dd/yy',
+        dateIs: 'Date is',
+        dateIsNot: 'Date is not',
+        dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+        dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        emptyFilterMessage: 'No results found',
+        emptyMessage: 'No available options',
+        emptySearchMessage: 'No results found',
+        emptySelectionMessage: 'No selected item',
+        endsWith: 'Ends with',
+        equals: 'Equals',
+        fileChosenMessage: '{0} files',
+        fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+        filter: 'Filter',
+        firstDayOfWeek: 0,
+        gt: 'Greater than',
+        gte: 'Greater than or equal to',
+        lt: 'Less than',
+        lte: 'Less than or equal to',
+        matchAll: 'Match All',
+        matchAny: 'Match Any',
+        medium: 'Medium',
+        monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        nextDecade: 'Next Decade',
+        nextHour: 'Next Hour',
+        nextMinute: 'Next Minute',
+        nextMonth: 'Next Month',
+        nextSecond: 'Next Second',
+        nextYear: 'Next Year',
+        noFileChosenMessage: 'No file chosen',
+        noFilter: 'No Filter',
+        notContains: 'Not contains',
+        notEquals: 'Not equals',
+        now: 'Now',
+        passwordPrompt: 'Enter a password',
+        pending: 'Pending',
+        pm: 'PM',
+        prevDecade: 'Previous Decade',
+        prevHour: 'Previous Hour',
+        prevMinute: 'Previous Minute',
+        prevMonth: 'Previous Month',
+        prevSecond: 'Previous Second',
+        prevYear: 'Previous Year',
+        reject: 'No',
+        removeRule: 'Remove Rule',
+        searchMessage: '{0} results are available',
+        selectionMessage: '{0} items selected',
+        showMonthAfterYear: false,
+        startsWith: 'Starts with',
+        strong: 'Strong',
+        today: 'Today',
+        upload: 'Upload',
+        weak: 'Weak',
+        weekHeader: 'Wk',
+        aria: {
+            cancelEdit: 'Cancel Edit',
+            close: 'Close',
+            collapseLabel: 'Collapse',
+            collapseRow: 'Row Collapsed',
+            editRow: 'Edit Row',
+            expandLabel: 'Expand',
+            expandRow: 'Row Expanded',
+            falseLabel: 'False',
+            filterConstraint: 'Filter Constraint',
+            filterOperator: 'Filter Operator',
+            firstPageLabel: 'First Page',
+            gridView: 'Grid View',
+            hideFilterMenu: 'Hide Filter Menu',
+            jumpToPageDropdownLabel: 'Jump to Page Dropdown',
+            jumpToPageInputLabel: 'Jump to Page Input',
+            lastPageLabel: 'Last Page',
+            listLabel: 'Option List',
+            listView: 'List View',
+            moveAllToSource: 'Move All to Source',
+            moveAllToTarget: 'Move All to Target',
+            moveBottom: 'Move Bottom',
+            moveDown: 'Move Down',
+            moveToSource: 'Move to Source',
+            moveToTarget: 'Move to Target',
+            moveTop: 'Move Top',
+            moveUp: 'Move Up',
+            navigation: 'Navigation',
+            next: 'Next',
+            nextPageLabel: 'Next Page',
+            nullLabel: 'Not Selected',
+            otpLabel: 'Please enter one time password character {0}',
+            pageLabel: 'Page {page}',
+            passwordHide: 'Hide Password',
+            passwordShow: 'Show Password',
+            previous: 'Previous',
+            prevPageLabel: 'Previous Page',
+            removeLabel: 'Remove',
+            rotateLeft: 'Rotate Left',
+            rotateRight: 'Rotate Right',
+            rowsPerPageLabel: 'Rows per page',
+            saveEdit: 'Save Edit',
+            scrollTop: 'Scroll Top',
+            selectAll: 'All items selected',
+            selectLabel: 'Select',
+            selectRow: 'Row Selected',
+            showFilterMenu: 'Show Filter Menu',
+            slide: 'Slide',
+            slideNumber: '{slideNumber}',
+            star: '1 star',
+            stars: '{star} stars',
+            trueLabel: 'True',
+            unselectAll: 'All items unselected',
+            unselectLabel: 'Unselect',
+            unselectRow: 'Row Unselected',
+            zoomImage: 'Zoom Image',
+            zoomIn: 'Zoom In',
+            zoomOut: 'Zoom Out'
+        }
+    }
+};
+
+export const useLocale = () => {
+    const context = React.useContext(PrimeReactContext);
+
+    const locale = (locale) => {
+        if (locale) {
+            if (context) context.locale = locale;
+            else PrimeReact.locale = locale;
+        }
+
+        return {
+            locale: (context && context.locale) || PrimeReact.locale,
+            options: locales[(context && context.locale) || PrimeReact.locale]
+        };
+    };
+
+    const addLocale = (locale, options) => {
+        if (locale.includes('__proto__') || locale.includes('prototype')) {
+            throw new Error('Unsafe locale detected');
+        }
+        locales[locale] = { ...locales['en'], ...options };
+    };
+
+    const updateLocaleOption = (key, value, locale) => {
+        if (key.includes('__proto__') || key.includes('prototype')) {
+            throw new Error('Unsafe key detected');
+        }
+
+        localeOptions(locale)[key] = value;
+    };
+
+    const updateLocaleOptions = (options, locale) => {
+        if (locale.includes('__proto__') || locale.includes('prototype')) {
+            throw new Error('Unsafe locale detected');
+        }
+        const _locale = locale || (context && context.locale) || PrimeReact.locale;
+
+        locales[_locale] = { ...locales[_locale], ...options };
+    };
+
+    const localeOption = (key, locale) => {
+        if (key.includes('__proto__') || key.includes('prototype')) {
+            throw new Error('Unsafe key detected');
+        }
+
+        const _locale = locale || (context && context.locale) || PrimeReact.locale;
+
+        try {
+            return localeOptions(_locale)[key];
+        } catch (error) {
+            throw new Error(`The ${key} option is not found in the current locale('${_locale}').`);
+        }
+    };
+
+    /**
+     * Find an ARIA label in the locale by key.  If options are passed it will replace all options:
+     * ```ts
+     * const ariaValue = "Page {page}, User {user}, Role {role}";
+     * const options = { page: 2, user: "John", role: "Admin" };
+     * const result = ariaLabel('yourLabel', { page: 2, user: "John", role: "Admin" })
+     * console.log(result); // Output: Page 2, User John, Role Admin
+     * ```
+     * @param {string} ariaKey key of the ARIA label to look up in locale.
+     * @param {any} options JSON options like { page: 2, user: "John", role: "Admin" }
+     * @returns the ARIA label with replaced values
+     */
+    const ariaLabel = (ariaKey, options) => {
+        if (ariaKey.includes('__proto__') || ariaKey.includes('prototype')) {
+            throw new Error('Unsafe ariaKey detected');
+        }
+        const _locale = (context && context.locale) || PrimeReact.locale;
+
+        try {
+            let ariaLabel = localeOptions(_locale)['aria'][ariaKey];
+
+            if (ariaLabel) {
+                for (const key in options) {
+                    if (options.hasOwnProperty(key)) {
+                        ariaLabel = ariaLabel.replace(`{${key}}`, options[key]);
+                    }
+                }
+            }
+
+            return ariaLabel;
+        } catch (error) {
+            throw new Error(`The ${ariaKey} option is not found in the current locale('${_locale}').`);
+        }
+    };
+
+    const localeOptions = (locale) => {
+        const _locale = locale || (context && context.locale) || PrimeReact.locale;
+        if (_locale.includes('__proto__') || _locale.includes('prototype')) {
+            throw new Error('Unsafe locale detected');
+        }
+
+        return locales[_locale];
+    };
+
+    return { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOption, localeOptions, ariaLabel };
+};
+/* eslint-enable */
diff --git a/components/lib/hooks/useMatchMedia.js b/components/lib/hooks/useMatchMedia.js
new file mode 100644
index 0000000000..c403752bc2
--- /dev/null
+++ b/components/lib/hooks/useMatchMedia.js
@@ -0,0 +1,25 @@
+/* eslint-disable */
+import * as React from 'react';
+
+export const useMatchMedia = (query, when = true) => {
+    const [matches, setMatches] = React.useState(false);
+    const matchMedia = React.useRef(null);
+
+    const handleChange = (e) => setMatches(e.matches);
+    const bind = () => matchMedia.current && matchMedia.current.addEventListener('change', handleChange);
+    const unbind = () => matchMedia.current && matchMedia.current.removeEventListener('change', handleChange) && (matchMedia.current = null);
+
+    React.useEffect(() => {
+        if (when) {
+            matchMedia.current = window.matchMedia(query);
+            setMatches(matchMedia.current.matches);
+
+            bind();
+        }
+
+        return unbind;
+    }, [query, when]);
+
+    return matches;
+};
+/* eslint-enable */
diff --git a/components/lib/hooks/useMergeProps.js b/components/lib/hooks/useMergeProps.js
new file mode 100644
index 0000000000..c49f195eea
--- /dev/null
+++ b/components/lib/hooks/useMergeProps.js
@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { mergeProps } from '../utils/Utils';
+
+/**
+ * Hook to merge properties including custom merge function for things like Tailwind merge.
+ */
+export const useMergeProps = () => {
+    const context = useContext(PrimeReactContext);
+
+    return (...props) => {
+        return mergeProps(props, context?.ptOptions);
+    };
+};
diff --git a/components/lib/hooks/useMountEffect.js b/components/lib/hooks/useMountEffect.js
new file mode 100644
index 0000000000..90ce0d08c4
--- /dev/null
+++ b/components/lib/hooks/useMountEffect.js
@@ -0,0 +1,18 @@
+/* eslint-disable */
+import * as React from 'react';
+
+/**
+ * Custom hook to run a mount effect only once.
+ * @param {*} fn the callback function
+ * @returns the hook
+ */
+export const useMountEffect = (fn) => {
+    const mounted = React.useRef(false);
+    return React.useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return fn && fn();
+        }
+    }, []);
+};
+/* eslint-enable */
diff --git a/components/lib/hooks/useMouse.js b/components/lib/hooks/useMouse.js
new file mode 100644
index 0000000000..5488806e63
--- /dev/null
+++ b/components/lib/hooks/useMouse.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useEventListener } from './useEventListener';
+
+export const useMouse = () => {
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    const ref = React.useRef(null);
+
+    const handleMouseMove = React.useCallback((event) => {
+        let x;
+        let y;
+
+        if (ref.current) {
+            const rect = event.currentTarget.getBoundingClientRect();
+
+            x = event.pageX - rect.left - (window.pageXOffset || window.scrollX);
+            y = event.pageY - rect.top - (window.pageYOffset || window.scrollY);
+        } else {
+            x = event.clientX;
+            y = event.clientY;
+        }
+
+        setPosition({ x: Math.max(0, Math.round(x)), y: Math.max(0, Math.round(y)) });
+    }, []);
+
+    const [bindMouseMoveEventListener, unbindMouseMoveEventListener] = useEventListener({
+        target: ref,
+        type: 'mousemove',
+        listener: handleMouseMove
+    });
+
+    const [bindDocumentMoveEventListener, unbindDocumentMoveEventListener] = useEventListener({
+        type: 'mousemove',
+        listener: handleMouseMove
+    });
+
+    const reset = () => setPosition({ x: 0, y: 0 });
+
+    React.useEffect(() => {
+        bindMouseMoveEventListener();
+
+        if (!ref.current) {
+            bindDocumentMoveEventListener();
+        }
+
+        return () => {
+            unbindMouseMoveEventListener();
+
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            if (!ref.current) {
+                unbindDocumentMoveEventListener();
+            }
+        };
+    }, [bindDocumentMoveEventListener, bindMouseMoveEventListener, unbindDocumentMoveEventListener, unbindMouseMoveEventListener]);
+
+    return { ref, ...position, reset };
+};
+
+export default useMouse;
diff --git a/components/lib/hooks/useMove.js b/components/lib/hooks/useMove.js
new file mode 100644
index 0000000000..248cd7cc4d
--- /dev/null
+++ b/components/lib/hooks/useMove.js
@@ -0,0 +1,156 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from 'react';
+import { useEventListener } from './useEventListener';
+
+export function useMove({ mode = 'both', initialValue = { x: 0, y: 0 } }) {
+    const [positions, setPositions] = React.useState(initialValue);
+    const [active, setActive] = React.useState(false);
+    const isMounted = React.useRef(false);
+    const isSliding = React.useRef(false);
+    const ref = React.useRef(null);
+
+    const onMouseMove = (event) => updateMousePosition({ x: event.clientX, y: event.clientY });
+
+    const handlePositionChange = ({ clampedX, clampedY }) => {
+        if (mode === 'vertical') {
+            setPositions({ y: 1 - clampedY });
+        } else if (mode === 'horizontal') {
+            setPositions({ x: clampedX });
+        } else if (mode === 'both') {
+            setPositions({ x: clampedX, y: clampedY });
+        }
+    };
+
+    const onMouseDown = (event) => {
+        startScrubbing();
+        event.preventDefault();
+        onMouseMove(event);
+    };
+
+    const stopScrubbing = () => {
+        if (isSliding.current && isMounted.current) {
+            isSliding.current = false;
+            setActive(false);
+            unbindListeners();
+        }
+    };
+
+    const onTouchMove = (event) => {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+
+        updateMousePosition({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });
+    };
+
+    const onTouchStart = (event) => {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+
+        startScrubbing();
+        onTouchMove(event);
+    };
+
+    const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({
+        type: 'mousemove',
+        listener: onMouseMove
+    });
+
+    const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({
+        type: 'mouseup',
+        listener: stopScrubbing
+    });
+
+    const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({
+        type: 'touchmove',
+        listener: onTouchMove
+    });
+
+    const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({
+        type: 'touchend',
+        listener: stopScrubbing
+    });
+
+    const [bindMouseDownListener, unbindMouseDownListener] = useEventListener({
+        target: ref,
+        type: 'mousedown',
+        listener: onMouseDown
+    });
+
+    const [bindTouchStartListener, unbindTouchStartListener] = useEventListener({
+        target: ref,
+        type: 'touchstart',
+        listener: onTouchStart,
+        options: { passive: false }
+    });
+
+    const clamp = (value, min, max) => {
+        return Math.min(Math.max(value, min), max);
+    };
+
+    const clampPositions = ({ x, y }) => {
+        return {
+            clampedX: clamp(x, 0, 1),
+            clampedY: clamp(y, 0, 1)
+        };
+    };
+
+    const bindListeners = () => {
+        bindDocumentMouseMoveListener();
+        bindDocumentMouseUpListener();
+        bindDocumentTouchMoveListener();
+        bindDocumentTouchEndListener();
+    };
+
+    const unbindListeners = () => {
+        unbindDocumentMouseMoveListener();
+        unbindDocumentMouseUpListener();
+        unbindDocumentTouchMoveListener();
+        unbindDocumentTouchEndListener();
+    };
+
+    const reset = () => {
+        setPositions(initialValue);
+    };
+
+    React.useEffect(() => {
+        isMounted.current = true;
+    }, []);
+
+    const startScrubbing = () => {
+        if (!isSliding.current && isMounted.current) {
+            isSliding.current = true;
+            setActive(true);
+            bindListeners();
+        }
+    };
+
+    const updateMousePosition = ({ x, y }) => {
+        if (isSliding.current) {
+            const rect = ref.current.getBoundingClientRect();
+            const { clampedX, clampedY } = clampPositions({
+                x: (x - rect.left) / rect.width,
+                y: (y - rect.top) / rect.height
+            });
+
+            handlePositionChange({ clampedX, clampedY });
+        }
+    };
+
+    React.useEffect(() => {
+        if (ref.current) {
+            bindMouseDownListener();
+            bindTouchStartListener();
+        }
+
+        return () => {
+            if (ref.current) {
+                unbindMouseDownListener();
+                unbindTouchStartListener();
+            }
+        };
+    }, [bindMouseDownListener, bindTouchStartListener, positions, unbindMouseDownListener, unbindTouchStartListener]);
+
+    return { ref, ...positions, active, reset };
+}
diff --git a/components/lib/hooks/useOverlayListener.js b/components/lib/hooks/useOverlayListener.js
new file mode 100644
index 0000000000..6ec531c9db
--- /dev/null
+++ b/components/lib/hooks/useOverlayListener.js
@@ -0,0 +1,83 @@
+/* eslint-disable */
+import * as React from 'react';
+import { DomHandler } from '../utils/Utils';
+import { useEventListener } from './useEventListener';
+import { useOverlayScrollListener } from './useOverlayScrollListener';
+import { useResizeListener } from './useResizeListener';
+import { useUnmountEffect } from './useUnmountEffect';
+
+export const useOverlayListener = ({ target, overlay, listener, when = true, type = 'click' }) => {
+    const targetRef = React.useRef(null);
+    const overlayRef = React.useRef(null);
+
+    /**
+     * The parameters of the 'listener' method in the following event handlers;
+     * @param {Event} event A click event of the document.
+     * @param {string} options.type The custom type to detect event.
+     * @param {boolean} options.valid It is controlled by PrimeReact. It is determined whether it is valid or not according to some custom validation.
+     */
+    const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+        target: 'window',
+        type: type,
+        listener: (event) => {
+            listener && listener(event, { type: 'outside', valid: event.which !== 3 && isOutsideClicked(event) });
+        },
+        when
+    });
+    const [bindWindowResizeListener, unbindWindowResizeListener] = useResizeListener({
+        listener: (event) => {
+            listener && listener(event, { type: 'resize', valid: !DomHandler.isTouchDevice() });
+        },
+        when
+    });
+    const [bindWindowOrientationChangeListener, unbindWindowOrientationChangeListener] = useEventListener({
+        target: 'window',
+        type: 'orientationchange',
+        listener: (event) => {
+            listener && listener(event, { type: 'orientationchange', valid: true });
+        },
+        when
+    });
+    const [bindOverlayScrollListener, unbindOverlayScrollListener] = useOverlayScrollListener({
+        target,
+        listener: (event) => {
+            listener && listener(event, { type: 'scroll', valid: true });
+        },
+        when
+    });
+
+    const isOutsideClicked = (event) => {
+        return targetRef.current && !(targetRef.current.isSameNode(event.target) || targetRef.current.contains(event.target) || (overlayRef.current && overlayRef.current.contains(event.target)));
+    };
+
+    const bind = () => {
+        bindDocumentClickListener();
+        bindWindowResizeListener();
+        bindWindowOrientationChangeListener();
+        bindOverlayScrollListener();
+    };
+
+    const unbind = () => {
+        unbindDocumentClickListener();
+        unbindWindowResizeListener();
+        unbindWindowOrientationChangeListener();
+        unbindOverlayScrollListener();
+    };
+
+    React.useEffect(() => {
+        if (when) {
+            targetRef.current = DomHandler.getTargetElement(target);
+            overlayRef.current = DomHandler.getTargetElement(overlay);
+        } else {
+            unbind();
+            targetRef.current = overlayRef.current = null;
+        }
+    }, [target, overlay, when]);
+
+    useUnmountEffect(() => {
+        unbind();
+    });
+
+    return [bind, unbind];
+};
+/* eslint-enable */
diff --git a/components/lib/hooks/useOverlayScrollListener.js b/components/lib/hooks/useOverlayScrollListener.js
new file mode 100644
index 0000000000..d89011e8f6
--- /dev/null
+++ b/components/lib/hooks/useOverlayScrollListener.js
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { usePrevious } from './usePrevious';
+import { useUnmountEffect } from './useUnmountEffect';
+
+export const useOverlayScrollListener = ({ target, listener, options, when = true }) => {
+    const context = React.useContext(PrimeReactContext);
+    const targetRef = React.useRef(null);
+    const listenerRef = React.useRef(null);
+    const scrollableParentsRef = React.useRef([]);
+    let prevListener = usePrevious(listener);
+    let prevOptions = usePrevious(options);
+
+    const bind = (bindOptions = {}) => {
+        if (ObjectUtils.isNotEmpty(bindOptions.target)) {
+            unbind();
+            (bindOptions.when || when) && (targetRef.current = DomHandler.getTargetElement(bindOptions.target));
+        }
+
+        if (!listenerRef.current && targetRef.current) {
+            const hideOnScroll = context ? context.hideOverlaysOnDocumentScrolling : PrimeReact.hideOverlaysOnDocumentScrolling;
+            const nodes = (scrollableParentsRef.current = DomHandler.getScrollableParents(targetRef.current));
+
+            // Ensure window/body is always included as fallback
+            if (!nodes.some((node) => node === document.body || node === window)) {
+                nodes.push(hideOnScroll ? window : document.body);
+            }
+
+            listenerRef.current = (event) => listener && listener(event);
+            nodes.forEach((node) => node.addEventListener('scroll', listenerRef.current, options));
+        }
+    };
+
+    const unbind = () => {
+        if (listenerRef.current) {
+            const nodes = scrollableParentsRef.current;
+
+            nodes.forEach((node) => node.removeEventListener('scroll', listenerRef.current, options));
+
+            listenerRef.current = null;
+        }
+    };
+
+    const dispose = () => {
+        unbind();
+        // #5927 prevent memory leak by releasing
+        scrollableParentsRef.current = null;
+        prevListener = null;
+        prevOptions = null;
+    };
+
+    const updateTarget = React.useCallback(() => {
+        if (when) {
+            targetRef.current = DomHandler.getTargetElement(target);
+        } else {
+            unbind();
+            targetRef.current = null;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [target, when]);
+
+    React.useEffect(() => {
+        updateTarget();
+    }, [updateTarget]);
+
+    React.useEffect(() => {
+        const listenerChanged = `${prevListener}` !== `${listener}`;
+        const optionsChanged = prevOptions !== options;
+        const listenerExists = listenerRef.current;
+
+        if (listenerExists && (listenerChanged || optionsChanged)) {
+            unbind();
+            when && bind();
+        } else if (!listenerExists) {
+            dispose();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [listener, options, when]);
+
+    useUnmountEffect(() => {
+        dispose();
+    });
+
+    return [bind, unbind];
+};
diff --git a/components/lib/hooks/usePrevious.js b/components/lib/hooks/usePrevious.js
new file mode 100644
index 0000000000..f7236a00c9
--- /dev/null
+++ b/components/lib/hooks/usePrevious.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+export const usePrevious = (newValue) => {
+    const ref = React.useRef(null);
+
+    React.useEffect(() => {
+        ref.current = newValue;
+
+        return () => {
+            ref.current = null;
+        };
+    }, [newValue]);
+
+    return ref.current;
+};
diff --git a/components/lib/hooks/useResizeListener.js b/components/lib/hooks/useResizeListener.js
new file mode 100644
index 0000000000..6bfca70390
--- /dev/null
+++ b/components/lib/hooks/useResizeListener.js
@@ -0,0 +1,9 @@
+import { useEventListener } from './useEventListener';
+
+export const useResizeListener = ({ listener, when = true }) =>
+    useEventListener({
+        target: 'window',
+        type: 'resize',
+        listener,
+        when
+    });
diff --git a/components/lib/hooks/useStorage.js b/components/lib/hooks/useStorage.js
new file mode 100644
index 0000000000..85205f1ff5
--- /dev/null
+++ b/components/lib/hooks/useStorage.js
@@ -0,0 +1,88 @@
+/* eslint-disable */
+import * as React from 'react';
+import { useEventListener } from './useEventListener';
+
+/**
+ * Hook to wrap around useState that stores the value in the browser local/session storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in local/session storage
+ * @param {string} storage either 'local' or 'session' for what type of storage
+ * @returns a stateful value, and a function to update it.
+ */
+export const useStorage = (initialValue, key, storage = 'local') => {
+    // Since the local storage API isn't available in server-rendering environments,
+    // we check that typeof window !== 'undefined' to make SSR and SSG work properly.
+    const storageAvailable = typeof window !== 'undefined';
+
+    // subscribe to window storage event so changes in one tab to a stored value
+    // are properly reflected in all tabs
+    const [bindWindowStorageListener, unbindWindowStorageListener] = useEventListener({
+        target: 'window',
+        type: 'storage',
+        listener: (event) => {
+            const area = storage === 'local' ? window.localStorage : window.sessionStorage;
+            if (event.storageArea === area && event.key === key) {
+                const newValue = event.newValue ? JSON.parse(event.newValue) : undefined;
+                setStoredValue(newValue);
+            }
+        }
+    });
+
+    const [storedValue, setStoredValue] = React.useState(initialValue);
+
+    const setValue = (value) => {
+        try {
+            // Allow value to be a function so we have same API as useState
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            setStoredValue(valueToStore);
+            if (storageAvailable) {
+                const serializedValue = JSON.stringify(valueToStore);
+                storage === 'local' ? window.localStorage.setItem(key, serializedValue) : window.sessionStorage.setItem(key, serializedValue);
+            }
+        } catch (error) {
+            throw new Error(`PrimeReact useStorage: Failed to serialize the value at key: ${key}`);
+        }
+    };
+
+    React.useEffect(() => {
+        if (!storageAvailable) {
+            setStoredValue(initialValue);
+        }
+        try {
+            const item = storage === 'local' ? window.localStorage.getItem(key) : window.sessionStorage.getItem(key);
+            setStoredValue(item ? JSON.parse(item) : initialValue);
+        } catch (error) {
+            // If error also return initialValue
+            setStoredValue(initialValue);
+        }
+
+        bindWindowStorageListener();
+        return () => unbindWindowStorageListener();
+    }, []);
+
+    return [storedValue, setValue];
+};
+
+/**
+ * Hook to wrap around useState that stores the value in the browser local storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in local storage
+ * @returns a stateful value, and a function to update it.
+ */
+export const useLocalStorage = (initialValue, key) => {
+    return useStorage(initialValue, key, 'local');
+};
+
+/**
+ * Hook to wrap around useState that stores the value in the browser session storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in session storage
+ * @returns a stateful value, and a function to update it.
+ */
+export const useSessionStorage = (initialValue, key) => {
+    return useStorage(initialValue, key, 'session');
+};
+/* eslint-enable */
diff --git a/components/lib/hooks/useStyle.js b/components/lib/hooks/useStyle.js
new file mode 100644
index 0000000000..83c030024d
--- /dev/null
+++ b/components/lib/hooks/useStyle.js
@@ -0,0 +1,97 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { DomHandler } from '../utils/Utils';
+
+let _id = 0;
+
+export const useStyle = (css, options = {}) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    const styleRef = useRef(null);
+    const context = useContext(PrimeReactContext);
+
+    const defaultDocument = DomHandler.isClient() ? window.document : undefined;
+    const { document = defaultDocument, manual = false, name = `style_${++_id}`, id = undefined, media = undefined } = options;
+
+    const getCurrentStyleRef = (styleContainer) => {
+        const existingStyle = styleContainer.querySelector(`style[data-primereact-style-id="${name}"]`);
+
+        if (existingStyle) {
+            return existingStyle;
+        }
+
+        if (id !== undefined) {
+            const existingElement = document.getElementById(id);
+
+            if (existingElement) {
+                return existingElement;
+            }
+        }
+
+        // finally if not found create the new style
+        return document.createElement('style');
+    };
+
+    const update = (newCSS) => {
+        isLoaded && css !== newCSS && (styleRef.current.textContent = newCSS);
+    };
+
+    const load = () => {
+        if (!document || isLoaded) {
+            return;
+        }
+
+        const styleContainer = context?.styleContainer || document.head;
+
+        styleRef.current = getCurrentStyleRef(styleContainer);
+
+        if (!styleRef.current.isConnected) {
+            styleRef.current.type = 'text/css';
+
+            if (id) {
+                styleRef.current.id = id;
+            }
+
+            if (media) {
+                styleRef.current.media = media;
+            }
+
+            DomHandler.addNonce(styleRef.current, (context && context.nonce) || PrimeReact.nonce);
+            styleContainer.appendChild(styleRef.current);
+
+            if (name) {
+                styleRef.current.setAttribute('data-primereact-style-id', name);
+            }
+        }
+
+        styleRef.current.textContent = css;
+
+        setIsLoaded(true);
+    };
+
+    const unload = () => {
+        if (!document || !styleRef.current) {
+            return;
+        }
+
+        DomHandler.removeInlineStyle(styleRef.current);
+        setIsLoaded(false);
+    };
+
+    useEffect(() => {
+        if (!manual) {
+            load();
+        }
+
+        // return () => {if (!manual) unload()}; /* @todo */
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [manual]);
+
+    return {
+        id,
+        name,
+        update,
+        unload,
+        load,
+        isLoaded
+    };
+};
diff --git a/components/lib/hooks/useTimeout.js b/components/lib/hooks/useTimeout.js
new file mode 100644
index 0000000000..289b64176b
--- /dev/null
+++ b/components/lib/hooks/useTimeout.js
@@ -0,0 +1,34 @@
+/* eslint-disable */
+import * as React from 'react';
+import { useUnmountEffect } from './useUnmountEffect';
+
+export const useTimeout = (fn, delay = 0, when = true) => {
+    const timeout = React.useRef(null);
+    const savedCallback = React.useRef(null);
+
+    const clear = React.useCallback(() => clearTimeout(timeout.current), [timeout.current]);
+
+    React.useEffect(() => {
+        savedCallback.current = fn;
+    });
+
+    React.useEffect(() => {
+        function callback() {
+            savedCallback.current();
+        }
+
+        if (when) {
+            timeout.current = setTimeout(callback, delay);
+            return clear;
+        } else {
+            clear();
+        }
+    }, [delay, when]);
+
+    useUnmountEffect(() => {
+        clear();
+    });
+
+    return [clear];
+};
+/* eslint-enable */
diff --git a/components/lib/hooks/useUnmountEffect.js b/components/lib/hooks/useUnmountEffect.js
new file mode 100644
index 0000000000..0fe1f4ca83
--- /dev/null
+++ b/components/lib/hooks/useUnmountEffect.js
@@ -0,0 +1,5 @@
+/* eslint-disable */
+import * as React from 'react';
+
+export const useUnmountEffect = (fn) => React.useEffect(() => fn, []);
+/* eslint-enable */
diff --git a/components/lib/hooks/useUpdateEffect.js b/components/lib/hooks/useUpdateEffect.js
new file mode 100644
index 0000000000..c83b3d9253
--- /dev/null
+++ b/components/lib/hooks/useUpdateEffect.js
@@ -0,0 +1,15 @@
+/* eslint-disable */
+import * as React from 'react';
+
+export const useUpdateEffect = (fn, deps) => {
+    const mounted = React.useRef(false);
+    return React.useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+
+        return fn && fn();
+    }, deps);
+};
+/* eslint-enable */
diff --git a/components/lib/iconbase/IconBase.js b/components/lib/iconbase/IconBase.js
new file mode 100644
index 0000000000..0308396fc5
--- /dev/null
+++ b/components/lib/iconbase/IconBase.js
@@ -0,0 +1,30 @@
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+export const IconBase = {
+    defaultProps: {
+        __TYPE: 'IconBase',
+        className: null,
+        label: null,
+        spin: false
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, IconBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, IconBase.defaultProps),
+    getPTI: (props) => {
+        const isLabelEmpty = ObjectUtils.isEmpty(props.label);
+        const otherProps = IconBase.getOtherProps(props);
+        const ptiProps = {
+            className: classNames(
+                'p-icon',
+                {
+                    'p-icon-spin': props.spin
+                },
+                props.className
+            ),
+            role: !isLabelEmpty ? 'img' : undefined,
+            'aria-label': !isLabelEmpty ? props.label : undefined,
+            'aria-hidden': props.label ? isLabelEmpty : undefined
+        };
+
+        return ObjectUtils.getMergedProps(otherProps, ptiProps);
+    }
+};
diff --git a/components/lib/iconbase/iconbase.d.ts b/components/lib/iconbase/iconbase.d.ts
new file mode 100644
index 0000000000..1287da3d53
--- /dev/null
+++ b/components/lib/iconbase/iconbase.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface IconBaseProps extends Omit<React.SVGProps<SVGSVGElement>, 'ref'> {
+    className?: string | undefined;
+    label?: string | undefined;
+    spin?: boolean | undefined;
+}
+
+export declare class IconBase {}
diff --git a/components/lib/iconbase/package.json b/components/lib/iconbase/package.json
new file mode 100644
index 0000000000..adbe4ccb63
--- /dev/null
+++ b/components/lib/iconbase/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./iconbase.cjs.js",
+    "module": "./iconbase.esm.js",
+    "unpkg": "./iconbase.min.js",
+    "types": "./iconbase.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/iconfield/IconField.d.ts b/components/lib/iconfield/IconField.d.ts
new file mode 100644
index 0000000000..a0cf2bea64
--- /dev/null
+++ b/components/lib/iconfield/IconField.d.ts
@@ -0,0 +1,95 @@
+/**
+ *
+ * IconField wraps an input and an icon.
+ *
+ * [Live Demo](https://www.primereact.org/iconfield/)
+ *
+ * @module iconfield
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type IconFieldPassThroughType<T> = PassThroughType<T, IconFieldPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface IconFieldPassThroughMethodOptions {
+    props: IconFieldProps;
+    context: IconFieldContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link IconFieldProps.pt}
+ */
+export interface IconFieldPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: IconFieldPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in IconField component.
+ */
+export interface IconFieldContext {
+    /**
+     * Position of the icon
+     * @defaultValue right
+     */
+    iconPosition?: 'left' | 'right' | undefined;
+}
+
+/**
+ * Defines valid properties in IconField component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface IconFieldProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'iconPosition'> {
+    /**
+     * Position of the icon
+     * @defaultValue right
+     */
+    iconPosition?: 'left' | 'right' | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {IconFieldPassThroughOptions}
+     */
+    pt?: IconFieldPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - IconField**
+ *
+ * _IconField is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const IconField: React.ForwardRefExoticComponent<IconFieldProps & React.RefAttributes<HTMLInputElement>>;
diff --git a/components/lib/iconfield/IconField.js b/components/lib/iconfield/IconField.js
new file mode 100644
index 0000000000..b8c8167236
--- /dev/null
+++ b/components/lib/iconfield/IconField.js
@@ -0,0 +1,42 @@
+import React, { Children, cloneElement, useContext, useRef } from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { IconFieldBase } from './IconFieldBase';
+
+export const IconField = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const elementRef = useRef(ref);
+        const mergeProps = useMergeProps();
+        const context = useContext(PrimeReactContext);
+        const props = IconFieldBase.getProps(inProps, context);
+
+        const { ptm, cx } = IconFieldBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            context: {
+                iconPosition: props.iconPosition
+            }
+        });
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root', { iconPosition: props.iconPosition }))
+            },
+            IconFieldBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps} ref={elementRef}>
+                {Children.map(props.children, (child, index) =>
+                    cloneElement(child, {
+                        iconPosition: props.iconPosition
+                    })
+                )}
+            </div>
+        );
+    })
+);
+
+IconField.displayName = 'IconField';
diff --git a/components/lib/iconfield/IconFieldBase.js b/components/lib/iconfield/IconFieldBase.js
new file mode 100644
index 0000000000..bed83a0160
--- /dev/null
+++ b/components/lib/iconfield/IconFieldBase.js
@@ -0,0 +1,24 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-icon-field', {
+            'p-icon-field-right': props.iconPosition === 'right',
+            'p-icon-field-left': props.iconPosition === 'left'
+        })
+};
+
+export const IconFieldBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'IconField',
+        __parentMetadata: null,
+        children: undefined,
+        className: null,
+        iconPosition: 'right'
+    },
+
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/iconfield/package.json b/components/lib/iconfield/package.json
new file mode 100644
index 0000000000..e81dc1feeb
--- /dev/null
+++ b/components/lib/iconfield/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./iconfield.cjs.js",
+    "module": "./iconfield.esm.js",
+    "unpkg": "./iconfield.min.js",
+    "types": "./iconfield.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angledoubledown/index.d.ts b/components/lib/icons/angledoubledown/index.d.ts
new file mode 100644
index 0000000000..41a40f58c0
--- /dev/null
+++ b/components/lib/icons/angledoubledown/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase/iconbase';
+
+/**
+ * Defines valid properties in AngleDoubleDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleDoubleDownIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleDoubleDownIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleDoubleDownIcon extends React.Component<AngleDoubleDownIconProps, any> {}
diff --git a/components/lib/icons/angledoubledown/index.js b/components/lib/icons/angledoubledown/index.js
new file mode 100644
index 0000000000..7d88ef98ad
--- /dev/null
+++ b/components/lib/icons/angledoubledown/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleDoubleDownIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M6.70786 6.59831C6.80043 6.63674 6.89974 6.65629 6.99997 6.65581C7.19621 6.64081 7.37877 6.54953 7.50853 6.40153L11.0685 2.8416C11.1364 2.69925 11.1586 2.53932 11.132 2.38384C11.1053 2.22837 11.0311 2.08498 10.9195 1.97343C10.808 1.86188 10.6646 1.78766 10.5091 1.76099C10.3536 1.73431 10.1937 1.75649 10.0513 1.82448L6.99997 4.87585L3.9486 1.82448C3.80625 1.75649 3.64632 1.73431 3.49084 1.76099C3.33536 1.78766 3.19197 1.86188 3.08043 1.97343C2.96888 2.08498 2.89466 2.22837 2.86798 2.38384C2.84131 2.53932 2.86349 2.69925 2.93147 2.8416L6.46089 6.43205C6.53132 6.50336 6.61528 6.55989 6.70786 6.59831ZM6.70786 12.1925C6.80043 12.2309 6.89974 12.2505 6.99997 12.25C7.10241 12.2465 7.20306 12.2222 7.29575 12.1785C7.38845 12.1348 7.47124 12.0726 7.53905 11.9957L11.0685 8.46629C11.1614 8.32292 11.2036 8.15249 11.1881 7.98233C11.1727 7.81216 11.1005 7.6521 10.9833 7.52781C10.866 7.40353 10.7104 7.3222 10.5415 7.29688C10.3725 7.27155 10.1999 7.30369 10.0513 7.38814L6.99997 10.4395L3.9486 7.38814C3.80006 7.30369 3.62747 7.27155 3.45849 7.29688C3.28951 7.3222 3.13393 7.40353 3.01667 7.52781C2.89942 7.6521 2.82729 7.81216 2.81184 7.98233C2.79639 8.15249 2.83852 8.32292 2.93148 8.46629L6.4609 12.0262C6.53133 12.0975 6.61529 12.1541 6.70786 12.1925Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleDoubleDownIcon.displayName = 'AngleDoubleDownIcon';
diff --git a/components/lib/icons/angledoubledown/package.json b/components/lib/icons/angledoubledown/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angledoubledown/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angledoubleleft/index.d.ts b/components/lib/icons/angledoubleleft/index.d.ts
new file mode 100644
index 0000000000..547ba20b04
--- /dev/null
+++ b/components/lib/icons/angledoubleleft/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in AngleDoubleLeftIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleDoubleLeftIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleDoubleLeftIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleDoubleLeftIcon extends React.Component<AngleDoubleLeftIconProps, any> {}
diff --git a/components/lib/icons/angledoubleleft/index.js b/components/lib/icons/angledoubleleft/index.js
new file mode 100644
index 0000000000..642f13fe96
--- /dev/null
+++ b/components/lib/icons/angledoubleleft/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleDoubleLeftIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M5.71602 11.164C5.80782 11.2021 5.9063 11.2215 6.00569 11.221C6.20216 11.2301 6.39427 11.1612 6.54025 11.0294C6.68191 10.8875 6.76148 10.6953 6.76148 10.4948C6.76148 10.2943 6.68191 10.1021 6.54025 9.96024L3.51441 6.9344L6.54025 3.90855C6.624 3.76126 6.65587 3.59011 6.63076 3.42254C6.60564 3.25498 6.525 3.10069 6.40175 2.98442C6.2785 2.86815 6.11978 2.79662 5.95104 2.7813C5.78229 2.76598 5.61329 2.80776 5.47112 2.89994L1.97123 6.39983C1.82957 6.54167 1.75 6.73393 1.75 6.9344C1.75 7.13486 1.82957 7.32712 1.97123 7.46896L5.47112 10.9991C5.54096 11.0698 5.62422 11.1259 5.71602 11.164ZM11.0488 10.9689C11.1775 11.1156 11.3585 11.2061 11.5531 11.221C11.7477 11.2061 11.9288 11.1156 12.0574 10.9689C12.1815 10.8302 12.25 10.6506 12.25 10.4645C12.25 10.2785 12.1815 10.0989 12.0574 9.96024L9.03158 6.93439L12.0574 3.90855C12.1248 3.76739 12.1468 3.60881 12.1204 3.45463C12.0939 3.30045 12.0203 3.15826 11.9097 3.04765C11.7991 2.93703 11.6569 2.86343 11.5027 2.83698C11.3486 2.81053 11.19 2.83252 11.0488 2.89994L7.51865 6.36957C7.37699 6.51141 7.29742 6.70367 7.29742 6.90414C7.29742 7.1046 7.37699 7.29686 7.51865 7.4387L11.0488 10.9689Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleDoubleLeftIcon.displayName = 'AngleDoubleLeftIcon';
diff --git a/components/lib/icons/angledoubleleft/package.json b/components/lib/icons/angledoubleleft/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angledoubleleft/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angledoubleright/index.d.ts b/components/lib/icons/angledoubleright/index.d.ts
new file mode 100644
index 0000000000..d6d9ddb757
--- /dev/null
+++ b/components/lib/icons/angledoubleright/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in AngleDoubleRightIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleDoubleRightIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleDoubleRightIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleDoubleRightIcon extends React.Component<AngleDoubleRightIconProps, any> {}
diff --git a/components/lib/icons/angledoubleright/index.js b/components/lib/icons/angledoubleright/index.js
new file mode 100644
index 0000000000..f5edff84c9
--- /dev/null
+++ b/components/lib/icons/angledoubleright/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleDoubleRightIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M7.68757 11.1451C7.7791 11.1831 7.8773 11.2024 7.9764 11.2019C8.07769 11.1985 8.17721 11.1745 8.26886 11.1312C8.36052 11.088 8.44238 11.0265 8.50943 10.9505L12.0294 7.49085C12.1707 7.34942 12.25 7.15771 12.25 6.95782C12.25 6.75794 12.1707 6.56622 12.0294 6.42479L8.50943 2.90479C8.37014 2.82159 8.20774 2.78551 8.04633 2.80192C7.88491 2.81833 7.73309 2.88635 7.6134 2.99588C7.4937 3.10541 7.41252 3.25061 7.38189 3.40994C7.35126 3.56927 7.37282 3.73423 7.44337 3.88033L10.4605 6.89748L7.44337 9.91463C7.30212 10.0561 7.22278 10.2478 7.22278 10.4477C7.22278 10.6475 7.30212 10.8393 7.44337 10.9807C7.51301 11.0512 7.59603 11.1071 7.68757 11.1451ZM1.94207 10.9505C2.07037 11.0968 2.25089 11.1871 2.44493 11.2019C2.63898 11.1871 2.81949 11.0968 2.94779 10.9505L6.46779 7.49085C6.60905 7.34942 6.68839 7.15771 6.68839 6.95782C6.68839 6.75793 6.60905 6.56622 6.46779 6.42479L2.94779 2.90479C2.80704 2.83757 2.6489 2.81563 2.49517 2.84201C2.34143 2.86839 2.19965 2.94178 2.08936 3.05207C1.97906 3.16237 1.90567 3.30415 1.8793 3.45788C1.85292 3.61162 1.87485 3.76975 1.94207 3.9105L4.95922 6.92765L1.94207 9.9448C1.81838 10.0831 1.75 10.2621 1.75 10.4477C1.75 10.6332 1.81838 10.8122 1.94207 10.9505Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleDoubleRightIcon.displayName = 'AngleDoubleRightIcon';
diff --git a/components/lib/icons/angledoubleright/package.json b/components/lib/icons/angledoubleright/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angledoubleright/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angledoubleup/index.d.ts b/components/lib/icons/angledoubleup/index.d.ts
new file mode 100644
index 0000000000..5548a2df69
--- /dev/null
+++ b/components/lib/icons/angledoubleup/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in AngleDoubleUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleDoubleUpIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleDoubleUpIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleDoubleUpIcon extends React.Component<AngleDoubleUpIconProps, any> {}
diff --git a/components/lib/icons/angledoubleup/index.js b/components/lib/icons/angledoubleup/index.js
new file mode 100644
index 0000000000..d59483c835
--- /dev/null
+++ b/components/lib/icons/angledoubleup/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleDoubleUpIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M10.1504 6.67719C10.2417 6.71508 10.3396 6.73436 10.4385 6.73389C10.6338 6.74289 10.8249 6.67441 10.97 6.54334C11.1109 6.4023 11.19 6.21112 11.19 6.01178C11.19 5.81245 11.1109 5.62127 10.97 5.48023L7.45977 1.96998C7.31873 1.82912 7.12755 1.75 6.92821 1.75C6.72888 1.75 6.5377 1.82912 6.39666 1.96998L2.9165 5.45014C2.83353 5.58905 2.79755 5.751 2.81392 5.91196C2.83028 6.07293 2.89811 6.22433 3.00734 6.34369C3.11656 6.46306 3.26137 6.54402 3.42025 6.57456C3.57914 6.60511 3.74364 6.5836 3.88934 6.51325L6.89813 3.50446L9.90691 6.51325C9.97636 6.58357 10.0592 6.6393 10.1504 6.67719ZM9.93702 11.9993C10.065 12.1452 10.245 12.2352 10.4385 12.25C10.632 12.2352 10.812 12.1452 10.9399 11.9993C11.0633 11.8614 11.1315 11.6828 11.1315 11.4978C11.1315 11.3128 11.0633 11.1342 10.9399 10.9963L7.48987 7.48609C7.34883 7.34523 7.15765 7.26611 6.95832 7.26611C6.75899 7.26611 6.5678 7.34523 6.42677 7.48609L2.91652 10.9963C2.84948 11.1367 2.82761 11.2944 2.85391 11.4477C2.88022 11.601 2.9534 11.7424 3.06339 11.8524C3.17338 11.9624 3.31477 12.0356 3.46808 12.0619C3.62139 12.0882 3.77908 12.0663 3.91945 11.9993L6.92823 8.99048L9.93702 11.9993Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleDoubleUpIcon.displayName = 'AngleDoubleUpIcon';
diff --git a/components/lib/icons/angledoubleup/package.json b/components/lib/icons/angledoubleup/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angledoubleup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angledown/index.d.ts b/components/lib/icons/angledown/index.d.ts
new file mode 100644
index 0000000000..982013fdce
--- /dev/null
+++ b/components/lib/icons/angledown/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in AngleDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleDownIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleDownIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleDownIcon extends React.Component<AngleDownIconProps, any> {}
diff --git a/components/lib/icons/angledown/index.js b/components/lib/icons/angledown/index.js
new file mode 100644
index 0000000000..d01194c5fc
--- /dev/null
+++ b/components/lib/icons/angledown/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleDownIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M3.58659 4.5007C3.68513 4.50023 3.78277 4.51945 3.87379 4.55723C3.9648 4.59501 4.04735 4.65058 4.11659 4.7207L7.11659 7.7207L10.1166 4.7207C10.2619 4.65055 10.4259 4.62911 10.5843 4.65956C10.7427 4.69002 10.8871 4.77074 10.996 4.88976C11.1049 5.00877 11.1726 5.15973 11.1889 5.32022C11.2052 5.48072 11.1693 5.6422 11.0866 5.7807L7.58659 9.2807C7.44597 9.42115 7.25534 9.50004 7.05659 9.50004C6.85784 9.50004 6.66722 9.42115 6.52659 9.2807L3.02659 5.7807C2.88614 5.64007 2.80725 5.44945 2.80725 5.2507C2.80725 5.05195 2.88614 4.86132 3.02659 4.7207C3.09932 4.64685 3.18675 4.58911 3.28322 4.55121C3.37969 4.51331 3.48305 4.4961 3.58659 4.5007Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleDownIcon.displayName = 'AngleDownIcon';
diff --git a/components/lib/icons/angledown/package.json b/components/lib/icons/angledown/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angledown/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angleleft/index.d.ts b/components/lib/icons/angleleft/index.d.ts
new file mode 100644
index 0000000000..6165c94216
--- /dev/null
+++ b/components/lib/icons/angleleft/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in AngleLeftIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleLeftIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleLeftIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleLeftIcon extends React.Component<AngleLeftIconProps, any> {}
diff --git a/components/lib/icons/angleleft/index.js b/components/lib/icons/angleleft/index.js
new file mode 100644
index 0000000000..3c868d8e3a
--- /dev/null
+++ b/components/lib/icons/angleleft/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleLeftIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M8.75 11.185C8.65146 11.1854 8.55381 11.1662 8.4628 11.1284C8.37179 11.0906 8.28924 11.0351 8.22 10.965L4.72 7.46496C4.57955 7.32433 4.50066 7.13371 4.50066 6.93496C4.50066 6.73621 4.57955 6.54558 4.72 6.40496L8.22 2.93496C8.36095 2.84357 8.52851 2.80215 8.69582 2.81733C8.86312 2.83252 9.02048 2.90344 9.14268 3.01872C9.26487 3.134 9.34483 3.28696 9.36973 3.4531C9.39463 3.61924 9.36303 3.78892 9.28 3.93496L6.28 6.93496L9.28 9.93496C9.42045 10.0756 9.49934 10.2662 9.49934 10.465C9.49934 10.6637 9.42045 10.8543 9.28 10.995C9.13526 11.1257 8.9448 11.1939 8.75 11.185Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleLeftIcon.displayName = 'AngleLeftIcon';
diff --git a/components/lib/icons/angleleft/package.json b/components/lib/icons/angleleft/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angleleft/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angleright/index.d.ts b/components/lib/icons/angleright/index.d.ts
new file mode 100644
index 0000000000..d5692439be
--- /dev/null
+++ b/components/lib/icons/angleright/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in AngleRightIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleRightIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleRightIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleRightIcon extends React.Component<AngleRightIconProps, any> {}
diff --git a/components/lib/icons/angleright/index.js b/components/lib/icons/angleright/index.js
new file mode 100644
index 0000000000..afbe569780
--- /dev/null
+++ b/components/lib/icons/angleright/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleRightIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M5.25 11.1728C5.14929 11.1694 5.05033 11.1455 4.9592 11.1025C4.86806 11.0595 4.78666 10.9984 4.72 10.9228C4.57955 10.7822 4.50066 10.5916 4.50066 10.3928C4.50066 10.1941 4.57955 10.0035 4.72 9.86283L7.72 6.86283L4.72 3.86283C4.66067 3.71882 4.64765 3.55991 4.68275 3.40816C4.71785 3.25642 4.79932 3.11936 4.91585 3.01602C5.03238 2.91268 5.17819 2.84819 5.33305 2.83149C5.4879 2.81479 5.64411 2.84671 5.78 2.92283L9.28 6.42283C9.42045 6.56346 9.49934 6.75408 9.49934 6.95283C9.49934 7.15158 9.42045 7.34221 9.28 7.48283L5.78 10.9228C5.71333 10.9984 5.63193 11.0595 5.5408 11.1025C5.44966 11.1455 5.35071 11.1694 5.25 11.1728Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleRightIcon.displayName = 'AngleRightIcon';
diff --git a/components/lib/icons/angleright/package.json b/components/lib/icons/angleright/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angleright/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/angleup/index.d.ts b/components/lib/icons/angleup/index.d.ts
new file mode 100644
index 0000000000..40715bd7e2
--- /dev/null
+++ b/components/lib/icons/angleup/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in AngleUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface AngleUpIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - AngleUpIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class AngleUpIcon extends React.Component<AngleUpIconProps, any> {}
diff --git a/components/lib/icons/angleup/index.js b/components/lib/icons/angleup/index.js
new file mode 100644
index 0000000000..9dd5a0426e
--- /dev/null
+++ b/components/lib/icons/angleup/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const AngleUpIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M10.4134 9.49931C10.3148 9.49977 10.2172 9.48055 10.1262 9.44278C10.0352 9.405 9.95263 9.34942 9.88338 9.27931L6.88338 6.27931L3.88338 9.27931C3.73811 9.34946 3.57409 9.3709 3.41567 9.34044C3.25724 9.30999 3.11286 9.22926 3.00395 9.11025C2.89504 8.99124 2.82741 8.84028 2.8111 8.67978C2.79478 8.51928 2.83065 8.35781 2.91338 8.21931L6.41338 4.71931C6.55401 4.57886 6.74463 4.49997 6.94338 4.49997C7.14213 4.49997 7.33276 4.57886 7.47338 4.71931L10.9734 8.21931C11.1138 8.35994 11.1927 8.55056 11.1927 8.74931C11.1927 8.94806 11.1138 9.13868 10.9734 9.27931C10.9007 9.35315 10.8132 9.41089 10.7168 9.44879C10.6203 9.48669 10.5169 9.5039 10.4134 9.49931Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+AngleUpIcon.displayName = 'AngleUpIcon';
diff --git a/components/lib/icons/angleup/package.json b/components/lib/icons/angleup/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/angleup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/arrowdown/index.d.ts b/components/lib/icons/arrowdown/index.d.ts
new file mode 100644
index 0000000000..7b34bb5570
--- /dev/null
+++ b/components/lib/icons/arrowdown/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ArrowDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ArrowDownIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ArrowDownIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ArrowDownIcon extends React.Component<ArrowDownIconProps, any> {}
diff --git a/components/lib/icons/arrowdown/index.js b/components/lib/icons/arrowdown/index.js
new file mode 100644
index 0000000000..41acddee39
--- /dev/null
+++ b/components/lib/icons/arrowdown/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ArrowDownIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M6.99994 14C6.91097 14.0004 6.82281 13.983 6.74064 13.9489C6.65843 13.9148 6.58387 13.8646 6.52133 13.8013L1.10198 8.38193C0.982318 8.25351 0.917175 8.08367 0.920272 7.90817C0.923368 7.73267 0.994462 7.56523 1.11858 7.44111C1.24269 7.317 1.41014 7.2459 1.58563 7.2428C1.76113 7.23971 1.93098 7.30485 2.0594 7.42451L6.32263 11.6877V0.677419C6.32263 0.497756 6.394 0.325452 6.52104 0.198411C6.64808 0.0713706 6.82039 0 7.00005 0C7.17971 0 7.35202 0.0713706 7.47906 0.198411C7.6061 0.325452 7.67747 0.497756 7.67747 0.677419V11.6877L11.9407 7.42451C12.0691 7.30485 12.2389 7.23971 12.4144 7.2428C12.5899 7.2459 12.7574 7.317 12.8815 7.44111C13.0056 7.56523 13.0767 7.73267 13.0798 7.90817C13.0829 8.08367 13.0178 8.25351 12.8981 8.38193L7.47875 13.8013C7.41621 13.8646 7.34164 13.9148 7.25944 13.9489C7.17727 13.983 7.08912 14.0004 7.00015 14C7.00012 14 7.00009 14 7.00005 14C7.00001 14 6.99998 14 6.99994 14Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ArrowDownIcon.displayName = 'ArrowDownIcon';
diff --git a/components/lib/icons/arrowdown/package.json b/components/lib/icons/arrowdown/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/arrowdown/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/arrowup/index.d.ts b/components/lib/icons/arrowup/index.d.ts
new file mode 100644
index 0000000000..ad4504cb03
--- /dev/null
+++ b/components/lib/icons/arrowup/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ArrowUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ArrowUpIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ArrowUpIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ArrowUpIcon extends React.Component<ArrowUpIconProps, any> {}
diff --git a/components/lib/icons/arrowup/index.js b/components/lib/icons/arrowup/index.js
new file mode 100644
index 0000000000..18b5728913
--- /dev/null
+++ b/components/lib/icons/arrowup/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ArrowUpIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M6.51551 13.799C6.64205 13.9255 6.813 13.9977 6.99193 14C7.17087 13.9977 7.34182 13.9255 7.46835 13.799C7.59489 13.6725 7.66701 13.5015 7.66935 13.3226V2.31233L11.9326 6.57554C11.9951 6.63887 12.0697 6.68907 12.1519 6.72319C12.2341 6.75731 12.3223 6.77467 12.4113 6.77425C12.5003 6.77467 12.5885 6.75731 12.6707 6.72319C12.7529 6.68907 12.8274 6.63887 12.89 6.57554C13.0168 6.44853 13.0881 6.27635 13.0881 6.09683C13.0881 5.91732 13.0168 5.74514 12.89 5.61812L7.48846 0.216594C7.48274 0.210436 7.4769 0.204374 7.47094 0.198411C7.3439 0.0713707 7.1716 0 6.99193 0C6.81227 0 6.63997 0.0713707 6.51293 0.198411C6.50704 0.204296 6.50128 0.210278 6.49563 0.216354L1.09386 5.61812C0.974201 5.74654 0.909057 5.91639 0.912154 6.09189C0.91525 6.26738 0.986345 6.43483 1.11046 6.55894C1.23457 6.68306 1.40202 6.75415 1.57752 6.75725C1.75302 6.76035 1.92286 6.6952 2.05128 6.57554L6.31451 2.31231V13.3226C6.31685 13.5015 6.38898 13.6725 6.51551 13.799Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ArrowUpIcon.displayName = 'ArrowUpIcon';
diff --git a/components/lib/icons/arrowup/package.json b/components/lib/icons/arrowup/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/arrowup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/ban/index.d.ts b/components/lib/icons/ban/index.d.ts
new file mode 100644
index 0000000000..59ebe2d4b3
--- /dev/null
+++ b/components/lib/icons/ban/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in BanIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface BanIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - BanIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class BanIcon extends React.Component<BanIconProps, any> {}
diff --git a/components/lib/icons/ban/index.js b/components/lib/icons/ban/index.js
new file mode 100644
index 0000000000..58ca3d0a39
--- /dev/null
+++ b/components/lib/icons/ban/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const BanIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M7 0C5.61553 0 4.26215 0.410543 3.11101 1.17971C1.95987 1.94888 1.06266 3.04213 0.532846 4.32122C0.00303296 5.6003 -0.13559 7.00776 0.134506 8.36563C0.404603 9.7235 1.07129 10.9708 2.05026 11.9497C3.02922 12.9287 4.2765 13.5954 5.63437 13.8655C6.99224 14.1356 8.3997 13.997 9.67879 13.4672C10.9579 12.9373 12.0511 12.0401 12.8203 10.889C13.5895 9.73785 14 8.38447 14 7C14 5.14348 13.2625 3.36301 11.9497 2.05025C10.637 0.737498 8.85652 0 7 0ZM1.16667 7C1.16549 5.65478 1.63303 4.35118 2.48889 3.31333L10.6867 11.5111C9.83309 12.2112 8.79816 12.6544 7.70243 12.789C6.60669 12.9236 5.49527 12.744 4.49764 12.2713C3.50001 11.7986 2.65724 11.0521 2.06751 10.1188C1.47778 9.18558 1.16537 8.10397 1.16667 7ZM11.5111 10.6867L3.31334 2.48889C4.43144 1.57388 5.84966 1.10701 7.29265 1.1789C8.73565 1.2508 10.1004 1.85633 11.1221 2.87795C12.1437 3.89956 12.7492 5.26435 12.8211 6.70735C12.893 8.15034 12.4261 9.56856 11.5111 10.6867Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+BanIcon.displayName = 'BanIcon';
diff --git a/components/lib/icons/ban/package.json b/components/lib/icons/ban/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/ban/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/bars/index.d.ts b/components/lib/icons/bars/index.d.ts
new file mode 100644
index 0000000000..7a2cd16862
--- /dev/null
+++ b/components/lib/icons/bars/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in BarsIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface BarsIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - BarsIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class BarsIcon extends React.Component<BarsIconProps, any> {}
diff --git a/components/lib/icons/bars/index.js b/components/lib/icons/bars/index.js
new file mode 100644
index 0000000000..7a857157c7
--- /dev/null
+++ b/components/lib/icons/bars/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const BarsIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M13.3226 3.6129H0.677419C0.497757 3.6129 0.325452 3.54152 0.198411 3.41448C0.0713707 3.28744 0 3.11514 0 2.93548C0 2.75581 0.0713707 2.58351 0.198411 2.45647C0.325452 2.32943 0.497757 2.25806 0.677419 2.25806H13.3226C13.5022 2.25806 13.6745 2.32943 13.8016 2.45647C13.9286 2.58351 14 2.75581 14 2.93548C14 3.11514 13.9286 3.28744 13.8016 3.41448C13.6745 3.54152 13.5022 3.6129 13.3226 3.6129ZM13.3226 7.67741H0.677419C0.497757 7.67741 0.325452 7.60604 0.198411 7.479C0.0713707 7.35196 0 7.17965 0 6.99999C0 6.82033 0.0713707 6.64802 0.198411 6.52098C0.325452 6.39394 0.497757 6.32257 0.677419 6.32257H13.3226C13.5022 6.32257 13.6745 6.39394 13.8016 6.52098C13.9286 6.64802 14 6.82033 14 6.99999C14 7.17965 13.9286 7.35196 13.8016 7.479C13.6745 7.60604 13.5022 7.67741 13.3226 7.67741ZM0.677419 11.7419H13.3226C13.5022 11.7419 13.6745 11.6706 13.8016 11.5435C13.9286 11.4165 14 11.2442 14 11.0645C14 10.8848 13.9286 10.7125 13.8016 10.5855C13.6745 10.4585 13.5022 10.3871 13.3226 10.3871H0.677419C0.497757 10.3871 0.325452 10.4585 0.198411 10.5855C0.0713707 10.7125 0 10.8848 0 11.0645C0 11.2442 0.0713707 11.4165 0.198411 11.5435C0.325452 11.6706 0.497757 11.7419 0.677419 11.7419Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+BarsIcon.displayName = 'BarsIcon';
diff --git a/components/lib/icons/bars/package.json b/components/lib/icons/bars/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/bars/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/blank/index.d.ts b/components/lib/icons/blank/index.d.ts
new file mode 100644
index 0000000000..7e9d228f42
--- /dev/null
+++ b/components/lib/icons/blank/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in BlankIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface BlankIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - BlankIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class BlankIcon extends React.Component<BlankIconProps, any> {}
diff --git a/components/lib/icons/blank/index.js b/components/lib/icons/blank/index.js
new file mode 100644
index 0000000000..0c1dcaf4f8
--- /dev/null
+++ b/components/lib/icons/blank/index.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const BlankIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <rect width="1" height="1" fill="currentColor" fillOpacity="0" />
+            </svg>
+        );
+    })
+);
+
+BlankIcon.displayName = 'BlankIcon';
diff --git a/components/lib/icons/blank/package.json b/components/lib/icons/blank/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/blank/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/calendar/index.d.ts b/components/lib/icons/calendar/index.d.ts
new file mode 100644
index 0000000000..54e53cabdf
--- /dev/null
+++ b/components/lib/icons/calendar/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in CalendarIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface CalendarIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - CalendarIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class CalendarIcon extends React.Component<CalendarIconProps, any> {}
diff --git a/components/lib/icons/calendar/index.js b/components/lib/icons/calendar/index.js
new file mode 100644
index 0000000000..4d6d2fa324
--- /dev/null
+++ b/components/lib/icons/calendar/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const CalendarIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M10.7838 1.51351H9.83783V0.567568C9.83783 0.417039 9.77804 0.272676 9.6716 0.166237C9.56516 0.0597971 9.42079 0 9.27027 0C9.11974 0 8.97538 0.0597971 8.86894 0.166237C8.7625 0.272676 8.7027 0.417039 8.7027 0.567568V1.51351H5.29729V0.567568C5.29729 0.417039 5.2375 0.272676 5.13106 0.166237C5.02462 0.0597971 4.88025 0 4.72973 0C4.5792 0 4.43484 0.0597971 4.3284 0.166237C4.22196 0.272676 4.16216 0.417039 4.16216 0.567568V1.51351H3.21621C2.66428 1.51351 2.13494 1.73277 1.74467 2.12305C1.35439 2.51333 1.13513 3.04266 1.13513 3.59459V11.9189C1.13513 12.4709 1.35439 13.0002 1.74467 13.3905C2.13494 13.7807 2.66428 14 3.21621 14H10.7838C11.3357 14 11.865 13.7807 12.2553 13.3905C12.6456 13.0002 12.8649 12.4709 12.8649 11.9189V3.59459C12.8649 3.04266 12.6456 2.51333 12.2553 2.12305C11.865 1.73277 11.3357 1.51351 10.7838 1.51351ZM3.21621 2.64865H4.16216V3.59459C4.16216 3.74512 4.22196 3.88949 4.3284 3.99593C4.43484 4.10237 4.5792 4.16216 4.72973 4.16216C4.88025 4.16216 5.02462 4.10237 5.13106 3.99593C5.2375 3.88949 5.29729 3.74512 5.29729 3.59459V2.64865H8.7027V3.59459C8.7027 3.74512 8.7625 3.88949 8.86894 3.99593C8.97538 4.10237 9.11974 4.16216 9.27027 4.16216C9.42079 4.16216 9.56516 4.10237 9.6716 3.99593C9.77804 3.88949 9.83783 3.74512 9.83783 3.59459V2.64865H10.7838C11.0347 2.64865 11.2753 2.74831 11.4527 2.92571C11.6301 3.10311 11.7297 3.34371 11.7297 3.59459V5.67568H2.27027V3.59459C2.27027 3.34371 2.36993 3.10311 2.54733 2.92571C2.72473 2.74831 2.96533 2.64865 3.21621 2.64865ZM10.7838 12.8649H3.21621C2.96533 12.8649 2.72473 12.7652 2.54733 12.5878C2.36993 12.4104 2.27027 12.1698 2.27027 11.9189V6.81081H11.7297V11.9189C11.7297 12.1698 11.6301 12.4104 11.4527 12.5878C11.2753 12.7652 11.0347 12.8649 10.7838 12.8649Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+CalendarIcon.displayName = 'CalendarIcon';
diff --git a/components/lib/icons/calendar/package.json b/components/lib/icons/calendar/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/calendar/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/check/index.d.ts b/components/lib/icons/check/index.d.ts
new file mode 100644
index 0000000000..bbdeee3ea4
--- /dev/null
+++ b/components/lib/icons/check/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in CheckIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface CheckIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - CheckIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class CheckIcon extends React.Component<CheckIconProps, any> {}
diff --git a/components/lib/icons/check/index.js b/components/lib/icons/check/index.js
new file mode 100644
index 0000000000..239808e312
--- /dev/null
+++ b/components/lib/icons/check/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const CheckIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+CheckIcon.displayName = 'CheckIcon';
diff --git a/components/lib/icons/check/package.json b/components/lib/icons/check/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/check/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/chevrondown/index.d.ts b/components/lib/icons/chevrondown/index.d.ts
new file mode 100644
index 0000000000..b3356a8324
--- /dev/null
+++ b/components/lib/icons/chevrondown/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ChevronDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ChevronDownIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ChevronDownIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ChevronDownIcon extends React.Component<ChevronDownIconProps, any> {}
diff --git a/components/lib/icons/chevrondown/index.js b/components/lib/icons/chevrondown/index.js
new file mode 100644
index 0000000000..ffb705b387
--- /dev/null
+++ b/components/lib/icons/chevrondown/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ChevronDownIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ChevronDownIcon.displayName = 'ChevronDownIcon';
diff --git a/components/lib/icons/chevrondown/package.json b/components/lib/icons/chevrondown/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/chevrondown/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/chevronleft/index.d.ts b/components/lib/icons/chevronleft/index.d.ts
new file mode 100644
index 0000000000..7f984b5ba7
--- /dev/null
+++ b/components/lib/icons/chevronleft/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ChevronLeftIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ChevronLeftIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ChevronLeftIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ChevronLeftIcon extends React.Component<ChevronLeftIconProps, any> {}
diff --git a/components/lib/icons/chevronleft/index.js b/components/lib/icons/chevronleft/index.js
new file mode 100644
index 0000000000..53991e24ef
--- /dev/null
+++ b/components/lib/icons/chevronleft/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ChevronLeftIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M9.61296 13C9.50997 13.0005 9.40792 12.9804 9.3128 12.9409C9.21767 12.9014 9.13139 12.8433 9.05902 12.7701L3.83313 7.54416C3.68634 7.39718 3.60388 7.19795 3.60388 6.99022C3.60388 6.78249 3.68634 6.58325 3.83313 6.43628L9.05902 1.21039C9.20762 1.07192 9.40416 0.996539 9.60724 1.00012C9.81032 1.00371 10.0041 1.08597 10.1477 1.22959C10.2913 1.37322 10.3736 1.56698 10.3772 1.77005C10.3808 1.97313 10.3054 2.16968 10.1669 2.31827L5.49496 6.99022L10.1669 11.6622C10.3137 11.8091 10.3962 12.0084 10.3962 12.2161C10.3962 12.4238 10.3137 12.6231 10.1669 12.7701C10.0945 12.8433 10.0083 12.9014 9.91313 12.9409C9.81801 12.9804 9.71596 13.0005 9.61296 13Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ChevronLeftIcon.displayName = 'ChevronLeftIcon';
diff --git a/components/lib/icons/chevronleft/package.json b/components/lib/icons/chevronleft/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/chevronleft/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/chevronright/index.d.ts b/components/lib/icons/chevronright/index.d.ts
new file mode 100644
index 0000000000..0ec4060c87
--- /dev/null
+++ b/components/lib/icons/chevronright/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ChevronRightIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ChevronRightIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ChevronRightIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ChevronRightIcon extends React.Component<ChevronRightIconProps, any> {}
diff --git a/components/lib/icons/chevronright/index.js b/components/lib/icons/chevronright/index.js
new file mode 100644
index 0000000000..8c2c71c199
--- /dev/null
+++ b/components/lib/icons/chevronright/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ChevronRightIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M4.38708 13C4.28408 13.0005 4.18203 12.9804 4.08691 12.9409C3.99178 12.9014 3.9055 12.8433 3.83313 12.7701C3.68634 12.6231 3.60388 12.4238 3.60388 12.2161C3.60388 12.0084 3.68634 11.8091 3.83313 11.6622L8.50507 6.99022L3.83313 2.31827C3.69467 2.16968 3.61928 1.97313 3.62287 1.77005C3.62645 1.56698 3.70872 1.37322 3.85234 1.22959C3.99596 1.08597 4.18972 1.00371 4.3928 1.00012C4.59588 0.996539 4.79242 1.07192 4.94102 1.21039L10.1669 6.43628C10.3137 6.58325 10.3962 6.78249 10.3962 6.99022C10.3962 7.19795 10.3137 7.39718 10.1669 7.54416L4.94102 12.7701C4.86865 12.8433 4.78237 12.9014 4.68724 12.9409C4.59212 12.9804 4.49007 13.0005 4.38708 13Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ChevronRightIcon.displayName = 'ChevronRightIcon';
diff --git a/components/lib/icons/chevronright/package.json b/components/lib/icons/chevronright/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/chevronright/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/chevronup/index.d.ts b/components/lib/icons/chevronup/index.d.ts
new file mode 100644
index 0000000000..d1cd64ae2c
--- /dev/null
+++ b/components/lib/icons/chevronup/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ChevronUpIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ChevronUpIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ChevronUpIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ChevronUpIcon extends React.Component<ChevronUpIconProps, any> {}
diff --git a/components/lib/icons/chevronup/index.js b/components/lib/icons/chevronup/index.js
new file mode 100644
index 0000000000..498a3f5068
--- /dev/null
+++ b/components/lib/icons/chevronup/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ChevronUpIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M12.2097 10.4113C12.1057 10.4118 12.0027 10.3915 11.9067 10.3516C11.8107 10.3118 11.7237 10.2532 11.6506 10.1792L6.93602 5.46461L2.22139 10.1476C2.07272 10.244 1.89599 10.2877 1.71953 10.2717C1.54307 10.2556 1.3771 10.1808 1.24822 10.0593C1.11933 9.93766 1.035 9.77633 1.00874 9.6011C0.982477 9.42587 1.0158 9.2469 1.10338 9.09287L6.37701 3.81923C6.52533 3.6711 6.72639 3.58789 6.93602 3.58789C7.14565 3.58789 7.3467 3.6711 7.49502 3.81923L12.7687 9.09287C12.9168 9.24119 13 9.44225 13 9.65187C13 9.8615 12.9168 10.0626 12.7687 10.2109C12.616 10.3487 12.4151 10.4207 12.2097 10.4113Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ChevronUpIcon.displayName = 'ChevronUpIcon';
diff --git a/components/lib/icons/chevronup/package.json b/components/lib/icons/chevronup/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/chevronup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/download/index.d.ts b/components/lib/icons/download/index.d.ts
new file mode 100644
index 0000000000..ea77b10086
--- /dev/null
+++ b/components/lib/icons/download/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in DownloadIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface DownloadIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - DownloadIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class DownloadIcon extends React.Component<DownloadIconProps, any> {}
diff --git a/components/lib/icons/download/index.js b/components/lib/icons/download/index.js
new file mode 100644
index 0000000000..cd7fd496ad
--- /dev/null
+++ b/components/lib/icons/download/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const DownloadIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M7.0118 10C6.93296 10.0003 6.85484 9.98495 6.78202 9.95477C6.7091 9.92454 6.64297 9.88008 6.58749 9.82399L3.38288 6.62399C3.27675 6.51025 3.21897 6.35982 3.22171 6.20438C3.22446 6.04893 3.28752 5.90063 3.39761 5.7907C3.5077 5.68077 3.65622 5.6178 3.81188 5.61505C3.96755 5.61231 4.1182 5.67001 4.23211 5.77599L6.41125 7.95201V0.6C6.41125 0.44087 6.47456 0.288258 6.58724 0.175736C6.69993 0.063214 6.85276 0 7.01212 0C7.17148 0 7.32431 0.063214 7.43699 0.175736C7.54968 0.288258 7.61298 0.44087 7.61298 0.6V7.95198L9.7921 5.77599C9.90601 5.67001 10.0567 5.61231 10.2123 5.61505C10.368 5.6178 10.5165 5.68077 10.6266 5.7907C10.7367 5.90063 10.7997 6.04893 10.8025 6.20438C10.8052 6.35982 10.7475 6.51025 10.6413 6.62399L7.43671 9.82399C7.38124 9.88008 7.3151 9.92454 7.24219 9.95477C7.16938 9.98495 7.09127 10.0003 7.01244 10C7.01233 10 7.01223 10 7.01212 10C7.01201 10 7.0119 10 7.0118 10ZM13.45 13.3115C13.0749 13.7235 12.5521 13.971 11.9952 14H2.02889C1.75106 13.9887 1.47819 13.9228 1.2259 13.806C0.973606 13.6893 0.74684 13.524 0.558578 13.3197C0.370316 13.1153 0.224251 12.8759 0.128742 12.6152C0.0332333 12.3544 -0.00984502 12.0774 0.00197194 11.8V9.39999C0.00197194 9.24086 0.065277 9.08825 0.177961 8.97572C0.290645 8.8632 0.443477 8.79999 0.602836 8.79999C0.762195 8.79999 0.915027 8.8632 1.02771 8.97572C1.1404 9.08825 1.2037 9.24086 1.2037 9.39999V11.8C1.18301 12.0375 1.25469 12.2739 1.40385 12.4601C1.55302 12.6463 1.76823 12.768 2.00485 12.8H11.9952C12.2318 12.768 12.4471 12.6463 12.5962 12.4601C12.7454 12.2739 12.8171 12.0375 12.7964 11.8V9.39999C12.7964 9.24086 12.8597 9.08825 12.9724 8.97572C13.085 8.8632 13.2379 8.79999 13.3972 8.79999C13.5566 8.79999 13.7094 8.8632 13.8221 8.97572C13.9348 9.08825 13.9981 9.24086 13.9981 9.39999V11.8C14.0221 12.3563 13.8251 12.8995 13.45 13.3115Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+DownloadIcon.displayName = 'DownloadIcon';
diff --git a/components/lib/icons/download/package.json b/components/lib/icons/download/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/download/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/exclamationtriangle/index.d.ts b/components/lib/icons/exclamationtriangle/index.d.ts
new file mode 100644
index 0000000000..728cb0209c
--- /dev/null
+++ b/components/lib/icons/exclamationtriangle/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ExclamationTriangleIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ExclamationTriangleIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ExclamationTriangleIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ExclamationTriangleIcon extends React.Component<ExclamationTriangleIconProps, any> {}
diff --git a/components/lib/icons/exclamationtriangle/index.js b/components/lib/icons/exclamationtriangle/index.js
new file mode 100644
index 0000000000..4512e38812
--- /dev/null
+++ b/components/lib/icons/exclamationtriangle/index.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ExclamationTriangleIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M6.99996 8.78801C6.84143 8.78594 6.68997 8.72204 6.57787 8.60993C6.46576 8.49782 6.40186 8.34637 6.39979 8.18784V5.38703C6.39979 5.22786 6.46302 5.0752 6.57557 4.96265C6.68813 4.85009 6.84078 4.78686 6.99996 4.78686C7.15914 4.78686 7.31179 4.85009 7.42435 4.96265C7.5369 5.0752 7.60013 5.22786 7.60013 5.38703V8.18784C7.59806 8.34637 7.53416 8.49782 7.42205 8.60993C7.30995 8.72204 7.15849 8.78594 6.99996 8.78801Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M6.99996 11.1887C6.84143 11.1866 6.68997 11.1227 6.57787 11.0106C6.46576 10.8985 6.40186 10.7471 6.39979 10.5885V10.1884C6.39979 10.0292 6.46302 9.87658 6.57557 9.76403C6.68813 9.65147 6.84078 9.58824 6.99996 9.58824C7.15914 9.58824 7.31179 9.65147 7.42435 9.76403C7.5369 9.87658 7.60013 10.0292 7.60013 10.1884V10.5885C7.59806 10.7471 7.53416 10.8985 7.42205 11.0106C7.30995 11.1227 7.15849 11.1866 6.99996 11.1887Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ExclamationTriangleIcon.displayName = 'ExclamationTriangleIcon';
diff --git a/components/lib/icons/exclamationtriangle/package.json b/components/lib/icons/exclamationtriangle/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/exclamationtriangle/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/eye/index.d.ts b/components/lib/icons/eye/index.d.ts
new file mode 100644
index 0000000000..64dd72be92
--- /dev/null
+++ b/components/lib/icons/eye/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in EyeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface EyeIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - EyeIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class EyeIcon extends React.Component<EyeIconProps, any> {}
diff --git a/components/lib/icons/eye/index.js b/components/lib/icons/eye/index.js
new file mode 100644
index 0000000000..76ef14c8c4
--- /dev/null
+++ b/components/lib/icons/eye/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const EyeIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M0.0535499 7.25213C0.208567 7.59162 2.40413 12.4 7 12.4C11.5959 12.4 13.7914 7.59162 13.9465 7.25213C13.9487 7.2471 13.9506 7.24304 13.952 7.24001C13.9837 7.16396 14 7.08239 14 7.00001C14 6.91762 13.9837 6.83605 13.952 6.76001C13.9506 6.75697 13.9487 6.75292 13.9465 6.74788C13.7914 6.4084 11.5959 1.60001 7 1.60001C2.40413 1.60001 0.208567 6.40839 0.0535499 6.74788C0.0512519 6.75292 0.0494023 6.75697 0.048 6.76001C0.0163137 6.83605 0 6.91762 0 7.00001C0 7.08239 0.0163137 7.16396 0.048 7.24001C0.0494023 7.24304 0.0512519 7.2471 0.0535499 7.25213ZM7 11.2C3.664 11.2 1.736 7.92001 1.264 7.00001C1.736 6.08001 3.664 2.80001 7 2.80001C10.336 2.80001 12.264 6.08001 12.736 7.00001C12.264 7.92001 10.336 11.2 7 11.2ZM5.55551 9.16182C5.98308 9.44751 6.48576 9.6 7 9.6C7.68891 9.59789 8.349 9.32328 8.83614 8.83614C9.32328 8.349 9.59789 7.68891 9.59999 7C9.59999 6.48576 9.44751 5.98308 9.16182 5.55551C8.87612 5.12794 8.47006 4.7947 7.99497 4.59791C7.51988 4.40112 6.99711 4.34963 6.49276 4.44995C5.98841 4.55027 5.52513 4.7979 5.16152 5.16152C4.7979 5.52513 4.55027 5.98841 4.44995 6.49276C4.34963 6.99711 4.40112 7.51988 4.59791 7.99497C4.7947 8.47006 5.12794 8.87612 5.55551 9.16182ZM6.2222 5.83594C6.45243 5.6821 6.7231 5.6 7 5.6C7.37065 5.6021 7.72553 5.75027 7.98762 6.01237C8.24972 6.27446 8.39789 6.62934 8.4 7C8.4 7.27689 8.31789 7.54756 8.16405 7.77779C8.01022 8.00802 7.79157 8.18746 7.53575 8.29343C7.27994 8.39939 6.99844 8.42711 6.72687 8.37309C6.4553 8.31908 6.20584 8.18574 6.01005 7.98994C5.81425 7.79415 5.68091 7.54469 5.6269 7.27312C5.57288 7.00155 5.6006 6.72006 5.70656 6.46424C5.81253 6.20842 5.99197 5.98977 6.2222 5.83594Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+EyeIcon.displayName = 'EyeIcon';
diff --git a/components/lib/icons/eye/package.json b/components/lib/icons/eye/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/eye/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/eyeslash/index.d.ts b/components/lib/icons/eyeslash/index.d.ts
new file mode 100644
index 0000000000..fc28017e69
--- /dev/null
+++ b/components/lib/icons/eyeslash/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in EyeSlashIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface EyeSlashIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - EyeSlashIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class EyeSlashIcon extends React.Component<EyeSlashIconProps, any> {}
diff --git a/components/lib/icons/eyeslash/index.js b/components/lib/icons/eyeslash/index.js
new file mode 100644
index 0000000000..86ee91010a
--- /dev/null
+++ b/components/lib/icons/eyeslash/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const EyeSlashIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M13.9414 6.74792C13.9437 6.75295 13.9455 6.757 13.9469 6.76003C13.982 6.8394 14.0001 6.9252 14.0001 7.01195C14.0001 7.0987 13.982 7.1845 13.9469 7.26386C13.6004 8.00059 13.1711 8.69549 12.6674 9.33515C12.6115 9.4071 12.54 9.46538 12.4582 9.50556C12.3765 9.54574 12.2866 9.56678 12.1955 9.56707C12.0834 9.56671 11.9737 9.53496 11.8788 9.47541C11.7838 9.41586 11.7074 9.3309 11.6583 9.23015C11.6092 9.12941 11.5893 9.01691 11.6008 8.90543C11.6124 8.79394 11.6549 8.68793 11.7237 8.5994C12.1065 8.09726 12.4437 7.56199 12.7313 6.99995C12.2595 6.08027 10.3402 2.8014 6.99732 2.8014C6.63723 2.80218 6.27816 2.83969 5.92569 2.91336C5.77666 2.93304 5.62568 2.89606 5.50263 2.80972C5.37958 2.72337 5.29344 2.59398 5.26125 2.44714C5.22907 2.30031 5.2532 2.14674 5.32885 2.01685C5.40451 1.88696 5.52618 1.79021 5.66978 1.74576C6.10574 1.64961 6.55089 1.60134 6.99732 1.60181C11.5916 1.60181 13.7864 6.40856 13.9414 6.74792ZM2.20333 1.61685C2.35871 1.61411 2.5091 1.67179 2.6228 1.77774L12.2195 11.3744C12.3318 11.4869 12.3949 11.6393 12.3949 11.7983C12.3949 11.9572 12.3318 12.1097 12.2195 12.2221C12.107 12.3345 11.9546 12.3976 11.7956 12.3976C11.6367 12.3976 11.4842 12.3345 11.3718 12.2221L10.5081 11.3584C9.46549 12.0426 8.24432 12.4042 6.99729 12.3981C2.403 12.3981 0.208197 7.59135 0.0532336 7.25198C0.0509364 7.24694 0.0490875 7.2429 0.0476856 7.23986C0.0162332 7.16518 3.05176e-05 7.08497 3.05176e-05 7.00394C3.05176e-05 6.92291 0.0162332 6.8427 0.0476856 6.76802C0.631261 5.47831 1.46902 4.31959 2.51084 3.36119L1.77509 2.62545C1.66914 2.51175 1.61146 2.36136 1.61421 2.20597C1.61695 2.05059 1.6799 1.90233 1.78979 1.79244C1.89968 1.68254 2.04794 1.6196 2.20333 1.61685ZM7.45314 8.35147L5.68574 6.57609V6.5361C5.5872 6.78938 5.56498 7.06597 5.62183 7.33173C5.67868 7.59749 5.8121 7.84078 6.00563 8.03158C6.19567 8.21043 6.43052 8.33458 6.68533 8.39089C6.94014 8.44721 7.20543 8.43359 7.45314 8.35147ZM1.26327 6.99994C1.7351 7.91163 3.64645 11.1985 6.99729 11.1985C7.9267 11.2048 8.8408 10.9618 9.64438 10.4947L8.35682 9.20718C7.86027 9.51441 7.27449 9.64491 6.69448 9.57752C6.11446 9.51014 5.57421 9.24881 5.16131 8.83592C4.74842 8.42303 4.4871 7.88277 4.41971 7.30276C4.35232 6.72274 4.48282 6.13697 4.79005 5.64041L3.35855 4.2089C2.4954 5.00336 1.78523 5.94935 1.26327 6.99994Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+EyeSlashIcon.displayName = 'EyeSlashIcon';
diff --git a/components/lib/icons/eyeslash/package.json b/components/lib/icons/eyeslash/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/eyeslash/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/filter/index.d.ts b/components/lib/icons/filter/index.d.ts
new file mode 100644
index 0000000000..213a37ebe5
--- /dev/null
+++ b/components/lib/icons/filter/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in FilterIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface FilterIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - FilterIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class FilterIcon extends React.Component<FilterIconProps, any> {}
diff --git a/components/lib/icons/filter/index.js b/components/lib/icons/filter/index.js
new file mode 100644
index 0000000000..7eebd4d41e
--- /dev/null
+++ b/components/lib/icons/filter/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const FilterIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M8.64708 14H5.35296C5.18981 13.9979 5.03395 13.9321 4.91858 13.8167C4.8032 13.7014 4.73745 13.5455 4.73531 13.3824V7L0.329431 0.98C0.259794 0.889466 0.217389 0.780968 0.20718 0.667208C0.19697 0.553448 0.219379 0.439133 0.271783 0.337647C0.324282 0.236453 0.403423 0.151519 0.500663 0.0920138C0.597903 0.0325088 0.709548 0.000692754 0.823548 0H13.1765C13.2905 0.000692754 13.4021 0.0325088 13.4994 0.0920138C13.5966 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7826 0.780968 13.7402 0.889466 13.6706 0.98L9.26472 7V13.3824C9.26259 13.5455 9.19683 13.7014 9.08146 13.8167C8.96609 13.9321 8.81022 13.9979 8.64708 14ZM5.97061 12.7647H8.02943V6.79412C8.02878 6.66289 8.07229 6.53527 8.15296 6.43177L11.9412 1.23529H2.05884L5.86355 6.43177C5.94422 6.53527 5.98773 6.66289 5.98708 6.79412L5.97061 12.7647Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+FilterIcon.displayName = 'FilterIcon';
diff --git a/components/lib/icons/filter/package.json b/components/lib/icons/filter/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/filter/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/filterslash/index.d.ts b/components/lib/icons/filterslash/index.d.ts
new file mode 100644
index 0000000000..da39276fce
--- /dev/null
+++ b/components/lib/icons/filterslash/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in FilterSlashIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface FilterSlashIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - FilterSlashIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class FilterSlashIcon extends React.Component<FilterSlashIconProps, any> {}
diff --git a/components/lib/icons/filterslash/index.js b/components/lib/icons/filterslash/index.js
new file mode 100644
index 0000000000..37c7553d16
--- /dev/null
+++ b/components/lib/icons/filterslash/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const FilterSlashIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M13.4994 0.0920138C13.5967 0.151519 13.6758 0.236453 13.7283 0.337647C13.7807 0.439133 13.8031 0.553448 13.7929 0.667208C13.7827 0.780968 13.7403 0.889466 13.6707 0.98L11.406 4.06823C11.3099 4.19928 11.1656 4.28679 11.005 4.3115C10.8444 4.33621 10.6805 4.2961 10.5495 4.2C10.4184 4.1039 10.3309 3.95967 10.3062 3.79905C10.2815 3.63843 10.3216 3.47458 10.4177 3.34353L11.9412 1.23529H7.41184C7.24803 1.23529 7.09093 1.17022 6.97509 1.05439C6.85926 0.938558 6.79419 0.781457 6.79419 0.617647C6.79419 0.453837 6.85926 0.296736 6.97509 0.180905C7.09093 0.0650733 7.24803 0 7.41184 0H13.1765C13.2905 0.000692754 13.4022 0.0325088 13.4994 0.0920138ZM4.20008 0.181168H4.24126L13.2013 9.03411C13.3169 9.14992 13.3819 9.3069 13.3819 9.47058C13.3819 9.63426 13.3169 9.79124 13.2013 9.90705C13.1445 9.96517 13.0766 10.0112 13.0016 10.0423C12.9266 10.0735 12.846 10.0891 12.7648 10.0882C12.6836 10.0886 12.6032 10.0728 12.5283 10.0417C12.4533 10.0106 12.3853 9.96479 12.3283 9.90705L9.3142 6.92587L9.26479 6.99999V13.3823C9.26265 13.5455 9.19689 13.7014 9.08152 13.8167C8.96615 13.9321 8.81029 13.9979 8.64714 14H5.35302C5.18987 13.9979 5.03401 13.9321 4.91864 13.8167C4.80327 13.7014 4.73751 13.5455 4.73537 13.3823V6.99999L0.329492 1.02117C0.259855 0.930634 0.21745 0.822137 0.207241 0.708376C0.197031 0.594616 0.21944 0.480301 0.271844 0.378815C0.324343 0.277621 0.403484 0.192687 0.500724 0.133182C0.597964 0.073677 0.709609 0.041861 0.823609 0.0411682H3.86243C3.92448 0.0461551 3.9855 0.060022 4.04361 0.0823446C4.10037 0.10735 4.15311 0.140655 4.20008 0.181168ZM8.02949 6.79411C8.02884 6.66289 8.07235 6.53526 8.15302 6.43176L8.42478 6.05293L3.55773 1.23529H2.0589L5.84714 6.43176C5.92781 6.53526 5.97132 6.66289 5.97067 6.79411V12.7647H8.02949V6.79411Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+FilterSlashIcon.displayName = 'FilterSlashIcon';
diff --git a/components/lib/icons/filterslash/package.json b/components/lib/icons/filterslash/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/filterslash/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/infocircle/index.d.ts b/components/lib/icons/infocircle/index.d.ts
new file mode 100644
index 0000000000..6a93cc10a3
--- /dev/null
+++ b/components/lib/icons/infocircle/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in InfoCircleIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface InfoCircleIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - InfoCircleIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class InfoCircleIcon extends React.Component<InfoCircleIconProps, any> {}
diff --git a/components/lib/icons/infocircle/index.js b/components/lib/icons/infocircle/index.js
new file mode 100644
index 0000000000..9bb2ed0ad7
--- /dev/null
+++ b/components/lib/icons/infocircle/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const InfoCircleIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M3.11101 12.8203C4.26215 13.5895 5.61553 14 7 14C8.85652 14 10.637 13.2625 11.9497 11.9497C13.2625 10.637 14 8.85652 14 7C14 5.61553 13.5895 4.26215 12.8203 3.11101C12.0511 1.95987 10.9579 1.06266 9.67879 0.532846C8.3997 0.00303296 6.99224 -0.13559 5.63437 0.134506C4.2765 0.404603 3.02922 1.07129 2.05026 2.05026C1.07129 3.02922 0.404603 4.2765 0.134506 5.63437C-0.13559 6.99224 0.00303296 8.3997 0.532846 9.67879C1.06266 10.9579 1.95987 12.0511 3.11101 12.8203ZM3.75918 2.14976C4.71846 1.50879 5.84628 1.16667 7 1.16667C8.5471 1.16667 10.0308 1.78125 11.1248 2.87521C12.2188 3.96918 12.8333 5.45291 12.8333 7C12.8333 8.15373 12.4912 9.28154 11.8502 10.2408C11.2093 11.2001 10.2982 11.9478 9.23232 12.3893C8.16642 12.8308 6.99353 12.9463 5.86198 12.7212C4.73042 12.4962 3.69102 11.9406 2.87521 11.1248C2.05941 10.309 1.50384 9.26958 1.27876 8.13803C1.05367 7.00647 1.16919 5.83358 1.61071 4.76768C2.05222 3.70178 2.79989 2.79074 3.75918 2.14976ZM7.00002 4.8611C6.84594 4.85908 6.69873 4.79698 6.58977 4.68801C6.48081 4.57905 6.4187 4.43185 6.41669 4.27776V3.88888C6.41669 3.73417 6.47815 3.58579 6.58754 3.4764C6.69694 3.367 6.84531 3.30554 7.00002 3.30554C7.15473 3.30554 7.3031 3.367 7.4125 3.4764C7.52189 3.58579 7.58335 3.73417 7.58335 3.88888V4.27776C7.58134 4.43185 7.51923 4.57905 7.41027 4.68801C7.30131 4.79698 7.1541 4.85908 7.00002 4.8611ZM7.00002 10.6945C6.84594 10.6925 6.69873 10.6304 6.58977 10.5214C6.48081 10.4124 6.4187 10.2652 6.41669 10.1111V6.22225C6.41669 6.06754 6.47815 5.91917 6.58754 5.80977C6.69694 5.70037 6.84531 5.63892 7.00002 5.63892C7.15473 5.63892 7.3031 5.70037 7.4125 5.80977C7.52189 5.91917 7.58335 6.06754 7.58335 6.22225V10.1111C7.58134 10.2652 7.51923 10.4124 7.41027 10.5214C7.30131 10.6304 7.1541 10.6925 7.00002 10.6945Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+InfoCircleIcon.displayName = 'InfoCircleIcon';
diff --git a/components/lib/icons/infocircle/package.json b/components/lib/icons/infocircle/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/infocircle/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/minus/index.d.ts b/components/lib/icons/minus/index.d.ts
new file mode 100644
index 0000000000..9d76609647
--- /dev/null
+++ b/components/lib/icons/minus/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in MinusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface MinusIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - MinusIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class MinusIcon extends React.Component<MinusIconProps, any> {}
diff --git a/components/lib/icons/minus/index.js b/components/lib/icons/minus/index.js
new file mode 100644
index 0000000000..88f766347b
--- /dev/null
+++ b/components/lib/icons/minus/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const MinusIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+MinusIcon.displayName = 'MinusIcon';
diff --git a/components/lib/icons/minus/package.json b/components/lib/icons/minus/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/minus/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/pencil/index.d.ts b/components/lib/icons/pencil/index.d.ts
new file mode 100644
index 0000000000..e68608bea3
--- /dev/null
+++ b/components/lib/icons/pencil/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in PencilIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface PencilIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - PencilIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class PencilIcon extends React.Component<PencilIconProps, any> {}
diff --git a/components/lib/icons/pencil/index.js b/components/lib/icons/pencil/index.js
new file mode 100644
index 0000000000..f0e1603783
--- /dev/null
+++ b/components/lib/icons/pencil/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const PencilIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M0.609628 13.959C0.530658 13.9599 0.452305 13.9451 0.379077 13.9156C0.305849 13.8861 0.239191 13.8424 0.18294 13.787C0.118447 13.7234 0.0688234 13.6464 0.0376166 13.5614C0.00640987 13.4765 -0.00560954 13.3857 0.00241768 13.2956L0.25679 10.1501C0.267698 10.0041 0.331934 9.86709 0.437312 9.76516L9.51265 0.705715C10.0183 0.233014 10.6911 -0.0203041 11.3835 0.00127367C12.0714 0.00660201 12.7315 0.27311 13.2298 0.746671C13.7076 1.23651 13.9824 1.88848 13.9992 2.57201C14.0159 3.25554 13.7733 3.92015 13.32 4.4327L4.23648 13.5331C4.13482 13.6342 4.0017 13.6978 3.85903 13.7133L0.667067 14L0.609628 13.959ZM1.43018 10.4696L1.25787 12.714L3.50619 12.5092L12.4502 3.56444C12.6246 3.35841 12.7361 3.10674 12.7714 2.83933C12.8067 2.57193 12.7644 2.30002 12.6495 2.05591C12.5346 1.8118 12.3519 1.60575 12.1231 1.46224C11.8943 1.31873 11.6291 1.2438 11.3589 1.24633C11.1813 1.23508 11.0033 1.25975 10.8355 1.31887C10.6677 1.37798 10.5136 1.47033 10.3824 1.59036L1.43018 10.4696Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+PencilIcon.displayName = 'PencilIcon';
diff --git a/components/lib/icons/pencil/package.json b/components/lib/icons/pencil/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/pencil/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/plus/index.d.ts b/components/lib/icons/plus/index.d.ts
new file mode 100644
index 0000000000..2ef6752051
--- /dev/null
+++ b/components/lib/icons/plus/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in PlusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface PlusIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - PlusIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class PlusIcon extends React.Component<PlusIconProps, any> {}
diff --git a/components/lib/icons/plus/index.js b/components/lib/icons/plus/index.js
new file mode 100644
index 0000000000..f5c2a2c3ef
--- /dev/null
+++ b/components/lib/icons/plus/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const PlusIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+PlusIcon.displayName = 'PlusIcon';
diff --git a/components/lib/icons/plus/package.json b/components/lib/icons/plus/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/plus/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/refresh/index.d.ts b/components/lib/icons/refresh/index.d.ts
new file mode 100644
index 0000000000..4c35c14055
--- /dev/null
+++ b/components/lib/icons/refresh/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in RefreshIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface RefreshIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - RefreshIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class RefreshIcon extends React.Component<RefreshIconProps, any> {}
diff --git a/components/lib/icons/refresh/index.js b/components/lib/icons/refresh/index.js
new file mode 100644
index 0000000000..44c5890d5d
--- /dev/null
+++ b/components/lib/icons/refresh/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const RefreshIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M6.77051 5.96336C6.84324 5.99355 6.92127 6.00891 7.00002 6.00854C7.07877 6.00891 7.1568 5.99355 7.22953 5.96336C7.30226 5.93317 7.36823 5.88876 7.42357 5.83273L9.82101 3.43529C9.93325 3.32291 9.99629 3.17058 9.99629 3.01175C9.99629 2.85292 9.93325 2.70058 9.82101 2.5882L7.42357 0.190763C7.3687 0.131876 7.30253 0.0846451 7.22901 0.0518865C7.15549 0.019128 7.07612 0.00151319 6.99564 9.32772e-05C6.91517 -0.00132663 6.83523 0.0134773 6.7606 0.0436218C6.68597 0.0737664 6.61817 0.118634 6.56126 0.175548C6.50435 0.232462 6.45948 0.300257 6.42933 0.374888C6.39919 0.449519 6.38439 0.529456 6.38581 0.609933C6.38722 0.690409 6.40484 0.769775 6.4376 0.843296C6.47036 0.916817 6.51759 0.982986 6.57647 1.03786L7.95103 2.41241H6.99998C5.46337 2.41241 3.98969 3.02283 2.90314 4.10938C1.81659 5.19593 1.20618 6.66961 1.20618 8.20622C1.20618 9.74283 1.81659 11.2165 2.90314 12.3031C3.98969 13.3896 5.46337 14 6.99998 14C8.53595 13.9979 10.0084 13.3868 11.0945 12.3007C12.1806 11.2146 12.7917 9.74218 12.7938 8.20622C12.7938 8.04726 12.7306 7.89481 12.6182 7.78241C12.5058 7.67001 12.3534 7.60686 12.1944 7.60686C12.0355 7.60686 11.883 7.67001 11.7706 7.78241C11.6582 7.89481 11.5951 8.04726 11.5951 8.20622C11.5951 9.11504 11.3256 10.0035 10.8207 10.7591C10.3157 11.5148 9.59809 12.1037 8.75845 12.4515C7.9188 12.7993 6.99489 12.8903 6.10353 12.713C5.21217 12.5357 4.3934 12.0981 3.75077 11.4554C3.10813 10.8128 2.67049 9.99404 2.49319 9.10268C2.31589 8.21132 2.40688 7.2874 2.75468 6.44776C3.10247 5.60811 3.69143 4.89046 4.44709 4.38554C5.20275 3.88063 6.09116 3.61113 6.99998 3.61113H7.95098L6.57647 4.98564C6.46423 5.09802 6.40119 5.25035 6.40119 5.40918C6.40119 5.56801 6.46423 5.72035 6.57647 5.83273C6.63181 5.88876 6.69778 5.93317 6.77051 5.96336Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+RefreshIcon.displayName = 'RefreshIcon';
diff --git a/components/lib/icons/refresh/package.json b/components/lib/icons/refresh/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/refresh/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/search/index.d.ts b/components/lib/icons/search/index.d.ts
new file mode 100644
index 0000000000..3fd2e3b596
--- /dev/null
+++ b/components/lib/icons/search/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in SearchIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface SearchIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - SearchIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SearchIcon extends React.Component<SearchIconProps, any> {}
diff --git a/components/lib/icons/search/index.js b/components/lib/icons/search/index.js
new file mode 100644
index 0000000000..6045b5cd97
--- /dev/null
+++ b/components/lib/icons/search/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const SearchIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M2.67602 11.0265C3.6661 11.688 4.83011 12.0411 6.02086 12.0411C6.81149 12.0411 7.59438 11.8854 8.32483 11.5828C8.87005 11.357 9.37808 11.0526 9.83317 10.6803L12.9769 13.8241C13.0323 13.8801 13.0983 13.9245 13.171 13.9548C13.2438 13.985 13.3219 14.0003 13.4007 14C13.4795 14.0003 13.5575 13.985 13.6303 13.9548C13.7031 13.9245 13.7691 13.8801 13.8244 13.8241C13.9367 13.7116 13.9998 13.5592 13.9998 13.4003C13.9998 13.2414 13.9367 13.089 13.8244 12.9765L10.6807 9.8328C11.053 9.37773 11.3573 8.86972 11.5831 8.32452C11.8857 7.59408 12.0414 6.81119 12.0414 6.02056C12.0414 4.8298 11.6883 3.66579 11.0268 2.67572C10.3652 1.68564 9.42494 0.913972 8.32483 0.45829C7.22472 0.00260857 6.01418 -0.116618 4.84631 0.115686C3.67844 0.34799 2.60568 0.921393 1.76369 1.76338C0.921698 2.60537 0.348296 3.67813 0.115991 4.84601C-0.116313 6.01388 0.00291375 7.22441 0.458595 8.32452C0.914277 9.42464 1.68595 10.3649 2.67602 11.0265ZM3.35565 2.0158C4.14456 1.48867 5.07206 1.20731 6.02086 1.20731C7.29317 1.20731 8.51338 1.71274 9.41304 2.6124C10.3127 3.51206 10.8181 4.73226 10.8181 6.00457C10.8181 6.95337 10.5368 7.88088 10.0096 8.66978C9.48251 9.45868 8.73328 10.0736 7.85669 10.4367C6.98011 10.7997 6.01554 10.8947 5.08496 10.7096C4.15439 10.5245 3.2996 10.0676 2.62869 9.39674C1.95778 8.72583 1.50089 7.87104 1.31579 6.94046C1.13068 6.00989 1.22568 5.04532 1.58878 4.16874C1.95187 3.29215 2.56675 2.54292 3.35565 2.0158Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+SearchIcon.displayName = 'SearchIcon';
diff --git a/components/lib/icons/search/package.json b/components/lib/icons/search/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/search/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/searchminus/index.d.ts b/components/lib/icons/searchminus/index.d.ts
new file mode 100644
index 0000000000..5a6230bedb
--- /dev/null
+++ b/components/lib/icons/searchminus/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in SearchMinusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface SearchMinusIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - SearchMinusIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SearchMinusIcon extends React.Component<SearchMinusIconProps, any> {}
diff --git a/components/lib/icons/searchminus/index.js b/components/lib/icons/searchminus/index.js
new file mode 100644
index 0000000000..55842d8040
--- /dev/null
+++ b/components/lib/icons/searchminus/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const SearchMinusIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M6.0208 12.0411C4.83005 12.0411 3.66604 11.688 2.67596 11.0265C1.68589 10.3649 0.914216 9.42464 0.458534 8.32452C0.00285271 7.22441 -0.116374 6.01388 0.11593 4.84601C0.348235 3.67813 0.921637 2.60537 1.76363 1.76338C2.60562 0.921393 3.67838 0.34799 4.84625 0.115686C6.01412 -0.116618 7.22466 0.00260857 8.32477 0.45829C9.42488 0.913972 10.3652 1.68564 11.0267 2.67572C11.6883 3.66579 12.0414 4.8298 12.0414 6.02056C12.0395 7.41563 11.5542 8.76029 10.6783 9.8305L13.8244 12.9765C13.9367 13.089 13.9997 13.2414 13.9997 13.4003C13.9997 13.5592 13.9367 13.7116 13.8244 13.8241C13.769 13.8801 13.703 13.9245 13.6302 13.9548C13.5575 13.985 13.4794 14.0003 13.4006 14C13.3218 14.0003 13.2437 13.985 13.171 13.9548C13.0982 13.9245 13.0322 13.8801 12.9768 13.8241L9.83082 10.678C8.76059 11.5539 7.4159 12.0393 6.0208 12.0411ZM6.0208 1.20731C5.07199 1.20731 4.14449 1.48867 3.35559 2.0158C2.56669 2.54292 1.95181 3.29215 1.58872 4.16874C1.22562 5.04532 1.13062 6.00989 1.31572 6.94046C1.50083 7.87104 1.95772 8.72583 2.62863 9.39674C3.29954 10.0676 4.15433 10.5245 5.0849 10.7096C6.01548 10.8947 6.98005 10.7997 7.85663 10.4367C8.73322 10.0736 9.48244 9.45868 10.0096 8.66978C10.5367 7.88088 10.8181 6.95337 10.8181 6.00457C10.8181 4.73226 10.3126 3.51206 9.41297 2.6124C8.51331 1.71274 7.29311 1.20731 6.0208 1.20731ZM4.00591 6.60422H8.00362C8.16266 6.60422 8.31518 6.54104 8.42764 6.42859C8.5401 6.31613 8.60328 6.1636 8.60328 6.00456C8.60328 5.84553 8.5401 5.693 8.42764 5.58054C8.31518 5.46809 8.16266 5.40491 8.00362 5.40491H4.00591C3.84687 5.40491 3.69434 5.46809 3.58189 5.58054C3.46943 5.693 3.40625 5.84553 3.40625 6.00456C3.40625 6.1636 3.46943 6.31613 3.58189 6.42859C3.69434 6.54104 3.84687 6.60422 4.00591 6.60422Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+SearchMinusIcon.displayName = 'SearchMinusIcon';
diff --git a/components/lib/icons/searchminus/package.json b/components/lib/icons/searchminus/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/searchminus/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/searchplus/index.d.ts b/components/lib/icons/searchplus/index.d.ts
new file mode 100644
index 0000000000..25423c9a59
--- /dev/null
+++ b/components/lib/icons/searchplus/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in SearchPlusIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface SearchPlusIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - SearchPlusIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SearchPlusIcon extends React.Component<SearchPlusIconProps, any> {}
diff --git a/components/lib/icons/searchplus/index.js b/components/lib/icons/searchplus/index.js
new file mode 100644
index 0000000000..a9fad94827
--- /dev/null
+++ b/components/lib/icons/searchplus/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const SearchPlusIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M2.67596 11.0265C3.66604 11.688 4.83005 12.0411 6.0208 12.0411C6.81143 12.0411 7.59432 11.8854 8.32477 11.5828C8.86999 11.357 9.37802 11.0526 9.83311 10.6803L12.9768 13.8241C13.0322 13.8801 13.0982 13.9245 13.171 13.9548C13.2437 13.985 13.3218 14.0003 13.4006 14C13.4794 14.0003 13.5575 13.985 13.6302 13.9548C13.703 13.9245 13.769 13.8801 13.8244 13.8241C13.9367 13.7116 13.9997 13.5592 13.9997 13.4003C13.9997 13.2414 13.9367 13.089 13.8244 12.9765L10.6806 9.8328C11.0529 9.37773 11.3572 8.86972 11.5831 8.32452C11.8856 7.59408 12.0414 6.81119 12.0414 6.02056C12.0414 4.8298 11.6883 3.66579 11.0267 2.67572C10.3652 1.68564 9.42488 0.913972 8.32477 0.45829C7.22466 0.00260857 6.01412 -0.116618 4.84625 0.115686C3.67838 0.34799 2.60562 0.921393 1.76363 1.76338C0.921637 2.60537 0.348235 3.67813 0.11593 4.84601C-0.116374 6.01388 0.00285271 7.22441 0.458534 8.32452C0.914216 9.42464 1.68589 10.3649 2.67596 11.0265ZM3.35559 2.0158C4.14449 1.48867 5.07199 1.20731 6.0208 1.20731C7.29311 1.20731 8.51331 1.71274 9.41297 2.6124C10.3126 3.51206 10.8181 4.73226 10.8181 6.00457C10.8181 6.95337 10.5367 7.88088 10.0096 8.66978C9.48244 9.45868 8.73322 10.0736 7.85663 10.4367C6.98005 10.7997 6.01548 10.8947 5.0849 10.7096C4.15433 10.5245 3.29954 10.0676 2.62863 9.39674C1.95772 8.72583 1.50083 7.87104 1.31572 6.94046C1.13062 6.00989 1.22562 5.04532 1.58872 4.16874C1.95181 3.29215 2.56669 2.54292 3.35559 2.0158ZM6.00481 8.60309C5.84641 8.60102 5.69509 8.53718 5.58308 8.42517C5.47107 8.31316 5.40722 8.16183 5.40515 8.00344V6.60422H4.00591C3.84687 6.60422 3.69434 6.54104 3.58189 6.42859C3.46943 6.31613 3.40625 6.1636 3.40625 6.00456C3.40625 5.84553 3.46943 5.693 3.58189 5.58054C3.69434 5.46809 3.84687 5.40491 4.00591 5.40491H5.40515V4.00572C5.40515 3.84668 5.46833 3.69416 5.58079 3.5817C5.69324 3.46924 5.84577 3.40607 6.00481 3.40607C6.16385 3.40607 6.31637 3.46924 6.42883 3.5817C6.54129 3.69416 6.60447 3.84668 6.60447 4.00572V5.40491H8.00362C8.16266 5.40491 8.31518 5.46809 8.42764 5.58054C8.5401 5.693 8.60328 5.84553 8.60328 6.00456C8.60328 6.1636 8.5401 6.31613 8.42764 6.42859C8.31518 6.54104 8.16266 6.60422 8.00362 6.60422H6.60447V8.00344C6.60239 8.16183 6.53855 8.31316 6.42654 8.42517C6.31453 8.53718 6.1632 8.60102 6.00481 8.60309Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+SearchPlusIcon.displayName = 'SearchPlusIcon';
diff --git a/components/lib/icons/searchplus/package.json b/components/lib/icons/searchplus/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/searchplus/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/sortalt/index.d.ts b/components/lib/icons/sortalt/index.d.ts
new file mode 100644
index 0000000000..9cce2fd644
--- /dev/null
+++ b/components/lib/icons/sortalt/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in SortAltIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface SortAltIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - SortAltIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SortAltIcon extends React.Component<SortAltIconProps, any> {}
diff --git a/components/lib/icons/sortalt/index.js b/components/lib/icons/sortalt/index.js
new file mode 100644
index 0000000000..cd96c8224c
--- /dev/null
+++ b/components/lib/icons/sortalt/index.js
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const SortAltIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M5.64515 3.61291C5.47353 3.61291 5.30192 3.54968 5.16644 3.4142L3.38708 1.63484L1.60773 3.4142C1.34579 3.67613 0.912244 3.67613 0.650309 3.4142C0.388374 3.15226 0.388374 2.71871 0.650309 2.45678L2.90837 0.198712C3.17031 -0.0632236 3.60386 -0.0632236 3.86579 0.198712L6.12386 2.45678C6.38579 2.71871 6.38579 3.15226 6.12386 3.4142C5.98837 3.54968 5.81676 3.61291 5.64515 3.61291Z"
+                    fill="currentColor"
+                />
+                <path d="M3.38714 14C3.01681 14 2.70972 13.6929 2.70972 13.3226V0.677419C2.70972 0.307097 3.01681 0 3.38714 0C3.75746 0 4.06456 0.307097 4.06456 0.677419V13.3226C4.06456 13.6929 3.75746 14 3.38714 14Z" fill="currentColor" />
+                <path
+                    d="M10.6129 14C10.4413 14 10.2697 13.9368 10.1342 13.8013L7.87611 11.5432C7.61418 11.2813 7.61418 10.8477 7.87611 10.5858C8.13805 10.3239 8.5716 10.3239 8.83353 10.5858L10.6129 12.3652L12.3922 10.5858C12.6542 10.3239 13.0877 10.3239 13.3497 10.5858C13.6116 10.8477 13.6116 11.2813 13.3497 11.5432L11.0916 13.8013C10.9561 13.9368 10.7845 14 10.6129 14Z"
+                    fill="currentColor"
+                />
+                <path d="M10.6129 14C10.2426 14 9.93552 13.6929 9.93552 13.3226V0.677419C9.93552 0.307097 10.2426 0 10.6129 0C10.9833 0 11.2904 0.307097 11.2904 0.677419V13.3226C11.2904 13.6929 10.9832 14 10.6129 14Z" fill="currentColor" />
+            </svg>
+        );
+    })
+);
+
+SortAltIcon.displayName = 'SortAltIcon';
diff --git a/components/lib/icons/sortalt/package.json b/components/lib/icons/sortalt/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/sortalt/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/sortamountdown/index.d.ts b/components/lib/icons/sortamountdown/index.d.ts
new file mode 100644
index 0000000000..64b5c4abf2
--- /dev/null
+++ b/components/lib/icons/sortamountdown/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in SortAmountDownIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface SortAmountDownIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - SortAmountDownIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SortAmountDownIcon extends React.Component<SortAmountDownIconProps, any> {}
diff --git a/components/lib/icons/sortamountdown/index.js b/components/lib/icons/sortamountdown/index.js
new file mode 100644
index 0000000000..39e376f00f
--- /dev/null
+++ b/components/lib/icons/sortamountdown/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const SortAmountDownIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M4.93953 10.5858L3.83759 11.6877V0.677419C3.83759 0.307097 3.53049 0 3.16017 0C2.78985 0 2.48275 0.307097 2.48275 0.677419V11.6877L1.38082 10.5858C1.11888 10.3239 0.685331 10.3239 0.423396 10.5858C0.16146 10.8477 0.16146 11.2813 0.423396 11.5432L2.68146 13.8013C2.74469 13.8645 2.81694 13.9097 2.89823 13.9458C2.97952 13.9819 3.06985 14 3.16017 14C3.25049 14 3.33178 13.9819 3.42211 13.9458C3.5034 13.9097 3.57565 13.8645 3.63888 13.8013L5.89694 11.5432C6.15888 11.2813 6.15888 10.8477 5.89694 10.5858C5.63501 10.3239 5.20146 10.3239 4.93953 10.5858ZM13.0957 0H7.22468C6.85436 0 6.54726 0.307097 6.54726 0.677419C6.54726 1.04774 6.85436 1.35484 7.22468 1.35484H13.0957C13.466 1.35484 13.7731 1.04774 13.7731 0.677419C13.7731 0.307097 13.466 0 13.0957 0ZM7.22468 5.41935H9.48275C9.85307 5.41935 10.1602 5.72645 10.1602 6.09677C10.1602 6.4671 9.85307 6.77419 9.48275 6.77419H7.22468C6.85436 6.77419 6.54726 6.4671 6.54726 6.09677C6.54726 5.72645 6.85436 5.41935 7.22468 5.41935ZM7.6763 8.12903H7.22468C6.85436 8.12903 6.54726 8.43613 6.54726 8.80645C6.54726 9.17677 6.85436 9.48387 7.22468 9.48387H7.6763C8.04662 9.48387 8.35372 9.17677 8.35372 8.80645C8.35372 8.43613 8.04662 8.12903 7.6763 8.12903ZM7.22468 2.70968H11.2892C11.6595 2.70968 11.9666 3.01677 11.9666 3.3871C11.9666 3.75742 11.6595 4.06452 11.2892 4.06452H7.22468C6.85436 4.06452 6.54726 3.75742 6.54726 3.3871C6.54726 3.01677 6.85436 2.70968 7.22468 2.70968Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+SortAmountDownIcon.displayName = 'SortAmountDownIcon';
diff --git a/components/lib/icons/sortamountdown/package.json b/components/lib/icons/sortamountdown/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/sortamountdown/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/sortamountupalt/index.d.ts b/components/lib/icons/sortamountupalt/index.d.ts
new file mode 100644
index 0000000000..af7078b644
--- /dev/null
+++ b/components/lib/icons/sortamountupalt/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in SortAmountUpAltIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface SortAmountUpAltIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - SortAmountUpAltIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SortAmountUpAltIcon extends React.Component<SortAmountUpAltIconProps, any> {}
diff --git a/components/lib/icons/sortamountupalt/index.js b/components/lib/icons/sortamountupalt/index.js
new file mode 100644
index 0000000000..9de37ff593
--- /dev/null
+++ b/components/lib/icons/sortamountupalt/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const SortAmountUpAltIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M3.63435 0.19871C3.57113 0.135484 3.49887 0.0903226 3.41758 0.0541935C3.255 -0.0180645 3.06532 -0.0180645 2.90274 0.0541935C2.82145 0.0903226 2.74919 0.135484 2.68597 0.19871L0.427901 2.45677C0.165965 2.71871 0.165965 3.15226 0.427901 3.41419C0.689836 3.67613 1.12338 3.67613 1.38532 3.41419L2.48726 2.31226V13.3226C2.48726 13.6929 2.79435 14 3.16467 14C3.535 14 3.84209 13.6929 3.84209 13.3226V2.31226L4.94403 3.41419C5.07951 3.54968 5.25113 3.6129 5.42274 3.6129C5.59435 3.6129 5.76597 3.54968 5.90145 3.41419C6.16338 3.15226 6.16338 2.71871 5.90145 2.45677L3.64338 0.19871H3.63435ZM13.7685 13.3226C13.7685 12.9523 13.4615 12.6452 13.0911 12.6452H7.22016C6.84984 12.6452 6.54274 12.9523 6.54274 13.3226C6.54274 13.6929 6.84984 14 7.22016 14H13.0911C13.4615 14 13.7685 13.6929 13.7685 13.3226ZM7.22016 8.58064C6.84984 8.58064 6.54274 8.27355 6.54274 7.90323C6.54274 7.5329 6.84984 7.22581 7.22016 7.22581H9.47823C9.84855 7.22581 10.1556 7.5329 10.1556 7.90323C10.1556 8.27355 9.84855 8.58064 9.47823 8.58064H7.22016ZM7.22016 5.87097H7.67177C8.0421 5.87097 8.34919 5.56387 8.34919 5.19355C8.34919 4.82323 8.0421 4.51613 7.67177 4.51613H7.22016C6.84984 4.51613 6.54274 4.82323 6.54274 5.19355C6.54274 5.56387 6.84984 5.87097 7.22016 5.87097ZM11.2847 11.2903H7.22016C6.84984 11.2903 6.54274 10.9832 6.54274 10.6129C6.54274 10.2426 6.84984 9.93548 7.22016 9.93548H11.2847C11.655 9.93548 11.9621 10.2426 11.9621 10.6129C11.9621 10.9832 11.655 11.2903 11.2847 11.2903Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+SortAmountUpAltIcon.displayName = 'SortAmountUpAltIcon';
diff --git a/components/lib/icons/sortamountupalt/package.json b/components/lib/icons/sortamountupalt/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/sortamountupalt/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/spinner/index.d.ts b/components/lib/icons/spinner/index.d.ts
new file mode 100644
index 0000000000..2eda0f5394
--- /dev/null
+++ b/components/lib/icons/spinner/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in SpinnerIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface SpinnerIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - SpinnerIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SpinnerIcon extends React.Component<SpinnerIconProps, any> {}
diff --git a/components/lib/icons/spinner/index.js b/components/lib/icons/spinner/index.js
new file mode 100644
index 0000000000..afee48ebf5
--- /dev/null
+++ b/components/lib/icons/spinner/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const SpinnerIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M6.99701 14C5.85441 13.999 4.72939 13.7186 3.72012 13.1832C2.71084 12.6478 1.84795 11.8737 1.20673 10.9284C0.565504 9.98305 0.165424 8.89526 0.041387 7.75989C-0.0826496 6.62453 0.073125 5.47607 0.495122 4.4147C0.917119 3.35333 1.59252 2.4113 2.46241 1.67077C3.33229 0.930247 4.37024 0.413729 5.4857 0.166275C6.60117 -0.0811796 7.76026 -0.0520535 8.86188 0.251112C9.9635 0.554278 10.9742 1.12227 11.8057 1.90555C11.915 2.01493 11.9764 2.16319 11.9764 2.31778C11.9764 2.47236 11.915 2.62062 11.8057 2.73C11.7521 2.78503 11.688 2.82877 11.6171 2.85864C11.5463 2.8885 11.4702 2.90389 11.3933 2.90389C11.3165 2.90389 11.2404 2.8885 11.1695 2.85864C11.0987 2.82877 11.0346 2.78503 10.9809 2.73C9.9998 1.81273 8.73246 1.26138 7.39226 1.16876C6.05206 1.07615 4.72086 1.44794 3.62279 2.22152C2.52471 2.99511 1.72683 4.12325 1.36345 5.41602C1.00008 6.70879 1.09342 8.08723 1.62775 9.31926C2.16209 10.5513 3.10478 11.5617 4.29713 12.1803C5.48947 12.7989 6.85865 12.988 8.17414 12.7157C9.48963 12.4435 10.6711 11.7264 11.5196 10.6854C12.3681 9.64432 12.8319 8.34282 12.8328 7C12.8328 6.84529 12.8943 6.69692 13.0038 6.58752C13.1132 6.47812 13.2616 6.41667 13.4164 6.41667C13.5712 6.41667 13.7196 6.47812 13.8291 6.58752C13.9385 6.69692 14 6.84529 14 7C14 8.85651 13.2622 10.637 11.9489 11.9497C10.6356 13.2625 8.85432 14 6.99701 14Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+SpinnerIcon.displayName = 'SpinnerIcon';
diff --git a/components/lib/icons/spinner/package.json b/components/lib/icons/spinner/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/spinner/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/star/index.d.ts b/components/lib/icons/star/index.d.ts
new file mode 100644
index 0000000000..cb0f20f274
--- /dev/null
+++ b/components/lib/icons/star/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in StarIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface StarIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - StarIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class StarIcon extends React.Component<StarIconProps, any> {}
diff --git a/components/lib/icons/star/index.js b/components/lib/icons/star/index.js
new file mode 100644
index 0000000000..29bf162de8
--- /dev/null
+++ b/components/lib/icons/star/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const StarIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M10.9741 13.6721C10.8806 13.6719 10.7886 13.6483 10.7066 13.6033L7.00002 11.6545L3.29345 13.6033C3.19926 13.6539 3.09281 13.6771 2.98612 13.6703C2.87943 13.6636 2.77676 13.6271 2.6897 13.5651C2.60277 13.5014 2.53529 13.4147 2.4948 13.3148C2.45431 13.215 2.44241 13.1058 2.46042 12.9995L3.17881 8.87264L0.167699 5.95324C0.0922333 5.8777 0.039368 5.78258 0.0150625 5.67861C-0.00924303 5.57463 -0.00402231 5.46594 0.030136 5.36477C0.0621323 5.26323 0.122141 5.17278 0.203259 5.10383C0.284377 5.03488 0.383311 4.99023 0.488681 4.97501L4.63087 4.37126L6.48797 0.618832C6.54083 0.530159 6.61581 0.456732 6.70556 0.405741C6.79532 0.35475 6.89678 0.327942 7.00002 0.327942C7.10325 0.327942 7.20471 0.35475 7.29447 0.405741C7.38422 0.456732 7.4592 0.530159 7.51206 0.618832L9.36916 4.37126L13.5114 4.97501C13.6167 4.99023 13.7157 5.03488 13.7968 5.10383C13.8779 5.17278 13.9379 5.26323 13.9699 5.36477C14.0041 5.46594 14.0093 5.57463 13.985 5.67861C13.9607 5.78258 13.9078 5.8777 13.8323 5.95324L10.8212 8.87264L11.532 12.9995C11.55 13.1058 11.5381 13.215 11.4976 13.3148C11.4571 13.4147 11.3896 13.5014 11.3027 13.5651C11.2059 13.632 11.0917 13.6692 10.9741 13.6721ZM7.00002 10.4393C7.09251 10.4404 7.18371 10.4613 7.2675 10.5005L10.2098 12.029L9.65193 8.75036C9.6368 8.6584 9.64343 8.56418 9.6713 8.47526C9.69918 8.38633 9.74751 8.30518 9.81242 8.23832L12.1969 5.94559L8.90298 5.45648C8.81188 5.44198 8.72555 5.406 8.65113 5.35152C8.57671 5.29703 8.51633 5.2256 8.475 5.14314L7.00002 2.1626L5.52503 5.15078C5.4837 5.23324 5.42332 5.30467 5.3489 5.35916C5.27448 5.41365 5.18815 5.44963 5.09705 5.46412L1.80318 5.94559L4.18761 8.23832C4.25252 8.30518 4.30085 8.38633 4.32873 8.47526C4.3566 8.56418 4.36323 8.6584 4.3481 8.75036L3.7902 12.0519L6.73253 10.5234C6.81451 10.4762 6.9058 10.4475 7.00002 10.4393Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+StarIcon.displayName = 'StarIcon';
diff --git a/components/lib/icons/star/package.json b/components/lib/icons/star/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/star/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/starfill/index.d.ts b/components/lib/icons/starfill/index.d.ts
new file mode 100644
index 0000000000..4ac23e83b3
--- /dev/null
+++ b/components/lib/icons/starfill/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in StarFillIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface StarFillIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - StarFillIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class StarFillIcon extends React.Component<StarFillIconProps, any> {}
diff --git a/components/lib/icons/starfill/index.js b/components/lib/icons/starfill/index.js
new file mode 100644
index 0000000000..bbd8156705
--- /dev/null
+++ b/components/lib/icons/starfill/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const StarFillIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M13.9718 5.36453C13.9398 5.26298 13.8798 5.17252 13.7986 5.10356C13.7175 5.0346 13.6186 4.98994 13.5132 4.97472L9.37043 4.37088L7.51307 0.617955C7.46021 0.529271 7.38522 0.455834 7.29545 0.404836C7.20568 0.353838 7.1042 0.327026 7.00096 0.327026C6.89771 0.327026 6.79624 0.353838 6.70647 0.404836C6.6167 0.455834 6.54171 0.529271 6.48885 0.617955L4.63149 4.37088L0.488746 4.97472C0.383363 4.98994 0.284416 5.0346 0.203286 5.10356C0.122157 5.17252 0.0621407 5.26298 0.03014 5.36453C-0.00402286 5.46571 -0.00924428 5.57442 0.0150645 5.67841C0.0393733 5.7824 0.0922457 5.87753 0.167722 5.95308L3.17924 8.87287L2.4684 13.0003C2.45038 13.1066 2.46229 13.2158 2.50278 13.3157C2.54328 13.4156 2.61077 13.5022 2.6977 13.5659C2.78477 13.628 2.88746 13.6644 2.99416 13.6712C3.10087 13.678 3.20733 13.6547 3.30153 13.6042L7.00096 11.6551L10.708 13.6042C10.79 13.6491 10.882 13.6728 10.9755 13.673C11.0958 13.6716 11.2129 13.6343 11.3119 13.5659C11.3988 13.5022 11.4663 13.4156 11.5068 13.3157C11.5473 13.2158 11.5592 13.1066 11.5412 13.0003L10.8227 8.87287L13.8266 5.95308C13.9033 5.87835 13.9577 5.7836 13.9833 5.67957C14.009 5.57554 14.005 5.4664 13.9718 5.36453Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+StarFillIcon.displayName = 'StarFillIcon';
diff --git a/components/lib/icons/starfill/package.json b/components/lib/icons/starfill/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/starfill/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/thlarge/index.d.ts b/components/lib/icons/thlarge/index.d.ts
new file mode 100644
index 0000000000..482b1fa9d1
--- /dev/null
+++ b/components/lib/icons/thlarge/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in ThLargeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface ThLargeIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - ThLargeIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ThLargeIcon extends React.Component<ThLargeIconProps, any> {}
diff --git a/components/lib/icons/thlarge/index.js b/components/lib/icons/thlarge/index.js
new file mode 100644
index 0000000000..b3d8d13015
--- /dev/null
+++ b/components/lib/icons/thlarge/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const ThLargeIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M1.90909 6.36364H4.45455C4.96087 6.36364 5.44645 6.1625 5.80448 5.80448C6.1625 5.44645 6.36364 4.96087 6.36364 4.45455V1.90909C6.36364 1.40277 6.1625 0.917184 5.80448 0.55916C5.44645 0.201136 4.96087 0 4.45455 0H1.90909C1.40277 0 0.917184 0.201136 0.55916 0.55916C0.201136 0.917184 0 1.40277 0 1.90909V4.45455C0 4.96087 0.201136 5.44645 0.55916 5.80448C0.917184 6.1625 1.40277 6.36364 1.90909 6.36364ZM1.46154 1.46154C1.58041 1.34268 1.741 1.27492 1.90909 1.27273H4.45455C4.62264 1.27492 4.78322 1.34268 4.90209 1.46154C5.02096 1.58041 5.08871 1.741 5.09091 1.90909V4.45455C5.08871 4.62264 5.02096 4.78322 4.90209 4.90209C4.78322 5.02096 4.62264 5.08871 4.45455 5.09091H1.90909C1.741 5.08871 1.58041 5.02096 1.46154 4.90209C1.34268 4.78322 1.27492 4.62264 1.27273 4.45455V1.90909C1.27492 1.741 1.34268 1.58041 1.46154 1.46154ZM1.90909 14H4.45455C4.96087 14 5.44645 13.7989 5.80448 13.4408C6.1625 13.0828 6.36364 12.5972 6.36364 12.0909V9.54544C6.36364 9.03912 6.1625 8.55354 5.80448 8.19551C5.44645 7.83749 4.96087 7.63635 4.45455 7.63635H1.90909C1.40277 7.63635 0.917184 7.83749 0.55916 8.19551C0.201136 8.55354 0 9.03912 0 9.54544V12.0909C0 12.5972 0.201136 13.0828 0.55916 13.4408C0.917184 13.7989 1.40277 14 1.90909 14ZM1.46154 9.0979C1.58041 8.97903 1.741 8.91128 1.90909 8.90908H4.45455C4.62264 8.91128 4.78322 8.97903 4.90209 9.0979C5.02096 9.21677 5.08871 9.37735 5.09091 9.54544V12.0909C5.08871 12.259 5.02096 12.4196 4.90209 12.5384C4.78322 12.6573 4.62264 12.7251 4.45455 12.7273H1.90909C1.741 12.7251 1.58041 12.6573 1.46154 12.5384C1.34268 12.4196 1.27492 12.259 1.27273 12.0909V9.54544C1.27492 9.37735 1.34268 9.21677 1.46154 9.0979ZM12.0909 6.36364H9.54544C9.03912 6.36364 8.55354 6.1625 8.19551 5.80448C7.83749 5.44645 7.63635 4.96087 7.63635 4.45455V1.90909C7.63635 1.40277 7.83749 0.917184 8.19551 0.55916C8.55354 0.201136 9.03912 0 9.54544 0H12.0909C12.5972 0 13.0828 0.201136 13.4408 0.55916C13.7989 0.917184 14 1.40277 14 1.90909V4.45455C14 4.96087 13.7989 5.44645 13.4408 5.80448C13.0828 6.1625 12.5972 6.36364 12.0909 6.36364ZM9.54544 1.27273C9.37735 1.27492 9.21677 1.34268 9.0979 1.46154C8.97903 1.58041 8.91128 1.741 8.90908 1.90909V4.45455C8.91128 4.62264 8.97903 4.78322 9.0979 4.90209C9.21677 5.02096 9.37735 5.08871 9.54544 5.09091H12.0909C12.259 5.08871 12.4196 5.02096 12.5384 4.90209C12.6573 4.78322 12.7251 4.62264 12.7273 4.45455V1.90909C12.7251 1.741 12.6573 1.58041 12.5384 1.46154C12.4196 1.34268 12.259 1.27492 12.0909 1.27273H9.54544ZM9.54544 14H12.0909C12.5972 14 13.0828 13.7989 13.4408 13.4408C13.7989 13.0828 14 12.5972 14 12.0909V9.54544C14 9.03912 13.7989 8.55354 13.4408 8.19551C13.0828 7.83749 12.5972 7.63635 12.0909 7.63635H9.54544C9.03912 7.63635 8.55354 7.83749 8.19551 8.19551C7.83749 8.55354 7.63635 9.03912 7.63635 9.54544V12.0909C7.63635 12.5972 7.83749 13.0828 8.19551 13.4408C8.55354 13.7989 9.03912 14 9.54544 14ZM9.0979 9.0979C9.21677 8.97903 9.37735 8.91128 9.54544 8.90908H12.0909C12.259 8.91128 12.4196 8.97903 12.5384 9.0979C12.6573 9.21677 12.7251 9.37735 12.7273 9.54544V12.0909C12.7251 12.259 12.6573 12.4196 12.5384 12.5384C12.4196 12.6573 12.259 12.7251 12.0909 12.7273H9.54544C9.37735 12.7251 9.21677 12.6573 9.0979 12.5384C8.97903 12.4196 8.91128 12.259 8.90908 12.0909V9.54544C8.91128 9.37735 8.97903 9.21677 9.0979 9.0979Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+ThLargeIcon.displayName = 'ThLargeIcon';
diff --git a/components/lib/icons/thlarge/package.json b/components/lib/icons/thlarge/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/thlarge/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/times/index.d.ts b/components/lib/icons/times/index.d.ts
new file mode 100644
index 0000000000..6fab0f2445
--- /dev/null
+++ b/components/lib/icons/times/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in TimesIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface TimesIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - TimesIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TimesIcon extends React.Component<TimesIconProps, any> {}
diff --git a/components/lib/icons/times/index.js b/components/lib/icons/times/index.js
new file mode 100644
index 0000000000..8da245bf64
--- /dev/null
+++ b/components/lib/icons/times/index.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const TimesIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    d="M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+TimesIcon.displayName = 'TimesIcon';
diff --git a/components/lib/icons/times/package.json b/components/lib/icons/times/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/times/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/timescircle/index.d.ts b/components/lib/icons/timescircle/index.d.ts
new file mode 100644
index 0000000000..2649655094
--- /dev/null
+++ b/components/lib/icons/timescircle/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in TimesCircleIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface TimesCircleIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - TimesCircleIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TimesCircleIcon extends React.Component<TimesCircleIconProps, any> {}
diff --git a/components/lib/icons/timescircle/index.js b/components/lib/icons/timescircle/index.js
new file mode 100644
index 0000000000..17e096f06f
--- /dev/null
+++ b/components/lib/icons/timescircle/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const TimesCircleIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M7 14C5.61553 14 4.26215 13.5895 3.11101 12.8203C1.95987 12.0511 1.06266 10.9579 0.532846 9.67879C0.00303296 8.3997 -0.13559 6.99224 0.134506 5.63437C0.404603 4.2765 1.07129 3.02922 2.05026 2.05026C3.02922 1.07129 4.2765 0.404603 5.63437 0.134506C6.99224 -0.13559 8.3997 0.00303296 9.67879 0.532846C10.9579 1.06266 12.0511 1.95987 12.8203 3.11101C13.5895 4.26215 14 5.61553 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM7 1.16667C5.84628 1.16667 4.71846 1.50879 3.75918 2.14976C2.79989 2.79074 2.05222 3.70178 1.61071 4.76768C1.16919 5.83358 1.05367 7.00647 1.27876 8.13803C1.50384 9.26958 2.05941 10.309 2.87521 11.1248C3.69102 11.9406 4.73042 12.4962 5.86198 12.7212C6.99353 12.9463 8.16642 12.8308 9.23232 12.3893C10.2982 11.9478 11.2093 11.2001 11.8502 10.2408C12.4912 9.28154 12.8333 8.15373 12.8333 7C12.8333 5.45291 12.2188 3.96918 11.1248 2.87521C10.0308 1.78125 8.5471 1.16667 7 1.16667ZM4.66662 9.91668C4.58998 9.91704 4.51404 9.90209 4.44325 9.87271C4.37246 9.84333 4.30826 9.8001 4.2544 9.74557C4.14516 9.6362 4.0838 9.48793 4.0838 9.33335C4.0838 9.17876 4.14516 9.0305 4.2544 8.92113L6.17553 7L4.25443 5.07891C4.15139 4.96832 4.09529 4.82207 4.09796 4.67094C4.10063 4.51982 4.16185 4.37563 4.26872 4.26876C4.3756 4.16188 4.51979 4.10066 4.67091 4.09799C4.82204 4.09532 4.96829 4.15142 5.07887 4.25446L6.99997 6.17556L8.92106 4.25446C9.03164 4.15142 9.1779 4.09532 9.32903 4.09799C9.48015 4.10066 9.62434 4.16188 9.73121 4.26876C9.83809 4.37563 9.89931 4.51982 9.90198 4.67094C9.90464 4.82207 9.84855 4.96832 9.74551 5.07891L7.82441 7L9.74554 8.92113C9.85478 9.0305 9.91614 9.17876 9.91614 9.33335C9.91614 9.48793 9.85478 9.6362 9.74554 9.74557C9.69168 9.8001 9.62748 9.84333 9.55669 9.87271C9.4859 9.90209 9.40996 9.91704 9.33332 9.91668C9.25668 9.91704 9.18073 9.90209 9.10995 9.87271C9.03916 9.84333 8.97495 9.8001 8.9211 9.74557L6.99997 7.82444L5.07884 9.74557C5.02499 9.8001 4.96078 9.84333 4.88999 9.87271C4.81921 9.90209 4.74326 9.91704 4.66662 9.91668Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+TimesCircleIcon.displayName = 'TimesCircleIcon';
diff --git a/components/lib/icons/timescircle/package.json b/components/lib/icons/timescircle/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/timescircle/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/trash/index.d.ts b/components/lib/icons/trash/index.d.ts
new file mode 100644
index 0000000000..97f1859259
--- /dev/null
+++ b/components/lib/icons/trash/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in TrashIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface TrashIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - TrashIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TrashIcon extends React.Component<TrashIconProps, any> {}
diff --git a/components/lib/icons/trash/index.js b/components/lib/icons/trash/index.js
new file mode 100644
index 0000000000..7c91ba2108
--- /dev/null
+++ b/components/lib/icons/trash/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const TrashIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M3.44802 13.9955H10.552C10.8056 14.0129 11.06 13.9797 11.3006 13.898C11.5412 13.8163 11.7632 13.6877 11.9537 13.5196C12.1442 13.3515 12.2995 13.1473 12.4104 12.9188C12.5213 12.6903 12.5858 12.442 12.6 12.1884V4.36041H13.4C13.5591 4.36041 13.7117 4.29722 13.8243 4.18476C13.9368 4.07229 14 3.91976 14 3.76071C14 3.60166 13.9368 3.44912 13.8243 3.33666C13.7117 3.22419 13.5591 3.16101 13.4 3.16101H12.0537C12.0203 3.1557 11.9863 3.15299 11.952 3.15299C11.9178 3.15299 11.8838 3.1557 11.8503 3.16101H11.2285C11.2421 3.10893 11.2487 3.05513 11.248 3.00106V1.80966C11.2171 1.30262 10.9871 0.828306 10.608 0.48989C10.229 0.151475 9.73159 -0.0236625 9.22402 0.00257442H4.77602C4.27251 -0.0171866 3.78126 0.160868 3.40746 0.498617C3.03365 0.836366 2.807 1.30697 2.77602 1.80966V3.00106C2.77602 3.0556 2.78346 3.10936 2.79776 3.16101H0.6C0.521207 3.16101 0.443185 3.17652 0.37039 3.20666C0.297595 3.2368 0.231451 3.28097 0.175736 3.33666C0.120021 3.39235 0.0758251 3.45846 0.0456722 3.53121C0.0155194 3.60397 0 3.68196 0 3.76071C0 3.83946 0.0155194 3.91744 0.0456722 3.9902C0.0758251 4.06296 0.120021 4.12907 0.175736 4.18476C0.231451 4.24045 0.297595 4.28462 0.37039 4.31476C0.443185 4.3449 0.521207 4.36041 0.6 4.36041H1.40002V12.1884C1.41426 12.442 1.47871 12.6903 1.58965 12.9188C1.7006 13.1473 1.85582 13.3515 2.04633 13.5196C2.23683 13.6877 2.45882 13.8163 2.69944 13.898C2.94005 13.9797 3.1945 14.0129 3.44802 13.9955ZM2.60002 4.36041H11.304V12.1884C11.304 12.5163 10.952 12.7961 10.504 12.7961H3.40002C2.97602 12.7961 2.60002 12.5163 2.60002 12.1884V4.36041ZM3.95429 3.16101C3.96859 3.10936 3.97602 3.0556 3.97602 3.00106V1.80966C3.97602 1.48183 4.33602 1.20197 4.77602 1.20197H9.24802C9.66403 1.20197 10.048 1.48183 10.048 1.80966V3.00106C10.0473 3.05515 10.054 3.10896 10.0678 3.16101H3.95429ZM5.57571 10.997C5.41731 10.995 5.26597 10.9311 5.15395 10.8191C5.04193 10.7071 4.97808 10.5558 4.97601 10.3973V6.77517C4.97601 6.61612 5.0392 6.46359 5.15166 6.35112C5.26413 6.23866 5.41666 6.17548 5.57571 6.17548C5.73476 6.17548 5.8873 6.23866 5.99976 6.35112C6.11223 6.46359 6.17541 6.61612 6.17541 6.77517V10.3894C6.17647 10.4688 6.16174 10.5476 6.13208 10.6213C6.10241 10.695 6.05841 10.762 6.00261 10.8186C5.94682 10.8751 5.88035 10.92 5.80707 10.9506C5.73378 10.9813 5.65514 10.9971 5.57571 10.997ZM7.99968 10.8214C8.11215 10.9339 8.26468 10.997 8.42373 10.997C8.58351 10.9949 8.73604 10.93 8.84828 10.8163C8.96052 10.7025 9.02345 10.5491 9.02343 10.3894V6.77517C9.02343 6.61612 8.96025 6.46359 8.84778 6.35112C8.73532 6.23866 8.58278 6.17548 8.42373 6.17548C8.26468 6.17548 8.11215 6.23866 7.99968 6.35112C7.88722 6.46359 7.82404 6.61612 7.82404 6.77517V10.3973C7.82404 10.5564 7.88722 10.7089 7.99968 10.8214Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+TrashIcon.displayName = 'TrashIcon';
diff --git a/components/lib/icons/trash/package.json b/components/lib/icons/trash/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/trash/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/undo/index.d.ts b/components/lib/icons/undo/index.d.ts
new file mode 100644
index 0000000000..70119d84fc
--- /dev/null
+++ b/components/lib/icons/undo/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in UndoIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface UndoIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - UndoIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class UndoIcon extends React.Component<UndoIconProps, any> {}
diff --git a/components/lib/icons/undo/index.js b/components/lib/icons/undo/index.js
new file mode 100644
index 0000000000..823bfb3482
--- /dev/null
+++ b/components/lib/icons/undo/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const UndoIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M6.77042 5.96336C6.84315 5.99355 6.92118 6.00891 6.99993 6.00854C7.07868 6.00891 7.15671 5.99355 7.22944 5.96336C7.30217 5.93317 7.36814 5.88876 7.42348 5.83273C7.53572 5.72035 7.59876 5.56801 7.59876 5.40918C7.59876 5.25035 7.53572 5.09802 7.42348 4.98564L6.04897 3.61113H6.99998C7.9088 3.61113 8.79722 3.88063 9.55288 4.38554C10.3085 4.89046 10.8975 5.60811 11.2453 6.44776C11.5931 7.2874 11.6841 8.21132 11.5068 9.10268C11.3295 9.99404 10.8918 10.8128 10.2492 11.4554C9.60657 12.0981 8.7878 12.5357 7.89644 12.713C7.00508 12.8903 6.08116 12.7993 5.24152 12.4515C4.40188 12.1037 3.68422 11.5148 3.17931 10.7591C2.67439 10.0035 2.4049 9.11504 2.4049 8.20622C2.4049 8.04726 2.34175 7.89481 2.22935 7.78241C2.11695 7.67001 1.9645 7.60686 1.80554 7.60686C1.64658 7.60686 1.49413 7.67001 1.38172 7.78241C1.26932 7.89481 1.20618 8.04726 1.20618 8.20622C1.20829 9.74218 1.81939 11.2146 2.90548 12.3007C3.99157 13.3868 5.46402 13.9979 6.99998 14C8.5366 14 10.0103 13.3896 11.0968 12.3031C12.1834 11.2165 12.7938 9.74283 12.7938 8.20622C12.7938 6.66961 12.1834 5.19593 11.0968 4.10938C10.0103 3.02283 8.5366 2.41241 6.99998 2.41241H6.04892L7.42348 1.03786C7.48236 0.982986 7.5296 0.916817 7.56235 0.843296C7.59511 0.769775 7.61273 0.690409 7.61415 0.609933C7.61557 0.529456 7.60076 0.449519 7.57062 0.374888C7.54047 0.300257 7.49561 0.232462 7.43869 0.175548C7.38178 0.118634 7.31398 0.0737664 7.23935 0.0436218C7.16472 0.0134773 7.08478 -0.00132663 7.00431 9.32772e-05C6.92383 0.00151319 6.84447 0.019128 6.77095 0.0518865C6.69742 0.0846451 6.63126 0.131876 6.57638 0.190763L4.17895 2.5882C4.06671 2.70058 4.00366 2.85292 4.00366 3.01175C4.00366 3.17058 4.06671 3.32291 4.17895 3.43529L6.57638 5.83273C6.63172 5.88876 6.69769 5.93317 6.77042 5.96336Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+UndoIcon.displayName = 'UndoIcon';
diff --git a/components/lib/icons/undo/package.json b/components/lib/icons/undo/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/undo/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/upload/index.d.ts b/components/lib/icons/upload/index.d.ts
new file mode 100644
index 0000000000..b761dc7743
--- /dev/null
+++ b/components/lib/icons/upload/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in UploadIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface UploadIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - UploadIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class UploadIcon extends React.Component<UploadIconProps, any> {}
diff --git a/components/lib/icons/upload/index.js b/components/lib/icons/upload/index.js
new file mode 100644
index 0000000000..1c36688756
--- /dev/null
+++ b/components/lib/icons/upload/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const UploadIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M6.58942 9.82197C6.70165 9.93405 6.85328 9.99793 7.012 10C7.17071 9.99793 7.32234 9.93405 7.43458 9.82197C7.54681 9.7099 7.61079 9.55849 7.61286 9.4V2.04798L9.79204 4.22402C9.84752 4.28011 9.91365 4.32457 9.98657 4.35479C10.0595 4.38502 10.1377 4.40039 10.2167 4.40002C10.2956 4.40039 10.3738 4.38502 10.4467 4.35479C10.5197 4.32457 10.5858 4.28011 10.6413 4.22402C10.7538 4.11152 10.817 3.95902 10.817 3.80002C10.817 3.64102 10.7538 3.48852 10.6413 3.37602L7.45127 0.190618C7.44656 0.185584 7.44176 0.180622 7.43687 0.175736C7.32419 0.063214 7.17136 0 7.012 0C6.85264 0 6.69981 0.063214 6.58712 0.175736C6.58181 0.181045 6.5766 0.186443 6.5715 0.191927L3.38282 3.37602C3.27669 3.48976 3.2189 3.6402 3.22165 3.79564C3.2244 3.95108 3.28746 4.09939 3.39755 4.20932C3.50764 4.31925 3.65616 4.38222 3.81182 4.38496C3.96749 4.3877 4.11814 4.33001 4.23204 4.22402L6.41113 2.04807V9.4C6.41321 9.55849 6.47718 9.7099 6.58942 9.82197ZM11.9952 14H2.02883C1.751 13.9887 1.47813 13.9228 1.22584 13.8061C0.973545 13.6894 0.746779 13.5241 0.558517 13.3197C0.370254 13.1154 0.22419 12.876 0.128681 12.6152C0.0331723 12.3545 -0.00990605 12.0775 0.0019109 11.8V9.40005C0.0019109 9.24092 0.065216 9.08831 0.1779 8.97579C0.290584 8.86326 0.443416 8.80005 0.602775 8.80005C0.762134 8.80005 0.914966 8.86326 1.02765 8.97579C1.14033 9.08831 1.20364 9.24092 1.20364 9.40005V11.8C1.18295 12.0376 1.25463 12.274 1.40379 12.4602C1.55296 12.6463 1.76817 12.7681 2.00479 12.8H11.9952C12.2318 12.7681 12.447 12.6463 12.5962 12.4602C12.7453 12.274 12.817 12.0376 12.7963 11.8V9.40005C12.7963 9.24092 12.8596 9.08831 12.9723 8.97579C13.085 8.86326 13.2378 8.80005 13.3972 8.80005C13.5565 8.80005 13.7094 8.86326 13.8221 8.97579C13.9347 9.08831 13.998 9.24092 13.998 9.40005V11.8C14.022 12.3563 13.8251 12.8996 13.45 13.3116C13.0749 13.7236 12.552 13.971 11.9952 14Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+UploadIcon.displayName = 'UploadIcon';
diff --git a/components/lib/icons/upload/package.json b/components/lib/icons/upload/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/upload/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/windowmaximize/index.d.ts b/components/lib/icons/windowmaximize/index.d.ts
new file mode 100644
index 0000000000..c9bfa44c02
--- /dev/null
+++ b/components/lib/icons/windowmaximize/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in WindowMaximizeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface WindowMaximizeIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - WindowMaximizeIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class WindowMaximizeIcon extends React.Component<WindowMaximizeIconProps, any> {}
diff --git a/components/lib/icons/windowmaximize/index.js b/components/lib/icons/windowmaximize/index.js
new file mode 100644
index 0000000000..9ae2023746
--- /dev/null
+++ b/components/lib/icons/windowmaximize/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const WindowMaximizeIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M7 14H11.8C12.3835 14 12.9431 13.7682 13.3556 13.3556C13.7682 12.9431 14 12.3835 14 11.8V2.2C14 1.61652 13.7682 1.05694 13.3556 0.644365C12.9431 0.231785 12.3835 0 11.8 0H2.2C1.61652 0 1.05694 0.231785 0.644365 0.644365C0.231785 1.05694 0 1.61652 0 2.2V7C0 7.15913 0.063214 7.31174 0.175736 7.42426C0.288258 7.53679 0.44087 7.6 0.6 7.6C0.75913 7.6 0.911742 7.53679 1.02426 7.42426C1.13679 7.31174 1.2 7.15913 1.2 7V2.2C1.2 1.93478 1.30536 1.68043 1.49289 1.49289C1.68043 1.30536 1.93478 1.2 2.2 1.2H11.8C12.0652 1.2 12.3196 1.30536 12.5071 1.49289C12.6946 1.68043 12.8 1.93478 12.8 2.2V11.8C12.8 12.0652 12.6946 12.3196 12.5071 12.5071C12.3196 12.6946 12.0652 12.8 11.8 12.8H7C6.84087 12.8 6.68826 12.8632 6.57574 12.9757C6.46321 13.0883 6.4 13.2409 6.4 13.4C6.4 13.5591 6.46321 13.7117 6.57574 13.8243C6.68826 13.9368 6.84087 14 7 14ZM9.77805 7.42192C9.89013 7.534 10.0415 7.59788 10.2 7.59995C10.3585 7.59788 10.5099 7.534 10.622 7.42192C10.7341 7.30985 10.798 7.15844 10.8 6.99995V3.94242C10.8066 3.90505 10.8096 3.86689 10.8089 3.82843C10.8079 3.77159 10.7988 3.7157 10.7824 3.6623C10.756 3.55552 10.701 3.45698 10.622 3.37798C10.5099 3.2659 10.3585 3.20202 10.2 3.19995H7.00002C6.84089 3.19995 6.68828 3.26317 6.57576 3.37569C6.46324 3.48821 6.40002 3.64082 6.40002 3.79995C6.40002 3.95908 6.46324 4.11169 6.57576 4.22422C6.68828 4.33674 6.84089 4.39995 7.00002 4.39995H8.80006L6.19997 7.00005C6.10158 7.11005 6.04718 7.25246 6.04718 7.40005C6.04718 7.54763 6.10158 7.69004 6.19997 7.80005C6.30202 7.91645 6.44561 7.98824 6.59997 8.00005C6.75432 7.98824 6.89791 7.91645 6.99997 7.80005L9.60002 5.26841V6.99995C9.6021 7.15844 9.66598 7.30985 9.77805 7.42192ZM1.4 14H3.8C4.17066 13.9979 4.52553 13.8498 4.78763 13.5877C5.04973 13.3256 5.1979 12.9707 5.2 12.6V10.2C5.1979 9.82939 5.04973 9.47452 4.78763 9.21242C4.52553 8.95032 4.17066 8.80215 3.8 8.80005H1.4C1.02934 8.80215 0.674468 8.95032 0.412371 9.21242C0.150274 9.47452 0.00210008 9.82939 0 10.2V12.6C0.00210008 12.9707 0.150274 13.3256 0.412371 13.5877C0.674468 13.8498 1.02934 13.9979 1.4 14ZM1.25858 10.0586C1.29609 10.0211 1.34696 10 1.4 10H3.8C3.85304 10 3.90391 10.0211 3.94142 10.0586C3.97893 10.0961 4 10.147 4 10.2V12.6C4 12.6531 3.97893 12.704 3.94142 12.7415C3.90391 12.779 3.85304 12.8 3.8 12.8H1.4C1.34696 12.8 1.29609 12.779 1.25858 12.7415C1.22107 12.704 1.2 12.6531 1.2 12.6V10.2C1.2 10.147 1.22107 10.0961 1.25858 10.0586Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+WindowMaximizeIcon.displayName = 'WindowMaximizeIcon';
diff --git a/components/lib/icons/windowmaximize/package.json b/components/lib/icons/windowmaximize/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/windowmaximize/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/icons/windowminimize/index.d.ts b/components/lib/icons/windowminimize/index.d.ts
new file mode 100644
index 0000000000..29b4e3652c
--- /dev/null
+++ b/components/lib/icons/windowminimize/index.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { IconBaseProps } from '../../iconbase';
+
+/**
+ * Defines valid properties in WindowMinimizeIcon component. In addition to these, all properties of SVGSVGElement can be used in this component.
+ * @group Properties
+ */
+export interface WindowMinimizeIconProps extends IconBaseProps {}
+
+/**
+ * **PrimeReact - WindowMinimizeIcon**
+ *
+ * [Live Demo](https://www.primereact.org/icons/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class WindowMinimizeIcon extends React.Component<WindowMinimizeIconProps, any> {}
diff --git a/components/lib/icons/windowminimize/index.js b/components/lib/icons/windowminimize/index.js
new file mode 100644
index 0000000000..f60279c19f
--- /dev/null
+++ b/components/lib/icons/windowminimize/index.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IconBase } from '../../iconbase/IconBase';
+
+export const WindowMinimizeIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const pti = IconBase.getPTI(inProps);
+
+        return (
+            <svg ref={ref} width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...pti}>
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M11.8 0H2.2C1.61652 0 1.05694 0.231785 0.644365 0.644365C0.231785 1.05694 0 1.61652 0 2.2V7C0 7.15913 0.063214 7.31174 0.175736 7.42426C0.288258 7.53679 0.44087 7.6 0.6 7.6C0.75913 7.6 0.911742 7.53679 1.02426 7.42426C1.13679 7.31174 1.2 7.15913 1.2 7V2.2C1.2 1.93478 1.30536 1.68043 1.49289 1.49289C1.68043 1.30536 1.93478 1.2 2.2 1.2H11.8C12.0652 1.2 12.3196 1.30536 12.5071 1.49289C12.6946 1.68043 12.8 1.93478 12.8 2.2V11.8C12.8 12.0652 12.6946 12.3196 12.5071 12.5071C12.3196 12.6946 12.0652 12.8 11.8 12.8H7C6.84087 12.8 6.68826 12.8632 6.57574 12.9757C6.46321 13.0883 6.4 13.2409 6.4 13.4C6.4 13.5591 6.46321 13.7117 6.57574 13.8243C6.68826 13.9368 6.84087 14 7 14H11.8C12.3835 14 12.9431 13.7682 13.3556 13.3556C13.7682 12.9431 14 12.3835 14 11.8V2.2C14 1.61652 13.7682 1.05694 13.3556 0.644365C12.9431 0.231785 12.3835 0 11.8 0ZM6.368 7.952C6.44137 7.98326 6.52025 7.99958 6.6 8H9.8C9.95913 8 10.1117 7.93678 10.2243 7.82426C10.3368 7.71174 10.4 7.55913 10.4 7.4C10.4 7.24087 10.3368 7.08826 10.2243 6.97574C10.1117 6.86321 9.95913 6.8 9.8 6.8H8.048L10.624 4.224C10.73 4.11026 10.7877 3.95982 10.7849 3.80438C10.7822 3.64894 10.7192 3.50063 10.6093 3.3907C10.4994 3.28077 10.3511 3.2178 10.1956 3.21506C10.0402 3.21232 9.88974 3.27002 9.776 3.376L7.2 5.952V4.2C7.2 4.04087 7.13679 3.88826 7.02426 3.77574C6.91174 3.66321 6.75913 3.6 6.6 3.6C6.44087 3.6 6.28826 3.66321 6.17574 3.77574C6.06321 3.88826 6 4.04087 6 4.2V7.4C6.00042 7.47975 6.01674 7.55862 6.048 7.632C6.07656 7.70442 6.11971 7.7702 6.17475 7.82524C6.2298 7.88029 6.29558 7.92344 6.368 7.952ZM1.4 8.80005H3.8C4.17066 8.80215 4.52553 8.95032 4.78763 9.21242C5.04973 9.47452 5.1979 9.82939 5.2 10.2V12.6C5.1979 12.9707 5.04973 13.3256 4.78763 13.5877C4.52553 13.8498 4.17066 13.9979 3.8 14H1.4C1.02934 13.9979 0.674468 13.8498 0.412371 13.5877C0.150274 13.3256 0.00210008 12.9707 0 12.6V10.2C0.00210008 9.82939 0.150274 9.47452 0.412371 9.21242C0.674468 8.95032 1.02934 8.80215 1.4 8.80005ZM3.94142 12.7415C3.97893 12.704 4 12.6531 4 12.6V10.2C4 10.147 3.97893 10.0961 3.94142 10.0586C3.90391 10.0211 3.85304 10 3.8 10H1.4C1.34696 10 1.29609 10.0211 1.25858 10.0586C1.22107 10.0961 1.2 10.147 1.2 10.2V12.6C1.2 12.6531 1.22107 12.704 1.25858 12.7415C1.29609 12.779 1.34696 12.8 1.4 12.8H3.8C3.85304 12.8 3.90391 12.779 3.94142 12.7415Z"
+                    fill="currentColor"
+                />
+            </svg>
+        );
+    })
+);
+
+WindowMinimizeIcon.displayName = 'WindowMinimizeIcon';
diff --git a/components/lib/icons/windowminimize/package.json b/components/lib/icons/windowminimize/package.json
new file mode 100644
index 0000000000..e0ef93fd30
--- /dev/null
+++ b/components/lib/icons/windowminimize/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
new file mode 100644
index 0000000000..58fcc1e379
--- /dev/null
+++ b/components/lib/image/Image.js
@@ -0,0 +1,403 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useGlobalOnEscapeKey, useMergeProps, useUnmountEffect } from '../hooks/Hooks';
+import { DownloadIcon } from '../icons/download';
+import { EyeIcon } from '../icons/eye';
+import { RefreshIcon } from '../icons/refresh';
+import { SearchMinusIcon } from '../icons/searchminus';
+import { SearchPlusIcon } from '../icons/searchplus';
+import { TimesIcon } from '../icons/times';
+import { UndoIcon } from '../icons/undo';
+import { Portal } from '../portal/Portal';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { ImageBase } from './ImageBase';
+
+export const Image = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ImageBase.getProps(inProps, context);
+
+        const [maskVisibleState, setMaskVisibleState] = React.useState(false);
+        const [previewVisibleState, setPreviewVisibleState] = React.useState(false);
+        const [rotateState, setRotateState] = React.useState(0);
+        const [scaleState, setScaleState] = React.useState(1);
+        const elementRef = React.useRef(null);
+        const imageRef = React.useRef(null);
+        const maskRef = React.useRef(null);
+        const previewRef = React.useRef(null);
+        const previewButton = React.useRef(null);
+        const zoomOutDisabled = scaleState <= 0.5;
+        const zoomInDisabled = scaleState >= 1.5;
+        const { ptm, cx, sx, isUnstyled } = ImageBase.setMetaData({
+            props,
+            state: {
+                maskVisible: maskVisibleState,
+                previewVisible: previewVisibleState,
+                rotate: rotateState,
+                scale: scaleState
+            }
+        });
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: props.closeOnEscape && maskVisibleState,
+            priority: [
+                ESC_KEY_HANDLING_PRIORITIES.IMAGE,
+                // Assume that there could be only one image mask activated, so it's safe
+                // to provide one and the same priority all the time:
+                0
+            ]
+        });
+
+        useHandleStyle(ImageBase.css.styles, isUnstyled, { name: 'image' });
+
+        const show = () => {
+            if (props.preview) {
+                setMaskVisibleState(true);
+                DomHandler.blockBodyScroll();
+                setTimeout(() => {
+                    setPreviewVisibleState(true);
+                }, 25);
+            }
+        };
+
+        const hide = () => {
+            setPreviewVisibleState(false);
+            DomHandler.unblockBodyScroll();
+            setRotateState(0);
+            setScaleState(1);
+        };
+
+        const onMaskClick = (event) => {
+            const isActionbarTarget = [event.target.classList].includes('p-image-action') || event.target.closest('.p-image-action');
+
+            if (isActionbarTarget) {
+                return;
+            }
+
+            hide();
+        };
+
+        const onMaskKeydown = (event) => {
+            switch (event.code) {
+                case 'Escape':
+                    hide();
+                    setTimeout(() => {
+                        DomHandler.focus(previewButton.current);
+                    }, 200);
+                    event.preventDefault();
+
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onDownload = () => {
+            const { alt: name, src } = props;
+
+            DomHandler.saveAs({ name, src });
+        };
+
+        const rotateRight = (event) => {
+            event.stopPropagation();
+
+            setRotateState((prevRotate) => prevRotate + 90);
+        };
+
+        const rotateLeft = (event) => {
+            event.stopPropagation();
+
+            setRotateState((prevRotate) => prevRotate - 90);
+        };
+
+        const zoomIn = (event) => {
+            event.stopPropagation();
+
+            setScaleState((prevScale) => {
+                if (zoomInDisabled) {
+                    return prevScale;
+                }
+
+                return prevScale + 0.1;
+            });
+        };
+
+        const zoomOut = (event) => {
+            event.stopPropagation();
+
+            setScaleState((prevScale) => {
+                if (zoomOutDisabled) {
+                    return prevScale;
+                }
+
+                return prevScale - 0.1;
+            });
+        };
+
+        const onEntering = () => {
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
+        };
+
+        const onEntered = () => {
+            props.onShow && props.onShow();
+        };
+
+        const onExit = () => {
+            !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+        };
+
+        const onExiting = () => {
+            props.onHide && props.onHide();
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(maskRef.current);
+
+            setMaskVisibleState(false);
+        };
+
+        useUnmountEffect(() => {
+            maskRef.current && ZIndexUtils.clear(maskRef.current);
+        });
+
+        const createPreview = () => {
+            const ariaLabel = localeOption('aria') ? localeOption('aria').zoomImage : undefined;
+            const buttonProps = mergeProps(
+                {
+                    ref: previewButton,
+                    className: cx('button'),
+                    onClick: show,
+                    type: 'button',
+                    'aria-label': ariaLabel
+                },
+                ptm('button')
+            );
+
+            if (props.preview) {
+                return <button {...buttonProps}>{content}</button>;
+            }
+
+            return null;
+        };
+
+        const createElement = () => {
+            const { downloadable, alt, crossOrigin, referrerPolicy, useMap, loading } = props;
+            const downloadIconProps = mergeProps(ptm('downloadIcon'));
+            const rotateRightIconProps = mergeProps(ptm('rotateRightIcon'));
+            const rotateLeftIconProps = mergeProps(ptm('rotateLeftIcon'));
+            const zoomOutIconProps = mergeProps(ptm('zoomOutIcon'));
+            const zoomInIconProps = mergeProps(ptm('zoomInIcon'));
+            const closeIconProps = mergeProps(ptm('closeIcon'));
+            const downloadIcon = IconUtils.getJSXIcon(props.downloadIcon || <DownloadIcon />, { ...downloadIconProps }, { props });
+            const rotateRightIcon = IconUtils.getJSXIcon(props.rotateRightIcon || <RefreshIcon />, { ...rotateRightIconProps }, { props });
+            const rotateLeftIcon = IconUtils.getJSXIcon(props.rotateLeftIcon || <UndoIcon />, { ...rotateLeftIconProps }, { props });
+            const zoomOutIcon = IconUtils.getJSXIcon(props.zoomOutIcon || <SearchMinusIcon />, { ...zoomOutIconProps }, { props });
+            const zoomInIcon = IconUtils.getJSXIcon(props.zoomInIcon || <SearchPlusIcon />, { ...zoomInIconProps }, { props });
+            const closeIcon = IconUtils.getJSXIcon(props.closeIcon || <TimesIcon />, { ...closeIconProps }, { props });
+
+            const maskProps = mergeProps(
+                {
+                    ref: maskRef,
+                    role: 'dialog',
+                    className: cx('mask'),
+                    'aria-modal': maskVisibleState,
+                    onClick: onMaskClick,
+                    onKeyDown: onMaskKeydown
+                },
+                ptm('mask')
+            );
+
+            const toolbarProps = mergeProps(
+                {
+                    className: cx('toolbar')
+                },
+                ptm('toolbar')
+            );
+
+            const downloadButtonProps = mergeProps(
+                {
+                    className: cx('downloadButton'),
+                    onPointerUp: onDownload,
+                    type: 'button'
+                },
+                ptm('downloadButton')
+            );
+
+            const rotateRightButtonProps = mergeProps(
+                {
+                    className: cx('rotateRightButton'),
+                    onClick: rotateRight,
+                    type: 'button',
+                    'aria-label': localeOption('aria') ? localeOption('aria').rotateRight : undefined,
+                    'data-pc-group-section': 'action'
+                },
+                ptm('rotateRightButton')
+            );
+
+            const rotateLeftButtonProps = mergeProps(
+                {
+                    className: cx('rotateLeftButton'),
+                    onClick: rotateLeft,
+                    type: 'button',
+                    'aria-label': localeOption('aria') ? localeOption('aria').rotateLeft : undefined,
+                    'data-pc-group-section': 'action'
+                },
+                ptm('rotateLeftButton')
+            );
+
+            const zoomOutButtonProps = mergeProps(
+                {
+                    className: classNames(cx('zoomOutButton'), { 'p-disabled': zoomOutDisabled }),
+                    style: { pointerEvents: 'auto' },
+                    onClick: zoomOut,
+                    type: 'button',
+                    disabled: zoomOutDisabled,
+                    'aria-label': localeOption('aria') ? localeOption('aria').zoomOut : undefined,
+                    'data-pc-group-section': 'action'
+                },
+                ptm('zoomOutButton')
+            );
+
+            const zoomInButtonProps = mergeProps(
+                {
+                    className: classNames(cx('zoomInButton'), { 'p-disabled': zoomInDisabled }),
+                    style: { pointerEvents: 'auto' },
+                    onClick: zoomIn,
+                    type: 'button',
+                    disabled: zoomInDisabled,
+                    'aria-label': localeOption('aria') ? localeOption('aria').zoomIn : undefined,
+                    'data-pc-group-section': 'action'
+                },
+                ptm('zoomInButton')
+            );
+
+            const closeButtonProps = mergeProps(
+                {
+                    className: cx('closeButton'),
+                    type: 'button',
+                    onClick: hide,
+                    'aria-label': localeOption('aria') ? localeOption('aria').close : undefined,
+                    autoFocus: true,
+                    'data-pc-group-section': 'action'
+                },
+                ptm('closeButton')
+            );
+
+            const previewProps = mergeProps(
+                {
+                    src: props.zoomSrc || props.src,
+                    className: cx('preview'),
+                    style: sx('preview', { rotateState, scaleState }),
+                    crossOrigin: crossOrigin,
+                    referrerPolicy: referrerPolicy,
+                    useMap: useMap,
+                    loading: loading
+                },
+                ptm('preview')
+            );
+            const previewContainerProps = mergeProps(
+                {
+                    ref: previewRef
+                },
+                ptm('previewContainer')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: previewVisibleState,
+                    timeout: { enter: 150, exit: 150 },
+                    unmountOnExit: true,
+                    onEntering: onEntering,
+                    onEntered: onEntered,
+                    onExit: onExit,
+                    onExiting: onExiting,
+                    onExited: onExited
+                },
+                ptm('transition')
+            );
+
+            return (
+                <div {...maskProps}>
+                    <div {...toolbarProps}>
+                        {downloadable && <button {...downloadButtonProps}>{downloadIcon}</button>}
+                        <button {...rotateRightButtonProps}>{rotateRightIcon}</button>
+                        <button {...rotateLeftButtonProps}>{rotateLeftIcon}</button>
+                        <button {...zoomOutButtonProps}>{zoomOutIcon}</button>
+                        <button {...zoomInButtonProps}>{zoomInIcon}</button>
+                        <button {...closeButtonProps}>{closeIcon}</button>
+                    </div>
+                    <CSSTransition nodeRef={previewRef} {...transitionProps}>
+                        <div {...previewContainerProps}>
+                            <img alt={alt} {...previewProps} />
+                        </div>
+                    </CSSTransition>
+                </div>
+            );
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            getElement: () => elementRef.current,
+            getImage: () => imageRef.current
+        }));
+
+        const { src, alt, width, height, crossOrigin, referrerPolicy, useMap, loading } = props;
+        const element = createElement();
+        const iconProp = mergeProps(
+            {
+                className: cx('icon')
+            },
+            ptm('icon')
+        );
+        const icon = props.indicatorIcon || <EyeIcon {...iconProp} />;
+        const indicatorIcon = IconUtils.getJSXIcon(icon, { ...iconProp }, { props });
+        const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : indicatorIcon;
+        const preview = createPreview();
+        const imageProp = mergeProps(
+            {
+                ref: imageRef,
+                src: src,
+                className: props.imageClassName,
+                width: width,
+                height: height,
+                crossOrigin: crossOrigin,
+                referrerPolicy: referrerPolicy,
+                useMap: useMap,
+                loading: loading,
+                style: props.imageStyle,
+                onError: props.onError
+            },
+            ptm('image')
+        );
+        const image = props.src && <img {...imageProp} alt={alt} />;
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root'))
+            },
+            ImageBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <span {...rootProps}>
+                {image}
+                {preview}
+                {maskVisibleState && <Portal element={element} appendTo={document.body} />}
+            </span>
+        );
+    })
+);
+
+Image.displayName = 'Image';
diff --git a/components/lib/image/ImageBase.js b/components/lib/image/ImageBase.js
new file mode 100644
index 0000000000..bd83163719
--- /dev/null
+++ b/components/lib/image/ImageBase.js
@@ -0,0 +1,157 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    button: 'p-image-preview-indicator',
+    mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
+    toolbar: 'p-image-toolbar',
+    downloadButton: 'p-image-action p-link',
+    rotateRightButton: 'p-image-action p-link',
+    rotateLeftButton: 'p-image-action p-link',
+    zoomOutButton: 'p-image-action p-link',
+    zoomInButton: 'p-image-action p-link',
+    closeButton: 'p-image-action p-link',
+    preview: 'p-image-preview',
+    icon: 'p-image-preview-icon',
+    root: ({ props }) =>
+        classNames('p-image p-component', {
+            'p-image-preview-container': props.preview
+        }),
+    transition: 'p-image-preview'
+};
+
+const styles = `
+@layer primereact {
+    .p-image-mask {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-image-preview-container {
+        position: relative;
+        display: inline-block;
+        line-height: 0;
+    }
+    
+    .p-image-preview-indicator {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity .3s;
+        border: none;
+        padding: 0;
+    }
+    
+    .p-image-preview-icon {
+        font-size: 1.5rem;
+    }
+    
+    .p-image-preview-container:hover > .p-image-preview-indicator {
+        opacity: 1;
+        cursor: pointer;
+    }
+    
+    .p-image-preview-container > img {
+        cursor: pointer;
+    }
+    
+    .p-image-toolbar {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        z-index: 1;
+    }
+    
+    .p-image-action.p-link {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+    .p-image-preview {
+        transition: transform .15s;
+        max-width: 100vw;
+        max-height: 100vh;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .p-image-preview-enter {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+    
+    .p-image-preview-enter-active {
+        opacity: 1;
+        transform: scale(1);
+        transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
+    }
+    
+    .p-image-preview-enter-done {
+        transform: none;
+    }
+    
+    .p-image-preview-exit {
+        opacity: 1;
+    }
+    
+    .p-image-preview-exit-active {
+        opacity: 0;
+        transform: scale(0.7);
+        transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+    }
+}
+`;
+
+const inlineStyles = {
+    preview: ({ rotateState, scaleState }) => ({
+        transform: 'rotate(' + rotateState + 'deg) scale(' + scaleState + ')'
+    })
+};
+
+export const ImageBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Image',
+        alt: null,
+        className: null,
+        closeIcon: null,
+        crossOrigin: null,
+        decoding: null,
+        downloadIcon: null,
+        downloadable: false,
+        height: null,
+        imageClassName: null,
+        imageStyle: null,
+        indicatorIcon: null,
+        loading: null,
+        onError: null,
+        onHide: null,
+        onShow: null,
+        preview: false,
+        referrerPolicy: null,
+        rotateLeftIcon: null,
+        rotateRightIcon: null,
+        src: null,
+        template: null,
+        useMap: null,
+        width: null,
+        zoomInIcon: null,
+        zoomOutIcon: null,
+        zoomSrc: null,
+        children: undefined,
+        closeOnEscape: true
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/image/image.d.ts b/components/lib/image/image.d.ts
new file mode 100644
index 0000000000..2af67f911f
--- /dev/null
+++ b/components/lib/image/image.d.ts
@@ -0,0 +1,305 @@
+/**
+ *
+ * Displays a single image with preview and tranformation options.
+ *
+ * [Live Demo](https://www.primereact.org/image/)
+ *
+ * @module image
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type ImagePassThroughType<T> = PassThroughType<T, ImagePassThroughMethodOptions>;
+export declare type ImagePassThroughTransitionType = ReactCSSTransitionProps | ((options: ImagePassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ImagePassThroughMethodOptions {
+    props: ImageProps;
+    state: ImageState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ImageProps.pt}
+ */
+export interface ImagePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ImagePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: ImagePassThroughType<React.ImgHTMLAttributes<HTMLImageElement>>;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: ImagePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ImagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: ImagePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the toolbar's DOM element.
+     */
+    toolbar?: ImagePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the download button's DOM element.
+     */
+    downloadButton?: ImagePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the download icon's DOM element.
+     */
+    downloadIcon?: ImagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the rotate right button's DOM element.
+     */
+    rotateRightButton?: ImagePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the rotate right icon's DOM element.
+     */
+    rotateRightIcon?: ImagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the rotate left button's DOM element.
+     */
+    rotateLeftButton?: ImagePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the rotate left icon's DOM element.
+     */
+    rotateLeftIcon?: ImagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the zoom out button's DOM element.
+     */
+    zoomOutButton?: ImagePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the zoom out icon's DOM element.
+     */
+    zoomOutIcon?: ImagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the zoom in button's DOM element.
+     */
+    zoomInButton?: ImagePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the zoom in icon's DOM element.
+     */
+    zoomInIcon?: ImagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: ImagePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: ImagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the preview container's DOM element.
+     */
+    previewContainer?: ImagePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the preview's DOM element.
+     */
+    preview?: ImagePassThroughType<React.ImgHTMLAttributes<HTMLImageElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: ImagePassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Image component.
+ */
+export interface ImageState {
+    /**
+     * Mask visible state as a boolean.
+     * @defaultValue false
+     */
+    maskVisible: boolean;
+    /**
+     * Preview visible state as a boolean.
+     * @defaultValue false
+     */
+    previewVisible: boolean;
+    /**
+     * Rotate state as a number.
+     * @defaultValue 0
+     */
+    rotate: number;
+    /**
+     * Scale state as a boolean.
+     * @defaultValue 1
+     */
+    scale: number;
+}
+/**
+ * Defines valid properties in Image component. In addition to these, all properties of HTMLSpanElement can be used in this component.
+ * @group Properties
+ */
+export interface ImageProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref' | 'pt'> {
+    /**
+     * Specifies an alternate text for an area, if the image cannot be displayed.
+     */
+    alt?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Specifies if pressing escape key should hide the preview.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * The crossorigin content attribute on media elements is a CORS settings attribute.
+     */
+    crossOrigin?: 'anonymous' | 'use-credentials' | '' | undefined;
+    /**
+     * Adds a download button to the preview control menu.
+     * @default false
+     */
+    downloadable?: boolean | undefined;
+    /**
+     * Icon of the download button.
+     */
+    downloadIcon?: IconType<ImageProps> | undefined;
+    /**
+     * Specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them.
+     */
+    loading?: 'eager' | 'lazy' | undefined;
+    /**
+     * Icon of the rotate right button.
+     */
+    rotateRightIcon?: IconType<ImageProps> | undefined;
+    /**
+     * Icon of the rotate left button.
+     */
+    rotateLeftIcon?: IconType<ImageProps> | undefined;
+    /**
+     *  HTTP header controls how much referrer information (sent with the Referer header) should be included with requests.
+     */
+    referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
+    /**
+     * Specifies an image as a client-side image map (an image map is an image with clickable areas)
+     */
+    useMap?: string | undefined;
+    /**
+     * Icon of the zoom out button.
+     */
+    zoomOutIcon?: IconType<ImageProps> | undefined;
+    /**
+     * Icon of the zoom in button.
+     */
+    zoomInIcon?: IconType<ImageProps> | undefined;
+    /**
+     * Icon of the close button.
+     */
+    closeIcon?: IconType<ImageProps> | undefined;
+    /**
+     * Height of the image element.
+     */
+    height?: string | undefined;
+    /**
+     * Style class of the image element.
+     */
+    imageClassName?: string | undefined;
+    /**
+     * Inline style of the image element.
+     */
+    imageStyle?: React.CSSProperties | undefined;
+    /**
+     * Controls the preview functionality.
+     * @default false
+     */
+    preview?: boolean | undefined;
+    /**
+     * Changing the default icon when the image is hovered in preview mode.
+     */
+    indicatorIcon?: IconType<ImageProps> | undefined;
+    /**
+     * Specifies the path to the image.
+     */
+    src?: string | undefined;
+    /**
+     * Changing the default icon when the image is hovered in preview mode. Since v9, use `indicatorIcon` instead.
+     * @deprecated Since v9, use `indicatorIcon` instead.
+     */
+    template?: any | undefined;
+    /**
+     * Width of the image element.
+     */
+    width?: string | undefined;
+    /**
+     * Zoomed image that may be different than "src" image.
+     */
+    zoomSrc?: string | undefined;
+    /**
+     * Triggered when the preview overlay is hidden.
+     */
+    onHide?(): void;
+    /**
+     * Triggered when the preview overlay is shown.
+     */
+    onShow?(): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ImagePassThroughOptions}
+     */
+    pt?: ImagePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Image**
+ *
+ * _Displays a single image with preview and tranformation options._
+ *
+ * [Live Demo](https://www.primereact.org/image/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Image extends React.Component<ImageProps, any> {
+    /**
+     * Used to show the overlay.
+     */
+    public show(): void;
+    /**
+     * Used to hide the overlay.
+     */
+    public hide(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement | null} Container element
+     */
+    public getElement(): HTMLSpanElement | null;
+    /**
+     * Used to get image element
+     * @return {HTMLImageElement | null} Image element
+     */
+    public getImage(): HTMLImageElement | null;
+}
diff --git a/components/lib/image/package.json b/components/lib/image/package.json
new file mode 100644
index 0000000000..0e085a1aea
--- /dev/null
+++ b/components/lib/image/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./image.cjs.js",
+    "module": "./image.esm.js",
+    "unpkg": "./image.min.js",
+    "types": "./image.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inplace/Inplace.js b/components/lib/inplace/Inplace.js
new file mode 100644
index 0000000000..1088f33cf9
--- /dev/null
+++ b/components/lib/inplace/Inplace.js
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { localeOption, PrimeReactContext } from '../api/Api';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
+import { TimesIcon } from '../icons/times';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { InplaceBase } from './InplaceBase';
+
+export const InplaceDisplay = (props) => props.children;
+export const InplaceContent = (props) => props.children;
+
+export const Inplace = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = InplaceBase.getProps(inProps, context);
+
+    const [activeState, setActiveState] = React.useState(props.active);
+    const elementRef = React.useRef(null);
+    const active = props.onToggle ? props.active : activeState;
+    const metaData = {
+        props,
+        state: {
+            active: activeState
+        }
+    };
+    const { ptm, cx, isUnstyled } = InplaceBase.setMetaData(metaData);
+
+    useHandleStyle(InplaceBase.css.styles, isUnstyled, { name: 'inplace' });
+
+    const open = (event) => {
+        if (props.disabled) {
+            return;
+        }
+
+        props.onOpen && props.onOpen(event);
+
+        if (props.onToggle) {
+            props.onToggle({
+                originalEvent: event,
+                value: true
+            });
+        } else {
+            setActiveState(true);
+        }
+    };
+
+    const close = (event) => {
+        if (props.disabled) {
+            return;
+        }
+
+        props.onClose && props.onClose(event);
+
+        if (props.onToggle) {
+            props.onToggle({
+                originalEvent: event,
+                value: false
+            });
+        } else {
+            setActiveState(false);
+        }
+    };
+
+    const onDisplayKeyDown = (event) => {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
+            open(event);
+            event.preventDefault();
+        }
+    };
+
+    const createDisplay = (content) => {
+        const displayProps = mergeProps(
+            {
+                onClick: open,
+                className: cx('display'),
+                onKeyDown: onDisplayKeyDown,
+                tabIndex: props.tabIndex || '0',
+                role: 'button',
+                'aria-label': props.ariaLabel
+            },
+            ptm('display')
+        );
+
+        return <div {...displayProps}>{content}</div>;
+    };
+
+    const createCloseButton = () => {
+        const icon = props.closeIcon || <TimesIcon />;
+        const closeIcon = IconUtils.getJSXIcon(icon, undefined, { props });
+        const closeAriaLabel = localeOption('aria') ? localeOption('aria').close : undefined;
+
+        if (props.closable) {
+            const closeButtonProps = mergeProps({
+                className: cx('closeButton'),
+                icon: closeIcon,
+                type: 'button',
+                onClick: close,
+                'aria-label': closeAriaLabel,
+                pt: ptm('closeButton'),
+                __parentMetadata: {
+                    parent: metaData
+                }
+            });
+
+            return <Button {...closeButtonProps} />;
+        }
+
+        return null;
+    };
+
+    const createContent = (content) => {
+        const closeButton = createCloseButton();
+
+        const contentProps = mergeProps(
+            {
+                className: cx('content')
+            },
+            ptm('content')
+        );
+
+        return (
+            <div {...contentProps}>
+                {content}
+                {closeButton}
+            </div>
+        );
+    };
+
+    const createChildren = () => {
+        const validChildTypes = ['InplaceContent', 'InplaceDisplay'];
+
+        return React.Children.map(props.children, (child) => {
+            if (active && ObjectUtils.isValidChild(child, 'InplaceContent', validChildTypes)) {
+                return createContent(child);
+            } else if (!active && ObjectUtils.isValidChild(child, 'InplaceDisplay', validChildTypes)) {
+                return createDisplay(child);
+            }
+        });
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current
+    }));
+
+    useUpdateEffect(() => {
+        props.active ? open(null) : close(null);
+    }, [props.active]);
+
+    const children = createChildren();
+
+    const rootProps = mergeProps(
+        {
+            ref: elementRef,
+            className: classNames(props.className, cx('root')),
+            'aria-live': 'polite'
+        },
+        InplaceBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    return <div {...rootProps}>{children}</div>;
+});
+
+InplaceDisplay.displayName = 'InplaceDisplay';
+
+InplaceContent.displayName = 'InplaceContent';
+
+Inplace.displayName = 'Inplace';
diff --git a/components/lib/inplace/InplaceBase.js b/components/lib/inplace/InplaceBase.js
new file mode 100644
index 0000000000..f2fd14d83d
--- /dev/null
+++ b/components/lib/inplace/InplaceBase.js
@@ -0,0 +1,77 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    display: ({ props }) =>
+        classNames('p-inplace-display', {
+            'p-disabled': props.disabled
+        }),
+    root: ({ props }) =>
+        classNames('p-inplace p-component', {
+            'p-inplace-closable': props.closable
+        }),
+    closeButton: 'p-inplace-content-close',
+    content: 'p-inplace-content'
+};
+
+const styles = `
+@layer primereact {
+    .p-inplace .p-inplace-display {
+        display: inline;
+        cursor: pointer;
+    }
+    
+    .p-inplace .p-inplace-content {
+        display: inline;
+    }
+    
+    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+        display: flex;
+    }
+    
+    .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+    
+    .p-inplace-content-close {
+        margin-left: .25rem;
+    }
+}
+`;
+
+export const InplaceDisplayBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InplaceDisplay',
+        children: undefined
+    }
+});
+
+export const InplaceContentBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InplaceContent',
+        children: undefined
+    }
+});
+
+export const InplaceBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Inplace',
+        style: null,
+        className: null,
+        active: false,
+        closable: false,
+        closeIcon: null,
+        disabled: false,
+        tabIndex: 0,
+        ariaLabel: null,
+        onOpen: null,
+        onClose: null,
+        onToggle: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/inplace/inplace.d.ts b/components/lib/inplace/inplace.d.ts
new file mode 100644
index 0000000000..69edf66128
--- /dev/null
+++ b/components/lib/inplace/inplace.d.ts
@@ -0,0 +1,206 @@
+/**
+ *
+ * Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
+ *
+ * [Live Demo](https://www.primereact.org/inplace)
+ *
+ * Helper Components:
+ *
+ * - {@link InplaceDisplay}
+ *
+ * - {@link InplaceContent}
+ *
+ * @module inplace
+ *
+ */
+import * as React from 'react';
+import { ButtonPassThroughOptions } from '../button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type InplacePassThroughType<T> = PassThroughType<T, InplacePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InplacePassThroughMethodOptions {
+    props: InplaceProps;
+    state: InplaceState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InplaceProps.pt}
+ */
+export interface InplacePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InplacePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the display's DOM element.
+     */
+    display?: InplacePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: InplacePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    closeButton?: ButtonPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in Inplace component.
+ */
+export interface InplaceState {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link InplaceProps.onToggle}
+ * @event
+ */
+interface InplaceToggleEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Current value
+     */
+    value: boolean;
+}
+
+/**
+ * Defines valid properties in Inplace component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface InplaceProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Whether the content is displayed or not. To use in controlled mode you must implement `onToggle` callback at a minimum.
+     * @defaultValue false
+     */
+    active?: boolean | undefined;
+    /**
+     * Displays a button to switch back to display mode.
+     * @defaultValue false
+     */
+    closable?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Used to define a string that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Icon of the close button.
+     */
+    closeIcon?: IconType<InplaceProps> | undefined;
+    /**
+     * Callback to invoke when inplace is opened.
+     * @param {React.MouseEvent}  event - Browser event.
+     */
+    onOpen?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when inplace is closed.
+     * @param {React.MouseEvent}  event - Browser event.
+     */
+    onClose?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when inplace is opened or closed.
+     * @param {InplaceToggleEvent}  event - Custom toggle event.
+     */
+    onToggle?(event: InplaceToggleEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InplacePassThroughOptions}
+     */
+    pt?: InplacePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Inplace**
+ *
+ * _Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content._
+ *
+ * [Live Demo](https://www.primereact.org/inplace/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Inplace extends React.Component<InplaceProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
+
+/**
+ * @group Properties
+ */
+export interface InplaceDisplayProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * @group Properties
+ */
+export interface InplaceContentProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * InplaceDisplay is a helper component for Inplace.
+ * @group Component
+ */
+// tslint:disable-next-line:max-classes-per-file
+export declare class InplaceDisplay extends React.Component<InplaceDisplayProps, any> {}
+
+/**
+ * InplaceContent is a helper component for Inplace.
+ * @group Component
+ */
+// tslint:disable-next-line:max-classes-per-file
+export declare class InplaceContent extends React.Component<InplaceContentProps, any> {}
diff --git a/components/lib/inplace/package.json b/components/lib/inplace/package.json
new file mode 100644
index 0000000000..a103330298
--- /dev/null
+++ b/components/lib/inplace/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inplace.cjs.js",
+    "module": "./inplace.esm.js",
+    "unpkg": "./inplace.min.js",
+    "types": "./inplace.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputicon/InputIcon.d.ts b/components/lib/inputicon/InputIcon.d.ts
new file mode 100644
index 0000000000..816b4962db
--- /dev/null
+++ b/components/lib/inputicon/InputIcon.d.ts
@@ -0,0 +1,78 @@
+/**
+ *
+ * InputIcon displays an icon.
+ *
+ * [Live Demo](https://www.primereact.org/iconfield/)
+ *
+ * @module inputicon
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type InputIconPassThroughType<T> = PassThroughType<T, InputIconPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputIconPassThroughMethodOptions {
+    props: InputIconProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputIconProps.pt}
+ */
+export interface InputIconPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputIconPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in InputIcon component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface InputIconProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputIconPassThroughOptions}
+     */
+    pt?: InputIconPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputIcon**
+ *
+ * _InputIcon is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputIcon: React.ForwardRefExoticComponent<InputIconProps & React.RefAttributes<HTMLInputElement>>;
diff --git a/components/lib/inputicon/InputIcon.js b/components/lib/inputicon/InputIcon.js
new file mode 100644
index 0000000000..105e542a51
--- /dev/null
+++ b/components/lib/inputicon/InputIcon.js
@@ -0,0 +1,40 @@
+import React, { useContext, useRef } from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { PrimeReactContext } from '../api/Api';
+import { InputIconBase } from './InputIconBase';
+import { classNames } from '../utils/Utils';
+
+export const InputIcon = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const elementRef = useRef(ref);
+        const mergeProps = useMergeProps();
+        const context = useContext(PrimeReactContext);
+        const props = InputIconBase.getProps(inProps, context);
+
+        const { ptm, cx } = InputIconBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            context: {
+                iconPosition: props.iconPosition
+            }
+        });
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root'))
+            },
+            InputIconBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <span {...rootProps} ref={elementRef}>
+                    {props.children}
+                </span>
+            </>
+        );
+    })
+);
+
+InputIcon.displayName = 'InputIcon';
diff --git a/components/lib/inputicon/InputIconBase.js b/components/lib/inputicon/InputIconBase.js
new file mode 100644
index 0000000000..966dd9eeae
--- /dev/null
+++ b/components/lib/inputicon/InputIconBase.js
@@ -0,0 +1,18 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-input-icon'
+};
+
+export const InputIconBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputIcon',
+        __parentMetadata: null,
+        className: null,
+        iconPosition: null
+    },
+
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/inputicon/package.json b/components/lib/inputicon/package.json
new file mode 100644
index 0000000000..58d5a2fc3b
--- /dev/null
+++ b/components/lib/inputicon/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputicon.cjs.js",
+    "module": "./inputicon.esm.js",
+    "unpkg": "./inputicon.min.js",
+    "types": "./inputicon.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputmask/InputMask.js b/components/lib/inputmask/InputMask.js
new file mode 100644
index 0000000000..580a862e85
--- /dev/null
+++ b/components/lib/inputmask/InputMask.js
@@ -0,0 +1,667 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { InputMaskBase } from './InputMaskBase';
+
+export const InputMask = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const context = React.useContext(PrimeReactContext);
+        const props = InputMaskBase.getProps(inProps, context);
+        const elementRef = React.useRef(null);
+        const firstNonMaskPos = React.useRef(null);
+        const lastRequiredNonMaskPos = React.useRef(0);
+        const tests = React.useRef([]);
+        const buffer = React.useRef([]);
+        const len = React.useRef(0);
+        const oldVal = React.useRef(null);
+        const focus = React.useRef(false);
+        const focusText = React.useRef(null);
+        const isValueChecked = React.useRef(null);
+        const partialPosition = React.useRef(null);
+        const defaultBuffer = React.useRef(null);
+        const caretTimeoutId = React.useRef(null);
+        const androidChrome = React.useRef(false);
+        const metaData = {
+            props
+        };
+
+        const { cx } = InputMaskBase.setMetaData(metaData);
+
+        const caret = (first, last) => {
+            let range;
+            let begin;
+            let end;
+            let inputEl = elementRef.current;
+
+            if (!inputEl || !inputEl.offsetParent || inputEl !== document.activeElement) {
+                return null;
+            }
+
+            if (typeof first === 'number') {
+                begin = first;
+                end = typeof last === 'number' ? last : begin;
+
+                if (inputEl.setSelectionRange) {
+                    inputEl.setSelectionRange(begin, end);
+                } else if (inputEl.createTextRange) {
+                    range = inputEl.createTextRange();
+                    range.collapse(true);
+                    range.moveEnd('character', end);
+                    range.moveStart('character', begin);
+                    range.select();
+                }
+            } else if (inputEl.setSelectionRange) {
+                begin = inputEl.selectionStart;
+                end = inputEl.selectionEnd;
+            } else if (document.selection && document.selection.createRange) {
+                range = document.selection.createRange();
+                begin = 0 - range.duplicate().moveStart('character', -100000);
+                end = begin + range.text.length;
+            }
+
+            return { begin: begin, end: end };
+        };
+
+        const isCompleted = () => {
+            for (let i = firstNonMaskPos.current; i <= lastRequiredNonMaskPos.current; i++) {
+                if (tests.current[i] && buffer.current[i] === getPlaceholder(i)) {
+                    return false;
+                }
+            }
+
+            return true;
+        };
+
+        const getPlaceholder = React.useCallback(
+            (i) => {
+                if (i < props.slotChar.length) {
+                    return props.slotChar.charAt(i);
+                }
+
+                return props.slotChar.charAt(0);
+            },
+            [props.slotChar]
+        );
+
+        const getValue = () => {
+            return props.unmask ? getUnmaskedValue() : elementRef.current && elementRef.current.value;
+        };
+
+        const seekNext = (pos) => {
+            while (++pos < len.current && !tests.current[pos]) {}
+
+            return pos;
+        };
+
+        const seekPrev = (pos) => {
+            while (--pos >= 0 && !tests.current[pos]) {}
+
+            return pos;
+        };
+
+        const shiftL = (begin, end) => {
+            let i;
+            let j;
+
+            if (begin < 0) {
+                return;
+            }
+
+            for (i = begin, j = seekNext(end); i < len.current; i++) {
+                if (tests.current[i]) {
+                    if (j < len.current && tests.current[i].test(buffer.current[j])) {
+                        buffer.current[i] = buffer.current[j];
+                        buffer.current[j] = getPlaceholder(j);
+                    } else {
+                        break;
+                    }
+
+                    j = seekNext(j);
+                }
+            }
+
+            writeBuffer();
+            caret(Math.max(firstNonMaskPos.current, begin));
+        };
+
+        const shiftR = (pos) => {
+            let i;
+            let c;
+            let j;
+            let t;
+
+            for (i = pos, c = getPlaceholder(pos); i < len.current; i++) {
+                if (tests.current[i]) {
+                    j = seekNext(i);
+                    t = buffer.current[i];
+                    buffer.current[i] = c;
+
+                    if (j < len.current && tests.current[j].test(t)) {
+                        c = t;
+                    } else {
+                        break;
+                    }
+                }
+            }
+        };
+
+        const handleAndroidInput = (e) => {
+            let curVal = elementRef.current.value;
+            let pos = caret();
+
+            if (!pos) {
+                return;
+            }
+
+            if (oldVal.current.length && oldVal.current.length > curVal.length) {
+                // a deletion or backspace happened
+                checkVal(true);
+
+                while (pos.begin > 0 && !tests.current[pos.begin - 1]) {
+                    pos.begin--;
+                }
+
+                if (pos.begin === 0) {
+                    while (pos.begin < firstNonMaskPos.current && !tests.current[pos.begin]) {
+                        pos.begin++;
+                    }
+                }
+
+                caret(pos.begin, pos.begin);
+            } else {
+                checkVal(true);
+
+                while (pos.begin < len.current && !tests.current[pos.begin]) {
+                    pos.begin++;
+                }
+
+                caret(pos.begin, pos.begin);
+            }
+
+            if (props.onComplete && isCompleted()) {
+                props.onComplete({
+                    originalEvent: e,
+                    value: getValue()
+                });
+            }
+
+            updateModel(e);
+        };
+
+        const onBlur = (e) => {
+            focus.current = false;
+            checkVal();
+            updateModel(e);
+            updateFilledState();
+
+            props.onBlur && props.onBlur(e);
+
+            if (elementRef.current.value !== focusText.current) {
+                let event = document.createEvent('HTMLEvents');
+
+                event.initEvent('change', true, false);
+                elementRef.current.dispatchEvent(event);
+            }
+        };
+
+        const onKeyDown = (e) => {
+            if (props.readOnly) {
+                return;
+            }
+
+            let k = e.which || e.keyCode;
+            let pos;
+            let begin;
+            let end;
+
+            oldVal.current = elementRef.current.value;
+
+            //backspace, delete, and escape get special treatment
+            if (k === 8 || k === 46 || (DomHandler.isIOS() && k === 127)) {
+                pos = caret();
+
+                if (!pos) {
+                    return;
+                }
+
+                begin = pos.begin;
+                end = pos.end;
+
+                if (end - begin === 0) {
+                    begin = k !== 46 ? seekPrev(begin) : (end = seekNext(begin - 1));
+                    end = k === 46 ? seekNext(end) : end;
+                }
+
+                clearBuffer(begin, end);
+                shiftL(begin, end - 1);
+                updateModel(e);
+
+                e.preventDefault();
+            } else if (k === 13) {
+                // enter
+                onBlur(e);
+                updateModel(e);
+            } else if (k === 27) {
+                // escape
+                elementRef.current.value = focusText.current;
+                caret(0, checkVal());
+                updateModel(e);
+                e.preventDefault();
+            }
+        };
+
+        const onKeyPress = (e) => {
+            if (props.readOnly) {
+                return;
+            }
+
+            const pos = caret();
+
+            if (!pos) {
+                return;
+            }
+
+            let k = e.which || e.keyCode;
+            let p;
+            let c;
+            let next;
+            let completed;
+
+            if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
+                //Ignore
+                return;
+            } else if (k && k !== 13) {
+                if (pos.end - pos.begin !== 0) {
+                    clearBuffer(pos.begin, pos.end);
+                    shiftL(pos.begin, pos.end - 1);
+                }
+
+                p = seekNext(pos.begin - 1);
+
+                if (p < len.current) {
+                    c = String.fromCharCode(k);
+
+                    if (tests.current[p].test(c)) {
+                        shiftR(p);
+
+                        buffer.current[p] = c;
+                        writeBuffer();
+                        next = seekNext(p);
+
+                        if (DomHandler.isAndroid()) {
+                            //Path for CSP Violation on FireFox OS 1.1
+                            let proxy = () => {
+                                caret(next);
+                            };
+
+                            setTimeout(proxy, 0);
+                        } else {
+                            caret(next);
+                        }
+
+                        if (pos.begin <= lastRequiredNonMaskPos.current) {
+                            completed = isCompleted();
+                        }
+                    }
+                }
+
+                e.preventDefault();
+            }
+
+            updateModel(e);
+
+            if (props.onComplete && completed) {
+                props.onComplete({
+                    originalEvent: e,
+                    value: getValue()
+                });
+            }
+        };
+
+        const clearBuffer = (start, end) => {
+            let i;
+
+            for (i = start; i < end && i < len.current; i++) {
+                if (tests.current[i]) {
+                    buffer.current[i] = getPlaceholder(i);
+                }
+            }
+        };
+
+        const writeBuffer = () => {
+            if (elementRef.current) {
+                elementRef.current.value = buffer.current.join('');
+            }
+        };
+
+        const checkVal = (allow) => {
+            isValueChecked.current = true;
+            //try to place characters where they belong
+            let test = elementRef.current && elementRef.current.value;
+            let lastMatch = -1;
+            let i;
+            let c;
+            let pos;
+
+            for (i = 0, pos = 0; i < len.current; i++) {
+                if (tests.current[i]) {
+                    buffer.current[i] = getPlaceholder(i);
+
+                    while (pos++ < test.length) {
+                        c = test.charAt(pos - 1);
+
+                        if (tests.current[i].test(c)) {
+                            buffer.current[i] = c;
+                            lastMatch = i;
+                            break;
+                        }
+                    }
+
+                    if (pos > test.length) {
+                        clearBuffer(i + 1, len.current);
+                        break;
+                    }
+                } else {
+                    if (buffer.current[i] === test.charAt(pos)) {
+                        pos++;
+                    }
+
+                    if (i < partialPosition.current) {
+                        lastMatch = i;
+                    }
+                }
+            }
+
+            if (allow) {
+                writeBuffer();
+            } else if (lastMatch + 1 < partialPosition.current) {
+                if (props.autoClear || buffer.current.join('') === defaultBuffer.current) {
+                    // Invalid value. Remove it and replace it with the
+                    // mask, which is the default behavior.
+                    if (elementRef.current && elementRef.current.value) {
+                        elementRef.current.value = '';
+                    }
+
+                    clearBuffer(0, len.current);
+                } else {
+                    // Invalid value, but we opt to show the value to the
+                    // user and allow them to correct their mistake.
+                    writeBuffer();
+                }
+            } else {
+                writeBuffer();
+
+                if (elementRef.current) {
+                    elementRef.current.value = elementRef.current.value.substring(0, lastMatch + 1);
+                }
+            }
+
+            return partialPosition.current ? i : firstNonMaskPos.current;
+        };
+
+        const onFocus = (e) => {
+            if (props.readOnly) {
+                return;
+            }
+
+            focus.current = true;
+
+            clearTimeout(caretTimeoutId.current);
+            let pos;
+
+            if (elementRef.current) {
+                focusText.current = elementRef.current.value;
+            } else {
+                focusText.current = '';
+            }
+
+            pos = checkVal() || 0;
+
+            caretTimeoutId.current = setTimeout(() => {
+                if (elementRef.current !== document.activeElement) {
+                    return;
+                }
+
+                writeBuffer();
+
+                if (pos === props.mask.replace('?', '').length) {
+                    caret(0, pos);
+                } else {
+                    caret(pos);
+                }
+
+                updateFilledState();
+            }, 100);
+
+            props.onFocus && props.onFocus(e);
+        };
+
+        const onInput = (event) => {
+            androidChrome.current ? handleAndroidInput(event) : handleInputChange(event);
+        };
+
+        const handleInputChange = (e, isOnPaste = false) => {
+            if (props.readOnly) {
+                return;
+            }
+
+            if (!isOnPaste) {
+                let pos = checkVal(true);
+
+                caret(pos);
+            }
+
+            updateModel(e);
+
+            if (props.onComplete && isCompleted()) {
+                props.onComplete({
+                    originalEvent: e,
+                    value: getValue()
+                });
+            }
+        };
+
+        const getUnmaskedValue = React.useCallback(() => {
+            let unmaskedBuffer = [];
+
+            for (let i = 0; i < buffer.current.length; i++) {
+                let c = buffer.current[i];
+
+                if (tests.current[i] && c !== getPlaceholder(i)) {
+                    unmaskedBuffer.push(c);
+                }
+            }
+
+            return unmaskedBuffer.join('');
+        }, [getPlaceholder]);
+
+        const updateModel = (e) => {
+            if (props.onChange) {
+                let val = props.unmask ? getUnmaskedValue() : e && e.target.value;
+
+                props.onChange({
+                    originalEvent: e,
+                    value: defaultBuffer.current !== val ? val : '',
+                    stopPropagation: () => {
+                        e.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        e.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: defaultBuffer.current !== val ? val : ''
+                    }
+                });
+            }
+        };
+
+        const updateFilledState = () => {
+            if (elementRef.current && elementRef.current.value && elementRef.current.value.length > 0) {
+                DomHandler.addClass(elementRef.current, 'p-filled');
+            } else {
+                DomHandler.removeClass(elementRef.current, 'p-filled');
+            }
+        };
+
+        const updateValue = (allow) => {
+            let pos;
+
+            if (elementRef.current) {
+                if (ObjectUtils.isEmpty(props.value)) {
+                    elementRef.current.value = '';
+                } else {
+                    elementRef.current.value = props.value;
+                    pos = checkVal(allow);
+
+                    setTimeout(() => {
+                        if (elementRef.current) {
+                            writeBuffer();
+
+                            return checkVal(allow);
+                        }
+                    }, 10);
+                }
+
+                focusText.current = elementRef.current.value;
+            }
+
+            updateFilledState();
+
+            return pos;
+        };
+
+        const isValueUpdated = React.useCallback(() => {
+            return props.unmask ? props.value !== getUnmaskedValue() : defaultBuffer.current !== elementRef.current.value && elementRef.current.value !== props.value;
+        }, [props.unmask, props.value, getUnmaskedValue]);
+
+        const init = () => {
+            if (props.mask) {
+                tests.current = [];
+                partialPosition.current = props.mask.length;
+                len.current = props.mask.length;
+                firstNonMaskPos.current = null;
+                const defs = {
+                    9: '[0-9]',
+                    a: '[A-Za-z]',
+                    '*': '[A-Za-z0-9]'
+                };
+
+                androidChrome.current = DomHandler.isChrome() && DomHandler.isAndroid();
+
+                let maskTokens = props.mask.split('');
+
+                for (let i = 0; i < maskTokens.length; i++) {
+                    let c = maskTokens[i];
+
+                    if (c === '?') {
+                        len.current--;
+                        partialPosition.current = i;
+                    } else if (defs[c]) {
+                        tests.current.push(new RegExp(defs[c]));
+
+                        if (firstNonMaskPos.current === null) {
+                            firstNonMaskPos.current = tests.current.length - 1;
+                        }
+
+                        if (i < partialPosition.current) {
+                            lastRequiredNonMaskPos.current = tests.current.length - 1;
+                        }
+                    } else {
+                        tests.current.push(null);
+                    }
+                }
+
+                buffer.current = [];
+
+                for (let i = 0; i < maskTokens.length; i++) {
+                    let c = maskTokens[i];
+
+                    if (c !== '?') {
+                        if (defs[c]) {
+                            buffer.current.push(getPlaceholder(i));
+                        } else {
+                            buffer.current.push(c);
+                        }
+                    }
+                }
+
+                defaultBuffer.current = buffer.current.join('');
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focus(elementRef.current),
+            getElement: () => elementRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        useMountEffect(() => {
+            init();
+            updateValue();
+        });
+
+        useUpdateEffect(() => {
+            init();
+            caret(updateValue(true));
+
+            if (props.unmask) {
+                updateModel();
+            }
+        }, [props.mask]);
+
+        useUpdateEffect(() => {
+            if (isValueUpdated()) {
+                updateValue();
+            }
+        }, [isValueUpdated]);
+
+        useUpdateEffect(() => {
+            updateFilledState();
+        }, [props.disabled]);
+
+        const otherProps = InputMaskBase.getOtherProps(props);
+        const className = classNames(props.className, cx('root', { context }));
+
+        return (
+            <InputText
+                ref={elementRef}
+                autoFocus={props.autoFocus}
+                id={props.id}
+                type={props.type}
+                name={props.name}
+                style={props.style}
+                className={className}
+                {...otherProps}
+                placeholder={props.placeholder}
+                size={props.size}
+                maxLength={props.maxLength}
+                tabIndex={props.tabIndex}
+                disabled={props.disabled}
+                invalid={props.invalid}
+                readOnly={props.readOnly}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                onKeyPress={onKeyPress}
+                onInput={onInput}
+                onPaste={(e) => handleInputChange(e, true)}
+                required={props.required}
+                tooltip={props.tooltip}
+                tooltipOptions={props.tooltipOptions}
+                pt={props.pt}
+                unstyled={props.unstyled}
+                __parentMetadata={{ parent: metaData }}
+            />
+        );
+    })
+);
+
+InputMask.displayName = 'InputMask';
diff --git a/components/lib/inputmask/InputMaskBase.js b/components/lib/inputmask/InputMaskBase.js
new file mode 100644
index 0000000000..a1ddd147c7
--- /dev/null
+++ b/components/lib/inputmask/InputMaskBase.js
@@ -0,0 +1,47 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-inputmask', {
+            'p-filled': props.filled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
+};
+
+export const InputMaskBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputMask',
+        autoClear: true,
+        autoFocus: false,
+        className: null,
+        disabled: false,
+        id: null,
+        mask: null,
+        maxLength: null,
+        invalid: false,
+        variant: null,
+        name: null,
+        onBlur: null,
+        onChange: null,
+        onComplete: null,
+        onFocus: null,
+        placeholder: null,
+        readOnly: false,
+        required: false,
+        size: null,
+        slotChar: '_',
+        style: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        type: 'text',
+        unmask: false,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/inputmask/inputmask.d.ts b/components/lib/inputmask/inputmask.d.ts
new file mode 100644
index 0000000000..aa1a7403e2
--- /dev/null
+++ b/components/lib/inputmask/inputmask.d.ts
@@ -0,0 +1,161 @@
+/**
+ *
+ * InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.
+ *
+ * [Live Demo](https://www.primereact.org/inputmask/)
+ *
+ * @module inputmask
+ *
+ */
+import * as React from 'react';
+import { InputText, InputTextPassThroughOptions, InputTextProps } from '../inputtext';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+
+/**
+ * Custom complete event
+ * @see {@link InputMaskProps.onComplete}
+ * @event
+ */
+interface InputMaskCompleteEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value of the component
+     */
+    value: string | undefined | null;
+}
+
+/**
+ * Custom change event.
+ * @see {@link InputMaskProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface InputMaskChangeEvent extends FormEvent<string> {}
+
+/**
+ * Defines valid properties in InputMask component. In addition to these, all properties of {@link inputtext} can be used in this component.
+ * @group Properties
+ */
+export interface InputMaskProps extends Omit<InputTextProps, 'onChange' | 'pt'> {
+    /**
+     * Mask pattern.
+     */
+    mask?: string | undefined;
+    /**
+     * Placeholder character in mask.
+     * @defaultValue _
+     */
+    slotChar?: string | undefined;
+    /**
+     * Clears the incomplete value on blur.
+     * @defaultValue true
+     */
+    autoClear?: boolean | undefined;
+    /**
+     * Defines if model sets the raw unmasked value to bound value or the formatted mask value.
+     * @defaultValue false
+     */
+    unmask?: boolean | undefined;
+    /**
+     * When present, it specifies that the element value cannot be altered.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * When present, it specifies that the element must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on when user completes the mask pattern.
+     * @param {InputMaskCompleteEvent} event - Custom complete event
+     */
+    onComplete?(event: InputMaskCompleteEvent): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputMaskChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputMaskChangeEvent): void;
+    /**
+     * Callback to invoke when input receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when input loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputTextPassThroughOptions}
+     */
+    pt?: InputTextPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputMask**
+ *
+ * _InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone._
+ *
+ * [Live Demo](https://www.primereact.org/inputmask/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class InputMask extends React.Component<InputMaskProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {InputText | null} Container element
+     */
+    public getElement(): typeof InputText | null;
+}
diff --git a/components/lib/inputmask/package.json b/components/lib/inputmask/package.json
new file mode 100644
index 0000000000..312ca49e34
--- /dev/null
+++ b/components/lib/inputmask/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputmask.cjs.js",
+    "module": "./inputmask.esm.js",
+    "unpkg": "./inputmask.min.js",
+    "types": "./inputmask.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
new file mode 100644
index 0000000000..37c8db5663
--- /dev/null
+++ b/components/lib/inputnumber/InputNumber.js
@@ -0,0 +1,1410 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { AngleDownIcon } from '../icons/angledown';
+import { AngleUpIcon } from '../icons/angleup';
+import { InputText } from '../inputtext/InputText';
+import { Ripple } from '../ripple/Ripple';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { InputNumberBase } from './InputNumberBase';
+
+export const InputNumber = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = InputNumberBase.getProps(inProps, context);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const metaData = {
+            props,
+            ...props.__parentMetadata,
+            state: {
+                focused: focusedState
+            }
+        };
+        const { ptm, cx, isUnstyled } = InputNumberBase.setMetaData(metaData);
+
+        useHandleStyle(InputNumberBase.css.styles, isUnstyled, { name: 'inputnumber' });
+        const elementRef = React.useRef(null);
+        const inputRef = React.useRef(null);
+        const timer = React.useRef(null);
+        const lastValue = React.useRef(null);
+        const numberFormat = React.useRef(null);
+        const groupChar = React.useRef(null);
+        const prefixChar = React.useRef(null);
+        const suffixChar = React.useRef(null);
+        const isSpecialChar = React.useRef(null);
+        const _numeral = React.useRef(null);
+        const _group = React.useRef(null);
+        const _minusSign = React.useRef(null);
+        const _currency = React.useRef(null);
+        const _decimal = React.useRef(null);
+        const _decimalSeparator = React.useRef(null);
+        const _suffix = React.useRef(null);
+        const _prefix = React.useRef(null);
+        const _index = React.useRef(null);
+        const isFocusedByClick = React.useRef(false);
+        const _locale = props.locale || (context && context.locale) || PrimeReact.locale;
+        const stacked = props.showButtons && props.buttonLayout === 'stacked';
+        const horizontal = props.showButtons && props.buttonLayout === 'horizontal';
+        const vertical = props.showButtons && props.buttonLayout === 'vertical';
+        const inputMode = props.inputMode || (props.mode === 'decimal' && !props.minFractionDigits && !props.maxFractionDigits ? 'numeric' : 'decimal');
+
+        const getOptions = () => {
+            return {
+                localeMatcher: props.localeMatcher,
+                style: props.mode,
+                currency: props.currency,
+                currencyDisplay: props.currencyDisplay,
+                useGrouping: props.useGrouping,
+                minimumFractionDigits: props.minFractionDigits ?? undefined,
+                maximumFractionDigits: props.maxFractionDigits ?? undefined,
+                roundingMode: props.roundingMode
+            };
+        };
+
+        const constructParser = () => {
+            numberFormat.current = new Intl.NumberFormat(_locale, getOptions());
+            const numerals = [...new Intl.NumberFormat(_locale, { useGrouping: false }).format(9876543210)].reverse();
+            const index = new Map(numerals.map((d, i) => [d, i]));
+
+            _numeral.current = new RegExp(`[${numerals.join('')}]`, 'g');
+            _group.current = getGroupingExpression(); // regular expression /[,]/g, /[.]/g
+            _minusSign.current = getMinusSignExpression(); // regular expression /[-]/g
+            _currency.current = getCurrencyExpression(); // regular expression for currency (e.g. /[$]/g, /[€]/g, /[]/g and more)
+            _decimal.current = getDecimalExpression(); // regular expression /[,]/g, /[.]/g, /[]/g
+            _decimalSeparator.current = getDecimalSeparator(); // current decimal separator  '.', ','
+            _suffix.current = getSuffixExpression(); // regular expression for suffix (e.g. /℃/g)
+            _prefix.current = getPrefixExpression(); // regular expression for prefix (e.g. /\ days/g)
+            _index.current = (d) => index.get(d);
+        };
+
+        const escapeRegExp = (text) => {
+            return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+        };
+
+        /**
+         * get decimal separator in current locale
+         */
+        const getDecimalSeparator = () => {
+            return new Intl.NumberFormat(_locale, { useGrouping: false }).format(1.1).trim().replace(_numeral.current, '');
+        };
+
+        const getDecimalExpression = () => {
+            const formatter = new Intl.NumberFormat(_locale, { ...getOptions(), useGrouping: false });
+
+            return new RegExp(`[${formatter.format(1.1).replace(_currency.current, '').trim().replace(_numeral.current, '')}]`, 'g');
+        };
+
+        const getGroupingExpression = () => {
+            const formatter = new Intl.NumberFormat(_locale, { useGrouping: true });
+
+            groupChar.current = formatter.format(1000000).trim().replace(_numeral.current, '').charAt(0);
+
+            return new RegExp(`[${groupChar.current}]`, 'g');
+        };
+
+        const getMinusSignExpression = () => {
+            const formatter = new Intl.NumberFormat(_locale, { useGrouping: false });
+
+            return new RegExp(`[${formatter.format(-1).trim().replace(_numeral.current, '')}]`, 'g');
+        };
+
+        const getCurrencyExpression = () => {
+            if (props.currency) {
+                const formatter = new Intl.NumberFormat(_locale, {
+                    style: 'currency',
+                    currency: props.currency,
+                    currencyDisplay: props.currencyDisplay,
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                    roundingMode: props.roundingMode
+                });
+
+                return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(_numeral.current, '').replace(_group.current, '')}]`, 'g');
+            }
+
+            return new RegExp('[]', 'g');
+        };
+
+        const getPrefixExpression = () => {
+            if (props.prefix) {
+                prefixChar.current = props.prefix;
+            } else {
+                const formatter = new Intl.NumberFormat(_locale, { style: props.mode, currency: props.currency, currencyDisplay: props.currencyDisplay });
+
+                prefixChar.current = formatter.format(1).split('1')[0];
+            }
+
+            return new RegExp(`${escapeRegExp(prefixChar.current || '')}`, 'g');
+        };
+
+        const getSuffixExpression = () => {
+            if (props.suffix) {
+                suffixChar.current = props.suffix;
+            } else {
+                const formatter = new Intl.NumberFormat(_locale, {
+                    style: props.mode,
+                    currency: props.currency,
+                    currencyDisplay: props.currencyDisplay,
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                    roundingMode: props.roundingMode
+                });
+
+                suffixChar.current = formatter.format(1).split('1')[1];
+            }
+
+            return new RegExp(`${escapeRegExp(suffixChar.current || '')}`, 'g');
+        };
+
+        const formatValue = (value) => {
+            if (value != null) {
+                if (value === '-') {
+                    // Minus sign
+                    return value;
+                }
+
+                if (props.format) {
+                    let formatter = new Intl.NumberFormat(_locale, getOptions());
+                    let _formattedValue = formatter.format(value);
+
+                    if (props.prefix) {
+                        _formattedValue = props.prefix + _formattedValue;
+                    }
+
+                    if (props.suffix) {
+                        _formattedValue = _formattedValue + props.suffix;
+                    }
+
+                    return _formattedValue;
+                }
+
+                return value.toString();
+            }
+
+            return '';
+        };
+
+        const parseValue = (text) => {
+            let filteredText = text
+                .replace(_suffix.current, '')
+                .replace(_prefix.current, '')
+                .trim()
+                .replace(/\s/g, '')
+                .replace(_currency.current, '')
+                .replace(_group.current, '')
+                .replace(_minusSign.current, '-')
+                .replace(_decimal.current, '.')
+                .replace(_numeral.current, _index.current);
+
+            if (filteredText) {
+                if (filteredText === '-') {
+                    // Minus sign
+                    return filteredText;
+                }
+
+                let parsedValue = +filteredText;
+
+                return isNaN(parsedValue) ? null : parsedValue;
+            }
+
+            return null;
+        };
+
+        function countDecimals(value) {
+            if (!isFinite(value)) return 0;
+
+            const s = String(value);
+
+            // handle exponential notation: e.g. "1e-7"
+            if (s.toLowerCase().includes('e')) {
+                const [mantissa, expStr] = s.split('e');
+                const exp = parseInt(expStr, 10);
+                const decimalPart = (mantissa.split('.')[1] || '').length;
+
+                // If exponent is negative, decimals increase
+                if (exp < 0) return decimalPart + Math.abs(exp);
+
+                // If exponent is positive, decimals shrink
+                return Math.max(0, decimalPart - exp);
+            }
+
+            // normal decimal
+            return (s.split('.')[1] || '').length;
+        }
+
+        const addWithPrecision = (base, increment) => {
+            base = Number(base);
+            increment = Number(increment);
+
+            // invalid inputs → return NaN cleanly
+            if (!isFinite(base) || !isFinite(increment)) return NaN;
+
+            const baseDec = countDecimals(base);
+            const incDec = countDecimals(increment);
+
+            // Choose required decimal precision but cap so factor remains safe
+            const decimals = Math.min(Math.max(baseDec, incDec), 15);
+            const factor = Math.pow(10, decimals);
+
+            const maxSafe = Number.MAX_SAFE_INTEGER;
+
+            // avoid unsafe multiplication
+            if (Math.abs(base) * factor > maxSafe || Math.abs(increment) * factor > maxSafe) {
+                const sum = base + increment;
+                // fallback to a safe rounding
+                const fallbackFactor = Math.pow(10, 15);
+
+                return Math.round(sum * fallbackFactor) / fallbackFactor;
+            }
+
+            // Correct integer math → avoids floating point errors
+            return Math.round(base * factor + increment * factor) / factor;
+        };
+
+        const repeat = (event, interval, dir) => {
+            let i = interval || 500;
+
+            clearTimer();
+            timer.current = setTimeout(() => {
+                repeat(event, 40, dir);
+            }, i);
+
+            spin(event, dir);
+        };
+
+        const spin = (event, dir) => {
+            if (inputRef.current) {
+                let step = props.step * dir;
+                let currentValue = parseValue(inputRef.current.value) || 0;
+                let newValue = validateValue(addWithPrecision(currentValue, step));
+
+                if (props.maxLength && props.maxLength < formatValue(newValue).length) {
+                    return;
+                }
+
+                // #3913 onChange should be called before onValueChange
+                handleOnChange(event, currentValue, newValue);
+                // touch devices trigger the keyboard to display because of setSelectionRange
+                !DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');
+                updateModel(event, newValue);
+            }
+        };
+
+        const onUpButtonMouseDown = (event) => {
+            if (!props.disabled && !props.readOnly) {
+                if (!DomHandler.isTouchDevice()) {
+                    DomHandler.focus(inputRef.current, props.autoFocus);
+                }
+
+                repeat(event, null, 1);
+                event.preventDefault();
+            }
+        };
+
+        const onUpButtonMouseUp = () => {
+            if (!props.disabled && !props.readOnly) {
+                clearTimer();
+            }
+        };
+
+        const onUpButtonMouseLeave = () => {
+            if (!props.disabled && !props.readOnly) {
+                clearTimer();
+            }
+        };
+
+        const onUpButtonKeyUp = () => {
+            if (!props.disabled && !props.readOnly) {
+                clearTimer();
+            }
+        };
+
+        const onUpButtonKeyDown = (event) => {
+            if (!props.disabled && !props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
+                repeat(event, null, 1);
+            }
+        };
+
+        const onDownButtonMouseDown = (event) => {
+            if (!props.disabled && !props.readOnly) {
+                if (!DomHandler.isTouchDevice()) {
+                    DomHandler.focus(inputRef.current, props.autoFocus);
+                }
+
+                repeat(event, null, -1);
+                event.preventDefault();
+            }
+        };
+
+        const onDownButtonMouseUp = () => {
+            if (!props.disabled && !props.readOnly) {
+                clearTimer();
+            }
+        };
+
+        const onDownButtonMouseLeave = () => {
+            if (!props.disabled && !props.readOnly) {
+                clearTimer();
+            }
+        };
+
+        const onDownButtonKeyUp = () => {
+            if (!props.disabled && !props.readOnly) {
+                clearTimer();
+            }
+        };
+
+        const onDownButtonKeyDown = (event) => {
+            if (!props.disabled && !props.readOnly && (event.keyCode === 32 || event.keyCode === 13)) {
+                repeat(event, null, -1);
+            }
+        };
+
+        const onInput = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            if (isSpecialChar.current) {
+                event.target.value = lastValue.current;
+                isSpecialChar.current = false;
+            }
+
+            if (DomHandler.isAndroid()) {
+                return;
+            }
+
+            // #6324 Chrome is allowing accent-dead characters through...
+            const inputType = event.nativeEvent.inputType;
+            const data = event.nativeEvent.data;
+
+            if (inputType === 'insertText' && /\D/.test(data)) {
+                event.target.value = lastValue.current;
+            }
+        };
+
+        const onInputAndroidKey = (event) => {
+            if (!DomHandler.isAndroid() || props.disabled || props.readOnly) {
+                return;
+            }
+
+            if (props.onKeyUp) {
+                props.onKeyUp(event);
+
+                // do not continue if the user defined event wants to prevent
+                if (event.defaultPrevented) {
+                    return;
+                }
+            }
+
+            const code = event.which || event.keyCode;
+
+            if (code !== 13) {
+                // to submit a form
+                event.preventDefault();
+            }
+
+            const char = String.fromCharCode(code);
+            const _isDecimalSign = isDecimalSign(char);
+            const _isMinusSign = isMinusSign(char);
+
+            if ((48 <= code && code <= 57) || _isMinusSign || _isDecimalSign) {
+                insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
+            } else {
+                updateValue(event, event.target.value, null, 'delete-single');
+            }
+        };
+
+        const onInputKeyDown = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+                // #7039 Treat cut as normal character
+                if (event.key.toLowerCase() === 'x' && (event.ctrlKey || event.metaKey)) {
+                    isSpecialChar.current = false;
+                } else {
+                    isSpecialChar.current = true;
+                }
+
+                return;
+            }
+
+            if (props.onKeyDown) {
+                props.onKeyDown(event);
+
+                // Do not continue if the user-defined event wants to prevent
+                if (event.defaultPrevented) {
+                    return;
+                }
+            }
+
+            lastValue.current = event.target.value;
+
+            // Android is handled specially in onInputAndroidKey
+            if (DomHandler.isAndroid()) {
+                return;
+            }
+
+            let selectionStart = event.target.selectionStart;
+            let selectionEnd = event.target.selectionEnd;
+            let inputValue = event.target.value;
+            let newValueStr = null;
+
+            switch (event.code) {
+                //up
+                case 'ArrowUp':
+                    spin(event, 1);
+                    event.preventDefault();
+                    break;
+
+                //down
+                case 'ArrowDown':
+                    spin(event, -1);
+                    event.preventDefault();
+                    break;
+
+                //left
+                case 'ArrowLeft':
+                    if (!isNumeralChar(inputValue.charAt(selectionStart - 1))) {
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                //right
+                case 'ArrowRight':
+                    if (!isNumeralChar(inputValue.charAt(selectionStart))) {
+                        event.preventDefault();
+                    }
+
+                    break;
+
+                //enter and tab
+                case 'Tab':
+                case 'Enter':
+                case 'NumpadEnter':
+                    newValueStr = validateValue(parseValue(inputValue));
+                    inputRef.current.value = formatValue(newValueStr);
+                    inputRef.current.setAttribute('aria-valuenow', newValueStr);
+                    updateModel(event, newValueStr);
+                    break;
+
+                //backspace
+                case 'Backspace':
+                    event.preventDefault();
+
+                    if (selectionStart === selectionEnd) {
+                        const deleteChar = inputValue.charAt(selectionStart - 1);
+
+                        if (isNumeralChar(deleteChar)) {
+                            const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
+                            const decimalLength = getDecimalLength(inputValue);
+
+                            if (_group.current.test(deleteChar)) {
+                                _group.current.lastIndex = 0;
+                                newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
+                            } else if (_decimal.current.test(deleteChar)) {
+                                _decimal.current.lastIndex = 0;
+
+                                if (decimalLength) {
+                                    inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
+                                } else {
+                                    newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                                }
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                                const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
+
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + insertedText + inputValue.slice(selectionStart);
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
+                                newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
+                            } else {
+                                newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                            }
+                        } else if (_currency.current.test(deleteChar)) {
+                            const { minusCharIndex, currencyCharIndex } = getCharIndexes(inputValue);
+
+                            if (minusCharIndex === currencyCharIndex - 1) {
+                                newValueStr = inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart);
+                            }
+                        }
+
+                        updateValue(event, newValueStr, null, 'delete-single');
+                    } else {
+                        newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                        updateValue(event, newValueStr, null, 'delete-range');
+                    }
+
+                    break;
+
+                // del
+                case 'Delete':
+                    event.preventDefault();
+
+                    if (selectionStart === selectionEnd) {
+                        const deleteChar = inputValue.charAt(selectionStart);
+                        const { decimalCharIndex, decimalCharIndexWithoutPrefix } = getDecimalCharIndexes(inputValue);
+
+                        if (isNumeralChar(deleteChar)) {
+                            const decimalLength = getDecimalLength(inputValue);
+
+                            if (_group.current.test(deleteChar)) {
+                                _group.current.lastIndex = 0;
+                                newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
+                            } else if (_decimal.current.test(deleteChar)) {
+                                _decimal.current.lastIndex = 0;
+
+                                if (decimalLength) {
+                                    inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
+                                } else {
+                                    newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+                                }
+                            } else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                                const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? '' : '0';
+
+                                newValueStr = inputValue.slice(0, selectionStart) + insertedText + inputValue.slice(selectionStart + 1);
+                            } else if (decimalCharIndexWithoutPrefix === 1) {
+                                newValueStr = inputValue.slice(0, selectionStart) + '0' + inputValue.slice(selectionStart + 1);
+                                newValueStr = parseValue(newValueStr) > 0 ? newValueStr : '';
+                            } else {
+                                newValueStr = inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+                            }
+                        }
+
+                        updateValue(event, newValueStr, null, 'delete-back-single');
+                    } else {
+                        newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                        updateValue(event, newValueStr, null, 'delete-range');
+                    }
+
+                    break;
+
+                case 'End':
+                    event.preventDefault();
+
+                    if (!ObjectUtils.isEmpty(props.max)) {
+                        updateModel(event, props.max);
+                    }
+
+                    break;
+                case 'Home':
+                    event.preventDefault();
+
+                    if (!ObjectUtils.isEmpty(props.min)) {
+                        updateModel(event, props.min);
+                    }
+
+                    break;
+
+                default:
+                    event.preventDefault();
+                    let char = event.key;
+
+                    if (char) {
+                        // get decimal separator in current locale
+                        if (char === '.') {
+                            char = _decimalSeparator.current;
+                        }
+
+                        const _isDecimalSign = isDecimalSign(char);
+                        const _isMinusSign = isMinusSign(char);
+
+                        if ((Number(char) >= 0 && Number(char) <= 9) || _isMinusSign || _isDecimalSign) {
+                            insert(event, char, { isDecimalSign: _isDecimalSign, isMinusSign: _isMinusSign });
+                        }
+                    }
+
+                    break;
+            }
+        };
+
+        const onPaste = (event) => {
+            event.preventDefault();
+
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            let data = (event.clipboardData || window.clipboardData).getData('Text');
+
+            if (props.inputId === 'integeronly' && /[^\d-]/.test(data)) {
+                return;
+            }
+
+            if (data) {
+                let filteredData = parseValue(data);
+
+                if (filteredData != null) {
+                    if (isFloat(filteredData)) {
+                        const formattedValue = formatValue(filteredData);
+
+                        inputRef.current.value = formattedValue;
+                        updateModel(event, filteredData);
+                    } else {
+                        insert(event, filteredData.toString());
+                    }
+                }
+            }
+        };
+
+        const allowMinusSign = () => {
+            return ObjectUtils.isEmpty(props.min) || props.min < 0;
+        };
+
+        const isMinusSign = (char) => {
+            if (_minusSign.current.test(char) || char === '-') {
+                _minusSign.current.lastIndex = 0;
+
+                return true;
+            }
+
+            return false;
+        };
+
+        const replaceDecimalSeparator = (val) => {
+            if (isFloat(val)) {
+                return val.toString().replace(/\.(?=[^.]*$)/, _decimalSeparator.current);
+            }
+
+            return val;
+        };
+
+        const isDecimalSign = (char) => {
+            if (_decimal.current.test(char) || isFloat(char)) {
+                _decimal.current.lastIndex = 0;
+
+                return true;
+            }
+
+            return false;
+        };
+
+        const isDecimalMode = () => {
+            return props.mode === 'decimal';
+        };
+
+        const isFloat = (val) => {
+            let formatter = new Intl.NumberFormat(_locale, getOptions());
+            let parseVal = parseValue(formatter.format(val));
+
+            if (parseVal === null) {
+                return false;
+            }
+
+            return parseVal % 1 !== 0;
+        };
+
+        const getDecimalCharIndexes = (val) => {
+            const decimalCharIndex = val.search(_decimal.current);
+
+            _decimal.current.lastIndex = 0;
+
+            const filteredVal = val.replace(_prefix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '');
+            const decimalCharIndexWithoutPrefix = filteredVal.search(_decimal.current);
+
+            _decimal.current.lastIndex = 0;
+
+            return { decimalCharIndex, decimalCharIndexWithoutPrefix };
+        };
+
+        const getCharIndexes = (val) => {
+            const decimalCharIndex = val.search(_decimal.current);
+
+            _decimal.current.lastIndex = 0;
+            const minusCharIndex = val.search(_minusSign.current);
+
+            _minusSign.current.lastIndex = 0;
+            const suffixCharIndex = val.search(_suffix.current);
+
+            _suffix.current.lastIndex = 0;
+            let currencyCharIndex = val.search(_currency.current);
+
+            if (currencyCharIndex === 0 && prefixChar.current && prefixChar.current.length > 1) {
+                currencyCharIndex = prefixChar.current.trim().length;
+            }
+
+            _currency.current.lastIndex = 0;
+
+            return { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex };
+        };
+
+        const insert = (event, text, sign = { isDecimalSign: false, isMinusSign: false }) => {
+            const minusCharIndexOnText = text.search(_minusSign.current);
+
+            _minusSign.current.lastIndex = 0;
+
+            if (!allowMinusSign() && minusCharIndexOnText !== -1) {
+                return;
+            }
+
+            const selectionStart = inputRef.current.selectionStart;
+            const selectionEnd = inputRef.current.selectionEnd;
+            let inputValue = inputRef.current.value.trim();
+            const { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex } = getCharIndexes(inputValue);
+            const maxFractionDigits = numberFormat.current.resolvedOptions().maximumFractionDigits;
+            const hasBoundOrAffix = props.min || props.max || props.suffix || props.prefix; //only exception
+            let newValueStr;
+
+            if (sign.isMinusSign) {
+                const isNewMinusSign = minusCharIndex === -1;
+
+                // #6522 - Selected negative value can't be overwritten with a minus ('-') symbol
+                if (selectionStart === 0 || selectionStart === currencyCharIndex + 1) {
+                    newValueStr = inputValue;
+
+                    if (isNewMinusSign || selectionEnd !== 0) {
+                        newValueStr = insertText(inputValue, text, 0, selectionEnd);
+                    }
+
+                    updateValue(event, newValueStr, text, 'insert');
+                }
+            } else if (sign.isDecimalSign) {
+                if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
+                    updateValue(event, inputValue, text, 'insert');
+                } else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
+                    newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+                    updateValue(event, newValueStr, text, 'insert');
+                } else if (decimalCharIndex === -1 && (maxFractionDigits || props.maxFractionDigits)) {
+                    const allowedDecimal = inputMode !== 'numeric' || (inputMode === 'numeric' && hasBoundOrAffix);
+
+                    if (allowedDecimal) {
+                        newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+                        updateValue(event, newValueStr, text, 'insert');
+                    }
+                }
+            } else {
+                const operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
+
+                if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                    if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
+                        const charIndex = currencyCharIndex >= selectionStart ? currencyCharIndex - 1 : suffixCharIndex >= selectionStart ? suffixCharIndex : inputValue.length;
+
+                        newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length, charIndex) + inputValue.slice(charIndex);
+                        updateValue(event, newValueStr, text, operation);
+                    }
+                } else {
+                    newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+                    updateValue(event, newValueStr, text, operation);
+                }
+            }
+        };
+
+        const replaceSuffix = (value) => {
+            return value ? value.replace(_suffix.current, '').trim().replace(/\s/g, '').replace(_currency.current, '') : value;
+        };
+
+        const insertText = (value, text, start, end) => {
+            let textSplit = isDecimalSign(text) ? text : text.split(_decimal.current);
+
+            if (textSplit.length === 2) {
+                const decimalCharIndex = value.slice(start, end).search(_decimal.current);
+
+                _decimal.current.lastIndex = 0;
+
+                return decimalCharIndex > 0 ? value.slice(0, start) + formatValue(text) + replaceSuffix(value).slice(end) : value || formatValue(text);
+            } else if (isDecimalSign(text) && value.length === 0) {
+                return formatValue('0.');
+            } else if (end - start === value.length) {
+                return formatValue(text);
+            } else if (start === 0) {
+                const suffix = ObjectUtils.isLetter(value[end]) ? end - 1 : end;
+
+                return text + value.slice(suffix);
+            } else if (end === value.length) {
+                return value.slice(0, start) + text;
+            }
+
+            const selectionValue = value.slice(start, end);
+            // Fix: if the suffix starts with a space, the input will be cleared after pasting
+            const space = /\s$/.test(selectionValue) ? ' ' : '';
+
+            return value.slice(0, start) + text + space + value.slice(end);
+        };
+
+        const deleteRange = (value, start, end) => {
+            let newValueStr;
+
+            if (end - start === value.length) {
+                newValueStr = '';
+            } else if (start === 0) {
+                newValueStr = value.slice(end);
+            } else if (end === value.length) {
+                newValueStr = value.slice(0, start);
+            } else {
+                newValueStr = value.slice(0, start) + value.slice(end);
+            }
+
+            return newValueStr;
+        };
+
+        const initCursor = () => {
+            let selectionStart = inputRef.current.selectionStart;
+            let inputValue = inputRef.current.value;
+            let valueLength = inputValue.length;
+            let index = null;
+
+            // remove prefix
+            let prefixLength = (prefixChar.current || '').length;
+
+            inputValue = inputValue.replace(_prefix.current, '');
+            selectionStart = selectionStart - prefixLength;
+
+            let char = inputValue.charAt(selectionStart);
+
+            if (isNumeralChar(char)) {
+                return selectionStart + prefixLength;
+            }
+
+            //left
+            let i = selectionStart - 1;
+
+            while (i >= 0) {
+                char = inputValue.charAt(i);
+
+                if (isNumeralChar(char)) {
+                    index = i + prefixLength;
+                    break;
+                } else {
+                    i--;
+                }
+            }
+
+            if (index !== null) {
+                inputRef.current.setSelectionRange(index + 1, index + 1);
+            } else {
+                i = selectionStart;
+
+                while (i < valueLength) {
+                    char = inputValue.charAt(i);
+
+                    if (isNumeralChar(char)) {
+                        index = i + prefixLength;
+                        break;
+                    } else {
+                        i++;
+                    }
+                }
+
+                if (index !== null) {
+                    inputRef.current.setSelectionRange(index, index);
+                }
+            }
+
+            return index || 0;
+        };
+
+        const onInputPointerDown = () => {
+            isFocusedByClick.current = true;
+        };
+
+        const onInputClick = () => {
+            initCursor();
+        };
+
+        const isNumeralChar = (char) => {
+            if (char.length === 1 && (_numeral.current.test(char) || _decimal.current.test(char) || _group.current.test(char) || _minusSign.current.test(char))) {
+                resetRegex();
+
+                return true;
+            }
+
+            return false;
+        };
+
+        const resetRegex = () => {
+            _numeral.current.lastIndex = 0;
+            _decimal.current.lastIndex = 0;
+            _group.current.lastIndex = 0;
+            _minusSign.current.lastIndex = 0;
+        };
+
+        const updateValue = (event, valueStr, insertedValueStr, operation) => {
+            let currentValue = inputRef.current.value;
+            let newValue = null;
+
+            if (valueStr != null) {
+                newValue = evaluateEmpty(parseValue(valueStr));
+                updateInput(newValue, insertedValueStr, operation, valueStr);
+
+                handleOnChange(event, currentValue, newValue);
+            }
+        };
+
+        const evaluateEmpty = (newValue) => {
+            return !newValue && !props.allowEmpty ? props.min || 0 : newValue;
+        };
+
+        const handleOnChange = (event, currentValue, newValue) => {
+            if (props.onChange && isValueChanged(currentValue, newValue)) {
+                props.onChange({
+                    originalEvent: event,
+                    value: newValue
+                });
+            }
+        };
+
+        const isValueChanged = (currentValue, newValue) => {
+            if (newValue === null && currentValue !== null) {
+                return true;
+            }
+
+            if (newValue != null) {
+                let parsedCurrentValue = typeof currentValue === 'string' ? parseValue(currentValue) : currentValue;
+
+                return newValue !== parsedCurrentValue;
+            }
+
+            return false;
+        };
+
+        const validateValue = (value) => {
+            if (value === '-') {
+                return null;
+            }
+
+            return validateValueByLimit(value);
+        };
+
+        const validateValueByLimit = (value) => {
+            if (ObjectUtils.isEmpty(value)) {
+                return null;
+            }
+
+            if (props.min !== null && value < props.min) {
+                return props.min;
+            }
+
+            if (props.max !== null && value > props.max) {
+                return props.max;
+            }
+
+            return value;
+        };
+
+        const updateInput = (value, insertedValueStr, operation, valueStr) => {
+            insertedValueStr = insertedValueStr || '';
+
+            let inputEl = inputRef.current;
+            let inputValue = inputEl.value;
+            let newValue = formatValue(value);
+            let currentLength = inputValue.length;
+
+            if (newValue !== valueStr) {
+                newValue = concatValues(newValue, valueStr);
+            }
+
+            if (currentLength === 0) {
+                inputEl.value = newValue;
+                inputEl.setSelectionRange(0, 0);
+                const index = initCursor();
+                const selectionEnd = index + insertedValueStr.length + (isDecimalSign(insertedValueStr) ? 1 : 0);
+
+                inputEl.setSelectionRange(selectionEnd, selectionEnd);
+            } else {
+                let selectionStart = inputEl.selectionStart;
+                let selectionEnd = inputEl.selectionEnd;
+
+                if (props.maxLength && props.maxLength < newValue.length) {
+                    return;
+                }
+
+                inputEl.value = newValue;
+                let newLength = newValue.length;
+
+                if (operation === 'range-insert') {
+                    const startValue = parseValue((inputValue || '').slice(0, selectionStart));
+                    const startValueStr = startValue !== null ? startValue.toString() : '';
+                    const startExpr = startValueStr.split('').join(`(${groupChar.current})?`);
+                    const sRegex = new RegExp(startExpr, 'g');
+
+                    sRegex.test(newValue);
+
+                    const tExpr = insertedValueStr.split('').join(`(${groupChar.current})?`);
+                    const tRegex = new RegExp(tExpr, 'g');
+
+                    tRegex.test(newValue.slice(sRegex.lastIndex));
+
+                    selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
+                    inputEl.setSelectionRange(selectionEnd, selectionEnd);
+                } else if (newLength === currentLength) {
+                    if (operation === 'insert' || operation === 'delete-back-single') {
+                        let newSelectionEnd = selectionEnd;
+
+                        if (insertedValueStr === '0') {
+                            newSelectionEnd = selectionEnd + 1;
+                        } else {
+                            newSelectionEnd = newSelectionEnd + Number(isDecimalSign(value) || isDecimalSign(insertedValueStr));
+                        }
+
+                        inputEl.setSelectionRange(newSelectionEnd, newSelectionEnd);
+                    } else if (operation === 'delete-single') {
+                        inputEl.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
+                    } else if (operation === 'delete-range' || operation === 'spin') {
+                        inputEl.setSelectionRange(selectionEnd, selectionEnd);
+                    }
+                } else if (operation === 'delete-back-single') {
+                    let prevChar = inputValue.charAt(selectionEnd - 1);
+                    let nextChar = inputValue.charAt(selectionEnd);
+                    let diff = currentLength - newLength;
+                    let isGroupChar = _group.current.test(nextChar);
+
+                    if (isGroupChar && diff === 1) {
+                        selectionEnd = selectionEnd + 1;
+                    } else if (!isGroupChar && isNumeralChar(prevChar)) {
+                        selectionEnd = selectionEnd + (-1 * diff + 1);
+                    }
+
+                    _group.current.lastIndex = 0;
+                    inputEl.setSelectionRange(selectionEnd, selectionEnd);
+                } else if (inputValue === '-' && operation === 'insert') {
+                    inputEl.setSelectionRange(0, 0);
+                    const index = initCursor();
+                    const selectionEnd = index + insertedValueStr.length + 1;
+
+                    inputEl.setSelectionRange(selectionEnd, selectionEnd);
+                } else {
+                    selectionEnd = selectionEnd + (newLength - currentLength);
+                    inputEl.setSelectionRange(selectionEnd, selectionEnd);
+                }
+            }
+
+            inputEl.setAttribute('aria-valuenow', value);
+        };
+
+        const updateInputValue = (newValue) => {
+            newValue = evaluateEmpty(newValue);
+
+            const inputEl = inputRef.current;
+            const value = inputEl.value;
+            const _formattedValue = formattedValue(newValue);
+
+            if (value !== _formattedValue) {
+                inputEl.value = _formattedValue;
+                inputEl.setAttribute('aria-valuenow', newValue);
+            }
+        };
+
+        const formattedValue = (val) => {
+            return formatValue(evaluateEmpty(val));
+        };
+
+        const concatValues = (val1, val2) => {
+            if (val1 && val2) {
+                let decimalCharIndex = val2.search(_decimal.current);
+
+                _decimal.current.lastIndex = 0;
+
+                const newVal1 = replaceDecimalSeparator(val1).split(_decimal.current)[0].replace(_suffix.current, '').trim();
+
+                return decimalCharIndex !== -1 ? newVal1 + val2.slice(decimalCharIndex) : val1;
+            }
+
+            return val1;
+        };
+
+        const getDecimalLength = (value) => {
+            if (value) {
+                const valueSplit = value.split(_decimal.current);
+
+                if (valueSplit.length === 2) {
+                    return replaceSuffix(valueSplit[1]).length;
+                }
+            }
+
+            return 0;
+        };
+
+        const updateModel = (event, value) => {
+            if (props.onValueChange) {
+                props.onValueChange({
+                    originalEvent: event,
+                    value: value,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: value
+                    }
+                });
+            }
+        };
+
+        const onInputFocus = (event) => {
+            setFocusedState(true);
+            props.onFocus && props.onFocus(event);
+
+            if ((props.suffix || props.currency || props.prefix) && inputRef.current && !isFocusedByClick.current) {
+                // GitHub #1866,#5537
+                let inputValue = inputRef.current.value;
+                let prefixLength = (prefixChar.current || '').length;
+                let suffixLength = (suffixChar.current || '').length;
+                let end = inputValue.length === 0 ? 0 : inputValue.length - suffixLength;
+
+                inputRef.current.setSelectionRange(prefixLength, end);
+            }
+        };
+
+        const onInputBlur = (event) => {
+            setFocusedState(false);
+
+            isFocusedByClick.current = false;
+
+            if (inputRef.current) {
+                let currentValue = inputRef.current.value;
+
+                if (isValueChanged(currentValue, props.value)) {
+                    let newValue = validateValue(parseValue(currentValue));
+
+                    updateInputValue(newValue);
+                    updateModel(event, newValue);
+                }
+            }
+
+            props.onBlur && props.onBlur(event);
+        };
+
+        const clearTimer = () => {
+            if (timer.current) {
+                clearInterval(timer.current);
+            }
+        };
+
+        const changeValue = () => {
+            const val = validateValueByLimit(props.value);
+
+            const currentValue = inputRef.current.value;
+
+            updateInputValue(props.format ? val : replaceDecimalSeparator(val));
+
+            const newValue = validateValue(props.value);
+
+            if (props.value !== null && currentValue !== newValue) {
+                updateModel(null, newValue);
+                handleOnChange(null, currentValue, newValue);
+            }
+        };
+
+        const getFormatter = () => {
+            return numberFormat.current;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focus(inputRef.current),
+            getFormatter,
+            getElement: () => elementRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useUnmountEffect(() => {
+            clearTimer();
+        });
+
+        useMountEffect(() => {
+            constructParser();
+
+            const newValue = validateValue(props.value);
+
+            if (props.value !== null && props.value !== newValue) {
+                updateModel(null, newValue);
+            }
+        });
+
+        useUpdateEffect(() => {
+            constructParser();
+            changeValue();
+        }, [_locale, props.locale, props.localeMatcher, props.mode, props.currency, props.currencyDisplay, props.useGrouping, props.minFractionDigits, props.maxFractionDigits, props.suffix, props.prefix]);
+
+        useUpdateEffect(() => {
+            changeValue();
+        }, [props.value]);
+
+        useUpdateEffect(() => {
+            // #5245 prevent infinite loop
+            if (props.disabled) {
+                clearTimer();
+            }
+        }, [props.disabled]);
+
+        const createInputElement = () => {
+            const className = classNames(props.inputClassName, cx('input', { context }));
+            const valueToRender = formattedValue(props.value);
+
+            return (
+                <InputText
+                    ref={inputRef}
+                    id={props.inputId}
+                    style={props.inputStyle}
+                    role="spinbutton"
+                    className={className}
+                    defaultValue={valueToRender}
+                    type={props.type}
+                    size={props.size}
+                    tabIndex={props.tabIndex}
+                    inputMode={inputMode}
+                    maxLength={props.maxLength}
+                    disabled={props.disabled}
+                    required={props.required}
+                    pattern={props.pattern}
+                    placeholder={props.placeholder}
+                    readOnly={props.readOnly}
+                    name={props.name}
+                    autoFocus={props.autoFocus}
+                    onKeyDown={onInputKeyDown}
+                    onKeyPress={onInputAndroidKey}
+                    onInput={onInput}
+                    onClick={onInputClick}
+                    onPointerDown={onInputPointerDown}
+                    onBlur={onInputBlur}
+                    onFocus={onInputFocus}
+                    onPaste={onPaste}
+                    min={props.min}
+                    max={props.max}
+                    aria-valuemin={props.min}
+                    aria-valuemax={props.max}
+                    aria-valuenow={props.value}
+                    {...ariaProps}
+                    {...dataProps}
+                    pt={ptm('input')}
+                    unstyled={props.unstyled}
+                    __parentMetadata={{ parent: metaData }}
+                />
+            );
+        };
+
+        const createUpButton = () => {
+            const incrementIconProps = mergeProps(
+                {
+                    className: cx('incrementIcon')
+                },
+                ptm('incrementIcon')
+            );
+            const icon = props.incrementButtonIcon || <AngleUpIcon {...incrementIconProps} />;
+            const upButton = IconUtils.getJSXIcon(icon, { ...incrementIconProps }, { props });
+            const incrementButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: classNames(props.incrementButtonClassName, cx('incrementButton')),
+                    onPointerLeave: onUpButtonMouseLeave,
+                    onPointerDown: (e) => onUpButtonMouseDown(e),
+                    onPointerUp: onUpButtonMouseUp,
+                    onKeyDown: (e) => onUpButtonKeyDown(e),
+                    onKeyUp: onUpButtonKeyUp,
+                    disabled: props.disabled,
+                    tabIndex: -1,
+                    'aria-hidden': true
+                },
+                ptm('incrementButton')
+            );
+
+            return (
+                <button {...incrementButtonProps}>
+                    {upButton}
+                    <Ripple />
+                </button>
+            );
+        };
+
+        const createDownButton = () => {
+            const decrementIconProps = mergeProps(
+                {
+                    className: cx('decrementIcon')
+                },
+                ptm('decrementIcon')
+            );
+            const icon = props.decrementButtonIcon || <AngleDownIcon {...decrementIconProps} />;
+            const downButton = IconUtils.getJSXIcon(icon, { ...decrementIconProps }, { props });
+            const decrementButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: classNames(props.decrementButtonClassName, cx('decrementButton')),
+                    onPointerLeave: onDownButtonMouseLeave,
+                    onPointerDown: (e) => onDownButtonMouseDown(e),
+                    onPointerUp: onDownButtonMouseUp,
+                    onKeyDown: (e) => onDownButtonKeyDown(e),
+                    onKeyUp: onDownButtonKeyUp,
+                    disabled: props.disabled,
+                    tabIndex: -1,
+                    'aria-hidden': true
+                },
+                ptm('decrementButton')
+            );
+
+            return (
+                <button {...decrementButtonProps}>
+                    {downButton}
+                    <Ripple />
+                </button>
+            );
+        };
+
+        const createButtonGroup = () => {
+            const upButton = props.showButtons && createUpButton();
+            const downButton = props.showButtons && createDownButton();
+            const buttonGroupProps = mergeProps(
+                {
+                    className: cx('buttonGroup')
+                },
+                ptm('buttonGroup')
+            );
+
+            if (stacked) {
+                return (
+                    <span {...buttonGroupProps}>
+                        {upButton}
+                        {downButton}
+                    </span>
+                );
+            }
+
+            return (
+                <>
+                    {upButton}
+                    {downButton}
+                </>
+            );
+        };
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = InputNumberBase.getOtherProps(props);
+        const dataProps = ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const inputElement = createInputElement();
+        const buttonGroup = createButtonGroup();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                className: classNames(props.className, cx('root', { focusedState, stacked, horizontal, vertical })),
+                style: props.style
+            },
+            otherProps,
+            ptm('root')
+        );
+
+        return (
+            <>
+                <span ref={elementRef} {...rootProps}>
+                    {inputElement}
+                    {buttonGroup}
+                </span>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+InputNumber.displayName = 'InputNumber';
diff --git a/components/lib/inputnumber/InputNumber.spec.js b/components/lib/inputnumber/InputNumber.spec.js
new file mode 100644
index 0000000000..840ace275c
--- /dev/null
+++ b/components/lib/inputnumber/InputNumber.spec.js
@@ -0,0 +1,101 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { InputNumber } from './InputNumber';
+
+function getButtons(container) {
+    const inc = container.querySelector('[data-pc-section="incrementbutton"]') || container.querySelector('.p-inputnumber-button-up');
+
+    const dec = container.querySelector('[data-pc-section="decrementbutton"]') || container.querySelector('.p-inputnumber-button-down');
+
+    return { inc, dec };
+}
+
+describe('InputNumber decimal precision and stepping', () => {
+    test('increments correctly with step=0.25', async () => {
+        const { container } = render(<InputNumber step={0.25} showButtons mode="decimal" />);
+
+        const input = container.querySelector('input');
+        const { inc } = getButtons(container);
+
+        await userEvent.click(inc);
+        expect(Number(input.value)).toBeCloseTo(0.25);
+
+        await userEvent.click(inc);
+        expect(Number(input.value)).toBeCloseTo(0.5);
+    });
+
+    test('handles scientific notation by setting value prop', () => {
+        const tiny = 1e-7;
+
+        const { container, rerender } = render(<InputNumber value={tiny} mode="decimal" />);
+
+        const input = container.querySelector('input');
+
+        expect(Number(input.value)).toBeCloseTo(tiny);
+
+        rerender(<InputNumber value={tiny * 2} mode="decimal" maxFractionDigits={15} />);
+        expect(Number(input.value)).toBeCloseTo(2e-7);
+    });
+
+    test('handles large decimals (many fraction digits) within precision cap', () => {
+        const num = 0.123456789012345;
+
+        const { container } = render(<InputNumber value={num} mode="decimal" maxFractionDigits={15} />);
+
+        const input = container.querySelector('input');
+
+        expect(Number(input.value)).toBeCloseTo(num, 12);
+    });
+
+    test('caps precision at safe 15 decimals', () => {
+        const tooPrecise = 0.1234567890123456;
+
+        const { container } = render(<InputNumber value={tooPrecise} mode="decimal" maxFractionDigits={15} />);
+
+        const input = container.querySelector('input');
+
+        expect(Number(input.value)).toBeCloseTo(0.123456789012346);
+    });
+
+    test('small step accumulation remains precise', async () => {
+        const { container } = render(<InputNumber step={0.01} showButtons mode="decimal" />);
+
+        const input = container.querySelector('input');
+        const { inc } = getButtons(container);
+
+        for (let i = 0; i < 11; i++) await userEvent.click(inc);
+
+        expect(Number(input.value)).toBeCloseTo(0.11);
+    });
+
+    test('invalid values (NaN, Infinity) do not break controlled value', () => {
+        const { container, rerender } = render(<InputNumber value={0} mode="decimal" />);
+
+        const input = container.querySelector('input');
+
+        rerender(<InputNumber value={Infinity} mode="decimal" />);
+        expect(Number.isFinite(input.value)).toBe(false);
+
+        rerender(<InputNumber value={NaN} mode="decimal" />);
+        expect(Number.isNaN(Number(input.value))).toBe(true);
+    });
+
+    test('step works after setting initial value programmatically', async () => {
+        const { container, rerender } = render(<InputNumber value={0.5} step={0.25} showButtons mode="decimal" />);
+
+        const input = container.querySelector('input');
+        const { inc, dec } = getButtons(container);
+
+        expect(Number(input.value)).toBeCloseTo(0.5);
+
+        await userEvent.click(inc);
+        expect(Number(input.value)).toBeCloseTo(0.75);
+
+        rerender(<InputNumber value={1.0} step={0.25} showButtons mode="decimal" />);
+
+        await userEvent.click(dec);
+        expect(Number(input.value)).toBeCloseTo(0.75);
+    });
+});
diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js
new file mode 100644
index 0000000000..27a2e4b3f5
--- /dev/null
+++ b/components/lib/inputnumber/InputNumberBase.js
@@ -0,0 +1,199 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, focusedState, stacked, horizontal, vertical }) =>
+        classNames('p-inputnumber p-component p-inputwrapper', {
+            'p-inputwrapper-filled': props.value != null && props.value.toString().length > 0,
+            'p-inputwrapper-focus': focusedState,
+            'p-inputnumber-buttons-stacked': stacked,
+            'p-inputnumber-buttons-horizontal': horizontal,
+            'p-inputnumber-buttons-vertical': vertical,
+            'p-invalid': props.invalid
+        }),
+    input: ({ props, context }) =>
+        classNames('p-inputnumber-input', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    buttonGroup: 'p-inputnumber-button-group',
+    incrementButton: ({ props }) =>
+        classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
+            'p-disabled': props.disabled
+        }),
+    incrementIcon: 'p-button-icon',
+    decrementButton: ({ props }) =>
+        classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
+            'p-disabled': props.disabled
+        }),
+    decrementIcon: 'p-button-icon'
+};
+
+const styles = `
+@layer primereact {
+    .p-inputnumber {
+        display: inline-flex;
+    }
+    
+    .p-inputnumber-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+    }
+    
+    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button .p-button-label,
+    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button .p-button-label {
+        display: none;
+    }
+    
+    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-up {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        padding: 0;
+    }
+    
+    .p-inputnumber-buttons-stacked .p-inputnumber-input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    
+    .p-inputnumber-buttons-stacked .p-button.p-inputnumber-button-down {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-left-radius: 0;
+        padding: 0;
+    }
+    
+    .p-inputnumber-buttons-stacked .p-inputnumber-button-group {
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-button.p-inputnumber-button {
+        flex: 1 1 auto;
+    }
+    
+    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-up {
+        order: 3;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    
+    .p-inputnumber-buttons-horizontal .p-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+    }
+    
+    .p-inputnumber-buttons-horizontal .p-button.p-inputnumber-button-down {
+        order: 1;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    
+    .p-inputnumber-buttons-vertical {
+        flex-direction: column;
+    }
+    
+    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-up {
+        order: 1;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        width: 100%;
+    }
+    
+    .p-inputnumber-buttons-vertical .p-inputnumber-input {
+        order: 2;
+        border-radius: 0;
+        text-align: center;
+    }
+    
+    .p-inputnumber-buttons-vertical .p-button.p-inputnumber-button-down {
+        order: 3;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        width: 100%;
+    }
+    
+    .p-inputnumber-input {
+        flex: 1 1 auto;
+    }
+    
+    .p-fluid .p-inputnumber {
+        width: 100%;
+    }
+    
+    .p-fluid .p-inputnumber .p-inputnumber-input {
+        width: 1%;
+    }
+    
+    .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
+        width: 100%;
+    }
+}
+`;
+
+export const InputNumberBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputNumber',
+        __parentMetadata: null,
+        allowEmpty: true,
+        ariaLabelledBy: null,
+        autoFocus: false,
+        buttonLayout: 'stacked',
+        className: null,
+        currency: undefined,
+        currencyDisplay: undefined,
+        decrementButtonClassName: null,
+        decrementButtonIcon: null,
+        disabled: false,
+        format: true,
+        id: null,
+        incrementButtonClassName: null,
+        incrementButtonIcon: null,
+        inputClassName: null,
+        inputId: null,
+        inputMode: null,
+        inputRef: null,
+        inputStyle: null,
+        invalid: false,
+        variant: null,
+        locale: undefined,
+        localeMatcher: undefined,
+        max: null,
+        maxFractionDigits: undefined,
+        maxLength: null,
+        min: null,
+        minFractionDigits: undefined,
+        mode: 'decimal',
+        name: null,
+        onBlur: null,
+        onChange: null,
+        onFocus: null,
+        onKeyDown: null,
+        onKeyUp: null,
+        onValueChange: null,
+        pattern: null,
+        placeholder: null,
+        prefix: null,
+        readOnly: false,
+        required: false,
+        roundingMode: undefined,
+        showButtons: false,
+        size: null,
+        step: 1,
+        style: null,
+        suffix: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        type: 'text',
+        useGrouping: true,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts
new file mode 100644
index 0000000000..b4e41b96a5
--- /dev/null
+++ b/components/lib/inputnumber/inputnumber.d.ts
@@ -0,0 +1,378 @@
+/**
+ *
+ * InputNumber is an input component to provide numerical input.
+ *
+ * [Live Demo](https://www.primereact.org/inputnumber/)
+ *
+ * @module inputnumber
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { InputText, InputTextPassThroughOptions } from '../inputtext/inputtext';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type RoundingMode = 'ceil' | 'floor' | 'expand' | 'trunc' | 'halfCeil' | 'halfFloor' | 'halfExpand' | 'halfTrunc' | 'halfEven';
+
+export declare type InputNumberPassThroughType<T> = PassThroughType<T, InputNumberPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputNumberPassThroughMethodOptions {
+    props: InputNumberProps;
+    state: InputNumberState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputNumberProps.pt}
+ */
+export interface InputNumberPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputNumberPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the Input component.
+     * @see {@link InputTextPassThroughOptions}
+     */
+    input?: InputTextPassThroughOptions;
+    /**
+     * Uses to pass attributes to the button group's DOM element.
+     */
+    buttonGroup?: InputNumberPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the increment button's DOM element.
+     */
+    incrementButton?: InputNumberPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the decrement button's DOM element.
+     */
+    decrementButton?: InputNumberPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in InputNumber component.
+ */
+export interface InputNumberState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
+/**
+ * Custom value change event.
+ * @see {@link InputNumberProps.onValueChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface InputNumberValueChangeEvent extends FormEvent<number | null> {}
+
+/**
+ * Custom change event
+ * @see {@link InputNumberProps.onChange}
+ * @event
+ */
+interface InputNumberChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value: number | null;
+}
+
+/**
+ * Defines valid properties in InputNumber component. In addition to these, all properties of HTMLSpanElement can be used in this component.
+ * @group Properties
+ */
+export interface InputNumberProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'ref'> {
+    /**
+     * 	Value of the component.
+     */
+    value?: number | null;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Whether to format the value.
+     * @defaultValue true
+     */
+    format?: boolean | undefined;
+    /**
+     * Displays spinner buttons.
+     * @defaultValue false
+     */
+    showButtons?: boolean | undefined;
+    /**
+     * Layout of the buttons.
+     * @defaultValue stacked
+     */
+    buttonLayout?: 'stacked' | 'horizontal' | 'vertical' | undefined;
+    /**
+     * Style class of the increment button.
+     */
+    incrementButtonClassName?: string | undefined;
+    /**
+     * Style class of the decrement button.
+     */
+    decrementButtonClassName?: string | undefined;
+    /**
+     * Style class of the increment button.
+     */
+    incrementButtonIcon?: IconType<InputNumberProps> | undefined;
+    /**
+     * Style class of the decrement button.
+     */
+    decrementButtonIcon?: IconType<InputNumberProps> | undefined;
+    /**
+     * Locale to be used in formatting.
+     */
+    locale?: string | undefined;
+    /**
+     * The locale matching algorithm to use. See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation) for details.
+     * @defaultValue best fit
+     */
+    localeMatcher?: 'lookup' | 'best fit' | string | undefined;
+    /**
+     * Defines the behavior of the component.
+     * @defaultValue decimal
+     */
+    mode?: 'decimal' | 'currency' | undefined;
+    /**
+     * Text to display after the value.
+     */
+    suffix?: string | undefined;
+    /**
+     * Text to display before the value.
+     */
+    prefix?: string | undefined;
+    /**
+     * The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
+     * There is no default value; if the style is "currency", the currency property must be provided.
+     */
+    currency?: string | undefined;
+    /**
+     * How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".
+     * @defaultValue symbol
+     */
+    currencyDisplay?: string | undefined;
+    /**
+     * Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
+     * @defaultValue true
+     */
+    useGrouping?: boolean | undefined;
+    /**
+     * The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0;
+     * the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) (2 if the list doesn't provide that information).
+     */
+    minFractionDigits?: number | undefined;
+    /**
+     * The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3;
+     * the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) (2 if the list doesn't provide that information).
+     */
+    maxFractionDigits?: number | undefined;
+    /**
+     * How decimals should be rounded. [further information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode).
+     * @defaultValue halfExpand
+     */
+    roundingMode?: RoundingMode;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Type of the input element.
+     * @defaultValue text
+     */
+    type?: string | undefined;
+    /**
+     * Determines whether the input field is empty.
+     * @defaultValue true
+     */
+    allowEmpty?: boolean | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * Mininum boundary value.
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     */
+    max?: number | undefined;
+    /**
+     * Maximum value length.
+     */
+    maxLength?: number | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that the element must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * The pattern attribute specifies a regular expression that the element's value is checked against on form submission.
+     */
+    pattern?: string | undefined;
+    /**
+     * Hint text for the input field.
+     */
+    placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the element should be read-only.
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Size of the input field.
+     */
+    size?: number | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: React.CSSProperties | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Callback to invoke after validation check and value change.
+     * @param {InputNumberValueChangeEvent} event - Custom value change event
+     */
+    onValueChange?(event: InputNumberValueChangeEvent): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputNumberChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputNumberChangeEvent): void;
+    /**
+     * Callback to invoke when input receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when input loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when the key pressed down.
+     * @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event
+     */
+    onKeyDown?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputNumberPassThroughOptions}
+     */
+    pt?: InputNumberPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputNumber**
+ *
+ * _InputNumber is an input component to provide numerical input._
+ *
+ * [Live Demo](https://www.primereact.org/inputnumber/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class InputNumber extends React.Component<InputNumberProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get formatter.
+     * @return {*} formatter instance
+     */
+    public getFormatter(): any;
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement | null} Container element
+     */
+    public getElement(): HTMLSpanElement | null;
+    /**
+     * Used to get input element.
+     * @return {InputText | null} Input element
+     */
+    public getInput(): typeof InputText | null;
+}
diff --git a/components/lib/inputnumber/package.json b/components/lib/inputnumber/package.json
new file mode 100644
index 0000000000..8bc4fd4a9f
--- /dev/null
+++ b/components/lib/inputnumber/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputnumber.cjs.js",
+    "module": "./inputnumber.esm.js",
+    "unpkg": "./inputnumber.min.js",
+    "types": "./inputnumber.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputotp/BaseInputOtp.js b/components/lib/inputotp/BaseInputOtp.js
new file mode 100644
index 0000000000..b0a1078d12
--- /dev/null
+++ b/components/lib/inputotp/BaseInputOtp.js
@@ -0,0 +1,26 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-inputotp p-component',
+    input: 'p-inputotp-input'
+};
+
+export const InputOtpBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputOtp',
+        __parentMetadata: null,
+        className: null,
+        modelValue: false,
+        invalid: false,
+        disabled: false,
+        readOnly: false,
+        variant: null,
+        tabIndex: null,
+        length: 4,
+        mask: false,
+        integerOnly: false
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/inputotp/InputOtp.js b/components/lib/inputotp/InputOtp.js
new file mode 100644
index 0000000000..43e1ff9e7e
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.js
@@ -0,0 +1,263 @@
+import React, { useContext, useRef, useState } from 'react';
+import { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
+import { ObjectUtils } from '../utils/Utils';
+import { InputOtpBase } from './BaseInputOtp';
+
+export const InputOtp = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const elementRef = useRef(ref);
+        const mergeProps = useMergeProps();
+        const context = useContext(PrimeReactContext);
+        const props = InputOtpBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = InputOtpBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            context: {
+                disabled: props.disabled
+            }
+        });
+
+        useHandleStyle(InputOtpBase.css.styles, isUnstyled, { name: 'inputotp' });
+
+        const defaultValue = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
+        const [tokens, setTokens] = useState(defaultValue);
+
+        const findNextInput = (element) => {
+            const nextInput = element.nextElementSibling;
+
+            if (!nextInput) return;
+
+            return nextInput.nodeName === 'INPUT' ? nextInput : findNextInput(nextInput);
+        };
+
+        const findPrevInput = (element) => {
+            const prevInput = element.previousElementSibling;
+
+            if (!prevInput) return;
+
+            return prevInput.nodeName === 'INPUT' ? prevInput : findPrevInput(prevInput);
+        };
+
+        const moveToNextInput = (event) => {
+            const nextInput = findNextInput(event.target);
+
+            if (nextInput) {
+                nextInput.focus();
+                nextInput.select();
+            }
+        };
+
+        const moveToPrevInput = (event) => {
+            const prevInput = findPrevInput(event.target);
+
+            if (prevInput) {
+                prevInput.focus();
+                prevInput.select();
+            }
+        };
+
+        const onChange = (event, value) => {
+            props?.onChange?.({
+                originalEvent: event,
+                value: value.join('')
+            });
+        };
+
+        const updateTokens = (event, index) => {
+            const inputValue = event.target.value;
+            let newTokens = [...tokens];
+
+            newTokens[index] = inputValue;
+            newTokens = newTokens.join('');
+            newTokens = newTokens ? newTokens.split('') : new Array(props.length);
+
+            setTokens(newTokens);
+            onChange(event, newTokens);
+        };
+
+        const onInput = (event, index) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            if (event.nativeEvent.inputType === 'insertFromPaste') {
+                return; // handled in onPaste
+            }
+
+            updateTokens(event, index);
+
+            if (event.nativeEvent.inputType === 'deleteContentBackward') {
+                moveToPrevInput(event);
+            } else if (event.nativeEvent.inputType === 'insertText') {
+                moveToNextInput(event);
+            }
+        };
+
+        const onPaste = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            let paste = event.clipboardData.getData('text');
+
+            if (paste.length) {
+                let pastedCode = paste.substring(0, props.length + 1);
+
+                if (!props.integerOnly || !isNaN(pastedCode)) {
+                    const newTokens = pastedCode.split('');
+
+                    setTokens(newTokens);
+                    onChange(event, newTokens);
+                }
+            }
+        };
+
+        const onFocus = (event) => {
+            event.target.select();
+            props?.focus?.(event);
+        };
+
+        const onBlur = (event) => {
+            props?.blur?.(event);
+        };
+
+        const onKeydown = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            // special keys should be ignored, if it is CTRL+V is handled in onPaste
+            if (event.altKey || event.ctrlKey || event.metaKey) {
+                return;
+            }
+
+            switch (event.code) {
+                case 'ArrowLeft': {
+                    moveToPrevInput(event);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    moveToNextInput(event);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Delete': {
+                    event.preventDefault();
+                    const idx = Number(event.target.id);
+
+                    if (!Number.isNaN(idx) && !isAllEmpty(tokens, props.length)) {
+                        updateTokens({ ...event, target: { ...event.target, value: '' } }, idx);
+                        moveToNextInput(event);
+                    }
+
+                    break;
+                }
+
+                case 'Backspace': {
+                    if (event.target?.value?.length === 0) {
+                        moveToPrevInput(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+                }
+
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab':
+
+                case 'NumpadEnter':
+
+                case 'Enter': {
+                    break;
+                }
+
+                default: {
+                    //Prevent non-numeric characters from being entered if integerOnly is true or if the length of the input is greater than the specified length
+                    const target = event.target;
+                    const hasSelection = target.selectionStart !== target.selectionEnd;
+                    const isAtMaxLength = tokens.join('').length >= props.length;
+                    const isValidKey = props.integerOnly ? /^[0-9]$/.test(event.key) : true;
+
+                    if (!isValidKey || (isAtMaxLength && event.code !== 'Delete' && !hasSelection)) {
+                        event.preventDefault();
+                    }
+
+                    break;
+                }
+            }
+        };
+
+        const isAllEmpty = (arr, n) => {
+            return arr.length === n && arr.every((item) => item === '' || item == null);
+        };
+
+        useUpdateEffect(() => {
+            const value = props.value ? props.value?.toString()?.split?.('') : new Array(props.length);
+
+            setTokens(value);
+        }, [props.value]);
+
+        const createInputElements = (remainingInputs) => {
+            if (remainingInputs <= 0) {
+                return [];
+            }
+
+            const inputElementIndex = props.length - remainingInputs;
+            const inputElementEvents = {
+                onInput: (event) => onInput(event, inputElementIndex),
+                onKeyDown: onKeydown,
+                onFocus,
+                onBlur,
+                onPaste
+            };
+            const inputElementProps = {
+                value: tokens[inputElementIndex] || '',
+                type: props?.mask ? 'password' : 'text',
+                variant: props?.variant,
+                readOnly: props?.readOnly,
+                disabled: props?.disabled,
+                tabIndex: props?.tabIndex,
+                autoFocus: props?.autoFocus && inputElementIndex === 0,
+                'aria-label': ariaLabel('otpLabel', { 0: inputElementIndex + 1 }),
+                'data-index': inputElementIndex,
+                className: cx('input')
+            };
+            const inputElement = props?.inputTemplate ? (
+                ObjectUtils.getJSXElement(props?.inputTemplate, {
+                    events: inputElementEvents,
+                    props: inputElementProps
+                })
+            ) : (
+                <InputText {...inputElementProps} {...inputElementEvents} invalid={props?.invalid} unstyled={props?.unstyled} pt={ptm('input')} inputMode={props?.integerOnly ? 'numeric' : 'text'} key={inputElementIndex} />
+            );
+            const inputElements = [inputElement, ...createInputElements(remainingInputs - 1)];
+
+            return inputElements.map((input, index) => <React.Fragment key={index}>{input}</React.Fragment>);
+        };
+
+        const rootElementProps = mergeProps(
+            {
+                className: cx('root'),
+                ref: elementRef,
+                style: props?.style
+            },
+            ptm('root')
+        );
+
+        return <div {...rootElementProps}>{createInputElements(props.length)}</div>;
+    })
+);
+
+InputOtp.displayName = 'InputOtp';
diff --git a/components/lib/inputotp/inputotp.d.ts b/components/lib/inputotp/inputotp.d.ts
new file mode 100644
index 0000000000..9466a9a12a
--- /dev/null
+++ b/components/lib/inputotp/inputotp.d.ts
@@ -0,0 +1,173 @@
+/**
+ *
+ * InputOtp is an extension to standard input element with theming and keyfiltering.
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ *
+ * @module inputotp
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType, TemplateType } from '../utils/utils';
+
+export declare type InputOtpPassThroughType<T> = PassThroughType<T, InputOtpPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputOtpPassThroughMethodOptions {
+    props: InputOtpProps;
+    context: InputOtpContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputOtpProps.pt}
+ */
+export interface InputOtpPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputOtpPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     */
+    input?: InputOtpPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in InputOtp component.
+ */
+export interface InputOtpContext {
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom change event
+ * @see {@link InputOtpProps.onChange}
+ * @event
+ */
+interface InputOtpChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value?: string | number | null;
+}
+
+/**
+ * Defines valid properties in InputOtp component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface InputOtpProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'value' | 'size' | 'onChange'> {
+    /**
+     * Specifies the value of the component.
+     * @defaultValue null
+     */
+    value?: string | number | null;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @defaultValue false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * Number of characters to initiate.
+     * @defaultValue 4
+     */
+    length?: number | undefined;
+    /**
+     * Mask pattern.
+     * @defaultValue false
+     */
+    mask?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is integer-only.
+     * @defaultValue false
+     */
+    integerOnly?: boolean | undefined;
+    /**
+     * Template of an item.
+     */
+    inputTemplate?: TemplateType<InputOtpProps> | undefined;
+    /**
+     * Callback to invoke while typing value on input
+     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete gets focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when autocomplete loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputOtpChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputOtpChangeEvent): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputOtpPassThroughOptions}
+     */
+    pt?: InputOtpPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputOtp**
+ *
+ * _InputOtp is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputotp/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputOtp: React.ForwardRefExoticComponent<InputOtpProps & React.RefAttributes<HTMLInputElement>>;
diff --git a/components/lib/inputotp/package.json b/components/lib/inputotp/package.json
new file mode 100644
index 0000000000..5949a3f1b5
--- /dev/null
+++ b/components/lib/inputotp/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputotp.cjs.js",
+    "module": "./inputotp.esm.js",
+    "unpkg": "./inputotp.min.js",
+    "types": "./inputotp.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputswitch/InputSwitch.js b/components/lib/inputswitch/InputSwitch.js
new file mode 100644
index 0000000000..05f8e4d39d
--- /dev/null
+++ b/components/lib/inputswitch/InputSwitch.js
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { InputSwitchBase } from './InputSwitchBase';
+
+export const InputSwitch = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = InputSwitchBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = InputSwitchBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(InputSwitchBase.css.styles, isUnstyled, { name: 'inputswitch' });
+        const elementRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const checked = props.checked === props.trueValue;
+
+        const onChange = (event) => {
+            if (props.onChange) {
+                const value = checked ? props.falseValue : props.trueValue;
+
+                props.onChange({
+                    originalEvent: event,
+                    value,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value
+                    }
+                });
+            }
+        };
+
+        const onFocus = (event) => {
+            props?.onFocus?.(event);
+        };
+
+        const onBlur = (event) => {
+            props?.onBlur?.(event);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useMountEffect(() => {
+            if (props.autoFocus) {
+                DomHandler.focus(inputRef.current, props.autoFocus);
+            }
+        });
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = InputSwitchBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root', { checked })),
+                style: props.style,
+                role: 'checkbox',
+                'aria-checked': checked,
+                'data-p-highlight': checked,
+                'data-p-disabled': props.disabled
+            },
+            otherProps,
+            ptm('root')
+        );
+
+        const inputProps = mergeProps(
+            {
+                type: 'checkbox',
+                id: props.inputId,
+                name: props.name,
+                checked: checked,
+                onChange: onChange,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                disabled: props.disabled,
+                role: 'switch',
+                tabIndex: props.tabIndex,
+                'aria-checked': checked,
+                className: cx('input'),
+                ...ariaProps
+            },
+            ptm('input')
+        );
+
+        const sliderProps = mergeProps(
+            {
+                className: cx('slider')
+            },
+            ptm('slider')
+        );
+
+        return (
+            <>
+                <div id={props.id} ref={elementRef} {...rootProps}>
+                    <input ref={inputRef} {...inputProps} />
+                    <span {...sliderProps} />
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+InputSwitch.displayName = 'InputSwitch';
diff --git a/components/lib/inputswitch/InputSwitchBase.js b/components/lib/inputswitch/InputSwitchBase.js
new file mode 100644
index 0000000000..5432f9660a
--- /dev/null
+++ b/components/lib/inputswitch/InputSwitchBase.js
@@ -0,0 +1,41 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, checked }) =>
+        classNames('p-inputswitch p-component', {
+            'p-highlight': checked,
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid
+        }),
+    input: 'p-inputswitch-input',
+    slider: 'p-inputswitch-slider'
+};
+
+export const InputSwitchBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputSwitch',
+        autoFocus: false,
+        checked: false,
+        className: null,
+        disabled: false,
+        falseValue: false,
+        id: null,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        name: null,
+        onBlur: null,
+        onChange: null,
+        onFocus: null,
+        style: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        trueValue: true,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/inputswitch/inputswitch.d.ts b/components/lib/inputswitch/inputswitch.d.ts
new file mode 100644
index 0000000000..855ac3ccb0
--- /dev/null
+++ b/components/lib/inputswitch/inputswitch.d.ts
@@ -0,0 +1,199 @@
+/**
+ *
+ * InputSwitch is used to select a boolean value.
+ *
+ * [Live Demo](https://www.primereact.org/inputswitch/)
+ *
+ * @module inputswitch
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormBooleanEvent } from '../ts-helpers';
+import { PassThroughType } from '../utils/utils';
+
+export declare type InputSwitchPassThroughType<T> = PassThroughType<T, InputSwitchPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputSwitchPassThroughMethodOptions {
+    props: InputSwitchProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputSwitchProps.pt}
+ */
+export interface InputSwitchPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputSwitchPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the slider's DOM element.
+     */
+    slider?: InputSwitchPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: InputSwitchPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom change event.
+ * @see {@link InputSwitchProps.onChange}
+ * @extends {FormBooleanEvent}
+ * @event
+ */
+interface InputSwitchChangeEvent extends FormBooleanEvent {}
+
+/**
+ * Defines valid properties in InputMask component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface InputSwitchProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Specifies whether a inputswitch should be checked or not.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Value in checked state.
+     * @defaultValue true
+     */
+    trueValue?: any;
+    /**
+     * Value in unchecked state.
+     * @defaultValue false
+     */
+    falseValue?: any;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on value change.
+     * @param {InputSwitchChangeEvent} event - Custom change event
+     */
+    onChange?(event: InputSwitchChangeEvent): void;
+    /**
+     * Callback to invoke when the element receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when the element loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputSwitchPassThroughOptions}
+     */
+    pt?: InputSwitchPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputSwitch**
+ *
+ * _InputSwitch is used to select a boolean value._
+ *
+ * [Live Demo](https://www.primereact.org/inputswitch/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class InputSwitch extends React.Component<InputSwitchProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+}
diff --git a/components/lib/inputswitch/package.json b/components/lib/inputswitch/package.json
new file mode 100644
index 0000000000..3d20d5ebc9
--- /dev/null
+++ b/components/lib/inputswitch/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputswitch.cjs.js",
+    "module": "./inputswitch.esm.js",
+    "unpkg": "./inputswitch.min.js",
+    "types": "./inputswitch.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputtext/InputText.js b/components/lib/inputtext/InputText.js
new file mode 100644
index 0000000000..889c13019e
--- /dev/null
+++ b/components/lib/inputtext/InputText.js
@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { KeyFilter } from '../keyfilter/KeyFilter';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { InputTextBase } from './InputTextBase';
+
+export const InputText = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = InputTextBase.getProps(inProps, context);
+
+        const { ptm, cx, isUnstyled } = InputTextBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            context: {
+                disabled: props.disabled,
+                iconPosition: props.iconPosition
+            }
+        });
+
+        useHandleStyle(InputTextBase.css.styles, isUnstyled, { name: 'inputtext', styled: true });
+        const elementRef = React.useRef(ref);
+
+        const onKeyDown = (event) => {
+            props.onKeyDown && props.onKeyDown(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
+        const onBeforeInput = (event) => {
+            props.onBeforeInput && props.onBeforeInput(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
+        const onInput = (event) => {
+            const target = event.target;
+            let validatePattern = true;
+
+            if (props.keyfilter && props.validateOnly) {
+                validatePattern = KeyFilter.validate(event, props.keyfilter);
+            }
+
+            props.onInput && props.onInput(event, validatePattern);
+
+            // for uncontrolled changes
+            ObjectUtils.isNotEmpty(target.value) ? DomHandler.addClass(target, 'p-filled') : DomHandler.removeClass(target, 'p-filled');
+        };
+
+        const onPaste = (event) => {
+            props.onPaste && props.onPaste(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue), [props.value, props.defaultValue]);
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+
+        React.useEffect(() => {
+            if (isFilled || elementRef.current?.value) {
+                DomHandler.addClass(elementRef.current, 'p-filled');
+            } else {
+                DomHandler.removeClass(elementRef.current, 'p-filled');
+            }
+        }, [props.disabled, isFilled]);
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root', { context, isFilled })),
+                onBeforeInput: onBeforeInput,
+                onInput: onInput,
+                onKeyDown: onKeyDown,
+                onPaste: onPaste
+            },
+            InputTextBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <input ref={elementRef} {...rootProps} />
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+InputText.displayName = 'InputText';
diff --git a/components/lib/inputtext/InputText.spec.js b/components/lib/inputtext/InputText.spec.js
new file mode 100644
index 0000000000..b6a116aa22
--- /dev/null
+++ b/components/lib/inputtext/InputText.spec.js
@@ -0,0 +1,141 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { InputText } from './InputText';
+
+describe('InputText', () => {
+    test('when input is enabled then input accepts data entry and have filled state', () => {
+        // Arrange
+        const { container } = render(<InputText />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        fireEvent.input(input, { target: { value: 'abc' } });
+
+        // Act
+        expect(input).toBeEnabled();
+        expect(input).toHaveValue('abc');
+        expect(container).toMatchSnapshot();
+    });
+    test('when input is blank it should not have filled state', () => {
+        // Arrange
+        const { container } = render(<InputText disabled={false} />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        fireEvent.input(input, { target: { value: '' } });
+
+        // Act
+        expect(input).toBeEnabled();
+        expect(input).toHaveValue('');
+        expect(container).toMatchSnapshot();
+    });
+    test('when input has className only 1 className is printed', () => {
+        // Arrange
+        const { container } = render(<InputText className="jest" />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        fireEvent.input(input, { target: { value: 'jest' } });
+
+        // Act
+        expect(container).toMatchSnapshot();
+        expect(input).toHaveValue('jest');
+    });
+    test('when input is is set for validation only', () => {
+        // Arrange
+        const { container } = render(<InputText validateOnly keyfilter={'alpha'} />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        fireEvent.input(input, { target: { value: 'def' } });
+
+        // Act
+        expect(container).toMatchSnapshot();
+        expect(input).toHaveValue('def');
+    });
+    test('when input is disabled it should render as disabled', async () => {
+        // Arrange
+        const { container } = render(<InputText disabled />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        await userEvent.type(input, '123');
+
+        // Act
+        expect(input).toBeDisabled();
+        expect(input).toHaveValue('');
+        expect(container).toMatchSnapshot();
+    });
+    test('when input is using keyfilter for integers accept integer input', async () => {
+        // Arrange
+        const keydownOn = jest.fn();
+        const { container } = render(<InputText keyfilter="int" onKeyDown={keydownOn} />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        await userEvent.type(input, '123');
+
+        // Act
+        expect(input).toHaveValue('123');
+        expect(keydownOn).toHaveBeenCalledTimes(3);
+    });
+    test('when input is using keyfilter for integers do not accept alphabetic input', async () => {
+        // Arrange
+        const keydownOn = jest.fn();
+        const { container } = render(<InputText keyfilter="int" onKeyDown={keydownOn} />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        await userEvent.type(input, 'abc');
+
+        // Act
+        expect(input).toHaveValue('');
+        expect(keydownOn).toHaveBeenCalledTimes(3);
+    });
+    test('when input is using keyfilter for alphabetic accept paste of alphabetic values', async () => {
+        // Arrange
+        const pasteOn = jest.fn();
+        const { container } = render(<InputText keyfilter="alpha" onPaste={pasteOn} />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        input.focus();
+        await userEvent.paste('abc');
+
+        // Act
+        expect(input).toHaveValue('abc');
+        expect(pasteOn).toHaveBeenCalledTimes(1);
+    });
+    test('when input is using keyfilter for alphabetic do not accept paste of integer values', async () => {
+        // Arrange
+        const pasteOn = jest.fn();
+        const { container } = render(<InputText keyfilter="alpha" onPaste={pasteOn} />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        input.focus();
+        await userEvent.paste('123');
+
+        // Act
+        expect(input).toHaveValue('');
+        expect(pasteOn).toHaveBeenCalledTimes(1);
+    });
+    test('when input is using onInput make sure it is called', async () => {
+        // Arrange
+        const inputOn = jest.fn();
+        const ref = React.createRef();
+        const { container } = render(<InputText ref={ref} onInput={inputOn} />);
+        const input = container.getElementsByTagName('input')[0];
+
+        // Act
+        ref.current.value = 'Jest testing value';
+        input.focus();
+        await userEvent.paste(' abc');
+
+        // Assert
+        expect(input).toHaveValue('Jest testing value abc');
+        expect(inputOn).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/components/lib/inputtext/InputTextBase.js b/components/lib/inputtext/InputTextBase.js
new file mode 100644
index 0000000000..fb480a41c0
--- /dev/null
+++ b/components/lib/inputtext/InputTextBase.js
@@ -0,0 +1,36 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, isFilled, context }) =>
+        classNames('p-inputtext p-component', {
+            'p-disabled': props.disabled,
+            'p-filled': isFilled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
+};
+
+export const InputTextBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputText',
+        __parentMetadata: null,
+        children: undefined,
+        className: null,
+        invalid: false,
+        variant: null,
+        keyfilter: null,
+        onBeforeInput: null,
+        onInput: null,
+        onKeyDown: null,
+        onPaste: null,
+        tooltip: null,
+        tooltipOptions: null,
+        validateOnly: false,
+        iconPosition: null
+    },
+
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/inputtext/__snapshots__/InputText.spec.js.snap b/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
new file mode 100644
index 0000000000..ebd3d0795b
--- /dev/null
+++ b/components/lib/inputtext/__snapshots__/InputText.spec.js.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputText when input has className only 1 className is printed 1`] = `
+<div>
+  <input
+    class="jest p-inputtext p-component p-filled"
+    data-pc-name="inputtext"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`InputText when input is blank it should not have filled state 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component"
+    data-pc-name="inputtext"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`InputText when input is disabled it should render as disabled 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component p-disabled"
+    data-pc-name="inputtext"
+    data-pc-section="root"
+    disabled=""
+  />
+</div>
+`;
+
+exports[`InputText when input is enabled then input accepts data entry and have filled state 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component p-filled"
+    data-pc-name="inputtext"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`InputText when input is is set for validation only 1`] = `
+<div>
+  <input
+    class="p-inputtext p-component p-filled"
+    data-pc-name="inputtext"
+    data-pc-section="root"
+  />
+</div>
+`;
diff --git a/components/lib/inputtext/inputtext.d.ts b/components/lib/inputtext/inputtext.d.ts
new file mode 100644
index 0000000000..c104c91168
--- /dev/null
+++ b/components/lib/inputtext/inputtext.d.ts
@@ -0,0 +1,146 @@
+/**
+ *
+ * InputText is an extension to standard input element with theming and keyfiltering.
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ *
+ * @module inputtext
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { KeyFilterType } from '../keyfilter';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { PassThroughType } from '../utils/utils';
+
+export declare type InputTextPassThroughType<T> = PassThroughType<T, InputTextPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputTextPassThroughMethodOptions {
+    props: InputTextProps;
+    parent: InputTextPassThroughMethodOptions;
+    context: InputTextContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputTextProps.pt}
+ */
+export interface InputTextPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputTextPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in InputText component.
+ */
+export interface InputTextContext {
+    /**
+     * Current filled state of the component as a boolean.
+     * @defaultValue false
+     */
+    filled: boolean;
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in InputText component. In addition to these, all properties of HTMLInputElement can be used in this component.
+ * @group Properties
+ */
+export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'value' | 'size'> {
+    /**
+     * Format definition of the keys to block.
+     */
+    keyfilter?: KeyFilterType;
+    /**
+     * Size of the input.
+     */
+    size?: number | string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * When enabled, instead of blocking keys, input is validated internally to test against the regular expression.
+     * @defaultValue false
+     */
+    validateOnly?: boolean | undefined;
+    /**
+     * The value of component
+     */
+    value?: string | null | undefined;
+    /**
+     * Callback to invoke while typing value on input
+     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
+     * @param {boolean} validatePattern - Whether to validate the value
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>, validatePattern: boolean): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputTextPassThroughOptions}
+     */
+    pt?: InputTextPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputText**
+ *
+ * _InputText is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/inputtext/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputText: React.ForwardRefExoticComponent<InputTextProps & React.RefAttributes<HTMLInputElement>>;
diff --git a/components/lib/inputtext/package.json b/components/lib/inputtext/package.json
new file mode 100644
index 0000000000..c488748b92
--- /dev/null
+++ b/components/lib/inputtext/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputtext.cjs.js",
+    "module": "./inputtext.esm.js",
+    "unpkg": "./inputtext.min.js",
+    "types": "./inputtext.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/inputtextarea/InputTextarea.js b/components/lib/inputtextarea/InputTextarea.js
new file mode 100644
index 0000000000..bc3225df25
--- /dev/null
+++ b/components/lib/inputtextarea/InputTextarea.js
@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { KeyFilter } from '../keyfilter/KeyFilter';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { InputTextareaBase } from './InputTextareaBase';
+
+export const InputTextarea = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = InputTextareaBase.getProps(inProps, context);
+
+        const elementRef = React.useRef(ref);
+        const cachedScrollHeight = React.useRef(0);
+
+        const { ptm, cx, isUnstyled } = InputTextareaBase.setMetaData({
+            props,
+            ...props.__parentMetadata,
+            context: {
+                disabled: props.disabled
+            }
+        });
+
+        useHandleStyle(InputTextareaBase.css.styles, isUnstyled, { name: 'inputtextarea' });
+
+        const onFocus = (event) => {
+            if (props.autoResize) {
+                resize();
+            }
+
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            if (props.autoResize) {
+                resize();
+            }
+
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onKeyUp = (event) => {
+            if (props.autoResize) {
+                resize();
+            }
+
+            props.onKeyUp && props.onKeyUp(event);
+        };
+
+        const onKeyDown = (event) => {
+            props.onKeyDown && props.onKeyDown(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
+        const onBeforeInput = (event) => {
+            props.onBeforeInput && props.onBeforeInput(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
+        const onPaste = (event) => {
+            props.onPaste && props.onPaste(event);
+
+            if (props.keyfilter) {
+                KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
+            }
+        };
+
+        const onInput = (event) => {
+            const target = event.target;
+
+            if (props.autoResize) {
+                resize(ObjectUtils.isEmpty(target.value));
+            }
+
+            props.onInput && props.onInput(event);
+
+            ObjectUtils.isNotEmpty(target.value) ? DomHandler.addClass(target, 'p-filled') : DomHandler.removeClass(target, 'p-filled');
+        };
+
+        const resize = (initial) => {
+            const inputEl = elementRef.current;
+
+            if (inputEl && isVisible(inputEl)) {
+                if (!cachedScrollHeight.current) {
+                    cachedScrollHeight.current = inputEl.scrollHeight;
+                    inputEl.style.overflow = 'hidden';
+                }
+
+                if (cachedScrollHeight.current !== inputEl.scrollHeight || initial) {
+                    inputEl.style.height = '';
+                    inputEl.style.height = inputEl.scrollHeight + 'px';
+
+                    if (parseFloat(inputEl.style.height) >= parseFloat(inputEl.style.maxHeight)) {
+                        inputEl.style.overflowY = 'scroll';
+                        inputEl.style.height = inputEl.style.maxHeight;
+                    } else {
+                        inputEl.style.overflow = 'hidden';
+                    }
+
+                    cachedScrollHeight.current = inputEl.scrollHeight;
+                }
+            }
+        };
+
+        const isVisible = () => {
+            if (DomHandler.isVisible(elementRef.current)) {
+                const rect = elementRef.current.getBoundingClientRect();
+
+                return rect.width > 0 && rect.height > 0;
+            }
+
+            return false;
+        };
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(elementRef, ref);
+        }, [elementRef, ref]);
+
+        React.useEffect(() => {
+            if (props.autoResize) {
+                resize(true);
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.autoResize, props.value]);
+
+        const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue), [props.value, props.defaultValue]);
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root', { context, isFilled })),
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyUp: onKeyUp,
+                onKeyDown: onKeyDown,
+                onBeforeInput: onBeforeInput,
+                onInput: onInput,
+                onPaste: onPaste
+            },
+            InputTextareaBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <textarea {...rootProps} />
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+InputTextarea.displayName = 'InputTextarea';
diff --git a/components/lib/inputtextarea/InputTextarea.spec.js b/components/lib/inputtextarea/InputTextarea.spec.js
new file mode 100644
index 0000000000..7b852a4382
--- /dev/null
+++ b/components/lib/inputtextarea/InputTextarea.spec.js
@@ -0,0 +1,141 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { InputTextarea } from './InputTextarea';
+
+describe('InputTextarea', () => {
+    test('when textarea is enabled then textarea accepts data entry and have filled state', async () => {
+        // Arrange
+        const { container } = render(<InputTextarea />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        await userEvent.type(input, 'abc');
+
+        // Act
+        expect(input).toBeEnabled();
+        expect(input).toHaveValue('abc');
+        expect(container).toMatchSnapshot();
+    });
+    test('when textarea is is autosizing and has rows and columns it is rendered correctly', () => {
+        // Arrange
+        const blurOn = jest.fn();
+        const { container } = render(<InputTextarea autoResize rows={3} cols={12} onBlur={blurOn} />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        fireEvent.blur(input);
+
+        // Act and Assert
+        expect(blurOn).toHaveBeenCalledTimes(1);
+        expect(container).toMatchSnapshot();
+    });
+    test('when input is blank it should not have filled state', async () => {
+        // Arrange
+        const { container } = render(<InputTextarea disabled={false} />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        fireEvent.input(input, { target: { value: '' } });
+
+        // Act
+        expect(input).toBeEnabled();
+        expect(container).toMatchSnapshot();
+    });
+    test('when input is is set for validation only', async () => {
+        // Arrange
+        const { container } = render(<InputTextarea validateOnly keyfilter={'alpha'} />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        await userEvent.type(input, 'def');
+
+        // Act
+        expect(container).toMatchSnapshot();
+    });
+    test('when input is disabled it should render as disabled', async () => {
+        // Arrange
+        const { container } = render(<InputTextarea disabled />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        await userEvent.type(input, '123');
+
+        // Act
+        expect(input).toBeDisabled();
+        expect(container).toMatchSnapshot();
+    });
+    test('when input is using keyfilter for integers accept integer input', async () => {
+        // Arrange
+        const keydownOn = jest.fn();
+        const keyupOn = jest.fn();
+        const { container } = render(<InputTextarea keyfilter="int" onKeyDown={keydownOn} onKeyUp={keyupOn} autoResize />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        await userEvent.type(input, '123');
+
+        // Act
+        expect(input).toHaveValue('123');
+        expect(keydownOn).toHaveBeenCalledTimes(3);
+        expect(keyupOn).toHaveBeenCalledTimes(3);
+    });
+    test('when input is using keyfilter for integers do not accept alphabetic input', async () => {
+        // Arrange
+        const keydownOn = jest.fn();
+        const { container } = render(<InputTextarea keyfilter="int" onKeyDown={keydownOn} />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        await userEvent.type(input, 'abc');
+
+        // Act
+        expect(input).toHaveValue('');
+        expect(keydownOn).toHaveBeenCalledTimes(3);
+    });
+    test('when input is using keyfilter for alphabetic accept paste of alphabetic values', async () => {
+        // Arrange
+        const pasteOn = jest.fn();
+        const { container } = render(<InputTextarea keyfilter="alpha" onPaste={pasteOn} />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        input.focus();
+        await userEvent.paste('abc');
+
+        // Act
+        expect(input).toHaveValue('abc');
+        expect(pasteOn).toHaveBeenCalledTimes(1);
+    });
+    test('when input is using keyfilter for alphabetic do not accept paste of integer values', async () => {
+        // Arrange
+        const pasteOn = jest.fn();
+        const { container } = render(<InputTextarea keyfilter="alpha" onPaste={pasteOn} />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        input.focus();
+        await userEvent.paste('123');
+
+        // Act
+        expect(input).toHaveValue('');
+        expect(pasteOn).toHaveBeenCalledTimes(1);
+    });
+    test('when input is using onInput make sure it is called', async () => {
+        // Arrange
+        const inputOn = jest.fn();
+        const ref = React.createRef();
+        const { container } = render(<InputTextarea ref={ref} onInput={inputOn} />);
+        const input = container.getElementsByTagName('textarea')[0];
+
+        // Act
+        ref.current.value = 'Jest testing value';
+        input.focus();
+        await userEvent.paste(' abc');
+
+        // Assert
+        expect(input).toHaveValue('Jest testing value abc');
+        expect(inputOn).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/components/lib/inputtextarea/InputTextareaBase.js b/components/lib/inputtextarea/InputTextareaBase.js
new file mode 100644
index 0000000000..76eab100ff
--- /dev/null
+++ b/components/lib/inputtextarea/InputTextareaBase.js
@@ -0,0 +1,53 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context, isFilled }) =>
+        classNames('p-inputtextarea p-inputtext p-component', {
+            'p-disabled': props.disabled,
+            'p-filled': isFilled,
+            'p-inputtextarea-resizable': props.autoResize,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-inputtextarea-resizable {
+        overflow: hidden;
+        resize: none;
+    }
+    
+    .p-fluid .p-inputtextarea {
+        width: 100%;
+    }
+}
+`;
+
+export const InputTextareaBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'InputTextarea',
+        __parentMetadata: null,
+        autoResize: false,
+        invalid: false,
+        variant: null,
+        keyfilter: null,
+        onBlur: null,
+        onFocus: null,
+        onBeforeInput: null,
+        onInput: null,
+        onKeyDown: null,
+        onKeyUp: null,
+        onPaste: null,
+        tooltip: null,
+        tooltipOptions: null,
+        validateOnly: false,
+        children: undefined,
+        className: null
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/inputtextarea/__snapshots__/InputTextarea.spec.js.snap b/components/lib/inputtextarea/__snapshots__/InputTextarea.spec.js.snap
new file mode 100644
index 0000000000..803d65b5d9
--- /dev/null
+++ b/components/lib/inputtextarea/__snapshots__/InputTextarea.spec.js.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputTextarea when input is blank it should not have filled state 1`] = `
+<div>
+  <textarea
+    class="p-inputtextarea p-inputtext p-component"
+    data-pc-name="inputtextarea"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`InputTextarea when input is disabled it should render as disabled 1`] = `
+<div>
+  <textarea
+    class="p-inputtextarea p-inputtext p-component p-disabled"
+    data-pc-name="inputtextarea"
+    data-pc-section="root"
+    disabled=""
+  />
+</div>
+`;
+
+exports[`InputTextarea when input is is set for validation only 1`] = `
+<div>
+  <textarea
+    class="p-inputtextarea p-inputtext p-component p-filled"
+    data-pc-name="inputtextarea"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`InputTextarea when textarea is enabled then textarea accepts data entry and have filled state 1`] = `
+<div>
+  <textarea
+    class="p-inputtextarea p-inputtext p-component p-filled"
+    data-pc-name="inputtextarea"
+    data-pc-section="root"
+  />
+</div>
+`;
+
+exports[`InputTextarea when textarea is is autosizing and has rows and columns it is rendered correctly 1`] = `
+<div>
+  <textarea
+    class="p-inputtextarea p-inputtext p-component p-inputtextarea-resizable"
+    cols="12"
+    data-pc-name="inputtextarea"
+    data-pc-section="root"
+    rows="3"
+  />
+</div>
+`;
diff --git a/components/lib/inputtextarea/inputtextarea.d.ts b/components/lib/inputtextarea/inputtextarea.d.ts
new file mode 100644
index 0000000000..3809d2b403
--- /dev/null
+++ b/components/lib/inputtextarea/inputtextarea.d.ts
@@ -0,0 +1,130 @@
+/**
+ *
+ * Inputtextarea add styling and autoResize functionality to standard textarea element.
+ *
+ * [Live Demo](https://www.primereact.org/inputtextarea/)
+ *
+ * @module inputtextarea
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { KeyFilterType } from '../keyfilter';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { PassThroughType } from '../utils/utils';
+
+export declare type InputTextareaPassThroughType<T> = PassThroughType<T, InputTextareaPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputTextareaPassThroughMethodOptions {
+    props: InputTextareaProps;
+    context: InputTextareaContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputTextareaProps.pt}
+ */
+export interface InputTextareaPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InputTextareaPassThroughType<React.HTMLAttributes<HTMLTextAreaElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in Textarea component.
+ */
+export interface InputTextareaContext {
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in InputTextarea component. In addition to these, all properties of HTMLTextAreaElement can be used in this component.
+ * @group Properties
+ */
+export interface InputTextareaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'ref' | 'value' | 'pt'> {
+    /**
+     * When present, height of textarea changes as being typed.
+     * @defaultValue false
+     */
+    autoResize?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Format definition of the keys to block.
+     */
+    keyfilter?: KeyFilterType;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     * @type {TooltipOptions}
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * The value of component
+     */
+    value?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InputTextareaPassThroughOptions}
+     */
+    pt?: InputTextareaPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - InputTextarea**
+ *
+ * _Inputtextarea add styling and autoResize functionality to standard textarea element._
+ *
+ * [Live Demo](https://www.primereact.org/inputtextarea/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const InputTextarea: React.ForwardRefExoticComponent<InputTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
diff --git a/components/lib/inputtextarea/package.json b/components/lib/inputtextarea/package.json
new file mode 100644
index 0000000000..3ca0e90869
--- /dev/null
+++ b/components/lib/inputtextarea/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./inputtextarea.cjs.js",
+    "module": "./inputtextarea.esm.js",
+    "unpkg": "./inputtextarea.min.js",
+    "types": "./inputtextarea.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/keyfilter/KeyFilter.js b/components/lib/keyfilter/KeyFilter.js
new file mode 100644
index 0000000000..791846d0bd
--- /dev/null
+++ b/components/lib/keyfilter/KeyFilter.js
@@ -0,0 +1,93 @@
+import { DomHandler } from '../utils/Utils';
+
+export const KeyFilter = {
+    /* eslint-disable */
+    DEFAULT_MASKS: {
+        pint: /[\d]/,
+        int: /[\d\-]/,
+        pnum: /[\d\.]/,
+        money: /[\d\.\s,]/,
+        num: /[\d\-\.]/,
+        hex: /[0-9a-f]/i,
+        email: /[a-z0-9_\.\-@]/i,
+        alpha: /[a-z_]/i,
+        alphanum: /[a-z0-9_]/i
+    },
+    /* eslint-enable */
+
+    getRegex(keyfilter) {
+        return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
+    },
+
+    onBeforeInput(e, keyfilter, validateOnly) {
+        // android devices must use beforeinput https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229
+        if (validateOnly || !DomHandler.isAndroid()) {
+            return;
+        }
+
+        this.validateKey(e, e.data, keyfilter);
+    },
+
+    onKeyPress(e, keyfilter, validateOnly) {
+        // non android devices use keydown
+        if (validateOnly || DomHandler.isAndroid()) {
+            return;
+        }
+
+        if (e.ctrlKey || e.altKey || e.metaKey) {
+            return;
+        }
+
+        this.validateKey(e, e.key, keyfilter);
+    },
+
+    onPaste(e, keyfilter, validateOnly) {
+        if (validateOnly) {
+            return;
+        }
+
+        const regex = this.getRegex(keyfilter);
+        const clipboard = e.clipboardData.getData('text');
+
+        // loop over each letter pasted and if any fail prevent the paste
+        [...clipboard].forEach((c) => {
+            if (!regex.test(c)) {
+                e.preventDefault();
+
+                return false;
+            }
+        });
+    },
+
+    validateKey(e, key, keyfilter) {
+        if (key === null || key === undefined) {
+            return;
+        }
+
+        // some AZERTY keys come in with 2 chars like ´ç if Dead key is pressed first
+        const isPrintableKey = key.length <= 2;
+
+        if (!isPrintableKey) {
+            return;
+        }
+
+        const regex = this.getRegex(keyfilter);
+
+        if (!regex.test(key)) {
+            e.preventDefault();
+        }
+    },
+
+    validate(e, keyfilter) {
+        let value = e.target.value;
+        let validatePattern = true;
+
+        const regex = this.getRegex(keyfilter);
+
+        if (value && !regex.test(value)) {
+            validatePattern = false;
+        }
+
+        return validatePattern;
+    }
+};
diff --git a/components/lib/keyfilter/keyfilteroptions.d.ts b/components/lib/keyfilter/keyfilteroptions.d.ts
new file mode 100644
index 0000000000..240138e65a
--- /dev/null
+++ b/components/lib/keyfilter/keyfilteroptions.d.ts
@@ -0,0 +1,16 @@
+/**
+ *
+ * This module contains common options and types of components that use KeyFilter.
+ *
+ * @module keyfilter
+ *
+ */
+
+/**
+ * Defines the type of keyfilter property in components.
+ *
+ * @see {@link inputtext}
+ * @see {@link password}
+ * ...
+ */
+export type KeyFilterType = 'pint' | 'int' | 'pnum' | 'money' | 'num' | 'hex' | 'email' | 'alpha' | 'alphanum' | RegExp;
diff --git a/components/lib/keyfilter/package.json b/components/lib/keyfilter/package.json
new file mode 100644
index 0000000000..fc79a41787
--- /dev/null
+++ b/components/lib/keyfilter/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./keyfilter.cjs.js",
+    "module": "./keyfilter.esm.js",
+    "unpkg": "./keyfilter.min.js",
+    "types": "./keyfilteroptions.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/knob/Knob.js b/components/lib/knob/Knob.js
new file mode 100644
index 0000000000..092893dee8
--- /dev/null
+++ b/components/lib/knob/Knob.js
@@ -0,0 +1,307 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { KnobBase } from './KnobBase';
+
+const radius = 40;
+const midX = 50;
+const midY = 50;
+const minRadians = (4 * Math.PI) / 3;
+const maxRadians = -Math.PI / 3;
+
+export const Knob = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = KnobBase.getProps(inProps, context);
+
+        const { ptm, cx, isUnstyled } = KnobBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(KnobBase.css.styles, isUnstyled, { name: 'knob' });
+        const elementRef = React.useRef(null);
+        const enabled = !props.disabled && !props.readOnly;
+
+        const [bindWindowMouseMoveListener, unbindWindowMouseMoveListener] = useEventListener({
+            target: 'window',
+            type: 'mousemove',
+            listener: (event) => {
+                updateValue(event.offsetX, event.offsetY);
+                event.preventDefault();
+            },
+            when: enabled
+        });
+
+        const [bindWindowMouseUpListener, unbindWindowMouseUpListener] = useEventListener({
+            target: 'window',
+            type: 'mouseup',
+            listener: (event) => {
+                unbindWindowMouseMoveListener();
+                unbindWindowMouseUpListener();
+                event.preventDefault();
+            },
+            when: enabled
+        });
+
+        const [bindWindowTouchMoveListener, unbindWindowTouchMoveListener] = useEventListener({
+            target: 'window',
+            type: 'touchmove',
+            listener: (event) => {
+                if (event.touches.length === 1) {
+                    const rect = elementRef.current.getBoundingClientRect();
+                    const touch = event.targetTouches.item(0);
+                    const offsetX = touch.clientX - rect.left;
+                    const offsetY = touch.clientY - rect.top;
+
+                    updateValue(offsetX, offsetY);
+                    event.preventDefault();
+                }
+            },
+            when: enabled
+        });
+
+        const [bindWindowTouchEndListener, unbindWindowTouchEndListener] = useEventListener({
+            target: 'window',
+            type: 'touchend',
+            listener: () => {
+                unbindWindowTouchMoveListener();
+                unbindWindowTouchEndListener();
+            },
+            when: enabled
+        });
+
+        const mapRange = (x, inMin, inMax, outMin, outMax) => ((x - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+
+        const zeroRadians = () => mapRange(props.min > 0 && props.max > 0 ? props.min : 0, props.min, props.max, minRadians, maxRadians);
+
+        const valueRadians = () => mapRange(props.value, props.min, props.max, minRadians, maxRadians);
+
+        const minX = () => midX + Math.cos(minRadians) * radius;
+
+        const minY = () => midY - Math.sin(minRadians) * radius;
+
+        const maxX = () => midX + Math.cos(maxRadians) * radius;
+
+        const maxY = () => midY - Math.sin(maxRadians) * radius;
+
+        const zeroX = () => midX + Math.cos(zeroRadians()) * radius;
+
+        const zeroY = () => midY - Math.sin(zeroRadians()) * radius;
+
+        const valueX = () => midX + Math.cos(valueRadians()) * radius;
+
+        const valueY = () => midY - Math.sin(valueRadians()) * radius;
+
+        const largeArc = () => (Math.abs(zeroRadians() - valueRadians()) < Math.PI ? 0 : 1);
+
+        const sweep = () => (valueRadians() > zeroRadians() ? 0 : 1);
+
+        const rangePath = `M ${minX()} ${minY()} A ${radius} ${radius} 0 1 1 ${maxX()} ${maxY()}`;
+
+        const valuePath = `M ${zeroX()} ${zeroY()} A ${radius} ${radius} 0 ${largeArc()} ${sweep()} ${valueX()} ${valueY()}`;
+
+        const valueToDisplay = () => props.valueTemplate.replace('{value}', props.value.toString());
+
+        const updateValue = (offsetX, offsetY) => {
+            const dx = offsetX - props.size / 2;
+            const dy = props.size / 2 - offsetY;
+            const angle = Math.atan2(dy, dx);
+            const start = -Math.PI / 2 - Math.PI / 6;
+
+            updateModel(angle, start);
+        };
+
+        const updateModel = (angle, start) => {
+            let mappedValue;
+
+            if (angle > maxRadians) {
+                mappedValue = mapRange(angle, minRadians, maxRadians, props.min, props.max);
+            } else if (angle < start) {
+                mappedValue = mapRange(angle + 2 * Math.PI, minRadians, maxRadians, props.min, props.max);
+            } else {
+                return;
+            }
+
+            if (props.onChange) {
+                props.onChange({
+                    value: Math.round((mappedValue - props.min) / props.step) * props.step + props.min
+                });
+            }
+        };
+
+        const updateModelValue = (newValue) => {
+            let currentValue;
+
+            if (newValue > props.max) {
+                currentValue = props.max;
+            } else if (newValue < props.min) {
+                currentValue = props.min;
+            } else {
+                currentValue = newValue;
+            }
+
+            if (props.onChange) {
+                props.onChange({
+                    value: currentValue
+                });
+            }
+        };
+
+        const onClick = (event) => {
+            if (!props.disabled && !props.readOnly) {
+                updateValue(event.nativeEvent.offsetX, event.nativeEvent.offsetY);
+            }
+        };
+
+        const onMouseDown = (event) => {
+            bindWindowMouseMoveListener();
+            bindWindowMouseUpListener();
+            event.preventDefault();
+        };
+
+        const onMouseUp = () => {
+            unbindWindowMouseMoveListener();
+            unbindWindowMouseUpListener();
+        };
+
+        const onTouchStart = () => {
+            bindWindowTouchMoveListener();
+            bindWindowTouchEndListener();
+        };
+
+        const onTouchEnd = () => {
+            unbindWindowTouchMoveListener();
+            unbindWindowTouchEndListener();
+        };
+
+        const onKeyDown = (event) => {
+            if (!props.disabled && !props.readonly) {
+                switch (event.code) {
+                    case 'ArrowRight':
+                    case 'ArrowUp':
+                        event.preventDefault();
+                        updateModelValue(props.value + 1);
+                        break;
+
+                    case 'ArrowLeft':
+
+                    case 'ArrowDown': {
+                        event.preventDefault();
+                        updateModelValue(props.value - 1);
+                        break;
+                    }
+
+                    case 'Home': {
+                        event.preventDefault();
+                        updateModelValue(props.min);
+                        break;
+                    }
+
+                    case 'End': {
+                        event.preventDefault();
+                        updateModelValue(props.max);
+                        break;
+                    }
+
+                    case 'PageUp': {
+                        event.preventDefault();
+                        updateModelValue(props.value + 10);
+                        break;
+                    }
+
+                    case 'PageDown': {
+                        event.preventDefault();
+                        updateModelValue(props.value - 10);
+                        break;
+                    }
+                }
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const labelProps = mergeProps(
+            {
+                x: 50,
+                y: 57,
+                textAnchor: 'middle',
+                fill: props.textColor,
+                className: cx('label'),
+                name: props.name
+            },
+            ptm('label')
+        );
+
+        const text = props.showValue && <text {...labelProps}>{valueToDisplay()}</text>;
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            ptm('root')
+        );
+
+        const svgProps = mergeProps(
+            {
+                viewBox: '0 0 100 100',
+                width: props.size,
+                height: props.size,
+                'aria-valuemin': props.min,
+                'aria-valuemax': props.max,
+                'aria-valuenow': props.value,
+                'aria-labelledby': props.ariaLabelledby,
+                'aria-label': props.ariaLabel,
+                role: 'slider',
+                tabIndex: props.readonly || props.disabled ? -1 : props.tabIndex,
+                onClick: (e) => onClick(e),
+                onMouseDown: (e) => onMouseDown(e),
+                onMouseUp: (e) => onMouseUp(e),
+                onTouchStart: (e) => onTouchStart(e),
+                onTouchEnd: (e) => onTouchEnd(e),
+                onKeyDown: (e) => onKeyDown(e)
+            },
+            ptm('svg')
+        );
+
+        const rangeProps = mergeProps(
+            {
+                d: rangePath,
+                strokeWidth: props.strokeWidth,
+                stroke: props.rangeColor,
+                className: cx('range')
+            },
+            ptm('range')
+        );
+
+        const valueProps = mergeProps(
+            {
+                d: valuePath,
+                strokeWidth: props.strokeWidth,
+                stroke: props.valueColor,
+                className: cx('value')
+            },
+            ptm('value')
+        );
+
+        return (
+            <div {...rootProps}>
+                <svg {...svgProps}>
+                    <path {...rangeProps} />
+                    <path {...valueProps} />
+                    {text}
+                </svg>
+            </div>
+        );
+    })
+);
+
+Knob.displayName = 'Knob';
diff --git a/components/lib/knob/KnobBase.js b/components/lib/knob/KnobBase.js
new file mode 100644
index 0000000000..1846f36d9e
--- /dev/null
+++ b/components/lib/knob/KnobBase.js
@@ -0,0 +1,62 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+export const KnobBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Knob',
+        id: null,
+        style: null,
+        className: null,
+        value: null,
+        size: 100,
+        disabled: false,
+        readOnly: false,
+        showValue: true,
+        tabIndex: 0,
+        step: 1,
+        min: 0,
+        max: 100,
+        strokeWidth: 14,
+        name: null,
+        valueColor: 'var(--primary-color, Black)',
+        rangeColor: 'var(--surface-border, LightGray)',
+        textColor: 'var(--text-color-secondary, Black)',
+        valueTemplate: '{value}',
+        onChange: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            range: 'p-knob-range',
+            value: 'p-knob-value',
+            label: 'p-knob-text',
+            root: ({ props }) =>
+                classNames('p-knob p-component', {
+                    'p-disabled': props.disabled
+                })
+        },
+        styles: `
+        @keyframes dash-frame {
+            100% {
+                stroke-dashoffset: 0;
+            }
+        }
+        @layer primereact {
+            .p-knob-range {
+                fill: none;
+                transition: stroke .1s ease-in;
+                cursor: pointer;
+            }
+            .p-knob-value {
+                animation-name: dash-frame;
+                animation-fill-mode: forwards;
+                fill: none;
+            }
+            .p-knob-text {
+                font-size: 1.3rem;
+                text-align: center;
+            }
+        }
+        `
+    }
+});
diff --git a/components/lib/knob/knob.d.ts b/components/lib/knob/knob.d.ts
new file mode 100644
index 0000000000..5aad48d792
--- /dev/null
+++ b/components/lib/knob/knob.d.ts
@@ -0,0 +1,197 @@
+/**
+ *
+ * Knob is a form component to define number inputs with a dial.
+ *
+ * [Live Demo](https://www.primereact.org/knob/)
+ *
+ * @module knob
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type KnobPassThroughType<T> = PassThroughType<T, KnobPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface KnobPassThroughMethodOptions {
+    props: KnobProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link KnobProps.pt}
+ */
+export interface KnobPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: KnobPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the svg's DOM element.
+     */
+    svg?: KnobPassThroughType<React.SVGProps<SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: KnobPassThroughType<React.SVGProps<SVGPathElement>>;
+    /**
+     * Uses to pass attributes to the value' DOM element.
+     */
+    value?: KnobPassThroughType<React.SVGProps<SVGPathElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: KnobPassThroughType<React.SVGProps<SVGTextElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom change event.
+ * @see {@link KnobProps.onChange}
+ * @event
+ */
+interface KnobChangeEvent {
+    /**
+     * New value
+     */
+    value: number;
+}
+
+/**
+ * Defines valid properties in Knob component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface KnobProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Value of the component.
+     */
+    value?: number | undefined;
+    /**
+     * Size of the component in pixels.
+     * @defaultValue 100
+     */
+    size?: number | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the component value cannot be edited.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the show the value inside the knob.
+     * @defaultValue true
+     */
+    showValue?: boolean | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * Mininum boundary value.
+     * @defaultValue 0
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     * @defaultValue 100
+     */
+    max?: number | undefined;
+    /**
+     * Width of the knob stroke.
+     * @defaultValue 14
+     */
+    strokeWidth?: number | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Background of the value.
+     * @defaultValue var(--primary-color, Black)
+     */
+    valueColor?: string | undefined;
+    /**
+     * Background color of the range.
+     * @defaultValue var(--surface-border, LightGray)
+     */
+    rangeColor?: string | undefined;
+    /**
+     * Color of the value text.
+     * @defaultValue var(--text-color-secondary, Black)
+     */
+    textColor?: string | undefined;
+    /**
+     * Template string of the value.
+     * @defaultValue &#123;value&#125;
+     */
+    valueTemplate?: string | undefined;
+    /**
+     * Callback to invoke on value change.
+     * @param {KnobChangeEvent} event - Custom change event
+     */
+    onChange?(event: KnobChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {KnobPassThroughOptions}
+     */
+    pt?: KnobPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Knob**
+ *
+ * _Knob is a form component to define number inputs with a dial._
+ *
+ * [Live Demo](https://www.primereact.org/knob/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Knob extends React.Component<KnobProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/knob/package.json b/components/lib/knob/package.json
new file mode 100644
index 0000000000..1ad0a50ab0
--- /dev/null
+++ b/components/lib/knob/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./knob.cjs.js",
+    "module": "./knob.esm.js",
+    "unpkg": "./knob.min.js",
+    "types": "./knob.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
new file mode 100644
index 0000000000..fb8e2d4e41
--- /dev/null
+++ b/components/lib/listbox/ListBox.js
@@ -0,0 +1,931 @@
+import * as React from 'react';
+import { FilterService, PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+import { VirtualScroller } from '../virtualscroller/VirtualScroller';
+import { ListBoxBase } from './ListBoxBase';
+import { ListBoxHeader } from './ListBoxHeader';
+import { ListBoxItem } from './ListBoxItem';
+
+export const ListBox = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ListBoxBase.getProps(inProps, context);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null);
+        const searchTimeout = React.useRef(null);
+        const firstHiddenFocusableElement = React.useRef(null);
+        const lastHiddenFocusableElement = React.useRef(null);
+        const [startRangeIndex, setStartRangeIndex] = React.useState(-1);
+        const [focused, setFocused] = React.useState(false);
+        const [filterValueState, setFilterValueState] = React.useState('');
+        const [searchValue, setSearchValue] = React.useState('');
+        const elementRef = React.useRef(null);
+        const virtualScrollerRef = React.useRef(null);
+        const id = React.useRef(null);
+        const listRef = React.useRef(null);
+        const optionTouched = React.useRef(false);
+        const filteredValue = (props.onFilterValueChange ? props.filterValue : filterValueState) || '';
+        const hasFilter = filteredValue && filteredValue.trim().length > 0;
+
+        const metaData = {
+            props,
+            state: {
+                filterValue: filteredValue
+            }
+        };
+
+        const ptCallbacks = ListBoxBase.setMetaData(metaData);
+
+        useHandleStyle(ListBoxBase.css.styles, ptCallbacks.isUnstyled, { name: 'listbox' });
+
+        const onOptionSelect = (event, option, index = -1) => {
+            if (props.disabled || isOptionDisabled(option)) {
+                return;
+            }
+
+            props.multiple ? onOptionSelectMultiple(event.originalEvent, option) : onOptionSelectSingle(event.originalEvent, option);
+            optionTouched.current = false;
+            index !== -1 && setFocusedOptionIndex(index);
+        };
+
+        const onOptionMouseDown = (event, index) => {
+            changeFocusedOptionIndex(event, index);
+        };
+
+        const onOptionMouseMove = (event, index) => {
+            if (props.focusOnHover && focused) {
+                changeFocusedOptionIndex(event, index);
+            }
+        };
+
+        const onOptionTouchEnd = () => {
+            if (props.disabled) {
+                return;
+            }
+
+            optionTouched.current = true;
+        };
+
+        const onOptionSelectSingle = (event, option) => {
+            let selected = isSelected(option);
+            let valueChanged = false;
+            let value = null;
+            let metaSelection = optionTouched.current ? false : props.metaKeySelection;
+
+            if (metaSelection) {
+                let metaKey = event.metaKey || event.ctrlKey;
+
+                if (selected) {
+                    if (metaKey) {
+                        value = null;
+                        valueChanged = true;
+                    }
+                } else {
+                    value = getOptionValue(option);
+                    valueChanged = true;
+                }
+            } else {
+                value = selected ? null : getOptionValue(option);
+                valueChanged = true;
+            }
+
+            if (valueChanged) {
+                updateModel(event, value);
+            }
+        };
+
+        const onOptionSelectMultiple = (event, option) => {
+            let selected = isSelected(option);
+            let valueChanged = false;
+            let value = null;
+            let metaSelection = optionTouched ? false : props.metaKeySelection;
+
+            if (metaSelection) {
+                let metaKey = event.metaKey || event.ctrlKey;
+
+                if (selected) {
+                    if (metaKey) {
+                        value = removeOption(option);
+                    } else {
+                        value = [getOptionValue(option)];
+                    }
+
+                    valueChanged = true;
+                } else {
+                    value = metaKey ? props.value || [] : [];
+                    value = [...value, getOptionValue(option)];
+                    valueChanged = true;
+                }
+            } else {
+                if (selected) {
+                    value = removeOption(option);
+                } else {
+                    value = [...(props.value || []), getOptionValue(option)];
+                }
+
+                valueChanged = true;
+            }
+
+            if (valueChanged) {
+                props.onChange({
+                    originalEvent: event,
+                    value,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value
+                    }
+                });
+            }
+        };
+
+        const hasSelectedOption = () => {
+            return ObjectUtils.isNotEmpty(props.value);
+        };
+
+        const isOptionGroup = (option) => {
+            return props.optionGroupLabel && option.optionGroup && option.group;
+        };
+
+        const isValidOption = (option) => {
+            return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+        };
+
+        const isValidSelectedOption = (option) => {
+            return isValidOption(option) && isSelected(option);
+        };
+
+        const findFirstOptionIndex = () => {
+            return visibleOptions.findIndex((option) => isValidOption(option));
+        };
+
+        const findLastSelectedOptionIndex = () => {
+            return hasSelectedOption() ? ObjectUtils.findLastIndex(visibleOptions, (option) => isValidSelectedOption(option)) : -1;
+        };
+
+        const findSelectedOptionIndex = () => {
+            if (hasSelectedOption()) {
+                if (props.multiple) {
+                    for (let index = props.value.length - 1; index >= 0; index--) {
+                        const value = props.value[index];
+                        const matchedOptionIndex = visibleOptions.findIndex((option) => isValidSelectedOption(option) && isEquals(value, getOptionValue(option)));
+
+                        if (matchedOptionIndex > -1) {
+                            return matchedOptionIndex;
+                        }
+                    }
+                } else {
+                    return visibleOptions.findIndex((option) => isValidSelectedOption(option));
+                }
+            }
+
+            return -1;
+        };
+
+        const findFirstSelectedOptionIndex = () => {
+            return hasSelectedOption() ? visibleOptions.findIndex((option) => isValidSelectedOption(option)) : -1;
+        };
+
+        const findLastOptionIndex = () => {
+            return ObjectUtils.findLastIndex(visibleOptions, (option) => isValidOption(option));
+        };
+
+        const findNextOptionIndex = (index) => {
+            const matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+        };
+
+        const findPrevOptionIndex = (index) => {
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+        };
+
+        const focusedOptionId = () => {
+            return focusedOptionIndex !== -1 ? `${id.current}_${focusedOptionIndex}` : null;
+        };
+
+        const findNearestSelectedOptionIndex = (index, firstCheckUp = false) => {
+            let matchedOptionIndex = -1;
+
+            if (hasSelectedOption()) {
+                if (firstCheckUp) {
+                    matchedOptionIndex = findPrevSelectedOptionIndex(index);
+                    matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
+                } else {
+                    matchedOptionIndex = findNextSelectedOptionIndex(index);
+                    matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+                }
+            }
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+        };
+
+        const isOptionMatched = (option) => {
+            return isValidOption(option) && getOptionLabel(option)?.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.toLocaleLowerCase(props.filterLocale));
+        };
+
+        const searchOptions = (event, char) => {
+            setSearchValue((searchValue || '') + char);
+
+            let optionIndex = -1;
+
+            if (ObjectUtils.isNotEmpty(searchValue)) {
+                if (focusedOptionIndex !== -1) {
+                    optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex((option) => isOptionMatched(option));
+                    optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex((option) => isOptionMatched(option)) : optionIndex + focusedOptionIndex;
+                } else {
+                    optionIndex = visibleOptions.findIndex((option) => isOptionMatched(option));
+                }
+
+                if (optionIndex === -1 && focusedOptionIndex === -1) {
+                    optionIndex = findFirstFocusedOptionIndex();
+                }
+
+                if (optionIndex !== -1) {
+                    changeFocusedOptionIndex(event, optionIndex);
+                }
+            }
+
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout.current);
+            }
+
+            searchTimeout.current = setTimeout(() => {
+                setSearchValue('');
+                searchTimeout.current = null;
+            }, 500);
+        };
+
+        const findNextSelectedOptionIndex = (index) => {
+            const matchedOptionIndex = hasSelectedOption() && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidSelectedOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
+        };
+
+        const findPrevSelectedOptionIndex = (index) => {
+            const matchedOptionIndex = hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidSelectedOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+        };
+
+        const onOptionSelectRange = (event, start = -1, end = -1) => {
+            start === -1 && (start = findNearestSelectedOptionIndex(end, true));
+            end === -1 && (end = findNearestSelectedOptionIndex(start));
+
+            if (start !== -1 && end !== -1) {
+                const rangeStart = Math.min(start, end);
+                const rangeEnd = Math.max(start, end);
+                const value = visibleOptions
+                    .slice(rangeStart, rangeEnd + 1)
+                    .filter((option) => isValidOption(option))
+                    .map((option) => getOptionValue(option));
+
+                updateModel(event, value);
+            }
+        };
+
+        const findFirstFocusedOptionIndex = () => {
+            const selectedIndex = findFirstSelectedOptionIndex();
+
+            return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+        };
+
+        const findLastFocusedOptionIndex = () => {
+            const selectedIndex = findLastSelectedOptionIndex();
+
+            return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
+        };
+
+        const changeFocusedOptionIndex = (event, index) => {
+            if (focusedOptionIndex !== index) {
+                setFocusedOptionIndex(index);
+                scrollInView();
+
+                if (event && props.selectOnFocus && !props.multiple) {
+                    onOptionSelect(event, visibleOptions[index]);
+                }
+            }
+        };
+
+        const onArrowDownKey = (event) => {
+            const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : findFirstFocusedOptionIndex();
+
+            if (props.multiple && event.shiftKey) {
+                onOptionSelectRange(event, startRangeIndex, optionIndex);
+            }
+
+            changeFocusedOptionIndex(event, optionIndex);
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event) => {
+            const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : findLastFocusedOptionIndex();
+
+            if (props.multiple && event.shiftKey) {
+                onOptionSelectRange(event, optionIndex, startRangeIndex);
+            }
+
+            changeFocusedOptionIndex(event, optionIndex);
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            if (focusedOptionIndex !== -1) {
+                if (props.multiple && event.shiftKey) {
+                    onOptionSelectRange(event, focusedOptionIndex);
+                } else {
+                    onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event) => {
+            onEnterKey(event);
+        };
+
+        const onShiftKey = () => {
+            setStartRangeIndex(focusedOptionIndex);
+        };
+
+        const onHomeKey = (event, pressedInInputText = false) => {
+            if (pressedInInputText) {
+                event.currentTarget.setSelectionRange(0, 0);
+                setFocusedOptionIndex(-1);
+            } else {
+                let metaKey = event.metaKey || event.ctrlKey;
+                let optionIndex = findFirstOptionIndex();
+
+                if (props.multiple && event.shiftKey && metaKey) {
+                    onOptionSelectRange(event, optionIndex, startRangeIndex);
+                }
+
+                changeFocusedOptionIndex(event, optionIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onEndKey = (event, pressedInInputText = false) => {
+            if (pressedInInputText) {
+                const target = event.currentTarget;
+                const len = target.value.length;
+
+                target.setSelectionRange(len, len);
+                setFocusedOptionIndex(-1);
+            } else {
+                let metaKey = event.metaKey || event.ctrlKey;
+                let optionIndex = findLastOptionIndex();
+
+                if (props.multiple && event.shiftKey && metaKey) {
+                    onOptionSelectRange(event, startRangeIndex, optionIndex);
+                }
+
+                changeFocusedOptionIndex(event, optionIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onPageUpKey = (event) => {
+            scrollInView(0);
+            event.preventDefault();
+        };
+
+        const onPageDownKey = (event) => {
+            scrollInView(visibleOptions.length - 1);
+            event.preventDefault();
+        };
+
+        const onListKeyDown = (event) => {
+            const metaKey = event.metaKey || event.ctrlKey;
+
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onSpaceKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    // NOOP
+                    break;
+
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    onShiftKey(event);
+                    break;
+
+                default:
+                    if (props.multiple && event.key === 'a' && metaKey) {
+                        const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+
+                        updateModel(event, value);
+
+                        event.preventDefault();
+                        break;
+                    }
+
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchOptions(event, event.key);
+                        event.preventDefault();
+                    }
+
+                    break;
+            }
+        };
+
+        const scrollInView = (index = -1) => {
+            setTimeout(() => {
+                // As long as this is a timeout - there is not guarantee that listRef will still
+                // exist by the moment of calling that function. So, if list is already destroyed
+                // by this moment - do nothing:
+                if (!listRef.current) return;
+                const idx = index !== -1 ? `${id.current}_${index}` : focusedOptionId();
+                const element = listRef.current.querySelector(`li[id="${idx}"]`);
+
+                if (element) {
+                    element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+                } else if (props.virtualScrollerOptions) {
+                    virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(index !== -1 ? index : focusedOptionIndex);
+                }
+            }, 0);
+        };
+
+        const onFilter = (event) => {
+            virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
+
+            const { originalEvent, value } = event;
+
+            if (props.onFilterValueChange) {
+                props.onFilterValueChange({
+                    originalEvent,
+                    value
+                });
+            } else {
+                setFilterValueState(value);
+            }
+        };
+
+        const resetFilter = () => {
+            setFilterValueState('');
+            props.onFilter && props.onFilter({ filter: '' });
+        };
+
+        const autoUpdateModel = (isFocus = focused) => {
+            if (props.selectOnFocus && props.autoOptionFocus && !hasSelectedOption() && !props.multiple && isFocus) {
+                const currentFocusOptionIndex = findFirstFocusedOptionIndex();
+
+                onOptionSelect(null, visibleOptions[currentFocusOptionIndex]);
+                setFocusedOptionIndex(currentFocusOptionIndex);
+            }
+        };
+
+        const updateModel = (event, value) => {
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value
+                    }
+                });
+            }
+        };
+
+        const removeOption = (option) => {
+            return props.value.filter((val) => !ObjectUtils.equals(val, getOptionValue(option), props.dataKey));
+        };
+
+        const getSelectedOptionIndex = () => {
+            if (props.value != null && visibleOptions) {
+                if (props.optionGroupLabel) {
+                    for (let i = 0; i < visibleOptions.length; i++) {
+                        let selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(visibleOptions[i]));
+
+                        if (selectedOptionIndex !== -1) {
+                            return { group: i, option: selectedOptionIndex };
+                        }
+                    }
+                } else {
+                    return findOptionIndexInList(props.value, visibleOptions);
+                }
+            }
+
+            return -1;
+        };
+
+        const equalityKey = () => {
+            return props.optionValue ? null : props.dataKey;
+        };
+
+        const findOptionIndexInList = (value, list) => {
+            const key = equalityKey();
+
+            return list.findIndex((item) => ObjectUtils.equals(value, getOptionValue(item), key));
+        };
+
+        const isEquals = (value1, value2) => {
+            return ObjectUtils.equals(value1, value2, equalityKey());
+        };
+
+        const isSelected = (option) => {
+            const optionValue = getOptionValue(option);
+
+            if (props.multiple) {
+                return (props.value || []).some((value) => isEquals(value, optionValue));
+            }
+
+            return isEquals(props.value, optionValue);
+        };
+
+        const getOptionLabel = (option) => {
+            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
+        };
+
+        const getOptionValue = (option) => {
+            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option.value !== undefined ? option.value : option;
+        };
+
+        const getOptionRenderKey = (option) => {
+            return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
+        };
+
+        const isOptionDisabled = (option) => {
+            if (props.optionDisabled) {
+                return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
+            }
+
+            return option && option.disabled !== undefined ? option.disabled : false;
+        };
+
+        const onFirstHiddenFocus = () => {
+            DomHandler.focus(listRef.current);
+
+            const firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+
+            lastHiddenFocusableElement.current.tabIndex = DomHandler.isElement(firstFocusableEl) ? undefined : -1;
+            firstHiddenFocusableElement.current.tabIndex = -1;
+            changeFocusedOptionIndex(null, 0);
+        };
+
+        const onLastHiddenFocus = (event) => {
+            const relatedTarget = event.relatedTarget;
+
+            if (relatedTarget === listRef.current) {
+                const firstFocusableEl = DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-p-hidden-focusable="true"])');
+
+                DomHandler.focus(firstFocusableEl);
+                firstHiddenFocusableElement.current.tabIndex = undefined;
+            } else {
+                DomHandler.focus(firstHiddenFocusableElement.current);
+            }
+
+            lastHiddenFocusableElement.current.tabIndex = -1;
+        };
+
+        const onListFocus = () => {
+            setFocused(true);
+            setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex());
+            autoUpdateModel(true);
+        };
+
+        const onListBlur = () => {
+            setFocused(false);
+            setFocusedOptionIndex(-1);
+            setStartRangeIndex(-1);
+            setSearchValue('');
+        };
+
+        const getOptionGroupRenderKey = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
+        };
+
+        const getOptionGroupLabel = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
+        };
+
+        const getOptionGroupChildren = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
+        };
+
+        const flatOptions = (options) => {
+            return (options || []).reduce((result, option, index) => {
+                result.push({ optionGroup: option, group: true, index, code: option.code, label: option.label });
+
+                const optionGroupChildren = getOptionGroupChildren(option);
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
+
+                return result;
+            }, []);
+        };
+
+        const getVisibleOptions = () => {
+            const options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
+
+            if (hasFilter) {
+                const filterValue = filteredValue.trim().toLocaleLowerCase(props.filterLocale);
+                const searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
+
+                if (props.optionGroupLabel) {
+                    let filteredGroups = [];
+
+                    for (let optgroup of props.options) {
+                        let filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+
+                        if (filteredSubOptions && filteredSubOptions.length) {
+                            filteredGroups.push({ ...optgroup, ...{ items: filteredSubOptions } });
+                        }
+                    }
+
+                    return flatOptions(filteredGroups);
+                }
+
+                return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+            }
+
+            return options;
+        };
+
+        const scrollToSelectedIndex = () => {
+            if (virtualScrollerRef.current) {
+                const selectedIndex = getSelectedOptionIndex();
+
+                if (selectedIndex !== -1) {
+                    setTimeout(() => virtualScrollerRef.current.scrollToIndex(selectedIndex), 0);
+                }
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focusFirstElement(elementRef.current),
+            getElement: () => elementRef.current,
+            getVirtualScroller: () => virtualScrollerRef.current
+        }));
+
+        useMountEffect(() => {
+            scrollToSelectedIndex();
+            id.current = UniqueComponentId();
+        });
+
+        const createHeader = () => {
+            return props.filter ? (
+                <ListBoxHeader
+                    hostName="ListBox"
+                    filter={filteredValue}
+                    filterIcon={props.filterIcon}
+                    onFilter={onFilter}
+                    resetFilter={resetFilter}
+                    filterTemplate={props.filterTemplate}
+                    disabled={props.disabled}
+                    filterPlaceholder={props.filterPlaceholder}
+                    filterInputProps={props.filterInputProps}
+                    ptCallbacks={ptCallbacks}
+                    metaData={metaData}
+                />
+            ) : null;
+        };
+
+        const createItem = (option, index, scrollerOptions = {}) => {
+            const style = { height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined };
+
+            if (option.group && option.optionGroup && props.optionGroupLabel) {
+                const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : getOptionGroupLabel(option);
+                const key = index + '_' + getOptionGroupRenderKey(option);
+                const itemGroupProps = mergeProps(
+                    {
+                        className: ptCallbacks.cx('itemGroup'),
+                        style: ptCallbacks.sx('itemGroup', { scrollerOptions }),
+                        role: 'group'
+                    },
+                    ptCallbacks.ptm('itemGroup')
+                );
+
+                return (
+                    <li {...itemGroupProps} key={key}>
+                        {groupContent}
+                    </li>
+                );
+            }
+
+            const optionLabel = getOptionLabel(option);
+            const optionKey = index + '_' + getOptionRenderKey(option);
+            const disabled = isOptionDisabled(option);
+
+            return (
+                <ListBoxItem
+                    id={id.current + '_' + index}
+                    hostName="ListBox"
+                    optionKey={optionKey}
+                    key={optionKey}
+                    label={optionLabel}
+                    index={index}
+                    onOptionMouseDown={onOptionMouseDown}
+                    onOptionMouseMove={onOptionMouseMove}
+                    focusedOptionIndex={focusedOptionIndex}
+                    option={option}
+                    style={style}
+                    template={props.itemTemplate}
+                    selected={isSelected(option)}
+                    onClick={onOptionSelect}
+                    onTouchEnd={onOptionTouchEnd}
+                    disabled={disabled}
+                    ptCallbacks={ptCallbacks}
+                    metaData={metaData}
+                />
+            );
+        };
+
+        const createItems = () => {
+            if (ObjectUtils.isNotEmpty(visibleOptions)) {
+                return visibleOptions.map(createItem);
+            } else if (hasFilter) {
+                return createEmptyMessage(props.emptyFilterMessage, true);
+            }
+
+            return createEmptyMessage(props.emptyMessage);
+        };
+
+        const createEmptyMessage = (emptyMessage, isFilter) => {
+            const emptyMessageProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('emptyMessage')
+                },
+                ptCallbacks.ptm('emptyMessage')
+            );
+
+            const message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
+
+            return <li {...emptyMessageProps}>{message}</li>;
+        };
+
+        const createList = () => {
+            if (props.virtualScrollerOptions) {
+                const virtualScrollerProps = {
+                    ...props.virtualScrollerOptions,
+                    ...{
+                        items: visibleOptions,
+                        onLazyLoad: (event) => props.virtualScrollerOptions.onLazyLoad({ ...event, ...{ filter: visibleOptions } }),
+                        itemTemplate: (item, options) => item && createItem(item, options.index, options),
+                        contentTemplate: (options) => {
+                            const listProps = mergeProps(
+                                {
+                                    ref: listRef,
+                                    style: ptCallbacks.sx('list', { options }),
+                                    className: ptCallbacks.cx('list', { options }),
+                                    role: 'listbox',
+                                    tabIndex: '-1',
+                                    'aria-multiselectable': props.multiple,
+                                    onFocus: onListFocus,
+                                    onBlur: onListBlur,
+                                    onKeyDown: onListKeyDown,
+                                    ...ariaProps
+                                },
+                                ptCallbacks.ptm('list')
+                            );
+
+                            return <ul {...listProps}>{options.children}</ul>;
+                        }
+                    }
+                };
+
+                return <VirtualScroller ref={virtualScrollerRef} {...virtualScrollerProps} pt={ptCallbacks.ptm('virtualScroller')} />;
+            }
+
+            const items = createItems();
+
+            const listProps = mergeProps(
+                {
+                    ref: listRef,
+                    className: ptCallbacks.cx('list'),
+                    role: 'listbox',
+                    'aria-multiselectable': props.multiple,
+                    tabIndex: '-1',
+                    onFocus: onListFocus,
+                    onBlur: onListBlur,
+                    onKeyDown: onListKeyDown,
+                    ...ariaProps
+                },
+                ptCallbacks.ptm('list')
+            );
+
+            return <ul {...listProps}>{items}</ul>;
+        };
+
+        const visibleOptions = getVisibleOptions();
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = ListBoxBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const list = createList();
+        const header = createHeader();
+
+        const wrapperProps = mergeProps(
+            {
+                className: ptCallbacks.cx('wrapper'),
+                style: props.listStyle
+            },
+            ptCallbacks.ptm('wrapper')
+        );
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: ptCallbacks.cx('root'),
+                style: props.style
+            },
+            ListBoxBase.getOtherProps(props),
+            ptCallbacks.ptm('root')
+        );
+
+        const hiddenFirstElement = mergeProps(
+            {
+                ref: firstHiddenFocusableElement,
+                role: 'presentation',
+                'aria-hidden': 'true',
+                className: 'p-hidden-accessible p-hidden-focusable',
+                tabIndex: !props.disabled ? props.tabIndex : -1,
+                onFocus: onFirstHiddenFocus,
+                'data-p-hidden-accessible': true,
+                'data-p-hidden-focusable': true
+            },
+            ptCallbacks.ptm('hiddenFirstFocusableEl')
+        );
+
+        const hiddenLastElement = mergeProps(
+            {
+                ref: lastHiddenFocusableElement,
+                role: 'presentation',
+                'aria-hidden': 'true',
+                className: 'p-hidden-accessible p-hidden-focusable',
+                tabIndex: !props.disabled ? props.tabIndex : -1,
+                onFocus: onLastHiddenFocus,
+                'data-p-hidden-accessible': true,
+                'data-p-hidden-focusable': true
+            },
+            ptCallbacks.ptm('hiddenLastFocusableEl')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    <span {...hiddenFirstElement} />
+                    {header}
+                    <div {...wrapperProps}>{list}</div>
+                    <span {...hiddenLastElement} />
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptCallbacks.ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+ListBox.displayName = 'ListBox';
diff --git a/components/lib/listbox/ListBoxBase.js b/components/lib/listbox/ListBoxBase.js
new file mode 100644
index 0000000000..6b6c7b2643
--- /dev/null
+++ b/components/lib/listbox/ListBoxBase.js
@@ -0,0 +1,123 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    itemGroup: 'p-listbox-item-group',
+    emptyMessage: 'p-listbox-empty-message',
+    list: 'p-listbox-list',
+    wrapper: ({ props }) => classNames('p-listbox-list-wrapper', props.listClassName),
+    root: ({ props }) =>
+        classNames(
+            'p-listbox p-component',
+            {
+                'p-disabled': props.disabled,
+                'p-invalid': props.invalid
+            },
+            props.className
+        ),
+    item: ({ props }) =>
+        classNames(
+            'p-listbox-item',
+            {
+                'p-highlight': props.selected,
+                'p-focus': props.focusedOptionIndex === props.index,
+                'p-disabled': props.disabled
+            },
+            props.option.className
+        ),
+    filterContainer: 'p-listbox-filter-container',
+    filterIcon: 'p-listbox-filter-icon',
+    filterInput: 'p-listbox-filter',
+    header: 'p-listbox-header'
+};
+
+const styles = `
+@layer primereact {
+    .p-listbox-list-wrapper {
+        overflow: auto;
+    }
+    
+    .p-listbox-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    
+    .p-listbox-item {
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        outline: none;
+    }
+    
+    .p-listbox-filter-container {
+        position: relative;
+    }
+    
+    .p-listbox-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+    
+    .p-listbox-filter {
+        width: 100%;
+    }
+}
+`;
+
+const inlineStyles = {
+    itemGroup: ({ scrollerOptions }) => ({ height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined }),
+    list: ({ options, props }) => (props.virtualScrollerOptions ? options.style : undefined)
+};
+
+export const ListBoxBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ListBox',
+        className: null,
+        dataKey: null,
+        disabled: null,
+        emptyFilterMessage: null,
+        emptyMessage: null,
+        filter: false,
+        filterIcon: null,
+        filterBy: null,
+        filterInputProps: null,
+        filterLocale: undefined,
+        filterMatchMode: 'contains',
+        filterPlaceholder: null,
+        filterTemplate: null,
+        filterValue: null,
+        focusOnHover: true,
+        id: null,
+        itemTemplate: null,
+        invalid: false,
+        listClassName: null,
+        listStyle: null,
+        metaKeySelection: false,
+        selectOnFocus: false,
+        autoOptionFocus: false,
+        multiple: false,
+        onChange: null,
+        onFilterValueChange: null,
+        optionDisabled: null,
+        optionGroupChildren: null,
+        optionGroupLabel: null,
+        optionGroupTemplate: null,
+        optionLabel: null,
+        optionValue: null,
+        options: null,
+        style: null,
+        tabIndex: 0,
+        tooltip: null,
+        tooltipOptions: null,
+        value: null,
+        virtualScrollerOptions: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/listbox/ListBoxHeader.js b/components/lib/listbox/ListBoxHeader.js
new file mode 100644
index 0000000000..76063bcd1e
--- /dev/null
+++ b/components/lib/listbox/ListBoxHeader.js
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { SearchIcon } from '../icons/search';
+import { InputText } from '../inputtext/InputText';
+import { IconUtils, ObjectUtils } from '../utils/Utils';
+
+export const ListBoxHeader = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const {
+        ptCallbacks: { ptm, cx }
+    } = props;
+
+    const getPTOptions = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            ...options
+        });
+    };
+
+    const filterOptions = {
+        filter: (e) => onFilter(e),
+        reset: () => props.resetFilter()
+    };
+
+    const onFilter = (event) => {
+        if (props.onFilter) {
+            props.onFilter({
+                originalEvent: event,
+                value: event.target.value
+            });
+        }
+    };
+
+    const createHeader = () => {
+        const filterIconProps = mergeProps(
+            {
+                className: cx('filterIcon')
+            },
+            getPTOptions('filterIcon')
+        );
+
+        const icon = props.filterIcon || <SearchIcon {...filterIconProps} />;
+        const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
+
+        const headerProps = mergeProps(
+            {
+                className: cx('header')
+            },
+            getPTOptions('header')
+        );
+
+        const filterContainerProps = mergeProps(
+            {
+                className: cx('filterContainer')
+            },
+            getPTOptions('filterContainer')
+        );
+
+        let content = (
+            <div {...filterContainerProps}>
+                <InputText
+                    type="text"
+                    value={props.filter}
+                    onChange={onFilter}
+                    className={cx('filterInput')}
+                    disabled={props.disabled}
+                    placeholder={props.filterPlaceholder}
+                    {...props.filterInputProps}
+                    pt={ptm('filterInput')}
+                    unstyled={props.unstyled}
+                    __parentMetadata={{ parent: props.metaData }}
+                />
+                {filterIcon}
+            </div>
+        );
+
+        if (props.filterTemplate) {
+            const defaultContentOptions = {
+                className: 'p-listbox-filter-container',
+                element: content,
+                filterOptions: filterOptions,
+                filterInputChange: onFilter,
+                filterIconClassName: 'p-dropdown-filter-icon',
+                props
+            };
+
+            content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+        }
+
+        return <div {...headerProps}>{content}</div>;
+    };
+
+    const content = createHeader();
+
+    return <>{content}</>;
+});
+
+ListBoxHeader.displayName = 'ListBoxHeader';
diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js
new file mode 100644
index 0000000000..2b88b9a265
--- /dev/null
+++ b/components/lib/listbox/ListBoxItem.js
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+
+export const ListBoxItem = React.memo((props) => {
+    const [focusedState, setFocusedState] = React.useState(false);
+
+    const mergeProps = useMergeProps();
+    const {
+        ptCallbacks: { ptm, cx }
+    } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                selected: props.selected,
+                disabled: props.disabled,
+                focused: focusedState,
+                focusedOptionIndex: props.focusedOptionIndex
+            }
+        });
+    };
+
+    const onFocus = (event) => {
+        setFocusedState(true);
+    };
+
+    const onBlur = (event) => {
+        setFocusedState(false);
+    };
+
+    const onTouchEnd = (event) => {
+        if (props.onTouchEnd) {
+            props.onTouchEnd({
+                originalEvent: event,
+                option: props.option
+            });
+        }
+    };
+
+    const findNextItem = (item) => {
+        const nextItem = item.nextElementSibling;
+
+        return nextItem ? (DomHandler.isAttributeEquals(nextItem, 'data-p-disabled', true) || DomHandler.isAttributeEquals(nextItem, 'data-pc-section', 'itemgroup') ? findNextItem(nextItem) : nextItem) : null;
+    };
+
+    const findPrevItem = (item) => {
+        const prevItem = item.previousElementSibling;
+
+        return prevItem ? (DomHandler.isAttributeEquals(prevItem, 'data-p-disabled', true) || DomHandler.isAttributeEquals(prevItem, 'data-pc-section', 'itemgroup') ? findPrevItem(prevItem) : prevItem) : null;
+    };
+
+    const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
+    const itemProps = mergeProps(
+        {
+            id: props.id,
+            className: cx('item', { props }),
+            style: props.style,
+            onClick: (event) => props.onClick(event, props.option, props.index),
+            onTouchEnd: onTouchEnd,
+            onFocus: onFocus,
+            onBlur: onBlur,
+            tabIndex: '-1',
+            onMouseDown: (event) => props.onOptionMouseDown(event, props.index),
+            onMouseMove: (event) => props.onOptionMouseMove(event, props.index),
+            'aria-label': props.label,
+            role: 'option',
+            'aria-selected': props.selected,
+            'aria-disabled': props.disabled,
+            'data-p-disabled': props.disabled
+        },
+        getPTOptions('item')
+    );
+
+    return (
+        <li {...itemProps} key={props.optionKey}>
+            {content}
+            <Ripple />
+        </li>
+    );
+});
+
+ListBoxItem.displayName = 'ListBoxItem';
diff --git a/components/lib/listbox/listbox.d.ts b/components/lib/listbox/listbox.d.ts
new file mode 100755
index 0000000000..a246089c0b
--- /dev/null
+++ b/components/lib/listbox/listbox.d.ts
@@ -0,0 +1,461 @@
+/**
+ *
+ * ListBox is used to select one or more values from a list of items.
+ *
+ * [Live Demo](https://www.primereact.org/listbox/)
+ *
+ * @module listbox
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { InputTextPassThroughOptions } from '../inputtext/inputtext';
+import { PassThroughOptions } from '../passthrough';
+import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils/utils';
+import { VirtualScroller, VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type ListBoxPassThroughType<T> = PassThroughType<T, ListBoxPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ListBoxPassThroughMethodOptions {
+    props: ListBoxProps;
+    state: ListBoxState;
+    context: ListBoxContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ListBoxProps.pt}
+ */
+export interface ListBoxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: InputTextPassThroughOptions;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: ListBoxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptions}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptions;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: ListBoxPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: ListBoxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: ListBoxPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: ListBoxPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in ListBox component.
+ */
+export interface ListBoxState {
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+}
+
+/**
+ * Defines current options in ListBox component.
+ */
+export interface ListBoxContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current focused state of the item as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom change target options.
+ */
+interface ListBoxChangeTargetOptions {
+    /**
+     * The name of the target.
+     */
+    name: string;
+    /**
+     * Unique identifier of the element.
+     */
+    id: string;
+    /**
+     * New value of the element.
+     */
+    value: any;
+}
+
+/**
+ * Custom change event.
+ * @see {@link ListBoxProps.onChange}
+ * @event
+ */
+interface ListBoxChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Single value or an array of values depending on the selection mode
+     */
+    value: any;
+    /**
+     * Stops the event from propagating.
+     */
+    stopPropagation(): void;
+    /**
+     * Prevents the default action of the event.
+     */
+    preventDefault(): void;
+    /**
+     * Target element.
+     */
+    target: ListBoxChangeTargetOptions;
+}
+
+/**
+ * Custom filter value change event.
+ * @see {@link ListBoxProps.onFilterValueChange}
+ * @event
+ */
+interface ListBoxFilterValueChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * The filtered value
+     */
+    value: any;
+}
+
+/**
+ * Custom filter template options.
+ */
+interface ListBoxFilterTemplateOptions {
+    /**
+     * Style class of the filter.
+     */
+    className: string;
+    /**
+     * Whether the option is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * The filter element.
+     */
+    element: HTMLDivElement;
+    /**
+     * The filter.
+     */
+    filter?: string;
+    /**
+     * Icon of the filter.
+     */
+    filterIcon?: IconType<ListBox> | string;
+    /**
+     * Style class of the filter icon.
+     */
+    filterIconClassName: string;
+    /**
+     * Browser change event for the filter input element.
+     */
+    filterInputChange?: React.ChangeEvent<HTMLInputElement>;
+    /**
+     * The props of the filter input element.
+     */
+    filterInputProps?: any;
+    /**
+     * The filter input options.
+     */
+    filterOptions?: ListBoxFilterOptions;
+    /**
+     * The placeholder of the filter element.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Custom filter template.
+     */
+    filterTemplate?: React.ReactNode | ((options: ListBoxFilterTemplateOptions) => React.ReactNode);
+}
+
+/**
+ * Custom filter options.
+ */
+interface ListBoxFilterOptions {
+    /**
+     * Used to filter options
+     * @param { React.ChangeEvent<HTMLInputElement>} event - Browser event.
+     */
+    filter?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Used to reset the filtered options
+     */
+    reset?: () => void;
+}
+
+/**
+ * Defines valid properties in ListBox component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ListBoxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * A property to uniquely match the value in options for better performance.
+     * @defaultValue false
+     */
+    dataKey?: string | undefined;
+    /**
+     * When specified, disables the component.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Text to display when there is no data.
+     */
+    emptyMessage?: React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
+    /**
+     * Template to display when filtering does not return any results.
+     */
+    emptyFilterMessage?: React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
+    /**
+     * When specified, displays a filter input at header.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: string | undefined;
+    /**
+     * Props for the filter input, any prop is passed implicity to the filter input element.
+     * @defaultValue undefined
+     */
+    filterInputProps?: any | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
+     * @defaultValue contains
+     */
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Custom template for the filter element.
+     */
+    filterTemplate?: React.ReactNode | ((options: ListBoxFilterTemplateOptions) => React.ReactNode);
+    /**
+     * When specified, filter displays with this value.
+     */
+    filterValue?: string | undefined;
+    /**
+     * Custom template for the items.
+     */
+    itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode);
+    /**
+     * Inline style class of inner list element.
+     */
+    listClassName?: string | undefined;
+    /**
+     * Inline style of inner list element.
+     */
+    listStyle?: React.CSSProperties | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @defaultValue true
+     */
+    metaKeySelection?: boolean | undefined;
+    /**
+     * When specified, allows selecting multiple values.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     */
+    optionDisabled?: string | ((option: any) => boolean) | undefined;
+    /**
+     * Property name or getter function that refers to the children options of option group.
+     */
+    optionGroupChildren?: string | undefined;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     */
+    optionGroupLabel?: string | undefined;
+    /**
+     * Template of an option group item.
+     */
+    optionGroupTemplate?: React.ReactNode | ((option: any, index: number) => React.ReactNode);
+    /**
+     * Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
+     */
+    optionLabel?: string | undefined;
+    /**
+     * Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.
+     */
+    optionValue?: string | undefined;
+    /**
+     * An array of objects to display as the available options.
+     */
+    options?: SelectItemOptionsType | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Selected value to display.
+     */
+    value?: any | undefined;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     * @type {VirtualScrollerProps}
+     */
+    virtualScrollerOptions?: VirtualScrollerProps | undefined;
+    /**
+     * Whether to focus on the first visible or selected element.
+     * @defaultValue false
+     */
+    autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focused option is selected.
+     * @defaultValue false
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ListBoxPassThroughOptions}
+     */
+    pt?: ListBoxPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+
+    /**
+     * Callback to invoke when value of listbox changes.
+     * @param {ListBoxChangeEvent} event - Custom change event.
+     */
+    onChange?(event: ListBoxChangeEvent): void;
+    /**
+     * Callback to invoke when filter value changes.
+     * @param {ListBoxFilterValueChangeEvent} event - Custom filter value change event.
+     */
+    onFilterValueChange?(event: ListBoxFilterValueChangeEvent): void;
+}
+
+/**
+ * **PrimeReact - ListBox**
+ *
+ * _ListBox is used to select one or more values from a list of items._
+ *
+ * [Live Demo](https://www.primereact.org/listbox/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ListBox extends React.Component<ListBoxProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement | null} Container element
+     */
+    public getElement(): HTMLSpanElement | null;
+    /**
+     * Used to get the virtual scroller instance.
+     * @return {VirtualScroller | null} Virtual Scroller instance
+     */
+    public getVirtualScroller(): VirtualScroller | null;
+}
diff --git a/components/lib/listbox/package.json b/components/lib/listbox/package.json
new file mode 100644
index 0000000000..7b936d0c5f
--- /dev/null
+++ b/components/lib/listbox/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./listbox.cjs.js",
+    "module": "./listbox.esm.js",
+    "unpkg": "./listbox.min.js",
+    "types": "./listbox.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/megamenu/MegaMenu.js b/components/lib/megamenu/MegaMenu.js
new file mode 100644
index 0000000000..16e49222fe
--- /dev/null
+++ b/components/lib/megamenu/MegaMenu.js
@@ -0,0 +1,1305 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUpdateEffect } from '../hooks/Hooks';
+import { AngleDownIcon } from '../icons/angledown';
+import { AngleRightIcon } from '../icons/angleright';
+import { BarsIcon } from '../icons/bars';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { MegaMenuBase } from './MegaMenuBase';
+
+export const MegaMenu = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MegaMenuBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const [activeItemState, setActiveItemState] = React.useState(null);
+        const [focused, setFocused] = React.useState(null);
+        const [focusedItemInfo, setFocusedItemInfo] = React.useState({ index: -1, key: '', parentKey: '' });
+        const [focusedItemId, setFocusedItemId] = React.useState(null);
+        const [dirty, setDirty] = React.useState(false);
+        const [processedItems, setProcessedItems] = React.useState(null);
+        const [visibleItems, setVisibleItems] = React.useState([]);
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
+        const [mobileActiveState, setMobileActiveState] = React.useState(false);
+        const [focusTrigger, setFocusTrigger] = React.useState(false);
+        const searchValue = React.useRef('');
+        const searchTimeout = React.useRef(null);
+        const elementRef = React.useRef(null);
+        const menubarRef = React.useRef(null);
+        const styleElementRef = React.useRef(null);
+        const menuButtonRef = React.useRef(null);
+        const horizontal = props.orientation === 'horizontal';
+        const vertical = props.orientation === 'vertical';
+        const isMobileMode = useMatchMedia(`screen and (max-width: ${props.breakpoint})`, !!props.breakpoint);
+
+        const { ptm, cx, isUnstyled } = MegaMenuBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                activeItem: activeItemState && activeItemState.item,
+                attributeSelector: attributeSelectorState,
+                mobileActive: mobileActiveState
+            }
+        });
+
+        useHandleStyle(MegaMenuBase.css.styles, isUnstyled, { name: 'megamenu' });
+
+        const getPTOptions = (processedItem, key, index) => {
+            return ptm(key, {
+                context: {
+                    active: isItemActive(processedItem),
+                    focused: isItemFocused(processedItem),
+                    disabled: isItemDisabled(processedItem),
+                    item: processedItem,
+                    index
+                }
+            });
+        };
+
+        const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+            type: 'click',
+            listener: (event) => {
+                if (isOutsideClicked(event)) {
+                    hide();
+                }
+            }
+        });
+
+        const [bindDocumentResizeListener, unbindDocumentResizeListener] = useResizeListener({
+            type: 'resize',
+            listener: () => {
+                hide();
+            }
+        });
+
+        const bindListeners = () => {
+            bindDocumentClickListener();
+            bindDocumentResizeListener();
+        };
+
+        const unbindListeners = () => {
+            unbindDocumentClickListener();
+            unbindDocumentResizeListener();
+        };
+
+        const onLeafClick = (event) => {
+            const { originalEvent, processedItem } = event;
+            const item = processedItem.item;
+
+            if (item.disabled) {
+                originalEvent.preventDefault();
+
+                return;
+            }
+
+            if (!item.url) {
+                originalEvent.preventDefault();
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: originalEvent,
+                    item: item
+                });
+            }
+
+            const grouped = isProccessedItemGroup(processedItem);
+            const selected = isSelected(processedItem);
+
+            if (selected) {
+                const { index, key, parentKey } = processedItem;
+
+                setActiveItemState(null);
+                setFocusedItemInfo({ index, key, parentKey });
+            } else if (grouped) {
+                onItemChange(event);
+            } else {
+                const rootProcessedItemIndex = activeItemState ? activeItemState.index : -1;
+                const rootProcessedItemKey = activeItemState ? activeItemState.key : '';
+
+                hide(originalEvent);
+                setFocusedItemInfo({ index: rootProcessedItemIndex, key: rootProcessedItemKey, parentKey: '' });
+                setMobileActiveState(false);
+            }
+        };
+
+        const onItemChange = (event) => {
+            const { processedItem, isFocus } = event;
+
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
+
+            const { index, key, parentKey, items } = processedItem;
+            const grouped = ObjectUtils.isNotEmpty(items);
+
+            grouped && setActiveItemState(processedItem);
+            setFocusedItemInfo({ index, key, parentKey });
+
+            grouped && setDirty(true);
+            isFocus && DomHandler.focus(menubarRef.current);
+        };
+
+        const onCategoryMouseEnter = (event) => {
+            if (!mobileActiveState && dirty) {
+                onItemChange(event);
+            }
+        };
+
+        const onCategoryClick = (event) => {
+            const { originalEvent, processedItem } = event;
+            const item = processedItem.item;
+
+            if (item.disabled) {
+                originalEvent.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: originalEvent,
+                    item: props.item
+                });
+            }
+
+            if (!item.url) {
+                originalEvent.preventDefault();
+                originalEvent.stopPropagation();
+            }
+
+            const grouped = isProccessedItemGroup(processedItem);
+            const root = ObjectUtils.isEmpty(processedItem.parent);
+            const selected = isSelected(processedItem);
+
+            if (selected) {
+                const { index, key, parentKey } = processedItem;
+
+                setActiveItemState(null);
+                setFocusedItemInfo({ index, key, parentKey });
+                setDirty(!root);
+            } else if (grouped) {
+                onItemChange(event);
+            } else {
+                const rootProcessedItem = root ? processedItem : activeItemState;
+
+                hide();
+                changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
+                setMobileActiveState(false);
+                DomHandler.focus(menubarRef.current);
+            }
+        };
+
+        const show = () => {
+            setFocusedItemInfo({ index: findFirstFocusedItemIndex(), level: 0, parentKey: '' });
+        };
+
+        const hide = (isFocus) => {
+            if (mobileActiveState) {
+                setMobileActiveState(false);
+                setTimeout(() => {
+                    DomHandler.focus(menuButtonRef.current);
+                }, 0);
+            }
+
+            setActiveItemState(null);
+
+            if (isFocus) {
+                setFocusedItemInfo({ index: -1, key: '', parentKey: '' });
+                DomHandler.focus(menubarRef.current);
+            }
+
+            setDirty(false);
+        };
+
+        const toggle = (event) => {
+            event.preventDefault();
+
+            if (mobileActiveState) {
+                setMobileActiveState(false);
+                ZIndexUtils.clear(menubarRef.current);
+                hide();
+            } else {
+                setMobileActiveState(true);
+                ZIndexUtils.set('menu', menubarRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
+                setTimeout(() => {
+                    show();
+                }, 1);
+            }
+        };
+
+        const isOutsideClicked = (event) => {
+            return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target) || (menuButtonRef.current && menuButtonRef.current.contains(event.target)));
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            const uniqueId = UniqueComponentId();
+
+            !idState && setIdState(uniqueId);
+
+            if (props.breakpoint) {
+                !attributeSelectorState && setAttributeSelectorState(uniqueId);
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (attributeSelectorState && elementRef.current) {
+                elementRef.current.setAttribute(attributeSelectorState, '');
+                createStyle();
+            }
+
+            return () => {
+                destroyStyle();
+            };
+        }, [attributeSelectorState, props.breakpoint]);
+
+        useUpdateEffect(() => {
+            if (mobileActiveState) {
+                bindListeners();
+            } else {
+                unbindListeners();
+            }
+        }, [mobileActiveState]);
+
+        useUpdateEffect(() => {
+            if (focusTrigger) {
+                const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+                changeFocusedItemInfo(itemIndex);
+                setFocusTrigger(false);
+            }
+        }, [focusTrigger]);
+
+        useUpdateEffect(() => {
+            const currentPanel = DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel');
+
+            if (activeItemState) {
+                bindListeners();
+
+                if (!isMobileMode) {
+                    ZIndexUtils.set('menu', currentPanel, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
+                }
+            } else {
+                unbindListeners();
+            }
+
+            if (isMobileMode) {
+                currentPanel && currentPanel.previousElementSibling.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+
+            return () => {
+                unbindListeners();
+                ZIndexUtils.clear(currentPanel);
+            };
+        }, [activeItemState, isMobileMode]);
+
+        useUpdateEffect(() => {
+            const _focusedItemId = ObjectUtils.isNotEmpty(focusedItemInfo.key) ? `${idState}_${focusedItemInfo.key}` : null;
+
+            setFocusedItemId(_focusedItemId);
+        }, [focusedItemInfo]);
+
+        React.useEffect(() => {
+            const itemsToProcess = props.model || [];
+            const processed = createProcessedItems(itemsToProcess, 0, null, '');
+
+            setProcessedItems(processed);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.model]);
+
+        useUpdateEffect(() => {
+            const processedItem = ObjectUtils.isNotEmpty(activeItemState) ? activeItemState : null;
+
+            const _visibleItems =
+                processedItem && processedItem.key === focusedItemInfo.parentKey
+                    ? processedItem.items.reduce((items, col) => {
+                          col.forEach((submenu) => {
+                              submenu.items.forEach((a) => {
+                                  items.push(a);
+                              });
+                          });
+
+                          return items;
+                      }, [])
+                    : processedItems;
+
+            setVisibleItems(_visibleItems);
+        }, [focusedItemInfo, activeItemState, processedItems]);
+
+        const onFocus = (event) => {
+            setFocused(true);
+
+            if (focusedItemInfo.index === -1) {
+                const index = findFirstFocusedItemIndex();
+                const processedItem = findVisibleItem(index);
+
+                setFocusedItemInfo({ index, key: processedItem.key, parentKey: processedItem.parentKey });
+            }
+
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocused(false);
+            setFocusedItemInfo({ index: -1, key: '', parentKey: '' });
+            searchValue.current = '';
+            setDirty(false);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onKeyDown = (event) => {
+            const metaKey = event.metaKey || event.ctrlKey;
+
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event, event.key);
+                    }
+
+                    break;
+            }
+        };
+
+        const onArrowDownKey = (event) => {
+            event.preventDefault();
+
+            if (horizontal) {
+                let _focusedItemInfo = focusedItemInfo;
+
+                if (ObjectUtils.isNotEmpty(activeItemState) && activeItemState.key === focusedItemInfo.key) {
+                    _focusedItemInfo = { index: -1, key: '', parentKey: activeItemState.key };
+                    setFocusedItemInfo(_focusedItemInfo);
+                } else {
+                    const processedItem = findVisibleItem(focusedItemInfo.index);
+                    const grouped = isProccessedItemGroup(processedItem);
+
+                    if (grouped) {
+                        onItemChange({ originalEvent: event, processedItem });
+                        _focusedItemInfo = { index: -1, key: processedItem.key, parentKey: processedItem.parentKey };
+                        setFocusedItemInfo(_focusedItemInfo);
+                        searchValue.current = '';
+                    }
+                }
+
+                setTimeout(() => setFocusTrigger(true), 0);
+            } else {
+                const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+                changeFocusedItemInfo(itemIndex);
+            }
+        };
+
+        const onArrowUpKey = (event) => {
+            const processedItem = findVisibleItem(focusedItemInfo.index);
+            const grouped = isProccessedItemGroup(processedItem);
+
+            if (event.altKey && horizontal) {
+                if (focusedItemInfo.index !== -1) {
+                    if (!grouped && ObjectUtils.isNotEmpty(activeItemState)) {
+                        if (focusedItemInfo.index === 0) {
+                            setFocusedItemInfo({ index: activeItemState.index, key: activeItemState.key, parentKey: activeItemState.parentKey });
+                            setActiveItemState(null);
+                        } else {
+                            changeFocusedItemInfo(findFirstItemIndex());
+                        }
+                    }
+                }
+            } else {
+                const itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+
+                changeFocusedItemInfo(itemIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowLeftKey = (event) => {
+            const processedItem = findVisibleItem(focusedItemInfo.index);
+            const grouped = isProccessedItemGroup(processedItem);
+
+            if (grouped) {
+                if (horizontal) {
+                    const itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+
+                    changeFocusedItemInfo(itemIndex);
+                }
+            } else {
+                if (vertical && ObjectUtils.isNotEmpty(activeItemState)) {
+                    if (processedItem.columnIndex === 0) {
+                        setFocusedItemInfo({ index: activeItemState.index, key: activeItemState.key, parentKey: activeItemState.parentKey });
+                        setActiveItemState(null);
+                    }
+                }
+
+                const columnIndex = processedItem.columnIndex - 1;
+                const itemIndex = visibleItems.findIndex((item) => item.columnIndex === columnIndex);
+
+                itemIndex !== -1 && changeFocusedItemInfo(itemIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowRightKey = (event) => {
+            event.preventDefault();
+
+            const processedItem = findVisibleItem(focusedItemInfo.index);
+            const grouped = isProccessedItemGroup(processedItem);
+
+            if (grouped) {
+                if (vertical) {
+                    if (ObjectUtils.isNotEmpty(activeItemState) && activeItemState.key === processedItem.key) {
+                        setFocusedItemInfo({ index: -1, key: '', parentKey: activeItemState.key });
+                    } else {
+                        const processedItem = findVisibleItem(focusedItemInfo.index);
+                        const grouped = isProccessedItemGroup(processedItem);
+
+                        if (grouped) {
+                            onItemChange({ originalEvent: event, processedItem });
+                            setFocusedItemInfo({ index: -1, key: processedItem.key, parentKey: processedItem.parentKey });
+                            searchValue.current = '';
+                        }
+                    }
+                }
+
+                setTimeout(() => setFocusTrigger(true), 0);
+            } else {
+                const columnIndex = processedItem.columnIndex + 1;
+                const itemIndex = visibleItems.findIndex((item) => item.columnIndex === columnIndex);
+
+                itemIndex !== -1 && changeFocusedItemInfo(itemIndex);
+            }
+        };
+
+        const onHomeKey = (event) => {
+            changeFocusedItemInfo(findFirstItemIndex());
+            event.preventDefault();
+        };
+
+        const onEndKey = (event) => {
+            changeFocusedItemInfo(findLastItemIndex());
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const element = DomHandler.findSingle(menubarRef.current, `li[id="${focusedItemId}"]`);
+                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+
+                anchorElement ? anchorElement.click() : element && element.click();
+            }
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event) => {
+            onEnterKey(event);
+        };
+
+        const onEscapeKey = (event) => {
+            if (ObjectUtils.isNotEmpty(activeItemState)) {
+                setFocusedItemInfo({ index: activeItemState.index, key: activeItemState.key });
+                setActiveItemState(null);
+            }
+
+            event.preventDefault();
+        };
+
+        const onTabKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const processedItem = findVisibleItem(focusedItemInfo.index);
+                const grouped = isProccessedItemGroup(processedItem);
+
+                !grouped && onItemChange({ originalEvent: event, processedItem });
+            }
+
+            hide();
+        };
+
+        const isItemMatched = (processedItem) => {
+            const label = getProccessedItemLabel(processedItem);
+
+            return isValidItem(processedItem) && label && label.toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
+        };
+
+        const isValidItem = (processedItem) => {
+            return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
+        };
+
+        const isValidSelectedItem = (processedItem) => {
+            return isValidItem(processedItem) && isSelected(processedItem);
+        };
+
+        const isSelected = (processedItem) => {
+            return ObjectUtils.isNotEmpty(activeItemState) ? activeItemState.key === processedItem.key : false;
+        };
+
+        const findFirstItemIndex = () => {
+            return visibleItems.findIndex((processedItem) => isValidItem(processedItem));
+        };
+
+        const findLastItemIndex = () => {
+            return ObjectUtils.findLastIndex(visibleItems, (processedItem) => isValidItem(processedItem));
+        };
+
+        const findNextItemIndex = (index) => {
+            const matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex((processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
+        };
+
+        const findPrevItemIndex = (index) => {
+            const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), (processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex : index;
+        };
+
+        const findSelectedItemIndex = () => {
+            return visibleItems && visibleItems.findIndex((processedItem) => isValidSelectedItem(processedItem));
+        };
+
+        const findFirstFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex < 0 ? findFirstItemIndex() : selectedIndex;
+        };
+
+        const findLastFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex < 0 ? findLastItemIndex() : selectedIndex;
+        };
+
+        const findVisibleItem = (index) => {
+            return ObjectUtils.isNotEmpty(visibleItems) ? visibleItems[index] : null;
+        };
+
+        const getProccessedItemLabel = (processedItem) => {
+            return processedItem && processedItem.item ? getItemLabel(processedItem) : undefined;
+        };
+
+        const searchItems = (event, char) => {
+            searchValue.current = (searchValue.current || '') + char;
+            let itemIndex = -1;
+            let matched = false;
+
+            if (focusedItemInfo.index !== -1) {
+                itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem));
+                itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem)) : itemIndex + focusedItemInfo.index;
+            } else {
+                itemIndex = visibleItems.findIndex((processedItem) => isItemMatched(processedItem));
+            }
+
+            if (itemIndex !== -1) {
+                matched = true;
+            }
+
+            if (itemIndex === -1 && focusedItemInfo.index === -1) {
+                itemIndex = findFirstFocusedItemIndex();
+            }
+
+            if (itemIndex !== -1) {
+                changeFocusedItemInfo(itemIndex);
+            }
+
+            if (searchTimeout) {
+                clearTimeout(searchTimeout);
+            }
+
+            searchTimeout.current = setTimeout(() => {
+                searchValue.current = '';
+                searchTimeout.current = null;
+            }, 500);
+
+            return matched;
+        };
+
+        const changeFocusedItemInfo = (index) => {
+            const processedItem = findVisibleItem(index);
+            const key = ObjectUtils.isNotEmpty(processedItem) ? processedItem.key : '';
+
+            setFocusedItemInfo({ ...focusedItemInfo, index, key: key });
+            scrollInView();
+        };
+
+        const scrollInView = (index = -1) => {
+            const id = index !== -1 ? `${idState}_${index}` : focusedItemId;
+            const element = DomHandler.findSingle(menubarRef.current, `li[id="${id}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        };
+
+        const getItemId = (processedItem) => {
+            return `${idState}_${processedItem.key}`;
+        };
+
+        const getItemProp = (processedItem, name, params) => {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
+        };
+
+        const getItemLabel = (processedItem) => {
+            return getItemProp(processedItem, 'label');
+        };
+
+        const isItemActive = (processedItem) => {
+            return ObjectUtils.isNotEmpty(activeItemState) ? activeItemState.key === processedItem.key : false;
+        };
+
+        const isItemVisible = (processedItem) => {
+            return getItemProp(processedItem, 'visible') !== false;
+        };
+
+        const isItemDisabled = (processedItem) => {
+            return getItemProp(processedItem, 'disabled');
+        };
+
+        const isItemFocused = (processedItem) => {
+            return focusedItemId === getItemId(processedItem);
+        };
+
+        const isItemGroup = (processedItem) => {
+            return ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const isItemSeparator = (item) => {
+            return getItemProp(item, 'separator');
+        };
+
+        const isProccessedItemGroup = (processedItem) => {
+            return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const getAriaSetSize = () => {
+            return props.model.filter((processedItem) => isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')).length;
+        };
+
+        const getAriaPosInset = (index) => {
+            return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1;
+        };
+
+        const createProcessedItems = (items, level = 0, parent = {}, parentKey = '', columnIndex) => {
+            if (!items) return [];
+
+            // #6415 if passed a single array[] instead of a matrix [][]
+            if (!Array.isArray(items)) {
+                items = [items];
+            }
+
+            return items.map((item, index) => {
+                const key = `${parentKey !== '' ? parentKey + '_' : ''}${columnIndex !== undefined ? columnIndex + '_' : ''}${index}`;
+                const newItem = {
+                    item,
+                    index,
+                    level,
+                    key,
+                    parent,
+                    parentKey,
+                    columnIndex: columnIndex !== undefined ? columnIndex : parent && parent.columnIndex !== undefined ? parent.columnIndex : index
+                };
+
+                newItem.items = level === 0 && item.items && item.items.length > 0 ? item.items.map((_items, _index) => createProcessedItems(_items, level + 1, newItem, key, _index)) : createProcessedItems(item.items, level + 1, newItem, key);
+
+                return newItem;
+            });
+        };
+
+        const createSeparator = (index) => {
+            const key = idState + '_separator__' + index;
+
+            const separatorProps = mergeProps(
+                {
+                    id: key,
+                    className: cx('separator'),
+                    role: 'separator'
+                },
+                ptm('separator')
+            );
+
+            return <li {...separatorProps} key={key} />;
+        };
+
+        const createSubmenuIcon = (item) => {
+            if (item.items) {
+                const submenuIconProps = mergeProps(
+                    {
+                        className: cx('submenuIcon')
+                    },
+                    ptm('submenuIcon')
+                );
+
+                const icon = vertical ? props.submenuIcon || <AngleRightIcon {...submenuIconProps} /> : props.submenuIcon || <AngleDownIcon {...submenuIconProps} />;
+                const submenuIcon = IconUtils.getJSXIcon(icon, { ...submenuIconProps }, { props });
+
+                return submenuIcon;
+            }
+
+            return null;
+        };
+
+        const createSubmenuItem = (processedItem, index) => {
+            const item = processedItem.item;
+
+            if (item.visible === false) {
+                return null;
+            }
+
+            if (item.separator) {
+                return createSeparator(index);
+            }
+
+            const key = getItemId(processedItem);
+            const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
+            const iconProps = mergeProps(
+                {
+                    className: classNames(item.icon, cx('icon'))
+                },
+                ptm('icon')
+            );
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+            const iconClassName = classNames(item.icon, 'p-menuitem-icon');
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: cx('action', { item }),
+                    target: item.target,
+                    tabIndex: '-1'
+                },
+                getPTOptions(processedItem, 'action', index)
+            );
+
+            const isFocused = isItemFocused(processedItem);
+            const isDisabled = isItemDisabled(processedItem);
+            const isGroup = isItemGroup(processedItem);
+            const isActive = isItemActive(processedItem);
+
+            const submenuItemProps = mergeProps(
+                {
+                    id: key,
+                    'aria-label': getItemLabel(processedItem),
+                    'aria-disabled': isDisabled,
+                    'aria-haspopup': isGroup ? 'menu' : undefined,
+                    'aria-level': '2',
+                    'aria-expanded': isGroup ? isActive : undefined,
+                    'aria-setsize': getAriaSetSize(),
+                    'aria-posinset': getAriaPosInset(index),
+                    'data-p-highlight': isActive,
+                    'data-p-disabled': isDisabled,
+                    'data-p-focused': isFocused,
+                    className: classNames(item.className, cx('submenuItem', { focused: isFocused, disabled: isDisabled, active: isActive })),
+                    style: item.style,
+                    role: 'menuitem'
+                },
+                getPTOptions(processedItem, 'submenuItem', index)
+            );
+
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onLeafClick({ originalEvent: event, processedItem: processedItem }),
+                    className: cx('content')
+                },
+                getPTOptions(processedItem, 'content', index)
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    {label}
+                    <Ripple />
+                </a>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    className: linkClassName,
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName,
+                    element: content,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            return (
+                <li {...submenuItemProps} key={key}>
+                    <div {...contentProps}>{content}</div>
+                </li>
+            );
+        };
+
+        const createSubmenu = (submenu, index) => {
+            if (!isItemVisible(submenu)) {
+                return null;
+            }
+
+            const items = submenu.items.map(createSubmenuItem);
+
+            const key = submenu.id || idState + '_sub_' + index;
+            const label = getItemLabel(submenu);
+            const isDisabled = isItemDisabled(submenu);
+
+            const submenuHeaderProps = mergeProps(
+                {
+                    id: key,
+                    className: classNames(submenu.className, cx('submenuHeader', { disabled: isDisabled })),
+                    style: submenu.style,
+                    role: 'presentation',
+                    'data-p-disabled': isDisabled
+                },
+                ptm('submenuHeader')
+            );
+
+            return (
+                <React.Fragment key={key}>
+                    <li {...submenuHeaderProps}>{label}</li>
+                    {items}
+                </React.Fragment>
+            );
+        };
+
+        const createSubmenus = (column, index) => {
+            return column.map(createSubmenu);
+        };
+
+        const createColumn = (processedItem, processedColumn, index) => {
+            const category = processedItem.item;
+            const key = category.label + '_column_' + index;
+            const submenus = createSubmenus(processedColumn);
+
+            const columnProps = mergeProps(
+                {
+                    className: cx('column', { category })
+                },
+                ptm('column')
+            );
+
+            const display = activeItemState && activeItemState.item === category ? 'block' : 'none';
+
+            const submenuProps = mergeProps(
+                {
+                    role: 'menu',
+                    tabIndex: props.disabled ? null : props.tabIndex || '0',
+                    className: cx('submenu'),
+                    style: { display: display }
+                },
+                ptm('submenu')
+            );
+
+            return (
+                <div {...columnProps} key={key}>
+                    <ul {...submenuProps}>{submenus}</ul>
+                </div>
+            );
+        };
+
+        const createColumns = (category) => {
+            if (category.items) {
+                return category.items.map((column, index) => {
+                    return <React.Fragment key={index}>{createColumn(category, column, index)}</React.Fragment>;
+                });
+            }
+
+            return null;
+        };
+
+        const createCategoryPanel = (processedItem) => {
+            const category = processedItem.item;
+
+            if (category.items) {
+                const columns = createColumns(processedItem);
+
+                const panelProps = mergeProps(
+                    {
+                        className: cx('panel')
+                    },
+                    ptm('panel')
+                );
+
+                const gridProps = mergeProps(
+                    {
+                        className: cx('grid')
+                    },
+                    ptm('grid')
+                );
+
+                return (
+                    <div {...panelProps}>
+                        <div {...gridProps}>{columns}</div>
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+                const selector = `${attributeSelectorState}`;
+
+                const innerHTML = `
+                    @media screen and (max-width: ${props.breakpoint}) {
+                        .p-megamenu[${selector}] > .p-megamenu-root-list .p-menuitem-active .p-megamenu-panel {
+                            position: relative;
+                            left: 0;
+                            box-shadow: none;
+                            border-radius: 0;
+                            background: inherit;
+                        }
+
+                        .p-megamenu[${selector}] {
+                            width: 100%;
+                            position: relative;
+                            padding: 0.5rem;
+                        }
+
+                        .p-megamenu[${selector}] .p-megamenu-grid {
+                            flex-wrap: wrap;
+                        }
+
+                        .p-megamenu[${selector}] .p-megamenu-button {
+                            display: flex;
+                        }
+
+                        .p-megamenu[${selector}] .p-megamenu-root-list {
+                            display: none;
+                        }
+
+                        .p-megamenu[${selector}] div[class*="p-megamenu-col-"] {
+                            width: 100%;
+                        }
+
+                        .p-megamenu[${selector}].p-megamenu-mobile-active .p-megamenu-root-list {
+                            left: 0;
+                            top: 100%;
+                            z-index: 1;
+                            width: 100%;
+                            display: flex;
+                            padding: 0.5rem 0;
+                            position: absolute;
+                            flex-direction: column;
+                        }
+
+                        .p-megamenu[${selector}] .p-menuitem  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
+                            margin-left: auto;
+                        }
+
+                        .p-megamenu[${selector}] .p-submenu-list .p-menuitem-content .p-menuitem-link {
+                            padding-left: 2.25rem;
+                        }
+
+                        ${
+                            horizontal
+                                ? `
+                                    .p-megamenu[${selector}] .p-menuitem-active  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
+                                        transform: rotate(-180deg);
+                                    }
+                            `
+                                : ''
+                        }
+
+                        ${
+                            vertical
+                                ? `
+                                    .p-megamenu[${selector}] .p-menuitem  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
+                                        transform: rotate(90deg);
+                                    }
+
+                                    .p-megamenu[${selector}] .p-menuitem-active  > .p-menuitem-content >  .p-menuitem-link > .p-submenu-icon {
+                                        transform: rotate(-90deg);
+                                    }
+                            `
+                                : ''
+                        }
+                    }
+                `;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
+        const createCategory = (processedItem, index) => {
+            const category = processedItem.item;
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                getPTOptions(processedItem, 'icon', index)
+            );
+            const icon = IconUtils.getJSXIcon(category.icon, { ...iconProps }, { props });
+
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getPTOptions(processedItem, 'label', index)
+            );
+            const label = category.label && <span {...labelProps}>{category.label}</span>;
+            const submenuIcon = createSubmenuIcon(category);
+            const panel = createCategoryPanel(processedItem);
+
+            const headerActionProps = mergeProps(
+                {
+                    href: category.url || '#',
+                    className: cx('action', { item: category }),
+                    target: category.target,
+                    onFocus: (event) => event.stopPropagation(),
+                    tabIndex: '-1',
+                    'aria-hidden': true
+                },
+                getPTOptions(processedItem, 'action', index)
+            );
+
+            const itemContent = category.template ? (
+                ObjectUtils.getJSXElement(category.template, category, headerActionProps)
+            ) : (
+                <a {...headerActionProps}>
+                    {icon}
+                    {label}
+                    {submenuIcon}
+                    <Ripple />
+                </a>
+            );
+
+            const key = getItemId(processedItem);
+            const isFocused = isItemFocused(processedItem);
+            const isDisabled = isItemDisabled(processedItem);
+            const menuItemProps = mergeProps(
+                {
+                    id: key,
+                    className: classNames(category.className, cx('menuitem', { category, activeItemState, focused: isFocused, disabled: isDisabled })),
+                    'aria-label': getItemLabel(category),
+                    'aria-level': '1',
+                    'aria-setsize': getAriaSetSize(),
+                    'aria-posinset': getAriaPosInset(index),
+                    'aria-expanded': isItemGroup(processedItem) ? isItemActive(processedItem) : undefined,
+                    'aria-haspopup': isItemGroup(processedItem) ? 'menu' : undefined,
+                    'aria-disabled': isItemDisabled(processedItem),
+                    'data-p-highlight': isItemActive(category),
+                    'data-p-disabled': isDisabled,
+                    'data-p-focused': isFocused,
+                    style: category.style,
+                    role: 'menuitem',
+                    'data-p-disabled': category.disabled || false
+                },
+                getPTOptions(processedItem, 'menuitem', index)
+            );
+
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onCategoryClick({ originalEvent: event, processedItem: processedItem }),
+                    onMouseEnter: (e) => onCategoryMouseEnter({ originalEvent: e, processedItem: processedItem }),
+                    className: cx('content')
+                },
+                getPTOptions(processedItem, 'content', index)
+            );
+
+            return (
+                <li {...menuItemProps} key={key}>
+                    <div {...contentProps}>{itemContent}</div>
+                    {panel}
+                </li>
+            );
+        };
+
+        const createMenu = () => {
+            const menuProps = mergeProps(
+                {
+                    ref: menubarRef,
+                    tabIndex: props.disabled ? null : props.tabIndex || '0',
+                    className: cx('menu'),
+                    onFocus: onFocus,
+                    onBlur: onBlur,
+                    onKeyDown: onKeyDown,
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
+                    'aria-orientation': vertical ? 'vertical' : 'horizontal',
+                    'aria-activedescendant': focused ? focusedItemId : null,
+                    id: idState + '_list',
+                    role: 'menubar'
+                },
+                ptm('menu')
+            );
+
+            if (processedItems) {
+                return (
+                    <ul {...menuProps}>
+                        {processedItems.map((item, index) => {
+                            return <React.Fragment key={index}>{createCategory(item, index, true)}</React.Fragment>;
+                        })}
+                    </ul>
+                );
+            }
+
+            return null;
+        };
+
+        const createStartContent = () => {
+            const startProps = mergeProps(
+                {
+                    className: cx('start')
+                },
+                ptm('start')
+            );
+
+            if (props.start) {
+                const start = ObjectUtils.getJSXElement(props.start, props);
+
+                return <div {...startProps}>{start}</div>;
+            }
+
+            return null;
+        };
+
+        const createEndContent = () => {
+            const endProps = mergeProps(
+                {
+                    className: cx('end')
+                },
+                ptm('end')
+            );
+
+            if (props.end) {
+                const end = ObjectUtils.getJSXElement(props.end, props);
+
+                return <div {...endProps}>{end}</div>;
+            }
+
+            return null;
+        };
+
+        const createMenuButton = () => {
+            if (props.model && props.model.length < 1) {
+                return null;
+            }
+
+            const menuButtonProps = mergeProps(
+                {
+                    className: cx('menuButton'),
+                    href: '#',
+                    role: 'button',
+                    'aria-haspopup': props.model && props.model.length > 0 ? true : false,
+                    'aria-expanded': mobileActiveState,
+                    'aria-controls': idState,
+                    'aria-label': ariaLabel('navigation'),
+                    tabIndex: 0,
+                    onClick: (e) => toggle(e)
+                },
+                ptm('menuButton')
+            );
+
+            const menuButtonIconProps = mergeProps(ptm('menuButtonIcon'));
+
+            const icon = props.menuIcon || <BarsIcon {...menuButtonIconProps} />;
+            const menuIcon = IconUtils.getJSXIcon(icon, { ...menuButtonIconProps }, { props });
+            /* eslint-disable */
+            const button = (
+                <a ref={menuButtonRef} {...menuButtonProps}>
+                    {menuIcon}
+                </a>
+            );
+            /* eslint-enable */
+
+            return button;
+        };
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root', { mobileActiveState })),
+                id: idState,
+                style: props.style
+            },
+            MegaMenuBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const menu = createMenu();
+        const start = createStartContent();
+        const end = createEndContent();
+        const menuButton = createMenuButton();
+
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {start}
+                {menuButton}
+                {menu}
+                {end}
+            </div>
+        );
+    })
+);
+
+MegaMenu.displayName = 'MegaMenu';
diff --git a/components/lib/megamenu/MegaMenuBase.js b/components/lib/megamenu/MegaMenuBase.js
new file mode 100644
index 0000000000..924fb4f4b5
--- /dev/null
+++ b/components/lib/megamenu/MegaMenuBase.js
@@ -0,0 +1,213 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, mobileActiveState }) =>
+        classNames('p-megamenu p-component', {
+            'p-megamenu-horizontal': props.orientation === 'horizontal',
+            'p-megamenu-vertical': props.orientation === 'vertical',
+            'p-megamenu-mobile-active': mobileActiveState
+        }),
+    content: 'p-menuitem-content',
+    separator: 'p-menuitem-separator',
+    submenuIcon: 'p-submenu-icon',
+    action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
+    submenuItem: ({ focused, disabled, active }) =>
+        classNames('p-menuitem', {
+            'p-menuitem-active': active,
+            'p-focus': focused,
+            'p-disabled': disabled
+        }),
+    submenuHeader: ({ disabled }) =>
+        classNames('p-megamenu-submenu-header p-submenu-header', {
+            'p-disabled': disabled
+        }),
+    submenu: 'p-submenu-list p-megamenu-submenu',
+    panel: 'p-megamenu-panel',
+    grid: 'p-megamenu-grid',
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    column: ({ category }) => {
+        const length = category.items ? category.items.length : 0;
+        let columnClass;
+
+        switch (length) {
+            case 2:
+                columnClass = 'p-megamenu-col-6';
+                break;
+
+            case 3:
+                columnClass = 'p-megamenu-col-4';
+                break;
+
+            case 4:
+                columnClass = 'p-megamenu-col-3';
+                break;
+
+            case 6:
+                columnClass = 'p-megamenu-col-2';
+                break;
+
+            default:
+                columnClass = 'p-megamenu-col-12';
+                break;
+        }
+
+        return columnClass;
+    },
+    menuButton: 'p-megamenu-button',
+    menuitem: ({ category, activeItemState, focused, disabled }) => classNames('p-menuitem', { 'p-menuitem-active p-highlight': activeItemState && activeItemState.item === category, 'p-focus': focused, 'p-disabled': disabled }),
+    menubar: 'p-megamenu-root-list',
+    menu: 'p-megamenu-root-list',
+    start: 'p-megamenu-start',
+    end: 'p-megamenu-end'
+};
+
+const styles = `
+@layer primereact {
+    .p-megamenu {
+        display: flex;
+    }
+
+    .p-megamenu-root-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-megamenu-root-list > .p-menuitem {
+        position: relative;
+    }
+
+    .p-megamenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-megamenu .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-megamenu-panel {
+        display: none;
+        position: absolute;
+        width: auto;
+        z-index: 1;
+    }
+
+    .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+        display: block;
+    }
+
+    .p-megamenu-submenu {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    /* Horizontal */
+    .p-megamenu-horizontal {
+        align-items: center;
+    }
+
+    .p-megamenu-horizontal .p-megamenu-root-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-megamenu-horizontal .p-megamenu-custom,
+    .p-megamenu-horizontal .p-megamenu-end {
+        margin-left: auto;
+        align-self: center;
+    }
+
+    /* Vertical */
+    .p-megamenu-vertical {
+        flex-direction: column;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list {
+        flex-direction: column;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
+        left: 100%;
+        top: 0;
+    }
+
+    .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link  > .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-megamenu-grid {
+        display: flex;
+    }
+
+    .p-megamenu-col-2,
+    .p-megamenu-col-3,
+    .p-megamenu-col-4,
+    .p-megamenu-col-6,
+    .p-megamenu-col-12 {
+        flex: 0 0 auto;
+        padding: 0.5rem;
+    }
+
+    .p-megamenu-col-2 {
+        width: 16.6667%;
+    }
+
+    .p-megamenu-col-3 {
+        width: 25%;
+    }
+
+    .p-megamenu-col-4 {
+        width: 33.3333%;
+    }
+
+    .p-megamenu-col-6 {
+        width: 50%;
+    }
+
+    .p-megamenu-col-12 {
+        width: 100%;
+    }
+
+    .p-megamenu-button {
+        display: none;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+    }
+}
+`;
+
+export const MegaMenuBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'MegaMenu',
+        id: null,
+        model: null,
+        style: null,
+        className: null,
+        orientation: 'horizontal',
+        breakpoint: undefined,
+        scrollHeight: '400px',
+        start: null,
+        submenuIcon: null,
+        onFocus: null,
+        onBlur: null,
+        tabIndex: 0,
+        menuIcon: null,
+        end: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/megamenu/megamenu.d.ts b/components/lib/megamenu/megamenu.d.ts
new file mode 100644
index 0000000000..b6fb61a9a7
--- /dev/null
+++ b/components/lib/megamenu/megamenu.d.ts
@@ -0,0 +1,256 @@
+/**
+ *
+ * MegaMenu is navigation component that displays submenus together.
+ *
+ * [Live Demo](https://www.primereact.org/megamenu/)
+ *
+ * @module megamenu
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type MegaMenuPassThroughType<T> = PassThroughType<T, MegaMenuPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MegaMenuPassThroughMethodOptions {
+    props: MegaMenuProps;
+    state: MegaMenuState;
+    context: MegaMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MegaMenuProps.pt}
+ */
+export interface MegaMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the menu button's DOM element.
+     */
+    menuButton?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the menu icon's DOM element.
+     */
+    menuButtonIcon?: MegaMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headerAction?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MegaMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: MegaMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the grid's DOM element.
+     */
+    grid?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the column's DOM element.
+     */
+    column?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the submenu's DOM element.
+     */
+    submenu?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the submenu items's DOM element.
+     */
+    submenuItem?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the submenu header's DOM element.
+     */
+    submenuHeader?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MegaMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface MegaMenuFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in MegaMenu component.
+ */
+export interface MegaMenuState {
+    /**
+     * Current mobileActive state as a boolean.
+     * @defaultValue false
+     */
+    mobileActive: boolean;
+    /**
+     * Current attributeSelector visible state as a string.
+     */
+    attributeSelector: boolean;
+    /**
+     * Active item path.
+     * @type {MenuItem}
+     */
+    activeItem: MenuItem;
+}
+
+/**
+ * Defines current options in MegaMenu component.
+ */
+export interface MegaMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Defines valid properties in MegaMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface MegaMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Defines the orientation, valid values are horizontal and vertical.
+     * @defaultValue horizontal
+     */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * The template of starting element.
+     */
+    start?: React.ReactNode | ((props: MegaMenuProps) => React.ReactNode);
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Maximum height of the options panel on responsive mode.
+     * @defaultValue 400px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * Icon of the submenu.
+     */
+    submenuIcon?: IconType<MegaMenuProps> | undefined;
+    /**
+     * Icon to display in the horizontal menu.
+     */
+    menuIcon?: IconType<MegaMenuProps> | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+    /**
+     * The template of trailing element
+     */
+    end?: React.ReactNode | ((props: MegaMenuProps) => React.ReactNode);
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MegaMenuPassThroughOptions}
+     */
+    pt?: MegaMenuPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - MegaMenu**
+ *
+ * _MegaMenu is navigation component that displays submenus together._
+ *
+ * [Live Demo](https://www.primereact.org/megamenu/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class MegaMenu extends React.Component<MegaMenuProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/megamenu/package.json b/components/lib/megamenu/package.json
new file mode 100644
index 0000000000..39051af6de
--- /dev/null
+++ b/components/lib/megamenu/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./megamenu.cjs.js",
+    "module": "./megamenu.esm.js",
+    "unpkg": "./megamenu.min.js",
+    "types": "./megamenu.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/mention/Mention.js b/components/lib/mention/Mention.js
new file mode 100644
index 0000000000..94699f5f98
--- /dev/null
+++ b/components/lib/mention/Mention.js
@@ -0,0 +1,580 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { InputTextarea } from '../inputtextarea/InputTextarea';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { MentionBase } from './MentionBase';
+
+export const Mention = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MentionBase.getProps(inProps, context);
+
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [searchingState, setSearchingState] = React.useState(false);
+        const [triggerState, setTriggerState] = React.useState(null);
+        const [highlightState, setHighlightState] = React.useState([]);
+
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const listRef = React.useRef(null);
+        const timeout = React.useRef(null);
+        const metaData = {
+            props,
+            state: {
+                overlayVisible: overlayVisibleState,
+                focused: focusedState,
+                searching: searchingState,
+                trigger: triggerState
+            }
+        };
+        const { ptm, cx, sx, isUnstyled } = MentionBase.setMetaData(metaData);
+
+        useHandleStyle(MentionBase.css.styles, isUnstyled, { name: 'mention' });
+
+        const getPTOptions = (item, suggestion, options) => {
+            return ptm(suggestion, {
+                context: {
+                    trigger: triggerState ? triggerState.key : ''
+                },
+                state: {
+                    ...options
+                }
+            });
+        };
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { valid, type }) => {
+                if (valid) {
+                    if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const show = () => {
+            setOverlayVisibleState(true);
+        };
+
+        const hide = () => {
+            setOverlayVisibleState(false);
+            setSearchingState(false);
+            setTriggerState(null);
+        };
+
+        const onOverlayEnter = () => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            alignOverlay();
+        };
+
+        const onOverlayEntering = () => {
+            if (props.autoHighlight && props.suggestions && props.suggestions.length) {
+                setHighlightState((prevState) => {
+                    const newState = [...prevState];
+
+                    newState[0] = true;
+
+                    return newState;
+                });
+            }
+        };
+
+        const onOverlayEntered = () => {
+            bindOverlayListener();
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const alignOverlay = () => {
+            if (triggerState) {
+                const { key, index } = triggerState;
+                const value = inputRef.current.value;
+                const position = DomHandler.getCursorOffset(inputRef.current, value.substring(0, index - 1), value.substring(index), key);
+
+                overlayRef.current.style.transformOrigin = 'top';
+                overlayRef.current.style.left = `calc(${position.left}px + 1rem)`;
+                overlayRef.current.style.top = `calc(${position.top}px + 1.2rem)`;
+            }
+        };
+
+        const onPanelClick = (event) => {
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: elementRef.current
+            });
+        };
+
+        const getTrigger = (value, key, start) => {
+            if (!triggerState) {
+                const triggerKey = Array.isArray(props.trigger) ? props.trigger.find((t) => t === key) : props.trigger === key ? props.trigger : null;
+
+                if (triggerKey) {
+                    return {
+                        key: triggerKey,
+                        index: start
+                    };
+                }
+
+                const latestSpaceIndex = value.substring(0, start).lastIndexOf(' ');
+                const latestTrigger = getLatestTrigger(value, start);
+
+                if (latestTrigger.index > latestSpaceIndex) {
+                    return latestTrigger;
+                }
+            }
+
+            return triggerState;
+        };
+
+        const getLatestTrigger = (value, start) => {
+            if (Array.isArray(props.trigger)) {
+                let latestTrigger = {};
+
+                props.trigger.forEach((t) => {
+                    const index = value.substring(0, start).lastIndexOf(t);
+
+                    if (index !== -1 && (index > latestTrigger.index || !latestTrigger.index)) {
+                        latestTrigger = {
+                            key: t,
+                            index: index !== -1 ? index + 1 : -1
+                        };
+                    }
+                });
+
+                return latestTrigger;
+            }
+
+            const index = value.substring(0, start).lastIndexOf(props.trigger);
+
+            return {
+                key: props.trigger,
+                index: index !== -1 ? index + 1 : -1
+            };
+        };
+
+        const onSearch = (event) => {
+            if (timeout.current) {
+                clearTimeout(timeout.current);
+            }
+
+            const { value, selectionStart } = event.target;
+            const key = value.substring(selectionStart - 1, selectionStart);
+
+            if (key === ' ') {
+                hide();
+
+                return;
+            }
+
+            const currentTrigger = getTrigger(value, key, selectionStart);
+
+            if (currentTrigger && currentTrigger.index > -1) {
+                const query = value.substring(currentTrigger.index, selectionStart);
+
+                timeout.current = setTimeout(() => {
+                    search(event, query, currentTrigger);
+                }, props.delay);
+            }
+        };
+
+        const search = (event, query, trigger) => {
+            if (props.onSearch) {
+                setSearchingState(true);
+                setTriggerState(trigger);
+                props.onSearch({
+                    originalEvent: event,
+                    trigger: trigger.key,
+                    query
+                });
+            }
+        };
+
+        const selectItem = (event, suggestion) => {
+            const input = inputRef.current;
+            const value = input.value;
+            const selectionStart = input.selectionStart;
+
+            const spaceIndex = value.indexOf(' ', triggerState.index);
+            const currentText = value.substring(triggerState.index, spaceIndex > -1 ? spaceIndex : selectionStart);
+            const selectedText = formatValue(suggestion).replace(/\s+/g, '');
+
+            if (currentText.trim() !== selectedText) {
+                const prevText = value.substring(0, triggerState.index);
+                const nextText = value.substring(spaceIndex > -1 ? selectionStart : triggerState.index + currentText.length);
+
+                inputRef.current.value = nextText[0] === ' ' ? `${prevText}${selectedText}${nextText}` : `${prevText}${selectedText} ${nextText}`;
+
+                event.target = inputRef.current;
+                props.onChange && props.onChange(event);
+            }
+
+            const cursorStart = triggerState.index + selectedText.length + 1;
+
+            inputRef.current.setSelectionRange(cursorStart, cursorStart);
+
+            hide();
+
+            props.onSelect && props.onSelect({ originalEvent: event, suggestion });
+        };
+
+        const formatValue = (value) => {
+            if (value) {
+                const field = Array.isArray(props.field) ? props.field[props.trigger.findIndex((f) => f === triggerState.key)] : props.field;
+
+                return field ? ObjectUtils.resolveFieldData(value, field) : value;
+            }
+
+            return '';
+        };
+
+        const onItemClick = (event, suggestion) => {
+            DomHandler.focus(inputRef.current);
+            selectItem(event, suggestion);
+        };
+
+        const onFocus = (event) => {
+            setFocusedState(true);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocusedState(false);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onInput = (event) => {
+            props.onInput && props.onInput(event);
+            const isFilled = event.target.value.length > 0;
+
+            if (isUnstyled()) {
+                DomHandler.setAttributes(elementRef.current, {
+                    'data-p-inputwrapper-filled': isFilled
+                });
+            } else if (isFilled) {
+                DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled');
+            } else {
+                DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
+            }
+        };
+
+        const onKeyUp = (event) => {
+            if (event.which === 37 || event.which === 39) {
+                onSearch(event);
+            }
+        };
+
+        const onChange = (event) => {
+            props.onChange && props.onChange(event);
+
+            onSearch(event);
+        };
+
+        const onKeyDown = (event) => {
+            if (overlayVisibleState) {
+                let highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+
+                switch (event.which) {
+                    //down
+                    case 40:
+                        if (highlightItem) {
+                            let nextElement = highlightItem.nextElementSibling;
+
+                            if (nextElement) {
+                                const nextElementIndex = DomHandler.index(nextElement);
+                                const highlightItemIndex = DomHandler.index(highlightItem);
+
+                                setHighlightState((prevState) => {
+                                    const newState = [...prevState];
+
+                                    newState[nextElementIndex] = true;
+                                    newState[highlightItemIndex] = false;
+
+                                    return newState;
+                                });
+
+                                DomHandler.scrollInView(overlayRef.current, nextElement);
+                            }
+                        } else {
+                            highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
+
+                            if (highlightItem) {
+                                const highlightItemIndex = DomHandler.index(highlightItem);
+
+                                setHighlightState((prevState) => {
+                                    const newState = [...prevState];
+
+                                    newState[highlightItemIndex] = true;
+
+                                    return newState;
+                                });
+                            }
+                        }
+
+                        event.preventDefault();
+                        break;
+
+                    //up
+                    case 38:
+                        if (highlightItem) {
+                            let previousElement = highlightItem.previousElementSibling;
+
+                            if (previousElement) {
+                                const previousElementIndex = DomHandler.index(previousElement);
+                                const highlightItemIndex = DomHandler.index(highlightItem);
+
+                                setHighlightState((prevState) => {
+                                    const newState = [...prevState];
+
+                                    newState[previousElementIndex] = true;
+                                    newState[highlightItemIndex] = false;
+
+                                    return newState;
+                                });
+
+                                DomHandler.scrollInView(overlayRef.current, previousElement);
+                            }
+                        }
+
+                        event.preventDefault();
+                        break;
+
+                    //backspace
+                    case 8:
+                        const { value, selectionStart } = event.target;
+                        const key = value.substring(selectionStart - 1, selectionStart);
+
+                        if (key === triggerState.key) {
+                            hide();
+                        }
+
+                        break;
+
+                    //enter
+                    case 13:
+                        if (highlightItem) {
+                            selectItem(event, props.suggestions[DomHandler.index(highlightItem)]);
+                        }
+
+                        event.preventDefault();
+                        break;
+
+                    //escape
+                    case 27:
+                        hide();
+                        event.preventDefault();
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+        };
+
+        const currentValue = inputRef.current && inputRef.current.value;
+        const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue), [props.value, props.defaultValue, currentValue]);
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useUpdateEffect(() => {
+            const hasSuggestions = props.suggestions && props.suggestions.length;
+
+            if (hasSuggestions) {
+                const newState = props.suggestions.map(() => false);
+
+                setHighlightState(newState);
+            }
+
+            if (searchingState) {
+                hasSuggestions ? show() : hide();
+                overlayVisibleState && alignOverlay();
+                setSearchingState(false);
+            }
+        }, [props.suggestions]);
+
+        useUpdateEffect(() => {
+            const _isUnstyled = isUnstyled();
+            const isInputWrapperFilled = _isUnstyled ? DomHandler.isAttributeEquals(elementRef.current, 'data-p-inputwrapper-filled', true) : DomHandler.hasClass(elementRef.current, 'p-inputwrapper-filled');
+
+            if (!isFilled && isInputWrapperFilled) {
+                _isUnstyled
+                    ? DomHandler.setAttributes(elementRef.current, {
+                          'data-p-inputwrapper-filled': false
+                      })
+                    : DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
+            }
+        }, [isFilled]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        const createItem = (suggestion, index) => {
+            const key = index + '_item';
+            const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, { trigger: triggerState ? triggerState.key : '', index }) : formatValue(suggestion);
+            const isSelected = highlightState[index];
+
+            const itemProps = mergeProps(
+                {
+                    className: cx('item', { isSelected }),
+                    onClick: (e) => onItemClick(e, suggestion),
+                    'data-p-highlight': isSelected
+                },
+                getPTOptions(suggestion, 'item', { selected: isSelected })
+            );
+
+            return (
+                <li {...itemProps} key={key}>
+                    {content}
+                    <Ripple />
+                </li>
+            );
+        };
+
+        const createList = () => {
+            const itemsProps = mergeProps(
+                {
+                    ref: listRef,
+                    className: cx('items')
+                },
+                ptm('items')
+            );
+
+            if (props.suggestions) {
+                const items = props.suggestions.map(createItem);
+
+                return <ul {...itemsProps}>{items}</ul>;
+            }
+
+            return null;
+        };
+
+        const createPanel = () => {
+            const header = ObjectUtils.getJSXElement(props.headerTemplate, props);
+            const footer = ObjectUtils.getJSXElement(props.footerTemplate, props);
+            const list = createList();
+
+            const panelProps = mergeProps(
+                {
+                    ref: overlayRef,
+                    className: cx('panel'),
+                    style: {
+                        maxHeight: props.scrollHeight,
+                        ...props.panelStyle
+                    },
+                    onClick: onPanelClick
+                },
+                ptm('panel')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: overlayVisibleState,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter: onOverlayEnter,
+                    onEntering: onOverlayEntering,
+                    onEntered: onOverlayEntered,
+                    onExit: onOverlayExit,
+                    onExited: onOverlayExited
+                },
+                ptm('transition')
+            );
+
+            const panel = (
+                <CSSTransition nodeRef={overlayRef} {...transitionProps}>
+                    <div {...panelProps}>
+                        {header}
+                        {list}
+                        {footer}
+                    </div>
+                </CSSTransition>
+            );
+
+            return <Portal element={panel} appendTo="self" />;
+        };
+
+        const inputProps = MentionBase.getOtherProps(props);
+        const panel = createPanel();
+
+        const inputMentionProps = mergeProps(
+            {
+                ref: inputRef,
+                id: props.inputId,
+                className: cx('input'),
+                style: props.inputStyle,
+                ...inputProps,
+                unstyled: props.unstyled,
+                variant: props.variant,
+                autoResize: props.autoResize,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown,
+                onInput: onInput,
+                onKeyUp: onKeyUp,
+                onChange: onChange,
+                __parentMetadata: {
+                    parent: metaData
+                }
+            },
+            ptm('input')
+        );
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root', { focusedState, isFilled })),
+                style: props.style
+            },
+            MentionBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                <InputTextarea {...inputMentionProps} />
+                {panel}
+            </div>
+        );
+    })
+);
+
+Mention.displayName = 'Mention';
diff --git a/components/lib/mention/MentionBase.js b/components/lib/mention/MentionBase.js
new file mode 100644
index 0000000000..ae756de142
--- /dev/null
+++ b/components/lib/mention/MentionBase.js
@@ -0,0 +1,101 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    item: ({ isSelected }) =>
+        classNames('p-mention-item', {
+            'p-highlight': isSelected
+        }),
+    items: 'p-mention-items',
+    panel: ({ props }) => classNames('p-mention-panel p-component', props.panelClassName),
+    input: ({ props }) => classNames('p-mention-input', props.inputClassName),
+    root: ({ props, isFilled, focusedState }) =>
+        classNames('p-mention p-component p-inputwrapper', {
+            'p-inputwrapper-filled': isFilled,
+            'p-inputwrapper-focus': focusedState
+        }),
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-mention {
+        display: inline-flex;
+        position: relative;
+    }
+    
+    .p-autocomplete-loader {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+    
+    .p-mention .p-mention-panel {
+        min-width: 100%;
+    }
+    
+    .p-mention-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: auto;
+    }
+    
+    .p-mention-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+    
+    .p-mention-item {
+        cursor: pointer;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .p-fluid .p-mention {
+        display: flex;
+    }
+}
+`;
+
+export const MentionBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Mention',
+        autoHighlight: true,
+        autoResize: false,
+        className: null,
+        delay: 0,
+        field: null,
+        footerTemplate: null,
+        headerTemplate: null,
+        id: null,
+        inputClassName: null,
+        inputId: null,
+        inputRef: null,
+        inputStyle: null,
+        itemTemplate: null,
+        onBlur: null,
+        onChange: null,
+        onFocus: null,
+        onHide: null,
+        onInput: null,
+        onSearch: null,
+        onSelect: null,
+        onShow: null,
+        panelClassName: null,
+        panelStyle: null,
+        scrollHeight: '200px',
+        style: null,
+        suggestions: null,
+        transitionOptions: null,
+        trigger: '@',
+        variant: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/mention/mention.d.ts b/components/lib/mention/mention.d.ts
new file mode 100644
index 0000000000..1a17bafeb4
--- /dev/null
+++ b/components/lib/mention/mention.d.ts
@@ -0,0 +1,336 @@
+/**
+ *
+ * Mention component is used to refer someone or something.
+ *
+ * [Live Demo](https://www.primereact.org/mention/)
+ *
+ * @module mention
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { InputTextarea } from '../inputtextarea';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type MentionPassThroughType<T> = PassThroughType<T, MentionPassThroughMethodOptions>;
+export declare type MentionPassThroughTransitionType = ReactCSSTransitionProps | ((options: MentionPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MentionPassThroughMethodOptions {
+    props: MentionProps;
+    state: MentionState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MentionProps.pt}
+ */
+export interface MentionPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MentionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the InputTextarea component.
+     * @see {@link InputTextareaPassThroughType}
+     */
+    input?: MentionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: MentionPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: MentionPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the items' DOM element.
+     */
+    items?: MentionPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: MentionPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Mention component.
+ */
+export interface MentionState {
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current search state as a boolean.
+     * @defaultValue false
+     */
+    searching: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current trigger state.
+     */
+    trigger: any;
+    /**
+     * For item, this is the state of the item.
+     */
+    selected?: boolean;
+}
+
+/**
+ * Defines current options in Mention component.
+ */
+export interface MentionContext {
+    /**
+     * Current trigger state.
+     */
+    trigger: any;
+}
+
+/**
+ */
+interface MentionItemTemplateOptions {
+    /**
+     * Index of the menu item.
+     */
+    index: number;
+    /**
+     * Triggered the mention item.
+     */
+    trigger: string;
+}
+
+/**
+ * Custom search event
+ * @see {@link MentionProps.onSearch}
+ * @event
+ */
+interface MentionSearchEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Current trigger keyword.
+     */
+    trigger: string;
+    /**
+     * Current query string entered by the user.
+     */
+    query: string;
+}
+
+/**
+ * Custom select event
+ * @see {@link MentionProps.onSelect}
+ * @event
+ */
+interface MentionSelectEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected item
+     */
+    suggestion: any;
+}
+
+/**
+ * Defines valid properties in Mention component. In addition to these, all properties of HTMLTextAreaElement can be used in this component.
+ * @group Properties
+ */
+export interface MentionProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'onSelect' | 'onChange' | 'onInput' | 'onFocus' | 'onBlur' | 'ref' | 'pt'> {
+    /**
+     * When enabled, highlights the first item in the list by default.
+     * @defaultValue true
+     */
+    autoHighlight?: boolean | undefined;
+    /**
+     * When present, height of textarea changes as being typed.
+     */
+    autoResize?: boolean | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Delay between keystrokes to wait before sending a query.
+     * @defaultValue 0
+     */
+    delay?: number | undefined;
+    /**
+     * Field of a suggested object to resolve and display.
+     */
+    field?: string | string[] | undefined;
+    /**
+     * Custom template of footer.
+     */
+    footerTemplate?: React.ReactNode | ((props: MentionProps) => React.ReactNode);
+    /**
+     * Custom template of header.
+     */
+    headerTemplate?: React.ReactNode | ((props: MentionProps) => React.ReactNode);
+    /**
+     * Style class of the input field.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: React.CSSProperties | undefined;
+    /**
+     * Custom template for the items.
+     */
+    itemTemplate?: React.ReactNode | ((suggestion: any, options: MentionItemTemplateOptions) => React.ReactNode);
+    /**
+     * Style class of the overlay panel element.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * Inline style of the overlay panel element.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Maximum height of the suggestions panel.
+     * @defaultValue 200px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * An array of suggestions to display.
+     */
+    suggestions?: any[] | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Set trigger keyword.
+     * @defaultValue "@"
+     */
+    trigger?: string | string[] | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MentionPassThroughOptions}
+     */
+    pt?: MentionPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Callback to invoke when the element loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event Browser event
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when value changes.
+     * @param {React.FormEvent<HTMLInputElement>} event Browser event
+     */
+    onChange?(event: React.FormEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when the element receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event Browser event
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when overlay panel becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Callback to invoke on input event of input field.
+     * @param {React.FormEvent<HTMLInputElement>} event Browser event
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when search.
+     * @param {MentionSearchEvent} event Custom search event
+     */
+    onSearch?(event: MentionSearchEvent): void;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {MentionSelectEvent} event Custom select event
+     */
+    onSelect?(event: MentionSelectEvent): void;
+    /**
+     * Callback to invoke when overlay panel becomes visible.
+     */
+    onShow?(): void;
+}
+
+/**
+ * **PrimeReact - Mention**
+ *
+ * _Mention component is used to refer someone or something._
+ *
+ * [Live Demo](https://www.primereact.org/mention/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Mention extends React.Component<MentionProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Show the mention.
+     */
+    public show(): void;
+    /**
+     * Hide the mention.
+     */
+    public hide(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {InputTextarea | null} Input element
+     */
+    public getInput(): typeof InputTextarea | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+}
diff --git a/components/lib/mention/package.json b/components/lib/mention/package.json
new file mode 100644
index 0000000000..07524d742c
--- /dev/null
+++ b/components/lib/mention/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./mention.cjs.js",
+    "module": "./mention.esm.js",
+    "unpkg": "./mention.min.js",
+    "types": "./mention.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
new file mode 100644
index 0000000000..85d5a13bfb
--- /dev/null
+++ b/components/lib/menu/Menu.js
@@ -0,0 +1,517 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { MenuBase } from './MenuBase';
+
+export const Menu = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MenuBase.getProps(inProps, context);
+        const [idState, setIdState] = React.useState(props.id);
+        const [visibleState, setVisibleState] = React.useState(!props.popup);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+        const [selectedOptionIndex, setSelectedOptionIndex] = React.useState(-1);
+        const [focused, setFocused] = React.useState(false);
+
+        const { ptm, cx, sx, isUnstyled } = MenuBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                visible: visibleState,
+                focused: focused
+            }
+        });
+
+        const getMenuItemPTOptions = (key, menuContext) => {
+            return ptm(key, { context: menuContext });
+        };
+
+        useHandleStyle(MenuBase.css.styles, isUnstyled, { name: 'menu' });
+        const menuRef = React.useRef(null);
+        const listRef = React.useRef(null);
+        const targetRef = React.useRef(null);
+        const isCloseOnEscape = !!(visibleState && props.popup && props.closeOnEscape);
+        const popupMenuDisplayOrder = useDisplayOrder('menu', isCloseOnEscape);
+
+        useGlobalOnEscapeKey({
+            callback: (event) => {
+                hide(event);
+            },
+            when: isCloseOnEscape && popupMenuDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.MENU, popupMenuDisplayOrder]
+        });
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: targetRef,
+            overlay: menuRef,
+            listener: (event, { valid, type }) => {
+                if (valid) {
+                    if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+                        hide(event);
+                        setFocusedOptionIndex(-1);
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
+                    }
+                }
+            },
+            when: visibleState
+        });
+
+        const onPanelClick = (event) => {
+            if (props.popup) {
+                OverlayService.emit('overlay-click', {
+                    originalEvent: event,
+                    target: targetRef.current
+                });
+            }
+        };
+
+        const onItemClick = (event, item, key) => {
+            if (item.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (props.popup) {
+                hide(event);
+            }
+
+            if (!props.popup && focusedOptionIndex !== key) {
+                setFocusedOptionIndex(key);
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const onItemMouseMove = (event, key) => {
+            if (event && props.popup && focusedOptionIndex !== key) {
+                setFocusedOptionIndex(key);
+            }
+        };
+
+        const onListFocus = (event) => {
+            setFocused(true);
+
+            if (!props.popup) {
+                if (selectedOptionIndex !== -1) {
+                    changeFocusedOptionIndex(selectedOptionIndex);
+                    setSelectedOptionIndex(-1);
+                } else {
+                    changeFocusedOptionIndex(0);
+                }
+            }
+
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onListBlur = (event) => {
+            const { currentTarget, relatedTarget } = event;
+
+            if (relatedTarget && currentTarget.contains(relatedTarget)) return;
+
+            setFocused(false);
+            setFocusedOptionIndex(-1);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onListKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Escape':
+                    if (props.popup) {
+                        DomHandler.focus(targetRef.current);
+                        hide(event);
+                    }
+
+                case 'Tab':
+                    props.popup && visibleState && hide(event);
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onArrowDownKey = (event) => {
+            const optionIndex = findNextOptionIndex(focusedOptionIndex);
+
+            changeFocusedOptionIndex(optionIndex);
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event) => {
+            if (event.altKey && props.popup) {
+                DomHandler.focus(targetRef.current);
+                hide(event);
+                event.preventDefault();
+            } else {
+                const optionIndex = findPrevOptionIndex(focusedOptionIndex);
+
+                changeFocusedOptionIndex(optionIndex);
+                event.preventDefault();
+            }
+        };
+
+        const onHomeKey = (event) => {
+            changeFocusedOptionIndex(0);
+            event.preventDefault();
+        };
+
+        const onEndKey = (event) => {
+            changeFocusedOptionIndex(DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            const element = DomHandler.findSingle(menuRef.current, `li[id="${`${focusedOptionIndex}`}"]`);
+            const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+
+            props.popup && DomHandler.focus(targetRef.current);
+            anchorElement ? anchorElement.click() : element && element.click();
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event) => {
+            onEnterKey(event);
+        };
+
+        const findNextOptionIndex = (index) => {
+            const links = DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        };
+
+        const findPrevOptionIndex = (index) => {
+            const links = DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        };
+
+        const changeFocusedOptionIndex = (index) => {
+            const links = DomHandler.find(menuRef.current, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
+            let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
+
+            order > -1 && setFocusedOptionIndex(links[order].getAttribute('id'));
+        };
+
+        const focusedOptionId = () => {
+            return focusedOptionIndex !== -1 ? focusedOptionIndex : null;
+        };
+
+        const toggle = (event) => {
+            if (props.popup) {
+                visibleState ? hide(event) : show(event);
+            }
+        };
+
+        const show = (event) => {
+            targetRef.current = event.currentTarget;
+            setVisibleState(true);
+            props.onShow && props.onShow(event);
+        };
+
+        const hide = (event) => {
+            targetRef.current = event.currentTarget;
+            setVisibleState(false);
+            props.onHide && props.onHide(event);
+        };
+
+        const onEnter = () => {
+            DomHandler.addStyles(menuRef.current, { position: 'absolute', top: '0', left: '0' });
+            ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
+            DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
+
+            if (props.popup) {
+                DomHandler.focus(listRef.current);
+                changeFocusedOptionIndex(0);
+            }
+        };
+
+        const onEntered = () => {
+            bindOverlayListener();
+        };
+
+        const onExit = () => {
+            targetRef.current = null;
+            unbindOverlayListener();
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(menuRef.current);
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(menuRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            toggle,
+            show,
+            hide,
+            getElement: () => menuRef.current,
+            getTarget: () => targetRef.current
+        }));
+
+        const createSubmenu = (submenu, index) => {
+            const key = idState + '_sub_' + index;
+            const items = submenu.items.map((item, index) => createMenuItem(item, index, key));
+            const submenuHeaderProps = mergeProps(
+                {
+                    id: key,
+                    role: 'none',
+                    className: classNames(submenu.className, cx('submenuHeader', { submenu })),
+                    style: sx('submenuHeader', { submenu }),
+                    'data-p-disabled': submenu.disabled
+                },
+                ptm('submenuHeader')
+            );
+
+            return (
+                <React.Fragment key={key}>
+                    <li {...submenuHeaderProps} key={key}>
+                        {submenu.label}
+                    </li>
+                    {items}
+                </React.Fragment>
+            );
+        };
+
+        const createSeparator = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            const key = idState + '_separator_' + index;
+            const separatorProps = mergeProps(
+                {
+                    id: key,
+                    className: classNames(item.className, cx('separator')),
+                    role: 'separator'
+                },
+                ptm('separator')
+            );
+
+            return <li {...separatorProps} key={key} />;
+        };
+
+        const createMenuItem = (item, index, parentId = null) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            const menuContext = { item, index, parentId };
+            const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
+            const iconClassName = classNames('p-menuitem-icon', item.icon);
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                getMenuItemPTOptions('icon', menuContext)
+            );
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getMenuItemPTOptions('label', menuContext)
+            );
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+            const key = item.id || (parentId || idState) + '_' + index;
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onItemClick(event, item, key),
+                    onMouseMove: (event) => onItemMouseMove(event, key),
+                    className: cx('content', { item })
+                },
+                getMenuItemPTOptions('content', menuContext)
+            );
+
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: cx('action', { item }),
+                    onFocus: (event) => event.stopPropagation(),
+                    target: item.target,
+                    tabIndex: '-1',
+                    'aria-label': item.label,
+                    'aria-disabled': item.disabled,
+                    'data-p-disabled': item.disabled
+                },
+                getMenuItemPTOptions('action', menuContext)
+            );
+
+            let content = (
+                <div {...contentProps}>
+                    <a {...actionProps}>
+                        {icon}
+                        {label}
+                        <Ripple />
+                    </a>
+                </div>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    onClick: (event) => onItemClick(event, item, key),
+                    onMouseMove: (event) => onItemMouseMove(event, key),
+                    className: linkClassName,
+                    tabIndex: '-1',
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName,
+                    element: content,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const menuitemProps = mergeProps(
+                {
+                    id: key,
+                    className: classNames(item.className, cx('menuitem', { focused: focusedOptionIndex === key })),
+                    onClick: (event) => onItemClick(event, item, key),
+                    style: sx('menuitem', { item }),
+                    role: 'menuitem',
+                    'aria-label': item.label,
+                    'aria-disabled': item.disabled,
+                    'data-p-focused': focusedOptionId() === key,
+                    'data-p-disabled': item.disabled || false
+                },
+                getMenuItemPTOptions('menuitem', menuContext)
+            );
+
+            return (
+                <li {...menuitemProps} key={key}>
+                    {content}
+                </li>
+            );
+        };
+
+        const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            return item.separator ? createSeparator(item, index) : item.items ? createSubmenu(item, index) : createMenuItem(item, index);
+        };
+
+        const createMenu = () => {
+            return props.model.map(createItem);
+        };
+
+        const createElement = () => {
+            if (props.model) {
+                const menuitems = createMenu();
+                const rootProps = mergeProps(
+                    {
+                        className: classNames(props.className, cx('root', { context })),
+                        style: props.style,
+                        onClick: (e) => onPanelClick(e)
+                    },
+                    MenuBase.getOtherProps(props),
+                    ptm('root')
+                );
+
+                const menuProps = mergeProps(
+                    {
+                        ref: listRef,
+                        className: cx('menu'),
+                        id: idState + '_list',
+                        tabIndex: props.tabIndex || '0',
+                        role: 'menu',
+                        'aria-label': props.ariaLabel,
+                        'aria-labelledby': props.ariaLabelledBy,
+                        'aria-activedescendant': focused ? focusedOptionId() : undefined,
+                        onFocus: onListFocus,
+                        onKeyDown: onListKeyDown,
+                        onBlur: onListBlur
+                    },
+                    ptm('menu')
+                );
+
+                const transitionProps = mergeProps(
+                    {
+                        classNames: cx('transition'),
+                        in: visibleState,
+                        timeout: { enter: 120, exit: 100 },
+                        options: props.transitionOptions,
+                        unmountOnExit: true,
+                        onEnter,
+                        onEntered,
+                        onExit,
+                        onExited
+                    },
+                    ptm('transition')
+                );
+
+                return (
+                    <CSSTransition nodeRef={menuRef} {...transitionProps}>
+                        <div id={props.id} ref={menuRef} {...rootProps}>
+                            <ul {...menuProps}>{menuitems}</ul>
+                        </div>
+                    </CSSTransition>
+                );
+            }
+
+            return null;
+        };
+
+        const element = createElement();
+
+        return props.popup ? <Portal element={element} appendTo={props.appendTo} /> : element;
+    })
+);
+
+Menu.displayName = 'Menu';
diff --git a/components/lib/menu/MenuBase.js b/components/lib/menu/MenuBase.js
new file mode 100644
index 0000000000..9ba56e75c0
--- /dev/null
+++ b/components/lib/menu/MenuBase.js
@@ -0,0 +1,89 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-menu-overlay {
+        position: absolute;
+        /* Github #3122: Prevent animation flickering  */
+        top: -9999px;
+        left: -9999px;
+    }
+
+    .p-menu ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-menu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-menu .p-menuitem-text {
+        line-height: 1;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-menu p-component', {
+            'p-menu-overlay': props.popup,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    menu: 'p-menu-list p-reset',
+    content: ({ item }) => classNames('p-menuitem-content', { 'p-disabled': item.disabled }),
+    action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
+    menuitem: ({ focused }) => classNames('p-menuitem', { 'p-focus': focused }),
+    submenuHeader: ({ submenu }) =>
+        classNames('p-submenu-header', {
+            'p-disabled': submenu.disabled
+        }),
+    separator: 'p-menu-separator',
+    label: 'p-menuitem-text',
+    icon: 'p-menuitem-icon',
+    transition: 'p-connected-overlay'
+};
+
+const inlineStyles = {
+    submenuHeader: ({ submenu }) => submenu.style,
+    menuitem: ({ item }) => item.style
+};
+
+export const MenuBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Menu',
+        id: null,
+        ariaLabel: null,
+        ariaLabelledBy: null,
+        tabIndex: 0,
+        model: null,
+        popup: false,
+        popupAlignment: 'left',
+        style: null,
+        className: null,
+        autoZIndex: true,
+        baseZIndex: 0,
+        appendTo: null,
+        onFocus: null,
+        onBlur: null,
+        transitionOptions: null,
+        onShow: null,
+        onHide: null,
+        children: undefined,
+        closeOnEscape: true
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/menu/menu.d.ts b/components/lib/menu/menu.d.ts
new file mode 100644
index 0000000000..d07f160ccb
--- /dev/null
+++ b/components/lib/menu/menu.d.ts
@@ -0,0 +1,248 @@
+/**
+ *
+ * Menu is a navigation/command component that supports dynamic and static positioning.
+ *
+ * [Live Demo](https://www.primereact.org/menu/)
+ *
+ * @module menu
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type MenuPassThroughType<T> = PassThroughType<T, MenuPassThroughMethodOptions>;
+export declare type MenuPassThroughTransitionType = ReactCSSTransitionProps | ((options: MenuPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenuPassThroughMethodOptions {
+    props: MenuProps;
+    state: MenuState;
+    context: MenuContext;
+}
+
+/**
+ * Defines current options in Menu component.
+ */
+export interface MenuContext {
+    /**
+     * Current menuitem
+     */
+    item: MenuItem;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+    /**
+     * Id of the submenu header containing the menuitem
+     */
+    parentId: string | null;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenuProps.pt}
+ */
+export interface MenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: MenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the submenu header's DOM element.
+     */
+    submenuHeader?: MenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: MenuPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Menu component.
+ */
+export interface MenuState {
+    /**
+     * Current element id.
+     * @defaultValue false
+     */
+    id: string;
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
+/**
+ * Defines valid properties in Menu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface MenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Defines if menu would displayed as a popup.
+     * @defaultValue false
+     */
+    popup?: boolean | undefined;
+    /**
+     * In popup mode determines how the overlay is aligned with its target. Values either 'left' or 'right'.
+     * @defaultValue left
+     */
+    popupAlignment?: 'left' | 'right';
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Callback to invoke when a popup menu is shown.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onShow?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a popup menu is hidden.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onHide?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MenuPassThroughOptions}
+     */
+    pt?: MenuPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Specifies if pressing escape key should hide the Menu Popup.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+}
+
+/**
+ * **PrimeReact - Menu**
+ *
+ * _Menu is a navigation/command component that supports dynamic and static positioning._
+ *
+ * [Live Demo](https://www.primereact.org/menu/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Menu extends React.Component<MenuProps, any> {
+    /**
+     * Toggles the visibility of the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    public toggle(event: React.SyntheticEvent): void;
+    /**
+     * Displays the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    public show(event: React.SyntheticEvent): void;
+    /**
+     * Hides the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    public hide(event: React.SyntheticEvent): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get target element.
+     * @return {EventTarget} Target element
+     */
+    public getTarget(): EventTarget | null;
+}
diff --git a/components/lib/menu/package.json b/components/lib/menu/package.json
new file mode 100644
index 0000000000..3b08321a37
--- /dev/null
+++ b/components/lib/menu/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./menu.cjs.js",
+    "module": "./menu.esm.js",
+    "unpkg": "./menu.min.js",
+    "types": "./menu.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/menubar/Menubar.js b/components/lib/menubar/Menubar.js
new file mode 100644
index 0000000000..70b229f331
--- /dev/null
+++ b/components/lib/menubar/Menubar.js
@@ -0,0 +1,699 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { BarsIcon } from '../icons/bars';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { MenubarBase } from './MenubarBase';
+import { MenubarSub } from './MenubarSub';
+
+export const Menubar = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MenubarBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const [mobileActiveState, setMobileActiveState] = React.useState(false);
+        const [focused, setFocused] = React.useState(false);
+        const [focusedItemInfo, setFocusedItemInfo] = React.useState({ index: -1, level: 0, parentKey: '' });
+        const [focusedItemId, setFocusedItemId] = React.useState(null);
+        const [activeItemPath, setActiveItemPath] = React.useState([]);
+        const [visibleItems, setVisibleItems] = React.useState([]);
+        const [processedItems, setProcessedItems] = React.useState([]);
+        const [focusTrigger, setFocusTrigger] = React.useState(false);
+        const [dirty, setDirty] = React.useState(false);
+        const elementRef = React.useRef(null);
+        const rootMenuRef = React.useRef(null);
+        const menuButtonRef = React.useRef(null);
+        const searchValue = React.useRef('');
+        const searchTimeout = React.useRef(null);
+        const reverseTrigger = React.useRef(false);
+        const { ptm, cx, isUnstyled } = MenubarBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                mobileActive: mobileActiveState
+            }
+        });
+
+        useHandleStyle(MenubarBase.css.styles, isUnstyled, { name: 'menubar' });
+
+        const [bindOutsideClickListener, unbindOutsideClickListener] = useEventListener({
+            type: 'click',
+            listener: (event) => {
+                if (isOutsideClicked(event)) {
+                    const isOutsideContainer = elementRef.current && !elementRef.current.contains(event.target);
+
+                    if (isOutsideContainer) {
+                        hide();
+                    }
+                }
+            },
+            options: { capture: true }
+        });
+
+        const [bindResizeListener, unbindResizeListener] = useResizeListener({
+            listener: (event) => {
+                if (!DomHandler.isTouchDevice()) {
+                    hide(event);
+                }
+            }
+        });
+
+        const toggle = (event) => {
+            if (mobileActiveState) {
+                setMobileActiveState(false);
+                hide();
+            } else {
+                setMobileActiveState(true);
+                setTimeout(() => {
+                    show();
+                }, 1);
+            }
+
+            event.preventDefault();
+        };
+
+        const show = () => {
+            setFocusedItemInfo({ index: findFirstFocusedItemIndex(), level: 0, parentKey: '' });
+
+            DomHandler.focus(rootMenuRef.current);
+        };
+
+        const hide = (isFocus) => {
+            if (mobileActiveState) {
+                setMobileActiveState(false);
+                setTimeout(() => {
+                    DomHandler.focus(menuButtonRef.current);
+                }, 0);
+            }
+
+            setActiveItemPath([]);
+            setFocusedItemInfo({ index: -1, level: 0, parentKey: '' });
+
+            isFocus && DomHandler.focus(rootMenuRef.current);
+            setDirty(false);
+        };
+
+        const menuButtonKeydown = (event) => {
+            (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && toggle(event);
+        };
+
+        const isOutsideClicked = (event) => {
+            return rootMenuRef.current !== event.target && !rootMenuRef.current.contains(event.target) && menuButtonRef.current !== event.target && !menuButtonRef.current.contains(event.target);
+        };
+
+        const getItemProp = (item, name) => {
+            return item ? ObjectUtils.getItemValue(item[name]) : undefined;
+        };
+
+        const getItemLabel = (item) => {
+            return getItemProp(item, 'label');
+        };
+
+        const isItemDisabled = (item) => getItemProp(item, 'disabled');
+
+        const isItemSeparator = (item) => getItemProp(item, 'separator');
+
+        const getProccessedItemLabel = (processedItem) => (processedItem ? getItemLabel(processedItem.item) : undefined);
+
+        const isProccessedItemGroup = (processedItem) => processedItem && ObjectUtils.isNotEmpty(processedItem.items);
+
+        const onFocus = (event) => {
+            setFocused(true);
+            setFocusedItemInfo(focusedItemInfo.index !== -1 ? focusedItemInfo : { index: findFirstFocusedItemIndex(), level: 0, parentKey: '' });
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocused(false);
+            setFocusedItemInfo({ index: -1, level: 0, parentKey: '' });
+            searchValue.current = '';
+            setDirty(false);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onKeyDown = (event) => {
+            const metaKey = event.metaKey || event.ctrlKey;
+            const code = event.code;
+
+            switch (code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event, event.key);
+                    }
+
+                    break;
+            }
+        };
+
+        const onItemChange = (event) => {
+            const { processedItem, isFocus } = event;
+
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
+
+            const { index, key, level, parentKey, items } = processedItem;
+            const grouped = ObjectUtils.isNotEmpty(items);
+            const _activeItemPath = activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+
+            grouped && _activeItemPath.push(processedItem);
+
+            setFocusedItemInfo({ index, level, parentKey });
+            setActiveItemPath(_activeItemPath);
+
+            grouped && setDirty(true);
+            isFocus && DomHandler.focus(rootMenuRef.current);
+        };
+
+        const onItemClick = (event) => {
+            const { originalEvent, processedItem } = event;
+            const grouped = isProccessedItemGroup(processedItem);
+            const root = ObjectUtils.isEmpty(processedItem.parent);
+            const selected = isSelected(processedItem);
+
+            if (selected) {
+                const { index, key, level, parentKey } = processedItem;
+
+                setActiveItemPath(activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key)));
+                setFocusedItemInfo({ index, level, parentKey });
+
+                if (!grouped) {
+                    setDirty(!root);
+                }
+
+                setTimeout(() => {
+                    DomHandler.focus(rootMenuRef.current);
+
+                    if (grouped) {
+                        setDirty(true);
+                    }
+                }, 0);
+            } else if (grouped) {
+                DomHandler.focus(rootMenuRef.current);
+                onItemChange({ originalEvent, processedItem });
+            } else {
+                const rootProcessedItem = root ? processedItem : activeItemPath.find((p) => p.parentKey === '');
+                const rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
+
+                hide(originalEvent);
+                setFocusedItemInfo({ index: rootProcessedItemIndex, parentKey: rootProcessedItem ? rootProcessedItem.parentKey : '' });
+                setMobileActiveState(false);
+            }
+        };
+
+        const onItemMouseEnter = (event) => {
+            if (!mobileActiveState && dirty) {
+                onItemChange(event);
+            }
+        };
+
+        const onArrowDownKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const root = processedItem ? ObjectUtils.isEmpty(processedItem.parent) : null;
+
+            if (root) {
+                const grouped = isProccessedItemGroup(processedItem);
+
+                if (grouped) {
+                    onItemChange({ originalEvent: event, processedItem });
+                    setFocusedItemInfo({ index: -1, parentKey: processedItem.key });
+                    setTimeout(() => setFocusTrigger(true), 0);
+                }
+            } else {
+                const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const root = processedItem ? ObjectUtils.isEmpty(processedItem.parent) : null;
+
+            if (root) {
+                const grouped = isProccessedItemGroup(processedItem);
+
+                if (grouped) {
+                    onItemChange({ originalEvent: event, processedItem });
+                    setFocusedItemInfo({ index: -1, parentKey: processedItem.key });
+                    reverseTrigger.current = true;
+                    setTimeout(() => setFocusTrigger(true), 0);
+                }
+            } else {
+                const parentItem = activeItemPath.find((p) => p.key === processedItem.parentKey);
+
+                if (focusedItemInfo.index === 0 && parentItem && parentItem.parentKey === '') {
+                    setFocusedItemInfo({ index: -1, parentKey: parentItem ? parentItem.parentKey : '' });
+                    searchValue.current = '';
+                    onArrowLeftKey(event);
+                } else {
+                    const itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+
+                    changeFocusedItemIndex(itemIndex);
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowLeftKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const parentItem = processedItem ? activeItemPath.find((p) => p.key === processedItem.parentKey) : null;
+
+            if (parentItem) {
+                onItemChange({ originalEvent: event, processedItem: parentItem });
+                setActiveItemPath(activeItemPath.filter((p) => p.key !== parentItem.key));
+            } else {
+                const itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowRightKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const parentItem = processedItem ? activeItemPath.find((p) => p.key === processedItem.parentKey) : null;
+
+            if (parentItem) {
+                const grouped = isProccessedItemGroup(processedItem);
+
+                if (grouped) {
+                    onItemChange({ originalEvent: event, processedItem });
+                    setFocusedItemInfo({ index: -1, parentKey: processedItem.key });
+                    setTimeout(() => setFocusTrigger(true), 0);
+                }
+            } else {
+                const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onHomeKey = (event) => {
+            changeFocusedItemIndex(findFirstItemIndex());
+            event.preventDefault();
+        };
+
+        const onEndKey = (event) => {
+            changeFocusedItemIndex(findLastItemIndex());
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const element = DomHandler.findSingle(rootMenuRef.current, `li[data-id="${`${focusedItemId}`}"]`);
+                const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
+
+                anchorElement ? anchorElement.click() : element && element.click();
+            }
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event) => {
+            onEnterKey(event);
+        };
+
+        const onEscapeKey = (event) => {
+            hide(true);
+            setFocusedItemInfo({ focusedItemInfo, index: findFirstFocusedItemIndex() });
+        };
+
+        const onTabKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const processedItem = visibleItems[focusedItemInfo.index];
+                const grouped = isProccessedItemGroup(processedItem);
+
+                !grouped && onItemChange({ originalEvent: event, processedItem });
+            }
+
+            hide();
+        };
+
+        const isItemMatched = (processedItem) => {
+            return isValidItem(processedItem) && getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
+        };
+
+        const isValidItem = (processedItem) => {
+            return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
+        };
+
+        const isValidSelectedItem = (processedItem) => {
+            return isValidItem(processedItem) && isSelected(processedItem);
+        };
+
+        const isSelected = (processedItem) => {
+            return activeItemPath.some((p) => p.key === processedItem.key);
+        };
+
+        const findFirstItemIndex = () => {
+            return visibleItems.findIndex((processedItem) => isValidItem(processedItem));
+        };
+
+        const findLastItemIndex = () => {
+            return ObjectUtils.findLastIndex(visibleItems, (processedItem) => isValidItem(processedItem));
+        };
+
+        const findNextItemIndex = (index) => {
+            const matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex((processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
+        };
+
+        const findPrevItemIndex = (index) => {
+            const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), (processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex : index;
+        };
+
+        const findSelectedItemIndex = () => {
+            return visibleItems.findIndex((processedItem) => isValidSelectedItem(processedItem));
+        };
+
+        const findFirstFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex;
+        };
+
+        const findLastFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex;
+        };
+
+        const searchItems = (event, char) => {
+            searchValue.current = (searchValue.current || '') + char;
+
+            let itemIndex = -1;
+            let matched = false;
+
+            if (focusedItemInfo.index !== -1) {
+                itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem));
+                itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem)) : itemIndex + focusedItemInfo.index;
+            } else {
+                itemIndex = visibleItems.findIndex((processedItem) => isItemMatched(processedItem));
+            }
+
+            if (itemIndex !== -1) {
+                matched = true;
+            }
+
+            if (itemIndex === -1 && focusedItemInfo.index === -1) {
+                itemIndex = findFirstFocusedItemIndex();
+            }
+
+            if (itemIndex !== -1) {
+                changeFocusedItemIndex(itemIndex);
+            }
+
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout.current);
+            }
+
+            searchTimeout.current = setTimeout(() => {
+                searchValue.current = '';
+                searchTimeout.current = null;
+            }, 500);
+
+            return matched;
+        };
+
+        const changeFocusedItemIndex = (index) => {
+            if (focusedItemInfo.index !== index) {
+                setFocusedItemInfo({ ...focusedItemInfo, index });
+                scrollInView();
+            }
+        };
+
+        const scrollInView = (index = -1) => {
+            const id = index !== -1 ? `${idState}_${index}` : focusedItemId;
+            const element = DomHandler.findSingle(rootMenuRef.current, `li[data-id="${id}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        };
+
+        const createProcessedItems = (items, level = 0, parent = {}, parentKey = '') => {
+            const _processedItems = [];
+
+            items &&
+                items.forEach((item, index) => {
+                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                    const newItem = {
+                        item,
+                        index,
+                        level,
+                        key,
+                        parent,
+                        parentKey
+                    };
+
+                    newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
+                    _processedItems.push(newItem);
+                });
+
+            return _processedItems;
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (mobileActiveState) {
+                bindOutsideClickListener();
+                bindResizeListener();
+                ZIndexUtils.set('menu', rootMenuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
+            } else {
+                unbindResizeListener();
+                unbindOutsideClickListener();
+                ZIndexUtils.clear(rootMenuRef.current);
+            }
+        }, [mobileActiveState]);
+
+        React.useEffect(() => {
+            const itemsToProcess = props.model || [];
+            const processed = createProcessedItems(itemsToProcess, 0, null, '');
+
+            setProcessedItems(processed);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.model]);
+
+        useUpdateEffect(() => {
+            const processedItem = activeItemPath.find((p) => p.key === focusedItemInfo.parentKey);
+            const _processedItems = processedItem ? processedItem.items : processedItems;
+
+            setVisibleItems(_processedItems);
+        }, [activeItemPath, focusedItemInfo, processedItems]);
+
+        useUpdateEffect(() => {
+            if (ObjectUtils.isNotEmpty(activeItemPath)) {
+                bindOutsideClickListener();
+                bindResizeListener();
+            } else {
+                unbindOutsideClickListener();
+                unbindResizeListener();
+            }
+        }, [activeItemPath]);
+
+        useUpdateEffect(() => {
+            if (focusTrigger) {
+                const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : reverseTrigger.current ? findLastItemIndex() : findFirstItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+                reverseTrigger.current = false;
+                setFocusTrigger(false);
+            }
+        }, [focusTrigger]);
+
+        useUpdateEffect(() => {
+            setFocusedItemId(focusedItemInfo.index !== -1 ? `${idState}${ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null);
+        }, [focusedItemInfo]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(rootMenuRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            toggle,
+            getElement: () => elementRef.current,
+            getRootMenu: () => rootMenuRef.current,
+            getMenuButton: () => menuButtonRef.current
+        }));
+
+        const createStartContent = () => {
+            if (props.start) {
+                const start = ObjectUtils.getJSXElement(props.start, props);
+                const startProps = mergeProps(
+                    {
+                        className: cx('start')
+                    },
+                    ptm('start')
+                );
+
+                return <div {...startProps}>{start}</div>;
+            }
+
+            return null;
+        };
+
+        const createEndContent = () => {
+            if (props.end) {
+                const end = ObjectUtils.getJSXElement(props.end, props);
+                const endProps = mergeProps(
+                    {
+                        className: cx('end')
+                    },
+                    ptm('end')
+                );
+
+                return <div {...endProps}>{end}</div>;
+            }
+
+            return null;
+        };
+
+        const createMenuButton = () => {
+            if (props.model && props.model.length < 1) {
+                return null;
+            }
+
+            const buttonProps = mergeProps(
+                {
+                    ref: menuButtonRef,
+                    href: '#',
+                    tabIndex: '0',
+                    'aria-haspopup': mobileActiveState && props.model && props.model.length > 0 ? true : false,
+                    'aria-expanded': mobileActiveState,
+                    'aria-label': ariaLabel('navigation'),
+                    'aria-controls': idState,
+                    role: 'button',
+                    tabIndex: 0,
+                    className: cx('button'),
+                    onKeyDown: (e) => menuButtonKeydown(e),
+                    onClick: (e) => toggle(e)
+                },
+                ptm('button')
+            );
+            const popupIconProps = mergeProps(ptm('popupIcon'));
+            const icon = props.menuIcon || <BarsIcon {...popupIconProps} />;
+            const menuIcon = IconUtils.getJSXIcon(icon, { ...popupIconProps }, { props });
+
+            /* eslint-disable */
+            const button = <a {...buttonProps}>{menuIcon}</a>;
+            /* eslint-enable */
+
+            return button;
+        };
+
+        const start = createStartContent();
+        const end = createEndContent();
+        const menuButton = createMenuButton();
+
+        const submenu = (
+            <MenubarSub
+                hostName="Menubar"
+                ariaActivedescendant={focused ? focusedItemId : undefined}
+                level={0}
+                id={idState}
+                ref={rootMenuRef}
+                menuProps={props}
+                model={processedItems}
+                onLeafClick={onItemClick}
+                onItemMouseEnter={onItemMouseEnter}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onKeyDown={onKeyDown}
+                root
+                activeItemPath={activeItemPath}
+                focusedItemId={focused ? focusedItemId : undefined}
+                submenuIcon={props.submenuIcon}
+                ptm={ptm}
+                cx={cx}
+            />
+        );
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root', { mobileActiveState })),
+                style: props.style
+            },
+            MenubarBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {start}
+                {menuButton}
+                {submenu}
+                {end}
+            </div>
+        );
+    })
+);
+
+Menubar.displayName = 'Menubar';
diff --git a/components/lib/menubar/MenubarBase.js b/components/lib/menubar/MenubarBase.js
new file mode 100644
index 0000000000..589bad7191
--- /dev/null
+++ b/components/lib/menubar/MenubarBase.js
@@ -0,0 +1,120 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    start: 'p-menubar-start',
+    end: 'p-menubar-end',
+    button: 'p-menubar-button',
+    root: ({ mobileActiveState }) =>
+        classNames('p-menubar p-component', {
+            'p-menubar-mobile-active': mobileActiveState
+        }),
+    separator: 'p-menuitem-separator',
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    menuitem: ({ active, focused, disabled }) => classNames('p-menuitem', { 'p-menuitem-active p-highlight': active, 'p-focus': focused, 'p-disabled': disabled }),
+    menu: 'p-menubar-root-list',
+    content: 'p-menuitem-content',
+    submenu: 'p-submenu-list',
+    action: ({ disabled }) => classNames('p-menuitem-link', { 'p-disabled': disabled })
+};
+
+const styles = `
+@layer primereact {
+    .p-menubar {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-menubar ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-menubar .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-menubar .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-menubar .p-menuitem {
+        position: relative;
+    }
+
+    .p-menubar-root-list {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .p-menubar-root-list > li ul {
+        display: none;
+        z-index: 1;
+    }
+
+    .p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
+        display: block;
+    }
+
+    .p-menubar .p-submenu-list {
+        display: none;
+        position: absolute;
+        z-index: 5;
+    }
+
+    .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
+        display: block;
+        left: 100%;
+        top: 0;
+    }
+
+    .p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-menubar .p-menubar-end {
+        margin-left: auto;
+        align-self: center;
+    }
+
+    .p-menubar-button {
+        display: none;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+    }
+}
+`;
+
+export const MenubarBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Menubar',
+        id: null,
+        model: null,
+        style: null,
+        className: null,
+        start: null,
+        ariaLabel: null,
+        ariaLabelledBy: null,
+        onFocus: null,
+        onBlur: null,
+        submenuIcon: null,
+        menuIcon: null,
+        end: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/menubar/MenubarSub.js b/components/lib/menubar/MenubarSub.js
new file mode 100644
index 0000000000..d4f244aeb4
--- /dev/null
+++ b/components/lib/menubar/MenubarSub.js
@@ -0,0 +1,302 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleDownIcon } from '../icons/angledown';
+import { AngleRightIcon } from '../icons/angleright';
+import { Ripple } from '../ripple/Ripple';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+
+export const MenubarSub = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { ptm, cx } = props;
+
+        const getPTOptions = (processedItem, key, index) => {
+            return ptm(key, {
+                props,
+                hostName: props.hostName,
+                context: {
+                    item: processedItem,
+                    index,
+                    active: isItemActive(processedItem),
+                    focused: isItemFocused(processedItem),
+                    disabled: isItemDisabled(processedItem),
+                    level: props.level
+                }
+            });
+        };
+
+        const onItemMouseEnter = (event, item) => {
+            if (isItemDisabled(item) || props.mobileActive) {
+                event.preventDefault();
+
+                return;
+            }
+
+            props.onItemMouseEnter && props.onItemMouseEnter({ originalEvent: event, processedItem: item });
+        };
+
+        const onItemClick = (event, processedItem) => {
+            const item = processedItem.item;
+
+            if (isItemDisabled(processedItem)) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            onLeafClick({ originalEvent: event, processedItem, isFocus: true });
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const onLeafClick = (event) => {
+            props.onLeafClick && props.onLeafClick(event);
+        };
+
+        const getItemId = (processedItem) => {
+            return processedItem.item?.id;
+        };
+
+        const getItemDataId = (processedItem) => {
+            return `${props.id}_${processedItem.key}`;
+        };
+
+        const getItemProp = (processedItem, name, params) => {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
+        };
+
+        const isItemActive = (processedItem) => {
+            return props.activeItemPath.some((path) => path.key === processedItem.key);
+        };
+
+        const isItemVisible = (processedItem) => {
+            return getItemProp(processedItem, 'visible') !== false;
+        };
+
+        const isItemDisabled = (processedItem) => {
+            return getItemProp(processedItem, 'disabled');
+        };
+
+        const isItemFocused = (processedItem) => {
+            return props.focusedItemId === getItemDataId(processedItem);
+        };
+
+        const isItemGroup = (processedItem) => {
+            return ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const getAriaSetSize = () => {
+            return props.model.filter((processedItem) => isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')).length;
+        };
+
+        const getAriaPosInset = (index) => {
+            return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1;
+        };
+
+        const createSeparator = (processedItem, index) => {
+            const key = props.id + '_separator_' + index + '_' + processedItem.key;
+            const separatorProps = mergeProps(
+                {
+                    'data-id': key,
+                    className: cx('separator'),
+                    role: 'separator'
+                },
+                ptm('separator', { hostName: props.hostName })
+            );
+
+            return <li {...separatorProps} key={key} />;
+        };
+
+        const createSubmenu = (processedItem) => {
+            const items = processedItem && processedItem.items;
+
+            if (items) {
+                return (
+                    <MenubarSub
+                        id={props.id}
+                        hostName={props.hostName}
+                        menuProps={props.menuProps}
+                        level={props.level + 1}
+                        model={items}
+                        activeItemPath={props.activeItemPath}
+                        focusedItemId={props.focusedItemId}
+                        onLeafClick={onLeafClick}
+                        onItemMouseEnter={props.onItemMouseEnter}
+                        submenuIcon={props.submenuIcon}
+                        ptm={ptm}
+                        style={{ display: isItemActive(processedItem) ? 'block' : 'none' }}
+                        cx={cx}
+                    />
+                );
+            }
+
+            return null;
+        };
+
+        const createMenuitem = (processedItem, index) => {
+            const item = processedItem.item;
+
+            if (!isItemVisible(processedItem)) {
+                return null;
+            }
+
+            const id = getItemId(processedItem);
+            const dataId = getItemDataId(processedItem);
+            const active = isItemActive(processedItem);
+            const focused = isItemFocused(processedItem);
+            const disabled = isItemDisabled(processedItem) || false;
+            const group = isItemGroup(processedItem);
+
+            const linkClassName = classNames('p-menuitem-link', { 'p-disabled': disabled });
+            const iconClassName = classNames('p-menuitem-icon', getItemProp(processedItem, 'icon'));
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                getPTOptions(processedItem, 'icon', index)
+            );
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps });
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getPTOptions(processedItem, 'label', index)
+            );
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+            const items = getItemProp(processedItem, 'items');
+            const submenuIconClassName = 'p-submenu-icon';
+            const submenuIconProps = mergeProps(
+                {
+                    className: cx('submenuIcon')
+                },
+                getPTOptions(processedItem, 'submenuIcon', index)
+            );
+            const submenuIcon =
+                items &&
+                IconUtils.getJSXIcon(
+                    !props.root ? props.submenuIcon || <AngleRightIcon {...submenuIconProps} /> : props.submenuIcon || <AngleDownIcon {...submenuIconProps} />,
+                    { ...submenuIconProps },
+                    { props: { menuProps: props.menuProps, ...props } }
+                );
+            const submenu = createSubmenu(processedItem);
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    tabIndex: '-1',
+                    className: cx('action', { disabled }),
+                    onFocus: (event) => event.stopPropagation(),
+                    target: getItemProp(processedItem, 'target'),
+                    'aria-haspopup': items != null
+                },
+                getPTOptions(processedItem, 'action', index)
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    {label}
+                    {submenuIcon}
+                    <Ripple />
+                </a>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    className: linkClassName,
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName,
+                    submenuIconClassName,
+                    element: content,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onItemClick(event, processedItem),
+                    onMouseEnter: (event) => onItemMouseEnter(event, processedItem),
+                    className: cx('content')
+                },
+                getPTOptions(processedItem, 'content', index)
+            );
+
+            const itemClassName = getItemProp(processedItem, 'className');
+
+            const menuitemProps = mergeProps(
+                {
+                    id,
+                    'data-id': dataId,
+                    role: 'menuitem',
+                    'aria-label': item.label,
+                    'aria-disabled': disabled,
+                    'aria-expanded': group ? active : undefined,
+                    'aria-haspopup': group && !item.url ? 'menu' : undefined,
+                    'aria-setsize': getAriaSetSize(),
+                    'aria-posinset': getAriaPosInset(index),
+                    'data-p-highlight': active,
+                    'data-p-focused': focused,
+                    'data-p-disabled': disabled,
+                    className: classNames(itemClassName, cx('menuitem', { active, focused, disabled })),
+                    'data-p-disabled': disabled || false
+                },
+                getPTOptions(processedItem, 'menuitem', index)
+            );
+
+            return (
+                <li {...menuitemProps} key={`${dataId}`}>
+                    <div {...contentProps}>{content}</div>
+                    {submenu}
+                </li>
+            );
+        };
+
+        const createItem = (processedItem, index) => {
+            if (processedItem.visible === false) {
+                return null;
+            }
+
+            return getItemProp(processedItem, 'separator') ? createSeparator(processedItem, index) : createMenuitem(processedItem, index);
+        };
+
+        const createMenu = () => {
+            return props.model ? props.model.map(createItem) : null;
+        };
+
+        const role = props.root ? 'menubar' : 'menu';
+        const ptKey = props.root ? 'menu' : 'submenu';
+        const tabIndex = props.root ? '0' : null;
+        const submenu = createMenu();
+        const menuProps = mergeProps(
+            {
+                ref,
+                className: cx(ptKey),
+                level: props.level,
+                onFocus: props.onFocus,
+                onBlur: props.onBlur,
+                onKeyDown: props.onKeyDown,
+                'data-id': props.id,
+                tabIndex: tabIndex,
+                'aria-activedescendant': props.ariaActivedescendant,
+                style: props.style,
+                role
+            },
+            ptm(ptKey)
+        );
+
+        return <ul {...menuProps}>{submenu}</ul>;
+    })
+);
+
+MenubarSub.displayName = 'MenubarSub';
diff --git a/components/lib/menubar/menubar.d.ts b/components/lib/menubar/menubar.d.ts
new file mode 100644
index 0000000000..bc3d6fb062
--- /dev/null
+++ b/components/lib/menubar/menubar.d.ts
@@ -0,0 +1,236 @@
+/**
+ *
+ * Manubar is an input component that provides real-time suggestions when being typed.
+ *
+ * [Live Demo](https://www.primereact.org/menubar/)
+ *
+ * @module menubar
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type MenubarPassThroughType<T> = PassThroughType<T, MenubarPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MenubarPassThroughMethodOptions {
+    props: MenubarProps;
+    state: MenubarState;
+    context: MenubarContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MenubarProps.pt}
+ */
+export interface MenubarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MenubarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: MenubarPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: MenubarPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: MenubarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: MenubarPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MenubarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MenubarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu's DOM element.
+     */
+    submenu?: MenubarPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: MenubarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: MenubarPassThroughType<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Uses to pass attributes to the mobile popup menu button's DOM element.
+     */
+    button?: MenubarPassThroughType<React.HTMLAttributes<HTMLElement>>;
+    /**
+     * Uses to pass attributes to the mobile popup menu button icon's DOM element.
+     */
+    popupIcon?: MenubarPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the start of the component.
+     */
+    start?: MenubarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the end of the component.
+     */
+    end?: MenubarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in Menubar component.
+ */
+export interface MenubarState {
+    /**
+     * Current mobile menu active state as a boolean.
+     * @defaultValue false
+     */
+    mobileActive: boolean;
+}
+
+/**
+ * Defines current options in Menubar component.
+ */
+export interface MenubarContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Current index of the menuitem.
+     */
+    index: number;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Current level of the menuitem.
+     */
+    level: number;
+}
+
+/**
+ * Defines valid properties in Menubar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface MenubarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * The template of starting element.
+     */
+    start?: React.ReactNode | ((props: MenubarProps) => React.ReactNode);
+    /**
+     * Icon of the submenu.
+     */
+    submenuIcon?: IconType<MenubarProps> | undefined;
+    /**
+     * Icon of the menu.
+     */
+    menuIcon?: IconType<MenubarProps> | undefined;
+    /**
+     * Used to define a string that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+
+    /**
+     * The template of trailing element.
+     */
+    end?: React.ReactNode | ((props: MenubarProps) => React.ReactNode);
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MenubarPassThroughOptions}
+     */
+    pt?: MenubarPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Menubar**
+ *
+ * _Manubar is an input component that provides real-time suggestions when being typed._
+ *
+ * [Live Demo](https://www.primereact.org/menubar/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Menubar extends React.Component<MenubarProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+
+    /**
+     * Used to get root menu element.
+     * @return {HTMLElement | null} Root menu element
+     */
+    public getRootMenu(): HTMLElement | null;
+
+    /**
+     * Used to get menu button element.
+     * @return {HTMLElement | null} Menu button element
+     */
+    public getMenuButton(): HTMLElement | null;
+}
diff --git a/components/lib/menubar/package.json b/components/lib/menubar/package.json
new file mode 100644
index 0000000000..da3acf2000
--- /dev/null
+++ b/components/lib/menubar/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./menubar.cjs.js",
+    "module": "./menubar.esm.js",
+    "unpkg": "./menubar.min.js",
+    "types": "./menubar.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/menuitem/menuitem.d.ts b/components/lib/menuitem/menuitem.d.ts
new file mode 100644
index 0000000000..1a90f15be8
--- /dev/null
+++ b/components/lib/menuitem/menuitem.d.ts
@@ -0,0 +1,129 @@
+/**
+ *
+ * PrimeReact menus components share a common api to specify the menuitems and submenus.
+ *
+ * [Live Demo](https://www.primereact.org/menumodel/)
+ *
+ * @module menuitem
+ *
+ */
+import * as React from 'react';
+
+/**
+ * Custom command event.
+ * @see {@link MenuItem.command}
+ * @event
+ */
+interface MenuItemCommandEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected item instance.
+     */
+    item: MenuItem;
+}
+
+/**
+ * Menu item options
+ */
+interface MenuItemOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the component.
+     */
+    className: string;
+    /**
+     * Style class of the label element.
+     */
+    labelClassName: string;
+    /**
+     * Class name of the options icon.
+     */
+    iconClassName: string;
+    /**
+     * Default element created by the component.
+     */
+    element: React.ReactNode;
+    /**
+     * All component props
+     */
+    props: any;
+}
+
+/**
+ * Defines model of MenuItem API.
+ * @group Model
+ */
+export interface MenuItem {
+    /**
+     * Unique identifier of the menuitem.
+     */
+    id?: string | undefined;
+    /**
+     * Text of the menuitem.
+     */
+    label?: string | undefined;
+    /**
+     * Icon of the item. It can be a string, JSX.Element or method.
+     */
+    icon?: any | undefined;
+    /**
+     * External link to navigate when item is clicked.
+     */
+    url?: string | undefined;
+    /**
+     * An array of children the menuitems.
+     */
+    items?: MenuItem[] | MenuItem[][] | undefined;
+    /**
+     * Visibility of submenu.
+     * @defaultValue false
+     */
+    expanded?: boolean | undefined;
+    /**
+     * When set as true, disables the menuitem.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When set as false, hides the menuitem.
+     * @defaultValue true
+     */
+    visible?: boolean | undefined;
+    /**
+     * Specifies where to open the linked document.
+     */
+    target?: string | undefined;
+    /**
+     * Defines the item as a separator.
+     * @defaultValue false
+     */
+    separator?: boolean | undefined;
+    /**
+     * Inline style of the menuitem.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the menuitem.
+     */
+    className?: string | undefined;
+    /**
+     * Callback to execute when item is clicked.
+     * @param {MenuItemCommandEvent} event - Custom command event.
+     */
+    command?(event: MenuItemCommandEvent): void;
+    /**
+     * Template of the menuitem.
+     */
+    template?: React.ReactNode | ((item: MenuItem, options: MenuItemOptions) => React.ReactNode);
+    /**
+     * The data of the menuitem.
+     */
+    data?: any | undefined;
+}
diff --git a/components/lib/menuitem/package.json b/components/lib/menuitem/package.json
new file mode 100644
index 0000000000..15add7fd9b
--- /dev/null
+++ b/components/lib/menuitem/package.json
@@ -0,0 +1,4 @@
+{
+    "types": "./menuitem.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/message/Message.js b/components/lib/message/Message.js
new file mode 100644
index 0000000000..4eb220bef1
--- /dev/null
+++ b/components/lib/message/Message.js
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { ExclamationTriangleIcon } from '../icons/exclamationtriangle';
+import { InfoCircleIcon } from '../icons/infocircle';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { MessageBase } from './MessageBase';
+
+export const Message = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MessageBase.getProps(inProps, context);
+
+        const elementRef = React.useRef(null);
+
+        const { ptm, cx, isUnstyled } = MessageBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(MessageBase.css.styles, isUnstyled, { name: 'message' });
+
+        const createContent = () => {
+            if (props.content) {
+                return ObjectUtils.getJSXElement(props.content, props);
+            }
+
+            const text = ObjectUtils.getJSXElement(props.text, props);
+
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+
+            let icon = props.icon;
+
+            if (!icon) {
+                switch (props.severity) {
+                    case 'info':
+                        icon = <InfoCircleIcon {...iconProps} />;
+                        break;
+                    case 'warn':
+                        icon = <ExclamationTriangleIcon {...iconProps} />;
+                        break;
+                    case 'error':
+                        icon = <TimesCircleIcon {...iconProps} />;
+                        break;
+                    case 'success':
+                        icon = <CheckIcon {...iconProps} />;
+                        break;
+                    default:
+                        break;
+                }
+            }
+
+            const messageIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+
+            const textProps = mergeProps(
+                {
+                    className: cx('text')
+                },
+                ptm('text')
+            );
+
+            return (
+                <>
+                    {messageIcon}
+                    <span {...textProps}>{text}</span>
+                </>
+            );
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const content = createContent();
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root')),
+                style: props.style,
+                role: 'alert',
+                'aria-live': 'polite',
+                'aria-atomic': 'true'
+            },
+            MessageBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {content}
+            </div>
+        );
+    })
+);
+
+Message.displayName = 'Message';
diff --git a/components/lib/message/Message.spec.js b/components/lib/message/Message.spec.js
new file mode 100644
index 0000000000..2b35f634a3
--- /dev/null
+++ b/components/lib/message/Message.spec.js
@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { Message } from './Message';
+
+import { snapshot } from '../../test';
+
+describe('Message', () => {
+    snapshot(<Message />, 'default');
+    snapshot(<Message severity="success" text="Jest" />, 'severity success');
+    snapshot(<Message severity="info" text="Jest" />, 'severity info');
+    snapshot(<Message severity="warn" text="Jest" />, 'severity warn');
+    snapshot(<Message severity="error" text="Jest" />, 'severity error');
+    snapshot(<Message icon="pi pi-check" />, 'icon');
+    snapshot(<Message content={<span>Test</span>} />, 'content');
+    snapshot(
+        <Message>
+            <span>Jester</span>
+        </Message>,
+        'templating'
+    );
+});
diff --git a/components/lib/message/MessageBase.js b/components/lib/message/MessageBase.js
new file mode 100644
index 0000000000..82b8576ee2
--- /dev/null
+++ b/components/lib/message/MessageBase.js
@@ -0,0 +1,49 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+export const MessageBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Message',
+        id: null,
+        className: null,
+        style: null,
+        text: null,
+        icon: null,
+        severity: 'info',
+        content: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props: { severity } }) =>
+                classNames('p-inline-message p-component', {
+                    [`p-inline-message-${severity}`]: severity
+                }),
+            icon: 'p-inline-message-icon',
+            text: 'p-inline-message-text'
+        },
+        styles: `
+        @layer primereact {
+            .p-inline-message {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                vertical-align: top;
+            }
+
+            .p-inline-message-icon {
+                flex-shrink: 0;
+            }
+            
+            .p-inline-message-icon-only .p-inline-message-text {
+                visibility: hidden;
+                width: 0;
+            }
+            
+            .p-fluid .p-inline-message {
+                display: flex;
+            }        
+        }
+        `
+    }
+});
diff --git a/components/lib/message/__snapshots__/Message.spec.js.snap b/components/lib/message/__snapshots__/Message.spec.js.snap
new file mode 100644
index 0000000000..7d14790083
--- /dev/null
+++ b/components/lib/message/__snapshots__/Message.spec.js.snap
@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Message content 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <span>
+      Test
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message default 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <svg
+      class="p-icon p-inline-message-icon"
+      data-pc-section="icon"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M3.11101 12.8203C4.26215 13.5895 5.61553 14 7 14C8.85652 14 10.637 13.2625 11.9497 11.9497C13.2625 10.637 14 8.85652 14 7C14 5.61553 13.5895 4.26215 12.8203 3.11101C12.0511 1.95987 10.9579 1.06266 9.67879 0.532846C8.3997 0.00303296 6.99224 -0.13559 5.63437 0.134506C4.2765 0.404603 3.02922 1.07129 2.05026 2.05026C1.07129 3.02922 0.404603 4.2765 0.134506 5.63437C-0.13559 6.99224 0.00303296 8.3997 0.532846 9.67879C1.06266 10.9579 1.95987 12.0511 3.11101 12.8203ZM3.75918 2.14976C4.71846 1.50879 5.84628 1.16667 7 1.16667C8.5471 1.16667 10.0308 1.78125 11.1248 2.87521C12.2188 3.96918 12.8333 5.45291 12.8333 7C12.8333 8.15373 12.4912 9.28154 11.8502 10.2408C11.2093 11.2001 10.2982 11.9478 9.23232 12.3893C8.16642 12.8308 6.99353 12.9463 5.86198 12.7212C4.73042 12.4962 3.69102 11.9406 2.87521 11.1248C2.05941 10.309 1.50384 9.26958 1.27876 8.13803C1.05367 7.00647 1.16919 5.83358 1.61071 4.76768C2.05222 3.70178 2.79989 2.79074 3.75918 2.14976ZM7.00002 4.8611C6.84594 4.85908 6.69873 4.79698 6.58977 4.68801C6.48081 4.57905 6.4187 4.43185 6.41669 4.27776V3.88888C6.41669 3.73417 6.47815 3.58579 6.58754 3.4764C6.69694 3.367 6.84531 3.30554 7.00002 3.30554C7.15473 3.30554 7.3031 3.367 7.4125 3.4764C7.52189 3.58579 7.58335 3.73417 7.58335 3.88888V4.27776C7.58134 4.43185 7.51923 4.57905 7.41027 4.68801C7.30131 4.79698 7.1541 4.85908 7.00002 4.8611ZM7.00002 10.6945C6.84594 10.6925 6.69873 10.6304 6.58977 10.5214C6.48081 10.4124 6.4187 10.2652 6.41669 10.1111V6.22225C6.41669 6.06754 6.47815 5.91917 6.58754 5.80977C6.69694 5.70037 6.84531 5.63892 7.00002 5.63892C7.15473 5.63892 7.3031 5.70037 7.4125 5.80977C7.52189 5.91917 7.58335 6.06754 7.58335 6.22225V10.1111C7.58134 10.2652 7.51923 10.4124 7.41027 10.5214C7.30131 10.6304 7.1541 10.6925 7.00002 10.6945Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
+    <span
+      class="p-inline-message-text"
+      data-pc-section="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Message icon 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <span
+      class="p-inline-message-icon pi pi-check"
+      data-pc-section="icon"
+    />
+    <span
+      class="p-inline-message-text"
+      data-pc-section="text"
+    />
+  </div>
+</div>
+`;
+
+exports[`Message severity error 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-error"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <svg
+      class="p-icon p-inline-message-icon"
+      data-pc-section="icon"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M7 14C5.61553 14 4.26215 13.5895 3.11101 12.8203C1.95987 12.0511 1.06266 10.9579 0.532846 9.67879C0.00303296 8.3997 -0.13559 6.99224 0.134506 5.63437C0.404603 4.2765 1.07129 3.02922 2.05026 2.05026C3.02922 1.07129 4.2765 0.404603 5.63437 0.134506C6.99224 -0.13559 8.3997 0.00303296 9.67879 0.532846C10.9579 1.06266 12.0511 1.95987 12.8203 3.11101C13.5895 4.26215 14 5.61553 14 7C14 8.85652 13.2625 10.637 11.9497 11.9497C10.637 13.2625 8.85652 14 7 14ZM7 1.16667C5.84628 1.16667 4.71846 1.50879 3.75918 2.14976C2.79989 2.79074 2.05222 3.70178 1.61071 4.76768C1.16919 5.83358 1.05367 7.00647 1.27876 8.13803C1.50384 9.26958 2.05941 10.309 2.87521 11.1248C3.69102 11.9406 4.73042 12.4962 5.86198 12.7212C6.99353 12.9463 8.16642 12.8308 9.23232 12.3893C10.2982 11.9478 11.2093 11.2001 11.8502 10.2408C12.4912 9.28154 12.8333 8.15373 12.8333 7C12.8333 5.45291 12.2188 3.96918 11.1248 2.87521C10.0308 1.78125 8.5471 1.16667 7 1.16667ZM4.66662 9.91668C4.58998 9.91704 4.51404 9.90209 4.44325 9.87271C4.37246 9.84333 4.30826 9.8001 4.2544 9.74557C4.14516 9.6362 4.0838 9.48793 4.0838 9.33335C4.0838 9.17876 4.14516 9.0305 4.2544 8.92113L6.17553 7L4.25443 5.07891C4.15139 4.96832 4.09529 4.82207 4.09796 4.67094C4.10063 4.51982 4.16185 4.37563 4.26872 4.26876C4.3756 4.16188 4.51979 4.10066 4.67091 4.09799C4.82204 4.09532 4.96829 4.15142 5.07887 4.25446L6.99997 6.17556L8.92106 4.25446C9.03164 4.15142 9.1779 4.09532 9.32903 4.09799C9.48015 4.10066 9.62434 4.16188 9.73121 4.26876C9.83809 4.37563 9.89931 4.51982 9.90198 4.67094C9.90464 4.82207 9.84855 4.96832 9.74551 5.07891L7.82441 7L9.74554 8.92113C9.85478 9.0305 9.91614 9.17876 9.91614 9.33335C9.91614 9.48793 9.85478 9.6362 9.74554 9.74557C9.69168 9.8001 9.62748 9.84333 9.55669 9.87271C9.4859 9.90209 9.40996 9.91704 9.33332 9.91668C9.25668 9.91704 9.18073 9.90209 9.10995 9.87271C9.03916 9.84333 8.97495 9.8001 8.9211 9.74557L6.99997 7.82444L5.07884 9.74557C5.02499 9.8001 4.96078 9.84333 4.88999 9.87271C4.81921 9.90209 4.74326 9.91704 4.66662 9.91668Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
+    <span
+      class="p-inline-message-text"
+      data-pc-section="text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message severity info 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <svg
+      class="p-icon p-inline-message-icon"
+      data-pc-section="icon"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M3.11101 12.8203C4.26215 13.5895 5.61553 14 7 14C8.85652 14 10.637 13.2625 11.9497 11.9497C13.2625 10.637 14 8.85652 14 7C14 5.61553 13.5895 4.26215 12.8203 3.11101C12.0511 1.95987 10.9579 1.06266 9.67879 0.532846C8.3997 0.00303296 6.99224 -0.13559 5.63437 0.134506C4.2765 0.404603 3.02922 1.07129 2.05026 2.05026C1.07129 3.02922 0.404603 4.2765 0.134506 5.63437C-0.13559 6.99224 0.00303296 8.3997 0.532846 9.67879C1.06266 10.9579 1.95987 12.0511 3.11101 12.8203ZM3.75918 2.14976C4.71846 1.50879 5.84628 1.16667 7 1.16667C8.5471 1.16667 10.0308 1.78125 11.1248 2.87521C12.2188 3.96918 12.8333 5.45291 12.8333 7C12.8333 8.15373 12.4912 9.28154 11.8502 10.2408C11.2093 11.2001 10.2982 11.9478 9.23232 12.3893C8.16642 12.8308 6.99353 12.9463 5.86198 12.7212C4.73042 12.4962 3.69102 11.9406 2.87521 11.1248C2.05941 10.309 1.50384 9.26958 1.27876 8.13803C1.05367 7.00647 1.16919 5.83358 1.61071 4.76768C2.05222 3.70178 2.79989 2.79074 3.75918 2.14976ZM7.00002 4.8611C6.84594 4.85908 6.69873 4.79698 6.58977 4.68801C6.48081 4.57905 6.4187 4.43185 6.41669 4.27776V3.88888C6.41669 3.73417 6.47815 3.58579 6.58754 3.4764C6.69694 3.367 6.84531 3.30554 7.00002 3.30554C7.15473 3.30554 7.3031 3.367 7.4125 3.4764C7.52189 3.58579 7.58335 3.73417 7.58335 3.88888V4.27776C7.58134 4.43185 7.51923 4.57905 7.41027 4.68801C7.30131 4.79698 7.1541 4.85908 7.00002 4.8611ZM7.00002 10.6945C6.84594 10.6925 6.69873 10.6304 6.58977 10.5214C6.48081 10.4124 6.4187 10.2652 6.41669 10.1111V6.22225C6.41669 6.06754 6.47815 5.91917 6.58754 5.80977C6.69694 5.70037 6.84531 5.63892 7.00002 5.63892C7.15473 5.63892 7.3031 5.70037 7.4125 5.80977C7.52189 5.91917 7.58335 6.06754 7.58335 6.22225V10.1111C7.58134 10.2652 7.51923 10.4124 7.41027 10.5214C7.30131 10.6304 7.1541 10.6925 7.00002 10.6945Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
+    <span
+      class="p-inline-message-text"
+      data-pc-section="text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message severity success 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-success"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <svg
+      class="p-icon p-inline-message-icon"
+      data-pc-section="icon"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.86199 11.5948C4.78717 11.5923 4.71366 11.5745 4.64596 11.5426C4.57826 11.5107 4.51779 11.4652 4.46827 11.4091L0.753985 7.69483C0.683167 7.64891 0.623706 7.58751 0.580092 7.51525C0.536478 7.44299 0.509851 7.36177 0.502221 7.27771C0.49459 7.19366 0.506156 7.10897 0.536046 7.03004C0.565935 6.95111 0.613367 6.88 0.674759 6.82208C0.736151 6.76416 0.8099 6.72095 0.890436 6.69571C0.970973 6.67046 1.05619 6.66385 1.13966 6.67635C1.22313 6.68886 1.30266 6.72017 1.37226 6.76792C1.44186 6.81567 1.4997 6.8786 1.54141 6.95197L4.86199 10.2503L12.6397 2.49483C12.7444 2.42694 12.8689 2.39617 12.9932 2.40745C13.1174 2.41873 13.2343 2.47141 13.3251 2.55705C13.4159 2.64268 13.4753 2.75632 13.4938 2.87973C13.5123 3.00315 13.4888 3.1292 13.4271 3.23768L5.2557 11.4091C5.20618 11.4652 5.14571 11.5107 5.07801 11.5426C5.01031 11.5745 4.9368 11.5923 4.86199 11.5948Z"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="p-inline-message-text"
+      data-pc-section="text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message severity warn 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-warn"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <svg
+      class="p-icon p-inline-message-icon"
+      data-pc-section="icon"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13.4018 13.1893H0.598161C0.49329 13.189 0.390283 13.1615 0.299143 13.1097C0.208003 13.0578 0.131826 12.9832 0.0780112 12.8932C0.0268539 12.8015 0 12.6982 0 12.5931C0 12.4881 0.0268539 12.3848 0.0780112 12.293L6.47985 1.08982C6.53679 1.00399 6.61408 0.933574 6.70484 0.884867C6.7956 0.836159 6.897 0.810669 7 0.810669C7.103 0.810669 7.2044 0.836159 7.29516 0.884867C7.38592 0.933574 7.46321 1.00399 7.52015 1.08982L13.922 12.293C13.9731 12.3848 14 12.4881 14 12.5931C14 12.6982 13.9731 12.8015 13.922 12.8932C13.8682 12.9832 13.792 13.0578 13.7009 13.1097C13.6097 13.1615 13.5067 13.189 13.4018 13.1893ZM1.63046 11.989H12.3695L7 2.59425L1.63046 11.989Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.99996 8.78801C6.84143 8.78594 6.68997 8.72204 6.57787 8.60993C6.46576 8.49782 6.40186 8.34637 6.39979 8.18784V5.38703C6.39979 5.22786 6.46302 5.0752 6.57557 4.96265C6.68813 4.85009 6.84078 4.78686 6.99996 4.78686C7.15914 4.78686 7.31179 4.85009 7.42435 4.96265C7.5369 5.0752 7.60013 5.22786 7.60013 5.38703V8.18784C7.59806 8.34637 7.53416 8.49782 7.42205 8.60993C7.30995 8.72204 7.15849 8.78594 6.99996 8.78801Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.99996 11.1887C6.84143 11.1866 6.68997 11.1227 6.57787 11.0106C6.46576 10.8985 6.40186 10.7471 6.39979 10.5885V10.1884C6.39979 10.0292 6.46302 9.87658 6.57557 9.76403C6.68813 9.65147 6.84078 9.58824 6.99996 9.58824C7.15914 9.58824 7.31179 9.65147 7.42435 9.76403C7.5369 9.87658 7.60013 10.0292 7.60013 10.1884V10.5885C7.59806 10.7471 7.53416 10.8985 7.42205 11.0106C7.30995 11.1227 7.15849 11.1866 6.99996 11.1887Z"
+        fill="currentColor"
+      />
+    </svg>
+    <span
+      class="p-inline-message-text"
+      data-pc-section="text"
+    >
+      Jest
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Message templating 1`] = `
+<div>
+  <div
+    aria-atomic="true"
+    aria-live="polite"
+    class="p-inline-message p-component p-inline-message-info"
+    data-pc-name="message"
+    data-pc-section="root"
+    role="alert"
+  >
+    <svg
+      class="p-icon p-inline-message-icon"
+      data-pc-section="icon"
+      fill="none"
+      height="14"
+      viewBox="0 0 14 14"
+      width="14"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M3.11101 12.8203C4.26215 13.5895 5.61553 14 7 14C8.85652 14 10.637 13.2625 11.9497 11.9497C13.2625 10.637 14 8.85652 14 7C14 5.61553 13.5895 4.26215 12.8203 3.11101C12.0511 1.95987 10.9579 1.06266 9.67879 0.532846C8.3997 0.00303296 6.99224 -0.13559 5.63437 0.134506C4.2765 0.404603 3.02922 1.07129 2.05026 2.05026C1.07129 3.02922 0.404603 4.2765 0.134506 5.63437C-0.13559 6.99224 0.00303296 8.3997 0.532846 9.67879C1.06266 10.9579 1.95987 12.0511 3.11101 12.8203ZM3.75918 2.14976C4.71846 1.50879 5.84628 1.16667 7 1.16667C8.5471 1.16667 10.0308 1.78125 11.1248 2.87521C12.2188 3.96918 12.8333 5.45291 12.8333 7C12.8333 8.15373 12.4912 9.28154 11.8502 10.2408C11.2093 11.2001 10.2982 11.9478 9.23232 12.3893C8.16642 12.8308 6.99353 12.9463 5.86198 12.7212C4.73042 12.4962 3.69102 11.9406 2.87521 11.1248C2.05941 10.309 1.50384 9.26958 1.27876 8.13803C1.05367 7.00647 1.16919 5.83358 1.61071 4.76768C2.05222 3.70178 2.79989 2.79074 3.75918 2.14976ZM7.00002 4.8611C6.84594 4.85908 6.69873 4.79698 6.58977 4.68801C6.48081 4.57905 6.4187 4.43185 6.41669 4.27776V3.88888C6.41669 3.73417 6.47815 3.58579 6.58754 3.4764C6.69694 3.367 6.84531 3.30554 7.00002 3.30554C7.15473 3.30554 7.3031 3.367 7.4125 3.4764C7.52189 3.58579 7.58335 3.73417 7.58335 3.88888V4.27776C7.58134 4.43185 7.51923 4.57905 7.41027 4.68801C7.30131 4.79698 7.1541 4.85908 7.00002 4.8611ZM7.00002 10.6945C6.84594 10.6925 6.69873 10.6304 6.58977 10.5214C6.48081 10.4124 6.4187 10.2652 6.41669 10.1111V6.22225C6.41669 6.06754 6.47815 5.91917 6.58754 5.80977C6.69694 5.70037 6.84531 5.63892 7.00002 5.63892C7.15473 5.63892 7.3031 5.70037 7.4125 5.80977C7.52189 5.91917 7.58335 6.06754 7.58335 6.22225V10.1111C7.58134 10.2652 7.51923 10.4124 7.41027 10.5214C7.30131 10.6304 7.1541 10.6925 7.00002 10.6945Z"
+        fill="currentColor"
+        fill-rule="evenodd"
+      />
+    </svg>
+    <span
+      class="p-inline-message-text"
+      data-pc-section="text"
+    />
+  </div>
+</div>
+`;
diff --git a/components/lib/message/message.d.ts b/components/lib/message/message.d.ts
new file mode 100644
index 0000000000..3c58d6773c
--- /dev/null
+++ b/components/lib/message/message.d.ts
@@ -0,0 +1,109 @@
+/**
+ *
+ * Message is used to display inline message with various severities.
+ *
+ * [Live Demo](https://www.primereact.org/message)
+ *
+ * @module message
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type MessagePassThroughType<T> = PassThroughType<T, MessagePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MessagePassThroughMethodOptions {
+    props: MessageProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MessageProps.pt}
+ */
+export interface MessagePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MessagePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MessagePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: MessagePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Message component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface MessageProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'content' | 'pt'> {
+    /**
+     * Text of the message.
+     */
+    text?: React.ReactNode | ((props: MessageProps) => React.ReactNode);
+    /**
+     * Severity level of the message.
+     */
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
+    /**
+     * Custom template of the message.
+     */
+    content?: React.ReactNode | ((props: MessageProps) => React.ReactNode);
+    /**
+     * Icon for the message. If not set it will default to severity icon.
+     * @defaultValue based on severity
+     */
+    icon?: IconType<MessageProps> | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MessagePassThroughOptions}
+     */
+    pt?: MessagePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Message**
+ *
+ * _Message is used to display inline message with various severities._
+ *
+ * [Live Demo](https://www.primereact.org/message/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Message extends React.Component<MessageProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/message/package.json b/components/lib/message/package.json
new file mode 100644
index 0000000000..e55bcf8d37
--- /dev/null
+++ b/components/lib/message/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./message.cjs.js",
+    "module": "./message.esm.js",
+    "unpkg": "./message.min.js",
+    "types": "./message.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
new file mode 100644
index 0000000000..eda5bccabb
--- /dev/null
+++ b/components/lib/messages/Messages.js
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { TransitionGroup } from 'react-transition-group';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils } from '../utils/Utils';
+import { MessagesBase } from './MessagesBase';
+import { UIMessage } from './UIMessage';
+
+let messageIdx = 0;
+
+export const Messages = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MessagesBase.getProps(inProps, context);
+        const [messagesState, setMessagesState] = React.useState([]);
+        const elementRef = React.useRef(null);
+        const metaData = {
+            props,
+            ...props.__parentMetadata,
+            state: {
+                messages: messagesState
+            }
+        };
+
+        const ptCallbacks = MessagesBase.setMetaData(metaData);
+
+        useHandleStyle(MessagesBase.css.styles, ptCallbacks.isUnstyled, { name: 'messages' });
+
+        const show = (messageInfo) => {
+            if (messageInfo) {
+                setMessagesState((prev) => assignIdentifiers(prev, messageInfo, true));
+            }
+        };
+
+        const assignIdentifiers = (currentState, messageInfo, copy) => {
+            let messages;
+
+            if (Array.isArray(messageInfo)) {
+                const multipleMessages = messageInfo.reduce((acc, message) => {
+                    acc.push({ _pId: messageIdx++, message });
+
+                    return acc;
+                }, []);
+
+                if (copy) {
+                    messages = currentState ? [...currentState, ...multipleMessages] : multipleMessages;
+                } else {
+                    messages = multipleMessages;
+                }
+            } else {
+                const message = { _pId: messageIdx++, message: messageInfo };
+
+                if (copy) {
+                    messages = currentState ? [...currentState, message] : [message];
+                } else {
+                    messages = [message];
+                }
+            }
+
+            return messages;
+        };
+
+        const clear = () => {
+            setMessagesState([]);
+        };
+
+        const replace = (messageInfo) => {
+            setMessagesState((prev) => assignIdentifiers(prev, messageInfo, false));
+        };
+
+        const remove = (messageInfo) => {
+            // allow removal by ID or by message equality
+            const removeMessage = ObjectUtils.isNotEmpty(messageInfo._pId) ? messageInfo._pId : messageInfo.message || messageInfo;
+
+            setMessagesState((prev) => prev.filter((msg) => msg._pId !== messageInfo._pId && !ObjectUtils.deepEquals(msg.message, removeMessage)));
+
+            props.onRemove && props.onRemove(messageInfo.message || removeMessage);
+        };
+
+        const onClose = (messageInfo) => {
+            remove(messageInfo);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            replace,
+            remove,
+            clear,
+            getElement: () => elementRef.current
+        }));
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                className: props.className,
+                style: props.style
+            },
+            MessagesBase.getOtherProps(props),
+            ptCallbacks.ptm('root')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: ptCallbacks.cx('uimessage.transition'),
+                unmountOnExit: true,
+                timeout: { enter: 300, exit: 300 },
+                options: props.transitionOptions
+            },
+            ptCallbacks.ptm('transition')
+        );
+
+        return (
+            <div ref={elementRef} {...rootProps}>
+                <TransitionGroup>
+                    {messagesState &&
+                        messagesState.map((message, index) => {
+                            const messageRef = React.createRef();
+
+                            return (
+                                <CSSTransition nodeRef={messageRef} key={message._pId} {...transitionProps}>
+                                    <UIMessage hostName="Messages" ref={messageRef} message={message} onClick={props.onClick} onClose={onClose} ptCallbacks={ptCallbacks} metaData={metaData} index={index} />
+                                </CSSTransition>
+                            );
+                        })}
+                </TransitionGroup>
+            </div>
+        );
+    })
+);
+
+Messages.displayName = 'Messages';
diff --git a/components/lib/messages/MessagesBase.js b/components/lib/messages/MessagesBase.js
new file mode 100644
index 0000000000..405f63a981
--- /dev/null
+++ b/components/lib/messages/MessagesBase.js
@@ -0,0 +1,87 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-message-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-message-icon {
+        flex-shrink: 0;
+    }
+    
+    .p-message-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-message-close.p-link {
+        margin-left: auto;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-message-enter {
+        opacity: 0;
+    }
+    
+    .p-message-enter-active {
+        opacity: 1;
+        transition: opacity .3s;
+    }
+    
+    .p-message-exit {
+        opacity: 1;
+        max-height: 1000px;
+    }
+    
+    .p-message-exit-active {
+        opacity: 0;
+        max-height: 0;
+        margin: 0;
+        overflow: hidden;
+        transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;
+    }
+    
+    .p-message-exit-active .p-message-close {
+        display: none;
+    }
+}
+`;
+
+const classes = {
+    uimessage: {
+        root: ({ severity }) =>
+            classNames('p-message p-component', {
+                [`p-message-${severity}`]: severity
+            }),
+        wrapper: 'p-message-wrapper',
+        detail: 'p-message-detail',
+        summary: 'p-message-summary',
+        icon: 'p-message-icon',
+        buttonicon: 'p-message-close-icon',
+        button: 'p-message-close p-link',
+        transition: 'p-message'
+    }
+};
+
+export const MessagesBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Messages',
+        __parentMetadata: null,
+        id: null,
+        className: null,
+        style: null,
+        transitionOptions: null,
+        onRemove: null,
+        onClick: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/messages/UIMessage.js b/components/lib/messages/UIMessage.js
new file mode 100644
index 0000000000..6d57270453
--- /dev/null
+++ b/components/lib/messages/UIMessage.js
@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { useTimeout } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { ExclamationTriangleIcon } from '../icons/exclamationtriangle';
+import { InfoCircleIcon } from '../icons/infocircle';
+import { TimesIcon } from '../icons/times';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, IconUtils } from '../utils/Utils';
+import { useMergeProps } from '../hooks/Hooks';
+
+export const UIMessage = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const {
+            message: messageInfo,
+            metaData: parentMetaData,
+            ptCallbacks: { ptm, ptmo, cx },
+            index
+        } = props;
+        const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle, icon: _icon, closeIcon: _closeIcon, pt } = messageInfo.message;
+        const params = { index };
+        const parentParams = { ...parentMetaData, ...params };
+        const [clearTimer] = useTimeout(
+            () => {
+                onClose(null);
+            },
+            life || 3000,
+            !sticky
+        );
+
+        const getPTOptions = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const onClose = (event) => {
+            clearTimer();
+            props.onClose && props.onClose(props.message);
+
+            if (event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const onClick = () => {
+            props.onClick && props.onClick(props.message);
+        };
+
+        const createCloseIcon = () => {
+            if (closable !== false) {
+                const buttonIconProps = mergeProps(
+                    {
+                        className: cx('uimessage.buttonicon')
+                    },
+                    getPTOptions('buttonicon', parentParams),
+                    ptmo(pt, 'buttonicon', { ...params, hostName: props.hostName })
+                );
+
+                const icon = _closeIcon || <TimesIcon {...buttonIconProps} />;
+                const closeIcon = IconUtils.getJSXIcon(icon, { ...buttonIconProps }, { props });
+
+                const buttonProps = mergeProps(
+                    {
+                        type: 'button',
+                        className: cx('uimessage.button'),
+                        'aria-label': ariaLabel('close'),
+                        onClick: onClose
+                    },
+                    getPTOptions('button', parentParams),
+                    ptmo(pt, 'button', { ...params, hostName: props.hostName })
+                );
+
+                return (
+                    <button {...buttonProps}>
+                        {closeIcon}
+                        <Ripple />
+                    </button>
+                );
+            }
+
+            return null;
+        };
+
+        const createMessage = () => {
+            if (props.message) {
+                const iconProps = mergeProps(
+                    {
+                        className: cx('uimessage.icon')
+                    },
+                    getPTOptions('icon', parentParams),
+                    ptmo(pt, 'icon', { ...params, hostName: props.hostName })
+                );
+
+                let icon = _icon;
+
+                if (!_icon) {
+                    switch (severity) {
+                        case 'info':
+                            icon = <InfoCircleIcon {...iconProps} />;
+                            break;
+                        case 'warn':
+                            icon = <ExclamationTriangleIcon {...iconProps} />;
+                            break;
+                        case 'error':
+                            icon = <TimesCircleIcon {...iconProps} />;
+                            break;
+                        case 'success':
+                            icon = <CheckIcon {...iconProps} />;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+
+                const iconContent = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+
+                const summaryProps = mergeProps(
+                    {
+                        className: cx('uimessage.summary')
+                    },
+                    getPTOptions('summary', parentParams),
+                    ptmo(pt, 'summary', { ...params, hostName: props.hostName })
+                );
+
+                const detailProps = mergeProps(
+                    {
+                        className: cx('uimessage.detail')
+                    },
+                    getPTOptions('detail', parentParams),
+                    ptmo(pt, 'detail', { ...params, hostName: props.hostName })
+                );
+
+                return (
+                    content || (
+                        <>
+                            {iconContent}
+                            <span {...summaryProps}>{summary}</span>
+                            <span {...detailProps}>{detail}</span>
+                        </>
+                    )
+                );
+            }
+
+            return null;
+        };
+
+        const closeIcon = createCloseIcon();
+        const message = createMessage();
+
+        const wrapperProps = mergeProps(
+            {
+                className: classNames(_contentClassName, cx('uimessage.wrapper')),
+                style: contentStyle
+            },
+            getPTOptions('wrapper', parentParams),
+            ptmo(pt, 'wrapper', { ...params, hostName: props.hostName })
+        );
+
+        const rootProps = mergeProps(
+            {
+                ref,
+                className: classNames(_className, cx('uimessage.root', { severity })),
+                style,
+                role: 'alert',
+                'aria-live': 'assertive',
+                'aria-atomic': 'true',
+                onClick
+            },
+            getPTOptions('root', parentParams),
+            ptmo(pt, 'root', { ...params, hostName: props.hostName })
+        );
+
+        return (
+            <div {...rootProps}>
+                <div {...wrapperProps}>
+                    {message}
+                    {closeIcon}
+                </div>
+            </div>
+        );
+    })
+);
+
+UIMessage.displayName = 'UIMessage';
diff --git a/components/lib/messages/messages.d.ts b/components/lib/messages/messages.d.ts
new file mode 100644
index 0000000000..03ce137b45
--- /dev/null
+++ b/components/lib/messages/messages.d.ts
@@ -0,0 +1,225 @@
+/**
+ *
+ * Messages is used to display inline messages with various severities.
+ *
+ * [Live Demo](https://www.primereact.org/messages)
+ *
+ * @module messages
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type MessagesPassThroughType<T> = PassThroughType<T, MessagesPassThroughMethodOptions>;
+export declare type MessagesPassThroughTransitionType = ReactCSSTransitionProps | ((options: MessagesPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MessagesPassThroughMethodOptions {
+    props: MessagesProps;
+    state: MessagesState;
+    hostName?: string;
+    index?: number;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MessagesProps.pt}
+ */
+export interface MessagesPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MessagesPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: MessagesPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MessagesPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the summary's DOM element.
+     */
+    summary?: MessagesPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the detail's DOM element.
+     */
+    detail?: MessagesPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: MessagesPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the button icon's DOM element.
+     */
+    buttonIcon?: MessagesPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: MessagesPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Messages component.
+ */
+export interface MessagesState {
+    /**
+     * Array of messages
+     */
+    messages: Array<{
+        _pId: number;
+        message: MessagesMessage;
+    }>;
+}
+
+export interface MessagesMessage {
+    /**
+     * Unique id of the message.
+     */
+    id?: string | undefined;
+    /**
+     * Severity of the message.
+     */
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
+    /**
+     * Custom template of the message.
+     */
+    content?: React.ReactNode | undefined;
+    /**
+     * Summary content of the message.
+     */
+    summary?: React.ReactNode;
+    /**
+     * Detail content of the message.
+     */
+    detail?: React.ReactNode;
+    /**
+     * Whether the message can be closed manually using the close icon.
+     * @defaultValue true
+     */
+    closable?: boolean;
+    /**
+     * Icon of the close button.
+     */
+    closeIcon?: IconType<MessagesProps> | undefined;
+    /**
+     * When enabled, message is not removed automatically.
+     */
+    sticky?: boolean;
+    /**
+     * Delay in milliseconds to close the message automatically.
+     * @defaultValue 3000
+     */
+    life?: number;
+    /**
+     * Defines the icon to display.
+     * @defaultValue Defaults to severity icon
+     */
+    icon?: IconType<MessagesProps> | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MessagesPassThroughOptions}
+     */
+    pt?: MessagesPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid properties in Messages component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface MessagesProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when a message is removed.
+     * @param {MessagesMessage} message - Removed message.
+     */
+    onRemove?(message: MessagesMessage): void;
+    /**
+     * Callback to invoke when a message gets clicked.
+     * @param {MessagesMessage} message - Clicked message.
+     */
+    onClick?(message: MessagesMessage): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MessagesPassThroughOptions}
+     */
+    pt?: MessagesPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Messages**
+ *
+ * _Messages is used to display inline messages with various severities._
+ *
+ * [Live Demo](https://www.primereact.org/messages/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Messages extends React.Component<MessagesProps, any> {
+    /**
+     * Used to show the message.
+     * @param {MessagesMessage | MessagesMessage[]} message - Showed message.
+     */
+    public show(message: MessagesMessage | MessagesMessage[]): void;
+    /**
+     * Used to clear the shown messages.
+     */
+    public clear(): void;
+    /**
+     * Used to add new messages after removing all old messages.
+     * @param {MessagesMessage | MessagesMessage[]} message - New message.
+     */
+    public replace(message: MessagesMessage | MessagesMessage[]): void;
+    /**
+     * Used to remove messages.
+     * @param {MessagesMessage | MessagesMessage[]} message - Message to remove
+     */
+    public remove(message: MessagesMessage | MessagesMessage[]): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/messages/package.json b/components/lib/messages/package.json
new file mode 100644
index 0000000000..bc49da6562
--- /dev/null
+++ b/components/lib/messages/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./messages.cjs.js",
+    "module": "./messages.esm.js",
+    "unpkg": "./messages.min.js",
+    "types": "./messages.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/metergroup/MeterGroup.js b/components/lib/metergroup/MeterGroup.js
new file mode 100644
index 0000000000..7299766bda
--- /dev/null
+++ b/components/lib/metergroup/MeterGroup.js
@@ -0,0 +1,162 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils, classNames } from '../utils/Utils';
+import { MeterGroupBase } from './MeterGroupBase';
+
+export const MeterGroup = (inProps) => {
+    const context = React.useContext(PrimeReactContext);
+    const props = MeterGroupBase.getProps(inProps, context);
+    const { values, min, max, orientation, labelPosition, start, end, meter, labelList } = props;
+
+    const mergeProps = useMergeProps();
+    const { ptm, cx, isUnstyled } = MeterGroupBase.setMetaData({
+        props,
+        ...props.__parentMetadata,
+        context: {
+            disabled: props.disabled
+        }
+    });
+
+    useHandleStyle(MeterGroupBase.css.styles, isUnstyled, { name: 'metergroup' });
+
+    let totalPercent = 0;
+    let percentages = [];
+
+    values.map((item) => {
+        totalPercent = totalPercent + item.value;
+        percentages.push(Math.round((item.value / totalPercent) * 100));
+    });
+
+    const calculatePercentage = (meterValue = 0) => {
+        const percentageOfItem = ((meterValue - min) / (max - min)) * 100;
+
+        return Math.round(Math.max(0, Math.min(100, percentageOfItem)));
+    };
+
+    const rootProps = mergeProps(
+        {
+            className: classNames(props.className, cx('root', { orientation }))
+        },
+        MeterGroupBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const createMeters = () => {
+        const meters = values.map((item, index) => {
+            const calculatedPercantage = calculatePercentage(item.value);
+            const meterInlineStyles = {
+                backgroundColor: item.color,
+                width: orientation === 'horizontal' ? calculatedPercantage + '%' : 'auto',
+                height: orientation === 'vertical' ? calculatedPercantage + '%' : 'auto'
+            };
+
+            const meterProps = mergeProps(
+                {
+                    className: cx('meter'),
+                    style: meterInlineStyles
+                },
+                ptm('meter')
+            );
+
+            if (meter || item.meterTemplate) {
+                const meterTemplateProps = mergeProps(
+                    {
+                        className: cx('meter')
+                    },
+                    ptm('meter')
+                );
+
+                return ObjectUtils.getJSXElement(item.meterTemplate || meter, { ...item, percentage: calculatedPercantage, index }, meterTemplateProps);
+            }
+
+            return <span key={index} {...meterProps} />;
+        });
+
+        const meterContainerProps = mergeProps(
+            {
+                className: cx('metercontainer')
+            },
+            ptm('metercontainer')
+        );
+
+        return <div {...meterContainerProps}>{meters}</div>;
+    };
+
+    const createLabelList = () => {
+        const labelListProps = mergeProps(
+            {
+                className: cx('labellist')
+            },
+            ptm('labellist')
+        );
+
+        const labelItemProps = mergeProps(
+            {
+                className: cx('labellistitem')
+            },
+            ptm('labellistitem')
+        );
+
+        const labelProps = mergeProps(
+            {
+                className: cx('label')
+            },
+            ptm('label')
+        );
+
+        return (
+            <ol {...labelListProps}>
+                {values.map((item, index) => {
+                    const labelIconProps = mergeProps(
+                        {
+                            className: classNames(cx('labelicon'), item.icon),
+                            style: { color: item.color }
+                        },
+                        ptm('labelicon')
+                    );
+
+                    const labelListIconProps = mergeProps(
+                        {
+                            className: cx('labellisttype'),
+                            style: { backgroundColor: item.color }
+                        },
+                        ptm('labellisttype')
+                    );
+
+                    const labelIcon = item.icon ? <i {...labelIconProps} /> : <span {...labelListIconProps} />;
+                    const itemPercentage = calculatePercentage(item.value);
+
+                    return (
+                        <li key={index} {...labelItemProps}>
+                            {labelIcon}
+                            <span {...labelProps}>
+                                {item?.label} {`(${itemPercentage}%)`}
+                            </span>
+                        </li>
+                    );
+                })}
+            </ol>
+        );
+    };
+
+    const templateProps = {
+        totalPercent,
+        percentages,
+        values
+    };
+
+    const labelListContent = labelList || createLabelList();
+    const labelElement = ObjectUtils.getJSXElement(labelListContent, { values, totalPercent });
+
+    return (
+        <div {...rootProps} role="meter" aria-valuemin={min} aria-valuemax={max} aria-valuenow={totalPercent}>
+            {labelPosition === 'start' && labelElement}
+            {start && ObjectUtils.getJSXElement(start, templateProps)}
+            {createMeters()}
+            {end && ObjectUtils.getJSXElement(end, templateProps)}
+            {labelPosition === 'end' && labelElement}
+        </div>
+    );
+};
diff --git a/components/lib/metergroup/MeterGroupBase.js b/components/lib/metergroup/MeterGroupBase.js
new file mode 100644
index 0000000000..3815e8ef46
--- /dev/null
+++ b/components/lib/metergroup/MeterGroupBase.js
@@ -0,0 +1,96 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) => [
+        classNames('p-metergroup p-component', {
+            'p-metergroup-horizontal': props.orientation === 'horizontal',
+            'p-metergroup-vertical': props.orientation === 'vertical'
+        })
+    ],
+    metercontainer: 'p-metergroup-meter-container',
+    meter: 'p-metergroup-meter',
+    labellist: ({ props }) =>
+        classNames('p-metergroup-label-list', {
+            'p-metergroup-label-list-start': props.labelPosition === 'start',
+            'p-metergroup-label-list-end': props.labelPosition === 'end',
+            'p-metergroup-label-list-vertical': props.labelOrientation === 'vertical',
+            'p-metergroup-label-list-horizontal': props.labelOrientation === 'horizontal'
+        }),
+    labellistitem: 'p-metergroup-label-list-item',
+    labelicon: 'p-metergroup-label-icon',
+    labellisttype: 'p-metergroup-label-type',
+    label: 'p-metergroup-label'
+};
+
+const styles = `
+@layer primereact {
+    .p-metergroup {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-metergroup-vertical.p-metergroup {
+        display: flex;
+    }
+
+    .p-metergroup-vertical .p-metergroup-meter-container {
+        flex-direction: column;
+    }
+
+    .p-metergroup-meter-container {
+        display: flex;
+    }
+
+    .p-metergroup-label-list {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-metergroup-vertical .p-metergroup-label-list {
+        align-items: start;
+    }
+
+    .p-metergroup-label-list-vertical {
+        flex-direction: column;
+    }
+
+    .p-metergroup-label-list-horizontal {
+        flex-direction: row;
+    }
+
+    .p-metergroup-label-list-item {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .p-metergroup-label-type {
+        display: inline-block;
+    }
+}
+`;
+
+export const MeterGroupBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'MeterGroup',
+        __parentMetadata: null,
+        children: undefined,
+        className: null,
+        values: null,
+        min: 0,
+        max: 100,
+        orientation: 'horizontal',
+        labelPosition: 'end',
+        labelOrientation: 'horizontal',
+        start: null,
+        end: null,
+        meter: null,
+        labelList: null
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/metergroup/metergroup.d.ts b/components/lib/metergroup/metergroup.d.ts
new file mode 100644
index 0000000000..5432c9f684
--- /dev/null
+++ b/components/lib/metergroup/metergroup.d.ts
@@ -0,0 +1,176 @@
+/**
+ *
+ * MeterGroup displays scalar measurements within a known range.
+ *
+ * [Live Demo](https://www.primereact.org/metergroup/)
+ *
+ * @module metergroup
+ *
+ */
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type MeterGroupPassThroughType<T> = PassThroughType<T, MeterGroupPassThroughMethodOptions>;
+export declare type MeterGroupPassThroughTransitionType = ReactCSSTransitionProps | ((options: MeterGroupPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Defines current options in MeterGroup component.
+ */
+export interface MeterGroupContext {
+    /**
+     * Current disabled state of the component as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MeterGroupPassThroughMethodOptions {
+    props: MeterGroupProps;
+    context: MeterGroupContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MeterGroupProps.pt}
+ */
+export interface MeterGroupPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the label list's DOM element.
+     */
+    labellist?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLOListElement>>;
+    /**
+     * Used to pass attributes to the label list item's DOM element.
+     */
+    labellistitem?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to pass attributes to the label list type's DOM element.
+     */
+    labellisttype?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLOrSVGElement | any>>;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    label?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to pass attributes to the meter container's DOM element.
+     */
+    metercontainer?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the meter's DOM element.
+     */
+    meter?: MeterGroupPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+interface MeterGroupValue {
+    value?: number;
+    label?: string | HTMLElement;
+    color?: string;
+    [key: string]: any;
+}
+
+interface CustomRenderProps {
+    totalPercent: number;
+    percentages: number[];
+    values: MeterGroupValue[];
+}
+
+/**
+ * Defines valid properties in MeterGroup component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+interface MeterGroupProps {
+    /**
+     * Additional CSS classes to apply to the MeterGroup.
+     */
+    className?: string;
+
+    /**
+     * An array of values to be represented by the MeterGroup.
+     */
+    values?: MeterGroupValue[];
+
+    /**
+     * The minimum value for the MeterGroup.
+     * @defaultValue 0
+     */
+    min?: number;
+
+    /**
+     * The maximum value for the MeterGroup.
+     * @defaultValue 100
+     */
+    max?: number;
+
+    /**
+     * The orientation of the MeterGroup. Can be either 'horizontal' or 'vertical'.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+
+    /**
+     * The position of the label. Can be either 'start' or 'end'.
+     * @defaultValue 'end'
+     */
+    labelPosition?: 'start' | 'end';
+
+    /**
+     * The orientation of the label. Can be either 'horizontal' or 'vertical'.
+     * @defaultValue 'horizontal'
+     */
+    labelOrientation?: 'horizontal' | 'vertical';
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MeterGroupPassThroughOptions}
+     */
+    pt?: MeterGroupPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * A function to render custom start label.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    start?: (props: CustomRenderProps) => ReactNode;
+
+    /**
+     * A function to render custom end label.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    end?: (props: CustomRenderProps) => ReactNode;
+
+    /**
+     * A function to render a custom meter.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    meter?: (props: CustomRenderProps) => ReactNode;
+
+    /**
+     * A function to render a custom label list.
+     * @param {CustomRenderProps} prop - Custom Render Props
+     */
+    labelList?: (props: CustomRenderProps) => ReactNode;
+}
+
+/**
+ * **PrimeReact - MeterGroup**
+ *
+ * _MeterGroup is an extension to standard input element with theming and keyfiltering._
+ *
+ * [Live Demo](https://www.primereact.org/metergroup/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class MeterGroup extends React.Component<MeterGroupProps, any> {}
diff --git a/components/lib/metergroup/package.json b/components/lib/metergroup/package.json
new file mode 100644
index 0000000000..026bfe62cf
--- /dev/null
+++ b/components/lib/metergroup/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./metergroup.cjs.js",
+    "module": "./metergroup.esm.js",
+    "unpkg": "./metergroup.min.js",
+    "types": "./metergroup.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
new file mode 100644
index 0000000000..cd65311b3a
--- /dev/null
+++ b/components/lib/multiselect/MultiSelect.js
@@ -0,0 +1,1264 @@
+import * as React from 'react';
+import PrimeReact, { FilterService, PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useDebounce, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { SpinnerIcon } from '../icons/spinner';
+import { TimesIcon } from '../icons/times';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { MultiSelectBase } from './MultiSelectBase';
+import { MultiSelectPanel } from './MultiSelectPanel';
+
+export const MultiSelect = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MultiSelectBase.getProps(inProps, context);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(null);
+        const [clicked, setClicked] = React.useState(false);
+        const [filterValue, filterState, setFilterState] = useDebounce('', props.filterDelay || 0);
+        const [startRangeIndex, setStartRangeIndex] = React.useState(-1);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(props.inline);
+        const elementRef = React.useRef(null);
+        const searchValue = React.useRef(null);
+        const searchTimeout = React.useRef(null);
+        const firstHiddenFocusableElementOnOverlay = React.useRef(null);
+        const lastHiddenFocusableElementOnOverlay = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const labelContainerRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const labelRef = React.useRef(null);
+        const hasFilter = filterState && filterState.trim().length > 0;
+        const empty = ObjectUtils.isEmpty(props.value);
+        const equalityKey = props.optionValue ? null : props.dataKey;
+        const metaData = {
+            props,
+            state: {
+                filterState: filterState,
+                focused: focusedState,
+                overlayVisible: overlayVisibleState
+            }
+        };
+        const { ptm, cx, sx, isUnstyled } = MultiSelectBase.setMetaData(metaData);
+
+        useHandleStyle(MultiSelectBase.css.styles, isUnstyled, { name: 'multiselect' });
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { type, valid }) => {
+                if (valid) {
+                    if (type === 'outside') {
+                        if (!isClearClicked(event) && !isSelectAllClicked(event)) {
+                            hide();
+                        }
+                    } else if (context.hideOverlaysOnDocumentScrolling) {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const onFirstHiddenFocus = (event) => {
+            const focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+
+            DomHandler.focus(focusableEl);
+        };
+
+        const onLastHiddenFocus = (event) => {
+            const focusableEl = event.relatedTarget === inputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : inputRef.current;
+
+            DomHandler.focus(focusableEl);
+        };
+
+        const onPanelClick = (event) => {
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: elementRef.current
+            });
+        };
+
+        const allowOptionSelect = () => {
+            return !props.selectionLimit || !props.value || (props.value && props.value.length < props.selectionLimit);
+        };
+
+        const findNextSelectedOptionIndex = (index) => {
+            const matchedOptionIndex = hasSelectedOption() && index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidSelectedOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;
+        };
+
+        const findPrevSelectedOptionIndex = (index) => {
+            const matchedOptionIndex = hasSelectedOption() && index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidSelectedOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : -1;
+        };
+
+        const findNearestSelectedOptionIndex = (index, firstCheckUp = false) => {
+            let matchedOptionIndex = -1;
+
+            if (hasSelectedOption()) {
+                if (firstCheckUp) {
+                    matchedOptionIndex = findPrevSelectedOptionIndex(index);
+                    matchedOptionIndex = matchedOptionIndex === -1 ? findNextSelectedOptionIndex(index) : matchedOptionIndex;
+                } else {
+                    matchedOptionIndex = findNextSelectedOptionIndex(index);
+                    matchedOptionIndex = matchedOptionIndex === -1 ? findPrevSelectedOptionIndex(index) : matchedOptionIndex;
+                }
+            }
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+        };
+
+        const onOptionSelectRange = (event, start = -1, end = -1) => {
+            start === -1 && (start = findNearestSelectedOptionIndex(end, true));
+            end === -1 && (end = findNearestSelectedOptionIndex(start));
+
+            if (start !== -1 && end !== -1) {
+                const rangeStart = Math.min(start, end);
+                const rangeEnd = Math.max(start, end);
+                const value = visibleOptions
+                    .slice(rangeStart, rangeEnd + 1)
+                    .filter((option) => isValidOption(option))
+                    .map((option) => getOptionValue(option));
+
+                updateModel(event, value, value);
+            }
+        };
+
+        const onOptionSelect = (event, option, index = -1) => {
+            if (props.disabled || isOptionDisabled(option)) {
+                return;
+            }
+
+            let selected = isSelected(option);
+            let value = null;
+
+            if (selected) {
+                value = props.value.filter((val) => !ObjectUtils.equals(val, getOptionValue(option), equalityKey));
+            } else {
+                value = [...(props.value || []), getOptionValue(option)];
+            }
+
+            updateModel(event, value, option);
+            index !== -1 && setFocusedOptionIndex(index);
+        };
+
+        const onClick = (event) => {
+            if (!props.inline && !props.disabled && !props.loading && !isPanelClicked(event) && !isClearClicked(event)) {
+                overlayVisibleState ? hide() : show();
+                DomHandler.focus(inputRef.current);
+                event.preventDefault();
+            }
+
+            setClicked(true);
+        };
+
+        const onArrowDownKey = (event) => {
+            if (!overlayVisibleState) {
+                show();
+                props.editable && changeFocusedOptionIndex(event, findSelectedOptionIndex());
+            } else {
+                const optionIndex = focusedOptionIndex !== -1 ? findNextOptionIndex(focusedOptionIndex) : clicked ? findFirstOptionIndex() : findFirstFocusedOptionIndex();
+
+                if (event.shiftKey) {
+                    onOptionSelectRange(event, startRangeIndex, optionIndex);
+                }
+
+                changeFocusedOptionIndex(event, optionIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event, pressedInInputText = false) => {
+            if (event.altKey && !pressedInInputText) {
+                if (focusedOptionIndex !== -1) {
+                    onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                }
+
+                overlayVisibleState && hide();
+                event.preventDefault();
+            } else {
+                const optionIndex = focusedOptionIndex !== -1 ? findPrevOptionIndex(focusedOptionIndex) : clicked ? findLastOptionIndex() : findLastFocusedOptionIndex();
+
+                changeFocusedOptionIndex(event, optionIndex);
+
+                !overlayVisibleState && show();
+                event.preventDefault();
+            }
+        };
+
+        const onEnterKey = (event) => {
+            if (!overlayVisibleState) {
+                setFocusedOptionIndex(-1);
+                onArrowDownKey(event);
+            } else if (focusedOptionIndex !== -1) {
+                if (event.shiftKey) {
+                    onOptionSelectRange(event, focusedOptionIndex);
+                } else {
+                    onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                }
+            }
+
+            event.preventDefault();
+        };
+
+        const onHomeKey = (event, pressedInInputText = false) => {
+            const { currentTarget } = event;
+
+            if (pressedInInputText) {
+                const len = currentTarget.value.length;
+
+                currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);
+                setFocusedOptionIndex(-1);
+            } else {
+                let metaKey = event.metaKey || event.ctrlKey;
+                let optionIndex = findFirstOptionIndex();
+
+                if (event.shiftKey && metaKey) {
+                    onOptionSelectRange(event, optionIndex, startRangeIndex);
+                }
+
+                changeFocusedOptionIndex(event, optionIndex);
+
+                !overlayVisibleState && show();
+            }
+
+            event.preventDefault();
+        };
+
+        const onEndKey = (event, pressedInInputText = false) => {
+            const { currentTarget } = event;
+
+            if (pressedInInputText) {
+                const len = currentTarget.value.length;
+
+                currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);
+                focusedOptionIndex = -1;
+            } else {
+                let metaKey = event.metaKey || event.ctrlKey;
+                let optionIndex = findLastOptionIndex();
+
+                if (event.shiftKey && metaKey) {
+                    onOptionSelectRange(event, startRangeIndex, optionIndex);
+                }
+
+                changeFocusedOptionIndex(event, optionIndex);
+
+                !overlayVisibleState && show();
+            }
+
+            event.preventDefault();
+        };
+
+        const onPageUpKey = (event) => {
+            event.preventDefault();
+        };
+
+        const onPageDownKey = (event) => {
+            event.preventDefault();
+        };
+
+        const onTabKey = (event, pressedInInputText = false) => {
+            if (!pressedInInputText) {
+                if (overlayVisibleState && hasFocusableElements()) {
+                    DomHandler.focus(event.shiftKey ? lastHiddenFocusableElementOnOverlay.current : firstHiddenFocusableElementOnOverlay.current);
+
+                    event.preventDefault();
+                } else {
+                    if (focusedOptionIndex !== -1) {
+                        onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+                    }
+
+                    overlayVisibleState && hide(filter);
+                }
+            }
+        };
+
+        const onShiftKey = () => {
+            setStartRangeIndex(focusedOptionIndex);
+        };
+
+        const onKeyDown = (event) => {
+            const metaKey = event.metaKey || event.ctrlKey;
+
+            switch (event.code) {
+                case 'ArrowUp':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowDown':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onArrowDownKey(event);
+
+                    break;
+
+                case 'Space':
+                case 'NumpadEnter':
+                case 'Enter':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onEnterKey(event);
+                    break;
+
+                case 'Home':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onHomeKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onEndKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'PageDown':
+                    onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    onPageUpKey(event);
+                    break;
+
+                case 'Escape':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    hide();
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    onShiftKey(event);
+                    break;
+
+                default:
+                    if (event.key === 'a' && metaKey) {
+                        const value = visibleOptions.filter((option) => isValidOption(option)).map((option) => getOptionValue(option));
+
+                        updateModel(event, value, value);
+
+                        event.preventDefault();
+                        break;
+                    }
+
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        !overlayVisibleState && show();
+                        searchOptions(event);
+                        event.preventDefault();
+                    }
+
+                    break;
+            }
+
+            setClicked(false);
+        };
+
+        const onFilterKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowUp':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowDown':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onArrowDownKey(event);
+
+                    break;
+
+                case 'NumpadEnter':
+                case 'Enter':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onEnterKey(event);
+                    break;
+
+                case 'Home':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onHomeKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    onEndKey(event);
+                    event.preventDefault();
+                    break;
+
+                case 'Escape':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    hide();
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+            }
+        };
+
+        const onSelectAll = (event) => {
+            if (props.onSelectAll) {
+                props.onSelectAll(event);
+            } else {
+                let value = null;
+
+                if (event.checked) {
+                    value = [];
+                } else {
+                    const validOptions = visibleOptions.filter((option) => isValidOption(option) && !isOptionDisabled(option));
+
+                    if (validOptions) {
+                        value = validOptions.map((option) => getOptionValue(option));
+                    }
+                }
+
+                // make sure not to exceed the selection limit
+                if (props.selectionLimit && value && value.length) {
+                    value = value.slice(0, props.selectionLimit);
+                }
+
+                updateModel(event.originalEvent, value, value);
+            }
+        };
+
+        const updateModel = (event, value, selectedOption) => {
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value,
+                    selectedOption,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value
+                    }
+                });
+                DomHandler.focus(inputRef.current);
+            }
+        };
+
+        const onFilterInputChange = (event) => {
+            const filter = event.query;
+
+            setFilterState(filter);
+
+            if (props.onFilter) {
+                props.onFilter({
+                    originalEvent: event,
+                    filter
+                });
+            }
+        };
+
+        const resetFilter = () => {
+            setFilterState('');
+            props.onFilter && props.onFilter({ filter: '' });
+        };
+
+        const scrollInView = (event) => {
+            if (!overlayVisibleState) {
+                return;
+            }
+
+            let focusedItem;
+
+            if (event) {
+                focusedItem = event.currentTarget;
+            } else {
+                focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+            }
+
+            if (focusedItem && focusedItem.scrollIntoView) {
+                focusedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        };
+
+        const show = () => {
+            setOverlayVisibleState(true);
+            setFocusedOptionIndex(focusedOptionIndex !== -1 ? focusedOptionIndex : props.autoOptionFocus ? findFirstFocusedOptionIndex() : findSelectedOptionIndex());
+            DomHandler.focus(inputRef.current);
+        };
+
+        const hide = () => {
+            setFocusedOptionIndex(-1);
+            setOverlayVisibleState(false);
+            setClicked(false);
+        };
+
+        const onOverlayEnter = (callback) => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            alignOverlay();
+            scrollInView();
+            callback && callback();
+        };
+
+        const onOverlayEntered = (callback) => {
+            callback && callback();
+            bindOverlayListener();
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            if (props.filter && props.resetFilterOnHide) {
+                resetFilter();
+            }
+
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const alignOverlay = () => {
+            !props.inline && DomHandler.alignOverlay(overlayRef.current, labelContainerRef.current.parentElement, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+        };
+
+        const isClearClicked = (event) => {
+            return DomHandler.getAttribute(event.target, 'data-pc-section') === 'clearicon';
+        };
+
+        const isSelectAllClicked = (event) => {
+            return DomHandler.getAttribute(event.target, 'data-pc-section') === 'headercheckboxcontainer';
+        };
+
+        const isPanelClicked = (event) => {
+            return overlayRef.current && overlayRef.current.contains(event.target);
+        };
+
+        const onCloseClick = (event) => {
+            hide();
+            DomHandler.focus(inputRef.current);
+            event.preventDefault();
+            event.stopPropagation();
+        };
+
+        const getSelectedOptionIndex = () => {
+            if (props.value != null && props.options) {
+                if (props.optionGroupLabel) {
+                    let groupIndex = 0;
+                    const optionIndex = props.options.findIndex((optionGroup, i) => (groupIndex = i) && findOptionIndexInList(props.value, getOptionGroupChildren(optionGroup)) !== -1);
+
+                    return optionIndex !== -1 ? { group: groupIndex, option: optionIndex } : -1;
+                }
+
+                return findOptionIndexInList(props.value, props.options);
+            }
+
+            return -1;
+        };
+
+        const findOptionIndexInList = (value, list) => {
+            return list.findIndex((item) => value.some((val) => ObjectUtils.equals(val, getOptionValue(item), equalityKey)));
+        };
+
+        const isEquals = (value1, value2) => {
+            return ObjectUtils.equals(value1, value2, equalityKey);
+        };
+
+        const isSelected = (option) => {
+            if (props.value) {
+                const optionValue = getOptionValue(option);
+                const isUsed = isOptionValueUsed(option);
+
+                return props.value.some((val) => ObjectUtils.equals(isUsed ? val : getOptionValue(val), optionValue, equalityKey));
+            }
+
+            return false;
+        };
+
+        const getLabelByValue = (val) => {
+            let option;
+
+            if (props.options) {
+                if (props.optionGroupLabel) {
+                    for (let optionGroup of props.options) {
+                        option = findOptionByValue(val, getOptionGroupChildren(optionGroup));
+
+                        if (option) {
+                            break;
+                        }
+                    }
+                } else {
+                    option = findOptionByValue(val, props.options);
+
+                    if (ObjectUtils.isEmpty(option)) {
+                        option = findOptionByValue(val, props.value);
+                    }
+                }
+            }
+
+            return option ? getOptionLabel(option) : null;
+        };
+
+        const findOptionByValue = (val, list) => {
+            return list.find((option) => ObjectUtils.equals(getOptionValue(option), val, equalityKey));
+        };
+
+        const onFocus = (event) => {
+            setFocusedState(true);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocusedState(false);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const isAllSelected = () => {
+            if (props.onSelectAll) {
+                return props.selectAll;
+            }
+
+            if (ObjectUtils.isEmpty(visibleOptions)) {
+                return false;
+            }
+
+            const options = visibleOptions.filter((option) => !isOptionDisabled(option) && isValidOption(option));
+
+            return !options.some((option) => !isSelected(option));
+        };
+
+        const getOptionLabel = (option) => {
+            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
+        };
+
+        const getOptionValue = (option) => {
+            if (props.useOptionAsValue) {
+                return option;
+            }
+
+            if (props.optionValue) {
+                return ObjectUtils.resolveFieldData(option, props.optionValue);
+            }
+
+            return option && option.value !== undefined ? option.value : option;
+        };
+
+        const getOptionRenderKey = (option) => {
+            return props.dataKey ? ObjectUtils.resolveFieldData(option, props.dataKey) : getOptionLabel(option);
+        };
+
+        const getOptionGroupRenderKey = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
+        };
+
+        const getOptionGroupLabel = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
+        };
+
+        const getOptionGroupChildren = (optionGroup) => {
+            return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupChildren);
+        };
+
+        const isOptionDisabled = (option) => {
+            // disable if we have hit our selection limit
+            if (!allowOptionSelect() && !isSelected(option)) {
+                return true;
+            }
+
+            // check if custom optionDisabled function is being used
+            const { optionDisabled } = props;
+
+            if (optionDisabled) {
+                return ObjectUtils.isFunction(optionDisabled) ? optionDisabled(option) : ObjectUtils.resolveFieldData(option, optionDisabled);
+            }
+
+            // fallback to the option itself disabled value
+            return option && (option.disabled ?? false);
+        };
+
+        const isOptionValueUsed = (option) => {
+            return (!props.useOptionAsValue && props.optionValue) || (option && option.value !== undefined);
+        };
+
+        const isOptionGroup = (option) => {
+            return props.optionGroupLabel && option.group;
+        };
+
+        const hasSelectedOption = () => {
+            return ObjectUtils.isNotEmpty(props.value);
+        };
+
+        const hasFocusableElements = () => {
+            return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
+        };
+
+        const isOptionMatched = (option) => {
+            return isValidOption(option) && getOptionLabel(option)?.toLocaleLowerCase(props.filterLocale).startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
+        };
+
+        const isValidOption = (option) => {
+            return ObjectUtils.isNotEmpty(option) && !(isOptionDisabled(option) || isOptionGroup(option));
+        };
+
+        const isValidSelectedOption = (option) => {
+            return isValidOption(option) && isSelected(option);
+        };
+
+        const findSelectedOptionIndex = () => {
+            if (hasSelectedOption()) {
+                for (let index = props.value.length - 1; index >= 0; index--) {
+                    const value = props.value[index];
+                    const matchedOptionIndex = visibleOptions.findIndex((option) => isValidSelectedOption(option) && isEquals(value, getOptionValue(option)));
+
+                    if (matchedOptionIndex > -1) {
+                        return matchedOptionIndex;
+                    }
+                }
+            }
+
+            return -1;
+        };
+
+        const findFirstFocusedOptionIndex = () => {
+            const selectedIndex = findSelectedOptionIndex();
+
+            return selectedIndex < 0 ? findFirstOptionIndex() : selectedIndex;
+        };
+
+        const findLastFocusedOptionIndex = () => {
+            const selectedIndex = findSelectedOptionIndex();
+
+            return selectedIndex < 0 ? findLastOptionIndex() : selectedIndex;
+        };
+
+        const findFirstOptionIndex = () => {
+            return visibleOptions.findIndex((option) => isValidOption(option));
+        };
+
+        const findLastOptionIndex = () => {
+            return ObjectUtils.findLastIndex(visibleOptions, (option) => isValidOption(option));
+        };
+
+        const findNextOptionIndex = (index) => {
+            const matchedOptionIndex = index < visibleOptions.length - 1 ? visibleOptions.slice(index + 1).findIndex((option) => isValidOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
+        };
+
+        const findPrevOptionIndex = (index) => {
+            const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(visibleOptions.slice(0, index), (option) => isValidOption(option)) : -1;
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+        };
+
+        const searchOptions = (event) => {
+            searchValue.current = (searchValue.current || '') + event.key;
+
+            let optionIndex = -1;
+
+            if (ObjectUtils.isNotEmpty(searchValue.current)) {
+                if (focusedOptionIndex !== -1) {
+                    optionIndex = visibleOptions.slice(focusedOptionIndex).findIndex((option) => isOptionMatched(option));
+                    optionIndex = optionIndex === -1 ? visibleOptions.slice(0, focusedOptionIndex).findIndex((option) => isOptionMatched(option)) : optionIndex + focusedOptionIndex;
+                } else {
+                    optionIndex = visibleOptions.findIndex((option) => isOptionMatched(option));
+                }
+
+                if (optionIndex === -1 && focusedOptionIndex === -1) {
+                    optionIndex = findFirstFocusedOptionIndex();
+                }
+
+                if (optionIndex !== -1) {
+                    changeFocusedOptionIndex(event, optionIndex);
+                }
+            }
+
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout.current);
+            }
+
+            searchTimeout.current = setTimeout(() => {
+                searchValue.current = '';
+                searchTimeout.current = null;
+            }, 500);
+        };
+
+        const changeFocusedOptionIndex = (event, index) => {
+            if (focusedOptionIndex !== index) {
+                setFocusedOptionIndex(index);
+                scrollInView(event);
+
+                if (props.selectOnFocus) {
+                    onOptionSelect(event, visibleOptions[index], false);
+                }
+            }
+        };
+
+        const removeChip = (event, item) => {
+            event.stopPropagation();
+
+            if (!isVisible(event.currentTarget)) return;
+
+            const value = props.value.filter((val) => !ObjectUtils.equals(val, item, equalityKey));
+
+            if (props.onRemove) {
+                props.onRemove({
+                    originalEvent: event,
+                    value
+                });
+            }
+
+            updateModel(event, value, item);
+        };
+
+        const isVisible = (element) => {
+            const parentElement = labelRef.current;
+            const isOverflow = parentElement.clientWidth < parentElement.scrollWidth;
+
+            if (!isOverflow) return true;
+
+            const target = element.closest('[data-pc-section="token"]');
+            const parentStyles = window.getComputedStyle(parentElement);
+            const targetStyles = window.getComputedStyle(target);
+
+            const parentWidth = parentElement.clientWidth - parseFloat(parentStyles.paddingLeft) - parseFloat(parentStyles.paddingRight);
+            const targetRight = target.getBoundingClientRect().right + parseFloat(targetStyles.marginRight) - parentElement.getBoundingClientRect().left;
+
+            return targetRight <= parentWidth;
+        };
+
+        const getSelectedItemsLabel = () => {
+            const pattern = /{(.*?)}/;
+            const selectedItemsLabel = props.selectedItemsLabel || localeOption('selectionMessage');
+            const valueLength = props.value ? props.value.length : 0;
+
+            if (pattern.test(selectedItemsLabel)) {
+                return selectedItemsLabel.replace(selectedItemsLabel.match(pattern)[0], valueLength + '');
+            }
+
+            return selectedItemsLabel;
+        };
+
+        const getLabel = () => {
+            if (empty || props.fixedPlaceholder) {
+                return '';
+            }
+
+            if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value?.length > props.maxSelectedLabels) {
+                return getSelectedItemsLabel();
+            }
+
+            if (ObjectUtils.isArray(props.value)) {
+                return props.value.reduce((acc, value, index) => acc + (index !== 0 ? ', ' : '') + getLabelByValue(value), '');
+            }
+
+            return '';
+        };
+
+        const getLabelContent = () => {
+            const valueLength = props.value ? props.value.length : 0;
+
+            if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && valueLength > props.maxSelectedLabels) {
+                return getSelectedItemsLabel();
+            }
+
+            if (props.selectedItemTemplate) {
+                if (!empty) {
+                    return props.value.map((val, index) => {
+                        const item = ObjectUtils.getJSXElement(props.selectedItemTemplate, val);
+
+                        return <React.Fragment key={index}>{item}</React.Fragment>;
+                    });
+                }
+
+                return ObjectUtils.getJSXElement(props.selectedItemTemplate);
+            }
+
+            if (props.display === 'chip' && !empty) {
+                const value = props.value.slice(0, props.maxSelectedLabels || valueLength);
+
+                return value.map((val, i) => {
+                    const context = {
+                        context: {
+                            value: val,
+                            index: i
+                        }
+                    };
+                    const label = getLabelByValue(val);
+                    const labelKey = label + '_' + i;
+                    const iconProps = mergeProps(
+                        {
+                            'aria-label': localeOption('removeTokenIcon'),
+                            className: cx('removeTokenIcon'),
+                            onClick: (e) => removeChip(e, val),
+                            onKeyDown: (e) => onRemoveTokenIconKeyDown(e, val),
+                            tabIndex: props.tabIndex || '0'
+                        },
+                        ptm('removeTokenIcon', context)
+                    );
+                    const icon = !props.disabled && (props.removeIcon ? IconUtils.getJSXIcon(props.removeIcon, { ...iconProps }, { props }) : <TimesCircleIcon {...iconProps} />);
+
+                    const tokenProps = mergeProps(
+                        {
+                            className: cx('token')
+                        },
+                        ptm('token', context)
+                    );
+
+                    const tokenLabelProps = mergeProps(
+                        {
+                            className: cx('tokenLabel')
+                        },
+                        ptm('tokenLabel', context)
+                    );
+
+                    return (
+                        <div {...tokenProps} key={labelKey}>
+                            <span {...tokenLabelProps}>{label}</span>
+                            {icon}
+                        </div>
+                    );
+                });
+            }
+
+            return getLabel();
+        };
+
+        const getVisibleOptions = () => {
+            const options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
+
+            if (hasFilter) {
+                const filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
+                const searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
+
+                if (props.optionGroupLabel) {
+                    const filteredGroups = [];
+
+                    for (let optgroup of props.options) {
+                        let filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+
+                        if (filteredSubOptions && filteredSubOptions.length) {
+                            filteredGroups.push({ ...optgroup, ...{ [props.optionGroupChildren]: filteredSubOptions } });
+                        }
+                    }
+
+                    return flatOptions(filteredGroups);
+                }
+
+                return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+            }
+
+            return options;
+        };
+
+        const flatOptions = (options) => {
+            return (options || []).reduce((result, option, index) => {
+                result.push({ ...option, group: true, index });
+
+                const optionGroupChildren = getOptionGroupChildren(option);
+
+                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
+
+                return result;
+            }, []);
+        };
+
+        const onClearIconKeyDown = (event) => {
+            switch (event.code) {
+                case 'Space':
+                case 'NumpadEnter':
+                case 'Enter':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    updateModel(event, [], []);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+            }
+        };
+
+        const onRemoveTokenIconKeyDown = (event, val) => {
+            switch (event.code) {
+                case 'Space':
+                case 'NumpadEnter':
+                case 'Enter':
+                    if (props.inline) {
+                        break;
+                    }
+
+                    removeChip(event, val);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    break;
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        useMountEffect(() => {
+            alignOverlay();
+        });
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        React.useEffect(() => {
+            if (props.overlayVisible === true) {
+                show();
+            } else if (props.overlayVisible === false) {
+                hide();
+            }
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.overlayVisible]);
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState && filterState && hasFilter) {
+                alignOverlay();
+            }
+        }, [overlayVisibleState, filterState, hasFilter]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        const createClearIcon = () => {
+            const clearIconProps = mergeProps(
+                {
+                    className: cx('clearIcon'),
+                    'aria-label': localeOption('clear'),
+                    onClick: (e) => updateModel(e, [], []),
+                    onKeyDown: (e) => onClearIconKeyDown(e),
+                    tabIndex: props.tabIndex || '0'
+                },
+                ptm('clearIcon')
+            );
+
+            const icon = props.clearIcon || <TimesIcon {...clearIconProps} />;
+            const clearIcon = IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props });
+
+            if (!empty && props.showClear && !props.disabled) {
+                return clearIcon;
+            }
+
+            return null;
+        };
+
+        const createLabel = () => {
+            const content = getLabelContent();
+
+            const labelContainerProps = mergeProps(
+                {
+                    ref: labelContainerRef,
+                    className: cx('labelContainer')
+                },
+                ptm('labelContainer')
+            );
+
+            const labelProps = mergeProps(
+                {
+                    ref: labelRef,
+                    className: cx('label', { empty })
+                },
+                ptm('label')
+            );
+
+            return (
+                <div {...labelContainerProps}>
+                    <div {...labelProps}>{content || props.placeholder || props.emptyMessage || 'empty'}</div>
+                </div>
+            );
+        };
+
+        const visibleOptions = getVisibleOptions();
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = MultiSelectBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+
+        const triggerIconProps = mergeProps(
+            {
+                className: cx('triggerIcon')
+            },
+            ptm('triggerIcon')
+        );
+
+        const triggerProps = mergeProps(
+            {
+                className: cx('trigger')
+            },
+            ptm('trigger')
+        );
+
+        const loadingIcon = props.loadingIcon ? IconUtils.getJSXIcon(props.loadingIcon, { ...triggerIconProps }, { props }) : <SpinnerIcon spin {...triggerIconProps} />;
+        const dropdownIcon = props.dropdownIcon ? IconUtils.getJSXIcon(props.dropdownIcon, { ...triggerIconProps }, { props }) : <ChevronDownIcon {...triggerIconProps} />;
+        const triggerIcon = <div {...triggerProps}>{props.loading ? loadingIcon : dropdownIcon}</div>;
+
+        const label = !props.inline && createLabel();
+        const clearIcon = !props.inline && createClearIcon();
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                style: { ...props.style, ...sx('root') },
+                className: classNames(props.className, cx('root', { focusedState, context, overlayVisibleState })),
+                ...otherProps,
+                onClick: onClick
+            },
+            MultiSelectBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const hiddenInputWrapperProps = mergeProps(
+            {
+                className: 'p-hidden-accessible',
+                'data-p-hidden-accessible': true
+            },
+            ptm('hiddenInputWrapper')
+        );
+
+        const inputProps = mergeProps(
+            {
+                ref: inputRef,
+                id: props.inputId,
+                name: props.name,
+                type: 'text',
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown,
+                role: 'combobox',
+                'aria-expanded': overlayVisibleState,
+                disabled: props.disabled,
+                tabIndex: !props.disabled ? props.tabIndex : -1,
+                value: getLabel(),
+                ...ariaProps
+            },
+            ptm('input')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    <div {...hiddenInputWrapperProps}>
+                        <input {...inputProps} readOnly />
+                    </div>
+                    {!props.inline && (
+                        <>
+                            {label}
+                            {clearIcon}
+                            {triggerIcon}
+                        </>
+                    )}
+
+                    <MultiSelectPanel
+                        hostName="MultiSelect"
+                        ref={overlayRef}
+                        visibleOptions={visibleOptions}
+                        {...props}
+                        onClick={onPanelClick}
+                        onOverlayHide={hide}
+                        filterValue={filterValue}
+                        focusedOptionIndex={focusedOptionIndex}
+                        onFirstHiddenFocus={onFirstHiddenFocus}
+                        onLastHiddenFocus={onLastHiddenFocus}
+                        firstHiddenFocusableElementOnOverlay={firstHiddenFocusableElementOnOverlay}
+                        lastHiddenFocusableElementOnOverlay={lastHiddenFocusableElementOnOverlay}
+                        setFocusedOptionIndex={setFocusedOptionIndex}
+                        hasFilter={hasFilter}
+                        isValidOption={isValidOption}
+                        getOptionValue={getOptionValue}
+                        updateModel={updateModel}
+                        onFilterInputChange={onFilterInputChange}
+                        onFilterKeyDown={onFilterKeyDown}
+                        resetFilter={resetFilter}
+                        onCloseClick={onCloseClick}
+                        onSelectAll={onSelectAll}
+                        getOptionLabel={getOptionLabel}
+                        getOptionRenderKey={getOptionRenderKey}
+                        isOptionDisabled={isOptionDisabled}
+                        getOptionGroupChildren={getOptionGroupChildren}
+                        getOptionGroupLabel={getOptionGroupLabel}
+                        getOptionGroupRenderKey={getOptionGroupRenderKey}
+                        isSelected={isSelected}
+                        getSelectedOptionIndex={getSelectedOptionIndex}
+                        isAllSelected={isAllSelected}
+                        onOptionSelect={onOptionSelect}
+                        allowOptionSelect={allowOptionSelect}
+                        in={overlayVisibleState}
+                        onEnter={onOverlayEnter}
+                        onEntered={onOverlayEntered}
+                        onExit={onOverlayExit}
+                        onExited={onOverlayExited}
+                        ptm={ptm}
+                        cx={cx}
+                        sx={sx}
+                        isUnstyled={isUnstyled}
+                        metaData={metaData}
+                        changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    />
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+MultiSelect.displayName = 'MultiSelect';
diff --git a/components/lib/multiselect/MultiSelectBase.js b/components/lib/multiselect/MultiSelectBase.js
new file mode 100644
index 0000000000..fce0d67853
--- /dev/null
+++ b/components/lib/multiselect/MultiSelectBase.js
@@ -0,0 +1,293 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context, focusedState, overlayVisibleState }) =>
+        classNames('p-multiselect p-component p-inputwrapper', {
+            'p-multiselect-chip': props.display === 'chip' && (props.maxSelectedLabels == null ? true : props.value?.length <= props.maxSelectedLabels),
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
+            'p-multiselect-clearable': props.showClear && !props.disabled,
+            'p-focus': focusedState,
+            'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
+            'p-inputwrapper-focus': focusedState || overlayVisibleState
+        }),
+    label: ({ props, empty }) =>
+        classNames('p-multiselect-label', {
+            'p-placeholder': empty && props.placeholder,
+            'p-multiselect-label-empty': empty && !props.placeholder && !props.selectedItemTemplate,
+            'p-multiselect-items-label': !empty && props.display !== 'chip' && props.value?.length > props.maxSelectedLabels
+        }),
+    panel: ({ panelProps: props, context, allowOptionSelect }) =>
+        classNames('p-multiselect-panel p-component', {
+            'p-multiselect-inline': props.inline,
+            'p-multiselect-flex': props.flex,
+            'p-multiselect-limited': !allowOptionSelect,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    list: ({ virtualScrollerOptions }) => (virtualScrollerOptions ? 'p-multiselect-items p-component' : 'p-multiselect-items p-component'),
+    labelContainer: 'p-multiselect-label-container',
+    triggerIcon: 'p-multiselect-trigger-icon p-c',
+    trigger: 'p-multiselect-trigger',
+    clearIcon: 'p-multiselect-clear-icon',
+    tokenLabel: 'p-multiselect-token-label',
+    token: 'p-multiselect-token',
+    removeTokenIcon: 'p-multiselect-token-icon',
+    wrapper: 'p-multiselect-items-wrapper',
+    emptyMessage: 'p-multiselect-empty-message',
+    itemGroup: 'p-multiselect-item-group',
+    closeButton: 'p-multiselect-close p-link',
+    header: 'p-multiselect-header',
+    closeIcon: 'p-multiselect-close-icon',
+    headerCheckboxContainer: 'p-multiselect-select-all',
+    headerCheckboxIcon: 'p-multiselect-select-all p-checkbox-icon p-c',
+    headerSelectAllLabel: 'p-multiselect-select-all-label',
+    filterContainer: 'p-multiselect-filter-container',
+    filterIcon: 'p-multiselect-filter-icon',
+    item: ({ itemProps: props }) =>
+        classNames('p-multiselect-item', {
+            'p-highlight': props.selected,
+            'p-disabled': props.disabled,
+            'p-focus': props.focusedOptionIndex === props.index
+        }),
+    checkboxContainer: 'p-multiselect-checkbox',
+    checkboxIcon: 'p-checkbox-icon p-c',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-multiselect {
+        display: inline-flex;
+        user-select: none;
+        cursor: pointer;
+    }
+    
+    .p-multiselect-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        cursor: pointer;
+    }
+    
+    .p-multiselect-label-container {
+        overflow: hidden;
+        flex: 1 1 auto;
+        cursor: pointer;
+    }
+    
+    .p-multiselect-label  {
+        display: block;
+        white-space: nowrap;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    .p-multiselect-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+    
+    .p-multiselect-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+    
+    .p-multiselect-token-icon {
+        cursor: pointer;
+    }
+    
+    .p-multiselect .p-multiselect-panel {
+        min-width: 100%;
+    }
+    
+    .p-multiselect-inline.p-multiselect-panel {
+        border: none;
+        position: initial;
+        background: none;
+        box-shadow: none;
+    }
+    
+    .p-multiselect-inline.p-multiselect-panel .p-multiselect-items {
+        padding: 0;
+    }
+    
+    .p-multiselect-flex.p-multiselect-panel .p-multiselect-items {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    
+    .p-multiselect-items-wrapper {
+        overflow: auto;
+    }
+    
+    .p-multiselect-items {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+    
+    .p-multiselect-item {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        font-weight: normal;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+        outline: none;
+    }
+    
+    .p-multiselect-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    
+    .p-multiselect-select-all-label {
+        margin-left: 0.5rem;
+    }
+    
+    .p-multiselect-filter-container {
+        position: relative;
+        flex: 1 1 auto;
+    }
+    
+    .p-multiselect-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+    
+    .p-multiselect-filter-container .p-inputtext {
+        width: 100%;
+    }
+    
+    .p-multiselect-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        position: relative;
+        margin-left: auto;
+    }
+    
+    .p-multiselect-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+        right: 3rem;
+    }
+    
+    .p-fluid .p-multiselect {
+        display: flex;
+    }
+}
+`;
+
+const inlineStyles = {
+    root: ({ props }) =>
+        props.showClear &&
+        !props.disabled && {
+            position: 'relative'
+        },
+    itemGroup: ({ scrollerOptions }) => ({ height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined })
+};
+
+export const MultiSelectBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'MultiSelect',
+        appendTo: null,
+        ariaLabelledBy: null,
+        checkboxIcon: null,
+        className: null,
+        clearIcon: null,
+        closeIcon: null,
+        dataKey: null,
+        disabled: false,
+        display: 'comma',
+        dropdownIcon: null,
+        emptyFilterMessage: null,
+        emptyMessage: null,
+        filter: false,
+        filterBy: null,
+        filterDelay: 300,
+        filterInputAutoFocus: true,
+        filterLocale: undefined,
+        selectOnFocus: false,
+        focusOnHover: true,
+        autoOptionFocus: false,
+        filterMatchMode: 'contains',
+        filterPlaceholder: null,
+        filterTemplate: null,
+        fixedPlaceholder: false,
+        flex: false,
+        id: null,
+        inline: false,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        variant: null,
+        itemCheckboxIcon: null,
+        itemClassName: null,
+        itemTemplate: null,
+        loading: false,
+        loadingIcon: null,
+        maxSelectedLabels: null,
+        name: null,
+        onBlur: null,
+        onChange: null,
+        onClick: null,
+        onFilter: null,
+        onFocus: null,
+        onHide: null,
+        onRemove: null,
+        onSelectAll: null,
+        onShow: null,
+        optionDisabled: null,
+        optionGroupChildren: null,
+        optionGroupLabel: null,
+        optionGroupTemplate: null,
+        optionLabel: null,
+        optionValue: null,
+        options: null,
+        overlayVisible: false,
+        panelClassName: null,
+        panelFooterTemplate: null,
+        panelHeaderTemplate: null,
+        panelStyle: null,
+        placeholder: null,
+        removeIcon: null,
+        resetFilterOnHide: false,
+        scrollHeight: '200px',
+        selectAll: false,
+        selectAllLabel: null,
+        selectedItemTemplate: null,
+        selectedItemsLabel: undefined,
+        selectionLimit: null,
+        showClear: false,
+        showSelectAll: true,
+        style: null,
+        tabIndex: 0,
+        tooltip: null,
+        tooltipOptions: null,
+        transitionOptions: null,
+        useOptionAsValue: false,
+        value: null,
+        virtualScrollerOptions: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/multiselect/MultiSelectHeader.js b/components/lib/multiselect/MultiSelectHeader.js
new file mode 100644
index 0000000000..6319c1cd42
--- /dev/null
+++ b/components/lib/multiselect/MultiSelectHeader.js
@@ -0,0 +1,206 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { Checkbox } from '../checkbox/Checkbox';
+import { useMergeProps } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { SearchIcon } from '../icons/search';
+import { TimesIcon } from '../icons/times';
+import { InputText } from '../inputtext/InputText';
+import { Ripple } from '../ripple/Ripple';
+import { IconUtils, ObjectUtils, UniqueComponentId } from '../utils/Utils';
+
+export const MultiSelectHeader = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, cx, isUnstyled } = props;
+    const filterOptions = {
+        filter: (e) => onFilter(e),
+        reset: () => props.resetFilter()
+    };
+
+    const getPTOptions = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            ...options
+        });
+    };
+
+    const onFilter = (event) => {
+        if (props.onFilter) {
+            props.onFilter({
+                originalEvent: event,
+                query: event.target.value
+            });
+        }
+    };
+
+    const onToggleAll = (event) => {
+        if (props.onSelectAll) {
+            props.onSelectAll({
+                originalEvent: event,
+                checked: props.selectAll
+            });
+        } else {
+            const value = props.isAllSelected() ? [] : props.visibleOptions.filter((option) => props.isValidOption(option)).map((option) => props.getOptionValue(option));
+
+            props.updateModel(event, value, value);
+        }
+    };
+
+    const createFilterElement = () => {
+        const filterIconProps = mergeProps(
+            {
+                className: cx('filterIcon')
+            },
+            getPTOptions('filterIcon')
+        );
+
+        const icon = props.filterIcon || <SearchIcon {...filterIconProps} />;
+        const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
+
+        if (props.filter) {
+            const filterContainerProps = mergeProps(
+                {
+                    className: cx('filterContainer')
+                },
+                getPTOptions('filterContainer')
+            );
+
+            let content = (
+                <div {...filterContainerProps}>
+                    <InputText
+                        ref={props.filterRef}
+                        type="text"
+                        role="searchbox"
+                        value={props.filterValue}
+                        onChange={onFilter}
+                        onKeyDown={props.onFilterKeyDown}
+                        className="p-multiselect-filter"
+                        placeholder={props.filterPlaceholder}
+                        pt={ptm('filterInput')}
+                        unstyled={props.unstyled}
+                        __parentMetadata={{ parent: props.metaData }}
+                    />
+                    {filterIcon}
+                </div>
+            );
+
+            if (props.filterTemplate) {
+                const defaultContentOptions = {
+                    className: filterContainerProps.className,
+                    element: content,
+                    filterOptions: filterOptions,
+                    onFilter: onFilter,
+                    filterInputKeyDown: props.onFilterKeyDown,
+                    filterIconClassName: props.filterIconClassName,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+            }
+
+            return <>{content}</>;
+        }
+
+        return null;
+    };
+
+    const filterElement = createFilterElement();
+    const selectAllId = props.id ? props.id + '_selectall' : UniqueComponentId();
+
+    const headerSelectAllLabelProps = mergeProps(
+        {
+            htmlFor: selectAllId,
+            className: cx('headerSelectAllLabel')
+        },
+        getPTOptions('headerSelectAllLabel')
+    );
+
+    const headerCheckboxIconProps = mergeProps(
+        {
+            className: cx('headerCheckboxIcon')
+        },
+        getPTOptions('headerCheckbox.icon')
+    );
+
+    const headerCheckboxContainerProps = mergeProps(
+        {
+            className: cx('headerCheckboxContainer')
+        },
+        getPTOptions('headerCheckboxContainer')
+    );
+
+    const checkedIcon = props.itemCheckboxIcon || <CheckIcon {...headerCheckboxIconProps} />;
+    const itemCheckboxIcon = IconUtils.getJSXIcon(checkedIcon, { ...headerCheckboxIconProps }, { selected: props.selected });
+
+    const checkboxElement = props.showSelectAll && (
+        <div {...headerCheckboxContainerProps}>
+            <Checkbox id={selectAllId} checked={props.selectAll} onChange={onToggleAll} role="checkbox" aria-checked={props.selectAll} icon={itemCheckboxIcon} pt={ptm('headerCheckbox')} unstyled={isUnstyled()} />
+            {!props.filter && <label {...headerSelectAllLabelProps}>{props.selectAllLabel}</label>}
+        </div>
+    );
+
+    const iconProps = mergeProps(
+        {
+            className: cx('closeIcon'),
+            'aria-hidden': true
+        },
+        getPTOptions('closeIcon')
+    );
+    const icon = props.closeIcon || <TimesIcon {...iconProps} />;
+    const closeIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+
+    const headerProps = mergeProps(
+        {
+            className: cx('header')
+        },
+        getPTOptions('header')
+    );
+
+    const closeButtonProps = mergeProps(
+        {
+            type: 'button',
+            className: cx('closeButton'),
+            'aria-label': ariaLabel('close'),
+            onClick: props.onClose
+        },
+        getPTOptions('closeButton')
+    );
+
+    const closeElement = (
+        <button {...closeButtonProps}>
+            {closeIcon}
+            <Ripple />
+        </button>
+    );
+
+    const element = (
+        <div {...headerProps}>
+            {checkboxElement}
+            {filterElement}
+            {closeElement}
+        </div>
+    );
+
+    if (props.template) {
+        const defaultOptions = {
+            className: 'p-multiselect-header',
+            checkboxElement,
+            checked: props.selectAll,
+            onChange: onToggleAll,
+            filterElement,
+            closeElement,
+            closeElementClassName: 'p-multiselect-close p-link',
+            closeIconClassName: 'p-multiselect-close-icon',
+            onCloseClick: props.onClose,
+            element,
+            itemCheckboxIcon,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+MultiSelectHeader.displayName = 'MultiSelectHeader';
diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
new file mode 100644
index 0000000000..425e6f3a62
--- /dev/null
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
+import { useMergeProps } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { Ripple } from '../ripple/Ripple';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+
+export const MultiSelectItem = React.memo((props) => {
+    const [focusedState, setFocusedState] = React.useState(false);
+    const checkboxRef = React.useRef(null);
+    const mergeProps = useMergeProps();
+    const { ptm, cx, isUnstyled } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                selected: props.selected,
+                disabled: props.disabled,
+                focused: focusedState,
+                focusedIndex: props.focusedIndex,
+                index: props.index
+            }
+        });
+    };
+
+    const onFocus = (event) => {
+        setFocusedState(true);
+        checkboxRef?.current?.getInput().focus();
+    };
+
+    const onBlur = (event) => {
+        setFocusedState(false);
+    };
+
+    const onClick = (event) => {
+        if (props.onClick) {
+            props.onClick(event, props.option);
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const checkboxIconProps = mergeProps(
+        {
+            className: cx('checkboxIcon')
+        },
+        getPTOptions('checkbox.icon')
+    );
+
+    const icon = props.checkboxIcon || <CheckIcon {...checkboxIconProps} />;
+    const checkboxIcon = props.selected ? IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, { selected: props.selected }) : null;
+
+    const content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
+
+    const checkboxContainerProps = mergeProps(
+        {
+            className: cx('checkboxContainer')
+        },
+        getPTOptions('checkboxContainer')
+    );
+
+    const itemProps = mergeProps(
+        {
+            className: classNames(props.className, props.option.className, cx('item', { itemProps: props })),
+            style: props.style,
+            onClick: onClick,
+            onFocus: onFocus,
+            onBlur: onBlur,
+            onMouseMove: (e) => props?.onMouseMove(e, props.index),
+            role: 'option',
+            'aria-selected': props.selected,
+            'data-p-highlight': props.selected,
+            'data-p-disabled': props.disabled
+        },
+        getPTOptions('item')
+    );
+
+    return (
+        <li {...itemProps}>
+            <div {...checkboxContainerProps}>
+                <Checkbox ref={checkboxRef} checked={props.selected} icon={checkboxIcon} pt={ptm('checkbox')} unstyled={isUnstyled()} tabIndex={-1} />
+            </div>
+            <span>{content}</span>
+            <Ripple />
+        </li>
+    );
+});
+
+MultiSelectItem.displayName = 'MultiSelectItem';
diff --git a/components/lib/multiselect/MultiSelectPanel.js b/components/lib/multiselect/MultiSelectPanel.js
new file mode 100644
index 0000000000..4187e0860f
--- /dev/null
+++ b/components/lib/multiselect/MultiSelectPanel.js
@@ -0,0 +1,349 @@
+import * as React from 'react';
+import { localeOption, PrimeReactContext } from '../api/Api';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { VirtualScroller } from '../virtualscroller/VirtualScroller';
+import { MultiSelectHeader } from './MultiSelectHeader';
+import { MultiSelectItem } from './MultiSelectItem';
+
+export const MultiSelectPanel = React.memo(
+    React.forwardRef((props, ref) => {
+        const virtualScrollerRef = React.useRef(null);
+        const filterInputRef = React.useRef(null);
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const { ptm, cx, sx, isUnstyled } = props;
+
+        const getPTOptions = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const onEnter = () => {
+            props.onEnter(() => {
+                if (virtualScrollerRef.current) {
+                    const selectedIndex = props.getSelectedOptionIndex();
+
+                    if (selectedIndex !== -1) {
+                        setTimeout(() => virtualScrollerRef.current.scrollToIndex(selectedIndex), 0);
+                    }
+                }
+            });
+        };
+
+        const onEntered = () => {
+            props.onEntered(() => {
+                if (props.filter && props.filterInputAutoFocus && filterInputRef.current) {
+                    DomHandler.focus(filterInputRef.current, false);
+                }
+            });
+        };
+
+        const onFilterInputChange = (event) => {
+            if (virtualScrollerRef.current) {
+                virtualScrollerRef.current.scrollToIndex(0);
+            }
+
+            props.onFilterInputChange && props.onFilterInputChange(event);
+        };
+
+        const isEmptyFilter = () => {
+            return !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
+        };
+
+        const createHeader = () => {
+            return (
+                <MultiSelectHeader
+                    hostName={props.hostName}
+                    id={props.id}
+                    filter={props.filter}
+                    filterRef={filterInputRef}
+                    filterValue={props.filterValue}
+                    filterTemplate={props.filterTemplate}
+                    visibleOptions={props.visibleOptions}
+                    isValidOption={props.isValidOption}
+                    getOptionValue={props.getOptionValue}
+                    updateModel={props.updateModel}
+                    onFilter={onFilterInputChange}
+                    onFilterKeyDown={props.onFilterKeyDown}
+                    filterPlaceholder={props.filterPlaceholder}
+                    onClose={props.onCloseClick}
+                    showSelectAll={props.showSelectAll}
+                    selectAll={props.isAllSelected()}
+                    selectAllLabel={props.selectAllLabel}
+                    onSelectAll={props.onSelectAll}
+                    template={props.panelHeaderTemplate}
+                    resetFilter={props.resetFilter}
+                    closeIcon={props.closeIcon}
+                    filterIcon={props.filterIcon}
+                    itemCheckboxIcon={props.itemCheckboxIcon}
+                    ptm={ptm}
+                    cx={cx}
+                    isUnstyled={isUnstyled}
+                    metaData={props.metaData}
+                />
+            );
+        };
+
+        const createFooter = () => {
+            if (props.panelFooterTemplate) {
+                const content = ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
+
+                return <div className="p-multiselect-footer">{content}</div>;
+            }
+
+            return null;
+        };
+
+        const changeFocusedItemOnHover = (event, index) => {
+            if (props.focusOnHover) {
+                props?.changeFocusedOptionIndex?.(event, index);
+            }
+        };
+
+        const createEmptyFilter = () => {
+            const emptyFilterMessage = ObjectUtils.getJSXElement(props.emptyFilterMessage, props) || localeOption('emptyFilterMessage');
+
+            const emptyMessageProps = mergeProps(
+                {
+                    className: cx('emptyMessage')
+                },
+                getPTOptions('emptyMessage')
+            );
+
+            return (
+                <li {...emptyMessageProps} key="emptyFilterMessage">
+                    {emptyFilterMessage}
+                </li>
+            );
+        };
+
+        const createEmptyContent = () => {
+            const emptyMessage = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
+
+            const emptyMessageProps = mergeProps(
+                {
+                    className: cx('emptyMessage')
+                },
+                getPTOptions('emptyMessage')
+            );
+
+            return (
+                <li {...emptyMessageProps} key="emptyMessage">
+                    {emptyMessage}
+                </li>
+            );
+        };
+
+        const createItem = (option, index, scrollerOptions = {}) => {
+            const style = { height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined };
+            const isItemGroup = option.group === true && props.optionGroupLabel;
+
+            if (isItemGroup) {
+                const groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
+                const key = index + '_' + props.getOptionGroupRenderKey(option);
+                const itemGroupProps = mergeProps(
+                    {
+                        className: cx('itemGroup'),
+                        style: sx('itemGroup', { scrollerOptions })
+                    },
+                    getPTOptions('itemGroup')
+                );
+
+                return (
+                    <li key={key} {...itemGroupProps}>
+                        {groupContent}
+                    </li>
+                );
+            }
+
+            const optionLabel = props.getOptionLabel(option);
+            const optionKey = index + '_' + props.getOptionRenderKey(option);
+            const disabled = props.isOptionDisabled(option);
+            const selected = props.isSelected(option);
+
+            return (
+                <MultiSelectItem
+                    hostName={props.hostName}
+                    key={optionKey}
+                    focusedOptionIndex={props.focusedOptionIndex}
+                    label={optionLabel}
+                    option={option}
+                    style={style}
+                    index={index}
+                    template={props.itemTemplate}
+                    selected={selected}
+                    onClick={props.onOptionSelect}
+                    onMouseMove={changeFocusedItemOnHover}
+                    disabled={disabled}
+                    className={props.itemClassName}
+                    checkboxIcon={props.checkboxIcon}
+                    isUnstyled={isUnstyled}
+                    ptm={ptm}
+                    cx={cx}
+                />
+            );
+        };
+
+        const createItems = () => {
+            if (ObjectUtils.isNotEmpty(props.visibleOptions)) {
+                return props.visibleOptions.map(createItem);
+            }
+
+            return props.hasFilter ? createEmptyFilter() : createEmptyContent();
+        };
+
+        const createContent = () => {
+            if (props.virtualScrollerOptions) {
+                const virtualScrollerProps = {
+                    ...props.virtualScrollerOptions,
+                    ...{
+                        style: { ...props.virtualScrollerOptions.style, ...{ height: props.scrollHeight } },
+                        className: classNames('p-multiselect-items-wrapper', props.virtualScrollerOptions.className),
+                        items: props.visibleOptions,
+                        autoSize: true,
+                        onLazyLoad: (event) => props.virtualScrollerOptions.onLazyLoad({ ...event, ...{ filter: props.filterValue } }),
+                        itemTemplate: (item, options) => item && createItem(item, options.index, options),
+                        contentTemplate: (options) => {
+                            const content = isEmptyFilter() ? createEmptyFilter() : options.children;
+
+                            const listProps = mergeProps(
+                                {
+                                    ref: options.contentRef,
+                                    style: options.style,
+                                    className: classNames(options.className, cx('list', { virtualScrollerProps: props.virtualScrollerOptions })),
+                                    role: 'listbox',
+                                    'aria-multiselectable': true
+                                },
+                                getPTOptions('list')
+                            );
+
+                            return <ul {...listProps}>{content}</ul>;
+                        }
+                    }
+                };
+
+                return <VirtualScroller ref={virtualScrollerRef} {...virtualScrollerProps} pt={ptm('virtualScroller')} __parentMetadata={{ parent: props.metaData }} />;
+            }
+
+            const items = createItems();
+
+            const wrapperProps = mergeProps(
+                {
+                    className: cx('wrapper'),
+                    style: { maxHeight: props.scrollHeight }
+                },
+                getPTOptions('wrapper')
+            );
+
+            const listProps = mergeProps(
+                {
+                    className: cx('list'),
+                    role: 'listbox',
+                    'aria-multiselectable': true
+                },
+                getPTOptions('list')
+            );
+
+            return (
+                <div {...wrapperProps}>
+                    <ul {...listProps}>{items}</ul>
+                </div>
+            );
+        };
+
+        const createElement = () => {
+            const allowOptionSelect = props.allowOptionSelect();
+            const header = createHeader();
+            const content = createContent();
+            const footer = createFooter();
+
+            const panelProps = mergeProps(
+                {
+                    className: classNames(props.panelClassName, cx('panel', { panelProps: props, context, allowOptionSelect })),
+                    style: props.panelStyle,
+                    onClick: props.onClick,
+                    'data-pr-is-overlay': true
+                },
+                getPTOptions('panel')
+            );
+
+            if (props.inline) {
+                return (
+                    <div ref={ref} {...panelProps}>
+                        {content}
+                        {footer}
+                    </div>
+                );
+            }
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: props.in,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    appear: true,
+                    unmountOnExit: true,
+                    onEnter,
+                    onEntered,
+                    onExit: props.onExit,
+                    onExited: props.onExited
+                },
+                getPTOptions('transition')
+            );
+
+            const firstHiddenElementProps = mergeProps(
+                {
+                    ref: props.firstHiddenFocusableElementOnOverlay,
+                    role: 'presentation',
+                    className: 'p-hidden-accessible p-hidden-focusable',
+                    tabIndex: '0',
+                    onFocus: props.onFirstHiddenFocus,
+                    'data-p-hidden-accessible': true,
+                    'data-p-hidden-focusable': true
+                },
+                ptm('hiddenFirstFocusableEl')
+            );
+
+            const lastHiddenElementProps = mergeProps(
+                {
+                    ref: props.lastHiddenFocusableElementOnOverlay,
+                    role: 'presentation',
+                    className: 'p-hidden-accessible p-hidden-focusable',
+                    tabIndex: '0',
+                    onFocus: props.onLastHiddenFocus,
+                    'data-p-hidden-accessible': true,
+                    'data-p-hidden-focusable': true
+                },
+                ptm('hiddenLastFocusableEl')
+            );
+
+            return (
+                <CSSTransition nodeRef={ref} {...transitionProps}>
+                    <div ref={ref} {...panelProps}>
+                        <span {...firstHiddenElementProps} />
+                        {header}
+                        {content}
+                        {footer}
+                        <span {...lastHiddenElementProps} />
+                    </div>
+                </CSSTransition>
+            );
+        };
+
+        const element = createElement();
+
+        if (props.inline) {
+            return element;
+        }
+
+        return <Portal element={element} appendTo={props.appendTo} />;
+    })
+);
+
+MultiSelectPanel.displayName = 'MultiSelectPanel';
diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
new file mode 100644
index 0000000000..22687c49fe
--- /dev/null
+++ b/components/lib/multiselect/multiselect.d.ts
@@ -0,0 +1,817 @@
+/**
+ *
+ * MultiSelect is used to select multiple items from a collection.
+ *
+ * [Live Demo](https://www.primereact.org/multiselect/)
+ *
+ * @module multiselect
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { CheckboxPassThroughOptions } from '../checkbox/checkbox';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils';
+import { VirtualScrollerPassThroughOptions, VirtualScrollerProps } from '../virtualscroller';
+
+export declare type MultiSelectPassThroughType<T> = PassThroughType<T, MultiSelectPassThroughMethodOptions>;
+export declare type MultiSelectPassThroughTransitionType = ReactCSSTransitionProps | ((options: MultiSelectPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MultiSelectPassThroughMethodOptions {
+    props: MultiSelectProps;
+    state: MultiSelectState;
+    context: MultiSelectContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MultiSelectProps.pt}
+ */
+export interface MultiSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the label container's DOM element.
+     */
+    labelContainer?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the remove token icon's DOM element.
+     */
+    removeTokenIcon?: MultiSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     */
+    trigger?: MultiSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the trigger icon's DOM element.
+     */
+    triggerIcon?: MultiSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the clear icon's DOM element.
+     */
+    clearIcon?: MultiSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the dropdown icon's DOM element.
+     */
+    dropdownIcon?: MultiSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerCheckbox?: CheckboxPassThroughOptions;
+    /**
+     * Uses to pass attributes to the header checkbox's container DOM element.
+     */
+    headerCheckboxContainer?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerSelectAllLabel?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLLabelElement>>;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: MultiSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: MultiSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the VirtualScroller component.
+     * @see {@link VirtualScrollerPassThroughOptions}
+     */
+    virtualScroller?: VirtualScrollerPassThroughOptions;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item group's DOM element.
+     */
+    itemGroup?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the checkbox container's DOM element.
+     */
+    checkboxContainer?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: CheckboxPassThroughOptions;
+    /**
+     * Uses to pass attributes to the emptyMessage's DOM element.
+     */
+    emptyMessage?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: MultiSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: MultiSelectPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in MultiSelect component.
+ */
+export interface MultiSelectState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current filter state as a string.
+     */
+    filterState: string;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+}
+
+/**
+ * Defines current options in MultiSelect component.
+ */
+export interface MultiSelectContext {
+    /**
+     * Current selection state of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+}
+
+/**
+ * Custom checkbox change event
+ * @see {@link MultiSelectPanelHeaderTemplateEvent.onChange}
+ * @event
+ */
+interface MultiSelectHeaderCheckboxChangeEvent {
+    originalEvent: React.FormEvent<HTMLInputElement>;
+    checked: boolean;
+}
+
+/**
+ * Custom multiselect panel header template event.
+ */
+interface MultiSelectPanelHeaderTemplateEvent {
+    /**
+     * The class name for the header element.
+     */
+    className: string;
+    /**
+     * The checkbox element for selecting items.
+     */
+    checkboxElement: JSX.Element;
+    /**
+     * Whether the checkbox is checked.
+     */
+    checked: boolean;
+    /**
+     * Callback function when the checkbox state is changed.
+     * @param {MultiSelectHeaderCheckboxChangeEvent} event - Custom checkbox change event
+     */
+    onChange(event: MultiSelectHeaderCheckboxChangeEvent): void;
+    /**
+     * The element for filtering the items.
+     */
+    filterElement: JSX.Element;
+    /**
+     * The close element.
+     */
+    closeElement: JSX.Element;
+    /**
+     * The classname for the close element.
+     */
+    closeElementClassName: string;
+    /**
+     * The classname for the close icon element.
+     */
+    closeIconClassName: string;
+    /**
+     * Callback function when the close button is clicked.
+     * @param {React.MouseEvent<HTMLElement>} event - Current param
+     */
+    onCloseClick(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * The default element created by the component.
+     */
+    element: JSX.Element;
+    /**
+     * The props of Multiselect component
+     */
+    props: MultiSelectProps;
+}
+
+/**
+ * Custom multiselect change target options
+ */
+interface MultiSelectChangeTargetOptions {
+    /**
+     * The name of the element.
+     */
+    name: string;
+    /**
+     * Unique identifier of the element.
+     */
+    id: string;
+    /**
+     * The value of the element.
+     */
+    value: any;
+}
+
+/**
+ * Custom change event.
+ * @see {@link MultiSelectProps.onChange}
+ * @event
+ */
+interface MultiSelectChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Current selected values
+     */
+    value: any;
+    /**
+     * Selected option
+     */
+    selectedOption?: any;
+    /**
+     * Stops the event from propagating.
+     */
+    stopPropagation(): void;
+    /**
+     * Prevents the default action of the event.
+     */
+    preventDefault(): void;
+    /**
+     * Additional information about the event.
+     */
+    target: MultiSelectChangeTargetOptions;
+}
+
+/**
+ * Custom remove event when chip is removed.
+ * @event
+ */
+interface MultiSelectRemoveEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Removed item value
+     */
+    value: any;
+}
+
+/**
+ * Custom filter event.
+ * @see {@link MultiSelectProps.onFilter}
+ * @event
+ */
+interface MultiSelectFilterEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Filter value.
+     */
+    filter: string;
+}
+
+/**
+ * Custom select event.
+ * @see {@link MultiSelectProps.onSelectAll}
+ * @event
+ */
+interface MultiSelectAllEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Whether all data is selected.
+     */
+    checked: boolean;
+}
+
+/**
+ * Multiselect filter options
+ */
+interface MultiSelectFilterOptions {
+    /**
+     * Used to filter options
+     * @param {KeyboardEvent} event - Browser event
+     */
+    filter?: (event?: KeyboardEvent) => void;
+    /**
+     * Used to reset the filtered options
+     */
+    reset?: () => void;
+}
+
+/**
+ * Custom filter template options.
+ */
+interface MultiSelectTemplateOptions {
+    /**
+     * Style class of the filter.
+     */
+    className: string;
+    /**
+     * The filter element.
+     */
+    element: HTMLDivElement;
+    /**
+     * Style class of the filter icon.
+     */
+    filterIconClassName: string;
+    /**
+     * The filter input options.
+     */
+    filterOptions?: MultiSelectFilterOptions;
+    /**
+     * The props of multiselect header.
+     */
+    props?: any;
+}
+
+/**
+ * Defines valid properties in MultiSelect component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Icon of the checkbox when checked.
+     */
+    checkboxIcon?: IconType<MultiSelectProps> | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Close icon of the multiselect panel header.
+     */
+    closeIcon?: IconType<MultiSelectProps> | undefined;
+    /**
+     * Clear icon of the multiselect input.
+     */
+    clearIcon?: IconType<MultiSelectProps> | undefined;
+    /**
+     * A property to uniquely match the value in options for better performance.
+     */
+    dataKey?: string | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Used mode to display the selected item. Valid values are 'comma' and 'chip'.
+     * @defaultValue comma
+     */
+    display?: 'comma' | 'chip' | undefined;
+    /**
+     * Icon class of the dropdown icon.
+     */
+    dropdownIcon?: IconType<MultiSelectProps> | undefined;
+    /**
+     * Template to display when filtering does not return any results.
+     * @defaultValue No records found
+     */
+    emptyFilterMessage?: React.ReactNode | ((props: MultiSelectProps) => React.ReactNode);
+    /**
+     * Text to display when there are no options available. Defaults to global value in Locale configuration.
+     */
+    emptyMessage?: string;
+    /**
+     * When specified, displays an input field to filter the items on keyup.
+     * @defaultValue true
+     */
+    filter?: boolean;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: string | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
+    /**
+     * When the panel is opened, it specifies that the filter input should focus automatically.
+     * @defaultValue true
+     */
+    filterInputAutoFocus?: boolean;
+    /**
+     * Icon of the filter icon.
+     */
+    filterIcon?: IconType<MultiSelect> | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
+     * @defaultValue contains
+     */
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * The template of filter element.
+     */
+    filterTemplate?: React.ReactNode | ((options: MultiSelectTemplateOptions) => React.ReactNode);
+    /**
+     * Whether to display selected items in the label section or always display the placeholder as the default label.
+     * @defaultValue false
+     */
+    fixedPlaceholder?: boolean;
+    /**
+     * Use flex layout for the items panel.
+     * @defaultValue false
+     */
+    flex?: boolean;
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Render the items panel inline.
+     * @defaultValue false
+     */
+    inline?: boolean;
+    /**
+     * Identifier of the focusable input.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLSelectElement>;
+    /**
+     * Style class of the items.
+     */
+    itemClassName?: string | undefined;
+    /**
+     * The icon displayed in the header when all checkboxes are checked.
+     */
+    itemCheckboxIcon?: IconType<MultiSelect> | undefined;
+    /**
+     * Function that gets the option and returns the content for it.
+     */
+    itemTemplate?: React.ReactNode | ((option: any) => React.ReactNode);
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * The icon to show while indicating data load is in progress.
+     */
+    loadingIcon?: IconType<MultiSelectProps> | undefined;
+    /**
+     * Decides how many selected item labels to show at most.
+     */
+    maxSelectedLabels?: number | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     */
+    optionDisabled?: string | ((option: any) => boolean);
+    /**
+     * Property name or getter function that refers to the children options of option group.
+     */
+    optionGroupChildren?: string | undefined;
+    /**
+     * Property name or getter function to use as the label of an option group.
+     */
+    optionGroupLabel?: string | undefined;
+    /**
+     * Template of an option group item.
+     */
+    optionGroupTemplate?: React.ReactNode | ((option: any, index: number) => React.ReactNode);
+    /**
+     * Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
+     */
+    optionLabel?: string | undefined;
+    /**
+     * Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
+     */
+    optionValue?: string | undefined;
+    /**
+     * An array of selectitems to display as the available options.
+     */
+    options?: SelectItemOptionsType | undefined;
+    /**
+     * Specifies the visibility of the overlay panel.
+     * @defaultValue false
+     */
+    overlayVisible?: boolean;
+    /**
+     * Style class of the overlay panel element.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * Template of the panel footer.
+     */
+    panelFooterTemplate?: React.ReactNode | ((props: MultiSelectProps, hide: () => void) => React.ReactNode);
+    /**
+     * Template of the panel header.
+     */
+    panelHeaderTemplate?: React.ReactNode | ((event: MultiSelectPanelHeaderTemplateEvent) => React.ReactNode);
+    /**
+     * Inline style of the overlay panel element.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Label to display when there are no selections.
+     */
+    placeholder?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MultiSelectPassThroughOptions}
+     */
+    pt?: MultiSelectPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Icon of the remove chip element.
+     */
+    removeIcon?: IconType<MultiSelectProps> | undefined;
+    /**
+     * Clears the filter value when hiding the dropdown.
+     * @defaultValue false
+     */
+    resetFilterOnHide?: boolean;
+    /**
+     * Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 200px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * Whether all data is selected.
+     * @defaultValue false
+     */
+    selectAll?: boolean;
+    /**
+     * Function that gets an item in the value and returns the content for it.
+     */
+    selectedItemTemplate?: React.ReactNode | ((value: any) => React.ReactNode);
+    /**
+     * Label to display after exceeding max selected labels.
+     * @defaultValue {0} items selected
+     */
+    selectedItemsLabel?: string | undefined;
+    /**
+     * Number of maximum options that can be selected.
+     */
+    selectionLimit?: number | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean;
+    /**
+     * Whether to show the select all checkbox inside the panel's header.
+     * @defaultValue true
+     */
+    showSelectAll?: boolean;
+    /**
+     * Label to display if showSelectAll is true
+     */
+    selectAllLabel?: string;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     * @defaultValue false
+     */
+    selectOnFocus?: boolean;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean;
+    /**
+     * Whether to focus on the first visible or selected element.
+     * @defaultValue false
+     */
+    autoOptionFocus?: boolean;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Whether the option should be used as the value for the select element.
+     */
+    useOptionAsValue?: boolean;
+    /**
+     * Value of the component.
+     */
+    value?: any | undefined;
+    /**
+     * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
+     */
+    virtualScrollerOptions?: VirtualScrollerProps;
+    /**
+     * Callback to invoke when the element loses focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when value changes.
+     * @param {MultiSelectChangeEvent} event - Custom change event.
+     */
+    onChange?(event: MultiSelectChangeEvent): void;
+    /**
+     * Callback to invoke on filtering.
+     * @param {MultiSelectFilterEvent} event - Custom filter event.
+     */
+    onFilter?(event: MultiSelectFilterEvent): void;
+    /**
+     * Callback to invoke when the element receives focus.
+     * @param {React.FocusEvent<HTMLInputElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Callback to invoke when overlay panel becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Callback to invoke when a chip is removed.
+     * @param {MultiSelectRemoveEvent} event - Custom remove event
+     */
+    onRemove?(event: MultiSelectRemoveEvent): void;
+    /**
+     * Callback to invoke when all data is selected.
+     * @param {MultiSelectAllEvent} event - Custom select event.
+     */
+    onSelectAll?(event: MultiSelectAllEvent): void;
+    /**
+     * Callback to invoke when overlay panel becomes visible.
+     */
+    onShow?(): void;
+}
+
+/**
+ * **PrimeReact - MultiSelect**
+ *
+ * _MultiSelect is used to select multiple items from a collection._
+ *
+ * [Live Demo](https://www.primereact.org/multiselect/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class MultiSelect extends React.Component<MultiSelectProps, any> {
+    /**
+     * Used to show the overlay.
+     */
+    public show(): void;
+    /**
+     * Used to hide the overlay.
+     */
+    public hide(): void;
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+}
diff --git a/components/lib/multiselect/package.json b/components/lib/multiselect/package.json
new file mode 100644
index 0000000000..34f4c91e51
--- /dev/null
+++ b/components/lib/multiselect/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./multiselect.cjs.js",
+    "module": "./multiselect.esm.js",
+    "unpkg": "./multiselect.min.js",
+    "types": "./multiselect.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/multistatecheckbox/MultiStateCheckbox.js b/components/lib/multistatecheckbox/MultiStateCheckbox.js
new file mode 100644
index 0000000000..05acecd832
--- /dev/null
+++ b/components/lib/multistatecheckbox/MultiStateCheckbox.js
@@ -0,0 +1,208 @@
+import * as React from 'react';
+import { ariaLabel, PrimeReactContext } from '../api/Api';
+import { Checkbox } from '../checkbox/Checkbox';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { MultiStateCheckboxBase } from './MultiStateCheckboxBase';
+
+export const MultiStateCheckbox = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = MultiStateCheckboxBase.getProps(inProps, context);
+
+        const [focusedState, setFocusedState] = React.useState(false);
+        const elementRef = React.useRef(null);
+        const equalityKey = props.optionValue ? null : props.dataKey;
+
+        const { ptm, cx, sx, isUnstyled } = MultiStateCheckboxBase.setMetaData({
+            props,
+            state: {
+                focused: focusedState
+            }
+        });
+
+        useHandleStyle(MultiStateCheckboxBase.css.styles, isUnstyled, { name: 'multistatecheckbox' });
+
+        const onClick = (event) => {
+            if (!props.disabled && !props.readOnly) {
+                toggle(event);
+            }
+        };
+
+        const getOptionValue = (option) => {
+            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
+        };
+
+        const getOptionIcon = (option) => {
+            return ObjectUtils.resolveFieldData(option, props.optionIcon || 'icon');
+        };
+
+        const getOptionAriaLabel = (option) => {
+            const ariaField = props.optionLabel || props.optionValue;
+
+            return ariaField ? ObjectUtils.resolveFieldData(option, ariaField) : option;
+        };
+
+        const findNextOption = () => {
+            if (props.options) {
+                return selectedOptionIndex === props.options.length - 1 ? (props.empty ? null : props.options[0]) : props.options[selectedOptionIndex + 1];
+            }
+
+            return null;
+        };
+
+        const toggle = (event) => {
+            if (props.onChange) {
+                const newValue = getOptionValue(findNextOption());
+
+                props.onChange({
+                    originalEvent: event,
+                    value: newValue,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: newValue
+                    }
+                });
+            }
+        };
+
+        const onFocus = () => {
+            setFocusedState(true);
+        };
+
+        const onBlur = () => {
+            setFocusedState(false);
+        };
+
+        const onKeyDown = (e) => {
+            if (e.keyCode === 32) {
+                toggle(e);
+                e.preventDefault();
+            }
+        };
+
+        const getSelectedOptionMap = () => {
+            let option;
+            let index;
+
+            if (props.options) {
+                index = props.options.findIndex((option) => ObjectUtils.equals(props.value, getOptionValue(option), equalityKey));
+                option = props.options[index];
+            }
+
+            return { option, index };
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focusFirstElement(elementRef.current),
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            if (!props.empty && props.value === null) {
+                toggle();
+            }
+
+            if (props.autoFocus) {
+                DomHandler.focusFirstElement(elementRef.current);
+            }
+        });
+
+        const createIcon = () => {
+            const icon = (selectedOption && getOptionIcon(selectedOption)) || '';
+            const className = classNames('p-checkbox-icon p-c', {
+                [`${icon}`]: true
+            });
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon', { icon })
+                },
+                ptm('icon')
+            );
+
+            const content = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+
+            if (props.iconTemplate) {
+                const defaultOptions = {
+                    option: selectedOption,
+                    className,
+                    element: content,
+                    props
+                };
+
+                return ObjectUtils.getJSXElement(props.iconTemplate, defaultOptions);
+            }
+
+            return content;
+        };
+
+        const { option: selectedOption, index: selectedOptionIndex } = getSelectedOptionMap();
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = MultiStateCheckboxBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const icon = createIcon();
+        const ariaValueLabel = selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root')),
+                style: props.style,
+                onClick: onClick
+            },
+            MultiStateCheckboxBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const checkboxProps = mergeProps(
+            {
+                id: props.id + '_checkbox',
+                className: cx('checkbox'),
+                style: sx('checkbox', { selectedOption }),
+                tabIndex: props.tabIndex,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown,
+                onChange: onClick,
+                checked: !!selectedOption,
+                disabled: props?.disabled,
+                icon,
+                ...ariaProps
+            },
+            ptm('checkbox')
+        );
+
+        const srOnlyAriaProps = mergeProps(
+            {
+                className: 'p-hidden-accessible',
+                'aria-live': 'polite'
+            },
+            ptm('srOnlyAria')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    <Checkbox {...checkboxProps} />
+                    {focusedState && <span {...srOnlyAriaProps}>{ariaValueLabel}</span>}
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+MultiStateCheckbox.displayName = 'MultiStateCheckbox';
diff --git a/components/lib/multistatecheckbox/MultiStateCheckboxBase.js b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
new file mode 100644
index 0000000000..54c409a008
--- /dev/null
+++ b/components/lib/multistatecheckbox/MultiStateCheckboxBase.js
@@ -0,0 +1,52 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    icon: ({ icon }) =>
+        classNames('p-checkbox-icon p-c', {
+            [`${icon}`]: true
+        }),
+    root: ({ props }) =>
+        classNames('p-multistatecheckbox p-checkbox p-component', props.classNames, {
+            'p-variant-filled': props.variant === 'filled'
+        }),
+    checkbox: ({ props }) =>
+        classNames(props.className, {
+            'p-invalid': props.invalid
+        })
+};
+
+const inlineStyles = {
+    checkbox: ({ selectedOption }) => selectedOption && selectedOption.style
+};
+
+export const MultiStateCheckboxBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'MultiStateCheckbox',
+        autoFocus: false,
+        className: null,
+        dataKey: null,
+        disabled: false,
+        empty: true,
+        iconTemplate: null,
+        id: null,
+        onChange: null,
+        optionIcon: null,
+        optionLabel: null,
+        optionValue: null,
+        options: null,
+        readOnly: false,
+        style: null,
+        tabIndex: '0',
+        tooltip: null,
+        tooltipOptions: null,
+        value: null,
+        children: undefined,
+        invalid: false,
+        variant: null
+    },
+    css: {
+        classes,
+        inlineStyles
+    }
+});
diff --git a/components/lib/multistatecheckbox/multistatecheckbox.d.ts b/components/lib/multistatecheckbox/multistatecheckbox.d.ts
new file mode 100644
index 0000000000..52a9d311eb
--- /dev/null
+++ b/components/lib/multistatecheckbox/multistatecheckbox.d.ts
@@ -0,0 +1,279 @@
+/**
+ *
+ * MultiStateCheckbox is used to select a state from given multiple states.
+ *
+ * [Live Demo](https://www.primereact.org/multistatecheckbox/)
+ *
+ * @module multistatecheckbox
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type MultiStateCheckboxPassThroughType<T> = PassThroughType<T, MultiStateCheckboxPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface MultiStateCheckboxPassThroughMethodOptions {
+    props: MultiStateCheckboxProps;
+    state: MultiStateCheckboxState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link MultiStateCheckboxProps.pt}
+ */
+export interface MultiStateCheckboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: MultiStateCheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the checkbox box's DOM element.
+     */
+    checkbox?: MultiStateCheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: MultiStateCheckboxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the sr only aria's DOM element.
+     */
+    srOnlyAria?: MultiStateCheckboxPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in MultiStateCheckbox component.
+ */
+export interface MultiStateCheckboxState {
+    /**
+     * Focused state as a boolean.
+     */
+    focused: boolean;
+}
+
+/**
+ * Custom MultiStateCheckbox option.
+ */
+interface MultiStateCheckboxOption {
+    /**
+     * The icon of the option.
+     */
+    icon: IconType<MultiStateCheckboxProps>;
+    /**
+     * Inline style of the element.
+     */
+    style: React.CSSProperties;
+    /**
+     * Style class of the element.
+     */
+    className: string;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom icon template options.
+ */
+interface MultiStateCheckboxIconTemplateEvent {
+    /**
+     * Option of the element.
+     */
+    option: MultiStateCheckboxOption | null | undefined;
+    /**
+     * Style class of the element.
+     */
+    className: string;
+    /**
+     * The default element created by the component.
+     */
+    element: JSX.Element;
+    /**
+     * The props passed to the component.
+     */
+    props: MultiStateCheckboxProps;
+}
+
+/**
+ * Custom change target options.
+ */
+interface MultiStateCheckboxChangeTargetOptions {
+    /**
+     * The name of the element.
+     */
+    name: string;
+    /**
+     * Unique identifier of the element.
+     */
+    id: string;
+    /**
+     * Value of the MultiStateCheckbox.
+     */
+    value: boolean | null | undefined;
+}
+
+/**
+ * Custom change event.
+ * @see {@link MultiStateCheckboxProps.onChange}
+ * @event
+ */
+interface MultiStateCheckboxChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Current value
+     */
+    value: any;
+    /**
+     * Stops the event from propagating.
+     */
+    stopPropagation(): void;
+    /**
+     * Prevents the default action of the event.
+     */
+    preventDefault(): void;
+    /**
+     * Target options.
+     */
+    target: MultiStateCheckboxChangeTargetOptions;
+}
+
+/**
+ * Defines valid properties in MultiStateCheckbox component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface MultiStateCheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Value of the MultiStateCheckbox.
+     */
+    value?: any | undefined;
+    /**
+     * An array to display as the available options.
+     */
+    options?: MultiStateCheckboxOption[] | any[];
+    /**
+     * Property name to use as the value of an option, defaults to the option itself when not defined.
+     */
+    optionValue?: string | undefined;
+    /**
+     * Property name to refer to the option label, used by screen readers only. Defaults to optionValue.
+     */
+    optionLabel?: string | undefined;
+    /**
+     * Property name to use as the icon of an option, defaults to the icon property.
+     */
+    optionIcon?: string | undefined;
+    /**
+     * Template of icon for the selected option.
+     */
+    iconTemplate?: React.ReactNode | ((options: MultiStateCheckboxIconTemplateEvent) => React.ReactNode);
+    /**
+     * A property to uniquely identify an option.
+     */
+    dataKey?: string | undefined;
+    /**
+     * When present, it specifies that the element value cannot be altered.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the value cannot be changed.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * If false, the empty state is skipped in the chekbox.
+     * @defaultValue true
+     */
+    empty?: boolean | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on value change
+     * @param {MultiStateCheckboxChangeEvent} event - Custom change event.
+     */
+    onChange?(event: MultiStateCheckboxChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {MultiStateCheckboxPassThroughOptions}
+     */
+    pt?: MultiStateCheckboxPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * When present, it specifies that the component has invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue null
+     */
+    variant?: 'filled' | string | undefined;
+}
+
+/**
+ * **PrimeReact - MultiStateCheckbox**
+ *
+ * _MultiStateCheckbox is used to select a state from given multiple states._
+ *
+ * [Live Demo](https://www.primereact.org/multistatecheckbox/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class MultiStateCheckbox extends React.Component<MultiStateCheckboxProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/multistatecheckbox/package.json b/components/lib/multistatecheckbox/package.json
new file mode 100644
index 0000000000..eaff11f7b2
--- /dev/null
+++ b/components/lib/multistatecheckbox/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./multistatecheckbox.cjs.js",
+    "module": "./multistatecheckbox.esm.js",
+    "unpkg": "./multistatecheckbox.min.js",
+    "types": "./multistatecheckbox.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/orderlist/OrderList.js b/components/lib/orderlist/OrderList.js
new file mode 100644
index 0000000000..9b81bb8152
--- /dev/null
+++ b/components/lib/orderlist/OrderList.js
@@ -0,0 +1,532 @@
+import * as React from 'react';
+import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { OrderListBase } from './OrderListBase';
+import { OrderListControls } from './OrderListControls';
+import { OrderListSubList } from './OrderListSubList';
+
+export const OrderList = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = OrderListBase.getProps(inProps, context);
+
+        const [selectionState, setSelectionState] = React.useState([]);
+        const [filterValueState, setFilterValueState] = React.useState('');
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
+        const [focused, setFocused] = React.useState(false);
+        const [focusedOptionId, setFocusedOptionId] = React.useState(null);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+        const hasFilter = ObjectUtils.isNotEmpty(filterValueState);
+        const elementRef = React.useRef(null);
+        const styleElementRef = React.useRef(null);
+        const reorderDirection = React.useRef(null);
+        const listElementRef = React.useRef(null);
+        const reorderedListElementRef = React.useRef(null);
+        const metaData = {
+            props,
+            state: {
+                selection: selectionState,
+                filterValue: filterValueState,
+                attributeSelector: attributeSelectorState
+            }
+        };
+        const { ptm, cx, isUnstyled } = OrderListBase.setMetaData(metaData);
+
+        useHandleStyle(OrderListBase.css.styles, isUnstyled, { name: 'orderlist' });
+
+        const getVisibleList = () => {
+            if (hasFilter) {
+                const filterValue = filterValueState.trim().toLocaleLowerCase(props.filterLocale);
+                const searchFields = props.filterBy ? props.filterBy.split(',') : [];
+
+                return FilterService.filter(props.value, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+            }
+
+            return props.value;
+        };
+
+        const visibleList = getVisibleList();
+
+        const getListElement = () => {
+            return listElementRef.current && listElementRef.current.getElement();
+        };
+
+        const onItemClick = (event) => {
+            const { originalEvent, value, index } = event;
+            const selectedIndex = ObjectUtils.findIndexInList(value, selectionState);
+            const listElement = getListElement();
+            const selectedId = DomHandler.find(listElement, '[data-pc-section="item"]')[index].getAttribute('id');
+
+            setFocusedOptionIndex(selectedId);
+
+            const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
+            const selected = selectedIndex !== -1;
+            let newSelection;
+
+            if (selected) {
+                newSelection = metaKey ? selectionState.filter((_, i) => i !== selectedIndex) : [value];
+            } else {
+                newSelection = metaKey ? [...selectionState, value] : [value];
+            }
+
+            setSelectionState(newSelection);
+        };
+
+        const setSelectionStateWithIndex = (index) => {
+            const item = visibleList[index];
+            const selected = ObjectUtils.findIndexInList(item, selectionState) !== -1;
+
+            if (selected) {
+                setSelectionState(selectionState.filter((selectedItem) => selectedItem !== item));
+            } else {
+                setSelectionState([...selectionState, item]);
+            }
+        };
+
+        const findCurrentFocusedIndex = (listElement) => {
+            if (focusedOptionIndex === -1) {
+                const itemList = listElement && listElement.children ? [...listElement.children] : [];
+                let selectedOptionIndex = findFirstSelectedOptionIndex(listElement, itemList);
+
+                if (props.autoOptionFocus && selectedOptionIndex === -1) {
+                    selectedOptionIndex = findFirstFocusedOptionIndex(listElement, itemList);
+                }
+
+                return selectedOptionIndex;
+            }
+
+            return -1;
+        };
+
+        const findFirstSelectedOptionIndex = (listElement, itemList) => {
+            if (selectionState.length) {
+                const selectedFirstItem = DomHandler.findSingle(listElement, '[data-p-highlight="true"]');
+
+                return ObjectUtils.findIndexInList(selectedFirstItem, itemList);
+            }
+
+            return -1;
+        };
+
+        const findFirstFocusedOptionIndex = (listElement, itemList) => {
+            const firstFocusableItem = DomHandler.findSingle(listElement, '[data-pc-section="item"]');
+
+            return ObjectUtils.findIndexInList(firstFocusableItem, itemList);
+        };
+
+        const onListFocus = (event) => {
+            setFocused(true);
+
+            const listElement = getListElement();
+            const currentFocusedIndex = findCurrentFocusedIndex(listElement);
+
+            changeFocusedOptionIndex(currentFocusedIndex);
+
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onListBlur = (event) => {
+            setFocused(false);
+            setFocusedOptionIndex(-1);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onListKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'KeyA':
+                    if (event.ctrlKey) {
+                        setSelectionState(visibleList);
+                        event.preventDefault();
+                    }
+
+                default:
+                    break;
+            }
+        };
+
+        const onOptionMouseDown = (index) => {
+            setFocusedOptionIndex(index);
+        };
+
+        const onArrowDownKey = (event) => {
+            const optionIndex = findNextOptionIndex(focusedOptionIndex);
+
+            changeFocusedOptionIndex(optionIndex);
+
+            if (event.shiftKey) {
+                setSelectionStateWithIndex(optionIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event) => {
+            const optionIndex = findPrevOptionIndex(focusedOptionIndex);
+
+            changeFocusedOptionIndex(optionIndex);
+
+            if (event.shiftKey) {
+                setSelectionStateWithIndex(optionIndex);
+            }
+
+            event.preventDefault();
+        };
+
+        const onHomeKey = (event) => {
+            if (event.ctrlKey && event.shiftKey) {
+                const listElement = getListElement();
+                const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+                const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+                setSelectionState([...visibleList].slice(0, matchedOptionIndex + 1));
+            } else {
+                changeFocusedOptionIndex(0);
+            }
+
+            event.preventDefault();
+        };
+
+        const onEndKey = (event) => {
+            const listElement = getListElement();
+
+            if (event.ctrlKey && event.shiftKey) {
+                const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+                const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+                setSelectionState([...visibleList].slice(matchedOptionIndex, items.length));
+            } else {
+                changeFocusedOptionIndex(DomHandler.find(listElement, '[data-pc-section="item"]').length - 1);
+            }
+
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            const listElement = getListElement();
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+            const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+            onItemClick({ originalEvent: event, value: visibleList[matchedOptionIndex], index: matchedOptionIndex });
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event) => {
+            event.preventDefault();
+
+            const listElement = getListElement();
+
+            if (event.shiftKey && selectionState && selectionState.length > 0) {
+                const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectionState[0], [...visibleList]);
+                const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+                setSelectionState([...visibleList].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1));
+            } else {
+                onEnterKey(event);
+            }
+        };
+
+        const findNextOptionIndex = (index) => {
+            const listElement = getListElement();
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        };
+
+        const findPrevOptionIndex = (index) => {
+            const listElement = getListElement();
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        };
+
+        const changeFocusedOptionIndex = (index) => {
+            const listElement = getListElement();
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+
+            let order;
+
+            if (index >= items.length) {
+                order = items.length - 1;
+            } else if (index < 0) {
+                return;
+            } else {
+                order = index;
+            }
+
+            const _focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
+
+            setFocusedOptionIndex(_focusedOptionIndex);
+
+            scrollInViewWithFocus(_focusedOptionIndex);
+        };
+
+        const scrollInViewWithFocus = (id) => {
+            const listElement = getListElement();
+            const element = DomHandler.findSingle(listElement, `[data-pc-section="item"][id="${id}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        };
+
+        const scrollInView = (listContainer, direction = 1) => {
+            let selectedItems = listContainer.getElementsByClassName('p-highlight');
+
+            if (ObjectUtils.isNotEmpty(selectedItems)) {
+                DomHandler.scrollInView(listContainer, direction === -1 ? selectedItems[0] : selectedItems[selectedItems.length - 1]);
+            }
+        };
+
+        const handleScrollPosition = (listElement, direction) => {
+            if (listElement) {
+                switch (direction) {
+                    case 'up':
+                        scrollInView(listElement, -1);
+                        break;
+
+                    case 'top':
+                        listElement.scrollTop = 0;
+                        break;
+
+                    case 'down':
+                        scrollInView(listElement, 1);
+                        break;
+
+                    case 'bottom':
+                        setTimeout(() => (listElement.scrollTop = listElement.scrollHeight), 100);
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+        };
+
+        const onFilter = (event) => {
+            let _filterValue = event.target.value;
+
+            setFilterValueState(_filterValue);
+
+            if (props.onFilter) {
+                props.onFilter({
+                    originalEvent: event,
+                    value: _filterValue
+                });
+            }
+        };
+
+        const resetFilter = () => {
+            setFilterValueState('');
+            props.onFilter && props.onFilter({ filter: '' });
+        };
+
+        const onFilterInputChange = (event) => {
+            const filter = event.target.value;
+
+            setFilterValueState(filter);
+
+            if (props.onFilter) {
+                props.onFilter({
+                    originalEvent: event,
+                    filter
+                });
+            }
+        };
+
+        const findNextItem = (item) => {
+            const nextItem = item.nextElementSibling;
+
+            return nextItem ? (!DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item' ? findNextItem(nextItem) : nextItem) : null;
+        };
+
+        const findPrevItem = (item) => {
+            const prevItem = item.previousElementSibling;
+
+            return prevItem ? (!DomHandler.getAttribute(prevItem, 'data-pc-section') === 'item' ? findPrevItem(prevItem) : prevItem) : null;
+        };
+
+        const onReorder = (event) => {
+            if (props.onChange) {
+                props.onChange({
+                    event: event.originalEvent,
+                    value: event.value
+                });
+            }
+
+            reorderDirection.current = event.direction;
+            reorderedListElementRef.current = getListElement();
+        };
+
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+                let innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    .p-orderlist[${attributeSelectorState}] {
+        flex-direction: column;
+    }
+
+    .p-orderlist[${attributeSelectorState}] .p-orderlist-controls {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-orderlist[${attributeSelectorState}] .p-orderlist-controls .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-orderlist[${attributeSelectorState}] .p-orderlist-controls .p-button:last-child {
+        margin-right: 0;
+    }
+}
+`;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+        });
+
+        useUpdateEffect(() => {
+            if (attributeSelectorState) {
+                elementRef.current.setAttribute(attributeSelectorState, '');
+                createStyle();
+            }
+
+            return () => {
+                destroyStyle();
+            };
+        }, [attributeSelectorState, props.breakpoint]);
+
+        useUpdateEffect(() => {
+            const _focusedOptionId = focusedOptionIndex !== -1 ? focusedOptionIndex : null;
+
+            setFocusedOptionId(_focusedOptionId);
+        }, [focusedOptionIndex]);
+
+        useUpdateEffect(() => {
+            if (reorderedListElementRef.current) {
+                handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
+                reorderedListElementRef.current = null;
+                reorderDirection.current = null;
+            }
+        });
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            OrderListBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                <OrderListControls
+                    hostName="OrderList"
+                    value={visibleList}
+                    selection={selectionState}
+                    onReorder={onReorder}
+                    dataKey={props.dataKey}
+                    moveUpIcon={props.moveUpIcon}
+                    moveTopIcon={props.moveTopIcon}
+                    moveDownIcon={props.moveDownIcon}
+                    moveBottomIcon={props.moveBottomIcon}
+                    ptm={ptm}
+                    cx={cx}
+                    unstyled={props.unstyled}
+                    metaData={metaData}
+                />
+                <OrderListSubList
+                    ref={listElementRef}
+                    hostName="OrderList"
+                    {...props}
+                    ariaLabel={props.ariaLabel}
+                    ariaLabelledBy={props.ariaLabelledBy}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    cx={cx}
+                    dataKey={props.dataKey}
+                    dragdrop={props.dragdrop}
+                    filter={props.filter}
+                    filterIcon={props.filterIcon}
+                    filterPlaceholder={props.filterPlaceholder}
+                    filterTemplate={props.filterTemplate}
+                    focused={focused}
+                    focusedOptionId={focusedOptionId}
+                    header={props.header}
+                    isUnstyled={isUnstyled}
+                    itemTemplate={props.itemTemplate}
+                    listStyle={props.listStyle}
+                    onChange={props.onChange}
+                    onFilter={onFilter}
+                    onFilterInputChange={onFilterInputChange}
+                    onItemClick={onItemClick}
+                    onListBlur={onListBlur}
+                    onListFocus={onListFocus}
+                    onListKeyDown={onListKeyDown}
+                    onOptionMouseDown={onOptionMouseDown}
+                    parentId={attributeSelectorState}
+                    ptm={ptm}
+                    resetFilter={resetFilter}
+                    selection={selectionState}
+                    tabIndex={props.tabIndex}
+                    value={visibleList}
+                />
+            </div>
+        );
+    })
+);
+
+OrderList.displayName = 'OrderList';
diff --git a/components/lib/orderlist/OrderListBase.js b/components/lib/orderlist/OrderListBase.js
new file mode 100644
index 0000000000..53f9b44489
--- /dev/null
+++ b/components/lib/orderlist/OrderListBase.js
@@ -0,0 +1,124 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-orderlist p-component',
+    controls: 'p-orderlist-controls',
+    droppoint: 'p-orderlist-droppoint',
+    header: 'p-orderlist-header',
+    list: 'p-orderlist-list',
+    icon: 'p-orderlist-filter',
+    filter: 'p-orderlist-filter',
+    filterInput: 'p-orderlist-filter-input p-inputtext p-component',
+    filterIcon: 'p-orderlist-filter-icon',
+    filterContainer: 'p-orderlist-filter-container',
+    container: 'p-orderlist-list-container',
+    item: ({ selected, focused }) => classNames('p-orderlist-item', { 'p-highlight': selected, 'p-focus': focused })
+};
+
+const styles = `
+@layer primereact {
+    .p-orderlist {
+        display: flex;
+    }
+
+    .p-orderlist-controls {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .p-orderlist-list-container {
+        flex: 1 1 auto;
+    }
+
+    .p-orderlist-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        min-height: 12rem;
+        max-height: 24rem;
+    }
+
+    .p-orderlist-item {
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-orderlist-item .p-ink {
+        pointer-events: none;
+    }
+
+    .p-orderlist-filter {
+        position: relative;
+    }
+
+    .p-orderlist-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+
+    .p-orderlist-filter-input {
+        width: 100%;
+    }
+
+    .p-orderlist.p-state-disabled .p-orderlist-item,
+    .p-orderlist.p-state-disabled .p-button {
+        cursor: default;
+    }
+
+    .p-orderlist.p-state-disabled .p-orderlist-list {
+        overflow: hidden;
+    }
+
+    .p-orderlist .p-orderlist-droppoint {
+        height: 0.5rem;
+    }
+
+    .p-orderlist .p-orderlist-droppoint.p-orderlist-droppoint-highlight {
+        background: var(--primary-color);
+    }
+}
+`;
+
+export const OrderListBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'OrderList',
+        id: null,
+        ariaLabel: null,
+        ariaLabelledBy: null,
+        value: null,
+        header: null,
+        style: null,
+        className: null,
+        listStyle: null,
+        dragdrop: false,
+        tabIndex: 0,
+        filterIcon: null,
+        moveUpIcon: null,
+        moveTopIcon: null,
+        moveDownIcon: null,
+        moveBottomIcon: null,
+        dataKey: null,
+        autoOptionFocus: true,
+        focusOnHover: true,
+        breakpoint: '960px',
+        onChange: null,
+        itemTemplate: null,
+        filter: false,
+        filterBy: null,
+        filterMatchMode: 'contains',
+        filterLocale: undefined,
+        filterPlaceholder: null,
+        filterTemplate: null,
+        onFilter: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/orderlist/OrderListControls.js b/components/lib/orderlist/OrderListControls.js
new file mode 100644
index 0000000000..9d8d4c9b4e
--- /dev/null
+++ b/components/lib/orderlist/OrderListControls.js
@@ -0,0 +1,210 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleDoubleDownIcon } from '../icons/angledoubledown';
+import { AngleDoubleUpIcon } from '../icons/angledoubleup';
+import { AngleDownIcon } from '../icons/angledown';
+import { AngleUpIcon } from '../icons/angleup';
+import { ObjectUtils } from '../utils/Utils';
+
+export const OrderListControls = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const moveUpIcon = props.moveUpIcon || <AngleUpIcon />;
+    const moveTopIcon = props.moveTopIcon || <AngleDoubleUpIcon />;
+    const moveDownIcon = props.moveDownIcon || <AngleDownIcon />;
+    const moveBottomIcon = props.moveBottomIcon || <AngleDoubleDownIcon />;
+    const { ptm, cx, unstyled } = props;
+
+    const moveUp = (event) => {
+        if (props.selection) {
+            let value = [...props.value];
+
+            for (let i = 0; i < props.selection.length; i++) {
+                const selectedItem = props.selection[i];
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
+
+                if (selectedItemIndex !== 0) {
+                    const movedItem = value[selectedItemIndex];
+                    const temp = value[selectedItemIndex - 1];
+
+                    value[selectedItemIndex - 1] = movedItem;
+                    value[selectedItemIndex] = temp;
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value: value,
+                    direction: 'up'
+                });
+            }
+        }
+    };
+
+    const moveTop = (event) => {
+        if (props.selection) {
+            let value = [...props.value];
+
+            for (let i = props.selection.length - 1; i >= 0; i--) {
+                const selectedItem = props.selection[i];
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
+
+                if (selectedItemIndex !== 0) {
+                    const movedItem = value.splice(selectedItemIndex, 1)[0];
+
+                    value.unshift(movedItem);
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value: value,
+                    direction: 'top'
+                });
+            }
+        }
+    };
+
+    const moveDown = (event) => {
+        if (props.selection) {
+            let value = [...props.value];
+
+            for (let i = props.selection.length - 1; i >= 0; i--) {
+                const selectedItem = props.selection[i];
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
+
+                if (selectedItemIndex !== value.length - 1) {
+                    const movedItem = value[selectedItemIndex];
+                    const temp = value[selectedItemIndex + 1];
+
+                    value[selectedItemIndex + 1] = movedItem;
+                    value[selectedItemIndex] = temp;
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value,
+                    direction: 'down'
+                });
+            }
+        }
+    };
+
+    const moveBottom = (event) => {
+        if (props.selection) {
+            let value = [...props.value];
+
+            for (let i = 0; i < props.selection.length; i++) {
+                let selectedItem = props.selection[i];
+                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value, props.dataKey);
+
+                if (selectedItemIndex !== value.length - 1) {
+                    const movedItem = value.splice(selectedItemIndex, 1)[0];
+
+                    value.push(movedItem);
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value,
+                    direction: 'bottom'
+                });
+            }
+        }
+    };
+
+    const isMoveDisabled = ObjectUtils.isEmpty(props.value) || ObjectUtils.isEmpty(props.selection);
+
+    const controlsProps = mergeProps(
+        {
+            className: cx('controls')
+        },
+        ptm('controls', { hostName: props.hostName })
+    );
+
+    const moveUpButtonProps = mergeProps(
+        {
+            type: 'button',
+            unstyled: unstyled,
+            icon: moveUpIcon,
+            onClick: moveUp,
+            disabled: isMoveDisabled,
+            'aria-label': ariaLabel('moveUp'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
+        },
+        ptm('moveUpButton')
+    );
+
+    const moveTopButtonProps = mergeProps(
+        {
+            type: 'button',
+            unstyled: unstyled,
+            icon: moveTopIcon,
+            onClick: moveTop,
+            disabled: isMoveDisabled,
+            'aria-label': ariaLabel('moveTop'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
+        },
+        ptm('moveTopButton')
+    );
+
+    const moveDownButtonProps = mergeProps(
+        {
+            type: 'button',
+            unstyled: unstyled,
+            icon: moveDownIcon,
+            onClick: moveDown,
+            disabled: isMoveDisabled,
+            'aria-label': ariaLabel('moveDown'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
+        },
+        ptm('moveDownButton')
+    );
+
+    const moveBottomButtonProps = mergeProps(
+        {
+            type: 'button',
+            unstyled: unstyled,
+            icon: moveBottomIcon,
+            onClick: moveBottom,
+            disabled: isMoveDisabled,
+            'aria-label': ariaLabel('moveBottom'),
+            __parentMetadata: {
+                parent: props.metaData
+            }
+        },
+        ptm('moveBottomButton')
+    );
+
+    return (
+        <div {...controlsProps}>
+            <Button pt={ptm('moveUpButton')} {...moveUpButtonProps} />
+            <Button pt={ptm('moveTopButton')} {...moveTopButtonProps} />
+            <Button pt={ptm('moveDownButton')} {...moveDownButtonProps} />
+            <Button pt={ptm('moveBottomButton')} {...moveBottomButtonProps} />
+        </div>
+    );
+});
+
+OrderListControls.displayName = 'OrderListControls';
diff --git a/components/lib/orderlist/OrderListSubList.js b/components/lib/orderlist/OrderListSubList.js
new file mode 100644
index 0000000000..65648fd156
--- /dev/null
+++ b/components/lib/orderlist/OrderListSubList.js
@@ -0,0 +1,329 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { SearchIcon } from '../icons/search';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+
+export const OrderListSubList = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { ptm, cx } = props;
+
+        const _ptm = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const getPTOptions = (item, key) => {
+            return _ptm(key, {
+                context: {
+                    selected: isSelected(item)
+                }
+            });
+        };
+
+        const dragging = React.useRef(null);
+        const draggedItemIndex = React.useRef(null);
+        const dragOverItemIndex = React.useRef(null);
+        const listElementRef = React.useRef(null);
+        const filterOptions = {
+            filter: (e) => props.onFilterInputChange(e),
+            reset: () => props.resetFilter()
+        };
+
+        const isSelected = (item) => {
+            return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
+        };
+
+        const onDragStart = (event, index) => {
+            event.dataTransfer.setData('text', 'orderlist');
+            dragging.current = true;
+            draggedItemIndex.current = index;
+        };
+
+        const onDragOver = (event, index) => {
+            if (draggedItemIndex.current !== index && draggedItemIndex.current + 1 !== index) {
+                dragOverItemIndex.current = index;
+                !props.isUnstyled() && DomHandler.addClass(event.target, 'p-orderlist-droppoint-highlight');
+                event.target.setAttribute('data-p-orderlist-droppoint-highlight', true);
+                event.preventDefault();
+            }
+        };
+
+        const onDragLeave = (event) => {
+            dragOverItemIndex.current = null;
+            !props.isUnstyled() && DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
+            event.target.setAttribute('data-p-orderlist-droppoint-highlight', false);
+        };
+
+        const onDrop = (event) => {
+            let dropIndex = draggedItemIndex.current > dragOverItemIndex.current ? dragOverItemIndex.current : dragOverItemIndex.current === 0 ? 0 : dragOverItemIndex.current - 1;
+            let value = [...props.value];
+
+            ObjectUtils.reorderArray(value, draggedItemIndex.current, dropIndex);
+            dragOverItemIndex.current = null;
+            !props.isUnstyled() && DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
+            event.target.setAttribute('data-p-orderlist-droppoint-highlight', false);
+
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value: value
+                });
+            }
+        };
+
+        const onDragEnd = (event) => {
+            dragging.current = false;
+        };
+
+        const onListMouseMove = (event) => {
+            if (dragging.current) {
+                const offsetY = listElementRef.current.getBoundingClientRect().top + DomHandler.getWindowScrollTop();
+                const bottomDiff = offsetY + listElementRef.current.clientHeight - event.pageY;
+                const topDiff = event.pageY - offsetY;
+
+                if (bottomDiff < 25 && bottomDiff > 0) {
+                    listElementRef.current.scrollTop += 15;
+                } else if (topDiff < 25 && topDiff > 0) {
+                    listElementRef.current.scrollTop -= 15;
+                }
+            }
+        };
+
+        const onFilterInputKeyDown = (event) => {
+            //enter
+            if (event.which === 13) {
+                event.preventDefault();
+            }
+        };
+
+        const changeFocusedItemOnHover = (event, index) => {
+            if (props.focusOnHover && props.focused) {
+                props?.changeFocusedOptionIndex?.(index);
+            }
+        };
+
+        const createDropPoint = (index, key) => {
+            const droppointProps = mergeProps(
+                {
+                    className: cx('droppoint'),
+                    onDragOver: (e) => onDragOver(e, index + 1),
+                    onDragLeave: onDragLeave,
+                    onDrop: onDrop
+                },
+                _ptm('droppoint')
+            );
+
+            return <li key={key} {...droppointProps} />;
+        };
+
+        const createHeader = () => {
+            const headerProps = mergeProps(
+                {
+                    className: cx('header')
+                },
+                _ptm('header')
+            );
+
+            return props.header ? <div {...headerProps}>{props.header}</div> : null;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            getElement: () => listElementRef.current
+        }));
+
+        const createItems = () => {
+            if (props.value) {
+                return props.value.map((item, i) => {
+                    const content = props.itemTemplate ? props.itemTemplate(item) : item;
+                    const key = props.parentId + '_' + i;
+                    const focused = props.focused && props.focusedOptionId === key;
+                    const selected = isSelected(item);
+
+                    if (props.dragdrop) {
+                        const itemProps = mergeProps(
+                            {
+                                id: key,
+                                role: 'option',
+                                draggable: 'true',
+                                onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
+                                onMouseDown: props.onOptionMouseDown,
+                                onMouseMove: (e) => changeFocusedItemOnHover(e, i),
+                                onDragStart: (e) => onDragStart(e, i),
+                                onDragEnd: onDragEnd,
+                                className: classNames(props.className, cx('item', { selected, focused })),
+                                'aria-selected': selected,
+                                'data-p-highlight': selected,
+                                'data-p-focused': focused
+                            },
+                            getPTOptions(item, 'item')
+                        );
+
+                        let items = [];
+
+                        if (i === 0) {
+                            items.push(createDropPoint(item, i, key + '_droppoint_start'));
+                        }
+
+                        items.push(
+                            <li key={key} {...itemProps}>
+                                {content}
+                                {/*<Ripple />*/}
+                            </li>
+                        );
+
+                        items.push(createDropPoint(i, key + '_droppoint'));
+
+                        return items;
+                    }
+
+                    const itemProps = mergeProps(
+                        {
+                            id: key,
+                            role: 'option',
+                            onClick: (e) => props.onItemClick({ originalEvent: e, value: item, index: i }),
+                            onMouseDown: props.onOptionMouseDown,
+                            onMouseMove: (e) => changeFocusedItemOnHover(e, i),
+                            className: classNames(props.className, cx('item', { selected, focused })),
+                            'aria-selected': selected,
+                            'data-p-highlight': selected,
+                            'data-p-focused': focused
+                        },
+                        getPTOptions(item, 'item')
+                    );
+
+                    return (
+                        <li key={key} {...itemProps}>
+                            {content}
+                            <Ripple />
+                        </li>
+                    );
+                });
+            }
+
+            return null;
+        };
+
+        const createList = () => {
+            const items = createItems();
+            const listProps = mergeProps(
+                {
+                    ref: listElementRef,
+                    className: cx('list'),
+                    style: props.listStyle,
+                    onDragOver: onListMouseMove,
+                    role: 'listbox',
+                    onFocus: props.onListFocus,
+                    onBlur: props.onListBlur,
+                    onKeyDown: props.onListKeyDown,
+                    tabIndex: props.tabIndex,
+                    'aria-activedescendant': props.focused ? props.focusedOptionId : null,
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
+                    'aria-multiselectable': true
+                },
+                _ptm('list')
+            );
+
+            return <ul {...listProps}>{items}</ul>;
+        };
+
+        const createFilter = () => {
+            const searchIconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                _ptm('icon')
+            );
+            const icon = props.filterIcon || <SearchIcon {...searchIconProps} />;
+            const filterIcon = IconUtils.getJSXIcon(icon, { ...searchIconProps }, { props });
+
+            if (props.filter) {
+                const filterProps = mergeProps(
+                    {
+                        className: cx('filter')
+                    },
+                    _ptm('filter')
+                );
+
+                const filterInputProps = mergeProps(
+                    {
+                        type: 'text',
+                        value: props.filterValue,
+                        onChange: props.onFilter,
+                        onKeyDown: onFilterInputKeyDown,
+                        placeholder: props.filterPlaceholder,
+                        className: cx('filterInput')
+                    },
+                    _ptm('filterInput')
+                );
+
+                const filterIconProps = mergeProps(
+                    {
+                        className: cx('filterIcon')
+                    },
+                    _ptm('filterIcon')
+                );
+
+                let content = (
+                    <div {...filterProps}>
+                        <input {...filterInputProps} />
+                        <span {...filterIconProps}>{filterIcon}</span>
+                    </div>
+                );
+
+                if (props.filterTemplate) {
+                    const defaultContentOptions = {
+                        className: 'p-orderlist-filter',
+                        inputProps: {
+                            inputClassName: 'p-orderlist-filter-input p-inputtext p-component',
+                            onChange: props.onFilter,
+                            onKeyDown: onFilterInputKeyDown
+                        },
+                        filterOptions: filterOptions,
+                        iconClassName: 'p-orderlist-filter-icon',
+                        element: content,
+                        props
+                    };
+
+                    content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+                }
+
+                const filterContainerProps = mergeProps(
+                    {
+                        className: cx('filterContainer')
+                    },
+                    _ptm('filterContainer')
+                );
+
+                return <div {...filterContainerProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const header = createHeader();
+        const filter = createFilter();
+        const list = createList();
+
+        const containerProps = mergeProps(
+            {
+                className: cx('container')
+            },
+            _ptm('container')
+        );
+
+        return (
+            <div {...containerProps}>
+                {header}
+                {filter}
+                {list}
+            </div>
+        );
+    })
+);
+
+OrderListSubList.displayName = 'OrderListSubList';
diff --git a/components/lib/orderlist/orderlist.d.ts b/components/lib/orderlist/orderlist.d.ts
new file mode 100755
index 0000000000..d0fbd55abb
--- /dev/null
+++ b/components/lib/orderlist/orderlist.d.ts
@@ -0,0 +1,317 @@
+/**
+ *
+ * OrderList is used to sort a collection.
+ *
+ * [Live Demo](https://www.primereact.org/orderlist/)
+ *
+ * @module orderlist
+ *
+ */
+import * as React from 'react';
+import { ButtonPassThroughOptions } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type OrderListPassThroughType<T> = PassThroughType<T, OrderListPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OrderListPassThroughMethodOptions {
+    props: OrderListProps;
+    state: OrderListState;
+    context: OrderListContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OrderListProps.pt}
+ */
+export interface OrderListPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the controls' DOM element.
+     */
+    controls?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveUpButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveTopButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveDownButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveBottomButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    list?: OrderListPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: OrderListPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    droppoint?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    icon?: OrderListPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filterInput?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filterIcon?: OrderListPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filter?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    filterContainer?: OrderListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in OrderList component.
+ */
+export interface OrderListState {
+    /**
+     * Current selection state as a boolean.
+     */
+    selection: [];
+    /**
+     * Current filter value as a string.s
+     */
+    filterValue: string;
+    /**
+     * Current attribute selector state as a string.
+     */
+    attributeSelector: string;
+}
+
+/**
+ * Defines current options in OrderList component.
+ */
+export interface OrderListContext {
+    /**
+     * Current selection state of the item as a boolean.
+     */
+    selected: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link OrderListProps.onChange}
+ * @event
+ */
+interface OrderListChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Reordered list
+     */
+    value: any;
+}
+
+/**
+ * Custom filter options.
+ */
+interface OrderListFilterOptions {
+    /**
+     * Browser keyboard event for the filter orderlist element.
+     */
+    filter?: (event?: KeyboardEvent) => void;
+    /**
+     * Used to reset the filter.
+     */
+    reset?: () => void;
+}
+
+/**
+ * Defines valid properties in OrderList component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface OrderListProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
+    /**
+     * An array of objects to reorder.
+     */
+    value?: any[] | undefined;
+    /**
+     * Text for the caption.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Whether to focus on the first visible or selected element.
+     * @defaultValue true
+     */
+    autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
+    /**
+     * Inline style of the list element.
+     */
+    listStyle?: React.CSSProperties | undefined;
+    /**
+     * Whether to enable dragdrop based reordering.
+     * @defaultValue false
+     */
+    dragdrop?: boolean | undefined;
+    /**
+     * Used to define a string that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+    /**
+     * Name of the field that uniquely identifies the a record in the data.
+     */
+    dataKey: string;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     * @defaultValue '960px'.
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Icon of the move up icon.
+     */
+    moveUpIcon?: IconType<OrderListProps> | undefined;
+    /**
+     * Icon of the move top icon.
+     */
+    moveTopIcon?: IconType<OrderListProps> | undefined;
+    /**
+     * Icon of the move down icon.
+     */
+    moveDownIcon?: IconType<OrderListProps> | undefined;
+    /**
+     * Icon of the move bottom icon.
+     */
+    moveBottomIcon?: IconType<OrderListProps> | undefined;
+    /**
+     * Icon of the filter.
+     */
+    filterIcon?: IconType<OrderListProps> | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filter?: boolean | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: string | undefined;
+    /**
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
+     * @defaultValue contains
+     */
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Custom template of filter element.
+     */
+    filterTemplate?: React.ReactNode | ((options: OrderListFilterOptions) => React.ReactNode);
+    /**
+     * Callback to invoke to when a mouse button is pressed.
+     * @param {OrderListChangeEvent} event - Browser event.
+     */
+    onChange?(event: OrderListChangeEvent): void;
+    /**
+     * The template of each item
+     * @param {*} item - Current item
+     */
+    itemTemplate?(item: any): React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OrderListPassThroughOptions}
+     */
+    pt?: OrderListPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - OrderList**
+ *
+ * _OrderList is used to sort a collection._
+ *
+ * [Live Demo](https://www.primereact.org/orderlist/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class OrderList extends React.Component<OrderListProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/orderlist/package.json b/components/lib/orderlist/package.json
new file mode 100644
index 0000000000..0d1e38a4fe
--- /dev/null
+++ b/components/lib/orderlist/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./orderlist.cjs.js",
+    "module": "./orderlist.esm.js",
+    "unpkg": "./orderlist.min.js",
+    "types": "./orderlist.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/organizationchart/OrganizationChart.js b/components/lib/organizationchart/OrganizationChart.js
new file mode 100644
index 0000000000..e9bc7d1762
--- /dev/null
+++ b/components/lib/organizationchart/OrganizationChart.js
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames, DomHandler } from '../utils/Utils';
+import { OrganizationChartBase } from './OrganizationChartBase';
+import { OrganizationChartNode } from './OrganizationChartNode';
+
+export const OrganizationChart = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = OrganizationChartBase.getProps(inProps, context);
+        const { ptm, cx, sx, isUnstyled } = OrganizationChartBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(OrganizationChartBase.css.styles, isUnstyled, { name: 'orgchart' });
+        const elementRef = React.useRef(null);
+        const root = props.value && props.value.length ? props.value[0] : null;
+
+        const onNodeClick = (event, node) => {
+            if (props.selectionMode) {
+                const target = event.target;
+
+                if (node.selectable === false || DomHandler.hasClass(target, 'p-node-toggler') || DomHandler.hasClass(target, 'p-node-toggler-icon')) {
+                    return;
+                }
+
+                const index = findIndexInSelection(node);
+                const selected = index >= 0;
+                let selection;
+
+                if (props.selectionMode === 'single') {
+                    if (selected) {
+                        selection = null;
+                        props.onNodeUnselect && props.onNodeUnselect({ originalEvent: event, node });
+                    } else {
+                        selection = node;
+                        props.onNodeSelect && props.onNodeSelect({ originalEvent: event, node });
+                    }
+                } else if (props.selectionMode === 'multiple') {
+                    if (selected) {
+                        selection = props.selection.filter((_, i) => i !== index);
+                        props.onNodeUnselect && props.onNodeUnselect({ originalEvent: event, node });
+                    } else {
+                        selection = [...(props.selection || []), node];
+                        props.onNodeSelect && props.onNodeSelect({ originalEvent: event, node });
+                    }
+                }
+
+                if (props.onSelectionChange) {
+                    props.onSelectionChange({
+                        originalEvent: event,
+                        data: selection
+                    });
+                }
+            }
+        };
+
+        const findIndexInSelection = (node) => {
+            if (props.selectionMode && props.selection) {
+                if (props.selectionMode === 'single') {
+                    return props.selection === node ? 0 : -1;
+                } else if (props.selectionMode === 'multiple') {
+                    return props.selection.findIndex((selectedNode) => selectedNode === node);
+                }
+            }
+
+            return -1;
+        };
+
+        const isSelected = (node) => {
+            return findIndexInSelection(node) !== -1;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                style: props.style,
+                className: classNames(props.className, cx('root'))
+            },
+            OrganizationChartBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                <OrganizationChartNode
+                    hostName="OrganizationChart"
+                    node={root}
+                    nodeTemplate={props.nodeTemplate}
+                    selectionMode={props.selectionMode}
+                    onNodeClick={onNodeClick}
+                    isSelected={isSelected}
+                    togglerIcon={props.togglerIcon}
+                    ptm={ptm}
+                    cx={cx}
+                    sx={sx}
+                />
+            </div>
+        );
+    })
+);
+
+OrganizationChart.displayName = 'OrganizationChart';
diff --git a/components/lib/organizationchart/OrganizationChartBase.js b/components/lib/organizationchart/OrganizationChartBase.js
new file mode 100644
index 0000000000..46fb4139b6
--- /dev/null
+++ b/components/lib/organizationchart/OrganizationChartBase.js
@@ -0,0 +1,102 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-organizationchart-table {
+        border-spacing: 0;
+        border-collapse: separate;
+        margin: 0 auto;
+    }
+    
+    .p-organizationchart-table > tbody > tr > td {
+        text-align: center;
+        vertical-align: top;
+        padding: 0 .75rem;
+    }
+    
+    .p-organizationchart-node-content {
+        display: inline-block;
+        position: relative;
+    }
+    
+    .p-organizationchart-node-content .p-node-toggler {
+        position: absolute;
+        bottom: -.75rem;
+        margin-left: -.75rem;
+        z-index: 2;
+        left: 50%;
+        user-select: none;
+        cursor: pointer;
+        width: 1.5rem;
+        height: 1.5rem;
+        text-decoration: none;
+    }
+    
+    .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
+        position: relative;
+        top: .25rem;
+    }
+    
+    .p-organizationchart-line-down {
+        margin: 0 auto;
+        height: 20px;
+        width: 1px;
+    }
+    
+    .p-organizationchart-line-right {
+        border-radius: 0px;
+    }
+    
+     .p-organizationchart-line-left {
+        border-radius: 0;
+    }
+    
+    .p-organizationchart-selectable-node {
+        cursor: pointer;
+    }
+}
+`;
+
+const classes = {
+    root: 'p-organizationchart p-component',
+    table: 'p-organizationchart-table',
+    node: ({ nodeProps: props, node, selected }) =>
+        classNames(
+            'p-organizationchart-node-content',
+            {
+                'p-organizationchart-selectable-node': props.selectionMode && node.selectable !== false,
+                'p-highlight': selected
+            },
+            node.className
+        ),
+    nodes: 'p-organizationchart-nodes',
+    lines: 'p-organizationchart-lines',
+    lineLeft: ({ index }) => classNames('p-organizationchart-line-left', { 'p-organizationchart-line-top': index !== 0 }),
+    lineRight: ({ index, nodeChildLength }) => classNames('p-organizationchart-line-right', { 'p-organizationchart-line-top': index !== nodeChildLength - 1 }),
+    lineDown: 'p-organizationchart-line-down',
+    nodeTogglerIcon: 'p-node-toggler-icon',
+    nodeToggler: 'p-node-toggler'
+};
+
+export const OrganizationChartBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'OrganizationChart',
+        id: null,
+        value: null,
+        style: null,
+        className: null,
+        selectionMode: null,
+        selection: null,
+        nodeTemplate: null,
+        onSelectionChange: null,
+        onNodeSelect: null,
+        onNodeUnselect: null,
+        togglerIcon: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/organizationchart/OrganizationChartNode.js b/components/lib/organizationchart/OrganizationChartNode.js
new file mode 100644
index 0000000000..02370bac14
--- /dev/null
+++ b/components/lib/organizationchart/OrganizationChartNode.js
@@ -0,0 +1,294 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronUpIcon } from '../icons/chevronup';
+import { IconUtils, ObjectUtils } from '../utils/Utils';
+
+export const OrganizationChartNode = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const node = props.node;
+    const [expandedState, setExpandedState] = React.useState(node.expanded);
+    const leaf = node.leaf === false ? false : !(node.children && node.children.length);
+    const colspan = node.children && node.children.length ? node.children.length * 2 : null;
+    const selected = props.isSelected(node);
+    const visibility = !leaf && expandedState ? 'inherit' : 'hidden';
+    const { ptm, cx, sx } = props;
+
+    const _ptm = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            ...options
+        });
+    };
+
+    const getPTOptions = (key) => {
+        return _ptm(key, {
+            state: {
+                expanded: expandedState
+            },
+            context: {
+                selected: props.isSelected(node)
+            }
+        });
+    };
+
+    const getNodePTOptions = (lineTop, key) => {
+        return _ptm(key, {
+            context: {
+                lineTop
+            }
+        });
+    };
+
+    const onNodeClick = (event, node) => {
+        props.onNodeClick(event, node);
+    };
+
+    const toggleNode = (event, node) => {
+        setExpandedState((prevExpanded) => !prevExpanded);
+        event.preventDefault();
+    };
+
+    const onKeyDown = (event, node) => {
+        if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {
+            toggleNode(event, node);
+            event.preventDefault();
+        }
+    };
+
+    const createChildNodes = () => {
+        const nodesProps = mergeProps(
+            {
+                className: cx('nodes'),
+                style: { visibility }
+            },
+            _ptm('nodes')
+        );
+        const nodeCellProps = mergeProps(
+            {
+                colSpan: '2'
+            },
+            _ptm('nodeCell')
+        );
+
+        return (
+            <tr {...nodesProps}>
+                {node.children &&
+                    node.children.map((child, index) => {
+                        return (
+                            <td key={index} {...nodeCellProps}>
+                                <OrganizationChartNode
+                                    node={child}
+                                    nodeTemplate={props.nodeTemplate}
+                                    selectionMode={props.selectionMode}
+                                    onNodeClick={props.onNodeClick}
+                                    isSelected={props.isSelected}
+                                    togglerIcon={props.togglerIcon}
+                                    ptm={ptm}
+                                    cx={cx}
+                                    sx={sx}
+                                />
+                            </td>
+                        );
+                    })}
+            </tr>
+        );
+    };
+
+    const createLinesMiddle = () => {
+        const nodeChildLength = node.children && node.children.length;
+        const linesProps = mergeProps(
+            {
+                className: cx('lines'),
+                style: { visibility }
+            },
+            _ptm('lines')
+        );
+        const lineCellProps = mergeProps(
+            {
+                colSpan: colspan
+            },
+            _ptm('lineCell')
+        );
+        const lineDownProps = mergeProps(
+            {
+                className: cx('lineDown')
+            },
+            _ptm('lineDown')
+        );
+
+        return (
+            <tr {...linesProps}>
+                {node.children && node.children.length === 1 && (
+                    <td {...lineCellProps}>
+                        <div {...lineDownProps} />
+                    </td>
+                )}
+                {node.children &&
+                    node.children.length > 1 &&
+                    node.children.map((_, index) => {
+                        const lineLeftProps = mergeProps(
+                            {
+                                className: cx('lineLeft', { index })
+                            },
+                            getNodePTOptions(index !== 0, 'lineLeft')
+                        );
+                        const lineRightProps = mergeProps(
+                            {
+                                className: cx('lineRight', { index, nodeChildLength })
+                            },
+                            getNodePTOptions(index !== nodeChildLength - 1, 'lineRight')
+                        );
+
+                        return [
+                            <td key={index + '_lineleft'} {...lineLeftProps}>
+                                &nbsp;
+                            </td>,
+                            <td key={index + '_lineright'} {...lineRightProps}>
+                                &nbsp;
+                            </td>
+                        ];
+                    })}
+            </tr>
+        );
+    };
+
+    const createLinesDown = () => {
+        const linesProps = mergeProps(
+            {
+                className: cx('lines'),
+                style: { visibility }
+            },
+            _ptm('lines')
+        );
+
+        const lineCellProps = mergeProps(
+            {
+                colSpan: colspan
+            },
+            _ptm('lineCell')
+        );
+
+        const lineDownProps = mergeProps(
+            {
+                className: cx('lineDown')
+            },
+            _ptm('lineDown')
+        );
+
+        return (
+            <tr {...linesProps}>
+                <td {...lineCellProps}>
+                    <div {...lineDownProps} />
+                </td>
+            </tr>
+        );
+    };
+
+    const createToggler = () => {
+        if (!leaf) {
+            const nodeTogglerIconProps = mergeProps(
+                {
+                    className: cx('nodeTogglerIcon')
+                },
+                _ptm('nodeTogglerIcon')
+            );
+
+            let icon;
+
+            if (expandedState) {
+                icon = props.togglerIcon || <ChevronDownIcon {...nodeTogglerIconProps} />;
+            } else {
+                icon = props.togglerIcon || <ChevronUpIcon {...nodeTogglerIconProps} />;
+            }
+
+            const togglerIcon = IconUtils.getJSXIcon(icon, { ...nodeTogglerIconProps }, { props });
+
+            const nodeTogglerProps = mergeProps(
+                {
+                    className: cx('nodeToggler'),
+                    tabIndex: 0,
+                    onKeyDown: (e) => onKeyDown(e, node),
+                    onClick: (e) => toggleNode(e, node),
+                    href: '#'
+                },
+                getPTOptions('nodeToggler')
+            );
+
+            return (
+                /* eslint-disable */
+                <a {...nodeTogglerProps}>
+                    <i> {togglerIcon} </i>
+                </a>
+                /* eslint-enable */
+            );
+        }
+
+        return null;
+    };
+
+    const createNodeLabel = () => {
+        const label = (props.nodeTemplate && ObjectUtils.getJSXElement(props.nodeTemplate, node)) || node.label;
+
+        return <div>{label}</div>;
+    };
+
+    const createNodeContent = () => {
+        const label = createNodeLabel();
+        const toggler = createToggler();
+
+        const cellProps = mergeProps(
+            {
+                colSpan: colspan
+            },
+            _ptm('cell')
+        );
+
+        const nodeProps = mergeProps(
+            {
+                className: cx('node', { selected, node, nodeProps: props }),
+                style: node.style,
+                onClick: (e) => onNodeClick(e, node)
+            },
+            getPTOptions('node')
+        );
+
+        const rowProps = mergeProps(_ptm('row'));
+
+        return (
+            <tr {...rowProps}>
+                <td {...cellProps}>
+                    <div {...nodeProps}>
+                        {label}
+                        {toggler}
+                    </div>
+                </td>
+            </tr>
+        );
+    };
+
+    const nodeContent = createNodeContent();
+    const linesDown = createLinesDown();
+    const linesMiddle = createLinesMiddle();
+    const childNodes = createChildNodes();
+
+    const tableProps = mergeProps(
+        {
+            className: cx('table')
+        },
+        _ptm('table')
+    );
+
+    return (
+        <table {...tableProps}>
+            <tbody>
+                {nodeContent}
+                {linesDown}
+                {linesMiddle}
+                {childNodes}
+            </tbody>
+        </table>
+    );
+});
+
+OrganizationChartNode.displayName = 'OrganizationChartNode';
diff --git a/components/lib/organizationchart/organizationchart.d.ts b/components/lib/organizationchart/organizationchart.d.ts
new file mode 100644
index 0000000000..88695a2cfe
--- /dev/null
+++ b/components/lib/organizationchart/organizationchart.d.ts
@@ -0,0 +1,269 @@
+/**
+ *
+ * OrganizationChart visualizes hierarchical organization data.
+ *
+ * [Live Demo](https://www.primereact.org/organizationchart/)
+ *
+ * @module organizationchart
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type OrganizationChartPassThroughType<T> = PassThroughType<T, OrganizationChartPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OrganizationChartPassThroughMethodOptions {
+    props: OrganizationChartProps;
+    state: OrganizationChartState;
+    context: OrganizationChartContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OrganizationChartProps.pt}
+ */
+export interface OrganizationChartPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the row's DOM element.
+     */
+    row?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the cell's DOM element.
+     */
+    cell?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the node's DOM element.
+     */
+    node?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the nodeToggler's DOM element.
+     */
+    nodeToggler?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the nodeTogglerIcon's DOM element.
+     */
+    nodeTogglerIcon?: OrganizationChartPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the lines's DOM element.
+     */
+    lines?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the lineLeft's DOM element.
+     */
+    lineLeft?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the lineRight's DOM element.
+     */
+    lineRight?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the lineCell's DOM element.
+     */
+    lineCell?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the lineDown's DOM element.
+     */
+    lineDown?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the nodes's DOM element.
+     */
+    nodes?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the nodeCell's DOM element.
+     */
+    nodeCell?: OrganizationChartPassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in OrganizationChart component.
+ */
+export interface OrganizationChartState {
+    /**
+     * Current focus expanded of the node as a boolean.
+     */
+    expanded: boolean;
+}
+
+/**
+ * Defines current options in OrganizationChart component.
+ */
+export interface OrganizationChartContext {
+    /**
+     * Current selection state of the node as a boolean.
+     */
+    selected: boolean;
+}
+
+/**
+ * Custom node select event.
+ * @see {@link OrganizationChartProps.onNodeSelect}
+ * @event
+ */
+interface OrganizationChartNodeSelectEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected node instance.
+     */
+    node: OrganizationChartNodeData | null | undefined;
+}
+
+/**
+ * Custom node unselect event.
+ * @see {@link OrganizationChartProps.onNodeUnselect}
+ * @event
+ */
+interface OrganizationChartNodeUnselectEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Unselected node instance.
+     */
+    node: OrganizationChartNodeData | null | undefined;
+}
+
+/**
+ * Custom selection change event.
+ * @see {@link OrganizationChartProps.onSelectionChange}
+ * @event
+ */
+interface OrganizationChartSelectionChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected node(s).
+     */
+    data: OrganizationChartNodeData | OrganizationChartNodeData[] | null | undefined;
+}
+
+/**
+ * Custom organizationchart node data.
+ */
+interface OrganizationChartNodeData {
+    /**
+     * Style class of the node.
+     */
+    className?: string;
+    /**
+     * Visibility of node.
+     */
+    expanded?: boolean;
+    /**
+     * The child elements of the component.
+     * @readonly
+     */
+    children?: OrganizationChartNodeData[];
+    /**
+     * Whether the node is selectable when selection mode is enabled.
+     */
+    selectable?: boolean;
+    /**
+     * Label of node.
+     */
+    label?: string;
+}
+
+/**
+ * Defines valid properties in OrganizationChart component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface OrganizationChartProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * An array of nested TreeNodes.
+     */
+    value?: OrganizationChartNodeData[] | undefined;
+    /**
+     * Toggle icon of an expanded and collapsed node.
+     */
+    togglerIcon?: IconType<OrganizationChartProps> | undefined;
+    /**
+     * Defines the selection mode, valid values "single" and "multiple".
+     */
+    selectionMode?: 'single' | 'multiple' | undefined;
+    /**
+     * A single treenode instance or an array to refer to the selections.
+     */
+    selection?: OrganizationChartNodeData | OrganizationChartNodeData[] | null | undefined;
+    /**
+     * Template function that gets a node as a parameter and returns a content.
+     * @param {OrganizationChartNodeData} node - A node instance.
+     */
+    nodeTemplate?(node: OrganizationChartNodeData): React.ReactNode;
+    /**
+     * Callback to invoke when node selection changes.
+     * @param {OrganizationChartSelectionChangeEvent} event - Custom selection changed event.
+     */
+    onSelectionChange?(event: OrganizationChartSelectionChangeEvent): void;
+    /**
+     * Callback to invoke when a node is selected.
+     * @param {OrganizationChartNodeSelectEvent} event - Custom node select event.
+     */
+    onNodeSelect?(event: OrganizationChartNodeSelectEvent): void;
+    /**
+     * Callback to invoke when a node is unselected.
+     * @param {OrganizationChartNodeUnselectEvent} event - Custom node unselect event.
+     */
+    onNodeUnselect?(event: OrganizationChartNodeUnselectEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OrganizationChartPassThroughOptions}
+     */
+    pt?: OrganizationChartPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - OrganizationChart**
+ *
+ * _OrganizationChart visualizes hierarchical organization data._
+ *
+ * [Live Demo](https://www.primereact.org/organizationchart/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class OrganizationChart extends React.Component<OrganizationChartProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/organizationchart/package.json b/components/lib/organizationchart/package.json
new file mode 100644
index 0000000000..fe99b1f7f0
--- /dev/null
+++ b/components/lib/organizationchart/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./organizationchart.cjs.js",
+    "module": "./organizationchart.esm.js",
+    "unpkg": "./organizationchart.min.js",
+    "types": "./organizationchart.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
new file mode 100644
index 0000000000..4f8fcfe583
--- /dev/null
+++ b/components/lib/overlaypanel/OverlayPanel.js
@@ -0,0 +1,333 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect } from '../hooks/Hooks';
+import { TimesIcon } from '../icons/times';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { OverlayPanelBase } from './OverlayPanelBase';
+
+export const OverlayPanel = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = OverlayPanelBase.getProps(inProps, context);
+    const [visibleState, setVisibleState] = React.useState(false);
+
+    const { ptm, cx, sx, isUnstyled } = OverlayPanelBase.setMetaData({
+        props,
+        state: {
+            visible: visibleState
+        }
+    });
+
+    useHandleStyle(OverlayPanelBase.css.styles, isUnstyled, { name: 'overlaypanel' });
+
+    const attributeSelector = React.useRef('');
+    const overlayRef = React.useRef(null);
+    const currentTargetRef = React.useRef(null);
+    const isPanelClicked = React.useRef(false);
+    const styleElement = React.useRef(null);
+    const overlayEventListener = React.useRef(null);
+
+    const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+        target: currentTargetRef,
+        overlay: overlayRef,
+        listener: (event, { type, valid }) => {
+            if (valid) {
+                if (type === 'outside') {
+                    if (props.dismissable && !isPanelClicked.current) {
+                        hide();
+                    }
+
+                    isPanelClicked.current = false;
+                } else if (context.hideOverlaysOnDocumentScrolling) {
+                    hide();
+                } else if (!DomHandler.isDocument(event.target)) {
+                    align();
+                }
+            }
+        },
+        when: visibleState
+    });
+
+    const isCloseOnEscape = visibleState && props.closeOnEscape;
+    const overlayPanelDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape);
+
+    useGlobalOnEscapeKey({
+        callback: () => {
+            hide();
+        },
+        when: isCloseOnEscape && overlayPanelDisplayOrder,
+        priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayPanelDisplayOrder]
+    });
+
+    const isOutsideClicked = (target) => {
+        return overlayRef && overlayRef.current && !(overlayRef.current.isSameNode(target) || overlayRef.current.contains(target));
+    };
+
+    const hasTargetChanged = (event, target) => {
+        return currentTargetRef.current != null && currentTargetRef.current !== (target || event.currentTarget || event.target);
+    };
+
+    const onCloseClick = (event) => {
+        hide();
+
+        event.preventDefault();
+    };
+
+    const onPanelClick = (event) => {
+        isPanelClicked.current = true;
+
+        OverlayService.emit('overlay-click', {
+            originalEvent: event,
+            target: currentTargetRef.current
+        });
+    };
+
+    const onContentClick = () => {
+        isPanelClicked.current = true;
+    };
+
+    const toggle = (event, target) => {
+        if (visibleState) {
+            hide();
+
+            if (hasTargetChanged(event, target)) {
+                currentTargetRef.current = target || event.currentTarget || event.target;
+
+                setTimeout(() => {
+                    show(event, currentTargetRef.current);
+                }, 200);
+            }
+        } else {
+            show(event, target);
+        }
+    };
+
+    const show = (event, target) => {
+        currentTargetRef.current = target || event.currentTarget || event.target;
+
+        if (visibleState) {
+            align();
+        } else {
+            setVisibleState(true);
+
+            overlayEventListener.current = (e) => {
+                !isOutsideClicked(e.target) && (isPanelClicked.current = true);
+            };
+
+            OverlayService.on('overlay-click', overlayEventListener.current);
+        }
+    };
+
+    const hide = () => {
+        setVisibleState(false);
+
+        OverlayService.off('overlay-click', overlayEventListener.current);
+        overlayEventListener.current = null;
+    };
+
+    const onEnter = () => {
+        overlayRef.current.setAttribute(attributeSelector.current, '');
+        ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+        DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+        align();
+    };
+
+    let bindOverlayTimer = null;
+
+    const onEntered = () => {
+        cancelOverlayBind();
+        /**
+         * With cssTransition=false, onEntered may run synchronously before visibleState updates, causing the outside-click listener not to bind.
+         * Fix: defer the binding to the next tick so it runs with the latest state (when=true). (issue: #8183)
+         */
+        bindOverlayTimer = setTimeout(() => {
+            bindOverlayListener();
+        });
+
+        props.onShow && props.onShow();
+    };
+
+    const onExit = () => {
+        cancelOverlayBind();
+        unbindOverlayListener();
+    };
+
+    const cancelOverlayBind = () => {
+        if (bindOverlayTimer) {
+            clearTimeout(bindOverlayTimer);
+            bindOverlayTimer = null;
+        }
+    };
+
+    const onExited = () => {
+        ZIndexUtils.clear(overlayRef.current);
+
+        props.onHide && props.onHide();
+    };
+
+    const align = () => {
+        if (currentTargetRef.current && overlayRef.current) {
+            DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
+
+            const containerOffset = DomHandler.getOffset(overlayRef.current);
+            const targetOffset = DomHandler.getOffset(currentTargetRef.current);
+            let arrowLeft = 0;
+
+            if (containerOffset.left < targetOffset.left) {
+                arrowLeft = targetOffset.left - containerOffset.left;
+            }
+
+            overlayRef.current.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
+
+            if (containerOffset.top < targetOffset.top) {
+                overlayRef.current.setAttribute('data-p-overlaypanel-flipped', 'true');
+                isUnstyled && DomHandler.addClass(overlayRef.current, 'p-overlaypanel-flipped');
+            } else {
+                overlayRef.current.setAttribute('data-p-overlaypanel-flipped', 'false');
+                isUnstyled && DomHandler.removeClass(overlayRef.current, 'p-overlaypanel-flipped');
+            }
+        }
+    };
+
+    const createStyle = () => {
+        if (!styleElement.current) {
+            styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+            let innerHTML = '';
+
+            for (let breakpoint in props.breakpoints) {
+                innerHTML =
+                    innerHTML +
+                    `
+                    @media screen and (max-width: ${breakpoint}) {
+                        .p-overlaypanel[${attributeSelector.current}] {
+                            width: ${props.breakpoints[breakpoint]};
+                        }
+                    }
+                `;
+            }
+
+            styleElement.current.innerHTML = innerHTML;
+        }
+    };
+
+    useMountEffect(() => {
+        attributeSelector.current = UniqueComponentId();
+
+        if (props.breakpoints) {
+            createStyle();
+        }
+    });
+
+    useUnmountEffect(() => {
+        styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
+
+        if (overlayEventListener.current) {
+            OverlayService.off('overlay-click', overlayEventListener.current);
+            overlayEventListener.current = null;
+        }
+
+        ZIndexUtils.clear(overlayRef.current);
+    });
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        toggle,
+        show,
+        hide,
+        align,
+        isVisible: () => visibleState,
+        getElement: () => overlayRef.current
+    }));
+
+    const createCloseIcon = () => {
+        const closeIconProps = mergeProps(
+            {
+                className: cx('closeIcon'),
+                'aria-hidden': true
+            },
+            ptm('closeIcon')
+        );
+        const icon = props.closeIcon || <TimesIcon {...closeIconProps} />;
+        const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props });
+        const closeButtonProps = mergeProps(
+            {
+                type: 'button',
+                className: cx('closeButton'),
+                onClick: (e) => onCloseClick(e),
+                'aria-label': props.ariaCloseLabel || ariaLabel('close')
+            },
+            ptm('closeButton')
+        );
+
+        if (props.showCloseIcon) {
+            return (
+                <button {...closeButtonProps}>
+                    {closeIcon}
+                    <Ripple />
+                </button>
+            );
+        }
+
+        return null;
+    };
+
+    const createElement = () => {
+        const closeIcon = createCloseIcon();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                className: classNames(props.className, cx('root', { context })),
+                style: props.style,
+                onClick: (e) => onPanelClick(e)
+            },
+            OverlayPanelBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const contentProps = mergeProps(
+            {
+                className: cx('content'),
+                onClick: (e) => onContentClick(e),
+                onMouseDown: onContentClick
+            },
+            OverlayPanelBase.getOtherProps(props),
+            ptm('content')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                in: visibleState,
+                timeout: { enter: 120, exit: 100 },
+                options: props.transitionOptions,
+                unmountOnExit: true,
+                onEnter: onEnter,
+                onEntered: onEntered,
+                onExit: onExit,
+                onExited: onExited
+            },
+            ptm('transition')
+        );
+
+        return (
+            <CSSTransition nodeRef={overlayRef} {...transitionProps}>
+                <div ref={overlayRef} {...rootProps}>
+                    <div {...contentProps}>{props.children}</div>
+                    {closeIcon}
+                </div>
+            </CSSTransition>
+        );
+    };
+
+    const element = createElement();
+
+    return <Portal element={element} appendTo={props.appendTo} />;
+});
+
+OverlayPanel.displayName = 'OverlayPanel';
diff --git a/components/lib/overlaypanel/OverlayPanelBase.js b/components/lib/overlaypanel/OverlayPanelBase.js
new file mode 100644
index 0000000000..775675e26e
--- /dev/null
+++ b/components/lib/overlaypanel/OverlayPanelBase.js
@@ -0,0 +1,122 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-overlaypanel p-component', {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    closeIcon: 'p-overlaypanel-close-icon',
+    closeButton: 'p-overlaypanel-close p-link',
+    content: 'p-overlaypanel-content',
+    transition: 'p-overlaypanel'
+};
+
+const styles = `
+@layer primereact {
+    .p-overlaypanel {
+        position: absolute;
+        margin-top: 10px;
+        /* Github #3122: Prevent animation flickering  */
+        top: -9999px;
+        left: -9999px;
+    }
+    
+    .p-overlaypanel-flipped {
+        margin-top: -10px;
+        margin-bottom: 10px;
+    }
+    
+    .p-overlaypanel-close {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    /* Animation */
+    .p-overlaypanel-enter {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
+    
+    .p-overlaypanel-enter-active {
+        opacity: 1;
+        transform: scaleY(1);
+        transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+    }
+    
+    .p-overlaypanel-enter-done {
+        transform: none;
+    }
+    
+    .p-overlaypanel-exit {
+        opacity: 1;
+    }
+    
+    .p-overlaypanel-exit-active {
+        opacity: 0;
+        transition: opacity .1s linear;
+    }
+    
+    .p-overlaypanel:after, .p-overlaypanel:before {
+        bottom: 100%;
+        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+    }
+    
+    .p-overlaypanel:after {
+        border-width: 8px;
+        margin-left: -8px;
+    }
+    
+    .p-overlaypanel:before {
+        border-width: 10px;
+        margin-left: -10px;
+    }
+    
+    .p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {
+        bottom: auto;
+        top: 100%;
+    }
+    
+    .p-overlaypanel.p-overlaypanel-flipped:after {
+        border-bottom-color: transparent;
+    }
+    
+    .p-overlaypanel.p-overlaypanel-flipped:before {
+        border-bottom-color: transparent
+    }
+}
+`;
+
+export const OverlayPanelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'OverlayPanel',
+        id: null,
+        dismissable: true,
+        showCloseIcon: false,
+        closeIcon: null,
+        style: null,
+        className: null,
+        appendTo: null,
+        breakpoints: null,
+        ariaCloseLabel: null,
+        transitionOptions: null,
+        onShow: null,
+        onHide: null,
+        children: undefined,
+        closeOnEscape: true
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/overlaypanel/overlaypanel.d.ts b/components/lib/overlaypanel/overlaypanel.d.ts
new file mode 100644
index 0000000000..f88567ae01
--- /dev/null
+++ b/components/lib/overlaypanel/overlaypanel.d.ts
@@ -0,0 +1,195 @@
+/**
+ *
+ * OverlayPanel, also known as Popover, is a container component that can overlay other components on page.
+ *
+ * [Live Demo](https://www.primereact.org/overlaypanel)
+ *
+ * @module overlaypanel
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type OverlayPanelPassThroughType<T> = PassThroughType<T, OverlayPanelPassThroughMethodOptions>;
+export declare type OverlayPanelPassThroughTransitionType = ReactCSSTransitionProps | ((options: OverlayPanelPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface OverlayPanelPassThroughMethodOptions {
+    props: OverlayPanelProps;
+    state: OverlayPanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link OverlayPanelProps.pt}
+ */
+export interface OverlayPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: OverlayPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: OverlayPanelPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in OverlayPanel component.
+ */
+export interface OverlayPanelState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
+/**
+ * Custom overlay panel breakpoints
+ */
+interface OverlayPanelBreakpoints {
+    /**
+     *  A key-value pair representing a breakpoint and its associated value.
+     */
+    [key: string]: string;
+}
+
+/**
+ * Defines valid properties in OverlayPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface OverlayPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Enables to hide the overlay when outside is clicked.
+     * @defaultValue true
+     */
+    dismissable?: boolean | undefined;
+    /**
+     * When enabled, displays a close icon at top right corner.
+     * @defaultValue false
+     */
+    showCloseIcon?: boolean | undefined;
+    /**
+     * Icon to display as close icon.
+     */
+    closeIcon?: IconType<OverlayPanelProps> | undefined;
+    /**
+     * Specifies if pressing escape key should hide the preview.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Aria label of the close icon.
+     * @defaultValue close
+     */
+    ariaCloseLabel?: string | undefined;
+    /**
+     * Object literal to define widths per screen size.
+     */
+    breakpoints?: OverlayPanelBreakpoints | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when overlay becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when overlay becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {OverlayPanelPassThroughOptions}
+     */
+    pt?: OverlayPanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - OverlayPanel**
+ *
+ * _OverlayPanel, also known as Popover, is a container component that can overlay other components on page._
+ *
+ * [Live Demo](https://www.primereact.org/overlaypanel/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class OverlayPanel extends React.Component<OverlayPanelProps, any> {
+    /**
+     * Toggles the visiblity of the overlay.
+     * @param {React.SyntheticEvent | undefined | null} event - Browser event.
+     * @param {HTMLElement | EventTarget | undefined | null} target - Browser event.
+     */
+    public toggle(event: React.SyntheticEvent | undefined | null, target?: HTMLElement | EventTarget | undefined | null): void;
+    /**
+     * Shows the overlay.
+     * @param {React.SyntheticEvent | undefined | null} event - Browser event.
+     * @param {HTMLElement | EventTarget | undefined | null} target - Browser event.
+     */
+    public show(event: React.SyntheticEvent | undefined | null, target: HTMLElement | EventTarget | undefined | null): void;
+    /**
+     * Hides the overlay.
+     */
+    public hide(): void;
+    /**
+     * Align the overlay panel to its surroundings.
+     */
+    public align(): void;
+    /**
+     * Checks whether the overlay is currently visible.
+     * @returns {boolean} A boolean value indicating whether the overlay is visible.
+     */
+    public isVisible(): boolean;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/overlaypanel/package.json b/components/lib/overlaypanel/package.json
new file mode 100644
index 0000000000..b60562a3f8
--- /dev/null
+++ b/components/lib/overlaypanel/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./overlaypanel.cjs.js",
+    "module": "./overlaypanel.esm.js",
+    "unpkg": "./overlaypanel.min.js",
+    "types": "./overlaypanel.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/overlayservice/OverlayService.js b/components/lib/overlayservice/OverlayService.js
new file mode 100644
index 0000000000..ef693921ce
--- /dev/null
+++ b/components/lib/overlayservice/OverlayService.js
@@ -0,0 +1,3 @@
+import { EventBus } from '../utils/Utils';
+
+export const OverlayService = EventBus();
diff --git a/components/lib/overlayservice/overlayservice.d.ts b/components/lib/overlayservice/overlayservice.d.ts
new file mode 100644
index 0000000000..a4b04ce0a5
--- /dev/null
+++ b/components/lib/overlayservice/overlayservice.d.ts
@@ -0,0 +1,60 @@
+/**
+ *
+ * OverlayService allows all overlay components to communicate with each other.
+ *
+ * [Live Demo](https://www.primereact.org/dropdown/)
+ *
+ * @module overlayservice
+ *
+ */
+import * as React from 'react';
+
+/**
+ * Overlay service event.
+ */
+export interface OverlayServiceEvent {
+    /**
+     * Original event that triggered the overlay.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Target element that the overlay is bound to.
+     */
+    target: HTMLElement;
+}
+
+/**
+ */
+export interface OverlayServiceOptions {
+    /**
+     * Add event listener for overlay click.
+     * @param {string} action - Custom listener.
+     * @param {*} fn - Custom listener.
+     */
+    on(action: 'overlay-click', fn: any): void;
+    /**
+     * Trigger overlay click event.
+     * @param {string} action - Custom listener.
+     * @param {*} params - Custom listener.
+     */
+    emit(action: 'overlay-click', params?: OverlayServiceEvent): void;
+    /**
+     * Remove event listener for overlay click.
+     * @param {string} action - Custom listener.
+     * @param {*} fn - Custom listener.
+     */
+    off(action: 'overlay-click', fn: any): void;
+}
+
+/**
+ * **PrimeReact - OverlayService**
+ *
+ * _OverlayService allows all overlay components to communicate with each other._
+ *
+ * [Live Demo](https://www.primereact.org/dropdown/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Service
+ */
+export declare const OverlayService: OverlayServiceOptions;
diff --git a/components/lib/overlayservice/package.json b/components/lib/overlayservice/package.json
new file mode 100644
index 0000000000..d32075114f
--- /dev/null
+++ b/components/lib/overlayservice/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./overlayservice.cjs.js",
+    "module": "./overlayservice.esm.js",
+    "unpkg": "./overlayservice.min.js",
+    "types": "./overlayservice.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/paginator/CurrentPageReport.js b/components/lib/paginator/CurrentPageReport.js
new file mode 100644
index 0000000000..8246db06de
--- /dev/null
+++ b/components/lib/paginator/CurrentPageReport.js
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils } from '../utils/Utils';
+import { CurrentPageReportBase } from './PaginatorBase';
+
+export const CurrentPageReport = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = CurrentPageReportBase.getProps(inProps, context);
+
+    const report = {
+        currentPage: props.page + 1,
+        totalPages: props.totalPages,
+        first: Math.min(props.first + 1, props.totalRecords),
+        last: Math.min(props.first + props.rows, props.totalRecords),
+        rows: props.rows,
+        totalRecords: props.totalRecords
+    };
+
+    const text = props.reportTemplate
+        .replace('{currentPage}', report.currentPage)
+        .replace('{totalPages}', report.totalPages)
+        .replace('{first}', report.first)
+        .replace('{last}', report.last)
+        .replace('{rows}', report.rows)
+        .replace('{totalRecords}', report.totalRecords);
+
+    const currentProps = mergeProps(
+        {
+            'aria-live': 'polite',
+            className: 'p-paginator-current'
+        },
+        props.ptm('current', { hostName: props.hostName })
+    );
+
+    const element = <span {...currentProps}>{text}</span>;
+
+    if (props.template) {
+        const defaultOptions = {
+            ...report,
+            ...{
+                ariaLive: 'polite',
+                className: 'p-paginator-current',
+                element,
+                props
+            }
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+CurrentPageReport.displayName = 'CurrentPageReport';
diff --git a/components/lib/paginator/FirstPageLink.js b/components/lib/paginator/FirstPageLink.js
new file mode 100644
index 0000000000..d6f87ae1dc
--- /dev/null
+++ b/components/lib/paginator/FirstPageLink.js
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { ariaLabel, PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleDoubleLeftIcon } from '../icons/angledoubleleft';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { FirstPageLinkBase } from './PaginatorBase';
+
+export const FirstPageLink = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = FirstPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                disabled: props.disabled
+            }
+        });
+    };
+
+    const className = classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': props.disabled });
+    const iconClassName = 'p-paginator-icon';
+    const firstPageIconProps = mergeProps(
+        {
+            className: cx('firstPageIcon')
+        },
+        getPTOptions('firstPageIcon')
+    );
+    const icon = props.firstPageLinkIcon || <AngleDoubleLeftIcon {...firstPageIconProps} />;
+    const firstPageLinkIcon = IconUtils.getJSXIcon(icon, { ...firstPageIconProps }, { props });
+    const firstPageButtonProps = mergeProps(
+        {
+            type: 'button',
+            className: cx('firstPageButton', { disabled: props.disabled }),
+            onClick: props.onClick,
+            disabled: props.disabled,
+            'aria-label': ariaLabel('firstPageLabel')
+        },
+        getPTOptions('firstPageButton')
+    );
+    const element = (
+        <button {...firstPageButtonProps}>
+            {firstPageLinkIcon}
+            <Ripple />
+        </button>
+    );
+
+    if (props.template) {
+        const defaultOptions = {
+            onClick: props.onClick,
+            className,
+            iconClassName,
+            disabled: props.disabled,
+            element,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+FirstPageLink.displayName = 'FirstPageLink';
diff --git a/components/lib/paginator/JumpToPageInput.js b/components/lib/paginator/JumpToPageInput.js
new file mode 100644
index 0000000000..62be57ebf1
--- /dev/null
+++ b/components/lib/paginator/JumpToPageInput.js
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { ariaLabel } from '../api/Locale';
+import { useMergeProps } from '../hooks/Hooks';
+import { InputNumber } from '../inputnumber/InputNumber';
+import { ObjectUtils } from '../utils/Utils';
+import { JumpToPageInputBase } from './PaginatorBase';
+
+export const JumpToPageInput = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = JumpToPageInputBase.getProps(inProps, context);
+    const ariaLabelValue = ariaLabel('jumpToPageInputLabel');
+
+    const onChange = (event) => {
+        if (props.onChange) {
+            props.onChange(props.rows * (event.value - 1), props.rows);
+        }
+    };
+
+    const value = props.totalPages > 0 ? props.page + 1 : 0;
+    const element = (
+        <InputNumber value={value} onChange={onChange} className="p-paginator-page-input" disabled={props.disabled} pt={props.ptm('JTPInput')} unstyled={props.unstyled} __parentMetadata={{ parent: props.metaData }} aria-label={ariaLabelValue} />
+    );
+
+    if (props.template) {
+        const defaultOptions = {
+            value,
+            onChange: onChange,
+            disabled: props.disabled,
+            className: 'p-paginator-page-input',
+            'aria-label': ariaLabelValue,
+            element,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+JumpToPageInput.displayName = 'JumpToPageInput';
diff --git a/components/lib/paginator/LastPageLink.js b/components/lib/paginator/LastPageLink.js
new file mode 100644
index 0000000000..8629a618b6
--- /dev/null
+++ b/components/lib/paginator/LastPageLink.js
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { ariaLabel, PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleDoubleRightIcon } from '../icons/angledoubleright';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { LastPageLinkBase } from './PaginatorBase';
+
+export const LastPageLink = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = LastPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                disabled: props.disabled
+            }
+        });
+    };
+
+    const className = classNames('p-paginator-last p-paginator-element p-link', { 'p-disabled': props.disabled });
+    const iconClassName = 'p-paginator-icon';
+    const lastPageIconProps = mergeProps(
+        {
+            className: cx('lastPageIcon')
+        },
+        getPTOptions('lastPageIcon')
+    );
+    const icon = props.lastPageLinkIcon || <AngleDoubleRightIcon {...lastPageIconProps} />;
+    const lastPageLinkIcon = IconUtils.getJSXIcon(icon, { ...lastPageIconProps }, { props });
+    const lastPageButtonProps = mergeProps(
+        {
+            type: 'button',
+            className: cx('lastPageButton', { disabled: props.disabled }),
+            onClick: props.onClick,
+            disabled: props.disabled,
+            'aria-label': ariaLabel('lastPageLabel')
+        },
+        getPTOptions('lastPageButton')
+    );
+    const element = (
+        <button {...lastPageButtonProps}>
+            {lastPageLinkIcon}
+            <Ripple />
+        </button>
+    );
+
+    if (props.template) {
+        const defaultOptions = {
+            onClick: props.onClick,
+            className,
+            iconClassName,
+            disabled: props.disabled,
+            element,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+LastPageLink.displayName = 'LastPageLink';
diff --git a/components/lib/paginator/NextPageLink.js b/components/lib/paginator/NextPageLink.js
new file mode 100644
index 0000000000..ade841d5e8
--- /dev/null
+++ b/components/lib/paginator/NextPageLink.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { ariaLabel, PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleRightIcon } from '../icons/angleright';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { NextPageLinkBase } from './PaginatorBase';
+
+export const NextPageLink = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = NextPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                disabled: props.disabled
+            }
+        });
+    };
+
+    const className = classNames('p-paginator-next p-paginator-element p-link', { 'p-disabled': props.disabled });
+
+    const iconClassName = 'p-paginator-icon';
+    const nextPageIconProps = mergeProps(
+        {
+            className: cx('nextPageIcon')
+        },
+        getPTOptions('nextPageIcon')
+    );
+    const icon = props.nextPageLinkIcon || <AngleRightIcon {...nextPageIconProps} />;
+    const nextPageLinkIcon = IconUtils.getJSXIcon(icon, { ...nextPageIconProps }, { props });
+
+    const nextPageButtonProps = mergeProps(
+        {
+            type: 'button',
+            className: cx('nextPageButton', { disabled: props.disabled }),
+            onClick: props.onClick,
+            disabled: props.disabled,
+            'aria-label': ariaLabel('nextPageLabel')
+        },
+        getPTOptions('nextPageButton')
+    );
+
+    const element = (
+        <button {...nextPageButtonProps}>
+            {nextPageLinkIcon}
+            <Ripple />
+        </button>
+    );
+
+    if (props.template) {
+        const defaultOptions = {
+            onClick: props.onClick,
+            className,
+            iconClassName,
+            disabled: props.disabled,
+            element,
+            nextPageLinkIcon,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+NextPageLink.displayName = 'NextPageLink';
diff --git a/components/lib/paginator/PageLinks.js b/components/lib/paginator/PageLinks.js
new file mode 100644
index 0000000000..31625b5c41
--- /dev/null
+++ b/components/lib/paginator/PageLinks.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { ariaLabel, PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, ObjectUtils } from '../utils/Utils';
+import { PageLinksBase } from './PaginatorBase';
+
+export const PageLinks = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = PageLinksBase.getProps(inProps, context);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (pageLink, key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                active: pageLink - 1 === props.page
+            }
+        });
+    };
+
+    const onPageLinkClick = (event, pageLink) => {
+        if (props.onClick) {
+            props.onClick({
+                originalEvent: event,
+                value: pageLink
+            });
+        }
+
+        event.preventDefault();
+    };
+
+    let elements;
+
+    if (props.value) {
+        const startPageInView = props.value[0];
+        const endPageInView = props.value[props.value.length - 1];
+
+        elements = props.value.map((pageLink) => {
+            const className = classNames('p-paginator-page p-paginator-element p-link', {
+                'p-paginator-page-start': pageLink === startPageInView,
+                'p-paginator-page-end': pageLink === endPageInView,
+                'p-highlight': pageLink - 1 === props.page
+            });
+
+            const pageButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    onClick: (e) => onPageLinkClick(e, pageLink),
+                    className: cx('pageButton', { pageLink, startPageInView, endPageInView, page: props.page }),
+                    disabled: props.disabled,
+                    'aria-label': ariaLabel('pageLabel', { page: pageLink }),
+                    'aria-current': pageLink - 1 === props.page ? 'true' : undefined
+                },
+                getPTOptions(pageLink, 'pageButton')
+            );
+
+            let element = (
+                <button {...pageButtonProps}>
+                    {pageLink}
+                    <Ripple />
+                </button>
+            );
+
+            if (props.template) {
+                const defaultOptions = {
+                    onClick: (e) => onPageLinkClick(e, pageLink),
+                    className,
+                    view: {
+                        startPage: startPageInView - 1,
+                        endPage: endPageInView - 1
+                    },
+                    page: pageLink - 1,
+                    currentPage: props.page,
+                    totalPages: props.totalPages,
+                    ariaLabel: ariaLabel('pageLabel', { page: pageLink }),
+                    ariaCurrent: pageLink - 1 === props.page ? 'true' : undefined,
+                    element,
+                    props
+                };
+
+                element = ObjectUtils.getJSXElement(props.template, defaultOptions);
+            }
+
+            return <React.Fragment key={pageLink}>{element}</React.Fragment>;
+        });
+    }
+
+    const pagesProps = mergeProps(
+        {
+            className: cx('pages')
+        },
+        ptm('pages', { hostName: props.hostName })
+    );
+
+    return <span {...pagesProps}>{elements}</span>;
+});
+
+PageLinks.displayName = 'PageLinks';
diff --git a/components/lib/paginator/Paginator.js b/components/lib/paginator/Paginator.js
new file mode 100644
index 0000000000..d91b42d4b6
--- /dev/null
+++ b/components/lib/paginator/Paginator.js
@@ -0,0 +1,327 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
+import { ObjectUtils, classNames } from '../utils/Utils';
+import { CurrentPageReport } from './CurrentPageReport';
+import { FirstPageLink } from './FirstPageLink';
+import { JumpToPageInput } from './JumpToPageInput';
+import { LastPageLink } from './LastPageLink';
+import { NextPageLink } from './NextPageLink';
+import { PageLinks } from './PageLinks';
+import { PaginatorBase } from './PaginatorBase';
+import { PrevPageLink } from './PrevPageLink';
+import { RowsPerPageDropdown } from './RowsPerPageDropdown';
+
+export const Paginator = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = PaginatorBase.getProps(inProps, context);
+        const metaData = {
+            props,
+            ...props.__parentMetadata
+        };
+        const { ptm, cx, isUnstyled } = PaginatorBase.setMetaData(metaData);
+
+        useHandleStyle(PaginatorBase.css.styles, isUnstyled, { name: 'paginator' });
+        const elementRef = React.useRef(null);
+        const page = Math.floor(props.first / props.rows);
+        const totalPages = Math.ceil(props.totalRecords / props.rows);
+        const isFirstPage = page === 0;
+        const isLastPage = page === totalPages - 1;
+        const isEmpty = totalPages === 0;
+
+        const calculatePageLinkBoundaries = () => {
+            let numberOfPages = totalPages;
+            let visiblePages = Math.min(props.pageLinkSize, numberOfPages);
+
+            //calculate range, keep current in middle if necessary
+            let start = Math.max(0, Math.ceil(page - visiblePages / 2));
+            let end = Math.min(numberOfPages - 1, start + visiblePages - 1);
+
+            //check when approaching to last page
+            let delta = props.pageLinkSize - (end - start + 1);
+
+            start = Math.max(0, start - delta);
+
+            return [start, end];
+        };
+
+        const updatePageLinks = () => {
+            let pageLinks = [];
+            let boundaries = calculatePageLinkBoundaries();
+            let start = boundaries[0];
+            let end = boundaries[1];
+
+            for (let i = start; i <= end; i++) {
+                pageLinks.push(i + 1);
+            }
+
+            return pageLinks;
+        };
+
+        const changePage = (first, rows) => {
+            let pc = totalPages;
+            let p = Math.floor(first / rows);
+
+            if (p >= 0 && p < pc) {
+                let newPageState = {
+                    first: first,
+                    rows: rows,
+                    page: p,
+                    totalPages: pc
+                };
+
+                if (props.onPageChange) {
+                    props.onPageChange(newPageState);
+                }
+            }
+        };
+
+        const changePageToFirst = (event) => {
+            changePage(0, props.rows);
+            event.preventDefault();
+        };
+
+        const changePageToPrev = (event) => {
+            changePage(props.first - props.rows, props.rows);
+            event.preventDefault();
+        };
+
+        const onPageLinkClick = (event) => {
+            changePage((event.value - 1) * props.rows, props.rows);
+        };
+
+        const changePageToNext = (event) => {
+            changePage(props.first + props.rows, props.rows);
+            event.preventDefault();
+        };
+
+        const changePageToLast = (event) => {
+            changePage((totalPages - 1) * props.rows, props.rows);
+            event.preventDefault();
+        };
+
+        const onRowsChange = (event) => {
+            const rows = event.value;
+
+            changePage(0, rows);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        useUpdateEffect(() => {
+            if (page > 0 && props.first >= props.totalRecords) {
+                changePage((totalPages - 1) * props.rows, props.rows);
+            }
+        }, [props.totalRecords]);
+
+        const createElement = (key, template) => {
+            let element;
+
+            switch (key) {
+                case 'FirstPageLink':
+                    element = (
+                        <FirstPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToFirst}
+                            disabled={isFirstPage || isEmpty}
+                            template={template}
+                            firstPageLinkIcon={props.firstPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'PrevPageLink':
+                    element = (
+                        <PrevPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToPrev}
+                            disabled={isFirstPage || isEmpty}
+                            template={template}
+                            prevPageLinkIcon={props.prevPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'NextPageLink':
+                    element = (
+                        <NextPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToNext}
+                            disabled={isLastPage || isEmpty}
+                            template={template}
+                            nextPageLinkIcon={props.nextPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'LastPageLink':
+                    element = (
+                        <LastPageLink
+                            hostName="Paginator"
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            onClick={changePageToLast}
+                            disabled={isLastPage || isEmpty}
+                            template={template}
+                            lastPageLinkIcon={props.lastPageLinkIcon}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                    break;
+
+                case 'PageLinks':
+                    element = (
+                        <PageLinks hostName="Paginator" key={key} page={page} totalPages={totalPages} totalRecords={props.totalRecords} rows={props.rows} value={updatePageLinks()} onClick={onPageLinkClick} template={template} ptm={ptm} cx={cx} />
+                    );
+                    break;
+
+                case 'RowsPerPageDropdown':
+                    element = (
+                        <RowsPerPageDropdown
+                            hostName="Paginator"
+                            key={key}
+                            value={props.rows}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            options={props.rowsPerPageOptions}
+                            onChange={onRowsChange}
+                            appendTo={props.dropdownAppendTo}
+                            template={template}
+                            disabled={isEmpty}
+                            unstyled={props.unstyled}
+                            ptm={ptm}
+                            cx={cx}
+                            metaData={metaData}
+                        />
+                    );
+                    break;
+
+                case 'CurrentPageReport':
+                    element = (
+                        <CurrentPageReport
+                            hostName="Paginator"
+                            reportTemplate={props.currentPageReportTemplate}
+                            key={key}
+                            page={page}
+                            totalPages={totalPages}
+                            totalRecords={props.totalRecords}
+                            rows={props.rows}
+                            first={props.first}
+                            template={template}
+                            ptm={ptm}
+                        />
+                    );
+                    break;
+                case 'JumpToPageInput':
+                    element = (
+                        <JumpToPageInput hostName="Paginator" key={key} rows={props.rows} page={page} totalPages={totalPages} onChange={changePage} disabled={isEmpty} template={template} ptm={ptm} unstyled={props.unstyled} metaData={metaData} />
+                    );
+                    break;
+
+                default:
+                    element = null;
+                    break;
+            }
+
+            return element;
+        };
+
+        const createElements = () => {
+            const template = props.template;
+
+            if (template) {
+                if (typeof template === 'object') {
+                    return template.layout
+                        ? template.layout.split(' ').map((value) => {
+                              const key = value.trim();
+
+                              return createElement(key, template[key]);
+                          })
+                        : Object.entries(template).map(([key, _template]) => {
+                              return createElement(key, _template);
+                          });
+                }
+
+                return template.split(' ').map((value) => {
+                    return createElement(value.trim());
+                });
+            }
+
+            return null;
+        };
+
+        if (!props.alwaysShow && totalPages <= 1) {
+            return null;
+        }
+
+        const leftContent = ObjectUtils.getJSXElement(props.leftContent, props);
+        const rightContent = ObjectUtils.getJSXElement(props.rightContent, props);
+
+        const elements = createElements();
+        const leftProps = mergeProps(
+            {
+                className: cx('left')
+            },
+            ptm('left')
+        );
+        const leftElement = leftContent && <div {...leftProps}>{leftContent}</div>;
+        const endProps = mergeProps(
+            {
+                className: cx('end')
+            },
+            ptm('end')
+        );
+        const rightElement = rightContent && <div {...endProps}>{rightContent}</div>;
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            PaginatorBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {leftElement}
+                {elements}
+                {rightElement}
+            </div>
+        );
+    })
+);
+
+Paginator.displayName = 'Paginator';
diff --git a/components/lib/paginator/PaginatorBase.js b/components/lib/paginator/PaginatorBase.js
new file mode 100644
index 0000000000..0dcab36baa
--- /dev/null
+++ b/components/lib/paginator/PaginatorBase.js
@@ -0,0 +1,191 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-paginator p-component',
+    left: 'p-paginator-left-content',
+    end: 'p-paginator-right-content',
+    firstPageIcon: 'p-paginator-icon',
+    firstPageButton: ({ disabled }) => classNames('p-paginator-first p-paginator-element p-link', { 'p-disabled': disabled }),
+    prevPageIcon: 'p-paginator-icon',
+    prevPageButton: ({ disabled }) => classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': disabled }),
+    nextPageIcon: 'p-paginator-icon',
+    nextPageButton: ({ disabled }) => classNames('p-paginator-next p-paginator-element p-link', { 'p-disabled': disabled }),
+    lastPageIcon: 'p-paginator-icon',
+    lastPageButton: ({ disabled }) => classNames('p-paginator-last p-paginator-element p-link', { 'p-disabled': disabled }),
+    pageButton: ({ pageLink, startPageInView, endPageInView, page }) =>
+        classNames('p-paginator-page p-paginator-element p-link', {
+            'p-paginator-page-start': pageLink === startPageInView,
+            'p-paginator-page-end': pageLink === endPageInView,
+            'p-highlight': pageLink - 1 === page
+        }),
+    pages: 'p-paginator-pages'
+};
+
+const styles = `
+@layer primereact {
+    .p-paginator {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+    
+    .p-paginator-left-content {
+        margin-right: auto;
+    }
+    
+    .p-paginator-right-content {
+        margin-left: auto;
+    }
+    
+    .p-paginator-page,
+    .p-paginator-next,
+    .p-paginator-last,
+    .p-paginator-first,
+    .p-paginator-prev,
+    .p-paginator-current {
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        user-select: none;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-paginator-element:focus {
+        z-index: 1;
+        position: relative;
+    }
+}
+`;
+
+export const PaginatorBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Paginator',
+        __parentMetadata: null,
+        totalRecords: 0,
+        rows: 0,
+        first: 0,
+        pageLinkSize: 5,
+        rowsPerPageOptions: null,
+        alwaysShow: true,
+        style: null,
+        className: null,
+        template: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+        onPageChange: null,
+        leftContent: null,
+        rightContent: null,
+        dropdownAppendTo: null,
+        currentPageReportTemplate: '({currentPage} of {totalPages})',
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
+
+export const CurrentPageReportBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'CurrentPageReport',
+        pageCount: null,
+        page: null,
+        first: null,
+        rows: null,
+        totalRecords: null,
+        reportTemplate: '({currentPage} of {totalPages})',
+        template: null,
+        children: undefined
+    }
+});
+
+export const FirstPageLinkBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'FirstPageLink',
+        disabled: false,
+        onClick: null,
+        template: null,
+        firstPageLinkIcon: null,
+        children: undefined
+    }
+});
+
+export const JumpToPageInputBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'JumpToPageInput',
+        page: null,
+        rows: null,
+        pageCount: null,
+        disabled: false,
+        template: null,
+        onChange: null,
+        children: undefined,
+        metaData: null,
+        ptm: null
+    }
+});
+
+export const LastPageLinkBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'LastPageLink',
+        disabled: false,
+        onClick: null,
+        template: null,
+        lastPageLinkIcon: null,
+        children: undefined
+    }
+});
+
+export const NextPageLinkBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'NextPageLink',
+        disabled: false,
+        onClick: null,
+        template: null,
+        nextPageLinkIcon: null,
+        children: undefined
+    }
+});
+
+export const PageLinksBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'PageLinks',
+        value: null,
+        page: null,
+        rows: null,
+        pageCount: null,
+        links: null,
+        template: null,
+        children: undefined
+    }
+});
+
+export const PrevPageLinkBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'PrevPageLink',
+        disabled: false,
+        onClick: null,
+        template: null,
+        prevPageLinkIcon: null,
+        children: undefined
+    }
+});
+
+export const RowsPerPageDropdownBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'RowsPerPageDropdown',
+        options: null,
+        value: null,
+        page: null,
+        pageCount: null,
+        totalRecords: 0,
+        appendTo: null,
+        onChange: null,
+        template: null,
+        disabled: false,
+        children: undefined
+    }
+});
diff --git a/components/lib/paginator/PrevPageLink.js b/components/lib/paginator/PrevPageLink.js
new file mode 100644
index 0000000000..251b2bc682
--- /dev/null
+++ b/components/lib/paginator/PrevPageLink.js
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ariaLabel, PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleLeftIcon } from '../icons/angleleft';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+import { PrevPageLinkBase } from './PaginatorBase';
+
+export const PrevPageLink = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = PrevPageLinkBase.getProps(inProps, context);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                disabled: props.disabled
+            }
+        });
+    };
+
+    const className = classNames('p-paginator-prev p-paginator-element p-link', { 'p-disabled': props.disabled });
+    const iconClassName = 'p-paginator-icon';
+    const prevPageIconProps = mergeProps(
+        {
+            className: cx('prevPageIcon')
+        },
+        getPTOptions('prevPageIcon')
+    );
+    const icon = props.prevPageLinkIcon || <AngleLeftIcon {...prevPageIconProps} />;
+    const prevPageLinkIcon = IconUtils.getJSXIcon(icon, { ...prevPageIconProps }, { props });
+
+    const prevPageButtonProps = mergeProps(
+        {
+            type: 'button',
+            className: cx('prevPageButton', { disabled: props.disabled }),
+            onClick: props.onClick,
+            disabled: props.disabled,
+            'aria-label': ariaLabel('prevPageLabel')
+        },
+        getPTOptions('prevPageButton')
+    );
+    const element = (
+        <button {...prevPageButtonProps}>
+            {prevPageLinkIcon}
+            <Ripple />
+        </button>
+    );
+
+    if (props.template) {
+        const defaultOptions = {
+            onClick: props.onClick,
+            className,
+            iconClassName,
+            disabled: props.disabled,
+            element,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+PrevPageLink.displayName = 'PrevPageLink';
diff --git a/components/lib/paginator/RowsPerPageDropdown.js b/components/lib/paginator/RowsPerPageDropdown.js
new file mode 100644
index 0000000000..ecc0c95ef2
--- /dev/null
+++ b/components/lib/paginator/RowsPerPageDropdown.js
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { PrimeReactContext, localeOption } from '../api/Api';
+import { ariaLabel } from '../api/Locale';
+import { Dropdown } from '../dropdown/Dropdown';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils } from '../utils/Utils';
+import { RowsPerPageDropdownBase } from './PaginatorBase';
+
+export const RowsPerPageDropdown = React.memo((inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = RowsPerPageDropdownBase.getProps(inProps, context);
+
+    const hasOptions = props.options && props.options.length > 0;
+    const options = hasOptions ? props.options.map((opt) => ({ label: String(opt), value: opt })) : [];
+    const placeholderValue = localeOption('choose');
+    const ariaLabelValue = ariaLabel('jumpToPageDropdownLabel');
+    const element = hasOptions ? (
+        <>
+            <Dropdown
+                value={props.value}
+                options={options}
+                onChange={props.onChange}
+                appendTo={props.appendTo}
+                disabled={props.disabled}
+                placeholder={placeholderValue}
+                aria-label={ariaLabelValue}
+                pt={props.ptm('RPPDropdown')}
+                unstyled={props.unstyled}
+                __parentMetadata={{ parent: props.metaData }}
+            />
+        </>
+    ) : null;
+
+    if (props.template) {
+        const defaultOptions = {
+            value: props.value,
+            options,
+            onChange: props.onChange,
+            appendTo: props.appendTo,
+            currentPage: props.page,
+            totalPages: props.pageCount,
+            totalRecords: props.totalRecords,
+            disabled: props.disabled,
+            ariaLabel: ariaLabelValue,
+            element,
+            props
+        };
+
+        return ObjectUtils.getJSXElement(props.template, defaultOptions);
+    }
+
+    return element;
+});
+
+RowsPerPageDropdown.displayName = 'RowsPerPageDropdown';
diff --git a/components/lib/paginator/package.json b/components/lib/paginator/package.json
new file mode 100644
index 0000000000..61630fb07d
--- /dev/null
+++ b/components/lib/paginator/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./paginator.cjs.js",
+    "module": "./paginator.esm.js",
+    "unpkg": "./paginator.min.js",
+    "types": "./paginator.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/paginator/paginator.d.ts b/components/lib/paginator/paginator.d.ts
new file mode 100644
index 0000000000..a2c390aae2
--- /dev/null
+++ b/components/lib/paginator/paginator.d.ts
@@ -0,0 +1,746 @@
+/**
+ *
+ * Paginator is a generic widget to display content in paged format.
+ *
+ * [Live Demo](https://www.primereact.org/paginator/)
+ *
+ * @module paginator
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { DropdownPassThroughOptions } from '../dropdown/dropdown';
+import { InputNumberPassThroughOptions } from '../inputnumber/inputnumber';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type PaginatorPassThroughType<T> = PassThroughType<T, PaginatorPassThroughMethodOptions>;
+export declare type PaginatorPassThroughTransitionType = ReactCSSTransitionProps | ((options: PaginatorPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PaginatorPassThroughMethodOptions {
+    props: PaginatorProps;
+    context: PaginatorContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PaginatorProps.pt}
+ */
+export interface PaginatorPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PaginatorPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the left's DOM element.
+     */
+    left?: PaginatorPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the first page button's DOM element.
+     */
+    firstPageButton?: PaginatorPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the first page icon's DOM element.
+     */
+    firstPageIcon?: PaginatorPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the prev page button's DOM element.
+     */
+    prevPageButton?: PaginatorPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the prev page icon's DOM element.
+     */
+    prevPageIcon?: PaginatorPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the next page button's DOM element.
+     */
+    nextPageButton?: PaginatorPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next page icon's DOM element.
+     */
+    nextPageIcon?: PaginatorPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the last page button's DOM element.
+     */
+    lastPageButton?: PaginatorPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the last page icon's DOM element.
+     */
+    lastPageIcon?: PaginatorPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the pages's DOM element.
+     */
+    pages?: PaginatorPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the page button's DOM element.
+     */
+    pageButton?: PaginatorPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the current's DOM element.
+     */
+    current?: PaginatorPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptions}
+     */
+    RPPDropdown?: DropdownPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link InputNumberPassThroughOptions}
+     */
+    JTPInput?: InputNumberPassThroughOptions;
+    /**
+     * Uses to pass attributes to the end's DOM element.
+     */
+    end?: PaginatorPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: PaginatorPassThroughTransitionType;
+}
+
+/**
+ * Defines current options in Paginator component.
+ */
+export interface PaginatorContext {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current disabled state of the button as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom page change event.
+ * @see {@link PaginatorProps.onPageChange}
+ * @event
+ */
+interface PaginatorPageChangeEvent {
+    /**
+     * Index of first record
+     */
+    first: number;
+    /**
+     * Number of rows to display in new page
+     */
+    rows: number;
+    /**
+     * New page number
+     */
+    page: number;
+    /**
+     * Total number of pages
+     */
+    pageCount: number;
+}
+
+/**
+ * Custom paginator first page link options
+ */
+interface PaginatorFirstPageLinkOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.v
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the first page link.
+     */
+    className: string;
+    /**
+     * Icon classname of the first page link.
+     */
+    iconClassName: string;
+    /**
+     * Whether the link is disabled.
+     */
+    disabled: boolean;
+    /**
+     * JSX element to be used as the first page link.
+     */
+    element: JSX.Element;
+    /**
+     * The page number.
+     */
+    page: number;
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The total number of records.
+     */
+    totalRecords: number;
+    /**
+     * The number of rows per page.
+     */
+    rows: number;
+    /**
+     * The props of Paginator component
+     */
+    props: PaginatorProps;
+}
+
+/**
+ * Custom paginator prev page link options
+ */
+interface PaginatorPrevPageLinkOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the prev page link.
+     */
+    className: string;
+    /**
+     * Icon classname of the prev page link.
+     */
+    iconClassName: string;
+    /**
+     * Whether the link is disabled.
+     */
+    disabled: boolean;
+    /**
+     * JSX element to be used as the prev page link.
+     */
+    element: JSX.Element;
+    /**
+     * The page number.
+     */
+    page: number;
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The total number of records.
+     */
+    totalRecords: number;
+    /**
+     * The number of rows per page.
+     */
+    rows: number;
+    /**
+     * The props of Paginator component
+     */
+    props: PaginatorProps;
+}
+
+/**
+ * Custom paginator view options
+ */
+interface PaginatorViewOptions {
+    /**
+     * Starting page number for the paginator view.
+     */
+    startPage: number;
+    /**
+     * Ending page number for the paginator view.
+     */
+    endPage: number;
+}
+
+/**
+ * Custom paginator page links options
+ */
+interface PaginatorPageLinksOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the page links.
+     */
+    className: string;
+    /**
+     * Paginator view options.
+     */
+    view: PaginatorViewOptions;
+    /**
+     * The page number.
+     */
+    page: number;
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The total number of records.
+     */
+    totalRecords: number;
+    /**
+     * The number of rows per page.
+     */
+    rows: number;
+    /**
+     * JSX element to be used as the page links.
+     */
+    element: JSX.Element;
+    /**
+     * The props of Paginator component
+     */
+    props: PaginatorProps;
+}
+
+/**
+ * Custom paginator next page link options
+ */
+interface PaginatorNextPageLinkOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the next page link.
+     */
+    className: string;
+    /**
+     * Icon classname of the next page link.
+     */
+    iconClassName: string;
+    /**
+     * Whether the link is disabled.
+     */
+    disabled: boolean;
+    /**
+     * JSX element to be used as the next page link.
+     */
+    element: JSX.Element;
+    /**
+     * The page number.
+     */
+    page: number;
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The total number of records.
+     */
+    totalRecords: number;
+    /**
+     * The number of rows per page.
+     */
+    rows: number;
+    /**
+     * The props of Paginator component
+     */
+    props: PaginatorProps;
+}
+
+/**
+ * Custom paginator last page link options
+ */
+interface PaginatorLastPageLinkOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the last page link.
+     */
+    className: string;
+    /**
+     * Icon classname of the last page link.
+     */
+    iconClassName: string;
+    /**
+     * Whether the link is disabled.
+     */
+    disabled: boolean;
+    /**
+     * JSX element to be used as the last page link.
+     */
+    element: JSX.Element;
+    /**
+     * The page number.
+     */
+    page: number;
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The total number of records.
+     */
+    totalRecords: number;
+    /**
+     * The number of rows per page.
+     */
+    rows: number;
+    /**
+     * The props of Paginator component
+     */
+    props: PaginatorProps;
+}
+
+/**
+ * Custom paginator change target options
+ */
+interface PaginatorChangeTargetOptions {
+    /**
+     * The name attribute of the target options.
+     */
+    name: string;
+    /**
+     * The id attribute of the target options.
+     */
+    id: string;
+    /**
+     * The value attribute of the target options.
+     */
+    value: string | undefined | null;
+}
+
+/**
+ * Custom change event.
+ * @see {@link PaginatorRowsPerPageDropdownOptions.onChange}
+ * @event
+ */
+interface PaginatorChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value of the element.
+     */
+    value: string | undefined | null;
+    /**
+     * Stops the event from propagating.
+     */
+    stopPropagation(): void;
+    /**
+     * Prevents the default action of the event.
+     */
+    preventDefault(): void;
+    /**
+     * Target options.
+     */
+    target: PaginatorChangeTargetOptions;
+}
+
+/**
+ * Custom rows per page dropdown options
+ */
+interface PaginatorRowsPerPageDropdownOptions {
+    /**
+     * New value of the element.
+     */
+    value: any;
+    /**
+     * The options available in the rows per page dropdown.
+     */
+    options: any[];
+    /**
+     * Paginator options change callback
+     * @param {PaginatorChangeEvent} event - Custom change event.
+     */
+    onChange(event: PaginatorChangeEvent): void;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and "self". The "self" value is used to render a component where it is located.
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The total number of records.
+     */
+    totalRecords: number;
+    /**
+     * JSX element to be used as the rows per page dropdown.
+     */
+    element: JSX.Element;
+    /**
+     * The props of Paginator component.
+     */
+    props: PaginatorProps;
+    /**
+     * Whether the dropdown is disabled.
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom paginator current page report options
+ */
+interface PaginatorCurrentPageReportOptions {
+    /**
+     * The current page number.
+     */
+    currentPage: number;
+    /**
+     * The total number of pages.
+     */
+    totalPages: number;
+    /**
+     * The first number of the current page.
+     */
+    first: number;
+    /**
+     * The last number of the current page.
+     */
+    last: number;
+    /**
+     * The number of rows per page.
+     */
+    rows: number;
+    /**
+     * The total number of records.
+     */
+    totalRecords: number;
+    /**
+     * Style class of the element.
+     */
+    className: string;
+    /**
+     * JSX element to be used as the current page report element.
+     */
+    element: JSX.Element;
+    /**
+     * The props of Paginator component.
+     */
+    props: PaginatorProps;
+}
+
+/**
+ * Custom paginator jump to page input options
+ */
+interface PaginatorJumpToPageInputOptions {
+    /**
+     * The current value.
+     */
+    value: number;
+    /**
+     * Callback to invoke when the input value changes.
+     * @param {number} first - Custom change event.
+     * @param {number} rows - Custom change event.
+     */
+    onChange(first: number, rows: number): void;
+    /**
+     * Whether the input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Style class of the element.
+     */
+    className: string;
+    /**
+     * JSX element to be used as the jump to page input element.
+     */
+    element: JSX.Element;
+    /**
+     * The props of Paginator component.
+     */
+    props: PaginatorProps;
+}
+
+/**
+ * Custom paginator template options
+ */
+interface PaginatorTemplateOptions {
+    /**
+     * The layout of the paginator.
+     */
+    layout?: string;
+    /**
+     * The first page link component.
+     */
+    FirstPageLink?: React.ReactNode | ((options: PaginatorFirstPageLinkOptions) => React.ReactNode);
+    /**
+     * The prev page link component.
+     */
+    PrevPageLink?: React.ReactNode | ((options: PaginatorPrevPageLinkOptions) => React.ReactNode);
+    /**
+     * The page links component.
+     */
+    PageLinks?: React.ReactNode | ((options: PaginatorPageLinksOptions) => React.ReactNode);
+    /**
+     * The next page link component.
+     */
+    NextPageLink?: React.ReactNode | ((options: PaginatorNextPageLinkOptions) => React.ReactNode);
+    /**
+     * The last page link component.
+     */
+    LastPageLink?: React.ReactNode | ((options: PaginatorLastPageLinkOptions) => React.ReactNode);
+    /**
+     * The rows per page dropdown component.
+     */
+    RowsPerPageDropdown?: React.ReactNode | ((options: PaginatorRowsPerPageDropdownOptions) => React.ReactNode);
+    /**
+     * The current page report component.
+     */
+    CurrentPageReport?: React.ReactNode | ((options: PaginatorCurrentPageReportOptions) => React.ReactNode);
+    /**
+     * The jump to page input component.
+     */
+    JumpToPageInput?: React.ReactNode | ((options: PaginatorJumpToPageInputOptions) => React.ReactNode);
+}
+
+/**
+ * Custom template for the paginator.
+ */
+export type PaginatorTemplate = PaginatorTemplateOptions | string | undefined;
+
+/**
+ * Defines valid properties in Paginator component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface PaginatorProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * Number of total records.
+     * @defaultValue 0
+     */
+    totalRecords?: number | undefined;
+    /**
+     * Data count to display per page.
+     * @defaultValue 0
+     */
+    rows?: number | undefined;
+    /**
+     * Zero-relative number of the first row to be displayed.
+     * @defaultValue 0
+     */
+    first?: number | undefined;
+    /**
+     * Number of page links to display.
+     * @defaultValue 5
+     */
+    pageLinkSize?: number | undefined;
+    /**
+     * Array of integer values to display inside rows per page dropdown.
+     */
+    rowsPerPageOptions?: number[] | undefined;
+    /**
+     * Whether to show it even there is only one page.
+     */
+    alwaysShow?: boolean | undefined;
+    /**
+     * Custom template of the paginator.
+     * @defaultValue FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown
+     */
+    template?: PaginatorTemplateOptions | string | undefined;
+    /**
+     * Content to inject into the left side of the paginator.
+     */
+    leftContent?: React.ReactNode | undefined;
+    /**
+     * Content to inject into the right side of the paginator.
+     */
+    rightContent?: React.ReactNode | undefined;
+    /**
+     * Icon of the first page link icon template.
+     */
+    firstPageLinkIcon?: IconType<PaginatorProps> | undefined;
+    /**
+     * Icon of the prev page link icon template.
+     */
+    prevPageLinkIcon?: IconType<PaginatorProps> | undefined;
+    /**
+     * Icon of the next page link icon template.
+     */
+    nextPageLinkIcon?: IconType<PaginatorProps> | undefined;
+    /**
+     * Icon of the last page link icon template.
+     */
+    lastPageLinkIcon?: IconType<PaginatorProps> | undefined;
+    /**
+     * Template of the current page report element. Available placeholders are &#123;currentPage&#125;, &#123;totalPages&#125;, &#123;rows&#125;, &#123;first&#125;, &#123;last&#125; and &#123;totalRecords&#125;
+     * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
+     */
+    currentPageReportTemplate?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    dropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Callback to invoke when page changes, the event object contains information about the new state.
+     * @param {PaginatorPageChangeEvent} event - Custom page change event.
+     */
+    onPageChange?(event: PaginatorPageChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PaginatorPassThroughOptions}
+     */
+    pt?: PaginatorPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Paginator**
+ *
+ * _Paginator is a generic widget to display content in paged format._
+ *
+ * [Live Demo](https://www.primereact.org/paginator/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Paginator extends React.Component<PaginatorProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/panel/Panel.js b/components/lib/panel/Panel.js
new file mode 100644
index 0000000000..3e787a35e9
--- /dev/null
+++ b/components/lib/panel/Panel.js
@@ -0,0 +1,269 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { MinusIcon } from '../icons/minus';
+import { PlusIcon } from '../icons/plus';
+import { Ripple } from '../ripple/Ripple';
+import { IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { PanelBase } from './PanelBase';
+
+export const Panel = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = PanelBase.getProps(inProps, context);
+    const [idState, setIdState] = React.useState(props.id);
+    const [collapsedState, setCollapsedState] = React.useState(props.collapsed);
+    const elementRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const collapsed = props.toggleable ? (props.onToggle ? props.collapsed : collapsedState) : false;
+    const headerId = idState + '_header';
+    const contentId = idState + '_content';
+
+    const { ptm, cx, isUnstyled } = PanelBase.setMetaData({
+        props,
+        state: {
+            id: idState,
+            collapsed: collapsed
+        }
+    });
+
+    useHandleStyle(PanelBase.css.styles, isUnstyled, { name: 'panel' });
+
+    const toggle = (event) => {
+        if (!props.toggleable) {
+            return;
+        }
+
+        collapsed ? expand(event) : collapse(event);
+
+        if (event) {
+            if (props.onToggle) {
+                props.onToggle({
+                    originalEvent: event,
+                    value: !collapsed
+                });
+            }
+
+            event.preventDefault();
+        }
+    };
+
+    const expand = (event) => {
+        if (!props.onToggle) {
+            setCollapsedState(false);
+        }
+
+        props.onExpand && event && props.onExpand(event);
+    };
+
+    const collapse = (event) => {
+        if (!props.onToggle) {
+            setCollapsedState(true);
+        }
+
+        props.onCollapse && event && props.onCollapse(event);
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        toggle,
+        expand,
+        collapse,
+        getElement: () => elementRef.current,
+        getContent: () => contentRef.current
+    }));
+
+    useMountEffect(() => {
+        if (!idState) {
+            setIdState(UniqueComponentId());
+        }
+    });
+
+    const createToggleIcon = () => {
+        if (props.toggleable) {
+            const buttonId = idState + '_label';
+            const togglerProps = mergeProps(
+                {
+                    className: cx('toggler'),
+                    onClick: toggle,
+                    id: buttonId,
+                    'aria-controls': contentId,
+                    'aria-expanded': !collapsed,
+                    type: 'button',
+                    role: 'button',
+                    'aria-label': props.header
+                },
+                ptm('toggler')
+            );
+            const togglerIconProps = mergeProps(ptm('togglericon'));
+
+            const icon = collapsed ? props.expandIcon || <PlusIcon {...togglerIconProps} /> : props.collapseIcon || <MinusIcon {...togglerIconProps} />;
+            const toggleIcon = IconUtils.getJSXIcon(icon, togglerIconProps, { props, collapsed });
+
+            return (
+                <button {...togglerProps}>
+                    {toggleIcon}
+                    <Ripple />
+                </button>
+            );
+        }
+
+        return null;
+    };
+
+    const createHeader = () => {
+        const header = ObjectUtils.getJSXElement(props.header, props);
+        const icons = ObjectUtils.getJSXElement(props.icons, props);
+        const togglerElement = createToggleIcon();
+
+        const titleProps = mergeProps(
+            {
+                id: headerId,
+                className: cx('title')
+            },
+            ptm('title')
+        );
+        const titleElement = <span {...titleProps}>{header}</span>;
+
+        const iconsProps = mergeProps(
+            {
+                className: cx('icons')
+            },
+            ptm('icons')
+        );
+        const iconsElement = (
+            <div {...iconsProps}>
+                {icons}
+                {togglerElement}
+            </div>
+        );
+
+        const headerProps = mergeProps(
+            {
+                className: cx('header')
+            },
+            ptm('header')
+        );
+        const content = (
+            <div {...headerProps}>
+                {titleElement}
+                {iconsElement}
+            </div>
+        );
+
+        if (props.headerTemplate) {
+            const defaultContentOptions = {
+                className: 'p-panel-header',
+                titleClassName: 'p-panel-title',
+                iconsClassName: 'p-panel-icons',
+                togglerClassName: 'p-panel-header-icon p-panel-toggler p-link',
+                onTogglerClick: toggle,
+                titleElement,
+                iconsElement,
+                togglerElement,
+                element: content,
+                id: idState + '_header',
+                props,
+                collapsed
+            };
+
+            return ObjectUtils.getJSXElement(props.headerTemplate, defaultContentOptions);
+        } else if (props.header || props.toggleable) {
+            return content;
+        }
+
+        return null;
+    };
+
+    const createFooter = () => {
+        const footer = ObjectUtils.getJSXElement(props.footer, props);
+
+        const footerProps = mergeProps(
+            {
+                className: cx('footer')
+            },
+            ptm('footer')
+        );
+
+        const content = <div {...footerProps}>{footer}</div>;
+
+        if (props.footerTemplate) {
+            const defaultContentOptions = {
+                className: cx('footer'),
+                element: content,
+                props
+            };
+
+            return ObjectUtils.getJSXElement(props.footerTemplate, defaultContentOptions);
+        } else if (props.footer) {
+            return content;
+        }
+
+        return null;
+    };
+
+    const createContent = () => {
+        const toggleableContentProps = mergeProps(
+            {
+                ref: contentRef,
+                className: cx('toggleableContent'),
+                'aria-hidden': collapsed,
+                role: 'region',
+                id: contentId,
+                'aria-labelledby': headerId
+            },
+            ptm('toggleablecontent')
+        );
+        const contentProps = mergeProps(
+            {
+                className: cx('content')
+            },
+            ptm('content')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                timeout: { enter: 1000, exit: 450 },
+                in: !collapsed,
+                unmountOnExit: true,
+                options: props.transitionOptions
+            },
+            ptm('transition')
+        );
+
+        return (
+            <CSSTransition nodeRef={contentRef} {...transitionProps}>
+                <div {...toggleableContentProps}>
+                    <div {...contentProps}>{props.children}</div>
+                </div>
+            </CSSTransition>
+        );
+    };
+
+    const rootProps = mergeProps(
+        {
+            id: idState,
+            ref: elementRef,
+            style: props.style,
+            className: classNames(props.className, cx('root'))
+        },
+        PanelBase.getOtherProps(props),
+        ptm('root')
+    );
+    const header = createHeader();
+    const content = createContent();
+    const footer = createFooter();
+
+    return (
+        <div {...rootProps}>
+            {header}
+            {content}
+            {footer}
+        </div>
+    );
+});
+
+Panel.displayName = 'Panel';
diff --git a/components/lib/panel/Panel.spec.js b/components/lib/panel/Panel.spec.js
new file mode 100644
index 0000000000..afbd6bcc80
--- /dev/null
+++ b/components/lib/panel/Panel.spec.js
@@ -0,0 +1,102 @@
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { snapshot } from '../../test';
+import { PrimeReactProvider } from '../api/Api';
+import { Panel } from './Panel';
+
+const template = (options) => {
+    const toggleIcon = options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up';
+    const className = `${options.className} justify-content-start`;
+    const titleClassName = `${options.titleClassName} pl-1`;
+
+    return (
+        <div className={className}>
+            <button className={options.togglerClassName} onClick={options.onTogglerClick}>
+                <span className={toggleIcon} />
+            </button>
+            <span className={titleClassName}>Header</span>
+        </div>
+    );
+};
+
+describe('Panel', () => {
+    snapshot(
+        <PrimeReactProvider>
+            <Panel />
+        </PrimeReactProvider>,
+        'default'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Panel id="Panel" header="Simple Panel">
+                Content
+            </Panel>
+        </PrimeReactProvider>,
+        'header'
+    );
+    snapshot(
+        <PrimeReactProvider>
+            <Panel headerTemplate={template} toggleable>
+                Content
+            </Panel>
+        </PrimeReactProvider>,
+        'headerTemplate'
+    );
+    test('when Panel is toggleable it will toggle when clicked', async () => {
+        // Arrange
+        const toggleOn = jest.fn();
+        const { container } = render(
+            <PrimeReactProvider>
+                <Panel header="Toggleable" toggleable onToggle={toggleOn}>
+                    <p>Lorem ipsum dolor sit amet</p>
+                </Panel>
+            </PrimeReactProvider>
+        );
+        const toggler = container.getElementsByClassName('p-panel-toggler')[0];
+
+        expect(container).toMatchSnapshot('toggleable-open');
+
+        // Act
+        await userEvent.click(toggler);
+
+        // Assert
+        expect(toggleOn).toHaveBeenCalledTimes(1);
+        expect(container).toMatchSnapshot('toggleable-closed');
+    });
+    test('when Panel is toggleable it must expand and collapse', async () => {
+        // Arrange
+        const expandOn = jest.fn();
+        const collapseOn = jest.fn();
+        const { container } = render(
+            <PrimeReactProvider>
+                <Panel header="Expand/Collapse" toggleable onExpand={expandOn} onCollapse={collapseOn}>
+                    <p>Lorem ipsum dolor sit amet</p>
+                </Panel>
+            </PrimeReactProvider>
+        );
+        const toggler = container.getElementsByClassName('p-panel-toggler')[0];
+
+        expect(container).toMatchSnapshot('expandable-open');
+
+        // Act
+        userEvent.click(toggler);
+
+        // Assert
+        await waitFor(() => {
+            expect(expandOn).toHaveBeenCalledTimes(0);
+            expect(collapseOn).toHaveBeenCalledTimes(1);
+            expect(container).toMatchSnapshot('expandable-closed');
+        });
+
+        // Act
+        userEvent.click(toggler);
+
+        // Assert
+        await waitFor(() => {
+            expect(expandOn).toHaveBeenCalledTimes(1);
+            expect(collapseOn).toHaveBeenCalledTimes(1);
+            expect(container).toMatchSnapshot('expandable-open');
+        });
+    });
+});
diff --git a/components/lib/panel/PanelBase.js b/components/lib/panel/PanelBase.js
new file mode 100644
index 0000000000..00366f3dab
--- /dev/null
+++ b/components/lib/panel/PanelBase.js
@@ -0,0 +1,65 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+export const PanelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Panel',
+        id: null,
+        header: null,
+        headerTemplate: null,
+        footer: null,
+        footerTemplate: null,
+        toggleable: null,
+        style: null,
+        className: null,
+        collapsed: null,
+        expandIcon: null,
+        collapseIcon: null,
+        icons: null,
+        transitionOptions: null,
+        onExpand: null,
+        onCollapse: null,
+        onToggle: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            root: ({ props }) =>
+                classNames('p-panel p-component', {
+                    'p-panel-toggleable': props.toggleable
+                }),
+            header: 'p-panel-header',
+            title: 'p-panel-title',
+            icons: 'p-panel-icons',
+            toggler: 'p-panel-header-icon p-panel-toggler p-link',
+            togglerIcon: 'p-panel-header-icon p-panel-toggler p-link',
+            toggleableContent: 'p-toggleable-content',
+            content: 'p-panel-content',
+            footer: 'p-panel-footer',
+            transition: 'p-toggleable-content'
+        },
+        styles: `
+        @layer primereact {
+            .p-panel-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+            }
+            
+            .p-panel-title {
+              line-height: 1;
+            }
+            
+            .p-panel-header-icon {
+              display: inline-flex;
+              justify-content: center;
+              align-items: center;
+              cursor: pointer;
+              text-decoration: none;
+              overflow: hidden;
+              position: relative;
+            }
+        }
+        `
+    }
+});
diff --git a/components/lib/panel/__snapshots__/Panel.spec.js.snap b/components/lib/panel/__snapshots__/Panel.spec.js.snap
new file mode 100644
index 0000000000..187328ce5c
--- /dev/null
+++ b/components/lib/panel/__snapshots__/Panel.spec.js.snap
@@ -0,0 +1,463 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Panel default 1`] = `
+<div>
+  <div
+    class="p-panel p-component"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="pr_id_1"
+  >
+    <div
+      aria-hidden="false"
+      aria-labelledby="pr_id_1_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_1_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel header 1`] = `
+<div>
+  <div
+    class="p-panel p-component"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="Panel"
+  >
+    <div
+      class="p-panel-header"
+      data-pc-section="header"
+    >
+      <span
+        class="p-panel-title"
+        data-pc-section="title"
+        id="Panel_header"
+      >
+        Simple Panel
+      </span>
+      <div
+        class="p-panel-icons"
+        data-pc-section="icons"
+      />
+    </div>
+    <div
+      aria-hidden="false"
+      aria-labelledby="Panel_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="Panel_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      >
+        Content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel headerTemplate 1`] = `
+<div>
+  <div
+    class="p-panel p-component p-panel-toggleable"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="pr_id_3"
+  >
+    <div
+      class="p-panel-header justify-content-start"
+    >
+      <button
+        class="p-panel-header-icon p-panel-toggler p-link"
+      >
+        <span
+          class="pi pi-chevron-up"
+        />
+      </button>
+      <span
+        class="p-panel-title pl-1"
+      >
+        Header
+      </span>
+    </div>
+    <div
+      aria-labelledby="pr_id_3_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_3_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      >
+        Content
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel when Panel is toggleable it must expand and collapse: expandable-closed 1`] = `
+<div>
+  <div
+    class="p-panel p-component p-panel-toggleable"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="pr_id_9"
+  >
+    <div
+      class="p-panel-header"
+      data-pc-section="header"
+    >
+      <span
+        class="p-panel-title"
+        data-pc-section="title"
+        id="pr_id_9_header"
+      >
+        Expand/Collapse
+      </span>
+      <div
+        class="p-panel-icons"
+        data-pc-section="icons"
+      >
+        <button
+          aria-controls="pr_id_9_content"
+          aria-expanded="false"
+          aria-label="Expand/Collapse"
+          class="p-panel-header-icon p-panel-toggler p-link"
+          data-pc-section="toggler"
+          id="pr_id_9_label"
+          role="button"
+          type="button"
+        >
+          <svg
+            class="p-icon"
+            data-pc-section="togglericon"
+            fill="none"
+            height="14"
+            viewBox="0 0 14 14"
+            width="14"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.67742 6.32258V0.677419C7.67742 0.497757 7.60605 0.325452 7.47901 0.198411C7.35197 0.0713707 7.17966 0 7 0C6.82034 0 6.64803 0.0713707 6.52099 0.198411C6.39395 0.325452 6.32258 0.497757 6.32258 0.677419V6.32258H0.677419C0.497757 6.32258 0.325452 6.39395 0.198411 6.52099C0.0713707 6.64803 0 6.82034 0 7C0 7.17966 0.0713707 7.35197 0.198411 7.47901C0.325452 7.60605 0.497757 7.67742 0.677419 7.67742H6.32258V13.3226C6.32492 13.5015 6.39704 13.6725 6.52358 13.799C6.65012 13.9255 6.82106 13.9977 7 14C7.17966 14 7.35197 13.9286 7.47901 13.8016C7.60605 13.6745 7.67742 13.5022 7.67742 13.3226V7.67742H13.3226C13.5022 7.67742 13.6745 7.60605 13.8016 7.47901C13.9286 7.35197 14 7.17966 14 7C13.9977 6.82106 13.9255 6.65012 13.799 6.52358C13.6725 6.39704 13.5015 6.32492 13.3226 6.32258H7.67742Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="true"
+      aria-labelledby="pr_id_9_header"
+      class="p-toggleable-content p-toggleable-content-exit p-toggleable-content-exit-active"
+      data-pc-section="toggleablecontent"
+      id="pr_id_9_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel when Panel is toggleable it must expand and collapse: expandable-open 1`] = `
+<div>
+  <div
+    class="p-panel p-component p-panel-toggleable"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="pr_id_9"
+  >
+    <div
+      class="p-panel-header"
+      data-pc-section="header"
+    >
+      <span
+        class="p-panel-title"
+        data-pc-section="title"
+        id="pr_id_9_header"
+      >
+        Expand/Collapse
+      </span>
+      <div
+        class="p-panel-icons"
+        data-pc-section="icons"
+      >
+        <button
+          aria-controls="pr_id_9_content"
+          aria-expanded="true"
+          aria-label="Expand/Collapse"
+          class="p-panel-header-icon p-panel-toggler p-link"
+          data-pc-section="toggler"
+          id="pr_id_9_label"
+          role="button"
+          type="button"
+        >
+          <svg
+            class="p-icon"
+            data-pc-section="togglericon"
+            fill="none"
+            height="14"
+            viewBox="0 0 14 14"
+            width="14"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-labelledby="pr_id_9_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_9_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel when Panel is toggleable it must expand and collapse: expandable-open 2`] = `
+<div>
+  <div
+    class="p-panel p-component p-panel-toggleable"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="pr_id_9"
+  >
+    <div
+      class="p-panel-header"
+      data-pc-section="header"
+    >
+      <span
+        class="p-panel-title"
+        data-pc-section="title"
+        id="pr_id_9_header"
+      >
+        Expand/Collapse
+      </span>
+      <div
+        class="p-panel-icons"
+        data-pc-section="icons"
+      >
+        <button
+          aria-controls="pr_id_9_content"
+          aria-expanded="true"
+          aria-label="Expand/Collapse"
+          class="p-panel-header-icon p-panel-toggler p-link"
+          data-pc-section="toggler"
+          id="pr_id_9_label"
+          role="button"
+          type="button"
+        >
+          <svg
+            class="p-icon"
+            data-pc-section="togglericon"
+            fill="none"
+            height="14"
+            viewBox="0 0 14 14"
+            width="14"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-hidden="false"
+      aria-labelledby="pr_id_9_header"
+      class="p-toggleable-content p-toggleable-content-enter p-toggleable-content-enter-active"
+      data-pc-section="toggleablecontent"
+      id="pr_id_9_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel when Panel is toggleable it will toggle when clicked: toggleable-closed 1`] = `
+<div>
+  <div
+    class="p-panel p-component p-panel-toggleable"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="pr_id_6"
+  >
+    <div
+      class="p-panel-header"
+      data-pc-section="header"
+    >
+      <span
+        class="p-panel-title"
+        data-pc-section="title"
+        id="pr_id_6_header"
+      >
+        Toggleable
+      </span>
+      <div
+        class="p-panel-icons"
+        data-pc-section="icons"
+      >
+        <button
+          aria-controls="pr_id_6_content"
+          aria-expanded="true"
+          aria-label="Toggleable"
+          class="p-panel-header-icon p-panel-toggler p-link"
+          data-pc-section="toggler"
+          id="pr_id_6_label"
+          role="button"
+          type="button"
+        >
+          <svg
+            class="p-icon"
+            data-pc-section="togglericon"
+            fill="none"
+            height="14"
+            viewBox="0 0 14 14"
+            width="14"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-labelledby="pr_id_6_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_6_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Panel when Panel is toggleable it will toggle when clicked: toggleable-open 1`] = `
+<div>
+  <div
+    class="p-panel p-component p-panel-toggleable"
+    data-pc-name="panel"
+    data-pc-section="root"
+    id="pr_id_6"
+  >
+    <div
+      class="p-panel-header"
+      data-pc-section="header"
+    >
+      <span
+        class="p-panel-title"
+        data-pc-section="title"
+        id="pr_id_6_header"
+      >
+        Toggleable
+      </span>
+      <div
+        class="p-panel-icons"
+        data-pc-section="icons"
+      >
+        <button
+          aria-controls="pr_id_6_content"
+          aria-expanded="true"
+          aria-label="Toggleable"
+          class="p-panel-header-icon p-panel-toggler p-link"
+          data-pc-section="toggler"
+          id="pr_id_6_label"
+          role="button"
+          type="button"
+        >
+          <svg
+            class="p-icon"
+            data-pc-section="togglericon"
+            fill="none"
+            height="14"
+            viewBox="0 0 14 14"
+            width="14"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M13.2222 7.77778H0.777778C0.571498 7.77778 0.373667 7.69584 0.227806 7.54998C0.0819442 7.40412 0 7.20629 0 7.00001C0 6.79373 0.0819442 6.5959 0.227806 6.45003C0.373667 6.30417 0.571498 6.22223 0.777778 6.22223H13.2222C13.4285 6.22223 13.6263 6.30417 13.7722 6.45003C13.9181 6.5959 14 6.79373 14 7.00001C14 7.20629 13.9181 7.40412 13.7722 7.54998C13.6263 7.69584 13.4285 7.77778 13.2222 7.77778Z"
+              fill="currentColor"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-labelledby="pr_id_6_header"
+      class="p-toggleable-content"
+      data-pc-section="toggleablecontent"
+      id="pr_id_6_content"
+      role="region"
+    >
+      <div
+        class="p-panel-content"
+        data-pc-section="content"
+      >
+        <p>
+          Lorem ipsum dolor sit amet
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/lib/panel/package.json b/components/lib/panel/package.json
new file mode 100644
index 0000000000..41a9025e64
--- /dev/null
+++ b/components/lib/panel/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./panel.cjs.js",
+    "module": "./panel.esm.js",
+    "unpkg": "./panel.min.js",
+    "types": "./panel.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/panel/panel.d.ts b/components/lib/panel/panel.d.ts
new file mode 100644
index 0000000000..acaafb239f
--- /dev/null
+++ b/components/lib/panel/panel.d.ts
@@ -0,0 +1,307 @@
+/**
+ *
+ * Panel is a grouping component providing with content toggle feature.
+ *
+ * [Live Demo](https://www.primereact.org/panel/)
+ *
+ * @module panel
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type PanelPassThroughType<T> = PassThroughType<T, PanelPassThroughMethodOptions>;
+export declare type PanelPassThroughTransitionType = ReactCSSTransitionProps | ((options: PanelPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom panel header template options.
+ */
+interface PanelHeaderTemplateOptions {
+    /**
+     * Style class of the panel.
+     */
+    className: string;
+    /**
+     * Style class of the panel title.
+     */
+    titleClassName: string;
+    /**
+     * Style class of the panel icons.
+     */
+    iconsClassName: string;
+    /**
+     * Style class of the panel toggler.
+     */
+    togglerClassName: string;
+    /**
+     * Style class of the panel toggler icon.
+     */
+    togglerIconClassName: string;
+    /**
+     * Callback to invoke when the toggler button is clicked.
+     * @param {React.MouseEvent<HTMLElement>} event Browser event.
+     */
+    onTogglerClick(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * The JSX element that represents the title of the panel.
+     */
+    titleElement: JSX.Element;
+    /**
+     * The JSX element that represents the icons of the panel.
+     */
+    iconsElement: JSX.Element;
+    /**
+     * The JSX element that represents the toggler of the panel.
+     */
+    togglerElement: JSX.Element;
+    /**
+     * The JSX element that represents the panel.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the Panel component.
+     */
+    props: PanelProps;
+    /**
+     * Whether the panel header is collapsed or not.
+     */
+    collapsed: boolean;
+}
+/**
+ * Custom panel footer template options.
+ */
+interface PanelFooterTemplateOptions {
+    /**
+     * Style class of the panel.
+     */
+    className: string;
+    /**
+     * The JSX element that represents the panel.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the Panel component.
+     */
+    props: PanelProps;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link PanelProps.onToggle}
+ * @event
+ */
+interface PanelToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Collapsed state as a boolean.
+     */
+    value: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelPassThroughMethodOptions {
+    props: PanelProps;
+    state: PanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelProps.pt}
+ */
+export interface PanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: PanelPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the icons' DOM element.
+     */
+    icons?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: PanelPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the togglericon's DOM element.
+     */
+    togglerIcon?: PanelPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleableContent?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: PanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: PanelPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface PanelState {
+    /**
+     * Current id state.
+     */
+    id: string;
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    collapsed: boolean;
+}
+
+/**
+ * Defines valid properties in Panel component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface PanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Custom header template of the panel.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Custom footer template of the panel.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * Header template of the panel to customize more.
+     * @param {PanelHeaderTemplateOptions} options - Options to customize the header template.
+     */
+    headerTemplate?: React.ReactNode | ((options: PanelHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Footer template of the panel to customize more.
+     * @param {PanelFooterTemplateOptions} options - Options to customize the footer template.
+     */
+    footerTemplate?: React.ReactNode | ((options: PanelFooterTemplateOptions) => React.ReactNode);
+    /**
+     * Defines if content of panel can be expanded and collapsed.
+     * @defaultValue false
+     */
+    toggleable?: boolean | undefined;
+    /**
+     * Defines the initial state of panel content, supports one or two-way binding as well.
+     * @defaultValue false
+     */
+    collapsed?: boolean | undefined;
+    /**
+     * Icon of a expanded tab.
+     */
+    expandIcon?: IconType<PanelProps> | undefined;
+    /**
+     * Icon of a collapsed tab.
+     */
+    collapseIcon?: IconType<PanelProps> | undefined;
+    /**
+     * Custom icons template for the header.
+     */
+    icons?: React.ReactNode | ((props: PanelProps) => React.ReactNode);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onExpand?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onCollapse?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @param {PanelToggleEvent} event - Custom toggle event.
+     */
+    onToggle?(event: PanelToggleEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelPassThroughOptions}
+     */
+    pt?: PanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Panel**
+ *
+ * _Panel is a grouping component providing with content toggle feature._
+ *
+ * [Live Demo](https://www.primereact.org/panel/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Panel extends React.Component<PanelProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get content of the panel.
+     * @return {HTMLDivElement | null} Content element
+     */
+    public getContent(): HTMLDivElement | null;
+    /**
+     * Toggle the panel if toggleable.
+     * @param {React.SyntheticEvent | undefined} event - Browser event.
+     */
+    public toggle(event: React.SyntheticEvent | undefined): void;
+    /**
+     * Expand the panel if toggleable.
+     * @param {React.SyntheticEvent | undefined} event - Browser event.
+     */
+    public expand(event: React.SyntheticEvent | undefined): void;
+    /**
+     * Collapse the panel if toggleable.
+     * @param {React.SyntheticEvent | undefined} event - Browser event.
+     */
+    public collapse(event: React.SyntheticEvent | undefined): void;
+}
diff --git a/components/lib/panelmenu/PanelMenu.js b/components/lib/panelmenu/PanelMenu.js
new file mode 100644
index 0000000000..0a26b933cb
--- /dev/null
+++ b/components/lib/panelmenu/PanelMenu.js
@@ -0,0 +1,448 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { PanelMenuBase } from './PanelMenuBase';
+import { PanelMenuList } from './PanelMenuList';
+
+export const PanelMenu = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = PanelMenuBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const [activeItemState, setActiveItemState] = React.useState(null);
+        const [activeItemsState, setActiveItemsState] = React.useState([]);
+        const [animationDisabled, setAnimationDisabled] = React.useState(false);
+        const elementRef = React.useRef(null);
+
+        const { ptm, cx, isUnstyled } = PanelMenuBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                activeItem: activeItemState
+            }
+        });
+
+        useHandleStyle(PanelMenuBase.css.styles, isUnstyled, { name: 'panelmenu' });
+
+        const onItemClick = (event, item) => {
+            if (item.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (item.items) {
+                changeActiveItem(event, item);
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const getItemProp = (item, name) => {
+            return item ? ObjectUtils.getItemValue(item[name]) : undefined;
+        };
+
+        const isItemActive = (item) => {
+            if (props.expandedKeys) {
+                return props.expandedKeys[getItemProp(item, 'key')];
+            }
+
+            return props.multiple ? activeItemsState.some((subItem) => ObjectUtils.equals(item, subItem)) : ObjectUtils.equals(item, activeItemState);
+        };
+
+        const isItemVisible = (item) => {
+            return getItemProp(item, 'visible') !== false;
+        };
+
+        const isItemDisabled = (item) => {
+            return getItemProp(item, 'disabled');
+        };
+
+        const isItemFocused = (item) => {
+            return ObjectUtils.equals(item, activeItemState);
+        };
+
+        const generatePanelId = (index) => {
+            return `${idState}_${index}`;
+        };
+
+        const generateHeaderId = (itemId, index) => {
+            return `${itemId || generatePanelId(index)}_header`;
+        };
+
+        const generateContentId = (itemId, index) => {
+            return `${itemId || generatePanelId(index)}_content`;
+        };
+
+        const onHeaderKeyDown = (event, item) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    onHeaderArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onHeaderArrowUpKey(event);
+                    break;
+
+                case 'Home':
+                    onHeaderHomeKey(event);
+                    break;
+
+                case 'End':
+                    onHeaderEndKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onHeaderEnterKey(event, item);
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onHeaderArrowDownKey = (event) => {
+            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="menu"]') : null;
+
+            rootList ? DomHandler.focus(rootList) : updateFocusedHeader({ originalEvent: event, focusOnNext: true });
+            event.preventDefault();
+        };
+
+        const onHeaderArrowUpKey = (event) => {
+            const prevHeader = findPrevHeader(event.currentTarget.parentElement) || findLastHeader();
+            const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="menu"]') : null;
+
+            rootList ? DomHandler.focus(rootList) : updateFocusedHeader({ originalEvent: event, focusOnNext: false });
+            event.preventDefault();
+        };
+
+        const onHeaderHomeKey = (event) => {
+            changeFocusedHeader(event, findFirstHeader());
+            event.preventDefault();
+        };
+
+        const onHeaderEndKey = (event) => {
+            changeFocusedHeader(event, findLastHeader());
+            event.preventDefault();
+        };
+
+        const onHeaderEnterKey = (event, item) => {
+            const headerAction = DomHandler.findSingle(event.currentTarget, '[data-pc-section="headeraction"]');
+
+            headerAction ? headerAction.click() : onItemClick(event, item);
+            event.preventDefault();
+        };
+
+        const findNextHeader = (panelElement, selfCheck = false) => {
+            const nextPanelElement = selfCheck ? panelElement : panelElement.nextElementSibling;
+            const headerElement = DomHandler.findSingle(nextPanelElement, '[data-pc-section="header"]');
+
+            return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findNextHeader(headerElement.parentElement) : headerElement) : null;
+        };
+
+        const findPrevHeader = (panelElement, selfCheck = false) => {
+            const prevPanelElement = selfCheck ? panelElement : panelElement.previousElementSibling;
+            const headerElement = DomHandler.findSingle(prevPanelElement, '[data-pc-section="header"]');
+
+            return headerElement ? (DomHandler.getAttribute(headerElement, 'data-p-disabled') ? findPrevHeader(headerElement.parentElement) : headerElement) : null;
+        };
+
+        const findFirstHeader = () => {
+            return findNextHeader(elementRef.current.firstElementChild, true);
+        };
+
+        const findLastHeader = () => {
+            return findPrevHeader(elementRef.current.lastElementChild, true);
+        };
+
+        const updateFocusedHeader = (event) => {
+            const { originalEvent, focusOnNext, selfCheck } = event;
+            const panelElement = originalEvent.currentTarget.closest('[data-pc-section="panel"]');
+            const header = selfCheck ? DomHandler.findSingle(panelElement, '[data-pc-section="header"]') : focusOnNext ? findNextHeader(panelElement) : findPrevHeader(panelElement);
+
+            header ? changeFocusedHeader(originalEvent, header) : focusOnNext ? onHeaderHomeKey(originalEvent) : onHeaderEndKey(originalEvent);
+        };
+
+        const changeActiveItem = (event, item) => {
+            if (!isItemDisabled(item)) {
+                const active = isItemActive(item);
+                const isExpanded = !active;
+                const _activeItemState = activeItemState && ObjectUtils.equals(item, activeItemState) ? null : item;
+
+                setActiveItemState(_activeItemState);
+
+                if (props.multiple) {
+                    let activeItems = activeItemsState;
+
+                    if (
+                        activeItemsState.some((subItem) => {
+                            return ObjectUtils.equals(item, subItem);
+                        })
+                    ) {
+                        activeItems = activeItemsState.filter((subItem) => !ObjectUtils.equals(item, subItem));
+                    } else {
+                        activeItems.push(item);
+                    }
+
+                    setActiveItemsState(activeItems);
+                }
+
+                changeExpandedKeys({ item, expanded: isExpanded });
+                isExpanded && event ? props.onOpen && props.onOpen({ originalEvent: event, item }) : props.onClose && props.onClose({ originalEvent: event, item });
+            }
+        };
+
+        const changeExpandedKeys = ({ item, expanded = false }) => {
+            if (props.expandedKeys) {
+                let _keys = { ...props.expandedKeys };
+
+                if (expanded) {
+                    _keys[item.key] = true;
+                } else {
+                    delete _keys[item.key];
+                }
+
+                props.onExpandedKeysChange && props.onExpandedKeysChange(_keys);
+            }
+        };
+
+        const changeFocusedHeader = (event, element) => {
+            element && DomHandler.focus(element);
+        };
+
+        const getPTOptions = (item, key, index) => {
+            return ptm(key, {
+                context: {
+                    active: isItemActive(item),
+                    focused: isItemFocused(item),
+                    disabled: isItemDisabled(item),
+                    index
+                }
+            });
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            !idState && setIdState(UniqueComponentId());
+        });
+
+        React.useEffect(() => {
+            setAnimationDisabled(true);
+
+            props.model &&
+                props.model.forEach((item) => {
+                    if (item.expanded) {
+                        changeActiveItem(null, item);
+                    }
+                });
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [props.model]);
+
+        const onEnter = () => {
+            setAnimationDisabled(false);
+        };
+
+        const createPanel = (item, index) => {
+            if (!isItemVisible(item)) {
+                return null;
+            }
+
+            const key = item.id || idState + '_' + index;
+            const active = isItemActive(item);
+
+            const iconClassName = classNames('p-menuitem-icon', item.icon);
+            const headerIconProps = mergeProps(
+                {
+                    className: cx('headerIcon', { item })
+                },
+                getPTOptions(item, 'headerIcon', index)
+            );
+
+            const icon = IconUtils.getJSXIcon(item.icon, { ...headerIconProps }, { props });
+
+            const submenuIconClassName = 'p-panelmenu-icon';
+            const headerSubmenuIconProps = mergeProps(
+                {
+                    className: cx('headerSubmenuIcon')
+                },
+                getPTOptions(item, 'headerSubmenuIcon', index)
+            );
+
+            const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.collapseIcon || <ChevronDownIcon {...headerSubmenuIconProps} /> : props.expandIcon || <ChevronRightIcon {...headerSubmenuIconProps} />);
+
+            const headerLabelProps = mergeProps(
+                {
+                    className: cx('headerLabel')
+                },
+                getPTOptions(item, 'headerLabel', index)
+            );
+            const label = item.label && <span {...headerLabelProps}>{item.label}</span>;
+            const menuContentRef = React.createRef();
+            const headerActionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    tabIndex: '-1',
+                    className: cx('headerAction')
+                },
+                getPTOptions(item, 'headerAction', index)
+            );
+
+            let content = (
+                <a {...headerActionProps}>
+                    {submenuIcon}
+                    {icon}
+                    {label}
+                </a>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    onClick: (event) => onItemClick(event, item),
+                    className: 'p-panelmenu-header-link',
+                    labelClassName: 'p-menuitem-text',
+                    submenuIconClassName,
+                    iconClassName,
+                    element: content,
+                    props,
+                    leaf: !item.items,
+                    active
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const panelProps = mergeProps(
+                {
+                    id: item?.id || generatePanelId(index),
+                    className: cx('panel', { item }),
+                    style: item.style
+                },
+                getPTOptions(item, 'panel', index)
+            );
+
+            const headerProps = mergeProps(
+                {
+                    id: generateHeaderId(item?.id, index),
+                    className: cx('header', { active, item }),
+                    'aria-label': item.label,
+                    'aria-expanded': active,
+                    'aria-disabled': item.disabled,
+                    'aria-controls': generateContentId(item?.id, index),
+                    tabIndex: item.disabled ? null : '0',
+                    onClick: (event) => onItemClick(event, item),
+                    onKeyDown: (event) => onHeaderKeyDown(event, item),
+                    'data-p-disabled': item.disabled,
+                    'data-p-highlight': active,
+                    role: 'button',
+                    style: item.style
+                },
+                getPTOptions(item, 'header', index)
+            );
+
+            const headerContentProps = mergeProps(
+                {
+                    className: cx('headerContent')
+                },
+                getPTOptions(item, 'headerContent', index)
+            );
+
+            const menuContentProps = mergeProps(
+                {
+                    className: cx('menuContent')
+                },
+                getPTOptions(item, 'menuContent', index)
+            );
+
+            const toggleableContentProps = mergeProps(
+                {
+                    className: cx('toggleableContent', { active }),
+                    role: 'region',
+                    'aria-labelledby': generateHeaderId(item?.id, index)
+                },
+                getPTOptions(item, 'toggleableContent', index)
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    timeout: { enter: 1000, exit: 450 },
+                    onEnter: onEnter,
+                    in: active,
+                    unmountOnExit: true,
+                    options: props.transitionOptions
+                },
+                getPTOptions(item, 'transition', index)
+            );
+
+            return (
+                <div {...panelProps} key={key}>
+                    <div {...headerProps}>
+                        <div {...headerContentProps}>{content}</div>
+                    </div>
+                    <CSSTransition nodeRef={menuContentRef} {...transitionProps}>
+                        <div id={generateContentId(item?.id, index)} ref={menuContentRef} {...toggleableContentProps}>
+                            <div {...menuContentProps}>
+                                <PanelMenuList
+                                    panelId={item?.id || generatePanelId(index)}
+                                    menuProps={props}
+                                    onToggle={changeExpandedKeys}
+                                    onHeaderFocus={updateFocusedHeader}
+                                    level={0}
+                                    model={item.items}
+                                    expandedKeys={props.expandedKeys}
+                                    className="p-panelmenu-root-submenu"
+                                    submenuIcon={props.submenuIcon}
+                                    ptm={ptm}
+                                    cx={cx}
+                                />
+                            </div>
+                        </div>
+                    </CSSTransition>
+                </div>
+            );
+        };
+
+        const createPanels = () => {
+            return props.model ? props.model.map(createPanel) : null;
+        };
+
+        const panels = createPanels();
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                id: props.id,
+                style: props.style
+            },
+            PanelMenuBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <div {...rootProps}>{panels}</div>;
+    })
+);
+
+PanelMenu.displayName = 'PanelMenu';
diff --git a/components/lib/panelmenu/PanelMenuBase.js b/components/lib/panelmenu/PanelMenuBase.js
new file mode 100644
index 0000000000..feb5ca99b7
--- /dev/null
+++ b/components/lib/panelmenu/PanelMenuBase.js
@@ -0,0 +1,93 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    headerIcon: ({ item }) => classNames('p-menuitem-icon', item.icon),
+    headerSubmenuIcon: 'p-submenu-icon',
+    headerLabel: 'p-menuitem-text',
+    headerAction: 'p-panelmenu-header-link',
+    panel: ({ item }) => classNames('p-panelmenu-panel', item.className),
+    header: ({ active, item }) => classNames('p-component p-panelmenu-header', { 'p-highlight': active && !!item.items, 'p-disabled': item.disabled }),
+    headerContent: 'p-panelmenu-header-content',
+    menuContent: 'p-panelmenu-content',
+    root: 'p-panelmenu p-component',
+    separator: 'p-menuitem-separator',
+    toggleableContent: ({ active }) =>
+        classNames('p-toggleable-content', {
+            'p-toggleable-content-collapsed': !active
+        }),
+    icon: ({ item }) => classNames('p-menuitem-icon', item.icon),
+    label: 'p-menuitem-text',
+    submenuicon: 'p-submenu-icon',
+    content: 'p-menuitem-content',
+    action: ({ item }) => classNames('p-menuitem-link', { 'p-disabled': item.disabled }),
+    menuitem: ({ item, focused, disabled }) =>
+        classNames('p-menuitem', item.className, {
+            'p-focus': focused,
+            'p-disabled': disabled
+        }),
+    menu: 'p-panelmenu-root-list',
+    submenu: 'p-submenu-list',
+    transition: 'p-toggleable-content'
+};
+
+const styles = `
+@layer primereact {
+    .p-panelmenu .p-panelmenu-header-link {
+        display: flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        position: relative;
+        text-decoration: none;
+    }
+
+    .p-panelmenu .p-panelmenu-header-link:focus {
+        z-index: 1;
+    }
+
+    .p-panelmenu .p-submenu-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-panelmenu .p-menuitem-link {
+        display: flex;
+        align-items: center;
+        user-select: none;
+        cursor: pointer;
+        text-decoration: none;
+        text-decoration: none;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .p-panelmenu .p-menuitem-text {
+        line-height: 1;
+    }
+}
+`;
+
+export const PanelMenuBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'PanelMenu',
+        id: null,
+        model: null,
+        style: null,
+        expandedKeys: null,
+        className: null,
+        onExpandedKeysChange: null,
+        onOpen: null,
+        onClose: null,
+        multiple: false,
+        transitionOptions: null,
+        expandIcon: null,
+        collapseIcon: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/panelmenu/PanelMenuList.js b/components/lib/panelmenu/PanelMenuList.js
new file mode 100644
index 0000000000..ab3c7c4edf
--- /dev/null
+++ b/components/lib/panelmenu/PanelMenuList.js
@@ -0,0 +1,448 @@
+import * as React from 'react';
+import { useUpdateEffect } from '../hooks/useUpdateEffect';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { PanelMenuSub } from './PanelMenuSub';
+``;
+
+export const PanelMenuList = React.memo((props) => {
+    const { ptm, cx } = props;
+
+    const [focused, setFocused] = React.useState(false);
+    const [focusedItem, setFocusedItem] = React.useState(null);
+    const [focusedItemId, setFocusedItemId] = React.useState(null);
+    const [activeItemPath, setActiveItemPath] = React.useState([]);
+    const [processedItems, setProcessedItems] = React.useState(null);
+    const [visibleItems, setVisibleItems] = React.useState([]);
+
+    const searchValue = React.useRef(null);
+    const searchTimeout = React.useRef(null);
+    const elementRef = React.useRef(null);
+
+    const getItemProp = (processedItem, name) => {
+        return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+    };
+
+    const getItemLabel = (processedItem) => {
+        return getItemProp(processedItem, 'label');
+    };
+
+    const isItemVisible = (processedItem) => {
+        return getItemProp(processedItem, 'visible') !== false;
+    };
+
+    const isItemDisabled = (processedItem) => {
+        return getItemProp(processedItem, 'disabled');
+    };
+
+    const isItemActive = (processedItem) => {
+        return activeItemPath && activeItemPath.some((path) => path.key === processedItem.parentKey);
+    };
+
+    const isItemGroup = (processedItem) => {
+        return ObjectUtils.isNotEmpty(processedItem.items);
+    };
+
+    const getListElement = () => {
+        return elementRef.current && elementRef.current.getElement();
+    };
+
+    const onFocus = (event) => {
+        setFocused(true);
+
+        if (ObjectUtils.isEmpty(focusedItem)) {
+            setTimeout(() => {
+                const firstItem = findFirstItem();
+
+                if (firstItem) {
+                    setFocusedItem(firstItem);
+                }
+            }, 0);
+        }
+    };
+
+    const onBlur = () => {
+        setFocused(false);
+        setFocusedItem(null);
+        searchValue.current = '';
+    };
+
+    const onKeyDown = (event) => {
+        const metaKey = event.metaKey || event.ctrlKey;
+
+        switch (event.code) {
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Space':
+                onSpaceKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+                break;
+
+            case 'Escape':
+            case 'Tab':
+            case 'PageDown':
+            case 'PageUp':
+            case 'Backspace':
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
+                break;
+
+            default:
+                if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    searchItems(event, event.key);
+                }
+
+                break;
+        }
+    };
+
+    const onArrowDownKey = (event) => {
+        const processedItem = ObjectUtils.isNotEmpty(focusedItem) ? findNextItem(focusedItem) : findFirstItem();
+
+        changeFocusedItem({ originalEvent: event, processedItem, focusOnNext: true });
+        event.preventDefault();
+    };
+
+    const onArrowUpKey = (event) => {
+        const processedItem = ObjectUtils.isNotEmpty(focusedItem) ? findPrevItem(focusedItem) : findLastItem();
+
+        changeFocusedItem({ originalEvent: event, processedItem, selfCheck: true });
+        event.preventDefault();
+    };
+
+    const onArrowLeftKey = (event) => {
+        if (ObjectUtils.isNotEmpty(focusedItem)) {
+            const matched = activeItemPath.some((p) => p.key === focusedItem.key);
+
+            if (matched) {
+                setActiveItemPath(activeItemPath.filter((p) => p.key !== focusedItem.key));
+            } else {
+                setFocusedItem(ObjectUtils.isNotEmpty(focusedItem.parent) ? focusedItem.parent : focusedItem);
+            }
+
+            event.preventDefault();
+        }
+    };
+
+    const onArrowRightKey = (event) => {
+        if (ObjectUtils.isNotEmpty(focusedItem)) {
+            const grouped = isItemGroup(focusedItem);
+
+            if (grouped) {
+                const matched = activeItemPath.some((p) => p.key === focusedItem.key);
+
+                if (matched) {
+                    onArrowDownKey(event);
+                } else {
+                    const _activeItemPath = activeItemPath.filter((p) => p.parentKey !== focusedItem.parentKey);
+
+                    _activeItemPath.push(focusedItem);
+                    setActiveItemPath(_activeItemPath);
+                }
+            }
+
+            event.preventDefault();
+        }
+    };
+
+    const onHomeKey = (event) => {
+        changeFocusedItem({ originalEvent: event, processedItem: findFirstItem(), allowHeaderFocus: false });
+        event.preventDefault();
+    };
+
+    const onEndKey = (event) => {
+        changeFocusedItem({ originalEvent: event, processedItem: findLastItem(), focusOnNext: true, allowHeaderFocus: false });
+        event.preventDefault();
+    };
+
+    const onEnterKey = (event) => {
+        if (ObjectUtils.isNotEmpty(focusedItem)) {
+            const element = DomHandler.findSingle(getListElement(), `li[id="${`${focusedItemId}`}"]`);
+            const anchorElement = element && (DomHandler.findSingle(element, '[data-pc-section="action"]') || DomHandler.findSingle(element, 'a,button'));
+
+            anchorElement ? anchorElement.click() : element && element.click();
+        }
+
+        event.preventDefault();
+    };
+
+    const onSpaceKey = (event) => {
+        onEnterKey(event);
+    };
+
+    const onItemToggle = (event) => {
+        const { processedItem, expanded } = event;
+
+        if (props.expandedKeys) {
+            props.onToggle && props.onToggle({ item: processedItem.item, expanded });
+        } else {
+            const _activeItemPath = activeItemPath.filter((p) => p.parentKey !== processedItem.parentKey);
+
+            expanded && _activeItemPath.push(processedItem);
+            setActiveItemPath(_activeItemPath);
+        }
+
+        if (processedItem.item) {
+            processedItem.item = {
+                ...processedItem.item,
+                expanded
+            };
+        }
+
+        DomHandler.focus(getListElement());
+        setFocusedItem(processedItem);
+    };
+
+    const isElementInPanel = (event, element) => {
+        const panel = event.currentTarget.closest('[data-pc-section="panel"]');
+
+        return panel && panel.contains(element);
+    };
+
+    const isItemMatched = (processedItem) => {
+        return isValidItem(processedItem) && getItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
+    };
+
+    const isVisibleItem = (processedItem) => {
+        return !!processedItem && (processedItem.level === 0 || isItemActive(processedItem)) && isItemVisible(processedItem);
+    };
+
+    const isValidItem = (processedItem) => {
+        return !!processedItem && !isItemDisabled(processedItem) && !getItemProp(processedItem, 'separator');
+    };
+
+    const findFirstItem = () => {
+        return visibleItems.find((processedItem) => isValidItem(processedItem));
+    };
+
+    const findLastItem = () => {
+        return ObjectUtils.findLast(visibleItems, (processedItem) => isValidItem(processedItem));
+    };
+
+    const findNextItem = (processedItem) => {
+        const index = visibleItems.findIndex((item) => item.key === processedItem.key);
+        const matchedItem = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).find((pItem) => isValidItem(pItem)) : undefined;
+
+        return matchedItem || processedItem;
+    };
+
+    const findPrevItem = (processedItem) => {
+        const index = visibleItems.findIndex((item) => item.key === processedItem.key);
+        const matchedItem = index > 0 ? ObjectUtils.findLast(visibleItems.slice(0, index), (pItem) => isValidItem(pItem)) : undefined;
+
+        return matchedItem || processedItem;
+    };
+
+    const searchItems = (event, char) => {
+        searchValue.current = (searchValue.current || '') + char;
+
+        let matchedItem = null;
+        let matched = false;
+
+        if (ObjectUtils.isNotEmpty(focusedItem)) {
+            const focusedItemIndex = visibleItems.findIndex((processedItem) => processedItem.key === focusedItem.key);
+
+            matchedItem = visibleItems.slice(focusedItemIndex).find((processedItem) => isItemMatched(processedItem));
+            matchedItem = ObjectUtils.isEmpty(matchedItem) ? visibleItems.slice(0, focusedItemIndex).find((processedItem) => isItemMatched(processedItem)) : matchedItem;
+        } else {
+            matchedItem = visibleItems.find((processedItem) => isItemMatched(processedItem));
+        }
+
+        if (ObjectUtils.isNotEmpty(matchedItem)) {
+            matched = true;
+        }
+
+        if (ObjectUtils.isEmpty(matchedItem) && ObjectUtils.isEmpty(focusedItem)) {
+            matchedItem = findFirstItem();
+        }
+
+        if (ObjectUtils.isNotEmpty(matchedItem)) {
+            changeFocusedItem({
+                originalEvent: event,
+                processedItem: matchedItem,
+                allowHeaderFocus: false
+            });
+        }
+
+        if (searchTimeout) {
+            clearTimeout(searchTimeout.current);
+        }
+
+        searchTimeout.current = setTimeout(() => {
+            searchValue.current = '';
+            searchTimeout.currentt = null;
+        }, 500);
+
+        return matched;
+    };
+
+    const changeFocusedItem = (event) => {
+        const { originalEvent, processedItem, focusOnNext, selfCheck, allowHeaderFocus = true } = event;
+
+        if (ObjectUtils.isNotEmpty(focusedItem) && focusedItem.key !== processedItem.key) {
+            setFocusedItem(processedItem);
+            scrollInView();
+        } else if (allowHeaderFocus) {
+            props.onHeaderFocus && props.onHeaderFocus({ originalEvent, focusOnNext, selfCheck });
+        }
+    };
+
+    const scrollInView = () => {
+        const element = DomHandler.findSingle(getListElement(), `li[id="${`${focusedItemId}`}"]`);
+
+        if (element) {
+            element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+        }
+    };
+
+    const autoUpdateActiveItemPath = (expandedKeys) => {
+        const _activeItemPath = Object.entries(expandedKeys || {}).reduce((acc, [key, val]) => {
+            if (val) {
+                const processedItem = findProcessedItemByItemKey(key);
+
+                processedItem && acc.push(processedItem);
+            }
+
+            return acc;
+        }, []);
+
+        setActiveItemPath(_activeItemPath);
+    };
+
+    const findProcessedItemByItemKey = (key, processed, level = 0) => {
+        const _processedItems = processed ? processed : level === 0 && props.model;
+
+        if (!_processedItems) {
+            return null;
+        }
+
+        for (let i = 0; i < _processedItems.length; i++) {
+            const processedItem = _processedItems[i];
+            const processedKey = getItemProp(processedItem, 'key') || processedItem.key;
+
+            if (processedKey === key) {
+                return processedItem;
+            }
+
+            const matchedItem = findProcessedItemByItemKey(key, processedItem.items, level + 1);
+
+            if (matchedItem) {
+                return matchedItem;
+            }
+        }
+    };
+
+    const createProcessedItems = (items, level = 0, parent = {}, parentKey = '') => {
+        const processedItems = [];
+
+        items &&
+            items.forEach((item, index) => {
+                const key = item.key ? item.key : (parentKey !== '' ? parentKey + '_' : '') + index;
+                const newItem = {
+                    item,
+                    index,
+                    level,
+                    key,
+                    parent,
+                    parentKey
+                };
+
+                newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
+                processedItems.push(newItem);
+            });
+
+        return processedItems;
+    };
+
+    const flatItems = (processedItems, processedFlattenItems = []) => {
+        processedItems &&
+            processedItems.forEach((processedItem) => {
+                if (isVisibleItem(processedItem)) {
+                    processedFlattenItems.push(processedItem);
+                    flatItems(processedItem.items, processedFlattenItems);
+                }
+            });
+
+        return processedFlattenItems;
+    };
+
+    React.useEffect(() => {
+        const processed = createProcessedItems(props.model);
+
+        setProcessedItems(processed);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.model]);
+
+    React.useEffect(() => {
+        const _visibleItems = flatItems(processedItems);
+
+        setVisibleItems(_visibleItems);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [processedItems, activeItemPath]);
+
+    React.useEffect(() => {
+        autoUpdateActiveItemPath(props.expandedKeys);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.expandedKeys]);
+
+    useUpdateEffect(() => {
+        const _id = ObjectUtils.isNotEmpty(focusedItem) ? `${props.panelId}_${focusedItem.key}` : null;
+
+        setFocusedItemId(_id);
+    }, [props.panelId, focusedItem]);
+
+    return (
+        <PanelMenuSub
+            hostName="PanelMenu"
+            id={props.panelId + '_list'}
+            ref={elementRef}
+            role="tree"
+            tabIndex={-1}
+            ariaActivedescendant={focused ? focusedItemId : undefined}
+            panelId={props.panelId}
+            focusedItemId={focused ? focusedItemId : undefined}
+            model={processedItems}
+            activeItemPath={activeItemPath}
+            menuProps={props.menuProps}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onKeyDown={onKeyDown}
+            onItemToggle={onItemToggle}
+            level={0}
+            className={cx('submenu')}
+            expandIcon={props.expandIcon}
+            collapseIcon={props.collapseIcon}
+            root
+            ptm={ptm}
+            cx={cx}
+        />
+    );
+});
+
+PanelMenuList.displayName = 'PanelMenuList';
diff --git a/components/lib/panelmenu/PanelMenuSub.js b/components/lib/panelmenu/PanelMenuSub.js
new file mode 100644
index 0000000000..eaf1d0eab4
--- /dev/null
+++ b/components/lib/panelmenu/PanelMenuSub.js
@@ -0,0 +1,293 @@
+import * as React from 'react';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { Ripple } from '../ripple/Ripple';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+
+export const PanelMenuSub = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { ptm, cx } = props;
+        const elementRef = React.useRef(null);
+
+        const _ptm = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const getPTOptions = (processedItem, key, index) => {
+            return _ptm(key, {
+                context: {
+                    item: processedItem,
+                    index,
+                    active: isItemActive(processedItem),
+                    focused: isItemFocused(processedItem),
+                    disabled: isItemDisabled(processedItem)
+                }
+            });
+        };
+
+        const getItemId = (processedItem) => {
+            return `${props.panelId}_${processedItem.key}`;
+        };
+
+        const getItemProp = (processedItem, name, params) => {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
+        };
+
+        const getItemLabel = (processedItem) => {
+            return getItemProp(processedItem, 'label');
+        };
+
+        const isItemActive = (processedItem) => {
+            return (props.activeItemPath && props.activeItemPath.some((path) => path.key === processedItem.key)) || !!processedItem.item?.expanded;
+        };
+
+        const isItemVisible = (processedItem) => {
+            return getItemProp(processedItem, 'visible') !== false;
+        };
+
+        const isItemDisabled = (processedItem) => {
+            return getItemProp(processedItem, 'disabled');
+        };
+
+        const isItemFocused = (processedItem) => {
+            return props.focusedItemId === getItemId(processedItem);
+        };
+
+        const isItemGroup = (processedItem) => {
+            return ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const onItemClick = (event, processedItem) => {
+            if (!getItemProp(processedItem, 'url')) {
+                event.preventDefault();
+            }
+
+            getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
+            onItemToggle({ processedItem, expanded: !isItemActive(processedItem) });
+        };
+
+        const onItemToggle = (event) => {
+            props.onItemToggle(event);
+        };
+
+        const getAriaSetSize = () => {
+            return props.model.filter((processedItem) => isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')).length;
+        };
+
+        const getAriaPosInset = (index) => {
+            return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            getElement: () => elementRef.current
+        }));
+
+        const createSeparator = (index) => {
+            const key = props.id + '_sep_' + index;
+
+            const separatorProps = mergeProps(
+                {
+                    id: key,
+                    className: cx('separator'),
+                    role: 'separator'
+                },
+                _ptm('separator')
+            );
+
+            return <li {...separatorProps} key={key} />;
+        };
+
+        const createSubmenu = (processedItem, active) => {
+            const submenuRef = React.createRef();
+
+            const toggleableContentProps = mergeProps(
+                {
+                    className: cx('toggleableContent', { active })
+                },
+                _ptm('toggleableContent')
+            );
+
+            if (isItemVisible(processedItem) && isItemGroup(processedItem)) {
+                const transitionProps = mergeProps(
+                    {
+                        classNames: cx('transition'),
+                        timeout: { enter: 1000, exit: 450 },
+                        in: active,
+                        unmountOnExit: true
+                    },
+                    _ptm('transition')
+                );
+
+                return (
+                    <CSSTransition nodeRef={submenuRef} {...transitionProps}>
+                        <div ref={submenuRef} {...toggleableContentProps}>
+                            <PanelMenuSub
+                                id={getItemId(processedItem) + '_list'}
+                                role="group"
+                                panelId={props.panelId}
+                                level={props.level + 1}
+                                focusedItemId={props.focusedItemId}
+                                activeItemPath={props.activeItemPath}
+                                onItemToggle={onItemToggle}
+                                menuProps={props.menuProps}
+                                model={processedItem.items}
+                                expandIcon={props.expandIcon}
+                                collapseIcon={props.collapseIcon}
+                                ptm={ptm}
+                                cx={cx}
+                            />
+                        </div>
+                    </CSSTransition>
+                );
+            }
+
+            return null;
+        };
+
+        const createMenuItem = (processedItem, index) => {
+            const item = processedItem.item;
+
+            if (isItemVisible(processedItem) === false) {
+                return null;
+            }
+
+            const key = getItemId(processedItem);
+            const active = isItemActive(processedItem);
+            const itemFocused = isItemFocused(processedItem);
+            const disabled = isItemDisabled(item);
+            const linkClassName = classNames('p-menuitem-link', { 'p-disabled': item.disabled });
+            const iconClassName = classNames('p-menuitem-icon', item.icon);
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon', { item })
+                },
+                getPTOptions(processedItem, 'icon', index)
+            );
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps });
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getPTOptions(processedItem, 'label', index)
+            );
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+            const submenuIconClassName = 'p-panelmenu-icon';
+            const submenuIconProps = mergeProps(
+                {
+                    className: cx('submenuicon')
+                },
+                getPTOptions(processedItem, 'submenuicon', index)
+            );
+
+            const submenuIcon = item.items && IconUtils.getJSXIcon(active ? props.collapseIcon || <ChevronDownIcon {...submenuIconProps} /> : props.expandIcon || <ChevronRightIcon {...submenuIconProps} />);
+
+            const submenu = createSubmenu(processedItem, active);
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: cx('action', { item }),
+                    target: item.target,
+                    onFocus: (event) => event.stopPropagation(),
+                    tabIndex: '-1'
+                },
+                getPTOptions(processedItem, 'action', index)
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    {submenuIcon}
+                    {icon}
+                    {label}
+                    <Ripple />
+                </a>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    className: linkClassName,
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName,
+                    submenuIconClassName,
+                    element: content,
+                    props,
+                    leaf: !item.items,
+                    active
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onItemClick(event, processedItem),
+                    className: cx('content')
+                },
+                getPTOptions(processedItem, 'content', index)
+            );
+
+            const menuitemProps = mergeProps(
+                {
+                    id: key,
+                    className: cx('menuitem', { item, focused: itemFocused, disabled: disabled }),
+                    style: item.style,
+                    role: 'treeitem',
+                    'aria-label': item.label,
+                    'aria-expanded': isItemGroup(item) ? active : undefined,
+                    'aria-level': props.level + 1,
+                    'aria-setsize': getAriaSetSize(),
+                    'aria-posinset': getAriaPosInset(index),
+                    'data-p-focused': itemFocused,
+                    'data-p-disabled': disabled
+                },
+                getPTOptions(processedItem, 'menuitem', index)
+            );
+
+            return (
+                <li {...menuitemProps} key={key}>
+                    <div {...contentProps}>{content}</div>
+                    {submenu}
+                </li>
+            );
+        };
+
+        const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            return getItemProp(item, 'separator') ? createSeparator(index) : createMenuItem(item, index);
+        };
+
+        const createMenu = () => {
+            return props.model ? props.model.map(createItem) : null;
+        };
+
+        const menu = createMenu();
+
+        const ptKey = props.root ? 'menu' : 'submenu';
+        const menuProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                tabIndex: props.tabIndex,
+                onFocus: props.onFocus,
+                onBlur: props.onBlur,
+                onKeyDown: props.onKeyDown,
+                'aria-activedescendant': props.ariaActivedescendant,
+                role: props.role,
+                className: classNames(cx(ptKey), props.className)
+            },
+            ptm(ptKey)
+        );
+
+        return <ul {...menuProps}>{menu}</ul>;
+    })
+);
+
+PanelMenuSub.displayName = 'PanelMenuSub';
diff --git a/components/lib/panelmenu/package.json b/components/lib/panelmenu/package.json
new file mode 100644
index 0000000000..63c9a131be
--- /dev/null
+++ b/components/lib/panelmenu/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./panelmenu.cjs.js",
+    "module": "./panelmenu.esm.js",
+    "unpkg": "./panelmenu.min.js",
+    "types": "./panelmenu.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/panelmenu/panelmenu.d.ts b/components/lib/panelmenu/panelmenu.d.ts
new file mode 100644
index 0000000000..4ee894acff
--- /dev/null
+++ b/components/lib/panelmenu/panelmenu.d.ts
@@ -0,0 +1,251 @@
+/**
+ *
+ * PanelMenu is a hybrid of accordion-tree components.
+ *
+ * [Live Demo](https://www.primereact.org/panelmenu/)
+ *
+ * @module panelmenu
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type PanelMenuPassThroughType<T> = PassThroughType<T, PanelMenuPassThroughMethodOptions>;
+export declare type PanelMenuPassThroughTransitionType = ReactCSSTransitionProps | ((options: PanelMenuPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelMenuPassThroughMethodOptions {
+    props: PanelMenuProps;
+    state: PanelMenuState;
+    context: PanelMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelMenuProps.pt}
+ */
+export interface PanelMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headerAction?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the expand icon's DOM element.
+     */
+    expandIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the collapse icon's DOM element.
+     */
+    collapseIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header icon's DOM element.
+     */
+    headerIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header submenu icon's DOM element.
+     */
+    headerSubmenuIcon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header label's DOM element.
+     */
+    headerLabel?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header toggleable content's DOM element.
+     */
+    headerToggleableContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the menu content's DOM element.
+     */
+    menuContent?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: PanelMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: PanelMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: PanelMenuPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in PanelMenu component.
+ */
+export interface PanelMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Active item path.
+     * @type {MenuItem}
+     */
+    activeItem: MenuItem[];
+    /**
+     * Whether the menu is visible or not.
+     * @defaultValue false
+     */
+    animationDisabled: boolean;
+}
+
+/**
+ * Defines current options in PanelMenu component.
+ */
+export interface PanelMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Custom expanded keys metadata.
+ * @see {@link PanelMenuProps.expandedKeys}
+ */
+export interface PanelMenuExpandedKeys {
+    [key: string]: any;
+}
+
+interface PanelMenuHeaderItemClickEvent {
+    originalEvent: React.MouseEvent<HTMLElement>;
+    item: MenuItem;
+}
+
+/**
+ * Defines valid properties in PanelMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface PanelMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * A map of keys to represent the expansion state in controlled mode.
+     * @type {PanelMenuExpandedKeys}
+     */
+    expandedKeys?: PanelMenuExpandedKeys;
+    /**
+     * Whether multiple tabs can be activated at the same time or not.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Icon used when a submenu is collapsed.
+     */
+    expandIcon?: IconType<PanelMenuProps> | undefined;
+    /**
+     * Icon used when a submenu is expanded.
+     */
+    collapseIcon?: IconType<PanelMenuProps> | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when a panel gets expanded.
+     * @param {PanelMenuHeaderItemClickEvent} event - custom event.
+     */
+    onOpen?(event: PanelMenuHeaderItemClickEvent): void;
+    /**
+     * Callback to invoke when a panel gets collapsed.
+     * @param {PanelMenuHeaderItemClickEvent} event - custom event.
+     */
+    onClose?(event: PanelMenuHeaderItemClickEvent): void;
+    /**
+     * Callback to when the expandedKeys changes.
+     * @param {*} value - New value.
+     */
+    onExpandedKeysChange?(value: any): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelMenuPassThroughOptions}
+     */
+    pt?: PanelMenuPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - PanelMenu**
+ *
+ * _PanelMenu is a hybrid of accordion-tree components._
+ *
+ * [Live Demo](https://www.primereact.org/panelmenu/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class PanelMenu extends React.Component<PanelMenuProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/passthrough/index.d.ts b/components/lib/passthrough/index.d.ts
new file mode 100644
index 0000000000..09b7b9e77b
--- /dev/null
+++ b/components/lib/passthrough/index.d.ts
@@ -0,0 +1,19 @@
+export interface PassThroughOptions {
+    /**
+     * Should the passthrough merge sections?
+     */
+    mergeSections?: boolean | undefined;
+    /**
+     * Should the passthrough merge properties?
+     */
+    mergeProps?: boolean | undefined;
+    /**
+     * Custom merge function such as twMerge for Tailwind merging.
+     * @param className1 the first className to merge
+     * @param className2 the second className to merge to className1
+     * @returns the merged className
+     */
+    classNameMergeFunction?: (className1: string, className2: string) => string | undefined;
+}
+
+export declare function usePassThrough(pt1: object, pt2: object, options?: PassThroughOptions): object;
diff --git a/components/lib/passthrough/index.js b/components/lib/passthrough/index.js
new file mode 100644
index 0000000000..473cd677fc
--- /dev/null
+++ b/components/lib/passthrough/index.js
@@ -0,0 +1,18 @@
+/**
+ * @todo: Add dynamic params support;
+ *
+ * Exp;
+ * usePassThrough(pt1, pt2, { mergeSections: true });
+ * usePassThrough(pt1, { mergeSections: true });
+ */
+export const usePassThrough = (pt1 = {}, pt2 = {}, { mergeSections = true, mergeProps = false, classNameMergeFunction } = {}) => {
+    return {
+        _usept: {
+            mergeSections,
+            mergeProps,
+            classNameMergeFunction
+        },
+        originalValue: pt1,
+        value: { ...pt1, ...pt2 }
+    };
+};
diff --git a/components/lib/passthrough/package.json b/components/lib/passthrough/package.json
new file mode 100644
index 0000000000..6f42b31859
--- /dev/null
+++ b/components/lib/passthrough/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
\ No newline at end of file
diff --git a/components/lib/passthrough/tailwind/index.d.ts b/components/lib/passthrough/tailwind/index.d.ts
new file mode 100644
index 0000000000..89cf2637c9
--- /dev/null
+++ b/components/lib/passthrough/tailwind/index.d.ts
@@ -0,0 +1,4 @@
+import { PrimeReactPTOptions } from '../../api/api';
+
+declare const Tailwind: PrimeReactPTOptions;
+export default Tailwind;
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
new file mode 100644
index 0000000000..9aa7a098d0
--- /dev/null
+++ b/components/lib/passthrough/tailwind/index.js
@@ -0,0 +1,3563 @@
+import { classNames } from '../../utils/Utils';
+
+export const TRANSITIONS = {
+    toggleable: {
+        timeout: 500,
+        classNames: {
+            enter: 'max-h-0',
+            enterActive: '!max-h-[1000px] overflow-hidden transition-[max-height] duration-500 ease-in',
+            exit: 'max-h-[1000px]',
+            exitActive: '!max-h-0 overflow-hidden transition-[max-height] duration-500 ease-out'
+        }
+    },
+    overlay: {
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
+    }
+};
+
+const Tailwind = {
+    global: {
+        css: `
+        *[data-pd-ripple="true"]{
+            overflow: hidden;
+            position: relative;
+        }
+        span[data-p-ink-active="true"]{
+            animation: ripple 0.4s linear;
+        }
+        @keyframes ripple {
+            100% {
+                opacity: 0;
+                transform: scale(2.5);
+            }
+        }
+
+        .progress-spinner-circle {
+            stroke-dasharray: 89, 200;
+            stroke-dashoffset: 0;
+            animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+            stroke-linecap: round;
+        }
+
+        @keyframes p-progress-spinner-dash{
+            0% {
+                stroke-dasharray: 1, 200;
+                stroke-dashoffset: 0;
+            }
+
+            50% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -35px;
+            }
+            100% {
+                stroke-dasharray: 89, 200;
+                stroke-dashoffset: -124px;
+            }
+        }
+        @keyframes p-progress-spinner-color {
+            100%, 0% {
+                stroke: #ff5757;
+            }
+            40% {
+                stroke: #696cff;
+            }
+            66% {
+                stroke: #1ea97c;
+            }
+            80%, 90% {
+                stroke: #cc8925;
+            }
+        }
+
+        .progressbar-value-animate::after {
+            will-change: left, right;
+            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+        }
+        .progressbar-value-animate::before {
+            will-change: left, right;
+            animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+        }
+        @keyframes p-progressbar-indeterminate-anim {
+            0% {
+                left: -35%;
+                right: 100%;
+            }
+            60% {
+                left: 100%;
+                right: -90%;
+            }
+            100% {
+                left: 100%;
+                right: -90%;
+            }
+        }
+`
+    },
+    //PANELS
+    panel: {
+        header: ({ props }) => ({
+            className: classNames(
+                'flex items-center justify-between', // flex and alignments
+                'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
+                { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
+            )
+        }),
+        title: 'leading-none font-bold',
+        toggler: {
+            className: classNames(
+                'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
+                'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
+                'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
+            )
+        },
+        togglerIcon: 'inline-block',
+        content: {
+            className: classNames(
+                'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+            )
+        },
+        transition: TRANSITIONS.toggleable
+    },
+    accordion: {
+        root: 'mb-1',
+        accordiontab: {
+            root: 'mb-1',
+            header: ({ context }) => {
+                return {
+                    className: classNames(
+                        { 'select-none pointer-events-none cursor-default opacity-60': context.disabled } // Condition
+                    )
+                };
+            },
+            headerAction: ({ context }) => ({
+                className: classNames(
+                    'flex items-center cursor-pointer relative no-underline select-none', // Alignments
+                    'p-5 transition duration-200 ease-in-out rounded-t-md font-bold transition-shadow duration-200', // Padding and transition
+                    'border border-gray-300 bg-gray-100 text-gray-600', // Borders and colors
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Dark mode
+                    'hover:border-gray-300 hover:bg-gray-200 hover:text-gray-800', // Hover
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                    { 'rounded-br-md rounded-bl-md': !context.selected, 'rounded-br-0 rounded-bl-0 text-gray-800': context.selected } // Condition
+                )
+            }),
+            headerIcon: 'inline-block mr-2',
+            headerTitle: 'leading-none',
+            content: {
+                className: classNames(
+                    'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+                )
+            },
+            transition: TRANSITIONS.toggleable
+        }
+    },
+    card: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 shadow-md rounded-md', // Background, text color, box shadow, and border radius.
+                'dark:bg-gray-900 dark:text-white ' //dark
+            )
+        },
+        body: 'p-5', // Padding.
+        title: 'text-2xl font-bold mb-2', // Font size, font weight, and margin bottom.
+        subTitle: {
+            className: classNames(
+                'font-normal mb-2 text-gray-600', // Font weight, margin bottom, and text color.
+                'dark:text-white/60 ' //dark
+            )
+        },
+        content: 'py-5', // Vertical padding.
+        footer: 'pt-5' // Top padding.
+    },
+    divider: {
+        root: ({ props }) => ({
+            className: classNames(
+                'flex relative', // alignments.
+                {
+                    'w-full my-5 mx-0 py-0 px-5 before:block before:left-0 before:absolute before:top-1/2 before:w-full before:border-t before:border-gray-300 before:dark:border-blue-900/40': props.layout == 'horizontal', // Padding and borders for horizontal layout.
+                    'min-h-full mx-4 md:mx-5 py-5 before:block before:min-h-full before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2 before:border-l before:border-gray-300 before:dark:border-blue-900/40':
+                        props.layout == 'vertical' // Padding and borders for vertical layout.
+                },
+                {
+                    'before:border-solid': props.type == 'solid',
+                    'before:border-dotted': props.type == 'dotted',
+                    'before:border-dashed': props.type == 'dashed'
+                } // Border type condition.
+            )
+        }),
+        content: 'px-1 bg-white z-10 dark:bg-gray-900' // Padding and background color.
+    },
+    fieldset: {
+        root: {
+            className: classNames(
+                'border border-gray-300 bg-white text-gray-700 rounded-md block mx-2 my-0.5 pl-4 pr-5 inline-size-min', // Borders, background, text color, spacing, and inline size.
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //dark
+            )
+        },
+        legend: ({ props }) => ({
+            className: classNames(
+                'border border-gray-300 text-gray-700 bg-gray-50 font-bold rounded-md',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ', //dark
+                {
+                    'p-0 transition-none hover:bg-gray-100 hover:border-gray-300 hover:text-gray-900 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': props.toggleable,
+                    'p-5': !props.toggleable
+                }
+            )
+        }),
+        toggler: ({ props }) => ({
+            className: classNames('flex items-center justify-center', {
+                'p-5 text-gray-700 rounded-md transition-none cursor-pointer overflow-hidden relative select-none hover:text-gray-900 focus:focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/60 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]':
+                    props.toggleable
+            })
+        }),
+        togglerIcon: 'mr-2 inline-block', // Margin and display style.
+        legendTitle: 'flex items-center justify-center leading-none', // alignments, and leading style.
+        content: 'p-5', // Padding.
+        transition: TRANSITIONS.toggleable
+    },
+    scrollpanel: {
+        wrapper: 'overflow-hidden relative float-left h-full w-full z-[1]',
+        content: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden',
+        barX: {
+            className: classNames('relative bg-gray-100 invisible rounded cursor-pointer h-[9px] bottom-0 z-[2]', 'transition duration-[250ms] ease-linear')
+        },
+        barY: {
+            className: classNames('relative bg-gray-100 rounded cursor-pointer w-[9px] top-0 z-[2]', 'transition duration-[250ms] ease-linear')
+        }
+    },
+    tabview: {
+        navContainer: ({ props }) => ({
+            className: classNames(
+                'relative', // Relative positioning.
+                { 'overflow-hidden': props.scrollable } // Overflow condition.
+            )
+        }),
+        navContent: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden', // Overflow and scrollbar styles.
+        previousButton: {
+            className: classNames('h-full flex items-center justify-center !absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 )') // Flex and absolute positioning styles.
+        },
+        nextButton: {
+            className: classNames('h-full flex items-center justify-center !absolute top-0 z-20', 'right-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex and absolute positioning styles.
+        },
+        nav: {
+            className: classNames('flex flex-1 list-none m-0 p-0', 'bg-transparent border border-gray-300 border-0 border-b-2', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ') // Flex, list, margin, padding, and border styles.
+        }
+    },
+    tabpanel: {
+        header: ({ props }) => ({
+            className: classNames('mr-0', { 'cursor-default pointer-events-none select-none user-select-none opacity-60': props?.disabled }) // Margin and condition-based styles.
+        }),
+        headerAction: ({ parent, context }) => ({
+            className: classNames(
+                'items-center cursor-pointer flex overflow-hidden relative select-none text-decoration-none user-select-none', // Flex and overflow styles.
+                'border-b-2 p-5 font-bold rounded-t-md transition-shadow duration-200 m-0', // Border, padding, font, and transition styles.
+                'transition-colors duration-200', // Transition duration style.
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // Focus styles.
+                {
+                    'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80':
+                        parent != null ? parent.state.activeIndex !== context.index : true, // Condition-based hover styles.
+                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent != null ? parent.state.activeIndex === context.index : false // Condition-based active styles.
+                }
+            ),
+            style: { marginBottom: '-2px' } // Negative margin style.
+        }),
+        headerTitle: {
+            className: classNames('leading-none whitespace-nowrap') // Leading and whitespace styles.
+        },
+        content: {
+            className: classNames('bg-white p-5 border-0 text-gray-700 rounded-bl-md rounded-br-md', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80') // Background, padding, border, and text styles.
+        }
+    },
+    splitter: {
+        root: ({ props, state }) => ({
+            className: classNames('flex flex-nowrap bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80', {
+                'border border-solid border-gray-300 dark:border-blue-900/40': !state.nested,
+                'flex-col': props.layout === 'vertical'
+            })
+        }),
+        gutter: ({ props }) => ({
+            className: classNames('flex items-center justify-center shrink-0', 'transition-all duration-200 bg-gray-100 dark:bg-gray-800', {
+                'cursor-col-resize': props.layout == 'horizontal',
+                'cursor-row-resize': props.layout !== 'horizontal'
+            })
+        }),
+        gutterHandler: ({ props }) => ({
+            className: classNames('bg-gray-300 dark:bg-gray-600 transition-all duration-200', {
+                'h-7 w-[0.3rem]': props.layout == 'horizontal',
+                'w-7 h-[0.3rem]': props.layout == 'vertical'
+            })
+        })
+    },
+    dialog: {
+        root: ({ state }) => ({
+            className: classNames('rounded-lg shadow-lg border-0', 'max-h-[90%] transform scale-100', 'm-0 w-[50vw]', 'dark:border dark:border-blue-900/40', {
+                'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized
+            })
+        }),
+        header: {
+            className: classNames('flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900  dark:text-white/80')
+        },
+        headerTitle: 'font-bold text-lg',
+        headerIcons: 'flex items-center',
+        closeButton: {
+            className: classNames(
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
+                'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
+        content: ({ props, state }) => ({
+            className: classNames('overflow-y-auto', 'bg-white text-gray-700 px-6 pb-8 pt-0', { 'rounded-bl-lg rounded-br-lg': !props.footer }, 'dark:bg-gray-900  dark:text-white/80 ', {
+                grow: state.maximized
+            })
+        }),
+        footer: {
+            className: classNames('flex gap-2 shrink-0 justify-end align-center', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900 dark:text-white/80')
+        },
+        mask: ({ state }) => ({
+            className: classNames('transition duration-200', { 'bg-black/40': state.containerVisible })
+        }),
+        transition: ({ props }) => {
+            return {
+                timeout: 200,
+                classNames:
+                    props.position === 'top'
+                        ? {
+                              enter: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0',
+                              enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
+                              exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                              exitActive: '!opacity-0 !scale-75 translate-x-0 -translate-y-full translate-z-0'
+                          }
+                        : props.position === 'bottom'
+                          ? {
+                                enter: 'opacity-0 scale-75 translate-y-full',
+                                enterActive: '!opacity-100 !scale-100 !translate-y-0 transition-all duration-200 ease-out',
+                                exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                exitActive: '!opacity-0 !scale-75 translate-x-0 translate-y-full translate-z-0'
+                            }
+                          : props.position === 'left' || props.position === 'top-left' || props.position === 'bottom-left'
+                            ? {
+                                  enter: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0',
+                                  enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
+                                  exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                  exitActive: '!opacity-0 !scale-75 -translate-x-full translate-y-0 translate-z-0'
+                              }
+                            : props.position === 'right' || props.position === 'top-right' || props.position === 'bottom-right'
+                              ? {
+                                    enter: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0',
+                                    enterActive: '!opacity-100 !scale-100 !translate-x-0 transition-all duration-200 ease-out',
+                                    exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                    exitActive: '!opacity-0 !scale-75 translate-x-full translate-y-0 translate-z-0'
+                                }
+                              : {
+                                    enter: 'opacity-0 scale-75',
+                                    enterActive: '!opacity-100 !scale-100 transition-all duration-200 ease-out',
+                                    exit: 'opacity-100 scale-100 transition-all duration-200 ease-out',
+                                    exitActive: '!opacity-0 !scale-75'
+                                }
+            };
+        }
+    },
+    confirmdialog: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-3 absolute left-0 top-0',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            )
+        },
+        content: 'p-5 items-center flex',
+        icon: 'text-2xl',
+        message: 'ml-4',
+        footer: 'flex gap-2 justify-end align-center text-right px-5 py-5 pt-0',
+        transition: TRANSITIONS.overlay
+    },
+    confirmpopup: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'mt-3 absolute left-0 top-0',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            )
+        },
+        content: 'p-5 items-center flex',
+        icon: 'text-2xl',
+        message: 'ml-4',
+        footer: 'flex gap-2 justify-end align-center text-right px-5 py-5 pt-0',
+        transition: TRANSITIONS.overlay
+    },
+    overlaypanel: {
+        root: {
+            className: classNames(
+                'bg-white text-gray-700 border-0 rounded-md shadow-lg',
+                'z-40 transform origin-center',
+                'absolute left-0 top-0 mt-3',
+                'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
+            )
+        },
+        closeButton: 'flex items-center justify-center overflow-hidden absolute top-0 right-0 w-6 h-6',
+        content: 'p-5 items-center flex',
+        transition: TRANSITIONS.overlay
+    },
+    sidebar: {
+        root: ({ props }) => ({
+            className: classNames(
+                'flex flex-col pointer-events-auto relative transform relative',
+                'bg-white text-gray-700 border-0 shadow-lg',
+                {
+                    '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.fullScreen,
+                    'h-full w-80': props.position == 'left' || props.position == 'right',
+                    'h-40 w-full': props.position == 'top' || props.position == 'bottom'
+                },
+                'dark:border dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80'
+            )
+        }),
+        header: {
+            className: classNames('flex items-center justify-end', 'p-5')
+        },
+        closeButton: {
+            className: classNames(
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 hover:border-transparent hover:bg-gray-200',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // focus
+                'dark:hover:text-white/80 dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
+        content: {
+            className: classNames('p-5 pt-0 h-full w-full', 'grow overflow-y-auto')
+        },
+        mask: {
+            className: classNames('flex pointer-events-auto', 'bg-black bg-opacity-40 transition duration-200 z-20 transition-colors')
+        },
+        transition: ({ props }) => {
+            return {
+                timeout: 300,
+                classNames: props.fullScreen
+                    ? {
+                          enter: 'opacity-0',
+                          enterActive: '!opacity-100 transition-opacity duration-300 ease-in',
+                          exit: 'opacity-100 transition-opacity duration-300 ease-in',
+                          exitActive: '!opacity-0'
+                      }
+                    : props.position === 'top'
+                      ? {
+                            enter: 'translate-x-0 -translate-y-full translate-z-0',
+                            enterActive: '!translate-y-0 transition-transform duration-300',
+                            exit: 'translate-y-0 transition-transform duration-300',
+                            exitActive: 'translate-x-0 !-translate-y-full translate-z-0'
+                        }
+                      : props.position === 'bottom'
+                        ? {
+                              enter: 'translate-x-0 translate-y-full translate-z-0',
+                              enterActive: '!translate-y-0 transition-transform duration-300',
+                              exit: 'translate-y-0 transition-transform duration-300',
+                              exitActive: 'translate-x-0 !translate-y-full translate-z-0'
+                          }
+                        : props.position === 'left'
+                          ? {
+                                enter: '-translate-x-full translate-y-0 translate-z-0',
+                                enterActive: '!translate-x-0 transition-transform duration-300',
+                                exit: 'translate-x-0 transition-transform duration-300',
+                                exitActive: '!-translate-x-full translate-y-0 translate-z-0'
+                            }
+                          : props.position === 'right'
+                            ? {
+                                  enter: 'translate-x-full translate-y-0 translate-z-0',
+                                  enterActive: '!translate-x-0 transition-transform duration-300',
+                                  exit: 'translate-x-0 transition-transform duration-300',
+                                  exitActive: '!translate-x-full translate-y-0 translate-z-0'
+                              }
+                            : undefined
+            };
+        }
+    },
+    toolbar: {
+        root: {
+            className: classNames('flex items-center justify-between flex-wrap', 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-blue-900/40  p-5 rounded-md gap-2')
+        },
+        start: 'flex items-center',
+        center: 'flex items-center',
+        end: 'flex items-center'
+    },
+    tooltip: {
+        root: ({ context }) => {
+            return {
+                className: classNames('absolute shadow-md', {
+                    'py-0 px-1': context.right || context.left || (!context.right && !context.left && !context.top && !context.bottom),
+                    'py-1 px-0': context.top || context.bottom
+                })
+            };
+        },
+        arrow: ({ context }) => ({
+            className: classNames('absolute w-0 h-0 border-transparent border-solid', {
+                '-mt-1 border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-gray-600': context.right,
+                '-mt-1 border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-gray-600': context.left,
+                '-ml-1 border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-gray-600': context.top,
+                '-ml-1 border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-gray-600': context.bottom
+            })
+        }),
+        text: {
+            className: 'p-3 bg-gray-600 text-white rounded-md whitespace-pre-line break-words'
+        }
+    },
+    //UPLOAD
+    fileupload: {
+        input: 'hidden',
+        buttonbar: {
+            className: classNames('flex flex-wrap', 'bg-gray-50 dark:bg-gray-800 p-5 border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-tr-lg rounded-tl-lg gap-2 border-b-0')
+        },
+        basicButton: {
+            className: classNames('text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative')
+        },
+        chooseButton: {
+            className: classNames('text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative')
+        },
+        chooseIcon: 'mr-2 inline-block',
+        chooseButtonLabel: 'flex-1 font-bold',
+        uploadButton: {
+            icon: 'mr-2'
+        },
+        cancelButton: {
+            icon: 'mr-2'
+        },
+        content: {
+            className: classNames('relative', 'bg-white dark:bg-gray-900 p-8 border border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-b-lg')
+        },
+        file: {
+            className: classNames('flex items-center flex-wrap', 'p-4 border border-gray-300 dark:border-blue-900/40 rounded gap-2 mb-2', 'last:mb-0')
+        },
+        thumbnail: 'shrink-0',
+        fileName: 'mb-2',
+        fileSize: 'mr-2',
+        uploadIcon: 'mr-2'
+    },
+    //Messages
+    messages: {
+        root: ({ state, index }) => {
+            return {
+                className: classNames('my-4 rounded-md', {
+                    'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': state.messages[index] && state.messages[index].message.severity == 'info',
+                    'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': state.messages[index] && state.messages[index].message.severity == 'success',
+                    'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': state.messages[index] && state.messages[index].message.severity == 'warn',
+                    'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': state.messages[index] && state.messages[index].message.severity == 'error'
+                })
+            };
+        },
+        wrapper: 'flex items-center py-5 px-7',
+        icon: {
+            className: classNames('w-6 h-6', 'text-lg mr-2')
+        },
+        text: 'text-base font-normal',
+        button: {
+            className: classNames('w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30')
+        },
+        transition: {
+            timeout: 300,
+            classNames: {
+                enter: 'max-h-0 opacity-0',
+                enterActive: '!max-h-40 !opacity-100 overflow-hidden transition-all duration-300',
+                exit: 'max-h-40 opacity-100',
+                exitActive: '!max-h-0 !opacity-0 !m-0 overflow-hidden transition-all duration-300 ease-in'
+            }
+        }
+    },
+    message: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex items-center justify-center align-top', 'p-3 m-0 rounded-md', {
+                'bg-blue-100 border-0 text-blue-700': props.severity == 'info',
+                'bg-green-100 border-0 text-green-700': props.severity == 'success',
+                'bg-orange-100 border-0 text-orange-700': props.severity == 'warn',
+                'bg-red-100 border-0 text-red-700': props.severity == 'error'
+            })
+        }),
+        icon: 'text-base mr-2'
+    },
+    toast: {
+        root: {
+            className: classNames('w-96', 'opacity-90')
+        },
+        message: ({ state, index }) => ({
+            className: classNames('my-4 rounded-md w-full', {
+                'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': state.messages[index] && state.messages[index].message.severity == 'info',
+                'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': state.messages[index] && state.messages[index].message.severity == 'success',
+                'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': state.messages[index] && state.messages[index].message.severity == 'warn',
+                'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': state.messages[index] && state.messages[index].message.severity == 'error'
+            })
+        }),
+        content: 'flex items-center py-5 px-7',
+        icon: {
+            className: classNames('w-6 h-6', 'text-lg mr-2')
+        },
+        text: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4',
+        summary: 'font-bold block',
+        detail: 'mt-1 block',
+        closeButton: {
+            className: classNames('w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30')
+        },
+        transition: {
+            timeout: { enter: 300, exit: 500 },
+            classNames: {
+                enter: 'opacity-0 max-h-0 translate-x-0 translate-y-2/4 translate-z-0',
+                enterActive: '!max-h-40 !opacity-90 !translate-y-0 transition-transform transition-opacity duration-300',
+                exit: 'max-h-40 opacity-90',
+                exitActive: '!max-h-0 !opacity-0 !mb-0 overflow-hidden transition-all duration-500 ease-in'
+            }
+        }
+    },
+    //BUTTONS
+    button: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom',
+                'transition duration-200 ease-in-out',
+                'focus:outline-none focus:outline-offset-0',
+                {
+                    'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
+                    'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.link
+                },
+                {
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'secondary',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'success',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'info',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'warning',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'help',
+                    'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                        props.severity === 'danger'
+                },
+                {
+                    'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
+                        props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
+                        props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
+                        props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
+                        props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
+                        props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                    'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
+                        props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+                },
+                { 'shadow-lg': props.raised },
+                { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+                {
+                    'bg-transparent border-transparent': props.text && !props.plain,
+                    'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
+                    'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
+                    'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
+                    'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
+                    'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
+                    'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
+                },
+                { 'shadow-lg': props.raised && props.text },
+                {
+                    'text-gray-500 hover:bg-gray-300/20': props.plain & props.text,
+                    'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain & props.outlined,
+                    'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain & !props.outlined & !props.text
+                },
+                {
+                    'bg-transparent border': props.outlined && !props.plain,
+                    'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
+                    'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
+                    'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
+                    'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
+                    'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
+                    'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
+                },
+                { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' },
+                { 'flex-column': props.iconPos == 'top' || props.iconPos == 'bottom' },
+                { 'opacity-60 pointer-events-none cursor-default': context?.disabled }
+            )
+        }),
+        label: ({ props }) => ({
+            className: classNames(
+                'flex-1',
+                'duration-200',
+                'font-bold',
+                {
+                    'hover:underline': props.link
+                },
+                { 'invisible w-0': props.label == null }
+            )
+        }),
+        icon: ({ props }) => ({
+            className: classNames('mx-0', {
+                'mr-2': props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.iconPos == 'right' && props.label != null,
+                'mb-2': props.iconPos == 'top' && props.label != null,
+                'mt-2 order-2': props.iconPos == 'bottom' && props.label != null
+            })
+        }),
+        loadingIcon: ({ props }) => ({
+            className: classNames('mx-0', {
+                'mr-2': props.loading && props.iconPos == 'left' && props.label != null,
+                'ml-2 order-1': props.loading && props.iconPos == 'right' && props.label != null,
+                'mb-2': props.loading && props.iconPos == 'top' && props.label != null,
+                'mt-2 order-2': props.loading && props.iconPos == 'bottom' && props.label != null
+            })
+        }),
+        badge: ({ props }) => ({
+            className: classNames({ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge })
+        })
+    },
+    speeddial: {
+        root: 'absolute flex',
+        button: {
+            root: ({ parent }) => ({
+                className: classNames('w-16 !h-16 !rounded-full justify-center z-10', {
+                    'rotate-45': parent.state.visible
+                })
+            }),
+            label: {
+                className: 'hidden'
+            }
+        },
+        menu: 'm-0 p-0 list-none flex items-center justify-center transition delay-200 z-20',
+        menuitem: ({ props, state }) => ({
+            className: classNames(
+                'transform transition-transform duration-200 ease-out transition-opacity duration-800',
+                !state.visible ? 'opacity-0 scale-0' : 'opacity-1 scale-100',
+                {
+                    'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
+                    'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
+                    'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
+                    'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
+                },
+                { absolute: props.type !== 'linear' }
+            )
+        }),
+        action: {
+            className: classNames('flex items-center justify-center rounded-full relative overflow-hidden', 'w-12 h-12 bg-gray-700 hover:bg-gray-800 text-white')
+        },
+        mask: ({ state }) => ({
+            className: classNames('absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0', {
+                'opacity-0': !state.visible,
+                'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.visible
+            })
+        })
+    },
+    splitbutton: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised })
+        }),
+        button: {
+            root: ({ parent }) => ({
+                className: classNames('rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded })
+            }),
+            icon: 'mr-2'
+        },
+        menu: {
+            className: classNames('outline-none', 'py-1	px-0 rounded-md	 list-none bg-white	border-none shadow-lg')
+        },
+        menuList: 'm-0 p-0 border-none outline-none no-underline list-none',
+        menuButton: {
+            root: ({ parent }) => ({
+                className: classNames('rounded-l-none', { 'rounded-r-full': parent.props.rounded })
+            }),
+            label: 'hidden'
+        },
+        anchor: 'cursor-pointer flex items-center relative overflow-hidden py-3 px-5 rounded-none transition select-none hover:text-gray-700 hover:bg-gray-200',
+        menuIcon: 'mr-2'
+    },
+    //FORMS
+    inputtext: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                'm-0',
+                'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg',
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                    'hover:border-blue-500': !props.invalid && !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled,
+                    'border-gray-300 dark:border-blue-900/40': !props.invalid,
+                    'border-red-500 hover:border-red-500/80 focus:border-red-500': props.invalid && !context.disabled,
+                    'border-red-500/50': props.invalid && context.disabled
+                },
+                {
+                    'text-lg px-4 py-4': props.size === 'large',
+                    'text-xs px-2 py-2': props.size === 'small',
+                    'p-3 text-base': !props.size || typeof props.size === 'number'
+                },
+                {
+                    'pl-8': context.iconPosition === 'left',
+                    'pr-8': props.iconPosition === 'right'
+                }
+            )
+        })
+    },
+    inputnumber: {
+        root: 'w-full inline-flex',
+        input: {
+            root: ({ props }) => ({
+                className: classNames({ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' })
+            })
+        },
+        buttonGroup: ({ props }) => ({
+            className: classNames({ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' })
+        }),
+        incrementButton: ({ props }) => ({
+            className: classNames('flex !items-center !justify-center', {
+                'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+            })
+        }),
+        decrementButton: ({ props }) => ({
+            className: classNames('flex !items-center !justify-center', {
+                'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+            })
+        })
+    },
+    knob: {
+        root: ({ props }) => ({
+            className: classNames('focus:outline-none focus:outline-offset-0 focus:shadow-0', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        range: 'stroke-current transition duration-100 ease-in stroke-gray-200 dark:stroke-gray-700 fill-none',
+        value: 'animate-dash-frame  stroke-blue-500 fill-none',
+        label: 'text-center text-xl'
+    },
+    inputswitch: {
+        root: ({ props }) => ({
+            className: classNames('inline-block relative', 'w-12 h-7', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        slider: ({ props }) => ({
+            className: classNames(
+                'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
+                'transition-colors duration-200 rounded-2xl',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                "before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
+                {
+                    'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.checked,
+                    'bg-blue-500 before:transform before:translate-x-5': props.checked
+                }
+            )
+        })
+    },
+    cascadeselect: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex cursor-pointer select-none relative', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition duration-200 ease-in-out rounded-lg', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        label: {
+            className: classNames('block whitespace-nowrap overflow-hidden flex flex-1 w-1 text-overflow-ellipsis cursor-pointer', 'bg-transparent border-0 p-3 text-gray-700 dark:text-white/80', 'appearance-none rounded-md')
+        },
+        dropdownButton: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6')
+        },
+        panel: 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
+        list: 'm-0 sm:p-0 list-none',
+        sublistWrapper: {
+            className: classNames('block absolute left-full top-0', 'min-w-full z-10')
+        },
+        sublist: {
+            className: classNames('py-3 bg-white dark:bg-gray-900 border-0 shadow-md')
+        },
+        item: ({ state }) => ({
+            className: classNames('cursor-pointer font-normal whitespace-nowrap', 'm-0 border-0 bg-transparent transition-shadow rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/80': !state.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': state.selected
+            })
+        }),
+        content: {
+            className: classNames('flex items-center overflow-hidden relative', 'py-3 px-5')
+        },
+        optionGroupIcon: 'ml-auto',
+        transition: TRANSITIONS.overlay
+    },
+    floatlabel: {
+        root: {
+            className: classNames(
+                'block relative', // root component style
+                '[&>label]:absolute [&>label]:pointer-events-none [&>label]:left-2 [&>label]:top-1/2 [&>label]:-mt-2 [&>label]:leading-none [&>label]:transition-all [&>label]:ease-in-out', // label style
+                '[&>textarea~label]:top-4', // textarea
+                '[&>input:focus~label]:-top-3 [&>input:focus~label]:text-xs', // input focus
+                '[&>input:autofill~label]:-top-3 [&>input:autofill~label]:text-xs', // input autofill
+                '[&>input.p-filled~label]:-top-3 [&>input.p-filled~label]:text-xs', // input filled
+                '[&>textarea:focus~label]:-top-3 [&>textarea:focus~label]:text-xs', // textarea focus
+                '[&>textarea.p-filled~label]:-top-3 [&>textarea.p-filled~label]:text-xs', // textarea filled
+                '[&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:-top-3 [&>div[data-pc-name="dropdown"][data-p-focus="false"]~label]:text-xs', // dropdown focus
+                '[&>input::placeholder]:opacity-0 [&>input::placeholder]:transition-all [&>input::placeholder]:ease-in-out', // placeholder
+                '[&>input::placeholder:focus]:opacity-100 [&>input::placeholder:focus]:transition-all [&>input::placeholder:focus]:ease-in-out' // placeholder focus
+            )
+        }
+    },
+    iconfield: {
+        root: {
+            className: classNames('relative')
+        }
+    },
+    inputicon: {
+        root: ({ context }) => ({
+            className: classNames('absolute top-1/2 -mt-2', {
+                'left-2': context.iconPosition === 'left',
+                'right-2': context.iconPosition === 'right'
+            })
+        })
+    },
+    inputmask: {
+        root: ({ props, context }) => ({
+            className: classNames(
+                'm-0',
+                'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border transition-colors duration-200 appearance-none rounded-lg',
+                {
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                    'hover:border-blue-500': !props.invalid && !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled,
+                    'border-gray-300 dark:border-blue-900/40': !props.invalid,
+                    'border-red-500 hover:border-red-500/80 focus:border-red-500': props.invalid && !context.disabled,
+                    'border-red-500/50': props.invalid && context.disabled
+                },
+                {
+                    'text-lg px-4 py-4': props.size === 'large',
+                    'text-xs px-2 py-2': props.size === 'small',
+                    'p-3 text-base': !props.size || typeof props.size === 'number'
+                },
+                {
+                    'pl-8': context.iconPosition === 'left',
+                    'pr-8': props.iconPosition === 'right'
+                }
+            )
+        })
+    },
+    inputotp: {
+        root: { className: 'flex items-center gap-2' },
+        input: {
+            root: {
+                className: classNames(
+                    'box-border text-center w-10 h-11 p-3 text-slate-900 border border-gray-300 rounded-lg transition-all duration-200',
+                    'hover:border-cyan-500',
+                    'focus:border-cyan-500 focus:shadow-[0_0_0_0.2rem_#a5f3fc] focus:outline-0 focus:outline-offset-0'
+                )
+            }
+        }
+    },
+    rating: {
+        root: ({ props }) => ({
+            className: classNames('relative flex items-center', 'gap-2', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        cancelItem: ({ context }) => ({
+            className: classNames(
+                'inline-flex items-center cursor-pointer'
+
+                // {
+                //     'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+                // }
+            )
+        }),
+        cancelIcon: {
+            className: classNames('text-red-500', 'w-5 h-5', 'transition duration-200 ease-in')
+        },
+        item: ({ props, context }) => ({
+            className: classNames(
+                'inline-flex items-center',
+                {
+                    'cursor-pointer': !props.readOnly,
+                    'cursor-default': props.readOnly
+                },
+                {
+                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.active
+                }
+            )
+        }),
+        offIcon: {
+            className: classNames('text-gray-700 hover:text-blue-400', 'w-5 h-5', 'transition duration-200 ease-in')
+        },
+        onIcon: {
+            className: classNames('text-blue-500', 'w-5 h-5', 'transition duration-200 ease-in')
+        }
+    },
+    selectbutton: {
+        root: ({ props }) => ({
+            className: classNames({ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled })
+        }),
+        button: ({ context }) => ({
+            className: classNames(
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3',
+                'transition duration-200 border border-r-0',
+                'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.selected,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.selected,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                }
+            )
+        }),
+        label: 'font-bold'
+    },
+    slider: {
+        root: ({ props }) => ({
+            className: classNames(
+                'relative',
+                'bg-gray-100 dark:bg-gray-800 border-0 rounded-6',
+                { 'h-1 w-56': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            )
+        }),
+        range: ({ props }) => ({
+            className: classNames('bg-blue-500', 'block absolute', {
+                'top-0 left-0 h-full': props.orientation == 'horizontal',
+                'bottom-0 left-0 w-full': props.orientation == 'vertical'
+            })
+        }),
+        handle: ({ props }) => ({
+            className: classNames(
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
+            )
+        })
+    },
+    password: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex relative', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        panel: 'p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md',
+        meter: 'mb-2 bg-gray-300 dark:bg-gray-700 h-3',
+        meterLabel: ({ state, props }) => ({
+            className: classNames(
+                'transition-width duration-1000 ease-in-out h-full',
+                {
+                    'bg-red-500': state.meter?.strength == 'weak',
+                    'bg-orange-500': state.meter?.strength == 'medium',
+                    'bg-green-500': state.meter?.strength == 'strong'
+                },
+                { 'pr-[2.5rem] ': props.toggleMask }
+            )
+        }),
+        showIcon: {
+            className: classNames('absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70')
+        },
+        hideIcon: {
+            className: classNames('absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70')
+        },
+        inputIcon: {
+            root: 'mt-0'
+        },
+        transition: TRANSITIONS.overlay
+    },
+    togglebutton: {
+        root: ({ props, state }) => ({
+            className: classNames(
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3 rounded-md text-base w-36',
+                'border transition duration-200 ease-in-out',
+                {
+                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': state.focused
+                },
+                {
+                    'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80':
+                        !props.checked,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600': props.checked
+                },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            )
+        }),
+        label: 'font-bold text-center w-full',
+        icon: ({ props }) => ({
+            className: classNames(' mr-2', {
+                'text-gray-600 dark:text-white/70': !props.checked,
+                'text-white': props.checked
+            })
+        })
+    },
+    tristatecheckbox: {
+        root: {
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+        },
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
+                {
+                    'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.value || !props.value,
+                    'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value == null
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
+    },
+    checkbox: {
+        root: {
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+        },
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props, context }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
+    },
+    radiobutton: {
+        root: {
+            className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6')
+        },
+        input: {
+            className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+        },
+        box: ({ props }) => ({
+            className: classNames(
+                'flex justify-center items-center',
+                'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': !props.checked,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        icon: ({ props }) => ({
+            className: classNames('transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', {
+                'backface-hidden scale-10 invisible': !props.checked,
+                'transform scale-100 visible': props.checked
+            })
+        })
+    },
+    dropdown: {
+        root: ({ props }) => ({
+            className: classNames(
+                'cursor-pointer inline-flex relative select-none',
+                'bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300',
+                'w-full md:w-56',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            )
+        }),
+        input: ({ props }) => ({
+            className: classNames(
+                'cursor-pointer block flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative',
+                'bg-transparent border-0 text-gray-800',
+                'dark:text-white/80',
+                'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
+                'focus:outline-none focus:shadow-none',
+                { 'pr-7': props.showClear }
+            )
+        }),
+        trigger: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg')
+        },
+        wrapper: {
+            className: 'max-h-[200px] overflow-auto bg-white text-gray-700 border-0 rounded-md shadow-lg dark:bg-gray-900 dark:text-white/80'
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected,
+                'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+            })
+        }),
+        itemGroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        header: {
+            className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40')
+        },
+        filterContainer: 'relative',
+        filterInput: {
+            className: classNames(
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        filterIcon: '-mt-2 absolute top-1/2',
+        clearIcon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
+        transition: TRANSITIONS.overlay
+    },
+    calendar: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex max-w-full relative', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        input: {
+            root: ({ parent }) => ({
+                className: classNames('font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none', 'hover:border-blue-500', {
+                    'rounded-lg': !parent.props.showIcon,
+                    'border-r-0 rounded-l-lg': parent.props.showIcon
+                })
+            })
+        },
+        dropdownButton: {
+            root: ({ props }) => ({
+                className: classNames({ 'rounded-l-none': props.icon })
+            })
+        },
+        panel: ({ props }) => ({
+            className: classNames('bg-white dark:bg-gray-900', 'top-0 left-0 w-auto min-w-min p-2 rounded-lg', {
+                'shadow-md border-0 absolute': !props.inline,
+                'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40': props.inline
+            })
+        }),
+        header: {
+            className: classNames('flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg')
+        },
+        previousButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        title: 'leading-8 mx-auto',
+        monthTitle: {
+            className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500')
+        },
+        yearTitle: {
+            className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500')
+        },
+        nextButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        table: {
+            className: classNames('border-collapse w-full', 'my-2 mx-0')
+        },
+        tableHeaderCell: 'p-2',
+        weekDay: 'text-gray-600 dark:text-white/70',
+        day: 'p-2',
+        dayLabel: ({ context }) => ({
+            className: classNames(
+                'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
+                'flex items-center justify-center mx-auto overflow-hidden relative',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'opacity-60 cursor-default': context.disabled,
+                    'cursor-pointer': !context.disabled
+                },
+                {
+                    'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
+            )
+        }),
+        monthPicker: 'my-2',
+        month: ({ context }) => ({
+            className: classNames(
+                'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'p-2 transition-shadow duration-200 rounded-lg',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
+            )
+        }),
+        yearPicker: {
+            className: classNames('my-2')
+        },
+        year: ({ context }) => ({
+            className: classNames(
+                'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'p-2 transition-shadow duration-200 rounded-lg',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'text-gray-600 dark:text-white/70 bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
+            )
+        }),
+        timePicker: {
+            className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
+        },
+        separatorContainer: 'flex items-center flex-col px-2',
+        separator: 'text-xl',
+        hourPicker: 'flex items-center flex-col px-2',
+        minutePicker: 'flex items-center flex-col px-2',
+        ampmPicker: 'flex items-center flex-col px-2',
+        incrementButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        decrementButton: {
+            className: classNames(
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            )
+        },
+        groupContainer: '',
+        group: '',
+        transition: TRANSITIONS.overlay
+    },
+    listbox: {
+        root: {
+            className: classNames('bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56')
+        },
+        wrapper: 'overflow-auto',
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+            })
+        }),
+        itemGroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        header: {
+            className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40')
+        },
+        filterContainer: 'relative',
+        filterInput: {
+            root: {
+                className: classNames(
+                    'pr-7 -mr-7',
+                    'w-full',
+                    'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+                )
+            }
+        },
+        filterIcon: '-mt-2 absolute top-1/2'
+    },
+    mention: {
+        root: 'relative',
+        panel: 'max-h-[200px] min-w-full overflow-auto bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg',
+        items: 'py-3 list-none m-0',
+        item: ({ state }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap m-0 p-3 border-0 transition-shadow duration-200 rounded-none dark:text-white/80 dark:hover:bg-gray-800 hover:text-gray-700 hover:bg-gray-200', {
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': state.selected
+            })
+        }),
+        transition: TRANSITIONS.overlay
+    },
+    multiselect: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', {
+                'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
+            })
+        }),
+        labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
+        label: ({ props }) => ({
+            className: classNames('block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200', {
+                '!p-3': props.display !== 'chip' && (props.value == null || props.value == undefined),
+                '!py-1.5 px-3': props.display === 'chip' && props.value !== null
+            })
+        }),
+        token: {
+            className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
+        },
+        removeTokenIcon: 'ml-2',
+        trigger: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg')
+        },
+        panel: {
+            className: classNames('bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg')
+        },
+        header: {
+            className: classNames('p-3 border-b border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-800 rounded-t-lg', 'flex items-center justify-between')
+        },
+        headerCheckboxContainer: {
+            className: classNames('inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6')
+        },
+        headerCheckbox: {
+            root: ({ props }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                    {
+                        'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !props?.checked,
+                        'border-blue-500 bg-blue-500': props?.checked
+                    }
+                )
+            })
+        },
+        headerCheckboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
+        closeButton: {
+            className: classNames(
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
+        wrapper: {
+            className: classNames('max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80')
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+            })
+        }),
+        checkboxContainer: {
+            className: classNames('inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6')
+        },
+        checkbox: ({ context }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context?.selected,
+                    'border-blue-500 bg-blue-500': context?.selected
+                }
+            )
+        }),
+        checkboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
+        itemGroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        filterContainer: 'relative',
+        filterInput: {
+            root: {
+                className: classNames(
+                    'pr-7 -mr-7',
+                    'w-full',
+                    'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+                )
+            }
+        },
+        filterIcon: '-mt-2 absolute top-1/2',
+        clearIcon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
+        transition: TRANSITIONS.overlay
+    },
+    multistatecheckbox: {
+        root: {
+            className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+        },
+        checkbox: ({ props }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
+                {
+                    'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.value || !props.value,
+                    'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.value == null
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        })
+    },
+    inputtextarea: {
+        root: ({ context }) => ({
+            className: classNames(
+                'm-0',
+                'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }
+            )
+        })
+    },
+    treeselect: {
+        root: ({ props }) => ({
+            className: classNames('inline-flex cursor-pointer select-none', 'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-80', {
+                'opacity-60 select-none pointer-events-none cursor-default': props?.disabled
+            })
+        }),
+        labelContainer: {
+            className: classNames('overflow-hidden flex flex-auto cursor-pointer')
+        },
+        label: {
+            className: classNames('block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200')
+        },
+        trigger: {
+            className: classNames('flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg')
+        },
+        panel: {
+            className: classNames('bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg')
+        },
+        wrapper: {
+            className: classNames('max-h-[200px] overflow-auto', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg')
+        },
+        header: {
+            className: 'py-3 px-5 border-b border-inherit bg-gray-50 m-0 rounded-t-lg flex items-center justify-between'
+        },
+        closeButton: {
+            className: 'w-8 h-8 border-none bg-transparent rounded-full flex items-center justify-center shrink-0 overflow-hidden relative ml-auto transition hover:border-transparent hover:bg-gray-200 text-gray-500'
+        },
+        transition: TRANSITIONS.overlay
+    },
+    autocomplete: {
+        root: ({ props }) => ({
+            className: classNames(
+                'relative inline-flex',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                },
+                { 'w-full': props.multiple }
+            )
+        }),
+        container: {
+            className: classNames(
+                'm-0 list-none cursor-text overflow-hidden flex items-center flex-wrap w-full',
+                'px-3 py-2 gap-2',
+                'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  transition duration-200 ease-in-out appearance-none rounded-md',
+                'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        inputToken: {
+            className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
+        },
+        input: ({ props }) => ({
+            root: {
+                className: classNames(
+                    'm-0',
+                    'transition-colors duration-200 appearance-none rounded-lg',
+                    { 'rounded-tr-none rounded-br-none': props.dropdown },
+                    {
+                        'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] hover:border-blue-500 focus:outline-none':
+                            !props.multiple,
+                        'font-sans text-base text-gray-700 dark:text-white/80 border-0 outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full': props.multiple
+                    }
+                )
+            }
+        }),
+        token: {
+            className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
+        },
+        dropdownButton: {
+            root: 'rounded-tl-none rounded-bl-none'
+        },
+        panel: {
+            className: classNames('bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'dark:bg-gray-900 dark:text-white/80')
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+            })
+        }),
+        itemGroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        transition: TRANSITIONS.overlay
+    },
+    chips: {
+        root: ({ props }) => ({
+            className: classNames('flex', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        container: {
+            className: classNames(
+                'm-0 py-1.5 px-3 list-none cursor-text overflow-hidden flex items-center flex-wrap',
+                'w-full',
+                'font-sans text-base text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        inputToken: {
+            className: classNames('py-1.5 px-0', 'flex flex-1 inline-flex')
+        },
+        input: {
+            className: classNames('font-sans text-base text-gray-700 dark:text-white/80 p-0 m-0', 'border-0 outline-none bg-transparent shadow-none rounded-none w-full')
+        },
+        token: {
+            className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
+        },
+        removeTokenIcon: 'ml-2'
+    },
+    colorpicker: {
+        root: ({ props }) => ({
+            className: classNames('inline-block', {
+                'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+            })
+        }),
+        input: {
+            className: classNames(
+                'm-0',
+                'font-sans text-base text-gray-600 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 rounded-lg cursor-pointer',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'w-8 h-8'
+            )
+        },
+        panel: ({ props }) => ({
+            className: classNames('shadow-md', 'bg-gray-800 border-gray-900', {
+                'relative h-48 w-52': props.inline,
+                'absolute h-48 w-52': !props.inline
+            })
+        }),
+        selector: 'absolute h-44 w-40 top-2 left-2',
+        color: {
+            className: 'h-44 w-40',
+            style: { background: 'linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)' }
+        },
+        colorHandle: {
+            className: classNames('rounded-full border border-solid cursor-pointer h-3 w-3 absolute  opacity-85', 'border-white')
+        },
+        hue: {
+            className: 'h-44 w-6 absolute top-2 left-44 opacity-85',
+            style: { background: 'linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)' }
+        },
+        hueHandle: 'border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute',
+        transition: TRANSITIONS.overlay
+    },
+    editor: {
+        toolbar: {
+            className: classNames('bg-gray-100 rounded-tr-md rounded-tl-md', 'border border-gray-300 box-border font-sans px-2 py-1')
+        },
+        formats: {
+            className: classNames('inline-block align-middle', 'mr-4')
+        },
+        header: {
+            className: classNames('text-gray-700 inline-block float-left text-base font-medium h-6 relative align-middle', 'w-28', 'border-0 text-gray-600')
+        }
+    },
+    //MISC
+    badge: {
+        root: ({ props }) => ({
+            className: classNames(
+                'rounded-full p-0 text-center inline-block',
+                'bg-blue-500 text-white font-bold',
+                {
+                    'bg-gray-500 ': props.severity == 'secondary',
+                    'bg-green-500 ': props.severity == 'success',
+                    'bg-blue-500 ': props.severity == 'info',
+                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-purple-500 ': props.severity == 'help',
+                    'bg-red-500 ': props.severity == 'danger'
+                },
+                {
+                    'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
+                    'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large',
+                    'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge'
+                }
+            )
+        })
+    },
+    avatar: {
+        root: ({ props, state }) => ({
+            className: classNames(
+                'flex items-center justify-center',
+                'bg-gray-300 dark:bg-gray-800',
+                {
+                    'rounded-lg': props.shape == 'square',
+                    'rounded-full': props.shape == 'circle'
+                },
+                {
+                    'text-base h-8 w-8': props.size == null || props.size == 'normal',
+                    'w-12 h-12 text-xl': props.size == 'large',
+                    'w-16 h-16 text-2xl': props.size == 'xlarge'
+                },
+                {
+                    '-ml-4 border-2 border-white dark:border-gray-900': state.nested
+                }
+            )
+        }),
+        image: 'h-full w-full'
+    },
+    avatargroup: {
+        root: 'flex items-center'
+    },
+    chip: {
+        root: {
+            className: classNames('inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900')
+        },
+        label: 'leading-6 mt-1.5 mb-1.5',
+        icon: 'leading-6 mr-2',
+        image: {
+            className: classNames('w-9 h-9 ml-[-0.75rem] mr-2', 'rounded-full')
+        },
+        removeIcon: {
+            className: classNames('ml-2 rounded-md transition duration-200 ease-in-out', 'cursor-pointer leading-6')
+        }
+    },
+    progressbar: {
+        root: {
+            className: classNames('overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800')
+        },
+        value: ({ props }) => ({
+            className: classNames('border-0 m-0 bg-blue-500', {
+                'transition-width duration-1000 ease-in-out absolute items-center border-0 flex h-full justify-center overflow-hidden w-0': props.mode !== 'indeterminate',
+                'progressbar-value-animate before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
+            })
+        }),
+        label: {
+            className: classNames('inline-flex', 'text-white leading-6')
+        }
+    },
+    progressspinner: {
+        root: {
+            className: classNames('relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full')
+        },
+        spinner: 'absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin',
+        circle: 'text-red-500 progress-spinner-circle'
+    },
+    skeleton: {
+        root: ({ props }) => ({
+            className: classNames(
+                'overflow-hidden',
+                '!mb-2',
+                'bg-gray-300 dark:bg-gray-800',
+                'after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content after:w-full after:h-full after:bg-blue-400 after:left-full after:transform after:translate-x-full after:z-10 after:bg-gradient-to-r after:from-transparent after:via-white after:to-transparent animate-pulse',
+                {
+                    'rounded-md': props.shape !== 'circle',
+                    'rounded-full': props.shape == 'circle'
+                }
+            )
+        })
+    },
+    tag: {
+        root: ({ props }) => ({
+            className: classNames(
+                'inline-flex items-center justify-center',
+                'bg-blue-500 text-white text-xs font-semibold px-2 py-1 ',
+                {
+                    'bg-gray-500 ': props.severity == 'secondary',
+                    'bg-green-500 ': props.severity == 'success',
+                    'bg-blue-500 ': props.severity == 'info',
+                    'bg-orange-500 ': props.severity == 'warning',
+                    'bg-purple-500 ': props.severity == 'help',
+                    'bg-red-500 ': props.severity == 'danger'
+                },
+                {
+                    'rounded-md': !props.rounded,
+                    'rounded-full': props.rounded
+                }
+            )
+        }),
+        value: 'leading-6',
+        icon: 'mr-1 text-sm'
+    },
+    inplace: {
+        display: {
+            className: classNames('p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80')
+        }
+    },
+    scrolltop: {
+        root: ({ props }) => ({
+            className: classNames('fixed bottom-20 right-20 flex items-center justify-center', 'ml-auto', {
+                '!bg-blue-500 hover:bg-blue-600 text-white rounded-md h-8 w-8': props.target == 'parent',
+                '!bg-gray-700 hover:bg-gray-800 h-12 w-12 rounded-full text-white': props.target !== 'parent'
+            })
+        }),
+        transition: {
+            timeout: 150,
+            classNames: {
+                enter: 'opacity-0',
+                enterActive: '!opacity-100 transition-opacity duration-150',
+                exit: 'opacity-100',
+                exitActive: '!opacity-0 transition-opacity duration-150'
+            }
+        }
+    },
+    terminal: {
+        root: {
+            className: classNames('border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto')
+        },
+        container: 'flex items-center',
+        prompt: 'text-yellow-400',
+        commandText: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
+    },
+    blockui: {
+        root: 'relative',
+        mask: 'bg-black/40'
+    },
+    ripple: {
+        root: {
+            className: 'block absolute bg-white/50 rounded-full pointer-events-none',
+            style: { transform: 'scale(0)' }
+        }
+    },
+    //MENU
+    breadcrumb: {
+        root: {
+            className: classNames('overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4')
+        },
+        menu: 'm-0 p-0 list-none flex items-center flex-nowrap',
+        action: {
+            className: classNames(
+                'text-decoration-none flex items-center',
+                'transition-shadow duration-200 rounded-md text-gray-600 dark:text-white/70',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        icon: 'text-gray-600 dark:text-white/70',
+        separator: {
+            className: classNames('mx-2 text-gray-600 dark:text-white/70', 'flex items-center')
+        }
+    },
+    contextmenu: {
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-none shadow-md rounded-lg w-52',
+        menu: {
+            className: classNames('m-0 p-0 list-none', 'outline-none')
+        },
+        menuitem: 'relative',
+        content: ({ context }) => ({
+            className: classNames(
+                'transition-shadow duration-200 rounded-none',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
+                {
+                    'text-gray-700': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                }
+            )
+        }),
+        action: {
+            className: classNames('cursor-pointer flex items-center no-underline overflow-hidden relative', 'text-gray-700 dark:text-white/80 py-3 px-5 select-none')
+        },
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
+        label: 'text-gray-600 dark:text-white/70',
+        transition: {
+            timeout: { enter: 250 },
+            classNames: {
+                enter: 'opacity-0',
+                enterActive: '!opacity-100 transition-opacity duration-250'
+            }
+        }
+    },
+    dock: {
+        root: ({ props }) => ({
+            className: classNames('absolute z-1 flex justify-center items-center pointer-events-none', {
+                'left-0 bottom-0 w-full': props.position == 'bottom',
+                'left-0 top-0 w-full': props.position == 'top',
+                'left-0 top-0 h-full': props.position == 'left',
+                'right-0 top-0 h-full': props.position == 'right'
+            })
+        }),
+        container: {
+            className: classNames('flex pointer-events-auto', 'bg-white/10 border-white/20 p-2 border rounded-md')
+        },
+        menu: ({ props }) => ({
+            className: classNames('m-0 p-0 list-none flex items-center justify-center', 'outline-none', {
+                'flex-col': props.position == 'left' || props.position == 'right'
+            })
+        }),
+        menuitem: ({ props, context, state }) => ({
+            className: classNames(
+                'p-2 rounded-md',
+                'transition-all duration-200 ease-cubic-bezier-will-change-transform transform ',
+                {
+                    'origin-bottom hover:mx-6': props.position == 'bottom',
+                    'origin-top hover:mx-6': props.position == 'top',
+                    'origin-left hover:my-6': props.position == 'left',
+                    'origin-right hover:my-6': props.position == 'right'
+                },
+                {
+                    'hover:scale-150': state.currentIndex === context.index,
+                    'scale-125': state.currentIndex - 1 === context.index || state.currentIndex + 1 === context.index,
+                    'scale-110': state.currentIndex - 2 === context.index || state.currentIndex + 2 === context.index
+                }
+            )
+        }),
+        action: {
+            className: classNames('flex flex-col items-center justify-center relative overflow-hidden cursor-default', 'w-16 h-16')
+        }
+    },
+    menu: {
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48',
+        menu: {
+            className: classNames('m-0 p-0 list-none', 'outline-none')
+        },
+        content: ({ state }) => ({
+            className: classNames(
+                'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
+                {
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': state.focused
+                }
+            )
+        }),
+        action: {
+            className: classNames('text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative')
+        },
+        menuitem: {
+            className: classNames('hover:bg-gray-200')
+        },
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
+        submenuHeader: {
+            className: classNames('m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none')
+        },
+        separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
+        transition: TRANSITIONS.overlay
+    },
+    menubar: {
+        root: {
+            className: classNames('p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative')
+        },
+        menu: ({ state }) => ({
+            className: classNames(
+                'm-0 sm:p-0 list-none',
+                'outline-none',
+                'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
+                'flex-col top-full left-0',
+                'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
+                {
+                    'hidden ': !state?.mobileActive,
+                    'flex ': state?.mobileActive
+                }
+            )
+        }),
+        menuitem: ({ props, context }) => ({
+            className: classNames(
+                'sm:relative sm:w-auto w-full static',
+                'transition-shadow duration-200',
+                { 'rounded-md': props.root },
+                {
+                    'text-gray-700 dark:text-white/80': !context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.active
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
+                }
+            )
+        }),
+        action: ({ context }) => ({
+            className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none', {
+                'pl-9 sm:pl-5': context.level === 1,
+                'pl-14 sm:pl-5': context.level === 2
+            })
+        }),
+        icon: 'mr-2',
+        submenuIcon: ({ props }) => ({
+            className: classNames({
+                'ml-auto sm:ml-2': props.root,
+                'ml-auto': !props.root
+            })
+        }),
+        submenu: ({ props }) => ({
+            className: classNames('py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', {
+                'sm:absolute sm:left-full sm:top-0': !props.root
+            })
+        }),
+        separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
+        button: {
+            className: classNames(
+                'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out',
+                'cursor-pointer flex items-center justify-center no-underline',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        end: 'ml-auto self-auto'
+    },
+    megamenu: {
+        root: ({ props }) => ({
+            className: classNames('bg-gray-100 dark:bg-gray-900  border border-gray-300 dark:border-blue-900/40  rounded-md', 'flex relative', {
+                'p-2 items-center': props.orientation == 'horizontal',
+                'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal'
+            })
+        }),
+        menu: ({ props, state }) => ({
+            className: classNames(
+                'm-0 sm:p-0 list-none',
+                'outline-none',
+                { hidden: props.orientation !== 'vertical' && !state.mobileActive },
+                { 'md:flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto': !state.mobileActive },
+                { 'flex flex-col bg-white absolute w-full left-0 z-10 top-full': state.mobileActive }
+            )
+        }),
+        menuitem: ({ props, context }) => ({
+            className: classNames(
+                'transition-shadow duration-200',
+                { 'rounded-md': props.orientation == 'horizontal' },
+                {
+                    'text-gray-700 dark:text-white/80': !context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.active
+                },
+                {
+                    'w-auto': props.orientation === 'horizontal',
+                    'w-full': props.orientation !== 'horizontal'
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
+                }
+            )
+        }),
+        menuButton: ({ props }) => ({
+            className: classNames(
+                { 'flex md:hidden': props.orientation === 'horizontal' },
+                { hidden: props.orientation === 'vertical' },
+                'no-underline w-8 h-8 items-center justify-center rounded-full transition hover:bg-gray-200 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        }),
+        headerAction: {
+            className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
+        },
+        action: {
+            className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
+        },
+        icon: {
+            className: 'mr-2'
+        },
+        submenuItem: {
+            className: classNames('text-gray-700 hover:bg-gray-200')
+        },
+        submenuIcon: ({ props }) => ({
+            className: classNames({
+                'ml-2': props.orientation === 'horizontal',
+                'ml-auto': props.orientation !== 'horizontal'
+            })
+        }),
+        panel: ({ props }) => ({
+            className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto', 'absolute z-10', {
+                'left-full top-0': props.orientation !== 'horizontal'
+            })
+        }),
+        grid: 'flex',
+        column: 'w-1/2',
+        submenu: {
+            className: classNames('m-0 list-none', 'py-1 w-48')
+        },
+        submenuHeader: {
+            className: classNames('m-0 py-3 px-5 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold rounded-tr-md rounded-tl-md')
+        }
+    },
+    panelmenu: {
+        root: 'w-full md:w-[25rem]',
+        panel: {
+            className: classNames('mb-1')
+        },
+        header: {
+            className: classNames(
+                'outline-none',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-900 rounded-md transition-shadow duration-200',
+                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80' // Focus
+            )
+        },
+        headerAction: {
+            className: classNames('flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold')
+        },
+        headerSubmenuIcon: {
+            className: classNames('mr-2')
+        },
+        headerIcon: {
+            className: classNames('mr-2')
+        },
+        menuContent: {
+            className: classNames('py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md')
+        },
+        menu: {
+            className: classNames('outline-none', 'm-0 p-0 list-none')
+        },
+        menuitem: ({ context }) => ({
+            className: classNames('text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none', {
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
+            })
+        }),
+        action: {
+            className: classNames(
+                'text-gray-700 dark:text-white/80 py-3 px-5 select-none',
+                'flex items-center cursor-pointer no-underline relative overflow-hidden',
+                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80' // Hover
+            )
+        },
+        icon: {
+            className: classNames('mr-2')
+        },
+        submenu: {
+            className: classNames('p-0 pl-4 m-0 list-none')
+        },
+        submenuIcon: {
+            className: classNames('mr-2')
+        },
+        transition: TRANSITIONS.toggleable
+    },
+    steps: {
+        root: 'relative',
+        menu: 'p-0 m-0 list-none flex',
+        menuitem: {
+            className: classNames(
+                'relative flex justify-center flex-1 overflow-hidden',
+                'before:border-t before:border-gray-300 before:dark:border-blue-900/40 before:w-full before:absolute before:top-1/4 before:left-0 before:transform before:-translate-y-1/2'
+            )
+        },
+        action: {
+            className: classNames(
+                'inline-flex flex-col items-center overflow-hidden',
+                'transition-shadow rounded-md bg-white dark:bg-transparent',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        step: ({ parent, context }) => ({
+            className: classNames('flex items-center justify-center', 'text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 w-[2rem] h-[2rem] leading-2rem text-sm z-10 rounded-full', {
+                'bg-white': parent.state.activeIndex !== context.index, // unselected item.
+                'bg-blue-500': parent.state.activeIndex === context.index // Selected item.
+            })
+        }),
+        label: ({ parent, context }) => ({
+            className: classNames('block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60', {
+                'font-normal': parent.state.activeIndex !== context.index, // unselected item.
+                'font-bold': parent.state.activeIndex === context.index, // Selected item.
+                'text-gray-500/60': context.disabled
+            })
+        })
+    },
+    tabmenu: {
+        root: 'overflow-x-auto',
+        menu: {
+            className: classNames('flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none')
+        },
+        menuitem: 'mr-0',
+        action: ({ context, state }) => ({
+            className: classNames(
+                'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
+                'border-b-2 p-5 font-bold rounded-t-lg ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.activeIndex !== context.index, // Condition-based hover styles.
+                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.activeIndex === context.index // Condition-based active styles.
+                }
+            ),
+            style: { top: '2px' }
+        }),
+        icon: 'mr-2'
+    },
+    slidemenu: {
+        root: {
+            className: classNames('py-1 bg-white border border-gray-300 rounded-lg w-[12.5rem]', 'dark:border-blue-900/40 dark:bg-gray-900')
+        },
+        content: 'relative overflow-x-hidden overflow-y-auto h-full',
+        menu: 'outline-none m-0 p-0 list-none absolute top-0 block',
+        menuitem: ({ context }) => ({
+            className: classNames({
+                relative: !context.active,
+                static: context.active
+            })
+        }),
+        action: ({ context }) => ({
+            className: classNames('py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden', {
+                'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                'text-blue-600 bg-blue-100': context.active
+            })
+        }),
+        previous: ({ state }) => ({
+            className: classNames('py-3 px-5 cursor-pointer bottom-0 w-full text-gray-700 dark:text-white/80', {
+                hidden: state.level === 0
+            })
+        }),
+        icon: 'mr-2',
+        submenuIcon: 'ml-auto',
+        separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
+        submenu: {
+            className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0')
+        },
+        transition: TRANSITIONS.overlay
+    },
+    tieredmenu: {
+        root: {
+            className: classNames('py-1 bg-white border border-gray-300 rounded-lg w-[12.5rem]', 'dark:border-blue-900/40 dark:bg-gray-900')
+        },
+        menu: {
+            className: classNames('outline-none', 'm-0 p-0 list-none')
+        },
+        menuitem: 'relative',
+        content: ({ context }) => ({
+            className: classNames(
+                'transition-shadow duration-200 border-none rounded-none',
+                'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80', //Hover
+                {
+                    'text-gray-700': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                }
+            )
+        }),
+        action: ({ context }) => ({
+            className: classNames('py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden', {
+                'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                'text-blue-600 bg-blue-100': context.active
+            })
+        }),
+        icon: 'mr-2',
+        submenuIcon: 'ml-auto',
+        separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
+        submenu: {
+            className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0')
+        },
+        transition: TRANSITIONS.overlay
+    },
+    metergroup: {
+        root: ({ props }) => ({
+            className: classNames('flex gap-4', { 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' })
+        }),
+        metercontainer: ({ props }) => ({
+            className: classNames('flex', { 'flex-col': props.orientation === 'vertical' }, { 'w-2 h-full': props.orientation === 'vertical' }, { 'h-2': props.orientation === 'horizontal' }, 'bg-gray-200 dark:bg-gray-700', 'rounded-lg')
+        }),
+        meter: ({ props }) => ({
+            className: classNames(
+                'border-0',
+                {
+                    'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
+                },
+                {
+                    'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
+                },
+                'bg-primary-500 dark:bg-primary-400'
+            )
+        }),
+        labellist: ({ props }) => ({
+            className: classNames(
+                'flex flex-wrap',
+                { 'gap-4': props.labelOrientation === 'horizontal' },
+                { 'gap-2': props.labelOrientation === 'vertical' },
+                { 'flex-col': props.labelOrientation === 'vertical' },
+                {
+                    'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
+                    'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
+                },
+                {
+                    'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
+                    'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
+                },
+                'm-0 p-0 list-none'
+            )
+        }),
+        labellistitem: {
+            className: 'inline-flex items-center gap-2'
+        },
+        labellisttype: {
+            className: 'inline-flex bg-primary-500 dark:bg-primary-400 w-2 h-2 rounded-full'
+        }
+    },
+    //MEDIA
+    image: {
+        root: 'relative inline-block',
+        button: {
+            className: classNames(
+                'absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300',
+                'bg-transparent text-gray-100',
+                'hover:opacity-100 hover:cursor-pointer hover:bg-black hover:bg-opacity-50' //Hover
+            )
+        },
+        mask: {
+            className: classNames('fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90')
+        },
+        toolbar: {
+            className: classNames('absolute top-0 right-0 z-10 flex', 'p-4')
+        },
+        rotateRightButton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        rotateRightIcon: 'w-6 h-6',
+        rotateLeftButton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        rotateLeftIcon: 'w-6 h-6',
+        zoomOutButton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        zoomOutIcon: 'w-6 h-6',
+        zoomInButton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        zoomInIcon: 'w-6 h-6',
+        closeButton: {
+            className: classNames(
+                'flex justify-center items-center',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        closeIcon: 'w-6 h-6',
+        transition: {
+            timeout: 150,
+            classNames: {
+                enter: 'opacity-0 scale-75',
+                enterActive: '!opacity-100 !scale-100 transition-all duration-150 ease-in-out',
+                exit: 'opacity-100 scale-100',
+                exitActive: '!opacity-0 !scale-75 transition-all duration-150 ease-in'
+            }
+        }
+    },
+    galleria: {
+        root: 'flex flex-col',
+        content: 'flex flex-col',
+        itemWrapper: 'flex flex-col relative',
+        itemContainer: 'relative flex h-full',
+        item: 'flex justify-center items-center h-full w-full',
+        thumbnailWrapper: 'flex flex-col overflow-auto shrink-0',
+        thumbnailContainer: {
+            className: classNames('flex flex-row', 'bg-black/90 p-4')
+        },
+        previousThumbnailButton: {
+            className: classNames(
+                'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
+                'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        thumbnailItemsContainer: 'overflow-hidden w-full',
+        thumbnailItems: 'flex',
+        thumbnailItem: {
+            className: classNames('overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 grow-0 shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300')
+        },
+        nextThumbnailButton: {
+            className: classNames(
+                'self-center flex shrink-0 justify-center items-center overflow-hidden relative',
+                'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        indicators: {
+            className: classNames('flex items-center justify-center', 'p-4')
+        },
+        indicator: 'mr-2',
+        indicatorbutton: ({ context }) => ({
+            className: classNames('w-4 h-4 transition duration-200 rounded-full', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]', {
+                'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
+                'bg-blue-500 hover:bg-blue-600': context.highlighted
+            })
+        }),
+        mask: ({ state }) => ({
+            className: classNames({ 'fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-90': state.visible })
+        }),
+        closeButton: {
+            className: classNames(
+                'absolute top-0 right-0 flex justify-center items-center overflow-hidden m-2',
+                'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
+                'hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        closeIcon: 'w-6 h-6',
+        previousItemButton: {
+            className: classNames(
+                'inline-flex justify-center items-center overflow-hidden',
+                'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
+                'fixed top-1/2 mt-[-0.5rem]',
+                'left-0',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        nextItemButton: {
+            className: classNames(
+                'inline-flex justify-center items-center overflow-hidden',
+                'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2',
+                'fixed top-1/2 mt-[-0.5rem]',
+                'right-0',
+                'hover:bg-white/10 hover:text-white',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
+            )
+        },
+        caption: {
+            className: classNames('absolute bottom-0 left-0 w-full', 'bg-black/50 text-white p-4')
+        },
+        transition: {
+            timeout: 150,
+            classNames: {
+                enter: 'opacity-0 scale-75',
+                enterActive: '!opacity-100 !scale-100 transition-all duration-150 ease-in-out',
+                exit: 'opacity-100 scale-100',
+                exitActive: '!opacity-0 !scale-75 transition-all duration-150 ease-in'
+            }
+        }
+    },
+    carousel: {
+        root: 'flex flex-col',
+        content: 'flex flex-col overflow-auto',
+        container: ({ props }) => ({
+            className: classNames('flex', {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col': props.orientation == 'vertical'
+            })
+        }),
+        previousButton: {
+            className: classNames('flex justify-center items-center self-center overflow-hidden relative shrink-0 grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2')
+        },
+        itemsContent: 'overflow-hidden w-full',
+        itemsContainer: ({ props }) => ({
+            className: classNames('flex ', {
+                'flex-row': props.orientation !== 'vertical',
+                'flex-col h-full': props.orientation == 'vertical'
+            })
+        }),
+        item: ({ props }) => ({
+            className: classNames('flex shrink-0 grow', {
+                'w-1/3': props.orientation !== 'vertical',
+                'w-full': props.orientation == 'vertical'
+            })
+        }),
+        indicators: {
+            className: classNames('flex flex-row justify-center flex-wrap')
+        },
+        indicator: 'mr-2 mb-2',
+        indicatorButton: ({ context }) => ({
+            className: classNames('w-8 h-2 transition duration-200 rounded-0', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]', {
+                'bg-blue-500 hover:bg-blue-600': context.active,
+                'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.active
+            })
+        })
+    },
+    tree: {
+        root: ({ props }) => ({
+            className: classNames('max-w-[30rem] md:w-full', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5', {
+                'border border-solid border-gray-300 dark:border-blue-900/40 rounded-md': props.__parentMetadata?.parent.props.__TYPE !== 'TreeSelect'
+            })
+        }),
+        wrapper: 'overflow-auto',
+        container: 'm-0 p-0 list-none overflow-auto',
+        node: 'p-1 outline-none',
+        content: ({ context, props }) => ({
+            className: classNames(
+                'flex items-center',
+                'rounded-lg transition-shadow duration-200 p-2',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'bg-blue-50 text-blue-600': context.selected },
+                { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+            )
+        }),
+        toggler: ({ context }) => ({
+            className: classNames(
+                'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative shrink-0',
+                'mr-2 w-8 h-8 border-0 bg-transparent rounded-full transition duration-200',
+                'hover:border-transparent focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'text-gray-500 dark:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-800 dark:hover:text-white/80': !context.selected,
+                    'text-blue-600 hover:bg-white/30': context.selected
+                },
+                {
+                    invisible: context.leaf
+                }
+            )
+        }),
+        checkboxContainer: 'mr-2',
+        checkbox: ({ context, props }) => ({
+            className: classNames(
+                'cursor-pointer inline-flex relative select-none align-bottom',
+                'w-6 h-6',
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200 text-white text-base dark:text-gray-900',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            )
+        }),
+        nodeIcon: 'mr-2 text-gray-600 dark:text-white/70',
+        subgroup: {
+            className: classNames('m-0 list-none', 'p-0 pl-4')
+        },
+        filterContainer: {
+            className: classNames('mb-2', 'relative block w-full')
+        },
+        input: {
+            className: classNames(
+                'm-0 p-3 text-base w-full pr-7',
+                'font-sans text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            )
+        },
+        searchIcon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
+    },
+    // DATA
+    timeline: {
+        root: ({ props }) => ({
+            className: classNames('flex grow', {
+                'flex-col': props.layout === 'vertical',
+                'flex-row flex-1': props.layout === 'horizontal'
+            })
+        }),
+        event: ({ props, context }) => ({
+            className: classNames('flex relative min-h-[70px]', {
+                'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+                'flex-col flex-1': props.layout === 'horizontal',
+                'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+            })
+        }),
+        opposite: ({ props, context }) => ({
+            className: classNames(
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                }
+            )
+        }),
+        separator: ({ props }) => ({
+            className: classNames('flex items-center flex-initial', {
+                'flex-col': props.layout === 'vertical',
+                'flex-row': props.layout === 'horizontal'
+            })
+        }),
+        marker: 'flex self-baseline w-4 h-4 rounded-full border-2 border-blue-500 bg-white dark:border-blue-300 dark:bg-blue-900/40',
+        connector: ({ props }) => ({
+            className: classNames('grow bg-gray-300 dark:bg-blue-900/40', {
+                'w-[2px]': props.layout === 'vertical',
+                'w-full h-[2px]': props.layout === 'horizontal'
+            })
+        }),
+        content: ({ props, context }) => ({
+            className: classNames(
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                },
+                {
+                    'min-h-0': props.layout === 'vertical' && context.index === context.count,
+                    'grow-0': props.layout === 'horizontal' && context.index === context.count
+                }
+            )
+        })
+    },
+    dataview: {
+        content: {
+            className: classNames(
+                'bg-white blue-gray-700 border-0 p-0',
+                'dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            )
+        },
+        grid: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900',
+        header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
+    },
+    dataviewlayoutoptions: {
+        listButton: ({ props }) => ({
+            className: classNames(
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-r-none',
+                props.layout === 'list' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
+            )
+        }),
+        gridButton: ({ props }) => ({
+            className: classNames(
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-l-none',
+                props.layout === 'grid' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
+            )
+        })
+    },
+    datascroller: {
+        content: {
+            className: classNames(
+                'bg-white blue-gray-700 border-0 p-0',
+                'dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            )
+        },
+        grid: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900',
+        header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
+    },
+    organizationchart: {
+        table: 'mx-auto my-0 border-spacing-0 border-separate',
+        cell: 'text-center align-top py-0 px-3',
+        node: {
+            className: classNames(
+                'relative inline-block bg-white border border-gray-300 text-gray-600 p-5',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            )
+        },
+        lineCell: 'text-center align-top py-0 px-3',
+        lineDown: {
+            className: classNames(
+                'mx-auto my-0 w-px h-[20px] bg-gray-300',
+                'dark:bg-blue-900/40' //Dark Mode
+            )
+        },
+        lineLeft: ({ context }) => ({
+            className: classNames(
+                'text-center align-top py-0 px-3 rounded-none border-r border-gray-300',
+                'dark:border-blue-900/40', //Dark Mode
+                {
+                    'border-t': context.lineTop
+                }
+            )
+        }),
+        lineRight: ({ context }) => ({
+            className: classNames(
+                'text-center align-top py-0 px-3 rounded-none',
+                'dark:border-blue-900/40', //Dark Mode
+                {
+                    'border-t border-gray-300': context.lineTop
+                }
+            )
+        }),
+        nodeCell: 'text-center align-top py-0 px-3',
+        nodeToggler: {
+            className: classNames(
+                'absolute bottom-[-0.75rem] left-2/4 -ml-3 w-6 h-6 bg-inherit text-inherit rounded-full z-2 cursor-pointer no-underline select-none',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus styles
+            )
+        },
+        nodeTogglerIcon: 'relative inline-block w-4 h-4'
+    },
+    orderlist: {
+        root: 'flex',
+        controls: 'flex flex-col justify-center p-5',
+        moveUpButton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2 w-12', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+            label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        moveTopButton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+            label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        moveDownButton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+            label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        moveBottomButton: {
+            root: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                )
+            }),
+            label: () => ({ className: classNames('flex-initial w-0') })
+        },
+        container: 'flex-auto',
+        header: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            )
+        },
+        list: {
+            className: classNames(
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            )
+        },
+        item: ({ context }) => ({
+            className: classNames('relative cursor-pointer overflow-hidden', 'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80', 'transition duration-200', {
+                'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.selected
+            })
+        })
+    },
+    picklist: {
+        root: 'flex flex-col xl:flex-row',
+        controls: 'flex flex-row xl:flex-col justify-center p-5',
+        moveUpButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveTopButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveDownButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveBottomButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        listWrapper: 'grow shrink basis-2/4',
+        header: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            )
+        },
+        list: {
+            className: classNames(
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            )
+        },
+        item: ({ context }) => ({
+            className: classNames('relative cursor-pointer overflow-hidden', 'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80', 'transition duration-200', {
+                'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.selected,
+                'text-gray-600 dark:bg-blue-900/40': !context.selected
+            })
+        }),
+        buttons: 'flex flex-row xl:flex-col justify-center p-5',
+        moveToTargetButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveAllToTargetButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveToSourceButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        moveAllToSourceButton: {
+            root: {
+                className: classNames(
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mr-2 xl:mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
+                )
+            },
+            label: 'flex-initial w-0'
+        },
+        targetcontrols: 'flex flex-col justify-center p-5',
+        targetwrapper: 'grow shrink basis-2/4',
+        targetheader: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            )
+        },
+        targetlist: {
+            className: classNames(
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            )
+        },
+        transition: {
+            timeout: 0,
+            classNames: {
+                enter: '!transition-none',
+                enterActive: '!transition-none',
+                exit: '!transition-none',
+                exitActive: '!transition-none'
+            }
+        }
+    },
+    paginator: {
+        root: {
+            className: classNames(
+                'flex items-center justify-center flex-wrap',
+                'bg-white text-gray-500 border-0 px-4 py-2 rounded-md',
+                'dark:bg-gray-900 dark:text-white/60 dark:border-blue-900/40' // Dark Mode
+            )
+        },
+        firstPageButton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500  min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        prevPageButton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        nextPageButton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        lastPageButton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            )
+        }),
+        pageButton: ({ context }) => ({
+            className: classNames(
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:border-blue-300 dark:text-white', // Dark Mode
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                {
+                    'bg-blue-50 border-blue-50 text-blue-700 dark:bg-blue-300': context.active
+                }
+            )
+        }),
+        RPPDropdown: {
+            root: ({ props, state }) => ({
+                className: classNames(
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                )
+            }),
+            input: {
+                className: classNames(
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                )
+            },
+            trigger: {
+                className: classNames('flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md')
+            },
+            panel: {
+                className: classNames(
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                )
+            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
+            item: ({ context }) => ({
+                className: classNames(
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                )
+            })
+        },
+        JTPInput: {
+            root: 'inline-flex mx-2',
+            input: {
+                className: classNames(
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border border-gray-300 pr-0',
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] focus:border-blue-300',
+                    'dark:text-white dark:bg-gray-950 dark:border-blue-900/40', //Dark Mode
+                    'm-0 flex-auto max-w-[3rem]'
+                )
+            }
+        },
+        jumptopagedropdown: {
+            root: ({ props, state }) => ({
+                className: classNames(
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                )
+            }),
+            input: {
+                className: classNames(
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                )
+            },
+            trigger: {
+                className: classNames('flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md')
+            },
+            panel: {
+                className: classNames(
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                )
+            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
+            item: ({ context }) => ({
+                className: classNames(
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                )
+            })
+        }
+    },
+    treetable: {
+        root: ({ props }) => ({
+            className: classNames('relative', {
+                'flex flex-col h-full': props.scrollHeight
+            })
+        }),
+        loadingOverlay: {
+            className: classNames(
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            )
+        },
+        loadingIcon: 'w-8 h-8',
+        header: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            )
+        },
+        scrollableWrapper: ({ props }) => ({
+            className: classNames({
+                'relative overflow-auto': props.scrollable,
+                'overflow-x-auto': props.resizableColumns
+            })
+        }),
+        wrapper: ({ props }) => ({
+            className: classNames({
+                'relative overflow-auto': props.scrollable,
+                'overflow-x-auto': props.resizableColumns
+            })
+        }),
+        footer: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            )
+        },
+        table: 'border-collapse table-fixed w-full',
+        thead: ({ props }) => ({
+            className: classNames({
+                'block sticky top-0 z-[1]': props.scrollable
+            })
+        }),
+        tbody: ({ props }) => ({
+            className: classNames({
+                block: props.scrollable
+            })
+        }),
+        tfoot: ({ props }) => ({
+            className: classNames({
+                block: props.scrollable
+            })
+        }),
+        headerRow: ({ props }) => ({
+            className: classNames({
+                'flex flex-nowrap w-full': props.scrollable
+            })
+        }),
+        row: ({ context }) => ({
+            className: classNames(
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80' : 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+                {
+                    'hover:bg-gray-300/20 hover:text-gray-600 dark:hover:bg-gray-950': context.selectable && !context.selected, // Hover
+                    'flex flex-nowrap w-full': context.scrollable
+                }
+            )
+        }),
+        column: {
+            headerCell: ({ context }) => ({
+                className: classNames(
+                    'text-left border-gray-300 border font-bold',
+                    'transition duration-200 p-4',
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', //Dark Mode
+                    {
+                        'bg-blue-50 text-blue-700': context.sorted,
+                        'bg-slate-50': !context.sorted,
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && !context.frozen,
+                        'sticky z-[1]': context.scrollable && context.frozen,
+                        'border-x-0 border-l-0 border-t-0': !context.showGridlines,
+                        'overflow-hidden relative bg-clip-padding': !context.frozen
+                    }
+                )
+            }),
+            bodyCell: ({ context }) => ({
+                className: classNames(
+                    'text-left border-gray-300 border',
+                    'transition duration-200 p-4',
+                    'dark:border-blue-900/40', //Dark Mode
+                    {
+                        'cursor-pointer': context.selectable,
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && !context.frozen,
+                        sticky: context.scrollable && context.frozen,
+                        'border-x-0 border-l-0': !context.showGridlines
+                    }
+                )
+            }),
+            rowToggler: ({ context }) => ({
+                className: classNames(
+                    'relative inline-flex items-center justify-center align-center cursor-pointer select-none overflow-hidden bg-transparent',
+                    'w-8 h-8 border-0 rounded mr-0.5',
+                    {
+                        'text-blue-700': context.selected,
+                        'text-gray-500': !context.selected
+                    },
+                    'dark:text-white/70' //Dark Mode
+                )
+            }),
+            sort: {
+                className: 'inline-block align-middle'
+            },
+            sortIcon: ({ context }) => ({
+                className: classNames('ml-2 inline-block align-middle', {
+                    'text-blue-700 dark:text-white/80': context.sorted,
+                    'text-slate-700 dark:text-white/70': !context.sorted
+                })
+            }),
+            sortBadge: {
+                className: classNames(
+                    'h-[1.143rem] min-w-[1.143rem] leading-[1.143rem] text-blue-700 bg-blue-50 ml-2 rounded-[50%]',
+                    'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
+                )
+            },
+            columnResizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            checkboxWrapper: {
+                className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2')
+            },
+            checkbox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    {
+                        'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked,
+                        'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked
+                    },
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled
+                    }
+                )
+            }),
+            checkboxIcon: ({ context }) => ({
+                className: classNames('w-4 h-4 transition-all duration-200 text-base dark:text-gray-900', {
+                    'text-white': context.checked
+                })
+            })
+        },
+        resizeHelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+    },
+    datatable: {
+        root: ({ props }) => ({
+            className: classNames('relative', {
+                'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex'
+            })
+        }),
+        loadingOverlay: {
+            className: classNames(
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            )
+        },
+        loadingIcon: 'w-8 h-8',
+        wrapper: ({ props }) => ({
+            className: classNames({
+                relative: props.scrollable,
+                'flex flex-col grow h-full': props.scrollable && props.scrollHeight === 'flex'
+            })
+        }),
+        header: ({ props }) => ({
+            className: classNames(
+                'bg-slate-50 text-slate-700 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0'
+            )
+        }),
+        table: 'w-full border-spacing-0',
+        thead: ({ context }) => ({
+            className: classNames({
+                'bg-slate-50 top-0 z-[1]': context.scrollable
+            })
+        }),
+        tbody: ({ props, context }) => ({
+            className: classNames({
+                'sticky z-[1]': props.frozenRow && context.scrollable
+            })
+        }),
+        tfoot: ({ context }) => ({
+            className: classNames({
+                'bg-slate-50 bottom-0 z-[1]': context.scrollable
+            })
+        }),
+        footer: {
+            className: classNames(
+                'bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+            )
+        },
+        column: {
+            headerCell: ({ context, props }) => ({
+                className: classNames(
+                    'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
+                    context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'sticky z-[1]': props && (props.frozen || props.frozen === ''), // Frozen Columns
+                        'border-x border-y': context?.showGridlines,
+                        'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
+                    }
+                )
+            }),
+            headerContent: 'flex items-center',
+            bodyCell: ({ props, context }) => ({
+                className: classNames(
+                    'text-left border-0 border-b border-solid border-gray-300',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'sticky bg-inherit': props && (props.frozen || props.frozen === ''), // Frozen Columns
+                        'border-x border-y': context.showGridlines
+                    }
+                )
+            }),
+            footerCell: ({ context }) => ({
+                className: classNames(
+                    'text-left border-0 border-b border-solid border-gray-300 font-bold',
+                    'bg-slate-50 text-slate-700',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'border-x border-y': context.showGridlines
+                    }
+                )
+            }),
+            sortIcon: ({ context }) => ({
+                className: classNames('ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70')
+            }),
+            sortBadge: {
+                className: classNames(
+                    'flex items-center justify-center align-middle',
+                    'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2',
+                    'text-blue-700 bg-blue-50',
+                    'dark:text-white/80 dark:bg-blue-400' // Dark Mode
+                )
+            },
+            columnFilter: 'inline-flex items-center ml-auto',
+            filterOverlay: {
+                className: classNames(
+                    'bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //Dark Mode
+                )
+            },
+            filterMatchModeDropdown: {
+                root: 'min-[0px]:flex mb-2'
+            },
+            filterRowItems: 'm-0 p-0 py-3 list-none ',
+            filterRowItem: ({ context }) => ({
+                className: classNames(
+                    'm-0 py-3 px-5 bg-transparent',
+                    'transition duration-200',
+                    context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent'
+                )
+            }),
+            filterOperator: {
+                className: classNames(
+                    'px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md',
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+                )
+            },
+            filterOperatorDropdown: {
+                root: 'min-[0px]:flex'
+            },
+            filterConstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
+            filterAddRule: 'py-3 px-5',
+            filterAddRuleButton: {
+                root: 'justify-center w-full min-[0px]:text-sm',
+                label: 'flex-auto grow-0',
+                icon: 'mr-2'
+            },
+            filterRemoveButton: {
+                root: 'ml-2',
+                label: 'grow-0'
+            },
+            filterButtonbar: 'flex items-center justify-between p-5',
+            filterClearButton: {
+                root: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
+            },
+            filterApplyButton: {
+                root: 'w-auto min-[0px]:text-sm px-4 py-3'
+            },
+            filterMenuButton: ({ context }) => ({
+                className: classNames(
+                    'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2',
+                    'w-8 h-8 rounded-[50%]',
+                    'transition duration-200',
+                    'hover:text-slate-700 hover:bg-gray-300/20', // Hover
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                    'dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'bg-blue-50 text-blue-700': context.active
+                    }
+                )
+            }),
+            headerFilterClearButton: ({ context }) => ({
+                className: classNames('inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative', 'text-left bg-transparent m-0 p-0 border-none select-none ml-2', {
+                    invisible: !context.hidden
+                })
+            }),
+            columnResizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            rowreordericon: 'cursor-move',
+            rowEditorInitButton: {
+                className: classNames(
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                )
+            },
+            rowEditorSaveButton: {
+                className: classNames(
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                )
+            },
+            rowEditorCancelButton: {
+                className: classNames(
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                )
+            },
+            radioButton: {
+                className: classNames('relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6')
+            },
+            radioButtonInput: {
+                className: classNames('w-full h-full top-0 left-0 absolute appearance-none select-none', 'p-0 m-0 opacity-0 z-[1] rounded-[50%] outline-none', 'cursor-pointer peer')
+            },
+            radioButtonBox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'h-6 w-6 rounded-full border-2 text-gray-700 transition duration-200 ease-in-out',
+                    context.checked
+                        ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400 peer-hover:bg-blue-700 peer-hover:border-blue-700'
+                        : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 peer-hover:border-blue-500',
+                    {
+                        'hover:border-blue-500 focus:shadow-input-focus focus:outline-none focus:outline-offset-0 dark:hover:border-blue-400 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                )
+            }),
+            radioButtonIcon: ({ context }) => ({
+                className: classNames('transform rounded-full', 'block h-3 w-3 bg-white transition duration-200 dark:bg-gray-900', {
+                    'backface-hidden scale-10 invisible': context.checked === false,
+                    'visible scale-100 transform': context.checked === true
+                })
+            }),
+            headercheckboxwrapper: {
+                className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+            },
+            headerCheckbox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                )
+            }),
+            headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
+            checkboxwrapper: {
+                className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
+            },
+            checkbox: ({ context }) => ({
+                className: classNames(
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                )
+            }),
+            checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
+            transition: TRANSITIONS.overlay
+        },
+        bodyRow: ({ context }) => ({
+            className: classNames(
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
+                context.stripedRows ? (context.index % 2 === 0 ? 'bg-white text-gray-600 dark:bg-gray-900' : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950') : '',
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                'dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]', // Dark Mode
+                {
+                    'cursor-pointer': context.selectable,
+                    'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected // Hover
+                }
+            )
+        }),
+        rowExpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+        rowGroupHeader: {
+            className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
+        },
+        rowgroupFooter: {
+            className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
+        },
+        rowgrouptoggler: {
+            className: classNames(
+                'text-left m-0 p-0 cursor-pointer select-none',
+                'inline-flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]',
+                'transition duration-200',
+                'dark:text-white/70' // Dark Mode
+            )
+        },
+        rowgrouptogglericon: 'inline-block w-4 h-4',
+        resizeHelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+    },
+    // CHART
+    chart: {
+        root: 'relative'
+    }
+};
+
+export default Tailwind;
diff --git a/components/lib/passthrough/tailwind/package.json b/components/lib/passthrough/tailwind/package.json
new file mode 100644
index 0000000000..6f42b31859
--- /dev/null
+++ b/components/lib/passthrough/tailwind/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
\ No newline at end of file
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
new file mode 100644
index 0000000000..b002ba1ca0
--- /dev/null
+++ b/components/lib/password/Password.js
@@ -0,0 +1,508 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { IconField } from '../iconfield/IconField';
+import { EyeIcon } from '../icons/eye';
+import { EyeSlashIcon } from '../icons/eyeslash';
+import { InputIcon } from '../inputicon/InputIcon';
+import { InputText } from '../inputtext/InputText';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { PasswordBase } from './PasswordBase';
+
+export const Password = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = PasswordBase.getProps(inProps, context);
+
+        const promptLabel = props.promptLabel || localeOption('passwordPrompt');
+        const weakLabel = props.weakLabel || localeOption('weak');
+        const mediumLabel = props.mediumLabel || localeOption('medium');
+        const strongLabel = props.strongLabel || localeOption('strong');
+
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const [meterState, setMeterState] = React.useState(null);
+        const [infoTextState, setInfoTextState] = React.useState(promptLabel);
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [unmaskedState, setUnmaskedState] = React.useState(false);
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+        const mediumCheckRegExp = React.useRef(new RegExp(props.mediumRegex));
+        const strongCheckRegExp = React.useRef(new RegExp(props.strongRegex));
+        const type = unmaskedState ? 'text' : 'password';
+        const metaData = {
+            props,
+            state: {
+                overlayVisible: overlayVisibleState,
+                meter: meterState,
+                infoText: infoTextState,
+                focused: focusedState,
+                unmasked: unmaskedState
+            }
+        };
+        const { ptm, cx, isUnstyled } = PasswordBase.setMetaData(metaData);
+
+        useHandleStyle(PasswordBase.css.styles, isUnstyled, { name: 'password' });
+
+        const passwordDisplayOrder = useDisplayOrder('password', overlayVisibleState);
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: overlayVisibleState && props.feedback && passwordDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.PASSWORD, passwordDisplayOrder]
+        });
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { valid, type }) => {
+                if (valid) {
+                    if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const currentValue = inputRef.current && inputRef.current.value;
+        const isFilled = React.useMemo(() => ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || ObjectUtils.isNotEmpty(currentValue), [props.value, props.defaultValue, currentValue]);
+
+        const updateLabels = () => {
+            if (meterState) {
+                let label = null;
+
+                switch (meterState.strength) {
+                    case 'weak':
+                        label = weakLabel;
+                        break;
+
+                    case 'medium':
+                        label = mediumLabel;
+                        break;
+
+                    case 'strong':
+                        label = strongLabel;
+                        break;
+
+                    default:
+                        break;
+                }
+
+                if (label && infoTextState !== label) {
+                    setInfoTextState(label);
+                }
+            } else if (infoTextState !== promptLabel) {
+                setInfoTextState(promptLabel);
+            }
+        };
+
+        const updateFeedback = (value) => {
+            if (!props.feedback) {
+                return false;
+            }
+
+            let label = null;
+            let meter = null;
+
+            switch (testStrength(value)) {
+                case 1:
+                    label = weakLabel;
+                    meter = {
+                        strength: 'weak',
+                        width: '33.33%'
+                    };
+                    break;
+
+                case 2:
+                    label = mediumLabel;
+                    meter = {
+                        strength: 'medium',
+                        width: '66.66%'
+                    };
+                    break;
+
+                case 3:
+                    label = strongLabel;
+                    meter = {
+                        strength: 'strong',
+                        width: '100%'
+                    };
+                    break;
+
+                default:
+                    label = promptLabel;
+                    meter = null;
+                    break;
+            }
+
+            setMeterState(meter);
+            setInfoTextState(label);
+
+            return true;
+        };
+
+        const onPanelClick = (event) => {
+            if (props.feedback) {
+                OverlayService.emit('overlay-click', {
+                    originalEvent: event,
+                    target: elementRef.current
+                });
+            }
+        };
+
+        const toggleMask = () => {
+            setUnmaskedState((prevUnmasked) => !prevUnmasked);
+        };
+
+        const show = () => {
+            updateLabels();
+            setOverlayVisibleState(true);
+        };
+
+        const hide = () => {
+            setOverlayVisibleState(false);
+        };
+
+        const alignOverlay = () => {
+            if (inputRef.current) {
+                DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+            }
+        };
+
+        const onOverlayEnter = () => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            alignOverlay();
+        };
+
+        const onOverlayEntered = () => {
+            bindOverlayListener();
+
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const onFocus = (event) => {
+            setFocusedState(true);
+
+            if (props.feedback) {
+                show();
+            }
+
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocusedState(false);
+
+            if (props.feedback) {
+                hide();
+            }
+
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onKeyup = (e) => {
+            const keyCode = e.code;
+
+            if (props.feedback) {
+                if (!!keyCode && keyCode !== 'Escape' && !overlayVisibleState) {
+                    show();
+                }
+            }
+
+            props.onKeyUp && props.onKeyUp(e);
+        };
+
+        const onInput = (event, validatePattern) => {
+            if (props.onInput) {
+                props.onInput(event, validatePattern);
+            }
+
+            if (!props.onChange) {
+                ObjectUtils.isNotEmpty(event.target.value) ? DomHandler.addClass(elementRef.current, 'p-inputwrapper-filled') : DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
+            }
+        };
+
+        const testStrength = (str) => {
+            if (!str || str.length === 0) {
+                return 0;
+            }
+
+            if (strongCheckRegExp.current.test(str)) {
+                return 3;
+            } else if (mediumCheckRegExp.current.test(str)) {
+                return 2;
+            } else if (str.length > 0) {
+                return 1;
+            }
+
+            return 0;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            toggleMask,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getOverlay: () => overlayRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        React.useEffect(() => {
+            mediumCheckRegExp.current = new RegExp(props.mediumRegex);
+        }, [props.mediumRegex]);
+
+        React.useEffect(() => {
+            strongCheckRegExp.current = new RegExp(props.strongRegex);
+        }, [props.strongRegex]);
+
+        React.useEffect(() => {
+            if (!isFilled && DomHandler.hasClass(elementRef.current, 'p-inputwrapper-filled')) {
+                DomHandler.removeClass(elementRef.current, 'p-inputwrapper-filled');
+            }
+        }, [isFilled]);
+
+        useUpdateEffect(() => {
+            updateFeedback(props.value);
+        }, [props.value]);
+
+        useMountEffect(() => {
+            alignOverlay();
+        });
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        const onToggleMaskKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                toggleMask();
+                event.preventDefault();
+            }
+        };
+
+        const createIcon = () => {
+            if (!props.toggleMask) {
+                return null;
+            }
+
+            let icon;
+
+            const hideIconProps = mergeProps(
+                {
+                    role: 'switch',
+                    tabIndex: props.tabIndex || '0',
+                    className: cx('hideIcon'),
+                    onClick: toggleMask,
+                    onKeyDown: onToggleMaskKeyDown,
+                    'aria-label': ariaLabel('passwordHide') || 'Hide Password',
+                    'aria-checked': 'false'
+                },
+                ptm('hideIcon')
+            );
+
+            const showIconProps = mergeProps(
+                {
+                    role: 'switch',
+                    tabIndex: props.tabIndex || '0',
+                    className: cx('showIcon'),
+                    onClick: toggleMask,
+                    onKeyDown: onToggleMaskKeyDown,
+                    'aria-label': ariaLabel('passwordShow') || 'Show Password',
+                    'aria-checked': 'true'
+                },
+                ptm('showIcon')
+            );
+
+            if (unmaskedState) {
+                icon = props.hideIcon || <EyeSlashIcon {...hideIconProps} />;
+            } else {
+                icon = props.showIcon || <EyeIcon {...showIconProps} />;
+            }
+
+            const eyeIcon = IconUtils.getJSXIcon(icon, unmaskedState ? { ...hideIconProps } : { ...showIconProps }, { props });
+
+            let content = eyeIcon;
+
+            if (props.icon) {
+                const defaultIconOptions = {
+                    onClick: toggleMask,
+                    className,
+                    element: content,
+                    props
+                };
+
+                content = ObjectUtils.getJSXElement(props.icon, defaultIconOptions);
+            }
+
+            return content;
+        };
+
+        const createPanel = () => {
+            const { strength, width } = meterState || { strength: '', width: '0%' };
+            const header = ObjectUtils.getJSXElement(props.header, props);
+            const footer = ObjectUtils.getJSXElement(props.footer, props);
+            const panelProps = mergeProps(
+                {
+                    className: cx('panel', { context }),
+                    style: props.panelStyle,
+                    onClick: onPanelClick
+                },
+                ptm('panel')
+            );
+
+            const meterProps = mergeProps(
+                {
+                    className: cx('meter')
+                },
+                ptm('meter')
+            );
+            const meterLabelProps = mergeProps(
+                {
+                    className: cx('meterLabel', { strength }),
+                    style: { width }
+                },
+                ptm('meterLabel')
+            );
+            const infoProps = mergeProps(
+                {
+                    className: cx('info', { strength })
+                },
+                ptm('info')
+            );
+
+            const content = props.content ? (
+                ObjectUtils.getJSXElement(props.content, props)
+            ) : (
+                <>
+                    <div {...meterProps}>
+                        <div {...meterLabelProps} />
+                    </div>
+                    <div {...infoProps}>{infoTextState}</div>
+                </>
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: overlayVisibleState,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter: onOverlayEnter,
+                    onEntered: onOverlayEntered,
+                    onExit: onOverlayExit,
+                    onExited: onOverlayExited
+                },
+                ptm('transition')
+            );
+
+            const panel = (
+                <CSSTransition nodeRef={overlayRef} {...transitionProps}>
+                    <div ref={overlayRef} {...panelProps}>
+                        {header}
+                        {content}
+                        {footer}
+                    </div>
+                </CSSTransition>
+            );
+
+            return <Portal element={panel} appendTo={props.appendTo} />;
+        };
+
+        const className = classNames(
+            'p-password p-component p-inputwrapper',
+            {
+                'p-inputwrapper-filled': isFilled,
+                'p-inputwrapper-focus': focusedState,
+                'p-input-icon-right': props.toggleMask
+            },
+            props.className
+        );
+
+        const inputProps = PasswordBase.getOtherProps(props);
+        const icon = createIcon();
+        const panel = createPanel();
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root', { isFilled, focusedState })),
+                style: props.style
+            },
+            ptm('root')
+        );
+
+        const inputTextProps = mergeProps(
+            {
+                ref: inputRef,
+                id: props.inputId,
+                ...inputProps,
+                className: classNames(props.inputClassName, cx('input')),
+                onBlur: onBlur,
+                onFocus: onFocus,
+                onInput: onInput,
+                onKeyUp: onKeyup,
+                invalid: props.invalid,
+                variant: props.variant,
+                style: props.inputStyle,
+                unstyled: props.unstyled,
+                tabIndex: props.tabIndex || '0',
+                tooltip: props.tooltip,
+                tooltipOptions: props.tooltipOptions,
+                type: type,
+                value: props.value,
+                __parentMetadata: {
+                    parent: metaData
+                }
+            },
+            ptm('input')
+        );
+
+        let input = <InputText {...inputTextProps} />;
+
+        if (icon) {
+            input = (
+                <IconField className={cx('iconField')} pt={ptm('iconField')} __parentMetadata={{ parent: metaData }}>
+                    {input}
+                    <InputIcon className={cx('inputIcon')} pt={ptm('inputIcon')} __parentMetadata={{ parent: metaData }}>
+                        {icon}
+                    </InputIcon>
+                </IconField>
+            );
+        }
+
+        return (
+            <div {...rootProps}>
+                {input}
+                {panel}
+            </div>
+        );
+    })
+);
+
+Password.displayName = 'Password';
diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js
new file mode 100644
index 0000000000..e1b3b197b0
--- /dev/null
+++ b/components/lib/password/PasswordBase.js
@@ -0,0 +1,113 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, isFilled, focusedState }) =>
+        classNames('p-password p-component p-inputwrapper', {
+            'p-inputwrapper-filled': isFilled,
+            'p-inputwrapper-focus': focusedState,
+            'p-input-icon-right': props.toggleMask
+        }),
+    input: ({ props }) => classNames('p-password-input', props.inputClassName),
+    panel: ({ props, context }) =>
+        classNames('p-password-panel p-component', props.panelClassName, {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    meter: 'p-password-meter',
+    meterLabel: ({ strength }) => classNames('p-password-strength', strength),
+    info: ({ strength }) => classNames('p-password-info', strength),
+    showIcon: 'p-password-show-icon',
+    hideIcon: 'p-password-hide-icon',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-password {
+        position: relative;
+        display: inline-flex;
+    }
+    
+    .p-password-panel {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    
+    .p-password .p-password-panel {
+        min-width: 100%;
+    }
+    
+    .p-password-meter {
+        height: 10px;
+    }
+    
+    .p-password-strength {
+        height: 100%;
+        width: 0%;
+        transition: width 1s ease-in-out;
+    }
+    
+    .p-fluid .p-password {
+        display: flex;
+    }
+    
+    .p-password-input::-ms-reveal,
+    .p-password-input::-ms-clear {
+        display: none;
+    }
+
+    .p-password .p-password-show-icon,
+    .p-password .p-password-hide-icon {
+        line-height: 1.5;
+        cursor: pointer;
+    }
+}
+`;
+
+export const PasswordBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Password',
+        id: null,
+        inputId: null,
+        inputRef: null,
+        promptLabel: null,
+        weakLabel: null,
+        mediumLabel: null,
+        strongLabel: null,
+        mediumRegex: '^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})',
+        strongRegex: '^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
+        feedback: true,
+        toggleMask: false,
+        appendTo: null,
+        header: null,
+        content: null,
+        footer: null,
+        showIcon: null,
+        hideIcon: null,
+        icon: null,
+        tooltip: null,
+        tooltipOptions: null,
+        style: null,
+        className: null,
+        inputStyle: null,
+        inputClassName: null,
+        invalid: false,
+        variant: null,
+        panelStyle: null,
+        panelClassName: null,
+        transitionOptions: null,
+        tabIndex: null,
+        value: undefined,
+        onInput: null,
+        onShow: null,
+        onHide: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/password/package.json b/components/lib/password/package.json
new file mode 100644
index 0000000000..823f2c4f06
--- /dev/null
+++ b/components/lib/password/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./password.cjs.js",
+    "module": "./password.esm.js",
+    "unpkg": "./password.min.js",
+    "types": "./password.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/password/password.d.ts b/components/lib/password/password.d.ts
new file mode 100644
index 0000000000..414b1053cc
--- /dev/null
+++ b/components/lib/password/password.d.ts
@@ -0,0 +1,344 @@
+/**
+ *
+ * Password displays strength indicator for password fields.
+ *
+ * [Live Demo](https://www.primereact.org/password/)
+ *
+ * @module password
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { InputText } from '../inputtext';
+import { KeyFilterType } from '../keyfilter/keyfilteroptions';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type PasswordPassThroughType<T> = PassThroughType<T, PasswordPassThroughMethodOptions>;
+export declare type PasswordPassThroughTransitionType = ReactCSSTransitionProps | ((options: PasswordPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PasswordPassThroughMethodOptions {
+    props: PasswordProps;
+    state: PasswordState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PasswordProps.pt}
+ */
+export interface PasswordPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the InputText component.
+     * @see {@link InputTextPassThroughType}
+     */
+    input?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hide icon's DOM element.
+     */
+    hideIcon?: PasswordPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the show icon's DOM element.
+     */
+    showIcon?: PasswordPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the meter's DOM element.
+     */
+    meter?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the meter label's DOM element.
+     */
+    meterLabel?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the info's DOM element.
+     */
+    info?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: PasswordPassThroughTransitionType;
+    /**
+     * Uses to pass attributes to the IconField component
+     */
+    iconField?: PasswordPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines current inline state in Password component.
+ */
+export interface PasswordState {
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @see {@link PasswordMeterStateOptions}
+     */
+    meter: PasswordMeterStateOptions;
+    /**
+     * Current info test state as a string.
+     */
+    infoText: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current unmasked state as a boolean.
+     * @defaultValue false
+     */
+    unmasked: boolean;
+}
+
+export interface PasswordMeterStateOptions {
+    /**
+     * Current strength of the meter state as a string.
+     */
+    strength: string;
+    /**
+     * Current width of the meter state as a string.
+     */
+    width: string;
+}
+
+/**
+ * Custom icon event
+ * @see {@link PasswordProps.icon}
+ * @event
+ */
+interface PasswordIconEvent {
+    /**
+     * Click event for the default element.
+     */
+    onClick(): void;
+    /**
+     * Style class of the default element.
+     */
+    className: string;
+    /**
+     * Default element created by the component.
+     */
+    element: JSX.Element;
+    /**
+     * All component props.
+     */
+    props: PasswordProps;
+}
+
+/**
+ * Defines valid properties in Password component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput' | 'ref' | 'content' | 'pt'> {
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClassName?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * Hide icon template.
+     */
+    hideIcon?: IconType<PasswordProps> | undefined;
+    /**
+     * Show icon template.
+     */
+    showIcon?: IconType<PasswordProps> | undefined;
+    /**
+     * Text to prompt password entry.
+     * @defaultValue Please enter a password
+     */
+    promptLabel?: string | undefined;
+    /**
+     * Text for a weak password.
+     * @defaultValue Weak
+     */
+    weakLabel?: string | undefined;
+    /**
+     * Text for a medium password.
+     * @defaultValue Medium
+     */
+    mediumLabel?: string | undefined;
+    /**
+     * Text for a strong password.
+     * @defaultValue Strong
+     */
+    strongLabel?: string | undefined;
+    /**
+     * Regex for a medium level password.
+     * @defaultValue ^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.&#123;6,&#125;).
+     */
+    mediumRegex?: string | undefined;
+    /**
+     * Regex for a strong level password.
+     * @defaultValue ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.&#123;8,&#125;)
+     */
+    strongRegex?: string | undefined;
+    /**
+     * Whether to show the strength indicator or not.
+     * @defaultValue true
+     */
+    feedback?: boolean | undefined;
+    /**
+     * Whether to show an icon to display the password as plain text.
+     * @defaultValue false
+     */
+    toggleMask?: boolean | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Template of panel header if "feedback" is enabled.
+     */
+    header?: React.ReactNode | ((props: PasswordProps) => React.ReactNode);
+    /**
+     * Template of panel content if "feedback" is enabled.
+     */
+    content?: React.ReactNode | ((props: PasswordProps) => React.ReactNode);
+    /**
+     * Template of panel footer if "feedback" is enabled.
+     */
+    footer?: React.ReactNode | ((props: PasswordProps) => React.ReactNode);
+    /**
+     * Template of mask icon if "toggleMask" is enabled.
+     */
+    icon?: React.ReactNode | ((event: PasswordIconEvent) => React.ReactNode);
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Format definition of the keys to block.
+     */
+    keyfilter?: KeyFilterType | undefined;
+    /**
+     * Inline style of the overlay panel element.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the overlay panel element.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke on input event of input field.
+     * @param {React.FormEvent<HTMLInputElement>} event - Browser event
+     * @param {boolean} validatePattern - Whether to validate the value
+     */
+    onInput?(event: React.FormEvent<HTMLInputElement>, validatePattern: boolean): void;
+    /**
+     * Callback to invoke when overlay becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when overlay becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PasswordPassThroughOptions}
+     */
+    pt?: PasswordPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Password**
+ *
+ * _Password displays strength indicator for password fields._
+ *
+ * [Live Demo](https://www.primereact.org/password/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Password extends React.Component<PasswordProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Toggle the mask on or off.
+     */
+    public toggleMask(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): typeof InputText | null;
+    /**
+     * Used to get overlay element.
+     * @return {HTMLElement | null} Overlay element
+     */
+    public getOverlay(): HTMLElement | null;
+}
diff --git a/components/lib/picklist/PickList.js b/components/lib/picklist/PickList.js
new file mode 100644
index 0000000000..f6f2d4b7f7
--- /dev/null
+++ b/components/lib/picklist/PickList.js
@@ -0,0 +1,762 @@
+import * as React from 'react';
+import PrimeReact, { FilterService, PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { PickListBase } from './PickListBase';
+import { PickListControls } from './PickListControls';
+import { PickListSubList } from './PickListSubList';
+import { PickListTransferControls } from './PickListTransferControls';
+
+export const PickList = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = PickListBase.getProps(inProps, context);
+
+        const [sourceSelectionState, setSourceSelectionState] = React.useState([]);
+        const [targetSelectionState, setTargetSelectionState] = React.useState([]);
+        const [sourceFilterValueState, setSourceFilterValueState] = React.useState('');
+        const [targetFilterValueState, setTargetFilterValueState] = React.useState('');
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(props.id);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+        const [focusedOptionId, setFocusedOptionId] = React.useState(null);
+        const [focused, setFocused] = React.useState({ source: false, target: false });
+
+        const metaData = {
+            props,
+            state: {
+                sourceSelection: sourceSelectionState,
+                targetSelection: targetSelectionState,
+                sourceFilterValue: sourceFilterValueState,
+                targetFilterValue: targetFilterValueState,
+                attributeSelector: attributeSelectorState
+            }
+        };
+        const { ptm, cx, isUnstyled } = PickListBase.setMetaData(metaData);
+
+        useHandleStyle(PickListBase.css.styles, isUnstyled, { name: 'picklist' });
+        const elementRef = React.useRef(null);
+        const sourceListElementRef = React.useRef(null);
+        const targetListElementRef = React.useRef(null);
+        const reorderedListElementRef = React.useRef(null);
+        const reorderDirection = React.useRef(null);
+        const styleElementRef = React.useRef(null);
+        const sourceSelection = props.sourceSelection ? props.sourceSelection : sourceSelectionState;
+        const targetSelection = props.targetSelection ? props.targetSelection : targetSelectionState;
+        const sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
+        const targetFilteredValue = props.onTargetFilterChange ? props.targetFilterValue : targetFilterValueState;
+        const hasFilterBy = ObjectUtils.isNotEmpty(props.filterBy);
+        const showSourceFilter = hasFilterBy && props.showSourceFilter;
+        const showTargetFilter = hasFilterBy && props.showTargetFilter;
+
+        const onSourceReorder = (event) => {
+            handleChange(event, event.value, props.target);
+            reorderedListElementRef.current = getListElement('source');
+            reorderDirection.current = event.direction;
+        };
+
+        const onTargetReorder = (event) => {
+            handleChange(event, props.source, event.value);
+            reorderedListElementRef.current = getListElement('target');
+            reorderDirection.current = event.direction;
+        };
+
+        const handleScrollPosition = (listElement, direction) => {
+            if (listElement) {
+                switch (direction) {
+                    case 'up':
+                        scrollInView(listElement, -1);
+                        break;
+
+                    case 'top':
+                        listElement.scrollTop = 0;
+                        break;
+
+                    case 'down':
+                        scrollInView(listElement, 1);
+                        break;
+
+                    case 'bottom':
+                        /* TODO: improve this code block */
+                        setTimeout(() => (listElement.scrollTop = listElement.scrollHeight), 100);
+                        break;
+
+                    default:
+                        break;
+                }
+            }
+        };
+
+        const handleChange = (event, source, target) => {
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event.originalEvent,
+                    source,
+                    target
+                });
+            }
+        };
+
+        const onTransfer = (event) => {
+            const { originalEvent, source, target, direction } = event;
+
+            let selectedValue = [];
+
+            switch (direction) {
+                case 'toTarget':
+                    selectedValue = sourceSelection;
+
+                    if (props.onMoveToTarget) {
+                        props.onMoveToTarget({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
+
+                    break;
+
+                case 'allToTarget':
+                    selectedValue = props.source;
+
+                    if (props.onMoveAllToTarget) {
+                        props.onMoveAllToTarget({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
+
+                    selectedValue = [];
+
+                    break;
+
+                case 'toSource':
+                    selectedValue = targetSelection;
+
+                    if (props.onMoveToSource) {
+                        props.onMoveToSource({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
+
+                    break;
+
+                case 'allToSource':
+                    selectedValue = props.target;
+
+                    if (props.onMoveAllToSource) {
+                        props.onMoveAllToSource({
+                            originalEvent,
+                            value: selectedValue
+                        });
+                    }
+
+                    selectedValue = [];
+                    break;
+
+                default:
+                    break;
+            }
+
+            onSelectionChange({ originalEvent, value: selectedValue }, 'sourceSelection', props.onSourceSelectionChange);
+            onSelectionChange({ originalEvent, value: selectedValue }, 'targetSelection', props.onTargetSelectionChange);
+
+            setTargetSelectionState([]);
+            setSourceSelectionState([]);
+
+            handleChange(event, source, target);
+        };
+
+        const scrollInView = (listContainer, direction = 1) => {
+            let selectedItems = listContainer.getElementsByClassName('p-highlight');
+
+            if (ObjectUtils.isNotEmpty(selectedItems)) {
+                DomHandler.scrollInView(listContainer, direction === -1 ? selectedItems[0] : selectedItems[selectedItems.length - 1]);
+            }
+        };
+
+        const onSelectionChange = (e, stateKey, callback) => {
+            if (stateKey === 'sourceSelection') {
+                setSourceSelectionState(e.value);
+            } else {
+                setTargetSelectionState(e.value);
+            }
+
+            if (callback) {
+                callback(e);
+            }
+        };
+
+        const onFilter = (event) => {
+            const { originalEvent, value, type } = event;
+            const [setFilterState, onFilterChange] = type === 'source' ? [setSourceFilterValueState, props.onSourceFilterChange] : [setTargetFilterValueState, props.onTargetFilterChange];
+
+            if (onFilterChange) {
+                onFilterChange({ originalEvent, value });
+            } else {
+                setFilterState(value);
+            }
+        };
+
+        const filterSource = (value = '') => {
+            const filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
+
+            return filter(props.source, filteredValue);
+        };
+
+        const filterTarget = (value = '') => {
+            const filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
+
+            return filter(props.target, filteredValue);
+        };
+
+        const filter = (list, filterValue) => {
+            const searchFields = hasFilterBy ? props.filterBy.split(',') : [];
+
+            return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+        };
+
+        const getVisibleList = (list, type) => {
+            const [filteredValue, filterCallback] = type === 'source' ? [sourceFilteredValue, filterSource] : [targetFilteredValue, filterTarget];
+
+            return hasFilterBy && ObjectUtils.isNotEmpty(filteredValue) ? filterCallback(filteredValue) : list;
+        };
+
+        const sourceList = getVisibleList(props.source, 'source');
+        const targetList = getVisibleList(props.target, 'target');
+
+        const findCurrentFocusedIndex = (listElement) => {
+            if (focusedOptionIndex === -1) {
+                const itemList = listElement && listElement.children ? [...listElement.children] : [];
+                let selectedOptionIndex = findFirstSelectedOptionIndex(listElement, itemList);
+
+                if (props.autoOptionFocus && selectedOptionIndex === -1) {
+                    selectedOptionIndex = findFirstFocusedOptionIndex(listElement, itemList);
+                }
+
+                return selectedOptionIndex;
+            }
+
+            return -1;
+        };
+
+        const findFirstSelectedOptionIndex = (listElement, itemList) => {
+            if (sourceSelectionState.length || targetSelectionState.length) {
+                const selectedFirstItem = DomHandler.findSingle(listElement, '[data-p-highlight="true"]');
+
+                return ObjectUtils.findIndexInList(selectedFirstItem, itemList);
+            }
+
+            return -1;
+        };
+
+        const findFirstFocusedOptionIndex = (listElement, itemList) => {
+            const firstFocusableItem = DomHandler.findSingle(listElement, '[data-pc-section="item"]');
+
+            return ObjectUtils.findIndexInList(firstFocusableItem, itemList);
+        };
+
+        const onListFocus = (event, type) => {
+            setFocused({ ...focused, [type]: true });
+
+            const listElement = getListElement(type);
+            const currentFocusedIndex = findCurrentFocusedIndex(listElement);
+
+            changeFocusedOptionIndex(currentFocusedIndex, type);
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onListBlur = (event, type) => {
+            setFocused({ ...focused, [type]: false });
+            setFocusedOptionIndex(-1);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onItemClick = (event, type, arrowKeyClick = false) => {
+            let originalEvent = event.originalEvent;
+            let item = event.value;
+            let selectedId = event.id;
+            let isSource = type === 'source';
+            let selection = [...(isSource ? sourceSelection : targetSelection)];
+            let index = ObjectUtils.findIndexInList(item, selection, props.dataKey);
+            let selected = index !== -1;
+            let metaSelection = props.metaKeySelection;
+
+            if (!arrowKeyClick) {
+                setFocusedOptionIndex(selectedId);
+            }
+
+            if (metaSelection) {
+                const metaKey = originalEvent.metaKey || originalEvent.ctrlKey || originalEvent.shiftKey;
+
+                if (selected && metaKey) {
+                    selection.splice(index, 1);
+                } else {
+                    if (!metaKey) {
+                        selection.length = 0;
+                    }
+
+                    selection.push(item);
+                }
+            } else if (selected) {
+                selection.splice(index, 1);
+            } else {
+                selection.push(item);
+            }
+
+            if (isSource) {
+                onSelectionChange({ originalEvent: originalEvent, value: selection }, 'sourceSelection', props.onSourceSelectionChange);
+            } else {
+                onSelectionChange({ originalEvent: originalEvent, value: selection }, 'targetSelection', props.onTargetSelectionChange);
+            }
+        };
+
+        const onOptionMouseDown = ({ index, type }) => {
+            setFocused({ ...focused, [type]: true });
+            setFocusedOptionIndex(index);
+        };
+
+        const onListKeyDown = (event, type) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event, type);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event, type);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event, type);
+                    break;
+
+                case 'End':
+                    onEndKey(event, type);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event, type);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event, type);
+                    break;
+
+                case 'KeyA':
+                    if (event.ctrlKey) {
+                        const isSource = type === 'source';
+
+                        if (isSource) {
+                            setSourceSelectionState([...sourceList]);
+                        } else {
+                            setTargetSelectionState([...targetList]);
+                        }
+
+                        onSelectionChange({ originalEvent: event, value: isSource ? [...sourceList] : [...targetList] }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
+                        event.preventDefault();
+                    }
+
+                    break;
+                case 'KeyD':
+                    if (event.ctrlKey) {
+                        const isSource = type === 'source';
+
+                        if (isSource) {
+                            setSourceSelectionState([]);
+                        } else {
+                            setTargetSelectionState([]);
+                        }
+
+                        onSelectionChange({ originalEvent: event, value: [] }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
+                        event.preventDefault();
+                    }
+
+                    break;
+                default:
+                    break;
+            }
+        };
+
+        const onArrowDownKey = (event, type) => {
+            const optionIndex = findNextOptionIndex(focusedOptionIndex, type);
+            const visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
+
+            changeFocusedOptionIndex(optionIndex, type);
+
+            if (visibleList && visibleList.length > 0 && event.shiftKey) {
+                onItemClick({ originalEvent: event, value: visibleList[optionIndex] }, type, true);
+            }
+
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event, type) => {
+            const optionIndex = findPrevOptionIndex(focusedOptionIndex, type);
+            const visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
+
+            changeFocusedOptionIndex(optionIndex, type);
+
+            if (visibleList && visibleList.length > 0 && event.shiftKey) {
+                onItemClick({ originalEvent: event, value: visibleList[optionIndex] }, type, true);
+            }
+
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event, type) => {
+            const listElement = getListElement(type);
+            const visibleList = getVisibleList(type === 'source' ? props.source : props.target, type);
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+            const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+            const id = focusedItem && focusedItem.getAttribute('id');
+            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+            if (visibleList && visibleList.length > 0) {
+                onItemClick({ originalEvent: event, value: visibleList[matchedOptionIndex], id }, type);
+            }
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event, type) => {
+            event.preventDefault();
+
+            const isSource = type === 'source';
+            const selection = isSource ? sourceSelectionState : targetSelectionState;
+
+            if (event.shiftKey && selection && selection.length > 0) {
+                const listItems = isSource ? sourceList : targetList;
+                const listElement = getListElement(type);
+                const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+                const selectedItemIndex = ObjectUtils.findIndexInList(selection[0], [...listItems]);
+                const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+
+                const rangeSelection = [...listItems].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
+
+                if (isSource) {
+                    onSelectionChange({ originalEvent: event, value: rangeSelection }, 'sourceSelection', props.onSourceSelectionChange);
+                } else {
+                    onSelectionChange({ originalEvent: event, value: rangeSelection }, 'targetSelection', props.onTargetSelectionChange);
+                }
+            } else {
+                onEnterKey(event, type);
+            }
+        };
+
+        const onHomeKey = (event, type) => {
+            if (event.ctrlKey && event.shiftKey) {
+                const isSource = type === 'source';
+                const listItems = isSource ? sourceList : targetList;
+                const listElement = getListElement(type);
+                const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+                const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+                const selection = [...listItems].slice(0, matchedOptionIndex + 1);
+
+                if (isSource) {
+                    onSelectionChange({ originalEvent: event, value: selection }, 'sourceSelection', props.onSourceSelectionChange);
+                } else {
+                    onSelectionChange({ originalEvent: event, value: selection }, 'targetSelection', props.onTargetSelectionChange);
+                }
+            } else {
+                changeFocusedOptionIndex(0, type);
+            }
+
+            event.preventDefault();
+        };
+
+        const onEndKey = (event, type) => {
+            const listElement = getListElement(type);
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+
+            if (event.ctrlKey && event.shiftKey) {
+                const isSource = type === 'source';
+                const listItems = isSource ? sourceList : targetList;
+                const focusedItem = DomHandler.findSingle(listElement, `[data-pc-section="item"][id=${focusedOptionIndex}]`);
+                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+                const selection = [...listItems].slice(matchedOptionIndex, items.length);
+
+                if (isSource) {
+                    onSelectionChange({ originalEvent: event, value: selection }, 'sourceSelection', props.onSourceSelectionChange);
+                } else {
+                    onSelectionChange({ originalEvent: event, value: selection }, 'targetSelection', props.onTargetSelectionChange);
+                }
+            } else {
+                changeFocusedOptionIndex(items.length - 1, type);
+            }
+
+            event.preventDefault();
+        };
+
+        const findNextOptionIndex = (index, type) => {
+            const listElement = getListElement(type);
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+
+            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        };
+
+        const findPrevOptionIndex = (index, type) => {
+            const listElement = getListElement(type);
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        };
+
+        const changeFocusedOptionIndex = (index, type) => {
+            const listElement = getListElement(type);
+
+            const items = DomHandler.find(listElement, '[data-pc-section="item"]');
+
+            let order;
+
+            if (index >= items.length) {
+                order = items.length - 1;
+            } else if (index < 0) {
+                return;
+            } else {
+                order = index;
+            }
+
+            setFocusedOptionIndex(items[order].getAttribute('id'));
+            scrollInViewWithFocus(items[order].getAttribute('id'), type);
+        };
+
+        const scrollInViewWithFocus = (id, type) => {
+            const listElement = getListElement(type);
+            const element = DomHandler.findSingle(listElement, `[data-pc-section="item"][id="${id}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        };
+
+        const getListElement = (type) => {
+            return type === 'source' ? sourceListElementRef.current.getElement() : targetListElementRef.current.getElement();
+        };
+
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+                let innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    .p-picklist[${attributeSelectorState}] {
+        flex-direction: column;
+    }
+
+    .p-picklist[${attributeSelectorState}] .p-picklist-buttons {
+        padding: var(--content-padding);
+        flex-direction: row;
+    }
+
+    .p-picklist[${attributeSelectorState}] .p-picklist-buttons .p-button {
+        margin-right: var(--inline-spacing);
+        margin-bottom: 0;
+    }
+
+    .p-picklist[${attributeSelectorState}] .p-picklist-buttons .p-button:last-child {
+        margin-right: 0;
+    }
+}
+`;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        useUpdateEffect(() => {
+            if (attributeSelectorState) {
+                elementRef.current.setAttribute(attributeSelectorState, '');
+                createStyle();
+            }
+
+            return () => {
+                destroyStyle();
+            };
+        }, [attributeSelectorState, props.breakpoint]);
+
+        useUpdateEffect(() => {
+            if (!props.id && !attributeSelectorState) {
+                setAttributeSelectorState(UniqueComponentId());
+            }
+
+            if (reorderedListElementRef.current) {
+                handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
+                reorderedListElementRef.current = null;
+                reorderDirection.current = null;
+            }
+        });
+
+        useUpdateEffect(() => {
+            let _focusedOptionId = focusedOptionIndex !== -1 ? focusedOptionIndex : null;
+
+            setFocusedOptionId(_focusedOptionId);
+        }, [focusedOptionIndex]);
+
+        const sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
+        const targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
+
+        const rootProps = mergeProps(
+            {
+                id: attributeSelectorState,
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            PickListBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {props.showSourceControls && (
+                    <PickListControls
+                        hostName="PickList"
+                        list={props.source}
+                        selection={sourceSelection}
+                        onReorder={onSourceReorder}
+                        className={cx('sourceControls')}
+                        dataKey={props.dataKey}
+                        moveUpIcon={props.moveUpIcon}
+                        moveTopIcon={props.moveTopIcon}
+                        moveDownIcon={props.moveDownIcon}
+                        moveBottomIcon={props.moveBottomIcon}
+                        ptm={ptm}
+                        cx={cx}
+                        unstyled={props.unstyled}
+                        metaData={metaData}
+                    />
+                )}
+
+                <PickListSubList
+                    hostName="PickList"
+                    ref={sourceListElementRef}
+                    type="source"
+                    list={sourceList}
+                    parentId={attributeSelectorState}
+                    selection={sourceSelection}
+                    onSelectionChange={(e) => onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange)}
+                    onListKeyDown={(e) => onListKeyDown(e, 'source')}
+                    onListFocus={(e) => onListFocus(e, 'source')}
+                    onListBlur={(e) => onListBlur(e, 'source')}
+                    onOptionMouseDown={(index) => onOptionMouseDown(index, 'source')}
+                    onItemClick={(e) => onItemClick(e, 'source')}
+                    focusedOptionId={focused.source ? focusedOptionId : null}
+                    ariaActivedescendant={focused.source ? focusedOptionId : null}
+                    itemTemplate={sourceItemTemplate}
+                    header={props.sourceHeader}
+                    style={props.sourceStyle}
+                    className={cx('listSourceWrapper')}
+                    listClassName={cx('listSource')}
+                    metaKeySelection={props.metaKeySelection}
+                    tabIndex={props.tabIndex}
+                    dataKey={props.dataKey}
+                    filterValue={sourceFilteredValue}
+                    onFilter={onFilter}
+                    showFilter={showSourceFilter}
+                    placeholder={props.sourceFilterPlaceholder}
+                    filterTemplate={props.sourceFilterTemplate}
+                    sourceFilterIcon={props.sourceFilterIcon}
+                    ptm={ptm}
+                    cx={cx}
+                    focusedList={focused}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    focusOnHover={props.focusOnHover}
+                />
+
+                <PickListTransferControls
+                    hostName="PickList"
+                    onTransfer={onTransfer}
+                    source={props.source}
+                    visibleSourceList={sourceList}
+                    target={props.target}
+                    breakpoint={props.breakpoint}
+                    visibleTargetList={targetList}
+                    sourceSelection={sourceSelection}
+                    targetSelection={targetSelection}
+                    dataKey={props.dataKey}
+                    moveToTargetIcon={props.moveToTargetIcon}
+                    moveAllToTargetIcon={props.moveAllToTargetIcon}
+                    moveToSourceIcon={props.moveToSourceIcon}
+                    moveAllToSourceIcon={props.moveAllToSourceIcon}
+                    ptm={ptm}
+                    cx={cx}
+                    unstyled={props.unstyled}
+                    metaData={metaData}
+                />
+
+                <PickListSubList
+                    hostName="PickList"
+                    ref={targetListElementRef}
+                    type="target"
+                    list={targetList}
+                    selection={targetSelection}
+                    parentId={attributeSelectorState}
+                    onSelectionChange={(e) => onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange)}
+                    onListKeyDown={(e) => onListKeyDown(e, 'target')}
+                    onListFocus={(e) => onListFocus(e, 'target')}
+                    onListBlur={(e) => onListBlur(e, 'target')}
+                    onOptionMouseDown={(index) => onOptionMouseDown(index, 'target')}
+                    onItemClick={(e) => onItemClick(e, 'target')}
+                    focusedOptionId={focused.target ? focusedOptionId : null}
+                    ariaActivedescendant={focused.target ? focusedOptionId : null}
+                    itemTemplate={targetItemTemplate}
+                    header={props.targetHeader}
+                    style={props.targetStyle}
+                    className={cx('listTargetWrapper')}
+                    listClassName={cx('listWrapper')}
+                    metaKeySelection={props.metaKeySelection}
+                    tabIndex={props.tabIndex}
+                    dataKey={props.dataKey}
+                    filterValue={targetFilteredValue}
+                    onFilter={onFilter}
+                    showFilter={showTargetFilter}
+                    placeholder={props.targetFilterPlaceholder}
+                    filterTemplate={props.targetFilterTemplate}
+                    targetFilterIcon={props.targetFilterIcon}
+                    ptm={ptm}
+                    cx={cx}
+                    focusedList={focused}
+                    changeFocusedOptionIndex={changeFocusedOptionIndex}
+                    focusOnHover={props.focusOnHover}
+                />
+
+                {props.showTargetControls && (
+                    <PickListControls
+                        hostName="PickList"
+                        list={props.target}
+                        selection={targetSelection}
+                        onReorder={onTargetReorder}
+                        className={cx('targetControls')}
+                        dataKey={props.dataKey}
+                        moveUpIcon={props.moveUpIcon}
+                        moveTopIcon={props.moveTopIcon}
+                        moveDownIcon={props.moveDownIcon}
+                        moveBottomIcon={props.moveBottomIcon}
+                        ptm={ptm}
+                        cx={cx}
+                        unstyled={props.unstyled}
+                        metaData={metaData}
+                    />
+                )}
+            </div>
+        );
+    })
+);
+
+PickList.displayName = 'PickList';
diff --git a/components/lib/picklist/PickListBase.js b/components/lib/picklist/PickListBase.js
new file mode 100644
index 0000000000..c0cd0d6b30
--- /dev/null
+++ b/components/lib/picklist/PickListBase.js
@@ -0,0 +1,142 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: 'p-picklist p-component',
+    buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
+    header: 'p-picklist-header',
+    filterIcon: 'p-picklist-filter-icon',
+    filter: 'p-picklist-filter',
+    filterInput: 'p-picklist-filter-input p-inputtext p-component',
+    filterContainer: 'p-picklist-filter-container',
+    list: 'p-picklist-list',
+    listWrapper: 'p-picklist-list-wrapper',
+    listSourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
+    listTargetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
+    listSource: 'p-picklist-list p-picklist-source',
+    listTarget: 'p-picklist-list p-picklist-target',
+    item: ({ selected, focused }) =>
+        classNames('p-picklist-item', {
+            'p-highlight': selected,
+            'p-focus': focused
+        }),
+    sourceControls: 'p-picklist-source-controls p-picklist-buttons',
+    targetControls: 'p-picklist-target-controls p-picklist-buttons'
+};
+
+const styles = `
+@layer primereact {
+    .p-picklist {
+        display: flex;
+    }
+
+    .p-picklist-buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .p-picklist-list-wrapper {
+        flex: 1 1 50%;
+    }
+
+    .p-picklist-list {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: auto;
+        min-height: 12rem;
+        max-height: 24rem;
+    }
+
+    .p-picklist-item {
+        cursor: pointer;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-picklist-item .p-ink {
+        pointer-events: none;
+    }
+
+    .p-picklist-filter {
+        position: relative;
+    }
+
+    .p-picklist-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+
+    .p-picklist-filter-input {
+        width: 100%;
+    }
+}
+`;
+
+export const PickListBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'PickList',
+        id: null,
+        source: null,
+        target: null,
+        sourceHeader: null,
+        targetHeader: null,
+        style: null,
+        className: null,
+        sourceStyle: null,
+        targetStyle: null,
+        sourceSelection: null,
+        targetSelection: null,
+        showSourceControls: true,
+        showTargetControls: true,
+        metaKeySelection: false,
+        onFocus: null,
+        onBlur: null,
+        filter: false,
+        filterBy: null,
+        filterMatchMode: 'contains',
+        targetFilterIcon: null,
+        sourceFilterIcon: null,
+        moveAllToSourceIcon: null,
+        moveToSourceIcon: null,
+        moveAllToTargetIcon: null,
+        moveToTargetIcon: null,
+        moveBottomIcon: null,
+        moveUpIcon: null,
+        moveTopIcon: null,
+        moveDownIcon: null,
+        filterLocale: undefined,
+        sourceFilterValue: null,
+        targetFilterValue: null,
+        showSourceFilter: true,
+        showTargetFilter: true,
+        sourceFilterPlaceholder: null,
+        targetFilterPlaceholder: null,
+        sourceFilterTemplate: null,
+        targetFilterTemplate: null,
+        tabIndex: 0,
+        dataKey: null,
+        autoOptionFocus: true,
+        focusOnHover: true,
+        breakpoint: '960px',
+        itemTemplate: null,
+        sourceItemTemplate: null,
+        targetItemTemplate: null,
+        onChange: null,
+        onMoveToSource: null,
+        onMoveAllToSource: null,
+        onMoveToTarget: null,
+        onMoveAllToTarget: null,
+        onSourceSelectionChange: null,
+        onTargetSelectionChange: null,
+        onSourceFilterChange: null,
+        onTargetFilterChange: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/picklist/PickListControls.js b/components/lib/picklist/PickListControls.js
new file mode 100644
index 0000000000..a31845a66b
--- /dev/null
+++ b/components/lib/picklist/PickListControls.js
@@ -0,0 +1,159 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { Button } from '../button/Button';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleDoubleDownIcon } from '../icons/angledoubledown';
+import { AngleDoubleUpIcon } from '../icons/angledoubleup';
+import { AngleDownIcon } from '../icons/angledown';
+import { AngleUpIcon } from '../icons/angleup';
+import { classNames, ObjectUtils } from '../utils/Utils';
+
+export const PickListControls = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, cx, unstyled } = props;
+
+    const moveUpIcon = props.moveUpIcon || <AngleUpIcon />;
+    const moveTopIcon = props.moveTopIcon || <AngleDoubleUpIcon />;
+    const moveDownIcon = props.moveDownIcon || <AngleDownIcon />;
+    const moveBottomIcon = props.moveBottomIcon || <AngleDoubleDownIcon />;
+
+    const moveDisabled = !props.selection || !props.selection.length;
+
+    const moveUp = (event) => {
+        const selectedItems = props.selection;
+
+        if (selectedItems && selectedItems.length) {
+            let list = [...props.list];
+
+            for (let i = 0; i < selectedItems.length; i++) {
+                const selectedItem = selectedItems[i];
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
+
+                if (selectedItemIndex !== 0) {
+                    const movedItem = list[selectedItemIndex];
+                    const temp = list[selectedItemIndex - 1];
+
+                    list[selectedItemIndex - 1] = movedItem;
+                    list[selectedItemIndex] = temp;
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value: list,
+                    direction: 'up'
+                });
+            }
+        }
+    };
+
+    const moveTop = (event) => {
+        const selectedItems = props.selection;
+
+        if (selectedItems && selectedItems.length) {
+            let list = [...props.list];
+
+            for (let i = 0; i < selectedItems.length; i++) {
+                const selectedItem = selectedItems[i];
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
+
+                if (selectedItemIndex !== 0) {
+                    const movedItem = list.splice(selectedItemIndex, 1)[0];
+
+                    list.unshift(movedItem);
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value: list,
+                    direction: 'top'
+                });
+            }
+        }
+    };
+
+    const moveDown = (event) => {
+        const selectedItems = props.selection;
+
+        if (selectedItems && selectedItems.length) {
+            let list = [...props.list];
+
+            for (let i = selectedItems.length - 1; i >= 0; i--) {
+                const selectedItem = selectedItems[i];
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
+
+                if (selectedItemIndex !== list.length - 1) {
+                    const movedItem = list[selectedItemIndex];
+                    const temp = list[selectedItemIndex + 1];
+
+                    list[selectedItemIndex + 1] = movedItem;
+                    list[selectedItemIndex] = temp;
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value: list,
+                    direction: 'down'
+                });
+            }
+        }
+    };
+
+    const moveBottom = (event) => {
+        const selectedItems = props.selection;
+
+        if (selectedItems && selectedItems.length) {
+            let list = [...props.list];
+
+            for (let i = selectedItems.length - 1; i >= 0; i--) {
+                const selectedItem = selectedItems[i];
+                const selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list, props.dataKey);
+
+                if (selectedItemIndex !== list.length - 1) {
+                    const movedItem = list.splice(selectedItemIndex, 1)[0];
+
+                    list.push(movedItem);
+                } else {
+                    break;
+                }
+            }
+
+            if (props.onReorder) {
+                props.onReorder({
+                    originalEvent: event,
+                    value: list,
+                    direction: 'bottom'
+                });
+            }
+        }
+    };
+
+    const controlsProps = mergeProps(
+        {
+            className: classNames(props.className, cx('controls'))
+        },
+        ptm('controls', { hostName: props.hostName })
+    );
+
+    return (
+        <div {...controlsProps}>
+            <Button disabled={moveDisabled} type="button" icon={moveUpIcon} onClick={moveUp} pt={ptm('moveUpButton')} unstyled={unstyled} aria-label={ariaLabel('moveUp')} __parentMetadata={{ parent: props.metaData }} />
+            <Button disabled={moveDisabled} type="button" icon={moveTopIcon} onClick={moveTop} pt={ptm('moveTopButton')} unstyled={unstyled} aria-label={ariaLabel('moveTop')} __parentMetadata={{ parent: props.metaData }} />
+            <Button disabled={moveDisabled} type="button" icon={moveDownIcon} onClick={moveDown} pt={ptm('moveDownButton')} unstyled={unstyled} aria-label={ariaLabel('moveDown')} __parentMetadata={{ parent: props.metaData }} />
+            <Button disabled={moveDisabled} type="button" icon={moveBottomIcon} onClick={moveBottom} pt={ptm('moveBottomButton')} unstyled={unstyled} aria-label={ariaLabel('moveBottom')} __parentMetadata={{ parent: props.metaData }} />
+        </div>
+    );
+});
+
+PickListControls.displayName = 'PickListControls';
diff --git a/components/lib/picklist/PickListItem.js b/components/lib/picklist/PickListItem.js
new file mode 100644
index 0000000000..fa70279c0f
--- /dev/null
+++ b/components/lib/picklist/PickListItem.js
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { classNames } from '../utils/Utils';
+
+export const PickListItem = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                selected: props.selected
+            }
+        });
+    };
+
+    const onClick = (event) => {
+        if (props.onClick) {
+            props.onClick({
+                originalEvent: event,
+                value: props.value,
+                id: props.id
+            });
+        }
+    };
+
+    const onKeyDown = (event) => {
+        if (props.onKeyDown) {
+            props.onKeyDown({
+                originalEvent: event,
+                value: props.value
+            });
+        }
+    };
+
+    const onMouseDown = (event) => {
+        if (props.onMouseDown) {
+            props.onMouseDown(event);
+        }
+    };
+
+    const onFocus = (event) => {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+    };
+
+    const content = props.template ? props.template(props.value) : props.value;
+
+    const itemProps = mergeProps(
+        {
+            className: classNames(props.className, cx('item', { selected: props.selected, focused: props.focused })),
+            id: props.id,
+            onClick,
+            onKeyDown,
+            onFocus,
+            onMouseDown,
+            onMouseMove: props.onMouseMove,
+            role: 'option',
+            'aria-selected': props.selected,
+            'data-p-highlight': props.selected,
+            'data-p-focused': props.focused
+        },
+        getPTOptions('item')
+    );
+
+    return (
+        <li {...itemProps}>
+            {content}
+            <Ripple />
+        </li>
+    );
+});
+
+PickListItem.displayName = 'PickListItem';
diff --git a/components/lib/picklist/PickListSubList.js b/components/lib/picklist/PickListSubList.js
new file mode 100644
index 0000000000..fe7b598b3e
--- /dev/null
+++ b/components/lib/picklist/PickListSubList.js
@@ -0,0 +1,209 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { SearchIcon } from '../icons/search';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { PickListItem } from './PickListItem';
+
+export const PickListSubList = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const listElementRef = React.useRef(null);
+        const { ptm, cx } = props;
+
+        const getPTOptions = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const isSelected = (item) => {
+            return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
+        };
+
+        const onFilter = (event) => {
+            if (props.onFilter) {
+                props.onFilter({
+                    originalEvent: event,
+                    value: event.target.value,
+                    type: props.type
+                });
+            }
+        };
+
+        const onFilterInputKeyDown = (event) => {
+            //enter
+            if (event.which === 13) {
+                event.preventDefault();
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            getElement: () => listElementRef.current
+        }));
+
+        const createHeader = () => {
+            const headerProps = mergeProps(
+                {
+                    className: cx('header')
+                },
+                getPTOptions('header')
+            );
+
+            if (props.header) {
+                return <div {...headerProps}>{ObjectUtils.getJSXElement(props.header, props)}</div>;
+            }
+
+            return null;
+        };
+
+        const changeFocusedItemOnHover = (index) => {
+            if (props.focusOnHover && props.focusedList[props.type]) {
+                props?.changeFocusedOptionIndex?.(index, props.type);
+            }
+        };
+
+        const createItems = () => {
+            if (props.list) {
+                return props.list.map((item, index) => {
+                    const key = props.parentId + '_' + props.type + '_' + index;
+                    const selected = isSelected(item);
+
+                    return (
+                        <PickListItem
+                            hostName={props.hostName}
+                            key={key}
+                            id={key}
+                            index={index}
+                            focused={key === props.focusedOptionId}
+                            value={item}
+                            template={props.itemTemplate}
+                            selected={selected}
+                            onClick={props.onItemClick}
+                            onKeyDown={props.onItemKeyDown}
+                            onMouseDown={(event) => props.onOptionMouseDown({ ...event, index, type: props.type })}
+                            onMouseMove={() => changeFocusedItemOnHover(index)}
+                            ptm={ptm}
+                            cx={cx}
+                        />
+                    );
+                });
+            }
+
+            return null;
+        };
+
+        const createFilter = () => {
+            const iconClassName = 'p-picklist-filter-icon';
+            const filterIconProps = mergeProps(
+                {
+                    className: cx('filterIcon')
+                },
+                getPTOptions('filterIcon')
+            );
+            const icon = props.type === 'source' ? props.sourceFilterIcon || <SearchIcon {...filterIconProps} /> : props.targetFilterIcon || <SearchIcon {...filterIconProps} />;
+            const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
+
+            if (props.showFilter) {
+                const filterProps = mergeProps(
+                    {
+                        className: cx('filter')
+                    },
+                    getPTOptions('filter')
+                );
+
+                const filterInputProps = mergeProps(
+                    {
+                        type: 'text',
+                        value: props.filterValue,
+                        onChange: onFilter,
+                        onKeyDown: onFilterInputKeyDown,
+                        placeholder: props.placeholder,
+                        className: cx('filterInput')
+                    },
+                    getPTOptions('filterInput')
+                );
+
+                let content = (
+                    <div {...filterProps}>
+                        <input {...filterInputProps} />
+                        <span> {filterIcon} </span>
+                    </div>
+                );
+
+                if (props.filterTemplate) {
+                    const defaultContentOptions = {
+                        className: 'p-picklist-filter',
+                        inputProps: {
+                            className: 'p-picklist-filter-input p-inputtext p-component',
+                            onChange: onFilter,
+                            onKeyDown: onFilterInputKeyDown
+                        },
+                        iconClassName,
+                        element: content,
+                        props
+                    };
+
+                    content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+                }
+
+                const filterContainerProps = mergeProps(
+                    {
+                        className: cx('filterContainer')
+                    },
+                    getPTOptions('filterContainer')
+                );
+
+                return <div {...filterContainerProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const createList = () => {
+            const items = createItems();
+
+            const listProps = mergeProps(
+                {
+                    ref: listElementRef,
+                    className: classNames(props.listClassName, cx('list')),
+                    role: 'listbox',
+                    id: props.parentId + '_' + props.type + '_list',
+                    'aria-multiselectable': true,
+                    'aria-activedescendant': props.ariaActivedescendant,
+                    tabIndex: props.list && props.list.length > 0 ? props.tabIndex : -1,
+                    onKeyDown: props.onListKeyDown,
+                    onFocus: (event) => {
+                        props.onListFocus(event, props.type);
+                    },
+                    onBlur: props.onListBlur,
+                    style: props.style
+                },
+                getPTOptions('list')
+            );
+
+            return <ul {...listProps}>{items}</ul>;
+        };
+
+        const header = createHeader();
+        const filter = createFilter();
+        const list = createList();
+
+        const listWrapperProps = mergeProps(
+            {
+                className: classNames(props.className, cx('listWrapper'))
+            },
+            getPTOptions('listWrapper')
+        );
+
+        return (
+            <div {...listWrapperProps}>
+                {header}
+                {filter}
+                {list}
+            </div>
+        );
+    })
+);
+
+PickListSubList.displayName = 'PickListSubList';
diff --git a/components/lib/picklist/PickListTransferControls.js b/components/lib/picklist/PickListTransferControls.js
new file mode 100644
index 0000000000..b1e2b5ae7b
--- /dev/null
+++ b/components/lib/picklist/PickListTransferControls.js
@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Locale';
+import { Button } from '../button/Button';
+import { useMatchMedia, useMergeProps } from '../hooks/Hooks';
+import { AngleDoubleDownIcon } from '../icons/angledoubledown';
+import { AngleDoubleLeftIcon } from '../icons/angledoubleleft';
+import { AngleDoubleRightIcon } from '../icons/angledoubleright';
+import { AngleDoubleUpIcon } from '../icons/angledoubleup';
+import { AngleDownIcon } from '../icons/angledown';
+import { AngleLeftIcon } from '../icons/angleleft';
+import { AngleRightIcon } from '../icons/angleright';
+import { AngleUpIcon } from '../icons/angleup';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+
+export const PickListTransferControls = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const viewChanged = useMatchMedia(`(max-width: ${props.breakpoint})`, props.breakpoint);
+    const { ptm, cx, unstyled } = props;
+
+    function getIconComponent(iconType) {
+        switch (iconType) {
+            case 'moveToTargetIcon':
+                return props.moveToTargetIcon || viewChanged ? props.moveToTargetIcon || <AngleDownIcon /> : props.moveToTargetIcon || <AngleRightIcon />;
+            case 'moveAllToTargetIcon':
+                return props.moveAllToTargetIcon || viewChanged ? props.moveAllToTargetIcon || <AngleDoubleDownIcon /> : props.moveAllToTargetIcon || <AngleDoubleRightIcon />;
+            case 'moveToSourceIcon':
+                return props.moveToSourceIcon || viewChanged ? props.moveToSourceIcon || <AngleUpIcon /> : props.moveToSourceIcon || <AngleLeftIcon />;
+            case 'moveAllToSourceIcon':
+                return props.moveAllToSourceIcon || viewChanged ? props.moveAllToSourceIcon || <AngleDoubleUpIcon /> : props.moveAllToSourceIcon || <AngleDoubleLeftIcon />;
+            default:
+                return null;
+        }
+    }
+
+    const moveToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveToTargetIcon'), undefined, { props, viewChanged });
+    const moveAllToTargetIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToTargetIcon'), undefined, { props, viewChanged });
+    const moveToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveToSourceIcon'), undefined, { props, viewChanged });
+    const moveAllToSourceIcon = IconUtils.getJSXIcon(getIconComponent('moveAllToSourceIcon'), undefined, { props, viewChanged });
+
+    const moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection) || ObjectUtils.isEmpty(props.visibleSourceList);
+    const moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection) || ObjectUtils.isEmpty(props.visibleTargetList);
+    const moveAllRightDisabled = ObjectUtils.isEmpty(props.visibleSourceList);
+    const moveAllLeftDisabled = ObjectUtils.isEmpty(props.visibleTargetList);
+
+    const moveRight = (event) => {
+        const selection = props.sourceSelection;
+
+        if (ObjectUtils.isNotEmpty(selection)) {
+            let targetList = [...props.target];
+            let sourceList = [...props.source];
+
+            for (let i = 0; i < selection.length; i++) {
+                const selectedItem = selection[i];
+
+                if (ObjectUtils.findIndexInList(selectedItem, targetList, props.dataKey) === -1) {
+                    targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList, props.dataKey), 1)[0]);
+                }
+            }
+
+            if (props.onTransfer) {
+                props.onTransfer({
+                    originalEvent: event,
+                    source: sourceList,
+                    target: targetList,
+                    direction: 'toTarget'
+                });
+            }
+        }
+    };
+
+    const moveAllRight = (event) => {
+        if (props.source) {
+            let targetList = [...props.target, ...props.visibleSourceList];
+            let sourceList = props.source.filter((s) => !props.visibleSourceList.some((vs) => vs === s));
+
+            if (props.onTransfer) {
+                props.onTransfer({
+                    originalEvent: event,
+                    source: sourceList,
+                    target: targetList,
+                    direction: 'allToTarget'
+                });
+            }
+        }
+    };
+
+    const moveLeft = (event) => {
+        const selection = props.targetSelection;
+
+        if (ObjectUtils.isNotEmpty(selection)) {
+            let targetList = [...props.target];
+            let sourceList = [...props.source];
+
+            for (let i = 0; i < selection.length; i++) {
+                let selectedItem = selection[i];
+
+                if (ObjectUtils.findIndexInList(selectedItem, sourceList, props.dataKey) === -1) {
+                    sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList, props.dataKey), 1)[0]);
+                }
+            }
+
+            if (props.onTransfer) {
+                props.onTransfer({
+                    originalEvent: event,
+                    source: sourceList,
+                    target: targetList,
+                    direction: 'toSource'
+                });
+            }
+        }
+    };
+
+    const moveAllLeft = (event) => {
+        if (props.source) {
+            let sourceList = [...props.source, ...props.visibleTargetList];
+            let targetList = props.target.filter((t) => !props.visibleTargetList.some((vt) => vt === t));
+
+            if (props.onTransfer) {
+                props.onTransfer({
+                    originalEvent: event,
+                    source: sourceList,
+                    target: targetList,
+                    direction: 'allToSource'
+                });
+            }
+        }
+    };
+
+    const buttonsProps = mergeProps(
+        {
+            className: classNames(props.className, cx('buttons'))
+        },
+        ptm('buttons', { hostName: props.hostName })
+    );
+
+    return (
+        <div {...buttonsProps}>
+            <Button disabled={moveRightDisabled} type="button" icon={moveToTargetIcon} onClick={moveRight} pt={ptm('moveToTargetButton')} unstyled={unstyled} aria-label={ariaLabel('moveToTarget')} __parentMetadata={{ parent: props.metaData }} />
+            <Button
+                disabled={moveAllRightDisabled}
+                type="button"
+                icon={moveAllToTargetIcon}
+                onClick={moveAllRight}
+                pt={ptm('moveAllToTargetButton')}
+                unstyled={unstyled}
+                aria-label={ariaLabel('moveAllToTarget')}
+                __parentMetadata={{ parent: props.metaData }}
+            />
+            <Button disabled={moveLeftDisabled} type="button" icon={moveToSourceIcon} onClick={moveLeft} pt={ptm('moveToSourceButton')} unstyled={unstyled} aria-label={ariaLabel('moveToSource')} __parentMetadata={{ parent: props.metaData }} />
+            <Button
+                disabled={moveAllLeftDisabled}
+                type="button"
+                icon={moveAllToSourceIcon}
+                onClick={moveAllLeft}
+                pt={ptm('moveAllToSourceButton')}
+                unstyled={unstyled}
+                aria-label={ariaLabel('moveAllToSource')}
+                __parentMetadata={{ parent: props.metaData }}
+            />
+        </div>
+    );
+});
+
+PickListTransferControls.displayName = 'PickListTransferControls';
diff --git a/components/lib/picklist/package.json b/components/lib/picklist/package.json
new file mode 100644
index 0000000000..f001e94c9d
--- /dev/null
+++ b/components/lib/picklist/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./picklist.cjs.js",
+    "module": "./picklist.esm.js",
+    "unpkg": "./picklist.min.js",
+    "types": "./picklist.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/picklist/picklist.d.ts b/components/lib/picklist/picklist.d.ts
new file mode 100755
index 0000000000..3c50000ce3
--- /dev/null
+++ b/components/lib/picklist/picklist.d.ts
@@ -0,0 +1,523 @@
+/**
+ *
+ * PickList is used to reorder items between different lists.
+ *
+ * [Live Demo](https://www.primereact.org/picklist/)
+ *
+ * @module picklist
+ *
+ */
+import * as React from 'react';
+import { ButtonPassThroughOptions } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type PickListPassThroughType<T> = PassThroughType<T, PickListPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PickListPassThroughMethodOptions {
+    props: PickListProps;
+    state: PickListState;
+    context: PickListContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PickListProps.pt}
+ */
+export interface PickListPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the source controls' DOM element.
+     */
+    controls?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveUpButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveTopButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveDownButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveBottomButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the source wrapper's DOM element.
+     */
+    listWrapper?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the source header's DOM element.
+     */
+    header?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    buttons?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveToTargetButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveAllToTargetButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveToSourceButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    moveAllToSourceButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filterIcon?: PickListPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filter?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filterInput?: PickListPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    filterContainer?: PickListPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    item?: PickListPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the buttons' DOM element.
+     */
+    list?: PickListPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+export interface PickListState {
+    /**
+     * Current source selection state as a [].
+     */
+    sourceSelection: [];
+    /**
+     * Current target selection state as a [].
+     */
+    targetSelection: [];
+    /**
+     * Current source filter state as a string.
+     */
+    sourceFilterValue: string;
+    /**
+     * Current source target filter state as a string.
+     */
+    targetFilterValue: string;
+    /**
+     * Current attribute selector state as a any.
+     */
+    attributeSelector: any;
+}
+
+/**
+ * Defines current options in PickList component.
+ */
+export interface PickListContext {
+    /**
+     * Current selection state of the item as a boolean.
+     */
+    selected: boolean;
+}
+
+/**
+ * Custom picklist event.
+ * @see {@link PickListProps.onMoveToSource},
+ *  {@link PickListProps.onMoveAllToSource},
+ *  {@link PickListProps.onMoveToTarget},
+ *  {@link PickListProps.onMoveAllToTarget},
+ *  {@link PickListProps.onSourceSelectionChange},
+ *  {@link PickListProps.onTargetSelectionChange}
+ *  {@link PickListProps.onSourceFilterChange},
+ *  {@link PickListProps.onTargetFilterChange},
+ * @event
+ */
+interface PickListEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Moved items
+     */
+    value: any;
+}
+
+/**
+ * Custom picklist event.
+ * @see {@link PickListProps.onChange}
+ * @event
+ */
+interface PickListChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Source list
+     */
+    source: any;
+    /**
+     * Target list
+     */
+    target: any;
+}
+
+/**
+ * Custom filter template options.
+ */
+interface PickListFilterTemplateOptions {
+    /**
+     * Style class of the filter.
+     */
+    className: string;
+    /**
+     * Props of the filter input.
+     */
+    inputProps: PickListFilterInputProps;
+    /**
+     * Style class of the filter icon.
+     */
+    iconClassName: string;
+    /**
+     * The JSX element that represents the picklist filter.
+     */
+    element: React.ReactNode;
+    /**
+     * The props of the PickList component.
+     */
+    props: PickListProps;
+}
+
+/**
+ * Custom filter input props.
+ */
+interface PickListFilterInputProps {
+    /**
+     * Style class of the filter input.
+     */
+    className: string;
+    /**
+     * Filter change callback.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onChange(event: React.SyntheticEvent): void;
+    /**
+     * Callback function to be invoked when the keydown event.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onKeyDown(event: React.SyntheticEvent): void;
+}
+
+/**
+ * Defines valid properties in PickList component.
+ * @group Properties
+ */
+export interface PickListProps {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * An array of objects for the source list.
+     */
+    source?: any[] | undefined;
+    /**
+     * An array of objects for the target list.
+     */
+    target?: any[] | undefined;
+    /**
+     * Template for the source list caption.
+     */
+    sourceHeader?: React.ReactNode | undefined;
+    /**
+     * Template for the target list caption.
+     */
+    targetHeader?: React.ReactNode | undefined;
+    /**
+     * Whether to focus on the first visible or selected element.
+     * @defaultValue true
+     */
+    autoOptionFocus?: boolean | undefined;
+    /**
+     * When enabled, the focus is placed on the hovered option.
+     * @defaultValue true
+     */
+    focusOnHover?: boolean | undefined;
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the element.
+     */
+    className?: string | undefined;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+    /**
+     * Inline style of the source list element.
+     */
+    sourceStyle?: React.CSSProperties | undefined;
+    /**
+     * Inline style of the target list element.
+     */
+    targetStyle?: React.CSSProperties | undefined;
+    /**
+     * Selected item in the source list.
+     */
+    sourceSelection?: any | undefined;
+    /**
+     * Selected items in the target list.
+     */
+    targetSelection?: any | undefined;
+    /**
+     * Whether to show buttons of source list.
+     * @defaultValue true
+     */
+    showSourceControls?: boolean | undefined;
+    /**
+     * Whether to show buttons of target list.
+     * @defaultValue true
+     */
+    showTargetControls?: boolean | undefined;
+    /**
+     * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @defaultValue true
+     */
+    metaKeySelection?: boolean | undefined;
+    /**
+     * When specified, displays an input field to filter the items on keyup.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
+    /**
+     * Icon of the target list filter.
+     */
+    targetFilterIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon of the source list filter.
+     */
+    sourceFilterIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon for moving all items to the source list.
+     */
+    moveAllToSourceIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon for moving an item to the source list.
+     */
+    moveToSourceIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon for moving all items to the target list.
+     */
+    moveAllToTargetIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon for moving an item to the target list.
+     */
+    moveToTargetIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon of the move up icon.
+     */
+    moveUpIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon of the move top icon.
+     */
+    moveTopIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon of the move down icon.
+     */
+    moveDownIcon?: IconType<PickListProps> | undefined;
+    /**
+     * Icon of the move bottom icon.
+     */
+    moveBottomIcon?: IconType<PickListProps> | undefined;
+    /**
+     * When specified displays an input field to filter the items on keyup and decides which field to search (Accepts multiple fields with a comma).
+     */
+    filterBy?: string | undefined;
+    /**
+     * Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".
+     * @defaultValue contains
+     */
+    filterMatchMode?: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Filter value in the target list.
+     */
+    sourceFilterValue?: string | undefined;
+    /**
+     * Filter value in the source list.
+     */
+    targetFilterValue?: string | undefined;
+    /**
+     * Whether to show filter input for source list when filterBy is enabled.
+     * @defaultValue true
+     */
+    showSourceFilter?: boolean | undefined;
+    /**
+     * Whether to show filter input for target list when filterBy is enabled.
+     * @defaultValue true
+     */
+    showTargetFilter?: boolean | undefined;
+    /**
+     * Placeholder text on source filter input.
+     */
+    sourceFilterPlaceholder?: string | undefined;
+    /**
+     * Placeholder text on target filter input.
+     */
+    targetFilterPlaceholder?: string | undefined;
+    /**
+     * Template for the source filter content.
+     */
+    sourceFilterTemplate?: React.ReactNode | ((options: PickListFilterTemplateOptions) => React.ReactNode) | undefined;
+    /**
+     * Placeholder text on target filter input.
+     */
+    targetFilterTemplate?: React.ReactNode | ((options: PickListFilterTemplateOptions) => React.ReactNode) | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Name of the field that uniquely identifies the a record in the data.
+     */
+    dataKey: string;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     * @defaultValue '960px'.
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Template that gets the options for both source and target items and returns the content for it. Useful if you want the same template for both lists else use the custom sourceItemTemplate or targetItemTemplate properties.
+     */
+    itemTemplate?: React.ReactNode | ((item: any) => React.ReactNode) | undefined;
+    /**
+     * Template that gets the options for the source items and returns the content for it.
+     */
+    sourceItemTemplate?: React.ReactNode | ((item: any) => React.ReactNode) | undefined;
+    /**
+     * Template that gets the options for the target items and returns the content for it.
+     */
+    targetItemTemplate?: React.ReactNode | ((item: any) => React.ReactNode) | undefined;
+    /**
+     * Callback to invoke when items are moved from source to target.
+     * @param {PickListChangeEvent} event - Custom change event.
+     */
+    onChange?(event: PickListChangeEvent): void;
+    /**
+     * Callback to invoke when items are moved from target to source.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onMoveToSource?(event: PickListEvent): void;
+    /**
+     * Callback to invoke when all items are moved from target to source.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onMoveAllToSource?(event: PickListEvent): void;
+    /**
+     * Callback to invoke when items are moved from source to target.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onMoveToTarget?(event: PickListEvent): void;
+    /**
+     * Callback to invoke when all items are moved from source to target.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onMoveAllToTarget?(event: PickListEvent): void;
+    /**
+     * Callback to invoke when items are selected within source list.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onSourceSelectionChange?(event: PickListEvent): void;
+    /**
+     * Callback to invoke when items are selected within target list.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onTargetSelectionChange?(event: PickListEvent): void;
+    /**
+     * Callback to invoke when items are filtered within source list.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onSourceFilterChange?(event: PickListEvent): void;
+    /**
+     * Callback to invoke when items are filtered within target list.
+     * @param {PickListEvent} event - Custom picklist event.
+     */
+    onTargetFilterChange?(event: PickListEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PickListPassThroughOptions}
+     */
+    pt?: PickListPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - PickList**
+ *
+ * _PickList is used to reorder items between different lists._
+ *
+ * [Live Demo](https://www.primereact.org/picklist/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class PickList extends React.Component<PickListProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/portal/Portal.js b/components/lib/portal/Portal.js
new file mode 100644
index 0000000000..1959c3436c
--- /dev/null
+++ b/components/lib/portal/Portal.js
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { PortalBase } from './PortalBase';
+
+export const Portal = React.memo((inProps) => {
+    const props = PortalBase.getProps(inProps);
+    const context = React.useContext(PrimeReactContext);
+
+    const [mountedState, setMountedState] = React.useState(props.visible && DomHandler.isClient());
+
+    useMountEffect(() => {
+        if (DomHandler.isClient() && !mountedState) {
+            setMountedState(true);
+            props.onMounted && props.onMounted();
+        }
+    });
+
+    useUpdateEffect(() => {
+        props.onMounted && props.onMounted();
+    }, [mountedState]);
+
+    useUnmountEffect(() => {
+        props.onUnmounted && props.onUnmounted();
+    });
+
+    const element = props.element || props.children;
+
+    if (element && mountedState) {
+        let appendTo = props.appendTo || (context && context.appendTo) || PrimeReact.appendTo;
+
+        if (ObjectUtils.isFunction(appendTo)) {
+            appendTo = appendTo();
+        }
+
+        if (!appendTo) {
+            appendTo = document.body;
+        }
+
+        return appendTo === 'self' ? element : ReactDOM.createPortal(element, appendTo);
+    }
+
+    return null;
+});
+
+Portal.displayName = 'Portal';
diff --git a/components/lib/portal/PortalBase.js b/components/lib/portal/PortalBase.js
new file mode 100644
index 0000000000..340a4fd10c
--- /dev/null
+++ b/components/lib/portal/PortalBase.js
@@ -0,0 +1,15 @@
+import { ObjectUtils } from '../utils/Utils';
+
+export const PortalBase = {
+    defaultProps: {
+        __TYPE: 'Portal',
+        element: null,
+        appendTo: null,
+        visible: false,
+        onMounted: null,
+        onUnmounted: null,
+        children: undefined
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, PortalBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, PortalBase.defaultProps)
+};
diff --git a/components/lib/portal/package.json b/components/lib/portal/package.json
new file mode 100644
index 0000000000..9b8d1ac8a3
--- /dev/null
+++ b/components/lib/portal/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./portal.cjs.js",
+    "module": "./portal.esm.js",
+    "unpkg": "./portal.min.js",
+    "sideEffects": false
+}
diff --git a/components/lib/primereact.all.js b/components/lib/primereact.all.js
new file mode 100644
index 0000000000..9a15ed90eb
--- /dev/null
+++ b/components/lib/primereact.all.js
@@ -0,0 +1,151 @@
+export * from './accordion/Accordion';
+export * from './api/Api';
+export { default } from './api/Api';
+export * from './autocomplete/AutoComplete';
+export * from './avatar/Avatar';
+export * from './avatargroup/AvatarGroup';
+export * from './badge/Badge';
+export * from './blockui/BlockUI';
+export * from './breadcrumb/BreadCrumb';
+export * from './button/Button';
+export * from './calendar/Calendar';
+export * from './card/Card';
+export * from './carousel/Carousel';
+export * from './cascadeselect/CascadeSelect';
+export * from './chart/Chart';
+export * from './checkbox/Checkbox';
+export * from './chip/Chip';
+export * from './chips/Chips';
+export * from './colorpicker/ColorPicker';
+export * from './column/Column';
+export * from './columngroup/ColumnGroup';
+export * from './confirmdialog/ConfirmDialog';
+export * from './confirmpopup/ConfirmPopup';
+export * from './contextmenu/ContextMenu';
+export * from './csstransition/CSSTransition';
+export * from './datascroller/DataScroller';
+export * from './datatable/DataTable';
+export * from './dataview/DataView';
+export * from './deferredcontent/DeferredContent';
+export * from './dialog/Dialog';
+export * from './divider/Divider';
+export * from './dock/Dock';
+export * from './dropdown/Dropdown';
+export * from './editor/Editor';
+export * from './fieldset/Fieldset';
+export * from './fileupload/FileUpload';
+export * from './floatlabel/FloatLabel';
+export * from './galleria/Galleria';
+export * from './hooks/Hooks';
+export * from './iconbase/IconBase';
+export * from './iconfield/IconField';
+export * from './icons/angledoubledown';
+export * from './icons/angledoubleleft';
+export * from './icons/angledoubleright';
+export * from './icons/angledoubleup';
+export * from './icons/angledown';
+export * from './icons/angleleft';
+export * from './icons/angleright';
+export * from './icons/angleup';
+export * from './icons/arrowdown';
+export * from './icons/arrowup';
+export * from './icons/ban';
+export * from './icons/bars';
+export * from './icons/calendar';
+export * from './icons/check';
+export * from './icons/chevrondown';
+export * from './icons/chevronleft';
+export * from './icons/chevronright';
+export * from './icons/chevronup';
+export * from './icons/exclamationtriangle';
+export * from './icons/eye';
+export * from './icons/eyeslash';
+export * from './icons/filter';
+export * from './icons/filterslash';
+export * from './icons/infocircle';
+export * from './icons/minus';
+export * from './icons/pencil';
+export * from './icons/plus';
+export * from './icons/refresh';
+export * from './icons/search';
+export * from './icons/searchminus';
+export * from './icons/searchplus';
+export * from './icons/sortalt';
+export * from './icons/sortamountdown';
+export * from './icons/sortamountupalt';
+export * from './icons/spinner';
+export * from './icons/star';
+export * from './icons/starfill';
+export * from './icons/thlarge';
+export * from './icons/times';
+export * from './icons/timescircle';
+export * from './icons/trash';
+export * from './icons/undo';
+export * from './icons/upload';
+export * from './icons/windowmaximize';
+export * from './icons/windowminimize';
+export * from './image/Image';
+export * from './inplace/Inplace';
+export * from './inputmask/InputMask';
+export * from './inputnumber/InputNumber';
+export * from './inputswitch/InputSwitch';
+export * from './inputtext/InputText';
+export * from './inputtextarea/InputTextarea';
+export * from './keyfilter/KeyFilter';
+export * from './knob/Knob';
+export * from './listbox/ListBox';
+export * from './megamenu/MegaMenu';
+export * from './mention/Mention';
+export * from './menu/Menu';
+export * from './menubar/Menubar';
+export * from './message/Message';
+export * from './messages/Messages';
+export * from './metergroup/MeterGroup';
+export * from './multiselect/MultiSelect';
+export * from './multistatecheckbox/MultiStateCheckbox';
+export * from './orderlist/OrderList';
+export * from './organizationchart/OrganizationChart';
+export * from './overlaypanel/OverlayPanel';
+export * from './overlayservice/OverlayService';
+export * from './paginator/Paginator';
+export * from './panel/Panel';
+export * from './panelmenu/PanelMenu';
+export * from './password/Password';
+export * from './picklist/PickList';
+export * from './portal/Portal';
+export * from './progressbar/ProgressBar';
+export * from './progressspinner/ProgressSpinner';
+export * from './radiobutton/RadioButton';
+export * from './rating/Rating';
+export * from './ripple/Ripple';
+export * from './row/Row';
+export * from './scrollpanel/ScrollPanel';
+export * from './scrolltop/ScrollTop';
+export * from './selectbutton/SelectButton';
+export * from './sidebar/Sidebar';
+export * from './skeleton/Skeleton';
+export * from './slidemenu/SlideMenu';
+export * from './slider/Slider';
+export * from './speeddial/SpeedDial';
+export * from './splitbutton/SplitButton';
+export * from './splitter/Splitter';
+export * from './stepper/Stepper';
+export * from './steps/Steps';
+export * from './styleclass/StyleClass';
+export * from './tabmenu/TabMenu';
+export * from './tabview/TabView';
+export * from './tag/Tag';
+export * from './terminal/Terminal';
+export * from './terminalservice/TerminalService';
+export * from './tieredmenu/TieredMenu';
+export * from './timeline/Timeline';
+export * from './toast/Toast';
+export * from './togglebutton/ToggleButton';
+export * from './toolbar/Toolbar';
+export * from './tooltip/Tooltip';
+export * from './tree/Tree';
+export * from './treeselect/TreeSelect';
+export * from './treetable/TreeTable';
+export * from './tristatecheckbox/TriStateCheckbox';
+export * from './utils/Utils';
+export * from './virtualscroller/VirtualScroller';
diff --git a/components/lib/progressbar/ProgressBar.js b/components/lib/progressbar/ProgressBar.js
new file mode 100644
index 0000000000..3087c68ddf
--- /dev/null
+++ b/components/lib/progressbar/ProgressBar.js
@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { ProgressBarBase } from './ProgressBarBase';
+
+export const ProgressBar = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ProgressBarBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = ProgressBarBase.setMetaData({
+            props,
+            ...props.__parentMetadata
+        });
+
+        useHandleStyle(ProgressBarBase.css.styles, isUnstyled, { name: 'progressbar' });
+        const elementRef = React.useRef(null);
+
+        const createLabel = () => {
+            if (props.showValue && props.value != null) {
+                const label = props.displayValueTemplate ? props.displayValueTemplate(props.value) : props.value + props.unit;
+
+                return label;
+            }
+
+            return null;
+        };
+
+        const createDeterminate = () => {
+            const label = createLabel();
+            const rootProps = mergeProps(
+                {
+                    className: classNames(props.className, cx('root')),
+                    style: props.style,
+                    role: 'progressbar',
+                    'aria-valuemin': '0',
+                    'aria-valuenow': props.value,
+                    'aria-valuemax': '100'
+                },
+                ProgressBarBase.getOtherProps(props),
+                ptm('root')
+            );
+            const valueProps = mergeProps(
+                {
+                    className: cx('value'),
+                    style: { width: props.value + '%', display: 'flex', backgroundColor: props.color }
+                },
+                ptm('value')
+            );
+
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                ptm('label')
+            );
+
+            return (
+                <div id={props.id} ref={elementRef} {...rootProps}>
+                    <div {...valueProps}>{label != null && <div {...labelProps}>{label}</div>}</div>
+                </div>
+            );
+        };
+
+        const createIndeterminate = () => {
+            const rootProps = mergeProps(
+                {
+                    className: classNames(props.className, cx('root')),
+                    style: props.style,
+                    role: 'progressbar',
+                    'aria-valuemin': '0',
+                    'aria-valuenow': props.value,
+                    'aria-valuemax': '100'
+                },
+                ProgressBarBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const containerProps = mergeProps(
+                {
+                    className: cx('container')
+                },
+                ptm('container')
+            );
+
+            const valueProps = mergeProps(
+                {
+                    className: cx('value'),
+                    style: { backgroundColor: props.color }
+                },
+                ptm('value')
+            );
+
+            return (
+                <div id={props.id} ref={elementRef} {...rootProps}>
+                    <div {...containerProps}>
+                        <div {...valueProps} />
+                    </div>
+                </div>
+            );
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        if (props.mode === 'determinate') {
+            return createDeterminate();
+        } else if (props.mode === 'indeterminate') {
+            return createIndeterminate();
+        }
+
+        throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
+    })
+);
+
+ProgressBar.displayName = 'ProgressBar';
diff --git a/components/lib/progressbar/ProgressBar.spec.js b/components/lib/progressbar/ProgressBar.spec.js
new file mode 100644
index 0000000000..6f47801d80
--- /dev/null
+++ b/components/lib/progressbar/ProgressBar.spec.js
@@ -0,0 +1,12 @@
+import '@testing-library/jest-dom';
+import { snapshot } from '../../test';
+import { ProgressBar } from './ProgressBar';
+
+describe('ProgressBar', () => {
+    snapshot(<ProgressBar />, 'default');
+    snapshot(<ProgressBar value={50} />, 'value');
+    snapshot(<ProgressBar value={50} showValue={false} />, 'hide value');
+    snapshot(<ProgressBar value={50} unit="%" />, 'value with unit');
+    snapshot(<ProgressBar mode="determinate" value={20} />, 'mode determinate');
+    snapshot(<ProgressBar mode="indeterminate" style={{ height: '6px' }} />, 'mode indeterminate');
+});
diff --git a/components/lib/progressbar/ProgressBarBase.js b/components/lib/progressbar/ProgressBarBase.js
new file mode 100644
index 0000000000..cdecbdbaf5
--- /dev/null
+++ b/components/lib/progressbar/ProgressBarBase.js
@@ -0,0 +1,141 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) => (props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate') : classNames('p-progressbar p-component p-progressbar-determinate')),
+    value: 'p-progressbar-value p-progressbar-value-animate',
+    label: 'p-progressbar-label',
+    container: 'p-progressbar-indeterminate-container'
+};
+
+const styles = `
+@layer primereact {
+  .p-progressbar {
+      position: relative;
+      overflow: hidden;
+  }
+  
+  .p-progressbar-determinate .p-progressbar-value {
+      height: 100%;
+      width: 0%;
+      position: absolute;
+      display: none;
+      border: 0 none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+  }
+  
+  .p-progressbar-determinate .p-progressbar-label {
+      display: inline-flex;
+  }
+  
+  .p-progressbar-determinate .p-progressbar-value-animate {
+      transition: width 1s ease-in-out;
+  }
+  
+  .p-progressbar-indeterminate .p-progressbar-value::before {
+        content: '';
+        position: absolute;
+        background-color: inherit;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        will-change: left, right;
+        -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+                animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+  
+  .p-progressbar-indeterminate .p-progressbar-value::after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      will-change: left, right;
+      -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+              animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+      -webkit-animation-delay: 1.15s;
+              animation-delay: 1.15s;
+  }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; }
+}
+@keyframes p-progressbar-indeterminate-anim {
+  0% {
+    left: -35%;
+    right: 100%; }
+  60% {
+    left: 100%;
+    right: -90%; }
+  100% {
+    left: 100%;
+    right: -90%; }
+}
+
+@-webkit-keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; }
+}
+@keyframes p-progressbar-indeterminate-anim-short {
+  0% {
+    left: -200%;
+    right: 100%; }
+  60% {
+    left: 107%;
+    right: -8%; }
+  100% {
+    left: 107%;
+    right: -8%; }
+}
+`;
+
+const inlineStyles = {
+    value: ({ props }) => {
+        const valueWidth = Math.max(props.value, 2); // min 2 to display full label of 0% and 1%
+        const valueColor = props.value ? props.color : 'transparent';
+
+        return props.mode === 'indeterminate' ? { backgroundColor: props.color } : { width: valueWidth + '%', display: 'flex', backgroundColor: valueColor };
+    }
+};
+
+export const ProgressBarBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ProgressBar',
+        __parentMetadata: null,
+        id: null,
+        value: null,
+        showValue: true,
+        unit: '%',
+        style: null,
+        className: null,
+        mode: 'determinate',
+        displayValueTemplate: null,
+        color: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap b/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap
new file mode 100644
index 0000000000..e8a866222b
--- /dev/null
+++ b/components/lib/progressbar/__snapshots__/ProgressBar.spec.js.snap
@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar default 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    class="p-progressbar p-component p-progressbar-determinate"
+    data-pc-name="progressbar"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      data-pc-section="value"
+      style="display: flex;"
+    />
+  </div>
+</div>
+`;
+
+exports[`ProgressBar hide value 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="p-progressbar p-component p-progressbar-determinate"
+    data-pc-name="progressbar"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      data-pc-section="value"
+      style="width: 50%; display: flex;"
+    />
+  </div>
+</div>
+`;
+
+exports[`ProgressBar mode determinate 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="20"
+    class="p-progressbar p-component p-progressbar-determinate"
+    data-pc-name="progressbar"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      data-pc-section="value"
+      style="width: 20%; display: flex;"
+    >
+      <div
+        class="p-progressbar-label"
+        data-pc-section="label"
+      >
+        20%
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressBar mode indeterminate 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    class="p-progressbar p-component p-progressbar-indeterminate"
+    data-pc-name="progressbar"
+    data-pc-section="root"
+    role="progressbar"
+    style="height: 6px;"
+  >
+    <div
+      class="p-progressbar-indeterminate-container"
+      data-pc-section="container"
+    >
+      <div
+        class="p-progressbar-value p-progressbar-value-animate"
+        data-pc-section="value"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressBar value 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="p-progressbar p-component p-progressbar-determinate"
+    data-pc-name="progressbar"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      data-pc-section="value"
+      style="width: 50%; display: flex;"
+    >
+      <div
+        class="p-progressbar-label"
+        data-pc-section="label"
+      >
+        50%
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ProgressBar value with unit 1`] = `
+<div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="p-progressbar p-component p-progressbar-determinate"
+    data-pc-name="progressbar"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <div
+      class="p-progressbar-value p-progressbar-value-animate"
+      data-pc-section="value"
+      style="width: 50%; display: flex;"
+    >
+      <div
+        class="p-progressbar-label"
+        data-pc-section="label"
+      >
+        50%
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/lib/progressbar/package.json b/components/lib/progressbar/package.json
new file mode 100644
index 0000000000..4c838d785f
--- /dev/null
+++ b/components/lib/progressbar/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./progressbar.cjs.js",
+    "module": "./progressbar.esm.js",
+    "unpkg": "./progressbar.min.js",
+    "types": "./progressbar.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/progressbar/progressbar.d.ts b/components/lib/progressbar/progressbar.d.ts
new file mode 100644
index 0000000000..b9ce88412d
--- /dev/null
+++ b/components/lib/progressbar/progressbar.d.ts
@@ -0,0 +1,123 @@
+/**
+ *
+ * ProgressBar is a process status indicator.
+ *
+ * [Live Demo](https://www.primereact.org/progressbar)
+ *
+ * @module progressbar
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ProgressBarPassThroughType<T> = PassThroughType<T, ProgressBarPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ProgressBarPassThroughMethodOptions {
+    props: ProgressBarProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ProgressBarProps.pt}
+ */
+export interface ProgressBarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ProgressBarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: ProgressBarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the value's DOM element.
+     */
+    value?: ProgressBarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ProgressBarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in ProgressBar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ProgressBarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Current value of the progress.
+     */
+    value?: string | number | null | undefined;
+    /**
+     * Show or hide progress bar value.
+     * @defaultValue true
+     */
+    showValue?: boolean | undefined;
+    /**
+     * Unit sign appended to the value.
+     * @defaultValue %
+     */
+    unit?: string | undefined;
+    /**
+     * Defines the mode of the progress, valid values are "determinate" and "indeterminate".
+     * @defaultValue determinate
+     */
+    mode?: 'determinate' | 'indeterminate' | undefined;
+    /**
+     * Color for the background of the progress.
+     */
+    color?: string | undefined;
+    /**
+     * Custom display value template
+     */
+    displayValueTemplate?(value: string | number | undefined | null | undefined): React.ReactNode;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ProgressBarPassThroughOptions}
+     */
+    pt?: ProgressBarPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ProgressBar**
+ *
+ * _ProgressBar is a process status indicator._
+ *
+ * [Live Demo](https://www.primereact.org/progressbar/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ProgressBar extends React.Component<ProgressBarProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/progressspinner/ProgressSpinner.js b/components/lib/progressspinner/ProgressSpinner.js
new file mode 100644
index 0000000000..b47c7b3ad3
--- /dev/null
+++ b/components/lib/progressspinner/ProgressSpinner.js
@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { ProgressSpinnerBase } from './ProgressSpinnerBase';
+
+export const ProgressSpinner = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ProgressSpinnerBase.getProps(inProps, context);
+
+        const elementRef = React.useRef(null);
+
+        const { ptm, cx, sx, isUnstyled } = ProgressSpinnerBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(ProgressSpinnerBase.css.styles, isUnstyled, { name: 'progressspinner' });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                style: props.style,
+                className: classNames(props.className, cx('root')),
+                role: 'progressbar',
+                'aria-busy': true
+            },
+            ProgressSpinnerBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const spinnerProps = mergeProps(
+            {
+                className: cx('spinner'),
+                viewBox: '25 25 50 50',
+                style: sx('spinner')
+            },
+            ptm('spinner')
+        );
+
+        const circleProps = mergeProps(
+            {
+                className: cx('circle'),
+                cx: '50',
+                cy: '50',
+                r: '20',
+                fill: props.fill,
+                strokeWidth: props.strokeWidth,
+                strokeMiterlimit: '10'
+            },
+            ptm('circle')
+        );
+
+        return (
+            <div {...rootProps}>
+                <svg {...spinnerProps}>
+                    <circle {...circleProps} />
+                </svg>
+            </div>
+        );
+    })
+);
+
+ProgressSpinner.displayName = 'ProgressSpinner';
diff --git a/components/lib/progressspinner/ProgressSpinner.spec.js b/components/lib/progressspinner/ProgressSpinner.spec.js
new file mode 100644
index 0000000000..3dab293289
--- /dev/null
+++ b/components/lib/progressspinner/ProgressSpinner.spec.js
@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom';
+import { ProgressSpinner } from './ProgressSpinner';
+
+import { snapshot } from '../../test';
+
+describe('ProgressSpinner', () => {
+    snapshot(<ProgressSpinner />, 'default');
+    snapshot(<ProgressSpinner strokeWidth="3" />, 'strokeWidth');
+    snapshot(<ProgressSpinner fill="green" />, 'fill');
+    snapshot(<ProgressSpinner animationDuration="5s" />, 'animationDuration');
+});
diff --git a/components/lib/progressspinner/ProgressSpinnerBase.js b/components/lib/progressspinner/ProgressSpinnerBase.js
new file mode 100644
index 0000000000..b05adbf559
--- /dev/null
+++ b/components/lib/progressspinner/ProgressSpinnerBase.js
@@ -0,0 +1,105 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-progress-spinner',
+    spinner: 'p-progress-spinner-svg',
+    circle: 'p-progress-spinner-circle'
+};
+const styles = `
+@layer primereact {
+    .p-progress-spinner {
+        position: relative;
+        margin: 0 auto;
+        width: 100px;
+        height: 100px;
+        display: inline-block;
+    }
+    
+    .p-progress-spinner::before {
+        content: '';
+        display: block;
+        padding-top: 100%;
+    }
+    
+    .p-progress-spinner-svg {
+        animation: p-progress-spinner-rotate 2s linear infinite;
+        height: 100%;
+        transform-origin: center center;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+    }
+    
+    .p-progress-spinner-circle {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: 0;
+        stroke: #d62d20;
+        animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
+        stroke-linecap: round;
+    }
+}
+
+@keyframes p-progress-spinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes p-progress-spinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes p-progress-spinner-color {
+    100%,
+    0% {
+        stroke: #d62d20;
+    }
+    40% {
+        stroke: #0057e7;
+    }
+    66% {
+        stroke: #008744;
+    }
+    80%,
+    90% {
+        stroke: #ffa700;
+    }
+}
+`;
+
+const inlineStyles = {
+    spinner: ({ props }) => ({ animationDuration: props.animationDuration })
+};
+
+export const ProgressSpinnerBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ProgressSpinner',
+        id: null,
+        style: null,
+        className: null,
+        strokeWidth: '2',
+        fill: 'none',
+        animationDuration: '2s',
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap b/components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap
new file mode 100644
index 0000000000..52c19862cb
--- /dev/null
+++ b/components/lib/progressspinner/__snapshots__/ProgressSpinner.spec.js.snap
@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressSpinner animationDuration 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    data-pc-name="progressspinner"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      data-pc-section="spinner"
+      style="animation-duration: 5s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        data-pc-section="circle"
+        fill="none"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="2"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`ProgressSpinner default 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    data-pc-name="progressspinner"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      data-pc-section="spinner"
+      style="animation-duration: 2s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        data-pc-section="circle"
+        fill="none"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="2"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`ProgressSpinner fill 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    data-pc-name="progressspinner"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      data-pc-section="spinner"
+      style="animation-duration: 2s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        data-pc-section="circle"
+        fill="green"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="2"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`ProgressSpinner strokeWidth 1`] = `
+<div>
+  <div
+    aria-busy="true"
+    class="p-progress-spinner"
+    data-pc-name="progressspinner"
+    data-pc-section="root"
+    role="progressbar"
+  >
+    <svg
+      class="p-progress-spinner-svg"
+      data-pc-section="spinner"
+      style="animation-duration: 2s;"
+      viewBox="25 25 50 50"
+    >
+      <circle
+        class="p-progress-spinner-circle"
+        cx="50"
+        cy="50"
+        data-pc-section="circle"
+        fill="none"
+        r="20"
+        stroke-miterlimit="10"
+        stroke-width="3"
+      />
+    </svg>
+  </div>
+</div>
+`;
diff --git a/components/lib/progressspinner/package.json b/components/lib/progressspinner/package.json
new file mode 100644
index 0000000000..ed4a4ab8ed
--- /dev/null
+++ b/components/lib/progressspinner/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./progressspinner.cjs.js",
+    "module": "./progressspinner.esm.js",
+    "unpkg": "./progressspinner.min.js",
+    "types": "./progressspinner.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/progressspinner/progressspinner.d.ts b/components/lib/progressspinner/progressspinner.d.ts
new file mode 100644
index 0000000000..31d5672daf
--- /dev/null
+++ b/components/lib/progressspinner/progressspinner.d.ts
@@ -0,0 +1,106 @@
+/**
+ *
+ * ProgressSpinner is a process status indicator.
+ *
+ * [Live Demo](https://www.primereact.org/progressspinner)
+ *
+ * @module progressspinner
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ProgressSpinnerPassThroughType<T> = PassThroughType<T, ProgressSpinnerPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ProgressSpinnerPassThroughMethodOptions {
+    props: ProgressSpinnerProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ProgressSpinnerProps.pt}
+ */
+export interface ProgressSpinnerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ProgressSpinnerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the spinner's DOM element.
+     */
+    spinner?: ProgressSpinnerPassThroughType<React.HTMLAttributes<SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the circle's DOM element.
+     */
+    circle?: ProgressSpinnerPassThroughType<React.HTMLAttributes<SVGCircleElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in ProgressSpinner component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ProgressSpinnerProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Width of the circle stroke.
+     * @defaultValue 2
+     */
+    strokeWidth?: string | undefined;
+    /**
+     * 	Color for the background of the circle.
+     */
+    fill?: string | undefined;
+    /**
+     * Duration of the rotate animation.
+     * @defaultValue 2s
+     */
+    animationDuration?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ProgressSpinnerPassThroughOptions}
+     */
+    pt?: ProgressSpinnerPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ProgressSpinner**
+ *
+ * _ProgressSpinner is a process status indicator._
+ *
+ * [Live Demo](https://www.primereact.org/progressspinner/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ProgressSpinner extends React.Component<ProgressSpinnerProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/radiobutton/RadioButton.js b/components/lib/radiobutton/RadioButton.js
new file mode 100644
index 0000000000..5f5de26d04
--- /dev/null
+++ b/components/lib/radiobutton/RadioButton.js
@@ -0,0 +1,188 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { RadioButtonBase } from './RadioButtonBase';
+
+export const RadioButton = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = RadioButtonBase.getProps(inProps, context);
+
+        const elementRef = React.useRef(null);
+        const inputRef = React.useRef(props.inputRef);
+
+        const { ptm, cx, isUnstyled } = RadioButtonBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(RadioButtonBase.css.styles, isUnstyled, { name: 'radiobutton' });
+
+        const select = (event) => {
+            onChange(event);
+        };
+
+        const onChange = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            if (props.onChange) {
+                const checked = props.checked;
+                const radioClicked = event.target instanceof HTMLDivElement;
+                const inputClicked = event.target === inputRef.current;
+                const isInputToggled = inputClicked && event.target.checked !== checked;
+                const isRadioToggled = radioClicked && (DomHandler.hasClass(elementRef.current, 'p-radiobutton-checked') === checked ? !checked : false);
+                const value = !checked;
+
+                const eventData = {
+                    originalEvent: event,
+                    value: props.value,
+                    checked: value,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        type: 'radio',
+                        name: props.name,
+                        id: props.id,
+                        value: props.value,
+                        checked: value
+                    }
+                };
+
+                if (isInputToggled || isRadioToggled) {
+                    props?.onChange?.(eventData);
+
+                    // do not continue if the user defined click wants to prevent
+                    if (event.defaultPrevented) {
+                        return;
+                    }
+
+                    if (isRadioToggled) {
+                        inputRef.current.checked = value;
+                    }
+                }
+
+                DomHandler.focus(inputRef.current);
+            }
+        };
+
+        const onFocus = (event) => {
+            props?.onFocus?.(event);
+        };
+
+        const onBlur = (event) => {
+            props?.onBlur?.(event);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            select,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current,
+            getInput: () => inputRef.current
+        }));
+
+        React.useEffect(() => {
+            if (inputRef.current) {
+                inputRef.current.checked = props.checked;
+            }
+        }, [props.checked]);
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(inputRef, props.inputRef);
+        }, [inputRef, props.inputRef]);
+
+        useMountEffect(() => {
+            if (props.autoFocus) {
+                DomHandler.focus(inputRef.current, props.autoFocus);
+            }
+        });
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = RadioButtonBase.getOtherProps(props);
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                className: classNames(props.className, cx('root', { context })),
+                style: props.style,
+                'data-p-checked': props.checked
+            },
+            otherProps,
+            ptm('root')
+        );
+
+        delete rootProps.input;
+        delete rootProps.box;
+        delete rootProps.icon;
+
+        const createInputElement = () => {
+            const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+            const inputProps = mergeProps(
+                {
+                    id: props.inputId,
+                    type: 'radio',
+                    name: props.name,
+                    defaultChecked: props.checked,
+                    onFocus: onFocus,
+                    onBlur: onBlur,
+                    onChange: onChange,
+                    disabled: props.disabled,
+                    readOnly: props.readOnly,
+                    required: props.required,
+                    tabIndex: props.tabIndex,
+                    className: cx('input'),
+                    ...ariaProps
+                },
+                inProps.input,
+                ptm('input')
+            );
+
+            return <input ref={inputRef} {...inputProps} />;
+        };
+
+        const createBoxElement = () => {
+            const boxProps = mergeProps(
+                {
+                    className: cx('box')
+                },
+                inProps.box,
+                ptm('box')
+            );
+
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                inProps.icon,
+                ptm('icon')
+            );
+
+            return (
+                <div {...boxProps}>
+                    <div {...iconProps} />
+                </div>
+            );
+        };
+
+        return (
+            <>
+                <div ref={elementRef} {...rootProps}>
+                    {createInputElement()}
+                    {createBoxElement()}
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+RadioButton.displayName = 'RadioButton';
diff --git a/components/lib/radiobutton/RadioButtonBase.js b/components/lib/radiobutton/RadioButtonBase.js
new file mode 100644
index 0000000000..c6896607e1
--- /dev/null
+++ b/components/lib/radiobutton/RadioButtonBase.js
@@ -0,0 +1,43 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-radiobutton p-component', {
+            'p-highlight': props.checked,
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    box: 'p-radiobutton-box',
+    input: 'p-radiobutton-input',
+    icon: 'p-radiobutton-icon'
+};
+
+export const RadioButtonBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'RadioButton',
+        autoFocus: false,
+        checked: false,
+        className: null,
+        disabled: false,
+        id: null,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        variant: null,
+        name: null,
+        onChange: null,
+        onClick: null,
+        required: false,
+        style: null,
+        tabIndex: null,
+        tooltip: null,
+        tooltipOptions: null,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/radiobutton/package.json b/components/lib/radiobutton/package.json
new file mode 100644
index 0000000000..6d45d11045
--- /dev/null
+++ b/components/lib/radiobutton/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./radiobutton.cjs.js",
+    "module": "./radiobutton.esm.js",
+    "unpkg": "./radiobutton.min.js",
+    "types": "./radiobutton.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/radiobutton/radiobutton.d.ts b/components/lib/radiobutton/radiobutton.d.ts
new file mode 100644
index 0000000000..e5238fe0a6
--- /dev/null
+++ b/components/lib/radiobutton/radiobutton.d.ts
@@ -0,0 +1,191 @@
+/**
+ *
+ * RadioButton is an extension to standard radio button element with theming.
+ *
+ * [Live Demo](https://www.primereact.org/radiobutton/)
+ *
+ * @module radiobutton
+ *
+ */
+import * as React from 'react';
+import { CheckboxPassThroughType } from '../checkbox/checkbox';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { PassThroughType } from '../utils/utils';
+
+export declare type RadioButtonPassThroughType<T> = PassThroughType<T, RadioButtonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RadioButtonPassThroughMethodOptions {
+    props: RadioButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RadioButtonProps.pt}
+ */
+export interface RadioButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RadioButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: RadioButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: RadioButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom change event.
+ * @see {@link RadioButtonProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface RadioButtonChangeEvent extends FormEvent {}
+
+/**
+ * Defines valid properties in RadioButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface RadioButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Unique identifier of the inner native radiobutton.
+     */
+    inputId?: string | undefined;
+    /**
+     * Name of the checkbox element.
+     */
+    name?: string | undefined;
+    /**
+     * Value of the radio.
+     */
+    value?: any | undefined;
+    /**
+     * Specifies whether a checkbox should be checked or not.
+     * @defaultValue false
+     */
+    checked?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field must be filled out before submitting the form.
+     * @defaultValue false
+     */
+    required?: boolean | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on value change
+     * @param {RadioButtonChangeEvent} event - Custom change event.
+     */
+    onChange?(event: RadioButtonChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RadioButtonPassThroughOptions}
+     */
+    pt?: RadioButtonPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - RadioButton**
+ *
+ * _RadioButton is an extension to standard radio button element with theming._
+ *
+ * [Live Demo](https://www.primereact.org/radiobutton/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class RadioButton extends React.Component<RadioButtonProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to select a button
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    public select(event?: React.SyntheticEvent): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get input element.
+     * @return {HTMLInputElement | null} Input element
+     */
+    public getInput(): HTMLInputElement | null;
+}
diff --git a/components/lib/rating/Rating.js b/components/lib/rating/Rating.js
new file mode 100644
index 0000000000..7dc076be94
--- /dev/null
+++ b/components/lib/rating/Rating.js
@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { BanIcon } from '../icons/ban';
+import { StarIcon } from '../icons/star';
+import { StarFillIcon } from '../icons/starfill';
+import { Tooltip } from '../tooltip/Tooltip';
+import { IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { RatingBase } from './RatingBase';
+
+export const Rating = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = RatingBase.getProps(inProps, context);
+
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+        const [isFocusVisibleItem, setFocusVisibleItem] = React.useState(true);
+
+        const elementRef = React.useRef(null);
+
+        const { ptm, cx, isUnstyled } = RatingBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(RatingBase.css.styles, isUnstyled, { name: 'rating' });
+
+        const getPTOptions = (value, key) => {
+            return ptm(key, {
+                context: {
+                    active: value <= props.value
+                }
+            });
+        };
+
+        const enabled = !props.disabled && !props.readOnly;
+        const tabIndex = enabled ? 0 : null;
+
+        const rate = (event, i) => {
+            if (enabled && props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value: i,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: i
+                    }
+                });
+            }
+
+            setFocusedOptionIndex(i);
+
+            event.preventDefault();
+        };
+
+        const clear = (event) => {
+            if (enabled && props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value: null,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: null
+                    }
+                });
+            }
+
+            event.preventDefault();
+        };
+
+        const onStarKeyDown = (event, value) => {
+            switch (event.key) {
+                case 'Enter':
+                case 'Space':
+                    rate(event, value);
+                    event.preventDefault();
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    rate(event, props.value - 1 < 1 ? props.stars : props.value - 1);
+                    break;
+
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    rate(event, props.value + 1 > props.stars ? 1 : props.value + 1);
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onFocus = (event, value) => {
+            setFocusedOptionIndex(value);
+        };
+
+        const onBlur = (event) => {
+            setFocusedOptionIndex(-1);
+        };
+
+        const onCancelKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                clear(event);
+            }
+        };
+
+        const createIcons = () => {
+            return Array.from({ length: props.stars }, (_, i) => i + 1).map((value) => {
+                const active = value <= props.value;
+                const onIconProps = mergeProps(
+                    {
+                        className: cx('onIcon')
+                    },
+                    getPTOptions(props.value, 'onIcon')
+                );
+                const offIconProps = mergeProps(
+                    {
+                        className: cx('onIcon')
+                    },
+                    getPTOptions(props.value, 'offIcon')
+                );
+                const icon = active ? { type: props.onIcon || <StarFillIcon {...onIconProps} /> } : { type: props.offIcon || <StarIcon {...offIconProps} /> };
+                const content = IconUtils.getJSXIcon(icon.type, active ? { ...onIconProps } : { ...offIconProps }, { props });
+
+                const itemProps = mergeProps(
+                    {
+                        className: cx('item', { active, focusedOptionIndex, isFocusVisibleItem, value }),
+                        'data-p-focused': value === focusedOptionIndex,
+                        tabIndex: tabIndex,
+                        onClick: (e) => rate(e, value),
+                        onKeyDown: (e) => onStarKeyDown(e, value),
+                        onFocus: (e) => onFocus(e, value),
+                        onBlur: (e) => onBlur(e)
+                    },
+                    getPTOptions(props.value, 'item')
+                );
+
+                return (
+                    <div {...itemProps} key={value}>
+                        {content}
+                    </div>
+                );
+            });
+        };
+
+        const createCancelIcon = () => {
+            if (props.cancel) {
+                const cancelIconProps = mergeProps(
+                    {
+                        className: cx('cancelIcon')
+                    },
+                    ptm('cancelIcon')
+                );
+                const icon = props.cancelIcon || <BanIcon {...cancelIconProps} />;
+                const content = IconUtils.getJSXIcon(icon, { ...cancelIconProps, ...props.cancelIconProps }, { props });
+
+                const cancelItemProps = mergeProps(
+                    {
+                        className: cx('cancelItem'),
+                        onClick: clear,
+                        tabIndex: tabIndex,
+                        onKeyDown: onCancelKeyDown
+                    },
+                    ptm('cancelItem')
+                );
+
+                return <div {...cancelItemProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            RatingBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const cancelIcon = createCancelIcon();
+        const icons = createIcons();
+
+        return (
+            <>
+                <div {...rootProps}>
+                    {cancelIcon}
+                    {icons}
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+Rating.displayName = 'Rating';
diff --git a/components/lib/rating/RatingBase.js b/components/lib/rating/RatingBase.js
new file mode 100644
index 0000000000..d2cbc666f7
--- /dev/null
+++ b/components/lib/rating/RatingBase.js
@@ -0,0 +1,61 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    onIcon: 'p-rating-icon',
+    item: ({ active, value, isFocusVisibleItem, focusedOptionIndex }) => classNames('p-rating-item', { 'p-rating-item-active': active }, { 'p-focus': value === focusedOptionIndex && isFocusVisibleItem }),
+    cancelIcon: 'p-rating-icon p-rating-cancel',
+    cancelItem: 'p-rating-item p-rating-cancel-item',
+    root: ({ props }) =>
+        classNames('p-rating', {
+            'p-disabled': props.disabled,
+            'p-readonly': props.readOnly
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-rating {
+        display: flex;
+        align-items: center;
+    }
+    
+    .p-rating-item {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+    }
+    
+    .p-rating.p-readonly .p-rating-item {
+        cursor: default;
+    }
+}
+`;
+
+export const RatingBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Rating',
+        id: null,
+        value: null,
+        disabled: false,
+        readOnly: false,
+        stars: 5,
+        cancel: true,
+        style: null,
+        className: null,
+        tooltip: null,
+        tooltipOptions: null,
+        onChange: null,
+        onIcon: null,
+        offIcon: null,
+        cancelIcon: null,
+        cancelIconProps: null,
+        onIconProps: null,
+        offIconProps: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/rating/package.json b/components/lib/rating/package.json
new file mode 100644
index 0000000000..81addfc3ac
--- /dev/null
+++ b/components/lib/rating/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./rating.cjs.js",
+    "module": "./rating.esm.js",
+    "unpkg": "./rating.min.js",
+    "types": "./rating.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/rating/rating.d.ts b/components/lib/rating/rating.d.ts
new file mode 100644
index 0000000000..fc7a38a0fd
--- /dev/null
+++ b/components/lib/rating/rating.d.ts
@@ -0,0 +1,193 @@
+/**
+ *
+ * Rating component is a star based selection input.
+ *
+ * [Live Demo](https://www.primereact.org/rating/)
+ *
+ * @module rating
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type RatingPassThroughType<T> = PassThroughType<T, RatingPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RatingPassThroughMethodOptions {
+    props: RatingProps;
+    context: RatingContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RatingProps.pt}
+ */
+export interface RatingPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RatingPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the cancel icon's DOM element.
+     */
+    cancelIcon?: RatingPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the item's DOM element.
+     */
+    item?: RatingPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the cancel item's DOM element.
+     */
+    cancelItem?: RatingPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the on icon's DOM element.
+     */
+    onIcon?: RatingPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the off icon's DOM element.
+     */
+    offIcon?: RatingPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in Rating component.
+ */
+export interface RatingContext {
+    /**
+     * Current active state of the item as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link RatingProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface RatingChangeEvent extends FormEvent<number> {}
+
+/**
+ * Defines valid properties in Rating component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface RatingProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    /**
+     * Value of the rating.
+     */
+    value?: number | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the input cannot be typed.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Number of stars.
+     * @defaultValue 5
+     */
+    stars?: number | undefined;
+    /**
+     * When specified a cancel icon is displayed to allow removing the value.
+     * @defaultValue true
+     */
+    cancel?: boolean | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on value change.
+     * @param {RatingChangeEvent} event - Custom change event.
+     */
+    onChange?(event: RatingChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Icon for the on state.
+     */
+    onIcon?: IconType<RatingProps> | undefined;
+    /**
+     * Icon for the off state.
+     */
+    offIcon?: IconType<RatingProps> | undefined;
+    /**
+     * Icon for the cancelable state.
+     */
+    cancelIcon?: IconType<RatingProps> | undefined;
+    /**
+     * Properties of the cancel icon.
+     */
+    cancelIconProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /**
+     * Properties of the on icon.
+     */
+    onIconProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /**
+     * Properties of the off icon.
+     */
+    offIconProps?: React.HTMLAttributes<HTMLSpanElement>;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RatingPassThroughOptions}
+     */
+    pt?: RatingPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Rating**
+ *
+ * _Rating component is a star based selection input._
+ *
+ * [Live Demo](https://www.primereact.org/rating/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Rating extends React.Component<RatingProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
new file mode 100644
index 0000000000..5825c1bedc
--- /dev/null
+++ b/components/lib/ripple/Ripple.js
@@ -0,0 +1,129 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useMergeProps, useMountEffect, useStyle, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { DomHandler, classNames } from '../utils/Utils';
+import { RippleBase } from './RippleBase';
+
+export const Ripple = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const [isMounted, setMounted] = React.useState(false);
+        const inkRef = React.useRef(null);
+        const targetRef = React.useRef(null);
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = RippleBase.getProps(inProps, context);
+        const isRippleActive = (context && context.ripple) || PrimeReact.ripple;
+
+        const metaData = {
+            props
+        };
+
+        useStyle(RippleBase.css.styles, { name: 'ripple', manual: !isRippleActive });
+
+        const { ptm, cx } = RippleBase.setMetaData({
+            ...metaData
+        });
+
+        const getTarget = () => {
+            return inkRef.current && inkRef.current.parentElement;
+        };
+
+        const bindEvents = () => {
+            if (targetRef.current) {
+                targetRef.current.addEventListener('pointerdown', onPointerDown);
+            }
+        };
+
+        const unbindEvents = () => {
+            if (targetRef.current) {
+                targetRef.current.removeEventListener('pointerdown', onPointerDown);
+            }
+        };
+
+        const onPointerDown = (event) => {
+            const offset = DomHandler.getOffset(targetRef.current);
+            const offsetX = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(inkRef.current) / 2;
+            const offsetY = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(inkRef.current) / 2;
+
+            activateRipple(offsetX, offsetY);
+        };
+
+        const activateRipple = (offsetX, offsetY) => {
+            if (!inkRef.current || getComputedStyle(inkRef.current, null).display === 'none') {
+                return;
+            }
+
+            DomHandler.removeClass(inkRef.current, 'p-ink-active');
+
+            setDimensions();
+
+            inkRef.current.style.top = offsetY + 'px';
+            inkRef.current.style.left = offsetX + 'px';
+            DomHandler.addClass(inkRef.current, 'p-ink-active');
+        };
+
+        const onAnimationEnd = (event) => {
+            DomHandler.removeClass(event.currentTarget, 'p-ink-active');
+        };
+
+        const setDimensions = () => {
+            if (inkRef.current && !DomHandler.getHeight(inkRef.current) && !DomHandler.getWidth(inkRef.current)) {
+                let d = Math.max(DomHandler.getOuterWidth(targetRef.current), DomHandler.getOuterHeight(targetRef.current));
+
+                inkRef.current.style.height = d + 'px';
+                inkRef.current.style.width = d + 'px';
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getInk: () => inkRef.current,
+            getTarget: () => targetRef.current
+        }));
+
+        useMountEffect(() => {
+            // for App Router in Next.js ^14
+            setMounted(true);
+        });
+
+        useUpdateEffect(() => {
+            if (isMounted && inkRef.current) {
+                targetRef.current = getTarget();
+                setDimensions();
+                bindEvents();
+            }
+        }, [isMounted]);
+
+        useUpdateEffect(() => {
+            if (inkRef.current && !targetRef.current) {
+                targetRef.current = getTarget();
+                setDimensions();
+                bindEvents();
+            }
+        });
+
+        useUnmountEffect(() => {
+            if (inkRef.current) {
+                targetRef.current = null;
+                unbindEvents();
+            }
+        });
+
+        if (!isRippleActive) {
+            return null;
+        }
+
+        const rootProps = mergeProps(
+            {
+                'aria-hidden': true,
+                className: classNames(cx('root'))
+            },
+            RippleBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd} />;
+    })
+);
+
+Ripple.displayName = 'Ripple';
diff --git a/components/lib/ripple/Ripple.spec.js b/components/lib/ripple/Ripple.spec.js
new file mode 100644
index 0000000000..d8876d8986
--- /dev/null
+++ b/components/lib/ripple/Ripple.spec.js
@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { userAgent } from '../../test';
+import { PrimeReactProvider } from '../api/Api';
+import { Button } from '../button/Button';
+
+describe('Ripple', () => {
+    test('when Ripple is enabled, button should have ripple effect on desktop device', async () => {
+        // Arrange
+        userAgent('Chrome');
+        const { container } = render(
+            <PrimeReactProvider ripple={true}>
+                <Button />
+            </PrimeReactProvider>
+        );
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        await userEvent.click(button);
+
+        // Assert
+        expect(button).toBeEnabled();
+        expect(container).toMatchSnapshot();
+    });
+
+    test('when Ripple is enabled, button should have ripple effect on touch device', async () => {
+        // Arrange
+        userAgent('iPhone');
+        const { container } = render(
+            <PrimeReactProvider ripple={true}>
+                <Button />
+            </PrimeReactProvider>
+        );
+        const button = container.getElementsByClassName('p-button')[0];
+
+        // Act
+        fireEvent.touchStart(button, { targetTouches: [{ pageX: '50', pageY: '50' }] });
+
+        // Assert
+        expect(button).toBeEnabled();
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/components/lib/ripple/RippleBase.js b/components/lib/ripple/RippleBase.js
new file mode 100644
index 0000000000..d520f47b20
--- /dev/null
+++ b/components/lib/ripple/RippleBase.js
@@ -0,0 +1,52 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-ripple {
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-ink {
+        display: block;
+        position: absolute;
+        background: rgba(255, 255, 255, 0.5);
+        border-radius: 100%;
+        transform: scale(0);
+    }
+    
+    .p-ink-active {
+        animation: ripple 0.4s linear;
+    }
+    
+    .p-ripple-disabled .p-ink {
+        display: none;
+    }
+}
+
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
+
+`;
+
+const classes = {
+    root: 'p-ink'
+};
+
+export const RippleBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Ripple',
+        children: undefined
+    },
+    css: {
+        styles,
+        classes
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, RippleBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, RippleBase.defaultProps)
+});
diff --git a/components/lib/ripple/__snapshots__/Ripple.spec.js.snap b/components/lib/ripple/__snapshots__/Ripple.spec.js.snap
new file mode 100644
index 0000000000..ad85da2b0f
--- /dev/null
+++ b/components/lib/ripple/__snapshots__/Ripple.spec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ripple when Ripple is enabled, button should have ripple effect on desktop device 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Ripple when Ripple is enabled, button should have ripple effect on touch device 1`] = `
+<div>
+  <button
+    class="p-button p-component"
+    data-pc-name="button"
+    data-pc-section="root"
+  >
+    <span
+      class="p-button-label p-c"
+      data-pc-section="label"
+    >
+       
+    </span>
+  </button>
+</div>
+`;
diff --git a/components/lib/ripple/package.json b/components/lib/ripple/package.json
new file mode 100644
index 0000000000..36293c4b5d
--- /dev/null
+++ b/components/lib/ripple/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./ripple.cjs.js",
+    "module": "./ripple.esm.js",
+    "unpkg": "./ripple.min.js",
+    "types": "./ripple.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/ripple/ripple.d.ts b/components/lib/ripple/ripple.d.ts
new file mode 100644
index 0000000000..fddddfdd79
--- /dev/null
+++ b/components/lib/ripple/ripple.d.ts
@@ -0,0 +1,72 @@
+/**
+ *
+ * Ripple component adds ripple effect to the host element.
+ *
+ * [Live Demo](https://www.primereact.org/ripple)
+ *
+ * @module ripple
+ *
+ */
+import * as React from 'react';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils';
+
+export declare type RipplePassThroughType<T> = PassThroughType<T, RipplePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RipplePassThroughMethodOptions {
+    props: RippleProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RippleProps.pt}
+ */
+export interface RipplePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RipplePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines valid properties in Ripple component.
+ * @group Properties
+ */
+export interface RippleProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RipplePassThroughOptions}
+     */
+    pt?: RipplePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * **PrimeReact - Ripple**
+ *
+ * _Ripple component adds ripple effect to the host element._
+ *
+ * [Live Demo](https://www.primereact.org/ripple/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Ripple extends React.Component<RippleProps, any> {}
diff --git a/components/lib/row/Row.js b/components/lib/row/Row.js
new file mode 100644
index 0000000000..455d7115cd
--- /dev/null
+++ b/components/lib/row/Row.js
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { RowBase } from './RowBase';
+
+export const Row = (inProps) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = RowBase.getProps(inProps, context);
+    //@todo Pass Parent MetaData
+    const { ptm } = RowBase.setMetaData({
+        props: props
+    });
+
+    const rootProps = mergeProps(
+        {
+            className: props.className,
+            style: props.style
+        },
+        RowBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    return <tr {...rootProps}>{props.children}</tr>;
+};
+
+Row.displayName = 'Row';
diff --git a/components/lib/row/RowBase.js b/components/lib/row/RowBase.js
new file mode 100644
index 0000000000..a72dc453ca
--- /dev/null
+++ b/components/lib/row/RowBase.js
@@ -0,0 +1,12 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils } from '../utils/Utils';
+
+export const RowBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Row',
+        style: null,
+        className: null,
+        children: undefined
+    },
+    getCProp: (row, name) => ObjectUtils.getComponentProp(row, name, RowBase.defaultProps)
+});
diff --git a/components/lib/row/package.json b/components/lib/row/package.json
new file mode 100644
index 0000000000..5251abcdea
--- /dev/null
+++ b/components/lib/row/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./row.cjs.js",
+    "module": "./row.esm.js",
+    "unpkg": "./row.min.js",
+    "types": "./row.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/row/row.d.ts b/components/lib/row/row.d.ts
new file mode 100644
index 0000000000..dd8f4b0dbf
--- /dev/null
+++ b/components/lib/row/row.d.ts
@@ -0,0 +1,88 @@
+/**
+ *
+ * Row component is a helper component used to create grouping structures in DataTable.
+ *
+ * [Live Demo](https://www.primereact.org/datatable/)
+ *
+ * @module row
+ *
+ */
+import * as React from 'react';
+import { ColumnGroupPassThroughOptions } from '../columngroup/columngroup';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type RowPassThroughType<T> = PassThroughType<T, RowPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RowPassThroughMethodOptions {
+    props: RowProps;
+    parent: ColumnGroupPassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RowProps.pt}
+ */
+export interface RowPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: RowPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Row component.
+ * @group Properties
+ */
+export interface RowProps {
+    /**
+     * Inline style of the element.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the row.
+     */
+    className?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {RowPassThroughOptions}
+     */
+    pt?: RowPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Row**
+ *
+ * _Row component is a helper component used to create grouping structures in DataTable._
+ *
+ * [Live Demo](https://www.primereact.org/datatable/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Row extends React.Component<RowProps, any> {}
diff --git a/components/lib/scrollpanel/ScrollPanel.js b/components/lib/scrollpanel/ScrollPanel.js
new file mode 100644
index 0000000000..6e2f4a3ec8
--- /dev/null
+++ b/components/lib/scrollpanel/ScrollPanel.js
@@ -0,0 +1,370 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUnmountEffect } from '../hooks/Hooks';
+import { DomHandler, UniqueComponentId, classNames } from '../utils/Utils';
+import { ScrollPanelBase } from './ScrollPanelBase';
+
+export const ScrollPanel = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = ScrollPanelBase.getProps(inProps, context);
+    const [idState, setIdState] = React.useState(props.id);
+    const [orientationState, setOrientationState] = React.useState('vertical');
+
+    const { ptm, cx, isUnstyled } = ScrollPanelBase.setMetaData({
+        props
+    });
+
+    useHandleStyle(ScrollPanelBase.css.styles, isUnstyled, { name: 'scrollpanel' });
+
+    const containerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const xBarRef = React.useRef(null);
+    const yBarRef = React.useRef(null);
+    const [lastScrollLeft, setLastScrollLeft] = React.useState(0);
+    const [lastScrollTop, setLastScrollTop] = React.useState(0);
+    const isXBarClicked = React.useRef(false);
+    const isYBarClicked = React.useRef(false);
+    const lastPageX = React.useRef(null);
+    const lastPageY = React.useRef(null);
+    const scrollXRatio = React.useRef(null);
+    const scrollYRatio = React.useRef(null);
+    const frame = React.useRef(null);
+    const initialized = React.useRef(false);
+    const timer = React.useRef(null);
+    const contentId = idState + '_content';
+
+    const calculateContainerHeight = () => {
+        const containerStyles = getComputedStyle(containerRef.current);
+        const xBarStyles = getComputedStyle(xBarRef.current);
+        const pureContainerHeight = DomHandler.getHeight(containerRef.current) - parseInt(xBarStyles.height, 10);
+
+        if (containerStyles['max-height'] !== 'none' && pureContainerHeight === 0) {
+            if (contentRef.current.offsetHeight + parseInt(xBarStyles.height, 10) > parseInt(containerStyles['max-height'], 10)) {
+                containerRef.current.style.height = containerStyles['max-height'];
+            } else {
+                containerRef.current.style.height =
+                    contentRef.current.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + 'px';
+            }
+        }
+    };
+
+    const moveBar = () => {
+        if (!contentRef.current) return;
+        // horizontal scroll
+        const totalWidth = contentRef.current.scrollWidth;
+        const ownWidth = contentRef.current.clientWidth;
+        const bottom = (containerRef.current.clientHeight - xBarRef.current.clientHeight) * -1;
+
+        scrollXRatio.current = ownWidth / totalWidth;
+
+        // vertical scroll
+        const totalHeight = contentRef.current.scrollHeight;
+        const ownHeight = contentRef.current.clientHeight;
+        const right = (containerRef.current.clientWidth - yBarRef.current.clientWidth) * -1;
+
+        scrollYRatio.current = ownHeight / totalHeight;
+
+        frame.current = window.requestAnimationFrame(() => {
+            if (scrollXRatio.current >= 1) {
+                DomHandler.addClass(xBarRef.current, 'p-scrollpanel-hidden');
+            } else {
+                DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-hidden');
+                DomHandler.applyStyle(xBarRef.current, {
+                    width: Math.max(scrollXRatio.current * 100, 10) + '%',
+                    left: (contentRef.current.scrollLeft / totalWidth) * 100 + '%',
+                    bottom: bottom + 'px'
+                });
+            }
+
+            if (scrollYRatio.current >= 1) {
+                DomHandler.addClass(yBarRef.current, 'p-scrollpanel-hidden');
+            } else {
+                DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-hidden');
+                DomHandler.applyStyle(yBarRef.current, {
+                    height: Math.max(scrollYRatio.current * 100, 10) + '%',
+                    top: 'calc(' + (contentRef.current.scrollTop / totalHeight) * 100 + '% - ' + xBarRef.current.clientHeight + 'px)',
+                    right: right + 'px'
+                });
+            }
+        });
+    };
+
+    const onFocus = (event) => {
+        if (xBarRef.current.isSameNode(event.target)) {
+            setOrientationState('horizontal');
+        } else if (yBarRef.current.isSameNode(event.target)) {
+            setOrientationState('vertical');
+        }
+    };
+
+    const onBlur = () => {
+        if (orientationState === 'horizontal') {
+            setOrientationState('vertical');
+        }
+    };
+
+    const onScroll = (event) => {
+        if (lastScrollLeft !== event.target.scrollLeft) {
+            setLastScrollLeft(event.target.scrollLeft);
+            setOrientationState('horizontal');
+        } else if (lastScrollTop !== event.target.scrollTop) {
+            setLastScrollTop(event.target.scrollTop);
+            setOrientationState('vertical');
+        }
+
+        moveBar();
+    };
+
+    const onYBarMouseDown = (event) => {
+        isYBarClicked.current = true;
+        lastPageY.current = event.pageY;
+        DomHandler.addClass(yBarRef.current, 'p-scrollpanel-grabbed');
+        DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+
+        document.addEventListener('mousemove', onDocumentMouseMove);
+        document.addEventListener('mouseup', onDocumentMouseUp);
+        event.preventDefault();
+    };
+
+    const onXBarMouseDown = (event) => {
+        isXBarClicked.current = true;
+        lastPageX.current = event.pageX;
+        DomHandler.addClass(xBarRef.current, 'p-scrollpanel-grabbed');
+        DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+
+        document.addEventListener('mousemove', onDocumentMouseMove);
+        document.addEventListener('mouseup', onDocumentMouseUp);
+        event.preventDefault();
+    };
+
+    const onDocumentMouseMove = (event) => {
+        if (isXBarClicked.current) {
+            onMouseMoveForXBar(event);
+        } else if (isYBarClicked.current) {
+            onMouseMoveForYBar(event);
+        } else {
+            onMouseMoveForXBar(event);
+            onMouseMoveForYBar(event);
+        }
+    };
+
+    const onMouseMoveForXBar = (event) => {
+        const deltaX = event.pageX - lastPageX.current;
+
+        lastPageX.current = event.pageX;
+
+        frame.current = window.requestAnimationFrame(() => {
+            contentRef.current.scrollLeft += deltaX / scrollXRatio.current;
+        });
+    };
+
+    const onMouseMoveForYBar = (event) => {
+        const deltaY = event.pageY - lastPageY.current;
+
+        lastPageY.current = event.pageY;
+
+        frame.current = window.requestAnimationFrame(() => {
+            contentRef.current.scrollTop += deltaY / scrollYRatio.current;
+        });
+    };
+
+    const onDocumentMouseUp = (event) => {
+        DomHandler.removeClass(yBarRef.current, 'p-scrollpanel-grabbed');
+        DomHandler.removeClass(xBarRef.current, 'p-scrollpanel-grabbed');
+        DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
+
+        document.removeEventListener('mousemove', onDocumentMouseMove);
+        document.removeEventListener('mouseup', onDocumentMouseUp);
+        isXBarClicked.current = false;
+        isYBarClicked.current = false;
+    };
+
+    const onKeyDown = (event) => {
+        if (orientationState === 'vertical') {
+            switch (event.code) {
+                case 'ArrowDown': {
+                    setTimer('scrollTop', props.step);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    setTimer('scrollTop', props.step * -1);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft':
+
+                case 'ArrowRight': {
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        } else if (orientationState === 'horizontal') {
+            switch (event.code) {
+                case 'ArrowRight': {
+                    setTimer('scrollLeft', props.step);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    setTimer('scrollLeft', props.step * -1);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown':
+
+                case 'ArrowUp': {
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        }
+    };
+
+    const onKeyUp = () => {
+        clearTimer();
+    };
+
+    const repeat = (bar, step) => {
+        contentRef.current[bar] += step;
+        moveBar();
+    };
+
+    const setTimer = (bar, step) => {
+        clearTimer();
+        timer.current = setTimeout(() => {
+            repeat(bar, step);
+        }, 40);
+    };
+
+    const clearTimer = () => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+        }
+    };
+
+    const refresh = () => {
+        moveBar();
+    };
+
+    useMountEffect(() => {
+        if (!props.id) {
+            setIdState(UniqueComponentId());
+        }
+
+        moveBar();
+        window.addEventListener('resize', moveBar);
+        calculateContainerHeight();
+        initialized.current = true;
+    });
+
+    useUnmountEffect(() => {
+        if (initialized.current) {
+            window.removeEventListener('resize', moveBar);
+        }
+
+        if (frame.current) {
+            window.cancelAnimationFrame(frame.current);
+        }
+    });
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        refresh,
+        getElement: () => containerRef.current,
+        getContent: () => contentRef.current,
+        getXBar: () => xBarRef.current,
+        getYBar: () => yBarRef.current
+    }));
+
+    const rootProps = mergeProps(
+        {
+            id: props.id,
+            ref: containerRef,
+            style: props.style,
+            className: classNames(props.className, cx('root'))
+        },
+        ScrollPanelBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const wrapperProps = mergeProps(
+        {
+            className: cx('wrapper')
+        },
+        ptm('wrapper')
+    );
+
+    const contentProps = mergeProps(
+        {
+            className: cx('content'),
+            onScroll: onScroll,
+            onMouseEnter: moveBar
+        },
+        ptm('content')
+    );
+
+    const barXProps = mergeProps(
+        {
+            ref: xBarRef,
+            role: 'scrollbar',
+            className: cx('barx'),
+            tabIndex: 0,
+            'aria-valuenow': lastScrollTop,
+            'aria-controls': contentId,
+            'aria-orientation': 'horizontal',
+            onFocus: onFocus,
+            onBlur: onBlur,
+            onKeyDown: onKeyDown,
+            onKeyUp: onKeyUp,
+            onMouseDown: onXBarMouseDown
+        },
+        ptm('barx')
+    );
+
+    const barYProps = mergeProps(
+        {
+            ref: yBarRef,
+            role: 'scrollbar',
+            className: cx('bary'),
+            tabIndex: 0,
+            'aria-valuenow': lastScrollLeft,
+            'aria-controls': contentId,
+            'aria-orientation': 'vertical',
+            onFocus: onFocus,
+            onBlur: onBlur,
+            onKeyDown: onKeyDown,
+            onKeyUp: onKeyUp,
+            onMouseDown: onYBarMouseDown
+        },
+        ptm('bary')
+    );
+
+    return (
+        <div {...rootProps}>
+            <div {...wrapperProps}>
+                <div ref={contentRef} {...contentProps}>
+                    {props.children}
+                </div>
+            </div>
+            <div {...barXProps} />
+            <div {...barYProps} />
+        </div>
+    );
+});
+
+ScrollPanel.displayName = 'ScrollPanel';
diff --git a/components/lib/scrollpanel/ScrollPanel.spec.js b/components/lib/scrollpanel/ScrollPanel.spec.js
new file mode 100644
index 0000000000..6a53fc74fe
--- /dev/null
+++ b/components/lib/scrollpanel/ScrollPanel.spec.js
@@ -0,0 +1,49 @@
+import '@testing-library/jest-dom';
+import { act, render } from '@testing-library/react';
+import * as React from 'react';
+import { snapshot } from '../../test';
+import { ScrollPanel } from './ScrollPanel';
+
+describe('ScrollPanel', () => {
+    snapshot(
+        <>
+            <ScrollPanel id="scrollpanel" style={{ width: '100%', height: '200px' }} className="jest">
+                <div style={{ padding: '1em', lineHeight: '1.5' }}>
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever
+                    anything stands against the good of the family. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not
+                    intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect,
+                    but given to ruthless violence whenever anything stands against the good of the family.
+                </div>
+            </ScrollPanel>
+        </>,
+        'ScrollPanel full settings'
+    );
+    test('refresh method', async () => {
+        // Arrange
+        const ref = React.createRef();
+        const { container } = render(
+            <ScrollPanel id="scrollpanel" style={{ width: '100%', height: '200px' }} className="jest" ref={ref}>
+                <div style={{ padding: '1em', lineHeight: '1.5' }}>
+                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+                    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever
+                    anything stands against the good of the family. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not
+                    intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect,
+                    but given to ruthless violence whenever anything stands against the good of the family.
+                </div>
+            </ScrollPanel>
+        );
+
+        // Act
+        act(() => {
+            ref.current.refresh();
+            ref.current.getElement();
+            ref.current.getContent();
+            ref.current.getXBar();
+            ref.current.getYBar();
+        });
+
+        // Assert
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/components/lib/scrollpanel/ScrollPanelBase.js b/components/lib/scrollpanel/ScrollPanelBase.js
new file mode 100644
index 0000000000..ef6ad83723
--- /dev/null
+++ b/components/lib/scrollpanel/ScrollPanelBase.js
@@ -0,0 +1,75 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+export const ScrollPanelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ScrollPanel',
+        id: null,
+        style: null,
+        className: null,
+        children: undefined,
+        step: 5
+    },
+    css: {
+        classes: {
+            root: 'p-scrollpanel p-component',
+            wrapper: 'p-scrollpanel-wrapper',
+            content: 'p-scrollpanel-content',
+            barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
+            bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
+        },
+        styles: `
+        @layer primereact {
+            .p-scrollpanel-wrapper {
+                overflow: hidden;
+                width: 100%;
+                height: 100%;
+                position: relative;
+                z-index: 1;
+                float: left;
+            }
+
+            .p-scrollpanel-content {
+                height: calc(100% + 18px);
+                width: calc(100% + 18px);
+                padding: 0 18px 18px 0;
+                position: relative;
+                overflow: auto;
+                box-sizing: border-box;
+            }
+
+            .p-scrollpanel-bar {
+                position: relative;
+                background: #c1c1c1;
+                border-radius: 3px;
+                z-index: 2;
+                cursor: pointer;
+                opacity: 0;
+                transition: opacity 0.25s linear;
+            }
+
+            .p-scrollpanel-bar-y {
+                width: 9px;
+                top: 0;
+            }
+
+            .p-scrollpanel-bar-x {
+                height: 9px;
+                bottom: 0;
+            }
+
+            .p-scrollpanel-hidden {
+                visibility: hidden;
+            }
+
+            .p-scrollpanel:hover .p-scrollpanel-bar,
+            .p-scrollpanel:active .p-scrollpanel-bar {
+                opacity: 1;
+            }
+
+            .p-scrollpanel-grabbed {
+                user-select: none;
+            }
+        }
+        `
+    }
+});
diff --git a/components/lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap b/components/lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap
new file mode 100644
index 0000000000..685738b8b4
--- /dev/null
+++ b/components/lib/scrollpanel/__snapshots__/ScrollPanel.spec.js.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScrollPanel ScrollPanel full settings 1`] = `
+<div>
+  <div
+    class="jest p-scrollpanel p-component"
+    data-pc-name="scrollpanel"
+    data-pc-section="root"
+    id="scrollpanel"
+    style="width: 100%; height: 200px;"
+  >
+    <div
+      class="p-scrollpanel-wrapper"
+      data-pc-section="wrapper"
+    >
+      <div
+        class="p-scrollpanel-content"
+        data-pc-section="content"
+      >
+        <div
+          style="padding: 1em; line-height: 1.5;"
+        >
+          The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+        </div>
+      </div>
+    </div>
+    <div
+      aria-controls="scrollpanel_content"
+      aria-orientation="horizontal"
+      aria-valuenow="0"
+      class="p-scrollpanel-bar p-scrollpanel-bar-x"
+      data-pc-section="barx"
+      role="scrollbar"
+      tabindex="0"
+    />
+    <div
+      aria-controls="scrollpanel_content"
+      aria-orientation="vertical"
+      aria-valuenow="0"
+      class="p-scrollpanel-bar p-scrollpanel-bar-y"
+      data-pc-section="bary"
+      role="scrollbar"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
+
+exports[`ScrollPanel refresh method 1`] = `
+<div>
+  <div
+    class="jest p-scrollpanel p-component"
+    data-pc-name="scrollpanel"
+    data-pc-section="root"
+    id="scrollpanel"
+    style="width: 100%; height: 200px;"
+  >
+    <div
+      class="p-scrollpanel-wrapper"
+      data-pc-section="wrapper"
+    >
+      <div
+        class="p-scrollpanel-content"
+        data-pc-section="content"
+      >
+        <div
+          style="padding: 1em; line-height: 1.5;"
+        >
+          The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+        </div>
+      </div>
+    </div>
+    <div
+      aria-controls="scrollpanel_content"
+      aria-orientation="horizontal"
+      aria-valuenow="0"
+      class="p-scrollpanel-bar p-scrollpanel-bar-x"
+      data-pc-section="barx"
+      role="scrollbar"
+      tabindex="0"
+    />
+    <div
+      aria-controls="scrollpanel_content"
+      aria-orientation="vertical"
+      aria-valuenow="0"
+      class="p-scrollpanel-bar p-scrollpanel-bar-y"
+      data-pc-section="bary"
+      role="scrollbar"
+      tabindex="0"
+    />
+  </div>
+</div>
+`;
diff --git a/components/lib/scrollpanel/package.json b/components/lib/scrollpanel/package.json
new file mode 100644
index 0000000000..a19359a6c2
--- /dev/null
+++ b/components/lib/scrollpanel/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./scrollpanel.cjs.js",
+    "module": "./scrollpanel.esm.js",
+    "unpkg": "./scrollpanel.min.js",
+    "types": "./scrollpanel.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/scrollpanel/scrollpanel.d.ts b/components/lib/scrollpanel/scrollpanel.d.ts
new file mode 100644
index 0000000000..5967d631ea
--- /dev/null
+++ b/components/lib/scrollpanel/scrollpanel.d.ts
@@ -0,0 +1,115 @@
+/**
+ *
+ * ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.
+ *
+ * [Live Demo](https://www.primereact.org/scrollpanel/)
+ *
+ * @module scrollpanel
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type ScrollPanelThroughType<T> = PassThroughType<T, ScrollPanelThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollPanelThroughMethodOptions {
+    props: ScrollPanelProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollPanelProps.pt}
+ */
+export interface ScrollPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the horizontal panel's DOM element.
+     */
+    barX?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the vertical panel's DOM element.
+     */
+    barY?: ScrollPanelThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in ScrollPanel component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ScrollPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollPanelPassThroughOptions}
+     */
+    pt?: ScrollPanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ScrollPanel**
+ *
+ * _ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar._
+ *
+ * [Live Demo](https://www.primereact.org/scrollpanel/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ScrollPanel extends React.Component<ScrollPanelProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get content of the scrollpanel.
+     * @return {HTMLDivElement | null} Content element
+     */
+    public getContent(): HTMLDivElement | null;
+    /**
+     * Used to get horizontal scrollbar of the panel.
+     * @return {HTMLDivElement | null} Horizontal bar element
+     */
+    public getXBar(): HTMLDivElement | null;
+    /**
+     * Used to get vertical scrollbar of the panel.
+     * @return {HTMLDivElement | null} Vertical bar element
+     */
+    public getYBar(): HTMLDivElement | null;
+}
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
new file mode 100644
index 0000000000..d96730814b
--- /dev/null
+++ b/components/lib/scrolltop/ScrollTop.js
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useEventListener, useMergeProps, useUnmountEffect } from '../hooks/Hooks';
+import { ChevronUpIcon } from '../icons/chevronup';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { ScrollTopBase } from './ScrollTopBase';
+
+export const ScrollTop = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const [visibleState, setVisibleState] = React.useState(false);
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ScrollTopBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = ScrollTopBase.setMetaData({
+            props,
+            state: {
+                visible: visibleState
+            }
+        });
+
+        useHandleStyle(ScrollTopBase.css.styles, isUnstyled, { name: 'scrolltop' });
+
+        const scrollElementRef = React.useRef(null);
+        const helperRef = React.useRef(null);
+        const isTargetParent = props.target === 'parent';
+
+        const [bindParentScrollListener] = useEventListener({
+            target: () => helperRef.current && helperRef.current.parentElement,
+            type: 'scroll',
+            listener: (event) => {
+                checkVisibility(event.currentTarget.scrollTop);
+            }
+        });
+
+        const [bindDocumentScrollListener] = useEventListener({
+            target: 'window',
+            type: 'scroll',
+            listener: (event) => {
+                event && checkVisibility(DomHandler.getWindowScrollTop());
+            }
+        });
+
+        const onClick = () => {
+            const scrollElement = props.target === 'window' ? window : helperRef.current.parentElement;
+
+            scrollElement.scroll({
+                top: 0,
+                behavior: props.behavior
+            });
+        };
+
+        const checkVisibility = (scrollY) => {
+            setVisibleState(scrollY > props.threshold);
+        };
+
+        const onEnter = () => {
+            ZIndexUtils.set('overlay', scrollElementRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+        };
+
+        const onEntered = () => {
+            props.onShow && props.onShow();
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(scrollElementRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        React.useEffect(() => {
+            if (props.target === 'window') {
+                bindDocumentScrollListener();
+            } else if (props.target === 'parent') {
+                bindParentScrollListener();
+            }
+        }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(scrollElementRef.current);
+        });
+
+        const iconProps = mergeProps(
+            {
+                className: cx('icon')
+            },
+            ptm('icon')
+        );
+        const icon = props.icon || <ChevronUpIcon {...iconProps} />;
+        const scrollIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+        const scrollTopAriaLabel = localeOption('aria') ? localeOption('aria').scrollTop : undefined;
+        const rootProps = mergeProps(
+            {
+                ref: scrollElementRef,
+                type: 'button',
+                className: classNames(props.className, cx('root')),
+                style: props.style,
+                onClick,
+                'aria-label': scrollTopAriaLabel
+            },
+            ScrollTopBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                in: visibleState,
+                timeout: { enter: 150, exit: 150 },
+                options: props.transitionOptions,
+                unmountOnExit: true,
+                onEnter,
+                onEntered,
+                onExited
+            },
+            ptm('transition')
+        );
+
+        return (
+            <>
+                <CSSTransition nodeRef={scrollElementRef} {...transitionProps}>
+                    <button {...rootProps}>
+                        {scrollIcon}
+                        <Ripple />
+                    </button>
+                </CSSTransition>
+                {isTargetParent && <span ref={helperRef} className="p-scrolltop-helper" />}
+            </>
+        );
+    })
+);
+
+ScrollTop.displayName = 'ScrollTop';
diff --git a/components/lib/scrolltop/ScrollTopBase.js b/components/lib/scrolltop/ScrollTopBase.js
new file mode 100644
index 0000000000..4057a18208
--- /dev/null
+++ b/components/lib/scrolltop/ScrollTopBase.js
@@ -0,0 +1,74 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-scrolltop p-link p-component', {
+            'p-scrolltop-sticky': props.target !== 'window'
+        }),
+    icon: 'p-scrolltop-icon',
+    transition: 'p-scrolltop'
+};
+
+const styles = `
+@layer primereact {
+    .p-scrolltop {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-scrolltop-sticky {
+        position: sticky;
+    }
+    
+    .p-scrolltop-sticky.p-link {
+        margin-left: auto;
+    }
+    
+    .p-scrolltop-helper {
+        display: none;
+    }
+    
+    .p-scrolltop-enter {
+        opacity: 0;
+    }
+    
+    .p-scrolltop-enter-active {
+        opacity: 1;
+        transition: opacity .15s;
+    }
+    
+    .p-scrolltop-exit {
+        opacity: 1;
+    }
+    
+    .p-scrolltop-exit-active {
+        opacity: 0;
+        transition: opacity .15s;
+    }
+}
+`;
+
+export const ScrollTopBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ScrollTop',
+        target: 'window',
+        threshold: 400,
+        icon: null,
+        behavior: 'smooth',
+        className: null,
+        style: null,
+        transitionOptions: null,
+        onShow: null,
+        onHide: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/scrolltop/package.json b/components/lib/scrolltop/package.json
new file mode 100644
index 0000000000..182f18c6e0
--- /dev/null
+++ b/components/lib/scrolltop/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./scrolltop.cjs.js",
+    "module": "./scrolltop.esm.js",
+    "unpkg": "./scrolltop.min.js",
+    "types": "./scrolltop.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/scrolltop/scrolltop.d.ts b/components/lib/scrolltop/scrolltop.d.ts
new file mode 100644
index 0000000000..7088202561
--- /dev/null
+++ b/components/lib/scrolltop/scrolltop.d.ts
@@ -0,0 +1,147 @@
+/**
+ *
+ * ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.
+ *
+ * [Live Demo](https://www.primereact.org/scrolltop/)
+ *
+ * @module scrolltop
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type ScrollTopPassThroughType<T> = PassThroughType<T, ScrollTopPassThroughMethodOptions>;
+export declare type ScrollTopPassThroughTransitionType = ReactCSSTransitionProps | ((options: ScrollTopPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollTopPassThroughMethodOptions {
+    props: ScrollTopProps;
+    state: ScrollTopState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollTopProps.pt}
+ */
+export interface ScrollTopPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollTopPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ScrollTopPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: ScrollTopPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in ScrollTop component.
+ */
+export interface ScrollTopState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
+/**
+ * Defines valid properties in ScrollTop component.
+ * @group Properties
+ */
+export interface ScrollTopProps {
+    /**
+     * Target of the ScrollTop, valid values are "window" and "parent".
+     * @defaultValue window
+     */
+    target?: 'window' | 'parent' | undefined;
+    /**
+     * Defines the threshold value of the vertical scroll position of the target to toggle the visibility.
+     * @defaultValue 400
+     */
+    threshold?: number;
+    /**
+     * Name of the icon or JSX.Element for icon.
+     */
+    icon?: IconType<ScrollTopProps>;
+    /**
+     * Defines the scrolling behavior, "smooth" adds an animation and "auto" scrolls with a jump.
+     * @defaultValue smooth
+     */
+    behavior?: 'auto' | 'smooth' | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when overlay panel becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * 	Callback to invoke when overlay becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollTopPassThroughOptions}
+     */
+    pt?: ScrollTopPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ScrollTop**
+ *
+ * _ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly._
+ *
+ * [Live Demo](https://www.primereact.org/scrolltop/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ScrollTop extends React.Component<ScrollTopProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLButtonElement | null} Container element
+     */
+    public getElement(): HTMLButtonElement | null;
+}
diff --git a/components/lib/selectbutton/SelectButton.js b/components/lib/selectbutton/SelectButton.js
new file mode 100644
index 0000000000..62a154b6a4
--- /dev/null
+++ b/components/lib/selectbutton/SelectButton.js
@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { SelectButtonBase } from './SelectButtonBase';
+import { SelectButtonItem } from './SelectButtonItem';
+
+export const SelectButton = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SelectButtonBase.getProps(inProps, context);
+
+        const [focusedIndex, setFocusedIndex] = React.useState(0);
+        const elementRef = React.useRef(null);
+
+        const { ptm, cx, isUnstyled } = SelectButtonBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(SelectButtonBase.css.styles, isUnstyled, { name: 'selectbutton', styled: true });
+
+        const onOptionClick = (event) => {
+            if (props.disabled || isOptionDisabled(event.option)) {
+                return;
+            }
+
+            let selected = isSelected(event.option);
+
+            if (selected && !(props.unselectable && props.allowEmpty)) {
+                return;
+            }
+
+            let optionValue = getOptionValue(event.option);
+            let newValue;
+
+            if (props.multiple) {
+                let currentValue = props.value ? [...props.value] : [];
+
+                newValue = selected ? currentValue.filter((val) => !ObjectUtils.equals(val, optionValue, props.dataKey)) : [...currentValue, optionValue];
+            } else {
+                newValue = selected ? null : optionValue;
+            }
+
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event.originalEvent,
+                    value: newValue,
+                    stopPropagation: () => {
+                        event.originalEvent.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event.originalEvent.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: newValue
+                    }
+                });
+            }
+        };
+
+        const getOptionLabel = (option) => {
+            return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option && option.label !== undefined ? option.label : option;
+        };
+
+        const getOptionValue = (option) => {
+            return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option && option.value !== undefined ? option.value : option;
+        };
+
+        const isOptionDisabled = (option) => {
+            if (props.optionDisabled) {
+                return ObjectUtils.isFunction(props.optionDisabled) ? props.optionDisabled(option) : ObjectUtils.resolveFieldData(option, props.optionDisabled);
+            }
+
+            return option && option.disabled !== undefined ? option.disabled : false;
+        };
+
+        const isSelected = (option) => {
+            let optionValue = getOptionValue(option);
+
+            if (props.multiple) {
+                if (props.value && props.value.length) {
+                    return props.value.some((val) => ObjectUtils.equals(val, optionValue, props.dataKey));
+                }
+            } else {
+                return ObjectUtils.equals(props.value, optionValue, props.dataKey);
+            }
+
+            return false;
+        };
+
+        const createItems = () => {
+            if (props.options && props.options.length) {
+                return props.options.map((option, index) => {
+                    const isDisabled = props.disabled || isOptionDisabled(option);
+                    const optionLabel = getOptionLabel(option);
+                    const tabIndex = props.disabled || index !== focusedIndex ? '-1' : '0';
+                    const selected = isSelected(option);
+                    const key = optionLabel + '_' + index;
+
+                    return (
+                        <SelectButtonItem
+                            hostName="SelectButton"
+                            key={key}
+                            label={optionLabel}
+                            className={option.className}
+                            option={option}
+                            setFocusedIndex={setFocusedIndex}
+                            onClick={onOptionClick}
+                            template={props.itemTemplate}
+                            selected={selected}
+                            tabIndex={tabIndex}
+                            index={index}
+                            disabled={isDisabled}
+                            ptm={ptm}
+                            cx={cx}
+                            elementRef={elementRef}
+                        />
+                    );
+                });
+            }
+
+            return null;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focusFirstElement(elementRef.current),
+            getElement: () => elementRef.current
+        }));
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const items = createItems();
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root')),
+                style: props.style,
+                role: 'group'
+            },
+            SelectButtonBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    {items}
+                    {props.children}
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+SelectButton.displayName = 'SelectButton';
diff --git a/components/lib/selectbutton/SelectButtonBase.js b/components/lib/selectbutton/SelectButtonBase.js
new file mode 100644
index 0000000000..e72c5ed614
--- /dev/null
+++ b/components/lib/selectbutton/SelectButtonBase.js
@@ -0,0 +1,42 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) => classNames('p-selectbutton p-button-group p-component', { 'p-invalid': props.invalid }),
+    button: ({ itemProps: props, focusedState }) =>
+        classNames('p-button p-component', {
+            'p-highlight': props.selected,
+            'p-disabled': props.disabled,
+            'p-focus': focusedState
+        }),
+    label: 'p-button-label p-c'
+};
+
+export const SelectButtonBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'SelectButton',
+        id: null,
+        value: null,
+        options: null,
+        optionLabel: null,
+        optionValue: null,
+        optionDisabled: null,
+        tabIndex: null,
+        multiple: false,
+        invalid: false,
+        unselectable: true,
+        allowEmpty: true,
+        disabled: false,
+        style: null,
+        className: null,
+        dataKey: null,
+        tooltip: null,
+        tooltipOptions: null,
+        itemTemplate: null,
+        onChange: null,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/selectbutton/SelectButtonItem.js b/components/lib/selectbutton/SelectButtonItem.js
new file mode 100644
index 0000000000..6752916a08
--- /dev/null
+++ b/components/lib/selectbutton/SelectButtonItem.js
@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, ObjectUtils } from '../utils/Utils';
+
+export const SelectButtonItem = React.memo((props) => {
+    const [focusedState, setFocusedState] = React.useState(false);
+    const mergeProps = useMergeProps();
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                selected: props.selected,
+                disabled: props.disabled,
+                option: props.option
+            }
+        });
+    };
+
+    const onClick = (event, index) => {
+        props.setFocusedIndex(index);
+
+        if (props.onClick) {
+            props.onClick({
+                originalEvent: event,
+                option: props.option
+            });
+        }
+    };
+
+    const onFocus = () => {
+        setFocusedState(true);
+    };
+
+    const onBlur = () => {
+        setFocusedState(false);
+    };
+
+    const onKeyDown = (event, index) => {
+        switch (event.code) {
+            case 'Space': {
+                onClick(event, index);
+                event.preventDefault();
+                break;
+            }
+
+            case 'ArrowDown':
+
+            case 'ArrowRight': {
+                changeTabIndexes(event, 'next');
+                event.preventDefault();
+                break;
+            }
+
+            case 'ArrowUp':
+
+            case 'ArrowLeft': {
+                changeTabIndexes(event, 'prev');
+                event.preventDefault();
+                break;
+            }
+
+            default:
+                break;
+        }
+    };
+
+    const changeTabIndexes = (event, direction) => {
+        let firstTabableChild;
+        let index;
+
+        for (let i = 0; i <= props.elementRef.current.children.length - 1; i++) {
+            if (props.elementRef.current.children[i].getAttribute('tabindex') === '0') {
+                firstTabableChild = { elem: props.elementRef.current.children[i], index: i };
+            }
+        }
+
+        if (direction === 'prev') {
+            if (firstTabableChild.index === 0) {
+                index = props.elementRef.current.children.length - 1;
+            } else {
+                index = firstTabableChild.index - 1;
+            }
+        } else if (firstTabableChild.index === props.elementRef.current.children.length - 1) {
+            index = 0;
+        } else {
+            index = firstTabableChild.index + 1;
+        }
+
+        props.setFocusedIndex(index);
+        props.elementRef.current.children[index].focus();
+    };
+
+    const createContent = () => {
+        const labelProps = mergeProps(
+            {
+                className: cx('label')
+            },
+            getPTOptions('label')
+        );
+
+        return props.template ? ObjectUtils.getJSXElement(props.template, props.option) : <span {...labelProps}>{props.label}</span>;
+    };
+
+    const content = createContent();
+
+    const buttonProps = mergeProps(
+        {
+            className: classNames(props.className, cx('button', { itemProps: props, focusedState })),
+            role: 'button',
+            'aria-label': props.label,
+            'aria-pressed': props.selected,
+            onClick: (event) => onClick(event, props.index),
+            onKeyDown: (event) => onKeyDown(event, props.index),
+            tabIndex: props.tabIndex,
+            'aria-disabled': props.disabled,
+            onFocus: onFocus,
+            onBlur: onBlur
+        },
+        getPTOptions('button')
+    );
+
+    return (
+        <div {...buttonProps}>
+            {content}
+            {!props.disabled && <Ripple />}
+        </div>
+    );
+});
+
+SelectButtonItem.displayName = 'SelectButtonItem';
diff --git a/components/lib/selectbutton/package.json b/components/lib/selectbutton/package.json
new file mode 100644
index 0000000000..1dfc7c5a52
--- /dev/null
+++ b/components/lib/selectbutton/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./selectbutton.cjs.js",
+    "module": "./selectbutton.esm.js",
+    "unpkg": "./selectbutton.min.js",
+    "types": "./selectbutton.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/selectbutton/selectbutton.d.ts b/components/lib/selectbutton/selectbutton.d.ts
new file mode 100644
index 0000000000..9d90b07005
--- /dev/null
+++ b/components/lib/selectbutton/selectbutton.d.ts
@@ -0,0 +1,210 @@
+/**
+ *
+ * SelectButton is used to choose single or multiple items from a list using buttons.
+ *
+ * [Live Demo](https://www.primereact.org/selectbutton/)
+ *
+ * @module selectbutton
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { PassThroughType } from '../utils/utils';
+
+export declare type SelectButtonPassThroughType<T> = PassThroughType<T, SelectButtonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SelectButtonPassThroughMethodOptions {
+    props: SelectButtonProps;
+    context: SelectButtonContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SelectButtonProps.pt}
+ */
+export interface SelectButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SelectButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the button's DOM element.
+     */
+    button?: SelectButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: SelectButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current options in SelectButton component.
+ */
+export interface SelectButtonContext {
+    /**
+     * Current selected value of the item as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current disabled value of option or disabled property as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Available option.
+     */
+    option: any;
+}
+
+/**
+ * Custom change event.
+ * @see {@link SelectButtonProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface SelectButtonChangeEvent extends FormEvent {}
+
+/**
+ * Defines valid properties in SelectButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SelectButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'unselectable' | 'onChange' | 'ref' | 'pt'> {
+    /**
+     * Value of the component.
+     */
+    value?: any | undefined;
+    /**
+     * An array of objects to display as the available options.
+     */
+    options?: SelectItemOptionsType | undefined;
+    /**
+     * Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.
+     */
+    optionLabel?: string | undefined;
+    /**
+     * Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.
+     */
+    optionValue?: string | undefined;
+    /**
+     * Property name or getter function to use as the disabled flag of an option, defaults to false when not defined.
+     */
+    optionDisabled?: string | ((option: any) => boolean);
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * When specified, allows selecting multiple values.
+     * @defaultValue false
+     */
+    multiple?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Whether selection can be cleared.
+     * @deprecated Use 'allowEmpty' property instead.
+     * @defaultValue true
+     */
+    unselectable?: boolean | undefined;
+    /**
+     * Whether selection can not be cleared.
+     * @defaultValue true
+     */
+    allowEmpty?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * A property to uniquely match the value in options for better performance.
+     */
+    dataKey?: string | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Function that gets the option and returns the content.
+     * @param {*} item - Current item
+     */
+    itemTemplate?(item: any): React.ReactNode;
+    /**
+     * Callback to invoke on value change.
+     * @param {SelectButtonChangeEvent} event - Custom change event.
+     */
+    onChange?(event: SelectButtonChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SelectButtonPassThroughOptions}
+     */
+    pt?: SelectButtonPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - SelectButton**
+ *
+ * _SelectButton is used to choose single or multiple items from a list using buttons._
+ *
+ * [Live Demo](https://www.primereact.org/selectbutton/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SelectButton extends React.Component<SelectButtonProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+}
diff --git a/components/lib/selectitem/package.json b/components/lib/selectitem/package.json
new file mode 100644
index 0000000000..46bd46e124
--- /dev/null
+++ b/components/lib/selectitem/package.json
@@ -0,0 +1,4 @@
+{
+    "types": "./selectitem.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/selectitem/selectitem.d.ts b/components/lib/selectitem/selectitem.d.ts
new file mode 100644
index 0000000000..40a3aeea49
--- /dev/null
+++ b/components/lib/selectitem/selectitem.d.ts
@@ -0,0 +1,45 @@
+/**
+ *
+ * This module contains the interface and types for options in a select component.
+ *
+ * @module selectitem
+ *
+ */
+import { IconType } from '../utils';
+
+/**
+ * Custom options type.
+ */
+export type SelectItemOptionsType = SelectItem[] | any[];
+
+/**
+ * Defines valid properties in SelectItem component.
+ * @group Properties
+ */
+export interface SelectItem {
+    /**
+     * Label of the option.
+     */
+    label?: string;
+    /**
+     * Value of the option.
+     */
+    value?: any;
+    /**
+     * ClassName of the option.
+     */
+    className?: string;
+    /**
+     * Icon to display to the option.
+     */
+    icon?: IconType<SelectItem>;
+    /**
+     * Tooltip text of the option. (Not supported)
+     */
+    title?: string;
+    /**
+     * Whether the option is disabled or not. (Not supported)
+     * @defaultValue false
+     */
+    disabled?: boolean;
+}
diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
new file mode 100644
index 0000000000..479a0cef77
--- /dev/null
+++ b/components/lib/sidebar/Sidebar.js
@@ -0,0 +1,311 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { TimesIcon } from '../icons/times';
+import { Portal } from '../portal/Portal';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { SidebarBase } from './SidebarBase';
+
+export const Sidebar = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = SidebarBase.getProps(inProps, context);
+
+    const [maskVisibleState, setMaskVisibleState] = React.useState(false);
+    const [visibleState, setVisibleState] = React.useState(false);
+    const { ptm, cx, sx, isUnstyled } = SidebarBase.setMetaData({
+        props,
+        state: {
+            containerVisible: maskVisibleState
+        }
+    });
+
+    useHandleStyle(SidebarBase.css.styles, isUnstyled, { name: 'sidebar' });
+
+    const sidebarRef = React.useRef(null);
+    const maskRef = React.useRef(null);
+    const closeIconRef = React.useRef(null);
+    const isCloseOnEscape = visibleState && props.closeOnEscape;
+    const sidebarDisplayOrder = useDisplayOrder('sidebar', isCloseOnEscape);
+
+    useGlobalOnEscapeKey({
+        callback: (event) => {
+            onClose(event);
+        },
+        when: isCloseOnEscape && sidebarDisplayOrder,
+        priority: [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR, sidebarDisplayOrder]
+    });
+
+    const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+        type: 'click',
+        listener: (event) => {
+            if (event.button !== 0) {
+                // ignore anything other than left click
+                return;
+            }
+
+            if (isOutsideClicked(event)) {
+                onClose(event);
+            }
+        }
+    });
+
+    const isOutsideClicked = (event) => {
+        return sidebarRef && sidebarRef.current && !sidebarRef.current.contains(event.target);
+    };
+
+    const focus = () => {
+        const activeElement = document.activeElement;
+        const isActiveElementInDialog = activeElement && sidebarRef && sidebarRef.current.contains(activeElement);
+
+        if (!isActiveElementInDialog && props.showCloseIcon && closeIconRef.current) {
+            closeIconRef.current.focus();
+        }
+    };
+
+    const onMaskClick = (event) => {
+        if (props.dismissable && props.modal && maskRef.current === event.target) {
+            onClose(event);
+        }
+    };
+
+    const onClose = (event) => {
+        props.onHide();
+        event.preventDefault();
+    };
+
+    const onEntered = () => {
+        props.onShow && props.onShow();
+        focus();
+        enableDocumentSettings();
+    };
+
+    const onExiting = () => {
+        if (props.modal) {
+            !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+        }
+    };
+
+    const onExited = () => {
+        ZIndexUtils.clear(maskRef.current);
+        setMaskVisibleState(false);
+        disableDocumentSettings();
+    };
+
+    const enableDocumentSettings = () => {
+        if (props.dismissable && !props.modal) {
+            bindDocumentClickListener();
+        }
+
+        if (props.blockScroll) {
+            DomHandler.blockBodyScroll();
+        }
+    };
+
+    const disableDocumentSettings = () => {
+        unbindDocumentClickListener();
+
+        if (props.blockScroll) {
+            DomHandler.unblockBodyScroll();
+        }
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => sidebarRef.current,
+        getMask: () => maskRef.current,
+        getCloseIcon: () => closeIconRef.current
+    }));
+
+    useMountEffect(() => {
+        if (props.visible) {
+            setMaskVisibleState(true);
+        }
+    });
+
+    useUpdateEffect(() => {
+        if (props.visible && !maskVisibleState) {
+            setMaskVisibleState(true);
+        }
+
+        if (props.visible !== visibleState && maskVisibleState) {
+            setVisibleState(props.visible);
+        }
+    }, [props.visible, maskVisibleState, visibleState]);
+
+    useUpdateEffect(() => {
+        if (maskVisibleState) {
+            ZIndexUtils.set('modal', maskRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.modal) || PrimeReact.zIndex.modal);
+            setVisibleState(true);
+        }
+    }, [maskVisibleState]);
+
+    useUpdateEffect(() => {
+        // #3811 if dismissible state is toggled while open we must unregister and re-regisetr
+        if (visibleState) {
+            unbindDocumentClickListener();
+
+            if (props.dismissable && !props.modal) {
+                bindDocumentClickListener();
+            }
+        }
+    }, [props.dismissable, props.modal, visibleState]);
+
+    useUnmountEffect(() => {
+        disableDocumentSettings();
+        maskRef.current && ZIndexUtils.clear(maskRef.current);
+    });
+
+    const createCloseIcon = () => {
+        const closeButtonProps = mergeProps(
+            {
+                type: 'button',
+                ref: closeIconRef,
+                className: cx('closeButton'),
+                onClick: (e) => onClose(e),
+                'aria-label': props.ariaCloseLabel || ariaLabel('close')
+            },
+            ptm('closeButton')
+        );
+
+        const closeIconProps = mergeProps(
+            {
+                className: cx('closeIcon')
+            },
+            ptm('closeIcon')
+        );
+
+        const icon = props.closeIcon || <TimesIcon {...closeIconProps} />;
+        const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props });
+
+        if (props.showCloseIcon) {
+            return (
+                <button {...closeButtonProps}>
+                    {closeIcon}
+                    <Ripple />
+                </button>
+            );
+        }
+
+        return null;
+    };
+
+    const createHeader = () => {
+        return props.header ? ObjectUtils.getJSXElement(props.header, props) : null;
+    };
+
+    const createIcons = () => {
+        return props.icons ? ObjectUtils.getJSXElement(props.icons, props) : null;
+    };
+
+    const maskProps = mergeProps(
+        {
+            ref: maskRef,
+            style: sx('mask'),
+            className: cx('mask', { maskVisibleState }),
+            onMouseDown: (e) => onMaskClick(e)
+        },
+        ptm('mask')
+    );
+
+    const rootProps = mergeProps(
+        {
+            id: props.id,
+            className: classNames(props.className, cx('root', { context })),
+            style: props.style,
+            role: 'complementary'
+        },
+        SidebarBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const headerProps = mergeProps(
+        {
+            className: cx('header')
+        },
+        ptm('header')
+    );
+
+    const contentProps = mergeProps(
+        {
+            className: cx('content')
+        },
+        ptm('content')
+    );
+
+    const iconsProps = mergeProps(
+        {
+            className: cx('icons')
+        },
+        ptm('icons')
+    );
+
+    const transitionTimeout = {
+        enter: props.fullScreen ? 150 : 300,
+        exit: props.fullScreen ? 150 : 300
+    };
+
+    const transitionProps = mergeProps(
+        {
+            classNames: cx('transition'),
+            in: visibleState,
+            timeout: transitionTimeout,
+            options: props.transitionOptions,
+            unmountOnExit: true,
+            onEntered,
+            onExiting,
+            onExited
+        },
+        ptm('transition')
+    );
+
+    const createTemplateElement = () => {
+        const templateElementProps = { closeIconRef, hide: onClose };
+
+        return (
+            <div {...maskProps}>
+                <CSSTransition nodeRef={sidebarRef} {...transitionProps}>
+                    <div ref={sidebarRef} {...rootProps}>
+                        {ObjectUtils.getJSXElement(inProps.content, templateElementProps)}
+                    </div>
+                </CSSTransition>
+            </div>
+        );
+    };
+
+    const createElement = () => {
+        const closeIcon = createCloseIcon();
+        const icons = createIcons();
+        const header = createHeader();
+
+        return (
+            <div {...maskProps}>
+                <CSSTransition nodeRef={sidebarRef} {...transitionProps}>
+                    <div ref={sidebarRef} {...rootProps}>
+                        <div {...headerProps}>
+                            {header}
+                            <div {...iconsProps}>
+                                {icons}
+                                {closeIcon}
+                            </div>
+                        </div>
+                        <div {...contentProps}>{props.children}</div>
+                    </div>
+                </CSSTransition>
+            </div>
+        );
+    };
+
+    const createSidebar = () => {
+        const element = inProps?.content ? createTemplateElement() : createElement();
+
+        return <Portal element={element} appendTo={props.appendTo} visible />;
+    };
+
+    return maskVisibleState && createSidebar();
+});
+
+Sidebar.displayName = 'Sidebar';
diff --git a/components/lib/sidebar/Sidebar.spec.js b/components/lib/sidebar/Sidebar.spec.js
new file mode 100644
index 0000000000..d502a431dc
--- /dev/null
+++ b/components/lib/sidebar/Sidebar.spec.js
@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Sidebar } from './Sidebar';
+
+describe('Sidebar', () => {
+    test('can be made visible', () => {
+        const hideOn = jest.fn();
+
+        render(<Sidebar visible={true} onHide={hideOn} />);
+
+        const sidebar = screen.queryByRole('complementary');
+
+        expect(sidebar).toBeVisible();
+    });
+});
diff --git a/components/lib/sidebar/SidebarBase.js b/components/lib/sidebar/SidebarBase.js
new file mode 100644
index 0000000000..922a73c8bb
--- /dev/null
+++ b/components/lib/sidebar/SidebarBase.js
@@ -0,0 +1,294 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    closeButton: 'p-sidebar-close p-sidebar-icon p-link',
+    closeIcon: 'p-sidebar-close-icon',
+    mask: ({ props, maskVisibleState }) => {
+        const positions = ['left', 'right', 'top', 'bottom'];
+        const pos = positions.find((item) => item === props.position);
+
+        return classNames(
+            'p-sidebar-mask',
+            pos && !props.fullScreen ? `p-sidebar-${pos}` : '',
+            {
+                'p-component-overlay p-component-overlay-enter': props.modal,
+                'p-sidebar-mask-scrollblocker': props.blockScroll,
+                'p-sidebar-visible': maskVisibleState,
+                'p-sidebar-full': props.fullScreen
+            },
+            props.maskClassName
+        );
+    },
+    header: ({ props }) =>
+        classNames('p-sidebar-header', {
+            'p-sidebar-custom-header': props.header
+        }),
+    content: 'p-sidebar-content',
+    icons: 'p-sidebar-icons',
+    root: ({ props, context }) =>
+        classNames('p-sidebar p-component', {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    transition: 'p-sidebar'
+};
+
+const styles = `
+@layer primereact {
+    .p-sidebar-mask {
+        display: none;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+        background-color: transparent;
+        transition-property: background-color;
+    }
+    
+    .p-sidebar-visible {
+        display: flex;
+    }
+    
+    .p-sidebar-mask.p-component-overlay {
+        pointer-events: auto;
+    }
+    
+    .p-sidebar {
+        display: flex;
+        flex-direction: column;
+        pointer-events: auto;
+        transform: translate3d(0px, 0px, 0px);
+        position: relative;
+    }
+    
+    .p-sidebar-content {
+        overflow-y: auto;
+        flex-grow: 1;
+    }
+    
+    .p-sidebar-header {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+    
+    .p-sidebar-custom-header {
+        justify-content: space-between;
+    }
+    
+    .p-sidebar-icons {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+    
+    .p-sidebar-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-sidebar-full .p-sidebar {
+        transition: none;
+        transform: none;
+        width: 100vw;
+        height: 100vh;
+        max-height: 100%;
+        top: 0px;
+        left: 0px;
+    }
+    
+    /* Animation */
+    /* Top, Bottom, Left and Right */
+    .p-sidebar-top .p-sidebar-enter,
+    .p-sidebar-top .p-sidebar-exit-active {
+        transform: translate3d(0px, -100%, 0px);
+    }
+    
+    .p-sidebar-bottom .p-sidebar-enter,
+    .p-sidebar-bottom .p-sidebar-exit-active {
+        transform: translate3d(0px, 100%, 0px);
+    }
+    
+    .p-sidebar-left .p-sidebar-enter,
+    .p-sidebar-left .p-sidebar-exit-active {
+        transform: translate3d(-100%, 0px, 0px);
+    }
+    
+    .p-sidebar-right .p-sidebar-enter,
+    .p-sidebar-right .p-sidebar-exit-active {
+        transform: translate3d(100%, 0px, 0px);
+    }
+    
+    .p-sidebar-top .p-sidebar-enter-active,
+    .p-sidebar-bottom .p-sidebar-enter-active,
+    .p-sidebar-left .p-sidebar-enter-active,
+    .p-sidebar-right .p-sidebar-enter-active {
+        transform: translate3d(0px, 0px, 0px);
+        transition: all 0.3s;
+    }
+    
+    .p-sidebar-top .p-sidebar-enter-done,
+    .p-sidebar-bottom .p-sidebar-enter-done,
+    .p-sidebar-left .p-sidebar-enter-done,
+    .p-sidebar-right .p-sidebar-enter-done {
+        transform: none;
+    }
+    
+    .p-sidebar-top .p-sidebar-exit-active,
+    .p-sidebar-bottom .p-sidebar-exit-active,
+    .p-sidebar-left .p-sidebar-exit-active,
+    .p-sidebar-right .p-sidebar-exit-active {
+        transition: all 0.3s;
+    }
+    
+    /* Full */
+    .p-sidebar-full .p-sidebar-enter {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+    
+    .p-sidebar-full .p-sidebar-enter-active {
+        opacity: 1;
+        transform: scale(1);
+        transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
+    }
+    
+    .p-sidebar-full .p-sidebar-enter-done {
+        transform: none;
+    }
+    
+    .p-sidebar-full .p-sidebar-exit-active {
+        opacity: 0;
+        transform: scale(0.5);
+        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    
+    /* Size */
+    .p-sidebar-left .p-sidebar {
+        width: 20rem;
+        height: 100%;
+    }
+    
+    .p-sidebar-right .p-sidebar {
+        width: 20rem;
+        height: 100%;
+    }
+    
+    .p-sidebar-top .p-sidebar {
+        height: 10rem;
+        width: 100%;
+    }
+    
+    .p-sidebar-bottom .p-sidebar {
+        height: 10rem;
+        width: 100%;
+    }
+    
+    .p-sidebar-left .p-sidebar-sm,
+    .p-sidebar-right .p-sidebar-sm {
+        width: 20rem;
+    }
+    
+    .p-sidebar-left .p-sidebar-md,
+    .p-sidebar-right .p-sidebar-md {
+        width: 40rem;
+    }
+    
+    .p-sidebar-left .p-sidebar-lg,
+    .p-sidebar-right .p-sidebar-lg {
+        width: 60rem;
+    }
+    
+    .p-sidebar-top .p-sidebar-sm,
+    .p-sidebar-bottom .p-sidebar-sm {
+        height: 10rem;
+    }
+    
+    .p-sidebar-top .p-sidebar-md,
+    .p-sidebar-bottom .p-sidebar-md {
+        height: 20rem;
+    }
+    
+    .p-sidebar-top .p-sidebar-lg,
+    .p-sidebar-bottom .p-sidebar-lg {
+        height: 30rem;
+    }
+    
+    .p-sidebar-left .p-sidebar-view,
+    .p-sidebar-right .p-sidebar-view,
+    .p-sidebar-top .p-sidebar-view,
+    .p-sidebar-bottom .p-sidebar-view {
+        width: 100%;
+        height: 100%;
+    }
+    
+    .p-sidebar-left .p-sidebar-content,
+    .p-sidebar-right .p-sidebar-content,
+    .p-sidebar-top .p-sidebar-content,
+    .p-sidebar-bottom .p-sidebar-content {
+        width: 100%;
+        height: 100%;
+    }
+    
+    @media screen and (max-width: 64em) {
+        .p-sidebar-left .p-sidebar-lg,
+        .p-sidebar-left .p-sidebar-md,
+        .p-sidebar-right .p-sidebar-lg,
+        .p-sidebar-right .p-sidebar-md {
+            width: 20rem;
+        }
+    }        
+}
+`;
+
+const inlineStyles = {
+    mask: ({ props }) => ({
+        position: 'fixed',
+        height: '100%',
+        width: '100%',
+        left: 0,
+        top: 0,
+        display: 'flex',
+        justifyContent: props.position === 'left' ? 'flex-start' : props.position === 'right' ? 'flex-end' : 'center',
+        alignItems: props.position === 'top' ? 'flex-start' : props.position === 'bottom' ? 'flex-end' : 'center'
+    })
+};
+
+export const SidebarBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Sidebar',
+        appendTo: null,
+        ariaCloseLabel: null,
+        baseZIndex: 0,
+        blockScroll: false,
+        children: undefined,
+        className: null,
+        closeIcon: null,
+        closeOnEscape: true,
+        content: null,
+        dismissable: true,
+        fullScreen: false,
+        header: null,
+        icons: null,
+        id: null,
+        maskClassName: null,
+        maskStyle: null,
+        modal: true,
+        onHide: null,
+        onShow: null,
+        position: 'left',
+        showCloseIcon: true,
+        style: null,
+        transitionOptions: null,
+        visible: false
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/sidebar/package.json b/components/lib/sidebar/package.json
new file mode 100644
index 0000000000..c6ec23f0e0
--- /dev/null
+++ b/components/lib/sidebar/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./sidebar.cjs.js",
+    "module": "./sidebar.esm.js",
+    "unpkg": "./sidebar.min.js",
+    "types": "./sidebar.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/sidebar/sidebar.d.ts b/components/lib/sidebar/sidebar.d.ts
new file mode 100644
index 0000000000..406c568737
--- /dev/null
+++ b/components/lib/sidebar/sidebar.d.ts
@@ -0,0 +1,254 @@
+/**
+ *
+ * Sidebar is a panel component displayed as an overlay.
+ *
+ * [Live Demo](https://www.primereact.org/sidebar/)
+ *
+ * @module sidebar
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { Button } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type SidebarPassThroughType<T> = PassThroughType<T, SidebarPassThroughMethodOptions>;
+export declare type SidebarPassThroughTransitionType = ReactCSSTransitionProps | ((options: SidebarPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SidebarPassThroughMethodOptions {
+    props: SidebarProps;
+    state: SidebarState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SidebarProps.pt}
+ */
+export interface SidebarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SidebarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: SidebarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: SidebarPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the close button icon's DOM element.
+     */
+    closeButtonIcon?: SidebarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the custom icons content's DOM element.
+     */
+    icons?: SidebarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: SidebarPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: SidebarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: SidebarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: SidebarPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in Sidebar component.
+ */
+export interface SidebarState {
+    /**
+     * Current container visible state as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+}
+
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link SidebarProps.content}
+ */
+interface ContentProps {
+    /**
+     * Allows you to specify the close button of the sidebar.
+     */
+    closeIconRef: React.RefObject<HTMLButtonElement | HTMLElement | Button>;
+    /**
+     * Callback for hiding the sidebar.
+     * @param {React.SyntheticEvent} event - Used to get the event of the element.
+     */
+    hide(event: React.SyntheticEvent): void;
+}
+
+/**
+ * Defines valid properties in Sidebar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SidebarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'content'> {
+    /**
+     * Inline style of the mask.
+     */
+    maskStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the mask.
+     */
+    maskClassName?: string | undefined;
+    /**
+     * Specifies the visibility of the dialog.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Specifies the position of the sidebar, valid values are "left" and "right".
+     * @defaultValue left
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right' | undefined;
+    /**
+     * Adds a close icon to the header to hide the dialog.
+     * @defaultValue false
+     */
+    fullScreen?: boolean | undefined;
+    /**
+     * Whether to block scrolling of the document when sidebar is active.
+     * @defaultValue false
+     */
+    blockScroll?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Whether to dismiss sidebar on click of the mask.
+     * @defaultValue true
+     */
+    dismissable?: boolean | undefined;
+    /**
+     * Whether to display a close icon inside the panel.
+     * @defaultValue true
+     */
+    showCloseIcon?: boolean | undefined;
+    /**
+     * Icon of the close button.
+     */
+    closeIcon?: IconType<SidebarProps> | undefined;
+    /**
+     * Aria label of the close icon.
+     * @defaultValue close
+     */
+    ariaCloseLabel?: string | undefined;
+    /**
+     * Specifies if pressing escape key should hide the sidebar.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Custom template for the header.
+     * @defaultValue true
+     */
+    header?: React.ReactNode | ((props: SidebarProps) => React.ReactNode);
+    /**
+     * Custom icons template for the header.
+     * @defaultValue true
+     */
+    icons?: React.ReactNode | ((props: SidebarProps) => React.ReactNode);
+    /**
+     * Whether to a modal layer behind the sidebar.
+     * @defaultValue true
+     */
+    modal?: boolean | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and self. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Callback to invoke when sidebar gets shown.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when the actions used to close the sidebar are triggered. Exp; close icon, mask and esc key.
+     */
+    onHide(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SidebarPassThroughOptions}
+     */
+    pt?: SidebarPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Specifies a custom content for the sidebar. For more complex markup, use the "content" slot instead.
+     * @param {ContentProps} props - The values of sidebar.
+     * @return {React.ReactNode}
+     */
+    content?: React.ReactNode | ((props: ContentProps) => React.ReactNode);
+}
+
+/**
+ * **PrimeReact - Sidebar**
+ *
+ * _Sidebar is a panel component displayed as an overlay._
+ *
+ * [Live Demo](https://www.primereact.org/sidebar/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Sidebar extends React.Component<SidebarProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get mask element.
+     * @return {HTMLElement | null} Mask element
+     */
+    public getMask(): HTMLElement | null;
+    /**
+     * Used to get close icon element.
+     * @return {HTMLButtonElement | null} Close icon element
+     */
+    public getCloseIcon(): HTMLButtonElement | null;
+}
diff --git a/components/lib/skeleton/Skeleton.js b/components/lib/skeleton/Skeleton.js
new file mode 100644
index 0000000000..77dc99917d
--- /dev/null
+++ b/components/lib/skeleton/Skeleton.js
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames } from '../utils/Utils';
+import { SkeletonBase } from './SkeletonBase';
+
+export const Skeleton = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SkeletonBase.getProps(inProps, context);
+        const { ptm, cx, sx, isUnstyled } = SkeletonBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(SkeletonBase.css.styles, isUnstyled, { name: 'skeleton' });
+
+        const elementRef = React.useRef(null);
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const style = props.size ? { width: props.size, height: props.size, borderRadius: props.borderRadius } : { width: props.width, height: props.height, borderRadius: props.borderRadius };
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: { ...style, ...sx('root') },
+                'aria-hidden': true
+            },
+            SkeletonBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <div {...rootProps} />;
+    })
+);
+
+Skeleton.displayName = 'Skeleton';
diff --git a/components/lib/skeleton/Skeleton.spec.js b/components/lib/skeleton/Skeleton.spec.js
new file mode 100644
index 0000000000..17f01d6cc9
--- /dev/null
+++ b/components/lib/skeleton/Skeleton.spec.js
@@ -0,0 +1,16 @@
+import '@testing-library/jest-dom';
+import { Skeleton } from './Skeleton';
+
+import { snapshot } from '../../test';
+
+describe('Skeleton', () => {
+    snapshot(<Skeleton />, 'default');
+    snapshot(<Skeleton shape="circle" />, 'shape circle');
+    snapshot(<Skeleton shape="rectangle" />, 'shape rectangle');
+    snapshot(<Skeleton animation="none" />, 'animation none');
+    snapshot(<Skeleton animation="wave" />, 'animation wave');
+    snapshot(<Skeleton borderRadius="16px" />, 'border radius');
+    snapshot(<Skeleton borderRadius="16px" />, 'border radius');
+    snapshot(<Skeleton width="100%" height="2rem" />, 'size width and height');
+    snapshot(<Skeleton size="50px" />, 'size in pixels');
+});
diff --git a/components/lib/skeleton/SkeletonBase.js b/components/lib/skeleton/SkeletonBase.js
new file mode 100644
index 0000000000..d92bee8809
--- /dev/null
+++ b/components/lib/skeleton/SkeletonBase.js
@@ -0,0 +1,71 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-skeleton p-component', {
+            'p-skeleton-circle': props.shape === 'circle',
+            'p-skeleton-none': props.animation === 'none'
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-skeleton {
+        position: relative;
+        overflow: hidden;
+    }
+    
+    .p-skeleton::after {
+        content: "";
+        animation: p-skeleton-animation 1.2s infinite;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translateX(-100%);
+        z-index: 1;
+    }
+    
+    .p-skeleton-circle {
+        border-radius: 50%;
+    }
+    
+    .p-skeleton-none::after {
+        animation: none;
+    }
+}
+
+@keyframes p-skeleton-animation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+`;
+
+const inlineStyles = {
+    root: { position: 'relative' }
+};
+
+export const SkeletonBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Skeleton',
+        shape: 'rectangle',
+        size: null,
+        width: '100%',
+        height: '1rem',
+        borderRadius: null,
+        animation: 'wave',
+        style: null,
+        className: null
+    },
+    css: {
+        classes,
+        inlineStyles,
+        styles
+    }
+});
diff --git a/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap b/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap
new file mode 100644
index 0000000000..5659797671
--- /dev/null
+++ b/components/lib/skeleton/__snapshots__/Skeleton.spec.js.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Skeleton animation none 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component p-skeleton-none"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 1rem; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton animation wave 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 1rem; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton border radius 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 1rem; border-radius: 16px; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton border radius 2`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 1rem; border-radius: 16px; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton default 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 1rem; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton shape circle 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component p-skeleton-circle"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 1rem; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton shape rectangle 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 1rem; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton size in pixels 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 50px; height: 50px; position: relative;"
+  />
+</div>
+`;
+
+exports[`Skeleton size width and height 1`] = `
+<div>
+  <div
+    aria-hidden="true"
+    class="p-skeleton p-component"
+    data-pc-name="skeleton"
+    data-pc-section="root"
+    style="width: 100%; height: 2rem; position: relative;"
+  />
+</div>
+`;
diff --git a/components/lib/skeleton/package.json b/components/lib/skeleton/package.json
new file mode 100644
index 0000000000..016f007c79
--- /dev/null
+++ b/components/lib/skeleton/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./skeleton.cjs.js",
+    "module": "./skeleton.esm.js",
+    "unpkg": "./skeleton.min.js",
+    "types": "./skeleton.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/skeleton/skeleton.d.ts b/components/lib/skeleton/skeleton.d.ts
new file mode 100644
index 0000000000..318c25c5c1
--- /dev/null
+++ b/components/lib/skeleton/skeleton.d.ts
@@ -0,0 +1,112 @@
+/**
+ *
+ * Skeleton is a placeholder to display instead of the actual content.
+ *
+ * [Live Demo](https://www.primereact.org/skeleton/)
+ *
+ * @module skeleton
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type SkeletonPassThroughType<T> = PassThroughType<T, SkeletonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SkeletonPassThroughMethodOptions {
+    props: SkeletonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SkeletonProps.pt}
+ */
+export interface SkeletonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SkeletonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Skeleton component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SkeletonProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * It specifies an alternate text for an image, if the image cannot be displayed.
+     * @defaultValue rectangle
+     */
+    shape?: 'rectangle' | 'circle' | undefined;
+    /**
+     * Size of the Circle or Square.
+     */
+    size?: string | undefined;
+    /**
+     * Width of the element.
+     * @defaultValue 100%
+     */
+    width?: string | undefined;
+    /**
+     * Height of the element.
+     * @defaultValue 1rem
+     */
+    height?: string | undefined;
+    /**
+     * Border radius of the element, defaults to value from theme.
+     */
+    borderRadius?: string | undefined;
+    /**
+     * Type of the animation, valid options are "wave" and "none".
+     * @defaultValue wave
+     */
+    animation?: 'wave' | 'none' | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SkeletonPassThroughOptions}
+     */
+    pt?: SkeletonPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Skeleton**
+ *
+ * _Skeleton is a placeholder to display instead of the actual content._
+ *
+ * [Live Demo](https://www.primereact.org/skeleton/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Skeleton extends React.Component<SkeletonProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
new file mode 100644
index 0000000000..b416900a01
--- /dev/null
+++ b/components/lib/slidemenu/SlideMenu.js
@@ -0,0 +1,259 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronLeftIcon } from '../icons/chevronleft';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { DomHandler, IconUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { SlideMenuBase } from './SlideMenuBase';
+import { SlideMenuSub } from './SlideMenuSub';
+
+export const SlideMenu = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SlideMenuBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const [levelState, setLevelState] = React.useState(0);
+        const [visibleState, setVisibleState] = React.useState(false);
+        const { ptm, cx, sx, isUnstyled } = SlideMenuBase.setMetaData({
+            props,
+            state: {
+                id: idState,
+                visible: visibleState,
+                level: levelState
+            }
+        });
+
+        useHandleStyle(SlideMenuBase.css.styles, isUnstyled, { name: 'slidemenu' });
+
+        const menuRef = React.useRef(null);
+        const targetRef = React.useRef(null);
+        const backward = React.useRef(null);
+        const slideMenuContent = React.useRef(null);
+        const isCloseOnEscape = visibleState && props.popup && props.closeOnEscape;
+        const slideMenuDisplayOrder = useDisplayOrder('slide-menu', isCloseOnEscape);
+
+        useGlobalOnEscapeKey({
+            callback: (event) => {
+                hide(event);
+            },
+            when: isCloseOnEscape && slideMenuDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.SLIDE_MENU, slideMenuDisplayOrder]
+        });
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: targetRef,
+            overlay: menuRef,
+            listener: (event, { valid, type }) => {
+                if (valid) {
+                    if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
+                        hide(event);
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        DomHandler.absolutePosition(menuRef.current, targetRef.current);
+                    }
+                }
+            },
+            when: visibleState
+        });
+
+        const onPanelClick = (event) => {
+            if (props.popup) {
+                OverlayService.emit('overlay-click', {
+                    originalEvent: event,
+                    target: targetRef.current
+                });
+            }
+        };
+
+        const navigateForward = () => {
+            setLevelState((prevLevel) => prevLevel + 1);
+        };
+
+        const navigateBack = () => {
+            setLevelState((prevLevel) => prevLevel - 1);
+        };
+
+        const toggle = (event) => {
+            if (props.popup) {
+                visibleState ? hide(event) : show(event);
+            }
+        };
+
+        const show = (event) => {
+            targetRef.current = event.currentTarget;
+            setVisibleState(true);
+            props.onShow && props.onShow(event);
+        };
+
+        const hide = (event) => {
+            targetRef.current = event.currentTarget;
+            setVisibleState(false);
+            props.onHide && props.onHide(event);
+        };
+
+        const onEnter = () => {
+            if (props.autoZIndex) {
+                ZIndexUtils.set('menu', menuRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
+            }
+
+            DomHandler.addStyles(menuRef.current, { position: 'absolute', top: '0', left: '0' });
+            DomHandler.absolutePosition(menuRef.current, targetRef.current);
+        };
+
+        const onEntered = () => {
+            bindOverlayListener();
+        };
+
+        const onExit = () => {
+            targetRef.current = null;
+            unbindOverlayListener();
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(menuRef.current);
+            setLevelState(0);
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        useUpdateEffect(() => {
+            setLevelState(0);
+        }, [props.model]);
+
+        useUpdateEffect(() => {
+            props.onNavigate && props.onNavigate({ level: levelState });
+        }, [levelState]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(menuRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            toggle,
+            show,
+            hide,
+            navigateForward,
+            navigateBack,
+            setLevelState,
+            getElement: () => menuRef.current
+        }));
+
+        const createBackward = () => {
+            const previousIconProps = mergeProps(
+                {
+                    className: cx('previousIcon')
+                },
+                ptm('previousIcon')
+            );
+            const icon = props.backIcon || <ChevronLeftIcon {...previousIconProps} />;
+            const backIcon = IconUtils.getJSXIcon(icon, { ...previousIconProps }, { props });
+            const previousLabelProps = mergeProps(ptm('previousLabel'));
+            const previousProps = mergeProps(
+                {
+                    ref: backward,
+                    className: cx('previous', { levelState }),
+                    onClick: (e) => navigateBack(e)
+                },
+                ptm('previous')
+            );
+
+            return (
+                <div {...previousProps}>
+                    {backIcon}
+                    <span {...previousLabelProps}>{props.backLabel}</span>
+                </div>
+            );
+        };
+
+        const createElement = () => {
+            const wrapperStyle = { height: props.viewportHeight + 'px' };
+            const backward = createBackward();
+            const rootProps = mergeProps(
+                {
+                    ref: menuRef,
+                    id: props.id,
+                    className: classNames(props.className, cx('root')),
+                    style: props.style,
+                    onClick: (e) => onPanelClick(e)
+                },
+                SlideMenuBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const wrapperProps = mergeProps(
+                {
+                    className: cx('wrapper'),
+                    style: wrapperStyle
+                },
+                ptm('wrapper')
+            );
+
+            const contentProps = mergeProps(
+                {
+                    ref: slideMenuContent,
+                    className: cx('content')
+                },
+                ptm('content')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: !props.popup || visibleState,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter,
+                    onEntered,
+                    onExit,
+                    onExited
+                },
+                ptm('transition')
+            );
+
+            return (
+                <CSSTransition nodeRef={menuRef} {...transitionProps}>
+                    <div {...rootProps}>
+                        <div {...wrapperProps}>
+                            <div {...contentProps}>
+                                <SlideMenuSub
+                                    id={idState}
+                                    hostName="SlideMenu"
+                                    menuProps={props}
+                                    model={props.model}
+                                    root
+                                    index={0}
+                                    menuWidth={props.menuWidth}
+                                    effectDuration={props.effectDuration}
+                                    level={levelState}
+                                    parentActive={levelState === 0}
+                                    onForward={navigateForward}
+                                    submenuIcon={props.submenuIcon}
+                                    ptm={ptm}
+                                    cx={cx}
+                                    sx={sx}
+                                />
+                            </div>
+                        </div>
+                        {backward}
+                    </div>
+                </CSSTransition>
+            );
+        };
+
+        const element = createElement();
+
+        return props.popup ? <Portal element={element} appendTo={props.appendTo} /> : element;
+    })
+);
+
+SlideMenu.displayName = 'SlideMenu';
diff --git a/components/lib/slidemenu/SlideMenuBase.js b/components/lib/slidemenu/SlideMenuBase.js
new file mode 100644
index 0000000000..3dcdd5ef97
--- /dev/null
+++ b/components/lib/slidemenu/SlideMenuBase.js
@@ -0,0 +1,164 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    previousIcon: 'p-slidemenu-backward-icon',
+    previous: ({ levelState }) =>
+        classNames('p-slidemenu-backward', {
+            'p-hidden-space': levelState === 0,
+            'p-slidemenu-separator': levelState > 0
+        }),
+    root: ({ props }) =>
+        classNames('p-slidemenu p-component', {
+            'p-slidemenu-overlay': props.popup
+        }),
+    wrapper: 'p-slidemenu-wrapper',
+    content: 'p-slidemenu-content',
+    separator: 'p-slidemenu-separator',
+    icon: 'p-menuitem-icon',
+    submenuIcon: 'p-submenu-icon',
+    label: 'p-menuitem-text',
+    action: 'p-menuitem-link',
+    menu: ({ subProps: props }) =>
+        classNames({
+            'p-slidemenu-rootlist': props.root,
+            'p-submenu-list': !props.root,
+            'p-active-submenu': props.parentActive
+        }),
+    menuitem: ({ item, active }) => classNames('p-menuitem', { 'p-menuitem-active': active, 'p-disabled': item.disabled }, item.className),
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-slidemenu {
+        width: 12.5em;
+    }
+    
+    .p-slidemenu.p-slidemenu-overlay {
+        position: absolute;
+    }
+    
+    .p-slidemenu .p-menu-separator {
+        border-width: 1px 0 0 0;
+    }
+    
+    .p-slidemenu ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    
+    .p-slidemenu .p-slidemenu-rootlist {
+        position: absolute;
+        top: 0;
+    }
+    
+    .p-slidemenu .p-submenu-list {
+        display: none;
+        position: absolute;
+        top: 0;
+        width: 12.5em;
+    }
+    
+    .p-slidemenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+    }
+    
+    .p-slidemenu .p-menuitem-icon {
+        vertical-align: middle;
+    }
+    
+    .p-slidemenu .p-menuitem-text {
+        vertical-align: middle;
+    }
+    
+    .p-slidemenu .p-menuitem {
+        position: relative;
+    }
+    
+    .p-slidemenu .p-menuitem-link .p-submenu-icon {
+        margin-left: auto;
+    }
+    
+    .p-slidemenu .p-slidemenu-wrapper {
+        position: relative;
+    }
+    
+    .p-slidemenu .p-slidemenu-content {
+        overflow-x: hidden;
+        overflow-y: auto;
+        position: relative;
+        height: 100%;
+    }
+    
+    .p-slidemenu-backward {
+        bottom: 0;
+        width: 100%;
+        padding: 0.25em;
+        cursor: pointer;
+    }
+    
+    .p-slidemenu-backward .p-slidemenu-backward-icon {
+        vertical-align: middle;
+    }
+    
+    .p-slidemenu-backward span {
+        vertical-align: middle;
+    }
+    
+    .p-slidemenu .p-menuitem-active {
+        position: static;
+    }
+    
+    .p-slidemenu .p-menuitem-active > .p-submenu-list {
+        display: block;
+    }
+}
+`;
+
+const inlineStyles = {
+    menu: ({ subProps: props }) => ({
+        width: props.menuWidth + 'px',
+        left: props.root ? -1 * props.level * props.menuWidth + 'px' : props.menuWidth + 'px',
+        transitionProperty: props.root ? 'left' : 'none',
+        transitionDuration: props.effectDuration + 'ms',
+        transitionTimingFunction: props.easing
+    })
+};
+
+export const SlideMenuBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'SlideMenu',
+        appendTo: null,
+        autoZIndex: true,
+        backIcon: null,
+        backLabel: 'Back',
+        baseZIndex: 0,
+        className: null,
+        easing: 'ease-out',
+        effectDuration: 250,
+        id: null,
+        menuWidth: 190,
+        model: null,
+        onHide: null,
+        onShow: null,
+        onNavigate: null,
+        popup: false,
+        style: null,
+        submenuIcon: null,
+        transitionOptions: null,
+        viewportHeight: 175,
+        children: undefined,
+        closeOnEscape: true
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/slidemenu/SlideMenuSub.js b/components/lib/slidemenu/SlideMenuSub.js
new file mode 100644
index 0000000000..f1cfc2d3de
--- /dev/null
+++ b/components/lib/slidemenu/SlideMenuSub.js
@@ -0,0 +1,198 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+import { AngleRightIcon } from '../icons/angleright';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
+
+export const SlideMenuSub = React.memo((props) => {
+    const [activeItemState, setActiveItemState] = React.useState(null);
+    const [renderSubMenu, setRenderSubMenu] = React.useState({});
+    const mergeProps = useMergeProps();
+    const { ptm, cx, sx } = props;
+
+    const getPTOptions = (item, key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                active: activeItemState === item
+            }
+        });
+    };
+
+    const onItemClick = (event, item, index) => {
+        if (item.disabled) {
+            event.preventDefault();
+
+            return;
+        }
+
+        if (item.command) {
+            item.command({
+                originalEvent: event,
+                item: item
+            });
+        }
+
+        if (item.items) {
+            const key = createKey(item, index);
+
+            setRenderSubMenu({ ...renderSubMenu, [key]: true });
+            setActiveItemState(item);
+            props.onForward();
+        }
+
+        if (!item.url) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
+    const createSeparator = (index) => {
+        const key = props.id + '_sep_' + index;
+
+        const separatorProps = mergeProps(
+            {
+                id: key,
+                className: cx('separator'),
+                role: 'separator'
+            },
+            ptm('separator', { hostName: props.hostName })
+        );
+
+        return <li {...separatorProps} key={key} />;
+    };
+
+    const createSubmenu = (item, index) => {
+        const shouldRender = renderSubMenu[createKey(item, index)];
+
+        if (item.items && shouldRender) {
+            return (
+                <SlideMenuSub
+                    id={props.id + '_' + index}
+                    menuProps={props.menuProps}
+                    model={item.items}
+                    index={props.index + 1}
+                    menuWidth={props.menuWidth}
+                    effectDuration={props.effectDuration}
+                    onForward={props.onForward}
+                    parentActive={item === activeItemState}
+                    submenuIcon={props.submenuIcon}
+                    ptm={ptm}
+                    cx={cx}
+                    sx={sx}
+                />
+            );
+        }
+
+        return null;
+    };
+
+    const createKey = (item, index) => {
+        return item.id || props.id + '_' + index;
+    };
+
+    const createMenuitem = (item, index) => {
+        if (item.visible === false) {
+            return null;
+        }
+
+        const key = createKey(item, index);
+        const active = activeItemState === item;
+        const iconClassName = classNames('p-menuitem-icon', item.icon);
+        const iconProps = mergeProps(
+            {
+                className: cx('icon')
+            },
+            getPTOptions(item, 'icon')
+        );
+        const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props: props.menuProps });
+        const submenuIconProps = mergeProps(
+            {
+                className: cx('submenuIcon')
+            },
+            getPTOptions(item, 'submenuIcon')
+        );
+        const labelProps = mergeProps(
+            {
+                className: cx('label')
+            },
+            getPTOptions(item, 'label')
+        );
+        const submenuIcon = item.items && IconUtils.getJSXIcon(props.submenuIcon || <AngleRightIcon {...submenuIconProps} />, { ...submenuIconProps }, { props });
+        const label = item.label && <span {...labelProps}>{item.label}</span>;
+        const submenu = createSubmenu(item, index);
+        const actionProps = mergeProps(
+            {
+                href: item.url || '#',
+                className: cx('action'),
+                target: item.target,
+                onClick: (event) => onItemClick(event, item, index),
+                'aria-disabled': item.disabled
+            },
+            getPTOptions(item, 'action')
+        );
+
+        let content = (
+            <a {...actionProps}>
+                {icon}
+                {label}
+                {submenuIcon}
+            </a>
+        );
+
+        if (item.template) {
+            const defaultContentOptions = {
+                onClick: (event) => onItemClick(event, item, index),
+                className: 'p-menuitem-link',
+                labelClassName: 'p-menuitem-text',
+                iconClassName,
+                submenuIconClassName: 'p-submenu-icon',
+                element: content,
+                props,
+                active
+            };
+
+            content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+        }
+
+        const menuitemProps = mergeProps(
+            {
+                id: key,
+                className: cx('menuitem', { active, item }),
+                style: item.style
+            },
+            getPTOptions(item, 'menuitem')
+        );
+
+        return (
+            <li {...menuitemProps} key={key}>
+                {content}
+                {submenu}
+            </li>
+        );
+    };
+
+    const createItem = (item, index) => {
+        if (item.visible === false) {
+            return null;
+        }
+
+        return item.separator ? createSeparator(index) : createMenuitem(item, index);
+    };
+
+    const createItems = () => {
+        return props.model ? props.model.map(createItem) : null;
+    };
+
+    const items = createItems();
+    const menuProps = mergeProps(
+        {
+            className: cx('menu', { subProps: props }),
+            style: sx('menu', { subProps: props })
+        },
+        ptm('menu', { hostName: props.hostName })
+    );
+
+    return <ul {...menuProps}>{items}</ul>;
+});
+
+SlideMenuSub.displayName = 'SlideMenuSub';
diff --git a/components/lib/slidemenu/package.json b/components/lib/slidemenu/package.json
new file mode 100644
index 0000000000..9a0d1eac97
--- /dev/null
+++ b/components/lib/slidemenu/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./slidemenu.cjs.js",
+    "module": "./slidemenu.esm.js",
+    "unpkg": "./slidemenu.min.js",
+    "types": "./slidemenu.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/slidemenu/slidemenu.d.ts b/components/lib/slidemenu/slidemenu.d.ts
new file mode 100644
index 0000000000..7c5092f038
--- /dev/null
+++ b/components/lib/slidemenu/slidemenu.d.ts
@@ -0,0 +1,290 @@
+/**
+ *
+ * SlideMenu displays submenus with a slide animation.
+ *
+ * [Live Demo](https://www.primereact.org/slidemenu/)
+ *
+ * @module slidemenu
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type SlideMenuPassThroughType<T> = PassThroughType<T, SlideMenuPassThroughMethodOptions>;
+export declare type SlideMenuPassThroughTransitionType = ReactCSSTransitionProps | ((options: SlideMenuPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SlideMenuPassThroughMethodOptions {
+    props: SlideMenuProps;
+    state: SlideMenuState;
+    context: SlideMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SlideMenuProps.pt}
+ */
+export interface SlideMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: SlideMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the previous's DOM element.
+     */
+    previous?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the previous icon's DOM element.
+     */
+    previousIcon?: SlideMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the previous label's DOM element.
+     */
+    previousLabel?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: SlideMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: SlideMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: SlideMenuPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in SlideMenu component.
+ */
+export interface SlideMenuState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current level state as a number.
+     * @defaultValue 0
+     */
+    level: number;
+}
+
+/**
+ * Defines current options in SlideMenu component.
+ */
+export interface SlideMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Custom navigate event
+ * @see {@link SlideMenuProps.onNavigate}
+ * @event
+ */
+interface SlideMenuNavigateEvent {
+    /**
+     * Level of current displayed menu
+     */
+    level: number;
+}
+
+/**
+ * Defines valid properties in SlideMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SlideMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Defines the backward icon.
+     */
+    backIcon?: IconType<SlideMenuProps> | undefined;
+    /**
+     * Label of element to navigate back.
+     * @defaultValue Back
+     */
+    backLabel?: string | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Easing animation to use for sliding.
+     * @defaultValue ease-out
+     */
+    easing?: string | undefined;
+    /**
+     * Duration of the sliding animation in milliseconds.
+     * @defaultValue 250
+     */
+    effectDuration?: number | undefined;
+    /**
+     * Width of the submenus.
+     * @defaultValue 190
+     */
+    menuWidth?: number | undefined;
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Defines if menu would displayed as a popup.
+     * @defaultValue false
+     */
+    popup?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SlideMenuPassThroughOptions}
+     */
+    pt?: SlideMenuPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Icon of the submenu.
+     */
+    submenuIcon?: IconType<SlideMenuProps> | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.
+     * @defaultValue 175
+     */
+    viewportHeight?: number | undefined;
+    /**
+     * Specifies if pressing escape key should hide the SlideMenu Popup.
+     * @defaultValue true
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * Callback to invoke when a popup menu is shown.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onShow?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a popup menu is hidden.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onHide?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a menu is navigated to.
+     * @param {SlideMenuNavigateEvent} event - Navigate event.
+     */
+    onNavigate?(event: SlideMenuNavigateEvent): void;
+}
+
+/**
+ * **PrimeReact - SlideMenu**
+ *
+ * _SlideMenu displays submenus with a slide animation._
+ *
+ * [Live Demo](https://www.primereact.org/slidemenu/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SlideMenu extends React.Component<SlideMenuProps, any> {
+    /**
+     * Displays the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    public show(event: React.SyntheticEvent): void;
+    /**
+     * Hides the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    public hide(event: React.SyntheticEvent): void;
+    /**
+     * Toggles the visibility of the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    public toggle(event: React.SyntheticEvent): void;
+    /**
+     * Navigates the slide menu to this specific level.
+     * @param {number} level - Number of the menu to set
+     */
+    public setLevelState(level: number): void;
+    /**
+     * Navigates the slide menu forward.
+     */
+    public navigateForward(): void;
+    /**
+     * Navigates the slide menu backwards.
+     */
+    public navigateBack(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/slider/Slider.js b/components/lib/slider/Slider.js
new file mode 100644
index 0000000000..c375a4c59d
--- /dev/null
+++ b/components/lib/slider/Slider.js
@@ -0,0 +1,376 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+import { SliderBase } from './SliderBase';
+
+export const Slider = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SliderBase.getProps(inProps, context);
+
+        const elementRef = React.useRef(null);
+        const handleIndex = React.useRef(0);
+        const sliderHandleClick = React.useRef(false);
+        const dragging = React.useRef(false);
+        const initX = React.useRef(0);
+        const initY = React.useRef(0);
+        const barWidth = React.useRef(0);
+        const barHeight = React.useRef(0);
+        const touchId = React.useRef();
+        const value = props.range ? (props.value ?? [props.min, props.max]) : (props.value ?? props.min ?? 0);
+        const horizontal = props.orientation === 'horizontal';
+        const vertical = props.orientation === 'vertical';
+
+        const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({ type: 'mousemove', listener: (event) => onDrag(event) });
+        const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({ type: 'mouseup', listener: (event) => onDragEnd(event) });
+        const [bindDocumentTouchMoveListener, unbindDocumentTouchMoveListener] = useEventListener({ type: 'touchmove', listener: (event) => onDrag(event) });
+        const [bindDocumentTouchEndListener, unbindDocumentTouchEndListener] = useEventListener({ type: 'touchend', listener: (event) => onDragEnd(event) });
+
+        const { ptm, cx, sx, isUnstyled } = SliderBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(SliderBase.css.styles, isUnstyled, { name: 'slider' });
+
+        const spin = (event, dir) => {
+            const val = props.range ? value[handleIndex.current] : value;
+            const step = (props.step || 1) * dir;
+
+            updateValue(event, val + step);
+            event.preventDefault();
+        };
+
+        const onDragStart = (event, index) => {
+            if (props.disabled) {
+                return;
+            }
+
+            dragging.current = true;
+            updateDomData();
+            sliderHandleClick.current = true;
+
+            if (props.range && value[0] === props.max) {
+                handleIndex.current = 0;
+            } else {
+                handleIndex.current = index;
+            }
+
+            event.preventDefault();
+        };
+
+        const onDrag = (event) => {
+            if (dragging.current) {
+                setValue(event);
+                event.preventDefault();
+            }
+        };
+
+        const onDragEnd = (event) => {
+            if (dragging.current) {
+                dragging.current = false;
+
+                const newValue = setValue(event);
+
+                props.onSlideEnd && props.onSlideEnd({ originalEvent: event, value: newValue });
+
+                touchId.current = undefined;
+
+                unbindDocumentMouseMoveListener();
+                unbindDocumentMouseUpListener();
+                unbindDocumentTouchMoveListener();
+                unbindDocumentTouchEndListener();
+            }
+        };
+
+        const onMouseDown = (event, index) => {
+            bindDocumentMouseMoveListener();
+            bindDocumentMouseUpListener();
+            onDragStart(event, index);
+        };
+
+        const onTouchStart = (event, index) => {
+            if (event.changedTouches && event.changedTouches[0]) {
+                touchId.current = event.changedTouches[0].identifier;
+            }
+
+            bindDocumentTouchMoveListener();
+            bindDocumentTouchEndListener();
+            onDragStart(event, index);
+        };
+
+        const onKeyDown = (event, index) => {
+            if (props.disabled) {
+                return;
+            }
+
+            handleIndex.current = index;
+            const key = event.key;
+
+            switch (key) {
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    spin(event, 1);
+                    break;
+
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    spin(event, -1);
+                    break;
+
+                case 'PageUp':
+                    spin(event, 10);
+                    event.preventDefault();
+                    break;
+
+                case 'PageDown':
+                    spin(event, -10);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    spin(event, -value);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    spin(event, props.max);
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onBarClick = (event) => {
+            if (props.disabled) {
+                return;
+            }
+
+            if (!sliderHandleClick.current) {
+                updateDomData();
+                const value = setValue(event);
+
+                props.onSlideEnd && props.onSlideEnd({ originalEvent: event, value });
+            }
+
+            sliderHandleClick.current = false;
+        };
+
+        const updateDomData = () => {
+            const rect = elementRef.current.getBoundingClientRect();
+
+            initX.current = rect.left + DomHandler.getWindowScrollLeft();
+            initY.current = rect.top + DomHandler.getWindowScrollTop();
+            barWidth.current = elementRef.current.offsetWidth;
+            barHeight.current = elementRef.current.offsetHeight;
+        };
+
+        const trackTouch = (event) => {
+            const _event = Array.from(event.changedTouches ?? []).find((t) => t.identifier === touchId.current) || event;
+
+            return {
+                pageX: _event.pageX,
+                pageY: _event.pageY
+            };
+        };
+
+        const setValue = (event) => {
+            let handleValue;
+
+            const { pageX, pageY } = trackTouch(event);
+
+            if (!pageX || !pageY) {
+                return;
+            }
+
+            if (horizontal) {
+                handleValue = ((pageX - initX.current) * 100) / barWidth.current;
+            } else {
+                handleValue = ((initY.current + barHeight.current - pageY) * 100) / barHeight.current;
+            }
+
+            let newValue = (props.max - props.min) * (handleValue / 100) + props.min;
+
+            if (props.step) {
+                const oldValue = props.range ? value[handleIndex.current] : value;
+                const diff = newValue - oldValue;
+
+                if (diff < 0) {
+                    newValue = oldValue + Math.ceil(newValue / props.step - oldValue / props.step) * props.step;
+                } else if (diff > 0) {
+                    newValue = oldValue + Math.floor(newValue / props.step - oldValue / props.step) * props.step;
+                }
+            } else {
+                newValue = Math.floor(newValue);
+            }
+
+            return updateValue(event, newValue);
+        };
+
+        const updateValue = (event, val) => {
+            let parsedValue = parseFloat(val.toFixed(10));
+            let newValue = parsedValue;
+
+            if (props.range) {
+                if (handleIndex.current === 0) {
+                    if (parsedValue < props.min) {
+                        parsedValue = props.min;
+                    } else if (parsedValue > props.max) {
+                        parsedValue = props.max;
+                    }
+                } else if (parsedValue > props.max) {
+                    parsedValue = props.max;
+                } else if (parsedValue < props.min) {
+                    parsedValue = props.min;
+                }
+
+                newValue = [...value];
+                newValue[handleIndex.current] = parsedValue;
+
+                if (props.onChange) {
+                    props.onChange({
+                        originalEvent: event,
+                        value: newValue
+                    });
+                }
+            } else {
+                if (parsedValue < props.min) {
+                    parsedValue = props.min;
+                } else if (parsedValue > props.max) {
+                    parsedValue = props.max;
+                }
+
+                newValue = parsedValue;
+
+                if (props.onChange) {
+                    props.onChange({
+                        originalEvent: event,
+                        value: newValue
+                    });
+                }
+            }
+
+            return newValue;
+        };
+
+        const createHandle = (leftValue, bottomValue, index) => {
+            leftValue = ObjectUtils.isEmpty(leftValue) ? null : leftValue;
+            bottomValue = ObjectUtils.isEmpty(bottomValue) ? null : bottomValue;
+
+            const style = {
+                transition: dragging.current ? 'none' : null,
+                left: leftValue != null ? leftValue + '%' : null,
+                bottom: bottomValue != null ? bottomValue + '%' : null
+            };
+
+            const handleProps = mergeProps(
+                {
+                    className: cx('handle', { index, handleIndex }),
+                    style: { ...sx('handle', { dragging, leftValue, bottomValue }), ...style },
+                    tabIndex: props.tabIndex,
+                    role: 'slider',
+                    onMouseDown: (event) => onMouseDown(event, index),
+                    onTouchStart: (event) => onTouchStart(event, index),
+                    onKeyDown: (event) => onKeyDown(event, index),
+                    'aria-valuemin': props.min,
+                    'aria-valuemax': props.max,
+                    'aria-valuenow': leftValue || bottomValue || 0,
+                    'aria-orientation': props.orientation,
+                    ...ariaProps
+                },
+                ptm('handle')
+            );
+
+            return <span {...handleProps} />;
+        };
+
+        const createRangeSlider = () => {
+            const handleValueStart = ((value[0] < props.min ? props.min : value[0] - props.min) * 100) / (props.max - props.min);
+            const handleValueEnd = ((value[1] > props.max ? props.max : value[1] - props.min) * 100) / (props.max - props.min);
+
+            const rangeStartHandle = horizontal ? createHandle(handleValueStart, null, 0) : createHandle(null, handleValueStart, 0);
+            const rangeEndHandle = horizontal ? createHandle(handleValueEnd, null, 1) : createHandle(null, handleValueEnd, 1);
+            const rangeSliderWidth = handleValueEnd > handleValueStart ? handleValueEnd - handleValueStart : handleValueStart - handleValueEnd;
+            const rangeSliderPosition = handleValueEnd > handleValueStart ? handleValueStart : handleValueEnd;
+
+            const rangeStyle = horizontal ? { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
+
+            const rangeProps = mergeProps(
+                {
+                    className: cx('range'),
+                    style: { ...sx('range'), ...rangeStyle }
+                },
+                ptm('range')
+            );
+
+            return (
+                <>
+                    <span {...rangeProps} />
+                    {rangeStartHandle}
+                    {rangeEndHandle}
+                </>
+            );
+        };
+
+        const createSingleSlider = () => {
+            let handleValue;
+
+            if (value < props.min) {
+                handleValue = props.min;
+            } else if (value > props.max) {
+                handleValue = props.max;
+            } else {
+                handleValue = ((value - props.min) * 100) / (props.max - props.min);
+            }
+
+            const rangeStyle = horizontal ? { width: handleValue + '%' } : { height: handleValue + '%' };
+            const handle = horizontal ? createHandle(handleValue, null, null) : createHandle(null, handleValue, null);
+
+            const rangeProps = mergeProps(
+                {
+                    className: cx('range'),
+                    style: { ...sx('range'), ...rangeStyle }
+                },
+                ptm('range')
+            );
+
+            return (
+                <>
+                    <span {...rangeProps} />
+                    {handle}
+                </>
+            );
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const otherProps = SliderBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+
+        const content = props.range ? createRangeSlider() : createSingleSlider();
+        const rootProps = mergeProps(
+            {
+                style: props.style,
+                className: classNames(props.className, cx('root', { vertical, horizontal })),
+                onClick: onBarClick
+            },
+            SliderBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div id={props.id} ref={elementRef} {...rootProps}>
+                {content}
+            </div>
+        );
+    })
+);
+
+Slider.displayName = 'Slider';
diff --git a/components/lib/slider/SliderBase.js b/components/lib/slider/SliderBase.js
new file mode 100644
index 0000000000..b9623e44d7
--- /dev/null
+++ b/components/lib/slider/SliderBase.js
@@ -0,0 +1,97 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    handle: ({ index, handleIndex }) =>
+        classNames('p-slider-handle', {
+            'p-slider-handle-start': index === 0,
+            'p-slider-handle-end': index === 1,
+            'p-slider-handle-active': handleIndex.current === index
+        }),
+    range: 'p-slider-range',
+    root: ({ props, vertical, horizontal }) =>
+        classNames('p-slider p-component', {
+            'p-disabled': props.disabled,
+            'p-slider-horizontal': horizontal,
+            'p-slider-vertical': vertical
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-slider {
+        position: relative;
+    }
+    
+    .p-slider .p-slider-handle {
+        position: absolute;
+        cursor: grab;
+        touch-action: none;
+        display: block;
+        z-index: 1;
+    }
+    
+    .p-slider .p-slider-handle.p-slider-handle-active {
+        z-index: 2;
+    }
+    
+    .p-slider-range {
+        position: absolute;
+        display: block;
+    }
+    
+    .p-slider-horizontal .p-slider-range {
+        top: 0;
+        left: 0;
+        height: 100%;
+    }
+    
+    .p-slider-horizontal .p-slider-handle {
+        top: 50%;
+    }
+    
+    .p-slider-vertical {
+        height: 100px;
+    }
+    
+    .p-slider-vertical .p-slider-handle {
+        left: 50%;
+    }
+    
+    .p-slider-vertical .p-slider-range {
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+}
+`;
+
+const inlineStyles = {
+    handle: { position: 'absolute' },
+    range: { position: 'absolute' }
+};
+
+export const SliderBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Slider',
+        id: null,
+        value: null,
+        min: 0,
+        max: 100,
+        orientation: 'horizontal',
+        step: null,
+        range: false,
+        style: null,
+        className: null,
+        disabled: false,
+        tabIndex: 0,
+        onChange: null,
+        onSlideEnd: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/slider/package.json b/components/lib/slider/package.json
new file mode 100644
index 0000000000..136e5163a0
--- /dev/null
+++ b/components/lib/slider/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./slider.cjs.js",
+    "module": "./slider.esm.js",
+    "unpkg": "./slider.min.js",
+    "types": "./slider.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/slider/slider.d.ts b/components/lib/slider/slider.d.ts
new file mode 100644
index 0000000000..7314e1fc5e
--- /dev/null
+++ b/components/lib/slider/slider.d.ts
@@ -0,0 +1,165 @@
+/**
+ *
+ * Slider is a component to provide input with a drag handle.
+ *
+ * [Live Demo](https://www.primereact.org/slider/)
+ *
+ * @module slider
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type SliderPassThroughType<T> = PassThroughType<T, SliderPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SliderPassThroughMethodOptions {
+    props: SliderProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SliderProps.pt}
+ */
+export interface SliderPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SliderPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the range's DOM element.
+     */
+    range?: SliderPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the handle's DOM element.
+     */
+    handle?: SliderPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom change event.
+ * @see {@link SliderProps.onChange}
+ * @event
+ */
+interface SliderChangeEvent {
+    /**
+     * Slide event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value
+     */
+    value: number | [number, number];
+}
+
+/**
+ * Custom slide event.
+ * @see {@link SliderProps.onSlideEnd}
+ * @extends {SliderChangeEvent}
+ * @event
+ */
+interface SliderSlideEndEvent extends SliderChangeEvent {}
+
+/**
+ * Defines valid properties in Slider component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SliderProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'pt'> {
+    /**
+     * Value of the component.
+     * @defaultValue 0
+     */
+    value?: number | [number, number] | undefined;
+    /**
+     * Mininum boundary value.
+     * @defaultValue 0
+     */
+    min?: number | undefined;
+    /**
+     * Maximum boundary value.
+     * @defaultValue 100
+     */
+    max?: number | undefined;
+    /**
+     * Orientation of the slider, valid values are horizontal and vertical.
+     * @defaultValue horizontal
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Step factor to increment/decrement the value.
+     * @defaultValue 1
+     */
+    step?: number | undefined;
+    /**
+     * When speficed, allows two boundary values to be picked.
+     * @defaultValue false
+     */
+    range?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * Callback to invoke on value change via slide.
+     * @param {SliderChangeEvent} event - Custom change event
+     */
+    onChange?(event: SliderChangeEvent): void;
+    /**
+     * Callback to invoke when slide ends.
+     * @param {SliderSlideEndEvent} event - Custom slide event
+     */
+    onSlideEnd?(event: SliderSlideEndEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SliderPassThroughOptions}
+     */
+    pt?: SliderPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Slider**
+ *
+ * _Slider is a component to provide input with a drag handle._
+ *
+ * [Live Demo](https://www.primereact.org/slider/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Slider extends React.Component<SliderProps, any> {
+    /**
+     * Returns the reference of slider's container.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
new file mode 100644
index 0000000000..14cbfc3eb2
--- /dev/null
+++ b/components/lib/speeddial/SpeedDial.js
@@ -0,0 +1,616 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useEventListener, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { MinusIcon } from '../icons/minus';
+import { PlusIcon } from '../icons/plus';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { SpeedDialBase } from './SpeedDialBase';
+
+export const SpeedDial = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const [visibleState, setVisibleState] = React.useState(false);
+        const [idState, setIdState] = React.useState(null);
+        const [focused, setFocused] = React.useState(false);
+        const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
+        const isItemClicked = React.useRef(false);
+        const elementRef = React.useRef(null);
+        const listRef = React.useRef(null);
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SpeedDialBase.getProps(inProps, context);
+        const visible = props.onVisibleChange ? props.visible : visibleState;
+        const speedDialDisplayOrder = useDisplayOrder('speed-dial', visible);
+        const metaData = {
+            props,
+            state: {
+                visible
+            }
+        };
+        const { ptm, cx, sx, isUnstyled } = SpeedDialBase.setMetaData(metaData);
+
+        useHandleStyle(SpeedDialBase.css.styles, isUnstyled, { name: 'speeddial' });
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: visible && speedDialDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.SPEED_DIAL, speedDialDisplayOrder]
+        });
+
+        const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+            type: 'click',
+            listener: (event) => {
+                if (!isItemClicked.current && isOutsideClicked(event)) {
+                    hide();
+                }
+
+                isItemClicked.current = false;
+            },
+            when: visibleState
+        });
+
+        const show = () => {
+            props.onVisibleChange ? props.onVisibleChange(true) : setVisibleState(true);
+            props.onShow && props.onShow();
+        };
+
+        const onFocus = () => {
+            setFocused(true);
+        };
+
+        const onBlur = () => {
+            setFocused(false);
+            setFocusedOptionIndex(-1);
+        };
+
+        const hide = () => {
+            props.onVisibleChange ? props.onVisibleChange(false) : setVisibleState(false);
+            props.onHide && props.onHide();
+        };
+
+        const onClick = (e) => {
+            visible ? hide() : show();
+            props.onClick && props.onClick(e);
+
+            isItemClicked.current = true;
+        };
+
+        const onItemClick = (e, item) => {
+            item.command && item.command({ originalEvent: e, item });
+            hide();
+
+            isItemClicked.current = true;
+            e.preventDefault();
+        };
+
+        const onKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDown(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUp(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeft(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRight(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onTogglerKeydown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                case 'ArrowLeft':
+                    onTogglerArrowDown(event);
+
+                    break;
+
+                case 'ArrowUp':
+                case 'ArrowRight':
+                    onTogglerArrowUp(event);
+
+                    break;
+
+                case 'Escape':
+                    onEscapeKey();
+
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onTogglerArrowUp = (event) => {
+            setFocused(true);
+            DomHandler.focus(listRef.current);
+
+            show();
+            navigatePrevItem(event);
+
+            event.preventDefault();
+        };
+
+        const onTogglerArrowDown = (event) => {
+            setFocused(true);
+            DomHandler.focus(listRef.current);
+
+            show();
+            navigateNextItem(event);
+
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            const items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
+            const itemIndex = [...items].findIndex((item) => item.id === focusedOptionIndex);
+
+            onItemClick(event, props.model[itemIndex]);
+            onBlur(event);
+
+            const buttonEl = DomHandler.findSingle(elementRef.current, 'button');
+
+            buttonEl && DomHandler.focus(buttonEl);
+        };
+
+        const onEscapeKey = () => {
+            hide();
+
+            const buttonEl = DomHandler.findSingle(elementRef.current, 'button');
+
+            buttonEl && DomHandler.focus(buttonEl);
+        };
+
+        const onArrowUp = (event) => {
+            let direction = props.direction;
+
+            if (direction === 'up') {
+                navigateNextItem(event);
+            } else if (direction === 'down') {
+                navigatePrevItem(event);
+            } else {
+                navigateNextItem(event);
+            }
+        };
+
+        const onArrowDown = (event) => {
+            let direction = props.direction;
+
+            if (direction === 'up') {
+                navigatePrevItem(event);
+            } else if (direction === 'down') {
+                navigateNextItem(event);
+            } else {
+                navigatePrevItem(event);
+            }
+        };
+
+        const onArrowLeft = (event) => {
+            let direction = props.direction;
+            const leftValidDirections = ['left', 'up-right', 'down-left'];
+            const rightValidDirections = ['right', 'up-left', 'down-right'];
+
+            if (leftValidDirections.includes(direction)) {
+                navigateNextItem(event);
+            } else if (rightValidDirections.includes(direction)) {
+                navigatePrevItem(event);
+            } else {
+                navigatePrevItem(event);
+            }
+        };
+
+        const onArrowRight = (event) => {
+            let direction = props.direction;
+            const leftValidDirections = ['left', 'up-right', 'down-left'];
+            const rightValidDirections = ['right', 'up-left', 'down-right'];
+
+            if (leftValidDirections.includes(direction)) {
+                navigatePrevItem(event);
+            } else if (rightValidDirections.includes(direction)) {
+                navigateNextItem(event);
+            } else {
+                navigateNextItem(event);
+            }
+        };
+
+        const onEndKey = (event) => {
+            event.preventDefault();
+
+            setFocusedOptionIndex(-1);
+            navigatePrevItem(event, -1);
+        };
+
+        const onHomeKey = (event) => {
+            event.preventDefault();
+
+            setFocusedOptionIndex(-1);
+            navigateNextItem(event, -1);
+        };
+
+        const navigateNextItem = (event, index = null) => {
+            const optionIndex = findNextOptionIndex(index || focusedOptionIndex);
+
+            changeFocusedOptionIndex(optionIndex);
+
+            event.preventDefault();
+        };
+
+        const navigatePrevItem = (event, index = null) => {
+            const optionIndex = findPrevOptionIndex(index || focusedOptionIndex);
+
+            changeFocusedOptionIndex(optionIndex);
+
+            event.preventDefault();
+        };
+
+        const changeFocusedOptionIndex = (index) => {
+            const items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
+            const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
+
+            if (filteredItems[index]) {
+                setFocusedOptionIndex(filteredItems[index].getAttribute('id'));
+            }
+        };
+
+        const findPrevOptionIndex = (index) => {
+            const items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
+            const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
+            const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
+            let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
+
+            matchedOptionIndex = index === -1 ? filteredItems.length - 1 : matchedOptionIndex - 1;
+
+            return matchedOptionIndex;
+        };
+
+        const findNextOptionIndex = (index) => {
+            const items = DomHandler.find(elementRef.current, '[data-pc-section="menuitem"]');
+            const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
+            const newIndex = index === -1 ? filteredItems[0].id : index;
+            let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
+
+            matchedOptionIndex = index === -1 ? 0 : matchedOptionIndex + 1;
+
+            return matchedOptionIndex;
+        };
+
+        const isOutsideClicked = (event) => {
+            return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target));
+        };
+
+        const isItemActive = (id) => {
+            return focusedOptionIndex === id;
+        };
+
+        const focusedOptionId = () => {
+            return focusedOptionIndex !== -1 ? focusedOptionIndex : null;
+        };
+
+        const calculateTransitionDelay = (index) => {
+            const length = props.model.length;
+
+            return (visible ? index : length - index - 1) * props.transitionDelay;
+        };
+
+        const calculatePointStyle = (index) => {
+            const type = props.type;
+
+            if (type !== 'linear') {
+                const length = props.model.length;
+                const radius = props.radius || length * 20;
+
+                if (type === 'circle') {
+                    const step = (2 * Math.PI) / length;
+
+                    return {
+                        left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
+                        top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`
+                    };
+                } else if (type === 'semi-circle') {
+                    const direction = props.direction;
+                    const step = Math.PI / (length - 1);
+                    const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
+                    const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
+                    if (direction === 'up') {
+                        return { left: x, bottom: y };
+                    } else if (direction === 'down') {
+                        return { left: x, top: y };
+                    } else if (direction === 'left') {
+                        return { right: y, top: x };
+                    } else if (direction === 'right') {
+                        return { left: y, top: x };
+                    }
+                } else if (type === 'quarter-circle') {
+                    const direction = props.direction;
+                    const step = Math.PI / (2 * (length - 1));
+                    const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
+                    const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
+                    if (direction === 'up-left') {
+                        return { right: x, bottom: y };
+                    } else if (direction === 'up-right') {
+                        return { left: x, bottom: y };
+                    } else if (direction === 'down-left') {
+                        return { right: y, top: x };
+                    } else if (direction === 'down-right') {
+                        return { left: y, top: x };
+                    }
+                }
+            }
+
+            return {};
+        };
+
+        const getItemStyle = (index) => {
+            const transitionDelay = calculateTransitionDelay(index);
+            const pointStyle = calculatePointStyle(index);
+
+            return {
+                transitionDelay: `${transitionDelay}ms`,
+                ...pointStyle
+            };
+        };
+
+        useMountEffect(() => {
+            if (props.type !== 'linear') {
+                const button = DomHandler.findSingle(elementRef.current, '.p-speeddial-button');
+                const firstItem = DomHandler.findSingle(listRef.current, '.p-speeddial-item');
+
+                if (button && firstItem) {
+                    const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
+                    const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
+
+                    listRef.current.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
+                    listRef.current.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
+                }
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (visibleState) {
+                props.hideOnClickOutside && bindDocumentClickListener();
+            }
+
+            return () => {
+                props.hideOnClickOutside && unbindDocumentClickListener();
+            };
+        }, [visibleState]);
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            getElement: () => elementRef.current
+        }));
+
+        const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            const { disabled, icon: _icon, label, template, url, target, className: _itemClassName, style: _itemStyle } = item;
+            const contentClassName = classNames('p-speeddial-action', { 'p-disabled': disabled });
+            const iconClassName = classNames('p-speeddial-action-icon', _icon);
+            const actionIconProps = mergeProps(
+                {
+                    className: cx('actionIcon')
+                },
+                ptm('actionIcon')
+            );
+            const actionProps = mergeProps(
+                {
+                    href: url || '#',
+                    role: 'menuitem',
+                    className: classNames(_itemClassName, cx('action', { disabled })),
+                    'aria-label': item.label,
+                    style: _itemStyle,
+                    target: target,
+                    tabIndex: '-1',
+                    'data-pr-tooltip': label,
+                    onClick: (e) => onItemClick(e, item)
+                },
+                ptm('action')
+            );
+            const icon = IconUtils.getJSXIcon(_icon, { ...actionIconProps }, { props });
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    <Ripple />
+                </a>
+            );
+
+            if (template) {
+                const defaultContentOptions = {
+                    onClick: (e) => onItemClick(e, item),
+                    className: contentClassName,
+                    iconClassName,
+                    element: content,
+                    props,
+                    visible
+                };
+
+                content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
+            }
+
+            const menuItemProps = mergeProps(
+                {
+                    id: `${idState}_${index}`,
+                    className: cx('menuitem', { active: isItemActive(`${idState}_${index}`) }),
+                    style: getItemStyle(index),
+                    role: 'menuitem'
+                },
+                ptm('menuitem')
+            );
+
+            return (
+                <li {...menuItemProps} key={`${idState}_${index}`}>
+                    {content}
+                </li>
+            );
+        };
+
+        const createItems = () => {
+            return props.model ? props.model.map(createItem) : null;
+        };
+
+        const createList = () => {
+            const items = createItems();
+            const menuProps = mergeProps(
+                {
+                    ref: listRef,
+                    className: cx('menu'),
+                    style: sx('menu'),
+                    role: 'menu',
+                    tabIndex: '-1',
+                    onFocus,
+                    onKeyDown,
+                    onBlur,
+                    'aria-activedescendant': focused ? focusedOptionId() : undefined
+                },
+                ptm('menu')
+            );
+
+            return <ul {...menuProps}>{items}</ul>;
+        };
+
+        const createButton = () => {
+            const showIconVisible = (!visible && !!props.showIcon) || !props.hideIcon;
+            const hideIconVisible = visible && !!props.hideIcon;
+            const className = classNames(
+                'p-speeddial-button p-button-rounded',
+                {
+                    'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
+                },
+                props.buttonClassName
+            );
+            const iconClassName = classNames({
+                [`${props.showIcon}`]: (!visible && !!props.showIcon) || !props.hideIcon,
+                [`${props.hideIcon}`]: visible && !!props.hideIcon
+            });
+            const icon = showIconVisible ? props.showIcon || <PlusIcon /> : hideIconVisible ? props.hideIcon || <MinusIcon /> : null;
+            const toggleIcon = IconUtils.getJSXIcon(icon, undefined, { props, visible });
+            const buttonProps = mergeProps({
+                type: 'button',
+                style: props.buttonStyle,
+                className: classNames(props.buttonClassName, cx('button')),
+                icon: toggleIcon,
+                onClick: (e) => onClick(e),
+                disabled: props.disabled,
+                onKeyDown: onTogglerKeydown,
+                'aria-label': props['aria-label'],
+                'aria-expanded': visible,
+                'aria-haspopup': true,
+                'aria-controls': getAriaControls,
+                'aria-labelledby': props.ariaLabelledby,
+                pt: ptm('button'),
+                unstyled: props.unstyled,
+                __parentMetadata: {
+                    parent: metaData
+                }
+            });
+            const content = <Button {...buttonProps} />;
+
+            if (props.buttonTemplate) {
+                const defaultContentOptions = {
+                    onClick,
+                    className,
+                    iconClassName,
+                    element: content,
+                    props,
+                    visible
+                };
+
+                return ObjectUtils.getJSXElement(props.buttonTemplate, defaultContentOptions);
+            }
+
+            return content;
+        };
+
+        const getAriaControls = () => {
+            let ariaControls = '';
+
+            for (let index = 0; index < props.model.length; index++) {
+                ariaControls = ariaControls + `${idState}_${index} `;
+            }
+
+            return ariaControls.trim();
+        };
+
+        const createMask = () => {
+            if (props.mask) {
+                const maskProps = mergeProps(
+                    {
+                        className: classNames(props.maskClassName, cx('mask', { visible })),
+                        style: props.maskStyle
+                    },
+                    ptm('mask')
+                );
+
+                return <div {...maskProps} />;
+            }
+
+            return null;
+        };
+
+        React.useEffect(() => {
+            setIdState(props.id || UniqueComponentId());
+        }, [props.id]);
+
+        const button = createButton();
+        const list = createList();
+        const mask = createMask();
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root', { visible })),
+                style: { ...props.style, ...sx('root') },
+                id: idState
+            },
+            SpeedDialBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <React.Fragment>
+                <div ref={elementRef} {...rootProps}>
+                    {button}
+                    {list}
+                </div>
+                {mask}
+            </React.Fragment>
+        );
+    })
+);
+
+SpeedDial.displayName = 'SpeedDial';
diff --git a/components/lib/speeddial/SpeedDialBase.js b/components/lib/speeddial/SpeedDialBase.js
new file mode 100644
index 0000000000..efc42ea6b1
--- /dev/null
+++ b/components/lib/speeddial/SpeedDialBase.js
@@ -0,0 +1,158 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-speeddial {
+        position: absolute;
+        display: flex;
+        z-index: 1;
+    }
+
+    .p-speeddial-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: top 0s linear 0.2s;
+        pointer-events: none;
+    }
+
+    .p-speeddial-item {
+        transform: scale(0);
+        opacity: 0;
+        transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
+        will-change: transform;
+    }
+
+    .p-speeddial-action {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        position: relative;
+        overflow: hidden;
+        text-decoration: none;
+    }
+
+    .p-speeddial-action-icon {
+        pointer-events: none;
+    }
+
+    .p-speeddial-circle .p-speeddial-item,
+    .p-speeddial-semi-circle .p-speeddial-item,
+    .p-speeddial-quarter-circle .p-speeddial-item {
+        position: absolute;
+    }
+
+    .p-speeddial-rotate {
+        transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+        will-change: transform;
+    }
+
+    .p-speeddial-mask {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .p-speeddial-mask-visible {
+        pointer-events: none;
+        opacity: 1;
+        transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .p-speeddial-opened .p-speeddial-list {
+        pointer-events: auto;
+    }
+
+    .p-speeddial:not(.p-speeddial-opened) .p-speeddial-list {
+        display: none;
+    }
+
+    .p-speeddial-opened .p-speeddial-item {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .p-speeddial-opened .p-speeddial-rotate {
+        transform: rotate(45deg);
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, visible }) =>
+        classNames(`p-speeddial p-component p-speeddial-${props.type}`, {
+            [`p-speeddial-direction-${props.direction}`]: props.type !== 'circle',
+            'p-speeddial-opened': visible,
+            'p-disabled': props.disabled
+        }),
+    button: ({ props }) =>
+        classNames('p-speeddial-button p-button-rounded', {
+            'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
+        }),
+    mask: ({ visible }) =>
+        classNames('p-speeddial-mask', {
+            'p-speeddial-mask-visible': visible
+        }),
+    action: ({ disabled }) => classNames('p-speeddial-action', { 'p-disabled': disabled }),
+    actionIcon: ({ _icon }) => classNames('p-speeddial-action-icon', _icon),
+    menu: 'p-speeddial-list',
+    menuitem: ({ active }) => classNames('p-speeddial-item', { 'p-focus': active })
+};
+
+const inlineStyles = {
+    root: ({ props }) => ({
+        alignItems: props.direction === 'up' || props.direction === 'down' ? 'center' : '',
+        justifyContent: props.direction === 'left' || props.direction === 'right' ? 'center' : '',
+        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
+    }),
+    menu: ({ props }) => ({
+        flexDirection: props.direction === 'up' ? 'column-reverse' : props.direction === 'down' ? 'column' : props.direction === 'left' ? 'row-reverse' : props.direction === 'right' ? 'row' : null
+    })
+};
+
+export const SpeedDialBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'SpeedDial',
+        id: null,
+        model: null,
+        visible: false,
+        style: null,
+        className: null,
+        direction: 'up',
+        transitionDelay: 30,
+        type: 'linear',
+        radius: 0,
+        mask: false,
+        disabled: false,
+        hideOnClickOutside: true,
+        buttonStyle: null,
+        buttonClassName: null,
+        buttonTemplate: null,
+        'aria-label': null,
+        ariaLabelledby: null,
+        maskStyle: null,
+        maskClassName: null,
+        showIcon: null,
+        hideIcon: null,
+        rotateAnimation: true,
+        onVisibleChange: null,
+        onClick: null,
+        onShow: null,
+        onHide: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/speeddial/package.json b/components/lib/speeddial/package.json
new file mode 100644
index 0000000000..0f65ca87af
--- /dev/null
+++ b/components/lib/speeddial/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./speeddial.cjs.js",
+    "module": "./speeddial.esm.js",
+    "unpkg": "./speeddial.min.js",
+    "types": "./speeddial.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/speeddial/speeddial.d.ts b/components/lib/speeddial/speeddial.d.ts
new file mode 100644
index 0000000000..f6a16679fc
--- /dev/null
+++ b/components/lib/speeddial/speeddial.d.ts
@@ -0,0 +1,256 @@
+/**
+ *
+ * When pressed, a floating action button can display multiple primary actions that can be performed on a page.
+ *
+ * [Live Demo](https://www.primereact.org/speeddial/)
+ *
+ * @module speeddial
+ *
+ */
+import * as React from 'react';
+import { ButtonPassThroughOptions } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type SpeedDialPassThroughType<T> = PassThroughType<T, SpeedDialPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SpeedDialPassThroughMethodOptions {
+    props: SpeedDialProps;
+    state: SpeedDialState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SpeedDialProps.pt}
+ */
+export interface SpeedDialPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SpeedDialPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     *  @see {@link ButtonPassThroughOptions}
+     */
+    button?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the menu's DOM element.
+     */
+    menu?: SpeedDialPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the menu item's DOM element.
+     */
+    menuitem?: SpeedDialPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: SpeedDialPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the action icon's DOM element.
+     */
+    actionIcon?: SpeedDialPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: SpeedDialPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in SpeedDial component.
+ */
+export interface SpeedDialState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+}
+
+/**
+ */
+interface SpeedDialButtonOptions {
+    /**
+     * Fired when the button element clicked.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Style class of the element.
+     */
+    className: string;
+    /**
+     * Icon Classname of the element.
+     */
+    iconClassName: string;
+    /**
+     * Default element created by the component.
+     */
+    element: JSX.Element;
+    /**
+     * Properties passed to the component.
+     */
+    props: SpeedDialProps;
+    /**
+     * Whether the overlay is opened.
+     */
+    visible: boolean;
+}
+
+/**
+ * Defines valid properties in SpeedDial component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SpeedDialProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * MenuModel instance to define the action items.
+     */
+    model?: MenuItem[];
+    /**
+     * Specifies the visibility of the overlay.
+     * @defaultValue false
+     */
+    visible?: boolean | undefined;
+    /**
+     * Specifies the opening direction of actions. Valid values are 'up', 'down', 'left', 'right', 'up-left', 'up-right', 'down-left' and 'down-right'
+     * @defaultValue up
+     */
+    direction?: 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right' | undefined;
+    /**
+     * Transition delay step for each action item.
+     * @defaultValue 30
+     */
+    transitionDelay?: number | undefined;
+    /**
+     * Specifies the opening type of actions.
+     * @defaultValue linear
+     */
+    type?: 'linear' | 'circle' | 'semi-circle' | 'quarter-circle' | undefined;
+    /**
+     * Radius for *circle types.
+     * @defaultValue 0
+     */
+    radius?: number | undefined;
+    /**
+     * Whether to show a mask element behind the speeddial.
+     * @defaultValue false
+     */
+    mask?: boolean | undefined;
+    /**
+     * Whether the component is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the actions close when clicked outside.
+     * @defaultValue true
+     */
+    hideOnClickOutside?: boolean | undefined;
+    /**
+     * Inline style of the button element.
+     */
+    buttonStyle?: React.CSSProperties;
+    /**
+     * Style class of the button element.
+     */
+    buttonClassName?: string | undefined;
+    /**
+     * Template of button element.
+     */
+    buttonTemplate?: React.ReactNode | ((options: SpeedDialButtonOptions) => React.ReactNode);
+    /**
+     * Inline style of the mask element.
+     */
+    maskStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the mask element.
+     */
+    maskClassName?: string | undefined;
+    /**
+     * Show icon of the button element.
+     */
+    showIcon?: IconType<SpeedDialProps> | undefined;
+    /**
+     * Hide icon of the button element.
+     */
+    hideIcon?: IconType<SpeedDialProps> | undefined;
+    /**
+     * Defined to rotate showIcon when hideIcon is not present.
+     * @defaultValue true
+     */
+    rotateAnimation?: boolean | undefined;
+    /**
+     * Fired when the visibility of element changed.
+     * @param {boolean} visible - Custom visible change event
+     */
+    onVisibleChange?(visible: boolean): void;
+    /**
+     * Fired when the button element clicked.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Fired when the actions are visible.
+     */
+    onShow?(): void;
+    /**
+     * Fired when the actions are hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SpeedDialPassThroughOptions}
+     */
+    pt?: SpeedDialPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - SpeedDial**
+ *
+ * _When pressed, a floating action button can display multiple primary actions that can be performed on a page._
+ *
+ * [Live Demo](https://www.primereact.org/speeddial/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SpeedDial extends React.Component<SpeedDialProps, any> {
+    /**
+     * Used to show the popup.
+     */
+    public show(): void;
+    /**
+     * Used to hide the popup.
+     */
+    public hide(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
new file mode 100644
index 0000000000..70f046e449
--- /dev/null
+++ b/components/lib/splitbutton/SplitButton.js
@@ -0,0 +1,221 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { Button } from '../button/Button';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useUnmountEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { TieredMenu } from '../tieredmenu/TieredMenu';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { SplitButtonBase } from './SplitButtonBase';
+
+export const SplitButton = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SplitButtonBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id ?? UniqueComponentId);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const elementRef = React.useRef(null);
+        const menuRef = React.useRef(null);
+        const defaultButtonRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const overlayDisplayOrder = useDisplayOrder('split-button-tooltip', overlayVisibleState);
+        const metaData = {
+            props,
+            state: {
+                id: idState,
+                overlayVisible: overlayVisibleState
+            }
+        };
+
+        const { ptm, cx, isUnstyled } = SplitButtonBase.setMetaData(metaData);
+
+        useHandleStyle(SplitButtonBase.css.styles, isUnstyled, { name: 'splitbutton' });
+
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: overlayVisibleState && overlayDisplayOrder,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.SPLIT_BUTTON, overlayDisplayOrder]
+        });
+
+        const onPanelClick = (event) => {
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: elementRef.current
+            });
+        };
+
+        const onMenuButtonKeyDown = (event) => {
+            if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
+                onDropdownButtonClick(event);
+                event.preventDefault();
+            }
+        };
+
+        const onDropdownButtonClick = (event) => {
+            overlayVisibleState ? hide(event) : show(event);
+        };
+
+        const show = (event) => {
+            setOverlayVisibleState(true);
+            menuRef.current && menuRef.current.show(event);
+        };
+
+        const hide = (event) => {
+            setOverlayVisibleState(false);
+            menuRef.current && menuRef.current.hide(event);
+        };
+
+        const onMenuShow = () => {
+            props.onShow && props.onShow();
+        };
+
+        const onMenuHide = () => {
+            setOverlayVisibleState(false);
+            props.onHide && props.onHide();
+        };
+
+        const alignOverlay = () => {
+            DomHandler.alignOverlay(overlayRef.current, defaultButtonRef.current.parentElement, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+
+            alignOverlay();
+        });
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            hide,
+            getElement: () => elementRef.current
+        }));
+
+        if (props.visible === false) {
+            return null;
+        }
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const sizeMapping = {
+            large: 'lg',
+            small: 'sm'
+        };
+        const size = sizeMapping[props.size];
+        const buttonContent = props.buttonTemplate ? ObjectUtils.getJSXElement(props.buttonTemplate, props) : null;
+        const menuId = idState + '_overlay';
+
+        const dropdownIcon = () => {
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon')
+                },
+                ptm('icon')
+            );
+
+            const icon = props.dropdownIcon || <ChevronDownIcon {...iconProps} />;
+            const dropdownIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+
+            return dropdownIcon;
+        };
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: idState,
+                className: classNames(props.className, cx('root', { size })),
+                style: props.style
+            },
+            SplitButtonBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    <Button
+                        ref={defaultButtonRef}
+                        type="button"
+                        className={classNames(props.buttonClassName, cx('button'))}
+                        icon={props.icon}
+                        loading={props.loading}
+                        loadingIcon={props.loadingIcon}
+                        severity={props.severity}
+                        label={props.label}
+                        aria-label={props.label}
+                        raised={props.raised}
+                        onClick={props.onClick}
+                        disabled={props.disabled}
+                        tabIndex={props.tabIndex}
+                        size={props.size}
+                        outlined={props.outlined}
+                        text={props.text}
+                        {...props.buttonProps}
+                        pt={ptm('button')}
+                        __parentMetadata={{
+                            parent: metaData
+                        }}
+                        unstyled={props.unstyled}
+                    >
+                        {buttonContent}
+                    </Button>
+                    <Button
+                        type="button"
+                        className={classNames(props.menuButtonClassName, cx('menuButton'))}
+                        icon={dropdownIcon}
+                        onClick={onDropdownButtonClick}
+                        disabled={props.disabled}
+                        aria-expanded={overlayVisibleState}
+                        aria-haspopup="true"
+                        aria-controls={menuId}
+                        {...props.menuButtonProps}
+                        size={props.size}
+                        severity={props.severity}
+                        outlined={props.outlined}
+                        text={props.text}
+                        raised={props.raised}
+                        pt={ptm('menuButton')}
+                        __parentMetadata={{
+                            parent: metaData
+                        }}
+                        onKeyDown={onMenuButtonKeyDown}
+                        unstyled={props.unstyled}
+                    />
+                    <TieredMenu
+                        ref={menuRef}
+                        popup={true}
+                        unstyled={props.unstyled}
+                        model={props.model}
+                        appendTo={props.appendTo}
+                        id={menuId}
+                        style={props.menuStyle}
+                        autoZIndex={props.autoZIndex}
+                        baseZIndex={props.baseZIndex}
+                        className={classNames(props.menuClassName, cx('menu'))}
+                        onClick={onPanelClick}
+                        onShow={onMenuShow}
+                        onHide={onMenuHide}
+                        pt={ptm('menu')}
+                        __parentMetadata={{
+                            parent: metaData
+                        }}
+                    />
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+SplitButton.displayName = 'SplitButton';
diff --git a/components/lib/splitbutton/SplitButtonBase.js b/components/lib/splitbutton/SplitButtonBase.js
new file mode 100644
index 0000000000..6448ffaab7
--- /dev/null
+++ b/components/lib/splitbutton/SplitButtonBase.js
@@ -0,0 +1,108 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    icon: 'p-button-icon p-c',
+    root: ({ props, size }) =>
+        classNames('p-splitbutton p-component', {
+            'p-disabled': props.disabled,
+            'p-button-loading-label-only': props.loading && !props.icon && props.label,
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-raised': props.raised,
+            'p-button-rounded': props.rounded,
+            'p-button-text': props.text,
+            'p-button-outlined': props.outlined,
+            [`p-button-${size}`]: size
+        }),
+    button: 'p-splitbutton-defaultbutton',
+    menuButton: 'p-splitbutton-menubutton',
+    menu: ({ props }) => classNames('p-menu p-menu-overlay p-component', props.menuClassName),
+    menuList: 'p-menu-list p-reset',
+    separator: 'p-menu-separator',
+    menuIcon: 'p-menuitem-icon',
+    menuLabel: 'p-menuitem-text',
+    anchor: ({ _className, disabled }) => classNames('p-menuitem-link', _className, { 'p-disabled': disabled }),
+    menuItem: 'p-menuitem',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-splitbutton {
+        display: inline-flex;
+        position: relative;
+    }
+
+    .p-splitbutton .p-splitbutton-defaultbutton,
+    .p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
+    .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button,
+    .p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button-outlined.p-button:hover {
+        flex: 1 1 auto;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        border-right: 0 none;
+    }
+
+    .p-splitbutton-menubutton,
+    .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+    .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+
+    .p-splitbutton .p-menu {
+        min-width: 100%;
+    }
+
+    .p-fluid .p-splitbutton  {
+        display: flex;
+    }
+}
+`;
+
+export const SplitButtonBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'SplitButton',
+        id: null,
+        label: null,
+        icon: null,
+        autoZIndex: true,
+        baseZIndex: 0,
+        loading: false,
+        loadingIcon: null,
+        model: null,
+        disabled: null,
+        style: null,
+        className: null,
+        buttonClassName: null,
+        menuStyle: null,
+        menuClassName: null,
+        menuButtonClassName: null,
+        buttonProps: null,
+        menuButtonProps: null,
+        tabIndex: null,
+        severity: null,
+        rounded: false,
+        raised: false,
+        outlined: false,
+        text: false,
+        size: null,
+        appendTo: null,
+        tooltip: null,
+        tooltipOptions: null,
+        buttonTemplate: null,
+        transitionOptions: null,
+        dropdownIcon: null,
+        onClick: null,
+        onShow: null,
+        onHide: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/splitbutton/package.json b/components/lib/splitbutton/package.json
new file mode 100644
index 0000000000..d36a54b114
--- /dev/null
+++ b/components/lib/splitbutton/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./splitbutton.cjs.js",
+    "module": "./splitbutton.esm.js",
+    "unpkg": "./splitbutton.min.js",
+    "types": "./splitbutton.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts
new file mode 100644
index 0000000000..f51b1f78bf
--- /dev/null
+++ b/components/lib/splitbutton/splitbutton.d.ts
@@ -0,0 +1,283 @@
+/**
+ *
+ * SplitButton groups a set of commands in an overlay with a default command.
+ *
+ * [Live Demo](https://www.primereact.org/splitbutton/)
+ *
+ * @module splitbutton
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ButtonPassThroughOptions } from '../button/button';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType, TemplateType } from '../utils';
+
+export declare type SplitButtonPassThroughType<T> = PassThroughType<T, SplitButtonPassThroughMethodOptions>;
+export declare type SplitButtonPassThroughTransitionType = ReactCSSTransitionProps | ((options: SplitButtonPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SplitButtonPassThroughMethodOptions {
+    props: SplitButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SplitButtonProps.pt}
+ */
+export interface SplitButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SplitButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: SplitButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement | SVGSVGElement>>;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    button?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the Button component.
+     */
+    menuButton?: ButtonPassThroughOptions;
+    /**
+     * Uses to pass attributes to the menu's DOM element.
+     */
+    menu?: SplitButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the menu list's DOM element.
+     */
+    menuList?: SplitButtonPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: SplitButtonPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the menu icon's DOM element.
+     */
+    menuIcon?: SplitButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the menu label's DOM element.
+     */
+    menuLabel?: SplitButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the anchor's DOM element.
+     */
+    anchor?: SplitButtonPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the menu item's DOM element.
+     */
+    menuItem?: SplitButtonPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: SplitButtonPassThroughTransitionType;
+}
+
+/**
+ * Defines valid properties in SplitButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Text of the button.
+     */
+    label?: string | undefined;
+    /**
+     * Name of the icon.
+     */
+    icon?: IconType<SplitButtonProps> | undefined;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    text?: boolean | undefined;
+    /**
+     * Add a circular border radius to the button.
+     * @defaultValue false
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @defaultValue false
+     */
+    raised?: boolean | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @defaultValue false
+     */
+    outlined?: boolean | undefined;
+    /**
+     * Defines the style of the button, valid values are "secondary", "success", "info", "warning", "danger", "contrast", "help".
+     */
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'contrast' | 'help' | undefined;
+    /**
+     * Defines the size of the button, valid values are "small" and "large".
+     */
+    size?: 'small' | 'large' | undefined;
+    /**
+     * Display loading icon of the button
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Name of the loading icon or JSX.Element for loading icon.
+     */
+    loadingIcon?: IconType<SplitButtonProps> | undefined;
+    /**
+     * MenuModel instance to define the overlay items.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be visible.
+     * @defaultValue true
+     */
+    visible?: boolean | undefined;
+    /**
+     * ClassName of the button.
+     */
+    buttonClassName?: string | undefined;
+    /**
+     * Inline style of the overlay menu.
+     */
+    menuStyle?: React.CSSProperties | undefined;
+    /**
+     * ClassName class of the overlay menu.
+     */
+    menuClassName?: string | undefined;
+    /**
+     * ClassName of the menu dropdown button.
+     */
+    menuButtonClassName?: string | undefined;
+    /**
+     * Props for the main button, any prop is passed implicity to the button element.
+     */
+    buttonProps?: any | undefined;
+    /**
+     * Props for the dropdown button, any prop is passed implicity to the dropdown button element.
+     */
+    menuButtonProps?: any | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Template of the default button.
+     */
+    buttonTemplate?: TemplateType<SplitButtonProps> | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Name of the dropdown icon or JSX.Element for dropdown icon.
+     */
+    dropdownIcon?: IconType<SplitButtonProps> | undefined;
+    /**
+     * Callback to invoke when main button is clicked.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event
+     */
+    onClick?(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when overlay panel becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when overlay panel becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SplitButtonPassThroughOptions}
+     */
+    pt?: SplitButtonPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines current inline state in SplitButton component.
+ */
+export interface SplitButtonState {
+    /**
+     * Current id state as a boolean.
+     */
+    id: string;
+    /**
+     * Current overlay visible state as a boolean.
+     */
+    overlayVisible: boolean;
+}
+
+/**
+ * **PrimeReact - SplitButton**
+ *
+ * _SplitButton groups a set of commands in an overlay with a default command._
+ *
+ * [Live Demo](https://www.primereact.org/splitbutton/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class SplitButton extends React.Component<SplitButtonProps, any> {
+    /**
+     * Used to show the popup.
+     */
+    public show(): void;
+    /**
+     * Used to hide the popup.
+     */
+    public hide(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
new file mode 100644
index 0000000000..139f175cf9
--- /dev/null
+++ b/components/lib/splitter/Splitter.js
@@ -0,0 +1,493 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { SplitterBase, SplitterPanelBase } from './SplitterBase';
+
+export const SplitterPanel = () => {};
+
+export const Splitter = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = SplitterBase.getProps(inProps, context);
+
+        const idState = React.useRef('');
+        const elementRef = React.useRef(null);
+        const gutterRef = React.useRef();
+        const gutterRefs = React.useRef({});
+        const size = React.useRef(null);
+        const dragging = React.useRef(null);
+        const startPos = React.useRef(null);
+        const prevPanelElement = React.useRef(null);
+        const nextPanelElement = React.useRef(null);
+        const prevPanelSize = React.useRef(null);
+        const prevSize = React.useRef(null);
+        const prevPanelSizeNew = React.useRef(null);
+        const nextPanelSize = React.useRef(null);
+        const nextPanelSizeNew = React.useRef(null);
+        const prevPanelIndex = React.useRef(null);
+        const timer = React.useRef(null);
+        const [panelSizes, setPanelSizes] = React.useState([]);
+        const [nested, setNested] = React.useState(false);
+        const isStateful = props.stateKey != null;
+        const childrenLength = (props.children && props.children.length) || 1;
+        const panelSize = (sizes, index) => (index in sizes ? sizes[index] : (props.children && [].concat(props.children)[index].props.size) || 100 / childrenLength);
+        const horizontal = props.layout === 'horizontal';
+
+        const metaData = {
+            props,
+            state: {
+                panelSizes: panelSizes,
+                nested: DomHandler.getAttribute(elementRef.current && elementRef.current.parentElement, 'data-p-splitter-panel-nested') === true
+            }
+        };
+
+        const { ptm, cx, isUnstyled } = SplitterBase.setMetaData({
+            ...metaData
+        });
+
+        useHandleStyle(SplitterBase.css.styles, isUnstyled, { name: 'splitter' });
+
+        const getPanelPT = (key) => {
+            return ptm(key, {
+                context: {
+                    nested
+                }
+            });
+        };
+
+        const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({ type: 'mousemove', listener: (event) => onResize(event) });
+        const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({
+            type: 'mouseup',
+            listener: (event) => {
+                onResizeEnd(event);
+                unbindMouseListeners();
+            }
+        });
+
+        const bindMouseListeners = () => {
+            bindDocumentMouseMoveListener();
+            bindDocumentMouseUpListener();
+        };
+
+        const unbindMouseListeners = () => {
+            unbindDocumentMouseMoveListener();
+            unbindDocumentMouseUpListener();
+        };
+
+        const getPanelProp = (panel, name) => {
+            return SplitterPanelBase.getCProp(panel, name);
+        };
+
+        const validateResize = (newPrevPanelSize, newNextPanelSize) => {
+            if (newPrevPanelSize > 100 || newPrevPanelSize < 0) {
+                return false;
+            }
+
+            if (newNextPanelSize > 100 || newNextPanelSize < 0) {
+                return false;
+            }
+
+            if (props.children[prevPanelIndex.current].props && props.children[prevPanelIndex.current].props.minSize && props.children[prevPanelIndex.current].props.minSize > newPrevPanelSize) {
+                return false;
+            }
+
+            if (props.children[prevPanelIndex.current + 1].props && props.children[prevPanelIndex.current + 1].props.minSize && props.children[prevPanelIndex.current + 1].props.minSize > newNextPanelSize) {
+                return false;
+            }
+
+            return true;
+        };
+
+        const clear = () => {
+            dragging.current = false;
+            size.current = null;
+            startPos.current = null;
+            prevPanelElement.current = null;
+            nextPanelElement.current = null;
+            prevPanelSize.current = null;
+            prevPanelSizeNew.current = null;
+            nextPanelSize.current = null;
+            nextPanelSizeNew.current = null;
+            prevPanelIndex.current = null;
+        };
+
+        const getStorage = React.useCallback(() => {
+            switch (props.stateStorage) {
+                case 'local':
+                    return window.localStorage;
+
+                case 'session':
+                    return window.sessionStorage;
+
+                default:
+                    throw new Error(props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
+            }
+        }, [props.stateStorage]);
+
+        const saveState = (sizes) => {
+            if (ObjectUtils.isArray(sizes)) {
+                getStorage().setItem(props.stateKey, JSON.stringify(sizes));
+            }
+        };
+
+        const restoreState = React.useCallback(() => {
+            const stateString = getStorage().getItem(props.stateKey);
+
+            if (stateString) {
+                setPanelSizes(JSON.parse(stateString));
+            }
+        }, [getStorage, props.stateKey]);
+
+        const onResizeStart = (event, index, isKeyDown) => {
+            const pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
+            const pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
+
+            gutterRef.current = gutterRefs.current[index];
+            size.current = horizontal ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
+            dragging.current = true;
+            startPos.current = horizontal ? pageX : pageY;
+            prevPanelElement.current = gutterRef.current.previousElementSibling;
+            nextPanelElement.current = gutterRef.current.nextElementSibling;
+
+            if (isKeyDown) {
+                prevPanelSize.current = horizontal ? DomHandler.getOuterWidth(prevPanelElement.current, true) : DomHandler.getOuterHeight(prevPanelElement.current, true);
+                nextPanelSize.current = horizontal ? DomHandler.getOuterWidth(nextPanelElement.current, true) : DomHandler.getOuterHeight(nextPanelElement.current, true);
+            } else {
+                prevPanelSize.current = (100 * (horizontal ? DomHandler.getOuterWidth(prevPanelElement.current, true) : DomHandler.getOuterHeight(prevPanelElement.current, true))) / size.current;
+                nextPanelSize.current = (100 * (horizontal ? DomHandler.getOuterWidth(nextPanelElement.current, true) : DomHandler.getOuterHeight(nextPanelElement.current, true))) / size.current;
+            }
+
+            prevPanelSizeNew.current = prevPanelSize.current;
+            nextPanelSizeNew.current = nextPanelSize.current;
+            prevPanelIndex.current = index;
+            !isUnstyled() && DomHandler.addClass(gutterRef.current, 'p-splitter-gutter-resizing');
+            gutterRef.current.setAttribute('data-p-splitter-gutter-resizing', true);
+            !isUnstyled() && DomHandler.addClass(elementRef.current, 'p-splitter-resizing');
+            elementRef.current.setAttribute('data-p-splitter-resizing', true);
+        };
+
+        const onResize = (event, step = 0, isKeyDown = false) => {
+            let newPos;
+            let newNextPanelSize;
+            let newPrevPanelSize;
+            const pageX = event.type === 'touchmove' ? event.touches[0].pageX : event.pageX;
+            const pageY = event.type === 'touchmove' ? event.touches[0].pageY : event.pageY;
+
+            if (isKeyDown) {
+                if (horizontal) {
+                    newPrevPanelSize = (100 * (prevPanelSize.current + step)) / size.current;
+                    newNextPanelSize = (100 * (nextPanelSize.current - step)) / size.current;
+                } else {
+                    newPrevPanelSize = (100 * (prevPanelSize.current - step)) / size.current;
+                    newNextPanelSize = (100 * (nextPanelSize.current + step)) / size.current;
+                }
+            } else {
+                if (horizontal) {
+                    newPos = (pageX * 100) / size.current - (startPos.current * 100) / size.current;
+                } else {
+                    newPos = (pageY * 100) / size.current - (startPos.current * 100) / size.current;
+                }
+
+                newPrevPanelSize = prevPanelSize.current + newPos;
+                newNextPanelSize = nextPanelSize.current - newPos;
+            }
+
+            resizePanel(prevPanelIndex.current, newPrevPanelSize, newNextPanelSize);
+        };
+
+        const onResizeEnd = (event) => {
+            let sizes = [...panelSizes];
+
+            sizes[prevPanelIndex.current] = prevPanelSizeNew.current;
+            sizes[prevPanelIndex.current + 1] = nextPanelSizeNew.current;
+
+            if (props.onResizeEnd) {
+                props.onResizeEnd({
+                    originalEvent: event,
+                    sizes
+                });
+            }
+
+            if (isStateful) {
+                saveState(sizes);
+            }
+
+            setPanelSizes(sizes);
+
+            !isUnstyled() && DomHandler.removeClass(gutterRef.current, 'p-splitter-gutter-resizing');
+            gutterRefs.current && Object.keys(gutterRefs.current).forEach((key) => gutterRefs.current[key].setAttribute('data-p-splitter-gutter-resizing', false));
+            !isUnstyled() && DomHandler.removeClass(elementRef.current, 'p-splitter-resizing');
+            elementRef.current.setAttribute('data-p-splitter-resizing', false);
+            clear();
+        };
+
+        const onGutterKeyUp = () => {
+            clearTimer();
+            onResizeEnd();
+        };
+
+        const onGutterKeyDown = (event, index) => {
+            const minSize = (props.children[index].props && props.children[index].props.minSize) || 0;
+
+            switch (event.code) {
+                case 'ArrowLeft': {
+                    if (horizontal) {
+                        setTimer(event, index, props.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    if (horizontal) {
+                        setTimer(event, index, props.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown': {
+                    if (!horizontal) {
+                        setTimer(event, index, props.step * -1);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    if (!horizontal) {
+                        setTimer(event, index, props.step);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Home': {
+                    resizePanel(index, 100 - minSize, minSize);
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    resizePanel(index, minSize, 100 - minSize);
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'NumpadEnter':
+
+                case 'Enter': {
+                    if (prevSize.current >= 100 - (minSize || 5)) {
+                        resizePanel(index, minSize, 100 - minSize);
+                    } else {
+                        resizePanel(index, 100 - minSize, minSize);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        };
+
+        const resizePanel = (index, newPrevPanelSize, newNextPanelSize) => {
+            prevPanelIndex.current = index;
+            gutterRef.current = gutterRefs.current[index];
+            size.current = horizontal ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
+            prevPanelElement.current = gutterRef.current.previousElementSibling;
+            nextPanelElement.current = gutterRef.current.nextElementSibling;
+
+            if (validateResize(newPrevPanelSize, newNextPanelSize)) {
+                prevPanelSizeNew.current = newPrevPanelSize;
+                nextPanelSizeNew.current = newNextPanelSize;
+                prevPanelElement.current.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
+                nextPanelElement.current.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
+                prevSize.current = parseFloat(newPrevPanelSize).toFixed(4);
+            }
+        };
+
+        const repeat = (event, index, step) => {
+            onResizeStart(event, index, true);
+            onResize(event, step, true);
+        };
+
+        const setTimer = (event, index, step) => {
+            if (!timer.current) {
+                timer.current = setInterval(() => {
+                    repeat(event, index, step);
+                }, 40);
+            }
+        };
+
+        const clearTimer = () => {
+            if (timer.current) {
+                clearInterval(timer.current);
+                timer.current = null;
+            }
+        };
+
+        const onGutterMouseDown = (event, index) => {
+            onResizeStart(event, index, false);
+            bindMouseListeners();
+        };
+
+        const onGutterTouchStart = (event, index) => {
+            onResizeStart(event, index, false);
+
+            window.addEventListener('touchmove', onGutterTouchMove, { passive: false, cancelable: false });
+            window.addEventListener('touchend', onGutterTouchEnd);
+        };
+
+        const onGutterTouchMove = (event) => {
+            onResize(event);
+        };
+
+        const onGutterTouchEnd = (event) => {
+            onResizeEnd(event);
+            window.removeEventListener('touchmove', onGutterTouchMove);
+            window.removeEventListener('touchend', onGutterTouchEnd);
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            if (elementRef.current) {
+                idState.current = UniqueComponentId();
+            }
+        });
+
+        React.useEffect(() => {
+            const panelElements = [...elementRef.current.children].filter((child) => DomHandler.getAttribute(child, 'data-pc-section') === 'splitterpanel.root');
+
+            let _panelSizes = [];
+
+            panelElements.map((panelElement, i) => {
+                prevSize.current = panelSize(panelSizes, 0);
+                _panelSizes[i] = panelSize(panelSizes, i);
+
+                if (panelElement.childNodes && ObjectUtils.isNotEmpty(DomHandler.find(panelElement, "[data-pc-name='splitter']") && DomHandler.find(panelElement, "[data-pc-section='root']"))) {
+                    !isUnstyled() && DomHandler.addClass(panelElement, 'p-splitter-panel-nested');
+                    panelElement.setAttribute('data-p-splitter-panel-nested', true);
+                    setNested(true);
+                }
+            });
+
+            setPanelSizes(_panelSizes);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+
+        React.useEffect(() => {
+            if (isStateful) {
+                restoreState();
+            }
+        }, [restoreState, isStateful]);
+
+        const createPanel = (panel, index) => {
+            const panelId = getPanelProp(panel, 'id') || `${idState.current}_${index}`;
+            const panelClassName = classNames(getPanelProp(panel, 'className'), cx('panel.root'));
+
+            const gutterProps = mergeProps(
+                {
+                    ref: (el) => (gutterRefs.current[index] = el),
+                    className: cx('gutter'),
+                    style: horizontal ? { width: props.gutterSize + 'px' } : { height: props.gutterSize + 'px' },
+                    onMouseDown: (event) => onGutterMouseDown(event, index),
+                    onKeyDown: (event) => onGutterKeyDown(event, index),
+                    onKeyUp: onGutterKeyUp,
+                    onTouchStart: (event) => onGutterTouchStart(event, index),
+                    onTouchMove: (event) => onGutterTouchMove(event),
+                    onTouchEnd: (event) => onGutterTouchEnd(event),
+                    'data-p-splitter-gutter-resizing': false
+                },
+                ptm('gutter')
+            );
+
+            const gutterHandlerProps = mergeProps(
+                {
+                    tabIndex: getPanelProp(panel, 'tabIndex') || 0,
+                    className: cx('gutterHandler'),
+                    role: 'separator',
+                    'aria-orientation': horizontal ? 'vertical' : 'horizontal',
+                    'aria-controls': panelId,
+                    'aria-label': getPanelProp(panel, 'aria-label'),
+                    'aria-labelledby': getPanelProp(panel, 'aria-labelledby'),
+                    'aria-valuenow': prevSize.current,
+                    'aria-valuetext': parseFloat(prevSize.current).toFixed(0) + '%',
+                    'aria-valuemin': getPanelProp(panel, 'minSize') || '0',
+                    'aria-valuemax': '100'
+                },
+                ptm('gutterHandler')
+            );
+
+            const gutter = index !== props.children.length - 1 && (
+                <div {...gutterProps}>
+                    <div {...gutterHandlerProps} />
+                </div>
+            );
+
+            const flexBasis = 'calc(' + panelSize(panelSizes, index) + '% - ' + (childrenLength - 1) * props.gutterSize + 'px)';
+
+            const rootProps = mergeProps(
+                {
+                    key: index,
+                    id: panelId,
+                    className: panelClassName,
+                    style: { ...getPanelProp(panel, 'style'), flexBasis },
+                    role: 'presentation',
+                    'data-p-splitter-panel-nested': false,
+                    onClick: getPanelProp(panel, 'onClick')
+                },
+                getPanelPT('splitterpanel.root')
+            );
+
+            return (
+                <React.Fragment>
+                    <div {...rootProps}>{getPanelProp(panel, 'children')}</div>
+                    {gutter}
+                </React.Fragment>
+            );
+        };
+
+        const createPanels = () => {
+            return React.Children.map(props.children, createPanel);
+        };
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                style: props.style,
+                className: classNames(props.className, cx('root')),
+                'data-p-splitter-resizing': false
+            },
+            SplitterBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const panels = createPanels();
+
+        return (
+            <div ref={elementRef} {...rootProps}>
+                {panels}
+            </div>
+        );
+    })
+);
+
+SplitterPanel.displayName = 'SplitterPanel';
+
+Splitter.displayName = 'Splitter';
diff --git a/components/lib/splitter/Splitter.spec.js b/components/lib/splitter/Splitter.spec.js
new file mode 100644
index 0000000000..10e15f3489
--- /dev/null
+++ b/components/lib/splitter/Splitter.spec.js
@@ -0,0 +1,73 @@
+import '@testing-library/jest-dom';
+import { snapshot } from '../../test';
+import { Splitter, SplitterPanel } from './Splitter';
+
+describe('Splitter', () => {
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} className="mb-5">
+                <SplitterPanel className="flex align-items-center justify-content-center">Panel 1</SplitterPanel>
+                <SplitterPanel className="flex align-items-center justify-content-center">Panel 2</SplitterPanel>
+            </Splitter>
+        </>,
+        'Splitter requires two SplitterPanel components to wrap.'
+    );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical">
+                <SplitterPanel>Panel 1</SplitterPanel>
+                <SplitterPanel>Panel 2</SplitterPanel>
+            </Splitter>
+        </>,
+        'Vertical layout'
+    );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }}>
+                <SplitterPanel className="flex align-items-center justify-content-center" size={20} minSize={10}>
+                    Panel 1
+                </SplitterPanel>
+                <SplitterPanel size={80}>
+                    <Splitter layout="vertical">
+                        <SplitterPanel className="flex align-items-center justify-content-center" size={15}>
+                            Panel 2
+                        </SplitterPanel>
+                        <SplitterPanel size={85}>
+                            <Splitter>
+                                <SplitterPanel className="flex align-items-center justify-content-center" size={20}>
+                                    Panel 3
+                                </SplitterPanel>
+                                <SplitterPanel className="flex align-items-center justify-content-center" size={80}>
+                                    Panel 4
+                                </SplitterPanel>
+                            </Splitter>
+                        </SplitterPanel>
+                    </Splitter>
+                </SplitterPanel>
+            </Splitter>
+        </>,
+        'Nested'
+    );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical">
+                <SplitterPanel size={5}>Panel 1</SplitterPanel>
+            </Splitter>
+        </>,
+        'Single Panel with size'
+    );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical">
+                <SplitterPanel>Panel 1</SplitterPanel>
+            </Splitter>
+        </>,
+        'Single Panel without size'
+    );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical" />
+        </>,
+        'Without panels'
+    );
+});
diff --git a/components/lib/splitter/SplitterBase.js b/components/lib/splitter/SplitterBase.js
new file mode 100644
index 0000000000..666b7f4921
--- /dev/null
+++ b/components/lib/splitter/SplitterBase.js
@@ -0,0 +1,109 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) => classNames(`p-splitter p-component p-splitter-${props.layout}`),
+    gutter: 'p-splitter-gutter',
+    gutterHandler: 'p-splitter-gutter-handle',
+    panel: {
+        root: 'p-splitter-panel'
+    }
+};
+
+const styles = `
+@layer primereact {
+    .p-splitter {
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    .p-splitter-vertical {
+        flex-direction: column;
+    }
+
+    .p-splitter-panel {
+        flex-grow: 1;
+    }
+
+    .p-splitter-panel-nested {
+        display: flex;
+    }
+
+    .p-splitter-panel .p-splitter {
+        flex-grow: 1;
+        border: 0 none;
+    }
+
+    .p-splitter-gutter {
+        flex-grow: 0;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: col-resize;
+    }
+
+    .p-splitter-horizontal.p-splitter-resizing {
+        cursor: col-resize;
+        user-select: none;
+    }
+
+    .p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+        height: 24px;
+        width: 100%;
+    }
+
+    .p-splitter-horizontal > .p-splitter-gutter {
+        cursor: col-resize;
+    }
+
+    .p-splitter-vertical.p-splitter-resizing {
+        cursor: row-resize;
+        user-select: none;
+    }
+
+    .p-splitter-vertical > .p-splitter-gutter {
+        cursor: row-resize;
+    }
+
+    .p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+        width: 24px;
+        height: 100%;
+    }
+}
+
+`;
+
+export const SplitterBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Splitter',
+        className: null,
+        gutterSize: 4,
+        id: null,
+        step: 5,
+        layout: 'horizontal',
+        onResizeEnd: null,
+        stateKey: null,
+        stateStorage: 'session',
+        style: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
+
+export const SplitterPanelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'SplitterPanel',
+        className: null,
+        minSize: null,
+        size: null,
+        style: null,
+        children: undefined
+    },
+    getCProps: (panel) => ObjectUtils.getComponentProps(panel, SplitterPanelBase.defaultProps),
+    getCOtherProps: (panel) => ObjectUtils.getComponentDiffProps(panel, SplitterPanelBase.defaultProps),
+    getCProp: (panel, name) => ObjectUtils.getComponentProp(panel, name, SplitterPanelBase.defaultProps)
+});
diff --git a/components/lib/splitter/__snapshots__/Splitter.spec.js.snap b/components/lib/splitter/__snapshots__/Splitter.spec.js.snap
new file mode 100644
index 0000000000..2dd53bf996
--- /dev/null
+++ b/components/lib/splitter/__snapshots__/Splitter.spec.js.snap
@@ -0,0 +1,343 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Splitter Nested 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-horizontal"
+    data-p-splitter-resizing="false"
+    data-pc-name="splitter"
+    data-pc-section="root"
+    style="height: 300px;"
+  >
+    <div
+      class="flex align-items-center justify-content-center p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_5_0"
+      role="presentation"
+      style="flex-basis: calc(20% - 4px);"
+    >
+      Panel 1
+    </div>
+    <div
+      class="p-splitter-gutter"
+      data-p-splitter-gutter-resizing="false"
+      data-pc-section="gutter"
+      style="width: 4px;"
+    >
+      <div
+        aria-controls="pr_id_5_0"
+        aria-orientation="vertical"
+        aria-valuemax="100"
+        aria-valuemin="10"
+        aria-valuenow="20"
+        aria-valuetext="20%"
+        class="p-splitter-gutter-handle"
+        data-pc-section="gutterhandler"
+        role="separator"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="p-splitter-panel p-splitter-panel-nested"
+      data-p-splitter-panel-nested="true"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_5_1"
+      role="presentation"
+      style="flex-basis: calc(80% - 4px);"
+    >
+      <div
+        class="p-splitter p-component p-splitter-vertical"
+        data-p-splitter-resizing="false"
+        data-pc-name="splitter"
+        data-pc-section="root"
+      >
+        <div
+          class="flex align-items-center justify-content-center p-splitter-panel"
+          data-p-splitter-panel-nested="false"
+          data-pc-section="splitterpanel.root"
+          id="pr_id_4_0"
+          role="presentation"
+          style="flex-basis: calc(15% - 4px);"
+        >
+          Panel 2
+        </div>
+        <div
+          class="p-splitter-gutter"
+          data-p-splitter-gutter-resizing="false"
+          data-pc-section="gutter"
+          style="height: 4px;"
+        >
+          <div
+            aria-controls="pr_id_4_0"
+            aria-orientation="horizontal"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            aria-valuenow="15"
+            aria-valuetext="15%"
+            class="p-splitter-gutter-handle"
+            data-pc-section="gutterhandler"
+            role="separator"
+            tabindex="0"
+          />
+        </div>
+        <div
+          class="p-splitter-panel p-splitter-panel-nested"
+          data-p-splitter-panel-nested="true"
+          data-pc-section="splitterpanel.root"
+          id="pr_id_4_1"
+          role="presentation"
+          style="flex-basis: calc(85% - 4px);"
+        >
+          <div
+            class="p-splitter p-component p-splitter-horizontal"
+            data-p-splitter-resizing="false"
+            data-pc-name="splitter"
+            data-pc-section="root"
+          >
+            <div
+              class="flex align-items-center justify-content-center p-splitter-panel"
+              data-p-splitter-panel-nested="false"
+              data-pc-section="splitterpanel.root"
+              id="pr_id_3_0"
+              role="presentation"
+              style="flex-basis: calc(20% - 4px);"
+            >
+              Panel 3
+            </div>
+            <div
+              class="p-splitter-gutter"
+              data-p-splitter-gutter-resizing="false"
+              data-pc-section="gutter"
+              style="width: 4px;"
+            >
+              <div
+                aria-controls="pr_id_3_0"
+                aria-orientation="vertical"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                aria-valuenow="20"
+                aria-valuetext="20%"
+                class="p-splitter-gutter-handle"
+                data-pc-section="gutterhandler"
+                role="separator"
+                tabindex="0"
+              />
+            </div>
+            <div
+              class="flex align-items-center justify-content-center p-splitter-panel"
+              data-p-splitter-panel-nested="false"
+              data-pc-section="splitterpanel.root"
+              id="pr_id_3_1"
+              role="presentation"
+              style="flex-basis: calc(80% - 4px);"
+            >
+              Panel 4
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Splitter Single Panel with size 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    data-p-splitter-resizing="false"
+    data-pc-name="splitter"
+    data-pc-section="root"
+    style="height: 300px;"
+  >
+    <div
+      class="p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_6_0"
+      role="presentation"
+      style="flex-basis: calc(5% - 0px);"
+    >
+      Panel 1
+    </div>
+    <div
+      class="p-splitter-gutter"
+      data-p-splitter-gutter-resizing="false"
+      data-pc-section="gutter"
+      style="height: 4px;"
+    >
+      <div
+        aria-controls="pr_id_6_0"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="5"
+        aria-valuetext="5%"
+        class="p-splitter-gutter-handle"
+        data-pc-section="gutterhandler"
+        role="separator"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Splitter Single Panel without size 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    data-p-splitter-resizing="false"
+    data-pc-name="splitter"
+    data-pc-section="root"
+    style="height: 300px;"
+  >
+    <div
+      class="p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_7_0"
+      role="presentation"
+      style="flex-basis: calc(100% - 0px);"
+    >
+      Panel 1
+    </div>
+    <div
+      class="p-splitter-gutter"
+      data-p-splitter-gutter-resizing="false"
+      data-pc-section="gutter"
+      style="height: 4px;"
+    >
+      <div
+        aria-controls="pr_id_7_0"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="100"
+        aria-valuetext="100%"
+        class="p-splitter-gutter-handle"
+        data-pc-section="gutterhandler"
+        role="separator"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Splitter Splitter requires two SplitterPanel components to wrap. 1`] = `
+<div>
+  <div
+    class="mb-5 p-splitter p-component p-splitter-horizontal"
+    data-p-splitter-resizing="false"
+    data-pc-name="splitter"
+    data-pc-section="root"
+    style="height: 300px;"
+  >
+    <div
+      class="flex align-items-center justify-content-center p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_1_0"
+      role="presentation"
+      style="flex-basis: calc(50% - 4px);"
+    >
+      Panel 1
+    </div>
+    <div
+      class="p-splitter-gutter"
+      data-p-splitter-gutter-resizing="false"
+      data-pc-section="gutter"
+      style="width: 4px;"
+    >
+      <div
+        aria-controls="pr_id_1_0"
+        aria-orientation="vertical"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50%"
+        class="p-splitter-gutter-handle"
+        data-pc-section="gutterhandler"
+        role="separator"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="flex align-items-center justify-content-center p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_1_1"
+      role="presentation"
+      style="flex-basis: calc(50% - 4px);"
+    >
+      Panel 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Splitter Vertical layout 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    data-p-splitter-resizing="false"
+    data-pc-name="splitter"
+    data-pc-section="root"
+    style="height: 300px;"
+  >
+    <div
+      class="p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_2_0"
+      role="presentation"
+      style="flex-basis: calc(50% - 4px);"
+    >
+      Panel 1
+    </div>
+    <div
+      class="p-splitter-gutter"
+      data-p-splitter-gutter-resizing="false"
+      data-pc-section="gutter"
+      style="height: 4px;"
+    >
+      <div
+        aria-controls="pr_id_2_0"
+        aria-orientation="horizontal"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="50"
+        aria-valuetext="50%"
+        class="p-splitter-gutter-handle"
+        data-pc-section="gutterhandler"
+        role="separator"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="p-splitter-panel"
+      data-p-splitter-panel-nested="false"
+      data-pc-section="splitterpanel.root"
+      id="pr_id_2_1"
+      role="presentation"
+      style="flex-basis: calc(50% - 4px);"
+    >
+      Panel 2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Splitter Without panels 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    data-p-splitter-resizing="false"
+    data-pc-name="splitter"
+    data-pc-section="root"
+    style="height: 300px;"
+  />
+</div>
+`;
diff --git a/components/lib/splitter/package.json b/components/lib/splitter/package.json
new file mode 100644
index 0000000000..b95528df06
--- /dev/null
+++ b/components/lib/splitter/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./splitter.cjs.js",
+    "module": "./splitter.esm.js",
+    "unpkg": "./splitter.min.js",
+    "types": "./splitter.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/splitter/splitter.d.ts b/components/lib/splitter/splitter.d.ts
new file mode 100644
index 0000000000..dbf17e0696
--- /dev/null
+++ b/components/lib/splitter/splitter.d.ts
@@ -0,0 +1,233 @@
+/**
+ *
+ * Splitter is utilized to separate and resize panels.
+ *
+ * [Live Demo](https://www.primereact.org/splitter/)
+ *
+ * Helper Components:
+ *
+ * - {@link SplitterPanel}
+ *
+ * @module splitter
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type SplitterPassThroughType<T> = PassThroughType<T, SplitterPassThroughMethodOptions>;
+export declare type SplitterPanelPassThroughType<T> = PassThroughType<T, SplitterPanelPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SplitterPassThroughMethodOptions {
+    props: SplitterProps;
+    state: SplitterState;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface SplitterState {
+    /**
+     * Previous size state as a number.
+     */
+    panelSizes: number[];
+}
+
+/**
+ * Custom resize end event.
+ * @see {@link SplitterProps.onResizeEnd}
+ * @event
+ */
+interface SplitterResizeEndEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Sizes of the panels as an array.
+     */
+    sizes: number[];
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelProps.pt}
+ */
+export interface SplitterPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SplitterPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SplitterPanelPassThroughMethodOptions {
+    props: SplitterPanelProps;
+    parent: SplitterPassThroughMethodOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SplitterProps.pt}
+ */
+export interface SplitterPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SplitterPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the gutter's DOM element.
+     */
+    gutter?: SplitterPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the gutter handler's DOM element.
+     */
+    gutterHandler?: SplitterPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in SplitterPanel component.
+ * @group Properties
+ */
+interface SplitterPanelProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Returns the value of element's id content attribute. Can be set to change it.
+     */
+    id?: string;
+    /**
+     * Establishes relationships between the splitter and panel label element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Splitter handle ARIA label for screenreader support.
+     */
+    'aria-label'?: string | undefined;
+    /**
+     * Size of the element relative to 100%.
+     */
+    size?: number;
+    /**
+     * Minimum size of the element relative to 100%.
+     */
+    minSize?: number;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties;
+    /**
+     * ClassName of the component.
+     */
+    className?: string;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SplitterPanelPassThroughOptions}
+     */
+    pt?: SplitterPanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * SplitterPanel is a helper component for Splitter.
+ * @group Component
+ */
+export declare class SplitterPanel extends React.Component<SplitterPanelProps, any> {}
+
+/**
+ * Defines valid properties in Splitter component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface SplitterProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Orientation of the panels, valid values are "horizontal" and "vertical".
+     * @defaultValue horizontal
+     */
+    layout?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * Size of the divider in pixels.
+     * @defaultValue 4
+     */
+    gutterSize?: number | undefined;
+    /**
+     * Storage identifier of a stateful Splitter.
+     */
+    stateKey?: string | undefined;
+    /**
+     * Defines where a stateful splitter keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
+     * @defaultValue session
+     */
+    stateStorage?: 'session' | 'local' | undefined;
+    /**
+     * Callback to invoke when resize ends.
+     * @param {SplitterResizeEndEvent} event - Custom resize end event.
+     */
+    onResizeEnd?(event: SplitterResizeEndEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Step factor to increment/decrement the size of the panels while pressing the arrow keys.
+     * @defaultValue 5
+     */
+    step?: number | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SplitterPassThroughOptions}
+     */
+    pt?: SplitterPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - SplitterPanel**
+ *
+ * _Splitter is utilized to separate and resize panels._
+ *
+ * [Live Demo](https://www.primereact.org/splitter/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Splitter extends React.Component<SplitterProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/stepper/Stepper.js b/components/lib/stepper/Stepper.js
new file mode 100644
index 0000000000..d88d037f1c
--- /dev/null
+++ b/components/lib/stepper/Stepper.js
@@ -0,0 +1,354 @@
+import React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { UniqueComponentId, classNames, ObjectUtils } from '../utils/Utils';
+import { StepperBase } from './StepperBase';
+import { StepperContent } from './StepperContent';
+import { StepperHeader } from './StepperHeader';
+import { StepperSeparator } from './StepperSeparator';
+
+export const Stepper = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = StepperBase.getProps(inProps, context);
+        const start = ObjectUtils.getJSXElement(props.start, props);
+        const end = ObjectUtils.getJSXElement(props.end, props);
+        const { ptm, cx, isUnstyled, ptmo } = StepperBase.setMetaData({
+            props
+        });
+        const [idState, setIdState] = React.useState(props.id);
+        const [activeStepState, setActiveStepState] = React.useState(props.activeStep);
+        const navRef = React.useRef();
+
+        useHandleStyle(StepperBase.css.styles, isUnstyled, { name: 'stepper' });
+
+        const startProps = mergeProps(
+            {
+                className: cx('start')
+            },
+            ptm('start')
+        );
+
+        const endProps = mergeProps(
+            {
+                className: cx('end')
+            },
+            ptm('end')
+        );
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        useUpdateEffect(() => {
+            if (props.activeStep >= 0 && props.activeStep <= stepperPanels().length - 1) {
+                updateActiveStep(undefined, props.activeStep);
+            }
+        }, [props.activeStep]);
+
+        const getStepProp = (step, name) => {
+            return step?.props?.[name];
+        };
+
+        const getStepKey = (step, index) => {
+            return getStepProp(step, 'header') || index;
+        };
+
+        const isStep = (child) => {
+            return child.type.displayName === 'StepperPanel';
+        };
+
+        const isStepActive = (index) => {
+            return activeStepState === index;
+        };
+
+        const isItemDisabled = (index) => {
+            return props.linear && !isStepActive(index);
+        };
+
+        const updateActiveStep = (event, index) => {
+            setActiveStepState(index);
+
+            props.onChangeStep && props.onChangeStep({ originalEvent: event, index });
+        };
+
+        const getStepHeaderActionId = (index) => {
+            return `${idState}_${index}_header_action`;
+        };
+
+        const getStepContentId = (index) => {
+            return `${idState}_${index}content`;
+        };
+
+        const stepperPanels = () => {
+            return React.Children.toArray(props.children).reduce((stepperpanels, child) => {
+                if (isStep(child)) {
+                    stepperpanels.push(child);
+                } else if (child && Array.isArray(child)) {
+                    React.Children.toArray(child.props.children).forEach((nestedChild) => {
+                        if (isStep(nestedChild)) {
+                            stepperpanels.push(nestedChild);
+                        }
+                    });
+                }
+
+                return stepperpanels;
+            }, []);
+        };
+
+        const prevCallback = (event, index) => {
+            if (index !== 0) {
+                updateActiveStep(event, index - 1);
+            }
+        };
+
+        const nextCallback = (event, index) => {
+            if (index !== stepperPanels().length - 1) {
+                updateActiveStep(event, index + 1);
+            }
+        };
+
+        const getStepPT = (step, key, index) => {
+            const count = stepperPanels().length;
+
+            const stepMetaData = {
+                props: step.props,
+                parent: {
+                    props: props
+                },
+                context: {
+                    index,
+                    count,
+                    first: index === 0,
+                    last: index === count - 1,
+                    active: isStepActive(index),
+                    highlighted: index < activeStepState,
+                    disabled: isItemDisabled(index)
+                }
+            };
+
+            return mergeProps(ptm(`stepperpanel.${key}`, { stepperpanel: stepMetaData }), ptm(`stepperpanel.${key}`, stepMetaData), ptmo(getStepProp(step, 'pt'), key, stepMetaData));
+        };
+
+        const onItemClick = (event, index) => {
+            if (props.linear) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (index !== activeStepState) {
+                updateActiveStep(event, index);
+            }
+        };
+
+        const createPanel = () => {
+            return stepperPanels().map((step, index) => {
+                const panelProps = mergeProps({
+                    className: classNames(cx('stepper.header', { isStepActive, isItemDisabled, step, index, headerPosition: props.headerPosition, orientation: props.orientation })),
+                    'aria-current': isStepActive(index) && 'step',
+                    role: 'presentation',
+                    'data-p-highlight': isStepActive(index),
+                    'data-p-disabled': isItemDisabled(index),
+                    'data-p-active': isStepActive(index),
+                    ...getStepPT(step, 'header', index)
+                });
+
+                return (
+                    <li key={getStepKey(step, index)} {...panelProps}>
+                        <StepperHeader
+                            id={getStepHeaderActionId(index)}
+                            template={step.children?.header}
+                            stepperpanel={step}
+                            index={index}
+                            disabled={isItemDisabled(index)}
+                            active={isStepActive(index)}
+                            highlighted={index < activeStepState}
+                            ariaControls={getStepContentId(index)}
+                            clickCallback={onItemClick}
+                            getStepPT={getStepPT}
+                            getStepProp={getStepProp}
+                            cx={cx}
+                        />
+                        {index !== stepperPanels().length - 1 && (
+                            <StepperSeparator template={step.children?.separator} separatorClass={cx('stepper.separator')} stepperpanel={step} index={index} active={isStepActive(index)} highlighted={index < activeStepState} getStepPT={getStepPT} />
+                        )}
+                    </li>
+                );
+            });
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            getElement: () => navRef.current,
+            getActiveStep: () => activeStepState,
+            setActiveStep: (step) => setActiveStepState(step),
+            nextCallback: (e) => nextCallback(e, activeStepState),
+            prevCallback: (e) => prevCallback(e, activeStepState)
+        }));
+
+        const createPanelContent = () => {
+            return stepperPanels().map((step, index) => {
+                if (!isStepActive(index)) {
+                    return null;
+                }
+
+                return (
+                    <StepperContent
+                        key={getStepContentId(index)}
+                        id={getStepContentId(index)}
+                        tempate={step?.children?.content}
+                        stepperpanel={step}
+                        index={index}
+                        active={isStepActive(index)}
+                        highlighted={index < activeStepState}
+                        clickCallback={onItemClick}
+                        prevCallback={prevCallback}
+                        nextCallback={nextCallback}
+                        getStepPT={getStepPT}
+                        ariaLabelledby={getStepHeaderActionId(index)}
+                        ptm={ptm}
+                        cx={cx}
+                    />
+                );
+            });
+        };
+
+        const createHorizontal = () => {
+            const items = createPanel();
+            const navProps = mergeProps(
+                {
+                    className: classNames(cx('nav')),
+                    ref: navRef
+                },
+                ptm('nav')
+            );
+
+            const panelContainerProps = mergeProps(
+                {
+                    className: cx('panelContainer')
+                },
+                ptm('panelContainer')
+            );
+
+            return (
+                <>
+                    <ul {...navProps}>{items}</ul>
+                    <div {...panelContainerProps}>{createPanelContent()}</div>
+                </>
+            );
+        };
+
+        const createVertical = () => {
+            return stepperPanels().map((step, index) => {
+                const contentRef = React.createRef(null);
+
+                const navProps = mergeProps({
+                    ref: navRef,
+                    className: cx('stepper.panel', { props, index, isStepActive }),
+                    'aria-current': isStepActive(index) && 'step',
+                    ...getStepPT(step, 'root', index),
+                    ...getStepPT(step, 'panel', index),
+                    'data-p-highlight': isStepActive(index),
+                    'data-p-disabled': isItemDisabled(index),
+                    'data-p-active': isStepActive(index)
+                });
+
+                const headerProps = mergeProps({
+                    className: cx('stepper.header', { step, isStepActive, isItemDisabled, index }),
+                    ...getStepPT(step, 'header', index)
+                });
+
+                const transitionProps = mergeProps({
+                    classNames: cx('stepper.content'),
+                    ...getStepPT(step, 'transition', index),
+                    timeout: { enter: 1000, exit: 450 },
+                    in: isStepActive(index),
+                    unmountOnExit: true
+                });
+
+                const toggleableContentProps = mergeProps({
+                    ref: contentRef,
+                    className: cx('stepper.toggleableContent'),
+                    ...getStepPT(step, 'toggleableContent', index)
+                });
+
+                return (
+                    <div key={getStepKey(step, index)} {...navProps}>
+                        <div {...headerProps}>
+                            <StepperHeader
+                                id={getStepHeaderActionId(index)}
+                                template={step.children?.header}
+                                stepperpanel={step}
+                                index={index}
+                                disabled={isItemDisabled(index)}
+                                active={isStepActive(index)}
+                                highlighted={index < activeStepState}
+                                ariaControls={getStepContentId(index)}
+                                clickCallback={onItemClick}
+                                getStepPT={getStepPT}
+                                getStepProp={getStepProp}
+                                cx={cx}
+                            />
+                        </div>
+                        <CSSTransition nodeRef={contentRef} {...transitionProps}>
+                            <div {...toggleableContentProps}>
+                                {index !== stepperPanels().length - 1 && (
+                                    <StepperSeparator
+                                        template={step.children?.separator}
+                                        separatorClass={cx('stepper.separator')}
+                                        stepperpanel={step}
+                                        index={index}
+                                        active={isStepActive(index)}
+                                        highlighted={index < activeStepState}
+                                        getStepPT={getStepPT}
+                                    />
+                                )}
+                                <StepperContent
+                                    key={getStepContentId(index)}
+                                    id={getStepContentId(index)}
+                                    tempate={step?.children?.content}
+                                    stepperpanel={step}
+                                    index={index}
+                                    active={isStepActive(index)}
+                                    highlighted={index < activeStepState}
+                                    clickCallback={onItemClick}
+                                    prevCallback={prevCallback}
+                                    nextCallback={nextCallback}
+                                    getStepPT={getStepPT}
+                                    ariaLabelledby={getStepHeaderActionId(index)}
+                                    ptm={ptm}
+                                    cx={cx}
+                                />
+                            </div>
+                        </CSSTransition>
+                    </div>
+                );
+            });
+        };
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(cx('root')),
+                role: 'tablist'
+            },
+            StepperBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {start && <div {...startProps}>{start}</div>}
+                {props.orientation === 'horizontal' && createHorizontal()}
+                {props.orientation === 'vertical' && createVertical()}
+                {end && <div {...endProps}>{end}</div>}
+            </div>
+        );
+    })
+);
+
+StepperBase.displayName = 'StepperBase';
diff --git a/components/lib/stepper/Stepper.spec.js b/components/lib/stepper/Stepper.spec.js
new file mode 100644
index 0000000000..25a6c0eb53
--- /dev/null
+++ b/components/lib/stepper/Stepper.spec.js
@@ -0,0 +1,138 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { snapshot } from '../../test';
+import { PrimeReactProvider } from '../api/Api';
+import { Stepper } from './Stepper';
+import { StepperPanel } from '../stepperpanel/StepperPanel';
+
+function assertSelectedStep(expectedIndex) {
+    const selectedStep = screen.getByRole('presentation', { current: 'step' });
+    const expectedStep = screen.getByRole('list').children.item(expectedIndex);
+
+    expect(expectedStep).toEqual(selectedStep);
+}
+
+describe('Stepper', () => {
+    snapshot(
+        <PrimeReactProvider>
+            <Stepper />
+        </PrimeReactProvider>,
+        'default'
+    );
+    snapshot(
+        <Stepper>
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>,
+        'panels'
+    );
+    snapshot(
+        <Stepper orientation="vertical">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+            <StepperPanel header="Header III"></StepperPanel>
+        </Stepper>,
+        'vertical'
+    );
+    snapshot(
+        <Stepper headerPosition="top">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+        </Stepper>,
+        'header position top'
+    );
+    snapshot(
+        <Stepper headerPosition="right">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+        </Stepper>,
+        'header position right'
+    );
+    snapshot(
+        <Stepper headerPosition="bottom">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+        </Stepper>,
+        'header position bottom'
+    );
+    snapshot(
+        <Stepper headerPosition="left">
+            <StepperPanel header="Header I"></StepperPanel>
+            <StepperPanel header="Header II"></StepperPanel>
+        </Stepper>,
+        'header position left'
+    );
+
+    test('Step should have aria step when selected', async () => {
+        render(
+            <Stepper>
+                <StepperPanel header="Header I"></StepperPanel>
+                <StepperPanel header="Header II"></StepperPanel>
+                <StepperPanel header="Header III"></StepperPanel>
+            </Stepper>
+        );
+
+        await userEvent.click(screen.getByRole('tab', { name: '3 Header III' }));
+        assertSelectedStep(2);
+    });
+
+    test('Control active step from outside', async () => {
+        render(
+            <Stepper activeStep={3}>
+                <StepperPanel header="Header I"></StepperPanel>
+                <StepperPanel header="Header II"></StepperPanel>
+                <StepperPanel header="Header III"></StepperPanel>
+                <StepperPanel header="Header IV"></StepperPanel>
+                <StepperPanel header="Header VI"></StepperPanel>
+            </Stepper>
+        );
+
+        assertSelectedStep(3);
+    });
+
+    test('Changing step should trigger onChangeStep callback', async () => {
+        const onChangeStep = jest.fn();
+
+        render(
+            <Stepper onChangeStep={onChangeStep}>
+                <StepperPanel header="Header I"></StepperPanel>
+                <StepperPanel header="Header II"></StepperPanel>
+                <StepperPanel header="Header III"></StepperPanel>
+            </Stepper>
+        );
+
+        await userEvent.click(screen.getByRole('tab', { name: '2 Header II' }));
+        expect(onChangeStep).toHaveBeenCalledTimes(1);
+
+        await userEvent.click(screen.getByRole('tab', { name: '3 Header III' }));
+        expect(onChangeStep).toHaveBeenCalledTimes(2);
+    });
+
+    test('Change steps with buttons', async () => {
+        const stepperRef = React.createRef(null);
+        const onChangeStep = jest.fn();
+
+        render(
+            <div>
+                <Stepper ref={stepperRef} onChangeStep={onChangeStep}>
+                    <StepperPanel header="Header I"></StepperPanel>
+                    <StepperPanel header="Header II"></StepperPanel>
+                    <StepperPanel header="Header III"></StepperPanel>
+                </Stepper>
+                <button onClick={() => stepperRef.current.nextCallback()}>Next</button>
+                <button onClick={() => stepperRef.current.previousCallback()}>Previous</button>
+            </div>
+        );
+
+        const nextButton = screen.getByRole('button', { name: 'Next' });
+
+        await userEvent.click(nextButton);
+
+        expect(onChangeStep).toHaveBeenCalledTimes(1);
+
+        assertSelectedStep(1);
+    });
+});
diff --git a/components/lib/stepper/StepperBase.js b/components/lib/stepper/StepperBase.js
new file mode 100644
index 0000000000..4e58d98528
--- /dev/null
+++ b/components/lib/stepper/StepperBase.js
@@ -0,0 +1,148 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-stepper p-component', {
+            'p-stepper-horizontal': props.orientation === 'horizontal',
+            'p-stepper-vertical': props.orientation === 'vertical',
+            'p-readonly': props.linear
+        }),
+    nav: 'p-stepper-nav',
+    stepper: {
+        header: ({ isStepActive, isItemDisabled, index, headerPosition, orientation }) => {
+            return classNames('p-stepper-header', {
+                'p-highlight': isStepActive(index),
+                'p-disabled': isItemDisabled(index),
+                [`p-stepper-header-${headerPosition}`]: orientation === 'horizontal'
+            });
+        },
+        action: 'p-stepper-action p-component',
+        number: 'p-stepper-number',
+        title: 'p-stepper-title',
+        separator: 'p-stepper-separator',
+        toggleableContent: 'p-stepper-toggleable-content',
+        content: ({ props }) =>
+            classNames('p-stepper-content', {
+                'p-toggleable-content': props.orientation === 'vertical'
+            }),
+        panel: ({ props, isStepActive, index }) =>
+            classNames('p-stepper-panel', {
+                'p-stepper-panel-active': props.orientation === 'vertical' && isStepActive(index)
+            })
+    },
+    panelContainer: 'p-stepper-panels',
+    start: 'p-stepper-start',
+    end: 'p-stepper-end'
+};
+
+const styles = `
+@layer primereact {
+    .p-stepper .p-stepper-nav {
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        overflow-x: auto;
+    }
+
+    .p-stepper-vertical .p-stepper-nav {
+        flex-direction: column;
+    }
+
+    .p-stepper-header {
+        position: relative;
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+
+        &:last-of-type {
+            flex: initial;
+        }
+    }
+
+    .p-stepper-header-bottom {
+        align-items: flex-start;
+    }
+
+    .p-stepper-header-top {
+        align-items: flex-end;
+    }
+
+    .p-stepper-header-right, .p-stepper-header-left {
+        align-items: center;
+    }
+
+    .p-stepper-header .p-stepper-action {
+        border: 0 none;
+        display: inline-flex;
+        align-items: center;
+        text-decoration: none;
+        cursor: pointer;
+
+        &:focus-visible {
+            @include focused();
+        }
+    }
+
+    .p-stepper-header-bottom .p-stepper-action {
+        flex-direction: column;
+    }
+
+    .p-stepper-header-top .p-stepper-action {
+        flex-direction: column-reverse;
+    }
+
+    .p-stepper-header-left .p-stepper-action {
+        flex-direction: row-reverse;
+    }
+
+    .p-stepper.p-stepper-readonly .p-stepper-header {
+        cursor: auto;
+    }
+
+    .p-stepper-header.p-highlight .p-stepper-action {
+        cursor: default;
+    }
+
+    .p-stepper-title {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+    }
+
+    .p-stepper-number {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-stepper-separator {
+        flex: 1 1 0;
+    }
+}
+`;
+
+export const StepperBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Stepper',
+        activeStep: 0,
+        orientation: 'horizontal',
+        headerPosition: 'right',
+        linear: false,
+        onChangeStep: null,
+        start: null,
+        end: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/stepper/StepperContent.js b/components/lib/stepper/StepperContent.js
new file mode 100644
index 0000000000..83363bcfea
--- /dev/null
+++ b/components/lib/stepper/StepperContent.js
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+
+export const StepperContent = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { cx } = props;
+
+        const rootProps = mergeProps({
+            ref: ref,
+            id: props.id,
+            className: cx('stepper.content', { stepperpanel: props.stepperpanel, index: props.index }),
+            role: 'tabpanel',
+            'aria-labelledby': props.ariaLabelledby,
+            ...props.getStepPT(props.stepperpanel, 'root', props.index),
+            ...props.getStepPT(props.stepperpanel, 'content', props.index),
+            'data-p-active': props.active
+        });
+
+        const createContent = () => {
+            const ComponentToRender = props.template;
+
+            return (
+                <ComponentToRender
+                    index={props.index}
+                    active={props.active}
+                    highlighted={props.highlighted}
+                    clickCallback={(event) => props.onItemClick(event, props.index)}
+                    prevCallback={(event) => props.prevCallback(event, props.index)}
+                    nextCallback={(event) => props.nextCallback(event, props.index)}
+                />
+            );
+        };
+
+        return <div {...rootProps}>{props.template ? createContent() : props.stepperpanel}</div>;
+    })
+);
+
+StepperContent.displayName = 'StepperContent';
diff --git a/components/lib/stepper/StepperHeader.js b/components/lib/stepper/StepperHeader.js
new file mode 100644
index 0000000000..b0735b76dc
--- /dev/null
+++ b/components/lib/stepper/StepperHeader.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+
+export const StepperHeader = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const { cx } = props;
+
+        const buttonProps = mergeProps({
+            ref: ref,
+            id: props.id,
+            className: cx('stepper.action'),
+            role: 'tab',
+            type: 'button',
+            tabIndex: props.disabled ? -1 : undefined,
+            'aria-controls': props.ariaControls,
+            onClick: (e) => props.clickCallback(e, props.index),
+            ...props.getStepPT(props.stepperpanel, 'action', props.index)
+        });
+
+        const numberProps = mergeProps({
+            className: cx('stepper.number'),
+            ...props.getStepPT(props.stepperpanel, 'number', props.index)
+        });
+
+        const titleProps = mergeProps({
+            className: cx('stepper.title'),
+            ...props.getStepPT(props.stepperpanel, 'title', props.index)
+        });
+
+        return props.template ? (
+            props.template()
+        ) : (
+            <button {...buttonProps}>
+                <span {...numberProps}>{props.index + 1}</span>
+                <span {...titleProps}>{props.getStepProp(props.stepperpanel, 'header')}</span>
+            </button>
+        );
+    })
+);
+
+StepperHeader.displayName = 'StepperHeader';
diff --git a/components/lib/stepper/StepperSeparator.js b/components/lib/stepper/StepperSeparator.js
new file mode 100644
index 0000000000..c283198917
--- /dev/null
+++ b/components/lib/stepper/StepperSeparator.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { useMergeProps } from '../hooks/Hooks';
+
+export const StepperSeparator = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+
+        const separatorProps = mergeProps({
+            ref: ref,
+            'aria-hidden': true,
+            className: props.separatorClass,
+            ...props.getStepPT(props.stepperpanel, 'separator', props.index)
+        });
+
+        return props.template ? props.template() : <span {...separatorProps} />;
+    })
+);
+
+StepperSeparator.displayName = 'StepperSeparator';
diff --git a/components/lib/stepper/__snapshots__/Stepper.spec.js.snap b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap
new file mode 100644
index 0000000000..ab3a085b99
--- /dev/null
+++ b/components/lib/stepper/__snapshots__/Stepper.spec.js.snap
@@ -0,0 +1,698 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stepper default 1`] = `
+<div>
+  <div
+    class="p-stepper p-component p-stepper-horizontal"
+    data-pc-name="stepper"
+    data-pc-section="root"
+    role="tablist"
+  >
+    <ul
+      class="p-stepper-nav"
+      data-pc-section="nav"
+    />
+    <div
+      class="p-stepper-panels"
+      data-pc-section="panelcontainer"
+    />
+  </div>
+</div>
+`;
+
+exports[`Stepper header position bottom 1`] = `
+<div>
+  <div
+    class="p-stepper p-component p-stepper-horizontal"
+    data-pc-name="stepper"
+    data-pc-section="root"
+    role="tablist"
+  >
+    <ul
+      class="p-stepper-nav"
+      data-pc-section="nav"
+    >
+      <li
+        aria-current="step"
+        class="p-stepper-header p-highlight p-stepper-header-bottom"
+        data-p-active="true"
+        data-p-disabled="false"
+        data-p-highlight="true"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_6_0content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_6_0_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            1
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header I
+          </span>
+        </button>
+        <span
+          aria-hidden="true"
+          class="p-stepper-separator"
+          data-pc-section="separator"
+        />
+      </li>
+      <li
+        aria-current="false"
+        class="p-stepper-header p-stepper-header-bottom"
+        data-p-active="false"
+        data-p-disabled="false"
+        data-p-highlight="false"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_6_1content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_6_1_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            2
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header II
+          </span>
+        </button>
+      </li>
+    </ul>
+    <div
+      class="p-stepper-panels"
+      data-pc-section="panelcontainer"
+    >
+      <div
+        aria-labelledby="pr_id_6_0_header_action"
+        class="p-stepper-content"
+        data-p-active="true"
+        data-pc-name=""
+        data-pc-section="content"
+        id="pr_id_6_0content"
+        role="tabpanel"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stepper header position left 1`] = `
+<div>
+  <div
+    class="p-stepper p-component p-stepper-horizontal"
+    data-pc-name="stepper"
+    data-pc-section="root"
+    role="tablist"
+  >
+    <ul
+      class="p-stepper-nav"
+      data-pc-section="nav"
+    >
+      <li
+        aria-current="step"
+        class="p-stepper-header p-highlight p-stepper-header-left"
+        data-p-active="true"
+        data-p-disabled="false"
+        data-p-highlight="true"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_7_0content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_7_0_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            1
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header I
+          </span>
+        </button>
+        <span
+          aria-hidden="true"
+          class="p-stepper-separator"
+          data-pc-section="separator"
+        />
+      </li>
+      <li
+        aria-current="false"
+        class="p-stepper-header p-stepper-header-left"
+        data-p-active="false"
+        data-p-disabled="false"
+        data-p-highlight="false"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_7_1content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_7_1_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            2
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header II
+          </span>
+        </button>
+      </li>
+    </ul>
+    <div
+      class="p-stepper-panels"
+      data-pc-section="panelcontainer"
+    >
+      <div
+        aria-labelledby="pr_id_7_0_header_action"
+        class="p-stepper-content"
+        data-p-active="true"
+        data-pc-name=""
+        data-pc-section="content"
+        id="pr_id_7_0content"
+        role="tabpanel"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stepper header position right 1`] = `
+<div>
+  <div
+    class="p-stepper p-component p-stepper-horizontal"
+    data-pc-name="stepper"
+    data-pc-section="root"
+    role="tablist"
+  >
+    <ul
+      class="p-stepper-nav"
+      data-pc-section="nav"
+    >
+      <li
+        aria-current="step"
+        class="p-stepper-header p-highlight p-stepper-header-right"
+        data-p-active="true"
+        data-p-disabled="false"
+        data-p-highlight="true"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_5_0content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_5_0_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            1
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header I
+          </span>
+        </button>
+        <span
+          aria-hidden="true"
+          class="p-stepper-separator"
+          data-pc-section="separator"
+        />
+      </li>
+      <li
+        aria-current="false"
+        class="p-stepper-header p-stepper-header-right"
+        data-p-active="false"
+        data-p-disabled="false"
+        data-p-highlight="false"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_5_1content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_5_1_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            2
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header II
+          </span>
+        </button>
+      </li>
+    </ul>
+    <div
+      class="p-stepper-panels"
+      data-pc-section="panelcontainer"
+    >
+      <div
+        aria-labelledby="pr_id_5_0_header_action"
+        class="p-stepper-content"
+        data-p-active="true"
+        data-pc-name=""
+        data-pc-section="content"
+        id="pr_id_5_0content"
+        role="tabpanel"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stepper header position top 1`] = `
+<div>
+  <div
+    class="p-stepper p-component p-stepper-horizontal"
+    data-pc-name="stepper"
+    data-pc-section="root"
+    role="tablist"
+  >
+    <ul
+      class="p-stepper-nav"
+      data-pc-section="nav"
+    >
+      <li
+        aria-current="step"
+        class="p-stepper-header p-highlight p-stepper-header-top"
+        data-p-active="true"
+        data-p-disabled="false"
+        data-p-highlight="true"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_4_0content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_4_0_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            1
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header I
+          </span>
+        </button>
+        <span
+          aria-hidden="true"
+          class="p-stepper-separator"
+          data-pc-section="separator"
+        />
+      </li>
+      <li
+        aria-current="false"
+        class="p-stepper-header p-stepper-header-top"
+        data-p-active="false"
+        data-p-disabled="false"
+        data-p-highlight="false"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_4_1content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_4_1_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            2
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header II
+          </span>
+        </button>
+      </li>
+    </ul>
+    <div
+      class="p-stepper-panels"
+      data-pc-section="panelcontainer"
+    >
+      <div
+        aria-labelledby="pr_id_4_0_header_action"
+        class="p-stepper-content"
+        data-p-active="true"
+        data-pc-name=""
+        data-pc-section="content"
+        id="pr_id_4_0content"
+        role="tabpanel"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stepper panels 1`] = `
+<div>
+  <div
+    class="p-stepper p-component p-stepper-horizontal"
+    data-pc-name="stepper"
+    data-pc-section="root"
+    role="tablist"
+  >
+    <ul
+      class="p-stepper-nav"
+      data-pc-section="nav"
+    >
+      <li
+        aria-current="step"
+        class="p-stepper-header p-highlight p-stepper-header-right"
+        data-p-active="true"
+        data-p-disabled="false"
+        data-p-highlight="true"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_2_0content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_2_0_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            1
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header I
+          </span>
+        </button>
+        <span
+          aria-hidden="true"
+          class="p-stepper-separator"
+          data-pc-section="separator"
+        />
+      </li>
+      <li
+        aria-current="false"
+        class="p-stepper-header p-stepper-header-right"
+        data-p-active="false"
+        data-p-disabled="false"
+        data-p-highlight="false"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_2_1content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_2_1_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            2
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header II
+          </span>
+        </button>
+        <span
+          aria-hidden="true"
+          class="p-stepper-separator"
+          data-pc-section="separator"
+        />
+      </li>
+      <li
+        aria-current="false"
+        class="p-stepper-header p-stepper-header-right"
+        data-p-active="false"
+        data-p-disabled="false"
+        data-p-highlight="false"
+        data-pc-section="header"
+        role="presentation"
+      >
+        <button
+          aria-controls="pr_id_2_2content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_2_2_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            3
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header III
+          </span>
+        </button>
+      </li>
+    </ul>
+    <div
+      class="p-stepper-panels"
+      data-pc-section="panelcontainer"
+    >
+      <div
+        aria-labelledby="pr_id_2_0_header_action"
+        class="p-stepper-content"
+        data-p-active="true"
+        data-pc-name=""
+        data-pc-section="content"
+        id="pr_id_2_0content"
+        role="tabpanel"
+      >
+        <span />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Stepper vertical 1`] = `
+<div>
+  <div
+    class="p-stepper p-component p-stepper-vertical"
+    data-pc-name="stepper"
+    data-pc-section="root"
+    role="tablist"
+  >
+    <div
+      aria-current="step"
+      class="p-stepper-panel p-stepper-panel-active"
+      data-p-active="true"
+      data-p-disabled="false"
+      data-p-highlight="true"
+      data-pc-name=""
+      data-pc-section="panel"
+    >
+      <div
+        class="p-stepper-header p-highlight"
+        data-pc-section="header"
+      >
+        <button
+          aria-controls="pr_id_3_0content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_3_0_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            1
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header I
+          </span>
+        </button>
+      </div>
+      <div
+        class="p-stepper-toggleable-content"
+        data-pc-section="toggleablecontent"
+      >
+        <span
+          aria-hidden="true"
+          class="p-stepper-separator"
+          data-pc-section="separator"
+        />
+        <div
+          aria-labelledby="pr_id_3_0_header_action"
+          class="p-stepper-content p-toggleable-content"
+          data-p-active="true"
+          data-pc-name=""
+          data-pc-section="content"
+          id="pr_id_3_0content"
+          role="tabpanel"
+        >
+          <span />
+        </div>
+      </div>
+    </div>
+    <div
+      aria-current="false"
+      class="p-stepper-panel"
+      data-p-active="false"
+      data-p-disabled="false"
+      data-p-highlight="false"
+      data-pc-name=""
+      data-pc-section="panel"
+    >
+      <div
+        class="p-stepper-header"
+        data-pc-section="header"
+      >
+        <button
+          aria-controls="pr_id_3_1content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_3_1_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            2
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header II
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      aria-current="false"
+      class="p-stepper-panel"
+      data-p-active="false"
+      data-p-disabled="false"
+      data-p-highlight="false"
+      data-pc-name=""
+      data-pc-section="panel"
+    >
+      <div
+        class="p-stepper-header"
+        data-pc-section="header"
+      >
+        <button
+          aria-controls="pr_id_3_2content"
+          class="p-stepper-action p-component"
+          data-pc-section="action"
+          id="pr_id_3_2_header_action"
+          role="tab"
+          type="button"
+        >
+          <span
+            class="p-stepper-number"
+            data-pc-section="number"
+          >
+            3
+          </span>
+          <span
+            class="p-stepper-title"
+            data-pc-section="title"
+          >
+            Header III
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/components/lib/stepper/package.json b/components/lib/stepper/package.json
new file mode 100644
index 0000000000..89e9b22850
--- /dev/null
+++ b/components/lib/stepper/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./stepper.cjs.js",
+    "module": "./stepper.esm.js",
+    "unpkg": "./stepper.min.js",
+    "types": "./stepper.d.ts",
+    "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/lib/stepper/stepper.d.ts b/components/lib/stepper/stepper.d.ts
new file mode 100644
index 0000000000..5c649bbda1
--- /dev/null
+++ b/components/lib/stepper/stepper.d.ts
@@ -0,0 +1,190 @@
+/**
+ *
+ * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ *
+ * @module stepper
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { StepperPanelPassThroughOptionType } from '../stepperpanel/stepperpanel';
+import { PassThroughType } from '../utils';
+
+export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined;
+export declare type StepperPassThroughType<T> = PassThroughType<T, StepperPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepperPassThroughMethodOptions {
+    props: StepperProps;
+    state: StepperState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link Stepper.pt}
+ */
+export interface StepperPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepperPassThroughOptionType;
+    /**
+     * Used to pass attributes to the nav's DOM element.
+     */
+    nav?: StepperPassThroughOptionType;
+    /**
+     * Used to pass attributes to the panel container's DOM element.
+     */
+    panelContainer?: StepperPassThroughOptionType;
+    /**
+     * Used to pass attributes to the end handler's DOM element.
+     */
+    stepperpanel?: StepperPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the start's DOM element.
+     */
+    start?: StepperPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the right's DOM element.
+     */
+    end?: StepperPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepperPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Stepper component.
+ */
+export interface StepperState {
+    /**
+     * Current active index state.
+     */
+    activeStep: number;
+}
+
+/**
+ * Custom tab change event.
+ * @see {@link StepperProps.onChange}
+ */
+export interface StepperChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Index of the selected stepper panel
+     */
+    index: number;
+}
+
+/**
+ * Defines valid properties in Stepper component.
+ * @group Properties
+ */
+export interface StepperProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Active step index of stepper.
+     * @defaultValue 0
+     */
+    activeStep?: number | undefined;
+    /**
+     * Orientation of the stepper.
+     * @defaultValue horizontal
+     */
+    orientation?: 'horizontal' | 'vertical' | undefined;
+    /**
+     * Position of the stepper panel header relative to the step number.
+     */
+    headerPosition?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Whether the steps are clickable or not.
+     * @defaultValue false
+     */
+    linear?: boolean | undefined;
+    /**
+     * Callback to invoke when an active panel is changed.
+     */
+    onChangeStep?(event: StepperChangeEvent): void;
+    /**
+     * The template of start section.
+     */
+    start?: React.ReactNode | ((props: StepperProps) => React.ReactNode);
+    /**
+     * The template of end section.
+     */
+    end?: React.ReactNode | ((props: StepperProps) => React.ReactNode);
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {StepperPassThroughOptions}
+     */
+    pt?: StepperPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * **PrimeReact - Stepper**
+ *
+ * _Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Stepper extends React.Component<StepperProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+    /**
+     * Used to get the current active step index.
+     * @return {number | undefined} Active step index
+     */
+    public getActiveStep(): number | undefined;
+    /**
+     * Used to set the active step index.
+     * @param {number} step - Index of step to set as active
+     */
+    public setActiveStep(step: number): void;
+    /**
+     * Used to navigate to the next step.
+     * @param {React.SyntheticEvent} [e] - Browser event
+     */
+    public nextCallback(e?: React.SyntheticEvent): void;
+    /**
+     * Used to navigate to the previous step.
+     * @param {React.SyntheticEvent} [e] - Browser event
+     */
+    public prevCallback(e?: React.SyntheticEvent): void;
+}
diff --git a/components/lib/stepperpanel/StepperPanel.js b/components/lib/stepperpanel/StepperPanel.js
new file mode 100644
index 0000000000..781b3d1cf5
--- /dev/null
+++ b/components/lib/stepperpanel/StepperPanel.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { StepperPanelBase } from './StepperPanelBase';
+
+export const StepperPanel = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const context = React.useContext(PrimeReactContext);
+        const props = StepperPanelBase.getProps(inProps, context);
+        const { isUnstyled } = StepperPanelBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(StepperPanelBase.css.styles, isUnstyled, { name: 'StepperPanel' });
+
+        return <span ref={ref}>{props.children}</span>;
+    })
+);
+
+StepperPanel.displayName = 'StepperPanel';
diff --git a/components/lib/stepperpanel/StepperPanelBase.js b/components/lib/stepperpanel/StepperPanelBase.js
new file mode 100644
index 0000000000..e32e34bd7d
--- /dev/null
+++ b/components/lib/stepperpanel/StepperPanelBase.js
@@ -0,0 +1,14 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const styles = '';
+
+export const StepperPanelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'StepperPanel',
+        children: undefined,
+        header: null
+    },
+    css: {
+        styles
+    }
+});
diff --git a/components/lib/stepperpanel/package.json b/components/lib/stepperpanel/package.json
new file mode 100644
index 0000000000..b821047691
--- /dev/null
+++ b/components/lib/stepperpanel/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./stepperpanel.cjs.js",
+    "module": "./stepperpanel.esm.js",
+    "unpkg": "./stepperpanel.min.js",
+    "types": "./stepperpanel.d.ts",
+    "sideEffects": false
+}
\ No newline at end of file
diff --git a/components/lib/stepperpanel/stepperpanel.d.ts b/components/lib/stepperpanel/stepperpanel.d.ts
new file mode 100644
index 0000000000..80df027a21
--- /dev/null
+++ b/components/lib/stepperpanel/stepperpanel.d.ts
@@ -0,0 +1,158 @@
+/**
+ *
+ * StepperPanel is a helper component for Stepper component.
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ *
+ * @module stepperpanel
+ *
+ */
+import * as React from 'react';
+import { TransitionProps } from 'react-transition-group/Transition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+
+export declare type StepperPanelPassThroughOptionType = StepperPanelPassThroughAttributes | ((options: StepperPanelPassThroughMethodOptions) => StepperPanelPassThroughAttributes | string) | string | null | undefined;
+
+export declare type StepperPanelPassThroughTransitionType = TransitionProps | ((options: StepperPanelPassThroughMethodOptions) => TransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepperPanelPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: StepperPanelProps;
+    /**
+     * Defines current options.
+     */
+    context: StepperPanelContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepperPanelProps.pt}
+ */
+export interface StepperPanelPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the header's DOM element.
+     */
+    header?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the action's DOM element.
+     */
+    action?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the number's DOM element.
+     */
+    number?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the title's DOM element.
+     */
+    title?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the separator's DOM element.
+     */
+    separator?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the panel's DOM element.
+     */
+    panel?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to pass attributes to the toggleable content's DOM element.
+     */
+    toggleableContent?: StepperPanelPassThroughOptionType;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: StepperPanelPassThroughTransitionType;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepperPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current options in StepperPanel component.
+ */
+export interface StepperPanelContext {
+    /**
+     * Current index of the stepperpanel.
+     */
+    index: number;
+    /**
+     * Count of stepperpanels
+     */
+    count: number;
+    /**
+     * Whether the stepperpanel is first.
+     */
+    first: boolean;
+    /**
+     * Whether the stepperpanel is last.
+     */
+    last: boolean;
+    /**
+     * Whether the stepperpanel is active.
+     */
+    active: boolean;
+    /**
+     * Whether the stepperpanel is highlighted.
+     */
+    highlighted: boolean;
+    /**
+     * Whether the stepperpanel is disabled.
+     */
+    disabled: boolean;
+}
+
+/**
+ * Defines valid properties in StepperPanel component.
+ * @group Properties
+ */
+export interface StepperPanelProps {
+    /**
+     * Orientation of tab headers.
+     */
+    header?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {StepperPanelPassThroughOptions}
+     */
+    pt?: StepperPanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * **PrimeReact - StepperPanel**
+ *
+ * _StepperPanel is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._
+ *
+ * [Live Demo](https://www.primereact.org/stepper/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const StepperPanel: React.FC<React.PropsWithChildren<StepperPanelProps>>;
diff --git a/components/lib/steps/Steps.js b/components/lib/steps/Steps.js
new file mode 100644
index 0000000000..327078da56
--- /dev/null
+++ b/components/lib/steps/Steps.js
@@ -0,0 +1,326 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { StepsBase } from './StepsBase';
+
+export const Steps = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = StepsBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const elementRef = React.useRef(null);
+        const listRef = React.useRef(null);
+        const count = React.Children.count(props.children);
+
+        const metaData = {
+            props,
+            state: {
+                id: idState,
+                activeIndex: props.activeIndex
+            }
+        };
+
+        const { ptm, ptmo, cx, isUnstyled } = StepsBase.setMetaData({
+            ...metaData
+        });
+
+        useHandleStyle(StepsBase.css.styles, isUnstyled, { name: 'steps' });
+
+        const getStepPT = (step, key, index) => {
+            const stepMetaData = {
+                // props: step.props,
+                parent: metaData,
+                context: {
+                    index,
+                    count,
+                    first: index === 0,
+                    last: index === count - 1,
+                    active: index === props.activeIndex,
+                    disabled: getStepProp(step, 'disabled')
+                }
+            };
+
+            return mergeProps(ptm(`step.${key}`, { step: stepMetaData }), ptm(`steps.${key}`, { steps: stepMetaData }), ptm(`steps.${key}`, stepMetaData), ptmo(getStepProp(step, 'pt'), key, stepMetaData));
+        };
+
+        const getStepProp = (step, name) => StepsBase.getCProp(step, name);
+
+        const itemClick = (event, item, index) => {
+            if (props.readOnly || item.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (props.onSelect) {
+                props.onSelect({
+                    originalEvent: event,
+                    item,
+                    index
+                });
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item,
+                    index
+                });
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const onItemKeyDown = (event, item, index) => {
+            if (props.readOnly) {
+                return;
+            }
+
+            switch (event.code) {
+                case 'ArrowRight':
+                    navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowLeft':
+                    navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    //no op
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                case 'Space':
+                    itemClick(event, item, index);
+                    event.preventDefault();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const navigateToNextItem = (target) => {
+            const nextItem = findNextItem(target);
+
+            nextItem && setFocusToMenuitem(target, nextItem);
+        };
+
+        const navigateToPrevItem = (target) => {
+            const prevItem = findPrevItem(target);
+
+            prevItem && setFocusToMenuitem(target, prevItem);
+        };
+
+        const navigateToFirstItem = (target) => {
+            const firstItem = findFirstItem(target);
+
+            firstItem && setFocusToMenuitem(target, firstItem);
+        };
+
+        const navigateToLastItem = (target) => {
+            const lastItem = findLastItem(target);
+
+            lastItem && setFocusToMenuitem(target, lastItem);
+        };
+
+        const findNextItem = (item) => {
+            const nextItem = item.parentElement.nextElementSibling;
+
+            return nextItem ? nextItem.children[0] : null;
+        };
+
+        const findPrevItem = (item) => {
+            const prevItem = item.parentElement.previousElementSibling;
+
+            return prevItem ? prevItem.children[0] : null;
+        };
+
+        const findFirstItem = () => {
+            const firstSibling = DomHandler.findSingle(listRef.current, '[data-pc-section="menuitem"]');
+
+            return firstSibling ? firstSibling.children[0] : null;
+        };
+
+        const findLastItem = () => {
+            const siblings = DomHandler.find(listRef.current, '[data-pc-section="menuitem"]');
+
+            return siblings ? siblings[siblings.length - 1].children[0] : null;
+        };
+
+        const setFocusToMenuitem = (target, focusableItem) => {
+            target.tabIndex = '-1';
+            focusableItem.tabIndex = '0';
+
+            setTimeout(() => focusableItem.focus(), 0);
+        };
+
+        const setFocusToFirstItem = () => {
+            const firstItem = findFirstItem();
+
+            firstItem.tabIndex = '0';
+            firstItem.focus();
+        };
+
+        const createItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            const key = item.id || idState + '_' + index;
+            const active = index === props.activeIndex;
+            const disabled = item.disabled || (index !== props.activeIndex && props.readOnly);
+
+            const iconClassName = classNames('p-menuitem-icon', item.icon);
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon', { item })
+                },
+                getStepPT(item, 'icon', index)
+            );
+
+            const icon = IconUtils.getJSXIcon(item.icon, { ...iconProps }, { props });
+
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getStepPT(item, 'label', index)
+            );
+
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+
+            const stepProps = mergeProps(
+                {
+                    className: cx('step')
+                },
+                getStepPT(item, 'step', index)
+            );
+
+            const actionProps = mergeProps(
+                {
+                    href: item.url || '#',
+                    className: cx('action'),
+                    tabIndex: '-1',
+                    onFocus: (event) => event.stopPropagation(),
+                    target: item.target,
+                    onKeyDown: (event) => onItemKeyDown(event, item, index),
+                    onClick: (event) => itemClick(event, item, index)
+                },
+                getStepPT(item, 'action', index)
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    <span {...stepProps}>{index + 1}</span>
+                    {icon}
+                    {label}
+                </a>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    onClick: (event) => itemClick(event, item, index),
+                    className: 'p-menuitem-link',
+                    labelClassName: 'p-steps-title',
+                    numberClassName: 'p-steps-number',
+                    iconClassName,
+                    'aria-current': active,
+                    element: content,
+                    props,
+                    active,
+                    disabled
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const menuItemProps = mergeProps(
+                {
+                    id: key,
+                    className: cx('menuitem', { active, disabled, item }),
+                    style: item.style
+                },
+                ptm('menuitem')
+            );
+
+            return (
+                <li {...menuItemProps} key={key}>
+                    {content}
+                </li>
+            );
+        };
+
+        const createItems = () => {
+            const menuProps = mergeProps(
+                {
+                    ref: listRef,
+                    tabIndex: props.readOnly ? null : '0',
+                    onFocus: () => {
+                        if (!props.readOnly) {
+                            setFocusToFirstItem();
+                        }
+                    },
+                    onBlur: () => setFocusToFirstItem
+                },
+                ptm('menu')
+            );
+
+            if (props.model) {
+                const items = props.model.map(createItem);
+
+                return <ol {...menuProps}>{items}</ol>;
+            }
+
+            return null;
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: props.style
+            },
+            StepsBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const items = createItems();
+
+        return <nav {...rootProps}>{items}</nav>;
+    })
+);
+
+Steps.displayName = 'Steps';
diff --git a/components/lib/steps/StepsBase.js b/components/lib/steps/StepsBase.js
new file mode 100644
index 0000000000..bad7a72b82
--- /dev/null
+++ b/components/lib/steps/StepsBase.js
@@ -0,0 +1,89 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames, ObjectUtils } from '../utils/Utils';
+
+const classes = {
+    icon: ({ item }) => classNames('p-menuitem-icon', item.icon),
+    label: 'p-steps-title',
+    step: 'p-steps-number',
+    action: 'p-menuitem-link',
+    menuitem: ({ active, disabled, item }) =>
+        classNames('p-steps-item', item.className, {
+            'p-highlight p-steps-current': active,
+            'p-disabled': disabled
+        }),
+    root: ({ props }) =>
+        classNames('p-steps p-component', {
+            'p-readonly': props.readOnly
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-steps {
+        position: relative;
+    }
+
+    .p-steps ol {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+        display: flex;
+    }
+
+    .p-steps-item {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        flex: 1 1 auto;
+    }
+
+    .p-steps-item .p-menuitem-link {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        overflow: hidden;
+        text-decoration: none;
+    }
+
+    .p-steps.p-readonly .p-steps-item {
+        cursor: auto;
+    }
+
+    .p-steps-item.p-steps-current .p-menuitem-link {
+        cursor: default;
+    }
+
+    .p-steps-title {
+        white-space: nowrap;
+    }
+
+    .p-steps-number {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .p-steps-title {
+        display: block;
+    }
+}
+`;
+
+export const StepsBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Steps',
+        id: null,
+        model: null,
+        activeIndex: 0,
+        readOnly: true,
+        style: null,
+        className: null,
+        onSelect: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    },
+    getCProp: (step, name) => ObjectUtils.getComponentProp(step, name, StepsBase.defaultProps)
+});
diff --git a/components/lib/steps/package.json b/components/lib/steps/package.json
new file mode 100644
index 0000000000..9fb979a3d2
--- /dev/null
+++ b/components/lib/steps/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./steps.cjs.js",
+    "module": "./steps.esm.js",
+    "unpkg": "./steps.min.js",
+    "types": "./steps.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/steps/steps.d.ts b/components/lib/steps/steps.d.ts
new file mode 100644
index 0000000000..3de72ea9de
--- /dev/null
+++ b/components/lib/steps/steps.d.ts
@@ -0,0 +1,192 @@
+/**
+ *
+ * Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.
+ *
+ * [Live Demo](https://www.primereact.org/steps/)
+ *
+ * @module steps
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type StepsPassThroughType<T> = PassThroughType<T, StepsThroughMethodOptions>;
+export declare type StepPassThroughType<T> = PassThroughType<T, StepPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepPassThroughMethodOptions {
+    // props: StepsProps;
+    parent: StepsThroughMethodOptions;
+    context: StepContext;
+}
+
+/**
+ * Defines current inline context in Steps component.
+ */
+export interface StepContext {
+    /**
+     * Step index.
+     */
+    index: number;
+    /**
+     * Total number of steps
+     */
+    count: number;
+    /**
+     * Is this the first step?
+     * @defaultValue false
+     */
+    first: boolean;
+    /**
+     * Is this the last step?
+     * @defaultValue false
+     */
+    last: boolean;
+    /**
+     * Is this step currently selected.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Is this step currently disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepsThroughMethodOptions {
+    props: StepsProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link StepsProps.pt}
+ */
+export interface StepsPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: StepsPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: StepsPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: StepsPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: StepPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the step's DOM element.
+     */
+    step?: StepPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: StepPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: StepPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom select event
+ * @see {@link StepsProps.onSelect}
+ * @event
+ */
+interface StepsSelectEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected item instance
+     */
+    item: MenuItem;
+    /**
+     * Index of selected item instance
+     */
+    index: number;
+}
+
+/**
+ * Defines valid properties in Steps component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface StepsProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onSelect' | 'ref'> {
+    /**
+     * An array of menuitems.
+     */
+    model: MenuItem[] | undefined;
+    /**
+     * Index of the active item.
+     * @defaultValue 0
+     */
+    activeIndex?: number | undefined;
+    /**
+     * Whether the items are clickable or not.
+     * @defaultValue true
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Callback to invoke when the new step is selected.
+     * @param {StepsSelectEvent} event - Custom select event
+     */
+    onSelect?(event: StepsSelectEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {StepsPassThroughOptions}
+     */
+    pt?: StepsPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Steps**
+ *
+ * _Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design._
+ *
+ * [Live Demo](https://www.primereact.org/steps/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Steps extends React.Component<StepsProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
new file mode 100644
index 0000000000..1ddd679b6b
--- /dev/null
+++ b/components/lib/styleclass/StyleClass.js
@@ -0,0 +1,227 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useEventListener, useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { StyleClassBase } from './StyleClassBase';
+
+export const StyleClass = React.forwardRef((inProps, ref) => {
+    const context = React.useContext(PrimeReactContext);
+    const props = StyleClassBase.getProps(inProps, context);
+
+    const targetRef = React.useRef(null);
+    const animating = React.useRef(false);
+    const elementRef = React.useRef(null);
+
+    const [bindTargetEnterListener, unbindTargetEnterListener] = useEventListener({
+        type: 'animationend',
+        listener: () => {
+            DomHandler.removeClass(targetRef.current, props.enterActiveClassName);
+
+            if (props.enterToClassName) {
+                DomHandler.addClass(targetRef.current, props.enterToClassName);
+            }
+
+            unbindTargetEnterListener();
+
+            if (props.enterActiveClassName === 'slidedown') {
+                targetRef.current.style.maxHeight = '';
+            }
+
+            animating.current = false;
+        }
+    });
+
+    const [bindTargetLeaveListener, unbindTargetLeaveListener] = useEventListener({
+        type: 'animationend',
+        listener: () => {
+            DomHandler.removeClass(targetRef.current, props.leaveActiveClassName);
+
+            if (props.leaveToClassName) {
+                DomHandler.addClass(targetRef.current, props.leaveToClassName);
+            }
+
+            unbindTargetLeaveListener();
+            animating.current = false;
+        }
+    });
+
+    const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+        type: 'click',
+        listener: (event) => {
+            if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
+                unbindDocumentClickListener();
+            } else if (isOutsideClick(event)) {
+                leave();
+            }
+        },
+        when: props.hideOnOutsideClick
+    });
+
+    const [bindClickListener, unbindClickListener] = useEventListener({
+        type: 'click',
+        listener: () => {
+            targetRef.current = resolveTarget();
+
+            if (props.toggleClassName) {
+                if (DomHandler.hasClass(targetRef.current, props.toggleClassName)) {
+                    DomHandler.removeClass(targetRef.current, props.toggleClassName);
+                } else {
+                    DomHandler.addClass(targetRef.current, props.toggleClassName);
+                }
+            } else {
+                DomHandler.isVisible(targetRef.current) ? leave() : enter();
+            }
+        }
+    });
+
+    const enter = () => {
+        if (props.enterActiveClassName) {
+            if (!animating.current) {
+                animating.current = true;
+
+                if (props.enterActiveClassName === 'slidedown') {
+                    targetRef.current.style.height = '0px';
+                    DomHandler.removeClass(targetRef.current, 'hidden');
+                    targetRef.current.style.maxHeight = targetRef.current.scrollHeight + 'px';
+                    DomHandler.addClass(targetRef.current, 'hidden');
+                    targetRef.current.style.height = '';
+                }
+
+                DomHandler.addClass(targetRef.current, props.enterActiveClassName);
+
+                // enterClassName will be deprecated, use enterFromClassName
+                if (props.enterClassName) {
+                    DomHandler.removeClass(targetRef.current, props.enterClassName);
+                }
+
+                if (props.enterFromClassName) {
+                    DomHandler.removeClass(targetRef.current, props.enterFromClassName);
+                }
+
+                bindTargetEnterListener({ target: targetRef.current });
+            }
+        } else {
+            // enterClassName will be deprecated, use enterFromClassName
+            if (props.enterClassName) {
+                DomHandler.removeClass(targetRef.current, props.enterClassName);
+            }
+
+            if (props.enterFromClassName) {
+                DomHandler.removeClass(targetRef.current, props.enterFromClassName);
+            }
+
+            if (props.enterToClassName) {
+                DomHandler.addClass(targetRef.current, props.enterToClassName);
+            }
+        }
+
+        bindDocumentClickListener({ target: elementRef.current && elementRef.current.ownerDocument });
+    };
+
+    const leave = () => {
+        if (props.leaveActiveClassName) {
+            if (!animating.current) {
+                animating.current = true;
+                DomHandler.addClass(targetRef.current, props.leaveActiveClassName);
+
+                // leaveClassName will be deprecated, use leaveFromClassName
+                if (props.leaveClassName) {
+                    DomHandler.removeClass(targetRef.current, props.leaveClassName);
+                }
+
+                if (props.leaveFromClassName) {
+                    DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
+                }
+
+                bindTargetLeaveListener({ target: targetRef.current });
+            }
+        } else {
+            // leaveClassName will be deprecated, use leaveFromClassName
+            if (props.leaveClassName) {
+                DomHandler.removeClass(targetRef.current, props.leaveClassName);
+            }
+
+            if (props.leaveFromClassName) {
+                DomHandler.removeClass(targetRef.current, props.leaveFromClassName);
+            }
+
+            if (props.leaveToClassName) {
+                DomHandler.addClass(targetRef.current, props.leaveToClassName);
+            }
+        }
+
+        if (props.hideOnOutsideClick) {
+            unbindDocumentClickListener();
+        }
+    };
+
+    const resolveTarget = () => {
+        if (targetRef.current) {
+            return targetRef.current;
+        }
+
+        switch (props.selector) {
+            case '@next':
+                return elementRef.current && elementRef.current.nextElementSibling;
+
+            case '@prev':
+                return elementRef.current && elementRef.current.previousElementSibling;
+
+            case '@parent':
+                return elementRef.current && elementRef.current.parentElement;
+
+            case '@grandparent':
+                return elementRef.current && elementRef.current.parentElement.parentElement;
+
+            default:
+                return document.querySelector(props.selector);
+        }
+    };
+
+    const init = () => {
+        Promise.resolve().then(() => {
+            elementRef.current = ObjectUtils.getRefElement(props.nodeRef);
+            bindClickListener({ target: elementRef.current });
+        });
+    };
+
+    const destroy = () => {
+        unbindClickListener();
+        unbindDocumentClickListener();
+        targetRef.current = null;
+    };
+
+    const isVisible = (target) => {
+        return target && target.offsetParent !== null;
+    };
+
+    const isOutsideClick = (event) => {
+        return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
+    };
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current,
+        getTarget: () => targetRef.current
+    }));
+
+    useMountEffect(() => {
+        init();
+    });
+
+    useUpdateEffect(() => {
+        init();
+
+        return () => {
+            unbindClickListener();
+        };
+    });
+
+    useUnmountEffect(() => {
+        destroy();
+    });
+
+    return props.children;
+});
+
+StyleClass.displayName = 'StyleClass';
diff --git a/components/lib/styleclass/StyleClassBase.js b/components/lib/styleclass/StyleClassBase.js
new file mode 100644
index 0000000000..60c1058e66
--- /dev/null
+++ b/components/lib/styleclass/StyleClassBase.js
@@ -0,0 +1,22 @@
+import { ObjectUtils } from '../utils/Utils';
+
+export const StyleClassBase = {
+    defaultProps: {
+        __TYPE: 'StyleClass',
+        nodeRef: null,
+        selector: null,
+        enterClassName: null,
+        enterFromClassName: null,
+        enterActiveClassName: null,
+        enterToClassName: null,
+        leaveClassName: null,
+        leaveFromClassName: null,
+        leaveActiveClassName: null,
+        leaveToClassName: null,
+        hideOnOutsideClick: false,
+        toggleClassName: null,
+        children: undefined
+    },
+    getProps: (props) => ObjectUtils.getMergedProps(props, StyleClassBase.defaultProps),
+    getOtherProps: (props) => ObjectUtils.getDiffProps(props, StyleClassBase.defaultProps)
+};
diff --git a/components/lib/styleclass/package.json b/components/lib/styleclass/package.json
new file mode 100644
index 0000000000..5388777f8c
--- /dev/null
+++ b/components/lib/styleclass/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./styleclass.cjs.js",
+    "module": "./styleclass.esm.js",
+    "unpkg": "./styleclass.min.js",
+    "types": "./styleclass.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/styleclass/styleclass.d.ts b/components/lib/styleclass/styleclass.d.ts
new file mode 100644
index 0000000000..2882c4ebca
--- /dev/null
+++ b/components/lib/styleclass/styleclass.d.ts
@@ -0,0 +1,97 @@
+/**
+ *
+ * StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element.
+ *
+ * [Live Demo](https://www.primereact.org/styleclass)
+ *
+ * @module styleclass
+ *
+ */
+import * as React from 'react';
+
+/**
+ * Defines valid properties in StyleClass component.
+ * @group Properties
+ */
+export interface StyleClassProps {
+    /**
+     * A React reference to DOM element that need to specify. Required.
+     */
+    nodeRef: React.MutableRefObject<React.ReactNode>;
+    /**
+     * Selector to define the target element.
+     */
+    selector?: '@next' | '@prev' | '@parent' | '@grandparent' | string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     * @deprecated since 10.5.2 Use 'enterFromClassName' option instead.
+     */
+    enterClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterFromClassName?: string | undefined;
+    /**
+     * Style class to add during enter animation.
+     */
+    enterActiveClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get displayed.
+     */
+    enterToClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get hidden.
+     * @deprecated since 10.5.2 Use 'leaveFromClassName' option instead.
+     */
+    leaveClassName?: string | undefined;
+    /**
+     * Style class to add when item begins to get hidden.
+     */
+    leaveFromClassName?: string | undefined;
+    /**
+     * Style class to add during leave animation.
+     */
+    leaveActiveClassName?: string | undefined;
+    /**
+     * Style class to add when leave animation is completed.
+     */
+    leaveToClassName?: string | undefined;
+    /**
+     * Whether to trigger leave animation when outside of the element is clicked.
+     * @defaultValue false
+     */
+    hideOnOutsideClick?: boolean | undefined;
+    /**
+     * Adds or removes a class when no enter-leave animation is required.
+     */
+    toggleClassName?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+}
+
+/**
+ * **PrimeReact - StyleClass**
+ *
+ * _StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element._
+ *
+ * [Live Demo](https://www.primereact.org/styleclass/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class StyleClass extends React.Component<StyleClassProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLElement | null} Container element
+     */
+    public getElement(): HTMLElement | null;
+    /**
+     * Used to get target element.
+     * @return {HTMLElement | null} Container element
+     */
+    public getTarget(): HTMLElement | null;
+}
diff --git a/components/lib/tabmenu/TabMenu.js b/components/lib/tabmenu/TabMenu.js
new file mode 100644
index 0000000000..d05e5fd128
--- /dev/null
+++ b/components/lib/tabmenu/TabMenu.js
@@ -0,0 +1,356 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { TabMenuBase } from './TabMenuBase';
+
+export const TabMenu = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TabMenuBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
+        const elementRef = React.useRef(null);
+        const inkbarRef = React.useRef(null);
+        const navRef = React.useRef(null);
+        const tabsRef = React.useRef({});
+        const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
+        const metaData = {
+            props,
+            state: {
+                id: idState,
+                activeIndex: activeIndex
+            }
+        };
+
+        const { ptm, cx, isUnstyled } = TabMenuBase.setMetaData({
+            ...metaData
+        });
+
+        const getPTOptions = (key, item, index) => {
+            return ptm(key, {
+                parent: metaData,
+                context: {
+                    item,
+                    index
+                }
+            });
+        };
+
+        useHandleStyle(TabMenuBase.css.styles, isUnstyled, { name: 'tabmenu' });
+
+        const itemClick = (event, item, index) => {
+            if (item.disabled) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (props.onTabChange) {
+                props.onTabChange({
+                    originalEvent: event,
+                    value: item,
+                    index
+                });
+            } else {
+                setActiveIndexState(index);
+            }
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const isSelected = (index) => {
+            return index === (activeIndex || 0);
+        };
+
+        const updateInkBar = () => {
+            if (props.model) {
+                let tabs = navRef.current.children;
+                let inkHighlighted = false;
+
+                for (let i = 0; i < tabs.length; i++) {
+                    let tab = tabs[i];
+
+                    if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
+                        inkbarRef.current.style.width = DomHandler.getWidth(tab) + 'px';
+                        inkbarRef.current.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(navRef.current).left + 'px';
+                        inkHighlighted = true;
+                    }
+                }
+
+                if (!inkHighlighted) {
+                    inkbarRef.current.style.width = '0px';
+                    inkbarRef.current.style.left = '0px';
+                }
+            }
+        };
+
+        useMountEffect(() => {
+            if (!idState) {
+                setIdState(UniqueComponentId());
+            }
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        React.useEffect(() => {
+            updateInkBar();
+        });
+
+        const onKeyDownItem = (event, item, index) => {
+            switch (event.code) {
+                case 'ArrowRight':
+                    navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowLeft':
+                    navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Home':
+                    navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+
+                case 'Space':
+                case 'Enter':
+                case 'NumpadEnter':
+                    itemClick(event, item, index);
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    onTabKey();
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const navigateToNextItem = (target) => {
+            const nextItem = findNextItem(target);
+
+            nextItem && setFocusToMenuitem(target, nextItem);
+        };
+
+        const navigateToPrevItem = (target) => {
+            const prevItem = findPrevItem(target);
+
+            prevItem && setFocusToMenuitem(target, prevItem);
+        };
+
+        const navigateToFirstItem = (target) => {
+            const firstItem = findFirstItem(target);
+
+            firstItem && setFocusToMenuitem(target, firstItem);
+        };
+
+        const navigateToLastItem = (target) => {
+            const lastItem = findLastItem(target);
+
+            lastItem && setFocusToMenuitem(target, lastItem);
+        };
+
+        const findNextItem = (item) => {
+            const nextItem = item.parentElement.nextElementSibling;
+
+            return nextItem ? (DomHandler.getAttribute(nextItem, 'data-p-disabled') === true ? findNextItem(nextItem.children[0]) : nextItem.children[0]) : null;
+        };
+
+        const findPrevItem = (item) => {
+            const prevItem = item.parentElement.previousElementSibling;
+
+            return prevItem ? (DomHandler.getAttribute(prevItem, 'data-p-disabled') === true ? findPrevItem(prevItem.children[0]) : prevItem.children[0]) : null;
+        };
+
+        const findFirstItem = () => {
+            const firstSibling = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+
+            return firstSibling ? firstSibling.children[0] : null;
+        };
+
+        const findLastItem = () => {
+            const siblings = DomHandler.find(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"]');
+
+            return siblings ? siblings[siblings.length - 1].children[0] : null;
+        };
+
+        const setFocusToMenuitem = (target, focusableItem) => {
+            target.tabIndex = '-1';
+            focusableItem.tabIndex = '0';
+            focusableItem.focus();
+        };
+
+        const onTabKey = () => {
+            const activeItem = DomHandler.findSingle(navRef.current, '[data-pc-section="menuitem"][data-p-disabled="false"][data-p-highlight="true"]');
+            const focusedItem = DomHandler.findSingle(navRef.current, '[data-pc-section="action"][tabindex="0"]');
+
+            if (focusedItem !== activeItem.children[0]) {
+                activeItem && (activeItem.children[0].tabIndex = '0');
+                focusedItem.tabIndex = '-1';
+            }
+        };
+
+        const createMenuItem = (item, index) => {
+            if (item.visible === false) {
+                return null;
+            }
+
+            const { className: _className, style, disabled, icon: _icon, label: _label, template, url, target } = item;
+            const key = item.id || idState + '_' + index;
+            const active = isSelected(index);
+            const iconClassName = classNames('p-menuitem-icon', _icon);
+            const iconProps = mergeProps(
+                {
+                    className: cx('icon', { _icon })
+                },
+                getPTOptions('icon', item, index)
+            );
+
+            const icon = IconUtils.getJSXIcon(_icon, { ...iconProps }, { props });
+
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getPTOptions('label', item, index)
+            );
+
+            const label = _label && <span {...labelProps}>{_label}</span>;
+
+            const actionProps = mergeProps(
+                {
+                    href: url || '#',
+                    role: 'menuitem',
+                    'aria-label': _label,
+                    tabIndex: active ? '0' : '-1',
+                    className: cx('action'),
+                    target: target,
+                    onClick: (event) => itemClick(event, item, index)
+                },
+                getPTOptions('action', item, index)
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    {label}
+                    <Ripple />
+                </a>
+            );
+
+            if (template) {
+                const defaultContentOptions = {
+                    onClick: (event) => itemClick(event, item, index),
+                    className: 'p-menuitem-link',
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName,
+                    element: content,
+                    props,
+                    active,
+                    index,
+                    disabled
+                };
+
+                content = ObjectUtils.getJSXElement(template, item, defaultContentOptions);
+            }
+
+            const menuItemProps = mergeProps(
+                {
+                    ref: tabsRef.current[`tab_${index}`],
+                    id: key,
+                    onKeyDown: (event) => onKeyDownItem(event, item, index),
+                    className: cx('menuitem', { _className, active, disabled }),
+                    style: style,
+                    role: 'presentation',
+                    'data-p-highlight': active,
+                    'data-p-disabled': disabled || false,
+                    'aria-disabled': disabled
+                },
+                getPTOptions('menuitem', item, index)
+            );
+
+            return (
+                <li {...menuItemProps} key={key}>
+                    {content}
+                </li>
+            );
+        };
+
+        const createItems = () => {
+            return props.model.map(createMenuItem);
+        };
+
+        if (props.model) {
+            const items = createItems();
+
+            const inkbarProps = mergeProps(
+                {
+                    ref: inkbarRef,
+                    role: 'none',
+                    className: cx('inkbar')
+                },
+                ptm('inkbar')
+            );
+            const menuProps = mergeProps(
+                {
+                    ref: navRef,
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
+                    className: cx('menu'),
+                    role: 'menubar'
+                },
+                ptm('menu')
+            );
+
+            const rootProps = mergeProps(
+                {
+                    id: props.id,
+                    ref: elementRef,
+                    className: classNames(props.className, cx('root')),
+                    style: props.style
+                },
+                TabMenuBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            return (
+                <div {...rootProps}>
+                    <ul {...menuProps}>
+                        {items}
+                        <li {...inkbarProps} />
+                    </ul>
+                </div>
+            );
+        }
+
+        return null;
+    })
+);
+
+TabMenu.displayName = 'TabMenu';
diff --git a/components/lib/tabmenu/TabMenuBase.js b/components/lib/tabmenu/TabMenuBase.js
new file mode 100644
index 0000000000..19585bc5d7
--- /dev/null
+++ b/components/lib/tabmenu/TabMenuBase.js
@@ -0,0 +1,83 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    icon: ({ _icon }) => classNames('p-menuitem-icon', _icon),
+    label: 'p-menuitem-text',
+    action: 'p-menuitem-link',
+    menuitem: ({ _className, active, disabled }) =>
+        classNames(
+            'p-tabmenuitem',
+            {
+                'p-highlight': active,
+                'p-disabled': disabled
+            },
+            _className
+        ),
+    inkbar: 'p-tabmenu-ink-bar',
+    menu: 'p-tabmenu-nav p-reset',
+    root: 'p-tabmenu p-component'
+};
+
+const styles = `
+@layer primereact {
+    .p-tabmenu {
+        overflow-x: auto;
+    }
+
+    .p-tabmenu-nav {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        flex-wrap: nowrap;
+    }
+
+    .p-tabmenu-nav a {
+        cursor: pointer;
+        user-select: none;
+        display: flex;
+        align-items: center;
+        position: relative;
+        text-decoration: none;
+        text-decoration: none;
+        overflow: hidden;
+    }
+
+    .p-tabmenu-nav a:focus {
+        z-index: 1;
+    }
+
+    .p-tabmenu-nav .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-tabmenu-ink-bar {
+        display: none;
+        z-index: 1;
+    }
+
+    .p-tabmenu::-webkit-scrollbar {
+        display: none;
+    }
+}
+`;
+
+export const TabMenuBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'TabMenu',
+        id: null,
+        model: null,
+        activeIndex: 0,
+        ariaLabel: null,
+        ariaLabelledBy: null,
+        style: null,
+        className: null,
+        onTabChange: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/tabmenu/package.json b/components/lib/tabmenu/package.json
new file mode 100644
index 0000000000..a22a36ce58
--- /dev/null
+++ b/components/lib/tabmenu/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./tabmenu.cjs.js",
+    "module": "./tabmenu.esm.js",
+    "unpkg": "./tabmenu.min.js",
+    "types": "./tabmenu.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/tabmenu/tabmenu.d.ts b/components/lib/tabmenu/tabmenu.d.ts
new file mode 100644
index 0000000000..306c9afff3
--- /dev/null
+++ b/components/lib/tabmenu/tabmenu.d.ts
@@ -0,0 +1,170 @@
+/**
+ *
+ * TabMenu is a navigation/command component that displays items as tab headers.
+ *
+ * [Live Demo](https://www.primereact.org/tabmenu/)
+ *
+ * @module tabmenu
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type TabMenuPassThroughType<T> = PassThroughType<T, TabMenuThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabMenuThroughMethodOptions {
+    props: TabMenuProps;
+    state: TabMenuState;
+    context: TabMenuContext;
+}
+
+/**
+ * Defines current options in TabMenu component.
+ */
+export interface TabMenuContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabMenuProps.pt}
+ */
+export interface TabMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: TabMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TabMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: TabMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TabMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TabMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in TabMenu component.
+ */
+export interface TabMenuState {
+    /**
+     * Current active index state as a number.
+     * @defaulValue 0
+     */
+    activeIndex: number;
+}
+
+/**
+ * Custom tab change event.
+ * @see {@link TabMenuProps.onTabChange}
+ * @event
+ */
+interface TabMenuTabChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected menuitem
+     */
+    value: MenuItem;
+    /**
+     * Index of the selected tab
+     */
+    index: number;
+}
+
+/**
+ * Defines valid properties in TabMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TabMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Active index of menuitem.
+     * @defaultValue 0
+     */
+    activeIndex?: number | undefined;
+    /**
+     * Callback to invoke when active tab changes.
+     * @param {TabMenuTabChangeEvent} event - Custom tab change event.
+     */
+    onTabChange?(event: TabMenuTabChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabMenuPassThroughOptions}
+     */
+    pt?: TabMenuPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - TabMenu**
+ *
+ * _TabMenu is a navigation/command component that displays items as tab headers._
+ *
+ * [Live Demo](https://www.primereact.org/tabmenu/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TabMenu extends React.Component<TabMenuProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/tabview/TabView.js b/components/lib/tabview/TabView.js
new file mode 100644
index 0000000000..ac11855364
--- /dev/null
+++ b/components/lib/tabview/TabView.js
@@ -0,0 +1,619 @@
+import * as React from 'react';
+import { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronLeftIcon } from '../icons/chevronleft';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { TimesIcon } from '../icons/times';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, classNames } from '../utils/Utils';
+import { TabPanelBase, TabViewBase } from './TabViewBase';
+
+export const TabPanel = () => {};
+
+export const TabView = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = TabViewBase.getProps(inProps, context);
+
+    const [idState, setIdState] = React.useState(props.id);
+    const [backwardIsDisabledState, setBackwardIsDisabledState] = React.useState(true);
+    const [forwardIsDisabledState, setForwardIsDisabledState] = React.useState(false);
+    const [hiddenTabsState, setHiddenTabsState] = React.useState([]);
+    const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
+    const elementRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const navRef = React.useRef(null);
+    const inkbarRef = React.useRef(null);
+    const prevBtnRef = React.useRef(null);
+    const nextBtnRef = React.useRef(null);
+    const tabsRef = React.useRef({});
+    const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
+    const count = React.Children.count(props.children);
+
+    const metaData = {
+        props,
+        state: {
+            id: idState,
+            isPrevButtonDisabled: backwardIsDisabledState,
+            isNextButtonDisabled: forwardIsDisabledState,
+            hiddenTabsState: hiddenTabsState,
+            activeIndex: activeIndexState
+        }
+    };
+
+    const { ptm, ptmo, cx, sx, isUnstyled } = TabViewBase.setMetaData({
+        ...metaData
+    });
+
+    useHandleStyle(TabViewBase.css.styles, isUnstyled, { name: 'tabview' });
+
+    const getTabPT = (tab, key, index) => {
+        const tabMetaData = {
+            props: tab.props,
+            parent: metaData,
+            context: {
+                index,
+                count,
+                first: index === 0,
+                last: index === count - 1,
+                active: index == activeIndexState,
+                disabled: getTabProp(tab, 'disabled')
+            }
+        };
+
+        return mergeProps(ptm(`tab.${key}`, { tab: tabMetaData }), ptm(`tabpanel.${key}`, { tabpanel: tabMetaData }), ptm(`tabpanel.${key}`, tabMetaData), ptmo(getTabProp(tab, 'pt'), key, tabMetaData));
+    };
+
+    const isSelected = (index) => index === activeIndex;
+    const getTabProp = (tab, name) => TabPanelBase.getCProp(tab, name);
+
+    const shouldUseTab = (tab) => {
+        return tab && getTabProp(tab, 'visible') && ObjectUtils.isValidChild(tab, 'TabPanel') && hiddenTabsState.every((_i) => _i !== tab.key);
+    };
+
+    const findVisibleActiveTab = (i) => {
+        const tabsInfo = React.Children.map(props.children, (tab, index) => {
+            if (shouldUseTab(tab)) {
+                return { tab, index };
+            }
+        });
+
+        return tabsInfo.find(({ tab, index }) => !getTabProp(tab, 'disabled') && index >= i) || tabsInfo.reverse().find(({ tab, index }) => !getTabProp(tab, 'disabled') && i > index);
+    };
+
+    const onTabHeaderClose = (event, index) => {
+        event.preventDefault();
+
+        const { onBeforeTabClose, onTabClose, children } = props;
+        const { key } = children[index];
+
+        // give caller a chance to stop the selection
+        if (onBeforeTabClose && onBeforeTabClose({ originalEvent: event, index }) === false) {
+            return;
+        }
+
+        setHiddenTabsState([...hiddenTabsState, key]);
+
+        if (onTabClose) {
+            onTabClose({ originalEvent: event, index });
+        }
+    };
+
+    const onTabHeaderClick = (event, tab, index) => {
+        changeActiveIndex(event, tab, index);
+    };
+
+    const changeActiveIndex = (event, tab, index) => {
+        if (event) {
+            event.preventDefault();
+        }
+
+        if (!getTabProp(tab, 'disabled')) {
+            // give caller a chance to stop the selection
+            if (props.onBeforeTabChange && props.onBeforeTabChange({ originalEvent: event, index }) === false) {
+                return;
+            }
+
+            if (props.onTabChange) {
+                props.onTabChange({ originalEvent: event, index });
+            } else {
+                setActiveIndexState(index);
+            }
+        }
+
+        updateScrollBar({ index });
+    };
+
+    const onKeyDown = (event, tab, index) => {
+        switch (event.code) {
+            case 'ArrowLeft':
+                onTabArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onTabArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onTabHomeKey(event);
+                break;
+
+            case 'End':
+                onTabEndKey(event);
+                break;
+
+            case 'PageDown':
+                onPageDownKey(event);
+                break;
+
+            case 'PageUp':
+                onPageUpKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                onTabEnterKey(event, tab, index);
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    const onTabArrowRightKey = (event) => {
+        const nextHeaderAction = findNextHeaderAction(event.target.parentElement);
+
+        nextHeaderAction ? changeFocusedTab(nextHeaderAction) : onTabHomeKey(event);
+        event.preventDefault();
+    };
+
+    const onTabArrowLeftKey = (event) => {
+        const prevHeaderAction = findPrevHeaderAction(event.target.parentElement);
+
+        prevHeaderAction ? changeFocusedTab(prevHeaderAction) : onTabEndKey(event);
+        event.preventDefault();
+    };
+
+    const onTabHomeKey = (event) => {
+        const firstHeaderAction = findFirstHeaderAction();
+
+        changeFocusedTab(firstHeaderAction);
+        event.preventDefault();
+    };
+
+    const onTabEndKey = (event) => {
+        const lastHeaderAction = findLastHeaderAction();
+
+        changeFocusedTab(lastHeaderAction);
+        event.preventDefault();
+    };
+
+    const onPageDownKey = (event) => {
+        updateScrollBar({ index: React.Children.count(props.children) - 1 });
+        event.preventDefault();
+    };
+
+    const onPageUpKey = (event) => {
+        updateScrollBar({ index: 0 });
+        event.preventDefault();
+    };
+
+    const onTabEnterKey = (event, tab, index) => {
+        changeActiveIndex(event, tab, index);
+        event.preventDefault();
+    };
+
+    const findNextHeaderAction = (tabElement, selfCheck = false) => {
+        const headerElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+
+        return headerElement
+            ? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
+                ? findNextHeaderAction(headerElement)
+                : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
+            : null;
+    };
+
+    const findPrevHeaderAction = (tabElement, selfCheck = false) => {
+        const headerElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+
+        return headerElement
+            ? DomHandler.getAttribute(headerElement, 'data-p-disabled') || DomHandler.getAttribute(headerElement, 'data-pc-section') === 'inkbar'
+                ? findPrevHeaderAction(headerElement)
+                : DomHandler.findSingle(headerElement, '[data-pc-section="headeraction"]')
+            : null;
+    };
+
+    const findFirstHeaderAction = () => {
+        return findNextHeaderAction(navRef.current.firstElementChild, true);
+    };
+
+    const findLastHeaderAction = () => {
+        return findPrevHeaderAction(navRef.current.lastElementChild, true);
+    };
+
+    const changeFocusedTab = (element) => {
+        if (element) {
+            DomHandler.focus(element);
+            updateScrollBar({ element });
+        }
+    };
+
+    const updateInkBar = () => {
+        const tabHeader = tabsRef.current[`tab_${activeIndex}`];
+
+        inkbarRef.current.style.width = DomHandler.getWidth(tabHeader) + 'px';
+        inkbarRef.current.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(navRef.current).left + 'px';
+    };
+
+    const updateScrollBar = ({ index, element }) => {
+        let tabHeader = element || tabsRef.current[`tab_${index}`];
+
+        if (tabHeader && tabHeader.scrollIntoView) {
+            tabHeader.scrollIntoView({ block: 'nearest' });
+        }
+    };
+
+    const updateButtonState = () => {
+        const { scrollLeft, scrollWidth } = contentRef.current;
+        const width = DomHandler.getWidth(contentRef.current);
+
+        setBackwardIsDisabledState(scrollLeft === 0);
+        setForwardIsDisabledState(parseInt(scrollLeft) === scrollWidth - width);
+    };
+
+    const onScroll = (event) => {
+        props.scrollable && updateButtonState();
+        event.preventDefault();
+    };
+
+    const getVisibleButtonWidths = () => {
+        return [prevBtnRef.current, nextBtnRef.current].reduce((acc, el) => (el ? acc + DomHandler.getWidth(el) : acc), 0);
+    };
+
+    const navBackward = () => {
+        const width = DomHandler.getWidth(contentRef.current) - getVisibleButtonWidths();
+        const pos = contentRef.current.scrollLeft - width;
+
+        contentRef.current.scrollLeft = pos <= 0 ? 0 : pos;
+    };
+
+    const navForward = () => {
+        const width = DomHandler.getWidth(contentRef.current) - getVisibleButtonWidths();
+        const pos = contentRef.current.scrollLeft + width;
+        const lastPos = contentRef.current.scrollWidth - width;
+
+        contentRef.current.scrollLeft = pos >= lastPos ? lastPos : pos;
+    };
+
+    const reset = () => {
+        setBackwardIsDisabledState(true);
+        setForwardIsDisabledState(false);
+        setHiddenTabsState([]);
+
+        if (props.onTabChange) {
+            props.onTabChange({ index: activeIndex });
+        } else {
+            setActiveIndexState(props.activeIndex);
+        }
+    };
+
+    React.useEffect(() => {
+        updateInkBar();
+        updateButtonState();
+    });
+
+    useMountEffect(() => {
+        if (!idState) {
+            setIdState(UniqueComponentId());
+        }
+
+        contentRef.current.style.scrollPaddingInline = Math.max(DomHandler.getWidth(prevBtnRef.current), DomHandler.getWidth(nextBtnRef.current), 0) + 'px';
+        updateScrollBar({ index: props.activeIndex });
+    });
+
+    useUpdateEffect(() => {
+        if (ObjectUtils.isNotEmpty(hiddenTabsState)) {
+            const tabInfo = findVisibleActiveTab(hiddenTabsState[hiddenTabsState.length - 1]);
+
+            tabInfo && onTabHeaderClick(null, tabInfo.tab, tabInfo.index);
+        }
+    }, [hiddenTabsState]);
+
+    useUpdateEffect(() => {
+        if (props.activeIndex !== activeIndexState) {
+            updateScrollBar({ index: props.activeIndex });
+        }
+    }, [props.activeIndex]);
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        reset,
+        getElement: () => elementRef.current
+    }));
+
+    const onCloseIconKeyDown = (event, index) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        switch (event.code) {
+            case 'Space':
+            case 'NumpadEnter':
+            case 'Enter':
+                onTabHeaderClose(event, index);
+                break;
+        }
+    };
+
+    const createTabHeader = (tab, index) => {
+        const selected = isSelected(index);
+        const { headerStyle, headerClassName, style: _style, className: _className, disabled, leftIcon, rightIcon, header, headerTemplate, closable, closeIcon } = TabPanelBase.getCProps(tab);
+        const headerId = idState + '_header_' + index;
+        const ariaControls = idState + index + '_content';
+        const tabIndex = disabled || !selected ? -1 : 0;
+        const leftIconElement = leftIcon && IconUtils.getJSXIcon(leftIcon, undefined, { props });
+        const headerTitleProps = mergeProps(
+            {
+                className: cx('tab.headertitle')
+            },
+            getTabPT(tab, 'headertitle', index)
+        );
+        const titleElement = <span {...headerTitleProps}>{header}</span>;
+        const rightIconElement = rightIcon && IconUtils.getJSXIcon(rightIcon, undefined, { props });
+        const closeIconProps = mergeProps(
+            {
+                className: cx('tab.closeIcon'),
+                onClick: (e) => onTabHeaderClose(e, index),
+                onKeyDown: (e) => onCloseIconKeyDown(e, index),
+                tabIndex: 0,
+                'aria-label': ariaLabel('close') || 'Close'
+            },
+            getTabPT(tab, 'closeIcon', index)
+        );
+        const icon = closeIcon || <TimesIcon {...closeIconProps} />;
+        const closableIconElement = closable ? IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props }) : null;
+
+        const headerActionProps = mergeProps(
+            {
+                id: headerId,
+                role: 'tab',
+                className: cx('tab.headeraction'),
+                tabIndex,
+                'aria-controls': ariaControls,
+                'aria-selected': selected,
+                'aria-disabled': disabled,
+                onClick: (e) => onTabHeaderClick(e, tab, index),
+                onKeyDown: (e) => onKeyDown(e, tab, index)
+            },
+            getTabPT(tab, 'headeraction', index)
+        );
+
+        let content = (
+            // eslint-disable /
+            <a {...headerActionProps}>
+                {leftIconElement}
+                {titleElement}
+                {rightIconElement}
+                {closableIconElement}
+                <Ripple />
+            </a>
+            // eslint-enable /
+        );
+
+        if (headerTemplate) {
+            const defaultContentOptions = {
+                className: 'p-tabview-nav-link',
+                titleClassName: 'p-tabview-title',
+                onClick: (e) => onTabHeaderClick(e, tab, index),
+                onKeyDown: (e) => onKeyDown(e, tab, index),
+                leftIconElement,
+                titleElement,
+                rightIconElement,
+                element: content,
+                props,
+                index,
+                selected,
+                ariaControls
+            };
+
+            content = ObjectUtils.getJSXElement(headerTemplate, defaultContentOptions);
+        }
+
+        const headerProps = mergeProps(
+            {
+                ref: (el) => (tabsRef.current[`tab_${index}`] = el),
+                className: cx('tab.header', { selected, disabled, headerClassName, _className }),
+                style: sx('tab.header', { headerStyle, _style }),
+                role: 'presentation'
+            },
+            getTabPT(tab, 'root', index),
+            getTabPT(tab, 'header', index)
+        );
+
+        return <li {...headerProps}>{content}</li>;
+    };
+
+    const createTabHeaders = () => {
+        return React.Children.map(props.children, (tab, index) => {
+            if (shouldUseTab(tab)) {
+                return createTabHeader(tab, index);
+            }
+        });
+    };
+
+    const createNavigator = () => {
+        const headers = createTabHeaders();
+
+        const navContentProps = mergeProps(
+            {
+                id: idState + '_navcontent',
+                ref: contentRef,
+                className: cx('navcontent'),
+                style: props.style,
+                onScroll
+            },
+            ptm('navcontent')
+        );
+
+        const navProps = mergeProps(
+            {
+                ref: navRef,
+                className: cx('nav'),
+                role: 'tablist'
+            },
+            ptm('nav')
+        );
+
+        const inkbarProps = mergeProps(
+            {
+                ref: inkbarRef,
+                'aria-hidden': 'true',
+                role: 'presentation',
+                className: cx('inkbar')
+            },
+            ptm('inkbar')
+        );
+
+        return (
+            <div {...navContentProps}>
+                <ul {...navProps}>
+                    {headers}
+                    <li {...inkbarProps} />
+                </ul>
+            </div>
+        );
+    };
+
+    const createContent = () => {
+        const panelContainerProps = mergeProps(
+            {
+                className: cx('panelcontainer'),
+                style: props.panelContainerStyle
+            },
+            ptm('panelcontainer')
+        );
+        const contents = React.Children.map(props.children, (tab, index) => {
+            if (shouldUseTab(tab) && (!props.renderActiveOnly || isSelected(index))) {
+                const selected = isSelected(index);
+                const contentId = idState + index + '_content';
+                const ariaLabelledBy = idState + '_header_' + index;
+                const contentProps = mergeProps(
+                    {
+                        id: contentId,
+                        className: cx('tab.content', { props, selected, getTabProp, tab, isSelected, shouldUseTab, index }),
+                        style: sx('tab.content', { props, getTabProp, tab, isSelected, shouldUseTab, index }),
+                        role: 'tabpanel',
+                        'aria-labelledby': ariaLabelledBy
+                    },
+                    TabPanelBase.getCOtherProps(tab),
+                    getTabPT(tab, 'root', index),
+                    getTabPT(tab, 'content', index)
+                );
+
+                return <div {...contentProps}>{!props.renderActiveOnly ? getTabProp(tab, 'children') : selected && getTabProp(tab, 'children')}</div>;
+            }
+        });
+
+        return <div {...panelContainerProps}>{contents}</div>;
+    };
+
+    const createPrevButton = () => {
+        const prevIconProps = mergeProps(
+            {
+                'aria-hidden': 'true'
+            },
+            ptm('previcon')
+        );
+        const icon = props.prevButton || <ChevronLeftIcon {...prevIconProps} />;
+        const leftIcon = IconUtils.getJSXIcon(icon, { ...prevIconProps }, { props });
+        const prevButtonProps = mergeProps(
+            {
+                ref: prevBtnRef,
+                type: 'button',
+                className: cx('prevbutton'),
+                'aria-label': ariaLabel('prevPageLabel'),
+                onClick: (e) => navBackward(e)
+            },
+            ptm('prevbutton')
+        );
+
+        if (props.scrollable && !backwardIsDisabledState) {
+            return (
+                <button {...prevButtonProps}>
+                    {leftIcon}
+                    <Ripple />
+                </button>
+            );
+        }
+
+        return null;
+    };
+
+    const createNextButton = () => {
+        const nextIconProps = mergeProps(
+            {
+                'aria-hidden': 'true'
+            },
+            ptm('nexticon')
+        );
+        const icon = props.nextButton || <ChevronRightIcon {...nextIconProps} />;
+        const rightIcon = IconUtils.getJSXIcon(icon, { ...nextIconProps }, { props });
+        const nextButtonProps = mergeProps(
+            {
+                ref: nextBtnRef,
+                type: 'button',
+                className: cx('nextbutton'),
+                'aria-label': ariaLabel('nextPageLabel'),
+                onClick: (e) => navForward(e)
+            },
+            ptm('nextbutton')
+        );
+
+        if (props.scrollable && !forwardIsDisabledState) {
+            return (
+                <button {...nextButtonProps}>
+                    {rightIcon}
+                    <Ripple />
+                </button>
+            );
+        }
+    };
+
+    const rootProps = mergeProps(
+        {
+            id: idState,
+            ref: elementRef,
+            style: props.style,
+            className: classNames(props.className, cx('root'))
+        },
+        TabViewBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const navContainerProps = mergeProps(
+        {
+            className: cx('navcontainer')
+        },
+        ptm('navcontainer')
+    );
+    const navigator = createNavigator();
+    const content = createContent();
+    const prevButton = createPrevButton();
+    const nextButton = createNextButton();
+
+    return (
+        <div {...rootProps}>
+            <div {...navContainerProps}>
+                {prevButton}
+                {navigator}
+                {nextButton}
+            </div>
+            {content}
+        </div>
+    );
+});
+
+TabPanel.displayName = 'TabPanel';
+
+TabView.displayName = 'TabView';
diff --git a/components/lib/tabview/TabViewBase.js b/components/lib/tabview/TabViewBase.js
new file mode 100644
index 0000000000..bd6ce97861
--- /dev/null
+++ b/components/lib/tabview/TabViewBase.js
@@ -0,0 +1,81 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { ObjectUtils, classNames } from '../utils/Utils';
+
+const classes = {
+    navcontent: 'p-tabview-nav-content',
+    nav: 'p-tabview-nav',
+    inkbar: 'p-tabview-ink-bar',
+    panelcontainer: ({ props }) => classNames('p-tabview-panels', props.panelContainerClassName),
+    prevbutton: 'p-tabview-nav-prev p-tabview-nav-btn p-link',
+    nextbutton: 'p-tabview-nav-next p-tabview-nav-btn p-link',
+    root: ({ props }) =>
+        classNames('p-tabview p-component', {
+            'p-tabview-scrollable': props.scrollable
+        }),
+    navcontainer: 'p-tabview-nav-container',
+    tab: {
+        header: ({ selected, disabled, headerClassName, _className }) => classNames('p-unselectable-text', { 'p-tabview-selected p-highlight': selected, 'p-disabled': disabled }, headerClassName, _className),
+        headertitle: 'p-tabview-title',
+        headeraction: 'p-tabview-nav-link',
+        closeIcon: 'p-tabview-close',
+        content: ({ props, selected, getTabProp, tab, isSelected, shouldUseTab, index }) =>
+            shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index)) ? classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), 'p-tabview-panel', { 'p-hidden': !selected }) : undefined
+    }
+};
+
+const inlineStyles = {
+    tab: {
+        header: ({ headerStyle, _style }) => ({ ...(headerStyle || {}), ...(_style || {}) }),
+        content: ({ props, getTabProp, tab, isSelected, shouldUseTab, index }) =>
+            shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index)) ? { ...(getTabProp(tab, 'contentStyle') || {}), ...(getTabProp(tab, 'style') || {}) } : undefined
+    }
+};
+
+export const TabViewBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'TabView',
+        id: null,
+        activeIndex: 0,
+        className: null,
+        onBeforeTabChange: null,
+        onBeforeTabClose: null,
+        onTabChange: null,
+        onTabClose: null,
+        panelContainerClassName: null,
+        panelContainerStyle: null,
+        renderActiveOnly: true,
+        scrollable: false,
+        style: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        inlineStyles
+    }
+});
+
+export const TabPanelBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'TabPanel',
+        children: undefined,
+        className: null,
+        closable: false,
+        closeIcon: null,
+        contentClassName: null,
+        contentStyle: null,
+        disabled: false,
+        header: null,
+        headerClassName: null,
+        headerStyle: null,
+        headerTemplate: null,
+        leftIcon: null,
+        nextButton: null,
+        prevButton: null,
+        rightIcon: null,
+        style: null,
+        visible: true
+    },
+    getCProp: (tab, name) => ObjectUtils.getComponentProp(tab, name, TabPanelBase.defaultProps),
+    getCProps: (tab) => ObjectUtils.getComponentProps(tab, TabPanelBase.defaultProps),
+    getCOtherProps: (tab) => ObjectUtils.getComponentDiffProps(tab, TabPanelBase.defaultProps)
+});
diff --git a/components/lib/tabview/package.json b/components/lib/tabview/package.json
new file mode 100644
index 0000000000..0742b06634
--- /dev/null
+++ b/components/lib/tabview/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./tabview.cjs.js",
+    "module": "./tabview.esm.js",
+    "unpkg": "./tabview.min.js",
+    "types": "./tabview.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/tabview/tabview.d.ts b/components/lib/tabview/tabview.d.ts
new file mode 100644
index 0000000000..c8923d763d
--- /dev/null
+++ b/components/lib/tabview/tabview.d.ts
@@ -0,0 +1,465 @@
+/**
+ *
+ * TabView is a container component to group content with tabs.
+ *
+ * [Live Demo](https://www.primereact.org/tabview/)
+ *
+ * Helper Components:
+ *
+ * - {@link TabPanel}
+ *
+ * @module tabview
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TabViewPassThroughType<T> = PassThroughType<T, TabViewPassThroughMethodOptions>;
+export declare type TabPanelPassThroughType<T> = PassThroughType<T, TabPanelPassThroughMethodOptions>;
+
+/**
+ * Custom Tabpanel header template options
+ */
+interface TabPanelHeaderTemplateOptions {
+    /**
+     * Style class of the header element.
+     */
+    className: string;
+    /**
+     * Style class of the header title element.
+     */
+    titleClassName: string;
+    /**
+     * Callback to invoke on click.
+     * @param {React.MouseEvent<HTMLElement>} event - Browser event.
+     */
+    onClick(event: React.MouseEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when the key pressed.
+     * @param {React.KeyboardEvent<HTMLElement>} event - Browser event.
+     */
+    onKeyDown(event: React.KeyboardEvent<HTMLElement>): void;
+    /**
+     * Left icon of the tab header.
+     */
+    leftIconElement: JSX.Element;
+    /**
+     * The title element of the tab header.
+     */
+    titleElement: JSX.Element;
+    /**
+     * Right icon of the tab header.
+     */
+    rightIconElement: JSX.Element;
+    /**
+     * The JSX element of the tab header.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the tab panel component.
+     */
+    props: TabPanelProps;
+    /**
+     * The index of the tab header.
+     */
+    index: number;
+    /**
+     * Whether the tab header is selected or not.
+     */
+    selected: boolean;
+    /**
+     * The aria-controls attribute of the tab header.
+     */
+    ariaControls: string;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPanelPassThroughMethodOptions {
+    props: TabPanelProps;
+    parent: TabViewPassThroughMethodOptions;
+    context: TabViewContext;
+}
+
+/**
+ * Defines current inline context in Tabview component.
+ */
+export interface TabViewContext {
+    /**
+     * Opened tab index.
+     */
+    index: number;
+    /**
+     * Total number of tabs
+     */
+    count: number;
+    /**
+     * Is this the first tab?
+     * @defaultValue false
+     */
+    first: boolean;
+    /**
+     * Is this the last tab?
+     * @defaultValue false
+     */
+    last: boolean;
+    /**
+     * Is this tab currently selected.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Is this tab currently disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabPanelProps.pt}
+ */
+export interface TabPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TabPanelPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headerAction?: TabPanelPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    headerTitle?: TabPanelPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    content?: TabPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in TabPanel component.
+ * @group Properties
+ */
+export interface TabPanelProps {
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Defines if tab can be removed.
+     * @defaultValue false
+     */
+    closable?: boolean | undefined;
+    /**
+     * Style class of the tab header and content.
+     */
+    className?: string | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the tab content.
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Orientation of tab headers.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * Header template of the tab to customize more.
+     */
+    headerTemplate?: React.ReactNode | ((options: TabPanelHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the tab header.
+     */
+    headerClassName?: string | undefined;
+    /**
+     * Icons can be placed at left of a header.
+     */
+    leftIcon?: IconType<TabPanel> | undefined;
+    /**
+     * Icons can be placed at right of a header.
+     */
+    rightIcon?: IconType<TabPanel> | undefined;
+    /**
+     * Previous button of the tab header.
+     */
+    prevButton?: IconType<TabPanel> | undefined;
+    /**
+     * Next button of the tab header.
+     */
+    nextButton?: IconType<TabPanel> | undefined;
+    /**
+     * Close button of the tab header.
+     */
+    closeIcon?: IconType<TabPanel> | undefined;
+    /**
+     * Whether the tab is disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabPanelPassThroughOptions}
+     */
+    pt?: TabPanelPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * Inline style of the tab header and content.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * When set as false, hides the tab panel.
+     * @defaultValue true
+     */
+    visible?: boolean | undefined;
+}
+
+/**
+ * TabPanel is a helper component for TabView.
+ * @group Component
+ */
+export declare class TabPanel extends React.Component<TabPanelProps, any> {}
+
+/**
+ * Custom change event.
+ * @see {@link TabViewProps.onTabChange}
+ * @event
+ */
+interface TabViewTabChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Index of the selected tab
+     */
+    index: number;
+}
+
+/**
+ * Custom close event.
+ * @see {@link TabViewProps.onTabClose}
+ * @event
+ */
+interface TabViewTabCloseEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Index of the selected tab
+     */
+    index: number;
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabViewPassThroughMethodOptions {
+    props: TabViewProps;
+    state: TabViewState;
+}
+
+/**
+ * Defines current inline state in TabView component.
+ */
+export interface TabViewState {
+    /**
+     * Current active index state.
+     */
+    activeIndex: number;
+    /**
+     * Unique id for the TabView component.
+     */
+    id: string;
+    /**
+     * Current state of hidden tab.
+     */
+    hiddenTabsState: (number | string)[];
+    /**
+     * Current state of previous button.
+     * @defaultValue true
+     */
+    isPrevButtonDisabled: boolean;
+    /**
+     * Current state of the next button.
+     * @defaultValue false
+     */
+    isNextButtonDisabled: boolean;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabViewProps.pt}
+ */
+export interface TabViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the nav container's DOM element.
+     */
+    navContainer?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the nav content's DOM element.
+     */
+    navContent?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    nav?: TabViewPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabViewPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the previous button's DOM element.
+     */
+    prevButton?: TabViewPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the previous button icon's DOM element.
+     */
+    previousIcon?: TabViewPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the next button's DOM element.
+     */
+    nextButton?: TabViewPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the next button icon's DOM element.
+     */
+    nextIcon?: TabViewPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panelContainer?: TabViewPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to accordion tabs.
+     */
+    tab?: TabPanelPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+
+/**
+ * Defines valid properties in TabView component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TabViewProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Active index of the TabView.
+     * @defaultValue 0
+     */
+    activeIndex?: number | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Style class of the panels container of the tabview.
+     */
+    panelContainerClassName?: string | undefined;
+    /**
+     * Inline style of the panels container of the tabview.
+     */
+    panelContainerStyle?: React.CSSProperties | undefined;
+    /**
+     * Whether to render the contents of the selected tab or all tabs.
+     * @defaultValue true
+     */
+    renderActiveOnly?: boolean | undefined;
+    /**
+     * When enabled displays buttons at each side of the tab headers to scroll the tab list.
+     * @defaultValue false
+     */
+    scrollable?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabViewPassThroughOptions}
+     */
+    pt?: TabViewPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Callback to invoke before an active tab is changed. Return false to prevent tab from changing.
+     * @param {TabViewTabChangeEvent} event - Custom tab change event.
+     */
+    onBeforeTabChange?(event: TabViewTabChangeEvent): void;
+    /**
+     * Callback to invoke before an active tab is close. Return false to prevent tab from closing.
+     * @param {TabViewTabCloseEvent} event - Custom tab close event.
+     */
+    onBeforeTabClose?(event: TabViewTabCloseEvent): void;
+    /**
+     * Callback to invoke when an active tab is changed.
+     * @param {TabViewTabChangeEvent} event -  Custom tab change event.
+     */
+    onTabChange?(event: TabViewTabChangeEvent): void;
+    /**
+     * Callback to invoke when an active tab is closed.
+     * @param {TabViewTabCloseEvent} event - Custom tab close event.
+     */
+    onTabClose?(event: TabViewTabCloseEvent): void;
+}
+
+/**
+ * **PrimeReact - TabPanel**
+ *
+ * _TabView is a container component to group content with tabs._
+ *
+ * [Live Demo](https://www.primereact.org/tabview/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+// tslint:disable-next-line:max-classes-per-file
+export declare class TabView extends React.Component<TabViewProps, any> {
+    /**
+     * Resets all states.
+     */
+    public reset(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/tag/Tag.js b/components/lib/tag/Tag.js
new file mode 100644
index 0000000000..d24c55b0f2
--- /dev/null
+++ b/components/lib/tag/Tag.js
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { IconUtils, classNames } from '../utils/Utils';
+import { TagBase } from './TagBase';
+
+export const Tag = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = TagBase.getProps(inProps, context);
+    const { ptm, cx, isUnstyled } = TagBase.setMetaData({
+        props
+    });
+
+    useHandleStyle(TagBase.css.styles, isUnstyled, { name: 'tag' });
+
+    const elementRef = React.useRef(null);
+
+    const iconProps = mergeProps(
+        {
+            className: cx('icon')
+        },
+        ptm('icon')
+    );
+
+    const icon = IconUtils.getJSXIcon(props.icon, { ...iconProps }, { props });
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        getElement: () => elementRef.current
+    }));
+
+    const rootProps = mergeProps(
+        {
+            ref: elementRef,
+            className: classNames(props.className, cx('root')),
+            style: props.style
+        },
+        TagBase.getOtherProps(props),
+        ptm('root')
+    );
+
+    const valueProps = mergeProps(
+        {
+            className: cx('value')
+        },
+        ptm('value')
+    );
+
+    return (
+        <span {...rootProps}>
+            {icon}
+            <span {...valueProps}>{props.value}</span>
+            <span>{props.children}</span>
+        </span>
+    );
+});
+
+Tag.displayName = 'Tag';
diff --git a/components/lib/tag/Tag.spec.js b/components/lib/tag/Tag.spec.js
new file mode 100644
index 0000000000..8b240f3ec1
--- /dev/null
+++ b/components/lib/tag/Tag.spec.js
@@ -0,0 +1,21 @@
+import '@testing-library/jest-dom';
+import { Tag } from './Tag';
+
+import { snapshot } from '../../test';
+
+describe('Tag', () => {
+    snapshot(<Tag />, 'default');
+    snapshot(<Tag value={'jest'} />, 'value');
+    snapshot(<Tag severity="success" />, 'sevrity success');
+    snapshot(<Tag severity="info" />, 'sevrity info');
+    snapshot(<Tag severity="warning" />, 'sevrity warning');
+    snapshot(<Tag severity="danger" />, 'sevrity danger');
+    snapshot(<Tag rounded />, 'rounded');
+    snapshot(<Tag icon="pi pi-check" />, 'icon');
+    snapshot(
+        <Tag>
+            <div>hello</div>
+        </Tag>,
+        'templating'
+    );
+});
diff --git a/components/lib/tag/TagBase.js b/components/lib/tag/TagBase.js
new file mode 100644
index 0000000000..49b40c8019
--- /dev/null
+++ b/components/lib/tag/TagBase.js
@@ -0,0 +1,49 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    value: 'p-tag-value',
+    icon: 'p-tag-icon',
+    root: ({ props }) =>
+        classNames('p-tag p-component', {
+            [`p-tag-${props.severity}`]: props.severity !== null,
+            'p-tag-rounded': props.rounded
+        })
+};
+
+const styles = `
+@layer primereact {
+    .p-tag {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .p-tag-icon,
+    .p-tag-value,
+    .p-tag-icon.pi {
+        line-height: 1.5;
+    }
+    
+    .p-tag.p-tag-rounded {
+        border-radius: 10rem;
+    }
+}
+`;
+
+export const TagBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Tag',
+        value: null,
+        severity: null,
+        rounded: false,
+        icon: null,
+        style: null,
+        className: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/tag/__snapshots__/Tag.spec.js.snap b/components/lib/tag/__snapshots__/Tag.spec.js.snap
new file mode 100644
index 0000000000..a547b6976e
--- /dev/null
+++ b/components/lib/tag/__snapshots__/Tag.spec.js.snap
@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag default 1`] = `
+<div>
+  <span
+    class="p-tag p-component"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span />
+  </span>
+</div>
+`;
+
+exports[`Tag icon 1`] = `
+<div>
+  <span
+    class="p-tag p-component"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-icon pi pi-check"
+      data-pc-section="icon"
+    />
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span />
+  </span>
+</div>
+`;
+
+exports[`Tag rounded 1`] = `
+<div>
+  <span
+    class="p-tag p-component p-tag-rounded"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span />
+  </span>
+</div>
+`;
+
+exports[`Tag sevrity danger 1`] = `
+<div>
+  <span
+    class="p-tag p-component p-tag-danger"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span />
+  </span>
+</div>
+`;
+
+exports[`Tag sevrity info 1`] = `
+<div>
+  <span
+    class="p-tag p-component p-tag-info"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span />
+  </span>
+</div>
+`;
+
+exports[`Tag sevrity success 1`] = `
+<div>
+  <span
+    class="p-tag p-component p-tag-success"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span />
+  </span>
+</div>
+`;
+
+exports[`Tag sevrity warning 1`] = `
+<div>
+  <span
+    class="p-tag p-component p-tag-warning"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span />
+  </span>
+</div>
+`;
+
+exports[`Tag templating 1`] = `
+<div>
+  <span
+    class="p-tag p-component"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    />
+    <span>
+      <div>
+        hello
+      </div>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`Tag value 1`] = `
+<div>
+  <span
+    class="p-tag p-component"
+    data-pc-name="tag"
+    data-pc-section="root"
+  >
+    <span
+      class="p-tag-value"
+      data-pc-section="value"
+    >
+      jest
+    </span>
+    <span />
+  </span>
+</div>
+`;
diff --git a/components/lib/tag/package.json b/components/lib/tag/package.json
new file mode 100644
index 0000000000..69c4374fe5
--- /dev/null
+++ b/components/lib/tag/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./tag.cjs.js",
+    "module": "./tag.esm.js",
+    "unpkg": "./tag.min.js",
+    "types": "./tag.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/tag/tag.d.ts b/components/lib/tag/tag.d.ts
new file mode 100644
index 0000000000..70513900b1
--- /dev/null
+++ b/components/lib/tag/tag.d.ts
@@ -0,0 +1,110 @@
+/**
+ *
+ * Tag component is used to categorize content.
+ *
+ * [Live Demo](https://www.primereact.org/tag)
+ *
+ * @module tag
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type TagPassThroughType<T> = PassThroughType<T, TagPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TagPassThroughMethodOptions {
+    props: TagProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TagProps.pt}
+ */
+export interface TagPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TagPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TagPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the value's DOM element.
+     */
+    value?: TagPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Tag component. In addition to these, all properties of HTMLSpanElement can be used in this component.
+ * @group Properties
+ */
+export interface TagProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'ref'> {
+    /**
+     * Value to display inside the tag.
+     */
+    value?: React.ReactNode;
+    /**
+     * Severity type of the tag.
+     * @defaultValue null
+     */
+    severity?: 'success' | 'info' | 'warning' | 'danger' | 'secondary' | 'contrast' | null | undefined;
+    /**
+     * Whether the corners of the tag are rounded.
+     * @defaultValue false
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Icon of the tag to display next to the value.
+     */
+    icon?: IconType<TagProps> | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TagPassThroughOptions}
+     */
+    pt?: TagPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Tag**
+ *
+ * _Tag component is used to categorize content._
+ *
+ * [Live Demo](https://www.primereact.org/tag/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Tag extends React.Component<TagProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLSpanElement | null} Container element
+     */
+    public getElement(): HTMLSpanElement | null;
+}
diff --git a/components/lib/terminal/Terminal.js b/components/lib/terminal/Terminal.js
new file mode 100644
index 0000000000..a1ef9dd084
--- /dev/null
+++ b/components/lib/terminal/Terminal.js
@@ -0,0 +1,224 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { TerminalService } from '../terminalservice/TerminalService';
+import { DomHandler, classNames } from '../utils/Utils';
+import { TerminalBase } from './TerminalBase';
+
+export const Terminal = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TerminalBase.getProps(inProps, context);
+
+        const [commandTextState, setCommandTextState] = React.useState('');
+        const [commandsState, setCommandsState] = React.useState([]);
+        const [indexState, setIndexState] = React.useState(0);
+        const [emittedTextState, setEmittedTextState] = React.useState('');
+        const elementRef = React.useRef(null);
+        const inputRef = React.useRef(null);
+        const isEmitted = React.useRef(false);
+
+        const { ptm, cx, isUnstyled } = TerminalBase.setMetaData({
+            props,
+            state: {
+                commandText: commandTextState,
+                commands: commandsState
+            }
+        });
+
+        useHandleStyle(TerminalBase.css.styles, isUnstyled, { name: 'terminal' });
+        const promptProps = mergeProps(
+            {
+                className: cx('prompt')
+            },
+            ptm('prompt')
+        );
+
+        const onClick = () => {
+            DomHandler.focus(inputRef.current);
+        };
+
+        const onInputChange = (e) => {
+            setCommandTextState(e.target.value);
+        };
+
+        const onKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowUp':
+                    if (commandsState && commandsState.length) {
+                        const prevIndex = indexState - 1 < 0 ? commandsState.length - 1 : indexState - 1;
+                        const command = commandsState[prevIndex];
+
+                        setIndexState(prevIndex);
+                        setCommandTextState(command.text);
+                    }
+
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    if (commandTextState) {
+                        let newCommands = [...commandsState];
+
+                        newCommands.push({ text: commandTextState });
+
+                        setIndexState((prevIndex) => prevIndex + 1);
+                        setCommandTextState('');
+                        setCommandsState(newCommands);
+                        setEmittedTextState(commandTextState);
+                        isEmitted.current = true;
+                    }
+
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focus(inputRef.current),
+            getElement: () => elementRef.current
+        }));
+
+        React.useEffect(() => {
+            const response = (res) => {
+                if (commandsState && commandsState.length > 0) {
+                    let commands = [...commandsState];
+
+                    commands[commands.length - 1].response = res;
+
+                    setCommandsState(commands);
+                }
+            };
+
+            const clear = () => {
+                setCommandsState([]);
+                setIndexState(0);
+            };
+
+            TerminalService.on('response', response);
+            TerminalService.on('clear', clear);
+
+            return () => {
+                TerminalService.off('response', response);
+                TerminalService.off('clear', clear);
+            };
+        }, [commandsState]);
+
+        React.useEffect(() => {
+            if (isEmitted.current) {
+                TerminalService.emit('command', emittedTextState);
+                isEmitted.current = false;
+            }
+
+            elementRef.current.scrollTop = elementRef.current.scrollHeight;
+        });
+
+        const createWelcomeMessage = () => {
+            if (props.welcomeMessage) {
+                const welcomeMessageProps = mergeProps(ptm('welcomeMessage'));
+
+                return <div {...welcomeMessageProps}>{props.welcomeMessage}</div>;
+            }
+
+            return null;
+        };
+
+        const createCommand = (command, index) => {
+            const { text, response } = command;
+            const key = text + '_' + index;
+            const commandsProps = mergeProps({ key }, ptm('commands'));
+            const commandProps = mergeProps(
+                {
+                    className: cx('command')
+                },
+                ptm('command')
+            );
+            const responseProps = mergeProps(
+                {
+                    className: cx('response'),
+                    'aria-live': 'polite'
+                },
+                ptm('response')
+            );
+
+            return (
+                <div {...commandsProps}>
+                    <span {...promptProps}>{props.prompt}&nbsp;</span>
+                    <span {...commandProps}>{text}</span>
+                    <div {...responseProps}>{response}</div>
+                </div>
+            );
+        };
+
+        const createContent = () => {
+            const content = commandsState.map(createCommand);
+            const contentProps = mergeProps(
+                {
+                    className: cx('content')
+                },
+                ptm('content')
+            );
+
+            return <div {...contentProps}>{content}</div>;
+        };
+
+        const createPromptContainer = () => {
+            const containerProps = mergeProps(
+                {
+                    className: cx('container')
+                },
+                ptm('container')
+            );
+
+            const commandTextProps = mergeProps(
+                {
+                    ref: inputRef,
+                    value: commandTextState,
+                    type: 'text',
+                    className: cx('commandText'),
+                    autoComplete: 'off',
+                    onChange: (e) => onInputChange(e),
+                    onKeyDown
+                },
+                ptm('commandText')
+            );
+
+            return (
+                <div {...containerProps}>
+                    <span {...promptProps}>{props.prompt}&nbsp;</span>
+                    <input {...commandTextProps} />
+                </div>
+            );
+        };
+
+        const welcomeMessage = createWelcomeMessage();
+        const content = createContent();
+        const prompt = createPromptContainer();
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: props.style,
+                onClick
+            },
+            TerminalBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {welcomeMessage}
+                {content}
+                {prompt}
+            </div>
+        );
+    })
+);
+
+Terminal.displayName = 'Terminal';
diff --git a/components/lib/terminal/TerminalBase.js b/components/lib/terminal/TerminalBase.js
new file mode 100644
index 0000000000..ab366ab45b
--- /dev/null
+++ b/components/lib/terminal/TerminalBase.js
@@ -0,0 +1,54 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const classes = {
+    root: 'p-terminal p-component',
+    content: 'p-terminal-content',
+    container: 'p-terminal-prompt-container',
+    command: 'p-terminal-command',
+    commandText: 'p-terminal-input',
+    prompt: 'p-terminal-prompt',
+    response: 'p-terminal-response'
+};
+
+const styles = `
+@layer primereact {
+    .p-terminal {
+        height: 18rem;
+        overflow: auto;
+    }
+    
+    .p-terminal-prompt-container {
+        display: flex;
+        align-items: center;
+    }
+    
+    .p-terminal-input {
+        flex: 1 1 auto;
+        border: 0 none;
+        background-color: transparent;
+        color: inherit;
+        padding: 0;
+        outline: 0 none;
+    }
+    
+    .p-terminal-input::-ms-clear {
+        display: none;
+    }        
+}
+`;
+
+export const TerminalBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Terminal',
+        id: null,
+        style: null,
+        className: null,
+        welcomeMessage: null,
+        prompt: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/terminal/package.json b/components/lib/terminal/package.json
new file mode 100644
index 0000000000..a05a4e1cd7
--- /dev/null
+++ b/components/lib/terminal/package.json
@@ -0,0 +1,7 @@
+{
+  "main": "./terminal.cjs.js",
+  "module": "./terminal.esm.js",
+  "unpkg": "./terminal.min.js",
+  "types": "./terminal.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/terminal/terminal.d.ts b/components/lib/terminal/terminal.d.ts
new file mode 100644
index 0000000000..31d38ff753
--- /dev/null
+++ b/components/lib/terminal/terminal.d.ts
@@ -0,0 +1,143 @@
+/**
+ *
+ * Terminal is a text based user interface.
+ *
+ * [Live Demo](https://www.primereact.org/terminal)
+ *
+ * @module terminal
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils';
+
+export declare type TerminalPassThroughType<T> = PassThroughType<T, TerminalPassThroughMethodOptions>;
+
+/**
+ * Defines current inline state in Terminal component.
+ */
+export interface TerminalState {
+    /**
+     * Current command text as a string.
+     */
+    commandText: string;
+    /**
+     * Current commands as an array.
+     */
+    commands: string[];
+}
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TerminalPassThroughMethodOptions {
+    props: TerminalProps;
+    state: TerminalState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TerminalProps.pt}
+ */
+export interface TerminalPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TerminalPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the welcome message's DOM element.
+     */
+    welcomeMessage?: TerminalPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TerminalPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the commands' DOM element.
+     */
+    commands?: TerminalPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the prompt's DOM element.
+     */
+    prompt?: TerminalPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the command's DOM element.
+     */
+    command?: TerminalPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the response's DOM element.
+     */
+    response?: TerminalPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: TerminalPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the command text's DOM element.
+     */
+    commandText?: TerminalPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Terminal component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TerminalProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * Initial text to display on terminal.
+     */
+    welcomeMessage?: string | undefined;
+    /**
+     * Prompt text for each command.
+     */
+    prompt?: string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TerminalPassThroughOptions}
+     */
+    pt?: TerminalPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Terminal**
+ *
+ * _Terminal is a text based user interface._
+ *
+ * [Live Demo](https://www.primereact.org/terminal/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Terminal extends React.Component<TerminalProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/terminalservice/TerminalService.js b/components/lib/terminalservice/TerminalService.js
new file mode 100644
index 0000000000..ebee0dcc08
--- /dev/null
+++ b/components/lib/terminalservice/TerminalService.js
@@ -0,0 +1,3 @@
+import { EventBus } from '../utils/Utils';
+
+export const TerminalService = EventBus();
diff --git a/components/lib/terminalservice/package.json b/components/lib/terminalservice/package.json
new file mode 100644
index 0000000000..72b676d631
--- /dev/null
+++ b/components/lib/terminalservice/package.json
@@ -0,0 +1,7 @@
+{
+  "main": "./terminalservice.cjs.js",
+  "module": "./terminalservice.esm.js",
+  "unpkg": "./terminalservice.min.js",
+  "types": "./terminalservice.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/terminalservice/terminalservice.d.ts b/components/lib/terminalservice/terminalservice.d.ts
new file mode 100644
index 0000000000..1e90a6d9cc
--- /dev/null
+++ b/components/lib/terminalservice/terminalservice.d.ts
@@ -0,0 +1,46 @@
+/**
+ *
+ * Terminal is a text based user interface.
+ *
+ * [Live Demo](https://www.primereact.org/terminal/)
+ *
+ * @module terminalservice
+ *
+ */
+
+/**
+ * Custom terminal service options.
+ */
+export interface TerminalServiceOptions {
+    /**
+     * Method to attach an event listener to a specific action.
+     * @param {'command' | 'response' | 'clear'} action - Custom listener.
+     * @param {*} fn - Custom listener.
+     */
+    on(action: 'command' | 'response' | 'clear', fn: any): void;
+    /**
+     * Method to emit an event for a specific action.
+     * @param {'command' | 'response' | 'clear'} action - Custom listener.
+     * @param {*} params - Custom listener.
+     */
+    emit(action: 'command' | 'response' | 'clear', params?: any): void;
+    /**
+     * Method to detach an event listener from a specific action.
+     * @param {'command' | 'response' | 'clear'} action - Custom listener.
+     * @param {*} fn - Custom listener.
+     */
+    off(action: 'command' | 'response' | 'clear', fn: any): void;
+}
+
+/**
+ * **PrimeReact - TerminalService**
+ *
+ * _Terminal is a text based user interface._
+ *
+ * [Live Demo](https://www.primereact.org/terminal/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare const TerminalService: TerminalServiceOptions;
diff --git a/components/lib/tieredmenu/TieredMenu.js b/components/lib/tieredmenu/TieredMenu.js
new file mode 100644
index 0000000000..f21d6a5334
--- /dev/null
+++ b/components/lib/tieredmenu/TieredMenu.js
@@ -0,0 +1,753 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useEventListener, useMatchMedia, useMergeProps, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Portal } from '../portal/Portal';
+import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { TieredMenuBase } from './TieredMenuBase';
+import { TieredMenuSub } from './TieredMenuSub';
+
+export const TieredMenu = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TieredMenuBase.getProps(inProps, context);
+
+        const [idState, setIdState] = React.useState(props.id);
+        const [visibleState, setVisibleState] = React.useState(!props.popup);
+        const [activeItemPath, setActiveItemPath] = React.useState([]);
+        const [focused, setFocused] = React.useState(false);
+        const [focusedItemId, setFocusedItemId] = React.useState(null);
+        const [focusedItemInfo, setFocusedItemInfo] = React.useState({ index: -1, level: 0, parentKey: '' });
+        const [dirty, setDirty] = React.useState(false);
+        const [processedItems, setProcessedItems] = React.useState([]);
+        const [visibleItems, setVisibleItems] = React.useState([]);
+        const [focusTrigger, setFocusTrigger] = React.useState(false);
+        const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
+        const metaData = {
+            props,
+            ...props.__parentMetadata,
+            state: {
+                id: idState,
+                visible: visibleState,
+                attributeSelector: attributeSelectorState
+            }
+        };
+        const { ptm, cx, sx, isUnstyled } = TieredMenuBase.setMetaData(metaData);
+
+        useHandleStyle(TieredMenuBase.css.styles, isUnstyled, { name: 'tieredmenu' });
+
+        const containerRef = React.useRef(null);
+        const menuRef = React.useRef(null);
+        const targetRef = React.useRef(null);
+        const relatedTarget = React.useRef(null);
+        const styleElementRef = React.useRef(null);
+        const searchValue = React.useRef(null);
+        const searchTimeout = React.useRef(null);
+        const isMobileMode = useMatchMedia(`screen and (max-width: ${props.breakpoint})`, !!props.breakpoint);
+
+        const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+            type: 'click',
+            listener: (event) => {
+                const isOutsideContainer = containerRef.current && !containerRef.current.contains(event.target);
+                const isOutsideTarget = props.popup ? !(targetRef.current && (targetRef.current === event.target || targetRef.current.contains(event.target))) : true;
+
+                if (isOutsideContainer && isOutsideTarget) {
+                    hide(event, !props.popup);
+                }
+            }
+        });
+
+        const [bindDocumentResizeListener, unbindDocumentResizeListener] = useResizeListener({
+            listener: () => {
+                !isMobileMode && hide(event, true);
+            }
+        });
+
+        const onPanelClick = (event) => {
+            if (props.popup) {
+                OverlayService.emit('overlay-click', {
+                    originalEvent: event,
+                    target: targetRef.current
+                });
+            }
+        };
+
+        const toggle = (event) => {
+            if (props.popup) {
+                visibleState ? hide(event) : show(event);
+            }
+        };
+
+        const show = (event) => {
+            if (props.popup) {
+                targetRef.current = event.currentTarget;
+                setVisibleState(true);
+                props.onShow && props.onShow(event);
+                relatedTarget.current = event.relatedTarget || null;
+            }
+
+            setFocusedItemInfo({ index: findFirstFocusedItemIndex(), level: 0, parentKey: '' });
+        };
+
+        const hide = (event, isFocus) => {
+            if (props.popup) {
+                setVisibleState(false);
+                props.onHide && props.onHide(event);
+            }
+
+            const menuElement = getMenuElement();
+
+            setActiveItemPath([]);
+            setFocusedItemInfo({ index: -1, level: 0, parentKey: '' });
+
+            isFocus && DomHandler.focus(relatedTarget.current || targetRef.current || menuElement);
+            setDirty(false);
+        };
+
+        const onFocus = (event) => {
+            setFocused(true);
+            setFocusedItemInfo(focusedItemInfo.index !== -1 ? focusedItemInfo : { index: findFirstFocusedItemIndex(), level: 0, parentKey: '' });
+
+            props.onFocus && props.onFocus(event);
+        };
+
+        const onBlur = (event) => {
+            setFocused(false);
+            setFocusedItemInfo({ index: -1, level: 0, parentKey: '' });
+            searchValue.current = '';
+            setDirty(false);
+            props.onBlur && props.onBlur(event);
+        };
+
+        const onKeyDown = (event) => {
+            const metaKey = event.metaKey || event.ctrlKey;
+
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    onHomeKey(event);
+                    break;
+
+                case 'End':
+                    onEndKey(event);
+                    break;
+
+                case 'Space':
+                    onSpaceKey(event);
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    props.popup && DomHandler.focus(targetRef.current);
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    onTabKey(event);
+                    break;
+
+                case 'PageDown':
+                case 'PageUp':
+                case 'Backspace':
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                        searchItems(event.key);
+                    }
+
+                    break;
+            }
+        };
+
+        const onItemChange = (event) => {
+            const { processedItem, isFocus } = event;
+
+            if (ObjectUtils.isEmpty(processedItem)) {
+                return;
+            }
+
+            const { index, key, level, parentKey, items } = processedItem;
+            const grouped = ObjectUtils.isNotEmpty(items);
+
+            const _activeItemPath = activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+
+            if (grouped) {
+                _activeItemPath.push(processedItem);
+            }
+
+            setFocusedItemInfo({ index, level, parentKey });
+            setActiveItemPath(_activeItemPath);
+
+            grouped && setDirty(true);
+            isFocus && DomHandler.focus(getMenuElement());
+        };
+
+        const onItemClick = (event) => {
+            const { originalEvent, processedItem } = event;
+
+            if (isItemDisabled(processedItem) || props.isMobileMode) {
+                return;
+            }
+
+            const grouped = isProccessedItemGroup(processedItem);
+            const root = ObjectUtils.isEmpty(processedItem.parent);
+            const selected = isSelected(processedItem);
+            const menuElement = getMenuElement();
+
+            if (selected) {
+                const { index, key, level, parentKey } = processedItem;
+
+                setActiveItemPath(activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key)));
+                setFocusedItemInfo({ index, level, parentKey });
+
+                if (!grouped) {
+                    setDirty(!root);
+                }
+
+                setTimeout(() => {
+                    DomHandler.focus(menuElement);
+
+                    if (grouped) {
+                        setDirty(true);
+                    }
+                }, 0);
+            } else if (grouped) {
+                DomHandler.focus(menuElement);
+                onItemChange(event);
+            } else {
+                const rootProcessedItem = root ? processedItem : activeItemPath.find((p) => p.parentKey === '');
+                const rootProcessedItemIndex = rootProcessedItem ? rootProcessedItem.index : -1;
+
+                hide(originalEvent, true);
+                setFocusedItemInfo({ index: rootProcessedItemIndex, parentKey: rootProcessedItem ? rootProcessedItem.parentKey : '' });
+            }
+        };
+
+        const onItemMouseEnter = (event) => {
+            const { originalEvent, processedItem } = event;
+
+            if (isItemDisabled(processedItem) || props.isMobileMode) {
+                originalEvent.preventDefault();
+
+                return;
+            }
+
+            if (dirty) {
+                onItemChange(event);
+            }
+        };
+
+        const onArrowDownKey = (event) => {
+            const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+            changeFocusedItemIndex(itemIndex);
+            event.preventDefault();
+        };
+
+        const onArrowUpKey = (event) => {
+            if (event.altKey) {
+                if (props.popup) {
+                    DomHandler.focus(targetRef.current);
+                }
+
+                if (focusedItemInfo.index !== -1) {
+                    const processedItem = visibleItems[focusedItemInfo.index];
+                    const grouped = isProccessedItemGroup(processedItem);
+
+                    !grouped && onItemChange({ originalEvent: event, processedItem });
+                }
+
+                props.popup && hide(event, true);
+                event.preventDefault();
+            } else {
+                const itemIndex = focusedItemInfo.index !== -1 ? findPrevItemIndex(focusedItemInfo.index) : findLastFocusedItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+                event.preventDefault();
+            }
+        };
+
+        const onArrowLeftKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const parentItem = activeItemPath.find((p) => p.key === processedItem.parentKey);
+            const root = ObjectUtils.isEmpty(processedItem.parent);
+
+            if (!root) {
+                setFocusedItemInfo({ index: -1, parentKey: parentItem ? parentItem.parentKey : '' });
+                searchValue.current = '';
+                setTimeout(() => setFocusTrigger(true), 0);
+            }
+
+            setActiveItemPath(activeItemPath.filter((p) => p.parentKey !== focusedItemInfo.parentKey));
+
+            event.preventDefault();
+        };
+
+        const onArrowRightKey = (event) => {
+            const processedItem = visibleItems[focusedItemInfo.index];
+            const grouped = isProccessedItemGroup(processedItem);
+
+            if (grouped) {
+                onItemChange({ originalEvent: event, processedItem });
+                setFocusedItemInfo({ index: -1, parentKey: processedItem.key });
+                searchValue.current = '';
+                setTimeout(() => setFocusTrigger(true), 0);
+            }
+
+            event.preventDefault();
+        };
+
+        const onHomeKey = (event) => {
+            changeFocusedItemIndex(findFirstItemIndex());
+            event.preventDefault();
+        };
+
+        const onEndKey = (event) => {
+            changeFocusedItemIndex(findLastItemIndex());
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const element = DomHandler.findSingle(getMenuElement(), `li[id="${`${focusedItemId}`}"]`);
+                const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
+
+                props.popup && DomHandler.focus(targetRef.current);
+                anchorElement ? anchorElement.click() : element && element.click();
+            }
+
+            event.preventDefault();
+        };
+
+        const onSpaceKey = (event) => {
+            onEnterKey(event);
+        };
+
+        const onEscapeKey = (event) => {
+            hide(event, true);
+            !props.popup && setFocusedItemInfo({ ...focusedItemInfo, index: findFirstFocusedItemIndex() });
+
+            event.preventDefault();
+        };
+
+        const onTabKey = (event) => {
+            if (focusedItemInfo.index !== -1) {
+                const processedItem = visibleItems[focusedItemInfo.index];
+                const grouped = isProccessedItemGroup(processedItem);
+
+                !grouped && onItemChange({ originalEvent: event, processedItem });
+            }
+
+            hide(event);
+        };
+
+        const getMenuElement = () => {
+            return menuRef.current.getElement() || null;
+        };
+
+        const getItemProp = (item, name) => {
+            return item ? ObjectUtils.getItemValue(item[name]) : undefined;
+        };
+
+        const getItemLabel = (item) => {
+            return getItemProp(item, 'label');
+        };
+
+        const isItemDisabled = (item) => {
+            return getItemProp(item, 'disabled');
+        };
+
+        const isItemSeparator = (item) => {
+            return getItemProp(item, 'separator');
+        };
+
+        const getProccessedItemLabel = (processedItem) => {
+            return processedItem ? getItemLabel(processedItem.item) : undefined;
+        };
+
+        const isProccessedItemGroup = (processedItem) => {
+            return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const isItemMatched = (processedItem) => {
+            return isValidItem(processedItem) && getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(searchValue.current.toLocaleLowerCase());
+        };
+
+        const isValidItem = (processedItem) => {
+            return !!processedItem && !isItemDisabled(processedItem.item) && !isItemSeparator(processedItem.item);
+        };
+
+        const isValidSelectedItem = (processedItem) => {
+            return isValidItem(processedItem) && isSelected(processedItem);
+        };
+
+        const isSelected = (processedItem) => {
+            return activeItemPath.some((p) => p.key === processedItem.key);
+        };
+
+        const findFirstItemIndex = () => {
+            return visibleItems.findIndex((processedItem) => isValidItem(processedItem));
+        };
+
+        const findLastItemIndex = () => {
+            return ObjectUtils.findLastIndex(visibleItems, (processedItem) => isValidItem(processedItem));
+        };
+
+        const findNextItemIndex = (index) => {
+            const matchedItemIndex = index < visibleItems.length - 1 ? visibleItems.slice(index + 1).findIndex((processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
+        };
+
+        const findPrevItemIndex = (index) => {
+            const matchedItemIndex = index > 0 ? ObjectUtils.findLastIndex(visibleItems.slice(0, index), (processedItem) => isValidItem(processedItem)) : -1;
+
+            return matchedItemIndex > -1 ? matchedItemIndex : index;
+        };
+
+        const findSelectedItemIndex = () => {
+            return visibleItems.findIndex((processedItem) => isValidSelectedItem(processedItem));
+        };
+
+        const findFirstFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex < 0 ? findFirstItemIndex() : selectedIndex;
+        };
+
+        const findLastFocusedItemIndex = () => {
+            const selectedIndex = findSelectedItemIndex();
+
+            return selectedIndex < 0 ? findLastItemIndex() : selectedIndex;
+        };
+
+        const searchItems = (char) => {
+            searchValue.current = (searchValue.current || '') + char;
+
+            let itemIndex = -1;
+            let matched = false;
+
+            if (focusedItemInfo.index !== -1) {
+                itemIndex = visibleItems.slice(focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem));
+                itemIndex = itemIndex === -1 ? visibleItems.slice(0, focusedItemInfo.index).findIndex((processedItem) => isItemMatched(processedItem)) : itemIndex + focusedItemInfo.index;
+            } else {
+                itemIndex = visibleItems.findIndex((processedItem) => isItemMatched(processedItem));
+            }
+
+            if (itemIndex !== -1) {
+                matched = true;
+            }
+
+            if (itemIndex === -1 && focusedItemInfo.index === -1) {
+                itemIndex = findFirstFocusedItemIndex();
+            }
+
+            if (itemIndex !== -1) {
+                changeFocusedItemIndex(itemIndex);
+            }
+
+            if (searchTimeout.current) {
+                clearTimeout(searchTimeout);
+            }
+
+            searchTimeout.current = setTimeout(() => {
+                searchValue.current = '';
+                searchTimeout.current = null;
+            }, 500);
+
+            return matched;
+        };
+
+        const changeFocusedItemIndex = (index) => {
+            if (focusedItemInfo.index !== index) {
+                setFocusedItemInfo({ ...focusedItemInfo, index });
+                scrollInView();
+            }
+        };
+
+        const scrollInView = (index = -1) => {
+            const id = index !== -1 ? `${idState}_${index}` : focusedItemId;
+            const element = DomHandler.findSingle(getMenuElement(), `li[id="${id}"]`);
+
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        };
+
+        const createProcessedItems = React.useCallback((items, level = 0, parent = {}, parentKey = '') => {
+            const processedItems = [];
+
+            items &&
+                items.forEach((item, index) => {
+                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                    const newItem = {
+                        item,
+                        index,
+                        level,
+                        key,
+                        parent,
+                        parentKey
+                    };
+
+                    newItem.items = createProcessedItems(item.items, level + 1, newItem, key);
+                    processedItems.push(newItem);
+                });
+
+            return processedItems;
+        }, []);
+
+        const createStyle = () => {
+            if (!styleElementRef.current) {
+                styleElementRef.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+
+                const selector = `${attributeSelectorState}`;
+                const innerHTML = `
+@media screen and (max-width: ${props.breakpoint}) {
+    .p-tieredmenu[${selector}] > ul {
+        max-height: ${props.scrollHeight};
+        overflow: ${props.scrollHeight ? 'auto' : ''};
+    }
+
+    .p-tieredmenu[${selector}] .p-submenu-list {
+        position: relative;
+    }
+
+    .p-tieredmenu[${selector}] .p-menuitem-active > .p-submenu-list {
+        left: 0;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */
+    }
+
+    .p-tieredmenu[${selector}] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+        transform: rotate(-180deg);
+    }
+
+    .p-tieredmenu[${selector}] .p-submenu-icon:before {
+        content: "\\e930";
+    }
+
+    ${!props.popup ? `.p-tieredmenu[${selector}] { width: 100%; }` : ''}
+}
+`;
+
+                styleElementRef.current.innerHTML = innerHTML;
+            }
+        };
+
+        const destroyStyle = () => {
+            styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+        };
+
+        const alignOverlay = () => {
+            const calculateMinWidth = DomHandler.getOuterWidth(targetRef.current) > DomHandler.getOuterWidth(containerRef.current);
+
+            DomHandler.alignOverlay(containerRef.current, targetRef.current, props.appendTo, calculateMinWidth);
+        };
+
+        const onEnter = () => {
+            if (props.autoZIndex) {
+                ZIndexUtils.set('menu', containerRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.menu) || PrimeReact.zIndex.menu);
+            }
+
+            DomHandler.addStyles(containerRef.current, { position: 'absolute', top: '0', left: '0' });
+            alignOverlay();
+            DomHandler.focus(menuRef.current.getElement());
+            scrollInView();
+
+            if (attributeSelectorState && props.breakpoint) {
+                containerRef.current.setAttribute(attributeSelectorState, '');
+                createStyle();
+            }
+        };
+
+        const onEntered = () => {
+            bindDocumentClickListener();
+            bindDocumentResizeListener();
+        };
+
+        const onExit = () => {
+            targetRef.current = null;
+            unbindDocumentClickListener();
+            unbindDocumentResizeListener();
+        };
+
+        const onExited = () => {
+            ZIndexUtils.clear(containerRef.current);
+            destroyStyle();
+        };
+
+        useMountEffect(() => {
+            const uniqueId = UniqueComponentId();
+
+            !idState && setIdState(uniqueId);
+
+            if (props.breakpoint) {
+                !attributeSelectorState && setAttributeSelectorState(uniqueId);
+            }
+        });
+
+        React.useEffect(() => {
+            const itemsToProcess = props.model || [];
+            const processed = createProcessedItems(itemsToProcess);
+
+            setProcessedItems(processed);
+        }, [props.model, createProcessedItems]);
+
+        useUpdateEffect(() => {
+            const processedItem = activeItemPath.find((p) => p.key === focusedItemInfo.parentKey);
+            const processed = processedItem ? processedItem.items : processedItems;
+
+            setVisibleItems(processed);
+        }, [activeItemPath, focusedItemInfo, processedItems]);
+
+        useUpdateEffect(() => {
+            const focusedId = focusedItemInfo.index !== -1 ? `${idState}${ObjectUtils.isNotEmpty(focusedItemInfo.parentKey) ? '_' + focusedItemInfo.parentKey : ''}_${focusedItemInfo.index}` : null;
+
+            setFocusedItemId(focusedId);
+        }, [focusedItemInfo]);
+
+        useUpdateEffect(() => {
+            if (!props.popup) {
+                if (ObjectUtils.isNotEmpty(activeItemPath)) {
+                    bindDocumentClickListener();
+                    bindDocumentResizeListener();
+                } else {
+                    unbindDocumentClickListener();
+                    unbindDocumentResizeListener();
+                }
+            }
+        }, [activeItemPath]);
+
+        useUpdateEffect(() => {
+            if (focusTrigger) {
+                const itemIndex = focusedItemInfo.index !== -1 ? findNextItemIndex(focusedItemInfo.index) : findFirstFocusedItemIndex();
+
+                changeFocusedItemIndex(itemIndex);
+
+                setActiveItemPath(activeItemPath.filter((p) => p.parentKey !== focusedItemInfo.parentKey));
+                setFocusTrigger(false);
+            }
+        }, [focusTrigger]);
+
+        useUpdateEffect(() => {
+            if (attributeSelectorState && containerRef.current) {
+                containerRef.current.setAttribute(attributeSelectorState, '');
+                createStyle();
+            }
+
+            return () => {
+                destroyStyle();
+            };
+        }, [attributeSelectorState, props.breakpoint]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(containerRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            toggle,
+            show,
+            hide,
+            getElement: () => containerRef.current
+        }));
+
+        const createElement = () => {
+            const rootProps = mergeProps(
+                {
+                    ref: containerRef,
+                    id: props.id,
+                    className: classNames(props.className, cx('root')),
+                    style: props.style,
+                    onClick: onPanelClick
+                },
+                TieredMenuBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: cx('transition'),
+                    in: visibleState,
+                    timeout: { enter: 120, exit: 100 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEnter,
+                    onEntered,
+                    onExit,
+                    onExited
+                },
+                ptm('transition')
+            );
+
+            return (
+                <CSSTransition nodeRef={containerRef} {...transitionProps}>
+                    <div {...rootProps}>
+                        <TieredMenuSub
+                            id={idState + '_list'}
+                            ref={menuRef}
+                            hostName="TieredMenu"
+                            menuProps={props}
+                            tabIndex={0}
+                            model={processedItems}
+                            ariaLabel={props.ariaLabel}
+                            ariaLabelledBy={props.ariaLabelledBy}
+                            ariaOrientation="vertical"
+                            ariaActiveDescendant={focused ? focusedItemId : undefined}
+                            menuId={idState}
+                            level={0}
+                            focusedItemId={focusedItemId}
+                            activeItemPath={activeItemPath}
+                            onFocus={onFocus}
+                            onBlur={onBlur}
+                            onKeyDown={onKeyDown}
+                            onItemClick={onItemClick}
+                            onItemMouseEnter={onItemMouseEnter}
+                            root
+                            popup={props.popup}
+                            onHide={hide}
+                            isMobileMode={isMobileMode}
+                            submenuIcon={props.submenuIcon}
+                            ptm={ptm}
+                            cx={cx}
+                            sx={sx}
+                        />
+                    </div>
+                </CSSTransition>
+            );
+        };
+
+        const element = createElement();
+
+        return props.popup ? <Portal element={element} appendTo={props.appendTo} /> : element;
+    })
+);
+
+TieredMenu.displayName = 'TieredMenu';
diff --git a/components/lib/tieredmenu/TieredMenuBase.js b/components/lib/tieredmenu/TieredMenuBase.js
new file mode 100644
index 0000000000..cb6512c777
--- /dev/null
+++ b/components/lib/tieredmenu/TieredMenuBase.js
@@ -0,0 +1,109 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-tieredmenu p-component', {
+            'p-tieredmenu-overlay': props.popup,
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    separator: 'p-menuitem-separator',
+    icon: ({ _icon }) => classNames('p-menuitem-icon', _icon),
+    content: 'p-menuitem-content',
+    label: 'p-menuitem-text',
+    submenuIcon: 'p-submenu-icon',
+    action: 'p-menuitem-link',
+    menuitem: ({ itemClassName, active, focused, disabled }) => classNames('p-menuitem', { 'p-menuitem-active p-highlight': active, 'p-focus': focused, 'p-disabled': disabled }, itemClassName),
+    menu: 'p-tieredmenu-root-list',
+    submenu: 'p-submenu-list',
+    transition: 'p-connected-overlay'
+};
+
+const inlineStyles = {
+    submenu: ({ subProps: props }) => ({
+        display: !props.root && props.parentActive ? 'block' : 'none'
+    })
+};
+
+const styles = `
+@layer primereact {
+    .p-tieredmenu-overlay {
+        position: absolute;
+    }
+
+    .p-tieredmenu ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .p-tieredmenu .p-submenu-list {
+        position: absolute;
+        min-width: 100%;
+        z-index: 1;
+        display: none;
+    }
+
+    .p-tieredmenu .p-menuitem-link {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        text-decoration: none;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-tieredmenu .p-menuitem-text {
+        line-height: 1;
+    }
+
+    .p-tieredmenu .p-menuitem {
+        position: relative;
+    }
+
+    .p-tieredmenu .p-menuitem-link .p-submenu-icon {
+        margin-left: auto;
+    }
+
+    .p-tieredmenu .p-menuitem-active > .p-submenu-list {
+        display: block;
+        left: 100%;
+        top: 0;
+    }
+
+    .p-tieredmenu .p-menuitem-active > .p-submenu-list-flipped {
+        left: -100%;
+    }
+}
+`;
+
+export const TieredMenuBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'TieredMenu',
+        __parentMetadata: null,
+        id: null,
+        model: null,
+        popup: false,
+        style: null,
+        className: null,
+        autoZIndex: true,
+        baseZIndex: 0,
+        breakpoint: undefined,
+        scrollHeight: '400px',
+        appendTo: null,
+        transitionOptions: null,
+        onShow: null,
+        onFocus: null,
+        onBlur: null,
+        onHide: null,
+        submenuIcon: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/tieredmenu/TieredMenuSub.js b/components/lib/tieredmenu/TieredMenuSub.js
new file mode 100644
index 0000000000..4526bd3ade
--- /dev/null
+++ b/components/lib/tieredmenu/TieredMenuSub.js
@@ -0,0 +1,313 @@
+import * as React from 'react';
+import { useMergeProps, useUpdateEffect } from '../hooks/Hooks';
+import { AngleRightIcon } from '../icons/angleright';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+
+export const TieredMenuSub = React.memo(
+    React.forwardRef((props, ref) => {
+        const elementRef = React.useRef(null);
+        const mergeProps = useMergeProps();
+        const { ptm, cx, sx } = props;
+
+        const getPTOptions = (item, key) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                context: {
+                    active: isItemActive(item)
+                }
+            });
+        };
+
+        const position = () => {
+            if (elementRef.current) {
+                const parentItem = elementRef.current.parentElement;
+                const containerOffset = DomHandler.getOffset(parentItem);
+                const viewport = DomHandler.getViewport();
+                const sublistWidth = elementRef.current.offsetParent ? elementRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(elementRef.current);
+                const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
+                const top = parseInt(containerOffset.top, 10) + elementRef.current.offsetHeight - DomHandler.getWindowScrollTop();
+
+                if (top > viewport.height) {
+                    elementRef.current.style.top = viewport.height - top + 'px';
+                } else {
+                    elementRef.current.style.top = '0px';
+                }
+
+                if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
+                    DomHandler.addClass(elementRef.current, 'p-submenu-list-flipped');
+                }
+            }
+        };
+
+        const onItemClick = (event, processedItem) => {
+            const item = processedItem.item;
+
+            if (isItemDisabled(processedItem)) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            props.onItemClick && props.onItemClick({ originalEvent: event, processedItem });
+
+            if (!item.url) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+
+        const getItemId = (processedItem) => {
+            if (processedItem.item && processedItem.item.id) {
+                return processedItem.item.id;
+            }
+
+            return `${props.menuId}_${processedItem.key}`;
+        };
+
+        const getItemProp = (processedItem, name, params) => {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;
+        };
+
+        const isItemActive = (processedItem) => {
+            return props.activeItemPath.some((path) => path.key === processedItem.key);
+        };
+
+        const isItemVisible = (processedItem) => {
+            return getItemProp(processedItem, 'visible') !== false;
+        };
+
+        const isItemDisabled = (processedItem) => {
+            return getItemProp(processedItem, 'disabled');
+        };
+
+        const isItemFocused = (processedItem) => {
+            return props.focusedItemId === getItemId(processedItem);
+        };
+
+        const isItemGroup = (processedItem) => {
+            return ObjectUtils.isNotEmpty(processedItem.items);
+        };
+
+        const onItemMouseEnter = (event, processedItem) => {
+            props.onItemMouseEnter && props.onItemMouseEnter({ originalEvent: event, processedItem });
+        };
+
+        const getAriaSetSize = () => {
+            return props.model.filter((processedItem) => isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')).length;
+        };
+
+        const getAriaPosInset = (index) => {
+            return index - props.model.slice(0, index).filter((processedItem) => isItemVisible(processedItem) && getItemProp(processedItem, 'separator')).length + 1;
+        };
+
+        useUpdateEffect(() => {
+            if (!props.root && props.parentActive && !props.isMobileMode) {
+                position();
+            }
+        }, [props.parentActive]);
+
+        React.useImperativeHandle(ref, () => ({
+            getElement: () => elementRef.current
+        }));
+
+        const createSeparator = (index) => {
+            const key = 'separator_' + index;
+
+            const separatorProps = mergeProps(
+                {
+                    className: cx('separator'),
+                    role: 'separator'
+                },
+                ptm('separator', { hostName: props.hostName })
+            );
+
+            return <li {...separatorProps} key={key} />;
+        };
+
+        const createSubmenu = (processedItem, index) => {
+            if (isItemGroup(processedItem)) {
+                return (
+                    <TieredMenuSub
+                        id={props.id + '_' + index}
+                        menuProps={props.menuProps}
+                        model={processedItem.items}
+                        menuId={props.menuId}
+                        ariaLabelledby={getItemId(processedItem)}
+                        focusedItemId={props.focusedItemId}
+                        activeItemPath={props.activeItemPath}
+                        level={props.level + 1}
+                        onItemClick={props.onItemClick}
+                        popup={props.popup}
+                        onItemMouseEnter={props.onItemMouseEnter}
+                        parentActive={isItemActive(processedItem)}
+                        isMobileMode={props.isMobileMode}
+                        submenuIcon={props.submenuIcon}
+                        ptm={props.ptm}
+                        cx={cx}
+                        sx={sx}
+                    />
+                );
+            }
+
+            return null;
+        };
+
+        const createMenuItem = (processedItem, index) => {
+            if (isItemVisible(processedItem) === false) {
+                return null;
+            }
+
+            const item = processedItem.item;
+            const style = getItemProp(processedItem, 'style');
+            const itemClassName = getItemProp(processedItem, 'className');
+            const _icon = getItemProp(processedItem, 'icon');
+            const target = getItemProp(processedItem, 'target');
+            const url = getItemProp(processedItem, 'url');
+            const key = getItemId(processedItem);
+            const focused = isItemFocused(processedItem);
+            const active = isItemActive(processedItem);
+            const disabled = isItemDisabled(processedItem);
+            const grouped = isItemGroup(processedItem);
+            const linkClassName = classNames('p-menuitem-link');
+            const iconClassName = classNames('p-menuitem-icon', _icon);
+            const iconProps = mergeProps(
+                {
+                    className: classNames(item.icon, 'p-menuitem-icon', 'icon')
+                },
+                getPTOptions(processedItem, 'icon')
+            );
+            const icon = IconUtils.getJSXIcon(_icon, { ...iconProps }, { props: props.menuProps });
+            const labelProps = mergeProps(
+                {
+                    className: cx('label')
+                },
+                getPTOptions(processedItem, 'label')
+            );
+            const label = item.label && <span {...labelProps}>{item.label}</span>;
+            const submenuIconClassName = 'p-submenu-icon';
+            const submenuIconProps = mergeProps(
+                {
+                    className: cx('submenuIcon')
+                },
+                getPTOptions(processedItem, 'submenuIcon')
+            );
+            const submenuIcon = grouped && IconUtils.getJSXIcon(props.submenuIcon || <AngleRightIcon {...submenuIconProps} />, { ...submenuIconProps }, { props: props.menuProps });
+            const submenu = createSubmenu(processedItem, index);
+            const actionProps = mergeProps(
+                {
+                    href: url || '#',
+                    tabIndex: '-1',
+                    onFocus: (event) => event.stopPropagation(),
+                    className: cx('action'),
+                    target: target
+                },
+                getPTOptions(processedItem, 'action')
+            );
+
+            let content = (
+                <a {...actionProps}>
+                    {icon}
+                    {label}
+                    {submenuIcon}
+                    <Ripple />
+                </a>
+            );
+
+            if (item.template) {
+                const defaultContentOptions = {
+                    className: linkClassName,
+                    labelClassName: 'p-menuitem-text',
+                    iconClassName,
+                    submenuIconClassName,
+                    element: content,
+                    props,
+                    active: active,
+                    disabled: disabled
+                };
+
+                content = ObjectUtils.getJSXElement(item.template, item, defaultContentOptions);
+            }
+
+            const contentProps = mergeProps(
+                {
+                    onClick: (event) => onItemClick(event, processedItem, index),
+                    onMouseEnter: (event) => onItemMouseEnter(event, processedItem),
+                    className: cx('content')
+                },
+                getPTOptions(processedItem, 'content')
+            );
+
+            const menuitemProps = mergeProps(
+                {
+                    id: key,
+                    'aria-label': item.label,
+                    'aria-disabled': disabled,
+                    'aria-expanded': grouped ? active : undefined,
+                    'aria-haspopup': grouped && !url ? 'menu' : undefined,
+                    'aria-setsize': getAriaSetSize(),
+                    'aria-posinset': getAriaPosInset(index),
+                    'data-p-highlight': active,
+                    'data-p-disabled': disabled,
+                    'data-p-visited': focused,
+                    className: cx('menuitem', { itemClassName, active, focused, disabled }),
+                    style: style,
+                    onMouseEnter: (event) => onItemMouseEnter(event, item),
+                    role: 'menuitem'
+                },
+                getPTOptions(processedItem, 'menuitem')
+            );
+
+            return (
+                <li {...menuitemProps} key={key}>
+                    <div {...contentProps}>{content}</div>
+                    {submenu}
+                </li>
+            );
+        };
+
+        const createItem = (processedItem, index) => {
+            if (isItemVisible(processedItem) === false) {
+                return null;
+            }
+
+            return getItemProp(processedItem, 'separator') ? createSeparator(index) : createMenuItem(processedItem, index);
+        };
+
+        const createMenu = () => {
+            return props.model ? props.model.map(createItem) : null;
+        };
+
+        const submenu = createMenu();
+        const ptKey = props.root ? 'menu' : 'submenu';
+        const menuProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                tabIndex: props.tabIndex,
+                onFocus: props.onFocus,
+                onBlur: props.onBlur,
+                onKeyDown: props.onKeyDown,
+                className: cx(ptKey, { subProps: props }),
+                style: sx(ptKey, { subProps: props }),
+                role: props.root ? 'menubar' : 'menu',
+                'aria-label': props.ariaLabel,
+                'aria-labelledby': props.ariaLabelledby,
+                'aria-orientation': props.ariaOrientation,
+                'aria-activedescendant': props.focusedItemId
+            },
+            ptm(ptKey, { hostName: props.hostName })
+        );
+
+        return <ul {...menuProps}>{submenu}</ul>;
+    })
+);
+
+TieredMenuSub.displayName = 'TieredMenuSub';
diff --git a/components/lib/tieredmenu/package.json b/components/lib/tieredmenu/package.json
new file mode 100644
index 0000000000..686910a012
--- /dev/null
+++ b/components/lib/tieredmenu/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./tieredmenu.cjs.js",
+    "module": "./tieredmenu.esm.js",
+    "unpkg": "./tieredmenu.min.js",
+    "types": "./tieredmenu.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/tieredmenu/tieredmenu.d.ts b/components/lib/tieredmenu/tieredmenu.d.ts
new file mode 100644
index 0000000000..a88c68080a
--- /dev/null
+++ b/components/lib/tieredmenu/tieredmenu.d.ts
@@ -0,0 +1,219 @@
+/**
+ *
+ * TieredMenu is an input component that provides real-time suggestions when being typed.
+ *
+ * [Live Demo](https://www.primereact.org/tieredmenu/)
+ *
+ * @module tieredmenu
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TieredMenuPassThroughType<T> = PassThroughType<T, TieredMenuPassThroughMethodOptions>;
+export declare type TieredMenuPassThroughTransitionType = ReactCSSTransitionProps | ((options: TieredMenuPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TieredMenuPassThroughMethodOptions {
+    props: TieredMenuProps;
+    state: TieredMenuState;
+    context: TieredMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TieredMenuProps.pt}
+ */
+export interface TieredMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the menu's DOM element.
+     */
+    menu?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the submenu's DOM element.
+     */
+    submenu?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TieredMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: TieredMenuPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TieredMenuPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: TieredMenuPassThroughTransitionType;
+}
+
+/**
+ * Defines current inline state in TieredMenu component.
+ */
+export interface TieredMenuState {
+    /**
+     * Current attributeSelector visible state as a string.
+     */
+    attributeSelector: string;
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
+/**
+ * Defines current options in TieredMenu component.
+ */
+export interface TieredMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+}
+
+/**
+ * Defines valid properties in TieredMenu component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TieredMenuProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt'> {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Defines if menu would displayed as a popup.
+     * @defaultValue false
+     */
+    popup?: boolean | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     */
+    breakpoint?: string | undefined;
+    /**
+     * Maximum height of the options panel on responsive mode.
+     * @defaultValue 400px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     * @type {CSSTransitionProps}
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Icon of the submenu.
+     */
+    submenuIcon?: IconType<TieredMenuProps> | undefined;
+    /**
+     * Callback to invoke when a popup menu is shown.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onShow?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when a popup menu is hidden.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onHide?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TieredMenuPassThroughOptions}
+     */
+    pt?: TieredMenuPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - TieredMenu**
+ *
+ * _TieredMenu is an input component that provides real-time suggestions when being typed._
+ *
+ * [Live Demo](https://www.primereact.org/tieredmenu/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TieredMenu extends React.Component<TieredMenuProps, any> {
+    /**
+     * Toggles the visibility of the popup menu.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    public toggle(event: React.SyntheticEvent): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/timeline/Timeline.js b/components/lib/timeline/Timeline.js
new file mode 100644
index 0000000000..920f0c27e3
--- /dev/null
+++ b/components/lib/timeline/Timeline.js
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { classNames, ObjectUtils } from '../utils/Utils';
+import { TimelineBase } from './TimelineBase';
+
+export const Timeline = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TimelineBase.getProps(inProps, context);
+        const { ptm, cx, isUnstyled } = TimelineBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(TimelineBase.css.styles, isUnstyled, { name: 'timeline' });
+
+        const getPTOptions = (key, index) => {
+            return ptm(key, {
+                context: {
+                    index: index
+                }
+            });
+        };
+
+        const elementRef = React.useRef(null);
+
+        const getKey = (item, index) => {
+            return props.dataKey ? ObjectUtils.resolveFieldData(item, props.dataKey) : `pr_id__${index}`;
+        };
+
+        const createEvents = () => {
+            return (
+                props.value &&
+                props.value.map((item, index) => {
+                    const opposite = ObjectUtils.getJSXElement(props.opposite, item, index);
+                    const markerProps = mergeProps(
+                        {
+                            className: cx('marker')
+                        },
+                        getPTOptions('marker', index)
+                    );
+                    const marker = ObjectUtils.getJSXElement(props.marker, item, index) || <div {...markerProps} />;
+                    const connectorProps = mergeProps(
+                        {
+                            className: cx('connector')
+                        },
+                        getPTOptions('connector', index)
+                    );
+                    const connector = index !== props.value.length - 1 && <div {...connectorProps} />;
+                    const content = ObjectUtils.getJSXElement(props.content, item, index);
+
+                    const eventProps = mergeProps(
+                        {
+                            className: cx('event')
+                        },
+                        getPTOptions('event', index)
+                    );
+                    const oppositeProps = mergeProps(
+                        {
+                            className: cx('opposite')
+                        },
+                        getPTOptions('opposite', index)
+                    );
+                    const separatorProps = mergeProps(
+                        {
+                            className: cx('separator')
+                        },
+                        getPTOptions('separator', index)
+                    );
+                    const contentProps = mergeProps(
+                        {
+                            className: cx('content')
+                        },
+                        getPTOptions('content', index)
+                    );
+
+                    return (
+                        <div key={getKey(item, index)} {...eventProps}>
+                            <div {...oppositeProps}>{opposite}</div>
+                            <div {...separatorProps}>
+                                {marker}
+                                {connector}
+                            </div>
+                            <div {...contentProps}>{content}</div>
+                        </div>
+                    );
+                })
+            );
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const events = createEvents();
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root'))
+            },
+            TimelineBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return <div {...rootProps}>{events}</div>;
+    })
+);
+
+Timeline.displayName = 'Timeline';
diff --git a/components/lib/timeline/TimelineBase.js b/components/lib/timeline/TimelineBase.js
new file mode 100644
index 0000000000..8efbae269b
--- /dev/null
+++ b/components/lib/timeline/TimelineBase.js
@@ -0,0 +1,150 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+export const TimelineBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Timeline',
+        align: 'left',
+        className: null,
+        content: null,
+        dataKey: null,
+        layout: 'vertical',
+        marker: null,
+        opposite: null,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            marker: 'p-timeline-event-marker',
+            connector: 'p-timeline-event-connector',
+            event: 'p-timeline-event',
+            opposite: 'p-timeline-event-opposite',
+            separator: 'p-timeline-event-separator',
+            content: 'p-timeline-event-content',
+            root: ({ props }) =>
+                classNames(
+                    'p-timeline p-component',
+                    {
+                        [`p-timeline-${props.align}`]: true,
+                        [`p-timeline-${props.layout}`]: true
+                    },
+                    props.className
+                )
+        },
+        styles: `
+        @layer primereact {
+            .p-timeline {
+                display: flex;
+                flex-grow: 1;
+                flex-direction: column;
+            }
+        
+            .p-timeline-left .p-timeline-event-opposite {
+                text-align: right;
+            }
+        
+            .p-timeline-left .p-timeline-event-content {
+                text-align: left;
+            }
+        
+            .p-timeline-right .p-timeline-event {
+                flex-direction: row-reverse;
+            }
+        
+            .p-timeline-right .p-timeline-event-opposite {
+                text-align: left;
+            }
+        
+            .p-timeline-right .p-timeline-event-content {
+                text-align: right;
+            }
+        
+            .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
+                flex-direction: row-reverse;
+            }
+        
+            .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+                text-align: right;
+            }
+        
+            .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+                text-align: left;
+            }
+        
+            .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+                text-align: left;
+            }
+        
+            .p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+                text-align: right;
+            }
+        
+            .p-timeline-event {
+                display: flex;
+                position: relative;
+                min-height: 70px;
+            }
+        
+            .p-timeline-event:last-child {
+                min-height: 0;
+            }
+        
+            .p-timeline-event-opposite {
+                flex: 1;
+                padding: 0 1rem;
+            }
+        
+            .p-timeline-event-content {
+                flex: 1;
+                padding: 0 1rem;
+            }
+        
+            .p-timeline-event-separator {
+                flex: 0;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+            }
+        
+            .p-timeline-event-marker {
+                display: flex;
+                align-self: baseline;
+            }
+        
+            .p-timeline-event-connector {
+                flex-grow: 1;
+            }
+        
+            .p-timeline-horizontal {
+                flex-direction: row;
+            }
+        
+            .p-timeline-horizontal .p-timeline-event {
+                flex-direction: column;
+                flex: 1;
+            }
+        
+            .p-timeline-horizontal .p-timeline-event:last-child {
+                flex: 0;
+            }
+        
+            .p-timeline-horizontal .p-timeline-event-separator {
+                flex-direction: row;
+            }
+        
+            .p-timeline-horizontal .p-timeline-event-connector  {
+                width: 100%;
+            }
+        
+            .p-timeline-bottom .p-timeline-event {
+                flex-direction: column-reverse;
+            }
+        
+            .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
+                flex-direction: column-reverse;
+            }
+        }
+    `
+    }
+});
diff --git a/components/lib/timeline/package.json b/components/lib/timeline/package.json
new file mode 100644
index 0000000000..b36fab687b
--- /dev/null
+++ b/components/lib/timeline/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./timeline.cjs.js",
+    "module": "./timeline.esm.js",
+    "unpkg": "./timeline.min.js",
+    "types": "./timeline.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/timeline/timeline.d.ts b/components/lib/timeline/timeline.d.ts
new file mode 100644
index 0000000000..28662228c9
--- /dev/null
+++ b/components/lib/timeline/timeline.d.ts
@@ -0,0 +1,138 @@
+/**
+ *
+ * Timeline visualizes a series of chained events.
+ *
+ * [Live Demo](https://www.primereact.org/timeline/)
+ *
+ * @module timeline
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+
+export declare type TimelinePassThroughType<T> = PassThroughType<T, TimelinePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TimelinePassThroughMethodOptions {
+    props: Timeline;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TimelineProps.pt}
+ */
+export interface TimelinePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TimelinePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the event's DOM element.
+     */
+    event?: TimelinePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the opposite's DOM element.
+     */
+    opposite?: TimelinePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TimelinePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the marker's DOM element.
+     */
+    marker?: TimelinePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the connector's DOM element.
+     */
+    connector?: TimelinePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TimelinePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Timeline component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TimelineProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'content' | 'pt'> {
+    /**
+     * Position of the timeline bar relative to the content. Valid values are "left", "right for vertical layout and "top", "bottom" for horizontal layout.
+     * @defaultValue left
+     */
+    align?: 'left' | 'right' | 'top' | 'bottom' | 'alternate' | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode;
+    /**
+     * Template of the content.
+     */
+    content?: React.ReactNode | ((item: any, index: number) => React.ReactNode);
+    /**
+     * Name of the field that uniquely identifies a record in the data. Should be a unique business key to prevent re-rendering.
+     */
+    dataKey?: string | undefined;
+    /**
+     * Orientation of the timeline, valid values are "vertical" and "horizontal".
+     * @defaultValue vertical
+     */
+    layout?: 'vertical' | 'horizontal' | undefined;
+    /**
+     * Template content allows placing a custom event marker instead of the default one.
+     */
+    marker?: React.ReactNode | ((item: any, index: number) => React.ReactNode);
+    /**
+     * Template content to be placed at the other side of the bar.
+     */
+    opposite?: React.ReactNode | ((item: any, index: number) => React.ReactNode);
+    /**
+     * An array of events to display.
+     */
+    value?: any[] | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TimelinePassThroughOptions}
+     */
+    pt?: TimelinePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Timeline**
+ *
+ * _Timeline visualizes a series of chained events._
+ *
+ * [Live Demo](https://www.primereact.org/timeline/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Timeline extends React.Component<TimelineProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
new file mode 100644
index 0000000000..ea7dbeeacf
--- /dev/null
+++ b/components/lib/toast/Toast.js
@@ -0,0 +1,181 @@
+import * as React from 'react';
+import { TransitionGroup } from 'react-transition-group';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+import { ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { ToastBase } from './ToastBase';
+import { ToastMessage } from './ToastMessage';
+
+let messageIdx = 0;
+
+export const Toast = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ToastBase.getProps(inProps, context);
+
+        const [messagesState, setMessagesState] = React.useState([]);
+        const containerRef = React.useRef(null);
+
+        const metaData = {
+            props,
+            state: {
+                messages: messagesState
+            }
+        };
+
+        const ptCallbacks = ToastBase.setMetaData(metaData);
+
+        useHandleStyle(ToastBase.css.styles, ptCallbacks.isUnstyled, { name: 'toast' });
+
+        const show = (messageInfo) => {
+            if (messageInfo) {
+                setMessagesState((prev) => assignIdentifiers(prev, messageInfo, true));
+            }
+        };
+
+        const assignIdentifiers = (currentState, messageInfo, copy) => {
+            let messages;
+
+            if (Array.isArray(messageInfo)) {
+                const multipleMessages = messageInfo.reduce((acc, message) => {
+                    acc.push({ _pId: messageIdx++, message });
+
+                    return acc;
+                }, []);
+
+                if (copy) {
+                    messages = currentState ? [...currentState, ...multipleMessages] : multipleMessages;
+                } else {
+                    messages = multipleMessages;
+                }
+            } else {
+                const message = { _pId: messageIdx++, message: messageInfo };
+
+                if (copy) {
+                    messages = currentState ? [...currentState, message] : [message];
+                } else {
+                    messages = [message];
+                }
+            }
+
+            return messages;
+        };
+
+        const clear = () => {
+            ZIndexUtils.clear(containerRef.current);
+            setMessagesState([]);
+        };
+
+        const replace = (messageInfo) => {
+            setMessagesState((previousMessagesState) => assignIdentifiers(previousMessagesState, messageInfo, false));
+        };
+
+        const remove = (messageInfo) => {
+            // allow removal by ID or by message equality
+            const removeMessage = ObjectUtils.isNotEmpty(messageInfo._pId) ? messageInfo._pId : messageInfo.message || messageInfo;
+
+            setMessagesState((prev) => prev.filter((msg) => msg._pId !== messageInfo._pId && !ObjectUtils.deepEquals(msg.message, removeMessage)));
+
+            props.onRemove && props.onRemove(messageInfo.message || removeMessage);
+        };
+
+        const onClose = (messageInfo) => {
+            remove(messageInfo);
+        };
+
+        const onEntered = () => {
+            props.onShow && props.onShow();
+        };
+
+        const onExited = () => {
+            messagesState.length === 1 && ZIndexUtils.clear(containerRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        useUpdateEffect(() => {
+            ZIndexUtils.set('toast', containerRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.toast) || PrimeReact.zIndex.toast);
+        }, [messagesState, props.baseZIndex]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(containerRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            show,
+            replace,
+            remove,
+            clear,
+            getElement: () => containerRef.current
+        }));
+
+        const createElement = () => {
+            const rootProps = mergeProps(
+                {
+                    ref: containerRef,
+                    id: props.id,
+                    className: ptCallbacks.cx('root', { context }),
+                    style: ptCallbacks.sx('root')
+                },
+                ToastBase.getOtherProps(props),
+                ptCallbacks.ptm('root')
+            );
+
+            const transitionProps = mergeProps(
+                {
+                    classNames: ptCallbacks.cx('transition'),
+                    timeout: { enter: 300, exit: 300 },
+                    options: props.transitionOptions,
+                    unmountOnExit: true,
+                    onEntered,
+                    onExited
+                },
+                ptCallbacks.ptm('transition')
+            );
+
+            return (
+                <div {...rootProps}>
+                    <TransitionGroup>
+                        {messagesState &&
+                            messagesState.map((messageInfo, index) => {
+                                const messageRef = React.createRef();
+
+                                return (
+                                    <CSSTransition nodeRef={messageRef} key={messageInfo._pId} {...transitionProps}>
+                                        {inProps.content ? (
+                                            ObjectUtils.getJSXElement(inProps.content, { message: messageInfo.message })
+                                        ) : (
+                                            <ToastMessage
+                                                hostName="Toast"
+                                                ref={messageRef}
+                                                messageInfo={messageInfo}
+                                                index={index}
+                                                onClick={props.onClick}
+                                                onClose={onClose}
+                                                onMouseEnter={props.onMouseEnter}
+                                                onMouseLeave={props.onMouseLeave}
+                                                closeIcon={props.closeIcon}
+                                                ptCallbacks={ptCallbacks}
+                                                metaData={metaData}
+                                            />
+                                        )}
+                                    </CSSTransition>
+                                );
+                            })}
+                    </TransitionGroup>
+                </div>
+            );
+        };
+
+        const element = createElement();
+
+        return <Portal element={element} appendTo={props.appendTo} />;
+    })
+);
+
+Toast.displayName = 'Toast';
diff --git a/components/lib/toast/ToastBase.js b/components/lib/toast/ToastBase.js
new file mode 100644
index 0000000000..a2021059b5
--- /dev/null
+++ b/components/lib/toast/ToastBase.js
@@ -0,0 +1,145 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-toast {
+        width: calc(100% - var(--toast-indent, 0px));
+        max-width: 25rem;
+    }
+    
+    .p-toast-message-icon {
+        flex-shrink: 0;
+    }
+    
+    .p-toast-message-content {
+        display: flex;
+        align-items: flex-start;
+    }
+    
+    .p-toast-message-text {
+        flex: 1 1 auto;
+    }
+    
+    .p-toast-summary {
+        overflow-wrap: anywhere;
+    }
+    
+    .p-toast-detail {
+        overflow-wrap: anywhere;
+    }
+    
+    .p-toast-top-center {
+        transform: translateX(-50%);
+    }
+    
+    .p-toast-bottom-center {
+        transform: translateX(-50%);
+    }
+    
+    .p-toast-center {
+        min-width: 20vw;
+        transform: translate(-50%, -50%);
+    }
+    
+    .p-toast-icon-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        position: relative;
+    }
+    
+    .p-toast-icon-close.p-link {
+        cursor: pointer;
+    }
+    
+    /* Animations */
+    .p-toast-message-enter {
+        opacity: 0;
+        transform: translateY(50%);
+    }
+    
+    .p-toast-message-enter-active {
+        opacity: 1;
+        transform: translateY(0);
+        transition: transform 0.3s, opacity 0.3s;
+    }
+    
+    .p-toast-message-enter-done {
+        transform: none;
+    }
+    
+    .p-toast-message-exit {
+        opacity: 1;
+        max-height: 1000px;
+    }
+    
+    .p-toast .p-toast-message.p-toast-message-exit-active {
+        opacity: 0;
+        max-height: 0;
+        margin-bottom: 0;
+        overflow: hidden;
+        transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-toast p-component p-toast-' + props.position, props.className, {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    message: {
+        message: ({ severity }) =>
+            classNames('p-toast-message', {
+                [`p-toast-message-${severity}`]: severity
+            }),
+        content: 'p-toast-message-content',
+        buttonicon: 'p-toast-icon-close-icon',
+        closeButton: 'p-toast-icon-close p-link',
+        icon: 'p-toast-message-icon',
+        text: 'p-toast-message-text',
+        summary: 'p-toast-summary',
+        detail: 'p-toast-detail'
+    },
+    transition: 'p-toast-message'
+};
+
+const inlineStyles = {
+    root: ({ props }) => ({
+        position: 'fixed',
+        top: props.position === 'top-right' || props.position === 'top-left' || props.position === 'top-center' ? '20px' : props.position === 'center' ? '50%' : null,
+        right: (props.position === 'top-right' || props.position === 'bottom-right') && '20px',
+        bottom: (props.position === 'bottom-left' || props.position === 'bottom-right' || props.position === 'bottom-center') && '20px',
+        left: props.position === 'top-left' || props.position === 'bottom-left' ? '20px' : props.position === 'center' || props.position === 'top-center' || props.position === 'bottom-center' ? '50%' : null
+    })
+};
+
+export const ToastBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Toast',
+        id: null,
+        className: null,
+        content: null,
+        style: null,
+        baseZIndex: 0,
+        position: 'top-right',
+        transitionOptions: null,
+        appendTo: 'self',
+        onClick: null,
+        onRemove: null,
+        onShow: null,
+        onHide: null,
+        onMouseEnter: null,
+        onMouseLeave: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/toast/ToastMessage.js b/components/lib/toast/ToastMessage.js
new file mode 100644
index 0000000000..d07ff204e6
--- /dev/null
+++ b/components/lib/toast/ToastMessage.js
@@ -0,0 +1,230 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { useMergeProps, useTimeout } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { ExclamationTriangleIcon } from '../icons/exclamationtriangle';
+import { InfoCircleIcon } from '../icons/infocircle';
+import { TimesIcon } from '../icons/times';
+import { TimesCircleIcon } from '../icons/timescircle';
+import { Ripple } from '../ripple/Ripple';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+
+export const ToastMessage = React.memo(
+    React.forwardRef((props, ref) => {
+        const mergeProps = useMergeProps();
+        const {
+            messageInfo,
+            metaData: parentMetaData,
+            ptCallbacks: { ptm, ptmo, cx },
+            index
+        } = props;
+        const { severity, content, summary, detail, closable, life, sticky, className: _className, style, contentClassName: _contentClassName, contentStyle, icon: _icon, closeIcon: _closeIcon, pt } = messageInfo.message;
+        const params = { index };
+        const parentParams = { ...parentMetaData, ...params };
+        const [focused, setFocused] = React.useState(false);
+        const [clearTimer] = useTimeout(
+            () => {
+                onClose();
+            },
+            life || 3000,
+            !sticky && !focused
+        );
+
+        const getPTOptions = (key, options) => {
+            return ptm(key, {
+                hostName: props.hostName,
+                ...options
+            });
+        };
+
+        const onClose = () => {
+            clearTimer();
+            props.onClose && props.onClose(messageInfo);
+        };
+
+        const onClick = (event) => {
+            if (props.onClick && !(DomHandler.hasClass(event.target, 'p-toast-icon-close') || DomHandler.hasClass(event.target, 'p-toast-icon-close-icon'))) {
+                props.onClick(messageInfo.message);
+            }
+        };
+
+        const onMouseEnter = (event) => {
+            props.onMouseEnter && props.onMouseEnter(event);
+
+            // do not continue if the user has canceled the event
+            if (event.defaultPrevented) {
+                return;
+            }
+
+            // stop timer while user has focused message
+            if (!sticky) {
+                clearTimer();
+                setFocused(true);
+            }
+        };
+
+        const onMouseLeave = (event) => {
+            props.onMouseLeave && props.onMouseLeave(event);
+
+            // do not continue if the user has canceled the event
+            if (event.defaultPrevented) {
+                return;
+            }
+
+            // restart timer when user has left message
+            if (!sticky) {
+                setFocused(false);
+            }
+        };
+
+        const createCloseIcon = () => {
+            const buttonIconProps = mergeProps(
+                {
+                    className: cx('message.buttonicon')
+                },
+                getPTOptions('buttonicon', parentParams),
+                ptmo(pt, 'buttonicon', { ...params, hostName: props.hostName })
+            );
+
+            const icon = _closeIcon || <TimesIcon {...buttonIconProps} />;
+            const closeIcon = IconUtils.getJSXIcon(icon, { ...buttonIconProps }, { props });
+
+            const closeButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('message.closeButton'),
+                    onClick: onClose,
+                    'aria-label': props.ariaCloseLabel || ariaLabel('close')
+                },
+                getPTOptions('closeButton', parentParams),
+                ptmo(pt, 'closeButton', { ...params, hostName: props.hostName })
+            );
+
+            if (closable !== false) {
+                return (
+                    <div>
+                        <button {...closeButtonProps}>
+                            {closeIcon}
+                            <Ripple />
+                        </button>
+                    </div>
+                );
+            }
+
+            return null;
+        };
+
+        const createMessage = () => {
+            if (messageInfo) {
+                const contentEl = ObjectUtils.getJSXElement(content, { message: messageInfo.message, onClick, onClose });
+                const iconProps = mergeProps(
+                    {
+                        className: cx('message.icon')
+                    },
+                    getPTOptions('icon', parentParams),
+                    ptmo(pt, 'icon', { ...params, hostName: props.hostName })
+                );
+
+                let icon = _icon;
+
+                if (!_icon) {
+                    switch (severity) {
+                        case 'info':
+                            icon = <InfoCircleIcon {...iconProps} />;
+                            break;
+                        case 'warn':
+                            icon = <ExclamationTriangleIcon {...iconProps} />;
+                            break;
+                        case 'error':
+                            icon = <TimesCircleIcon {...iconProps} />;
+                            break;
+                        case 'success':
+                            icon = <CheckIcon {...iconProps} />;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+
+                const messageIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+
+                const textProps = mergeProps(
+                    {
+                        className: cx('message.text')
+                    },
+                    getPTOptions('text', parentParams),
+                    ptmo(pt, 'text', { ...params, hostName: props.hostName })
+                );
+
+                const summaryProps = mergeProps(
+                    {
+                        className: cx('message.summary')
+                    },
+                    getPTOptions('summary', parentParams),
+                    ptmo(pt, 'summary', { ...params, hostName: props.hostName })
+                );
+
+                const detailProps = mergeProps(
+                    {
+                        className: cx('message.detail')
+                    },
+                    getPTOptions('detail', parentParams),
+                    ptmo(pt, 'detail', { ...params, hostName: props.hostName })
+                );
+
+                return (
+                    contentEl || (
+                        <>
+                            {messageIcon}
+                            <div {...textProps}>
+                                <span {...summaryProps}>{summary}</span>
+                                {detail && <div {...detailProps}>{detail}</div>}
+                            </div>
+                        </>
+                    )
+                );
+            }
+
+            return null;
+        };
+
+        const message = createMessage();
+        const closeIcon = createCloseIcon();
+
+        const messageProps = mergeProps(
+            {
+                ref,
+                className: classNames(_className, cx('message.message', { severity })),
+                style,
+                role: 'alert',
+                'aria-live': 'assertive',
+                'aria-atomic': 'true',
+                onClick,
+                onMouseEnter: onMouseEnter,
+                onMouseLeave: onMouseLeave
+            },
+            getPTOptions('message', parentParams),
+            ptmo(pt, 'root', { ...params, hostName: props.hostName })
+        );
+
+        const contentProps = mergeProps(
+            {
+                className: classNames(_contentClassName, cx('message.content')),
+                style: contentStyle
+            },
+            getPTOptions('content', parentParams),
+            ptmo(pt, 'content', { ...params, hostName: props.hostName })
+        );
+
+        return (
+            <div {...messageProps}>
+                <div {...contentProps}>
+                    {message}
+                    {closeIcon}
+                </div>
+            </div>
+        );
+    })
+);
+
+ToastMessage.displayName = 'ToastMessage';
diff --git a/components/lib/toast/package.json b/components/lib/toast/package.json
new file mode 100644
index 0000000000..736f38d12c
--- /dev/null
+++ b/components/lib/toast/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./toast.cjs.js",
+    "module": "./toast.esm.js",
+    "unpkg": "./toast.min.js",
+    "types": "./toast.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/toast/toast.d.ts b/components/lib/toast/toast.d.ts
new file mode 100644
index 0000000000..2a387c4401
--- /dev/null
+++ b/components/lib/toast/toast.d.ts
@@ -0,0 +1,348 @@
+/**
+ *
+ * Toast is used to display messages in an overlay.
+ *
+ * [Live Demo](https://www.primereact.org/toast/)
+ *
+ * @module toast
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type ToastPassThroughType<T> = PassThroughType<T, ToastPassThroughMethodOptions>;
+export declare type ToastPassThroughTransitionType = ReactCSSTransitionProps | ((options: ToastPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToastPassThroughMethodOptions {
+    props: ToastProps;
+    state: ToastState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToastProps.pt}
+ */
+export interface ToastPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToastPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the message's DOM element.
+     */
+    message?: ToastPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ToastPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ToastPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: ToastPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the summary's DOM element.
+     */
+    summary?: ToastPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the detail's DOM element.
+     */
+    detail?: ToastPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: ToastPassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the close button icon's DOM element.
+     */
+    closeButtonIcon?: ToastPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: ToastPassThroughTransitionType;
+}
+
+/**
+ * Defines message options in Toast component.
+ */
+export interface ToastMessageOptions {
+    /**
+     * Severity level of the message.
+     * @defaultValue info
+     */
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
+    /**
+     * Summary content of the message.
+     */
+    summary?: string | undefined;
+    /**
+     * Detail content of the message.
+     */
+    detail?: any | undefined;
+    /**
+     * Whether the message can be closed manually using the close icon.
+     * @defaultValue true
+     */
+    closable?: boolean | undefined;
+    /**
+     * Delay in milliseconds to close the message automatically.
+     */
+    life?: number | undefined;
+    /**
+     * Key of the Toast to display the message.
+     */
+    group?: string | undefined;
+    /**
+     * Style class of the message.
+     */
+    styleClass?: any;
+    /**
+     * Style class of the content.
+     */
+    contentStyleClass?: any;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToastPassThroughOptions}
+     */
+    pt?: ToastPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines current inline state in Toast component.
+ */
+export interface ToastState {
+    /**
+     * Current messages.
+     */
+    messages: any[];
+}
+
+/**
+ * Message options for toast component
+ */
+export interface ToastMessage {
+    /**
+     * Unique id of the message.
+     */
+    id?: string | undefined;
+    /**
+     * Severity of the message.
+     */
+    severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast' | undefined;
+    /**
+     * Summary content of the message.
+     */
+    summary?: React.ReactNode | undefined;
+    /**
+     * Detail content of the message.
+     */
+    detail?: React.ReactNode | undefined;
+    /**
+     * Custom content of the message. If enabled, summary and details properties are ignored.
+     */
+    content?: React.ReactNode | ((props: ContentProps) => React.ReactNode);
+    /**
+     * Whether the message can be closed manually using the close icon.
+     * @defaultValue true
+     */
+    closable?: boolean | undefined;
+    /**
+     * Icon of the message.
+     */
+    icon?: IconType<ToastProps> | undefined;
+    /**
+     * Icon of the close button.
+     */
+    closeIcon?: IconType<ToastProps> | undefined;
+    /**
+     * When enabled, message is not removed automatically.
+     */
+    sticky?: boolean | undefined;
+    /**
+     * Delay in milliseconds to close the message automatically.
+     * @defaultValue 3000
+     */
+    life?: number | undefined;
+    /**
+     * Style class of the message.
+     */
+    className?: string | undefined;
+    /**
+     * Inline style of the message.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the message content.
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Inline style of the message content.
+     */
+    contentStyle?: React.CSSProperties | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {Omit<ToastPassThroughOptions, 'message'>}
+     */
+    pt?: Omit<ToastPassThroughOptions, 'message'>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link ContentProps.message}
+ */
+interface ContentPropsMessage {
+    /**
+     * Summary of the toast.
+     * @readonly
+     */
+    summary: string;
+    /**
+     * Detail of the toast.
+     * @readonly
+     */
+    detail: string;
+}
+
+/**
+ * Defines current content values and refs for headless development.
+ * @see {@link ToastProps.content}
+ */
+interface ContentProps {
+    /**
+     * Toast's props values.
+     */
+    message: ContentPropsMessage;
+}
+
+/**
+ * Defines valid properties in Toast component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ToastProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref' | 'pt' | 'content'> {
+    /**
+     * Base zIndex value to add to initial layering of PrimeReact components which start from 1000.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Position of the toast in viewport, valid values are 'center', 'top-center', 'top-left', 'top-right', 'bottom-center', 'bottom-left', 'bottom-right'.
+     * @defaultValue top-right
+     */
+    position?: 'center' | 'top-center' | 'top-left' | 'top-right' | 'bottom-center' | 'bottom-left' | 'bottom-right' | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * DOM element instance where the component should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue self
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @param {ToastMessage} message - Clicked message
+     */
+    onClick?(message: ToastMessage): void;
+    /**
+     * Callback to invoke when a message is removed.
+     * @param {ToastMessage} message - Removed message
+     */
+    onRemove?(message: ToastMessage): void;
+    /**
+     * Callback to invoke when message becomes visible.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when message becomes hidden.
+     */
+    onHide?(): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToastPassThroughOptions}
+     */
+    pt?: ToastPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * Specifies a custom content for the toast. For more complex markup, use the "content" slot instead.
+     * @param {ContentProps} props - The values of toast.
+     * @return {React.ReactNode}
+     */
+    content?: React.ReactNode | ((props: ContentProps) => React.ReactNode);
+}
+
+/**
+ * **PrimeReact - Toast**
+ *
+ * _Toast is used to display messages in an overlay._
+ *
+ * [Live Demo](https://www.primereact.org/toast/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Toast extends React.Component<ToastProps, any> {
+    /**
+     * Used to show the message.
+     * @param {ToastMessage | ToastMessage[]} message - Message to show
+     */
+    public show(message: ToastMessage | ToastMessage[]): void;
+    /**
+     * Clears the all messages from Toast.
+     */
+    public clear(): void;
+    /**
+     * Used to add new messages after removing all old messages.
+     * @param {ToastMessage | ToastMessage[]} message - Message to replace
+     */
+    public replace(message: ToastMessage | ToastMessage[]): void;
+    /**
+     * Used to remove messages.
+     * @param {ToastMessage | ToastMessage[]} message - Message to remove
+     */
+    public remove(message: ToastMessage | ToastMessage[]): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/togglebutton/ToggleButton.js b/components/lib/togglebutton/ToggleButton.js
new file mode 100644
index 0000000000..d2d5604caf
--- /dev/null
+++ b/components/lib/togglebutton/ToggleButton.js
@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { ToggleButtonBase } from './ToggleButtonBase';
+
+export const ToggleButton = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ToggleButtonBase.getProps(inProps, context);
+        const elementRef = React.useRef(null);
+        const { ptm, cx, isUnstyled } = ToggleButtonBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(ToggleButtonBase.css.styles, isUnstyled, { name: 'togglebutton' });
+
+        const hasLabel = props.onLabel && props.onLabel.length > 0 && props.offLabel && props.offLabel.length > 0;
+        const hasIcon = props.onIcon && props.offIcon;
+        const label = hasLabel ? (props.checked ? props.onLabel : props.offLabel) : '\u00A0';
+        const icon = props.checked ? props.onIcon : props.offIcon;
+
+        const toggle = (e) => {
+            if (!props.disabled && props.onChange && !props.readonly) {
+                props.onChange({
+                    originalEvent: e,
+                    value: !props.checked,
+                    stopPropagation: () => {
+                        e.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        e.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: !props.checked
+                    }
+                });
+            }
+        };
+
+        const onKeyDown = (event) => {
+            if (event.keyCode === 32) {
+                toggle(event);
+                event.preventDefault();
+            }
+        };
+
+        const onFocus = (event) => {
+            props?.onFocus?.(event);
+        };
+
+        const onBlur = (event) => {
+            props?.onBlur?.(event);
+        };
+
+        const createIcon = () => {
+            if (hasIcon) {
+                const iconProps = mergeProps(
+                    {
+                        className: cx('icon', { label })
+                    },
+                    ptm('icon')
+                );
+
+                return IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+            }
+
+            return null;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focusFirstElement(elementRef.current),
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            if (props.autoFocus) {
+                DomHandler.focusFirstElement(elementRef.current);
+            }
+        });
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const tabIndex = props.disabled ? -1 : props.tabIndex;
+        const iconElement = createIcon();
+
+        const labelProps = mergeProps(
+            {
+                className: cx('label')
+            },
+            ptm('label')
+        );
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                id: props.id,
+                className: classNames(props.className, cx('root', { hasIcon, hasLabel })),
+                'data-p-highlight': props.checked,
+                'data-p-disabled': props.disabled
+            },
+            ToggleButtonBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const inputProps = mergeProps(
+            {
+                id: props.inputId,
+                className: cx('input'),
+                style: props.style,
+                onChange: toggle,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown,
+                tabIndex: tabIndex,
+                type: 'checkbox',
+                'aria-invalid': props.invalid,
+                disabled: props.disabled,
+                readOnly: props.readonly,
+                value: props.checked,
+                checked: props.checked,
+                'aria-label': props['aria-label'],
+                'aria-labelledby': props['aria-labelledby']
+            },
+            ptm('input')
+        );
+
+        const boxProps = mergeProps(
+            {
+                className: classNames(props.className, cx('box', { hasIcon, hasLabel }))
+            },
+            ptm('box')
+        );
+
+        return (
+            <>
+                <div {...rootProps}>
+                    <input {...inputProps} />
+                    <div {...boxProps}>
+                        {iconElement}
+                        <span {...labelProps}>{label}</span>
+                        <Ripple />
+                    </div>
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+ToggleButton.displayName = 'ToggleButton';
diff --git a/components/lib/togglebutton/ToggleButtonBase.js b/components/lib/togglebutton/ToggleButtonBase.js
new file mode 100644
index 0000000000..1f8bc70bc9
--- /dev/null
+++ b/components/lib/togglebutton/ToggleButtonBase.js
@@ -0,0 +1,48 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-togglebutton p-component', {
+            'p-disabled': props.disabled,
+            'p-highlight': props.checked,
+            'p-invalid': props.invalid
+        }),
+    input: 'p-togglebutton-input',
+    box: ({ hasIcon, hasLabel }) =>
+        classNames('p-button p-component', {
+            'p-button-icon-only': hasIcon && !hasLabel
+        }),
+    icon: ({ props, label }) =>
+        classNames('p-button-icon', {
+            'p-button-icon-left': props.iconPos === 'left' && label,
+            'p-button-icon-right': props.iconPos === 'right' && label
+        }),
+    label: 'p-button-label'
+};
+
+export const ToggleButtonBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'ToggleButton',
+        id: null,
+        onIcon: null,
+        offIcon: null,
+        onLabel: 'Yes',
+        offLabel: 'No',
+        iconPos: 'left',
+        invalid: false,
+        style: null,
+        className: null,
+        checked: false,
+        tabIndex: 0,
+        tooltip: null,
+        tooltipOptions: null,
+        onChange: null,
+        onFocus: null,
+        onBlur: null,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/togglebutton/package.json b/components/lib/togglebutton/package.json
new file mode 100644
index 0000000000..f9c0e17f17
--- /dev/null
+++ b/components/lib/togglebutton/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./togglebutton.cjs.js",
+    "module": "./togglebutton.esm.js",
+    "unpkg": "./togglebutton.min.js",
+    "types": "./togglebutton.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/togglebutton/togglebutton.d.ts b/components/lib/togglebutton/togglebutton.d.ts
new file mode 100644
index 0000000000..cc7fcc61d8
--- /dev/null
+++ b/components/lib/togglebutton/togglebutton.d.ts
@@ -0,0 +1,223 @@
+/**
+ *
+ * ToggleButton is used to select a boolean value using a button.
+ *
+ * [Live Demo](https://www.primereact.org/togglebutton/)
+ *
+ * @module togglebutton
+ *
+ */
+import * as React from 'react';
+import { CheckboxPassThroughType } from '../checkbox/checkbox';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { IconType, PassThroughType } from '../utils';
+
+export declare type ToggleButtonPassThroughType<T> = PassThroughType<T, ToggleButtonPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToggleButtonPassThroughMethodOptions {
+    props: ToggleButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToggleButtonProps.pt}
+ */
+export interface ToggleButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToggleButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ToggleButtonPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ToggleButtonPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: ToggleButtonPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+}
+/**
+ * Custom toggle button change target options
+ */
+interface ToggleButtonChangeTargetOptions {
+    /**
+     * The name of the element.
+     */
+    name: string;
+    /**
+     * Unique identifier of the element.
+     */
+    id: string;
+    /**
+     * Collapsed state as a boolean.
+     */
+    value: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link ToggleButtonProps.onChange}
+ * @event
+ */
+interface ToggleButtonChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Value as the checked state.
+     */
+    value: boolean;
+    /**
+     * Stops the event from propagating.
+     */
+    stopPropagation(): void;
+    /**
+     * Prevents the default action of the event.
+     */
+    preventDefault(): void;
+    /**
+     * Target element.
+     */
+    target: ToggleButtonChangeTargetOptions;
+}
+
+/**
+ * Defines valid properties in ToggleButton component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ToggleButtonProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref' | 'pt'> {
+    /**
+     * Specifies the on/off state of the button.
+     * @defaultValue false
+     */
+    checked?: boolean | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Position of the icon, valid values are "left" and "right".
+     * @defaultValue left
+     */
+    iconPos?: 'left' | 'right' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Icon for the off state.
+     */
+    offIcon?: IconType<ToggleButtonProps> | undefined;
+    /**
+     * Label for the off state.
+     * @defaultValue no
+     */
+    offLabel?: string | undefined;
+    /**
+     * Icon for the on state.
+     */
+    onIcon?: IconType<ToggleButtonProps> | undefined;
+    /**
+     * Label for the on state.
+     * @defaultValue yes
+     */
+    onLabel?: string | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke when autocomplete loses focus.
+     * @param {React.FocusEvent<HTMLElement>} event - Browser event.
+     */
+    onBlur?(event: React.FocusEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {ToggleButtonChangeEvent} event - Browser event.
+     */
+    onChange?(event: ToggleButtonChangeEvent): void;
+    /**
+     * Callback to invoke when autocomplete gets focus.
+     * @param {React.FocusEvent<HTMLElement>} event - Browser event.
+     */
+    onFocus?(event: React.FocusEvent<HTMLElement>): void;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToggleButtonPassThroughOptions}
+     */
+    pt?: ToggleButtonPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - ToggleButton**
+ *
+ * _ToggleButton is used to select a boolean value using a button._
+ *
+ * [Live Demo](https://www.primereact.org/togglebutton/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class ToggleButton extends React.Component<ToggleButtonProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/toolbar/Toolbar.js b/components/lib/toolbar/Toolbar.js
new file mode 100644
index 0000000000..f997644b19
--- /dev/null
+++ b/components/lib/toolbar/Toolbar.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { ObjectUtils, classNames } from '../utils/Utils';
+import { ToolbarBase } from './ToolbarBase';
+
+export const Toolbar = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = ToolbarBase.getProps(inProps, context);
+        const elementRef = React.useRef(null);
+        const start = ObjectUtils.getJSXElement(props.left || props.start, props);
+        const center = ObjectUtils.getJSXElement(props.center, props);
+        const end = ObjectUtils.getJSXElement(props.right || props.end, props);
+        const { ptm, cx, isUnstyled } = ToolbarBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(ToolbarBase.css.styles, isUnstyled, { name: 'toolbar' });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElement: () => elementRef.current
+        }));
+
+        const startProps = mergeProps(
+            {
+                className: cx('start')
+            },
+            ptm('start')
+        );
+
+        const centerProps = mergeProps(
+            {
+                className: cx('center')
+            },
+            ptm('center')
+        );
+
+        const endProps = mergeProps(
+            {
+                className: cx('end')
+            },
+            ptm('end')
+        );
+
+        const rootProps = mergeProps(
+            {
+                id: props.id,
+                ref: elementRef,
+                style: props.style,
+                className: classNames(props.className, cx('root')),
+                role: 'toolbar'
+            },
+            ToolbarBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                <div {...startProps}>{start}</div>
+                <div {...centerProps}>{center}</div>
+                <div {...endProps}>{end}</div>
+            </div>
+        );
+    })
+);
+
+Toolbar.displayName = 'Toolbar';
diff --git a/components/lib/toolbar/ToolbarBase.js b/components/lib/toolbar/ToolbarBase.js
new file mode 100644
index 0000000000..94797a2565
--- /dev/null
+++ b/components/lib/toolbar/ToolbarBase.js
@@ -0,0 +1,47 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+export const ToolbarBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Toolbar',
+        id: null,
+        style: null,
+        className: null,
+        left: null,
+        right: null,
+        start: null,
+        center: null,
+        end: null,
+        children: undefined
+    },
+    css: {
+        classes: {
+            root: 'p-toolbar p-component',
+            start: 'p-toolbar-group-start p-toolbar-group-left',
+            center: 'p-toolbar-group-center',
+            end: 'p-toolbar-group-end p-toolbar-group-right'
+        },
+        styles: `
+        @layer primereact {
+            .p-toolbar {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                flex-wrap: wrap;
+            }
+            
+            .p-toolbar-group-start,
+            .p-toolbar-group-center,
+            .p-toolbar-group-end {
+                display: flex;
+                align-items: center;
+            }
+            
+            .p-toolbar-group-left,
+            .p-toolbar-group-right {
+                display: flex;
+                align-items: center;
+            }
+        }
+        `
+    }
+});
diff --git a/components/lib/toolbar/package.json b/components/lib/toolbar/package.json
new file mode 100644
index 0000000000..396708878d
--- /dev/null
+++ b/components/lib/toolbar/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./toolbar.cjs.js",
+    "module": "./toolbar.esm.js",
+    "unpkg": "./toolbar.min.js",
+    "types": "./toolbar.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/toolbar/toolbar.d.ts b/components/lib/toolbar/toolbar.d.ts
new file mode 100644
index 0000000000..718bea96a4
--- /dev/null
+++ b/components/lib/toolbar/toolbar.d.ts
@@ -0,0 +1,118 @@
+/**
+ *
+ * Toolbar is a grouping component for buttons and other content.
+ *
+ * [Live Demo](https://www.primereact.org/toolbar/)
+ *
+ * @module toolbar
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils';
+
+export declare type ToolbarPassThroughType<T> = PassThroughType<T, ToolbarPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToolbarPassThroughMethodOptions {
+    props: ToolbarProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToolbarProps.pt}
+ */
+export interface ToolbarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToolbarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the start's DOM element.
+     */
+    start?: ToolbarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the center's DOM element.
+     */
+    center?: ToolbarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the right's DOM element.
+     */
+    end?: ToolbarPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines valid properties in Toolbar component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface ToolbarProps extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'ref'> {
+    /**
+     * The template of left section.
+     * @deprecated use start instead
+     */
+    left?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of right section.
+     * @deprecated use end instead
+     */
+    right?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of start section.
+     */
+    start?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of center section.
+     */
+    center?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * The template of end section.
+     */
+    end?: React.ReactNode | ((props: ToolbarProps) => React.ReactNode);
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToolbarPassThroughOptions}
+     */
+    pt?: ToolbarPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Toolbar**
+ *
+ * _Toolbar is a grouping component for buttons and other content._
+ *
+ * [Live Demo](https://www.primereact.org/toolbar/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Toolbar extends React.Component<ToolbarProps, any> {
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
new file mode 100644
index 0000000000..ae4d471b2e
--- /dev/null
+++ b/components/lib/tooltip/Tooltip.js
@@ -0,0 +1,565 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
+import { TooltipBase } from './TooltipBase';
+
+export const Tooltip = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TooltipBase.getProps(inProps, context);
+        const [visibleState, setVisibleState] = React.useState(false);
+        const [positionState, setPositionState] = React.useState(props.position || 'right');
+        const [classNameState, setClassNameState] = React.useState('');
+        const [multipleFocusEvents, setMultipleFocusEvents] = React.useState(false);
+        const isCloseOnEscape = visibleState && props.closeOnEscape;
+        const overlayDisplayOrder = useDisplayOrder('tooltip', isCloseOnEscape);
+        const metaData = {
+            props,
+            state: {
+                visible: visibleState,
+                position: positionState,
+                className: classNameState
+            },
+            context: {
+                right: positionState === 'right',
+                left: positionState === 'left',
+                top: positionState === 'top',
+                bottom: positionState === 'bottom'
+            }
+        };
+
+        const { ptm, cx, sx, isUnstyled } = TooltipBase.setMetaData(metaData);
+
+        useHandleStyle(TooltipBase.css.styles, isUnstyled, { name: 'tooltip' });
+        useGlobalOnEscapeKey({
+            callback: () => {
+                hide();
+            },
+            when: isCloseOnEscape,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.TOOLTIP, overlayDisplayOrder]
+        });
+        const elementRef = React.useRef(null);
+        const textRef = React.useRef(null);
+        const currentTargetRef = React.useRef(null);
+        const containerSize = React.useRef(null);
+        const allowHide = React.useRef(true);
+        const timeouts = React.useRef({});
+        const currentMouseEvent = React.useRef(null);
+
+        const [bindWindowResizeListener, unbindWindowResizeListener] = useResizeListener({
+            listener: (event) => {
+                !DomHandler.isTouchDevice() && hide(event);
+            }
+        });
+
+        const [bindOverlayScrollListener, unbindOverlayScrollListener] = useOverlayScrollListener({
+            target: currentTargetRef.current,
+            listener: (event) => {
+                hide(event);
+            },
+            when: visibleState
+        });
+
+        const isTargetContentEmpty = (target) => {
+            return !(props.content || getTargetOption(target, 'tooltip'));
+        };
+
+        const isContentEmpty = (target) => {
+            return !(props.content || getTargetOption(target, 'tooltip') || props.children);
+        };
+
+        const isMouseTrack = (target) => {
+            return getTargetOption(target, 'mousetrack') || props.mouseTrack;
+        };
+
+        const isDisabled = (target) => {
+            return getTargetOption(target, 'disabled') === 'true' || hasTargetOption(target, 'disabled') || props.disabled;
+        };
+
+        const isShowOnDisabled = (target) => {
+            return getTargetOption(target, 'showondisabled') || props.showOnDisabled;
+        };
+
+        const isAutoHide = () => {
+            return getTargetOption(currentTargetRef.current, 'autohide') || props.autoHide;
+        };
+
+        const getTargetOption = (target, option) => {
+            return hasTargetOption(target, `data-pr-${option}`) ? target.getAttribute(`data-pr-${option}`) : null;
+        };
+
+        const hasTargetOption = (target, option) => {
+            return target && target.hasAttribute(option);
+        };
+
+        const getEvents = (target) => {
+            let showEvents = [getTargetOption(target, 'showevent') || props.showEvent];
+            let hideEvents = [getTargetOption(target, 'hideevent') || props.hideEvent];
+
+            if (isMouseTrack(target)) {
+                showEvents = ['mousemove'];
+                hideEvents = ['mouseleave'];
+            } else {
+                const event = getTargetOption(target, 'event') || props.event;
+
+                if (event === 'focus') {
+                    showEvents = ['focus'];
+                    hideEvents = ['blur'];
+                }
+
+                if (event === 'both') {
+                    showEvents = ['focus', 'mouseenter'];
+                    hideEvents = multipleFocusEvents ? ['blur'] : ['mouseleave', 'blur'];
+                }
+            }
+
+            return { showEvents, hideEvents };
+        };
+
+        const getPosition = (target) => {
+            return getTargetOption(target, 'position') || positionState;
+        };
+
+        const getMouseTrackPosition = (target) => {
+            const top = getTargetOption(target, 'mousetracktop') || props.mouseTrackTop;
+            const left = getTargetOption(target, 'mousetrackleft') || props.mouseTrackLeft;
+
+            return { top, left };
+        };
+
+        const updateText = (target, callback) => {
+            if (textRef.current) {
+                const content = getTargetOption(target, 'tooltip') || props.content;
+
+                if (content) {
+                    textRef.current.innerHTML = ''; // remove children
+                    textRef.current.appendChild(document.createTextNode(content));
+                    callback();
+                } else if (props.children) {
+                    callback();
+                }
+            }
+        };
+
+        const updateTooltipState = (position) => {
+            updateText(currentTargetRef.current, () => {
+                const { pageX: x, pageY: y } = currentMouseEvent.current;
+
+                if (props.autoZIndex && !ZIndexUtils.get(elementRef.current)) {
+                    ZIndexUtils.set('tooltip', elementRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, props.baseZIndex || (context && context.zIndex.tooltip) || PrimeReact.zIndex.tooltip);
+                }
+
+                elementRef.current.style.left = '';
+                elementRef.current.style.top = '';
+
+                // GitHub #2695 disable pointer events when autohiding
+                if (isAutoHide()) {
+                    elementRef.current.style.pointerEvents = 'none';
+                }
+
+                const mouseTrackCheck = isMouseTrack(currentTargetRef.current) || position === 'mouse';
+
+                if ((mouseTrackCheck && !containerSize.current) || mouseTrackCheck) {
+                    containerSize.current = {
+                        width: DomHandler.getOuterWidth(elementRef.current),
+                        height: DomHandler.getOuterHeight(elementRef.current)
+                    };
+                }
+
+                align(currentTargetRef.current, { x, y }, position);
+            });
+        };
+
+        const show = (e) => {
+            if (e.type && e.type === 'focus') setMultipleFocusEvents(true);
+
+            currentTargetRef.current = e.currentTarget;
+            const disabled = isDisabled(currentTargetRef.current);
+            const empty = isContentEmpty(isShowOnDisabled(currentTargetRef.current) && disabled ? currentTargetRef.current.firstChild : currentTargetRef.current);
+
+            if (empty || disabled) {
+                return;
+            }
+
+            currentMouseEvent.current = e;
+
+            if (visibleState) {
+                applyDelay('updateDelay', updateTooltipState);
+            } else {
+                // #2653 give the callback a chance to return false and not continue with display
+                const success = sendCallback(props.onBeforeShow, { originalEvent: e, target: currentTargetRef.current });
+
+                if (success) {
+                    applyDelay('showDelay', () => {
+                        setVisibleState(true);
+                        sendCallback(props.onShow, { originalEvent: e, target: currentTargetRef.current });
+                    });
+                }
+            }
+        };
+
+        const hide = (e) => {
+            if (e && e.type === 'blur') setMultipleFocusEvents(false);
+
+            clearTimeouts();
+
+            if (visibleState) {
+                const success = sendCallback(props.onBeforeHide, { originalEvent: e, target: currentTargetRef.current });
+
+                if (success) {
+                    applyDelay('hideDelay', () => {
+                        if (!isAutoHide() && allowHide.current === false) {
+                            return;
+                        }
+
+                        ZIndexUtils.clear(elementRef.current);
+                        DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
+
+                        setVisibleState(false);
+                        sendCallback(props.onHide, { originalEvent: e, target: currentTargetRef.current });
+                    });
+                }
+            } else if (!props.onBeforeHide && !getDelay('hideDelay')) {
+                // handles the case when visibleState change from mouseenter was queued and mouseleave handler was called earlier than queued re-render
+                setVisibleState(false);
+            }
+        };
+
+        const align = (target, coordinate, position) => {
+            let left = 0;
+            let top = 0;
+            let currentPosition = position || positionState;
+
+            if ((isMouseTrack(target) || currentPosition == 'mouse') && coordinate) {
+                const _containerSize = {
+                    width: DomHandler.getOuterWidth(elementRef.current),
+                    height: DomHandler.getOuterHeight(elementRef.current)
+                };
+
+                left = coordinate.x;
+                top = coordinate.y;
+
+                let { top: mouseTrackTop, left: mouseTrackLeft } = getMouseTrackPosition(target);
+
+                switch (currentPosition) {
+                    case 'left':
+                        left = left - (_containerSize.width + mouseTrackLeft);
+                        top = top - (_containerSize.height / 2 - mouseTrackTop);
+                        break;
+                    case 'right':
+                    case 'mouse':
+                        left = left + mouseTrackLeft;
+                        top = top - (_containerSize.height / 2 - mouseTrackTop);
+                        break;
+                    case 'top':
+                        left = left - (_containerSize.width / 2 - mouseTrackLeft);
+                        top = top - (_containerSize.height + mouseTrackTop);
+                        break;
+                    case 'bottom':
+                        left = left - (_containerSize.width / 2 - mouseTrackLeft);
+                        top = top + mouseTrackTop;
+                        break;
+                    default:
+                        break;
+                }
+
+                if (left <= 0 || containerSize.current.width > _containerSize.width) {
+                    elementRef.current.style.left = '0px';
+                    elementRef.current.style.right = window.innerWidth - _containerSize.width - left + 'px';
+                } else {
+                    elementRef.current.style.right = '';
+                    elementRef.current.style.left = left + 'px';
+                }
+
+                elementRef.current.style.top = top + 'px';
+                DomHandler.addClass(elementRef.current, 'p-tooltip-active');
+            } else {
+                const pos = DomHandler.findCollisionPosition(currentPosition);
+                const my = getTargetOption(target, 'my') || props.my || pos.my;
+                const at = getTargetOption(target, 'at') || props.at || pos.at;
+
+                elementRef.current.style.padding = '0px';
+
+                DomHandler.flipfitCollision(elementRef.current, target, my, at, (calculatedPosition) => {
+                    const { x: atX, y: atY } = calculatedPosition.at;
+                    const { x: myX } = calculatedPosition.my;
+                    const newPosition = props.at ? (atX !== 'center' && atX !== myX ? atX : atY) : calculatedPosition.at[`${pos.axis}`];
+
+                    elementRef.current.style.padding = '';
+
+                    setPositionState(newPosition);
+                    updateContainerPosition(newPosition);
+                    DomHandler.addClass(elementRef.current, 'p-tooltip-active');
+                });
+            }
+        };
+
+        const updateContainerPosition = (position) => {
+            if (elementRef.current) {
+                const style = getComputedStyle(elementRef.current);
+
+                if (position === 'left') {
+                    elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';
+                } else if (position === 'top') {
+                    elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
+                }
+            }
+        };
+
+        const onMouseEnter = () => {
+            if (!isAutoHide()) {
+                allowHide.current = false;
+            }
+        };
+
+        const onMouseLeave = (e) => {
+            if (!isAutoHide()) {
+                allowHide.current = true;
+                hide(e);
+            }
+        };
+
+        const bindTargetEvent = (target) => {
+            if (target) {
+                const { showEvents, hideEvents } = getEvents(target);
+                const currentTarget = getTarget(target);
+
+                showEvents.forEach((event) => currentTarget?.addEventListener(event, show));
+                hideEvents.forEach((event) => currentTarget?.addEventListener(event, hide));
+            }
+        };
+
+        const unbindTargetEvent = (target) => {
+            if (target) {
+                const { showEvents, hideEvents } = getEvents(target);
+                const currentTarget = getTarget(target);
+
+                showEvents.forEach((event) => currentTarget?.removeEventListener(event, show));
+                hideEvents.forEach((event) => currentTarget?.removeEventListener(event, hide));
+            }
+        };
+
+        const getDelay = (delayProp) => {
+            return getTargetOption(currentTargetRef.current, delayProp.toLowerCase()) || props[delayProp];
+        };
+
+        const applyDelay = (delayProp, callback) => {
+            clearTimeouts();
+
+            const delay = getDelay(delayProp);
+
+            delay ? (timeouts.current[`${delayProp}`] = setTimeout(() => callback(), delay)) : callback();
+        };
+
+        const sendCallback = (callback, ...params) => {
+            if (callback) {
+                let result = callback(...params);
+
+                if (result === undefined) {
+                    result = true;
+                }
+
+                return result;
+            }
+
+            return true;
+        };
+
+        const clearTimeouts = () => {
+            Object.values(timeouts.current).forEach((t) => clearTimeout(t));
+        };
+
+        const getTarget = (target) => {
+            if (target) {
+                if (isShowOnDisabled(target)) {
+                    if (!target.hasWrapper) {
+                        const wrapper = document.createElement('div');
+                        const isInputElement = target.nodeName === 'INPUT';
+
+                        if (isInputElement) {
+                            DomHandler.addMultipleClasses(wrapper, 'p-tooltip-target-wrapper p-inputwrapper');
+                        } else {
+                            DomHandler.addClass(wrapper, 'p-tooltip-target-wrapper');
+                        }
+
+                        target.parentNode.insertBefore(wrapper, target);
+                        wrapper.appendChild(target);
+                        target.hasWrapper = true;
+
+                        return wrapper;
+                    }
+
+                    return target.parentElement;
+                } else if (target.hasWrapper) {
+                    target.parentElement.replaceWith(...target.parentElement.childNodes);
+                    delete target.hasWrapper;
+                }
+
+                return target;
+            }
+
+            return null;
+        };
+
+        const updateTargetEvents = (target) => {
+            unloadTargetEvents(target);
+            loadTargetEvents(target);
+        };
+
+        const loadTargetEvents = (target) => {
+            setTargetEventOperations(target || props.target, bindTargetEvent);
+        };
+
+        const unloadTargetEvents = (target) => {
+            setTargetEventOperations(target || props.target, unbindTargetEvent);
+        };
+
+        const setTargetEventOperations = (target, operation) => {
+            target = ObjectUtils.getRefElement(target);
+
+            if (target) {
+                if (DomHandler.isElement(target)) {
+                    operation(target);
+                } else {
+                    const setEvent = (target) => {
+                        let element = DomHandler.find(document, target);
+
+                        element.forEach((el) => {
+                            operation(el);
+                        });
+                    };
+
+                    if (target instanceof Array) {
+                        target.forEach((t) => {
+                            setEvent(t);
+                        });
+                    } else {
+                        setEvent(target);
+                    }
+                }
+            }
+        };
+
+        useMountEffect(() => {
+            if (visibleState && currentTargetRef.current && isDisabled(currentTargetRef.current)) {
+                hide();
+            }
+        });
+
+        useUpdateEffect(() => {
+            loadTargetEvents();
+
+            return () => {
+                unloadTargetEvents();
+            };
+        }, [show, hide, props.target]);
+
+        useUpdateEffect(() => {
+            if (visibleState) {
+                const position = getPosition(currentTargetRef.current);
+                const classname = getTargetOption(currentTargetRef.current, 'classname');
+
+                setPositionState(position);
+                setClassNameState(classname);
+                updateTooltipState(position);
+
+                bindWindowResizeListener();
+                bindOverlayScrollListener();
+            } else {
+                setPositionState(props.position || 'right');
+                setClassNameState('');
+                currentTargetRef.current = null;
+                containerSize.current = null;
+                allowHide.current = true;
+            }
+
+            return () => {
+                unbindWindowResizeListener();
+                unbindOverlayScrollListener();
+            };
+        }, [visibleState]);
+
+        useUpdateEffect(() => {
+            const position = getPosition(currentTargetRef.current);
+
+            if (visibleState && position !== 'mouse') {
+                applyDelay('updateDelay', () => {
+                    updateText(currentTargetRef.current, () => {
+                        align(currentTargetRef.current);
+                    });
+                });
+            }
+        }, [props.content]);
+
+        useUnmountEffect(() => {
+            hide();
+            ZIndexUtils.clear(elementRef.current);
+        });
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            updateTargetEvents,
+            loadTargetEvents,
+            unloadTargetEvents,
+            show,
+            hide,
+            getElement: () => elementRef.current,
+            getTarget: () => currentTargetRef.current
+        }));
+
+        const createElement = () => {
+            const empty = isTargetContentEmpty(currentTargetRef.current);
+            const rootProps = mergeProps(
+                {
+                    id: props.id,
+                    className: classNames(props.className, cx('root', { positionState, classNameState })),
+                    style: props.style,
+                    role: 'tooltip',
+                    'aria-hidden': visibleState,
+                    onMouseEnter: (e) => onMouseEnter(e),
+                    onMouseLeave: (e) => onMouseLeave(e)
+                },
+                TooltipBase.getOtherProps(props),
+                ptm('root')
+            );
+
+            const arrowProps = mergeProps(
+                {
+                    className: cx('arrow'),
+                    style: sx('arrow', { ...metaData })
+                },
+                ptm('arrow')
+            );
+
+            const textProps = mergeProps(
+                {
+                    className: cx('text')
+                },
+                ptm('text')
+            );
+
+            return (
+                <div ref={elementRef} {...rootProps}>
+                    <div {...arrowProps} />
+                    <div ref={textRef} {...textProps}>
+                        {empty && props.children}
+                    </div>
+                </div>
+            );
+        };
+
+        if (visibleState) {
+            const element = createElement();
+
+            return <Portal element={element} appendTo={props.appendTo} visible />;
+        }
+
+        return null;
+    })
+);
+
+Tooltip.displayName = 'Tooltip';
diff --git a/components/lib/tooltip/Tooltip.spec.js b/components/lib/tooltip/Tooltip.spec.js
new file mode 100644
index 0000000000..b9354f0798
--- /dev/null
+++ b/components/lib/tooltip/Tooltip.spec.js
@@ -0,0 +1,351 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { PrimeReactProvider } from '../api/Api';
+import { Button } from '../button/Button';
+import { InputText } from '../inputtext/InputText';
+import { Tooltip } from './Tooltip';
+
+describe('Tooltip', () => {
+    test('when using tooltip with manual zindex should only be assigned from the style', async () => {
+        // Arrange
+        const tooltipText = /Manual zIndex/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="Manual zIndex" tooltipOptions={{ autoZIndex: false, style: { zIndex: 6666 } }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        const tooltip = screen.getByText(tooltipText);
+
+        expect(tooltip).toBeVisible();
+        expect(tooltip.parentElement).toHaveClass('p-tooltip p-component p-tooltip-active');
+        expect(tooltip.parentElement).toHaveStyle({ 'z-index': '6666' });
+    });
+    test('when using tooltip with auto zindex the zindex should be automatically assigned', async () => {
+        // Arrange
+        const tooltipText = /Auto zIndex/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="Auto zIndex" tooltipOptions={{ autoZIndex: true, baseZIndex: 500 }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        const tooltip = screen.getByText(tooltipText);
+
+        expect(tooltip).toBeVisible();
+        expect(tooltip.parentElement).toHaveClass('p-tooltip p-component p-tooltip-active');
+        expect(tooltip.parentElement).toHaveStyle({ 'z-index': '501' });
+    });
+    test('when using tooltip with defaults it is displayed on events mouse enter and leave', async () => {
+        // Arrange
+        const tooltipText = /Mouse Enter/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="Mouse Enter" tooltipOptions={{ position: 'right', showDelay: 1 }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        expect(screen.queryByText(tooltipText)).toBeNull();
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        expect(screen.getByText(tooltipText)).toBeVisible();
+
+        // tooltip disappears when we mouse out
+        fireEvent.mouseLeave(input);
+        expect(screen.queryByText(tooltipText)).toBeNull();
+    });
+    test('when using tooltip with event focus it is displayed on events focus and blur', async () => {
+        // Arrange
+        const tooltipText = /Focus Blur/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="Focus Blur" tooltipOptions={{ event: 'focus' }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        expect(screen.queryByText(tooltipText)).toBeNull();
+
+        // Act
+        fireEvent.focus(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        expect(screen.getByText(tooltipText)).toBeVisible();
+
+        // tooltip disappears when we blur
+        fireEvent.blur(input);
+        expect(screen.queryByText(tooltipText)).toBeNull();
+    });
+    test('when using tooltip event both it is displayed on events focus, blur, mousenter, mouseleave', async () => {
+        // Arrange
+        const tooltipText = /Both/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="Both" tooltipOptions={{ event: 'both' }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        // Act (focus)
+        fireEvent.focus(input);
+
+        // Assert (focus)
+        await waitFor(() => screen.getByText(tooltipText));
+        expect(screen.getByText(tooltipText)).toBeVisible();
+
+        // Act (blur)
+        fireEvent.blur(input);
+
+        // Assert (blur)
+        expect(screen.queryByText(tooltipText)).toBeNull();
+
+        // Act (mouse enter)
+        fireEvent.mouseEnter(input);
+
+        // Assert (mouse enter)
+        await waitFor(() => screen.getByText(tooltipText));
+        expect(screen.getByText(tooltipText)).toBeVisible();
+
+        // Act (mouse leave)
+        fireEvent.mouseLeave(input);
+
+        // Assert (mouse leave)
+        expect(screen.queryByText(tooltipText)).toBeNull();
+    });
+    test('when using tooltip on disabled element it is not displayed', async () => {
+        // Arrange
+        const tooltipText = /Disabled/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText disabled tooltip="Disabled" />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-disabled')[0];
+
+        expect(screen.queryByText(tooltipText)).toBeNull();
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        expect(screen.queryByText(tooltipText)).toBeNull();
+    });
+    test('when using tooltip on disabled button and showOnDisabled it is displayed', async () => {
+        // Arrange
+        const tooltipText = /Disabled/i;
+        const { container } = render(
+            <>
+                <PrimeReactProvider>
+                    <Tooltip target=".disabled-button" />
+                    <span className="disabled-button" data-pr-tooltip="A Disabled Button">
+                        <Button type="button" label="Save" icon="pi pi-check" disabled />
+                    </span>
+                </PrimeReactProvider>
+            </>
+        );
+        const input = container.getElementsByClassName('disabled-button')[0];
+
+        expect(screen.queryByText(tooltipText)).toBeNull();
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        expect(screen.getByText(tooltipText)).toBeVisible();
+    });
+    test('when using tooltip with with position right it is displayed on the right', async () => {
+        // Arrange
+        const tooltipText = /right/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="right" tooltipOptions={{ position: 'right' }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        const tooltip = screen.getByText(tooltipText);
+
+        expect(tooltip).toBeVisible();
+        expect(tooltip).toHaveClass('p-tooltip-text');
+        expect(tooltip.parentElement).toHaveClass('p-tooltip p-component p-tooltip-right p-tooltip-active');
+    });
+    test('when using tooltip with with position left it is displayed on the left', async () => {
+        // Arrange
+        const tooltipText = /left/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="left" tooltipOptions={{ position: 'left' }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        const tooltip = screen.getByText(tooltipText);
+
+        expect(tooltip).toBeVisible();
+        expect(tooltip).toHaveClass('p-tooltip-text');
+        expect(tooltip.parentElement).toHaveClass('p-tooltip p-component p-tooltip-left p-tooltip-active');
+    });
+    test('when using tooltip with with position top it is displayed on the top', async () => {
+        // Arrange
+        const tooltipText = /top/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="top" tooltipOptions={{ position: 'top' }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        const tooltip = screen.getByText(tooltipText);
+
+        expect(tooltip).toBeVisible();
+        expect(tooltip).toHaveClass('p-tooltip-text');
+        expect(tooltip.parentElement).toHaveClass('p-tooltip p-component p-tooltip-top p-tooltip-active');
+    });
+    test('when using tooltip with with position bottom it is displayed on the bottom', async () => {
+        // Arrange
+        const tooltipText = /bottom/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <InputText tooltip="bottom" tooltipOptions={{ position: 'bottom' }} />
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('p-inputtext')[0];
+
+        // Act
+        fireEvent.mouseEnter(input);
+
+        // Assert
+        await waitFor(() => screen.getByText(tooltipText));
+        const tooltip = screen.getByText(tooltipText);
+
+        expect(tooltip).toBeVisible();
+        expect(tooltip).toHaveClass('p-tooltip-text');
+        expect(tooltip.parentElement).toHaveClass('p-tooltip p-component p-tooltip-bottom p-tooltip-active');
+    });
+    test('when tooltip is shown and hidden ensure callback events are fired', async () => {
+        // Arrange
+        const showBeforeOn = jest.fn();
+        const showOn = jest.fn();
+        const hideBeforeOn = jest.fn();
+        const hideOn = jest.fn();
+        const tooltipText = /Events Button/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <Tooltip target=".events-button" onBeforeHide={hideBeforeOn} onBeforeShow={showBeforeOn} onShow={showOn} onHide={hideOn} />
+                <span className="events-button" data-pr-tooltip="Events Button">
+                    <Button type="button" label="Events" />
+                </span>
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('events-button')[0];
+
+        // Act (show)
+        fireEvent.mouseEnter(input);
+
+        // Assert (show)
+        await waitFor(() => screen.getByText(tooltipText));
+        const tooltip = screen.getByText(tooltipText);
+
+        expect(tooltip).toBeVisible();
+        expect(showBeforeOn).toHaveBeenCalledTimes(1);
+        expect(showOn).toHaveBeenCalledTimes(1);
+        expect(hideBeforeOn).toHaveBeenCalledTimes(0);
+        expect(hideOn).toHaveBeenCalledTimes(0);
+
+        // Act (hide)
+        showBeforeOn.mockReset();
+        showOn.mockReset();
+        fireEvent.mouseLeave(input);
+
+        // Assert (show)
+        expect(showBeforeOn).toHaveBeenCalledTimes(0);
+        expect(showOn).toHaveBeenCalledTimes(0);
+        expect(hideBeforeOn).toHaveBeenCalledTimes(1);
+        expect(hideOn).toHaveBeenCalledTimes(1);
+    });
+    test('when tooltip onBeforeShow returns false prevent showing the tooltip', () => {
+        // Arrange
+        const showBeforeOn = jest.fn(() => {
+            return false;
+        });
+        const showOn = jest.fn();
+        const tooltipText = /Show/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <Tooltip target=".events-button" onBeforeShow={showBeforeOn} onShow={showOn} />
+                <span className="events-button" data-pr-tooltip="Show">
+                    <Button type="button" label="Events" />
+                </span>
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('events-button')[0];
+
+        // Act (show)
+        fireEvent.mouseEnter(input);
+
+        // Assert (show)
+        expect(screen.queryByText(tooltipText)).toBeNull();
+        expect(showBeforeOn).toHaveBeenCalledTimes(1);
+        expect(showOn).toHaveBeenCalledTimes(0);
+    });
+    test('when tooltip onBeforeHide returns false prevent hiding the tooltip', () => {
+        // Arrange
+        const hideBeforeOn = jest.fn(() => {
+            return false;
+        });
+        const hideOn = jest.fn();
+        const tooltipText = /Hide/i;
+        const { container } = render(
+            <PrimeReactProvider>
+                <Tooltip target=".events-button" onBeforeHide={hideBeforeOn} onHide={hideOn} />
+                <span className="events-button" data-pr-tooltip="Hide">
+                    <Button type="button" label="Events" />
+                </span>
+            </PrimeReactProvider>
+        );
+        const input = container.getElementsByClassName('events-button')[0];
+
+        // Act (hide)
+        fireEvent.mouseEnter(input);
+        fireEvent.mouseLeave(input);
+
+        // Assert (hide)
+        expect(screen.queryByText(tooltipText)).toBeVisible();
+        expect(hideBeforeOn).toHaveBeenCalledTimes(1);
+        expect(hideOn).toHaveBeenCalledTimes(0);
+    });
+});
diff --git a/components/lib/tooltip/TooltipBase.js b/components/lib/tooltip/TooltipBase.js
new file mode 100644
index 0000000000..6cc1145a88
--- /dev/null
+++ b/components/lib/tooltip/TooltipBase.js
@@ -0,0 +1,135 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ positionState, classNameState }) =>
+        classNames(
+            'p-tooltip p-component',
+            {
+                [`p-tooltip-${positionState}`]: true
+            },
+            classNameState
+        ),
+    arrow: 'p-tooltip-arrow',
+    text: 'p-tooltip-text'
+};
+
+const inlineStyles = {
+    arrow: ({ context }) => ({
+        top: context.bottom ? '0' : context.right || context.left || (!context.right && !context.left && !context.top && !context.bottom) ? '50%' : null,
+        bottom: context.top ? '0' : null,
+        left: context.right || (!context.right && !context.left && !context.top && !context.bottom) ? '0' : context.top || context.bottom ? '50%' : null,
+        right: context.left ? '0' : null
+    })
+};
+
+const styles = `
+@layer primereact {
+    .p-tooltip {
+        position: absolute;
+        padding: .25em .5rem;
+        /* #3687: Tooltip prevent scrollbar flickering */
+        top: -9999px;
+        left: -9999px;
+    }
+    
+    .p-tooltip.p-tooltip-right,
+    .p-tooltip.p-tooltip-left {
+        padding: 0 .25rem;
+    }
+    
+    .p-tooltip.p-tooltip-top,
+    .p-tooltip.p-tooltip-bottom {
+        padding:.25em 0;
+    }
+    
+    .p-tooltip .p-tooltip-text {
+       white-space: pre-line;
+       word-break: break-word;
+    }
+    
+    .p-tooltip-arrow {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+    }
+    
+    .p-tooltip-right .p-tooltip-arrow {
+        top: 50%;
+        left: 0;
+        margin-top: -.25rem;
+        border-width: .25em .25em .25em 0;
+    }
+    
+    .p-tooltip-left .p-tooltip-arrow {
+        top: 50%;
+        right: 0;
+        margin-top: -.25rem;
+        border-width: .25em 0 .25em .25rem;
+    }
+    
+    .p-tooltip.p-tooltip-top {
+        padding: .25em 0;
+    }
+    
+    .p-tooltip-top .p-tooltip-arrow {
+        bottom: 0;
+        left: 50%;
+        margin-left: -.25rem;
+        border-width: .25em .25em 0;
+    }
+    
+    .p-tooltip-bottom .p-tooltip-arrow {
+        top: 0;
+        left: 50%;
+        margin-left: -.25rem;
+        border-width: 0 .25em .25rem;
+    }
+
+    .p-tooltip-target-wrapper {
+        display: inline-flex;
+    }
+}
+`;
+
+export const TooltipBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Tooltip',
+        appendTo: null,
+        at: null,
+        autoHide: true,
+        autoZIndex: true,
+        baseZIndex: 0,
+        className: null,
+        closeOnEscape: false,
+        content: null,
+        disabled: false,
+        event: null,
+        hideDelay: 0,
+        hideEvent: 'mouseleave',
+        id: null,
+        mouseTrack: false,
+        mouseTrackLeft: 5,
+        mouseTrackTop: 5,
+        my: null,
+        onBeforeHide: null,
+        onBeforeShow: null,
+        onHide: null,
+        onShow: null,
+        position: 'right',
+        showDelay: 0,
+        showEvent: 'mouseenter',
+        showOnDisabled: false,
+        style: null,
+        target: null,
+        updateDelay: 0,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles,
+        inlineStyles
+    }
+});
diff --git a/components/lib/tooltip/package.json b/components/lib/tooltip/package.json
new file mode 100644
index 0000000000..b04c26e47d
--- /dev/null
+++ b/components/lib/tooltip/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./tooltip.cjs.js",
+    "module": "./tooltip.esm.js",
+    "unpkg": "./tooltip.min.js",
+    "types": "./tooltip.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/tooltip/tooltip.d.ts b/components/lib/tooltip/tooltip.d.ts
new file mode 100644
index 0000000000..76ff2f1dc0
--- /dev/null
+++ b/components/lib/tooltip/tooltip.d.ts
@@ -0,0 +1,179 @@
+/**
+ *
+ * Tooltip functionality is integrated within various PrimeReact components.
+ *
+ * [Live Demo](https://www.primereact.org/tooltip/)
+ *
+ * @module tooltip
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { PassThroughType } from '../utils/utils';
+import { TooltipEvent, TooltipOptions } from './tooltipoptions';
+
+export declare type TooltipPassThroughType<T> = PassThroughType<T, TooltipPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TooltipPassThroughMethodOptions {
+    props: TooltipProps;
+    state: TooltipState;
+    context: TooltipContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TooltipProps.pt}
+ */
+export interface TooltipPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TooltipPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the arrow's DOM element.
+     */
+    arrow?: TooltipPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the text's DOM element.
+     */
+    text?: TooltipPassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline context in Tooltip component.
+ */
+export interface TooltipContext {
+    /**
+     * Right aligned tooltip as a boolean.
+     * @defaultValue false
+     */
+    right: boolean;
+    /**
+     * Right aligned tooltip as a boolean.
+     * @defaultValue false
+     */
+    left: boolean;
+    /**
+     * Right aligned tooltip as a boolean.
+     * @defaultValue false
+     */
+    top: boolean;
+    /**
+     * Right aligned tooltip as a boolean.
+     * @defaultValue false
+     */
+    bottom: boolean;
+}
+
+/**
+ * Defines current inline state in Tooltip component.
+ */
+export interface TooltipState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue false
+     */
+    visible: boolean;
+    /**
+     * Current position state as a string.
+     * @defaultValue right
+     */
+    position: string;
+    /**
+     * Current className state as a string.
+     */
+    className: string;
+}
+
+/**
+ * Defines valid properties in Tooltip component. In addition to these, all properties of TooltipOptions can be used in this component.
+ * @extends {TooltipOptions}
+ * @group Properties
+ */
+export interface TooltipProps extends TooltipOptions {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Target element on global tooltip option.
+     */
+    target?: string | string[] | HTMLElement | React.RefObject<HTMLElement> | undefined;
+    /**
+     * Content to be displayed in tooltip.
+     */
+    content?: React.ReactNode | string | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TooltipPassThroughOptions}
+     */
+    pt?: TooltipPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * **PrimeReact - Tooltip**
+ *
+ * _Tooltip functionality is integrated within various PrimeReact components._
+ *
+ * [Live Demo](https://www.primereact.org/tooltip/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Tooltip extends React.Component<TooltipProps, any> {
+    /**
+     * Used to reload target events. In some cases, the target element can be hidden initially. Later, when this element becomes visible, it will be necessary to bind tooltip events to this element.
+     * @param {string | string[] | HTMLElement | React.RefObject<HTMLElement> | undefined} target - Target element or if undefined will use current target.
+     */
+    public updateTargetEvents(target?: string | string[] | HTMLElement | React.RefObject<HTMLElement> | undefined): void;
+    /**
+     * Used to load target events.
+     * @param {string | string[] | HTMLElement | React.RefObject<HTMLElement> | undefined} target - Target element or if undefined will use current target.
+     */
+    public loadTargetEvents(target?: string | string[] | HTMLElement | React.RefObject<HTMLElement> | undefined): void;
+    /**
+     * Used to unload target events.
+     * @param {string | string[] | HTMLElement | React.RefObject<HTMLElement> | undefined} target - Target element or if undefined will use current target.
+     */
+    public unloadTargetEvents(target?: string | string[] | HTMLElement | React.RefObject<HTMLElement> | undefined): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLElement | null} Container element
+     */
+    public getElement(): HTMLElement | null;
+    /**
+     * Used to get target element.
+     * @return {HTMLElement | null} Target element
+     */
+    public getTarget(): HTMLElement | null;
+    /**
+     * Used to show the tooltip.
+     * @param {TooltipEvent} event - Browser event.
+     */
+    public show(event?: TooltipEvent): null;
+    /**
+     * Used to hide the tooltip.
+     * @param {TooltipEvent} event - Browser event.
+     */
+    public hide(event?: TooltipEvent): null;
+}
diff --git a/components/lib/tooltip/tooltipoptions.d.ts b/components/lib/tooltip/tooltipoptions.d.ts
new file mode 100644
index 0000000000..5306a102dc
--- /dev/null
+++ b/components/lib/tooltip/tooltipoptions.d.ts
@@ -0,0 +1,414 @@
+/**
+ *
+ * This module contains the common options and events of Tooltip.
+ *
+ * @module tooltipoptions
+ *
+ */
+import * as React from 'react';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from './tooltip';
+
+/**
+ * Custom tooltip event
+ * @event
+ */
+interface TooltipEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Target element.
+     * @defaultValue current target
+     */
+    target: HTMLElement;
+}
+
+/**
+ * Defines valid properties of TooltipOptions.
+ * @group Model
+ */
+export interface TooltipOptions {
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | null | undefined | (() => HTMLElement);
+    /**
+     * Defines which position on the target element to align the positioned tooltip.
+     */
+    at?: string | undefined;
+    /**
+     * Whether to hide tooltip when hovering over tooltip content.
+     * @defaultValue true
+     */
+    autoHide?: boolean | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * @defaultValue true
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * @defaultValue 0
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * Style class of the tooltip.
+     */
+    className?: string | undefined;
+    /**
+     * Specifies if pressing escape key should hide the tooltip.
+     * @defaultValue false
+     */
+    closeOnEscape?: boolean | undefined;
+    /**
+     * When present, it specifies that the tooltip should be hidden.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Event to show the tooltip.
+     * @defaultValue hover
+     */
+    event?: 'hover' | 'focus' | 'both' | undefined;
+    /**
+     * Delay to hide the tooltip in milliseconds.
+     * @defaultValue 0
+     */
+    hideDelay?: number | undefined;
+    /**
+     * Event to hide the tooltip if the event property is empty.
+     * @defaultValue mouseleave
+     */
+    hideEvent?: string | undefined;
+    /**
+     * Whether the tooltip will follow the mouse.
+     * @defaultValue false
+     */
+    mouseTrack?: boolean | undefined;
+    /**
+     * Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.
+     * @defaultValue 5
+     */
+    mouseTrackLeft?: number | undefined;
+    /**
+     * Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.
+     * @defaultValue 5
+     */
+    mouseTrackTop?: number | undefined;
+    /**
+     * Defines which position on the tooltip being positioned to align with the target element.
+     */
+    my?: string | undefined;
+    /**
+     * Position of the tooltip.
+     * @defaultValue right
+     */
+    position?: 'top' | 'bottom' | 'left' | 'right' | 'mouse' | undefined;
+    /**
+     * Delay to show the tooltip in milliseconds.
+     * @defaultValue 0
+     */
+    showDelay?: number | undefined;
+    /**
+     * Event to show the tooltip if the event property is empty.
+     * @defaultValue mouseenter
+     */
+    showEvent?: string | undefined;
+    /**
+     * Whether to show tooltip for disabled elements.
+     * @defaultValue false
+     */
+    showOnDisabled?: boolean | undefined;
+    /**
+     * Style of the tooltip.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Delay to update the tooltip in milliseconds.
+     * @defaultValue 0
+     */
+    updateDelay?: number | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     */
+    pt?: TooltipPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Callback to invoke before the tooltip is shown.
+     * @param {TooltipEvent} event - Browser event
+     */
+    onBeforeShow?(event: TooltipEvent): void;
+    /**
+     * Callback to invoke before the tooltip is hidden.
+     * @param {TooltipEvent} event - Browser event
+     */
+    onBeforeHide?(event: TooltipEvent): void;
+    /**
+     * Callback to invoke when the tooltip is shown.
+     * @param {TooltipEvent} event - Browser event
+     */
+    onShow?(event: TooltipEvent): void;
+    /**
+     * Callback to invoke when the tooltip is hidden.
+     * @param {TooltipEvent} event - Browser event
+     */
+    onHide?(event: TooltipEvent): void;
+}
+
+/**
+ * In addition to React.HTMLAttributes, the following attributes can be used on any HTMLElement if the page has a PrimeReact {@link tooltip} component.
+ * @group Model
+ */
+
+interface TooltipHTMLAttributes {
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Content of the tooltip.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltip.TooltipProps.content}
+     */
+    'data-pr-tooltip'?: string | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * When present, it specifies that the tooltip should be hidden.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.disabled}
+     * @defaultValue false
+     */
+    'data-pr-disabled'?: boolean | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Style class of the tooltip.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.className}
+     */
+    'data-pr-classname'?: string | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Position of the tooltip.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.position}
+     * @defaultValue right
+     */
+    'data-pr-position'?: 'top' | 'bottom' | 'left' | 'right' | 'mouse' | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Defines which position on the tooltip being positioned to align with the target element.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.my}
+     */
+    'data-pr-my'?: string | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Defines which position on the target element to align the positioned tooltip.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.at}
+     */
+    'data-pr-at'?: string | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Event to show the tooltip.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.event}
+     * @defaultValue hover
+     */
+    'data-pr-event'?: 'hover' | 'focus' | 'both' | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Event to show the tooltip if the event property is empty.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.showEvent}
+     * @defaultValue mouseenter
+     */
+    'data-pr-showevent'?: string | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Event to hide the tooltip if the event property is empty.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.hideEvent}
+     * @defaultValue mouseleave
+     */
+    'data-pr-hideevent'?: string | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Whether the tooltip will follow the mouse.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.mouseTrack}
+     * @defaultValue false
+     */
+    'data-pr-mousetrack'?: boolean | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Defines top position of the tooltip in relation to the mouse when the mouseTrack is enabled.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.mouseTrackTop}
+     * @defaultValue 5
+     */
+    'data-pr-mousetracktop'?: number | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Defines left position of the tooltip in relation to the mouse when the mouseTrack is enabled.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.mouseTrackLeft}
+     * @defaultValue 5
+     */
+    'data-pr-mousetrackleft'?: number | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Delay to show the tooltip in milliseconds.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.showDelay}
+     * @defaultValue 0
+     */
+    'data-pr-showdelay'?: number | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Delay to update the tooltip in milliseconds.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.updateDelay}
+     * @defaultValue 0
+     */
+    'data-pr-updatedelay'?: number | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Delay to hide the tooltip in milliseconds.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.hideDelay}
+     * @defaultValue 0
+     */
+    'data-pr-hidedelay'?: number | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Whether to hide tooltip when hovering over tooltip content.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.autoHide}
+     * @defaultValue true
+     */
+    'data-pr-autohide'?: boolean | undefined;
+    /**
+     * **PrimeReact - TooltipHTMLAttributes**
+     *
+     * Whether to show tooltip for disabled elements.*
+     *
+     * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+     * ___
+     *
+     * _*This feature will be active when there is a PrimeReact {@link tooltip} component on the page._
+     *
+     * {@inheritDoc tooltipoptions.TooltipOptions.showOnDisabled}
+     * @defaultValue false
+     */
+    'data-pr-showondisabled'?: boolean | undefined;
+}
+
+declare module 'react' {
+    export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T>, TooltipHTMLAttributes {}
+}
diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js
new file mode 100644
index 0000000000..2b0c0ddcfe
--- /dev/null
+++ b/components/lib/tree/Tree.js
@@ -0,0 +1,684 @@
+import * as React from 'react';
+import { localeOption, PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useDebounce, useMergeProps, useUpdateEffect } from '../hooks/Hooks';
+import { SearchIcon } from '../icons/search';
+import { SpinnerIcon } from '../icons/spinner';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { TreeBase } from './TreeBase';
+import { UITreeNode } from './UITreeNode';
+
+export const Tree = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TreeBase.getProps(inProps, context);
+
+        const [filterValue, filterValueState, setFilterValueState] = useDebounce('', props.filterDelay || 0);
+        const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys);
+
+        const elementRef = React.useRef(null);
+        const filteredNodes = React.useRef([]);
+        const dragState = React.useRef(null);
+        const filterChanged = React.useRef(false);
+        const [, forceRender] = React.useState(false);
+
+        const filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
+        const isFiltering = props.filter && filteredValue;
+        const expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+        const currentFilterExpandedKeys = React.useRef({});
+
+        const childFocusEvent = React.useRef(null);
+        const { ptm, cx, isUnstyled } = TreeBase.setMetaData({
+            props,
+            state: {
+                filterValue: filteredValue,
+                expandedKeys: expandedKeys
+            }
+        });
+
+        useHandleStyle(TreeBase.css.styles, isUnstyled, { name: 'tree' });
+
+        const filterOptions = {
+            filter: (e) => onFilterInputChange(e),
+            reset: () => resetFilter()
+        };
+
+        const getRootNode = () => {
+            return props.filter && filteredNodes.current ? filteredNodes.current : props.value;
+        };
+
+        const onToggle = (event) => {
+            const { originalEvent, value, navigateFocusToChild } = event;
+
+            if (originalEvent == null && isFiltering) {
+                if (props.onToggle) {
+                    props.onToggle({ originalEvent, value: { ...props.expandedKeys, ...value } });
+                } else {
+                    setExpandedKeysState({ ...expandedKeysState, ...value });
+                }
+            } else if (props.onToggle) {
+                props.onToggle({ originalEvent, value });
+            } else {
+                if (navigateFocusToChild) {
+                    childFocusEvent.current = originalEvent;
+                }
+
+                setExpandedKeysState(value);
+            }
+        };
+
+        useUpdateEffect(() => {
+            if (childFocusEvent.current) {
+                const event = childFocusEvent.current;
+                const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+                const listElement = nodeElement.children[1];
+
+                if (listElement) {
+                    if (nodeElement) {
+                        nodeElement.tabIndex = '-1';
+                    }
+
+                    //skip droppoint
+                    const childElement = props.dragdropScope ? listElement.children[1] : listElement.children[0];
+
+                    if (childElement) {
+                        childElement.tabIndex = '0';
+                        childElement.focus();
+                    }
+                }
+
+                childFocusEvent.current = null;
+            }
+        }, [expandedKeys]);
+
+        React.useEffect(() => {
+            if (props.filter) _filter();
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [filteredValue, props.value, props.filter]);
+
+        const onDragStart = (event) => {
+            dragState.current = {
+                path: event.path,
+                index: event.index
+            };
+        };
+
+        const onDragEnd = () => {
+            dragState.current = null;
+        };
+
+        /**
+         * Deep copy a value. If the value has a data property, it will be shallow copied.
+         * Values that are not plain objects or arrays are returned as-is.
+         */
+        const cloneValue = (value) => {
+            if (Array.isArray(value)) {
+                return value.map(cloneValue);
+            } else if (!!value && Object.getPrototypeOf(value) === Object.prototype) {
+                const result = {};
+
+                // Leave data property alone and clone children
+                for (let key in value) {
+                    if (key !== 'data') {
+                        result[key] = cloneValue(value[key]);
+                    } else {
+                        result[key] = value[key];
+                    }
+                }
+
+                return result;
+            }
+
+            return value;
+        };
+
+        const onDrop = (event) => {
+            if (validateDropNode(dragState.current?.path, event.path)) {
+                const value = cloneValue(getRootNode());
+                let dragPaths = dragState.current.path.split('-');
+
+                dragPaths.pop();
+
+                let dragNodeParent = findNode(value, dragPaths);
+                let dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
+                let dropNode = findNode(value, event.path.split('-'));
+
+                if (dropNode.children) {
+                    dropNode.children.push(dragNode);
+                } else {
+                    dropNode.children = [dragNode];
+                }
+
+                if (dragNodeParent) {
+                    dragNodeParent.children.splice(dragState.current.index, 1);
+                } else {
+                    value.splice(dragState.current.index, 1);
+                }
+
+                if (props.onDragDrop) {
+                    props.onDragDrop({
+                        originalEvent: event.originalEvent,
+                        value: value,
+                        dragNode,
+                        dropNode,
+                        dropIndex: event.index
+                    });
+                }
+            }
+        };
+
+        const onDropPoint = (event) => {
+            if (validateDropPoint(event)) {
+                const value = cloneValue(getRootNode());
+                let dragPaths = dragState.current.path.split('-');
+
+                dragPaths.pop();
+
+                let dropPaths = event.path.split('-');
+
+                dropPaths.pop();
+
+                let dragNodeParent = findNode(value, dragPaths);
+                let dropNodeParent = findNode(value, dropPaths);
+                let dragNode = dragNodeParent ? dragNodeParent.children[dragState.current.index] : value[dragState.current.index];
+                let siblings = areSiblings(dragState.current.path, event.path);
+
+                if (dragNodeParent) {
+                    dragNodeParent.children.splice(dragState.current.index, 1);
+                } else {
+                    value.splice(dragState.current.index, 1);
+                }
+
+                if (event.position < 0) {
+                    let dropIndex = siblings ? (dragState.current.index > event.index ? event.index : event.index - 1) : event.index;
+
+                    if (dropNodeParent) {
+                        dropNodeParent.children.splice(dropIndex, 0, dragNode);
+                    } else {
+                        value.splice(dropIndex, 0, dragNode);
+                    }
+                } else if (dropNodeParent) {
+                    dropNodeParent.children.push(dragNode);
+                } else {
+                    value.push(dragNode);
+                }
+
+                if (props.onDragDrop) {
+                    props.onDragDrop({
+                        originalEvent: event.originalEvent,
+                        value: value,
+                        dragNode,
+                        dropNode: dropNodeParent,
+                        dropIndex: event.index
+                    });
+                }
+            }
+        };
+
+        const validateDrop = (dragPath, dropPath) => {
+            if (!dragPath) {
+                return false;
+            }
+
+            //same node
+            if (dragPath === dropPath) {
+                return false;
+            }
+
+            //parent dropped on an descendant
+            if (dropPath.indexOf(dragPath) === 0) {
+                return false;
+            }
+
+            return true;
+        };
+
+        const validateDropNode = (dragPath, dropPath) => {
+            let _validateDrop = validateDrop(dragPath, dropPath);
+
+            if (_validateDrop) {
+                //child dropped on parent
+                if (dragPath.indexOf('-') > 0 && dragPath.substring(0, dragPath.lastIndexOf('-')) === dropPath) {
+                    return false;
+                }
+
+                return true;
+            }
+
+            return false;
+        };
+
+        const validateDropPoint = (event) => {
+            let _validateDrop = validateDrop(dragState.current?.path, event.path);
+
+            if (_validateDrop) {
+                //child dropped to next sibling's drop point
+                if (event.position === -1 && areSiblings(dragState.current.path, event.path) && dragState.current.index + 1 === event.index) {
+                    return false;
+                }
+
+                return true;
+            }
+
+            return false;
+        };
+
+        const areSiblings = (path1, path2) => {
+            if (path1.length === 1 && path2.length === 1) {
+                return true;
+            }
+
+            return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
+        };
+
+        const findNode = (value, path) => {
+            if (path.length === 0) {
+                return null;
+            }
+
+            const index = parseInt(path[0], 10);
+            const nextSearchRoot = value.children ? value.children[index] : value[index];
+
+            if (path.length === 1) {
+                return nextSearchRoot;
+            }
+
+            path.shift();
+
+            return findNode(nextSearchRoot, path);
+        };
+
+        const isNodeLeaf = (node) => {
+            return node.leaf === false ? false : !(node.children && node.children.length);
+        };
+
+        const onFilterInputKeyDown = (event) => {
+            //enter
+            if (event.which === 13) {
+                event.preventDefault();
+            }
+        };
+
+        const onFilterInputChange = (event) => {
+            filterChanged.current = true;
+            const value = event.target.value;
+
+            if (props.onFilterValueChange) {
+                props.onFilterValueChange({
+                    originalEvent: event,
+                    value
+                });
+            } else {
+                setFilterValueState(value);
+            }
+        };
+
+        const filter = (value) => {
+            setFilterValueState(ObjectUtils.isNotEmpty(value) ? value : '');
+        };
+
+        const childNodeFocus = (node) => {};
+
+        const _filter = () => {
+            if (!filterChanged.current) return;
+
+            if (ObjectUtils.isEmpty(filteredValue)) {
+                filteredNodes.current = props.value;
+            } else {
+                filteredNodes.current = [];
+
+                const searchFields = props.filterBy.split(',');
+                const filterText = filteredValue.toLocaleLowerCase(props.filterLocale);
+                const isStrictMode = props.filterMode === 'strict';
+
+                for (let node of props.value) {
+                    let copyNode = { ...node };
+                    let paramsWithoutNode = { searchFields, filterText, isStrictMode };
+
+                    if (
+                        (isStrictMode && (findFilteredNodes(copyNode, paramsWithoutNode) || isFilterMatched(copyNode, paramsWithoutNode))) ||
+                        (!isStrictMode && (isFilterMatched(copyNode, paramsWithoutNode) || findFilteredNodes(copyNode, paramsWithoutNode)))
+                    ) {
+                        filteredNodes.current.push(copyNode);
+                    }
+                }
+            }
+
+            onToggle({
+                originalEvent: null,
+                value: currentFilterExpandedKeys.current,
+                navigateFocusToChild: false
+            });
+
+            currentFilterExpandedKeys.current = {};
+            forceRender((x) => !x);
+            filterChanged.current = false;
+        };
+
+        const findFilteredNodes = (node, paramsWithoutNode) => {
+            if (node) {
+                let matched = false;
+
+                if (node.children) {
+                    let childNodes = [...node.children];
+
+                    node.children = [];
+
+                    for (let childNode of childNodes) {
+                        let copyChildNode = { ...childNode };
+
+                        if (isFilterMatched(copyChildNode, paramsWithoutNode)) {
+                            matched = true;
+                            node.children.push(copyChildNode);
+                        }
+                    }
+                }
+
+                if (matched) {
+                    currentFilterExpandedKeys.current[node.key] = true;
+
+                    return true;
+                }
+            }
+        };
+
+        const isFilterMatched = (node, { searchFields, filterText, isStrictMode }) => {
+            let matched = false;
+
+            for (let field of searchFields) {
+                let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(props.filterLocale);
+
+                if (fieldValue.indexOf(filterText) > -1) {
+                    matched = true;
+                }
+            }
+
+            if (!matched || (isStrictMode && !isNodeLeaf(node))) {
+                matched = findFilteredNodes(node, { searchFields, filterText, isStrictMode }) || matched;
+            }
+
+            return matched;
+        };
+
+        const resetFilter = () => {
+            setFilterValueState('');
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            filter,
+            getElement: () => elementRef.current
+        }));
+
+        const createRootChild = (node, index, last) => {
+            return (
+                <UITreeNode
+                    hostName="Tree"
+                    key={node.key || node.label}
+                    node={node}
+                    level={props.level + 1}
+                    originalOptions={props.value}
+                    index={index}
+                    last={last}
+                    path={String(index)}
+                    checkboxIcon={props.checkboxIcon}
+                    collapseIcon={props.collapseIcon}
+                    contextMenuSelectionKey={props.contextMenuSelectionKey}
+                    cx={cx}
+                    disabled={props.disabled}
+                    dragdropScope={props.dragdropScope}
+                    expandIcon={props.expandIcon}
+                    expandedKeys={expandedKeys}
+                    isFiltering={isFiltering}
+                    isNodeLeaf={isNodeLeaf}
+                    metaKeySelection={props.metaKeySelection}
+                    nodeTemplate={props.nodeTemplate}
+                    onClick={props.onNodeClick}
+                    onCollapse={props.onCollapse}
+                    onContextMenu={props.onContextMenu}
+                    onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                    onDoubleClick={props.onNodeDoubleClick}
+                    onDragEnd={onDragEnd}
+                    onDragStart={onDragStart}
+                    onDrop={onDrop}
+                    onDropPoint={onDropPoint}
+                    onExpand={props.onExpand}
+                    onSelect={props.onSelect}
+                    onSelectionChange={props.onSelectionChange}
+                    onToggle={onToggle}
+                    onUnselect={props.onUnselect}
+                    propagateSelectionDown={props.propagateSelectionDown}
+                    propagateSelectionUp={props.propagateSelectionUp}
+                    ptm={ptm}
+                    selectionKeys={props.selectionKeys}
+                    selectionMode={props.selectionMode}
+                    togglerTemplate={props.togglerTemplate}
+                    isUnstyled={isUnstyled}
+                />
+            );
+        };
+
+        const createEmptyMessageNode = () => {
+            const emptyMessageProps = mergeProps(
+                {
+                    className: classNames(props.contentClassName, cx('emptyMessage')),
+                    role: 'treeitem'
+                },
+                ptm('emptyMessage')
+            );
+
+            const message = ObjectUtils.getJSXElement(props.emptyMessage, props) || localeOption('emptyMessage');
+
+            return (
+                <li {...emptyMessageProps}>
+                    <span className="p-treenode-content">{message}</span>
+                </li>
+            );
+        };
+
+        const createRootChildrenContainer = (children) => {
+            const containerProps = mergeProps(
+                {
+                    className: classNames(props.contentClassName, cx('container')),
+                    role: 'tree',
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
+                    style: props.contentStyle,
+                    ...ariaProps
+                },
+                ptm('container')
+            );
+
+            return <ul {...containerProps}>{children}</ul>;
+        };
+
+        const createRootChildren = (value) => {
+            return value.map((node, index) => createRootChild(node, index, index === value.length - 1));
+        };
+
+        const createModel = () => {
+            if (props.value) {
+                if (props.filter) filterChanged.current = true;
+
+                const value = getRootNode();
+
+                if (value.length > 0) {
+                    const rootNodes = createRootChildren(value);
+
+                    return createRootChildrenContainer(rootNodes);
+                }
+
+                const emptyMessageNode = createEmptyMessageNode();
+
+                return createRootChildrenContainer(emptyMessageNode);
+            }
+
+            return null;
+        };
+
+        const createLoader = () => {
+            if (props.loading) {
+                const loadingIconProps = mergeProps(
+                    {
+                        className: cx('loadingIcon')
+                    },
+                    ptm('loadingIcon')
+                );
+                const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
+                const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+
+                const loadingOverlayProps = mergeProps(
+                    {
+                        className: cx('loadingOverlay')
+                    },
+                    ptm('loadingOverlay')
+                );
+
+                return <div {...loadingOverlayProps}>{loadingIcon}</div>;
+            }
+
+            return null;
+        };
+
+        const createFilter = () => {
+            if (props.filter) {
+                let value = props.onFilterValueChange ? props.filterValue : filterValue;
+
+                value = ObjectUtils.isNotEmpty(value) ? value : '';
+                const searchIconProps = mergeProps(
+                    {
+                        className: cx('searchIcon')
+                    },
+                    ptm('searchIcon')
+                );
+                const icon = props.filterIcon || <SearchIcon {...searchIconProps} />;
+                const filterIcon = IconUtils.getJSXIcon(icon, { ...searchIconProps }, { props });
+
+                const filterContainerProps = mergeProps(
+                    {
+                        className: cx('filterContainer')
+                    },
+                    ptm('filterContainer')
+                );
+
+                const inputProps = mergeProps(
+                    {
+                        type: 'text',
+                        value: value,
+                        autoComplete: 'off',
+                        className: cx('input'),
+                        placeholder: props.filterPlaceholder,
+                        'aria-label': props.filterPlaceholder,
+                        onKeyDown: onFilterInputKeyDown,
+                        onChange: onFilterInputChange,
+                        disabled: props.disabled
+                    },
+                    ptm('input')
+                );
+
+                let content = (
+                    <div {...filterContainerProps}>
+                        <input {...inputProps} />
+                        {filterIcon}
+                    </div>
+                );
+
+                if (props.filterTemplate) {
+                    const defaultContentOptions = {
+                        className: 'p-tree-filter-container',
+                        element: content,
+                        filterOptions: filterOptions,
+                        filterInputKeyDown: onFilterInputKeyDown,
+                        filterInputChange: onFilterInputChange,
+                        filterIconClassName: 'p-dropdown-filter-icon',
+                        props
+                    };
+
+                    content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+                }
+
+                return <>{content}</>;
+            }
+
+            return null;
+        };
+
+        const createHeader = () => {
+            if (props.showHeader) {
+                const filterElement = createFilter();
+                let content = filterElement;
+
+                if (props.header) {
+                    const defaultContentOptions = {
+                        filterContainerClassName: 'p-tree-filter-container',
+                        filterIconClassName: 'p-tree-filter-icon',
+                        filterInput: {
+                            className: 'p-tree-filter p-inputtext p-component',
+                            onKeyDown: onFilterInputKeyDown,
+                            onChange: onFilterInputChange
+                        },
+                        filterElement,
+                        element: content,
+                        props
+                    };
+
+                    content = ObjectUtils.getJSXElement(props.header, defaultContentOptions);
+                }
+
+                const headerProps = mergeProps(
+                    {
+                        className: cx('header')
+                    },
+                    ptm('header')
+                );
+
+                return <div {...headerProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const createFooter = () => {
+            const content = ObjectUtils.getJSXElement(props.footer, props);
+
+            const footerProps = mergeProps(
+                {
+                    className: cx('footer')
+                },
+                ptm('footer')
+            );
+
+            return <div {...footerProps}>{content}</div>;
+        };
+
+        const otherProps = TreeBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const loader = createLoader();
+        const content = createModel();
+        const header = createHeader();
+        const footer = createFooter();
+
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.className, cx('root')),
+                style: props.style,
+                id: props.id
+            },
+            TreeBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {loader}
+                {header}
+                {content}
+                {footer}
+            </div>
+        );
+    })
+);
+
+Tree.displayName = 'Tree';
diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js
new file mode 100644
index 0000000000..33c24ee0b1
--- /dev/null
+++ b/components/lib/tree/TreeBase.js
@@ -0,0 +1,170 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props }) =>
+        classNames('p-tree p-component', {
+            'p-tree-selectable': props.selectionMode,
+            'p-tree-loading': props.loading,
+            'p-disabled': props.disabled
+        }),
+    loadingOverlay: 'p-tree-loading-overlay p-component-overlay',
+    loadingIcon: 'p-tree-loading-icon',
+    filterContainer: 'p-tree-filter-container',
+    input: 'p-tree-filter p-inputtext p-component',
+    searchIcon: 'p-tree-filter-icon',
+    container: 'p-tree-container',
+    node: ({ leaf }) =>
+        classNames('p-treenode', {
+            'p-treenode-leaf': leaf
+        }),
+    content: ({ nodeProps: props, checked, selected, isCheckboxSelectionMode }) =>
+        classNames('p-treenode-content', {
+            'p-treenode-selectable': props.selectionMode && props.node.selectable !== false,
+            'p-highlight': isCheckboxSelectionMode() ? checked : selected,
+            'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
+            'p-disabled': props.disabled
+        }),
+    toggler: 'p-tree-toggler p-link',
+    togglerIcon: 'p-tree-toggler-icon',
+    nodeCheckbox: ({ partialChecked }) => classNames({ 'p-indeterminate': partialChecked }),
+    nodeIcon: 'p-treenode-icon',
+    label: 'p-treenode-label',
+    subgroup: 'p-treenode-children',
+    checkIcon: 'p-checkbox-icon',
+    emptyMessage: 'p-treenode p-tree-empty-message',
+    droppoint: 'p-treenode-droppoint',
+    header: 'p-tree-header',
+    footer: 'p-tree-footer'
+};
+
+const styles = `
+    .p-tree-container {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        overflow: auto;
+    }
+
+    .p-treenode-children {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+    }
+
+    .p-treenode-selectable {
+        cursor: pointer;
+        user-select: none;
+    }
+
+    .p-tree-toggler {
+        cursor: pointer;
+        user-select: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        position: relative;
+    }
+
+    .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+        visibility: hidden;
+    }
+
+    .p-treenode-content {
+        display: flex;
+        align-items: center;
+    }
+
+    .p-tree-filter {
+        width: 100%;
+    }
+
+    .p-tree-filter-container {
+        position: relative;
+        display: block;
+        width: 100%;
+    }
+
+    .p-tree-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+
+    .p-tree-loading {
+        position: relative;
+        min-height: 4rem;
+    }
+
+    .p-tree .p-tree-loading-overlay {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+`;
+
+export const TreeBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'Tree',
+        __parentMetadata: null,
+        id: null,
+        value: null,
+        ariaLabel: null,
+        ariaLabelledBy: null,
+        checkboxIcon: null,
+        className: null,
+        collapseIcon: null,
+        contentClassName: null,
+        contentStyle: null,
+        contextMenuSelectionKey: null,
+        disabled: false,
+        dragdropScope: null,
+        emptyMessage: null,
+        expandIcon: null,
+        expandedKeys: null,
+        filter: false,
+        filterBy: 'label',
+        filterDelay: 300,
+        filterIcon: null,
+        filterLocale: undefined,
+        filterMode: 'lenient',
+        filterPlaceholder: null,
+        filterTemplate: null,
+        filterValue: null,
+        footer: null,
+        header: null,
+        level: 0,
+        loading: false,
+        loadingIcon: null,
+        metaKeySelection: false,
+        nodeTemplate: null,
+        onCollapse: null,
+        onContextMenu: null,
+        onContextMenuSelectionChange: null,
+        onDragDrop: null,
+        onExpand: null,
+        onFilterValueChange: null,
+        onNodeClick: null,
+        onNodeDoubleClick: null,
+        onSelect: null,
+        onSelectionChange: null,
+        onToggle: null,
+        onUnselect: null,
+        propagateSelectionDown: true,
+        propagateSelectionUp: true,
+        selectionKeys: null,
+        selectionMode: null,
+        showHeader: true,
+        style: null,
+        togglerTemplate: null,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js
new file mode 100644
index 0000000000..2c641292e8
--- /dev/null
+++ b/components/lib/tree/UITreeNode.js
@@ -0,0 +1,1005 @@
+import * as React from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
+import { useMergeProps } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { MinusIcon } from '../icons/minus';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+
+export const UITreeNode = React.memo((props) => {
+    const contentRef = React.useRef(null);
+    const elementRef = React.useRef(null);
+    const nodeTouched = React.useRef(false);
+    const mergeProps = useMergeProps();
+    const isLeaf = props.isNodeLeaf(props.node);
+    const label = props.node.label;
+    const isFiltering = props.isFiltering;
+    const expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || (!isFiltering && props.node.expanded);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            context: {
+                selected: !isCheckboxSelectionMode() ? isSelected() : false,
+                expanded: expanded || false,
+                checked: isCheckboxSelectionMode() ? isChecked() : false,
+                leaf: isLeaf
+            }
+        });
+    };
+
+    const expand = (event, navigateFocusToChild = false) => {
+        let expandedKeys = props.expandedKeys ? { ...props.expandedKeys } : {};
+
+        expandedKeys[props.node.key] = true;
+
+        props.onToggle({
+            originalEvent: event,
+            value: expandedKeys,
+            navigateFocusToChild
+        });
+
+        invokeToggleEvents(event, true);
+    };
+
+    const collapse = (event) => {
+        let expandedKeys = { ...props.expandedKeys };
+
+        delete expandedKeys[props.node.key];
+
+        props.onToggle({
+            originalEvent: event,
+            value: expandedKeys
+        });
+
+        invokeToggleEvents(event, false);
+    };
+
+    const onTogglerClick = (event) => {
+        if (props.disabled) {
+            return;
+        }
+
+        expanded ? collapse(event) : expand(event, false);
+
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const invokeToggleEvents = (event, isExpanded) => {
+        if (isExpanded) {
+            if (props.onExpand) {
+                props.onExpand({
+                    originalEvent: event,
+                    node: props.node
+                });
+            }
+        } else if (props.onCollapse) {
+            props.onCollapse({
+                originalEvent: event,
+                node: props.node
+            });
+        }
+    };
+
+    const findNextNonDroppointSibling = (nodeElement) => {
+        const nextNodeSibling = nodeElement.nextSibling;
+
+        if (nextNodeSibling) {
+            const isNextDropPoint = nextNodeSibling.getAttribute('data-pc-section') === 'droppoint';
+
+            if (isNextDropPoint) {
+                //skip drop point and return next elemnt
+                if (nextNodeSibling.nextElementSibling) {
+                    return nextNodeSibling.nextElementSibling;
+                } else {
+                    //nothing after droppoint go outside
+                    return null;
+                }
+            }
+
+            return nextNodeSibling;
+        }
+
+        return null;
+    };
+
+    const findNextSiblingOfAncestor = (nodeElement) => {
+        const parentNodeElement = getParentNodeElement(nodeElement);
+
+        return parentNodeElement ? findNextNonDroppointSibling(parentNodeElement) || findNextSiblingOfAncestor(parentNodeElement) : null;
+    };
+
+    const findLastVisibleDescendant = (nodeElement) => {
+        const childrenListElement = nodeElement.children[1];
+
+        if (childrenListElement) {
+            //skip droppoint
+            const offset = props.dragdropScope ? 2 : 1;
+            const lastChildElement = childrenListElement.children[childrenListElement.children.length - offset];
+
+            return findLastVisibleDescendant(lastChildElement);
+        }
+
+        return nodeElement;
+    };
+
+    const getParentNodeElement = (nodeElement) => {
+        const parentNodeElement = nodeElement.parentElement.parentElement;
+
+        return DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
+    };
+
+    const focusNode = (element) => {
+        element && element.focus();
+    };
+
+    const onClick = (event) => {
+        if (props.onClick) {
+            props.onClick({
+                originalEvent: event,
+                node: props.node
+            });
+        }
+
+        const targetNode = event.target.nodeName;
+
+        if (props.disabled || targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable')) {
+            return;
+        }
+
+        if (props.selectionMode && props.node.selectable !== false) {
+            let selectionKeys;
+
+            if (isCheckboxSelectionMode()) {
+                const checked = isChecked();
+
+                selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
+
+                if (checked) {
+                    if (props.propagateSelectionDown) {
+                        propagateDown(props.node, false, selectionKeys);
+                    } else {
+                        delete selectionKeys[props.node.key];
+                    }
+
+                    if (props.propagateSelectionUp && props.onPropagateUp) {
+                        props.onPropagateUp({
+                            originalEvent: event,
+                            check: false,
+                            selectionKeys: selectionKeys
+                        });
+                    }
+
+                    if (props.onUnselect) {
+                        props.onUnselect({
+                            originalEvent: event,
+                            node: props.node
+                        });
+                    }
+                } else {
+                    if (props.propagateSelectionDown) {
+                        propagateDown(props.node, true, selectionKeys);
+                    } else {
+                        selectionKeys[props.node.key] = { checked: true };
+                    }
+
+                    if (props.propagateSelectionUp && props.onPropagateUp) {
+                        props.onPropagateUp({
+                            originalEvent: event,
+                            check: true,
+                            selectionKeys: selectionKeys
+                        });
+                    }
+
+                    if (props.onSelect) {
+                        props.onSelect({
+                            originalEvent: event,
+                            node: props.node
+                        });
+                    }
+                }
+            } else {
+                const selected = isSelected();
+                const metaSelection = nodeTouched.current ? false : props.metaKeySelection;
+
+                if (metaSelection) {
+                    let metaKey = event.metaKey || event.ctrlKey;
+
+                    if (selected && metaKey) {
+                        if (isSingleSelectionMode()) {
+                            selectionKeys = null;
+                        } else {
+                            selectionKeys = { ...props.selectionKeys };
+                            delete selectionKeys[props.node.key];
+                        }
+
+                        if (props.onUnselect) {
+                            props.onUnselect({
+                                originalEvent: event,
+                                node: props.node
+                            });
+                        }
+                    } else {
+                        if (isSingleSelectionMode()) {
+                            selectionKeys = props.node.key;
+                        } else if (isMultipleSelectionMode()) {
+                            selectionKeys = !metaKey ? {} : props.selectionKeys ? { ...props.selectionKeys } : {};
+                            selectionKeys[props.node.key] = true;
+                        }
+
+                        if (props.onSelect) {
+                            props.onSelect({
+                                originalEvent: event,
+                                node: props.node
+                            });
+                        }
+                    }
+                } else if (isSingleSelectionMode()) {
+                    if (selected) {
+                        selectionKeys = null;
+
+                        if (props.onUnselect) {
+                            props.onUnselect({
+                                originalEvent: event,
+                                node: props.node
+                            });
+                        }
+                    } else {
+                        selectionKeys = props.node.key;
+
+                        if (props.onSelect) {
+                            props.onSelect({
+                                originalEvent: event,
+                                node: props.node
+                            });
+                        }
+                    }
+                } else if (selected) {
+                    selectionKeys = { ...props.selectionKeys };
+                    delete selectionKeys[props.node.key];
+
+                    if (props.onUnselect) {
+                        props.onUnselect({
+                            originalEvent: event,
+                            node: props.node
+                        });
+                    }
+                } else {
+                    selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
+                    selectionKeys[props.node.key] = true;
+
+                    if (props.onSelect) {
+                        props.onSelect({
+                            originalEvent: event,
+                            node: props.node
+                        });
+                    }
+                }
+            }
+
+            if (props.onSelectionChange) {
+                props.onSelectionChange({
+                    originalEvent: event,
+                    value: selectionKeys
+                });
+            }
+        }
+
+        nodeTouched.current = false;
+    };
+
+    const onDoubleClick = (event) => {
+        if (props.onDoubleClick) {
+            props.onDoubleClick({
+                originalEvent: event,
+                node: props.node
+            });
+        }
+    };
+
+    const onRightClick = (event) => {
+        if (props.disabled) {
+            return;
+        }
+
+        DomHandler.clearSelection();
+
+        if (props.onContextMenuSelectionChange) {
+            props.onContextMenuSelectionChange({
+                originalEvent: event,
+                value: props.node.key
+            });
+        }
+
+        if (props.onContextMenu) {
+            props.onContextMenu({
+                originalEvent: event,
+                node: props.node
+            });
+        }
+    };
+
+    const onKeyDown = (event) => {
+        if (!isSameNode(event)) {
+            return;
+        }
+
+        switch (event.code) {
+            case 'Tab':
+                onTabKey(event);
+
+                break;
+
+            case 'ArrowDown':
+                onArrowDown(event);
+
+                break;
+
+            case 'ArrowUp':
+                onArrowUp(event);
+
+                break;
+
+            case 'ArrowRight':
+                onArrowRight(event);
+
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeft(event);
+
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+                onEnterKey(event);
+
+                break;
+
+            case 'Space':
+                if (!['INPUT'].includes(event.target.nodeName)) {
+                    onEnterKey(event);
+                }
+
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    const onArrowDown = (event) => {
+        const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+        const listElement = nodeElement.children[1];
+        const nextElement = getNextElement(nodeElement);
+
+        if (listElement) {
+            focusRowChange(nodeElement, props.dragdropScope ? listElement.children[1] : listElement.children[0]);
+        } else if (nextElement) {
+            focusRowChange(nodeElement, nextElement);
+        } else {
+            let nextSiblingAncestor = findNextSiblingOfAncestor(nodeElement);
+
+            if (nextSiblingAncestor) {
+                focusRowChange(nodeElement, nextSiblingAncestor);
+            }
+        }
+
+        event.preventDefault();
+    };
+
+    const getPreviousElement = (element) => {
+        const prev = element.previousElementSibling;
+
+        if (prev) {
+            return !props.dragdropScope ? prev : prev.previousElementSibling;
+        }
+
+        return null;
+    };
+
+    const getNextElement = (element) => {
+        const next = element.nextElementSibling;
+
+        if (next) {
+            return !props.dragdropScope ? next : next.nextElementSibling;
+        }
+
+        return null;
+    };
+
+    const onArrowUp = (event) => {
+        const nodeElement = event.target;
+        const previous = getPreviousElement(nodeElement);
+
+        if (previous) {
+            focusRowChange(nodeElement, previous, findLastVisibleDescendant(previous));
+        } else {
+            let parentNodeElement = getParentNodeElement(nodeElement);
+
+            if (parentNodeElement) {
+                focusRowChange(nodeElement, parentNodeElement);
+            }
+        }
+
+        event.preventDefault();
+    };
+
+    const onArrowRight = (event) => {
+        if (isLeaf || expanded) {
+            return;
+        }
+
+        event.currentTarget.tabIndex = -1;
+
+        expand(event, true);
+    };
+
+    const onArrowLeft = (event) => {
+        const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]');
+
+        if (props.level === 0 && !expanded) {
+            return false;
+        }
+
+        if (expanded && !isLeaf) {
+            togglerElement.click();
+
+            return false;
+        }
+
+        const target = findBeforeClickableNode(event.currentTarget);
+
+        if (target) {
+            focusRowChange(event.currentTarget, target);
+        }
+    };
+
+    const onEnterKey = (event) => {
+        setTabIndexForSelectionMode(event, nodeTouched.current);
+        onClick(event);
+
+        event.preventDefault();
+    };
+
+    const onTabKey = () => {
+        setAllNodesTabIndexes();
+    };
+
+    const setAllNodesTabIndexes = () => {
+        const nodes = DomHandler.find(contentRef.current.closest('[data-pc-section="container"]'), '[role="treeitem"]');
+
+        const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
+
+        [...nodes].forEach((node) => {
+            node.tabIndex = -1;
+        });
+
+        if (hasSelectedNode) {
+            const selectedNodes = [...nodes].filter((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
+
+            selectedNodes[0].tabIndex = 0;
+
+            return;
+        }
+
+        [...nodes][0].tabIndex = 0;
+    };
+
+    const setTabIndexForSelectionMode = (event, nodeTouched) => {
+        if (props.selectionMode !== null) {
+            const elements = [...DomHandler.find(elementRef.current.parentElement, '[role="treeitem"]')];
+
+            event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
+
+            if (elements.every((element) => element.tabIndex === -1)) {
+                elements[0].tabIndex = 0;
+            }
+        }
+    };
+
+    const focusRowChange = (firstFocusableRow, currentFocusedRow, lastVisibleDescendant) => {
+        firstFocusableRow.tabIndex = '-1';
+        currentFocusedRow.tabIndex = '0';
+
+        focusNode(lastVisibleDescendant || currentFocusedRow);
+    };
+
+    const findBeforeClickableNode = (node) => {
+        const parentListElement = node.closest('ul').closest('li');
+
+        if (parentListElement) {
+            const prevNodeButton = DomHandler.findSingle(parentListElement, 'button');
+
+            if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
+                return parentListElement;
+            }
+
+            return findBeforeClickableNode(node.previousElementSibling);
+        }
+
+        return null;
+    };
+
+    const propagateUp = (event) => {
+        let check = event.check;
+        let selectionKeys = event.selectionKeys;
+        let checkedChildCount = 0;
+
+        for (let child of props.node.children) {
+            if (selectionKeys[child.key] && selectionKeys[child.key].checked) {
+                checkedChildCount++;
+            }
+        }
+
+        const parentKey = props.node.key;
+        const children = ObjectUtils.findChildrenByKey(props.originalOptions, parentKey);
+
+        let isParentPartiallyChecked = children.some((ele) => ele.key in selectionKeys);
+        let isCompletelyChecked = children.every((ele) => ele.key in selectionKeys && selectionKeys[ele.key].checked);
+
+        if (isParentPartiallyChecked && !isCompletelyChecked) {
+            selectionKeys[parentKey] = { checked: false, partialChecked: true };
+        } else if (isCompletelyChecked) {
+            selectionKeys[parentKey] = { checked: true, partialChecked: false };
+        } else if (check) {
+            selectionKeys[parentKey] = { checked: false, partialChecked: false };
+        } else {
+            delete selectionKeys[parentKey];
+        }
+
+        if (props.propagateSelectionUp && props.onPropagateUp) {
+            props.onPropagateUp(event);
+        }
+    };
+
+    const propagateDown = (node, check, selectionKeys) => {
+        if (check) {
+            selectionKeys[node.key] = { checked: true, partialChecked: false };
+        } else {
+            delete selectionKeys[node.key];
+        }
+
+        if (node.children && node.children.length) {
+            for (let i = 0; i < node.children.length; i++) {
+                propagateDown(node.children[i], check, selectionKeys);
+            }
+        }
+    };
+
+    const isSelected = () => {
+        if (props.selectionMode && props.selectionKeys) {
+            return isSingleSelectionMode() ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
+        }
+
+        return false;
+    };
+
+    const isChecked = () => {
+        return (props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false) || false;
+    };
+
+    const isSameNode = (event) => {
+        return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
+    };
+
+    const isPartialChecked = () => {
+        return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
+    };
+
+    const isSingleSelectionMode = () => {
+        return props.selectionMode && props.selectionMode === 'single';
+    };
+
+    const isMultipleSelectionMode = () => {
+        return props.selectionMode && props.selectionMode === 'multiple';
+    };
+
+    const isCheckboxSelectionMode = () => {
+        return props.selectionMode && props.selectionMode === 'checkbox';
+    };
+
+    const onTouchEnd = () => {
+        nodeTouched.current = true;
+    };
+
+    const onDropPoint = (event, position) => {
+        event.preventDefault();
+
+        DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
+
+        if (props.onDropPoint) {
+            const dropIndex = position === -1 ? props.index : props.index + 1;
+
+            props.onDropPoint({
+                originalEvent: event,
+                path: props.path,
+                index: dropIndex,
+                position
+            });
+        }
+    };
+
+    const onDropPointDragOver = (event) => {
+        if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
+            event.dataTransfer.dropEffect = 'move';
+            event.preventDefault();
+        }
+    };
+
+    const onDropPointDragEnter = (event) => {
+        if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
+            DomHandler.addClass(event.target, 'p-treenode-droppoint-active');
+        }
+    };
+
+    const onDropPointDragLeave = (event) => {
+        if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase()) {
+            DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
+        }
+    };
+
+    const onDrop = (event) => {
+        if (props.dragdropScope && props.node.droppable !== false) {
+            DomHandler.removeClass(contentRef.current, 'p-treenode-dragover');
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (props.onDrop) {
+                props.onDrop({
+                    originalEvent: event,
+                    path: props.path,
+                    index: props.index
+                });
+            }
+        }
+    };
+
+    const onDragOver = (event) => {
+        if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
+            event.dataTransfer.dropEffect = 'move';
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
+    const onDragEnter = (event) => {
+        if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
+            DomHandler.addClass(contentRef.current, 'p-treenode-dragover');
+        }
+    };
+
+    const onDragLeave = (event) => {
+        if (props.dragdropScope && event.dataTransfer.types[1] === props.dragdropScope.toLocaleLowerCase() && props.node.droppable !== false) {
+            let rect = event.currentTarget.getBoundingClientRect();
+
+            if (event.nativeEvent.x > rect.left + rect.width || event.nativeEvent.x < rect.left || event.nativeEvent.y >= Math.floor(rect.top + rect.height) || event.nativeEvent.y < rect.top) {
+                DomHandler.removeClass(contentRef.current, 'p-treenode-dragover');
+            }
+        }
+    };
+
+    const onDragStart = (event) => {
+        event.dataTransfer.setData('text', props.dragdropScope);
+        event.dataTransfer.setData(props.dragdropScope, props.dragdropScope);
+
+        if (props.onDragStart) {
+            props.onDragStart({
+                originalEvent: event,
+                path: props.path,
+                index: props.index
+            });
+        }
+    };
+
+    const onDragEnd = (event) => {
+        if (props.onDragEnd) {
+            props.onDragEnd({
+                originalEvent: event
+            });
+        }
+    };
+
+    const createLabel = () => {
+        const labelProps = mergeProps(
+            {
+                className: cx('label')
+            },
+            getPTOptions('label')
+        );
+        let content = <span {...labelProps}>{label}</span>;
+
+        if (props.nodeTemplate) {
+            const defaultContentOptions = {
+                onTogglerClick: onTogglerClick,
+                className: 'p-treenode-label',
+                element: content,
+                props,
+                expanded
+            };
+
+            content = ObjectUtils.getJSXElement(props.nodeTemplate, props.node, defaultContentOptions);
+        }
+
+        return content;
+    };
+
+    const createCheckbox = () => {
+        if (isCheckboxSelectionMode() && props.node.selectable !== false) {
+            const checked = isChecked();
+            const partialChecked = isPartialChecked();
+            const checkboxIconProps = mergeProps({
+                className: cx('checkIcon')
+            });
+            const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon {...checkboxIconProps} /> : null;
+            const checkboxIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, props);
+            const checkboxProps = mergeProps(
+                {
+                    className: cx('nodeCheckbox', { partialChecked }),
+                    checked: checked || partialChecked,
+                    icon: checkboxIcon,
+                    tabIndex: -1,
+                    unstyled: props?.isUnstyled?.(),
+                    'data-p-checked': checked,
+                    'data-p-partialchecked': partialChecked,
+                    onChange: onClick
+                },
+                getPTOptions('nodeCheckbox')
+            );
+
+            return <Checkbox {...checkboxProps} />;
+        }
+
+        return null;
+    };
+
+    const createIcon = () => {
+        const icon = props.node.icon || (expanded ? props.node.expandedIcon : props.node.collapsedIcon);
+
+        if (icon) {
+            const nodeIconProps = mergeProps(
+                {
+                    className: classNames(icon, cx('nodeIcon'))
+                },
+                getPTOptions('nodeIcon')
+            );
+
+            return IconUtils.getJSXIcon(icon, { ...nodeIconProps }, { props });
+        }
+
+        return null;
+    };
+
+    const createToggler = () => {
+        const togglerIconProps = mergeProps(
+            {
+                className: cx('togglerIcon'),
+                'aria-hidden': true
+            },
+            getPTOptions('togglerIcon')
+        );
+        const icon = expanded ? props.collapseIcon || <ChevronDownIcon {...togglerIconProps} /> : props.expandIcon || <ChevronRightIcon {...togglerIconProps} />;
+        const togglerIcon = IconUtils.getJSXIcon(icon, { ...togglerIconProps }, { props, expanded });
+        const togglerProps = mergeProps(
+            {
+                type: 'button',
+                className: cx('toggler'),
+                tabIndex: -1,
+                'aria-hidden': false,
+                onClick: onTogglerClick
+            },
+            getPTOptions('toggler')
+        );
+        let content = (
+            <button {...togglerProps}>
+                {togglerIcon}
+                <Ripple />
+            </button>
+        );
+
+        if (props.togglerTemplate) {
+            const defaultContentOptions = {
+                onClick: onTogglerClick,
+                containerClassName: 'p-tree-toggler p-link',
+                iconClassName: 'p-tree-toggler-icon',
+                element: content,
+                props,
+                expanded
+            };
+
+            content = ObjectUtils.getJSXElement(props.togglerTemplate, props.node, defaultContentOptions);
+        }
+
+        return content;
+    };
+
+    const createDropPoint = (position) => {
+        if (props.dragdropScope) {
+            const droppointProps = mergeProps(
+                {
+                    className: cx('droppoint'),
+                    role: 'treeitem',
+                    onDrop: (event) => onDropPoint(event, position),
+                    onDragOver: onDropPointDragOver,
+                    onDragEnter: onDropPointDragEnter,
+                    onDragLeave: onDropPointDragLeave
+                },
+                getPTOptions('droppoint')
+            );
+
+            return <li {...droppointProps} />;
+        }
+
+        return null;
+    };
+
+    const createContent = () => {
+        const selected = isSelected();
+        const checked = isChecked();
+        const toggler = createToggler();
+        const checkbox = createCheckbox();
+        const icon = createIcon();
+        const label = createLabel();
+
+        const contentProps = mergeProps(
+            {
+                ref: contentRef,
+                className: classNames(
+                    props.node.className,
+                    cx('content', {
+                        checked,
+                        selected,
+                        nodeProps: props,
+                        isCheckboxSelectionMode
+                    })
+                ),
+                style: props.node.style,
+                onClick: onClick,
+                onDoubleClick: onDoubleClick,
+                onContextMenu: onRightClick,
+                onTouchEnd: onTouchEnd,
+                draggable: props.dragdropScope && props.node.draggable !== false && !props.disabled,
+                onDrop: onDrop,
+                onDragOver: onDragOver,
+                onDragEnter: onDragEnter,
+                onDragLeave: onDragLeave,
+                onDragStart: onDragStart,
+                onDragEnd: onDragEnd,
+                'data-p-highlight': isCheckboxSelectionMode() ? checked : selected
+            },
+            getPTOptions('content')
+        );
+
+        return (
+            <div {...contentProps}>
+                {toggler}
+                {checkbox}
+                {icon}
+                {label}
+            </div>
+        );
+    };
+
+    const createChildren = () => {
+        const subgroupProps = mergeProps(
+            {
+                className: cx('subgroup'),
+                role: 'group'
+            },
+            getPTOptions('subgroup')
+        );
+
+        if (ObjectUtils.isNotEmpty(props.node.children) && expanded) {
+            return (
+                <ul {...subgroupProps}>
+                    {props.node.children.map((childNode, index) => {
+                        return (
+                            <UITreeNode
+                                key={childNode.key || childNode.label}
+                                node={childNode}
+                                checkboxIcon={props.checkboxIcon}
+                                collapseIcon={props.collapseIcon}
+                                contextMenuSelectionKey={props.contextMenuSelectionKey}
+                                cx={cx}
+                                disabled={props.disabled}
+                                dragdropScope={props.dragdropScope}
+                                expandIcon={props.expandIcon}
+                                expandedKeys={props.expandedKeys}
+                                isFiltering={props.isFiltering}
+                                index={index}
+                                isNodeLeaf={props.isNodeLeaf}
+                                last={index === props.node.children.length - 1}
+                                metaKeySelection={props.metaKeySelection}
+                                nodeTemplate={props.nodeTemplate}
+                                onClick={props.onClick}
+                                onCollapse={props.onCollapse}
+                                onContextMenu={props.onContextMenu}
+                                onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                                onDoubleClick={props.onDoubleClick}
+                                onDragEnd={props.onDragEnd}
+                                onDragStart={props.onDragStart}
+                                onDrop={props.onDrop}
+                                onDropPoint={props.onDropPoint}
+                                onExpand={props.onExpand}
+                                onPropagateUp={propagateUp}
+                                onSelect={props.onSelect}
+                                onSelectionChange={props.onSelectionChange}
+                                onToggle={props.onToggle}
+                                onUnselect={props.onUnselect}
+                                originalOptions={props.originalOptions}
+                                parent={props.node}
+                                path={props.path + '-' + index}
+                                propagateSelectionDown={props.propagateSelectionDown}
+                                propagateSelectionUp={props.propagateSelectionUp}
+                                ptm={ptm}
+                                selectionKeys={props.selectionKeys}
+                                selectionMode={props.selectionMode}
+                                togglerTemplate={props.togglerTemplate}
+                            />
+                        );
+                    })}
+                </ul>
+            );
+        }
+
+        return null;
+    };
+
+    const createNode = () => {
+        const tabIndex = props.disabled || props.index !== 0 ? -1 : 0;
+        const selected = isSelected();
+        const checked = isChecked();
+
+        const content = createContent();
+        const children = createChildren();
+
+        const nodeProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(props.node.className, cx('node', { leaf: isLeaf })),
+                style: props.node.style,
+                tabIndex,
+                role: 'treeitem',
+                'aria-label': label,
+                'aria-level': props.level,
+                'aria-expanded': expanded,
+                'aria-checked': checked,
+                'aria-setsize': props.node.children ? props.node.children.length : 0,
+                'aria-posinset': props.index + 1,
+                onKeyDown: onKeyDown,
+                'aria-selected': checked || selected
+            },
+            getPTOptions('node')
+        );
+
+        return (
+            <li {...nodeProps}>
+                {content}
+                {children}
+            </li>
+        );
+    };
+
+    const node = createNode();
+
+    if (props.dragdropScope && !props.disabled && (!props.parent || props.parent.droppable !== false)) {
+        const beforeDropPoint = createDropPoint(-1);
+        const afterDropPoint = props.last ? createDropPoint(1) : null;
+
+        return (
+            <>
+                {beforeDropPoint}
+                {node}
+                {afterDropPoint}
+            </>
+        );
+    }
+
+    return node;
+});
+
+UITreeNode.displayName = 'UITreeNode';
diff --git a/src/components/tree/images/line.gif b/components/lib/tree/images/line.gif
similarity index 100%
rename from src/components/tree/images/line.gif
rename to components/lib/tree/images/line.gif
diff --git a/components/lib/tree/package.json b/components/lib/tree/package.json
new file mode 100644
index 0000000000..bbe04dd895
--- /dev/null
+++ b/components/lib/tree/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./tree.cjs.js",
+    "module": "./tree.esm.js",
+    "unpkg": "./tree.min.js",
+    "types": "./tree.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/tree/tree.d.ts b/components/lib/tree/tree.d.ts
new file mode 100644
index 0000000000..1566a76d76
--- /dev/null
+++ b/components/lib/tree/tree.d.ts
@@ -0,0 +1,708 @@
+/**
+ *
+ * Tree is used to display hierarchical data.
+ *
+ * [Live Demo](https://www.primereact.org/tree/)
+ *
+ * @module tree
+ *
+ */
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TreeNode } from '../treenode';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TreePassThroughType<T> = PassThroughType<T, TreePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreePassThroughMethodOptions {
+    props: TreeProps;
+    state: TreeState;
+    context: TreeContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeProps.pt}
+ */
+export interface TreePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: TreePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: TreePassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the search icon's DOM element.
+     */
+    searchIcon?: TreePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: TreePassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the node's DOM element.
+     */
+    node?: TreePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the toggler icon's DOM element.
+     */
+    togglerIcon?: TreePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the node checkbox's DOM element.
+     */
+    nodeCheckbox?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: TreePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the node icon's DOM element.
+     */
+    nodeIcon?: TreePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TreePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the subgroup's DOM element.
+     */
+    subgroup?: TreePassThroughType<React.HTMLAttributes<HTMLUListElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    footer?: TreePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    droppoint?: TreePassThroughType<React.HTMLAttributes<HTMLLIElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in Tree component.
+ */
+export interface TreeState {
+    /**
+     * Current expanded keys state.
+     */
+    expandedKeys: TreeExpandedKeysType;
+    /**
+     * Current filter value state as a string.
+     */
+    filterValue: string;
+}
+
+/**
+ * Defines current options in Tree component.
+ */
+export interface TreeContext {
+    /**
+     * Current expanded state of the node as a boolean.
+     * @defaultValue false
+     */
+    expanded: boolean;
+    /**
+     * Current selected state of the node as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+    /**
+     * Current checked state of the node as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Whether the node is a leaf node.
+     * @defaultValue false
+     */
+    leaf: boolean;
+}
+
+/**
+ * Custom tree header template options
+ */
+interface TreeHeaderTemplateOptions {
+    /**
+     * Style class of the filter container element.
+     */
+    filterContainerClassName: string;
+    /**
+     * Style class of the filter icon element.
+     */
+    filterIconClasssName: string;
+    /**
+     * The options for the filter input element.
+     */
+    filterInput: TreeFilterInputOptions;
+    /**
+     * The JSX element of the filter input.
+     */
+    filterElement: JSX.Element;
+    /**
+     * The JSX element of the tree header.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the tree header component.
+     */
+    props: TreeProps;
+}
+
+/**
+ * Custom tree filter input options
+ */
+interface TreeFilterInputOptions {
+    /**
+     * Style class of the tree filter input element.
+     */
+    className: string;
+    /**
+     * Callback function to be invoked when the keydown event.
+     * @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event.
+     */
+    onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
+    /**
+     * Callback function to be invoked when the change event.
+     * @param {React.KeyboardEvent<HTMLInputElement>} event - Browser event.
+     */
+    onChange(event: React.KeyboardEvent<HTMLInputElement>): void;
+}
+
+/**
+ * Custom tree node template options
+ */
+interface TreeNodeTemplateOptions {
+    /**
+     * Callback to invoke when the toggler button is clicked.
+     * @param {React.SyntheticEvent} event - Browser event
+     */
+    onTogglerClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the element.
+     */
+    className: string;
+    /**
+     * The JSX element that represents the tree node.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the Tree component.
+     */
+    props: TreeProps;
+    /**
+     * Whether the tree node is expanded or not.
+     */
+    expanded: boolean;
+}
+
+/**
+ * Custom tree toggler template options
+ */
+interface TreeTogglerTemplateOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the panels container.
+     */
+    containerClassName: string;
+    /**
+     * Icon classname.
+     */
+    iconClassName: string;
+    /**
+     * JSX element to be used as the template options.
+     */
+    element: JSX.Element;
+    /**
+     * The props of Tree component
+     */
+    props: TreeProps;
+    /**
+     * Whether the tree node is expanded or not.
+     */
+    expanded: boolean;
+}
+
+/**
+ * Custom tree multiple selection keys
+ */
+interface TreeMultipleSelectionKeys {
+    /**
+     * Extra options.
+     */
+    [key: string]: boolean;
+}
+
+/**
+ * Custom tree checkbox selection keys
+ */
+interface TreeCheckboxSelectionKeys {
+    /**
+     * Extra options.
+     */
+    [key: string]: TreeCheckboxSelectionKeyType;
+}
+
+/**
+ * Custom tree checkbox selection type
+ */
+interface TreeCheckboxSelectionKeyType {
+    /**
+     * Whether the checkbox is checked or not.
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is partially checked or not.
+     */
+    partialChecked?: boolean;
+}
+
+/**
+ * Custom tree expanded keys type
+ */
+interface TreeExpandedKeysType {
+    /**
+     * Extra options.
+     */
+    [key: string]: boolean;
+}
+
+/**
+ * Custom tree event.
+ * @see {@link TreeProps.onToggle}
+ * @event
+ */
+interface TreeExpandedEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Expanded node key.
+     */
+    value: TreeExpandedKeysType;
+}
+
+/**
+ * Custom tree event.
+ * @see {@link TreeProps.onSelectionChange},{@link TreeProps.onContextMenuSelectionChange}
+ * @event
+ */
+interface TreeSelectionEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected node key(s).
+     */
+    value: string | TreeMultipleSelectionKeys | TreeCheckboxSelectionKeys | null;
+}
+
+/**
+ * Custom tree event.
+ * @see {@link TreeProps.onSelect},{@link TreeProps.onUnselect},{@link TreeProps.onExpand},{@link TreeProps.onCollapse},{@link TreeProps.onContextMenu}
+ * @event
+ */
+export interface TreeEventNodeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Unselected node instance.
+     */
+    node: TreeNode;
+}
+
+/**
+ * Custom dragdrop event.
+ * @see {@link TreeProps.onDragDrop}
+ * @event
+ */
+interface TreeDragDropEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * New value after the dragdrop.
+     */
+    value: TreeNode[];
+    /**
+     * The node that is being dragged.
+     */
+    dragNode: TreeNode;
+    /**
+     * The node that is being dropped on.
+     */
+    dropNode: TreeNode;
+    /**
+     * The index of the drop.
+     */
+    dropIndex: number;
+}
+
+/**
+ * Custom filter value change event.
+ * @see {@link TreeProps.onFilterValueChange}
+ * @event
+ */
+interface TreeFilterValueChangeEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.FormEvent<HTMLInputElement>;
+    /**
+     * The filtered value.
+     */
+    value: string;
+}
+
+/**
+ * Custom click event
+ * @see {@link TreeProps.onNodeClick}
+ */
+interface TreeNodeClickEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * The current node
+     */
+    node: TreeNode;
+}
+
+/**
+ * Custom tree filter options
+ */
+interface TreeFilterOptions {
+    /**
+     * Used to filter options
+     * @param {KeyboardEvent} event - Browser event.
+     */
+    filter?: (event?: KeyboardEvent) => void;
+    /**
+     * Used to reset the filtered options
+     */
+    reset?: () => void;
+}
+
+/**
+ * Custom click event.
+ * @see {@link TreeProps.onNodeDoubleClick}
+ * @extends {TreeNodeClickEvent}
+ * @event
+ */
+interface TreeNodeDoubleClickEvent extends TreeNodeClickEvent {}
+
+/**
+ * Defines valid properties in TreeProps component.
+ * @group Properties
+ */
+export interface TreeProps {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * An array of treenodes.
+     */
+    value?: TreeNode[] | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Defines the selection mode, valid values "single", "multiple", and "checkbox".
+     */
+    selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
+    /**
+     * A single or an array of keys to control the selection state.
+     */
+    selectionKeys?: string | TreeMultipleSelectionKeys | TreeCheckboxSelectionKeys | null;
+    /**
+     * A single key to control the selection with the context menu.
+     */
+    contextMenuSelectionKey?: string | undefined;
+    /**
+     * An array of keys to represent the state of the tree expansion state in controlled mode.
+     */
+    expandedKeys?: TreeExpandedKeysType | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Inline style of the tree content.
+     */
+    contentStyle?: React.CSSProperties | undefined;
+    /**
+     * Style class of the tree content.
+     */
+    contentClassName?: string | undefined;
+    /**
+     * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @defaultValue true
+     */
+    metaKeySelection?: boolean | undefined;
+    /**
+     * Whether checkbox selections propagate to ancestor nodes.
+     * @defaultValue true
+     */
+    propagateSelectionUp?: boolean | undefined;
+    /**
+     * 	Whether checkbox selections propagate to descendant nodes.
+     * @defaultValue true
+     */
+    propagateSelectionDown?: boolean | undefined;
+    /**
+     * Whether to display loading indicator.
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Icon to display when tree is loading.
+     */
+    loadingIcon?: IconType<TreeProps> | undefined;
+    /**
+     * Icon to display in the checkbox.
+     */
+    checkboxIcon?: IconType<TreeProps> | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: IconType<TreeProps> | undefined;
+    /**
+     * Icon of an collapsed tab.
+     */
+    expandIcon?: IconType<TreeProps> | undefined;
+    /**
+     * Unique key to enable dragdrop functionality.
+     * @defaultValue false
+     */
+    dragdropScope?: string | undefined;
+    /**
+     * The template of header.
+     */
+    header?: React.ReactNode | ((options: TreeHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * The template of header.
+     */
+    footer?: React.ReactNode | ((props: TreeProps) => React.ReactNode);
+    /**
+     * Template of filter element.
+     */
+    filterTemplate?: React.ReactNode | ((options: TreeFilterOptions) => React.ReactNode);
+    /**
+     * Whether to show the header or not.
+     * @defaultValue true
+     */
+    showHeader?: boolean | undefined;
+    /**
+     * When specified, displays an input field to filter the items.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
+    /**
+     * Icon of the filter.
+     */
+    filterIcon?: IconType<TreeProps> | string;
+    /**
+     * When filtering is enabled, the value of input field. To control the value externally, use with onFilterValueChange.
+     */
+    filterValue?: string | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: string | undefined;
+    /**
+     * Mode for filtering valid values are "lenient" and "strict". Default is lenient.
+     * @defaultValue lenient
+     */
+    filterMode?: 'lenient' | 'strict' | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Template to display when filtering does not return any results.
+     * @defaultValue No results found
+     */
+    emptyMessage?: React.ReactNode | ((props: TreeProps) => React.ReactNode) | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Identifier of the underlying menu element.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Template of toggler element.
+     */
+    togglerTemplate?: React.ReactNode | ((node: TreeNode, options: TreeTogglerTemplateOptions) => React.ReactNode);
+    /**
+     * Template of node element.
+     * @defaultValue false
+     */
+    nodeTemplate?: React.ReactNode | ((node: TreeNode, options: TreeNodeTemplateOptions) => React.ReactNode);
+    /**
+     * Callback to invoke when selection changes.
+     * @param {TreeSelectionEvent} event - Custom select event.
+     */
+    onSelectionChange?(event: TreeSelectionEvent): void;
+    /**
+     * Callback to invoke when selection changes with a context menu.
+     * @param {TreeSelectionEvent} event - Custom select event.
+     */
+    onContextMenuSelectionChange?(event: TreeSelectionEvent): void;
+    /**
+     * Callback to invoke when a node is selected.
+     * @param {TreeEventNodeEvent} event - Custom node event.
+     */
+    onSelect?(event: TreeEventNodeEvent): void;
+    /**
+     * Callback to invoke when a node is unselected.
+     * @param {TreeEventNodeEvent} event - Custom node event.
+     */
+    onUnselect?(event: TreeEventNodeEvent): void;
+    /**
+     * Callback to invoke when a node is expanded.
+     * @param {TreeEventNodeEvent} event - Custom node event.
+     */
+    onExpand?(event: TreeEventNodeEvent): void;
+    /**
+     * Callback to invoke when a node is collapsed.
+     * @param {TreeEventNodeEvent} event - Custom node event.
+     */
+    onCollapse?(event: TreeEventNodeEvent): void;
+    /**
+     * Callback to invoke when a node is toggled.
+     * @param {TreeExpandedEvent} event - Custom expand event.
+     */
+    onToggle?(event: TreeExpandedEvent): void;
+    /**
+     * Callback to invoke when a node is selected.
+     * @param {TreeDragDropEvent} event - Custom dragdrop event.
+     */
+    onDragDrop?(event: TreeDragDropEvent): void;
+    /**
+     * Callback to invoke when a node is selected with a context menu.
+     * @param {TreeEventNodeEvent} event - Custom node event.
+     */
+    onContextMenu?(event: TreeEventNodeEvent): void;
+    /**
+     * Callback to invoke when filter value changes.
+     * @param {TreeFilterValueChangeEvent} event - Custom filter value change event.
+     */
+    onFilterValueChange?(event: TreeFilterValueChangeEvent): void;
+    /**
+     * Callback to invoke when the node is clicked.
+     * @param {TreeNodeClickEvent} event - Custom click event.
+     */
+    onNodeClick?(event: TreeNodeClickEvent): void;
+    /**
+     * Callback to invoke when the node is double-clicked.
+     * @param {TreeNodeDoubleClickEvent} event - Custom doubleclick event.
+     */
+    onNodeDoubleClick?(event: TreeNodeDoubleClickEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreePassThroughOptions}
+     */
+    pt?: TreePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - Tree**
+ *
+ * _Tree is used to display hierarchical data._
+ *
+ * [Live Demo](https://www.primereact.org/tree/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class Tree extends React.Component<TreeProps, any> {
+    /**
+     * Filters the data.
+     * @param {T} value - The filter value
+     */
+    public filter<T>(value: T): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/treenode/package.json b/components/lib/treenode/package.json
new file mode 100644
index 0000000000..cea210ef53
--- /dev/null
+++ b/components/lib/treenode/package.json
@@ -0,0 +1,4 @@
+{
+    "types": "./treenode.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/treenode/treenode.d.ts b/components/lib/treenode/treenode.d.ts
new file mode 100644
index 0000000000..9454e7b388
--- /dev/null
+++ b/components/lib/treenode/treenode.d.ts
@@ -0,0 +1,70 @@
+/**
+ *
+ * This module contains the data interface for nodes in tree components.
+ *
+ * @module treenode
+ *
+ */
+import { IconType } from '../utils';
+
+/**
+ * Defines model of TreeNode API.
+ * @group Model
+ */
+export interface TreeNode {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Unique key of the node.
+     */
+    key?: string | number | undefined;
+    /**
+     * Label of the node.
+     */
+    label?: string | undefined;
+    /**
+     * Data represented by the node.
+     */
+    data?: any | undefined;
+    /**
+     * Icon of the node to display next to content.
+     */
+    icon?: IconType<TreeNode> | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: TreeNode[] | undefined;
+    /**
+     * Inline style of the node.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the node.
+     */
+    className?: string | undefined;
+    /**
+     * Whether the node is droppable when dragdrop is enabled.
+     * @defaultValue true
+     */
+    droppable?: boolean | undefined;
+    /**
+     * Whether the node is draggable when dragdrop is enabled.
+     * @defaultValue true
+     */
+    draggable?: boolean | undefined;
+    /**
+     * Whether the node is selectable when selection mode is enabled.
+     */
+    selectable?: boolean | undefined;
+    /**
+     * Specifies if the node has children. Used in lazy loading.
+     */
+    leaf?: boolean | undefined;
+    /**
+     * Visibility of node.
+     */
+    expanded?: boolean | undefined;
+}
diff --git a/components/lib/treeselect/TreeSelect.js b/components/lib/treeselect/TreeSelect.js
new file mode 100644
index 0000000000..5a58a8f321
--- /dev/null
+++ b/components/lib/treeselect/TreeSelect.js
@@ -0,0 +1,916 @@
+import * as React from 'react';
+import PrimeReact, { PrimeReactContext, ariaLabel, localeOption } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useDebounce, useMergeProps, useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { SearchIcon } from '../icons/search';
+import { TimesIcon } from '../icons/times';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { Ripple } from '../ripple/Ripple';
+import { Tooltip } from '../tooltip/Tooltip';
+import { Tree } from '../tree/Tree';
+import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames } from '../utils/Utils';
+import { TreeSelectBase } from './TreeSelectBase';
+import { TreeSelectPanel } from './TreeSelectPanel';
+
+export const TreeSelect = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TreeSelectBase.getProps(inProps, context);
+
+        const [focusedState, setFocusedState] = React.useState(false);
+        const [overlayVisibleState, setOverlayVisibleState] = React.useState(false);
+        const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys);
+        const [filterValue, filterValueState, setFilterValueState] = useDebounce('', props.filterDelay || 0);
+        const elementRef = React.useRef(null);
+        const overlayRef = React.useRef(null);
+        const filterInputRef = React.useRef(null);
+        const focusInputRef = React.useRef(props.inputRef);
+        const triggerRef = React.useRef(null);
+        const selfChange = React.useRef(null);
+        const treeRef = React.useRef(null);
+        const firstHiddenFocusableElementOnOverlay = React.useRef(null);
+        const lastHiddenFocusableElementOnOverlay = React.useRef(null);
+        const focusToTree = React.useRef(false);
+        const listId = React.useRef('');
+        const expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+        const filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
+        const isValueEmpty = ObjectUtils.isEmpty(props.value);
+        const isSingleSelectionMode = props.selectionMode === 'single';
+        const isCheckboxSelectionMode = props.selectionMode === 'checkbox';
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+
+        const metaData = {
+            props,
+            state: {
+                focused: focusedState,
+                overlayVisible: overlayVisibleState,
+                expandedKeys: expandedKeys,
+                filterValue: filteredValue
+            }
+        };
+
+        const { ptm, cx, isUnstyled } = TreeSelectBase.setMetaData(metaData);
+
+        useHandleStyle(TreeSelectBase.css.styles, isUnstyled, { name: 'treeselect' });
+
+        const filterOptions = {
+            filter: (e) => onFilterInputChange(e),
+            reset: () => resetFilter()
+        };
+
+        const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({
+            target: elementRef,
+            overlay: overlayRef,
+            listener: (event, { valid, type }) => {
+                if (valid) {
+                    if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
+                        hide();
+                    } else if (!DomHandler.isDocument(event.target)) {
+                        alignOverlay();
+                    }
+                }
+            },
+            when: overlayVisibleState
+        });
+
+        const getLabel = () => {
+            return selectedNodes.length ? selectedNodes.map((node) => node.label).join(', ') : props.placeholder;
+        };
+
+        const show = () => {
+            setOverlayVisibleState(true);
+        };
+
+        const hide = () => {
+            setOverlayVisibleState(false);
+            focusInputRef.current && DomHandler.focus(focusInputRef.current);
+        };
+
+        const onInputFocus = () => {
+            setFocusedState(true);
+
+            props.onFocus && props.onFocus();
+        };
+
+        const onInputBlur = () => {
+            setFocusedState(false);
+
+            props.onBlur && props.onBlur();
+        };
+
+        const onClick = (event) => {
+            if (!props.disabled && (!overlayRef.current || !overlayRef.current.contains(event.target)) && !DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'closebutton')) {
+                DomHandler.focus(focusInputRef.current);
+                overlayVisibleState ? hide() : show();
+            }
+        };
+
+        const onSelectionChange = (event) => {
+            if (props.onChange) {
+                selfChange.current = true;
+
+                props.onChange({
+                    originalEvent: event.originalEvent,
+                    value: event.value,
+                    stopPropagation: () => {
+                        event.originalEvent.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event.originalEvent.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: event.value
+                    }
+                });
+            }
+        };
+
+        const clear = (event) => {
+            if (props.onChange) {
+                selfChange.current = true;
+
+                props.onChange({
+                    originalEvent: event,
+                    value: undefined,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: undefined
+                    }
+                });
+            }
+        };
+
+        const onClearIconKeyDown = (event) => {
+            if (event.key === 'Enter' || event.code === 'Space') {
+                clear(event);
+                event.preventDefault();
+            }
+        };
+
+        const onNodeSelect = (node) => {
+            props.onNodeSelect && props.onNodeSelect(node);
+            isSingleSelectionMode && hide();
+        };
+
+        const onNodeUnselect = (node) => {
+            props.onNodeUnselect && props.onNodeUnselect(node);
+            isCheckboxSelectionMode && node.originalEvent.stopPropagation();
+        };
+
+        const onNodeToggle = (e) => {
+            if (props.onToggle) {
+                props.onToggle(e);
+            } else {
+                setExpandedKeysState(e.value);
+            }
+        };
+
+        const onFilterValueChange = (e) => {
+            setFilterValueState(e.value);
+        };
+
+        const onOverlayClick = (event) => {
+            OverlayService.emit('overlay-click', {
+                originalEvent: event,
+                target: elementRef.current
+            });
+        };
+
+        const onFirstHiddenFocus = (event) => {
+            const focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getFirstFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+
+            DomHandler.focus(focusableEl);
+        };
+
+        const onLastHiddenFocus = (event) => {
+            const focusableEl = event.relatedTarget === focusInputRef.current ? DomHandler.getLastFocusableElement(overlayRef.current, ':not([data-p-hidden-focusable="true"])') : focusInputRef.current;
+
+            DomHandler.focus(focusableEl);
+        };
+
+        const onHeaderElementKeyDown = (event, isHideButton) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    setFocusToFocusableFirstNode();
+
+                    break;
+
+                case 'ArrowUp':
+                    event.preventDefault();
+                    focusInputRef.current && DomHandler.focus(focusInputRef.current);
+
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+                    event.preventDefault();
+
+                    if (isHideButton) {
+                        hide();
+                    }
+
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onKeyDown = (event) => {
+            switch (event.code) {
+                case 'ArrowDown':
+                    onArrowDownKey(event);
+                    break;
+
+                case 'Space':
+                case 'Enter':
+                case 'NumpadEnter':
+                    onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    if (overlayVisibleState) {
+                        event.preventDefault();
+
+                        if (event.shiftKey) {
+                            setFocusToFocusableFirstNode();
+                        } else {
+                            onTabKey(event);
+                        }
+                    }
+
+                    break;
+
+                default:
+                    break;
+            }
+        };
+
+        const onArrowDownKey = (event) => {
+            if (overlayVisibleState) {
+                return;
+            }
+
+            focusToTree.current = true;
+            show();
+
+            event.preventDefault();
+        };
+
+        const onEnterKey = (event) => {
+            if (overlayVisibleState) {
+                hide();
+            } else {
+                onArrowDownKey(event);
+            }
+
+            event.preventDefault();
+        };
+
+        const onEscapeKey = (event) => {
+            if (overlayVisibleState) {
+                hide();
+                event.preventDefault();
+            }
+        };
+
+        const onTabKey = (event, pressedInInputText = false) => {
+            if (!pressedInInputText) {
+                if (overlayVisibleState && hasFocusableElements()) {
+                    DomHandler.focus(firstHiddenFocusableElementOnOverlay.current);
+
+                    event.preventDefault();
+                }
+            }
+        };
+
+        const hasFocusableElements = () => {
+            return DomHandler.getFocusableElements(overlayRef.current, ':not([data-p-hidden-focusable="true"])').length > 0;
+        };
+
+        const onFilterInputChange = (event) => {
+            const value = event.target.value;
+
+            if (props.onFilterValueChange) {
+                props.onFilterValueChange({
+                    originalEvent: event,
+                    value
+                });
+            } else {
+                setFilterValueState(value);
+            }
+        };
+
+        const resetFilter = () => {
+            setFilterValueState('');
+        };
+
+        const onOverlayEnter = () => {
+            ZIndexUtils.set('overlay', overlayRef.current, (context && context.autoZIndex) || PrimeReact.autoZIndex, (context && context.zIndex.overlay) || PrimeReact.zIndex.overlay);
+            DomHandler.addStyles(overlayRef.current, { position: 'absolute', top: '0', left: '0' });
+            setFocusToFocusableFirstNode();
+            alignOverlay();
+            scrollInView();
+        };
+
+        const onOverlayEntered = () => {
+            bindOverlayListener();
+
+            if (props.filter && props.filterInputAutoFocus) {
+                DomHandler.focus(filterInputRef.current, props.filterInputAutoFocus);
+            }
+
+            props.onShow && props.onShow();
+        };
+
+        const onOverlayExit = () => {
+            unbindOverlayListener();
+        };
+
+        const onOverlayExited = () => {
+            if (props.filter && props.resetFilterOnHide) {
+                resetFilter();
+            }
+
+            ZIndexUtils.clear(overlayRef.current);
+
+            props.onHide && props.onHide();
+        };
+
+        const alignOverlay = () => {
+            DomHandler.alignOverlay(overlayRef.current, triggerRef.current.parentElement, props.appendTo || (context && context.appendTo) || PrimeReact.appendTo);
+        };
+
+        const scrollInView = () => {
+            const highlightItem = DomHandler.findSingle(overlayRef.current, '[data-pc-section="content"][data-p-highlight="true"]');
+
+            if (highlightItem && highlightItem.scrollIntoView) {
+                highlightItem.scrollIntoView({ block: 'nearest', inline: 'start' });
+            }
+        };
+
+        const findSelectedNodes = (node, keys, selectedNodes) => {
+            if (node) {
+                if (isSelected(node, keys)) {
+                    selectedNodes.push(node);
+                    delete keys[node.key];
+                }
+
+                if (Object.keys(keys).length && node.children) {
+                    for (let childNode of node.children) {
+                        findSelectedNodes(childNode, keys, selectedNodes);
+                    }
+                }
+            } else {
+                for (let childNode of props.options) {
+                    findSelectedNodes(childNode, keys, selectedNodes);
+                }
+            }
+        };
+
+        const isSelected = (node, keys) => {
+            return isCheckboxSelectionMode ? keys[node.key] && keys[node.key].checked : keys[node.key];
+        };
+
+        const updateTreeState = () => {
+            const keys = isSingleSelectionMode ? { [`${props.value}`]: true } : { ...props.value };
+
+            setExpandedKeysState({});
+
+            if (keys && props.options) {
+                updateTreeBranchState(null, null, keys);
+            }
+        };
+
+        const setFocusToFocusableFirstNode = () => {
+            const treeNodeEl = DomHandler.find(treeRef.current?.getElement(), '[data-pc-section="node"]');
+            const focusedElement = [...treeNodeEl].find((item) => item.getAttribute('tabindex') === '0');
+
+            DomHandler.focus(focusedElement);
+        };
+
+        const updateTreeBranchState = (node, path, keys) => {
+            if (node) {
+                if (isSelected(node, keys)) {
+                    expandPath(path);
+                    delete keys[node.key];
+                }
+
+                if (Object.keys(keys).length && node.children) {
+                    for (let childNode of node.children) {
+                        path.push(node.key);
+                        updateTreeBranchState(childNode, path, keys);
+                    }
+                }
+            } else {
+                for (let childNode of props.options) {
+                    updateTreeBranchState(childNode, [], keys);
+                }
+            }
+        };
+
+        const expandPath = (path) => {
+            if (path.length > 0) {
+                let expandedKeys = { ...(expandedKeysState || {}) };
+
+                for (let key of path) {
+                    expandedKeys[key] = true;
+                }
+
+                setExpandedKeysState(expandedKeys);
+            }
+        };
+
+        const getSelectedNodes = () => {
+            let selectedNodes = [];
+
+            if (ObjectUtils.isNotEmpty(props.value) && props.options) {
+                const keys = isSingleSelectionMode ? { [`${props.value}`]: true } : { ...props.value };
+
+                findSelectedNodes(null, keys, selectedNodes);
+            }
+
+            return selectedNodes;
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            clear,
+            show,
+            hide,
+            focus: () => DomHandler.focus(focusInputRef.current),
+            getElement: () => elementRef.current
+        }));
+
+        React.useEffect(() => {
+            ObjectUtils.combinedRefs(focusInputRef, props.inputRef);
+        }, [focusInputRef, props.inputRef]);
+
+        useMountEffect(() => {
+            updateTreeState();
+
+            listId.current = UniqueComponentId() + '_list';
+
+            if (props.autoFocus) {
+                DomHandler.focus(focusInputRef.current, props.autoFocus);
+            }
+
+            alignOverlay();
+        });
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState && props.filter) {
+                alignOverlay();
+            }
+        });
+
+        useUpdateEffect(() => {
+            updateTreeState();
+        }, [props.options]);
+
+        useUpdateEffect(() => {
+            if (focusToTree.current && overlayVisibleState) {
+                focusToTree.current = false;
+
+                setFocusToFocusableFirstNode();
+            }
+        }, [overlayVisibleState]);
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState && expandedKeysState) {
+                alignOverlay();
+            }
+        }, [expandedKeysState]);
+
+        useUpdateEffect(() => {
+            if (overlayVisibleState) {
+                if (!selfChange.current) {
+                    updateTreeState();
+                }
+
+                selfChange.current = false;
+            }
+        }, [props.value]);
+
+        useUnmountEffect(() => {
+            ZIndexUtils.clear(overlayRef.current);
+        });
+
+        const createKeyboardHelper = () => {
+            const hiddenInputWrapperProps = mergeProps(
+                {
+                    className: 'p-hidden-accessible'
+                },
+                ptm('hiddenInputWrapper')
+            );
+
+            const hiddenInputProps = mergeProps(
+                {
+                    ref: focusInputRef,
+                    role: 'listbox',
+                    id: props.inputId,
+                    type: 'text',
+                    'aria-expanded': overlayVisibleState,
+                    'aria-label': props.ariaLabel,
+                    'aria-labelledby': props.ariaLabelledBy,
+                    'aria-haspopup': 'tree',
+                    'aria-controls': listId.current,
+                    onFocus: onInputFocus,
+                    onBlur: onInputBlur,
+                    onKeyDown,
+                    disabled: props.disabled,
+                    tabIndex: props.tabIndex,
+                    ...ariaProps
+                },
+                ptm('hiddenInput')
+            );
+
+            return (
+                <div {...hiddenInputWrapperProps}>
+                    <input {...hiddenInputProps} readOnly />
+                </div>
+            );
+        };
+
+        const createLabel = () => {
+            const tokenProps = mergeProps(
+                {
+                    className: cx('token')
+                },
+                ptm('token')
+            );
+            const tokenLabelProps = mergeProps(
+                {
+                    className: cx('tokenLabel')
+                },
+                ptm('tokenLabel')
+            );
+
+            const labelContainerProps = mergeProps(
+                {
+                    className: cx('labelContainer')
+                },
+                ptm('labelContainer')
+            );
+
+            const labelProps = mergeProps(
+                {
+                    className: cx('label', { isValueEmpty, getLabel })
+                },
+                ptm('label')
+            );
+
+            let content = null;
+
+            if (props.valueTemplate) {
+                content = ObjectUtils.getJSXElement(props.valueTemplate, selectedNodes, props);
+            } else if (props.display === 'comma') {
+                content = getLabel() || 'empty';
+            } else if (props.display === 'chip') {
+                content = (
+                    <>
+                        {selectedNodes &&
+                            selectedNodes.map((node, index) => {
+                                return (
+                                    <div {...tokenProps} key={`${node.key}_${index}`}>
+                                        <span {...tokenLabelProps}>{node.label}</span>
+                                    </div>
+                                );
+                            })}
+
+                        {isValueEmpty && (props.placeholder || 'empty')}
+                    </>
+                );
+            }
+
+            return (
+                <div {...labelContainerProps}>
+                    <div {...labelProps}>{content}</div>
+                </div>
+            );
+        };
+
+        const createDropdownIcon = () => {
+            const triggerProps = mergeProps(
+                {
+                    ref: triggerRef,
+                    className: cx('trigger'),
+                    role: 'button',
+                    'aria-haspopup': 'tree',
+                    'aria-expanded': overlayVisibleState
+                },
+                ptm('trigger')
+            );
+            const triggerIconProps = mergeProps(
+                {
+                    className: cx('triggerIcon')
+                },
+                ptm('triggerIcon')
+            );
+
+            const icon = props.dropdownIcon || <ChevronDownIcon {...triggerIconProps} />;
+            const dropdownIcon = IconUtils.getJSXIcon(icon, { ...triggerIconProps }, { props });
+
+            return <div {...triggerProps}>{dropdownIcon}</div>;
+        };
+
+        const createClearIcon = () => {
+            if (props.value != null && props.showClear && !props.disabled) {
+                const clearIconProps = mergeProps(
+                    {
+                        className: cx('clearIcon'),
+                        onPointerUp: clear,
+                        tabIndex: props.tabIndex || '0',
+                        onKeyDown: onClearIconKeyDown,
+                        'aria-label': localeOption('clear')
+                    },
+                    ptm('clearIcon')
+                );
+                const icon = props.clearIcon || <TimesIcon {...clearIconProps} />;
+
+                return IconUtils.getJSXIcon(icon, { ...clearIconProps }, { props });
+            }
+
+            return null;
+        };
+
+        const createContent = () => {
+            return (
+                <Tree
+                    ref={treeRef}
+                    id={listId.current}
+                    emptyMessage={props.emptyMessage}
+                    expandedKeys={expandedKeys}
+                    filter={props.filter}
+                    filterBy={props.filterBy}
+                    filterDelay={props.filterDelay}
+                    filterLocale={props.filterLocale}
+                    filterMode={props.filterMode}
+                    filterPlaceholder={props.filterPlaceholder}
+                    filterValue={filteredValue}
+                    metaKeySelection={props.metaKeySelection}
+                    nodeTemplate={props.nodeTemplate}
+                    onCollapse={props.onNodeCollapse}
+                    onExpand={props.onNodeExpand}
+                    onFilterValueChange={onFilterValueChange}
+                    onNodeClick={props.onNodeClick}
+                    onNodeDoubleClick={props.onNodeDoubleClick}
+                    onSelect={onNodeSelect}
+                    onSelectionChange={onSelectionChange}
+                    onToggle={onNodeToggle}
+                    onUnselect={onNodeUnselect}
+                    selectionKeys={props.value}
+                    selectionMode={props.selectionMode}
+                    showHeader={false}
+                    togglerTemplate={props.togglerTemplate}
+                    value={props.options}
+                    pt={ptm('tree')}
+                    __parentMetadata={{ parent: metaData }}
+                />
+            );
+        };
+
+        const createFilterElement = () => {
+            if (props.filter) {
+                let newValue = props.onFilterValueChange ? props.filterValue : filterValue;
+
+                newValue = ObjectUtils.isNotEmpty(newValue) ? newValue : '';
+                const filterContainerProps = mergeProps(
+                    {
+                        className: cx('filterContainer')
+                    },
+                    ptm('filterContainer')
+                );
+                const filterProps = mergeProps(
+                    {
+                        ref: filterInputRef,
+                        type: 'text',
+                        value: newValue,
+                        autoComplete: 'off',
+                        className: cx('filter'),
+                        placeholder: props.filterPlaceholder,
+                        onKeyDown: (event) => onHeaderElementKeyDown(event, false),
+                        onChange: onFilterInputChange,
+                        disabled: props.disabled
+                    },
+                    ptm('filter')
+                );
+
+                const filterIconProps = mergeProps(
+                    {
+                        className: cx('filterIcon')
+                    },
+                    ptm('filterIcon')
+                );
+                const icon = props.filterIcon || <SearchIcon {...filterIconProps} />;
+                const filterIcon = IconUtils.getJSXIcon(icon, { ...filterIconProps }, { props });
+
+                let filterContent = (
+                    <div {...filterContainerProps}>
+                        <input {...filterProps} />
+                        {filterIcon}
+                    </div>
+                );
+
+                if (props.filterTemplate) {
+                    const defaultContentOptions = {
+                        className: 'p-treeselect-filter-container',
+                        element: filterContent,
+                        filterOptions: filterOptions,
+                        filterInputKeyDown: (event) => onHeaderElementKeyDown(event, () => {}),
+                        filterInputChange: onFilterInputChange,
+                        filterIconClassName: 'p-dropdown-filter-icon',
+                        props
+                    };
+
+                    filterContent = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+                }
+
+                return <>{filterContent}</>;
+            }
+        };
+
+        const createHeader = () => {
+            const filterElement = createFilterElement();
+            const closeIconProps = mergeProps(
+                {
+                    className: cx('closeIcon'),
+                    'aria-hidden': true
+                },
+                ptm('closeIcon')
+            );
+            const icon = props.closeIcon || <TimesIcon {...closeIconProps} />;
+            const closeIcon = IconUtils.getJSXIcon(icon, { ...closeIconProps }, { props });
+
+            const closeButtonProps = mergeProps(
+                {
+                    type: 'button',
+                    className: cx('closeButton'),
+                    onKeyDown: (event) => onHeaderElementKeyDown(event, true),
+                    onClick: hide,
+                    'aria-label': ariaLabel('close')
+                },
+                ptm('closeButton')
+            );
+
+            const headerProps = mergeProps(
+                {
+                    className: cx('header')
+                },
+                ptm('header')
+            );
+
+            const closeElement = (
+                <button {...closeButtonProps}>
+                    {closeIcon}
+                    <Ripple />
+                </button>
+            );
+            const content = (
+                <div {...headerProps}>
+                    {filterElement}
+                    {closeElement}
+                </div>
+            );
+
+            if (props.panelHeaderTemplate) {
+                const defaultOptions = {
+                    className: 'p-treeselect-header',
+                    filterElement,
+                    closeElement,
+                    closeElementClassName: 'p-treeselect-close p-link',
+                    closeIconClassName: 'p-treeselect-close-icon',
+                    onCloseClick: hide,
+                    element: content,
+                    props
+                };
+
+                return (
+                    <div>
+                        {content}
+                        {ObjectUtils.getJSXElement(props.panelHeaderTemplate, defaultOptions)}
+                    </div>
+                );
+            }
+
+            return content;
+        };
+
+        const createFooter = () => {
+            return ObjectUtils.getJSXElement(props.panelFooterTemplate, props);
+        };
+
+        const selectedNodes = getSelectedNodes();
+
+        const otherProps = TreeSelectBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const firstHiddenFocusableElementOnOverlayProps = mergeProps(
+            {
+                ref: firstHiddenFocusableElementOnOverlay,
+                role: 'presentation',
+                className: 'p-hidden-accessible p-hidden-focusable',
+                tabIndex: 0,
+                onFocus: onFirstHiddenFocus,
+                'aria-hidden': true,
+                'data-p-hidden-accessible': true,
+                'data-p-hidden-focusable': true
+            },
+            ptm('firstHiddenFocusableElementOnOverlay')
+        );
+        const lastHiddenFocusableElementOnOverlayProps = mergeProps(
+            {
+                ref: lastHiddenFocusableElementOnOverlay,
+                role: 'presentation',
+                className: 'p-hidden-accessible p-hidden-focusable',
+                tabIndex: 0,
+                onFocus: onLastHiddenFocus,
+                'aria-hidden': true,
+                'data-p-hidden-accessible': true,
+                'data-p-hidden-focusable': true
+            },
+            ptm('lastHiddenFocusableElementOnOverlay')
+        );
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className: classNames(
+                    props.className,
+                    cx('root', {
+                        context,
+                        focusedState,
+                        overlayVisibleState,
+                        isValueEmpty
+                    })
+                ),
+                style: props.style,
+                onClick: onClick
+            },
+            TreeSelectBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const keyboardHelper = createKeyboardHelper();
+        const labelElement = createLabel();
+        const dropdownIcon = createDropdownIcon();
+        const clearIcon = createClearIcon();
+        const content = createContent();
+        const header = createHeader();
+        const footer = createFooter();
+
+        return (
+            <div {...rootProps}>
+                {keyboardHelper}
+                {labelElement}
+                {clearIcon}
+                {dropdownIcon}
+                <TreeSelectPanel
+                    hostName="TreeSelect"
+                    ref={overlayRef}
+                    appendTo={props.appendTo}
+                    panelStyle={props.panelStyle}
+                    panelClassName={props.panelClassName}
+                    scrollHeight={props.scrollHeight}
+                    onClick={onOverlayClick}
+                    header={header}
+                    hide={hide}
+                    footer={footer}
+                    firstHiddenFocusableElementOnOverlay={<span {...firstHiddenFocusableElementOnOverlayProps} />}
+                    lastHiddenFocusableElementOnOverlay={<span {...lastHiddenFocusableElementOnOverlayProps} />}
+                    transitionOptions={props.transitionOptions}
+                    in={overlayVisibleState}
+                    onEnter={onOverlayEnter}
+                    onEntered={onOverlayEntered}
+                    onExit={onOverlayExit}
+                    onExited={onOverlayExited}
+                    ptm={ptm}
+                    cx={cx}
+                >
+                    {content}
+                </TreeSelectPanel>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </div>
+        );
+    })
+);
+
+TreeSelect.displayName = 'TreeSelect';
diff --git a/components/lib/treeselect/TreeSelectBase.js b/components/lib/treeselect/TreeSelectBase.js
new file mode 100644
index 0000000000..53a03444fe
--- /dev/null
+++ b/components/lib/treeselect/TreeSelectBase.js
@@ -0,0 +1,202 @@
+import PrimeReact from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, focusedState, context, overlayVisibleState, isValueEmpty }) =>
+        classNames('p-treeselect p-component p-inputwrapper', {
+            'p-treeselect-chip': props.display === 'chip',
+            'p-treeselect-clearable': props.showClear && !props.disabled,
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-focus': focusedState,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
+            'p-inputwrapper-filled': !isValueEmpty,
+            'p-inputwrapper-focus': focusedState || overlayVisibleState
+        }),
+    label: ({ props, isValueEmpty, getLabel }) =>
+        classNames('p-treeselect-label', {
+            'p-placeholder': getLabel() === props.placeholder,
+            'p-treeselect-label-empty': !props.placeholder && isValueEmpty
+        }),
+    panel: ({ panelProps: props, context }) =>
+        classNames('p-treeselect-panel p-component', props.panelClassName, {
+            'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
+            'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
+        }),
+    labelContainer: 'p-treeselect-label-container',
+    tokenLabel: 'p-treeselect-token-label',
+    token: 'p-treeselect-token',
+    trigger: 'p-treeselect-trigger',
+    triggerIcon: 'p-treeselect-trigger-icon p-clickable',
+    emptyMessage: 'p-treeselect-empty-message',
+    filterContainer: 'p-treeselect-filter-container',
+    filter: 'p-treeselect-filter p-inputtext p-component',
+    filterIcon: 'p-treeselect-filter-icon',
+    closeIcon: 'p-treeselect-close-icon',
+    clearIcon: 'p-treeselect-clear-icon p-clickable',
+    closeButton: 'p-treeselect-close p-link',
+    header: 'p-treeselect-header',
+    wrapper: 'p-treeselect-items-wrapper',
+    transition: 'p-connected-overlay'
+};
+
+const styles = `
+@layer primereact {
+    .p-treeselect {
+        display: inline-flex;
+        cursor: pointer;
+        position: relative;
+        user-select: none;
+    }
+
+    .p-treeselect-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    .p-treeselect-label-container {
+        overflow: hidden;
+        flex: 1 1 auto;
+        cursor: pointer;
+    }
+
+    .p-treeselect-label  {
+        display: block;
+        white-space: nowrap;
+        cursor: pointer;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .p-treeselect-label-empty {
+        overflow: hidden;
+        visibility: hidden;
+    }
+
+    .p-treeselect-token {
+        cursor: default;
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 auto;
+    }
+
+    .p-treeselect .p-treeselect-panel {
+        min-width: 100%;
+    }
+
+    .p-treeselect-items-wrapper {
+        overflow: auto;
+    }
+
+    .p-treeselect-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .p-treeselect-filter-container {
+        position: relative;
+        flex: 1 1 auto;
+    }
+
+    .p-treeselect-filter-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+
+    .p-treeselect-filter-container .p-inputtext {
+        width: 100%;
+    }
+
+    .p-treeselect-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        position: relative;
+        margin-left: auto;
+    }
+
+    .p-treeselect-clear-icon {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5rem;
+    }
+
+    .p-fluid .p-treeselect {
+        display: flex;
+}
+}
+`;
+
+export const TreeSelectBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'TreeSelect',
+        appendTo: null,
+        ariaLabel: null,
+        ariaLabelledBy: null,
+        className: null,
+        closeIcon: null,
+        clearIcon: null,
+        disabled: false,
+        display: 'comma',
+        dropdownIcon: null,
+        emptyMessage: null,
+        expandedKeys: null,
+        filter: false,
+        filterBy: 'label',
+        filterDelay: 300,
+        filterIcon: null,
+        filterInputAutoFocus: true,
+        filterLocale: undefined,
+        filterMode: 'lenient',
+        filterPlaceholder: null,
+        filterTemplate: null,
+        filterValue: null,
+        inputId: null,
+        inputRef: null,
+        invalid: false,
+        variant: null,
+        metaKeySelection: false,
+        name: null,
+        nodeTemplate: null,
+        onChange: null,
+        onFocus: null,
+        onBlur: null,
+        onFilterValueChange: null,
+        onHide: null,
+        onNodeClick: null,
+        onNodeCollapse: null,
+        onNodeDoubleClick: null,
+        onNodeExpand: null,
+        onNodeSelect: null,
+        onNodeUnselect: null,
+        onShow: null,
+        options: null,
+        panelClassName: null,
+        panelFooterTemplate: null,
+        panelHeaderTemplate: null,
+        panelStyle: null,
+        placeholder: null,
+        resetFilterOnHide: false,
+        scrollHeight: '400px',
+        selectionMode: 'single',
+        showClear: false,
+        style: null,
+        tabIndex: null,
+        togglerTemplate: null,
+        transitionOptions: null,
+        value: null,
+        valueTemplate: null,
+        children: undefined
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/treeselect/TreeSelectPanel.js b/components/lib/treeselect/TreeSelectPanel.js
new file mode 100644
index 0000000000..bf7242e25f
--- /dev/null
+++ b/components/lib/treeselect/TreeSelectPanel.js
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { CSSTransition } from '../csstransition/CSSTransition';
+import { useMergeProps } from '../hooks/Hooks';
+import { Portal } from '../portal/Portal';
+
+export const TreeSelectPanel = React.forwardRef((props, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const { ptm, cx } = props;
+
+    const getPTOptions = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            ...options
+        });
+    };
+
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            props.hide();
+        }
+    };
+
+    const createElement = () => {
+        const wrapperStyle = { maxHeight: props.scrollHeight || 'auto' };
+
+        const panelProps = mergeProps(
+            {
+                className: cx('panel', { panelProps: props, context }),
+                style: props.panelStyle,
+                onKeyDown: onKeyDown,
+                onClick: props.onClick
+            },
+            getPTOptions('panel')
+        );
+
+        const wrapperProps = mergeProps(
+            {
+                className: cx('wrapper'),
+                style: wrapperStyle
+            },
+            getPTOptions('wrapper')
+        );
+
+        const transitionProps = mergeProps(
+            {
+                classNames: cx('transition'),
+                in: props.in,
+                timeout: { enter: 120, exit: 100 },
+                options: props.transitionOptions,
+                unmountOnExit: true,
+                onEnter: props.onEnter,
+                onEntered: props.onEntered,
+                onExit: props.onExit,
+                onExited: props.onExited
+            },
+            getPTOptions('transition')
+        );
+
+        return (
+            <CSSTransition nodeRef={ref} {...transitionProps}>
+                <div ref={ref} {...panelProps}>
+                    {props.firstHiddenFocusableElementOnOverlay}
+                    {props.header}
+                    <div {...wrapperProps}>{props.children}</div>
+                    {props.footer}
+                    {props.lastHiddenFocusableElementOnOverlay}
+                </div>
+            </CSSTransition>
+        );
+    };
+
+    const element = createElement();
+
+    return <Portal element={element} appendTo={props.appendTo} />;
+});
+
+TreeSelectPanel.displayName = 'TreeSelectPanel';
diff --git a/components/lib/treeselect/package.json b/components/lib/treeselect/package.json
new file mode 100644
index 0000000000..80d0ecc8e8
--- /dev/null
+++ b/components/lib/treeselect/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./treeselect.cjs.js",
+    "module": "./treeselect.esm.js",
+    "unpkg": "./treeselect.min.js",
+    "types": "./treeselect.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/treeselect/treeselect.d.ts b/components/lib/treeselect/treeselect.d.ts
new file mode 100644
index 0000000000..d5cb2fa62a
--- /dev/null
+++ b/components/lib/treeselect/treeselect.d.ts
@@ -0,0 +1,695 @@
+/**
+ *
+ * TreeSelect is a form component to choose from hierarchical data.
+ *
+ * [Live Demo](https://www.primereact.org/treeselect/)
+ *
+ * @module treeselect
+ *
+ */
+import * as React from 'react';
+import { CSSTransitionProps as ReactCSSTransitionProps } from 'react-transition-group/CSSTransition';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { CSSTransitionProps } from '../csstransition';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { TreeNodeTemplateOptions, TreePassThroughOptions, TreeTogglerTemplateOptions } from '../tree/tree';
+import { TreeNode } from '../treenode';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TreeSelectPassThroughType<T> = PassThroughType<T, TreeSelectPassThroughMethodOptions>;
+export declare type TreeSelectPassThroughTransitionType = ReactCSSTransitionProps | ((options: TreeSelectPassThroughMethodOptions) => ReactCSSTransitionProps) | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreeSelectPassThroughMethodOptions {
+    props: TreeSelectProps;
+    state: TreeSelectState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeSelectProps.pt}
+ */
+export interface TreeSelectPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label container's DOM element.
+     */
+    labelContainer?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the token's DOM element.
+     */
+    token?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the token label's DOM element.
+     */
+    tokenLabel?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     */
+    trigger?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the trigger icon's DOM element.
+     */
+    triggerIcon?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panel?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the trigger's DOM element.
+     * @see {@link TreePassThroughOptionType}
+     */
+    tree?: TreePassThroughOptions;
+    /**
+     * Callback to invoke when menu receives focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onFocus?(event: React.SyntheticEvent): void;
+    /**
+     * Callback to invoke when menu loses focus.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onBlur?(event: React.SyntheticEvent): void;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Uses to pass attributes to the filter container's DOM element.
+     */
+    filterContainer?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * uses to pass attributes to the filter's DOM element.
+     */
+    filter?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * uses to pass attributes to the filter icon's DOM element.
+     */
+    filterIcon?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * uses to pass attributes to the header's DOM element.
+     */
+    header?: TreeSelectPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * uses to pass attributes to the clear icon's DOM element.
+     */
+    clearIcon?: TreeSelectPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+    /**
+     * Used to control React Transition API.
+     */
+    transition?: TreeSelectPassThroughTransitionType;
+    /**
+     * Uses to pass attributes to the Tooltip component.
+     * @see {@link TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+}
+
+/**
+ * Defines current inline state in TreeSelect component.
+ */
+export interface TreeSelectState {
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current overlay visible state as a boolean.
+     * @defaultValue false
+     */
+    overlayVisible: boolean;
+    /**
+     * Current expanded keys state.
+     */
+    expandedKeys: TreeSelectExpandedKeysType;
+    /**
+     * Current selected keys state.
+     */
+    filterValue: string;
+}
+
+/**
+ * Custom panel header template options.
+ */
+interface TreeSelectPanelHeaderTemplateOptions {
+    /**
+     * Style class of the panel.
+     */
+    className: string;
+    /**
+     * The JSX element that represents the filter of the panel.
+     */
+    filterElement: JSX.Element;
+    /**
+     * The JSX element that represents the close of the panel.
+     */
+    closeElement: JSX.Element;
+    /**
+     * Style class of the panel close element.
+     */
+    closeElementClassName: string;
+    /**
+     * Style class of the panel close icon.
+     */
+    closeIconClassName: string;
+    /**
+     * Callback to invoke when the close button is clicked.
+     */
+    onCloseClick(): void;
+    /**
+     * The JSX element that represents the panel.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the TreeSelect component.
+     */
+    props: TreeSelectProps;
+}
+
+/**
+ * Custom change event.
+ * @see {@link TreeSelectProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface TreeSelectChangeEvent extends FormEvent<string | TreeSelectSelectionKeysType | TreeSelectSelectionKeysType[]> {}
+
+/**
+ * Custom treeselect selection keys type
+ */
+interface TreeSelectSelectionKeysType {
+    /**
+     * Extra options.
+     */
+    [key: string]: boolean | TreeSelectCheckboxSelectionKeyType;
+}
+
+/**
+ * Custom checkbox selection key type
+ */
+interface TreeSelectCheckboxSelectionKeyType {
+    /**
+     * Whether the checkbox is checked or not.
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is partially checked or not.
+     */
+    partialChecked?: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link TreeSelectProps.onNodeCollapse},{@link TreeSelectProps.onNodeExpand},{@link TreeSelectProps.onNodeSelect},{@link TreeSelectProps.onNodeUnselect}
+ * @event
+ */
+interface TreeSelectEventNodeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Unselected node instance.
+     */
+    node: TreeNode;
+}
+
+/**
+ * Custom expanded keys type.
+ */
+interface TreeSelectExpandedKeysType {
+    /**
+     * Extra options.
+     */
+    [key: string]: boolean;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link TreeSelectProps.onToggle}
+ * @event
+ */
+interface TreeSelectExpandedEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Toggled node instance
+     */
+    value: TreeSelectExpandedKeysType;
+}
+
+/**
+ * Custom filter change event.
+ * @see {@link TreeSelectProps.onFilterValueChange}
+ * @event
+ */
+interface TreeSelectFilterValueChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.FormEvent<HTMLInputElement>;
+    /**
+     * The filtered value
+     */
+    value: string;
+}
+
+/**
+ * Custom filter template options.
+ */
+interface TreeSelectFilterTemplateOptions {
+    /**
+     * Style class of the filter.
+     */
+    className: string;
+    /**
+     * Whether the option is disabled or not
+     */
+    disabled?: boolean;
+    /**
+     * The filter element.
+     */
+    element: HTMLDivElement;
+    /**
+     * The filter.
+     */
+    filter?: string;
+    /**
+     * Icon of the filter.
+     */
+    filterIcon?: IconType<TreeSelect> | string;
+    /**
+     * Style class of the filter icon.
+     */
+    filterIconClassName: string;
+    /**
+     * Browser change event for the filter input element.
+     */
+    filterInputChange?: React.ChangeEvent<HTMLInputElement>;
+    /**
+     * The props of the filter input element.
+     */
+    filterInputProps?: any;
+    /**
+     * The filter input options.
+     */
+    filterOptions?: TreeSelectFilterOptions;
+    /**
+     * The placeholder of the filter element.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Custom filter template.
+     */
+    filterTemplate?: React.ReactNode | ((options: TreeSelectFilterTemplateOptions) => React.ReactNode);
+}
+
+/**
+ * Custom filter options.
+ */
+interface TreeSelectFilterOptions {
+    /**
+     * Used to filter options
+     * @param { React.ChangeEvent<HTMLInputElement>} event - Browser event.
+     */
+    filter?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Used to reset the filtered options
+     */
+    reset?: () => void;
+}
+
+/**
+ * Custom click event
+ * @see {@link TreeSelectProps.onNodeClick}
+ */
+interface TreeSelectNodeClickEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * The current node
+     */
+    node: TreeNode;
+}
+
+/**
+ * Custom double click event.
+ * @see {@link TreeSelectProps.onNodeDoubleClick}
+ * @extends {TreeSelectNodeClickEvent}
+ * @event
+ */
+interface TreeSelectNodeDoubleClickEvent extends TreeSelectNodeClickEvent {}
+
+/**
+ * Defines valid properties in TreeSelect component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TreeSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref' | 'pt'> {
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    appendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Used to define a string that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledBy?: string | undefined;
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Icon of the dropdown.
+     */
+    clearIcon?: IconType<TreeSelectProps> | undefined;
+    /**
+     * Icon of the close button.
+     */
+    closeIcon?: IconType<TreeSelectProps> | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Defines how the selected items are displayed, valid values are "comma" and "chip".
+     * @defaultValue comma
+     */
+    display?: 'comma' | 'chip' | undefined;
+    /**
+     * Icon of the dropdown.
+     */
+    dropdownIcon?: IconType<TreeSelectProps> | undefined;
+    /**
+     * Text to display when there is no data.
+     * @defaultValue No available options
+     */
+    emptyMessage?: React.ReactNode | ((props: TreeSelectProps) => React.ReactNode) | undefined;
+    /**
+     * An array of keys to represent the state of the treeselect expansion state in controlled mode.
+     */
+    expandedKeys?: TreeSelectExpandedKeysType | undefined;
+    /**
+     * When specified, displays an input field to filter the items.
+     * @defaultValue false
+     */
+    filter?: boolean | undefined;
+    /**
+     * When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
+     * @defaultValue label
+     */
+    filterBy?: string | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
+    /**
+     * Icon of the filter.
+     */
+    filterIcon?: IconType<TreeSelectProps> | undefined;
+    /**
+     * When the panel is opened, it specifies that the filter input should focus automatically.
+     * @defaultValue true
+     */
+    filterInputAutoFocus?: boolean | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Mode for filtering valid values are "lenient" and "strict". Default is lenient.
+     * @defaultValue lenient
+     */
+    filterMode?: 'lenient' | 'strict' | undefined;
+    /**
+     * Placeholder text to show when filter input is empty.
+     */
+    filterPlaceholder?: string | undefined;
+    /**
+     * Custom template for the filter element.
+     */
+    filterTemplate?: React.ReactNode | ((options: TreeSelectFilterTemplateOptions) => React.ReactNode);
+    /**
+     * When filtering is enabled, the value of input field. To control the value externally, use with onFilterValueChange.
+     */
+    filterValue?: string | undefined;
+    /**
+     * Identifier of the input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Reference of the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /**
+     * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @defaultValue true
+     */
+    metaKeySelection?: boolean | undefined;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
+    /**
+     * Template of internally used tree component node element.
+     * @defaultValue false
+     */
+    nodeTemplate?: React.ReactNode | ((node: TreeNode, options: TreeNodeTemplateOptions) => React.ReactNode);
+    /**
+     * An array of options to display.
+     */
+    options?: TreeNode[] | undefined;
+    /**
+     * Style class of the overlay panel element.
+     */
+    panelClassName?: string | undefined;
+    /**
+     * The template of footer.
+     */
+    panelFooterTemplate?: React.ReactNode | ((props: TreeSelectProps) => React.ReactNode);
+    /**
+     * The template of header.
+     */
+    panelHeaderTemplate?: React.ReactNode | ((options: TreeSelectPanelHeaderTemplateOptions) => React.ReactNode);
+    /**
+     * Inline style of the overlay panel element.
+     */
+    panelStyle?: React.CSSProperties | undefined;
+    /**
+     * Hint text for the input field.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Clears the filter value when hiding the dropdown.
+     * @defaultValue false
+     */
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreeSelectPassThroughOptions}
+     */
+    pt?: TreeSelectPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Resets the filter when the overlay is hidden.
+     */
+    resetFilterOnHide?: boolean | undefined;
+    /**
+     * Maximum height of the options panel.
+     * @defaultValue 400px
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean | undefined;
+    /**
+     * Defines the selection mode, valid values "single", "multiple", and "checkbox".
+     */
+    selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+     */
+    transitionOptions?: CSSTransitionProps | undefined;
+    /**
+     * Template of toggler element.
+     */
+    togglerTemplate?: React.ReactNode | ((node: TreeNode, options: TreeTogglerTemplateOptions) => React.ReactNode);
+    /**
+     * A single or an object of keys to control the selection state.
+     */
+    value?: string | TreeSelectSelectionKeysType | TreeSelectSelectionKeysType[] | undefined | null;
+    /**
+     * The template of selected values.
+     */
+    valueTemplate?: React.ReactNode | ((selectedNodes: TreeNode | TreeNode[], props: TreeSelectProps) => React.ReactNode);
+    /**
+     * Callback to invoke when selection changes.
+     * @param {TreeSelectChangeEvent} event - Custom change event.
+     */
+    onChange?(event: TreeSelectChangeEvent): void;
+    /**
+     * Callback to invoke when filter value changes.
+     * @param {TreeSelectFilterValueChangeEvent} event - Custom filter change event.
+     */
+    onFilterValueChange?(event: TreeSelectFilterValueChangeEvent): void;
+    /**
+     * Used to hide the overlay.
+     */
+    onHide?(): void;
+    /**
+     * Callback to invoke when the node is clicked.
+     * @param {TreeSelectNodeClickEvent} event - Custom click event.
+     */
+    onNodeClick?(event: TreeSelectNodeClickEvent): void;
+    /**
+     * Callback to invoke when a node is collapsed.
+     * @param {TreeSelectEventNodeEvent} event - Custom change event.
+     */
+    onNodeCollapse?(event: TreeSelectEventNodeEvent): void;
+    /**
+     * Callback to invoke when the node is double-clicked.
+     * @param {TreeSelectNodeDoubleClickEvent} event - Custom doubleclick event.
+     */
+    onNodeDoubleClick?(event: TreeSelectNodeDoubleClickEvent): void;
+    /**
+     * Callback to invoke when a node is expanded.
+     * @param {TreeSelectEventNodeEvent} event - Custom change event.
+     */
+    onNodeExpand?(event: TreeSelectEventNodeEvent): void;
+    /**
+     * Callback to invoke when a node is selected.
+     * @param {TreeSelectEventNodeEvent} event - Custom change event.
+     */
+    onNodeSelect?(event: TreeSelectEventNodeEvent): void;
+    /**
+     * Callback to invoke when a node is unselected.
+     * @param {TreeSelectEventNodeEvent} event - Custom change event.
+     */
+    onNodeUnselect?(event: TreeSelectEventNodeEvent): void;
+    /**
+     * Used to show the overlay.
+     */
+    onShow?(): void;
+    /**
+     * Callback to invoke when a node is toggled.
+     * @param {TreeSelectExpandedEvent} event - Custom toggle event.
+     */
+    onToggle?(event: TreeSelectExpandedEvent): void;
+}
+
+/**
+ * **PrimeReact - TreeSelect**
+ *
+ * _TreeSelect is a form component to choose from hierarchical data._
+ *
+ * [Live Demo](https://www.primereact.org/treeselect/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TreeSelect extends React.Component<TreeSelectProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Clear the currently selected value.
+     */
+    public clear(): void;
+    /**
+     * Show the dropdown overlay panel.
+     */
+    public show(): void;
+    /**
+     * Hide the dropdown overlay panel.
+     */
+    public hide(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js
new file mode 100644
index 0000000000..32b1d60b76
--- /dev/null
+++ b/components/lib/treetable/TreeTable.js
@@ -0,0 +1,1446 @@
+import * as React from 'react';
+import { getStorage } from '../../utils/utils';
+import PrimeReact, { FilterMatchMode, FilterService, PrimeReactContext } from '../api/Api';
+import { ColumnBase } from '../column/ColumnBase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useEventListener, useMergeProps, useMountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { ArrowDownIcon } from '../icons/arrowdown';
+import { ArrowUpIcon } from '../icons/arrowup';
+import { SpinnerIcon } from '../icons/spinner';
+import { Paginator } from '../paginator/Paginator';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { TreeTableBase } from './TreeTableBase';
+import { TreeTableBody } from './TreeTableBody';
+import { TreeTableFooter } from './TreeTableFooter';
+import { TreeTableHeader } from './TreeTableHeader';
+import { TreeTableScrollableView } from './TreeTableScrollableView';
+
+export const TreeTable = React.forwardRef((inProps, ref) => {
+    const mergeProps = useMergeProps();
+    const context = React.useContext(PrimeReactContext);
+    const props = TreeTableBase.getProps(inProps, context);
+    const [expandedKeysState, setExpandedKeysState] = React.useState(props.expandedKeys);
+    const [firstState, setFirstState] = React.useState(props.first);
+    const [rowsState, setRowsState] = React.useState(props.rows);
+    const [sortFieldState, setSortFieldState] = React.useState(props.sortField);
+    const [sortOrderState, setSortOrderState] = React.useState(props.sortOrder);
+    const [multiSortMetaState, setMultiSortMetaState] = React.useState(props.multiSortMeta);
+    const [filtersState, setFiltersState] = React.useState(props.filters);
+    const [columnOrderState, setColumnOrderState] = React.useState([]);
+    const metaData = {
+        props,
+        state: {
+            expandedKeys: expandedKeysState,
+            first: firstState,
+            rows: rowsState,
+            sortField: sortFieldState,
+            sortOrder: sortOrderState,
+            multiSortMeta: multiSortMetaState,
+            filters: filtersState,
+            columnOrder: columnOrderState
+        },
+        context: {
+            scrollable: props.scrollable
+        }
+    };
+    const ptCallbacks = TreeTableBase.setMetaData(metaData);
+
+    useHandleStyle(TreeTableBase.css.styles, ptCallbacks.isUnstyled, { name: 'treetable' });
+    const elementRef = React.useRef(null);
+    const tableRef = React.useRef(null);
+    const resizerHelperRef = React.useRef(null);
+    const reorderIndicatorUpRef = React.useRef(null);
+    const reorderIndicatorDownRef = React.useRef(null);
+    const columnResizing = React.useRef(null);
+    const resizeColumn = React.useRef(null);
+    const resizeColumnProps = React.useRef(null);
+    const lastResizerHelperX = React.useRef(0);
+    const iconWidth = React.useRef(0);
+    const iconHeight = React.useRef(0);
+    const draggedColumnEl = React.useRef(null);
+    const draggedColumn = React.useRef(null);
+    const dropPosition = React.useRef(null);
+    const columnSortable = React.useRef(null);
+    const columnSortFunction = React.useRef(null);
+    const columnField = React.useRef(null);
+    const childFocusEvent = React.useRef(null);
+
+    const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({
+        type: 'mousemove',
+        listener: (event) => {
+            if (columnResizing.current) {
+                onColumnResize(event);
+            }
+        }
+    });
+
+    const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({
+        type: 'mouseup',
+        listener: (event) => {
+            if (columnResizing.current) {
+                columnResizing.current = false;
+                onColumnResizeEnd(event);
+            }
+        }
+    });
+
+    const isCustomStateStorage = () => {
+        return props.stateStorage === 'custom';
+    };
+
+    const isStateful = () => {
+        return props.stateKey != null || isCustomStateStorage();
+    };
+
+    const saveState = () => {
+        let state = {};
+
+        if (props.paginator) {
+            state.first = getFirst();
+            state.rows = getRows();
+        }
+
+        const sortField = getSortField();
+
+        if (sortField) {
+            state.sortField = sortField;
+            state.sortOrder = getSortOrder();
+        }
+
+        const multiSortMeta = getMultiSortMeta();
+
+        if (multiSortMeta) {
+            state.multiSortMeta = multiSortMeta;
+        }
+
+        if (hasFilter()) {
+            state.filters = getFilters();
+        }
+
+        if (props.reorderableColumns) {
+            state.columnOrder = columnOrderState;
+        }
+
+        state.expandedKeysState = expandedKeysState;
+
+        if (props.selectionKeys && props.onSelectionChange) {
+            state.selectionKeys = props.selectionKeys;
+        }
+
+        if (isCustomStateStorage()) {
+            if (props.customSaveState) {
+                props.customSaveState(state);
+            }
+        } else {
+            const storage = getStorage(props.stateStorage);
+
+            if (ObjectUtils.isNotEmpty(state)) {
+                storage.setItem(props.stateKey, JSON.stringify(state));
+            }
+        }
+
+        if (props.onStateSave) {
+            props.onStateSave(state);
+        }
+    };
+
+    const clearState = () => {
+        const storage = getStorage(props.stateStorage);
+
+        if (storage && props.stateKey) {
+            storage.removeItem(props.stateKey);
+        }
+    };
+
+    const restoreState = () => {
+        let restoredState = {};
+
+        if (isCustomStateStorage()) {
+            if (props.customRestoreState) {
+                restoredState = props.customRestoreState();
+            }
+        } else {
+            const storage = getStorage(props.stateStorage);
+            const stateString = storage.getItem(props.stateKey);
+            const dateFormat = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/;
+
+            const reviver = function (key, value) {
+                return typeof value === 'string' && dateFormat.test(value) ? new Date(value) : value;
+            };
+
+            if (stateString) {
+                restoredState = JSON.parse(stateString, reviver);
+            }
+        }
+
+        _restoreState(restoredState);
+    };
+
+    const restoreTableState = (restoredState) => {
+        _restoreState(restoredState);
+    };
+
+    const _restoreState = (restoredState = {}) => {
+        if (ObjectUtils.isNotEmpty(restoredState)) {
+            if (props.paginator) {
+                if (props.onPage) {
+                    const getOnPageParams = (first, rows) => {
+                        const totalRecords = getTotalRecords(processedData());
+                        const pageCount = Math.ceil(totalRecords / rows) || 1;
+                        const page = Math.floor(first / rows);
+
+                        return { first, rows, page, pageCount };
+                    };
+
+                    props.onPage(createEvent(getOnPageParams(restoredState.first, restoredState.rows)));
+                } else {
+                    setFirstState(restoredState.first);
+                    setRowsState(restoredState.rows);
+                }
+            }
+
+            if (restoredState.sortField) {
+                if (props.onSort) {
+                    props.onSort(
+                        createEvent({
+                            sortField: restoredState.sortField,
+                            sortOrder: restoredState.sortOrder
+                        })
+                    );
+                } else {
+                    setSortFieldState(restoredState.sortField);
+                    setSortOrderState(restoredState.sortOrder);
+                }
+            }
+
+            if (restoredState.multiSortMeta) {
+                if (props.onSort) {
+                    props.onSort(
+                        createEvent({
+                            multiSortMeta: restoredState.multiSortMeta
+                        })
+                    );
+                } else {
+                    setMultiSortMetaState(restoredState.multiSortMeta);
+                }
+            }
+
+            if (restoredState.filters) {
+                if (props.onFilter) {
+                    props.onFilter(
+                        createEvent({
+                            filters: restoredState.filters
+                        })
+                    );
+                } else {
+                    setFiltersState(cloneFilters(restoredState.filters));
+                }
+            }
+
+            if (props.reorderableColumns) {
+                setColumnOrderState(restoredState.columnOrder);
+            }
+
+            if (restoredState.expandedKeysState) {
+                if (props.onToggle) {
+                    props.onRowToggle({
+                        data: restoredState.expandedKeysState
+                    });
+                } else {
+                    setExpandedKeysState(restoredState.expandedKeysState);
+                }
+            }
+
+            if (restoredState.selectionKeys && props.onSelectionChange) {
+                props.onSelectionChange({
+                    value: restoredState.selectionKeys
+                });
+            }
+
+            if (props.onStateRestore) {
+                props.onStateRestore(restoredState);
+            }
+        }
+    };
+
+    const onToggle = (event) => {
+        const { originalEvent, value, navigateFocusToChild } = event;
+
+        if (props.onToggle) {
+            props.onToggle({ originalEvent, value });
+        } else {
+            if (navigateFocusToChild) {
+                childFocusEvent.current = originalEvent;
+            }
+
+            setExpandedKeysState(value);
+        }
+    };
+
+    const onPageChange = (event) => {
+        if (props.onPage) {
+            props.onPage(event);
+        } else {
+            setFirstState(event.first);
+            setRowsState(event.rows);
+        }
+
+        if (props.onValueChange) {
+            props.onValueChange(processedData());
+        }
+    };
+
+    const onSort = (event) => {
+        let sortField = event.sortField;
+        let sortOrder = props.defaultSortOrder;
+        let multiSortMeta;
+        let eventMeta;
+
+        columnSortable.current = event.sortable;
+        columnSortFunction.current = event.sortFunction;
+        columnField.current = event.sortField;
+
+        if (props.sortMode === 'multiple') {
+            const metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
+
+            multiSortMeta = [...getMultiSortMeta()];
+
+            if (multiSortMeta && multiSortMeta instanceof Array) {
+                const sortMeta = multiSortMeta.find((sortMeta) => sortMeta.field === sortField);
+
+                sortOrder = sortMeta ? getCalculatedSortOrder(sortMeta.order) : sortOrder;
+            }
+
+            const newMetaData = { field: sortField, order: sortOrder };
+
+            if (sortOrder) {
+                if (!multiSortMeta || !metaKey) {
+                    multiSortMeta = [];
+                }
+
+                addSortMeta(newMetaData, multiSortMeta);
+            } else if (props.removableSort && multiSortMeta) {
+                removeSortMeta(newMetaData, multiSortMeta);
+            }
+
+            eventMeta = {
+                multiSortMeta
+            };
+        } else {
+            sortOrder = getSortField() === sortField ? getCalculatedSortOrder(getSortOrder()) : sortOrder;
+
+            if (props.removableSort) {
+                sortField = sortOrder ? sortField : null;
+            }
+
+            eventMeta = {
+                sortField,
+                sortOrder
+            };
+        }
+
+        if (props.onSort) {
+            props.onSort(eventMeta);
+        } else {
+            setFirstState(0);
+            setSortFieldState(eventMeta.sortField);
+            setSortOrderState(eventMeta.sortOrder);
+            setMultiSortMetaState(eventMeta.multiSortMeta);
+        }
+
+        if (props.onValueChange) {
+            props.onValueChange(
+                processedData({
+                    sortField,
+                    sortOrder,
+                    multiSortMeta
+                })
+            );
+        }
+    };
+
+    const getCalculatedSortOrder = (currentOrder) => {
+        return props.removableSort ? (props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0) : currentOrder * -1;
+    };
+
+    const addSortMeta = (meta, multiSortMeta) => {
+        let index = -1;
+
+        for (let i = 0; i < multiSortMeta.length; i++) {
+            if (multiSortMeta[i].field === meta.field) {
+                index = i;
+                break;
+            }
+        }
+
+        if (index >= 0) {
+            multiSortMeta[index] = meta;
+        } else {
+            multiSortMeta.push(meta);
+        }
+    };
+
+    const removeSortMeta = (meta, multiSortMeta) => {
+        let index = -1;
+
+        for (let i = 0; i < multiSortMeta.length; i++) {
+            if (multiSortMeta[i].field === meta.field) {
+                index = i;
+                break;
+            }
+        }
+
+        if (index >= 0) {
+            multiSortMeta.splice(index, 1);
+        }
+
+        multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
+    };
+
+    const sortSingle = ({ data, field, order }) => {
+        let value = [...data];
+
+        if (columnSortable.current && columnSortFunction.current) {
+            value = columnSortFunction.current({ data, field, order });
+        } else {
+            // performance optimization to prevent resolving field data in each loop
+            const lookupMap = new Map();
+            const comparator = ObjectUtils.localeComparator((context && context.locale) || PrimeReact.locale);
+
+            for (let node of data) {
+                lookupMap.set(node.data, ObjectUtils.resolveFieldData(node.data, field));
+            }
+
+            value.sort((node1, node2) => {
+                const value1 = lookupMap.get(node1.data);
+                const value2 = lookupMap.get(node2.data);
+
+                return compareValuesOnSort(value1, value2, comparator, order);
+            });
+
+            for (let i = 0; i < value.length; i++) {
+                if (value[i].children && value[i].children.length) {
+                    value[i].children = sortSingle({ data: value[i].children, field, order });
+                }
+            }
+        }
+
+        return value;
+    };
+
+    const sortMultiple = ({ data, multiSortMeta = [] }) => {
+        let value = [...data];
+
+        const comparator = ObjectUtils.localeComparator((context && context.locale) || PrimeReact.locale);
+
+        value.sort((node1, node2) => {
+            return multisortField(node1, node2, multiSortMeta, 0, comparator);
+        });
+
+        for (let i = 0; i < value.length; i++) {
+            if (value[i].children && value[i].children.length) {
+                value[i].children = sortMultiple({ data: value[i].children, multiSortMeta });
+            }
+        }
+
+        return value;
+    };
+
+    const multisortField = (node1, node2, multiSortMeta, index, comparator) => {
+        if (!multiSortMeta || !multiSortMeta[index]) {
+            return;
+        }
+
+        const value1 = ObjectUtils.resolveFieldData(node1.data, multiSortMeta[index].field);
+        const value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
+
+        // check if they are equal handling dates and locales
+        if (ObjectUtils.compare(value1, value2, comparator) === 0) {
+            return multiSortMeta.length - 1 > index ? multisortField(node1, node2, multiSortMeta, index + 1, comparator) : 0;
+        }
+
+        return compareValuesOnSort(value1, value2, comparator, multiSortMeta[index].order);
+    };
+
+    const compareValuesOnSort = (value1, value2, comparator, order) => {
+        return ObjectUtils.sort(value1, value2, order, comparator, (context && context.nullSortOrder) || PrimeReact.nullSortOrder);
+    };
+
+    const filter = (value, field, mode) => {
+        onFilter({
+            value: value,
+            field: field,
+            matchMode: mode
+        });
+    };
+
+    const onFilter = (event) => {
+        setFiltersState((prevFilters) => {
+            const filters = props.onFilter ? props.filters : prevFilters;
+            const newFilters = filters ? { ...filters } : {};
+
+            if (!isFilterBlank(event.value)) {
+                newFilters[event.field] = { value: event.value, matchMode: event.matchMode };
+            } else if (newFilters[event.field]) {
+                delete newFilters[event.field];
+            }
+
+            if (props.onFilter) {
+                props.onFilter({
+                    filters: newFilters
+                });
+            } else {
+                setFirstState(0);
+            }
+
+            if (props.onValueChange) {
+                props.onValueChange(processedData({ filters: newFilters }));
+            }
+
+            return newFilters;
+        });
+    };
+
+    const cloneFilters = (filters) => {
+        filters = filters || props.filters;
+        let cloned = {};
+
+        if (filters) {
+            Object.entries(filters).forEach(([prop, value]) => {
+                cloned[prop] = value;
+            });
+        } else {
+            const columns = getColumns();
+
+            cloned = columns.reduce((filters, col) => {
+                const field = getColumnProp(col, 'filterField') || getColumnProp(col, 'field');
+                const filterFunction = getColumnProp(col, 'filterFunction');
+                const dataType = getColumnProp(col, 'dataType');
+                const matchMode =
+                    getColumnProp(col, 'filterMatchMode') ||
+                    ((context && context.filterMatchModeOptions[dataType]) || PrimeReact.filterMatchModeOptions[dataType]
+                        ? (context && context.filterMatchModeOptions[dataType][0]) || PrimeReact.filterMatchModeOptions[dataType][0]
+                        : FilterMatchMode.STARTS_WITH);
+                let constraint = { value: null, matchMode };
+
+                if (filterFunction) {
+                    FilterService.register(`custom_${field}`, (...args) => filterFunction(...args, { column: col }));
+                }
+
+                filters[field] = constraint;
+
+                return filters;
+            }, {});
+        }
+
+        return cloned;
+    };
+
+    const hasFilter = () => {
+        return ObjectUtils.isNotEmpty(getFilters());
+    };
+
+    const isFilterBlank = (filter) => {
+        if (filter !== null && filter !== undefined) {
+            if ((typeof filter === 'string' && filter.trim().length === 0) || (filter instanceof Array && filter.length === 0)) {
+                return true;
+            }
+
+            return false;
+        }
+
+        return true;
+    };
+
+    const onColumnResizeStart = (event) => {
+        let containerLeft = DomHandler.getOffset(elementRef.current).left;
+
+        resizeColumn.current = event.columnEl;
+        resizeColumnProps.current = event.column;
+        columnResizing.current = true;
+        lastResizerHelperX.current = event.originalEvent.pageX - containerLeft + elementRef.current.scrollLeft;
+
+        bindColumnResizeEvents();
+    };
+
+    const onColumnResize = (event) => {
+        let containerLeft = DomHandler.getOffset(elementRef.current).left;
+
+        !ptCallbacks.isUnstyled() && DomHandler.addClass(elementRef.current, 'p-unselectable-text');
+        resizerHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
+        resizerHelperRef.current.style.top = 0 + 'px';
+        resizerHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
+
+        resizerHelperRef.current.style.display = 'block';
+    };
+
+    const onColumnResizeEnd = (event) => {
+        let delta = resizerHelperRef.current.offsetLeft - lastResizerHelperX.current;
+        let columnWidth = resizeColumn.current.offsetWidth;
+        let newColumnWidth = columnWidth + delta;
+        let minWidth = resizeColumn.current.style.minWidth || 15;
+
+        if (columnWidth + delta > parseInt(minWidth, 10)) {
+            if (props.columnResizeMode === 'fit') {
+                let nextColumn = resizeColumn.current.nextElementSibling;
+                let nextColumnWidth = nextColumn.offsetWidth - delta;
+
+                if (newColumnWidth > 15 && nextColumnWidth > 15) {
+                    if (props.scrollable) {
+                        let scrollableView = findParentScrollableView(resizeColumn.current);
+                        let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablebodytable"]');
+                        let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollableheadertable"]');
+                        let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablefootertable"]');
+                        let resizeColumnIndex = DomHandler.index(resizeColumn.current);
+
+                        resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
+                        resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
+                        resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
+                    } else {
+                        resizeColumn.current.style.width = newColumnWidth + 'px';
+
+                        if (nextColumn) {
+                            nextColumn.style.width = nextColumnWidth + 'px';
+                        }
+                    }
+                }
+            } else if (props.columnResizeMode === 'expand') {
+                if (props.scrollable) {
+                    let scrollableView = findParentScrollableView(resizeColumn.current);
+                    let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablebodytable"]');
+                    let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollableheadertable"]');
+                    let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table[data-pc-section="scrollablefootertable"]');
+
+                    scrollableBodyTable.style.width = scrollableBodyTable.offsetWidth + delta + 'px';
+                    scrollableHeaderTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
+
+                    if (scrollableFooterTable) {
+                        scrollableFooterTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
+                    }
+
+                    let resizeColumnIndex = DomHandler.index(resizeColumn.current);
+
+                    resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
+                    resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
+                    resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
+                } else {
+                    tableRef.current.style.width = tableRef.current.offsetWidth + delta + 'px';
+                    resizeColumn.current.style.width = newColumnWidth + 'px';
+                }
+            }
+
+            if (props.onColumnResizeEnd) {
+                props.onColumnResizeEnd({
+                    element: resizeColumn.current,
+                    column: resizeColumnProps.current,
+                    delta: delta
+                });
+            }
+
+            if (isStateful()) {
+                saveState();
+            }
+        }
+
+        resizerHelperRef.current.style.display = 'none';
+        resizeColumn.current = null;
+        resizeColumnProps.current = null;
+        DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
+
+        unbindColumnResizeEvents();
+    };
+
+    const findParentScrollableView = (column) => {
+        if (column) {
+            let parent = column.parentElement;
+
+            while (parent && DomHandler.getAttribute(parent, 'data-pc-section') !== 'scrollable') {
+                parent = parent.parentElement;
+            }
+
+            return parent;
+        }
+
+        return null;
+    };
+
+    const resizeColGroup = (table, resizeColumnIndex, newColumnWidth, nextColumnWidth) => {
+        if (table) {
+            let colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
+
+            if (colGroup) {
+                let col = colGroup.children[resizeColumnIndex];
+                let nextCol = col.nextElementSibling;
+
+                col.style.width = newColumnWidth + 'px';
+
+                if (nextCol && nextColumnWidth) {
+                    nextCol.style.width = nextColumnWidth + 'px';
+                }
+            } else {
+                throw new Error('Scrollable tables require a colgroup to support resizable columns');
+            }
+        }
+    };
+
+    const bindColumnResizeEvents = () => {
+        bindDocumentMouseMoveListener();
+        bindDocumentMouseUpListener();
+    };
+
+    const unbindColumnResizeEvents = () => {
+        unbindDocumentMouseMoveListener();
+        unbindDocumentMouseUpListener();
+    };
+
+    const onColumnDragStart = (e) => {
+        const { originalEvent: event, column } = e;
+
+        if (columnResizing.current) {
+            event.preventDefault();
+
+            return;
+        }
+
+        iconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
+        iconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
+
+        draggedColumnEl.current = findParentHeader(event.currentTarget);
+        draggedColumn.current = column;
+        event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
+    };
+
+    const onColumnDragOver = (e) => {
+        const { originalEvent: event, column } = e;
+        const dropHeader = findParentHeader(event.currentTarget);
+
+        if (props.reorderableColumns && draggedColumnEl.current && dropHeader && !getColumnProp(column, 'frozen')) {
+            event.preventDefault();
+            let containerOffset = DomHandler.getOffset(elementRef.current);
+            let dropHeaderOffset = DomHandler.getOffset(dropHeader);
+
+            if (draggedColumnEl.current !== dropHeader) {
+                let targetLeft = dropHeaderOffset.left - containerOffset.left;
+                //let targetTop =  containerOffset.top - dropHeaderOffset.top;
+                let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
+
+                reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (iconHeight.current - 1) + 'px';
+                reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
+
+                if (event.pageX > columnCenter) {
+                    reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(iconWidth.current / 2) + 'px';
+                    reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(iconWidth.current / 2) + 'px';
+                    dropPosition.current = 1;
+                } else {
+                    reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(iconWidth.current / 2) + 'px';
+                    reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(iconWidth.current / 2) + 'px';
+                    dropPosition.current = -1;
+                }
+
+                reorderIndicatorUpRef.current.style.display = 'block';
+                reorderIndicatorDownRef.current.style.display = 'block';
+            }
+        }
+    };
+
+    const onColumnDragLeave = (e) => {
+        const event = e.originalEvent;
+
+        if (props.reorderableColumns && draggedColumnEl.current) {
+            event.preventDefault();
+            reorderIndicatorUpRef.current.style.display = 'none';
+            reorderIndicatorDownRef.current.style.display = 'none';
+        }
+    };
+
+    const onColumnDrop = (e) => {
+        const { originalEvent: event, column } = e;
+
+        event.preventDefault();
+
+        if (draggedColumnEl.current) {
+            let dragIndex = DomHandler.index(draggedColumnEl.current);
+            let dropIndex = DomHandler.index(findParentHeader(event.currentTarget));
+            let allowDrop = dragIndex !== dropIndex;
+
+            if (allowDrop && ((dropIndex - dragIndex === 1 && dropPosition.current === -1) || (dragIndex - dropIndex === 1 && dropPosition.current === 1))) {
+                allowDrop = false;
+            }
+
+            if (allowDrop) {
+                let columns = columnOrderState ? getColumns() : React.Children.toArray(props.children);
+                let isSameColumn = (col1, col2) => (getColumnProp(col1, 'columnKey') || getColumnProp(col2, 'columnKey') ? ObjectUtils.equals(col1, col2, 'props.columnKey') : ObjectUtils.equals(col1, col2, 'props.field'));
+                let dragColIndex = columns.findIndex((child) => isSameColumn(child, draggedColumn.current));
+                let dropColIndex = columns.findIndex((child) => isSameColumn(child, column));
+
+                if (dropColIndex < dragColIndex && dropPosition.current === 1) {
+                    dropColIndex++;
+                }
+
+                if (dropColIndex > dragColIndex && dropPosition.current === -1) {
+                    dropColIndex--;
+                }
+
+                ObjectUtils.reorderArray(columns, dragColIndex, dropColIndex);
+
+                let columnOrder = [];
+
+                for (let column of columns) {
+                    columnOrder.push(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'));
+                }
+
+                setColumnOrderState(columnOrder);
+
+                if (props.onColReorder) {
+                    props.onColReorder({
+                        dragIndex: dragColIndex,
+                        dropIndex: dropColIndex,
+                        columns: columns
+                    });
+                }
+            }
+
+            reorderIndicatorUpRef.current.style.display = 'none';
+            reorderIndicatorDownRef.current.style.display = 'none';
+            draggedColumnEl.current.draggable = false;
+            draggedColumnEl.current = null;
+            dropPosition.current = null;
+        }
+    };
+
+    const findParentHeader = (element) => {
+        if (element.nodeName === 'TH') {
+            return element;
+        }
+
+        let parent = element.parentElement;
+
+        while (parent.nodeName !== 'TH') {
+            parent = parent.parentElement;
+
+            if (!parent) {
+                break;
+            }
+        }
+
+        return parent;
+    };
+
+    const getColumnProp = (column, name) => {
+        return ColumnBase.getCProp(column, name);
+    };
+
+    const getExpandedKeys = () => {
+        return props.onToggle ? props.expandedKeys : expandedKeysState;
+    };
+
+    const getFirst = () => {
+        return props.onPage ? props.first : firstState;
+    };
+
+    const getRows = () => {
+        return props.onPage ? props.rows : rowsState;
+    };
+
+    const getSortField = () => {
+        return props.onSort ? props.sortField : sortFieldState;
+    };
+
+    const getSortOrder = () => {
+        return props.onSort ? props.sortOrder : sortOrderState;
+    };
+
+    const getMultiSortMeta = () => {
+        return (props.onSort ? props.multiSortMeta : multiSortMetaState) || [];
+    };
+
+    const getFilters = () => {
+        return props.onFilter ? props.filters : filtersState;
+    };
+
+    const findColumnByKey = (columns, key) => {
+        if (columns && columns.length) {
+            for (let i = 0; i < columns.length; i++) {
+                let child = columns[i];
+
+                if (getColumnProp(child, 'columnKey') === key || getColumnProp(child, 'field') === key) {
+                    return child;
+                }
+            }
+        }
+
+        return null;
+    };
+
+    const getColumns = () => {
+        let columns = React.Children.toArray(props.children);
+
+        if (columns && columns.length) {
+            if (props.reorderableColumns && columnOrderState) {
+                let orderedColumns = [];
+
+                for (let columnKey of columnOrderState) {
+                    let column = findColumnByKey(columns, columnKey);
+
+                    if (column) {
+                        orderedColumns.push(column);
+                    }
+                }
+
+                return [
+                    ...orderedColumns,
+                    ...columns.filter((item) => {
+                        return orderedColumns.indexOf(item) < 0;
+                    })
+                ];
+            }
+
+            return columns;
+        }
+
+        return null;
+    };
+
+    const getTotalRecords = (data) => {
+        return props.lazy ? props.totalRecords : data ? data.length : 0;
+    };
+
+    const isSingleSelectionMode = () => {
+        return props.selectionMode && props.selectionMode === 'single';
+    };
+
+    const isMultipleSelectionMode = () => {
+        return props.selectionMode && props.selectionMode === 'multiple';
+    };
+
+    const isRowSelectionMode = () => {
+        return isSingleSelectionMode() || isMultipleSelectionMode();
+    };
+
+    const getFrozenColumns = (columns) => {
+        let frozenColumns = null;
+
+        for (let col of columns) {
+            if (getColumnProp(col, 'frozen')) {
+                frozenColumns = frozenColumns || [];
+                frozenColumns.push(col);
+            }
+        }
+
+        return frozenColumns;
+    };
+
+    const getScrollableColumns = (columns) => {
+        let scrollableColumns = null;
+
+        for (let col of columns) {
+            if (!getColumnProp(col, 'frozen')) {
+                scrollableColumns = scrollableColumns || [];
+                scrollableColumns.push(col);
+            }
+        }
+
+        return scrollableColumns;
+    };
+
+    const filterLocal = (value) => {
+        let filteredNodes = [];
+        let filters = getFilters();
+        let columns = React.Children.toArray(props.children);
+        const isStrictMode = props.filterMode === 'strict';
+
+        for (let node of value) {
+            let copyNode = { ...node };
+            let localMatch = true;
+            let globalMatch = false;
+
+            for (let j = 0; j < columns.length; j++) {
+                let col = columns[j];
+                let filterMeta = filters ? filters[getColumnProp(col, 'field')] : null;
+                let filterField = getColumnProp(col, 'field');
+                let filterValue;
+                let filterConstraint;
+                let paramsWithoutNode;
+                let options;
+
+                //local
+                if (filterMeta) {
+                    let filterMatchMode = filterMeta.matchMode || getColumnProp(col, 'filterMatchMode') || 'startsWith';
+
+                    filterValue = filterMeta.value;
+                    filterConstraint = filterMatchMode === 'custom' ? getColumnProp(col, 'filterFunction') : FilterService.filters[filterMatchMode];
+                    options = {
+                        rowData: node,
+                        filters,
+                        props,
+                        column: {
+                            filterMeta,
+                            filterField,
+                            props: ColumnBase.getCProps(col)
+                        }
+                    };
+
+                    paramsWithoutNode = { filterField, filterValue, filterConstraint, isStrictMode, options };
+
+                    if (
+                        (isStrictMode && !(findFilteredNodes(copyNode, paramsWithoutNode) || isFilterMatched(copyNode, paramsWithoutNode))) ||
+                        (!isStrictMode && !(isFilterMatched(copyNode, paramsWithoutNode) || findFilteredNodes(copyNode, paramsWithoutNode)))
+                    ) {
+                        localMatch = false;
+                    }
+
+                    if (!localMatch) {
+                        break;
+                    }
+                }
+
+                //global
+                if (props.globalFilter && !globalMatch) {
+                    let copyNodeForGlobal = { ...copyNode };
+
+                    filterValue = props.globalFilter;
+                    filterConstraint = FilterService.filters[props.globalFilterMatchMode];
+                    paramsWithoutNode = { filterField, filterValue, filterConstraint, isStrictMode };
+
+                    if (
+                        (isStrictMode && (findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) || isFilterMatched(copyNodeForGlobal, paramsWithoutNode))) ||
+                        (!isStrictMode && (isFilterMatched(copyNodeForGlobal, paramsWithoutNode) || findFilteredNodes(copyNodeForGlobal, paramsWithoutNode)))
+                    ) {
+                        globalMatch = true;
+                        copyNode = copyNodeForGlobal;
+                    }
+                }
+            }
+
+            let matches = localMatch;
+
+            if (props.globalFilter) {
+                matches = localMatch && globalMatch;
+            }
+
+            if (matches) {
+                filteredNodes.push(copyNode);
+            }
+        }
+
+        return filteredNodes;
+    };
+
+    const findFilteredNodes = (node, paramsWithoutNode) => {
+        if (node) {
+            let matched = false;
+
+            if (node.children) {
+                let childNodes = [...node.children];
+
+                node.children = [];
+
+                for (let childNode of childNodes) {
+                    let copyChildNode = { ...childNode };
+
+                    if (isFilterMatched(copyChildNode, paramsWithoutNode)) {
+                        matched = true;
+                        node.children.push(copyChildNode);
+                    }
+                }
+            }
+
+            if (matched) {
+                return true;
+            }
+        }
+    };
+
+    const isFilterMatched = (node, { filterField, filterValue, filterConstraint, isStrictMode, options }) => {
+        let matched = false;
+        let dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
+
+        if (filterConstraint(dataFieldValue, filterValue, props.filterLocale, options)) {
+            matched = true;
+        }
+
+        if (!matched || (isStrictMode && !isNodeLeaf(node))) {
+            matched = findFilteredNodes(node, { filterField, filterValue, filterConstraint, isStrictMode }) || matched;
+        }
+
+        return matched;
+    };
+
+    const isNodeLeaf = (node) => {
+        return node.leaf === false ? false : !(node.children && node.children.length);
+    };
+
+    const processedData = (localState) => {
+        let data = props.value || [];
+
+        if (!props.lazy) {
+            if (data && data.length) {
+                const filters = (localState && localState.filters) || getFilters();
+                const sortField = (localState && localState.sortField) || getSortField();
+                const sortOrder = (localState && localState.sortOrder) || getSortOrder();
+                const multiSortMeta = (localState && localState.multiSortMeta) || getMultiSortMeta();
+                const columns = getColumns();
+                const sortColumn = columns.find((col) => getColumnProp(col, 'field') === sortField);
+
+                if (sortColumn) {
+                    columnSortable.current = getColumnProp(sortColumn, 'sortable');
+                    columnSortFunction.current = getColumnProp(sortColumn, 'sortFunction');
+                }
+
+                if (ObjectUtils.isNotEmpty(filters) || props.globalFilter) {
+                    data = filterLocal(data, filters);
+                }
+
+                if (sortField || ObjectUtils.isNotEmpty(multiSortMeta)) {
+                    if (props.sortMode === 'single') {
+                        data = sortSingle({ data, field: sortField, order: sortOrder });
+                    } else if (props.sortMode === 'multiple') {
+                        data = sortMultiple({ data, multiSortMeta });
+                    }
+                }
+            }
+        }
+
+        return data;
+    };
+
+    useMountEffect(() => {
+        if (isStateful()) {
+            restoreState();
+        }
+    });
+
+    useUpdateEffect(() => {
+        if (isStateful()) {
+            saveState();
+        }
+    });
+
+    useUpdateEffect(() => {
+        if (childFocusEvent.current) {
+            const nodeElement = childFocusEvent.current.target;
+            const nextElementSibling = nodeElement.nextElementSibling;
+
+            if (nextElementSibling) {
+                nodeElement.tabIndex = '-1';
+                nextElementSibling.tabIndex = '0';
+                DomHandler.focus(nextElementSibling);
+            }
+        }
+    }, [expandedKeysState]);
+
+    React.useImperativeHandle(ref, () => ({
+        props,
+        clearState,
+        filter,
+        getElement: () => elementRef.current,
+        restoreState,
+        restoreTableState,
+        saveState
+    }));
+
+    const createEvent = (event) => {
+        return {
+            first: getFirst(),
+            rows: getRows(),
+            sortField: getSortField(),
+            sortOrder: getSortOrder(),
+            multiSortMeta: getMultiSortMeta(),
+            filters: getFilters(),
+            ...event
+        };
+    };
+
+    const createTableHeader = (columns, columnGroup) => {
+        const sortField = getSortField();
+        const sortOrder = getSortOrder();
+        const multiSortMeta = [...getMultiSortMeta()];
+        const filters = getFilters();
+
+        return (
+            <TreeTableHeader
+                hostName="TreeTable"
+                columns={columns}
+                columnGroup={columnGroup}
+                tabIndex={props.tabIndex}
+                onSort={onSort}
+                sortField={sortField}
+                sortIcon={props.sortIcon}
+                sortOrder={sortOrder}
+                multiSortMeta={multiSortMeta}
+                resizableColumns={props.resizableColumns}
+                onResizeStart={onColumnResizeStart}
+                reorderableColumns={props.reorderableColumns}
+                onDragStart={onColumnDragStart}
+                onDragOver={onColumnDragOver}
+                onDragLeave={onColumnDragLeave}
+                onDrop={onColumnDrop}
+                onFilter={onFilter}
+                filters={filters}
+                filterDelay={props.filterDelay}
+                ptCallbacks={ptCallbacks}
+                metaData={metaData}
+                unstyled={props.unstyled}
+            />
+        );
+    };
+
+    const createTableFooter = (columns, columnGroup) => {
+        return <TreeTableFooter hostName="TreeTable" columns={columns} columnGroup={columnGroup} ptCallbacks={ptCallbacks} metaData={metaData} />;
+    };
+
+    const createTableBody = (value, columns) => {
+        return (
+            <TreeTableBody
+                hostName="TreeTable"
+                checkboxIcon={props.checkboxIcon}
+                columns={columns}
+                contextMenuSelectionKey={props.contextMenuSelectionKey}
+                emptyMessage={props.emptyMessage}
+                expandedKeys={getExpandedKeys()}
+                first={getFirst()}
+                lazy={props.lazy}
+                loading={props.loading}
+                metaData={metaData}
+                metaKeySelection={props.metaKeySelection}
+                onCollapse={props.onCollapse}
+                onContextMenu={props.onContextMenu}
+                onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                onExpand={props.onExpand}
+                onRowClick={props.onRowClick}
+                onRowMouseEnter={props.onRowMouseEnter}
+                onRowMouseLeave={props.onRowMouseLeave}
+                onSelect={props.onSelect}
+                onSelectionChange={props.onSelectionChange}
+                onToggle={onToggle}
+                onUnselect={props.onUnselect}
+                originalOptions={props.value}
+                paginator={props.paginator}
+                propagateSelectionDown={props.propagateSelectionDown}
+                propagateSelectionUp={props.propagateSelectionUp}
+                ptCallbacks={ptCallbacks}
+                rowClassName={props.rowClassName}
+                rows={getRows()}
+                selectOnEdit={props.selectOnEdit}
+                selectionKeys={props.selectionKeys}
+                selectionMode={props.selectionMode}
+                togglerTemplate={props.togglerTemplate}
+                value={value}
+            />
+        );
+    };
+
+    const createPaginator = (position, totalRecords) => {
+        const className = classNames('p-paginator-' + position, props.paginatorClassName);
+
+        return (
+            <Paginator
+                first={getFirst()}
+                rows={getRows()}
+                pageLinkSize={props.pageLinkSize}
+                className={className}
+                onPageChange={onPageChange}
+                template={props.paginatorTemplate}
+                totalRecords={totalRecords}
+                rowsPerPageOptions={props.rowsPerPageOptions}
+                currentPageReportTemplate={props.currentPageReportTemplate}
+                leftContent={props.paginatorLeft}
+                rightContent={props.paginatorRight}
+                alwaysShow={props.alwaysShowPaginator}
+                dropdownAppendTo={props.paginatorDropdownAppendTo}
+                pt={ptCallbacks.ptm('paginator')}
+                unstyled={props.unstyled}
+                __parentMetadata={{ parent: metaData }}
+            />
+        );
+    };
+
+    const createScrollableView = (value, columns, frozen, headerColumnGroup, footerColumnGroup) => {
+        const header = createTableHeader(columns, headerColumnGroup);
+        const footer = createTableFooter(columns, footerColumnGroup);
+        const body = createTableBody(value, columns);
+
+        return (
+            <TreeTableScrollableView hostName="TreeTable" columns={columns} header={header} body={body} footer={footer} scrollHeight={props.scrollHeight} frozen={frozen} frozenWidth={props.frozenWidth} ptCallbacks={ptCallbacks} metaData={metaData} />
+        );
+    };
+
+    const createScrollableTable = (value) => {
+        const columns = getColumns();
+        const frozenColumns = getFrozenColumns(columns);
+        const scrollableColumns = frozenColumns ? getScrollableColumns(columns) : columns;
+        let frozenView;
+        let scrollableView;
+
+        if (frozenColumns) {
+            frozenView = createScrollableView(value, frozenColumns, true, props.frozenHeaderColumnGroup, props.frozenFooterColumnGroup);
+        }
+
+        scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
+        const scrollableWrapperProps = mergeProps(
+            {
+                className: ptCallbacks.cx('scrollableWrapper')
+            },
+            ptCallbacks.ptm('scrollableWrapper')
+        );
+
+        return (
+            <div {...scrollableWrapperProps}>
+                {frozenView}
+                {scrollableView}
+            </div>
+        );
+    };
+
+    const createRegularTable = (value) => {
+        const columns = getColumns();
+        const header = createTableHeader(columns, props.headerColumnGroup);
+        const footer = createTableFooter(columns, props.footerColumnGroup);
+        const body = createTableBody(value, columns);
+
+        const wrapperProps = mergeProps(
+            {
+                className: ptCallbacks.cx('wrapper')
+            },
+            ptCallbacks.ptm('wrapper')
+        );
+
+        const tableProps = mergeProps(
+            {
+                role: 'table',
+                style: props.tableStyle,
+                className: classNames(props.tableClassName, ptCallbacks.cx('table'))
+            },
+            ptCallbacks.ptm('table')
+        );
+
+        return (
+            <div {...wrapperProps}>
+                <table ref={tableRef} {...tableProps}>
+                    {header}
+                    {footer}
+                    {body}
+                </table>
+            </div>
+        );
+    };
+
+    const createTable = (value) => {
+        return props.scrollable ? createScrollableTable(value) : createRegularTable(value);
+    };
+
+    const createLoader = () => {
+        if (props.loading) {
+            const loadingIconProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('loadingIcon')
+                },
+                ptCallbacks.ptm('loadingIcon')
+            );
+            const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
+            const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+            const loadingWrapperProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('loadingWrapper')
+                },
+                ptCallbacks.ptm('loadingWrapper')
+            );
+
+            const loadingOverlayProps = mergeProps(
+                {
+                    className: ptCallbacks.cx('loadingOverlay')
+                },
+                ptCallbacks.ptm('loadingOverlay')
+            );
+
+            return (
+                <div {...loadingWrapperProps}>
+                    <div {...loadingOverlayProps}>{loadingIcon}</div>
+                </div>
+            );
+        }
+
+        return null;
+    };
+
+    const data = processedData();
+
+    const table = createTable(data);
+    const totalRecords = getTotalRecords(data);
+    const headerProps = mergeProps(
+        {
+            className: ptCallbacks.cx('header')
+        },
+        ptCallbacks.ptm('header')
+    );
+    const footerProps = mergeProps(
+        {
+            className: ptCallbacks.cx('footer')
+        },
+        ptCallbacks.ptm('footer')
+    );
+    const resizeHelperProps = mergeProps(
+        {
+            className: ptCallbacks.cx('resizeHelper'),
+            style: { display: 'none' }
+        },
+        ptCallbacks.ptm('resizeHelper')
+    );
+
+    const headerFacet = props.header && <div {...headerProps}>{props.header}</div>;
+    const footerFacet = props.footer && <div {...footerProps}>{props.footer}</div>;
+    const paginatorTop = props.paginator && props.paginatorPosition !== 'bottom' && createPaginator('top', totalRecords);
+    const paginatorBottom = props.paginator && props.paginatorPosition !== 'top' && createPaginator('bottom', totalRecords);
+    const loader = createLoader();
+    const resizeHelper = props.resizableColumns && <div ref={resizerHelperRef} {...resizeHelperProps} />;
+    const reorderIndicatorUpProps = mergeProps(
+        {
+            className: ptCallbacks.cx('reorderIndicatorUp'),
+            style: { position: 'absolute', display: 'none' }
+        },
+        ptCallbacks.ptm('reorderIndicatorUp')
+    );
+    const reorderIndicatorUpIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorUpIcon'));
+    const reorderIndicatorUpIcon = props.reorderableColumns && IconUtils.getJSXIcon(props.reorderIndicatorUpIcon || <ArrowDownIcon {...reorderIndicatorUpIconProps} />, { ...reorderIndicatorUpIconProps }, { props });
+    const reorderIndicatorUp = props.reorderableColumns && (
+        <span ref={reorderIndicatorUpRef} {...reorderIndicatorUpProps}>
+            {reorderIndicatorUpIcon}
+        </span>
+    );
+    const reorderIndicatorDownProps = { className: ptCallbacks.sx('reorderIndicatorDown'), style: { position: 'absolute', display: 'none' } };
+    const reorderIndicatorDownIconProps = mergeProps(ptCallbacks.ptm('reorderIndicatorDownIcon'));
+    const reorderIndicatorDownIcon = IconUtils.getJSXIcon(props.reorderIndicatorDownIcon || <ArrowUpIcon {...reorderIndicatorDownIconProps} />, { ...reorderIndicatorDownIconProps }, { props });
+    const reorderIndicatorDown = props.reorderableColumns && (
+        <span ref={reorderIndicatorDownRef} {...reorderIndicatorDownProps}>
+            {reorderIndicatorDownIcon}
+        </span>
+    );
+
+    const rootProps = mergeProps(
+        {
+            role: 'table',
+            id: props.id,
+            className: classNames(props.className, ptCallbacks.cx('root', { isRowSelectionMode })),
+            style: props.style,
+            'data-scrollselectors': '.p-treetable-wrapper'
+        },
+        TreeTableBase.getOtherProps(props),
+        ptCallbacks.ptm('root')
+    );
+
+    return (
+        <div ref={elementRef} {...rootProps}>
+            {loader}
+            {headerFacet}
+            {paginatorTop}
+            {table}
+            {paginatorBottom}
+            {footerFacet}
+            {resizeHelper}
+            {reorderIndicatorUp}
+            {reorderIndicatorDown}
+        </div>
+    );
+});
+
+TreeTable.displayName = 'TreeTable';
diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
new file mode 100644
index 0000000000..912164cd3f
--- /dev/null
+++ b/components/lib/treetable/TreeTableBase.js
@@ -0,0 +1,308 @@
+import { FilterMatchMode } from '../api/Api';
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const styles = `
+@layer primereact {
+    .p-treetable {
+        position: relative;
+    }
+    .p-treetable > .p-treetable-wrapper {
+        overflow: auto;
+    }
+    .p-treetable table {
+        border-collapse: collapse;
+        width: 100%;
+        table-layout: fixed;
+    }
+    .p-treetable .p-sortable-column {
+        cursor: pointer;
+        user-select: none;
+    }
+    .p-treetable-selectable .p-treetable-tbody > tr {
+        cursor: pointer;
+    }
+    .p-treetable-toggler {
+        cursor: pointer;
+        user-select: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        vertical-align: middle;
+        overflow: hidden;
+        position: relative;
+    }
+    .p-treetable-toggler + .p-checkbox {
+        vertical-align: middle;
+    }
+    .p-treetable-toggler + .p-checkbox + span {
+        vertical-align: middle;
+    }
+    /* Resizable */
+    .p-treetable-resizable > .p-treetable-wrapper {
+        overflow-x: auto;
+    }
+    .p-treetable-resizable .p-treetable-thead > tr > th,
+    .p-treetable-resizable .p-treetable-tfoot > tr > td,
+    .p-treetable-resizable .p-treetable-tbody > tr > td {
+        overflow: hidden;
+    }
+    .p-treetable-resizable .p-resizable-column {
+        background-clip: padding-box;
+        position: relative;
+    }
+    .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+        display: none;
+    }
+    .p-treetable .p-column-resizer {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin: 0;
+        width: 0.5rem;
+        height: 100%;
+        padding: 0px;
+        cursor: col-resize;
+        border: 1px solid transparent;
+    }
+    .p-treetable .p-column-resizer-helper {
+        width: 1px;
+        position: absolute;
+        z-index: 10;
+        display: none;
+    }
+    /* Scrollable */
+    .p-treetable-scrollable-wrapper {
+        position: relative;
+    }
+    .p-treetable-scrollable-header,
+    .p-treetable-scrollable-footer {
+        overflow: hidden;
+        border: 0 none;
+    }
+    .p-treetable-scrollable-body {
+        overflow: auto;
+        position: relative;
+    }
+    .p-treetable-virtual-table {
+        position: absolute;
+    }
+    /* Frozen Columns */
+    .p-treetable-frozen-view .p-treetable-scrollable-body {
+        overflow: hidden;
+    }
+    .p-treetable-unfrozen-view {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+    }
+    /* Reorder */
+    .p-treetable-reorder-indicator-up,
+    .p-treetable-reorder-indicator-down {
+        position: absolute;
+        display: none;
+    }
+    /* Loader */
+    .p-treetable .p-treetable-loading-overlay {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+    }
+    /* Alignment */
+    .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+    .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+    .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+        text-align: left;
+        justify-content: flex-start;
+    }
+    .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+    .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+    .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+        text-align: right;
+        justify-content: flex-end;
+    }
+    .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+    .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+    .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+        text-align: center;
+        justify-content: center;
+    }
+}
+`;
+
+const classes = {
+    root: ({ props, isRowSelectionMode }) =>
+        classNames('p-treetable p-component', {
+            'p-treetable-hoverable-rows': props.rowHover,
+            'p-treetable-selectable': isRowSelectionMode(),
+            'p-treetable-resizable': props.resizableColumns,
+            'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
+            'p-treetable-striped': props.stripedRows,
+            'p-treetable-gridlines': props.showGridlines
+        }),
+    loadingIcon: 'p-treetable-loading-icon',
+    loadingWrapper: 'p-treetable-loading',
+    loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
+    header: 'p-treetable-header',
+    checkIcon: 'p-checkbox-icon',
+    footer: 'p-treetable-footer',
+    resizeHelper: 'p-column-resizer-helper',
+    reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
+    reorderIndicatorDown: 'p-treetable-reorder-indicator-down',
+    wrapper: 'p-treetable-wrapper',
+    table: ({ props }) =>
+        classNames('p-treetable-table', {
+            'p-treetable-scrollable-table': props.scrollable,
+            'p-treetable-resizable-table': props.resizableColumns,
+            'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+        }),
+    scrollableWrapper: 'p-treetable-wrapper p-treetable-scrollable-wrapper',
+    thead: 'p-treetable-thead',
+    tbody: 'p-treetable-tbody',
+    tfoot: 'p-treetable-tfoot',
+    emptyMessage: 'p-treetable-emptymessage',
+    bodyCell: ({ bodyProps: props, editingState, align }) =>
+        classNames({
+            'p-editable-column': props.editor,
+            'p-cell-editing': props.editor ? editingState : false,
+            [`p-align-${align}`]: !!align
+        }),
+    sortBadge: 'p-sortable-column-badge',
+    headerTitle: 'p-column-title',
+    headerContent: 'p-column-header-content',
+    headerCell: ({ headerProps: props, frozen, column, options, getColumnProp, sorted, align }) =>
+        options.filterOnly
+            ? classNames('p-filter-column', { 'p-frozen-column': frozen })
+            : classNames({
+                  'p-sortable-column': getColumnProp(column, 'sortable'),
+                  'p-highlight': sorted,
+                  'p-frozen-column': frozen,
+                  'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable'),
+                  'p-reorderable-column': props.reorderableColumns && getColumnProp(column, 'reorderable') && !frozen,
+                  [`p-align-${align}`]: !!align
+              }),
+    columnResizer: 'p-column-resizer p-clickable',
+    sortIcon: 'p-sortable-column-icon',
+    row: ({ isSelected, rowProps: props }) => ({
+        'p-highlight': isSelected(),
+        'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
+        'p-row-odd': parseInt(String(props.rowIndex).split('_').pop(), 10) % 2 !== 0
+    }),
+    rowCheckbox: ({ partialChecked }) => classNames('p-treetable-checkbox', { 'p-indeterminate': partialChecked }),
+    rowToggler: 'p-treetable-toggler p-link p-unselectable-text',
+    rowTogglerIcon: 'p-treetable-toggler-icon',
+    scrollableBody: 'p-treetable-scrollable-body',
+    scrollableHeaderTable: 'p-treetable-scrollable-header-table',
+    scrollableHeaderBox: 'p-treetable-scrollable-header-box',
+    scrollableHeader: 'p-treetable-scrollable-header',
+    scrollableBodyTable: 'p-treetable-scrollable-body-table',
+    scrollableFooter: 'p-treetable-scrollable-footer',
+    scrollableFooterBox: 'p-treetable-scrollable-footer-box',
+    scrollableFooterTable: 'p-treetable-scrollable-footer-table',
+    scrollable: ({ scrolaableProps: props }) => classNames('p-treetable-scrollable-view', { 'p-treetable-frozen-view': props.frozen, 'p-treetable-unfrozen-view': !props.frozen && props.frozenWidth }),
+    scrollableColgroup: 'p-treetable-scrollable-colgroup'
+};
+
+export const TreeTableBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'TreeTable',
+        alwaysShowPaginator: true,
+        checkboxIcon: null,
+        className: null,
+        columnResizeMode: 'fit',
+        contextMenuSelectionKey: null,
+        currentPageReportTemplate: '({currentPage} of {totalPages})',
+        customRestoreState: null,
+        customSaveState: null,
+        defaultSortOrder: 1,
+        emptyMessage: null,
+        expandedKeys: null,
+        filterDelay: 300,
+        filterLocale: undefined,
+        filterMode: 'lenient',
+        filters: null,
+        first: null,
+        footer: null,
+        footerColumnGroup: null,
+        frozenFooterColumnGroup: null,
+        frozenHeaderColumnGroup: null,
+        frozenWidth: null,
+        globalFilter: null,
+        globalFilterMatchMode: FilterMatchMode.CONTAINS,
+        header: null,
+        headerColumnGroup: null,
+        id: null,
+        lazy: false,
+        loading: false,
+        loadingIcon: null,
+        metaKeySelection: false,
+        multiSortMeta: null,
+        onColReorder: null,
+        onCollapse: null,
+        onColumnResizeEnd: null,
+        onContextMenu: null,
+        onContextMenuSelectionChange: null,
+        onExpand: null,
+        onFilter: null,
+        onPage: null,
+        onRowClick: null,
+        onRowMouseEnter: null,
+        onRowMouseLeave: null,
+        onSelect: null,
+        onSelectionChange: null,
+        onSort: null,
+        onStateRestore: null,
+        onStateSave: null,
+        onToggle: null,
+        onUnselect: null,
+        onValueChange: null,
+        pageLinkSize: 5,
+        paginator: false,
+        paginatorClassName: null,
+        paginatorDropdownAppendTo: null,
+        paginatorLeft: null,
+        paginatorPosition: 'bottom',
+        paginatorRight: null,
+        paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
+        propagateSelectionDown: true,
+        propagateSelectionUp: true,
+        removableSort: false,
+        reorderIndicatorDownIcon: null,
+        reorderIndicatorUpIcon: null,
+        reorderableColumns: false,
+        resizableColumns: false,
+        rowClassName: null,
+        rowHover: false,
+        rows: null,
+        rowsPerPageOptions: null,
+        scrollHeight: null,
+        scrollable: false,
+        selectOnEdit: true,
+        selectionKeys: null,
+        selectionMode: null,
+        showGridlines: false,
+        sortField: null,
+        sortIcon: null,
+        sortMode: 'single',
+        sortOrder: null,
+        stateKey: null,
+        stateStorage: null,
+        stripedRows: false,
+        style: null,
+        tabIndex: 0,
+        tableClassName: null,
+        tableStyle: null,
+        totalRecords: null,
+        value: null,
+        children: undefined,
+        togglerTemplate: null
+    },
+    css: {
+        classes,
+        styles
+    }
+});
diff --git a/components/lib/treetable/TreeTableBody.js b/components/lib/treetable/TreeTableBody.js
new file mode 100644
index 0000000000..fb7e91bd2c
--- /dev/null
+++ b/components/lib/treetable/TreeTableBody.js
@@ -0,0 +1,273 @@
+import * as React from 'react';
+import { localeOption } from '../api/Api';
+import { useMergeProps } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+import { TreeTableRow } from './TreeTableRow';
+
+export const TreeTableBody = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const isSingleSelectionMode = props.selectionMode === 'single';
+    const isMultipleSelectionMode = props.selectionMode === 'multiple';
+    const { ptm, cx } = props.ptCallbacks;
+
+    const getPTOptions = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            ...options
+        });
+    };
+
+    const flattenizeTree = (nodes) => {
+        let rows = [];
+
+        nodes = nodes || props.value;
+
+        for (let node of nodes) {
+            rows.push(node.key);
+
+            if (isExpandedKey(node.key)) {
+                rows = rows.concat(flattenizeTree(node.children));
+            }
+        }
+
+        return rows;
+    };
+
+    const isExpandedKey = (key) => {
+        return props.expandedKeys && !!props.expandedKeys[key];
+    };
+
+    const onRowClick = (event, node) => {
+        if (props.onRowClick) {
+            props.onRowClick({
+                originalEvent: event,
+                node: node
+            });
+        }
+
+        const targetNode = event.target.nodeName;
+
+        if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.getAttribute(event.target, 'data-pc-section') === 'columnresizer') {
+            return;
+        }
+
+        if ((isSingleSelectionMode || isMultipleSelectionMode) && node.selectable !== false) {
+            let selectionKeys;
+            const selected = isSelected(node);
+            const metaSelection = props.metaKeySelection;
+            const flatKeys = flattenizeTree();
+            const rowIndex = flatKeys.findIndex((key) => key === node.key);
+
+            if (isMultipleSelectionMode && event.shiftKey) {
+                DomHandler.clearSelection();
+
+                // find first selected row
+                const anchorRowIndex = flatKeys.findIndex((key) => props.selectionKeys[key]);
+                const rangeStart = Math.min(rowIndex, anchorRowIndex);
+                const rangeEnd = Math.max(rowIndex, anchorRowIndex);
+
+                selectionKeys = { ...props.selectionKeys };
+
+                for (let i = rangeStart; i <= rangeEnd; i++) {
+                    const rowKey = flatKeys[i];
+
+                    selectionKeys[rowKey] = true;
+                }
+            } else {
+                //anchorRowIndex = rowIndex;
+
+                if (metaSelection) {
+                    let metaKey = event.metaKey || event.ctrlKey;
+
+                    if (selected && metaKey) {
+                        if (isSingleSelectionMode) {
+                            selectionKeys = null;
+                        } else {
+                            selectionKeys = { ...props.selectionKeys };
+                            delete selectionKeys[node.key];
+                        }
+
+                        if (props.onUnselect) {
+                            props.onUnselect({
+                                originalEvent: event,
+                                node: node
+                            });
+                        }
+                    } else {
+                        if (isSingleSelectionMode) {
+                            selectionKeys = node.key;
+                        } else if (isMultipleSelectionMode) {
+                            selectionKeys = !metaKey ? {} : props.selectionKeys ? { ...props.selectionKeys } : {};
+                            selectionKeys[node.key] = true;
+                        }
+
+                        if (props.onSelect) {
+                            props.onSelect({
+                                originalEvent: event,
+                                node: node
+                            });
+                        }
+                    }
+                } else if (isSingleSelectionMode) {
+                    if (selected) {
+                        selectionKeys = null;
+
+                        if (props.onUnselect) {
+                            props.onUnselect({
+                                originalEvent: event,
+                                node: node
+                            });
+                        }
+                    } else {
+                        selectionKeys = node.key;
+
+                        if (props.onSelect) {
+                            props.onSelect({
+                                originalEvent: event,
+                                node: node
+                            });
+                        }
+                    }
+                } else if (selected) {
+                    selectionKeys = { ...props.selectionKeys };
+                    delete selectionKeys[node.key];
+
+                    if (props.onUnselect) {
+                        props.onUnselect({
+                            originalEvent: event,
+                            node: node
+                        });
+                    }
+                } else {
+                    selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
+                    selectionKeys[node.key] = true;
+
+                    if (props.onSelect) {
+                        props.onSelect({
+                            originalEvent: event,
+                            node: node
+                        });
+                    }
+                }
+            }
+
+            if (props.onSelectionChange) {
+                props.onSelectionChange({
+                    originalEvent: event,
+                    value: selectionKeys
+                });
+            }
+        }
+    };
+
+    const isSelected = (node) => {
+        if ((isSingleSelectionMode || isMultipleSelectionMode) && props.selectionKeys) {
+            return isSingleSelectionMode ? props.selectionKeys === node.key : props.selectionKeys[node.key] !== undefined;
+        }
+
+        return false;
+    };
+
+    const createRow = (node, index) => {
+        return (
+            <TreeTableRow
+                hostName={props.hostName}
+                key={`${node.key || JSON.stringify(node.data)}_${index}`}
+                level={0}
+                rowIndex={index}
+                ariaSetSize={props.value.length}
+                ariaPosInSet={index + 1}
+                selectOnEdit={props.selectOnEdit}
+                node={node}
+                originalOptions={props.originalOptions}
+                checkboxIcon={props.checkboxIcon}
+                columns={props.columns}
+                expandedKeys={props.expandedKeys}
+                onToggle={props.onToggle}
+                togglerTemplate={props.togglerTemplate}
+                onExpand={props.onExpand}
+                onCollapse={props.onCollapse}
+                selectionMode={props.selectionMode}
+                selectionKeys={props.selectionKeys}
+                onSelectionChange={props.onSelectionChange}
+                metaKeySelection={props.metaKeySelection}
+                onRowClick={onRowClick}
+                onRowMouseEnter={props.onRowMouseEnter}
+                onRowMouseLeave={props.onRowMouseLeave}
+                onSelect={props.onSelect}
+                onUnselect={props.onUnselect}
+                propagateSelectionUp={props.propagateSelectionUp}
+                propagateSelectionDown={props.propagateSelectionDown}
+                rowClassName={props.rowClassName}
+                contextMenuSelectionKey={props.contextMenuSelectionKey}
+                onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                onContextMenu={props.onContextMenu}
+                ptCallbacks={props.ptCallbacks}
+                metaData={props.metaData}
+            />
+        );
+    };
+
+    const createRows = () => {
+        if (props.paginator && !props.lazy) {
+            let rpp = props.rows || 0;
+            let startIndex = props.first || 0;
+            let endIndex = startIndex + rpp;
+            let rows = [];
+
+            for (let i = startIndex; i < endIndex; i++) {
+                let rowData = props.value[i];
+
+                if (rowData) {
+                    rows.push(createRow(props.value[i]));
+                } else {
+                    break;
+                }
+            }
+
+            return rows;
+        }
+
+        return props.value.map(createRow);
+    };
+
+    const createEmptyMessage = () => {
+        if (props.loading) {
+            return null;
+        }
+
+        const colSpan = props.columns ? props.columns.length : null;
+        const content = ObjectUtils.getJSXElement(props.emptyMessage, { props: props.tableProps }) || localeOption('emptyMessage');
+        const emptyMessageProps = mergeProps(
+            {
+                className: cx('emptyMessage')
+            },
+            getPTOptions('emptyMessage')
+        );
+        const emptyMessageCellProps = mergeProps(
+            {
+                colSpan
+            },
+            getPTOptions('emptyMessageCell')
+        );
+
+        return (
+            <tr {...emptyMessageProps}>
+                <td {...emptyMessageCellProps}>{content}</td>
+            </tr>
+        );
+    };
+
+    const content = props.value && props.value.length ? createRows() : createEmptyMessage();
+    const tbodyProps = mergeProps(
+        {
+            role: 'rowgroup',
+            className: cx('tbody')
+        },
+        getPTOptions('tbody')
+    );
+
+    return <tbody {...tbodyProps}>{content}</tbody>;
+});
+
+TreeTableBody.displayName = 'TreeTableBody';
diff --git a/components/lib/treetable/TreeTableBodyCell.js b/components/lib/treetable/TreeTableBodyCell.js
new file mode 100644
index 0000000000..1f07244390
--- /dev/null
+++ b/components/lib/treetable/TreeTableBodyCell.js
@@ -0,0 +1,259 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { useEventListener, useMergeProps, useUnmountEffect } from '../hooks/Hooks';
+import { OverlayService } from '../overlayservice/OverlayService';
+import { DomHandler, ObjectUtils, classNames } from '../utils/Utils';
+
+export const TreeTableBodyCell = (props) => {
+    const [editingState, setEditingState] = React.useState(false);
+    const elementRef = React.useRef(null);
+    const keyHelperRef = React.useRef(null);
+    const selfClick = React.useRef(false);
+    const overlayEventListener = React.useRef(null);
+    const tabIndexTimeout = React.useRef(null);
+    const mergeProps = useMergeProps();
+    const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
+    const getColumnProps = (column) => ColumnBase.getCProps(column);
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+
+    const getColumnPTOptions = (key) => {
+        const isSingleSelectionMode = props.metaData.props.selectionMode === 'single';
+        const isMultipleSelectionMode = props.metaData.props.selectionMode === 'multiple';
+        const cProps = getColumnProps(props.column);
+        const columnMetadata = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            state: {
+                editing: editingState
+            },
+            context: {
+                index: props.index,
+                selectable: isSingleSelectionMode || isMultipleSelectionMode,
+                selected: props.selected,
+                scrollable: props.metaData.props.scrollable,
+                frozen: getColumnProp('frozen'),
+                showGridlines: props.metaData.props.showGridlines
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata));
+    };
+
+    const field = getColumnProp('field') || `field_${props.index}`;
+
+    const getCellParams = () => {
+        return {
+            value: resolveFieldData(),
+            field: field,
+            rowData: props.rowData,
+            rowIndex: props.rowIndex,
+            cellIndex: props.index,
+            selected: isSelected(),
+            column: props.column,
+            props
+        };
+    };
+
+    const getCellCallbackParams = (event) => {
+        const params = getCellParams();
+
+        return {
+            originalEvent: event,
+            ...params
+        };
+    };
+
+    const resolveFieldData = (data) => {
+        return ObjectUtils.resolveFieldData(data || props.node.data, field);
+    };
+
+    const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
+        type: 'click',
+        listener: (e) => {
+            if (!selfClick.current && isOutsideClicked(e.target)) {
+                switchCellToViewMode(e);
+            }
+
+            selfClick.current = false;
+        },
+        when: getColumnProp('editor')
+    });
+
+    const onClick = (event) => {
+        if (getColumnProp('editor') && !editingState && (props.selectOnEdit || (!props.selectOnEdit && props.selected))) {
+            selfClick.current = true;
+
+            const params = getCellCallbackParams(event);
+            const onBeforeCellEditShow = getColumnProp('onBeforeCellEditShow');
+
+            if (onBeforeCellEditShow) {
+                // if user returns false do not show the editor
+                if (onBeforeCellEditShow(params) === false) {
+                    return;
+                }
+
+                // if user prevents default stop the editor
+                if (event && event.defaultPrevented) {
+                    return;
+                }
+            }
+
+            setEditingState(true);
+
+            const onCellEditInit = getColumnProp('onCellEditInit');
+
+            if (onCellEditInit) {
+                if (onCellEditInit(params) === false) {
+                    return;
+                }
+
+                // if user prevents default stop the editor
+                if (event && event.defaultPrevented) {
+                    return;
+                }
+            }
+
+            bindDocumentClickListener();
+
+            overlayEventListener.current = (e) => {
+                if (!isOutsideClicked(e.target)) {
+                    selfClick.current = true;
+                }
+            };
+
+            OverlayService.on('overlay-click', overlayEventListener.current);
+        }
+    };
+
+    const onKeyDown = (event) => {
+        if (event.which === 13 || event.which === 9) {
+            switchCellToViewMode(event);
+        }
+    };
+
+    const isOutsideClicked = (target) => {
+        return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
+    };
+
+    const closeCell = () => {
+        /* When using the 'tab' key, the focus event of the next cell is not called in IE. */
+        setTimeout(() => {
+            setEditingState(false);
+            unbindDocumentClickListener();
+            OverlayService.off('overlay-click', overlayEventListener.current);
+            overlayEventListener.current = null;
+        }, 1);
+    };
+
+    const onEditorFocus = (event) => {
+        onClick(event);
+    };
+
+    const switchCellToViewMode = (event) => {
+        if (props.cellEditValidator) {
+            let valid = props.cellEditValidator({
+                originalEvent: event,
+                columnProps: props
+            });
+
+            if (valid) {
+                closeCell();
+            }
+        } else {
+            closeCell();
+        }
+    };
+
+    const isSelected = () => {
+        return props.selection ? (props.selection instanceof Array ? findIndex(props.selection) > -1 : equals(props.selection)) : false;
+    };
+
+    React.useEffect(() => {
+        if (elementRef.current && getColumnProp('editor')) {
+            clearTimeout(tabIndexTimeout.current);
+
+            if (editingState) {
+                let focusable = DomHandler.findSingle(elementRef.current, 'input');
+
+                if (focusable && document.activeElement !== focusable && !focusable.hasAttribute('data-isCellEditing')) {
+                    focusable.setAttribute('data-isCellEditing', true);
+                    focusable.focus();
+                }
+
+                keyHelperRef.current.tabIndex = -1;
+            } else {
+                tabIndexTimeout.current = setTimeout(() => {
+                    if (keyHelperRef.current) {
+                        keyHelperRef.current.setAttribute('tabindex', 0);
+                    }
+                }, 50);
+            }
+        }
+    });
+
+    useUnmountEffect(() => {
+        if (overlayEventListener.current) {
+            OverlayService.off('overlay-click', overlayEventListener.current);
+            overlayEventListener.current = null;
+        }
+    });
+
+    const bodyClassName = ObjectUtils.getPropValue(props.bodyClassName, props.node.data, { field: props.field, rowIndex: props.rowIndex, props: props });
+    const style = props.bodyStyle || props.style;
+    const columnEditor = getColumnProp('editor');
+    let content;
+
+    if (editingState) {
+        if (columnEditor) {
+            content = ObjectUtils.getJSXElement(columnEditor, { node: props.node, rowData: props.rowData, value: ObjectUtils.resolveFieldData(props.node.data, props.field), field: props.field, rowIndex: props.rowIndex, props });
+        } else {
+            throw new Error('Editor is not found on column.');
+        }
+    } else if (props.body) {
+        content = ObjectUtils.getJSXElement(props.body, props.node, { field: props.field, rowIndex: props.rowIndex, props });
+    } else {
+        content = ObjectUtils.resolveFieldData(props.node.data, props.field);
+    }
+
+    const editorKeyHelperProps = mergeProps(
+        {
+            tabIndex: 0,
+            ref: keyHelperRef,
+            className: 'p-cell-editor-key-helper p-hidden-accessible',
+            onFocus: (e) => onEditorFocus(e)
+        },
+        getColumnPTOptions('editorKeyHelperLabel')
+    );
+
+    const editorKeyHelperLabelProps = mergeProps(getColumnPTOptions('editorKeyHelper'));
+    /* eslint-disable */
+    const editorKeyHelper = columnEditor && (
+        <a {...editorKeyHelperProps}>
+            <span {...editorKeyHelperLabelProps}></span>
+        </a>
+    );
+    const align = getColumnProp('align');
+    /* eslint-enable */
+    const bodyCellProps = mergeProps(
+        {
+            role: 'cell',
+            className: classNames(bodyClassName || props.className, cx('bodyCell', { bodyProps: props, editingState, align })),
+            style,
+            onClick: (e) => onClick(e),
+            onKeyDown: (e) => onKeyDown(e)
+        },
+        getColumnPTOptions('root'),
+        getColumnPTOptions('bodyCell')
+    );
+
+    return (
+        <td ref={elementRef} {...bodyCellProps}>
+            {props.children}
+            {editorKeyHelper}
+            {content}
+        </td>
+    );
+};
+
+TreeTableBodyCell.displayName = 'TreeTableBodyCell';
diff --git a/components/lib/treetable/TreeTableFooter.js b/components/lib/treetable/TreeTableFooter.js
new file mode 100644
index 0000000000..13898d8c66
--- /dev/null
+++ b/components/lib/treetable/TreeTableFooter.js
@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { ColumnGroupBase } from '../columngroup/ColumnGroupBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { RowBase } from '../row/RowBase';
+import { ObjectUtils } from '../utils/Utils';
+import { PrimeReactContext } from '../api/Api';
+
+export const TreeTableFooter = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const context = React.useContext(PrimeReactContext);
+
+    const getColumnProp = (column, name) => {
+        return ColumnBase.getCProp(column, name);
+    };
+
+    const getColumnProps = (column) => {
+        return ColumnBase.getCProps(column);
+    };
+
+    const getColumnPTOptions = (column, key) => {
+        const cProps = getColumnProps(column);
+        const columnMetadata = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata));
+    };
+
+    const createFooterCell = (column, index) => {
+        const footerCellProps = mergeProps(
+            {
+                key: column.field || index,
+                className: getColumnProp(column, 'footerClassName') || getColumnProp(column, 'className'),
+                style: getColumnProp(column, 'footerStyle') || getColumnProp(column, 'style'),
+                rowSpan: getColumnProp(column, 'rowSpan'),
+                colSpan: getColumnProp(column, 'colSpan')
+            },
+            getColumnPTOptions(column, 'footerCell')
+        );
+
+        const content = ObjectUtils.getJSXElement(getColumnProp(column, 'footer'), { props: getColumnProps(column) });
+
+        return <td {...footerCellProps}>{content}</td>;
+    };
+
+    const createFooterRow = (row, index) => {
+        const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
+        const rowFooterCells = rowColumns.map(createFooterCell);
+        const footerRowProps = mergeProps(ptm('footerRow', { hostName: props.hostName, role: 'row' }), RowBase.getProps(row.props, context));
+
+        return (
+            <tr {...footerRowProps} key={index}>
+                {rowFooterCells}
+            </tr>
+        );
+    };
+
+    const createColumnGroup = () => {
+        let rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
+
+        return rows.map(createFooterRow);
+    };
+
+    const createColumns = (columns) => {
+        if (columns) {
+            const headerCells = columns.map(createFooterCell);
+            const footerRowProps = mergeProps(ptm('footerRow', { hostName: props.hostName }));
+
+            return <tr {...footerRowProps}>{headerCells}</tr>;
+        }
+
+        return null;
+    };
+
+    const hasFooter = () => {
+        return props.columnGroup ? true : props.columns ? props.columns.some((col) => col && getColumnProp(col, 'footer')) : false;
+    };
+
+    const content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
+
+    if (hasFooter()) {
+        const tfootProps = mergeProps(
+            {
+                role: 'rowgroup',
+                className: cx('tfoot')
+            },
+            ptm('tfoot', { hostName: props.hostName })
+        );
+
+        return <tfoot {...tfootProps}>{content}</tfoot>;
+    }
+
+    return null;
+});
+
+TreeTableFooter.displayName = 'TreeTableFooter';
diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js
new file mode 100644
index 0000000000..ec4f612635
--- /dev/null
+++ b/components/lib/treetable/TreeTableHeader.js
@@ -0,0 +1,431 @@
+import * as React from 'react';
+import { ColumnBase } from '../column/ColumnBase';
+import { ColumnGroupBase } from '../columngroup/ColumnGroupBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { SortAltIcon } from '../icons/sortalt';
+import { SortAmountDownIcon } from '../icons/sortamountdown';
+import { SortAmountUpAltIcon } from '../icons/sortamountupalt';
+import { InputText } from '../inputtext/InputText';
+import { RowBase } from '../row/RowBase';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { PrimeReactContext } from '../api/Api';
+
+export const TreeTableHeader = React.memo((props) => {
+    const mergeProps = useMergeProps();
+    const { ptm, ptmo, cx } = props.ptCallbacks;
+    const filterTimeout = React.useRef(null);
+    const context = React.useContext(PrimeReactContext);
+
+    const getColumnProp = (column, ...args) => {
+        return column ? (typeof args[0] === 'string' ? ColumnBase.getCProp(column, args[0]) : ColumnBase.getCProp(args[0] || column, args[1])) : null;
+    };
+
+    const getColumnProps = (column) => ColumnBase.getCProps(column);
+
+    const getColumnPTOptions = (column, key, params) => {
+        const cProps = getColumnProps(column);
+        const columnMetadata = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            ...params
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata));
+    };
+
+    const onHeaderClick = (event, column) => {
+        if (getColumnProp(column, 'sortable')) {
+            const targetNode = event.target;
+
+            if (
+                DomHandler.getAttribute(targetNode, 'data-p-sortable-column') === true ||
+                DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headertitle' ||
+                DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
+                DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
+                (targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]'))
+            ) {
+                props.onSort({
+                    originalEvent: event,
+                    sortField: getColumnProp(column, 'sortField') || getColumnProp(column, 'field'),
+                    sortFunction: getColumnProp(column, 'sortFunction'),
+                    sortable: getColumnProp(column, 'sortable')
+                });
+
+                DomHandler.clearSelection();
+            }
+        }
+    };
+
+    const onHeaderMouseDown = (event, column) => {
+        if (props.reorderableColumns && getColumnProp(column, 'reorderable')) {
+            if (event.target.nodeName !== 'INPUT') {
+                event.currentTarget.draggable = true;
+            } else if (event.target.nodeName === 'INPUT') {
+                event.currentTarget.draggable = false;
+            }
+        }
+    };
+
+    const onHeaderKeyDown = (event, column) => {
+        if (event.key === 'Enter' || event.code === 'Space') {
+            onHeaderClick(event, column);
+            event.preventDefault();
+        }
+    };
+
+    const getMultiSortMetaDataIndex = (column) => {
+        if (props.multiSortMeta) {
+            for (let i = 0; i < props.multiSortMeta.length; i++) {
+                if (props.multiSortMeta[i].field === getColumnProp(column, 'field')) {
+                    return i;
+                }
+            }
+        }
+
+        return -1;
+    };
+
+    const onResizerMouseDown = (event, column) => {
+        if (props.resizableColumns && props.onResizeStart) {
+            props.onResizeStart({
+                originalEvent: event,
+                columnEl: event.target.parentElement,
+                column: column
+            });
+        }
+    };
+
+    const onDragStart = (event, column) => {
+        if (props.onDragStart) {
+            props.onDragStart({
+                originalEvent: event,
+                column
+            });
+        }
+    };
+
+    const onDragOver = (event, column) => {
+        if (props.onDragOver) {
+            props.onDragOver({
+                originalEvent: event,
+                column
+            });
+        }
+    };
+
+    const onDragLeave = (event, column) => {
+        if (props.onDragLeave) {
+            props.onDragLeave({
+                originalEvent: event,
+                column
+            });
+        }
+    };
+
+    const onDrop = (event, column) => {
+        if (props.onDrop) {
+            props.onDrop({
+                originalEvent: event,
+                column
+            });
+        }
+    };
+
+    const onFilterInput = (e, column) => {
+        if (getColumnProp(column, 'filter') && props.onFilter) {
+            if (filterTimeout.current) {
+                clearTimeout(filterTimeout.current);
+            }
+
+            let filterValue = e.target.value;
+
+            filterTimeout.current = setTimeout(() => {
+                props.onFilter({
+                    value: filterValue,
+                    field: getColumnProp(column, 'field'),
+                    matchMode: getColumnProp(column, 'filterMatchMode') || 'startsWith'
+                });
+                filterTimeout.current = null;
+            }, props.filterDelay);
+        }
+    };
+
+    const hasColumnFilter = (columns) => {
+        if (columns) {
+            for (let col of columns) {
+                if (getColumnProp(col, 'filter')) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    };
+
+    const getAriaSort = (column, sorted, sortOrder) => {
+        if (getColumnProp(column, 'sortable')) {
+            if (sorted && sortOrder < 0) {
+                return 'descending';
+            } else if (sorted && sortOrder > 0) {
+                return 'ascending';
+            }
+
+            return 'none';
+        }
+
+        return null;
+    };
+
+    const createSortIcon = (column, sorted, sortOrder) => {
+        if (getColumnProp(column, 'sortable')) {
+            const sortIconProps = mergeProps(
+                {
+                    className: cx('sortIcon')
+                },
+                getColumnPTOptions(column, 'sortIcon', {
+                    context: {
+                        sorted
+                    }
+                })
+            );
+            let icon = sorted ? sortOrder < 0 ? <SortAmountDownIcon {...sortIconProps} /> : <SortAmountUpAltIcon {...sortIconProps} /> : <SortAltIcon {...sortIconProps} />;
+            let sortIcon = IconUtils.getJSXIcon(props.sortIcon || icon, { ...sortIconProps }, { props, sorted, sortOrder });
+
+            return sortIcon;
+        }
+
+        return null;
+    };
+
+    const createResizer = (column) => {
+        if (props.resizableColumns) {
+            const columnResizerProps = mergeProps(
+                {
+                    className: cx('columnResizer'),
+                    onMouseDown: (e) => onResizerMouseDown(e, column)
+                },
+                getColumnPTOptions(column, 'columnResizer')
+            );
+
+            return <span {...columnResizerProps} />;
+        }
+
+        return null;
+    };
+
+    const createSortBadge = (column, sortMetaDataIndex) => {
+        if (sortMetaDataIndex !== -1 && props.multiSortMeta && props.multiSortMeta.length > 1) {
+            const sortBadgeProps = mergeProps(
+                {
+                    className: cx('sortBadge')
+                },
+                getColumnPTOptions(column, 'sortBadge')
+            );
+
+            return <span {...sortBadgeProps}>{sortMetaDataIndex + 1}</span>;
+        }
+
+        return null;
+    };
+
+    const createTitle = (column, options) => {
+        const title = ObjectUtils.getJSXElement(getColumnProp(column, 'header'), { props: options });
+        const headerTitleProps = mergeProps(
+            {
+                className: cx('headerTitle')
+            },
+            getColumnPTOptions(column, 'headerTitle')
+        );
+
+        return <span {...headerTitleProps}>{title}</span>;
+    };
+
+    const createHeaderCell = (column, options) => {
+        let filterElement;
+
+        if (getColumnProp(column, 'hidden')) {
+            return null;
+        }
+
+        if (getColumnProp(column, 'filter') && options.renderFilter) {
+            filterElement = getColumnProp(column, 'filterElement') || (
+                <InputText
+                    onInput={(e) => onFilterInput(e, column)}
+                    type={props.filterType}
+                    defaultValue={props.filters && props.filters[getColumnProp(column, 'field')] ? props.filters[getColumnProp(column, 'field')].value : null}
+                    className="p-column-filter"
+                    placeholder={getColumnProp(column, 'filterPlaceholder')}
+                    maxLength={getColumnProp(column, 'filterMaxLength')}
+                    pt={getColumnPTOptions(column, 'filterInput')}
+                    unstyled={props.unstyled}
+                    __parentMetadata={{ parent: props.metaData }}
+                />
+            );
+        }
+
+        if (options.filterOnly) {
+            const frozen = getColumnProp(column, 'frozen');
+            const headerCellProps = mergeProps(
+                {
+                    role: 'columnheader',
+                    key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field') || options.index,
+                    className: classNames(cx('headerCell', { options, frozen }), getColumnProp(column, 'filterHeaderClassName')),
+                    style: getColumnProp(column, 'filterHeaderStyle') || getColumnProp(column, 'style'),
+                    rowSpan: getColumnProp(column, 'rowSpan'),
+                    colSpan: getColumnProp(column, 'colSpan'),
+                    'data-p-sortable-column': getColumnProp(column, 'sortable'),
+                    'data-p-resizable-column': props.resizableColumns,
+                    'data-p-frozen-column': frozen
+                },
+                getColumnPTOptions(column, 'root'),
+                getColumnPTOptions(column, 'headerCell', {
+                    context: {
+                        frozen: frozen
+                    }
+                })
+            );
+
+            return <th {...headerCellProps}>{filterElement}</th>;
+        }
+
+        const headerCellRef = React.createRef(null);
+        const sortMetaDataIndex = getMultiSortMetaDataIndex(column);
+        const multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null;
+        const singleSorted = getColumnProp(column, 'field') === props.sortField;
+        const multipleSorted = multiSortMetaData !== null;
+        const sorted = getColumnProp(column, 'sortable') && (singleSorted || multipleSorted);
+        const frozen = getColumnProp(column, 'frozen');
+        const align = getColumnProp(column, 'alignHeader');
+        let sortOrder = 0;
+
+        if (singleSorted) {
+            sortOrder = props.sortOrder;
+        } else if (multipleSorted) {
+            sortOrder = multiSortMetaData.order;
+        }
+
+        const sortIconElement = createSortIcon(column, sorted, sortOrder);
+        const ariaSortData = getAriaSort(column, sorted, sortOrder);
+        const sortBadge = createSortBadge(column, sortMetaDataIndex);
+        const ariaSort = sorted ? (sortOrder ? (sortOrder < 0 ? 'descending' : 'ascending') : 'none') : null;
+
+        const headerTooltip = getColumnProp(column, 'headerTooltip');
+        const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip);
+        const title = createTitle(column, options);
+        const resizer = createResizer(column);
+        const sortable = getColumnProp(column, 'sortable');
+        const headerCellProps = mergeProps(
+            {
+                role: 'columnheader',
+                className: classNames(getColumnProp(column, 'headerClassName') || getColumnProp(column, 'className'), cx('headerCell', { headerProps: props, frozen, column, options, getColumnProp, sorted, align })),
+                style: getColumnProp(column, 'headerStyle') || getColumnProp(column, 'style'),
+                tabIndex: sortable ? props.tabIndex : null,
+                'aria-sort': ariaSort, //TODO: aria-sort is defined here two times (ariaSort, ariaSortData) ?
+                onClick: (e) => onHeaderClick(e, column),
+                onMouseDown: (e) => onHeaderMouseDown(e, column),
+                onKeyDown: (e) => onHeaderKeyDown(e, column),
+                rowSpan: getColumnProp(column, 'rowSpan'),
+                colSpan: getColumnProp(column, 'colSpan'),
+                'aria-sort': ariaSortData,
+                onDragStart: (e) => onDragStart(e, column),
+                onDragOver: (e) => onDragOver(e, column),
+                onDragLeave: (e) => onDragLeave(e, column),
+                onDrop: (e) => onDrop(e, column),
+                'data-p-sortable-column': sortable,
+                'data-p-resizable-column': props.resizableColumns,
+                'data-p-highlight': sorted,
+                'data-p-frozen-column': getColumnProp(column, 'frozen')
+            },
+            getColumnPTOptions(column, 'root'),
+            getColumnPTOptions(column, 'headerCell', {
+                context: {
+                    sorted,
+                    frozen,
+                    resizable: props.resizableColumns
+                }
+            })
+        );
+
+        const headerContentProps = mergeProps(
+            {
+                className: cx('headerContent')
+            },
+            getColumnPTOptions(column, 'headerContent')
+        );
+
+        const header = (
+            <div {...headerContentProps}>
+                {title}
+                {sortIconElement}
+                {sortBadge}
+                {filterElement}
+            </div>
+        );
+
+        return (
+            <React.Fragment key={column.columnKey || column.field || options.index}>
+                <th ref={headerCellRef} {...headerCellProps}>
+                    {resizer}
+                    {header}
+                </th>
+                {hasTooltip && <Tooltip target={headerCellRef} content={headerTooltip} {...getColumnProp(column, 'headerTooltipOptions')} unstyled={props.unstyled} />}
+            </React.Fragment>
+        );
+    };
+
+    const createHeaderRow = (row, index) => {
+        const rowColumns = React.Children.toArray(RowBase.getCProp(row, 'children'));
+        const rowHeaderCells = rowColumns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: true }));
+        const headerRowProps = mergeProps(ptm('headerRow', { hostName: props.hostName }), RowBase.getProps(row.props, context));
+
+        return (
+            <tr role="row" {...headerRowProps} key={index}>
+                {rowHeaderCells}
+            </tr>
+        );
+    };
+
+    const createColumnGroup = () => {
+        const rows = React.Children.toArray(ColumnGroupBase.getCProp(props.columnGroup, 'children'));
+
+        return rows.map(createHeaderRow);
+    };
+
+    const createColumns = (columns) => {
+        if (columns) {
+            const headerRowProps = mergeProps(ptm('headerRow', { hostName: props.hostName, role: 'row' }));
+
+            if (hasColumnFilter(columns)) {
+                return (
+                    <>
+                        <tr {...headerRowProps}>{columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))}</tr>
+                        <tr {...headerRowProps}>{columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: true, renderFilter: true }))}</tr>
+                    </>
+                );
+            }
+
+            return (
+                <tr role="row" {...headerRowProps}>
+                    {columns.map((col, i) => createHeaderCell(col, { index: i, filterOnly: false, renderFilter: false }))}
+                </tr>
+            );
+        }
+
+        return null;
+    };
+
+    const content = props.columnGroup ? createColumnGroup() : createColumns(props.columns);
+    const theadProps = mergeProps(
+        {
+            role: 'rowgroup',
+            className: cx('thead')
+        },
+        ptm('thead', { hostName: props.hostName })
+    );
+
+    return <thead {...theadProps}>{content}</thead>;
+});
+
+TreeTableHeader.displayName = 'TreeTableHeader';
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
new file mode 100644
index 0000000000..fca8c8ce04
--- /dev/null
+++ b/components/lib/treetable/TreeTableRow.js
@@ -0,0 +1,675 @@
+import * as React from 'react';
+import { ariaLabel } from '../api/Api';
+import { Checkbox } from '../checkbox/Checkbox';
+import { ColumnBase } from '../column/ColumnBase';
+import { useMergeProps } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { ChevronDownIcon } from '../icons/chevrondown';
+import { ChevronRightIcon } from '../icons/chevronright';
+import { MinusIcon } from '../icons/minus';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { TreeTableBodyCell } from './TreeTableBodyCell';
+
+export const TreeTableRow = React.memo((props) => {
+    const elementRef = React.useRef(null);
+    const nodeTouched = React.useRef(false);
+    const mergeProps = useMergeProps();
+    const expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
+
+    const getColumnProp = (column, name) => {
+        return ColumnBase.getCProp(column, name);
+    };
+
+    const getColumnProps = (column) => ColumnBase.getCProps(column);
+    const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks;
+
+    const getColumnPTOptions = (column, key) => {
+        const cProps = getColumnProps(column);
+        const columnMetadata = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            context: {
+                index: props.rowIndex,
+                selectable: props.node.selectable !== false,
+                selected: isSelected(),
+                frozen: getColumnProp(column, 'frozen'),
+                scrollable: props.metaData.props.scrollable
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata));
+    };
+
+    const getColumnCheckboxPTOptions = (column, key) => {
+        const cProps = getColumnProps(column);
+
+        const columnMetadata = {
+            props: cProps,
+            parent: props.metaData,
+            hostName: props.hostName,
+            context: {
+                checked: isChecked(),
+                partialChecked: isPartialChecked()
+            }
+        };
+
+        return mergeProps(ptm(`column.${key}`, { column: columnMetadata }), ptm(`column.${key}`, columnMetadata), ptmo(cProps, key, columnMetadata));
+    };
+
+    const getRowPTOptions = (key) => {
+        const rowMetadata = {
+            hostName: props.hostName,
+            context: {
+                index: props.index,
+                selected: isSelected(),
+                selectable: props.node.selectable !== false,
+                frozen: getColumnProp('frozen'),
+                scrollable: props.metaData.props.scrollable,
+                showGridlines: props.metaData.props.showGridlines
+            }
+        };
+
+        return ptm(key, rowMetadata);
+    };
+
+    const isLeaf = () => {
+        return props.node.leaf === false ? false : !(props.node.children && props.node.children.length);
+    };
+
+    const onTogglerClick = (event) => {
+        expanded ? collapse(event) : expand(event);
+
+        event.preventDefault();
+        event.stopPropagation();
+    };
+
+    const expand = (event, navigateFocusToChild = false) => {
+        let expandedKeys = props.expandedKeys ? { ...props.expandedKeys } : {};
+
+        expandedKeys[props.node.key] = true;
+
+        props.onToggle({
+            originalEvent: event,
+            value: expandedKeys,
+            navigateFocusToChild
+        });
+
+        invokeToggleEvents(event, true);
+    };
+
+    const collapse = (event) => {
+        let expandedKeys = { ...props.expandedKeys };
+
+        delete expandedKeys[props.node.key];
+
+        props.onToggle({
+            originalEvent: event,
+            value: expandedKeys
+        });
+
+        invokeToggleEvents(event, false);
+    };
+
+    const invokeToggleEvents = (event, expanded) => {
+        if (expanded) {
+            if (props.onExpand) {
+                props.onExpand({
+                    originalEvent: event,
+                    node: props.node
+                });
+            }
+        } else if (props.onCollapse) {
+            props.onCollapse({
+                originalEvent: event,
+                node: props.node
+            });
+        }
+    };
+
+    const onClick = (event) => {
+        if (props.onRowClick) {
+            props.onRowClick(event, props.node);
+        }
+
+        nodeTouched.current = false;
+    };
+
+    const onTouchEnd = () => {
+        nodeTouched.current = true;
+    };
+
+    const onMouseEnter = (event) => {
+        if (props.onRowMouseEnter) {
+            props.onRowMouseEnter({ originalEvent: event, node: props.node, index: props.rowIndex });
+        }
+    };
+
+    const onMouseLeave = (event) => {
+        if (props.onRowMouseLeave) {
+            props.onRowMouseLeave({ originalEvent: event, node: props.node, index: props.rowIndex });
+        }
+    };
+
+    const onCheckboxChange = (event) => {
+        const checked = isChecked();
+        let selectionKeys = props.selectionKeys ? { ...props.selectionKeys } : {};
+
+        if (checked) {
+            if (props.propagateSelectionDown) {
+                propagateDown(props.node, false, selectionKeys);
+            } else {
+                delete selectionKeys[props.node.key];
+            }
+
+            if (props.propagateSelectionUp && props.onPropagateUp) {
+                props.onPropagateUp({
+                    originalEvent: event,
+                    check: false,
+                    selectionKeys: selectionKeys
+                });
+            }
+
+            if (props.onUnselect) {
+                props.onUnselect({
+                    originalEvent: event,
+                    node: props.node
+                });
+            }
+        } else {
+            if (props.propagateSelectionDown) {
+                propagateDown(props.node, true, selectionKeys);
+            } else {
+                selectionKeys[props.node.key] = { checked: true };
+            }
+
+            if (props.propagateSelectionUp && props.onPropagateUp) {
+                props.onPropagateUp({
+                    originalEvent: event,
+                    check: true,
+                    selectionKeys: selectionKeys
+                });
+            }
+
+            if (props.onSelect) {
+                props.onSelect({
+                    originalEvent: event,
+                    node: props.node
+                });
+            }
+        }
+
+        if (props.onSelectionChange) {
+            props.onSelectionChange({
+                originalEvent: event,
+                value: selectionKeys
+            });
+        }
+
+        DomHandler.clearSelection();
+    };
+
+    const propagateUp = (event) => {
+        let check = event.check;
+        let selectionKeys = event.selectionKeys;
+        let checkedChildCount = 0;
+
+        for (let child of props.node.children) {
+            if (selectionKeys[child.key] && selectionKeys[child.key].checked) {
+                checkedChildCount++;
+            }
+        }
+
+        const parentKey = props.node.key;
+        const children = ObjectUtils.findChildrenByKey(props.originalOptions, parentKey);
+
+        let isParentPartiallyChecked = children.some((ele) => ele.key in selectionKeys);
+        let isCompletelyChecked = children.every((ele) => ele.key in selectionKeys && selectionKeys[ele.key].checked);
+
+        if (isParentPartiallyChecked && !isCompletelyChecked) {
+            selectionKeys[parentKey] = { checked: false, partialChecked: true };
+        } else if (isCompletelyChecked) {
+            selectionKeys[parentKey] = { checked: true, partialChecked: false };
+        } else if (check) {
+            selectionKeys[parentKey] = { checked: false, partialChecked: false };
+        } else {
+            delete selectionKeys[parentKey];
+        }
+
+        if (props.propagateSelectionUp && props.onPropagateUp) {
+            props.onPropagateUp(event);
+        }
+    };
+
+    const propagateDown = (node, check, selectionKeys) => {
+        if (check) {
+            selectionKeys[node.key] = { checked: true, partialChecked: false };
+        } else {
+            delete selectionKeys[node.key];
+        }
+
+        if (node.children && node.children.length) {
+            for (let i = 0; i < node.children.length; i++) {
+                propagateDown(node.children[i], check, selectionKeys);
+            }
+        }
+    };
+
+    const onRightClick = (event) => {
+        DomHandler.clearSelection();
+
+        if (props.onContextMenuSelectionChange) {
+            props.onContextMenuSelectionChange({
+                originalEvent: event,
+                value: props.node.key
+            });
+        }
+
+        if (props.onContextMenu) {
+            props.onContextMenu({
+                originalEvent: event,
+                node: props.node
+            });
+        }
+    };
+
+    const onKeyDown = (event, item) => {
+        switch (event.code) {
+            case 'ArrowDown':
+                onArrowDownKey(event);
+                break;
+
+            case 'ArrowUp':
+                onArrowUpKey(event);
+                break;
+
+            case 'ArrowLeft':
+                onArrowLeftKey(event);
+                break;
+
+            case 'ArrowRight':
+                onArrowRightKey(event);
+                break;
+
+            case 'Home':
+                onHomeKey(event);
+                break;
+
+            case 'End':
+                onEndKey(event);
+                break;
+
+            case 'Enter':
+            case 'NumpadEnter':
+            case 'Space':
+                if (!DomHandler.isClickable(event.target)) {
+                    onEnterKey(event, item);
+                }
+
+                break;
+
+            case 'Tab':
+                onTabKey(event);
+                break;
+
+            default:
+                break;
+        }
+    };
+
+    const onArrowDownKey = (event) => {
+        const nextElementSibling = event.currentTarget.nextElementSibling;
+
+        nextElementSibling && focusRowChange(event.currentTarget, nextElementSibling);
+
+        event.preventDefault();
+    };
+
+    const onArrowUpKey = (event) => {
+        const previousElementSibling = event.currentTarget.previousElementSibling;
+
+        previousElementSibling && focusRowChange(event.currentTarget, previousElementSibling);
+
+        event.preventDefault();
+    };
+
+    const onArrowRightKey = (event) => {
+        const ishiddenIcon = DomHandler.findSingle(event.currentTarget, 'button').style.visibility === 'hidden';
+        const togglerElement = DomHandler.findSingle(elementRef.current, '[data-pc-section="rowtoggler"]');
+
+        if (ishiddenIcon) {
+            return;
+        }
+
+        !expanded && expand(event, true);
+
+        event.preventDefault();
+    };
+
+    const onArrowLeftKey = (event) => {
+        if (props.level === 0 && !expanded) {
+            return;
+        }
+
+        const currentTarget = event.currentTarget;
+        const ishiddenIcon = DomHandler.findSingle(currentTarget, 'button').style.visibility === 'hidden';
+        const togglerElement = DomHandler.findSingle(currentTarget, '[data-pc-section="rowtoggler"]');
+
+        if (expanded && !ishiddenIcon) {
+            collapse(event);
+
+            return;
+        }
+
+        const target = findBeforeClickableNode(currentTarget);
+
+        target && focusRowChange(currentTarget, target);
+    };
+
+    const onHomeKey = (event) => {
+        const findFirstElement = DomHandler.findSingle(event.currentTarget.parentElement, `tr[aria-level="${props.level + 1}"]`);
+
+        findFirstElement && DomHandler.focus(findFirstElement);
+
+        event.preventDefault();
+    };
+
+    const onEndKey = (event) => {
+        const nodes = DomHandler.find(event.currentTarget.parentElement, `tr[aria-level="${props.level + 1}"]`);
+        const findFirstElement = nodes[nodes.length - 1];
+
+        DomHandler.focus(findFirstElement);
+
+        event.preventDefault();
+    };
+
+    const onEnterKey = (event) => {
+        event.preventDefault();
+        setTabIndexForSelectionMode(event, nodeTouched.current);
+
+        if (props.selectionMode === 'checkbox') {
+            onCheckboxChange(event);
+
+            return;
+        }
+
+        props.onRowClick(event, props.node);
+
+        nodeTouched.current = false;
+    };
+
+    const onTabKey = () => {
+        const rows = [...DomHandler.find(elementRef.current.parentElement, 'tr')];
+        const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true');
+
+        rows.forEach((row) => {
+            row.tabIndex = -1;
+        });
+
+        if (hasSelectedRow) {
+            const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true');
+
+            selectedNodes[0].tabIndex = 0;
+
+            return;
+        }
+
+        rows[0].tabIndex = 0;
+    };
+
+    const focusRowChange = (firstFocusableRow, currentFocusedRow) => {
+        firstFocusableRow.tabIndex = '-1';
+        currentFocusedRow.tabIndex = '0';
+        DomHandler.focus(currentFocusedRow);
+    };
+
+    const findBeforeClickableNode = (node) => {
+        const prevNode = node.previousElementSibling;
+
+        if (prevNode) {
+            const prevNodeButton = prevNode.querySelector('button');
+
+            if (prevNodeButton && prevNodeButton.style.visibility !== 'hidden') {
+                return prevNode;
+            }
+
+            return findBeforeClickableNode(prevNode);
+        }
+
+        return null;
+    };
+
+    const setTabIndexForSelectionMode = (event, nodeTouched) => {
+        if (props.selectionMode !== null) {
+            const elements = [...DomHandler.find(elementRef.current.parentElement, 'tr')];
+
+            event.currentTarget.tabIndex = nodeTouched === false ? -1 : 0;
+
+            if (elements.every((element) => element.tabIndex === -1)) {
+                elements[0].tabIndex = 0;
+            }
+        }
+    };
+
+    const isSelected = () => {
+        if (props.selectionMode === 'single') {
+            return props.selectionKeys === props.node.key;
+        } else if ((props.selectionMode === 'multiple' || props.selectionMode === 'checkbox') && props.selectionKeys) {
+            return props.selectionKeys[props.node.key] !== undefined;
+        } else {
+            return false;
+        }
+    };
+
+    const isChecked = () => {
+        return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].checked : false;
+    };
+
+    const isPartialChecked = () => {
+        return props.selectionKeys ? props.selectionKeys[props.node.key] && props.selectionKeys[props.node.key].partialChecked : false;
+    };
+
+    const createToggler = (column) => {
+        const label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
+        const rowTogglerIconProps = mergeProps(
+            {
+                className: cx('rowTogglerIcon'),
+                'aria-hidden': true
+            },
+            getColumnPTOptions(column, 'rowTogglerIcon')
+        );
+        const icon = expanded ? <ChevronDownIcon {...rowTogglerIconProps} /> : <ChevronRightIcon {...rowTogglerIconProps} />;
+        const togglerIcon = IconUtils.getJSXIcon(props.togglerIcon || icon, { ...rowTogglerIconProps }, { props });
+        const rowTogglerProps = mergeProps(
+            {
+                type: 'button',
+                className: cx('rowToggler'),
+                onClick: (e) => onTogglerClick(e),
+                tabIndex: -1,
+                style: { marginLeft: props.level * 16 + 'px', visibility: props.node.leaf === false || (props.node.children && props.node.children.length) ? 'visible' : 'hidden' },
+                'aria-label': label
+            },
+            getColumnPTOptions(column, 'rowToggler')
+        );
+
+        let content = (
+            <button {...rowTogglerProps}>
+                {togglerIcon}
+                <Ripple />
+            </button>
+        );
+
+        if (props.togglerTemplate) {
+            const defaultContentOptions = {
+                onClick: onTogglerClick,
+                containerClassName: 'p-treetable-toggler p-link',
+                iconClassName: 'p-treetable-toggler-icon',
+                element: content,
+                props,
+                expanded,
+                buttonStyle: { marginLeft: props.level * 16 + 'px', visibility: props.node.leaf === false || (props.node.children && props.node.children.length) ? 'visible' : 'hidden' }
+            };
+
+            content = ObjectUtils.getJSXElement(props.togglerTemplate, props.node, defaultContentOptions);
+        }
+
+        return content;
+    };
+
+    const createCheckbox = (column) => {
+        if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
+            const checked = isChecked();
+            const partialChecked = isPartialChecked();
+            const checkboxIconProps = mergeProps(
+                {
+                    className: cx('checkIcon')
+                },
+                getColumnPTOptions(column, 'rowCheckbox.icon')
+            );
+            const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon /> : null;
+            const checkIcon = IconUtils.getJSXIcon(icon, {}, { props, checked, partialChecked });
+            const rowCheckboxProps = mergeProps(
+                {
+                    className: cx('rowCheckbox'),
+                    checked: checked || partialChecked,
+                    onChange: onCheckboxChange,
+                    icon: checkIcon,
+                    unstyled: isUnstyled?.(),
+                    tabIndex: -1,
+                    'data-p-highlight': checked,
+                    'data-p-checked': checked,
+                    'data-p-partialchecked': partialChecked
+                },
+                getColumnCheckboxPTOptions(column, 'rowCheckbox')
+            );
+
+            return <Checkbox {...rowCheckboxProps} />;
+        }
+
+        return null;
+    };
+
+    const createCell = (column, index) => {
+        let toggler;
+        let checkbox;
+
+        if (getColumnProp(column, 'hidden')) {
+            return null;
+        }
+
+        if (getColumnProp(column, 'expander')) {
+            toggler = createToggler(column);
+            checkbox = createCheckbox(column);
+        }
+
+        return (
+            <TreeTableBodyCell
+                hostName={props.hostName}
+                key={`${getColumnProp(column, 'columnKey') || getColumnProp(column, 'field')}_${index}`}
+                {...ColumnBase.getCProps(column)}
+                index={index}
+                column={column}
+                selectOnEdit={props.selectOnEdit}
+                selected={isSelected()}
+                node={props.node}
+                rowData={props.node && props.node.data}
+                rowIndex={props.rowIndex}
+                ptCallbacks={props.ptCallbacks}
+                metaData={props.metaData}
+            >
+                {toggler}
+                {checkbox}
+            </TreeTableBodyCell>
+        );
+    };
+
+    const createChildren = () => {
+        if (expanded && props.node.children) {
+            return props.node.children.map((childNode, index) => {
+                return (
+                    <TreeTableRow
+                        hostName={props.hostName}
+                        key={`${childNode.key || JSON.stringify(childNode.data)}_${index}`}
+                        level={props.level + 1}
+                        rowIndex={props.rowIndex + '_' + index}
+                        node={childNode}
+                        originalOptions={props.originalOptions}
+                        checkboxIcon={props.checkboxIcon}
+                        columns={props.columns}
+                        expandedKeys={props.expandedKeys}
+                        selectOnEdit={props.selectOnEdit}
+                        onToggle={props.onToggle}
+                        togglerTemplate={props.togglerTemplate}
+                        onExpand={props.onExpand}
+                        onCollapse={props.onCollapse}
+                        selectionMode={props.selectionMode}
+                        selectionKeys={props.selectionKeys}
+                        onSelectionChange={props.onSelectionChange}
+                        metaKeySelection={props.metaKeySelection}
+                        onRowClick={props.onRowClick}
+                        onRowMouseEnter={props.onRowMouseEnter}
+                        onRowMouseLeave={props.onRowMouseLeave}
+                        onSelect={props.onSelect}
+                        onUnselect={props.onUnselect}
+                        propagateSelectionUp={props.propagateSelectionUp}
+                        propagateSelectionDown={props.propagateSelectionDown}
+                        onPropagateUp={propagateUp}
+                        rowClassName={props.rowClassName}
+                        contextMenuSelectionKey={props.contextMenuSelectionKey}
+                        onContextMenuSelectionChange={props.onContextMenuSelectionChange}
+                        onContextMenu={props.onContextMenu}
+                        ptCallbacks={props.ptCallbacks}
+                        metaData={props.metaData}
+                    />
+                );
+            });
+        }
+
+        return null;
+    };
+
+    const cells = props.columns.map(createCell);
+    const children = createChildren();
+    let rowClassName = null;
+
+    if (props.rowClassName) {
+        rowClassName = props.rowClassName(props.node);
+    }
+
+    const rowProps = mergeProps(
+        {
+            tabIndex: 0,
+            className: classNames(cx('row', { isSelected, rowProps: props })),
+            'aria-expanded': expanded,
+            'aria-level': props.level + 1,
+            'aria-posinset': props.ariaPosInSet,
+            'aria-setsize': props.ariaSetSize,
+            'aria-checked': isChecked(),
+            'aria-selected': isSelected(),
+            style: props.node.style,
+            onClick: (e) => onClick(e),
+            onTouchEnd: (e) => onTouchEnd(e),
+            onContextMenu: (e) => onRightClick(e),
+            onKeyDown: (e) => onKeyDown(e),
+            onMouseEnter: (e) => onMouseEnter(e),
+            onMouseLeave: (e) => onMouseLeave(e),
+            'data-p-highlight': isSelected()
+        },
+        getRowPTOptions('row'),
+        {
+            className: classNames(rowClassName, props.node.className) // #5983 must be last so all unstyled merging takes place first
+        }
+    );
+
+    return (
+        <>
+            <tr ref={elementRef} {...rowProps}>
+                {cells}
+            </tr>
+            {children}
+        </>
+    );
+});
+
+TreeTableRow.displayName = 'TreeTableRow';
diff --git a/components/lib/treetable/TreeTableScrollableView.js b/components/lib/treetable/TreeTableScrollableView.js
new file mode 100644
index 0000000000..5c4d82b45b
--- /dev/null
+++ b/components/lib/treetable/TreeTableScrollableView.js
@@ -0,0 +1,220 @@
+import * as React from 'react';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { DomHandler, ObjectUtils } from '../utils/Utils';
+
+export const TreeTableScrollableView = React.memo((props) => {
+    const elementRef = React.useRef(null);
+    const scrollHeaderRef = React.useRef(null);
+    const scrollHeaderBoxRef = React.useRef(null);
+    const scrollBodyRef = React.useRef(null);
+    const scrollTableRef = React.useRef(null);
+    const scrollFooterRef = React.useRef(null);
+    const scrollFooterBoxRef = React.useRef(null);
+    const mergeProps = useMergeProps();
+    const { ptm, cx, sx } = props.ptCallbacks;
+
+    const getPTOptions = (key, options) => {
+        return ptm(key, {
+            hostName: props.hostName,
+            ...options
+        });
+    };
+
+    const setScrollHeight = () => {
+        if (props.scrollHeight) {
+            if (props.scrollHeight.indexOf('%') !== -1) {
+                let datatableContainer = findDataTableContainer(elementRef.current);
+
+                scrollBodyRef.current.style.visibility = 'hidden';
+                scrollBodyRef.current.style.height = '100px'; //temporary height to calculate static height
+                let containerHeight = DomHandler.getOuterHeight(datatableContainer);
+                let relativeHeight = (DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(props.scrollHeight, 10)) / 100;
+                let staticHeight = containerHeight - 100; //total height of headers, footers, paginators
+                let scrollBodyHeight = relativeHeight - staticHeight;
+
+                scrollBodyRef.current.style.height = 'auto';
+                scrollBodyRef.current.style.maxHeight = scrollBodyHeight + 'px';
+                scrollBodyRef.current.style.visibility = 'visible';
+            } else {
+                scrollBodyRef.current.style.maxHeight = props.scrollHeight;
+            }
+        }
+    };
+
+    const findDataTableContainer = (element) => {
+        if (element) {
+            let el = element;
+
+            while (el && !(DomHandler.getAttribute(el, 'data-pc-section') === 'root' || DomHandler.getAttribute(el, 'data-pc-name') === 'treetable')) {
+                el = el.parentElement;
+            }
+
+            return el;
+        }
+
+        return null;
+    };
+
+    const onHeaderScroll = () => {
+        scrollHeaderRef.current.scrollLeft = 0;
+    };
+
+    const onBodyScroll = () => {
+        let frozenView = elementRef.current.previousElementSibling;
+        let frozenScrollBody;
+
+        if (frozenView) {
+            frozenScrollBody = DomHandler.findSingle(frozenView, '[data-pc-section="scrollablebody"]');
+        }
+
+        scrollHeaderBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
+
+        if (scrollFooterBoxRef.current) {
+            scrollFooterBoxRef.current.style.transform = `translateX(-${scrollBodyRef.current.scrollLeft}px)`;
+        }
+
+        if (frozenScrollBody) {
+            frozenScrollBody.scrollTop = scrollBodyRef.current.scrollTop;
+        }
+    };
+
+    useMountEffect(() => {
+        let el = DomHandler.find(findDataTableContainer(elementRef.current), '[data-pc-section="scrollablebody"]');
+
+        el = el.length > 1 ? el[1] : el[0];
+
+        const scrollBarWidth = DomHandler.calculateScrollbarWidth(el);
+
+        if (!props.frozen) {
+            const scrollBarWidth = DomHandler.calculateScrollbarWidth();
+
+            scrollHeaderBoxRef.current.style.marginRight = scrollBarWidth + 'px';
+
+            if (scrollFooterBoxRef.current) {
+                scrollFooterBoxRef.current.style.marginRight = scrollBarWidth + 'px';
+            }
+        } else {
+            scrollBodyRef.current.style.paddingBottom = scrollBarWidth + 'px';
+        }
+    });
+
+    React.useEffect(() => {
+        setScrollHeight();
+    });
+
+    const createColGroup = () => {
+        if (ObjectUtils.isNotEmpty(props.columns)) {
+            const cols = props.columns.map((col, i) => <col key={col.field + '_' + i} />);
+            const scrollableColgroupProps = mergeProps(
+                {
+                    className: cx('scrollableColgroup')
+                },
+                getPTOptions('scrollableColgroup')
+            );
+
+            return <colgroup {...scrollableColgroupProps}>{cols}</colgroup>;
+        }
+
+        return null;
+    };
+
+    const width = props.frozen ? props.frozenWidth : 'calc(100% - ' + props.frozenWidth + ')';
+    const left = props.frozen ? null : props.frozenWidth;
+    const colGroup = createColGroup();
+    const scrollableProps = mergeProps(
+        {
+            className: cx('scrollable', { scrolaableProps: props }),
+            style: { width, left }
+        },
+        getPTOptions('scrollable')
+    );
+
+    const scrollableHeaderProps = mergeProps(
+        {
+            className: cx('scrollableHeader'),
+            onScroll: (e) => onHeaderScroll(e)
+        },
+        getPTOptions('scrollableHeader')
+    );
+
+    const scrollableHeaderBoxProps = mergeProps(
+        {
+            className: cx('scrollableHeaderBox')
+        },
+        getPTOptions('scrollableHeaderBox')
+    );
+
+    const scrollableHeaderTableProps = mergeProps(
+        {
+            className: cx('scrollableHeaderTable')
+        },
+        getPTOptions('scrollableHeaderTable')
+    );
+
+    const scrollableBodyProps = mergeProps(
+        {
+            className: cx('scrollableBody'),
+            style: !props.frozen && props.scrollHeight ? { overflowY: 'scroll' } : undefined,
+            onScroll: (e) => onBodyScroll(e)
+        },
+        getPTOptions('scrollableBody')
+    );
+
+    const scrollableBodyTableProps = mergeProps(
+        {
+            style: { top: '0' },
+            className: cx('scrollableBodyTable')
+        },
+        getPTOptions('scrollableBodyTable')
+    );
+
+    const scrollableFooterProps = mergeProps(
+        {
+            className: cx('scrollableFooter')
+        },
+        getPTOptions('scrollableFooter')
+    );
+
+    const scrollableFooterBoxProps = mergeProps(
+        {
+            className: sx('scrollableFooterBox')
+        },
+        getPTOptions('scrollableFooterBox')
+    );
+
+    const scrollableFooterTableProps = mergeProps(
+        {
+            className: cx('scrollableFooterTable')
+        },
+        getPTOptions('scrollableFooterTable')
+    );
+
+    return (
+        <div ref={elementRef} {...scrollableProps}>
+            <div ref={scrollHeaderRef} {...scrollableHeaderProps}>
+                <div ref={scrollHeaderBoxRef} {...scrollableHeaderBoxProps}>
+                    <table {...scrollableHeaderTableProps}>
+                        {colGroup}
+                        {props.header}
+                    </table>
+                </div>
+            </div>
+            <div ref={scrollBodyRef} {...scrollableBodyProps}>
+                <table ref={scrollTableRef} {...scrollableBodyTableProps}>
+                    {colGroup}
+                    {props.body}
+                </table>
+            </div>
+            <div ref={scrollFooterRef} {...scrollableFooterProps}>
+                <div ref={scrollFooterBoxRef} {...scrollableFooterBoxProps}>
+                    <table {...scrollableFooterTableProps}>
+                        {colGroup}
+                        {props.footer}
+                    </table>
+                </div>
+            </div>
+        </div>
+    );
+});
+
+TreeTableScrollableView.displayName = 'TreeTableScrollableView';
diff --git a/components/lib/treetable/package.json b/components/lib/treetable/package.json
new file mode 100644
index 0000000000..995d3a7b40
--- /dev/null
+++ b/components/lib/treetable/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./treetable.cjs.js",
+    "module": "./treetable.esm.js",
+    "unpkg": "./treetable.min.js",
+    "types": "./treetable.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts
new file mode 100644
index 0000000000..5139b4beb0
--- /dev/null
+++ b/components/lib/treetable/treetable.d.ts
@@ -0,0 +1,1052 @@
+/**
+ *
+ * TreeTable is used to display hierarchical data in tabular format.
+ *
+ * [Live Demo](https://www.primereact.org/treetable/)
+ *
+ * @module treetable
+ *
+ */
+import * as React from 'react';
+import { CSSProperties } from 'react';
+import { Column, ColumnPassThroughOptions } from '../column';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { InputTextPassThroughOptions } from '../inputtext/inputtext';
+import { PaginatorPassThroughOptions, PaginatorTemplate } from '../paginator';
+import { PassThroughOptions } from '../passthrough';
+import { RowPassThroughOptions } from '../row/row';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TreeNode } from '../treenode';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TreeTablePassThroughType<T> = PassThroughType<T, TreeTablePassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TreeTablePassThroughMethodOptions {
+    props: TreeTableProps;
+    state: TreeTableState;
+    context: TreeTableContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TreeTableProps.pt}
+ */
+export interface TreeTablePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading wrapper's DOM element.
+     */
+    loadingWrapper?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading overlay's DOM element.
+     */
+    loadingOverlay?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: TreeTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the Paginator component.
+     * @see {@link PaginatorPassThroughOptions}
+     */
+    paginator?: PaginatorPassThroughOptions;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the table's DOM element.
+     */
+    table?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableElement>>;
+    /**
+     * Uses to pass attributes to the thead's DOM element.
+     */
+    thead?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the header row's DOM element.
+     */
+    headerRow?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the header cell's DOM element.
+     */
+    headerCell?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the tbody's DOM element.
+     */
+    tbody?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the empty message's DOM element.
+     */
+    emptyMessage?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the empty message cell's DOM element.
+     */
+    emptyMessageCell?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the body cell's DOM element.
+     */
+    bodyCell?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableCellElement>>;
+    /**
+     * Uses to pass attributes to the tfoot's DOM element.
+     */
+    tfoot?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableSectionElement>>;
+    /**
+     * Uses to pass attributes to the footer row's DOM element.
+     */
+    footerRow?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the resize helper's DOM element.
+     */
+    resizeHelper?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the row toggler's DOM element.
+     */
+    rowToggler?: TreeTablePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Uses to pass attributes to the row toggler icon's DOM element.
+     */
+    rowTogglerIcon?: TreeTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the column resizer's DOM element.
+     */
+    columnResizer?: TreeTablePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the sort badge's DOM element.
+     */
+    sortBadge?: TreeTablePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: TreeTablePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the checkbox wrapper's DOM element.
+     */
+    checkboxWrapper?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: TreeTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the resize helper's DOM element.
+     * @see {@link InputTextPassThroughOptions}
+     */
+    filterInput?: InputTextPassThroughOptions;
+    /**
+     * Uses to pass attributes to the sort icon label's DOM element.
+     */
+    sortIcon?: TreeTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the scrollable wrapper's DOM element.
+     */
+    scrollableWrapper?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable's DOM element.
+     */
+    scrollable?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable header's DOM element.
+     */
+    scrollableHeader?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable header box's DOM element.
+     */
+    scrollableHeaderBox?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable header table's DOM element.
+     */
+    scrollableHeaderTable?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableElement>>;
+    /**
+     * Uses to pass attributes to the scrollable body's DOM element.
+     */
+    scrollableBody?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable body box's DOM element.
+     */
+    scrollableBodyBox?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable body table's DOM element.
+     */
+    scrollableBodyTable?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableElement>>;
+    /**
+     * Uses to pass attributes to the scrollable footer's DOM element.
+     */
+    scrollableFooter?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable footer box's DOM element.
+     */
+    scrollableFooterBox?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the scrollable footer table's DOM element.
+     */
+    scrollableFooterTable?: TreeTablePassThroughType<React.HTMLAttributes<HTMLTableElement>>;
+    /**
+     * Uses to pass attributes to the editor key helper's DOM element.
+     */
+    editorKeyHelper?: TreeTablePassThroughType<React.HTMLAttributes<HTMLAnchorElement>>;
+    /**
+     * Uses to pass attributes to the editor key helper label's DOM element.
+     */
+    editorKeyHelperLabel?: TreeTablePassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: TreeTablePassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: TreeTablePassThroughType<React.HTMLAttributes<HTMLInputElement>>;
+    /**
+     * Used to pass attributes to the Row helper components.
+     */
+    row?: RowPassThroughOptions;
+    /**
+     * Used to pass attributes to the Column helper components.
+     */
+    column?: ColumnPassThroughOptions;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in TreeTable component.
+ */
+export interface TreeTableState {
+    /**
+     * Current index of first record as a number.
+     */
+    first: number;
+    /**
+     * Current number of rows to display in new page as a number.
+     */
+    rows: number;
+    /**
+     * Current sort field.
+     */
+    sortField: string | ((item: any) => string) | undefined;
+    /**
+     * Current order to sort the data by default.
+     */
+    sortOrder: number;
+    /**
+     * Current sortmeta objects to sort the data.
+     */
+    multiSortMeta: TreeTableSortMeta[];
+    /**
+     * Current order of the columns.
+     */
+    columnOrder: string[];
+    /**
+     * Current filters object.
+     */
+    filters: TreeTableFilterMeta;
+    /**
+     * Current editing as a boolean.
+     * @defaultValue false
+     */
+    editing: boolean;
+}
+
+/**
+ * Defines current options in TreeTable component.
+ */
+export interface TreeTableContext {
+    /**
+     * Current index state of the item.
+     */
+    index: number;
+    /**
+     * Current frozen state of the row as a boolean.
+     * @defaultValue false
+     */
+    frozen: boolean;
+    /**
+     * Current checked state of the column checkbox as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current partial checked state of the column checkbox as a boolean.
+     * @defaultValue false
+     */
+    partialChecked: boolean;
+    /**
+     * Current selectable state of the row as a boolean.
+     * @defaultValue false
+     */
+    selectable: boolean;
+    /**
+     * Current scrollable state of the row as a boolean.
+     * @defaultValue false
+     */
+    scrollable: boolean;
+    /**
+     * Current showGridlines state of the row as a boolean.
+     * @defaultValue false
+     */
+    showGridlines: boolean;
+    /**x
+     * Current selected state of the row as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+}
+
+/**
+ * Custom treetable toggler template options
+ */
+interface TreeTableTogglerTemplateOptions {
+    /**
+     * Callback to invoke on click.
+     * @param {React.SyntheticEvent} event - Browser event.
+     */
+    onClick(event: React.SyntheticEvent): void;
+    /**
+     * Style class of the panels container.
+     */
+    containerClassName: string;
+    /**
+     * Icon classname.
+     */
+    iconClassName: string;
+    /**
+     * JSX element to be used as the template options.
+     */
+    element: Element;
+    /**
+     * The props of Tree component
+     */
+    props: TreeTableProps;
+    /**
+     * Whether the tree node is expanded or not.
+     */
+    expanded: boolean;
+    /**
+     * Button style for tree indentation
+     */
+    buttonStyle: CSSProperties;
+}
+
+/**
+ * Custom selection keys type.
+ */
+interface TreeTableSelectionKeysType {
+    /**
+     * Extra options.
+     */
+    [key: string]: boolean | TreeTableCheckboxSelectionKeyType | undefined;
+}
+
+/**
+ * Custom treetable checkbox selection type
+ */
+interface TreeTableCheckboxSelectionKeyType {
+    /**
+     * Whether the checkbox is checked or not.
+     */
+    checked?: boolean;
+    /**
+     * Whether the checkbox is partially checked or not.
+     */
+    partialChecked?: boolean;
+}
+
+/**
+ * Custom expanded keys type.
+ */
+type TreeTableExpandedKeysType = {
+    /**
+     * Extra options.
+     */
+    [key: string]: boolean;
+};
+
+/**
+ * Custom treetable sort meta.
+ */
+interface TreeTableSortMeta {
+    /**
+     * The field to sort against.
+     */
+    field: string;
+    /**
+     * Sort order as integer.
+     */
+    order: 1 | 0 | -1 | null | undefined;
+}
+
+/**
+ * Custom treetable filter metadata.
+ */
+interface TreeTableFilterMetaData {
+    /**
+     * Value to filter against.
+     */
+    value: any;
+    /**
+     * Type of filter match.
+     */
+    matchMode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined;
+}
+
+/**
+ * Custom treetable filter meta.
+ */
+interface TreeTableFilterMeta {
+    /**
+     * Extra options.
+     */
+    [key: string]: TreeTableFilterMetaData;
+}
+
+/**
+ * Custom treetable event.
+ * @see {@link TreeTableProps.onCollapse},{@link TreeTableProps.onContextMenu},{@link TreeTableProps.onExpand},{@link TreeTableProps.onRowClick},{@link TreeTableProps.onSelect},{@link TreeTableProps.onUnselect}
+ * @event
+ */
+interface TreeTableEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Expanded node instance.
+     */
+    node: TreeNode;
+}
+
+/**
+ * Custom row mouse event.
+ * @see {@link TreeTableProps.onRowMouseEnter}, {@link TreeTableProps.onRowMouseLeave}
+ * @extends TreeTableEvent
+ */
+interface TreeTableRowMouseEvent extends Omit<TreeTableEvent, 'originalEvent'> {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.MouseEvent<HTMLElement>;
+    /**
+     * Clicked row data index
+     */
+    index: number;
+}
+
+/**
+ * Custom toggle event.
+ * @see {@link TreeTableProps.onToggle}
+ * @event
+ */
+interface TreeTableToggleEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Collapsed state as a boolean.
+     */
+    value: TreeTableExpandedKeysType;
+}
+
+/**
+ * Custom page event.
+ * @see {@link TreeTableProps.onPage}
+ * @event
+ */
+interface TreeTablePageEvent {
+    /**
+     * Index of the first row.
+     */
+    first: number;
+    /**
+     * Rows per page.
+     */
+    rows: number;
+    /**
+     * Value of the new page.
+     */
+    page: number;
+    /**
+     * Total number of pages.
+     */
+    totalPages: number;
+}
+
+/**
+ * Custom sort event.
+ * @see {@link TreeTableProps.onSort}
+ * @event
+ */
+interface TreeTableSortEvent {
+    /**
+     * Field to sort against.
+     */
+    sortField: string;
+    /**
+     * Sort order as integer.
+     */
+    sortOrder: 1 | 0 | -1 | undefined | null;
+    /**
+     * MultiSort metadata.
+     */
+    multiSortMeta: TreeTableSortMeta[] | undefined | null;
+}
+
+/**
+ * Custom selection event.
+ * @see {@link TreeTableProps.onContextMenuSelectionChange},{@link TreeTableProps.onSelectionChange}
+ * @event
+ */
+interface TreeTableSelectionEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.SyntheticEvent;
+    /**
+     * Selected node key.
+     */
+    value: TreeTableSelectionKeysType | string;
+}
+
+/**
+ * Custom resize event.
+ * @see {@link TreeTableProps.onColumnResizeEnd}
+ * @event
+ */
+interface TreeTableColumnResizeEndEvent {
+    /**
+     * DOM element of the resized.
+     */
+    element: HTMLElement;
+    /**
+     * Properties of the resized column.
+     */
+    column: Column;
+    /**
+     * Change in column width.
+     */
+    delta: number;
+}
+
+/**
+ * Custom column reorder event.
+ * @see {@link TreeTableProps.onColReorder}
+ * @event
+ */
+interface TreeTableColReorderEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: React.DragEvent<HTMLElement>;
+    /**
+     * Index of the dragged column.
+     */
+    dragIndex: number;
+    /**
+     * Index of the dropped column.
+     */
+    dropIndex: number;
+    /**
+     * Columns array after reorder.
+     */
+    columns: React.ReactElement;
+}
+
+/**
+ * Defines valid properties in TreeTable component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'size' | 'onContextMenu' | 'onSelect' | 'ref' | 'value'> {
+    /**
+     * Whether to show it even there is only one page.
+     * @defaultValue true
+     */
+    alwaysShowPaginator?: boolean | undefined;
+    /**
+     * Icon of the checkbox when checked.
+     */
+    checkboxIcon?: IconType<TreeTableProps> | undefined;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TreeTablePassThroughOptions}
+     */
+    pt?: TreeTablePassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+    /**
+     * Style class of the node.
+     */
+    className?: string | undefined;
+    /**
+     * Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
+     * @defaultValue fit
+     */
+    columnResizeMode?: 'fit' | 'expand' | undefined;
+    /**
+     * A single key to control the selection with the context menu.
+     */
+    contextMenuSelectionKey?: string | undefined;
+    /**
+     * Template of the current page report element. Available placeholders are &#123;currentPage&#125;, &#123;totalPages&#125;, &#123;rows&#125;, &#123;first&#125;, &#123;last&#125; and &#123;totalRecords&#125;
+     * @defaultValue (&#123;currentPage&#125; of &#123;totalPages&#125;)
+     */
+    currentPageReportTemplate?: string | undefined;
+    /**
+     * Default sort order of an unsorted column.
+     * @defaultValue 1
+     */
+    defaultSortOrder?: 1 | 0 | -1 | undefined | null;
+    /**
+     * Text to display when there is no data.
+     * @defaultValue No results found
+     */
+    emptyMessage?: string | React.ReactNode | ((props: TreeTableProps) => React.ReactNode) | undefined;
+    /**
+     * An array of keys to represent the state of the tree expansion state in controlled mode.
+     */
+    expandedKeys?: TreeTableExpandedKeysType | undefined;
+    /**
+     * Delay in milliseconds before filtering the data.
+     * @defaultValue 300
+     */
+    filterDelay?: number | undefined;
+    /**
+     * Locale to use in filtering. The default locale is the host environment's current locale.
+     * @defaultValue undefined
+     */
+    filterLocale?: string | undefined;
+    /**
+     * Mode for filtering valid values are lenient and strict. Default is lenient.
+     * @defaultValue lenient
+     */
+    filterMode?: 'lenient' | 'strict' | undefined;
+    /**
+     * An array of FilterMetadata objects to provide external filters.
+     */
+    filters?: TreeTableFilterMeta;
+    /**
+     * Index of the first row to be displayed.
+     * @defaultValue 0
+     */
+    first?: number | undefined;
+    /**
+     * Footer content of the table.
+     */
+    footer?: React.ReactNode | undefined;
+    /**
+     * ColumnCroup component for footer.
+     */
+    footerColumnGroup?: React.ReactElement | undefined;
+    /**
+     * ColumnCroup component for footer of frozen columns.
+     */
+    frozenFooterColumnGroup?: React.ReactElement | undefined;
+    /**
+     * ColumnCroup component for header of frozen columns.
+     */
+    frozenHeaderColumnGroup?: React.ReactElement | undefined;
+    /**
+     * Width of the frozen part in scrollable DataTable.
+     */
+    frozenWidth?: string | undefined;
+    /**
+     * Value of the global filter to use in filtering.
+     */
+    globalFilter?: string | undefined | null;
+    /**
+     * Defines filterMatchMode; "startsWith", "contains", "endsWith", "equals", "notEquals", "in", "notIn", "lt", "lte", "gt", "gte" and "custom".
+     * @defaultValue contains
+     */
+    globalFilterMatchMode?: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | 'custom' | undefined;
+    /**
+     * Header content of the table.
+     */
+    header?: React.ReactNode | undefined;
+    /**
+     * ColumnCroup component for header.
+     */
+    headerColumnGroup?: React.ReactElement | undefined;
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
+     */
+    lazy?: boolean | undefined;
+    /**
+     * Displays a loader to indicate data load is in progress.
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * The icon to show while indicating data load is in progress.
+     */
+    loadingIcon?: IconType<TreeTableProps> | undefined;
+    /**
+     * Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
+     * @defaultValue true
+     */
+    metaKeySelection?: boolean | undefined;
+    /**
+     * An array of SortMeta objects to sort the data by default in multiple sort mode.
+     */
+    multiSortMeta?: TreeTableSortMeta[] | undefined | null;
+    /**
+     * Number of page links to display.
+     * @defaultValue 5
+     */
+    pageLinkSize?: number | undefined;
+    /**
+     * When specified as true, enables the pagination.
+     * @defaultValue false
+     */
+    paginator?: boolean | undefined;
+    /**
+     * Style class of the paginator element.
+     */
+    paginatorClassName?: string | undefined;
+    /**
+     * DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
+     * @defaultValue document.body
+     */
+    paginatorDropdownAppendTo?: 'self' | HTMLElement | undefined | null | (() => HTMLElement);
+    /**
+     * Content for the left side of the paginator.
+     */
+    paginatorLeft?: React.ReactNode | undefined;
+    /**
+     * Position of the paginator, options are "top","bottom" or "both".
+     * @defaultValue bottom
+     */
+    paginatorPosition?: 'top' | 'bottom' | 'both' | undefined;
+    /**
+     * Content for the right side of the paginator.
+     */
+    paginatorRight?: React.ReactNode | undefined;
+    /**
+     * Template of the paginator. For details, refer to the template section of the paginator documentation for further options.
+     * @defaultValue FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown
+     */
+    paginatorTemplate?: PaginatorTemplate | undefined;
+    /**
+     * Whether checkbox selections propagate to descendant nodes.
+     * @defaultValue true
+     */
+    propagateSelectionDown?: boolean | undefined;
+    /**
+     * Whether checkbox selections propagate to ancestor nodes.
+     * @defaultValue true
+     */
+    propagateSelectionUp?: boolean | undefined;
+    /**
+     * When enabled, columns can have an un-sorted state.
+     * @defaultValue false
+     */
+    removableSort?: boolean | undefined;
+    /**
+     * When enabled, columns can be reordered using drag and drop.
+     * @defaultValue false
+     */
+    reorderableColumns?: boolean | undefined;
+    /**
+     * Defines the reorder indicator down icon.
+     */
+    reorderIndicatorDownIcon?: IconType<TreeTableProps> | undefined;
+    /**
+     * Defines the reorder indicator up icon.
+     */
+    reorderIndicatorUpIcon?: IconType<TreeTableProps> | undefined;
+    /**
+     * When enabled, columns can be resized using drag and drop.
+     * @defaultValue false
+     */
+    resizableColumns?: boolean | undefined;
+    /**
+     * When enabled, background of the rows change on hover.
+     * @defaultValue false
+     */
+    rowHover?: boolean | undefined;
+    /**
+     * Number of rows to display per page.
+     */
+    rows?: number | undefined;
+    /**
+     * Array of integer values to display inside rows per page dropdown.
+     */
+    rowsPerPageOptions?: number[] | undefined;
+    /**
+     * Height of the scroll viewport.
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * When specified, enables horizontal and/or vertical scrolling.
+     * @defaultValue false
+     */
+    scrollable?: boolean | undefined;
+    /**
+     * Determines whether the cell editor will be opened when clicking to select any row on Selection and Cell Edit modes.
+     * @defaultValue true
+     */
+    selectOnEdit?: boolean | undefined;
+    /**
+     * A single or an array of keys to control the selection state.
+     */
+    selectionKeys?: string | TreeTableSelectionKeysType | TreeTableSelectionKeysType[] | undefined | null;
+    /**
+     * Defines the selection mode, valid values "single", "multiple", and "checkbox".
+     */
+    selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
+    /**
+     * Whether to show grid lines between cells.
+     * @defaultValue false
+     */
+    showGridlines?: boolean | undefined;
+    /**
+     * Name of the field to sort data by default.
+     */
+    sortField?: string | undefined;
+    /**
+     * Icon to display the current sorting status.
+     */
+    sortIcon?: IconType<TreeTableProps> | undefined;
+    /**
+     * Defines whether sorting works on single column or on multiple columns.
+     * @defaultValue single
+     */
+    sortMode?: 'single' | 'multiple' | undefined;
+    /**
+     * Order to sort the data by default.
+     */
+    sortOrder?: 1 | 0 | -1 | undefined | null;
+    /**
+     * Unique identifier of a stateful table to use in state storage.
+     */
+    stateKey?: string | undefined;
+    /**
+     * Defines where a stateful table keeps its state, valid values are "session" for sessionStorage, "local" for localStorage and "custom".
+     * @defaultValue session
+     */
+    stateStorage?: 'session' | 'local' | 'custom' | undefined;
+    /**
+     * Whether to displays rows with alternating colors.
+     * @defaultValue false
+     */
+    stripedRows?: boolean | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabIndex?: number | undefined;
+    /**
+     * Style class of the table element.
+     */
+    tableClassName?: string | undefined;
+    /**
+     * Inline style of the table element.
+     */
+    tableStyle?: React.CSSProperties | undefined;
+    /**
+     * Template of toggler element.
+     */
+    togglerTemplate?: React.ReactNode | ((node: TreeNode, options: TreeTableTogglerTemplateOptions) => React.ReactNode);
+    /**
+     *
+     * Number of total records, defaults to length of value when not defined.
+     */
+    totalRecords?: number | undefined;
+    /**
+     * An array of treenodes to display.
+     */
+    value?: TreeNode[] | undefined;
+    /**
+     * A function to implement custom restoreState with stateStorage="custom". Need to return state object.
+     * @return {object | undefined} Returns the state object.
+     */
+    customRestoreState?(): object | undefined;
+    /**
+     * A function to implement custom saveState with stateStorage="custom".
+     * @param {object} state - The object to be stored.
+     */
+    customSaveState?(state: object): void;
+    /**
+     * Callback to invoke when a column is reordered.
+     * @param {TreeTableColReorderEvent} event - Custom column reorder event.
+     */
+    onColReorder?(event: TreeTableColReorderEvent): void;
+    /**
+     * Callback to invoke when a node is collapsed.
+     * @param {TreeTableEvent} event - Custom treetable event.
+     */
+    onCollapse?(event: TreeTableEvent): void;
+    /**
+     * Callback to invoke when a column is resized.
+     * @param {TreeTableColumnResizeEndEvent} event - Custom resize event.
+     */
+    onColumnResizeEnd?(event: TreeTableColumnResizeEndEvent): void;
+    /**
+     * Callback to invoke when a context menu is clicked.
+     * @param {TreeTableEvent} event - Custom treetable event.
+     */
+    onContextMenu?(event: TreeTableEvent): void;
+    /**
+     * Callback to invoke when selection changes with a context menu.
+     * @param {TreeTableSelectionEvent} event - Custom selection event.
+     */
+    onContextMenuSelectionChange?(event: TreeTableSelectionEvent): void;
+    /**
+     * Callback to invoke when a node is expanded.
+     * @param {TreeTableEvent} event - Custom treetable event.
+     */
+    onExpand?(event: TreeTableEvent): void;
+    /**
+     * Callback to invoke on filtering.
+     * @param {TreeTableFilterMeta} filters - Custom treetable event.
+     */
+    onFilter?(filters: TreeTableFilterMeta): void;
+    /**
+     * Callback to invoke on pagination.
+     * @param {TreeTablePageEvent} event - Custom page event.
+     */
+    onPage?(event: TreeTablePageEvent): void;
+    /**
+     * Callback to invoke when a row is clicked.
+     * @param {TreeTableEvent} event - Custom treetable event.
+     */
+    onRowClick?(event: TreeTableEvent): void;
+    /**
+     * Callback to invoke when a row is hovered with mouse.
+     * @param {TreeTableRowMouseEvent} event - Custom row mouse event.
+     */
+    onRowMouseEnter?(event: TreeTableRowMouseEvent): void;
+    /**
+     * Callback to invoke when a row is navigated away from with mouse.
+     * @param {TreeTableRowMouseEvent} event - Custom row mouse event.
+     */
+    onRowMouseLeave?(event: TreeTableRowMouseEvent): void;
+    /**
+     * Callback to invoke when a node is selected.
+     * @param {TreeTableEvent} event - Custom treetable event.
+     */
+    onSelect?(event: TreeTableEvent): void;
+    /**
+     * Callback to invoke when selection changes.
+     * @param {TreeTableSelectionEvent} event - Custom selection event.
+     */
+    onSelectionChange?(event: TreeTableSelectionEvent): void;
+    /**
+     * Callback to invoke on sort.
+     * @param {TreeTableSortEvent} event - Custom sort event.
+     */
+    onSort?(event: TreeTableSortEvent): void;
+    /**
+     * Callback to invoke table state is restored.
+     * @param {object} state - Table state.
+     */
+    onStateRestore?(state: object): void;
+    /**
+     * Callback to invoke table state is saved.
+     * @param {object} state - Table state.
+     */
+    onStateSave?(state: object): void;
+    /**
+     * Callback to invoke when a node is toggled.
+     * @param {TreeTableToggleEvent} event - Custom toggle event.
+     */
+    onToggle?(event: TreeTableToggleEvent): void;
+    /**
+     * Callback to invoke when a node is unselected.
+     * @param {TreeTableEvent} event - Custom treetable event.
+     */
+    onUnselect?(event: TreeTableEvent): void;
+    /**
+     * Callback to invoke after filtering and sorting to pass the rendered value.
+     * @param {TreeNode[] | undefined} value - Value displayed by the table.
+     */
+    onValueChange?(value: TreeNode[] | undefined): void;
+    /**
+     * Function that takes the row data and returns an object in &#123;'styleclass' : condition&#125; format to define a classname for a particular now.
+     * @param {TreeNode} data - Value displayed by the treetable.
+     */
+    rowClassName?(data: TreeNode): object;
+}
+
+/**
+ * **PrimeReact - TreeTable**
+ *
+ * _TreeTable is used to display hierarchical data in tabular format._
+ *
+ * [Live Demo](https://www.primereact.org/treetable/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TreeTable extends React.Component<TreeTableProps, any> {
+    /**
+     * Filters the data.
+     * @param {T} value - The filter value
+     * @param {string} field - The filter field
+     * @param {string} mode - Filter match mode.
+     */
+    public filter<T>(
+        /**
+         * The filter value
+         */
+        value: T,
+        /**
+         * The filter field
+         */
+        field: string,
+        /**
+         * Filter match mode.
+         */
+        mode: 'startsWith' | 'contains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'notIn' | 'lt' | 'lte' | 'gt' | 'gte' | 'custom' | undefined
+    ): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.js b/components/lib/tristatecheckbox/TriStateCheckbox.js
new file mode 100644
index 0000000000..1121de4188
--- /dev/null
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.js
@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { PrimeReactContext, ariaLabel } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
+import { useMergeProps, useMountEffect } from '../hooks/Hooks';
+import { CheckIcon } from '../icons/check';
+import { TimesIcon } from '../icons/times';
+import { Tooltip } from '../tooltip/Tooltip';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { TriStateCheckboxBase } from './TriStateCheckboxBase';
+
+export const TriStateCheckbox = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = TriStateCheckboxBase.getProps(inProps, context);
+
+        const [checkBoxValue, setCheckBoxValue] = useState(null);
+        const elementRef = React.useRef(null);
+
+        const { ptm, cx, isUnstyled } = TriStateCheckboxBase.setMetaData({
+            props
+        });
+
+        useHandleStyle(TriStateCheckboxBase.css.styles, isUnstyled, { name: 'tristatecheckbox' });
+
+        useEffect(() => {
+            if ([true, false, null].includes(props.value)) {
+                setCheckBoxValue(props.value);
+            } else {
+                setCheckBoxValue(null);
+            }
+        }, [props.value]);
+
+        const onChange = (event) => {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+
+            let newValue;
+
+            if (checkBoxValue === null) {
+                newValue = true;
+            } else if (checkBoxValue === true) {
+                newValue = false;
+            } else if (checkBoxValue === false) {
+                newValue = null;
+            }
+
+            if (props.onChange) {
+                props.onChange({
+                    originalEvent: event,
+                    value: newValue,
+                    stopPropagation: () => {
+                        event?.stopPropagation();
+                    },
+                    preventDefault: () => {
+                        event?.preventDefault();
+                    },
+                    target: {
+                        name: props.name,
+                        id: props.id,
+                        value: newValue
+                    }
+                });
+            }
+        };
+
+        const onFocus = (event) => {
+            props?.onFocus?.(event);
+        };
+
+        const onBlur = (event) => {
+            props?.onBlur?.(event);
+        };
+
+        const onKeyDown = (e) => {
+            if (e.code === 'Enter' || e.code === 'NumpadEnter' || e.code === 'Space') {
+                onChange(e);
+                e.preventDefault();
+            }
+        };
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            focus: () => DomHandler.focusFirstElement(elementRef.current),
+            getElement: () => elementRef.current
+        }));
+
+        useMountEffect(() => {
+            if (props.autoFocus) {
+                DomHandler.focusFirstElement(elementRef.current);
+            }
+        });
+
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
+        const otherProps = TriStateCheckboxBase.getOtherProps(props);
+        const ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
+        const checkIconProps = mergeProps(
+            {
+                className: cx('checkIcon')
+            },
+            ptm('checkIcon')
+        );
+        const uncheckIconProps = mergeProps(
+            {
+                className: cx('checkIcon')
+            },
+            ptm('uncheckIcon')
+        );
+
+        let icon;
+
+        if (checkBoxValue === false) {
+            icon = props.uncheckIcon || <TimesIcon {...uncheckIconProps} />;
+        } else if (checkBoxValue === true) {
+            icon = props.checkIcon || <CheckIcon {...checkIconProps} />;
+        }
+
+        const checkIcon = IconUtils.getJSXIcon(icon, { ...checkIconProps }, { props });
+
+        const ariaValueLabel = checkBoxValue ? ariaLabel('trueLabel') : checkBoxValue === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
+        const ariaChecked = checkBoxValue ? 'true' : 'false';
+
+        const boxProps = mergeProps(
+            {
+                id: props.id + '_box',
+                className: cx('box'),
+                tabIndex: props.disabled ? '-1' : props.tabIndex,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onKeyDown: onKeyDown,
+                role: 'checkbox',
+                'aria-checked': ariaChecked,
+                ...ariaProps
+            },
+            ptm('box')
+        );
+
+        const srOnlyAriaProps = mergeProps(
+            {
+                className: 'p-hidden-accessible',
+                'aria-live': 'polite'
+            },
+            ptm('srOnlyAria')
+        );
+
+        const rootProps = mergeProps(
+            {
+                className: classNames(props.className, cx('root', { context })),
+                style: props.style,
+                'data-p-disabled': props.disabled
+            },
+            TriStateCheckboxBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        const inputProps = mergeProps(
+            {
+                id: props.inputId,
+                className: cx('input'),
+                type: 'checkbox',
+                'aria-invalid': props.invalid,
+                disabled: props.disabled,
+                readOnly: props.readOnly,
+                value: checkBoxValue,
+                checked: checkBoxValue,
+                onChange: onChange
+            },
+            ptm('input')
+        );
+
+        return (
+            <>
+                <div id={props.id} ref={elementRef} {...rootProps}>
+                    <input {...inputProps} />
+                    <span {...srOnlyAriaProps}>{ariaValueLabel}</span>
+                    <div {...boxProps}>{checkIcon}</div>
+                </div>
+                {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} pt={ptm('tooltip')} {...props.tooltipOptions} />}
+            </>
+        );
+    })
+);
+
+TriStateCheckbox.displayName = 'TriStateCheckbox';
diff --git a/components/lib/tristatecheckbox/TriStateCheckboxBase.js b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
new file mode 100644
index 0000000000..d64ad9c1fb
--- /dev/null
+++ b/components/lib/tristatecheckbox/TriStateCheckboxBase.js
@@ -0,0 +1,40 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ props, context }) =>
+        classNames('p-tristatecheckbox p-checkbox p-component', {
+            'p-highlight': props.value !== '' && props.value !== null,
+            'p-disabled': props.disabled,
+            'p-invalid': props.invalid,
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
+    checkIcon: 'p-checkbox-icon p-c',
+    box: 'p-checkbox-box',
+    input: 'p-checkbox-input'
+};
+
+export const TriStateCheckboxBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'TriStateCheckbox',
+        autoFocus: false,
+        checkIcon: null,
+        className: null,
+        disabled: false,
+        id: null,
+        invalid: false,
+        variant: null,
+        onChange: null,
+        readOnly: false,
+        style: null,
+        tabIndex: '0',
+        tooltip: null,
+        tooltipOptions: null,
+        uncheckIcon: null,
+        value: null,
+        children: undefined
+    },
+    css: {
+        classes
+    }
+});
diff --git a/components/lib/tristatecheckbox/package.json b/components/lib/tristatecheckbox/package.json
new file mode 100644
index 0000000000..2b385e5563
--- /dev/null
+++ b/components/lib/tristatecheckbox/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./tristatecheckbox.cjs.js",
+    "module": "./tristatecheckbox.esm.js",
+    "unpkg": "./tristatecheckbox.min.js",
+    "types": "./tristatecheckbox.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/tristatecheckbox/tristatecheckbox.d.ts b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
new file mode 100644
index 0000000000..b08c30fb84
--- /dev/null
+++ b/components/lib/tristatecheckbox/tristatecheckbox.d.ts
@@ -0,0 +1,175 @@
+/**
+ *
+ * TriStateCheckbox is used to select either "true", "false" or "null" as the value.
+ *
+ * [Live Demo](https://www.primereact.org/tristatecheckbox/)
+ *
+ * @module tristatecheckbox
+ *
+ */
+import * as React from 'react';
+import { CheckboxPassThroughType } from '../checkbox/checkbox';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { TooltipPassThroughOptions } from '../tooltip/tooltip';
+import { TooltipOptions } from '../tooltip/tooltipoptions';
+import { FormEvent } from '../ts-helpers';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type TriStateCheckboxPassThroughType<T> = PassThroughType<T, TriStateCheckboxPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TriStateCheckboxPassThroughMethodOptions {
+    props: TriStateCheckboxProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TriStateCheckboxProps.pt}
+ */
+export interface TriStateCheckboxPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TriStateCheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the input's DOM element.
+     */
+    input?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: CheckboxPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes tooltip's DOM element.
+     * @type {TooltipPassThroughOptions}
+     */
+    tooltip?: TooltipPassThroughOptions;
+    /**
+     * Uses to pass attributes to the check icon's DOM element.
+     */
+    checkIcon?: TriStateCheckboxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the uncheck icon's DOM element.
+     */
+    uncheckIcon?: TriStateCheckboxPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the sr only aria's DOM element.
+     */
+    srOnlyAria?: TriStateCheckboxPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom change event.
+ * @see {@link TriStateCheckboxProps.onChange}
+ * @extends {FormEvent}
+ * @event
+ */
+interface TriStateCheckboxChangeEvent extends FormEvent<boolean> {}
+
+/**
+ * Defines valid properties in TriStateCheckbox component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ * @group Properties
+ */
+export interface TriStateCheckboxProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'value' | 'ref'> {
+    /**
+     * When present, it specifies that the component should automatically get focus on load.
+     * @defaultValue false
+     */
+    autoFocus?: boolean | undefined;
+    /**
+     * Value of the TriStateCheckbox.
+     */
+    value?: boolean | undefined | null;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the element value cannot be altered.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
+    /**
+     * When present, it specifies that the value cannot be changed.
+     * @defaultValue false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Icon of the checkbox when checked.
+     */
+    checkIcon?: IconType<TriStateCheckboxProps> | undefined;
+    /**
+     * Icon of the checkbox when unchecked.
+     */
+    uncheckIcon?: IconType<TriStateCheckboxProps> | undefined;
+    /**
+     * Content of the tooltip.
+     */
+    tooltip?: string | undefined;
+    /**
+     * Configuration of the tooltip, refer to the tooltip documentation for more information.
+     */
+    tooltipOptions?: TooltipOptions | undefined;
+    /**
+     * Callback to invoke on value change
+     * @param {TriStateCheckboxChangeEvent} event - Browser event.
+     */
+    onChange?(event: TriStateCheckboxChangeEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TriStateCheckboxPassThroughOptions}
+     */
+    pt?: TriStateCheckboxPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * **PrimeReact - TriStateCheckbox**
+ *
+ * _TriStateCheckbox is used to select either "true", "false" or "null" as the value._
+ *
+ * [Live Demo](https://www.primereact.org/tristatecheckbox/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class TriStateCheckbox extends React.Component<TriStateCheckboxProps, any> {
+    /**
+     * Used to focus the component.
+     */
+    public focus(): void;
+    /**
+     * Used to get container element.
+     * @return {HTMLDivElement | null} Container element
+     */
+    public getElement(): HTMLDivElement | null;
+}
diff --git a/components/lib/ts-helpers.d.ts b/components/lib/ts-helpers.d.ts
new file mode 100644
index 0000000000..a4ac54a320
--- /dev/null
+++ b/components/lib/ts-helpers.d.ts
@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+export declare type Booleanish = boolean | 'true' | 'false';
+export declare type Numberish = number | string;
+export declare type Nullable<T = void> = T | null | undefined;
+
+export interface FormTarget<T = any> {
+    name: string;
+    id: string;
+    value: Nullable<T>;
+    checked?: boolean;
+    [key: string]: any;
+}
+
+export interface FormBooleanTarget {
+    name: string;
+    id: string;
+    value: boolean;
+    checked: boolean;
+    [key: string]: any;
+}
+
+export interface FormEvent<T = any, E = React.SyntheticEvent> {
+    originalEvent?: E;
+    value: Nullable<T>;
+    checked?: boolean;
+    stopPropagation(): void;
+    preventDefault(): void;
+    target: FormTarget<T>;
+}
+
+export interface FormBooleanEvent<E = React.SyntheticEvent> {
+    originalEvent?: E;
+    value: boolean;
+    checked: boolean;
+    stopPropagation(): void;
+    preventDefault(): void;
+    target: FormBooleanTarget;
+}
diff --git a/components/lib/utils/ClassNames.js b/components/lib/utils/ClassNames.js
new file mode 100644
index 0000000000..e14e2efbeb
--- /dev/null
+++ b/components/lib/utils/ClassNames.js
@@ -0,0 +1,27 @@
+export function classNames(...args) {
+    if (args) {
+        let classes = [];
+
+        for (let i = 0; i < args.length; i++) {
+            let className = args[i];
+
+            if (!className) {
+                continue;
+            }
+
+            const type = typeof className;
+
+            if (type === 'string' || type === 'number') {
+                classes.push(className);
+            } else if (type === 'object') {
+                const _classes = Array.isArray(className) ? className : Object.entries(className).map(([key, value]) => (value ? key : null));
+
+                classes = _classes.length ? classes.concat(_classes.filter((c) => !!c)) : classes;
+            }
+        }
+
+        return classes.join(' ').trim();
+    }
+
+    return undefined;
+}
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
new file mode 100644
index 0000000000..abc77c4a4e
--- /dev/null
+++ b/components/lib/utils/DomHandler.js
@@ -0,0 +1,1300 @@
+export default class DomHandler {
+    /**
+     * All data- properties like data-test-id
+     */
+    static DATA_PROPS = ['data-'];
+    /**
+     * All ARIA properties like aria-label and focus-target for https://www.npmjs.com/package/@q42/floating-focus-a11y
+     */
+    static ARIA_PROPS = ['aria', 'focus-target'];
+
+    static innerWidth(el) {
+        if (el) {
+            let width = el.offsetWidth;
+            let style = getComputedStyle(el);
+
+            width = width + (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
+
+            return width;
+        }
+
+        return 0;
+    }
+
+    static width(el) {
+        if (el) {
+            let width = el.offsetWidth;
+            let style = getComputedStyle(el);
+
+            width = width - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight));
+
+            return width;
+        }
+
+        return 0;
+    }
+
+    static getBrowserLanguage() {
+        return navigator.userLanguage || (navigator.languages && navigator.languages.length && navigator.languages[0]) || navigator.language || navigator.browserLanguage || navigator.systemLanguage || 'en';
+    }
+
+    static getWindowScrollTop() {
+        let doc = document.documentElement;
+
+        return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+    }
+
+    static getWindowScrollLeft() {
+        let doc = document.documentElement;
+
+        return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+    }
+
+    static getOuterWidth(el, margin) {
+        if (el) {
+            let width = el.getBoundingClientRect().width || el.offsetWidth;
+
+            if (margin) {
+                let style = getComputedStyle(el);
+
+                width = width + (parseFloat(style.marginLeft) + parseFloat(style.marginRight));
+            }
+
+            return width;
+        }
+
+        return 0;
+    }
+
+    static getOuterHeight(el, margin) {
+        if (el) {
+            let height = el.getBoundingClientRect().height || el.offsetHeight;
+
+            if (margin) {
+                let style = getComputedStyle(el);
+
+                height = height + (parseFloat(style.marginTop) + parseFloat(style.marginBottom));
+            }
+
+            return height;
+        }
+
+        return 0;
+    }
+
+    static getClientHeight(el, margin) {
+        if (el) {
+            let height = el.clientHeight;
+
+            if (margin) {
+                let style = getComputedStyle(el);
+
+                height = height + (parseFloat(style.marginTop) + parseFloat(style.marginBottom));
+            }
+
+            return height;
+        }
+
+        return 0;
+    }
+
+    static getClientWidth(el, margin) {
+        if (el) {
+            let width = el.clientWidth;
+
+            if (margin) {
+                let style = getComputedStyle(el);
+
+                width = width + (parseFloat(style.marginLeft) + parseFloat(style.marginRight));
+            }
+
+            return width;
+        }
+
+        return 0;
+    }
+
+    static getViewport() {
+        let win = window;
+        let d = document;
+        let e = d.documentElement;
+        let g = d.getElementsByTagName('body')[0];
+        let w = win.innerWidth || e.clientWidth || g.clientWidth;
+        let h = win.innerHeight || e.clientHeight || g.clientHeight;
+
+        return { width: w, height: h };
+    }
+
+    static getOffset(el) {
+        if (el) {
+            let rect = el.getBoundingClientRect();
+
+            return {
+                top: rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0),
+                left: rect.left + (window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0)
+            };
+        }
+
+        return {
+            top: 'auto',
+            left: 'auto'
+        };
+    }
+
+    static index(element) {
+        if (element) {
+            let children = element.parentNode.childNodes;
+            let num = 0;
+
+            for (let i = 0; i < children.length; i++) {
+                if (children[i] === element) {
+                    return num;
+                }
+
+                if (children[i].nodeType === 1) {
+                    num++;
+                }
+            }
+        }
+
+        return -1;
+    }
+
+    static addMultipleClasses(element, className) {
+        if (element && className) {
+            if (element.classList) {
+                let styles = className.split(' ');
+
+                for (let i = 0; i < styles.length; i++) {
+                    element.classList.add(styles[i]);
+                }
+            } else {
+                let styles = className.split(' ');
+
+                for (let i = 0; i < styles.length; i++) {
+                    element.className = element.className + (' ' + styles[i]);
+                }
+            }
+        }
+    }
+
+    static removeMultipleClasses(element, className) {
+        if (element && className) {
+            if (element.classList) {
+                let styles = className.split(' ');
+
+                for (let i = 0; i < styles.length; i++) {
+                    element.classList.remove(styles[i]);
+                }
+            } else {
+                let styles = className.split(' ');
+
+                for (let i = 0; i < styles.length; i++) {
+                    element.className = element.className.replace(new RegExp('(^|\\b)' + styles[i].split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+                }
+            }
+        }
+    }
+
+    static addClass(element, className) {
+        if (element && className) {
+            if (element.classList) {
+                element.classList.add(className);
+            } else {
+                element.className = element.className + (' ' + className);
+            }
+        }
+    }
+
+    static removeClass(element, className) {
+        if (element && className) {
+            if (element.classList) {
+                element.classList.remove(className);
+            } else {
+                element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+            }
+        }
+    }
+
+    static hasClass(element, className) {
+        if (element) {
+            if (element.classList) {
+                return element.classList.contains(className);
+            }
+
+            return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
+        }
+
+        return false;
+    }
+
+    static addStyles(element, styles = {}) {
+        if (element) {
+            Object.entries(styles).forEach(([key, value]) => (element.style[key] = value));
+        }
+    }
+
+    static find(element, selector) {
+        return element ? Array.from(element.querySelectorAll(selector)) : [];
+    }
+
+    static findSingle(element, selector) {
+        if (element) {
+            return element.querySelector(selector);
+        }
+
+        return null;
+    }
+
+    static setAttributes(element, attributes = {}) {
+        if (element) {
+            const computedStyles = (rule, value) => {
+                const styles = element?.$attrs?.[rule] ? [element?.$attrs?.[rule]] : [];
+
+                return [value].flat().reduce((cv, v) => {
+                    if (v !== null && v !== undefined) {
+                        const type = typeof v;
+
+                        if (type === 'string' || type === 'number') {
+                            cv.push(v);
+                        } else if (type === 'object') {
+                            const _cv = Array.isArray(v)
+                                ? computedStyles(rule, v)
+                                : Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : _v ? _k : undefined));
+
+                            cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
+                        }
+                    }
+
+                    return cv;
+                }, styles);
+            };
+
+            Object.entries(attributes).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    const matchedEvent = key.match(/^on(.+)/);
+
+                    if (matchedEvent) {
+                        element.addEventListener(matchedEvent[1].toLowerCase(), value);
+                    } else if (key === 'p-bind') {
+                        this.setAttributes(element, value);
+                    } else {
+                        value = key === 'class' ? [...new Set(computedStyles('class', value))].join(' ').trim() : key === 'style' ? computedStyles('style', value).join(';').trim() : value;
+                        (element.$attrs = element.$attrs || {}) && (element.$attrs[key] = value);
+                        element.setAttribute(key, value);
+                    }
+                }
+            });
+        }
+    }
+
+    static getAttribute(element, name) {
+        if (element) {
+            const value = element.getAttribute(name);
+
+            if (!isNaN(value)) {
+                return +value;
+            }
+
+            if (value === 'true' || value === 'false') {
+                return value === 'true';
+            }
+
+            return value;
+        }
+
+        return undefined;
+    }
+
+    static isAttributeEquals(element, name, value) {
+        return element ? this.getAttribute(element, name) === value : false;
+    }
+
+    static isAttributeNotEquals(element, name, value) {
+        return !this.isAttributeEquals(element, name, value);
+    }
+
+    static getHeight(el) {
+        if (el) {
+            let height = el.offsetHeight;
+            let style = getComputedStyle(el);
+
+            height = height - (parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth));
+
+            return height;
+        }
+
+        return 0;
+    }
+
+    static getWidth(el) {
+        if (el) {
+            let width = el.offsetWidth;
+            let style = getComputedStyle(el);
+
+            width = width - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth));
+
+            return width;
+        }
+
+        return 0;
+    }
+
+    static alignOverlay(overlay, target, appendTo, calculateMinWidth = true) {
+        if (overlay && target) {
+            if (appendTo === 'self') {
+                this.relativePosition(overlay, target);
+            } else {
+                calculateMinWidth && (overlay.style.minWidth = DomHandler.getOuterWidth(target) + 'px');
+                this.absolutePosition(overlay, target);
+            }
+        }
+    }
+
+    static absolutePosition(element, target, align = 'left') {
+        if (element && target) {
+            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
+            let elementOuterHeight = elementDimensions.height;
+            let elementOuterWidth = elementDimensions.width;
+            let targetOuterHeight = target.offsetHeight;
+            let targetOuterWidth = target.offsetWidth;
+            let targetOffset = target.getBoundingClientRect();
+            let windowScrollTop = this.getWindowScrollTop();
+            let windowScrollLeft = this.getWindowScrollLeft();
+            let viewport = this.getViewport();
+            let top;
+            let left;
+
+            if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
+                top = targetOffset.top + windowScrollTop - elementOuterHeight;
+
+                if (top < 0) {
+                    top = windowScrollTop;
+                }
+
+                element.style.transformOrigin = 'bottom';
+            } else {
+                top = targetOuterHeight + targetOffset.top + windowScrollTop;
+                element.style.transformOrigin = 'top';
+            }
+
+            const targetOffsetPx = targetOffset.left;
+
+            if (align === 'left') {
+                if (targetOffsetPx + elementOuterWidth > viewport.width) {
+                    left = Math.max(0, targetOffsetPx + windowScrollLeft + targetOuterWidth - elementOuterWidth);
+                } else {
+                    left = targetOffsetPx + windowScrollLeft;
+                }
+            } else {
+                if (targetOffsetPx + targetOuterWidth - elementOuterWidth < 0) {
+                    left = windowScrollLeft;
+                } else {
+                    left = targetOffsetPx + targetOuterWidth - elementOuterWidth + windowScrollLeft;
+                }
+            }
+
+            element.style.top = top + 'px';
+            element.style.left = left + 'px';
+        }
+    }
+
+    static relativePosition(element, target) {
+        if (element && target) {
+            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
+            const targetHeight = target.offsetHeight;
+            const targetOffset = target.getBoundingClientRect();
+            const viewport = this.getViewport();
+            let top;
+            let left;
+
+            if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
+                top = -1 * elementDimensions.height;
+
+                if (targetOffset.top + top < 0) {
+                    top = -1 * targetOffset.top;
+                }
+
+                element.style.transformOrigin = 'bottom';
+            } else {
+                top = targetHeight;
+                element.style.transformOrigin = 'top';
+            }
+
+            if (elementDimensions.width > viewport.width) {
+                // element wider then viewport and cannot fit on screen (align at left side of viewport)
+                left = targetOffset.left * -1;
+            } else if (targetOffset.left + elementDimensions.width > viewport.width) {
+                // element wider then viewport but can be fit on screen (align at right side of viewport)
+                left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
+            } else {
+                // element fits on screen (align with target)
+                left = 0;
+            }
+
+            element.style.top = top + 'px';
+            element.style.left = left + 'px';
+        }
+    }
+
+    static flipfitCollision(element, target, my = 'left top', at = 'left bottom', callback) {
+        if (element && target) {
+            const targetOffset = target.getBoundingClientRect();
+            const viewport = this.getViewport();
+            const myArr = my.split(' ');
+            const atArr = at.split(' ');
+            const getPositionValue = (arr, isOffset) => (isOffset ? +arr.substring(arr.search(/(\+|-)/g)) || 0 : arr.substring(0, arr.search(/(\+|-)/g)) || arr);
+            const position = {
+                my: {
+                    x: getPositionValue(myArr[0]),
+                    y: getPositionValue(myArr[1] || myArr[0]),
+                    offsetX: getPositionValue(myArr[0], true),
+                    offsetY: getPositionValue(myArr[1] || myArr[0], true)
+                },
+                at: {
+                    x: getPositionValue(atArr[0]),
+                    y: getPositionValue(atArr[1] || atArr[0]),
+                    offsetX: getPositionValue(atArr[0], true),
+                    offsetY: getPositionValue(atArr[1] || atArr[0], true)
+                }
+            };
+            const myOffset = {
+                left: () => {
+                    const totalOffset = position.my.offsetX + position.at.offsetX;
+
+                    return totalOffset + targetOffset.left + (position.my.x === 'left' ? 0 : -1 * (position.my.x === 'center' ? this.getOuterWidth(element) / 2 : this.getOuterWidth(element)));
+                },
+                top: () => {
+                    const totalOffset = position.my.offsetY + position.at.offsetY;
+
+                    return totalOffset + targetOffset.top + (position.my.y === 'top' ? 0 : -1 * (position.my.y === 'center' ? this.getOuterHeight(element) / 2 : this.getOuterHeight(element)));
+                }
+            };
+            const alignWithAt = {
+                count: {
+                    x: 0,
+                    y: 0
+                },
+                left: function () {
+                    const left = myOffset.left();
+                    const scrollLeft = DomHandler.getWindowScrollLeft();
+
+                    element.style.left = left + scrollLeft + 'px';
+
+                    if (this.count.x === 2) {
+                        element.style.left = scrollLeft + 'px';
+                        this.count.x = 0;
+                    } else if (left < 0) {
+                        this.count.x++;
+                        position.my.x = 'left';
+                        position.at.x = 'right';
+                        position.my.offsetX *= -1;
+                        position.at.offsetX *= -1;
+
+                        this.right();
+                    }
+                },
+                right: function () {
+                    const left = myOffset.left() + DomHandler.getOuterWidth(target);
+                    const scrollLeft = DomHandler.getWindowScrollLeft();
+
+                    element.style.left = left + scrollLeft + 'px';
+
+                    if (this.count.x === 2) {
+                        element.style.left = viewport.width - DomHandler.getOuterWidth(element) + scrollLeft + 'px';
+                        this.count.x = 0;
+                    } else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
+                        this.count.x++;
+
+                        position.my.x = 'right';
+                        position.at.x = 'left';
+                        position.my.offsetX *= -1;
+                        position.at.offsetX *= -1;
+
+                        this.left();
+                    }
+                },
+                top: function () {
+                    const top = myOffset.top();
+                    const scrollTop = DomHandler.getWindowScrollTop();
+
+                    element.style.top = top + scrollTop + 'px';
+
+                    if (this.count.y === 2) {
+                        element.style.left = scrollTop + 'px';
+                        this.count.y = 0;
+                    } else if (top < 0) {
+                        this.count.y++;
+
+                        position.my.y = 'top';
+                        position.at.y = 'bottom';
+                        position.my.offsetY *= -1;
+                        position.at.offsetY *= -1;
+
+                        this.bottom();
+                    }
+                },
+                bottom: function () {
+                    const top = myOffset.top() + DomHandler.getOuterHeight(target);
+                    const scrollTop = DomHandler.getWindowScrollTop();
+
+                    element.style.top = top + scrollTop + 'px';
+
+                    if (this.count.y === 2) {
+                        element.style.left = viewport.height - DomHandler.getOuterHeight(element) + scrollTop + 'px';
+                        this.count.y = 0;
+                    } else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
+                        this.count.y++;
+
+                        position.my.y = 'bottom';
+                        position.at.y = 'top';
+                        position.my.offsetY *= -1;
+                        position.at.offsetY *= -1;
+
+                        this.top();
+                    }
+                },
+                center: function (axis) {
+                    if (axis === 'y') {
+                        const top = myOffset.top() + DomHandler.getOuterHeight(target) / 2;
+
+                        element.style.top = top + DomHandler.getWindowScrollTop() + 'px';
+
+                        if (top < 0) {
+                            this.bottom();
+                        } else if (top + DomHandler.getOuterHeight(target) > viewport.height) {
+                            this.top();
+                        }
+                    } else {
+                        const left = myOffset.left() + DomHandler.getOuterWidth(target) / 2;
+
+                        element.style.left = left + DomHandler.getWindowScrollLeft() + 'px';
+
+                        if (left < 0) {
+                            this.left();
+                        } else if (left + DomHandler.getOuterWidth(element) > viewport.width) {
+                            this.right();
+                        }
+                    }
+                }
+            };
+
+            alignWithAt[position.at.x]('x');
+            alignWithAt[position.at.y]('y');
+
+            if (this.isFunction(callback)) {
+                callback(position);
+            }
+        }
+    }
+
+    static findCollisionPosition(position) {
+        if (position) {
+            const isAxisY = position === 'top' || position === 'bottom';
+            const myXPosition = position === 'left' ? 'right' : 'left';
+            const myYPosition = position === 'top' ? 'bottom' : 'top';
+
+            if (isAxisY) {
+                return {
+                    axis: 'y',
+                    my: `center ${myYPosition}`,
+                    at: `center ${position}`
+                };
+            }
+
+            return {
+                axis: 'x',
+                my: `${myXPosition} center`,
+                at: `${position} center`
+            };
+        }
+    }
+
+    static getParents(element, parents = []) {
+        return element.parentNode === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
+    }
+
+    /**
+     * Gets all scrollable parent elements of a given element
+     * @param {HTMLElement} element - The element to find scrollable parents for
+     * @returns {Array} Array of scrollable parent elements
+     */
+    static getScrollableParents(element) {
+        let scrollableParents = [];
+
+        if (element) {
+            // Get all parent elements
+            let parents = this.getParents(element);
+            // Regex to match auto or scroll overflow values
+            const overflowRegex = /(auto|scroll)/;
+
+            /**
+             * Checks if an element has overflow scroll/auto in any direction
+             * @param {HTMLElement} node - Element to check
+             * @returns {boolean} True if element has overflow scroll/auto
+             */
+            const overflowCheck = (node) => {
+                let styleDeclaration = node ? getComputedStyle(node) : null;
+
+                return (
+                    styleDeclaration && (overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflow-x')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflow-y')))
+                );
+            };
+
+            /**
+             * Adds a scrollable parent element to the collection
+             * @param {HTMLElement} node - Element to add
+             */
+            const addScrollableParent = (node) => {
+                // For document/body/html elements, add window instead
+                scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || this.isDocument(node) ? window : node);
+            };
+
+            // Iterate through all parent elements
+            for (let parent of parents) {
+                // Check for custom scroll selectors in data attribute
+                let scrollSelectors = parent.nodeType === 1 && parent.dataset?.scrollselectors;
+
+                if (scrollSelectors) {
+                    let selectors = scrollSelectors.split(',');
+
+                    // Check each selector
+                    for (let selector of selectors) {
+                        let el = this.findSingle(parent, selector);
+
+                        if (el && overflowCheck(el)) {
+                            addScrollableParent(el);
+                        }
+                    }
+                }
+
+                // Check if the parent itself is scrollable
+                if (parent.nodeType === 1 && overflowCheck(parent)) {
+                    addScrollableParent(parent);
+                }
+            }
+        }
+
+        return scrollableParents;
+    }
+
+    static getHiddenElementOuterHeight(element) {
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.display = 'block';
+            let elementHeight = element.offsetHeight;
+
+            element.style.display = 'none';
+            element.style.visibility = 'visible';
+
+            return elementHeight;
+        }
+
+        return 0;
+    }
+
+    static getHiddenElementOuterWidth(element) {
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.display = 'block';
+            let elementWidth = element.offsetWidth;
+
+            element.style.display = 'none';
+            element.style.visibility = 'visible';
+
+            return elementWidth;
+        }
+
+        return 0;
+    }
+
+    static getHiddenElementDimensions(element) {
+        let dimensions = {};
+
+        if (element) {
+            element.style.visibility = 'hidden';
+            element.style.display = 'block';
+            dimensions.width = element.offsetWidth;
+            dimensions.height = element.offsetHeight;
+            element.style.display = 'none';
+            element.style.visibility = 'visible';
+        }
+
+        return dimensions;
+    }
+
+    static fadeIn(element, duration) {
+        if (element) {
+            element.style.opacity = 0;
+
+            let last = +new Date();
+            let opacity = 0;
+
+            let tick = function () {
+                opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
+                element.style.opacity = opacity;
+                last = +new Date();
+
+                if (+opacity < 1) {
+                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
+                }
+            };
+
+            tick();
+        }
+    }
+
+    static fadeOut(element, duration) {
+        if (element) {
+            let opacity = 1;
+            let interval = 50;
+            let gap = interval / duration;
+
+            let fading = setInterval(() => {
+                opacity = opacity - gap;
+
+                if (opacity <= 0) {
+                    opacity = 0;
+                    clearInterval(fading);
+                }
+
+                element.style.opacity = opacity;
+            }, interval);
+        }
+    }
+
+    static getUserAgent() {
+        return navigator.userAgent;
+    }
+
+    static isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+    }
+
+    static isAndroid() {
+        return /(android)/i.test(navigator.userAgent);
+    }
+
+    static isChrome() {
+        return /(chrome)/i.test(navigator.userAgent);
+    }
+
+    static isClient() {
+        return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+    }
+
+    static isTouchDevice() {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }
+
+    static isFunction(obj) {
+        return !!(obj && obj.constructor && obj.call && obj.apply);
+    }
+
+    static appendChild(element, target) {
+        if (this.isElement(target)) {
+            target.appendChild(element);
+        } else if (target.el && target.el.nativeElement) {
+            target.el.nativeElement.appendChild(element);
+        } else {
+            throw new Error('Cannot append ' + target + ' to ' + element);
+        }
+    }
+
+    static removeChild(element, target) {
+        if (this.isElement(target)) {
+            target.removeChild(element);
+        } else if (target.el && target.el.nativeElement) {
+            target.el.nativeElement.removeChild(element);
+        } else {
+            throw new Error('Cannot remove ' + element + ' from ' + target);
+        }
+    }
+
+    static isElement(obj) {
+        return typeof HTMLElement === 'object' ? obj instanceof HTMLElement : obj && typeof obj === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+    }
+
+    static isDocument(obj) {
+        return typeof Document === 'object' ? obj instanceof Document : obj && typeof obj === 'object' && obj !== null && obj.nodeType === 9;
+    }
+
+    static scrollInView(container, item) {
+        let borderTopValue = getComputedStyle(container).getPropertyValue('border-top-width');
+        let borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
+        let paddingTopValue = getComputedStyle(container).getPropertyValue('padding-top');
+        let paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
+        let containerRect = container.getBoundingClientRect();
+        let itemRect = item.getBoundingClientRect();
+        let offset = itemRect.top + document.body.scrollTop - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
+        let scroll = container.scrollTop;
+        let elementHeight = container.clientHeight;
+        let itemHeight = this.getOuterHeight(item);
+
+        if (offset < 0) {
+            container.scrollTop = scroll + offset;
+        } else if (offset + itemHeight > elementHeight) {
+            container.scrollTop = scroll + offset - elementHeight + itemHeight;
+        }
+    }
+
+    static clearSelection() {
+        if (window.getSelection) {
+            if (window.getSelection().empty) {
+                window.getSelection().empty();
+            } else if (window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
+                window.getSelection().removeAllRanges();
+            }
+        } else if (document.selection && document.selection.empty) {
+            try {
+                document.selection.empty();
+            } catch (error) {
+                //ignore IE bug
+            }
+        }
+    }
+
+    static calculateScrollbarWidth(el) {
+        if (el) {
+            let style = getComputedStyle(el);
+
+            return el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
+        }
+
+        if (this.calculatedScrollbarWidth != null) {
+            return this.calculatedScrollbarWidth;
+        }
+
+        let scrollDiv = document.createElement('div');
+
+        scrollDiv.className = 'p-scrollbar-measure';
+        document.body.appendChild(scrollDiv);
+
+        let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+        document.body.removeChild(scrollDiv);
+
+        this.calculatedScrollbarWidth = scrollbarWidth;
+
+        return scrollbarWidth;
+    }
+
+    static calculateBodyScrollbarWidth() {
+        return window.innerWidth - document.documentElement.offsetWidth;
+    }
+
+    static getBrowser() {
+        if (!this.browser) {
+            let matched = this.resolveUserAgent();
+
+            this.browser = {};
+
+            if (matched.browser) {
+                this.browser[matched.browser] = true;
+                this.browser.version = matched.version;
+            }
+
+            if (this.browser.chrome) {
+                this.browser.webkit = true;
+            } else if (this.browser.webkit) {
+                this.browser.safari = true;
+            }
+        }
+
+        return this.browser;
+    }
+
+    static resolveUserAgent() {
+        let ua = navigator.userAgent.toLowerCase();
+        let match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || (ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) || [];
+
+        return {
+            browser: match[1] || '',
+            version: match[2] || '0'
+        };
+    }
+
+    static blockBodyScroll(className = 'p-overflow-hidden') {
+        /* PR Ref: https://github.com/primefaces/primereact/pull/4976
+         * @todo This method is called several times after this PR. Refactors will be made to prevent this in future releases.
+         */
+        const hasScrollbarWidth = !!document.body.style.getPropertyValue('--scrollbar-width');
+
+        !hasScrollbarWidth && document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
+        this.addClass(document.body, className);
+    }
+
+    static unblockBodyScroll(className = 'p-overflow-hidden') {
+        document.body.style.removeProperty('--scrollbar-width');
+        this.removeClass(document.body, className);
+    }
+
+    static isVisible(element) {
+        // https://stackoverflow.com/a/59096915/502366 (in future use IntersectionObserver)
+        return element && (element.clientHeight !== 0 || element.getClientRects().length !== 0 || getComputedStyle(element).display !== 'none');
+    }
+
+    static isExist(element) {
+        return !!(element !== null && typeof element !== 'undefined' && element.nodeName && element.parentNode);
+    }
+
+    static getFocusableElements(element, selector = '') {
+        let focusableElements = DomHandler.find(
+            element,
+            `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector},
+                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])${selector}`
+        );
+
+        let visibleFocusableElements = [];
+
+        for (let focusableElement of focusableElements) {
+            if (getComputedStyle(focusableElement).display !== 'none' && getComputedStyle(focusableElement).visibility !== 'hidden') {
+                visibleFocusableElements.push(focusableElement);
+            }
+        }
+
+        return visibleFocusableElements;
+    }
+
+    static getFirstFocusableElement(element, selector) {
+        const focusableElements = DomHandler.getFocusableElements(element, selector);
+
+        return focusableElements.length > 0 ? focusableElements[0] : null;
+    }
+
+    static getLastFocusableElement(element, selector) {
+        const focusableElements = DomHandler.getFocusableElements(element, selector);
+
+        return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
+    }
+
+    /**
+     * Focus an input element if it does not already have focus.
+     *
+     * @param {HTMLElement} el a HTML element
+     * @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
+     */
+    static focus(el, scrollTo) {
+        const preventScroll = scrollTo === undefined ? true : !scrollTo;
+
+        el && document.activeElement !== el && el.focus({ preventScroll });
+    }
+
+    /**
+     * Focus the first focusable element if it does not already have focus.
+     *
+     * @param {HTMLElement} el a HTML element
+     * @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
+     * @return {HTMLElement | undefined} the first focusable HTML element found
+     */
+    static focusFirstElement(el, scrollTo) {
+        if (!el) {
+            return;
+        }
+
+        const firstFocusableElement = DomHandler.getFirstFocusableElement(el);
+
+        firstFocusableElement && DomHandler.focus(firstFocusableElement, scrollTo);
+
+        return firstFocusableElement;
+    }
+
+    static getCursorOffset(el, prevText, nextText, currentText) {
+        if (el) {
+            let style = getComputedStyle(el);
+            let ghostDiv = document.createElement('div');
+
+            ghostDiv.style.position = 'absolute';
+            ghostDiv.style.top = '0px';
+            ghostDiv.style.left = '0px';
+            ghostDiv.style.visibility = 'hidden';
+            ghostDiv.style.pointerEvents = 'none';
+            ghostDiv.style.overflow = style.overflow;
+            ghostDiv.style.width = style.width;
+            ghostDiv.style.height = style.height;
+            ghostDiv.style.padding = style.padding;
+            ghostDiv.style.border = style.border;
+            ghostDiv.style.overflowWrap = style.overflowWrap;
+            ghostDiv.style.whiteSpace = style.whiteSpace;
+            ghostDiv.style.lineHeight = style.lineHeight;
+            ghostDiv.innerHTML = prevText.replace(/\r\n|\r|\n/g, '<br />');
+
+            let ghostSpan = document.createElement('span');
+
+            ghostSpan.textContent = currentText;
+            ghostDiv.appendChild(ghostSpan);
+
+            let text = document.createTextNode(nextText);
+
+            ghostDiv.appendChild(text);
+            document.body.appendChild(ghostDiv);
+
+            const { offsetLeft, offsetTop, clientHeight } = ghostSpan;
+
+            document.body.removeChild(ghostDiv);
+
+            return {
+                left: Math.abs(offsetLeft - el.scrollLeft),
+                top: Math.abs(offsetTop - el.scrollTop) + clientHeight
+            };
+        }
+
+        return {
+            top: 'auto',
+            left: 'auto'
+        };
+    }
+
+    static invokeElementMethod(element, methodName, args) {
+        element[methodName].apply(element, args);
+    }
+
+    static isClickable(element) {
+        const targetNode = element.nodeName;
+        const parentNode = element.parentElement && element.parentElement.nodeName;
+
+        return (
+            targetNode === 'INPUT' ||
+            targetNode === 'TEXTAREA' ||
+            targetNode === 'BUTTON' ||
+            targetNode === 'A' ||
+            parentNode === 'INPUT' ||
+            parentNode === 'TEXTAREA' ||
+            parentNode === 'BUTTON' ||
+            parentNode === 'A' ||
+            this.hasClass(element, 'p-button') ||
+            this.hasClass(element.parentElement, 'p-button') ||
+            this.hasClass(element.parentElement, 'p-checkbox') ||
+            this.hasClass(element.parentElement, 'p-radiobutton')
+        );
+    }
+
+    static applyStyle(element, style) {
+        if (typeof style === 'string') {
+            element.style.cssText = style;
+        } else {
+            for (let prop in style) {
+                element.style[prop] = style[prop];
+            }
+        }
+    }
+
+    static exportCSV(csv, filename) {
+        let blob = new Blob([csv], {
+            type: 'application/csv;charset=utf-8;'
+        });
+
+        if (window.navigator.msSaveOrOpenBlob) {
+            navigator.msSaveOrOpenBlob(blob, filename + '.csv');
+        } else {
+            const isDownloaded = DomHandler.saveAs({ name: filename + '.csv', src: URL.createObjectURL(blob) });
+
+            if (!isDownloaded) {
+                csv = 'data:text/csv;charset=utf-8,' + csv;
+                window.open(encodeURI(csv));
+            }
+        }
+    }
+
+    static saveAs(file) {
+        if (file) {
+            let link = document.createElement('a');
+
+            if (link.download !== undefined) {
+                const { name, src } = file;
+
+                link.setAttribute('href', src);
+                link.setAttribute('download', name);
+                link.style.display = 'none';
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    static createInlineStyle(nonce, styleContainer) {
+        let styleElement = document.createElement('style');
+
+        DomHandler.addNonce(styleElement, nonce);
+
+        if (!styleContainer) {
+            styleContainer = document.head;
+        }
+
+        styleContainer.appendChild(styleElement);
+
+        return styleElement;
+    }
+
+    static removeInlineStyle(styleElement) {
+        if (this.isExist(styleElement)) {
+            try {
+                styleElement.parentNode.removeChild(styleElement);
+            } catch (error) {
+                // style element may have already been removed in a fast refresh
+            }
+
+            styleElement = null;
+        }
+
+        return styleElement;
+    }
+
+    static addNonce(styleElement, nonce) {
+        try {
+            if (!nonce) {
+                nonce = process.env.REACT_APP_CSS_NONCE;
+            }
+        } catch (error) {
+            // NOOP
+        }
+
+        nonce && styleElement.setAttribute('nonce', nonce);
+    }
+
+    static getTargetElement(target) {
+        if (!target) {
+            return null;
+        }
+
+        if (target === 'document') {
+            return document;
+        } else if (target === 'window') {
+            return window;
+        } else if (typeof target === 'object' && target.hasOwnProperty('current')) {
+            return this.isExist(target.current) ? target.current : null;
+        }
+
+        const isFunction = (obj) => !!(obj && obj.constructor && obj.call && obj.apply);
+        const element = isFunction(target) ? target() : target;
+
+        return this.isDocument(element) || this.isExist(element) ? element : null;
+    }
+
+    /**
+     * Get the attribute names for an element and sorts them alpha for comparison
+     */
+    static getAttributeNames(node) {
+        let index;
+        let rv;
+        let attrs;
+
+        rv = [];
+        attrs = node.attributes;
+
+        for (index = 0; index < attrs.length; ++index) {
+            rv.push(attrs[index].nodeName);
+        }
+
+        rv.sort();
+
+        return rv;
+    }
+
+    /**
+     * Compare two elements for equality.  Even will compare if the style element
+     * is out of order for example:
+     *
+     * elem1 = style="color: red; font-size: 28px"
+     * elem2 = style="font-size: 28px; color: red"
+     */
+    static isEqualElement(elm1, elm2) {
+        let attrs1;
+        let attrs2;
+        let name;
+        let node1;
+        let node2;
+
+        // Compare attributes without order sensitivity
+        attrs1 = DomHandler.getAttributeNames(elm1);
+        attrs2 = DomHandler.getAttributeNames(elm2);
+
+        if (attrs1.join(',') !== attrs2.join(',')) {
+            // console.log("Found nodes with different sets of attributes; not equiv");
+            return false;
+        }
+
+        // ...and values
+        // unless you want to compare DOM0 event handlers
+        // (onclick="...")
+        for (let index = 0; index < attrs1.length; ++index) {
+            name = attrs1[index];
+
+            if (name === 'style') {
+                const astyle = elm1.style;
+                const bstyle = elm2.style;
+                const rexDigitsOnly = /^\d+$/;
+
+                for (const key of Object.keys(astyle)) {
+                    if (!rexDigitsOnly.test(key) && astyle[key] !== bstyle[key]) {
+                        // Not equivalent, stop
+                        //console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
+                        return false;
+                    }
+                }
+            } else if (elm1.getAttribute(name) !== elm2.getAttribute(name)) {
+                // console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
+                return false;
+            }
+        }
+
+        // Walk the children
+        for (node1 = elm1.firstChild, node2 = elm2.firstChild; node1 && node2; node1 = node1.nextSibling, node2 = node2.nextSibling) {
+            if (node1.nodeType !== node2.nodeType) {
+                // display("Found nodes of different types; not equiv");
+                return false;
+            }
+
+            if (node1.nodeType === 1) {
+                // Element
+                if (!DomHandler.isEqualElement(node1, node2)) {
+                    return false;
+                }
+            } else if (node1.nodeValue !== node2.nodeValue) {
+                // console.log("Found nodes with mis-matched nodeValues; not equiv");
+                return false;
+            }
+        }
+
+        if (node1 || node2) {
+            // One of the elements had more nodes than the other
+            // console.log("Found more children of one element than the other; not equivalent");
+            return false;
+        }
+
+        // Seem the same
+        return true;
+    }
+
+    static hasCSSAnimation(element) {
+        if (element) {
+            const style = getComputedStyle(element);
+            const animationDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');
+
+            return animationDuration > 0;
+        }
+
+        return false;
+    }
+
+    static hasCSSTransition(element) {
+        if (element) {
+            const style = getComputedStyle(element);
+            const transitionDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');
+
+            return transitionDuration > 0;
+        }
+
+        return false;
+    }
+}
diff --git a/components/lib/utils/EventBus.js b/components/lib/utils/EventBus.js
new file mode 100644
index 0000000000..d0e72ce7c8
--- /dev/null
+++ b/components/lib/utils/EventBus.js
@@ -0,0 +1,27 @@
+export default function EventBus() {
+    const allHandlers = new Map();
+
+    return {
+        on(type, handler) {
+            let handlers = allHandlers.get(type);
+
+            if (!handlers) {
+                handlers = [handler];
+            } else {
+                handlers.push(handler);
+            }
+
+            allHandlers.set(type, handlers);
+        },
+        off(type, handler) {
+            let handlers = allHandlers.get(type);
+
+            handlers && handlers.splice(handlers.indexOf(handler) >>> 0, 1);
+        },
+        emit(type, evt) {
+            let handlers = allHandlers.get(type);
+
+            handlers && handlers.slice().forEach((handler) => handler(evt));
+        }
+    };
+}
diff --git a/components/lib/utils/IconUtils.js b/components/lib/utils/IconUtils.js
new file mode 100644
index 0000000000..228f09fa17
--- /dev/null
+++ b/components/lib/utils/IconUtils.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { classNames } from './ClassNames';
+import ObjectUtils from './ObjectUtils';
+import UniqueComponentId from './UniqueComponentId';
+
+export default class IconUtils {
+    static getJSXIcon(icon, iconProps = {}, options = {}) {
+        let content = null;
+
+        if (icon !== null) {
+            const iconType = typeof icon;
+            const className = classNames(iconProps.className, iconType === 'string' && icon);
+
+            content = <span {...iconProps} className={className} key={UniqueComponentId('icon')} />;
+
+            if (iconType !== 'string') {
+                const defaultContentOptions = {
+                    iconProps: iconProps,
+                    element: content,
+                    ...options
+                };
+
+                return ObjectUtils.getJSXElement(icon, defaultContentOptions);
+            }
+        }
+
+        return content;
+    }
+}
diff --git a/components/lib/utils/Mask.js b/components/lib/utils/Mask.js
new file mode 100644
index 0000000000..b0e9a3f191
--- /dev/null
+++ b/components/lib/utils/Mask.js
@@ -0,0 +1,549 @@
+import DomHandler from './DomHandler';
+
+export function mask(el, options) {
+    const defaultOptions = {
+        mask: null,
+        slotChar: '_',
+        autoClear: true,
+        unmask: false,
+        readOnly: false,
+        onComplete: null,
+        onChange: null,
+        onFocus: null,
+        onBlur: null
+    };
+
+    options = { ...defaultOptions, ...options };
+    let tests;
+    let partialPosition;
+    let len;
+    let firstNonMaskPos;
+    let defs;
+    let androidChrome;
+    let lastRequiredNonMaskPos;
+    let oldVal;
+    let focusText;
+    let caretTimeoutId;
+    let buffer;
+    let defaultBuffer;
+
+    const caret = (first, last) => {
+        let range;
+        let begin;
+        let end;
+
+        if (!el.offsetParent || el !== document.activeElement) {
+            return;
+        }
+
+        if (typeof first === 'number') {
+            begin = first;
+            end = typeof last === 'number' ? last : begin;
+
+            if (el.setSelectionRange) {
+                el.setSelectionRange(begin, end);
+            } else if (el.createTextRange) {
+                range = el.createTextRange();
+                range.collapse(true);
+                range.moveEnd('character', end);
+                range.moveStart('character', begin);
+                range.select();
+            }
+        } else {
+            if (el.setSelectionRange) {
+                begin = el.selectionStart;
+                end = el.selectionEnd;
+            } else if (document.selection && document.selection.createRange) {
+                range = document.selection.createRange();
+                begin = 0 - range.duplicate().moveStart('character', -100000);
+                end = begin + range.text.length;
+            }
+
+            return { begin: begin, end: end };
+        }
+    };
+
+    const isCompleted = () => {
+        for (let i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) {
+            if (tests[i] && buffer[i] === getPlaceholder(i)) {
+                return false;
+            }
+        }
+
+        return true;
+    };
+
+    const getPlaceholder = (i) => {
+        if (i < options.slotChar.length) {
+            return options.slotChar.charAt(i);
+        }
+
+        return options.slotChar.charAt(0);
+    };
+
+    const getValue = () => {
+        return options.unmask ? getUnmaskedValue() : el && el.value;
+    };
+
+    const seekNext = (pos) => {
+        while (++pos < len && !tests[pos]) {}
+
+        return pos;
+    };
+
+    const seekPrev = (pos) => {
+        while (--pos >= 0 && !tests[pos]) {}
+
+        return pos;
+    };
+
+    const shiftL = (begin, end) => {
+        let i;
+        let j;
+
+        if (begin < 0) {
+            return;
+        }
+
+        for (i = begin, j = seekNext(end); i < len; i++) {
+            if (tests[i]) {
+                if (j < len && tests[i].test(buffer[j])) {
+                    buffer[i] = buffer[j];
+                    buffer[j] = getPlaceholder(j);
+                } else {
+                    break;
+                }
+
+                j = seekNext(j);
+            }
+        }
+
+        writeBuffer();
+        caret(Math.max(firstNonMaskPos, begin));
+    };
+
+    const shiftR = (pos) => {
+        let i;
+        let c;
+        let j;
+        let t;
+
+        for (i = pos, c = getPlaceholder(pos); i < len; i++) {
+            if (tests[i]) {
+                j = seekNext(i);
+                t = buffer[i];
+                buffer[i] = c;
+
+                if (j < len && tests[j].test(t)) {
+                    c = t;
+                } else {
+                    break;
+                }
+            }
+        }
+    };
+
+    const handleAndroidInput = (e) => {
+        let curVal = el.value;
+        let pos = caret();
+
+        if (oldVal && oldVal.length && oldVal.length > curVal.length) {
+            // a deletion or backspace happened
+            checkVal(true);
+
+            while (pos.begin > 0 && !tests[pos.begin - 1]) {
+                pos.begin--;
+            }
+
+            if (pos.begin === 0) {
+                while (pos.begin < firstNonMaskPos && !tests[pos.begin]) {
+                    pos.begin++;
+                }
+            }
+
+            caret(pos.begin, pos.begin);
+        } else {
+            checkVal(true);
+
+            while (pos.begin < len && !tests[pos.begin]) {
+                pos.begin++;
+            }
+
+            caret(pos.begin, pos.begin);
+        }
+
+        if (options.onComplete && isCompleted()) {
+            options.onComplete({
+                originalEvent: e,
+                value: getValue()
+            });
+        }
+    };
+
+    const onBlur = (e) => {
+        checkVal();
+        options.onBlur && options.onBlur(e);
+        updateModel(e);
+
+        if (el.value !== focusText) {
+            let event = document.createEvent('HTMLEvents');
+
+            event.initEvent('change', true, false);
+            el.dispatchEvent(event);
+        }
+    };
+
+    const onKeyDown = (e) => {
+        if (options.readOnly) {
+            return;
+        }
+
+        let k = e.which || e.keyCode;
+        let pos;
+        let begin;
+        let end;
+
+        oldVal = el.value;
+
+        //backspace, delete, and escape get special treatment
+        if (k === 8 || k === 46 || (DomHandler.isIOS() && k === 127)) {
+            pos = caret();
+            begin = pos.begin;
+            end = pos.end;
+
+            if (end - begin === 0) {
+                begin = k !== 46 ? seekPrev(begin) : (end = seekNext(begin - 1));
+                end = k === 46 ? seekNext(end) : end;
+            }
+
+            clearBuffer(begin, end);
+            shiftL(begin, end - 1);
+            updateModel(e);
+
+            e.preventDefault();
+        } else if (k === 13) {
+            // enter
+            onBlur(e);
+            updateModel(e);
+        } else if (k === 27) {
+            // escape
+            el.value = focusText;
+            caret(0, checkVal());
+            updateModel(e);
+            e.preventDefault();
+        }
+    };
+
+    const onKeyPress = (e) => {
+        if (options.readOnly) {
+            return;
+        }
+
+        let k = e.which || e.keyCode;
+        let pos = caret();
+        let p;
+        let c;
+        let next;
+        let completed;
+
+        if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {
+            //Ignore
+            return;
+        } else if (k && k !== 13) {
+            if (pos.end - pos.begin !== 0) {
+                clearBuffer(pos.begin, pos.end);
+                shiftL(pos.begin, pos.end - 1);
+            }
+
+            p = seekNext(pos.begin - 1);
+
+            if (p < len) {
+                c = String.fromCharCode(k);
+
+                if (tests[p].test(c)) {
+                    shiftR(p);
+
+                    buffer[p] = c;
+                    writeBuffer();
+                    next = seekNext(p);
+
+                    if (DomHandler.isAndroid()) {
+                        //Path for CSP Violation on FireFox OS 1.1
+                        let proxy = () => {
+                            caret(next);
+                        };
+
+                        setTimeout(proxy, 0);
+                    } else {
+                        caret(next);
+                    }
+
+                    if (pos.begin <= lastRequiredNonMaskPos) {
+                        completed = isCompleted();
+                    }
+                }
+            }
+
+            e.preventDefault();
+        }
+
+        updateModel(e);
+
+        if (options.onComplete && completed) {
+            options.onComplete({
+                originalEvent: e,
+                value: getValue()
+            });
+        }
+    };
+
+    const clearBuffer = (start, end) => {
+        let i;
+
+        for (i = start; i < end && i < len; i++) {
+            if (tests[i]) {
+                buffer[i] = getPlaceholder(i);
+            }
+        }
+    };
+
+    const writeBuffer = () => {
+        el.value = buffer.join('');
+    };
+
+    const checkVal = (allow) => {
+        //try to place characters where they belong
+        let test = el.value;
+        let lastMatch = -1;
+        let i;
+        let c;
+        let pos;
+
+        for (i = 0, pos = 0; i < len; i++) {
+            if (tests[i]) {
+                buffer[i] = getPlaceholder(i);
+
+                while (pos++ < test.length) {
+                    c = test.charAt(pos - 1);
+
+                    if (tests[i].test(c)) {
+                        buffer[i] = c;
+                        lastMatch = i;
+                        break;
+                    }
+                }
+
+                if (pos > test.length) {
+                    clearBuffer(i + 1, len);
+                    break;
+                }
+            } else {
+                if (buffer[i] === test.charAt(pos)) {
+                    pos++;
+                }
+
+                if (i < partialPosition) {
+                    lastMatch = i;
+                }
+            }
+        }
+
+        if (allow) {
+            writeBuffer();
+        } else if (lastMatch + 1 < partialPosition) {
+            if (options.autoClear || buffer.join('') === defaultBuffer) {
+                // Invalid value. Remove it and replace it with the
+                // mask, which is the default behavior.
+                if (el.value) {
+                    el.value = '';
+                }
+
+                clearBuffer(0, len);
+            } else {
+                // Invalid value, but we opt to show the value to the
+                // user and allow them to correct their mistake.
+                writeBuffer();
+            }
+        } else {
+            writeBuffer();
+            el.value = el.value.substring(0, lastMatch + 1);
+        }
+
+        return partialPosition ? i : firstNonMaskPos;
+    };
+
+    const onFocus = (e) => {
+        if (options.readOnly) {
+            return;
+        }
+
+        clearTimeout(caretTimeoutId);
+        let pos;
+
+        focusText = el.value;
+
+        pos = checkVal();
+
+        caretTimeoutId = setTimeout(() => {
+            if (el !== document.activeElement) {
+                return;
+            }
+
+            writeBuffer();
+
+            if (pos === options.mask.replace('?', '').length) {
+                caret(0, pos);
+            } else {
+                caret(pos);
+            }
+        }, 100);
+
+        if (options.onFocus) {
+            options.onFocus(e);
+        }
+    };
+
+    const onInput = (event) => {
+        if (androidChrome) {
+            handleAndroidInput(event);
+        } else {
+            handleInputChange(event);
+        }
+    };
+
+    const handleInputChange = (e) => {
+        if (options.readOnly) {
+            return;
+        }
+
+        let pos = checkVal(true);
+
+        caret(pos);
+        updateModel(e);
+
+        if (options.onComplete && isCompleted()) {
+            options.onComplete({
+                originalEvent: e,
+                value: getValue()
+            });
+        }
+    };
+
+    const getUnmaskedValue = () => {
+        let unmaskedBuffer = [];
+
+        for (let i = 0; i < buffer.length; i++) {
+            let c = buffer[i];
+
+            if (tests[i] && c !== getPlaceholder(i)) {
+                unmaskedBuffer.push(c);
+            }
+        }
+
+        return unmaskedBuffer.join('');
+    };
+
+    const updateModel = (e) => {
+        if (options.onChange) {
+            let val = getValue();
+
+            options.onChange({
+                originalEvent: e,
+                value: defaultBuffer !== val ? val : '',
+                stopPropagation: () => {
+                    e.stopPropagation();
+                },
+                preventDefault: () => {
+                    e.preventDefault();
+                },
+                target: {
+                    value: defaultBuffer !== val ? val : ''
+                }
+            });
+        }
+    };
+
+    const bindEvents = () => {
+        el.addEventListener('focus', onFocus);
+        el.addEventListener('blur', onBlur);
+        el.addEventListener('keydown', onKeyDown);
+        el.addEventListener('keypress', onKeyPress);
+        el.addEventListener('input', onInput);
+        el.addEventListener('paste', handleInputChange);
+    };
+
+    const unbindEvents = () => {
+        el.removeEventListener('focus', onFocus);
+        el.removeEventListener('blur', onBlur);
+        el.removeEventListener('keydown', onKeyDown);
+        el.removeEventListener('keypress', onKeyPress);
+        el.removeEventListener('input', onInput);
+        el.removeEventListener('paste', handleInputChange);
+    };
+
+    const init = () => {
+        tests = [];
+        partialPosition = options.mask.length;
+        len = options.mask.length;
+        firstNonMaskPos = null;
+        defs = {
+            9: '[0-9]',
+            a: '[A-Za-z]',
+            '*': '[A-Za-z0-9]'
+        };
+
+        androidChrome = DomHandler.isChrome() && DomHandler.isAndroid();
+
+        let maskTokens = options.mask.split('');
+
+        for (let i = 0; i < maskTokens.length; i++) {
+            let c = maskTokens[i];
+
+            if (c === '?') {
+                len--;
+                partialPosition = i;
+            } else if (defs[c]) {
+                tests.push(new RegExp(defs[c]));
+
+                if (firstNonMaskPos === null) {
+                    firstNonMaskPos = tests.length - 1;
+                }
+
+                if (i < partialPosition) {
+                    lastRequiredNonMaskPos = tests.length - 1;
+                }
+            } else {
+                tests.push(null);
+            }
+        }
+
+        buffer = [];
+
+        for (let i = 0; i < maskTokens.length; i++) {
+            let c = maskTokens[i];
+
+            if (c !== '?') {
+                if (defs[c]) {
+                    buffer.push(getPlaceholder(i));
+                } else {
+                    buffer.push(c);
+                }
+            }
+        }
+
+        defaultBuffer = buffer.join('');
+    };
+
+    if (el && options.mask) {
+        init();
+        bindEvents();
+    }
+
+    return {
+        init,
+        bindEvents,
+        unbindEvents,
+        updateModel,
+        getValue
+    };
+}
diff --git a/components/lib/utils/MergeProps.js b/components/lib/utils/MergeProps.js
new file mode 100644
index 0000000000..d8ae1e4047
--- /dev/null
+++ b/components/lib/utils/MergeProps.js
@@ -0,0 +1,55 @@
+/**
+ * Merges properties together taking an Array of props and merging into one single set of
+ * properties. The options can contain a "classNameMergeFunction" which can be something
+ * like Tailwind Merge for properly merging Tailwind classes.
+ *
+ * @param {object[]} props the array of object properties to merge
+ * @param {*} options either empty or could contain a custom merge function like TailwindMerge
+ * @returns the single properties value after merging
+ */
+export function mergeProps(props, options = {}) {
+    if (!props) {
+        return undefined;
+    }
+
+    const isFunction = (obj) => typeof obj === 'function';
+    const { classNameMergeFunction } = options;
+    const hasMergeFunction = isFunction(classNameMergeFunction);
+
+    return props.reduce((merged, ps) => {
+        if (!ps) {
+            return merged;
+        }
+
+        for (const key in ps) {
+            const value = ps[key];
+
+            if (key === 'style') {
+                merged.style = { ...merged.style, ...ps.style };
+            } else if (key === 'className') {
+                let newClassName = '';
+
+                if (hasMergeFunction) {
+                    newClassName = classNameMergeFunction(merged.className, ps.className);
+                } else {
+                    newClassName = [merged.className, ps.className].join(' ').trim();
+                }
+
+                merged.className = newClassName || undefined;
+            } else if (isFunction(value)) {
+                const existingFn = merged[key];
+
+                merged[key] = existingFn
+                    ? (...args) => {
+                          existingFn(...args);
+                          value(...args);
+                      }
+                    : value;
+            } else {
+                merged[key] = value;
+            }
+        }
+
+        return merged;
+    }, {});
+}
diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
new file mode 100644
index 0000000000..411e79e10e
--- /dev/null
+++ b/components/lib/utils/ObjectUtils.js
@@ -0,0 +1,659 @@
+export default class ObjectUtils {
+    static equals(obj1, obj2, field) {
+        if (field && obj1 && typeof obj1 === 'object' && obj2 && typeof obj2 === 'object') {
+            return this.deepEquals(this.resolveFieldData(obj1, field), this.resolveFieldData(obj2, field));
+        }
+
+        return this.deepEquals(obj1, obj2);
+    }
+
+    /**
+     * Compares two JSON objects for deep equality recursively comparing both objects.
+     * @param {*} a the first JSON object
+     * @param {*} b the second JSON object
+     * @returns true if equals, false it not
+     */
+    static deepEquals(a, b) {
+        if (a === b) {
+            return true;
+        }
+
+        if (a && b && typeof a === 'object' && typeof b === 'object') {
+            let arrA = Array.isArray(a);
+            let arrB = Array.isArray(b);
+            let i;
+            let length;
+            let key;
+
+            if (arrA && arrB) {
+                length = a.length;
+
+                if (length !== b.length) {
+                    return false;
+                }
+
+                for (i = length; i-- !== 0; ) {
+                    if (!this.deepEquals(a[i], b[i])) {
+                        return false;
+                    }
+                }
+
+                return true;
+            }
+
+            if (arrA !== arrB) {
+                return false;
+            }
+
+            let dateA = a instanceof Date;
+            let dateB = b instanceof Date;
+
+            if (dateA !== dateB) {
+                return false;
+            }
+
+            if (dateA && dateB) {
+                return a.getTime() === b.getTime();
+            }
+
+            let regexpA = a instanceof RegExp;
+            let regexpB = b instanceof RegExp;
+
+            if (regexpA !== regexpB) {
+                return false;
+            }
+
+            if (regexpA && regexpB) {
+                return a.toString() === b.toString();
+            }
+
+            let keys = Object.keys(a);
+
+            length = keys.length;
+
+            if (length !== Object.keys(b).length) {
+                return false;
+            }
+
+            for (i = length; i-- !== 0; ) {
+                if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
+                    return false;
+                }
+            }
+
+            for (i = length; i-- !== 0; ) {
+                key = keys[i];
+
+                if (!this.deepEquals(a[key], b[key])) {
+                    return false;
+                }
+            }
+
+            return true;
+        }
+
+        /*eslint no-self-compare: "off"*/
+        return a !== a && b !== b;
+    }
+
+    static resolveFieldData(data, field) {
+        if (!data || !field) {
+            // short circuit if there is nothing to resolve
+            return null;
+        }
+
+        try {
+            const value = data[field];
+
+            if (this.isNotEmpty(value)) {
+                return value;
+            }
+        } catch {
+            // Performance optimization: https://github.com/primefaces/primereact/issues/4797
+            // do nothing and continue to other methods to resolve field data
+        }
+
+        if (Object.keys(data).length) {
+            if (this.isFunction(field)) {
+                return field(data);
+            } else if (this.isNotEmpty(data[field])) {
+                return data[field];
+            } else if (field.indexOf('.') === -1) {
+                return data[field];
+            }
+
+            let fields = field.split('.');
+            let value = data;
+
+            for (let i = 0, len = fields.length; i < len; ++i) {
+                if (value == null) {
+                    return null;
+                }
+
+                value = value[fields[i]];
+            }
+
+            return value;
+        }
+
+        return null;
+    }
+
+    static findDiffKeys(obj1, obj2) {
+        if (!obj1 || !obj2) {
+            return {};
+        }
+
+        return Object.keys(obj1)
+            .filter((key) => !obj2.hasOwnProperty(key))
+            .reduce((result, current) => {
+                result[current] = obj1[current];
+
+                return result;
+            }, {});
+    }
+
+    /**
+     * Removes keys from a JSON object that start with a string such as "data" to get all "data-id" type properties.
+     *
+     * @param {any} obj the JSON object to reduce
+     * @param {string[]} startsWiths the string(s) to check if the property starts with this key
+     * @returns the JSON object containing only the key/values that match the startsWith string
+     */
+    static reduceKeys(obj, startsWiths) {
+        const result = {};
+
+        if (!obj || !startsWiths || startsWiths.length === 0) {
+            return result;
+        }
+
+        Object.keys(obj)
+            .filter((key) => startsWiths.some((value) => key.startsWith(value)))
+            .forEach(function (key) {
+                result[key] = obj[key];
+                delete obj[key];
+            });
+
+        return result;
+    }
+
+    static reorderArray(value, from, to) {
+        if (value && from !== to) {
+            if (to >= value.length) {
+                to = to % value.length;
+                from = from % value.length;
+            }
+
+            value.splice(to, 0, value.splice(from, 1)[0]);
+        }
+    }
+
+    static findIndexInList(value, list, dataKey) {
+        if (list) {
+            return dataKey ? list.findIndex((item) => this.equals(item, value, dataKey)) : list.findIndex((item) => item === value);
+        }
+
+        return -1;
+    }
+
+    static getJSXElement(obj, ...params) {
+        return this.isFunction(obj) ? obj(...params) : obj;
+    }
+
+    static getItemValue(obj, ...params) {
+        return this.isFunction(obj) ? obj(...params) : obj;
+    }
+
+    static getProp(props, prop = '', defaultProps = {}) {
+        const value = props ? props[prop] : undefined;
+
+        return value === undefined ? defaultProps[prop] : value;
+    }
+
+    static getPropCaseInsensitive(props, prop, defaultProps = {}) {
+        const fkey = this.toFlatCase(prop);
+
+        for (let key in props) {
+            if (props.hasOwnProperty(key) && this.toFlatCase(key) === fkey) {
+                return props[key];
+            }
+        }
+
+        for (let key in defaultProps) {
+            if (defaultProps.hasOwnProperty(key) && this.toFlatCase(key) === fkey) {
+                return defaultProps[key];
+            }
+        }
+
+        return undefined; // Property not found
+    }
+
+    static getMergedProps(props, defaultProps) {
+        return Object.assign({}, defaultProps, props);
+    }
+
+    static getDiffProps(props, defaultProps) {
+        return this.findDiffKeys(props, defaultProps);
+    }
+
+    /**
+     * Gets the value of a property which can be a function or a direct value.
+     * If the property is a function, it will be invoked with the provided parameters.
+     * @param {*} obj - The object to get the value from
+     * @param {...*} params - Parameters to pass to the function if obj is a function
+     * @returns {*} The resolved value
+     */
+    static getPropValue(obj, ...params) {
+        // If obj is not a function, return it directly
+        if (!this.isFunction(obj)) {
+            return obj;
+        }
+
+        // Handle function invocation
+        if (params.length === 1) {
+            // For single parameter case, unwrap array if needed to avoid extra nesting
+            const param = params[0];
+
+            return obj(Array.isArray(param) ? param[0] : param);
+        }
+
+        // Pass all parameters to function
+        return obj(...params);
+    }
+
+    static getComponentProp(component, prop = '', defaultProps = {}) {
+        return this.isNotEmpty(component) ? this.getProp(component.props, prop, defaultProps) : undefined;
+    }
+
+    static getComponentProps(component, defaultProps) {
+        return this.isNotEmpty(component) ? this.getMergedProps(component.props, defaultProps) : undefined;
+    }
+
+    static getComponentDiffProps(component, defaultProps) {
+        return this.isNotEmpty(component) ? this.getDiffProps(component.props, defaultProps) : undefined;
+    }
+
+    static isValidChild(child, type, validTypes) {
+        /* eslint-disable */
+        if (child) {
+            let childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
+
+            // for App Router in Next.js ^14,
+            if (!childType && child?.type?._payload?.value) {
+                childType = child.type._payload.value.find((v) => v === type);
+            }
+
+            const isValid = childType === type;
+
+            try {
+                if (process.env.NODE_ENV !== 'production' && !isValid) {
+                    if (validTypes && validTypes.includes(childType)) {
+                        return false;
+                    }
+                    const messageTypes = validTypes ? validTypes : [type];
+
+                    console.error(
+                        `PrimeReact: Unexpected type; '${childType}'. Parent component expects a ${messageTypes.map((t) => `${t}`).join(' or ')} component or a component with the ${messageTypes
+                            .map((t) => `__TYPE="${t}"`)
+                            .join(' or ')} property as a child component.`
+                    );
+                    return false;
+                }
+            } catch (error) {
+                // NOOP
+            }
+
+            return isValid;
+        }
+
+        return false;
+        /* eslint-enable */
+    }
+
+    static getRefElement(ref) {
+        if (ref) {
+            return typeof ref === 'object' && ref.hasOwnProperty('current') ? ref.current : ref;
+        }
+
+        return null;
+    }
+
+    static combinedRefs(innerRef, forwardRef) {
+        if (innerRef && forwardRef) {
+            if (typeof forwardRef === 'function') {
+                forwardRef(innerRef.current);
+            } else {
+                forwardRef.current = innerRef.current;
+            }
+        }
+    }
+
+    static removeAccents(str) {
+        if (str && str.search(/[\xC0-\xFF]/g) > -1) {
+            str = str
+                .replace(/[\xC0-\xC5]/g, 'A')
+                .replace(/[\xC6]/g, 'AE')
+                .replace(/[\xC7]/g, 'C')
+                .replace(/[\xC8-\xCB]/g, 'E')
+                .replace(/[\xCC-\xCF]/g, 'I')
+                .replace(/[\xD0]/g, 'D')
+                .replace(/[\xD1]/g, 'N')
+                .replace(/[\xD2-\xD6\xD8]/g, 'O')
+                .replace(/[\xD9-\xDC]/g, 'U')
+                .replace(/[\xDD]/g, 'Y')
+                .replace(/[\xDE]/g, 'P')
+                .replace(/[\xE0-\xE5]/g, 'a')
+                .replace(/[\xE6]/g, 'ae')
+                .replace(/[\xE7]/g, 'c')
+                .replace(/[\xE8-\xEB]/g, 'e')
+                .replace(/[\xEC-\xEF]/g, 'i')
+                .replace(/[\xF1]/g, 'n')
+                .replace(/[\xF2-\xF6\xF8]/g, 'o')
+                .replace(/[\xF9-\xFC]/g, 'u')
+                .replace(/[\xFE]/g, 'p')
+                .replace(/[\xFD\xFF]/g, 'y');
+        }
+
+        return str;
+    }
+
+    static toFlatCase(str) {
+        // convert snake, kebab, camel and pascal cases to flat case
+        return this.isNotEmpty(str) && this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+    }
+
+    static toCapitalCase(str) {
+        return this.isNotEmpty(str) && this.isString(str) ? str[0].toUpperCase() + str.slice(1) : str;
+    }
+
+    static trim(value) {
+        // trim only if the value is actually a string
+        return this.isNotEmpty(value) && this.isString(value) ? value.trim() : value;
+    }
+
+    static isEmpty(value) {
+        return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
+    }
+
+    static isNotEmpty(value) {
+        return !this.isEmpty(value);
+    }
+
+    static isFunction(value) {
+        return !!(value && value.constructor && value.call && value.apply);
+    }
+
+    static isObject(value) {
+        return value !== null && value instanceof Object && value.constructor === Object;
+    }
+
+    static isDate(value) {
+        return value !== null && value instanceof Date && value.constructor === Date;
+    }
+
+    static isArray(value) {
+        return value !== null && Array.isArray(value);
+    }
+
+    static isString(value) {
+        return value !== null && typeof value === 'string';
+    }
+
+    static isPrintableCharacter(char = '') {
+        return this.isNotEmpty(char) && char.length === 1 && char.match(/\S| /);
+    }
+
+    static isLetter(char) {
+        return /^[a-zA-Z\u00C0-\u017F]$/.test(char);
+    }
+
+    static isScalar(value) {
+        return value != null && (typeof value === 'string' || typeof value === 'number' || typeof value === 'bigint' || typeof value === 'boolean');
+    }
+
+    /**
+     * Firefox-v103 does not currently support the "findLast" method. It is stated that this method will be supported with Firefox-v104.
+     * https://caniuse.com/mdn-javascript_builtins_array_findlast
+     */
+    static findLast(arr, callback) {
+        let item;
+
+        if (this.isNotEmpty(arr)) {
+            try {
+                item = arr.findLast(callback);
+            } catch {
+                item = [...arr].reverse().find(callback);
+            }
+        }
+
+        return item;
+    }
+
+    /**
+     * Firefox-v103 does not currently support the "findLastIndex" method. It is stated that this method will be supported with Firefox-v104.
+     * https://caniuse.com/mdn-javascript_builtins_array_findlastindex
+     */
+    static findLastIndex(arr, callback) {
+        let index = -1;
+
+        if (this.isNotEmpty(arr)) {
+            try {
+                index = arr.findLastIndex(callback);
+            } catch {
+                index = arr.lastIndexOf([...arr].reverse().find(callback));
+            }
+        }
+
+        return index;
+    }
+
+    static sort(value1, value2, order = 1, comparator, nullSortOrder = 1) {
+        const result = this.compare(value1, value2, comparator, order);
+        let finalSortOrder = order;
+
+        // nullSortOrder == 1 means Excel like sort nulls at bottom
+        if (this.isEmpty(value1) || this.isEmpty(value2)) {
+            finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
+        }
+
+        return finalSortOrder * result;
+    }
+
+    static compare(value1, value2, comparator, order = 1) {
+        let result = -1;
+        const emptyValue1 = this.isEmpty(value1);
+        const emptyValue2 = this.isEmpty(value2);
+
+        if (emptyValue1 && emptyValue2) {
+            result = 0;
+        } else if (emptyValue1) {
+            result = order;
+        } else if (emptyValue2) {
+            result = -order;
+        } else if (typeof value1 === 'string' && typeof value2 === 'string') {
+            result = comparator(value1, value2);
+        } else {
+            result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        }
+
+        return result;
+    }
+
+    static localeComparator(locale) {
+        //performance gain using Int.Collator. It is not recommended to use localeCompare against large arrays.
+        return new Intl.Collator(locale, { numeric: true }).compare;
+    }
+
+    static findChildrenByKey(data, key) {
+        for (const item of data) {
+            if (item.key === key) {
+                return item.children || [];
+            } else if (item.children) {
+                const result = this.findChildrenByKey(item.children, key);
+
+                if (result.length > 0) {
+                    return result;
+                }
+            }
+        }
+
+        return [];
+    }
+
+    /**
+     * This function takes mutates and object with a new value given
+     * a specific field. This will handle deeply nested fields that
+     * need to be modified or created.
+     *
+     * e.g:
+     * data = {
+     *  nested: {
+     *      foo: "bar"
+     *  }
+     * }
+     *
+     * field = "nested.foo"
+     * value = "baz"
+     *
+     * The function will mutate data to be
+     * e.g:
+     * data = {
+     *  nested: {
+     *      foo: "baz"
+     *  }
+     * }
+     *
+     * @param {object} data the object to be modified
+     * @param {string} field the field in the object to replace
+     * @param {any} value the value to have replaced in the field
+     */
+    static mutateFieldData(data, field, value) {
+        if (typeof data !== 'object' || typeof field !== 'string') {
+            // short circuit if there is nothing to resolve
+            return;
+        }
+
+        const fields = field.split('.');
+        let obj = data;
+
+        for (let i = 0, len = fields.length; i < len; ++i) {
+            // Check if we are on the last field
+            if (i + 1 - len === 0) {
+                obj[fields[i]] = value;
+                break;
+            }
+
+            if (!obj[fields[i]]) {
+                obj[fields[i]] = {};
+            }
+
+            obj = obj[fields[i]];
+        }
+    }
+
+    /**
+     * This helper function takes an object and a dot-separated key path. It traverses the object based on the path,
+     * returning the value at the specified depth. If any part of the path is missing or undefined, it returns undefined.
+     *
+     * Example:
+     * const obj = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const path = 'address.city';
+     * const result = ObjectUtils.getNestedValue(obj, path);
+     * console.log(result); // Output: "Wonderland"
+     *
+     * @param {object} obj - The object to traverse.
+     * @param {string} path - The dot-separated key path.
+     * @returns {*} The value at the specified depth, or undefined if any part of the path is missing or undefined.
+     */
+    static getNestedValue(obj, path) {
+        return path.split('.').reduce((acc, part) => (acc && acc[part] !== undefined ? acc[part] : undefined), obj);
+    }
+
+    /**
+     * This function takes an object and a dot-separated key path. It traverses the object based on the path,
+     * returning the value at the specified depth. If any part of the path is missing or undefined, it returns undefined.
+     *
+     * Example:
+     * const objA = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const objB = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const result = ObjectUtils.absoluteCompare(objA, objB);
+     * console.log(result); // Output: true
+     *
+     * const objC = { name: 'Alice', address: { city: 'Wonderland', zip: 12346 } };
+     * const result2 = ObjectUtils.absoluteCompare(objA, objC);
+     * console.log(result2); // Output: false
+     *
+     * @param {object} objA - The first object to compare.
+     * @param {object} objB - The second object to compare.
+     * @param {number} [maxDepth=1] - The maximum depth to compare.
+     * @param {number} [currentDepth=0] - The current depth (used internally for recursion).
+     * @returns {boolean} True if the objects are equal within the specified depth, false otherwise.
+     *
+     */
+    static absoluteCompare(objA, objB, maxDepth = 1, currentDepth = 0) {
+        if (!objA || !objB) return true;
+        if (currentDepth > maxDepth) return true;
+
+        if (typeof objA !== typeof objB) return false;
+
+        const aKeys = Object.keys(objA);
+        const bKeys = Object.keys(objB);
+
+        if (aKeys.length !== bKeys.length) return false;
+
+        for (const key of aKeys) {
+            const aValue = objA[key];
+            const bValue = objB[key];
+
+            // Skip comparison if values are objects
+            const isObject = ObjectUtils.isObject(aValue) && ObjectUtils.isObject(bValue);
+            const isFunction = ObjectUtils.isFunction(aValue) && ObjectUtils.isFunction(bValue);
+
+            if ((isObject || isFunction) && !this.absoluteCompare(aValue, bValue, maxDepth, currentDepth + 1)) return false;
+            if (!isObject && aValue !== bValue) return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * This helper function takes two objects and a list of keys to compare. It compares the values of the specified keys
+     * in both objects. If any comparison fails, it returns false. If all specified properties are equal, it returns true.
+     * It performs a shallow comparison using absoluteCompare if no keys are provided.
+     *
+     * Example:
+     * const objA = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const objB = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const keysToCompare = ['name', 'address.city', 'address.zip'];
+     * const result = ObjectUtils.selectiveCompare(objA, objB, keysToCompare);
+     * console.log(result); // Output: true
+     *
+     * const objC = { name: 'Alice', address: { city: 'Wonderland', zip: 12346 } };
+     * const result2 = ObjectUtils.selectiveCompare(objA, objC, keysToCompare);
+     * console.log(result2); // Output: false
+     *
+     * @param {object} a - The first object to compare.
+     * @param {object} b - The second object to compare.
+     * @param {string[]} [keysToCompare] - The keys to compare. If not provided, performs a shallow comparison using absoluteCompare.
+     * @param {number} [maxDepth=1] - The maximum depth to compare if the variables are objects.
+     * @returns {boolean} True if all specified properties are equal, false otherwise.
+     */
+    static selectiveCompare(a, b, keysToCompare, maxDepth = 1) {
+        if (a === b) return true;
+        if (!a || !b || typeof a !== 'object' || typeof b !== 'object') return false;
+        if (!keysToCompare) return this.absoluteCompare(a, b, 1); // If no keys are provided, the comparison is limited to one depth level.
+
+        for (const key of keysToCompare) {
+            const aValue = this.getNestedValue(a, key);
+            const bValue = this.getNestedValue(b, key);
+
+            const isObject = typeof aValue === 'object' && aValue !== null && typeof bValue === 'object' && bValue !== null;
+
+            // If the current key is an object, they are compared in one further level only.
+            if (isObject && !this.absoluteCompare(aValue, bValue, maxDepth)) return false;
+            if (!isObject && aValue !== bValue) return false;
+        }
+
+        return true;
+    }
+}
diff --git a/components/lib/utils/UniqueComponentId.js b/components/lib/utils/UniqueComponentId.js
new file mode 100644
index 0000000000..3fef37570c
--- /dev/null
+++ b/components/lib/utils/UniqueComponentId.js
@@ -0,0 +1,7 @@
+let lastId = 0;
+
+export default function UniqueComponentId(prefix = 'pr_id_') {
+    lastId++;
+
+    return `${prefix}${lastId}`;
+}
diff --git a/components/lib/utils/Utils.js b/components/lib/utils/Utils.js
new file mode 100644
index 0000000000..1870e37861
--- /dev/null
+++ b/components/lib/utils/Utils.js
@@ -0,0 +1,11 @@
+import { classNames } from './ClassNames';
+import DomHandler from './DomHandler';
+import EventBus from './EventBus';
+import IconUtils from './IconUtils';
+import { mask } from './Mask';
+import { mergeProps } from './MergeProps';
+import ObjectUtils from './ObjectUtils';
+import UniqueComponentId from './UniqueComponentId';
+import { ZIndexUtils } from './ZIndexUtils';
+
+export { DomHandler, EventBus, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mask, mergeProps };
diff --git a/components/lib/utils/ZIndexUtils.js b/components/lib/utils/ZIndexUtils.js
new file mode 100644
index 0000000000..795d7be3a7
--- /dev/null
+++ b/components/lib/utils/ZIndexUtils.js
@@ -0,0 +1,46 @@
+function handler() {
+    let zIndexes = [];
+
+    const generateZIndex = (key, autoZIndex, baseZIndex = 999) => {
+        const lastZIndex = getLastZIndex(key, autoZIndex, baseZIndex);
+        const newZIndex = lastZIndex.value + (lastZIndex.key === key ? 0 : baseZIndex) + 1;
+
+        zIndexes.push({ key, value: newZIndex });
+
+        return newZIndex;
+    };
+
+    const revertZIndex = (zIndex) => {
+        zIndexes = zIndexes.filter((obj) => obj.value !== zIndex);
+    };
+
+    const getCurrentZIndex = (key, autoZIndex) => {
+        return getLastZIndex(key, autoZIndex).value;
+    };
+
+    const getLastZIndex = (key, autoZIndex, baseZIndex = 0) => {
+        return [...zIndexes].reverse().find((obj) => (autoZIndex ? true : obj.key === key)) || { key, value: baseZIndex };
+    };
+
+    const getZIndex = (el) => {
+        return el ? parseInt(el.style.zIndex, 10) || 0 : 0;
+    };
+
+    return {
+        get: getZIndex,
+        set: (key, el, autoZIndex, baseZIndex) => {
+            if (el) {
+                el.style.zIndex = String(generateZIndex(key, autoZIndex, baseZIndex));
+            }
+        },
+        clear: (el) => {
+            if (el) {
+                revertZIndex(ZIndexUtils.get(el));
+                el.style.zIndex = '';
+            }
+        },
+        getCurrent: (key, autoZIndex) => getCurrentZIndex(key, autoZIndex)
+    };
+}
+
+export const ZIndexUtils = handler();
diff --git a/components/lib/utils/package.json b/components/lib/utils/package.json
new file mode 100644
index 0000000000..9ff84ed43d
--- /dev/null
+++ b/components/lib/utils/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./utils.cjs.js",
+    "module": "./utils.esm.js",
+    "unpkg": "./utils.min.js",
+    "types": "./utils.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts
new file mode 100644
index 0000000000..fe76dc3e75
--- /dev/null
+++ b/components/lib/utils/utils.d.ts
@@ -0,0 +1,218 @@
+/**
+ *
+ * @todo Write the documentation.
+ *
+ * @module utils
+ *
+ */
+import * as React from 'react';
+import { PassThroughOptions } from '../passthrough';
+
+export declare function classNames(...args: any[]): string | undefined;
+
+/**
+ * Merges properties together taking an Array of props and merging into one single set of
+ * properties. The options can contain a "classNameMergeFunction" which can be something
+ * like Tailwind Merge for properly merging Tailwind classes.
+ *
+ * @param {object[]} args the array of object properties to merge
+ * @param {PassThroughOptions} options either empty or could contain a custom merge function like TailwindMerge
+ * @returns the single properties value after merging
+ */
+export declare function mergeProps(args: object[], options?: PassThroughOptions): object | undefined;
+
+export declare class DomHandler {
+    static innerWidth(el: HTMLElement): number;
+    static width(el: HTMLElement): number;
+    static getBrowserLanguage(): string;
+    static getWindowScrollTop(): number;
+    static getWindowScrollLeft(): number;
+    static getOuterWidth(el?: HTMLElement | null, margin?: boolean): number;
+    static getOuterHeight(el?: HTMLElement | null, margin?: boolean): number;
+    static getClientHeight(el?: HTMLElement | null, margin?: boolean): number;
+    static getClientWidth(el?: HTMLElement | null, margin?: boolean): number;
+    static getViewport(): { width: number; height: number };
+    static getOffset(el: HTMLElement): { top: any; left: any };
+    static index(el: HTMLElement): number;
+    static addMultipleClasses(el: HTMLElement, className: string): void;
+    static removeMultipleClasses(el: HTMLElement, className: string): void;
+    static addClass(el: HTMLElement, className: string): void;
+    static removeClass(el: HTMLElement, className: string): void;
+    static addStyles(el: HTMLElement, styles: object): void;
+    static hasClass(el: HTMLElement, className: string): boolean;
+    static find(el: HTMLElement, selector: string): any[];
+    static findSingle(el: HTMLElement, selector: string): any;
+    static createElement(type: string, attributes: object, ...children: any): HTMLElement;
+    static setAttributes(el: HTMLElement, attributes: object): void;
+    static getAttribute(el: HTMLElement, name: string): any;
+    static isAttributeEquals(el: HTMLElement, name: string, value: any): boolean;
+    static isAttributeNotEquals(el: HTMLElement, name: string, value: any): boolean;
+    static getHeight(el: HTMLElement): number;
+    static getWidth(el: HTMLElement): number;
+    static alignOverlay(overlay: HTMLElement, target: HTMLElement, appendTo?: string, calculateMinWidth?: boolean): void;
+    static absolutePosition(el: HTMLElement, target: HTMLElement): void;
+    static relativePosition(el: HTMLElement, target: HTMLElement): void;
+    static flipfitCollision(el: HTMLElement, target: HTMLElement, my?: string, at?: string, callback?: any): void;
+    static findCollisionPosition(position: string): void;
+    static getParents(el: HTMLElement, parents?: any[]): any[];
+    static getScrollableParents(el: HTMLElement): any[];
+    static getHiddenElementOuterHeight(el: HTMLElement): number;
+    static getHiddenElementOuterWidth(el: HTMLElement): number;
+    static getHiddenElementDimensions(el: HTMLElement): { width?: number; height?: number };
+    static fadeIn(el: HTMLElement, duration: number): void;
+    static fadeOut(el: HTMLElement, duration: number): void;
+    static getUserAgent(): string;
+    static isIOS(): boolean;
+    static isAndroid(): boolean;
+    static isClient(): boolean;
+    static isTouchDevice(): boolean;
+    static isFunction(obj: any): boolean;
+    static appendChild(el: HTMLElement, target: HTMLElement): void;
+    static removeChild(el: HTMLElement, target: HTMLElement): void;
+    static isElement(obj: any): boolean;
+    static isDocument(obj: any): boolean;
+    static scrollInView(container: HTMLElement, item: HTMLElement): void;
+    static clearSelection(): void;
+    static calculateScrollbarWidth(el: HTMLElement): number;
+    static calculateBodyScrollbarWidth(): number;
+    static getBrowser(): object;
+    static blockBodyScroll(className?: string): void;
+    static unblockBodyScroll(className?: string): void;
+    static resolveUserAgent(): { browser: string; version: string };
+    static isVisible(el: HTMLElement): boolean;
+    static isExist(el: HTMLElement): boolean;
+    static getFocusableElements(el: HTMLElement, selector?: string): any[];
+    static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
+    static getLastFocusableElement(el: HTMLElement, selector?: string): any;
+    static focus(el: HTMLElement, scrollTo?: boolean): void;
+    static getCursorOffset(el: HTMLElement, prevText?: string, nextText?: string, currentText?: string): { top: any; left: any };
+    static invokeElementMethod(el: HTMLElement, methodName: string, arg: any): void;
+    static isClickable(el: HTMLElement): boolean;
+    static applyStyle(el: HTMLElement, style: React.CSSProperties | string): void;
+    static exportCSV(csv: any, filename: string): void;
+    static saveAs(file: { name: string; url: any }): boolean;
+    static createInlineStyle(nonce?: string, styleContainer?: ShadowRoot | HTMLElement): HTMLStyleElement;
+    static removeInlineStyle(styleElement: HTMLStyleElement): HTMLStyleElement | null;
+    static getTargetElement(target: any): HTMLElement | null;
+}
+
+export declare function EventBus(): {
+    on(type: string, fn: any): void;
+    emit(type: string, evt?: any): void;
+    off(type: string, fn: any): void;
+};
+
+export declare function mask(
+    el: HTMLElement,
+    options: object
+): {
+    init(): void;
+    bindEvents(): void;
+    unbindEvents(): void;
+    updateModel(e: React.SyntheticEvent): void;
+    getValue(): string;
+};
+
+export declare class ObjectUtils {
+    static equals(obj1: any, obj2: any, field: string): boolean;
+    static deepEquals(a: any, b: any): boolean;
+    static resolveFieldData(data: any, field: string): any;
+    static mutateFieldData(data: object, field: string, value: any): void;
+    static findDiffKeys(obj1: any, obj2: any): object;
+    static reorderArray(value: any, from: number, to: number): void;
+    static findIndexInList(value: any, list: any[], dataKey?: string): number;
+    static getJSXElement(obj: any, ...params: any[]): any;
+    static getItemValue(obj: any, ...params: any[]): any;
+    static getProp(props: object, prop: string, defaultProps?: object): any;
+    static getPropCaseInsensitive(props: object, prop: string, defaultProps?: object): any;
+    static getMergedProps(props: object, defaultProps: object): object;
+    static getDiffProps(props: object, defaultProps: object): object;
+    static getPropValue(obj: any, ...params: any[]): any;
+    static isValidChild(child: any, type: string): boolean;
+    static getComponentProp(component: any, prop: string, defaultProps?: object): any;
+    static getComponentProps(component: any, defaultProps?: object): object | undefined;
+    static getComponentDiffProps(component: any, defaultProps?: object): object | undefined;
+    static getRefElement(ref: any): any;
+    static combinedRefs(innerRef: any, forwardRef: any): void;
+    static removeAccents(str: any): string;
+    static toFlatCase(str: string): string;
+    static toCapitalCase(str: string): string;
+    static trim(value: any): any;
+    static isEmpty(value: any): boolean;
+    static isNotEmpty(value: any): boolean;
+    static isFunction(value: any): boolean;
+    static isObject(value: any): boolean;
+    static isDate(value: any): boolean;
+    static isArray(value: any): boolean;
+    static isString(value: any): boolean;
+    static isPrintableCharacter(char: string): boolean;
+    static isLetter(char: string): boolean;
+    static isScalar(value: any): boolean;
+    static findLast(value: any[], callback: () => any): any;
+    static findLastIndex(value: any[], callback: () => any): number;
+    static sort(value1: any, value2: any, order: number, locale: string | string[]): number;
+    static getNestedValue(obj: object, path: string): any;
+    static absoluteCompare(objA: object, objB: object, maxDepth?: number, currentDepth?: number): boolean;
+    static selectiveCompare(a: object, b: object, keysToCompare?: string[], maxDepth?: number): boolean;
+}
+
+/**
+ * Icon utilities for managing icon tasks.
+ */
+export declare class IconUtils {
+    static getJSXIcon(icon: IconType<any>, iconProps: React.HTMLProps<HTMLElement>, options: any): any;
+}
+
+/**
+ * Generate a unique id for components for a page.
+ * @param prefix the optional string prefix of the id
+ */
+export declare function UniqueComponentId(prefix?: string): string;
+
+/**
+ * ZIndex utilities for managing zindex states of different types.
+ */
+export declare namespace ZIndexUtils {
+    export function get(el?: HTMLElement): number;
+    export function set(key: string, el: HTMLElement, autoZIndex?: boolean, baseZIndex?: number): void;
+    export function clear(el: HTMLElement): void;
+    export function getBase(key: string): number;
+    export function getCurrent(key: string): number;
+}
+
+/**
+ * Icon options passed to any icon.
+ * @template ComponentProps Props from the owning component.
+ * @template AdditionalProps Any custom properties of an icon like SortIcon of the Datatable for example.
+ */
+export type IconOptions<ComponentProps, AdditionalProps = NonNullable<unknown>> = AdditionalProps & {
+    /**
+     * Icon specific properties. Size property allows FontAwesome to work properly.
+     * @type {(React.HTMLProps<unknown> & { size?: string }) | (React.SVGProps<unknown> & { size?: string })}
+     */
+    iconProps: (React.HTMLProps<unknown> & { size?: string }) | (React.SVGProps<unknown> & { size?: string });
+    /**
+     * The element representing the icon.
+     * @type {React.ReactNode}
+     */
+    element: React.ReactNode;
+    /**
+     * Properties of the owning component.
+     * @type {ComponentProps}
+     */
+    props?: ComponentProps;
+    [key: string]: any;
+};
+
+export type IconType<ComponentProps, AdditionalProps = NonNullable<unknown>> = React.ReactNode | ((options: IconOptions<ComponentProps, AdditionalProps>) => React.ReactNode);
+
+export type TemplateType<ComponentProps> = React.ReactNode | ((props: ComponentProps) => React.ReactNode);
+
+export type PassThroughType<T, O> =
+    | T
+    | ((options?: O) => T | void)
+    | null
+    | undefined
+    | {
+          [key: string]: any;
+      };
diff --git a/components/lib/virtualscroller/VirtualScroller.js b/components/lib/virtualscroller/VirtualScroller.js
new file mode 100644
index 0000000000..0aba665ea8
--- /dev/null
+++ b/components/lib/virtualscroller/VirtualScroller.js
@@ -0,0 +1,805 @@
+import * as React from 'react';
+import { PrimeReactContext } from '../api/Api';
+import { useEventListener, useMergeProps, usePrevious, useResizeListener, useStyle, useUpdateEffect } from '../hooks/Hooks';
+import { SpinnerIcon } from '../icons/spinner';
+import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
+import { VirtualScrollerBase } from './VirtualScrollerBase';
+
+export const VirtualScroller = React.memo(
+    React.forwardRef((inProps, ref) => {
+        const mergeProps = useMergeProps();
+        const context = React.useContext(PrimeReactContext);
+        const props = VirtualScrollerBase.getProps(inProps, context);
+        const prevProps = usePrevious(inProps) || {};
+
+        const vertical = props.orientation === 'vertical';
+        const horizontal = props.orientation === 'horizontal';
+        const both = props.orientation === 'both';
+
+        const [firstState, setFirstState] = React.useState(both ? { rows: 0, cols: 0 } : 0);
+        const [lastState, setLastState] = React.useState(both ? { rows: 0, cols: 0 } : 0);
+        const [pageState, setPageState] = React.useState(0);
+        const [numItemsInViewportState, setNumItemsInViewportState] = React.useState(both ? { rows: 0, cols: 0 } : 0);
+        const [numToleratedItemsState, setNumToleratedItemsState] = React.useState(props.numToleratedItems);
+        const [loadingState, setLoadingState] = React.useState(props.loading || false);
+        const [loaderArrState, setLoaderArrState] = React.useState([]);
+        const { ptm } = VirtualScrollerBase.setMetaData({
+            props,
+            state: {
+                first: firstState,
+                last: lastState,
+                page: pageState,
+                numItemsInViewport: numItemsInViewportState,
+                numToleratedItems: numToleratedItemsState,
+                loading: loadingState,
+                loaderArr: loaderArrState
+            }
+        });
+
+        useStyle(VirtualScrollerBase.css.styles, { name: 'virtualscroller' });
+        const elementRef = React.useRef(null);
+        const contentRef = React.useRef(null);
+        const spacerRef = React.useRef(null);
+        const stickyRef = React.useRef(null);
+        const lastScrollPos = React.useRef(both ? { top: 0, left: 0 } : 0);
+        const scrollTimeout = React.useRef(null);
+        const resizeTimeout = React.useRef(null);
+        const contentStyle = React.useRef({});
+        const spacerStyle = React.useRef({});
+        const defaultWidth = React.useRef(null);
+        const defaultHeight = React.useRef(null);
+        const defaultContentWidth = React.useRef(null);
+        const defaultContentHeight = React.useRef(null);
+        const isItemRangeChanged = React.useRef(false);
+        const lazyLoadState = React.useRef(null);
+        const viewInitialized = React.useRef(false);
+
+        const [bindWindowResizeListener] = useResizeListener({ listener: (event) => onResize(event), when: !props.disabled });
+        const [bindOrientationChangeListener] = useEventListener({ target: 'window', type: 'orientationchange', listener: (event) => onResize(event), when: !props.disabled });
+
+        const getElementRef = () => {
+            return elementRef;
+        };
+
+        const getPageByFirst = (first) => {
+            return Math.floor((first + numToleratedItemsState * 4) / (props.step || 1));
+        };
+
+        const setContentElement = (element) => {
+            contentRef.current = element || contentRef.current || DomHandler.findSingle(elementRef.current, '.p-virtualscroller-content');
+        };
+
+        const isPageChanged = (first) => {
+            return props.step ? pageState !== getPageByFirst(first) : true;
+        };
+
+        const scrollTo = (options) => {
+            lastScrollPos.current = both ? { top: 0, left: 0 } : 0;
+            elementRef.current && elementRef.current.scrollTo(options);
+        };
+
+        const scrollToIndex = (index, behavior = 'auto') => {
+            const { numToleratedItems } = calculateNumItems();
+            const contentPos = getContentPosition();
+            const calculateFirst = (_index = 0, _numT) => (_index <= _numT ? 0 : _index);
+            const calculateCoord = (_first, _size, _cpos) => _first * _size + _cpos;
+            const scrollToItem = (left = 0, top = 0) => scrollTo({ left, top, behavior });
+            let newFirst = both ? { rows: 0, cols: 0 } : 0;
+            let isRangeChanged = false;
+
+            if (both) {
+                newFirst = { rows: calculateFirst(index[0], numToleratedItems[0]), cols: calculateFirst(index[1], numToleratedItems[1]) };
+                scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1], contentPos.left), calculateCoord(newFirst.rows, props.itemSize[0], contentPos.top));
+                isRangeChanged = firstState.rows !== newFirst.rows || firstState.cols !== newFirst.cols;
+            } else {
+                newFirst = calculateFirst(index, numToleratedItems);
+                horizontal ? scrollToItem(calculateCoord(newFirst, props.itemSize, contentPos.left), 0) : scrollToItem(0, calculateCoord(newFirst, props.itemSize, contentPos.top));
+                isRangeChanged = firstState !== newFirst;
+            }
+
+            isItemRangeChanged.current = isRangeChanged;
+            setFirstState(newFirst);
+        };
+
+        const scrollInView = (index, to, behavior = 'auto') => {
+            if (to) {
+                const { first, viewport } = getRenderedRange();
+                const scrollToItem = (left = 0, top = 0) => scrollTo({ left, top, behavior });
+                const isToStart = to === 'to-start';
+                const isToEnd = to === 'to-end';
+
+                if (isToStart) {
+                    if (both) {
+                        if (viewport.first.rows - first.rows > index[0]) {
+                            scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows - 1) * props.itemSize[0]);
+                        } else if (viewport.first.cols - first.cols > index[1]) {
+                            scrollToItem((viewport.first.cols - 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
+                        }
+                    } else if (viewport.first - first > index) {
+                        const pos = (viewport.first - 1) * props.itemSize;
+
+                        horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
+                    }
+                } else if (isToEnd) {
+                    if (both) {
+                        if (viewport.last.rows - first.rows <= index[0] + 1) {
+                            scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows + 1) * props.itemSize[0]);
+                        } else if (viewport.last.cols - first.cols <= index[1] + 1) {
+                            scrollToItem((viewport.first.cols + 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
+                        }
+                    } else if (viewport.last - first <= index + 1) {
+                        const pos = (viewport.first + 1) * props.itemSize;
+
+                        horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
+                    }
+                }
+            } else {
+                scrollToIndex(index, behavior);
+            }
+        };
+
+        const getRows = () => {
+            return loadingState ? (props.loaderDisabled ? loaderArrState : []) : loadedItems();
+        };
+
+        const getColumns = () => {
+            if ((props.columns && both) || horizontal) {
+                return loadingState && props.loaderDisabled ? (both ? loaderArrState[0] : loaderArrState) : props.columns.slice(both ? firstState.cols : firstState, both ? lastState.cols : lastState);
+            }
+
+            return props.columns;
+        };
+
+        const getRenderedRange = () => {
+            const calculateFirstInViewport = (_pos, _size) => Math.floor(_pos / (_size || _pos));
+
+            let firstInViewport = firstState;
+            let lastInViewport = 0;
+
+            if (elementRef.current) {
+                const { scrollTop, scrollLeft } = elementRef.current;
+
+                if (both) {
+                    firstInViewport = { rows: calculateFirstInViewport(scrollTop, props.itemSize[0]), cols: calculateFirstInViewport(scrollLeft, props.itemSize[1]) };
+                    lastInViewport = { rows: firstInViewport.rows + numItemsInViewportState.rows, cols: firstInViewport.cols + numItemsInViewportState.cols };
+                } else {
+                    const scrollPos = horizontal ? scrollLeft : scrollTop;
+
+                    firstInViewport = calculateFirstInViewport(scrollPos, props.itemSize);
+                    lastInViewport = firstInViewport + numItemsInViewportState;
+                }
+            }
+
+            return {
+                first: firstState,
+                last: lastState,
+                viewport: {
+                    first: firstInViewport,
+                    last: lastInViewport
+                }
+            };
+        };
+
+        const calculateNumItems = () => {
+            const contentPos = getContentPosition();
+            const contentWidth = elementRef.current ? elementRef.current.offsetWidth - contentPos.left : 0;
+            const contentHeight = elementRef.current ? elementRef.current.offsetHeight - contentPos.top : 0;
+            const calculateNumItemsInViewport = (_contentSize, _itemSize) => Math.ceil(_contentSize / (_itemSize || _contentSize));
+            const calculateNumToleratedItems = (_numItems) => Math.ceil(_numItems / 2);
+            const numItemsInViewport = both
+                ? { rows: calculateNumItemsInViewport(contentHeight, props.itemSize[0]), cols: calculateNumItemsInViewport(contentWidth, props.itemSize[1]) }
+                : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, props.itemSize);
+
+            const numToleratedItems = numToleratedItemsState || (both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
+
+            return { numItemsInViewport, numToleratedItems };
+        };
+
+        const calculateOptions = () => {
+            const { numItemsInViewport, numToleratedItems } = calculateNumItems();
+            const calculateLast = (_first, _num, _numT, _isCols = false) => getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
+            const last = both
+                ? { rows: calculateLast(firstState.rows, numItemsInViewport.rows, numToleratedItems[0]), cols: calculateLast(firstState.cols, numItemsInViewport.cols, numToleratedItems[1], true) }
+                : calculateLast(firstState, numItemsInViewport, numToleratedItems);
+
+            setNumItemsInViewportState(numItemsInViewport);
+            setNumToleratedItemsState(numToleratedItems);
+            setLastState(last);
+
+            if (props.showLoader) {
+                setLoaderArrState(both ? Array.from({ length: numItemsInViewport.rows }).map(() => Array.from({ length: numItemsInViewport.cols })) : Array.from({ length: numItemsInViewport }));
+            }
+
+            if (props.lazy) {
+                Promise.resolve().then(() => {
+                    lazyLoadState.current = {
+                        first: props.step ? (both ? { rows: 0, cols: firstState.cols } : 0) : firstState,
+                        last: Math.min(props.step ? props.step : last, (props.items || []).length)
+                    };
+
+                    props.onLazyLoad && props.onLazyLoad(lazyLoadState.current);
+                });
+            }
+        };
+
+        const calculateAutoSize = (loading) => {
+            if (props.autoSize && !loading) {
+                Promise.resolve().then(() => {
+                    if (contentRef.current) {
+                        contentRef.current.style.minHeight = contentRef.current.style.minWidth = 'auto';
+                        contentRef.current.style.position = 'relative';
+                        elementRef.current.style.contain = 'none';
+
+                        /*const [contentWidth, contentHeight] = [DomHandler.getWidth(contentRef.current), DomHandler.getHeight(contentRef.current)];
+
+                        contentWidth !== defaultContentWidth.current && (elementRef.current.style.width = '');
+                        contentHeight !== defaultContentHeight.current && (elementRef.current.style.height = '');*/
+
+                        const [width, height] = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)];
+
+                        (both || horizontal) && (elementRef.current.style.width = (width < defaultWidth.current ? width : props.scrollWidth || defaultWidth.current) + 'px');
+                        (both || vertical) && (elementRef.current.style.height = (height < defaultHeight.current ? height : props.scrollHeight || defaultHeight.current) + 'px');
+
+                        contentRef.current.style.minHeight = contentRef.current.style.minWidth = '';
+                        contentRef.current.style.position = '';
+                        elementRef.current.style.contain = '';
+                    }
+                });
+            }
+        };
+
+        const getLast = (last = 0, isCols) => {
+            return props.items ? Math.min(isCols ? (props.columns || props.items[0])?.length || 0 : (props.items || []).length, last) : 0;
+        };
+
+        const getContentPosition = () => {
+            if (contentRef.current) {
+                const style = getComputedStyle(contentRef.current);
+                const left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);
+                const right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);
+                const top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);
+                const bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);
+
+                return { left, right, top, bottom, x: left + right, y: top + bottom };
+            }
+
+            return { left: 0, right: 0, top: 0, bottom: 0, x: 0, y: 0 };
+        };
+
+        const setSize = () => {
+            if (elementRef.current) {
+                const parentElement = elementRef.current.parentElement;
+                const width = props.scrollWidth || `${elementRef.current.offsetWidth || parentElement.offsetWidth}px`;
+                const height = props.scrollHeight || `${elementRef.current.offsetHeight || parentElement.offsetHeight}px`;
+                const setProp = (_name, _value) => (elementRef.current.style[_name] = _value);
+
+                if (both || horizontal) {
+                    setProp('height', height);
+                    setProp('width', width);
+                } else {
+                    setProp('height', height);
+                }
+            }
+        };
+
+        const setSpacerSize = () => {
+            const items = props.items;
+
+            if (items) {
+                const contentPos = getContentPosition();
+                const setProp = (_name, _value, _size, _cpos = 0) => (spacerStyle.current = { ...spacerStyle.current, ...{ [`${_name}`]: (_value || []).length * _size + _cpos + 'px' } });
+
+                if (both) {
+                    setProp('height', items, props.itemSize[0], contentPos.y);
+                    setProp('width', props.columns || items[1], props.itemSize[1], contentPos.x);
+                } else {
+                    horizontal ? setProp('width', props.columns || items, props.itemSize, contentPos.x) : setProp('height', items, props.itemSize, contentPos.y);
+                }
+            }
+        };
+
+        const setContentPosition = (pos) => {
+            if (contentRef.current && !props.appendOnly) {
+                const first = pos ? pos.first : firstState;
+                const calculateTranslateVal = (_first, _size) => _first * _size;
+
+                const setTransform = (_x = 0, _y = 0) => {
+                    stickyRef.current && (stickyRef.current.style.top = `-${_y}px`);
+                    contentStyle.current = { ...contentStyle.current, ...{ transform: `translate3d(${_x}px, ${_y}px, 0)` } };
+                };
+
+                if (both) {
+                    setTransform(calculateTranslateVal(first.cols, props.itemSize[1]), calculateTranslateVal(first.rows, props.itemSize[0]));
+                } else {
+                    const translateVal = calculateTranslateVal(first, props.itemSize);
+
+                    horizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);
+                }
+            }
+        };
+
+        const onScrollPositionChange = (event) => {
+            const target = event.target;
+            const contentPos = getContentPosition();
+            const calculateScrollPos = (_pos, _cpos) => (_pos ? (_pos > _cpos ? _pos - _cpos : _pos) : 0);
+            const calculateCurrentIndex = (_pos, _size) => Math.floor(_pos / (_size || _pos));
+
+            const calculateTriggerIndex = (_currentIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {
+                return _currentIndex <= _numT ? _numT : _isScrollDownOrRight ? _last - _num - _numT : _first + _numT - 1;
+            };
+
+            const calculateFirst = (_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight) => {
+                if (_currentIndex <= _numT) {
+                    return 0;
+                }
+
+                return Math.max(0, _isScrollDownOrRight ? (_currentIndex < _triggerIndex ? _first : _currentIndex - _numT) : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT);
+            };
+
+            const calculateLast = (_currentIndex, _first, _last, _num, _numT, _isCols) => {
+                let lastValue = _first + _num + 2 * _numT;
+
+                if (_currentIndex >= _numT) {
+                    lastValue = lastValue + (_numT + 1);
+                }
+
+                return getLast(lastValue, _isCols);
+            };
+
+            const scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);
+            const scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);
+
+            let newFirst = both ? { rows: 0, cols: 0 } : 0;
+            let newLast = lastState;
+            let isRangeChanged = false;
+            let newScrollPos = lastScrollPos.current;
+
+            if (both) {
+                const isScrollDown = lastScrollPos.current.top <= scrollTop;
+                const isScrollRight = lastScrollPos.current.left <= scrollLeft;
+
+                if (!props.appendOnly || (props.appendOnly && (isScrollDown || isScrollRight))) {
+                    const currentIndex = { rows: calculateCurrentIndex(scrollTop, props.itemSize[0]), cols: calculateCurrentIndex(scrollLeft, props.itemSize[1]) };
+                    const triggerIndex = {
+                        rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
+                        cols: calculateTriggerIndex(currentIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
+                    };
+
+                    newFirst = {
+                        rows: calculateFirst(currentIndex.rows, triggerIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
+                        cols: calculateFirst(currentIndex.cols, triggerIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
+                    };
+                    newLast = {
+                        rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
+                        cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
+                    };
+
+                    isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols || isItemRangeChanged.current;
+                    newScrollPos = { top: scrollTop, left: scrollLeft };
+                }
+            } else {
+                const scrollPos = horizontal ? scrollLeft : scrollTop;
+                const isScrollDownOrRight = lastScrollPos.current <= scrollPos;
+
+                if (!props.appendOnly || (props.appendOnly && isScrollDownOrRight)) {
+                    const currentIndex = calculateCurrentIndex(scrollPos, props.itemSize);
+                    const triggerIndex = calculateTriggerIndex(currentIndex, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
+
+                    newFirst = calculateFirst(currentIndex, triggerIndex, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
+                    newLast = calculateLast(currentIndex, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
+                    isRangeChanged = newFirst !== firstState || newLast !== lastState || isItemRangeChanged.current;
+                    newScrollPos = scrollPos;
+                }
+            }
+
+            return {
+                first: newFirst,
+                last: newLast,
+                isRangeChanged,
+                scrollPos: newScrollPos
+            };
+        };
+
+        const onScrollChange = (event) => {
+            const { first, last, isRangeChanged, scrollPos } = onScrollPositionChange(event);
+
+            if (isRangeChanged) {
+                const newState = { first, last };
+
+                setContentPosition(newState);
+
+                setFirstState(first);
+                setLastState(last);
+                lastScrollPos.current = scrollPos;
+
+                props.onScrollIndexChange && props.onScrollIndexChange(newState);
+
+                if (props.lazy && isPageChanged(first)) {
+                    const newLazyLoadState = {
+                        first: props.step ? Math.min(getPageByFirst(first) * props.step, (props.items || []).length - props.step) : first,
+                        last: Math.min(props.step ? (getPageByFirst(first) + 1) * props.step : last, (props.items || []).length)
+                    };
+
+                    const isLazyStateChanged = !lazyLoadState.current || lazyLoadState.current.first !== newLazyLoadState.first || lazyLoadState.current.last !== newLazyLoadState.last;
+
+                    isLazyStateChanged && props.onLazyLoad && props.onLazyLoad(newLazyLoadState);
+                    lazyLoadState.current = newLazyLoadState;
+                }
+            }
+        };
+
+        const onScroll = (event) => {
+            props.onScroll && props.onScroll(event);
+
+            if (props.delay) {
+                if (scrollTimeout.current) {
+                    clearTimeout(scrollTimeout.current);
+                }
+
+                if (isPageChanged(firstState)) {
+                    if (!loadingState && props.showLoader) {
+                        const { isRangeChanged } = onScrollPositionChange(event);
+                        const changed = isRangeChanged || (props.step ? isPageChanged(firstState) : false);
+
+                        changed && setLoadingState(true);
+                    }
+
+                    scrollTimeout.current = setTimeout(() => {
+                        onScrollChange(event);
+
+                        if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
+                            setLoadingState(false);
+                            setPageState(getPageByFirst(firstState));
+                        }
+                    }, props.delay);
+                }
+            } else {
+                onScrollChange(event);
+            }
+        };
+
+        const onResize = () => {
+            if (resizeTimeout.current) {
+                clearTimeout(resizeTimeout.current);
+            }
+
+            resizeTimeout.current = setTimeout(() => {
+                if (elementRef.current) {
+                    const [width, height] = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)];
+                    const [isDiffWidth, isDiffHeight] = [width !== defaultWidth.current, height !== defaultHeight.current];
+                    const reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;
+
+                    if (reinit) {
+                        setNumToleratedItemsState(props.numToleratedItems);
+                        defaultWidth.current = width;
+                        defaultHeight.current = height;
+                        defaultContentWidth.current = DomHandler.getWidth(contentRef.current);
+                        defaultContentHeight.current = DomHandler.getHeight(contentRef.current);
+                    }
+                }
+            }, props.resizeDelay);
+        };
+
+        const getOptions = (renderedIndex) => {
+            const count = (props.items || []).length;
+            const index = both ? firstState.rows + renderedIndex : firstState + renderedIndex;
+
+            return {
+                index,
+                count,
+                first: index === 0,
+                last: index === count - 1,
+                even: index % 2 === 0,
+                odd: index % 2 !== 0,
+                props
+            };
+        };
+
+        const loaderOptions = (index, extOptions) => {
+            const count = loaderArrState.length || 0;
+
+            return {
+                index,
+                count,
+                first: index === 0,
+                last: index === count - 1,
+                even: index % 2 === 0,
+                odd: index % 2 !== 0,
+                props,
+                ...extOptions
+            };
+        };
+
+        const loadedItems = () => {
+            const items = props.items;
+
+            if (items && !loadingState) {
+                if (both) {
+                    return items.slice(props.appendOnly ? 0 : firstState.rows, lastState.rows).map((item) => (props.columns ? item : item.slice(props.appendOnly ? 0 : firstState.cols, lastState.cols)));
+                } else if (horizontal && props.columns) {
+                    return items;
+                }
+
+                return items.slice(props.appendOnly ? 0 : firstState, lastState);
+            }
+
+            return [];
+        };
+
+        const viewInit = () => {
+            if (elementRef.current && isVisible()) {
+                setContentElement(contentRef.current);
+                init();
+                bindWindowResizeListener();
+                bindOrientationChangeListener();
+
+                defaultWidth.current = DomHandler.getWidth(elementRef.current);
+                defaultHeight.current = DomHandler.getHeight(elementRef.current);
+                defaultContentWidth.current = DomHandler.getWidth(contentRef.current);
+                defaultContentHeight.current = DomHandler.getHeight(contentRef.current);
+            }
+        };
+
+        const init = () => {
+            if (!props.disabled && isVisible()) {
+                setSize();
+                calculateOptions();
+                setSpacerSize();
+            }
+        };
+
+        const isVisible = () => {
+            if (DomHandler.isVisible(elementRef.current)) {
+                const rect = elementRef.current.getBoundingClientRect();
+
+                return rect.width > 0 && rect.height > 0;
+            }
+
+            return false;
+        };
+
+        React.useEffect(() => {
+            if (!viewInitialized.current && isVisible()) {
+                viewInit();
+                viewInitialized.current = true;
+            }
+        });
+
+        useUpdateEffect(() => {
+            init();
+        }, [props.itemSize, props.scrollHeight, props.scrollWidth]);
+
+        useUpdateEffect(() => {
+            if (props.numToleratedItems !== numToleratedItemsState) {
+                setNumToleratedItemsState(props.numToleratedItems);
+            }
+        }, [props.numToleratedItems]);
+
+        useUpdateEffect(() => {
+            if (props.numToleratedItems === numToleratedItemsState) {
+                init(); // reinit after resizing
+            }
+        }, [numToleratedItemsState]);
+
+        useUpdateEffect(() => {
+            // Check if the previous/current rows array exists
+            const prevRowsExist = prevProps.items !== undefined && prevProps.items !== null;
+            const currentRowsExist = props.items !== undefined && props.items !== null;
+
+            // Get the length of the previous/current rows array, or 0 if it doesn't exist
+            const prevRowsLength = prevRowsExist ? prevProps.items.length : 0;
+            const currentRowsLength = currentRowsExist ? props.items.length : 0;
+
+            // Check if the length of the rows arrays has changed
+            let valuesChanged = prevRowsLength !== currentRowsLength;
+
+            // If both is true, we also need to check the lengths of the first element (assuming it's a matrix)
+            if (both && !valuesChanged) {
+                // Get the length of the columns or 0
+                const prevColumnsLength = prevRowsExist && prevProps.items.length > 0 ? prevProps.items[0].length : 0;
+                const currentColumnsLength = currentRowsExist && props.items.length > 0 ? props.items[0].length : 0;
+
+                // Check if the length of the columns has changed
+                valuesChanged = prevColumnsLength !== currentColumnsLength;
+            }
+
+            // If the previous items array doesn't exist or if any values have changed, call the init function
+            if (!prevRowsExist || valuesChanged) {
+                init();
+            }
+
+            let loading = loadingState;
+
+            if (props.lazy && prevProps.loading !== props.loading && props.loading !== loadingState) {
+                setLoadingState(props.loading);
+                loading = props.loading;
+            }
+
+            calculateAutoSize(loading);
+        });
+
+        useUpdateEffect(() => {
+            lastScrollPos.current = both ? { top: 0, left: 0 } : 0;
+        }, [props.orientation]);
+
+        React.useImperativeHandle(ref, () => ({
+            props,
+            getElementRef,
+            scrollTo,
+            scrollToIndex,
+            scrollInView,
+            getRenderedRange
+        }));
+
+        const createLoaderItem = (index, extOptions = {}) => {
+            const options = loaderOptions(index, extOptions);
+            const content = ObjectUtils.getJSXElement(props.loadingTemplate, options);
+
+            return <React.Fragment key={index}>{content}</React.Fragment>;
+        };
+
+        const createLoader = () => {
+            const iconClassName = 'p-virtualscroller-loading-icon';
+            const loadingIconProps = mergeProps(
+                {
+                    className: iconClassName
+                },
+                ptm('loadingIcon')
+            );
+            const icon = props.loadingIcon || <SpinnerIcon {...loadingIconProps} spin />;
+            const loadingIcon = IconUtils.getJSXIcon(icon, { ...loadingIconProps }, { props });
+
+            if (!props.loaderDisabled && props.showLoader && loadingState) {
+                const className = classNames('p-virtualscroller-loader', {
+                    'p-component-overlay': !props.loadingTemplate
+                });
+
+                let content = loadingIcon;
+
+                if (props.loadingTemplate) {
+                    content = loaderArrState.map((_, index) => {
+                        return createLoaderItem(index, both && { numCols: numItemsInViewportState.cols });
+                    });
+                } else if (props.loaderIconTemplate) {
+                    const defaultContentOptions = {
+                        iconClassName,
+                        element: content,
+                        props
+                    };
+
+                    content = ObjectUtils.getJSXElement(props.loaderIconTemplate, defaultContentOptions);
+                }
+
+                const loaderProps = mergeProps(
+                    {
+                        className
+                    },
+                    ptm('loader')
+                );
+
+                return <div {...loaderProps}>{content}</div>;
+            }
+
+            return null;
+        };
+
+        const createSpacer = () => {
+            if (props.showSpacer) {
+                const spacerProps = mergeProps(
+                    {
+                        ref: spacerRef,
+                        style: spacerStyle.current,
+                        className: 'p-virtualscroller-spacer'
+                    },
+                    ptm('spacer')
+                );
+
+                return <div {...spacerProps} />;
+            }
+
+            return null;
+        };
+
+        const createItem = (item, index) => {
+            const options = getOptions(index);
+            const content = ObjectUtils.getJSXElement(props.itemTemplate, item, options);
+
+            return <React.Fragment key={options.index}>{content}</React.Fragment>;
+        };
+
+        const createItems = () => {
+            const items = loadedItems();
+
+            return items.map(createItem);
+        };
+
+        const createContent = () => {
+            const items = createItems();
+            const className = classNames('p-virtualscroller-content', { 'p-virtualscroller-loading': loadingState });
+            const contentProps = mergeProps(
+                {
+                    ref: contentRef,
+                    style: contentStyle.current,
+                    className
+                },
+                ptm('content')
+            );
+            const content = <div {...contentProps}>{items}</div>;
+
+            if (props.contentTemplate) {
+                const defaultOptions = {
+                    style: contentStyle.current,
+                    className,
+                    spacerStyle: spacerStyle.current,
+                    contentRef: (el) => (contentRef.current = ObjectUtils.getRefElement(el)),
+                    spacerRef: (el) => (spacerRef.current = ObjectUtils.getRefElement(el)),
+                    stickyRef: (el) => (stickyRef.current = ObjectUtils.getRefElement(el)),
+                    items: loadedItems(),
+                    getItemOptions: (index) => getOptions(index),
+                    children: items,
+                    element: content,
+                    props,
+                    loading: loadingState,
+                    getLoaderOptions: (index, ext) => loaderOptions(index, ext),
+                    loadingTemplate: props.loadingTemplate,
+                    itemSize: props.itemSize,
+                    rows: getRows(),
+                    columns: getColumns(),
+                    vertical,
+                    horizontal,
+                    both
+                };
+
+                return ObjectUtils.getJSXElement(props.contentTemplate, defaultOptions);
+            }
+
+            return content;
+        };
+
+        if (props.disabled) {
+            const content = ObjectUtils.getJSXElement(props.contentTemplate, { items: props.items, rows: props.items, columns: props.columns });
+
+            return (
+                <React.Fragment>
+                    {props.children}
+                    {content}
+                </React.Fragment>
+            );
+        }
+
+        const className = classNames(
+            'p-virtualscroller',
+            {
+                'p-virtualscroller-inline': props.inline,
+                'p-virtualscroller-both p-both-scroll': both,
+                'p-virtualscroller-horizontal p-horizontal-scroll': horizontal
+            },
+            props.className
+        );
+
+        const loader = createLoader();
+        const content = createContent();
+        const spacer = createSpacer();
+        const rootProps = mergeProps(
+            {
+                ref: elementRef,
+                className,
+                tabIndex: props.tabIndex,
+                style: props.style,
+                onScroll: (e) => onScroll(e)
+            },
+            VirtualScrollerBase.getOtherProps(props),
+            ptm('root')
+        );
+
+        return (
+            <div {...rootProps}>
+                {content}
+                {spacer}
+                {loader}
+            </div>
+        );
+    })
+);
+
+VirtualScroller.displayName = 'VirtualScroller';
diff --git a/components/lib/virtualscroller/VirtualScrollerBase.js b/components/lib/virtualscroller/VirtualScrollerBase.js
new file mode 100644
index 0000000000..98218124d0
--- /dev/null
+++ b/components/lib/virtualscroller/VirtualScrollerBase.js
@@ -0,0 +1,101 @@
+import { ComponentBase } from '../componentbase/ComponentBase';
+
+const styles = `
+.p-virtualscroller {
+    position: relative;
+    overflow: auto;
+    contain: strict;
+    transform: translateZ(0);
+    will-change: scroll-position;
+    outline: 0 none;
+}
+
+.p-virtualscroller-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    /*contain: content;*/
+    min-height: 100%;
+    min-width: 100%;
+    will-change: transform;
+}
+
+.p-virtualscroller-spacer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1px;
+    width: 1px;
+    transform-origin: 0 0;
+    pointer-events: none;
+}
+
+.p-virtualscroller-loader {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.p-virtualscroller-loader.p-component-overlay {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-virtualscroller-loading-icon {
+    font-size: 2rem;
+}
+
+.p-virtualscroller-horizontal > .p-virtualscroller-content {
+    display: flex;
+}
+
+/* Inline */
+.p-virtualscroller-inline .p-virtualscroller-content {
+    position: static;
+}
+`;
+
+export const VirtualScrollerBase = ComponentBase.extend({
+    defaultProps: {
+        __TYPE: 'VirtualScroller',
+        __parentMetadata: null,
+        id: null,
+        style: null,
+        className: null,
+        tabIndex: 0,
+        items: null,
+        itemSize: 0,
+        scrollHeight: null,
+        scrollWidth: null,
+        orientation: 'vertical',
+        step: 0,
+        numToleratedItems: null,
+        delay: 0,
+        resizeDelay: 10,
+        appendOnly: false,
+        inline: false,
+        lazy: false,
+        disabled: false,
+        loaderDisabled: false,
+        loadingIcon: null,
+        columns: null,
+        loading: undefined,
+        autoSize: false,
+        showSpacer: true,
+        showLoader: false,
+        loadingTemplate: null,
+        loaderIconTemplate: null,
+        itemTemplate: null,
+        contentTemplate: null,
+        onScroll: null,
+        onScrollIndexChange: null,
+        onLazyLoad: null,
+        children: undefined
+    },
+    css: {
+        styles
+    }
+});
diff --git a/components/lib/virtualscroller/package.json b/components/lib/virtualscroller/package.json
new file mode 100644
index 0000000000..a665401e87
--- /dev/null
+++ b/components/lib/virtualscroller/package.json
@@ -0,0 +1,7 @@
+{
+    "main": "./virtualscroller.cjs.js",
+    "module": "./virtualscroller.esm.js",
+    "unpkg": "./virtualscroller.min.js",
+    "types": "./virtualscroller.d.ts",
+    "sideEffects": false
+}
diff --git a/components/lib/virtualscroller/virtualscroller.d.ts b/components/lib/virtualscroller/virtualscroller.d.ts
new file mode 100644
index 0000000000..7e73f0cea0
--- /dev/null
+++ b/components/lib/virtualscroller/virtualscroller.d.ts
@@ -0,0 +1,532 @@
+/**
+ *
+ * VirtualScroller is a performant approach to handle huge data efficiently.
+ *
+ * [Live Demo](https://www.primereact.org/virtualscroller/)
+ *
+ * @module virtualscroller
+ *
+ */
+
+import * as React from 'react';
+import { ComponentHooks } from '../componentbase/componentbase';
+import { PassThroughOptions } from '../passthrough';
+import { IconType, PassThroughType } from '../utils/utils';
+
+export declare type VirtualScrollerPassThroughType<T> = PassThroughType<T, VirtualScrollerPassThroughMethodOptions>;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface VirtualScrollerPassThroughMethodOptions {
+    props: VirtualScrollerProps;
+    state: VirtualScrollerState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link VirtualScrollerProps.pt}
+ */
+export interface VirtualScrollerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: VirtualScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: VirtualScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loader's DOM element.
+     */
+    loader?: VirtualScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: VirtualScrollerPassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
+    /**
+     * Uses to pass attributes to the spacer's DOM element.
+     */
+    spacer?: VirtualScrollerPassThroughType<React.HTMLAttributes<HTMLDivElement>>;
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Defines current inline state in VirtualScroller component.
+ */
+export interface VirtualScrollerState {
+    /**
+     * First index of the new data range to be loaded as a number.
+     */
+    first: number;
+    /**
+     * Last index of the new data range to be loaded as a number.
+     */
+    last: number;
+    /**
+     * Index of the first item as a number.
+     */
+    page: number;
+    /**
+     * Visible item count in the viewport as a number.
+     */
+    numItemsInViewport: number;
+    /**
+     * Additional elements to add to the DOM outside of the view as a number.
+     */
+    numToleratedItems: number;
+    /**
+     * Current loading state as a boolean.
+     * @defaultValue false
+     */
+    loading: number;
+    /**
+     * Loadable items array.
+     */
+    loaderArr: any[];
+}
+
+/**
+ * Custom virtual scroller options type.
+ */
+interface VirtualScrollerOptionsType {
+    /**
+     * Left position of scroll.
+     */
+    left: number;
+    /**
+     * Top position of scroll
+     */
+    top: number;
+    /**
+     * Behavior of scroll, valid values are 'auto' and 'smooth'
+     */
+    behavior: 'auto' | 'smooth';
+}
+
+/**
+ * Viewport rendered range.
+ */
+interface VirtualScrollerViewportRenderedRange {
+    /**
+     * The first number of the current viewport.
+     */
+    first: number;
+    /**
+     * The last number of the current viewport.
+     */
+    last: number;
+}
+
+/**
+ * Virtual scroller rendered range.
+ */
+interface VirtualScrollerRenderedRange {
+    /**
+     * First index of the new data range to be rendered.
+     */
+    first: number;
+    /**
+     * Last index of the new data range to be rendered.
+     */
+    last: number;
+    /**
+     * Viewport of the rendered range.
+     */
+    viewport: VirtualScrollerViewportRenderedRange;
+}
+
+/**
+ * Custom virtual scroller state.
+ */
+interface VirtualScrollerState {
+    /**
+     * Number of rows to be rendered.
+     */
+    rows: number;
+    /**
+     * Number of columns to be rendered.
+     */
+    cols: number;
+}
+
+/**
+ * Custom template options.
+ */
+interface VirtualScrollerTemplateOptions {
+    /**
+     * Index of the item.
+     */
+    index: number;
+    /**
+     * Total numbers of items.
+     */
+    count: number;
+    /**
+     * Whether this is the first item.
+     */
+    first: boolean;
+    /**
+     * Whether this is the last item.
+     */
+    last: boolean;
+    /**
+     * Whether the index is even.
+     */
+    even: boolean;
+    /**
+     * Whether the index is odd.
+     */
+    odd: boolean;
+    /**
+     * The props of the virtual scroller.
+     */
+    props: VirtualScrollerProps;
+}
+
+/**
+ * Custom template options.
+ * @extends VirtualScrollerTemplateOptions
+ */
+interface VirtualScrollerLoadingTemplateOptions extends VirtualScrollerTemplateOptions {
+    /**
+     * Total number of columns in a row in 'both' orientation mode in view.
+     */
+    numCols: number;
+    /**
+     * Extra options.
+     */
+    [key: string]: any;
+}
+
+/**
+ * Custom loader icon template props.
+ */
+interface VirtualScrollerLoaderIconTemplateOptions {
+    /**
+     * Style class of the loader icon.
+     */
+    className: string;
+    /**
+     * The JSX element that represents the loader icon.
+     */
+    element: JSX.Element;
+    /**
+     * The props of the VirtualScroller component.
+     */
+    props: VirtualScrollerProps;
+}
+
+/**
+ * Custom content template options.
+ */
+interface VirtualScrollerContentTemplateOptions {
+    /**
+     * Style class of the wrapper element.
+     */
+    className: string;
+    /**
+     * Ref of wrapper element.
+     */
+    contentRef: any;
+    /**
+     * Ref of spacer element.
+     */
+    spacerRef: any;
+    /**
+     * Ref of sticky element in content.
+     */
+    stickyRef: any;
+    /**
+     * Loaded data.
+     */
+    items: any[] | any[][] | undefined | null;
+    /**
+     * Information of any item.
+     * @param {number} index - Index of the template item.
+     */
+    getItemOptions(index: number): VirtualScrollerTemplateOptions;
+    /**
+     * Items of wrapper element.
+     */
+    children: any;
+    /**
+     * Default wrapper element.
+     */
+    element: JSX.Element;
+    /**
+     * Props of VirtualScroller component.
+     */
+    props: VirtualScrollerProps;
+    /**
+     * Whether the data is loaded.
+     */
+    loading: boolean;
+    /**
+     * Information of any item during the loading.
+     * @param {number} index - Index of the item.
+     * @param {object} ext - The extra options to pass to the content.
+     */
+    getLoaderOptions(index: number, ext?: object): VirtualScrollerLoadingTemplateOptions;
+    /**
+     * Template of loading item.
+     */
+    loadingTemplate: React.ReactNode | ((options: VirtualScrollerLoadingTemplateOptions) => React.ReactNode);
+    /**
+     * The height/width of item according to orientation.
+     */
+    itemSize: number | number[];
+    /**
+     * Rows of the virtual scroller.
+     */
+    rows: any[];
+    /**
+     * Columns of the virtual scroller.
+     */
+    columns: any[];
+    /**
+     * Whether the orientation is vertical.
+     */
+    vertical: boolean;
+    /**
+     * Whether the orientation is horizontal.
+     */
+    horizontal: boolean;
+    /**
+     * Whether the orientation is both.
+     */
+    both: boolean;
+}
+
+/**
+ * Custom change event.
+ * @see {@link VirtualScrollerProps.onScrollIndexChange}
+ * @event
+ */
+interface VirtualScrollerChangeEvent {
+    /**
+     * First index of the new data range to be loaded.
+     */
+    first: number | VirtualScrollerState;
+    /**
+     * Last index of the new data range to be loaded.
+     */
+    last: number | VirtualScrollerState;
+}
+
+/**
+ * Custom lazy load event.
+ * @see {@link VirtualScrollerProps.onLazyLoad}
+ * @extends {VirtualScrollerChangeEvent}
+ * @event
+ */
+interface VirtualScrollerLazyEvent extends VirtualScrollerChangeEvent {}
+
+/**
+ * Defines valid properties in VirtualScroller component.
+ * @group Properties
+ */
+export interface VirtualScrollerProps {
+    /**
+     * Unique identifier of the element.
+     */
+    id?: string | undefined;
+    /**
+     * Inline style of the component.
+     */
+    style?: React.CSSProperties | undefined;
+    /**
+     * Style class of the component.
+     */
+    className?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     * @defaultValue 0
+     */
+    tabIndex?: number | undefined;
+    /**
+     * An array of objects to display.
+     */
+    items?: any[] | any[][] | undefined | null;
+    /**
+     * The height/width of item according to orientation.
+     */
+    itemSize?: number | number[] | undefined;
+    /**
+     * Height of the scroll viewport.
+     */
+    scrollHeight?: string | undefined;
+    /**
+     * Width of the scroll viewport.
+     */
+    scrollWidth?: string | undefined;
+    /**
+     * The orientation of scrollbar, valid values are 'vertical', 'horizontal' and 'both'.
+     * @defaultValue 'vertical'
+     */
+    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
+    /**
+     * Used to specify how many items to load in each load method in lazy mode.
+     * @defaultValue 0
+     */
+    step?: number | undefined;
+    /**
+     * Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. Default value is half the number of items shown in the view.
+     */
+    numToleratedItems?: number | undefined;
+    /**
+     * Delay in scroll before new data is loaded.
+     * @defaultValue 0
+     */
+    delay?: number | undefined;
+    /**
+     * Delay after window's resize finishes.
+     * @defaultValue 10
+     */
+    resizeDelay?: number | undefined;
+    /**
+     * Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash.
+     * @defaultValue false
+     */
+    appendOnly?: boolean | undefined;
+    /**
+     * When enabled, positions the content as inline.
+     * @defaultValue false
+     */
+    inline?: boolean | undefined;
+    /**
+     * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
+     */
+    lazy?: boolean | undefined;
+    /**
+     * If disabled, the VirtualScroller feature is eliminated and the content is displayed directly.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Used to implement a custom loader instead of using the loader feature in the VirtualScroller.
+     * @defaultValue false
+     */
+    loaderDisabled?: boolean | undefined;
+    /**
+     * Columns of the virtual scroller for vertical option.
+     */
+    columns?: any | undefined;
+    /**
+     * Whether the data is loaded.
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
+    /**
+     * Whether to dynamically change the height or width of scrollable container.
+     * @defaultValue false
+     */
+    autoSize?: boolean | undefined;
+    /**
+     * Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller.
+     * @defaultValue true
+     */
+    showSpacer?: boolean | undefined;
+    /**
+     * Whether to show loader.
+     * @defaultValue false
+     */
+    showLoader?: boolean | undefined;
+    /**
+     * The icon to show while indicating data load is in progress.
+     */
+    loadingIcon?: IconType<VirtualScrollerProps> | undefined;
+    /**
+     * The template of loader.
+     */
+    loadingTemplate?: React.ReactNode | ((options: VirtualScrollerLoadingTemplateOptions) => React.ReactNode);
+    /**
+     * The template of loader's icon.
+     * @deprecated Since v9.2.3, use `loadingIcon` instead.
+     */
+    loaderIconTemplate?: React.ReactNode | ((options: VirtualScrollerLoaderIconTemplateOptions) => React.ReactNode);
+    /**
+     * The template of item.
+     */
+    itemTemplate?: React.ReactNode | ((item: any, options: VirtualScrollerTemplateOptions) => React.ReactNode);
+    /**
+     * The template of item's wrapper element.
+     */
+    contentTemplate?: React.ReactNode | ((options: VirtualScrollerContentTemplateOptions) => React.ReactNode);
+    /**
+     * Callback to invoke when scroll position changes.
+     * @param {React.UIEvent<HTMLElement>} event - Browser event
+     */
+    onScroll?(event: React.UIEvent<HTMLElement>): void;
+    /**
+     * Callback to invoke when scroll position and item's range in view changes.
+     * @param {VirtualScrollerChangeEvent} event - Custom change event
+     */
+    onScrollIndexChange?(event: VirtualScrollerChangeEvent): void;
+    /**
+     * Callback to invoke in lazy mode to load new data.
+     * @param {VirtualScrollerLazyEvent} event - Custom lazy load event.
+     */
+    onLazyLoad?(event: VirtualScrollerLazyEvent): void;
+    /**
+     * Used to get the child elements of the component.
+     * @readonly
+     */
+    children?: React.ReactNode | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {VirtualScrollerPassThroughOptions}
+     */
+    pt?: VirtualScrollerPassThroughOptions;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * **PrimeReact - VirtualScroller**
+ *
+ * _VirtualScroller is a performant approach to handle huge data efficiently._
+ *
+ * [Live Demo](https://www.primereact.org/virtualscroller/)
+ * --- ---
+ * ![PrimeReact](https://primefaces.org/cdn/primereact/images/logo-100.png)
+ *
+ * @group Component
+ */
+export declare class VirtualScroller extends React.Component<VirtualScrollerProps, any> {
+    /**
+     * Returns the reference of virtualScroller's container.
+     * @return {React.Ref<HTMLDivElement>} Ref Div element
+     */
+    public getElementRef(): React.Ref<HTMLDivElement>;
+    /**
+     * Scroll to move to a specific position.
+     * @param {VirtualScrollerOptionsType} options - Custom virtual scroller options.
+     */
+    public scrollTo(options: VirtualScrollerOptionsType): void;
+    /**
+     * Scroll to move to a specific item.
+     * @param {number | number[]} index - Index of item according to orientation mode.
+     * @param {'auto' | 'smooth'} behavior - Behavior of scroll, valid values are 'auto' and 'smooth'
+     */
+    public scrollToIndex(index: number | number[], behavior?: 'auto' | 'smooth'): void;
+    /**
+     * It is used to move the specified index into the view. It is a method that will usually be needed when keyboard support is added to the virtualScroller component.
+     * @param {number | number[]} index - Index of item according to orientation mode.
+     * @param {'to-start' | 'to-end'} to - Defines the location of the item in view, valid values are 'to-start' and 'to-end'.
+     * @param {'auto' | 'smooth'} behavior - Behavior of scroll, valid values are 'auto' and 'smooth'
+     */
+    public scrollInView(index: number | number[], to?: 'to-start' | 'to-end', behavior?: 'auto' | 'smooth'): void;
+    /**
+     * Returns the range of items added to the DOM.
+     */
+    public getRenderedRange(): VirtualScrollerRenderedRange;
+}
diff --git a/components/news/newssection.js b/components/news/newssection.js
new file mode 100644
index 0000000000..b048fc29a3
--- /dev/null
+++ b/components/news/newssection.js
@@ -0,0 +1,55 @@
+import AppContentContext from '@/components/layout/appcontentcontext';
+import { useMountEffect } from '@/components/lib/hooks/Hooks';
+import News from '@/data/news.json';
+import { useContext } from 'react';
+
+export default function NewsSection() {
+    const { newsActive, announcement, showNews, hideNews } = useContext(AppContentContext);
+    const storageKey = 'primereact-news';
+
+    useMountEffect(() => {
+        const itemString = localStorage.getItem(storageKey);
+
+        if (itemString) {
+            const item = JSON.parse(itemString);
+
+            if (!item.hiddenNews || item.hiddenNews !== News.id) {
+                showNews(News);
+            } else {
+                hideNews();
+            }
+        } else {
+            showNews(News);
+        }
+    });
+
+    const close = () => {
+        hideNews();
+        const item = {
+            hiddenNews: announcement.id
+        };
+
+        localStorage.setItem(storageKey, JSON.stringify(item));
+    };
+
+    if (!newsActive) {
+        return null;
+    }
+
+    return (
+        <div className="layout-news">
+            <div className="layout-news-container">
+                <i />
+                <div className="layout-news-content">
+                    <span className="layout-news-text">{announcement.content}</span>
+                    <a className="layout-news-link" href={announcement.linkHref} target={announcement.target} rel="noopener noreferrer">
+                        {announcement.linkText}
+                    </a>
+                </div>
+                <a className="layout-news-close" onClick={close}>
+                    <span className="pi pi-times" />
+                </a>
+            </div>
+        </div>
+    );
+}
diff --git a/components/templates/TemplateConfiguration.js b/components/templates/TemplateConfiguration.js
new file mode 100644
index 0000000000..3236e3b836
--- /dev/null
+++ b/components/templates/TemplateConfiguration.js
@@ -0,0 +1,30 @@
+const TemplateConfiguration = ({ title = '', description = '' }) => {
+    return (
+        <div className="template-configuration-wrapper">
+            <div className="template-configuration">
+                <div className="template-configuration-screen">
+                    <div className="template-configuration-screen-top">
+                        <div className="template-configuration-screen-top-close template-configuration-screen-top-circle" />
+                        <div className="template-configuration-screen-top-minimize template-configuration-screen-top-circle" />
+                        <div className="template-configuration-screen-top-zoom template-configuration-screen-top-circle" />
+                    </div>
+                    <div className="template-configuration-screen-bottom">
+                        <p>
+                            &gt;npm install <span className="text-gray-500">or yarn</span>
+                        </p>
+                        <p>
+                            &gt;npm run dev <span className="text-gray-500">or yarn dev</span>
+                        </p>
+                        <br />
+                        <br />
+                        <img className="template-configuration-screen-bottom-logo" src={'https://primefaces.org/cdn/primereact/images/templates/react-3d-logo.png'} alt="Angular 3D Logo" />
+                    </div>
+                </div>
+                <h3 className="template-configuration-title">{title}</h3>
+                <p className="template-configuration-description">{description}</p>
+            </div>
+        </div>
+    );
+};
+
+export default TemplateConfiguration;
diff --git a/components/templates/TemplateFeatures.js b/components/templates/TemplateFeatures.js
new file mode 100644
index 0000000000..10f41f519c
--- /dev/null
+++ b/components/templates/TemplateFeatures.js
@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import AppContentContext from '../layout/appcontentcontext';
+
+const TemplateFeatures = ({ featuresData, displayType }) => {
+    const { darkMode } = useContext(AppContentContext);
+
+    const renderHorizontalFeatures = () => {
+        return (
+            <div className="template-features-horizontal-wrapper">
+                <div className="template-features-horizontal">
+                    {featuresData.map((data, i) => (
+                        <div key={i} className="template-features-horizontal-card">
+                            <div className="template-features-horizontal-card-top">
+                                <img src={darkMode ? data.darkSrc || data.src : data.src} alt={data.title} />
+                            </div>
+                            <div className="template-features-horizontal-card-bottom">
+                                <h5 className="template-features-horizontal-card-bottom-title">{data.title}</h5>
+                                <p className="template-features-horizontal-card-bottom-description">{data.description}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        );
+    };
+
+    const renderVerticalFeatures = () => {
+        const firstColumnData = featuresData.slice(0, Math.ceil(featuresData.length / 2));
+        const secondColumnData = featuresData.slice(Math.ceil(featuresData.length / 2));
+
+        return (
+            <div className="template-features-vertical-wrapper">
+                <div className="template-features-vertical">
+                    {Array(2)
+                        .fill(null)
+                        .map((_, i) => (
+                            <div key={i} className="template-features-vertical-col">
+                                {(i === 0 ? firstColumnData : secondColumnData).map((data, j) => (
+                                    <div key={j} className={'template-features-vertical-card '}>
+                                        <div className="template-features-vertical-card-image">
+                                            <img src={darkMode ? data.darkSrc || data.src : data.src} alt={data.title} />
+                                        </div>
+                                        <h2>{data.title}</h2>
+                                        <p>{data.description}</p>
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                </div>
+            </div>
+        );
+    };
+
+    return <div className="template-features">{displayType === 'vertical' ? renderVerticalFeatures() : renderHorizontalFeatures()}</div>;
+};
+
+export default TemplateFeatures;
diff --git a/components/templates/TemplateIntro.js b/components/templates/TemplateIntro.js
new file mode 100644
index 0000000000..e9162ea520
--- /dev/null
+++ b/components/templates/TemplateIntro.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const TemplateIntro = ({ title, description, imageURL }) => {
+    return (
+        <div className="template-intro">
+            <h2>{title}</h2>
+            <p>{description}</p>
+            <div className="template-intro-image">
+                <img src={imageURL} alt="Template Hero Image" />
+            </div>
+        </div>
+    );
+};
+
+export default TemplateIntro;
diff --git a/components/templates/TemplateLicense.js b/components/templates/TemplateLicense.js
new file mode 100644
index 0000000000..14d61eeed5
--- /dev/null
+++ b/components/templates/TemplateLicense.js
@@ -0,0 +1,39 @@
+const TemplateLicense = ({ license }) => {
+    return (
+        <div className="template-license-wrapper">
+            <div className="template-license">
+                <div className="template-license-cards">
+                    {license.licenseDetails.map(({ title, price, discountPrice, included }, i) => (
+                        <div key={i} className="template-license-card">
+                            <span>{title}</span>
+                            <div className="template-license-price flex gap-3">
+                                <h2 className={license.showDiscount && 'discount'}>{price}</h2>
+                                {license.showDiscount && <h2>{discountPrice}</h2>}
+                            </div>
+                            <div className="template-license-card-included">
+                                {included.map((txt, j) => (
+                                    <p key={j}>{txt}</p>
+                                ))}
+                            </div>
+                            <a href="https://www.primefaces.org/layouts/licenses" target="_blank">
+                                <button>License Details</button>
+                            </a>
+                        </div>
+                    ))}
+                </div>
+                <p className="template-license-description">{license.description}</p>
+                {license.documentLink && (
+                    <p className="template-license-visit">
+                        Visit the{' '}
+                        <a href={license.documentLink} target="_blank">
+                            official documentation
+                        </a>{' '}
+                        for more information.
+                    </p>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default TemplateLicense;
diff --git a/components/templates/TemplateRelated.js b/components/templates/TemplateRelated.js
new file mode 100644
index 0000000000..96fd74f7dc
--- /dev/null
+++ b/components/templates/TemplateRelated.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const TemplateRelated = ({ relatedData }) => {
+    return (
+        <div className="template-related-wrapper">
+            <div className="template-related">
+                <h2 className="template-related-title">Related Layouts</h2>
+                <div className="template-related-slide">
+                    {relatedData.map((data, i) => (
+                        <a href={data.href} target="_blank" key={i} className="template-related-slide-card">
+                            <img src={data.src} alt={'Related Image ' + i} />
+                        </a>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TemplateRelated;
diff --git a/components/templates/TemplateSeparator.js b/components/templates/TemplateSeparator.js
new file mode 100644
index 0000000000..f5c18fcf3e
--- /dev/null
+++ b/components/templates/TemplateSeparator.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const TemplateSeparator = ({ separatorLogo }) => {
+    return (
+        <div className="template-separator">
+            <span className="template-separator-icon">{separatorLogo}</span>
+        </div>
+    );
+};
+
+export default TemplateSeparator;
diff --git a/components/templates/TemplateYoutube.js b/components/templates/TemplateYoutube.js
new file mode 100644
index 0000000000..072861d29f
--- /dev/null
+++ b/components/templates/TemplateYoutube.js
@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { Dialog } from '../lib/primereact.all';
+
+const PlayIcon = React.memo(() => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none">
+        <g filter="url(#filter0_d_918_49700)">
+            <rect x="50" y="46" width="80" height="80" rx="40" fill="white" />
+            <rect x="50.5" y="46.5" width="79" height="79" rx="39.5" stroke="#DFE7EF" />
+            <path
+                d="M103.062 84.7896C104.085 85.5904 104.085 87.1386 103.062 87.9394L85.3123 101.834C83.9995 102.862 82.0795 101.926 82.0795 100.259L82.0795 72.47C82.0795 70.8028 83.9995 69.8674 85.3123 70.8951L103.062 84.7896Z"
+                fill="var(--primary-400)"
+            />
+        </g>
+        <defs>
+            <filter id="filter0_d_918_49700" x="0" y="0" width="180" height="180" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                <feOffset dy="4" />
+                <feGaussianBlur stdDeviation="25" />
+                <feComposite in2="hardAlpha" operator="out" />
+                <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_918_49700" />
+                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_918_49700" result="shape" />
+            </filter>
+        </defs>
+    </svg>
+));
+
+const TemplateYoutube = ({
+    imgSrc,
+    title = ['Integration with', 'Existing Vite Applications'],
+    description = 'Only the folders that are related to the layout needs to move in to your project. We‘ve already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.',
+    youtubeLink = 'https://www.youtube.com/embed/Y07edRJd5QM'
+}) => {
+    const [youtubeVideoVisible, setYoutubeVideoVisible] = useState(false);
+
+    return (
+        <div className="template-youtube-wrapper">
+            <div className="template-youtube">
+                <div className="template-youtube-title">
+                    {title.map((data, i) => (
+                        <h2 key={i}>{data}</h2>
+                    ))}
+                </div>
+                <div className="template-youtube-description">{description}</div>
+                <div className="template-youtube-screen" onClick={() => setYoutubeVideoVisible(true)}>
+                    <div className="template-youtube-screen-blur">
+                        <div className="template-youtube-screen-play">
+                            <PlayIcon />
+                        </div>
+                    </div>
+                    <img src={imgSrc} alt="Template Youtube Screen" />
+                </div>
+                <Dialog header="Video Content" visible={youtubeVideoVisible} style={{ width: '70vw' }} onHide={() => setYoutubeVideoVisible(false)}>
+                    <div className="template-youtube-video">
+                        <iframe src={youtubeLink} title="PrimeNG 2023 Roadmap" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />
+                    </div>
+                </Dialog>
+            </div>
+        </div>
+    );
+};
+
+export default TemplateYoutube;
diff --git a/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js b/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js
new file mode 100644
index 0000000000..e79fe6f3c1
--- /dev/null
+++ b/components/templates/templateFeaturesAnimation/TemplateFeaturesAnimationInline.js
@@ -0,0 +1,47 @@
+import React, { useRef } from 'react';
+import useAnimatedFeatures from './useAnimatedFeatures';
+
+const TemplateFeaturesAnimationInline = ({ inlineFeaturesData, parentHandleClick, parentHandleHover, parentID, inlineSeconds = 1000 }) => {
+    const animationInlineRef = useRef(null);
+    const { selectedID, setHoveredID, handleClick, handleHover } = useAnimatedFeatures(animationInlineRef, inlineFeaturesData.length, inlineSeconds);
+
+    const handleBtnClick = (id) => {
+        handleClick(id);
+        parentHandleClick(parentID);
+    };
+
+    const enterCardArea = (id) => {
+        setHoveredID(id);
+        handleHover(id, 'onMouseEnter');
+        parentHandleHover(parentID, 'onMouseEnter');
+    };
+
+    const leaveCardArea = (id) => {
+        setHoveredID(null);
+        handleHover(id, 'onMouseLeave');
+        parentHandleHover(parentID, 'onMouseLeave');
+    };
+
+    return (
+        <div className="template-features-animation-right-inline" ref={animationInlineRef}>
+            <div className="template-features-animation-right-inline-tabs">
+                {inlineFeaturesData.map((data, i) => (
+                    <button
+                        onMouseEnter={() => enterCardArea(data.id)}
+                        onMouseLeave={() => leaveCardArea(data.id)}
+                        className={`${!!(data.id === selectedID) && 'template-features-animation-right-inline-tabs-btnActive'}`}
+                        onClick={() => handleBtnClick(data.id)}
+                        key={i}
+                    >
+                        {data.title}
+                    </button>
+                ))}
+            </div>
+            <div className="template-features-animation-right-inline-image">
+                <img src={inlineFeaturesData[selectedID - 1].src} alt="Animation Inline Feature Image" />
+            </div>
+        </div>
+    );
+};
+
+export default TemplateFeaturesAnimationInline;
diff --git a/components/templates/templateFeaturesAnimation/index.js b/components/templates/templateFeaturesAnimation/index.js
new file mode 100644
index 0000000000..259a1936ea
--- /dev/null
+++ b/components/templates/templateFeaturesAnimation/index.js
@@ -0,0 +1,66 @@
+import React, { useRef } from 'react';
+import useAnimatedFeatures from './useAnimatedFeatures';
+import TemplateFeaturesAnimationInline from './TemplateFeaturesAnimationInline';
+
+const TemplateFeaturesAnimation = ({ featuresData, title, animationSeconds = 5000 }) => {
+    const animationRef = useRef(null);
+    const { selectedID, setHoveredID, handleClick, handleHover } = useAnimatedFeatures(animationRef, featuresData.length, animationSeconds);
+
+    const enterCardArea = (id) => {
+        setHoveredID(id);
+        handleHover(id, 'onMouseEnter');
+    };
+
+    const leaveCardArea = (id) => {
+        setHoveredID(null);
+        handleHover(id, 'onMouseLeave');
+    };
+
+    return (
+        <div className="template-features-animation-wrapper">
+            {!!title && <div className="template-features-animation-title">{title}</div>}
+            <div className="template-features-animation" ref={animationRef}>
+                <div className="template-features-animation-left">
+                    {featuresData.map((data, i) => {
+                        const orderNumber = (i + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false });
+
+                        return (
+                            <div
+                                key={i}
+                                onMouseEnter={() => enterCardArea(data.id)}
+                                onMouseLeave={() => leaveCardArea(data.id)}
+                                className={`template-features-animation-left-card ${selectedID === data.id ? 'template-features-animation-left-card-active' : ''}`}
+                                onClick={() => handleClick(data.id)}
+                            >
+                                <div className="template-features-animation-left-card-order">
+                                    <div>{orderNumber}</div>
+                                    <div>{orderNumber}</div>
+                                    <div>{orderNumber}</div>
+                                </div>
+                                <div className="template-features-animation-left-card-content">
+                                    <h5>{data.title}</h5>
+                                    <p>{data.description}</p>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+                <div className="template-features-animation-right">
+                    {featuresData[selectedID - 1]?.type === 'inline-animation' ? (
+                        <TemplateFeaturesAnimationInline
+                            inlineFeaturesData={featuresData[selectedID - 1]?.inlineFeaturesData}
+                            parentHandleClick={handleClick}
+                            parentHandleHover={handleHover}
+                            parentID={selectedID}
+                            inlineSeconds={animationSeconds / featuresData[selectedID - 1]?.inlineFeaturesData.length}
+                        />
+                    ) : (
+                        <img src={featuresData[selectedID - 1]?.src} alt="Animation Feature Image" />
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TemplateFeaturesAnimation;
diff --git a/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
new file mode 100644
index 0000000000..5209556f48
--- /dev/null
+++ b/components/templates/templateFeaturesAnimation/useAnimatedFeatures.js
@@ -0,0 +1,72 @@
+// useAnimatedFeatures.js
+import React, { useEffect, useState } from 'react';
+import useVisible from './useVisible';
+
+const useAnimatedFeatures = (animationRef, arrayLength, seconds = 10000) => {
+    const [selectedID, setSelectedID] = useState(1);
+    const [intervalIds, setIntervalIds] = useState([]);
+    const [cancelInterval, setCancelInterval] = useState(false);
+    const [hoveredID, setHoveredID] = useState(null);
+    const isVisible = useVisible(animationRef);
+
+    const clearAllIntervals = () => {
+        if (intervalIds.length <= 0) {
+            return;
+        }
+
+        intervalIds.forEach((intervalId) => window.clearInterval(intervalId));
+        setIntervalIds([]);
+    };
+
+    const createInterval = () => {
+        const interval = setInterval(() => {
+            setSelectedID((prev) => (prev === arrayLength ? 1 : prev + 1));
+        }, seconds);
+
+        setIntervalIds((prev) => [...prev, interval]);
+    };
+
+    const handleClick = (cardId) => {
+        clearAllIntervals();
+        setSelectedID(cardId);
+        setCancelInterval(true);
+    };
+
+    const handleHover = (cardId, type) => {
+        if (cancelInterval || cardId !== selectedID) {
+            return;
+        }
+
+        clearAllIntervals();
+
+        if (type === 'onMouseLeave') {
+            setSelectedID(cardId);
+            createInterval();
+        }
+    };
+
+    useEffect(() => {
+        clearAllIntervals();
+
+        if (isVisible) {
+            createInterval();
+        } else {
+            clearAllIntervals();
+            setSelectedID(1);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [animationRef, isVisible]);
+
+    useEffect(() => {
+        if (!hoveredID) {
+            null;
+        }
+
+        handleHover(hoveredID, 'onMouseEnter');
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedID]);
+
+    return { selectedID, setHoveredID, handleClick, handleHover };
+};
+
+export default useAnimatedFeatures;
diff --git a/components/templates/templateFeaturesAnimation/useVisible.js b/components/templates/templateFeaturesAnimation/useVisible.js
new file mode 100644
index 0000000000..df0b69e667
--- /dev/null
+++ b/components/templates/templateFeaturesAnimation/useVisible.js
@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+
+const useVisible = (element, rootMargin = 0.2) => {
+    const [isVisible, setIsVisible] = useState(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                setIsVisible(entry.isIntersecting);
+            },
+            { threshold: rootMargin }
+        );
+
+        if (element.current) {
+            observer.observe(element.current);
+        }
+
+        return () => {
+            if (observer && element.current) {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                observer.unobserve(element.current);
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return isVisible;
+};
+
+export default useVisible;
diff --git a/components/templates/templateHero/TemplateHero.js b/components/templates/templateHero/TemplateHero.js
new file mode 100644
index 0000000000..6d7f566e68
--- /dev/null
+++ b/components/templates/templateHero/TemplateHero.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import TemplateHeroRectangle from './TemplateHeroRectangle';
+import TemplateHeroLight from './TemplateHeroLight';
+
+const TemplateHero = ({ logo, pattern, rectangle, light, dashboard1, dashboard2, description, liveHref, docHref, supportHref, storeHref, free, multipurpose }) => {
+    return (
+        <div className="template-hero">
+            {!!pattern && <img className="template-hero-pattern" src={pattern} alt="Template Hero Pattern" />}
+            {!!light && <TemplateHeroLight />}
+            {!!rectangle && <TemplateHeroRectangle />}
+            <div className="template-hero-card">
+                <div className="template-hero-card-logo-row">
+                    <div className="template-hero-card-logo">{logo}</div>
+                    {multipurpose && <div className="template-hero-card-logo-row-multipurpose">Multipurpose</div>}
+                </div>
+                <p>{description}</p>
+                <div className="template-hero-card-buttons">
+                    <a href={liveHref} target="_blank" className="template-hero-card-buttons-btn1 p-button ">
+                        Live Demo
+                    </a>
+                    <a href={storeHref ?? 'https://primeui.store/templates'} target="_blank" className="template-hero-card-buttons-btn2 p-button">
+                        {free ? 'Source Code' : 'Buy Now'}
+                    </a>
+                </div>
+                <div className="template-hero-card-links">
+                    <a href={supportHref ?? 'https://github.com/orgs/primefaces/discussions/categories/primereact-templates'} target="_blank">
+                        <i className="pi pi-github " style={{ fontSize: '1rem' }} />
+                        <span>{free ? 'Open Issues' : 'Community'}</span>
+                    </a>
+                    {docHref && (
+                        <a href={docHref} target="_blank">
+                            <i className="pi pi-book " style={{ fontSize: '1rem' }} />
+                            <span>Documentation</span>
+                        </a>
+                    )}
+                </div>
+            </div>
+            {!!dashboard1 && <img className="template-hero-dashboard1" src={dashboard1} alt="Template Dashboard Image 1" />}
+            {!!dashboard2 && <img className="template-hero-dashboard2" src={dashboard2} alt="Template Dashboard Image 2" />}
+        </div>
+    );
+};
+
+export default TemplateHero;
diff --git a/components/templates/templateHero/TemplateHeroLight.js b/components/templates/templateHero/TemplateHeroLight.js
new file mode 100644
index 0000000000..a015619c57
--- /dev/null
+++ b/components/templates/templateHero/TemplateHeroLight.js
@@ -0,0 +1,64 @@
+import React from 'react';
+
+const TemplateHeroLight = () => {
+    return (
+        <svg width="490" height="143" viewBox="0 0 490 143" fill="none" xmlns="http://www.w3.org/2000/svg" className="template-hero-light">
+            <g filter="url(#filter0_f_1970_42395)">
+                <g filter="url(#filter1_f_1970_42395)">
+                    <rect x="43" y="43" width="404" height="10" rx="5" fill="var(--primary-100)" />
+                    <rect x="38.5" y="38.5" width="413" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+                </g>
+                <g filter="url(#filter2_f_1970_42395)">
+                    <rect x="98" y="52" width="294" height="10" rx="5" fill="var(--primary-100)" />
+                    <rect x="93.5" y="47.5" width="303" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+                </g>
+                <g filter="url(#filter3_f_1970_42395)">
+                    <rect x="144" y="60" width="202" height="10" rx="5" fill="var(--primary-100)" />
+                    <rect x="139.5" y="55.5" width="211" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+                </g>
+                <g filter="url(#filter4_f_1970_42395)">
+                    <rect x="182" y="75" width="126" height="10" rx="5" fill="var(--primary-100)" />
+                    <rect x="177.5" y="70.5" width="135" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+                </g>
+                <g filter="url(#filter5_f_1970_42395)">
+                    <rect x="212" y="90" width="66" height="10" rx="5" fill="var(--primary-100)" />
+                    <rect x="207.5" y="85.5" width="75" height="19" rx="9.5" stroke="var(--primary-50)" strokeWidth="9" />
+                </g>
+            </g>
+            <defs>
+                <filter id="filter0_f_1970_42395" x="0" y="0" width="490" height="143" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="17" result="effect1_foregroundBlur_1970_42395" />
+                </filter>
+                <filter id="filter1_f_1970_42395" x="14" y="14" width="462" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+                </filter>
+                <filter id="filter2_f_1970_42395" x="69" y="23" width="352" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+                </filter>
+                <filter id="filter3_f_1970_42395" x="115" y="31" width="260" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+                </filter>
+                <filter id="filter4_f_1970_42395" x="153" y="46" width="184" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+                </filter>
+                <filter id="filter5_f_1970_42395" x="183" y="61" width="124" height="68" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                    <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1970_42395" />
+                </filter>
+            </defs>
+        </svg>
+    );
+};
+
+export default TemplateHeroLight;
diff --git a/components/templates/templateHero/TemplateHeroRectangle.js b/components/templates/templateHero/TemplateHeroRectangle.js
new file mode 100644
index 0000000000..7822e916d2
--- /dev/null
+++ b/components/templates/templateHero/TemplateHeroRectangle.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+const TemplateHeroRectangle = () => {
+    return (
+        <>
+            <svg width="1152" height="457" viewBox="0 0 1152 457" fill="none" xmlns="http://www.w3.org/2000/svg" className="template-hero-rectangle">
+                <g style={{ mixBlendMode: 'overlay' }} filter="url(#filter0_f_956_37561)">
+                    <path d="M264.08 -96H547.881L952 470H-163L264.08 -96Z" fill="url(#paint0_linear_956_37561)" />
+                </g>
+                <defs>
+                    <filter id="filter0_f_956_37561" x="-363" y="-296" width="1515" height="966" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+                        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                        <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_956_37561" />
+                    </filter>
+                    <linearGradient id="paint0_linear_956_37561" x1="394.5" y1="-96" x2="394.5" y2="470" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="var(--primary-50)" />
+                        <stop offset="1" stopColor="var(--primary-50)" stopOpacity="0" />
+                    </linearGradient>
+                </defs>
+            </svg>
+        </>
+    );
+};
+
+export default TemplateHeroRectangle;
diff --git a/components/test/index.js b/components/test/index.js
new file mode 100644
index 0000000000..829bbfbfef
--- /dev/null
+++ b/components/test/index.js
@@ -0,0 +1,68 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+// Set the userAgent inside the navigator
+Object.defineProperty(
+    window.navigator,
+    'userAgent',
+    ((value) => ({
+        get() {
+            return value;
+        },
+        set(v) {
+            value = v;
+        }
+    }))(window.navigator.userAgent)
+);
+
+// Set the maxTouchPoints inside the navigator for touch devices
+Object.defineProperty(
+    window.navigator,
+    'maxTouchPoints',
+    ((value) => ({
+        get() {
+            return value;
+        },
+        set(v) {
+            value = v;
+        }
+    }))(window.navigator.maxTouchPoints)
+);
+
+/**
+ * Run a single snapshot test.
+ *
+ * @param {*} element the element to render
+ * @param {*} name the name of the test
+ */
+export function snapshot(element, name) {
+    test(name, () => {
+        expect(render(element).container).toMatchSnapshot();
+    });
+}
+
+/**
+ * Run a single snapshot test of the parent element.
+ *
+ * @param {*} element the element to render
+ * @param {*} name the name of the test
+ */
+export function snapshotParent(element, name) {
+    test(name, () => {
+        expect(render(element).container.parentElement).toMatchSnapshot();
+    });
+}
+
+/**
+ * Sets the browser user agent so it can simulate browsers. If its IOS adds touch setting to allow DomUtils.isTouchDevice.
+ *
+ * @param {*} name the name of the user agent.
+ */
+export function userAgent(name) {
+    // Set the userAgent that you wanna test on your function
+    global.navigator.userAgent = name;
+
+    if (name.match(/iPhone|iPad|iPod/i)) {
+        global.navigator.maxTouchPoints = 2;
+    }
+}
diff --git a/components/utils/utils.js b/components/utils/utils.js
new file mode 100644
index 0000000000..b24ebfb1d3
--- /dev/null
+++ b/components/utils/utils.js
@@ -0,0 +1,33 @@
+export const switchTheme = (currentTheme, newTheme, linkElementId, callback) => {
+    const linkElement = document.getElementById(linkElementId);
+    const cloneLinkElement = linkElement.cloneNode(true);
+    const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+
+    cloneLinkElement.setAttribute('id', linkElementId + '-clone');
+    cloneLinkElement.setAttribute('href', newThemeUrl);
+    cloneLinkElement.addEventListener('load', () => {
+        linkElement.remove();
+        cloneLinkElement.setAttribute('id', linkElementId);
+
+        if (callback) {
+            callback();
+        }
+    });
+    linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+};
+
+export const getStorage = (stateStorageProp) => {
+    switch (stateStorageProp) {
+        case 'local':
+            return window.localStorage;
+
+        case 'session':
+            return window.sessionStorage;
+
+        case 'custom':
+            return null;
+
+        default:
+            throw new Error(stateStorageProp + ' is not a valid value for the state storage, supported values are "local", "session" and "custom".');
+    }
+};
diff --git a/data/news.json b/data/news.json
new file mode 100644
index 0000000000..5b09c4afd2
--- /dev/null
+++ b/data/news.json
@@ -0,0 +1,7 @@
+{
+    "id": 56,
+    "content": "Final Sale of the Year | Don't miss out! 🎁",
+    "linkText": "Buy Now",
+    "linkHref": "https://primeui.store/",
+    "target": "_blank"
+}
diff --git a/exports/accordion.d.ts b/exports/accordion.d.ts
deleted file mode 100644
index 8f51f75d10..0000000000
--- a/exports/accordion.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/accordion/Accordion';
\ No newline at end of file
diff --git a/exports/accordion.js b/exports/accordion.js
deleted file mode 100644
index 82c49dc48a..0000000000
--- a/exports/accordion.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/accordion/Accordion');
\ No newline at end of file
diff --git a/exports/api.d.ts b/exports/api.d.ts
deleted file mode 100644
index cec0fa8876..0000000000
--- a/exports/api.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './components/menuitem/MenuItem';
-export * from './components/selectitem/SelectItem';
-export * from './components/treenode/TreeNode';
\ No newline at end of file
diff --git a/exports/autocomplete.d.ts b/exports/autocomplete.d.ts
deleted file mode 100644
index 962ab5f624..0000000000
--- a/exports/autocomplete.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/autocomplete/AutoComplete';
\ No newline at end of file
diff --git a/exports/autocomplete.js b/exports/autocomplete.js
deleted file mode 100644
index 3f0bc685cc..0000000000
--- a/exports/autocomplete.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/autocomplete/AutoComplete');
\ No newline at end of file
diff --git a/exports/breadcrumb.d.ts b/exports/breadcrumb.d.ts
deleted file mode 100644
index 38e5f35fb6..0000000000
--- a/exports/breadcrumb.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/breadcrumb/BreadCrumb';
\ No newline at end of file
diff --git a/exports/breadcrumb.js b/exports/breadcrumb.js
deleted file mode 100644
index 110618139d..0000000000
--- a/exports/breadcrumb.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/breadcrumb/BreadCrumb');
\ No newline at end of file
diff --git a/exports/button.d.ts b/exports/button.d.ts
deleted file mode 100644
index 8fa87f3dbd..0000000000
--- a/exports/button.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/button/Button.js';
\ No newline at end of file
diff --git a/exports/button.js b/exports/button.js
deleted file mode 100644
index ca607c4104..0000000000
--- a/exports/button.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/button/Button.js');
\ No newline at end of file
diff --git a/exports/calendar.d.ts b/exports/calendar.d.ts
deleted file mode 100644
index 66abf98a89..0000000000
--- a/exports/calendar.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/calendar/Calendar.js';
\ No newline at end of file
diff --git a/exports/calendar.js b/exports/calendar.js
deleted file mode 100644
index 4d17239c1f..0000000000
--- a/exports/calendar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/calendar/Calendar.js');
\ No newline at end of file
diff --git a/exports/captcha.d.ts b/exports/captcha.d.ts
deleted file mode 100644
index d9f3a17cfc..0000000000
--- a/exports/captcha.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/captcha/Captcha';
\ No newline at end of file
diff --git a/exports/captcha.js b/exports/captcha.js
deleted file mode 100644
index 0c82ee2edd..0000000000
--- a/exports/captcha.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/captcha/Captcha');
\ No newline at end of file
diff --git a/exports/card.d.ts b/exports/card.d.ts
deleted file mode 100644
index 26b7fdad17..0000000000
--- a/exports/card.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/card/Card';
\ No newline at end of file
diff --git a/exports/card.js b/exports/card.js
deleted file mode 100644
index 53eab32e57..0000000000
--- a/exports/card.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/card/Card');
\ No newline at end of file
diff --git a/exports/carousel.d.ts b/exports/carousel.d.ts
deleted file mode 100644
index 550250e96c..0000000000
--- a/exports/carousel.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/carousel/Carousel';
\ No newline at end of file
diff --git a/exports/carousel.js b/exports/carousel.js
deleted file mode 100644
index b7020e80ec..0000000000
--- a/exports/carousel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/carousel/Carousel');
\ No newline at end of file
diff --git a/exports/chart.d.ts b/exports/chart.d.ts
deleted file mode 100644
index 2f33c01c92..0000000000
--- a/exports/chart.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/chart/Chart';
\ No newline at end of file
diff --git a/exports/chart.js b/exports/chart.js
deleted file mode 100644
index 9a6aaa30b9..0000000000
--- a/exports/chart.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/chart/Chart');
\ No newline at end of file
diff --git a/exports/checkbox.d.ts b/exports/checkbox.d.ts
deleted file mode 100644
index 016648199d..0000000000
--- a/exports/checkbox.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/checkbox/Checkbox';
\ No newline at end of file
diff --git a/exports/checkbox.js b/exports/checkbox.js
deleted file mode 100644
index da4e1f9d56..0000000000
--- a/exports/checkbox.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/checkbox/Checkbox');
\ No newline at end of file
diff --git a/exports/chips.d.ts b/exports/chips.d.ts
deleted file mode 100644
index 929ba1d9bb..0000000000
--- a/exports/chips.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/chips/Chips';
\ No newline at end of file
diff --git a/exports/chips.js b/exports/chips.js
deleted file mode 100644
index 8cc2f02a88..0000000000
--- a/exports/chips.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/chips/Chips');
\ No newline at end of file
diff --git a/exports/colorpicker.d.ts b/exports/colorpicker.d.ts
deleted file mode 100644
index e3b8f2e4ed..0000000000
--- a/exports/colorpicker.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/colorpicker/ColorPicker';
\ No newline at end of file
diff --git a/exports/colorpicker.js b/exports/colorpicker.js
deleted file mode 100644
index 50a0f08bfb..0000000000
--- a/exports/colorpicker.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/colorpicker/ColorPicker');
\ No newline at end of file
diff --git a/exports/column.d.ts b/exports/column.d.ts
deleted file mode 100644
index 72549a7089..0000000000
--- a/exports/column.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/column/Column';
diff --git a/exports/column.js b/exports/column.js
deleted file mode 100644
index 3c65e8225f..0000000000
--- a/exports/column.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/column/Column');
\ No newline at end of file
diff --git a/exports/columngroup.d.ts b/exports/columngroup.d.ts
deleted file mode 100644
index bdb8af1f7d..0000000000
--- a/exports/columngroup.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/columngroup/ColumnGroup';
\ No newline at end of file
diff --git a/exports/columngroup.js b/exports/columngroup.js
deleted file mode 100644
index 7429724f8d..0000000000
--- a/exports/columngroup.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/columngroup/ColumnGroup');
\ No newline at end of file
diff --git a/exports/contextmenu.d.ts b/exports/contextmenu.d.ts
deleted file mode 100644
index 19703851b5..0000000000
--- a/exports/contextmenu.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/contextmenu/ContextMenu';
\ No newline at end of file
diff --git a/exports/contextmenu.js b/exports/contextmenu.js
deleted file mode 100644
index 67cb569d35..0000000000
--- a/exports/contextmenu.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/contextmenu/ContextMenu');
\ No newline at end of file
diff --git a/exports/datascroller.d.ts b/exports/datascroller.d.ts
deleted file mode 100644
index 6d1e565e2f..0000000000
--- a/exports/datascroller.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/datascroller/DataScroller';
\ No newline at end of file
diff --git a/exports/datascroller.js b/exports/datascroller.js
deleted file mode 100644
index 6287a2ee59..0000000000
--- a/exports/datascroller.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/datascroller/DataScroller');
\ No newline at end of file
diff --git a/exports/datatable.d.ts b/exports/datatable.d.ts
deleted file mode 100644
index ae61002faf..0000000000
--- a/exports/datatable.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/datatable/DataTable';
\ No newline at end of file
diff --git a/exports/datatable.js b/exports/datatable.js
deleted file mode 100644
index a82a880df0..0000000000
--- a/exports/datatable.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/datatable/DataTable');
\ No newline at end of file
diff --git a/exports/dataview.d.ts b/exports/dataview.d.ts
deleted file mode 100644
index 655348dff3..0000000000
--- a/exports/dataview.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/dataview/DataView';
\ No newline at end of file
diff --git a/exports/dataview.js b/exports/dataview.js
deleted file mode 100644
index aae4ab238c..0000000000
--- a/exports/dataview.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/dataview/DataView');
\ No newline at end of file
diff --git a/exports/deferredcontent.d.ts b/exports/deferredcontent.d.ts
deleted file mode 100644
index 83b37206a9..0000000000
--- a/exports/deferredcontent.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/deferredcontent/DeferredContent';
\ No newline at end of file
diff --git a/exports/deferredcontent.js b/exports/deferredcontent.js
deleted file mode 100644
index f0a680b354..0000000000
--- a/exports/deferredcontent.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/deferredcontent/DeferredContent');
\ No newline at end of file
diff --git a/exports/dialog.d.ts b/exports/dialog.d.ts
deleted file mode 100644
index a830609373..0000000000
--- a/exports/dialog.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/dialog/Dialog';
\ No newline at end of file
diff --git a/exports/dialog.js b/exports/dialog.js
deleted file mode 100644
index cf5f3b274a..0000000000
--- a/exports/dialog.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/dialog/Dialog');
\ No newline at end of file
diff --git a/exports/dropdown.d.ts b/exports/dropdown.d.ts
deleted file mode 100644
index b2dd63bcaf..0000000000
--- a/exports/dropdown.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/dropdown/Dropdown';
\ No newline at end of file
diff --git a/exports/dropdown.js b/exports/dropdown.js
deleted file mode 100644
index 94485780bc..0000000000
--- a/exports/dropdown.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/dropdown/Dropdown');
\ No newline at end of file
diff --git a/exports/editor.d.ts b/exports/editor.d.ts
deleted file mode 100644
index 329ae467ec..0000000000
--- a/exports/editor.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/editor/Editor';
\ No newline at end of file
diff --git a/exports/editor.js b/exports/editor.js
deleted file mode 100644
index 8cb9303986..0000000000
--- a/exports/editor.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/editor/Editor');
\ No newline at end of file
diff --git a/exports/fieldset.d.ts b/exports/fieldset.d.ts
deleted file mode 100644
index fbb91eb369..0000000000
--- a/exports/fieldset.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/fieldset/Fieldset';
\ No newline at end of file
diff --git a/exports/fieldset.js b/exports/fieldset.js
deleted file mode 100644
index 3daf9e1f04..0000000000
--- a/exports/fieldset.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/fieldset/Fieldset');
\ No newline at end of file
diff --git a/exports/fileupload.d.ts b/exports/fileupload.d.ts
deleted file mode 100644
index d8c53ce819..0000000000
--- a/exports/fileupload.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/fileupload/FileUpload';
\ No newline at end of file
diff --git a/exports/fileupload.js b/exports/fileupload.js
deleted file mode 100644
index b2e4551b82..0000000000
--- a/exports/fileupload.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/fileupload/FileUpload');
\ No newline at end of file
diff --git a/exports/fullcalendar.d.ts b/exports/fullcalendar.d.ts
deleted file mode 100644
index cc1dc61ceb..0000000000
--- a/exports/fullcalendar.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/fullcalendar/FullCalendar';
\ No newline at end of file
diff --git a/exports/fullcalendar.js b/exports/fullcalendar.js
deleted file mode 100644
index e762621d3e..0000000000
--- a/exports/fullcalendar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/fullcalendar/FullCalendar');
\ No newline at end of file
diff --git a/exports/galleria.d.ts b/exports/galleria.d.ts
deleted file mode 100644
index d426683f11..0000000000
--- a/exports/galleria.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/galleria/Galleria';
diff --git a/exports/galleria.js b/exports/galleria.js
deleted file mode 100644
index b3f2351c16..0000000000
--- a/exports/galleria.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/galleria/Galleria');
diff --git a/exports/gmap.d.ts b/exports/gmap.d.ts
deleted file mode 100644
index 3f60c1bc90..0000000000
--- a/exports/gmap.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/gmap/GMap';
\ No newline at end of file
diff --git a/exports/gmap.js b/exports/gmap.js
deleted file mode 100644
index b058544d13..0000000000
--- a/exports/gmap.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/gmap/GMap');
\ No newline at end of file
diff --git a/exports/growl.d.ts b/exports/growl.d.ts
deleted file mode 100644
index d012e7a4c3..0000000000
--- a/exports/growl.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/growl/Growl';
\ No newline at end of file
diff --git a/exports/growl.js b/exports/growl.js
deleted file mode 100644
index 3fcf582ef2..0000000000
--- a/exports/growl.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/growl/Growl');
\ No newline at end of file
diff --git a/exports/inplace.d.ts b/exports/inplace.d.ts
deleted file mode 100644
index c3c4346525..0000000000
--- a/exports/inplace.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/inplace/Inplace';
\ No newline at end of file
diff --git a/exports/inplace.js b/exports/inplace.js
deleted file mode 100644
index 9bb1dbffbf..0000000000
--- a/exports/inplace.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/inplace/Inplace');
\ No newline at end of file
diff --git a/exports/inputmask.d.ts b/exports/inputmask.d.ts
deleted file mode 100644
index 8576750f1c..0000000000
--- a/exports/inputmask.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/inputmask/InputMask';
\ No newline at end of file
diff --git a/exports/inputmask.js b/exports/inputmask.js
deleted file mode 100644
index ed8a47269c..0000000000
--- a/exports/inputmask.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/inputmask/InputMask');
\ No newline at end of file
diff --git a/exports/inputnumber.d.ts b/exports/inputnumber.d.ts
deleted file mode 100644
index 4531e8b0b3..0000000000
--- a/exports/inputnumber.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/inputnumber/InputNumber';
diff --git a/exports/inputnumber.js b/exports/inputnumber.js
deleted file mode 100644
index d735926f47..0000000000
--- a/exports/inputnumber.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/inputnumber/InputNumber');
\ No newline at end of file
diff --git a/exports/inputswitch.d.ts b/exports/inputswitch.d.ts
deleted file mode 100644
index a41a30d3d9..0000000000
--- a/exports/inputswitch.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/inputswitch/InputSwitch';
\ No newline at end of file
diff --git a/exports/inputswitch.js b/exports/inputswitch.js
deleted file mode 100644
index 174912cbc2..0000000000
--- a/exports/inputswitch.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/inputswitch/InputSwitch');
\ No newline at end of file
diff --git a/exports/inputtext.d.ts b/exports/inputtext.d.ts
deleted file mode 100644
index 0033154ab0..0000000000
--- a/exports/inputtext.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/inputtext/InputText';
\ No newline at end of file
diff --git a/exports/inputtext.js b/exports/inputtext.js
deleted file mode 100644
index b5c194fa08..0000000000
--- a/exports/inputtext.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/inputtext/InputText');
\ No newline at end of file
diff --git a/exports/inputtextarea.d.ts b/exports/inputtextarea.d.ts
deleted file mode 100644
index d3d0d76c95..0000000000
--- a/exports/inputtextarea.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/inputtextarea/InputTextarea';
\ No newline at end of file
diff --git a/exports/inputtextarea.js b/exports/inputtextarea.js
deleted file mode 100644
index eef6e19c75..0000000000
--- a/exports/inputtextarea.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/inputtextarea/InputTextarea');
\ No newline at end of file
diff --git a/exports/lightbox.d.ts b/exports/lightbox.d.ts
deleted file mode 100644
index b4bd9882ca..0000000000
--- a/exports/lightbox.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/lightbox/Lightbox';
\ No newline at end of file
diff --git a/exports/lightbox.js b/exports/lightbox.js
deleted file mode 100644
index 7ff0506da0..0000000000
--- a/exports/lightbox.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/lightbox/Lightbox');
\ No newline at end of file
diff --git a/exports/listbox.d.ts b/exports/listbox.d.ts
deleted file mode 100644
index cd92fadf23..0000000000
--- a/exports/listbox.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/listbox/ListBox';
\ No newline at end of file
diff --git a/exports/listbox.js b/exports/listbox.js
deleted file mode 100644
index 0fcca1d006..0000000000
--- a/exports/listbox.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/listbox/ListBox');
\ No newline at end of file
diff --git a/exports/megamenu.d.ts b/exports/megamenu.d.ts
deleted file mode 100644
index 87a5e3f035..0000000000
--- a/exports/megamenu.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/megamenu/MegaMenu';
\ No newline at end of file
diff --git a/exports/megamenu.js b/exports/megamenu.js
deleted file mode 100644
index da0e8de074..0000000000
--- a/exports/megamenu.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/megamenu/MegaMenu');
\ No newline at end of file
diff --git a/exports/menu.d.ts b/exports/menu.d.ts
deleted file mode 100644
index 1b82bd73d4..0000000000
--- a/exports/menu.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/menu/Menu';
\ No newline at end of file
diff --git a/exports/menu.js b/exports/menu.js
deleted file mode 100644
index 01ce05fd77..0000000000
--- a/exports/menu.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/menu/Menu');
\ No newline at end of file
diff --git a/exports/menubar.d.ts b/exports/menubar.d.ts
deleted file mode 100644
index b24a6a459f..0000000000
--- a/exports/menubar.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/menubar/Menubar';
diff --git a/exports/menubar.js b/exports/menubar.js
deleted file mode 100644
index 6700b713ab..0000000000
--- a/exports/menubar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/menubar/Menubar');
diff --git a/exports/message.d.ts b/exports/message.d.ts
deleted file mode 100644
index 8ee947e69a..0000000000
--- a/exports/message.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/message/Message';
\ No newline at end of file
diff --git a/exports/message.js b/exports/message.js
deleted file mode 100644
index 9c50bd7947..0000000000
--- a/exports/message.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/message/Message');
\ No newline at end of file
diff --git a/exports/messages.d.ts b/exports/messages.d.ts
deleted file mode 100644
index e86a897f3f..0000000000
--- a/exports/messages.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/messages/Messages';
\ No newline at end of file
diff --git a/exports/messages.js b/exports/messages.js
deleted file mode 100644
index afdaf40d41..0000000000
--- a/exports/messages.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/messages/Messages');
\ No newline at end of file
diff --git a/exports/multiselect.d.ts b/exports/multiselect.d.ts
deleted file mode 100644
index aceb7e5a31..0000000000
--- a/exports/multiselect.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/multiselect/MultiSelect';
\ No newline at end of file
diff --git a/exports/multiselect.js b/exports/multiselect.js
deleted file mode 100644
index 811cd2489c..0000000000
--- a/exports/multiselect.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/multiselect/MultiSelect');
\ No newline at end of file
diff --git a/exports/orderlist.d.ts b/exports/orderlist.d.ts
deleted file mode 100644
index b4596eecdb..0000000000
--- a/exports/orderlist.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/orderlist/OrderList';
\ No newline at end of file
diff --git a/exports/orderlist.js b/exports/orderlist.js
deleted file mode 100644
index df4bca8ada..0000000000
--- a/exports/orderlist.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/orderlist/OrderList');
\ No newline at end of file
diff --git a/exports/organizationchart.d.ts b/exports/organizationchart.d.ts
deleted file mode 100644
index 40c416c7f3..0000000000
--- a/exports/organizationchart.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/organizationchart/OrganizationChart';
\ No newline at end of file
diff --git a/exports/organizationchart.js b/exports/organizationchart.js
deleted file mode 100644
index c0fdb5bc84..0000000000
--- a/exports/organizationchart.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/organizationchart/OrganizationChart');
\ No newline at end of file
diff --git a/exports/overlaypanel.d.ts b/exports/overlaypanel.d.ts
deleted file mode 100644
index 59d6b28156..0000000000
--- a/exports/overlaypanel.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/overlaypanel/OverlayPanel';
\ No newline at end of file
diff --git a/exports/overlaypanel.js b/exports/overlaypanel.js
deleted file mode 100644
index 606b775381..0000000000
--- a/exports/overlaypanel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/overlaypanel/OverlayPanel');
\ No newline at end of file
diff --git a/exports/paginator.d.ts b/exports/paginator.d.ts
deleted file mode 100644
index de8edcf0bf..0000000000
--- a/exports/paginator.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/paginator/Paginator';
\ No newline at end of file
diff --git a/exports/paginator.js b/exports/paginator.js
deleted file mode 100644
index 63b7597eba..0000000000
--- a/exports/paginator.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/paginator/Paginator');
\ No newline at end of file
diff --git a/exports/panel.d.ts b/exports/panel.d.ts
deleted file mode 100644
index 1d475dcbab..0000000000
--- a/exports/panel.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/panel/Panel';
\ No newline at end of file
diff --git a/exports/panel.js b/exports/panel.js
deleted file mode 100644
index 6155e06397..0000000000
--- a/exports/panel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/panel/Panel');
\ No newline at end of file
diff --git a/exports/panelmenu.d.ts b/exports/panelmenu.d.ts
deleted file mode 100644
index 561767f8a6..0000000000
--- a/exports/panelmenu.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/panelmenu/PanelMenu';
\ No newline at end of file
diff --git a/exports/panelmenu.js b/exports/panelmenu.js
deleted file mode 100644
index 00ea9f4b38..0000000000
--- a/exports/panelmenu.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/panelmenu/PanelMenu');
\ No newline at end of file
diff --git a/exports/password.d.ts b/exports/password.d.ts
deleted file mode 100644
index 24f07bb39e..0000000000
--- a/exports/password.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/password/Password';
\ No newline at end of file
diff --git a/exports/password.js b/exports/password.js
deleted file mode 100644
index 8293febf5d..0000000000
--- a/exports/password.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/password/Password');
\ No newline at end of file
diff --git a/exports/picklist.d.ts b/exports/picklist.d.ts
deleted file mode 100644
index c1a4521d12..0000000000
--- a/exports/picklist.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/picklist/PickList';
\ No newline at end of file
diff --git a/exports/picklist.js b/exports/picklist.js
deleted file mode 100644
index 29c8fc6f2e..0000000000
--- a/exports/picklist.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/picklist/PickList');
\ No newline at end of file
diff --git a/exports/progressbar.d.ts b/exports/progressbar.d.ts
deleted file mode 100644
index c892669781..0000000000
--- a/exports/progressbar.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/progressbar/ProgressBar';
\ No newline at end of file
diff --git a/exports/progressbar.js b/exports/progressbar.js
deleted file mode 100644
index 1155111ad5..0000000000
--- a/exports/progressbar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/progressbar/ProgressBar');
\ No newline at end of file
diff --git a/exports/progressspinner.d.ts b/exports/progressspinner.d.ts
deleted file mode 100644
index c30cab4557..0000000000
--- a/exports/progressspinner.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/progressspinner/ProgressSpinner';
\ No newline at end of file
diff --git a/exports/progressspinner.js b/exports/progressspinner.js
deleted file mode 100644
index 155f67b2d2..0000000000
--- a/exports/progressspinner.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/progressspinner/ProgressSpinner');
\ No newline at end of file
diff --git a/exports/radiobutton.d.ts b/exports/radiobutton.d.ts
deleted file mode 100644
index c383e6e5aa..0000000000
--- a/exports/radiobutton.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/radiobutton/RadioButton';
\ No newline at end of file
diff --git a/exports/radiobutton.js b/exports/radiobutton.js
deleted file mode 100644
index f0fc7f9e83..0000000000
--- a/exports/radiobutton.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/radiobutton/RadioButton');
\ No newline at end of file
diff --git a/exports/rating.d.ts b/exports/rating.d.ts
deleted file mode 100644
index 69194d5c80..0000000000
--- a/exports/rating.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/rating/Rating';
\ No newline at end of file
diff --git a/exports/rating.js b/exports/rating.js
deleted file mode 100644
index fdc22a1644..0000000000
--- a/exports/rating.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/rating/Rating');
\ No newline at end of file
diff --git a/exports/row.d.ts b/exports/row.d.ts
deleted file mode 100644
index a8911738dc..0000000000
--- a/exports/row.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/row/Row';
\ No newline at end of file
diff --git a/exports/row.js b/exports/row.js
deleted file mode 100644
index 0315dcb080..0000000000
--- a/exports/row.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/row/Row');
\ No newline at end of file
diff --git a/exports/scrollpanel.d.ts b/exports/scrollpanel.d.ts
deleted file mode 100644
index d71fe46c20..0000000000
--- a/exports/scrollpanel.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/scrollpanel/ScrollPanel';
\ No newline at end of file
diff --git a/exports/scrollpanel.js b/exports/scrollpanel.js
deleted file mode 100644
index 2c08bae18b..0000000000
--- a/exports/scrollpanel.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/scrollpanel/ScrollPanel');
\ No newline at end of file
diff --git a/exports/selectbutton.d.ts b/exports/selectbutton.d.ts
deleted file mode 100644
index 6a77f61e3a..0000000000
--- a/exports/selectbutton.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/selectbutton/SelectButton';
\ No newline at end of file
diff --git a/exports/selectbutton.js b/exports/selectbutton.js
deleted file mode 100644
index a54f5c658f..0000000000
--- a/exports/selectbutton.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/selectbutton/SelectButton');
\ No newline at end of file
diff --git a/exports/sidebar.d.ts b/exports/sidebar.d.ts
deleted file mode 100644
index 53c1cfb141..0000000000
--- a/exports/sidebar.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/sidebar/Sidebar';
\ No newline at end of file
diff --git a/exports/sidebar.js b/exports/sidebar.js
deleted file mode 100644
index 8059046c11..0000000000
--- a/exports/sidebar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/sidebar/Sidebar');
\ No newline at end of file
diff --git a/exports/slidemenu.d.ts b/exports/slidemenu.d.ts
deleted file mode 100644
index a1c8aea46a..0000000000
--- a/exports/slidemenu.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/slidemenu/SlideMenu';
\ No newline at end of file
diff --git a/exports/slidemenu.js b/exports/slidemenu.js
deleted file mode 100644
index 7d195377d6..0000000000
--- a/exports/slidemenu.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/slidemenu/SlideMenu');
\ No newline at end of file
diff --git a/exports/slider.d.ts b/exports/slider.d.ts
deleted file mode 100644
index 207ffa1a18..0000000000
--- a/exports/slider.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/slider/Slider';
\ No newline at end of file
diff --git a/exports/slider.js b/exports/slider.js
deleted file mode 100644
index fadce6d022..0000000000
--- a/exports/slider.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/slider/Slider');
\ No newline at end of file
diff --git a/exports/spinner.d.ts b/exports/spinner.d.ts
deleted file mode 100644
index 0b44efa6f0..0000000000
--- a/exports/spinner.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/spinner/Spinner';
\ No newline at end of file
diff --git a/exports/spinner.js b/exports/spinner.js
deleted file mode 100644
index a08c4956f1..0000000000
--- a/exports/spinner.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/spinner/Spinner');
\ No newline at end of file
diff --git a/exports/splitbutton.d.ts b/exports/splitbutton.d.ts
deleted file mode 100644
index 2ab19d1a98..0000000000
--- a/exports/splitbutton.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/splitbutton/SplitButton';
\ No newline at end of file
diff --git a/exports/splitbutton.js b/exports/splitbutton.js
deleted file mode 100644
index 3cdf199f73..0000000000
--- a/exports/splitbutton.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/splitbutton/SplitButton');
\ No newline at end of file
diff --git a/exports/steps.d.ts b/exports/steps.d.ts
deleted file mode 100644
index b946775a25..0000000000
--- a/exports/steps.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/steps/Steps';
\ No newline at end of file
diff --git a/exports/steps.js b/exports/steps.js
deleted file mode 100644
index 378f38c663..0000000000
--- a/exports/steps.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/steps/Steps');
\ No newline at end of file
diff --git a/exports/tabmenu.d.ts b/exports/tabmenu.d.ts
deleted file mode 100644
index e7cc52ad30..0000000000
--- a/exports/tabmenu.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/tabmenu/TabMenu';
\ No newline at end of file
diff --git a/exports/tabmenu.js b/exports/tabmenu.js
deleted file mode 100644
index d50da77cf8..0000000000
--- a/exports/tabmenu.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/tabmenu/TabMenu');
\ No newline at end of file
diff --git a/exports/tabview.d.ts b/exports/tabview.d.ts
deleted file mode 100644
index e00b6da46b..0000000000
--- a/exports/tabview.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/tabview/TabView';
\ No newline at end of file
diff --git a/exports/tabview.js b/exports/tabview.js
deleted file mode 100644
index fd883ee4a5..0000000000
--- a/exports/tabview.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/tabview/TabView');
\ No newline at end of file
diff --git a/exports/tieredmenu.d.ts b/exports/tieredmenu.d.ts
deleted file mode 100644
index d846a2c650..0000000000
--- a/exports/tieredmenu.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/tieredmenu/TieredMenu';
\ No newline at end of file
diff --git a/exports/tieredmenu.js b/exports/tieredmenu.js
deleted file mode 100644
index 5c91505eb1..0000000000
--- a/exports/tieredmenu.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/tieredmenu/TieredMenu');
\ No newline at end of file
diff --git a/exports/togglebutton.d.ts b/exports/togglebutton.d.ts
deleted file mode 100644
index 267cf0cb27..0000000000
--- a/exports/togglebutton.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/togglebutton/ToggleButton';
\ No newline at end of file
diff --git a/exports/togglebutton.js b/exports/togglebutton.js
deleted file mode 100644
index 68a0bd247b..0000000000
--- a/exports/togglebutton.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/togglebutton/ToggleButton');
\ No newline at end of file
diff --git a/exports/toolbar.d.ts b/exports/toolbar.d.ts
deleted file mode 100644
index 025ed75838..0000000000
--- a/exports/toolbar.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/toolbar/Toolbar';
\ No newline at end of file
diff --git a/exports/toolbar.js b/exports/toolbar.js
deleted file mode 100644
index 0e61ea1133..0000000000
--- a/exports/toolbar.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/toolbar/Toolbar');
\ No newline at end of file
diff --git a/exports/tooltip.d.ts b/exports/tooltip.d.ts
deleted file mode 100644
index a6f60ae7cd..0000000000
--- a/exports/tooltip.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/tooltip/Tooltip';
\ No newline at end of file
diff --git a/exports/tooltip.js b/exports/tooltip.js
deleted file mode 100644
index e4cd4e7ce2..0000000000
--- a/exports/tooltip.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/tooltip/Tooltip');
\ No newline at end of file
diff --git a/exports/tree.d.ts b/exports/tree.d.ts
deleted file mode 100644
index ec5781d50c..0000000000
--- a/exports/tree.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/tree/Tree';
\ No newline at end of file
diff --git a/exports/tree.js b/exports/tree.js
deleted file mode 100644
index 9e6e51c1ea..0000000000
--- a/exports/tree.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/tree/Tree');
\ No newline at end of file
diff --git a/exports/treetable.d.ts b/exports/treetable.d.ts
deleted file mode 100644
index 3e6aa781e2..0000000000
--- a/exports/treetable.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/treetable/TreeTable';
\ No newline at end of file
diff --git a/exports/treetable.js b/exports/treetable.js
deleted file mode 100644
index 8443168677..0000000000
--- a/exports/treetable.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/treetable/TreeTable');
\ No newline at end of file
diff --git a/exports/tristatecheckbox.d.ts b/exports/tristatecheckbox.d.ts
deleted file mode 100644
index cb264acc2a..0000000000
--- a/exports/tristatecheckbox.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/tristatecheckbox/TriStateCheckbox';
\ No newline at end of file
diff --git a/exports/tristatecheckbox.js b/exports/tristatecheckbox.js
deleted file mode 100644
index b2216d4731..0000000000
--- a/exports/tristatecheckbox.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./components/tristatecheckbox/TriStateCheckbox');
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index 47458d7892..67521b759d 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -4,41 +4,81 @@ var gulp = require('gulp'),
     concat = require('gulp-concat'),
     uglifycss = require('gulp-uglifycss'),
     rename = require('gulp-rename'),
-    del = require('del'),
     flatten = require('gulp-flatten');
-    
-gulp.task('build-css', function() {
-    return gulp.src([
-        'src/components/common/Common.css',
-		'src/components/**/*.css'
-    ])
-	.pipe(concat('primereact.css'))
-	.pipe(gulp.dest('resources'))
-    .pipe(uglifycss({"uglyComments": true}))
-    .pipe(rename('primereact.min.css'))
-	.pipe(gulp.dest('resources'));
-});
-
-gulp.task('build-themes', function() {
-    return gulp.src([
-        'public/resources/themes/**/*'
-    ])
-    //.pipe(uglifycss({"uglyComments": true}))
-    .pipe(gulp.dest('resources/themes'));
-})
-
-gulp.task('images', function() {
-    return gulp.src(['src/components/**/images/*.png', 'src/components/**/images/*.gif'])
+
+/** @deprecated */
+gulp.task('build-css', function () {
+    return gulp
+        .src([process.env.INPUT_DIR + 'common/Common.css', process.env.INPUT_DIR + '**/*.css'])
+        .pipe(concat('primereact.css'))
+        .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources'))
+        .pipe(uglifycss({ uglyComments: true }))
+        .pipe(rename('primereact.min.css'))
+        .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources'));
+});
+
+gulp.task('build-primereactcss', function () {
+    return gulp.src(['./styles/primereact.css']).pipe(concat('primereact.css')).pipe(gulp.dest('dist/resources')).pipe(rename('primereact.min.css')).pipe(gulp.dest('dist/resources'));
+});
+
+gulp.task('build-themes', function () {
+    return (
+        gulp
+            .src(['public/themes/**/*'])
+            //.pipe(uglifycss({"uglyComments": true}))
+            .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources/themes'))
+    );
+});
+
+gulp.task('copy-fonts', function () {
+    return gulp.src(['public/themes/**/fonts/*'], { encoding: false }).pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources/themes'));
+});
+
+/** @deprecated */
+gulp.task('images', function () {
+    return gulp
+        .src([process.env.INPUT_DIR + '**/images/*.png', process.env.INPUT_DIR + '**/images/*.gif'])
         .pipe(flatten())
-        .pipe(gulp.dest('resources/images'));
+        .pipe(gulp.dest(process.env.OUTPUT_DIR + 'resources/images'));
 });
 
-gulp.task('build-exports', function() {
-    return gulp.src(['exports/*.js','exports/*.d.ts'])
-        .pipe(gulp.dest('./'));
+gulp.task('build-exports', function () {
+    return gulp.src(['exports/*.js', 'exports/*.d.ts']).pipe(gulp.dest(process.env.OUTPUT_DIR));
 });
 
-//Building project with run sequence
-gulp.task('build-resources', ['build-css','images', 'build-themes']);
+gulp.task('build-meta', function () {
+    return gulp.src(['README.md', 'LICENSE.md']).pipe(gulp.dest(process.env.OUTPUT_DIR));
+});
 
-        
\ No newline at end of file
+/** @deprecated */
+gulp.task('copy-css', function () {
+    return gulp
+        .src([process.env.INPUT_DIR + '**/Common.css', process.env.INPUT_DIR + '**/*.css'])
+        .pipe(uglifycss({ uglyComments: true }))
+        .pipe(
+            rename(function (path) {
+                path.basename = path.basename.toLowerCase();
+                path.extname = '.min' + path.extname;
+            })
+        )
+        .pipe(gulp.dest('./' + process.env.OUTPUT_DIR));
+});
+
+gulp.task('copy-d.ts', function () {
+    return gulp
+        .src(process.env.INPUT_DIR + '**/*.d.ts')
+        .pipe(
+            rename(function (path) {
+                path.basename = path.basename.toLowerCase();
+            })
+        )
+        .pipe(gulp.dest('./' + process.env.OUTPUT_DIR));
+});
+
+gulp.task('copy-package.json', function () {
+    return gulp.src(process.env.INPUT_DIR + '**/package.json').pipe(gulp.dest('./' + process.env.OUTPUT_DIR));
+});
+
+//Building project with run sequence
+gulp.task('copy-files', gulp.series('copy-d.ts', 'copy-package.json'));
+gulp.task('build-resources', gulp.series('build-primereactcss', 'images', 'build-themes', 'copy-fonts', 'build-meta', 'copy-files'));
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000000..806e36ed07
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,19 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+// Add any custom config to be passed to Jest
+/** @type {import('jest').Config} */
+const customJestConfig = {
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000000..2f94694165
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/components/*": ["components/*"],
+            "@/service/*": ["service/*"],
+            "@/data/*": ["data/*"]
+        }
+    },
+    "exclude": ["./node_modules", "./dist"]
+}
diff --git a/next-env.d.ts b/next-env.d.ts
new file mode 100644
index 0000000000..4f11a03dc6
--- /dev/null
+++ b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000000..f587b05b6a
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,25 @@
+module.exports = {
+    reactStrictMode: process.env.NODE_ENV === 'production' ? false : true,
+    trailingSlash: true,
+    publicRuntimeConfig: {
+        appVersion: process.env.npm_package_version || ''
+    },
+    webpack(config) {
+        config.module.rules.push({
+            test: /\.svg$/i,
+            issuer: /\.[jt]sx?$/,
+            use: ['@svgr/webpack']
+        });
+
+        return config;
+    },
+    async redirects() {
+        return [
+            {
+                source: '/setup',
+                destination: '/installation',
+                permanent: true
+            }
+        ];
+    }
+};
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000000..cc6ee9870d
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,16935 @@
+{
+    "name": "primereact",
+    "version": "10.9.7",
+    "lockfileVersion": 3,
+    "requires": true,
+    "packages": {
+        "": {
+            "name": "primereact",
+            "version": "10.9.7",
+            "dependencies": {
+                "@docsearch/react": "3.9.0",
+                "chart.js": "4.5.0",
+                "file-saver": "2.0.5",
+                "fs-extra": "^11.3.2",
+                "jspdf": "3.0.2",
+                "jspdf-autotable": "5.0.2",
+                "next": "12.3.7",
+                "path": "^0.12.7",
+                "primeflex": "3.3.1",
+                "primeicons": "^7.0.0",
+                "quill": "2.0.3",
+                "react": "18.3.1",
+                "react-dom": "18.3.1",
+                "react-transition-group": "^4.4.5",
+                "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
+            },
+            "devDependencies": {
+                "@babel/plugin-proposal-class-properties": "^7.18.6",
+                "@babel/plugin-transform-runtime": "^7.25.4",
+                "@babel/preset-env": "^7.26.0",
+                "@babel/preset-react": "^7.24.7",
+                "@rollup/plugin-alias": "^5.1.1",
+                "@rollup/plugin-babel": "^6.0.4",
+                "@rollup/plugin-commonjs": "^25.0.7",
+                "@rollup/plugin-node-resolve": "^15.3.0",
+                "@rollup/plugin-replace": "^5.0.7",
+                "@stackblitz/sdk": "1.11.0",
+                "@svgr/webpack": "^8.1.0",
+                "@testing-library/jest-dom": "^6.6.3",
+                "@testing-library/react": "^14.1.2",
+                "@testing-library/user-event": "^14.5.2",
+                "@types/node": "^22.7.4",
+                "@types/react": "^18.3.12",
+                "@types/react-dom": "^18.3.0",
+                "@types/react-transition-group": "^4.4.11",
+                "@typescript-eslint/eslint-plugin": "^6.13.1",
+                "eslint": "8.57.0",
+                "eslint-config-next": "14.2.14",
+                "eslint-config-prettier": "^9.1.0",
+                "eslint-plugin-jest-dom": "^5.4.0",
+                "gulp": "^5.0.1",
+                "gulp-concat": "^2.6.1",
+                "gulp-flatten": "^0.4.0",
+                "gulp-rename": "^2.0.0",
+                "gulp-uglify": "^3.0.2",
+                "gulp-uglifycss": "^1.1.0",
+                "jest": "^29.7.0",
+                "jest-environment-jsdom": "^29.7.0",
+                "prettier": "3.5.3",
+                "rollup": "^2.79.2",
+                "rollup-plugin-postcss": "^4.0.2",
+                "rollup-plugin-terser": "^7.0.2",
+                "sass": "^1.79.4",
+                "typedoc": "0.24.8",
+                "typescript": "5.1.6"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@adobe/css-tools": {
+            "version": "4.4.4",
+            "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz",
+            "integrity": "sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@algolia/abtesting": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.3.0.tgz",
+            "integrity": "sha512-KqPVLdVNfoJzX5BKNGM9bsW8saHeyax8kmPFXul5gejrSPN3qss7PgsFH5mMem7oR8tvjvNkia97ljEYPYCN8Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/autocomplete-core": {
+            "version": "1.17.9",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.17.9.tgz",
+            "integrity": "sha512-O7BxrpLDPJWWHv/DLA9DRFWs+iY1uOJZkqUwjS5HSZAGcl0hIVCQ97LTLewiZmZ402JYUrun+8NqFP+hCknlbQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/autocomplete-plugin-algolia-insights": "1.17.9",
+                "@algolia/autocomplete-shared": "1.17.9"
+            }
+        },
+        "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+            "version": "1.17.9",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.9.tgz",
+            "integrity": "sha512-u1fEHkCbWF92DBeB/KHeMacsjsoI0wFhjZtlCq2ddZbAehshbZST6Hs0Avkc0s+4UyBGbMDnSuXHLuvRWK5iDQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/autocomplete-shared": "1.17.9"
+            },
+            "peerDependencies": {
+                "search-insights": ">= 1 < 3"
+            }
+        },
+        "node_modules/@algolia/autocomplete-preset-algolia": {
+            "version": "1.17.9",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.9.tgz",
+            "integrity": "sha512-Na1OuceSJeg8j7ZWn5ssMu/Ax3amtOwk76u4h5J4eK2Nx2KB5qt0Z4cOapCsxot9VcEN11ADV5aUSlQF4RhGjQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/autocomplete-shared": "1.17.9"
+            },
+            "peerDependencies": {
+                "@algolia/client-search": ">= 4.9.1 < 6",
+                "algoliasearch": ">= 4.9.1 < 6"
+            }
+        },
+        "node_modules/@algolia/autocomplete-shared": {
+            "version": "1.17.9",
+            "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.9.tgz",
+            "integrity": "sha512-iDf05JDQ7I0b7JEA/9IektxN/80a2MZ1ToohfmNS3rfeuQnIKI3IJlIafD0xu4StbtQTghx9T3Maa97ytkXenQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@algolia/client-search": ">= 4.9.1 < 6",
+                "algoliasearch": ">= 4.9.1 < 6"
+            }
+        },
+        "node_modules/@algolia/client-abtesting": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.37.0.tgz",
+            "integrity": "sha512-Dp2Zq+x9qQFnuiQhVe91EeaaPxWBhzwQ6QnznZQnH9C1/ei3dvtmAFfFeaTxM6FzfJXDLvVnaQagTYFTQz3R5g==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/client-analytics": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.37.0.tgz",
+            "integrity": "sha512-wyXODDOluKogTuZxRII6mtqhAq4+qUR3zIUJEKTiHLe8HMZFxfUEI4NO2qSu04noXZHbv/sRVdQQqzKh12SZuQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/client-common": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.37.0.tgz",
+            "integrity": "sha512-GylIFlPvLy9OMgFG8JkonIagv3zF+Dx3H401Uo2KpmfMVBBJiGfAb9oYfXtplpRMZnZPxF5FnkWaI/NpVJMC+g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/client-insights": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.37.0.tgz",
+            "integrity": "sha512-T63afO2O69XHKw2+F7mfRoIbmXWGzgpZxgOFAdP3fR4laid7pWBt20P4eJ+Zn23wXS5kC9P2K7Bo3+rVjqnYiw==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/client-personalization": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.37.0.tgz",
+            "integrity": "sha512-1zOIXM98O9zD8bYDCJiUJRC/qNUydGHK/zRK+WbLXrW1SqLFRXECsKZa5KoG166+o5q5upk96qguOtE8FTXDWQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/client-query-suggestions": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.37.0.tgz",
+            "integrity": "sha512-31Nr2xOLBCYVal+OMZn1rp1H4lPs1914Tfr3a34wU/nsWJ+TB3vWjfkUUuuYhWoWBEArwuRzt3YNLn0F/KRVkg==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/client-search": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.37.0.tgz",
+            "integrity": "sha512-DAFVUvEg+u7jUs6BZiVz9zdaUebYULPiQ4LM2R4n8Nujzyj7BZzGr2DCd85ip4p/cx7nAZWKM8pLcGtkTRTdsg==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/ingestion": {
+            "version": "1.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.37.0.tgz",
+            "integrity": "sha512-pkCepBRRdcdd7dTLbFddnu886NyyxmhgqiRcHHaDunvX03Ij4WzvouWrQq7B7iYBjkMQrLS8wQqSP0REfA4W8g==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/monitoring": {
+            "version": "1.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.37.0.tgz",
+            "integrity": "sha512-fNw7pVdyZAAQQCJf1cc/ih4fwrRdQSgKwgor4gchsI/Q/ss9inmC6bl/69jvoRSzgZS9BX4elwHKdo0EfTli3w==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/recommend": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.37.0.tgz",
+            "integrity": "sha512-U+FL5gzN2ldx3TYfQO5OAta2TBuIdabEdFwD5UVfWPsZE5nvOKkc/6BBqP54Z/adW/34c5ZrvvZhlhNTZujJXQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/requester-browser-xhr": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.37.0.tgz",
+            "integrity": "sha512-Ao8GZo8WgWFABrU7iq+JAftXV0t+UcOtCDL4mzHHZ+rQeTTf1TZssr4d0vIuoqkVNnKt9iyZ7T4lQff4ydcTrw==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/requester-fetch": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.37.0.tgz",
+            "integrity": "sha512-H7OJOXrFg5dLcGJ22uxx8eiFId0aB9b0UBhoOi4SMSuDBe6vjJJ/LeZyY25zPaSvkXNBN3vAM+ad6M0h6ha3AA==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@algolia/requester-node-http": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.37.0.tgz",
+            "integrity": "sha512-npZ9aeag4SGTx677eqPL3rkSPlQrnzx/8wNrl1P7GpWq9w/eTmRbOq+wKrJ2r78idlY0MMgmY/mld2tq6dc44g==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/client-common": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/@ampproject/remapping": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+            "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@babel/code-frame": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
+            "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-validator-identifier": "^7.27.1",
+                "js-tokens": "^4.0.0",
+                "picocolors": "^1.1.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/compat-data": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.0.tgz",
+            "integrity": "sha512-60X7qkglvrap8mn1lh2ebxXdZYtUcpd7gsmy9kLaBJ4i/WdY8PqTSdxyA8qraikqKQK5C1KRBKXqznrVapyNaw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/core": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz",
+            "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@ampproject/remapping": "^2.2.0",
+                "@babel/code-frame": "^7.27.1",
+                "@babel/generator": "^7.28.3",
+                "@babel/helper-compilation-targets": "^7.27.2",
+                "@babel/helper-module-transforms": "^7.28.3",
+                "@babel/helpers": "^7.28.3",
+                "@babel/parser": "^7.28.3",
+                "@babel/template": "^7.27.2",
+                "@babel/traverse": "^7.28.3",
+                "@babel/types": "^7.28.2",
+                "convert-source-map": "^2.0.0",
+                "debug": "^4.1.0",
+                "gensync": "^1.0.0-beta.2",
+                "json5": "^2.2.3",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/babel"
+            }
+        },
+        "node_modules/@babel/generator": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
+            "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.28.3",
+                "@babel/types": "^7.28.2",
+                "@jridgewell/gen-mapping": "^0.3.12",
+                "@jridgewell/trace-mapping": "^0.3.28",
+                "jsesc": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-annotate-as-pure": {
+            "version": "7.27.3",
+            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.27.3.tgz",
+            "integrity": "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.27.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-compilation-targets": {
+            "version": "7.27.2",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz",
+            "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/compat-data": "^7.27.2",
+                "@babel/helper-validator-option": "^7.27.1",
+                "browserslist": "^4.24.0",
+                "lru-cache": "^5.1.1",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-create-class-features-plugin": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.28.3.tgz",
+            "integrity": "sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.3",
+                "@babel/helper-member-expression-to-functions": "^7.27.1",
+                "@babel/helper-optimise-call-expression": "^7.27.1",
+                "@babel/helper-replace-supers": "^7.27.1",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+                "@babel/traverse": "^7.28.3",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-create-regexp-features-plugin": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.27.1.tgz",
+            "integrity": "sha512-uVDC72XVf8UbrH5qQTc18Agb8emwjTiZrQE11Nv3CuBEZmVvTwwE9CBUEvHku06gQCAyYf8Nv6ja1IN+6LMbxQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.1",
+                "regexpu-core": "^6.2.0",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-define-polyfill-provider": {
+            "version": "0.6.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.5.tgz",
+            "integrity": "sha512-uJnGFcPsWQK8fvjgGP5LZUZZsYGIoPeRjSF5PGwrelYgq7Q15/Ft9NGFp1zglwgIv//W0uG4BevRuSJRyylZPg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-compilation-targets": "^7.27.2",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "debug": "^4.4.1",
+                "lodash.debounce": "^4.0.8",
+                "resolve": "^1.22.10"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+            }
+        },
+        "node_modules/@babel/helper-globals": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+            "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-member-expression-to-functions": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.27.1.tgz",
+            "integrity": "sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/traverse": "^7.27.1",
+                "@babel/types": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-module-imports": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
+            "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/traverse": "^7.27.1",
+                "@babel/types": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-module-transforms": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz",
+            "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.27.1",
+                "@babel/helper-validator-identifier": "^7.27.1",
+                "@babel/traverse": "^7.28.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-optimise-call-expression": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.27.1.tgz",
+            "integrity": "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-plugin-utils": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
+            "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-remap-async-to-generator": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.27.1.tgz",
+            "integrity": "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.1",
+                "@babel/helper-wrap-function": "^7.27.1",
+                "@babel/traverse": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-replace-supers": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.27.1.tgz",
+            "integrity": "sha512-7EHz6qDZc8RYS5ElPoShMheWvEgERonFCs7IAonWLLUTXW59DP14bCZt89/GKyreYn8g3S83m21FelHKbeDCKA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-member-expression-to-functions": "^7.27.1",
+                "@babel/helper-optimise-call-expression": "^7.27.1",
+                "@babel/traverse": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.27.1.tgz",
+            "integrity": "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/traverse": "^7.27.1",
+                "@babel/types": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-string-parser": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+            "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-identifier": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
+            "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-validator-option": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+            "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-wrap-function": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.28.3.tgz",
+            "integrity": "sha512-zdf983tNfLZFletc0RRXYrHrucBEg95NIFMkn6K9dbeMYnsgHaSBGcQqdsCSStG2PYwRre0Qc2NNSCXbG+xc6g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/template": "^7.27.2",
+                "@babel/traverse": "^7.28.3",
+                "@babel/types": "^7.28.2"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helpers": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.3.tgz",
+            "integrity": "sha512-PTNtvUQihsAsDHMOP5pfobP8C6CM4JWXmP8DrEIt46c3r2bf87Ua1zoqevsMo9g+tWDwgWrFP5EIxuBx5RudAw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/template": "^7.27.2",
+                "@babel/types": "^7.28.2"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/parser": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz",
+            "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.28.2"
+            },
+            "bin": {
+                "parser": "bin/babel-parser.js"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.27.1.tgz",
+            "integrity": "sha512-QPG3C9cCVRQLxAVwmefEmwdTanECuUBMQZ/ym5kiw3XKCGA7qkuQLcjWWHcrD/GKbn/WmJwaezfuuAOcyKlRPA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/traverse": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.27.1.tgz",
+            "integrity": "sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.27.1.tgz",
+            "integrity": "sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.27.1.tgz",
+            "integrity": "sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+                "@babel/plugin-transform-optional-chaining": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.13.0"
+            }
+        },
+        "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.28.3.tgz",
+            "integrity": "sha512-b6YTX108evsvE4YgWyQ921ZAFFQm3Bn+CA3+ZXlNVnPhx+UfsVURoPjfGAPCjBgrqo30yX/C2nZGX96DxvR9Iw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/traverse": "^7.28.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-proposal-class-properties": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz",
+            "integrity": "sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==",
+            "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-class-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-proposal-private-property-in-object": {
+            "version": "7.21.0-placeholder-for-preset-env.2",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+            "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-async-generators": {
+            "version": "7.8.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+            "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-bigint": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
+            "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-class-properties": {
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+            "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.12.13"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-class-static-block": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+            "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-import-assertions": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.27.1.tgz",
+            "integrity": "sha512-UT/Jrhw57xg4ILHLFnzFpPDlMbcdEicaAtjPQpbj9wa8T4r5KVWCimHcL/460g8Ht0DMxDyjsLgiWSkVjnwPFg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-import-attributes": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.27.1.tgz",
+            "integrity": "sha512-oFT0FrKHgF53f4vOsZGi2Hh3I35PfSmVs4IBFLFj4dnafP+hIWDLg3VyKmUHfLoLHlyxY4C7DGtmHuJgn+IGww==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-import-meta": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+            "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-json-strings": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+            "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-jsx": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.27.1.tgz",
+            "integrity": "sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+            "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+            "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-numeric-separator": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+            "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-object-rest-spread": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+            "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+            "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-optional-chaining": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+            "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-private-property-in-object": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+            "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-top-level-await": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+            "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-typescript": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.27.1.tgz",
+            "integrity": "sha512-xfYCBMxveHrRMnAWl1ZlPXOZjzkN82THFvLhQhFXFt81Z5HnN+EtUkZhv/zcKpmT3fzmWZB0ywiBrbC3vogbwQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+            "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-arrow-functions": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.27.1.tgz",
+            "integrity": "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-async-generator-functions": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.28.0.tgz",
+            "integrity": "sha512-BEOdvX4+M765icNPZeidyADIvQ1m1gmunXufXxvRESy/jNNyfovIqUyE7MVgGBjWktCoJlzvFA1To2O4ymIO3Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-remap-async-to-generator": "^7.27.1",
+                "@babel/traverse": "^7.28.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-async-to-generator": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.27.1.tgz",
+            "integrity": "sha512-NREkZsZVJS4xmTr8qzE5y8AfIPqsdQfRuUiLRTEzb7Qii8iFWCyDKaUV2c0rCuh4ljDZ98ALHP/PetiBV2nddA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-remap-async-to-generator": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-block-scoped-functions": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.27.1.tgz",
+            "integrity": "sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-block-scoping": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.28.0.tgz",
+            "integrity": "sha512-gKKnwjpdx5sER/wl0WN0efUBFzF/56YZO0RJrSYP4CljXnP31ByY7fol89AzomdlLNzI36AvOTmYHsnZTCkq8Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-class-properties": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.27.1.tgz",
+            "integrity": "sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-class-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-class-static-block": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.28.3.tgz",
+            "integrity": "sha512-LtPXlBbRoc4Njl/oh1CeD/3jC+atytbnf/UqLoqTDcEYGUPj022+rvfkbDYieUrSj3CaV4yHDByPE+T2HwfsJg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-class-features-plugin": "^7.28.3",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.12.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-classes": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.28.3.tgz",
+            "integrity": "sha512-DoEWC5SuxuARF2KdKmGUq3ghfPMO6ZzR12Dnp5gubwbeWJo4dbNWXJPVlwvh4Zlq6Z7YVvL8VFxeSOJgjsx4Sg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.3",
+                "@babel/helper-compilation-targets": "^7.27.2",
+                "@babel/helper-globals": "^7.28.0",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-replace-supers": "^7.27.1",
+                "@babel/traverse": "^7.28.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-computed-properties": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.27.1.tgz",
+            "integrity": "sha512-lj9PGWvMTVksbWiDT2tW68zGS/cyo4AkZ/QTp0sQT0mjPopCmrSkzxeXkznjqBxzDI6TclZhOJbBmbBLjuOZUw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/template": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-destructuring": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.28.0.tgz",
+            "integrity": "sha512-v1nrSMBiKcodhsyJ4Gf+Z0U/yawmJDBOTpEB3mcQY52r9RIyPneGyAS/yM6seP/8I+mWI3elOMtT5dB8GJVs+A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/traverse": "^7.28.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-dotall-regex": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.27.1.tgz",
+            "integrity": "sha512-gEbkDVGRvjj7+T1ivxrfgygpT7GUd4vmODtYpbs0gZATdkX8/iSnOtZSxiZnsgm1YjTgjI6VKBGSJJevkrclzw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-duplicate-keys": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.27.1.tgz",
+            "integrity": "sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.27.1.tgz",
+            "integrity": "sha512-hkGcueTEzuhB30B3eJCbCYeCaaEQOmQR0AdvzpD4LoN0GXMWzzGSuRrxR2xTnCrvNbVwK9N6/jQ92GSLfiZWoQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-dynamic-import": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.27.1.tgz",
+            "integrity": "sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-explicit-resource-management": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.28.0.tgz",
+            "integrity": "sha512-K8nhUcn3f6iB+P3gwCv/no7OdzOZQcKchW6N389V6PD8NUWKZHzndOd9sPDVbMoBsbmjMqlB4L9fm+fEFNVlwQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/plugin-transform-destructuring": "^7.28.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-exponentiation-operator": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.27.1.tgz",
+            "integrity": "sha512-uspvXnhHvGKf2r4VVtBpeFnuDWsJLQ6MF6lGJLC89jBR1uoVeqM416AZtTuhTezOfgHicpJQmoD5YUakO/YmXQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-export-namespace-from": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.27.1.tgz",
+            "integrity": "sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-for-of": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.27.1.tgz",
+            "integrity": "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-function-name": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.27.1.tgz",
+            "integrity": "sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-compilation-targets": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/traverse": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-json-strings": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.27.1.tgz",
+            "integrity": "sha512-6WVLVJiTjqcQauBhn1LkICsR2H+zm62I3h9faTDKt1qP4jn2o72tSvqMwtGFKGTpojce0gJs+76eZ2uCHRZh0Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-literals": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.27.1.tgz",
+            "integrity": "sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.27.1.tgz",
+            "integrity": "sha512-SJvDs5dXxiae4FbSL1aBJlG4wvl594N6YEVVn9e3JGulwioy6z3oPjx/sQBO3Y4NwUu5HNix6KJ3wBZoewcdbw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-member-expression-literals": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.27.1.tgz",
+            "integrity": "sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-amd": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.27.1.tgz",
+            "integrity": "sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-transforms": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-commonjs": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.27.1.tgz",
+            "integrity": "sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-transforms": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-systemjs": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.27.1.tgz",
+            "integrity": "sha512-w5N1XzsRbc0PQStASMksmUeqECuzKuTJer7kFagK8AXgpCMkeDMO5S+aaFb7A51ZYDF7XI34qsTX+fkHiIm5yA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-transforms": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-validator-identifier": "^7.27.1",
+                "@babel/traverse": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-umd": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.27.1.tgz",
+            "integrity": "sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-transforms": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.27.1.tgz",
+            "integrity": "sha512-SstR5JYy8ddZvD6MhV0tM/j16Qds4mIpJTOd1Yu9J9pJjH93bxHECF7pgtc28XvkzTD6Pxcm/0Z73Hvk7kb3Ng==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-new-target": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.27.1.tgz",
+            "integrity": "sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.27.1.tgz",
+            "integrity": "sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-numeric-separator": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.27.1.tgz",
+            "integrity": "sha512-fdPKAcujuvEChxDBJ5c+0BTaS6revLV7CJL08e4m3de8qJfNIuCc2nc7XJYOjBoTMJeqSmwXJ0ypE14RCjLwaw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-object-rest-spread": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.28.0.tgz",
+            "integrity": "sha512-9VNGikXxzu5eCiQjdE4IZn8sb9q7Xsk5EXLDBKUYg1e/Tve8/05+KJEtcxGxAgCY5t/BpKQM+JEL/yT4tvgiUA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-compilation-targets": "^7.27.2",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/plugin-transform-destructuring": "^7.28.0",
+                "@babel/plugin-transform-parameters": "^7.27.7",
+                "@babel/traverse": "^7.28.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-object-super": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.27.1.tgz",
+            "integrity": "sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-replace-supers": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-optional-catch-binding": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.27.1.tgz",
+            "integrity": "sha512-txEAEKzYrHEX4xSZN4kJ+OfKXFVSWKB2ZxM9dpcE3wT7smwkNmXo5ORRlVzMVdJbD+Q8ILTgSD7959uj+3Dm3Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-optional-chaining": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.27.1.tgz",
+            "integrity": "sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-parameters": {
+            "version": "7.27.7",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.27.7.tgz",
+            "integrity": "sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-private-methods": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.27.1.tgz",
+            "integrity": "sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-class-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-private-property-in-object": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.27.1.tgz",
+            "integrity": "sha512-5J+IhqTi1XPa0DXF83jYOaARrX+41gOewWbkPyjMNRDqgOCqdffGh8L3f/Ek5utaEBZExjSAzcyjmV9SSAWObQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.1",
+                "@babel/helper-create-class-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-property-literals": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.27.1.tgz",
+            "integrity": "sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-constant-elements": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.27.1.tgz",
+            "integrity": "sha512-edoidOjl/ZxvYo4lSBOQGDSyToYVkTAwyVoa2tkuYTSmjrB1+uAedoL5iROVLXkxH+vRgA7uP4tMg2pUJpZ3Ug==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-display-name": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.28.0.tgz",
+            "integrity": "sha512-D6Eujc2zMxKjfa4Zxl4GHMsmhKKZ9VpcqIchJLvwTxad9zWIYulwYItBovpDOoNLISpcZSXoDJ5gaGbQUDqViA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-jsx": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.27.1.tgz",
+            "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.1",
+                "@babel/helper-module-imports": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/plugin-syntax-jsx": "^7.27.1",
+                "@babel/types": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-jsx-development": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.27.1.tgz",
+            "integrity": "sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/plugin-transform-react-jsx": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-react-pure-annotations": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.27.1.tgz",
+            "integrity": "sha512-JfuinvDOsD9FVMTHpzA/pBLisxpv1aSf+OIV8lgH3MuWrks19R27e6a6DipIg4aX1Zm9Wpb04p8wljfKrVSnPA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-regenerator": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.28.3.tgz",
+            "integrity": "sha512-K3/M/a4+ESb5LEldjQb+XSrpY0nF+ZBFlTCbSnKaYAMfD8v33O6PMs4uYnOk19HlcsI8WMu3McdFPTiQHF/1/A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-regexp-modifiers": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.27.1.tgz",
+            "integrity": "sha512-TtEciroaiODtXvLZv4rmfMhkCv8jx3wgKpL68PuiPh2M4fvz5jhsA7697N1gMvkvr/JTF13DrFYyEbY9U7cVPA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-reserved-words": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.27.1.tgz",
+            "integrity": "sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-runtime": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.28.3.tgz",
+            "integrity": "sha512-Y6ab1kGqZ0u42Zv/4a7l0l72n9DKP/MKoKWaUSBylrhNZO2prYuqFOLbn5aW5SIFXwSH93yfjbgllL8lxuGKLg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "babel-plugin-polyfill-corejs2": "^0.4.14",
+                "babel-plugin-polyfill-corejs3": "^0.13.0",
+                "babel-plugin-polyfill-regenerator": "^0.6.5",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-shorthand-properties": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.27.1.tgz",
+            "integrity": "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-spread": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.27.1.tgz",
+            "integrity": "sha512-kpb3HUqaILBJcRFVhFUs6Trdd4mkrzcGXss+6/mxUd273PfbWqSDHRzMT2234gIg2QYfAjvXLSquP1xECSg09Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-sticky-regex": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.27.1.tgz",
+            "integrity": "sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-template-literals": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.27.1.tgz",
+            "integrity": "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-typeof-symbol": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.1.tgz",
+            "integrity": "sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-typescript": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.28.0.tgz",
+            "integrity": "sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.27.3",
+                "@babel/helper-create-class-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1",
+                "@babel/plugin-syntax-typescript": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-unicode-escapes": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.27.1.tgz",
+            "integrity": "sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-unicode-property-regex": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.27.1.tgz",
+            "integrity": "sha512-uW20S39PnaTImxp39O5qFlHLS9LJEmANjMG7SxIhap8rCHqu0Ik+tLEPX5DKmHn6CsWQ7j3lix2tFOa5YtL12Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-unicode-regex": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.27.1.tgz",
+            "integrity": "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.27.1.tgz",
+            "integrity": "sha512-EtkOujbc4cgvb0mlpQefi4NTPBzhSIevblFevACNLUspmrALgmEBdL/XfnyyITfd8fKBZrZys92zOWcik7j9Tw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.27.1",
+                "@babel/helper-plugin-utils": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/preset-env": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.28.3.tgz",
+            "integrity": "sha512-ROiDcM+GbYVPYBOeCR6uBXKkQpBExLl8k9HO1ygXEyds39j+vCCsjmj7S8GOniZQlEs81QlkdJZe76IpLSiqpg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/compat-data": "^7.28.0",
+                "@babel/helper-compilation-targets": "^7.27.2",
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-validator-option": "^7.27.1",
+                "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.27.1",
+                "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
+                "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
+                "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
+                "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.3",
+                "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+                "@babel/plugin-syntax-import-assertions": "^7.27.1",
+                "@babel/plugin-syntax-import-attributes": "^7.27.1",
+                "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+                "@babel/plugin-transform-arrow-functions": "^7.27.1",
+                "@babel/plugin-transform-async-generator-functions": "^7.28.0",
+                "@babel/plugin-transform-async-to-generator": "^7.27.1",
+                "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
+                "@babel/plugin-transform-block-scoping": "^7.28.0",
+                "@babel/plugin-transform-class-properties": "^7.27.1",
+                "@babel/plugin-transform-class-static-block": "^7.28.3",
+                "@babel/plugin-transform-classes": "^7.28.3",
+                "@babel/plugin-transform-computed-properties": "^7.27.1",
+                "@babel/plugin-transform-destructuring": "^7.28.0",
+                "@babel/plugin-transform-dotall-regex": "^7.27.1",
+                "@babel/plugin-transform-duplicate-keys": "^7.27.1",
+                "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.27.1",
+                "@babel/plugin-transform-dynamic-import": "^7.27.1",
+                "@babel/plugin-transform-explicit-resource-management": "^7.28.0",
+                "@babel/plugin-transform-exponentiation-operator": "^7.27.1",
+                "@babel/plugin-transform-export-namespace-from": "^7.27.1",
+                "@babel/plugin-transform-for-of": "^7.27.1",
+                "@babel/plugin-transform-function-name": "^7.27.1",
+                "@babel/plugin-transform-json-strings": "^7.27.1",
+                "@babel/plugin-transform-literals": "^7.27.1",
+                "@babel/plugin-transform-logical-assignment-operators": "^7.27.1",
+                "@babel/plugin-transform-member-expression-literals": "^7.27.1",
+                "@babel/plugin-transform-modules-amd": "^7.27.1",
+                "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+                "@babel/plugin-transform-modules-systemjs": "^7.27.1",
+                "@babel/plugin-transform-modules-umd": "^7.27.1",
+                "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1",
+                "@babel/plugin-transform-new-target": "^7.27.1",
+                "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
+                "@babel/plugin-transform-numeric-separator": "^7.27.1",
+                "@babel/plugin-transform-object-rest-spread": "^7.28.0",
+                "@babel/plugin-transform-object-super": "^7.27.1",
+                "@babel/plugin-transform-optional-catch-binding": "^7.27.1",
+                "@babel/plugin-transform-optional-chaining": "^7.27.1",
+                "@babel/plugin-transform-parameters": "^7.27.7",
+                "@babel/plugin-transform-private-methods": "^7.27.1",
+                "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+                "@babel/plugin-transform-property-literals": "^7.27.1",
+                "@babel/plugin-transform-regenerator": "^7.28.3",
+                "@babel/plugin-transform-regexp-modifiers": "^7.27.1",
+                "@babel/plugin-transform-reserved-words": "^7.27.1",
+                "@babel/plugin-transform-shorthand-properties": "^7.27.1",
+                "@babel/plugin-transform-spread": "^7.27.1",
+                "@babel/plugin-transform-sticky-regex": "^7.27.1",
+                "@babel/plugin-transform-template-literals": "^7.27.1",
+                "@babel/plugin-transform-typeof-symbol": "^7.27.1",
+                "@babel/plugin-transform-unicode-escapes": "^7.27.1",
+                "@babel/plugin-transform-unicode-property-regex": "^7.27.1",
+                "@babel/plugin-transform-unicode-regex": "^7.27.1",
+                "@babel/plugin-transform-unicode-sets-regex": "^7.27.1",
+                "@babel/preset-modules": "0.1.6-no-external-plugins",
+                "babel-plugin-polyfill-corejs2": "^0.4.14",
+                "babel-plugin-polyfill-corejs3": "^0.13.0",
+                "babel-plugin-polyfill-regenerator": "^0.6.5",
+                "core-js-compat": "^3.43.0",
+                "semver": "^6.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/preset-modules": {
+            "version": "0.1.6-no-external-plugins",
+            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz",
+            "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.0.0",
+                "@babel/types": "^7.4.4",
+                "esutils": "^2.0.2"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
+            }
+        },
+        "node_modules/@babel/preset-react": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.27.1.tgz",
+            "integrity": "sha512-oJHWh2gLhU9dW9HHr42q0cI0/iHHXTLGe39qvpAZZzagHy0MzYLCnCVV0symeRvzmjHyVU7mw2K06E6u/JwbhA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-validator-option": "^7.27.1",
+                "@babel/plugin-transform-react-display-name": "^7.27.1",
+                "@babel/plugin-transform-react-jsx": "^7.27.1",
+                "@babel/plugin-transform-react-jsx-development": "^7.27.1",
+                "@babel/plugin-transform-react-pure-annotations": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/preset-typescript": {
+            "version": "7.27.1",
+            "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.1.tgz",
+            "integrity": "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.27.1",
+                "@babel/helper-validator-option": "^7.27.1",
+                "@babel/plugin-syntax-jsx": "^7.27.1",
+                "@babel/plugin-transform-modules-commonjs": "^7.27.1",
+                "@babel/plugin-transform-typescript": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/runtime": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
+            "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/template": {
+            "version": "7.27.2",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
+            "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.27.1",
+                "@babel/parser": "^7.27.2",
+                "@babel/types": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/traverse": {
+            "version": "7.28.3",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.3.tgz",
+            "integrity": "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.27.1",
+                "@babel/generator": "^7.28.3",
+                "@babel/helper-globals": "^7.28.0",
+                "@babel/parser": "^7.28.3",
+                "@babel/template": "^7.27.2",
+                "@babel/types": "^7.28.2",
+                "debug": "^4.3.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/types": {
+            "version": "7.28.2",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
+            "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-string-parser": "^7.27.1",
+                "@babel/helper-validator-identifier": "^7.27.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@bcoe/v8-coverage": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+            "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@docsearch/css": {
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.9.0.tgz",
+            "integrity": "sha512-cQbnVbq0rrBwNAKegIac/t6a8nWoUAn8frnkLFW6YARaRmAQr5/Eoe6Ln2fqkUCZ40KpdrKbpSAmgrkviOxuWA==",
+            "license": "MIT"
+        },
+        "node_modules/@docsearch/react": {
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.9.0.tgz",
+            "integrity": "sha512-mb5FOZYZIkRQ6s/NWnM98k879vu5pscWqTLubLFBO87igYYT4VzVazh4h5o/zCvTIZgEt3PvsCOMOswOUo9yHQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/autocomplete-core": "1.17.9",
+                "@algolia/autocomplete-preset-algolia": "1.17.9",
+                "@docsearch/css": "3.9.0",
+                "algoliasearch": "^5.14.2"
+            },
+            "peerDependencies": {
+                "@types/react": ">= 16.8.0 < 20.0.0",
+                "react": ">= 16.8.0 < 20.0.0",
+                "react-dom": ">= 16.8.0 < 20.0.0",
+                "search-insights": ">= 1 < 3"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "react-dom": {
+                    "optional": true
+                },
+                "search-insights": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@emnapi/core": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
+            "integrity": "sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@emnapi/wasi-threads": "1.1.0",
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@emnapi/runtime": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.5.0.tgz",
+            "integrity": "sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@emnapi/wasi-threads": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+            "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@eslint-community/eslint-utils": {
+            "version": "4.8.0",
+            "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.8.0.tgz",
+            "integrity": "sha512-MJQFqrZgcW0UNYLGOuQpey/oTN59vyWwplvCGZztn1cKz9agZPPYpJB7h2OMmuu7VLqkvEjN8feFZJmxNF9D+Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "eslint-visitor-keys": "^3.4.3"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+            }
+        },
+        "node_modules/@eslint-community/regexpp": {
+            "version": "4.12.1",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+            "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+            }
+        },
+        "node_modules/@eslint/eslintrc": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+            "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ajv": "^6.12.4",
+                "debug": "^4.3.2",
+                "espree": "^9.6.0",
+                "globals": "^13.19.0",
+                "ignore": "^5.2.0",
+                "import-fresh": "^3.2.1",
+                "js-yaml": "^4.1.0",
+                "minimatch": "^3.1.2",
+                "strip-json-comments": "^3.1.1"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/@eslint/js": {
+            "version": "8.57.0",
+            "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+            "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            }
+        },
+        "node_modules/@gulpjs/messages": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@gulpjs/messages/-/messages-1.1.0.tgz",
+            "integrity": "sha512-Ys9sazDatyTgZVb4xPlDufLweJ/Os2uHWOv+Caxvy2O85JcnT4M3vc73bi8pdLWlv3fdWQz3pdI9tVwo8rQQSg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/@gulpjs/to-absolute-glob": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@gulpjs/to-absolute-glob/-/to-absolute-glob-4.0.0.tgz",
+            "integrity": "sha512-kjotm7XJrJ6v+7knhPaRgaT6q8F8K2jiafwYdNHLzmV0uGLuZY43FK6smNSHUPrhq5kX2slCUy+RGG/xGqmIKA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-negated-glob": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/@humanwhocodes/config-array": {
+            "version": "0.11.14",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+            "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
+            "deprecated": "Use @eslint/config-array instead",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "@humanwhocodes/object-schema": "^2.0.2",
+                "debug": "^4.3.1",
+                "minimatch": "^3.0.5"
+            },
+            "engines": {
+                "node": ">=10.10.0"
+            }
+        },
+        "node_modules/@humanwhocodes/config-array/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/@humanwhocodes/config-array/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/@humanwhocodes/module-importer": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+            "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=12.22"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/nzakas"
+            }
+        },
+        "node_modules/@humanwhocodes/object-schema": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
+            "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
+            "deprecated": "Use @eslint/object-schema instead",
+            "dev": true,
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/@isaacs/cliui": {
+            "version": "8.0.2",
+            "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+            "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "string-width": "^5.1.2",
+                "string-width-cjs": "npm:string-width@^4.2.0",
+                "strip-ansi": "^7.0.1",
+                "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+                "wrap-ansi": "^8.1.0",
+                "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.0.tgz",
+            "integrity": "sha512-TKY5pyBkHyADOPYlRT9Lx6F544mPl0vS5Ew7BJ45hA08Q+t3GjbueLliBWN3sMICk6+y7HdyxSzC4bWS8baBdg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+            }
+        },
+        "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
+            "version": "6.2.1",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+            "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/@isaacs/cliui/node_modules/string-width": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+            "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "eastasianwidth": "^0.2.0",
+                "emoji-regex": "^9.2.2",
+                "strip-ansi": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+            "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+            }
+        },
+        "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+            "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^6.1.0",
+                "string-width": "^5.0.1",
+                "strip-ansi": "^7.0.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
+            "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "camelcase": "^5.3.1",
+                "find-up": "^4.1.0",
+                "get-package-type": "^0.1.0",
+                "js-yaml": "^3.13.1",
+                "resolve-from": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+            "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "sprintf-js": "~1.0.2"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+            "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/find-up": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+            "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "locate-path": "^5.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+            "version": "3.14.2",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.2.tgz",
+            "integrity": "sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "argparse": "^1.0.7",
+                "esprima": "^4.0.0"
+            },
+            "bin": {
+                "js-yaml": "bin/js-yaml.js"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+            "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-locate": "^4.1.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/p-limit": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+            "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-try": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/p-locate": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+            "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-limit": "^2.2.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+            "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@istanbuljs/schema": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
+            "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/@jest/console": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/console/-/console-29.7.0.tgz",
+            "integrity": "sha512-5Ni4CU7XHQi32IJ398EEP4RrB8eV09sXP2ROqD4bksHrnTree52PsxvX8tpL8LvTZ3pFzXyPbNQReSN41CAhOg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "chalk": "^4.0.0",
+                "jest-message-util": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/core": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/core/-/core-29.7.0.tgz",
+            "integrity": "sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/console": "^29.7.0",
+                "@jest/reporters": "^29.7.0",
+                "@jest/test-result": "^29.7.0",
+                "@jest/transform": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "ansi-escapes": "^4.2.1",
+                "chalk": "^4.0.0",
+                "ci-info": "^3.2.0",
+                "exit": "^0.1.2",
+                "graceful-fs": "^4.2.9",
+                "jest-changed-files": "^29.7.0",
+                "jest-config": "^29.7.0",
+                "jest-haste-map": "^29.7.0",
+                "jest-message-util": "^29.7.0",
+                "jest-regex-util": "^29.6.3",
+                "jest-resolve": "^29.7.0",
+                "jest-resolve-dependencies": "^29.7.0",
+                "jest-runner": "^29.7.0",
+                "jest-runtime": "^29.7.0",
+                "jest-snapshot": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "jest-validate": "^29.7.0",
+                "jest-watcher": "^29.7.0",
+                "micromatch": "^4.0.4",
+                "pretty-format": "^29.7.0",
+                "slash": "^3.0.0",
+                "strip-ansi": "^6.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+            },
+            "peerDependenciesMeta": {
+                "node-notifier": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@jest/core/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/@jest/core/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/core/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@jest/environment": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-29.7.0.tgz",
+            "integrity": "sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/fake-timers": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "jest-mock": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/expect": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/expect/-/expect-29.7.0.tgz",
+            "integrity": "sha512-8uMeAMycttpva3P1lBHB8VciS9V0XAr3GymPpipdyQXbBcuhkLQOSe8E/p92RyAdToS6ZD1tFkX+CkhoECE0dQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "expect": "^29.7.0",
+                "jest-snapshot": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/expect-utils": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/expect-utils/-/expect-utils-29.7.0.tgz",
+            "integrity": "sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "jest-get-type": "^29.6.3"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/fake-timers": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-29.7.0.tgz",
+            "integrity": "sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "@sinonjs/fake-timers": "^10.0.2",
+                "@types/node": "*",
+                "jest-message-util": "^29.7.0",
+                "jest-mock": "^29.7.0",
+                "jest-util": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/globals": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-29.7.0.tgz",
+            "integrity": "sha512-mpiz3dutLbkW2MNFubUGUEVLkTGiqW6yLVTA+JbP6fI6J5iL9Y0Nlg8k95pcF8ctKwCS7WVxteBs29hhfAotzQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/environment": "^29.7.0",
+                "@jest/expect": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "jest-mock": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/reporters": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-29.7.0.tgz",
+            "integrity": "sha512-DApq0KJbJOEzAFYjHADNNxAE3KbhxQB1y5Kplb5Waqw6zVbuWatSnMjE5gs8FUgEPmNsnZA3NCWl9NG0ia04Pg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@bcoe/v8-coverage": "^0.2.3",
+                "@jest/console": "^29.7.0",
+                "@jest/test-result": "^29.7.0",
+                "@jest/transform": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@jridgewell/trace-mapping": "^0.3.18",
+                "@types/node": "*",
+                "chalk": "^4.0.0",
+                "collect-v8-coverage": "^1.0.0",
+                "exit": "^0.1.2",
+                "glob": "^7.1.3",
+                "graceful-fs": "^4.2.9",
+                "istanbul-lib-coverage": "^3.0.0",
+                "istanbul-lib-instrument": "^6.0.0",
+                "istanbul-lib-report": "^3.0.0",
+                "istanbul-lib-source-maps": "^4.0.0",
+                "istanbul-reports": "^3.1.3",
+                "jest-message-util": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "jest-worker": "^29.7.0",
+                "slash": "^3.0.0",
+                "string-length": "^4.0.1",
+                "strip-ansi": "^6.0.0",
+                "v8-to-istanbul": "^9.0.1"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+            },
+            "peerDependenciesMeta": {
+                "node-notifier": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@jest/reporters/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/@jest/reporters/node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "deprecated": "Glob versions prior to v9 are no longer supported",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/@jest/reporters/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/@jest/schemas": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz",
+            "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@sinclair/typebox": "^0.27.8"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/source-map": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-29.6.3.tgz",
+            "integrity": "sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/trace-mapping": "^0.3.18",
+                "callsites": "^3.0.0",
+                "graceful-fs": "^4.2.9"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/test-result": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-29.7.0.tgz",
+            "integrity": "sha512-Fdx+tv6x1zlkJPcWXmMDAG2HBnaR9XPSd5aDWQVsfrZmLVT3lU1cwyxLgRmXR9yrq4NBoEm9BMsfgFzTQAbJYA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/console": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/istanbul-lib-coverage": "^2.0.0",
+                "collect-v8-coverage": "^1.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/test-sequencer": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-29.7.0.tgz",
+            "integrity": "sha512-GQwJ5WZVrKnOJuiYiAF52UNUJXgTZx1NHjFSEB0qEMmSZKAkdMoIzw/Cj6x6NF4AvV23AUqDpFzQkN/eYCYTxw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/test-result": "^29.7.0",
+                "graceful-fs": "^4.2.9",
+                "jest-haste-map": "^29.7.0",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/transform": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-29.7.0.tgz",
+            "integrity": "sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/core": "^7.11.6",
+                "@jest/types": "^29.6.3",
+                "@jridgewell/trace-mapping": "^0.3.18",
+                "babel-plugin-istanbul": "^6.1.1",
+                "chalk": "^4.0.0",
+                "convert-source-map": "^2.0.0",
+                "fast-json-stable-stringify": "^2.1.0",
+                "graceful-fs": "^4.2.9",
+                "jest-haste-map": "^29.7.0",
+                "jest-regex-util": "^29.6.3",
+                "jest-util": "^29.7.0",
+                "micromatch": "^4.0.4",
+                "pirates": "^4.0.4",
+                "slash": "^3.0.0",
+                "write-file-atomic": "^4.0.2"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jest/types": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
+            "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "@types/istanbul-lib-coverage": "^2.0.0",
+                "@types/istanbul-reports": "^3.0.0",
+                "@types/node": "*",
+                "@types/yargs": "^17.0.8",
+                "chalk": "^4.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/@jridgewell/gen-mapping": {
+            "version": "0.3.13",
+            "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+            "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.5.0",
+                "@jridgewell/trace-mapping": "^0.3.24"
+            }
+        },
+        "node_modules/@jridgewell/resolve-uri": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+            "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/@jridgewell/source-map": {
+            "version": "0.3.11",
+            "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+            "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/gen-mapping": "^0.3.5",
+                "@jridgewell/trace-mapping": "^0.3.25"
+            }
+        },
+        "node_modules/@jridgewell/sourcemap-codec": {
+            "version": "1.5.5",
+            "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+            "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@jridgewell/trace-mapping": {
+            "version": "0.3.30",
+            "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
+            "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/resolve-uri": "^3.1.0",
+                "@jridgewell/sourcemap-codec": "^1.4.14"
+            }
+        },
+        "node_modules/@kurkle/color": {
+            "version": "0.3.4",
+            "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+            "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+            "license": "MIT"
+        },
+        "node_modules/@napi-rs/wasm-runtime": {
+            "version": "0.2.12",
+            "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.12.tgz",
+            "integrity": "sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@emnapi/core": "^1.4.3",
+                "@emnapi/runtime": "^1.4.3",
+                "@tybys/wasm-util": "^0.10.0"
+            }
+        },
+        "node_modules/@next/env": {
+            "version": "12.3.7",
+            "resolved": "https://registry.npmjs.org/@next/env/-/env-12.3.7.tgz",
+            "integrity": "sha512-gCw4sTeHoNr0EUO+Nk9Ll21OzF3PnmM0GlHaKgsY2AWQSqQlMgECvB0YI4k21M9iGy+tQ5RMyXQuoIMpzhtxww==",
+            "license": "MIT"
+        },
+        "node_modules/@next/eslint-plugin-next": {
+            "version": "14.2.14",
+            "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.14.tgz",
+            "integrity": "sha512-kV+OsZ56xhj0rnTn6HegyTGkoa16Mxjrpk7pjWumyB2P8JVQb8S9qtkjy/ye0GnTr4JWtWG4x/2qN40lKZ3iVQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "glob": "10.3.10"
+            }
+        },
+        "node_modules/@next/eslint-plugin-next/node_modules/glob": {
+            "version": "10.3.10",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+            "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "foreground-child": "^3.1.0",
+                "jackspeak": "^2.3.5",
+                "minimatch": "^9.0.1",
+                "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+                "path-scurry": "^1.10.1"
+            },
+            "bin": {
+                "glob": "dist/esm/bin.mjs"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/@next/swc-android-arm-eabi": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.4.tgz",
+            "integrity": "sha512-cM42Cw6V4Bz/2+j/xIzO8nK/Q3Ly+VSlZJTa1vHzsocJRYz8KT6MrreXaci2++SIZCF1rVRCDgAg5PpqRibdIA==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-android-arm64": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-12.3.4.tgz",
+            "integrity": "sha512-5jf0dTBjL+rabWjGj3eghpLUxCukRhBcEJgwLedewEA/LJk2HyqCvGIwj5rH+iwmq1llCWbOky2dO3pVljrapg==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-darwin-arm64": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.4.tgz",
+            "integrity": "sha512-DqsSTd3FRjQUR6ao0E1e2OlOcrF5br+uegcEGPVonKYJpcr0MJrtYmPxd4v5T6UCJZ+XzydF7eQo5wdGvSZAyA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-darwin-x64": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.4.tgz",
+            "integrity": "sha512-PPF7tbWD4k0dJ2EcUSnOsaOJ5rhT3rlEt/3LhZUGiYNL8KvoqczFrETlUx0cUYaXe11dRA3F80Hpt727QIwByQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-freebsd-x64": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.4.tgz",
+            "integrity": "sha512-KM9JXRXi/U2PUM928z7l4tnfQ9u8bTco/jb939pdFUHqc28V43Ohd31MmZD1QzEK4aFlMRaIBQOWQZh4D/E5lQ==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-linux-arm-gnueabihf": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.4.tgz",
+            "integrity": "sha512-3zqD3pO+z5CZyxtKDTnOJ2XgFFRUBciOox6EWkoZvJfc9zcidNAQxuwonUeNts6Xbm8Wtm5YGIRC0x+12YH7kw==",
+            "cpu": [
+                "arm"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-linux-arm64-gnu": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.4.tgz",
+            "integrity": "sha512-kiX0vgJGMZVv+oo1QuObaYulXNvdH/IINmvdZnVzMO/jic/B8EEIGlZ8Bgvw8LCjH3zNVPO3mGrdMvnEEPEhKA==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-linux-arm64-musl": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.4.tgz",
+            "integrity": "sha512-EETZPa1juczrKLWk5okoW2hv7D7WvonU+Cf2CgsSoxgsYbUCZ1voOpL4JZTOb6IbKMDo6ja+SbY0vzXZBUMvkQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-linux-x64-gnu": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.4.tgz",
+            "integrity": "sha512-4csPbRbfZbuWOk3ATyWcvVFdD9/Rsdq5YHKvRuEni68OCLkfy4f+4I9OBpyK1SKJ00Cih16NJbHE+k+ljPPpag==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-linux-x64-musl": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.4.tgz",
+            "integrity": "sha512-YeBmI+63Ro75SUiL/QXEVXQ19T++58aI/IINOyhpsRL1LKdyfK/35iilraZEFz9bLQrwy1LYAR5lK200A9Gjbg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-win32-arm64-msvc": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.4.tgz",
+            "integrity": "sha512-Sd0qFUJv8Tj0PukAYbCCDbmXcMkbIuhnTeHm9m4ZGjCf6kt7E/RMs55Pd3R5ePjOkN7dJEuxYBehawTR/aPDSQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-win32-ia32-msvc": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.4.tgz",
+            "integrity": "sha512-rt/vv/vg/ZGGkrkKcuJ0LyliRdbskQU+91bje+PgoYmxTZf/tYs6IfbmgudBJk6gH3QnjHWbkphDdRQrseRefQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@next/swc-win32-x64-msvc": {
+            "version": "12.3.4",
+            "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.4.tgz",
+            "integrity": "sha512-DQ20JEfTBZAgF8QCjYfJhv2/279M6onxFjdG/+5B0Cyj00/EdBxiWb2eGGFgQhrBbNv/lsvzFbbi0Ptf8Vw/bg==",
+            "cpu": [
+                "x64"
+            ],
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@nodelib/fs.scandir": {
+            "version": "2.1.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+            "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@nodelib/fs.stat": "2.0.5",
+                "run-parallel": "^1.1.9"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@nodelib/fs.stat": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+            "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@nodelib/fs.walk": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+            "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@nodelib/fs.scandir": "2.1.5",
+                "fastq": "^1.6.0"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/@nolyfill/is-core-module": {
+            "version": "1.0.39",
+            "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+            "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.4.0"
+            }
+        },
+        "node_modules/@parcel/watcher": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+            "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "detect-libc": "^1.0.3",
+                "is-glob": "^4.0.3",
+                "micromatch": "^4.0.5",
+                "node-addon-api": "^7.0.0"
+            },
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            },
+            "optionalDependencies": {
+                "@parcel/watcher-android-arm64": "2.5.1",
+                "@parcel/watcher-darwin-arm64": "2.5.1",
+                "@parcel/watcher-darwin-x64": "2.5.1",
+                "@parcel/watcher-freebsd-x64": "2.5.1",
+                "@parcel/watcher-linux-arm-glibc": "2.5.1",
+                "@parcel/watcher-linux-arm-musl": "2.5.1",
+                "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+                "@parcel/watcher-linux-arm64-musl": "2.5.1",
+                "@parcel/watcher-linux-x64-glibc": "2.5.1",
+                "@parcel/watcher-linux-x64-musl": "2.5.1",
+                "@parcel/watcher-win32-arm64": "2.5.1",
+                "@parcel/watcher-win32-ia32": "2.5.1",
+                "@parcel/watcher-win32-x64": "2.5.1"
+            }
+        },
+        "node_modules/@parcel/watcher-android-arm64": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+            "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-darwin-arm64": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+            "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-darwin-x64": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+            "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-freebsd-x64": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+            "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm-glibc": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+            "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm-musl": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+            "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm64-glibc": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+            "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-arm64-musl": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+            "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-x64-glibc": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+            "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-linux-x64-musl": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+            "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-win32-arm64": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+            "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-win32-ia32": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+            "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@parcel/watcher-win32-x64": {
+            "version": "2.5.1",
+            "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+            "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ],
+            "engines": {
+                "node": ">= 10.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/parcel"
+            }
+        },
+        "node_modules/@pkgjs/parseargs": {
+            "version": "0.11.0",
+            "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+            "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=14"
+            }
+        },
+        "node_modules/@rollup/plugin-alias": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.1.tgz",
+            "integrity": "sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/plugin-babel": {
+            "version": "6.0.4",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.4.tgz",
+            "integrity": "sha512-YF7Y52kFdFT/xVSuVdjkV5ZdX/3YtmX0QulG+x0taQOtJdHYzVU61aSSkAgVJ7NOv6qPkIYiJSgSWWN/DM5sGw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.18.6",
+                "@rollup/pluginutils": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0",
+                "@types/babel__core": "^7.1.9",
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/babel__core": {
+                    "optional": true
+                },
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/plugin-commonjs": {
+            "version": "25.0.8",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-25.0.8.tgz",
+            "integrity": "sha512-ZEZWTK5n6Qde0to4vS9Mr5x/0UZoqCxPVR9KRUjU4kA2sO7GEUn1fop0DAwpO6z0Nw/kJON9bDmSxdWxO/TT1A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@rollup/pluginutils": "^5.0.1",
+                "commondir": "^1.0.1",
+                "estree-walker": "^2.0.2",
+                "glob": "^8.0.3",
+                "is-reference": "1.2.1",
+                "magic-string": "^0.30.3"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^2.68.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/plugin-node-resolve": {
+            "version": "15.3.1",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.1.tgz",
+            "integrity": "sha512-tgg6b91pAybXHJQMAAwW9VuWBO6Thi+q7BCNARLwSqlmsHz0XYURtGvh/AuwSADXSI4h/2uHbs7s4FzlZDGSGA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@rollup/pluginutils": "^5.0.1",
+                "@types/resolve": "1.20.2",
+                "deepmerge": "^4.2.2",
+                "is-module": "^1.0.0",
+                "resolve": "^1.22.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^2.78.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/plugin-replace": {
+            "version": "5.0.7",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.7.tgz",
+            "integrity": "sha512-PqxSfuorkHz/SPpyngLyg5GCEkOcee9M1bkxiVDr41Pd61mqP1PLOoDPbpl44SB2mQGKwV/In74gqQmGITOhEQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@rollup/pluginutils": "^5.0.1",
+                "magic-string": "^0.30.3"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rollup/pluginutils": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.3.0.tgz",
+            "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "^1.0.0",
+                "estree-walker": "^2.0.2",
+                "picomatch": "^4.0.2"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+            },
+            "peerDependenciesMeta": {
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@rtsao/scc": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+            "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@rushstack/eslint-patch": {
+            "version": "1.12.0",
+            "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.12.0.tgz",
+            "integrity": "sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@sinclair/typebox": {
+            "version": "0.27.8",
+            "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
+            "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@sinonjs/commons": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
+            "integrity": "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "type-detect": "4.0.8"
+            }
+        },
+        "node_modules/@sinonjs/fake-timers": {
+            "version": "10.3.0",
+            "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-10.3.0.tgz",
+            "integrity": "sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@sinonjs/commons": "^3.0.0"
+            }
+        },
+        "node_modules/@stackblitz/sdk": {
+            "version": "1.11.0",
+            "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.11.0.tgz",
+            "integrity": "sha512-DFQGANNkEZRzFk1/rDP6TcFdM82ycHE+zfl9C/M/jXlH68jiqHWHFMQURLELoD8koxvu/eW5uhg94NSAZlYrUQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+            "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+            "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+            "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+            "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+            "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+            "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+            "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-plugin-transform-svg-component": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+            "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/babel-preset": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+            "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+                "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+                "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+                "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+                "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+                "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+                "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+                "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@svgr/core": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+            "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/core": "^7.21.3",
+                "@svgr/babel-preset": "8.1.0",
+                "camelcase": "^6.2.0",
+                "cosmiconfig": "^8.1.3",
+                "snake-case": "^3.0.4"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            }
+        },
+        "node_modules/@svgr/hast-util-to-babel-ast": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+            "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.21.3",
+                "entities": "^4.4.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            }
+        },
+        "node_modules/@svgr/plugin-jsx": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+            "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/core": "^7.21.3",
+                "@svgr/babel-preset": "8.1.0",
+                "@svgr/hast-util-to-babel-ast": "8.0.0",
+                "svg-parser": "^2.0.4"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@svgr/core": "*"
+            }
+        },
+        "node_modules/@svgr/plugin-svgo": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz",
+            "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cosmiconfig": "^8.1.3",
+                "deepmerge": "^4.3.1",
+                "svgo": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            },
+            "peerDependencies": {
+                "@svgr/core": "*"
+            }
+        },
+        "node_modules/@svgr/webpack": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz",
+            "integrity": "sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/core": "^7.21.3",
+                "@babel/plugin-transform-react-constant-elements": "^7.21.3",
+                "@babel/preset-env": "^7.20.2",
+                "@babel/preset-react": "^7.18.6",
+                "@babel/preset-typescript": "^7.21.0",
+                "@svgr/core": "8.1.0",
+                "@svgr/plugin-jsx": "8.1.0",
+                "@svgr/plugin-svgo": "8.1.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/gregberge"
+            }
+        },
+        "node_modules/@swc/helpers": {
+            "version": "0.4.11",
+            "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.11.tgz",
+            "integrity": "sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==",
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@testing-library/dom": {
+            "version": "10.4.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+            "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+            "dev": true,
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "@babel/code-frame": "^7.10.4",
+                "@babel/runtime": "^7.12.5",
+                "@types/aria-query": "^5.0.1",
+                "aria-query": "5.3.0",
+                "dom-accessibility-api": "^0.5.9",
+                "lz-string": "^1.5.0",
+                "picocolors": "1.1.1",
+                "pretty-format": "^27.0.2"
+            },
+            "engines": {
+                "node": ">=18"
+            }
+        },
+        "node_modules/@testing-library/jest-dom": {
+            "version": "6.8.0",
+            "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.8.0.tgz",
+            "integrity": "sha512-WgXcWzVM6idy5JaftTVC8Vs83NKRmGJz4Hqs4oyOuO2J4r/y79vvKZsb+CaGyCSEbUPI6OsewfPd0G1A0/TUZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@adobe/css-tools": "^4.4.0",
+                "aria-query": "^5.0.0",
+                "css.escape": "^1.5.1",
+                "dom-accessibility-api": "^0.6.3",
+                "picocolors": "^1.1.1",
+                "redent": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=14",
+                "npm": ">=6",
+                "yarn": ">=1"
+            }
+        },
+        "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+            "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@testing-library/react": {
+            "version": "14.3.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.3.1.tgz",
+            "integrity": "sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@testing-library/dom": "^9.0.0",
+                "@types/react-dom": "^18.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "peerDependencies": {
+                "react": "^18.0.0",
+                "react-dom": "^18.0.0"
+            }
+        },
+        "node_modules/@testing-library/react/node_modules/@testing-library/dom": {
+            "version": "9.3.4",
+            "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
+            "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.10.4",
+                "@babel/runtime": "^7.12.5",
+                "@types/aria-query": "^5.0.1",
+                "aria-query": "5.1.3",
+                "chalk": "^4.1.0",
+                "dom-accessibility-api": "^0.5.9",
+                "lz-string": "^1.5.0",
+                "pretty-format": "^27.0.2"
+            },
+            "engines": {
+                "node": ">=14"
+            }
+        },
+        "node_modules/@testing-library/react/node_modules/aria-query": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
+            "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "deep-equal": "^2.0.5"
+            }
+        },
+        "node_modules/@testing-library/user-event": {
+            "version": "14.6.1",
+            "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz",
+            "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12",
+                "npm": ">=6"
+            },
+            "peerDependencies": {
+                "@testing-library/dom": ">=7.21.4"
+            }
+        },
+        "node_modules/@tootallnate/once": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
+            "integrity": "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/@trysound/sax": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+            "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/@tybys/wasm-util": {
+            "version": "0.10.0",
+            "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
+            "integrity": "sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@types/aria-query": {
+            "version": "5.0.4",
+            "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+            "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/babel__core": {
+            "version": "7.20.5",
+            "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+            "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.20.7",
+                "@babel/types": "^7.20.7",
+                "@types/babel__generator": "*",
+                "@types/babel__template": "*",
+                "@types/babel__traverse": "*"
+            }
+        },
+        "node_modules/@types/babel__generator": {
+            "version": "7.27.0",
+            "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+            "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "node_modules/@types/babel__template": {
+            "version": "7.4.4",
+            "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+            "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/parser": "^7.1.0",
+                "@babel/types": "^7.0.0"
+            }
+        },
+        "node_modules/@types/babel__traverse": {
+            "version": "7.28.0",
+            "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+            "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/types": "^7.28.2"
+            }
+        },
+        "node_modules/@types/estree": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+            "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/graceful-fs": {
+            "version": "4.1.9",
+            "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.9.tgz",
+            "integrity": "sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/node": "*"
+            }
+        },
+        "node_modules/@types/istanbul-lib-coverage": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
+            "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/istanbul-lib-report": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz",
+            "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/istanbul-lib-coverage": "*"
+            }
+        },
+        "node_modules/@types/istanbul-reports": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz",
+            "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/istanbul-lib-report": "*"
+            }
+        },
+        "node_modules/@types/jsdom": {
+            "version": "20.0.1",
+            "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-20.0.1.tgz",
+            "integrity": "sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/node": "*",
+                "@types/tough-cookie": "*",
+                "parse5": "^7.0.0"
+            }
+        },
+        "node_modules/@types/json-schema": {
+            "version": "7.0.15",
+            "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+            "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/json5": {
+            "version": "0.0.29",
+            "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+            "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/node": {
+            "version": "22.18.1",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.1.tgz",
+            "integrity": "sha512-rzSDyhn4cYznVG+PCzGe1lwuMYJrcBS1fc3JqSa2PvtABwWo+dZ1ij5OVok3tqfpEBCBoaR4d7upFJk73HRJDw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "undici-types": "~6.21.0"
+            }
+        },
+        "node_modules/@types/pako": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+            "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+            "license": "MIT"
+        },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.15",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+            "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+            "devOptional": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/raf": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+            "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/@types/react": {
+            "version": "18.3.24",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz",
+            "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/prop-types": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@types/react-dom": {
+            "version": "18.3.7",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+            "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "^18.0.0"
+            }
+        },
+        "node_modules/@types/react-transition-group": {
+            "version": "4.4.12",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+            "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*"
+            }
+        },
+        "node_modules/@types/resolve": {
+            "version": "1.20.2",
+            "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
+            "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/semver": {
+            "version": "7.7.1",
+            "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.7.1.tgz",
+            "integrity": "sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/stack-utils": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
+            "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/tough-cookie": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
+            "integrity": "sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@types/trusted-types": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+            "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/@types/yargs": {
+            "version": "17.0.33",
+            "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
+            "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/yargs-parser": "*"
+            }
+        },
+        "node_modules/@types/yargs-parser": {
+            "version": "21.0.3",
+            "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz",
+            "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@typescript-eslint/eslint-plugin": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz",
+            "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/regexpp": "^4.5.1",
+                "@typescript-eslint/scope-manager": "6.21.0",
+                "@typescript-eslint/type-utils": "6.21.0",
+                "@typescript-eslint/utils": "6.21.0",
+                "@typescript-eslint/visitor-keys": "6.21.0",
+                "debug": "^4.3.4",
+                "graphemer": "^1.4.0",
+                "ignore": "^5.2.4",
+                "natural-compare": "^1.4.0",
+                "semver": "^7.5.4",
+                "ts-api-utils": "^1.0.1"
+            },
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha",
+                "eslint": "^7.0.0 || ^8.0.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@typescript-eslint/parser": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+            "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "@typescript-eslint/scope-manager": "6.21.0",
+                "@typescript-eslint/types": "6.21.0",
+                "@typescript-eslint/typescript-estree": "6.21.0",
+                "@typescript-eslint/visitor-keys": "6.21.0",
+                "debug": "^4.3.4"
+            },
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^7.0.0 || ^8.0.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/scope-manager": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+            "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "6.21.0",
+                "@typescript-eslint/visitor-keys": "6.21.0"
+            },
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/type-utils": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz",
+            "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/typescript-estree": "6.21.0",
+                "@typescript-eslint/utils": "6.21.0",
+                "debug": "^4.3.4",
+                "ts-api-utils": "^1.0.1"
+            },
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^7.0.0 || ^8.0.0"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/types": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+            "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+            "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "@typescript-eslint/types": "6.21.0",
+                "@typescript-eslint/visitor-keys": "6.21.0",
+                "debug": "^4.3.4",
+                "globby": "^11.1.0",
+                "is-glob": "^4.0.3",
+                "minimatch": "9.0.3",
+                "semver": "^7.5.4",
+                "ts-api-utils": "^1.0.1"
+            },
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@typescript-eslint/utils": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz",
+            "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.4.0",
+                "@types/json-schema": "^7.0.12",
+                "@types/semver": "^7.5.0",
+                "@typescript-eslint/scope-manager": "6.21.0",
+                "@typescript-eslint/types": "6.21.0",
+                "@typescript-eslint/typescript-estree": "6.21.0",
+                "semver": "^7.5.4"
+            },
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            },
+            "peerDependencies": {
+                "eslint": "^7.0.0 || ^8.0.0"
+            }
+        },
+        "node_modules/@typescript-eslint/utils/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/@typescript-eslint/visitor-keys": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+            "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@typescript-eslint/types": "6.21.0",
+                "eslint-visitor-keys": "^3.4.1"
+            },
+            "engines": {
+                "node": "^16.0.0 || >=18.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/typescript-eslint"
+            }
+        },
+        "node_modules/@ungap/structured-clone": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
+            "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.11.1.tgz",
+            "integrity": "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-android-arm64": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.11.1.tgz",
+            "integrity": "sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "android"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-darwin-arm64": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz",
+            "integrity": "sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-darwin-x64": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.11.1.tgz",
+            "integrity": "sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-freebsd-x64": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.11.1.tgz",
+            "integrity": "sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.11.1.tgz",
+            "integrity": "sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.11.1.tgz",
+            "integrity": "sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.11.1.tgz",
+            "integrity": "sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.11.1.tgz",
+            "integrity": "sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.11.1.tgz",
+            "integrity": "sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==",
+            "cpu": [
+                "ppc64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.11.1.tgz",
+            "integrity": "sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.11.1.tgz",
+            "integrity": "sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.11.1.tgz",
+            "integrity": "sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.11.1.tgz",
+            "integrity": "sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.11.1.tgz",
+            "integrity": "sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.11.1.tgz",
+            "integrity": "sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==",
+            "cpu": [
+                "wasm32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@napi-rs/wasm-runtime": "^0.2.11"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.11.1.tgz",
+            "integrity": "sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.11.1.tgz",
+            "integrity": "sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==",
+            "cpu": [
+                "ia32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.11.1.tgz",
+            "integrity": "sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/abab": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
+            "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==",
+            "deprecated": "Use your platform's native atob() and btoa() methods instead",
+            "dev": true,
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/acorn": {
+            "version": "8.15.0",
+            "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+            "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "acorn": "bin/acorn"
+            },
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/acorn-globals": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz",
+            "integrity": "sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "acorn": "^8.1.0",
+                "acorn-walk": "^8.0.2"
+            }
+        },
+        "node_modules/acorn-jsx": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+            "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+            }
+        },
+        "node_modules/acorn-walk": {
+            "version": "8.3.4",
+            "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz",
+            "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "acorn": "^8.11.0"
+            },
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/agent-base": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+            "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 6.0.0"
+            }
+        },
+        "node_modules/ajv": {
+            "version": "6.12.6",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+            "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.1",
+                "fast-json-stable-stringify": "^2.0.0",
+                "json-schema-traverse": "^0.4.1",
+                "uri-js": "^4.2.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/algoliasearch": {
+            "version": "5.37.0",
+            "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.37.0.tgz",
+            "integrity": "sha512-y7gau/ZOQDqoInTQp0IwTOjkrHc4Aq4R8JgpmCleFwiLl+PbN2DMWoDUWZnrK8AhNJwT++dn28Bt4NZYNLAmuA==",
+            "license": "MIT",
+            "dependencies": {
+                "@algolia/abtesting": "1.3.0",
+                "@algolia/client-abtesting": "5.37.0",
+                "@algolia/client-analytics": "5.37.0",
+                "@algolia/client-common": "5.37.0",
+                "@algolia/client-insights": "5.37.0",
+                "@algolia/client-personalization": "5.37.0",
+                "@algolia/client-query-suggestions": "5.37.0",
+                "@algolia/client-search": "5.37.0",
+                "@algolia/ingestion": "1.37.0",
+                "@algolia/monitoring": "1.37.0",
+                "@algolia/recommend": "5.37.0",
+                "@algolia/requester-browser-xhr": "5.37.0",
+                "@algolia/requester-fetch": "5.37.0",
+                "@algolia/requester-node-http": "5.37.0"
+            },
+            "engines": {
+                "node": ">= 14.0.0"
+            }
+        },
+        "node_modules/ansi-colors": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz",
+            "integrity": "sha512-SFKX67auSNoVR38N3L+nvsPjOE0bybKTYbkf5tRvushrAPQ9V75huw0ZxBkKVeRU9kqH3d6HA4xTckbwZ4ixmA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-wrap": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/ansi-cyan": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/ansi-cyan/-/ansi-cyan-0.1.1.tgz",
+            "integrity": "sha512-eCjan3AVo/SxZ0/MyIYRtkpxIu/H3xZN7URr1vXVrISxeyz8fUFz0FJziamK4sS8I+t35y4rHg1b2PklyBe/7A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-wrap": "0.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/ansi-escapes": {
+            "version": "4.3.2",
+            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
+            "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "type-fest": "^0.21.3"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/ansi-escapes/node_modules/type-fest": {
+            "version": "0.21.3",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
+            "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+            "dev": true,
+            "license": "(MIT OR CC0-1.0)",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/ansi-red": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz",
+            "integrity": "sha512-ewaIr5y+9CUTGFwZfpECUbFlGcC0GCw1oqR9RI6h1gQCd9Aj2GxSckCnPsVJnmfMZbwFYE+leZGASgkWl06Jow==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-wrap": "0.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/ansi-regex": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/ansi-sequence-parser": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.3.tgz",
+            "integrity": "sha512-+fksAx9eG3Ab6LDnLs3ZqZa8KVJ/jYnX+D4Qe1azX+LFGFAXqynCQLOdLpNYN/l9e7l6hMWwZbrnctqr6eSQSw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/ansi-styles": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+            "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-convert": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/ansi-wrap": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+            "integrity": "sha512-ZyznvL8k/FZeQHr2T6LzcJ/+vBApDnMNZvfVFy3At0knswWd6rJ3/0Hhmpu8oqa6C92npmozs890sX9Dl6q+Qw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/anymatch": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+            "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "normalize-path": "^3.0.0",
+                "picomatch": "^2.0.4"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/anymatch/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/argparse": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+            "dev": true,
+            "license": "Python-2.0"
+        },
+        "node_modules/aria-query": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+            "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "dequal": "^2.0.3"
+            }
+        },
+        "node_modules/arr-diff": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-1.1.0.tgz",
+            "integrity": "sha512-OQwDZUqYaQwyyhDJHThmzId8daf4/RFNLaeh3AevmSeZ5Y7ug4Ga/yKc6l6kTZOBW781rCj103ZuTh8GAsB3+Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "arr-flatten": "^1.0.1",
+                "array-slice": "^0.2.3"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/arr-diff/node_modules/array-slice": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
+            "integrity": "sha512-rlVfZW/1Ph2SNySXwR9QYkChp8EkOEiTMO5Vwx60usw04i4nWemkm9RXmQqgkQFaLHsqLuADvjp6IfgL9l2M8Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/arr-flatten": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+            "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/arr-union": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-2.1.0.tgz",
+            "integrity": "sha512-t5db90jq+qdgk8aFnxEkjqta0B/GHrM1pxzuuZz2zWsOXc5nKu3t+76s/PQBA8FTcM/ipspIH9jWG4OxCBc2eA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/array-buffer-byte-length": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+            "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "is-array-buffer": "^3.0.5"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/array-each": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+            "integrity": "sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/array-includes": {
+            "version": "3.1.9",
+            "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+            "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.4",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.24.0",
+                "es-object-atoms": "^1.1.1",
+                "get-intrinsic": "^1.3.0",
+                "is-string": "^1.1.1",
+                "math-intrinsics": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/array-slice": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+            "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/array-union": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+            "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/array.prototype.findlast": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+            "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.2",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.0.0",
+                "es-shim-unscopables": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/array.prototype.findlastindex": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+            "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.4",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.9",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.1.1",
+                "es-shim-unscopables": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/array.prototype.flat": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+            "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.5",
+                "es-shim-unscopables": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/array.prototype.flatmap": {
+            "version": "1.3.3",
+            "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+            "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.5",
+                "es-shim-unscopables": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/array.prototype.tosorted": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+            "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.3",
+                "es-errors": "^1.3.0",
+                "es-shim-unscopables": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/arraybuffer.prototype.slice": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+            "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-buffer-byte-length": "^1.0.1",
+                "call-bind": "^1.0.8",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.5",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.6",
+                "is-array-buffer": "^3.0.4"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/assign-symbols": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+            "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/ast-types-flow": {
+            "version": "0.0.8",
+            "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
+            "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/async-done": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/async-done/-/async-done-2.0.0.tgz",
+            "integrity": "sha512-j0s3bzYq9yKIVLKGE/tWlCpa3PfFLcrDZLTSVdnnCTGagXuXBJO4SsY9Xdk/fQBirCkH4evW5xOeJXqlAQFdsw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "end-of-stream": "^1.4.4",
+                "once": "^1.4.0",
+                "stream-exhaust": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/async-function": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+            "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/async-settle": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/async-settle/-/async-settle-2.0.0.tgz",
+            "integrity": "sha512-Obu/KE8FurfQRN6ODdHN9LuXqwC+JFIM9NRyZqJJ4ZfLJmIYN9Rg0/kb+wF70VV5+fJusTMQlJ1t5rF7J/ETdg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "async-done": "^2.0.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/asynckit": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/available-typed-arrays": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+            "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "possible-typed-array-names": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/axe-core": {
+            "version": "4.10.3",
+            "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.3.tgz",
+            "integrity": "sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==",
+            "dev": true,
+            "license": "MPL-2.0",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/axobject-query": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+            "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/b4a": {
+            "version": "1.6.7",
+            "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
+            "integrity": "sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==",
+            "dev": true,
+            "license": "Apache-2.0"
+        },
+        "node_modules/babel-jest": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz",
+            "integrity": "sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/transform": "^29.7.0",
+                "@types/babel__core": "^7.1.14",
+                "babel-plugin-istanbul": "^6.1.1",
+                "babel-preset-jest": "^29.6.3",
+                "chalk": "^4.0.0",
+                "graceful-fs": "^4.2.9",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.8.0"
+            }
+        },
+        "node_modules/babel-plugin-istanbul": {
+            "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",
+            "integrity": "sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.0.0",
+                "@istanbuljs/load-nyc-config": "^1.0.0",
+                "@istanbuljs/schema": "^0.1.2",
+                "istanbul-lib-instrument": "^5.0.4",
+                "test-exclude": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/babel-plugin-istanbul/node_modules/istanbul-lib-instrument": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz",
+            "integrity": "sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/core": "^7.12.3",
+                "@babel/parser": "^7.14.7",
+                "@istanbuljs/schema": "^0.1.2",
+                "istanbul-lib-coverage": "^3.2.0",
+                "semver": "^6.3.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/babel-plugin-jest-hoist": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-29.6.3.tgz",
+            "integrity": "sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/template": "^7.3.3",
+                "@babel/types": "^7.3.3",
+                "@types/babel__core": "^7.1.14",
+                "@types/babel__traverse": "^7.0.6"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/babel-plugin-polyfill-corejs2": {
+            "version": "0.4.14",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.14.tgz",
+            "integrity": "sha512-Co2Y9wX854ts6U8gAAPXfn0GmAyctHuK8n0Yhfjd6t30g7yvKjspvvOo9yG+z52PZRgFErt7Ka2pYnXCjLKEpg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/compat-data": "^7.27.7",
+                "@babel/helper-define-polyfill-provider": "^0.6.5",
+                "semver": "^6.3.1"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+            }
+        },
+        "node_modules/babel-plugin-polyfill-corejs3": {
+            "version": "0.13.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.13.0.tgz",
+            "integrity": "sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-define-polyfill-provider": "^0.6.5",
+                "core-js-compat": "^3.43.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+            }
+        },
+        "node_modules/babel-plugin-polyfill-regenerator": {
+            "version": "0.6.5",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.5.tgz",
+            "integrity": "sha512-ISqQ2frbiNU9vIJkzg7dlPpznPZ4jOiUQ1uSmB0fEHeowtN3COYRsXr/xexn64NpU13P06jc/L5TgiJXOgrbEg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/helper-define-polyfill-provider": "^0.6.5"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+            }
+        },
+        "node_modules/babel-preset-current-node-syntax": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.2.0.tgz",
+            "integrity": "sha512-E/VlAEzRrsLEb2+dv8yp3bo4scof3l9nR4lrld+Iy5NyVqgVYUJnDAmunkhPMisRI32Qc4iRiz425d8vM++2fg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/plugin-syntax-async-generators": "^7.8.4",
+                "@babel/plugin-syntax-bigint": "^7.8.3",
+                "@babel/plugin-syntax-class-properties": "^7.12.13",
+                "@babel/plugin-syntax-class-static-block": "^7.14.5",
+                "@babel/plugin-syntax-import-attributes": "^7.24.7",
+                "@babel/plugin-syntax-import-meta": "^7.10.4",
+                "@babel/plugin-syntax-json-strings": "^7.8.3",
+                "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+                "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+                "@babel/plugin-syntax-top-level-await": "^7.14.5"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0 || ^8.0.0-0"
+            }
+        },
+        "node_modules/babel-preset-jest": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-29.6.3.tgz",
+            "integrity": "sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "babel-plugin-jest-hoist": "^29.6.3",
+                "babel-preset-current-node-syntax": "^1.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/bach": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/bach/-/bach-2.0.1.tgz",
+            "integrity": "sha512-A7bvGMGiTOxGMpNupYl9HQTf0FFDNF4VCmks4PJpFyN1AX2pdKuxuwdvUz2Hu388wcgp+OvGFNsumBfFNkR7eg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "async-done": "^2.0.0",
+                "async-settle": "^2.0.0",
+                "now-and-later": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/balanced-match": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/bare-events": {
+            "version": "2.6.1",
+            "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.6.1.tgz",
+            "integrity": "sha512-AuTJkq9XmE6Vk0FJVNq5QxETrSA/vKHarWVBG5l/JbdCL1prJemiyJqUS0jrlXO0MftuPq4m3YVYhoNc5+aE/g==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "optional": true
+        },
+        "node_modules/base64-arraybuffer": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+            "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
+        "node_modules/base64-js": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+            "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/binary-extensions": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+            "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/bl": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/bl/-/bl-5.1.0.tgz",
+            "integrity": "sha512-tv1ZJHLfTDnXE6tMHv73YgSJaWR2AFuPwMntBe7XL/GBFHnT0CLnsHMogfk5+GzCDC5ZWarSCYaIGATZt9dNsQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "buffer": "^6.0.3",
+                "inherits": "^2.0.4",
+                "readable-stream": "^3.4.0"
+            }
+        },
+        "node_modules/bl/node_modules/readable-stream": {
+            "version": "3.6.2",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+            "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "inherits": "^2.0.3",
+                "string_decoder": "^1.1.1",
+                "util-deprecate": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/boolbase": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+            "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/brace-expansion": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+            "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0"
+            }
+        },
+        "node_modules/braces": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+            "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fill-range": "^7.1.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/browserslist": {
+            "version": "4.25.4",
+            "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.4.tgz",
+            "integrity": "sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "caniuse-lite": "^1.0.30001737",
+                "electron-to-chromium": "^1.5.211",
+                "node-releases": "^2.0.19",
+                "update-browserslist-db": "^1.1.3"
+            },
+            "bin": {
+                "browserslist": "cli.js"
+            },
+            "engines": {
+                "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+            }
+        },
+        "node_modules/bser": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
+            "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "node-int64": "^0.4.0"
+            }
+        },
+        "node_modules/buffer": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+            "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "base64-js": "^1.3.1",
+                "ieee754": "^1.2.1"
+            }
+        },
+        "node_modules/buffer-from": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+            "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/call-bind": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+            "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.0",
+                "es-define-property": "^1.0.0",
+                "get-intrinsic": "^1.2.4",
+                "set-function-length": "^1.2.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/call-bind-apply-helpers": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+            "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/call-bound": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+            "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.2",
+                "get-intrinsic": "^1.3.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/callsites": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+            "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/camelcase": {
+            "version": "6.3.0",
+            "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+            "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/caniuse-api": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+            "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.0.0",
+                "caniuse-lite": "^1.0.0",
+                "lodash.memoize": "^4.1.2",
+                "lodash.uniq": "^4.5.0"
+            }
+        },
+        "node_modules/caniuse-lite": {
+            "version": "1.0.30001741",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
+            "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "CC-BY-4.0"
+        },
+        "node_modules/canvg": {
+            "version": "3.0.11",
+            "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+            "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@babel/runtime": "^7.12.5",
+                "@types/raf": "^3.4.0",
+                "core-js": "^3.8.3",
+                "raf": "^3.4.1",
+                "regenerator-runtime": "^0.13.7",
+                "rgbcolor": "^1.0.1",
+                "stackblur-canvas": "^2.0.0",
+                "svg-pathdata": "^6.0.3"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
+        "node_modules/chalk": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+            "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.1.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/chalk?sponsor=1"
+            }
+        },
+        "node_modules/char-regex": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
+            "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/chart.js": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
+            "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@kurkle/color": "^0.3.0"
+            },
+            "engines": {
+                "pnpm": ">=8"
+            }
+        },
+        "node_modules/chokidar": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+            "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "anymatch": "~3.1.2",
+                "braces": "~3.0.2",
+                "glob-parent": "~5.1.2",
+                "is-binary-path": "~2.1.0",
+                "is-glob": "~4.0.1",
+                "normalize-path": "~3.0.0",
+                "readdirp": "~3.6.0"
+            },
+            "engines": {
+                "node": ">= 8.10.0"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/chokidar/node_modules/glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/ci-info": {
+            "version": "3.9.0",
+            "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+            "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/sibiraj-s"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/cjs-module-lexer": {
+            "version": "1.4.3",
+            "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz",
+            "integrity": "sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/cliui": {
+            "version": "7.0.4",
+            "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
+            "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "string-width": "^4.2.0",
+                "strip-ansi": "^6.0.0",
+                "wrap-ansi": "^7.0.0"
+            }
+        },
+        "node_modules/clone": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+            "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.8"
+            }
+        },
+        "node_modules/clone-buffer": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/clone-buffer/-/clone-buffer-1.0.0.tgz",
+            "integrity": "sha512-KLLTJWrvwIP+OPfMn0x2PheDEP20RPUcGXj/ERegTgdmPEZylALQldygiqrPPu8P45uNuPs7ckmReLY6v/iA5g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/clone-stats": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/clone-stats/-/clone-stats-1.0.0.tgz",
+            "integrity": "sha512-au6ydSpg6nsrigcZ4m8Bc9hxjeW+GJ8xh5G3BJCMt4WXe1H10UNaVOamqQTmrx1kjVuxAHIQSNU6hY4Nsn9/ag==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/cloneable-readable": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/cloneable-readable/-/cloneable-readable-1.1.3.tgz",
+            "integrity": "sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "inherits": "^2.0.1",
+                "process-nextick-args": "^2.0.0",
+                "readable-stream": "^2.3.5"
+            }
+        },
+        "node_modules/co": {
+            "version": "4.6.0",
+            "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+            "integrity": "sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "iojs": ">= 1.0.0",
+                "node": ">= 0.12.0"
+            }
+        },
+        "node_modules/collect-v8-coverage": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz",
+            "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/color-convert": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+            "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "color-name": "~1.1.4"
+            },
+            "engines": {
+                "node": ">=7.0.0"
+            }
+        },
+        "node_modules/color-name": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+            "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/colord": {
+            "version": "2.9.3",
+            "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+            "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/combined-stream": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "delayed-stream": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
+        "node_modules/commander": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+            "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/commondir": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+            "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/concat-map": {
+            "version": "0.0.1",
+            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/concat-with-sourcemaps": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
+            "integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "source-map": "^0.6.1"
+            }
+        },
+        "node_modules/convert-source-map": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+            "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/copy-props": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/copy-props/-/copy-props-4.0.0.tgz",
+            "integrity": "sha512-bVWtw1wQLzzKiYROtvNlbJgxgBYt2bMJpkCbKmXM3xyijvcjjWXEk5nyrrT3bgJ7ODb19ZohE2T0Y3FgNPyoTw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "each-props": "^3.0.0",
+                "is-plain-object": "^5.0.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/core-js": {
+            "version": "3.45.1",
+            "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
+            "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/core-js"
+            }
+        },
+        "node_modules/core-js-compat": {
+            "version": "3.45.1",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.45.1.tgz",
+            "integrity": "sha512-tqTt5T4PzsMIZ430XGviK4vzYSoeNJ6CXODi6c/voxOT6IZqBht5/EKaSNnYiEjjRYxjVz7DQIsOsY0XNi8PIA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.25.3"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/core-js"
+            }
+        },
+        "node_modules/core-util-is": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+            "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/cosmiconfig": {
+            "version": "8.3.6",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+            "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "import-fresh": "^3.3.0",
+                "js-yaml": "^4.1.0",
+                "parse-json": "^5.2.0",
+                "path-type": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/d-fischer"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.9.5"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/create-jest": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz",
+            "integrity": "sha512-Adz2bdH0Vq3F53KEMJOoftQFutWCukm6J24wbPWRO4k1kMY7gS7ds/uoJkNuV8wDCtWWnuwGcJwpWcih+zEW1Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "chalk": "^4.0.0",
+                "exit": "^0.1.2",
+                "graceful-fs": "^4.2.9",
+                "jest-config": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "prompts": "^2.0.1"
+            },
+            "bin": {
+                "create-jest": "bin/create-jest.js"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/cross-spawn": {
+            "version": "7.0.6",
+            "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+            "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "path-key": "^3.1.0",
+                "shebang-command": "^2.0.0",
+                "which": "^2.0.1"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/css-declaration-sorter": {
+            "version": "6.4.1",
+            "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
+            "integrity": "sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.0.9"
+            }
+        },
+        "node_modules/css-line-break": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+            "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "utrie": "^1.0.2"
+            }
+        },
+        "node_modules/css-select": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+            "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.1.0",
+                "domhandler": "^5.0.2",
+                "domutils": "^3.0.1",
+                "nth-check": "^2.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/css-tree": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+            "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mdn-data": "2.0.30",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+            }
+        },
+        "node_modules/css-what": {
+            "version": "6.2.2",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+            "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">= 6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/css.escape": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+            "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/cssnano": {
+            "version": "5.1.15",
+            "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz",
+            "integrity": "sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssnano-preset-default": "^5.2.14",
+                "lilconfig": "^2.0.3",
+                "yaml": "^1.10.2"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/cssnano"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/cssnano-preset-default": {
+            "version": "5.2.14",
+            "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz",
+            "integrity": "sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "css-declaration-sorter": "^6.3.1",
+                "cssnano-utils": "^3.1.0",
+                "postcss-calc": "^8.2.3",
+                "postcss-colormin": "^5.3.1",
+                "postcss-convert-values": "^5.1.3",
+                "postcss-discard-comments": "^5.1.2",
+                "postcss-discard-duplicates": "^5.1.0",
+                "postcss-discard-empty": "^5.1.1",
+                "postcss-discard-overridden": "^5.1.0",
+                "postcss-merge-longhand": "^5.1.7",
+                "postcss-merge-rules": "^5.1.4",
+                "postcss-minify-font-values": "^5.1.0",
+                "postcss-minify-gradients": "^5.1.1",
+                "postcss-minify-params": "^5.1.4",
+                "postcss-minify-selectors": "^5.2.1",
+                "postcss-normalize-charset": "^5.1.0",
+                "postcss-normalize-display-values": "^5.1.0",
+                "postcss-normalize-positions": "^5.1.1",
+                "postcss-normalize-repeat-style": "^5.1.1",
+                "postcss-normalize-string": "^5.1.0",
+                "postcss-normalize-timing-functions": "^5.1.0",
+                "postcss-normalize-unicode": "^5.1.1",
+                "postcss-normalize-url": "^5.1.0",
+                "postcss-normalize-whitespace": "^5.1.1",
+                "postcss-ordered-values": "^5.1.3",
+                "postcss-reduce-initial": "^5.1.2",
+                "postcss-reduce-transforms": "^5.1.0",
+                "postcss-svgo": "^5.1.0",
+                "postcss-unique-selectors": "^5.1.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/cssnano-utils": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
+            "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/csso": {
+            "version": "5.0.5",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+            "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "css-tree": "~2.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/css-tree": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+            "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mdn-data": "2.0.28",
+                "source-map-js": "^1.0.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+                "npm": ">=7.0.0"
+            }
+        },
+        "node_modules/csso/node_modules/mdn-data": {
+            "version": "2.0.28",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+            "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+            "dev": true,
+            "license": "CC0-1.0"
+        },
+        "node_modules/cssom": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
+            "integrity": "sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/cssstyle": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
+            "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssom": "~0.3.6"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/cssstyle/node_modules/cssom": {
+            "version": "0.3.8",
+            "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
+            "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/csstype": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+            "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+            "license": "MIT"
+        },
+        "node_modules/damerau-levenshtein": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+            "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
+            "dev": true,
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/data-urls": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz",
+            "integrity": "sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "abab": "^2.0.6",
+                "whatwg-mimetype": "^3.0.0",
+                "whatwg-url": "^11.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/data-view-buffer": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+            "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "es-errors": "^1.3.0",
+                "is-data-view": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/data-view-byte-length": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+            "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "es-errors": "^1.3.0",
+                "is-data-view": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/inspect-js"
+            }
+        },
+        "node_modules/data-view-byte-offset": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+            "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "es-errors": "^1.3.0",
+                "is-data-view": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/debug": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+            "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.3"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "peerDependenciesMeta": {
+                "supports-color": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/decimal.js": {
+            "version": "10.6.0",
+            "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
+            "integrity": "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/dedent": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.0.tgz",
+            "integrity": "sha512-HGFtf8yhuhGhqO07SV79tRp+br4MnbdjeVxotpn1QBl30pcLLCQjX5b2295ll0fv8RKDKsmWYrl05usHM9CewQ==",
+            "dev": true,
+            "license": "MIT",
+            "peerDependencies": {
+                "babel-plugin-macros": "^3.1.0"
+            },
+            "peerDependenciesMeta": {
+                "babel-plugin-macros": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/deep-equal": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
+            "integrity": "sha512-ZIwpnevOurS8bpT4192sqAowWM76JDKSHYzMLty3BZGSswgq6pBaH3DhCSW5xVAZICZyKdOBPjwww5wfgT/6PA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-buffer-byte-length": "^1.0.0",
+                "call-bind": "^1.0.5",
+                "es-get-iterator": "^1.1.3",
+                "get-intrinsic": "^1.2.2",
+                "is-arguments": "^1.1.1",
+                "is-array-buffer": "^3.0.2",
+                "is-date-object": "^1.0.5",
+                "is-regex": "^1.1.4",
+                "is-shared-array-buffer": "^1.0.2",
+                "isarray": "^2.0.5",
+                "object-is": "^1.1.5",
+                "object-keys": "^1.1.1",
+                "object.assign": "^4.1.4",
+                "regexp.prototype.flags": "^1.5.1",
+                "side-channel": "^1.0.4",
+                "which-boxed-primitive": "^1.0.2",
+                "which-collection": "^1.0.1",
+                "which-typed-array": "^1.1.13"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/deep-is": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+            "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/deepmerge": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+            "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/define-data-property": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+            "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-define-property": "^1.0.0",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/define-properties": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+            "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "define-data-property": "^1.0.1",
+                "has-property-descriptors": "^1.0.0",
+                "object-keys": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
+        "node_modules/dequal": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/detect-file": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+            "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/detect-libc": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+            "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "optional": true,
+            "bin": {
+                "detect-libc": "bin/detect-libc.js"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/detect-newline": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
+            "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/diff-sequences": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
+            "integrity": "sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/dir-glob": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+            "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "path-type": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/doctrine": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+            "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "esutils": "^2.0.2"
+            },
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
+        "node_modules/dom-accessibility-api": {
+            "version": "0.5.16",
+            "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+            "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/dom-helpers": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+            "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.8.7",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/dom-serializer": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+            "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.2",
+                "entities": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/domelementtype": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+            "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fb55"
+                }
+            ],
+            "license": "BSD-2-Clause"
+        },
+        "node_modules/domexception": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
+            "integrity": "sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==",
+            "deprecated": "Use your platform's native DOMException instead",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/domhandler": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+            "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "domelementtype": "^2.3.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/dompurify": {
+            "version": "3.2.6",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.6.tgz",
+            "integrity": "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==",
+            "license": "(MPL-2.0 OR Apache-2.0)",
+            "optional": true,
+            "optionalDependencies": {
+                "@types/trusted-types": "^2.0.7"
+            }
+        },
+        "node_modules/domutils": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+            "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "dom-serializer": "^2.0.0",
+                "domelementtype": "^2.3.0",
+                "domhandler": "^5.0.3"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
+        "node_modules/dot-case": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+            "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "no-case": "^3.0.4",
+                "tslib": "^2.0.3"
+            }
+        },
+        "node_modules/dunder-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+            "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "gopd": "^1.2.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/each-props": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/each-props/-/each-props-3.0.0.tgz",
+            "integrity": "sha512-IYf1hpuWrdzse/s/YJOrFmU15lyhSzxelNVAHTEG3DtP4QsLTWZUzcUL3HMXmKQxXpa4EIrBPpwRgj0aehdvAw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-plain-object": "^5.0.0",
+                "object.defaults": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/eastasianwidth": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+            "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/electron-to-chromium": {
+            "version": "1.5.214",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.214.tgz",
+            "integrity": "sha512-TpvUNdha+X3ybfU78NoQatKvQEm1oq3lf2QbnmCEdw+Bd9RuIAY+hJTvq1avzHM0f7EJfnH3vbCnbzKzisc/9Q==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/emittery": {
+            "version": "0.13.1",
+            "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz",
+            "integrity": "sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sindresorhus/emittery?sponsor=1"
+            }
+        },
+        "node_modules/emoji-regex": {
+            "version": "9.2.2",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+            "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/end-of-stream": {
+            "version": "1.4.5",
+            "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
+            "integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "once": "^1.4.0"
+            }
+        },
+        "node_modules/entities": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+            "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
+        "node_modules/error-ex": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+            "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-arrayish": "^0.2.1"
+            }
+        },
+        "node_modules/es-abstract": {
+            "version": "1.24.0",
+            "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
+            "integrity": "sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-buffer-byte-length": "^1.0.2",
+                "arraybuffer.prototype.slice": "^1.0.4",
+                "available-typed-arrays": "^1.0.7",
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.4",
+                "data-view-buffer": "^1.0.2",
+                "data-view-byte-length": "^1.0.2",
+                "data-view-byte-offset": "^1.0.1",
+                "es-define-property": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.1.1",
+                "es-set-tostringtag": "^2.1.0",
+                "es-to-primitive": "^1.3.0",
+                "function.prototype.name": "^1.1.8",
+                "get-intrinsic": "^1.3.0",
+                "get-proto": "^1.0.1",
+                "get-symbol-description": "^1.1.0",
+                "globalthis": "^1.0.4",
+                "gopd": "^1.2.0",
+                "has-property-descriptors": "^1.0.2",
+                "has-proto": "^1.2.0",
+                "has-symbols": "^1.1.0",
+                "hasown": "^2.0.2",
+                "internal-slot": "^1.1.0",
+                "is-array-buffer": "^3.0.5",
+                "is-callable": "^1.2.7",
+                "is-data-view": "^1.0.2",
+                "is-negative-zero": "^2.0.3",
+                "is-regex": "^1.2.1",
+                "is-set": "^2.0.3",
+                "is-shared-array-buffer": "^1.0.4",
+                "is-string": "^1.1.1",
+                "is-typed-array": "^1.1.15",
+                "is-weakref": "^1.1.1",
+                "math-intrinsics": "^1.1.0",
+                "object-inspect": "^1.13.4",
+                "object-keys": "^1.1.1",
+                "object.assign": "^4.1.7",
+                "own-keys": "^1.0.1",
+                "regexp.prototype.flags": "^1.5.4",
+                "safe-array-concat": "^1.1.3",
+                "safe-push-apply": "^1.0.0",
+                "safe-regex-test": "^1.1.0",
+                "set-proto": "^1.0.0",
+                "stop-iteration-iterator": "^1.1.0",
+                "string.prototype.trim": "^1.2.10",
+                "string.prototype.trimend": "^1.0.9",
+                "string.prototype.trimstart": "^1.0.8",
+                "typed-array-buffer": "^1.0.3",
+                "typed-array-byte-length": "^1.0.3",
+                "typed-array-byte-offset": "^1.0.4",
+                "typed-array-length": "^1.0.7",
+                "unbox-primitive": "^1.1.0",
+                "which-typed-array": "^1.1.19"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/es-define-property": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+            "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-errors": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+            "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-get-iterator": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
+            "integrity": "sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.2",
+                "get-intrinsic": "^1.1.3",
+                "has-symbols": "^1.0.3",
+                "is-arguments": "^1.1.1",
+                "is-map": "^2.0.2",
+                "is-set": "^2.0.2",
+                "is-string": "^1.0.7",
+                "isarray": "^2.0.5",
+                "stop-iteration-iterator": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/es-iterator-helpers": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+            "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.3",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.6",
+                "es-errors": "^1.3.0",
+                "es-set-tostringtag": "^2.0.3",
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.6",
+                "globalthis": "^1.0.4",
+                "gopd": "^1.2.0",
+                "has-property-descriptors": "^1.0.2",
+                "has-proto": "^1.2.0",
+                "has-symbols": "^1.1.0",
+                "internal-slot": "^1.1.0",
+                "iterator.prototype": "^1.1.4",
+                "safe-array-concat": "^1.1.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-object-atoms": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+            "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-set-tostringtag": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+            "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.6",
+                "has-tostringtag": "^1.0.2",
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-shim-unscopables": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+            "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/es-to-primitive": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+            "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-callable": "^1.2.7",
+                "is-date-object": "^1.0.5",
+                "is-symbol": "^1.0.4"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/escalade": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+            "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/escape-string-regexp": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+            "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/escodegen": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+            "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "esprima": "^4.0.1",
+                "estraverse": "^5.2.0",
+                "esutils": "^2.0.2"
+            },
+            "bin": {
+                "escodegen": "bin/escodegen.js",
+                "esgenerate": "bin/esgenerate.js"
+            },
+            "engines": {
+                "node": ">=6.0"
+            },
+            "optionalDependencies": {
+                "source-map": "~0.6.1"
+            }
+        },
+        "node_modules/eslint": {
+            "version": "8.57.0",
+            "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+            "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
+            "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@eslint-community/eslint-utils": "^4.2.0",
+                "@eslint-community/regexpp": "^4.6.1",
+                "@eslint/eslintrc": "^2.1.4",
+                "@eslint/js": "8.57.0",
+                "@humanwhocodes/config-array": "^0.11.14",
+                "@humanwhocodes/module-importer": "^1.0.1",
+                "@nodelib/fs.walk": "^1.2.8",
+                "@ungap/structured-clone": "^1.2.0",
+                "ajv": "^6.12.4",
+                "chalk": "^4.0.0",
+                "cross-spawn": "^7.0.2",
+                "debug": "^4.3.2",
+                "doctrine": "^3.0.0",
+                "escape-string-regexp": "^4.0.0",
+                "eslint-scope": "^7.2.2",
+                "eslint-visitor-keys": "^3.4.3",
+                "espree": "^9.6.1",
+                "esquery": "^1.4.2",
+                "esutils": "^2.0.2",
+                "fast-deep-equal": "^3.1.3",
+                "file-entry-cache": "^6.0.1",
+                "find-up": "^5.0.0",
+                "glob-parent": "^6.0.2",
+                "globals": "^13.19.0",
+                "graphemer": "^1.4.0",
+                "ignore": "^5.2.0",
+                "imurmurhash": "^0.1.4",
+                "is-glob": "^4.0.0",
+                "is-path-inside": "^3.0.3",
+                "js-yaml": "^4.1.0",
+                "json-stable-stringify-without-jsonify": "^1.0.1",
+                "levn": "^0.4.1",
+                "lodash.merge": "^4.6.2",
+                "minimatch": "^3.1.2",
+                "natural-compare": "^1.4.0",
+                "optionator": "^0.9.3",
+                "strip-ansi": "^6.0.1",
+                "text-table": "^0.2.0"
+            },
+            "bin": {
+                "eslint": "bin/eslint.js"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint-config-next": {
+            "version": "14.2.14",
+            "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.14.tgz",
+            "integrity": "sha512-TXwyjGICAlWC9O0OufS3koTsBKQH8l1xt3SY/aDuvtKHIwjTHplJKWVb1WOEX0OsDaxGbFXmfD2EY1sNfG0Y/w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@next/eslint-plugin-next": "14.2.14",
+                "@rushstack/eslint-patch": "^1.3.3",
+                "@typescript-eslint/eslint-plugin": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+                "@typescript-eslint/parser": "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0",
+                "eslint-import-resolver-node": "^0.3.6",
+                "eslint-import-resolver-typescript": "^3.5.2",
+                "eslint-plugin-import": "^2.28.1",
+                "eslint-plugin-jsx-a11y": "^6.7.1",
+                "eslint-plugin-react": "^7.33.2",
+                "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+            },
+            "peerDependencies": {
+                "eslint": "^7.23.0 || ^8.0.0",
+                "typescript": ">=3.3.1"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-config-next/node_modules/eslint-import-resolver-typescript": {
+            "version": "3.10.1",
+            "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz",
+            "integrity": "sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "@nolyfill/is-core-module": "1.0.39",
+                "debug": "^4.4.0",
+                "get-tsconfig": "^4.10.0",
+                "is-bun-module": "^2.0.0",
+                "stable-hash": "^0.0.5",
+                "tinyglobby": "^0.2.13",
+                "unrs-resolver": "^1.6.2"
+            },
+            "engines": {
+                "node": "^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint-import-resolver-typescript"
+            },
+            "peerDependencies": {
+                "eslint": "*",
+                "eslint-plugin-import": "*",
+                "eslint-plugin-import-x": "*"
+            },
+            "peerDependenciesMeta": {
+                "eslint-plugin-import": {
+                    "optional": true
+                },
+                "eslint-plugin-import-x": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-config-prettier": {
+            "version": "9.1.2",
+            "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.2.tgz",
+            "integrity": "sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "eslint-config-prettier": "bin/cli.js"
+            },
+            "peerDependencies": {
+                "eslint": ">=7.0.0"
+            }
+        },
+        "node_modules/eslint-import-resolver-node": {
+            "version": "0.3.9",
+            "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+            "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "debug": "^3.2.7",
+                "is-core-module": "^2.13.0",
+                "resolve": "^1.22.4"
+            }
+        },
+        "node_modules/eslint-import-resolver-node/node_modules/debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.1"
+            }
+        },
+        "node_modules/eslint-module-utils": {
+            "version": "2.12.1",
+            "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+            "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "debug": "^3.2.7"
+            },
+            "engines": {
+                "node": ">=4"
+            },
+            "peerDependenciesMeta": {
+                "eslint": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-module-utils/node_modules/debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.1"
+            }
+        },
+        "node_modules/eslint-plugin-import": {
+            "version": "2.32.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+            "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@rtsao/scc": "^1.1.0",
+                "array-includes": "^3.1.9",
+                "array.prototype.findlastindex": "^1.2.6",
+                "array.prototype.flat": "^1.3.3",
+                "array.prototype.flatmap": "^1.3.3",
+                "debug": "^3.2.7",
+                "doctrine": "^2.1.0",
+                "eslint-import-resolver-node": "^0.3.9",
+                "eslint-module-utils": "^2.12.1",
+                "hasown": "^2.0.2",
+                "is-core-module": "^2.16.1",
+                "is-glob": "^4.0.3",
+                "minimatch": "^3.1.2",
+                "object.fromentries": "^2.0.8",
+                "object.groupby": "^1.0.3",
+                "object.values": "^1.2.1",
+                "semver": "^6.3.1",
+                "string.prototype.trimend": "^1.0.9",
+                "tsconfig-paths": "^3.15.0"
+            },
+            "engines": {
+                "node": ">=4"
+            },
+            "peerDependencies": {
+                "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+            }
+        },
+        "node_modules/eslint-plugin-import/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/eslint-plugin-import/node_modules/debug": {
+            "version": "3.2.7",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+            "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ms": "^2.1.1"
+            }
+        },
+        "node_modules/eslint-plugin-import/node_modules/doctrine": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+            "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "esutils": "^2.0.2"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/eslint-plugin-import/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/eslint-plugin-jest-dom": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-5.5.0.tgz",
+            "integrity": "sha512-CRlXfchTr7EgC3tDI7MGHY6QjdJU5Vv2RPaeeGtkXUHnKZf04kgzMPIJUXt4qKCvYWVVIEo9ut9Oq1vgXAykEA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.16.3",
+                "requireindex": "^1.2.0"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0",
+                "npm": ">=6",
+                "yarn": ">=1"
+            },
+            "peerDependencies": {
+                "@testing-library/dom": "^8.0.0 || ^9.0.0 || ^10.0.0",
+                "eslint": "^6.8.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@testing-library/dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/eslint-plugin-jsx-a11y": {
+            "version": "6.10.2",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz",
+            "integrity": "sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "aria-query": "^5.3.2",
+                "array-includes": "^3.1.8",
+                "array.prototype.flatmap": "^1.3.2",
+                "ast-types-flow": "^0.0.8",
+                "axe-core": "^4.10.0",
+                "axobject-query": "^4.1.0",
+                "damerau-levenshtein": "^1.0.8",
+                "emoji-regex": "^9.2.2",
+                "hasown": "^2.0.2",
+                "jsx-ast-utils": "^3.3.5",
+                "language-tags": "^1.0.9",
+                "minimatch": "^3.1.2",
+                "object.fromentries": "^2.0.8",
+                "safe-regex-test": "^1.0.3",
+                "string.prototype.includes": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=4.0"
+            },
+            "peerDependencies": {
+                "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+            }
+        },
+        "node_modules/eslint-plugin-jsx-a11y/node_modules/aria-query": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+            "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/eslint-plugin-jsx-a11y/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/eslint-plugin-jsx-a11y/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/eslint-plugin-react": {
+            "version": "7.37.5",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+            "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-includes": "^3.1.8",
+                "array.prototype.findlast": "^1.2.5",
+                "array.prototype.flatmap": "^1.3.3",
+                "array.prototype.tosorted": "^1.1.4",
+                "doctrine": "^2.1.0",
+                "es-iterator-helpers": "^1.2.1",
+                "estraverse": "^5.3.0",
+                "hasown": "^2.0.2",
+                "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+                "minimatch": "^3.1.2",
+                "object.entries": "^1.1.9",
+                "object.fromentries": "^2.0.8",
+                "object.values": "^1.2.1",
+                "prop-types": "^15.8.1",
+                "resolve": "^2.0.0-next.5",
+                "semver": "^6.3.1",
+                "string.prototype.matchall": "^4.0.12",
+                "string.prototype.repeat": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=4"
+            },
+            "peerDependencies": {
+                "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+            }
+        },
+        "node_modules/eslint-plugin-react-hooks": {
+            "version": "5.0.0-canary-7118f5dd7-20230705",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz",
+            "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+            }
+        },
+        "node_modules/eslint-plugin-react/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/eslint-plugin-react/node_modules/doctrine": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+            "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "esutils": "^2.0.2"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/eslint-plugin-react/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/eslint-plugin-react/node_modules/resolve": {
+            "version": "2.0.0-next.5",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+            "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-core-module": "^2.13.0",
+                "path-parse": "^1.0.7",
+                "supports-preserve-symlinks-flag": "^1.0.0"
+            },
+            "bin": {
+                "resolve": "bin/resolve"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/eslint-scope": {
+            "version": "7.2.2",
+            "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+            "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "esrecurse": "^4.3.0",
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint-visitor-keys": {
+            "version": "3.4.3",
+            "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+            "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/eslint/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/eslint/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/espree": {
+            "version": "9.6.1",
+            "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+            "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "acorn": "^8.9.0",
+                "acorn-jsx": "^5.3.2",
+                "eslint-visitor-keys": "^3.4.1"
+            },
+            "engines": {
+                "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/eslint"
+            }
+        },
+        "node_modules/esprima": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+            "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "bin": {
+                "esparse": "bin/esparse.js",
+                "esvalidate": "bin/esvalidate.js"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/esquery": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+            "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "estraverse": "^5.1.0"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/esrecurse": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+            "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "estraverse": "^5.2.0"
+            },
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estraverse": {
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+            "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/estree-walker": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+            "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/esutils": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+            "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/eventemitter3": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+            "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+            "license": "MIT"
+        },
+        "node_modules/execa": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+            "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cross-spawn": "^7.0.3",
+                "get-stream": "^6.0.0",
+                "human-signals": "^2.1.0",
+                "is-stream": "^2.0.0",
+                "merge-stream": "^2.0.0",
+                "npm-run-path": "^4.0.1",
+                "onetime": "^5.1.2",
+                "signal-exit": "^3.0.3",
+                "strip-final-newline": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sindresorhus/execa?sponsor=1"
+            }
+        },
+        "node_modules/exit": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
+            "integrity": "sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==",
+            "dev": true,
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/expand-tilde": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+            "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "homedir-polyfill": "^1.0.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/expect": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/expect/-/expect-29.7.0.tgz",
+            "integrity": "sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/expect-utils": "^29.7.0",
+                "jest-get-type": "^29.6.3",
+                "jest-matcher-utils": "^29.7.0",
+                "jest-message-util": "^29.7.0",
+                "jest-util": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/extend": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+            "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/extend-shallow": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+            "integrity": "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "assign-symbols": "^1.0.0",
+                "is-extendable": "^1.0.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/fast-deep-equal": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+            "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-diff": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+            "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+            "license": "Apache-2.0"
+        },
+        "node_modules/fast-fifo": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+            "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-glob": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+            "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@nodelib/fs.stat": "^2.0.2",
+                "@nodelib/fs.walk": "^1.2.3",
+                "glob-parent": "^5.1.2",
+                "merge2": "^1.3.0",
+                "micromatch": "^4.0.8"
+            },
+            "engines": {
+                "node": ">=8.6.0"
+            }
+        },
+        "node_modules/fast-glob/node_modules/glob-parent": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+            "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/fast-json-stable-stringify": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+            "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-levenshtein": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+            "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/fast-png": {
+            "version": "6.4.0",
+            "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+            "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/pako": "^2.0.3",
+                "iobuffer": "^5.3.2",
+                "pako": "^2.1.0"
+            }
+        },
+        "node_modules/fastest-levenshtein": {
+            "version": "1.0.16",
+            "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+            "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4.9.1"
+            }
+        },
+        "node_modules/fastq": {
+            "version": "1.19.1",
+            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+            "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "reusify": "^1.0.4"
+            }
+        },
+        "node_modules/fb-watchman": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.2.tgz",
+            "integrity": "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "bser": "2.1.1"
+            }
+        },
+        "node_modules/fdir": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+            "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "peerDependencies": {
+                "picomatch": "^3 || ^4"
+            },
+            "peerDependenciesMeta": {
+                "picomatch": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/fflate": {
+            "version": "0.8.2",
+            "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+            "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+            "license": "MIT"
+        },
+        "node_modules/file-entry-cache": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+            "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "flat-cache": "^3.0.4"
+            },
+            "engines": {
+                "node": "^10.12.0 || >=12.0.0"
+            }
+        },
+        "node_modules/file-saver": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+            "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+            "license": "MIT"
+        },
+        "node_modules/fill-range": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+            "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "to-regex-range": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/find-up": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+            "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "locate-path": "^6.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/findup-sync": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-5.0.0.tgz",
+            "integrity": "sha512-MzwXju70AuyflbgeOhzvQWAvvQdo1XL0A9bVvlXsYcFEBM87WR4OakL4OfZq+QRmr+duJubio+UtNQCPsVESzQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "detect-file": "^1.0.0",
+                "is-glob": "^4.0.3",
+                "micromatch": "^4.0.4",
+                "resolve-dir": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/fined": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/fined/-/fined-2.0.0.tgz",
+            "integrity": "sha512-OFRzsL6ZMHz5s0JrsEr+TpdGNCtrVtnuG3x1yzGNiQHT0yaDnXAj8V/lWcpJVrnoDpcwXcASxAZYbuXda2Y82A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "expand-tilde": "^2.0.2",
+                "is-plain-object": "^5.0.0",
+                "object.defaults": "^1.1.0",
+                "object.pick": "^1.3.0",
+                "parse-filepath": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/flagged-respawn": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-2.0.0.tgz",
+            "integrity": "sha512-Gq/a6YCi8zexmGHMuJwahTGzXlAZAOsbCVKduWXC6TlLCjjFRlExMJc4GC2NYPYZ0r/brw9P7CpRgQmlPVeOoA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/flat-cache": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
+            "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "flatted": "^3.2.9",
+                "keyv": "^4.5.3",
+                "rimraf": "^3.0.2"
+            },
+            "engines": {
+                "node": "^10.12.0 || >=12.0.0"
+            }
+        },
+        "node_modules/flatted": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
+            "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/for-each": {
+            "version": "0.3.5",
+            "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+            "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-callable": "^1.2.7"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/for-in": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+            "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/for-own": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+            "integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "for-in": "^1.0.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/foreground-child": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+            "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "cross-spawn": "^7.0.6",
+                "signal-exit": "^4.0.1"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/foreground-child/node_modules/signal-exit": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+            "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/form-data": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+            "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "es-set-tostringtag": "^2.1.0",
+                "hasown": "^2.0.2",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/fs-extra": {
+            "version": "11.3.2",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz",
+            "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==",
+            "license": "MIT",
+            "dependencies": {
+                "graceful-fs": "^4.2.0",
+                "jsonfile": "^6.0.1",
+                "universalify": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=14.14"
+            }
+        },
+        "node_modules/fs-mkdirp-stream": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-2.0.1.tgz",
+            "integrity": "sha512-UTOY+59K6IA94tec8Wjqm0FSh5OVudGNB0NL/P6fB3HiE3bYOY3VYBGijsnOHNkQSwC1FKkU77pmq7xp9CskLw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "graceful-fs": "^4.2.8",
+                "streamx": "^2.12.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/fs.realpath": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/fsevents": {
+            "version": "2.3.3",
+            "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+            "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ],
+            "engines": {
+                "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+            }
+        },
+        "node_modules/function-bind": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+            "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/function.prototype.name": {
+            "version": "1.1.8",
+            "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+            "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.3",
+                "define-properties": "^1.2.1",
+                "functions-have-names": "^1.2.3",
+                "hasown": "^2.0.2",
+                "is-callable": "^1.2.7"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/functions-have-names": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+            "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/generic-names": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz",
+            "integrity": "sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "loader-utils": "^3.2.0"
+            }
+        },
+        "node_modules/gensync": {
+            "version": "1.0.0-beta.2",
+            "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+            "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/get-caller-file": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+            "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": "6.* || 8.* || >= 10.*"
+            }
+        },
+        "node_modules/get-intrinsic": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+            "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind-apply-helpers": "^1.0.2",
+                "es-define-property": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.1.1",
+                "function-bind": "^1.1.2",
+                "get-proto": "^1.0.1",
+                "gopd": "^1.2.0",
+                "has-symbols": "^1.1.0",
+                "hasown": "^2.0.2",
+                "math-intrinsics": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/get-package-type": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
+            "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/get-proto": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+            "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "dunder-proto": "^1.0.1",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/get-stream": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+            "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/get-symbol-description": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+            "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.6"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/get-tsconfig": {
+            "version": "4.10.1",
+            "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.1.tgz",
+            "integrity": "sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "resolve-pkg-maps": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+            }
+        },
+        "node_modules/glob": {
+            "version": "8.1.0",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+            "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+            "deprecated": "Glob versions prior to v9 are no longer supported",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^5.0.1",
+                "once": "^1.3.0"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/glob-parent": {
+            "version": "6.0.2",
+            "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+            "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "is-glob": "^4.0.3"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/glob-stream": {
+            "version": "8.0.3",
+            "resolved": "https://registry.npmjs.org/glob-stream/-/glob-stream-8.0.3.tgz",
+            "integrity": "sha512-fqZVj22LtFJkHODT+M4N1RJQ3TjnnQhfE9GwZI8qXscYarnhpip70poMldRnP8ipQ/w0B621kOhfc53/J9bd/A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@gulpjs/to-absolute-glob": "^4.0.0",
+                "anymatch": "^3.1.3",
+                "fastq": "^1.13.0",
+                "glob-parent": "^6.0.2",
+                "is-glob": "^4.0.3",
+                "is-negated-glob": "^1.0.0",
+                "normalize-path": "^3.0.0",
+                "streamx": "^2.12.5"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/glob-watcher": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-6.0.0.tgz",
+            "integrity": "sha512-wGM28Ehmcnk2NqRORXFOTOR064L4imSw3EeOqU5bIwUf62eXGwg89WivH6VMahL8zlQHeodzvHpXplrqzrz3Nw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "async-done": "^2.0.0",
+                "chokidar": "^3.5.3"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/glob/node_modules/minimatch": {
+            "version": "5.1.6",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+            "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/global-modules": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+            "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "global-prefix": "^1.0.1",
+                "is-windows": "^1.0.1",
+                "resolve-dir": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/global-prefix": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+            "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "expand-tilde": "^2.0.2",
+                "homedir-polyfill": "^1.0.1",
+                "ini": "^1.3.4",
+                "is-windows": "^1.0.1",
+                "which": "^1.2.14"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/global-prefix/node_modules/which": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+            "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "which": "bin/which"
+            }
+        },
+        "node_modules/globals": {
+            "version": "13.24.0",
+            "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+            "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "type-fest": "^0.20.2"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/globalthis": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+            "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "define-properties": "^1.2.1",
+                "gopd": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/globby": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+            "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-union": "^2.1.0",
+                "dir-glob": "^3.0.1",
+                "fast-glob": "^3.2.9",
+                "ignore": "^5.2.0",
+                "merge2": "^1.4.1",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/glogg": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/glogg/-/glogg-2.2.0.tgz",
+            "integrity": "sha512-eWv1ds/zAlz+M1ioHsyKJomfY7jbDDPpwSkv14KQj89bycx1nvK5/2Cj/T9g7kzJcX5Bc7Yv22FjfBZS/jl94A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "sparkles": "^2.1.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/gopd": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+            "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/graceful-fs": {
+            "version": "4.2.11",
+            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+            "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+            "license": "ISC"
+        },
+        "node_modules/graphemer": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+            "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/gulp": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/gulp/-/gulp-5.0.1.tgz",
+            "integrity": "sha512-PErok3DZSA5WGMd6XXV3IRNO0mlB+wW3OzhFJLEec1jSERg2j1bxJ6e5Fh6N6fn3FH2T9AP4UYNb/pYlADB9sA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "glob-watcher": "^6.0.0",
+                "gulp-cli": "^3.1.0",
+                "undertaker": "^2.0.0",
+                "vinyl-fs": "^4.0.2"
+            },
+            "bin": {
+                "gulp": "bin/gulp.js"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/gulp-cli": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-3.1.0.tgz",
+            "integrity": "sha512-zZzwlmEsTfXcxRKiCHsdyjZZnFvXWM4v1NqBJSYbuApkvVKivjcmOS2qruAJ+PkEHLFavcDKH40DPc1+t12a9Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@gulpjs/messages": "^1.1.0",
+                "chalk": "^4.1.2",
+                "copy-props": "^4.0.0",
+                "gulplog": "^2.2.0",
+                "interpret": "^3.1.1",
+                "liftoff": "^5.0.1",
+                "mute-stdout": "^2.0.0",
+                "replace-homedir": "^2.0.0",
+                "semver-greatest-satisfied-range": "^2.0.0",
+                "string-width": "^4.2.3",
+                "v8flags": "^4.0.0",
+                "yargs": "^16.2.0"
+            },
+            "bin": {
+                "gulp": "bin/gulp.js"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/gulp-concat": {
+            "version": "2.6.1",
+            "resolved": "https://registry.npmjs.org/gulp-concat/-/gulp-concat-2.6.1.tgz",
+            "integrity": "sha512-a2scActrQrDBpBbR3WUZGyGS1JEPLg5PZJdIa7/Bi3GuKAmPYDK6SFhy/NZq5R8KsKKFvtfR0fakbUCcKGCCjg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "concat-with-sourcemaps": "^1.0.0",
+                "through2": "^2.0.0",
+                "vinyl": "^2.0.0"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/gulp-flatten": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/gulp-flatten/-/gulp-flatten-0.4.0.tgz",
+            "integrity": "sha512-eg4spVTAiv1xXmugyaCxWne1oPtNG0UHEtABx5W8ScLiqAYceyYm6GYA36x0Qh8KOIXmAZV97L2aYGnKREG3Sg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "plugin-error": "^0.1.2",
+                "through2": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/gulp-rename": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-2.1.0.tgz",
+            "integrity": "sha512-dGuzuH8jQGqCMqC544IEPhs5+O2l+IkdoSZsgd4kY97M1CxQeI3qrmweQBIrxLBbjbe/8uEWK8HHcNBc3OCy4g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/gulp-uglify": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/gulp-uglify/-/gulp-uglify-3.0.2.tgz",
+            "integrity": "sha512-gk1dhB74AkV2kzqPMQBLA3jPoIAPd/nlNzP2XMDSG8XZrqnlCiDGAqC+rZOumzFvB5zOphlFh6yr3lgcAb/OOg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-each": "^1.0.1",
+                "extend-shallow": "^3.0.2",
+                "gulplog": "^1.0.0",
+                "has-gulplog": "^0.1.0",
+                "isobject": "^3.0.1",
+                "make-error-cause": "^1.1.1",
+                "safe-buffer": "^5.1.2",
+                "through2": "^2.0.0",
+                "uglify-js": "^3.0.5",
+                "vinyl-sourcemaps-apply": "^0.2.0"
+            }
+        },
+        "node_modules/gulp-uglify/node_modules/glogg": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz",
+            "integrity": "sha512-5mwUoSuBk44Y4EshyiqcH95ZntbDdTQqA3QYSrxmzj28Ai0vXBGMH1ApSANH14j2sIRtqCEyg6PfsuP7ElOEDA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "sparkles": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/gulp-uglify/node_modules/gulplog": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz",
+            "integrity": "sha512-hm6N8nrm3Y08jXie48jsC55eCZz9mnb4OirAStEk2deqeyhXU3C1otDVh+ccttMuc1sBi6RX6ZJ720hs9RCvgw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "glogg": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/gulp-uglify/node_modules/sparkles": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
+            "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/gulp-uglifycss": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/gulp-uglifycss/-/gulp-uglifycss-1.1.0.tgz",
+            "integrity": "sha512-O2VDBPdS16SO3BPSCsHDnsvdCx1B/WgH2qvJaUOD+r1d8v87UjeqEtfmqR2eJ171D0F4shw8/oW5ezA6pqVXEQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "plugin-error": "^1.0.1",
+                "through2": "^2.0.3",
+                "uglifycss": "^0.0.25",
+                "vinyl": "^2.1.0"
+            }
+        },
+        "node_modules/gulp-uglifycss/node_modules/arr-diff": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+            "integrity": "sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/gulp-uglifycss/node_modules/arr-union": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+            "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/gulp-uglifycss/node_modules/plugin-error": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+            "integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-colors": "^1.0.1",
+                "arr-diff": "^4.0.0",
+                "arr-union": "^3.1.0",
+                "extend-shallow": "^3.0.2"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/gulplog": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-2.2.0.tgz",
+            "integrity": "sha512-V2FaKiOhpR3DRXZuYdRLn/qiY0yI5XmqbTKrYbdemJ+xOh2d2MOweI/XFgMzd/9+1twdvMwllnZbWZNJ+BOm4A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "glogg": "^2.2.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/has-bigints": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+            "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-flag": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+            "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/has-gulplog": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/has-gulplog/-/has-gulplog-0.1.0.tgz",
+            "integrity": "sha512-+F4GzLjwHNNDEAJW2DC1xXfEoPkRDmUdJ7CBYw4MpqtDwOnqdImJl7GWlpqx+Wko6//J8uKTnIe4wZSv7yCqmw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "sparkles": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/has-gulplog/node_modules/sparkles": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-1.0.1.tgz",
+            "integrity": "sha512-dSO0DDYUahUt/0/pD/Is3VIm5TGJjludZ0HVymmhYF6eNA53PVLhnUk0znSYbH8IYBuJdCE+1luR22jNLMaQdw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/has-property-descriptors": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+            "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-define-property": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-proto": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+            "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "dunder-proto": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-symbols": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+            "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/has-tostringtag": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+            "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-symbols": "^1.0.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/hasown": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+            "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "function-bind": "^1.1.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/homedir-polyfill": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+            "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "parse-passwd": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/html-encoding-sniffer": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
+            "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "whatwg-encoding": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/html-escaper": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+            "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/html2canvas": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+            "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "css-line-break": "^2.1.0",
+                "text-segmentation": "^1.0.3"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/http-proxy-agent": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz",
+            "integrity": "sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@tootallnate/once": "2",
+                "agent-base": "6",
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/https-proxy-agent": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+            "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "agent-base": "6",
+                "debug": "4"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/human-signals": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+            "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=10.17.0"
+            }
+        },
+        "node_modules/iconv-lite": {
+            "version": "0.6.3",
+            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+            "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "safer-buffer": ">= 2.1.2 < 3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/icss-replace-symbols": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
+            "integrity": "sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/icss-utils": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+            "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": "^10 || ^12 || >= 14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.1.0"
+            }
+        },
+        "node_modules/ieee754": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+            "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/ignore": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/immutable": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+            "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+            "devOptional": true,
+            "license": "MIT"
+        },
+        "node_modules/import-cwd": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
+            "integrity": "sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "import-from": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/import-fresh": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+            "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "parent-module": "^1.0.0",
+                "resolve-from": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/import-from": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz",
+            "integrity": "sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "resolve-from": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/import-from/node_modules/resolve-from": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+            "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/import-local": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.2.0.tgz",
+            "integrity": "sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "pkg-dir": "^4.2.0",
+                "resolve-cwd": "^3.0.0"
+            },
+            "bin": {
+                "import-local-fixture": "fixtures/cli.js"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/imurmurhash": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+            "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.8.19"
+            }
+        },
+        "node_modules/indent-string": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+            "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/inflight": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+            "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "once": "^1.3.0",
+                "wrappy": "1"
+            }
+        },
+        "node_modules/inherits": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/ini": {
+            "version": "1.3.8",
+            "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+            "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/internal-slot": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+            "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "hasown": "^2.0.2",
+                "side-channel": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/interpret": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
+            "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/iobuffer": {
+            "version": "5.4.0",
+            "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+            "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+            "license": "MIT"
+        },
+        "node_modules/is-absolute": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+            "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-relative": "^1.0.0",
+                "is-windows": "^1.0.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-arguments": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+            "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "has-tostringtag": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-array-buffer": {
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+            "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.3",
+                "get-intrinsic": "^1.2.6"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-arrayish": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+            "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/is-async-function": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+            "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "async-function": "^1.0.0",
+                "call-bound": "^1.0.3",
+                "get-proto": "^1.0.1",
+                "has-tostringtag": "^1.0.2",
+                "safe-regex-test": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-bigint": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+            "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-bigints": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-binary-path": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+            "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "binary-extensions": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/is-boolean-object": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+            "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "has-tostringtag": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-bun-module": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz",
+            "integrity": "sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "semver": "^7.7.1"
+            }
+        },
+        "node_modules/is-bun-module/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/is-callable": {
+            "version": "1.2.7",
+            "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+            "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-core-module": {
+            "version": "2.16.1",
+            "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+            "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-data-view": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+            "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "get-intrinsic": "^1.2.6",
+                "is-typed-array": "^1.1.13"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-date-object": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+            "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "has-tostringtag": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-extendable": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+            "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-plain-object": "^2.0.4"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-extendable/node_modules/is-plain-object": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+            "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "isobject": "^3.0.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-extglob": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+            "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-finalizationregistry": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+            "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-fullwidth-code-point": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+            "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/is-generator-fn": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
+            "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/is-generator-function": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+            "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "get-proto": "^1.0.0",
+                "has-tostringtag": "^1.0.2",
+                "safe-regex-test": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-glob": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+            "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-extglob": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-map": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+            "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-module": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+            "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/is-negated-glob": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-negated-glob/-/is-negated-glob-1.0.0.tgz",
+            "integrity": "sha512-czXVVn/QEmgvej1f50BZ648vUI+em0xqMq2Sn+QncCLN4zj1UAxlT+kw/6ggQTOaZPd1HqKQGEqbpQVtJucWug==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-negative-zero": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+            "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-number": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+            "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.12.0"
+            }
+        },
+        "node_modules/is-number-object": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+            "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "has-tostringtag": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-path-inside": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
+            "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/is-plain-object": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+            "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-potential-custom-element-name": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
+            "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/is-reference": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+            "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/estree": "*"
+            }
+        },
+        "node_modules/is-regex": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+            "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "gopd": "^1.2.0",
+                "has-tostringtag": "^1.0.2",
+                "hasown": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-relative": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+            "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-unc-path": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-set": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+            "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-shared-array-buffer": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+            "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-stream": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+            "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/is-string": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+            "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "has-tostringtag": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-symbol": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+            "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "has-symbols": "^1.1.0",
+                "safe-regex-test": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-typed-array": {
+            "version": "1.1.15",
+            "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+            "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "which-typed-array": "^1.1.16"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-unc-path": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+            "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "unc-path-regex": "^0.1.2"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-valid-glob": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-valid-glob/-/is-valid-glob-1.0.0.tgz",
+            "integrity": "sha512-AhiROmoEFDSsjx8hW+5sGwgKVIORcXnrlAx/R0ZSeaPw70Vw0CqkGBBhHGL58Uox2eXnU1AnvXJl1XlyedO5bA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/is-weakmap": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+            "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-weakref": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+            "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-weakset": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+            "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "get-intrinsic": "^1.2.6"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/is-windows": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+            "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/isarray": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+            "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/isexe": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+            "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/isobject": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+            "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/istanbul-lib-coverage": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
+            "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/istanbul-lib-instrument": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-6.0.3.tgz",
+            "integrity": "sha512-Vtgk7L/R2JHyyGW07spoFlB8/lpjiOLTjMdms6AFMraYt3BaJauod/NGrfnVG/y4Ix1JEuMRPDPEj2ua+zz1/Q==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/core": "^7.23.9",
+                "@babel/parser": "^7.23.9",
+                "@istanbuljs/schema": "^0.1.3",
+                "istanbul-lib-coverage": "^3.2.0",
+                "semver": "^7.5.4"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/istanbul-lib-instrument/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/istanbul-lib-report": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
+            "integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "istanbul-lib-coverage": "^3.0.0",
+                "make-dir": "^4.0.0",
+                "supports-color": "^7.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/istanbul-lib-source-maps": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz",
+            "integrity": "sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "debug": "^4.1.1",
+                "istanbul-lib-coverage": "^3.0.0",
+                "source-map": "^0.6.1"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/istanbul-reports": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
+            "integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "html-escaper": "^2.0.0",
+                "istanbul-lib-report": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/iterator.prototype": {
+            "version": "1.1.5",
+            "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+            "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "define-data-property": "^1.1.4",
+                "es-object-atoms": "^1.0.0",
+                "get-intrinsic": "^1.2.6",
+                "get-proto": "^1.0.0",
+                "has-symbols": "^1.1.0",
+                "set-function-name": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/jackspeak": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+            "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "@isaacs/cliui": "^8.0.2"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            },
+            "optionalDependencies": {
+                "@pkgjs/parseargs": "^0.11.0"
+            }
+        },
+        "node_modules/jest": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
+            "integrity": "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/core": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "import-local": "^3.0.2",
+                "jest-cli": "^29.7.0"
+            },
+            "bin": {
+                "jest": "bin/jest.js"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+            },
+            "peerDependenciesMeta": {
+                "node-notifier": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/jest-changed-files": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-29.7.0.tgz",
+            "integrity": "sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "execa": "^5.0.0",
+                "jest-util": "^29.7.0",
+                "p-limit": "^3.1.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-circus": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-circus/-/jest-circus-29.7.0.tgz",
+            "integrity": "sha512-3E1nCMgipcTkCocFwM90XXQab9bS+GMsjdpmPrlelaxwD93Ad8iVEjX/vvHPdLPnFf+L40u+5+iutRdA1N9myw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/environment": "^29.7.0",
+                "@jest/expect": "^29.7.0",
+                "@jest/test-result": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "chalk": "^4.0.0",
+                "co": "^4.6.0",
+                "dedent": "^1.0.0",
+                "is-generator-fn": "^2.0.0",
+                "jest-each": "^29.7.0",
+                "jest-matcher-utils": "^29.7.0",
+                "jest-message-util": "^29.7.0",
+                "jest-runtime": "^29.7.0",
+                "jest-snapshot": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "p-limit": "^3.1.0",
+                "pretty-format": "^29.7.0",
+                "pure-rand": "^6.0.0",
+                "slash": "^3.0.0",
+                "stack-utils": "^2.0.3"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-circus/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-circus/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-circus/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-cli": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-29.7.0.tgz",
+            "integrity": "sha512-OVVobw2IubN/GSYsxETi+gOe7Ka59EFMR/twOU3Jb2GnKKeMGJB5SGUUrEz3SFVmJASUdZUzy83sLNNQ2gZslg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/core": "^29.7.0",
+                "@jest/test-result": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "chalk": "^4.0.0",
+                "create-jest": "^29.7.0",
+                "exit": "^0.1.2",
+                "import-local": "^3.0.2",
+                "jest-config": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "jest-validate": "^29.7.0",
+                "yargs": "^17.3.1"
+            },
+            "bin": {
+                "jest": "bin/jest.js"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+            },
+            "peerDependenciesMeta": {
+                "node-notifier": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/jest-cli/node_modules/cliui": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+            "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "string-width": "^4.2.0",
+                "strip-ansi": "^6.0.1",
+                "wrap-ansi": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/jest-cli/node_modules/yargs": {
+            "version": "17.7.2",
+            "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+            "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cliui": "^8.0.1",
+                "escalade": "^3.1.1",
+                "get-caller-file": "^2.0.5",
+                "require-directory": "^2.1.1",
+                "string-width": "^4.2.3",
+                "y18n": "^5.0.5",
+                "yargs-parser": "^21.1.1"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/jest-cli/node_modules/yargs-parser": {
+            "version": "21.1.1",
+            "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+            "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/jest-config": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-29.7.0.tgz",
+            "integrity": "sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/core": "^7.11.6",
+                "@jest/test-sequencer": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "babel-jest": "^29.7.0",
+                "chalk": "^4.0.0",
+                "ci-info": "^3.2.0",
+                "deepmerge": "^4.2.2",
+                "glob": "^7.1.3",
+                "graceful-fs": "^4.2.9",
+                "jest-circus": "^29.7.0",
+                "jest-environment-node": "^29.7.0",
+                "jest-get-type": "^29.6.3",
+                "jest-regex-util": "^29.6.3",
+                "jest-resolve": "^29.7.0",
+                "jest-runner": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "jest-validate": "^29.7.0",
+                "micromatch": "^4.0.4",
+                "parse-json": "^5.2.0",
+                "pretty-format": "^29.7.0",
+                "slash": "^3.0.0",
+                "strip-json-comments": "^3.1.1"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "@types/node": "*",
+                "ts-node": ">=9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/node": {
+                    "optional": true
+                },
+                "ts-node": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/jest-config/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-config/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/jest-config/node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "deprecated": "Glob versions prior to v9 are no longer supported",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/jest-config/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/jest-config/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-config/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-diff": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz",
+            "integrity": "sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chalk": "^4.0.0",
+                "diff-sequences": "^29.6.3",
+                "jest-get-type": "^29.6.3",
+                "pretty-format": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-diff/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-diff/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-diff/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-docblock": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-29.7.0.tgz",
+            "integrity": "sha512-q617Auw3A612guyaFgsbFeYpNP5t2aoUNLwBUbc/0kD1R4t9ixDbyFTHd1nok4epoVFpr7PmeWHrhvuV3XaJ4g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "detect-newline": "^3.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-each": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-29.7.0.tgz",
+            "integrity": "sha512-gns+Er14+ZrEoC5fhOfYCY1LOHHr0TI+rQUHZS8Ttw2l7gl+80eHc/gFf2Ktkw0+SIACDTeWvpFcv3B04VembQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "chalk": "^4.0.0",
+                "jest-get-type": "^29.6.3",
+                "jest-util": "^29.7.0",
+                "pretty-format": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-each/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-each/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-each/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-environment-jsdom": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.7.0.tgz",
+            "integrity": "sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/environment": "^29.7.0",
+                "@jest/fake-timers": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/jsdom": "^20.0.0",
+                "@types/node": "*",
+                "jest-mock": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "jsdom": "^20.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "peerDependencies": {
+                "canvas": "^2.5.0"
+            },
+            "peerDependenciesMeta": {
+                "canvas": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/jest-environment-node": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.7.0.tgz",
+            "integrity": "sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/environment": "^29.7.0",
+                "@jest/fake-timers": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "jest-mock": "^29.7.0",
+                "jest-util": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-get-type": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz",
+            "integrity": "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-haste-map": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz",
+            "integrity": "sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "@types/graceful-fs": "^4.1.3",
+                "@types/node": "*",
+                "anymatch": "^3.0.3",
+                "fb-watchman": "^2.0.0",
+                "graceful-fs": "^4.2.9",
+                "jest-regex-util": "^29.6.3",
+                "jest-util": "^29.7.0",
+                "jest-worker": "^29.7.0",
+                "micromatch": "^4.0.4",
+                "walker": "^1.0.8"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "^2.3.2"
+            }
+        },
+        "node_modules/jest-leak-detector": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-29.7.0.tgz",
+            "integrity": "sha512-kYA8IJcSYtST2BY9I+SMC32nDpBT3J2NvWJx8+JCuCdl/CR1I4EKUJROiP8XtCcxqgTTBGJNdbB1A8XRKbTetw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "jest-get-type": "^29.6.3",
+                "pretty-format": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-leak-detector/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-leak-detector/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-leak-detector/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-matcher-utils": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz",
+            "integrity": "sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chalk": "^4.0.0",
+                "jest-diff": "^29.7.0",
+                "jest-get-type": "^29.6.3",
+                "pretty-format": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-matcher-utils/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-matcher-utils/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-matcher-utils/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-message-util": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-29.7.0.tgz",
+            "integrity": "sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.12.13",
+                "@jest/types": "^29.6.3",
+                "@types/stack-utils": "^2.0.0",
+                "chalk": "^4.0.0",
+                "graceful-fs": "^4.2.9",
+                "micromatch": "^4.0.4",
+                "pretty-format": "^29.7.0",
+                "slash": "^3.0.0",
+                "stack-utils": "^2.0.3"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-message-util/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-message-util/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-message-util/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-mock": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-29.7.0.tgz",
+            "integrity": "sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "jest-util": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-pnp-resolver": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
+            "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            },
+            "peerDependencies": {
+                "jest-resolve": "*"
+            },
+            "peerDependenciesMeta": {
+                "jest-resolve": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/jest-regex-util": {
+            "version": "29.6.3",
+            "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
+            "integrity": "sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-resolve": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.7.0.tgz",
+            "integrity": "sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chalk": "^4.0.0",
+                "graceful-fs": "^4.2.9",
+                "jest-haste-map": "^29.7.0",
+                "jest-pnp-resolver": "^1.2.2",
+                "jest-util": "^29.7.0",
+                "jest-validate": "^29.7.0",
+                "resolve": "^1.20.0",
+                "resolve.exports": "^2.0.0",
+                "slash": "^3.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-resolve-dependencies": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-29.7.0.tgz",
+            "integrity": "sha512-un0zD/6qxJ+S0et7WxeI3H5XSe9lTBBR7bOHCHXkKR6luG5mwDDlIzVQ0V5cZCuoTgEdcdwzTghYkTWfubi+nA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "jest-regex-util": "^29.6.3",
+                "jest-snapshot": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-runner": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-29.7.0.tgz",
+            "integrity": "sha512-fsc4N6cPCAahybGBfTRcq5wFR6fpLznMg47sY5aDpsoejOcVYFb07AHuSnR0liMcPTgBsA3ZJL6kFOjPdoNipQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/console": "^29.7.0",
+                "@jest/environment": "^29.7.0",
+                "@jest/test-result": "^29.7.0",
+                "@jest/transform": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "chalk": "^4.0.0",
+                "emittery": "^0.13.1",
+                "graceful-fs": "^4.2.9",
+                "jest-docblock": "^29.7.0",
+                "jest-environment-node": "^29.7.0",
+                "jest-haste-map": "^29.7.0",
+                "jest-leak-detector": "^29.7.0",
+                "jest-message-util": "^29.7.0",
+                "jest-resolve": "^29.7.0",
+                "jest-runtime": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "jest-watcher": "^29.7.0",
+                "jest-worker": "^29.7.0",
+                "p-limit": "^3.1.0",
+                "source-map-support": "0.5.13"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-runtime": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.7.0.tgz",
+            "integrity": "sha512-gUnLjgwdGqW7B4LvOIkbKs9WGbn+QLqRQQ9juC6HndeDiezIwhDP+mhMwHWCEcfQ5RUXa6OPnFF8BJh5xegwwQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/environment": "^29.7.0",
+                "@jest/fake-timers": "^29.7.0",
+                "@jest/globals": "^29.7.0",
+                "@jest/source-map": "^29.6.3",
+                "@jest/test-result": "^29.7.0",
+                "@jest/transform": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "chalk": "^4.0.0",
+                "cjs-module-lexer": "^1.0.0",
+                "collect-v8-coverage": "^1.0.0",
+                "glob": "^7.1.3",
+                "graceful-fs": "^4.2.9",
+                "jest-haste-map": "^29.7.0",
+                "jest-message-util": "^29.7.0",
+                "jest-mock": "^29.7.0",
+                "jest-regex-util": "^29.6.3",
+                "jest-resolve": "^29.7.0",
+                "jest-snapshot": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "slash": "^3.0.0",
+                "strip-bom": "^4.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-runtime/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/jest-runtime/node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "deprecated": "Glob versions prior to v9 are no longer supported",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/jest-runtime/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/jest-snapshot": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-29.7.0.tgz",
+            "integrity": "sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/core": "^7.11.6",
+                "@babel/generator": "^7.7.2",
+                "@babel/plugin-syntax-jsx": "^7.7.2",
+                "@babel/plugin-syntax-typescript": "^7.7.2",
+                "@babel/types": "^7.3.3",
+                "@jest/expect-utils": "^29.7.0",
+                "@jest/transform": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "babel-preset-current-node-syntax": "^1.0.0",
+                "chalk": "^4.0.0",
+                "expect": "^29.7.0",
+                "graceful-fs": "^4.2.9",
+                "jest-diff": "^29.7.0",
+                "jest-get-type": "^29.6.3",
+                "jest-matcher-utils": "^29.7.0",
+                "jest-message-util": "^29.7.0",
+                "jest-util": "^29.7.0",
+                "natural-compare": "^1.4.0",
+                "pretty-format": "^29.7.0",
+                "semver": "^7.5.3"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-snapshot/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-snapshot/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-snapshot/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-snapshot/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/jest-util": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz",
+            "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "chalk": "^4.0.0",
+                "ci-info": "^3.2.0",
+                "graceful-fs": "^4.2.9",
+                "picomatch": "^2.2.3"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-util/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/jest-validate": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.7.0.tgz",
+            "integrity": "sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/types": "^29.6.3",
+                "camelcase": "^6.2.0",
+                "chalk": "^4.0.0",
+                "jest-get-type": "^29.6.3",
+                "leven": "^3.1.0",
+                "pretty-format": "^29.7.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-validate/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/jest-validate/node_modules/pretty-format": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
+            "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/schemas": "^29.6.3",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^18.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-validate/node_modules/react-is": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+            "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jest-watcher": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-29.7.0.tgz",
+            "integrity": "sha512-49Fg7WXkU3Vl2h6LbLtMQ/HyB6rXSIX7SqvBLQmssRBGN9I0PNvPmAmCWSOY6SOvrjhI/F7/bGAv9RtnsPA03g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jest/test-result": "^29.7.0",
+                "@jest/types": "^29.6.3",
+                "@types/node": "*",
+                "ansi-escapes": "^4.2.1",
+                "chalk": "^4.0.0",
+                "emittery": "^0.13.1",
+                "jest-util": "^29.7.0",
+                "string-length": "^4.0.1"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-worker": {
+            "version": "29.7.0",
+            "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
+            "integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/node": "*",
+                "jest-util": "^29.7.0",
+                "merge-stream": "^2.0.0",
+                "supports-color": "^8.0.0"
+            },
+            "engines": {
+                "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+            }
+        },
+        "node_modules/jest-worker/node_modules/supports-color": {
+            "version": "8.1.1",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+            "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/supports-color?sponsor=1"
+            }
+        },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+            "license": "MIT"
+        },
+        "node_modules/js-yaml": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+            "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "argparse": "^2.0.1"
+            },
+            "bin": {
+                "js-yaml": "bin/js-yaml.js"
+            }
+        },
+        "node_modules/jsdom": {
+            "version": "20.0.3",
+            "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz",
+            "integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "abab": "^2.0.6",
+                "acorn": "^8.8.1",
+                "acorn-globals": "^7.0.0",
+                "cssom": "^0.5.0",
+                "cssstyle": "^2.3.0",
+                "data-urls": "^3.0.2",
+                "decimal.js": "^10.4.2",
+                "domexception": "^4.0.0",
+                "escodegen": "^2.0.0",
+                "form-data": "^4.0.0",
+                "html-encoding-sniffer": "^3.0.0",
+                "http-proxy-agent": "^5.0.0",
+                "https-proxy-agent": "^5.0.1",
+                "is-potential-custom-element-name": "^1.0.1",
+                "nwsapi": "^2.2.2",
+                "parse5": "^7.1.1",
+                "saxes": "^6.0.0",
+                "symbol-tree": "^3.2.4",
+                "tough-cookie": "^4.1.2",
+                "w3c-xmlserializer": "^4.0.0",
+                "webidl-conversions": "^7.0.0",
+                "whatwg-encoding": "^2.0.0",
+                "whatwg-mimetype": "^3.0.0",
+                "whatwg-url": "^11.0.0",
+                "ws": "^8.11.0",
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "peerDependencies": {
+                "canvas": "^2.5.0"
+            },
+            "peerDependenciesMeta": {
+                "canvas": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/jsesc": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+            "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jsesc": "bin/jsesc"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/json-buffer": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+            "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json-parse-even-better-errors": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json-schema-traverse": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+            "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json-stable-stringify-without-jsonify": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+            "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "json5": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/jsonc-parser": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.3.1.tgz",
+            "integrity": "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/jsonfile": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
+            "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
+            "license": "MIT",
+            "dependencies": {
+                "universalify": "^2.0.0"
+            },
+            "optionalDependencies": {
+                "graceful-fs": "^4.1.6"
+            }
+        },
+        "node_modules/jspdf": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.2.tgz",
+            "integrity": "sha512-G0fQDJ5fAm6UW78HG6lNXyq09l0PrA1rpNY5i+ly17Zb1fMMFSmS+3lw4cnrAPGyouv2Y0ylujbY2Ieq3DSlKA==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/runtime": "^7.26.9",
+                "fast-png": "^6.2.0",
+                "fflate": "^0.8.1"
+            },
+            "optionalDependencies": {
+                "canvg": "^3.0.11",
+                "core-js": "^3.6.0",
+                "dompurify": "^3.2.4",
+                "html2canvas": "^1.0.0-rc.5"
+            }
+        },
+        "node_modules/jspdf-autotable": {
+            "version": "5.0.2",
+            "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.2.tgz",
+            "integrity": "sha512-YNKeB7qmx3pxOLcNeoqAv3qTS7KuvVwkFe5AduCawpop3NOkBUtqDToxNc225MlNecxT4kP2Zy3z/y/yvGdXUQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "jspdf": "^2 || ^3"
+            }
+        },
+        "node_modules/jsx-ast-utils": {
+            "version": "3.3.5",
+            "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+            "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-includes": "^3.1.6",
+                "array.prototype.flat": "^1.3.1",
+                "object.assign": "^4.1.4",
+                "object.values": "^1.1.6"
+            },
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
+        "node_modules/keyv": {
+            "version": "4.5.4",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+            "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "json-buffer": "3.0.1"
+            }
+        },
+        "node_modules/kind-of": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-1.1.0.tgz",
+            "integrity": "sha512-aUH6ElPnMGon2/YkxRIigV32MOpTVcoXQ1Oo8aYn40s+sJ3j+0gFZsT8HKDcxNy7Fi9zuquWtGaGAahOdv5p/g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/kleur": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+            "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/language-subtag-registry": {
+            "version": "0.3.23",
+            "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+            "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==",
+            "dev": true,
+            "license": "CC0-1.0"
+        },
+        "node_modules/language-tags": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz",
+            "integrity": "sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "language-subtag-registry": "^0.3.20"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/last-run": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/last-run/-/last-run-2.0.0.tgz",
+            "integrity": "sha512-j+y6WhTLN4Itnf9j5ZQos1BGPCS8DAwmgMroR3OzfxAsBxam0hMw7J8M3KqZl0pLQJ1jNnwIexg5DYpC/ctwEQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/lead": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/lead/-/lead-4.0.0.tgz",
+            "integrity": "sha512-DpMa59o5uGUWWjruMp71e6knmwKU3jRBBn1kjuLWN9EeIOxNeSAwvHf03WIl8g/ZMR2oSQC9ej3yeLBwdDc/pg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/leven": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+            "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/levn": {
+            "version": "0.4.1",
+            "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+            "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "prelude-ls": "^1.2.1",
+                "type-check": "~0.4.0"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/liftoff": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/liftoff/-/liftoff-5.0.1.tgz",
+            "integrity": "sha512-wwLXMbuxSF8gMvubFcFRp56lkFV69twvbU5vDPbaw+Q+/rF8j0HKjGbIdlSi+LuJm9jf7k9PB+nTxnsLMPcv2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "extend": "^3.0.2",
+                "findup-sync": "^5.0.0",
+                "fined": "^2.0.0",
+                "flagged-respawn": "^2.0.0",
+                "is-plain-object": "^5.0.0",
+                "rechoir": "^0.8.0",
+                "resolve": "^1.20.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/lilconfig": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+            "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/lines-and-columns": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/loader-utils": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.3.1.tgz",
+            "integrity": "sha512-FMJTLMXfCLMLfJxcX9PFqX5qD88Z5MRGaZCVzfuqeZSPsyiBzs+pahDQjbIWz2QIzPZz0NX9Zy4FX3lmK6YHIg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 12.13.0"
+            }
+        },
+        "node_modules/locate-path": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+            "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-locate": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/lodash-es": {
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+            "license": "MIT"
+        },
+        "node_modules/lodash.camelcase": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+            "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lodash.clonedeep": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+            "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+            "license": "MIT"
+        },
+        "node_modules/lodash.debounce": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+            "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lodash.isequal": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+            "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+            "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+            "license": "MIT"
+        },
+        "node_modules/lodash.memoize": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+            "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lodash.merge": {
+            "version": "4.6.2",
+            "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+            "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lodash.uniq": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+            "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "license": "MIT",
+            "dependencies": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            },
+            "bin": {
+                "loose-envify": "cli.js"
+            }
+        },
+        "node_modules/lower-case": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+            "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "tslib": "^2.0.3"
+            }
+        },
+        "node_modules/lru-cache": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+            "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "yallist": "^3.0.2"
+            }
+        },
+        "node_modules/lunr": {
+            "version": "2.3.9",
+            "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+            "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/lz-string": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+            "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "lz-string": "bin/bin.js"
+            }
+        },
+        "node_modules/magic-string": {
+            "version": "0.30.18",
+            "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
+            "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@jridgewell/sourcemap-codec": "^1.5.5"
+            }
+        },
+        "node_modules/make-dir": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+            "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "semver": "^7.5.3"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/make-dir/node_modules/semver": {
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/make-error": {
+            "version": "1.3.6",
+            "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+            "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/make-error-cause": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/make-error-cause/-/make-error-cause-1.2.2.tgz",
+            "integrity": "sha512-4TO2Y3HkBnis4c0dxhAgD/jprySYLACf7nwN6V0HAHDx59g12WlRpUmFy1bRHamjGUEEBrEvCq6SUpsEE2lhUg==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "make-error": "^1.2.0"
+            }
+        },
+        "node_modules/makeerror": {
+            "version": "1.0.12",
+            "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+            "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "tmpl": "1.0.5"
+            }
+        },
+        "node_modules/map-cache": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+            "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/marked": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+            "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "marked": "bin/marked.js"
+            },
+            "engines": {
+                "node": ">= 12"
+            }
+        },
+        "node_modules/math-intrinsics": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+            "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/mdn-data": {
+            "version": "2.0.30",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+            "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+            "dev": true,
+            "license": "CC0-1.0"
+        },
+        "node_modules/merge-stream": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+            "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/merge2": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+            "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/micromatch": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+            "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "braces": "^3.0.3",
+                "picomatch": "^2.3.1"
+            },
+            "engines": {
+                "node": ">=8.6"
+            }
+        },
+        "node_modules/micromatch/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mime-db": "1.52.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mimic-fn": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+            "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/min-indent": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+            "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/minimatch": {
+            "version": "9.0.3",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+            "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^2.0.1"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/minimist": {
+            "version": "1.2.8",
+            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+            "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/minipass": {
+            "version": "7.1.2",
+            "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+            "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=16 || 14 >=14.17"
+            }
+        },
+        "node_modules/ms": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+            "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/mute-stdout": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mute-stdout/-/mute-stdout-2.0.0.tgz",
+            "integrity": "sha512-32GSKM3Wyc8dg/p39lWPKYu8zci9mJFzV1Np9Of0ZEpe6Fhssn/FbI7ywAMd40uX+p3ZKh3T5EeCFv81qS3HmQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/nanoid": {
+            "version": "3.3.11",
+            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+            "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "bin": {
+                "nanoid": "bin/nanoid.cjs"
+            },
+            "engines": {
+                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+            }
+        },
+        "node_modules/napi-postinstall": {
+            "version": "0.3.3",
+            "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.3.tgz",
+            "integrity": "sha512-uTp172LLXSxuSYHv/kou+f6KW3SMppU9ivthaVTXian9sOt3XM/zHYHpRZiLgQoxeWfYUnslNWQHF1+G71xcow==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "napi-postinstall": "lib/cli.js"
+            },
+            "engines": {
+                "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/napi-postinstall"
+            }
+        },
+        "node_modules/natural-compare": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+            "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/next": {
+            "version": "12.3.7",
+            "resolved": "https://registry.npmjs.org/next/-/next-12.3.7.tgz",
+            "integrity": "sha512-3PDn+u77s5WpbkUrslBP6SKLMeUj9cSx251LOt+yP9fgnqXV/ydny81xQsclz9R6RzCLONMCtwK2RvDdLa/mJQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@next/env": "12.3.7",
+                "@swc/helpers": "0.4.11",
+                "caniuse-lite": "^1.0.30001406",
+                "postcss": "8.4.14",
+                "styled-jsx": "5.0.7",
+                "use-sync-external-store": "1.2.0"
+            },
+            "bin": {
+                "next": "dist/bin/next"
+            },
+            "engines": {
+                "node": ">=12.22.0"
+            },
+            "optionalDependencies": {
+                "@next/swc-android-arm-eabi": "12.3.4",
+                "@next/swc-android-arm64": "12.3.4",
+                "@next/swc-darwin-arm64": "12.3.4",
+                "@next/swc-darwin-x64": "12.3.4",
+                "@next/swc-freebsd-x64": "12.3.4",
+                "@next/swc-linux-arm-gnueabihf": "12.3.4",
+                "@next/swc-linux-arm64-gnu": "12.3.4",
+                "@next/swc-linux-arm64-musl": "12.3.4",
+                "@next/swc-linux-x64-gnu": "12.3.4",
+                "@next/swc-linux-x64-musl": "12.3.4",
+                "@next/swc-win32-arm64-msvc": "12.3.4",
+                "@next/swc-win32-ia32-msvc": "12.3.4",
+                "@next/swc-win32-x64-msvc": "12.3.4"
+            },
+            "peerDependencies": {
+                "fibers": ">= 3.1.0",
+                "node-sass": "^6.0.0 || ^7.0.0",
+                "react": "^17.0.2 || ^18.0.0-0",
+                "react-dom": "^17.0.2 || ^18.0.0-0",
+                "sass": "^1.3.0"
+            },
+            "peerDependenciesMeta": {
+                "fibers": {
+                    "optional": true
+                },
+                "node-sass": {
+                    "optional": true
+                },
+                "sass": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/next/node_modules/postcss": {
+            "version": "8.4.14",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+            "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "nanoid": "^3.3.4",
+                "picocolors": "^1.0.0",
+                "source-map-js": "^1.0.2"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/no-case": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+            "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "lower-case": "^2.0.2",
+                "tslib": "^2.0.3"
+            }
+        },
+        "node_modules/node-addon-api": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+            "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/node-int64": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+            "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/node-releases": {
+            "version": "2.0.19",
+            "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+            "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/normalize-path": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+            "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/normalize-url": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
+            "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/now-and-later": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/now-and-later/-/now-and-later-3.0.0.tgz",
+            "integrity": "sha512-pGO4pzSdaxhWTGkfSfHx3hVzJVslFPwBp2Myq9MYN/ChfJZF87ochMAXnvz6/58RJSf5ik2q9tXprBBrk2cpcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "once": "^1.4.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/npm-run-path": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+            "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "path-key": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/nth-check": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+            "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "boolbase": "^1.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/nth-check?sponsor=1"
+            }
+        },
+        "node_modules/nwsapi": {
+            "version": "2.2.21",
+            "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.21.tgz",
+            "integrity": "sha512-o6nIY3qwiSXl7/LuOU0Dmuctd34Yay0yeuZRLFmDPrrdHpXKFndPj3hM+YEPVHYC5fx2otBx4Ilc/gyYSAUaIA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/object-assign": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+            "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/object-inspect": {
+            "version": "1.13.4",
+            "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+            "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/object-is": {
+            "version": "1.1.6",
+            "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+            "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "define-properties": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/object-keys": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+            "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/object.assign": {
+            "version": "4.1.7",
+            "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+            "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.3",
+                "define-properties": "^1.2.1",
+                "es-object-atoms": "^1.0.0",
+                "has-symbols": "^1.1.0",
+                "object-keys": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/object.defaults": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+            "integrity": "sha512-c/K0mw/F11k4dEUBMW8naXUuBuhxRCfG7W+yFy8EcijU/rSmazOUd1XAEEe6bC0OuXY4HUKjTJv7xbxIMqdxrA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "array-each": "^1.0.1",
+                "array-slice": "^1.0.0",
+                "for-own": "^1.0.0",
+                "isobject": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/object.entries": {
+            "version": "1.1.9",
+            "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+            "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.4",
+                "define-properties": "^1.2.1",
+                "es-object-atoms": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/object.fromentries": {
+            "version": "2.0.8",
+            "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+            "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.2",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/object.groupby": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+            "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/object.pick": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+            "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "isobject": "^3.0.1"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/object.values": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+            "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.3",
+                "define-properties": "^1.2.1",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/once": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "wrappy": "1"
+            }
+        },
+        "node_modules/onetime": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+            "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mimic-fn": "^2.1.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/optionator": {
+            "version": "0.9.4",
+            "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+            "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "deep-is": "^0.1.3",
+                "fast-levenshtein": "^2.0.6",
+                "levn": "^0.4.1",
+                "prelude-ls": "^1.2.1",
+                "type-check": "^0.4.0",
+                "word-wrap": "^1.2.5"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/own-keys": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+            "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "get-intrinsic": "^1.2.6",
+                "object-keys": "^1.1.1",
+                "safe-push-apply": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/p-finally": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+            "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/p-limit": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+            "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "yocto-queue": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/p-locate": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+            "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-limit": "^3.0.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/p-queue": {
+            "version": "6.6.2",
+            "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+            "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "eventemitter3": "^4.0.4",
+                "p-timeout": "^3.2.0"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/p-queue/node_modules/eventemitter3": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+            "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/p-timeout": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+            "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-finally": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/p-try": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+            "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/pako": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+            "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+            "license": "(MIT AND Zlib)"
+        },
+        "node_modules/parchment": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/parchment/-/parchment-3.0.0.tgz",
+            "integrity": "sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==",
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/parent-module": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+            "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "callsites": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/parse-filepath": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+            "integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-absolute": "^1.0.0",
+                "map-cache": "^0.2.0",
+                "path-root": "^0.1.1"
+            },
+            "engines": {
+                "node": ">=0.8"
+            }
+        },
+        "node_modules/parse-json": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.0.0",
+                "error-ex": "^1.3.1",
+                "json-parse-even-better-errors": "^2.3.0",
+                "lines-and-columns": "^1.1.6"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/parse-passwd": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+            "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/parse5": {
+            "version": "7.3.0",
+            "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+            "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "entities": "^6.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/inikulin/parse5?sponsor=1"
+            }
+        },
+        "node_modules/parse5/node_modules/entities": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+            "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
+        "node_modules/path": {
+            "version": "0.12.7",
+            "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+            "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+            "license": "MIT",
+            "dependencies": {
+                "process": "^0.11.1",
+                "util": "^0.10.3"
+            }
+        },
+        "node_modules/path-exists": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+            "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-is-absolute": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/path-key": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+            "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/path-parse": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+            "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/path-root": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+            "integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "path-root-regex": "^0.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/path-root-regex": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+            "integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/path-scurry": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+            "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+            "dev": true,
+            "license": "BlueOak-1.0.0",
+            "dependencies": {
+                "lru-cache": "^10.2.0",
+                "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+            },
+            "engines": {
+                "node": ">=16 || 14 >=14.18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/path-scurry/node_modules/lru-cache": {
+            "version": "10.4.3",
+            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+            "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/path-type": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+            "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/performance-now": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+            "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "license": "ISC"
+        },
+        "node_modules/picomatch": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+            "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/pify": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz",
+            "integrity": "sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/pirates": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+            "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/pkg-dir": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
+            "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "find-up": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/pkg-dir/node_modules/find-up": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+            "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "locate-path": "^5.0.0",
+                "path-exists": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/pkg-dir/node_modules/locate-path": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+            "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-locate": "^4.1.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/pkg-dir/node_modules/p-limit": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+            "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-try": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/pkg-dir/node_modules/p-locate": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+            "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "p-limit": "^2.2.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/plugin-error": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-0.1.2.tgz",
+            "integrity": "sha512-WzZHcm4+GO34sjFMxQMqZbsz3xiNEgonCskQ9v+IroMmYgk/tas8dG+Hr2D6IbRPybZ12oWpzE/w3cGJ6FJzOw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-cyan": "^0.1.1",
+                "ansi-red": "^0.1.1",
+                "arr-diff": "^1.0.1",
+                "arr-union": "^2.0.1",
+                "extend-shallow": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/plugin-error/node_modules/extend-shallow": {
+            "version": "1.1.4",
+            "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-1.1.4.tgz",
+            "integrity": "sha512-L7AGmkO6jhDkEBBGWlLtftA80Xq8DipnrRPr0pyi7GQLXkaq9JYA4xF4z6qnadIC6euiTDKco0cGSU9muw+WTw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "kind-of": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/possible-typed-array-names": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+            "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/postcss": {
+            "version": "8.5.6",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+            "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "peer": true,
+            "dependencies": {
+                "nanoid": "^3.3.11",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/postcss-calc": {
+            "version": "8.2.4",
+            "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz",
+            "integrity": "sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "^6.0.9",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.2"
+            }
+        },
+        "node_modules/postcss-colormin": {
+            "version": "5.3.1",
+            "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz",
+            "integrity": "sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.21.4",
+                "caniuse-api": "^3.0.0",
+                "colord": "^2.9.1",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-convert-values": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz",
+            "integrity": "sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.21.4",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-discard-comments": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
+            "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-discard-duplicates": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
+            "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-discard-empty": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
+            "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-discard-overridden": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
+            "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-merge-longhand": {
+            "version": "5.1.7",
+            "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
+            "integrity": "sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0",
+                "stylehacks": "^5.1.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-merge-rules": {
+            "version": "5.1.4",
+            "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz",
+            "integrity": "sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.21.4",
+                "caniuse-api": "^3.0.0",
+                "cssnano-utils": "^3.1.0",
+                "postcss-selector-parser": "^6.0.5"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-minify-font-values": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz",
+            "integrity": "sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-minify-gradients": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz",
+            "integrity": "sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "colord": "^2.9.1",
+                "cssnano-utils": "^3.1.0",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-minify-params": {
+            "version": "5.1.4",
+            "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz",
+            "integrity": "sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.21.4",
+                "cssnano-utils": "^3.1.0",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-minify-selectors": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz",
+            "integrity": "sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "^6.0.5"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-modules": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.3.1.tgz",
+            "integrity": "sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "generic-names": "^4.0.0",
+                "icss-replace-symbols": "^1.1.0",
+                "lodash.camelcase": "^4.3.0",
+                "postcss-modules-extract-imports": "^3.0.0",
+                "postcss-modules-local-by-default": "^4.0.0",
+                "postcss-modules-scope": "^3.0.0",
+                "postcss-modules-values": "^4.0.0",
+                "string-hash": "^1.1.1"
+            },
+            "peerDependencies": {
+                "postcss": "^8.0.0"
+            }
+        },
+        "node_modules/postcss-modules-extract-imports": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz",
+            "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": "^10 || ^12 || >= 14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.1.0"
+            }
+        },
+        "node_modules/postcss-modules-local-by-default": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz",
+            "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "icss-utils": "^5.0.0",
+                "postcss-selector-parser": "^7.0.0",
+                "postcss-value-parser": "^4.1.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >= 14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.1.0"
+            }
+        },
+        "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+            "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/postcss-modules-scope": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz",
+            "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "postcss-selector-parser": "^7.0.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >= 14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.1.0"
+            }
+        },
+        "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": {
+            "version": "7.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+            "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/postcss-modules-values": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+            "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "icss-utils": "^5.0.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >= 14"
+            },
+            "peerDependencies": {
+                "postcss": "^8.1.0"
+            }
+        },
+        "node_modules/postcss-normalize-charset": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
+            "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-display-values": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz",
+            "integrity": "sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-positions": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz",
+            "integrity": "sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-repeat-style": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz",
+            "integrity": "sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-string": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz",
+            "integrity": "sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-timing-functions": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz",
+            "integrity": "sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-unicode": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz",
+            "integrity": "sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.21.4",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-url": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz",
+            "integrity": "sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "normalize-url": "^6.0.1",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-normalize-whitespace": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz",
+            "integrity": "sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-ordered-values": {
+            "version": "5.1.3",
+            "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz",
+            "integrity": "sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssnano-utils": "^3.1.0",
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-reduce-initial": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz",
+            "integrity": "sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.21.4",
+                "caniuse-api": "^3.0.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-reduce-transforms": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz",
+            "integrity": "sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-selector-parser": {
+            "version": "6.1.2",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+            "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/postcss-svgo": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
+            "integrity": "sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-value-parser": "^4.2.0",
+                "svgo": "^2.7.0"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/css-select": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
+            "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "boolbase": "^1.0.0",
+                "css-what": "^6.0.1",
+                "domhandler": "^4.3.1",
+                "domutils": "^2.8.0",
+                "nth-check": "^2.0.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/fb55"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/css-tree": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+            "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "mdn-data": "2.0.14",
+                "source-map": "^0.6.1"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/csso": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+            "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "css-tree": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=8.0.0"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/dom-serializer": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
+            "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "domelementtype": "^2.0.1",
+                "domhandler": "^4.2.0",
+                "entities": "^2.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/domhandler": {
+            "version": "4.3.1",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz",
+            "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "domelementtype": "^2.2.0"
+            },
+            "engines": {
+                "node": ">= 4"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domhandler?sponsor=1"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/domutils": {
+            "version": "2.8.0",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+            "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "dom-serializer": "^1.0.1",
+                "domelementtype": "^2.2.0",
+                "domhandler": "^4.2.0"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/domutils?sponsor=1"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/entities": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+            "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
+        "node_modules/postcss-svgo/node_modules/mdn-data": {
+            "version": "2.0.14",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+            "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+            "dev": true,
+            "license": "CC0-1.0"
+        },
+        "node_modules/postcss-svgo/node_modules/svgo": {
+            "version": "2.8.0",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+            "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^4.1.3",
+                "css-tree": "^1.1.3",
+                "csso": "^4.2.0",
+                "picocolors": "^1.0.0",
+                "stable": "^0.1.8"
+            },
+            "bin": {
+                "svgo": "bin/svgo"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/postcss-unique-selectors": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz",
+            "integrity": "sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "postcss-selector-parser": "^6.0.5"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/postcss-value-parser": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/prelude-ls": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+            "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/prettier": {
+            "version": "3.5.3",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+            "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/pretty-format": {
+            "version": "27.5.1",
+            "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+            "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1",
+                "ansi-styles": "^5.0.0",
+                "react-is": "^17.0.1"
+            },
+            "engines": {
+                "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+            }
+        },
+        "node_modules/pretty-format/node_modules/ansi-styles": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+            "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+            }
+        },
+        "node_modules/primeflex": {
+            "version": "3.3.1",
+            "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz",
+            "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==",
+            "license": "MIT"
+        },
+        "node_modules/primeicons": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+            "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==",
+            "license": "MIT"
+        },
+        "node_modules/process": {
+            "version": "0.11.10",
+            "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+            "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.6.0"
+            }
+        },
+        "node_modules/process-nextick-args": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+            "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/promise.series": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz",
+            "integrity": "sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.12"
+            }
+        },
+        "node_modules/prompts": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
+            "integrity": "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "kleur": "^3.0.3",
+                "sisteransi": "^1.0.5"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
+        "node_modules/prop-types/node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "license": "MIT"
+        },
+        "node_modules/psl": {
+            "version": "1.15.0",
+            "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
+            "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "punycode": "^2.3.1"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/lupomontero"
+            }
+        },
+        "node_modules/punycode": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+            "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/pure-rand": {
+            "version": "6.1.0",
+            "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
+            "integrity": "sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/dubzzz"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/fast-check"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/querystringify": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+            "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/queue-microtask": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+            "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/quill": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/quill/-/quill-2.0.3.tgz",
+            "integrity": "sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "eventemitter3": "^5.0.1",
+                "lodash-es": "^4.17.21",
+                "parchment": "^3.0.0",
+                "quill-delta": "^5.1.0"
+            },
+            "engines": {
+                "npm": ">=8.2.3"
+            }
+        },
+        "node_modules/quill-delta": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-5.1.0.tgz",
+            "integrity": "sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==",
+            "license": "MIT",
+            "dependencies": {
+                "fast-diff": "^1.3.0",
+                "lodash.clonedeep": "^4.5.0",
+                "lodash.isequal": "^4.5.0"
+            },
+            "engines": {
+                "node": ">= 12.0.0"
+            }
+        },
+        "node_modules/raf": {
+            "version": "3.4.1",
+            "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+            "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "performance-now": "^2.1.0"
+            }
+        },
+        "node_modules/randombytes": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+            "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "safe-buffer": "^5.1.0"
+            }
+        },
+        "node_modules/react": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-dom": {
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.2"
+            },
+            "peerDependencies": {
+                "react": "^18.3.1"
+            }
+        },
+        "node_modules/react-is": {
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+            "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/react-transition-group": {
+            "version": "4.4.5",
+            "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+            "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "@babel/runtime": "^7.5.5",
+                "dom-helpers": "^5.0.1",
+                "loose-envify": "^1.4.0",
+                "prop-types": "^15.6.2"
+            },
+            "peerDependencies": {
+                "react": ">=16.6.0",
+                "react-dom": ">=16.6.0"
+            }
+        },
+        "node_modules/readable-stream": {
+            "version": "2.3.8",
+            "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+            "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.3",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~2.0.0",
+                "safe-buffer": "~5.1.1",
+                "string_decoder": "~1.1.1",
+                "util-deprecate": "~1.0.1"
+            }
+        },
+        "node_modules/readable-stream/node_modules/isarray": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+            "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/readable-stream/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/readdirp": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+            "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "picomatch": "^2.2.1"
+            },
+            "engines": {
+                "node": ">=8.10.0"
+            }
+        },
+        "node_modules/readdirp/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
+        "node_modules/rechoir": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+            "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "resolve": "^1.20.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/redent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+            "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "indent-string": "^4.0.0",
+                "strip-indent": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/reflect.getprototypeof": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+            "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.9",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.0.0",
+                "get-intrinsic": "^1.2.7",
+                "get-proto": "^1.0.1",
+                "which-builtin-type": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/regenerate": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+            "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/regenerate-unicode-properties": {
+            "version": "10.2.0",
+            "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz",
+            "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "regenerate": "^1.4.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/regenerator-runtime": {
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+            "license": "MIT",
+            "optional": true
+        },
+        "node_modules/regexp.prototype.flags": {
+            "version": "1.5.4",
+            "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+            "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "define-properties": "^1.2.1",
+                "es-errors": "^1.3.0",
+                "get-proto": "^1.0.1",
+                "gopd": "^1.2.0",
+                "set-function-name": "^2.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/regexpu-core": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
+            "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "regenerate": "^1.4.2",
+                "regenerate-unicode-properties": "^10.2.0",
+                "regjsgen": "^0.8.0",
+                "regjsparser": "^0.12.0",
+                "unicode-match-property-ecmascript": "^2.0.0",
+                "unicode-match-property-value-ecmascript": "^2.1.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/regjsgen": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz",
+            "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/regjsparser": {
+            "version": "0.12.0",
+            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz",
+            "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "jsesc": "~3.0.2"
+            },
+            "bin": {
+                "regjsparser": "bin/parser"
+            }
+        },
+        "node_modules/regjsparser/node_modules/jsesc": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+            "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jsesc": "bin/jsesc"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/remove-trailing-separator": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+            "integrity": "sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/replace-ext": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
+            "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/replace-homedir": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/replace-homedir/-/replace-homedir-2.0.0.tgz",
+            "integrity": "sha512-bgEuQQ/BHW0XkkJtawzrfzHFSN70f/3cNOiHa2QsYxqrjaC30X1k74FJ6xswVBP0sr0SpGIdVFuPwfrYziVeyw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/require-directory": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+            "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/requireindex": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz",
+            "integrity": "sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.5"
+            }
+        },
+        "node_modules/requires-port": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+            "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/resolve": {
+            "version": "1.22.10",
+            "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+            "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-core-module": "^2.16.0",
+                "path-parse": "^1.0.7",
+                "supports-preserve-symlinks-flag": "^1.0.0"
+            },
+            "bin": {
+                "resolve": "bin/resolve"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/resolve-cwd": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
+            "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "resolve-from": "^5.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/resolve-cwd/node_modules/resolve-from": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+            "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/resolve-dir": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+            "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "expand-tilde": "^2.0.0",
+                "global-modules": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/resolve-from": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+            "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/resolve-options": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-options/-/resolve-options-2.0.0.tgz",
+            "integrity": "sha512-/FopbmmFOQCfsCx77BRFdKOniglTiHumLgwvd6IDPihy1GKkadZbgQJBcTb2lMzSR1pndzd96b1nZrreZ7+9/A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "value-or-function": "^4.0.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/resolve-pkg-maps": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+            "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+            }
+        },
+        "node_modules/resolve.exports": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
+            "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/reusify": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+            "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "iojs": ">=1.0.0",
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/rgbcolor": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+            "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+            "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+            "optional": true,
+            "engines": {
+                "node": ">= 0.8.15"
+            }
+        },
+        "node_modules/rimraf": {
+            "version": "3.0.2",
+            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+            "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+            "deprecated": "Rimraf versions prior to v4 are no longer supported",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "glob": "^7.1.3"
+            },
+            "bin": {
+                "rimraf": "bin.js"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/rimraf/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/rimraf/node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "deprecated": "Glob versions prior to v9 are no longer supported",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/rimraf/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/rollup": {
+            "version": "2.79.2",
+            "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
+            "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "rollup": "dist/bin/rollup"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "optionalDependencies": {
+                "fsevents": "~2.3.2"
+            }
+        },
+        "node_modules/rollup-plugin-postcss": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz",
+            "integrity": "sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "chalk": "^4.1.0",
+                "concat-with-sourcemaps": "^1.1.0",
+                "cssnano": "^5.0.1",
+                "import-cwd": "^3.0.0",
+                "p-queue": "^6.6.2",
+                "pify": "^5.0.0",
+                "postcss-load-config": "^3.0.0",
+                "postcss-modules": "^4.0.0",
+                "promise.series": "^0.2.0",
+                "resolve": "^1.19.0",
+                "rollup-pluginutils": "^2.8.2",
+                "safe-identifier": "^0.4.2",
+                "style-inject": "^0.3.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "postcss": "8.x"
+            }
+        },
+        "node_modules/rollup-plugin-postcss/node_modules/postcss-load-config": {
+            "version": "3.1.4",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+            "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "lilconfig": "^2.0.5",
+                "yaml": "^1.10.2"
+            },
+            "engines": {
+                "node": ">= 10"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/postcss/"
+            },
+            "peerDependencies": {
+                "postcss": ">=8.0.9",
+                "ts-node": ">=9.0.0"
+            },
+            "peerDependenciesMeta": {
+                "postcss": {
+                    "optional": true
+                },
+                "ts-node": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/rollup-plugin-terser": {
+            "version": "7.0.2",
+            "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+            "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+            "deprecated": "This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.10.4",
+                "jest-worker": "^26.2.1",
+                "serialize-javascript": "^4.0.0",
+                "terser": "^5.0.0"
+            },
+            "peerDependencies": {
+                "rollup": "^2.0.0"
+            }
+        },
+        "node_modules/rollup-plugin-terser/node_modules/jest-worker": {
+            "version": "26.6.2",
+            "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+            "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/node": "*",
+                "merge-stream": "^2.0.0",
+                "supports-color": "^7.0.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/rollup-pluginutils": {
+            "version": "2.8.2",
+            "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+            "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "estree-walker": "^0.6.1"
+            }
+        },
+        "node_modules/rollup-pluginutils/node_modules/estree-walker": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+            "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/run-parallel": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+            "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "queue-microtask": "^1.2.2"
+            }
+        },
+        "node_modules/safe-array-concat": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+            "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.2",
+                "get-intrinsic": "^1.2.6",
+                "has-symbols": "^1.1.0",
+                "isarray": "^2.0.5"
+            },
+            "engines": {
+                "node": ">=0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/safe-buffer": {
+            "version": "5.2.1",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+            "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/feross"
+                },
+                {
+                    "type": "patreon",
+                    "url": "https://www.patreon.com/feross"
+                },
+                {
+                    "type": "consulting",
+                    "url": "https://feross.org/support"
+                }
+            ],
+            "license": "MIT"
+        },
+        "node_modules/safe-identifier": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz",
+            "integrity": "sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/safe-push-apply": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+            "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "isarray": "^2.0.5"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/safe-regex-test": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+            "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "es-errors": "^1.3.0",
+                "is-regex": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/safer-buffer": {
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+            "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/sass": {
+            "version": "1.92.0",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.92.0.tgz",
+            "integrity": "sha512-KDNI0BxgIRDAfJgzNm5wuy+4yOCIZyrUbjSpiU/JItfih+KGXAVefKL53MTml054MmBA3DDKIBMSI/7XLxZJ3A==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "chokidar": "^4.0.0",
+                "immutable": "^5.0.2",
+                "source-map-js": ">=0.6.2 <2.0.0"
+            },
+            "bin": {
+                "sass": "sass.js"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "optionalDependencies": {
+                "@parcel/watcher": "^2.4.1"
+            }
+        },
+        "node_modules/sass/node_modules/chokidar": {
+            "version": "4.0.3",
+            "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+            "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+            "devOptional": true,
+            "license": "MIT",
+            "dependencies": {
+                "readdirp": "^4.0.1"
+            },
+            "engines": {
+                "node": ">= 14.16.0"
+            },
+            "funding": {
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
+        "node_modules/sass/node_modules/readdirp": {
+            "version": "4.1.2",
+            "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+            "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+            "devOptional": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 14.18.0"
+            },
+            "funding": {
+                "type": "individual",
+                "url": "https://paulmillr.com/funding/"
+            }
+        },
+        "node_modules/saxes": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
+            "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "xmlchars": "^2.2.0"
+            },
+            "engines": {
+                "node": ">=v12.22.7"
+            }
+        },
+        "node_modules/scheduler": {
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            }
+        },
+        "node_modules/search-insights": {
+            "version": "2.17.3",
+            "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.3.tgz",
+            "integrity": "sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==",
+            "license": "MIT",
+            "peer": true
+        },
+        "node_modules/semver": {
+            "version": "6.3.1",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+            "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+            "dev": true,
+            "license": "ISC",
+            "bin": {
+                "semver": "bin/semver.js"
+            }
+        },
+        "node_modules/semver-greatest-satisfied-range": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-2.0.0.tgz",
+            "integrity": "sha512-lH3f6kMbwyANB7HuOWRMlLCa2itaCrZJ+SAqqkSZrZKO/cAsk2EOyaKHUtNkVLFyFW9pct22SFesFp3Z7zpA0g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "sver": "^1.8.3"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/serialize-javascript": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+            "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "randombytes": "^2.1.0"
+            }
+        },
+        "node_modules/set-function-length": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+            "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "define-data-property": "^1.1.4",
+                "es-errors": "^1.3.0",
+                "function-bind": "^1.1.2",
+                "get-intrinsic": "^1.2.4",
+                "gopd": "^1.0.1",
+                "has-property-descriptors": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/set-function-name": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+            "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "define-data-property": "^1.1.4",
+                "es-errors": "^1.3.0",
+                "functions-have-names": "^1.2.3",
+                "has-property-descriptors": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/set-proto": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+            "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "dunder-proto": "^1.0.1",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/shebang-command": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+            "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "shebang-regex": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/shebang-regex": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+            "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/shiki": {
+            "version": "0.14.7",
+            "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.7.tgz",
+            "integrity": "sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-sequence-parser": "^1.1.0",
+                "jsonc-parser": "^3.2.0",
+                "vscode-oniguruma": "^1.7.0",
+                "vscode-textmate": "^8.0.0"
+            }
+        },
+        "node_modules/side-channel": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+            "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "object-inspect": "^1.13.3",
+                "side-channel-list": "^1.0.0",
+                "side-channel-map": "^1.0.1",
+                "side-channel-weakmap": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/side-channel-list": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+            "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "object-inspect": "^1.13.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/side-channel-map": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+            "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.5",
+                "object-inspect": "^1.13.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/side-channel-weakmap": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+            "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "es-errors": "^1.3.0",
+                "get-intrinsic": "^1.2.5",
+                "object-inspect": "^1.13.3",
+                "side-channel-map": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/signal-exit": {
+            "version": "3.0.7",
+            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+            "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/sisteransi": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
+            "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/slash": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+            "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/snake-case": {
+            "version": "3.0.4",
+            "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+            "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "dot-case": "^3.0.4",
+                "tslib": "^2.0.3"
+            }
+        },
+        "node_modules/source-map": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+            "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/source-map-js": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+            "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/source-map-support": {
+            "version": "0.5.13",
+            "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+            "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "buffer-from": "^1.0.0",
+                "source-map": "^0.6.0"
+            }
+        },
+        "node_modules/sparkles": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/sparkles/-/sparkles-2.1.0.tgz",
+            "integrity": "sha512-r7iW1bDw8R/cFifrD3JnQJX0K1jqT0kprL48BiBpLZLJPmAm34zsVBsK5lc7HirZYZqMW65dOXZgbAGt/I6frg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/sprintf-js": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+            "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==",
+            "dev": true,
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/stable": {
+            "version": "0.1.8",
+            "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+            "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+            "deprecated": "Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/stable-hash": {
+            "version": "0.0.5",
+            "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
+            "integrity": "sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/stack-utils": {
+            "version": "2.0.6",
+            "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz",
+            "integrity": "sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "escape-string-regexp": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/stack-utils/node_modules/escape-string-regexp": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
+            "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/stackblur-canvas": {
+            "version": "2.7.0",
+            "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+            "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=0.1.14"
+            }
+        },
+        "node_modules/stop-iteration-iterator": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+            "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "es-errors": "^1.3.0",
+                "internal-slot": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/stream-composer": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/stream-composer/-/stream-composer-1.0.2.tgz",
+            "integrity": "sha512-bnBselmwfX5K10AH6L4c8+S5lgZMWI7ZYrz2rvYjCPB2DIMC4Ig8OpxGpNJSxRZ58oti7y1IcNvjBAz9vW5m4w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "streamx": "^2.13.2"
+            }
+        },
+        "node_modules/stream-exhaust": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/stream-exhaust/-/stream-exhaust-1.0.2.tgz",
+            "integrity": "sha512-b/qaq/GlBK5xaq1yrK9/zFcyRSTNxmcZwFLGSTG0mXgZl/4Z6GgiyYOXOvY7N3eEvFRAG1bkDRz5EPGSvPYQlw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/streamx": {
+            "version": "2.22.1",
+            "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.22.1.tgz",
+            "integrity": "sha512-znKXEBxfatz2GBNK02kRnCXjV+AA4kjZIUxeWSr3UGirZMJfTE9uiwKHobnbgxWyL/JWro8tTq+vOqAK1/qbSA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fast-fifo": "^1.3.2",
+                "text-decoder": "^1.1.0"
+            },
+            "optionalDependencies": {
+                "bare-events": "^2.2.0"
+            }
+        },
+        "node_modules/string_decoder": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "safe-buffer": "~5.1.0"
+            }
+        },
+        "node_modules/string_decoder/node_modules/safe-buffer": {
+            "version": "5.1.2",
+            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+            "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/string-hash": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+            "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==",
+            "dev": true,
+            "license": "CC0-1.0"
+        },
+        "node_modules/string-length": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
+            "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "char-regex": "^1.0.2",
+                "strip-ansi": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/string-width": {
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/string-width-cjs": {
+            "name": "string-width",
+            "version": "4.2.3",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "emoji-regex": "^8.0.0",
+                "is-fullwidth-code-point": "^3.0.0",
+                "strip-ansi": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/string-width-cjs/node_modules/emoji-regex": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/string-width/node_modules/emoji-regex": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/string.prototype.includes": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
+            "integrity": "sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/string.prototype.matchall": {
+            "version": "4.0.12",
+            "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+            "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.3",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.6",
+                "es-errors": "^1.3.0",
+                "es-object-atoms": "^1.0.0",
+                "get-intrinsic": "^1.2.6",
+                "gopd": "^1.2.0",
+                "has-symbols": "^1.1.0",
+                "internal-slot": "^1.1.0",
+                "regexp.prototype.flags": "^1.5.3",
+                "set-function-name": "^2.0.2",
+                "side-channel": "^1.1.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/string.prototype.repeat": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+            "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "define-properties": "^1.1.3",
+                "es-abstract": "^1.17.5"
+            }
+        },
+        "node_modules/string.prototype.trim": {
+            "version": "1.2.10",
+            "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+            "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.2",
+                "define-data-property": "^1.1.4",
+                "define-properties": "^1.2.1",
+                "es-abstract": "^1.23.5",
+                "es-object-atoms": "^1.0.0",
+                "has-property-descriptors": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/string.prototype.trimend": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+            "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.2",
+                "define-properties": "^1.2.1",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/string.prototype.trimstart": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+            "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "define-properties": "^1.2.1",
+                "es-object-atoms": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/strip-ansi": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-ansi-cjs": {
+            "name": "strip-ansi",
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-bom": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
+            "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-final-newline": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+            "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/strip-indent": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+            "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "min-indent": "^1.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/strip-json-comments": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+            "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/style-inject": {
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz",
+            "integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/styled-jsx": {
+            "version": "5.0.7",
+            "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.7.tgz",
+            "integrity": "sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 12.0.0"
+            },
+            "peerDependencies": {
+                "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+            },
+            "peerDependenciesMeta": {
+                "@babel/core": {
+                    "optional": true
+                },
+                "babel-plugin-macros": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/stylehacks": {
+            "version": "5.1.1",
+            "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
+            "integrity": "sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "browserslist": "^4.21.4",
+                "postcss-selector-parser": "^6.0.4"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.2.15"
+            }
+        },
+        "node_modules/supports-color": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+            "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/supports-preserve-symlinks-flag": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+            "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/sver": {
+            "version": "1.8.4",
+            "resolved": "https://registry.npmjs.org/sver/-/sver-1.8.4.tgz",
+            "integrity": "sha512-71o1zfzyawLfIWBOmw8brleKyvnbn73oVHNCsu51uPMz/HWiKkkXsI31JjHW5zqXEqnPYkIiHd8ZmL7FCimLEA==",
+            "dev": true,
+            "license": "MIT",
+            "optionalDependencies": {
+                "semver": "^6.3.0"
+            }
+        },
+        "node_modules/svg-parser": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+            "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/svg-pathdata": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+            "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+            "license": "MIT",
+            "optional": true,
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
+        "node_modules/svgo": {
+            "version": "3.3.2",
+            "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+            "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@trysound/sax": "0.2.0",
+                "commander": "^7.2.0",
+                "css-select": "^5.1.0",
+                "css-tree": "^2.3.1",
+                "css-what": "^6.1.0",
+                "csso": "^5.0.5",
+                "picocolors": "^1.0.0"
+            },
+            "bin": {
+                "svgo": "bin/svgo"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/svgo"
+            }
+        },
+        "node_modules/symbol-tree": {
+            "version": "3.2.4",
+            "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+            "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/teex": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/teex/-/teex-1.0.1.tgz",
+            "integrity": "sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "streamx": "^2.12.5"
+            }
+        },
+        "node_modules/terser": {
+            "version": "5.44.0",
+            "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz",
+            "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "@jridgewell/source-map": "^0.3.3",
+                "acorn": "^8.15.0",
+                "commander": "^2.20.0",
+                "source-map-support": "~0.5.20"
+            },
+            "bin": {
+                "terser": "bin/terser"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/terser/node_modules/commander": {
+            "version": "2.20.3",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+            "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/terser/node_modules/source-map-support": {
+            "version": "0.5.21",
+            "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+            "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "buffer-from": "^1.0.0",
+                "source-map": "^0.6.0"
+            }
+        },
+        "node_modules/test-exclude": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
+            "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "@istanbuljs/schema": "^0.1.2",
+                "glob": "^7.1.4",
+                "minimatch": "^3.0.4"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
+        "node_modules/test-exclude/node_modules/brace-expansion": {
+            "version": "1.1.12",
+            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+            "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "balanced-match": "^1.0.0",
+                "concat-map": "0.0.1"
+            }
+        },
+        "node_modules/test-exclude/node_modules/glob": {
+            "version": "7.2.3",
+            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+            "deprecated": "Glob versions prior to v9 are no longer supported",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "fs.realpath": "^1.0.0",
+                "inflight": "^1.0.4",
+                "inherits": "2",
+                "minimatch": "^3.1.1",
+                "once": "^1.3.0",
+                "path-is-absolute": "^1.0.0"
+            },
+            "engines": {
+                "node": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
+        "node_modules/test-exclude/node_modules/minimatch": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "brace-expansion": "^1.1.7"
+            },
+            "engines": {
+                "node": "*"
+            }
+        },
+        "node_modules/text-decoder": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz",
+            "integrity": "sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "b4a": "^1.6.4"
+            }
+        },
+        "node_modules/text-segmentation": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+            "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "utrie": "^1.0.2"
+            }
+        },
+        "node_modules/text-table": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/through2": {
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+            "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "readable-stream": "~2.3.6",
+                "xtend": "~4.0.1"
+            }
+        },
+        "node_modules/tinyglobby": {
+            "version": "0.2.14",
+            "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
+            "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fdir": "^6.4.4",
+                "picomatch": "^4.0.2"
+            },
+            "engines": {
+                "node": ">=12.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/SuperchupuDev"
+            }
+        },
+        "node_modules/tmpl": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+            "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
+            "dev": true,
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/to-regex-range": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+            "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-number": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=8.0"
+            }
+        },
+        "node_modules/to-through": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/to-through/-/to-through-3.0.0.tgz",
+            "integrity": "sha512-y8MN937s/HVhEoBU1SxfHC+wxCHkV1a9gW8eAdTadYh/bGyesZIVcbjI+mSpFbSVwQici/XjBjuUyri1dnXwBw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "streamx": "^2.12.5"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/tough-cookie": {
+            "version": "4.1.4",
+            "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
+            "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "psl": "^1.1.33",
+                "punycode": "^2.1.1",
+                "universalify": "^0.2.0",
+                "url-parse": "^1.5.3"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/tough-cookie/node_modules/universalify": {
+            "version": "0.2.0",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+            "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4.0.0"
+            }
+        },
+        "node_modules/tr46": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz",
+            "integrity": "sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "punycode": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/ts-api-utils": {
+            "version": "1.4.3",
+            "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+            "integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=16"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.2.0"
+            }
+        },
+        "node_modules/tsconfig-paths": {
+            "version": "3.15.0",
+            "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+            "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@types/json5": "^0.0.29",
+                "json5": "^1.0.2",
+                "minimist": "^1.2.6",
+                "strip-bom": "^3.0.0"
+            }
+        },
+        "node_modules/tsconfig-paths/node_modules/json5": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+            "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "minimist": "^1.2.0"
+            },
+            "bin": {
+                "json5": "lib/cli.js"
+            }
+        },
+        "node_modules/tsconfig-paths/node_modules/strip-bom": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+            "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/tslib": {
+            "version": "2.8.1",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+            "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+            "license": "0BSD"
+        },
+        "node_modules/type-check": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+            "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "prelude-ls": "^1.2.1"
+            },
+            "engines": {
+                "node": ">= 0.8.0"
+            }
+        },
+        "node_modules/type-detect": {
+            "version": "4.0.8",
+            "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+            "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/type-fest": {
+            "version": "0.20.2",
+            "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+            "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+            "dev": true,
+            "license": "(MIT OR CC0-1.0)",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/typed-array-buffer": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+            "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "es-errors": "^1.3.0",
+                "is-typed-array": "^1.1.14"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            }
+        },
+        "node_modules/typed-array-byte-length": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+            "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.8",
+                "for-each": "^0.3.3",
+                "gopd": "^1.2.0",
+                "has-proto": "^1.2.0",
+                "is-typed-array": "^1.1.14"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/typed-array-byte-offset": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+            "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "available-typed-arrays": "^1.0.7",
+                "call-bind": "^1.0.8",
+                "for-each": "^0.3.3",
+                "gopd": "^1.2.0",
+                "has-proto": "^1.2.0",
+                "is-typed-array": "^1.1.15",
+                "reflect.getprototypeof": "^1.0.9"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/typed-array-length": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+            "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bind": "^1.0.7",
+                "for-each": "^0.3.3",
+                "gopd": "^1.0.1",
+                "is-typed-array": "^1.1.13",
+                "possible-typed-array-names": "^1.0.0",
+                "reflect.getprototypeof": "^1.0.6"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/typedoc": {
+            "version": "0.24.8",
+            "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.24.8.tgz",
+            "integrity": "sha512-ahJ6Cpcvxwaxfu4KtjA8qZNqS43wYt6JL27wYiIgl1vd38WW/KWX11YuAeZhuz9v+ttrutSsgK+XO1CjL1kA3w==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "lunr": "^2.3.9",
+                "marked": "^4.3.0",
+                "minimatch": "^9.0.0",
+                "shiki": "^0.14.1"
+            },
+            "bin": {
+                "typedoc": "bin/typedoc"
+            },
+            "engines": {
+                "node": ">= 14.14"
+            },
+            "peerDependencies": {
+                "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x"
+            }
+        },
+        "node_modules/typescript": {
+            "version": "5.1.6",
+            "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+            "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "bin": {
+                "tsc": "bin/tsc",
+                "tsserver": "bin/tsserver"
+            },
+            "engines": {
+                "node": ">=14.17"
+            }
+        },
+        "node_modules/uglify-js": {
+            "version": "3.19.3",
+            "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+            "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "bin": {
+                "uglifyjs": "bin/uglifyjs"
+            },
+            "engines": {
+                "node": ">=0.8.0"
+            }
+        },
+        "node_modules/uglifycss": {
+            "version": "0.0.25",
+            "resolved": "https://registry.npmjs.org/uglifycss/-/uglifycss-0.0.25.tgz",
+            "integrity": "sha512-MPfsrz1Cek1uby3nnPbCBjfcu4q4HxdLnWzYPShO+mHYjEO+C1PDAHH4Q7rZLImv3UF5LXOHCdoz4g32+nb5xw==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "uglifycss": "uglifycss"
+            }
+        },
+        "node_modules/unbox-primitive": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+            "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.3",
+                "has-bigints": "^1.0.2",
+                "has-symbols": "^1.1.0",
+                "which-boxed-primitive": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/unc-path-regex": {
+            "version": "0.1.2",
+            "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+            "integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/undertaker": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-2.0.0.tgz",
+            "integrity": "sha512-tO/bf30wBbTsJ7go80j0RzA2rcwX6o7XPBpeFcb+jzoeb4pfMM2zUeSDIkY1AWqeZabWxaQZ/h8N9t35QKDLPQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "bach": "^2.0.1",
+                "fast-levenshtein": "^3.0.0",
+                "last-run": "^2.0.0",
+                "undertaker-registry": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/undertaker-registry": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/undertaker-registry/-/undertaker-registry-2.0.0.tgz",
+            "integrity": "sha512-+hhVICbnp+rlzZMgxXenpvTxpuvA67Bfgtt+O9WOE5jo7w/dyiF1VmoZVIHvP2EkUjsyKyTwYKlLhA+j47m1Ew==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/undertaker/node_modules/fast-levenshtein": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-3.0.0.tgz",
+            "integrity": "sha512-hKKNajm46uNmTlhHSyZkmToAc56uZJwYq7yrciZjqOxnlfQwERDQJmHPUp7m1m9wx8vgOe8IaCKZ5Kv2k1DdCQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fastest-levenshtein": "^1.0.7"
+            }
+        },
+        "node_modules/undici-types": {
+            "version": "6.21.0",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+            "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/unicode-canonical-property-names-ecmascript": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
+            "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/unicode-match-property-ecmascript": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+            "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "unicode-canonical-property-names-ecmascript": "^2.0.0",
+                "unicode-property-aliases-ecmascript": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/unicode-match-property-value-ecmascript": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz",
+            "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/unicode-property-aliases-ecmascript": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+            "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/universalify": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+            "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.0.0"
+            }
+        },
+        "node_modules/unrs-resolver": {
+            "version": "1.11.1",
+            "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
+            "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
+            "dev": true,
+            "hasInstallScript": true,
+            "license": "MIT",
+            "dependencies": {
+                "napi-postinstall": "^0.3.0"
+            },
+            "funding": {
+                "url": "https://opencollective.com/unrs-resolver"
+            },
+            "optionalDependencies": {
+                "@unrs/resolver-binding-android-arm-eabi": "1.11.1",
+                "@unrs/resolver-binding-android-arm64": "1.11.1",
+                "@unrs/resolver-binding-darwin-arm64": "1.11.1",
+                "@unrs/resolver-binding-darwin-x64": "1.11.1",
+                "@unrs/resolver-binding-freebsd-x64": "1.11.1",
+                "@unrs/resolver-binding-linux-arm-gnueabihf": "1.11.1",
+                "@unrs/resolver-binding-linux-arm-musleabihf": "1.11.1",
+                "@unrs/resolver-binding-linux-arm64-gnu": "1.11.1",
+                "@unrs/resolver-binding-linux-arm64-musl": "1.11.1",
+                "@unrs/resolver-binding-linux-ppc64-gnu": "1.11.1",
+                "@unrs/resolver-binding-linux-riscv64-gnu": "1.11.1",
+                "@unrs/resolver-binding-linux-riscv64-musl": "1.11.1",
+                "@unrs/resolver-binding-linux-s390x-gnu": "1.11.1",
+                "@unrs/resolver-binding-linux-x64-gnu": "1.11.1",
+                "@unrs/resolver-binding-linux-x64-musl": "1.11.1",
+                "@unrs/resolver-binding-wasm32-wasi": "1.11.1",
+                "@unrs/resolver-binding-win32-arm64-msvc": "1.11.1",
+                "@unrs/resolver-binding-win32-ia32-msvc": "1.11.1",
+                "@unrs/resolver-binding-win32-x64-msvc": "1.11.1"
+            }
+        },
+        "node_modules/update-browserslist-db": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+            "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/browserslist"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/browserslist"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "escalade": "^3.2.0",
+                "picocolors": "^1.1.1"
+            },
+            "bin": {
+                "update-browserslist-db": "cli.js"
+            },
+            "peerDependencies": {
+                "browserslist": ">= 4.21.0"
+            }
+        },
+        "node_modules/uri-js": {
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+            "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "dependencies": {
+                "punycode": "^2.1.0"
+            }
+        },
+        "node_modules/url-parse": {
+            "version": "1.5.10",
+            "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+            "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "querystringify": "^2.1.1",
+                "requires-port": "^1.0.0"
+            }
+        },
+        "node_modules/use-sync-external-store": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+            "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
+        "node_modules/util": {
+            "version": "0.10.4",
+            "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+            "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+            "license": "MIT",
+            "dependencies": {
+                "inherits": "2.0.3"
+            }
+        },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/util/node_modules/inherits": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+            "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==",
+            "license": "ISC"
+        },
+        "node_modules/utrie": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+            "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "base64-arraybuffer": "^1.0.2"
+            }
+        },
+        "node_modules/v8-to-istanbul": {
+            "version": "9.3.0",
+            "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
+            "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "@jridgewell/trace-mapping": "^0.3.12",
+                "@types/istanbul-lib-coverage": "^2.0.1",
+                "convert-source-map": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10.12.0"
+            }
+        },
+        "node_modules/v8flags": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-4.0.1.tgz",
+            "integrity": "sha512-fcRLaS4H/hrZk9hYwbdRM35D0U8IYMfEClhXxCivOojl+yTRAZH3Zy2sSy6qVCiGbV9YAtPssP6jaChqC9vPCg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/value-or-function": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-4.0.0.tgz",
+            "integrity": "sha512-aeVK81SIuT6aMJfNo9Vte8Dw0/FZINGBV8BfCraGtqVxIeLAEhJyoWs8SmvRVmXfGss2PmmOwZCuBPbZR+IYWg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10.13.0"
+            }
+        },
+        "node_modules/vinyl": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
+            "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "clone": "^2.1.1",
+                "clone-buffer": "^1.0.0",
+                "clone-stats": "^1.0.0",
+                "cloneable-readable": "^1.0.0",
+                "remove-trailing-separator": "^1.0.1",
+                "replace-ext": "^1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.10"
+            }
+        },
+        "node_modules/vinyl-contents": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/vinyl-contents/-/vinyl-contents-2.0.0.tgz",
+            "integrity": "sha512-cHq6NnGyi2pZ7xwdHSW1v4Jfnho4TEGtxZHw01cmnc8+i7jgR6bRnED/LbrKan/Q7CvVLbnvA5OepnhbpjBZ5Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "bl": "^5.0.0",
+                "vinyl": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/vinyl-contents/node_modules/replace-ext": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
+            "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/vinyl-contents/node_modules/vinyl": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-3.0.1.tgz",
+            "integrity": "sha512-0QwqXteBNXgnLCdWdvPQBX6FXRHtIH3VhJPTd5Lwn28tJXc34YqSCWUmkOvtJHBmB3gGoPtrOKk3Ts8/kEZ9aA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "clone": "^2.1.2",
+                "remove-trailing-separator": "^1.1.0",
+                "replace-ext": "^2.0.0",
+                "teex": "^1.0.1"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/vinyl-fs": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/vinyl-fs/-/vinyl-fs-4.0.2.tgz",
+            "integrity": "sha512-XRFwBLLTl8lRAOYiBqxY279wY46tVxLaRhSwo3GzKEuLz1giffsOquWWboD/haGf5lx+JyTigCFfe7DWHoARIA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fs-mkdirp-stream": "^2.0.1",
+                "glob-stream": "^8.0.3",
+                "graceful-fs": "^4.2.11",
+                "iconv-lite": "^0.6.3",
+                "is-valid-glob": "^1.0.0",
+                "lead": "^4.0.0",
+                "normalize-path": "3.0.0",
+                "resolve-options": "^2.0.0",
+                "stream-composer": "^1.0.2",
+                "streamx": "^2.14.0",
+                "to-through": "^3.0.0",
+                "value-or-function": "^4.0.0",
+                "vinyl": "^3.0.1",
+                "vinyl-sourcemap": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/vinyl-fs/node_modules/replace-ext": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
+            "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/vinyl-fs/node_modules/vinyl": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-3.0.1.tgz",
+            "integrity": "sha512-0QwqXteBNXgnLCdWdvPQBX6FXRHtIH3VhJPTd5Lwn28tJXc34YqSCWUmkOvtJHBmB3gGoPtrOKk3Ts8/kEZ9aA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "clone": "^2.1.2",
+                "remove-trailing-separator": "^1.1.0",
+                "replace-ext": "^2.0.0",
+                "teex": "^1.0.1"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/vinyl-sourcemap": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/vinyl-sourcemap/-/vinyl-sourcemap-2.0.0.tgz",
+            "integrity": "sha512-BAEvWxbBUXvlNoFQVFVHpybBbjW1r03WhohJzJDSfgrrK5xVYIDTan6xN14DlyImShgDRv2gl9qhM6irVMsV0Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "convert-source-map": "^2.0.0",
+                "graceful-fs": "^4.2.10",
+                "now-and-later": "^3.0.0",
+                "streamx": "^2.12.5",
+                "vinyl": "^3.0.0",
+                "vinyl-contents": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/vinyl-sourcemap/node_modules/replace-ext": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
+            "integrity": "sha512-UszKE5KVK6JvyD92nzMn9cDapSk6w/CaFZ96CnmDMUqH9oowfxF/ZjRITD25H4DnOQClLA4/j7jLGXXLVKxAug==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 10"
+            }
+        },
+        "node_modules/vinyl-sourcemap/node_modules/vinyl": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-3.0.1.tgz",
+            "integrity": "sha512-0QwqXteBNXgnLCdWdvPQBX6FXRHtIH3VhJPTd5Lwn28tJXc34YqSCWUmkOvtJHBmB3gGoPtrOKk3Ts8/kEZ9aA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "clone": "^2.1.2",
+                "remove-trailing-separator": "^1.1.0",
+                "replace-ext": "^2.0.0",
+                "teex": "^1.0.1"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            }
+        },
+        "node_modules/vinyl-sourcemaps-apply": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/vinyl-sourcemaps-apply/-/vinyl-sourcemaps-apply-0.2.1.tgz",
+            "integrity": "sha512-+oDh3KYZBoZC8hfocrbrxbLUeaYtQK7J5WU5Br9VqWqmCll3tFJqKp97GC9GmMsVIL0qnx2DgEDVxdo5EZ5sSw==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "source-map": "^0.5.1"
+            }
+        },
+        "node_modules/vinyl-sourcemaps-apply/node_modules/source-map": {
+            "version": "0.5.7",
+            "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+            "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/vscode-oniguruma": {
+            "version": "1.7.0",
+            "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
+            "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/vscode-textmate": {
+            "version": "8.0.0",
+            "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
+            "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/w3c-xmlserializer": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
+            "integrity": "sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "xml-name-validator": "^4.0.0"
+            },
+            "engines": {
+                "node": ">=14"
+            }
+        },
+        "node_modules/walker": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
+            "integrity": "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "dependencies": {
+                "makeerror": "1.0.12"
+            }
+        },
+        "node_modules/webidl-conversions": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+            "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+            "dev": true,
+            "license": "BSD-2-Clause",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/whatwg-encoding": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
+            "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "iconv-lite": "0.6.3"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/whatwg-mimetype": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
+            "integrity": "sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/whatwg-url": {
+            "version": "11.0.0",
+            "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz",
+            "integrity": "sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "tr46": "^3.0.0",
+                "webidl-conversions": "^7.0.0"
+            },
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/which": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+            "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "node-which": "bin/node-which"
+            },
+            "engines": {
+                "node": ">= 8"
+            }
+        },
+        "node_modules/which-boxed-primitive": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+            "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-bigint": "^1.1.0",
+                "is-boolean-object": "^1.2.1",
+                "is-number-object": "^1.1.1",
+                "is-string": "^1.1.1",
+                "is-symbol": "^1.1.1"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/which-builtin-type": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+            "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "call-bound": "^1.0.2",
+                "function.prototype.name": "^1.1.6",
+                "has-tostringtag": "^1.0.2",
+                "is-async-function": "^2.0.0",
+                "is-date-object": "^1.1.0",
+                "is-finalizationregistry": "^1.1.0",
+                "is-generator-function": "^1.0.10",
+                "is-regex": "^1.2.1",
+                "is-weakref": "^1.0.2",
+                "isarray": "^2.0.5",
+                "which-boxed-primitive": "^1.1.0",
+                "which-collection": "^1.0.2",
+                "which-typed-array": "^1.1.16"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/which-collection": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+            "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "is-map": "^2.0.3",
+                "is-set": "^2.0.3",
+                "is-weakmap": "^2.0.2",
+                "is-weakset": "^2.0.3"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/which-typed-array": {
+            "version": "1.1.19",
+            "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+            "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "available-typed-arrays": "^1.0.7",
+                "call-bind": "^1.0.8",
+                "call-bound": "^1.0.4",
+                "for-each": "^0.3.5",
+                "get-proto": "^1.0.1",
+                "gopd": "^1.2.0",
+                "has-tostringtag": "^1.0.2"
+            },
+            "engines": {
+                "node": ">= 0.4"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
+        "node_modules/word-wrap": {
+            "version": "1.2.5",
+            "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+            "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/wrap-ansi": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+            "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.0.0",
+                "string-width": "^4.1.0",
+                "strip-ansi": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
+        "node_modules/wrap-ansi-cjs": {
+            "name": "wrap-ansi",
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+            "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.0.0",
+                "string-width": "^4.1.0",
+                "strip-ansi": "^6.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+            }
+        },
+        "node_modules/wrappy": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/write-file-atomic": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
+            "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "imurmurhash": "^0.1.4",
+                "signal-exit": "^3.0.7"
+            },
+            "engines": {
+                "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+            }
+        },
+        "node_modules/ws": {
+            "version": "8.18.3",
+            "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+            "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10.0.0"
+            },
+            "peerDependencies": {
+                "bufferutil": "^4.0.1",
+                "utf-8-validate": ">=5.0.2"
+            },
+            "peerDependenciesMeta": {
+                "bufferutil": {
+                    "optional": true
+                },
+                "utf-8-validate": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/xlsx": {
+            "version": "0.20.2",
+            "resolved": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz",
+            "integrity": "sha512-+nKZ39+nvK7Qq6i0PvWWRA4j/EkfWOtkP/YhMtupm+lJIiHxUrgTr1CcKv1nBk1rHtkRRQ3O2+Ih/q/sA+FXZA==",
+            "license": "Apache-2.0",
+            "bin": {
+                "xlsx": "bin/xlsx.njs"
+            },
+            "engines": {
+                "node": ">=0.8"
+            }
+        },
+        "node_modules/xml-name-validator": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+            "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==",
+            "dev": true,
+            "license": "Apache-2.0",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/xmlchars": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
+            "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/xtend": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+            "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.4"
+            }
+        },
+        "node_modules/y18n": {
+            "version": "5.0.8",
+            "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+            "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/yallist": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+            "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/yaml": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
+        "node_modules/yargs": {
+            "version": "16.2.0",
+            "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+            "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "cliui": "^7.0.2",
+                "escalade": "^3.1.1",
+                "get-caller-file": "^2.0.5",
+                "require-directory": "^2.1.1",
+                "string-width": "^4.2.0",
+                "y18n": "^5.0.5",
+                "yargs-parser": "^20.2.2"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/yargs-parser": {
+            "version": "20.2.9",
+            "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+            "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">=10"
+            }
+        },
+        "node_modules/yocto-queue": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+            "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        }
+    }
+}
diff --git a/package.json b/package.json
index 5d9631ed77..e1d8effd8b 100644
--- a/package.json
+++ b/package.json
@@ -1,61 +1,90 @@
 {
-  "name": "primereact",
-  "version": "4.2.1-SNAPSHOT",
-  "homepage": "/primereact/showcase",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/primefaces/primereact.git"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "babel-polyfill": "6.26.0",
-    "axios": "^0.19.0",
-    "chart.js": "2.7.3",
-    "classnames": "^2.2.6",
-    "del": "^2.2.0",
-    "@fullcalendar/core": "4.0.1",
-    "@fullcalendar/daygrid": "4.0.1",
-    "@fullcalendar/timegrid": "4.0.1",
-    "@fullcalendar/interaction": "4.0.1",
-    "gulp": "^3.9.1",
-    "gulp-concat": "^2.6.0",
-    "gulp-flatten": "^0.2.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-uglify": "^1.5.3",
-    "gulp-uglifycss": "^1.0.6",
-    "node-sass": "^4.11.0",
-    "primeflex": "1.0.0",
-    "primeicons": "2.0.0",
-    "prismjs": "1.6.0",
-    "prop-types": "^15.6.2",
-    "quill": "1.3.7",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1",
-    "react-transition-group": "^2.5.1",
-    "react-app-polyfill": "^0.2.1"
-  },
-  "peerDependencies": {
-    "classnames": "^2.2.6"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "compile-components": "./node_modules/\\@babel/cli/bin/babel.js src/components --out-dir components --presets=@babel/env,@babel/react --plugins=@babel/plugin-proposal-class-properties --copy-files",
-    "build-resources": "gulp build-resources",
-    "build-exports": "gulp build-exports"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ]
+    "name": "primereact",
+    "private": false,
+    "version": "10.9.7",
+    "scripts": {
+        "dev": "next dev",
+        "start": "next start",
+        "build": "next build",
+        "build:lib": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package",
+        "build:lib:windows": "set \"NODE_ENV=production\" && set \"INPUT_DIR=components/lib/\" && set \"OUTPUT_DIR=dist/\" && npm run build:package",
+        "build:package": "npm run build:check && rollup -c && gulp build-resources && npm run build:api",
+        "dev:link": "NODE_ENV=production INPUT_DIR=components/lib/ OUTPUT_DIR=dist/ npm run build:package:dev",
+        "dev:link:windows": "set \"NODE_ENV=production\" && set \"INPUT_DIR=components/lib/\" && set \"OUTPUT_DIR=dist/\" && npm run build:package:dev",
+        "build:package:dev": "npm run build:check && gulp build-resources && npm run build:api && rollup -c --watch",
+        "build:api": "npm run apiwebtypes && npm run apidoc",
+        "build:check": "npm run lint && npm run format:check && npm run type:check && npm run security:check",
+        "security:check": "npm audit --omit=dev --audit-level critical",
+        "format": "prettier --write \"{components,pages,service,api-scripts}/**/*.{js,ts,tsx,d.ts}\"",
+        "format:check": "prettier --check \"{components,pages,service,api-scripts}/**/*.{js,ts,tsx,d.ts}\"",
+        "lint": "next lint --max-warnings=0 --ignore-path .gitignore .",
+        "lint:fix": "next lint --fix --ignore-path .gitignore .",
+        "type:check": "tsc -p ./api-scripts/tsconfig.json",
+        "test": "jest --watch --coverage --silent",
+        "test:check": "jest --watchAll=false --coverage --silent",
+        "test:debug": "jest --watch --coverage",
+        "apidoc": "node ./api-scripts/build-apidoc.js",
+        "apiwebtypes": "node ./api-scripts/build-webtypes.js"
+    },
+    "dependencies": {
+        "@docsearch/react": "3.9.0",
+        "chart.js": "4.5.0",
+        "file-saver": "2.0.5",
+        "fs-extra": "^11.3.2",
+        "jspdf": "3.0.2",
+        "jspdf-autotable": "5.0.2",
+        "next": "12.3.7",
+        "path": "^0.12.7",
+        "primeflex": "3.3.1",
+        "primeicons": "^7.0.0",
+        "quill": "2.0.3",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "react-transition-group": "^4.4.5",
+        "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz"
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-transform-runtime": "^7.25.4",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-react": "^7.24.7",
+        "@rollup/plugin-alias": "^5.1.1",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^25.0.7",
+        "@rollup/plugin-node-resolve": "^15.3.0",
+        "@rollup/plugin-replace": "^5.0.7",
+        "@stackblitz/sdk": "1.11.0",
+        "@svgr/webpack": "^8.1.0",
+        "@testing-library/jest-dom": "^6.6.3",
+        "@testing-library/react": "^14.1.2",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/node": "^22.7.4",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.0",
+        "@types/react-transition-group": "^4.4.11",
+        "@typescript-eslint/eslint-plugin": "^6.13.1",
+        "eslint": "8.57.0",
+        "eslint-config-next": "14.2.14",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-plugin-jest-dom": "^5.4.0",
+        "gulp": "^5.0.1",
+        "gulp-concat": "^2.6.1",
+        "gulp-flatten": "^0.4.0",
+        "gulp-rename": "^2.0.0",
+        "gulp-uglify": "^3.0.2",
+        "gulp-uglifycss": "^1.1.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "prettier": "3.5.3",
+        "rollup": "^2.79.2",
+        "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-terser": "^7.0.2",
+        "sass": "^1.79.4",
+        "typedoc": "0.24.8",
+        "typescript": "5.1.6"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "packageManager": "yarn@4.10.3+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f"
 }
diff --git a/pages/404.js b/pages/404.js
new file mode 100644
index 0000000000..69e482912f
--- /dev/null
+++ b/pages/404.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const Custom404 = () => {
+    return (
+        <div className="flex card flex-column align-items-center gap-5 sm:p-8">
+            <div className="flex flex-column sm:flex-row align-items-center justify-content-center gap-3 text-primary">
+                <span className="font-bold" style={{ fontSize: '144px' }}>
+                    4
+                </span>
+                <div className="flex align-items-center justify-content-center bg-primary border-circle w-8rem h-8rem">
+                    <i className="pi pi-prime text-7xl" />
+                </div>
+                <span className="font-bold" style={{ fontSize: '144px' }}>
+                    4
+                </span>
+            </div>
+            <div className="font-bold text-900 text-center text-6xl border-top-1 surface-border pt-5">PAGE NOT FOUND</div>
+        </div>
+    );
+};
+
+export default Custom404;
diff --git a/pages/_app.js b/pages/_app.js
new file mode 100644
index 0000000000..b1ca74c732
--- /dev/null
+++ b/pages/_app.js
@@ -0,0 +1,67 @@
+import { GTagManager } from '@/components/analytics/analytics';
+import AppContentContext from '@/components/layout/appcontentcontext';
+import Layout from '@/components/layout/layout';
+import { PrimeReactProvider } from '@/components/lib/api/PrimeReactContext';
+import { switchTheme } from '@/components/utils/utils';
+import '@docsearch/css';
+import 'primeflex/primeflex.css';
+import 'primeicons/primeicons.css';
+import { useState } from 'react';
+import '../styles/demo/demo.scss';
+import '../styles/layout/layout.scss';
+
+function AppContent({ component: Component, pageProps }) {
+    if (Component.getLayout) {
+        return Component.getLayout(<Component {...pageProps} />);
+    }
+
+    return (
+        <Layout>
+            <Component {...pageProps} />
+        </Layout>
+    );
+}
+
+export default function MyApp({ Component, pageProps }) {
+    const isProduction = process.env.NODE_ENV === 'production';
+    const [darkMode, setDarkMode] = useState(false);
+    const [theme, setTheme] = useState('lara-light-cyan');
+    const [newsActive, setNewsActive] = useState(false);
+    const [announcement, setAnnouncement] = useState(null);
+
+    const appState = {
+        darkMode: darkMode,
+        theme: theme,
+        newsActive: newsActive,
+        announcement: announcement,
+        changeTheme: (newTheme, dark) => {
+            if (newTheme !== theme) {
+                switchTheme(theme, newTheme, 'theme-link', () => {
+                    setDarkMode(dark);
+                    setTheme(newTheme);
+                });
+            }
+        },
+        showNews: (message) => {
+            setNewsActive(true);
+            setAnnouncement(message);
+        },
+        hideNews: () => {
+            setNewsActive(false);
+        }
+    };
+
+    const primereactConfig = {
+        ripple: true,
+        hideOverlaysOnDocumentScrolling: false
+    };
+
+    return (
+        <AppContentContext.Provider value={appState}>
+            <PrimeReactProvider value={primereactConfig}>
+                {isProduction && <GTagManager />}
+                <AppContent component={Component} pageProps={pageProps} />
+            </PrimeReactProvider>
+        </AppContentContext.Provider>
+    );
+}
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 0000000000..e118b47ecc
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,21 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+
+export default function Document() {
+    return (
+        <Html>
+            <Head>
+                {/* eslint-disable */}
+                <link href="https://primefaces.org/cdn/primereact/images/favicon.ico" rel="icon" type="image/x-icon"></link>
+                <link id="theme-link" href="http://github.com/themes/lara-light-cyan/theme.css" rel="stylesheet"></link>
+                <link id="home-table-link" href="http://github.com/styles/landing/themes/lara-light-cyan/theme.css" rel="stylesheet"></link>
+                <link rel="stylesheet" href="http://github.com/styles/flags.css"></link>
+                <script src="http://github.com/scripts/prism/prism.js" data-manual></script>
+                {/* eslint-enable */}
+            </Head>
+            <body>
+                <Main />
+                <NextScript />
+            </body>
+        </Html>
+    );
+}
diff --git a/pages/accessibility/index.js b/pages/accessibility/index.js
new file mode 100644
index 0000000000..b918aa4467
--- /dev/null
+++ b/pages/accessibility/index.js
@@ -0,0 +1,12 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const AccessibilityDoc = () => {
+    const router = useRouter();
+
+    useEffect(() => {
+        router.push('/guides/accessibility');
+    });
+};
+
+export default AccessibilityDoc;
diff --git a/pages/accordion/index.js b/pages/accordion/index.js
new file mode 100644
index 0000000000..93a2945d49
--- /dev/null
+++ b/pages/accordion/index.js
@@ -0,0 +1,112 @@
+import { AccessibilityDoc } from '@/components/doc/accordion/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/accordion/basicdoc';
+import { ControlledDoc } from '@/components/doc/accordion/controlleddoc';
+import { DisabledDoc } from '@/components/doc/accordion/disableddoc';
+import { DynamicDoc } from '@/components/doc/accordion/dynamicdoc';
+import { ImportDoc } from '@/components/doc/accordion/importdoc';
+import { MultipleDoc } from '@/components/doc/accordion/multipledoc';
+import { Wireframe } from '@/components/doc/accordion/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/accordion/templatedoc';
+import { StyledDoc } from '@/components/doc/accordion/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/accordion/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const AccordionDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'dynamic',
+            label: 'Dynamic',
+            component: DynamicDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.accordion.options',
+            label: 'Accordion PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.accordiontab.options',
+            label: 'AccordionTab PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Accordion Component"
+            header="Accordion"
+            description="Accordion groups a collection of contents in tabs."
+            componentDocs={docs}
+            apiDocs={['Accordion', 'AccordionTab']}
+            ptDocs={ptDocs}
+            ptDescription=""
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default AccordionDemo;
diff --git a/pages/api/data/customers.js b/pages/api/data/customers.js
new file mode 100644
index 0000000000..91f9b15f25
--- /dev/null
+++ b/pages/api/data/customers.js
@@ -0,0 +1,284 @@
+import path from 'path';
+import url from 'url';
+import { promises as fs } from 'fs-extra';
+
+function getSlice(queryObject, customers) {
+    if (queryObject.first != null && queryObject.rows != null) {
+        let first = parseInt(queryObject.first);
+        let rows = parseInt(queryObject.rows);
+
+        return customers.slice(first, first + rows);
+    }
+
+    return customers;
+}
+
+function sort(queryObject, customers) {
+    customers.sort((data1, data2) => {
+        let value1 = resolveFieldData(data1, queryObject.sortField);
+        let value2 = resolveFieldData(data2, queryObject.sortField);
+        let result = null;
+
+        if (value1 == null && value2 != null) {
+            result = -1;
+        } else if (value1 != null && value2 == null) {
+            result = 1;
+        } else if (value1 == null && value2 == null) {
+            result = 0;
+        } else if (typeof value1 === 'string' && typeof value2 === 'string') {
+            result = value1.localeCompare(value2);
+        } else {
+            result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+        }
+
+        return queryObject.sortOrder * result;
+    });
+
+    return customers;
+}
+
+const filters = {
+    startsWith: (value, filter) => {
+        if (filter === undefined || filter === null || filter.trim() === '') {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        let filterValue = removeAccents(filter.toString()).toLocaleLowerCase();
+        let stringValue = removeAccents(value.toString()).toLocaleLowerCase();
+
+        return stringValue.slice(0, filterValue.length) === filterValue;
+    },
+
+    contains: (value, filter) => {
+        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        let filterValue = removeAccents(filter.toString()).toLocaleLowerCase();
+        let stringValue = removeAccents(value.toString()).toLocaleLowerCase();
+
+        return stringValue.indexOf(filterValue) !== -1;
+    },
+
+    notContains: (value, filter) => {
+        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        let filterValue = removeAccents(filter.toString()).toLocaleLowerCase();
+        let stringValue = removeAccents(value.toString()).toLocaleLowerCase();
+
+        return stringValue.indexOf(filterValue) === -1;
+    },
+
+    endsWith: (value, filter) => {
+        if (filter === undefined || filter === null || filter.trim() === '') {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        let filterValue = removeAccents(filter.toString()).toLocaleLowerCase();
+        let stringValue = removeAccents(value.toString()).toLocaleLowerCase();
+
+        return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
+    },
+
+    equals: (value, filter) => {
+        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+            return true;
+        }
+
+        if (value === undefined || value === null) {
+            return false;
+        }
+
+        if (value.getTime && filter.getTime) {
+            return value.getTime() === filter.getTime();
+        }
+
+        return removeAccents(value.toString()).toLocaleLowerCase() == removeAccents(filter.toString()).toLocaleLowerCase();
+    },
+
+    notEquals: (value, filter) => {
+        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+            return false;
+        }
+
+        if (value === undefined || value === null) {
+            return true;
+        }
+
+        if (value.getTime && filter.getTime) {
+            return value.getTime() !== filter.getTime();
+        }
+
+        return removeAccents(value.toString()).toLocaleLowerCase() != removeAccents(filter.toString()).toLocaleLowerCase();
+    },
+
+    in: (value, filter) => {
+        if (filter === undefined || filter === null || filter.length === 0) {
+            return true;
+        }
+
+        for (let i = 0; i < filter.length; i++) {
+            if (equals(value, filter[i])) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+};
+
+function filter(value, field, filterValue, filterMatchMode) {
+    let filteredItems = [];
+
+    if (value) {
+        for (let item of value) {
+            let fieldValue = resolveFieldData(item, field);
+
+            if (filters[filterMatchMode](fieldValue, filterValue)) {
+                filteredItems.push(item);
+            }
+        }
+    }
+
+    return filteredItems;
+}
+
+function equals(obj1, obj2) {
+    if (obj1 === obj2) {
+        return true;
+    }
+
+    if (obj1 && obj2 && typeof obj1 === 'object' && typeof obj2 === 'object') {
+        let i;
+        let length;
+        let key;
+
+        let keys = Object.keys(obj1);
+
+        length = keys.length;
+
+        if (length !== Object.keys(obj2).length) {
+            return false;
+        }
+
+        for (i = length; i-- !== 0; ) {
+            if (!Object.prototype.hasOwnProperty.call(obj2, keys[i])) {
+                return false;
+            }
+        }
+
+        for (i = length; i-- !== 0; ) {
+            key = keys[i];
+
+            if (!equals(obj1[key], obj2[key])) {
+                return false;
+            }
+        }
+
+        return true;
+    }
+
+    return obj1 !== obj1 && obj2 !== obj2;
+}
+
+function removeAccents(str) {
+    if (str && str.search(/[\xC0-\xFF]/g) > -1) {
+        str = str
+            .replace(/[\xC0-\xC5]/g, 'A')
+            .replace(/[\xC6]/g, 'AE')
+            .replace(/[\xC7]/g, 'C')
+            .replace(/[\xC8-\xCB]/g, 'E')
+            .replace(/[\xCC-\xCF]/g, 'I')
+            .replace(/[\xD0]/g, 'D')
+            .replace(/[\xD1]/g, 'N')
+            .replace(/[\xD2-\xD6\xD8]/g, 'O')
+            .replace(/[\xD9-\xDC]/g, 'U')
+            .replace(/[\xDD]/g, 'Y')
+            .replace(/[\xDE]/g, 'P')
+            .replace(/[\xE0-\xE5]/g, 'a')
+            .replace(/[\xE6]/g, 'ae')
+            .replace(/[\xE7]/g, 'c')
+            .replace(/[\xE8-\xEB]/g, 'e')
+            .replace(/[\xEC-\xEF]/g, 'i')
+            .replace(/[\xF1]/g, 'n')
+            .replace(/[\xF2-\xF6\xF8]/g, 'o')
+            .replace(/[\xF9-\xFC]/g, 'u')
+            .replace(/[\xFE]/g, 'p')
+            .replace(/[\xFD\xFF]/g, 'y');
+    }
+
+    return str;
+}
+
+function resolveFieldData(data, field) {
+    if (data && field) {
+        if (field.indexOf('.') == -1) {
+            return data[field];
+        }
+
+        let fields = field.split('.');
+        let value = data;
+
+        for (let i = 0, len = fields.length; i < len; ++i) {
+            if (value == null) {
+                return null;
+            }
+
+            value = value[fields[i]];
+        }
+
+        return value;
+    }
+
+    return null;
+}
+
+export default async function handler(req, res) {
+    const filePath = path.join(process.cwd(), 'public', 'data/customers-large.json');
+
+    try {
+        const content = await fs.readFile(filePath, 'utf-8');
+        let customers = JSON.parse(content).data;
+
+        // get query params
+        const query = url.parse(req.url, true).query.lazyEvent ? JSON.parse(url.parse(req.url, true).query.lazyEvent) : url.parse(req.url, true).query;
+
+        // sort
+        if (query.sortField && query.sortOrder) {
+            customers = sort(query, customers);
+        }
+
+        // filter
+        if (query.filters) {
+            for (let fieldName in query.filters) {
+                if (query.filters[fieldName].value !== null) {
+                    customers = filter(customers, fieldName, query.filters[fieldName].value, query.filters[fieldName].matchMode);
+                }
+            }
+        }
+
+        res.status(200).json({ customers: getSlice(query, customers), totalRecords: customers.length });
+    } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(error);
+        res.status(500).json({ message: 'Internal Server Error' });
+    }
+}
diff --git a/pages/api/upload.js b/pages/api/upload.js
new file mode 100644
index 0000000000..0101427ea0
--- /dev/null
+++ b/pages/api/upload.js
@@ -0,0 +1,3 @@
+export default function handler(req, res) {
+    res.status(200).setHeader('Access-Control-Allow-Origin', '*').json({ name: 'Fake Upload Process' });
+}
diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js
new file mode 100644
index 0000000000..bc9250a599
--- /dev/null
+++ b/pages/autocomplete/index.js
@@ -0,0 +1,140 @@
+import { AccessibilityDoc } from '@/components/doc/autocomplete/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/autocomplete/basicdoc';
+import { DisabledDoc } from '@/components/doc/autocomplete/disableddoc';
+import { DropdownDoc } from '@/components/doc/autocomplete/dropdowndoc';
+import { FilledDoc } from '@/components/doc/autocomplete/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/autocomplete/floatlabeldoc';
+import { ForceSelectionDoc } from '@/components/doc/autocomplete/forceselectiondoc';
+import { GroupDoc } from '@/components/doc/autocomplete/groupdoc';
+import { ImportDoc } from '@/components/doc/autocomplete/importdoc';
+import { InvalidDoc } from '@/components/doc/autocomplete/invaliddoc';
+import { MultipleDoc } from '@/components/doc/autocomplete/multipledoc';
+import { ObjectsDoc } from '@/components/doc/autocomplete/objectsdoc';
+import { Wireframe } from '@/components/doc/autocomplete/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/autocomplete/templatedoc';
+import { StyledDoc } from '@/components/doc/autocomplete/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/autocomplete/theming/tailwinddoc';
+import { VirtualScrollDoc } from '@/components/doc/autocomplete/virtualscrolldoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const AutoCompleteDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'dropdown',
+            label: 'Dropdown',
+            component: DropdownDoc
+        },
+        {
+            id: 'objects',
+            label: 'Objects',
+            component: ObjectsDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'forceselection',
+            label: 'Force Selection',
+            component: ForceSelectionDoc
+        },
+        {
+            id: 'virtualscroll',
+            label: 'Virtual Scroll',
+            component: VirtualScrollDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.autocomplete.options',
+            label: 'AutoComplete PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React AutoComplete Component"
+            header="AutoComplete"
+            description="AutoComplete is an input component that provides real-time suggestions while being typed"
+            componentDocs={docs}
+            apiDocs={['AutoComplete']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default AutoCompleteDemo;
diff --git a/pages/avatar/index.js b/pages/avatar/index.js
new file mode 100644
index 0000000000..edef08f29e
--- /dev/null
+++ b/pages/avatar/index.js
@@ -0,0 +1,88 @@
+import { AccessibilityDoc } from '@/components/doc/avatar/accessibilitydoc';
+import { GroupDoc } from '@/components/doc/avatar/groupdoc';
+import { IconDoc } from '@/components/doc/avatar/icondoc';
+import { ImageDoc } from '@/components/doc/avatar/imagedoc';
+import { ImportDoc } from '@/components/doc/avatar/importdoc';
+import { LabelDoc } from '@/components/doc/avatar/labeldoc';
+import { Wireframe } from '@/components/doc/avatar/pt/wireframe';
+import { StyledDoc } from '@/components/doc/avatar/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/avatar/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const AvatarDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'label',
+            label: 'Label',
+            component: LabelDoc
+        },
+        {
+            id: 'icon',
+            label: 'Icon',
+            component: IconDoc
+        },
+        {
+            id: 'image',
+            label: 'Image',
+            component: ImageDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.avatar.options',
+            label: 'Avatar PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.avatargroup.options',
+            label: 'AvatarGroup PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Avatar Component" header="Avatar" description="Avatar represents people using icons, labels and images." componentDocs={docs} apiDocs={['Avatar']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default AvatarDemo;
diff --git a/pages/badge/index.js b/pages/badge/index.js
new file mode 100644
index 0000000000..7cb5158ea1
--- /dev/null
+++ b/pages/badge/index.js
@@ -0,0 +1,90 @@
+import { AccessibilityDoc } from '@/components/doc/badge/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/badge/basicdoc';
+import { ButtonDoc } from '@/components/doc/badge/buttondoc';
+import { ImportDoc } from '@/components/doc/badge/importdoc';
+import { PositionDoc } from '@/components/doc/badge/positiondoc';
+import { Wireframe } from '@/components/doc/badge/pt/wireframe';
+import { SeverityDoc } from '@/components/doc/badge/severitydoc';
+import { SizeDoc } from '@/components/doc/badge/sizedoc';
+import { StyledDoc } from '@/components/doc/badge/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/badge/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const BadgeDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'size',
+            label: 'Size',
+            component: SizeDoc
+        },
+        {
+            id: 'positioned',
+            label: 'Position',
+            component: PositionDoc
+        },
+        {
+            id: 'button',
+            label: 'Button',
+            component: ButtonDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.badge.options',
+            label: 'Badge PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Badge Component" header="Badge" description="Badge is a small status indicator for another element." componentDocs={docs} apiDocs={['Badge']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default BadgeDemo;
diff --git a/pages/blockui/index.js b/pages/blockui/index.js
new file mode 100644
index 0000000000..c24cd1e93a
--- /dev/null
+++ b/pages/blockui/index.js
@@ -0,0 +1,78 @@
+import { AccessibilityDoc } from '@/components/doc/blockui/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/blockui/basicdoc';
+import { DocumentDoc } from '@/components/doc/blockui/documentdoc';
+import { ImportDoc } from '@/components/doc/blockui/importdoc';
+import { Wireframe } from '@/components/doc/blockui/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/blockui/templatedoc';
+import { StyledDoc } from '@/components/doc/blockui/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/blockui/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const BlockUIDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'document',
+            label: 'Document',
+            component: DocumentDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.blockui.options',
+            label: 'BlockUI PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React BlockUI Component" header="BlockUI" description="BlockUI can block certain elements or the whole page." componentDocs={docs} apiDocs={['BlockUI']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default BlockUIDemo;
diff --git a/pages/bootstrap/index.js b/pages/bootstrap/index.js
new file mode 100644
index 0000000000..416c82eaa9
--- /dev/null
+++ b/pages/bootstrap/index.js
@@ -0,0 +1,28 @@
+import { ExampleDoc } from '@/components/doc/bootstrap/exampledoc';
+import { SetupDoc } from '@/components/doc/bootstrap/setupdoc';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const BootstrapDemo = () => {
+    const docs = [
+        {
+            id: 'setup',
+            label: 'Setup',
+            component: SetupDoc
+        },
+
+        {
+            id: 'example',
+            label: 'Example',
+            component: ExampleDoc
+        }
+    ];
+
+    const description = `
+    <a href="https://getbootstrap.com/" className="font-medium hover:underline text-primary">Bootstrap</a>
+    is a well-known CSS library to build responsive and mobile first web projects.
+    `;
+
+    return <DocComponent title="Bootstrap - PrimeReact" header="Bootstrap" description={description} componentDocs={docs} hideTabMenu />;
+};
+
+export default BootstrapDemo;
diff --git a/pages/breadcrumb/index.js b/pages/breadcrumb/index.js
new file mode 100644
index 0000000000..5178eb1f60
--- /dev/null
+++ b/pages/breadcrumb/index.js
@@ -0,0 +1,87 @@
+import { AccessibilityDoc } from '@/components/doc/breadcrumb/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/breadcrumb/basicdoc';
+import { ImportDoc } from '@/components/doc/breadcrumb/importdoc';
+import { Wireframe } from '@/components/doc/breadcrumb/pt/wireframe';
+import { RouterDoc } from '@/components/doc/breadcrumb/routerdoc';
+import { TemplateDoc } from '@/components/doc/breadcrumb/templatedoc';
+import { StyledDoc } from '@/components/doc/breadcrumb/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/breadcrumb/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const BreadCrumbDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.breadcrumb.options',
+            label: 'BreadCrumb PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React BreadCrumb Component"
+            header="BreadCrumb"
+            description="Breadcrumb provides contextual information about page hierarchy."
+            componentDocs={docs}
+            apiDocs={['Breadcrumb', 'MenuItem']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default BreadCrumbDemo;
diff --git a/pages/bulma/index.js b/pages/bulma/index.js
new file mode 100644
index 0000000000..68a11e2d52
--- /dev/null
+++ b/pages/bulma/index.js
@@ -0,0 +1,27 @@
+import { ExampleDoc } from '@/components/doc/bulma/exampledoc';
+import { SetupDoc } from '@/components/doc/bulma/setupdoc';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const BulmaDemo = () => {
+    const docs = [
+        {
+            id: 'setup',
+            label: 'Setup',
+            component: SetupDoc
+        },
+
+        {
+            id: 'example',
+            label: 'Example',
+            component: ExampleDoc
+        }
+    ];
+
+    const description = `
+    <a href="https://bulma.io/" className="font-medium hover:underline text-primary">Bulma</a> is a free, open source framework that provides ready-to-use frontend components and utilities.
+    `;
+
+    return <DocComponent title="Bulma - PrimeReact" header="Bulma" description={description} componentDocs={docs} hideTabMenu />;
+};
+
+export default BulmaDemo;
diff --git a/pages/button/index.js b/pages/button/index.js
new file mode 100644
index 0000000000..13d49486eb
--- /dev/null
+++ b/pages/button/index.js
@@ -0,0 +1,156 @@
+import { AccessibilityDoc } from '@/components/doc/button/accessibilitydoc';
+import { BadgesDoc } from '@/components/doc/button/badgesdoc';
+import { BasicDoc } from '@/components/doc/button/basicdoc';
+import { ButtonGroupDoc } from '@/components/doc/button/buttongroupdoc';
+import { DisabledDoc } from '@/components/doc/button/disableddoc';
+import { IconOnlyDoc } from '@/components/doc/button/icononlydoc';
+import { IconsDoc } from '@/components/doc/button/iconsdoc';
+import { ImportDoc } from '@/components/doc/button/importdoc';
+import { LinkDoc } from '@/components/doc/button/linkdoc';
+import { LoadingDoc } from '@/components/doc/button/loadingdoc';
+import { OutlinedDoc } from '@/components/doc/button/outlineddoc';
+import { Wireframe } from '@/components/doc/button/pt/wireframe';
+import { RaisedDoc } from '@/components/doc/button/raiseddoc';
+import { RaisedTextDoc } from '@/components/doc/button/raisedtextdoc';
+import { RoundedDoc } from '@/components/doc/button/roundeddoc';
+import { SeverityDoc } from '@/components/doc/button/severitydoc';
+import { SizesDoc } from '@/components/doc/button/sizesdoc';
+import { TemplateDoc } from '@/components/doc/button/templatedoc';
+import { TextDoc } from '@/components/doc/button/textdoc';
+import { StyledDoc } from '@/components/doc/button/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/button/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const ButtonDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'link',
+            label: 'Link',
+            component: LinkDoc
+        },
+        {
+            id: 'icons',
+            label: 'Icons',
+            component: IconsDoc
+        },
+        {
+            id: 'loading',
+            label: 'Loading',
+            component: LoadingDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'raised',
+            label: 'Raised',
+            component: RaisedDoc
+        },
+        {
+            id: 'rounded',
+            label: 'Rounded',
+            component: RoundedDoc
+        },
+        {
+            id: 'text',
+            label: 'Text',
+            component: TextDoc
+        },
+        {
+            id: 'raisedtext',
+            label: 'Raised Text',
+            component: RaisedTextDoc
+        },
+        {
+            id: 'outlined',
+            label: 'Outlined',
+            component: OutlinedDoc
+        },
+        {
+            id: 'icononly',
+            label: 'Icon Only',
+            component: IconOnlyDoc
+        },
+        {
+            id: 'badges',
+            label: 'Badges',
+            component: BadgesDoc
+        },
+        {
+            id: 'buttongroup',
+            label: 'Button Group',
+            component: ButtonGroupDoc
+        },
+        {
+            id: 'sizes',
+            label: 'Sizes',
+            component: SizesDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.button.options',
+            label: 'Button PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Button Component" header="Button" description="Button is an extension to standard input element with icons and theming." componentDocs={docs} apiDocs={['Button']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ButtonDemo;
diff --git a/pages/calendar/index.js b/pages/calendar/index.js
new file mode 100644
index 0000000000..37274a3a4b
--- /dev/null
+++ b/pages/calendar/index.js
@@ -0,0 +1,182 @@
+import { AccessibilityDoc } from '@/components/doc/calendar/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/calendar/basicdoc';
+import { ButtonBarDoc } from '@/components/doc/calendar/buttonbardoc';
+import { DateTemplateDoc } from '@/components/doc/calendar/datetemplatedoc';
+import { DisabledDoc } from '@/components/doc/calendar/disableddoc';
+import { FilledDoc } from '@/components/doc/calendar/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/calendar/floatlabeldoc';
+import { FormatDoc } from '@/components/doc/calendar/formatdoc';
+import { IconDoc } from '@/components/doc/calendar/icondoc';
+import { ImportDoc } from '@/components/doc/calendar/importdoc';
+import { InlineDoc } from '@/components/doc/calendar/inlinedoc';
+import { InvalidDoc } from '@/components/doc/calendar/invaliddoc';
+import { LocaleDoc } from '@/components/doc/calendar/localedoc';
+import { MinMaxDoc } from '@/components/doc/calendar/minmaxdoc';
+import { MonthPickerDoc } from '@/components/doc/calendar/monthpickerdoc';
+import { MultipleDoc } from '@/components/doc/calendar/multipledoc';
+import { MultipleMonthsDoc } from '@/components/doc/calendar/multiplemonthsdoc';
+import { Wireframe } from '@/components/doc/calendar/pt/wireframe';
+import { RangeDoc } from '@/components/doc/calendar/rangedoc';
+import { StyledDoc } from '@/components/doc/calendar/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/calendar/theming/tailwinddoc';
+import { TimeDoc } from '@/components/doc/calendar/timedoc';
+import { TouchUIDoc } from '@/components/doc/calendar/touchuidoc';
+import { YearPickerDoc } from '@/components/doc/calendar/yearpickerdoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const CalendarDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'format',
+            label: 'Format',
+            component: FormatDoc
+        },
+        {
+            id: 'locale',
+            label: 'Locale',
+            component: LocaleDoc
+        },
+        {
+            id: 'icon',
+            label: 'Icon',
+            component: IconDoc
+        },
+        {
+            id: 'minmax',
+            label: 'Min / Max',
+            component: MinMaxDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'range',
+            label: 'Range',
+            component: RangeDoc
+        },
+        {
+            id: 'button',
+            label: 'Button Bar',
+            component: ButtonBarDoc
+        },
+        {
+            id: 'time',
+            label: 'Time',
+            component: TimeDoc
+        },
+        {
+            id: 'monthpicker',
+            label: 'Month Picker',
+            component: MonthPickerDoc
+        },
+        {
+            id: 'yearpicker',
+            label: 'Year Picker',
+            component: YearPickerDoc
+        },
+        {
+            id: 'multiplemonths',
+            label: 'Multiple Months',
+            component: MultipleMonthsDoc
+        },
+        {
+            id: 'datetemplate',
+            label: 'Date Template',
+            component: DateTemplateDoc
+        },
+        {
+            id: 'touchui',
+            label: 'Touch UI',
+            component: TouchUIDoc
+        },
+        {
+            id: 'inline',
+            label: 'Inline',
+            component: InlineDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.calendar.options',
+            label: 'Calendar PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Calendar Component"
+            header="Calendar"
+            description="Calendar, also known as DatePicker, is a form component to work with dates."
+            componentDocs={docs}
+            apiDocs={['Calendar']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default CalendarDemo;
diff --git a/pages/card/index.js b/pages/card/index.js
new file mode 100644
index 0000000000..2c8a042a0e
--- /dev/null
+++ b/pages/card/index.js
@@ -0,0 +1,72 @@
+import { AccessibilityDoc } from '@/components/doc/card/accessibilitydoc';
+import { AdvancedDoc } from '@/components/doc/card/advanceddoc';
+import { BasicDoc } from '@/components/doc/card/basicdoc';
+import { ImportDoc } from '@/components/doc/card/importdoc';
+import { Wireframe } from '@/components/doc/card/pt/wireframe';
+import { StyledDoc } from '@/components/doc/card/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/card/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const CardDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'advanced',
+            label: 'Advanced',
+            component: AdvancedDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.card.options',
+            label: 'Card PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Card Component" header="Card" description="Card is a flexible container component." componentDocs={docs} apiDocs={['Card']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default CardDemo;
diff --git a/pages/carousel/index.js b/pages/carousel/index.js
new file mode 100644
index 0000000000..0d182d23d2
--- /dev/null
+++ b/pages/carousel/index.js
@@ -0,0 +1,100 @@
+import { AccessibilityDoc } from '@/components/doc/carousel/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/carousel/basicdoc';
+import { CircularDoc } from '@/components/doc/carousel/circulardoc';
+import { ImportDoc } from '@/components/doc/carousel/importdoc';
+import { NumScrollDoc } from '@/components/doc/carousel/numscrolldoc';
+import { Wireframe } from '@/components/doc/carousel/pt/wireframe';
+import { ResponsiveDoc } from '@/components/doc/carousel/responsivedoc';
+import { StyledDoc } from '@/components/doc/carousel/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/carousel/theming/tailwinddoc';
+import { VerticalDoc } from '@/components/doc/carousel/verticaldoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const CarouselDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'circular',
+            label: 'Circular',
+            component: CircularDoc
+        },
+        {
+            id: 'numscroll',
+            label: 'Num Scroll',
+            component: NumScrollDoc
+        },
+        {
+            id: 'responsive',
+            label: 'Responsive',
+            component: ResponsiveDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.carousel.options',
+            label: 'Carousel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Carousel Component"
+            header="Carousel"
+            description="Carousel is a content slider featuring various customization options."
+            className="carousel-demo"
+            componentDocs={docs}
+            apiDocs={['Carousel']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default CarouselDemo;
diff --git a/pages/cascadeselect/index.js b/pages/cascadeselect/index.js
new file mode 100644
index 0000000000..a3625e3884
--- /dev/null
+++ b/pages/cascadeselect/index.js
@@ -0,0 +1,116 @@
+import { AccessibilityDoc } from '@/components/doc/cascadeselect/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/cascadeselect/basicdoc';
+import { ClearIconDoc } from '@/components/doc/cascadeselect/clearicondoc';
+import { DisabledDoc } from '@/components/doc/cascadeselect/disableddoc';
+import { FilledDoc } from '@/components/doc/cascadeselect/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/cascadeselect/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/cascadeselect/importdoc';
+import { InvalidDoc } from '@/components/doc/cascadeselect/invaliddoc';
+import { LoadingDoc } from '@/components/doc/cascadeselect/loadingdoc';
+import { Wireframe } from '@/components/doc/cascadeselect/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/cascadeselect/templatedoc';
+import { StyledDoc } from '@/components/doc/cascadeselect/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/cascadeselect/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const CascadeSelectDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'loadingstate',
+            label: 'Loading State',
+            component: LoadingDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'clearicon',
+            label: 'Clear Icon',
+            component: ClearIconDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.cascadeselect.options',
+            label: 'CascadeSelect PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React CascadeSelect Component"
+            header="CascadeSelect"
+            description="CascadeSelect is a form component to select a value from a nested structure of options."
+            componentDocs={docs}
+            apiDocs={['CascadeSelect']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default CascadeSelectDemo;
diff --git a/pages/chart/index.js b/pages/chart/index.js
new file mode 100644
index 0000000000..47df34d927
--- /dev/null
+++ b/pages/chart/index.js
@@ -0,0 +1,146 @@
+import { AccessibilityDoc } from '@/components/doc/chart/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/chart/basicdoc';
+import { ChartJSDoc } from '@/components/doc/chart/chartjsdoc';
+import { ComboDoc } from '@/components/doc/chart/combodoc';
+import { DoughnutChartDoc } from '@/components/doc/chart/doughnutdoc';
+import { HorizontalBarDoc } from '@/components/doc/chart/horizontalbardoc';
+import { ImportDoc } from '@/components/doc/chart/importdoc';
+import { LineDoc } from '@/components/doc/chart/linedoc';
+import { LineStylesDoc } from '@/components/doc/chart/linestylesdoc';
+import { MultiAxisDoc } from '@/components/doc/chart/multiaxisdoc';
+import { PieChartDoc } from '@/components/doc/chart/piechartdoc';
+import { PolarAreaDoc } from '@/components/doc/chart/polarareadoc';
+import { Wireframe } from '@/components/doc/chart/pt/wireframe';
+import { RadarDoc } from '@/components/doc/chart/radardoc';
+import { StackedBarDoc } from '@/components/doc/chart/stackedbardoc';
+import { StyledDoc } from '@/components/doc/chart/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/chart/theming/tailwinddoc';
+import { VerticalBarDoc } from '@/components/doc/chart/verticalbardoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const ChartDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'chartjs',
+            label: 'Chart.js',
+            component: ChartJSDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'pie',
+            label: 'Pie',
+            component: PieChartDoc
+        },
+        {
+            id: 'doughnut',
+            label: 'Doughnut',
+            component: DoughnutChartDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical Bar',
+            component: VerticalBarDoc
+        },
+        {
+            id: 'horizontal',
+            label: 'Horizontal Bar',
+            component: HorizontalBarDoc
+        },
+        {
+            id: 'stacked',
+            label: 'Stacked Bar',
+            component: StackedBarDoc
+        },
+        {
+            id: 'line',
+            label: 'Line',
+            component: LineDoc
+        },
+        {
+            id: 'multiaxis',
+            label: 'Multi Axis',
+            component: MultiAxisDoc
+        },
+        {
+            id: 'linestyles',
+            label: 'Line Styles',
+            component: LineStylesDoc
+        },
+        {
+            id: 'polararea',
+            label: 'Polar Area',
+            component: PolarAreaDoc
+        },
+        {
+            id: 'radar',
+            label: 'Radar',
+            component: RadarDoc
+        },
+        {
+            id: 'combo',
+            label: 'Combo',
+            component: ComboDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.chart.options',
+            label: 'Chart PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Chart Component"
+            header="Chart"
+            description="Chart components are based on Chart.js, an open source HTML5 based charting library."
+            componentDocs={docs}
+            apiDocs={['Chart']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default ChartDemo;
diff --git a/pages/checkbox/index.js b/pages/checkbox/index.js
new file mode 100644
index 0000000000..ef4aedec8e
--- /dev/null
+++ b/pages/checkbox/index.js
@@ -0,0 +1,95 @@
+import { AccessibilityDoc } from '@/components/doc/checkbox/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/checkbox/basicdoc';
+import { DisabledDoc } from '@/components/doc/checkbox/disableddoc';
+import { DynamicDoc } from '@/components/doc/checkbox/dynamicdoc';
+import { FilledDoc } from '@/components/doc/checkbox/filleddoc';
+import { GroupDoc } from '@/components/doc/checkbox/groupdoc';
+import { ImportDoc } from '@/components/doc/checkbox/importdoc';
+import { InvalidDoc } from '@/components/doc/checkbox/invaliddoc';
+import { Wireframe } from '@/components/doc/checkbox/pt/wireframe';
+import { StyledDoc } from '@/components/doc/checkbox/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/checkbox/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const CheckboxDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'dynamic',
+            label: 'Dynamic',
+            component: DynamicDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.checkbox.options',
+            label: 'Checkbox PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Checkbox Component" header="Checkbox" description="Checkbox is an extension to standard checkbox element with theming." componentDocs={docs} apiDocs={['Checkbox']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default CheckboxDemo;
diff --git a/pages/chip/index.js b/pages/chip/index.js
new file mode 100644
index 0000000000..dcc07014e6
--- /dev/null
+++ b/pages/chip/index.js
@@ -0,0 +1,84 @@
+import { AccessibilityDoc } from '@/components/doc/chip/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/chip/basicdoc';
+import { IconDoc } from '@/components/doc/chip/icondoc';
+import { ImageDoc } from '@/components/doc/chip/imagedoc';
+import { ImportDoc } from '@/components/doc/chip/importdoc';
+import { Wireframe } from '@/components/doc/chip/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/chip/templatedoc';
+import { StyledDoc } from '@/components/doc/chip/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/chip/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const ChipDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'icon',
+            label: 'Icon',
+            component: IconDoc
+        },
+        {
+            id: 'image',
+            label: 'Image',
+            component: ImageDoc
+        },
+        {
+            id: 'templatedoc',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.chip.options',
+            label: 'Chip PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Chip Component" header="Chip" description="Chip represents entities using icons, labels and images." componentDocs={docs} apiDocs={['Chip']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ChipDemo;
diff --git a/pages/chips/index.js b/pages/chips/index.js
new file mode 100644
index 0000000000..f8fd2799b0
--- /dev/null
+++ b/pages/chips/index.js
@@ -0,0 +1,106 @@
+import { AccessibilityDoc } from '@/components/doc/chips/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/chips/basicdoc';
+import { DisabledDoc } from '@/components/doc/chips/disableddoc';
+import { FilledDoc } from '@/components/doc/chips/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/chips/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/chips/importdoc';
+import { InvalidDoc } from '@/components/doc/chips/invaliddoc';
+import { KeyFilterDoc } from '@/components/doc/chips/keyfilterdoc';
+import { Wireframe } from '@/components/doc/chips/pt/wireframe';
+import { SeparatorDoc } from '@/components/doc/chips/separatordoc';
+import { TemplateDoc } from '@/components/doc/chips/templatedoc';
+import { StyledDoc } from '@/components/doc/chips/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/chips/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const ChipsDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'separator',
+            label: 'Separator',
+            component: SeparatorDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'keyfilter',
+            label: 'Key Filter',
+            component: KeyFilterDoc
+        },
+        {
+            id: 'float',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.chips.options',
+            label: 'Chips PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Chips Component" header="Chips" description="Chips is used to enter multiple values on an input field." componentDocs={docs} apiDocs={['Chips']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ChipsDemo;
diff --git a/pages/colorpicker/index.js b/pages/colorpicker/index.js
new file mode 100644
index 0000000000..c00df6f651
--- /dev/null
+++ b/pages/colorpicker/index.js
@@ -0,0 +1,82 @@
+import { AccessibilityDoc } from '@/components/doc/colorpicker/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/colorpicker/basicdoc';
+import { DisabledDoc } from '@/components/doc/colorpicker/disableddoc';
+import { FormatDoc } from '@/components/doc/colorpicker/formatdoc';
+import { ImportDoc } from '@/components/doc/colorpicker/importdoc';
+import { InlineDoc } from '@/components/doc/colorpicker/inlinedoc';
+import { Wireframe } from '@/components/doc/colorpicker/pt/wireframe';
+import { StyledDoc } from '@/components/doc/colorpicker/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/colorpicker/theming/tailwinddoc';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+
+const ColorPickerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'inline',
+            label: 'Inline',
+            component: InlineDoc
+        },
+        {
+            id: 'format',
+            label: 'Format',
+            component: FormatDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.colorpicker.options',
+            label: 'ColorPicker PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React ColorPicker Component" header="ColorPicker" description="ColorPicker is an input component to select a color." componentDocs={docs} apiDocs={['ColorPicker']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ColorPickerDemo;
diff --git a/pages/colors/index.js b/pages/colors/index.js
new file mode 100644
index 0000000000..3c5ba10ad9
--- /dev/null
+++ b/pages/colors/index.js
@@ -0,0 +1,47 @@
+import { OverviewDoc } from '@/components/doc/colors/overviewdoc';
+import { PaletteDoc } from '@/components/doc/colors/palettedoc';
+import { SurfacesDoc } from '@/components/doc/colors/surfacesdoc';
+import { DocSectionNav } from '@/components/doc/common/docsectionnav';
+import { DocSections } from '@/components/doc/common/docsections';
+import Head from 'next/head';
+
+const IconsDoc = () => {
+    const docs = [
+        {
+            id: 'overview',
+            label: 'Overview',
+            component: OverviewDoc
+        },
+        {
+            id: 'surfaces',
+            label: 'Surfaces',
+            component: SurfacesDoc
+        },
+        {
+            id: 'palette',
+            label: 'Palette',
+            component: PaletteDoc
+        }
+    ];
+
+    return (
+        <div>
+            <Head>
+                <title>Color System - PrimeReact</title>
+                <meta name="description" content="Each PrimeReact theme exports its own color palette." />
+            </Head>
+            <div className="doc">
+                <div className="doc-main">
+                    <div className="doc-intro">
+                        <h1>Color System</h1>
+                        <p>Each PrimeReact theme exports its own color palette.</p>
+                    </div>
+                    <DocSections docs={docs} />
+                </div>
+                <DocSectionNav docs={docs} />
+            </div>
+        </div>
+    );
+};
+
+export default IconsDoc;
diff --git a/pages/configuration/index.js b/pages/configuration/index.js
new file mode 100644
index 0000000000..da1e7d98f7
--- /dev/null
+++ b/pages/configuration/index.js
@@ -0,0 +1,115 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AppendToDoc } from '@/components/doc/configuration/appendtodoc';
+import { CSSTransitionDoc } from '@/components/doc/configuration/csstransitiondoc';
+import { FilterMatchModeDoc } from '@/components/doc/configuration/filtermatchmodedoc';
+import { HideOverlaysDoc } from '@/components/doc/configuration/hideoverlaysdoc';
+import { InputStyleDoc } from '@/components/doc/configuration/inputstyledoc';
+import { AddLocaleDoc } from '@/components/doc/configuration/locale/addlocaledoc';
+import { ImportDoc } from '@/components/doc/configuration/locale/importdoc';
+import { RepositoryDoc } from '@/components/doc/configuration/locale/repositorydoc';
+import { SetLocaleDoc } from '@/components/doc/configuration/locale/setlocaledoc';
+import { SetupLocaleDoc } from '@/components/doc/configuration/locale/setuplocaledoc';
+import { NonceDoc } from '@/components/doc/configuration/noncedoc';
+import { NullSortOrderDoc } from '@/components/doc/configuration/nullsortorderdoc';
+import { RippleDoc } from '@/components/doc/configuration/rippledoc';
+import { StyleContainer } from '@/components/doc/configuration/stylecontainer';
+import { ZIndexDoc } from '@/components/doc/configuration/zindexdoc';
+
+const InstallationPage = () => {
+    const docs = [
+        {
+            id: 'appendto',
+            label: 'AppendTo',
+            component: AppendToDoc
+        },
+        {
+            id: 'stylecontainer',
+            label: 'StyleContainer',
+            component: StyleContainer
+        },
+        {
+            id: 'csstransition',
+            label: 'CSS Transition',
+            component: CSSTransitionDoc
+        },
+        {
+            id: 'filtermatchmode',
+            label: 'Filter Mode',
+            component: FilterMatchModeDoc
+        },
+        {
+            id: 'hideoverlays',
+            label: 'Hide Overlays on Viewport Change',
+            component: HideOverlaysDoc
+        },
+        {
+            id: 'inputstyle',
+            label: 'InputStyle',
+            component: InputStyleDoc
+        },
+        {
+            id: 'nonce',
+            label: 'Nonce',
+            component: NonceDoc
+        },
+        {
+            id: 'nullsortorder',
+            label: 'Null Sort Order',
+            component: NullSortOrderDoc
+        },
+        {
+            id: 'ripple',
+            label: 'Ripple',
+            component: RippleDoc
+        },
+        {
+            id: 'zindex',
+            label: 'ZIndex',
+            component: ZIndexDoc
+        },
+        {
+            id: 'Locale',
+            label: 'Locale',
+            children: [
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupLocaleDoc
+                },
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'setlocale',
+                    label: 'Set Locale',
+                    component: SetLocaleDoc
+                },
+                {
+                    id: 'addlocale',
+                    label: 'Add Locale',
+                    component: AddLocaleDoc
+                },
+                {
+                    id: 'repositorydoc',
+                    label: 'Repository',
+                    component: RepositoryDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="Configuration - PrimeReact"
+            header="Configuration"
+            description="Global configuration options of the components."
+            componentDocs={docs}
+            apiDocs={['API']}
+            apiExclude={{ interfaces: ['PrimeIconsOptions'], types: 'excludeAll' }}
+        />
+    );
+};
+
+export default InstallationPage;
diff --git a/pages/confirmdialog/index.js b/pages/confirmdialog/index.js
new file mode 100644
index 0000000000..400d8a63be
--- /dev/null
+++ b/pages/confirmdialog/index.js
@@ -0,0 +1,109 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/confirmdialog/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/confirmdialog/basicdoc';
+import { DeclarativeDoc } from '@/components/doc/confirmdialog/declarativedoc';
+import { HeadlessDoc } from '@/components/doc/confirmdialog/headlessdoc';
+import { ImportDoc } from '@/components/doc/confirmdialog/importdoc';
+import { PositionDoc } from '@/components/doc/confirmdialog/positiondoc';
+import { Wireframe } from '@/components/doc/confirmdialog/pt/wireframe';
+import { ResponsiveDoc } from '@/components/doc/confirmdialog/responsivedoc';
+import { TemplateDoc } from '@/components/doc/confirmdialog/templatedoc';
+import { StyledDoc } from '@/components/doc/confirmdialog/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/confirmdialog/theming/tailwinddoc';
+import { ConfirmDialog } from '@/components/lib/primereact.all';
+
+const ConfirmDialogDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'position',
+            label: 'Position',
+            component: PositionDoc
+        },
+        {
+            id: 'declarative',
+            label: 'Declarative',
+            component: DeclarativeDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'responsive',
+            label: 'Responsive',
+            component: ResponsiveDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.confirmdialog.options',
+            label: 'ConfirmDialog PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <>
+            <DocComponent
+                title="React Confirmation Dialog Component"
+                header="ConfirmDialog"
+                description="ConfirmDialog is an easy to use and customizable Confirmation API using a dialog."
+                componentDocs={docs}
+                apiDocs={['ConfirmDialog']}
+                ptDocs={ptDocs}
+                themingDocs={themingDocs}
+            />
+            <ConfirmDialog />
+        </>
+    );
+};
+
+export default ConfirmDialogDemo;
diff --git a/pages/confirmpopup/index.js b/pages/confirmpopup/index.js
new file mode 100644
index 0000000000..33fb476998
--- /dev/null
+++ b/pages/confirmpopup/index.js
@@ -0,0 +1,97 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/confirmpopup/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/confirmpopup/basicdoc';
+import { DeclarativeDoc } from '@/components/doc/confirmpopup/declarativedoc';
+import { HeadlessDoc } from '@/components/doc/confirmpopup/headlessdoc';
+import { ImportDoc } from '@/components/doc/confirmpopup/importdoc';
+import { Wireframe } from '@/components/doc/confirmpopup/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/confirmpopup/templatedoc';
+import { StyledDoc } from '@/components/doc/confirmpopup/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/confirmpopup/theming/tailwinddoc';
+import { ConfirmPopup } from '@/components/lib/confirmpopup/ConfirmPopup';
+
+const ConfirmPopupDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'declarative',
+            label: 'Declarative',
+            component: DeclarativeDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.confirmpopup.options',
+            label: 'ConfirmPopup PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <>
+            <DocComponent
+                title="React Confirmation Popup Component"
+                header="ConfirmPopup"
+                description="ConfirmPopup is an easy to use and customizable Confirmation API using a popover."
+                componentDocs={docs}
+                apiDocs={['ConfirmPopup']}
+                ptDocs={ptDocs}
+                themingDocs={themingDocs}
+            />
+            <ConfirmPopup />
+        </>
+    );
+};
+
+export default ConfirmPopupDemo;
diff --git a/pages/contextmenu/index.js b/pages/contextmenu/index.js
new file mode 100644
index 0000000000..bd697e10d8
--- /dev/null
+++ b/pages/contextmenu/index.js
@@ -0,0 +1,104 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/contextmenu/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/contextmenu/basicdoc';
+import { CommandDoc } from '@/components/doc/contextmenu/commanddoc';
+import { DataTableDoc } from '@/components/doc/contextmenu/datatabledoc';
+import { DocumentDoc } from '@/components/doc/contextmenu/documentdoc';
+import { ImportDoc } from '@/components/doc/contextmenu/importdoc';
+import { Wireframe } from '@/components/doc/contextmenu/pt/wireframe';
+import { RouterDoc } from '@/components/doc/contextmenu/routerdoc';
+import { TemplateDoc } from '@/components/doc/contextmenu/templatedoc';
+import { StyledDoc } from '@/components/doc/contextmenu/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/contextmenu/theming/tailwinddoc';
+
+const ContextMenuDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'document',
+            label: 'Document',
+            component: DocumentDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'command',
+            label: 'Command',
+            component: CommandDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'datatable',
+            label: 'DataTable',
+            component: DataTableDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.contextmenu.options',
+            label: 'ContextMenu PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React ContextMenu Component"
+            header="ContextMenu"
+            description="ContextMenu displays an overlay menu on right click of its target."
+            componentDocs={docs}
+            apiDocs={['ContextMenu', 'MenuItem']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default ContextMenuDemo;
diff --git a/pages/contribution/index.js b/pages/contribution/index.js
new file mode 100644
index 0000000000..7f9a746d04
--- /dev/null
+++ b/pages/contribution/index.js
@@ -0,0 +1,70 @@
+import { IntroductionDoc } from '@/components/doc/contribution/introductiondoc';
+import { DocSectionNav } from '@/components/doc/common/docsectionnav';
+import { DocSections } from '@/components/doc/common/docsections';
+import Head from 'next/head';
+import { HelpNeededDoc } from '@/components/doc/contribution/helpneededdoc';
+import { KeyPointsDoc } from '@/components/doc/contribution/keypointsdoc';
+import { CommunicationDoc } from '@/components/doc/contribution/communicationdoc';
+import { PathwayDoc } from '@/components/doc/contribution/pathwaydoc';
+import { BenefitsDoc } from '@/components/doc/contribution/benefitsdoc';
+import { CLADoc } from '@/components/doc/contribution/cladoc';
+
+const ContributionPage = () => {
+    const docs = [
+        {
+            id: 'introduction',
+            label: 'Introduction',
+            component: IntroductionDoc
+        },
+        {
+            id: 'helpneeded',
+            label: 'Help Needed',
+            component: HelpNeededDoc
+        },
+        {
+            id: 'keypoints',
+            label: 'Key Points',
+            component: KeyPointsDoc
+        },
+        {
+            id: 'communication',
+            label: 'Communication',
+            component: CommunicationDoc
+        },
+        {
+            id: 'pathway',
+            label: 'Pathway',
+            component: PathwayDoc
+        },
+        {
+            id: 'benefits',
+            label: 'Benefits',
+            component: BenefitsDoc
+        },
+        {
+            id: 'cla',
+            label: 'CLA',
+            component: CLADoc
+        }
+    ];
+
+    return (
+        <div>
+            <Head>
+                <title>Contribution - PrimeReact</title>
+            </Head>
+            <div className="doc">
+                <div className="doc-main">
+                    <div className="doc-intro">
+                        <h1>Contribution Guide</h1>
+                        <p>Welcome to the PrimeReact Contribution Guide and thank you for considering contributing.</p>
+                    </div>
+                    <DocSections docs={docs} />
+                </div>
+                <DocSectionNav docs={docs} />
+            </div>
+        </div>
+    );
+};
+
+export default ContributionPage;
diff --git a/pages/customicons/index.js b/pages/customicons/index.js
new file mode 100644
index 0000000000..108a606b9e
--- /dev/null
+++ b/pages/customicons/index.js
@@ -0,0 +1,42 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { FontAwesomeDoc } from '@/components/doc/customicons/fontawesomedoc';
+import { ImageDoc } from '@/components/doc/customicons/imagedoc';
+import { MaterialDoc } from '@/components/doc/customicons/materialdoc';
+import { SVGDoc } from '@/components/doc/customicons/svgdoc';
+
+const ContextMenuDemo = () => {
+    const docs = [
+        {
+            id: 'material',
+            label: 'Material',
+            component: MaterialDoc
+        },
+        {
+            id: 'fontawesome',
+            label: 'Font Awesome',
+            component: FontAwesomeDoc
+        },
+        {
+            id: 'svg',
+            label: 'SVG',
+            component: SVGDoc
+        },
+        {
+            id: 'image',
+            label: 'Image',
+            component: ImageDoc
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="Custom Icons - PrimeReact"
+            header="Custom Icons"
+            description="PrimeReact components can be used with any icon library using the templating features. Icons are passed the <i>iconProps</i> of the original icon and the <i>props</i> of the component."
+            componentDocs={docs}
+            hideTabMenu
+        />
+    );
+};
+
+export default ContextMenuDemo;
diff --git a/pages/datascroller/index.js b/pages/datascroller/index.js
new file mode 100644
index 0000000000..15455c7d6f
--- /dev/null
+++ b/pages/datascroller/index.js
@@ -0,0 +1,87 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/datascroller/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/datascroller/basicdoc';
+import { ImportDoc } from '@/components/doc/datascroller/importdoc';
+import { InlineDataScrollerDoc } from '@/components/doc/datascroller/inlinedoc';
+import { LoaderDataScrollerDoc } from '@/components/doc/datascroller/loaderdoc';
+import { StyledDoc } from '@/components/doc/datascroller/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/datascroller/theming/tailwinddoc';
+import { Wireframe } from '@/components/doc/datascroller/pt/wireframe';
+
+const DataScrollerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'inline',
+            label: 'Inline',
+            component: InlineDataScrollerDoc
+        },
+        {
+            id: 'loader',
+            label: 'Loader',
+            component: LoaderDataScrollerDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.datascroller.options',
+            label: 'DataScroller PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React DataScroller Component"
+            header="DataScroller"
+            description="DataScroller displays data with on demand loading using scroll."
+            componentDocs={docs}
+            apiDocs={['DataScroller']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default DataScrollerDemo;
diff --git a/pages/datatable/index.js b/pages/datatable/index.js
new file mode 100644
index 0000000000..2baf0303e5
--- /dev/null
+++ b/pages/datatable/index.js
@@ -0,0 +1,442 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/datatable/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/datatable/basicdoc';
+import { DisabledCellSelectionDoc } from '@/components/doc/datatable/cellselection/disableddoc';
+import { CellSelectEventsDoc } from '@/components/doc/datatable/cellselection/eventsdoc';
+import { MultipleCellsSelectionDoc } from '@/components/doc/datatable/cellselection/multipledoc';
+import { SingleCellSelectionDoc } from '@/components/doc/datatable/cellselection/singledoc';
+import { ExpandModeDoc } from '@/components/doc/datatable/colresize/expandmodedoc';
+import { FitModeDoc } from '@/components/doc/datatable/colresize/fitmodedoc';
+import { ColumnGroupDoc } from '@/components/doc/datatable/columngroupdoc';
+import { ColumnToggleDoc } from '@/components/doc/datatable/columntoggledoc';
+import { ConditionalStyleDoc } from '@/components/doc/datatable/conditionalstyledoc';
+import { ContextMenuDoc } from '@/components/doc/datatable/contextmenudoc';
+import { DynamicColumnsDoc } from '@/components/doc/datatable/dynamiccolumnsdoc';
+import { CellEditDoc } from '@/components/doc/datatable/edit/celleditdoc';
+import { RowEditDoc } from '@/components/doc/datatable/edit/roweditdoc';
+import { ExportDoc } from '@/components/doc/datatable/exportdoc';
+import { AdvancedFilterDoc } from '@/components/doc/datatable/filter/advanceddoc';
+import { BasicFilterDoc } from '@/components/doc/datatable/filter/basicdoc';
+import { CustomFilterDoc } from '@/components/doc/datatable/filter/customdoc';
+import { GridLinesDoc } from '@/components/doc/datatable/gridlinesdoc';
+import { ImportDoc } from '@/components/doc/datatable/importdoc';
+import { LazyLoadDoc } from '@/components/doc/datatable/lazyloaddoc';
+import { PaginatorBasicDoc } from '@/components/doc/datatable/paginator/basicdoc';
+import { PaginatorTemplateDoc } from '@/components/doc/datatable/paginator/templatedoc';
+import { Wireframe } from '@/components/doc/datatable/pt/wireframe';
+import { ReorderDoc } from '@/components/doc/datatable/reorderdoc';
+import { RowExpansionDoc } from '@/components/doc/datatable/rowexpansiondoc';
+import { ExpandableRowGroupDoc } from '@/components/doc/datatable/rowgroup/expandabledoc';
+import { RowSpanRowGroupDoc } from '@/components/doc/datatable/rowgroup/rowspandoc';
+import { SubHeaderRowGroupDoc } from '@/components/doc/datatable/rowgroup/subheaderdoc';
+import { CheckboxRowSelectionDoc } from '@/components/doc/datatable/rowselection/checkboxdoc';
+import { DisabledRowSelectionDoc } from '@/components/doc/datatable/rowselection/disableddoc';
+import { RowSelectEventsDoc } from '@/components/doc/datatable/rowselection/eventsdoc';
+import { MultipleRowsSelectionDoc } from '@/components/doc/datatable/rowselection/multipledoc';
+import { RadioButtonRowSelectionDoc } from '@/components/doc/datatable/rowselection/radiobuttondoc';
+import { SingleRowSelectionDoc } from '@/components/doc/datatable/rowselection/singledoc';
+import { CustomersDoc } from '@/components/doc/datatable/samples/customersdoc';
+import { ProductsDoc } from '@/components/doc/datatable/samples/productsdoc';
+import { FlexibleScrollDoc } from '@/components/doc/datatable/scroll/flexibledoc';
+import { FrozenColumnsDoc } from '@/components/doc/datatable/scroll/frozencolumnsdoc';
+import { FrozenRowsDoc } from '@/components/doc/datatable/scroll/frozenrowsdoc';
+import { HorizontalScrollDoc } from '@/components/doc/datatable/scroll/horizontaldoc';
+import { VerticalScrollDoc } from '@/components/doc/datatable/scroll/verticaldoc';
+import { SizeDoc } from '@/components/doc/datatable/sizedoc';
+import { MultipleColumnsDoc } from '@/components/doc/datatable/sort/multiplecolumnsdoc';
+import { PresortDoc } from '@/components/doc/datatable/sort/presortdoc';
+import { RemovableSortDoc } from '@/components/doc/datatable/sort/removablesortdoc';
+import { SingleColumnDoc } from '@/components/doc/datatable/sort/singlecolumndoc';
+import { StatefulDoc } from '@/components/doc/datatable/statefuldoc';
+import { StripedRowsDoc } from '@/components/doc/datatable/stripedrowsdoc';
+import { TemplateDoc } from '@/components/doc/datatable/templatedoc';
+import { StyledDoc } from '@/components/doc/datatable/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/datatable/theming/tailwinddoc';
+import { LazyVirtualScrollDoc } from '@/components/doc/datatable/virtualscroll/lazydoc';
+import { PreloadVirtualScrollDoc } from '@/components/doc/datatable/virtualscroll/preloaddoc';
+
+const DataTableDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'dynamic_columns',
+            label: 'Dynamic Columns',
+            component: DynamicColumnsDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'size',
+            label: 'Size',
+            component: SizeDoc
+        },
+        {
+            id: 'gridlines',
+            label: 'Grid Lines',
+            component: GridLinesDoc
+        },
+        {
+            id: 'striped',
+            label: 'Striped Rows',
+            component: StripedRowsDoc
+        },
+        {
+            id: 'paginator',
+            label: 'Paginator',
+            children: [
+                {
+                    id: 'paginator_basic',
+                    label: 'Basic',
+                    component: PaginatorBasicDoc
+                },
+                {
+                    id: 'paginator_template',
+                    label: 'Template',
+                    component: PaginatorTemplateDoc
+                }
+            ]
+        },
+        {
+            id: 'sort',
+            label: 'Sort',
+            children: [
+                {
+                    id: 'single_sort',
+                    label: 'Single Column',
+                    component: SingleColumnDoc
+                },
+                {
+                    id: 'multiple_sort',
+                    label: 'Multiple Columns',
+                    component: MultipleColumnsDoc
+                },
+                {
+                    id: 'pre_sort',
+                    label: 'Presort',
+                    component: PresortDoc
+                },
+                {
+                    id: 'removable_sort',
+                    label: 'Removable',
+                    component: RemovableSortDoc
+                }
+            ]
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            children: [
+                {
+                    id: 'basic_filter',
+                    label: 'Basic',
+                    component: BasicFilterDoc
+                },
+                {
+                    id: 'advanced_filter',
+                    label: 'Advanced',
+                    component: AdvancedFilterDoc
+                },
+                {
+                    id: 'custom_filter',
+                    label: 'Custom',
+                    component: CustomFilterDoc
+                }
+            ]
+        },
+        {
+            id: 'row_selection',
+            label: 'Row Selection',
+            children: [
+                {
+                    id: 'single_row_selection',
+                    label: 'Single',
+                    component: SingleRowSelectionDoc
+                },
+                {
+                    id: 'multiple_rows_selection',
+                    label: 'Multiple',
+                    component: MultipleRowsSelectionDoc
+                },
+                {
+                    id: 'radiobutton_row_selection',
+                    label: 'RadioButton',
+                    component: RadioButtonRowSelectionDoc
+                },
+                {
+                    id: 'checkbox_row_selection',
+                    label: 'Checkbox',
+                    component: CheckboxRowSelectionDoc
+                },
+                {
+                    id: 'row_selection_events',
+                    label: 'Events',
+                    component: RowSelectEventsDoc
+                },
+                {
+                    id: 'disabled_row_selection',
+                    label: 'Disabled',
+                    component: DisabledRowSelectionDoc
+                }
+            ]
+        },
+        {
+            id: 'cell_selection',
+            label: 'Cell Selection',
+            children: [
+                {
+                    id: 'single_cell_selection',
+                    label: 'Single',
+                    component: SingleCellSelectionDoc
+                },
+                {
+                    id: 'multiple_cells_selection',
+                    label: 'Multiple',
+                    component: MultipleCellsSelectionDoc
+                },
+                {
+                    id: 'cell_selection_events',
+                    label: 'Events',
+                    component: CellSelectEventsDoc
+                },
+                {
+                    id: 'disabled_cells_selection',
+                    label: 'Disabled',
+                    component: DisabledCellSelectionDoc
+                }
+            ]
+        },
+        {
+            id: 'row_expansion',
+            label: 'Row Expansion',
+            component: RowExpansionDoc
+        },
+        {
+            id: 'edit',
+            label: 'Edit',
+            children: [
+                {
+                    id: 'cell_edit',
+                    label: 'Cell',
+                    component: CellEditDoc
+                },
+                {
+                    id: 'row_edit',
+                    label: 'Row',
+                    component: RowEditDoc
+                }
+            ]
+        },
+        {
+            id: 'lazy_load',
+            label: 'Lazy Load',
+            component: LazyLoadDoc
+        },
+        {
+            id: 'scroll',
+            label: 'Scroll',
+            children: [
+                {
+                    id: 'vertical_scroll',
+                    label: 'Vertical',
+                    component: VerticalScrollDoc
+                },
+                {
+                    id: 'flex_scroll',
+                    label: 'Flexible',
+                    component: FlexibleScrollDoc
+                },
+                {
+                    id: 'horizontal_scroll',
+                    label: 'Horizontal',
+                    component: HorizontalScrollDoc
+                },
+                {
+                    id: 'frozen_rows',
+                    label: 'Frozen Rows',
+                    component: FrozenRowsDoc
+                },
+                {
+                    id: 'frozen_columns',
+                    label: 'Frozen Columns',
+                    component: FrozenColumnsDoc
+                }
+            ]
+        },
+        {
+            id: 'virtualscroll',
+            label: 'Virtual Scroll',
+            children: [
+                {
+                    id: 'preload_virtualscroll',
+                    label: 'Preload',
+                    component: PreloadVirtualScrollDoc
+                },
+                {
+                    id: 'lazy_virtualscroll',
+                    label: 'Lazy',
+                    component: LazyVirtualScrollDoc
+                }
+            ]
+        },
+        {
+            id: 'column_group',
+            label: 'Column Group',
+            component: ColumnGroupDoc
+        },
+        {
+            id: 'row_group',
+            label: 'Row Group',
+            children: [
+                {
+                    id: 'rowgroup_subheader',
+                    label: 'Subheader',
+                    component: SubHeaderRowGroupDoc
+                },
+                {
+                    id: 'rowgroup_expandable',
+                    label: 'Expandable',
+                    component: ExpandableRowGroupDoc
+                },
+                {
+                    id: 'rowgroup_rowspan',
+                    label: 'RowSpan',
+                    component: RowSpanRowGroupDoc
+                }
+            ]
+        },
+        {
+            id: 'conditional_style',
+            label: 'Conditional Style',
+            component: ConditionalStyleDoc
+        },
+        {
+            id: 'column_resize',
+            label: 'Column Resize',
+            children: [
+                {
+                    id: 'resize_fitmode',
+                    label: 'Fit Mode',
+                    component: FitModeDoc
+                },
+                {
+                    id: 'resize_expandmode',
+                    label: 'Expand Mode',
+                    component: ExpandModeDoc
+                }
+            ]
+        },
+        {
+            id: 'reorder',
+            label: 'Reorder',
+            component: ReorderDoc
+        },
+        {
+            id: 'column_toggle',
+            label: 'Column Toggle',
+            component: ColumnToggleDoc
+        },
+        {
+            id: 'export',
+            label: 'Export',
+            component: ExportDoc
+        },
+        {
+            id: 'contextmenu',
+            label: 'Context Menu',
+            component: ContextMenuDoc
+        },
+        {
+            id: 'stateful',
+            label: 'Stateful',
+            component: StatefulDoc
+        },
+        {
+            id: 'samples',
+            label: 'Samples',
+            children: [
+                {
+                    id: 'customers',
+                    label: 'Customers',
+                    component: CustomersDoc
+                },
+                {
+                    id: 'dtproducts',
+                    label: 'Products',
+                    component: ProductsDoc
+                }
+            ]
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.datatable.options',
+            label: 'DataTable PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.column.options',
+            label: 'Column PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.columngroup.options',
+            label: 'ColumnGroup PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.row.options',
+            label: 'Row PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent title="React Table Component" header="DataTable" description="DataTable displays data in tabular format." componentDocs={docs} apiDocs={['DataTable', 'Column', 'Row', 'ColumnGroup']} ptDocs={ptDocs} themingDocs={themingDocs} />
+    );
+};
+
+export default DataTableDemo;
diff --git a/pages/dataview/index.js b/pages/dataview/index.js
new file mode 100644
index 0000000000..3b8015aeac
--- /dev/null
+++ b/pages/dataview/index.js
@@ -0,0 +1,105 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/dataview/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/dataview/basicdoc';
+import { ImportDoc } from '@/components/doc/dataview/importdoc';
+import { LayoutDoc } from '@/components/doc/dataview/layoutdoc';
+import { LoadingDoc } from '@/components/doc/dataview/loadingdoc';
+import { PaginationDoc } from '@/components/doc/dataview/paginationdoc';
+import { Wireframe } from '@/components/doc/dataview/pt/wireframe';
+import { SortingDoc } from '@/components/doc/dataview/sortingdoc';
+import { StyledDoc } from '@/components/doc/dataview/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/dataview/theming/tailwinddoc';
+
+const DataViewDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'pagination',
+            label: 'Pagination',
+            component: PaginationDoc
+        },
+        {
+            id: 'sorting',
+            label: 'Sorting',
+            component: SortingDoc
+        },
+        {
+            id: 'layout',
+            label: 'Layout',
+            component: LayoutDoc
+        },
+        {
+            id: 'loading',
+            label: 'Loading',
+            component: LoadingDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.dataview.options',
+            label: 'DataView PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.dataviewlayoutoptions.options',
+            label: 'DataViewLayoutOptions PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React DataView Component"
+            header="DataView"
+            description="DataView displays data in grid or list layout with pagination and sorting features."
+            componentDocs={docs}
+            apiDocs={['DataView']}
+            className="dataview-demo"
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default DataViewDemo;
diff --git a/pages/deferredcontent/index.js b/pages/deferredcontent/index.js
new file mode 100644
index 0000000000..95ee995b84
--- /dev/null
+++ b/pages/deferredcontent/index.js
@@ -0,0 +1,70 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/deferredcontent/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/deferredcontent/basicdoc';
+import { DataTableDoc } from '@/components/doc/deferredcontent/datatabledoc';
+import { ImportDoc } from '@/components/doc/deferredcontent/importdoc';
+import { Wireframe } from '@/components/doc/deferredcontent/pt/wireframe';
+import { StyledDoc } from '@/components/doc/deferredcontent/theming/styleddoc';
+
+const DeferredContentDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'datatable',
+            label: 'DataTable',
+            component: DataTableDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.image',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.deferredcontent.options',
+            label: 'DeferredContent PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Deferred Content Component"
+            header="DeferredContent"
+            description="DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll."
+            componentDocs={docs}
+            apiDocs={['DeferredContent']}
+            ptDocs={ptDocs}
+            ptDescription=""
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default DeferredContentDemo;
diff --git a/pages/dialog/index.js b/pages/dialog/index.js
new file mode 100644
index 0000000000..3a094d42f3
--- /dev/null
+++ b/pages/dialog/index.js
@@ -0,0 +1,113 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/dialog/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/dialog/basicdoc';
+import { FooterDoc } from '@/components/doc/dialog/footerdoc';
+import { HeadlessDoc } from '@/components/doc/dialog/headlessdoc';
+import { ImportDoc } from '@/components/doc/dialog/importdoc';
+import { LongContentDoc } from '@/components/doc/dialog/longcontentdoc';
+import { MaximizableDoc } from '@/components/doc/dialog/maximizabledoc';
+import { PositionDoc } from '@/components/doc/dialog/positiondoc';
+import { Wireframe } from '@/components/doc/dialog/pt/wireframe';
+import { ResponsiveDoc } from '@/components/doc/dialog/responsivedoc';
+import { TemplateDoc } from '@/components/doc/dialog/templatedoc';
+import { StyledDoc } from '@/components/doc/dialog/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/dialog/theming/tailwinddoc';
+import { WithoutModalDoc } from '@/components/doc/dialog/withoutmodaldoc';
+
+const DialogDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'position',
+            label: 'Position',
+            component: PositionDoc
+        },
+        {
+            id: 'maximizable',
+            label: 'Maximizable',
+            component: MaximizableDoc
+        },
+        {
+            id: 'longcontent',
+            label: 'Long Content',
+            component: LongContentDoc
+        },
+        {
+            id: 'modal',
+            label: 'Without Modal',
+            component: WithoutModalDoc
+        },
+        {
+            id: 'responsive',
+            label: 'Responsive',
+            component: ResponsiveDoc
+        },
+        {
+            id: 'footer',
+            label: 'Footer',
+            component: FooterDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.dialog.options',
+            label: 'Dialog PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" componentDocs={docs} apiDocs={['Dialog']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default DialogDemo;
diff --git a/pages/divider/index.js b/pages/divider/index.js
new file mode 100644
index 0000000000..455f98ddc5
--- /dev/null
+++ b/pages/divider/index.js
@@ -0,0 +1,90 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/divider/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/divider/basicdoc';
+import { ContentDoc } from '@/components/doc/divider/contentdoc';
+import { ImportDoc } from '@/components/doc/divider/importdoc';
+import { LoginDoc } from '@/components/doc/divider/logindoc';
+import { Wireframe } from '@/components/doc/divider/pt/wireframe';
+import { TailwindDoc } from '@/components/doc/divider/theming/tailwinddoc';
+import { TypeDoc } from '@/components/doc/divider/typedoc';
+import { VerticalDoc } from '@/components/doc/divider/verticaldoc';
+import { StyledDoc } from '@/components/doc/fieldset/theming/styleddoc';
+
+const DividerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'type',
+            label: 'Type',
+            component: TypeDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'content',
+            label: 'Content',
+            component: ContentDoc
+        },
+        {
+            id: 'login',
+            label: 'Login',
+            component: LoginDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.divider.options',
+            label: 'Divider PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Divider Component" header="Divider" description="Divider is used to separate contents." componentDocs={docs} apiDocs={['Divider']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default DividerDemo;
diff --git a/pages/dock/index.js b/pages/dock/index.js
new file mode 100644
index 0000000000..b94c2e5d27
--- /dev/null
+++ b/pages/dock/index.js
@@ -0,0 +1,82 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/dock/accessibilitydoc';
+import { AdvancedDoc } from '@/components/doc/dock/advanceddoc';
+import { BasicDoc } from '@/components/doc/dock/basicdoc';
+import { ImportDoc } from '@/components/doc/dock/importdoc';
+import { Wireframe } from '@/components/doc/dock/pt/wireframe';
+import { StyledDoc } from '@/components/doc/dock/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/dock/theming/tailwinddoc';
+
+const DockDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'advance',
+            label: 'Advanced',
+            component: AdvancedDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.dock.options',
+            label: 'Dock PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Dock Component"
+            header="Dock"
+            description="Dock is a navigation component consisting of menuitems."
+            componentDocs={docs}
+            apiDocs={['Dock', 'MenuItem']}
+            className="dock-demo"
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default DockDemo;
diff --git a/pages/dropdown/index.js b/pages/dropdown/index.js
new file mode 100644
index 0000000000..c1a49ab312
--- /dev/null
+++ b/pages/dropdown/index.js
@@ -0,0 +1,152 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/dropdown/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/dropdown/basicdoc';
+import { CheckmarkDoc } from '@/components/doc/dropdown/checkmarkdoc';
+import { ClearIconDoc } from '@/components/doc/dropdown/clearicondoc';
+import { DisabledDoc } from '@/components/doc/dropdown/disableddoc';
+import { EditableDoc } from '@/components/doc/dropdown/editabledoc';
+import { FilledDoc } from '@/components/doc/dropdown/filleddoc';
+import { FilterDoc } from '@/components/doc/dropdown/filterdoc';
+import { FloatLabelDoc } from '@/components/doc/dropdown/floatlabeldoc';
+import { GroupDoc } from '@/components/doc/dropdown/groupdoc';
+import { ImportDoc } from '@/components/doc/dropdown/importdoc';
+import { InvalidDoc } from '@/components/doc/dropdown/invaliddoc';
+import { LazyVirtualScrollDoc } from '@/components/doc/dropdown/lazyvirtualscrolldoc';
+import { LoadingDoc } from '@/components/doc/dropdown/loadingdoc';
+import { Wireframe } from '@/components/doc/dropdown/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/dropdown/templatedoc';
+import { StyledDoc } from '@/components/doc/dropdown/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/dropdown/theming/tailwinddoc';
+import { VirtualScrollDoc } from '@/components/doc/dropdown/virtualscrolldoc';
+
+const DropdownDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'checkmark',
+            label: 'Checkmark',
+            component: CheckmarkDoc
+        },
+        {
+            id: 'editable',
+            label: 'Editable',
+            component: EditableDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+        {
+            id: 'clearicon',
+            label: 'Clear Icon',
+            component: ClearIconDoc
+        },
+        {
+            id: 'loadingstate',
+            label: 'Loading State',
+            component: LoadingDoc
+        },
+        {
+            id: 'virtualscroll',
+            label: 'Virtual Scroll',
+            component: VirtualScrollDoc
+        },
+        {
+            id: 'lazyvirtualscroll',
+            label: 'Lazy Virtual Scroll',
+            component: LazyVirtualScrollDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.dropdown.options',
+            label: 'Dropdown PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Dropdown Component"
+            header="Dropdown"
+            description="Dropdown also known as Select, is used to choose an item from a collection of options."
+            componentDocs={docs}
+            apiDocs={['Dropdown']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default DropdownDemo;
diff --git a/pages/editor/index.js b/pages/editor/index.js
new file mode 100644
index 0000000000..47b8559524
--- /dev/null
+++ b/pages/editor/index.js
@@ -0,0 +1,82 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/editor/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/editor/basicdoc';
+import { ImportDoc } from '@/components/doc/editor/importdoc';
+import { Wireframe } from '@/components/doc/editor/pt/wireframe';
+import { QuillDoc } from '@/components/doc/editor/quilldoc';
+import { ReadOnlyDoc } from '@/components/doc/editor/readonlydoc';
+import { TemplateDoc } from '@/components/doc/editor/templatedoc';
+import { StyledDoc } from '@/components/doc/editor/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/editor/theming/tailwinddoc';
+
+const EditorDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'quill',
+            label: 'Quill',
+            component: QuillDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'readOnly',
+            label: 'ReadOnly',
+            component: ReadOnlyDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.editor.options',
+            label: 'Editor PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Editor Component" header="Editor" description="Editor is rich text editor component based on Quill." componentDocs={docs} apiDocs={['Editor']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default EditorDemo;
diff --git a/pages/fieldset/index.js b/pages/fieldset/index.js
new file mode 100644
index 0000000000..c27260f6d3
--- /dev/null
+++ b/pages/fieldset/index.js
@@ -0,0 +1,78 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/fieldset/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/fieldset/basicdoc';
+import { ImportDoc } from '@/components/doc/fieldset/importdoc';
+import { Wireframe } from '@/components/doc/fieldset/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/fieldset/templatedoc';
+import { StyledDoc } from '@/components/doc/fieldset/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/fieldset/theming/tailwinddoc';
+import { ToggleableDoc } from '@/components/doc/fieldset/toggleabledoc';
+
+const FieldsetDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'toggleable',
+            label: 'Toggleable',
+            component: ToggleableDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.fieldset.options',
+            label: 'Fieldset PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Fieldset Component" header="Fieldset" description="Fieldset is a grouping component with a content toggle feature." componentDocs={docs} apiDocs={['Fieldset']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default FieldsetDemo;
diff --git a/pages/fileupload/index.js b/pages/fileupload/index.js
new file mode 100644
index 0000000000..887827f6a9
--- /dev/null
+++ b/pages/fileupload/index.js
@@ -0,0 +1,99 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/fileupload/accessibilitydoc';
+import { AdvancedDoc } from '@/components/doc/fileupload/advanceddoc';
+import { AutoDoc } from '@/components/doc/fileupload/autodoc';
+import { BasicDoc } from '@/components/doc/fileupload/basicdoc';
+import { CustomUploadDoc } from '@/components/doc/fileupload/customuploaddoc';
+import { ImportDoc } from '@/components/doc/fileupload/importdoc';
+import { Wireframe } from '@/components/doc/fileupload/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/fileupload/templatedoc';
+import { StyledDoc } from '@/components/doc/fileupload/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/fileupload/theming/tailwinddoc';
+
+const FileUploadDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'auto',
+            label: 'Auto',
+            component: AutoDoc
+        },
+        {
+            id: 'advanced',
+            label: 'Advanced',
+            component: AdvancedDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'custom',
+            label: 'Custom Upload',
+            component: CustomUploadDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.fileupload.options',
+            label: 'FileUpload PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Upload Component"
+            header="FileUpload"
+            description="FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations."
+            componentDocs={docs}
+            apiDocs={['FileUpload']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default FileUploadDemo;
diff --git a/pages/floatlabel/index.js b/pages/floatlabel/index.js
new file mode 100644
index 0000000000..0a9d9da6cb
--- /dev/null
+++ b/pages/floatlabel/index.js
@@ -0,0 +1,65 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/floatlabel/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/floatlabel/basicdoc';
+import { ImportDoc } from '@/components/doc/floatlabel/importdoc';
+import { Wireframe } from '@/components/doc/floatlabel/pt/wireframe';
+import { StyleDoc } from '@/components/doc/floatlabel/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/floatlabel/theming/tailwinddoc';
+
+function FloatLabelDemo() {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyleDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.floatlabel.options',
+            label: 'FloatLabel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    return <DocComponent title="React Float Label" header="FloatLabel" description="FloatLabel appears on top of the input field when focused." componentDocs={docs} apiDocs={['FloatLabel']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+}
+
+export default FloatLabelDemo;
diff --git a/pages/galleria/index.js b/pages/galleria/index.js
new file mode 100644
index 0000000000..bb5cebdd00
--- /dev/null
+++ b/pages/galleria/index.js
@@ -0,0 +1,188 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/galleria/accessibilitydoc';
+import { AdvancedDoc } from '@/components/doc/galleria/advanceddoc';
+import { AutoPlayDoc } from '@/components/doc/galleria/autoplaydoc';
+import { BasicDoc } from '@/components/doc/galleria/basicdoc';
+import { CaptionDoc } from '@/components/doc/galleria/captiondoc';
+import { ControlledDoc } from '@/components/doc/galleria/controlleddoc';
+import { CustomContentDoc } from '@/components/doc/galleria/fullscreen/customcontentdoc';
+import { WithoutThumbnailsDoc } from '@/components/doc/galleria/fullscreen/withoutthumbnailsdoc';
+import { WithThumbnailsDoc } from '@/components/doc/galleria/fullscreen/withthumbnailsdoc';
+import { ImportDoc } from '@/components/doc/galleria/importdoc';
+import { ClickEventDoc } from '@/components/doc/galleria/indicator/clickeventdoc';
+import { HoverEventDoc } from '@/components/doc/galleria/indicator/hovereventdoc';
+import { PositionDoc } from '@/components/doc/galleria/indicator/positiondoc';
+import { IndicatorTemplateDoc } from '@/components/doc/galleria/indicator/templatedoc';
+import { HoverDoc } from '@/components/doc/galleria/navigator/hoverdoc';
+import { IndicatorsDoc } from '@/components/doc/galleria/navigator/indicatorsdoc';
+import { ItemThumbnailsDoc } from '@/components/doc/galleria/navigator/itemthumbnailsdoc';
+import { ItemWithoutThumbnailsDoc } from '@/components/doc/galleria/navigator/itemwithouthumbnailsdoc';
+import { Wireframe } from '@/components/doc/galleria/pt/wireframe';
+import { ResponsiveDoc } from '@/components/doc/galleria/responsivedoc';
+import { StyledDoc } from '@/components/doc/galleria/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/galleria/theming/tailwinddoc';
+import { ThumbnailDoc } from '@/components/doc/galleria/thumbnaildoc';
+
+const GalleriaDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'indicator',
+            label: 'Indicator',
+            description: 'Indicators allow quick navigation between the items.',
+            children: [
+                {
+                    id: 'indciatorbasic',
+                    label: 'Click Event',
+                    component: ClickEventDoc
+                },
+                {
+                    id: 'indciatorhoverevent',
+                    label: 'Hover Event',
+                    component: HoverEventDoc
+                },
+                {
+                    id: 'indicatorposition',
+                    label: 'Position',
+                    component: PositionDoc
+                },
+                {
+                    id: 'indciatortemplate',
+                    label: 'Template',
+                    component: IndicatorTemplateDoc
+                }
+            ]
+        },
+        {
+            id: 'thumbnail',
+            label: 'Thumbnail',
+            component: ThumbnailDoc
+        },
+        {
+            id: 'responsive',
+            label: 'Responsive',
+            component: ResponsiveDoc
+        },
+        {
+            id: 'fullscreen',
+            label: 'Full Screen',
+            description: 'In fullscreen mode content covers the whole page over a modal layer.',
+            children: [
+                {
+                    id: 'fullscreenwiththumbnail',
+                    label: 'With Thumbnails',
+                    component: WithThumbnailsDoc
+                },
+                {
+                    id: 'fullscreenwithoutthumnails',
+                    label: 'Without Thumbnails',
+                    component: WithoutThumbnailsDoc
+                },
+                {
+                    id: 'fullscreencustom',
+                    label: 'Custom Content',
+                    component: CustomContentDoc
+                }
+            ]
+        },
+        {
+            id: 'navigator',
+            label: 'Navigator',
+            description: 'Navigators are used to move back and forth between the images.',
+            children: [
+                {
+                    id: 'itemthumbnails',
+                    label: 'With Thumbnails',
+                    component: ItemThumbnailsDoc
+                },
+                {
+                    id: 'itemwithouthumbnails',
+                    label: 'Without Thumbnails',
+                    component: ItemWithoutThumbnailsDoc
+                },
+                {
+                    id: 'itemhover',
+                    label: 'Display on Hover',
+                    component: HoverDoc
+                },
+                {
+                    id: 'indicators',
+                    label: 'With Indicators',
+                    component: IndicatorsDoc
+                }
+            ]
+        },
+        {
+            id: 'autoplay',
+            label: 'AutoPlay',
+            component: AutoPlayDoc
+        },
+        {
+            id: 'caption',
+            label: 'Caption',
+            component: CaptionDoc
+        },
+        {
+            id: 'advanced',
+            label: 'Advanced',
+            component: AdvancedDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.galleria.options',
+            label: 'Galleria PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Gallery Component" header="Galleria" description="Galleria is a content gallery component." componentDocs={docs} apiDocs={['Galleria']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default GalleriaDemo;
diff --git a/pages/guides/accessibility/index.js b/pages/guides/accessibility/index.js
new file mode 100644
index 0000000000..187b04c1a5
--- /dev/null
+++ b/pages/guides/accessibility/index.js
@@ -0,0 +1,65 @@
+import { ColorsDoc } from '@/components/doc/accessibility/colorsdoc';
+import { FormControlsDoc } from '@/components/doc/accessibility/formcontrolsdoc';
+import { IntroductionDoc } from '@/components/doc/accessibility/introductiondoc';
+import { SemanticHTMLDoc } from '@/components/doc/accessibility/semantichtmldoc';
+import { WAIAriaDoc } from '@/components/doc/accessibility/waiariadoc';
+import { WCAGDoc } from '@/components/doc/accessibility/wcagdoc';
+import { DocSectionNav } from '@/components/doc/common/docsectionnav';
+import { DocSections } from '@/components/doc/common/docsections';
+import Head from 'next/head';
+
+const AccessibilityDoc = () => {
+    const docs = [
+        {
+            id: 'introduction',
+            label: 'Introduction',
+            component: IntroductionDoc
+        },
+        {
+            id: 'wcag',
+            label: 'WCAG',
+            component: WCAGDoc
+        },
+        {
+            id: 'formcontrols',
+            label: 'Form Controls',
+            component: FormControlsDoc
+        },
+        {
+            id: 'semantichtml',
+            label: 'Semantic HTML',
+            component: SemanticHTMLDoc
+        },
+        {
+            id: 'waiaria',
+            label: 'WAI ARIA',
+            component: WAIAriaDoc
+        },
+        {
+            id: 'colors',
+            label: 'Colors',
+            component: ColorsDoc
+        }
+    ];
+
+    return (
+        <div>
+            <Head>
+                <title>Accessibility - PrimeReact</title>
+                <meta name="description" content="Accessible React UI Components." />
+            </Head>
+            <div className="doc">
+                <div className="doc-main">
+                    <div className="doc-intro">
+                        <h1>Accessibility</h1>
+                        <p>An introduction to accessibility and how it translates to React UI Components.</p>
+                    </div>
+                    <DocSections docs={docs} />
+                </div>
+                <DocSectionNav docs={docs} />
+            </div>
+        </div>
+    );
+};
+
+export default AccessibilityDoc;
diff --git a/pages/guides/csslayer/index.js b/pages/guides/csslayer/index.js
new file mode 100644
index 0000000000..404b53e0f2
--- /dev/null
+++ b/pages/guides/csslayer/index.js
@@ -0,0 +1,66 @@
+import Head from 'next/head';
+import { DocSectionNav } from '@/components/doc/common/docsectionnav';
+import { DocSections } from '@/components/doc/common/docsections';
+import { SpecificityDoc } from '@/components/doc/csslayer/specificitydoc';
+import { ResetDoc } from '@/components/doc/csslayer/resetdoc';
+import { TailwindDoc } from '@/components/doc/csslayer/tailwinddoc';
+import { BootstrapDoc } from '@/components/doc/csslayer/bootstrapdoc';
+import { NormalizeDoc } from '@/components/doc/csslayer/normalizedoc';
+
+const AccessibilityDoc = () => {
+    const docs = [
+        {
+            id: 'specificity',
+            label: 'Specificity',
+            component: SpecificityDoc
+        },
+        {
+            id: 'reset',
+            label: 'Reset',
+            component: ResetDoc
+        },
+        {
+            id: 'libraries',
+            label: 'Libraries',
+            description: 'Compatibility between PrimeReact and CSS libraries.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind CSS',
+                    component: TailwindDoc
+                },
+                {
+                    id: 'bootstrap',
+                    label: 'Bootstrap',
+                    component: BootstrapDoc
+                },
+                {
+                    id: 'normalize',
+                    label: 'Normalize',
+                    component: NormalizeDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div>
+            <Head>
+                <title>CSS Layer - PrimeReact</title>
+                <meta name="description" content="Best practices for the PrimeReact cascade layer in styled mode." />
+            </Head>
+            <div className="doc">
+                <div className="doc-main">
+                    <div className="doc-intro">
+                        <h1>CSS Layer</h1>
+                        <p>Best practices for the PrimeReact cascade layer in styled mode.</p>
+                    </div>
+                    <DocSections docs={docs} />
+                </div>
+                <DocSectionNav docs={docs} />
+            </div>
+        </div>
+    );
+};
+
+export default AccessibilityDoc;
diff --git a/pages/hooks/useclickoutside/index.js b/pages/hooks/useclickoutside/index.js
new file mode 100644
index 0000000000..a9bec798c2
--- /dev/null
+++ b/pages/hooks/useclickoutside/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useclickoutside/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useclickoutside/importdoc';
+
+const ClickOutsideDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useClickOutside Hook" header="useClickOutside" description="Detects outside clicks of a specific element." componentDocs={docs} apiDocs={['hooks.functions.useClickOutside']} />;
+};
+
+export default ClickOutsideDemo;
diff --git a/pages/hooks/usecounter/index.js b/pages/hooks/usecounter/index.js
new file mode 100644
index 0000000000..3794e22bb1
--- /dev/null
+++ b/pages/hooks/usecounter/index.js
@@ -0,0 +1,28 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/usecounter/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/usecounter/importdoc';
+import { OptionsDoc } from '@/components/doc/hooks/usecounter/optionsdoc';
+
+const CounterDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'options',
+            label: 'Options',
+            component: OptionsDoc
+        }
+    ];
+
+    return <DocComponent title="React useCounter Hook" header="useCounter" description="Manages a counter state." componentDocs={docs} apiDocs={['hooks.functions.useCounter']} />;
+};
+
+export default CounterDemo;
diff --git a/pages/hooks/usedebounce/index.js b/pages/hooks/usedebounce/index.js
new file mode 100644
index 0000000000..bd67315e07
--- /dev/null
+++ b/pages/hooks/usedebounce/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/usedebounce/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/usedebounce/importdoc';
+
+const DebounceDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useDebounce Hook" header="useDebounce" description="Delays rapidly changing values to optimize performance." componentDocs={docs} apiDocs={['hooks.functions.useDebounce']} />;
+};
+
+export default DebounceDemo;
diff --git a/pages/hooks/useeventlistener/index.js b/pages/hooks/useeventlistener/index.js
new file mode 100644
index 0000000000..76addaf8d2
--- /dev/null
+++ b/pages/hooks/useeventlistener/index.js
@@ -0,0 +1,28 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { DocumentDoc } from '@/components/doc/hooks/useeventlistener/documentdoc';
+import { ElementDoc } from '@/components/doc/hooks/useeventlistener/elementdoc';
+import { ImportDoc } from '@/components/doc/hooks/useeventlistener/importdoc';
+
+const EventListenerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'document',
+            label: 'Document',
+            component: DocumentDoc
+        },
+        {
+            id: 'element',
+            label: 'Element',
+            component: ElementDoc
+        }
+    ];
+
+    return <DocComponent title="React useEventListener Hook" header="useEventListener" description="Manages event bindings of an element programmatically." componentDocs={docs} apiDocs={['hooks.functions.useEventListener']} />;
+};
+
+export default EventListenerDemo;
diff --git a/pages/hooks/usefavicon/index.js b/pages/hooks/usefavicon/index.js
new file mode 100644
index 0000000000..80ad42204c
--- /dev/null
+++ b/pages/hooks/usefavicon/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/usefavicon/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/usefavicon/importdoc';
+
+const FaviconDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useFavicon Hook" header="useFavicon" description="Controls the favicon of the page dynamically." componentDocs={docs} apiDocs={['hooks.functions.useFavicon']} />;
+};
+
+export default FaviconDemo;
diff --git a/pages/hooks/useintersectionobserver/index.js b/pages/hooks/useintersectionobserver/index.js
new file mode 100644
index 0000000000..feb020a262
--- /dev/null
+++ b/pages/hooks/useintersectionobserver/index.js
@@ -0,0 +1,36 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useintersectionobserver/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useintersectionobserver/importdoc';
+import { ThresholdDoc } from '@/components/doc/hooks/useintersectionobserver/thresholddoc';
+
+const IntersectionObserverDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'threshold',
+            label: 'Threshold',
+            component: ThresholdDoc
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React useIntersectionObserver Hook"
+            header="useIntersectionObserver"
+            description="Executes a callback when an element gets into the viewport of its parent."
+            componentDocs={docs}
+            apiDocs={['hooks.functions.useIntersectionObserver']}
+        />
+    );
+};
+
+export default IntersectionObserverDemo;
diff --git a/pages/hooks/useinterval/index.js b/pages/hooks/useinterval/index.js
new file mode 100644
index 0000000000..fe6650383e
--- /dev/null
+++ b/pages/hooks/useinterval/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useinterval/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useinterval/importdoc';
+
+const IntervalDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useInterval Hook" header="useInterval" description="Executes a given callback at specified intervals." componentDocs={docs} apiDocs={['hooks.functions.useInterval']} />;
+};
+
+export default IntervalDemo;
diff --git a/pages/hooks/usemounteffect/index.js b/pages/hooks/usemounteffect/index.js
new file mode 100644
index 0000000000..e4dff28d88
--- /dev/null
+++ b/pages/hooks/usemounteffect/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/usemounteffect/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/usemounteffect/importdoc';
+
+const MountEffectDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useMountEffect Hook" header="useMountEffect" description="Executes a given callback when component is mounted." componentDocs={docs} apiDocs={['hooks.functions.useMountEffect']} />;
+};
+
+export default MountEffectDemo;
diff --git a/pages/hooks/usemouse/index.js b/pages/hooks/usemouse/index.js
new file mode 100644
index 0000000000..e1b0e73bd0
--- /dev/null
+++ b/pages/hooks/usemouse/index.js
@@ -0,0 +1,34 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { DocumentDoc } from '@/components/doc/hooks/usemouse/documentdoc';
+import { ElementDoc } from '@/components/doc/hooks/usemouse/elementdoc';
+import { ImportDoc } from '@/components/doc/hooks/usemouse/importdoc';
+import { ResetDoc } from '@/components/doc/hooks/usemouse/resetdoc';
+
+const MouseDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'element',
+            label: 'Element',
+            component: ElementDoc
+        },
+        {
+            id: 'reset',
+            label: 'Reset',
+            component: ResetDoc
+        },
+        {
+            id: 'document',
+            label: 'Document',
+            component: DocumentDoc
+        }
+    ];
+
+    return <DocComponent title="React useMouse Hook" header="useMouse" description="Tracks mouse position on an element or document body." componentDocs={docs} apiDocs={['hooks.functions.useMouse']} />;
+};
+
+export default MouseDemo;
diff --git a/pages/hooks/usemove/index.js b/pages/hooks/usemove/index.js
new file mode 100644
index 0000000000..12d7c7d94b
--- /dev/null
+++ b/pages/hooks/usemove/index.js
@@ -0,0 +1,34 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/usemove/basicdoc';
+import { HorizontalDoc } from '@/components/doc/hooks/usemove/horizontaldoc';
+import { ImportDoc } from '@/components/doc/hooks/usemove/importdoc';
+import { VerticalDoc } from '@/components/doc/hooks/usemove/verticaldoc';
+
+const MoveDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'horizontal',
+            label: 'Horizontal',
+            component: HorizontalDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        }
+    ];
+
+    return <DocComponent title="React useMove Hook" header="useMove" description="Handles move interactions via touch and mouse events." componentDocs={docs} apiDocs={['hooks.functions.useMove']} />;
+};
+
+export default MoveDemo;
diff --git a/pages/hooks/useoverlaylistener/index.js b/pages/hooks/useoverlaylistener/index.js
new file mode 100644
index 0000000000..5ea390f58f
--- /dev/null
+++ b/pages/hooks/useoverlaylistener/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useoverlaylistener/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useoverlaylistener/importdoc';
+
+const OverlayListenerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useOverlayListener Hook" header="useOverlayListener" description="Composition of commonly used overlay hooks." componentDocs={docs} apiDocs={['hooks.functions.useOverlayListener']} />;
+};
+
+export default OverlayListenerDemo;
diff --git a/pages/hooks/useoverlayscrolllistener/index.js b/pages/hooks/useoverlayscrolllistener/index.js
new file mode 100644
index 0000000000..540d989bf2
--- /dev/null
+++ b/pages/hooks/useoverlayscrolllistener/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useoverlayscrolllistener/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useoverlayscrolllistener/importdoc';
+
+const OverlayScrollListenerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useOverlayScrollListener Hook" header="useOverlayScrollListener" description="Monitors scroll event of a parent element." componentDocs={docs} apiDocs={['hooks.functions.useOverlayScrollListener']} />;
+};
+
+export default OverlayScrollListenerDemo;
diff --git a/pages/hooks/useprevious/index.js b/pages/hooks/useprevious/index.js
new file mode 100644
index 0000000000..86ddb3a935
--- /dev/null
+++ b/pages/hooks/useprevious/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useprevious/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useprevious/importdoc';
+
+const PreviousDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React usePrevious Hook" header="usePrevious" description="Allows access to the previous value in state." componentDocs={docs} apiDocs={['hooks.functions.usePrevious']} />;
+};
+
+export default PreviousDemo;
diff --git a/pages/hooks/useresizelistener/index.js b/pages/hooks/useresizelistener/index.js
new file mode 100644
index 0000000000..248f585fbb
--- /dev/null
+++ b/pages/hooks/useresizelistener/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useresizelistener/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useresizelistener/importdoc';
+
+const ResizeListenerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useResizeListener Hook" header="useResizeListener" description="Tracks window resize event." componentDocs={docs} apiDocs={['hooks.functions.useResizeListener']} />;
+};
+
+export default ResizeListenerDemo;
diff --git a/pages/hooks/usestorage/index.js b/pages/hooks/usestorage/index.js
new file mode 100644
index 0000000000..e3a557e5e6
--- /dev/null
+++ b/pages/hooks/usestorage/index.js
@@ -0,0 +1,28 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { ImportDoc } from '@/components/doc/hooks/usestorage/importdoc';
+import { LocalDoc } from '@/components/doc/hooks/usestorage/localdoc';
+import { SessionDoc } from '@/components/doc/hooks/usestorage/sessiondoc';
+
+const StorageDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'local',
+            label: 'Local',
+            component: LocalDoc
+        },
+        {
+            id: 'session',
+            label: 'Session',
+            component: SessionDoc
+        }
+    ];
+
+    return <DocComponent title="React useStorage Hook" header="useStorage" description="Syncs state to local or session storage." componentDocs={docs} apiDocs={['hooks.functions.useStorage']} />;
+};
+
+export default StorageDemo;
diff --git a/pages/hooks/usetimeout/index.js b/pages/hooks/usetimeout/index.js
new file mode 100644
index 0000000000..8c3ccf3555
--- /dev/null
+++ b/pages/hooks/usetimeout/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/usetimeout/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/usetimeout/importdoc';
+
+const TimeoutDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useTimeout Hook" header="useTimeout" description="Executed a given callback after a certain delay." componentDocs={docs} apiDocs={['hooks.functions.useTimeout']} />;
+};
+
+export default TimeoutDemo;
diff --git a/pages/hooks/useunmounteffect/index.js b/pages/hooks/useunmounteffect/index.js
new file mode 100644
index 0000000000..cd5aa2e52a
--- /dev/null
+++ b/pages/hooks/useunmounteffect/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useunmounteffect/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useunmounteffect/importdoc';
+
+const UnmountEffectDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useUnmountEffect Hook" header="useUnmountEffect" description="Executes a given callback when component is unmounted." componentDocs={docs} apiDocs={['hooks.functions.useUnmountEffect']} />;
+};
+
+export default UnmountEffectDemo;
diff --git a/pages/hooks/useupdateeffect/index.js b/pages/hooks/useupdateeffect/index.js
new file mode 100644
index 0000000000..f7c2d58204
--- /dev/null
+++ b/pages/hooks/useupdateeffect/index.js
@@ -0,0 +1,22 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/hooks/useupdateeffect/basicdoc';
+import { ImportDoc } from '@/components/doc/hooks/useupdateeffect/importdoc';
+
+const UpdateEffectDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        }
+    ];
+
+    return <DocComponent title="React useUpdateEffect Hook" header="useUpdateEffect" description="Executes a given callback when a stateful property is updated." componentDocs={docs} apiDocs={['hooks.functions.useUpdateEffect']} />;
+};
+
+export default UpdateEffectDemo;
diff --git a/pages/iconfield/index.js b/pages/iconfield/index.js
new file mode 100644
index 0000000000..8eec450745
--- /dev/null
+++ b/pages/iconfield/index.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { ImportDoc } from '@/components/doc/iconfield/importdoc';
+import { BasicDoc } from '@/components/doc/iconfield/basicdoc';
+import { TemplateDoc } from '@/components/doc/iconfield/templatedoc';
+import { AccessibilityDoc } from '@/components/doc/iconfield/accessibilitydoc';
+import { Wireframe } from '@/components/doc/iconfield/pt/wireframe';
+import { StyledDoc } from '@/components/doc/iconfield/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/iconfield/theming/tailwinddoc';
+
+const IconFieldDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.iconfield.options',
+            label: 'IconField PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Input Component"
+            header="IconField"
+            description="IconField is an extension to standard input element with theming and keyfiltering."
+            componentDocs={docs}
+            apiDocs={['IconField']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default IconFieldDemo;
diff --git a/pages/icons/index.js b/pages/icons/index.js
new file mode 100644
index 0000000000..9edaf2f728
--- /dev/null
+++ b/pages/icons/index.js
@@ -0,0 +1,64 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/icons/basicdoc';
+import { ColorDoc } from '@/components/doc/icons/colordoc';
+import { ConstantsDoc } from '@/components/doc/icons/constantsdoc';
+import { DownloadDoc } from '@/components/doc/icons/downloaddoc';
+import { ImportDoc } from '@/components/doc/icons/importdoc';
+import { ListDoc } from '@/components/doc/icons/listdoc';
+import { SizeDoc } from '@/components/doc/icons/sizedoc';
+import { SpinDoc } from '@/components/doc/icons/spindoc';
+import { FigmaDoc } from '@/components/doc/icons/figmadoc';
+
+const IconsDoc = () => {
+    const docs = [
+        {
+            id: 'download',
+            label: 'Download',
+            component: DownloadDoc
+        },
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'figma',
+            label: 'Figma',
+            component: FigmaDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'size',
+            label: 'Size',
+            component: SizeDoc
+        },
+        {
+            id: 'color',
+            label: 'Color',
+            component: ColorDoc
+        },
+        {
+            id: 'spin',
+            label: 'Spin',
+            component: SpinDoc
+        },
+        {
+            id: 'constants',
+            label: 'Constants',
+            component: ConstantsDoc
+        },
+        {
+            id: 'list',
+            label: 'List',
+            component: ListDoc
+        }
+    ];
+
+    return <DocComponent title="React Icon Library - PrimeReact" header="Icons" description="PrimeIcons is the default icon library of PrimeReact." componentDocs={docs} hideTabMenu />;
+};
+
+export default IconsDoc;
diff --git a/pages/image/index.js b/pages/image/index.js
new file mode 100644
index 0000000000..3d2e6ecbb4
--- /dev/null
+++ b/pages/image/index.js
@@ -0,0 +1,83 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/image/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/image/basicdoc';
+import { ImportDoc } from '@/components/doc/image/importdoc';
+import { PreviewDoc } from '@/components/doc/image/previewdoc';
+import { Wireframe } from '@/components/doc/image/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/image/templatedoc';
+import { StyledDoc } from '@/components/doc/image/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/image/theming/tailwinddoc';
+import { ThumbnailDoc } from '@/components/doc/image/thumbnaildoc';
+
+const ImageDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'preview',
+            label: 'Preview',
+            component: PreviewDoc
+        },
+        {
+            id: 'thumbnail',
+            label: 'Thumbnail',
+            component: ThumbnailDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.image.options',
+            label: 'Image PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Image Component" header="Image" description="Displays a single image with preview and tranformation options." componentDocs={docs} apiDocs={['Image']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ImageDemo;
diff --git a/pages/index.js b/pages/index.js
new file mode 100644
index 0000000000..e6a98627ee
--- /dev/null
+++ b/pages/index.js
@@ -0,0 +1,64 @@
+import BlockSection from '@/components/landing/blocksection';
+import FeaturesSection from '@/components/landing/featuressection';
+import FooterSection from '@/components/landing/footersection';
+import HeroSection from '@/components/landing/herosection';
+import TemplateSection from '@/components/landing/templatesection';
+import ThemeSection from '@/components/landing/themesection';
+import UsersSection from '@/components/landing/userssection';
+import AppContentContext from '@/components/layout/appcontentcontext';
+import Topbar from '@/components/layout/topbar';
+import { useMountEffect } from '@/components/lib/primereact.all';
+import { classNames } from '@/components/lib/utils/Utils';
+import NewsSection from '@/components/news/newssection';
+import Head from 'next/head';
+import { useContext } from 'react';
+
+export default function Home() {
+    const { newsActive, darkMode, changeTheme } = useContext(AppContentContext);
+    const landingClass = classNames('landing', { 'layout-light': !darkMode, 'layout-dark': darkMode, 'layout-news-active': newsActive });
+
+    const toggleDarkMode = () => {
+        const newTheme = darkMode ? 'lara-light-cyan' : 'lara-dark-cyan';
+
+        changeTheme(newTheme, !darkMode);
+    };
+
+    useMountEffect(() => {
+        changeTheme(darkMode ? 'lara-dark-cyan' : 'lara-light-cyan', darkMode);
+    });
+
+    return (
+        <div className={landingClass}>
+            <Head>
+                <title>PrimeReact - React UI Component Library</title>
+                <meta charSet="UTF-8" />
+                <meta name="description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
+                <meta name="robots" content="index, follow" />
+                <meta name="viewport" content="initial-scale=1, width=device-width" />
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:site" content="@primereact" />
+                <meta name="twitter:title" content="PrimeReact | React UI Component Library" />
+                <meta name="twitter:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
+                <meta property="og:type" content="website" />
+                <meta property="og:title" content="PrimeReact | React UI Component Library" />
+                <meta property="og:url" content="https://primereact.org/" />
+                <meta property="og:description" content="The ultimate collection of design-agnostic, flexible and accessible React UI Components." />
+                <meta property="og:image" content="https://primefaces.org/static/social/primereact-preview.jpg" />
+                <meta property="og:ttl" content="604800" />
+            </Head>
+            <NewsSection />
+            <Topbar onDarkSwitchClick={toggleDarkMode} />
+            <HeroSection />
+            <FeaturesSection />
+            <UsersSection />
+            <ThemeSection />
+            <BlockSection />
+            <TemplateSection />
+            <FooterSection />
+        </div>
+    );
+}
+
+Home.getLayout = function getLayout(page) {
+    return page;
+};
diff --git a/pages/inplace/index.js b/pages/inplace/index.js
new file mode 100644
index 0000000000..0ab9901d95
--- /dev/null
+++ b/pages/inplace/index.js
@@ -0,0 +1,94 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inplace/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/inplace/basicdoc';
+import { ImageDoc } from '@/components/doc/inplace/imagedoc';
+import { ImportDoc } from '@/components/doc/inplace/importdoc';
+import { InputDoc } from '@/components/doc/inplace/inputdoc';
+import { LazyDoc } from '@/components/doc/inplace/lazydoc';
+import { Wireframe } from '@/components/doc/inplace/pt/wireframe';
+import { StyledDoc } from '@/components/doc/inplace/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/inplace/theming/tailwinddoc';
+
+const ChipDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'input',
+            label: 'Input',
+            component: InputDoc
+        },
+        {
+            id: 'image',
+            label: 'Image',
+            component: ImageDoc
+        },
+        {
+            id: 'lazy',
+            label: 'Lazy',
+            component: LazyDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.Inplace.options',
+            label: 'Inplace PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Inplace Component"
+            header="Inplace"
+            description="Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content."
+            componentDocs={docs}
+            apiDocs={['Inplace', 'InplaceDisplay', 'InplaceContent']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default ChipDemo;
diff --git a/pages/inputgroup/index.js b/pages/inputgroup/index.js
new file mode 100644
index 0000000000..fa9f10c7d6
--- /dev/null
+++ b/pages/inputgroup/index.js
@@ -0,0 +1,34 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/inputgroup/basicdoc';
+import { ButtonDoc } from '@/components/doc/inputgroup/buttondoc';
+import { CheckboxDoc } from '@/components/doc/inputgroup/checkboxdoc';
+import { MultipleDoc } from '@/components/doc/inputgroup/multipledoc';
+
+const InputGroupDemo = () => {
+    const docs = [
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'button',
+            label: 'Button',
+            component: ButtonDoc
+        },
+        {
+            id: 'checkbox',
+            label: 'Checkbox & RadioButton',
+            component: CheckboxDoc
+        }
+    ];
+
+    return <DocComponent title="React InputGroup Component" header="InputGroup" description="Text, icon, buttons and other content can be grouped next to an input." componentDocs={docs} />;
+};
+
+export default InputGroupDemo;
diff --git a/pages/inputmask/index.js b/pages/inputmask/index.js
new file mode 100644
index 0000000000..3725e0c08e
--- /dev/null
+++ b/pages/inputmask/index.js
@@ -0,0 +1,127 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inputmask/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/inputmask/basicdoc';
+import { DisabledDoc } from '@/components/doc/inputmask/disableddoc';
+import { FilledDoc } from '@/components/doc/inputmask/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/inputmask/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/inputmask/importdoc';
+import { InvalidDoc } from '@/components/doc/inputmask/invaliddoc';
+import { MaskDoc } from '@/components/doc/inputmask/maskdoc';
+import { OptionalDoc } from '@/components/doc/inputmask/optionaldoc';
+import { Wireframe } from '@/components/doc/inputmask/pt/wireframe';
+import { SlotCharDoc } from '@/components/doc/inputmask/slotchardoc';
+import { StyledDoc } from '@/components/doc/inputmask/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/inputmask/theming/tailwinddoc';
+import Link from 'next/link';
+
+const InputMaskDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'mask',
+            label: 'Mask',
+            component: MaskDoc
+        },
+        {
+            id: 'optional',
+            label: 'Optional',
+            component: OptionalDoc
+        },
+        {
+            id: 'slotchar',
+            label: 'Slot Char',
+            component: SlotCharDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputmask.options',
+            label: 'InputMask PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    const ptDescription = (
+        <span>
+            InputMask does not have a specific API for PassThrough options, but it does support all the pass through options of{' '}
+            <Link href="http://github.com/inputtext/#pt.inputtext.options" target="_blank">
+                InputText
+            </Link>
+        </span>
+    );
+
+    return (
+        <DocComponent
+            title="React Mask Component"
+            header="InputMask"
+            description="InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone."
+            componentDocs={docs}
+            apiDocs={['InputMask']}
+            ptDocs={ptDocs}
+            ptDescription={ptDescription}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default InputMaskDemo;
diff --git a/pages/inputnumber/index.js b/pages/inputnumber/index.js
new file mode 100644
index 0000000000..1a65566b03
--- /dev/null
+++ b/pages/inputnumber/index.js
@@ -0,0 +1,118 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inputnumber/accessibilitydoc';
+import { ButtonsDoc } from '@/components/doc/inputnumber/buttonsdoc';
+import { CurrencyDoc } from '@/components/doc/inputnumber/currencydoc';
+import { DisabledDoc } from '@/components/doc/inputnumber/disableddoc';
+import { FilledDoc } from '@/components/doc/inputnumber/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/inputnumber/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/inputnumber/importdoc';
+import { InvalidDoc } from '@/components/doc/inputnumber/invaliddoc';
+import { LocaleDoc } from '@/components/doc/inputnumber/localedoc';
+import { NumeralsDoc } from '@/components/doc/inputnumber/numberalsdoc';
+import { PrefixSuffixDoc } from '@/components/doc/inputnumber/prefixsuffixdoc';
+import { Wireframe } from '@/components/doc/inputnumber/pt/wireframe';
+import { StyledDoc } from '@/components/doc/inputnumber/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/inputnumber/theming/tailwinddoc';
+import { VerticalDoc } from '@/components/doc/inputnumber/verticaldoc';
+
+const InputNumberDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'numerals',
+            label: 'Numerals',
+            component: NumeralsDoc
+        },
+        {
+            id: 'locale',
+            label: 'Locale',
+            component: LocaleDoc
+        },
+        {
+            id: 'currency',
+            label: 'Currency',
+            component: CurrencyDoc
+        },
+        {
+            id: 'prefixsuffix',
+            label: 'Prefix & Suffix',
+            component: PrefixSuffixDoc
+        },
+        {
+            id: 'buttons',
+            label: 'Buttons',
+            component: ButtonsDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputnumber.options',
+            label: 'InputNumber PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." componentDocs={docs} apiDocs={['InputNumber']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default InputNumberDemo;
diff --git a/pages/inputotp/index.js b/pages/inputotp/index.js
new file mode 100644
index 0000000000..95c5c2ff85
--- /dev/null
+++ b/pages/inputotp/index.js
@@ -0,0 +1,105 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inputotp/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/inputotp/basicdoc';
+import { ImportDoc } from '@/components/doc/inputotp/importdoc';
+import { IntegerOnlyDoc } from '@/components/doc/inputotp/integeronlydoc';
+import { MaskDoc } from '@/components/doc/inputotp/maskdoc';
+import { Wireframe } from '@/components/doc/inputotp/pt/wireframe';
+import { SampleDoc } from '@/components/doc/inputotp/sampledoc';
+import { TemplateDoc } from '@/components/doc/inputotp/templatedoc';
+import { StyledDoc } from '@/components/doc/inputotp/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/inputotp/theming/tailwinddoc';
+
+const InputOtpDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'mask',
+            label: 'Mask',
+            component: MaskDoc
+        },
+        {
+            id: 'integeronly',
+            label: 'Integer Only',
+            component: IntegerOnlyDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'sample',
+            label: 'Sample',
+            component: SampleDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputotp.options',
+            label: 'InputOtp PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.inputotptab.options',
+            label: 'InputOtpTab PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React InputOtp Component"
+            header="InputOtp"
+            description="InputOtp groups a collection of contents in tabs."
+            componentDocs={docs}
+            apiDocs={['InputOtp', 'InputOtpTab']}
+            ptDocs={ptDocs}
+            ptDescription=""
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default InputOtpDemo;
diff --git a/pages/inputswitch/index.js b/pages/inputswitch/index.js
new file mode 100644
index 0000000000..30704ec00f
--- /dev/null
+++ b/pages/inputswitch/index.js
@@ -0,0 +1,82 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inputswitch/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/inputswitch/basicdoc';
+import { DisabledDoc } from '@/components/doc/inputswitch/disableddoc';
+import { ImportDoc } from '@/components/doc/inputswitch/importdoc';
+import { InvalidDoc } from '@/components/doc/inputswitch/invaliddoc';
+import { PreselectionDoc } from '@/components/doc/inputswitch/preselectiondoc';
+import { Wireframe } from '@/components/doc/inputswitch/pt/wireframe';
+import { StyledDoc } from '@/components/doc/inputswitch/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/inputswitch/theming/tailwinddoc';
+
+const InputSwitchDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'preselection',
+            label: 'Preselection',
+            component: PreselectionDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputswitch.options',
+            label: 'InputSwitch PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React InputSwitch Component" header="InputSwitch" description="InputSwitch is used to select a boolean value." componentDocs={docs} apiDocs={['InputSwitch']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default InputSwitchDemo;
diff --git a/pages/inputtext/index.js b/pages/inputtext/index.js
new file mode 100644
index 0000000000..1f2aa9e58e
--- /dev/null
+++ b/pages/inputtext/index.js
@@ -0,0 +1,116 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inputtext/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/inputtext/basicdoc';
+import { DisabledDoc } from '@/components/doc/inputtext/disableddoc';
+import { FilledDoc } from '@/components/doc/inputtext/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/inputtext/floatlabeldoc';
+import { HelpTextDoc } from '@/components/doc/inputtext/helptextdoc';
+import { ImportDoc } from '@/components/doc/inputtext/importdoc';
+import { InvalidDoc } from '@/components/doc/inputtext/invaliddoc';
+import { KeyFilterDoc } from '@/components/doc/inputtext/keyfilterdoc';
+import { Wireframe } from '@/components/doc/inputtext/pt/wireframe';
+import { SizesDoc } from '@/components/doc/inputtext/sizesdoc';
+import { StyledDoc } from '@/components/doc/inputtext/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/inputtext/theming/tailwinddoc';
+
+const InputTextDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'keyfilter',
+            label: 'Key Filter',
+            component: KeyFilterDoc
+        },
+        {
+            id: 'sizes',
+            label: 'Sizes',
+            component: SizesDoc
+        },
+        {
+            id: 'helptext',
+            label: 'Help Text',
+            component: HelpTextDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputtext.options',
+            label: 'InputText PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Input Component"
+            header="InputText"
+            description="InputText is an extension to standard input element with theming and keyfiltering."
+            componentDocs={docs}
+            apiDocs={['InputText']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default InputTextDemo;
diff --git a/pages/inputtextarea/index.js b/pages/inputtextarea/index.js
new file mode 100644
index 0000000000..cbeaa4b085
--- /dev/null
+++ b/pages/inputtextarea/index.js
@@ -0,0 +1,110 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/inputtextarea/accessibilitydoc';
+import { AutoResizeDoc } from '@/components/doc/inputtextarea/autoresizedoc';
+import { BasicDoc } from '@/components/doc/inputtextarea/basicdoc';
+import { DisabledDoc } from '@/components/doc/inputtextarea/disableddoc';
+import { FilledDoc } from '@/components/doc/inputtextarea/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/inputtextarea/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/inputtextarea/importdoc';
+import { InvalidDoc } from '@/components/doc/inputtextarea/invaliddoc';
+import { KeyFilterDoc } from '@/components/doc/inputtextarea/keyfilterdoc';
+import { Wireframe } from '@/components/doc/inputtextarea/pt/wireframe';
+import { StyledDoc } from '@/components/doc/inputtextarea/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/inputtextarea/theming/tailwinddoc';
+
+const InputTextareaDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'autoresize',
+            label: 'Auto Resize',
+            component: AutoResizeDoc
+        },
+        {
+            id: 'keyfilter',
+            label: 'Key Filter',
+            component: KeyFilterDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.inputtextarea.options',
+            label: 'InputTextarea PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Textarea Component"
+            header="InputTextarea"
+            description="InputTextarea adds styling and autoResize functionality to standard textarea element."
+            componentDocs={docs}
+            apiDocs={['InputTextarea']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default InputTextareaDemo;
diff --git a/pages/installation/index.js b/pages/installation/index.js
new file mode 100644
index 0000000000..2eda4897f7
--- /dev/null
+++ b/pages/installation/index.js
@@ -0,0 +1,85 @@
+import { DocSectionNav } from '@/components/doc/common/docsectionnav';
+import { DocSections } from '@/components/doc/common/docsections';
+import { ContextDoc } from '@/components/doc/installation/context';
+import { DownloadDoc } from '@/components/doc/installation/downloaddoc';
+import { ExamplesDoc } from '@/components/doc/installation/examplesdoc';
+import { StyledModeDoc } from '@/components/doc/installation/styleddoc';
+import { UnstyledModeDoc } from '@/components/doc/installation/unstyledmodedoc';
+import { UsageDoc } from '@/components/doc/installation/usagedoc';
+import { NextJSDoc } from '@/components/doc/installation/videos/nextjsdoc';
+import Head from 'next/head';
+
+const InstallationPage = () => {
+    const docs = [
+        {
+            id: 'download',
+            label: 'Download',
+            component: DownloadDoc
+        },
+        {
+            id: 'context',
+            label: 'Context',
+            component: ContextDoc
+        },
+        {
+            id: 'usage',
+            label: 'Usage',
+            component: UsageDoc
+        },
+        {
+            id: 'theming',
+            label: 'Theming',
+            description: 'PrimeReact has two theming modes; styled or unstyled.',
+            children: [
+                {
+                    id: 'styled',
+                    label: 'Styled Mode',
+                    component: StyledModeDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled Mode',
+                    component: UnstyledModeDoc
+                }
+            ]
+        },
+        {
+            id: 'examples',
+            label: 'Examples',
+            component: ExamplesDoc
+        },
+        {
+            id: 'videos',
+            label: 'Videos',
+            description: 'Video tutorials to take you through step-by-step.',
+            children: [
+                {
+                    id: 'nextjs',
+                    label: 'Next.js',
+                    component: NextJSDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div>
+            <Head>
+                <title>Getting Started - PrimeReact</title>
+                <meta name="description" content="PrimeReact is a rich set of open source components for React." />
+            </Head>
+            <div className="doc">
+                <div className="doc-main">
+                    <div className="doc-intro">
+                        <h1>Installation</h1>
+                        <p>PrimeReact is a rich set of open source UI components for React.</p>
+                    </div>
+                    <DocSections docs={docs} />
+                </div>
+                <DocSectionNav docs={docs} />
+            </div>
+        </div>
+    );
+};
+
+export default InstallationPage;
diff --git a/pages/keyfilter/index.js b/pages/keyfilter/index.js
new file mode 100644
index 0000000000..ad148a778d
--- /dev/null
+++ b/pages/keyfilter/index.js
@@ -0,0 +1,40 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/keyfilter/accessibilitydoc';
+import { ImportDoc } from '@/components/doc/keyfilter/importdoc';
+import { PresetsDoc } from '@/components/doc/keyfilter/presetsdoc';
+import { RegexDoc } from '@/components/doc/keyfilter/regexdoc';
+import { RegexWordDoc } from '@/components/doc/keyfilter/regexworddoc';
+
+const KeyFilterDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'presets',
+            label: 'Presets',
+            component: PresetsDoc
+        },
+        {
+            id: 'regex',
+            label: 'Regex (Single Keypress)',
+            component: RegexDoc
+        },
+        {
+            id: 'regexword',
+            label: 'Regex (Whole Word)',
+            component: RegexWordDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    return <DocComponent title="React KeyFilter" header="KeyFilter" description="KeyFilter is a built-in feature of InputText to restrict user input based on a regular expression." componentDocs={docs} apiDocs={['KeyFilter']} />;
+};
+
+export default KeyFilterDemo;
diff --git a/pages/knob/index.js b/pages/knob/index.js
new file mode 100644
index 0000000000..75fd4f3a08
--- /dev/null
+++ b/pages/knob/index.js
@@ -0,0 +1,118 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/knob/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/knob/basicdoc';
+import { ColorDoc } from '@/components/doc/knob/colordoc';
+import { DisabledDoc } from '@/components/doc/knob/disableddoc';
+import { ImportDoc } from '@/components/doc/knob/importdoc';
+import { MinMaxDoc } from '@/components/doc/knob/minmaxdoc';
+import { Wireframe } from '@/components/doc/knob/pt/wireframe';
+import { ReactiveDoc } from '@/components/doc/knob/reactivedoc';
+import { ReadOnlyDoc } from '@/components/doc/knob/readonlydoc';
+import { SizeDoc } from '@/components/doc/knob/sizedoc';
+import { StepDoc } from '@/components/doc/knob/stepdoc';
+import { StrokeDoc } from '@/components/doc/knob/strokedoc';
+import { TemplateDoc } from '@/components/doc/knob/templatedoc';
+import { StyledDoc } from '@/components/doc/knob/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/knob/theming/tailwinddoc';
+
+const KnobDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'minmax',
+            label: 'Min/Max',
+            component: MinMaxDoc
+        },
+        {
+            id: 'step',
+            label: 'Step',
+            component: StepDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'stroke',
+            label: 'Stroke',
+            component: StrokeDoc
+        },
+        {
+            id: 'size',
+            label: 'Size',
+            component: SizeDoc
+        },
+        {
+            id: 'color',
+            label: 'Color',
+            component: ColorDoc
+        },
+        {
+            id: 'reactivec',
+            label: 'Reactive',
+            component: ReactiveDoc
+        },
+        {
+            id: 'readonly',
+            label: 'ReadOnly',
+            component: ReadOnlyDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.knob.options',
+            label: 'Knob PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Knob Component" header="Knob" description="Knob is a form component to define number inputs with a dial." componentDocs={docs} apiDocs={['Knob']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default KnobDemo;
diff --git a/pages/listbox/index.js b/pages/listbox/index.js
new file mode 100644
index 0000000000..041bc60fb4
--- /dev/null
+++ b/pages/listbox/index.js
@@ -0,0 +1,106 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/listbox/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/listbox/basicdoc';
+import { DisabledDoc } from '@/components/doc/listbox/disableddoc';
+import { FilterDoc } from '@/components/doc/listbox/filterdoc';
+import { GroupDoc } from '@/components/doc/listbox/groupdoc';
+import { ImportDoc } from '@/components/doc/listbox/importdoc';
+import { InvalidDoc } from '@/components/doc/listbox/invaliddoc';
+import { MultipleDoc } from '@/components/doc/listbox/multipledoc';
+import { Wireframe } from '@/components/doc/listbox/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/listbox/templatedoc';
+import { StyledDoc } from '@/components/doc/listbox/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/listbox/theming/tailwinddoc';
+import { VirtualScrollDoc } from '@/components/doc/listbox/virtualscrolldoc';
+
+const ListBoxDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'virtualscroll',
+            label: 'Virtual Scroll',
+            component: VirtualScrollDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.listbox.options',
+            label: 'Listbox PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React ListBox Component" header="ListBox" description="ListBox is used to select one or more values from a list of items." componentDocs={docs} apiDocs={['ListBox']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ListBoxDemo;
diff --git a/pages/locale/index.js b/pages/locale/index.js
new file mode 100644
index 0000000000..d09c10fdee
--- /dev/null
+++ b/pages/locale/index.js
@@ -0,0 +1,43 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AddLocaleDoc } from '@/components/doc/configuration/locale/addlocaledoc';
+import { ImportDoc } from '@/components/doc/configuration/locale/importdoc';
+import { RepositoryDoc } from '@/components/doc/configuration/locale/repositorydoc';
+import { SetLocaleDoc } from '@/components/doc/configuration/locale/setlocaledoc';
+
+const LocalePage = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'setlocale',
+            label: 'Set Locale',
+            component: SetLocaleDoc
+        },
+        {
+            id: 'addlocale',
+            label: 'Add Locale',
+            component: AddLocaleDoc
+        },
+        {
+            id: 'repositorydoc',
+            label: 'Repository',
+            component: RepositoryDoc
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="Locale - PrimeReact"
+            header="Internationalization and Localization"
+            description="The Locale API allows setting i18n and l7n options globally for the components."
+            componentDocs={docs}
+            apiDocs={['API']}
+            apiExclude={{ interfaces: ['PrimeIconsOptions', 'APIOptions', 'ContextAPIOptions', 'FilterMatchModeOptions', 'ZIndexOptions', 'PrimeReactPTOptions'], types: 'excludeAll' }}
+        />
+    );
+};
+
+export default LocalePage;
diff --git a/pages/megamenu/index.js b/pages/megamenu/index.js
new file mode 100644
index 0000000000..7e12fa3f04
--- /dev/null
+++ b/pages/megamenu/index.js
@@ -0,0 +1,98 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/megamenu/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/megamenu/basicdoc';
+import { CommandDoc } from '@/components/doc/megamenu/commanddoc';
+import { ImportDoc } from '@/components/doc/megamenu/importdoc';
+import { Wireframe } from '@/components/doc/megamenu/pt/wireframe';
+import { RouterDoc } from '@/components/doc/megamenu/routerdoc';
+import { TemplateDoc } from '@/components/doc/megamenu/templatedoc';
+import { StyledDoc } from '@/components/doc/megamenu/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/megamenu/theming/tailwinddoc';
+import { VerticalDoc } from '@/components/doc/megamenu/verticaldoc';
+
+const MegaMenuDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'Vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'command',
+            label: 'Command',
+            component: CommandDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.megamenu.options',
+            label: 'MegaMenu PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React MegaMenu Component"
+            header="MegaMenu"
+            description="MegaMenu is navigation component that displays submenus together."
+            componentDocs={docs}
+            apiDocs={['MegaMenu', 'MenuItem']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default MegaMenuDemo;
diff --git a/pages/mention/index.js b/pages/mention/index.js
new file mode 100644
index 0000000000..3a0b375b6c
--- /dev/null
+++ b/pages/mention/index.js
@@ -0,0 +1,94 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/mention/accessibilitydoc';
+import { AutoResizeDoc } from '@/components/doc/mention/autoresizedoc';
+import { BasicDoc } from '@/components/doc/mention/basicdoc';
+import { DisabledDoc } from '@/components/doc/mention/disableddoc';
+import { FloatLabelDoc } from '@/components/doc/mention/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/mention/importdoc';
+import { InvalidDoc } from '@/components/doc/mention/invaliddoc';
+import { Wireframe } from '@/components/doc/mention/pt/wireframe';
+import { StyledDoc } from '@/components/doc/mention/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/mention/theming/tailwinddoc';
+import { TriggersDoc } from '@/components/doc/mention/triggersdoc';
+
+const MentionDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'triggers',
+            label: 'Triggers',
+            component: TriggersDoc
+        },
+        {
+            id: 'autoresize',
+            label: 'Auto Resize',
+            component: AutoResizeDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.mention.options',
+            label: 'Mention PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Mention Component" header="Mention" description="Mention component is used to tag objects in a text." componentDocs={docs} apiDocs={['Mention']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default MentionDemo;
diff --git a/pages/menu/index.js b/pages/menu/index.js
new file mode 100644
index 0000000000..4ba7cafcbd
--- /dev/null
+++ b/pages/menu/index.js
@@ -0,0 +1,104 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/menu/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/menu/basicdoc';
+import { CommandDoc } from '@/components/doc/menu/commanddoc';
+import { GroupDoc } from '@/components/doc/menu/groupdoc';
+import { ImportDoc } from '@/components/doc/menu/importdoc';
+import { PopupDoc } from '@/components/doc/menu/popupdoc';
+import { Wireframe } from '@/components/doc/menu/pt/wireframe';
+import { RouterDoc } from '@/components/doc/menu/routerdoc';
+import { TemplateDoc } from '@/components/doc/menu/templatedoc';
+import { StyledDoc } from '@/components/doc/menu/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/menu/theming/tailwinddoc';
+
+const MenuDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'popup',
+            label: 'Popup',
+            component: PopupDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'command',
+            label: 'Command',
+            component: CommandDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.menu.options',
+            label: 'Menu PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Menu Component"
+            header="Menu"
+            description="Menu is a navigation/command component that supports dynamic and static positioning."
+            componentDocs={docs}
+            apiDocs={['Menu', 'MenuItem']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default MenuDemo;
diff --git a/pages/menubar/index.js b/pages/menubar/index.js
new file mode 100644
index 0000000000..50323997cd
--- /dev/null
+++ b/pages/menubar/index.js
@@ -0,0 +1,82 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/menubar/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/menubar/basicdoc';
+import { CommandDoc } from '@/components/doc/menubar/commanddoc';
+import { ImportDoc } from '@/components/doc/menubar/importdoc';
+import { Wireframe } from '@/components/doc/menubar/pt/wireframe';
+import { RouterDoc } from '@/components/doc/menubar/routerdoc';
+import { TemplateDoc } from '@/components/doc/menubar/templatedoc';
+import { StyledDoc } from '@/components/doc/menubar/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/menubar/theming/tailwinddoc';
+
+const MenubarDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'command',
+            label: 'Command',
+            component: CommandDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.menubar.options',
+            label: 'Menubar PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Navbar Component" header="Menubar" description="Menubar also known as Navbar, is a horizontal menu component" componentDocs={docs} apiDocs={['Menubar', 'MenuItem']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default MenubarDemo;
diff --git a/pages/message/index.js b/pages/message/index.js
new file mode 100644
index 0000000000..d69b034d92
--- /dev/null
+++ b/pages/message/index.js
@@ -0,0 +1,93 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/message/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/message/basicdoc';
+import { ImportDoc } from '@/components/doc/message/importdoc';
+import { Wireframe } from '@/components/doc/message/pt/wireframe';
+import { SeverityDoc } from '@/components/doc/message/severitydoc';
+import { TemplateDoc } from '@/components/doc/message/templatedoc';
+import { StyledDoc } from '@/components/doc/message/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/message/theming/tailwinddoc';
+import { ValidationDoc } from '@/components/doc/message/validationdoc';
+
+const MessageDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'form',
+            label: 'Form',
+            component: ValidationDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.message.options',
+            label: 'Message PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Message Component"
+            header="Message"
+            description="Message component displays information related to another element such as invalid input."
+            componentDocs={docs}
+            apiDocs={['Message']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default MessageDemo;
diff --git a/pages/messages/index.js b/pages/messages/index.js
new file mode 100644
index 0000000000..5c1f0df665
--- /dev/null
+++ b/pages/messages/index.js
@@ -0,0 +1,100 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/messages/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/messages/basicdoc';
+import { ClosableDoc } from '@/components/doc/messages/closeabledoc';
+import { CustomIcon } from '@/components/doc/messages/customicon';
+import { DynamicDoc } from '@/components/doc/messages/dynamicdoc';
+import { ImportDoc } from '@/components/doc/messages/importdoc';
+import { Wireframe } from '@/components/doc/messages/pt/wireframe';
+import { SeverityDoc } from '@/components/doc/messages/severitydoc';
+import { StickyDoc } from '@/components/doc/messages/stickydoc';
+import { TemplateDoc } from '@/components/doc/messages/templatedoc';
+import { StyledDoc } from '@/components/doc/messages/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/messages/theming/tailwinddoc';
+
+const MessagesDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'dynamic',
+            label: 'Dynamic',
+            component: DynamicDoc
+        },
+        {
+            id: 'closabledoc',
+            label: 'Closable',
+            component: ClosableDoc
+        },
+        {
+            id: 'stickydoc',
+            label: 'Sticky',
+            component: StickyDoc
+        },
+        {
+            id: 'customicon',
+            label: 'Custom Icon',
+            component: CustomIcon
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.messages.options',
+            label: 'Messages PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Messages Component" header="Messages" description="Messages component is used to display inline messages." componentDocs={docs} apiDocs={['Messages']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default MessagesDemo;
diff --git a/pages/metergroup/index.js b/pages/metergroup/index.js
new file mode 100644
index 0000000000..ca86dabad1
--- /dev/null
+++ b/pages/metergroup/index.js
@@ -0,0 +1,88 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/metergroup/basicdoc';
+import { IconDoc } from '@/components/doc/metergroup/icondoc';
+import { ImportDoc } from '@/components/doc/metergroup/importdoc';
+import { MultipleDoc } from '@/components/doc/metergroup/multipledoc';
+import { LabelDoc } from '@/components/doc/metergroup/labeldoc';
+import { VerticalDoc } from '@/components/doc/metergroup/verticaldoc';
+import { MinMaxDoc } from '@/components/doc/metergroup/minmaxdoc';
+import { TemplateDoc } from '@/components/doc/metergroup/templatedoc';
+import { AccessibilityDoc } from '@/components/doc/metergroup/accessibilitydoc';
+import { Wireframe } from '@/components/doc/metergroup/pt/wireframe';
+import { StyledDoc } from '@/components/doc/metergroup/theming/styleddoc';
+
+const MessagesDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'icon',
+            label: 'Icon',
+            component: IconDoc
+        },
+        {
+            id: 'label',
+            label: 'Label',
+            component: LabelDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'min-max',
+            label: 'Min-Max',
+            component: MinMaxDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.metergroup.options',
+            label: 'MeterGroup PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        }
+    ];
+
+    return <DocComponent title="React MeterGroup Component" header="MeterGroup" description="MeterGroup displays scalar measurements within a known range." componentDocs={docs} apiDocs={['MeterGroup']} themingDocs={themingDocs} ptDocs={ptDocs} />;
+};
+
+export default MessagesDemo;
diff --git a/pages/multiselect/index.js b/pages/multiselect/index.js
new file mode 100644
index 0000000000..e69c160e43
--- /dev/null
+++ b/pages/multiselect/index.js
@@ -0,0 +1,126 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/multiselect/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/multiselect/basicdoc';
+import { ChipsDoc } from '@/components/doc/multiselect/chipsdoc';
+import { DisabledDoc } from '@/components/doc/multiselect/disableddoc';
+import { FilledDoc } from '@/components/doc/multiselect/filleddoc';
+import { FilterDoc } from '@/components/doc/multiselect/filterdoc';
+import { FloatLabelDoc } from '@/components/doc/multiselect/floatlabeldoc';
+import { GroupDoc } from '@/components/doc/multiselect/groupdoc';
+import { ImportDoc } from '@/components/doc/multiselect/importdoc';
+import { InvalidDoc } from '@/components/doc/multiselect/invaliddoc';
+import { LoadingDoc } from '@/components/doc/multiselect/loadingdoc';
+import { Wireframe } from '@/components/doc/multiselect/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/multiselect/templatedoc';
+import { StyledDoc } from '@/components/doc/multiselect/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/multiselect/theming/tailwinddoc';
+import { VirtualScrollDoc } from '@/components/doc/multiselect/virtualscrolldoc';
+
+const MultiSelectDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'chips',
+            label: 'Chips',
+            component: ChipsDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+        {
+            id: 'loadingstate',
+            label: 'Loading State',
+            component: LoadingDoc
+        },
+        {
+            id: 'virtualscroll',
+            label: 'Virtual Scroll',
+            component: VirtualScrollDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.multiselect.options',
+            label: 'MultiSelect PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent title="React MultiSelect Component" header="MultiSelect" description="MultiSelect is used to select multiple items from a collection." componentDocs={docs} apiDocs={['MultiSelect']} ptDocs={ptDocs} themingDocs={themingDocs} />
+    );
+};
+
+export default MultiSelectDemo;
diff --git a/pages/multistatecheckbox/index.js b/pages/multistatecheckbox/index.js
new file mode 100644
index 0000000000..26c9e29b15
--- /dev/null
+++ b/pages/multistatecheckbox/index.js
@@ -0,0 +1,86 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/multistatecheckbox/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/multistatecheckbox/basicdoc';
+import { DisabledDoc } from '@/components/doc/multistatecheckbox/disableddoc';
+import { ImportDoc } from '@/components/doc/multistatecheckbox/importdoc';
+import { InvalidDoc } from '@/components/doc/multistatecheckbox/invaliddoc';
+import { Wireframe } from '@/components/doc/multistatecheckbox/pt/wireframe';
+import { StyledDoc } from '@/components/doc/multistatecheckbox/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/multistatecheckbox/theming/tailwinddoc';
+
+const MultiStateCheckboxDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.multistatecheckbox.options',
+            label: 'MultiStateCheckbox PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React MultiStateCheckbox Component"
+            header="MultiStateCheckbox"
+            description="MultiStateCheckbox is used to select a state from given options."
+            componentDocs={docs}
+            apiDocs={['MultiStateCheckbox']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default MultiStateCheckboxDemo;
diff --git a/pages/orderlist/index.js b/pages/orderlist/index.js
new file mode 100644
index 0000000000..434f38b04c
--- /dev/null
+++ b/pages/orderlist/index.js
@@ -0,0 +1,76 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/orderlist/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/orderlist/basicdoc';
+import { DragDropDoc } from '@/components/doc/orderlist/dragdropdoc';
+import { FilterDoc } from '@/components/doc/orderlist/filterdoc';
+import { ImportDoc } from '@/components/doc/orderlist/importdoc';
+import { Wireframe } from '@/components/doc/orderlist/pt/wireframe';
+import { StyledDoc } from '@/components/doc/orderlist/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/orderlist/theming/tailwinddoc';
+
+const OrderListDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+        {
+            id: 'dragdrop',
+            label: 'DragDrop',
+            component: DragDropDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.orderlist.options',
+            label: 'OrderList PT Options',
+            component: DocApiTable
+        }
+    ];
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React OrderList Component" header="OrderList" description="OrderList is used to sort a collection." componentDocs={docs} apiDocs={['OrderList']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default OrderListDemo;
diff --git a/pages/organizationchart/index.js b/pages/organizationchart/index.js
new file mode 100644
index 0000000000..9d41de7bc6
--- /dev/null
+++ b/pages/organizationchart/index.js
@@ -0,0 +1,94 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/organizationchart/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/organizationchart/basicdoc';
+import { ColoredDoc } from '@/components/doc/organizationchart/coloreddoc';
+import { ImportDoc } from '@/components/doc/organizationchart/importdoc';
+import { Wireframe } from '@/components/doc/organizationchart/pt/wireframe';
+import { SelectionDoc } from '@/components/doc/organizationchart/selectiondoc';
+import { TemplateDoc } from '@/components/doc/organizationchart/templatedoc';
+import { StyledDoc } from '@/components/doc/organizationchart/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/organizationchart/theming/tailwinddoc';
+
+const OrganizationChartDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'selection',
+            label: 'Selection',
+            component: SelectionDoc
+        },
+        {
+            id: 'colored',
+            label: 'Colored',
+            component: ColoredDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.organizationchart.options',
+            label: 'OrganizationChart PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Organization Chart Component"
+            header="OrganizationChart"
+            description="OrganizationChart visualizes hierarchical organization data."
+            componentDocs={docs}
+            apiDocs={['OrganizationChart']}
+            className="organizationchart-demo"
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default OrganizationChartDemo;
diff --git a/pages/overlaypanel/index.js b/pages/overlaypanel/index.js
new file mode 100644
index 0000000000..9488dd4d95
--- /dev/null
+++ b/pages/overlaypanel/index.js
@@ -0,0 +1,82 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/overlaypanel/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/overlaypanel/basicdoc';
+import { DataTableDoc } from '@/components/doc/overlaypanel/datatabledoc';
+import { ImportDoc } from '@/components/doc/overlaypanel/importdoc';
+import { Wireframe } from '@/components/doc/overlaypanel/pt/wireframe';
+import { StyledDoc } from '@/components/doc/overlaypanel/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/overlaypanel/theming/tailwinddoc';
+
+const OverlayPanelDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'dataTable',
+            label: 'DataTable',
+            component: DataTableDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.overlaypanel.options',
+            label: 'OverlayPanel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React OverlayPanel Component"
+            header="OverlayPanel"
+            description="OverlayPanel, also known as Popover, is a container component that can overlay other components on page."
+            componentDocs={docs}
+            apiDocs={['OverlayPanel']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default OverlayPanelDemo;
diff --git a/pages/paginator/index.js b/pages/paginator/index.js
new file mode 100644
index 0000000000..4218653db7
--- /dev/null
+++ b/pages/paginator/index.js
@@ -0,0 +1,93 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/paginator/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/paginator/basicdoc';
+import { ImagesDoc } from '@/components/doc/paginator/imagesdoc';
+import { ImportDoc } from '@/components/doc/paginator/importdoc';
+import { LayoutDoc } from '@/components/doc/paginator/layoutdoc';
+import { Wireframe } from '@/components/doc/paginator/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/paginator/templatedoc';
+import { StyledDoc } from '@/components/doc/paginator/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/paginator/theming/tailwinddoc';
+
+const PaginatorDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'layout',
+            label: 'Layout',
+            component: LayoutDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'images',
+            label: 'Images',
+            component: ImagesDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.paginator.options',
+            label: 'Paginator PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Paginator Component"
+            header="Paginator"
+            description="Paginator displays data in paged format and provides navigation between pages."
+            componentDocs={docs}
+            apiDocs={['Paginator']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default PaginatorDemo;
diff --git a/pages/panel/index.js b/pages/panel/index.js
new file mode 100644
index 0000000000..8685e06a64
--- /dev/null
+++ b/pages/panel/index.js
@@ -0,0 +1,89 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/panel/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/panel/basicdoc';
+import { ImportDoc } from '@/components/doc/panel/importdoc';
+import { Wireframe } from '@/components/doc/panel/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/panel/templatedoc';
+import { StyledDoc } from '@/components/doc/panel/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/panel/theming/tailwinddoc';
+import { ToggleableDoc } from '@/components/doc/panel/toggleabledoc';
+
+const PanelDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'toggleable',
+            label: 'Toggleable',
+            component: ToggleableDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.panel.options',
+            label: 'Panel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Panel Component"
+            header="Panel"
+            description="Panel is a container component with an optional content toggle feature."
+            componentDocs={docs}
+            apiDocs={['Panel']}
+            ptDocs={ptDocs}
+            ptDescription={''}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default PanelDemo;
diff --git a/pages/panelmenu/index.js b/pages/panelmenu/index.js
new file mode 100644
index 0000000000..a7b169c0ba
--- /dev/null
+++ b/pages/panelmenu/index.js
@@ -0,0 +1,94 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/panelmenu/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/panelmenu/basicdoc';
+import { CommandDoc } from '@/components/doc/panelmenu/commanddoc';
+import { ControlledDoc } from '@/components/doc/panelmenu/controlleddoc';
+import { ImportDoc } from '@/components/doc/panelmenu/importdoc';
+import { MultipleDoc } from '@/components/doc/panelmenu/multipledoc';
+import { Wireframe } from '@/components/doc/panelmenu/pt/wireframe';
+import { RouterDoc } from '@/components/doc/panelmenu/routerdoc';
+import { TemplateDoc } from '@/components/doc/panelmenu/templatedoc';
+import { StyledDoc } from '@/components/doc/panelmenu/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/panelmenu/theming/tailwinddoc';
+
+const PanelMenuDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'command',
+            label: 'Command',
+            component: CommandDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.panelmenu.options',
+            label: 'PanelMenu PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React PanelMenu Component" header="PanelMenu" description="PanelMenu is a hybrid of accordion-tree components." componentDocs={docs} apiDocs={['PanelMenu', 'MenuItem']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default PanelMenuDemo;
diff --git a/pages/passthrough/index.js b/pages/passthrough/index.js
new file mode 100644
index 0000000000..1e803ca6b3
--- /dev/null
+++ b/pages/passthrough/index.js
@@ -0,0 +1,49 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { BasicDoc } from '@/components/doc/passthrough/basicdoc';
+import { CustomCSSDoc } from '@/components/doc/passthrough/customcss';
+import { GlobalPTDoc } from '@/components/doc/passthrough/globalptdoc';
+import { LifeCyleDoc } from '@/components/doc/passthrough/lifecycle';
+import { UsePassThroughDoc } from '@/components/doc/passthrough/usepassthroughdoc';
+
+const PassThroughDemo = () => {
+    const docs = [
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'lifecycle',
+            label: 'Lifecycle',
+            component: LifeCyleDoc
+        },
+        {
+            id: 'globalpt',
+            label: 'Global',
+            component: GlobalPTDoc
+        },
+        {
+            id: 'customcss',
+            label: 'Custom CSS',
+            component: CustomCSSDoc
+        },
+        {
+            id: 'usepassthrough',
+            label: 'UsePassThrough',
+            component: UsePassThroughDoc
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="PrimeReact - PassThrough"
+            header="Pass Through"
+            description="The Pass Through props is an API to access the internal DOM Structure of the components."
+            componentDocs={docs}
+            apiDocs={['API']}
+            apiExclude={{ interfaces: ['PrimeIconsOptions', 'APIOptions', 'ContextAPIOptions', 'FilterMatchModeOptions', 'ZIndexOptions', 'LocaleOptions'], types: 'excludeAll' }}
+        />
+    );
+};
+
+export default PassThroughDemo;
diff --git a/pages/password/index.js b/pages/password/index.js
new file mode 100644
index 0000000000..eba85cb655
--- /dev/null
+++ b/pages/password/index.js
@@ -0,0 +1,112 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/password/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/password/basicdoc';
+import { DisabledDoc } from '@/components/doc/password/disableddoc';
+import { FilledDoc } from '@/components/doc/password/filleddoc';
+import { FloatLabelDoc } from '@/components/doc/password/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/password/importdoc';
+import { InvalidDoc } from '@/components/doc/password/invaliddoc';
+import { LocaleDoc } from '@/components/doc/password/localedoc';
+import { MeterDoc } from '@/components/doc/password/meterdoc';
+import { Wireframe } from '@/components/doc/password/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/password/templatedoc';
+import { StyledDoc } from '@/components/doc/password/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/password/theming/tailwinddoc';
+import { ToggleMaskDoc } from '@/components/doc/password/togglemaskdoc';
+
+const PasswordDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'meter',
+            label: 'Meter',
+            component: MeterDoc
+        },
+        {
+            id: 'locale',
+            label: 'Locale',
+            component: LocaleDoc
+        },
+        {
+            id: 'togglemask',
+            label: 'Toggle Mask',
+            component: ToggleMaskDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.password.options',
+            label: 'Password PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Password Component" header="Password" description="Password displays strength indicator for password fields." componentDocs={docs} apiDocs={['Password']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default PasswordDemo;
diff --git a/pages/picklist/index.js b/pages/picklist/index.js
new file mode 100644
index 0000000000..4aacc22421
--- /dev/null
+++ b/pages/picklist/index.js
@@ -0,0 +1,71 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/picklist/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/picklist/basicdoc';
+import { FilterDoc } from '@/components/doc/picklist/filterdoc';
+import { ImportDoc } from '@/components/doc/picklist/importdoc';
+import { Wireframe } from '@/components/doc/picklist/pt/wireframe';
+import { StyledDoc } from '@/components/doc/picklist/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/picklist/theming/tailwinddoc';
+
+const PickListDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.picklist.options',
+            label: 'PickList PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React PickList Component" header="PickList" description="PickList is used to reorder items between different lists.." componentDocs={docs} apiDocs={['PickList']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default PickListDemo;
diff --git a/pages/playground/index.js b/pages/playground/index.js
new file mode 100644
index 0000000000..e88db09fae
--- /dev/null
+++ b/pages/playground/index.js
@@ -0,0 +1,30 @@
+import Head from 'next/head';
+
+const PlayGround = () => {
+    return (
+        <div>
+            <Head>
+                <title>Playground - PrimeReact</title>
+                <meta name="description" content="Experience Primereact right now with the interactive environment." />
+            </Head>
+            <div className="doc">
+                <div className="doc-main">
+                    <div className="doc-intro">
+                        <h1>Playground</h1>
+                        <p>Experience Primereact right now with the interactive environment.</p>
+                    </div>
+                    <section className="py-4">
+                        <iframe
+                            className="w-full h-full"
+                            style={{ border: '1px solid rgba(0, 0, 0, 0.1)', borderRadius: '2px', minHeight: '800px' }}
+                            allowfFullScreen
+                            src="https://stackblitz.com/edit/stackblitz-starters-66bhze?embed=1&file=src%2FApp.tsx"
+                        />
+                    </section>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default PlayGround;
diff --git a/pages/progressbar/index.js b/pages/progressbar/index.js
new file mode 100644
index 0000000000..120623105a
--- /dev/null
+++ b/pages/progressbar/index.js
@@ -0,0 +1,84 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/progressbar/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/progressbar/basicdoc';
+import { DynamicDoc } from '@/components/doc/progressbar/dynamicdoc';
+import { ImportDoc } from '@/components/doc/progressbar/importdoc';
+import { IndeterminateDoc } from '@/components/doc/progressbar/indeterminatedoc';
+import { Wireframe } from '@/components/doc/progressbar/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/progressbar/templatedoc';
+import { StyledDoc } from '@/components/doc/progressbar/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/progressbar/theming/tailwinddoc';
+
+const ProgressBarDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'dynamic',
+            label: 'Dynamic',
+            component: DynamicDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'indeterminate',
+            label: 'Indeterminate',
+            component: IndeterminateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.progressbar.options',
+            label: 'ProgressBar PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React ProgressBar Component" header="ProgressBar" description="ProgressBar is a process status indicator." componentDocs={docs} apiDocs={['ProgressBar']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ProgressBarDemo;
diff --git a/pages/progressspinner/index.js b/pages/progressspinner/index.js
new file mode 100644
index 0000000000..e9e4edcf35
--- /dev/null
+++ b/pages/progressspinner/index.js
@@ -0,0 +1,72 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/progressspinner/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/progressspinner/basicdoc';
+import { CustomDoc } from '@/components/doc/progressspinner/customdoc';
+import { ImportDoc } from '@/components/doc/progressspinner/importdoc';
+import { Wireframe } from '@/components/doc/progressspinner/pt/wireframe';
+import { StyledDoc } from '@/components/doc/progressspinner/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/progressspinner/theming/tailwinddoc';
+
+const SkeletonDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'custom',
+            label: 'Custom',
+            component: CustomDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.progressspinner.options',
+            label: 'ProgressSpinner PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React ProgressSpinner Component" header="ProgressSpinner" description="ProgressSpinner is a process status indicator." componentDocs={docs} apiDocs={['ProgressSpinner']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default SkeletonDemo;
diff --git a/pages/radiobutton/index.js b/pages/radiobutton/index.js
new file mode 100644
index 0000000000..83a8ff6f48
--- /dev/null
+++ b/pages/radiobutton/index.js
@@ -0,0 +1,98 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/radiobutton/accessibilitydoc';
+import { DisabledDoc } from '@/components/doc/radiobutton/disableddoc';
+import { DynamicDoc } from '@/components/doc/radiobutton/dynamicdoc';
+import { FilledDoc } from '@/components/doc/radiobutton/filleddoc';
+import { GroupDoc } from '@/components/doc/radiobutton/groupdoc';
+import { ImportDoc } from '@/components/doc/radiobutton/importdoc';
+import { InvalidDoc } from '@/components/doc/radiobutton/invaliddoc';
+import { Wireframe } from '@/components/doc/radiobutton/pt/wireframe';
+import { StyledDoc } from '@/components/doc/radiobutton/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/radiobutton/theming/tailwinddoc';
+
+const RadioButtonDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'group',
+            label: 'Group',
+            component: GroupDoc
+        },
+        {
+            id: 'dynamic',
+            label: 'Dynamic',
+            component: DynamicDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.radiobutton.options',
+            label: 'RadioButton PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React RadioButton Component"
+            header="RadioButton"
+            description="RadioButton is an extension to standard radio button element with theming."
+            componentDocs={docs}
+            apiDocs={['RadioButton']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default RadioButtonDemo;
diff --git a/pages/rating/index.js b/pages/rating/index.js
new file mode 100644
index 0000000000..83ff46ad1d
--- /dev/null
+++ b/pages/rating/index.js
@@ -0,0 +1,95 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/rating/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/rating/basicdoc';
+import { DisabledDoc } from '@/components/doc/rating/disableddoc';
+import { ImportDoc } from '@/components/doc/rating/importdoc';
+import { NumberOfStarsDoc } from '@/components/doc/rating/numberofstarsdoc';
+import { Wireframe } from '@/components/doc/rating/pt/wireframe';
+import { ReadOnlyDoc } from '@/components/doc/rating/readonlydoc';
+import { TemplateDoc } from '@/components/doc/rating/templatedoc';
+import { StyledDoc } from '@/components/doc/rating/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/rating/theming/tailwinddoc';
+import { WithoutCancelDoc } from '@/components/doc/rating/withoutcanceldoc';
+
+const RatingDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'withoutcancel',
+            label: 'Without Cancel',
+            component: WithoutCancelDoc
+        },
+        {
+            id: 'numberofstars',
+            label: 'Number of Stars',
+            component: NumberOfStarsDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'readonly',
+            label: 'ReadOnly',
+            component: ReadOnlyDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.rating.options',
+            label: 'Rating PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Rating Component" header="Rating" description="Rating component is a star based selection input." componentDocs={docs} apiDocs={['Rating']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default RatingDemo;
diff --git a/pages/ripple/index.js b/pages/ripple/index.js
new file mode 100644
index 0000000000..ec0f7ed37d
--- /dev/null
+++ b/pages/ripple/index.js
@@ -0,0 +1,77 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/ripple/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/ripple/basicdoc';
+import { ConfigurationDoc } from '@/components/doc/ripple/configurationdoc';
+import { CustomDoc } from '@/components/doc/ripple/customdoc';
+import { ImportDoc } from '@/components/doc/ripple/importdoc';
+import { StyledDoc } from '@/components/doc/ripple/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/ripple/theming/tailwinddoc';
+import { PrimeReactContext } from '@/components/lib/api/PrimeReactContext';
+import { useContext, useEffect, useRef } from 'react';
+
+const RippleDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'configuration',
+            label: 'ConfigurationDoc',
+            component: ConfigurationDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'custom',
+            label: 'Custom',
+            component: CustomDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const { ripple, setRipple } = useContext(PrimeReactContext);
+    const userRippleValue = useRef(ripple);
+
+    useEffect(() => {
+        setRipple(true);
+
+        const currentRipple = userRippleValue.current;
+
+        return () => {
+            setRipple(currentRipple);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Ripple Component" header="Ripple" description="Ripple component adds ripple effect to the host element." componentDocs={docs} apiDocs={['Ripple']} themingDocs={themingDocs} />;
+};
+
+export default RippleDemo;
diff --git a/pages/roadmap/index.js b/pages/roadmap/index.js
new file mode 100644
index 0000000000..c02587e782
--- /dev/null
+++ b/pages/roadmap/index.js
@@ -0,0 +1,215 @@
+import Head from 'next/head';
+
+const Roadmap = () => {
+    return (
+        <div>
+            <Head>
+                <title>React Roadmap</title>
+                <meta
+                    name="description"
+                    content="These are planned to be implemented in parallel to the regular
+                        maintenance work of the PrimeReact library"
+                />
+            </Head>
+            <div className="doc-intro">
+                <h1>Roadmap</h1>
+                <p>
+                    At{' '}
+                    <a href="https://www.primetek.com.tr/" className="font-medium hover:underline text-primary">
+                        PrimeTek
+                    </a>
+                    , we are passionate about improving PrimeReact and would like to share our ideas for 2024 with the community. These are planned to be implemented in parallel to the regular maintenance work of the library involving review of issue
+                    tickets, PRs and PrimeReact PRO support.
+                </p>
+            </div>
+
+            <div className="overflow-auto">
+                <div style={{ minWidth: '1200px' }}>
+                    <div className="flex gap-3 mb-3">
+                        <div className="flex-shrink-0 w-14rem" />
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q1</div>
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q2</div>
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q3</div>
+                        <div className="flex-1 bg-bluegray-500 text-white font-bold text-center p-3 text-xl border-round">Q4</div>
+                    </div>
+                    <div className="flex flex-column gap-3">
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-blue-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">COMPONENTS</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Provide presets for the entire UI suite.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '10%', height: '4px' }} />
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">New Components</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Layout, Typography, MeterGroup, Drawer, Stepper...</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '5%', height: '4px' }} />
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Form States</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Add filled and invalid props to form components.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Move theming into core to replace sass repo.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Implement figma design tokens as CSS variables instead of SCSS.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
+                                    <p className="mt-0 mb-3 line-height-3">RTL support for the UI components.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Drag and Drop utilities.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Sheet, Event Calendar.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-blue-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Gantt Chart, Flow Chart.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-blue-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-indigo-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">FIGMA UI KIT</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-indigo-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Design tokens to sync with the new styled mode.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-indigo-500 border-round" style={{ width: '20%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-indigo-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Build the infrastructure to generate themes from Figma.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-indigo-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-teal-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">SHOWCASE</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-teal-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Documentation</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Add new demos and documentation.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-teal-500 border-round" style={{ width: '10%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-orange-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">PRIMEBLOCKS</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Create new blocks.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }} />
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Blocks Website</h2>
+                                    <p className="mt-0 mb-3 line-height-3">New design for blocks application.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '50%', height: '4px' }} />
+                                    </div>
+                                </div>
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Port the entire Blocks to Tailwind.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-orange-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Online App</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Implement a SaaS app to access the blocks instead of an offline download.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-orange-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
+                        </div>
+                        <div className="flex gap-3 border-bottom-1 surface-border pb-3">
+                            <div className="flex-shrink-0 p-3 bg-pink-500 text-white border-round font-bold text-lg flex align-items-center justify-content-center w-14rem">DESIGN</div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-pink-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Aura UI Theme</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Brand new default theme with a modern and attractive design.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-pink-500 border-round" style={{ width: '75%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column">
+                                <div className="p-3 surface-card border-round border-pink-500" style={{ borderLeft: '6px solid' }}>
+                                    <h2 className="text-lg font-bold mt-0 mb-2">Theme Editor</h2>
+                                    <p className="mt-0 mb-3 line-height-3">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
+                                    <div className="surface-200 border-round">
+                                        <div className="bg-pink-500 border-round" style={{ width: '0%', height: '4px' }} />
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="flex-1 flex gap-3 flex-column" />
+                            <div className="flex-1 flex gap-3 flex-column" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Roadmap;
diff --git a/pages/scrollpanel/index.js b/pages/scrollpanel/index.js
new file mode 100644
index 0000000000..16832be1b5
--- /dev/null
+++ b/pages/scrollpanel/index.js
@@ -0,0 +1,82 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/scrollpanel/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/scrollpanel/basicdoc';
+import { CustomDemo } from '@/components/doc/scrollpanel/customdoc';
+import { ImportDoc } from '@/components/doc/scrollpanel/importdoc';
+import { Wireframe } from '@/components/doc/scrollpanel/pt/wireframe';
+import { StyledDoc } from '@/components/doc/scrollpanel/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/scrollpanel/theming/tailwinddoc';
+
+const ScrollPanelDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'custom',
+            label: 'Custom',
+            component: CustomDemo
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.scrollpanel.options',
+            label: 'ScrollPanel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React ScrollPanel Component"
+            header="ScrollPanel"
+            description="ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar."
+            componentDocs={docs}
+            apiDocs={['ScrollPanel']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default ScrollPanelDemo;
diff --git a/pages/scrolltop/index.js b/pages/scrolltop/index.js
new file mode 100644
index 0000000000..ad54bc601b
--- /dev/null
+++ b/pages/scrolltop/index.js
@@ -0,0 +1,82 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/scrolltop/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/scrolltop/basicdoc';
+import { ElementDoc } from '@/components/doc/scrolltop/elementdoc';
+import { ImportDoc } from '@/components/doc/scrolltop/importdoc';
+import { Wireframe } from '@/components/doc/scrolltop/pt/wireframe';
+import { StyledDoc } from '@/components/doc/scrolltop/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/scrolltop/theming/tailwinddoc';
+
+const ScrollTopDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'element',
+            label: 'Element',
+            component: ElementDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.scrolltop.options',
+            label: 'ScrollTop PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React ScrollTop Component"
+            header="ScrollTop"
+            description="ScrollTop gets displayed when it gets into viewport and used to navigate back to the top of the page."
+            componentDocs={docs}
+            apiDocs={['ScrollTop']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default ScrollTopDemo;
diff --git a/pages/selectbutton/index.js b/pages/selectbutton/index.js
new file mode 100644
index 0000000000..0f941ca469
--- /dev/null
+++ b/pages/selectbutton/index.js
@@ -0,0 +1,98 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/selectbutton/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/selectbutton/basicdoc';
+import { DisabledDoc } from '@/components/doc/selectbutton/disableddoc';
+import { ImportDoc } from '@/components/doc/selectbutton/importdoc';
+import { InvalidDoc } from '@/components/doc/selectbutton/invaliddoc';
+import { MultipleDoc } from '@/components/doc/selectbutton/multipledoc';
+import { Wireframe } from '@/components/doc/selectbutton/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/selectbutton/templatedoc';
+import { StyledDoc } from '@/components/doc/selectbutton/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/selectbutton/theming/tailwinddoc';
+
+const SelectButtonDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.selectbutton.options',
+            label: 'SelectButton PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React SelectButton Component"
+            header="SelectButton"
+            description="SelectButton is used to choose single or multiple items from a list using buttons."
+            componentDocs={docs}
+            apiDocs={['SelectButton']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default SelectButtonDemo;
diff --git a/pages/sidebar/index.js b/pages/sidebar/index.js
new file mode 100644
index 0000000000..d733079f60
--- /dev/null
+++ b/pages/sidebar/index.js
@@ -0,0 +1,105 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/sidebar/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/sidebar/basicdoc';
+import { FullScreenDoc } from '@/components/doc/sidebar/fullscreendoc';
+import { HeadlessDoc } from '@/components/doc/sidebar/headlessdoc';
+import { ImportDoc } from '@/components/doc/sidebar/importdoc';
+import { PositionDoc } from '@/components/doc/sidebar/positiondoc';
+import { Wireframe } from '@/components/doc/sidebar/pt/wireframe';
+import { SizeDoc } from '@/components/doc/sidebar/sizedoc';
+import { TemplateDoc } from '@/components/doc/sidebar/templatedoc';
+import { StyledDoc } from '@/components/doc/sidebar/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/sidebar/theming/tailwinddoc';
+
+const SidebarDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'position',
+            label: 'Position',
+            component: PositionDoc
+        },
+        {
+            id: 'size',
+            label: 'Size',
+            component: SizeDoc
+        },
+        {
+            id: 'fullscreen',
+            label: 'Full Screen',
+            component: FullScreenDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.sidebar.options',
+            label: 'Sidebar PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Sidebar Component"
+            header="Sidebar"
+            description="Sidebar, also known as Drawer, is a container component displayed as an overlay."
+            componentDocs={docs}
+            apiDocs={['Sidebar']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default SidebarDemo;
diff --git a/pages/skeleton/index.js b/pages/skeleton/index.js
new file mode 100644
index 0000000000..4a77eedb53
--- /dev/null
+++ b/pages/skeleton/index.js
@@ -0,0 +1,84 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/skeleton/accessibilitydoc';
+import { CardDoc } from '@/components/doc/skeleton/carddoc';
+import { DataTableDoc } from '@/components/doc/skeleton/datatabledoc';
+import { ImportDoc } from '@/components/doc/skeleton/importdoc';
+import { ListDoc } from '@/components/doc/skeleton/listdoc';
+import { Wireframe } from '@/components/doc/skeleton/pt/wireframe';
+import { ShapesDoc } from '@/components/doc/skeleton/shapesdoc';
+import { StyledDoc } from '@/components/doc/skeleton/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/skeleton/theming/tailwinddoc';
+
+const SkeletonDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'shapes',
+            label: 'Shapes',
+            component: ShapesDoc
+        },
+        {
+            id: 'card',
+            label: 'Card',
+            component: CardDoc
+        },
+        {
+            id: 'list',
+            label: 'List',
+            component: ListDoc
+        },
+        {
+            id: 'datatable',
+            label: 'DataTable',
+            component: DataTableDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.skeleton.options',
+            label: 'Skeleton PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Skeleton Component" header="Skeleton" description="Skeleton is a placeholder to display instead of the actual content." componentDocs={docs} apiDocs={['Skeleton']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default SkeletonDemo;
diff --git a/pages/slider/index.js b/pages/slider/index.js
new file mode 100644
index 0000000000..c25be71691
--- /dev/null
+++ b/pages/slider/index.js
@@ -0,0 +1,94 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/slider/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/slider/basicdoc';
+import { FilterDoc } from '@/components/doc/slider/filterdoc';
+import { ImportDoc } from '@/components/doc/slider/importdoc';
+import { InputDoc } from '@/components/doc/slider/inputdoc';
+import { Wireframe } from '@/components/doc/slider/pt/wireframe';
+import { RangeDoc } from '@/components/doc/slider/rangedoc';
+import { StepDoc } from '@/components/doc/slider/stepdoc';
+import { StyledDoc } from '@/components/doc/slider/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/slider/theming/tailwinddoc';
+import { VerticalDoc } from '@/components/doc/slider/verticaldoc';
+
+const SliderDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'input',
+            label: 'Input',
+            component: InputDoc
+        },
+        {
+            id: 'step',
+            label: 'Step',
+            component: StepDoc
+        },
+        {
+            id: 'range',
+            label: 'Range',
+            component: RangeDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.slider.options',
+            label: 'Slider PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Slider Component" header="Slider" description="Slider is a component to provide input with a drag handle." componentDocs={docs} apiDocs={['Slider']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default SliderDemo;
diff --git a/pages/speeddial/index.js b/pages/speeddial/index.js
new file mode 100644
index 0000000000..082e599bed
--- /dev/null
+++ b/pages/speeddial/index.js
@@ -0,0 +1,102 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/speeddial/accessibilitydoc';
+import { CircleDoc } from '@/components/doc/speeddial/circledoc';
+import { CustomDoc } from '@/components/doc/speeddial/customdoc';
+import { ImportDoc } from '@/components/doc/speeddial/importdoc';
+import { LinearDoc } from '@/components/doc/speeddial/lineardoc';
+import { MaskDoc } from '@/components/doc/speeddial/maskdoc';
+import { Wireframe } from '@/components/doc/speeddial/pt/wireframe';
+import { QuarterCircleDoc } from '@/components/doc/speeddial/quartercircledoc';
+import { SemiCircleDoc } from '@/components/doc/speeddial/semicircledoc';
+import { StyledDoc } from '@/components/doc/speeddial/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/speeddial/theming/tailwinddoc';
+import { TooltipDoc } from '@/components/doc/speeddial/tooltipdoc';
+
+const SpeedDialDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'linear',
+            label: 'Linear',
+            component: LinearDoc
+        },
+        {
+            id: 'circle',
+            label: 'Circle',
+            component: CircleDoc
+        },
+        {
+            id: 'semicircle',
+            label: 'Semi Circle',
+            component: SemiCircleDoc
+        },
+        {
+            id: 'quartercircle',
+            label: 'Quarter Circle',
+            component: QuarterCircleDoc
+        },
+        {
+            id: 'tooltip',
+            label: 'Tooltip',
+            component: TooltipDoc
+        },
+        {
+            id: 'mask',
+            label: 'Mask',
+            component: MaskDoc
+        },
+        {
+            id: 'custom',
+            label: 'Custom',
+            component: CustomDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.speeddial.options',
+            label: 'SpeedDial PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Speed Dial Component" header="Speed Dial" description="SpeedDial is a floating button with a popup menu." componentDocs={docs} apiDocs={['SpeedDial']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default SpeedDialDemo;
diff --git a/pages/splitbutton/index.js b/pages/splitbutton/index.js
new file mode 100644
index 0000000000..0c849d254f
--- /dev/null
+++ b/pages/splitbutton/index.js
@@ -0,0 +1,141 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/splitbutton/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/splitbutton/basicdoc';
+import { DisabledDoc } from '@/components/doc/splitbutton/disableddoc';
+import { IconsDoc } from '@/components/doc/splitbutton/iconsdoc';
+import { ImportDoc } from '@/components/doc/splitbutton/importdoc';
+import { LoadingDoc } from '@/components/doc/splitbutton/loadingdoc';
+import { OutlinedDoc } from '@/components/doc/splitbutton/outlineddoc';
+import { Wireframe } from '@/components/doc/splitbutton/pt/wireframe';
+import { RaisedDoc } from '@/components/doc/splitbutton/raiseddoc';
+import { RaisedTextDoc } from '@/components/doc/splitbutton/raisedtextdoc';
+import { RoundedDoc } from '@/components/doc/splitbutton/roundeddoc';
+import { SeverityDoc } from '@/components/doc/splitbutton/severitydoc';
+import { SizesDoc } from '@/components/doc/splitbutton/sizesdoc';
+import { TemplateDoc } from '@/components/doc/splitbutton/templatedoc';
+import { TextDoc } from '@/components/doc/splitbutton/textdoc';
+import { StyledDoc } from '@/components/doc/splitbutton/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/splitbutton/theming/tailwinddoc';
+
+const SplitButtonDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'icons',
+            label: 'Icons',
+            component: IconsDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'loading',
+            label: 'Loading',
+            component: LoadingDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'raised',
+            label: 'Raised',
+            component: RaisedDoc
+        },
+        {
+            id: 'rounded',
+            label: 'Rounded',
+            component: RoundedDoc
+        },
+        {
+            id: 'text',
+            label: 'Text',
+            component: TextDoc
+        },
+        {
+            id: 'raisedtext',
+            label: 'Raised Text',
+            component: RaisedTextDoc
+        },
+        {
+            id: 'outlinedbuttons',
+            label: 'Outlined',
+            component: OutlinedDoc
+        },
+        {
+            id: 'sizes',
+            label: 'Sizes',
+            component: SizesDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.splitbutton.options',
+            label: 'SplitButton PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React SplitButton Component"
+            header="SplitButton"
+            description="SplitButton groups a set of commands in an overlay with a default action item."
+            componentDocs={docs}
+            apiDocs={['SplitButton']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default SplitButtonDemo;
diff --git a/pages/splitter/index.js b/pages/splitter/index.js
new file mode 100644
index 0000000000..56cc8c925c
--- /dev/null
+++ b/pages/splitter/index.js
@@ -0,0 +1,89 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/splitter/accessibilitydoc';
+import { HorizontalDoc } from '@/components/doc/splitter/horizontaldoc';
+import { ImportDoc } from '@/components/doc/splitter/importdoc';
+import { NestedDoc } from '@/components/doc/splitter/nesteddoc';
+import { Wireframe } from '@/components/doc/splitter/pt/wireframe';
+import { SizeDoc } from '@/components/doc/splitter/sizedoc';
+import { StyledDoc } from '@/components/doc/splitter/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/splitter/theming/tailwinddoc';
+import { VerticalDoc } from '@/components/doc/splitter/verticaldoc';
+
+const SplitterDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'horizontal',
+            label: 'Horizontal',
+            component: HorizontalDoc
+        },
+        {
+            id: 'size',
+            label: 'Size',
+            component: SizeDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'nested',
+            label: 'Nested',
+            component: NestedDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.splitter.options',
+            label: 'Splitter PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.splitterpanel.options',
+            label: 'SplitterPanel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Splitter Component" header="Splitter" description="Splitter is utilized to separate and resize panels." componentDocs={docs} apiDocs={['Splitter', 'SplitterPanel']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default SplitterDemo;
diff --git a/pages/stepper/index.js b/pages/stepper/index.js
new file mode 100644
index 0000000000..69da8c0eb7
--- /dev/null
+++ b/pages/stepper/index.js
@@ -0,0 +1,97 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/stepper/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/stepper/basicdoc';
+import { ImportDoc } from '@/components/doc/stepper/importdoc';
+import { LinearDoc } from '@/components/doc/stepper/lineardoc';
+import { Wireframe } from '@/components/doc/stepper/pt/wireframe';
+import { StyledDoc } from '@/components/doc/stepper/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/stepper/theming/tailwinddoc';
+import { VerticalDoc } from '@/components/doc/stepper/verticaldoc';
+import { HeaderDoc } from '@/components/doc/stepper/headerdoc';
+
+const StepperDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'vertical',
+            label: 'Vertical',
+            component: VerticalDoc
+        },
+        {
+            id: 'linear',
+            label: 'Linear',
+            component: LinearDoc
+        },
+        {
+            id: 'header',
+            label: 'Header',
+            component: HeaderDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.stepper.options',
+            label: 'Stepper PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.stepperpanel.options',
+            label: 'StepperPanel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Stepper Component"
+            header="Stepper"
+            description="The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression."
+            componentDocs={docs}
+            apiDocs={['Stepper', 'StepperPanel']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default StepperDemo;
diff --git a/pages/steps/index.js b/pages/steps/index.js
new file mode 100644
index 0000000000..c5a74a98a0
--- /dev/null
+++ b/pages/steps/index.js
@@ -0,0 +1,100 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/steps/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/steps/basicdoc';
+import { ControlledDoc } from '@/components/doc/steps/controlleddoc';
+import { ImportDoc } from '@/components/doc/steps/importdoc';
+import { InteractiveDoc } from '@/components/doc/steps/interactivedoc';
+import { LinearDoc } from '@/components/doc/steps/lineardoc';
+import { Wireframe } from '@/components/doc/steps/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/steps/templatedoc';
+import { StyledDoc } from '@/components/doc/steps/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/steps/theming/tailwinddoc';
+
+const StepsDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'linear',
+            label: 'Linear',
+            component: LinearDoc
+        },
+        {
+            id: 'interactive',
+            label: 'Interactive',
+            component: InteractiveDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.steps.options',
+            label: 'Steps PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Steps Component"
+            header="Steps"
+            description="Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design."
+            componentDocs={docs}
+            apiDocs={['Steps', 'MenuItem']}
+            className="steps-demo"
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default StepsDemo;
diff --git a/pages/styleclass/index.js b/pages/styleclass/index.js
new file mode 100644
index 0000000000..a44d803e95
--- /dev/null
+++ b/pages/styleclass/index.js
@@ -0,0 +1,36 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AnimationDoc } from '@/components/doc/styleclass/animationdoc';
+import { ImportDoc } from '@/components/doc/styleclass/importdoc';
+import { ToggleClassDoc } from '@/components/doc/styleclass/toggleclassdoc';
+
+const StyleClassDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'toggleclass',
+            label: 'Toggle Class',
+            component: ToggleClassDoc
+        },
+        {
+            id: 'animations',
+            label: 'Animation',
+            component: AnimationDoc
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React StyleClass Component"
+            header="StyleClass"
+            description="StyleClass manages css classes declaratively to during enter/leave animations or just to toggle classes on an element."
+            componentDocs={docs}
+            apiDocs={['StyleClass']}
+        />
+    );
+};
+
+export default StyleClassDemo;
diff --git a/pages/support/index.js b/pages/support/index.js
new file mode 100644
index 0000000000..5890ef5f0d
--- /dev/null
+++ b/pages/support/index.js
@@ -0,0 +1,293 @@
+const SupportPage = () => {
+    return (
+        <div>
+            <div className="flex flex-column md:flex-row mb-5 gap-5">
+                <div className="card flex-1 m-0 relative overflow-hidden">
+                    <i className="pi pi-github absolute opacity-20" style={{ bottom: '-50px', right: '-50px', fontSize: '200px', transform: 'rotateX(45deg) rotateY(0deg) rotateZ(-45deg)' }}></i>
+                    <div className="text-2xl font-semibold mb-3 relative">Community Support</div>
+                    <p className="m-0 line-height-3 relative text-lg">
+                        <a href="https://github.com/orgs/primefaces/discussions" className="text-primary font-medium hover:underline" target="_blank" rel="noopener noreferrer">
+                            Forum
+                        </a>{' '}
+                        and{' '}
+                        <a href="https://discord.gg/gzKFYnpmCY" className="text-primary font-medium hover:underline" target="_blank" rel="noopener noreferrer">
+                            Discord
+                        </a>{' '}
+                        are where the community users gather to seek support, post topics and discuss the technology. GitHub issue is the channel for the community users to create tickets however PrimeTek does not guarantee a response time although
+                        they are monitored and maintained by our staff. If you need to secure a response, you may consider PRO support instead.
+                    </p>
+                </div>
+                <div className="card m-0 flex-1 bg-primary text-primary-contrast font-medium">
+                    <div className="text-2xl font-semibold mb-3">Professional Support</div>
+                    <p className="m-0 line-height-3 text-lg">
+                        With PRO support, it's easy to support, tune, and add features to PrimeReact as an in-house library. With the exclusive services of a PRO account, you no longer need to post questions in the community forum and the community
+                        issue tracker at GitHub. Service is delivered via a private issue tracker based on a one-business-day response time.
+                    </p>
+                </div>
+            </div>
+
+            <div className="grid mb-5">
+                <div className="col-12 lg:col-4">
+                    <div className="card m-0">
+                        <div className="flex align-items-center justify-content-between mb-3">
+                            <div className="text-2xl font-semibold">Service Features</div>
+                            <span className="font-bold text-lg">$200/h</span>
+                        </div>
+                        <div className="gap-5 px-3">
+                            <ul className="flex-auto list-none m-0 p-0 text-lg">
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">Private Issue Tracker</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">Response within 1 business day</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">Unlimited Number of Tickets</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">Hourly Support Model</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">1 year term</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">Minimum 25 Hours for initiation</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">Up to 5 accounts</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">Maintenance for Any Version</span>
+                                </li>
+                                <li className="flex align-items-center mb-3">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">New Features</span>
+                                </li>
+                                <li className="flex align-items-center">
+                                    <i className="pi pi-check-circle mr-3 text-green-500"></i>
+                                    <span className="line-height-3">POC implementations of a requirement</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <a
+                            href="/service/mailto:contact@primetek.com.tr?subject=PrimeReact%20PRO%20Support"
+                            className="block mt-4 w-full bg-primary border-round py-2 px-3 text-center transition-all duration-300 text-primary-contrast font-semibold text-lg leading-none"
+                        >
+                            Buy Now
+                        </a>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-8">
+                    <div className="card m-0 h-full">
+                        <div className="text-2xl font-semibold mb-3">How It Works</div>
+                        <ul className="flex flex-column gap-3 list-none m-0 p-0 text-lg">
+                            <li>
+                                <div className="font-semibold mb-2">1. Purchase PRO Support</div>
+                                <span className="line-height-3">
+                                    Contact{' '}
+                                    <a href="/service/mailto:contact@primetek.com.tr" target="_blank" rel="noopener noreferrer" className="text-primary font-medium hover:underline">
+                                        PrimeTek
+                                    </a>{' '}
+                                    to purchase support.
+                                </span>
+                            </li>
+                            <li>
+                                <div className="font-semibold mb-2">2. Setup</div>
+                                <span className="line-height-3">A private repository with an exclusive issue tracker is created for you at GitHub.</span>
+                            </li>
+                            <li>
+                                <div className="font-semibold mb-2">3. Request Support</div>
+                                <span className="line-height-3">Create a ticket with a description of the issue and receive a reply within 1 business day.</span>
+                            </li>
+                            <li>
+                                <div className="font-semibold mb-2">4. Estimate and Approval</div>
+                                <span className="line-height-3">An estimate is provided to resolve the issue, upon your approval the PrimeTek team commences work.</span>
+                            </li>
+                            <li>
+                                <div className="font-semibold mb-2">5. Resolution</div>
+                                <span className="line-height-3">Issue is resolved and the approved hours are deducted from your account.</span>
+                            </li>
+                            <li>
+                                <div className="font-semibold mb-2">6. Delivery</div>
+                                <span className="line-height-3">
+                                    If the issue requires an update in the library, it gets published to npm by as part of the public PrimeReact package. A patch update on an older version can also be requested if you are not using the latest
+                                    version.
+                                </span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div className="card mb-5">
+                <div className="text-2xl font-semibold mb-3">Consulting</div>
+
+                <p className="m-0 line-height-3 mb-5 text-lg">
+                    Unlock the full potential of your software projects in addition to PRO Support with the premier consulting services of our partners. The team of seasoned consultants is available to provide tailored expertise and guidance,
+                    ensuring your software development initiatives are successful, efficient, and innovative.
+                </p>
+
+                <div className="flex flex-column md:flex-row gap-5 mb-5">
+                    <div className="flex-1">
+                        <div className="font-semibold mb-2 text-xl">Deep Expertise</div>
+                        <p className="m-0 line-height-3 mb-3 text-lg">
+                            Our consultants are experts with extensive experience in various aspects of software development, including design, architecture, coding, testing, and deployment. They bring a wealth of knowledge and best practices to your
+                            project.
+                        </p>
+                    </div>
+                    <div className="flex-1">
+                        <div className="font-semibold mb-2 text-xl">Customized Solutions</div>
+                        <p className="m-0 line-height-3 mb-3 text-lg">
+                            We understand that every project is unique. Our consultants work closely with you to understand your specific requirements and challenges, delivering solutions that are perfectly aligned with your business goals..
+                        </p>
+                    </div>
+                    <div className="flex-1">
+                        <div className="font-semibold mb-2 text-xl">Scalable Engagements</div>
+                        <p className="m-0 line-height-3 mb-3 text-lg">Whether you need short-term advice for a specific problem or long-term strategic guidance, our consulting services are flexible and scalable to meet your needs.</p>
+                    </div>
+                </div>
+
+                <div className="border-top-1 surface-border pt-5 flex flex-column align-items-center">
+                    <p className="line-height-3 mb-5 text-lg">
+                        We are proud to collaborate with{' '}
+                        <a href="https://ksmpartners.com/" target="_blank" rel="noopener noreferrer" className="text-primary font-medium hover:underline">
+                            KSM
+                        </a>{' '}
+                        and{' '}
+                        <a href="https://virtua.tech/" target="_blank" rel="noopener noreferrer">
+                            Virtua
+                        </a>{' '}
+                        that share our commitment to excellence and open source values.
+                    </p>
+
+                    <div className="flex flex-wrap align-items-center gap-6">
+                        <div className="flex flex-column align-items-center gap-3">
+                            <a href="https://ksmpartners.com/" target="_blank" rel="noopener noreferrer" className="bg-white border-round p-3">
+                                <img src="https://primefaces.org/cdn/primereact/images/support/KSM-Logo.svg" alt="KSM logo" width="100" />
+                            </a>
+                            <a
+                                href="https://ksmpartners.com/contact-us/"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="inline-block bg-primary rounded-border py-2 px-3 border-round transition-all duration-300 text-primary-contrast font-semibold text-lg leading-none"
+                            >
+                                Get a Quote
+                            </a>
+                        </div>
+                        <div className="flex flex-column align-items-center gap-3">
+                            <a href="https://virtua.tech/" target="_blank" rel="noopener noreferrer" style={{ height: '106.5px' }} className="flex align-items-center">
+                                <svg width="153" height="48" viewBox="0 0 191 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M16.13 43.599L0 0H9.686L22.197 33.73L34.322 0H40.831L25.2 43.599H16.131H16.13Z" fill="var(--primary-color)" />
+                                    <path d="M47.222 5.803V0H53.025V5.803H47.222ZM47.222 43.599V11.606H53.025V43.598L47.222 43.599Z" fill="var(--primary-color)" />
+                                    <path
+                                        d="M64.662 43.599V11.606H70.465V17.588C71.565 15.447 72.994 13.792 74.752 12.624C76.51 11.455 78.419 10.871 80.481 10.871C81.07 10.871 81.689 10.92 82.337 11.018V16.438C81.355 16.104 80.471 15.937 79.686 15.937C77.86 15.937 76.176 16.483 74.634 17.574C73.092 18.665 71.702 20.302 70.465 22.484V43.599H64.662Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                    <path
+                                        d="M103.606 43.599C101.819 44.09 100.267 44.336 98.952 44.336C96.085 44.336 93.807 43.506 92.118 41.847C90.429 40.187 89.584 37.826 89.584 34.762V15.967H85.578V11.607H89.584V5.804L95.388 5.245V11.608H103.754V15.968H95.388V33.702C95.388 35.941 95.819 37.546 96.683 38.519C97.547 39.491 98.922 39.977 100.807 39.977C101.573 39.977 102.506 39.85 103.606 39.594V43.599Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                    <path
+                                        d="M131.915 43.599V37.589C130.423 39.75 128.704 41.414 126.76 42.583C124.815 43.752 122.793 44.336 120.691 44.336C118.001 44.336 115.806 43.477 114.107 41.758C112.409 40.039 111.559 37.649 111.559 34.585V11.606H117.362V32.698C117.362 34.918 117.558 36.381 117.951 37.088C118.344 37.795 118.893 38.345 119.6 38.738C120.307 39.131 121.073 39.327 121.898 39.327C123.312 39.327 124.849 38.885 126.508 38.001C128.168 37.117 129.97 35.232 131.913 32.345V11.606H137.716V43.598H131.913L131.915 43.599Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                    <path
+                                        d="M166.117 39.534C164.366 41.124 162.638 42.323 160.936 43.128C159.234 43.933 157.566 44.336 155.934 44.336C153.644 44.336 151.515 43.589 149.543 42.097C147.572 40.604 146.586 38.424 146.586 35.557C146.586 32.415 147.961 29.817 150.71 27.766C153.46 25.713 157.852 24.687 163.889 24.687H165.264V20.816C165.264 19.28 165.054 18.162 164.635 17.462C164.216 16.763 163.561 16.216 162.673 15.822C161.784 15.429 160.681 15.231 159.363 15.231C156.307 15.231 152.971 16.174 149.357 18.06V13.258C153.314 11.667 157.041 10.872 160.54 10.872C162.449 10.872 164.203 11.172 165.804 11.771C167.405 12.371 168.682 13.314 169.637 14.601C170.591 15.889 171.069 17.958 171.069 20.808V35.316C171.069 36.928 171.196 38.015 171.451 38.574C171.706 39.134 172.065 39.563 172.527 39.858C172.988 40.152 173.524 40.3 174.132 40.3C174.387 40.3 174.761 40.26 175.252 40.182L175.665 43.393C174.349 44.021 172.896 44.335 171.305 44.335C170.245 44.335 169.223 43.991 168.241 43.304C167.259 42.617 166.552 41.36 166.12 39.534H166.117ZM165.263 36.381V28.103L163.368 28.044C160.26 28.044 157.653 28.634 155.548 29.812C153.443 30.991 152.39 32.591 152.39 34.614C152.39 36.008 152.907 37.187 153.939 38.149C154.972 39.111 156.18 39.592 157.563 39.592C158.807 39.592 160.07 39.322 161.353 38.782C162.637 38.242 163.939 37.442 165.263 36.381Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                    <path
+                                        d="M179.205 13.378C178.801 13.496 178.482 13.555 178.249 13.555C177.694 13.555 177.265 13.476 176.961 13.32C176.655 13.164 176.428 12.951 176.274 12.682C176.121 12.412 176.045 12.018 176.045 11.495V8.186H175.341V7.127H176.045V6.067L177.74 5.872V7.126H179.085V8.185H177.74V11.266C177.74 11.72 177.819 12.026 177.979 12.183C178.139 12.341 178.374 12.42 178.682 12.42C178.83 12.42 179.003 12.398 179.204 12.352V13.377L179.205 13.378Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                    <path
+                                        d="M180.716 13.412V7.126H182.342V8.312C182.555 7.93 182.837 7.613 183.183 7.361C183.53 7.11 183.955 6.984 184.46 6.984C184.765 6.984 185.029 7.03 185.255 7.124C185.481 7.217 185.68 7.364 185.854 7.565C186.028 7.765 186.139 8.014 186.188 8.312C186.502 7.838 186.819 7.498 187.141 7.292C187.463 7.087 187.854 6.984 188.316 6.984C188.827 6.984 189.241 7.133 189.56 7.433C189.877 7.732 190.036 8.216 190.036 8.884V13.412H188.412V9.434C188.412 8.965 188.336 8.661 188.186 8.523C188.036 8.386 187.867 8.317 187.68 8.317C187.426 8.317 187.173 8.408 186.924 8.593C186.674 8.777 186.43 9.052 186.189 9.419V13.412H184.564V9.439C184.564 8.974 184.49 8.67 184.343 8.529C184.195 8.387 184.02 8.317 183.814 8.317C183.567 8.317 183.318 8.408 183.072 8.59C182.827 8.773 182.583 9.048 182.342 9.419V13.412H180.716Z"
+                                        fill="var(--primary-color)"
+                                    />
+                                </svg>
+                            </a>
+                            <a
+                                href="https://virtua.tech/contact"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="inline-block bg-primary rounded-border py-2 px-3 border-round transition-all duration-300 text-primary-contrast font-semibold text-lg leading-none"
+                            >
+                                {' '}
+                                Get a Quote{' '}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div className="card m-0">
+                <div className="text-2xl font-semibold mb-5">Frequently Asked Questions</div>
+                <div className="flex flex-column md:flex-row text-lg gap-5">
+                    <div className="flex-1 flex flex-column gap-5">
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">How many issue tracker accounts do we get?</div>
+                            <p className="m-0 line-height-3">We provide at most 5 accounts per organization.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">What is the duration of the service?</div>
+                            <p className="m-0 line-height-3">Service ends either when all support hours are used or after 1 year.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">What happens if we extend after 1 year and we have unused hours?</div>
+                            <p className="m-0 line-height-3">Unused hours expire and are not transferred to the new term.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">What are hours used for?</div>
+                            <p className="m-0 line-height-3">Hours are utilized when creating tickets, filing defects, requesting enhancements, POC implementations of a use case and questions.</p>
+                        </div>
+                    </div>
+                    <div className="flex-1 flex flex-column gap-5">
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">Are the changes delivered with a custom build?</div>
+                            <p className="m-0 line-height-3">No, changes become part of the PrimeReact core and pushed to the public npm package on next update.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">Who provides the support service?</div>
+                            <p className="m-0 line-height-3">Support service is provided by the PrimeReact team at PrimeTek.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">Is there a minimum hour requirement?</div>
+                            <p className="m-0 line-height-3">At least 25 hours are required to initiate the service.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">What happens if the issue takes longer or shorter than the approved estimate?</div>
+                            <p className="m-0 line-height-3">The confirmed estimate is still used even if it takes longer to resolve the issue.</p>
+                        </div>
+                    </div>
+                    <div className="flex-1 flex flex-column gap-5">
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">Can we request new features and enhancements?</div>
+                            <p className="m-0 line-height-3">Yes, initially the request needs to be approved by PrimeTek based on project roadmap fit. As a result, not all requests may be accepted.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">What are the payment terms?</div>
+                            <p className="m-0 line-height-3">Payment in advance is required to initiate the service.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">What payment methods are available?</div>
+                            <p className="m-0 line-height-3">Credit card and bank wire transfers are the available options.</p>
+                        </div>
+                        <div>
+                            <div className="line-height-3 mb-2 font-semibold">We are a reseller, can we purchase this support for our client?</div>
+                            <p className="m-0 line-height-3">That is possible, the service will be provided to your client even if you are the contact in purchase process.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SupportPage;
diff --git a/pages/tabmenu/index.js b/pages/tabmenu/index.js
new file mode 100644
index 0000000000..fedcd9258f
--- /dev/null
+++ b/pages/tabmenu/index.js
@@ -0,0 +1,99 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/tabmenu/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/tabmenu/basicdoc';
+import { CommandDoc } from '@/components/doc/tabmenu/commanddoc';
+import { ControlledDoc } from '@/components/doc/tabmenu/controlleddoc';
+import { ImportDoc } from '@/components/doc/tabmenu/importdoc';
+import { Wireframe } from '@/components/doc/tabmenu/pt/wireframe';
+import { RouterDoc } from '@/components/doc/tabmenu/routerdoc';
+import { TemplateDoc } from '@/components/doc/tabmenu/templatedoc';
+import { StyledDoc } from '@/components/doc/tabmenu/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/tabmenu/theming/tailwinddoc';
+
+const TabMenuDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'command',
+            label: 'Command',
+            component: CommandDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tabmenu.options',
+            label: 'TabMenu PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React TabMenu Component"
+            header="TabMenu"
+            description="TabMenu is a navigation component that displays menu items as tab headers."
+            componentDocs={docs}
+            apiDocs={['TabMenu', 'MenuItem']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default TabMenuDemo;
diff --git a/pages/tabview/index.js b/pages/tabview/index.js
new file mode 100644
index 0000000000..81ccd49b21
--- /dev/null
+++ b/pages/tabview/index.js
@@ -0,0 +1,118 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/tabview/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/tabview/basicdoc';
+import { ClosableDoc } from '@/components/doc/tabview/closabledoc';
+import { ControlledDoc } from '@/components/doc/tabview/controlleddoc';
+import { DisabledDoc } from '@/components/doc/tabview/disableddoc';
+import { HeaderIconDoc } from '@/components/doc/tabview/headericondoc';
+import { ImportDoc } from '@/components/doc/tabview/importdoc';
+import { Wireframe } from '@/components/doc/tabview/pt/wireframe';
+import { ScrollableDoc } from '@/components/doc/tabview/scrollabledoc';
+import { TemplateDoc } from '@/components/doc/tabview/templatedoc';
+import { StyledDoc } from '@/components/doc/tabview/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/tabview/theming/tailwinddoc';
+
+const TabViewDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'scrollable',
+            label: 'Scrollable',
+            component: ScrollableDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'headericon',
+            label: 'Header Icon',
+            component: HeaderIconDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'closable',
+            label: 'Closable',
+            component: ClosableDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tabview.options',
+            label: 'TabView PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.tabpanel.options',
+            label: 'TabPanel PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Tabs Component"
+            header="TabView"
+            description="TabView is a container component to group content with tabs."
+            componentDocs={docs}
+            apiDocs={['TabView', 'TabPanel']}
+            ptDocs={ptDocs}
+            ptDescription=""
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default TabViewDemo;
diff --git a/pages/tag/index.js b/pages/tag/index.js
new file mode 100644
index 0000000000..80365487b1
--- /dev/null
+++ b/pages/tag/index.js
@@ -0,0 +1,90 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/tag/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/tag/basicdoc';
+import { IconDoc } from '@/components/doc/tag/icondoc';
+import { ImportDoc } from '@/components/doc/tag/importdoc';
+import { PillDoc } from '@/components/doc/tag/pilldoc';
+import { Wireframe } from '@/components/doc/tag/pt/wireframe';
+import { SeverityDoc } from '@/components/doc/tag/severitydoc';
+import { TemplateDoc } from '@/components/doc/tag/templatedoc';
+import { StyledDoc } from '@/components/doc/tag/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/tag/theming/tailwinddoc';
+
+const TerminalDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'pill',
+            label: 'Pill',
+            component: PillDoc
+        },
+        {
+            id: 'icons',
+            label: 'Icon',
+            component: IconDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tag.options',
+            label: 'Tag PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Tag Component" header="Tag" description="Tag component is used to categorize content." componentDocs={docs} apiDocs={['Tag']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default TerminalDemo;
diff --git a/pages/tailwind/index.js b/pages/tailwind/index.js
new file mode 100644
index 0000000000..6ee17d4ce5
--- /dev/null
+++ b/pages/tailwind/index.js
@@ -0,0 +1,40 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { CSSLayerDoc } from '@/components/doc/tailwind/csslayerdoc';
+import { ExampleDoc } from '@/components/doc/tailwind/unstyledmode/exampledoc';
+import { SetupDoc } from '@/components/doc/tailwind/unstyledmode/setupdoc';
+
+const TailwindDemo = () => {
+    const docs = [
+        {
+            id: 'csslayer',
+            label: 'CSS Layer',
+            component: CSSLayerDoc
+        },
+        {
+            id: 'unstyledmode',
+            label: 'Unstyled Mode',
+            description:
+                'In unstyled mode, the exclusive Tailwind integration of PrimeReact is a great choice for developers who want the flexibility of Tailwind with the convenience of a UI Component library. Tailwind is a perfect match for the unstyled mode of PrimeReact to implement design systems. A built-in Tailwind theme as a pass through preset based on PrimeOne Design is even available to get started in no time. In upcoming iterations, a preset gallery will be available to share implementations developed by the PrimeReact community.',
+            children: [
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        }
+    ];
+
+    const description = `
+    Tailwind CSS is a popular utility first CSS library that fits perfectly to the unstyled mode to skin the entire UI suite with a design system of your choice.
+    `;
+
+    return <DocComponent title="Tailwind - PrimeReact" header="Tailwind CSS" description={description} componentDocs={docs} hideTabMenu />;
+};
+
+export default TailwindDemo;
diff --git a/pages/team/index.js b/pages/team/index.js
new file mode 100644
index 0000000000..7dfde58ee6
--- /dev/null
+++ b/pages/team/index.js
@@ -0,0 +1,88 @@
+const TemplatesPage = () => {
+    return (
+        <div>
+            <div className="doc-intro">
+                <h1>Meet the Team</h1>
+                <p>
+                    <a href="https://www.primetek.com.tr/" className="text-primary hover:underline font-medium">
+                        PrimeTek
+                    </a>{' '}
+                    is a world renowned vendor of popular UI Component suites including{' '}
+                    <a href="https://primefaces.org/" className="text-primary hover:underline font-medium">
+                        PrimeFaces
+                    </a>
+                    ,{' '}
+                    <a href="https://primeng.org/" className="text-primary hover:underline font-medium">
+                        PrimeNG
+                    </a>
+                    ,{' '}
+                    <a href="https://primereact.org/" className="text-primary hover:underline font-medium">
+                        PrimeReact
+                    </a>{' '}
+                    and{' '}
+                    <a href="https://primevue.org/" className="text-primary hover:underline font-medium">
+                        PrimeVue
+                    </a>
+                    . All the members in our team are full time employees of PrimeTek who share the same passion and vision for open source to create awesome UI libraries.
+                </p>
+            </div>
+
+            <div className="card p-7">
+                <div className="flex flex-wrap gap-7">
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/cagatay.jpg" className="border-circle mb-4" alt="Cagatay Civici" />
+                        <span className="mb-2 text-xl font-bold">Çağatay Çivici</span>
+                        <span>Founder</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/mert.jpg" className="border-circle mb-4" alt="Mert Sincan" />
+                        <span className="mb-2 text-xl font-bold">Mert Sincan</span>
+                        <span>CTO</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/onur.jpg" className="border-circle mb-4" alt="Onur Şentüre" />
+                        <span className="mb-2 text-xl font-bold">Onur Şentüre</span>
+                        <span>Design Lead</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/dilara.jpg" className="border-circle mb-4" alt="Dilara Can" />
+                        <span className="mb-2 text-xl font-bold">Dilara Güngenci</span>
+                        <span>Business Administration</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/cetin.jpg" className="border-circle mb-4" alt="Çetin Çakıroğlu" />
+                        <span className="mb-2 text-xl font-bold">Çetin Çakıroğlu</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/tugce.jpg" className="border-circle mb-4" alt="Tuğçe Küçükoğlu" />
+                        <span className="mb-2 text-xl font-bold">Tuğçe Küçükoğlu</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/atakan.jpg" className="border-circle mb-4" alt="Atakan Tepe" />
+                        <span className="mb-2 text-xl font-bold">Atakan Tepe</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/umit.jpg" className="border-circle mb-4" alt="Ümit Çelik" />
+                        <span className="mb-2 text-xl font-bold">Ümit Çelik</span>
+                        <span>UI/UX Designer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/mehmet.jpg" className="border-circle mb-4" alt="Mehmet Çetin" />
+                        <span className="mb-2 text-xl font-bold">Mehmet Çetin</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                    <div className="flex flex-column align-items-center flex-auto">
+                        <img src="https://primefaces.org/cdn/primereact/images/team/taner.jpg" className="border-circle mb-4" alt="Taner Engin" />
+                        <span className="mb-2 text-xl font-bold">Taner Engin</span>
+                        <span>Front-End Developer</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TemplatesPage;
diff --git a/pages/templates/apollo/ApolloLogo.js b/pages/templates/apollo/ApolloLogo.js
new file mode 100644
index 0000000000..67f8ffccb0
--- /dev/null
+++ b/pages/templates/apollo/ApolloLogo.js
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M20.0055 0L0 39.8951H6.7486L20.0064 11.5771L32.9975 39.8951H40.0134L20.0055 0Z" fill="var(--surface-0)" />
+        <path d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" fill="var(--surface-0)" />
+        <path d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" fill="var(--surface-0)" />
+        <path d="M78.0429 27.6582H66.3425L63.2979 34.2844H58.855L72.3786 5.28833L85.4243 34.2844H80.9104L78.0429 27.6582ZM76.3613 23.7886L72.3078 14.512L68.0595 23.7886H76.3613Z" fill="var(--surface-0)" />
+        <path
+            d="M100.155 23.2053V34.2843H96.0303V7.0022H100.703C102.993 7.0022 104.721 7.16123 105.89 7.47928C107.07 7.79734 108.108 8.39811 109.005 9.2816C110.575 10.813 111.359 12.7449 111.359 15.0773C111.359 17.5746 110.521 19.5536 108.846 21.0143C107.17 22.4751 104.91 23.2053 102.066 23.2053H100.155ZM100.155 19.3887H101.695C105.483 19.3887 107.377 17.9339 107.377 15.0243C107.377 12.2089 105.423 10.8012 101.517 10.8012H100.155V19.3887Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M121.418 20.5197C121.418 16.6795 122.829 13.3811 125.649 10.6246C128.458 7.86811 131.833 6.48987 135.774 6.48987C139.668 6.48987 143.008 7.8799 145.793 10.6599C148.59 13.44 149.988 16.7796 149.988 20.6788C149.988 24.6013 148.584 27.9292 145.775 30.6622C142.955 33.4069 139.55 34.7792 135.562 34.7792C132.033 34.7792 128.865 33.5601 126.056 31.1216C122.964 28.4239 121.418 24.89 121.418 20.5197ZM125.578 20.5727C125.578 23.5882 126.593 26.0681 128.623 28.0117C130.641 29.9554 132.972 30.9271 135.615 30.9271C138.482 30.9271 140.902 29.9377 142.872 27.9586C144.843 25.9561 145.828 23.5176 145.828 20.6433C145.828 17.7337 144.855 15.2953 142.908 13.3281C140.972 11.3491 138.577 10.3596 135.721 10.3596C132.877 10.3596 130.475 11.3491 128.517 13.3281C126.558 15.2835 125.578 17.6984 125.578 20.5727Z"
+            fill="var(--surface-0)"
+        />
+        <path d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" fill="var(--surface-0)" />
+        <path d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" fill="var(--surface-0)" />
+        <path
+            d="M206.34 20.5197C206.34 16.6795 207.75 13.3811 210.57 10.6246C213.379 7.86811 216.754 6.48987 220.696 6.48987C224.59 6.48987 227.929 7.8799 230.715 10.6599C233.512 13.44 234.911 16.7796 234.911 20.6788C234.911 24.6013 233.506 27.9292 230.698 30.6622C227.876 33.4069 224.472 34.7792 220.484 34.7792C216.954 34.7792 213.787 33.5601 210.979 31.1216C207.886 28.4239 206.34 24.89 206.34 20.5197ZM210.5 20.5727C210.5 23.5882 211.515 26.0681 213.545 28.0117C215.564 29.9554 217.893 30.9271 220.536 30.9271C223.403 30.9271 225.823 29.9377 227.794 27.9586C229.765 25.9561 230.751 23.5176 230.751 20.6433C230.751 17.7337 229.776 15.2953 227.83 13.3281C225.893 11.3491 223.499 10.3596 220.643 10.3596C217.8 10.3596 215.398 11.3491 213.438 13.3281C211.48 15.2835 210.5 17.6984 210.5 20.5727Z"
+            fill="var(--surface-0)"
+        />
+    </svg>
+);
diff --git a/pages/templates/apollo/index.js b/pages/templates/apollo/index.js
new file mode 100644
index 0000000000..40c2548573
--- /dev/null
+++ b/pages/templates/apollo/index.js
@@ -0,0 +1,234 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import ApolloLogo from './ApolloLogo';
+
+const apolloFeatures2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Apollo is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-responsive.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Top Notch Quality',
+        description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-quality.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-quality-dark.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Apollo ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Apollo uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/zQOW0XBXdCTqODzEOqwBtt/Preview-%7C-Apollo-2022?node-id=335%3A21768&t=urYI89V3PLNAZEJG-1/">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the
+                Apollo Figma file as they are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-figma.png'
+    }
+];
+
+const apolloFeatures1Data = [
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features1-feature1.png',
+        title: 'Ready to Use Applications',
+        description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
+    },
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features1-feature2.png',
+        title: 'E-Commerce Pages',
+        description: 'Apollo offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
+    },
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features1-feature3.png',
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light / Dark / Dim Modes',
+        description: 'Apollo has 3 display modes to choose from; Light, Dim and Dark.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Apollo offers 24 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Reveal.png'
+            },
+            {
+                id: 4,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Horizontal.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Slim+.png'
+            },
+            {
+                id: 7,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/Drawer.png'
+            }
+        ]
+    },
+    {
+        id: 4,
+        title: 'Menu Themes',
+        description: 'Stunning theming for the main menu with 3 alternatives; Color Scheme, Primary Color and Transparent.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-menu-themes.png'
+    }
+];
+
+const license = {
+    documentLink: 'https://apollo.primereact.org/documentation/',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+const templateHeroData = {
+    logo: <ApolloLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-hero-dashboard2.png',
+    description: 'Application template for React based on the popular NextJS framework with light-dim-dark modes, four menu layouts, various menu themes, sample apps, ready to use template pages and 24 PrimeReact themes.',
+    liveHref: 'https://apollo.primereact.org/',
+    docHref: 'https://apollo.primereact.org/documentation',
+    storeHref: 'https://primeui.store/templates/react/apollo'
+};
+
+const ApolloSeparator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M22.3576 34.2499L19.6471 28.2974L17.2754 34.2499H22.3576Z" fill="var(--surface-900)" />
+                    <path d="M27.8454 28.2974L30.5559 34.2499H25.4736L27.8454 28.2974Z" fill="var(--surface-900)" />
+                    <path d="M24.0043 10.25L12.001 34.187H16.0501L24.0048 17.1962L31.7995 34.187H36.009L24.0043 10.25Z" fill="var(--surface-900)" />
+                </svg>
+            }
+        />
+    );
+};
+
+const ApolloPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="apollo template">
+            <TemplateHero {...templateHeroData} />
+            <ApolloSeparator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-youtube-screen.png'} />
+                <ApolloSeparator />
+            </div>
+            <TemplateLicense license={license} />
+            <ApolloSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <ApolloSeparator />
+            <TemplateFeatures featuresData={apolloFeatures1Data} displayType="horizontal" />
+            <ApolloSeparator />
+            <TemplateConfiguration title="React based on Next.JS" description="Apollo is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <ApolloSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <ApolloSeparator />
+            <TemplateFeatures featuresData={apolloFeatures2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default ApolloPage;
diff --git a/pages/templates/atlantis/AtlantisLogo.js b/pages/templates/atlantis/AtlantisLogo.js
new file mode 100644
index 0000000000..3bcb20c368
--- /dev/null
+++ b/pages/templates/atlantis/AtlantisLogo.js
@@ -0,0 +1,37 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M69.3651 24.0154H61.2671L59.6707 27.7636H56.5703L63.8585 11.5677H66.82L74.1313 27.7636H70.9847L69.3651 24.0154ZM68.3702 21.6555L65.3161 14.5755L62.2852 21.6555H68.3702Z" fill="var(--surface-0)" />
+        <path
+            d="M83.2274 27.0927C82.8881 27.3703 82.4716 27.5785 81.978 27.7174C81.4998 27.8562 80.9908 27.9256 80.451 27.9256C79.0936 27.9256 78.0447 27.5708 77.3043 26.8613C76.5639 26.1518 76.1938 25.1183 76.1938 23.7609V17.8147H74.1577V15.501H76.1938V12.6783H79.0859V15.501H82.3945V17.8147H79.0859V23.6915C79.0859 24.2931 79.2324 24.7558 79.5255 25.0797C79.8186 25.3882 80.2427 25.5425 80.798 25.5425C81.4459 25.5425 81.9857 25.3728 82.4176 25.0335L83.2274 27.0927Z"
+            fill="var(--surface-0)"
+        />
+        <path d="M85.6065 10.596H88.4987V27.7636H85.6065V10.596Z" fill="var(--surface-0)" />
+        <path
+            d="M97.0145 15.2696C98.8346 15.2696 100.223 15.7092 101.179 16.5885C102.151 17.4522 102.637 18.7633 102.637 20.5217V27.7636H99.9067V26.2597C99.5519 26.7996 99.0429 27.2161 98.3796 27.5091C97.7318 27.7868 96.9451 27.9256 96.0196 27.9256C95.0942 27.9256 94.2844 27.7713 93.5903 27.4628C92.8961 27.1389 92.3563 26.6993 91.9707 26.144C91.6005 25.5733 91.4154 24.9332 91.4154 24.2237C91.4154 23.1131 91.8241 22.2262 92.6416 21.5629C93.4746 20.8842 94.778 20.5449 96.5518 20.5449H99.7447V20.3598C99.7447 19.496 99.4825 18.8327 98.958 18.37C98.449 17.9073 97.6855 17.6759 96.6675 17.6759C95.9734 17.6759 95.287 17.7839 94.6083 17.9998C93.945 18.2158 93.382 18.5165 92.9193 18.9022L91.7856 16.7967C92.4334 16.3031 93.2123 15.9252 94.1224 15.663C95.0325 15.4008 95.9965 15.2696 97.0145 15.2696ZM96.6212 25.8201C97.3462 25.8201 97.9863 25.6582 98.5416 25.3342C99.1123 24.9949 99.5133 24.5167 99.7447 23.8997V22.4653H96.76C95.0942 22.4653 94.2612 23.0128 94.2612 24.108C94.2612 24.6324 94.4695 25.0489 94.8859 25.3574C95.3024 25.6659 95.8808 25.8201 96.6212 25.8201Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M113.359 15.2696C114.917 15.2696 116.166 15.7247 117.107 16.6347C118.048 17.5448 118.519 18.8944 118.519 20.6837V27.7636H115.626V21.0539C115.626 19.9742 115.372 19.1644 114.863 18.6245C114.354 18.0692 113.629 17.7916 112.688 17.7916C111.624 17.7916 110.783 18.1155 110.166 18.7633C109.549 19.3957 109.241 20.3135 109.241 21.5166V27.7636H106.349V15.4085H109.102V17.0049C109.58 16.4342 110.182 16.0023 110.907 15.7092C111.631 15.4162 112.449 15.2696 113.359 15.2696Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M129.614 27.0927C129.275 27.3703 128.859 27.5785 128.365 27.7174C127.887 27.8562 127.378 27.9256 126.838 27.9256C125.481 27.9256 124.432 27.5708 123.691 26.8613C122.951 26.1518 122.581 25.1183 122.581 23.7609V17.8147H120.545V15.501H122.581V12.6783H125.473V15.501H128.781V17.8147H125.473V23.6915C125.473 24.2931 125.619 24.7558 125.912 25.0797C126.206 25.3882 126.63 25.5425 127.185 25.5425C127.833 25.5425 128.373 25.3728 128.805 25.0335L129.614 27.0927Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M131.994 15.4085H134.886V27.7636H131.994V15.4085ZM133.451 13.3724C132.927 13.3724 132.487 13.2104 132.132 12.8865C131.778 12.5472 131.6 12.1307 131.6 11.6371C131.6 11.1435 131.778 10.7348 132.132 10.4109C132.487 10.0715 132.927 9.90186 133.451 9.90186C133.976 9.90186 134.415 10.0638 134.77 10.3877C135.125 10.6962 135.302 11.0896 135.302 11.5677C135.302 12.0767 135.125 12.5086 134.77 12.8634C134.431 13.2027 133.991 13.3724 133.451 13.3724Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M142.499 27.9256C141.497 27.9256 140.517 27.7945 139.561 27.5323C138.604 27.27 137.841 26.9384 137.27 26.5374L138.381 24.3394C138.936 24.7095 139.599 25.0103 140.371 25.2417C141.157 25.4576 141.928 25.5656 142.684 25.5656C144.412 25.5656 145.276 25.1106 145.276 24.2005C145.276 23.7686 145.052 23.4679 144.605 23.2982C144.173 23.1285 143.471 22.9666 142.499 22.8123C141.481 22.6581 140.648 22.4807 140 22.2802C139.368 22.0796 138.813 21.7326 138.335 21.239C137.872 20.73 137.64 20.0282 137.64 19.1335C137.64 17.9612 138.126 17.0281 139.098 16.3339C140.085 15.6244 141.412 15.2696 143.078 15.2696C143.926 15.2696 144.774 15.3699 145.623 15.5704C146.471 15.7555 147.165 16.01 147.705 16.3339L146.594 18.532C145.546 17.915 144.366 17.6065 143.054 17.6065C142.206 17.6065 141.558 17.7376 141.111 17.9998C140.679 18.2466 140.463 18.5782 140.463 18.9947C140.463 19.4574 140.694 19.7891 141.157 19.9896C141.635 20.1747 142.368 20.3521 143.355 20.5217C144.342 20.676 145.152 20.8534 145.785 21.0539C146.417 21.2544 146.957 21.5938 147.404 22.0719C147.867 22.5501 148.098 23.2288 148.098 24.108C148.098 25.2648 147.597 26.1903 146.594 26.8844C145.592 27.5785 144.227 27.9256 142.499 27.9256Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.5733 7.44072C12.9176 19.8152 31.0475 19.8063 32.3873 7.44072C27.7447 7.01325 23.8187 4.07436 21.9803 0C20.142 4.07436 16.216 7.01325 11.5733 7.44072ZM20.814 19.0181C20.4089 23.4977 16.8435 27.4073 12.4234 28.2266C6.44984 29.469 0.529697 25.0028 0 19.0181C4.64264 18.5907 8.56863 15.6518 10.407 11.5774C12.232 15.683 16.3316 18.6397 20.814 19.0181ZM32.3873 30.5956C31.8532 35.8677 27.3886 40 21.9803 40C16.5721 40 12.1075 35.8677 11.5733 30.5956C16.0557 30.2171 20.1553 27.2604 21.9803 23.1548C23.8053 27.2604 27.9049 30.2171 32.3873 30.5956ZM43.9603 19.0181C43.4261 24.6198 38.3028 28.9346 32.6007 28.378C27.74 28.0085 23.5736 23.8762 23.1463 19.0181C27.6287 18.6397 31.7283 15.683 33.5533 11.5774C35.3917 15.6518 39.3177 18.5907 43.9603 19.0181Z"
+            fill="var(--surface-0)"
+        />
+    </svg>
+);
diff --git a/pages/templates/atlantis/index.js b/pages/templates/atlantis/index.js
new file mode 100644
index 0000000000..44a6e915a9
--- /dev/null
+++ b/pages/templates/atlantis/index.js
@@ -0,0 +1,211 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import AtlantisLogo from './AtlantisLogo';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Full SaSS Support',
+        description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-features2-ready.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Atlantis ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Atlantis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/two0OGwOwHfq0sdjeK34l0/Preview-%7C-Atlantis-2022?node-id=15%3A1427&t=2lNJ5EzW0xuvQWdm-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the
+                Atlantis Figma file as they are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light and Dark Modes',
+        description: 'The stunning dark and light modes will impress your users.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Atlantis offers 16 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Reveal.png'
+            },
+            {
+                id: 4,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Horizontal.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Slim+.png'
+            },
+            {
+                id: 7,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/Drawer.png'
+            }
+        ]
+    }
+];
+
+const license = {
+    documentLink: 'https://atlantis.primereact.org/documentation',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const templateHeroData = {
+    logo: <AtlantisLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-hero-dashboard2.png',
+    description: 'Prepare to be amazed by the remastered Atlantis for PrimeReact featuring a new gorgeous dark mode for the entire layout, 7 menu modes, reusable css widgets, utilities, modern icons and many more.',
+    liveHref: 'https://atlantis.primereact.org/',
+    docHref: 'https://atlantis.primereact.org/documentation',
+    storeHref: 'https://primeui.store/templates/react/atlantis'
+};
+
+const AtlantisSeperator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M17.736 16.7144C18.5426 24.1391 29.4206 24.1338 30.2244 16.7144C27.4389 16.4579 25.0833 14.6946 23.9802 12.25C22.8772 14.6946 20.5216 16.4579 17.736 16.7144ZM23.2804 23.6609C23.0374 26.3486 20.8981 28.6944 18.2461 29.186C14.6619 29.9314 11.1098 27.2517 10.792 23.6609C13.5776 23.4044 15.9332 21.6411 17.0362 19.1965C18.1312 21.6598 20.591 23.4338 23.2804 23.6609ZM30.2244 30.6073C29.904 33.7706 27.2252 36.25 23.9802 36.25C20.7353 36.25 18.0565 33.7706 17.736 30.6073C20.4255 30.3802 22.8852 28.6062 23.9802 26.1429C25.0752 28.6062 27.535 30.3802 30.2244 30.6073ZM37.1683 23.6609C36.8478 27.0219 33.7737 29.6108 30.3525 29.2768C27.436 29.0551 24.9362 26.5757 24.6798 23.6609C27.3693 23.4338 29.829 21.6598 30.924 19.1965C32.0271 21.6411 34.3827 23.4044 37.1683 23.6609Z"
+                        fill="var(--surface-900)"
+                    />
+                </svg>
+            }
+        />
+    );
+};
+
+const AtlantisPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="atlantis template">
+            <TemplateHero {...templateHeroData} />
+            <AtlantisSeperator />
+            <TemplateLicense license={license} />
+            <AtlantisSeperator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/atlantis/atlantis-youtube-screen.png'} />
+                <AtlantisSeperator />
+            </div>
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <AtlantisSeperator />
+            <TemplateConfiguration title="React based on Next.JS" description="Atlantis is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <AtlantisSeperator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <AtlantisSeperator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default AtlantisPage;
diff --git a/pages/templates/avalon/AvalonLogo.js b/pages/templates/avalon/AvalonLogo.js
new file mode 100644
index 0000000000..3636145f80
--- /dev/null
+++ b/pages/templates/avalon/AvalonLogo.js
@@ -0,0 +1,14 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="125" height="40" viewBox="0 0 125 40" fill="none">
+        <path d="M6.33333 0.555555H14.6111L20.9444 39.4444H14.8333L13.7222 31.7222V31.8333H6.77778L5.66667 39.4444H0L6.33333 0.555555ZM13 26.5556L10.2778 7.33334H10.1667L7.5 26.5556H13Z" fill="var(--surface-0)" />
+        <path d="M20.7248 0.555555H26.8915L30.8915 30.7222H31.0026L35.0026 0.555555H40.6137L34.7248 39.4444H26.6137L20.7248 0.555555Z" fill="var(--surface-0)" />
+        <path d="M46.6978 0.555555H54.9756L61.3091 39.4444H55.1978L54.0867 31.7222V31.8333H47.1423L46.0311 39.4444H40.3645L46.6978 0.555555ZM53.3645 26.5556L50.6422 7.33334H50.5311L47.8645 26.5556H53.3645Z" fill="var(--surface-0)" />
+        <path d="M64.2738 0.555555H70.3849V33.8889H80.4404V39.4444H64.2738V0.555555Z" fill="var(--surface-0)" />
+        <path
+            d="M91.9875 40C88.9875 40 86.691 39.1482 85.0986 37.4444C83.5059 35.7407 82.7097 33.3333 82.7097 30.2222V9.77779C82.7097 6.66667 83.5059 4.25925 85.0986 2.55556C86.691 0.851853 88.9875 0 91.9875 0C94.9875 0 97.2837 0.851853 98.8764 2.55556C100.469 4.25925 101.265 6.66667 101.265 9.77779V30.2222C101.265 33.3333 100.469 35.7407 98.8764 37.4444C97.2837 39.1482 94.9875 40 91.9875 40ZM91.9875 34.4444C94.0986 34.4444 95.1541 33.1667 95.1541 30.6111V9.3889C95.1541 6.83334 94.0986 5.55556 91.9875 5.55556C89.8764 5.55556 88.8208 6.83334 88.8208 9.3889V30.6111C88.8208 33.1667 89.8764 34.4444 91.9875 34.4444Z"
+            fill="var(--surface-0)"
+        />
+        <path d="M105.398 0.555555H113.065L119.009 23.8333H119.12V0.555555H124.565V39.4444H118.287L110.954 11.0556H110.842V39.4444H105.398V0.555555Z" fill="var(--surface-0)" />
+    </svg>
+);
diff --git a/pages/templates/avalon/AvalonSeparator.js b/pages/templates/avalon/AvalonSeparator.js
new file mode 100644
index 0000000000..caf7fecbcd
--- /dev/null
+++ b/pages/templates/avalon/AvalonSeparator.js
@@ -0,0 +1,1270 @@
+import React from 'react';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+
+const AvalonSeparator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clipPath="url(#clip0_1870_170886)">
+                        <path
+                            d="M28.916 7.00377C28.916 7.00377 29.339 6.48082 30.0761 6.22062C30.0761 6.22062 29.3778 6.3161 28.8371 6.74094C28.8371 6.74094 28.8839 6.90743 28.9161 7.00385L28.916 7.00377ZM34.3005 7.0304C34.3336 6.93438 34.3821 6.76828 34.3821 6.76828C33.8456 6.3382 33.1482 6.23573 33.1482 6.23573C33.8829 6.5033 34.3006 7.03031 34.3006 7.03031L34.3005 7.0304ZM31.9522 6.06707C31.882 6.06163 31.7646 6.05454 31.6216 6.05375C31.6206 6.05375 31.6198 6.05374 31.6188 6.05374C31.6178 6.05373 31.6169 6.05373 31.616 6.05372C31.4726 6.05318 31.3439 6.05897 31.2735 6.06379C31.2378 6.0662 31.2148 6.10046 31.228 6.13172L31.4144 6.57134C31.4224 6.59023 31.4418 6.60267 31.4636 6.60278L31.6099 6.6035L31.6105 6.60351L31.7568 6.60423C31.7786 6.60434 31.7982 6.59209 31.8063 6.57328L31.997 6.13552C32.0105 6.10439 31.988 6.07 31.9521 6.06715L31.9522 6.06707ZM34.5841 6.65033C34.4667 6.54022 33.8887 6.0648 32.5338 5.90194C32.5554 5.81854 32.5897 5.63086 32.5363 5.41696L32.5285 5.38547L32.4966 5.38164C32.4871 5.38051 32.3306 5.36314 32.155 5.43326C32.1612 5.40167 32.1682 5.36225 32.1742 5.3204C32.1964 5.16419 32.1913 5.06273 32.1589 5.01051C32.1467 4.99052 32.1305 4.97167 32.1111 4.95389C32.1159 4.94215 32.1225 4.91907 32.1367 4.86567C32.1486 4.82077 32.1661 4.75145 32.1817 4.6762C32.2371 4.40795 32.2132 4.33184 32.1905 4.29836C32.1773 4.27811 32.1597 4.259 32.1386 4.24138C32.1423 4.2278 32.1468 4.20997 32.1526 4.18639C32.1641 4.13982 32.1811 4.06808 32.1959 3.99033C32.2483 3.71631 32.225 3.6397 32.1993 3.60395C32.1861 3.58528 32.1693 3.56776 32.1494 3.55165C32.152 3.53957 32.1552 3.5249 32.1589 3.50707C32.169 3.45965 32.1835 3.38665 32.1958 3.3078C32.2391 3.02973 32.2135 2.95361 32.1868 2.91877C32.1728 2.90019 32.1551 2.88292 32.1341 2.86721C32.1366 2.85388 32.1397 2.83721 32.1436 2.81554C32.1521 2.7682 32.1643 2.69519 32.174 2.6164C32.2084 2.33879 32.1805 2.26366 32.1526 2.22966C32.1494 2.22572 32.146 2.22195 32.1425 2.21818C32.3234 2.1012 32.4181 1.9476 32.4668 1.8313C32.552 1.80111 32.6914 1.7057 32.6697 1.53384C32.6601 1.45763 32.6092 1.38781 32.5201 1.32672C32.5383 1.16064 32.4355 0.776242 32.184 0.717691C32.1411 0.707718 32.0945 0.710658 32.0446 0.726177C32.0167 0.685915 31.9786 0.641515 31.9371 0.601019C31.9883 0.560313 32.0107 0.499863 31.9983 0.430064C31.9748 0.299982 31.8277 0.160363 31.6444 0.157121C31.6444 0.157121 31.6429 0.157114 31.6421 0.15711C31.6413 0.157106 31.6405 0.157018 31.6397 0.157014C31.4564 0.15861 31.3078 0.296683 31.2834 0.426361C31.2703 0.496034 31.2921 0.556703 31.3429 0.597913C31.301 0.637996 31.2624 0.681933 31.2341 0.722001C31.1844 0.705989 31.1379 0.702589 31.0948 0.712136C30.8435 0.768035 30.7367 1.14956 30.7526 1.31648C30.6686 1.37329 30.6122 1.44199 30.6012 1.52327C30.5768 1.70183 30.7208 1.79906 30.8002 1.82548L30.8011 1.82273C30.8486 1.93958 30.9418 2.09403 31.1216 2.21279C31.1181 2.21645 31.1148 2.2201 31.1117 2.22384C31.0855 2.25524 31.0538 2.32841 31.0813 2.60107C31.089 2.67752 31.0993 2.7484 31.1065 2.79431C31.112 2.82896 31.1156 2.85108 31.1185 2.86578C31.0998 2.8802 31.0838 2.89588 31.0708 2.91267C31.0456 2.94475 31.0162 3.01901 31.0521 3.29063C31.0623 3.36684 31.0747 3.43722 31.0833 3.4829C31.0894 3.51454 31.0935 3.5355 31.0967 3.5502C31.0788 3.56496 31.0635 3.5809 31.0514 3.59785C31.0271 3.63077 31 3.70588 31.0443 3.97612C31.0568 4.05193 31.0713 4.1219 31.0814 4.16725C31.0898 4.20474 31.095 4.22721 31.0988 4.24166C31.0806 4.25742 31.0652 4.27444 31.0532 4.29232C31.03 4.32599 31.0052 4.40186 31.058 4.67064C31.0727 4.74604 31.0896 4.81553 31.1011 4.86055C31.1147 4.91401 31.1212 4.93714 31.1258 4.94893C31.1063 4.96643 31.09 4.98512 31.0777 5.00483C31.0446 5.05689 31.038 5.15779 31.0574 5.31321C31.0627 5.35553 31.0691 5.39527 31.0748 5.42691C30.9008 5.35615 30.7454 5.37181 30.7361 5.37285L30.7042 5.37636L30.6961 5.40777C30.6406 5.62113 30.673 5.80915 30.6938 5.89275C29.3372 6.04229 28.7546 6.51197 28.6362 6.62083C28.6092 6.64572 28.5992 6.68496 28.6108 6.72097L28.8001 7.30917C28.8084 7.3349 28.8306 7.35303 28.8567 7.35533C28.8584 7.35542 28.8601 7.35551 28.8618 7.35552C28.8857 7.35564 28.9079 7.34207 28.9194 7.3201C28.9502 7.2612 29.0905 7.04684 29.6025 6.76233C29.6253 6.74968 29.6485 6.73753 29.6721 6.72572L30.0057 6.88052C30.0429 6.89781 30.086 6.89886 30.124 6.88353C30.2823 6.8195 30.4406 6.78624 30.5456 6.7695C30.5786 6.76424 30.6111 6.78083 30.6267 6.81069L30.7991 7.14021C30.8122 7.1653 30.8309 7.18616 30.8532 7.20171L30.7809 21.8798C30.7679 24.5334 30.9541 26.0223 31.1128 26.804C31.2865 27.6601 31.4649 27.8833 31.4725 27.8924L31.5081 27.926L31.5392 27.8927C31.5468 27.8837 31.7275 27.6623 31.9096 26.8079C32.0759 26.0278 32.2768 24.5409 32.2899 21.8872L32.3616 7.20933C32.3839 7.19401 32.4028 7.17325 32.4163 7.14837L32.5919 6.82058C32.6078 6.79087 32.6406 6.77469 32.6734 6.78019C32.7783 6.79797 32.9363 6.83279 33.0939 6.89839C33.1318 6.91409 33.1748 6.91338 33.2122 6.89655L33.5473 6.74505C33.5709 6.75701 33.5939 6.76948 33.6165 6.78235C34.1256 7.07191 34.2639 7.28765 34.2941 7.34685C34.3055 7.36902 34.3275 7.38272 34.3514 7.38284C34.3531 7.38285 34.3548 7.38277 34.3565 7.3827C34.3826 7.38066 34.405 7.36275 34.4136 7.3371L34.6086 6.7508C34.6205 6.71499 34.611 6.67557 34.5842 6.65041L34.5841 6.65033ZM32.4534 5.47369C32.4927 5.66508 32.4563 5.83115 32.4397 5.8913C32.4211 5.88929 32.4021 5.88752 32.3834 5.88568C32.3915 5.84326 32.4149 5.70081 32.3878 5.61484C32.3878 5.61484 32.1602 5.61914 32.0502 5.86001C32.0484 5.85991 32.0466 5.85974 32.0449 5.85965C32.0421 5.81676 32.032 5.73754 31.9964 5.64502C32.1631 5.4851 32.3744 5.47188 32.4534 5.47352L32.4534 5.47369ZM31.3788 5.84909C31.3448 5.84984 31.3112 5.85068 31.278 5.85185C31.2891 5.75823 31.3447 5.508 31.6214 5.33744C31.8968 5.51114 31.9432 5.7628 31.9509 5.85509C31.8449 5.85057 31.7353 5.84769 31.6218 5.84704L31.6235 5.49019C31.449 5.59844 31.3936 5.78285 31.3788 5.84909ZM31.6478 5.24331L31.6369 5.23691L31.6067 5.23676L31.5958 5.24305C31.5752 5.25496 31.5557 5.26721 31.5372 5.27988C31.5539 5.24393 31.5883 5.17303 31.5409 5.17112C31.582 5.06255 31.7997 5.06363 31.7997 5.06363C31.6475 5.01616 31.3058 5.02448 31.2443 5.12686C31.2114 5.18167 31.2382 5.44641 31.2475 5.52854C31.2252 5.51066 31.2027 5.49453 31.18 5.4804C31.1576 5.38278 31.1161 5.1188 31.1563 5.05552C31.1997 4.98625 31.3504 4.907 31.5789 4.8967L31.6581 4.89709C31.8865 4.90965 32.0365 4.99039 32.0793 5.06042C32.1186 5.12368 32.0725 5.3883 32.0482 5.48662C32.0167 5.5059 31.9853 5.52868 31.9549 5.55539C31.8971 5.44858 31.8024 5.33475 31.6477 5.24322L31.6478 5.24331ZM32.4063 1.72231C32.3735 1.83168 32.3043 1.97356 32.1595 2.08996C32.335 1.90539 32.3009 1.62669 32.3009 1.62669C32.196 1.94383 31.9813 2.05071 31.8763 1.96177C31.7868 1.88608 31.8283 1.76091 31.8283 1.76091C31.8283 1.76091 31.3791 1.82968 31.3557 1.59557C31.3412 1.44977 31.4619 1.3969 31.56 1.37778C31.5863 1.37632 31.6117 1.3757 31.6356 1.37582L31.6356 1.36831C31.6356 1.36831 31.6361 1.36831 31.6363 1.36831L31.6363 1.37582C31.8469 1.37686 32.1609 1.43797 32.3522 1.5698C32.4017 1.60392 32.4234 1.66534 32.4063 1.72248L32.4063 1.72231ZM31.5397 3.2213C31.5397 3.20921 31.8357 3.15812 31.8357 3.15812C31.7204 3.12493 31.6114 3.09536 31.5513 3.09289C31.5924 2.98432 31.81 2.9854 31.81 2.9854C31.6579 2.93793 31.3162 2.94625 31.2547 3.04863C31.2189 3.10818 31.2537 3.41567 31.2598 3.46717C31.2318 3.47596 31.2054 3.48609 31.1813 3.49756C31.1709 3.44571 31.1548 3.35837 31.1432 3.26664C31.1116 3.02065 31.1405 2.97558 31.1443 2.97084C31.1941 2.90594 31.3521 2.84141 31.581 2.8533L31.6742 2.85384L31.6764 2.85385C31.8516 2.84655 31.9845 2.88341 32.0596 2.93058L32.0879 2.95082C32.0977 2.95921 32.1059 2.96759 32.1123 2.97613C32.1136 2.97781 32.1445 3.0215 32.1051 3.28157C32.0926 3.36393 32.0766 3.44435 32.0648 3.49951C31.9672 3.45332 31.8354 3.42722 31.6911 3.42876L31.5615 3.42812C31.5566 3.42801 31.5518 3.42807 31.5469 3.42796L31.5548 3.42667C31.5785 3.34036 31.6742 3.32732 31.8145 3.30633C31.71 3.27628 31.6067 3.23732 31.5397 3.22114L31.5397 3.2213ZM31.543 2.56715C31.5429 2.55506 31.8389 2.50397 31.8389 2.50397C31.7236 2.47078 31.6146 2.44121 31.5545 2.43875C31.5956 2.33017 31.8133 2.33125 31.8133 2.33125C31.6611 2.28378 31.3194 2.2921 31.2579 2.39449C31.225 2.44913 31.2516 2.71236 31.261 2.79532C31.2412 2.80165 31.2224 2.80856 31.2047 2.81623C31.196 2.76472 31.1822 2.67456 31.173 2.58017C31.1492 2.3333 31.1794 2.28907 31.1833 2.28451C31.2337 2.22278 31.401 2.16679 31.617 2.17896L31.6172 2.18079C31.6222 2.1804 31.6419 2.1805 31.6469 2.18094L31.6471 2.17911C31.8631 2.16916 32.0299 2.22671 32.08 2.28936C32.0834 2.29355 32.1129 2.33807 32.0824 2.59318C32.0721 2.67905 32.058 2.76306 32.0477 2.81815C31.9492 2.77546 31.8175 2.7537 31.6736 2.75966L31.5848 2.75922C31.5775 2.75885 31.5702 2.75856 31.5629 2.75836C31.593 2.68477 31.6854 2.67196 31.8177 2.65218C31.7132 2.62213 31.6099 2.58317 31.543 2.56699L31.543 2.56715ZM32.1628 0.809512C32.3319 0.848805 32.4242 1.12237 32.4286 1.27371C32.4007 1.2599 32.3422 0.995254 32.2321 0.978276C32.1493 0.965438 31.9813 1.09015 31.9375 1.13281C31.8615 1.12142 31.7843 1.1137 31.7091 1.11024C31.7409 1.07203 31.7922 1.01397 31.8527 0.958548C31.9788 0.843221 32.0859 0.791614 32.1628 0.809512ZM31.3751 0.443999C31.3922 0.352824 31.5056 0.252032 31.6415 0.251536C31.7773 0.253376 31.8898 0.355368 31.9059 0.446624C31.9131 0.486784 31.8988 0.516994 31.8638 0.536758C31.8016 0.488068 31.719 0.438108 31.6409 0.437388C31.5472 0.4119 31.5648 0.336577 31.6192 0.301059C31.6192 0.301059 31.334 0.358459 31.4164 0.534628C31.3815 0.514602 31.3675 0.484252 31.3752 0.444082L31.3751 0.443999ZM31.451 0.627226C31.5241 0.566526 31.593 0.531748 31.6401 0.531814C31.6871 0.532213 31.7557 0.567672 31.8282 0.629093C31.8764 0.669872 31.9232 0.719654 31.9565 0.764531C31.9037 0.793966 31.8478 0.835649 31.7889 0.88958C31.7249 0.948323 31.6715 1.00854 31.6379 1.04891C31.5744 0.908622 31.553 0.778968 31.6364 0.641407C31.5218 0.679379 31.4205 0.785904 31.3971 0.811814C31.3711 0.792417 31.3458 0.775608 31.3211 0.761471C31.3549 0.716843 31.4022 0.667693 31.4507 0.627309L31.451 0.627226ZM31.1148 0.804329C31.1919 0.787192 31.2984 0.839772 31.4234 0.956425C31.4832 1.01219 31.5337 1.0705 31.5652 1.10911C31.4923 1.11142 31.4144 1.11788 31.3356 1.12858C31.2911 1.08448 31.1228 0.949266 31.0406 0.959953C30.9181 0.975781 30.8733 1.25001 30.8446 1.26396C30.8511 1.11234 30.9461 0.841866 31.1148 0.804329ZM30.7648 1.70018C30.7246 1.66953 30.6826 1.61727 30.6936 1.53616C30.7056 1.44796 30.8233 1.36062 31.0166 1.29643C31.1963 1.23675 31.4263 1.2016 31.632 1.20246C32.0502 1.20536 32.5529 1.35533 32.5767 1.54547C32.5843 1.60565 32.5639 1.65494 32.5143 1.69615C32.511 1.69889 32.5077 1.70137 32.5044 1.70386C32.512 1.6214 32.4751 1.54005 32.4048 1.49157C32.1974 1.34865 31.8613 1.28234 31.6367 1.28123L31.6363 1.36247C31.6363 1.36247 31.6358 1.36247 31.6357 1.36247L31.6361 1.28122C31.4115 1.28011 31.0748 1.3431 30.866 1.48396C30.7937 1.53265 30.756 1.61588 30.7647 1.70009L30.7648 1.70018ZM30.8623 1.71467C30.8457 1.65728 30.8681 1.59616 30.918 1.56254C30.975 1.52412 31.0427 1.49209 31.1152 1.46584C30.9689 1.53435 30.9095 1.69055 30.9768 1.8427C31.0352 1.97488 31.1321 2.08789 31.1784 2.13758C30.9838 2.01199 30.899 1.84132 30.8624 1.71459L30.8623 1.71467ZM31.1267 3.65378C31.1745 3.58737 31.3303 3.51832 31.5603 3.52263L31.6912 3.52327C31.8658 3.52113 31.9972 3.56199 32.071 3.61132L32.107 3.64053C32.1131 3.64673 32.1187 3.65302 32.1231 3.65913C32.1263 3.66357 32.1529 3.70966 32.1059 3.96118C32.0896 4.04861 32.0692 4.13393 32.0554 4.188C31.9597 4.13981 31.8299 4.11022 31.6865 4.10709L31.5577 4.10646C31.5577 4.10646 31.5561 4.10653 31.5554 4.10645C31.5845 4.02918 31.6773 4.01612 31.8111 3.99568C31.7066 3.96497 31.6034 3.92525 31.5364 3.90882C31.5363 3.89655 31.8322 3.84438 31.8322 3.84438C31.7169 3.81053 31.6079 3.78046 31.5478 3.77799C31.589 3.66725 31.8066 3.66832 31.8066 3.66832C31.6545 3.61994 31.3129 3.62843 31.2513 3.73281C31.2164 3.7922 31.2487 4.0925 31.256 4.1556C31.2295 4.16489 31.2047 4.17537 31.1819 4.18693C31.17 4.13691 31.1501 4.04563 31.1347 3.94929C31.0956 3.70435 31.1231 3.65844 31.1266 3.65353L31.1267 3.65378ZM31.1303 4.34576C31.1759 4.27791 31.3295 4.20359 31.5582 4.20089L31.6854 4.20143C31.8586 4.20513 31.988 4.24931 32.0607 4.30031L32.0605 4.30164L32.0694 4.30686C32.0885 4.32146 32.1032 4.33639 32.1129 4.35095C32.1159 4.35555 32.1416 4.40264 32.0925 4.64565C32.0708 4.75298 32.0436 4.85362 32.0311 4.89735C31.9366 4.84508 31.8068 4.81065 31.6625 4.80277L31.5786 4.80235L31.5764 4.80242C31.5745 4.8025 31.5727 4.80266 31.5708 4.80273C31.6096 4.74611 31.6956 4.73344 31.8133 4.71509C31.7088 4.68387 31.6056 4.64324 31.5385 4.62647C31.5385 4.61388 31.8345 4.56062 31.8345 4.56062C31.7192 4.5261 31.6102 4.49536 31.55 4.49281C31.5913 4.37982 31.8088 4.38081 31.8088 4.38081C31.6567 4.33142 31.315 4.34016 31.2535 4.4468C31.22 4.50486 31.2483 4.78904 31.2571 4.86916C31.2395 4.87667 31.2225 4.88468 31.2067 4.89319C31.1945 4.84933 31.1684 4.74844 31.1477 4.64097C31.1009 4.39741 31.127 4.35058 31.1304 4.34567L31.1303 4.34576ZM30.7783 5.4654C30.8582 5.46496 31.0718 5.48004 31.2373 5.64485C31.2035 5.72752 31.1902 5.79903 31.1851 5.8428C31.0753 5.61352 30.8558 5.60718 30.8558 5.60718C30.8281 5.69205 30.8495 5.8328 30.8574 5.87671C30.8341 5.87877 30.8109 5.88074 30.7879 5.88296C30.7719 5.82265 30.7372 5.65614 30.7783 5.46524L30.7783 5.4654ZM32.196 21.887C32.1831 24.5108 31.9863 25.9861 31.8235 26.762C31.6956 27.371 31.568 27.6569 31.5061 27.7698C31.4452 27.6562 31.3205 27.3689 31.1987 26.7589C31.0434 25.9816 30.8612 24.5042 30.8741 21.8805L30.9462 7.23261C30.9475 7.2327 30.9487 7.23279 30.9499 7.23271L32.2644 7.23922C32.2656 7.23922 32.2669 7.23906 32.2681 7.23915L32.196 21.887ZM33.174 6.81044C33.1599 6.81688 33.1437 6.81705 33.1294 6.81122C32.9638 6.74233 32.7984 6.70581 32.6888 6.68725C32.6166 6.67505 32.5446 6.71065 32.5097 6.77579L32.3341 7.10359C32.3203 7.1293 32.2938 7.14518 32.2648 7.14504L30.9503 7.13854C30.9214 7.13839 30.8951 7.12225 30.8815 7.09649L30.7091 6.76697C30.6748 6.70148 30.6031 6.66517 30.5309 6.67666C30.4212 6.69414 30.2554 6.72902 30.0891 6.79627C30.0748 6.80212 30.0585 6.80162 30.0445 6.79505L29.7844 6.6743C29.8329 6.65369 29.8826 6.63467 29.9331 6.61698L30.0901 6.69901C30.0901 6.69901 30.409 6.5813 30.6865 6.56999C30.734 6.56806 30.783 6.60509 30.8064 6.64683L30.9946 6.97968C31.0077 7.0006 31.0304 7.01331 31.0549 7.01351L31.6083 7.00348L32.1616 7.01898C32.1861 7.01911 32.209 7.00662 32.2222 6.98575L32.4136 6.65478C32.4375 6.61327 32.4868 6.57673 32.5344 6.57913C32.8117 6.59318 33.1295 6.71404 33.1295 6.71404L33.2872 6.63357C33.3374 6.65175 33.387 6.67135 33.4354 6.69236L33.1741 6.81053L33.174 6.81044ZM34.52 6.72075L34.3444 7.24859C34.1833 7.00871 33.7872 6.77118 33.6624 6.70016C33.3475 6.52109 32.9429 6.42407 32.659 6.37429C32.3524 6.32047 32.1157 6.30837 32.1134 6.30827C32.0956 6.30744 32.079 6.31678 32.0703 6.33242L31.866 6.7032L31.8643 6.70653C31.8584 6.7196 31.8474 6.72772 31.8357 6.72766L31.3836 6.72543C31.3719 6.72537 31.3611 6.71722 31.3553 6.70401L31.1529 6.32788C31.1444 6.31216 31.1278 6.30256 31.1101 6.30331C31.1077 6.30338 30.8711 6.31306 30.564 6.36384C30.2795 6.4109 29.8739 6.50391 29.5574 6.67977C29.4319 6.74956 29.0333 6.98316 28.8699 7.22134L28.6995 6.6918C28.6993 6.69104 28.6994 6.69038 28.699 6.69062C28.8372 6.56368 29.626 5.93202 31.6135 5.94126C33.6013 5.9516 34.3839 6.5912 34.52 6.71875C34.5202 6.71892 34.5203 6.71984 34.52 6.72058L34.52 6.72075ZM31.7102 15.7822C31.7102 15.7822 31.8091 11.9853 31.8925 11.3176C31.976 10.6501 32.0919 10.3661 32.0919 10.3661L32.1063 7.43455L31.7513 7.43279L31.7102 15.7822ZM31.0209 21.5431C31.0084 24.0664 31.2199 25.8611 31.2199 25.8611C31.2413 24.9633 31.507 23.9699 31.507 23.9699L31.5884 7.43199L31.0902 7.42952C31.0902 7.42952 31.0332 19.0197 31.0208 21.543L31.0209 21.5431ZM31.6558 26.8487C31.6558 26.8487 31.9768 25.4649 31.9833 24.1373C31.7972 23.9473 31.7111 23.3339 31.6749 22.9599L31.6558 26.8489L31.6558 26.8487Z"
+                            fill="var(--surface-900)"
+                        />
+                    </g>
+                    <path
+                        d="M34.5352 18.2869C34.5139 18.2518 34.4657 18.2382 34.431 18.2596C33.0756 19.1421 31.6276 19.8669 30.2182 20.6578C29.5897 21.0124 28.9611 21.3689 28.3326 21.7273C29.6436 20.9247 30.9412 20.1006 32.2388 19.2805C32.7131 18.9765 33.2029 18.6999 33.6926 18.4252C33.8526 18.3395 34.0107 18.2499 34.1707 18.1642C34.1862 18.1544 34.1977 18.1408 34.2016 18.1233C34.217 18.0687 34.1534 18.0161 34.1033 18.0473C33.2761 18.5557 32.4085 18.9921 31.5717 19.4831C30.1237 20.3325 28.6912 21.2072 27.2471 22.0624C26.8711 22.2806 26.4912 22.4949 26.1095 22.7073C26.9675 22.1696 27.8332 21.6416 28.6931 21.1078C29.9502 20.3325 31.2227 19.5805 32.4721 18.7934C32.7286 18.6317 32.9908 18.47 33.2144 18.3687C33.2453 18.3512 33.2549 18.3064 33.2318 18.2811C33.2125 18.2518 33.1662 18.2499 33.1412 18.2752C32.6129 18.6785 31.7915 19.0662 31.163 19.4753C29.1501 20.7026 27.1198 21.9046 25.0992 23.1183C25.0626 23.1398 25.0259 23.1651 24.9912 23.1865C25.9861 22.491 26.9925 21.8092 28.026 21.1721C29.1115 20.5 30.2144 19.8532 31.3133 19.2006C31.6604 18.9863 32.0229 18.7934 32.368 18.5772C32.3931 18.5596 32.4239 18.5441 32.4181 18.509C32.4162 18.4759 32.3738 18.4544 32.3449 18.4739C31.2227 19.1675 30.0524 19.785 28.9303 20.4805C27.2567 21.4858 25.6005 22.5202 23.9732 23.5976C23.2887 24.0593 22.6023 24.521 21.9198 24.9866C21.9564 25.008 21.9911 25.0314 22.0258 25.0587C22.2052 25.2087 22.4018 25.3412 22.6062 25.4639C22.9089 25.2808 23.2116 25.0977 23.5143 24.9145C25.5214 23.7086 27.49 22.4384 29.4971 21.2345C30.8236 20.4435 32.1848 19.7149 33.5287 18.9571C33.8584 18.772 34.1842 18.583 34.512 18.394C34.5486 18.3746 34.5621 18.3239 34.539 18.2888L34.5352 18.2869Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.4231 18.571C33.3839 19.175 32.3446 19.7769 31.2996 20.3672C30.2604 20.9264 29.2231 21.4913 28.2012 22.0836C26.4583 23.083 24.8136 24.2421 23.1092 25.3019C22.9839 25.3798 22.8566 25.4597 22.7294 25.5377C23.0012 25.6955 23.2808 25.8396 23.5527 25.9857C24.9544 25.1967 26.358 24.4077 27.7231 23.5544C28.5733 23.0479 29.4121 22.5239 30.2681 22.0251C30.3587 21.9706 30.4494 21.916 30.54 21.8615C30.5554 21.8517 30.567 21.8362 30.5728 21.8186C30.5901 21.7602 30.5207 21.7037 30.4667 21.7368C29.7244 22.1888 29.0477 22.5239 28.3053 22.9252C27.7038 23.27 27.1022 23.6129 26.4987 23.9557C27.6344 23.2739 28.7681 22.5842 29.896 21.8868C30.9237 21.242 31.959 20.6147 32.8999 19.9757C33.1544 19.8003 33.4321 19.6562 33.6885 19.4828C33.7251 19.438 33.6692 19.3659 33.6152 19.399C31.1088 20.7608 28.6717 22.2414 26.225 23.7083C26.7648 23.3616 27.3066 23.0206 27.8561 22.6894C29.4043 21.7426 30.9449 20.7783 32.5085 19.8529C33.1467 19.4652 33.7772 19.0698 34.4231 18.6938C34.4501 18.6743 34.4887 18.6646 34.5002 18.6295C34.5137 18.5866 34.4617 18.5438 34.4231 18.5691V18.571Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.7759 18.6879C34.5176 18.8496 34.2418 18.9821 33.9989 19.1691C33.9912 19.175 33.9893 19.1769 33.9893 19.1769C33.9873 19.1789 33.9854 19.1808 33.9816 19.1847C33.9526 19.2178 33.9719 19.2743 34.0143 19.2841C34.076 19.2919 34.1281 19.2354 34.184 19.2139C34.3633 19.1049 34.5349 18.988 34.7027 18.8633C34.7509 18.8224 34.8261 18.8029 34.8569 18.7483C34.8704 18.7035 34.8164 18.6626 34.7779 18.6879H34.7759Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M30.814 21.4855C30.814 21.4855 30.8159 21.4835 30.8178 21.4816C30.7966 21.4991 30.8024 21.4933 30.814 21.4855Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M34.5391 19.214C33.3322 20.0205 32.0327 20.6751 30.8238 21.4778C30.8199 21.4797 30.818 21.4836 30.8141 21.4856C30.7948 21.4972 30.7813 21.5167 30.7756 21.5382C30.7582 21.5966 30.8064 21.657 30.8662 21.657C31.0667 21.583 31.2711 21.4154 31.4619 21.3083C32.2409 20.8349 32.9928 20.3206 33.7621 19.8316C34.0398 19.6582 34.3193 19.4867 34.6047 19.3251C34.676 19.2841 34.6124 19.1692 34.5391 19.2121V19.214Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M23.6954 26.0636C23.7918 26.1162 23.8863 26.1688 23.9827 26.2175C24.8214 25.7363 25.6601 25.2512 26.493 24.7584C28.3575 23.6304 30.22 22.4965 32.0613 21.3335C32.7207 20.9205 33.3801 20.5075 34.0241 20.0711C34.0684 20.0341 34.1301 20.0165 34.1629 19.9698C34.1725 19.9425 34.1378 19.9152 34.1128 19.9308C32.9579 20.5737 31.8376 21.277 30.6962 21.9452C29.2251 22.818 27.7347 23.6576 26.2482 24.507C25.3767 25.0194 24.4956 25.5162 23.6183 26.0208C23.6434 26.0344 23.6703 26.048 23.6954 26.0636Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M32.2001 21.4118C32.2001 21.4118 32.2042 21.4097 32.2042 21.4077C32.2042 21.4077 32.2042 21.4077 32.2062 21.4077C32.2062 21.4077 32.2001 21.4118 32.2001 21.4138V21.4118Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M34.2229 20.1568C33.7004 20.488 33.1624 20.7938 32.6399 21.1211C32.503 21.2088 32.3102 21.3296 32.2061 21.4095C32.1907 21.4192 32.1772 21.4367 32.1714 21.4543C32.1637 21.4815 32.1714 21.5108 32.1907 21.5302C32.2543 21.5906 32.3276 21.5127 32.3874 21.4835C32.8154 21.2205 33.2299 20.9341 33.6445 20.6516C33.8488 20.5094 34.0571 20.3711 34.2692 20.2406C34.3231 20.2113 34.2749 20.1256 34.221 20.1587L34.2229 20.1568Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.4791 20.3926C33.9104 20.7316 33.1854 21.1368 32.7477 21.4777C32.7034 21.5303 32.7747 21.6102 32.8326 21.5693C33.2606 21.3258 33.6636 21.0413 34.082 20.7861C34.2381 20.6946 34.3924 20.5991 34.5505 20.5114C34.5659 20.5017 34.5775 20.4881 34.5813 20.4705C34.5987 20.414 34.5312 20.3614 34.4811 20.3926H34.4791Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.7106 20.7708C34.4638 20.8897 34.2324 21.0416 34.003 21.1916C33.9162 21.2618 33.7966 21.3105 33.7311 21.3962C33.7157 21.4605 33.7947 21.4897 33.8371 21.4468C34.1514 21.2618 34.4541 21.0553 34.7645 20.8663C34.8262 20.8312 34.7703 20.7338 34.7086 20.7708H34.7106Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.0883 21.0199C34.8801 21.127 34.6738 21.2381 34.4848 21.3764C34.4231 21.4095 34.4347 21.5089 34.5022 21.5245C34.5427 21.5362 34.5754 21.5089 34.6082 21.4913C34.8184 21.3686 34.9476 21.2868 35.1307 21.1699C35.2464 21.1309 35.2079 20.9712 35.0902 21.0199H35.0883Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.4721 21.3728C35.4316 21.3962 35.3776 21.4137 35.366 21.4644C35.3506 21.5131 35.3834 21.5696 35.4335 21.5813C35.4933 21.5929 35.5974 21.5423 35.6147 21.4819C35.6398 21.402 35.5434 21.328 35.4721 21.3728Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M24.5304 26.4633C24.9141 26.2451 25.2997 26.0269 25.6814 25.8048C27.4398 24.7996 29.1847 23.6657 30.7773 22.5572C31.1379 22.304 31.5042 22.0605 31.884 21.8384C31.9265 21.8072 31.9901 21.7955 32.0094 21.7429C32.0248 21.6864 31.9592 21.6299 31.9052 21.663C31.026 22.2533 30.089 22.7501 29.1809 23.2975C27.8968 24.0612 26.6378 24.8619 25.3382 25.5964C24.9372 25.834 24.5323 26.06 24.1255 26.288C24.2585 26.3523 24.3916 26.4126 24.5304 26.4614V26.4633Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M24.9987 26.5936C25.0585 26.6033 25.1163 26.6131 25.1761 26.6228C25.2282 26.5917 25.2822 26.5605 25.3342 26.5293C27.1389 25.4364 28.8896 24.2597 30.619 23.0557C31.0394 22.7674 31.4674 22.4927 31.8954 22.218C31.9725 22.1557 32.0844 22.1206 32.1345 22.0349C32.1519 21.9745 32.0805 21.9141 32.0246 21.9492C30.4879 23.0343 28.824 23.9188 27.2411 24.9318C26.3946 25.4695 25.5424 25.9975 24.6844 26.5137C24.7866 26.5449 24.8908 26.5722 24.9987 26.5917V26.5936Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M25.8473 26.7242C26.7921 26.1593 27.7214 25.567 28.6102 24.9163C29.3757 24.3747 30.1238 23.8254 30.9509 23.2818C31.0512 23.2039 31.2459 23.1201 31.3115 23.0344C31.3249 22.9857 31.269 22.937 31.2228 22.9662C29.9213 23.7805 28.6372 24.6222 27.3319 25.4306C26.6976 25.8281 25.9803 26.243 25.3036 26.6463C25.4848 26.6755 25.6661 26.7028 25.8473 26.7262V26.7242Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M26.5201 26.8099C27.1158 26.4027 27.7155 26.0014 28.3035 25.5865C28.7026 25.2942 29.3736 24.7663 29.9482 24.3572C30.2239 24.1624 30.4842 23.9578 30.7753 23.7747C30.8023 23.7552 30.8428 23.7474 30.8524 23.7123C30.864 23.6714 30.8158 23.6325 30.7792 23.6558C29.1596 24.6884 27.5689 25.6585 25.9976 26.7437C26.1711 26.7671 26.3465 26.7885 26.5201 26.8099Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M27.0987 26.8819C28.1245 26.161 28.8803 25.5513 29.8983 24.8168C30.2106 24.5967 30.5268 24.3824 30.845 24.172C30.9028 24.1388 30.8527 24.0414 30.791 24.0785C29.9137 24.6765 29.0191 25.2454 28.1071 25.7889C27.6328 26.1006 27.0987 26.4649 26.5897 26.8195C26.7594 26.8409 26.9291 26.8604 27.0987 26.8819Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M27.6095 26.9501C28.2361 26.5 28.8126 26.0734 29.4238 25.5864C29.7323 25.3428 30.0601 25.0993 30.411 24.8519C30.5324 24.7545 30.6867 24.6824 30.7869 24.5655C30.8004 24.5168 30.7445 24.4701 30.7002 24.4993C29.5935 25.337 28.3036 26.0695 27.1198 26.8858C27.2836 26.9072 27.4475 26.9286 27.6114 26.952L27.6095 26.9501Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M28.2784 27.0571C28.4403 27.0863 28.5984 27.1292 28.7546 27.1798C29.1807 26.872 29.5914 26.5759 30.0098 26.2778C30.3973 26.0032 30.7887 25.7343 31.1898 25.481C31.344 25.3797 31.5118 25.296 31.666 25.1966C31.7084 25.1479 31.6429 25.07 31.587 25.1051C30.943 25.444 30.3125 25.8103 29.6936 26.1941C29.9597 25.9895 30.2354 25.7752 30.4725 25.5882C30.6538 25.4421 30.8485 25.3096 31.0375 25.1732C31.0799 25.1226 31.0124 25.0427 30.9546 25.0797C30.1987 25.5629 29.4198 26.0129 28.6891 26.533C29.2521 26.0889 29.9539 25.5668 30.648 25.0758C30.6923 25.0427 30.7984 24.9687 30.8678 24.9102C30.8909 24.8888 30.9237 24.8732 30.9237 24.8382C30.9237 24.7972 30.8755 24.768 30.8408 24.7894C29.763 25.4752 28.7218 26.2174 27.6826 26.9597C27.8831 26.9889 28.0837 27.0201 28.2822 27.0571H28.2784Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M29.1829 27.3436C29.3487 27.215 29.5203 27.0845 29.7074 26.9481C30.1354 26.6325 30.6251 26.2545 31.1264 25.9C31.3019 25.7694 31.4966 25.6623 31.6721 25.5357C31.7222 25.4753 31.6431 25.3837 31.5757 25.4266C30.6714 26.0013 29.7691 26.5799 28.8956 27.1994C28.886 27.2052 28.8783 27.213 28.8687 27.2189C28.9747 27.2559 29.0769 27.2988 29.181 27.3436H29.1829Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M29.5182 27.5013C30.2489 26.948 30.9102 26.4473 31.6853 25.9096C31.7798 25.8317 31.9147 25.7791 31.988 25.6856C32.0034 25.6349 31.9437 25.5882 31.8974 25.6155C31.0105 26.1902 30.1371 26.7883 29.2617 27.3786C29.3485 27.4175 29.4333 27.4584 29.5182 27.5013Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M29.8941 27.704C29.9172 27.6865 29.9404 27.669 29.9635 27.6534C30.4513 27.291 30.9314 26.917 31.4886 26.5254C31.7219 26.3559 31.9648 26.1981 32.1981 26.0286C32.2444 25.9741 32.1731 25.8884 32.1094 25.9273C31.3247 26.4046 30.4108 26.9832 29.5972 27.5404C29.6974 27.593 29.7958 27.6475 29.8922 27.7021L29.8941 27.704Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.2141 27.8931C30.3741 27.7704 30.5361 27.6496 30.7 27.523C31.155 27.1762 31.61 26.8294 32.0805 26.5041C32.1923 26.4242 32.308 26.3482 32.4179 26.2684C32.441 26.2547 32.4564 26.2333 32.4641 26.208C32.4892 26.1242 32.3909 26.0463 32.3157 26.093C31.5059 26.6171 30.7135 27.1645 29.9307 27.7256C30.0251 27.7801 30.1196 27.8366 30.2141 27.8931Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.5113 28.0801C30.5499 28.0509 30.5884 28.0217 30.625 27.9924C31.3057 27.4995 31.7588 27.1411 32.3603 26.6891C32.4953 26.5917 32.6341 26.5001 32.7652 26.3969C32.7768 26.3852 32.7826 26.3696 32.7826 26.354C32.7826 26.3092 32.7305 26.2781 32.6919 26.3014C32.1964 26.6755 31.6392 26.9696 31.1013 27.3262C30.8275 27.5268 30.5441 27.7255 30.2626 27.9223C30.3455 27.9749 30.4303 28.0256 30.5113 28.0782V28.0801Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M33.1101 26.3463C32.5298 26.7554 31.7952 27.2327 31.3074 27.6185C31.2437 27.6925 31.344 27.8074 31.4269 27.7548C31.9301 27.4003 32.3196 27.0827 32.7862 26.7359C32.9154 26.6424 33.0465 26.5528 33.1776 26.4632C33.193 26.4535 33.2046 26.4398 33.2084 26.4223C33.2258 26.3658 33.1583 26.3151 33.1082 26.3463H33.1101Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.7697 28.2436C30.8931 28.1599 31.0087 28.078 31.1032 27.9865C31.1379 27.9163 31.0492 27.8384 30.9837 27.8813C30.8506 27.9611 30.7215 28.0449 30.5923 28.1306C30.6521 28.1696 30.7118 28.2066 30.7716 28.2456L30.7697 28.2436Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.0547 28.4249C31.6582 27.9554 32.2097 27.5229 32.8941 27.0164C33.0214 26.9112 33.1853 26.8313 33.2952 26.7105C33.3106 26.6618 33.2527 26.6151 33.2084 26.6423C32.4642 27.1976 31.6312 27.743 30.8427 28.2885C30.914 28.3333 30.9834 28.3781 31.0547 28.423V28.4249Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M33.2066 27.0438C33.0524 27.1529 32.8943 27.2581 32.74 27.3672C32.7092 27.3847 32.7034 27.4295 32.7285 27.4529C32.7458 27.4704 32.7747 27.4743 32.794 27.4607C32.9483 27.3516 33.1064 27.2464 33.2625 27.1373C33.3242 27.1022 33.2683 27.0048 33.2066 27.0418V27.0438Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.2187 28.5282C31.2591 28.5535 31.2996 28.5769 31.3421 28.6022C31.664 28.3529 31.9417 28.1405 32.2733 27.8892C32.3851 27.8054 32.5143 27.7061 32.5876 27.6398C32.6146 27.6087 32.6609 27.5872 32.6628 27.5424C32.6628 27.4996 32.6127 27.4684 32.5741 27.4918C32.1056 27.7684 31.5927 28.1113 31.0991 28.4542C31.1396 28.4795 31.1782 28.5048 31.2187 28.5282Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.6737 28.7953C31.826 28.6706 31.9764 28.5498 32.1325 28.4407C32.4198 28.2225 32.7283 28.0297 33.0156 27.8154C33.0773 27.7452 32.9809 27.6362 32.9018 27.6849C32.4391 27.9966 31.9879 28.3239 31.5271 28.6395C31.5098 28.6531 31.4905 28.6648 31.4731 28.6784C31.5406 28.7174 31.6062 28.7563 31.6737 28.7953Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.9747 28.9645C32.0229 28.9236 32.0692 28.8826 32.1097 28.8476C32.2427 28.7346 32.4914 28.5456 32.6958 28.3917C32.7594 28.3333 32.8539 28.2943 32.9021 28.2261C32.9156 28.1833 32.8636 28.1443 32.8269 28.1677C32.5358 28.3508 32.2581 28.5554 31.9709 28.7463C31.913 28.7852 31.8533 28.8242 31.7954 28.8651C31.8552 28.8982 31.9149 28.9333 31.9747 28.9645Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M32.3428 29.1632C32.3737 29.1378 32.4065 29.1106 32.4412 29.0794C32.5973 28.9528 32.7323 28.8281 32.8788 28.7326C32.9405 28.6976 32.8846 28.6021 32.8229 28.6391C32.6051 28.7852 32.3814 28.9236 32.1597 29.0677C32.2194 29.0989 32.2792 29.132 32.339 29.1632H32.3428Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M32.7766 29.3853C32.7901 29.3736 32.8055 29.3639 32.819 29.3542C32.8556 29.3288 32.9366 29.2568 33.0388 29.1749C33.0735 29.1477 33.1159 29.1243 33.1275 29.0775C33.1583 28.9762 33.0369 28.8808 32.9462 28.9373C32.8036 29.0405 32.6435 29.1301 32.5201 29.2568C32.605 29.2996 32.6898 29.3444 32.7746 29.3873L32.7766 29.3853Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M33.3513 29.6698C33.3976 29.662 33.4362 29.625 33.4766 29.6036C33.5345 29.5549 33.627 29.5315 33.654 29.4555C33.681 29.3718 33.5788 29.2938 33.5056 29.3406C33.4207 29.3932 33.3185 29.4263 33.2472 29.4965C33.2183 29.5296 33.2183 29.5783 33.2376 29.6153C33.2761 29.6348 33.3128 29.6523 33.3513 29.6718V29.6698Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M33.6675 17.932C33.6309 17.9573 33.5692 17.9904 33.6 18.045C33.6386 18.1073 33.7331 18.0489 33.7543 18.0002C33.7697 17.9515 33.7099 17.9067 33.6675 17.9339V17.932Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M33.0465 18.0099C32.9539 18.082 32.846 18.1385 32.7553 18.2125C32.7457 18.2222 32.7418 18.2398 32.7438 18.2534C32.7476 18.2963 32.8016 18.3158 32.8325 18.2904C32.925 18.2339 33.0156 18.1735 33.1082 18.119C33.1776 18.08 33.114 17.9709 33.0465 18.0118V18.0099Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M44.9295 25.5438C45.5638 25.1366 46.1634 24.7431 46.7785 24.3651C47.5921 23.8878 48.3807 23.3677 49.1866 22.8767C49.2638 22.8183 49.3775 22.793 49.4334 22.7131C49.4469 22.6663 49.3929 22.6215 49.3486 22.6488C48.6237 23.1066 47.8929 23.5566 47.1333 23.9541C46.2926 24.4021 45.4732 24.8463 44.6499 25.3334C44.7444 25.3976 44.835 25.4678 44.9256 25.5438H44.9295Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.4873 22.7832C49.4082 22.8475 49.3022 22.8942 49.2443 22.978C49.2347 23.0072 49.254 23.0403 49.2848 23.0481C49.3349 23.0559 49.3754 23.0111 49.4198 22.9916C49.4738 22.9585 49.5374 22.9332 49.5837 22.8903C49.6338 22.8319 49.5547 22.7423 49.4892 22.7832H49.4873Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M45.3786 25.9548C45.8779 25.6119 46.3734 25.2691 46.8555 24.9418C47.6344 24.3963 48.4943 23.8411 49.3099 23.2761C49.4044 23.2079 49.5027 23.1495 49.5991 23.0832C49.628 23.0676 49.6377 23.0248 49.6145 22.9994C49.5952 22.9722 49.5528 22.9702 49.5297 22.9936C48.743 23.5703 47.8021 24.1567 46.9384 24.706C46.4988 24.9593 46.0303 25.2262 45.5617 25.5048C46.1016 25.1424 46.6434 24.782 47.1775 24.4138C47.7809 24.0008 48.4037 23.6131 49.0168 23.2137C49.0438 23.1923 49.0824 23.1826 49.094 23.1475C49.1055 23.1066 49.0592 23.0676 49.0207 23.091C48.4114 23.5157 47.7655 23.8839 47.1196 24.2521C46.3889 24.6788 45.6581 25.1093 44.939 25.5574C45.0816 25.6782 45.2243 25.8145 45.3766 25.9567L45.3786 25.9548Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.6687 23.2097C49.1847 23.5506 48.6487 23.837 48.1918 24.2052C48.1763 24.2539 48.238 24.2968 48.2785 24.2636C48.6371 24.0338 48.9784 23.7825 49.339 23.5565C49.4566 23.4688 49.6783 23.3811 49.7612 23.2798C49.7766 23.2272 49.7149 23.1805 49.6687 23.2097Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M45.6078 26.1631C46.1901 25.7403 46.8476 25.2728 47.4414 24.852C47.586 24.7429 47.8579 24.5773 48.0372 24.4331C48.0681 24.3805 47.9948 24.3201 47.9524 24.3669C47.1619 24.9085 46.2499 25.45 45.415 25.9858C45.4787 26.0462 45.5442 26.1046 45.6098 26.1631H45.6078Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M45.8835 26.4106C46.1862 26.1944 46.4793 25.984 46.755 25.7853C47.6361 25.1599 48.4941 24.5034 49.3714 23.8741C49.4736 23.7923 49.6047 23.7358 49.6914 23.6403C49.703 23.6033 49.6587 23.5663 49.624 23.5877C48.9086 24.0611 48.2049 24.5501 47.4838 25.0157C46.8688 25.4073 46.2441 25.7872 45.6367 26.1905C45.7177 26.2645 45.8006 26.3366 45.8816 26.4087L45.8835 26.4106Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M46.4928 26.9208C46.4928 26.9208 46.5082 26.9091 46.5159 26.9032C47.2274 26.3578 48.2319 25.6428 49.1092 25.0018C49.4447 24.7603 49.7821 24.5168 50.133 24.2966C50.2506 24.2245 50.3663 24.1505 50.4858 24.0804C50.4993 24.0726 50.5109 24.0589 50.5148 24.0433C50.5302 23.9927 50.4704 23.944 50.4222 23.9732C49.5122 24.6453 48.5423 25.2395 47.586 25.8512C47.6882 25.7714 47.7904 25.6915 47.8945 25.6116C48.2339 25.3584 48.579 25.1129 48.9318 24.8772C49.0552 24.7836 49.2114 24.7194 49.3174 24.6083C49.329 24.5674 49.2808 24.5284 49.2442 24.5518C48.5732 25.0038 47.9099 25.4636 47.237 25.9136C47.0635 26.0285 46.8881 26.1435 46.7145 26.2584C46.998 26.0344 47.2814 25.8084 47.5475 25.6019C48.2686 25.0369 48.9472 24.5031 49.7069 23.9615C49.8033 23.8836 49.9286 23.831 50.0096 23.7394C50.0212 23.7005 49.9749 23.6635 49.9402 23.6849C48.6098 24.6005 47.3315 25.5902 46.005 26.5136C46.167 26.6519 46.3289 26.7883 46.4947 26.9227L46.4928 26.9208Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M50.1581 23.8818C49.9441 24.0299 49.7282 24.176 49.5161 24.326C49.4968 24.3377 49.4891 24.363 49.5007 24.3825C49.5122 24.402 49.5373 24.4078 49.5566 24.3981C49.6838 24.3085 49.8072 24.215 49.9306 24.1234C50.0193 24.0572 50.1099 23.9948 50.1967 23.9305C50.2179 23.9052 50.1851 23.8663 50.1562 23.8838L50.1581 23.8818Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M50.6382 24.1098C50.2661 24.3689 49.8843 24.6144 49.5161 24.8774C49.3965 24.9748 49.2249 25.0683 49.1709 25.1579C49.1497 25.2261 49.2346 25.2865 49.2905 25.2436C49.6645 24.9845 49.9692 24.7274 50.3606 24.4663C50.4762 24.3884 50.5958 24.3163 50.7095 24.2345C50.725 24.2247 50.7385 24.2091 50.7423 24.1916C50.7616 24.1312 50.6883 24.0747 50.6363 24.1098H50.6382Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M50.8812 24.2966C50.4898 24.546 50.029 24.8713 49.7071 25.1265C49.6666 25.1733 49.7302 25.2454 49.7822 25.2123C50.1679 24.9493 50.5515 24.6863 50.9352 24.4213C51.0259 24.3843 50.968 24.2479 50.8793 24.2947L50.8812 24.2966Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M51.0972 24.4897C50.7888 24.6826 50.486 24.8832 50.1988 25.1073C50.193 25.1112 50.2007 25.1073 50.2046 25.1034C50.193 25.1112 50.1833 25.1229 50.1795 25.1365C50.1698 25.1716 50.1988 25.2105 50.2354 25.2086C50.2797 25.2027 50.3125 25.1638 50.3511 25.1443C50.621 24.9631 50.8909 24.78 51.1705 24.6163C51.2515 24.5696 51.1782 24.441 51.0972 24.4897Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M51.317 24.6903C51.1262 24.8267 50.9295 24.9533 50.7348 25.0838C50.7039 25.113 50.6538 25.1286 50.6403 25.1715C50.6249 25.2494 50.7155 25.2728 50.7637 25.2202C50.9719 25.0682 51.1917 24.9319 51.4057 24.7896C51.4539 24.7351 51.3787 24.6513 51.317 24.6883V24.6903Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M51.3265 25.0568C51.259 25.0919 51.1549 25.1678 51.1491 25.1815C51.1086 25.2282 51.1491 25.3062 51.2089 25.3042C51.2494 25.2945 51.3709 25.2497 51.4422 25.1893C51.5039 25.1172 51.4075 25.0081 51.3265 25.0587V25.0568Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.3657 26.3503C49.3792 26.3055 49.3271 26.2645 49.2866 26.2899C48.66 26.7418 48.0257 27.1821 47.399 27.6322C47.4395 27.6633 47.48 27.6945 47.5224 27.7257C48.0353 27.3166 48.5906 26.9133 49.1767 26.5042C49.2365 26.4516 49.3233 26.4165 49.3657 26.3503Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M46.9826 27.3087C47.1137 27.4119 47.2467 27.5132 47.3798 27.6145C47.8174 27.26 48.2744 26.884 48.6851 26.5723C48.9704 26.3541 49.2616 26.1417 49.5566 25.9352C49.5797 25.9196 49.6125 25.904 49.6048 25.8709C49.6028 25.8397 49.5623 25.8203 49.5353 25.8378C48.901 26.2528 48.2744 26.6813 47.6497 27.1119C48.1587 26.7047 48.7082 26.2722 49.2076 25.906C49.4621 25.7209 49.7262 25.5475 49.9904 25.3761C50.0521 25.341 49.9981 25.2397 49.9345 25.2787C48.9492 25.9839 47.9717 26.6229 47.0424 27.2911C47.5687 26.8586 48.1645 26.3716 48.6851 25.98C48.9531 25.7696 49.2384 25.5865 49.5084 25.3819C49.5643 25.3274 49.4775 25.2358 49.4216 25.2943C48.5617 25.9586 47.6593 26.545 46.7975 27.1606C46.8611 27.2093 46.9228 27.26 46.9864 27.3106L46.9826 27.3087Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M46.7744 27.1449C47.4106 26.6111 47.9891 26.1514 48.6909 25.6643C48.7969 25.5923 48.901 25.5163 49.0109 25.452C49.0244 25.4442 49.0341 25.4306 49.0399 25.415C49.0553 25.3643 48.9955 25.3176 48.9492 25.3448C48.1549 25.8825 47.3663 26.4358 46.5835 26.993C46.6471 27.0436 46.7107 27.0943 46.7744 27.143V27.1449Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M47.7904 27.932C48.1124 27.6651 48.4748 27.3729 48.7236 27.182C48.9106 27.0359 49.1034 26.8956 49.2865 26.7456C49.329 26.7047 49.275 26.6287 49.221 26.6618C48.7023 27.0203 48.1201 27.4099 47.5995 27.7879C47.6631 27.8366 47.7248 27.8833 47.7884 27.932H47.7904Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M48.024 28.1092C48.0491 28.0878 48.0741 28.0663 48.1011 28.043C48.4019 27.78 48.6969 27.5131 49.0054 27.2618C49.0324 27.2403 49.0806 27.2014 49.0921 27.1916C49.1211 27.1643 49.1828 27.1488 49.1731 27.1001C49.1654 27.0689 49.123 27.0572 49.1018 27.0806C48.7258 27.3864 48.2939 27.6826 47.8794 27.9982C47.9276 28.0352 47.9758 28.0722 48.024 28.1092Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M48.257 28.2885C48.4903 28.082 48.7313 27.8735 49.0109 27.6495C49.1979 27.4975 49.3541 27.3768 49.5507 27.2229C49.5797 27.1936 49.6317 27.178 49.6394 27.1352C49.6394 27.106 49.6047 27.0865 49.5797 27.1021C49.1015 27.4333 48.5269 27.8716 48.1201 28.1852C48.1664 28.2203 48.2107 28.2554 48.257 28.2904V28.2885Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M48.7449 28.6665C49.0226 28.4211 49.3002 28.1775 49.5644 27.9691C49.734 27.8288 49.9693 27.6438 50.11 27.5327C50.1524 27.4918 50.216 27.4665 50.2488 27.4178C50.2585 27.3866 50.2218 27.3574 50.1929 27.3749C49.6415 27.7665 49.1267 28.1639 48.608 28.5574C48.6543 28.5925 48.6987 28.6276 48.743 28.6646L48.7449 28.6665Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M50.1834 27.7354C50.2201 27.7004 50.1738 27.638 50.1295 27.6653C49.6474 28.0296 49.2406 28.3471 48.7817 28.6959C48.8299 28.7329 48.8762 28.7718 48.9244 28.8089C49.1153 28.6355 49.3081 28.4621 49.5028 28.3004C49.7265 28.1075 49.954 27.9185 50.1854 27.7354H50.1834Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M48.446 28.4348C48.6214 28.2809 48.7988 28.1289 48.9801 27.9828C49.169 27.8289 49.356 27.6711 49.545 27.5172C49.6009 27.4899 49.5893 27.4159 49.5276 27.4373C49.1247 27.7256 48.7236 28.0412 48.338 28.351C48.3746 28.3783 48.4113 28.4075 48.446 28.4348Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.5162 27.6591C49.1576 27.9416 48.8588 28.1812 48.4731 28.4559C48.5117 28.4871 48.5522 28.5163 48.5908 28.5475C48.666 28.4851 48.7411 28.4208 48.8163 28.3605C49.0651 28.1598 49.3138 27.9572 49.5586 27.7526C49.6203 27.7234 49.5818 27.6279 49.5162 27.6611V27.6591Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.0957 28.9452C49.3058 28.7602 49.5141 28.5731 49.73 28.3959C49.8862 28.2556 50.0655 28.1348 50.214 27.9906C50.2371 27.9419 50.1677 27.8932 50.1311 27.9341C49.7512 28.2614 49.3618 28.5478 48.9819 28.8537C49.0205 28.8848 49.0591 28.9141 49.0976 28.9452H49.0957Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.3059 29.1183C49.57 28.8728 49.8419 28.6059 50.0251 28.4754C50.0752 28.452 50.1427 28.4189 50.1234 28.3526C50.1099 28.2961 50.0308 28.2747 49.9904 28.3176C49.7416 28.5669 49.4486 28.7657 49.1632 28.9994C49.2114 29.0384 49.2596 29.0793 49.3078 29.1183H49.3059Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.4525 29.2392C49.547 29.1515 49.6396 29.0638 49.7379 28.982C49.842 28.8846 49.9654 28.8047 50.0637 28.7054C50.083 28.6664 50.0271 28.6294 49.9982 28.6606C49.7938 28.8379 49.5663 28.984 49.3407 29.1457C49.3773 29.1768 49.414 29.2061 49.4525 29.2372V29.2392Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.6568 29.4125C49.7706 29.3053 49.8843 29.1982 50.0039 29.0949C50.0386 29.056 50.1041 29.0345 50.1099 28.978C50.1099 28.9293 50.0463 28.9021 50.0135 28.9391C49.8593 29.0676 49.705 29.1943 49.5508 29.3209C49.5855 29.3501 49.6202 29.3813 49.6568 29.4125Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.9016 29.6251C49.9884 29.5414 50.0771 29.4498 50.1426 29.3738C50.1889 29.329 50.1291 29.2511 50.0732 29.2842C49.9672 29.3524 49.8611 29.4245 49.7609 29.5044C49.8071 29.5453 49.8553 29.5842 49.9016 29.6251Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M50.0444 29.7534C50.1639 29.6502 50.2873 29.5527 50.3991 29.4417C50.4126 29.4281 50.4203 29.4105 50.4203 29.393C50.4203 29.3404 50.3606 29.3053 50.3143 29.3326C50.1793 29.43 50.0444 29.5313 49.9171 29.6385C49.9595 29.6774 50.0019 29.7164 50.0444 29.7554V29.7534Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M50.7905 29.2568C50.5996 29.3854 50.4106 29.5179 50.2313 29.6621C50.1484 29.7049 50.1542 29.8315 50.2564 29.8354C50.3046 29.8354 50.3335 29.7926 50.3701 29.7653C50.4974 29.6543 50.6169 29.5354 50.7403 29.4205C50.775 29.3776 50.8444 29.3484 50.856 29.2958C50.856 29.2627 50.8174 29.2393 50.7885 29.2568H50.7905Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M53.2122 29.395C54.0162 28.7677 54.7527 28.1852 55.628 27.5618C55.9057 27.3729 56.1833 27.1703 56.4397 27.0047C56.4918 26.9618 56.5728 26.9404 56.6056 26.8819C56.6191 26.8391 56.567 26.7962 56.5265 26.8215C55.4391 27.6261 54.1126 28.4346 53.0059 29.2372C53.0753 29.286 53.1447 29.3386 53.2122 29.395Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M52.5877 29.0152C52.9521 28.7483 53.3203 28.4814 53.7272 28.197C53.785 28.1561 53.8525 28.1229 53.9026 28.0742C53.9103 28.0587 53.9123 28.0372 53.8988 28.0236C53.8833 28.0022 53.8506 28.0002 53.8313 28.0197C53.3955 28.3489 52.8672 28.6451 52.3544 28.9607C52.4353 28.9704 52.5105 28.9899 52.5857 29.0152H52.5877Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M52.9133 29.1748C53.1524 28.9975 53.3895 28.8144 53.6903 28.5787C53.8272 28.4735 54.2263 28.1832 54.4596 28.0195C54.5097 27.9786 54.5811 27.9533 54.6177 27.8988C54.6273 27.8637 54.5869 27.8306 54.556 27.852C53.9332 28.2728 53.2796 28.6429 52.6376 29.0326C52.734 29.0696 52.8246 29.1183 52.9133 29.1748Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M53.4493 29.5956C54.0528 29.1164 54.7237 28.5436 55.4005 28.0157C55.7128 27.7761 56.083 27.5072 56.4243 27.2676C56.4918 27.2091 56.5901 27.1741 56.6422 27.102C56.6556 27.0572 56.6036 27.0143 56.5612 27.0397C55.7128 27.6436 54.8953 28.2884 54.0219 28.8553C53.7982 29.0014 53.5033 29.2041 53.2275 29.4028C53.3027 29.4651 53.376 29.5275 53.4493 29.5917V29.5956Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M56.5903 27.2638C55.8961 27.7898 54.988 28.4951 54.3826 28.9646C54.0683 29.1984 53.7791 29.4107 53.5034 29.627C53.596 29.662 53.6847 29.7107 53.7695 29.7653C54.5426 29.0893 55.2984 28.3918 56.1082 27.7626C56.2432 27.6515 56.5035 27.4684 56.6809 27.3359C56.7136 27.2814 56.6365 27.2171 56.5903 27.2658V27.2638Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M56.6501 27.443C55.8249 28.1326 55.017 28.8457 54.2111 29.5587C54.107 29.6483 53.9971 29.7438 53.8833 29.8412C53.9469 29.8879 54.0105 29.9366 54.0722 29.9853C54.5716 29.4671 55.0691 28.947 55.6147 28.4775C55.9502 28.1755 56.2972 27.8852 56.6462 27.5969C56.6809 27.5599 56.7426 27.5385 56.7484 27.4839C56.7484 27.4352 56.6848 27.406 56.6501 27.443Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M56.7097 27.7081C55.8479 28.3958 55.0496 29.1595 54.2495 29.9173C54.2071 29.9544 54.1666 29.9914 54.1261 30.0264C54.1724 30.0635 54.2186 30.0985 54.2649 30.1316C54.2765 30.12 54.2861 30.1083 54.2977 30.0966C54.7334 29.6563 55.1846 29.2335 55.6473 28.8205C55.9539 28.5517 56.2489 28.2711 56.5593 28.0081C56.6422 27.94 56.7271 27.8737 56.8119 27.8075C56.8254 27.7939 56.8331 27.7763 56.8331 27.7568C56.8331 27.6964 56.7541 27.6614 56.7116 27.7062L56.7097 27.7081Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M56.8235 27.9612C56.2933 28.4521 55.7592 28.8223 55.2463 29.3405C55.2097 29.4164 55.3177 29.4905 55.3755 29.4281C55.7495 29.1086 56.0947 28.7774 56.4321 28.4813C56.5921 28.3274 56.7772 28.193 56.9295 28.0332C56.9604 27.9709 56.8697 27.9105 56.8235 27.9612Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.0607 28.1289C56.7214 28.3997 56.4032 28.6958 56.0909 28.9959C56.0562 29.0348 55.9983 29.0796 56.0273 29.1381C56.0716 29.2316 56.1641 29.1751 56.2143 29.1186C56.5305 28.8225 56.8448 28.5244 57.159 28.2263C57.2227 28.164 57.1243 28.0627 57.0607 28.1289Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.2669 28.3529C57.0336 28.573 56.7521 28.7484 56.5573 29.0055C56.5246 29.0698 56.594 29.1458 56.6614 29.1244C56.7752 29.0523 56.8677 28.9471 56.9661 28.8555C57.103 28.7133 57.2514 28.5769 57.3787 28.4289C57.4115 28.3626 57.317 28.2984 57.2669 28.3529Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.647 28.6705C57.5757 28.7212 57.5043 28.7718 57.4446 28.8342C57.4195 28.8673 57.3829 28.8945 57.3636 28.9316C57.3405 28.9783 57.3809 29.0368 57.433 29.0348C57.5256 29.0095 57.6644 28.877 57.755 28.7621C57.7858 28.6997 57.7068 28.6315 57.649 28.6686L57.647 28.6705Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M58.2233 29.1222C58.0999 29.2021 58.2233 29.3755 58.3351 29.28C58.4604 29.2021 58.3351 29.0248 58.2233 29.1222Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M55.071 29.4982C54.8203 29.7223 54.5716 29.9482 54.3229 30.1762C54.3653 30.2054 54.4058 30.2346 54.4482 30.2619C54.4482 30.2619 54.4482 30.2619 54.4482 30.2638C54.454 30.2677 54.4617 30.2736 54.4675 30.2775C54.5099 30.2346 54.5523 30.1937 54.5928 30.1547C54.7837 29.9541 55.0035 29.7768 55.1924 29.58C55.2271 29.5099 55.1249 29.4398 55.071 29.4982Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M54.8048 30.4606C55.0651 30.1878 55.3235 29.917 55.5876 29.6482C55.6975 29.5372 55.8093 29.4261 55.9154 29.3131C55.9289 29.3014 55.9347 29.2839 55.9347 29.2664C55.9347 29.2099 55.8595 29.1767 55.8209 29.2196C55.4122 29.5975 55.0015 29.9735 54.5985 30.3573C54.6679 30.3924 54.7354 30.4275 54.8048 30.4625V30.4606Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M55.1597 30.6399C55.4721 30.3185 55.7844 29.997 56.0968 29.6756C56.2047 29.5587 56.3146 29.4438 56.4245 29.3269C56.4361 29.3152 56.4419 29.3015 56.4419 29.286C56.4419 29.2353 56.3763 29.2061 56.3416 29.245C55.8731 29.6464 55.4007 30.0789 54.938 30.5308C55.0132 30.5678 55.0865 30.6049 55.1597 30.6419V30.6399Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M55.3891 30.7589C55.4199 30.7745 55.4508 30.792 55.4816 30.8095C55.7689 30.492 56.0581 30.1764 56.3531 29.8666C56.465 29.7517 56.5787 29.6406 56.6848 29.5199C56.6963 29.5082 56.704 29.4906 56.704 29.4731C56.704 29.4186 56.6327 29.3854 56.5941 29.4264C56.1777 29.8686 55.7092 30.2972 55.2811 30.7024C55.3178 30.7219 55.3544 30.7394 55.3891 30.7589Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.0953 29.3989C56.5863 29.8762 56.1024 30.3788 55.6281 30.8892C55.6955 30.9282 55.763 30.9671 55.8305 31.008C55.9385 30.8795 56.0445 30.7567 56.1467 30.6437C56.4513 30.2931 56.7733 29.958 57.0857 29.6151C57.1242 29.5586 57.1994 29.5158 57.2129 29.4476C57.2129 29.3891 57.1358 29.356 57.0953 29.3989Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.5601 29.4009C57.1051 29.9036 56.4379 30.5055 56.0793 30.9536C55.9983 31.0276 56.0793 31.1699 56.1854 31.1367C56.2972 31.0763 56.3705 30.9556 56.4572 30.864C56.6404 30.6478 56.893 30.3029 57.1417 30.0302C57.3075 29.8354 57.5042 29.6678 57.67 29.475C57.7008 29.4107 57.6102 29.3483 57.562 29.4009H57.5601Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.5215 29.962C57.2863 30.2094 57.0665 30.4685 56.8467 30.7296C56.8081 30.7666 56.8178 30.8328 56.864 30.8581C56.9161 30.8893 56.9662 30.8523 56.9951 30.8094C57.0935 30.6945 57.1937 30.5815 57.2921 30.4704C57.4078 30.3399 57.5254 30.2113 57.643 30.0847C57.6584 30.0691 57.668 30.0458 57.668 30.0243C57.67 29.9503 57.5716 29.9094 57.5215 29.9639V29.962Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.6641 30.2603C57.4713 30.459 57.2766 30.6616 57.1146 30.8876C57.1011 30.9071 57.1146 30.8876 57.1223 30.8798C57.105 30.8974 57.0953 30.9207 57.0953 30.9461C57.0992 31.0532 57.2284 31.0669 57.2824 30.985C57.4713 30.7883 57.6583 30.5818 57.828 30.3694C57.8743 30.2739 57.7374 30.1804 57.6641 30.2584V30.2603Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M57.9803 30.5076C57.8377 30.6498 57.6776 30.792 57.587 30.9751C57.5812 30.9829 57.5774 30.9907 57.5754 30.9985C57.5639 31.0433 57.5967 31.0998 57.6487 31.0979C57.7258 31.0803 57.695 31.0706 57.7509 31.0394C57.8647 30.9459 57.9591 30.831 58.0594 30.7238C58.0941 30.679 58.1558 30.642 58.1558 30.5797C58.1596 30.492 58.042 30.4452 57.9823 30.5076H57.9803Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M58.312 30.7374C58.2426 30.792 58.1732 30.8485 58.1327 30.9264C58.0517 31.0316 58.1751 31.1738 58.285 31.092C58.3756 31.0277 58.4547 30.9303 58.4913 30.8251C58.5106 30.7296 58.3795 30.6654 58.3139 30.7374H58.312Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M58.7572 31.0452C58.7071 31.0997 58.6801 31.2342 58.8305 31.2264C58.8401 31.2225 58.8498 31.2186 58.8556 31.2127C58.8556 31.2127 58.8556 31.2127 58.8537 31.2147C58.8537 31.2147 58.8556 31.2127 58.8575 31.2108C58.8691 31.203 58.8749 31.1952 58.8787 31.1913C58.9038 31.1699 58.9019 31.1699 58.9308 31.1153C58.9616 31.0121 58.8093 30.9478 58.7572 31.0413V31.0452Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M59.2027 31.1835C59.1217 31.2575 59.2316 31.3783 59.3107 31.3023C59.3936 31.2303 59.2818 31.1075 59.2027 31.1835Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M39.9299 23.0661C40.4601 23.6097 41.0867 24.1123 41.5938 24.5799C42.2223 25.1604 42.8123 25.7799 43.4235 26.3799C44.4627 27.3774 45.5116 28.3632 46.5663 29.345C47.4378 30.1399 48.4886 31.1179 49.3369 31.8153C49.5104 31.8192 49.6859 31.8251 49.8594 31.827C49.5837 31.5718 49.3003 31.3244 49.0149 31.0809C48.3343 30.4867 47.6633 29.8827 47.0001 29.2691C45.7333 28.1002 44.4705 26.9274 43.2076 25.7565C42.5366 25.1526 41.8251 24.5701 41.2255 23.9798C40.4119 23.1421 39.5982 22.5168 38.7576 21.718C38.3681 21.3459 37.9825 20.9699 37.5988 20.592C37.4986 20.5063 37.4176 20.3835 37.3019 20.3251C37.2614 20.3251 37.2363 20.3777 37.2672 20.4069C38.1522 21.2777 39.1374 22.2401 39.9299 23.0661Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M42.8686 25.2291C42.8686 25.2291 42.8686 25.2291 42.8711 25.2291C42.8686 25.2291 42.8636 25.224 42.8686 25.2291Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M42.9529 25.1078C42.7678 24.9267 42.5731 24.7572 42.3841 24.5818C41.8057 24.0442 41.316 23.6175 40.7414 23.1285C40.4657 22.8928 40.2054 22.6415 39.9239 22.4135C39.8815 22.3687 39.8082 22.4369 39.8545 22.4837C40.8455 23.337 41.8269 24.3188 42.7794 25.1585C42.7717 25.1527 42.7698 25.1507 42.7717 25.1527C42.8045 25.1799 42.8372 25.2072 42.87 25.2345C42.8835 25.2462 42.9009 25.254 42.9182 25.254C42.9568 25.254 42.9915 25.2208 42.9915 25.1819C42.9915 25.1527 42.9722 25.1293 42.951 25.1117L42.9529 25.1078Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M49.9654 31.7626C49.9924 31.786 50.0194 31.8074 50.0464 31.8289C50.2257 31.8328 50.405 31.8347 50.5844 31.8367C50.0406 31.3672 49.4082 30.8665 48.8722 30.3794C47.484 29.1969 46.1382 27.9696 44.7867 26.7442C44.4203 26.413 44.0559 26.0799 43.6915 25.7467C43.57 25.6493 43.4351 25.4837 43.3078 25.4175C43.2635 25.4175 43.2365 25.4759 43.2712 25.5071C45.4808 27.617 47.6055 29.8184 49.9674 31.7607L49.9654 31.7626Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M48.5214 29.758C49.2309 30.471 49.9443 31.184 50.7309 31.8113C50.7425 31.8211 50.756 31.8308 50.7676 31.8406C50.9199 31.8406 51.0722 31.8425 51.2226 31.8445C50.7637 31.486 50.2991 31.112 49.7708 30.6171C48.853 29.7814 47.9391 29.0878 46.9616 28.2326C46.6993 28.0085 46.4468 27.7728 46.1884 27.5449C46.1402 27.5118 46.1055 27.4494 46.0496 27.4319C46.0149 27.4319 45.9956 27.4767 46.0207 27.5001C46.8362 28.2715 47.7328 28.9573 48.5194 29.7599L48.5214 29.758Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M52.4758 31.8483C52.5337 31.8483 52.5915 31.8483 52.6474 31.8483C52.5086 31.747 52.3756 31.6476 52.2502 31.5483C52.0864 31.4197 51.8723 31.2463 51.6911 31.1041C51.6641 31.0749 51.6178 31.1197 51.6468 31.1489C51.9321 31.371 52.204 31.6087 52.4758 31.8483Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M51.3996 31.8444C51.6445 31.8444 51.8913 31.8463 52.1362 31.8483C51.7833 31.6243 51.4382 31.3944 51.1258 31.1548C50.8521 30.9366 50.5821 30.7125 50.3064 30.4963C50.264 30.4534 50.1946 30.5197 50.2389 30.5645C50.7248 30.9424 51.1606 31.3301 51.6079 31.7002C51.2165 31.447 50.8424 31.182 50.4857 30.9034C50.3353 30.7866 50.0828 30.5703 49.9343 30.4476C49.8803 30.4086 49.8321 30.356 49.7723 30.3287C49.7627 30.3268 49.7531 30.3287 49.7454 30.3346C49.7222 30.3482 49.7164 30.3833 49.7376 30.4008C50.3276 30.8995 50.8212 31.4119 51.3996 31.8444Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M46.6663 29.947C47.266 30.5451 47.9369 31.2055 48.5925 31.788C48.6272 31.788 48.6599 31.7919 48.6947 31.7919C48.8123 31.7958 48.9299 31.7997 49.0456 31.8036C48.8952 31.675 48.7448 31.5464 48.5925 31.4198C47.8791 30.8139 47.1503 30.1847 46.4022 29.5048C45.6753 28.8365 44.9446 28.1722 44.2196 27.5021C44.0615 27.3598 43.9073 27.2079 43.7395 27.0754C43.6971 27.0559 43.6528 27.1144 43.6894 27.1494C44.7171 28.0417 45.6907 28.9943 46.6644 29.945L46.6663 29.947Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M48.2591 31.7744C48.3343 31.7783 48.4114 31.7803 48.4866 31.7842C47.7887 31.188 47.0849 30.5977 46.4024 29.9841C46.198 29.8068 46.0129 29.6042 45.8124 29.425C45.7603 29.3996 45.7083 29.4737 45.7507 29.5146C46.5663 30.2471 47.4281 31.0322 48.2572 31.7725L48.2591 31.7744Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M47.7733 31.751C47.8253 31.7529 47.8755 31.7549 47.9275 31.7588C47.6865 31.5503 47.4436 31.3419 47.2083 31.1295C47.083 31.0321 46.9538 30.8646 46.8208 30.7964C46.7745 30.7964 46.7495 30.8568 46.7822 30.888C47.1139 31.1743 47.4416 31.4666 47.7733 31.7529V31.751Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M52.6434 29.3217C52.5855 29.2711 52.5103 29.2399 52.4467 29.1951C52.4062 29.1717 52.3696 29.2341 52.4101 29.2574C52.4756 29.2945 52.5412 29.3393 52.6087 29.3724C52.6164 29.3724 52.626 29.3724 52.6337 29.3665C52.6472 29.3568 52.6511 29.3373 52.6414 29.3237L52.6434 29.3217Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M56.1988 31.9536C56.4013 31.9673 56.6037 31.9829 56.8061 32.0004C55.9385 31.4354 55.0381 30.9211 54.1628 30.3678C53.8389 30.1574 53.5169 29.9451 53.1987 29.7288C53.0888 29.6684 52.9847 29.5555 52.871 29.5204C52.8401 29.5282 52.8324 29.5749 52.8613 29.5905C54.0297 30.3854 55.0709 31.1841 56.1988 31.9556V31.9536Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M55.4295 31.8093C55.4816 31.8483 55.5298 31.8833 55.576 31.9184C55.7438 31.9262 55.9115 31.9359 56.0793 31.9476C55.6185 31.6632 55.1326 31.4138 54.6891 31.0982C54.4173 30.9151 54.182 30.7592 53.9314 30.5664C53.9025 30.5488 53.8774 30.5118 53.8408 30.5196C53.8061 30.5274 53.8003 30.5781 53.8311 30.5956C54.3517 30.9794 54.9648 31.4664 55.4295 31.8093Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M54.1437 31.2384C54.4232 31.4703 54.6874 31.6846 54.9592 31.8911C55.1424 31.8969 55.3236 31.9047 55.5068 31.9145C54.8937 31.5365 54.2246 31.1313 53.6655 30.7397C53.1546 30.3754 52.5993 29.9897 52.1192 29.6254C52.0961 29.6117 52.0787 29.5845 52.0498 29.5806C52.0247 29.5806 52.0074 29.6156 52.0286 29.6332C52.7304 30.1748 53.4958 30.7261 54.1456 31.2404L54.1437 31.2384Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M52.6994 30.4964C53.2451 30.9055 53.8254 31.4081 54.4019 31.8757C54.5195 31.8796 54.6352 31.8815 54.7509 31.8854C54.2689 31.5367 53.7869 31.1919 53.3338 30.849C53.1313 30.7048 52.9366 30.5451 52.7264 30.4146C52.6802 30.4068 52.657 30.473 52.6975 30.4964H52.6994Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M52.1423 31.1315C51.8994 30.9523 51.6718 30.7653 51.4328 30.5646C51.3769 30.5237 51.3287 30.4653 51.265 30.438C51.238 30.438 51.2226 30.4731 51.2438 30.4906C51.7856 30.927 52.2869 31.4121 52.7824 31.8504C52.9251 31.8504 53.0678 31.8524 53.2124 31.8543C52.8383 31.6049 52.4161 31.3283 52.1423 31.1296V31.1315Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M53.2374 31.8542C53.6076 31.8581 53.9797 31.8639 54.3499 31.8737C54.08 31.6983 53.8023 31.5055 53.5806 31.3379C53.4418 31.2327 53.2374 31.0691 53.0658 30.9327C53.0234 30.8879 52.954 30.9561 52.9983 31.0009C53.3704 31.297 53.6982 31.5698 54.0318 31.8386C53.4495 31.4509 53.0851 31.1607 52.4951 30.7847C52.4797 30.7788 52.4372 30.7282 52.4025 30.7243C52.3698 30.7243 52.3524 30.7652 52.3755 30.7886C52.6532 31.036 52.9308 31.2892 53.2046 31.5289C52.8633 31.2873 52.5221 31.0477 52.2406 30.8392C51.9475 30.6249 51.7123 30.4398 51.4115 30.2002C51.3286 30.1437 51.2573 30.0599 51.1705 30.0151C51.1397 30.0151 51.1204 30.056 51.1435 30.0794C51.8762 30.6717 52.5703 31.3009 53.2355 31.8561L53.2374 31.8542Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M43.1535 31.6826C43.435 31.6689 43.7145 31.6572 43.9941 31.6514C42.8566 30.539 41.7248 29.4207 40.593 28.3025C40.3211 28.0239 40.0435 27.7512 39.7832 27.4629C39.7196 27.3927 39.656 27.3226 39.5962 27.2486C39.5865 27.2408 39.575 27.2349 39.5634 27.2349C39.5248 27.2349 39.4998 27.2856 39.5306 27.3148C40.3096 28.1583 41.0596 29.0272 41.8289 29.8825C40.8436 28.9084 39.8545 27.9401 38.8732 26.9641C38.0132 26.0816 37.1167 25.2342 36.2761 24.3322C36.2317 24.2932 36.2163 24.2036 36.1295 24.2172C36.0775 24.2309 36.0582 24.301 36.0967 24.34C38.3564 26.5141 40.4195 28.9357 42.6368 31.1682C42.8103 31.3397 42.9819 31.5111 43.1515 31.6826H43.1535Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M42.44 29.8457C43.0377 30.5353 43.539 31.0438 44.1984 31.6477C44.3584 31.6477 44.5204 31.6458 44.6804 31.6458C43.861 30.9055 43.0647 30.2119 42.3976 29.6041C42.0023 29.23 41.6148 28.8482 41.2253 28.4703C41.1308 28.3923 41.0306 28.2482 40.9284 28.1975C40.8879 28.1975 40.8628 28.2521 40.8937 28.2813C41.3737 28.7469 42.1218 29.5262 42.44 29.8457Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M44.9602 31.6498C45.0894 31.6498 45.2205 31.6536 45.3496 31.6556C45.2185 31.566 45.0894 31.4764 44.9717 31.3887C44.4512 31.0244 43.9074 30.5861 43.3676 30.0873C43.1979 29.9334 43.0321 29.7698 42.8547 29.6256C42.8084 29.6042 42.7641 29.6685 42.8027 29.7035C43.5276 30.3425 44.2198 31.0263 44.9602 31.6498Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M45.6754 31.6652C45.7815 31.6691 45.8894 31.671 45.9955 31.6749C45.6041 31.3905 45.2455 31.1217 44.8502 30.8041C44.748 30.734 44.6574 30.6346 44.5494 30.5801C44.5109 30.5801 44.4877 30.6307 44.5166 30.658C44.9042 30.9833 45.2859 31.3301 45.6735 31.6652H45.6754Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M41.6418 31.2134C41.8153 31.3867 41.985 31.566 42.1547 31.7433C42.2337 31.7374 42.3128 31.7335 42.3918 31.7277C41.4471 30.8393 40.51 29.9432 39.6116 29.008C39.2356 28.6282 38.8615 28.2463 38.4856 27.8645C38.3988 27.7924 38.3063 27.6463 38.2099 27.6132C38.1559 27.6132 38.125 27.6833 38.1655 27.7223C39.332 28.8795 40.4908 30.0425 41.6437 31.2134H41.6418Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M41.6341 31.7783C41.7324 31.7725 41.8307 31.7647 41.9291 31.7588C41.3699 31.2231 40.7819 30.7185 40.2517 30.1536C40.0261 29.9178 39.8024 29.6802 39.571 29.4503C39.5306 29.4074 39.4611 29.4737 39.5055 29.5165C40.2439 30.2432 40.913 31.0361 41.6341 31.7783Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M41.1677 31.8095C41.2641 31.8036 41.3605 31.7978 41.4569 31.7919C41.2294 31.5776 40.9999 31.3672 40.7801 31.1452C40.5912 30.9679 40.4273 30.7575 40.2287 30.5919C40.1458 30.551 40.0648 30.6698 40.1323 30.7341C40.4735 31.0497 40.8264 31.4432 41.1696 31.8095H41.1677Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M40.6739 31.7237C40.7703 31.7412 40.8648 31.7626 40.9573 31.7899C40.7336 31.5756 40.5081 31.3652 40.2902 31.1451C40.2324 31.0535 40.1012 31.1314 40.1726 31.2191C40.3288 31.3789 40.5004 31.5542 40.6739 31.7237Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M12.856 31.6787C13.2975 31.2891 13.7449 30.8702 14.1845 30.4728C15.3779 29.376 16.5444 28.25 17.7244 27.1376C18.5149 26.407 19.317 25.6823 20.146 24.9965C20.1865 24.9654 20.2367 24.9264 20.2964 24.8855C20.3099 24.8777 20.3196 24.866 20.3234 24.8504C20.3369 24.8037 20.281 24.7569 20.2367 24.7842C18.1119 26.5259 16.1299 28.437 14.0225 30.1981C13.4884 30.6676 12.8541 31.1975 12.3162 31.6826C12.4955 31.6826 12.6748 31.6787 12.8541 31.6787H12.856Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M20.653 24.7724C20.3445 25.014 19.984 25.3471 19.6311 25.6374C19.5366 25.7192 19.4402 25.7991 19.3458 25.8809C19.3207 25.9043 19.3265 25.9491 19.3573 25.9666C19.3785 25.9783 19.4055 25.9744 19.4229 25.9588C19.6774 25.7426 19.9319 25.5283 20.1864 25.3121C20.3657 25.162 20.5373 25.0062 20.7108 24.8503C20.7494 24.8133 20.6993 24.7471 20.653 24.7744V24.7724Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M20.1297 25.6383C20.1297 25.6383 20.1297 25.6383 20.1268 25.6383C20.1326 25.6354 20.1326 25.6354 20.1297 25.6383Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M20.8207 24.8797C20.5758 25.1505 20.2538 25.2947 20.0071 25.5928C19.9858 25.6337 20.0302 25.6843 20.0745 25.6707C20.0822 25.6707 20.1227 25.6415 20.1285 25.6376C20.3927 25.4447 20.6125 25.1992 20.8631 24.9908C20.8843 24.9693 20.9152 24.9518 20.9152 24.9187C20.9152 24.87 20.8535 24.8447 20.8207 24.8797Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M21.0058 25.0685C20.8362 25.2126 20.5682 25.3938 20.4486 25.5711C20.4043 25.6335 20.491 25.6588 20.5103 25.6296C20.7224 25.4932 20.8863 25.3023 21.0752 25.1367C21.1196 25.0938 21.0502 25.0237 21.0078 25.0685H21.0058Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M21.1234 25.2889C21.0482 25.3629 20.9672 25.4311 20.8959 25.5052C20.8708 25.5285 20.8708 25.5714 20.8959 25.5928C20.9383 25.6337 20.9865 25.5967 21.0154 25.5597C21.0752 25.4915 21.1388 25.4292 21.2063 25.3688C21.2603 25.3162 21.1774 25.2324 21.1234 25.285V25.2889Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M21.4301 25.6277C21.4011 25.6531 21.3973 25.6394 21.378 25.6842C21.3587 25.7505 21.4455 25.7972 21.4937 25.7485C21.5766 25.7057 21.511 25.5829 21.4301 25.6277Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M13.7313 31.6709C14.9692 30.5565 16.1491 29.3798 17.387 28.2655C18.1659 27.5758 18.9198 26.8589 19.6852 26.1537C19.7508 26.0933 19.8183 26.0348 19.8857 25.9783C19.8954 25.9686 19.9012 25.9569 19.9012 25.9433C19.9012 25.9024 19.8472 25.877 19.8163 25.9082C19.2302 26.4206 18.6749 26.9661 18.0734 27.4589C17.2906 28.1155 16.5058 28.7506 15.7211 29.4772C15.5148 29.6701 15.2989 29.8688 15.0791 30.0656C15.7616 29.4013 16.4422 28.733 17.1093 28.1057C17.734 27.5252 18.3703 26.8998 18.9969 26.3543C19.074 26.29 19.1531 26.2238 19.2283 26.1576C19.2379 26.1478 19.2437 26.1342 19.2437 26.1186C19.2437 26.0719 19.1839 26.0446 19.1511 26.0796C17.065 27.9362 14.9692 29.7831 12.9158 31.6767C13.1876 31.6748 13.4576 31.6728 13.7294 31.6689L13.7313 31.6709Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M14.0898 31.6671C14.3867 31.3846 14.6817 31.1022 14.9806 30.8236C16.309 29.5865 17.6374 28.3494 18.9755 27.124C19.3804 26.7519 19.793 26.3876 20.196 26.0116C20.2326 25.9668 20.304 25.9434 20.3155 25.885C20.3155 25.8421 20.2596 25.8149 20.2288 25.848C19.419 26.6194 18.5571 27.3325 17.7126 28.063C16.39 29.2534 15.0692 30.4456 13.7755 31.6691C13.8816 31.6691 13.9876 31.6671 14.0936 31.6652L14.0898 31.6671Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M14.7994 31.6571C15.7615 30.7707 16.7429 29.8648 17.7127 29.0212C18.6459 28.1972 19.527 27.3166 20.4563 26.4886C20.6376 26.3152 20.8477 26.1691 21.027 25.9957C21.054 25.9392 20.9731 25.8788 20.9268 25.9276C20.0437 26.6912 19.1915 27.488 18.3181 28.2614C17.7455 28.766 17.1651 29.2609 16.5828 29.7537C17.3464 29.0485 18.1118 28.3472 18.8792 27.6458C19.4981 27.0809 20.0861 26.5354 20.6781 25.9646C20.6973 25.9431 20.7282 25.9276 20.7301 25.8944C20.7301 25.8574 20.6819 25.836 20.6549 25.8633C19.7507 26.7166 18.7731 27.5192 17.8554 28.279C17.1131 28.9336 16.392 29.6115 15.6574 30.2758C15.1349 30.7337 14.6181 31.1934 14.1091 31.6649C14.3386 31.6629 14.568 31.659 14.7975 31.6551L14.7994 31.6571Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M15.2717 31.6497C15.3084 31.6497 15.345 31.6497 15.3816 31.6497C15.692 31.4082 15.9909 31.0633 16.2955 30.8101C16.6754 30.4925 17.1458 30.062 17.5681 29.647C17.6028 29.6217 17.6336 29.5866 17.6645 29.5633C18.0134 29.2613 18.3509 28.9457 18.6825 28.6262C19.4036 27.9365 20.1073 27.2294 20.8458 26.5572C21.0097 26.4014 21.189 26.2553 21.3413 26.0877C21.3625 26.0449 21.3008 26.002 21.2661 26.0371C20.6086 26.5767 19.9569 27.1885 19.3052 27.7709C19.0199 28.032 18.7307 28.2872 18.4434 28.5444C18.3817 28.5931 18.3161 28.6515 18.1889 28.7626C17.892 29.0041 17.7474 29.0996 17.4755 29.3645C16.7216 30.0795 15.9639 30.7925 15.1792 31.4724C15.1233 31.525 15.1329 31.601 15.1715 31.6536C15.2042 31.6536 15.239 31.6536 15.2717 31.6536V31.6497Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M21.7732 25.9334C20.8863 26.7711 19.9763 27.5855 19.099 28.4329C19.0412 28.4874 19.0836 28.5946 19.1646 28.5907C19.1973 28.5907 19.2243 28.5732 19.2455 28.5498C19.4171 28.3939 19.583 28.2322 19.7526 28.0744C20.3233 27.5465 20.8439 26.9698 21.3992 26.4282C21.5457 26.2782 21.7058 26.138 21.8446 25.9821C21.8658 25.9393 21.8041 25.8983 21.7713 25.9334H21.7732Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M21.9315 26.0954C21.2586 26.6876 20.6185 27.313 20.0188 27.9793C19.9976 28.0065 19.9648 28.028 19.9494 28.0591C19.9301 28.0981 19.9648 28.1507 20.0092 28.1487C20.6185 27.6383 21.1487 27.0071 21.7097 26.4324C21.8042 26.3389 21.9006 26.2473 21.999 26.1597C22.0067 26.1519 22.0125 26.1402 22.0125 26.1266C22.0125 26.0876 21.9604 26.0642 21.9334 26.0934L21.9315 26.0954Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M22.1243 26.2376C21.7715 26.5863 21.3916 26.9078 21.0407 27.2604C20.873 27.4376 20.7766 27.5799 20.6166 27.7455C20.5954 27.7708 20.5606 27.7942 20.5626 27.8312C20.5626 27.876 20.6069 27.9091 20.6493 27.8974C20.7766 27.8 20.8769 27.6656 21.0041 27.5643C21.3184 27.2837 21.5729 26.9448 21.866 26.6428C21.9739 26.5298 22.0896 26.4227 22.2072 26.3194C22.2188 26.3077 22.2246 26.2941 22.2246 26.2785C22.2246 26.2278 22.159 26.2006 22.1262 26.2376H22.1243Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M22.3826 26.3932C21.9199 26.8238 21.4186 27.192 21.0947 27.6732C21.0407 27.7258 21.1236 27.8095 21.1776 27.755C21.4109 27.5621 21.731 27.2563 21.9141 27.0322C22.0896 26.8316 22.2824 26.6426 22.4521 26.44C22.4713 26.401 22.4154 26.3621 22.3846 26.3952L22.3826 26.3932Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M22.5463 26.5666C22.2513 26.8744 21.7866 27.2699 21.5899 27.5505C21.5514 27.6284 21.6632 27.7024 21.7211 27.6381C21.9486 27.4316 22.1259 27.1803 22.3419 26.9641C22.4287 26.853 22.5983 26.7283 22.6504 26.6095C22.6504 26.5569 22.5829 26.5277 22.5463 26.5666Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M22.7317 26.7676C22.5139 26.9682 22.1321 27.315 21.9702 27.5176C21.8892 27.5975 22.0145 27.7241 22.0955 27.6423C22.3191 27.4299 22.5563 27.1338 22.7298 26.9468C22.7607 26.9 22.8204 26.865 22.8301 26.8085C22.8301 26.7598 22.7664 26.7325 22.7317 26.7676Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M22.8607 26.9993C22.6795 27.1824 22.4828 27.3538 22.3209 27.5545C22.3209 27.5545 22.3189 27.5584 22.317 27.5603C22.3112 27.5701 22.2996 27.5895 22.3035 27.5993C22.3035 27.6168 22.3112 27.6344 22.3228 27.646C22.3768 27.6986 22.4327 27.6344 22.4732 27.5954C22.5811 27.4882 22.6833 27.3791 22.7913 27.272C22.8453 27.2019 22.9725 27.1317 22.9899 27.0499C22.9918 26.9856 22.907 26.9505 22.8626 26.9973L22.8607 26.9993Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M22.3132 27.5665C22.3132 27.5665 22.3153 27.5624 22.3174 27.5624C22.3174 27.5624 22.3174 27.5624 22.3174 27.5603C22.3174 27.5603 22.3153 27.5644 22.3112 27.5685L22.3132 27.5665Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M23.1674 27.2115C23.0632 27.307 22.9668 27.4122 22.8724 27.5193C22.8512 27.5388 22.8434 27.5739 22.8569 27.5992C22.8781 27.6576 22.9591 27.6557 22.9919 27.6089C23.0844 27.5096 23.1751 27.4102 23.2638 27.3089C23.3274 27.2466 23.2291 27.1472 23.1674 27.2115Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M23.4567 27.4201C23.3815 27.4863 23.3063 27.5525 23.26 27.6421C23.2465 27.6636 23.2485 27.6908 23.26 27.7142C23.3603 27.8428 23.5203 27.5506 23.5608 27.5253C23.6302 27.459 23.5222 27.3519 23.4567 27.4201Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M23.8172 27.6031C23.7999 27.6207 23.7786 27.6402 23.769 27.6635C23.7632 27.6694 23.742 27.6986 23.7439 27.7161C23.7227 27.7902 23.8153 27.8408 23.8731 27.796C23.8885 27.7863 23.8924 27.7824 23.8924 27.7804C23.9252 27.7648 23.956 27.7376 23.9715 27.7064C24.0158 27.6148 23.8866 27.5291 23.8172 27.6031Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M24.3414 27.7318C24.3183 27.761 24.2875 27.7883 24.2894 27.8292C24.2875 27.8935 24.3627 27.9461 24.4205 27.9149C24.461 27.8955 24.5053 27.8487 24.5053 27.798C24.5073 27.7143 24.3974 27.6695 24.3414 27.7299V27.7318Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M15.9545 31.6397C16.2091 31.402 16.4771 31.1332 16.7258 30.8955C17.4064 30.2584 18.087 29.6194 18.7695 28.9863C18.8505 28.9142 18.9315 28.8402 19.0144 28.7681C19.026 28.7564 19.0317 28.7408 19.0317 28.7233C19.0317 28.6707 18.9623 28.6395 18.9257 28.6785C18.0658 29.3525 17.2656 30.0948 16.4597 30.8312C16.1493 31.1078 15.8215 31.3708 15.5381 31.6436C15.6769 31.6416 15.8157 31.6397 15.9526 31.6377L15.9545 31.6397Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M16.5002 31.6357C16.6255 31.513 16.7527 31.3824 16.8838 31.2461C17.254 30.8681 17.6204 30.4843 17.9751 30.0908C18.3183 29.7168 18.6904 29.368 19.0452 29.0057C19.1185 28.92 19.2573 28.8323 19.3016 28.7368C19.3016 28.6959 19.2496 28.6725 19.2207 28.7037C18.4957 29.4499 17.7091 30.1317 16.9436 30.835C16.6255 31.1194 16.3343 31.3824 16.0895 31.6396C16.2264 31.6396 16.3633 31.6396 16.5021 31.6396L16.5002 31.6357Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M19.7989 28.217C19.7179 28.2968 19.6369 28.3767 19.556 28.4546C19.5405 28.4702 19.5328 28.4975 19.5444 28.5189C19.5675 28.5735 19.6331 28.5559 19.662 28.515C19.7353 28.4429 19.8143 28.3767 19.8914 28.3066C19.9512 28.2501 19.8587 28.1566 19.8008 28.217H19.7989Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M16.9106 31.6359C17.4871 31.0495 18.0925 30.356 18.6767 29.7676C18.9524 29.4871 19.2378 29.2182 19.527 28.9513C19.5559 28.9182 19.6099 28.8968 19.6138 28.8481C19.6138 28.8013 19.554 28.776 19.5212 28.8091C18.5765 29.7306 17.4563 30.7651 16.552 31.6359C16.6715 31.6359 16.7911 31.6359 16.9126 31.6359H16.9106Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M17.3136 31.6376C17.331 31.6181 17.3483 31.5987 17.3657 31.5792C17.9074 30.9694 18.4145 30.3655 19.045 29.8025C19.205 29.6466 19.3863 29.5102 19.5309 29.3408C19.554 29.292 19.4846 29.2453 19.448 29.2843C19.0007 29.6992 18.5206 30.2018 18.0443 30.6324C17.6857 30.9616 17.304 31.2714 16.9473 31.6357C17.0687 31.6357 17.1902 31.6357 17.3117 31.6357L17.3136 31.6376Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M17.7358 31.6417C18.2468 31.0884 18.7693 30.5488 19.2995 30.015C19.3516 29.9507 19.4537 29.8922 19.4846 29.8221C19.4846 29.787 19.4383 29.7656 19.4133 29.7929C18.8078 30.3715 18.2063 30.952 17.6086 31.5384C17.5739 31.5716 17.5372 31.6066 17.5006 31.6417C17.5797 31.6417 17.6568 31.6417 17.7358 31.6436V31.6417Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M18.1429 31.6454C18.2084 31.5695 18.2701 31.4993 18.3202 31.4409C18.756 30.9305 19.2226 30.4473 19.7065 29.9817C19.747 29.9427 19.6834 29.8765 19.6429 29.9174C19.1744 30.3635 18.7348 30.8369 18.2643 31.2792C18.1525 31.3863 18.0233 31.5091 17.8922 31.6396C17.9751 31.6396 18.06 31.6396 18.1429 31.6415V31.6454Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M18.5554 31.6513C18.7829 31.3864 18.9699 31.1506 19.2186 30.8915C19.3363 30.7668 19.4674 30.6499 19.585 30.5272C19.61 30.4766 19.5368 30.4279 19.5001 30.4688C19.2456 30.7103 19.0123 30.9733 18.7559 31.211C18.6074 31.3552 18.4532 31.4954 18.3086 31.6455C18.3915 31.6455 18.4744 31.6474 18.5554 31.6494V31.6513Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M18.966 31.6573C18.9911 31.6573 19.0181 31.6573 19.0431 31.6573C19.1569 31.5287 19.2706 31.4001 19.3844 31.2696C19.4885 31.1468 19.6023 31.0319 19.7102 30.917C19.7334 30.8702 19.6659 30.8235 19.6293 30.8624C19.3613 31.1157 19.1087 31.3845 18.858 31.6534C18.8927 31.6534 18.9294 31.6534 18.9641 31.6534L18.966 31.6573Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M19.7372 31.6709C19.8683 31.5209 19.9975 31.3729 20.1324 31.2267C20.198 31.1508 20.277 31.0806 20.3368 31.0008C20.3426 30.9891 20.3426 30.9735 20.3368 30.9618C20.3252 30.9287 20.277 30.9189 20.2539 30.9443C20.0264 31.1839 19.7989 31.4235 19.5771 31.667C19.6311 31.667 19.6851 31.667 19.7391 31.669L19.7372 31.6709Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M19.4597 31.6668C19.6352 31.4759 19.8068 31.283 19.9899 31.1019C20.0131 31.0707 20.0593 31.0493 20.0613 31.0064C20.0613 30.9597 20.0015 30.9343 19.9707 30.9694C19.7586 31.2051 19.5388 31.435 19.319 31.6649C19.3652 31.6649 19.4134 31.6649 19.4597 31.6668Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M19.5619 31.1683C19.4501 31.291 19.3325 31.4099 19.2206 31.5326C19.1994 31.554 19.2033 31.591 19.2303 31.6066C19.2476 31.6164 19.2727 31.6144 19.2881 31.5988C19.3961 31.4819 19.5041 31.3689 19.6101 31.2521C19.6699 31.2092 19.6275 31.1196 19.5619 31.1683Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M19.9935 31.6747C20.0533 31.6065 20.1111 31.5403 20.1709 31.474C20.2499 31.3727 20.3656 31.289 20.4254 31.1779C20.4254 31.139 20.3753 31.1175 20.3483 31.1468C20.1902 31.324 20.0301 31.4994 19.8701 31.6747C19.9106 31.6747 19.9511 31.6747 19.9916 31.6767L19.9935 31.6747Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M20.4988 31.6828C20.5315 31.6419 20.5643 31.6029 20.5952 31.562C20.6395 31.4938 20.7224 31.4392 20.7379 31.3555C20.7398 31.2678 20.6164 31.2347 20.574 31.3107C20.4891 31.4315 20.4004 31.5522 20.3195 31.6769C20.3792 31.6769 20.439 31.6789 20.4988 31.6808V31.6828Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M10.2124 31.7198C10.5401 31.71 10.8679 31.7042 11.1957 31.6983C11.7568 31.1431 12.3217 30.5918 12.9117 30.0677C13.1739 29.8281 13.4477 29.6021 13.7137 29.3664C13.762 29.3196 13.6868 29.2397 13.6386 29.2904C12.8635 29.9937 12.046 30.6502 11.2477 31.3301C11.4888 31.0866 11.7298 30.847 11.9457 30.658C12.2446 30.3814 12.5511 30.1145 12.8615 29.8515C12.9522 29.7599 13.1141 29.6664 13.172 29.5631C13.172 29.5261 13.1257 29.5066 13.0987 29.5339C12.3757 30.1554 11.6507 30.81 10.9335 31.3866C11.0357 31.2912 11.134 31.1996 11.2227 31.1197C11.7375 30.6502 12.2581 30.1866 12.7863 29.7307C12.8133 29.7015 12.8615 29.682 12.8673 29.6411C12.8673 29.608 12.8249 29.5885 12.7998 29.6138C12.3699 29.9781 11.9419 30.3502 11.5138 30.7048C11.535 30.6853 11.5562 30.6639 11.5774 30.6444C11.8223 30.4145 12.0691 30.1866 12.3198 29.9625C12.3583 29.9197 12.4277 29.8924 12.447 29.8359C12.447 29.8047 12.4065 29.7872 12.3853 29.8106C11.9091 30.208 11.4598 30.6366 10.9932 31.0437C10.7272 31.2736 10.4688 31.4957 10.2104 31.7217L10.2124 31.7198Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M11.1997 31.6983C11.5487 31.6924 11.8957 31.6885 12.2447 31.6846C13.0931 30.9112 13.9742 30.0716 14.7589 29.3566C14.8727 29.2592 14.9864 29.1618 15.104 29.0702C15.2101 28.9825 15.2949 28.9299 15.4145 28.8306C15.4742 28.7604 15.3798 28.6533 15.3026 28.7039C15.1619 28.813 15.0289 28.9338 14.8997 29.0585C14.8862 29.0527 14.8669 29.0546 14.8476 29.0702C14.0783 29.7287 13.1991 30.4378 12.4086 31.0982C12.8887 30.6229 13.3611 30.1534 13.9144 29.6917C14.1014 29.5358 14.2827 29.3722 14.4524 29.2592C14.5179 29.2202 14.4466 29.1189 14.3868 29.1754C13.9993 29.4968 13.4517 29.9644 13.0044 30.3501C12.7884 30.5235 12.5783 30.6911 12.372 30.8606C12.6111 30.6326 12.8521 30.4066 13.0969 30.1865C13.3804 29.9352 13.6271 29.7384 13.9144 29.5007C13.9568 29.454 14.034 29.4228 14.0455 29.3585C14.0455 29.3079 13.9781 29.2767 13.9433 29.3157C13.1625 30.0248 12.3411 30.6891 11.5545 31.3924C11.4465 31.4879 11.325 31.595 11.2016 31.7041L11.1997 31.6983Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M9.85567 31.7294C10.2124 31.4002 10.5691 31.0729 10.9392 30.7592C11.0916 30.6267 11.2516 30.5021 11.3962 30.3598C11.4097 30.3462 11.4174 30.3287 11.4174 30.3111C11.4174 30.2507 11.3403 30.2176 11.2979 30.2624C10.9778 30.5625 10.5729 30.8975 10.2085 31.1937C10.2933 31.1099 10.3762 31.0281 10.463 30.9482C10.5594 30.8508 10.6655 30.7631 10.7541 30.6618C10.7715 30.6267 10.7214 30.5936 10.6944 30.6228C10.2837 31.0125 9.8441 31.3709 9.41992 31.7489C9.56453 31.743 9.70913 31.7352 9.85374 31.7313L9.85567 31.7294Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M10.195 31.7198C10.328 31.5932 10.4611 31.4685 10.596 31.3419C11.0029 30.9522 11.4193 30.5723 11.8242 30.1808C11.8377 30.1632 11.8628 30.1515 11.8647 30.1282C11.8647 30.1009 11.8281 30.0853 11.8088 30.1048C11.1764 30.6756 10.4649 31.225 9.87109 31.7295C9.97907 31.7256 10.087 31.7237 10.195 31.7198Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M9.40461 31.7469C9.54922 31.6067 9.69382 31.4625 9.84614 31.33C9.98303 31.1995 10.1334 31.0787 10.2626 30.9423C10.2857 30.8956 10.2202 30.8527 10.1836 30.8897C9.85771 31.1878 9.52415 31.4742 9.18481 31.7547C9.25808 31.7508 9.33135 31.7489 9.40461 31.745V31.7469Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M9.13675 31.7586C9.21966 31.6827 9.29871 31.6106 9.37198 31.5463C9.52429 31.4002 9.70746 31.2813 9.84821 31.1255C9.87713 31.067 9.79422 31.0105 9.74988 31.0592C9.45681 31.3203 9.12133 31.5775 8.86682 31.7723C8.95744 31.7684 9.04613 31.7625 9.13675 31.7586Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.4784 31.5872C30.5652 31.6204 30.6635 31.6515 30.7676 31.6807C31.3576 31.6846 31.9476 31.6885 32.5376 31.6924C31.8377 31.4275 31.2014 31.1431 30.517 30.7787C30.2374 30.6307 29.954 30.4865 29.6763 30.3287C29.6493 30.3131 29.6204 30.356 29.6512 30.3735C30.2644 30.7203 30.8929 31.0398 31.5157 31.371C31.5832 31.4061 31.6487 31.4431 31.7162 31.4781C30.8736 31.1976 30.1795 30.8664 29.31 30.3794C28.6776 30.0404 28.0625 29.6741 27.4398 29.3176C27.3993 29.3001 27.3626 29.2631 27.3183 29.2592C27.299 29.265 27.2932 29.2943 27.3125 29.304C28.2495 29.8631 29.1924 30.4105 30.1294 30.9658C30.2798 31.0593 30.4186 31.1431 30.5497 31.2171C30.4919 31.1976 30.4418 31.1801 30.409 31.1645C29.7033 30.8391 29.0131 30.4768 28.3344 30.0988C27.5323 29.643 26.7244 29.1949 25.9185 28.7449C25.7681 28.663 25.6274 28.5637 25.4808 28.476C25.4596 28.4721 25.4461 28.5052 25.4673 28.5169C26.576 29.2533 27.7463 29.8865 28.855 30.6229C29.3447 30.9521 30.0851 31.4372 30.4784 31.5853V31.5872Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M28.6025 30.8896C28.9958 31.1546 29.3853 31.4371 29.794 31.6767C29.9386 31.6767 30.0832 31.6767 30.2278 31.6767C29.9945 31.5695 29.7593 31.4566 29.5202 31.3163C28.7953 30.8877 28.0703 30.4591 27.3569 30.011C27.1564 29.8824 26.952 29.7578 26.7554 29.6253C26.7399 29.6214 26.7284 29.6467 26.7457 29.6565C27.3569 30.0792 27.9951 30.461 28.6025 30.8896Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M28.5543 31.178C28.7991 31.3416 29.0382 31.5111 29.2792 31.6786C29.3891 31.6786 29.501 31.6786 29.6109 31.6786C29.0536 31.3533 28.4868 31.0455 27.9489 30.6851C27.6307 30.4825 27.3184 30.2701 27.006 30.0597C26.9868 30.048 26.9636 30.0753 26.981 30.0928C27.4784 30.4825 28.0298 30.8195 28.5543 31.178Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.8386 31.6534C35.8984 31.6807 35.9581 31.7099 36.0198 31.7392C36.3187 31.747 36.6195 31.7567 36.9183 31.7664C36.6445 31.593 36.3303 31.4898 36.0411 31.3398C34.7126 30.7437 33.2916 30.0618 31.9266 29.2825C31.1823 28.8384 30.4362 28.3981 29.7035 27.9344C29.6379 27.8993 29.5762 27.8409 29.5068 27.8234C29.4837 27.8292 29.4779 27.8643 29.4991 27.876C31.5718 29.1988 33.6425 30.541 35.8386 31.6515V31.6534Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.5885 28.8171C32.1329 29.7697 33.6425 30.7847 35.2216 31.6828C35.2448 31.6964 35.2679 31.7081 35.293 31.7218C35.5243 31.7276 35.7557 31.7334 35.9851 31.7393C35.5687 31.5211 35.0307 31.2717 34.6239 31.0652C33.9742 30.7399 33.3398 30.3853 32.7036 30.0347C32.0847 29.6762 31.4619 29.3236 30.8661 28.9262C30.7851 28.8697 30.7061 28.8112 30.6232 28.7547C30.6116 28.7469 30.5943 28.7489 30.5846 28.7567C30.5653 28.7703 30.5673 28.8034 30.5885 28.8132V28.8171Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.7375 31.71C34.8262 31.71 34.9149 31.7139 35.0036 31.7159C34.4753 31.4412 33.9509 31.1606 33.4399 30.8548C33.1237 30.66 32.8152 30.4535 32.4971 30.2625C32.4836 30.2547 32.4682 30.2762 32.4836 30.2859C33.2163 30.7691 33.9663 31.258 34.7356 31.712L34.7375 31.71Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.3579 31.706C34.4466 31.706 34.5372 31.706 34.6259 31.7079C34.2422 31.482 33.8393 31.291 33.4556 31.067C33.3958 31.0378 33.3418 30.9852 33.282 30.9657C33.2647 30.9696 33.2608 30.9949 33.2763 31.0027C33.6272 31.2268 33.9935 31.4839 34.3579 31.706Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.0379 31.7041C34.115 31.7041 34.1921 31.7041 34.2673 31.706C34.0861 31.6184 33.9068 31.5307 33.7275 31.4411C33.5887 31.3768 33.4576 31.2911 33.3187 31.2268C33.286 31.221 33.2686 31.2697 33.2975 31.2852C33.5482 31.4177 33.7911 31.5638 34.036 31.7041H34.0379Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M61.8347 31.9575C61.9099 31.9653 61.9851 31.9711 62.0584 31.9731C62.2319 31.977 62.4054 31.9731 62.577 31.9672C62.5616 31.9595 62.5462 31.9517 62.5288 31.9439C61.7422 31.5309 61.0018 31.0399 60.2441 30.5763C59.7659 30.2801 59.2993 29.9119 58.8385 29.6197C58.8 29.6002 58.7652 29.5613 58.7228 29.5574C58.7016 29.5632 58.6958 29.5944 58.717 29.6061C59.6579 30.2801 60.5969 31.0146 61.5841 31.6672C61.1175 31.3847 60.6682 31.075 60.2113 30.775C59.9973 30.6328 59.7678 30.473 59.5808 30.3172C59.5403 30.2938 59.5095 30.2236 59.4574 30.2431C59.4324 30.2568 59.4324 30.2957 59.4574 30.3094C60.1438 30.7964 60.8321 31.2756 61.532 31.7432C61.6323 31.8114 61.7325 31.8835 61.8328 31.9536L61.8347 31.9575Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M63.6509 31.8756C63.2962 31.7236 62.9144 31.5599 62.5307 31.3924C61.9292 31.0788 61.3315 30.7593 60.7415 30.4261C60.7261 30.4183 60.7106 30.4047 60.6914 30.4086C60.6644 30.4164 60.6567 30.4573 60.6837 30.4709C61.3334 30.8508 62.0063 31.1898 62.6406 31.5931C62.7178 31.6476 62.7987 31.7002 62.8797 31.7509C62.4382 31.5424 61.989 31.3203 61.4954 31.0515C60.9189 30.7495 60.3597 30.4183 59.7987 30.0871C59.7697 30.0755 59.7466 30.0443 59.7158 30.0462C59.6926 30.0521 59.6888 30.0852 59.71 30.0969C60.7203 30.7047 61.6997 31.3651 62.7197 31.9554C63.032 31.9379 63.3425 31.9067 63.6529 31.8717L63.6509 31.8756Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M65.3265 31.7528C65.5135 31.7489 65.7025 31.745 65.8895 31.743C65.6254 31.6885 65.3651 31.6223 65.1144 31.519C64.7423 31.3671 64.3471 31.2696 63.9923 31.0748C63.9537 31.0612 63.9171 31.0261 63.8766 31.0261C63.8515 31.032 63.8438 31.0709 63.8689 31.0846C64.3586 31.2833 64.8349 31.5365 65.3265 31.7528Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M63.6279 31.8305C63.653 31.8422 63.68 31.8558 63.7051 31.8675C63.8188 31.8558 63.9326 31.8422 64.0463 31.8305C63.9519 31.7974 63.8574 31.7643 63.7668 31.7292C63.2462 31.5188 62.6658 31.2753 62.1183 30.9636C62.0759 30.946 62.0431 30.8993 61.9968 30.8993C61.9698 30.9071 61.9621 30.948 61.9891 30.9616C62.5309 31.2597 63.0765 31.55 63.626 31.8305H63.6279Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M64.1196 31.6711C64.0965 31.6613 64.0734 31.6535 64.0522 31.6438C63.7707 31.5269 63.4005 31.3711 63.0746 31.2152C63.0611 31.2094 63.0496 31.1977 63.0341 31.2016C63.0187 31.2055 63.0149 31.2288 63.0303 31.2386C63.4082 31.4295 63.7861 31.6224 64.1621 31.823C64.5458 31.7841 64.9314 31.7665 65.315 31.7568C65.047 31.6594 64.7771 31.56 64.5091 31.449C64.2469 31.3379 63.8921 31.1957 63.6068 31.0574C63.4815 31.0009 63.36 30.9347 63.2347 30.8801C63.2 30.8743 63.1787 30.9269 63.2135 30.9444C63.6241 31.1295 64.004 31.3262 64.3684 31.5172C63.9326 31.3477 63.5065 31.1665 63.0168 30.9366C62.8568 30.8606 62.6813 30.7769 62.5386 30.695C62.5097 30.6834 62.4885 30.6502 62.4576 30.6522C62.4345 30.658 62.4287 30.6911 62.4519 30.7028C63.011 31.0067 63.5779 31.3594 64.1235 31.673L64.1196 31.6711Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M61.4549 31.936C61.5301 31.9321 61.6053 31.936 61.6824 31.9418C61.4992 31.8288 61.318 31.7119 61.1367 31.595C60.809 31.3866 60.4908 31.1664 60.165 30.956C60.1496 30.9463 60.1322 30.9716 60.1496 30.9814C60.5718 31.2989 61.0211 31.6262 61.4529 31.936H61.4549Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M61.1657 31.9925C61.1965 31.9828 61.2254 31.975 61.2563 31.9672C60.9921 31.8074 60.7318 31.6438 60.4793 31.4685C60.4446 31.4529 60.3848 31.3769 60.3559 31.4081C60.3501 31.4178 60.3539 31.4295 60.3636 31.4353C60.6335 31.6185 60.8996 31.8074 61.1676 31.9945L61.1657 31.9925Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M27.0506 30.7706C27.0313 30.7745 27.0274 30.8018 27.0448 30.8115C27.4516 31.1038 27.8623 31.3979 28.273 31.6863C28.3173 31.6863 28.3636 31.6863 28.4079 31.6863C27.9625 31.4135 27.5306 31.1155 27.1103 30.8037C27.091 30.794 27.0737 30.7687 27.0506 30.7726V30.7706Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M28.0742 31.2169C27.6462 30.9481 27.2259 30.6656 26.8133 30.3734C26.7651 30.3422 26.7188 30.3013 26.6687 30.274C26.661 30.274 26.6513 30.2779 26.6475 30.2837C26.6417 30.2935 26.6455 30.3071 26.6552 30.313C27.2124 30.7104 27.8005 31.137 28.2825 31.5169C28.3577 31.5754 28.4271 31.6299 28.4946 31.6825C28.7144 31.6806 28.9361 31.6786 29.1559 31.6786C29.0576 31.6182 28.9573 31.5598 28.859 31.4994C28.0742 31.0143 27.3435 30.4474 26.5491 29.9759C26.4662 29.9292 26.3891 29.8571 26.3004 29.824C26.285 29.8279 26.2811 29.8512 26.2966 29.859C27.1623 30.4123 27.9277 31.0124 28.7298 31.5929C28.5196 31.4741 28.296 31.3533 28.0762 31.215L28.0742 31.2169Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M28.0952 31.6884C27.7713 31.4897 27.4493 31.2871 27.1312 31.0747C26.8285 30.8663 26.5277 30.6539 26.2327 30.4357C26.2057 30.4279 26.1016 30.2896 26.0573 30.3422C26.0438 30.3578 26.0495 30.387 26.0669 30.3968C26.68 30.8 27.2893 31.2618 27.8793 31.6942C27.9506 31.6942 28.022 31.6923 28.0933 31.6903L28.0952 31.6884Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M27.5863 31.6983C27.6191 31.6983 27.6519 31.6983 27.6866 31.6983C27.6519 31.6769 27.6171 31.6554 27.5824 31.6321C27.3164 31.4606 27.0503 31.2853 26.7881 31.1061C26.7688 31.1022 26.7572 31.1314 26.7765 31.1411C27.0407 31.334 27.3144 31.5152 27.5882 31.6983H27.5863Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M26.7652 31.4196C26.9291 31.5034 27.0853 31.6047 27.2414 31.7041C27.2434 31.7041 27.2453 31.7041 27.2472 31.7041C27.2973 31.7041 27.3494 31.7041 27.3995 31.7002C27.2067 31.5813 27.0158 31.4586 26.8288 31.3281C26.7671 31.2794 26.6958 31.3748 26.7633 31.4177L26.7652 31.4196Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M39.2608 31.8346C39.3206 31.8131 39.3804 31.7936 39.4401 31.7761C38.2659 30.7611 37.0937 29.7422 35.9658 28.6766C35.692 28.4194 35.4182 28.1623 35.154 27.8954C35.0499 27.8019 34.9169 27.6168 34.8051 27.5583C34.7646 27.5583 34.7414 27.611 34.7723 27.6382C36.2665 29.0195 37.7454 30.4221 39.2146 31.8307C39.23 31.8307 39.2435 31.8346 39.2589 31.8346H39.2608Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M38.3373 31.587C38.4028 31.6533 38.4684 31.7234 38.5378 31.7935C38.6747 31.7974 38.8116 31.8033 38.9485 31.8111C38.4433 31.3474 37.9092 30.911 37.4156 30.4376C36.9201 29.9876 36.4381 29.522 35.9696 29.0428C35.906 28.9863 35.852 28.9083 35.7806 28.8616C35.7614 28.8616 35.7498 28.8869 35.7633 28.9025C36.6309 29.7889 37.487 30.685 38.3353 31.589L38.3373 31.587Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M38.2042 31.7859C38.2659 31.7859 38.3295 31.7859 38.3931 31.7878C38.1155 31.5326 37.8378 31.2813 37.5621 31.0241C37.1784 30.6598 36.8005 30.2897 36.4323 29.9098C36.4149 29.8962 36.4053 29.8728 36.3841 29.8669C36.3687 29.8669 36.3609 29.8864 36.3706 29.8981C36.9934 30.5157 37.5968 31.1527 38.2042 31.7878V31.7859Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.8841 31.7839C37.9767 31.7839 38.0712 31.7839 38.1656 31.7858C37.6316 31.3338 37.0069 30.8429 36.4959 30.3188C36.44 30.274 36.3995 30.1942 36.3301 30.1727C36.2877 30.1727 36.2646 30.2273 36.2954 30.2565C36.8526 30.7357 37.3578 31.2715 37.8822 31.7839H37.8841Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M39.5386 31.7489C39.6023 31.7333 39.664 31.7197 39.7295 31.71C39.2436 31.3242 38.7057 30.8878 38.2449 30.469C37.8689 30.1378 37.5199 29.7754 37.1536 29.4326C37.1208 29.4131 37.0977 29.3624 37.0591 29.3624C37.0456 29.3663 37.0418 29.3858 37.0534 29.3955C37.7455 30.0696 38.43 30.7515 39.153 31.3944C39.2764 31.5054 39.4056 31.6262 39.5406 31.7489H39.5386Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M39.9395 31.6867C40.0032 31.6808 40.0668 31.6789 40.1304 31.6769C39.9222 31.5094 39.7082 31.3496 39.4941 31.1723C39.2551 30.9795 39.0179 30.7827 38.7943 30.5723C38.7827 30.5606 38.7615 30.5782 38.775 30.5918C39.1529 30.9444 39.5462 31.3243 39.9395 31.6867Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.5258 31.782C37.5759 31.782 37.6279 31.782 37.6781 31.782C37.5643 31.6846 37.4506 31.5872 37.3426 31.484C37.1305 31.2872 36.9261 31.0846 36.7083 30.8937C36.6736 30.8567 36.6157 30.9131 36.6523 30.9502C36.9551 31.2151 37.2462 31.4918 37.5258 31.7801V31.782Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M29.3986 19.906C29.6897 19.6021 30.0272 19.3566 30.38 19.1307C30.7675 18.6689 31.1223 18.2326 31.4944 17.7845C32.63 16.4578 33.785 15.0629 34.909 13.7752C35.3409 13.2531 35.767 12.7271 36.222 12.2244C36.2413 12.1972 36.2779 12.1777 36.2857 12.1446C36.2857 12.1192 36.2529 12.1056 36.2355 12.1231C34.6005 13.9135 33.0137 15.7487 31.4096 17.5663C31.3209 17.6656 31.2303 17.7631 31.1396 17.8605C31.8357 17.0286 32.4777 16.1967 33.2162 15.285C33.6442 14.7785 34.1282 14.2369 34.5755 13.7284C34.6969 13.592 34.8242 13.4576 34.936 13.3135C34.9476 13.2881 34.9129 13.2628 34.8917 13.2842C34.2785 13.9739 33.6384 14.6246 33.0253 15.322C32.4334 15.9688 31.882 16.6526 31.29 17.2994C30.8948 17.7143 30.4802 18.1585 30.0676 18.6066C30.1486 18.5092 30.2315 18.4118 30.3164 18.3163C30.9758 17.5468 31.6043 16.789 32.2502 16.0136C32.5336 15.6863 32.8383 15.3766 33.1082 15.0395C33.1275 15.02 33.0966 14.985 33.0754 15.0064C32.0632 16.1519 31.0124 17.2682 30.0214 18.4332C30.6056 17.7241 31.2206 16.9624 31.8125 16.2708C32.1191 15.922 32.4237 15.5675 32.7554 15.2441C32.7669 15.2324 32.7669 15.211 32.7554 15.1993C32.7438 15.1876 32.7226 15.1876 32.711 15.1993C31.6178 16.3526 30.5998 17.576 29.5124 18.7352C29.4526 18.7975 29.3928 18.8579 29.333 18.9203C30.0696 18.1137 30.7887 17.2916 31.4809 16.448C31.7721 16.0974 32.0863 15.7642 32.3775 15.4155C32.4006 15.3941 32.364 15.3532 32.3408 15.3785C31.1281 16.8162 29.8228 18.1741 28.5001 19.5125C28.2263 19.7852 27.9564 20.0521 27.6923 20.3171C27.8369 20.1534 27.9815 19.9878 28.128 19.8242C28.8375 19.0177 29.6145 18.2774 30.3511 17.4962C30.7791 17.0422 31.1628 16.5474 31.5889 16.0896C31.6756 15.9922 31.7643 15.8967 31.853 15.7993C31.88 15.774 31.9109 15.7311 31.8723 15.7C31.8511 15.6824 31.8164 15.6883 31.8029 15.7136C30.9314 16.7636 29.9597 17.765 28.9629 18.7313C29.0246 18.6592 29.0843 18.5891 29.146 18.517C29.7129 17.8663 30.2797 17.2176 30.862 16.5844C31.0008 16.4325 31.1474 16.2863 31.2785 16.1266C31.292 16.0974 31.2515 16.0682 31.2283 16.0915C30.6441 16.7266 30.0676 17.3676 29.4622 17.9832C29.2656 18.1761 29.0708 18.3709 28.878 18.5676C29.3003 18.0436 29.8054 17.4397 30.2874 16.8922C30.4513 16.7013 30.621 16.5162 30.7868 16.3273C30.8022 16.3136 30.8022 16.2863 30.7868 16.2727C30.7733 16.2591 30.7463 16.2571 30.7328 16.2727C30.193 16.9156 29.63 17.539 29.0458 18.1429C28.5194 18.6475 28.0065 19.1638 27.5264 19.7112C27.1273 20.1632 26.7398 20.6229 26.3503 21.0827C26.7494 20.5801 27.1659 20.0697 27.6402 19.5378C28.1376 18.9242 28.9243 18.0358 29.5663 17.35C29.7842 17.1085 30.0021 16.8669 30.218 16.6234C30.2277 16.6097 30.2469 16.5981 30.2469 16.5786C30.2469 16.5513 30.2122 16.5357 30.193 16.5552C29.4044 17.4475 28.6042 18.3339 27.7675 19.1852C27.7655 19.1872 27.7617 19.1911 27.7597 19.193C28.1126 18.7858 28.4596 18.3787 28.8202 17.952C29.0188 17.7202 29.227 17.4942 29.4391 17.2721C29.4487 17.2507 29.4198 17.2293 29.4025 17.2468C28.3555 18.3124 27.2777 19.3469 26.2693 20.4496C25.3766 21.371 24.5611 22.3607 23.6934 23.3036C23.491 23.5315 23.2808 23.7536 23.0707 23.9757C23.1497 23.9192 23.2288 23.8647 23.3078 23.8082C23.7898 23.4595 24.2796 23.1205 24.7693 22.7815C25.1106 22.5458 25.4981 22.1873 25.8934 22.0178C25.9011 22.0081 25.9107 22.0003 25.9204 21.9925C26.038 21.8756 26.1652 21.8152 26.2906 21.7977C26.7186 21.4295 27.2662 21.1431 27.6865 20.8645C28.1145 20.5801 28.5676 20.1632 29.0323 19.9547C29.1711 19.8924 29.2829 19.8885 29.3986 19.906Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.2205 18.6009C31.6003 18.3534 31.9782 18.1041 32.3638 17.8684C32.5682 17.6073 32.763 17.3501 32.9828 17.0501C34.0355 15.6241 35.0265 14.4864 36.1274 12.9103C36.2489 12.7466 36.3974 12.5655 36.5381 12.3882C36.5767 12.3512 36.5169 12.2849 36.4764 12.3278C36.0098 12.9161 35.5702 13.5395 35.0689 14.1162C34.5792 14.6558 34.0548 15.2617 33.5805 15.8423C33.7983 15.5637 34.0239 15.2715 34.2688 14.9559C34.6602 14.4552 35.3793 13.5181 35.8999 12.8889C36.0445 12.7077 36.1988 12.5324 36.3492 12.3551C36.3627 12.3414 36.3627 12.3181 36.3492 12.3044C36.3357 12.2908 36.3106 12.2908 36.2971 12.3044C34.8241 13.9662 33.4069 15.6786 31.9647 17.3677C31.5232 17.8859 31.0836 18.406 30.6517 18.934C30.6382 18.9515 30.6247 18.9671 30.6132 18.9827C30.8156 18.8561 31.0219 18.7314 31.2205 18.6009Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M33.4262 17.28C33.6364 17.1787 33.8311 17.1592 34.0162 17.1904C34.3247 16.7657 34.6274 16.3468 34.9031 15.9494C35.4565 15.1506 36.0214 14.3616 36.5979 13.5785C36.7252 13.3934 36.8794 13.2239 36.9912 13.033C37.0009 12.9804 36.9218 12.9512 36.8948 12.9999C36.2509 13.8434 35.5818 14.7474 34.9571 15.5734C34.7797 15.8013 34.6081 16.0156 34.4365 16.228C34.5869 16.0137 34.7335 15.8072 34.8742 15.6085C35.4102 14.8565 35.9212 14.0869 36.4572 13.335C36.6018 13.1304 36.7464 12.9745 36.8813 12.77C36.8891 12.7232 36.8177 12.694 36.7946 12.7388C35.7862 14.0986 34.7258 15.4273 33.7521 16.715C33.7193 16.7579 33.6846 16.8027 33.6499 16.8455C34.3035 15.928 34.9282 14.9909 35.5953 14.0811C35.9578 13.5824 36.3376 13.0817 36.702 12.5888C36.7097 12.5752 36.7252 12.5654 36.7271 12.5498C36.7271 12.5284 36.6982 12.5148 36.6827 12.5323C35.9848 13.4265 35.2425 14.346 34.5889 15.2013C34.049 15.8617 33.5786 16.4267 33.0175 17.1689C32.8902 17.3423 32.7514 17.5274 32.6068 17.7183C32.8729 17.5625 33.1447 17.4124 33.4262 17.278V17.28Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M34.641 17.4904C35.2001 16.6118 35.7593 15.7331 36.3165 14.8545C36.5421 14.4922 36.7754 14.1357 37.0029 13.7753C37.0472 13.6895 37.1552 13.5687 37.1648 13.4869C37.1552 13.4519 37.1051 13.4441 37.0877 13.4772C36.3628 14.5604 35.5915 15.6377 34.8396 16.7287C35.312 15.9786 35.7246 15.326 36.224 14.5019C36.4457 14.1532 36.6944 13.785 36.9181 13.4577C36.9181 13.4558 36.9219 13.4519 36.9238 13.4499C36.9508 13.4109 36.9798 13.372 37.0067 13.333C37.0241 13.3038 37.0569 13.2785 37.0472 13.2395C37.0357 13.1947 36.972 13.185 36.9489 13.2259C36.411 14.0967 35.7728 14.9364 35.1963 15.7195C34.9399 16.0975 34.5639 16.6663 34.1821 17.2313C34.3422 17.2858 34.4945 17.3774 34.641 17.4884V17.4904Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.2174 17.991C35.5471 17.3092 35.8324 16.6799 36.2161 15.9104C36.4475 15.4487 36.6788 14.987 36.9507 14.5486C37.0702 14.3382 37.2226 14.1454 37.3363 13.933C37.3479 13.8726 37.2573 13.8376 37.2264 13.8941C36.7348 14.7474 36.2643 15.6143 35.736 16.4462C35.6146 16.639 35.4873 16.828 35.3639 17.0189C35.5529 16.6351 35.7437 16.2513 35.9577 15.8831C36.2759 15.324 36.5747 14.7532 36.9102 14.2019C37.0105 14.0402 37.1146 13.8824 37.2187 13.7246C37.2399 13.6895 37.184 13.6544 37.1628 13.6915C36.7695 14.3889 36.2971 15.0123 35.8922 15.6786C35.6685 16.0331 35.4834 16.4111 35.2598 16.7657C35.092 17.0364 34.9166 17.3033 34.745 17.5722C34.907 17.7027 35.0631 17.8508 35.2174 17.991Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M36.6904 17.387C36.4918 17.7182 36.351 18.0786 36.1775 18.4234C36.1563 18.4702 36.1331 18.513 36.1119 18.5578C36.1563 18.5715 36.2026 18.5851 36.2469 18.5968C36.3298 18.3572 36.4166 18.1273 36.5207 17.9091C36.594 17.7455 36.6691 17.5818 36.7521 17.424C36.7752 17.385 36.7135 17.348 36.6904 17.3889V17.387Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.6724 18.3573C35.7187 18.3885 35.7669 18.4138 35.8151 18.4392C35.9038 18.1606 35.9828 17.8956 36.1062 17.5976C36.2392 17.2975 36.4089 16.9819 36.5458 16.7034C36.5747 16.6254 36.6268 16.5494 36.6461 16.4696C36.6403 16.4442 36.6017 16.4384 36.5882 16.4618C36.3318 16.9099 36.1313 17.3852 35.8729 17.8313C35.7804 17.9638 35.684 18.1158 35.5895 18.2794C35.6859 18.0359 35.7823 17.7885 35.9018 17.5411C36.0927 17.1183 36.3356 16.5962 36.5709 16.1384C36.5786 16.1209 36.594 16.1033 36.5901 16.0838C36.5844 16.0644 36.5554 16.0585 36.5458 16.078C36.2219 16.7092 35.8652 17.2917 35.5316 17.845C35.9712 16.9293 36.4359 16.0234 36.9006 15.1214C37.0606 14.8331 37.2303 14.5292 37.3845 14.2487C37.3922 14.2272 37.4134 14.2097 37.4096 14.1863C37.4038 14.161 37.3672 14.1552 37.3537 14.1785C36.6461 15.4526 35.8806 16.6975 35.2231 18.0008C35.3716 18.1333 35.5181 18.2599 35.6685 18.3573H35.6724Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M36.6132 16.978C36.3452 17.4903 36.0772 17.9754 35.8478 18.4527C35.9114 18.4839 35.975 18.5112 36.0425 18.5345C36.1621 18.1956 36.2835 17.8566 36.4031 17.5429C36.4763 17.3559 36.5496 17.1689 36.6383 16.9896C36.6402 16.976 36.6209 16.9682 36.6132 16.9819V16.978Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.3636 17.1512C37.1014 17.6578 36.8353 18.1623 36.5885 18.6747C36.6386 18.6844 36.6907 18.6961 36.7408 18.7059C36.8681 18.3727 36.9973 18.0454 37.1341 17.7279C37.2074 17.5681 37.3115 17.3499 37.4002 17.1727C37.4137 17.1493 37.3771 17.124 37.3617 17.1512H37.3636Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M36.5787 18.673C36.6943 18.3457 36.8004 18.0203 36.9334 17.7008C37.051 17.4398 37.1995 17.1515 37.3364 16.8846C37.3557 16.8378 37.3981 16.7949 37.4039 16.7443C37.3981 16.7209 37.3653 16.717 37.3538 16.7384C37.1687 17.0657 37.0356 17.4184 36.8544 17.7456C36.6905 18.0379 36.5228 18.3301 36.3666 18.6262C36.4379 18.6437 36.5073 18.6574 36.5787 18.673Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.0144 18.7723C37.1802 18.3456 37.3364 17.9618 37.535 17.5118C37.5736 17.4631 37.5253 17.3988 37.4791 17.4514C37.2786 17.843 37.0318 18.293 36.8177 18.7255C36.8833 18.7411 36.9489 18.7567 37.0125 18.7723H37.0144Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.2902 18.8501C37.3557 18.6436 37.4232 18.441 37.4984 18.2793C37.5466 18.1546 37.6179 18.0397 37.6719 17.9189C37.6796 17.878 37.6199 17.8566 37.6006 17.8936C37.4541 18.178 37.3114 18.4663 37.1533 18.7449C37.1436 18.7625 37.134 18.7819 37.1224 18.7995C37.1784 18.8151 37.2343 18.8326 37.2902 18.8482V18.8501Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.5195 18.9302C37.5619 18.7724 37.6005 18.6107 37.6641 18.4607C37.693 18.3828 37.7258 18.3146 37.7489 18.2503C37.7547 18.2211 37.7123 18.2075 37.6988 18.2328C37.6448 18.3516 37.5446 18.5581 37.506 18.6341C37.4636 18.7159 37.4135 18.7977 37.3672 18.8776C37.4192 18.8952 37.4713 18.9127 37.5214 18.9322L37.5195 18.9302Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.7761 19.0295C37.78 19.01 37.7838 18.9905 37.7896 18.9691C37.8166 18.8132 37.8533 18.6768 37.9111 18.5619C37.9439 18.5054 37.8571 18.4547 37.8243 18.5112C37.7607 18.6671 37.6604 18.8035 37.5795 18.9515C37.645 18.9769 37.7106 19.0041 37.7761 19.0314V19.0295Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.9594 19.1133C37.9922 19.012 38.0288 18.9126 38.0635 18.8133C38.0693 18.7957 38.0655 18.7743 38.0558 18.7587C38.0308 18.7139 37.9594 18.7119 37.9344 18.7587C37.8997 18.8444 37.8572 18.9418 37.8148 19.047C37.863 19.0685 37.9112 19.0899 37.9594 19.1133Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.3943 14.3849C37.1591 14.87 36.7986 15.4116 36.6655 15.8597C36.6578 15.885 36.652 15.8772 36.6559 15.9084C36.6694 15.9532 36.7292 15.9474 36.7427 15.9045C36.9509 15.5558 37.1398 15.1155 37.3269 14.7083C37.3693 14.609 37.4618 14.496 37.4792 14.3947C37.4695 14.3557 37.4136 14.3479 37.3943 14.383V14.3849Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.5408 14.6714C37.5293 14.6539 37.5003 14.6559 37.4907 14.6753C37.3152 15.0669 37.0048 15.5325 36.893 15.8871C36.8756 15.9416 36.9412 15.9923 36.9894 15.9611C37.0684 15.8793 37.134 15.6319 37.1841 15.5364C37.2825 15.2949 37.3577 15.1117 37.4618 14.8779C37.4907 14.8176 37.5235 14.7591 37.5466 14.6948C37.5466 14.687 37.5466 14.6773 37.5408 14.6714Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.5581 15.0104C37.4752 15.2013 37.3904 15.3922 37.294 15.5773C37.2188 15.7059 37.1359 15.8345 37.105 15.9806C37.078 16.0663 37.1802 16.1442 37.2573 16.0975C37.319 16.0429 37.2901 16.0643 37.3248 15.9981C37.3942 15.8364 37.4039 15.6572 37.4617 15.4935C37.5138 15.3416 37.5697 15.1916 37.6314 15.0416C37.6449 14.9987 37.5812 14.9734 37.56 15.0123L37.5581 15.0104Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.6891 15.3473C37.6081 15.6162 37.3999 15.8538 37.3633 16.1461C37.3633 16.148 37.3633 16.15 37.3633 16.1519C37.3633 16.2026 37.4308 16.2357 37.4674 16.1948C37.4982 16.185 37.5754 15.9435 37.612 15.8207C37.6486 15.6668 37.6949 15.5149 37.7489 15.3649C37.7605 15.3259 37.6988 15.3084 37.6872 15.3473H37.6891Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M37.7701 15.6999C37.7412 15.7662 37.6911 15.885 37.6467 15.998C37.6236 16.0798 37.5561 16.1733 37.5947 16.2571C37.6814 16.337 37.72 16.1772 37.7316 16.1441C37.7682 16 37.8318 15.8616 37.8646 15.7175C37.8607 15.6707 37.7933 15.6571 37.7701 15.698V15.6999Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M37.8339 15.9726C37.8166 16.0408 37.753 16.4324 37.9091 16.2999C37.9516 16.1986 38.0113 16.0934 38.021 15.9843C38.0133 15.881 37.8552 15.8713 37.832 15.9707L37.8339 15.9726Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M38.1578 16.2085C38.1404 16.1754 38.0845 16.1812 38.0768 16.2183C38.0652 16.267 38.0498 16.3157 38.0459 16.3663C38.0459 16.3936 38.0363 16.4267 38.0517 16.452C38.0787 16.4832 38.1115 16.452 38.1173 16.4209C38.1308 16.3624 38.1732 16.2611 38.1578 16.2085Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M38.3658 16.4111C38.3369 16.3566 38.2482 16.3819 38.2502 16.4423C38.2502 16.4871 38.2328 16.5417 38.2617 16.5787C38.2868 16.606 38.3369 16.5923 38.3466 16.5573C38.3504 16.5086 38.389 16.4579 38.3658 16.4111Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M38.5644 16.7405C38.5606 16.7854 38.549 16.7698 38.5644 16.8107C38.5837 16.8477 38.6435 16.8399 38.6531 16.799C38.6917 16.7211 38.6011 16.6607 38.5644 16.7405Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M47.7903 23.3406C47.1772 22.7795 46.7356 22.3314 46.1341 21.8074C45.5653 21.2911 45.0254 20.7456 44.4856 20.2001C44.3853 20.1008 44.2812 20.0034 44.1809 19.904C44.1655 19.8962 44.1482 19.9196 44.1617 19.9313C44.663 20.4924 45.2182 21.0028 45.7176 21.5658C46.0145 21.9067 46.2864 22.2126 46.5602 22.5107C46.3905 22.3353 46.2189 22.1619 46.0492 21.9866C45.4612 21.3944 44.8558 20.8197 44.2831 20.2118C43.8397 19.7423 43.4232 19.2475 42.9933 18.7644C42.9682 18.7429 42.9547 18.7059 42.9238 18.6981C42.9046 18.6981 42.893 18.7195 42.9026 18.7351C44.3236 20.43 45.6694 22.1074 47.1964 23.699C47.395 23.5783 47.5936 23.4575 47.7922 23.3406H47.7903Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M47.6303 22.3257C47.6091 22.3081 47.5898 22.2906 47.5686 22.2731C46.9709 21.7393 46.377 21.1743 45.8449 20.586C45.814 20.5489 45.7948 20.5002 45.7523 20.471C45.7099 20.4515 45.6675 20.51 45.7041 20.5431C46.3076 21.1353 46.8957 21.7958 47.4992 22.4094C47.7035 22.6296 47.9368 22.8945 48.1605 23.1283C48.2858 23.0582 48.4111 22.9919 48.5365 22.9277C48.3764 22.7796 48.2126 22.6257 48.039 22.4601C47.208 21.6964 46.3944 20.9133 45.5769 20.1359C45.4824 20.0541 45.4034 19.947 45.2992 19.8788C45.2838 19.8788 45.2742 19.9002 45.2857 19.91C46.055 20.7243 46.861 21.5094 47.6283 22.3276L47.6303 22.3257Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M48.0217 23.2042C48.0622 23.1808 48.1026 23.1574 48.1431 23.1341C47.7151 22.7366 47.2909 22.3353 46.8957 21.9067C46.6797 21.6749 46.4619 21.445 46.2575 21.2034C46.2363 21.182 46.1977 21.2151 46.2228 21.2385C46.8147 21.9028 47.424 22.5496 48.0236 23.2062L48.0217 23.2042Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M44.9368 24.9032C45.1277 24.8018 45.3224 24.7044 45.5152 24.609C45.4535 24.5272 45.3899 24.4434 45.3282 24.3557C44.7748 23.594 44.2369 23.0329 43.6566 22.2926C43.1996 21.6692 42.6945 21.0185 42.2298 20.3659C42.0601 20.1282 41.902 19.8847 41.7246 19.6568C41.7092 19.6412 41.6784 19.6607 41.6919 19.6821C42.2298 20.4516 42.7716 21.2192 43.2864 22.0062C43.7202 22.6043 44.1501 23.2044 44.5435 23.8297C43.8841 22.9414 43.109 21.8796 42.3802 20.9036C41.7381 20.0347 41.1346 19.1386 40.5273 18.2463C40.4078 18.071 40.294 17.8898 40.1629 17.7203C40.132 17.693 40.0781 17.7359 40.1031 17.7729C41.4605 19.6685 42.706 21.64 44.0055 23.5745C44.3121 24.0206 44.6225 24.4629 44.9349 24.9051L44.9368 24.9032Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M45.5867 24.5719C45.6541 24.5388 45.7216 24.5037 45.7891 24.4706C45.3129 23.927 44.7884 23.3621 44.3758 22.8166C43.9092 22.2399 43.4581 21.6496 43.0127 21.0535C42.924 20.9386 42.8372 20.8236 42.7485 20.7087C42.7312 20.6931 42.7023 20.7165 42.7158 20.7379C43.568 21.8873 44.5108 23.064 45.2782 24.1589C45.3881 24.3089 45.4883 24.4433 45.5867 24.5719Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M45.8257 24.4551C45.9028 24.4162 45.9799 24.3772 46.0551 24.3383C45.6328 23.8882 45.2087 23.4421 44.8134 22.9687C44.53 22.6083 44.2196 22.2284 43.9516 21.8836C43.9342 21.8524 43.8822 21.8797 43.9014 21.9128C44.5878 22.7525 45.1701 23.6019 45.8276 24.4532L45.8257 24.4551Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M46.1649 24.2797C46.1649 24.2797 46.1649 24.2797 46.1668 24.2817C46.217 24.2563 46.2671 24.2291 46.3153 24.2037C46.1938 24.0946 46.0704 23.9778 45.9625 23.8609C45.7716 23.6661 45.5923 23.4595 45.3956 23.2706C45.3686 23.2433 45.3243 23.2862 45.3532 23.3134C45.6058 23.594 46.0126 24.0869 46.163 24.2797H46.1649Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M46.9091 23.8705C46.9573 23.8413 47.0074 23.8121 47.0556 23.7829C46.7992 23.5257 46.5428 23.2686 46.3056 22.9939C45.9258 22.5633 45.5498 22.1308 45.1873 21.6828C45.1063 21.5932 45.0408 21.4841 44.954 21.4061C44.9386 21.4061 44.929 21.4276 44.9405 21.4373C45.6269 22.2594 46.2574 23.0835 46.9091 23.8686V23.8705Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M46.7724 23.9483C46.7994 23.9327 46.8283 23.9171 46.8553 23.8996C46.7782 23.8158 46.701 23.7301 46.6316 23.6405C46.5102 23.5041 46.3964 23.3424 46.2788 23.2255C46.2402 23.2139 46.2094 23.2665 46.2383 23.2937C46.4253 23.5022 46.5969 23.7262 46.7705 23.9483H46.7724Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M44.4817 25.0123C44.5048 25.0473 44.528 25.0805 44.5492 25.1155C44.5897 25.0922 44.6301 25.0707 44.6706 25.0473C44.7362 25.0103 44.8017 24.9753 44.8654 24.9402C44.7574 24.7902 44.6398 24.6324 44.5453 24.496C44.1173 23.8882 43.5524 23.1674 43.053 22.4446C42.6809 21.8855 42.301 21.3536 41.9212 20.7614C41.7997 20.5822 41.6763 20.4068 41.5645 20.2218C41.5491 20.1945 41.5009 20.2179 41.5182 20.249C42.2683 21.4316 43.0241 22.6121 43.7375 23.8161C43.7837 23.8882 43.83 23.9622 43.8782 24.0382C43.5369 23.6427 43.2072 23.2492 42.893 22.844C42.6519 22.5245 42.4264 22.1933 42.2104 21.8582C42.1931 21.8426 42.1622 21.866 42.1757 21.8894C42.5401 22.4446 42.9277 22.9881 43.2882 23.5453C43.6314 24.0479 43.8936 24.4687 44.2368 24.8369C44.3178 24.9071 44.3949 25.0162 44.4778 25.0142L44.4817 25.0123Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M42.2067 22.955C42.1874 22.92 42.145 22.8479 42.1373 22.8343C41.9522 22.5245 41.7073 22.1933 41.4721 21.8115C41.2176 21.3829 40.9458 20.964 40.6893 20.5354C40.4541 20.1341 40.2208 19.7308 40.0049 19.3178C39.9875 19.2925 39.9837 19.2555 39.9567 19.2399C39.9393 19.2341 39.922 19.2555 39.9335 19.2711C40.3673 20.1068 40.7645 20.9504 41.1559 21.718C40.8744 21.2835 40.6045 20.8413 40.3558 20.3893C40.0916 19.9042 39.7851 19.4425 39.5344 18.9477C39.3339 18.5678 39.1411 18.186 38.9464 17.8022C38.8789 17.6911 38.8384 17.5489 38.7439 17.4612C38.7092 17.4515 38.6764 17.4905 38.6976 17.5236C39.4014 18.7723 40.0531 20.3094 40.5794 21.3381C40.7472 21.6264 41.0132 22.055 41.181 22.1427C41.1848 22.1446 41.1906 22.1485 41.2003 22.1524C41.2658 22.1836 41.3256 22.1388 41.3449 22.0803C41.4143 22.2128 41.4837 22.3414 41.555 22.468C41.7363 22.7758 42.0023 23.0408 42.1007 23.0895C42.1817 23.1284 42.2588 23.0232 42.2106 22.955H42.2067Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M42.1375 22.8341C42.1375 22.8341 42.1433 22.8419 42.1452 22.8458C42.1356 22.8302 42.1356 22.8282 42.1375 22.8341Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M43.487 24.0167C43.487 24.0167 43.4716 23.9972 43.4639 23.9894C43.4523 23.9758 43.4677 23.9972 43.4735 24.0031C43.4504 23.97 43.4215 23.9427 43.3964 23.9115C43.0995 23.5725 42.9375 23.3388 42.7158 23.0446C42.4574 22.7368 42.2743 22.4972 42.0371 22.1445C41.8578 21.8776 41.6881 21.6049 41.532 21.3244C41.4953 21.2737 41.478 21.2016 41.4336 21.1607C41.4105 21.1549 41.3874 21.1821 41.4008 21.2016C41.6573 21.6789 41.9523 22.1328 42.2145 22.6062C42.4343 23.0076 42.6522 23.4089 42.9491 23.7615C43.0763 23.9329 43.3231 24.1453 43.3752 24.1706C43.4195 24.194 43.4754 24.1706 43.5005 24.1297C43.5217 24.0927 43.5159 24.044 43.487 24.0128V24.0167Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M43.491 24.0225C43.4971 24.0306 43.4991 24.0326 43.491 24.0225V24.0225Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path d="M43.4832 24.0125C43.4832 24.0125 43.4832 24.0164 43.4871 24.0164C43.4871 24.0184 43.491 24.0204 43.491 24.0224C43.4891 24.0204 43.4871 24.0164 43.4832 24.0125Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M39.9296 15.7604C39.3358 15.0844 38.7651 14.3831 38.1481 13.7285C38.125 13.709 38.1095 13.67 38.0768 13.6642C38.0517 13.6642 38.0382 13.6954 38.0575 13.7129C38.8171 14.5486 39.5344 15.4429 40.2998 16.2864C40.3712 16.3546 40.5293 16.5981 40.5389 16.4481C40.3422 16.2143 40.1282 15.9942 39.9296 15.7624V15.7604Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M41.1058 17.0345C41.0229 16.9468 40.9381 16.8631 40.861 16.7715C40.8301 16.7442 40.8108 16.6955 40.7684 16.6877C40.7376 16.6877 40.7183 16.7287 40.7414 16.7501C40.8609 16.8514 40.9651 16.9683 41.0769 17.0754C41.0885 17.0813 41.102 17.0754 41.1097 17.0657C41.1155 17.0559 41.1135 17.0423 41.1058 17.0345Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M39.5401 15.6141C39.4148 15.4777 39.2895 15.3375 39.168 15.1972C38.9752 14.9829 38.8036 14.7511 38.6204 14.5309C38.5973 14.4861 38.5317 14.5212 38.5665 14.5621C38.8749 14.9128 39.1757 15.2712 39.49 15.618C39.5035 15.6336 39.5247 15.6628 39.5421 15.6375C39.5459 15.6297 39.5459 15.62 39.5382 15.6141H39.5401Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M39.9662 16.1676C39.9065 16.1033 39.8506 16.0371 39.7869 15.9747C39.7638 15.9514 39.7272 15.9884 39.7503 16.0118C39.8158 16.0741 39.8718 16.1481 39.9373 16.2085C39.9489 16.2144 39.9624 16.2085 39.9682 16.1988C39.974 16.189 39.972 16.1754 39.9643 16.1696L39.9662 16.1676Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M38.9581 15.2363C38.9002 15.1701 38.8405 15.1038 38.7807 15.0376C38.7576 15.0142 38.7209 15.0512 38.7441 15.0746C38.8077 15.1389 38.8655 15.2129 38.933 15.2733C38.9427 15.2792 38.9542 15.2733 38.96 15.2636C38.9658 15.2558 38.9639 15.2441 38.9562 15.2363H38.9581Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M29.5565 10.235C28.9569 10.7123 28.4556 11.3065 27.8965 11.8306C26.3058 13.4008 24.8617 15.1093 23.3558 16.7594C22.6791 17.4744 22.0197 18.203 21.3699 18.9414C21.7382 18.5128 22.0351 18.129 22.4207 17.6945C22.8218 17.2426 23.2575 16.8257 23.6508 16.3678C24.5917 15.3353 25.5191 14.221 26.4215 13.1709C27.1754 12.3274 27.9581 11.513 28.7024 10.6617C28.8393 10.5097 28.9897 10.3714 29.1285 10.2233C29.1458 10.1863 29.0938 10.1474 29.0649 10.1805C28.5404 10.7357 27.9813 11.2559 27.4549 11.8111C26.2383 13.0988 25.0313 14.3944 23.8629 15.7249C23.5332 16.1126 23.19 16.4886 22.8603 16.8783C22.5923 17.2094 22.0698 17.8582 21.7266 18.1933C21.4606 18.4972 21.1752 18.7894 20.9226 19.105C20.753 19.3407 20.5447 19.5336 20.35 19.7382C19.3088 20.9187 18.3217 22.148 17.2786 23.3267C18.688 21.6922 20.055 20.0499 21.368 18.3666C21.877 17.753 22.3667 17.1276 22.8815 16.5198C22.9548 16.4224 23.0551 16.3406 23.111 16.2334C23.111 16.1983 23.0647 16.1789 23.0416 16.2042C22.3205 17.1023 21.5396 17.9497 20.7954 18.8284C19.8525 19.9369 18.9271 21.061 17.9341 22.1266C17.9843 22.0643 18.0344 22.0019 18.0826 21.9415C19.251 20.5622 20.4155 19.179 21.5492 17.7725C21.852 17.4101 22.1508 17.0458 22.4593 16.6893C22.5383 16.5938 22.627 16.5081 22.7022 16.4107C22.708 16.399 22.708 16.3834 22.7022 16.3717C22.6907 16.3386 22.6425 16.3289 22.6193 16.3542C21.6726 17.4588 20.7568 18.5887 19.7889 19.6778C18.4335 21.2188 17.0684 22.75 15.767 24.3378C14.373 25.9956 12.8305 27.7334 11.4886 29.3776C11.2264 29.6893 10.9719 30.001 10.7231 30.3108C11.3151 29.9368 11.9185 29.5666 12.5432 29.2783C12.6821 29.214 12.817 29.1614 12.952 29.1166C13.0195 29.0426 13.085 28.9705 13.1525 28.8964C14.801 27.0847 16.4322 25.2592 18.0286 23.4026C19.251 21.9435 20.4445 20.459 21.7074 19.0329C22.7948 17.7647 23.9246 16.5315 25.0352 15.2847C26.0378 14.1528 27.023 13.0034 28.0584 11.9007C28.552 11.3747 29.0282 10.8234 29.57 10.348C29.5893 10.3305 29.6182 10.3208 29.6259 10.2954C29.6375 10.2584 29.5932 10.2233 29.5584 10.2448L29.5565 10.235ZM20.7163 19.6894C20.859 19.5044 21.0094 19.3193 21.2061 19.1284C21.2485 19.0797 21.2909 19.0329 21.3314 18.9842C21.1251 19.218 20.9207 19.4537 20.7163 19.6894Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.1001 10.426C30.0828 10.4085 30.0539 10.4085 30.0365 10.426C29.2306 11.406 28.3514 12.3196 27.4818 13.2411C25.8757 14.9808 24.2388 16.6933 22.6732 18.47C23.2555 17.7706 23.8416 17.0751 24.4393 16.3874C25.654 14.9691 26.8533 13.5645 28.12 12.2008C28.6695 11.6222 29.2267 11.0494 29.7801 10.4708C29.8013 10.4455 29.8379 10.428 29.8399 10.391C29.8399 10.352 29.7878 10.3286 29.7608 10.3578C28.1663 11.9884 26.5718 13.6191 25.1045 15.3646C24.0595 16.5861 22.9451 17.7492 21.9232 18.9901C21.0093 20.0889 20.0414 21.1389 19.1024 22.2163C17.1435 24.4761 15.1885 26.7399 13.2527 29.0192C13.5554 28.9433 13.8562 28.9043 14.1647 28.8829C15.5432 27.3653 16.9546 25.8769 18.2927 24.3242C19.0967 23.3832 19.8563 22.4052 20.6391 21.4468C21.3679 20.5681 22.116 19.7051 22.8525 18.8343C24.4374 17.0478 25.6752 15.5321 27.3006 13.7379C28.0545 12.9021 28.7601 12.0235 29.4967 11.1702C29.6953 10.9403 29.8977 10.7144 30.1021 10.4884C30.1194 10.4708 30.1194 10.4416 30.1021 10.4241L30.1001 10.426Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.3874 10.619C30.3739 10.58 30.3179 10.5703 30.289 10.5995C27.8153 13.5101 25.1854 16.2862 22.7079 19.1928C20.9475 21.2559 19.1602 23.2957 17.4095 25.3665C16.3664 26.5627 15.2829 27.7199 14.2051 28.883C14.3805 28.8732 14.5598 28.8693 14.7449 28.8674C15.8651 27.6576 16.9911 26.4517 18.0612 25.1971C19.272 23.7632 20.4944 22.3411 21.7207 20.9228C22.6654 19.7909 23.5871 18.6396 24.5472 17.5213C25.9432 15.9082 27.2022 14.3595 28.5923 12.7405C29.1669 12.0606 29.7549 11.3924 30.3411 10.7203C30.3661 10.6911 30.4028 10.6599 30.3835 10.619H30.3874Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.503 10.8216C30.1001 11.2969 29.6373 11.7158 29.2132 12.1697C28.5807 12.8379 27.9753 13.5315 27.3757 14.2289C26.3211 15.4641 25.3532 16.7693 24.3043 18.0103C22.6963 19.9039 21.0227 21.741 19.4109 23.6307C18.5182 24.6672 17.639 25.7172 16.7328 26.7439C16.1004 27.4569 15.4583 28.1602 14.824 28.8693C14.9088 28.8693 14.9956 28.8693 15.0843 28.8693C15.1575 28.8693 15.2308 28.883 15.3002 28.9063C15.68 28.2966 16.2874 27.7569 16.781 27.264C17.3401 26.7069 17.932 26.1867 18.5509 25.6997C18.8729 25.3198 19.1988 24.9418 19.5265 24.5678C20.6525 23.2684 21.9231 21.9008 23.0703 20.6072C22.4842 21.2929 21.873 21.9592 21.2791 22.6372C20.4462 23.584 19.621 24.5386 18.8093 25.5029C19.0542 25.3178 19.3029 25.1347 19.5516 24.9555C19.7444 24.8172 19.9179 24.6691 20.1127 24.5639C20.4751 24.1431 20.8376 23.7223 21.204 23.3034C21.6166 22.8242 22.0446 22.3566 22.4591 21.8793C21.7997 22.6742 21.1461 23.4729 20.4771 24.26C20.4173 24.3321 20.3537 24.4061 20.2881 24.484C20.3884 24.447 20.4964 24.4236 20.6159 24.4178C20.9302 24.4042 21.2387 24.5249 21.5163 24.6749C22.4688 23.4749 23.3865 22.3099 24.3486 21.104C25.6462 19.4656 26.7607 17.9421 28.0447 16.3329C28.6251 15.6043 29.2054 14.8757 29.8031 14.1627C29.9053 14.04 30.0114 13.9192 30.1155 13.7984C30.1328 13.7653 30.0827 13.7282 30.0557 13.7575C28.1893 15.9316 26.3924 18.1642 24.5627 20.3715C25.785 18.8266 26.9727 17.2914 28.2414 15.6374C28.7639 14.9829 29.2749 14.3166 29.8301 13.6873C29.8687 13.6308 29.94 13.5899 29.9555 13.5217C29.9555 13.4711 29.888 13.4399 29.8533 13.4789C28.5036 15.1621 27.1655 16.8589 25.7542 18.4934C24.9675 19.3799 24.2137 20.2935 23.4637 21.2092C24.8229 19.5104 25.9297 18.0025 27.3352 16.2472C28.0043 15.4056 28.6984 14.5289 29.4098 13.6445C29.5332 13.4945 29.6662 13.3523 29.7877 13.2003C29.807 13.1594 29.7492 13.1146 29.7144 13.1516C28.7813 14.2465 27.8211 15.3199 26.9187 16.4401C25.8255 17.7765 24.7709 19.1441 23.6526 20.4591C23.5099 20.6247 23.3692 20.7923 23.2284 20.9598C23.2921 20.8799 23.3557 20.8001 23.4174 20.7182C24.8885 18.7993 26.5177 16.6446 28.1701 14.5348C28.6386 13.9562 29.1013 13.4107 29.593 12.8477C29.62 12.8068 29.6682 12.7795 29.6778 12.7327C29.6778 12.6957 29.6296 12.6743 29.6026 12.7016C28.5885 13.7614 27.663 14.8991 26.7645 16.0563C26.3847 16.518 26.0068 16.9817 25.6308 17.4473C26.3538 16.4907 27.0807 15.5186 27.8558 14.5387C28.2973 13.964 28.7485 13.3912 29.2266 12.8457C29.2498 12.8263 29.2691 12.799 29.2536 12.7678C29.2421 12.7327 29.1881 12.721 29.163 12.7503C28.3667 13.699 27.5492 14.6302 26.7626 15.5868C25.8834 16.6641 25.0447 17.7726 24.1308 18.8227C23.3653 19.6974 22.5902 20.5624 21.8132 21.4274C23.0472 19.9779 24.2619 18.5051 25.3474 17.0576C26.4367 15.6082 27.7845 13.9679 29.0859 12.4873C29.5583 11.973 30.021 11.447 30.5107 10.9482C30.5358 10.9171 30.5802 10.8976 30.584 10.8547C30.584 10.8158 30.532 10.7904 30.503 10.8216Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.6363 11.0396C30.3066 11.4799 29.8728 11.8714 29.4949 12.2844C29.4814 12.3 29.4428 12.3546 29.4505 12.3448C29.4505 12.3448 29.4524 12.3429 29.4544 12.3409C29.4351 12.3624 29.4274 12.3955 29.4409 12.4208C29.5141 12.5611 29.6607 12.3409 29.6954 12.3078C29.8053 12.1617 29.9865 11.9494 30.1215 11.7838C30.3124 11.55 30.5013 11.3143 30.698 11.0844C30.7385 11.0435 30.6671 10.987 30.6363 11.0376V11.0396Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M30.8481 11.2873C30.5763 11.597 30.2061 11.9652 29.9863 12.2477C29.9419 12.2886 29.9863 12.3665 30.046 12.349C30.3468 12.0743 30.6013 11.7412 30.8616 11.4256C30.8828 11.3905 30.9252 11.3632 30.931 11.3223C30.931 11.2795 30.877 11.2561 30.8481 11.2873Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.0354 11.5871C30.8446 11.8053 30.6286 12.0021 30.459 12.2397C30.4474 12.2553 30.4589 12.2397 30.4647 12.2339C30.4146 12.2807 30.4532 12.3722 30.5206 12.3703C30.5496 12.3703 30.5746 12.3527 30.592 12.3313C30.6633 12.2573 30.7289 12.1774 30.7964 12.0995C30.9082 11.9495 31.0374 11.8131 31.1608 11.6748C31.1974 11.6008 31.0914 11.5287 31.0354 11.5891V11.5871Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.2609 11.8931C31.1433 12.0158 31.0083 12.1249 30.9216 12.273C30.91 12.3002 30.9042 12.2846 30.8965 12.3411C30.8965 12.4288 31.0102 12.4522 31.0565 12.3859C31.1838 12.2652 31.2898 12.121 31.3997 11.9866C31.4402 11.9048 31.3226 11.8268 31.2609 11.8931Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.8894 12.1034C31.8933 11.9826 31.7332 11.9163 31.6503 12.004C31.5693 12.0819 31.4884 12.1638 31.444 12.267C31.4324 12.2865 31.4247 12.3099 31.4228 12.3332C31.4189 12.3449 31.4132 12.3547 31.4112 12.3664C31.3958 12.4229 31.4228 12.491 31.4845 12.5066C31.5308 12.5203 31.5771 12.4949 31.6098 12.4638C31.6426 12.4462 31.6715 12.417 31.6985 12.3897C31.7409 12.343 31.7776 12.2943 31.8123 12.2436C31.8489 12.2027 31.8933 12.1618 31.8894 12.1034Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M32.1786 12.2515C32.1516 12.2807 32.1208 12.3138 32.1053 12.3508C32.1015 12.3547 32.0976 12.3625 32.0918 12.3801C32.0822 12.3995 32.0726 12.421 32.0687 12.4443C32.0398 12.4911 32.0783 12.5593 32.1343 12.5573C32.1593 12.5515 32.1786 12.5437 32.1902 12.5359C32.2133 12.5262 32.2326 12.5106 32.2538 12.495C32.2596 12.493 32.2654 12.4911 32.2711 12.4872C32.3232 12.4521 32.3849 12.4015 32.3849 12.3333C32.3888 12.23 32.2519 12.1736 32.1825 12.2495L32.1786 12.2515Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path d="M32.8186 12.4892C32.6971 12.5749 32.809 12.7444 32.9266 12.649C33.0538 12.5691 32.9343 12.3898 32.8186 12.4892Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                    <path
+                        d="M30.5165 13.7106C30.4972 13.6989 30.4702 13.7067 30.4606 13.7262C29.2825 15.2496 28.1045 16.6445 26.9399 18.1251C26.1436 19.1109 25.2972 20.0577 24.5029 21.0473C23.7336 22.0097 22.9855 22.9857 22.1969 23.9326C21.9906 24.1917 21.7785 24.4469 21.5664 24.7001C21.6242 24.7313 21.6802 24.7644 21.7341 24.7975C21.7554 24.8092 21.7746 24.8209 21.7939 24.8326C21.8055 24.8209 21.8171 24.8092 21.8286 24.7975C22.0234 24.6183 22.2142 24.4352 22.4051 24.2521C23.427 23.0013 24.3698 21.7643 25.3435 20.5447C26.6449 18.9375 27.9734 17.1978 29.3346 15.3217C29.7202 14.7918 30.1309 14.2814 30.5339 13.7671C30.5454 13.7476 30.5377 13.7223 30.5184 13.7106H30.5165Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M26.9785 19.4871C27.9117 18.2676 28.8064 17.0071 29.7646 15.7428C30.023 15.3979 30.4144 14.8817 30.7441 14.4882C30.9022 14.2953 31.0641 14.1044 31.228 13.9193C31.255 13.8609 31.1721 13.7985 31.1258 13.8511C29.5313 15.6181 28.3745 17.313 27.019 18.9904C26.7549 19.3176 26.4869 19.643 26.217 19.9683C26.3346 19.8105 26.4503 19.6547 26.564 19.5027C27.6437 18.063 28.6213 16.8065 29.726 15.2947C30.0326 14.8895 30.3353 14.4823 30.6322 14.0693C30.7094 13.9641 30.7845 13.8589 30.854 13.7498C30.8597 13.7401 30.8617 13.7264 30.8578 13.7147C30.8482 13.6777 30.7923 13.668 30.773 13.7031C29.5371 15.548 27.9888 17.1552 26.6431 18.9378C25.6154 20.2703 24.6186 21.5678 23.508 22.986C23.2901 23.2646 23.0838 23.5257 22.8853 23.7789C24.2889 22.3899 25.6193 20.9229 26.9766 19.4871H26.9785Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M28.9877 17.3461C29.5932 16.559 30.1735 15.7427 30.6767 15.0219C30.9139 14.7199 31.1742 14.4102 31.3728 14.155C31.3959 14.118 31.4383 14.0887 31.4441 14.0459C31.4441 14.003 31.3882 13.9777 31.3573 14.0089C29.9518 15.6453 28.6966 17.2077 27.5841 18.7604C27.4858 18.889 27.3894 19.0176 27.293 19.1461C27.8483 18.5442 28.39 17.911 28.9839 17.348L28.9877 17.3461Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M29.5526 16.8473C29.5873 16.82 29.622 16.7927 29.6586 16.7655C29.6779 16.7304 29.6972 16.6953 29.7242 16.6661C29.861 16.5102 30.0211 16.3602 30.1985 16.218C30.6014 15.692 31.0025 15.1797 31.4344 14.6498C31.5076 14.5601 31.579 14.4686 31.6561 14.3809C31.6657 14.3712 31.6715 14.3575 31.6715 14.3439C31.6715 14.2991 31.6117 14.2718 31.5809 14.3069C30.7981 15.1154 30.1445 16.0368 29.4253 16.9018C29.3887 16.9486 29.352 16.9992 29.3135 17.0479C29.3925 16.9797 29.4696 16.9116 29.5506 16.8453L29.5526 16.8473Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.1836 15.6102C31.3533 15.4115 31.5249 15.2128 31.6946 15.016C31.8006 14.8991 31.9009 14.7764 32.0204 14.6712C32.0705 14.6225 32.005 14.5348 31.9452 14.5738C31.7003 14.7569 31.4998 14.9907 31.2935 15.2128C31.1046 15.4232 30.9195 15.6355 30.7344 15.8479C30.8809 15.7602 31.0332 15.6803 31.1817 15.6083L31.1836 15.6102Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M31.7851 15.3956C31.9432 15.2145 32.1051 15.0333 32.2748 14.8521C32.3249 14.7859 32.4329 14.7177 32.458 14.6437C32.458 14.6008 32.402 14.5755 32.3712 14.6066C32.1148 14.8755 31.8506 15.156 31.5903 15.4404C31.654 15.419 31.7195 15.4054 31.7851 15.3937V15.3956Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M22.3723 16.1634C22.1274 16.4498 21.8459 16.7187 21.6357 17.0265C21.6357 17.0518 21.6589 17.0752 21.6839 17.0752C21.7379 17.0635 21.7669 17.0012 21.8073 16.968C22.0291 16.7245 22.272 16.4927 22.4783 16.2375C22.5092 16.1751 22.4185 16.1147 22.3723 16.1654V16.1634Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M21.264 17.2311C21.4086 17.0577 21.5725 16.896 21.7132 16.7207C21.7363 16.6739 21.6669 16.6213 21.6284 16.6642C20.4908 18.0103 19.3089 19.3176 18.1309 20.6287C17.3712 21.5073 16.6 22.3742 15.8249 23.2392C16.9759 21.893 18.0981 20.5429 19.1874 19.2085C19.762 18.5441 20.3404 17.8837 20.9478 17.2486C20.9748 17.2155 21.021 17.1941 21.0268 17.1512C21.0268 17.1122 20.9767 17.0908 20.9497 17.12C19.9028 18.2656 18.8423 19.3974 17.7954 20.5429C16.4477 22.0469 15.1211 23.5704 13.7619 25.0646C13.0677 25.84 12.3389 26.6368 11.6063 27.4355C12.364 26.5998 13.1294 25.7718 13.864 24.9146C14.6372 24.0302 15.204 23.3054 15.956 22.4249C16.438 21.8657 17.0801 21.1274 17.6546 20.5196C17.753 20.4007 17.9188 20.2799 17.9824 20.1533C17.9824 20.1066 17.9207 20.0793 17.8879 20.1144C16.7446 21.3183 15.6514 22.3742 14.5408 23.5782C13.4187 24.8192 12.3351 26.0933 11.1937 27.3167C9.88643 28.7895 8.56185 30.2467 7.27197 31.7332C7.51491 31.7565 7.75977 31.7838 8.00271 31.815C8.10104 31.7663 8.2013 31.7176 8.30156 31.6708C8.39411 31.5656 8.48473 31.4604 8.5792 31.3572C8.99374 30.8857 9.4102 30.4162 9.83052 29.9487C9.32729 30.5292 8.85106 31.0766 8.44424 31.6046C8.88384 31.3981 9.32729 31.1955 9.74761 30.9578C10.5748 30.0227 11.425 29.109 12.2599 28.1817C14.6063 25.5731 16.8063 22.9626 18.9966 20.3442C19.7042 19.5221 20.3828 18.6747 21.0866 17.8486C21.21 17.7025 21.3469 17.5662 21.4722 17.4239C21.4992 17.3694 21.4201 17.3129 21.3777 17.3597C20.3231 18.5889 19.1855 19.8163 18.0634 21.028C18.4181 20.5936 18.7787 20.1553 19.1739 19.7091C19.9008 18.9104 20.5679 18.0629 21.2678 17.2389L21.264 17.2311Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M19.2007 18.5907C18.8401 18.9687 18.4796 19.3486 18.1267 19.7324C18.1152 19.7616 18.1576 19.7752 18.1711 19.7499C18.4892 19.4284 18.8093 19.1089 19.1293 18.7894C19.1756 18.7329 19.2527 18.692 19.2759 18.6239C19.2759 18.5849 19.2257 18.5635 19.1987 18.5927L19.2007 18.5907Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M16.1719 21.5227C14.3094 23.4104 12.4026 25.2553 10.5902 27.1899C11.4 26.2976 12.2078 25.4034 13.0041 24.4995C13.4322 24.0261 13.8698 23.5624 14.3171 23.1065C14.3306 23.0929 14.3306 23.0695 14.3171 23.0578C14.3037 23.0442 14.2805 23.0442 14.2689 23.0578C13.4264 23.9481 12.5549 24.8112 11.6911 25.68C11.0471 26.356 10.3955 27.0223 9.74184 27.6905C9.90958 27.5016 10.0773 27.3165 10.2374 27.1373C11.0182 26.2528 11.776 25.2553 12.6686 24.3475C12.9521 24.0572 13.2336 23.7631 13.5286 23.4825C13.6018 23.4124 13.677 23.3422 13.7503 23.2721C13.758 23.2643 13.7638 23.2526 13.7638 23.239C13.7638 23.2 13.7117 23.1767 13.6847 23.2059C13.0138 23.8955 12.3505 24.591 11.6718 25.2748C11.1435 25.7989 10.5902 26.2937 10.0773 26.8333C8.95326 27.9964 7.72701 29.3874 6.55089 30.6849C6.2636 31.0044 5.97825 31.3277 5.69482 31.6511C6.119 31.6511 6.53932 31.6667 6.96157 31.6979C8.33821 30.19 9.73027 28.6958 11.105 27.186C12.3949 25.8339 13.5035 24.5365 14.7201 23.165C15.1674 22.6545 15.6456 22.1714 16.1141 21.6824C16.1488 21.6337 16.2067 21.5986 16.2279 21.5441C16.2279 21.5149 16.1893 21.4973 16.17 21.5207L16.1719 21.5227Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M13.2295 23.1825C12.9982 23.4085 12.7706 23.6344 12.5412 23.8624C12.5238 23.878 12.5277 23.9072 12.5489 23.9189C12.5624 23.9267 12.5817 23.9247 12.5933 23.913C12.7263 23.7786 12.8593 23.6461 12.9904 23.5137C13.0868 23.4143 13.191 23.3208 13.2816 23.2175C13.297 23.1864 13.2527 23.1571 13.2295 23.1825Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M12.1768 24.2853C11.3342 25.1444 10.4974 26.0055 9.63363 26.8413C8.39195 28.1231 7.17534 29.4265 5.95488 30.7278C5.65024 31.0493 5.34753 31.3649 5.0564 31.6688C5.07568 31.6688 5.09496 31.6688 5.11424 31.6668C5.26077 31.661 5.4073 31.6571 5.55384 31.6552C5.84883 31.3396 6.1419 31.024 6.40412 30.7512C7.57831 29.4888 8.9376 28.0433 9.99611 26.8471C10.6594 26.0756 11.3515 25.3314 12.0283 24.5736C12.0938 24.4859 12.2057 24.41 12.2519 24.3184C12.2519 24.2814 12.2037 24.258 12.1768 24.2872V24.2853Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M13.0945 22.7655C13.0868 22.7422 13.0502 22.7344 13.0328 22.7538C12.3194 23.5351 11.5617 24.2715 10.829 25.0332C10.2371 25.6352 9.68184 26.2722 9.0745 26.8586C8.65418 27.2619 8.23964 27.671 7.82896 28.0859C8.39582 27.4664 8.95688 26.843 9.50638 26.2079C10.1677 25.4774 10.7384 24.8111 11.4287 24.0727C11.7025 23.7669 11.9878 23.4708 12.2616 23.1649C12.2751 23.1396 12.2365 23.1104 12.2153 23.1337C11.1896 24.2228 10.1581 25.152 9.13619 26.1845C8.24735 27.0768 7.39708 28.0061 6.53716 28.9237C6.7666 28.6704 6.99218 28.4152 7.21198 28.1639C7.94465 27.3398 8.57127 26.5742 9.3772 25.715C9.63364 25.4384 9.88621 25.1618 10.1504 24.8929C10.2333 24.7936 10.3489 24.7117 10.4126 24.6026C10.4126 24.5695 10.3702 24.55 10.3451 24.5754C9.84958 25.1014 9.32129 25.5962 8.81228 26.1086C7.91187 27.0632 7.01725 27.973 6.059 28.9334C5.16052 29.8802 4.23504 30.7997 3.30957 31.7193C3.84557 31.7232 4.37965 31.7037 4.91758 31.6784C5.48829 31.0783 6.05514 30.4705 6.62585 29.8705C7.63037 28.8321 8.52692 27.8736 9.36178 26.8956C10.2352 25.9313 11.0778 24.9436 11.9608 23.989C12.2732 23.6597 12.5951 23.3383 12.9056 23.0052C12.9673 22.935 13.0367 22.8688 13.0926 22.7967C13.0964 22.787 13.0964 22.7772 13.0926 22.7675L13.0945 22.7655Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M3.18625 31.7154C3.33279 31.5615 3.47932 31.4076 3.62585 31.2557C3.68948 31.1777 3.79745 31.1076 3.83601 31.0199C3.83601 30.979 3.78203 30.9556 3.7531 30.9849C3.50246 31.242 3.2306 31.4758 2.95874 31.7096C3.03393 31.7115 3.11106 31.7135 3.18625 31.7154Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M2.80449 31.7061C2.9086 31.71 3.01272 31.7139 3.1149 31.7158C3.21516 31.6691 3.31542 31.6223 3.41568 31.5756C3.59692 31.486 3.79937 31.4178 3.94976 31.2794C3.94205 31.2872 3.91891 31.3087 3.92469 31.3067C3.93819 31.297 3.99796 31.2522 3.96711 31.2756C4.18113 31.1372 4.51661 30.9463 4.70363 30.7729C4.7287 30.7437 4.70363 30.6931 4.66507 30.695C4.56674 30.7359 4.48383 30.8158 4.38936 30.8703C4.11943 31.0554 3.92469 31.147 3.75309 31.1937C3.53522 31.2853 3.20167 31.4372 2.8951 31.5736C3.02621 31.4334 3.15925 31.295 3.29807 31.1645C3.3617 31.0963 3.45232 31.0398 3.49666 30.96C3.49666 30.9327 3.46003 30.9151 3.44075 30.9366C3.21709 31.1587 2.87775 31.4392 2.56348 31.6925C2.64253 31.6964 2.72351 31.7022 2.80256 31.7041L2.80449 31.7061Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M2.49796 31.6905C2.7274 31.4762 2.95685 31.2619 3.19785 31.0593C3.31547 30.9969 3.2422 30.8372 3.13037 30.9171C2.93371 31.0865 2.71005 31.256 2.47868 31.4255C2.6445 31.2775 2.80838 31.1294 2.9607 30.9716C3.00312 30.8839 2.87779 30.7982 2.81031 30.8703C2.67149 30.9833 2.49604 31.1138 2.30901 31.2521C2.43434 31.1528 2.55388 31.0671 2.69656 30.9229C2.7274 30.8625 2.65028 30.7943 2.59244 30.8313C2.35143 30.9969 1.99281 31.2132 1.66504 31.4255C1.82893 31.2931 2.00245 31.143 2.20297 30.956C2.24539 30.9073 2.32829 30.8781 2.34372 30.8138C2.34372 30.7748 2.29937 30.7476 2.2666 30.769C1.91954 31.0067 1.53779 31.1937 1.19073 31.4333C1.10011 31.4937 1.01335 31.5502 0.932373 31.6048C1.45488 31.6301 1.97739 31.6652 2.49796 31.6924V31.6905Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M2.29919 30.5057C2.2375 30.4979 2.24521 30.5173 2.18158 30.5407C1.65908 30.8485 1.04981 31.2128 0.558148 31.468C0.482953 31.5012 0.33642 31.5421 0.305571 31.544C0.257369 31.5499 0.207239 31.5362 0.160966 31.5518C0.0780588 31.581 0.105052 31.7135 0.193743 31.7096C0.282434 31.694 0.374981 31.6687 0.471385 31.6375C0.442464 31.7427 0.567788 31.8596 0.67576 31.7914C0.664192 31.8051 0.972683 31.6648 1.06716 31.5966C1.11922 31.5557 1.19827 31.5323 1.21948 31.4641C1.23683 31.4096 1.20212 31.357 1.15392 31.3395C1.33709 31.2421 1.52025 31.1349 1.69378 31.0297C1.9078 30.8972 2.24714 30.7219 2.34161 30.6264C2.37632 30.5875 2.35125 30.5193 2.30305 30.5076L2.29919 30.5057Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.3732 12.5846C35.244 12.5125 35.0088 12.4268 34.7987 12.3274C34.1258 12.0137 33.4779 11.7391 32.8031 11.3923C32.6874 11.3319 32.5679 11.2832 32.4541 11.2403C32.4291 11.2325 32.4117 11.2695 32.4368 11.2832C33.3333 11.7157 34.2299 12.2553 35.1592 12.6644C35.2151 12.682 35.2672 12.7248 35.327 12.7229C35.3906 12.719 35.4195 12.6294 35.3732 12.5865V12.5846Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.0958 12.6977C34.608 12.5009 34.153 12.3042 33.6767 12.0704C33.6594 12.0646 33.642 12.049 33.6227 12.0529C33.5996 12.0587 33.5958 12.0918 33.617 12.1035C34.1028 12.312 34.5598 12.5789 35.0302 12.8185C35.1459 12.9023 35.2346 12.7425 35.0977 12.6977H35.0958Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <path
+                        d="M35.0476 12.8689C34.7931 12.7793 34.5406 12.6799 34.2861 12.5884C34.2706 12.5845 34.261 12.6059 34.2745 12.6137C34.4673 12.7208 34.662 12.8202 34.8587 12.9195C34.9223 12.9527 34.9859 12.9994 35.0592 12.9994C35.1402 12.9819 35.1132 12.8884 35.0457 12.8708L35.0476 12.8689Z"
+                        fill="var(--surface-900)"
+                        fillOpacity="0.5"
+                    />
+                    <defs>
+                        <clipPath id="clip0_1870_170886">
+                            <rect width="27.6404" height="11.3205" fill="var(--surface-900)" transform="translate(17.7554)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            }
+        />
+    );
+};
+
+export default AvalonSeparator;
diff --git a/pages/templates/avalon/index.js b/pages/templates/avalon/index.js
new file mode 100644
index 0000000000..fd4fabcef6
--- /dev/null
+++ b/pages/templates/avalon/index.js
@@ -0,0 +1,218 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import AvalonLogo from './AvalonLogo';
+import AvalonSeparator from './AvalonSeparator';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Avalon is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Top Notch Quality',
+        description: 'Superior standards with 100% compatibility for strict mode and linting tools.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-quality.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-quality-dark.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Avalon ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Avalon uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/LuzEn29BAxr03T2vMQ5A1y/Preview-%7C-Avalon-1.0.0?type=design&mode=design&t=ME7xK2sAYOLoKCrT-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the
+                Avalon Figma file as they are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/features-animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light and Dark Modes',
+        description: 'Avalon offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component 10 Beautiful Themes',
+        description: 'Avalon offers 10 built-in themes and creating your own theme is a matter of defining couple of SaSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Avalon has 7 menu layouts to choose from; Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal with Light and Dark options.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/Reveal.png'
+            },
+            {
+                id: 4,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/Horizontal.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/Slim+.png'
+            },
+            {
+                id: 7,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/Drawer.png'
+            }
+        ]
+    },
+    {
+        id: 4,
+        title: 'Topbar Themes',
+        description: 'Avalon comes with 11 topbar themes guaranteeing an enviable design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/features-animation-menu-themes.png'
+    }
+];
+
+const features1Data = [
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-features1-feature1.png',
+        title: 'Ready to Use Applications',
+        description: 'Mail, File System, Tasks, Calendar, Blog and Chat are the sample applications to get started with ease.'
+    },
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-features1-feature2.png',
+        title: 'E-Commerce Pages',
+        description: 'Avalon offers E-commerce pages to kickstart your e-commerce project powered by PrimeBlocks.'
+    },
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-features1-feature3.png',
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.'
+    }
+];
+
+const license = {
+    documentLink: 'https://avalon.primereact.org/documentation',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$49',
+            discountPrice: '$29',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$490',
+            discountPrice: '$290',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const templateHeroData = {
+    logo: <AvalonLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-hero-pattern.png',
+    light: true,
+    rectangle: true,
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/avalon/avalon-hero-dashboard2.png',
+    description: 'A modern and easy to use premium application template with highly customizable layout features. Based on a bootstrap styling, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.',
+    liveHref: 'https://avalon.primereact.org/',
+    docHref: 'https://avalon.primereact.org/documentation',
+    storeHref: 'https://primeui.store/templates/react/avalon'
+};
+
+const AvalonPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="avalon template">
+            <TemplateHero {...templateHeroData} />
+            <AvalonSeparator />
+            <TemplateLicense license={license} />
+            <AvalonSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <AvalonSeparator />
+            <TemplateConfiguration title="React App with No Configuration" description="Avalon is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <AvalonSeparator />
+            <TemplateFeatures featuresData={features1Data} displayType="horizontal" />
+            <AvalonSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <AvalonSeparator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default AvalonPage;
diff --git a/pages/templates/diamond/DiamondLogo.js b/pages/templates/diamond/DiamondLogo.js
new file mode 100644
index 0000000000..b7c0c4a0b7
--- /dev/null
+++ b/pages/templates/diamond/DiamondLogo.js
@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="190" height="40" viewBox="0 0 190 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_1048_115190)">
+            <path
+                d="M38.5201 15.0553C38.5201 15.0021 38.5201 15.0021 38.5727 14.9489C38.6252 14.8958 38.6252 14.7894 38.6252 14.7363C38.6252 14.6299 38.6252 14.5236 38.5727 14.4172L38.5201 14.3641C38.5201 14.3109 38.4676 14.3109 38.4676 14.2577L30.5847 3.62406C30.5321 3.5709 30.4796 3.51773 30.427 3.46456C30.3745 3.41139 30.3219 3.41139 30.2168 3.35822H30.1643C30.1117 3.35822 30.0066 3.30505 29.9541 3.30505H8.93301C8.88046 3.30505 8.77535 3.30505 8.7228 3.35822H8.67025C8.61769 3.35822 8.56514 3.41139 8.46003 3.46456C8.40748 3.51773 8.35493 3.5709 8.30238 3.62406L0.419484 14.2577C0.419484 14.3109 0.366932 14.3109 0.366932 14.3641L0.314379 14.4172C0.314379 14.4704 0.261827 14.5236 0.261827 14.5236C0.209274 14.6831 0.209274 14.7894 0.261827 14.9489C0.261827 15.0021 0.261827 15.0021 0.314379 15.0553C0.314379 15.1084 0.366932 15.1084 0.366932 15.1616L0.419484 15.2148L18.8129 36.4821H18.918C18.9706 36.5353 18.9706 36.5353 19.0231 36.5885L19.0757 36.6416L19.1808 36.6948H19.2333C19.3384 36.748 19.4961 36.748 19.6537 36.6948H19.7063L19.8114 36.6416L19.864 36.5885C19.9165 36.5353 19.9691 36.5353 19.9691 36.4821L20.0216 36.429L38.415 15.1616L38.4676 15.1084C38.5201 15.1084 38.5201 15.0553 38.5201 15.0553ZM10.1943 15.4806H28.6402L19.4435 34.1959L10.1943 15.4806ZM19.4435 5.16595L28.0622 13.8856H10.8249L19.4435 5.16595ZM36.2604 13.8856H30.7423V6.44199L36.2604 13.8856ZM29.1658 4.84694V12.769L21.3354 4.84694H29.1658ZM9.7213 12.769V4.84694H17.5516L9.7213 12.769ZM8.14472 6.44199V13.8856H2.62669L8.14472 6.44199ZM8.46003 15.4806L16.0276 30.74L2.78435 15.4806H8.46003ZM22.912 30.74L30.4796 15.4806H36.1553L22.912 30.74Z"
+                fill="var(--surface-0)"
+            />
+        </g>
+        <path
+            d="M52.7389 30C52.3111 30 51.9806 29.8931 51.7473 29.6792C51.5334 29.4458 51.4264 29.1153 51.4264 28.6875V10.75C51.4264 10.3222 51.5334 10.0014 51.7473 9.78748C51.9806 9.55415 52.3111 9.43748 52.7389 9.43748H58.3681C61.6931 9.43748 64.2598 10.3125 66.0681 12.0625C67.8764 13.8125 68.7806 16.3597 68.7806 19.7042C68.7806 21.3764 68.5473 22.8542 68.0806 24.1375C67.6334 25.4014 66.9625 26.4708 66.0681 27.3458C65.1736 28.2208 64.0848 28.8819 62.8014 29.3292C61.5181 29.7764 60.0403 30 58.3681 30H52.7389ZM53.8181 27.9583H58.1931C59.5542 27.9583 60.7306 27.7833 61.7223 27.4333C62.7334 27.0833 63.5695 26.5681 64.2306 25.8875C64.9111 25.2069 65.4167 24.3514 65.7473 23.3208C66.0778 22.2708 66.2431 21.0653 66.2431 19.7042C66.2431 16.9625 65.5723 14.9111 64.2306 13.55C62.8889 12.1694 60.8764 11.4792 58.1931 11.4792H53.8181V27.9583ZM74.2694 30.2042C73.8805 30.2042 73.5791 30.0972 73.3652 29.8833C73.1708 29.65 73.0736 29.3389 73.0736 28.95V10.4875C73.0736 10.0792 73.1708 9.76804 73.3652 9.55415C73.5791 9.34026 73.8805 9.23332 74.2694 9.23332C74.6583 9.23332 74.95 9.34026 75.1444 9.55415C75.3583 9.76804 75.4652 10.0792 75.4652 10.4875V28.95C75.4652 29.3389 75.368 29.65 75.1736 29.8833C74.9791 30.0972 74.6777 30.2042 74.2694 30.2042ZM80.1271 30.2042C79.816 30.2042 79.5632 30.1361 79.3688 30C79.1938 29.8444 79.0868 29.65 79.048 29.4167C79.0285 29.1639 79.0868 28.8819 79.223 28.5708L87.2438 10.3125C87.4188 9.9236 87.623 9.65137 87.8563 9.49582C88.1091 9.32082 88.3813 9.23332 88.673 9.23332C88.9646 9.23332 89.2271 9.32082 89.4605 9.49582C89.7132 9.65137 89.9174 9.9236 90.073 10.3125L98.123 28.5708C98.2785 28.8819 98.3369 29.1639 98.298 29.4167C98.2785 29.6694 98.1813 29.8639 98.0063 30C97.8313 30.1361 97.5882 30.2042 97.2771 30.2042C96.9271 30.2042 96.6452 30.1167 96.4313 29.9417C96.2174 29.7472 96.0424 29.475 95.9063 29.125L93.748 24.1375L94.9146 24.75H82.373L83.5688 24.1375L81.4396 29.125C81.2646 29.4944 81.0799 29.7667 80.8855 29.9417C80.691 30.1167 80.4382 30.2042 80.1271 30.2042ZM88.6438 12.2375L83.948 23.2917L83.248 22.7375H94.0396L93.398 23.2917L88.7021 12.2375H88.6438ZM102.98 30.2042C102.63 30.2042 102.357 30.1069 102.163 29.9125C101.969 29.6986 101.871 29.4069 101.871 29.0375V10.4C101.871 10.0111 101.969 9.71943 102.163 9.52498C102.357 9.33054 102.63 9.23332 102.98 9.23332C103.291 9.23332 103.534 9.30137 103.709 9.43748C103.903 9.55415 104.078 9.75832 104.234 10.05L112.226 25.1H111.351L119.313 10.05C119.469 9.75832 119.634 9.55415 119.809 9.43748C119.984 9.30137 120.237 9.23332 120.567 9.23332C120.898 9.23332 121.16 9.33054 121.355 9.52498C121.549 9.71943 121.646 10.0111 121.646 10.4V29.0375C121.646 29.4069 121.549 29.6986 121.355 29.9125C121.18 30.1069 120.907 30.2042 120.538 30.2042C120.188 30.2042 119.916 30.1069 119.721 29.9125C119.527 29.6986 119.43 29.4069 119.43 29.0375V12.6458H120.13L112.838 26.325C112.702 26.5778 112.556 26.7625 112.401 26.8792C112.264 26.9764 112.06 27.025 111.788 27.025C111.516 27.025 111.302 26.9667 111.146 26.85C110.991 26.7333 110.855 26.5583 110.738 26.325L103.359 12.6167H104.059V29.0375C104.059 29.4069 103.962 29.6986 103.767 29.9125C103.592 30.1069 103.33 30.2042 102.98 30.2042ZM135.398 30.2625C133.492 30.2625 131.829 29.8347 130.41 28.9792C129.01 28.1042 127.921 26.8792 127.143 25.3042C126.385 23.7292 126.006 21.8625 126.006 19.7042C126.006 18.0708 126.22 16.6125 126.648 15.3292C127.095 14.0264 127.727 12.9278 128.543 12.0333C129.36 11.1194 130.342 10.4194 131.489 9.93332C132.656 9.42776 133.959 9.17498 135.398 9.17498C137.342 9.17498 139.014 9.60276 140.414 10.4583C141.834 11.3139 142.923 12.5292 143.681 14.1042C144.459 15.6597 144.848 17.5167 144.848 19.675C144.848 21.3083 144.624 22.7764 144.177 24.0792C143.729 25.3819 143.098 26.4903 142.281 27.4042C141.464 28.3181 140.473 29.0278 139.306 29.5333C138.159 30.0194 136.856 30.2625 135.398 30.2625ZM135.398 28.1333C136.875 28.1333 138.12 27.8028 139.131 27.1417C140.161 26.4806 140.949 25.5181 141.493 24.2542C142.038 22.9903 142.31 21.4736 142.31 19.7042C142.31 17.0403 141.707 14.9792 140.502 13.5208C139.316 12.043 137.614 11.3042 135.398 11.3042C133.959 11.3042 132.724 11.6347 131.693 12.2958C130.682 12.9569 129.904 13.9194 129.36 15.1833C128.816 16.4278 128.543 17.9347 128.543 19.7042C128.543 22.3486 129.146 24.4194 130.352 25.9167C131.557 27.3944 133.239 28.1333 135.398 28.1333ZM150.261 30.2042C149.891 30.2042 149.61 30.1069 149.415 29.9125C149.221 29.6986 149.123 29.3972 149.123 29.0083V10.4583C149.123 10.0694 149.221 9.76804 149.415 9.55415C149.61 9.34026 149.862 9.23332 150.173 9.23332C150.485 9.23332 150.708 9.29165 150.844 9.40832C151 9.50554 151.175 9.69026 151.369 9.96248L164.086 26.9083H163.386V10.4C163.386 10.0305 163.483 9.7486 163.678 9.55415C163.872 9.34026 164.154 9.23332 164.523 9.23332C164.873 9.23332 165.136 9.34026 165.311 9.55415C165.505 9.7486 165.603 10.0305 165.603 10.4V29.0375C165.603 29.4069 165.515 29.6986 165.34 29.9125C165.185 30.1069 164.951 30.2042 164.64 30.2042C164.348 30.2042 164.115 30.1458 163.94 30.0292C163.765 29.9125 163.58 29.7278 163.386 29.475L150.698 12.5292H151.369V29.0083C151.369 29.3972 151.272 29.6986 151.078 29.9125C150.883 30.1069 150.611 30.2042 150.261 30.2042ZM172.026 30C171.598 30 171.268 29.8931 171.034 29.6792C170.821 29.4458 170.714 29.1153 170.714 28.6875V10.75C170.714 10.3222 170.821 10.0014 171.034 9.78748C171.268 9.55415 171.598 9.43748 172.026 9.43748H177.655C180.98 9.43748 183.547 10.3125 185.355 12.0625C187.164 13.8125 188.068 16.3597 188.068 19.7042C188.068 21.3764 187.834 22.8542 187.368 24.1375C186.921 25.4014 186.25 26.4708 185.355 27.3458C184.461 28.2208 183.372 28.8819 182.089 29.3292C180.805 29.7764 179.327 30 177.655 30H172.026ZM173.105 27.9583H177.48C178.841 27.9583 180.018 27.7833 181.009 27.4333C182.021 27.0833 182.857 26.5681 183.518 25.8875C184.198 25.2069 184.704 24.3514 185.034 23.3208C185.365 22.2708 185.53 21.0653 185.53 19.7042C185.53 16.9625 184.859 14.9111 183.518 13.55C182.176 12.1694 180.164 11.4792 177.48 11.4792H173.105V27.9583Z"
+            fill="var(--surface-0)"
+        />
+        <defs>
+            <clipPath id="clip0_1048_115190">
+                <rect width="38.8889" height="34.0278" fill="var(--surface-0)" transform="translate(0 2.98608)" />
+            </clipPath>
+        </defs>
+    </svg>
+);
diff --git a/pages/templates/diamond/index.js b/pages/templates/diamond/index.js
new file mode 100644
index 0000000000..c1c7ad8431
--- /dev/null
+++ b/pages/templates/diamond/index.js
@@ -0,0 +1,222 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import DiamondLogo from './DiamondLogo';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Diamond is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/diamond-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/diamond-features2-ready.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/diamond-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Diamond ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Diamond uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/lKooXEoqqWz7PBYwJ7B8QS/Preview-%7C-Diamond-2022?node-id=271%3A12531">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the Diamond Figma file as
+                they are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/features-animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light / Dark / Dim Modes',
+        description: 'Diamond has 3 display modes to choose from; Light, Dim and Dark.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Diamond offers 30 built-in component themes and creating your own theme is a matter of defining couple of sass variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Static, Overlay, Slim, Compact, Horizontal, Reveal and Drawer are the available menu layouts depending on your preference.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/Horizontal.png'
+            },
+            {
+                id: 4,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/Drawer.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Compact',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/Compact.png'
+            },
+            {
+                id: 7,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/Reveal.png'
+            }
+        ]
+    },
+    {
+        id: 4,
+        title: 'Menu Themes',
+        description: 'Stunning theming options for the main menu in light color scheme.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/diamond/features-animation-orientations.png'
+    }
+];
+
+const license = {
+    documentLink: 'https://diamond.primereact.org/documentation/',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const DiamondSeperator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg width="48" height="49" viewBox="0 0 48 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clipPath="url(#clip0_1004_106792)">
+                        <path
+                            d="M37.7352 20.6899C37.7352 20.6516 37.7352 20.6516 37.773 20.6133C37.8109 20.575 37.8109 20.4985 37.8109 20.4602C37.8109 20.3836 37.8109 20.3071 37.773 20.2305L37.7352 20.1922C37.7352 20.154 37.6974 20.154 37.6974 20.1157L32.0217 12.4594C31.9839 12.4211 31.946 12.3829 31.9082 12.3446C31.8703 12.3063 31.8325 12.3063 31.7568 12.268H31.719C31.6812 12.268 31.6055 12.2297 31.5676 12.2297H16.4325C16.3947 12.2297 16.319 12.2297 16.2812 12.268H16.2433C16.2055 12.268 16.1676 12.3063 16.092 12.3446C16.0541 12.3829 16.0163 12.4211 15.9785 12.4594L10.3028 20.1157C10.3028 20.154 10.2649 20.154 10.2649 20.1922L10.2271 20.2305C10.2271 20.2688 10.1893 20.3071 10.1893 20.3071C10.1514 20.4219 10.1514 20.4985 10.1893 20.6133C10.1893 20.6516 10.1893 20.6516 10.2271 20.6899C10.2271 20.7282 10.2649 20.7282 10.2649 20.7665L10.3028 20.8047L23.546 36.1172H23.6217C23.6595 36.1555 23.6595 36.1555 23.6974 36.1938L23.7352 36.2321L23.8109 36.2704H23.8487C23.9244 36.3086 24.0379 36.3086 24.1514 36.2704H24.1893L24.2649 36.2321L24.3028 36.1938C24.3406 36.1555 24.3785 36.1555 24.3785 36.1172L24.4163 36.079L37.6595 20.7665L37.6974 20.7282C37.7352 20.7282 37.7352 20.6899 37.7352 20.6899ZM17.3406 20.9961H30.6217L24.0001 34.4711L17.3406 20.9961ZM24.0001 13.5696L30.2055 19.8477H17.7947L24.0001 13.5696ZM36.1082 19.8477H32.1352V14.4883L36.1082 19.8477ZM31.0001 13.3399V19.0438L25.3622 13.3399H31.0001ZM17.0001 19.0438V13.3399H22.6379L17.0001 19.0438ZM15.8649 14.4883V19.8477H11.892L15.8649 14.4883ZM16.092 20.9961L21.5406 31.9829L12.0055 20.9961H16.092ZM26.4974 31.9829L31.946 20.9961H36.0325L26.4974 31.9829Z"
+                            fill="var(--surface-900)"
+                        />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_1004_106792">
+                            <rect width="28" height="24.5" fill="white" transform="translate(10 12)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            }
+        />
+    );
+};
+
+const templateHeroData = {
+    logo: <DiamondLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/diamond/diamond-hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/diamond/diamond-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/diamond/diamond-hero-dashboard2.png',
+    description: 'An amazing application template for React based on the popular NextJS framework with light-dim-dark modes, 7 menu layouts, various menu themes, sample apps, ready to use template pages and 30 PrimeReact themes.',
+    liveHref: 'https://diamond.primereact.org/',
+    docHref: 'https://diamond.primereact.org/documentation',
+    storeHref: 'https://primeui.store/templates/react/diamond'
+};
+
+const DiamondPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="diamond template">
+            <TemplateHero {...templateHeroData} />
+            <DiamondSeperator />
+            <TemplateLicense license={license} />
+            <DiamondSeperator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/diamond/diamond-youtube-screen.png'} />
+                <DiamondSeperator />
+            </div>
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <DiamondSeperator />
+            <TemplateConfiguration title="React App with No Configuration" description="Diamond is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <DiamondSeperator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <DiamondSeperator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default DiamondPage;
diff --git a/pages/templates/freya/FreyaLogo.js b/pages/templates/freya/FreyaLogo.js
new file mode 100644
index 0000000000..4411334ef6
--- /dev/null
+++ b/pages/templates/freya/FreyaLogo.js
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M0 0H10.5065V6.75772L29.7675 2.94574V11.7829L10.5065 15.5949V18.5407L29.7675 14.7287V23.5659L10.5065 27.3779V35.3488H0V0Z" fill="var(--surface-0)" />
+        <path
+            d="M56.124 14.0885H51.6603V12.8153C51.6603 11.825 52.2227 11.2591 53.2068 11.2591H56.0889V6.20166H51.5197C47.5129 6.20166 45.4041 8.42978 45.4041 12.2848V14.0885H42.1705L42.2057 19.2521H45.3338V32.8683H51.8712V19.2521H56.124V14.0885Z"
+            fill="var(--surface-0)"
+        />
+        <path d="M69.8662 13.6433C67.611 13.6433 65.9902 14.2818 64.6512 15.8425L63.6294 13.7143H59.2249V32.8681H65.7788V23.1493C65.7788 20.7019 66.7654 19.6732 69.0557 19.6732H71.628V13.6433H69.8662Z" fill="var(--surface-0)" />
+        <path
+            d="M94.2636 22.9079C94.2636 17.3697 90.0799 13.0232 84.0136 13.0232C78.0867 13.0232 73.7985 17.2996 73.7985 23.0832C73.7985 28.8668 78.1216 33.1782 84.0136 33.1782C88.7202 33.1782 92.5553 30.4792 93.8801 26.1678H87.3954C86.8027 27.2895 85.5127 27.9554 84.0136 27.9554C81.9566 27.9554 80.5969 26.8338 80.1786 24.6605H94.159C94.2287 24.0646 94.2636 23.5038 94.2636 22.9079ZM84.0136 18.1408C85.966 18.1408 87.3257 19.1573 87.8835 21.0502H80.2832C80.8061 19.1573 82.1309 18.1408 84.0136 18.1408Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M109.533 13.6433L105.758 24.2429L101.701 13.6433H94.5737L102.441 31.2855C101.559 33.6686 100.819 34.3444 98.3135 34.3444H96.4789V39.9999H98.7369C103.676 39.9999 106.005 37.9013 108.58 31.9969L116.589 13.6433H109.533Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M133.387 13.585L132.716 15.0598C131.163 13.7606 129.15 13.0232 126.891 13.0232C121.065 13.0232 116.899 17.2017 116.899 23.0656C116.899 28.9646 121.065 33.1782 126.891 33.1782C129.115 33.1782 131.092 32.476 132.646 31.2119L133.211 32.5462H138.295V13.585H133.387ZM127.774 27.4196C125.302 27.4196 123.501 25.5586 123.501 23.0656C123.501 20.6077 125.302 18.7818 127.774 18.7818C130.245 18.7818 132.046 20.6077 132.046 23.0656C132.046 25.5586 130.245 27.4196 127.774 27.4196Z"
+            fill="var(--surface-0)"
+        />
+    </svg>
+);
diff --git a/pages/templates/freya/index.js b/pages/templates/freya/index.js
new file mode 100644
index 0000000000..c9cdfae117
--- /dev/null
+++ b/pages/templates/freya/index.js
@@ -0,0 +1,206 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import FreyaLogo from './FreyaLogo';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Freya is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/freya/freya-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/freya/freya-features2-ready.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/freya/freya-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Freya ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Freya uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/eYBoRNff6GPTlrgYZaMStp/Preview-%7C-Freya-2022?node-id=0%3A1&t=MGAABDlOnz4QBcEk-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the Freya Figma
+                file as they are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/freya/features-animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light and Dark Modes',
+        description: 'Impress your users with the Light and Dark modes.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/freya/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Freya offers 20 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/freya/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/freya/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/freya/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/freya/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/freya/Reveal.png'
+            },
+            {
+                id: 4,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/freya/Horizontal.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/freya/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/freya/Slim+.png'
+            },
+            {
+                id: 7,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/freya/Drawer.png'
+            }
+        ]
+    }
+];
+
+const license = {
+    documentLink: 'https://freya.primereact.org/documentation',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const templateHeroData = {
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/freya/freya-hero-pattern.png',
+    logo: <FreyaLogo />,
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/freya/freya-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/freya/freya-hero-dashboard2.png',
+    description: 'Freya is a modern admin template for developers and IT professionals. It comes with a huge collection of reusable UI components and dozens of built-in layouts for various purposes.',
+    liveHref: 'https://freya.primereact.org/',
+    docHref: 'https://freya.primereact.org/documentation',
+    storeHref: 'https://primeui.store/templates/react/freya'
+};
+
+const FreyaSeparator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
+                    <path d="M14 12H21.1333V16.5881L34.2105 14V20L21.1333 22.5881V24.5881L34.2105 22V28L21.1333 30.5881V36H14V12Z" fill="var(--surface-900)" />
+                </svg>
+            }
+        />
+    );
+};
+
+const FreyaPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="freya template">
+            <TemplateHero {...templateHeroData} />
+            <FreyaSeparator />
+            <TemplateLicense license={license} />
+            <FreyaSeparator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/freya/freya-youtube-screen.png'} />
+                <FreyaSeparator />
+            </div>
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <FreyaSeparator />
+            <TemplateConfiguration title="React based on Next.JS" description="Freya is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <FreyaSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <FreyaSeparator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default FreyaPage;
diff --git a/pages/templates/genesis/GenesisLogo.js b/pages/templates/genesis/GenesisLogo.js
new file mode 100644
index 0000000000..bf1d79a176
--- /dev/null
+++ b/pages/templates/genesis/GenesisLogo.js
@@ -0,0 +1,21 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="168" height="39" viewBox="0 0 168 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M37.3347 19.4999C38.1902 19.4999 38.8902 18.8052 38.8221 17.9523C38.5587 14.6525 37.4559 11.4652 35.6073 8.69855C33.471 5.50135 30.4346 3.00943 26.882 1.53792C23.3295 0.0664072 19.4203 -0.318607 15.649 0.431563C11.8776 1.18173 8.41341 3.0334 5.69441 5.75239C2.97541 8.47139 1.12375 11.9356 0.373579 15.707C-0.376591 19.4783 0.00842391 23.3874 1.47994 26.94C2.95145 30.4925 5.44337 33.5289 8.64057 35.6653C11.4072 37.5139 14.5945 38.6166 17.8943 38.8801C18.7472 38.9482 19.4419 38.2482 19.4419 37.3926V32.7142C19.4419 31.8586 18.7453 31.1756 17.8973 31.0623C16.1379 30.8273 14.4482 30.1928 12.9611 29.1991C11.0428 27.9173 9.54763 26.0955 8.66473 23.964C7.78182 21.8324 7.55081 19.487 8.00091 17.2241C8.45102 14.9613 9.56201 12.8828 11.1934 11.2514C12.8248 9.62 14.9033 8.509 17.1662 8.0589C19.429 7.6088 21.7744 7.8398 23.906 8.72271C26.0375 9.60562 27.8593 11.1008 29.1411 13.0191C30.1348 14.5062 30.7693 16.1959 31.0043 17.9553C31.1176 18.8033 31.8006 19.4999 32.6562 19.4999H37.3347Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M28.4704 21.3644C28.4792 21.3216 28.4464 21.2815 28.4027 21.2815H22.7723C21.9167 21.2815 21.2232 21.9751 21.2232 22.8307V28.4608C21.2232 28.5045 21.2632 28.5373 21.3061 28.5285C24.9007 27.7901 27.7319 24.959 28.4704 21.3644Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M30.9616 21.2815C30.8952 21.2815 30.8387 21.3303 30.8279 21.3958C30.0254 26.2509 26.1926 30.0836 21.3375 30.8859C21.2719 30.8968 21.2232 30.9532 21.2232 31.0197V37.3928C21.2232 38.2483 21.9167 38.9419 22.7723 38.9419H25.8706C26.7262 38.9419 27.4198 38.2483 27.4198 37.3928V31.4297C27.4198 31.405 27.4497 31.3926 27.4672 31.4101L33.9755 37.9184C34.5805 38.5234 35.5614 38.5234 36.1664 37.9184L37.86 36.2247C38.465 35.6198 38.465 34.6389 37.86 34.0339L31.3517 27.5256C31.3342 27.5081 31.3466 27.4782 31.3713 27.4782H37.3344C38.19 27.4782 38.8835 26.7846 38.8835 25.929V22.8307C38.8835 21.9751 38.19 21.2815 37.3344 21.2815H30.9616Z"
+            fill="var(--surface-0)"
+        />
+        <path
+            d="M63.2988 31.3745C56.7762 31.3745 52.4538 26.9117 52.4538 19.5308C52.4538 11.9783 56.9946 7.65587 63.486 7.65587C69.0568 7.65587 73.0359 11.1356 73.426 16.0666H68.4794C68.1674 13.6479 66.2324 11.9315 63.5641 11.9315C59.7098 11.9315 57.5252 14.8183 57.5252 19.4996C57.5252 24.1341 59.585 27.0989 63.6577 27.0989C66.9034 27.0833 68.8695 24.9143 68.9632 22.3552H63.6421V18.7038H73.5821V31H70.2739L69.9775 28.3317H69.9306C68.3546 30.2198 66.3729 31.3745 63.2988 31.3745ZM82.8042 31.2497C77.7952 31.2653 74.6588 27.9571 74.6588 22.7765C74.6588 17.7207 77.8108 14.2877 82.695 14.2721C87.5168 14.2877 90.5596 17.6271 90.5596 22.7609V23.8688H79.2777V23.9936C79.2621 26.1314 80.604 27.8011 82.8511 27.8167C84.4115 27.8011 85.7067 27.0365 86.1124 25.8037H90.4192C89.8262 29.0963 86.9394 31.2653 82.8042 31.2497ZM79.2777 21.0132H86.206C86.1436 19.0627 84.6612 17.7207 82.7574 17.7051C80.7445 17.7207 79.3713 19.1875 79.2777 21.0132ZM97.3319 21.7466V31H92.5414V14.5218H97.1759V17.5334H97.2383C98.0029 15.5829 99.8286 14.2721 102.372 14.2721C105.899 14.2721 108.505 16.7376 108.505 20.7479V31H103.698V21.5906C103.698 19.4372 102.497 18.2356 100.578 18.2356C98.7051 18.2356 97.3319 19.406 97.3319 21.7466ZM118.663 31.2497C113.654 31.2653 110.518 27.9571 110.518 22.7765C110.518 17.7207 113.67 14.2877 118.554 14.2721C123.376 14.2877 126.418 17.6271 126.418 22.7609V23.8688H115.136V23.9936C115.121 26.1314 116.463 27.8011 118.71 27.8167C120.27 27.8011 121.565 27.0365 121.971 25.8037H126.278C125.685 29.0963 122.798 31.2653 118.663 31.2497ZM115.136 21.0132H122.065C122.002 19.0627 120.52 17.7207 118.616 17.7051C116.603 17.7207 115.23 19.1875 115.136 21.0132ZM142.429 19.7961H137.981C137.95 18.5165 136.811 17.7051 135.313 17.7051C133.94 17.7051 132.91 18.298 132.91 19.2187C132.91 19.9677 133.518 20.4983 134.86 20.7791L137.95 21.3877C141.009 22.0119 142.819 23.3227 142.819 25.8662C142.819 29.2211 139.713 31.2653 135.485 31.2653C130.959 31.2653 128.088 29.2211 127.823 25.7569H132.551C132.723 27.1457 133.815 27.8323 135.5 27.8323C136.983 27.8323 137.997 27.2862 137.997 26.3187C137.997 25.4448 137.17 25.0391 135.921 24.7895L133.097 24.2433C129.789 23.6035 128.197 21.9183 128.197 19.4216C128.197 16.2227 130.959 14.2877 135.219 14.2877C139.526 14.2877 142.335 16.3475 142.429 19.7961ZM144.738 31V14.5218H149.528V31H144.738ZM147.141 12.3684C145.643 12.3684 144.441 11.2137 144.457 9.79367C144.441 8.37368 145.643 7.21895 147.141 7.21895C148.608 7.21895 149.809 8.37368 149.825 9.79367C149.809 11.2137 148.608 12.3684 147.141 12.3684ZM166.147 19.7961H161.7C161.669 18.5165 160.53 17.7051 159.032 17.7051C157.658 17.7051 156.628 18.298 156.628 19.2187C156.628 19.9677 157.237 20.4983 158.579 20.7791L161.669 21.3877C164.727 22.0119 166.537 23.3227 166.537 25.8662C166.537 29.2211 163.432 31.2653 159.203 31.2653C154.678 31.2653 151.807 29.2211 151.541 25.7569H156.27C156.441 27.1457 157.534 27.8323 159.219 27.8323C160.701 27.8323 161.715 27.2862 161.715 26.3187C161.715 25.4448 160.888 25.0391 159.64 24.7895L156.816 24.2433C153.508 23.6035 151.916 21.9183 151.916 19.4216C151.916 16.2227 154.678 14.2877 158.938 14.2877C163.245 14.2877 166.054 16.3475 166.147 19.7961Z"
+            fill="var(--surface-0)"
+        />
+    </svg>
+);
diff --git a/pages/templates/genesis/index.js b/pages/templates/genesis/index.js
new file mode 100644
index 0000000000..3c0ce83492
--- /dev/null
+++ b/pages/templates/genesis/index.js
@@ -0,0 +1,193 @@
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import GenesisLogo from './GenesisLogo';
+
+const features1Data = [
+    {
+        title: 'Modern and Sleek Design',
+        description: 'Enjoy a contemporary design that looks great on all devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-1.png'
+    },
+    {
+        title: 'SEO & Performance',
+        description: 'Optimized for fast loading and high search engine rankings.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-2.png'
+    },
+    {
+        title: 'Animation / Effects',
+        description: 'Enhance engagement with captivating animations and effects.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/horizontal-features-img-3.png'
+    }
+];
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Genesis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/fully-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/mobile-experience.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'Tailwind',
+        description: 'Built with TailwindCSS, offering flexibility and efficiency for responsive design. Enjoy the power of Tailwind, a favorite among developers.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-tailwind.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Genesis ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Genesis uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/design/bGujrJyznnSatJFMtkXbTN/Preview-%7C-Genesis?node-id=0-1&t=etuXAwkUAEuhJ3p0-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the Genesis Figma
+                file as they are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Various Landing Pages',
+        description: 'Choose from 9 templates for industries like SaaS, Travel, and Real Estate, each tailored to specific business needs.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-landing-pages.png'
+    },
+    {
+        id: 2,
+        title: 'Secondary Pages',
+        description: 'Includes essential pages like About, Pricing, Blog, and Contact for a complete user experience.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-second-pages.png'
+    },
+    {
+        id: 3,
+        title: 'Dark & Light Modes',
+        description: 'Easily switch between Light and Dark modes to match your aesthetic preferences.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-dark-light-modes.png'
+    },
+    {
+        id: 4,
+        title: 'Themes',
+        description: 'Customize with 17 color themes to align with your brand effortlessly.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/genesis/animation-menu-themes.png'
+    }
+];
+
+const license = {
+    documentLink: '',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const GenesisSeperator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+                    <path
+                        d="M23.0438 12.5C23.5718 12.5 24.0039 12.0712 23.9619 11.5448C23.7992 9.50803 23.1186 7.54079 21.9776 5.83315C20.659 3.85976 18.7849 2.3217 16.5922 1.41345C14.3994 0.505199 11.9867 0.26756 9.65889 0.730581C7.33113 1.1936 5.19294 2.33649 3.51471 4.01471C1.83649 5.69294 0.693602 7.83113 0.230581 10.1589C-0.23244 12.4867 0.00519942 14.8994 0.913448 17.0922C1.8217 19.2849 3.35976 21.159 5.33315 22.4776C7.04079 23.6186 9.00803 24.2992 11.0448 24.4619C11.5712 24.5039 12 24.0718 12 23.5438V20.6561C12 20.128 11.57 19.7065 11.0466 19.6366C9.96068 19.4915 8.91777 19.0998 7.99987 18.4865C6.81584 17.6954 5.893 16.5709 5.34806 15.2553C4.80311 13.9397 4.66052 12.492 4.93834 11.0953C5.21615 9.69866 5.90188 8.41575 6.90881 7.40881C7.91575 6.40188 9.19866 5.71615 10.5953 5.43834C11.992 5.16052 13.4397 5.30311 14.7553 5.84806C16.0709 6.39301 17.1954 7.31584 17.9865 8.49988C18.5998 9.41777 18.9915 10.4607 19.1365 11.5466C19.2065 12.07 19.628 12.5 20.1561 12.5H23.0438Z"
+                        fill="var(--surface-900)"
+                    />
+                    <path
+                        d="M17.566 13.6824C17.575 13.6397 17.5422 13.5996 17.4985 13.5996H14.0556C13.5275 13.5996 13.0994 14.0277 13.0994 14.5558V17.9985C13.0994 18.0422 13.1394 18.0751 13.1822 18.066C15.3753 17.6025 17.1023 15.8755 17.566 13.6824Z"
+                        fill="var(--surface-900)"
+                    />
+                    <path
+                        d="M19.1544 13.5996C19.0879 13.5996 19.0315 13.6483 19.0203 13.7138C18.5118 16.6753 16.1751 19.0119 13.2136 19.5203C13.1481 19.5316 13.0994 19.588 13.0994 19.6544V23.5438C13.0994 24.0719 13.5275 24.5 14.0556 24.5H15.9679C16.496 24.5 16.9241 24.0719 16.9241 23.5438V19.889C16.9241 19.8642 16.954 19.8518 16.9715 19.8693L20.9704 23.8683C21.3438 24.2417 21.9492 24.2417 22.3227 23.8683L23.368 22.8229C23.7414 22.4495 23.7414 21.8441 23.368 21.4707L19.3691 17.4717C19.3516 17.4542 19.364 17.4243 19.3887 17.4243H23.0436C23.5717 17.4243 23.9998 16.9962 23.9998 16.4682V14.5558C23.9998 14.0277 23.5717 13.5996 23.0436 13.5996H19.1544Z"
+                        fill="var(--surface-900)"
+                    />
+                </svg>
+            }
+        />
+    );
+};
+
+const templateHeroData = {
+    logo: <GenesisLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/genesis/hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/genesis/dashboard-2.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/genesis/dashboard-1.png',
+    description: 'Genesis, crafted by Prime, is the ultimate multi-purpose website template built with React and Next.js. It offers unmatched versatility and performance with a suite of example pages to elevate your projects.',
+    liveHref: 'https://genesis.primereact.org/',
+    docHref: '',
+    multipurpose: true,
+    storeHref: 'https://primeui.store/templates/react/genesis'
+};
+
+const GenesisPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="genesis template">
+            <TemplateHero {...templateHeroData} />
+            <GenesisSeperator />
+            <TemplateLicense license={license} />
+            <GenesisSeperator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <GenesisSeperator />
+            <TemplateFeatures featuresData={features1Data} displayType="horizontal" />
+            <GenesisSeperator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <GenesisSeperator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default GenesisPage;
diff --git a/pages/templates/index.js b/pages/templates/index.js
new file mode 100644
index 0000000000..e29e30150e
--- /dev/null
+++ b/pages/templates/index.js
@@ -0,0 +1,175 @@
+import Link from 'next/link';
+
+const TemplatesPage = () => {
+    return (
+        <div>
+            <div className="doc-intro">
+                <h1>Templates</h1>
+                <p>Highly customizable application templates to get started in no time with style. Designed and implemented by PrimeTek.</p>
+            </div>
+
+            <h2>Multi-Purpose Templates</h2>
+            <div className="grid">
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://genesis.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Genesis" src="https://primefaces.org/cdn/primereact/images/layouts/genesis-react.webp" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://genesis.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/genesis" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <h2>Admin Templates</h2>
+            <div className="grid">
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://apollo.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Apollo" src="https://primefaces.org/cdn/primereact/images/layouts/apollo-nextjs.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://apollo.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/apollo" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://sakai.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Sakai" src="https://primefaces.org/cdn/primereact/images/layouts/sakai-react.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://sakai.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/sakai" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://diamond.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Diamond" src="https://primefaces.org/cdn/primereact/images/layouts/diamond-react.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://diamond.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/diamond" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://verona.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Verona" src="https://primefaces.org/cdn/primereact/images/templates/verona.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://verona.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/verona" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://atlantis.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Atlantis" src="https://primefaces.org/cdn/primereact/images/layouts/atlantis-react.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://atlantis.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/atlantis" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://freya.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Freya" src="https://primefaces.org/cdn/primereact/images/layouts/freya-react.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://freya.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/freya" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://ultima.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Ultima" src="https://primefaces.org/cdn/primereact/images/layouts/ultima-react.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://ultima.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/ultima" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-12 lg:col-6 xl:col-4">
+                    <div className="card mb-0">
+                        <a href="https://avalon.primereact.org/" rel="noopener noreferrer">
+                            <img alt="Avalon" src="https://primefaces.org/cdn/primereact/images/layouts/avalon-react.jpg" className="w-full" />
+                        </a>
+                        <div className="flex gap-3 mt-3">
+                            <a href="https://avalon.primereact.org/" className="flex-1 p-button p-component" rel="noopener noreferrer">
+                                <span className="p-button-label white-space-nowrap">Preview</span>
+                            </a>
+                            <Link href="http://github.com/templates/avalon" rel="noopener noreferrer">
+                                <a className="flex-1 p-button p-component p-button-outlined">
+                                    <span className="p-button-label white-space-nowrap">Learn More</span>
+                                </a>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TemplatesPage;
diff --git a/pages/templates/sakai/SakaiLogo.js b/pages/templates/sakai/SakaiLogo.js
new file mode 100644
index 0000000000..98dc598d47
--- /dev/null
+++ b/pages/templates/sakai/SakaiLogo.js
@@ -0,0 +1,28 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="140" height="40" viewBox="0 0 140 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_3182_1798)">
+            <g clipPath="url(#clip1_3182_1798)">
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z"
+                    fill="var(--surface-0)"
+                />
+                <path d="M27 18.3653C10.5114 19.1945 0 8.88896 0 8.88896C0 8.88896 16.5176 14.5866 27 14.5866C37.4824 14.5866 54 8.88896 54 8.88896C54 8.88896 43.4886 17.5361 27 18.3653Z" fill="var(--surface-0)" />
+            </g>
+            <path
+                d="M79.0753 15.2344C78.9825 14.366 78.5914 13.6899 77.902 13.206C77.2192 12.7221 76.331 12.4801 75.2372 12.4801C74.4683 12.4801 73.8087 12.5961 73.2585 12.8281C72.7083 13.0601 72.2874 13.375 71.9957 13.7727C71.7041 14.1705 71.5549 14.6245 71.5483 15.1349C71.5483 15.5592 71.6444 15.9271 71.8366 16.2386C72.0355 16.5502 72.304 16.8153 72.642 17.0341C72.9801 17.2462 73.3546 17.4252 73.7656 17.571C74.1766 17.7169 74.5909 17.8395 75.0085 17.9389L76.9176 18.4162C77.6866 18.5952 78.4257 18.8371 79.1349 19.142C79.8509 19.447 80.4905 19.8314 81.054 20.2955C81.6241 20.7595 82.0748 21.3196 82.4062 21.9759C82.7377 22.6321 82.9034 23.401 82.9034 24.2827C82.9034 25.4759 82.5985 26.5265 81.9886 27.4347C81.3788 28.3362 80.4972 29.0421 79.3438 29.5526C78.197 30.0563 76.8082 30.3082 75.1776 30.3082C73.5933 30.3082 72.2178 30.063 71.0511 29.5724C69.8911 29.0819 68.983 28.366 68.3267 27.4247C67.6771 26.4834 67.3258 25.3366 67.2727 23.9844H70.902C70.955 24.6937 71.1738 25.2836 71.5582 25.7543C71.9427 26.2249 72.4432 26.5762 73.0597 26.8082C73.6828 27.0402 74.3788 27.1562 75.1477 27.1562C75.9498 27.1562 76.6525 27.0369 77.2557 26.7983C77.8655 26.553 78.3428 26.215 78.6875 25.7841C79.0322 25.3466 79.2079 24.8362 79.2145 24.2528C79.2079 23.7225 79.0521 23.285 78.7472 22.9403C78.4422 22.589 78.0147 22.2973 77.4645 22.0653C76.9209 21.8267 76.2846 21.6146 75.5554 21.429L73.2386 20.8324C71.5616 20.4015 70.2358 19.7486 69.2614 18.8736C68.2936 17.992 67.8097 16.822 67.8097 15.3636C67.8097 14.1638 68.1345 13.1132 68.7841 12.2116C69.4403 11.3101 70.3319 10.6108 71.4588 10.1136C72.5857 9.60985 73.8617 9.35795 75.2869 9.35795C76.732 9.35795 77.9981 9.60985 79.0852 10.1136C80.179 10.6108 81.0374 11.3035 81.6605 12.1918C82.2836 13.0734 82.6051 14.0876 82.625 15.2344H79.0753ZM90.4279 30.3082C89.4601 30.3082 88.5884 30.1359 87.8129 29.7912C87.0439 29.4399 86.4341 28.9228 85.9833 28.2401C85.5392 27.5573 85.3171 26.7154 85.3171 25.7145C85.3171 24.8527 85.4762 24.1402 85.7944 23.5767C86.1126 23.0133 86.5468 22.5625 87.0969 22.2244C87.6471 21.8864 88.2669 21.6312 88.9563 21.4588C89.6523 21.2798 90.3716 21.1506 91.114 21.071C92.0089 20.9782 92.7347 20.8954 93.2915 20.8224C93.8484 20.7429 94.2527 20.6236 94.5046 20.4645C94.7631 20.2988 94.8924 20.0436 94.8924 19.6989V19.6392C94.8924 18.8902 94.6703 18.3101 94.2262 17.8991C93.7821 17.4882 93.1424 17.2827 92.3072 17.2827C91.4255 17.2827 90.7262 17.4749 90.2092 17.8594C89.6987 18.2438 89.354 18.6979 89.1751 19.2216L85.8143 18.7443C86.0794 17.8163 86.5169 17.0407 87.1268 16.4176C87.7366 15.7879 88.4824 15.3172 89.364 15.0057C90.2456 14.6875 91.2201 14.5284 92.2873 14.5284C93.0231 14.5284 93.7556 14.6146 94.4847 14.7869C95.2139 14.9593 95.8801 15.2443 96.4833 15.642C97.0865 16.0331 97.5704 16.5668 97.935 17.2429C98.3062 17.919 98.4918 18.7642 98.4918 19.7784V30H95.0316V27.902H94.9123C94.6935 28.3262 94.3853 28.724 93.9876 29.0952C93.5965 29.4598 93.1026 29.7547 92.506 29.9801C91.9161 30.1989 91.2234 30.3082 90.4279 30.3082ZM91.3626 27.6634C92.0851 27.6634 92.7115 27.5208 93.2418 27.2358C93.7721 26.9441 94.1798 26.5597 94.4648 26.0824C94.7565 25.6051 94.9023 25.0848 94.9023 24.5213V22.7216C94.7897 22.8144 94.5974 22.9006 94.3256 22.9801C94.0605 23.0597 93.7622 23.1293 93.4308 23.1889C93.0993 23.2486 92.7712 23.3016 92.4464 23.348C92.1216 23.3944 91.8398 23.4342 91.6012 23.4673C91.0643 23.5402 90.5837 23.6596 90.1594 23.8253C89.7352 23.991 89.4005 24.223 89.1552 24.5213C88.9099 24.813 88.7873 25.1908 88.7873 25.6548C88.7873 26.3177 89.0292 26.8182 89.5131 27.1562C89.997 27.4943 90.6135 27.6634 91.3626 27.6634ZM105.392 25.2074L105.382 20.8622H105.959L111.448 14.7273H115.654L108.902 22.2443H108.157L105.392 25.2074ZM102.111 30V9.63636H105.711V30H102.111ZM111.696 30L106.725 23.0497L109.151 20.5142L116.002 30H111.696ZM122.447 30.3082C121.48 30.3082 120.608 30.1359 119.832 29.7912C119.063 29.4399 118.454 28.9228 118.003 28.2401C117.559 27.5573 117.337 26.7154 117.337 25.7145C117.337 24.8527 117.496 24.1402 117.814 23.5767C118.132 23.0133 118.566 22.5625 119.116 22.2244C119.667 21.8864 120.286 21.6312 120.976 21.4588C121.672 21.2798 122.391 21.1506 123.134 21.071C124.028 20.9782 124.754 20.8954 125.311 20.8224C125.868 20.7429 126.272 20.6236 126.524 20.4645C126.783 20.2988 126.912 20.0436 126.912 19.6989V19.6392C126.912 18.8902 126.69 18.3101 126.246 17.8991C125.802 17.4882 125.162 17.2827 124.327 17.2827C123.445 17.2827 122.746 17.4749 122.229 17.8594C121.718 18.2438 121.374 18.6979 121.195 19.2216L117.834 18.7443C118.099 17.8163 118.536 17.0407 119.146 16.4176C119.756 15.7879 120.502 15.3172 121.384 15.0057C122.265 14.6875 123.24 14.5284 124.307 14.5284C125.043 14.5284 125.775 14.6146 126.504 14.7869C127.233 14.9593 127.9 15.2443 128.503 15.642C129.106 16.0331 129.59 16.5668 129.955 17.2429C130.326 17.919 130.511 18.7642 130.511 19.7784V30H127.051V27.902H126.932C126.713 28.3262 126.405 28.724 126.007 29.0952C125.616 29.4598 125.122 29.7547 124.526 29.9801C123.936 30.1989 123.243 30.3082 122.447 30.3082ZM123.382 27.6634C124.105 27.6634 124.731 27.5208 125.261 27.2358C125.792 26.9441 126.199 26.5597 126.484 26.0824C126.776 25.6051 126.922 25.0848 126.922 24.5213V22.7216C126.809 22.8144 126.617 22.9006 126.345 22.9801C126.08 23.0597 125.782 23.1293 125.45 23.1889C125.119 23.2486 124.791 23.3016 124.466 23.348C124.141 23.3944 123.859 23.4342 123.621 23.4673C123.084 23.5402 122.603 23.6596 122.179 23.8253C121.755 23.991 121.42 24.223 121.175 24.5213C120.929 24.813 120.807 25.1908 120.807 25.6548C120.807 26.3177 121.049 26.8182 121.533 27.1562C122.017 27.4943 122.633 27.6634 123.382 27.6634ZM134.131 30V14.7273H137.73V30H134.131ZM135.94 12.5597C135.37 12.5597 134.88 12.3707 134.469 11.9929C134.058 11.6084 133.852 11.1477 133.852 10.6108C133.852 10.0672 134.058 9.60653 134.469 9.22869C134.88 8.84422 135.37 8.65199 135.94 8.65199C136.517 8.65199 137.008 8.84422 137.412 9.22869C137.823 9.60653 138.028 10.0672 138.028 10.6108C138.028 11.1477 137.823 11.6084 137.412 11.9929C137.008 12.3707 136.517 12.5597 135.94 12.5597Z"
+                fill="var(--surface-0)"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_3182_1798">
+                <rect width="140" height="40" fill="var(--surface-0)" />
+            </clipPath>
+            <clipPath id="clip1_3182_1798">
+                <rect width="54" height="40" fill="var(--surface-0)" />
+            </clipPath>
+        </defs>
+    </svg>
+);
diff --git a/pages/templates/sakai/index.js b/pages/templates/sakai/index.js
new file mode 100644
index 0000000000..45f0f53a08
--- /dev/null
+++ b/pages/templates/sakai/index.js
@@ -0,0 +1,156 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import SakaiLogo from './SakaiLogo';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Atlantis is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Full SaSS Support',
+        description: 'Sass is utilized for both the application and components to provide simplicity and flexibility.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/babylon/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/babylon/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Atlantis ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/babylon/features-animation-icons.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Various Free Themes',
+        description: 'Sakai has various free themes to choose from; PrimeOne Design, Bootstrap, Material Design with light and dark options.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: '2 Menu Orientations',
+        description: 'Sakai has 2 menu modes; Static and Overlay',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/Overlay.png'
+            }
+        ]
+    }
+];
+
+const features1Data = [
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-github.png',
+        title: 'Open Source and Free to Use',
+        description: "Explore Sakai, our versatile, open-source React application template. It's free for your every innovation."
+    },
+    {
+        src: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-ready.png',
+        title: 'Ready to Use Pages',
+        description: 'Landing, login and error pages are provided as template pages to get started with building your app in no time.'
+    }
+];
+
+const templateHeroData = {
+    logo: <SakaiLogo />,
+    pattern: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-hero-pattern.png',
+    dashboard1: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-hero-dashboard1.png',
+    dashboard2: 'https://primefaces.org/cdn/primereact/images/templates/sakai/sakai-hero-dashboard2.png',
+    description: 'Sakai is a free application template for React based on the popular Next.js framework with new App Router.',
+    liveHref: 'https://sakai.primereact.org/',
+    docHref: 'https://sakai.primereact.org/documentation',
+    free: true,
+    storeHref: 'https://github.com/primefaces/sakai-react',
+    supportHref: 'https://github.com/primefaces/sakai-react/issues'
+};
+
+const SakaiSeparator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg width="33" height="24" viewBox="0 0 33 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g clipPath="url(#clip0_2130_100567)">
+                        <path
+                            fillRule="evenodd"
+                            clipRule="evenodd"
+                            d="M10.2923 11.548C10.288 11.642 10.2858 11.7366 10.2858 11.8317C10.2858 15.2102 13.0246 17.949 16.4032 17.949C19.7817 17.949 22.5205 15.2102 22.5205 11.8317C22.5205 11.7343 22.5183 11.6375 22.5138 11.5413C23.1235 11.448 23.7317 11.3408 24.3378 11.2196L24.4013 11.2069C24.4172 11.4131 24.4253 11.6214 24.4253 11.8317C24.4253 16.2621 20.8337 19.8538 16.4032 19.8538C11.9727 19.8538 8.38106 16.2621 8.38106 11.8317C8.38106 11.6244 8.3889 11.4189 8.40437 11.2156L8.42433 11.2196C9.04498 11.3437 9.6678 11.4532 10.2923 11.548ZM19.9854 6.87227C18.9785 6.14373 17.741 5.71429 16.4032 5.71429C15.063 5.71429 13.8234 6.14526 12.8156 6.87619C11.9977 6.7939 11.182 6.68324 10.37 6.54423C11.8403 4.86785 13.9982 3.80952 16.4032 3.80952C18.805 3.80952 20.9604 4.86507 22.4305 6.5376C21.6187 6.67752 20.8031 6.7891 19.9854 6.87227ZM26.2803 10.8311C26.3132 11.1602 26.33 11.4939 26.33 11.8317C26.33 17.3141 21.8856 21.7585 16.4032 21.7585C10.9207 21.7585 6.4763 17.3141 6.4763 11.8317C6.4763 11.4969 6.49287 11.166 6.52521 10.8398L4.64967 10.4646C4.59805 10.9132 4.57153 11.3693 4.57153 11.8317C4.57153 18.3661 9.86875 23.6633 16.4032 23.6633C22.9376 23.6633 28.2348 18.3661 28.2348 11.8317C28.2348 11.3663 28.208 10.9073 28.1557 10.456L26.2803 10.8311ZM26.5412 5.72846L24.5307 6.13055C22.7348 3.57493 19.764 1.90476 16.4032 1.90476C13.0389 1.90476 10.0656 3.57831 8.27016 6.13832L6.26033 5.73634C8.33039 2.29907 12.0983 0 16.4032 0C20.7048 0 24.4702 2.29555 26.5412 5.72846Z"
+                            fill="var(--surface-900)"
+                        />
+                        <path
+                            d="M16.1905 11.0192C6.30316 11.5167 0 5.33337 0 5.33337C0 5.33337 9.90476 8.75196 16.1905 8.75196C22.4762 8.75196 32.381 5.33337 32.381 5.33337C32.381 5.33337 26.0778 10.5217 16.1905 11.0192Z"
+                            fill="var(--surface-900)"
+                        />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_2130_100567">
+                            <rect width="32.381" height="24" fill="var(--surface-0)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+            }
+        />
+    );
+};
+
+const BabylonPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="sakai template">
+            <TemplateHero {...templateHeroData} />
+            <SakaiSeparator />
+            <TemplateFeatures featuresData={features1Data} displayType="horizontal" />
+            <SakaiSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} animationSeconds={3000} />
+            <SakaiSeparator />
+            <TemplateConfiguration title="React based on Next.JS" description="Sakai is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <SakaiSeparator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <SakaiSeparator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default BabylonPage;
diff --git a/pages/templates/ultima/UltimaLogo.js b/pages/templates/ultima/UltimaLogo.js
new file mode 100644
index 0000000000..2930c7fbdb
--- /dev/null
+++ b/pages/templates/ultima/UltimaLogo.js
@@ -0,0 +1,27 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_957_53077)">
+            <path
+                d="M95.6837 6.5625V25.9765C95.6707 27.8906 95.2474 29.5573 94.4141 30.9765C93.5808 32.3959 92.4024 33.4896 90.8789 34.2578C89.3686 35.013 87.6303 35.3906 85.6641 35.3906C82.6693 35.3906 80.2669 34.5769 78.4571 32.9492C76.6602 31.3086 75.7292 29.043 75.6641 26.1524V6.5625H78.0469V25.8008C78.0469 28.1966 78.7306 30.0586 80.0977 31.3867C81.4649 32.7019 83.3203 33.3594 85.6641 33.3594C88.0078 33.3594 89.8568 32.6952 91.2111 31.3672C92.5782 30.039 93.2618 28.1901 93.2618 25.8203V6.5625H95.6837Z"
+                fill="var(--surface-0)"
+            />
+            <path d="M104.805 32.9688H118.848V35H102.383V6.5625H104.805V32.9688Z" fill="var(--surface-0)" />
+            <path d="M137.383 8.61328H127.636V35H125.235V8.61328H115.508V6.5625H137.383V8.61328Z" fill="var(--surface-0)" />
+            <path d="M144.923 35H142.52V6.5625H144.923V35Z" fill="var(--surface-0)" />
+            <path d="M155.84 6.5625L166.327 31.6601L176.855 6.5625H180.059V35H177.656V22.6172L177.851 9.92188L167.265 35H165.41L154.864 10.0195L155.059 22.539V35H152.656V6.5625H155.84Z" fill="var(--surface-0)" />
+            <path d="M202.969 27.0312H190.059L187.129 35H184.61L195.371 6.5625H197.656L208.418 35H205.918L202.969 27.0312ZM190.801 24.9805H202.208L196.504 9.49219L190.801 24.9805Z" fill="var(--surface-0)" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M49.9636 10.7127C49.889 10.5341 49.7146 10.4185 49.5213 10.4185H46.8866L48.3213 8.68796C48.44 8.54566 48.4639 8.34796 48.3854 8.18083C48.3069 8.01369 48.1382 7.90671 47.9525 7.90671H19.0408L10.842 0.131475C10.683 -0.0184707 10.4417 -0.0433026 10.2578 0.0732162L5.65804 2.95276L5.6542 2.95657L5.64941 2.95849L0.216438 6.52472C0.20303 6.53333 0.196326 6.54669 0.183876 6.5572C0.157061 6.57821 0.134076 6.60114 0.113007 6.62692C0.0938536 6.64984 0.0785306 6.67276 0.0641652 6.69855C0.0488423 6.72625 0.0383076 6.75395 0.0287308 6.78355C0.0191537 6.81411 0.0134076 6.84468 0.0095769 6.87715C0.00861921 6.89339 0 6.90675 0 6.92395C0 6.93922 0.00670382 6.95069 0.00861921 6.96598C0.0114923 6.99749 0.0181961 7.0271 0.027773 7.05861C0.0373499 7.09013 0.0478845 7.11974 0.0641652 7.14935C0.070869 7.16176 0.0718267 7.17514 0.0794882 7.18755C0.0861921 7.19805 0.0986421 7.20187 0.106304 7.21142C0.139822 7.2544 0.179088 7.28974 0.225058 7.31839C0.242295 7.3289 0.255704 7.34228 0.272941 7.35086C0.336149 7.38142 0.405102 7.40149 0.479802 7.40149H7.02179L8.49854 11.0757L8.50045 11.0785V11.0814L18.108 34.0365L12.4366 39.1691C12.29 39.3019 12.2402 39.51 12.3121 39.6944C12.3829 39.8788 12.5611 40 12.7584 40H20.9236C20.9869 40 21.0491 39.9866 21.1075 39.9627C21.1659 39.9389 21.2186 39.9035 21.2626 39.8596L25.555 35.5627C25.5608 35.5694 25.5626 35.578 25.5694 35.5848L29.6338 39.851C29.7248 39.9475 29.8445 39.9743 29.9834 40C37.3624 39.9589 48.5578 39.9216 49.0845 39.9761C49.1343 39.9924 49.185 40 49.2357 40C49.3996 40 49.5595 39.9169 49.6486 39.7728C49.9254 39.3237 49.9234 39.319 35.7831 25.3254L49.8593 11.2361C49.9971 11.0967 50.0374 10.8913 49.9636 10.7127ZM46.9354 8.86084L45.6454 10.4185H21.6898L20.0474 8.86084H46.9354ZM10.4522 1.07795L20.3011 10.4185H9.26661L6.50559 3.54872L10.4522 1.07795ZM2.07722 6.44545L5.6858 4.07687L6.63775 6.44545H2.07722ZM26.2628 34.9258C26.2502 34.9124 26.233 34.9066 26.2196 34.8961L29.6501 31.4626V38.4805L26.2628 34.9258ZM48.1306 39.0163C46.3225 38.9895 41.83 38.9781 30.6077 39.0401V30.8141C30.6077 30.7262 30.5771 30.6479 30.536 30.5763L35.108 25.9996C39.6167 30.4626 45.9998 36.8149 48.1306 39.0163ZM21.0903 38.6781L9.66117 11.3736H45.7508C45.7853 11.3813 45.8197 11.3918 45.8542 11.3918C45.882 11.3918 45.9079 11.3784 45.9356 11.3736H48.3681L21.0903 38.6781Z"
+                fill="var(--surface-0)"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_957_53077">
+                <rect width="208.75" height="40" fill="var(--surface-0)" />
+            </clipPath>
+        </defs>
+    </svg>
+);
diff --git a/pages/templates/ultima/index.js b/pages/templates/ultima/index.js
new file mode 100644
index 0000000000..8f304a6fe8
--- /dev/null
+++ b/pages/templates/ultima/index.js
@@ -0,0 +1,209 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import UltimaLogo from './UltimaLogo';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Ultima is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/ultima-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Ready to Use Pages',
+        description: 'Everything is ready for you to start and build your app in no time. Landing, login, invoice, help, and error pages are provided as template pages.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/ultima-features2-ready.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/ultima-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Ultima ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Ultima uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/ijQrxq13lxacgkb6XHlLxA/Preview-%7C-Ultima-2022?node-id=354%3A7715&t=gjWHprUDE5RJIg78-1">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the
+                Ultima Figma file as they are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/features-animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light and Dark Modes',
+        description: 'Ultima offers you 2 uniquely designed layout modes to choose from; Light and Dark.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Ultima offers 17 built-in component themes with dark and light options. Also if you wanna create your own theme you can do it by just defining couple SASS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '7 Menu Orientations',
+        description: 'Static, Overlay, Slim, Slim+, Reveal, Drawer and Horizontal are the available menu layouts depending on your preference.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/atlantis/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Reveal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/Reveal.png'
+            },
+            {
+                id: 4,
+                title: 'Horizontal',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/Horizontal.png'
+            },
+            {
+                id: 5,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/Overlay.png'
+            },
+            {
+                id: 6,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/Slim+.png'
+            },
+            {
+                id: 7,
+                title: 'Drawer',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/ultima/Drawer.png'
+            }
+        ]
+    }
+];
+
+const license = {
+    documentLink: 'https://ultima.primereact.org/documentation/',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$59',
+            discountPrice: '$39',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$590',
+            discountPrice: '$390',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const UltimaSeperator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
+                    <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M36.9818 19.6064C36.9445 19.5171 36.8573 19.4593 36.7606 19.4593H35.4433L36.1606 18.594C36.22 18.5228 36.2319 18.424 36.1927 18.3404C36.1534 18.2568 36.0691 18.2034 35.9762 18.2034H21.5204L17.421 14.3157C17.3415 14.2408 17.2208 14.2283 17.1289 14.2866L14.829 15.7264L14.8271 15.7283L14.8247 15.7292L12.1082 17.5124C12.1015 17.5167 12.0982 17.5233 12.0919 17.5286C12.0785 17.5391 12.067 17.5506 12.0565 17.5635C12.0469 17.5749 12.0393 17.5864 12.0321 17.5993C12.0244 17.6131 12.0192 17.627 12.0144 17.6418C12.0096 17.6571 12.0067 17.6723 12.0048 17.6886C12.0043 17.6967 12 17.7034 12 17.712C12 17.7196 12.0034 17.7253 12.0043 17.733C12.0057 17.7487 12.0091 17.7636 12.0139 17.7793C12.0187 17.7951 12.0239 17.8099 12.0321 17.8247C12.0354 17.8309 12.0359 17.8376 12.0397 17.8438C12.0431 17.849 12.0493 17.8509 12.0532 17.8557C12.0699 17.8772 12.0895 17.8949 12.1125 17.9092C12.1211 17.9144 12.1279 17.9211 12.1365 17.9254C12.1681 17.9407 12.2026 17.9507 12.2399 17.9507H15.5109L16.2493 19.7878L16.2502 19.7893V19.7907L21.054 31.2682L18.2183 33.8346C18.145 33.9009 18.1201 34.005 18.156 34.0972C18.1915 34.1894 18.2806 34.25 18.3792 34.25H22.4618C22.4934 34.25 22.5246 34.2433 22.5538 34.2314C22.5829 34.2194 22.6093 34.2017 22.6313 34.1798L24.7775 32.0314C24.7804 32.0347 24.7813 32.039 24.7847 32.0424L26.8169 34.1755C26.8624 34.2238 26.9223 34.2371 26.9917 34.25C30.6812 34.2294 36.2789 34.2108 36.5423 34.2381C36.5671 34.2462 36.5925 34.25 36.6179 34.25C36.6998 34.25 36.7797 34.2084 36.8243 34.1364C36.9627 33.9119 36.9617 33.9095 29.8916 26.9127L36.9296 19.8681C36.9986 19.7983 37.0187 19.6957 36.9818 19.6064ZM35.4677 18.6804L34.8227 19.4593H22.8449L22.0237 18.6804H35.4677ZM17.2261 14.789L22.1506 19.4593H16.6333L15.2528 16.0244L17.2261 14.789ZM13.0386 17.4727L14.8429 16.2884L15.3189 17.4727H13.0386ZM25.1314 31.7129C25.1251 31.7062 25.1165 31.7033 25.1098 31.6981L26.8251 29.9813V33.4903L25.1314 31.7129ZM36.0653 33.7581C35.1613 33.7448 32.915 33.7391 27.3039 33.7701V29.6571C27.3039 29.6131 27.2886 29.5739 27.268 29.5381L29.554 27.2498C31.8084 29.4813 34.9999 32.6574 36.0653 33.7581ZM22.5451 33.5891L16.8306 19.9368H34.8754C34.8926 19.9406 34.9099 19.9459 34.9271 19.9459C34.941 19.9459 34.9539 19.9392 34.9678 19.9368H36.1841L22.5451 33.5891Z"
+                        fill="var(--surface-900)"
+                    />
+                </svg>
+            }
+        />
+    );
+};
+
+const UltimaPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="ultima template">
+            <TemplateHero
+                pattern={'https://primefaces.org/cdn/primereact/images/templates/ultima/ultima-hero-pattern.png'}
+                logo={<UltimaLogo />}
+                description={'A highly customizable premium application template featuring 7 menu modes, 17 themes, light and dark modes. Based on material design language, it is fully responsive, touch optimized, built with SASS, CSS3 and HTML5.'}
+                dashboard1={'https://primefaces.org/cdn/primereact/images/templates/ultima/ultima-hero-dashboard1.png'}
+                dashboard2={'https://primefaces.org/cdn/primereact/images/templates/ultima/ultima-hero-dashboard2.png'}
+                liveHref={'https://ultima.primereact.org/'}
+                docHref={'https://ultima.primereact.org/documentation'}
+                storeHref={'https://primeui.store/templates/react/ultima'}
+            />
+            <UltimaSeperator />
+            <TemplateLicense license={license} />
+            <UltimaSeperator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/ultima/ultima-youtube-screen.png'} />
+                <UltimaSeperator />
+            </div>
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} />
+            <UltimaSeperator />
+            <TemplateConfiguration title="React App with No Configuration" description="Ultima is powered by Next.js to get started in no time following the best practices. Template is implemented purely in React with Typescript." />
+            <UltimaSeperator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <UltimaSeperator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default UltimaPage;
diff --git a/pages/templates/verona/VeronaLogo.js b/pages/templates/verona/VeronaLogo.js
new file mode 100644
index 0000000000..b0d49535f7
--- /dev/null
+++ b/pages/templates/verona/VeronaLogo.js
@@ -0,0 +1,33 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default () => (
+    <svg width="142" height="40" viewBox="0 0 142 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clipPath="url(#clip0_2008_66426)">
+            <circle cx="20" cy="20" r="19" stroke="var(--surface-0)" strokeOpacity="0.87" strokeWidth="2" />
+            <path d="M35.8259 10.0575H3.62061V10.3007H35.8259V10.0575Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M38.196 16.2153H1.51099V16.4585H38.196V16.2153Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M38.2203 22.5198H1.46021V22.7647H38.2203V22.5198Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M36.4897 28.7495H3.15845V28.9948H36.4897V28.7495Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M18.258 0.745136L18.0569 0.625L2.89163 28.5555L3.09275 28.6757L18.258 0.745136Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M24.7927 1.33747L24.5918 1.21704L6.70444 34.051L6.90537 34.1715L24.7927 1.33747Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M30.2568 3.89703L30.0564 3.77563L11.481 37.5142L11.6814 37.6356L30.2568 3.89703Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M34.8568 8.36101L34.6572 8.23804L17.2043 39.3938L17.4039 39.5168L34.8568 8.36101Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path d="M37.8638 15.1027L37.6636 14.981L24.3961 38.994L24.5964 39.1157L37.8638 15.1027Z" fill="var(--surface-0)" fillOpacity="0.5" />
+            <path fillRule="evenodd" clipRule="evenodd" d="M34.9999 7.8125L38.1249 14.375L26.6701 35.1446L9.72192 3.87728L15.3124 0.9375L26.7489 22.6438L34.9999 7.8125Z" fill="var(--surface-0)" fillOpacity="0.87" />
+            <path
+                d="M26.6697 35.2349L26.6328 35.1669L9.64893 3.83334L16.5629 3.71368L16.5752 3.73693L26.7493 22.5538L33.6907 10.1564L37.0868 16.3689L37.0745 16.3913L26.6697 35.2349ZM9.79501 3.92071L26.6705 35.0541L36.9879 16.3685L33.6903 10.3359L26.7481 22.7338L26.7116 22.6657L16.5132 3.8045L9.79501 3.92071Z"
+                fill="var(--surface-0)"
+                fillOpacity="0.87"
+            />
+            <path
+                d="M68.7 13.317L62.568 28.5H60.0165L53.8845 13.317H56.1525C56.3975 13.317 56.597 13.3765 56.751 13.4955C56.905 13.6145 57.0205 13.7685 57.0975 13.9575L60.678 23.2185C60.797 23.5195 60.909 23.852 61.014 24.216C61.126 24.573 61.231 24.9475 61.329 25.3395C61.413 24.9475 61.504 24.573 61.602 24.216C61.7 23.852 61.8085 23.5195 61.9275 23.2185L65.487 13.9575C65.543 13.7965 65.6515 13.6495 65.8125 13.5165C65.9805 13.3835 66.1835 13.317 66.4215 13.317H68.7ZM73.1066 15.564V19.7745H78.4196V21.948H73.1066V26.2425H79.8476V28.5H70.2716V13.317H79.8476V15.564H73.1066ZM86.9392 20.541C87.4712 20.541 87.9332 20.4745 88.3252 20.3415C88.7242 20.2085 89.0497 20.0265 89.3017 19.7955C89.5607 19.5575 89.7532 19.2775 89.8792 18.9555C90.0052 18.6335 90.0682 18.28 90.0682 17.895C90.0682 17.125 89.8127 16.5335 89.3017 16.1205C88.7977 15.7075 88.0242 15.501 86.9812 15.501H85.1752V20.541H86.9392ZM94.2052 28.5H91.6537C91.1707 28.5 90.8207 28.311 90.6037 27.933L87.4117 23.0715C87.2927 22.8895 87.1597 22.76 87.0127 22.683C86.8727 22.606 86.6627 22.5675 86.3827 22.5675H85.1752V28.5H82.3507V13.317H86.9812C88.0102 13.317 88.8922 13.4255 89.6272 13.6425C90.3692 13.8525 90.9747 14.15 91.4437 14.535C91.9197 14.92 92.2697 15.382 92.4937 15.921C92.7177 16.453 92.8297 17.041 92.8297 17.685C92.8297 18.196 92.7527 18.679 92.5987 19.134C92.4517 19.589 92.2347 20.002 91.9477 20.373C91.6677 20.744 91.3177 21.0695 90.8977 21.3495C90.4847 21.6295 90.0122 21.85 89.4802 22.011C89.6622 22.116 89.8302 22.242 89.9842 22.389C90.1382 22.529 90.2782 22.697 90.4042 22.893L94.2052 28.5ZM110.119 20.9085C110.119 22.0215 109.934 23.054 109.563 24.006C109.199 24.951 108.681 25.77 108.009 26.463C107.337 27.156 106.528 27.6985 105.583 28.0905C104.638 28.4755 103.588 28.668 102.433 28.668C101.285 28.668 100.239 28.4755 99.2937 28.0905C98.3487 27.6985 97.5367 27.156 96.8577 26.463C96.1857 25.77 95.6642 24.951 95.2932 24.006C94.9222 23.054 94.7367 22.0215 94.7367 20.9085C94.7367 19.7955 94.9222 18.7665 95.2932 17.8215C95.6642 16.8695 96.1857 16.047 96.8577 15.354C97.5367 14.661 98.3487 14.122 99.2937 13.737C100.239 13.345 101.285 13.149 102.433 13.149C103.203 13.149 103.928 13.24 104.607 13.422C105.286 13.597 105.909 13.849 106.476 14.178C107.043 14.5 107.55 14.8955 107.998 15.3645C108.453 15.8265 108.838 16.3445 109.153 16.9185C109.468 17.4925 109.706 18.1155 109.867 18.7875C110.035 19.4595 110.119 20.1665 110.119 20.9085ZM107.232 20.9085C107.232 20.0755 107.12 19.33 106.896 18.672C106.672 18.007 106.353 17.4435 105.94 16.9815C105.527 16.5195 105.023 16.166 104.428 15.921C103.84 15.676 103.175 15.5535 102.433 15.5535C101.691 15.5535 101.023 15.676 100.428 15.921C99.8397 16.166 99.3357 16.5195 98.9157 16.9815C98.5027 17.4435 98.1842 18.007 97.9602 18.672C97.7362 19.33 97.6242 20.0755 97.6242 20.9085C97.6242 21.7415 97.7362 22.4905 97.9602 23.1555C98.1842 23.8135 98.5027 24.3735 98.9157 24.8355C99.3357 25.2905 99.8397 25.6405 100.428 25.8855C101.023 26.1305 101.691 26.253 102.433 26.253C103.175 26.253 103.84 26.1305 104.428 25.8855C105.023 25.6405 105.527 25.2905 105.94 24.8355C106.353 24.3735 106.672 23.8135 106.896 23.1555C107.12 22.4905 107.232 21.7415 107.232 20.9085ZM125.399 13.317V28.5H123.95C123.726 28.5 123.537 28.465 123.383 28.395C123.236 28.318 123.093 28.192 122.953 28.017L115.025 17.895C115.067 18.357 115.088 18.784 115.088 19.176V28.5H112.6V13.317H114.08C114.199 13.317 114.301 13.324 114.385 13.338C114.476 13.345 114.553 13.366 114.616 13.401C114.686 13.429 114.752 13.4745 114.815 13.5375C114.878 13.5935 114.948 13.6705 115.025 13.7685L122.984 23.9325C122.963 23.6875 122.946 23.446 122.932 23.208C122.918 22.97 122.911 22.7495 122.911 22.5465V13.317H125.399ZM136.802 22.767L134.954 17.7165C134.863 17.4925 134.769 17.2265 134.671 16.9185C134.573 16.6105 134.475 16.278 134.377 15.921C134.286 16.278 134.191 16.614 134.093 16.929C133.995 17.237 133.901 17.5065 133.81 17.7375L131.972 22.767H136.802ZM141.79 28.5H139.606C139.361 28.5 139.161 28.4405 139.007 28.3215C138.853 28.1955 138.738 28.0415 138.661 27.8595L137.527 24.762H131.237L130.103 27.8595C130.047 28.0205 129.939 28.1675 129.778 28.3005C129.617 28.4335 129.417 28.5 129.179 28.5H126.974L132.949 13.317H135.826L141.79 28.5Z"
+                fill="var(--surface-0)"
+                fillOpacity="0.87"
+            />
+        </g>
+        <defs>
+            <clipPath id="clip0_2008_66426">
+                <rect width="142" height="40" fill="var(--surface-0)" />
+            </clipPath>
+        </defs>
+    </svg>
+);
diff --git a/pages/templates/verona/index.js b/pages/templates/verona/index.js
new file mode 100644
index 0000000000..7db11cf9b0
--- /dev/null
+++ b/pages/templates/verona/index.js
@@ -0,0 +1,221 @@
+import TemplateConfiguration from '@/components/templates/TemplateConfiguration';
+import TemplateFeatures from '@/components/templates/TemplateFeatures';
+import TemplateLicense from '@/components/templates/TemplateLicense';
+import TemplateSeparator from '@/components/templates/TemplateSeparator';
+import TemplateYoutube from '@/components/templates/TemplateYoutube';
+import TemplateFeaturesAnimation from '@/components/templates/templateFeaturesAnimation';
+import TemplateHero from '@/components/templates/templateHero/TemplateHero';
+import Link from 'next/link';
+import VeronaLogo from './VeronaLogo';
+
+const features2Data = [
+    {
+        title: 'Fully Responsive',
+        description: 'Verona is crafted to provide optimal viewing and interaction experience for a wide range of devices.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/verona-features2-responsive.png'
+    },
+    {
+        title: 'Cross Browser Compatible',
+        description: 'First class support for Firefox, Safari, Chrome and Edge.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-compatible-dark.png'
+    },
+    {
+        title: 'Support',
+        description:
+            'PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or consulting. Users can seek assistance in our community via our public Discord and Forum.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-lifetime.png'
+    },
+    {
+        title: 'Customizable Design',
+        description: 'Fully customizable with a mixture of Sass and CSS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable.png',
+        darkSrc: 'https://primefaces.org/cdn/primereact/images/templates/apollo/apollo-features2-customizable-dark.png'
+    },
+    {
+        title: 'Ready to Use Pages',
+        description: 'Landing, login, invoice, help, user management and error pages are provided as template pages to get started with building your app.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/verona-features2-ready.png'
+    },
+    {
+        title: 'Mobile Experience',
+        description: 'Touch optimized enhanced mobile experience with responsive design.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/verona-features2-mobile.png'
+    }
+];
+
+const animationFeaturesData1 = [
+    {
+        id: 1,
+        title: 'PrimeFlex CSS Utilities',
+        description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-utilities.png'
+    },
+    {
+        id: 2,
+        title: 'PrimeBlocks',
+        description: <>Designed to be fully compatible with upcoming next-gen PrimeBlocks, choose from the extensive range of blocks and customize the way you like.</>,
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-blocks.png'
+    },
+    {
+        id: 3,
+        title: 'PrimeIcons',
+        description: 'Verona ships with PrimeIcons, PrimeTek’s modern icon library including a wide range of icons for your applications.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/apollo/features-animation-icons.png'
+    },
+    {
+        id: 4,
+        title: 'Figma File',
+        description: (
+            <>
+                Verona uses Figma as the design tool. It will be possible to download the Figma file after your purchase. You can{' '}
+                <a href="https://www.figma.com/file/PgQXX4HXMPeCkT74tGajod/Preview-%7C-Verona-2022?node-id=1303%3A750">preview the Figma file</a> before the purchase. Note that PrimeReact UI components are excluded from the Verona Figma file as they
+                are available in <Link href="http://github.com/uikit">PrimeOne for Figma</Link> only.
+            </>
+        ),
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/features-animation-figma.png'
+    }
+];
+
+const animationFeaturesData2 = [
+    {
+        id: 1,
+        title: 'Light and Dark Modes',
+        description: 'The stunning dark and light modes will impress your users.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/features-animation-darkmode.png'
+    },
+    {
+        id: 2,
+        title: 'Component Themes',
+        description: 'Verona offers 10 built-in component themes with dark and light options. You are also free to create you own theme by defining couple SASS variables.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/features-animation-component-themes.png'
+    },
+    {
+        id: 3,
+        title: '4 Menu Orientations',
+        description: 'Choose from Static, Overlay, Slim and Slim+ menu orientations.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/features-animation-orientations.png',
+        type: 'inline-animation',
+        inlineFeaturesData: [
+            {
+                id: 1,
+                title: 'Static',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/verona/Static.png'
+            },
+            {
+                id: 2,
+                title: 'Slim',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/verona/Slim.png'
+            },
+            {
+                id: 3,
+                title: 'Slim+',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/verona/Slim+.png'
+            },
+            {
+                id: 4,
+                title: 'Overlay',
+                src: 'https://primefaces.org/cdn/primereact/images/templates/verona/Overlay.png'
+            }
+        ]
+    },
+    {
+        id: 4,
+        title: 'Menu Themes',
+        description: 'Verona offers 10 special layout themes featuring gorgeous gradients.',
+        src: 'https://primefaces.org/cdn/primereact/images/templates/verona/features-animation-orientations.png'
+    }
+];
+
+const VeronaSeperator = () => {
+    return (
+        <TemplateSeparator
+            separatorLogo={
+                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="49" viewBox="0 0 48 49" fill="none">
+                    <g clipPath="url(#clip0_987_15401)">
+                        <path d="M33.5642 18.0857H14.8584V18.2232H33.5642V18.0857Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                        <path d="M35.077 21.7993H12.9326V21.9369H35.077V21.7993Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                        <path d="M34.9394 25.5129H13.3452V25.6505H34.9394V25.5129Z" fill="var(--surface-900)" />
+                        <path d="M33.9768 29.2266H14.4458V29.3641H33.9768V29.2266Z" fill="var(--surface-900)" />
+                        <path d="M22.9547 12.4471L22.834 12.375L14.0757 28.5054L14.1964 28.5775L22.9547 12.4471Z" fill="var(--surface-900)" fillOpacity="0.5" />
+                        <path d="M26.8757 12.8025L26.7551 12.7302L16.4265 31.7024L16.5214 31.7932L26.8757 12.8025Z" fill="var(--surface-900)" />
+                        <path d="M30.1539 14.3382L30.0337 14.2654L19.3041 33.7536L19.4244 33.8264L30.1539 14.3382Z" fill="var(--surface-900)" />
+                        <path d="M32.6656 17.4603L32.5459 17.3865L22.8027 34.7793L22.9225 34.8531L32.6656 17.4603Z" fill="var(--surface-900)" />
+                        <path d="M34.541 21.3825L34.4209 21.3094L27.2179 34.3463L27.338 34.4193L34.541 21.3825Z" fill="var(--surface-900)" />
+                        <path d="M28.4863 25.8294L32.9655 17.778L34.3133 20.6083L28.0059 32.0445L18.5141 14.5333L20.9781 13.2376L27.6071 25.8194L28.0375 26.6363L28.4863 25.8294Z" fill="var(--surface-900)" stroke="var(--surface-900)" />
+                        <path
+                            d="M28.0018 33.1409L27.9796 33.1001L17.7893 14.2999L21.9377 14.2281L21.9451 14.2421L28.0495 25.5322L32.2144 18.0938L34.252 21.8213L34.2446 21.8347L28.0018 33.1409ZM17.877 14.3524L28.0023 33.0324L34.1927 21.821L32.2141 18.2015L28.0488 25.6402L28.0269 25.5994L21.9079 14.2826L17.877 14.3524Z"
+                            fill="var(--surface-900)"
+                        />
+                        <g filter="url(#filter1_dd_987_15401)">
+                            <mask id="path-15-inside-1_987_15401" fill="white">
+                                <path d="M36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12C30.6274 12 36 17.3726 36 24ZM13.2 24C13.2 29.9647 18.0353 34.8 24 34.8C29.9647 34.8 34.8 29.9647 34.8 24C34.8 18.0353 29.9647 13.2 24 13.2C18.0353 13.2 13.2 18.0353 13.2 24Z" />
+                            </mask>
+                            <path
+                                d="M36 24C36 30.6274 30.6274 36 24 36C17.3726 36 12 30.6274 12 24C12 17.3726 17.3726 12 24 12C30.6274 12 36 17.3726 36 24ZM13.2 24C13.2 29.9647 18.0353 34.8 24 34.8C29.9647 34.8 34.8 29.9647 34.8 24C34.8 18.0353 29.9647 13.2 24 13.2C18.0353 13.2 13.2 18.0353 13.2 24Z"
+                                stroke="var(--surface-900)"
+                                strokeWidth="2"
+                                mask="url(#path-15-inside-1_987_15401)"
+                            />
+                        </g>
+                    </g>
+                </svg>
+            }
+        />
+    );
+};
+
+const license = {
+    documentLink: 'https://verona.primereact.org/documentation',
+    description: 'The download package is a NextJS-based project containing all application source codes deployed at the live demo. The project code is written in TypeScript.',
+    showDiscount: false,
+    licenseDetails: [
+        {
+            title: 'Basic License',
+            price: '$49',
+            discountPrice: '$29',
+            included: ['Non Commercial Usage', 'Single End Product, No Multi-Use', '1 Year Free Updates | $19 for +1 year']
+        },
+        {
+            title: 'Extended License',
+            price: '$490',
+            discountPrice: '$290',
+            included: ['Commercial Usage', 'Multiple End Products', '1 Year Free Updates | $190 for +1 year']
+        }
+    ]
+};
+
+const VeronaPage = () => {
+    const featuresAnimationTitle = <h2>Features</h2>;
+
+    return (
+        <div className="verona template">
+            <TemplateHero
+                pattern={'https://primefaces.org/cdn/primereact/images/templates/verona/verona-hero-pattern.png'}
+                description={'Prepare to be amazed by the remastered Verona for PrimeReact featuring a new gorgeous dark mode for the entire layout, 4 menu modes, reusable css widgets, utilities, modern icons and many more.'}
+                logo={<VeronaLogo />}
+                dashboard1={'https://primefaces.org/cdn/primereact/images/templates/verona/verona-hero-dashboard1.png'}
+                dashboard2={'https://primefaces.org/cdn/primereact/images/templates/verona/verona-hero-dashboard2.png'}
+                liveHref={'https://verona.primereact.org/'}
+                docHref={'https://verona.primereact.org/documentation'}
+                storeHref={'https://primeui.store/templates/react/verona'}
+            />
+            <VeronaSeperator />
+            <TemplateLicense license={license} />
+            <VeronaSeperator />
+            <div hidden={1}>
+                <TemplateYoutube imgSrc={'https://primefaces.org/cdn/primereact/images/templates/verona/verona-youtube-screen.png'} />
+                <VeronaSeperator />
+            </div>
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData2} title={featuresAnimationTitle} animationSeconds={4000} />
+            <VeronaSeperator />
+            <TemplateConfiguration title="React based on Next.JS" description="Verona is powered by Next.js to get started in no time following the best practices. Both Javascript and Typescript are available as alternative implementations." />
+            <VeronaSeperator />
+            <TemplateFeaturesAnimation featuresData={animationFeaturesData1} />
+            <VeronaSeperator />
+            <TemplateFeatures featuresData={features2Data} displayType="vertical" />
+        </div>
+    );
+};
+
+export default VeronaPage;
diff --git a/pages/terminal/index.js b/pages/terminal/index.js
new file mode 100644
index 0000000000..29eb0e685c
--- /dev/null
+++ b/pages/terminal/index.js
@@ -0,0 +1,66 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/terminal/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/terminal/basicdoc';
+import { ImportDoc } from '@/components/doc/terminal/importdoc';
+import { Wireframe } from '@/components/doc/terminal/pt/wireframe';
+import { StyledDoc } from '@/components/doc/terminal/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/terminal/theming/tailwinddoc';
+
+const TerminalDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.terminal.options',
+            label: 'Terminal PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Terminal Component" header="Terminal" description="Terminal is a text based user interface." componentDocs={docs} apiDocs={['Terminal', 'TerminalService']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default TerminalDemo;
diff --git a/pages/theming/index.js b/pages/theming/index.js
new file mode 100644
index 0000000000..062e812da4
--- /dev/null
+++ b/pages/theming/index.js
@@ -0,0 +1,108 @@
+import { DocSectionNav } from '@/components/doc/common/docsectionnav';
+import { DocSections } from '@/components/doc/common/docsections';
+import { ArchitectureDoc } from '@/components/doc/theming/architecturedoc';
+import { BuiltInThemesDoc } from '@/components/doc/theming/builtinthemesdoc';
+import { CSSVariablesDoc } from '@/components/doc/theming/cssvariablesdoc';
+import { CustomThemeDoc } from '@/components/doc/theming/customthemedoc';
+import { PrimeFlexDoc } from '@/components/doc/theming/primeflexdoc';
+import { ScaleDoc } from '@/components/doc/theming/scaledoc';
+import { CssInJsDoc } from '@/components/doc/theming/scopedstyling/cssinjsdoc';
+import { CSSModulesDoc } from '@/components/doc/theming/scopedstyling/cssmodulesdoc';
+import { NamedClassDoc } from '@/components/doc/theming/scopedstyling/namedclassdoc';
+import { SwitchThemesDoc } from '@/components/doc/theming/switchthemesdoc';
+import { UtilsDoc } from '@/components/doc/theming/utilsdoc';
+import Head from 'next/head';
+
+const ThemingDoc = () => {
+    const docs = [
+        {
+            id: 'architecture',
+            label: 'Architecture',
+            component: ArchitectureDoc
+        },
+        {
+            id: 'builtinthemes',
+            label: 'Built-in Themes',
+            component: BuiltInThemesDoc
+        },
+        {
+            id: 'switchthemes',
+            label: 'Switch Themes',
+            component: SwitchThemesDoc
+        },
+        {
+            id: 'customtheme',
+            label: 'Custom Theme',
+            component: CustomThemeDoc
+        },
+        {
+            id: 'scopedstyling',
+            label: 'Scoped Styling',
+            description: `Designer themes apply a global skin to the library, in case you need to change the style of a particular component, 
+                you may use a named class, CSS Modules or a CSS-in-JS solution like styled-jsx. A video tutorial that goes through the alternatives below is available.`,
+            content: (
+                <div className="video-container">
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/3pO79DdPpiU" frameBorder="0" allowFullScreen="true" title="Scoped CSS with PrimeReact" />
+                </div>
+            ),
+            children: [
+                {
+                    id: 'namedclass',
+                    label: 'Named Class',
+                    component: NamedClassDoc
+                },
+                {
+                    id: 'cssmodules',
+                    label: 'CSS Modules',
+                    component: CSSModulesDoc
+                },
+                {
+                    id: 'cssinjs',
+                    label: 'CSS in JS',
+                    component: CssInJsDoc
+                }
+            ]
+        },
+        {
+            id: 'scale',
+            label: 'Scale',
+            component: ScaleDoc
+        },
+        {
+            id: 'primeflex',
+            label: 'PrimeFlex',
+            component: PrimeFlexDoc
+        },
+        {
+            id: 'utils',
+            label: 'Utils',
+            component: UtilsDoc
+        },
+        {
+            id: 'cssvariables',
+            label: 'CSS Variables',
+            component: CSSVariablesDoc
+        }
+    ];
+
+    return (
+        <div>
+            <Head>
+                <title>Theming - PrimeReact</title>
+                <meta name="description" content="Choose from a variety of themes or develop your own theme easily." />
+            </Head>
+            <div className="doc">
+                <div className="doc-main">
+                    <div className="doc-intro">
+                        <h1>Theming</h1>
+                        <p>Choose from a variety of themes or develop your own theme easily.</p>
+                    </div>
+                    <DocSections docs={docs} />
+                </div>
+                <DocSectionNav docs={docs} />
+            </div>
+        </div>
+    );
+};
+
+export default ThemingDoc;
diff --git a/pages/tieredmenu/index.js b/pages/tieredmenu/index.js
new file mode 100644
index 0000000000..5246716b9a
--- /dev/null
+++ b/pages/tieredmenu/index.js
@@ -0,0 +1,88 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/tieredmenu/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/tieredmenu/basicdoc';
+import { CommandDoc } from '@/components/doc/tieredmenu/commanddoc';
+import { ImportDoc } from '@/components/doc/tieredmenu/importdoc';
+import { PopupDoc } from '@/components/doc/tieredmenu/popupdoc';
+import { Wireframe } from '@/components/doc/tieredmenu/pt/wireframe';
+import { RouterDoc } from '@/components/doc/tieredmenu/routerdoc';
+import { TemplateDoc } from '@/components/doc/tieredmenu/templatedoc';
+import { StyledDoc } from '@/components/doc/tieredmenu/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/tieredmenu/theming/tailwinddoc';
+
+const TieredMenuDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'popup',
+            label: 'Popup',
+            component: PopupDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'command',
+            label: 'Command',
+            component: CommandDoc
+        },
+        {
+            id: 'router',
+            label: 'Router',
+            component: RouterDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tieredmenu.options',
+            label: 'TieredMenu PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React TieredMenu Component" header="TieredMenu" description="TieredMenu displays submenus in nested overlays." componentDocs={docs} apiDocs={['TieredMenu', 'MenuItem']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default TieredMenuDemo;
diff --git a/pages/timeline/index.js b/pages/timeline/index.js
new file mode 100644
index 0000000000..99a21c6ab8
--- /dev/null
+++ b/pages/timeline/index.js
@@ -0,0 +1,89 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/timeline/accessibilitydoc';
+import { AlignmentDoc } from '@/components/doc/timeline/alignmentdoc';
+import { BasicDoc } from '@/components/doc/timeline/basicdoc';
+import { HorizontalDoc } from '@/components/doc/timeline/horizontaldoc';
+import { ImportDoc } from '@/components/doc/timeline/importdoc';
+import { OppositeDoc } from '@/components/doc/timeline/oppositedoc';
+import { Wireframe } from '@/components/doc/timeline/pt/wireframe';
+import { TemplateDoc } from '@/components/doc/timeline/templatedoc';
+import { StyledDoc } from '@/components/doc/timeline/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/timeline/theming/tailwinddoc';
+
+const TimelineDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'alignment',
+            label: 'Alignment',
+            component: AlignmentDoc
+        },
+        {
+            id: 'opposite',
+            label: 'Opposite',
+            component: OppositeDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'horizontal',
+            label: 'Horizontal',
+            component: HorizontalDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.timeline.options',
+            label: 'Timeline PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Timeline Component" header="Timeline" description="Timeline visualizes a series of chained events." componentDocs={docs} apiDocs={['Timeline']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default TimelineDemo;
diff --git a/pages/toast/index.js b/pages/toast/index.js
new file mode 100644
index 0000000000..27f26a509b
--- /dev/null
+++ b/pages/toast/index.js
@@ -0,0 +1,100 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/toast/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/toast/basicdoc';
+import { HeadlessDoc } from '@/components/doc/toast/headlessdoc';
+import { ImportDoc } from '@/components/doc/toast/importdoc';
+import { MultipleDoc } from '@/components/doc/toast/multipledoc';
+import { PositionDoc } from '@/components/doc/toast/positiondoc';
+import { Wireframe } from '@/components/doc/toast/pt/wireframe';
+import { SeverityDoc } from '@/components/doc/toast/severitydoc';
+import { StickyDoc } from '@/components/doc/toast/stickydoc';
+import { TemplateDoc } from '@/components/doc/toast/templatedoc';
+import { StyledDoc } from '@/components/doc/toast/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/toast/theming/tailwinddoc';
+
+const ToastDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'severity',
+            label: 'Severity',
+            component: SeverityDoc
+        },
+        {
+            id: 'position',
+            label: 'Position',
+            component: PositionDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'stickydoc',
+            label: 'Sticky',
+            component: StickyDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'headless',
+            label: 'Headless',
+            component: HeadlessDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.toast.options',
+            label: 'Toast PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Toast Component" header="Toast" description="Toast is used to display messages in an overlay." componentDocs={docs} apiDocs={['Toast']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ToastDemo;
diff --git a/pages/togglebutton/index.js b/pages/togglebutton/index.js
new file mode 100644
index 0000000000..92b0e17cef
--- /dev/null
+++ b/pages/togglebutton/index.js
@@ -0,0 +1,84 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/togglebutton/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/togglebutton/basicdoc';
+import { CustomizedDoc } from '@/components/doc/togglebutton/customizeddoc';
+import { DisabledDoc } from '@/components/doc/togglebutton/disableddoc';
+import { ImportDoc } from '@/components/doc/togglebutton/importdoc';
+import { InvalidDoc } from '@/components/doc/togglebutton/invaliddoc';
+import { Wireframe } from '@/components/doc/togglebutton/pt/wireframe';
+import { StyledDoc } from '@/components/doc/togglebutton/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/togglebutton/theming/tailwinddoc';
+
+const ToggleButtonDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'customized',
+            label: 'Customized',
+            component: CustomizedDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.togglebutton.options',
+            label: 'ToggleButton PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent title="React ToggleButton Component" header="ToggleButton" description="ToggleButton is used to select a boolean value using a button." componentDocs={docs} apiDocs={['ToggleButton']} ptDocs={ptDocs} themingDocs={themingDocs} />
+    );
+};
+
+export default ToggleButtonDemo;
diff --git a/pages/toolbar/index.js b/pages/toolbar/index.js
new file mode 100644
index 0000000000..684583a379
--- /dev/null
+++ b/pages/toolbar/index.js
@@ -0,0 +1,71 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/toolbar/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/toolbar/basicdoc';
+import { CustomDoc } from '@/components/doc/toolbar/customdoc';
+import { ImportDoc } from '@/components/doc/toolbar/importdoc';
+import { Wireframe } from '@/components/doc/toolbar/pt/wireframe';
+import { StyledDoc } from '@/components/doc/toolbar/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/toolbar/theming/tailwinddoc';
+
+const ToolbarDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'custom',
+            label: 'Custom',
+            component: CustomDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.toolbar.options',
+            label: 'Toolbar PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Toolbar Component" header="Toolbar" description="Toolbar is a grouping component for buttons and other content." componentDocs={docs} apiDocs={['Toolbar']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default ToolbarDemo;
diff --git a/pages/tooltip/index.js b/pages/tooltip/index.js
new file mode 100644
index 0000000000..d7d1b806f7
--- /dev/null
+++ b/pages/tooltip/index.js
@@ -0,0 +1,123 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/tooltip/accessibilitydoc';
+import { AutoHideDoc } from '@/components/doc/tooltip/autohidedoc';
+import { DelayDoc } from '@/components/doc/tooltip/delaydoc';
+import { DisabledDoc } from '@/components/doc/tooltip/disableddoc';
+import { EventDoc } from '@/components/doc/tooltip/eventdoc';
+import { ImportDoc } from '@/components/doc/tooltip/importdoc';
+import { MouseTrackDoc } from '@/components/doc/tooltip/mousetrackdoc';
+import { PositionDoc } from '@/components/doc/tooltip/positiondoc';
+import { Wireframe } from '@/components/doc/tooltip/pt/wireframe';
+import { ReactiveDoc } from '@/components/doc/tooltip/reactivedoc';
+import { TargetDoc } from '@/components/doc/tooltip/targetdoc';
+import { TemplateDoc } from '@/components/doc/tooltip/templatedoc';
+import { StyledDoc } from '@/components/doc/tooltip/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/tooltip/theming/tailwinddoc';
+
+const TooltipDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'position',
+            label: 'Position',
+            component: PositionDoc
+        },
+        {
+            id: 'event',
+            label: 'Event',
+            component: EventDoc
+        },
+        {
+            id: 'autohide',
+            label: 'Auto Hide',
+            component: AutoHideDoc
+        },
+        {
+            id: 'delay',
+            label: 'Delay',
+            component: DelayDoc
+        },
+        {
+            id: 'target',
+            label: 'Target',
+            component: TargetDoc
+        },
+        {
+            id: 'mousetrack',
+            label: 'Mouse Track',
+            component: MouseTrackDoc
+        },
+        {
+            id: 'reactive',
+            label: 'Reactive',
+            component: ReactiveDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tooltip.options',
+            label: 'Tooltip PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Tooltip Component"
+            header="Tooltip"
+            description="Tooltip functionality is integrated within various PrimeReact components."
+            componentDocs={docs}
+            apiDocs={['Tooltip', 'TooltipOptions']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default TooltipDemo;
diff --git a/pages/tree/index.js b/pages/tree/index.js
new file mode 100644
index 0000000000..330b9105d2
--- /dev/null
+++ b/pages/tree/index.js
@@ -0,0 +1,132 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/tree/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/tree/basicdoc';
+import { ContextMenuDoc } from '@/components/doc/tree/contextmenudoc';
+import { ControlledDoc } from '@/components/doc/tree/controlleddoc';
+import { DragDropDoc } from '@/components/doc/tree/dragdropdoc';
+import { EventsDoc } from '@/components/doc/tree/eventsdoc';
+import { FilterDoc } from '@/components/doc/tree/filterdoc';
+import { ImportDoc } from '@/components/doc/tree/importdoc';
+import { LazyDoc } from '@/components/doc/tree/lazydoc';
+import { Wireframe } from '@/components/doc/tree/pt/wireframe';
+import { CheckboxSelectionDoc } from '@/components/doc/tree/selection/checkboxselectiondoc';
+import { MultipleSelectionDoc } from '@/components/doc/tree/selection/multipleselectiondoc';
+import { SingleSelectionDoc } from '@/components/doc/tree/selection/singleselectiondoc';
+import { TemplateDoc } from '@/components/doc/tree/templatedoc';
+import { StyledDoc } from '@/components/doc/tree/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/tree/theming/tailwinddoc';
+
+const TreeDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'selection',
+            label: 'Selection',
+            children: [
+                {
+                    id: 'singleselection',
+                    label: 'Single',
+                    component: SingleSelectionDoc
+                },
+                {
+                    id: 'multipleselection',
+                    label: 'Multiple',
+                    component: MultipleSelectionDoc
+                },
+
+                {
+                    id: 'checkboxselection',
+                    label: 'Checkbox',
+                    component: CheckboxSelectionDoc
+                }
+            ]
+        },
+        {
+            id: 'events',
+            label: 'Events',
+            component: EventsDoc
+        },
+        {
+            id: 'lazy',
+            label: 'Lazy',
+            component: LazyDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'dragdrop',
+            label: 'DragDrop',
+            component: DragDropDoc
+        },
+        {
+            id: 'contextmenu',
+            label: 'ContextMenu',
+            component: ContextMenuDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tree.options',
+            label: 'Tree PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return <DocComponent title="React Tree Component" header="Tree" description="Tree is used to display hierarchical data." componentDocs={docs} apiDocs={['Tree', 'TreeNode']} ptDocs={ptDocs} themingDocs={themingDocs} />;
+};
+
+export default TreeDemo;
diff --git a/pages/treeselect/index.js b/pages/treeselect/index.js
new file mode 100644
index 0000000000..bff38fd61f
--- /dev/null
+++ b/pages/treeselect/index.js
@@ -0,0 +1,128 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/treeselect/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/treeselect/basicdoc';
+import { CheckboxDoc } from '@/components/doc/treeselect/checkboxdoc';
+import { ClearIconDoc } from '@/components/doc/treeselect/clearicondoc';
+import { ControlledDoc } from '@/components/doc/treeselect/controlleddoc';
+import { DisabledDoc } from '@/components/doc/treeselect/disableddoc';
+import { FilledDoc } from '@/components/doc/treeselect/filleddoc';
+import { FilterDoc } from '@/components/doc/treeselect/filterdoc';
+import { FloatLabelDoc } from '@/components/doc/treeselect/floatlabeldoc';
+import { ImportDoc } from '@/components/doc/treeselect/importdoc';
+import { InvalidDoc } from '@/components/doc/treeselect/invaliddoc';
+import { MultipleDoc } from '@/components/doc/treeselect/multipledoc';
+import { Wireframe } from '@/components/doc/treeselect/pt/wireframe';
+import { StyledDoc } from '@/components/doc/treeselect/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/treeselect/theming/tailwinddoc';
+
+const TreeSelectDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'multiple',
+            label: 'Multiple',
+            component: MultipleDoc
+        },
+        {
+            id: 'check',
+            label: 'Checkbox',
+            component: CheckboxDoc
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+        {
+            id: 'clearicon',
+            label: 'Clear Icon',
+            component: ClearIconDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'floatlabel',
+            label: 'Float Label',
+            component: FloatLabelDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.treeselect.options',
+            label: 'TreeSelect PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React TreeSelect Component"
+            header="TreeSelect"
+            description="TreeSelect is a form component to choose from hierarchical data."
+            componentDocs={docs}
+            apiDocs={['TreeSelect', 'TreeNode']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default TreeSelectDemo;
diff --git a/pages/treetable/index.js b/pages/treetable/index.js
new file mode 100644
index 0000000000..a937d23992
--- /dev/null
+++ b/pages/treetable/index.js
@@ -0,0 +1,259 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/treetable/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/treetable/basicdoc';
+import { ColumnGroupDoc } from '@/components/doc/treetable/columngroupdoc';
+import { ColumnToggleDoc } from '@/components/doc/treetable/columntoggledoc';
+import { ConditionalStyleDoc } from '@/components/doc/treetable/conditionalstyledoc';
+import { ContextMenuDoc } from '@/components/doc/treetable/contextmenudoc';
+import { ControlledDoc } from '@/components/doc/treetable/controlleddoc';
+import { DynamicColumnsDoc } from '@/components/doc/treetable/dynamiccolumnsdoc';
+import { EditDoc } from '@/components/doc/treetable/editdoc';
+import { FilterDoc } from '@/components/doc/treetable/filterdoc';
+import { ImportDoc } from '@/components/doc/treetable/importdoc';
+import { LazyLoadDoc } from '@/components/doc/treetable/lazyloaddoc';
+import { PaginatorBasicDoc } from '@/components/doc/treetable/paginator/basicdoc';
+import { PaginatorTemplateDoc } from '@/components/doc/treetable/paginator/templatedoc';
+import { Wireframe } from '@/components/doc/treetable/pt/wireframe';
+import { ReorderDoc } from '@/components/doc/treetable/reorderdoc';
+import { ExpandModeDoc } from '@/components/doc/treetable/resize/expandmodedoc';
+import { FitModeDoc } from '@/components/doc/treetable/resize/fitmodedoc';
+import { FrozenColumnsDoc } from '@/components/doc/treetable/scroll/frozencolumnsdoc';
+import { HorizontalScrollDoc } from '@/components/doc/treetable/scroll/horizontaldoc';
+import { VerticalScrollDoc } from '@/components/doc/treetable/scroll/verticaldoc';
+import { CheckboxRowSelectionDoc } from '@/components/doc/treetable/selection/checkboxdoc';
+import { RowSelectionEventsDoc } from '@/components/doc/treetable/selection/eventsdoc';
+import { MultipleRowsSelectionDoc } from '@/components/doc/treetable/selection/multipledoc';
+import { SingleRowSelectionDoc } from '@/components/doc/treetable/selection/singledoc';
+import { MultipleColumnsDoc } from '@/components/doc/treetable/sort/multiplecolumnsdoc';
+import { SingleColumnDoc } from '@/components/doc/treetable/sort/singlecolumndoc';
+import { TemplateDoc } from '@/components/doc/treetable/templatedoc';
+import { StyledDoc } from '@/components/doc/treetable/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/treetable/theming/tailwinddoc';
+import { StatefulDoc } from '@/components/doc/treetable/statefuldoc';
+
+const TreeTableDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'dynamic_columns',
+            label: 'Dynamic Columns',
+            component: DynamicColumnsDoc
+        },
+        {
+            id: 'controlled',
+            label: 'Controlled',
+            component: ControlledDoc
+        },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
+        {
+            id: 'paginator',
+            label: 'Paginator',
+            children: [
+                {
+                    id: 'paginator_basic',
+                    label: 'Basic',
+                    component: PaginatorBasicDoc
+                },
+                {
+                    id: 'paginator_template',
+                    label: 'Template',
+                    component: PaginatorTemplateDoc
+                }
+            ]
+        },
+        {
+            id: 'sort',
+            label: 'Sort',
+            children: [
+                {
+                    id: 'single_sort',
+                    label: 'Single Column',
+                    component: SingleColumnDoc
+                },
+                {
+                    id: 'multiple_sort',
+                    label: 'Multiple Columns',
+                    component: MultipleColumnsDoc
+                }
+            ]
+        },
+        {
+            id: 'filter',
+            label: 'Filter',
+            component: FilterDoc
+        },
+        {
+            id: 'selection',
+            label: 'Selection',
+            children: [
+                {
+                    id: 'single_row_selection',
+                    label: 'Single',
+                    component: SingleRowSelectionDoc
+                },
+                {
+                    id: 'multiple_rows_selection',
+                    label: 'Multiple',
+                    component: MultipleRowsSelectionDoc
+                },
+                {
+                    id: 'checkbox_row_selection',
+                    label: 'Checkbox',
+                    component: CheckboxRowSelectionDoc
+                },
+                {
+                    id: 'row_selection_events',
+                    label: 'Events',
+                    component: RowSelectionEventsDoc
+                }
+            ]
+        },
+        {
+            id: 'column_group',
+            label: 'Column Group',
+            component: ColumnGroupDoc
+        },
+        {
+            id: 'lazy_load',
+            label: 'Lazy Load',
+            component: LazyLoadDoc
+        },
+        {
+            id: 'edit',
+            label: 'Edit',
+            component: EditDoc
+        },
+        {
+            id: 'scroll',
+            label: 'Scroll',
+            children: [
+                {
+                    id: 'vertical_scroll',
+                    label: 'Vertical',
+                    component: VerticalScrollDoc
+                },
+                {
+                    id: 'horizontal_scroll',
+                    label: 'Horizontal',
+                    component: HorizontalScrollDoc
+                },
+                {
+                    id: 'frozen_columns',
+                    label: 'Frozen Columns',
+                    component: FrozenColumnsDoc
+                }
+            ]
+        },
+        {
+            id: 'column_resize',
+            label: 'Column Resize',
+            children: [
+                {
+                    id: 'resize_fitmode',
+                    label: 'Fit Mode',
+                    component: FitModeDoc
+                },
+                {
+                    id: 'resize_expandmode',
+                    label: 'Expand Mode',
+                    component: ExpandModeDoc
+                }
+            ]
+        },
+        {
+            id: 'reorder',
+            label: 'Reorder',
+            component: ReorderDoc
+        },
+        {
+            id: 'column_toggle',
+            label: 'Column Toggle',
+            component: ColumnToggleDoc
+        },
+        {
+            id: 'conditional_style',
+            label: 'Conditional Style',
+            component: ConditionalStyleDoc
+        },
+        {
+            id: 'contextmenu',
+            label: 'Context Menu',
+            component: ContextMenuDoc
+        },
+        {
+            id: 'stateful',
+            label: 'Stateful',
+            component: StatefulDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.treetable.options',
+            label: 'TreeTable PT Options',
+            component: DocApiTable
+        },
+        {
+            id: 'pt.column.options',
+            label: 'Column PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React TreeTable Component"
+            header="TreeTable"
+            description="TreeTable is used to display hierarchical data in tabular format."
+            componentDocs={docs}
+            apiDocs={['TreeTable', 'Column', 'TreeNode']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default TreeTableDemo;
diff --git a/pages/tristatecheckbox/index.js b/pages/tristatecheckbox/index.js
new file mode 100644
index 0000000000..cb3de8d065
--- /dev/null
+++ b/pages/tristatecheckbox/index.js
@@ -0,0 +1,92 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/tristatecheckbox/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/tristatecheckbox/basicdoc';
+import { DisabledDoc } from '@/components/doc/tristatecheckbox/disableddoc';
+import { FilledDoc } from '@/components/doc/tristatecheckbox/filleddoc';
+import { ImportDoc } from '@/components/doc/tristatecheckbox/importdoc';
+import { InvalidDoc } from '@/components/doc/tristatecheckbox/invaliddoc';
+import { Wireframe } from '@/components/doc/tristatecheckbox/pt/wireframe';
+import { StyledDoc } from '@/components/doc/tristatecheckbox/theming/styleddoc';
+import { TailwindDoc } from '@/components/doc/tristatecheckbox/theming/tailwinddoc';
+
+const TriStateCheckboxDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
+        {
+            id: 'invalid',
+            label: 'Invalid',
+            component: InvalidDoc
+        },
+        {
+            id: 'disabled',
+            label: 'Disabled',
+            component: DisabledDoc
+        },
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.tristatecheckbox.options',
+            label: 'TriStateCheckbox PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        },
+        {
+            id: 'unstyled',
+            label: 'Unstyled',
+            description: 'Theming is implemented with the pass through properties in unstyled mode.',
+            children: [
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                }
+            ]
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React TriStateCheckbox Component"
+            header="TriStateCheckbox"
+            description="TriStateCheckbox is an extension to the Checkbox component with an additional state."
+            componentDocs={docs}
+            apiDocs={['TriStateCheckbox']}
+            ptDocs={ptDocs}
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default TriStateCheckboxDemo;
diff --git a/pages/uikit/index.js b/pages/uikit/index.js
new file mode 100644
index 0000000000..15975c5424
--- /dev/null
+++ b/pages/uikit/index.js
@@ -0,0 +1,376 @@
+import Head from 'next/head';
+import { Badge } from '@/components/lib/badge/Badge';
+import { Tooltip } from '@/components/lib/tooltip/Tooltip';
+
+const UIKitPage = (props) => {
+    return (
+        <>
+            <div>
+                <Head>
+                    <title>UI Kit - PrimeReact</title>
+                    <meta name="description" content="Design files for PrimeReact Components." />
+                </Head>
+                <div>
+                    <div style={{ borderRadius: '50px', maxHeight: '500px' }} className="overflow-hidden mb-5 flex align-items-center">
+                        <img alt="PrimeReact Designer" src={`https://primefaces.org/cdn/primereact/images/uikit/primeone-cover-${props.dark ? 'dark' : 'light'}.jpeg`} className="w-full" />
+                    </div>
+
+                    <div className="card mb-5" style={{ borderRadius: '50px' }}>
+                        <div className="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
+                            <div className="w-full md:w-6">
+                                <img alt="PrimeReact Designer" src="https://primefaces.org/cdn/primereact/images/uikit/uikit-figma.png" className="w-full" />
+                            </div>
+                            <div className="w-full md:w-6">
+                                <div className="text-primary font-bold mb-2">UP-TO-DATE</div>
+                                <div className="text-900 text-5xl font-bold mb-3">Best Features of Figma</div>
+                                <p className="mb-3 text-lg">PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles, variables and interactive components. It'll always follow the best practices.</p>
+
+                                <ul className="flex flex-wrap m-0 p-0 text-lg">
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Auto Layout</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Variants</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Variables and Styles</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Interactive Components</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Boolean, Instance Swap and Text Properties</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Nested Instances</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div className="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
+                            <div className="w-full md:w-6">
+                                <div className="text-primary font-bold mb-2">ENTERPRISE GRADE</div>
+                                <div className="text-900 text-5xl font-bold mb-3">Powerful System</div>
+                                <p className="mb-3 text-lg">Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.</p>
+
+                                <ul className="flex flex-wrap m-0 p-0 text-lg">
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Numerous Components</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Icon Library</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Easy Customization</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Atomic Approach</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="w-full md:w-6">
+                                <img alt="PrimeReact Designer" src="https://primefaces.org/cdn/primereact/images/uikit/uikit-system.png" className="w-full" />
+                            </div>
+                        </div>
+                        <div className="flex flex-column md:flex-row align-items-center gap-4 md:gap-8 mb-8">
+                            <div className="w-full md:w-6">
+                                <img alt="PrimeReact Designer" src="https://primefaces.org/cdn/primereact/images/uikit/uikit-themes.png" className="w-full" />
+                            </div>
+                            <div className="w-full md:w-6">
+                                <div className="text-primary font-bold mb-2">DARK MODE</div>
+                                <div className="text-900 text-5xl font-bold mb-3">Two Themes</div>
+                                <p className="mb-3 text-lg">PrimeOne is designed based on Aura Light and Aura Dark themes. Easily change the themes of your designs using Figma's Swap Library feature or Tokens Studio Sets.</p>
+
+                                <ul className="flex flex-wrap m-0 p-0 text-lg">
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Aura Light</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Aura Dark</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div className="flex flex-column md:flex-row align-items-center gap-4 md:gap-8">
+                            <div className="w-full md:w-6">
+                                <div className="text-primary font-bold mb-2">TOKENS STUDIO</div>
+                                <div className="text-900 text-5xl font-bold mb-3">Tokens Support</div>
+                                <p className="mb-3 text-lg">
+                                    Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.
+                                </p>
+
+                                <ul className="flex flex-wrap m-0 p-0 text-lg">
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Countless Design Tokens</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Light and Dark Sets</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Well Documented</span>
+                                    </li>
+                                    <li className="flex align-items-center w-6 p-3">
+                                        <i className="pi pi-check-circle text-green-600 mr-2" />
+                                        <span className="font-bold">Primitive, Semantic and Component Tokens</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="w-full md:w-6">
+                                <img alt="Tokens Support" src="https://primefaces.org/cdn/primeng/images/uikit/uikit-tokens.png" className="w-full" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-column md:flex-row gap-6 md:gap-6 mb-5">
+                        <a
+                            href="https://www.figma.com/design/G855HjuSyK8viJr0a5ZjRG/Preview-%7C%C2%A0PrimeOne-%7C-3.0.1?node-id=830-41631&t=m1MbOTTqKsBSRBLS-1"
+                            className="p-5 w-full md:w-6 bg-white flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
+                            style={{ borderRadius: '50px' }}
+                        >
+                            <span className="text-gray-900 text-4xl font-bold mb-5">Preview</span>
+                            <img alt="Figma Light" src="https://primefaces.org/cdn/primereact/images/uikit/logo-figma-light.svg" className="w-4rem" />
+                        </a>
+                        <a
+                            href="https://www.figma.com/design/XBQzDl4vDOO0pyxEGYcICt/Preview-%7C%C2%A0Dark-%7C-PrimeOne-%7C-3.0.1?node-id=806-36648&t=7AME0kw905t3PVVY-1"
+                            className="p-5 w-full md:w-6 bg-gray-900 flex flex-column align-items-center border-2 border-transparent hover:border-primary transition-colors transition-duration-300"
+                            style={{ borderRadius: '50px' }}
+                        >
+                            <span className="text-white text-4xl font-bold mb-5">Preview Dark</span>
+                            <img alt="Figma Dark" src="https://primefaces.org/cdn/primereact/images/uikit/logo-figma-dark.svg" className="w-4rem" />
+                        </a>
+                    </div>
+
+                    <div className="card mb-5" style={{ borderRadius: '50px' }}>
+                        <div className="text-900 font-bold text-5xl mb-3 text-center">Pricing</div>
+                        <div className="mb-2 text-center line-height-3 text-lg">Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.</div>
+                        <a href="https://www.primefaces.org/uikit/licenses" className="mb-6 text-primary hover:underline font-medium text-center block text-lg">
+                            View License Details
+                        </a>
+
+                        <div className="grid">
+                            <div className="col-12 lg:col-4">
+                                <div className="p-3 h-full">
+                                    <div className="shadow-2 p-5 h-full flex flex-column surface-card border-round">
+                                        <div className="text-900 font-bold text-xl mb-2">Single Designer</div>
+                                        <div className="text-600 font-medium">For individual designers</div>
+                                        <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
+                                        <div className="flex gap-3 flex-wrap">
+                                            <span className="text-2xl font-bold text-900">$249</span>
+                                        </div>
+                                        <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
+                                        <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span className="font-bold">1 Designer</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Auto Layout & Variants</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Interactive Components</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Tokens Studio Support</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span className="inline-flex items-center gap-2">
+                                                    1 Year Free Updates <Badge className="badge1" value="?" severity="secondary" data-pr-tooltip="$99 for + 1 Year" style={{ cursor: 'pointer' }} />
+                                                    <Tooltip target=".badge1" />
+                                                </span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Use on Unlimited Projects</span>
+                                            </li>
+                                        </ul>
+                                        <hr className="mb-3 mx-0 border-top-1 border-none surface-border mt-auto" />
+                                        <a href="https://primeui.store/uikit" className="bg-blue-500 text-white hover:bg-blue-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">
+                                            Buy Now
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-12 lg:col-4">
+                                <div className="p-3 h-full">
+                                    <div className="shadow-2 p-5 h-full flex flex-column surface-card border-round">
+                                        <div className="text-900 font-bold text-xl mb-2">Team</div>
+                                        <div className="text-600 font-medium">For small teams</div>
+                                        <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
+                                        <div className="flex gap-3 flex-wrap">
+                                            <span className="text-2xl font-bold text-900">$990</span>
+                                        </div>
+                                        <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
+                                        <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span className="font-bold">Up to 5 Designers</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Auto Layout & Variants</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Interactive Components</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Tokens Studio Support</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span className="inline-flex items-center gap-2">
+                                                    1 Year Free Updates <Badge className="badge2" value="?" severity="secondary" data-pr-tooltip="$249 for + 1 Year" style={{ cursor: 'pointer' }} />
+                                                    <Tooltip target=".badge2" />
+                                                </span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Use on Unlimited Projects</span>
+                                            </li>
+                                        </ul>
+                                        <hr className="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                        <a href="https://primeui.store/uikit" className="bg-purple-500 text-white hover:bg-purple-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">
+                                            Buy Now
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className="col-12 lg:col-4">
+                                <div className="p-3 h-full">
+                                    <div className="shadow-2 p-5 flex flex-column surface-card border-round">
+                                        <div className="text-900 font-bold text-xl mb-2">Enterprise</div>
+                                        <div className="text-600 font-medium">For large teams</div>
+                                        <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
+                                        <div className="flex gap-3 flex-wrap">
+                                            <span className="text-2xl font-bold text-900">EXCLUSIVE DEALS</span>
+                                        </div>
+                                        <hr className="my-3 mx-0 border-top-1 border-none surface-border" />
+                                        <ul className="list-none p-0 m-0 flex-grow-1 text-lg">
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span className="font-bold">Custom Team Size</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Auto Layout & Variants</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Interactive Components</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Tokens Studio Support</span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span className="inline-flex items-center gap-2">
+                                                    1 Year Free Updates <Badge className="badge3" value="?" severity="secondary" data-pr-tooltip="Contact Us" style={{ cursor: 'pointer' }} />
+                                                    <Tooltip target=".badge3" />
+                                                </span>
+                                            </li>
+                                            <li className="flex align-items-center mb-3">
+                                                <i className="pi pi-check-circle text-green-500 mr-2" />
+                                                <span>Use on Unlimited Projects</span>
+                                            </li>
+                                        </ul>
+                                        <hr className="mb-3 mx-0 border-top-1 border-none surface-border" />
+                                        <a href="/service/mailto:contact@primetek.com.tr" className="bg-bluegray-500 text-white hover:bg-bluegray-400 p-3 w-full border-round text-center transition-colors transition-duration-300 font-bold">
+                                            Contact Us
+                                        </a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="card" style={{ borderRadius: '50px' }}>
+                        <span className="block font-bold text-5xl mb-5 text-center text-900">Frequently Asked Questions</span>
+                        <div className="grid">
+                            <div className="col-12 lg:col-4 px-2 lg:px-5">
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">What do I get when I purchase a license?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">You'll be able to download two Figma files for light and dark themes.</p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">Is there a recurring fee or is the license perpetual?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">UI Kit license is perpetual so requires one time payment with 1 year free updates, not subscription based.</p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">Can I use UI Kit license for commercial projects?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">Yes, your license allows you to sell your projects that utilize the UI Kit implementations.</p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">Can I create multiple projects for multiple clients?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">There is no limit, you are able to use UI Kit in multiple projects for multiple clients.</p>
+                            </div>
+                            <div className="col-12 lg:col-4 px-2 lg:px-5">
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">What Does "Free Updates" Mean?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">
+                                    {' '}
+                                    All updates are completely free for the first year after your purchase. After this one-year period, you will no longer have access to newer versions. However, all versions released within the first year from your
+                                    purchase date will remain accessible to you indefinitely.
+                                </p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">How Can I Extend My Access to Updates After One Year?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">At PrimeStore, you have the option to purchase an additional update term. This will grant you access to all existing versions and updates for another year.</p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">How can I get support?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">
+                                    PrimeTek offers assistance with account management and licensing issues, with the expectation that users have the necessary technical knowledge to use our products, as we do not offer technical support or
+                                    consulting. Users can seek assistance in our community via our public{' '}
+                                    <a href="https://discord.com/invite/gzKFYnpmCY" className="text-primary hover:underline font-medium">
+                                        Discord
+                                    </a>{' '}
+                                    and{' '}
+                                    <a href="https://github.com/orgs/primefaces/discussions/categories/figma-ui-kit" className="text-primary hover:underline font-medium">
+                                        Forum
+                                    </a>
+                                </p>
+                            </div>
+                            <div className="col-12 lg:col-4 px-2 lg:px-5">
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">Does the enterprise license include contractors within the organization?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">Yes, contractors are also able to use the UI Kit within your company.</p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">Can subsidiary company of a larger organization share the enterprise license?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">No, enterprise license is per company so each subsidiary company needs to purchase a separate license.</p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">Can I include UI Kit in an open source project?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.</p>
+
+                                <div className="font-bold text-lg text-900 line-height-3 mb-2 text-900">We're a reseller, are we able to purchase a license on behalf of our client?</div>
+                                <p className="mt-0 mb-6 p-0 line-height-3 text-lg">
+                                    Yes, after the purchase, please{' '}
+                                    <a href="/service/mailto:contact@primetek.com.tr" className="text-primary hover:underline font-medium">
+                                        contact us
+                                    </a>{' '}
+                                    so we can transfer the license to your client.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default UIKitPage;
diff --git a/pages/unstyled/index.js b/pages/unstyled/index.js
new file mode 100644
index 0000000000..a044fda8dd
--- /dev/null
+++ b/pages/unstyled/index.js
@@ -0,0 +1,34 @@
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { ArchitectureDoc } from '@/components/doc/unstyled/architecturedoc';
+import { ExampleDoc } from '@/components/doc/unstyled/exampledoc';
+import { SetupDoc } from '@/components/doc/unstyled/setupdoc';
+import { ThemeDoc } from '@/components/doc/unstyled/themedoc';
+
+const UnstyledDemo = () => {
+    const docs = [
+        {
+            id: 'architecture',
+            label: 'Architecture',
+            component: ArchitectureDoc
+        },
+        {
+            id: 'setup',
+            label: 'Setup',
+            component: SetupDoc
+        },
+        {
+            id: 'example',
+            label: 'Example',
+            component: ExampleDoc
+        },
+        {
+            id: 'theme',
+            label: 'Theme',
+            component: ThemeDoc
+        }
+    ];
+
+    return <DocComponent title="Unstyled - PrimeReact" header="Unstyled Mode" description="Styling PrimeReact with your favorite CSS library." componentDocs={docs} hideTabMenu />;
+};
+
+export default UnstyledDemo;
diff --git a/pages/virtualscroller/index.js b/pages/virtualscroller/index.js
new file mode 100644
index 0000000000..2b078c6835
--- /dev/null
+++ b/pages/virtualscroller/index.js
@@ -0,0 +1,93 @@
+import DocApiTable from '@/components/doc/common/docapitable';
+import { DocComponent } from '@/components/doc/common/doccomponent';
+import { AccessibilityDoc } from '@/components/doc/virtualscroller/accessibilitydoc';
+import { BasicDoc } from '@/components/doc/virtualscroller/basicdoc';
+import { DelayDoc } from '@/components/doc/virtualscroller/delaydoc';
+import { GridDoc } from '@/components/doc/virtualscroller/griddoc';
+import { HorizontalDoc } from '@/components/doc/virtualscroller/horizontaldoc';
+import { ImportDoc } from '@/components/doc/virtualscroller/importdoc';
+import { LazyDoc } from '@/components/doc/virtualscroller/lazydoc';
+import { LoadingDoc } from '@/components/doc/virtualscroller/loadingdoc';
+import { Wireframe } from '@/components/doc/virtualscroller/pt/wireframe';
+import { StyledDoc } from '@/components/doc/virtualscroller/theming/styleddoc';
+
+const VirtualScrollerDemo = () => {
+    const docs = [
+        {
+            id: 'import',
+            label: 'Import',
+            component: ImportDoc
+        },
+        {
+            id: 'basic',
+            label: 'Basic',
+            component: BasicDoc
+        },
+        {
+            id: 'horizontal',
+            label: 'Horizontal',
+            component: HorizontalDoc
+        },
+        {
+            id: 'grid',
+            label: 'Grid',
+            component: GridDoc
+        },
+        {
+            id: 'delay',
+            label: 'Delay',
+            component: DelayDoc
+        },
+        {
+            id: 'loading',
+            label: 'Loading',
+            component: LoadingDoc
+        },
+        {
+            id: 'lazy',
+            label: 'Lazy',
+            component: LazyDoc
+        },
+
+        {
+            id: 'accessibility',
+            label: 'Accessibility',
+            component: AccessibilityDoc
+        }
+    ];
+    const ptDocs = [
+        {
+            id: 'pt.wireframe',
+            label: 'Wireframe',
+            component: Wireframe
+        },
+        {
+            id: 'pt.virtualscroller.options',
+            label: 'VirtualScroller PT Options',
+            component: DocApiTable
+        }
+    ];
+
+    const themingDocs = [
+        {
+            id: 'styled',
+            label: 'Styled',
+            component: StyledDoc
+        }
+    ];
+
+    return (
+        <DocComponent
+            title="React Virtual Scroller Component"
+            header="VirtualScroller"
+            description="VirtualScroller is a performant approach to render large amounts of data efficiently."
+            componentDocs={docs}
+            apiDocs={['VirtualScroller']}
+            ptDocs={ptDocs}
+            className="virtualscroller-demo"
+            themingDocs={themingDocs}
+        />
+    );
+};
+
+export default VirtualScrollerDemo;
diff --git a/public/data/customers-large.json b/public/data/customers-large.json
new file mode 100644
index 0000000000..128335b6c8
--- /dev/null
+++ b/public/data/customers-large.json
@@ -0,0 +1,3604 @@
+{
+  "data":[
+     {
+        "id":1000,
+        "name":"James Butt",
+        "country":{
+           "name":"Algeria",
+           "code":"dz"
+        },
+        "company":"Benton, John B Jr",
+        "date":"2015-09-13",
+        "status":"unqualified",
+        "verified":true,
+        "activity":17,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":70663
+     },
+     {
+        "id":1001,
+        "name":"Josephine Darakjy",
+        "country":{
+           "name":"Egypt",
+           "code":"eg"
+        },
+        "company":"Chanay, Jeffrey A Esq",
+        "date":"2019-02-09",
+        "status":"proposal",
+        "verified":true,
+        "activity":0,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":82429
+     },
+     {
+        "id":1002,
+        "name":"Art Venere",
+        "country":{
+           "name":"Panama",
+           "code":"pa"
+        },
+        "company":"Chemel, James L Cpa",
+        "date":"2017-05-13",
+        "status":"qualified",
+        "verified":false,
+        "activity":63,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":28334
+     },
+     {
+        "id":1003,
+        "name":"Lenna Paprocki",
+        "country":{
+           "name":"Slovenia",
+           "code":"si"
+        },
+        "company":"Feltz Printing Service",
+        "date":"2020-09-15",
+        "status":"new",
+        "verified":false,
+        "activity":37,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":88521
+     },
+     {
+        "id":1004,
+        "name":"Donette Foller",
+        "country":{
+           "name":"South Africa",
+           "code":"za"
+        },
+        "company":"Printing Dimensions",
+        "date":"2016-05-20",
+        "status":"proposal",
+        "verified":true,
+        "activity":33,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":93905
+     },
+     {
+        "id":1005,
+        "name":"Simona Morasca",
+        "country":{
+           "name":"Egypt",
+           "code":"eg"
+        },
+        "company":"Chapman, Ross E Esq",
+        "date":"2018-02-16",
+        "status":"qualified",
+        "verified":false,
+        "activity":68,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":50041
+     },
+     {
+        "id":1006,
+        "name":"Mitsue Tollner",
+        "country":{
+           "name":"Paraguay",
+           "code":"py"
+        },
+        "company":"Morlong Associates",
+        "date":"2018-02-19",
+        "status":"renewal",
+        "verified":true,
+        "activity":54,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":58706
+     },
+     {
+        "id":1007,
+        "name":"Leota Dilliard",
+        "country":{
+           "name":"Serbia",
+           "code":"rs"
+        },
+        "company":"Commercial Press",
+        "date":"2019-08-13",
+        "status":"renewal",
+        "verified":true,
+        "activity":69,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":26640
+     },
+     {
+        "id":1008,
+        "name":"Sage Wieser",
+        "country":{
+           "name":"Egypt",
+           "code":"eg"
+        },
+        "company":"Truhlar And Truhlar Attys",
+        "date":"2018-11-21",
+        "status":"unqualified",
+        "verified":true,
+        "activity":76,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":65369
+     },
+     {
+        "id":1009,
+        "name":"Kris Marrier",
+        "country":{
+           "name":"Mexico",
+           "code":"mx"
+        },
+        "company":"King, Christopher A Esq",
+        "date":"2015-07-07",
+        "status":"proposal",
+        "verified":false,
+        "activity":3,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":63451
+     },
+     {
+        "id":1010,
+        "name":"Minna Amigon",
+        "country":{
+           "name":"Romania",
+           "code":"ro"
+        },
+        "company":"Dorl, James J Esq",
+        "date":"2018-11-07",
+        "status":"qualified",
+        "verified":false,
+        "activity":38,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":71169
+     },
+     {
+        "id":1011,
+        "name":"Abel Maclead",
+        "country":{
+           "name":"Singapore",
+           "code":"sg"
+        },
+        "company":"Rangoni Of Florence",
+        "date":"2017-03-11",
+        "status":"qualified",
+        "verified":true,
+        "activity":87,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":96842
+     },
+     {
+        "id":1012,
+        "name":"Kiley Caldarera",
+        "country":{
+           "name":"Serbia",
+           "code":"rs"
+        },
+        "company":"Feiner Bros",
+        "date":"2015-10-20",
+        "status":"unqualified",
+        "verified":false,
+        "activity":80,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":92734
+     },
+     {
+        "id":1013,
+        "name":"Graciela Ruta",
+        "country":{
+           "name":"Chile",
+           "code":"cl"
+        },
+        "company":"Buckley Miller & Wright",
+        "date":"2016-07-25",
+        "status":"negotiation",
+        "verified":false,
+        "activity":59,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":45250
+     },
+     {
+        "id":1014,
+        "name":"Cammy Albares",
+        "country":{
+           "name":"Philippines",
+           "code":"ph"
+        },
+        "company":"Rousseaux, Michael Esq",
+        "date":"2019-06-25",
+        "status":"new",
+        "verified":true,
+        "activity":90,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":30236
+     },
+     {
+        "id":1015,
+        "name":"Mattie Poquette",
+        "country":{
+           "name":"Venezuela",
+           "code":"ve"
+        },
+        "company":"Century Communications",
+        "date":"2017-12-12",
+        "status":"negotiation",
+        "verified":false,
+        "activity":52,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":64533
+     },
+     {
+        "id":1016,
+        "name":"Meaghan Garufi",
+        "country":{
+           "name":"Malaysia",
+           "code":"my"
+        },
+        "company":"Bolton, Wilbur Esq",
+        "date":"2018-07-04",
+        "status":"unqualified",
+        "verified":false,
+        "activity":31,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":37279
+     },
+     {
+        "id":1017,
+        "name":"Gladys Rim",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"T M Byxbee Company Pc",
+        "date":"2020-02-27",
+        "status":"renewal",
+        "verified":true,
+        "activity":48,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":27381
+     },
+     {
+        "id":1018,
+        "name":"Yuki Whobrey",
+        "country":{
+           "name":"Israel",
+           "code":"il"
+        },
+        "company":"Farmers Insurance Group",
+        "date":"2017-12-21",
+        "status":"negotiation",
+        "verified":true,
+        "activity":16,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":9257
+     },
+     {
+        "id":1019,
+        "name":"Fletcher Flosi",
+        "country":{
+           "name":"Argentina",
+           "code":"ar"
+        },
+        "company":"Post Box Services Plus",
+        "date":"2016-01-04",
+        "status":"renewal",
+        "verified":true,
+        "activity":19,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":67783
+     },
+     {
+        "id":1020,
+        "name":"Bette Nicka",
+        "country":{
+           "name":"Paraguay",
+           "code":"py"
+        },
+        "company":"Sport En Art",
+        "date":"2016-10-21",
+        "status":"renewal",
+        "verified":false,
+        "activity":100,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":4609
+     },
+     {
+        "id":1021,
+        "name":"Veronika Inouye",
+        "country":{
+           "name":"Ecuador",
+           "code":"ec"
+        },
+        "company":"C 4 Network Inc",
+        "date":"2017-03-24",
+        "status":"renewal",
+        "verified":false,
+        "activity":72,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":26565
+     },
+     {
+        "id":1022,
+        "name":"Willard Kolmetz",
+        "country":{
+           "name":"Tunisia",
+           "code":"tn"
+        },
+        "company":"Ingalls, Donald R Esq",
+        "date":"2017-04-15",
+        "status":"renewal",
+        "verified":true,
+        "activity":94,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":75876
+     },
+     {
+        "id":1023,
+        "name":"Maryann Royster",
+        "country":{
+           "name":"Belarus",
+           "code":"by"
+        },
+        "company":"Franklin, Peter L Esq",
+        "date":"2017-03-11",
+        "status":"qualified",
+        "verified":false,
+        "activity":56,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":41121
+     },
+     {
+        "id":1024,
+        "name":"Alisha Slusarski",
+        "country":{
+           "name":"Iceland",
+           "code":"is"
+        },
+        "company":"Wtlz Power 107 Fm",
+        "date":"2018-03-27",
+        "status":"qualified",
+        "verified":true,
+        "activity":7,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":91691
+     },
+     {
+        "id":1025,
+        "name":"Allene Iturbide",
+        "country":{
+           "name":"Italy",
+           "code":"it"
+        },
+        "company":"Ledecky, David Esq",
+        "date":"2016-02-20",
+        "status":"qualified",
+        "verified":true,
+        "activity":1,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":40137
+     },
+     {
+        "id":1026,
+        "name":"Chanel Caudy",
+        "country":{
+           "name":"Argentina",
+           "code":"ar"
+        },
+        "company":"Professional Image Inc",
+        "date":"2018-06-24",
+        "status":"new",
+        "verified":true,
+        "activity":26,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":21304
+     },
+     {
+        "id":1027,
+        "name":"Ezekiel Chui",
+        "country":{
+           "name":"Ireland",
+           "code":"ie"
+        },
+        "company":"Sider, Donald C Esq",
+        "date":"2016-09-24",
+        "status":"new",
+        "verified":false,
+        "activity":76,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":60454
+     },
+     {
+        "id":1028,
+        "name":"Willow Kusko",
+        "country":{
+           "name":"Romania",
+           "code":"ro"
+        },
+        "company":"U Pull It",
+        "date":"2020-04-11",
+        "status":"qualified",
+        "verified":true,
+        "activity":7,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":17565
+     },
+     {
+        "id":1029,
+        "name":"Bernardo Figeroa",
+        "country":{
+           "name":"Israel",
+           "code":"il"
+        },
+        "company":"Clark, Richard Cpa",
+        "date":"2018-04-11",
+        "status":"renewal",
+        "verified":true,
+        "activity":81,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":17774
+     },
+     {
+        "id":1030,
+        "name":"Ammie Corrio",
+        "country":{
+           "name":"Hungary",
+           "code":"hu"
+        },
+        "company":"Moskowitz, Barry S",
+        "date":"2016-06-11",
+        "status":"negotiation",
+        "verified":true,
+        "activity":56,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":49201
+     },
+     {
+        "id":1031,
+        "name":"Francine Vocelka",
+        "country":{
+           "name":"Honduras",
+           "code":"hn"
+        },
+        "company":"Cascade Realty Advisors Inc",
+        "date":"2017-08-02",
+        "status":"qualified",
+        "verified":true,
+        "activity":94,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":67126
+     },
+     {
+        "id":1032,
+        "name":"Ernie Stenseth",
+        "country":{
+           "name":"Australia",
+           "code":"au"
+        },
+        "company":"Knwz Newsradio",
+        "date":"2018-06-06",
+        "status":"renewal",
+        "verified":true,
+        "activity":68,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":76017
+     },
+     {
+        "id":1033,
+        "name":"Albina Glick",
+        "country":{
+           "name":"Ukraine",
+           "code":"ua"
+        },
+        "company":"Giampetro, Anthony D",
+        "date":"2019-08-08",
+        "status":"proposal",
+        "verified":true,
+        "activity":85,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":91201
+     },
+     {
+        "id":1034,
+        "name":"Alishia Sergi",
+        "country":{
+           "name":"Qatar",
+           "code":"qa"
+        },
+        "company":"Milford Enterprises Inc",
+        "date":"2018-05-19",
+        "status":"negotiation",
+        "verified":false,
+        "activity":46,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":12237
+     },
+     {
+        "id":1035,
+        "name":"Solange Shinko",
+        "country":{
+           "name":"Cameroon",
+           "code":"cm"
+        },
+        "company":"Mosocco, Ronald A",
+        "date":"2015-02-12",
+        "status":"qualified",
+        "verified":true,
+        "activity":32,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":34072
+     },
+     {
+        "id":1036,
+        "name":"Jose Stockham",
+        "country":{
+           "name":"Italy",
+           "code":"it"
+        },
+        "company":"Tri State Refueler Co",
+        "date":"2018-04-25",
+        "status":"qualified",
+        "verified":true,
+        "activity":77,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":94909
+     },
+     {
+        "id":1037,
+        "name":"Rozella Ostrosky",
+        "country":{
+           "name":"Venezuela",
+           "code":"ve"
+        },
+        "company":"Parkway Company",
+        "date":"2016-02-27",
+        "status":"unqualified",
+        "verified":true,
+        "activity":66,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":57245
+     },
+     {
+        "id":1038,
+        "name":"Valentine Gillian",
+        "country":{
+           "name":"Paraguay",
+           "code":"py"
+        },
+        "company":"Fbs Business Finance",
+        "date":"2019-09-17",
+        "status":"qualified",
+        "verified":true,
+        "activity":25,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":75502
+     },
+     {
+        "id":1039,
+        "name":"Kati Rulapaugh",
+        "country":{
+           "name":"Puerto Rico",
+           "code":"pr"
+        },
+        "company":"Eder Assocs Consltng Engrs Pc",
+        "date":"2016-12-03",
+        "status":"renewal",
+        "verified":false,
+        "activity":51,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":82075
+     },
+     {
+        "id":1040,
+        "name":"Youlanda Schemmer",
+        "country":{
+           "name":"Bolivia",
+           "code":"bo"
+        },
+        "company":"Tri M Tool Inc",
+        "date":"2017-12-15",
+        "status":"negotiation",
+        "verified":true,
+        "activity":49,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":19208
+     },
+     {
+        "id":1041,
+        "name":"Dyan Oldroyd",
+        "country":{
+           "name":"Argentina",
+           "code":"ar"
+        },
+        "company":"International Eyelets Inc",
+        "date":"2017-02-02",
+        "status":"qualified",
+        "verified":false,
+        "activity":5,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":50194
+     },
+     {
+        "id":1042,
+        "name":"Roxane Campain",
+        "country":{
+           "name":"France",
+           "code":"fr"
+        },
+        "company":"Rapid Trading Intl",
+        "date":"2018-12-25",
+        "status":"unqualified",
+        "verified":false,
+        "activity":100,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":77714
+     },
+     {
+        "id":1043,
+        "name":"Lavera Perin",
+        "country":{
+           "name":"Vietnam",
+           "code":"vn"
+        },
+        "company":"Abc Enterprises Inc",
+        "date":"2018-04-10",
+        "status":"qualified",
+        "verified":false,
+        "activity":71,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":35740
+     },
+     {
+        "id":1044,
+        "name":"Erick Ferencz",
+        "country":{
+           "name":"Belgium",
+           "code":"be"
+        },
+        "company":"Cindy Turner Associates",
+        "date":"2018-05-06",
+        "status":"unqualified",
+        "verified":true,
+        "activity":54,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":30790
+     },
+     {
+        "id":1045,
+        "name":"Fatima Saylors",
+        "country":{
+           "name":"Canada",
+           "code":"ca"
+        },
+        "company":"Stanton, James D Esq",
+        "date":"2019-07-10",
+        "status":"renewal",
+        "verified":true,
+        "activity":93,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":52343
+     },
+     {
+        "id":1046,
+        "name":"Jina Briddick",
+        "country":{
+           "name":"Mexico",
+           "code":"mx"
+        },
+        "company":"Grace Pastries Inc",
+        "date":"2018-02-19",
+        "status":"unqualified",
+        "verified":false,
+        "activity":97,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":53966
+     },
+     {
+        "id":1047,
+        "name":"Kanisha Waycott",
+        "country":{
+           "name":"Ecuador",
+           "code":"ec"
+        },
+        "company":"Schroer, Gene E Esq",
+        "date":"2019-11-27",
+        "status":"new",
+        "verified":false,
+        "activity":80,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":9920
+     },
+     {
+        "id":1048,
+        "name":"Emerson Bowley",
+        "country":{
+           "name":"Finland",
+           "code":"fi"
+        },
+        "company":"Knights Inn",
+        "date":"2018-11-24",
+        "status":"new",
+        "verified":false,
+        "activity":63,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":78069
+     },
+     {
+        "id":1049,
+        "name":"Blair Malet",
+        "country":{
+           "name":"Finland",
+           "code":"fi"
+        },
+        "company":"Bollinger Mach Shp & Shipyard",
+        "date":"2018-04-19",
+        "status":"new",
+        "verified":true,
+        "activity":92,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":65005
+     },
+     {
+        "id":1050,
+        "name":"Brock Bolognia",
+        "country":{
+           "name":"Bolivia",
+           "code":"bo"
+        },
+        "company":"Orinda News",
+        "date":"2019-09-06",
+        "status":"renewal",
+        "verified":true,
+        "activity":72,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":51038
+     },
+     {
+        "id":1051,
+        "name":"Lorrie Nestle",
+        "country":{
+           "name":"Germany",
+           "code":"de"
+        },
+        "company":"Ballard Spahr Andrews",
+        "date":"2018-04-26",
+        "status":"renewal",
+        "verified":false,
+        "activity":36,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":28218
+     },
+     {
+        "id":1052,
+        "name":"Sabra Uyetake",
+        "country":{
+           "name":"Peru",
+           "code":"pe"
+        },
+        "company":"Lowy Limousine Service",
+        "date":"2018-04-12",
+        "status":"new",
+        "verified":false,
+        "activity":31,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":78527
+     },
+     {
+        "id":1053,
+        "name":"Marjory Mastella",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"Vicon Corporation",
+        "date":"2018-01-24",
+        "status":"negotiation",
+        "verified":false,
+        "activity":89,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":23381
+     },
+     {
+        "id":1054,
+        "name":"Karl Klonowski",
+        "country":{
+           "name":"Saudi Arabia",
+           "code":"sa"
+        },
+        "company":"Rossi, Michael M",
+        "date":"2017-04-17",
+        "status":"unqualified",
+        "verified":true,
+        "activity":27,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":64821
+     },
+     {
+        "id":1055,
+        "name":"Tonette Wenner",
+        "country":{
+           "name":"Australia",
+           "code":"au"
+        },
+        "company":"Northwest Publishing",
+        "date":"2019-04-14",
+        "status":"qualified",
+        "verified":false,
+        "activity":27,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":55334
+     },
+     {
+        "id":1056,
+        "name":"Amber Monarrez",
+        "country":{
+           "name":"Sweden",
+           "code":"se"
+        },
+        "company":"Branford Wire & Mfg Co",
+        "date":"2019-09-09",
+        "status":"new",
+        "verified":false,
+        "activity":79,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":83391
+     },
+     {
+        "id":1057,
+        "name":"Shenika Seewald",
+        "country":{
+           "name":"Australia",
+           "code":"au"
+        },
+        "company":"East Coast Marketing",
+        "date":"2017-02-18",
+        "status":"renewal",
+        "verified":true,
+        "activity":39,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":31580
+     },
+     {
+        "id":1058,
+        "name":"Delmy Ahle",
+        "country":{
+           "name":"Belgium",
+           "code":"be"
+        },
+        "company":"Wye Technologies Inc",
+        "date":"2020-10-05",
+        "status":"unqualified",
+        "verified":false,
+        "activity":55,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":11723
+     },
+     {
+        "id":1059,
+        "name":"Deeanna Juhas",
+        "country":{
+           "name":"Sweden",
+           "code":"se"
+        },
+        "company":"Healy, George W Iv",
+        "date":"2018-09-28",
+        "status":"negotiation",
+        "verified":false,
+        "activity":79,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":8454
+     },
+     {
+        "id":1060,
+        "name":"Blondell Pugh",
+        "country":{
+           "name":"Ireland",
+           "code":"ie"
+        },
+        "company":"Alpenlite Inc",
+        "date":"2016-06-16",
+        "status":"renewal",
+        "verified":false,
+        "activity":49,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":99235
+     },
+     {
+        "id":1061,
+        "name":"Jamal Vanausdal",
+        "country":{
+           "name":"Morocco",
+           "code":"ma"
+        },
+        "company":"Hubbard, Bruce Esq",
+        "date":"2017-05-25",
+        "status":"proposal",
+        "verified":true,
+        "activity":87,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":15656
+     },
+     {
+        "id":1062,
+        "name":"Cecily Hollack",
+        "country":{
+           "name":"Bolivia",
+           "code":"bo"
+        },
+        "company":"Arthur A Oliver & Son Inc",
+        "date":"2020-05-09",
+        "status":"negotiation",
+        "verified":true,
+        "activity":5,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":60586
+     },
+     {
+        "id":1063,
+        "name":"Carmelina Lindall",
+        "country":{
+           "name":"Puerto Rico",
+           "code":"pr"
+        },
+        "company":"George Jessop Carter Jewelers",
+        "date":"2019-09-07",
+        "status":"qualified",
+        "verified":true,
+        "activity":77,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":86239
+     },
+     {
+        "id":1064,
+        "name":"Maurine Yglesias",
+        "country":{
+           "name":"Taiwan",
+           "code":"tw"
+        },
+        "company":"Schultz, Thomas C Md",
+        "date":"2015-08-10",
+        "status":"renewal",
+        "verified":false,
+        "activity":94,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":15621
+     },
+     {
+        "id":1065,
+        "name":"Tawna Buvens",
+        "country":{
+           "name":"Indonesia",
+           "code":"id"
+        },
+        "company":"H H H Enterprises Inc",
+        "date":"2018-03-20",
+        "status":"new",
+        "verified":false,
+        "activity":25,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":77248
+     },
+     {
+        "id":1066,
+        "name":"Penney Weight",
+        "country":{
+           "name":"South Africa",
+           "code":"za"
+        },
+        "company":"Hawaiian King Hotel",
+        "date":"2020-03-03",
+        "status":"qualified",
+        "verified":false,
+        "activity":96,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":478
+     },
+     {
+        "id":1067,
+        "name":"Elly Morocco",
+        "country":{
+           "name":"Thailand",
+           "code":"th"
+        },
+        "company":"Killion Industries",
+        "date":"2018-09-18",
+        "status":"qualified",
+        "verified":true,
+        "activity":38,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":62505
+     },
+     {
+        "id":1068,
+        "name":"Ilene Eroman",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"Robinson, William J Esq",
+        "date":"2019-06-08",
+        "status":"new",
+        "verified":true,
+        "activity":49,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":91480
+     },
+     {
+        "id":1069,
+        "name":"Vallie Mondella",
+        "country":{
+           "name":"Latvia",
+           "code":"lv"
+        },
+        "company":"Private Properties",
+        "date":"2018-12-06",
+        "status":"new",
+        "verified":false,
+        "activity":16,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":21671
+     },
+     {
+        "id":1070,
+        "name":"Kallie Blackwood",
+        "country":{
+           "name":"Iceland",
+           "code":"is"
+        },
+        "company":"Rowley Schlimgen Inc",
+        "date":"2017-04-05",
+        "status":"unqualified",
+        "verified":false,
+        "activity":25,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":13775
+     },
+     {
+        "id":1071,
+        "name":"Johnetta Abdallah",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"Forging Specialties",
+        "date":"2015-02-02",
+        "status":"new",
+        "verified":false,
+        "activity":16,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":60253
+     },
+     {
+        "id":1072,
+        "name":"Bobbye Rhym",
+        "country":{
+           "name":"Ukraine",
+           "code":"ua"
+        },
+        "company":"Smits, Patricia Garity",
+        "date":"2018-08-17",
+        "status":"qualified",
+        "verified":true,
+        "activity":85,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":75225
+     },
+     {
+        "id":1073,
+        "name":"Micaela Rhymes",
+        "country":{
+           "name":"France",
+           "code":"fr"
+        },
+        "company":"H Lee Leonard Attorney At Law",
+        "date":"2018-09-08",
+        "status":"renewal",
+        "verified":true,
+        "activity":92,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":3308
+     },
+     {
+        "id":1074,
+        "name":"Tamar Hoogland",
+        "country":{
+           "name":"Guatemala",
+           "code":"gt"
+        },
+        "company":"A K Construction Co",
+        "date":"2018-11-13",
+        "status":"proposal",
+        "verified":true,
+        "activity":22,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":19711
+     },
+     {
+        "id":1075,
+        "name":"Moon Parlato",
+        "country":{
+           "name":"Czech Republic",
+           "code":"cz"
+        },
+        "company":"Ambelang, Jessica M Md",
+        "date":"2019-08-18",
+        "status":"renewal",
+        "verified":false,
+        "activity":64,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":55110
+     },
+     {
+        "id":1076,
+        "name":"Laurel Reitler",
+        "country":{
+           "name":"United Kingdom",
+           "code":"gb"
+        },
+        "company":"Q A Service",
+        "date":"2015-04-02",
+        "status":"negotiation",
+        "verified":false,
+        "activity":80,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":62392
+     },
+     {
+        "id":1077,
+        "name":"Delisa Crupi",
+        "country":{
+           "name":"Taiwan",
+           "code":"tw"
+        },
+        "company":"Wood & Whitacre Contractors",
+        "date":"2017-09-15",
+        "status":"unqualified",
+        "verified":false,
+        "activity":70,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":76530
+     },
+     {
+        "id":1078,
+        "name":"Viva Toelkes",
+        "country":{
+           "name":"United States",
+           "code":"us"
+        },
+        "company":"Mark Iv Press Ltd",
+        "date":"2017-03-27",
+        "status":"qualified",
+        "verified":false,
+        "activity":16,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":7460
+     },
+     {
+        "id":1079,
+        "name":"Elza Lipke",
+        "country":{
+           "name":"Ireland",
+           "code":"ie"
+        },
+        "company":"Museum Of Science & Industry",
+        "date":"2017-06-01",
+        "status":"proposal",
+        "verified":true,
+        "activity":90,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":42251
+     },
+     {
+        "id":1080,
+        "name":"Devorah Chickering",
+        "country":{
+           "name":"Spain",
+           "code":"es"
+        },
+        "company":"Garrison Ind",
+        "date":"2017-03-14",
+        "status":"proposal",
+        "verified":true,
+        "activity":96,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":36435
+     },
+     {
+        "id":1081,
+        "name":"Timothy Mulqueen",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"Saronix Nymph Products",
+        "date":"2018-07-09",
+        "status":"renewal",
+        "verified":true,
+        "activity":77,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":39197
+     },
+     {
+        "id":1082,
+        "name":"Arlette Honeywell",
+        "country":{
+           "name":"Panama",
+           "code":"pa"
+        },
+        "company":"Smc Inc",
+        "date":"2018-09-11",
+        "status":"proposal",
+        "verified":true,
+        "activity":46,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":72707
+     },
+     {
+        "id":1083,
+        "name":"Dominque Dickerson",
+        "country":{
+           "name":"Argentina",
+           "code":"ar"
+        },
+        "company":"E A I Electronic Assocs Inc",
+        "date":"2017-11-12",
+        "status":"qualified",
+        "verified":true,
+        "activity":83,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":97965
+     },
+     {
+        "id":1084,
+        "name":"Lettie Isenhower",
+        "country":{
+           "name":"Canada",
+           "code":"ca"
+        },
+        "company":"Conte, Christopher A Esq",
+        "date":"2016-03-01",
+        "status":"qualified",
+        "verified":true,
+        "activity":83,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":5823
+     },
+     {
+        "id":1085,
+        "name":"Myra Munns",
+        "country":{
+           "name":"Lithuania",
+           "code":"lt"
+        },
+        "company":"Anker Law Office",
+        "date":"2016-05-21",
+        "status":"unqualified",
+        "verified":true,
+        "activity":49,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":96471
+     },
+     {
+        "id":1086,
+        "name":"Stephaine Barfield",
+        "country":{
+           "name":"Belgium",
+           "code":"be"
+        },
+        "company":"Beutelschies & Company",
+        "date":"2016-01-22",
+        "status":"new",
+        "verified":true,
+        "activity":34,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":33710
+     },
+     {
+        "id":1087,
+        "name":"Lai Gato",
+        "country":{
+           "name":"Nigeria",
+           "code":"ng"
+        },
+        "company":"Fligg, Kenneth I Jr",
+        "date":"2016-07-26",
+        "status":"unqualified",
+        "verified":false,
+        "activity":64,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":30611
+     },
+     {
+        "id":1088,
+        "name":"Stephen Emigh",
+        "country":{
+           "name":"Cuba",
+           "code":"cu"
+        },
+        "company":"Sharp, J Daniel Esq",
+        "date":"2020-07-24",
+        "status":"renewal",
+        "verified":false,
+        "activity":51,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":32960
+     },
+     {
+        "id":1089,
+        "name":"Tyra Shields",
+        "country":{
+           "name":"Honduras",
+           "code":"hn"
+        },
+        "company":"Assink, Anne H Esq",
+        "date":"2019-11-10",
+        "status":"negotiation",
+        "verified":false,
+        "activity":11,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":57423
+     },
+     {
+        "id":1090,
+        "name":"Tammara Wardrip",
+        "country":{
+           "name":"Saudi Arabia",
+           "code":"sa"
+        },
+        "company":"Jewel My Shop Inc",
+        "date":"2016-06-05",
+        "status":"renewal",
+        "verified":true,
+        "activity":64,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":23027
+     },
+     {
+        "id":1091,
+        "name":"Cory Gibes",
+        "country":{
+           "name":"Malaysia",
+           "code":"my"
+        },
+        "company":"Chinese Translation Resources",
+        "date":"2016-02-28",
+        "status":"new",
+        "verified":false,
+        "activity":44,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":84182
+     },
+     {
+        "id":1092,
+        "name":"Danica Bruschke",
+        "country":{
+           "name":"Taiwan",
+           "code":"tw"
+        },
+        "company":"Stevens, Charles T",
+        "date":"2018-12-13",
+        "status":"unqualified",
+        "verified":true,
+        "activity":62,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":25237
+     },
+     {
+        "id":1093,
+        "name":"Wilda Giguere",
+        "country":{
+           "name":"Iceland",
+           "code":"is"
+        },
+        "company":"Mclaughlin, Luther W Cpa",
+        "date":"2017-06-16",
+        "status":"new",
+        "verified":true,
+        "activity":79,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":87736
+     },
+     {
+        "id":1094,
+        "name":"Elvera Benimadho",
+        "country":{
+           "name":"Malaysia",
+           "code":"my"
+        },
+        "company":"Tree Musketeers",
+        "date":"2019-02-17",
+        "status":"proposal",
+        "verified":true,
+        "activity":50,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":38674
+     },
+     {
+        "id":1095,
+        "name":"Carma Vanheusen",
+        "country":{
+           "name":"Turkey",
+           "code":"tr"
+        },
+        "company":"Springfield Div Oh Edison Co",
+        "date":"2019-11-26",
+        "status":"renewal",
+        "verified":false,
+        "activity":84,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":67762
+     },
+     {
+        "id":1096,
+        "name":"Malinda Hochard",
+        "country":{
+           "name":"Serbia",
+           "code":"rs"
+        },
+        "company":"Logan Memorial Hospital",
+        "date":"2016-07-06",
+        "status":"new",
+        "verified":false,
+        "activity":88,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":81299
+     },
+     {
+        "id":1097,
+        "name":"Natalie Fern",
+        "country":{
+           "name":"Canada",
+           "code":"ca"
+        },
+        "company":"Kelly, Charles G Esq",
+        "date":"2019-10-02",
+        "status":"proposal",
+        "verified":true,
+        "activity":44,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":64794
+     },
+     {
+        "id":1098,
+        "name":"Lisha Centini",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"Industrial Paper Shredders Inc",
+        "date":"2018-07-05",
+        "status":"new",
+        "verified":true,
+        "activity":7,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":7815
+     },
+     {
+        "id":1099,
+        "name":"Arlene Klusman",
+        "country":{
+           "name":"Jamaica",
+           "code":"jm"
+        },
+        "company":"Beck Horizon Builders",
+        "date":"2018-05-14",
+        "status":"proposal",
+        "verified":true,
+        "activity":99,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":37976
+     },
+     {
+        "id":1100,
+        "name":"Alease Buemi",
+        "country":{
+           "name":"Costa Rica",
+           "code":"cr"
+        },
+        "company":"Porto Cayo At Hawks Cay",
+        "date":"2018-03-14",
+        "status":"unqualified",
+        "verified":true,
+        "activity":0,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":59594
+     },
+     {
+        "id":1101,
+        "name":"Louisa Cronauer",
+        "country":{
+           "name":"Costa Rica",
+           "code":"cr"
+        },
+        "company":"Pacific Grove Museum Ntrl Hist",
+        "date":"2018-09-23",
+        "status":"qualified",
+        "verified":false,
+        "activity":3,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":92528
+     },
+     {
+        "id":1102,
+        "name":"Angella Cetta",
+        "country":{
+           "name":"Vietnam",
+           "code":"vn"
+        },
+        "company":"Bender & Hatley Pc",
+        "date":"2018-04-10",
+        "status":"qualified",
+        "verified":false,
+        "activity":88,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":58964
+     },
+     {
+        "id":1103,
+        "name":"Cyndy Goldammer",
+        "country":{
+           "name":"Burkina Faso",
+           "code":"bf"
+        },
+        "company":"Di Cristina J & Son",
+        "date":"2017-09-18",
+        "status":"unqualified",
+        "verified":false,
+        "activity":92,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":65860
+     },
+     {
+        "id":1104,
+        "name":"Rosio Cork",
+        "country":{
+           "name":"Singapore",
+           "code":"sg"
+        },
+        "company":"Green Goddess",
+        "date":"2017-08-19",
+        "status":"negotiation",
+        "verified":true,
+        "activity":19,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":63863
+     },
+     {
+        "id":1105,
+        "name":"Celeste Korando",
+        "country":{
+           "name":"Costa Rica",
+           "code":"cr"
+        },
+        "company":"American Arts & Graphics",
+        "date":"2020-06-18",
+        "status":"proposal",
+        "verified":true,
+        "activity":21,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":37510
+     },
+     {
+        "id":1106,
+        "name":"Twana Felger",
+        "country":{
+           "name":"Croatia",
+           "code":"hr"
+        },
+        "company":"Opryland Hotel",
+        "date":"2016-11-18",
+        "status":"negotiation",
+        "verified":false,
+        "activity":97,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":63876
+     },
+     {
+        "id":1107,
+        "name":"Estrella Samu",
+        "country":{
+           "name":"Vietnam",
+           "code":"vn"
+        },
+        "company":"Marking Devices Pubg Co",
+        "date":"2017-06-25",
+        "status":"unqualified",
+        "verified":false,
+        "activity":27,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":93263
+     },
+     {
+        "id":1108,
+        "name":"Donte Kines",
+        "country":{
+           "name":"Slovakia",
+           "code":"sk"
+        },
+        "company":"W Tc Industries Inc",
+        "date":"2019-02-16",
+        "status":"new",
+        "verified":true,
+        "activity":35,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":57198
+     },
+     {
+        "id":1109,
+        "name":"Tiffiny Steffensmeier",
+        "country":{
+           "name":"Pakistan",
+           "code":"pk"
+        },
+        "company":"Whitehall Robbins Labs Divsn",
+        "date":"2018-03-11",
+        "status":"new",
+        "verified":true,
+        "activity":81,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":89147
+     },
+     {
+        "id":1110,
+        "name":"Edna Miceli",
+        "country":{
+           "name":"France",
+           "code":"fr"
+        },
+        "company":"Sampler",
+        "date":"2017-10-15",
+        "status":"renewal",
+        "verified":true,
+        "activity":54,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":41466
+     },
+     {
+        "id":1111,
+        "name":"Sue Kownacki",
+        "country":{
+           "name":"Jamaica",
+           "code":"jm"
+        },
+        "company":"Juno Chefs Incorporated",
+        "date":"2017-03-17",
+        "status":"proposal",
+        "verified":false,
+        "activity":31,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":38918
+     },
+     {
+        "id":1112,
+        "name":"Jesusa Shin",
+        "country":{
+           "name":"Ukraine",
+           "code":"ua"
+        },
+        "company":"Carroccio, A Thomas Esq",
+        "date":"2017-04-06",
+        "status":"renewal",
+        "verified":false,
+        "activity":28,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":11397
+     },
+     {
+        "id":1113,
+        "name":"Rolland Francescon",
+        "country":{
+           "name":"United Kingdom",
+           "code":"gb"
+        },
+        "company":"Stanley, Richard L Esq",
+        "date":"2019-02-03",
+        "status":"qualified",
+        "verified":false,
+        "activity":45,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":40930
+     },
+     {
+        "id":1114,
+        "name":"Pamella Schmierer",
+        "country":{
+           "name":"Belgium",
+           "code":"be"
+        },
+        "company":"K Cs Cstm Mouldings Windows",
+        "date":"2016-09-22",
+        "status":"unqualified",
+        "verified":true,
+        "activity":34,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":40847
+     },
+     {
+        "id":1115,
+        "name":"Glory Kulzer",
+        "country":{
+           "name":"Croatia",
+           "code":"hr"
+        },
+        "company":"Comfort Inn",
+        "date":"2017-09-27",
+        "status":"unqualified",
+        "verified":true,
+        "activity":36,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":27832
+     },
+     {
+        "id":1116,
+        "name":"Shawna Palaspas",
+        "country":{
+           "name":"Estonia",
+           "code":"ee"
+        },
+        "company":"Windsor, James L Esq",
+        "date":"2017-06-25",
+        "status":"unqualified",
+        "verified":true,
+        "activity":69,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":89060
+     },
+     {
+        "id":1117,
+        "name":"Brandon Callaro",
+        "country":{
+           "name":"Romania",
+           "code":"ro"
+        },
+        "company":"Jackson Shields Yeiser",
+        "date":"2016-07-13",
+        "status":"proposal",
+        "verified":true,
+        "activity":55,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":52474
+     },
+     {
+        "id":1118,
+        "name":"Scarlet Cartan",
+        "country":{
+           "name":"Panama",
+           "code":"pa"
+        },
+        "company":"Box, J Calvin Esq",
+        "date":"2018-09-13",
+        "status":"renewal",
+        "verified":false,
+        "activity":1,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":19094
+     },
+     {
+        "id":1119,
+        "name":"Oretha Menter",
+        "country":{
+           "name":"Panama",
+           "code":"pa"
+        },
+        "company":"Custom Engineering Inc",
+        "date":"2017-09-11",
+        "status":"renewal",
+        "verified":false,
+        "activity":8,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":93756
+     },
+     {
+        "id":1120,
+        "name":"Ty Smith",
+        "country":{
+           "name":"United States",
+           "code":"us"
+        },
+        "company":"Bresler Eitel Framg Gllry Ltd",
+        "date":"2019-07-06",
+        "status":"unqualified",
+        "verified":false,
+        "activity":50,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":77388
+     },
+     {
+        "id":1121,
+        "name":"Xuan Rochin",
+        "country":{
+           "name":"Colombia",
+           "code":"co"
+        },
+        "company":"Carol, Drake Sparks Esq",
+        "date":"2018-05-22",
+        "status":"proposal",
+        "verified":true,
+        "activity":77,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":48759
+     },
+     {
+        "id":1122,
+        "name":"Lindsey Dilello",
+        "country":{
+           "name":"Austria",
+           "code":"at"
+        },
+        "company":"Biltmore Investors Bank",
+        "date":"2017-07-18",
+        "status":"renewal",
+        "verified":true,
+        "activity":65,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":37568
+     },
+     {
+        "id":1123,
+        "name":"Devora Perez",
+        "country":{
+           "name":"Uruguay",
+           "code":"uy"
+        },
+        "company":"Desco Equipment Corp",
+        "date":"2017-10-09",
+        "status":"unqualified",
+        "verified":true,
+        "activity":30,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":4477
+     },
+     {
+        "id":1124,
+        "name":"Herman Demesa",
+        "country":{
+           "name":"Paraguay",
+           "code":"py"
+        },
+        "company":"Merlin Electric Co",
+        "date":"2019-05-23",
+        "status":"proposal",
+        "verified":true,
+        "activity":10,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":13764
+     },
+     {
+        "id":1125,
+        "name":"Rory Papasergi",
+        "country":{
+           "name":"Egypt",
+           "code":"eg"
+        },
+        "company":"Bailey Cntl Co Div Babcock",
+        "date":"2019-03-02",
+        "status":"qualified",
+        "verified":false,
+        "activity":22,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":68222
+     },
+     {
+        "id":1126,
+        "name":"Talia Riopelle",
+        "country":{
+           "name":"Guatemala",
+           "code":"gt"
+        },
+        "company":"Ford Brothers Wholesale Inc",
+        "date":"2017-02-18",
+        "status":"new",
+        "verified":false,
+        "activity":69,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":29164
+     },
+     {
+        "id":1127,
+        "name":"Van Shire",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"Cambridge Inn",
+        "date":"2020-05-12",
+        "status":"new",
+        "verified":false,
+        "activity":4,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":61651
+     },
+     {
+        "id":1128,
+        "name":"Lucina Lary",
+        "country":{
+           "name":"Switzerland",
+           "code":"ch"
+        },
+        "company":"Matricciani, Albert J Jr",
+        "date":"2019-11-20",
+        "status":"negotiation",
+        "verified":true,
+        "activity":11,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":79938
+     },
+     {
+        "id":1129,
+        "name":"Bok Isaacs",
+        "country":{
+           "name":"Chile",
+           "code":"cl"
+        },
+        "company":"Nelson Hawaiian Ltd",
+        "date":"2016-11-10",
+        "status":"proposal",
+        "verified":true,
+        "activity":41,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":44037
+     },
+     {
+        "id":1130,
+        "name":"Rolande Spickerman",
+        "country":{
+           "name":"Panama",
+           "code":"pa"
+        },
+        "company":"Neland Travel Agency",
+        "date":"2016-07-11",
+        "status":"renewal",
+        "verified":true,
+        "activity":84,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":89918
+     },
+     {
+        "id":1131,
+        "name":"Howard Paulas",
+        "country":{
+           "name":"Indonesia",
+           "code":"id"
+        },
+        "company":"Asendorf, J Alan Esq",
+        "date":"2017-07-17",
+        "status":"negotiation",
+        "verified":false,
+        "activity":22,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":32372
+     },
+     {
+        "id":1132,
+        "name":"Kimbery Madarang",
+        "country":{
+           "name":"Senegal",
+           "code":"sn"
+        },
+        "company":"Silberman, Arthur L Esq",
+        "date":"2018-08-19",
+        "status":"negotiation",
+        "verified":true,
+        "activity":63,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":46478
+     },
+     {
+        "id":1133,
+        "name":"Thurman Manno",
+        "country":{
+           "name":"Colombia",
+           "code":"co"
+        },
+        "company":"Honey Bee Breeding Genetics &",
+        "date":"2016-05-02",
+        "status":"qualified",
+        "verified":true,
+        "activity":47,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":30674
+     },
+     {
+        "id":1134,
+        "name":"Becky Mirafuentes",
+        "country":{
+           "name":"Serbia",
+           "code":"rs"
+        },
+        "company":"Wells Kravitz Schnitzer",
+        "date":"2018-04-13",
+        "status":"unqualified",
+        "verified":true,
+        "activity":62,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":47714
+     },
+     {
+        "id":1135,
+        "name":"Beatriz Corrington",
+        "country":{
+           "name":"South Africa",
+           "code":"za"
+        },
+        "company":"Prohab Rehabilitation Servs",
+        "date":"2020-01-04",
+        "status":"renewal",
+        "verified":true,
+        "activity":55,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":14307
+     },
+     {
+        "id":1136,
+        "name":"Marti Maybury",
+        "country":{
+           "name":"Thailand",
+           "code":"th"
+        },
+        "company":"Eldridge, Kristin K Esq",
+        "date":"2016-02-05",
+        "status":"unqualified",
+        "verified":false,
+        "activity":3,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":82069
+     },
+     {
+        "id":1137,
+        "name":"Nieves Gotter",
+        "country":{
+           "name":"Latvia",
+           "code":"lv"
+        },
+        "company":"Vlahos, John J Esq",
+        "date":"2017-03-12",
+        "status":"proposal",
+        "verified":false,
+        "activity":3,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":11182
+     },
+     {
+        "id":1138,
+        "name":"Leatha Hagele",
+        "country":{
+           "name":"Ukraine",
+           "code":"ua"
+        },
+        "company":"Ninas Indian Grs & Videos",
+        "date":"2019-03-27",
+        "status":"unqualified",
+        "verified":false,
+        "activity":67,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":17126
+     },
+     {
+        "id":1139,
+        "name":"Valentin Klimek",
+        "country":{
+           "name":"Ivory Coast",
+           "code":"ci"
+        },
+        "company":"Schmid, Gayanne K Esq",
+        "date":"2019-08-06",
+        "status":"unqualified",
+        "verified":true,
+        "activity":14,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":19724
+     },
+     {
+        "id":1140,
+        "name":"Melissa Wiklund",
+        "country":{
+           "name":"Japan",
+           "code":"jp"
+        },
+        "company":"Moapa Valley Federal Credit Un",
+        "date":"2018-03-20",
+        "status":"qualified",
+        "verified":true,
+        "activity":8,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":91888
+     },
+     {
+        "id":1141,
+        "name":"Sheridan Zane",
+        "country":{
+           "name":"Croatia",
+           "code":"hr"
+        },
+        "company":"Kentucky Tennessee Clay Co",
+        "date":"2016-02-15",
+        "status":"qualified",
+        "verified":true,
+        "activity":17,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":15016
+     },
+     {
+        "id":1142,
+        "name":"Bulah Padilla",
+        "country":{
+           "name":"Philippines",
+           "code":"ph"
+        },
+        "company":"Admiral Party Rentals & Sales",
+        "date":"2016-02-10",
+        "status":"proposal",
+        "verified":false,
+        "activity":58,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":23118
+     },
+     {
+        "id":1143,
+        "name":"Audra Kohnert",
+        "country":{
+           "name":"Netherlands",
+           "code":"nl"
+        },
+        "company":"Nelson, Karolyn King Esq",
+        "date":"2019-07-16",
+        "status":"unqualified",
+        "verified":false,
+        "activity":82,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":90560
+     },
+     {
+        "id":1144,
+        "name":"Daren Weirather",
+        "country":{
+           "name":"Israel",
+           "code":"il"
+        },
+        "company":"Panasystems",
+        "date":"2015-07-23",
+        "status":"negotiation",
+        "verified":false,
+        "activity":96,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":34155
+     },
+     {
+        "id":1145,
+        "name":"Fernanda Jillson",
+        "country":{
+           "name":"Mexico",
+           "code":"mx"
+        },
+        "company":"Shank, Edward L Esq",
+        "date":"2017-07-02",
+        "status":"unqualified",
+        "verified":true,
+        "activity":92,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":6350
+     },
+     {
+        "id":1146,
+        "name":"Gearldine Gellinger",
+        "country":{
+           "name":"Egypt",
+           "code":"eg"
+        },
+        "company":"Megibow & Edwards",
+        "date":"2019-08-17",
+        "status":"proposal",
+        "verified":true,
+        "activity":18,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":77641
+     },
+     {
+        "id":1147,
+        "name":"Chau Kitzman",
+        "country":{
+           "name":"Paraguay",
+           "code":"py"
+        },
+        "company":"Benoff, Edward Esq",
+        "date":"2019-07-04",
+        "status":"new",
+        "verified":true,
+        "activity":9,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":43289
+     },
+     {
+        "id":1148,
+        "name":"Theola Frey",
+        "country":{
+           "name":"Vietnam",
+           "code":"vn"
+        },
+        "company":"Woodbridge Free Public Library",
+        "date":"2020-03-14",
+        "status":"unqualified",
+        "verified":true,
+        "activity":44,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":85657
+     },
+     {
+        "id":1149,
+        "name":"Cheryl Haroldson",
+        "country":{
+           "name":"France",
+           "code":"fr"
+        },
+        "company":"New York Life John Thune",
+        "date":"2018-04-03",
+        "status":"new",
+        "verified":false,
+        "activity":55,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":82733
+     },
+     {
+        "id":1150,
+        "name":"Laticia Merced",
+        "country":{
+           "name":"Burkina Faso",
+           "code":"bf"
+        },
+        "company":"Alinabal Inc",
+        "date":"2017-03-04",
+        "status":"unqualified",
+        "verified":false,
+        "activity":21,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":38004
+     },
+     {
+        "id":1151,
+        "name":"Carissa Batman",
+        "country":{
+           "name":"Greece",
+           "code":"gr"
+        },
+        "company":"Poletto, Kim David Esq",
+        "date":"2016-05-05",
+        "status":"negotiation",
+        "verified":true,
+        "activity":91,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":29038
+     },
+     {
+        "id":1152,
+        "name":"Lezlie Craghead",
+        "country":{
+           "name":"Panama",
+           "code":"pa"
+        },
+        "company":"Chang, Carolyn Esq",
+        "date":"2019-05-28",
+        "status":"renewal",
+        "verified":false,
+        "activity":30,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":75123
+     },
+     {
+        "id":1153,
+        "name":"Ozell Shealy",
+        "country":{
+           "name":"Pakistan",
+           "code":"pk"
+        },
+        "company":"Silver Bros Inc",
+        "date":"2016-08-19",
+        "status":"proposal",
+        "verified":true,
+        "activity":14,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":33214
+     },
+     {
+        "id":1154,
+        "name":"Arminda Parvis",
+        "country":{
+           "name":"Indonesia",
+           "code":"id"
+        },
+        "company":"Newtec Inc",
+        "date":"2020-02-09",
+        "status":"proposal",
+        "verified":true,
+        "activity":77,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":80651
+     },
+     {
+        "id":1155,
+        "name":"Reita Leto",
+        "country":{
+           "name":"Belgium",
+           "code":"be"
+        },
+        "company":"Creative Business Systems",
+        "date":"2020-04-03",
+        "status":"unqualified",
+        "verified":true,
+        "activity":58,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":5085
+     },
+     {
+        "id":1156,
+        "name":"Yolando Luczki",
+        "country":{
+           "name":"France",
+           "code":"fr"
+        },
+        "company":"Dal Tile Corporation",
+        "date":"2015-01-27",
+        "status":"renewal",
+        "verified":true,
+        "activity":78,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":93021
+     },
+     {
+        "id":1157,
+        "name":"Lizette Stem",
+        "country":{
+           "name":"Slovakia",
+           "code":"sk"
+        },
+        "company":"Edward S Katz",
+        "date":"2018-08-06",
+        "status":"new",
+        "verified":false,
+        "activity":67,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":37287
+     },
+     {
+        "id":1158,
+        "name":"Gregoria Pawlowicz",
+        "country":{
+           "name":"Egypt",
+           "code":"eg"
+        },
+        "company":"Oh My Goodknits Inc",
+        "date":"2020-02-20",
+        "status":"renewal",
+        "verified":false,
+        "activity":29,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":73070
+     },
+     {
+        "id":1159,
+        "name":"Carin Deleo",
+        "country":{
+           "name":"China",
+           "code":"cn"
+        },
+        "company":"Redeker, Debbie",
+        "date":"2015-05-28",
+        "status":"qualified",
+        "verified":true,
+        "activity":13,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":64422
+     },
+     {
+        "id":1160,
+        "name":"Chantell Maynerich",
+        "country":{
+           "name":"Estonia",
+           "code":"ee"
+        },
+        "company":"Desert Sands Motel",
+        "date":"2016-09-05",
+        "status":"unqualified",
+        "verified":true,
+        "activity":75,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":36826
+     },
+     {
+        "id":1161,
+        "name":"Dierdre Yum",
+        "country":{
+           "name":"Czech Republic",
+           "code":"cz"
+        },
+        "company":"Cummins Southern Plains Inc",
+        "date":"2016-12-20",
+        "status":"negotiation",
+        "verified":true,
+        "activity":1,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":93101
+     },
+     {
+        "id":1162,
+        "name":"Larae Gudroe",
+        "country":{
+           "name":"Slovenia",
+           "code":"si"
+        },
+        "company":"Lehigh Furn Divsn Lehigh",
+        "date":"2015-11-28",
+        "status":"unqualified",
+        "verified":false,
+        "activity":13,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":60177
+     },
+     {
+        "id":1163,
+        "name":"Latrice Tolfree",
+        "country":{
+           "name":"Jamaica",
+           "code":"jm"
+        },
+        "company":"United Van Lines Agent",
+        "date":"2018-11-11",
+        "status":"renewal",
+        "verified":false,
+        "activity":73,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":47198
+     },
+     {
+        "id":1164,
+        "name":"Kerry Theodorov",
+        "country":{
+           "name":"Romania",
+           "code":"ro"
+        },
+        "company":"Capitol Reporters",
+        "date":"2016-11-05",
+        "status":"unqualified",
+        "verified":true,
+        "activity":76,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":71305
+     },
+     {
+        "id":1165,
+        "name":"Dorthy Hidvegi",
+        "country":{
+           "name":"Poland",
+           "code":"pl"
+        },
+        "company":"Kwik Kopy Printing",
+        "date":"2020-08-13",
+        "status":"qualified",
+        "verified":true,
+        "activity":60,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":17526
+     },
+     {
+        "id":1166,
+        "name":"Fannie Lungren",
+        "country":{
+           "name":"Belarus",
+           "code":"by"
+        },
+        "company":"Centro Inc",
+        "date":"2015-07-06",
+        "status":"negotiation",
+        "verified":true,
+        "activity":24,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":16596
+     },
+     {
+        "id":1167,
+        "name":"Evangelina Radde",
+        "country":{
+           "name":"Ivory Coast",
+           "code":"ci"
+        },
+        "company":"Campbell, Jan Esq",
+        "date":"2020-02-25",
+        "status":"unqualified",
+        "verified":true,
+        "activity":93,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":56870
+     },
+     {
+        "id":1168,
+        "name":"Novella Degroot",
+        "country":{
+           "name":"Slovenia",
+           "code":"si"
+        },
+        "company":"Evans, C Kelly Esq",
+        "date":"2017-12-19",
+        "status":"unqualified",
+        "verified":false,
+        "activity":30,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":82928
+     },
+     {
+        "id":1169,
+        "name":"Clay Hoa",
+        "country":{
+           "name":"Paraguay",
+           "code":"py"
+        },
+        "company":"Scat Enterprises",
+        "date":"2016-02-22",
+        "status":"negotiation",
+        "verified":false,
+        "activity":93,
+        "representative":{
+           "name":"Amy Elsner",
+           "image":"amyelsner.png"
+        },
+        "balance":64181
+     },
+     {
+        "id":1170,
+        "name":"Jennifer Fallick",
+        "country":{
+           "name":"Australia",
+           "code":"au"
+        },
+        "company":"Nagle, Daniel J Esq",
+        "date":"2016-12-24",
+        "status":"unqualified",
+        "verified":true,
+        "activity":88,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":30561
+     },
+     {
+        "id":1171,
+        "name":"Irma Wolfgramm",
+        "country":{
+           "name":"Belgium",
+           "code":"be"
+        },
+        "company":"Serendiquity Bed & Breakfast",
+        "date":"2020-10-18",
+        "status":"negotiation",
+        "verified":true,
+        "activity":70,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":24617
+     },
+     {
+        "id":1172,
+        "name":"Eun Coody",
+        "country":{
+           "name":"Taiwan",
+           "code":"tw"
+        },
+        "company":"Ray Carolyne Realty",
+        "date":"2018-02-12",
+        "status":"qualified",
+        "verified":true,
+        "activity":61,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":77860
+     },
+     {
+        "id":1173,
+        "name":"Sylvia Cousey",
+        "country":{
+           "name":"Ireland",
+           "code":"ie"
+        },
+        "company":"Berg, Charles E",
+        "date":"2018-06-10",
+        "status":"unqualified",
+        "verified":false,
+        "activity":91,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":25664
+     },
+     {
+        "id":1174,
+        "name":"Nana Wrinkles",
+        "country":{
+           "name":"Austria",
+           "code":"at"
+        },
+        "company":"Ray, Milbern D",
+        "date":"2017-04-11",
+        "status":"renewal",
+        "verified":true,
+        "activity":98,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":98113
+     },
+     {
+        "id":1175,
+        "name":"Layla Springe",
+        "country":{
+           "name":"South Africa",
+           "code":"za"
+        },
+        "company":"Chadds Ford Winery",
+        "date":"2019-07-27",
+        "status":"unqualified",
+        "verified":true,
+        "activity":97,
+        "representative":{
+           "name":"Ioni Bowcher",
+           "image":"ionibowcher.png"
+        },
+        "balance":14763
+     },
+     {
+        "id":1176,
+        "name":"Joesph Degonia",
+        "country":{
+           "name":"Serbia",
+           "code":"rs"
+        },
+        "company":"A R Packaging",
+        "date":"2020-04-23",
+        "status":"renewal",
+        "verified":true,
+        "activity":56,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":31317
+     },
+     {
+        "id":1177,
+        "name":"Annabelle Boord",
+        "country":{
+           "name":"Guatemala",
+           "code":"gt"
+        },
+        "company":"Corn Popper",
+        "date":"2020-09-16",
+        "status":"proposal",
+        "verified":true,
+        "activity":76,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":30883
+     },
+     {
+        "id":1178,
+        "name":"Stephaine Vinning",
+        "country":{
+           "name":"Australia",
+           "code":"au"
+        },
+        "company":"Birite Foodservice Distr",
+        "date":"2016-05-14",
+        "status":"negotiation",
+        "verified":true,
+        "activity":43,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":93785
+     },
+     {
+        "id":1179,
+        "name":"Nelida Sawchuk",
+        "country":{
+           "name":"South Africa",
+           "code":"za"
+        },
+        "company":"Anchorage Museum Of Hist & Art",
+        "date":"2018-06-22",
+        "status":"qualified",
+        "verified":true,
+        "activity":58,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":68380
+     },
+     {
+        "id":1180,
+        "name":"Marguerita Hiatt",
+        "country":{
+           "name":"United Kingdom",
+           "code":"gb"
+        },
+        "company":"Haber, George D Md",
+        "date":"2018-10-25",
+        "status":"qualified",
+        "verified":false,
+        "activity":72,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":93454
+     },
+     {
+        "id":1181,
+        "name":"Carmela Cookey",
+        "country":{
+           "name":"France",
+           "code":"fr"
+        },
+        "company":"Royal Pontiac Olds Inc",
+        "date":"2018-07-19",
+        "status":"proposal",
+        "verified":false,
+        "activity":24,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":30570
+     },
+     {
+        "id":1182,
+        "name":"Junita Brideau",
+        "country":{
+           "name":"Indonesia",
+           "code":"id"
+        },
+        "company":"Leonards Antiques Inc",
+        "date":"2015-03-15",
+        "status":"proposal",
+        "verified":true,
+        "activity":86,
+        "representative":{
+           "name":"Anna Fali",
+           "image":"annafali.png"
+        },
+        "balance":79506
+     },
+     {
+        "id":1183,
+        "name":"Claribel Varriano",
+        "country":{
+           "name":"Ecuador",
+           "code":"ec"
+        },
+        "company":"Meca",
+        "date":"2017-04-14",
+        "status":"unqualified",
+        "verified":true,
+        "activity":15,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":8654
+     },
+     {
+        "id":1184,
+        "name":"Benton Skursky",
+        "country":{
+           "name":"Iceland",
+           "code":"is"
+        },
+        "company":"Nercon Engineering & Mfg Inc",
+        "date":"2015-02-19",
+        "status":"proposal",
+        "verified":true,
+        "activity":9,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":13368
+     },
+     {
+        "id":1185,
+        "name":"Hillary Skulski",
+        "country":{
+           "name":"France",
+           "code":"fr"
+        },
+        "company":"Replica I",
+        "date":"2016-03-25",
+        "status":"unqualified",
+        "verified":true,
+        "activity":82,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":92631
+     },
+     {
+        "id":1186,
+        "name":"Merilyn Bayless",
+        "country":{
+           "name":"Jamaica",
+           "code":"jm"
+        },
+        "company":"20 20 Printing Inc",
+        "date":"2020-10-13",
+        "status":"unqualified",
+        "verified":true,
+        "activity":13,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":4989
+     },
+     {
+        "id":1187,
+        "name":"Teri Ennaco",
+        "country":{
+           "name":"Pakistan",
+           "code":"pk"
+        },
+        "company":"Publishers Group West",
+        "date":"2019-12-21",
+        "status":"unqualified",
+        "verified":true,
+        "activity":57,
+        "representative":{
+           "name":"Bernardo Dominic",
+           "image":"bernardodominic.png"
+        },
+        "balance":77668
+     },
+     {
+        "id":1188,
+        "name":"Merlyn Lawler",
+        "country":{
+           "name":"Germany",
+           "code":"de"
+        },
+        "company":"Nischwitz, Jeffrey L Esq",
+        "date":"2016-02-26",
+        "status":"renewal",
+        "verified":true,
+        "activity":45,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":3525
+     },
+     {
+        "id":1189,
+        "name":"Georgene Montezuma",
+        "country":{
+           "name":"Senegal",
+           "code":"sn"
+        },
+        "company":"Payne Blades & Wellborn Pa",
+        "date":"2018-10-11",
+        "status":"new",
+        "verified":true,
+        "activity":64,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":45838
+     },
+     {
+        "id":1190,
+        "name":"Jettie Mconnell",
+        "country":{
+           "name":"Denmark",
+           "code":"dk"
+        },
+        "company":"Coldwell Bnkr Wright Real Est",
+        "date":"2015-10-18",
+        "status":"negotiation",
+        "verified":false,
+        "activity":74,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":49148
+     },
+     {
+        "id":1191,
+        "name":"Lemuel Latzke",
+        "country":{
+           "name":"Colombia",
+           "code":"co"
+        },
+        "company":"Computer Repair Service",
+        "date":"2016-02-13",
+        "status":"proposal",
+        "verified":false,
+        "activity":79,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":96709
+     },
+     {
+        "id":1192,
+        "name":"Melodie Knipp",
+        "country":{
+           "name":"Finland",
+           "code":"fi"
+        },
+        "company":"Fleetwood Building Block Inc",
+        "date":"2018-03-08",
+        "status":"negotiation",
+        "verified":false,
+        "activity":19,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":23253
+     },
+     {
+        "id":1193,
+        "name":"Candida Corbley",
+        "country":{
+           "name":"Poland",
+           "code":"pl"
+        },
+        "company":"Colts Neck Medical Assocs Inc",
+        "date":"2017-12-02",
+        "status":"negotiation",
+        "verified":true,
+        "activity":11,
+        "representative":{
+           "name":"Onyama Limba",
+           "image":"onyamalimba.png"
+        },
+        "balance":40836
+     },
+     {
+        "id":1194,
+        "name":"Karan Karpin",
+        "country":{
+           "name":"Estonia",
+           "code":"ee"
+        },
+        "company":"New England Taxidermy",
+        "date":"2019-01-07",
+        "status":"proposal",
+        "verified":true,
+        "activity":4,
+        "representative":{
+           "name":"Stephen Shaw",
+           "image":"stephenshaw.png"
+        },
+        "balance":60719
+     },
+     {
+        "id":1195,
+        "name":"Andra Scheyer",
+        "country":{
+           "name":"Romania",
+           "code":"ro"
+        },
+        "company":"Ludcke, George O Esq",
+        "date":"2016-08-14",
+        "status":"qualified",
+        "verified":true,
+        "activity":62,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":17419
+     },
+     {
+        "id":1196,
+        "name":"Felicidad Poullion",
+        "country":{
+           "name":"Greece",
+           "code":"gr"
+        },
+        "company":"Mccorkle, Tom S Esq",
+        "date":"2016-03-05",
+        "status":"renewal",
+        "verified":true,
+        "activity":64,
+        "representative":{
+           "name":"Elwin Sharvill",
+           "image":"elwinsharvill.png"
+        },
+        "balance":94052
+     },
+     {
+        "id":1197,
+        "name":"Belen Strassner",
+        "country":{
+           "name":"Ivory Coast",
+           "code":"ci"
+        },
+        "company":"Eagle Software Inc",
+        "date":"2015-12-14",
+        "status":"qualified",
+        "verified":true,
+        "activity":91,
+        "representative":{
+           "name":"Xuxue Feng",
+           "image":"xuxuefeng.png"
+        },
+        "balance":54241
+     },
+     {
+        "id":1198,
+        "name":"Gracia Melnyk",
+        "country":{
+           "name":"Costa Rica",
+           "code":"cr"
+        },
+        "company":"Juvenile & Adult Super",
+        "date":"2019-06-01",
+        "status":"unqualified",
+        "verified":true,
+        "activity":40,
+        "representative":{
+           "name":"Asiya Javayant",
+           "image":"asiyajavayant.png"
+        },
+        "balance":87668
+     },
+     {
+        "id":1199,
+        "name":"Jolanda Hanafan",
+        "country":{
+           "name":"Cameroon",
+           "code":"cm"
+        },
+        "company":"Perez, Joseph J Esq",
+        "date":"2015-12-09",
+        "status":"qualified",
+        "verified":true,
+        "activity":27,
+        "representative":{
+           "name":"Ivan Magalhaes",
+           "image":"ivanmagalhaes.png"
+        },
+        "balance":99417
+     }
+  ]
+}
\ No newline at end of file
diff --git a/public/data/icons.json b/public/data/icons.json
new file mode 100644
index 0000000000..4aa204f50d
--- /dev/null
+++ b/public/data/icons.json
@@ -0,0 +1 @@
+{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M93.091 232.729c0-42.56 35.015-77.575 77.575-77.575h133.744l172.25 200.958c8.842 10.317 21.752 16.254 35.34 16.254h341.336c42.555 0 77.575 35.016 77.575 77.576v341.333c0 42.562-35.021 77.575-77.575 77.575h-682.669c-42.56 0-77.575-35.013-77.575-77.575v-558.545zM170.666 62.063c-93.972 0-170.666 76.694-170.666 170.666v558.545c0 93.974 76.694 170.664 170.666 170.664h682.669c93.974 0 170.664-76.69 170.664-170.664v-341.333c0-93.973-76.69-170.666-170.664-170.666h-319.928l-172.25-200.959c-8.843-10.316-21.752-16.254-35.34-16.254h-155.152zM512 434.426c25.706 0 46.545 20.839 46.545 46.545v77.576h77.576c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.546-46.545 46.546h-77.576v77.575c0 25.708-20.839 46.547-46.545 46.547s-46.545-20.838-46.545-46.547v-77.575h-77.576c-25.706 0-46.545-20.839-46.545-46.546s20.839-46.545 46.545-46.545h77.576v-77.576c0-25.706 20.839-46.545 46.545-46.545z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["folder-plus","add","new","create","container"]},"attrs":[{}],"properties":{"order":357,"id":315,"name":"folder-plus","prevSize":24,"code":59909},"setIdx":0,"setId":1,"iconIdx":0},{"icon":{"paths":["M312.166 186.266l82.248-82.248 82.249 82.248c19.516 19.516 51.158 19.516 70.673 0l82.249-82.248 82.248 82.248c19.516 19.516 51.156 19.516 70.671 0l38.159-38.154v727.773l-38.159-38.151c-19.515-19.515-51.155-19.515-70.671 0l-82.248 82.249-82.249-82.249c-19.516-19.515-51.158-19.515-70.673 0l-82.249 82.249-82.248-82.249c-19.516-19.515-51.158-19.515-70.674 0l-38.154 38.151v-727.773l38.154 38.154c19.517 19.516 51.158 19.516 70.674 0zM429.751 14.637c-19.515-19.516-51.157-19.516-70.674 0l-82.248 82.249-76.369-76.37c-31.481-31.482-85.31-9.185-85.31 35.337v912.295c0 44.522 53.829 66.816 85.31 35.335l76.369-76.368 82.248 82.249c19.516 19.515 51.158 19.515 70.674 0l82.248-82.249 82.249 82.249c19.515 19.515 51.157 19.515 70.673 0l82.248-82.249 76.368 76.368c31.481 31.481 85.314 9.187 85.314-35.335v-912.295c0-44.522-53.833-66.819-85.314-35.337l-76.368 76.37-82.248-82.249c-19.515-19.516-51.157-19.516-70.673 0l-82.249 82.249-82.248-82.249zM394.414 291.53c-24.352 0-44.094 19.742-44.094 44.095s19.742 44.094 44.094 44.094h235.171c24.352 0 44.094-19.742 44.094-44.094s-19.742-44.095-44.094-44.095h-235.171zM350.32 512.002c0-24.352 19.742-44.094 44.094-44.094h235.171c24.352 0 44.094 19.742 44.094 44.094s-19.742 44.095-44.094 44.095h-235.171c-24.352 0-44.094-19.742-44.094-44.095zM394.414 644.285c-24.352 0-44.094 19.742-44.094 44.095s19.742 44.094 44.094 44.094h235.171c24.352 0 44.094-19.742 44.094-44.094s-19.742-44.095-44.094-44.095h-235.171z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["receipt","bill","invoice","proof-of-purchase","payment"]},"attrs":[{}],"properties":{"order":358,"id":314,"name":"receipt","prevSize":24,"code":59910},"setIdx":0,"setId":1,"iconIdx":1},{"icon":{"paths":["M561.548 49.548c0-27.365-22.183-49.548-49.548-49.548s-49.548 22.184-49.548 49.548v376.632l-326.173-188.316c-23.699-13.683-54.002-5.563-67.685 18.136s-5.563 54.002 18.136 67.684l326.172 188.316-326.172 188.316c-23.699 13.682-31.819 43.986-18.136 67.684s43.986 31.817 67.685 18.139l326.173-188.32v376.634c0 27.363 22.183 49.547 49.548 49.547s49.548-22.184 49.548-49.547v-376.632l326.173 188.319c23.698 13.678 54.001 5.559 67.686-18.139 13.678-23.698 5.559-54.002-18.139-67.684l-326.173-188.316 326.173-188.316c23.698-13.682 31.817-43.986 18.139-67.684-13.685-23.698-43.988-31.819-67.686-18.136l-326.173 188.315v-376.631z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["asterisk","star","note","reference","highlight"]},"attrs":[{}],"properties":{"order":359,"id":313,"name":"asterisk","prevSize":24,"code":59911},"setIdx":0,"setId":1,"iconIdx":2},{"icon":{"paths":["M85.334 512c0-235.641 191.025-426.666 426.666-426.666 235.644 0 426.664 191.025 426.664 426.666 0 235.644-191.020 426.664-426.664 426.664-235.641 0-426.666-191.020-426.666-426.664zM512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM355.555 426.666c39.273 0 71.111-31.838 71.111-71.111s-31.838-71.111-71.111-71.111c-39.273 0-71.111 31.838-71.111 71.111s31.838 71.111 71.111 71.111zM739.555 355.555c0 39.273-31.837 71.111-71.11 71.111s-71.111-31.838-71.111-71.111c0-39.273 31.838-71.111 71.111-71.111s71.11 31.838 71.11 71.111zM324.179 610.191l-0.208-0.48-0.007-0.017c-8.836-21.718-33.566-32.252-55.365-23.532-21.878 8.752-32.52 33.583-23.769 55.461l39.615-15.846c-39.615 15.846-39.607 15.866-39.598 15.887l0.018 0.045 0.041 0.1 0.097 0.239 0.263 0.636c0.206 0.492 0.475 1.119 0.806 1.872 0.663 1.507 1.581 3.521 2.771 5.972 2.378 4.895 5.858 11.567 10.571 19.422 9.39 15.65 23.894 36.362 44.639 57.107 42.019 42.016 109.295 83.605 207.947 83.605s165.928-41.589 207.948-83.605c20.748-20.746 35.252-41.457 44.636-57.107 4.718-7.855 8.192-14.527 10.569-19.422 1.192-2.451 2.114-4.465 2.772-5.972 0.336-0.753 0.6-1.38 0.812-1.872l0.263-0.636 0.095-0.239 0.037-0.1 0.022-0.045c0.007-0.021 0.015-0.042-39.6-15.887l39.614 15.846c8.755-21.878-1.887-46.71-23.764-55.461-21.804-8.719-46.533 1.814-55.369 23.533l-0.214 0.496c-0.254 0.577-0.724 1.618-1.423 3.057-1.4 2.883-3.698 7.322-6.985 12.8-6.61 11.017-16.995 25.86-31.805 40.671-29.092 29.091-75.594 58.614-147.608 58.614s-118.516-29.523-147.608-58.614c-14.81-14.811-25.196-29.654-31.805-40.671-3.287-5.478-5.585-9.917-6.985-12.8-0.699-1.439-1.169-2.48-1.423-3.057z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["face-smile","happy","joy","pleased","positive"]},"attrs":[{}],"properties":{"order":361,"id":311,"name":"face-smile","prevSize":24,"code":59912},"setIdx":0,"setId":1,"iconIdx":3},{"icon":{"paths":["M1024 512c0 282.836-229.164 512-512 512-52.852 0-103.639-8.053-151.535-22.916 20.852-34.063 52.026-89.805 63.587-134.195 6.194-23.947 31.794-121.805 31.794-121.805 16.723 31.795 65.445 58.836 117.264 58.836 154.426 0 265.7-142.037 265.7-318.553 0-169.084-138.113-295.639-315.661-295.639-220.903 0-338.374 148.232-338.374 309.884 0 75.148 40.052 168.671 103.845 198.4 9.703 4.542 14.864 2.478 17.135-6.813 1.652-7.020 10.323-41.909 14.245-58.013 1.239-5.161 0.62-9.703-3.509-14.658-20.852-25.806-37.781-72.877-37.781-116.852 0-112.929 85.471-222.142 231.226-222.142 125.73 0 213.884 85.678 213.884 208.31 0 138.529-69.987 234.529-161.032 234.529-50.168 0-87.949-41.497-75.768-92.491 14.452-60.903 42.323-126.555 42.323-170.529 0-39.226-21.059-72.052-64.826-72.052-51.407 0-92.697 53.058-92.697 124.284 0 45.42 15.277 75.974 15.277 75.974s-50.58 214.297-59.871 254.35c-10.323 44.178-6.194 106.525-1.858 146.995-190.348-74.533-325.368-259.926-325.368-476.906 0-282.839 229.161-512 512-512 282.836 0 512 229.161 512 512z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pinterest","social","media","image","sharing","hobby"]},"attrs":[{}],"properties":{"order":362,"id":310,"name":"pinterest","prevSize":24,"code":59913},"setIdx":0,"setId":1,"iconIdx":4},{"icon":{"paths":["M160.914 87.771c-40.395 0-73.143 32.748-73.143 73.143v175.543c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v-175.543c0-88.87 72.044-160.914 160.914-160.914h175.543c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886h-175.543zM643.657 43.886c0-24.237 19.648-43.886 43.886-43.886h175.543c88.869 0 160.914 72.044 160.914 160.914v175.543c0 24.237-19.646 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v-175.543c0-40.395-32.746-73.143-73.143-73.143h-175.543c-24.237 0-43.886-19.648-43.886-43.886zM43.886 643.657c24.237 0 43.886 19.648 43.886 43.886v175.543c0 40.397 32.748 73.143 73.143 73.143h175.543c24.237 0 43.886 19.646 43.886 43.886s-19.648 43.886-43.886 43.886h-175.543c-88.87 0-160.914-72.046-160.914-160.914v-175.543c0-24.237 19.648-43.886 43.886-43.886zM980.114 643.657c24.24 0 43.886 19.648 43.886 43.886v175.543c0 88.869-72.046 160.914-160.914 160.914h-175.543c-24.237 0-43.886-19.646-43.886-43.886s19.648-43.886 43.886-43.886h175.543c40.397 0 73.143-32.746 73.143-73.143v-175.543c0-24.237 19.646-43.886 43.886-43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["expand","enlarge","grow","increase","extend"]},"attrs":[{}],"properties":{"order":363,"id":309,"name":"expand","prevSize":24,"code":59914},"setIdx":0,"setId":1,"iconIdx":5},{"icon":{"paths":["M857.644 98.33c6.107-6.117 17.218-10.869 31.532-10.548s26.5 5.661 33.499 12.672c7.534 7.543 12.961 19.896 13.509 33.631 0.549 13.674-3.825 24.167-9.787 30.152l-0.007 0.012-438.252 438.818-74.479 6.772 5.862-72.821 438.122-438.688zM984.788 38.445c-25.578-25.626-60.679-37.668-93.645-38.409-32.973-0.741-69.135 9.762-95.612 36.278v0.006l-449.509 450.089c-7.358 7.368-11.856 17.111-12.692 27.49l-11.336 140.842c-1.039 12.903 3.673 25.606 12.873 34.711s21.952 13.685 34.843 12.513l142.215-12.931c10.233-0.93 19.816-5.423 27.077-12.693l449.538-450.118c26.617-26.691 36.659-62.768 35.343-95.651-1.317-32.83-14.043-67.034-39.095-92.128zM149.942 87.804c-82.566 0-149.938 67.372-149.938 149.938v636.323c0 82.564 67.372 149.936 149.938 149.936h636.322c82.564 0 149.936-67.372 149.936-149.936v-318.163c0-24.237-19.646-43.884-43.886-43.884-24.232 0-43.878 19.648-43.878 43.884v318.163c0 34.092-28.080 62.164-62.171 62.164h-636.322c-34.093 0-62.169-28.072-62.169-62.164v-636.323c0-34.093 28.077-62.169 62.169-62.169h318.16c24.237 0 43.884-19.648 43.884-43.884s-19.648-43.884-43.884-43.884h-318.16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pen-to-square","write","edit","note","document"]},"attrs":[{}],"properties":{"order":364,"id":308,"name":"pen-to-square","prevSize":24,"code":59915},"setIdx":0,"setId":1,"iconIdx":6},{"icon":{"paths":["M383.383 66.188c19.99 1.421 37.156 14.743 43.493 33.755l226.431 679.292 144.696-289.398c8.397-16.786 25.549-27.39 44.317-27.39h132.133c27.363 0 49.547 22.183 49.547 49.548s-22.184 49.548-49.547 49.548h-101.508l-184.499 369.001c-8.962 17.927-27.84 28.687-47.83 27.268-19.99-1.426-37.156-14.746-43.494-33.755l-226.431-679.296-144.698 289.393c-8.393 16.786-25.55 27.39-44.317 27.39h-132.129c-27.365 0-49.548-22.183-49.548-49.548s22.184-49.548 49.548-49.548h101.506l184.499-368.995c8.962-17.924 27.84-28.685 47.83-27.265z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["wave-pulse","frequency","rhythm","beat","vibration","rate"]},"attrs":[{}],"properties":{"order":365,"id":307,"name":"wave-pulse","prevSize":24,"code":59916},"setIdx":0,"setId":1,"iconIdx":7},{"icon":{"paths":["M394.977 0c24.237 0 43.886 19.648 43.886 43.886v212.205l285.775-107.020c22.699-8.5 47.992 3.010 56.491 25.708s-3.013 47.989-25.71 56.49l-316.556 118.548v37.933l285.775-107.020c22.699-8.5 47.992 3.010 56.491 25.708s-3.013 47.989-25.71 56.49l-316.556 118.548v452.467c211.7-22.17 380.344-202.759 380.344-421.939 0-24.237 19.646-43.886 43.886-43.886 24.232 0 43.886 19.648 43.886 43.886 0 282.931-232.060 512-512.001 512-24.237 0-43.886-19.646-43.886-43.886v-465.772l-174.781 65.454c-22.698 8.5-47.989-3.010-56.489-25.708s3.009-47.989 25.707-56.49l205.563-76.981v-37.933l-174.781 65.454c-22.698 8.5-47.989-3.010-56.489-25.708s3.009-47.989 25.707-56.49l205.563-76.981v-245.075c0-24.237 19.648-43.886 43.886-43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["turkish-lira","money","currency","turkey","cash"]},"attrs":[{}],"properties":{"order":366,"id":306,"name":"turkish-lira","prevSize":24,"code":59917},"setIdx":0,"setId":1,"iconIdx":8},{"icon":{"paths":["M512 161.684c44.648 0 80.842-36.195 80.842-80.843s-36.194-80.842-80.842-80.842c-44.648 0-80.842 36.194-80.842 80.842s36.194 80.843 80.842 80.843zM161.684 512c0 44.648-36.195 80.842-80.843 80.842s-80.842-36.194-80.842-80.842c0-44.648 36.194-80.842 80.842-80.842s80.843 36.194 80.843 80.842zM1024 512c0 44.648-36.191 80.842-80.845 80.842-44.646 0-80.837-36.194-80.837-80.842s36.191-80.842 80.837-80.842c44.654 0 80.845 36.194 80.845 80.842zM592.842 943.155c0 44.654-36.195 80.845-80.843 80.845s-80.842-36.191-80.842-80.845c0-44.646 36.194-80.837 80.842-80.837s80.843 36.191 80.843 80.837zM149.971 264.301c31.571 31.571 82.757 31.571 114.328 0s31.571-82.757 0-114.328c-31.571-31.571-82.757-31.571-114.328 0s-31.571 82.757 0 114.328zM874.028 874.028c-31.568 31.568-82.754 31.568-114.33 0-31.568-31.576-31.568-82.761 0-114.33 31.576-31.572 82.761-31.572 114.33 0 31.568 31.568 31.568 82.754 0 114.33zM149.971 874.028c31.571 31.568 82.757 31.568 114.328 0 31.571-31.576 31.571-82.761 0-114.33-31.571-31.572-82.757-31.572-114.328 0-31.571 31.568-31.571 82.754 0 114.33z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["spinner-dotted","loading","processing","buffering"]},"attrs":[{}],"properties":{"order":367,"id":305,"name":"spinner-dotted","prevSize":24,"code":59918},"setIdx":0,"setId":1,"iconIdx":9},{"icon":{"paths":["M405.716 365.683l106.284-170.053 106.284 170.053c15.364 24.584 48.35 30.986 71.796 13.934l228.244-165.994-87.669 460.255c-1.324 6.935-7.387 11.952-14.446 11.952h-608.418c-7.060 0-13.123-5.018-14.444-11.952l-87.668-460.255 228.242 165.994c23.445 17.051 56.431 10.65 71.796-13.934zM554.392 97.005c-19.58-31.328-65.205-31.328-84.784 0l-116.966 187.145-273.186-198.68c-36.638-26.646-86.988 5.28-78.511 49.783l105.739 555.132c9.247 48.541 51.689 83.664 101.105 83.664h608.418c49.415 0 91.86-35.123 101.105-83.664l105.743-555.132c8.477-44.503-41.874-76.43-78.512-49.783l-273.187 198.68-116.966-187.145zM159.122 862.267c-24.361 0-44.11 19.749-44.11 44.112s19.749 44.112 44.11 44.112h705.756c24.364 0 44.112-19.749 44.112-44.112s-19.749-44.112-44.112-44.112h-705.756z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["crown","royalty","king","queen","leader"]},"attrs":[{}],"properties":{"order":368,"id":304,"name":"crown","prevSize":24,"code":59919},"setIdx":0,"setId":1,"iconIdx":10},{"icon":{"paths":["M512 85.334c-235.641 0-426.666 191.025-426.666 426.666 0 235.644 191.025 426.664 426.666 426.664 235.644 0 426.664-191.020 426.664-426.664 0-235.641-191.020-426.666-426.664-426.666zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512c0 282.77-229.23 512-512 512s-512-229.23-512-512zM398.222 298.666c23.564 0 42.667 19.103 42.667 42.667v341.333c0 23.564-19.103 42.667-42.667 42.667s-42.666-19.103-42.666-42.667v-341.333c0-23.564 19.103-42.667 42.666-42.667zM668.445 341.334c0-23.564-19.103-42.667-42.666-42.667s-42.667 19.103-42.667 42.667v341.333c0 23.564 19.103 42.667 42.667 42.667s42.666-19.103 42.666-42.667v-341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pause-circle","halt","wait","stop","break"]},"attrs":[{}],"properties":{"order":369,"id":303,"name":"pause-circle","prevSize":24,"code":59920},"setIdx":0,"setId":1,"iconIdx":11},{"icon":{"paths":["M466.206 14.266c28.828-14.414 62.76-14.414 91.588 0l409.601 204.797c34.692 17.346 56.605 52.803 56.605 91.589v666.010c0 24.24-19.646 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-666.010c0-5.541-3.131-10.606-8.090-13.084l-409.597-204.797c-4.118-2.060-8.966-2.060-13.084 0l-409.6 204.797c-4.956 2.477-8.087 7.543-8.087 13.084v666.010c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-666.010c0-38.786 21.914-74.244 56.606-91.589l409.6-204.797zM175.543 508.545c0-56.554 45.846-102.4 102.4-102.4h468.114c56.554 0 102.4 45.846 102.4 102.4v409.602c0 56.554-45.846 102.4-102.4 102.4h-468.114c-56.554 0-102.4-45.846-102.4-102.4v-409.602zM277.943 493.917c-8.079 0-14.629 6.549-14.629 14.629v73.143h497.371v-73.143c0-8.079-6.546-14.629-14.629-14.629h-468.114zM760.686 669.46h-497.371v87.774h497.371v-87.774zM760.686 845.005h-497.371v73.143c0 8.075 6.549 14.629 14.629 14.629h468.114c8.082 0 14.629-6.554 14.629-14.629v-73.143z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["warehouse","storage","inventory","goods","distribution"]},"attrs":[{}],"properties":{"order":370,"id":302,"name":"warehouse","prevSize":24,"code":59921},"setIdx":0,"setId":1,"iconIdx":12},{"icon":{"paths":["M102.4 0c-56.554 0-102.4 45.846-102.4 102.4v351.086c0 56.554 45.846 102.4 102.4 102.4h234.057c56.554 0 102.4-45.846 102.4-102.4v-351.086c0-56.554-45.846-102.4-102.4-102.4h-234.057zM87.771 102.4c0-8.079 6.549-14.629 14.629-14.629h234.057c8.079 0 14.629 6.549 14.629 14.629v351.086c0 8.079-6.549 14.629-14.629 14.629h-234.057c-8.079 0-14.629-6.549-14.629-14.629v-351.086zM102.4 702.171c-56.554 0-102.4 45.846-102.4 102.4v117.029c0 56.554 45.846 102.4 102.4 102.4h234.057c56.554 0 102.4-45.846 102.4-102.4v-117.029c0-56.554-45.846-102.4-102.4-102.4h-234.057zM87.771 804.571c0-8.082 6.549-14.629 14.629-14.629h234.057c8.079 0 14.629 6.546 14.629 14.629v117.029c0 8.082-6.549 14.629-14.629 14.629h-234.057c-8.079 0-14.629-6.546-14.629-14.629v-117.029zM585.143 570.514c0-56.554 45.846-102.4 102.4-102.4h234.057c56.554 0 102.4 45.846 102.4 102.4v351.086c0 56.554-45.846 102.4-102.4 102.4h-234.057c-56.554 0-102.4-45.846-102.4-102.4v-351.086zM687.543 555.886c-8.079 0-14.629 6.549-14.629 14.629v351.086c0 8.082 6.549 14.629 14.629 14.629h234.057c8.082 0 14.629-6.546 14.629-14.629v-351.086c0-8.079-6.546-14.629-14.629-14.629h-234.057zM687.543 0c-56.554 0-102.4 45.846-102.4 102.4v117.029c0 56.554 45.846 102.4 102.4 102.4h234.057c56.554 0 102.4-45.846 102.4-102.4v-117.029c0-56.554-45.846-102.4-102.4-102.4h-234.057zM672.914 102.4c0-8.079 6.549-14.629 14.629-14.629h234.057c8.082 0 14.629 6.549 14.629 14.629v117.029c0 8.079-6.546 14.629-14.629 14.629h-234.057c-8.079 0-14.629-6.549-14.629-14.629v-117.029z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["objects-column","items","elements","organization","grid","layout"]},"attrs":[{}],"properties":{"order":371,"id":301,"name":"objects-column","prevSize":24,"code":59922},"setIdx":0,"setId":1,"iconIdx":13},{"icon":{"paths":["M466.54 87.771c-31.446 0-56.939 25.492-56.939 56.939v85.746h204.8v-85.746c0-31.446-25.492-56.939-56.94-56.939h-90.922zM695.398 100.825h50.659c88.869 0 160.914 72.044 160.914 160.914v601.347c0 88.869-72.046 160.914-160.914 160.914h-468.114c-88.871 0-160.914-72.046-160.914-160.914v-601.347c0-88.87 72.044-160.914 160.914-160.914h50.659c18.586-58.466 73.314-100.825 137.936-100.825h90.922c64.622 0 119.352 42.358 137.936 100.825zM702.172 188.596v79.895c0 27.469-22.268 49.737-49.737 49.737h-280.869c-27.47 0-49.737-22.268-49.737-49.737v-79.895h-43.886c-40.396 0-73.143 32.748-73.143 73.143v601.347c0 40.397 32.747 73.143 73.143 73.143h468.114c40.397 0 73.143-32.746 73.143-73.143v-601.347c0-40.395-32.746-73.143-73.143-73.143h-43.885z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["clipboard","paste","copy","cut","notes"]},"attrs":[{}],"properties":{"order":372,"id":300,"name":"clipboard","prevSize":24,"code":59923},"setIdx":0,"setId":1,"iconIdx":14},{"icon":{"paths":["M85.334 512c0-235.641 191.025-426.666 426.666-426.666 235.644 0 426.664 191.025 426.664 426.666 0 235.644-191.020 426.664-426.664 426.664-235.641 0-426.666-191.020-426.666-426.664zM512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM398.222 715.992c0 50.684 61.278 76.065 97.115 40.225l203.992-203.99c22.216-22.216 22.216-58.236 0-80.453l-203.992-203.992c-35.838-35.838-97.115-10.456-97.115 40.227v407.983z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["play-circle","start","go","action","play"]},"attrs":[{}],"properties":{"order":373,"id":299,"name":"play-circle","prevSize":24,"code":59924},"setIdx":0,"setId":1,"iconIdx":15},{"icon":{"paths":["M511.999 78.769c-152.261 0-275.692 123.432-275.692 275.692s123.431 275.692 275.692 275.692c152.261 0 275.691-123.431 275.691-275.692s-123.43-275.692-275.691-275.692zM157.538 354.461c0-195.763 158.698-354.461 354.461-354.461s354.458 158.698 354.458 354.461c0 182.452-137.845 332.707-315.074 352.298v107.189h118.154c21.751 0 39.385 17.635 39.385 39.387s-17.633 39.38-39.385 39.38h-118.154v91.897c0 21.753-17.633 39.387-39.385 39.387s-39.385-17.635-39.385-39.387v-91.897h-118.154c-21.752 0-39.385-17.627-39.385-39.38s17.633-39.387 39.385-39.387h118.154v-107.189c-177.229-19.591-315.077-169.846-315.077-352.298z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["venus","female","women","gender"]},"attrs":[{}],"properties":{"order":374,"id":298,"name":"venus","prevSize":24,"code":59925},"setIdx":0,"setId":1,"iconIdx":16},{"icon":{"paths":["M43.886 29.259c-24.237 0-43.886 19.648-43.886 43.885s19.648 43.886 43.886 43.886h80.402l110.477 607.622c3.794 20.864 21.968 36.034 43.178 36.034h585.143c20.136 0 37.691-13.707 42.576-33.241l117.029-468.114c3.277-13.11 0.329-26.999-7.987-37.651s-21.072-16.878-34.589-16.878h-750.657l-25.365-139.507c-3.794-20.867-21.968-36.035-43.178-36.035h-117.029zM314.568 672.916l-69.153-380.343h678.489l-95.086 380.343h-514.25zM461.678 438.859c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h234.057c24.237 0 43.885-19.648 43.885-43.886s-19.648-43.886-43.885-43.886h-234.057zM380.343 819.2c-48.475 0-87.771 39.3-87.771 87.771 0 48.479 39.297 87.771 87.771 87.771s87.771-39.292 87.771-87.771c0-48.472-39.297-87.771-87.771-87.771zM672.914 906.971c0-48.472 39.296-87.771 87.771-87.771 48.472 0 87.771 39.3 87.771 87.771 0 48.479-39.3 87.771-87.771 87.771-48.475 0-87.771-39.292-87.771-87.771z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-minus","remove","purchase"]},"attrs":[{}],"properties":{"order":387,"id":297,"name":"cart-minus","prevSize":24,"code":59926},"setIdx":0,"setId":1,"iconIdx":17},{"icon":{"paths":["M277.944 0c-88.603 0-160.914 72.311-160.914 160.914v702.171c0 88.605 72.311 160.914 160.914 160.914h468.114c88.605 0 160.914-72.309 160.914-160.914v-497.371c0-11.639-4.623-22.802-12.851-31.032l-321.831-321.829c-8.23-8.23-19.392-12.854-31.032-12.854h-263.314zM204.801 160.914c0-40.128 33.014-73.143 73.143-73.143h219.429v277.943c0 24.237 19.648 43.886 43.886 43.886h277.942v453.486c0 40.126-33.017 73.143-73.143 73.143h-468.114c-40.128 0-73.143-33.017-73.143-73.143v-702.171zM757.138 321.829h-171.995v-171.993l171.995 171.993zM702.172 687.543c0 24.237-19.648 43.886-43.886 43.886h-102.4v102.4c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-102.4h-102.4c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886h102.4v-102.4c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v102.4h102.4c24.237 0 43.886 19.648 43.886 43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-plus","add","document","new","create"]},"attrs":[{}],"properties":{"order":386,"id":296,"name":"file-plus","prevSize":24,"code":59927},"setIdx":0,"setId":1,"iconIdx":18},{"icon":{"paths":["M277.943 0c24.237 0 43.886 19.648 43.886 43.886v73.143h146.286v-73.143c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v73.143h146.286v-73.143c0-24.237 19.648-43.886 43.886-43.886 24.24 0 43.886 19.648 43.886 43.886v73.143h14.629c56.554 0 102.4 45.846 102.4 102.4v14.629h73.143c24.24 0 43.886 19.648 43.886 43.886s-19.646 43.886-43.886 43.886h-73.143v146.286h73.143c24.24 0 43.886 19.648 43.886 43.886s-19.646 43.886-43.886 43.886h-73.143v146.286h73.143c24.24 0 43.886 19.648 43.886 43.886 0 24.24-19.646 43.886-43.886 43.886h-73.143v14.629c0 56.554-45.846 102.4-102.4 102.4h-14.629v73.143c0 24.24-19.646 43.886-43.886 43.886-24.237 0-43.886-19.646-43.886-43.886v-73.143h-146.286v73.143c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-73.143h-146.286v73.143c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-73.143h-14.629c-56.554 0-102.4-45.846-102.4-102.4v-14.629h-73.143c-24.237 0-43.886-19.646-43.886-43.886 0-24.237 19.648-43.886 43.886-43.886h73.143v-146.286h-73.143c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886h73.143v-146.286h-73.143c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886h73.143v-14.629c0-56.554 45.846-102.4 102.4-102.4h14.629v-73.143c0-24.237 19.648-43.886 43.886-43.886zM219.429 204.8c-8.079 0-14.629 6.549-14.629 14.629v585.143c0 8.082 6.549 14.629 14.629 14.629h585.143c8.082 0 14.629-6.546 14.629-14.629v-585.143c0-8.079-6.546-14.629-14.629-14.629h-585.143z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microchip","technology","circuit","processor","component"]},"attrs":[{}],"properties":{"order":385,"id":295,"name":"microchip","prevSize":24,"code":59928},"setIdx":0,"setId":1,"iconIdx":19},{"icon":{"paths":["M493.181 201.216h74.753v219.136h-74.753zM698.623 201.216h74.753v219.136h-74.753zM250.623 0l-186.623 182.784v658.432h223.739v182.784l187.146-182.784h148.985l336.131-329.216v-512zM885.248 475.648l-148.985 145.92h-149.51l-130.688 128v-128h-168.327v-548.352h597.509v402.432z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["twitch","live","streaming","video","game","broadcast"]},"attrs":[{}],"properties":{"order":384,"id":294,"name":"twitch","prevSize":24,"code":59929},"setIdx":0,"setId":1,"iconIdx":20},{"icon":{"paths":["M518.376 136.724c-3.965-2.203-8.786-2.203-12.751 0l-447.107 248.392c-19.014 10.563-42.991 3.713-53.554-15.301s-3.713-42.991 15.301-53.554l447.107-248.393c27.755-15.419 61.502-15.419 89.257 0l447.103 248.393c19.017 10.563 25.871 34.54 15.301 53.554-10.562 19.013-34.538 25.864-53.548 15.301l-447.11-248.392zM367.592 350.689c0-21.751 17.633-39.385 39.384-39.385h210.049c21.751 0 39.384 17.633 39.384 39.385s-17.633 39.384-39.384 39.384h-210.049c-21.751 0-39.384-17.633-39.384-39.384zM196.928 468.841c21.751 0 39.385 17.633 39.385 39.384v262.562c0 21.753-17.633 39.38-39.385 39.38s-39.384-17.627-39.384-39.38v-262.562c0-21.751 17.633-39.384 39.384-39.384zM406.976 468.841c21.751 0 39.384 17.633 39.384 39.384v262.562c0 21.753-17.633 39.38-39.384 39.38s-39.385-17.627-39.385-39.38v-262.562c0-21.751 17.633-39.384 39.385-39.384zM617.024 468.841c21.751 0 39.385 17.633 39.385 39.384v262.562c0 21.753-17.633 39.38-39.385 39.38s-39.384-17.627-39.384-39.38v-262.562c0-21.751 17.633-39.384 39.384-39.384zM827.070 468.841c21.753 0 39.387 17.633 39.387 39.384v262.562c0 21.753-17.635 39.38-39.387 39.38-21.745 0-39.38-17.627-39.38-39.38v-262.562c0-21.751 17.635-39.384 39.38-39.384zM105.032 928.322c0-21.753 17.633-39.387 39.384-39.387h735.171c21.753 0 39.38 17.635 39.38 39.387s-17.627 39.38-39.38 39.38h-735.171c-21.751 0-39.384-17.627-39.384-39.38z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["building-columns","architecture","structure","pillar","bank"]},"attrs":[{}],"properties":{"order":383,"id":293,"name":"building-columns","prevSize":24,"code":59930},"setIdx":0,"setId":1,"iconIdx":21},{"icon":{"paths":["M117.029 160.914c0-88.603 72.311-160.914 160.914-160.914h263.314c11.639 0 22.802 4.624 31.032 12.854l321.831 321.829c8.229 8.23 12.851 19.392 12.851 31.032v497.371c0 88.605-72.309 160.914-160.914 160.914h-468.114c-88.603 0-160.914-72.309-160.914-160.914v-702.171zM277.944 87.771c-40.128 0-73.143 33.014-73.143 73.143v702.171c0 40.126 33.014 73.143 73.143 73.143h468.114c40.126 0 73.143-33.017 73.143-73.143v-453.486h-277.942c-24.237 0-43.886-19.648-43.886-43.886v-277.943h-219.429zM585.144 149.835v171.993h171.995l-171.995-171.993zM703.947 572.289c17.138-17.138 17.138-44.925 0-62.063s-44.925-17.139-62.064 0l-203.025 203.025-56.74-56.739c-17.138-17.139-44.925-17.139-62.064 0s-17.138 44.925 0 62.063l87.771 87.774c17.139 17.137 44.926 17.137 62.064 0l234.057-234.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-check","document","confirmed","approve","verified","correct"]},"attrs":[{}],"properties":{"order":382,"id":292,"name":"file-check","prevSize":24,"code":59931},"setIdx":0,"setId":1,"iconIdx":22},{"icon":{"paths":["M321.829 43.886c0-24.237-19.648-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v73.143h-14.629c-56.554 0-102.4 45.846-102.4 102.4v14.629h-73.143c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h73.143v146.286h-73.143c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h73.143v146.286h-73.143c-24.237 0-43.886 19.648-43.886 43.886 0 24.24 19.648 43.886 43.886 43.886h73.143v14.629c0 56.554 45.846 102.4 102.4 102.4h14.629v73.143c0 24.24 19.648 43.886 43.886 43.886s43.886-19.646 43.886-43.886v-73.143h146.286v73.143c0 24.24 19.648 43.886 43.886 43.886s43.886-19.646 43.886-43.886v-73.143h146.286v73.143c0 24.24 19.648 43.886 43.886 43.886 24.24 0 43.886-19.646 43.886-43.886v-73.143h14.629c56.554 0 102.4-45.846 102.4-102.4v-14.629h73.143c24.24 0 43.886-19.646 43.886-43.886 0-24.237-19.646-43.886-43.886-43.886h-73.143v-146.286h73.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-73.143v-146.286h73.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-73.143v-14.629c0-56.554-45.846-102.4-102.4-102.4h-14.629v-73.143c0-24.237-19.646-43.886-43.886-43.886-24.237 0-43.886 19.648-43.886 43.886v73.143h-146.286v-73.143c0-24.237-19.648-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v73.143h-146.286v-73.143zM204.8 219.429c0-8.079 6.549-14.629 14.629-14.629h585.143c8.082 0 14.629 6.549 14.629 14.629v585.143c0 8.082-6.546 14.629-14.629 14.629h-585.143c-8.079 0-14.629-6.546-14.629-14.629v-585.143zM500.217 673.094c8.136 22.831 33.241 34.743 56.071 26.606s34.743-33.241 26.606-56.071l-99.474-279.115-0.199-0.557-0.214-0.552c-8.898-22.987-30.185-41.648-58.188-41.648s-49.29 18.662-58.188 41.648l-99.887 280.223c-8.137 22.831 3.775 47.935 26.606 56.072s47.935-3.775 56.071-26.606l16.097-45.166h118.6l16.097 45.166zM424.82 461.539l28.019 78.618h-56.038l28.020-78.618zM643.657 365.643c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v292.721c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v-292.721z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microchip-ai","technology","smart","artificial-intelligence"]},"attrs":[{}],"properties":{"order":381,"id":291,"name":"microchip-ai","prevSize":24,"code":59932},"setIdx":0,"setId":1,"iconIdx":23},{"icon":{"paths":["M266.334 91.953c-2.401 2.216-3.019 4.342-3.019 5.946v324.079c0 81.902 22.6 152.134 63.392 201.052 39.926 47.879 100.327 79.141 185.294 79.141s145.368-31.263 185.294-79.141c40.791-48.918 63.392-119.15 63.392-201.052v-324.079c0-1.604-0.622-3.73-3.021-5.946-2.458-2.27-6.451-4.182-11.608-4.182h-468.114c-5.156 0-9.149 1.911-11.609 4.182zM175.543 97.899c0-57.309 49.219-97.899 102.4-97.899h468.114c53.182 0 102.4 40.59 102.4 97.899v19.13h73.143c56.554 0 102.4 45.846 102.4 102.4v117.029c0 111.657-89.329 200.19-193.521 216.67-13.736 46.838-35.482 89.784-65.777 126.115-49.874 59.807-120.535 98.734-208.816 108.367v148.619h131.657c24.237 0 43.886 19.646 43.886 43.886s-19.648 43.886-43.886 43.886h-351.086c-24.237 0-43.886-19.646-43.886-43.886s19.648-43.886 43.886-43.886h131.657v-148.619c-88.281-9.633-158.942-48.56-208.817-108.367-30.296-36.331-52.043-79.277-65.772-126.115-104.192-16.481-193.525-105.013-193.525-216.67v-117.029c0-56.554 45.846-102.4 102.4-102.4h73.143v-19.13zM175.543 204.8h-73.143c-8.079 0-14.629 6.549-14.629 14.629v117.029c0 53.232 37.7 101.709 89.045 121.826-0.851-11.995-1.273-24.109-1.273-36.305v-217.178zM847.184 458.283c51.346-20.117 89.044-68.594 89.044-121.826v-117.029c0-8.079-6.546-14.629-14.629-14.629h-73.143v217.178c0 12.197-0.424 24.31-1.273 36.305z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["trophy","award","prize","win","victory"]},"attrs":[{}],"properties":{"order":380,"id":290,"name":"trophy","prevSize":24,"code":59933},"setIdx":0,"setId":1,"iconIdx":24},{"icon":{"paths":["M56.889 56.893c-31.419 0-56.889 25.47-56.889 56.889v796.445c0 31.422 25.47 56.891 56.889 56.891s56.889-25.468 56.889-56.891v-796.445c0-31.419-25.471-56.889-56.889-56.889zM227.555 56.893c-15.71 0-28.445 12.735-28.445 28.444v853.334c0 15.711 12.735 28.445 28.445 28.445s28.445-12.734 28.445-28.445v-853.334c0-15.709-12.735-28.444-28.445-28.444zM369.778 56.893c-15.71 0-28.445 12.735-28.445 28.444v853.334c0 15.711 12.735 28.445 28.445 28.445s28.444-12.734 28.444-28.445v-853.334c0-15.709-12.735-28.444-28.444-28.444zM938.664 99.56c0-23.564 19.105-42.667 42.672-42.667 23.559 0 42.664 19.103 42.664 42.667v824.885c0 23.567-19.105 42.672-42.664 42.672-23.567 0-42.672-19.105-42.672-42.672v-824.885zM540.445 113.782c0-31.419 25.47-56.889 56.889-56.889s56.888 25.47 56.888 56.889v796.445c0 31.422-25.47 56.891-56.888 56.891s-56.889-25.468-56.889-56.891v-796.445zM796.445 56.893c-31.422 0-56.891 25.47-56.891 56.889v796.445c0 31.422 25.468 56.891 56.891 56.891 31.415 0 56.891-25.468 56.891-56.891v-796.445c0-31.419-25.476-56.889-56.891-56.889z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["barcode","product","code","scan","retail","price"]},"attrs":[{}],"properties":{"order":379,"id":289,"name":"barcode","prevSize":24,"code":59934},"setIdx":0,"setId":1,"iconIdx":25},{"icon":{"paths":["M117.029 160.914c0-88.603 72.311-160.914 160.914-160.914h263.314c11.639 0 22.802 4.624 31.032 12.854l321.831 321.829c8.229 8.23 12.851 19.392 12.851 31.032v497.371c0 88.605-72.309 160.914-160.914 160.914h-468.114c-88.603 0-160.914-72.309-160.914-160.914v-702.171zM277.944 87.771c-40.128 0-73.143 33.014-73.143 73.143v702.171c0 40.126 33.014 73.143 73.143 73.143h468.114c40.126 0 73.143-33.017 73.143-73.143v-453.486h-277.942c-24.237 0-43.886-19.648-43.886-43.886v-277.943h-219.429zM585.144 149.835v171.993h171.995l-171.995-171.993zM543.032 510.226c-17.138-17.139-44.925-17.139-62.064 0l-117.029 117.029c-17.138 17.138-17.138 44.925 0 62.063s44.926 17.139 62.064 0l42.111-42.111v186.622c0 24.24 19.648 43.886 43.886 43.886s43.886-19.646 43.886-43.886v-186.622l42.111 42.111c17.139 17.139 44.926 17.139 62.064 0s17.138-44.925 0-62.063l-117.029-117.029z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-arrow-up","upload","send","transfer"]},"attrs":[{}],"properties":{"order":378,"id":288,"name":"file-arrow-up","prevSize":24,"code":59935},"setIdx":0,"setId":1,"iconIdx":26},{"icon":{"paths":["M722.823 45.176c0-24.95 20.228-45.176 45.177-45.176h210.827c24.949 0 45.173 20.226 45.173 45.176v210.824c0 24.95-20.224 45.177-45.173 45.177-24.956 0-45.18-20.226-45.18-45.177v-100.825l-207.86 210.37c54.698 69.238 87.386 156.767 87.386 251.867 0 224.55-182.032 406.588-406.585 406.588s-406.588-182.038-406.588-406.588c0-224.553 182.036-406.589 406.588-406.589 96.862 0 185.864 33.915 255.689 90.446l208.401-210.917h-102.678c-24.949 0-45.177-20.226-45.177-45.176zM406.588 301.177c-174.652 0-316.235 141.583-316.235 316.235s141.583 316.235 316.235 316.235c174.652 0 316.235-141.583 316.235-316.235 0-86.495-34.665-164.804-90.965-221.942-57.405-58.26-137.088-94.294-225.27-94.294z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["mars","male","man","men","gender"]},"attrs":[{}],"properties":{"order":377,"id":287,"name":"mars","prevSize":24,"code":59936},"setIdx":0,"setId":1,"iconIdx":27},{"icon":{"paths":["M960.044 419.841c-88.093 0.189-174.014-27.309-245.625-78.608v357.635c-0.020 66.235-20.263 130.886-58.023 185.305s-91.234 96.015-153.272 119.216c-62.038 23.208-129.682 26.917-193.886 10.635-64.203-16.289-121.905-51.785-165.388-101.749s-70.673-112.011-77.935-177.847c-7.262-65.838 5.751-132.323 37.298-190.563s80.125-105.46 139.236-135.344c59.111-29.884 125.937-41.008 191.541-31.883v179.818c-29.997-9.443-62.212-9.167-92.043 0.789s-55.754 29.083-74.067 54.65c-18.313 25.567-28.080 56.266-27.906 87.714s10.279 62.035 28.875 87.401c18.594 25.359 44.727 44.2 74.666 53.826s62.155 9.545 92.047-0.227c29.891-9.772 55.93-28.745 74.399-54.199s28.423-56.093 28.441-87.542v-698.868h176.017c-0.099 14.887 1.173 29.751 3.801 44.404 6.121 32.663 18.841 63.735 37.375 91.317s42.503 51.094 70.437 69.1c39.76 26.259 86.367 40.241 134.012 40.204v174.817z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["tiktok","social","media","video","app","music"]},"attrs":[{}],"properties":{"order":376,"id":286,"name":"tiktok","prevSize":24,"code":59937},"setIdx":0,"setId":1,"iconIdx":28},{"icon":{"paths":["M636.123 0c-25.707 0-46.546 20.839-46.546 46.545s20.839 46.546 46.546 46.546h228.959l-292.904 292.905c-18.177 18.177-18.177 47.648 0 65.826s47.648 18.177 65.826 0l292.907-292.906v228.963c0 25.706 20.838 46.545 46.548 46.545 25.702 0 46.541-20.839 46.541-46.545v-341.333c0-25.706-20.838-46.545-46.541-46.545h-341.336zM387.879 1024c25.706 0 46.545-20.838 46.545-46.548 0-25.702-20.839-46.541-46.545-46.541h-228.963l292.906-292.908c18.177-18.177 18.177-47.647 0-65.825s-47.648-18.177-65.825 0l-292.906 292.904v-228.961c0-25.706-20.839-46.545-46.546-46.545s-46.545 20.839-46.545 46.545v341.331c0 25.71 20.839 46.548 46.545 46.548h341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-right-and-arrow-down-left-from-center","split","diverge","separate"]},"attrs":[{}],"properties":{"order":375,"id":285,"name":"arrow-up-right-and-arrow-down-left-from-center","prevSize":24,"code":59938},"setIdx":0,"setId":1,"iconIdx":29},{"icon":{"paths":["M797.93 521.6l-285.929 185.6-286.117-185.6 286.117-521.6 285.929 521.6zM512.001 766.8l-286.117-185.601 286.117 442.8 286.119-442.8-286.119 185.601z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["ethereum","cryptocurrency","blockchain","digital","currency"]},"attrs":[{}],"properties":{"order":356,"id":284,"name":"ethereum","prevSize":24,"code":59939},"setIdx":0,"setId":1,"iconIdx":30},{"icon":{"paths":["M250.46 221.203c17.139-17.138 17.139-44.925 0-62.063s-44.925-17.139-62.063 0l-85.997 85.996-27.483-27.482c-17.138-17.139-44.925-17.139-62.063 0s-17.138 44.925 0 62.063l58.514 58.514c17.138 17.139 44.925 17.139 62.063 0l117.029-117.029zM394.971 234.057c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h585.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-585.143zM394.971 468.114c-24.237 0-43.886 19.648-43.886 43.886s19.648 43.886 43.886 43.886h585.143c24.24 0 43.886-19.648 43.886-43.886s-19.646-43.886-43.886-43.886h-585.143zM980.114 819.2h-577.829c-24.237 0-43.886-19.646-43.886-43.886s19.648-43.886 43.886-43.886h577.829c24.24 0 43.886 19.646 43.886 43.886s-19.646 43.886-43.886 43.886zM250.46 393.197c17.139 17.138 17.139 44.925 0 62.063l-117.029 117.029c-17.138 17.139-44.925 17.139-62.063 0l-58.514-58.514c-17.138-17.138-17.138-44.925 0-62.063s44.925-17.139 62.063 0l27.483 27.482 85.997-85.996c17.138-17.139 44.925-17.139 62.063 0zM250.46 747.835c17.139-17.141 17.139-44.928 0-62.066s-44.925-17.139-62.063 0l-85.997 85.998-27.483-27.487c-17.138-17.136-44.925-17.136-62.063 0-17.138 17.145-17.138 44.924 0 62.069l58.514 58.514c17.138 17.137 44.925 17.137 62.063 0l117.029-117.029z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["list-check","items","tasks","complete","done"]},"attrs":[{}],"properties":{"order":355,"id":283,"name":"list-check","prevSize":24,"code":59940},"setIdx":0,"setId":1,"iconIdx":31},{"icon":{"paths":["M175.542 43.886c0-24.237 19.648-43.886 43.886-43.886h585.144c24.24 0 43.886 19.648 43.886 43.886s-19.646 43.886-43.886 43.886h-14.629v307.2c0 3.071 1.112 7.201 5.947 12.52 5.098 5.614 13.21 11.080 23.011 14.766 78.636 29.582 113.964 102.538 130.048 157.529 8.324 28.461 12.412 55.043 14.453 74.383 1.024 9.733 1.543 17.793 1.807 23.541 0.132 2.878 0.205 5.187 0.241 6.851l0.029 2.003 0.007 0.621v0.295c0 0.015 0 0.064-43.886 0.064h43.886c0 24.237-19.646 43.886-43.886 43.886h-365.715v248.686c0 24.24-19.648 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-248.686h-365.714c-24.237 0-43.886-19.648-43.886-43.886h43.886c-43.886 0-43.886 0.015-43.886 0v-0.064l0-0.082 0.001-0.213 0.005-0.621 0.033-2.003c0.036-1.663 0.105-3.972 0.238-6.851 0.265-5.748 0.786-13.808 1.81-23.541 2.035-19.34 6.123-45.922 14.447-74.383 16.083-54.99 51.417-127.947 130.054-157.529 9.8-3.686 17.908-9.152 23.009-14.766 4.833-5.319 5.946-9.449 5.946-12.52v-307.2h-14.629c-24.237 0-43.886-19.648-43.886-43.886zM321.828 87.771v307.2c0 59.070-48.079 95.239-85.823 109.437-39.517 14.866-63.261 54.015-76.715 100.017-4.035 13.797-6.837 27.241-8.774 39.232h722.964c-1.931-11.991-4.732-25.435-8.77-39.232-13.458-46.002-37.2-85.151-76.72-100.017-37.742-14.198-85.819-50.367-85.819-109.437v-307.2h-380.343z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbtack","pin","mark","secure","set"]},"attrs":[{}],"properties":{"order":354,"id":282,"name":"thumbtack","prevSize":24,"code":59941},"setIdx":0,"setId":1,"iconIdx":32},{"icon":{"paths":["M946.425 465.455c25.702 0 46.541-20.839 46.541-46.546s-20.838-46.545-46.541-46.545h-228.963l292.905-292.906c18.176-18.177 18.176-47.648 0-65.825s-47.645-18.177-65.821-0l-292.909 292.906v-228.963c0-25.707-20.839-46.546-46.545-46.546s-46.546 20.839-46.546 46.546l0.001 341.333c0 25.707 20.839 46.546 46.545 46.546h341.334zM77.576 558.545c-25.707 0-46.546 20.839-46.546 46.546s20.839 46.545 46.546 46.545h228.963l-292.906 292.909c-18.177 18.176-18.177 47.645 0 65.821s47.648 18.176 65.825 0l292.906-292.905v228.963c0 25.702 20.839 46.548 46.545 46.548s46.546-20.846 46.546-46.548v-341.334c0-25.707-20.839-46.546-46.546-46.546h-341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-left-and-arrow-up-right-to-center","join","meet","intersection"]},"attrs":[{}],"properties":{"order":353,"id":281,"name":"arrow-down-left-and-arrow-up-right-to-center","prevSize":24,"code":59942},"setIdx":0,"setId":1,"iconIdx":33},{"icon":{"paths":["M0 313.807c0-27.364 22.184-49.548 49.548-49.548h924.905c27.363 0 49.547 22.183 49.547 49.548s-22.184 49.548-49.547 49.548h-924.905c-27.365 0-49.548-22.183-49.548-49.548zM0 710.194c0-27.365 22.184-49.548 49.548-49.548h924.905c27.363 0 49.547 22.183 49.547 49.548 0 27.363-22.184 49.548-49.547 49.548h-924.905c-27.365 0-49.548-22.184-49.548-49.548z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["equals","same","identical","match","balance"]},"attrs":[{}],"properties":{"order":352,"id":280,"name":"equals","prevSize":24,"code":59943},"setIdx":0,"setId":1,"iconIdx":34},{"icon":{"paths":["M511.999 80.842c-156.268 0-282.947 126.68-282.947 282.947 0 94.958 46.738 179.001 118.644 230.387 24.496 17.505 43.040 46.479 43.040 80.807v93.017c0 7.439 6.032 13.473 13.474 13.473h215.578c7.442 0 13.474-6.034 13.474-13.473v-93.017c0-34.327 18.543-63.301 43.039-80.807 71.905-51.386 118.644-135.428 118.644-230.387 0-156.268-126.679-282.947-282.947-282.947zM148.21 363.789c0-200.915 162.874-363.789 363.789-363.789s363.791 162.874 363.791 363.789c0 122.162-60.255 230.251-152.485 296.16-6.809 4.866-9.201 10.884-9.201 15.034v93.017c0 52.092-42.227 94.318-94.316 94.318h-215.578c-52.089 0-94.316-42.225-94.316-94.318v-93.017c0-4.149-2.393-10.168-9.201-15.034-92.229-65.909-152.482-173.998-152.482-296.16zM309.894 983.581c0-22.323 18.097-40.426 40.421-40.426h323.369c22.324 0 40.421 18.103 40.421 40.426s-18.097 40.419-40.421 40.419h-323.369c-22.324 0-40.421-18.096-40.421-40.419z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["lightbulb","idea","inspiration","invention","light"]},"attrs":[{}],"properties":{"order":351,"id":279,"name":"lightbulb","prevSize":24,"code":59944},"setIdx":0,"setId":1,"iconIdx":35},{"icon":{"paths":["M521.391 24.144c18.97 4.425 32.39 21.336 32.39 40.815v741.543c0 15.572-8.638 29.864-22.429 37.105l-290.58 152.554c-14.117 7.409-31.217 6.173-44.117-3.204-12.899-9.37-19.363-25.249-16.676-40.967l51.615-301.865-218.957-213.744c-11.415-11.144-15.515-27.802-10.574-42.97s18.064-26.217 33.853-28.499l302.838-43.784 135.532-274.712c8.618-17.469 28.137-26.697 47.106-22.272zM469.96 244.635l-65.794 133.36c-6.109 12.382-17.924 20.961-31.588 22.936l-240.624 34.789 173.934 169.794c9.857 9.623 14.356 23.475 12.035 37.053l-41.029 239.96 193.066-101.361v-536.531z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["star-half","rate","like","average"]},"attrs":[{}],"properties":{"order":350,"id":278,"name":"star-half","prevSize":24,"code":59945},"setIdx":0,"setId":1,"iconIdx":36},{"icon":{"paths":["M146.285 102.4c0-6.261 5.881-14.629 17.288-14.629h550.566c11.407 0 17.289 8.368 17.289 14.629v819.2c0 6.261-5.881 14.629-17.289 14.629h-550.566c-11.407 0-17.288-8.368-17.288-14.629v-819.2zM163.573 0c-56.164 0-105.060 44.028-105.060 102.4v819.2c0 58.375 48.895 102.4 105.060 102.4h550.566c56.165 0 105.061-44.025 105.061-102.4v-819.2c0-58.372-48.896-102.4-105.061-102.4h-550.566zM965.486 160.914c0-24.237-19.646-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v117.029c0 24.237 19.646 43.886 43.886 43.886s43.886-19.648 43.886-43.886v-117.029zM438.856 365.714c-16.159 0-29.257 13.099-29.257 29.257s13.098 29.257 29.257 29.257c16.158 0 29.257-13.099 29.257-29.257s-13.099-29.257-29.257-29.257zM321.828 394.971c0-64.633 52.395-117.029 117.029-117.029s117.029 52.395 117.029 117.029c0 64.633-52.396 117.029-117.029 117.029s-117.029-52.395-117.029-117.029zM965.486 453.486c0-24.237-19.646-43.886-43.886-43.886s-43.886 19.648-43.886 43.886v117.029c0 24.237 19.646 43.886 43.886 43.886s43.886-19.648 43.886-43.886v-117.029zM921.6 702.171c24.24 0 43.886 19.648 43.886 43.886v117.029c0 24.24-19.646 43.886-43.886 43.886s-43.886-19.646-43.886-43.886v-117.029c0-24.237 19.646-43.886 43.886-43.886zM307.199 702.171c0-25.354 3.88-39.823 7.984-48.031 3.529-7.058 8.070-11.317 15.273-14.746 8.441-4.020 21.047-7.053 40.275-8.697 19.156-1.637 41.279-1.669 68.126-1.669s48.97 0.032 68.125 1.669c19.229 1.644 31.835 4.677 40.275 8.697 7.202 3.43 11.743 7.688 15.272 14.746 4.104 8.207 7.984 22.677 7.984 48.031 0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886c0-33.161-4.897-62.576-17.251-87.284-12.928-25.856-32.524-43.54-56.041-54.739-22.279-10.609-46.976-14.89-70.537-16.903-23.271-1.989-48.984-1.989-74.413-1.988h-2.373c-25.43-0.001-51.143-0.001-74.414 1.988-23.56 2.014-48.257 6.295-70.536 16.903-23.518 11.199-43.114 28.883-56.042 54.739-12.353 24.708-17.25 54.123-17.25 87.284 0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["address-book","contacts","directory","information","numbers"]},"attrs":[{}],"properties":{"order":349,"id":277,"name":"address-book","prevSize":24,"code":59946},"setIdx":0,"setId":1,"iconIdx":37},{"icon":{"paths":["M46.545 0c25.706 0 46.546 20.839 46.546 46.545v884.366h884.361c25.71 0 46.548 20.838 46.548 46.541 0 25.71-20.838 46.548-46.548 46.548h-930.906c-25.706 0-46.545-20.838-46.545-46.548v-930.906c0-25.706 20.839-46.545 46.545-46.545zM263.758 636.121c34.275 0 62.061-27.786 62.061-62.060s-27.786-62.061-62.061-62.061c-34.275 0-62.060 27.786-62.060 62.061s27.786 62.060 62.060 62.060zM480.97 325.819c0 34.275-27.786 62.060-62.061 62.060s-62.060-27.786-62.060-62.060c0-34.275 27.786-62.061 62.060-62.061s62.061 27.786 62.061 62.061zM574.061 760.24c34.275 0 62.060-27.78 62.060-62.058 0-34.275-27.786-62.060-62.060-62.060s-62.061 27.786-62.061 62.060c0 34.278 27.786 62.058 62.061 62.058zM791.274 449.94c0 34.275-27.787 62.060-62.062 62.060s-62.061-27.786-62.061-62.060c0-34.275 27.786-62.061 62.061-62.061s62.062 27.786 62.062 62.061zM884.363 263.758c34.275 0 62.062-27.786 62.062-62.060s-27.787-62.061-62.062-62.061c-34.275 0-62.062 27.786-62.062 62.061s27.787 62.060 62.062 62.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["chart-scatter","graph","statistic","plot","data"]},"attrs":[{}],"properties":{"order":348,"id":276,"name":"chart-scatter","prevSize":24,"code":59947},"setIdx":0,"setId":1,"iconIdx":38},{"icon":{"paths":["M143.363 40.96c0-22.622 18.338-40.96 40.96-40.96h655.357c22.623 0 40.96 18.338 40.96 40.96s-18.337 40.96-40.96 40.96h-268.632c4.057 3.838 7.989 7.787 11.793 11.84 41.844 44.588 66.88 100.363 75.725 158.068h181.114c22.623 0 40.96 18.338 40.96 40.96s-18.337 40.96-40.96 40.96h-179.327c-6.797 62.512-32.376 123.625-77.512 171.721-53.884 57.418-133.289 93.76-234.678 93.76h-58.401l386.425 353.595c16.689 15.265 17.839 41.179 2.567 57.863-15.271 16.691-41.18 17.84-57.869 2.567l-464.213-424.768c-12.466-11.407-16.649-29.299-10.53-45.050s21.282-26.128 38.18-26.128h163.84c80.665 0 137.8-28.322 174.943-67.899 29.883-31.842 48.322-72.582 54.679-115.662h-393.462c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96h391.026c-7.971-37.989-25.538-73.552-52.243-102.009-37.143-39.578-94.278-67.899-174.943-67.899h-163.84c-22.622 0-40.96-18.338-40.96-40.96z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["indian-rupee","money","currency","inr","cash"]},"attrs":[{}],"properties":{"order":347,"id":275,"name":"indian-rupee","prevSize":24,"code":59948},"setIdx":0,"setId":1,"iconIdx":39},{"icon":{"paths":["M553.781 64.95c0-19.479-13.42-36.39-32.39-40.815s-38.488 4.803-47.106 22.272l-135.532 274.712-302.838 43.783c-15.789 2.283-28.912 13.331-33.853 28.499s-0.842 31.827 10.574 42.971l218.957 213.744-51.615 301.866c-2.687 15.711 3.776 31.598 16.676 40.967s30 10.613 44.117 3.204l290.58-152.554c13.791-7.241 22.429-21.533 22.429-37.113v-741.537z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["star-half-fill","rate","like","average"]},"attrs":[{}],"properties":{"order":346,"id":274,"name":"star-half-fill","prevSize":24,"code":59949},"setIdx":0,"setId":1,"iconIdx":40},{"icon":{"paths":["M0 73.144c0-24.237 19.648-43.885 43.885-43.885h117.028c21.209 0 39.383 15.168 43.177 36.035l110.476 607.616h514.245l108.72-434.869c5.881-23.513 29.703-37.809 53.219-31.931s37.808 29.706 31.927 53.219l-117.021 468.11c-4.886 19.533-22.44 33.24-42.576 33.24h-585.138c-21.209 0-39.383-15.163-43.177-36.033l-110.476-607.616h-80.402c-24.237 0-43.885-19.648-43.885-43.885zM292.569 906.964c0 48.567 39.204 87.771 87.771 87.771s87.771-39.205 87.771-87.771c0-48.567-39.205-87.771-87.771-87.771s-87.771 39.205-87.771 87.771zM672.908 906.964c0 48.567 39.204 87.771 87.771 87.771s87.771-39.205 87.771-87.771c0-48.567-39.205-87.771-87.771-87.771s-87.771 39.205-87.771 87.771zM614.394 131.658c0-24.237-19.648-43.885-43.886-43.885s-43.885 19.648-43.885 43.885v186.62l-42.111-42.111c-17.138-17.139-44.925-17.139-62.063 0s-17.138 44.924 0 62.063l117.027 117.027c17.138 17.138 44.925 17.138 62.063 0l117.028-117.027c17.14-17.139 17.14-44.925 0-62.063s-44.925-17.139-62.063 0l-42.111 42.111v-186.62z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-arrow-down","shopping"]},"attrs":[{}],"properties":{"order":345,"id":273,"name":"cart-arrow-down","prevSize":24,"code":59950},"setIdx":0,"setId":1,"iconIdx":41},{"icon":{"paths":["M309.895 0c-22.324 0-40.421 18.097-40.421 40.421v67.368h-67.369c-81.854 0-148.21 66.357-148.21 148.211v592.845c0 81.854 66.356 148.209 148.21 148.209h215.579c22.324 0 40.421-18.096 40.421-40.426 0-22.323-18.097-40.419-40.421-40.419h-215.579c-37.206 0-67.368-30.164-67.368-67.365v-363.792h714.108c22.323 0 40.419-18.097 40.419-40.421v-188.632c0-81.854-66.355-148.211-148.209-148.211h-67.37v-67.368c0-22.324-18.097-40.421-40.421-40.421s-40.421 18.097-40.421 40.421v67.368h-242.526v-67.368c0-22.324-18.097-40.421-40.421-40.421zM592.843 188.632v67.368c0 22.324 18.097 40.421 40.421 40.421s40.421-18.097 40.421-40.421v-67.368h67.37c37.208 0 67.365 30.162 67.365 67.368v148.211h-673.682v-148.211c0-37.206 30.162-67.368 67.368-67.368h67.369v67.368c0 22.324 18.097 40.421 40.421 40.421s40.421-18.097 40.421-40.421v-67.368h242.526zM727.579 619.789c-89.296 0-161.684 72.389-161.684 161.684 0 89.3 72.388 161.682 161.684 161.682s161.684-72.382 161.684-161.682c0-89.295-72.389-161.684-161.684-161.684zM485.053 781.473c0-133.943 108.583-242.526 242.526-242.526 133.941 0 242.529 108.583 242.529 242.526 0 133.947-108.588 242.527-242.529 242.527-133.944 0-242.526-108.581-242.526-242.527zM754.527 714.105c0-22.324-18.096-40.421-40.422-40.421-22.324 0-40.421 18.097-40.421 40.421v107.786c0 22.331 18.097 40.426 40.421 40.426h53.895c22.323 0 40.419-18.096 40.419-40.426 0-22.323-18.096-40.419-40.419-40.419h-13.473v-67.367z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["calendar-clock","schedule","date","event","time"]},"attrs":[{}],"properties":{"order":344,"id":272,"name":"calendar-clock","prevSize":24,"code":59951},"setIdx":0,"setId":1,"iconIdx":42},{"icon":{"paths":["M542.031 283.778c-16.586-16.585-43.476-16.585-60.062 0l-396.386 396.386c-12.146 12.147-15.78 30.414-9.206 46.283 6.573 15.872 22.059 26.214 39.237 26.214h792.769c17.181 0 32.666-10.342 39.241-26.214 6.576-15.87 2.94-34.137-9.209-46.283l-396.385-396.386z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sort-up-fill","ascending","arrange","rise"]},"attrs":[{}],"properties":{"order":343,"id":271,"name":"sort-up-fill","prevSize":24,"code":59952},"setIdx":0,"setId":1,"iconIdx":43},{"icon":{"paths":["M940.464 128.246l71.79 23.93c15.66 5.219 15.66 27.37 0 32.59l-71.79 23.93c-5.127 1.709-9.15 5.734-10.862 10.863l-23.932 71.79c-5.215 15.659-27.37 15.659-32.585 0l-23.932-71.79c-1.712-5.129-5.734-9.154-10.862-10.863l-71.79-23.93c-15.66-5.219-15.66-27.37 0-32.59l71.79-23.93c5.127-1.71 9.15-5.734 10.862-10.863l23.932-71.79c5.215-15.66 27.37-15.66 32.585-0l23.932 71.79c1.712 5.129 5.734 9.153 10.862 10.863zM385.172 113.933c14.789-44.37 77.548-44.369 92.338 0l87.974 263.921 263.919 87.974c44.368 14.789 44.368 77.548 0 92.338l-263.919 87.974-87.974 263.925c-14.789 44.368-77.548 44.368-92.338 0l-87.974-263.925-263.922-87.974c-44.369-14.789-44.368-77.548 0-92.338l263.922-87.974 87.974-263.921zM431.341 247.008l-58.552 175.658c-4.844 14.532-16.247 25.935-30.779 30.779l-175.658 58.553 175.658 58.552c14.532 4.844 25.935 16.247 30.779 30.779l58.552 175.66 58.553-175.66c4.844-14.532 16.247-25.935 30.779-30.779l175.658-58.552-175.658-58.553c-14.532-4.844-25.935-16.247-30.779-30.779l-58.553-175.658zM1012.253 839.227l-71.79-23.925c-5.127-1.712-9.15-5.734-10.862-10.869l-23.932-71.79c-5.215-15.657-27.37-15.657-32.585 0l-23.932 71.79c-1.712 5.135-5.734 9.157-10.862 10.869l-71.79 23.925c-15.66 5.222-15.66 27.37 0 32.592l71.79 23.932c5.127 1.704 9.15 5.734 10.862 10.862l23.932 71.79c5.215 15.66 27.37 15.66 32.585 0l23.932-71.79c1.712-5.127 5.734-9.157 10.862-10.862l71.79-23.932c15.66-5.222 15.66-27.37 0-32.592z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sparkles","shine","glitter","twinkle","bright","new","magic"]},"attrs":[{}],"properties":{"order":342,"id":270,"name":"sparkles","prevSize":24,"code":59953},"setIdx":0,"setId":1,"iconIdx":44},{"icon":{"paths":["M512 85.33c-235.644 0-426.67 191.026-426.67 426.67s191.026 426.672 426.67 426.672c235.644 0 426.672-191.027 426.672-426.672s-191.027-426.67-426.672-426.67zM0 512c0-282.77 229.23-512 512-512s512 229.23 512 512c0 282.77-229.23 512-512 512s-512-229.23-512-512zM511.977 263.099c-137.452 0-248.878 111.427-248.878 248.878s111.427 248.877 248.878 248.877c137.452 0 248.877-111.425 248.877-248.877s-111.425-248.878-248.877-248.878zM177.77 511.977c0-184.577 149.63-334.207 334.207-334.207s334.205 149.63 334.205 334.207c0 184.577-149.628 334.205-334.205 334.205s-334.207-149.628-334.207-334.205zM440.869 511.977c0-39.272 31.836-71.108 71.108-71.108s71.108 31.836 71.108 71.108c0 39.272-31.836 71.108-71.108 71.108s-71.108-31.836-71.108-71.108zM511.977 355.54c-86.398 0-156.437 70.039-156.437 156.437s70.039 156.437 156.437 156.437c86.398 0 156.437-70.039 156.437-156.437s-70.039-156.437-156.437-156.437z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bullseye","target","aim","goal","focus"]},"attrs":[{}],"properties":{"order":341,"id":269,"name":"bullseye","prevSize":24,"code":59954},"setIdx":0,"setId":1,"iconIdx":45},{"icon":{"paths":["M115.614 271.34c-17.178 0-32.663 10.348-39.237 26.217s-2.94 34.137 9.206 46.283l396.386 396.387c16.586 16.581 43.476 16.581 60.062 0l396.385-396.387c12.149-12.147 15.784-30.414 9.209-46.283s-22.060-26.217-39.241-26.217h-792.769z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sort-down-fill","descending","arrange","reduction"]},"attrs":[{}],"properties":{"order":340,"id":268,"name":"sort-down-fill","prevSize":24,"code":59955},"setIdx":0,"setId":1,"iconIdx":46},{"icon":{"paths":["M482.017 22.282c19.012-8.84 40.955-8.84 59.967 0l440.881 204.992c56.313 26.181 54.367 106.896-3.131 130.34l-26.814 10.931v217.054c0 26.986-11.052 54.78-34.626 73.544-22.916 18.244-64.944 48.491-122.668 76.477v230.064c0 23.567-19.105 42.672-42.672 42.672-23.562 0-42.666-19.105-42.666-42.672v-195.555c-57.399 18.776-124.096 31.949-198.288 31.949-210.294 0-360.312-115.032-409.746-158.555-21.279-18.735-31.174-45.057-31.174-70.564v-204.414l-26.812-10.931c-57.503-23.444-59.445-104.158-3.135-130.34l440.883-204.992zM156.42 407.753v165.205c0 3.906 1.431 5.812 2.228 6.513 43.438 38.245 173.774 137.269 353.352 137.269 75.812 0 142.832-15.99 198.288-37.121v-193.211l-168.095 78.157c-19.313 8.98-41.634 8.831-60.826-0.407l-324.947-156.404zM795.626 639.173c31.342-17.959 54.93-35.188 69.522-46.8 0.834-0.666 2.428-2.564 2.428-6.774v-176.302l-71.951 36.435v193.441zM753.276 371.522l139.249-70.516 24.781-10.102-405.307-188.45-405.307 188.45 24.381 9.94 381.241 183.499 144.279-67.083-164.371-85.979c-20.882-10.922-28.955-36.705-18.033-57.587s36.705-28.955 57.587-18.032l221.499 115.86z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["graduation-cap","education","school","diploma","university"]},"attrs":[{}],"properties":{"order":339,"id":267,"name":"graduation-cap","prevSize":24,"code":59956},"setIdx":0,"setId":1,"iconIdx":47},{"icon":{"paths":["M480.383 87.635c-5.439-5.439-14.256-5.439-19.694-0.001l-121.757 121.758c-5.439 5.438-5.439 14.256 0 19.694l455.985 455.982c5.435 5.439 14.256 5.439 19.69 0l121.761-121.757c5.435-5.438 5.435-14.256 0-19.694l-455.984-455.981zM401.605 28.552c38.069-38.069 99.792-38.069 137.86 0l455.979 455.982c38.071 38.069 38.071 99.791 0 137.86l-121.754 121.761c-38.071 38.064-99.789 38.064-137.86 0l-131.606-131.608-371.528 371.531c-53.233 53.226-139.54 53.226-192.773 0-53.233-53.233-53.233-139.542 0-192.775l371.528-371.529-131.604-131.604c-38.069-38.069-38.069-99.791 0-137.86l121.757-121.757zM470.536 478.858l-371.528 371.531c-20.602 20.597-20.602 54.001 0 74.606 20.602 20.597 54.005 20.597 74.606 0l371.528-371.53-74.606-74.606z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["hammer","tool","build","construction","fix"]},"attrs":[{}],"properties":{"order":338,"id":266,"name":"hammer","prevSize":24,"code":59957},"setIdx":0,"setId":1,"iconIdx":48},{"icon":{"paths":["M512 27.679c114.283 0 204.872 38.151 266.401 107.33 60.877 68.442 88.956 162.349 88.956 266.292 0 189.216 38.422 275 69.091 312.925 15.119 18.695 28.994 26.639 37.383 30.098 4.33 1.785 7.534 2.516 9.15 2.801 0.366 0.066 0.651 0.102 0.848 0.132l0.124 0.015c22.25 0.775 40.046 19.054 40.046 41.487 0 22.93-18.586 41.516-41.516 41.516h-93.506l39.834 39.834c16.216 16.216 16.216 42.496 0 58.712-16.208 16.208-42.496 16.208-58.704 0l-774.922-774.922c-16.212-16.212-16.212-42.497 0-58.709s42.497-16.212 58.709 0l72.006 72.006c15.689-24.207 39.13-55.116 68.741-76.374 57.556-41.321 130.816-63.142 217.358-63.142zM293.626 215.391c-2.692 4.247-5.159 8.335-7.379 12.15l519.706 519.708h51.902c-41.209-62.24-73.531-167.521-73.531-345.949 0-89.787-24.225-161.935-67.964-211.114-43.086-48.443-109.417-79.481-204.362-79.481-72.414 0-127.92 18.114-168.938 47.561-18.127 13.014-35.604 35.308-49.436 57.125zM239.672 401.3c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514c0 77.698-6.487 138.204-16.361 185.191-18.977 90.295-50.069 129.193-70.542 145.851-10.409 8.47-19.157 12.112-24.325 13.692-2.632 0.812-4.442 1.112-5.186 1.214l-0.186 0.022c-22.247 0.775-40.044 19.054-40.044 41.487 0 22.93 18.586 41.516 41.514 41.516h267.054c19.182 94.852 102.843 166.056 203.432 166.056 74.664 0 140.026-39.27 176.551-98.231 12.074-19.493 6.061-45.078-13.429-57.154s-45.079-6.064-57.152 13.429c-21.963 35.46-61.126 58.924-105.969 58.924-54.389 0-100.459-34.582-117.497-83.024h172.848c22.927 0 41.513-18.586 41.513-41.516 0-22.923-18.586-41.509-41.513-41.509h-401.208c22.293-33.701 42.028-80.101 55.39-143.681 11.29-53.722 18.137-120.101 18.137-202.268z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bell-slash","mute","alert","silence","quiet","off"]},"attrs":[{}],"properties":{"order":337,"id":265,"name":"bell-slash","prevSize":24,"code":59958},"setIdx":0,"setId":1,"iconIdx":49},{"icon":{"paths":["M257.285 305.786c52.726-36.030 122.418-62.445 215.33-68.273v90.689c0 21.752 17.633 39.385 39.385 39.385s39.385-17.633 39.385-39.385v-90.689c91.282 5.729 159.941 31.318 212 66.023 1.28 0.855 2.553 1.717 3.818 2.584l-73 73.002c-15.381 15.381-15.381 40.318 0 55.698s40.32 15.381 55.695 0l76.968-76.965c26.602 28.86 47.309 60.712 63.444 92.986 27.282 54.559 41.121 109.594 48.069 151.322 1.712 10.269 2.999 19.67 3.964 27.987h-89.008c-21.753 0-39.387 17.633-39.387 39.385s17.635 39.385 39.387 39.385h91.897v65.641c0 7.248-5.881 13.129-13.129 13.129h-535.071l221.586-221.587c15.381-15.381 15.381-40.318 0-55.698s-40.317-15.381-55.698 0l-277.285 277.285h-193.738c-7.251 0-13.128-5.881-13.128-13.129v-65.641h91.897c21.752 0 39.385-17.633 39.385-39.385s-17.633-39.385-39.385-39.385h-89.008c2.49-21.484 7.104-50.065 15.624-82.056 16.235-60.957 46.035-132.041 100.27-190.689l76.391 77.257c15.293 15.468 40.23 15.608 55.697 0.314s15.608-40.23 0.315-55.697l-72.67-73.494zM984.613 669.536c39.387 0 39.387-0.021 39.387-0.044v-0.611l-0.022-1.336c-0.015-1.113-0.051-2.665-0.117-4.629-0.132-3.926-0.388-9.502-0.885-16.494-0.995-13.97-2.977-33.671-6.897-57.207-7.812-46.887-23.515-110.005-55.311-173.6-31.876-63.749-80.311-128.696-153.688-177.618-73.633-49.086-170.034-80.461-295.080-80.461-152.822 0-262.455 46.882-339.874 114.805-87.351 76.637-129.989 176.742-150.96 255.482-10.549 39.608-15.823 74.569-18.47 99.74-1.326 12.608-1.999 22.825-2.341 30.018-0.171 3.598-0.26 6.445-0.306 8.463-0.023 1.009-0.035 1.811-0.042 2.396l-0.006 0.714-0.001 0.233-0 0.085c-0 0.015-0 0.064 39.385 0.064h-39.385v105.025c0 50.754 41.144 91.897 91.897 91.897h840.206c50.754 0 91.897-41.143 91.897-91.897v-105.069l-39.387 0.044z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["gauge","measure","meter","indicator","level"]},"attrs":[{}],"properties":{"order":336,"id":264,"name":"gauge","prevSize":24,"code":59959},"setIdx":0,"setId":1,"iconIdx":50},{"icon":{"paths":["M245.194 143.027c-4.484 0-8.724 2.038-11.525 5.539l-141.686 177.109c-7.731 9.664-0.851 23.978 11.525 23.978h816.988c12.376 0 19.251-14.315 11.52-23.979l-141.685-177.108c-2.801-3.501-7.044-5.539-11.527-5.539h-533.609zM164.519 93.247c19.606-24.507 49.29-38.774 80.674-38.774h533.609c31.386 0 61.074 14.267 80.677 38.774l141.685 177.109c54.118 67.645 5.954 167.852-80.669 167.852h-9.999v487.050c0 24.452-19.829 44.273-44.281 44.273s-44.273-19.822-44.273-44.273v-487.050h-88.554v368.975c0 89.666-72.689 162.348-162.353 162.348h-295.18c-89.663 0-162.349-72.682-162.349-162.348v-368.975h-9.999c-86.629 0-134.791-100.206-80.674-167.852l141.686-177.109zM202.061 438.208v368.975c0 40.755 33.039 73.794 73.795 73.794h295.18c40.756 0 73.795-33.039 73.795-73.794v-368.975h-73.795v265.663c0 57.057-46.255 103.312-103.313 103.312h-88.554c-57.059 0-103.314-46.256-103.314-103.312v-265.663h-73.795zM364.409 438.208v265.663c0 8.151 6.608 14.759 14.759 14.759h88.554c8.151 0 14.759-6.608 14.759-14.759v-265.663h-118.072z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shop","store","retail","purchase","sell"]},"attrs":[{}],"properties":{"order":335,"id":263,"name":"shop","prevSize":24,"code":59960},"setIdx":0,"setId":1,"iconIdx":51},{"icon":{"paths":["M186.356 548.116c43.279 7.444 76.208 45.158 76.208 90.563v166.689c0 61.052-58.437 105.136-117.143 88.364l-78.769-22.506c-39.452-11.271-66.651-47.331-66.651-88.364v-111.728c0-34.809 19.666-66.629 50.8-82.196l55.312-27.656c0.848-12.007 2.363-27.88 5.070-46.441 6.070-41.624 18.283-97.8 43.095-154.514 24.82-56.733 62.877-115.407 121.342-159.952 58.983-44.939 136.419-73.698 236.382-73.698s177.398 28.759 236.383 73.698c58.463 44.545 96.519 103.22 121.344 159.952 24.81 56.714 37.018 112.889 43.088 154.514 2.706 18.561 4.228 34.433 5.076 46.441l55.311 27.655c31.13 15.567 50.798 47.388 50.798 82.196v111.729c0 41.033-27.202 77.093-66.648 88.364l-78.775 22.506c-58.704 16.772-117.138-27.312-117.138-88.364v-166.689c0-45.405 32.929-83.119 76.208-90.563-0.709-6.638-1.616-13.983-2.772-21.907-5.42-37.146-16.179-85.996-37.317-134.309-21.124-48.293-51.99-94.644-96.913-128.869-44.402-33.83-104.812-57.584-188.644-57.584s-144.242 23.754-188.644 57.584c-44.919 34.225-75.786 80.576-96.914 128.869-21.137 48.313-31.898 97.163-37.315 134.309-1.156 7.924-2.061 15.269-2.771 21.907zM870.29 625.551h-16.955c-7.256 0-13.129 5.878-13.129 13.128v166.689c0 8.719 8.346 15.016 16.735 12.624l78.768-22.506c5.639-1.609 9.523-6.766 9.523-12.624v-111.729c0-4.972-2.809-9.518-7.256-11.742l-67.686-33.84zM153.708 625.551l-67.681 33.841c-4.448 2.224-7.257 6.769-7.257 11.742v111.728c0 5.859 3.886 11.015 9.522 12.624l78.769 22.506c8.387 2.392 16.735-3.906 16.735-12.624v-166.689c0-7.251-5.878-13.128-13.128-13.128h-16.959z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["headphones","music","audio","sound","listen"]},"attrs":[{}],"properties":{"order":388,"id":262,"name":"headphones","prevSize":24,"code":59961},"setIdx":0,"setId":1,"iconIdx":52},{"icon":{"paths":["M959.977 394.711c0-24.979-9.774-48.87-27.693-66.789l-236.207-236.207c-36.923-36.923-96.655-36.923-133.578 0l-470.781 470.781c-17.919 17.919-27.693 41.81-27.693 66.789s9.774 48.87 27.693 66.789l236.207 236.207c18.462 18.462 42.356 27.693 66.789 27.693 2.173 0 4.887 0 7.060-0.543 1.084 0 1.63 0 2.714 0h433.859c22.263 0 40.725-18.462 40.725-40.725s-18.462-40.725-40.725-40.725h-323.088l416.482-416.482c17.919-17.919 27.693-41.81 27.693-66.789zM149.275 638.521c-3.257-3.257-3.8-7.060-3.8-9.231s0-5.972 3.8-9.231l206.341-206.341 254.669 254.669-206.341 206.341c-4.887 4.887-13.032 4.887-18.462 0l-236.207-236.75zM874.725 404.486l-206.341 206.341-254.669-254.669 206.341-206.341c4.887-4.887 13.032-4.887 18.462 0l236.207 236.75c3.257 3.257 3.8 7.060 3.8 9.231s0 5.972-3.8 9.231z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["eraser","delete","remove","wipe","clean"]},"attrs":[{}],"properties":{"order":333,"id":261,"name":"eraser","prevSize":24,"code":59908},"setIdx":0,"setId":1,"iconIdx":53},{"icon":{"paths":["M496 128.019c-247.028 0-447.979 200.95-447.979 447.979s200.95 447.979 447.979 447.979 447.979-200.95 447.979-447.979-200.95-447.979-447.979-447.979zM496 927.979c-193.911 0-351.983-158.073-351.983-351.983s158.073-351.983 351.983-351.983 351.983 158.073 351.983 351.983-158.073 351.983-351.983 351.983zM288.011 48.023c0-26.238 21.759-47.998 47.998-47.998h319.984c26.238 0 47.998 21.759 47.998 47.998s-21.759 47.998-47.998 47.998h-319.984c-26.238 0-47.998-21.759-47.998-47.998zM543.998 384.007v191.991c0 26.238-21.759 47.998-47.998 47.998s-47.998-21.759-47.998-47.998v-191.991c0-26.238 21.759-47.998 47.998-47.998s47.998 21.759 47.998 47.998zM962.538 273.291c-9.6 9.6-21.759 14.080-33.918 14.080s-24.318-4.48-33.918-14.080l-95.995-95.995c-18.559-18.559-18.559-49.277 0-67.837s49.277-18.559 67.837 0l95.995 95.995c18.559 18.559 18.559 49.277 0 67.837z"],"attrs":[{}],"grid":16,"tags":["stopwatch","time","countdown","timer","race"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":332,"id":260,"name":"stopwatch","prevSize":24,"code":59905},"setIdx":0,"setId":1,"iconIdx":54},{"icon":{"paths":["M626.347 1024c-27.876 0-54.044-13.084-75.663-24.463-13.653-6.827-30.151-15.36-38.684-15.36s-25.6 8.533-38.684 15.36c-27.307 14.223-61.44 31.289-97.849 21.617-37.547-9.671-58.027-42.667-75.093-68.836-7.396-11.947-17.636-27.876-24.463-31.857s-25.031-4.551-40.391-5.689c-30.72-1.707-68.836-3.413-96.143-30.151-27.307-27.876-29.013-65.991-30.72-96.711-0.569-14.791-1.707-33.564-5.689-40.391-3.413-6.257-19.911-16.497-31.289-23.893-26.169-17.067-58.596-38.116-68.836-75.093-9.671-36.409 7.396-70.543 21.617-97.849 6.827-13.653 15.36-30.151 15.36-38.684s-8.533-25.6-15.36-38.684c-14.223-27.307-31.289-61.44-21.617-97.849 9.671-37.547 42.667-58.027 68.836-75.093 11.947-7.396 27.876-17.636 31.857-24.463s4.551-25.031 5.689-40.391c1.707-30.72 3.413-68.836 30.151-96.143 27.876-27.307 65.991-29.013 96.711-30.72 14.791-0.569 33.564-1.707 40.391-5.689 6.257-3.413 16.497-19.911 23.893-31.289 17.067-26.169 38.116-58.596 75.093-68.836 36.409-9.671 70.543 7.396 97.849 21.617 13.653 6.827 30.151 15.36 38.684 15.36s25.6-8.533 38.684-15.36c27.307-13.653 61.44-31.289 97.849-21.617 37.547 9.671 58.027 42.667 75.093 68.836 7.396 11.947 17.636 27.876 24.463 31.857s25.031 4.551 40.391 5.689c30.72 1.707 68.836 3.413 96.143 30.151 27.307 27.876 29.013 65.991 30.72 96.711 0.569 14.791 1.707 33.564 5.689 40.391 3.413 6.257 19.911 16.497 31.289 23.893 26.169 17.067 58.596 38.116 68.836 75.093 9.671 36.409-7.396 70.543-21.617 97.849-6.827 13.653-15.36 30.151-15.36 38.684s8.533 25.6 15.36 38.684c14.223 27.307 31.289 61.44 21.617 97.849-9.671 37.547-42.667 58.027-68.836 75.093-11.947 7.396-27.876 17.636-31.857 24.463s-4.551 25.031-5.689 40.391c-1.707 30.72-3.413 68.836-30.151 96.143-27.876 27.307-65.991 29.013-96.711 30.72-14.791 0.569-33.564 1.707-40.391 5.689-6.257 3.413-16.497 19.911-23.893 31.289-17.067 26.169-38.116 58.596-75.093 68.836-7.396 2.276-14.791 2.844-22.187 2.844zM398.223 85.333s0 0-0.569 0c-5.689 2.276-18.773 21.617-25.031 32.427-13.653 21.049-29.013 44.943-53.476 59.164-25.031 14.223-53.476 15.929-79.076 17.067-12.516 0.569-35.84 1.707-40.96 5.689-3.413 4.551-4.551 27.307-5.12 39.823-1.137 25.6-2.844 54.044-17.067 78.507s-38.116 39.823-59.164 53.476c-10.809 6.827-30.151 19.343-32.427 25.6-0.569 6.257 9.103 25.6 14.791 36.977 11.377 22.756 25.031 48.356 25.031 77.369s-13.084 54.613-25.031 77.369c-5.689 11.377-15.929 30.72-14.791 36.977 2.276 5.689 21.617 18.773 32.427 25.031 21.049 13.653 44.943 29.013 59.164 53.476 14.223 25.031 15.929 53.476 17.067 79.076 0.569 12.516 1.707 35.84 5.689 40.96 4.551 3.413 27.307 4.551 39.823 5.12 25.6 1.137 54.044 2.844 78.507 17.067s39.823 38.116 53.476 59.164c6.827 10.809 19.343 30.151 25.6 32.427 5.689 1.707 25.6-9.103 36.977-14.791 22.756-11.377 48.356-25.031 77.369-25.031s54.613 13.084 77.369 25.031c11.377 5.689 29.583 16.497 36.977 14.791 5.689-2.276 18.773-21.617 25.031-32.427 13.653-21.049 29.013-44.943 53.476-59.164 25.031-14.223 53.476-15.929 79.076-17.067 12.516-0.569 35.84-1.707 40.96-5.689 3.413-4.551 4.551-27.307 5.12-39.823 1.137-25.6 2.844-54.044 17.067-78.507s38.116-39.823 59.164-53.476c10.809-6.827 30.151-19.343 32.427-25.6 0.569-6.257-9.103-25.6-14.791-36.977-11.377-22.756-25.031-48.356-25.031-77.369s13.084-54.613 25.031-77.369c5.689-11.377 15.36-30.72 14.791-36.977-2.276-6.257-22.187-18.773-32.427-25.6-21.049-13.653-44.943-29.013-59.164-53.476-14.223-25.031-15.929-53.476-17.067-79.076-0.569-12.516-1.707-35.84-5.689-40.96-4.551-3.413-27.307-4.551-39.823-5.12-25.6-1.137-54.044-2.844-78.507-17.067s-39.823-38.116-53.476-59.164c-6.827-10.809-19.343-30.151-25.6-32.427-5.689-1.707-25.6 9.103-36.977 14.791-22.756 11.377-48.356 25.031-77.369 25.031s-54.613-13.084-77.369-25.031c-11.377-5.689-29.583-14.791-36.409-14.791zM938.667 397.084s0 0 0 0v0zM426.097 711.68v0c-11.377 0-22.187-4.551-30.151-12.516l-142.791-142.791c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l112.64 112.64 283.876-283.876c16.497-16.497 43.804-16.497 60.303 0s16.497 43.804 0 60.303l-314.027 314.027c-7.964 7.964-18.773 12.516-30.151 12.516z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["verified","confirm","checked","authenticated","approved"]},"attrs":[{}],"properties":{"order":331,"id":259,"name":"verified","prevSize":24,"code":59906},"setIdx":0,"setId":1,"iconIdx":55},{"icon":{"paths":["M799.19 390.096l-121.904 121.904 121.904 121.904c15.924 15.924 15.924 42.282 0 58.207-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081l-121.904-121.904-121.904 121.904c-8.237 8.237-18.67 12.081-29.103 12.081s-20.866-3.844-29.103-12.081c-15.924-15.924-15.924-42.282 0-58.207l121.904-121.904-121.904-121.904c-15.924-15.924-15.924-42.282 0-58.207s42.282-15.924 58.207 0l121.904 121.904 121.904-121.904c15.924-15.924 42.282-15.924 58.207 0s15.924 42.282 0 58.207zM1023.778 237.441v549.119c0 52.715-42.831 96.096-96.096 96.096h-655.098c-33.497 0-63.697-17.023-81.27-45.028l-180.66-289.385c-13.728-21.965-13.728-50.518 0-73.033l180.66-288.837c17.571-28.005 48.323-45.028 81.27-45.028h655.648c52.715 0 96.096 43.381 96.096 96.096zM941.41 237.441c0-7.687-6.040-13.728-13.728-13.728h-655.098c-4.942 0-9.335 2.197-11.531 6.589l-176.267 281.698 176.267 281.698c2.745 3.844 7.139 6.589 11.531 6.589h655.648c7.687 0 13.728-6.040 13.728-13.728v-549.119z"],"attrs":[{}],"grid":16,"tags":["delete-left","remove","backspace","erase","eliminate"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":330,"id":258,"name":"delete-left","prevSize":24,"code":59907},"setIdx":0,"setId":1,"iconIdx":56},{"icon":{"paths":["M877.707 936.219h-38.619c-22.234-79.578-90.695-277.351-257.457-424.219 166.762-146.867 235.222-344.642 257.457-424.219h38.619c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885h-731.412c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h38.619c22.234 79.578 90.695 277.351 257.457 424.219-166.762 146.867-235.222 344.642-257.457 424.219h-38.619c-23.99 0-43.885 19.895-43.885 43.885s19.895 43.885 43.885 43.885h731.412c23.99 0 43.885-19.895 43.885-43.885s-19.895-43.885-43.885-43.885zM276.778 87.781h469.859c-26.331 83.089-93.621 248.679-235.222 367.462-141.601-119.366-208.891-284.373-235.222-367.462zM512 568.758c141.601 119.366 208.891 284.373 235.222 367.462h-470.444c26.331-83.089 93.621-248.681 235.222-367.462z"],"attrs":[{}],"grid":16,"tags":["hourglass","time","wait","patience","sand"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":329,"id":257,"name":"hourglass","prevSize":24,"code":59902},"setIdx":0,"setId":1,"iconIdx":57},{"icon":{"paths":["M816.58 221.265h-110.756v-41.534c0-53.163-43.749-96.912-96.912-96.912h-512.247c-53.163 0-96.912 43.749-96.912 96.912v498.402c0 53.163 43.749 96.912 96.912 96.912h15.506c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h85.836c7.2 92.481 84.174 166.134 178.318 166.134s171.118-73.653 178.318-166.134h15.506c53.163 0 96.912-43.749 96.912-96.912v-249.201c0-114.633-93.035-207.668-207.668-207.668zM82.82 678.134v-498.402c0-7.752 6.091-13.845 13.845-13.845h512.247c7.752 0 13.845 6.091 13.845 13.845v439.701s-2.768 3.323-4.43 4.43c-8.307 7.2-16.059 14.952-23.259 23.259-2.216 2.768-4.43 4.984-6.091 7.752-8.307 11.629-16.059 23.259-21.043 36.55h-110.756s0 0 0-0.554c0 0 0 0 0 0-3.877-9.414-9.414-18.829-14.952-27.136-1.661-2.216-3.323-4.43-4.984-7.2-4.43-6.645-9.414-12.184-14.952-18.275-2.216-2.216-3.877-4.43-6.091-6.645-7.2-6.645-14.398-12.737-22.152-18.275-1.107-0.554-1.661-1.661-2.768-2.216-8.307-5.538-17.168-9.968-26.027-14.398-3.323-1.661-6.645-2.768-9.968-3.877-7.2-2.768-13.845-4.984-21.043-6.645-3.323-0.554-6.645-1.661-9.968-2.216-10.522-2.216-21.597-3.323-32.673-3.323s-21.597 1.107-32.673 3.323c-3.323 0.554-6.645 1.661-9.968 2.216-7.2 1.661-14.398 3.877-21.043 6.645-3.323 1.107-6.645 2.216-9.968 3.877-8.861 3.877-17.721 8.861-26.027 14.398-1.107 0.554-1.661 1.107-2.768 2.216-7.752 5.538-15.506 11.629-22.152 18.275-2.216 2.216-4.43 4.43-6.091 6.645-5.538 5.538-10.522 11.629-14.952 18.275-1.661 2.216-3.323 4.43-4.984 7.2-5.538 8.861-10.522 17.721-14.952 27.136 0 0 0 0 0 0s0 0 0 0.554h-27.689c-7.752 0-13.845-6.091-13.845-13.845zM290.487 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 2.216-9.968 6.091-19.382 11.075-27.689 0.554-1.661 1.661-2.768 2.216-4.43 4.984-7.752 11.075-14.952 18.275-21.043 1.661-1.107 2.768-2.216 4.43-3.323 7.2-5.538 15.506-10.522 24.366-13.845 1.107 0 2.768-1.107 4.43-1.107 9.414-3.323 19.936-5.538 30.458-5.538s20.49 2.216 30.458 5.538c1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM733.513 858.113c-53.163 0-96.912-43.749-96.912-96.912 0-6.645 0.554-13.291 2.216-19.382 1.661-6.645 3.323-13.291 6.091-19.382 0 0 0-0.554 0-1.107 2.768-5.538 5.538-11.075 9.414-16.059 0.554-1.107 1.661-1.661 2.216-2.768 3.323-4.43 6.645-8.307 10.522-12.184 1.107-1.107 2.216-1.661 3.323-2.768 3.877-3.323 8.307-6.645 12.737-9.414 1.107-0.554 2.768-1.661 4.43-2.216 4.984-2.768 10.522-4.984 16.059-6.645 2.216-0.554 4.43-1.661 7.2-2.216 7.2-1.661 14.952-2.768 22.705-2.768 10.522 0 20.49 2.216 30.458 5.538 1.661 0 2.768 0.554 4.43 1.107 8.861 3.323 17.168 8.307 24.366 13.845 1.661 1.107 2.768 2.216 4.43 3.323 7.2 6.091 13.291 13.291 18.275 21.043 1.107 1.107 1.661 2.768 2.216 4.43 4.984 8.861 8.861 17.721 11.075 27.689 1.107 6.091 2.216 12.737 2.216 19.382 0 53.163-43.749 96.912-96.912 96.912zM705.823 470.466v-166.134h110.756c68.669 0 124.601 55.931 124.601 124.601v41.534h-235.356z"],"attrs":[{}],"grid":16,"tags":["truck","delivery","transport","vehicle","cargo"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":328,"id":256,"name":"truck","prevSize":24,"code":59904},"setIdx":0,"setId":1,"iconIdx":58},{"icon":{"paths":["M168.104 1023.75v0c-44.45 0-86.559-17.546-118.726-49.128-65.505-65.505-65.505-171.363 0-236.867l322.256-322.256c-29.242-113.462 2.34-235.698 85.389-318.747 83.634-83.634 206.454-116.387 320.502-85.389 15.206 4.094 26.904 15.791 30.997 30.997s0 30.997-11.113 42.11l-143.29 143.29 30.413 111.707 111.707 30.413 143.29-143.29c11.113-11.113 27.488-15.206 42.11-11.113 15.206 4.094 26.904 15.791 30.997 30.997 30.997 114.047-1.169 236.867-85.389 320.502-83.050 83.050-205.285 114.633-318.747 85.389l-322.256 322.256c-31.582 31.582-73.692 49.128-118.142 49.128zM668.742 89.148c-56.146 4.678-109.369 29.242-150.308 70.183-66.674 66.674-88.314 164.345-56.146 254.413 5.849 15.791 1.755 33.922-10.527 45.619l-340.973 340.973c-30.997 30.997-30.997 81.88 0 112.878 15.206 15.206 35.091 23.395 56.732 23.395v0c21.055 0 41.524-8.188 56.146-23.395l340.973-340.973c12.282-12.282 29.828-15.791 45.619-10.527 90.069 31.582 187.739 10.527 254.413-56.146 40.941-40.941 64.919-94.162 70.183-150.308l-95.332 95.332c-11.113 11.113-27.488 15.206-42.695 11.113l-160.252-43.864c-15.206-4.094-26.904-15.791-30.997-30.997l-43.864-160.252c-4.094-15.206 0-31.582 11.113-42.695l95.332-95.332z"],"attrs":[{}],"grid":16,"tags":["wrench","tool","fix","repair","adjust"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":325,"id":255,"name":"wrench","prevSize":24,"code":59903},"setIdx":0,"setId":1,"iconIdx":59},{"icon":{"paths":["M495.693 730.292h32.612c77.849 0 140.443-64.699 140.443-144.651v-389.243c0-79.953-63.121-144.651-140.443-144.651h-32.612c-77.849 0-140.443 64.699-140.443 144.651v388.718c0 79.953 63.121 144.651 140.443 144.651zM434.151 196.397c0-36.294 27.877-65.751 61.542-65.751h32.612c34.19 0 61.542 29.456 61.542 65.751v388.718c0 36.294-27.877 65.751-61.542 65.751h-32.612c-34.19 0-61.542-29.456-61.542-65.751v-388.718zM814.452 374.712v222.5c0 147.807-116.773 267.736-263.003 275.101v99.941c0 21.566-17.885 39.45-39.45 39.45s-39.45-17.885-39.45-39.45v-99.941c-146.229-7.364-263.002-127.293-263.002-275.101v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45v222.5c0 108.883 88.896 197.779 198.304 197.779h51.023c109.409 0 198.304-88.896 198.304-197.779v-222.5c0-21.566 17.885-39.45 39.45-39.45s39.45 17.885 39.45 39.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["microphone","sound","record","speak","audio"]},"attrs":[{}],"properties":{"order":323,"id":254,"name":"microphone","prevSize":24,"code":59898},"setIdx":0,"setId":1,"iconIdx":60},{"icon":{"paths":["M906.87 28.172h-85.757c-64.638 0-117.117 52.479-117.117 117.117v28.799l-607.985 130.557v-32.639c0-26.239-21.76-47.999-47.999-47.999s-47.999 21.76-47.999 47.999v447.99c0 26.239 21.76 47.999 47.999 47.999s47.999-21.76 47.999-47.999v-40.319l607.985 130.557v28.799c0 64.638 52.479 117.117 117.117 117.117h85.757c64.638 0 117.117-52.479 117.117-117.117v-693.744c0-64.638-52.479-117.117-117.117-117.117zM96.011 581.118v-178.556l607.985-130.557v439.669l-607.985-130.557zM927.989 839.033c0 11.52-9.6 21.119-21.119 21.119h-85.757c-11.52 0-21.119-9.6-21.119-21.119v-693.744c0-11.52 9.6-21.119 21.119-21.119h85.757c11.52 0 21.119 9.6 21.119 21.119v693.744zM574.079 872.311c-23.68 74.238-92.158 124.156-170.876 124.156-98.558 0-179.196-79.359-179.196-175.995 0-7.039 0-14.719 1.279-21.76 3.199-26.239 27.52-44.799 53.759-41.598s44.799 26.879 41.598 53.118c0 3.199 0 6.4 0 9.6 0 44.159 37.12 79.998 83.198 79.998 36.479 0 68.478-23.039 79.359-56.958 7.68-25.6 35.2-39.679 60.159-31.36 25.6 7.68 39.040 35.2 31.36 60.159z"],"attrs":[{}],"grid":16,"tags":["megaphone","announce","shout","broadcast","loud"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":322,"id":253,"name":"megaphone","prevSize":24,"code":59899},"setIdx":0,"setId":1,"iconIdx":61},{"icon":{"paths":["M1023.949 776.232c0 27.083-22.46 49.543-49.543 49.543h-805.246l80.59 80.59c19.156 19.156 19.156 50.864 0 70.022-9.909 9.909-22.46 14.533-35.010 14.533s-25.101-4.625-35.010-14.533l-165.145-165.145c-4.625-4.625-7.927-9.909-10.57-15.854-5.284-11.89-5.284-25.763 0-37.653 2.643-5.945 5.945-11.229 10.57-15.854l165.145-165.145c19.156-19.156 50.864-19.156 70.022 0s19.156 50.864 0 70.022l-80.59 80.59h805.246c27.083 0 49.543 22.46 49.543 49.543zM49.594 297.311h805.246l-80.59 80.59c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l165.145-165.145c4.625-4.625 7.927-9.909 10.57-15.854 5.284-11.89 5.284-25.763 0-37.653-2.643-5.945-5.945-11.229-10.57-15.854l-165.145-165.145c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l80.59 80.59h-805.246c-27.083 0-49.543 22.46-49.543 49.543s22.46 49.543 49.543 49.543z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-right-arrow-left","bidirectional","left-and-right","alternation","back-and-forth"]},"attrs":[{}],"properties":{"order":321,"id":252,"name":"arrow-right-arrow-left","prevSize":24,"code":59900},"setIdx":0,"setId":1,"iconIdx":62},{"icon":{"paths":["M609.223 618.817c-17.27 69.72-134.322 31.981-172.7 22.386l30.702-123.449c38.378 9.594 159.908 28.143 141.997 101.061zM509.441 348.895l-28.143 111.935c31.981 7.676 129.844 40.297 145.835-23.027 15.991-65.882-85.71-81.233-117.692-88.909zM1008.351 635.449c-68.44 273.76-346.039 440.703-620.44 372.904-273.76-68.44-441.343-346.039-372.904-619.8 68.44-274.4 346.039-440.703 620.44-372.904 273.76 68.44 441.343 346.039 372.904 619.8zM343.778 597.71c-2.559 7.035-9.594 17.27-25.586 13.432-2.559 0-40.937-10.235-40.937-10.235l-28.143 63.963 72.918 17.91c14.072 3.838 26.864 7.035 40.297 10.873l-23.027 92.747 55.648 14.072 23.027-92.106c15.351 4.478 30.062 7.676 44.774 11.513l-23.027 91.466 56.288 14.072 23.027-92.747c95.944 17.91 168.222 10.873 198.285-76.115 24.305-69.72-1.279-110.017-51.81-136.241 36.459-8.316 63.963-32.621 71.639-82.512 10.235-67.801-41.575-104.899-112.574-128.565l23.027-92.747-56.288-14.072-22.386 89.547c-14.711-3.838-30.062-7.035-45.413-10.873l22.386-90.188-55.648-14.072-23.027 92.106c-12.153-2.559-24.305-5.757-35.819-8.316l-77.395-19.829-14.711 60.126s40.937 9.594 40.937 10.235c22.386 5.757 26.224 20.468 26.224 32.621l-63.323 252.653z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bitcoin","cryptocurrency","digital","currency","btc","blockchain"]},"attrs":[{}],"properties":{"order":320,"id":251,"name":"bitcoin","prevSize":24,"code":59901},"setIdx":0,"setId":1,"iconIdx":63},{"icon":{"paths":["M290.603 885.606h-83.024c-38.191 0-69.186-30.995-69.186-69.186v-664.188c0-38.191 30.995-69.186 69.186-69.186h207.559v262.908c0 22.693 18.819 41.512 41.512 41.512h265.675c5.535 16.051 20.48 27.674 38.745 27.674 22.693 0 41.512-18.819 41.512-41.512v-27.674c0-5.535-1.107-11.069-3.321-16.051s-4.981-9.409-8.856-13.284l-304.42-304.42c-3.875-3.875-8.302-6.642-13.284-8.856s-10.517-3.321-16.051-3.321h-249.071c-84.13 0-152.209 68.079-152.209 152.209v664.188c0 84.13 68.079 152.209 152.209 152.209h83.024c22.693 0 41.512-18.819 41.512-41.512s-18.819-41.512-41.512-41.512zM498.162 141.715l162.726 162.726h-162.726v-162.726zM933.206 477.13c-21.032-21.032-52.029-33.763-84.13-34.316-33.209-1.66-64.758 11.069-85.791 32.655l-353.68 354.234c-7.196 7.196-11.069 16.051-12.177 26.014l-9.963 123.429c-1.107 12.177 3.321 24.353 12.177 32.655 7.748 7.748 18.265 12.177 29.335 12.177 1.107 0 2.214 0 3.875 0l124.535-11.623c9.409-1.107 18.819-4.981 25.461-12.177l353.68-354.234c44.279-43.726 42.618-122.875-3.321-168.814zM877.858 587.275l-343.164 343.717-60.331 5.535 4.427-58.67 343.164-343.717c5.535-5.535 15.498-7.748 25.461-8.302 11.069 0 21.032 3.875 27.121 9.963 13.284 12.73 14.944 39.851 3.321 51.475z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-edit","modify","amend","revise","change"]},"attrs":[{}],"properties":{"order":319,"id":250,"name":"file-edit","prevSize":24,"code":59894},"setIdx":0,"setId":1,"iconIdx":64},{"icon":{"paths":["M1021.466 949.618l-177.541-496.402c-12.469-32.659-40.377-52.846-72.441-52.846s-59.379 20.189-73.035 54.035l-176.948 495.215c-8.313 23.158 3.563 48.691 26.72 57.003s48.691-3.563 57.003-26.72l36.814-102.724h258.296l36.814 102.724c6.531 18.408 23.752 29.689 42.158 29.689 4.75 0 10.094-0.594 14.845-2.376 23.158-8.313 35.033-33.846 26.72-57.003zM674.697 787.515l97.38-272.547 97.38 272.547h-194.761zM523.282 265.579c-134.195 211.981-255.327 340.238-402.585 425.743-7.125 4.157-14.845 5.938-21.97 5.938-15.438 0-30.283-7.72-38.595-21.97-12.469-21.376-5.344-48.691 16.032-60.566 124.694-72.441 226.826-176.354 341.425-348.55h-373.489c-24.345 0-44.534-20.189-44.534-44.534s20.189-44.534 44.534-44.534h222.669v-117.569c0-24.345 20.189-44.534 44.534-44.534s44.534 20.189 44.534 44.534v117.569h222.669c24.345 0 44.534 20.189 44.534 44.534s-20.189 44.534-44.534 44.534h-55.816zM525.657 697.26c-7.72 0-15.438-1.781-22.563-5.938-38.595-22.563-76.004-47.502-111.038-73.63-19.595-14.845-23.752-42.752-8.907-62.347s42.752-23.752 62.347-8.907c32.064 24.345 67.097 46.909 102.724 67.691 21.376 12.469 28.502 39.784 16.032 61.16-8.313 14.251-23.158 21.97-38.595 21.97z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["language","linguistics","words","communication","dialect"]},"attrs":[{}],"properties":{"order":318,"id":249,"name":"language","prevSize":24,"code":59895},"setIdx":0,"setId":1,"iconIdx":65},{"icon":{"paths":["M696.881 725.324c-23.323 0-42.665 19.342-42.665 42.665v85.33c0 39.252-31.856 71.108-71.108 71.108h-426.648c-39.252 0-71.108-31.856-71.108-71.108v-682.637c0-39.252 31.856-71.108 71.108-71.108h184.881v270.211c0 23.323 19.342 42.665 42.665 42.665h270.211v71.108c0 23.323 19.342 42.665 42.665 42.665s42.665-19.342 42.665-42.665v-113.772c0-11.377-4.55-22.186-12.515-30.149l-312.876-312.876c-7.964-7.964-18.773-12.515-30.149-12.515h-227.546c-86.467 0-156.437 69.97-156.437 156.437v682.637c0 86.467 69.97 156.437 156.437 156.437h426.648c86.467 0 156.437-69.97 156.437-156.437v-85.33c0-23.323-19.342-42.665-42.665-42.665zM426.67 159.872l167.246 167.246h-167.246v-167.246zM1020.565 642.27c-2.276 5.12-5.12 9.67-9.102 13.653l-170.659 170.659c-8.533 8.533-19.342 12.515-30.149 12.515s-21.616-3.982-30.149-12.515c-16.497-16.497-16.497-43.802 0-60.3l97.845-97.845h-494.343c-23.323 0-42.665-19.342-42.665-42.665s19.342-42.665 42.665-42.665h494.343l-97.845-97.845c-16.497-16.497-16.497-43.802 0-60.3s43.802-16.497 60.3 0l170.659 170.659c3.982 3.982 6.826 8.533 9.102 13.653 4.55 10.24 4.55 22.186 0 32.425z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-export","send","save","dispatch"]},"attrs":[{}],"properties":{"order":317,"id":248,"name":"file-export","prevSize":24,"code":59896},"setIdx":0,"setId":1,"iconIdx":66},{"icon":{"paths":["M537.031 668.444h-494.364c-23.324 0-42.667-19.343-42.667-42.667s19.343-42.667 42.667-42.667h494.364l-97.849-97.849c-16.497-16.497-16.497-43.804 0-60.303s43.804-16.497 60.303 0l170.667 170.667c3.983 3.983 6.827 8.533 9.103 13.653 4.551 10.24 4.551 22.187 0 32.427-2.276 5.12-5.12 9.671-9.103 13.653l-170.667 170.667c-8.533 8.533-19.343 12.516-30.151 12.516s-21.617-3.983-30.151-12.516c-16.497-16.497-16.497-43.804 0-60.303l97.849-97.849zM1024 369.777v483.556c0 86.471-69.973 156.444-156.444 156.444h-426.667c-86.471 0-156.444-69.973-156.444-156.444v-56.889c0-23.324 19.343-42.667 42.667-42.667s42.667 19.343 42.667 42.667v56.889c0 39.253 31.857 71.111 71.111 71.111h426.667c39.253 0 71.111-31.857 71.111-71.111v-440.889h-270.223c-23.324 0-42.667-19.343-42.667-42.667v-270.223h-184.889c-39.253 0-71.111 31.857-71.111 71.111v284.444c0 23.324-19.343 42.667-42.667 42.667s-42.667-19.343-42.667-42.667v-284.444c0-86.471 69.973-156.444 156.444-156.444h227.556c11.377 0 22.187 4.551 30.151 12.516l312.889 312.889c7.964 7.964 12.516 18.773 12.516 30.151zM711.111 327.111h167.253l-167.253-167.253v167.253z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-import","get","data","retrieve","fetch"]},"attrs":[{}],"properties":{"order":316,"id":247,"name":"file-import","prevSize":24,"code":59897},"setIdx":0,"setId":1,"iconIdx":67},{"icon":{"paths":["M894.076 334.712l-321.811-321.811c-8.191-8.191-19.309-12.873-31.010-12.873h-263.299c-88.936 0-160.905 71.968-160.905 160.905v702.132c0 88.936 71.968 160.905 160.905 160.905h468.087c88.936 0 160.905-71.968 160.905-160.905v-497.344c0-11.702-4.68-22.819-12.873-31.010zM585.138 149.817l172.022 172.022h-172.022v-172.022zM746.044 936.204h-468.087c-40.373 0-73.138-32.766-73.138-73.138v-702.132c0-40.373 32.766-73.138 73.138-73.138h219.416v277.928c0 23.989 19.894 43.883 43.883 43.883h277.928v453.46c0 40.373-32.766 73.138-73.138 73.138zM758.916 554.128l-87.766 292.554c-5.266 17.553-21.65 30.426-40.373 31.010-0.586 0-1.17 0-1.755 0-18.139 0-33.937-11.118-40.958-27.5l-76.065-190.745-76.065 190.745c-7.021 17.553-23.989 28.671-42.713 27.5-18.723-0.586-34.521-13.457-40.373-31.010l-87.766-292.554c-7.021-23.405 6.436-47.979 29.255-54.415 23.405-7.021 47.394 6.436 54.415 29.255l51.49 172.022 70.213-176.118c13.457-33.351 68.458-33.351 81.331 0l70.213 176.118 51.49-172.022c7.021-23.405 31.596-36.276 54.415-29.255 23.405 7.021 36.276 31.596 29.255 54.415z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["file-word","document","edit","write","microsoft"]},"attrs":[{}],"properties":{"order":311,"id":246,"name":"file-word","prevSize":24,"code":59889},"setIdx":0,"setId":1,"iconIdx":68},{"icon":{"paths":["M950.832 263.329h-81.915c23.405-28.085 38.032-63.192 38.032-102.395 0-88.936-71.968-160.905-160.905-160.905-98.298 0-184.895 52.074-234.044 129.309-49.149-77.234-135.746-129.309-234.044-129.309-88.936 0-160.905 71.968-160.905 160.905 0 39.203 14.628 74.309 38.032 102.395h-81.915c-40.373 0-73.138 32.766-73.138 73.138v146.278c0 35.107 25.16 63.192 58.511 70.213v397.874c0 40.373 32.766 73.138 73.138 73.138h760.643c40.373 0 73.138-32.766 73.138-73.138v-397.874c33.351-7.021 58.511-35.107 58.511-70.213v-146.278c0-40.373-32.766-73.138-73.138-73.138zM936.204 468.117h-380.321v-117.021h380.321v117.021zM746.044 87.796c40.373 0 73.138 32.766 73.138 73.138s-32.766 73.138-73.138 73.138h-184.895c19.894-83.67 95.373-146.278 184.895-146.278zM277.956 87.796c89.522 0 165.001 62.606 184.895 146.278h-184.895c-40.373 0-73.138-32.766-73.138-73.138s32.766-73.138 73.138-73.138zM87.796 351.095h380.321v117.021h-380.321v-117.021zM146.306 555.883h321.811v380.321h-321.811v-380.321zM877.694 936.204h-321.811v-380.321h321.811v380.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["gift","present","suprise","box","birthday"]},"attrs":[{}],"properties":{"order":312,"id":245,"name":"gift","prevSize":24,"code":59890},"setIdx":0,"setId":1,"iconIdx":69},{"icon":{"paths":["M417.791 482.743c0-23.991 19.896-43.886 43.886-43.886h73.143v-73.143c0-23.991 19.896-43.886 43.886-43.886s43.886 19.896 43.886 43.886v73.143h73.143c23.991 0 43.886 19.896 43.886 43.886s-19.896 43.886-43.886 43.886h-73.143v73.143c0 23.991-19.896 43.886-43.886 43.886s-43.886-19.896-43.886-43.886v-73.143h-73.143c-23.991 0-43.886-19.896-43.886-43.886zM468.114 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM848.461 906.976c0 48.567-39.205 87.772-87.772 87.772s-87.772-39.205-87.772-87.772 39.205-87.772 87.772-87.772 87.772 39.205 87.772 87.772zM1022.836 259.215l-117.029 468.119c-4.681 19.31-22.235 33.354-42.716 33.354h-585.15c-21.065 0-39.205-15.213-43.301-36.279l-110.593-607.385h-80.165c-23.991 0-43.886-19.896-43.886-43.886s19.896-43.886 43.886-43.886h117.029c21.065 0 39.205 15.213 43.301 36.279l25.162 139.266h750.746c13.458 0 26.332 6.436 34.523 16.969s11.118 24.576 8.192 37.45zM923.945 292.569h-678.773l69.048 380.347h514.346l94.794-380.347z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["cart-plus","add-to-cart","purchase"]},"attrs":[{}],"properties":{"order":313,"id":244,"name":"cart-plus","prevSize":24,"code":59891},"setIdx":0,"setId":1,"iconIdx":70},{"icon":{"paths":["M1023.898 103.121v369.207c0 56.948-46.711 103.659-103.659 103.659h-103.019v-575.886h103.019c57.589 0 103.659 46.071 103.659 103.019zM85.844 79.445l-84.463 479.905c-10.238 58.868 34.553 112.617 94.702 112.617h305.86v223.955c0 70.386 57.589 127.974 127.335 127.974h5.759c25.595 0 48.631-15.357 58.868-39.033l174.685-408.879v-575.886s-588.683 0-588.683 0c-46.711 0-86.383 33.274-94.702 79.345z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-down-fill","disapproval","dislike","disagreement","refusal"]},"attrs":[{}],"properties":{"order":314,"id":243,"name":"thumbs-down-fill","prevSize":24,"code":59892},"setIdx":0,"setId":1,"iconIdx":71},{"icon":{"paths":["M207.428 448.014v575.872h-103.017c-57.587 0-103.657-46.070-103.657-103.017v-369.198c0-56.947 46.71-103.657 103.657-103.657h103.017zM927.907 352.035h-305.852v-223.95c0-70.384-57.587-127.971-127.332-127.971h-5.759c-25.595 0-48.63 15.357-58.866 39.032l-174.681 408.869v575.872s588.668 0 588.668 0c46.71 0 86.381-33.273 94.699-79.343l84.461-479.893c10.238-58.866-34.552-112.614-94.699-112.614z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["thumbs-up-fill","approval","like","agreement","support"]},"attrs":[{}],"properties":{"order":315,"id":242,"name":"thumbs-up-fill","prevSize":24,"code":59893},"setIdx":0,"setId":1,"iconIdx":72},{"icon":{"paths":["M1020.467 528.967c-2.341 5.266-5.266 9.946-9.362 14.042l-146.281 146.281c-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873c-16.967-16.967-16.967-45.053 0-62.024l71.384-71.384h-318.304v318.304l71.384-71.384c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-146.281 146.281c-4.096 4.096-8.774 7.021-14.042 9.362s-11.117 3.513-16.967 3.513-11.701-1.17-16.967-3.513c-5.266-2.341-9.946-5.266-14.042-9.362l-146.281-146.281c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l71.384 71.384v-318.304h-318.304l71.384 71.384c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-146.281-146.281c-4.096-4.096-7.021-8.774-9.362-14.042-4.681-10.532-4.681-22.82 0-33.35 2.341-5.266 5.266-9.946 9.362-14.042l146.281-146.281c16.967-16.967 45.053-16.967 62.024 0s16.967 45.053 0 62.024l-71.384 71.384h318.304v-318.889l-71.384 71.384c-16.967 16.967-45.053 16.967-62.024 0s-16.967-45.053 0-62.024l146.281-146.281c4.096-4.096 8.774-7.021 14.042-9.362 10.532-4.681 22.82-4.681 33.35 0 5.266 2.341 9.946 5.266 14.042 9.362l146.281 146.281c16.967 16.967 16.967 45.053 0 62.024-8.774 8.774-19.895 12.873-31.011 12.873s-22.234-4.096-31.011-12.873l-71.384-71.384v318.304h318.304l-71.384-71.384c-16.967-16.967-16.967-45.053 0-62.024s45.053-16.967 62.024 0l146.281 146.281c4.096 4.096 7.021 8.774 9.362 14.042 4.681 10.532 4.681 22.82 0 33.35z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-alt","direction","move"]},"attrs":[{}],"properties":{"order":310,"id":241,"name":"arrows-alt","prevSize":24,"code":59888},"setIdx":0,"setId":1,"iconIdx":73},{"icon":{"paths":["M695.789 315.083h-367.579c-14.704 0-26.255-11.553-26.255-26.255v-78.767c0-14.704 11.553-26.255 26.255-26.255h367.579c14.704 0 26.255 11.553 26.255 26.255v78.767c0 14.704-11.553 26.255-26.255 26.255zM722.045 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 472.617v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM406.978 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 643.278v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM722.045 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-52.512c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h52.512c14.704 0 26.255-11.553 26.255-26.255zM564.512 813.939v-52.512c0-14.704-11.553-26.255-26.255-26.255h-210.045c-14.704 0-26.255 11.553-26.255 26.255v52.512c0 14.704 11.553 26.255 26.255 26.255h210.045c14.704 0 26.255-11.553 26.255-26.255zM892.706 905.834v-787.668c0-65.114-53.036-118.15-118.15-118.15h-525.113c-65.114 0-118.15 53.036-118.15 118.15v787.668c0 65.114 53.036 118.15 118.15 118.15h525.113c65.114 0 118.15-53.036 118.15-118.15zM774.556 78.782c21.529 0 39.383 17.854 39.383 39.383v787.668c0 21.529-17.854 39.383-39.383 39.383h-525.113c-21.529 0-39.383-17.854-39.383-39.383v-787.668c0-21.529 17.854-39.383 39.383-39.383h525.113z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["calculator","math","addition","subtraction","calculation"]},"attrs":[{}],"properties":{"order":308,"id":240,"name":"calculator","prevSize":24,"code":59887},"setIdx":0,"setId":1,"iconIdx":74},{"icon":{"paths":["M117.634 249.75l80.59-80.59v375.869c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-375.869l80.59 80.59c9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533c19.156-19.156 19.156-50.864 0-70.022l-165.145-165.145c-4.625-4.625-9.909-7.927-15.854-10.57-11.89-5.284-25.763-5.284-37.653 0-5.945 2.643-11.229 5.945-15.854 10.57l-165.145 165.145c-19.156 19.156-19.156 50.864 0 70.022s50.864 19.156 70.022 0z","M906.366 774.25l-80.59 80.59v-375.869c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v375.869l-80.59-80.59c-19.156-19.156-50.864-19.156-70.022 0s-19.156 50.864 0 70.022l165.145 165.145c4.625 4.625 9.909 7.927 15.854 10.57s12.552 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.854-10.57l165.145-165.145c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0z","M976.388 117.634c19.156-19.156 19.156-50.864 0-70.022s-50.864-19.156-70.022 0l-80.59 80.59v-78.608c0-27.083-22.46-49.543-49.543-49.543s-49.543 22.46-49.543 49.543v177.695l-679.075 679.075c-19.156 19.156-19.156 50.864 0 70.022 9.909 9.909 22.46 14.533 35.010 14.533s25.101-4.625 35.010-14.533l80.59-80.59v78.608c0 27.083 22.46 49.543 49.543 49.543s49.543-22.46 49.543-49.543v-177.695l679.075-679.075z"],"attrs":[{},{},{}],"grid":16,"tags":["sort-alt-slash","remove-sorting","unsorted","orderless"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":306,"id":239,"name":"sort-alt-slash","prevSize":24,"code":59886},"setIdx":0,"setId":1,"iconIdx":75},{"icon":{"paths":["M1020.451 495.033c-2.348-5.441-5.502-10.097-9.37-14.051l-234.032-234.032c-8.033-8.604-19.443-13.967-32.105-13.967-24.235 0-43.882 19.647-43.882 43.882 0 12.663 5.363 24.072 13.941 32.081l0.026 0.023 159.147 159.147h-724.353l159.147-159.147c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-234.040 234.040c-3.859 3.945-7.014 8.601-9.247 13.748l-0.114 0.295c-2.222 5-3.515 10.833-3.515 16.967s1.293 11.968 3.623 17.242l-0.108-0.273c2.348 5.441 5.502 10.097 9.37 14.051l234.032 234.032c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0c7.929-7.939 12.834-18.902 12.834-31.010s-4.904-23.071-12.834-31.011v0l-159.147-159.147h724.353l-159.147 159.147c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l234.040-234.040c3.859-3.945 7.014-8.601 9.247-13.748l0.114-0.295c2.222-5 3.515-10.833 3.515-16.967s-1.293-11.968-3.623-17.242l0.108 0.273z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-h","horizontal","left-and-right","bi-directional","move"]},"attrs":[{}],"properties":{"order":305,"id":238,"name":"arrows-h","prevSize":24,"code":59884},"setIdx":0,"setId":1,"iconIdx":76},{"icon":{"paths":["M528.967 1020.451c5.441-2.348 10.097-5.502 14.051-9.37l234.032-234.032c7.297-7.815 11.777-18.343 11.777-29.915 0-24.235-19.647-43.882-43.882-43.882-11.574 0-22.1 4.48-29.942 11.802l0.026-0.023-159.147 159.147v-724.353l159.147 159.147c7.815 7.297 18.343 11.777 29.915 11.777 24.235 0 43.882-19.647 43.882-43.882 0-11.574-4.48-22.1-11.802-29.942l0.023 0.026-234.040-234.040c-3.945-3.859-8.601-7.014-13.748-9.247l-0.295-0.114c-5-2.222-10.833-3.515-16.967-3.515s-11.968 1.293-17.242 3.623l0.273-0.108c-5.441 2.348-10.097 5.502-14.051 9.37l-234.032 234.032c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0c7.939 7.929 18.902 12.834 31.010 12.834s23.071-4.904 31.011-12.834v0l159.147-159.147v724.353l-159.147-159.147c-7.939-7.929-18.902-12.834-31.010-12.834s-23.071 4.904-31.011 12.834v0c-7.929 7.939-12.834 18.902-12.834 31.010s4.904 23.071 12.834 31.011v0l234.040 234.040c3.945 3.859 8.601 7.014 13.748 9.247l0.295 0.114c5 2.222 10.833 3.515 16.967 3.515s11.968-1.293 17.242-3.623l-0.273 0.108z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrows-v","vertical","up-and-down","bi-directional","move"]},"attrs":[{}],"properties":{"order":304,"id":237,"name":"arrows-v","prevSize":24,"code":59885},"setIdx":0,"setId":1,"iconIdx":77},{"icon":{"paths":["M836.060 936.086h-552.19l116.989-164.955c5.016-7 8.065-15.709 8.189-25.123v-190.138h190.108c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0h-191.863v-190.108c-0.156-2.816-0.245-6.11-0.245-9.427 0-99.824 80.924-180.749 180.749-180.749 1.732 0 3.459 0.025 5.178 0.073l-0.254-0.005c3.537-0.243 7.666-0.381 11.827-0.381 101.439 0 183.673 82.233 183.673 183.673 0 5.695-0.259 11.328-0.766 16.89l0.052-0.716v58.495c0 24.229 19.642 43.871 43.871 43.871s43.871-19.642 43.871-43.871v0-58.495c0.352-5.164 0.553-11.193 0.553-17.269 0-149.252-120.994-270.246-270.246-270.246-4.515 0-9.003 0.111-13.464 0.329l0.628-0.025c-1.804-0.044-3.929-0.069-6.060-0.069-147.637 0-267.321 119.684-267.321 267.321 0 3.728 0.077 7.436 0.228 11.127l-0.018-0.528v190.108h-131.613c-24.229 0-43.871 19.642-43.871 43.871s19.642 43.871 43.871 43.871v0h131.613v175.484l-155.595 223.45c-3.958 6.515-6.3 14.39-6.3 22.813s2.343 16.298 6.411 23.010l-0.111-0.197c7.358 14.007 21.805 23.398 38.447 23.398 0.056 0 0.112 0 0.169 0h633.489c24.229 0 43.871-19.642 43.871-43.871s-19.642-43.871-43.871-43.871v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["pound","money","currency","sterling","uk"]},"attrs":[{}],"properties":{"order":303,"id":236,"name":"pound","prevSize":24,"code":59883},"setIdx":0,"setId":1,"iconIdx":78},{"icon":{"paths":["M727.036 469.12l-70.398-16 55.038 78.078v242.556l187.516-156.157v-265.595l-86.398 30.719-85.758 86.398z","M289.285 469.12l-86.398-86.398-85.758-30.719v265.595l187.516 156.157v-242.556l55.038-78.078-70.398 16z","M586.238 476.8h-156.157l-39.040-23.68-62.718 94.078v351.993l46.72 69.759 55.038 55.038h156.157l55.038-55.038 46.72-69.759v-351.993l-62.718-94.078-39.040 23.68z","M711.676 922.231l101.117-101.758v-101.117l-101.117 85.758v117.118z","M202.886 820.473l101.758 101.758v-117.118l-101.758-85.758v101.117z","M453.122 445.442h39.679v-445.431h-86.398l-62.079 147.837-282.234-23.040 47.359 195.836 335.993 124.797h7.68z","M671.997 147.848l-62.079-147.837h-86.398v447.991h52.479l335.993-127.997 47.999-191.996z","M852.474 109.449l-110.078-109.438h-109.438l55.038 124.797 164.476-15.36z","M382.722 0.011h-109.438l-109.438 109.438 164.476 15.36 54.399-124.797z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["prime","logo"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":307,"id":235,"name":"prime","prevSize":24,"code":59882},"setIdx":0,"setId":1,"iconIdx":79},{"icon":{"paths":["M589.605 64.373v-18.004c-0.345-25.576-20.987-46.218-46.53-46.563h-0.033c-300.373 1.794-543.179 245.708-543.179 546.331 0 98.823 26.237 191.517 72.126 271.496l-1.409-2.663c8.24 13.842 23.126 22.972 40.145 22.972 0.074 0 0.148 0 0.221 0h-0.012c8.464-0.017 16.386-2.321 23.186-6.325l-0.215 0.116 18.004-9.313c88.223 122.529 230.468 201.375 391.129 201.375 265.391 0 480.531-215.14 480.531-480.531 0-248.992-189.376-453.753-431.953-478.105l-2.014-0.163zM496.478 95.416v420.93l-365.676 209.844c-24.009-53.406-37.995-115.765-37.995-181.391 0-232.603 175.709-424.166 401.636-449.201l2.036-0.183zM543.042 931.068c-126.56-0.365-238.867-61.070-309.71-154.848l-0.712-0.982 333.392-191.84c14.165-7.849 23.596-22.711 23.596-39.775 0-0.204-0.001-0.407-0.004-0.611v0.031-384.921c192.214 25.131 339.099 187.876 339.099 384.928 0 213.47-172.379 386.677-385.534 388.018h-0.128z"],"attrs":[{}],"grid":16,"tags":["chart-pie","graph","statistics","proportion"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":301,"id":234,"name":"chart-pie","prevSize":24,"code":59881},"setIdx":0,"setId":1,"iconIdx":80},{"icon":{"paths":["M399.361 614.401c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2c28.276 0 51.199 22.923 51.199 51.2v0c0 28.276-22.923 51.2-51.199 51.2v0zM1023.999 512c0 282.77-229.23 512-512 512s-512-229.23-512-512c0-282.77 229.23-512 512-512v0c282.769 0 512 229.23 512 512v0zM750.721 426.88c-18.359 1.113-34.69 8.976-46.715 21.114l-0.006 0.006c-49.923-33.418-111.167-53.62-177.080-54.397l-0.199-0.001 35.84-161.921 114.56 25.601c-0.003 0.191-0.005 0.416-0.005 0.641 0 27.924 22.636 50.56 50.56 50.56 0.002 0 0.003 0 0.005 0v0c28.355-0.361 51.2-23.43 51.2-51.836 0-0.001 0-0.003 0-0.004v0c0.016-0.492 0.027-1.071 0.027-1.653 0-27.924-22.637-50.56-50.561-50.56-20.408 0-37.99 12.090-45.978 29.498l-0.129 0.315-128-28.16c-0.688-0.138-1.481-0.217-2.292-0.217-5.656 0-10.412 3.862-11.77 9.093l-0.018 0.084-39.679 178.56c-66.101 0.974-127.301 21.143-178.501 55.164l1.221-0.764c-12.464-12.858-29.895-20.838-49.191-20.838-37.821 0-68.48 30.66-68.48 68.48 0 26.584 15.148 49.632 37.286 60.978l0.386 0.18c-0.468 4.795-0.733 10.366-0.733 16.001s0.267 11.205 0.787 16.701l-0.054-0.702c0 108.16 122.239 196.48 272.64 196.48s272.64-88.32 272.64-196.48c0-0.084 0-0.183 0-0.282 0-11.484-1.399-22.639-4.039-33.308l0.2 0.95c20.889-11.994 34.732-34.174 34.732-59.588 0-36.756-28.957-66.749-65.302-68.408l-0.15-0.006zM608.64 666.88c-27.226 17.349-60.409 27.649-96 27.649s-68.773-10.302-96.732-28.086l0.732 0.435c-2.268-2.080-5.305-3.355-8.64-3.355s-6.372 1.275-8.649 3.365l0.009-0.009c-2.426 2.23-3.939 5.418-3.939 8.959s1.514 6.729 3.93 8.952l0.009 0.008c31.918 21.918 71.391 35.004 113.921 35.004s82.002-13.086 114.611-35.451l-0.692 0.447c2.426-2.231 3.939-5.418 3.939-8.959s-1.514-6.729-3.93-8.952l-0.009-0.007c-2.337-2.457-5.63-3.984-9.28-3.984s-6.943 1.527-9.274 3.978l-0.005 0.006zM624.639 512c-28.277 0-51.2 22.923-51.2 51.2s22.923 51.2 51.2 51.2c28.276 0 51.199-22.923 51.199-51.2v0c0-28.277-22.923-51.2-51.199-51.2v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["reddit","social","news","discussions","forum","upvote"]},"attrs":[{}],"properties":{"order":299,"id":233,"name":"reddit","prevSize":24,"code":59880},"setIdx":0,"setId":1,"iconIdx":81},{"icon":{"paths":["M367.461 188.397c-7.939-7.93-18.905-12.836-31.014-12.836s-23.074 4.905-31.015 12.836v0l-292.589 292.589c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0l292.589 292.589c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0l-261.574-261.574 261.574-261.574c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z","M1011.156 480.986l-292.589-292.589c-7.817-7.298-18.345-11.779-29.92-11.779-24.239 0-43.889 19.649-43.889 43.889 0 11.575 4.481 22.104 11.803 29.946l-0.023-0.027 261.574 261.574-261.574 261.574c-7.93 7.939-12.836 18.905-12.836 31.014s4.905 23.074 12.836 31.015v0c7.939 7.93 18.905 12.836 31.014 12.836s23.074-4.905 31.015-12.836v0l292.589-292.589c7.93-7.939 12.836-18.905 12.836-31.014s-4.905-23.074-12.836-31.015v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["code","programming","software","developer","script"]},"attrs":[{},{}],"properties":{"order":298,"id":232,"name":"code","prevSize":24,"code":59879},"setIdx":0,"setId":1,"iconIdx":82},{"icon":{"paths":["M936.767 0.034c-27.214 0.367-49.178 22.331-49.545 49.509v160.562l-55.49-55.49c-86.69-87.405-206.835-141.515-339.617-141.515-209.345 0-387.277 134.501-452.092 321.801l-1.011 3.36c-2.53 5.71-4.002 12.369-4.002 19.374 0 21.825 14.301 40.308 34.044 46.591l0.347 0.094c2.483 0.454 5.34 0.712 8.257 0.712s5.775-0.259 8.55-0.756l-0.293 0.043c21.606-0.226 39.922-14.066 46.794-33.339l0.108-0.351c19.528-56.988 50.528-105.653 90.48-145.309l0.022-0.022c68.806-68.546 163.72-110.925 268.534-110.925s199.729 42.378 268.547 110.936l55.478 55.478h-159.205c-27.363 0-49.545 22.182-49.545 49.545s22.182 49.545 49.545 49.545v0h280.095c0.198 0.003 0.432 0.005 0.666 0.005 26.997 0 48.884-21.887 48.884-48.884 0-0.234-0.002-0.468-0.005-0.7v0.036-280.755c0-27.363-22.182-49.545-49.545-49.545v0z","M953.281 622.981c-5.442-2.202-11.755-3.479-18.366-3.479-22.122 0-40.903 14.308-47.591 34.174l-0.104 0.355c-19.528 56.988-50.528 105.653-90.48 145.309l-0.022 0.022c-68.806 68.546-163.72 110.925-268.534 110.925s-199.729-42.378-268.547-110.936l-55.478-55.478h163.169c27.363 0 49.545-22.182 49.545-49.545s-22.182-49.545-49.545-49.545v0h-280.095c-0.198-0.003-0.432-0.005-0.666-0.005-26.997 0-48.884 21.887-48.884 48.884 0 0.234 0.002 0.468 0.005 0.7v-0.036 280.095c0 27.363 22.182 49.545 49.545 49.545s49.545-22.182 49.545-49.545v0-160.526l55.49 55.49c86.69 87.405 206.835 141.515 339.617 141.515 209.345 0 387.277-134.501 452.092-321.801l1.011-3.36c1.72-4.786 2.714-10.307 2.714-16.060 0-21.835-14.317-40.328-34.076-46.602l-0.347-0.094z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sync","update","refresh","reload","synchronize"]},"attrs":[{},{}],"properties":{"order":297,"id":231,"name":"sync","prevSize":24,"code":59878},"setIdx":0,"setId":1,"iconIdx":83},{"icon":{"paths":["M950.857 292.571h-175.543v-29.257c0-145.425-117.889-263.314-263.314-263.314s-263.314 117.889-263.314 263.314v0 29.257h-175.543c-40.395 0-73.142 32.747-73.142 73.142v0 497.372c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-497.372c0-40.395-32.747-73.142-73.142-73.142v0zM336.457 263.315c0-96.949 78.594-175.543 175.543-175.543s175.543 78.594 175.543 175.543v0 29.257h-351.086zM936.228 863.086c0 40.395-32.747 73.142-73.142 73.142v0h-702.171c-40.395 0-73.142-32.747-73.142-73.142v0-482.743h160.914v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h351.086v131.657c0 24.237 19.648 43.886 43.886 43.886s43.886-19.648 43.886-43.886v0-131.657h160.914z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shopping-bag","retail","purchase","buy","shop"]},"attrs":[{}],"properties":{"order":296,"id":230,"name":"shopping-bag","prevSize":24,"code":59877},"setIdx":0,"setId":1,"iconIdx":84},{"icon":{"paths":["M1023.969 301.19v-180.695c0-33.265-26.967-60.232-60.232-60.232v0h-903.474c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0c-33.265 0-60.232 26.967-60.232 60.232v0 180.695c0 33.265 26.967 60.232 60.232 60.232v0h903.474c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0-180.695c0-33.265-26.967-60.232-60.232-60.232v0c33.265 0 60.232-26.967 60.232-60.232v0zM963.737 903.505h-903.474v-180.695h903.474zM963.737 602.347h-903.474v-180.695h903.474zM963.737 301.19h-903.474v-180.695h903.474z","M210.842 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 210.842c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 512c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M210.842 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z","M361.421 813.158c0 24.949-20.225 45.174-45.174 45.174s-45.174-20.225-45.174-45.174c0-24.949 20.225-45.174 45.174-45.174s45.174 20.225 45.174 45.174z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["server","host","datacenter","cloud","storage"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":295,"id":229,"name":"server","prevSize":24,"code":59876},"setIdx":0,"setId":1,"iconIdx":85},{"icon":{"paths":["M926.005 99.103c-121.161-57.959-262.777-93.948-412.236-99.026l-1.769-0.048c-151.228 5.125-292.843 41.116-420.425 101.823l6.42-2.75c-32.977 15.76-55.351 48.848-55.351 87.164 0 0.296 0.001 0.59 0.004 0.885v-0.045 649.789c-0.003 0.249-0.004 0.545-0.004 0.839 0 38.315 22.376 71.404 54.773 86.914l0.58 0.25c121.161 57.959 262.777 93.948 412.236 99.026l1.769 0.048c151.228-5.125 292.843-41.116 420.425-101.823l-6.42 2.75c32.977-15.76 55.351-48.848 55.351-87.164 0-0.296-0.001-0.59-0.004-0.885v0.045-649.789c0.003-0.249 0.004-0.545 0.004-0.839 0-38.315-22.376-71.404-54.773-86.914l-0.58-0.25zM899.438 541.888c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-213.644c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618zM132.864 174.375c110.92-53.263 240.582-86.42 377.448-91.277l1.688-0.048c138.75 5.006 268.584 38.151 385.604 93.859l-5.915-2.535c4.63 2.445 7.734 7.224 7.748 12.728v48.156c-113.2 55.308-245.67 89.857-385.631 95.145l-1.807 0.054c-141.767-5.341-274.238-39.89-393.276-97.76l5.838 2.561v-49.813c0.619-4.997 3.823-9.121 8.213-11.035l0.090-0.035zM891.136 849.625c-110.92 53.263-240.582 86.42-377.448 91.277l-1.688 0.048c-138.75-5.006-268.584-38.151-385.604-93.859l5.915 2.535c-4.63-2.445-7.734-7.224-7.748-12.728v-204.238c113.851 51.38 246.465 82.977 386.006 86.865l1.431 0.031c140.973-3.92 273.587-35.517 393.967-89.515l-6.53 2.618v204.235c0 0.014 0 0.031 0 0.048 0 5.64-3.374 10.492-8.214 12.647l-0.088 0.035z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["database","data","storage","information","records"]},"attrs":[{}],"properties":{"order":294,"id":228,"name":"database","prevSize":24,"code":59875},"setIdx":0,"setId":1,"iconIdx":86},{"icon":{"paths":["M984.598 262.573h-157.533l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-45.159 180.113h-338.696l40.433-161.209c0.73-2.838 1.148-6.096 1.148-9.452 0-21.805-17.677-39.482-39.482-39.482-18.449 0-33.942 12.654-38.274 29.756l-0.059 0.273-47.26 180.113h-179.062c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-85.593 341.321h-176.962c-21.751 0-39.383 17.633-39.383 39.383s17.633 39.383 39.383 39.383v0h157.533l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h338.696l-40.433 161.209c-0.73 2.838-1.148 6.096-1.148 9.452 0 21.805 17.677 39.482 39.482 39.482 18.449 0 33.942-12.654 38.274-29.756l0.059-0.273 45.159-180.113h181.163c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0h-157.533l85.593-341.321h176.962c21.751 0 39.383-17.633 39.383-39.383s-17.633-39.383-39.383-39.383v0zM722.044 341.339l-85.593 341.321h-334.495l85.593-341.321z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["hashtag","tag","trend","topic","social-media"]},"attrs":[{}],"properties":{"order":293,"id":227,"name":"hashtag","prevSize":24,"code":59874},"setIdx":0,"setId":1,"iconIdx":87},{"icon":{"paths":["M731.351 0.181h-438.702c-88.839 0-160.857 72.018-160.857 160.857v0 818.91c-0.001 0.096-0.001 0.21-0.001 0.324 0 24.229 19.642 43.87 43.87 43.87 9.418 0 18.143-2.968 25.291-8.020l-0.137 0.092 311.186-217.011 311.186 217.011c6.914 4.763 15.47 7.606 24.689 7.606 0.163 0 0.325-0.001 0.488-0.003h-0.025c7.45-0.092 14.477-1.807 20.773-4.808l-0.3 0.129c13.96-7.76 23.279-22.374 23.398-39.173v-818.927c0-88.839-72.018-160.857-160.857-160.857v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bookmark-fill","save","favorite","keep"]},"attrs":[{}],"properties":{"order":290,"id":226,"name":"bookmark-fill","prevSize":24,"code":59871},"setIdx":0,"setId":1,"iconIdx":88},{"icon":{"paths":["M1004.095 24.725c-7.747-14.706-22.885-24.586-40.34-24.695h-903.493c-17.471 0.11-32.608 9.989-40.236 24.445l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.173 0 10.136 3.43 19.471 9.191 26.908l-0.075-0.1 322.241 440.294v466.797c0.335 24.813 20.361 44.839 45.141 45.174h240.96c24.813-0.335 44.839-20.361 45.174-45.141v-466.83l322.241-440.294c5.688-7.337 9.117-16.671 9.117-26.808 0-7.369-1.813-14.314-5.016-20.414l0.116 0.241z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["filter-fill","selection","full-filter","complete-criteria"]},"attrs":[{}],"properties":{"order":289,"id":225,"name":"filter-fill","prevSize":24,"code":59872},"setIdx":0,"setId":1,"iconIdx":89},{"icon":{"paths":["M940.27 142.985v0c-52.342-52.898-124.95-85.655-205.208-85.655-0.25 0-0.502 0-0.752 0.001h0.039c-0.212 0-0.462-0.001-0.714-0.001-80.258 0-152.867 32.757-205.183 85.63l-0.025 0.025-16.427 17.013-16.427-16.427c-52.551-52.546-125.148-85.046-205.334-85.046s-152.783 32.5-205.336 85.047v0c-51.85 52.868-83.852 125.364-83.852 205.334s32.002 152.468 83.898 205.382l-0.045-0.047 397.176 398.35c7.96 7.95 18.953 12.869 31.093 12.869s23.133-4.917 31.094-12.869v0l397.176-398.35c51.673-52.835 83.555-125.21 83.555-205.032 0-80.411-32.354-153.263-84.754-206.251l0.026 0.026z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["heart-fill","love","affection","full-heart"]},"attrs":[{}],"properties":{"order":288,"id":224,"name":"heart-fill","prevSize":24,"code":59873},"setIdx":0,"setId":1,"iconIdx":90},{"icon":{"paths":["M944.92 71.496c-6.851-4.781-15.351-7.639-24.52-7.639-5.664 0-11.074 1.091-16.029 3.074l0.291-0.103c-63.404 28.272-136.947 48.827-213.986 57.993l-3.642 0.353c-50.961-13.852-95.595-33.813-136.214-59.541l2.021 1.195c-50.241-31.546-108.991-55.111-171.832-67.168l-3.203-0.511c-75.265-7.001-254.385 51.927-291.724 64.179-17.436 6.017-29.741 22.283-29.756 41.423v874.010c0 24.167 19.592 43.759 43.759 43.759s43.759-19.592 43.759-43.759v0-341.902c65.742-24.141 142.134-41.68 221.425-49.3l3.786-0.294c53.070 13.251 99.74 33.289 142.139 59.564l-2.111-1.218c47.311 29.399 102.324 52.182 160.994 65.266l3.539 0.663h13.419c91.412-12.072 174.279-35.196 251.871-68.295l-6.238 2.366c16.429-6.638 27.841-22.387 28.006-40.821v-497.12c0.056-0.823 0.088-1.785 0.088-2.753 0-13.438-6.14-25.443-15.767-33.361l-0.075-0.060z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag-fill","complete","report"]},"attrs":[{}],"properties":{"order":287,"id":223,"name":"flag-fill","prevSize":24,"code":59870},"setIdx":0,"setId":1,"iconIdx":91},{"icon":{"paths":["M512 1023.989c-282.763 0-511.989-229.226-511.989-511.989s229.226-511.989 511.989-511.989c282.763 0 511.989 229.226 511.989 511.989v0c0 282.763-229.226 511.989-511.989 511.989v0zM512 85.343c-235.636 0-426.657 191.021-426.657 426.657s191.021 426.657 426.657 426.657c235.636 0 426.657-191.021 426.657-426.657v0c0-235.636-191.021-426.657-426.657-426.657v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle","round","cycle","loop","circular"]},"attrs":[{}],"properties":{"order":286,"id":222,"name":"circle","prevSize":24,"code":59868},"setIdx":0,"setId":1,"iconIdx":92},{"icon":{"paths":["M1023.989 512c0 282.763-229.226 511.989-511.989 511.989s-511.989-229.226-511.989-511.989c0-282.763 229.226-511.989 511.989-511.989s511.989 229.226 511.989 511.989z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["circle-fill","complete","whole"]},"attrs":[{}],"properties":{"order":285,"id":221,"name":"circle-fill","prevSize":24,"code":59869},"setIdx":0,"setId":1,"iconIdx":93},{"icon":{"paths":["M462.875 1024.834c-1.947 0.372-4.188 0.585-6.478 0.585s-4.531-0.213-6.702-0.62l0.224 0.035c-18.586-5.739-31.857-22.766-31.857-42.893 0-0.292 0.003-0.585 0.009-0.876l-0.001 0.044v-5.938l48.584-342.789h-234.284c-0.011 0-0.024 0-0.038 0-16.55 0-30.926-9.309-38.177-22.979l-0.114-0.234c-3.963-6.646-6.305-14.655-6.305-23.213s2.342-16.567 6.421-23.424l-0.116 0.211 107.965-188.4 221.328-351.967c7.563-12.608 21.158-20.914 36.694-20.914 4.633 0 9.094 0.739 13.272 2.105l-0.301-0.085c18.586 5.739 31.857 22.766 31.857 42.893 0 0.292-0.003 0.585-0.009 0.876l0.001-0.044v5.938l-48.584 342.789h234.824c0.011 0 0.024 0 0.038 0 16.55 0 30.926 9.309 38.177 22.979l0.114 0.234c3.963 6.646 6.305 14.655 6.305 23.213s-2.342 16.567-6.421 23.424l0.116-0.211-107.965 188.4-221.328 351.967c-7.762 11.483-20.733 18.931-35.445 18.931-0.634 0-1.265-0.014-1.893-0.042l0.090 0.003zM434.265 959.516v0zM292.291 549.248h215.931c24.812 0.302 44.809 20.488 44.809 45.342 0 0.191-0.001 0.382-0.004 0.572v-0.029 5.938l-31.849 223.488 134.957-215.931 77.735-133.876h-215.931c-24.812-0.302-44.809-20.488-44.809-45.342 0-0.191 0.001-0.382 0.004-0.572v0.029-5.938l31.849-223.488-134.957 215.931zM589.735 63.945v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["bolt","lightning","electicity","speed","charge"]},"attrs":[{}],"properties":{"order":284,"id":220,"name":"bolt","prevSize":24,"code":59867},"setIdx":0,"setId":1,"iconIdx":94},{"icon":{"paths":["M876.353 155.475c-91.36-90.984-217.374-147.233-356.525-147.233s-265.163 56.249-356.542 147.25l-72.854 72.854v-175.251c0-24.945-20.222-45.168-45.168-45.168s-45.168 20.222-45.168 45.168v0 285.461c0 0.001 0 0.003 0 0.004 0 25.067 20.15 45.426 45.135 45.766h286.096c24.945 0 45.168-20.222 45.168-45.168s-20.222-45.168-45.168-45.168v0h-180.671l76.485-74.678c74.952-74.805 178.417-121.062 292.688-121.062s217.736 46.257 292.695 121.070l-0.007-0.007c372.786 402.897-180.671 958.161-585.375 585.375-8.171-8.161-19.456-13.21-31.918-13.21s-23.747 5.048-31.92 13.21v0c-8.309 8.103-13.464 19.409-13.464 31.918s5.155 23.815 13.454 31.91l0.010 0.008c91.243 91.243 217.293 147.678 356.525 147.678 278.462 0 504.201-225.739 504.201-504.201 0-139.231-56.434-265.282-147.678-356.525v0z","M512 256.049c-24.81 0.335-44.833 20.358-45.168 45.135v210.815c0.011 12.468 5.073 23.753 13.248 31.918v0l152.367 148.753c8.084 8.182 19.304 13.25 31.708 13.25 0.073 0 0.148 0 0.222 0h-0.011c21.988-3.292 38.658-22.048 38.658-44.696 0-10.97-3.91-21.026-10.413-28.851l0.059 0.073-137.31-137.31v-193.921c-0.294-24.201-19.326-43.864-43.245-45.162l-0.116-0.006z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["history","past","records","timeline","memories"]},"attrs":[{},{}],"properties":{"order":283,"id":219,"name":"history","prevSize":24,"code":59866},"setIdx":0,"setId":1,"iconIdx":95},{"icon":{"paths":["M1022.811 776.474s0-4.096 0-6.436v-516.077c-0.023-7.052-1.751-13.696-4.793-19.546l0.112 0.237c-4.397-9.329-11.736-16.668-20.801-20.952l-0.263-0.112-468.096-209.474c-5.326-2.478-11.563-3.924-18.139-3.924s-12.811 1.445-18.411 4.037l0.272-0.112-468.096 209.474c-14.982 7.661-25.187 22.762-25.744 40.299l-0.001 0.074v516.077c0.941 17.495 11.005 32.44 25.487 40.246l0.258 0.128 468.096 209.474c5.306 2.591 11.546 4.105 18.139 4.105s12.832-1.514 18.389-4.214l-0.251 0.11 468.096-209.474c13.538-6.306 23.285-18.763 25.711-33.677l0.034-0.259zM86.616 321.251l380.328 170.856v420.117l-380.328-170.27zM554.714 492.105l380.328-170.856v420.702l-380.328 170.27zM512 91.883l361.019 162.079-361.019 161.493-361.019-161.493z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["box","package","container","storage","delivery"]},"attrs":[{}],"properties":{"order":282,"id":218,"name":"box","prevSize":24,"code":59865},"setIdx":0,"setId":1,"iconIdx":96},{"icon":{"paths":["M512 0.027c-282.755 0-511.973 229.218-511.973 511.973v0c-0.022 1.75-0.034 3.816-0.034 5.886 0 279.524 226.599 506.123 506.123 506.123 2.069 0 4.135-0.012 6.199-0.037l-0.313 0.003c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0c-1.399 0.016-3.053 0.026-4.708 0.026-231.698 0-419.526-187.828-419.526-419.526 0-1.655 0.010-3.308 0.029-4.959l-0.003 0.251c0.333-234.15 190.058-423.874 424.174-424.206h0.032c281.439 0 424.206 142.768 424.206 424.206v80.745c0.187 2.116 0.292 4.578 0.292 7.064 0 47.18-38.247 85.426-85.426 85.426s-85.426-38.247-85.426-85.426c0-2.486 0.106-4.948 0.314-7.381l-0.022 0.317v-292.556c0-24.236-19.647-43.883-43.883-43.883s-43.883 19.647-43.883 43.883v0 19.894c-44.051-38.526-102.099-62.022-165.637-62.022-0.188 0-0.377 0-0.565 0h0.029c-140.246 0-253.938 113.692-253.938 253.938s113.692 253.938 253.938 253.938v0c75.633-0.27 143.364-33.87 189.31-86.869l0.266-0.313c30.329 52.256 86.021 86.836 149.789 86.836 95.329 0 172.609-77.279 172.609-172.609 0-0.084 0-0.169 0-0.252v0.014-80.745c0-330.003-181.969-511.973-511.973-511.973zM512 678.171c-91.774 0-166.171-74.397-166.171-166.171s74.397-166.171 166.171-166.171c91.774 0 166.171 74.397 166.171 166.171v0c-0.332 91.641-74.532 165.841-166.14 166.171h-0.032z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["at","email","location","place"]},"attrs":[{}],"properties":{"order":281,"id":217,"name":"at","prevSize":24,"code":59864},"setIdx":0,"setId":1,"iconIdx":97},{"icon":{"paths":["M273.927 128.663c-27.857 0-50.44 22.582-50.44 50.44s22.582 50.44 50.44 50.44v0h449.244l-579.714 579.714c-9.89 9.234-16.053 22.349-16.053 36.904 0 27.857 22.582 50.44 50.44 50.44 14.555 0 27.668-6.164 36.874-16.025l0.028-0.030 579.714-579.714v449.244c0 27.857 22.582 50.44 50.44 50.44s50.44-22.582 50.44-50.44v0-570.97c-0.038-7.053-1.518-13.753-4.16-19.829l0.126 0.327c-7.47-17.225-23.668-29.376-42.86-30.924l-0.182-0.011z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-right","northeast","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":309,"id":216,"name":"arrow-up-right","prevSize":24,"code":59860},"setIdx":0,"setId":1,"iconIdx":98},{"icon":{"paths":["M128.665 750.071c0 27.856 22.582 50.438 50.438 50.438s50.438-22.582 50.438-50.438v0-449.241l579.71 579.71c9.233 9.89 22.348 16.053 36.903 16.053 27.856 0 50.438-22.582 50.438-50.438 0-14.555-6.164-27.668-16.025-36.874l-0.030-0.028-579.71-579.71h449.241c27.856 0 50.438-22.582 50.438-50.438s-22.582-50.438-50.438-50.438v0h-570.968c-7.053 0.038-13.753 1.518-19.829 4.16l0.327-0.126c-18.183 7.953-30.702 25.689-30.935 46.373v0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-up-left","northwest","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":278,"id":215,"name":"arrow-up-left","prevSize":24,"code":59861},"setIdx":0,"setId":1,"iconIdx":99},{"icon":{"paths":["M749.048 893.688c27.738 0 50.223-22.484 50.223-50.223s-22.484-50.223-50.223-50.223v0h-447.31l577.218-577.218c9.846-9.194 15.985-22.253 15.985-36.744 0-27.738-22.484-50.223-50.223-50.223-14.491 0-27.549 6.138-36.714 15.954l-0.028 0.030-577.218 577.218v-447.31c0-27.738-22.484-50.223-50.223-50.223s-50.223 22.484-50.223 50.223v0 571.861c0.038 7.024 1.513 13.694 4.144 19.745l-0.126-0.325c7.919 18.102 25.578 30.57 46.174 30.801h0.030z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-left","southwest","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":279,"id":214,"name":"arrow-down-left","prevSize":24,"code":59862},"setIdx":0,"setId":1,"iconIdx":100},{"icon":{"paths":["M896.598 273.145c0-27.949-22.657-50.606-50.606-50.606s-50.606 22.657-50.606 50.606v0 450.722l-581.62-581.62c-9.013-8.416-21.152-13.58-34.498-13.58-27.949 0-50.606 22.657-50.606 50.606 0 13.348 5.166 25.486 13.61 34.529l-0.028-0.030 581.62 581.62h-450.722c-27.949 0-50.606 22.657-50.606 50.606s22.657 50.606 50.606 50.606v0h576.221c7.076-0.039 13.797-1.525 19.894-4.175l-0.328 0.126c15.905-8.356 26.772-24.403 27.661-43.066l0.006-0.114z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["arrow-down-right","southeast","move","diagonal","direction"]},"attrs":[{}],"properties":{"order":280,"id":213,"name":"arrow-down-right","prevSize":24,"code":59863},"setIdx":0,"setId":1,"iconIdx":101},{"icon":{"paths":["M512 0.011c-282.764 0-511.989 229.225-511.989 511.989s229.225 511.989 511.989 511.989c282.764 0 511.989-229.225 511.989-511.989v0c0-282.764-229.225-511.989-511.989-511.989v0zM763.515 350.723l-83.838 396.152c-6.4 28.159-23.040 34.559-46.72 21.76l-127.997-94.719-63.999 59.519c-5.961 7.732-15.19 12.694-25.582 12.799h-0.016l8.959-127.997 236.796-214.395c10.879-8.959 0-14.080-15.36-5.119l-290.555 182.396-127.997-39.679c-27.52-8.32-28.159-27.52 5.76-40.319l493.43-191.996c24.319-7.039 44.8 7.039 37.12 41.599z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["telegram","messaging","chat","fast"]},"attrs":[{}],"properties":{"order":276,"id":212,"name":"telegram","prevSize":24,"code":59859},"setIdx":0,"setId":1,"iconIdx":102},{"icon":{"paths":["M512 1023.991c-282.764 0-511.991-229.227-511.991-511.991s229.227-511.991 511.991-511.991c282.764 0 511.991 229.227 511.991 511.991v0c0 282.764-229.227 511.991-511.991 511.991v0zM512 85.341c-235.637 0-426.659 191.022-426.659 426.659s191.022 426.659 426.659 426.659c235.637 0 426.659-191.022 426.659-426.659v0c0-235.637-191.022-426.659-426.659-426.659v0z","M369.78 284.448h284.439c47.127 0 85.332 38.205 85.332 85.332v284.439c0 47.127-38.205 85.332-85.332 85.332h-284.439c-47.127 0-85.332-38.205-85.332-85.332v-284.439c0-47.127 38.205-85.332 85.332-85.332z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["stop-circle","halt","end","cease","finish"]},"attrs":[{},{}],"properties":{"order":275,"id":211,"name":"stop-circle","prevSize":24,"code":59858},"setIdx":0,"setId":1,"iconIdx":103},{"icon":{"paths":["M842.308 1023.979h-660.618c-100.333 0-181.669-81.336-181.669-181.669v0-660.618c0-100.333 81.336-181.669 181.669-181.669v0h660.618c100.333 0 181.669 81.336 181.669 181.669v0 660.618c0 100.333-81.336 181.669-181.669 181.669v0zM181.692 99.114c-45.606 0-82.577 36.971-82.577 82.577v0 660.618c0 45.606 36.971 82.577 82.577 82.577v0h660.618c45.606 0 82.577-36.971 82.577-82.577v0-660.618c0-45.606-36.971-82.577-82.577-82.577v0z"],"attrs":[{}],"grid":16,"tags":["stop","halt","end","cease","finish"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":274,"id":210,"name":"stop","prevSize":24,"code":59857},"setIdx":0,"setId":1,"iconIdx":104},{"icon":{"paths":["M870.378 148.502c-91.041-91.707-217.17-148.474-356.557-148.474-0.64 0-1.281 0.001-1.92 0.003h0.099c-280.418 0.282-507.634 227.671-507.634 508.129 0 93.024 24.997 180.211 68.642 255.208l-1.302-2.422-71.676 263.024 268.784-70.395c69.896 39.602 153.381 63.238 242.321 63.995l0.223 0.001c0.006 0 0.012 0 0.019 0 281.177 0 509.412-226.669 511.947-507.248l0.001-0.241c-0.978-141.618-59.303-269.426-152.883-361.512l-0.067-0.066zM512 929.894c-0.081 0-0.178 0-0.274 0-79.234 0-153.358-21.884-216.656-59.938l1.903 1.060-15.359-9.599-159.35 42.237 42.237-155.511-10.24-16c-39.739-63.209-63.313-140.066-63.313-222.43 0-233.27 189.104-422.374 422.374-422.374 115.76 0 220.644 46.569 296.938 121.995l-0.040-0.039c77.623 75.954 126.276 181.243 127.989 297.901l0.003 0.321c-2.173 233.734-192.155 422.374-426.196 422.374-0.006 0-0.012 0-0.018 0h0.001zM743.026 613.754c-12.799-6.4-74.875-37.118-86.395-40.958s-20.478-6.4-28.798 6.4c-13.451 18.342-26.668 34.402-40.702 49.701l0.384-0.424c-7.039 8.959-14.719 9.599-27.519 0-73.887-29.731-133.426-82.24-171.269-148.708l-0.882-1.681c-13.439-22.398 12.799-21.119 37.118-69.116 1.722-3.252 2.733-7.107 2.733-11.2s-1.011-7.948-2.796-11.332l0.064 0.132c0-6.4-28.798-69.116-39.038-94.074s-20.478-21.119-28.798-21.759h-24.958c-13.577 0.214-25.68 6.352-33.865 15.937l-0.052 0.063c-26.196 25.492-42.447 61.088-42.447 100.48 0 2.698 0.076 5.38 0.226 8.041l-0.016-0.369c4.318 50.122 23.15 95.162 52.219 131.69l-0.382-0.498c54.892 81.39 128.004 146.508 213.743 190.496l3.204 1.492c35.584 21.122 78.444 33.605 124.218 33.605 9.899 0 19.661-0.583 29.254-1.719l-1.162 0.112c36.419-7.408 66.636-29.449 84.793-59.581l0.322-0.576c5.793-12.526 9.172-27.184 9.172-42.632 0-6.192-0.543-12.256-1.582-18.147l0.091 0.624c-5.76-6.4-14.080-9.599-26.878-16z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["whatsapp","chat","message","instant-messaging","call"]},"attrs":[{}],"properties":{"order":273,"id":209,"name":"whatsapp","prevSize":24,"code":59856},"setIdx":0,"setId":1,"iconIdx":105},{"icon":{"paths":["M365.722 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 160.934h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 365.722h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M365.722 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M599.767 570.511h58.511c16.157 0 29.255 13.098 29.255 29.255v58.511c0 16.157-13.098 29.255-29.255 29.255h-58.511c-16.157 0-29.255-13.098-29.255-29.255v-58.511c0-16.157 13.098-29.255 29.255-29.255z","M877.694 936.204h-29.255v-892.294c-0.325-24.104-19.779-43.558-43.852-43.883h-585.142c-24.104 0.325-43.558 19.779-43.883 43.852v892.325h-29.255c-24.236 0-43.883 19.647-43.883 43.883s19.647 43.883 43.883 43.883v0h731.387c24.236 0 43.883-19.647 43.883-43.883s-19.647-43.883-43.883-43.883v0zM760.671 936.204h-307.183v-131.65c0-16.157-13.098-29.255-29.255-29.255v0h-58.511c-16.157 0-29.255 13.098-29.255 29.255v0 131.65h-73.138v-848.41h497.344z"],"attrs":[{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["building","office","architecture","structure","construction"]},"attrs":[{},{},{},{},{},{},{}],"properties":{"order":272,"id":208,"name":"building","prevSize":24,"code":59855},"setIdx":0,"setId":1,"iconIdx":106},{"icon":{"paths":["M561.547 0.023v462.433h462.433v-462.433zM924.887 363.362h-264.247v-264.247h264.247z","M0.023 462.454h462.433v-462.433h-462.433zM99.116 99.116h264.247v264.247h-264.247z","M0.023 1023.98h462.433v-462.433h-462.433zM99.116 660.64h264.247v264.247h-264.247z","M561.547 561.547h115.609v115.609h-115.609v-115.609z","M792.764 561.547h115.609v115.609h-115.609v-115.609z","M677.156 677.156h115.609v115.609h-115.609v-115.609z","M908.371 677.156h115.609v115.609h-115.609v-115.609z","M561.547 792.764h115.609v115.609h-115.609v-115.609z","M792.764 792.764h115.609v115.609h-115.609v-115.609z","M677.156 908.371h115.609v115.609h-115.609v-115.609z","M908.371 908.371h115.609v115.609h-115.609v-115.609z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["qrcode","scan","code","data","barcode"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":271,"id":207,"name":"qrcode","prevSize":24,"code":59854},"setIdx":0,"setId":1,"iconIdx":107},{"icon":{"paths":["M966.767 407.505l-107.415-291.887c-13.941-40.405-51.44-68.998-95.682-69.469h-502.102c-43.76 0.101-81.048 27.7-95.509 66.429l-0.231 0.706-107.415 291.887c-34.342 16.711-57.732 51.084-58.377 90.984l-0.001 0.085v262.699c-0.012 0.59-0.019 1.285-0.019 1.983 0 35.143 17.95 66.093 45.181 84.184l0.372 0.233s0 3.503 0 3.503v116.754c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-102.161h583.775v102.161c0 32.241 26.137 58.378 58.378 58.378v0h58.378c32.241 0 58.378-26.137 58.378-58.378v0-116.754s0 0 0-3.503c26.927-18.415 44.367-48.984 44.367-83.626 0-0.155 0-0.308-0.001-0.462v0.023-262.699c-0.415-39.752-23.34-74.055-56.62-90.799l-0.59-0.27zM935.826 761.273c0 8.060-6.535 14.595-14.595 14.595v0h-817.284c-8.060 0-14.595-6.535-14.595-14.595v0-262.699c0-8.060 6.535-14.595 14.595-14.595v0h817.284c8.060 0 14.595 6.535 14.595 14.595v0zM248.14 143.055c2.145-5.454 7.332-9.259 13.417-9.341h502.055c6.095 0.082 11.281 3.887 13.392 9.241l0.034 0.099 81.728 224.169h-692.357z","M366.646 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z","M833.667 629.923c0 48.361-39.205 87.566-87.566 87.566s-87.566-39.205-87.566-87.566c0-48.361 39.205-87.566 87.566-87.566s87.566 39.205 87.566 87.566z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["car","vehicle","transport","drive","auto"]},"attrs":[{},{},{}],"properties":{"order":270,"id":206,"name":"car","prevSize":24,"code":59853},"setIdx":0,"setId":1,"iconIdx":108},{"icon":{"paths":["M512 249.365c-145.049 0-262.635 117.585-262.635 262.635s117.585 262.635 262.635 262.635c145.049 0 262.635-117.585 262.635-262.635v0c0-0.191 0.002-0.416 0.002-0.641 0-144.695-117.299-261.995-261.995-261.995-0.225 0-0.45 0-0.676 0.002h0.035zM512 683.033c-94.459 0-171.033-76.575-171.033-171.033s76.575-171.033 171.033-171.033c94.459 0 171.033 76.575 171.033 171.033v0c0 94.459-76.575 171.033-171.033 171.033v0zM847.020 238.475c0 35.378-28.68 64.058-64.058 64.058s-64.058-28.68-64.058-64.058c0-35.378 28.68-64.058 64.058-64.058v0c35.378 0 64.058 28.68 64.058 64.058v0zM1020.615 302.532c0.053-2.1 0.083-4.576 0.083-7.056 0-80.466-31.5-153.574-82.841-207.667l0.125 0.132c-54.19-52.344-128.080-84.599-209.504-84.599-1.79 0-3.575 0.015-5.357 0.047l0.267-0.003c-83.275-3.843-339.503-3.843-422.778 0-1.952-0.045-4.253-0.071-6.559-0.071-80.622 0-153.889 31.489-208.175 82.838l0.141-0.134c-51.217 53.961-82.717 127.069-82.717 207.535 0 2.482 0.030 4.956 0.090 7.423l-0.008-0.366c-3.843 83.275-3.843 339.503 0 422.778-0.053 2.1-0.083 4.576-0.083 7.056 0 80.466 31.5 153.574 82.841 207.667l-0.125-0.132c54.143 51.217 127.412 82.705 208.032 82.705 2.306 0 4.608-0.026 6.902-0.077l-0.342 0.006c84.556 5.124 338.223 5.124 422.778 0 2.1 0.053 4.576 0.083 7.056 0.083 80.466 0 153.574-31.5 207.667-82.841l-0.132 0.125c51.217-53.961 82.717-127.069 82.717-207.535 0-2.482-0.030-4.956-0.090-7.423l0.008 0.366c3.843-83.275 3.843-339.503 0-422.778zM911.718 814.991c-17.965 44.669-52.697 79.402-96.206 96.954l-1.162 0.414c-68.692 14.541-147.62 22.867-228.491 22.867-25.987 0-51.772-0.86-77.33-2.552l3.471 0.185c-22.061 1.512-47.813 2.374-73.767 2.374-80.681 0-159.416-8.328-235.394-24.172l7.451 1.3c-44.669-17.965-79.402-52.697-96.954-96.206l-0.414-1.162c-26.904-67.901-21.139-228.044-21.139-302.351s-5.765-235.091 21.139-302.351c17.48-45.144 52.371-80.244 96.218-97.607l1.149-0.401c68.527-14.544 147.262-22.873 227.943-22.873 25.954 0 51.706 0.862 77.231 2.558l-3.464-0.185c22.086-1.509 47.872-2.368 73.859-2.368 80.871 0 159.799 8.326 235.971 24.167l-7.48-1.3c44.669 17.965 79.402 52.697 96.954 96.206l0.414 1.162c26.904 67.901 20.498 228.044 20.498 302.351s6.406 235.091-20.498 302.351z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["instagram","photos","hashtag","selfie","social"]},"attrs":[{}],"properties":{"order":268,"id":205,"name":"instagram","prevSize":24,"code":59852},"setIdx":0,"setId":1,"iconIdx":109},{"icon":{"paths":["M942.030 0.060h-854.301c-1.171-0.058-2.544-0.091-3.924-0.091-44.98 0-81.687 35.426-83.74 79.897l-0.007 0.184v856.22c1.381 47.853 39.817 86.288 87.54 87.666l0.129 0.003h854.301c45.688-2.098 81.934-39.649 81.934-85.666 0-0.705-0.009-1.408-0.025-2.109l0.001 0.103v-856.22c0.007-0.4 0.012-0.873 0.012-1.345 0-43.471-35.24-78.711-78.711-78.711-1.129 0-2.253 0.024-3.37 0.070l0.159-0.006zM320.022 853.72h-149.102v-456.266h149.102zM248.991 328.342v0c-0.784 0.028-1.705 0.046-2.629 0.046-41.704 0-75.512-33.808-75.512-75.512 0-1.141 0.025-2.277 0.075-3.406l-0.006 0.16c-0.046-0.985-0.072-2.14-0.072-3.301 0-41.704 33.808-75.512 75.512-75.512 1.375 0 2.743 0.037 4.101 0.109l-0.189-0.007c0.784-0.028 1.705-0.046 2.629-0.046 41.704 0 75.512 33.808 75.512 75.512 0 1.141-0.025 2.277-0.075 3.406l0.006-0.16c0.046 0.985 0.072 2.14 0.072 3.301 0 41.704-33.808 75.512-75.512 75.512-1.375 0-2.743-0.037-4.101-0.109l0.189 0.007zM853.72 853.72h-149.743v-249.571c0-59.513-21.118-100.469-74.231-100.469-34.5 0.309-63.758 22.412-74.697 53.194l-0.174 0.559c-3.36 9.138-5.302 19.69-5.302 30.697 0 2.034 0.066 4.051 0.196 6.052l-0.013-0.271v259.81h-147.182v-456.266h147.182v63.993c25.685-46.508 74.423-77.484 130.396-77.484 1.402 0 2.8 0.019 4.194 0.058l-0.205-0.004c96.629 0 169.581 63.993 169.581 200.297z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["linkedin","jobs","professionals","business","network"]},"attrs":[{}],"properties":{"order":266,"id":204,"name":"linkedin","prevSize":24,"code":59851},"setIdx":0,"setId":1,"iconIdx":110},{"icon":{"paths":["M998.721 25.279c-15.31-15.206-36.405-24.601-59.695-24.601-9.365 0-18.373 1.518-26.795 4.325l0.597-0.173-854.831 285.138c-34.333 11.124-58.722 42.818-58.722 80.21 0 32.269 18.165 60.295 44.829 74.41l0.459 0.221 354.67 175.29 175.29 355.84c14.186 27.601 42.466 46.16 75.080 46.16 0.106 0 0.207 0 0.309 0h5.827c34.71-2.632 63.306-26.111 73.46-57.839l0.162-0.591 289.228-852.494c2.939-8.121 4.642-17.492 4.642-27.261 0-22.937-9.373-43.685-24.499-58.622l-0.010-0.010zM94.226 370.599l746.151-248.912-414.27 414.27zM653.984 929.774l-165.94-331.884 414.27-414.27z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["send","deliver","dispatch","transmit","message"]},"attrs":[{}],"properties":{"order":263,"id":203,"name":"send","prevSize":24,"code":59850},"setIdx":0,"setId":1,"iconIdx":111},{"icon":{"paths":["M215.050 647.037c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517c0-59.379 48.138-107.517 107.517-107.517v0h107.517zM269.445 647.037c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0zM376.963 215.050c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517c59.379 0 107.517 48.138 107.517 107.517v0 107.517zM376.963 269.445c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517h-269.434c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517v0zM808.95 376.963c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517c0 59.379-48.138 107.517-107.517 107.517v0h-107.517v-107.517zM754.555 376.963c0 59.379-48.138 107.517-107.517 107.517s-107.517-48.138-107.517-107.517v0-269.434c0-59.379 48.138-107.517 107.517-107.517s107.517 48.138 107.517 107.517v0 269.434zM647.037 808.95c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517c-59.379 0-107.517-48.138-107.517-107.517v0-107.517zM647.037 754.555c-59.379 0-107.517-48.138-107.517-107.517s48.138-107.517 107.517-107.517h269.434c59.379 0 107.517 48.138 107.517 107.517s-48.138 107.517-107.517 107.517v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["slack","communication","team","work","collabrate"]},"attrs":[{}],"properties":{"order":262,"id":202,"name":"slack","prevSize":24,"code":59849},"setIdx":0,"setId":1,"iconIdx":112},{"icon":{"paths":["M517.309 1022.789c-22.691-0.029-45.007-1.526-66.885-4.41l2.595 0.278c-233.58-31.279-416.401-214.099-447.387-445.014l-0.291-2.662c-2.859-20.354-4.49-43.869-4.49-67.761 0-246.048 172.971-451.698 403.948-501.981l3.392-0.62c4.828-1.146 10.369-1.803 16.065-1.803 24.13 0 45.508 11.78 58.7 29.904l0.144 0.209c8.716 12.084 13.937 27.19 13.937 43.519 0 14.447-4.091 27.937-11.173 39.378l0.187-0.321c-26.726 45.102-42.523 99.41-42.523 157.408 0 16.683 1.308 33.056 3.823 49.030l-0.228-1.77c21.13 133.311 125.031 237.216 256.587 258.114l1.758 0.228c14.358 2.386 30.902 3.749 47.766 3.749 57.921 0 112.086-16.086 158.27-44.036l-1.366 0.768c10.914-6.566 24.086-10.453 38.167-10.453 16.715 0 32.146 5.473 44.609 14.724l-0.202-0.143c18.334 13.090 30.142 34.293 30.142 58.257 0 5.696-0.669 11.235-1.926 16.546l0.097-0.484c-49.878 235.319-255.888 409.342-502.54 409.342-0.413 0-0.822 0-1.235-0.001h0.064zM394.034 99.12c-178.936 53.807-307.056 217.078-307.056 410.275 0 236.171 191.454 427.623 427.623 427.623 193.197 0 356.468-128.116 409.491-304.027l0.784-3.028c-50.869 25.361-110.807 40.205-174.212 40.205-197.518 0-361.392-144.047-392.301-332.818l-0.31-2.3c-2.962-18.244-4.655-39.278-4.655-60.703 0-63.794 15.005-124.084 41.678-177.535l-1.042 2.307z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["moon","night","dark","lunar","crescent"]},"attrs":[{}],"properties":{"order":261,"id":201,"name":"moon","prevSize":24,"code":59847},"setIdx":0,"setId":1,"iconIdx":113},{"icon":{"paths":["M512 806.395c-162.589 0-294.395-131.804-294.395-294.395s131.804-294.395 294.395-294.395c162.589 0 294.395 131.804 294.395 294.395v0c-0.29 162.471-131.922 294.103-294.366 294.395h-0.028zM512 294.404c-120.176 0-217.596 97.422-217.596 217.596s97.422 217.596 217.596 217.596c120.176 0 217.596-97.422 217.596-217.596v0c-0.29-120.058-97.538-217.306-217.567-217.596h-0.028z","M512 153.605c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M512 1023.99c-21.092-0.285-38.115-17.308-38.399-38.371v-76.826c0-21.206 17.191-38.399 38.399-38.399s38.399 17.191 38.399 38.399v0 76.799c-0.285 21.092-17.308 38.115-38.371 38.399h-0.028z","M985.591 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M115.206 550.399h-76.799c-21.206 0-38.399-17.191-38.399-38.399s17.191-38.399 38.399-38.399v0h76.799c21.206 0 38.399 17.191 38.399 38.399s-17.191 38.399-38.399 38.399v0z","M230.404 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043-55.808-51.2c-7.14-7.14-11.557-17.006-11.557-27.903 0-21.794 17.667-39.461 39.461-39.461 10.897 0 20.763 4.417 27.903 11.557v0l51.2 55.808c6.068 6.763 9.778 15.747 9.778 25.599s-3.711 18.837-9.81 25.635l0.031-0.035c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M847.867 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003-52.736-55.808c-2.366-4.842-3.748-10.533-3.748-16.548 0-21.206 17.191-38.399 38.399-38.399 6.016 0 11.709 1.383 16.778 3.85l-0.227-0.099 55.808 51.2c6.939 6.946 11.231 16.541 11.231 27.135s-4.291 20.189-11.231 27.136v0c-6.701 7.568-16.317 12.423-27.072 12.798l-0.065 0.001z","M793.596 268.804c-10.245-0.806-19.244-5.574-25.564-12.757l-0.035-0.043c-6.068-6.763-9.778-15.747-9.778-25.599s3.711-18.837 9.81-25.635l-0.031 0.035 51.2-55.808c7.14-7.14 17.006-11.557 27.903-11.557 21.794 0 39.461 17.667 39.461 39.461 0 10.897-4.417 20.763-11.557 27.903v0l-55.808 51.2c-6.356 7.223-15.355 11.995-25.469 12.791l-0.131 0.009z","M176.133 886.263c-0.052 0-0.116 0-0.178 0-10.545 0-20.084-4.307-26.953-11.261l-0.003-0.003c-6.939-6.946-11.231-16.541-11.231-27.135s4.291-20.189 11.231-27.136v0l55.808-52.736c4.842-2.366 10.533-3.748 16.548-3.748 21.206 0 38.399 17.191 38.399 38.399 0 6.016-1.383 11.709-3.85 16.778l0.099-0.227-51.2 55.808c-6.876 6.978-16.43 11.301-26.992 11.301-0.591 0-1.178-0.014-1.761-0.042l0.082 0.003z"],"attrs":[{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["sun","daylight","bright","sunny","weather","light"]},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":260,"id":200,"name":"sun","prevSize":24,"code":59848},"setIdx":0,"setId":1,"iconIdx":114},{"icon":{"paths":["M1002.843 264.979c-11.885-44.735-46.258-79.32-89.974-91.303l-0.899-0.211c-108.991-13.585-235.136-21.338-363.093-21.338-12.967 0-25.913 0.079-38.842 0.238l1.964-0.020c-10.965-0.138-23.912-0.217-36.878-0.217-127.957 0-254.101 7.753-377.993 22.812l14.9-1.475c-44.618 12.192-78.989 46.777-90.67 90.619l-0.202 0.895c-13.45 71.849-21.144 154.515-21.144 238.976 0 2.83 0.010 5.654 0.025 8.48l-0.001-0.435c-0.015 2.515-0.025 5.487-0.025 8.463 0 84.76 7.694 167.728 22.419 248.235l-1.273-8.397c12.473 43.944 46.687 77.735 89.978 89.387l0.896 0.205c108.991 13.585 235.136 21.338 363.093 21.338 12.967 0 25.913-0.079 38.842-0.238l-1.964 0.020c10.965 0.138 23.912 0.217 36.878 0.217 127.957 0 254.101-7.753 377.993-22.812l-14.9 1.475c44.184-11.858 78.4-45.649 90.654-88.691l0.222-0.902c13.451-72.109 21.145-155.075 21.145-239.836 0-2.976-0.010-5.952-0.030-8.921l0.002 0.458c0.014-2.39 0.024-5.216 0.024-8.045 0-84.461-7.694-167.123-22.415-247.326l1.272 8.351zM407.049 664.948v-304.617l268.139 151.669-268.139 152.31z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["youtube","video","sharing","music","clip","vlog"]},"attrs":[{}],"properties":{"order":245,"id":199,"name":"youtube","prevSize":24,"code":59845},"setIdx":0,"setId":1,"iconIdx":115},{"icon":{"paths":["M921.584 0.020h-819.169c-56.554 0-102.397 45.843-102.397 102.397v0 819.169c0 56.554 45.843 102.397 102.397 102.397h819.169c56.554 0 102.397-45.843 102.397-102.397v0-819.169c0-56.554-45.843-102.397-102.397-102.397v0zM861.428 339.846q-5.119 108.157-150.396 296.31c-100.477 127.996-186.234 195.834-255.991 195.834-43.518 0-79.358-39.678-109.437-119.677-58.239-213.112-83.198-337.908-127.996-337.908-22.288 9.156-41.514 20.78-58.626 34.868l0.387-0.309-34.559-44.799c85.118-74.878 166.394-158.075 217.592-162.554s90.237 33.919 105.597 118.396c47.358 300.15 68.477 345.588 154.236 209.272 23.167-31.534 40.499-68.894 49.548-109.38l0.37-1.973c8.32-76.157-58.878-71.038-104.956-51.198q53.118-179.195 206.712-174.714 113.917 3.84 107.517 147.835z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["vimeo","video","movie","clip","streaming"]},"attrs":[{}],"properties":{"order":246,"id":198,"name":"vimeo","prevSize":24,"code":59846},"setIdx":0,"setId":1,"iconIdx":116},{"icon":{"paths":["M945.168 71.244c-6.854-4.784-15.36-7.644-24.533-7.644-5.667 0-11.082 1.091-16.037 3.075l0.291-0.101c-63.362 27.754-136.884 48.272-213.777 57.97l-3.973 0.411c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525c-107.474 9.724-206.538 32.466-299.99 66.82l8.098-2.606c-17.445 6.019-29.758 22.294-29.774 41.446v874.511c0 24.18 19.602 43.782 43.782 43.782s43.782-19.602 43.782-43.782v0-341.516c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662h13.426c91.375-11.776 174.319-34.938 251.841-68.29l-6.068 2.323c16.532-6.508 28.021-22.337 28.021-40.848 0-0.004 0-0.013 0-0.017v0.001-496.801c0.058-0.822 0.086-1.787 0.086-2.754 0-13.445-6.144-25.457-15.776-33.379l-0.076-0.061zM876.865 575.050c-55.28 23.59-119.414 40.863-186.43 48.723l-3.3 0.316c-50.991-13.859-95.65-33.834-136.292-59.573l2.021 1.197c-50.286-31.459-109.055-55.026-171.889-67.197l-3.247-0.525h-11.676c-81.373 7.491-156.277 24.016-227.356 48.724l6.685-2.021v-408.651c65.758-24.646 142.15-42.595 221.505-50.481l3.835-0.307c53.105 13.33 99.794 33.376 142.252 59.613l-2.143-1.233c47.34 29.414 102.383 52.211 161.087 65.302l3.54 0.662c72.593-2.928 140.796-18.315 203.651-44.065l-3.998 1.45z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["flag","report","banner"]},"attrs":[{}],"properties":{"order":247,"id":197,"name":"flag","prevSize":24,"code":59844},"setIdx":0,"setId":1,"iconIdx":117},{"icon":{"paths":["M921.328 234.242h-14.62v-131.569c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032c-2.11-0.402-4.538-0.635-7.018-0.635s-4.909 0.229-7.26 0.672l0.242-0.037-695.856 233.902h-15.789l-9.939 3.508h-8.187l-9.357 5.263-7.018 9.939-8.187 7.018-6.432 5.85-7.018 8.771c-1.843 1.659-3.402 3.587-4.62 5.733l-0.060 0.112c-1.923 2.94-3.872 6.386-5.601 9.962l-0.245 0.564-3.508 6.432c-1.391 3.423-2.79 7.711-3.925 12.107l-0.165 0.758c0.126 0.965 0.196 2.083 0.196 3.216s-0.070 2.252-0.21 3.346l0.014-0.13c-0.288 2.979-0.451 6.443-0.451 9.939s0.164 6.961 0.485 10.379l-0.033-0.436v584.754c0.266 54.991 43.614 99.77 98.010 102.322l0.229 0.010h818.656c56.383-0.331 102.001-45.949 102.333-102.301v-584.786c-0.331-56.383-45.949-102.001-102.301-102.333h-0.032zM809.056 88.637c5.781 2.176 9.84 7.618 9.939 14.021v131.582h-446.167zM935.946 921.328c0 8.075-6.545 14.62-14.62 14.62v0h-818.656c-8.075 0-14.62-6.545-14.62-14.62v0-584.754c0-8.075 6.545-14.62 14.62-14.62v0h818.656c8.075 0 14.62 6.545 14.62 14.62v0z","M848.233 628.95c0 40.368-32.724 73.092-73.092 73.092s-73.092-32.724-73.092-73.092c0-40.368 32.724-73.092 73.092-73.092s73.092 32.724 73.092 73.092z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["wallet","money","cash","payments","finance"]},"attrs":[{},{}],"properties":{"order":248,"id":196,"name":"wallet","prevSize":24,"code":59843},"setIdx":0,"setId":1,"iconIdx":118},{"icon":{"paths":["M974.245 49.171c-15.932-10.721-35.555-17.111-56.669-17.111-14.627 0-28.534 3.067-41.12 8.59l0.658-0.257-208.887 89.524-277.931-117.023c-10.185-4.441-22.051-7.024-34.522-7.024s-24.338 2.583-35.094 7.244l0.571-0.221-255.112 107.663c-39.245 17.382-66.129 55.99-66.129 100.873 0 0.535 0.003 1.071 0.012 1.601l-0.001-0.081v658.259c-0.001 0.193-0.001 0.422-0.001 0.65 0 38.606 19.576 72.638 49.339 92.718l0.396 0.252c15.932 10.721 35.555 17.111 56.669 17.111 14.627 0 28.534-3.067 41.12-8.59l-0.658 0.257 208.887-89.524 277.931 117.023c9.959 4.44 21.578 7.024 33.803 7.024 0.254 0 0.506-0.001 0.759-0.002h-0.037c12.47-0.016 24.335-2.597 35.099-7.244l-0.579 0.222 255.112-109.419c39.245-17.382 66.129-55.99 66.129-100.873 0-0.535-0.003-1.071-0.012-1.601l0.001 0.081v-656.503c0.001-0.193 0.001-0.422 0.001-0.65 0-38.606-19.576-72.638-49.339-92.718l-0.396-0.252zM399.657 107.683l224.685 95.96v709.749l-224.685-95.96zM112.365 902.859c-2.099 1.232-4.621 1.96-7.312 1.96s-5.216-0.728-7.384-1.996l0.067 0.036c-6.069-4.287-9.983-11.275-9.983-19.174 0-0.459 0.014-0.915 0.041-1.366l-0.002 0.063v-659.428c-0.001-0.106-0.002-0.225-0.002-0.349 0-9.66 5.999-17.916 14.475-21.246l0.156-0.052 209.473-90.694v706.823zM936.211 801.048c0.016 0.329 0.027 0.713 0.027 1.097 0 8.996-5.204 16.772-12.765 20.489l-0.133 0.060-211.228 90.694v-706.823l199.525-85.427c2.099-1.232 4.621-1.96 7.312-1.96s5.216 0.728 7.384 1.996l-0.067-0.036c6.069 4.287 9.983 11.275 9.983 19.174 0 0.459-0.014 0.915-0.041 1.366l0.002-0.063z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["map","location","route","journey","area"]},"attrs":[{}],"properties":{"order":249,"id":195,"name":"map","prevSize":24,"code":59842},"setIdx":0,"setId":1,"iconIdx":119},{"icon":{"paths":["M232.89 877.709c-0.229 0.001-0.5 0.001-0.772 0.001-64.296 0-122.536-25.926-164.839-67.892l0.014 0.014c-41.67-44.195-67.28-103.927-67.28-169.644 0-70.104 29.144-133.401 75.978-178.432l0.081-0.077 220.011-221.767c46.236-47.686 110.48-77.679 181.734-78.989l0.242-0.003c64.887 0.446 123.436 27.23 165.557 70.178l0.036 0.036c42.26 44.485 68.256 104.777 68.256 171.139 0 70.733-29.531 134.567-76.936 179.85l-0.095 0.091-73.728 73.728c-8.035 8.605-19.444 13.968-32.108 13.968-24.236 0-43.886-19.648-43.886-43.886 0-12.665 5.363-24.073 13.943-32.084l0.025-0.023 71.384-76.068c31.073-29.214 50.426-70.586 50.426-116.481 0-41.8-16.055-79.851-42.334-108.318l0.099 0.109c-28.323-24.799-65.659-39.923-106.527-39.923-45.364 0-86.377 18.637-115.797 48.671l-0.027 0.027-218.256 221.181c-30.617 29.25-49.65 70.402-49.65 115.998 0 41.161 15.51 78.698 41.005 107.085l-0.133-0.148c26.409 26.109 62.734 42.236 102.824 42.236 5.002 0 9.944-0.251 14.816-0.741l-0.615 0.049c1.28-0.135 2.767-0.212 4.272-0.212 22.546 0 41.068 17.231 43.113 39.245l0.012 0.171c0.136 1.297 0.214 2.802 0.214 4.324 0 22.665-17.181 41.315-39.226 43.641l-0.191 0.015z","M545.938 863.081c-64.887-0.446-123.436-27.23-165.557-70.178l-0.036-0.036c-42.26-44.485-68.256-104.777-68.256-171.139 0-70.733 29.531-134.567 76.936-179.85l0.095-0.091 73.728-73.728c8.035-8.605 19.444-13.968 32.108-13.968 24.236 0 43.886 19.648 43.886 43.886 0 12.665-5.363 24.073-13.943 32.084l-0.025 0.023-71.384 76.068c-31.073 29.214-50.426 70.586-50.426 116.481 0 41.8 16.055 79.851 42.334 108.318l-0.099-0.109c28.323 24.799 65.659 39.923 106.527 39.923 45.364 0 86.377-18.637 115.797-48.671l0.027-0.027 220.596-221.181c29.874-29.148 48.402-69.807 48.402-114.793 0-41.733-15.944-79.74-42.074-108.264l0.109 0.122c-26.409-26.109-62.734-42.236-102.824-42.236-5.002 0-9.944 0.251-14.816 0.741l0.615-0.049c-1.28 0.135-2.767 0.212-4.272 0.212-22.546 0-41.068-17.231-43.113-39.245l-0.012-0.171c-0.136-1.297-0.214-2.802-0.214-4.324 0-22.665 17.181-41.315 39.226-43.641l0.191-0.015c7.239-0.795 15.632-1.247 24.131-1.247 63.452 0 121.008 25.25 163.166 66.25l-0.054-0.053c41.67 44.195 67.28 103.927 67.28 169.644 0 70.104-29.144 133.401-75.978 178.432l-0.081 0.077-220.011 221.767c-46.236 47.686-110.48 77.679-181.734 78.989l-0.242 0.003z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["link","connect","join","attach","web","url"]},"attrs":[{},{}],"properties":{"order":250,"id":194,"name":"link","prevSize":24,"code":59841},"setIdx":0,"setId":1,"iconIdx":120},{"icon":{"paths":["M921.589 117.040h-819.178c-56.419 0.331-102.067 45.977-102.398 102.366v585.16c0.331 56.419 45.977 102.067 102.366 102.398h819.209c56.419-0.331 102.067-45.977 102.398-102.366v-585.16c-0.331-56.419-45.977-102.067-102.366-102.398h-0.033zM102.411 204.808h819.178c8.080 0 14.628 6.551 14.628 14.628v0 131.653h-848.434v-131.653c0-8.080 6.551-14.628 14.628-14.628v0zM921.589 819.192h-819.178c-8.080 0-14.628-6.551-14.628-14.628v0-365.705h848.434v365.705c0 8.080-6.551 14.628-14.628 14.628v0z","M336.461 570.514h-117.025c-32.315 0-58.514 26.197-58.514 58.514s26.197 58.514 58.514 58.514v0h117.025c32.315 0 58.514-26.197 58.514-58.514s-26.197-58.514-58.514-58.514v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["credit-card","payment","purchase","money","bank"]},"attrs":[{},{}],"properties":{"order":251,"id":193,"name":"credit-card","prevSize":24,"code":59839},"setIdx":0,"setId":1,"iconIdx":121},{"icon":{"paths":["M867.007 182.851c-66.261-30.706-136.831-53.332-211.172-66.261-9.158 16.161-19.933 38.248-26.935 56.025-78.651-11.852-156.763-11.852-233.798 0-7.541-17.777-18.316-39.864-27.474-56.025-74.341 12.929-144.911 35.555-211.172 66.261-133.599 201.475-169.692 398.104-151.915 591.499 88.886 66.261 174.541 106.125 259.118 132.522 21.010-28.551 39.326-59.257 55.487-91.042-30.706-11.313-59.796-25.858-87.27-42.558 7.541-5.387 14.545-11.313 21.549-16.7 168.615 78.651 351.236 78.651 517.696 0 7.004 5.925 14.006 11.313 21.549 16.7-27.474 16.7-57.103 30.706-87.27 42.558 16.161 31.783 34.478 62.489 55.487 91.042 84.577-26.397 170.769-66.261 259.118-132.522 21.010-224.64-36.094-419.113-151.915-591.499zM341.769 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508zM681.692 655.834c-50.639 0-92.119-46.867-92.119-104.508s40.403-104.508 92.119-104.508 92.658 46.867 92.119 104.508c0 57.103-40.403 104.508-92.119 104.508z"],"attrs":[{}],"grid":16,"tags":["discord","voice","chat","game","social","communication"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":252,"id":192,"name":"discord","prevSize":24,"code":59840},"setIdx":0,"setId":1,"iconIdx":122},{"icon":{"paths":["M71.252 1019.529c-0.094 0-0.205 0-0.308 0-18.338 0-34.928-7.49-46.876-19.583l-0.004-0.004c-12.065-12.080-19.533-28.766-19.533-47.194s7.46-35.107 19.533-47.195v0l881.496-881.496c12.224-13.091 29.586-21.252 48.86-21.252 36.88 0 66.781 29.901 66.781 66.781 0 19.267-8.161 36.636-21.215 48.818l-0.036 0.034-881.496 881.496c-11.952 12.097-28.542 19.587-46.879 19.587-0.11 0-0.221 0-0.324 0h0.016z","M200.36 400.703c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM200.36 133.579c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z","M823.64 1023.979c-110.644 0-200.343-89.695-200.343-200.343s89.695-200.343 200.343-200.343c110.644 0 200.343 89.695 200.343 200.343v0c0 110.644-89.695 200.343-200.343 200.343v0zM823.64 756.859c-36.88 0-66.781 29.901-66.781 66.781s29.901 66.781 66.781 66.781c36.88 0 66.781-29.901 66.781-66.781v0c-0.495-36.684-30.097-66.286-66.733-66.781h-0.048z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["percentage","ratio","portion","rate","fraction"]},"attrs":[{},{},{}],"properties":{"order":253,"id":191,"name":"percentage","prevSize":24,"code":59838},"setIdx":0,"setId":1,"iconIdx":123},{"icon":{"paths":["M634.635 1025.058h-8.795c-278.481-6.291-501.825-233.529-501.825-512.936 0-143.581 58.979-273.384 154.031-366.506l0.087-0.085c90.386-89.279 214.664-144.424 351.826-144.424 4.737 0 9.461 0.066 14.166 0.197l-0.694-0.015c137.202 2.016 261.047 57.579 351.895 146.67l-0.082-0.081c7.946 7.955 12.862 18.943 12.862 31.077s-4.914 23.121-12.862 31.078v0c-7.955 7.946-18.943 12.862-31.077 12.862s-23.121-4.914-31.078-12.862v0c-76.784-75.59-182.227-122.264-298.57-122.264-235.104 0-425.69 190.589-425.69 425.69s190.589 425.69 425.69 425.69c110.943 0 211.975-42.441 287.744-111.973l-0.312 0.283 12.901-12.313c8.295-7.915 19.557-12.787 31.955-12.787s23.661 4.872 31.975 12.806l-0.018-0.018c8.518 7.555 13.858 18.529 13.858 30.751 0 10.778-4.154 20.587-10.95 27.911l0.023-0.026-2.931 2.931-17.003 16.418c-90.306 81.848-210.707 131.947-342.808 131.947-1.515 0-3.029-0.007-4.542-0.019l0.232 0.001z","M869.176 468.024h-820.891c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h820.891c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z","M781.223 643.928h-732.939c-24.287 0-43.976-19.689-43.976-43.976s19.689-43.976 43.976-43.976v0h732.939c24.287 0 43.976 19.689 43.976 43.976s-19.689 43.976-43.976 43.976v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["euro","money","currency","europe","cash"]},"attrs":[{},{},{}],"properties":{"order":233,"id":190,"name":"euro","prevSize":24,"code":59837},"setIdx":0,"setId":1,"iconIdx":124},{"icon":{"paths":["M921.533 0.085h-716.682c-1.243-0.037-2.704-0.062-4.171-0.062-76.892 0-139.525 61.042-142.084 137.312l-0.005 0.236v725.456c3.196 89.572 76.578 160.974 166.638 160.974 1.887 0 3.764-0.032 5.636-0.094l-0.273 0.005h690.939c24.1-0.324 43.553-19.777 43.877-43.845v-936.102c-0.324-24.1-19.777-43.553-43.845-43.877h-0.032zM877.652 936.158h-647.059c-1.635 0.122-3.546 0.19-5.469 0.19-41.629 0-75.733-32.206-78.764-73.058l-0.015-0.26c3.043-41.116 37.15-73.322 78.779-73.322 1.923 0 3.834 0.068 5.723 0.205l-0.254-0.015h647.059zM877.652 702.141h-647.059c-30.908 0.035-59.934 8.052-85.138 22.102l0.893-0.458v-586.214c2.714-28.081 26.19-49.857 54.753-49.857 1.322 0 2.628 0.047 3.925 0.14l-0.175-0.011h672.802z","M321.859 321.859h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z","M321.859 526.626h380.277c24.235 0 43.877-19.646 43.877-43.877s-19.646-43.877-43.877-43.877v0h-380.277c-24.235 0-43.877 19.646-43.877 43.877s19.646 43.877 43.877 43.877v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["book","read","literature","knowledge","education"]},"attrs":[{},{},{}],"properties":{"order":232,"id":189,"name":"book","prevSize":24,"code":59834},"setIdx":0,"setId":1,"iconIdx":125},{"icon":{"paths":["M512 1023.233c-5.884-0.076-11.5-1.139-16.713-3.034l0.353 0.112c-294.424-132.986-495.622-424.049-495.622-762.108 0-25.218 1.12-50.181 3.311-74.828l-0.228 3.185c1.091-20.259 15.977-36.738 35.376-40.276l0.266-0.038c170.071-26.272 323.191-75.689 464.402-145.534l-9.257 4.14c5.319-2.475 11.548-3.917 18.114-3.917s12.794 1.442 18.385 4.030l-0.271-0.112c131.953 65.702 285.069 115.119 446.231 140.248l8.916 1.146c19.665 3.576 34.547 20.055 35.634 40.204l0.003 0.11c1.964 21.462 3.084 46.42 3.084 71.642 0 338.056-201.194 629.119-490.377 759.984l-5.245 2.124c-4.86 1.783-10.476 2.845-16.326 2.921h-0.034zM88.991 226.293c-0.817 12.916-1.282 28.011-1.282 43.216 0 292.016 171.793 543.905 419.826 660.115l4.464 1.881c252.498-118.092 424.293-369.981 424.293-661.997 0-15.204-0.465-30.297-1.384-45.268l0.1 2.056c-158.673-27.438-300.659-73.974-432.589-137.992l9.58 4.192c-122.352 59.822-264.337 106.359-413.369 132.403l-9.639 1.394z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["shield","protect","secure","guard","defense"]},"attrs":[{}],"properties":{"order":231,"id":188,"name":"shield","prevSize":24,"code":59833},"setIdx":0,"setId":1,"iconIdx":126},{"icon":{"paths":["M330.174 602.273c-7.682 42.896-39.055 245.207-48.017 302.191 0 4.482 0 5.762-7.042 5.762h-167.743c-0.080 0.001-0.175 0.001-0.271 0.001-15.204 0-27.532-12.324-27.532-27.532 0-1.356 0.097-2.688 0.287-3.989l-0.017 0.147 131.888-839.984c3.692-21.668 21.877-38.101 44.080-39.052l0.096-0.002c342.523 0 371.334-8.323 459.046 26.251 135.089 52.499 147.892 179.266 99.235 316.915s-163.261 201.671-315.635 203.593c-97.314 0-156.215-15.364-169.663 55.059zM883.334 277.035c-3.841-3.2-5.121-3.841-6.402 0-5.355 29.455-12.228 55.051-20.948 79.774l1.103-3.586c-89.632 256.095-338.682 234.965-460.326 234.965-0.779-0.096-1.678-0.148-2.591-0.148-11.979 0-21.761 9.396-22.379 21.221l-0.002 0.053c-50.578 320.115-64.022 384.138-64.022 384.138-0.348 1.539-0.545 3.309-0.545 5.121 0 13.404 10.837 24.274 24.228 24.326h143.414c19.695-0.387 35.904-14.834 39.022-33.697l0.032-0.236c0-12.164 0 14.084 32.653-206.154 10.243-49.297 32.013-44.176 64.022-44.176 159.417 0 284.262-64.022 320.115-256.095 6.318-18.661 9.965-40.158 9.965-62.502 0-57.89-24.469-110.067-63.632-146.751l-0.111-0.101z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["paypal","payment","money","transfer","ecommerce","transaction"]},"attrs":[{}],"properties":{"order":229,"id":186,"name":"paypal","prevSize":24,"code":59835},"setIdx":0,"setId":1,"iconIdx":127},{"icon":{"paths":["M590.061 298.931c-114.531 3.839-397.983 35.193-397.983 268.094 0 250.818 326.32 261.056 433.175 99.176 33.603 38.347 68.51 73.249 105.572 105.755l1.281 1.101 133.727-127.968s-76.142-58.226-76.142-120.93v-335.917c0-57.586-57.586-188.114-264.895-188.114s-319.921 127.968-319.921 238.663l174.038 17.277c14.203-60.869 64.928-106.62 127.331-113.199l0.637-0.053c95.977 0 83.181 67.824 83.181 158.042zM590.061 497.283c0 182.995-198.352 155.482-198.352 39.029s119.010-127.968 198.352-131.807zM909.983 870.953c-103.709 94.959-242.457 153.142-394.795 153.142-5.62 0-11.222-0.080-16.805-0.238l0.821 0.018c-195.949-7.842-370.074-95.152-492.135-230.369l-0.545-0.613c-15.997-17.277 0-25.596 12.797-18.556 172.759 101.736 443.413 268.735 876.588 69.103 19.837-8.319 33.91 4.48 15.357 27.515zM1004.041 876.072c-11.535 27.968-28.737 51.536-50.314 70.185l-0.235 0.197c-12.797 10.238-22.395 6.399-15.357-8.319s46.068-106.215 30.074-127.968-87.020-9.598-113.251-7.038-30.714 4.48-32.634 0 51.186-35.829 88.3-40.309 96.617 0 108.772 13.437c1.186 7.461 1.861 16.066 1.861 24.83 0 26.848-6.362 52.211-17.654 74.664l0.435-0.957z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["amazon","online-shopping","ecommerce","products","retail"]},"attrs":[{}],"properties":{"order":240,"id":185,"name":"amazon","prevSize":24,"code":59836},"setIdx":0,"setId":1,"iconIdx":128},{"icon":{"paths":["M886.693 1024.275h-13.467c-160.026-17.856-304.577-71.747-429.374-153.346l3.746 2.3c-119.858-77.12-218.914-175.988-293.94-291.862l-2.302-3.793c-79.488-121.374-133.409-266.357-150.654-422.398l-0.396-4.402c-0.449-4.129-0.705-8.915-0.705-13.764 0-33.499 12.23-64.138 32.468-87.698l-0.148 0.178c22.748-27.565 55.792-45.921 93.167-49.141l0.507-0.035h152.22c68.811 0.070 125.838 50.433 136.308 116.306l0.101 0.786c6.186 45.698 17.046 86.978 32.301 126.063l-1.274-3.701c5.445 14.293 8.602 30.826 8.602 48.093 0 38.102-15.36 72.621-40.225 97.697l-35.702 35.702c57.148 89.292 131.053 162.822 217.85 217.845l2.869 1.699 35.713-35.126c25.068-24.854 59.584-40.214 97.686-40.214 17.267 0 33.797 3.154 49.045 8.917l-0.956-0.318c35.315 13.822 76.581 24.675 119.402 30.688l2.96 0.339c66.678 10.304 117.132 67.286 117.132 136.053 0 1.155-0.014 2.306-0.044 3.455l0.002-0.171v140.51c0 0 0 0.001 0 0.001 0 76.101-61.525 137.836-137.551 138.165h-0.032zM277.818 87.541h-139.923c-14.387 0.979-27.011 7.794-35.649 18.070l-0.063 0.079c-7.402 8.481-11.91 19.649-11.91 31.87 0 1.557 0.075 3.102 0.218 4.622l-0.015-0.194c15.36 145.534 63.692 277.249 137.347 391.045l-2.107-3.473c70.038 108.811 159.916 198.686 265.265 266.637l3.46 2.091c110.418 72.299 242.202 121.557 384.020 137.782l4.14 0.385c0.876 0.051 1.901 0.082 2.931 0.082 14.116 0 26.923-5.614 36.306-14.733l-0.013 0.013c8.993-9.216 14.563-21.807 14.638-35.698v-139.938c0.005-0.32 0.012-0.7 0.012-1.075 0-25.332-18.708-46.298-43.066-49.826l-0.272-0.033c-53.039-7.261-100.842-19.551-146.288-36.646l4.608 1.52c-5.299-2.044-11.429-3.227-17.839-3.227-13.78 0-26.284 5.472-35.452 14.364l0.014-0.013-58.546 58.546c-8.012 7.814-18.974 12.637-31.061 12.637-7.941 0-15.396-2.080-21.853-5.726l0.223 0.115c-125.62-71.885-227.060-173.136-297.132-294.748l-2.038-3.837c-3.709-6.254-5.9-13.781-5.9-21.824 0-12.079 4.944-23.005 12.918-30.863l58.55-58.55c8.886-8.986 14.38-21.346 14.38-34.991 0-6.364-1.195-12.447-3.371-18.038l0.116 0.338c-15.651-40.876-27.948-88.685-34.741-138.244l-0.385-3.437c-3.034-25.502-24.528-45.088-50.597-45.088-0.323 0-0.646 0.002-0.971 0.011l0.048-0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["phone","call","talk","voice","telephone"]},"attrs":[{}],"properties":{"order":227,"id":184,"name":"phone","prevSize":24,"code":59832},"setIdx":0,"setId":1,"iconIdx":129},{"icon":{"paths":["M1004.108 24.712c-7.747-14.706-22.886-24.587-40.341-24.696h-421.65c-24.95 0-45.175 20.226-45.175 45.175s20.226 45.175 45.175 45.175v0h331.285l-111.431 154.198c-5.421 7.322-8.676 16.532-8.676 26.503 0 24.752 20.065 44.816 44.816 44.816 14.78 0 27.892-7.156 36.054-18.191l0.086-0.121 165.641-225.875c5.688-7.337 9.117-16.671 9.117-26.809 0-7.369-1.813-14.314-5.016-20.415l0.116 0.241z","M310.219 13.266s0 0-3.011 0c-3.291-2.852-7.063-5.273-11.155-7.112l-0.289-0.116c-3.885-1.54-8.385-2.612-13.079-3l-0.172-0.011h-222.261c-17.471 0.11-32.609 9.989-40.237 24.446l-0.12 0.25c-3.089 5.86-4.901 12.805-4.901 20.174 0 10.136 3.43 19.472 9.191 26.909l-0.075-0.1 322.25 437.295v466.81c0.335 24.814 20.362 44.84 45.142 45.175h240.967c24.814-0.335 44.84-20.362 45.175-45.142v-466.843l3.614-5.421 220.455 218.045c8.085 8.184 19.307 13.251 31.713 13.251 0.073 0 0.148 0 0.222 0h-0.011c0.137 0.001 0.299 0.003 0.462 0.003 12.327 0 23.47-5.072 31.455-13.244l0.008-0.008c8.162-8.172 13.212-19.46 13.212-31.923s-5.048-23.751-13.212-31.925v0zM596.326 470.439c-5.634 7.174-9.035 16.335-9.035 26.291 0 0.075 0 0.15 0 0.224v-0.011 436.692h-150.584v-436.692c0-0.064 0-0.138 0-0.212 0-9.955-3.401-19.117-9.105-26.384l0.071 0.093-277.075-380.073h109.624l355.98 352.366z"],"attrs":[{},{}],"grid":16,"tags":["filter-slash","remove-filter","all-results","clear-filter"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":226,"id":183,"name":"filter-slash","prevSize":24,"code":59831},"setIdx":0,"setId":1,"iconIdx":130},{"icon":{"paths":["M1023.989 515.199c-3.553-280.043-231.4-505.695-511.951-505.695-282.764 0-511.989 229.225-511.989 511.989 0 254.507 185.702 465.641 428.999 505.297l2.953 0.397v-362.872h-127.997v-149.116h127.997v-113.278c-0.721-6.073-1.134-13.108-1.134-20.239 0-100.028 81.088-181.117 181.117-181.117 4.227 0 8.421 0.145 12.576 0.43l-0.561-0.031c40.895 0.576 80.479 4.278 119.075 10.879l-4.516-0.639v127.997h-63.999c-2.79-0.372-6.015-0.583-9.289-0.583-41 0-74.238 33.238-74.238 74.238 0 2.458 0.12 4.89 0.352 7.287l-0.024-0.304v96.638h142.077l-23.040 149.116h-118.397v358.392c246.274-40.033 432-251.177 432-505.702 0-1.084-0.003-2.169-0.010-3.253l0.001 0.166z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["facebook","social-network","friends","like","post"]},"attrs":[{}],"properties":{"order":223,"id":182,"name":"facebook","prevSize":24,"code":59828},"setIdx":0,"setId":1,"iconIdx":131},{"icon":{"paths":["M342.537 824.066c0 4.477-4.477 7.674-10.871 7.674s-11.511 0-11.511-7.674 5.115-7.674 10.871-7.674 11.511 3.197 11.511 7.674zM278.59 814.474c0 4.477 0 9.592 8.952 10.871 1.214 0.597 2.642 0.946 4.152 0.946 3.78 0 7.050-2.187 8.614-5.366l0.025-0.057c0-4.477 0-8.952-8.952-10.871s-11.511 0-12.789 4.477zM369.395 811.277c-5.755 0-9.592 5.115-8.952 10.232s5.755 7.034 12.151 5.755 9.592-5.755 8.952-10.232-5.755-6.395-12.151-5.755zM505.605 0.416c-1.401-0.013-3.056-0.022-4.712-0.022-276.536 0-500.713 224.177-500.713 500.713 0 5.405 0.085 10.79 0.256 16.152l-0.019-0.784c-0.043 2.548-0.069 5.556-0.069 8.569 0 228.113 144.076 422.574 346.195 497.35l3.671 1.189c26.218 4.477 35.81-12.151 35.81-25.58s0-85.69 0-127.896c0 0-144.523 31.974-175.218-63.949 0 0-23.021-63.949-56.913-77.378 0 0-47.321-33.253 3.197-32.614 34.33 4.756 63.049 25.238 79.017 53.815l0.277 0.541c18.278 35.272 54.506 58.959 96.268 58.959 20.145 0 39.003-5.513 55.146-15.109l-0.498 0.274c2.59-27.799 14.547-52.403 32.64-71.009l-0.027 0.027c-115.106-13.429-231.491-30.055-231.491-234.050-0.145-2.57-0.228-5.577-0.228-8.605 0-45.473 18.687-86.583 48.8-116.067l0.028-0.028c-6.646-19.325-10.482-41.593-10.482-64.756 0-28.316 5.734-55.295 16.103-79.836l-0.505 1.347c43.484-14.069 142.605 56.913 142.605 56.913 38.806-11.37 83.386-17.912 129.495-17.912s90.69 6.541 132.864 18.747l-3.369-0.835s99.119-70.982 142.605-56.913c10.054 23.11 15.902 50.029 15.902 78.316 0 23.246-3.951 45.569-11.215 66.335l0.429-1.407c32.709 30.551 53.097 73.938 53.097 122.086 0 0.919-0.007 1.836-0.022 2.75l0.001-0.138c0 204.633-121.502 220.621-236.608 234.050 20.129 22.501 32.432 52.369 32.432 85.111 0 3.805-0.166 7.572-0.492 11.293l0.034-0.483c0 71.622 0 159.871 0 177.137-0.001 0.076-0.001 0.166-0.001 0.258 0 14.833 12.025 26.858 26.858 26.858 3.209 0 6.287-0.564 9.141-1.596l-0.187 0.058c204.623-75.025 347.995-268.129 347.995-494.721 0-3.906-0.042-7.803-0.127-11.688l0.010 0.579c0.012-1.343 0.019-2.929 0.019-4.517 0-282.54-229.044-511.584-511.584-511.584-2.256 0-4.508 0.015-6.757 0.043l0.342-0.003zM201.213 730.062s0 7.034 0 10.871c1.389 1.394 3.312 2.257 5.436 2.257s4.047-0.863 5.436-2.257v0s0-7.034 0-11.511-8.314-1.918-10.871 0.64zM178.831 712.796s0 6.395 4.477 8.314c1.064 1.308 2.674 2.137 4.477 2.137s3.413-0.829 4.468-2.127l0.009-0.010s0-6.395-4.477-8.314-7.674-1.918-8.952 0zM242.778 788.256s0 8.952 0 13.429 10.871 5.115 13.429 0 0-8.952 0-13.429-8.314-3.197-10.871 0zM219.118 756.92s0 7.674 0 12.789 8.952 7.034 12.151 5.115c1.56-1.787 2.512-4.14 2.512-6.715s-0.952-4.928-2.522-6.727l0.010 0.012c-3.197-5.115-8.314-7.034-12.151-4.477z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":16,"tags":["github","code","repository","developer","open-source"]},"attrs":[{}],"properties":{"order":222,"id":181,"name":"github","prevSize":24,"code":59829},"setIdx":0,"setId":1,"iconIdx":132},{"icon":{"paths":["M806.385 48h157.089l-343.111 393.062 403.637 534.942h-315.967l-247.656-324.357-283.035 324.357h-157.316l366.922-420.503-386.948-507.5h323.978l223.624 296.469 258.784-296.469zM751.199 881.861h87.003l-561.62-744.631h-93.455l568.072 744.631z"],"attrs":[{}],"grid":16,"tags":["twitter","social-media","tweet","bird","x"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":221,"id":180,"name":"twitter","prevSize":24,"code":59830},"setIdx":0,"setId":1,"iconIdx":133},{"icon":{"paths":["M795.402 3.99c-18.498-7.266-39.637-3.303-54.171 10.57l-443.93 443.93v-408.918c0-27.085-22.461-49.546-49.546-49.546s-49.546 22.461-49.546 49.546v924.854c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-408.918l443.93 443.93c9.248 9.248 22.461 14.534 35.012 14.534 6.607 0 12.552-1.321 19.157-3.964 18.498-7.927 30.389-25.764 30.389-45.582v-924.854c0-19.818-11.891-38.316-30.389-45.582zM726.699 854.857l-342.857-342.857 342.857-342.857v685.713z"],"attrs":[{}],"tags":["step-backward-alt","previous-step"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":211,"id":0,"name":"step-backward-alt","prevSize":24,"code":59820},"setIdx":0,"setId":1,"iconIdx":134},{"icon":{"paths":["M776.245 0.027c-27.085 0-49.546 22.461-49.546 49.546v408.918l-443.93-443.93c-13.873-13.873-35.673-18.498-54.171-10.57s-30.389 25.764-30.389 45.582v924.854c0 19.818 11.891 38.316 30.389 45.582 5.945 2.643 12.552 3.964 19.157 3.964 13.212 0 25.764-5.284 35.012-14.534l443.93-443.93v408.918c0 27.085 22.461 49.546 49.546 49.546s49.546-22.461 49.546-49.546v-924.854c0-27.085-22.461-49.546-49.546-49.546zM297.301 854.857v-685.713l342.857 342.857-342.857 342.857z"],"attrs":[{}],"tags":["step-forward-alt","next-step"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":210,"id":1,"name":"step-forward-alt","prevSize":24,"code":59821},"setIdx":0,"setId":1,"iconIdx":135},{"icon":{"paths":["M1009.943 479.818l-437.090-409.59c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v366.875l-425.388-399.058c-12.873-11.702-31.597-15.213-47.395-8.191s-26.331 22.82-26.331 40.374v819.178c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l425.388-399.058v366.875c0 17.554 10.532 33.352 26.331 40.374 5.852 2.341 11.702 3.511 17.554 3.511 11.118 0 21.65-4.096 29.842-11.702l437.090-409.59c8.777-8.191 14.043-19.895 14.043-32.182s-5.266-23.99-14.043-32.182zM87.783 820.362v-616.725l328.842 308.362-328.842 308.362zM586.896 820.362v-616.725l328.842 308.362-328.842 308.362z"],"attrs":[{}],"tags":["forward","advance","proceed","next","move-on"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":259,"id":2,"name":"forward","prevSize":24,"code":59822},"setIdx":0,"setId":1,"iconIdx":136},{"icon":{"paths":["M997.655 62.036c-15.798-7.022-34.522-3.511-47.395 8.191l-425.388 399.058v-366.875c0-17.554-10.532-33.352-26.331-40.374s-34.522-3.511-47.395 8.191l-437.090 409.59c-8.777 8.191-14.043 19.895-14.043 32.182s5.266 23.99 14.043 32.182l437.090 409.59c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-366.875l425.388 399.058c8.191 7.607 19.309 11.702 29.842 11.702 5.852 0 11.702-1.17 17.554-3.511 15.798-7.022 26.331-22.82 26.331-40.374v-819.178c0-17.554-10.532-33.352-26.331-40.374zM437.104 820.362l-328.842-308.362 328.842-308.362v616.725zM936.217 820.362l-328.842-308.362 328.842-308.362v616.725z"],"attrs":[{}],"tags":["backward","return","reverse","back","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":254,"id":3,"name":"backward","prevSize":24,"code":59823},"setIdx":0,"setId":1,"iconIdx":137},{"icon":{"paths":["M997.071 62.036c-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-17.554-10.532-33.938-26.916-40.374-16.384-7.022-35.108-2.925-47.981 9.362l-393.206 393.206v-362.194c0-23.99-19.895-43.885-43.885-43.885s-43.885 19.895-43.885 43.885v819.178c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-362.194l393.206 393.206c8.191 8.191 19.309 12.873 31.011 12.873 5.852 0 11.118-1.17 16.968-3.511 16.384-7.022 26.916-22.82 26.916-40.374v-819.178c0-17.554-10.532-33.938-26.916-40.374zM468.115 815.681l-303.681-303.681 303.681-303.681v607.362zM936.217 815.681l-303.681-303.681 303.681-303.681v607.362z"],"attrs":[{}],"tags":["fast-backward","previous","speed","quick","past"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":207,"id":4,"name":"fast-backward","prevSize":24,"code":59824},"setIdx":0,"setId":1,"iconIdx":138},{"icon":{"paths":["M980.102 58.526c-23.99 0-43.885 19.895-43.885 43.885v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v362.194l-393.206-393.206c-12.288-12.288-31.597-16.384-47.981-9.362s-26.916 22.82-26.916 40.374v819.178c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 17.554 10.532 33.938 26.916 40.374 5.266 2.341 11.118 3.511 16.968 3.511 11.702 0 22.82-4.681 31.011-12.873l393.206-393.206v362.194c0 23.99 19.895 43.885 43.885 43.885s43.885-19.895 43.885-43.885v-819.178c0-23.99-19.895-43.885-43.885-43.885zM87.783 815.681v-607.362l303.681 303.681-303.681 303.681zM555.885 815.681v-607.362l303.681 303.681-303.681 303.681z"],"attrs":[{}],"tags":["fast-forward","next","speed","quick","future"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":206,"id":5,"name":"fast-forward","prevSize":24,"code":59825},"setIdx":0,"setId":1,"iconIdx":139},{"icon":{"paths":["M313.813 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z","M710.187 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["pause","stop","wait","halt","break"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":205,"id":6,"name":"pause","prevSize":24,"code":59826},"setIdx":0,"setId":1,"iconIdx":140},{"icon":{"paths":["M280.358 1024.923c-6.942-0.037-13.534-1.495-19.514-4.095l0.321 0.124c-18.014-7.505-30.445-24.968-30.445-45.335 0-0.116 0-0.233 0.002-0.349v0.019-926.568c1.044-26.589 22.852-47.75 49.602-47.75 12.752 0 24.381 4.809 33.173 12.712l-0.045-0.040 463.285 463.285c8.969 8.98 14.517 21.381 14.517 35.077s-5.547 26.097-14.517 35.078v0l-463.285 463.285c-8.576 8.44-20.14 13.868-32.964 14.555l-0.127 0.006zM329.996 168.508v686.985l343.492-343.492z"],"attrs":[{}],"tags":["play","start","go","run","action"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":204,"id":7,"name":"play","prevSize":24,"code":59827},"setIdx":0,"setId":1,"iconIdx":141},{"icon":{"paths":["M736.143 262.827l-277.617 113.777c-38.623 15.541-68.655 45.573-83.837 83.191l-0.359 1.004-113.777 277.617c-0.848 2.097-1.341 4.529-1.341 7.076 0 8.091 4.968 15.023 12.020 17.908l0.129 0.047c2.113 0.807 4.557 1.275 7.111 1.275s4.997-0.467 7.252-1.321l-0.141 0.047 277.617-113.777c38.623-15.541 68.655-45.573 83.837-83.191l0.359-1.004 113.777-277.617c0.848-2.097 1.341-4.529 1.341-7.076 0-8.091-4.968-15.023-12.020-17.908l-0.129-0.047c-2.113-0.807-4.557-1.275-7.111-1.275s-4.997 0.467-7.252 1.321l0.141-0.047zM512 568.889c-31.419 0-56.889-25.471-56.889-56.889s25.471-56.889 56.889-56.889c31.419 0 56.889 25.471 56.889 56.889v0c0 31.419-25.471 56.889-56.889 56.889v0z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{}],"tags":["compass","navigation","direction","explorer","pathfinder"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":203,"id":8,"name":"compass","prevSize":24,"code":59819},"setIdx":0,"setId":1,"iconIdx":142},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-585.157c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v585.157c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM102.412 204.809c-8.079 0-14.629 6.55-14.629 14.629v0 585.126c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-585.126c0-8.079-6.55-14.629-14.629-14.629v0z","M336.462 497.371c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0zM336.462 351.091c-16.158 0-29.256 13.098-29.256 29.256s13.098 29.256 29.256 29.256c16.158 0 29.256-13.098 29.256-29.256v0c0-16.158-13.098-29.256-29.256-29.256v0z","M512 731.422c-24.105-0.325-43.559-19.78-43.884-43.853v-0.032c0-39.788-9.947-73.14-131.653-73.14s-131.653 33.352-131.653 73.14c0 24.237-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0c0-160.909 165.005-160.909 219.422-160.909s219.422 0 219.422 160.909c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032z","M804.562 438.86h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M746.051 614.397h-117.025c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h117.025c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{},{}],"tags":["id-card","identification","personal-info","identity","proof"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{}],"properties":{"order":202,"id":9,"name":"id-card","prevSize":24,"code":59818},"setIdx":0,"setId":1,"iconIdx":143},{"icon":{"paths":["M921.588 906.96h-819.175c-56.419-0.331-102.067-45.977-102.397-102.366v-146.313c0.325-24.105 19.78-43.559 43.853-43.884h0.032c56.552 0 102.397-45.844 102.397-102.397s-45.844-102.397-102.397-102.397v0c-24.105-0.325-43.559-19.78-43.884-43.853v-146.313c0.331-56.419 45.977-102.067 102.366-102.397h819.207c56.419 0.331 102.067 45.977 102.397 102.366v146.313c-0.325 24.105-19.78 43.559-43.853 43.884h-0.032c-56.552 0-102.397 45.844-102.397 102.397s45.844 102.397 102.397 102.397v0c24.105 0.325 43.559 19.78 43.884 43.853v146.313c-0.331 56.419-45.977 102.067-102.366 102.397h-0.032zM87.785 696.9v107.664c0 8.079 6.55 14.629 14.629 14.629v0h819.175c8.079 0 14.629-6.55 14.629-14.629v0-107.664c-84.233-20.753-145.724-95.646-145.724-184.9s61.489-164.147 144.417-184.627l1.306-0.273v-107.664c0-8.079-6.55-14.629-14.629-14.629v0h-819.175c-8.079 0-14.629 6.55-14.629 14.629v0 107.664c84.233 20.753 145.724 95.646 145.724 184.9s-61.489 164.147-144.417 184.627l-1.306 0.273z"],"attrs":[{}],"tags":["ticket","pass","entry","admit","voucher"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":201,"id":10,"name":"ticket","prevSize":24,"code":59817},"setIdx":0,"setId":1,"iconIdx":144},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file-o","deprecate","document","draft"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":200,"id":11,"name":"file-o","prevSize":24,"code":59816},"setIdx":0,"setId":1,"iconIdx":145},{"icon":{"paths":["M680.456 749.159c-0.386 0.011-0.839 0.017-1.294 0.017-27.363 0-49.546-22.183-49.546-49.546 0-13.679 5.543-26.064 14.506-35.029v0l258.959-256.978-258.959-256.978c-8.952-8.963-14.491-21.342-14.491-35.012s5.537-26.049 14.491-35.013v0c8.963-8.952 21.342-14.491 35.012-14.491s26.049 5.537 35.013 14.491v0l294.632 291.991c8.952 8.963 14.491 21.342 14.491 35.012s-5.537 26.049-14.491 35.013v0l-294.632 291.991c-8.452 8.957-20.405 14.534-33.659 14.534-0.011 0-0.023 0-0.034 0h0.002z","M49.571 957.913c-27.215-0.367-49.179-22.331-49.546-49.51v-500.779c0.367-27.215 22.331-49.179 49.51-49.546h924.892c27.363 0 49.546 22.183 49.546 49.546s-22.183 49.546-49.546 49.546v0h-875.31v451.197c-0.367 27.215-22.331 49.179-49.51 49.546h-0.036z"],"attrs":[{},{}],"tags":["reply","respond","answer","comment-back","feedback"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":199,"id":12,"name":"reply","prevSize":24,"code":59815},"setIdx":0,"setId":1,"iconIdx":146},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M441.707 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-121.77-121.77c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l121.767-122.873c7.51-7.501 17.881-12.141 29.334-12.141s21.825 4.639 29.335 12.141v0c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0l-94.092 92.985 94.092 92.985c7.501 7.51 12.141 17.881 12.141 29.334s-4.639 21.825-12.141 29.335v0c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M705.718 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-110.726h-345.927c-22.926 0-41.511-18.585-41.511-41.511s18.585-41.511 41.511-41.511v0h387.438c22.801 0.307 41.204 18.71 41.511 41.481v154.451c-1.483 21.852-19.449 39.046-41.487 39.297h-0.025z"],"attrs":[{},{},{}],"tags":["directions-alt","route","navigation","path","guide","left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":195,"id":13,"name":"directions-alt","prevSize":24,"code":59813},"setIdx":0,"setId":1,"iconIdx":147},{"icon":{"paths":["M512 1023.972c-0.004 0-0.010 0-0.016 0-27.661 0-52.702-11.211-70.831-29.334l-411.791-411.791c-18.134-18.13-29.35-43.178-29.35-70.845s11.216-52.715 29.35-70.845l411.791-411.791c18.415-17.494 43.374-28.255 70.845-28.255s52.43 10.76 70.891 28.296l-0.044-0.042 411.791 411.791c18.134 18.13 29.35 43.178 29.35 70.845s-11.216 52.715-29.35 70.845l-411.791 411.791c-18.129 18.125-43.17 29.334-70.831 29.334-0.005 0-0.010 0-0.016 0h0.001zM512 83.051c-0.143-0.005-0.31-0.008-0.477-0.008-4.422 0-8.397 1.921-11.133 4.975l-0.013 0.014-412.345 412.345c-3.072 2.929-4.981 7.053-4.981 11.623s1.91 8.694 4.975 11.617l412.351 412.351c2.502 3.832 6.772 6.329 11.623 6.329s9.121-2.497 11.591-6.276l0.032-0.053 412.345-412.345c3.072-2.929 4.981-7.053 4.981-11.623s-1.91-8.694-4.975-11.617l-412.351-412.351c-2.749-3.068-6.722-4.989-11.146-4.989-0.167 0-0.335 0.003-0.502 0.008h0.025z","M582.293 645.942c-0.057 0-0.126 0-0.193 0-11.4 0-21.712-4.657-29.137-12.173l-0.004-0.004c-7.501-7.51-12.141-17.881-12.141-29.334s4.639-21.825 12.141-29.335v0l94.092-92.985-94.092-92.985c-8.139-7.599-13.212-18.392-13.212-30.371 0-22.926 18.585-41.511 41.511-41.511 11.979 0 22.771 5.073 30.347 13.188l0.022 0.025 121.767 122.319c7.668 7.537 12.42 18.020 12.42 29.612s-4.752 22.075-12.413 29.605l-0.006 0.005-121.767 121.767c-7.429 7.52-17.741 12.177-29.141 12.177-0.067 0-0.136 0-0.204 0h0.010z","M318.282 678.045c-22.801-0.307-41.204-18.71-41.511-41.481v-154.451c0.307-22.801 18.71-41.204 41.481-41.511h387.468c22.926 0 41.511 18.585 41.511 41.511s-18.585 41.511-41.511 41.511v0h-345.927v110.696c0.021 0.497 0.032 1.078 0.032 1.663 0 23.049-18.537 41.768-41.516 42.061h-0.027z"],"attrs":[{},{},{}],"tags":["directions","route","navigation","path","guide","right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":196,"id":14,"name":"directions","prevSize":24,"code":59814},"setIdx":0,"setId":1,"iconIdx":148},{"icon":{"paths":["M992.966 368.647c-25.16-29.841-61.437-46.809-100.641-46.809h-235.803v-160.907c0-88.937-71.969-160.907-165.589-160.907-40.959 0-77.821 24.575-94.203 62.607l-148.619 346.974h-109.417c-76.65 0-138.673 62.023-138.673 138.673v337.613c0 76.066 62.607 138.087 138.673 138.087h676.396c63.778 0 118.194-45.639 129.31-108.832l77.235-438.838c6.436-38.618-4.096-77.821-29.255-107.662zM138.696 936.209c-28.086 0-50.905-22.82-50.905-50.32v-337.613c0-28.086 22.82-50.905 50.905-50.905h94.203v438.838h-94.203zM858.39 899.933c-3.511 21.064-21.65 36.277-43.298 36.277h-493.839v-473.945l156.226-365.699c2.341-5.266 7.607-9.362 18.723-9.362 40.373 0 72.555 32.766 72.555 73.139v248.674h323.57c13.457 0 25.16 5.266 33.352 15.213s11.702 22.82 9.362 36.277l-77.235 438.838z"],"attrs":[{}],"tags":["thumbs-up","like","positive","agree","good"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":191,"id":15,"name":"thumbs-up","prevSize":24,"code":59811},"setIdx":0,"setId":1,"iconIdx":149},{"icon":{"paths":["M885.271 0.068h-676.92c-63.773 0-118.184 45.635-129.299 108.822l-76.643 438.799c-6.435 38.614 4.096 77.814 28.669 107.652 25.158 29.838 61.432 46.805 100.632 46.805h235.782v160.892c0 88.929 71.963 160.892 165.574 160.892 40.955 0 77.814-24.573 94.195-62.602l148.606-346.943h109.992c76.643 0 138.66-62.017 138.66-138.66v-337.583c0-76.059-62.017-138.075-138.66-138.075zM702.731 561.731l-156.212 365.666c-2.341 5.266-7.606 9.361-18.722 9.361-40.369 0-72.549-32.763-72.549-73.133v-248.652h-323.541c-13.456 0-25.158-5.266-33.349-15.211-8.776-9.946-11.701-22.818-9.361-36.274l76.643-438.799c3.51-21.062 21.648-36.274 43.294-36.274h493.795v473.317zM936.172 475.726c0 28.083-22.818 50.901-50.901 50.901h-94.195v-438.799h94.195c28.083 0 50.901 22.818 50.901 50.315v337.583z"],"attrs":[{}],"tags":["thumbs-down","dislike","negative","disagree","bad"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":258,"id":16,"name":"thumbs-down","prevSize":24,"code":59812},"setIdx":0,"setId":1,"iconIdx":150},{"icon":{"paths":["M410.934 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 12.551-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M842.942 569.469c-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s43.597 32.368 67.377 19.156l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606z","M809.253 33.093c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 181.719c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":255,"id":17,"name":"sort-numeric-down-alt","prevSize":24,"code":59798},"setIdx":0,"setId":1,"iconIdx":151},{"icon":{"paths":["M315.813 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M842.942 569.469c-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s43.597 32.368 67.377 19.156l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606z","M809.253 33.093c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 181.719c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":182,"id":18,"name":"sort-numeric-up-alt","prevSize":24,"code":59799},"setIdx":0,"setId":1,"iconIdx":152},{"icon":{"paths":["M394.419 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 12.551-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M971.751 924.852l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414s54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414zM761.031 807.932l31.707-88.515 31.707 88.515h-63.414z","M632.883 415.558c12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515z"],"attrs":[{},{},{}],"tags":["sort-alpha-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":183,"id":19,"name":"sort-alpha-down-alt","prevSize":24,"code":59800},"setIdx":0,"setId":1,"iconIdx":153},{"icon":{"paths":["M299.298 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M971.751 924.852l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414s54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414zM761.031 807.932l31.707-88.515 31.707 88.515h-63.414z","M632.883 415.558c12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515z"],"attrs":[{},{},{}],"tags":["sort-alpha-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":184,"id":20,"name":"sort-alpha-up-alt","prevSize":24,"code":59801},"setIdx":0,"setId":1,"iconIdx":154},{"icon":{"paths":["M410.934 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M766.977 159.26l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s42.936 32.368 67.377 19.156z","M809.253 561.542c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 710.169c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":185,"id":21,"name":"sort-numeric-down","prevSize":24,"code":59802},"setIdx":0,"setId":1,"iconIdx":155},{"icon":{"paths":["M315.813 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M766.977 159.26l25.762-13.872v268.189c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-293.951c0-34.35-18.496-64.735-48.881-78.606-26.423-12.551-56.808-9.247-80.588 7.927l-42.936 23.78c-23.78 13.211-32.368 43.597-19.156 67.377s42.936 32.368 67.377 19.156z","M809.253 561.542c-81.91 0-148.627 66.716-148.627 148.627s66.716 148.627 148.627 148.627c11.229 0 21.799-1.321 32.368-3.963-15.192 21.799-39.634 36.991-66.716 36.991h-31.707c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h31.707c95.121 0 177.031-77.286 181.654-172.407 1.321-21.137 1.321-45.579 1.321-75.304v-33.028c0-81.91-66.716-148.627-148.627-148.627zM759.711 710.169c0-27.083 22.46-49.542 49.542-49.542s49.542 22.46 49.542 49.542-22.46 49.542-49.542 49.542-49.542-22.46-49.542-49.542z"],"attrs":[{},{},{}],"tags":["sort-numeric-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":186,"id":22,"name":"sort-numeric-up","prevSize":24,"code":59803},"setIdx":0,"setId":1,"iconIdx":156},{"icon":{"paths":["M394.419 774.244l-80.588 80.588v-805.226c0-27.083-22.46-49.542-49.542-49.542s-49.542 22.46-49.542 49.542v805.226l-80.588-80.588c-19.156-19.156-50.863-19.156-70.020 0s-19.156 50.863 0 70.020l165.141 165.141c4.624 4.624 9.908 7.927 15.853 10.57s12.551 3.963 19.156 3.963 13.211-1.321 19.156-3.963c5.945-2.643 11.229-5.945 15.853-10.57l165.141-165.141c19.156-19.156 19.156-50.863 0-70.020s-50.863-19.156-70.020 0z","M644.112 459.815c25.762 9.247 54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414zM824.445 279.482h-63.414l31.707-88.515 31.707 88.515z","M952.596 608.442c-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515 12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176z"],"attrs":[{},{},{}],"tags":["sort-alpha-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":187,"id":23,"name":"sort-alpha-down","prevSize":24,"code":59804},"setIdx":0,"setId":1,"iconIdx":157},{"icon":{"paths":["M299.298 14.597c-4.624-4.624-9.908-7.927-15.853-10.57-11.89-5.284-25.762-5.284-37.652 0-5.945 2.643-11.229 5.945-15.853 10.57l-165.141 165.141c-19.156 19.156-19.156 50.863 0 70.020s50.863 19.156 70.020 0l80.588-80.588v805.226c0 27.083 22.46 49.542 49.542 49.542s49.542-22.46 49.542-49.542v-805.226l80.588 80.588c9.908 9.908 22.46 14.533 35.009 14.533s25.101-4.624 35.009-14.533c19.156-19.156 19.156-50.863 0-70.020l-165.141-165.141z","M644.112 459.815c25.762 9.247 54.167-3.963 63.414-29.725l18.496-51.524h134.094l18.496 51.524c7.266 20.478 26.423 33.028 46.899 33.028 5.284 0 11.229-0.661 16.515-2.643 25.762-9.247 38.973-37.652 29.725-63.414l-112.956-316.409c-11.229-28.405-36.991-46.899-66.057-46.899s-54.826 18.496-66.057 48.222l-112.295 315.088c-9.247 25.762 3.963 54.167 29.725 63.414zM824.445 279.482h-63.414l31.707-88.515 31.707 88.515z","M952.596 608.442c-12.551-29.064-38.973-46.899-69.359-46.899h-205.434c-27.083 0-49.542 22.46-49.542 49.542s22.46 49.542 49.542 49.542h157.874l-186.94 194.866c-22.46 23.78-28.405 58.13-15.853 88.515 12.551 29.064 38.973 46.899 69.359 46.899h206.756c27.083 0 49.542-22.46 49.542-49.542s-22.46-49.542-49.542-49.542h-157.874l186.279-193.544c22.46-23.78 29.064-58.79 15.853-89.176z"],"attrs":[{},{},{}],"tags":["sort-alpha-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":188,"id":24,"name":"sort-alpha-up","prevSize":24,"code":59805},"setIdx":0,"setId":1,"iconIdx":158},{"icon":{"paths":["M412.908 264.27c-12.552 0-25.103-4.625-35.012-14.534l-130.14-130.14-130.14 130.14c-19.157 19.157-50.867 19.157-70.025 0s-19.157-50.867 0-70.025l165.154-165.154c19.157-19.157 50.867-19.157 70.025 0l165.154 165.154c19.157 19.157 19.157 50.867 0 70.025-9.909 9.909-22.461 14.534-35.012 14.534z","M247.755 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z","M776.245 1023.975c-12.552 0-25.103-4.625-35.012-14.534l-165.154-165.154c-19.157-19.157-19.157-50.867 0-70.025s50.867-19.157 70.025 0l130.14 130.14 130.14-130.14c19.157-19.157 50.867-19.157 70.025 0s19.157 50.867 0 70.025l-165.154 165.154c-9.909 9.909-22.461 14.534-35.012 14.534z","M776.245 1023.975c-27.085 0-49.546-22.461-49.546-49.546v-924.856c0-27.085 22.461-49.546 49.546-49.546s49.546 22.461 49.546 49.546v924.856c0 27.085-22.461 49.546-49.546 49.546z"],"attrs":[{},{},{},{}],"tags":["sort-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":189,"id":25,"name":"sort-alt","prevSize":24,"code":59806},"setIdx":0,"setId":1,"iconIdx":159},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":190,"id":26,"name":"sort-amount-up","prevSize":24,"code":59807},"setIdx":0,"setId":1,"iconIdx":160},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 292.547h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 643.672h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 819.234h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 468.109h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":180,"id":27,"name":"sort-amount-down","prevSize":24,"code":59808},"setIdx":0,"setId":1,"iconIdx":161},{"icon":{"paths":["M190.135 965.536c-11.119 0-22.237-4.097-31.016-12.875l-146.302-146.302c-16.971-16.971-16.971-45.061 0-62.032s45.061-16.971 62.032 0l115.285 115.285 115.285-115.285c16.971-16.971 45.061-16.971 62.032 0s16.971 45.061 0 62.032l-146.302 146.302c-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-down-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":179,"id":28,"name":"sort-amount-down-alt","prevSize":24,"code":59809},"setIdx":0,"setId":1,"iconIdx":162},{"icon":{"paths":["M336.438 292.547c-11.119 0-22.237-4.097-31.016-12.875l-115.285-115.285-115.285 115.285c-16.971 16.971-45.061 16.971-62.032 0s-16.971-45.061 0-62.032l146.302-146.302c16.971-16.971 45.061-16.971 62.032 0l146.302 146.302c16.971 16.971 16.971 45.061 0 62.032-8.778 8.778-19.898 12.875-31.016 12.875z","M190.135 965.536c-23.993 0-43.891-19.898-43.891-43.891v-819.29c0-23.993 19.898-43.891 43.891-43.891s43.891 19.898 43.891 43.891v819.29c0 23.993-19.898 43.891-43.891 43.891z","M980.166 819.234h-468.166c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h468.166c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M746.084 468.109h-234.084c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h234.084c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M629.041 292.547h-117.041c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h117.041c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z","M863.125 643.672h-351.125c-23.993 0-43.891-19.898-43.891-43.891s19.898-43.891 43.891-43.891h351.125c23.993 0 43.891 19.898 43.891 43.891s-19.898 43.891-43.891 43.891z"],"attrs":[{},{},{},{},{},{}],"tags":["sort-amount-up-alt"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":178,"id":29,"name":"sort-amount-up-alt","prevSize":24,"code":59810},"setIdx":0,"setId":1,"iconIdx":163},{"icon":{"paths":["M516.624 0.063s-4.624 0-7.266 0c-250.354 0-468.339 184.297-507.973 432.008-5.284 33.028 3.963 67.377 26.423 93.139 21.799 25.762 52.844 40.295 85.874 40.295h3.963c114.938 0 201.471 28.405 256.958 83.892 56.148 56.148 83.892 144.002 83.231 260.922 0 33.028 14.533 64.075 39.634 85.874 21.137 18.496 48.222 28.405 75.304 27.744 5.945 0 11.89 0 17.835-1.321 250.354-40.295 435.971-261.583 432.669-515.239-3.963-275.455-231.196-503.349-507.312-507.312zM575.414 924.852c-3.963 0-9.247-0.661-13.211-3.963-1.982-1.982-5.284-5.284-5.284-9.908 0.661-144.663-36.991-256.299-112.295-331.603-74.643-74.643-184.958-112.956-326.978-112.956h-3.963c-5.284 0-8.588-3.302-10.57-5.284-1.321-1.982-5.284-6.606-3.963-13.211 32.368-199.489 208.077-348.777 410.209-348.777 1.982 0 3.963 0 5.945 0v0c218.647 3.302 406.246 190.242 409.548 409.548 2.643 204.775-147.306 383.786-348.777 416.154zM375.925 315.152c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM575.414 231.921c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM642.13 315.152c0-36.331 29.725-66.716 66.716-66.716s66.716 29.725 66.716 66.716-29.725 66.716-66.716 66.716-66.716-29.725-66.716-66.716zM858.134 514.643c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716zM774.903 714.132c0 36.331-29.725 66.716-66.716 66.716s-66.716-29.725-66.716-66.716 29.725-66.716 66.716-66.716 66.716 29.725 66.716 66.716z"],"attrs":[{}],"tags":["palette","colors","design","art","creative"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":257,"id":30,"name":"palette","prevSize":24,"code":59797},"setIdx":0,"setId":1,"iconIdx":164},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["undo","revert","back","cancel","reverse"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":256,"id":31,"name":"undo","prevSize":24,"code":59796},"setIdx":0,"setId":1,"iconIdx":165},{"icon":{"paths":["M921.582 789.931h-819.163c-56.418-0.33-102.065-45.976-102.396-102.364v-585.149c0.33-56.418 45.976-102.065 102.364-102.396h819.194c56.418 0.33 102.065 45.976 102.396 102.364v585.149c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 87.791c-8.079 0-14.628 6.55-14.628 14.628v0 585.117c0 8.079 6.55 14.628 14.628 14.628v0h819.163c8.079 0 14.628-6.55 14.628-14.628v0-585.117c0-8.079-6.55-14.628-14.628-14.628v0z","M687.535 1023.977h-175.535c-24.105-0.325-43.559-19.779-43.884-43.852v-234.079c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 190.163h131.651c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M512 1023.977h-175.535c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.535c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["desktop","computer","monitor","pc","screen"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":175,"id":32,"name":"desktop","prevSize":24,"code":59795},"setIdx":0,"setId":1,"iconIdx":166},{"icon":{"paths":["M809.27 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M809.27 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M908.36 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M214.73 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-462.457c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 462.421c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M214.73 429.425c-27.214-0.367-49.178-22.331-49.545-49.509v-330.335c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 330.3c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M313.82 429.425h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M512 1023.966c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M512 693.665c-27.214-0.367-49.178-22.331-49.545-49.509v-594.576c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 594.541c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M611.090 693.665h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-v","controls","adjustments","sliders","settings"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":174,"id":33,"name":"sliders-v","prevSize":24,"code":59793},"setIdx":0,"setId":1,"iconIdx":167},{"icon":{"paths":["M974.421 264.275h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 264.275h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 363.365c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 858.815h-462.421c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h462.421c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 858.815h-330.3c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h330.3c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M379.88 957.906c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z","M974.421 561.545h-198.18c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h198.18c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 561.545h-594.541c-27.363 0-49.545-22.182-49.545-49.545s22.182-49.545 49.545-49.545v0h594.541c27.363 0 49.545 22.182 49.545 49.545s-22.182 49.545-49.545 49.545v0z","M644.12 660.635c-27.214-0.367-49.178-22.331-49.545-49.509v-198.216c0-27.363 22.182-49.545 49.545-49.545s49.545 22.182 49.545 49.545v0 198.18c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{},{},{},{},{},{},{},{}],"tags":["sliders-h","controls","adjustments","sliders","settings"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{},{},{},{}],"properties":{"order":173,"id":34,"name":"sliders-h","prevSize":24,"code":59794},"setIdx":0,"setId":1,"iconIdx":168},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M438.902 628.957c-24.091-0.325-43.534-19.768-43.859-43.827v-292.424c0-24.222 19.636-43.859 43.859-43.859s43.859 19.636 43.859 43.859v0 292.393c-0.325 24.091-19.768 43.534-43.827 43.859h-0.032z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{},{}],"tags":["search-plus","increase-search","more-search","wide-filter","expand-search"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":172,"id":35,"name":"search-plus","prevSize":24,"code":59791},"setIdx":0,"setId":1,"iconIdx":169},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c-0.332 243.061-197.282 440.011-440.311 440.344h-0.033zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z","M585.098 482.761h-292.393c-24.222 0-43.859-19.636-43.859-43.859s19.636-43.859 43.859-43.859v0h292.393c24.222 0 43.859 19.636 43.859 43.859s-19.636 43.859-43.859 43.859v0z"],"attrs":[{},{},{}],"tags":["search-minus","reduce-search","less-results","narrow-filter","restrict-search"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":171,"id":36,"name":"search-minus","prevSize":24,"code":59792},"setIdx":0,"setId":1,"iconIdx":170},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M656.524 506.734c-7.496-5.775-17.020-9.255-27.356-9.255-13.907 0-26.344 6.301-34.608 16.205l-0.059 0.071-82.501 103.566-82.501-105.321c-8.353-9.812-20.716-15.996-34.521-15.996-24.992 0-45.251 20.259-45.251 45.251 0 11.185 4.058 21.422 10.782 29.32l-0.053-0.064 93.034 117.023-93.034 117.023c-5.992 7.47-9.615 17.061-9.615 27.5 0 24.376 19.76 44.136 44.136 44.136 13.937 0 26.366-6.461 34.454-16.55l0.067-0.086 82.501-101.81 82.501 105.321c8.276 9.979 20.653 16.31 34.509 16.384h0.012c1.085 0.096 2.348 0.149 3.622 0.149 24.236 0 43.884-19.648 43.884-43.884 0-12.183-4.964-23.206-12.981-31.157l-0.003-0.003-93.034-117.023 95.374-117.023c5.757-7.489 9.225-16.998 9.225-27.316 0-14.937-7.268-28.175-18.461-36.373l-0.126-0.088z"],"attrs":[{},{}],"tags":["file-excel","spreadsheet","workbook","xls","microsoft"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":170,"id":37,"name":"file-excel","prevSize":24,"code":59790},"setIdx":0,"setId":1,"iconIdx":171},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z","M599.182 678.758c-35.612-22.599-62.527-56.14-76.26-95.834l-0.389-1.295c8.513-24.598 13.428-52.947 13.428-82.444 0-12.194-0.841-24.192-2.466-35.938l0.154 1.359c-3.892-22.255-23.068-38.954-46.145-38.954-18.984 0-35.328 11.301-42.673 27.543l-0.119 0.295c-1.82 12.259-2.859 26.407-2.859 40.798 0 35.745 6.41 69.992 18.145 101.654l-0.657-2.026c-26.663 62.22-51.535 112.192-78.718 160.691l4.409-8.561c-41.543 23.405-98.3 58.512-107.076 98.885-7.021 32.766 54.416 117.023 159.151-65.534 38.752-15.060 86.483-29.549 135.472-40.728l7.296-1.4c33.675 19.598 73.544 32.44 116.101 35.636l0.922 0.056c0.37 0.010 0.806 0.016 1.244 0.016 26.499 0 47.98-21.481 47.98-47.98 0-12.689-4.926-24.228-12.97-32.809l0.025 0.026c-24.575-25.16-97.714-18.139-133.992-13.457zM319.497 854.293c16.89-28.581 38.169-52.658 63.208-72.128l0.569-0.426c-39.787 63.193-63.778 74.31-63.778 73.139zM490.35 455.829c15.213 0 14.043 67.289 3.511 85.427-4.439-14.87-6.994-31.954-6.994-49.637 0-12.459 1.269-24.62 3.683-36.365l-0.199 1.16zM439.445 741.365c17.504-31.081 34.829-68.095 49.5-106.424l1.99-5.919c15.998 29.397 37.215 53.976 62.634 73.317l0.558 0.407c-44.504 11.253-82.688 24.668-119.265 41.035l4.582-1.832zM714.451 730.833s-10.532 12.873-77.821-16.384c73.139-4.68 85.427 12.287 77.821 16.968z"],"attrs":[{},{}],"tags":["file-pdf","document","adobe","read","acrobat"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":169,"id":38,"name":"file-pdf","prevSize":24,"code":59789},"setIdx":0,"setId":1,"iconIdx":172},{"icon":{"paths":["M863.086 1024h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h518.437c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-518.437c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-451.145c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 451.145c0 88.87-72.044 160.914-160.914 160.914v0z","M424.229 702.172c-11.709-0.922-21.992-6.372-29.216-14.581l-0.041-0.048-175.543-175.543c-2.703-5.532-4.284-12.038-4.284-18.913 0-24.237 19.648-43.886 43.886-43.886 6.875 0 13.381 1.581 19.174 4.4l-0.261-0.114 144.531 144.531 499.127-495.616c5.532-2.703 12.038-4.284 18.913-4.284 24.237 0 43.886 19.648 43.886 43.886 0 6.875-1.581 13.381-4.4 19.174l0.114-0.261-526.629 526.629c-7.264 8.256-17.547 13.707-29.107 14.619l-0.151 0.010z"],"attrs":[{},{}],"tags":["check-square","confirm","agree","approved","accepted"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":168,"id":39,"name":"check-square","prevSize":24,"code":59788},"setIdx":0,"setId":1,"iconIdx":173},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M636.121 682.666c-0.064 0-0.141 0-0.217 0-12.783 0-24.345-5.222-32.671-13.649l-153.295-153.295-153.29 153.29c-8.289 7.74-19.456 12.492-31.731 12.492-25.706 0-46.545-20.839-46.545-46.545 0-12.276 4.752-23.441 12.518-31.759l-0.025 0.028 186.182-186.182c8.42-8.41 20.049-13.613 32.892-13.613s24.471 5.201 32.893 13.613v0l153.29 153.29 215.35-215.35c8.289-7.74 19.456-12.492 31.731-12.492 25.706 0 46.545 20.839 46.545 46.545 0 12.276-4.752 23.441-12.518 31.759l0.025-0.028-248.243 248.243c-8.33 8.432-19.892 13.654-32.675 13.654-0.076 0-0.153 0-0.228 0h0.012z","M915.393 626.192c-25.567-0.345-46.201-20.979-46.545-46.512v-176.285h-170.666c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h217.212c25.567 0.345 46.201 20.979 46.545 46.512v222.831c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["chart-line","growth","increase","stats","trend"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":167,"id":40,"name":"chart-line","prevSize":24,"code":59787},"setIdx":0,"setId":1,"iconIdx":174},{"icon":{"paths":["M431.778 504.757c-115.379 0-208.912-93.532-208.912-208.912s93.532-208.912 208.912-208.912c115.379 0 208.912 93.532 208.912 208.912v0c-0.316 115.251-93.66 208.596-208.881 208.912h-0.030zM431.778 170.499c-69.227 0-125.347 56.12-125.347 125.347s56.12 125.347 125.347 125.347c69.227 0 125.347-56.12 125.347-125.347v0c0-69.227-56.12-125.347-125.347-125.347v0z","M41.809 894.726c-23.076 0-41.782-18.707-41.782-41.782v0c0-264.622 302.504-264.622 431.751-264.622 40.111 0 75.766 0 108.076 3.9 21.638 1.734 38.542 19.721 38.542 41.657 0 1.025-0.037 2.041-0.11 3.046l0.008-0.134c-2.011 21.692-20.122 38.543-42.169 38.543-1.041 0-2.072-0.038-3.093-0.111l0.137 0.008c-30.083 0-63.509-3.343-101.391-3.343-288.576 0-348.186 72.423-348.186 181.057 0.003 0.167 0.004 0.364 0.004 0.561 0 22.767-18.457 41.225-41.225 41.225-0.197 0-0.394-0.001-0.59-0.004h0.030z","M549.326 937.066c-11.533-0.010-21.972-4.693-29.526-12.255v0c-7.671-7.32-12.439-17.622-12.439-29.037 0-1.349 0.067-2.683 0.197-3.998l-0.013 0.166 8.914-106.963c0.738-10.242 5.062-19.352 11.708-26.194l-0.009 0.010 307.518-307.518c20.408-18.948 47.843-30.576 77.993-30.576s57.585 11.627 78.066 30.642l-0.072-0.067c19.978 20.131 32.325 47.862 32.325 78.475 0 0.614-0.005 1.227-0.014 1.838l0.001-0.093c0.008 0.488 0.013 1.065 0.013 1.643 0 28.208-11.272 53.784-29.557 72.47l-307.499 307.499c-6.609 6.771-15.516 11.272-25.457 12.242l-0.17 0.013-108.076 10.028zM657.402 885.256v0zM598.35 806.705l-3.343 42.34 43.454-3.9 296.932-296.932c3.138-3.741 5.043-8.607 5.043-13.917 0-0.396-0.010-0.789-0.031-1.178l0.003 0.055c-0.022-8.097-2.969-15.5-7.838-21.216l0.038 0.046c-5.22-3.914-11.806-6.267-18.942-6.267s-13.722 2.354-19.024 6.327l0.082-0.059z"],"attrs":[{},{},{}],"tags":["user-edit","change-profile","user-modification","edit-user","update-details"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":166,"id":41,"name":"user-edit","prevSize":24,"code":59786},"setIdx":0,"setId":1,"iconIdx":175},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 568.889c-23.436-0.316-42.351-19.231-42.667-42.636v-199.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 199.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 739.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["exclamation-circle","important","attention","alert","warning"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":165,"id":42,"name":"exclamation-circle","prevSize":24,"code":59785},"setIdx":0,"setId":1,"iconIdx":176},{"icon":{"paths":["M897.818 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M126.182 342.011c-33.052 0-59.847 26.794-59.847 59.847v0 271.219c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-271.219c0-33.052-26.794-59.847-59.847-59.847v0z","M229.321 342.011v407.465c0 37.624 30.5 68.122 68.122 68.122v0h43.293v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0 0-144.522h103.139v144.522c0 33.052 26.794 59.847 59.847 59.847s59.847-26.794 59.847-59.847v0-144.522h43.293c37.624 0 68.122-30.5 68.122-68.122v0-407.465z","M787.039 257.334c-19.494-64.041-60.923-116.427-115.35-149.595l-1.159-0.657-9.55-5.73-10.187-5.093 11.46-19.737 33.743-63.667c0.321-0.883 0.507-1.901 0.507-2.963 0-2.96-1.443-5.584-3.665-7.206l-0.025-0.018h-4.457c-3.404 0.157-6.379 1.864-8.255 4.426l-0.021 0.030-34.38 59.21-10.823 19.737-10.187-4.457-10.823-3.82c-30.354-10.882-65.375-17.173-101.867-17.173s-71.511 6.291-104.038 17.846l2.171-0.673-10.187 3.82-10.823 4.457-10.823-19.737-34.38-63.667c-1.592-2.804-4.559-4.665-7.958-4.665-5.038 0-9.122 4.084-9.122 9.122 0 1.637 0.431 3.174 1.186 4.502l-0.024-0.045 33.743 63.667 11.46 19.737-10.187 5.093-9.55 5.73c-55.806 33.938-97.174 86.897-115.417 149.695l-0.455 1.831c-4.717 15.122-7.703 32.57-8.27 50.627l-0.007 0.307h565.357c-0.686-18.4-3.432-35.851-8.017-52.541l0.378 1.609zM384.668 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0zM639.332 223.592c-14.065 0-25.467-11.402-25.467-25.467s11.402-25.467 25.467-25.467c14.065 0 25.467 11.402 25.467 25.467v0c0 14.065-11.402 25.467-25.467 25.467v0z"],"attrs":[{},{},{},{}],"tags":["android","mobile","os","tech","robot","system"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":164,"id":43,"name":"android","prevSize":24,"code":59781},"setIdx":0,"setId":1,"iconIdx":177},{"icon":{"paths":["M1008.591 433.288l-5.759-22.397h-476.114v202.221h284.773c-32.683 123.892-143.735 213.758-275.775 213.758-1.138 0-2.275-0.006-3.409-0.019l0.172 0.001c-86.669-0.738-165.327-34.432-224.185-89.141l0.207 0.19c-58.421-57.606-94.785-137.451-95.35-225.791v-0.106c1.039-88.017 36.49-167.558 93.495-225.963l-0.064 0.066c57.221-54.292 134.738-87.683 220.053-87.683 0.93 0 1.86 0.004 2.788 0.012l-0.142-0.001c73.95 0.586 141.235 28.652 192.25 74.471l-0.268-0.238 140.787-144.626c-88.734-79.432-206.552-127.99-335.711-127.99-0.54 0-1.080 0.001-1.62 0.003h0.084c-0.919-0.006-2.007-0.009-3.094-0.009-142.761 0-272.106 57.428-366.198 150.443l0.049-0.049c-90.236 93.627-145.825 221.183-145.825 361.724 0 137.597 53.284 262.749 140.344 355.947l-0.279-0.301c96.859 96.51 230.481 156.177 378.041 156.177 2.082 0 4.162-0.012 6.238-0.036l-0.316 0.003c1.053 0.009 2.296 0.013 3.543 0.013 134.433 0 255.872-55.642 342.541-145.151l0.123-0.127c82.61-90.584 133.206-211.608 133.206-344.45 0-3.543-0.036-7.076-0.108-10.602l0.009 0.526c0.105-4.284 0.163-9.328 0.163-14.387 0-26.957-1.687-53.521-4.962-79.591l0.318 3.106z"],"attrs":[{}],"tags":["google","search","brand","technology","internet"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":163,"id":44,"name":"google","prevSize":24,"code":59782},"setIdx":0,"setId":1,"iconIdx":178},{"icon":{"paths":["M800.988 541.411c-0.025-1.227-0.040-2.673-0.040-4.124 0-81.14 45.665-151.616 112.697-187.127l1.149-0.554c-43.688-60.224-112.883-99.642-191.399-102.285l-0.408-0.010c-81.199-6.394-169.43 47.312-202.037 47.312s-113.166-44.755-174.544-44.755c-127.87 0-262.775 101.657-262.775 304.332 0.671 66.632 12.562 130.276 33.869 189.424l-1.262-4.011c28.131 81.837 133.625 287.070 243.594 283.874 57.542 0 98.461-40.919 173.266-40.919s109.97 40.919 174.544 40.919c110.608 0 206.511-188.61 234.004-272.365-83.223-34.69-140.659-115.384-140.659-209.49 0-0.076 0-0.154 0-0.231v0.012zM673.117 166.109c33.682-37.846 54.259-88 54.259-142.959 0-7.972-0.433-15.844-1.277-23.592l0.085 0.959c-61.9 6.974-115.875 36.341-154.514 79.679l-0.211 0.24c-37.077 39.007-59.884 91.883-59.884 150.086 0 4.782 0.154 9.526 0.457 14.231l-0.033-0.641c1.605 0.048 3.493 0.075 5.387 0.075 63.128 0 119.134-30.497 154.087-77.563l0.366-0.514z"],"attrs":[{}],"tags":["apple","brand","computer","technology","mac"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":162,"id":45,"name":"apple","prevSize":24,"code":59783},"setIdx":0,"setId":1,"iconIdx":179},{"icon":{"paths":["M0.001 0.001h480v480h-480zM543.999 0.001h480v480h-480zM0.001 543.999h480v480h-480zM543.999 543.999h480v480h-480z"],"attrs":[{}],"tags":["microsoft","brand","computer","technology","windows"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":161,"id":46,"name":"microsoft","prevSize":24,"code":59784},"setIdx":0,"setId":1,"iconIdx":180},{"icon":{"paths":["M512 966.541c-12.142-0.011-23.132-4.94-31.084-12.902v0l-397.063-398.237c-51.836-52.853-83.828-125.328-83.828-205.276s31.993-152.425 83.874-205.324l-0.045 0.047c52.537-52.531 125.112-85.022 205.276-85.022s152.739 32.491 205.277 85.023v0l17.595 15.249 16.423-16.423c52.328-52.883 124.914-85.631 205.15-85.631 0.25 0 0.502 0 0.752 0.001h-0.038c0.384-0.001 0.839-0.003 1.294-0.003 79.947 0 152.3 32.511 204.559 85.034l0.012 0.012c51.836 52.853 83.828 125.328 83.828 205.276s-31.993 152.425-83.874 205.324l0.045-0.047-397.063 398.237c-7.714 8.616-18.706 14.16-30.998 14.66l-0.087 0.003zM289.714 145.434c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l0.010-0.010c-36.735 36.902-59.445 87.793-59.445 143.987s22.71 107.086 59.452 143.994l-0.007-0.007 365.979 368.325 365.392-367.151c36.877-36.837 59.687-87.747 59.687-143.987s-22.81-107.15-59.686-143.985l-0.001-0.001c-36.111-36.238-86.066-58.659-141.257-58.659-0.65 0-1.3 0.003-1.949 0.010l0.099-0.001c-0.436-0.003-0.953-0.005-1.468-0.005-55.496 0-105.759 22.406-142.235 58.666l-47.497 47.497c-8.080 7.677-19.030 12.4-31.084 12.4s-23.006-4.723-31.104-12.418l0.019 0.018-47.507-47.507c-36.581-36.947-87.314-59.823-143.391-59.823-0.107 0-0.213 0-0.32 0h0.016z"],"attrs":[{}],"tags":["heart","love","like","affection","favorite"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":160,"id":47,"name":"heart","prevSize":24,"code":59780},"setIdx":0,"setId":1,"iconIdx":181},{"icon":{"paths":["M746.047 0.023h-468.093c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h468.125c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM760.674 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-468.093c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h468.093c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["mobile","phone","device","smartphone","cellphone"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":159,"id":48,"name":"mobile","prevSize":24,"code":59778},"setIdx":0,"setId":1,"iconIdx":182},{"icon":{"paths":["M863.070 0.023h-702.14c-56.418 0.33-102.065 45.976-102.396 102.364v819.195c0.33 56.418 45.976 102.065 102.364 102.396h702.172c56.418-0.33 102.065-45.976 102.396-102.364v-819.195c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM877.699 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-702.14c-8.079 0-14.628-6.55-14.628-14.628v0-819.163c0-8.079 6.55-14.628 14.628-14.628v0h702.14c8.079 0 14.628 6.55 14.628 14.628v0z","M512 658.28c-48.472 0-87.768 39.295-87.768 87.768s39.295 87.768 87.768 87.768c48.472 0 87.768-39.295 87.768-87.768v0c0-48.472-39.295-87.768-87.768-87.768v0zM512 746.047v0z"],"attrs":[{},{}],"tags":["tablet","device","tech","screen","mobile"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":220,"id":49,"name":"tablet","prevSize":24,"code":59779},"setIdx":0,"setId":1,"iconIdx":183},{"icon":{"paths":["M687.134 672.539c-0.215 0-0.469 0.001-0.724 0.001-92.498 0-176.242-37.479-236.875-98.078l0.001 0.001c-61.305-61.014-99.243-145.459-99.243-238.766 0-186.032 150.809-336.841 336.841-336.841s336.841 150.809 336.841 336.841c0 186.032-150.808 336.84-336.84 336.841v0zM687.134 88.761c-136.764 0.345-247.499 111.293-247.499 248.106 0 68.362 27.648 130.267 72.373 175.141l-0.007-0.007c44.929 45.079 107.076 72.972 175.74 72.972 137.026 0 248.106-111.081 248.106-248.106s-111.081-248.106-248.106-248.106c-0.213 0-0.427 0-0.639 0.001h0.033z","M74.166 993.618c-11.682-0.919-21.941-6.357-29.147-14.547l-0.041-0.048c-6.919-7.71-11.15-17.955-11.15-29.188s4.231-21.479 11.185-29.23l-0.036 0.041 377.122-377.705c7.941-7.869 18.873-12.731 30.94-12.731 24.281 0 43.963 19.683 43.963 43.963 0 12.213-4.98 23.263-13.020 31.229l-0.003 0.003-380.624 373.619c-7.248 8.237-17.507 13.675-29.039 14.585l-0.151 0.010z","M278.488 1022.806c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-7.28-7.798-11.75-18.301-11.75-29.848 0-24.181 19.603-43.783 43.783-43.783 11.548 0 22.050 4.47 29.874 11.775l-0.026-0.023 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z","M395.245 906.051c-0.060 0-0.133 0-0.204 0-12.024 0-22.9-4.912-30.732-12.839l-116.759-116.759c-8.584-8.015-13.935-19.399-13.935-32.033 0-24.181 19.603-43.783 43.783-43.783 12.634 0 24.018 5.351 32.008 13.909l0.023 0.026 116.755 116.755c7.911 7.921 12.805 18.86 12.805 30.94s-4.893 23.019-12.805 30.941v0c-7.836 7.932-18.712 12.844-30.736 12.844-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{},{},{}],"tags":["key","unlock","access","secret","password"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":219,"id":50,"name":"key","prevSize":24,"code":59777},"setIdx":0,"setId":1,"iconIdx":184},{"icon":{"paths":["M468.112 906.989c0 48.569-39.207 87.775-87.775 87.775s-87.775-39.207-87.775-87.775 39.207-87.775 87.775-87.775 87.775 39.207 87.775 87.775zM760.696 819.214c-48.569 0-87.775 39.207-87.775 87.775s39.207 87.775 87.775 87.775 87.775-39.207 87.775-87.775-39.207-87.775-87.775-87.775zM1022.852 259.207l-117.033 468.135c-4.681 19.311-22.236 33.355-42.718 33.355h-585.169c-21.066 0-39.207-15.214-43.302-36.28l-110.597-607.405h-80.168c-23.991 0-43.888-19.896-43.888-43.888s19.896-43.888 43.888-43.888h117.033c21.066 0 39.207 15.214 43.302 36.28l25.163 139.271h750.771c13.458 0 26.333 6.436 34.525 16.969s11.119 24.577 8.192 37.451zM923.958 292.562h-678.795l69.050 380.359h514.363l95.383-380.359z"],"attrs":[{}],"tags":["shopping-cart","buy","purchase","retain","shop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":156,"id":51,"name":"shopping-cart","prevSize":24,"code":59776},"setIdx":0,"setId":1,"iconIdx":185},{"icon":{"paths":["M46.723 830.79c-0.231 0.004-0.504 0.007-0.777 0.007-24.867 0-45.027-20.159-45.027-45.027 0-5.382 0.944-10.545 2.676-15.329l-0.098 0.314 75.044-247.348c-14.665-39.037-23.418-84.145-24.012-131.219l-0.003-0.259c0-0.259-0.001-0.566-0.001-0.874 0-54.129 11.264-105.629 31.575-152.281l-0.955 2.464c60.427-141.25 198.214-238.423 358.696-238.423 106.632 0 203.244 42.901 273.517 112.384l-0.037-0.035c34.184 34.714 62.103 75.715 81.849 121.093l1 2.581c19.107 44.313 30.22 95.904 30.22 150.090s-11.112 105.775-31.182 152.616l0.962-2.526c-20.746 47.959-48.666 88.96-82.9 123.725l0.051-0.051c-70.377 70.256-167.536 113.703-274.844 113.703-48.549 0-95.021-8.893-137.875-25.139l2.675 0.889-247.348 76.845c-3.958 1.137-8.504 1.794-13.204 1.801h-0.004zM442.359 91.749c-0.253-0.001-0.554-0.001-0.856-0.001-41.547 0-81.081 8.613-116.916 24.15l1.904-0.734c-71.28 30.615-127.108 85.859-157.736 154.781l-0.758 1.912c-14.788 34.299-23.39 74.229-23.39 116.169s8.602 81.87 24.134 118.125l-0.744-1.956c1.7 4.555 2.682 9.817 2.682 15.309s-0.984 10.754-2.783 15.621l0.101-0.312-55.232 180.107 180.107-55.232c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101c34.014 14.517 73.588 22.957 115.132 22.957 122.867 0 228.493-73.819 274.946-179.525l0.754-1.926c13.056-32.416 20.631-70.004 20.631-109.36 0-163.117-130.105-295.846-292.2-300.074l-0.391-0.008z","M977.277 1022.304c-1.984 0.28-4.275 0.439-6.603 0.439s-4.621-0.16-6.864-0.469l0.26 0.030-247.348-75.044c-40.428 15.733-87.225 24.849-136.153 24.849-158.064 0-293.904-95.147-353.373-231.291l-0.967-2.482c-2.862-5.665-4.539-12.349-4.539-19.423 0-18.267 11.175-33.923 27.063-40.506l0.291-0.107c5.517-2.599 11.984-4.116 18.806-4.116 18.319 0 34.084 10.94 41.115 26.643l0.114 0.286c15.121 35.516 35.349 65.946 60.152 91.977l-0.117-0.122c54.202 53.624 128.774 86.753 211.084 86.753 41.688 0 81.392-8.499 117.473-23.857l-1.963 0.743c4.555-1.7 9.817-2.682 15.309-2.682s10.754 0.984 15.621 2.783l-0.312-0.101 180.107 55.232-55.232-180.107c-1.7-4.555-2.682-9.817-2.682-15.309s0.984-10.754 2.783-15.621l-0.101 0.312c14.803-33.932 23.415-73.467 23.415-115.014 0-0.301 0-0.602-0.001-0.902v0.046c0.001-0.319 0.001-0.697 0.001-1.075 0-81.912-33.275-156.053-87.045-209.642l-0.008-0.008c-12.456-15.658-25.63-29.595-39.895-42.336l-0.328-0.288c-13.187-8.012-21.861-22.298-21.861-38.61 0-24.867 20.159-45.027 45.027-45.027 10.297 0 19.786 3.456 27.372 9.273l-0.107-0.079c22.529 14.653 42.156 30.276 60.175 47.561l-0.139-0.132c34.393 34.592 62.347 75.63 81.881 121.138l0.968 2.536c19.357 44.266 30.62 95.849 30.62 150.064 0 0.431-0.001 0.863-0.003 1.293v-0.066c-0.136 48.508-8.929 94.919-24.912 137.831l0.898-2.751 75.044 247.348c1.634 4.472 2.578 9.633 2.578 15.015 0 24.867-20.159 45.027-45.027 45.027-0.273 0-0.546-0.003-0.818-0.007h0.041z"],"attrs":[{},{}],"tags":["comments","chats","forums","discussions","feedbacks"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":155,"id":52,"name":"comments","prevSize":24,"code":59774},"setIdx":0,"setId":1,"iconIdx":186},{"icon":{"paths":["M89.22 977.058c-0.217 0.004-0.473 0.007-0.729 0.007-23.349 0-42.278-18.929-42.278-42.278 0-5.053 0.887-9.901 2.513-14.393l-0.093 0.294 90.193-295.946c-18.558-46.704-29.318-100.819-29.318-157.447 0-0.732 0.001-1.463 0.006-2.195v0.113c0-0.201 0-0.439 0-0.677 0-62.834 12.85-122.668 36.068-177.015l-1.118 2.942c23.991-55.124 56.28-102.224 95.856-142.080l-0.026 0.026c39.776-39.941 87.133-72.3 139.735-94.736l2.882-1.092c51.475-22.443 111.446-35.5 174.466-35.5s122.993 13.057 177.355 36.615l-2.889-1.115c161.557 70.486 272.594 228.494 273.398 412.529v0.103c-0.378 123.676-50.484 235.576-131.361 316.819l0.016-0.016c-39.83 39.549-86.93 71.841-139.11 94.681l-2.944 1.149c-51.439 22.133-111.317 35.003-174.201 35.003-57.536 0-112.557-10.776-163.152-30.417l3.076 1.050-295.946 90.193c-3.604 1.586-7.788 2.774-12.162 3.355l-0.239 0.026zM557.097 103.314c-149.484 0.668-277.735 90.884-333.925 219.741l-0.917 2.358c-17.678 41.648-27.953 90.087-27.953 140.927s10.274 99.278 28.861 143.354l-0.909-2.427c1.596 4.277 2.518 9.218 2.518 14.374s-0.923 10.098-2.613 14.668l0.095-0.293-69.336 235.065 233.938-71.027c4.277-1.596 9.218-2.518 14.374-2.518s10.098 0.923 14.668 2.613l-0.293-0.095c41.635 17.765 90.074 28.091 140.927 28.091s99.291-10.328 143.335-28.999l-2.408 0.907c131.638-56.462 222.168-184.951 222.168-334.586 0-51.2-10.598-99.924-29.723-144.098l0.907 2.35c-56.972-130.557-184.848-220.199-333.686-220.41h-0.028z"],"attrs":[{}],"tags":["comment","chat","talk","feedback","opinion"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":154,"id":53,"name":"comment","prevSize":24,"code":59775},"setIdx":0,"setId":1,"iconIdx":187},{"icon":{"paths":["M921.588 175.553h-219.422v-73.14c-4.292-57.542-52.035-102.602-110.299-102.602-2.366 0-4.715 0.074-7.043 0.221l0.318-0.016h-146.282c-2.010-0.13-4.36-0.204-6.725-0.204-58.266 0-106.007 45.060-110.277 102.234l-0.022 0.368v73.14h-219.422c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM409.603 102.412c0-4.681 11.118-14.629 29.256-14.629h146.282c18.139 0 29.256 9.947 29.256 14.629v73.14h-204.793zM102.412 263.322h819.175c8.079 0 14.629 6.55 14.629 14.629v0 190.166h-848.432v-190.166c0-8.079 6.55-14.629 14.629-14.629v0zM321.834 555.884h380.331v87.769h-380.331zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-307.191h146.282v131.653c0.325 24.105 19.78 43.559 43.853 43.884h468.131c24.105-0.325 43.559-19.78 43.884-43.853v-131.685h146.282v307.191c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["briefcase","work","job","professional","business"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":153,"id":54,"name":"briefcase","prevSize":24,"code":59773},"setIdx":0,"setId":1,"iconIdx":188},{"icon":{"paths":["M983.875 747.107c-4.979 0-116.724-19.915-116.724-345.747 0-230.128-133.873-373.406-355.151-373.406s-355.151 143.278-355.151 373.406c0 331.917-115.617 345.747-115.065 345.747-22.914 0-41.49 18.576-41.49 41.49s18.576 41.49 41.49 41.49v0h267.193c19.311 95.868 102.854 167.053 203.023 167.053s183.711-71.186 202.798-165.727l0.223-1.325h267.746c22.914 0 41.49-18.576 41.49-41.49s-18.576-41.49-41.49-41.49v0zM512 913.065c-53.673-0.105-99.33-34.318-116.453-82.114l-0.271-0.865h233.448c-17.395 48.661-63.050 82.874-116.711 82.979h-0.013zM166.807 747.107c39.83-60.299 73.022-165.958 73.022-345.747s99.575-290.427 272.172-290.427 272.172 105.66 272.172 290.427 33.192 285.448 73.022 345.747z"],"attrs":[{}],"tags":["bell","alarm","reminder","notification","alert"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":218,"id":55,"name":"bell","prevSize":24,"code":59772},"setIdx":0,"setId":1,"iconIdx":189},{"icon":{"paths":["M333.040 1023.149c-0.395 0.001-0.861 0.003-1.328 0.003-89.93 0-171.755-34.697-232.82-91.434l0.214 0.196c-60.481-56.047-98.213-135.906-98.213-224.578s37.732-168.531 98.016-224.397l0.197-0.181 442.138-417.574c43.713-40.007 102.187-64.52 166.387-64.52s122.673 24.512 166.573 64.688l-0.186-0.169c46.303 43.075 75.506 103.992 76.611 171.742l0.003 0.2c0.003 0.343 0.003 0.748 0.003 1.154 0 58.355-24.702 110.942-64.219 147.873l-0.117 0.107-442.723 418.16c-25.698 23.896-60.263 38.561-98.253 38.561s-72.555-14.665-98.342-38.643l0.089 0.082c-25.889-23.908-42.047-58.024-42.047-95.913s16.158-72.005 41.958-95.834l0.088-0.081 409.387-385.408c7.935-7.925 18.894-12.829 30.996-12.829s23.061 4.902 30.997 12.829v0c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-409.387 385.408c-8.981 7.868-14.621 19.359-14.621 32.167s5.64 24.299 14.572 32.124l0.049 0.042c10.156 8.727 23.465 14.040 38.014 14.040s27.858-5.313 38.092-14.105l-0.078 0.066 442.723-416.989c21.667-21.246 35.097-50.823 35.097-83.538 0-0.444-0.003-0.888-0.007-1.331v0.067c-1.049-42.681-19.73-80.802-49.009-107.504l-0.118-0.107c-27.771-25.797-65.112-41.627-106.148-41.627s-78.377 15.83-106.245 41.716l0.097-0.090-440.383 416.989c-43.561 40.015-70.766 97.247-70.766 160.83s27.203 120.815 70.608 160.688l0.158 0.143c45.833 42.805 107.572 69.087 175.451 69.087s129.619-26.282 175.601-69.225l-0.149 0.137 438.043-414.651c7.869-8.069 18.849-13.075 30.996-13.075s23.127 5.006 30.988 13.066l0.008 0.010c7.925 7.935 12.829 18.894 12.829 30.996s-4.902 23.061-12.829 30.997v0l-441.552 416.405c-60.773 56.558-142.541 91.272-232.414 91.272-1.768 0-3.534-0.014-5.296-0.040l0.267 0.003z"],"attrs":[{}],"tags":["paperclip","attach","link","join","bind"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":151,"id":56,"name":"paperclip","prevSize":24,"code":59771},"setIdx":0,"setId":1,"iconIdx":190},{"icon":{"paths":["M833.7 643.604c-62.907 0.233-118.56 31.082-152.865 78.411l-0.38 0.551-309.417-152.076c5.76-17.446 9.17-37.537 9.358-58.398v-0.093c-0.189-20.954-3.597-41.044-9.755-59.892l0.396 1.402 309.417-152.076c34.79 46.82 89.928 76.825 152.074 76.825 104.34 0 188.925-84.585 188.925-188.925s-84.585-188.925-188.925-188.925c-104.34 0-188.925 84.585-188.925 188.925 0 0.34 0.001 0.68 0.003 1.020v-0.052c0.152 10.439 1.209 20.53 3.098 30.325l-0.173-1.080-319.945 160.849c-34.095-36.053-82.261-58.491-135.669-58.491-0.217 0-0.432 0-0.647 0.001h0.033c-104.986 0-190.096 85.108-190.096 190.096s85.108 190.096 190.096 190.096v0c0.182 0 0.399 0.001 0.614 0.001 53.408 0 101.575-22.439 135.587-58.404l0.082-0.088 319.945 160.849c-1.751 8.911-2.81 19.209-2.924 29.734l-0.001 0.096c0 104.986 85.108 190.096 190.096 190.096s190.096-85.108 190.096-190.096c0-104.986-85.108-190.096-190.096-190.096v0zM833.7 87.942c56.531 0 102.359 45.827 102.359 102.359s-45.827 102.359-102.359 102.359c-56.531 0-102.359-45.827-102.359-102.359v0c0.33-56.398 45.96-102.029 102.328-102.359h0.032zM190.3 614.359c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032zM833.7 936.058c-56.531 0-102.359-45.827-102.359-102.359s45.827-102.359 102.359-102.359c56.531 0 102.359 45.827 102.359 102.359v0c-0.33 56.398-45.96 102.029-102.328 102.359h-0.032z"],"attrs":[{}],"tags":["share-alt","distribute","social","link"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":150,"id":57,"name":"share-alt","prevSize":24,"code":59770},"setIdx":0,"setId":1,"iconIdx":191},{"icon":{"paths":["M921.588 58.527h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v702.182c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-702.182c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM102.412 146.296h819.175c8.079 0 14.629 6.55 14.629 14.629v0 90.11l-424.215 211.815-424.215-211.815v-90.11c0-8.079 6.55-14.629 14.629-14.629v0zM921.588 877.704h-819.175c-8.079 0-14.629-6.55-14.629-14.629v0-514.325l404.322 202.454c5.795 2.962 12.643 4.698 19.895 4.698s14.098-1.736 20.147-4.815l-0.252 0.117 404.322-202.454v514.325c0 8.079-6.55 14.629-14.629 14.629v0z"],"attrs":[{}],"tags":["envelope","email","letter","mail","message"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":217,"id":58,"name":"envelope","prevSize":24,"code":59769},"setIdx":0,"setId":1,"iconIdx":192},{"icon":{"paths":["M710.11 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.124 19.673-11.546 36.649-28.101 44.774l-0.296 0.132c-5.939 2.921-12.928 4.629-20.316 4.629-0.288 0-0.574-0.003-0.859-0.008h0.043zM99.27 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z","M915.484 735.204c-11.19-0.147-21.49-3.841-29.859-10.006l0.142 0.101c-12.083-9.132-19.811-23.475-19.811-39.622 0-11.206 3.721-21.543 9.995-29.84l-0.090 0.124c30.292-39.484 48.545-89.591 48.545-143.96s-18.251-104.477-48.961-144.528l0.418 0.566c-6.185-8.174-9.906-18.511-9.906-29.717 0-27.353 22.174-49.528 49.528-49.528 16.148 0 30.49 7.728 39.532 19.687l0.090 0.124c42.965 55.728 68.862 126.535 68.862 203.393s-25.897 147.666-69.442 204.176l0.58-0.783c-9.257 11.932-23.523 19.596-39.586 19.811h-0.036z"],"attrs":[{},{}],"tags":["volume-down","low-sound","decrease-volume","quiet","softer"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":148,"id":59,"name":"volume-down","prevSize":24,"code":59766},"setIdx":0,"setId":1,"iconIdx":193},{"icon":{"paths":["M565.883 929.593c-9.559-0.164-18.337-3.376-25.438-8.703l0.112 0.081-258.099-206.91h-255.405c-22.198-0.299-40.113-18.215-40.412-40.383v-323.327c0.299-22.198 18.215-40.113 40.383-40.412h255.434l258.099-206.91c6.865-5.557 15.703-8.921 25.326-8.921 22.319 0 40.412 18.093 40.412 40.412 0 0.105 0 0.21-0.001 0.316v-0.016 754.361c-0.101 16.052-9.421 29.904-22.929 36.534l-0.241 0.107c-4.846 2.383-10.549 3.777-16.577 3.777-0.235 0-0.469-0.003-0.701-0.006h0.035zM67.466 633.237h229.002c9.573 0.042 18.381 3.277 25.424 8.695l-0.099-0.073 203.677 161.649v-584.629l-203.677 161.649c-6.785 5.918-15.568 9.703-25.217 10.233l-0.107 0.005h-229.002z","M860.084 839.070c-10.094-0.015-19.331-3.681-26.461-9.747l0.058 0.048c-8.624-7.36-14.057-18.239-14.057-30.387 0-10.3 3.905-19.687 10.315-26.762l-0.030 0.034c61.742-68.722 99.501-160.079 99.501-260.255s-37.758-191.532-99.818-260.614l0.318 0.36c-6.378-7.12-10.277-16.575-10.277-26.941 0-22.34 18.111-40.451 40.451-40.451 11.975 0 22.734 5.203 30.141 13.472l0.034 0.038c74.659 82.7 120.339 192.814 120.339 313.599s-45.68 230.898-120.705 314.010l0.366-0.412c-7.167 8.586-17.874 14.010-29.847 14.010-0.115 0-0.23 0-0.345-0.001h0.018z","M733.459 694.124c-9.131-0.12-17.535-3.134-24.364-8.165l0.116 0.082c-9.859-7.451-16.165-19.154-16.165-32.33 0-9.143 3.036-17.578 8.156-24.348l-0.073 0.101c24.717-32.217 39.61-73.102 39.61-117.464s-14.892-85.248-39.95-117.928l0.341 0.462c-5.046-6.669-8.082-15.104-8.082-24.247 0-22.319 18.093-40.412 40.412-40.412 13.176 0 24.879 6.306 32.257 16.064l0.073 0.101c35.058 45.471 56.188 103.247 56.188 165.959s-21.131 120.489-56.662 166.598l0.474-0.639c-7.553 9.736-19.193 15.989-32.301 16.165h-0.029z"],"attrs":[{},{},{}],"tags":["volume-up","loud","increase-sound","high-volume","louder"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":147,"id":60,"name":"volume-up","prevSize":24,"code":59767},"setIdx":0,"setId":1,"iconIdx":194},{"icon":{"paths":["M842.183 1023.786c-11.715-0.201-22.473-4.137-31.176-10.665l0.138 0.099-316.316-253.581h-313.014c-27.205-0.367-49.161-22.323-49.528-49.492v-396.256c0.367-27.205 22.323-49.161 49.492-49.528h313.050l316.316-253.581c8.413-6.81 19.245-10.933 31.038-10.933 27.353 0 49.528 22.174 49.528 49.528 0 0.128 0 0.257-0.002 0.387v-0.020 924.514c-0.153 19.495-11.255 36.364-27.452 44.771l-0.283 0.133c-6.264 2.921-13.598 4.625-21.331 4.625-0.163 0-0.323 0-0.486-0.002h0.025zM231.344 660.583h280.656c11.732 0.051 22.527 4.016 31.159 10.656l-0.121-0.090 249.619 198.11v-716.499l-249.619 198.11c-8.511 6.55-19.306 10.515-31.026 10.566h-280.668z"],"attrs":[{}],"tags":["volume-off","mute","silent","noiseless","sound-off"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":146,"id":61,"name":"volume-off","prevSize":24,"code":59768},"setIdx":0,"setId":1,"iconIdx":195},{"icon":{"paths":["M974.421 561.545h-924.841c-27.344-0.025-49.502-22.198-49.502-49.545 0-13.671 5.537-26.048 14.49-35.013v0l462.421-462.421c8.963-8.952 21.342-14.49 35.011-14.49s26.048 5.537 35.013 14.49v0l462.421 462.421c8.952 8.963 14.49 21.342 14.49 35.011 0 27.347-22.157 49.52-49.499 49.545h-0.003zM169.148 462.455h685.704l-342.852-342.852z","M908.36 1023.966h-792.721c-63.696-0.373-115.233-51.908-115.606-115.57v-132.155c0.373-63.696 51.908-115.233 115.57-115.606h792.757c63.696 0.373 115.233 51.908 115.606 115.57v132.155c-0.373 63.696-51.908 115.233-115.57 115.606h-0.036zM115.64 759.725c-9.121 0-16.516 7.395-16.516 16.516v0 132.12c0 9.121 7.395 16.516 16.516 16.516v0h792.721c9.121 0 16.516-7.395 16.516-16.516v0-132.12c0-9.121-7.395-16.516-16.516-16.516v0z"],"attrs":[{},{}],"tags":["eject","remove","release","take-out","disconnect"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":145,"id":62,"name":"eject","prevSize":24,"code":59765},"setIdx":0,"setId":1,"iconIdx":196},{"icon":{"paths":["M921.588 117.040h-819.175c-56.419 0.331-102.067 45.977-102.397 102.366v585.157c0.331 56.419 45.977 102.067 102.366 102.397h819.207c56.419-0.331 102.067-45.977 102.397-102.366v-585.157c-0.331-56.419-45.977-102.067-102.366-102.397h-0.032zM936.215 219.438v97.715h-12.288c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-7.607c-7.377-1.502-13.839-3.52-20.003-6.11l0.694 0.259h-7.022c-8.645-4.243-16.008-9.735-22.196-16.341l-0.038-0.041c-16.923-16.712-27.426-39.89-27.5-65.521v-0.014c0.016-8.559 1.299-16.812 3.668-24.592l-0.158 0.601h98.887c0.004 0 0.008 0 0.012 0 7.873 0 14.294 6.219 14.615 14.014l0.001 0.029zM102.412 204.809h98.887c2.212 7.178 3.494 15.431 3.511 23.981v0.010c-0.074 25.645-10.578 48.823-27.491 65.525l-0.010 0.010c-6.348 6.456-13.68 11.92-21.756 16.155l-0.479 0.229h-7.607c-5.25 2.652-11.34 4.689-17.749 5.795l-0.389 0.056h-8.191c-3.162 0.418-6.82 0.657-10.532 0.657s-7.37-0.239-10.956-0.701l0.424 0.045h-12.288v-97.131c0-8.079 6.55-14.629 14.629-14.629v0zM87.785 804.562v-97.715h12.288c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h7.607c7.229 1.166 13.718 3.206 19.76 6.041l-0.451-0.191h7.022c8.556 4.464 15.886 9.927 22.223 16.372l0.012 0.012c16.923 16.712 27.426 39.89 27.5 65.521v0.014c-0.016 8.559-1.299 16.812-3.668 24.592l0.158-0.601h-98.887c-0.004 0-0.008 0-0.012 0-7.873 0-14.294-6.219-14.615-14.014l-0.001-0.029zM290.823 819.191c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549c0.004-0.481 0.007-1.050 0.007-1.62 0-49.382-20.391-94-53.213-125.896l-0.041-0.040c-8.427-8.529-17.825-16.067-28.024-22.443l-0.647-0.377-9.947-6.436c-5.625-3.003-12.567-6.153-19.707-8.903l-1.358-0.459-11.702-4.681c-8.77-2.704-19.269-4.96-30.044-6.336l-0.968-0.101c-2.719-0.288-5.875-0.451-9.069-0.451s-6.35 0.165-9.458 0.484l0.389-0.033h-29.256v-210.060h49.736c9.036-1.557 16.909-3.588 24.522-6.182l-1.116 0.331 12.873-4.096c9.915-3.42 18.418-7.374 26.429-12.074l-0.683 0.37 9.362-5.266c11.406-7.555 21.355-15.646 30.453-24.6l-0.026 0.025c32.863-31.937 53.254-76.555 53.254-125.937 0-0.569-0.003-1.138-0.008-1.707v0.086c0.287-3.59 0.451-7.773 0.451-11.996s-0.163-8.405-0.485-12.544l0.034 0.549h442.355c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549c-0.004 0.481-0.007 1.050-0.007 1.62 0 49.382 20.391 94 53.213 125.896l0.041 0.040c8.973 9.14 18.943 17.251 29.747 24.168l0.679 0.407 9.362 5.266c7.327 4.329 15.83 8.282 24.727 11.392l1.018 0.31 12.873 4.096c6.721 2.133 14.826 3.972 23.141 5.166l0.85 0.1h49.151v208.304h-29.256c-2.719-0.277-5.876-0.435-9.069-0.435s-6.351 0.158-9.463 0.466l0.394-0.032c-11.742 1.477-22.241 3.733-32.391 6.794l1.38-0.358-11.702 4.681c-9.096 3.533-16.61 7.072-23.848 11.051l1.029-0.518-9.947 6.436c-10.846 6.753-20.244 14.291-28.657 22.805l-0.015 0.015c-32.863 31.937-53.254 76.555-53.254 125.937 0 0.569 0.003 1.138 0.008 1.707v-0.086c-0.287 3.59-0.451 7.773-0.451 11.996s0.163 8.405 0.485 12.544l-0.034-0.549zM921.588 819.191h-98.887c-2.212-7.178-3.494-15.431-3.511-23.981v-0.010c0.074-25.645 10.578-48.823 27.491-65.525l0.010-0.010c6.226-6.647 13.589-12.14 21.793-16.186l0.443-0.197h7.022c5.388-2.223 11.845-4.236 18.507-5.704l0.802-0.148h7.607c3.162-0.418 6.82-0.657 10.532-0.657s7.37 0.239 10.956 0.701l-0.424-0.045h12.288v97.131c0 8.079-6.55 14.629-14.629 14.629v0z","M512 307.207c-113.105 0-204.793 91.69-204.793 204.793s91.69 204.793 204.793 204.793c113.105 0 204.793-91.69 204.793-204.793v0c0-113.105-91.69-204.793-204.793-204.793v0zM512 629.025c-64.631 0-117.025-52.394-117.025-117.025s52.394-117.025 117.025-117.025c64.631 0 117.025 52.394 117.025 117.025v0c0 64.631-52.394 117.025-117.025 117.025v0z"],"attrs":[{},{}],"tags":["money-bill","cash","currency","banknote","bucks"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":144,"id":63,"name":"money-bill","prevSize":24,"code":59764},"setIdx":0,"setId":1,"iconIdx":197},{"icon":{"paths":["M871.768 55.371h-553.491c-84.063 0-152.209 68.147-152.209 152.209v0 13.838h-13.838c-84.063 0-152.209 68.147-152.209 152.209v0 442.792c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-13.838h13.838c84.063 0 152.209-68.147 152.209-152.209v0-442.792c0-84.063-68.147-152.209-152.209-152.209v0zM249.092 207.58c0-38.21 30.976-69.186 69.186-69.186v0h553.491c38.21 0 69.186 30.976 69.186 69.186v0 343.163l-125.642-105.716c-7.15-6.241-16.567-10.047-26.872-10.047-12.495 0-23.684 5.595-31.196 14.418l-0.048 0.058-59.223 69.74-221.396-214.755c-6.965-8.265-17.229-13.559-28.735-13.836l-0.047-0.001c-11.963 0.464-22.566 5.925-29.844 14.338l-0.044 0.052-168.814 200.917zM318.279 719.559c-38.21 0-69.186-30.976-69.186-69.186v0-16.605l203.131-239.108 191.508 187.633-116.233 137.265zM774.908 816.42c0 38.21-30.976 69.186-69.186 69.186v0h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-442.792c0-38.21 30.976-69.186 69.186-69.186v0h13.838v345.932c0 84.063 68.147 152.209 152.209 152.209v0h456.629zM871.768 719.559h-235.233l157.191-184.866 145.567 123.429c-3.487 34.553-32.362 61.315-67.514 61.437h-0.013z"],"attrs":[{}],"tags":["images","pictures","photos","graphics","illustrations"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":143,"id":64,"name":"images","prevSize":24,"code":59763},"setIdx":0,"setId":1,"iconIdx":198},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM160.914 146.285h702.171c40.395 0 73.142 32.747 73.142 73.142v0 479.232l-159.158-159.158c-7.493-7.993-18.119-12.974-29.908-12.974-1.007 0-2.005 0.036-2.992 0.108l0.133-0.008c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-75.483 90.697-269.166-269.166c-7.488-7.945-18.081-12.89-29.83-12.89-0.416 0-0.831 0.007-1.244 0.018l0.060-0.001c-12.88 0.772-24.239 6.708-32.137 15.744l-0.047 0.055-216.503 258.048v-405.504c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-42.716l251.612-301.934 241.079 241.079-147.456 175.543h-272.091c-0.003 0-0.005 0-0.010 0-39.984 0-72.475-32.083-73.133-71.911l-0.001-0.062zM863.086 877.715h-315.977l201.874-242.249 184.32 184.32c-6.765 33.136-35.591 57.744-70.197 57.929h-0.021z"],"attrs":[{}],"tags":["image","picture","photo","graphic","illustration"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":142,"id":65,"name":"image","prevSize":24,"code":59762},"setIdx":0,"setId":1,"iconIdx":199},{"icon":{"paths":["M863.075 1023.984h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.762 0.162 3.81 0.255 5.881 0.255 34.275 0 62.615-25.405 67.22-58.41l0.041-0.357v-729.651c-4.645-33.363-32.986-58.768-67.261-58.768-2.069 0-4.118 0.093-6.141 0.274l0.261-0.019h-175.538c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h175.538c1.958-0.089 4.255-0.14 6.565-0.14 83.099 0 150.872 65.615 154.335 147.863l0.011 0.313v726.14c-3.472 82.56-71.246 148.176-154.344 148.176-2.309 0-4.606-0.051-6.89-0.151l0.325 0.011z","M453.487 789.935c-0.060 0-0.133 0-0.204 0-12.052 0-22.953-4.923-30.803-12.869l-0.004-0.004c-7.929-7.939-12.835-18.903-12.835-31.011s4.904-23.072 12.835-31.013v0l203.038-203.038-203.038-203.038c-7.297-7.816-11.777-18.344-11.777-29.917 0-24.237 19.648-43.884 43.884-43.884 11.575 0 22.101 4.48 29.943 11.802l-0.026-0.023 234.051 234.051c7.929 7.939 12.835 18.903 12.835 31.011s-4.904 23.072-12.835 31.013v0l-234.051 234.051c-7.854 7.95-18.755 12.873-30.807 12.873-0.071 0-0.144 0-0.215 0h0.011z","M687.538 555.884h-643.638c-24.237 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h643.638c24.237 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{}],"tags":["sign-in","login","enter","connect","access"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":141,"id":66,"name":"sign-in","prevSize":24,"code":59760},"setIdx":0,"setId":1,"iconIdx":200},{"icon":{"paths":["M336.515 1023.832h-175.485c-1.958 0.089-4.254 0.14-6.563 0.14-83.075 0-150.827-65.596-154.289-147.819l-0.011-0.313v-727.679c3.471-82.536 71.225-148.132 154.298-148.132 2.309 0 4.605 0.051 6.888 0.151l-0.325-0.011h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0h-175.485c-1.762-0.162-3.809-0.255-5.879-0.255-34.265 0-62.596 25.397-67.2 58.393l-0.041 0.356v729.434c4.644 33.353 32.976 58.751 67.241 58.751 2.069 0 4.117-0.093 6.139-0.274l-0.26 0.019h175.485c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z","M745.981 789.852c-0.060 0-0.133 0-0.204 0-12.048 0-22.946-4.922-30.794-12.865l-0.004-0.004c-7.927-7.937-12.831-18.898-12.831-31.002s4.903-23.065 12.831-31.003v0l202.978-202.978-202.978-202.978c-8.602-8.031-13.963-19.438-13.963-32.097 0-24.229 19.642-43.871 43.871-43.871 12.66 0 24.066 5.362 32.073 13.937l0.023 0.026 233.981 233.981c7.927 7.937 12.831 18.898 12.831 31.002s-4.903 23.065-12.831 31.003v0l-233.981 233.981c-7.852 7.948-18.75 12.869-30.798 12.869-0.071 0-0.144 0-0.215 0h0.011z","M979.961 555.871h-643.446c-24.229 0-43.871-19.642-43.871-43.871s19.642-43.871 43.871-43.871v0h643.446c24.229 0 43.871 19.642 43.871 43.871s-19.642 43.871-43.871 43.871v0z"],"attrs":[{},{},{}],"tags":["sign-out","logout","exit","leave","disconnect"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":140,"id":67,"name":"sign-out","prevSize":24,"code":59761},"setIdx":0,"setId":1,"iconIdx":201},{"icon":{"paths":["M823.892 558.055c-0.046 0-0.1 0-0.154 0-10.973 0-20.961-4.21-28.44-11.103l0.029 0.026c-74.352-66.801-173.194-107.653-281.576-107.653s-207.224 40.851-281.966 107.996l0.389-0.344c-7.699 6.911-17.932 11.137-29.152 11.137-12.958 0-24.6-5.638-32.606-14.593l-0.037-0.042c-6.617-7.695-10.645-17.782-10.645-28.809 0-13.081 5.67-24.84 14.685-32.949l0.041-0.036c89.475-80.776 208.611-130.198 339.291-130.198s249.814 49.422 339.736 130.594l-0.445-0.396c9.056 8.146 14.726 19.904 14.726 32.986 0 11.028-4.029 21.114-10.694 28.868l0.049-0.059c-8.339 8.889-20.122 14.46-33.209 14.575h-0.020z","M978.379 395.406c-11.486-0.060-21.927-4.48-29.763-11.688l0.031 0.029c-113.494-108.335-267.577-175.003-437.231-175.003s-323.736 66.669-437.478 175.238l0.247-0.234c-8.074 9.555-20.065 15.58-33.462 15.58-24.147 0-43.723-19.576-43.723-43.723 0-14.862 7.414-27.991 18.746-35.891l0.142-0.094c128.857-122.252 303.412-197.437 495.528-197.437s366.671 75.186 495.847 197.738l-0.318-0.301c8.63 8.010 14.013 19.416 14.013 32.079 0 23.746-18.928 43.070-42.521 43.707l-0.059 0.001z","M359.26 724.203c-14.255 0-26.917-6.822-34.899-17.38l-0.079-0.109c-5.603-7.207-8.984-16.384-8.984-26.351 0-14.271 6.93-26.924 17.608-34.778l0.12-0.083c49.111-37.883 111.521-60.719 179.265-60.719s130.154 22.836 179.953 61.23l-0.689-0.51c10.667 8.061 17.489 20.723 17.489 34.978 0 9.892-3.285 19.018-8.824 26.343l0.079-0.109c-8.18 10.541-20.853 17.261-35.095 17.261-9.821 0-18.895-3.195-26.241-8.603l0.123 0.086c-34.771-26.697-78.905-42.783-126.797-42.783s-92.026 16.086-127.294 43.149l0.497-0.366c-7.262 5.353-16.355 8.615-26.202 8.745h-0.031z","M512 905.508c-24.147 0-43.723-19.576-43.723-43.723s19.576-43.723 43.723-43.723v0 0c24.147 0 43.723 19.576 43.723 43.723s-19.576 43.723-43.723 43.723v0z"],"attrs":[{},{},{},{}],"tags":["wifi","internet","wireless","network","connection"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":139,"id":68,"name":"wifi","prevSize":24,"code":59759},"setIdx":0,"setId":1,"iconIdx":202},{"icon":{"paths":["M590.766 393.851h-157.532c-50.632-0.297-91.598-41.261-91.894-91.866v-157.56c0.297-50.632 41.261-91.598 91.866-91.894h157.56c50.632 0.297 91.598 41.261 91.894 91.866v157.56c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM433.234 131.298c-7.25 0-13.128 5.878-13.128 13.128v0 157.532c0 7.25 5.878 13.128 13.128 13.128v0h157.532c7.25 0 13.128-5.878 13.128-13.128v0-157.532c0-7.25-5.878-13.128-13.128-13.128v0z","M196.936 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM91.915 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M564.511 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM459.489 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M932.085 918.958h-105.021c-50.632-0.297-91.598-41.261-91.894-91.866v-105.049c0.297-50.632 41.261-91.598 91.866-91.894h105.049c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.297 50.632-41.261 91.598-91.866 91.894h-0.028zM827.064 708.915c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 7.25 5.878 13.128 13.128 13.128v0h105.021c7.25 0 13.128-5.878 13.128-13.128v0-105.021c0-7.25-5.878-13.128-13.128-13.128v0z","M879.575 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-105.049c0-7.25-5.878-13.128-13.128-13.128v0h-630.129c-7.25 0-13.128 5.878-13.128 13.128v0 105.021c0 21.751-17.633 39.383-39.383 39.383s-39.383-17.633-39.383-39.383v0-105.021c0.297-50.632 41.261-91.598 91.866-91.894h630.157c50.632 0.297 91.598 41.261 91.894 91.866v105.049c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z","M512 708.915c-21.632-0.292-39.091-17.751-39.383-39.355v-315.093c0-21.751 17.633-39.383 39.383-39.383s39.383 17.633 39.383 39.383v0 315.064c-0.292 21.632-17.751 39.091-39.355 39.383h-0.028z"],"attrs":[{},{},{},{},{},{}],"tags":["sitemap","hierarchy","structure","tree","network"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":138,"id":69,"name":"sitemap","prevSize":24,"code":59758},"setIdx":0,"setId":1,"iconIdx":203},{"icon":{"paths":["M46.545 1024c-25.567-0.345-46.201-20.979-46.545-46.512v-930.943c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 930.909c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M977.455 1024h-930.909c-25.706 0-46.545-20.839-46.545-46.545s20.839-46.545 46.545-46.545v0h930.909c25.706 0 46.545 20.839 46.545 46.545s-20.839 46.545-46.545 46.545v0z","M263.757 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M480.97 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M698.182 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-248.276c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 248.243c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z","M915.393 806.788c-25.567-0.345-46.201-20.979-46.545-46.512v-496.518c0-25.706 20.839-46.545 46.545-46.545s46.545 20.839 46.545 46.545v0 496.484c-0.345 25.567-20.979 46.201-46.512 46.545h-0.033z"],"attrs":[{},{},{},{},{},{}],"tags":["chart-bar","graphic","diagram","stats","bar-chart"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":137,"id":70,"name":"chart-bar","prevSize":24,"code":59757},"setIdx":0,"setId":1,"iconIdx":204},{"icon":{"paths":["M863.086 936.228h-702.171c-88.87 0-160.914-72.044-160.914-160.914v0-351.086c0-88.87 72.044-160.914 160.914-160.914v0h35.109l69.047-102.4c29.412-43.303 78.425-71.379 133.997-71.387h225.866c55.573 0.008 104.587 28.085 133.636 70.825l0.361 0.562 69.047 102.4h35.109c88.87 0 160.914 72.044 160.914 160.914v0 351.086c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 351.086c-40.395 0-73.142 32.747-73.142 73.142v0 351.086c0 40.395 32.747 73.142 73.142 73.142v0h702.171c40.395 0 73.142-32.747 73.142-73.142v0-351.086c0-40.395-32.747-73.142-73.142-73.142v0h-58.515c-15.035-0.029-28.294-7.614-36.181-19.159l-0.097-0.151-80.75-123.466c-12.764-19.278-34.075-32.011-58.402-32.765l-0.111-0.003h-229.961c-24.44 0.758-45.751 13.489-58.346 32.499l-0.167 0.269-84.846 123.466c-7.986 11.696-21.243 19.281-36.274 19.31h-0.004z","M512 760.685c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 468.114c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["camera","photo","picture","snapshot","image"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":136,"id":71,"name":"camera","prevSize":24,"code":59756},"setIdx":0,"setId":1,"iconIdx":205},{"icon":{"paths":["M512 1023.977c-24.105-0.325-43.559-19.779-43.884-43.852v-936.219c0-24.236 19.648-43.884 43.884-43.884s43.884 19.648 43.884 43.884v0 936.187c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M599.768 906.954h-380.325c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h380.325c3.954 0.373 8.548 0.587 13.193 0.587 76.308 0 139.186-57.511 147.651-131.554l0.063-0.684c-8.529-74.727-71.406-132.238-147.714-132.238-4.645 0-9.24 0.213-13.775 0.629l0.583-0.044h-175.535c-4.502 0.309-9.759 0.484-15.056 0.484-124.284 0-225.944-96.875-233.585-219.234l-0.033-0.671c7.676-123.029 109.334-219.903 233.619-219.903 5.298 0 10.553 0.176 15.762 0.522l-0.706-0.037h321.815c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0h-321.815c-3.954-0.373-8.548-0.587-13.193-0.587-76.308 0-139.186 57.511-147.651 131.554l-0.063 0.684c8.529 74.727 71.406 132.238 147.714 132.238 4.645 0 9.24-0.213 13.775-0.629l-0.583 0.044h175.535c4.502-0.309 9.759-0.484 15.056-0.484 124.284 0 225.944 96.875 233.585 219.234l0.033 0.671c-7.676 123.029-109.334 219.903-233.619 219.903-5.298 0-10.553-0.176-15.762-0.522l0.706 0.037z"],"attrs":[{},{}],"tags":["dollar","money","currency","cash","payment"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":135,"id":72,"name":"dollar","prevSize":24,"code":59755},"setIdx":0,"setId":1,"iconIdx":206},{"icon":{"paths":["M746.049 0.019c-153.498 0-277.933 124.435-277.933 277.933v0 131.652h-307.189c-88.867 0-160.908 72.041-160.908 160.908v0 292.56c0 88.867 72.041 160.908 160.908 160.908v0h409.585c88.867 0 160.908-72.041 160.908-160.908v0-292.56c0-88.867-72.041-160.908-160.908-160.908v0h-14.628v-131.652c0-105.024 85.139-190.165 190.165-190.165s190.165 85.139 190.165 190.165v0c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0c0-153.498-124.435-277.933-277.933-277.933v0zM643.652 570.513v292.56c0 40.394-32.746 73.14-73.14 73.14v0h-409.585c-40.394 0-73.14-32.746-73.14-73.14v0-292.56c0-40.394 32.746-73.14 73.14-73.14v0h409.585c40.394 0 73.14 32.746 73.14 73.14v0z"],"attrs":[{}],"tags":["lock-open","unlock","access","open","unchain"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":134,"id":73,"name":"lock-open","prevSize":24,"code":59754},"setIdx":0,"setId":1,"iconIdx":207},{"icon":{"paths":["M863.086 58.514h-702.171c-88.87 0-160.914 72.044-160.914 160.914v0 585.143c0 88.87 72.044 160.914 160.914 160.914v0h702.171c88.87 0 160.914-72.044 160.914-160.914v0-585.143c0-88.87-72.044-160.914-160.914-160.914v0zM936.228 219.429v248.685h-380.342v-321.829h307.2c40.395 0 73.142 32.747 73.142 73.142v0zM160.914 146.285h307.2v321.829h-380.342v-248.685c0-40.395 32.747-73.142 73.142-73.142v0zM87.772 804.571v-248.685h380.342v321.829h-307.2c-40.395 0-73.142-32.747-73.142-73.142v0zM863.086 877.715h-307.2v-321.829h380.342v248.685c0 40.395-32.747 73.142-73.142 73.142v0z"],"attrs":[{}],"tags":["table","spreadsheet","grid","chart","layout"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":133,"id":74,"name":"table","prevSize":24,"code":59753},"setIdx":0,"setId":1,"iconIdx":208},{"icon":{"paths":["M512 1022.599c-0.113 0.001-0.245 0.001-0.378 0.001-8.356 0-16.084-2.691-22.364-7.254l0.11 0.076c-16.56-10.488-405.166-271.583-405.166-588.982 0-236.266 191.533-427.799 427.799-427.799s427.799 191.533 427.799 427.799v0c0 317.399-386.399 578.495-405.166 588.982-6.17 4.487-13.897 7.178-22.254 7.178-0.133 0-0.265-0.001-0.397-0.003h0.021zM512 84.201c-0.329-0.001-0.718-0.001-1.107-0.001-189.346 0-342.951 153.026-343.891 342.151v0.089c0 232.392 264.407 444.91 344.999 503.975 80.591-59.063 344.999-271.583 344.999-503.975-0.939-189.216-154.544-342.241-343.891-342.241-0.389 0-0.779 0.001-1.168 0.003h0.061z","M512 553.4c-83.836 0-151.799-67.963-151.799-151.799s67.963-151.799 151.799-151.799c83.836 0 151.799 67.963 151.799 151.799v0c0 83.836-67.963 151.799-151.799 151.799v0zM512 332.6c-38.107 0-68.999 30.892-68.999 68.999s30.892 68.999 68.999 68.999c38.107 0 68.999-30.892 68.999-68.999v0c0-38.107-30.892-68.999-68.999-68.999v0z"],"attrs":[{},{}],"tags":["map-marker","location","pin","place","position"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":132,"id":75,"name":"map-marker","prevSize":24,"code":59752},"setIdx":0,"setId":1,"iconIdx":209},{"icon":{"paths":["M967.082 560.759h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 268.207h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M967.082 853.311h-715.127c-26.929 0-48.759-21.83-48.759-48.759s21.83-48.759 48.759-48.759v0h715.127c26.929 0 48.759 21.83 48.759 48.759s-21.83 48.759-48.759 48.759v0z","M56.918 284.46c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c5.935-5.857 13.086-10.5 21.038-13.514l0.416-0.139c7.303-3.084 15.795-4.877 24.704-4.877s17.401 1.792 25.134 5.036l-0.428-0.16c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c11.461 12.002 18.595 28.224 18.853 46.107v0.050c0 0.111 0.002 0.244 0.002 0.376 0 17.859-7.201 34.037-18.859 45.786l0.005-0.005c-6.208 5.511-13.262 10.282-20.899 14.055l-0.555 0.248c-7.082 2.883-15.3 4.556-23.909 4.556-0.28 0-0.559-0.002-0.84-0.005h0.043z","M56.918 577.012c-8.949-0.111-17.424-2.014-25.124-5.363l0.419 0.163c-8.262-3.501-15.357-8.097-21.513-13.706l0.059 0.053c-11.653-11.746-18.854-27.923-18.854-45.783 0-0.133 0-0.264 0.002-0.396v0.020c0.258-17.936 7.392-34.155 18.879-46.185l-0.024 0.026c6.096-5.555 13.192-10.151 20.966-13.467l0.488-0.186c8.019-3.808 17.424-6.032 27.348-6.032 3.658 0 7.245 0.302 10.739 0.882l-0.379-0.052 11.702 3.901 11.702 5.851c3.642 2.58 6.822 5.141 9.837 7.878l-0.085-0.076c11.672 12.226 18.854 28.826 18.854 47.102 0 0.125 0 0.251-0.002 0.376v-0.020c0 35.905-29.107 65.012-65.012 65.012v0z","M56.918 869.564c-0.236 0.003-0.517 0.005-0.797 0.005-8.607 0-16.825-1.673-24.344-4.711l0.436 0.155c-8.191-4.021-15.246-8.79-21.551-14.388l0.098 0.085c-5.555-6.096-10.151-13.192-13.467-20.966l-0.186-0.488c-3.296-7.27-5.216-15.763-5.216-24.704s1.92-17.436 5.371-25.089l-0.155 0.385c3.501-8.262 8.097-15.357 13.706-21.513l-0.053 0.059c11.733-11.582 27.863-18.736 45.663-18.736 9.098 0 17.76 1.87 25.624 5.245l-0.424-0.162c8.326 3.279 15.455 7.903 21.477 13.674l-0.023-0.021c5.555 6.096 10.151 13.192 13.467 20.966l0.186 0.488c3.296 7.27 5.216 15.763 5.216 24.704s-1.92 17.436-5.371 25.089l0.155-0.385c-3.501 8.262-8.097 15.357-13.706 21.513l0.053-0.059c-11.746 11.653-27.923 18.854-45.783 18.854-0.133 0-0.264 0-0.396-0.002h0.020z"],"attrs":[{},{},{},{},{},{}],"tags":["list","items","tasks","enumeration","record"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{},{},{}],"properties":{"order":131,"id":76,"name":"list","prevSize":24,"code":59751},"setIdx":0,"setId":1,"iconIdx":210},{"icon":{"paths":["M1020.3 494.452c-7.019-15.208-167.289-377.277-508.3-377.277-0.14 0-0.306 0-0.472 0-34.241 0-67.586 3.836-99.63 11.102l3.004-0.573c-18.045 5.713-30.896 22.309-30.896 41.908 0 24.228 19.641 43.869 43.869 43.869 2.026 0 4.020-0.137 5.972-0.403l-0.228 0.025c23.536-5.148 50.592-8.127 78.334-8.188h0.045c244.499 0 384.881 239.819 419.391 307.086-23.064 44.686-47.534 82.99-75.058 118.824l1.357-1.84c-5.75 7.348-9.221 16.722-9.221 26.907 0 24.18 19.562 43.79 43.724 43.869h0.007c13.993-0.045 26.437-6.635 34.437-16.866l0.073-0.096c34.924-43.997 66.128-93.737 91.55-146.775l2.039-4.721c2.455-5.422 3.887-11.757 3.887-18.425s-1.431-13.003-4.002-18.713l0.117 0.288z","M192.045 130.044c-7.813-7.295-18.337-11.773-29.907-11.773-24.228 0-43.869 19.641-43.869 43.869 0 11.571 4.479 22.094 11.798 29.933l-0.023-0.026 53.813 53.813c-74.699 68.875-135.393 151.659-178.181 244.402l-1.975 4.776c-2.203 5.093-3.485 11.025-3.485 17.256s1.282 12.161 3.596 17.545l-0.111-0.289c7.019 15.208 167.289 377.277 508.3 377.277 0.681 0.004 1.487 0.005 2.294 0.005 94.711 0 182.793-28.386 256.201-77.116l-1.714 1.069 63.172 63.172c7.936 7.927 18.897 12.83 31.001 12.83s23.064-4.902 31.002-12.83v0c7.927-7.936 12.83-18.897 12.83-31.001s-4.902-23.064-12.83-31.002v0zM416.073 480.999l129.268 129.853c-9.942 3.409-21.397 5.378-33.312 5.378-28.107 0-53.656-10.952-72.612-28.824l0.052 0.049c-18.724-18.468-30.323-44.118-30.323-72.478 0-13.277 2.543-25.962 7.167-37.592l-0.241 0.688zM512 819.086c-245.083 0-384.881-240.404-419.391-307.086 39.962-79.399 91.284-146.975 152.768-203.701l0.481-0.439 104.701 104.701c-17.797 28.341-28.353 62.795-28.353 99.714 0 104.667 84.849 189.516 189.516 189.516 36.919 0 71.373-10.557 100.508-28.817l-0.792 0.463 94.173 94.173c-54.756 32.362-120.666 51.482-191.042 51.482-0.903 0-1.805-0.003-2.708-0.010l0.138 0.001z"],"attrs":[{},{}],"tags":["eye-slash","hide","private","unseen","invisible"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":130,"id":77,"name":"eye-slash","prevSize":24,"code":59749},"setIdx":0,"setId":1,"iconIdx":211},{"icon":{"paths":["M512 906.971c-341.139 0-501.467-362.204-508.489-377.417-2.22-5.185-3.511-11.22-3.511-17.554s1.291-12.369 3.623-17.853l-0.112 0.299c7.022-15.213 167.351-377.417 508.489-377.417s501.467 362.204 508.489 377.417c2.22 5.185 3.511 11.22 3.511 17.554s-1.291 12.369-3.623 17.853l0.112-0.299c-7.022 15.213-167.351 377.417-508.489 377.417zM92.453 512c34.523 67.292 175.543 307.2 419.547 307.2s385.024-239.908 419.547-307.2c-34.523-67.292-175.543-307.2-419.547-307.2s-385.024 239.908-419.547 307.2z","M512 702.172c-105.028 0-190.172-85.142-190.172-190.172s85.142-190.172 190.172-190.172c105.028 0 190.172 85.142 190.172 190.172v0c-0.332 104.895-85.277 189.84-190.139 190.172h-0.032zM512 409.6c-56.554 0-102.4 45.845-102.4 102.4s45.845 102.4 102.4 102.4c56.554 0 102.4-45.845 102.4-102.4v0c-0.331-56.421-45.979-102.070-102.369-102.4h-0.032z"],"attrs":[{},{}],"tags":["eye","view","see","look","watch"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":129,"id":78,"name":"eye","prevSize":24,"code":59750},"setIdx":0,"setId":1,"iconIdx":212},{"icon":{"paths":["M82.761 872.006h-83.078v-609.242c-0.010-0.662-0.017-1.442-0.017-2.225 0-82.317 66.265-149.157 148.363-150.085l0.088-0.001h133.48c0.27-0.006 0.588-0.010 0.906-0.010 12.364 0 23.485 5.331 31.186 13.821l0.031 0.035 147.88 178.895h271.943c0.175-0.001 0.383-0.001 0.591-0.001 82.895 0 150.096 67.2 150.096 150.096 0 1.168-0.013 2.335-0.040 3.497l0.003-0.173v27.692h-83.078v-27.692c0.013-0.495 0.021-1.077 0.021-1.662 0-37.318-30.252-67.57-67.57-67.57-0.008 0-0.014 0-0.022 0h-291.881c-12.686-0.029-24.015-5.815-31.514-14.885l-0.056-0.069-147.88-178.895h-114.094c-36.362 1.219-65.376 30.988-65.376 67.535 0 0.597 0.008 1.192 0.023 1.785l-0.001-0.088z","M795.574 913.546h-754.353c-14.913-0.126-27.961-7.987-35.343-19.762l-0.103-0.177c-3.401-5.891-5.407-12.958-5.407-20.493s2.007-14.601 5.513-20.694l-0.106 0.201 187.203-360.006c7.347-13.219 21.185-22.042 37.092-22.155h752.707c14.913 0.126 27.961 7.987 35.343 19.762l0.103 0.177c3.401 5.891 5.407 12.958 5.407 20.493s-2.007 14.601-5.513 20.694l0.106-0.201-187.203 360.006c-7.071 12.759-20.17 21.423-35.35 22.151l-0.097 0.004zM109.346 830.467h661.305l144.002-276.928h-661.305z"],"attrs":[{},{}],"tags":["folder-open","access-files","open-directory","open-folder","file-access"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":128,"id":79,"name":"folder-open","prevSize":24,"code":59748},"setIdx":0,"setId":1,"iconIdx":213},{"icon":{"paths":["M853.323 961.925h-682.645c-94.253 0-170.661-76.408-170.661-170.661v0-558.528c0-94.253 76.408-170.661 170.661-170.661v0h155.147c0.039 0 0.084 0 0.131 0 13.934 0 26.476 5.965 35.211 15.48l0.032 0.035 171.903 201.070h320.223c0 0 0 0 0.001 0 94.253 0 170.661 76.408 170.661 170.661 0 0.218 0 0.436-0.001 0.655v-0.033 341.323c0 94.253-76.408 170.661-170.661 170.661v0zM170.677 155.163c-42.842 0-77.573 34.731-77.573 77.573v0 558.528c0 42.842 34.731 77.573 77.573 77.573v0h682.645c42.842 0 77.573-34.731 77.573-77.573v0-341.323c0-42.842-34.731-77.573-77.573-77.573v0h-341.323c-14.071-0.131-26.67-6.321-35.33-16.085l-0.044-0.049-171.903-201.070z"],"attrs":[{}],"tags":["folder","file-holder","organizer","container","directory"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":126,"id":80,"name":"folder","prevSize":24,"code":59747},"setIdx":0,"setId":1,"iconIdx":214},{"icon":{"paths":["M570.515 906.971h-409.6c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h409.6c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 204.8c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h409.6c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M980.114 789.943c-8.437-0.136-16.291-2.51-23.030-6.553l0.21 0.117-292.571-175.543c-12.706-7.831-21.051-21.663-21.065-37.447v-117.029c0.014-15.785 8.359-29.619 20.876-37.34l0.189-0.108 292.571-175.543c6.348-3.861 14.026-6.145 22.235-6.145s15.887 2.285 22.428 6.254l-0.192-0.108c13.334 7.666 22.183 21.811 22.235 38.027v468.122c-0.053 16.223-8.901 30.368-22.022 37.921l-0.213 0.112c-5.841 3.327-12.834 5.288-20.285 5.288-0.48 0-0.959-0.008-1.435-0.025l0.069 0.001zM731.429 545.939l204.8 122.88v-313.636l-204.8 122.88z"],"attrs":[{},{}],"tags":["video","movie","clip","footage","film"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":125,"id":81,"name":"video","prevSize":24,"code":59746},"setIdx":0,"setId":1,"iconIdx":215},{"icon":{"paths":["M862.966 979.954h-701.931c-88.84 0-160.859-72.019-160.859-160.859v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.014 0.522-0.021 1.138-0.021 1.755 0 40.382 32.736 73.117 73.117 73.117 0.007 0 0.015 0 0.022 0h701.93c40.382 0 73.117-32.736 73.117-73.117v0-350.966c0-24.229 19.642-43.871 43.871-43.871s43.871 19.642 43.871 43.871v0 350.966c-0.991 88.083-72.627 159.104-160.849 159.104-0.004 0-0.007 0-0.011 0h0.001z","M512 702.107c-0.038 0-0.085 0-0.13 0-110.716 0-202.222-82.245-216.757-188.973l-0.126-1.134h-250.94c-0.097 0.001-0.211 0.001-0.326 0.001-24.229 0-43.871-19.642-43.871-43.871 0-8.677 2.52-16.767 6.867-23.575l-0.106 0.177 218.184-350.966c17.362-29.96 49.275-49.789 85.818-49.789 1.293 0 2.582 0.025 3.862 0.074l-0.185-0.005h395.422c40.382 0.115 75.22 23.729 91.572 57.882l0.265 0.613 215.844 347.456c2.498 5.344 3.955 11.604 3.955 18.204 0 23.357-18.253 42.45-41.273 43.795l-0.119 0.005h-250.94c-14.66 107.862-106.167 190.107-216.883 190.107-0.047 0-0.092 0-0.138 0h0.007zM123.014 426.013h213.504c24.229 0 43.871 19.642 43.871 43.871v0 12.869c0 72.687 58.925 131.612 131.612 131.612s131.612-58.925 131.612-131.612v0-12.869c0-24.229 19.642-43.871 43.871-43.871v0h213.504l-175.483-284.282c-4.679-8.189-9.36-11.698-15.208-11.698h-396.006c-5.783 0.148-10.777 3.381-13.412 8.109l-0.041 0.081z"],"attrs":[{},{}],"tags":["inbox","email","messages","mail","receive"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":124,"id":82,"name":"inbox","prevSize":24,"code":59745},"setIdx":0,"setId":1,"iconIdx":216},{"icon":{"paths":["M804.555 409.605h-14.628v-131.65c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM321.839 277.955c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0 131.65h-380.321zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["lock","secure","safe","restrict","close"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":123,"id":83,"name":"lock","prevSize":24,"code":59743},"setIdx":0,"setId":1,"iconIdx":217},{"icon":{"paths":["M804.555 409.605h-482.716v-131.65c0-105.022 85.138-190.161 190.161-190.161s190.161 85.138 190.161 190.161v0c0 24.236 19.647 43.883 43.883 43.883s43.883-19.647 43.883-43.883v0c0-153.495-124.432-277.928-277.928-277.928s-277.928 124.432-277.928 277.928v0 131.65h-14.628c-88.865 0-160.905 72.040-160.905 160.905v0 292.555c0 88.865 72.040 160.905 160.905 160.905v0h585.111c88.865 0 160.905-72.040 160.905-160.905v0-292.555c0-88.865-72.040-160.905-160.905-160.905v0zM877.694 863.066c0 40.393-32.745 73.138-73.138 73.138v0h-585.111c-40.393 0-73.138-32.745-73.138-73.138v0-292.555c0-40.393 32.745-73.138 73.138-73.138v0h585.111c40.393 0 73.138 32.745 73.138 73.138v0z"],"attrs":[{}],"tags":["unlock","open","access","free","unchain"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":122,"id":84,"name":"unlock","prevSize":24,"code":59744},"setIdx":0,"setId":1,"iconIdx":218},{"icon":{"paths":["M988.652 422.661l-315.315-315.315c-7.357-7.357-17.342-11.562-27.852-11.562h-606.456c-21.546 0-39.414 17.868-39.414 39.414v414.113c0 10.51 4.204 20.495 11.562 27.852l315.315 314.789c23.123 23.123 53.604 35.735 86.186 35.735v0c32.582 0 63.589-12.613 86.186-35.735l11.562-11.562c2.103 4.204 4.204 8.409 7.883 11.562 23.649 23.649 55.18 35.735 86.186 35.735s62.537-12.087 86.712-35.735l296.922-296.922c47.297-47.297 47.297-124.549 0-172.373zM443.681 836.249c-8.409 8.409-18.919 12.613-30.481 12.613s-22.598-4.73-30.481-12.613l-304.279-303.228v-358.409h358.409l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961l-296.922 296.922zM932.946 539.328l-296.922 296.922c-16.816 16.816-44.67 16.816-61.486 0-3.679-3.679-7.357-5.78-12.087-7.883l233.333-233.333c47.297-47.823 47.297-125.075 0-172.373l-248.048-248.048h80.931l303.753 303.753c16.816 16.816 16.816 44.144 0 60.961zM314.928 328.067c0 36.261-29.429 65.69-65.69 65.69s-65.69-29.429-65.69-65.69 29.429-65.69 65.69-65.69 65.69 29.429 65.69 65.69z"],"attrs":[{}],"tags":["tags","labels","prices","identifiers","stickers"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":121,"id":85,"name":"tags","prevSize":24,"code":59741},"setIdx":0,"setId":1,"iconIdx":219},{"icon":{"paths":["M532.53 1023.985c-37.212 0-74.423-14.115-102.654-42.345l-415.747-415.105c-8.982-8.982-14.115-21.172-14.115-34.004v-484.396c0-26.304 21.814-48.119 48.119-48.119h483.756c12.831 0 25.022 5.132 34.004 14.115l415.747 415.747c55.818 56.46 55.818 148.206 0 204.666 0 0 0 0 0 0l-347.098 347.098c-28.229 28.229-65.442 42.345-102.654 42.345zM96.253 512.642l401.632 400.991c19.248 18.605 50.044 18.605 68.649 0l347.098-347.098c18.605-18.605 18.605-49.402 0-68.649l-401.632-401.632h-415.747v415.747zM947.637 600.539v0zM287.446 367.643c-44.269 0-80.198-35.928-80.198-80.198s35.928-80.198 80.198-80.198 80.198 35.928 80.198 80.198-35.928 80.198-80.198 80.198z"],"attrs":[{}],"tags":["tag","label","price","identifier","sticker"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":120,"id":86,"name":"tag","prevSize":24,"code":59742},"setIdx":0,"setId":1,"iconIdx":220},{"icon":{"paths":["M512 1024.445c-282.822-0.256-511.994-229.587-511.994-512.445 0-141.396 57.267-269.417 149.871-362.133l-0.005 0.005c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c7.716 7.725 12.49 18.395 12.49 30.177s-4.772 22.451-12.49 30.178v0c-83.727 78.173-135.917 189.204-135.917 312.426 0 235.846 191.191 427.037 427.037 427.037 123.22 0 234.253-52.189 312.196-135.668l0.23-0.248c77.442-77.134 125.361-183.857 125.361-301.773s-47.919-224.639-125.347-301.759l-0.015-0.015c-7.716-7.725-12.49-18.395-12.49-30.177s4.772-22.451 12.49-30.178v0c7.661-7.856 18.351-12.73 30.177-12.73s22.516 4.874 30.169 12.72l0.008 0.009c92.6 92.711 149.866 220.732 149.866 362.128 0 282.858-229.172 512.187-511.97 512.445h-0.024z","M512 554.704c-23.456-0.316-42.387-19.247-42.704-42.673v-455.537c0-23.584 19.119-42.704 42.704-42.704s42.704 19.119 42.704 42.704v0 455.506c-0.316 23.456-19.247 42.387-42.673 42.704h-0.031z"],"attrs":[{},{}],"tags":["power-off","shutdown","turn-off","stop","end"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":119,"id":87,"name":"power-off","prevSize":24,"code":59740},"setIdx":0,"setId":1,"iconIdx":221},{"icon":{"paths":["M804.571 1024h-585.143c-88.87 0-160.914-72.044-160.914-160.914v0-702.171c0-88.87 72.044-160.914 160.914-160.914v0h438.857c12.114 0.011 23.078 4.929 31.012 12.872v0l263.314 265.070c7.945 7.935 12.863 18.898 12.874 31.011v554.133c0 88.87-72.044 160.914-160.914 160.914v0zM219.429 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 702.171c0 40.395 32.747 73.142 73.142 73.142v0h585.143c40.395 0 73.142-32.747 73.142-73.142v0-537.747l-237.568-237.568z","M789.943 980.114h-87.771v-365.715h-380.342v365.715h-87.771v-380.342c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0z","M539.501 321.828h-230.547c-41.436-0.331-74.901-33.998-74.901-75.481 0-0.207 0.001-0.413 0.003-0.619v0.032-201.874h87.771v190.172h204.8v-190.172h87.771v201.874c0.001 0.174 0.003 0.381 0.003 0.587 0 41.483-33.464 75.152-74.869 75.481h-0.032z"],"attrs":[{},{},{}],"tags":["save","store","keep","reserve","record"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":118,"id":88,"name":"save","prevSize":24,"code":59739},"setIdx":0,"setId":1,"iconIdx":222},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM512 938.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667c235.641 0 426.667 191.025 426.667 426.667v0c0 235.641-191.025 426.667-426.667 426.667v0z","M381.156 267.377c-33.393 33.448-54.044 79.627-54.044 130.628 0 0.076 0 0.152 0 0.228v-0.012c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0c-0.001-0.156-0.001-0.341-0.001-0.525 0-27.345 11.088-52.101 29.015-70.016v0c18.327-17.443 43.181-28.173 70.543-28.173s52.216 10.731 70.585 28.213l-0.043-0.040c18.449 18.085 29.885 43.264 29.885 71.115 0 54.983-44.572 99.556-99.556 99.556-0.307 0-0.613-0.001-0.919-0.004h0.047c-23.436 0.316-42.351 19.231-42.667 42.636v56.92c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-19.343c34.751-8.129 64.687-25.311 88.169-48.916l0.008-0.008c33.387-33.532 54.025-79.777 54.025-130.844s-20.64-97.313-54.032-130.851l0.007 0.007c-34.036-32.508-80.253-52.515-131.144-52.515-50.6 0-96.58 19.779-130.632 52.028l0.087-0.081z","M583.111 753.777c0 39.273-31.837 71.111-71.111 71.111s-71.111-31.837-71.111-71.111c0-39.273 31.837-71.111 71.111-71.111s71.111 31.837 71.111 71.111z"],"attrs":[{},{},{}],"tags":["question-circle","help","info","query","uncertainty"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":117,"id":89,"name":"question-circle","prevSize":24,"code":59737},"setIdx":0,"setId":1,"iconIdx":223},{"icon":{"paths":["M750.032 98.514c-60.88-61-145.050-98.738-238.034-98.738-185.726 0-336.287 150.56-336.287 336.287 0 0.17 0 0.34 0 0.511v-0.026c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0c0-0.174 0-0.378 0-0.584 0-137.598 111.546-249.145 249.145-249.145s249.145 111.546 249.145 249.145c0 137.598-111.546 249.145-249.145 249.145-0.206 0-0.411 0-0.617-0.001h0.032c-24.093 0.325-43.539 19.77-43.864 43.832v117c0 24.225 19.639 43.864 43.864 43.864s43.864-19.639 43.864-43.864v0-76.031c165.808-22.845 292.141-163.614 292.141-333.889 0-92.678-37.425-176.615-97.988-237.522l0.016 0.016z","M585.105 950.635c0 40.375-32.73 73.105-73.105 73.105s-73.105-32.73-73.105-73.105c0-40.375 32.73-73.105 73.105-73.105s73.105 32.73 73.105 73.105z"],"attrs":[{},{}],"tags":["question","help","query","doubt","uncertainty"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":116,"id":90,"name":"question","prevSize":24,"code":59738},"setIdx":0,"setId":1,"iconIdx":224},{"icon":{"paths":["M907.406 301.957l-290.385-290.385c-7.121-7.13-16.959-11.543-27.829-11.553h-129.703c-79.752 0-144.404 64.652-144.404 144.404v0 65.638h-65.638c-79.752 0-144.404 64.652-144.404 144.404v0 525.108c0 79.752 64.652 144.404 144.404 144.404v0h367.575c79.752 0 144.404-64.652 144.404-144.404v0-65.638h13.128c79.752 0 144.404-64.652 144.404-144.404v0-341.319c-0.443-10.296-4.774-19.502-11.552-26.254l-0.001-0.001zM630.149 134.448l154.382 154.382h-154.382zM682.66 879.575c0 36.251-29.387 65.638-65.638 65.638v0h-367.575c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h65.638v380.702c0 79.752 64.652 144.404 144.404 144.404v0h223.17zM774.553 735.17h-315.064c-36.251 0-65.638-29.387-65.638-65.638v0-525.108c0-36.251 29.387-65.638 65.638-65.638v0h91.894v249.426c0.292 21.632 17.751 39.091 39.355 39.383h249.455v301.936c0 36.251-29.387 65.638-65.638 65.638v0z"],"attrs":[{}],"tags":["copy","duplicate","replicate","clone","reproduce"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":115,"id":91,"name":"copy","prevSize":24,"code":59735},"setIdx":0,"setId":1,"iconIdx":225},{"icon":{"paths":["M894.081 336.465l-323.57-323.57c-7.935-7.944-18.897-12.862-31.009-12.873h-261.55c-88.866 0-160.907 72.041-160.907 160.907v0 702.14c0 88.866 72.041 160.907 160.907 160.907v0h468.093c88.866 0 160.907-72.041 160.907-160.907v0-497.35c-0.494-11.473-5.32-21.731-12.872-29.254l-0.001-0.001zM585.139 149.812l172.024 172.024h-172.024zM746.047 936.209h-468.093c-40.394 0-73.139-32.746-73.139-73.139v0-702.14c0-40.394 32.746-73.139 73.139-73.139v0h219.419v277.931c0.325 24.105 19.779 43.559 43.852 43.884h277.962v453.466c0 40.394-32.746 73.139-73.139 73.139v0z"],"attrs":[{}],"tags":["file","document","record","data","paper"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":114,"id":92,"name":"file","prevSize":24,"code":59736},"setIdx":0,"setId":1,"iconIdx":226},{"icon":{"paths":["M629.028 789.943h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-468.114c0-88.87 72.044-160.914 160.914-160.914v0h468.114c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0zM160.914 87.772c-40.395 0-73.142 32.747-73.142 73.142v0 468.114c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0z","M863.086 1024h-468.114c-88.87 0-160.914-72.044-160.914-160.914v0-117.028h87.771v117.028c0 40.395 32.747 73.142 73.142 73.142v0h468.114c40.395 0 73.142-32.747 73.142-73.142v0-468.114c0-40.395-32.747-73.142-73.142-73.142v0h-117.028v-87.771h117.028c88.87 0 160.914 72.044 160.914 160.914v0 468.114c0 88.87-72.044 160.914-160.914 160.914v0z"],"attrs":[{},{}],"tags":["clone","duplicate","copy","replicate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":111,"id":93,"name":"clone","prevSize":24,"code":59733},"setIdx":0,"setId":1,"iconIdx":227},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M619.381 626.023c-7.448-7.637-17.839-12.375-29.336-12.375s-21.888 4.738-29.328 12.366l-0.008 0.009-48.71 48.71-48.71-48.71c-7.393-6.903-17.353-11.141-28.301-11.141-22.927 0-41.514 18.586-41.514 41.514 0 10.949 4.238 20.907 11.165 28.325l-0.022-0.025 48.71 48.71-48.71 48.71c-7.637 7.448-12.375 17.839-12.375 29.336s4.738 21.888 12.366 29.328l0.009 0.008c7.171 7.515 17.264 12.187 28.45 12.187 0.311 0 0.623-0.004 0.933-0.010l-0.047 0.001c0.057 0 0.126 0 0.193 0 11.401 0 21.713-4.657 29.139-12.174l48.714-48.714 48.71 48.71c7.43 7.52 17.742 12.178 29.142 12.178 0.067 0 0.136 0 0.204 0h-0.010c0.263 0.006 0.575 0.010 0.886 0.010 11.185 0 21.278-4.673 28.435-12.173l0.014-0.016c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008-48.71-48.71 48.71-48.71c7.637-7.448 12.375-17.839 12.375-29.336s-4.738-21.888-12.366-29.328l-0.009-0.008z"],"attrs":[{},{}],"tags":["calendar-times","delete-event","clear-calendar"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":110,"id":94,"name":"calendar-times","prevSize":24,"code":59730},"setIdx":0,"setId":1,"iconIdx":228},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 694.659h-221.406c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h221.406c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-minus","remove-event","delete-date","cancel-event"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":109,"id":95,"name":"calendar-minus","prevSize":24,"code":59731},"setIdx":0,"setId":1,"iconIdx":229},{"icon":{"paths":["M788.756 110.703h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-249.081v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-84.066 0-152.216 68.15-152.216 152.216v0 608.864c0 84.066 68.15 152.216 152.216 152.216v0h553.514c84.066 0 152.216-68.15 152.216-152.216v0-608.864c0-84.066-68.15-152.216-152.216-152.216v0zM235.244 193.73h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h249.081v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c38.212 0 69.189 30.977 69.189 69.189v0 152.216h-691.891v-152.216c0-38.212 30.977-69.189 69.189-69.189v0zM788.756 940.973h-553.514c-38.212 0-69.189-30.977-69.189-69.189v0-373.622h691.891v373.622c0 38.212-30.977 69.189-69.189 69.189v0z","M622.702 691.892h-69.189v-69.189c0-22.927-18.586-41.514-41.514-41.514s-41.514 18.586-41.514 41.514v0 69.189h-69.189c-22.927 0-41.514 18.586-41.514 41.514s18.586 41.514 41.514 41.514v0h69.189v69.189c0 22.927 18.586 41.514 41.514 41.514s41.514-18.586 41.514-41.514v0-69.189h69.189c22.927 0 41.514-18.586 41.514-41.514s-18.586-41.514-41.514-41.514v0z"],"attrs":[{},{}],"tags":["calendar-plus","add-event","new-date","schedule"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":108,"id":96,"name":"calendar-plus","prevSize":24,"code":59732},"setIdx":0,"setId":1,"iconIdx":230},{"icon":{"paths":["M614.393 512c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 102.431c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z","M614.393 921.569c0 56.549-45.842 102.393-102.393 102.393s-102.393-45.842-102.393-102.393c0-56.549 45.842-102.393 102.393-102.393s102.393 45.842 102.393 102.393z"],"attrs":[{},{},{}],"tags":["ellipsis-v","more","options","menu","vertical","dots"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":107,"id":97,"name":"ellipsis-v","prevSize":24,"code":59728},"setIdx":0,"setId":1,"iconIdx":231},{"icon":{"paths":["M614.379 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M1023.886 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z","M204.868 512c0 56.54-45.835 102.379-102.379 102.379s-102.379-45.835-102.379-102.379c0-56.54 45.835-102.379 102.379-102.379s102.379 45.835 102.379 102.379z"],"attrs":[{},{},{}],"tags":["ellipsis-h","more","options","menu","horizontal","dots"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":106,"id":98,"name":"ellipsis-h","prevSize":24,"code":59729},"setIdx":0,"setId":1,"iconIdx":232},{"icon":{"paths":["M848.457 1024c-9.363-0.189-18.033-2.998-25.352-7.723l0.191 0.115-311.296-217.088-311.296 217.088c-6.501 4.018-14.382 6.4-22.821 6.4s-16.32-2.381-23.010-6.509l0.189 0.108c-13.4-7.013-22.574-20.486-23.401-36.171l-0.004-0.107v-819.2c0-88.87 72.044-160.914 160.914-160.914v0h438.857c88.87 0 160.914 72.044 160.914 160.914v0 819.2c0 0.048 0 0.104 0 0.159 0 16.646-9.393 31.099-23.169 38.347l-0.237 0.114c-5.911 3.304-12.965 5.254-20.477 5.266h-0.004zM512 702.172c0.137-0.001 0.3-0.003 0.464-0.003 9.223 0 17.782 2.846 24.846 7.706l-0.148-0.096 267.411 186.075v-734.939c0-40.395-32.747-73.142-73.142-73.142v0h-438.857c-40.395 0-73.142 32.747-73.142 73.142v0 734.939l267.411-186.075c6.916-4.764 15.475-7.609 24.698-7.609 0.163 0 0.325 0.001 0.488 0.003h-0.025z"],"attrs":[{}],"tags":["bookmark","favorite","mark","save","tag"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":105,"id":99,"name":"bookmark","prevSize":24,"code":59726},"setIdx":0,"setId":1,"iconIdx":233},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM936.391 469.333h-157.013c-21.309-143.377-80.98-269.999-168.128-372.54l0.875 1.056c174.421 43.539 304.877 189.937 324.104 369.605l0.163 1.879zM330.524 554.667h362.951c-28.064 140.685-92.065 263.297-182.001 361.829l0.527-0.585c-89.411-97.947-153.411-220.56-180.673-356.452l-0.803-4.792zM330.524 469.333c28.064-140.685 92.065-263.297 182.001-361.829l-0.527 0.585c89.411 97.947 153.411 220.56 180.673 356.452l0.803 4.792zM411.876 97.849c-86.273 101.485-145.944 228.107-166.755 367.427l-0.499 4.057h-157.013c19.389-181.548 149.845-327.945 321.319-370.86l2.948-0.625zM87.609 552.96h157.013c21.309 143.377 80.98 269.999 168.128 372.54l-0.875-1.056c-173.937-43.335-304.18-188.936-324.092-367.845l-0.175-1.933zM612.124 924.444c86.273-101.485 145.944-228.107 166.755-367.427l0.499-4.057h157.013c-18.688 182.253-149.359 329.449-321.317 372.565l-2.949 0.627z"],"attrs":[{}],"tags":["globe","world","internet","global","earth"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":104,"id":100,"name":"globe","prevSize":24,"code":59727},"setIdx":0,"setId":1,"iconIdx":234},{"icon":{"paths":["M512 1023.452c-233.911-0.333-423.443-189.864-423.774-423.743v-0.032c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c0 185.621 150.475 336.097 336.097 336.097s336.097-150.475 336.097-336.097c0-185.621-150.475-336.097-336.097-336.097v0h-146.13c-24.211 0-43.839-19.627-43.839-43.839s19.627-43.839 43.839-43.839v0h146.13c234.044 0 423.774 189.73 423.774 423.774s-189.73 423.774-423.774 423.774v0z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-175.359-175.359c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l175.355-175.355c8.025-8.595 19.423-13.953 32.074-13.953 24.211 0 43.839 19.627 43.839 43.839 0 12.65-5.358 24.048-13.927 32.049l-0.026 0.023-144.376 144.376 144.376 144.376c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["replay","repeat","redo","play-again","loop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":102,"id":101,"name":"replay","prevSize":24,"code":59725},"setIdx":0,"setId":1,"iconIdx":235},{"icon":{"paths":["M632.463 1023.971h-240.928c-24.813-0.335-44.839-20.361-45.174-45.141v-466.83l-322.241-440.294c-5.688-7.337-9.117-16.671-9.117-26.808 0-7.369 1.813-14.314 5.016-20.414l-0.116 0.241c7.747-14.706 22.885-24.586 40.34-24.695h903.493c17.471 0.11 32.608 9.989 40.236 24.445l0.12 0.25c3.089 5.86 4.901 12.805 4.901 20.173 0 10.136-3.43 19.471-9.191 26.908l0.075-0.1-322.241 440.294v466.797c-0.335 24.813-20.361 44.839-45.141 45.174h-0.032zM436.711 933.623h150.58v-436.68c0-0.064 0-0.138 0-0.212 0-9.955 3.401-19.116 9.105-26.383l-0.071 0.093 277.067-380.063h-722.782l278.271 380.063c5.634 7.174 9.035 16.335 9.035 26.29 0 0.075 0 0.15 0 0.224v-0.011z"],"attrs":[{}],"tags":["filter","refine","criteria","sort","selection"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":101,"id":102,"name":"filter","prevSize":24,"code":59724},"setIdx":0,"setId":1,"iconIdx":236},{"icon":{"paths":["M863.086 789.943h-117.028c-24.237 0-43.886-19.648-43.886-43.886s19.648-43.886 43.886-43.886v0h117.028c40.395 0 73.142-32.747 73.142-73.142v0-234.058c0-40.395-32.747-73.142-73.142-73.142v0h-702.171c-40.395 0-73.142 32.747-73.142 73.142v0 234.058c0 40.395 32.747 73.142 73.142 73.142v0h117.028c24.237 0 43.886 19.648 43.886 43.886s-19.648 43.886-43.886 43.886v0h-117.028c-88.87 0-160.914-72.044-160.914-160.914v0-234.058c0-88.87 72.044-160.914 160.914-160.914v0h702.171c88.87 0 160.914 72.044 160.914 160.914v0 234.058c0 88.87-72.044 160.914-160.914 160.914v0z","M746.058 321.828c-24.106-0.325-43.561-19.78-43.886-43.854v-190.203h-380.342v190.172c0 24.237-19.648 43.886-43.886 43.886s-43.886-19.648-43.886-43.886v0-204.8c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 204.8c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z","M716.8 1024h-409.6c-40.395 0-73.142-32.747-73.142-73.142v0-409.6c0-40.395 32.747-73.142 73.142-73.142v0h409.6c40.395 0 73.142 32.747 73.142 73.142v0 409.6c0 40.395-32.747 73.142-73.142 73.142v0zM321.828 936.228h380.342v-380.342h-380.342z"],"attrs":[{},{},{}],"tags":["print","printout","hard-copy","document","printer"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":99,"id":103,"name":"print","prevSize":24,"code":59723},"setIdx":0,"setId":1,"iconIdx":237},{"icon":{"paths":["M980.093 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M984.189 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-right","text-alignment","right-aligned","end-alignment","text-flush-right"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":98,"id":104,"name":"align-right","prevSize":24,"code":59718},"setIdx":0,"setId":1,"iconIdx":238},{"icon":{"paths":["M624.033 453.952h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 221.761h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M980.446 686.143h-928.766c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h928.766c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z","M624.033 918.335h-580.479c-24.044 0-43.536-19.492-43.536-43.536s19.492-43.536 43.536-43.536v0h580.479c24.044 0 43.536 19.492 43.536 43.536s-19.492 43.536-43.536 43.536v0z"],"attrs":[{},{},{},{}],"tags":["align-left","text-alignment","left-aligned","start-alignment","text-flush-left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":97,"id":105,"name":"align-left","prevSize":24,"code":59719},"setIdx":0,"setId":1,"iconIdx":239},{"icon":{"paths":["M804.558 438.861h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M804.558 906.954h-585.117c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h585.117c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-center","text-alignment","center-text","middle-alignment","centered-layout"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":96,"id":106,"name":"align-center","prevSize":24,"code":59720},"setIdx":0,"setId":1,"iconIdx":240},{"icon":{"paths":["M980.093 438.861h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 204.814h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 672.907h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z","M980.093 906.954h-936.187c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h936.187c24.236 0 43.884 19.648 43.884 43.884s-19.648 43.884-43.884 43.884v0z"],"attrs":[{},{},{},{}],"tags":["align-justify","text-alignment","justify-text","uniform-spacing","balanced-layout"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":95,"id":107,"name":"align-justify","prevSize":24,"code":59721},"setIdx":0,"setId":1,"iconIdx":241},{"icon":{"paths":["M512 683.439c-94.683 0-171.439-76.755-171.439-171.439s76.755-171.439 171.439-171.439c94.683 0 171.439 76.755 171.439 171.439v0c0 94.683-76.755 171.439-171.439 171.439v0zM512 428.329c-46.211 0-83.671 37.462-83.671 83.671s37.462 83.671 83.671 83.671c46.211 0 83.671-37.462 83.671-83.671v0c0-46.211-37.462-83.671-83.671-83.671v0z","M515.511 1023.977c-71.489-0.329-129.316-58.359-129.316-129.895 0-0.411 0.001-0.823 0.005-1.234v0.063c-0.496-11.009-7.26-20.325-16.788-24.505l-0.181-0.070c-3.653-1.718-7.933-2.721-12.448-2.721-7.858 0-15.007 3.038-20.337 8.003l0.018-0.016c-23.441 23.268-55.642 37.739-91.222 38.032h-0.056c-0.252 0.001-0.55 0.003-0.848 0.003-35.579 0-67.876-14.051-91.644-36.906l0.043 0.041c-23.515-23.508-38.058-55.987-38.058-91.864s14.545-68.356 38.058-91.864v0c5.876-5.37 9.547-13.066 9.547-21.622 0-3.145-0.496-6.173-1.414-9.011l0.058 0.207c-5.723-9.782-16.134-16.274-28.071-16.384h-0.015c-71.692-0.291-129.966-57.335-132.231-128.518l-0.005-0.208c0.332-71.488 58.36-129.312 129.895-129.312 0.206 0 0.413 0 0.618 0.001h-0.032c11.009-0.496 20.325-7.26 24.505-16.788l0.070-0.181c1.718-3.653 2.721-7.933 2.721-12.448 0-7.858-3.038-15.007-8.003-20.337l0.016 0.018c-23.268-23.441-37.739-55.642-38.032-91.222v-0.056c-0.012-0.671-0.019-1.462-0.019-2.255 0-35.137 14.077-66.986 36.901-90.213l-0.018 0.019c23.508-23.515 55.987-38.058 91.864-38.058s68.356 14.545 91.864 38.058v0c6.075 5.789 14.317 9.35 23.391 9.35 3.125 0 6.153-0.422 9.028-1.214l-0.239 0.056c10.177-5.653 17.174-15.957 18.131-27.962l0.008-0.123c0-0.019 0-0.041 0-0.063 0-71.915 57.154-130.481 128.518-132.752l0.208-0.005c71.237 0.66 128.732 58.56 128.732 129.89 0 0.413-0.001 0.826-0.005 1.238v-0.063c0.477 11.185 6.924 20.76 16.218 25.665l0.166 0.080c2.998 1.135 6.465 1.792 10.084 1.792 7.909 0 15.084-3.138 20.35-8.236l-0.008 0.007c23.441-23.268 55.642-37.739 91.222-38.032h0.056c1.163-0.038 2.53-0.062 3.903-0.062 34.624 0 65.95 14.12 88.535 36.914l0.010 0.010c23.515 23.508 38.058 55.987 38.058 91.864s-14.545 68.356-38.058 91.864v0c-4.99 5.871-8.027 13.54-8.027 21.916 0 3.667 0.581 7.197 1.657 10.505l-0.067-0.24c5.653 10.177 15.957 17.174 27.962 18.131l0.123 0.008c71.192 0.937 128.814 57.74 131.062 128.518l0.005 0.208c-0.66 71.237-58.56 128.732-129.89 128.732-0.413 0-0.826-0.001-1.238-0.005h0.063c-11.185 0.477-20.76 6.924-25.665 16.218l-0.080 0.166c-1.135 2.998-1.792 6.465-1.792 10.084 0 7.909 3.138 15.084 8.236 20.35l-0.007-0.008c23.268 23.441 37.739 55.642 38.032 91.222v0.056c0.012 0.671 0.019 1.462 0.019 2.255 0 35.137-14.077 66.986-36.901 90.213l0.018-0.019c-23.508 23.515-55.987 38.058-91.864 38.058s-68.356-14.545-91.864-38.058v0c-5.258-5.092-12.433-8.23-20.341-8.23-3.62 0-7.086 0.657-10.287 1.86l0.202-0.066c-9.782 5.723-16.274 16.134-16.384 28.071v0.015c-0.937 71.192-57.74 128.814-128.518 131.062l-0.208 0.005zM356.944 777.643c0.372-0.004 0.812-0.007 1.252-0.007 15.867 0 30.927 3.45 44.471 9.643l-0.669-0.274c41.82 17.762 70.846 58.017 71.967 105.181l0.003 0.14c-0.003 0.185-0.004 0.402-0.004 0.62 0 23.297 18.4 42.297 41.461 43.26l0.088 0.003c23.005-1.873 40.964-21.005 40.964-44.331 0-0.254-0.003-0.509-0.007-0.761v0.038c0.3-47.575 28.116-88.582 68.322-107.933l0.723-0.313c13.278-5.676 28.727-8.976 44.947-8.976 32.246 0 61.445 13.042 82.611 34.139l-0.003-0.003c7.488 7.488 17.831 12.119 29.255 12.119 22.85 0 41.374-18.524 41.374-41.374 0-11.425-4.631-21.769-12.119-29.255v0c-20.848-21.12-33.725-50.154-33.725-82.193 0-16.378 3.364-31.971 9.44-46.123l-0.291 0.761c18.745-40.97 59.339-68.943 106.478-69.044h0.014c0.185 0.003 0.403 0.004 0.621 0.004 22.975 0 41.712-18.138 42.674-40.875l0.003-0.088c-1.57-22.953-20.575-40.976-43.788-40.976-0.446 0-0.889 0.007-1.332 0.019l0.064-0.001c-47.872-1.343-88.773-29.867-107.929-70.632l-0.317-0.752c-5.566-13.342-8.8-28.841-8.8-45.097 0-32.536 12.954-62.046 33.987-83.655l-0.026 0.027c7.488-7.488 12.119-17.831 12.119-29.255 0-22.85-18.524-41.374-41.374-41.374-11.425 0-21.769 4.631-29.255 12.119v0c-20.824 19.383-48.841 31.278-79.638 31.278-63.284 0-114.836-50.233-116.956-113.001l-0.005-0.195c0.003-0.185 0.004-0.403 0.004-0.621 0-22.975-18.138-41.712-40.875-42.674l-0.088-0.003c-22.953 1.57-40.976 20.575-40.976 43.788 0 0.446 0.007 0.889 0.019 1.332l-0.001-0.064c-1.343 47.872-29.867 88.773-70.632 107.929l-0.752 0.317c-13.342 5.566-28.841 8.8-45.097 8.8-32.536 0-62.046-12.954-83.655-33.987l0.027 0.026c-7.488-7.488-17.831-12.119-29.255-12.119-22.85 0-41.374 18.524-41.374 41.374 0 11.425 4.631 21.769 12.119 29.255v0c20.603 21.075 33.316 49.942 33.316 81.777 0 16.537-3.43 32.274-9.617 46.535l0.292-0.757c-17.762 41.82-58.017 70.846-105.181 71.967l-0.14 0.003c-0.185-0.003-0.402-0.004-0.62-0.004-23.297 0-42.297 18.4-43.26 41.461l-0.003 0.088c1.873 23.005 21.005 40.964 44.331 40.964 0.254 0 0.509-0.003 0.761-0.007h-0.038c47.575 0.3 88.582 28.116 107.933 68.322l0.313 0.723c5.676 13.278 8.976 28.727 8.976 44.947 0 32.246-13.042 61.445-34.139 82.611l0.003-0.003c-7.488 7.488-12.119 17.831-12.119 29.255 0 22.85 18.524 41.374 41.374 41.374 11.425 0 21.769-4.631 29.255-12.119v0c21.423-20.481 50.464-33.15 82.462-33.352h0.040zM825.038 639.555v0z"],"attrs":[{},{}],"tags":["cog","settings","gears","options","configuration"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":94,"id":108,"name":"cog","prevSize":24,"code":59722},"setIdx":0,"setId":1,"iconIdx":242},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 177.736 8.28 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-206.991 0-206.991-213.062-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M512 908.319c-0.057 0-0.125 0-0.193 0-11.369 0-21.653-4.644-29.058-12.14l-156.213-156.213c-6.884-7.373-11.11-17.304-11.11-28.222 0-22.863 18.535-41.398 41.398-41.398 10.919 0 20.849 4.226 28.246 11.134l-0.025-0.022 126.954 126.954 126.954-126.954c7.373-6.884 17.304-11.11 28.222-11.11 22.863 0 41.398 18.535 41.398 41.398 0 10.919-4.226 20.849-11.134 28.246l0.022-0.025-156.209 158.416c-7.128 6.219-16.515 10.011-26.787 10.011-0.868 0-1.73-0.027-2.585-0.080l0.116 0.006z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-download","download","data","fetch","retrieval"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":93,"id":109,"name":"cloud-download","prevSize":24,"code":59715},"setIdx":0,"setId":1,"iconIdx":243},{"icon":{"paths":["M815.587 856.985c-22.863 0-41.398-18.535-41.398-41.398s18.535-41.398 41.398-41.398v0c91.628 0 124.194-45.813 124.194-175.528-8.48-95.471-83.922-170.912-178.638-179.338l-0.753-0.054c-19.914 0.52-38.817 4.118-56.489 10.331l1.291-0.396c-4.655 2-10.071 3.163-15.761 3.163-18.775 0-34.592-12.668-39.37-29.923l-0.067-0.287c-38.556-117.836-147.511-201.455-275.996-201.455-159.262 0-288.519 128.478-289.778 287.443l-0.001 0.119c0 189.879 41.951 285.923 124.194 285.923 22.863 0 41.398 18.535 41.398 41.398s-18.535 41.398-41.398 41.398v0c-137.994 0-206.991-124.194-206.991-368.719-0.047-2.197-0.074-4.787-0.074-7.382 0-205.772 166.811-372.583 372.583-372.583 155.102 0 288.069 94.773 344.148 229.569l0.909 2.466c12.977-2.459 27.905-3.866 43.161-3.866 0.351 0 0.701 0.001 1.052 0.003h-0.054c141.071 8.919 253.269 121.118 262.147 261.377l0.041 0.811c-2.759 70.652-2.759 258.324-209.75 258.324z","M668.209 713.47c-11.406-0.137-21.709-4.745-29.262-12.15l-126.947-126.947-126.954 126.954c-7.373 6.884-17.304 11.11-28.222 11.11-22.863 0-41.398-18.535-41.398-41.398 0-10.919 4.226-20.849 11.134-28.246l-0.022 0.025 156.209-156.209c7.427-7.616 17.79-12.341 29.254-12.341s21.827 4.725 29.246 12.331l0.008 0.009 156.209 156.209c7.48 7.489 12.108 17.832 12.108 29.254s-4.626 21.765-12.108 29.256v0c-7.6 7.307-17.868 11.888-29.205 12.143l-0.049 0.001z","M512 908.319c-22.863 0-41.398-18.535-41.398-41.398v0-351.056c0-22.863 18.535-41.398 41.398-41.398s41.398 18.535 41.398 41.398v0 351.056c0 22.863-18.535 41.398-41.398 41.398v0z"],"attrs":[{},{},{}],"tags":["cloud-upload","backup","save","upload"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":92,"id":110,"name":"cloud-upload","prevSize":24,"code":59716},"setIdx":0,"setId":1,"iconIdx":244},{"icon":{"paths":["M761.085 885.627h-387.465c-206.337-0.017-373.598-167.289-373.598-373.627 0-206.348 167.278-373.627 373.627-373.627 152.926 0 284.392 91.876 342.215 223.439l0.939 2.397c13.246-2.68 28.531-4.285 44.166-4.428l0.115-0.001c141.466 8.944 253.978 121.457 262.882 262.11l0.042 0.813c0 145.209-117.715 262.923-262.923 262.923v0zM373.619 221.401c-160.494 0-290.599 130.105-290.599 290.599s130.105 290.599 290.599 290.599v0h387.465c99.226-0.314 179.581-80.668 179.895-179.864v-0.030c-8.504-95.738-84.157-171.391-179.139-179.84l-0.755-0.054c-19.989 0.459-38.949 4.276-56.529 10.907l1.178-0.389c-4.752 1.958-10.27 3.095-16.052 3.095s-11.3-1.136-16.34-3.199l0.288 0.104c-9.801-5.017-17.16-13.636-20.404-24.069l-0.077-0.287c-36.721-121.012-147.288-207.574-278.073-207.574-0.511 0-1.022 0.001-1.533 0.004h0.079z"],"attrs":[{}],"tags":["cloud","internet","storage","weather","data"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":91,"id":111,"name":"cloud","prevSize":24,"code":59717},"setIdx":0,"setId":1,"iconIdx":245},{"icon":{"paths":["M45.313 1022.421c-0.136 0.001-0.296 0.003-0.456 0.003-11.964 0-22.806-4.803-30.702-12.588l0.006 0.006c-8.248-8.149-13.356-19.461-13.356-31.966 0-1.401 0.065-2.787 0.19-4.155l-0.013 0.176 18.572-230.049c0.852-11.108 5.734-20.935 13.169-28.147l662.6-662.6c34.079-31.973 80.059-51.615 130.628-51.615 2.096 0 4.186 0.034 6.267 0.101l-0.303-0.008c52.335 0.418 99.758 21.108 134.873 54.592l-0.079-0.074c34.783 35.688 56.235 84.513 56.235 138.348 0 50.427-18.822 96.457-49.825 131.448l0.181-0.208-663.188 665.585c-7.185 7.16-16.72 11.966-27.348 13.161l-0.211 0.020-233.044 20.968zM105.22 767.211l-12.581 164.15 164.15-14.978 653.004-654.202c15.132-17.82 24.333-41.087 24.333-66.503 0-56.908-46.133-103.043-103.043-103.043-0.341 0-0.681 0.001-1.021 0.006h0.052c-1.828-0.124-3.962-0.194-6.112-0.194-25.163 0-48.075 9.635-65.249 25.419l0.069-0.063zM727.071 84.852v0z"],"attrs":[{}],"tags":["pencil","edit","write","draw","update"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":90,"id":112,"name":"pencil","prevSize":24,"code":59714},"setIdx":0,"setId":1,"iconIdx":246},{"icon":{"paths":["M617.025 525.129c-108.758 0-196.923-88.165-196.923-196.923s88.165-196.923 196.923-196.923c108.758 0 196.923 88.165 196.923 196.923v0c0 108.758-88.165 196.923-196.923 196.923v0zM617.025 210.052c-65.254 0-118.154 52.9-118.154 118.154s52.9 118.154 118.154 118.154c65.254 0 118.154-52.9 118.154-118.154v0c0-65.254-52.9-118.154-118.154-118.154v0z","M984.615 892.718c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-102.4-55.664-170.667-328.206-170.667s-328.206 68.267-328.206 170.667c0 21.751-17.633 39.385-39.385 39.385s-39.385-17.633-39.385-39.385v0c0-249.436 285.145-249.436 406.975-249.436s406.975 0 406.975 249.436c-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z","M318.753 567.664h-16.804c-80.61-8.022-143.044-75.489-143.044-157.538 0-87.412 70.862-158.273 158.273-158.273 5.362 0 10.663 0.267 15.888 0.788l-0.66-0.053c21.012 0.932 37.694 18.192 37.694 39.348 0 21.751-17.633 39.385-39.385 39.385-2.183 0-4.326-0.177-6.414-0.519l0.228 0.031c-2.281-0.241-4.928-0.378-7.607-0.378-18.98 0-36.35 6.897-49.738 18.321l0.107-0.089c-15.663 12.706-26.198 31.205-28.33 52.186l-0.027 0.326c-0.273 2.455-0.43 5.301-0.43 8.183 0 40.775 31.191 74.267 71.015 77.915l0.306 0.022c2.052 0.186 4.437 0.293 6.848 0.293 15.535 0 30.039-4.409 42.331-12.043l-0.342 0.198c5.898-3.695 13.065-5.886 20.742-5.886 21.812 0 39.494 17.682 39.494 39.494 0 14.133-7.424 26.533-18.586 33.511l-0.166 0.097c-23.058 14.912-51.098 24.022-81.222 24.678l-0.174 0.002z","M39.385 853.333c-21.633-0.292-39.093-17.751-39.385-39.356v-0.028c0-141.785 37.809-236.308 223.179-236.308 21.751 0 39.385 17.633 39.385 39.385s-17.633 39.385-39.385 39.385v0c-123.406 0-144.41 39.385-144.41 157.538-0.292 21.633-17.751 39.093-39.356 39.385h-0.028z"],"attrs":[{},{},{},{}],"tags":["users","group","team","people","crowd"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":88,"id":113,"name":"users","prevSize":24,"code":59713},"setIdx":0,"setId":1,"iconIdx":247},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M682.667 554.667h-170.667c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 241.777h128c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["clock","time","hours","minutes","seconds"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":87,"id":114,"name":"clock","prevSize":24,"code":59712},"setIdx":0,"setId":1,"iconIdx":248},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{}],"tags":["user-minus","remove-user","delete-user","user-deletion","eliminate-user"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":83,"id":115,"name":"user-minus","prevSize":24,"code":59710},"setIdx":0,"setId":1,"iconIdx":249},{"icon":{"paths":["M512 556.52c-122.938 0-222.599-99.66-222.599-222.599s99.66-222.599 222.599-222.599c122.938 0 222.599 99.66 222.599 222.599v0c0 122.938-99.66 222.599-222.599 222.599v0zM512 200.362c-73.762 0-133.559 59.797-133.559 133.559s59.797 133.559 133.559 133.559c73.762 0 133.559-59.797 133.559-133.559v0c0-73.762-59.797-133.559-133.559-133.559v0z","M927.518 972.038c-24.454-0.33-44.19-20.066-44.52-44.488v-0.032c0-115.751-62.922-192.919-370.998-192.919s-370.998 77.168-370.998 192.919c0 24.587-19.932 44.52-44.52 44.52s-44.52-19.932-44.52-44.52v0c0-281.959 322.323-281.959 460.038-281.959s460.038 0 460.038 281.959c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M927.518 660.4c-24.454-0.33-44.19-20.066-44.52-44.488v-207.79c0-24.587 19.932-44.52 44.52-44.52s44.52 19.932 44.52 44.52v0 207.758c-0.33 24.454-20.066 44.19-44.488 44.52h-0.032z","M1031.396 556.52h-207.758c-24.587 0-44.52-19.932-44.52-44.52s19.932-44.52 44.52-44.52v0h207.758c24.587 0 44.52 19.932 44.52 44.52s-19.932 44.52-44.52 44.52v0z"],"attrs":[{},{},{},{}],"tags":["user-plus","add-user","new-user","register","signup"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":86,"id":116,"name":"user-plus","prevSize":24,"code":59711},"setIdx":0,"setId":1,"iconIdx":250},{"icon":{"paths":["M979.856 319.009h-935.714c-24.224 0-43.862-19.638-43.862-43.862s19.638-43.862 43.862-43.862h935.714c24.224 0 43.862 19.638 43.862 43.862s-19.638 43.862-43.862 43.862v0z","M771.66 1023.718h-519.321c-2.865 0.208-6.208 0.328-9.577 0.328-74.752 0-135.856-58.437-140.12-132.119l-0.018-0.377v-613.477c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 613.477c0 23.977 27.486 44.447 58.483 44.447h519.321c32.75 0 58.483-20.468 58.483-44.447v-613.477c0-26.162 21.208-47.37 47.37-47.37s47.37 21.208 47.37 47.37v0 613.477c-4.282 74.060-65.385 132.496-140.136 132.496-3.37 0-6.712-0.119-10.022-0.352l0.445 0.025zM778.678 263.452c-0.175 0.003-0.382 0.004-0.589 0.004-23.9 0-43.276-19.376-43.276-43.276 0-0.207 0.001-0.414 0.004-0.62v0.032-87.138c0-23.977-28.071-44.447-58.483-44.447h-326.915c-32.166 0-58.483 20.468-58.483 44.447v87.138c0 24.224-19.638 43.862-43.862 43.862s-43.862-19.638-43.862-43.862v0-87.138c4.697-74.022 65.883-132.278 140.675-132.278 1.945 0 3.88 0.040 5.806 0.118l-0.276-0.008h325.161c2.174-0.119 4.719-0.188 7.28-0.188 74.82 0 136.023 58.3 140.66 131.951l0.021 0.407v87.138c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M407.901 804.41c-24.092-0.325-43.537-19.769-43.862-43.83v-264.955c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0.003 0.174 0.004 0.38 0.004 0.585 0 24.224-19.638 43.862-43.862 43.862-0.001 0-0.003 0-0.004 0v0z","M616.099 804.41c-24.224 0-43.862-19.638-43.862-43.862v0-264.924c0-24.224 19.638-43.862 43.862-43.862s43.862 19.638 43.862 43.862v0 264.339c0 0.001 0 0.003 0 0.004 0 24.342-19.568 44.112-43.83 44.443h-0.032z"],"attrs":[{},{},{},{}],"tags":["trash","delete","remove","garbage","waste"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":81,"id":117,"name":"trash","prevSize":24,"code":59709},"setIdx":0,"setId":1,"iconIdx":251},{"icon":{"paths":["M863.070 0.023h-702.14c-88.866 0-160.907 72.041-160.907 160.907v0 351.070c0 24.236 19.648 43.884 43.884 43.884s43.884-19.648 43.884-43.884v0-351.070c0-40.394 32.746-73.139 73.139-73.139v0h702.14c40.394 0 73.139 32.746 73.139 73.139v0 702.14c0 40.394-32.746 73.139-73.139 73.139v0h-351.070c-24.236 0-43.884 19.648-43.884 43.884s19.648 43.884 43.884 43.884v0h351.070c88.866 0 160.907-72.041 160.907-160.907v0-702.14c0-88.866-72.041-160.907-160.907-160.907v0z","M465.775 581.628c5.003 2.189 10.831 3.478 16.956 3.511h234.059c24.236 0 43.884-19.648 43.884-43.884s-19.648-43.884-43.884-43.884v0h-128.141l188.408-188.408c7.297-7.815 11.777-18.343 11.777-29.916 0-24.236-19.648-43.884-43.884-43.884-11.574 0-22.101 4.48-29.942 11.802l0.026-0.023-188.408 188.408v-128.141c0-24.236-19.648-43.884-43.884-43.884s-43.884 19.648-43.884 43.884v0 234.047c0.033 6.137 1.322 11.965 3.62 17.252l-0.11-0.284c4.316 10.739 12.665 19.089 23.125 23.305l0.28 0.099z","M277.953 643.651h-175.535c-56.418 0.33-102.065 45.976-102.396 102.364v175.567c0.33 56.418 45.976 102.065 102.364 102.396h175.567c56.418-0.33 102.065-45.976 102.396-102.364v-175.567c-0.33-56.418-45.976-102.065-102.364-102.396h-0.032zM292.581 921.582c0 8.079-6.55 14.628-14.628 14.628v0h-175.535c-8.079 0-14.628-6.55-14.628-14.628v0-175.535c0-8.079 6.55-14.628 14.628-14.628v0h175.535c8.079 0 14.628 6.55 14.628 14.628v0z"],"attrs":[{},{},{}],"tags":["window-minimize","shrink","small-screen","collapse","decrease-size"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":80,"id":118,"name":"window-minimize","prevSize":24,"code":59706},"setIdx":0,"setId":1,"iconIdx":252},{"icon":{"paths":["M863.070 1023.977h-351.070c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h351.070c40.394 0 73.139-32.746 73.139-73.139v0-702.14c0-40.394-32.746-73.139-73.139-73.139v0h-702.14c-40.394 0-73.139 32.746-73.139 73.139v0 351.070c0 24.236-19.648 43.884-43.884 43.884s-43.884-19.648-43.884-43.884v0-351.070c0-88.866 72.041-160.907 160.907-160.907v0h702.14c88.866 0 160.907 72.041 160.907 160.907v0 702.14c0 88.866-72.041 160.907-160.907 160.907v0z","M746.047 555.884c-24.105-0.325-43.559-19.779-43.884-43.852v-190.195h-190.163c-24.236 0-43.884-19.648-43.884-43.884s19.648-43.884 43.884-43.884v0h234.047c24.105 0.325 43.559 19.779 43.884 43.852v234.079c-0.325 24.105-19.779 43.559-43.852 43.884h-0.032z","M482.745 585.139c-11.709-0.922-21.991-6.371-29.214-14.58l-0.041-0.048c-6.935-7.728-11.175-17.996-11.175-29.255s4.24-21.528 11.211-29.297l-0.036 0.041 263.303-263.303c7.815-7.297 18.343-11.777 29.916-11.777 24.236 0 43.884 19.648 43.884 43.884 0 11.574-4.48 22.101-11.802 29.942l0.023-0.026-266.813 259.792c-7.264 8.256-17.547 13.707-29.106 14.619l-0.151 0.010z","M277.953 1023.977h-175.535c-56.418-0.33-102.065-45.976-102.396-102.364v-175.567c0.33-56.418 45.976-102.065 102.364-102.396h175.567c56.418 0.33 102.065 45.976 102.396 102.364v175.567c-0.33 56.418-45.976 102.065-102.364 102.396h-0.032zM102.418 731.419c-8.079 0-14.628 6.55-14.628 14.628v0 175.535c0 8.079 6.55 14.628 14.628 14.628v0h175.535c8.079 0 14.628-6.55 14.628-14.628v0-175.535c0-8.079-6.55-14.628-14.628-14.628v0z"],"attrs":[{},{},{},{}],"tags":["window-maximize","enlarge","full-screen","expand","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":79,"id":119,"name":"window-maximize","prevSize":24,"code":59707},"setIdx":0,"setId":1,"iconIdx":253},{"icon":{"paths":["M862.106 1022.571h-700.213c-88.622 0-160.465-71.843-160.465-160.465v0-700.213c0-88.622 71.843-160.465 160.465-160.465v0h350.106c24.17 0 43.763 19.594 43.763 43.763s-19.594 43.763-43.763 43.763v0h-350.106c-40.283 0-72.938 32.656-72.938 72.938v0 700.213c0 40.283 32.656 72.938 72.938 72.938v0h700.213c40.283 0 72.938-32.656 72.938-72.938v0-350.106c0-24.17 19.594-43.763 43.763-43.763s43.763 19.594 43.763 43.763v0 350.106c0 88.622-71.843 160.465-160.465 160.465v0z","M978.808 322.359c-24.038-0.324-43.439-19.725-43.763-43.732v-189.673h-189.641c-24.17 0-43.763-19.594-43.763-43.763s19.594-43.763 43.763-43.763v0h233.405c24.038 0.324 43.439 19.725 43.763 43.732v233.436c-0.324 24.038-19.725 43.439-43.732 43.763h-0.031z","M599.527 468.237c-11.677-0.919-21.931-6.354-29.134-14.54l-0.041-0.048c-6.916-7.706-11.145-17.947-11.145-29.175s4.229-21.469 11.18-29.216l-0.036 0.041 379.281-379.281c8.011-8.58 19.39-13.929 32.018-13.929 24.17 0 43.763 19.594 43.763 43.763 0 12.628-5.349 24.007-13.903 31.994l-0.026 0.023-382.782 375.78c-7.244 8.233-17.498 13.669-29.026 14.579l-0.15 0.010z"],"attrs":[{},{},{}],"tags":["external-link","new-tab","external","link","outside"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":78,"id":120,"name":"external-link","prevSize":24,"code":59708},"setIdx":0,"setId":1,"iconIdx":254},{"icon":{"paths":["M512 1023.452c-234.044 0-423.774-189.73-423.774-423.774s189.73-423.774 423.774-423.774v0h146.13c24.211 0 43.839 19.627 43.839 43.839s-19.627 43.839-43.839 43.839v0h-146.13c-185.621 0-336.097 150.475-336.097 336.097s150.475 336.097 336.097 336.097c185.621 0 336.097-150.475 336.097-336.097v0c0-24.211 19.627-43.839 43.839-43.839s43.839 19.627 43.839 43.839v0c-0.333 233.911-189.864 423.443-423.743 423.774h-0.032z","M512 438.936c-0.060 0-0.133 0-0.204 0-12.039 0-22.929-4.918-30.771-12.856l-0.004-0.004c-7.921-7.931-12.821-18.884-12.821-30.979s4.899-23.048 12.821-30.98v0l144.376-144.376-144.376-144.376c-8.595-8.025-13.953-19.423-13.953-32.074 0-24.211 19.627-43.839 43.839-43.839 12.65 0 24.048 5.358 32.049 13.927l0.023 0.026 175.355 175.355c7.921 7.931 12.821 18.884 12.821 30.979s-4.899 23.048-12.821 30.98v0l-175.355 175.355c-7.846 7.942-18.736 12.86-30.775 12.86-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["refresh","update","reload","renew","repeat"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":77,"id":121,"name":"refresh","prevSize":24,"code":59704},"setIdx":0,"setId":1,"iconIdx":255},{"icon":{"paths":["M512 528.516c-136.816 0-247.725-110.91-247.725-247.725s110.91-247.725 247.725-247.725c136.816 0 247.725 110.91 247.725 247.725v0c0 136.816-110.91 247.725-247.725 247.725v0zM512 132.155c-82.088 0-148.635 66.547-148.635 148.635s66.547 148.635 148.635 148.635c82.088 0 148.635-66.547 148.635-148.635v0c0-82.088-66.547-148.635-148.635-148.635v0z","M974.421 990.935c-27.214-0.367-49.178-22.331-49.545-49.509v-0.036c0-128.817-70.024-214.696-412.876-214.696s-412.876 85.879-412.876 214.696c0 27.363-22.182 49.545-49.545 49.545s-49.545-22.182-49.545-49.545v0c0-313.786 358.706-313.786 511.966-313.786s511.966 0 511.966 313.786c-0.367 27.214-22.331 49.178-49.509 49.545h-0.036z"],"attrs":[{},{}],"tags":["user","profile","person","account","individual"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":76,"id":122,"name":"user","prevSize":24,"code":59705},"setIdx":0,"setId":1,"iconIdx":256},{"icon":{"paths":["M980.247 964.701h-936.496c-16.088-0.051-30.159-8.633-37.933-21.458l-0.111-0.198c-3.59-6.323-5.705-13.888-5.705-21.949s2.115-15.627 5.823-22.173l-0.117 0.224 468.247-819.433c8.296-12.379 22.232-20.419 38.044-20.419s29.748 8.039 37.942 20.254l0.104 0.165 468.247 819.433c3.59 6.323 5.705 13.888 5.705 21.949s-2.115 15.627-5.823 22.173l0.117-0.224c-7.885 13.022-21.958 21.606-38.038 21.657h-0.007zM119.257 876.905h785.486l-392.743-687.154z","M512 642.78c-24.113-0.325-43.573-19.786-43.898-43.866v-204.89c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 204.858c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z","M512 818.373c-24.113-0.325-43.573-19.786-43.898-43.866v-29.297c0-24.244 19.654-43.898 43.898-43.898s43.898 19.654 43.898 43.898v0 29.265c-0.325 24.113-19.786 43.573-43.866 43.898h-0.032z"],"attrs":[{},{},{}],"tags":["exclamation-triangle","warning","alert","danger","caution"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":75,"id":123,"name":"exclamation-triangle","prevSize":24,"code":59682},"setIdx":0,"setId":1,"iconIdx":257},{"icon":{"paths":["M788.745 110.712h-69.186v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-249.071v-69.186c0-22.926-18.586-41.512-41.512-41.512s-41.512 18.586-41.512 41.512v0 69.186h-69.186c-84.063 0-152.209 68.147-152.209 152.209v0 608.839c0 84.063 68.147 152.209 152.209 152.209v0h553.491c84.063 0 152.209-68.147 152.209-152.209v0-608.839c0-84.063-68.147-152.209-152.209-152.209v0zM235.255 193.735h69.186v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h249.071v69.186c0 22.926 18.586 41.512 41.512 41.512s41.512-18.586 41.512-41.512v0-69.186h69.186c38.21 0 69.186 30.976 69.186 69.186v0 152.209h-691.862v-152.209c0-38.21 30.976-69.186 69.186-69.186v0zM788.745 940.947h-553.491c-38.21 0-69.186-30.976-69.186-69.186v0-373.606h691.862v373.606c0 38.21-30.976 69.186-69.186 69.186v0z"],"attrs":[{}],"tags":["calendar","date","event","schedule","day"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":74,"id":124,"name":"calendar","prevSize":24,"code":59687},"setIdx":0,"setId":1,"iconIdx":258},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M625.777 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-left","back","return","left","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":73,"id":125,"name":"chevron-circle-left","prevSize":24,"code":59688},"setIdx":0,"setId":1,"iconIdx":259},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-down","download","decrease","down","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":70,"id":126,"name":"chevron-circle-down","prevSize":24,"code":59689},"setIdx":0,"setId":1,"iconIdx":260},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M398.223 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-right","next","proceed","right","forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":69,"id":127,"name":"chevron-circle-right","prevSize":24,"code":59690},"setIdx":0,"setId":1,"iconIdx":261},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 668.444c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{}],"tags":["chevron-circle-up","upload","increase","up","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":68,"id":128,"name":"chevron-circle-up","prevSize":24,"code":59691},"setIdx":0,"setId":1,"iconIdx":262},{"icon":{"paths":["M512 902.549c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-260.364c-5.628-8.568-8.981-19.073-8.981-30.354 0-30.81 24.977-55.792 55.792-55.792 10.145 0 19.649 2.705 27.846 7.433l-0.269-0.143 223.173 223.173 223.173-223.173c7.925-4.589 17.434-7.289 27.577-7.289 30.81 0 55.792 24.977 55.792 55.792 0 11.285-3.353 21.785-9.108 30.566l0.128-0.209-258.132 258.132c-9.737 10.997-23.705 18.053-39.331 18.593l-0.092 0.004z","M512 493.405c-0.077 0-0.172 0-0.257 0-15.319 0-29.178-6.257-39.16-16.361l-0.005-0.005-258.132-262.596c-3.437-7.037-5.446-15.305-5.446-24.041 0-30.81 24.977-55.792 55.792-55.792 8.741 0 17.009 2.009 24.377 5.597l-0.329-0.145 223.173 223.173 223.173-223.173c7.037-3.437 15.305-5.446 24.041-5.446 30.81 0 55.792 24.977 55.792 55.792 0 8.741-2.009 17.009-5.597 24.377l0.145-0.329-260.364 260.364c-9.233 10.493-22.31 17.429-37.002 18.583l-0.192 0.012z"],"attrs":[{},{}],"tags":["angle-double-down","fast-fall","down","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":67,"id":129,"name":"angle-double-down","prevSize":24,"code":59692},"setIdx":0,"setId":1,"iconIdx":263},{"icon":{"paths":["M436.578 832.544c-0.073 0-0.172 0-0.262 0-15.535 0-29.584-6.348-39.707-16.591l-0.004-0.004-261.716-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l261.716-261.716c8.688-5.708 19.333-9.102 30.778-9.102 31.242 0 56.568 25.327 56.568 56.568 0 10.286-2.746 19.925-7.538 28.233l0.144-0.272-226.267 226.267 226.267 226.267c10.22 10.237 16.542 24.365 16.542 39.973s-6.32 29.742-16.542 39.973v0c-9.854 8.923-22.994 14.389-37.408 14.389-0.902 0-1.8-0.024-2.694-0.065l0.124 0.004z","M851.399 832.544c-15.091-1.188-28.351-8.214-37.656-18.795l-0.055-0.065-263.977-263.977c-10.22-10.237-16.542-24.365-16.542-39.973s6.32-29.742 16.542-39.973v0l263.977-259.453c7.129-3.487 15.515-5.521 24.379-5.521 31.242 0 56.568 25.327 56.568 56.568 0 8.864-2.038 17.25-5.669 24.715l0.144-0.336-226.267 226.267 226.267 226.267c8.942 9.959 14.408 23.201 14.408 37.714s-5.466 27.749-14.45 37.763l0.045-0.055c-9.366 10.641-22.619 17.666-37.517 18.843l-0.193 0.014z"],"attrs":[{},{}],"tags":["angle-double-left","fast-return","left","back","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":66,"id":130,"name":"angle-double-left","prevSize":24,"code":59693},"setIdx":0,"setId":1,"iconIdx":264},{"icon":{"paths":["M587.102 831.182c-0.073 0-0.171 0-0.259 0-15.47 0-29.463-6.321-39.534-16.519l-0.004-0.004c-10.173-10.194-16.472-24.266-16.472-39.803s6.29-29.611 16.472-39.809v0l225.304-225.304-225.304-225.304c-3.536-7.161-5.605-15.588-5.605-24.492 0-31.111 25.217-56.325 56.325-56.325 10.665 0 20.638 2.967 29.14 8.115l-0.251-0.143 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.83 11.106-23.933 18.225-39.711 18.775l-0.094 0.004z","M174.042 831.182c-15.029-1.181-28.228-8.178-37.495-18.716l-0.053-0.063c-8.9-9.92-14.342-23.099-14.342-37.554s5.442-27.63 14.391-37.603l-0.045 0.053 225.304-225.304-225.304-225.304c-3.467-7.105-5.497-15.45-5.497-24.276 0-31.111 25.217-56.325 56.325-56.325 8.82 0 17.176 2.028 24.609 5.644l-0.339-0.145 262.858 262.858c10.173 10.194 16.472 24.266 16.472 39.803s-6.29 29.611-16.472 39.809v0l-262.858 258.35c-9.32 10.596-22.521 17.598-37.357 18.765l-0.192 0.014z"],"attrs":[{},{}],"tags":["angle-double-right","fast-proceed","right","next","forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":65,"id":131,"name":"angle-double-right","prevSize":24,"code":59694},"setIdx":0,"setId":1,"iconIdx":265},{"icon":{"paths":["M768.744 493.657c-0.079 0-0.163 0-0.259 0-15.11 0-28.77-6.175-38.616-16.135l-220.071-220.071-220.067 220.067c-6.991 3.451-15.223 5.479-23.923 5.479-30.385 0-55.016-24.631-55.016-55.016 0-10.412 2.899-20.155 7.927-28.458l-0.139 0.247 254.542-254.542c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l256.744 256.744c9.943 9.955 16.087 23.695 16.087 38.874s-6.151 28.926-16.087 38.877v0c-9.583 8.683-22.363 13.999-36.378 13.999-0.883 0-1.752-0.019-2.623-0.067l0.127 0.007z","M768.744 897.118c-14.683-1.159-27.57-7.987-36.629-18.283l-0.055-0.060-220.067-220.067-220.067 220.067c-6.935 3.391-15.091 5.371-23.707 5.371-30.385 0-55.016-24.631-55.016-55.016 0-8.623 1.987-16.772 5.515-24.038l-0.139 0.331 256.744-256.744c9.955-9.943 23.695-16.087 38.874-16.087s28.926 6.151 38.877 16.087v0l252.342 256.744c8.695 9.691 14.011 22.565 14.011 36.678s-5.316 26.99-14.059 36.726l0.043-0.055c-9.104 10.351-22.001 17.184-36.486 18.331l-0.187 0.012z"],"attrs":[{},{}],"tags":["angle-double-up","fast-rise","lift","double-up","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":64,"id":132,"name":"angle-double-up","prevSize":24,"code":59695},"setIdx":0,"setId":1,"iconIdx":266},{"icon":{"paths":["M512 724.21c-0.086 0-0.192 0-0.293 0-17.487 0-33.3-7.139-44.687-18.671l-0.006-0.006-294.549-297.097c-6.421-9.779-10.246-21.757-10.246-34.639 0-35.163 28.506-63.662 63.662-63.662 11.573 0 22.424 3.091 31.773 8.485l-0.306-0.164 254.656 254.656 254.656-254.656c9.044-5.23 19.894-8.318 31.469-8.318 35.163 0 63.662 28.506 63.662 63.662 0 12.88-3.82 24.863-10.395 34.879l0.149-0.244-297.097 297.097c-10.874 11.029-25.782 18.050-42.325 18.671l-0.112 0.002z"],"attrs":[{}],"tags":["angle-down","fall","down","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":224,"id":133,"name":"angle-down","prevSize":24,"code":59696},"setIdx":0,"setId":1,"iconIdx":267},{"icon":{"paths":["M645.785 836.904c-0.077 0-0.174 0-0.264 0-15.744 0-29.987-6.434-40.247-16.814l-267.57-267.57c-10.36-10.374-16.768-24.697-16.768-40.517s6.404-30.147 16.768-40.517v0l267.566-265.27c8.804-5.784 19.594-9.224 31.197-9.224 31.667 0 57.335 25.671 57.335 57.335 0 10.424-2.782 20.194-7.64 28.617l0.144-0.274-229.343 229.343 229.343 229.343c10.36 10.374 16.768 24.697 16.768 40.517s-6.404 30.147-16.768 40.517v0c-9.987 9.044-23.307 14.584-37.917 14.584-0.914 0-1.824-0.023-2.732-0.064l0.124 0.004z"],"attrs":[{}],"tags":["angle-left","back","return","left","previous"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":62,"id":134,"name":"angle-left","prevSize":24,"code":59697},"setIdx":0,"setId":1,"iconIdx":268},{"icon":{"paths":["M377.809 837.894c-16.204-0.566-30.605-7.836-40.589-19.11l-0.054-0.059c-10.396-10.404-16.822-24.776-16.822-40.643s6.424-30.235 16.822-40.645v0l230.044-230.044-230.044-230.044c-2.746-6.474-4.334-14.004-4.334-21.905 0-31.765 25.748-57.513 57.513-57.513 10.324 0 20.016 2.723 28.392 7.484l-0.286-0.149 268.384 268.384c10.396 10.406 16.822 24.773 16.822 40.643s-6.424 30.236-16.822 40.645v0l-268.384 263.783c-10.036 11.334-24.433 18.607-40.543 19.164l-0.096 0.006z"],"attrs":[{}],"tags":["angle-right","next","proceed","right","forward"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":61,"id":135,"name":"angle-right","prevSize":24,"code":59698},"setIdx":0,"setId":1,"iconIdx":269},{"icon":{"paths":["M804.999 721.286c-0.087 0-0.194 0-0.29 0-17.244 0-32.838-7.040-44.069-18.415l-251.149-251.149-251.143 251.143c-7.978 3.94-17.369 6.249-27.304 6.249-34.676 0-62.787-28.109-62.787-62.787 0-11.887 3.305-23 9.042-32.478l-0.157 0.277 292.999-292.999c11.357-11.344 27.043-18.363 44.37-18.363s33.008 7.014 44.37 18.363v0l292.999 292.999c11.344 11.357 18.363 27.043 18.363 44.37s-7.014 33.008-18.363 44.37v0c-11.24 11.41-26.866 18.481-44.134 18.481-0.966 0-1.925-0.024-2.88-0.070l0.133 0.002z"],"attrs":[{}],"tags":["angle-up","rise","lift","up","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":60,"id":136,"name":"angle-up","prevSize":24,"code":59699},"setIdx":0,"setId":1,"iconIdx":270},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M746.058 321.828c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-203.048-203.048-203.044 203.044c-7.816 7.297-18.344 11.778-29.918 11.778-24.237 0-43.886-19.648-43.886-43.886 0-11.575 4.48-22.102 11.803-29.944l-0.023 0.026 234.058-234.058c7.939-7.93 18.904-12.835 31.012-12.835s23.073 4.904 31.013 12.835v0l234.058 234.058c7.93 7.939 12.835 18.904 12.835 31.012s-4.904 23.073-12.835 31.013v0c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["upload","send","transfer","give","provide"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":59,"id":137,"name":"upload","prevSize":24,"code":59700},"setIdx":0,"setId":1,"iconIdx":271},{"icon":{"paths":["M875.959 1024h-727.917c-82.563-3.472-148.18-71.248-148.18-154.349 0-2.309 0.051-4.607 0.151-6.89l-0.011 0.325v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c-0.162 1.762-0.255 3.81-0.255 5.881 0 34.276 25.406 62.617 58.412 67.222l0.357 0.041h729.673c33.364-4.645 58.77-32.987 58.77-67.263 0-2.069-0.093-4.118-0.274-6.141l0.019 0.261v-175.543c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 175.543c0.091 1.983 0.143 4.309 0.143 6.646 0 82.485-64.648 149.87-146.039 154.251l-0.389 0.016z","M512 731.429c-0.060 0-0.133 0-0.204 0-12.052 0-22.954-4.923-30.804-12.869l-234.062-234.062c-7.297-7.816-11.778-18.344-11.778-29.918 0-24.237 19.648-43.886 43.886-43.886 11.575 0 22.102 4.48 29.944 11.803l-0.026-0.023 203.044 203.044 203.044-203.044c7.816-7.297 18.344-11.778 29.918-11.778 24.237 0 43.886 19.648 43.886 43.886 0 11.575-4.48 22.102-11.803 29.944l0.023-0.026-234.058 234.058c-7.854 7.95-18.756 12.874-30.808 12.874-0.071 0-0.144 0-0.215 0h0.011z","M512 731.429c-24.106-0.325-43.561-19.78-43.886-43.854v-643.688c0-24.237 19.648-43.886 43.886-43.886s43.886 19.648 43.886 43.886v0 643.657c-0.325 24.106-19.78 43.561-43.854 43.886h-0.032z"],"attrs":[{},{},{}],"tags":["download","save","transfer","get","receive"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":113,"id":138,"name":"download","prevSize":24,"code":59734},"setIdx":0,"setId":1,"iconIdx":272},{"icon":{"paths":["M512 0c-282.769 0-512 229.231-512 512s229.231 512 512 512c282.769 0 512-229.231 512-512v0c0-282.769-229.231-512-512-512v0zM85.333 512c0-0.111 0-0.24 0-0.369 0-102.621 36.521-196.712 97.276-269.985l-0.565 0.701 599.609 599.609c-72.916 60.16-167.308 96.645-270.223 96.645-235.327 0-426.097-190.771-426.097-426.097 0-0.177 0-0.353 0-0.531v0.028zM841.956 781.653l-599.609-599.609c72.855-59.977 167.108-96.344 269.855-96.344 235.327 0 426.097 190.771 426.097 426.097 0 102.747-36.367 197-96.931 270.591l0.587-0.735z"],"attrs":[{}],"tags":["ban","block","stop","deny","prohibit"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":58,"id":139,"name":"ban","prevSize":24,"code":59701},"setIdx":0,"setId":1,"iconIdx":273},{"icon":{"paths":["M1021.85 393.483c-4.841-15.030-17.644-26.152-33.316-28.484l-0.227-0.028-303.002-44.165-135.848-274.491c-7.746-12.831-21.614-21.279-37.457-21.279s-29.71 8.447-37.346 21.083l-0.11 0.195-135.848 274.491-303.002 44.165c-15.899 2.36-28.701 13.481-33.462 28.219l-0.081 0.292c-1.397 4-2.204 8.612-2.204 13.413 0 11.571 4.687 22.048 12.267 29.634v0l220.265 213.556-51.991 301.885c-0.38 2.136-0.597 4.594-0.597 7.102 0 14.016 6.787 26.448 17.254 34.186l0.115 0.081c6.76 4.866 15.204 7.783 24.332 7.783 7.263 0 14.096-1.847 20.052-5.097l-0.219 0.11 270.579-142.557 271.137 142.557c5.647 3.156 12.387 5.020 19.564 5.031h0.004c9.211-0.109 17.721-3.021 24.742-7.922l-0.143 0.094c10.582-7.821 17.369-20.251 17.369-34.267 0-2.509-0.218-4.967-0.634-7.356l0.037 0.254-52.551-301.885 219.705-213.556c7.83-7.626 12.687-18.27 12.687-30.050 0-4.646-0.756-9.117-2.151-13.294l0.085 0.296z"],"attrs":[{}],"tags":["star-fill","favorite","rate","like","full-star"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":57,"id":140,"name":"star-fill","prevSize":24,"code":59702},"setIdx":0,"setId":1,"iconIdx":274},{"icon":{"paths":["M802.661 1001.092c-7.178-0.012-13.918-1.875-19.772-5.137l0.207 0.106-271.096-142.535-271.096 142.535c-5.737 3.14-12.567 4.986-19.829 4.986-9.126 0-17.571-2.916-24.452-7.867l0.124 0.085c-10.58-7.82-17.366-20.248-17.366-34.262 0-2.509 0.217-4.966 0.634-7.355l-0.037 0.254 52.543-301.84-220.232-213.524c-7.577-7.585-12.265-18.059-12.265-29.629 0-4.8 0.807-9.412 2.291-13.706l-0.089 0.295c4.841-15.028 17.641-26.148 33.311-28.48l0.227-0.028 302.957-44.158 135.828-274.45c7.745-12.829 21.611-21.276 37.451-21.276s29.706 8.446 37.341 21.080l0.11 0.195 135.828 274.45 302.957 44.158c15.896 2.359 28.697 13.479 33.457 28.215l0.081 0.292c1.397 4 2.204 8.611 2.204 13.411 0 11.569-4.686 22.045-12.265 29.63v0l-220.232 213.524 51.984 301.84c0.38 2.135 0.597 4.593 0.597 7.101 0 14.014-6.786 26.444-17.251 34.181l-0.115 0.081c-6.725 4.703-15.021 7.598-23.979 7.824l-0.056 0.001zM512 764.651c7.119 0.088 13.834 1.727 19.85 4.594l-0.287-0.123 215.201 111.792-40.805-239.795c-0.368-2.129-0.579-4.58-0.579-7.081 0-11.813 4.698-22.528 12.328-30.38l-0.010 0.010 174.396-167.689-240.912-35.774c-13.783-2.252-25.168-10.868-31.19-22.677l-0.111-0.241-107.88-217.995-107.88 218.555c-6.135 12.049-17.52 20.666-31.056 22.884l-0.246 0.033-240.912 35.215 174.396 167.689c7.619 7.842 12.317 18.557 12.317 30.37 0 2.501-0.211 4.952-0.614 7.338l0.035-0.257-40.805 241.472 215.201-111.792c5.628-3.296 12.279-5.497 19.381-6.135l0.183-0.013z"],"attrs":[{}],"tags":["star","favorite","rate","like","highlight"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":56,"id":141,"name":"star","prevSize":24,"code":59703},"setIdx":0,"setId":1,"iconIdx":275},{"icon":{"paths":["M679.213 992.738c-0.086 0-0.19 0-0.292 0-17.22 0-32.796-7.035-44.013-18.388l-418.039-418.039c-11.33-11.344-18.339-27.010-18.339-44.311s7.007-32.967 18.339-44.313v0l418.033-418.033c11.167-10.427 26.211-16.828 42.747-16.828 34.631 0 62.705 28.074 62.705 62.705 0 16.538-6.402 31.58-16.864 42.785l0.034-0.037-373.722 373.722 373.722 373.722c11.33 11.344 18.339 27.010 18.339 44.311s-7.007 32.967-18.339 44.313v0c-11.222 11.36-26.798 18.394-44.019 18.394-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-left","backward","previous","return","left"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":16,"id":142,"name":"chevron-left","prevSize":24,"code":59648},"setIdx":0,"setId":1,"iconIdx":276},{"icon":{"paths":["M344.779 992.761c-0.086 0-0.19 0-0.292 0-17.221 0-32.798-7.035-44.016-18.389l-0.006-0.006c-11.331-11.345-18.34-27.011-18.34-44.313s7.008-32.969 18.34-44.315v0l373.739-373.739-373.739-373.739c-10.427-11.167-16.829-26.212-16.829-42.749 0-34.632 28.075-62.708 62.708-62.708 16.539 0 31.582 6.402 42.787 16.865l-0.037-0.034 418.053 418.053c11.331 11.345 18.34 27.011 18.34 44.313s-7.008 32.969-18.34 44.315v0l-418.053 418.053c-11.223 11.36-26.8 18.395-44.021 18.395-0.102 0-0.205 0-0.307 0h0.016z"],"attrs":[{}],"tags":["chevron-right","forward","next","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":17,"id":143,"name":"chevron-right","prevSize":24,"code":59649},"setIdx":0,"setId":1,"iconIdx":277},{"icon":{"paths":["M512 774.266c-0.084 0-0.183 0-0.282 0-16.621 0-31.655-6.79-42.481-17.748l-403.49-403.49c-6.608-9.557-10.557-21.395-10.557-34.153 0-33.426 27.098-60.522 60.522-60.522 13.37 0 25.728 4.335 35.742 11.677l-0.17-0.119 360.715 358.295 360.715-358.295c9.294-6.106 20.686-9.741 32.927-9.741 33.426 0 60.522 27.098 60.522 60.522 0 11.002-2.935 21.318-8.065 30.207l0.155-0.294-403.485 403.485c-10.561 11.928-25.717 19.583-42.668 20.171l-0.102 0.002z"],"attrs":[{}],"tags":["chevron-down","down","fall","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":18,"id":144,"name":"chevron-down","prevSize":24,"code":59650},"setIdx":0,"setId":1,"iconIdx":278},{"icon":{"paths":["M912.529 772.345c-0.083 0-0.182 0-0.279 0-16.5 0-31.424-6.74-42.17-17.619l-358.079-358.079-358.074 355.671c-9.226 6.061-20.534 9.669-32.685 9.669-33.181 0-60.080-26.899-60.080-60.080 0-10.921 2.914-21.161 8.005-29.985l-0.154 0.291 400.529-400.529c10.869-10.856 25.879-17.571 42.456-17.571s31.587 6.714 42.457 17.571v0l400.529 400.529c10.856 10.869 17.571 25.879 17.571 42.456s-6.714 31.587-17.571 42.457v0c-10.467 9.481-24.421 15.283-39.728 15.283-0.96 0-1.913-0.022-2.862-0.068l0.134 0.005z"],"attrs":[{}],"tags":["chevron-up","up","increase","rise","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":19,"id":145,"name":"chevron-up","prevSize":24,"code":59651},"setIdx":0,"setId":1,"iconIdx":279},{"icon":{"paths":["M777.445 959.937c-0.065 0-0.144 0-0.22 0-11.19 0-21.502-3.743-29.759-10.044l0.119 0.088-530.888-398.166c-12.143-9.177-19.908-23.59-19.908-39.817s7.765-30.639 19.784-39.726l0.124-0.091 530.888-398.166c8.229-6.251 18.645-10.014 29.941-10.014 8.203 0 15.94 1.984 22.762 5.498l-0.278-0.131c16.203 8.535 27.088 25.214 27.208 44.445v796.35c-0.121 19.249-11.006 35.927-26.932 44.329l-0.275 0.133c-6.602 3.186-14.334 5.125-22.5 5.309l-0.063 0.002zM329.508 512l398.166 298.625v-597.249z"],"attrs":[{}],"tags":["caret-left","previous","backward","left","return"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":20,"id":146,"name":"caret-left","prevSize":24,"code":59652},"setIdx":0,"setId":1,"iconIdx":280},{"icon":{"paths":["M246.514 960.008c-8.001-0.105-15.52-2.052-22.189-5.441l0.287 0.133c-16.574-8.253-27.783-25.040-27.876-44.458v-796.469c0.092-19.426 11.302-36.213 27.587-44.339l0.287-0.132c6.449-3.33 14.077-5.284 22.158-5.284 11.175 0 21.478 3.731 29.729 10.017l-0.119-0.089 530.972 398.228c12.145 9.177 19.912 23.594 19.912 39.823s-7.766 30.645-19.789 39.733l-0.124 0.091-530.972 398.228c-8.14 6.214-18.456 9.957-29.645 9.957-0.077 0-0.156 0-0.232 0h0.012zM296.292 213.328v597.343l398.228-298.672z"],"attrs":[{}],"tags":["caret-right","next","forward","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":21,"id":147,"name":"caret-right","prevSize":24,"code":59653},"setIdx":0,"setId":1,"iconIdx":281},{"icon":{"paths":["M512 808.242c-0.092 0-0.203 0.002-0.311 0.002-15.157 0-28.607-7.307-37.020-18.589l-0.088-0.122-374.2-498.935c-5.874-7.735-9.411-17.522-9.411-28.14 0-7.708 1.865-14.982 5.168-21.391l-0.124 0.263c8.022-15.226 23.696-25.457 41.77-25.57h748.419c18.091 0.116 33.765 10.344 41.662 25.311l0.125 0.259c3.18 6.151 5.044 13.42 5.044 21.131 0 10.614-3.536 20.406-9.494 28.255l0.085-0.116-374.2 498.935c-8.503 11.404-21.951 18.712-37.108 18.712-0.109 0-0.218 0-0.329-0.002h0.017zM231.349 309.307l280.651 374.2 280.651-374.2z"],"attrs":[{}],"tags":["caret-down","collapse","down","fall","decrease"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":22,"id":148,"name":"caret-down","prevSize":24,"code":59654},"setIdx":0,"setId":1,"iconIdx":282},{"icon":{"paths":["M886.087 808.153h-748.175c-18.084-0.115-33.754-10.339-41.649-25.303l-0.125-0.259c-3.18-6.148-5.042-13.416-5.042-21.125 0-10.612 3.535-20.4 9.492-28.247l-0.085 0.116 374.087-498.782c8.871-10.966 22.328-17.919 37.409-17.919s28.537 6.953 37.338 17.828l0.069 0.090 374.087 498.782c5.874 7.732 9.407 17.518 9.407 28.131 0 7.706-1.864 14.977-5.165 21.386l0.123-0.262c-8.019 15.222-23.689 25.45-41.757 25.562h-0.016zM231.436 714.631h561.131l-280.564-374.087z"],"attrs":[{}],"tags":["caret-up","expand","up","rise","increase"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":23,"id":149,"name":"caret-up","prevSize":24,"code":59655},"setIdx":0,"setId":1,"iconIdx":283},{"icon":{"paths":["M440.071 880.415c-243.195 0-440.344-197.149-440.344-440.344s197.149-440.344 440.344-440.344c243.195 0 440.344 197.149 440.344 440.344v0c0 243.195-197.149 440.344-440.344 440.344v0zM440.071 88.031c-193.781 0-350.872 157.090-350.872 350.872s157.090 350.872 350.872 350.872c193.781 0 350.872-157.090 350.872-350.872v0c0-193.781-157.090-350.872-350.872-350.872v0z","M979.828 1023.687c-0.060 0-0.133 0-0.204 0-12.045 0-22.94-4.92-30.785-12.862l-241.52-241.52c-7.293-7.811-11.771-18.333-11.771-29.899 0-24.222 19.636-43.859 43.859-43.859 11.568 0 22.088 4.478 29.926 11.795l-0.026-0.023 241.516 241.516c7.925 7.934 12.827 18.892 12.827 30.993s-4.901 23.059-12.827 30.995v0c-7.849 7.945-18.744 12.866-30.789 12.866-0.071 0-0.144 0-0.215 0h0.011z"],"attrs":[{},{}],"tags":["search","find","query","lookup","discover"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":24,"id":150,"name":"search","prevSize":24,"code":59656},"setIdx":0,"setId":1,"iconIdx":284},{"icon":{"paths":["M367.973 877.709c-12.364-0.429-23.354-5.979-30.973-14.583l-0.039-0.045-292.569-292.569c-12.118-7.943-20.011-21.462-20.011-36.822 0-24.237 19.649-43.886 43.886-43.886 16.258 0 30.454 8.843 38.038 21.983l0.112 0.213 261.556 259.802 612.637-610.884c6.739-4.429 14.999-7.063 23.874-7.063 24.237 0 43.886 19.649 43.886 43.886 0 7.977-2.129 15.457-5.848 21.903l0.112-0.213-643.651 643.651c-7.658 8.649-18.646 14.2-30.94 14.626l-0.073 0.001z"],"attrs":[{}],"tags":["check","done","complete","ok","approve"],"grid":16,"isMulticolor":false,"isMulticolor2":false,"width":1088},"attrs":[{}],"properties":{"order":25,"id":151,"name":"check","prevSize":24,"code":59657},"setIdx":0,"setId":1,"iconIdx":285},{"icon":{"paths":["M426.842 696.51c-11.361-0.894-21.337-6.182-28.346-14.147l-0.040-0.047-170.317-170.317c-2.623-5.368-4.157-11.68-4.157-18.35 0-23.516 19.064-42.579 42.579-42.579 6.67 0 12.983 1.534 18.603 4.269l-0.253-0.11 140.228 140.228 484.268-480.861c5.368-2.623 11.68-4.157 18.35-4.157 23.516 0 42.579 19.064 42.579 42.579 0 6.67-1.534 12.983-4.269 18.603l0.11-0.253-510.95 510.95c-7.048 8.010-17.025 13.299-28.241 14.184l-0.146 0.009z","M512 1022.95c-191.476-0.317-358.217-105.908-445.47-261.972l-1.328-2.587c-31.938-55.832-53.595-121.525-60.581-191.54l-0.166-2.053c-1.75-15.87-2.746-34.274-2.746-52.91 0-191.528 105.381-358.444 261.324-445.927l2.575-1.327c55.832-31.938 121.525-53.595 191.54-60.581l2.053-0.166c16.139-1.838 34.846-2.885 53.796-2.885 52.724 0 103.554 8.111 151.308 23.156l-3.563-0.969c19.66 4.032 34.236 21.19 34.236 41.754 0 23.516-19.064 42.579-42.579 42.579-5.793 0-11.317-1.158-16.352-3.253l0.282 0.104c-37.278-11.625-80.141-18.322-124.567-18.322-16.116 0-32.026 0.881-47.685 2.599l1.933-0.172c-60.018 6.3-114.675 24.271-163.354 51.622l2.121-1.095c-49.065 27.393-90.495 62.305-124.293 103.695l-0.607 0.765c-59.499 72.093-95.584 165.431-95.584 267.195 0 16.071 0.899 31.933 2.652 47.536l-0.174-1.916c6.3 60.018 24.271 114.675 51.622 163.354l-1.095-2.121c27.393 49.065 62.305 90.495 103.695 124.293l0.765 0.607c72.093 59.499 165.431 95.584 267.195 95.584 16.071 0 31.933-0.899 47.536-2.652l-1.916 0.174c60.018-6.3 114.675-24.271 163.354-51.622l-2.121 1.095c49.065-27.393 90.495-62.305 124.293-103.695l0.607-0.765c59.499-72.093 95.584-165.431 95.584-267.195 0-16.071-0.899-31.933-2.652-47.536l0.174 1.916c-0.129-1.276-0.204-2.758-0.204-4.258 0-24.725 20.044-44.769 44.769-44.769 23.226 0 42.321 17.686 44.551 40.326l0.015 0.185c1.73 15.781 2.716 34.082 2.716 52.613 0 191.743-105.619 358.82-261.851 446.222l-2.584 1.328c-56.511 33.262-123.144 55.912-194.296 63.403l-2.137 0.182c-17.6 0-35.767 0-52.798 0z"],"attrs":[{},{}],"tags":["check-circle","done","complete","ok","approve"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":26,"id":152,"name":"check-circle","prevSize":24,"code":59658},"setIdx":0,"setId":1,"iconIdx":286},{"icon":{"paths":["M586.932 512l312.455-312.455c10.394-9.708 16.875-23.488 16.875-38.79 0-29.283-23.737-53.020-53.020-53.020-15.299 0-29.084 6.481-38.759 16.841l-0.027 0.029-312.455 312.455-312.455-312.455c-9.444-8.816-22.161-14.228-36.145-14.228-29.283 0-53.020 23.737-53.020 53.020 0 13.985 5.412 26.701 14.261 36.174l-0.027-0.029 312.455 312.455-312.455 312.455c-9.582 9.589-15.504 22.839-15.504 37.468s5.926 27.874 15.504 37.469v0c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0l312.455-312.455 312.455 312.455c9.589 9.582 22.839 15.504 37.468 15.504s27.874-5.926 37.469-15.504v0c9.582-9.589 15.504-22.839 15.504-37.468s-5.926-27.874-15.504-37.469v0z"],"attrs":[{}],"tags":["times","close","cancel","delete","remove"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":265,"id":153,"name":"times","prevSize":24,"code":59659},"setIdx":0,"setId":1,"iconIdx":287},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M341.333 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l341.333-341.333c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-341.333 341.333c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M682.667 725.333c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-341.337-341.337c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 341.333 341.333c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z"],"attrs":[{},{},{}],"tags":["times-circle","close","cancel","delete","times"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":28,"id":154,"name":"times-circle","prevSize":24,"code":59660},"setIdx":0,"setId":1,"iconIdx":288},{"icon":{"paths":["M559.485 464.515v-395.695c0-26.223-21.257-47.485-47.485-47.485s-47.485 21.257-47.485 47.485v0 395.695h-395.695c-26.223 0-47.485 21.257-47.485 47.485s21.257 47.485 47.485 47.485v0h395.695v395.695c0.352 26.082 21.403 47.133 47.447 47.485h0.033c26.223 0 47.485-21.257 47.485-47.485v0-395.695h395.695c26.223 0 47.485-21.257 47.485-47.485v0c-0.352-26.082-21.403-47.133-47.447-47.485h-0.033z"],"attrs":[{}],"tags":["plus","add","increase","more","extra"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":35,"id":155,"name":"plus","prevSize":24,"code":59661},"setIdx":0,"setId":1,"iconIdx":289},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["plus-circle","add","increase","plus","more"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":36,"id":156,"name":"plus-circle","prevSize":24,"code":59662},"setIdx":0,"setId":1,"iconIdx":290},{"icon":{"paths":["M967.085 568.886h-910.171c-31.417 0-56.886-25.469-56.886-56.886s25.469-56.886 56.886-56.886v0h910.171c31.417 0 56.886 25.469 56.886 56.886s-25.469 56.886-56.886 56.886v0z"],"attrs":[{}],"tags":["minus","remove","subtract","decrease","less"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":41,"id":157,"name":"minus","prevSize":24,"code":59663},"setIdx":0,"setId":1,"iconIdx":291},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{}],"tags":["minus-circle","remove","subtract","decrease","minus"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":42,"id":158,"name":"minus-circle","prevSize":24,"code":59664},"setIdx":0,"setId":1,"iconIdx":292},{"icon":{"paths":["M1024 512c0 282.769-229.231 512-512 512s-512-229.231-512-512c0-282.769 229.231-512 512-512s512 229.231 512 512z"],"attrs":[{}],"tags":["circle-on","deprecate","on","enable","active","start"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":47,"id":159,"name":"circle-on","prevSize":24,"code":59665},"setIdx":0,"setId":1,"iconIdx":293},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{}],"tags":["circle-off","deprecate","off","disable","inactive","stop"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":48,"id":160,"name":"circle-off","prevSize":24,"code":59666},"setIdx":0,"setId":1,"iconIdx":294},{"icon":{"paths":["M512 761.297c-0.059 0-0.133 0-0.206 0-12.080 0-23.010-4.935-30.879-12.901l-410.613-410.613c-7.95-7.958-12.867-18.951-12.867-31.089 0-24.283 19.676-43.971 43.952-43.993h821.216c23.565 0.924 42.321 20.252 42.321 43.961 0 11.301-4.262 21.608-11.268 29.401l0.035-0.040-410.607 410.607c-7.678 8.671-18.694 14.235-31.015 14.662l-0.074 0.003zM207.563 350.691l304.437 304.437 304.437-304.437z"],"attrs":[{}],"tags":["sort-down","descending","down","decrease","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":51,"id":161,"name":"sort-down","prevSize":24,"code":59667},"setIdx":0,"setId":1,"iconIdx":295},{"icon":{"paths":["M921.888 760.859h-819.773c-0.088 0-0.19 0.002-0.294 0.002-18.019 0-33.47-11-40.004-26.651l-0.105-0.287c-1.856-4.68-2.932-10.103-2.932-15.777 0-11.845 4.689-22.595 12.313-30.495l409.875-409.875c7.945-7.935 18.917-12.844 31.034-12.844s23.089 4.908 31.035 12.844v0l409.888 409.888c7.91 7.94 12.801 18.896 12.801 30.993 0 6.145-1.262 11.997-3.542 17.308l0.108-0.285c-7.032 14.993-22.001 25.192-39.352 25.192-0.369 0-0.739-0.004-1.106-0.013l0.055 0.002zM208.099 673.027h607.804l-303.901-303.901z"],"attrs":[{}],"tags":["sort-up","ascending","up","increase","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":52,"id":162,"name":"sort-up","prevSize":24,"code":59668},"setIdx":0,"setId":1,"iconIdx":296},{"icon":{"paths":["M841.149 443.428h-658.298c-0.083 0-0.179 0.001-0.275 0.001-16.883 0-31.357-10.305-37.478-24.968l-0.099-0.269c-2.034-4.708-3.217-10.189-3.217-15.949 0-11.333 4.583-21.597 11.994-29.037l329.147-329.147c7.443-7.433 17.723-12.033 29.075-12.033s21.632 4.598 29.076 12.033v0l329.149 329.149c7.411 7.439 11.993 17.704 11.993 29.036 0 5.757-1.183 11.24-3.319 16.216l0.101-0.267c-6.22 14.932-20.695 25.236-37.577 25.236-0.097 0-0.193 0-0.29-0.001h0.015zM282.145 361.141h459.712l-229.855-229.855z","M512 992.009c-0.056 0-0.125 0-0.191 0-11.299 0-21.519-4.615-28.879-12.065l-329.153-329.153c-7.411-7.439-11.993-17.704-11.993-29.036 0-5.757 1.183-11.24 3.319-16.216l-0.101 0.267c6.22-14.932 20.695-25.236 37.577-25.236 0.097 0 0.193 0 0.29 0.001h658.283c0.083 0 0.179-0.001 0.275-0.001 16.883 0 31.357 10.305 37.478 24.968l0.099 0.269c2.034 4.708 3.217 10.189 3.217 15.949 0 11.333-4.583 21.597-11.994 29.037l-329.147 329.147c-7.363 7.453-17.584 12.068-28.883 12.068-0.067 0-0.135 0-0.202 0h0.010zM282.145 662.859l229.855 229.855 229.855-229.855z"],"attrs":[{},{}],"tags":["sort","order","sequence"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":54,"id":163,"name":"sort","prevSize":24,"code":59669},"setIdx":0,"setId":1,"iconIdx":297},{"icon":{"paths":["M776.253 1023.989c-13.652-0.164-25.983-5.679-35.022-14.542l-462.434-462.434c-8.953-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l462.442-462.442c8.959-8.925 21.319-14.443 34.966-14.443 6.933 0 13.536 1.424 19.529 3.996l-0.322-0.122c17.981 7.491 30.389 24.922 30.389 45.252 0 0.116 0 0.233-0.002 0.348v-0.019 924.882c0 0.099 0.002 0.215 0.002 0.331 0 20.33-12.41 37.761-30.067 45.132l-0.324 0.119c-5.648 2.471-12.229 3.927-19.143 3.964h-0.014zM383.839 512l342.867 342.867v-685.734z","M247.747 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.511 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-backward","back","previous","return","rewind"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":29,"id":164,"name":"step-backward","prevSize":24,"code":59670},"setIdx":0,"setId":1,"iconIdx":298},{"icon":{"paths":["M247.747 1023.989c-6.929-0.037-13.509-1.493-19.478-4.087l0.321 0.124c-17.981-7.491-30.389-24.922-30.389-45.252 0-0.116 0-0.231 0.002-0.348v0.019-924.882c0-0.099-0.002-0.215-0.002-0.331 0-20.33 12.41-37.761 30.067-45.132l0.324-0.119c5.67-2.449 12.271-3.874 19.206-3.874 13.649 0 26.007 5.518 34.967 14.444l462.441 462.441c8.953 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-462.442 462.442c-9.030 8.855-21.362 14.37-34.982 14.533h-0.031zM297.295 169.133v685.734l342.867-342.867z","M776.253 1023.989c-27.215-0.367-49.181-22.332-49.548-49.511v-924.917c0-27.364 22.183-49.548 49.548-49.548s49.548 22.183 49.548 49.548v0 924.882c-0.367 27.215-22.332 49.181-49.513 49.548h-0.036z"],"attrs":[{},{}],"tags":["step-forward","next","proceed","forward","advance"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":30,"id":165,"name":"step-forward","prevSize":24,"code":59671},"setIdx":0,"setId":1,"iconIdx":299},{"icon":{"paths":["M325.818 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M325.818 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM139.636 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 465.455h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 93.091c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z","M884.364 1024h-186.182c-77.119 0-139.636-62.518-139.636-139.636v0-186.182c0-77.119 62.518-139.636 139.636-139.636v0h186.182c77.119 0 139.636 62.518 139.636 139.636v0 186.182c0 77.119-62.518 139.636-139.636 139.636v0zM698.182 651.636c-25.567 0.345-46.201 20.979-46.545 46.512v186.215c0.345 25.567 20.979 46.201 46.512 46.545h186.215c25.567-0.345 46.201-20.979 46.545-46.512v-186.215c-0.345-25.567-20.979-46.201-46.512-46.545h-0.033z"],"attrs":[{},{},{},{}],"tags":["th-large","grid","layout","blocks","sections"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{},{}],"properties":{"order":34,"id":166,"name":"th-large","prevSize":24,"code":59672},"setIdx":0,"setId":1,"iconIdx":300},{"icon":{"paths":["M512 1023.983c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 361.361 361.361 361.361-361.361c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-down","download","decrease","down","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":37,"id":167,"name":"arrow-down","prevSize":24,"code":59673},"setIdx":0,"setId":1,"iconIdx":301},{"icon":{"paths":["M445.937 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-396.378-396.378c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l396.374-396.374c8.824-8.239 20.711-13.297 33.777-13.297 27.364 0 49.547 22.183 49.547 49.547 0 13.068-5.058 24.953-13.325 33.806l0.026-0.029-361.361 361.361 361.361 361.361c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-left","back","previous","left","return"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":40,"id":168,"name":"arrow-left","prevSize":24,"code":59674},"setIdx":0,"setId":1,"iconIdx":302},{"icon":{"paths":["M578.063 957.921c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-0.005-0.005c-8.952-8.963-14.491-21.342-14.491-35.013s5.537-26.049 14.491-35.014v0l361.361-361.361-361.361-361.361c-8.239-8.824-13.297-20.711-13.297-33.777 0-27.364 22.183-49.547 49.547-49.547 13.068 0 24.953 5.058 33.806 13.325l-0.029-0.026 396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0l-396.374 396.374c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M974.437 561.547h-924.872c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.872c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{}],"tags":["arrow-right","next","forward","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":43,"id":169,"name":"arrow-right","prevSize":24,"code":59675},"setIdx":0,"setId":1,"iconIdx":303},{"icon":{"paths":["M908.374 495.484c-0.068 0-0.15 0-0.231 0-13.607 0-25.914-5.559-34.777-14.53l-361.366-361.366-361.361 361.361c-8.824 8.239-20.711 13.297-33.777 13.297-27.364 0-49.547-22.183-49.547-49.547 0-13.068 5.058-24.953 13.325-33.806l-0.026 0.029 396.374-396.374c8.963-8.952 21.342-14.491 35.013-14.491s26.049 5.537 35.014 14.491v0l396.374 396.374c8.952 8.963 14.491 21.342 14.491 35.013s-5.537 26.049-14.491 35.014v0c-8.867 8.976-21.175 14.534-34.782 14.534-0.081 0-0.163 0-0.243 0h0.012z","M512 1023.983c-27.215-0.367-49.18-22.332-49.547-49.511v-924.907c0-27.364 22.183-49.547 49.547-49.547s49.547 22.183 49.547 49.547v0 924.872c-0.367 27.215-22.332 49.18-49.511 49.547h-0.036z"],"attrs":[{},{}],"tags":["arrow-up","upload","increase","up","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":216,"id":170,"name":"arrow-up","prevSize":24,"code":59676},"setIdx":0,"setId":1,"iconIdx":304},{"icon":{"paths":["M974.438 561.547h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 264.265h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z","M974.438 858.829h-924.874c-27.364 0-49.547-22.183-49.547-49.547s22.183-49.547 49.547-49.547v0h924.874c27.364 0 49.547 22.183 49.547 49.547s-22.183 49.547-49.547 49.547v0z"],"attrs":[{},{},{}],"tags":["bars","menu","options","list","categories","hamburger"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":215,"id":171,"name":"bars","prevSize":24,"code":59677},"setIdx":0,"setId":1,"iconIdx":305},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 197.404 197.404 197.404-197.404c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-down","download","decrease","down","lower"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":50,"id":172,"name":"arrow-circle-down","prevSize":24,"code":59678},"setIdx":0,"setId":1,"iconIdx":306},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-227.56-227.56c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l227.556-227.556c7.599-7.095 17.835-11.451 29.087-11.451 23.564 0 42.667 19.103 42.667 42.667 0 11.253-4.356 21.488-11.475 29.112l0.023-0.025-197.404 197.404 197.404 197.404c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-left","back","previous","left","return"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":53,"id":173,"name":"arrow-circle-left","prevSize":24,"code":59679},"setIdx":0,"setId":1,"iconIdx":307},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M512 782.223c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-0.004-0.004c-7.709-7.719-12.479-18.379-12.479-30.151s4.768-22.432 12.479-30.152v0l197.404-197.404-197.404-197.404c-7.095-7.599-11.451-17.835-11.451-29.087 0-23.564 19.103-42.667 42.667-42.667 11.253 0 21.488 4.356 29.112 11.475l-0.025-0.023 227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0l-227.556 227.556c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M739.556 554.667h-455.111c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h455.111c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z"],"attrs":[{},{},{}],"tags":["arrow-circle-right","next","forward","right","proceed"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":55,"id":174,"name":"arrow-circle-right","prevSize":24,"code":59680},"setIdx":0,"setId":1,"iconIdx":308},{"icon":{"paths":["M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z","M739.556 554.667c-0.059 0-0.129 0-0.199 0-11.717 0-22.316-4.787-29.948-12.512l-197.408-197.408-197.404 197.404c-7.599 7.095-17.835 11.451-29.087 11.451-23.564 0-42.667-19.103-42.667-42.667 0-11.253 4.356-21.488 11.475-29.112l-0.023 0.025 227.556-227.556c7.719-7.709 18.379-12.479 30.151-12.479s22.432 4.768 30.152 12.479v0l227.556 227.556c7.709 7.719 12.479 18.379 12.479 30.151s-4.768 22.432-12.479 30.152v0c-7.636 7.729-18.235 12.516-29.952 12.516-0.069 0-0.14 0-0.209 0h0.011z","M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-455.141c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 455.111c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z"],"attrs":[{},{},{}],"tags":["arrow-circle-up","upload","increase","up","elevate"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":31,"id":175,"name":"arrow-circle-up","prevSize":24,"code":59681},"setIdx":0,"setId":1,"iconIdx":309},{"icon":{"paths":["M512 1023.999c-36.682-0.495-66.288-30.1-66.783-66.735v-623.353c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 623.305c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z","M512 178.087c-36.682-0.495-66.288-30.1-66.783-66.735v-44.569c0-36.883 29.9-66.783 66.783-66.783s66.783 29.9 66.783 66.783v0 44.521c-0.495 36.682-30.1 66.288-66.735 66.783h-0.048z"],"attrs":[{},{}],"tags":["info","information","help","details"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":33,"id":176,"name":"info","prevSize":24,"code":59683},"setIdx":0,"setId":1,"iconIdx":310},{"icon":{"paths":["M512 782.223c-23.436-0.316-42.351-19.231-42.667-42.636v-284.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 284.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 355.556c-23.436-0.316-42.351-19.231-42.667-42.636v-28.475c0-23.564 19.103-42.667 42.667-42.667s42.667 19.103 42.667 42.667v0 28.444c-0.316 23.436-19.231 42.351-42.636 42.667h-0.031z","M512 1024c-282.769 0-512-229.231-512-512s229.231-512 512-512c282.769 0 512 229.231 512 512v0c0 282.769-229.231 512-512 512v0zM512 85.333c-235.641 0-426.667 191.025-426.667 426.667s191.025 426.667 426.667 426.667c235.641 0 426.667-191.025 426.667-426.667v0c0-235.641-191.025-426.667-426.667-426.667v0z"],"attrs":[{},{},{}],"tags":["info-circle","information","help","details"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":38,"id":177,"name":"info-circle","prevSize":24,"code":59684},"setIdx":0,"setId":1,"iconIdx":311},{"icon":{"paths":["M980.714 497.352c-0.058 0-0.126 0-0.195 0-9.879 0-18.984-3.304-26.275-8.867l0.106 0.077-442.349-331.615-442.349 331.615c-7.252 5.487-16.423 8.788-26.365 8.788-24.268 0-43.942-19.674-43.942-43.942 0-14.326 6.856-27.052 17.467-35.074l0.11-0.080 468.714-351.536c7.252-5.487 16.423-8.788 26.365-8.788s19.113 3.301 26.475 8.868l-0.11-0.080 468.714 351.536c9.942 8.121 16.239 20.379 16.239 34.109 0 9.129-2.783 17.608-7.548 24.634l0.099-0.154c-7.474 11.934-20.322 19.902-35.068 20.503l-0.085 0.003z","M863.536 966.067h-703.071c-24.136-0.325-43.617-19.805-43.942-43.91v-556.629c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 512.656h615.187v-512.656c0-24.268 19.674-43.942 43.942-43.942s43.942 19.674 43.942 43.942v0 556.598c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z","M629.178 966.067c-24.136-0.325-43.617-19.805-43.942-43.91v-366.215h-146.474v366.183c0 24.268-19.674 43.942-43.942 43.942s-43.942-19.674-43.942-43.942v0-410.125c0.325-24.136 19.805-43.617 43.91-43.942h234.389c24.136 0.325 43.617 19.805 43.942 43.91v410.157c-0.325 24.136-19.805 43.617-43.91 43.942h-0.032z"],"attrs":[{},{},{}],"tags":["home","house","homepage","shelter","building"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{},{}],"properties":{"order":214,"id":178,"name":"home","prevSize":24,"code":59685},"setIdx":0,"setId":1,"iconIdx":312},{"icon":{"paths":["M512 1023.985c-282.573-0.249-511.548-229.377-511.548-511.985 0-282.761 229.224-511.985 511.985-511.985 136.039 0 259.684 53.057 351.374 139.607l-0.248-0.232c7.709 7.718 12.478 18.378 12.478 30.15s-4.768 22.431-12.478 30.151v0c-7.654 7.849-18.334 12.718-30.15 12.718s-22.495-4.869-30.142-12.709l-0.008-0.009c-76.159-71.371-178.876-115.207-291.832-115.207-235.949 0-427.224 191.274-427.224 427.224s191.274 427.224 427.224 427.224c235.845 0 427.056-191.106 427.224-426.913v-0.016c0-23.563 19.102-42.665 42.665-42.665s42.665 19.102 42.665 42.665v0c0 282.761-229.224 511.985-511.985 511.985v0z"],"attrs":[{}],"tags":["spinner","loading","process","wait","buffering"],"grid":16,"isMulticolor":false,"isMulticolor2":false},"attrs":[{}],"properties":{"order":44,"id":179,"name":"spinner","prevSize":24,"code":59686},"setIdx":0,"setId":1,"iconIdx":313}],"height":1024,"metadata":{"name":"primeicons","url":"https://github.com/primefaces/primeicons","designer":"","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"pi-","metadata":{"fontFamily":"primeicons","majorVersion":1,"minorVersion":0,"copyright":"PrimeTek Informatics","designer":"","description":"Icon Library for Prime UI Libraries","fontURL":"https://github.com/primefaces/primeicons","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"includeMetadata":true},"imagePref":{"prefix":"pi-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","height":32,"columns":16,"margin":16,"name":"icomoon"},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"PrimeIcons":"ZDFmZGNjZmE5MSMxNzEwOTQzNzg1I0JySHZZUUtzUlV1Q2VTVXdnaUg1TFpNTjRaRllSMW1CM2JVd3M0SXIxRVlY"},"showGrid":true}}
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
index a614a31e44..718d6fea48 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/images/architecture.jpg b/public/images/architecture.jpg
new file mode 100644
index 0000000000..a5d7c1e546
Binary files /dev/null and b/public/images/architecture.jpg differ
diff --git a/public/showcase/resources/demo/images/avatar/amyelsner.png b/public/images/avatar/amyelsner.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/amyelsner.png
rename to public/images/avatar/amyelsner.png
diff --git a/public/showcase/resources/demo/images/avatar/annafali.png b/public/images/avatar/annafali.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/annafali.png
rename to public/images/avatar/annafali.png
diff --git a/public/showcase/resources/demo/images/avatar/asiyajavayant.png b/public/images/avatar/asiyajavayant.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/asiyajavayant.png
rename to public/images/avatar/asiyajavayant.png
diff --git a/public/showcase/resources/demo/images/avatar/bernardodominic.png b/public/images/avatar/bernardodominic.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/bernardodominic.png
rename to public/images/avatar/bernardodominic.png
diff --git a/public/showcase/resources/demo/images/avatar/elwinsharvill.png b/public/images/avatar/elwinsharvill.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/elwinsharvill.png
rename to public/images/avatar/elwinsharvill.png
diff --git a/public/showcase/resources/demo/images/avatar/ionibowcher.png b/public/images/avatar/ionibowcher.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/ionibowcher.png
rename to public/images/avatar/ionibowcher.png
diff --git a/public/showcase/resources/demo/images/avatar/ivanmagalhaes.png b/public/images/avatar/ivanmagalhaes.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/ivanmagalhaes.png
rename to public/images/avatar/ivanmagalhaes.png
diff --git a/public/showcase/resources/demo/images/avatar/onyamalimba.png b/public/images/avatar/onyamalimba.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/onyamalimba.png
rename to public/images/avatar/onyamalimba.png
diff --git a/public/showcase/resources/demo/images/avatar/stephenshaw.png b/public/images/avatar/stephenshaw.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/stephenshaw.png
rename to public/images/avatar/stephenshaw.png
diff --git a/public/showcase/resources/demo/images/avatar/xuxuefeng.png b/public/images/avatar/xuxuefeng.png
similarity index 100%
rename from public/showcase/resources/demo/images/avatar/xuxuefeng.png
rename to public/images/avatar/xuxuefeng.png
diff --git a/public/images/banner-primeblocks-dark.png b/public/images/banner-primeblocks-dark.png
new file mode 100644
index 0000000000..21bb88e0ff
Binary files /dev/null and b/public/images/banner-primeblocks-dark.png differ
diff --git a/public/images/banner-primeblocks.png b/public/images/banner-primeblocks.png
new file mode 100644
index 0000000000..5304b4bc4c
Binary files /dev/null and b/public/images/banner-primeblocks.png differ
diff --git a/public/images/banner-primeflex-dark.svg b/public/images/banner-primeflex-dark.svg
new file mode 100644
index 0000000000..97bf81432a
--- /dev/null
+++ b/public/images/banner-primeflex-dark.svg
@@ -0,0 +1,181 @@
+<svg width="211" height="115" viewBox="0 0 211 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="211" height="115" rx="3" fill="url(#paint0_linear)" fill-opacity="0.1"/>
+<rect width="211" height="115" rx="3" fill="url(#paint1_radial)" fill-opacity="0.05"/>
+<rect width="211" height="115" rx="3" fill="url(#paint2_linear)" fill-opacity="0.15"/>
+<rect width="211" height="115" rx="3" fill="url(#paint3_linear)" fill-opacity="0.07"/>
+<path d="M128.073 24C128.263 24 128.349 23.895 128.349 23.72V19.31H130.421C132.045 19.31 132.908 18.4175 132.908 16.79V12.52C132.908 10.875 132.045 10 130.421 10H126.276C126.104 10 126 10.105 126 10.28V23.72C126 23.895 126.104 24 126.276 24H128.073ZM129.869 17H128.349V12.31H129.869C130.335 12.31 130.56 12.555 130.56 13.01V16.3C130.56 16.7375 130.335 17 129.869 17ZM136.708 24C136.881 24 136.984 23.895 136.984 23.72V19.31H138.176L139.333 23.755C139.368 23.9125 139.454 24 139.627 24H141.423C141.613 24 141.717 23.895 141.665 23.685L140.473 19.1C141.302 18.7325 141.734 17.9625 141.734 16.79V12.52C141.734 10.875 140.87 10 139.247 10H134.912C134.739 10 134.636 10.105 134.636 10.28V23.72C134.636 23.895 134.739 24 134.912 24H136.708ZM138.694 17H136.984V12.31H138.694C139.143 12.31 139.385 12.555 139.385 13.01V16.3C139.385 16.755 139.143 17 138.694 17ZM145.534 24C145.706 24 145.81 23.895 145.81 23.72V10.28C145.81 10.105 145.706 10 145.534 10H143.737C143.547 10 143.461 10.105 143.461 10.28V23.72C143.461 23.895 143.547 24 143.737 24H145.534ZM149.472 24C149.696 24 149.817 23.8775 149.817 23.65V15.775H149.938L151.648 23.685C151.699 23.895 151.82 24 152.028 24H152.874C153.081 24 153.202 23.895 153.254 23.685L154.964 15.775H155.085V23.65C155.085 23.8775 155.206 24 155.43 24H157.036C157.261 24 157.382 23.8775 157.382 23.65V10.35C157.382 10.1225 157.261 10 157.036 10H154.756C154.549 10 154.428 10.105 154.377 10.315L152.459 19.03L150.542 10.315C150.491 10.105 150.37 10 150.162 10H147.883C147.658 10 147.537 10.1225 147.537 10.35V23.65C147.537 23.8775 147.658 24 147.883 24H149.472ZM165.724 24C165.931 24 166 23.895 166 23.72V21.97C166 21.7775 165.931 21.69 165.724 21.69H161.406V18.155H164.705C164.877 18.155 164.981 18.05 164.981 17.8575V16.125C164.981 15.9325 164.877 15.8275 164.705 15.8275H161.406V12.3275H165.724C165.931 12.3275 166 12.205 166 12.03V10.28C166 10.105 165.931 10 165.724 10H159.368C159.212 10 159.109 10.105 159.109 10.28V23.72C159.109 23.895 159.212 24 159.368 24H165.724Z" fill="white" fill-opacity="0.87"/>
+<path d="M170.044 24C170.214 24 170.316 23.895 170.316 23.72V18.1375H173.519C173.689 18.1375 173.791 18.05 173.791 17.8575V16.1075C173.791 15.9325 173.689 15.8275 173.519 15.8275H170.316V12.31H174.541C174.711 12.31 174.813 12.205 174.813 12.03V10.28C174.813 10.105 174.711 10 174.541 10H168.273C168.085 10 168 10.105 168 10.28V23.72C168 23.895 168.085 24 168.273 24H170.044ZM182.887 24C183.074 24 183.159 23.9125 183.159 23.72V21.97C183.159 21.795 183.074 21.69 182.887 21.69H178.833V10.28C178.833 10.105 178.748 10 178.56 10H176.789C176.619 10 176.516 10.105 176.516 10.28V23.72C176.516 23.9125 176.619 24 176.789 24H182.887ZM191.386 24C191.59 24 191.658 23.895 191.658 23.72V21.97C191.658 21.7775 191.59 21.69 191.386 21.69H187.128V18.155H190.381C190.551 18.155 190.653 18.05 190.653 17.8575V16.125C190.653 15.9325 190.551 15.8275 190.381 15.8275H187.128V12.3275H191.386C191.59 12.3275 191.658 12.205 191.658 12.03V10.28C191.658 10.105 191.59 10 191.386 10H185.118C184.965 10 184.862 10.105 184.862 10.28V23.72C184.862 23.895 184.965 24 185.118 24H191.386ZM194.895 24C195.082 24 195.218 23.93 195.286 23.755L196.921 19.52L198.557 23.755C198.625 23.93 198.761 24 198.948 24H200.703C200.975 24 201.06 23.825 200.958 23.58L198.25 16.86L200.856 10.42C200.958 10.175 200.873 10 200.601 10H198.897C198.71 10 198.574 10.07 198.505 10.245L196.921 14.3925L195.337 10.245C195.269 10.07 195.133 10 194.946 10H193.242C192.97 10 192.885 10.175 192.987 10.42L195.576 16.86L192.885 23.58C192.783 23.825 192.868 24 193.14 24H194.895Z" fill="#0078E3"/>
+<g opacity="0.1">
+<line x1="138" y1="29.8333" x2="138" y2="112.5" stroke="#383A48" stroke-width="4" stroke-linecap="round"/>
+<line x1="138" y1="-13" x2="138" y2="4.66667" stroke="#383A48" stroke-width="4" stroke-linecap="round"/>
+<line x1="179" y1="38.3333" x2="179" y2="177.333" stroke="#383A48" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M177.408 153.535L91.5667 103.972C90.3627 103.277 89.3843 101.426 89.3843 99.8038V33.4002C89.3843 31.7961 90.3591 31.0577 91.5667 31.7525L177.408 81.3151C178.612 82.0099 179.591 83.8613 179.591 85.4799V151.887C179.591 153.491 178.605 154.23 177.408 153.535Z" fill="#B1B4C4"/>
+<path d="M89.2207 32.1635L90.1591 31.6215L91.505 32.389C91.505 32.389 90.0718 32.6072 90.05 32.6C90.0282 32.5927 89.2207 32.1635 89.2207 32.1635Z" fill="#B1B4C4"/>
+<path d="M176.616 153.99L90.7742 104.427C89.5702 103.732 88.5918 101.881 88.5918 100.259V33.8549C88.5918 32.2508 89.5702 31.5124 90.7742 32.2072L176.616 81.7698C177.82 82.4646 178.798 84.316 178.798 85.9346V152.342C178.795 153.946 177.82 154.684 176.616 153.99Z" fill="#E4E7F2"/>
+<path d="M176.463 154.073L90.6214 104.511C89.4174 103.816 88.439 101.964 88.439 100.346V33.9422C88.439 32.3382 89.4138 31.5998 90.6214 32.2945L176.463 81.8572C177.667 82.5519 178.645 84.4033 178.645 86.0219V152.426C178.645 154.041 177.667 154.768 176.463 154.073Z" fill="#D6D8E5"/>
+<path d="M177.463 150.039L89.5264 99.2691L89.5737 34.2077C89.5737 33.542 90.0429 33.2729 90.6176 33.6039L176.459 83.1665C176.764 83.3658 177.018 83.6345 177.2 83.9506C177.381 84.2666 177.485 84.6212 177.503 84.9852L177.463 150.039Z" fill="white"/>
+<path d="M172.018 93.4784L94.0694 48.477C93.7994 48.2834 93.5785 48.0292 93.4244 47.7349C93.2703 47.4406 93.1872 47.1142 93.1819 46.782V41.155C93.1819 40.5039 93.5784 40.202 94.0694 40.4858L172.018 85.4872C172.288 85.6811 172.51 85.9359 172.664 86.2309C172.818 86.5259 172.901 86.853 172.906 87.1858V92.8092C172.906 93.4639 172.509 93.7622 172.018 93.4784Z" fill="#E9EAF2"/>
+<path d="M167.952 108.541L149.63 97.9633C149.36 97.7697 149.139 97.5156 148.985 97.2212C148.831 96.9269 148.748 96.6005 148.743 96.2683V84.4433C148.743 83.7886 149.139 83.4903 149.63 83.774L167.952 94.3514C168.222 94.5447 168.443 94.7987 168.597 95.0932C168.752 95.3876 168.834 95.7141 168.839 96.0464V107.872C168.825 108.523 168.428 108.824 167.952 108.541Z" fill="#E9EAF2"/>
+<path d="M143.803 112.382L97.8412 85.8292C97.7057 85.7329 97.5949 85.6059 97.5177 85.4586C97.4406 85.3113 97.3994 85.1479 97.3975 84.9817V82.9484C97.3975 82.621 97.5939 82.4682 97.8412 82.6101L143.803 109.163C143.938 109.26 144.048 109.387 144.125 109.534C144.202 109.681 144.244 109.844 144.247 110.01V112.047C144.247 112.371 144.047 112.524 143.803 112.382Z" fill="#E9EAF2"/>
+<path d="M139.278 114.586L97.9721 90.7504C97.8374 90.6533 97.7272 90.5261 97.6501 90.379C97.5731 90.2319 97.5314 90.0689 97.5283 89.9029V88.8881C97.5283 88.5607 97.7284 88.4116 97.9721 88.5534L139.278 112.4C139.413 112.497 139.523 112.624 139.6 112.771C139.677 112.918 139.719 113.081 139.722 113.247V114.259C139.722 114.575 139.522 114.728 139.278 114.586Z" fill="#E9EAF2"/>
+<path d="M139.278 118.427L97.9721 94.5806C97.8372 94.4837 97.7268 94.3566 97.6498 94.2094C97.5727 94.0623 97.5311 93.8991 97.5283 93.7331V92.7182C97.5283 92.3945 97.7284 92.2417 97.9721 92.3836L139.278 116.23C139.413 116.327 139.523 116.454 139.6 116.601C139.677 116.748 139.719 116.912 139.722 117.078V118.092C139.722 118.42 139.522 118.569 139.278 118.427Z" fill="#E9EAF2"/>
+<path d="M128.719 116.172L97.9721 98.4217C97.8372 98.3248 97.7268 98.1977 97.6498 98.0506C97.5727 97.9034 97.5311 97.7403 97.5283 97.5742V96.5703C97.5283 96.2429 97.7284 96.0938 97.9721 96.232L128.719 113.982C128.853 114.081 128.962 114.209 129.039 114.357C129.116 114.504 129.158 114.667 129.162 114.833V115.848C129.162 116.165 128.962 116.314 128.719 116.172Z" fill="#E9EAF2"/>
+<path d="M168.381 113.459L149.172 102.368C149.036 102.272 148.925 102.145 148.848 101.998C148.771 101.85 148.73 101.687 148.728 101.521V100.506C148.728 100.179 148.924 100.029 149.172 100.171L168.381 111.262C168.516 111.359 168.626 111.486 168.703 111.633C168.78 111.78 168.822 111.943 168.824 112.109V113.124C168.824 113.451 168.624 113.6 168.381 113.459Z" fill="#E9EAF2"/>
+<path d="M168.381 117.303L149.172 106.209C149.036 106.113 148.925 105.986 148.848 105.839C148.771 105.691 148.73 105.528 148.728 105.362V104.351C148.728 104.023 148.924 103.87 149.172 104.012L168.381 115.121C168.516 115.217 168.627 115.344 168.704 115.492C168.781 115.639 168.822 115.802 168.824 115.968V116.979C168.824 117.303 168.624 117.441 168.381 117.303Z" fill="#E9EAF2"/>
+<path d="M163.35 118.238L149.164 110.05C149.029 109.954 148.918 109.827 148.841 109.68C148.764 109.532 148.723 109.369 148.721 109.203V108.21C148.721 107.882 148.917 107.733 149.164 107.875L163.35 116.059C163.485 116.156 163.596 116.283 163.673 116.43C163.75 116.577 163.791 116.741 163.794 116.907V117.922C163.794 118.231 163.587 118.394 163.35 118.238Z" fill="#E9EAF2"/>
+<path d="M167.952 138.149L149.63 127.571C149.36 127.378 149.139 127.124 148.985 126.829C148.831 126.535 148.748 126.209 148.743 125.876V114.051C148.743 113.4 149.139 113.098 149.63 113.382L167.952 123.96C168.221 124.156 168.44 124.413 168.592 124.71C168.743 125.007 168.823 125.336 168.825 125.669V137.494C168.825 138.131 168.428 138.433 167.952 138.149Z" fill="#E9EAF2"/>
+<path d="M137.281 70.1449L130.538 66.2529C130.47 66.2041 130.415 66.1403 130.376 66.0664C130.338 65.9925 130.317 65.9106 130.316 65.8273V64.9253C130.316 64.7616 130.414 64.6852 130.538 64.7579L137.281 68.6499C137.349 68.6975 137.405 68.7606 137.443 68.834C137.482 68.9074 137.502 68.9889 137.503 69.0718V69.9666C137.503 70.1412 137.398 70.2176 137.281 70.1449Z" fill="#DADCE5"/>
+<path d="M148.194 76.4484L141.45 72.5637C141.383 72.5155 141.327 72.4523 141.289 72.379C141.25 72.3058 141.23 72.2245 141.228 72.1418V71.247C141.228 71.0833 141.33 71.0069 141.45 71.0797L148.194 74.9716C148.261 75.0204 148.316 75.0842 148.355 75.1581C148.393 75.232 148.414 75.3139 148.415 75.3972V76.292C148.415 76.4411 148.31 76.5175 148.194 76.4484Z" fill="#DADCE5"/>
+<path d="M158.931 82.6465L152.187 78.7472C152.12 78.6997 152.064 78.6366 152.025 78.5632C151.987 78.4898 151.966 78.4082 151.966 78.3253V77.4305C151.966 77.2668 152.064 77.1941 152.187 77.2632L158.931 81.1551C158.999 81.2039 159.054 81.2677 159.092 81.3416C159.131 81.4155 159.152 81.4974 159.153 81.5807V82.4755C159.153 82.6428 159.055 82.7156 158.931 82.6465Z" fill="#DADCE5"/>
+<path d="M169.843 88.9318L163.103 85.0398C163.036 84.9911 162.98 84.9272 162.942 84.8534C162.903 84.7795 162.883 84.6976 162.881 84.6143V83.7195C162.881 83.5558 162.98 83.4831 163.103 83.5522L169.843 87.4769C169.911 87.5244 169.967 87.5875 170.005 87.6609C170.044 87.7343 170.064 87.8159 170.065 87.8988V88.7936C170.065 88.9318 169.967 89.0191 169.843 88.9318Z" fill="#DADCE5"/>
+<path d="M154.959 95.8101L153.671 92.4965L151.332 95.8283L153.9 97.3123L156.014 98.5308L160.724 101.252L157.312 92.4601L154.959 95.8101Z" fill="#DADCE5"/>
+<path d="M166.137 98.2129C166.74 97.8663 166.743 96.7396 166.143 95.6962C165.544 94.6528 164.569 94.0879 163.966 94.4344C163.363 94.781 163.36 95.9077 163.96 96.9511C164.559 97.9945 165.534 98.5594 166.137 98.2129Z" fill="#DADCE5"/>
+<path d="M111.82 80.6859L110.118 87.5023V81.6679L111.82 80.6859Z" fill="#232733"/>
+<path d="M91.9923 69.1299L90.29 75.95V70.1157L91.9923 69.1299Z" fill="#232733"/>
+<path d="M119.989 111.422L79.4616 88.0224C79.2197 87.8488 79.0219 87.6207 78.8841 87.3566C78.7464 87.0926 78.6726 86.7998 78.6687 86.502V65.7691C78.6687 65.1835 79.0324 64.9143 79.4616 65.1689L119.989 88.568C120.232 88.7406 120.43 88.9678 120.569 89.2313C120.707 89.4948 120.781 89.7872 120.786 90.0848V110.836C120.786 111.407 120.429 111.676 119.989 111.422Z" fill="#E9EAF2"/>
+<path d="M90.7413 87.1131L88.5443 81.4497L84.5432 87.1422L88.9371 89.6811L92.5454 91.7653L100.602 96.4175L94.7678 81.3843L90.7413 87.1131Z" fill="#3BA3EE"/>
+<path d="M113.374 93.2196C114.399 92.628 114.398 90.7085 113.373 88.9322C112.347 87.156 110.685 86.1956 109.66 86.7873C108.636 87.3789 108.636 89.2984 109.662 91.0747C110.687 92.8509 112.349 93.8113 113.374 93.2196Z" fill="#3BA3EE"/>
+<path d="M109.372 79.271L109.368 71.4944L107.164 69.8394V79.271L104.712 80.686L108.266 82.7374L111.82 80.686L109.372 79.271Z" fill="#353C4C"/>
+<path d="M108.266 82.7374L110.117 87.5023V81.999V81.668L108.266 82.7374Z" fill="#232733"/>
+<path d="M104.712 80.6859L106.287 85.2617L110.118 87.5023L108.266 82.7373L104.712 80.6859Z" fill="#2B303F"/>
+<path d="M89.5408 67.7187V58.2834H87.3366V67.7151L84.885 69.13L88.4387 71.1851L91.9924 69.13L89.5408 67.7187Z" fill="#353C4C"/>
+<path d="M88.439 71.1851L90.2904 75.95V70.4467V70.1157L88.439 71.1851Z" fill="#232733"/>
+<path d="M84.885 69.1299L86.46 73.7057L90.2901 75.95L88.4387 71.1851L84.885 69.1299Z" fill="#2B303F"/>
+<path opacity="0.4" d="M65.2941 111.753L43.339 99.0145L16.8845 114.288L40.5528 128.015L67.011 112.742V110.763L65.2941 111.753Z" fill="#D6D8E5"/>
+<path d="M68.0803 110.036L43.339 95.7519L18.5977 110.036L16.8845 109.046V111.025L43.339 126.302L69.7935 111.025V109.046L68.0803 110.036Z" fill="#B1B4C4"/>
+<path d="M43.339 124.32L16.8845 109.046L43.339 93.7731L69.7935 109.046L43.339 124.32Z" fill="#E7E9F2"/>
+<path d="M43.2554 103.39L44.9831 102.394V28.6244L43.2554 29.621V103.39Z" fill="#B1B4C4"/>
+<path d="M43.3936 59.7201L55.4732 78.8381L57.201 78.1324L44.9831 58.8253L43.3936 59.7201Z" fill="#B1B4C4"/>
+<path d="M43.3208 63.1211L55.4077 82.3336V78.7399L43.3208 59.5965V63.1211Z" fill="#D6D8E5"/>
+<path d="M41.5933 102.394L43.321 103.39V29.621L41.5933 28.6244V102.394Z" fill="#D6D8E5"/>
+<path d="M55.408 110.37L57.1357 111.367V37.5977L55.408 36.6011V110.37Z" fill="#D6D8E5"/>
+<path d="M57.0703 111.367L58.7981 110.37V36.6011L57.0703 37.5977V111.367Z" fill="#B1B4C4"/>
+<path d="M43.3208 98.0725L55.4077 83.5994V80.1294L43.3208 94.6243V98.0725Z" fill="#D6D8E5"/>
+<path d="M43.3208 98.0725L44.9831 97.1632L55.4077 84.5961V83.3303L43.3208 98.0725Z" fill="#B1B4C4"/>
+<path d="M43.3208 59.7202L55.4077 45.2471V41.7771L43.3208 56.272V59.7202Z" fill="#D6D8E5"/>
+<path d="M43.3208 59.7202L44.9831 58.8072L55.4077 46.2438V44.978L43.3208 59.7202Z" fill="#B1B4C4"/>
+<path d="M29.5425 111.356L31.2702 110.359V36.5902L29.5425 37.5868V111.356Z" fill="#B1B4C4"/>
+<path d="M29.6807 67.6859L41.7603 86.8002L43.4881 86.0982L31.2702 66.7911L29.6807 67.6859Z" fill="#B1B4C4"/>
+<path d="M29.6079 71.0869L41.6949 90.2958V86.7057L29.6079 67.5587V71.0869Z" fill="#D6D8E5"/>
+<path d="M27.8843 110.359L29.6084 111.356V37.5868L27.8843 36.5902V110.359Z" fill="#D6D8E5"/>
+<path d="M41.6953 118.333L43.4231 119.329V45.5636L41.6953 44.5633V118.333Z" fill="#D6D8E5"/>
+<path d="M43.3574 119.329L45.0852 118.333V44.5633L43.3574 45.5636V119.329Z" fill="#B1B4C4"/>
+<path d="M29.6079 106.038L41.6949 91.5653V88.0916L29.6079 102.59V106.038Z" fill="#D6D8E5"/>
+<path d="M29.6079 106.038L31.2702 105.125L41.6949 92.5618V91.2924L29.6079 106.038Z" fill="#B1B4C4"/>
+<path d="M29.6079 67.686L41.6949 53.2129V49.7393L29.6079 64.2341V67.686Z" fill="#D6D8E5"/>
+<path d="M29.6079 67.686L31.2702 66.7731L41.6949 54.206V52.9402L29.6079 67.686Z" fill="#B1B4C4"/>
+<path d="M43.4226 49.2991L25.5886 39.0017L43.4226 28.708L61.2566 39.0017L43.4226 49.2991Z" fill="#F7DC6B"/>
+<path d="M42.0952 19.7893L20.9512 31.9962L14.8987 28.5007L36.0426 16.2938L42.0952 19.7893Z" fill="#353C4C"/>
+<path d="M14.8987 33.3966V28.5007L20.9512 31.9962V36.8921L14.8987 33.3966Z" fill="#2B303F"/>
+<path d="M20.9512 36.8921L42.0951 24.6851V19.7892L20.9512 31.9962V36.4156" fill="#232733"/>
+<path d="M42.0952 14.2968L20.9512 26.5038L14.8987 23.0083L36.0426 10.8013L42.0952 14.2968Z" fill="#353C4C"/>
+<path d="M14.8987 27.9078V23.0083L20.9512 26.5038V31.4033L14.8987 27.9078Z" fill="#2B303F"/>
+<path d="M20.9512 31.4033L42.0951 19.1963V14.2968L20.9512 26.5038V30.9268" fill="#232733"/>
+<path d="M26.1127 29.4791L13 21.957V19.2145L26.1127 26.6892V29.4791Z" fill="#D6D8E5"/>
+<path d="M45.0851 37.5796L13 19.2146L15.3752 17.8433L47.4603 36.2083L45.0851 37.5796Z" fill="#E7E9F2"/>
+<path d="M40.5383 25.1435L24.0647 15.6136V12.8674L40.5383 21.6952V25.1435Z" fill="#D6D8E5"/>
+<path d="M53.0326 29.3119L24.0647 12.871L26.4399 11.4998L55.4078 27.9406L53.0326 29.3119Z" fill="#E7E9F2"/>
+<path d="M32.8416 17.9306V20.6732L33.9691 28.5699L35.6423 29.6102L32.8416 17.9306Z" fill="#D6D8E5"/>
+<path d="M37.7993 30.7814L35.6314 19.542L32.8416 17.9306L34.5329 29.0064L37.7993 30.7814Z" fill="#E7E9F2"/>
+<path d="M32.8418 20.673L24.1885 22.9537L19.7437 20.3857L32.4635 17.705L32.8418 17.9305V20.673Z" fill="#B1B4C4"/>
+<path d="M32.8418 17.9305L20.7912 20.9932L18.2014 19.4982L30.3466 16.3956L32.8418 17.9305Z" fill="#E7E9F2"/>
+<path d="M43.4226 26.5947L25.5886 16.2974L43.4226 6L61.2566 16.2974L43.4226 26.5947Z" fill="#E7E9F2"/>
+<path d="M25.5886 48.0952V16.2974L43.4226 26.5948V58.3926L25.5886 48.0952Z" fill="#D6D8E5"/>
+<path d="M61.2568 16.2974V48.0952L43.4229 58.3926V26.5912L61.2568 16.2974Z" fill="#B1B4C4"/>
+<path d="M43.4226 37.6705L33.1834 31.7598L29.8916 21.2842L43.4226 29.0972V37.6705Z" fill="#3BA3EE"/>
+<path d="M61.2568 18.7999V27.3732L43.4229 37.6742V29.1009L61.2568 18.7999Z" fill="#005CC3"/>
+<path d="M122.947 85.7563L45.78 41.2023V38.4597L122.947 83.0137V85.7563Z" fill="#D6D8E5"/>
+<path d="M122.947 83.0138L45.78 38.4634L48.1552 37.0921L125.322 81.6425L122.947 83.0138Z" fill="#E7E9F2"/>
+<path d="M134.011 79.4128L56.8447 34.8588V32.1162L134.011 76.6702V79.4128Z" fill="#D6D8E5"/>
+<path d="M134.011 76.6703L56.8447 32.1163L59.2199 30.745L136.386 75.299L134.011 76.6703Z" fill="#E7E9F2"/>
+<path d="M136.387 78.0488L122.947 85.7564V83.0101L136.387 75.3062V78.0488Z" fill="#B1B4C4"/>
+<path d="M136.386 75.3062L122.954 83.0138L120.942 81.8534L134.375 74.1459L136.386 75.3062Z" fill="#E7E9F2"/>
+<path d="M124.34 73.8223L115.683 76.1029L111.238 73.5349L123.958 70.8542L124.34 71.0797V73.8223Z" fill="#B1B4C4"/>
+<path d="M124.34 71.0796L112.289 74.1422L109.699 72.6436L121.841 69.5446L124.34 71.0796Z" fill="#E7E9F2"/>
+<path d="M104.811 59.8184V62.561L105.938 70.4577L107.611 71.4943L104.811 59.8184Z" fill="#D6D8E5"/>
+<path d="M109.768 72.6692L107.6 61.4298L104.811 59.8184L106.506 70.8942L109.768 72.6692Z" fill="#E7E9F2"/>
+<path d="M104.811 62.5609L96.1575 64.8415L91.7126 62.2736L104.432 59.5928L104.811 59.8184V62.5609Z" fill="#B1B4C4"/>
+<path d="M104.811 59.8184L92.7636 62.881L90.1738 61.3861L102.315 58.2834L104.811 59.8184Z" fill="#E7E9F2"/>
+<path d="M85.2161 48.4953V51.2379L86.34 59.1346L88.0168 60.1749L85.2161 48.4953Z" fill="#D6D8E5"/>
+<path d="M90.1738 61.3461L88.0059 50.1067L85.2161 48.4953L86.9074 59.5711L90.1738 61.3461Z" fill="#E7E9F2"/>
+<path d="M85.2163 51.2378L76.563 53.5184L72.1182 50.9504L84.838 48.2697L85.2163 48.4952V51.2378Z" fill="#B1B4C4"/>
+<path d="M85.2163 48.4952L73.1657 51.5579L70.5759 50.0629L82.7211 46.9603L85.2163 48.4952Z" fill="#E7E9F2"/>
+<path d="M65.6216 37.1795V39.9221L66.7455 47.8188L68.4223 48.8554L65.6216 37.1795Z" fill="#D6D8E5"/>
+<path d="M70.5757 50.0303L68.4114 38.7909L65.6216 37.1795L67.313 48.2553L70.5757 50.0303Z" fill="#E7E9F2"/>
+<path d="M65.6216 39.922L56.9683 42.2026L52.5234 39.6347L65.2433 36.9539L65.6216 37.1794V39.922Z" fill="#B1B4C4"/>
+<path d="M65.6218 37.1794L53.5712 40.2421L50.9814 38.7471L63.123 35.6445L65.6218 37.1794Z" fill="#E7E9F2"/>
+<path d="M36.6428 126.091V112.295L15.8298 109.919V123.803C15.8338 124.041 15.904 124.272 16.0325 124.472C16.1611 124.672 16.3428 124.832 16.5573 124.934L26.3127 130.641C27.4039 131.289 29.3499 131.209 30.623 130.459L35.5698 127.55C36.2973 127.128 36.661 126.586 36.6246 126.095L36.6428 126.091Z" fill="#D6D8E5"/>
+<path d="M36.621 113.8V112.294H35.0205L26.1381 107.086C25.0469 106.438 23.1009 106.522 21.8278 107.268L16.881 110.178C16.7917 110.228 16.7055 110.284 16.6228 110.345L15.8298 109.919C15.8298 109.919 15.8298 111.509 15.8298 111.563C15.8353 111.8 15.9062 112.031 16.0345 112.23C16.1629 112.429 16.3439 112.588 16.5573 112.691L26.3127 118.394C27.4039 119.042 29.3499 118.958 30.623 118.212L35.5698 115.303C36.2973 114.87 36.661 114.31 36.621 113.786V113.8Z" fill="#EDF0F9"/>
+<path d="M26.3129 116.758L16.5721 111.051C15.4809 110.403 15.6046 109.272 16.8813 108.526L21.8281 105.616C23.1012 104.889 25.0326 104.787 26.1383 105.434L35.8828 111.141C36.974 111.789 36.8467 112.92 35.57 113.666L30.6232 116.576C29.3683 117.321 27.4187 117.405 26.3129 116.758Z" fill="#E2E5F2"/>
+<path d="M24.1194 108.966V108.417H23.7884L23.6829 108.352C23.3575 108.183 22.9964 108.095 22.6299 108.095C22.2635 108.095 21.9024 108.183 21.5769 108.352C21.5147 108.387 21.4562 108.428 21.4023 108.475L21.144 108.417V108.966C21.1527 109.099 21.1977 109.227 21.274 109.336C21.3503 109.445 21.4551 109.531 21.5769 109.585C21.9029 109.751 22.2638 109.838 22.6299 109.838C22.996 109.838 23.3569 109.751 23.6829 109.585C23.8036 109.529 23.9074 109.443 23.984 109.334C24.0607 109.225 24.1074 109.099 24.1194 108.966V108.966Z" fill="#005CC3"/>
+<path d="M22.6317 109.29C23.4533 109.29 24.1194 108.899 24.1194 108.417C24.1194 107.935 23.4533 107.544 22.6317 107.544C21.8101 107.544 21.144 107.935 21.144 108.417C21.144 108.899 21.8101 109.29 22.6317 109.29Z" fill="#3BA3EE"/>
+<path d="M27.7129 111.036V110.487H27.3819L27.2801 110.421C26.9546 110.253 26.5935 110.165 26.227 110.165C25.8606 110.165 25.4995 110.253 25.174 110.421C25.1101 110.456 25.0503 110.497 24.9958 110.545L24.7375 110.487V111.036C24.7496 111.168 24.7963 111.295 24.8729 111.404C24.9495 111.512 25.0534 111.599 25.174 111.654C25.5 111.821 25.8609 111.908 26.227 111.908C26.5932 111.908 26.9541 111.821 27.2801 111.654C27.4019 111.601 27.5066 111.515 27.583 111.406C27.6593 111.297 27.7042 111.169 27.7129 111.036Z" fill="#005CC3"/>
+<path d="M26.2252 111.36C27.0469 111.36 27.7129 110.969 27.7129 110.487C27.7129 110.005 27.0469 109.614 26.2252 109.614C25.4036 109.614 24.7375 110.005 24.7375 110.487C24.7375 110.969 25.4036 111.36 26.2252 111.36Z" fill="#3BA3EE"/>
+<path d="M31.314 113.248V112.698H30.9793L30.8775 112.633C30.552 112.464 30.1909 112.377 29.8245 112.377C29.458 112.377 29.0969 112.464 28.7714 112.633C28.7083 112.668 28.6487 112.71 28.5932 112.756L28.335 112.698V113.248C28.3463 113.38 28.3927 113.507 28.4694 113.616C28.5461 113.725 28.6504 113.811 28.7714 113.866C29.0969 114.034 29.458 114.122 29.8245 114.122C30.1909 114.122 30.552 114.034 30.8775 113.866C30.9986 113.811 31.1028 113.725 31.1795 113.616C31.2562 113.507 31.3026 113.38 31.314 113.248V113.248Z" fill="#005CC3"/>
+<path d="M29.8226 113.571C30.6443 113.571 31.3103 113.18 31.3103 112.698C31.3103 112.216 30.6443 111.825 29.8226 111.825C29.001 111.825 28.335 112.216 28.335 112.698C28.335 113.18 29.001 113.571 29.8226 113.571Z" fill="#3BA3EE"/>
+<path d="M195.308 126.792L164.929 109.253C163.019 108.161 161.473 105.197 161.473 102.654V54.856C161.473 52.3098 163.019 51.1459 164.929 52.2443L195.308 69.7873C197.214 70.8785 198.76 73.843 198.76 76.3855V124.191C198.76 126.737 197.214 127.894 195.308 126.792Z" fill="#211B49"/>
+<path d="M162.041 52.3789C162.347 52.1971 162.668 52.0425 163.001 51.9169L163.772 53.441L162.041 52.3789Z" fill="#211B49"/>
+<path d="M194.511 127.192L164.128 109.642C162.222 108.551 160.677 105.586 160.677 103.044V55.2561C160.677 52.7099 162.222 51.5423 164.128 52.6444L194.511 70.1874C196.417 71.2786 197.963 74.2394 197.963 76.782V124.58C197.963 127.123 196.417 128.294 194.511 127.192Z" fill="#2E245B"/>
+<path d="M169.654 62.6107L164.128 59.4208V57.4275L169.654 60.6175V62.6107Z" fill="#A3ABD9"/>
+<path d="M194.166 76.7637L170.69 63.2073V61.2177L194.166 74.7705V76.7637Z" fill="#A548B5"/>
+<path d="M169.654 68.9907L164.128 65.8007V63.8074L169.654 66.9974V68.9907Z" fill="#A3ABD9"/>
+<path d="M186.226 78.5569L170.69 69.5872V67.5939L186.226 76.5637V78.5569Z" fill="#F9B937"/>
+<path d="M169.654 72.1771L164.128 68.9908V66.9975L169.654 70.1838V72.1771Z" fill="#A3ABD9"/>
+<path d="M190.023 83.9403L170.69 72.7773V70.784L190.023 81.9471V83.9403Z" fill="#F27320"/>
+<path d="M169.654 75.3671L164.128 72.1771V70.1838L169.654 73.3738V75.3671Z" fill="#A3ABD9"/>
+<path d="M184.156 83.7402L170.69 75.9671V73.9739L184.156 81.7469V83.7402Z" fill="#A3ABD9"/>
+<path d="M169.654 65.8008L164.128 62.6108V60.6176L169.654 63.8075V65.8008Z" fill="#A3ABD9"/>
+<path d="M182.428 73.1774L170.69 66.3973V64.4041L182.428 71.1804V73.1774Z" fill="#248AEE"/>
+<path d="M169.654 78.557L164.128 75.367V73.3737L169.654 76.5637V78.557Z" fill="#A3ABD9"/>
+<path d="M177.594 83.14L170.69 79.1535V77.1602L177.594 81.1468V83.14Z" fill="#A548B5"/>
+<path d="M169.654 84.9333L164.128 81.7469V79.7537L169.654 82.9436V84.9333Z" fill="#A3ABD9"/>
+<path d="M192.442 98.0896L170.69 85.5334V83.5402L192.442 96.0963V98.0896Z" fill="#F9B937"/>
+<path d="M169.654 88.1232L164.128 84.9333V82.94L169.654 86.13V88.1232Z" fill="#A3ABD9"/>
+<path d="M177.249 92.5098L170.69 88.7233V86.73L177.249 90.5165V92.5098Z" fill="#F27320"/>
+<path d="M169.654 91.3132L164.128 88.1232V86.1299L169.654 89.3199V91.3132Z" fill="#A3ABD9"/>
+<path d="M190.023 103.073L170.69 91.9097V89.9201L190.023 101.08V103.073Z" fill="#A3ABD9"/>
+<path d="M169.654 81.7469L164.128 78.5569V76.5637L169.654 79.7536V81.7469Z" fill="#A3ABD9"/>
+<path d="M188.986 92.9101L170.69 82.3436V80.3503L188.986 90.9168V92.9101Z" fill="#248AEE"/>
+<path d="M169.654 94.5032L164.128 91.3132V89.3199L169.654 92.5099V94.5032Z" fill="#A3ABD9"/>
+<path d="M173.106 96.4965L170.69 95.0997V93.1064L173.106 94.5032V96.4965Z" fill="#A548B5"/>
+<path d="M169.654 100.879L164.128 97.6932V95.6999L169.654 98.8899V100.879Z" fill="#A3ABD9"/>
+<path d="M175.179 104.069L170.69 101.48V99.4864L175.179 102.076V104.069Z" fill="#F9B937"/>
+<path d="M169.654 104.069L164.128 100.879V98.8861L169.654 102.076V104.069Z" fill="#A3ABD9"/>
+<path d="M182.428 111.446L170.69 104.67V102.676L182.428 109.453V111.446Z" fill="#F27320"/>
+<path d="M169.654 107.259L164.128 104.069V102.076L169.654 105.266V107.259Z" fill="#A3ABD9"/>
+<path d="M189.332 118.623L170.69 107.856V105.863L189.332 116.629V118.623Z" fill="#A3ABD9"/>
+<path d="M169.654 97.6931L164.128 94.5032V92.5099L169.654 95.6999V97.6931Z" fill="#A3ABD9"/>
+<path d="M194.166 111.846L170.69 98.2897V96.2964L194.166 109.849V111.846Z" fill="#248AEE"/>
+<path d="M95.8273 48.162C95.8844 48.195 95.9103 48.1747 95.9103 48.1159L95.9103 46.6349L96.5328 46.9944C97.0205 47.276 97.2799 47.126 97.2798 46.5795L97.2798 45.1455C97.2798 44.5931 97.0204 44.1494 96.5327 43.8679L95.2876 43.1489C95.2357 43.119 95.2046 43.1363 95.2046 43.195L95.2047 47.7085C95.2047 47.7673 95.2359 47.8205 95.2877 47.8505L95.8273 48.162ZM96.3668 46.1228L95.9102 45.8592L95.9102 44.2842L96.3667 44.5478C96.5068 44.6286 96.5742 44.7499 96.5742 44.9027L96.5743 46.0075C96.5743 46.1544 96.5068 46.2037 96.3668 46.1228ZM98.4213 49.6598C98.4732 49.6897 98.5043 49.6724 98.5043 49.6137L98.5042 48.1327L98.8622 48.3394L99.2098 50.0328C99.2202 50.0917 99.2462 50.136 99.298 50.166L99.8376 50.4775C99.8947 50.5105 99.9258 50.4932 99.9102 50.4137L99.5522 48.6672C99.8012 48.6876 99.9309 48.5039 99.9309 48.1102L99.9308 46.6762C99.9308 46.1237 99.6714 45.6801 99.1838 45.3986L97.8816 44.6467C97.8297 44.6167 97.7986 44.634 97.7986 44.6928L97.7987 49.2063C97.7987 49.265 97.8298 49.3183 97.8817 49.3482L98.4213 49.6598ZM99.0178 47.6535L98.5042 47.3569L98.5042 45.7819L99.0178 46.0785C99.1527 46.1563 99.2253 46.2805 99.2253 46.4333L99.2253 47.5382C99.2253 47.691 99.1527 47.7314 99.0178 47.6535ZM101.072 51.1905C101.124 51.2204 101.155 51.2031 101.155 51.1443L101.155 46.6309C101.155 46.5721 101.124 46.5189 101.072 46.4889L100.533 46.1774C100.476 46.1444 100.45 46.1647 100.45 46.2235L100.45 50.737C100.45 50.7957 100.476 50.846 100.533 50.8789L101.072 51.1905ZM102.255 51.8734C102.323 51.9124 102.359 51.8922 102.359 51.8158L102.359 49.1712L102.395 49.1921L102.909 52.1451C102.924 52.2246 102.961 52.2808 103.023 52.3168L103.277 52.4635C103.339 52.4995 103.376 52.4852 103.391 52.4237L103.905 50.0638L103.941 50.0848L103.941 52.7294C103.941 52.8058 103.978 52.8679 104.045 52.9069L104.528 53.1854C104.595 53.2244 104.631 53.2042 104.631 53.1278L104.631 48.6614C104.631 48.585 104.595 48.5228 104.527 48.4839L103.843 48.0885C103.78 48.0526 103.744 48.0668 103.728 48.1284L103.153 50.7226L102.577 47.4634C102.561 47.3839 102.525 47.3276 102.463 47.2917L101.778 46.8963C101.71 46.8574 101.674 46.8775 101.674 46.9539L101.674 51.4204C101.674 51.4968 101.71 51.5589 101.778 51.5978L102.255 51.8734ZM107.137 54.6922C107.199 54.7281 107.22 54.7048 107.22 54.6461L107.22 54.0584C107.22 53.9937 107.199 53.9524 107.137 53.9164L105.84 53.1676L105.84 51.9804L106.831 52.5526C106.883 52.5825 106.914 52.5652 106.914 52.5006L106.914 51.9188C106.914 51.8541 106.883 51.8009 106.831 51.7709L105.84 51.1988L105.84 50.0234L107.137 50.7723C107.199 50.8082 107.22 50.7791 107.22 50.7203L107.22 50.1326C107.22 50.0738 107.199 50.0266 107.137 49.9906L105.228 48.8883C105.181 48.8613 105.15 48.8786 105.15 48.9374L105.15 53.4509C105.15 53.5096 105.181 53.5629 105.228 53.5898L107.137 54.6922Z" fill="#BDC1D1"/>
+<path d="M108.371 55.405C108.423 55.4348 108.454 55.4174 108.454 55.3586L108.454 53.4839L109.424 54.0444C109.476 54.0742 109.507 54.0627 109.507 53.9981L109.507 53.4104C109.507 53.3516 109.476 53.2985 109.424 53.2687L108.454 52.7081L108.454 51.5269L109.734 52.2663C109.786 52.2961 109.817 52.2787 109.817 52.22L109.817 51.6323C109.817 51.5735 109.786 51.5203 109.734 51.4905L107.834 50.3933C107.777 50.3605 107.751 50.3809 107.751 50.4397L107.751 54.9532C107.751 55.0119 107.777 55.0621 107.834 55.0949L108.371 55.405ZM112.264 57.653C112.321 57.6858 112.347 57.6713 112.347 57.6067L112.347 57.019C112.347 56.9602 112.321 56.91 112.264 56.8772L111.035 56.1677L111.035 52.3359C111.035 52.2771 111.01 52.227 110.953 52.1942L110.416 51.8841C110.364 51.8543 110.333 51.8716 110.333 51.9304L110.333 56.4439C110.333 56.5085 110.364 56.5558 110.416 56.5856L112.264 57.653ZM114.841 59.1408C114.903 59.1765 114.924 59.1532 114.924 59.0944L114.924 58.5067C114.924 58.4421 114.903 58.4008 114.841 58.365L113.55 57.6196L113.55 56.4325L114.536 57.002C114.588 57.0318 114.619 57.0144 114.619 56.9498L114.619 56.3679C114.619 56.3033 114.588 56.2501 114.536 56.2203L113.55 55.6509L113.55 54.4755L114.841 55.2209C114.903 55.2566 114.924 55.2274 114.924 55.1687L114.924 54.581C114.924 54.5222 114.903 54.475 114.841 54.4392L112.941 53.342C112.894 53.3152 112.863 53.3326 112.863 53.3913L112.863 57.9048C112.863 57.9636 112.894 58.0167 112.941 58.0436L114.841 59.1408ZM115.905 59.755C115.962 59.7877 116.003 59.7881 116.024 59.7412L116.519 58.6053L117.015 60.3137C117.036 60.3844 117.077 60.4317 117.134 60.4645L117.666 60.7716C117.748 60.8193 117.774 60.7755 117.743 60.6753L116.922 57.9445L117.712 56.238C117.743 56.1736 117.717 56.0999 117.635 56.0522L117.118 55.7541C117.061 55.7213 117.02 55.7209 116.999 55.7678L116.519 56.8833L116.039 55.2132C116.018 55.1425 115.977 55.0952 115.92 55.0624L115.404 54.7642C115.321 54.7165 115.295 54.7604 115.326 54.8605L116.111 57.4764L115.296 59.2621C115.265 59.3265 115.29 59.4002 115.373 59.4479L115.905 59.755Z" fill="#BDC1D1"/>
+<path d="M0 0H38.2661V16.1597C38.2661 17.8165 36.923 19.1597 35.2661 19.1597H0V0Z" fill="#F27320"/>
+<path d="M5 14.1597H6.91064V8.16113H6.94873L11.1001 14.1597H12.7632V5H10.8525V10.9541H10.8145L6.67578 5H5V14.1597Z" fill="white"/>
+<path d="M14.293 14.1597H20.3613V12.5791H16.21V10.2749H20.1265V8.77686H16.21V6.58057H20.3613V5H14.293V14.1597Z" fill="white"/>
+<path d="M23.6812 14.1597H25.5537L27.2422 8.02148H27.2803L28.9624 14.1597H30.835L33.2661 5H31.2793L29.8257 11.5635H29.7876L28.0991 5H26.417L24.7285 11.5635H24.6904L23.2432 5H21.2563L23.6812 14.1597Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="166.257" y1="94.3359" x2="66.2726" y2="-41.5467" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A3ABD9"/>
+<stop offset="1" stop-color="#A3ABD9" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.6005 8.68489) rotate(25.4082) scale(131.918 124.405)">
+<stop stop-color="#3E88F6"/>
+<stop offset="0.521608" stop-color="#3E9EF6" stop-opacity="0.26"/>
+<stop offset="1" stop-color="#3EF6F6" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint2_linear" x1="-1.75674e-07" y1="17.0703" x2="120.974" y2="125.007" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3E88F6"/>
+<stop offset="0.47914" stop-color="#3EB4F6" stop-opacity="0.33"/>
+<stop offset="1" stop-color="#3EEBF6" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="202.051" y1="-2.09636" x2="176.463" y2="147.951" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078E3"/>
+<stop offset="1" stop-color="#A548B5" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="211" height="115" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/banner-primeflex.svg b/public/images/banner-primeflex.svg
new file mode 100644
index 0000000000..9cb9e62e03
--- /dev/null
+++ b/public/images/banner-primeflex.svg
@@ -0,0 +1,181 @@
+<svg width="211" height="115" viewBox="0 0 211 115" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect width="211" height="115" rx="3" fill="url(#paint0_linear)" fill-opacity="0.1"/>
+<rect width="211" height="115" rx="3" fill="url(#paint1_radial)" fill-opacity="0.05"/>
+<rect width="211" height="115" rx="3" fill="url(#paint2_linear)" fill-opacity="0.15"/>
+<rect width="211" height="115" rx="3" fill="url(#paint3_linear)" fill-opacity="0.07"/>
+<path d="M128.073 24C128.263 24 128.349 23.895 128.349 23.72V19.31H130.421C132.045 19.31 132.908 18.4175 132.908 16.79V12.52C132.908 10.875 132.045 10 130.421 10H126.276C126.104 10 126 10.105 126 10.28V23.72C126 23.895 126.104 24 126.276 24H128.073ZM129.869 17H128.349V12.31H129.869C130.335 12.31 130.56 12.555 130.56 13.01V16.3C130.56 16.7375 130.335 17 129.869 17ZM136.708 24C136.881 24 136.984 23.895 136.984 23.72V19.31H138.176L139.333 23.755C139.368 23.9125 139.454 24 139.627 24H141.423C141.613 24 141.717 23.895 141.665 23.685L140.473 19.1C141.302 18.7325 141.734 17.9625 141.734 16.79V12.52C141.734 10.875 140.87 10 139.247 10H134.912C134.739 10 134.636 10.105 134.636 10.28V23.72C134.636 23.895 134.739 24 134.912 24H136.708ZM138.694 17H136.984V12.31H138.694C139.143 12.31 139.385 12.555 139.385 13.01V16.3C139.385 16.755 139.143 17 138.694 17ZM145.534 24C145.706 24 145.81 23.895 145.81 23.72V10.28C145.81 10.105 145.706 10 145.534 10H143.737C143.547 10 143.461 10.105 143.461 10.28V23.72C143.461 23.895 143.547 24 143.737 24H145.534ZM149.472 24C149.696 24 149.817 23.8775 149.817 23.65V15.775H149.938L151.648 23.685C151.699 23.895 151.82 24 152.028 24H152.874C153.081 24 153.202 23.895 153.254 23.685L154.964 15.775H155.085V23.65C155.085 23.8775 155.206 24 155.43 24H157.036C157.261 24 157.382 23.8775 157.382 23.65V10.35C157.382 10.1225 157.261 10 157.036 10H154.756C154.549 10 154.428 10.105 154.377 10.315L152.459 19.03L150.542 10.315C150.491 10.105 150.37 10 150.162 10H147.883C147.658 10 147.537 10.1225 147.537 10.35V23.65C147.537 23.8775 147.658 24 147.883 24H149.472ZM165.724 24C165.931 24 166 23.895 166 23.72V21.97C166 21.7775 165.931 21.69 165.724 21.69H161.406V18.155H164.705C164.877 18.155 164.981 18.05 164.981 17.8575V16.125C164.981 15.9325 164.877 15.8275 164.705 15.8275H161.406V12.3275H165.724C165.931 12.3275 166 12.205 166 12.03V10.28C166 10.105 165.931 10 165.724 10H159.368C159.212 10 159.109 10.105 159.109 10.28V23.72C159.109 23.895 159.212 24 159.368 24H165.724Z" fill="#131314" fill-opacity="0.87"/>
+<path d="M170.044 24C170.214 24 170.316 23.895 170.316 23.72V18.1375H173.519C173.689 18.1375 173.791 18.05 173.791 17.8575V16.1075C173.791 15.9325 173.689 15.8275 173.519 15.8275H170.316V12.31H174.541C174.711 12.31 174.813 12.205 174.813 12.03V10.28C174.813 10.105 174.711 10 174.541 10H168.273C168.085 10 168 10.105 168 10.28V23.72C168 23.895 168.085 24 168.273 24H170.044ZM182.887 24C183.074 24 183.159 23.9125 183.159 23.72V21.97C183.159 21.795 183.074 21.69 182.887 21.69H178.833V10.28C178.833 10.105 178.748 10 178.56 10H176.789C176.619 10 176.516 10.105 176.516 10.28V23.72C176.516 23.9125 176.619 24 176.789 24H182.887ZM191.386 24C191.59 24 191.658 23.895 191.658 23.72V21.97C191.658 21.7775 191.59 21.69 191.386 21.69H187.128V18.155H190.381C190.551 18.155 190.653 18.05 190.653 17.8575V16.125C190.653 15.9325 190.551 15.8275 190.381 15.8275H187.128V12.3275H191.386C191.59 12.3275 191.658 12.205 191.658 12.03V10.28C191.658 10.105 191.59 10 191.386 10H185.118C184.965 10 184.862 10.105 184.862 10.28V23.72C184.862 23.895 184.965 24 185.118 24H191.386ZM194.895 24C195.082 24 195.218 23.93 195.286 23.755L196.921 19.52L198.557 23.755C198.625 23.93 198.761 24 198.948 24H200.703C200.975 24 201.06 23.825 200.958 23.58L198.25 16.86L200.856 10.42C200.958 10.175 200.873 10 200.601 10H198.897C198.71 10 198.574 10.07 198.505 10.245L196.921 14.3925L195.337 10.245C195.269 10.07 195.133 10 194.946 10H193.242C192.97 10 192.885 10.175 192.987 10.42L195.576 16.86L192.885 23.58C192.783 23.825 192.868 24 193.14 24H194.895Z" fill="#0078E3"/>
+<g opacity="0.1">
+<line x1="138" y1="29.8333" x2="138" y2="112.5" stroke="#383A48" stroke-width="4" stroke-linecap="round"/>
+<line x1="138" y1="-13" x2="138" y2="4.66667" stroke="#383A48" stroke-width="4" stroke-linecap="round"/>
+<line x1="179" y1="38.3333" x2="179" y2="177.333" stroke="#383A48" stroke-width="4" stroke-linecap="round"/>
+</g>
+<path d="M177.408 153.535L91.5667 103.972C90.3627 103.277 89.3843 101.426 89.3843 99.8038V33.4002C89.3843 31.7961 90.3591 31.0577 91.5667 31.7525L177.408 81.3151C178.612 82.0099 179.591 83.8613 179.591 85.4799V151.887C179.591 153.491 178.605 154.23 177.408 153.535Z" fill="#B1B4C4"/>
+<path d="M89.2207 32.1635L90.1591 31.6215L91.505 32.389C91.505 32.389 90.0718 32.6072 90.05 32.6C90.0282 32.5927 89.2207 32.1635 89.2207 32.1635Z" fill="#B1B4C4"/>
+<path d="M176.616 153.99L90.7742 104.427C89.5702 103.732 88.5918 101.881 88.5918 100.259V33.8549C88.5918 32.2508 89.5702 31.5124 90.7742 32.2072L176.616 81.7698C177.82 82.4646 178.798 84.316 178.798 85.9346V152.342C178.795 153.946 177.82 154.684 176.616 153.99Z" fill="#E4E7F2"/>
+<path d="M176.463 154.073L90.6214 104.511C89.4174 103.816 88.439 101.964 88.439 100.346V33.9422C88.439 32.3382 89.4138 31.5998 90.6214 32.2945L176.463 81.8572C177.667 82.5519 178.645 84.4033 178.645 86.0219V152.426C178.645 154.041 177.667 154.768 176.463 154.073Z" fill="#D6D8E5"/>
+<path d="M177.463 150.039L89.5264 99.2691L89.5737 34.2077C89.5737 33.542 90.0429 33.2729 90.6176 33.6039L176.459 83.1665C176.764 83.3658 177.018 83.6345 177.2 83.9506C177.381 84.2666 177.485 84.6212 177.503 84.9852L177.463 150.039Z" fill="white"/>
+<path d="M172.018 93.4784L94.0694 48.477C93.7994 48.2834 93.5785 48.0292 93.4244 47.7349C93.2703 47.4406 93.1872 47.1142 93.1819 46.782V41.155C93.1819 40.5039 93.5784 40.202 94.0694 40.4858L172.018 85.4872C172.288 85.6811 172.51 85.9359 172.664 86.2309C172.818 86.5259 172.901 86.853 172.906 87.1858V92.8092C172.906 93.4639 172.509 93.7622 172.018 93.4784Z" fill="#E9EAF2"/>
+<path d="M167.952 108.541L149.63 97.9633C149.36 97.7697 149.139 97.5156 148.985 97.2212C148.831 96.9269 148.748 96.6005 148.743 96.2683V84.4433C148.743 83.7886 149.139 83.4903 149.63 83.774L167.952 94.3514C168.222 94.5447 168.443 94.7987 168.597 95.0932C168.752 95.3876 168.834 95.7141 168.839 96.0464V107.872C168.825 108.523 168.428 108.824 167.952 108.541Z" fill="#E9EAF2"/>
+<path d="M143.803 112.382L97.8412 85.8292C97.7057 85.7329 97.5949 85.6059 97.5177 85.4586C97.4406 85.3113 97.3994 85.1479 97.3975 84.9817V82.9484C97.3975 82.621 97.5939 82.4682 97.8412 82.6101L143.803 109.163C143.938 109.26 144.048 109.387 144.125 109.534C144.202 109.681 144.244 109.844 144.247 110.01V112.047C144.247 112.371 144.047 112.524 143.803 112.382Z" fill="#E9EAF2"/>
+<path d="M139.278 114.586L97.9721 90.7504C97.8374 90.6533 97.7272 90.5261 97.6501 90.379C97.5731 90.2319 97.5314 90.0689 97.5283 89.9029V88.8881C97.5283 88.5607 97.7284 88.4116 97.9721 88.5534L139.278 112.4C139.413 112.497 139.523 112.624 139.6 112.771C139.677 112.918 139.719 113.081 139.722 113.247V114.259C139.722 114.575 139.522 114.728 139.278 114.586Z" fill="#E9EAF2"/>
+<path d="M139.278 118.427L97.9721 94.5806C97.8372 94.4837 97.7268 94.3566 97.6498 94.2094C97.5727 94.0623 97.5311 93.8991 97.5283 93.7331V92.7182C97.5283 92.3945 97.7284 92.2417 97.9721 92.3836L139.278 116.23C139.413 116.327 139.523 116.454 139.6 116.601C139.677 116.748 139.719 116.912 139.722 117.078V118.092C139.722 118.42 139.522 118.569 139.278 118.427Z" fill="#E9EAF2"/>
+<path d="M128.719 116.172L97.9721 98.4217C97.8372 98.3248 97.7268 98.1977 97.6498 98.0506C97.5727 97.9034 97.5311 97.7403 97.5283 97.5742V96.5703C97.5283 96.2429 97.7284 96.0938 97.9721 96.232L128.719 113.982C128.853 114.081 128.962 114.209 129.039 114.357C129.116 114.504 129.158 114.667 129.162 114.833V115.848C129.162 116.165 128.962 116.314 128.719 116.172Z" fill="#E9EAF2"/>
+<path d="M168.381 113.459L149.172 102.368C149.036 102.272 148.925 102.145 148.848 101.998C148.771 101.85 148.73 101.687 148.728 101.521V100.506C148.728 100.179 148.924 100.029 149.172 100.171L168.381 111.262C168.516 111.359 168.626 111.486 168.703 111.633C168.78 111.78 168.822 111.943 168.824 112.109V113.124C168.824 113.451 168.624 113.6 168.381 113.459Z" fill="#E9EAF2"/>
+<path d="M168.381 117.303L149.172 106.209C149.036 106.113 148.925 105.986 148.848 105.839C148.771 105.691 148.73 105.528 148.728 105.362V104.351C148.728 104.023 148.924 103.87 149.172 104.012L168.381 115.121C168.516 115.217 168.627 115.344 168.704 115.492C168.781 115.639 168.822 115.802 168.824 115.968V116.979C168.824 117.303 168.624 117.441 168.381 117.303Z" fill="#E9EAF2"/>
+<path d="M163.35 118.238L149.164 110.05C149.029 109.954 148.918 109.827 148.841 109.68C148.764 109.532 148.723 109.369 148.721 109.203V108.21C148.721 107.882 148.917 107.733 149.164 107.875L163.35 116.059C163.485 116.156 163.596 116.283 163.673 116.43C163.75 116.577 163.791 116.741 163.794 116.907V117.922C163.794 118.231 163.587 118.394 163.35 118.238Z" fill="#E9EAF2"/>
+<path d="M167.952 138.149L149.63 127.571C149.36 127.378 149.139 127.124 148.985 126.829C148.831 126.535 148.748 126.209 148.743 125.876V114.051C148.743 113.4 149.139 113.098 149.63 113.382L167.952 123.96C168.221 124.156 168.44 124.413 168.592 124.71C168.743 125.007 168.823 125.336 168.825 125.669V137.494C168.825 138.131 168.428 138.433 167.952 138.149Z" fill="#E9EAF2"/>
+<path d="M137.281 70.1449L130.538 66.2529C130.47 66.2041 130.415 66.1403 130.376 66.0664C130.338 65.9925 130.317 65.9106 130.316 65.8273V64.9253C130.316 64.7616 130.414 64.6852 130.538 64.7579L137.281 68.6499C137.349 68.6975 137.405 68.7606 137.443 68.834C137.482 68.9074 137.502 68.9889 137.503 69.0718V69.9666C137.503 70.1412 137.398 70.2176 137.281 70.1449Z" fill="#DADCE5"/>
+<path d="M148.194 76.4484L141.45 72.5637C141.383 72.5155 141.327 72.4523 141.289 72.379C141.25 72.3058 141.23 72.2245 141.228 72.1418V71.247C141.228 71.0833 141.33 71.0069 141.45 71.0797L148.194 74.9716C148.261 75.0204 148.316 75.0842 148.355 75.1581C148.393 75.232 148.414 75.3139 148.415 75.3972V76.292C148.415 76.4411 148.31 76.5175 148.194 76.4484Z" fill="#DADCE5"/>
+<path d="M158.931 82.6465L152.187 78.7472C152.12 78.6997 152.064 78.6366 152.025 78.5632C151.987 78.4898 151.966 78.4082 151.966 78.3253V77.4305C151.966 77.2668 152.064 77.1941 152.187 77.2632L158.931 81.1551C158.999 81.2039 159.054 81.2677 159.092 81.3416C159.131 81.4155 159.152 81.4974 159.153 81.5807V82.4755C159.153 82.6428 159.055 82.7156 158.931 82.6465Z" fill="#DADCE5"/>
+<path d="M169.843 88.9318L163.103 85.0398C163.036 84.9911 162.98 84.9272 162.942 84.8534C162.903 84.7795 162.883 84.6976 162.881 84.6143V83.7195C162.881 83.5558 162.98 83.4831 163.103 83.5522L169.843 87.4769C169.911 87.5244 169.967 87.5875 170.005 87.6609C170.044 87.7343 170.064 87.8159 170.065 87.8988V88.7936C170.065 88.9318 169.967 89.0191 169.843 88.9318Z" fill="#DADCE5"/>
+<path d="M154.959 95.8101L153.671 92.4965L151.332 95.8283L153.9 97.3123L156.014 98.5308L160.724 101.252L157.312 92.4601L154.959 95.8101Z" fill="#DADCE5"/>
+<path d="M166.137 98.2129C166.74 97.8663 166.743 96.7396 166.143 95.6962C165.544 94.6528 164.569 94.0879 163.966 94.4344C163.363 94.781 163.36 95.9077 163.96 96.9511C164.559 97.9945 165.534 98.5594 166.137 98.2129Z" fill="#DADCE5"/>
+<path d="M111.82 80.6859L110.118 87.5023V81.6679L111.82 80.6859Z" fill="#232733"/>
+<path d="M91.9923 69.1299L90.29 75.95V70.1157L91.9923 69.1299Z" fill="#232733"/>
+<path d="M119.989 111.422L79.4616 88.0224C79.2197 87.8488 79.0219 87.6207 78.8841 87.3566C78.7464 87.0926 78.6726 86.7998 78.6687 86.502V65.7691C78.6687 65.1835 79.0324 64.9143 79.4616 65.1689L119.989 88.568C120.232 88.7406 120.43 88.9678 120.569 89.2313C120.707 89.4948 120.781 89.7872 120.786 90.0848V110.836C120.786 111.407 120.429 111.676 119.989 111.422Z" fill="#E9EAF2"/>
+<path d="M90.7413 87.1131L88.5443 81.4497L84.5432 87.1422L88.9371 89.6811L92.5454 91.7653L100.602 96.4175L94.7678 81.3843L90.7413 87.1131Z" fill="#3BA3EE"/>
+<path d="M113.374 93.2196C114.399 92.628 114.398 90.7085 113.373 88.9322C112.347 87.156 110.685 86.1956 109.66 86.7873C108.636 87.3789 108.636 89.2984 109.662 91.0747C110.687 92.8509 112.349 93.8113 113.374 93.2196Z" fill="#3BA3EE"/>
+<path d="M109.372 79.271L109.368 71.4944L107.164 69.8394V79.271L104.712 80.686L108.266 82.7374L111.82 80.686L109.372 79.271Z" fill="#353C4C"/>
+<path d="M108.266 82.7374L110.117 87.5023V81.999V81.668L108.266 82.7374Z" fill="#232733"/>
+<path d="M104.712 80.6859L106.287 85.2617L110.118 87.5023L108.266 82.7373L104.712 80.6859Z" fill="#2B303F"/>
+<path d="M89.5408 67.7187V58.2834H87.3366V67.7151L84.885 69.13L88.4387 71.1851L91.9924 69.13L89.5408 67.7187Z" fill="#353C4C"/>
+<path d="M88.439 71.1851L90.2904 75.95V70.4467V70.1157L88.439 71.1851Z" fill="#232733"/>
+<path d="M84.885 69.1299L86.46 73.7057L90.2901 75.95L88.4387 71.1851L84.885 69.1299Z" fill="#2B303F"/>
+<path opacity="0.4" d="M65.2941 111.753L43.339 99.0145L16.8845 114.288L40.5528 128.015L67.011 112.742V110.763L65.2941 111.753Z" fill="#D6D8E5"/>
+<path d="M68.0803 110.036L43.339 95.7519L18.5977 110.036L16.8845 109.046V111.025L43.339 126.302L69.7935 111.025V109.046L68.0803 110.036Z" fill="#B1B4C4"/>
+<path d="M43.339 124.32L16.8845 109.046L43.339 93.7731L69.7935 109.046L43.339 124.32Z" fill="#E7E9F2"/>
+<path d="M43.2554 103.39L44.9831 102.394V28.6244L43.2554 29.621V103.39Z" fill="#B1B4C4"/>
+<path d="M43.3936 59.7201L55.4732 78.8381L57.201 78.1324L44.9831 58.8253L43.3936 59.7201Z" fill="#B1B4C4"/>
+<path d="M43.3208 63.1211L55.4077 82.3336V78.7399L43.3208 59.5965V63.1211Z" fill="#D6D8E5"/>
+<path d="M41.5933 102.394L43.321 103.39V29.621L41.5933 28.6244V102.394Z" fill="#D6D8E5"/>
+<path d="M55.408 110.37L57.1357 111.367V37.5977L55.408 36.6011V110.37Z" fill="#D6D8E5"/>
+<path d="M57.0703 111.367L58.7981 110.37V36.6011L57.0703 37.5977V111.367Z" fill="#B1B4C4"/>
+<path d="M43.3208 98.0725L55.4077 83.5994V80.1294L43.3208 94.6243V98.0725Z" fill="#D6D8E5"/>
+<path d="M43.3208 98.0725L44.9831 97.1632L55.4077 84.5961V83.3303L43.3208 98.0725Z" fill="#B1B4C4"/>
+<path d="M43.3208 59.7202L55.4077 45.2471V41.7771L43.3208 56.272V59.7202Z" fill="#D6D8E5"/>
+<path d="M43.3208 59.7202L44.9831 58.8072L55.4077 46.2438V44.978L43.3208 59.7202Z" fill="#B1B4C4"/>
+<path d="M29.5425 111.356L31.2702 110.359V36.5902L29.5425 37.5868V111.356Z" fill="#B1B4C4"/>
+<path d="M29.6807 67.6859L41.7603 86.8002L43.4881 86.0982L31.2702 66.7911L29.6807 67.6859Z" fill="#B1B4C4"/>
+<path d="M29.6079 71.0869L41.6949 90.2958V86.7057L29.6079 67.5587V71.0869Z" fill="#D6D8E5"/>
+<path d="M27.8843 110.359L29.6084 111.356V37.5868L27.8843 36.5902V110.359Z" fill="#D6D8E5"/>
+<path d="M41.6953 118.333L43.4231 119.329V45.5636L41.6953 44.5633V118.333Z" fill="#D6D8E5"/>
+<path d="M43.3574 119.329L45.0852 118.333V44.5633L43.3574 45.5636V119.329Z" fill="#B1B4C4"/>
+<path d="M29.6079 106.038L41.6949 91.5653V88.0916L29.6079 102.59V106.038Z" fill="#D6D8E5"/>
+<path d="M29.6079 106.038L31.2702 105.125L41.6949 92.5618V91.2924L29.6079 106.038Z" fill="#B1B4C4"/>
+<path d="M29.6079 67.686L41.6949 53.2129V49.7393L29.6079 64.2341V67.686Z" fill="#D6D8E5"/>
+<path d="M29.6079 67.686L31.2702 66.7731L41.6949 54.206V52.9402L29.6079 67.686Z" fill="#B1B4C4"/>
+<path d="M43.4226 49.2991L25.5886 39.0017L43.4226 28.708L61.2566 39.0017L43.4226 49.2991Z" fill="#F7DC6B"/>
+<path d="M42.0952 19.7893L20.9512 31.9962L14.8987 28.5007L36.0426 16.2938L42.0952 19.7893Z" fill="#353C4C"/>
+<path d="M14.8987 33.3966V28.5007L20.9512 31.9962V36.8921L14.8987 33.3966Z" fill="#2B303F"/>
+<path d="M20.9512 36.8921L42.0951 24.6851V19.7892L20.9512 31.9962V36.4156" fill="#232733"/>
+<path d="M42.0952 14.2968L20.9512 26.5038L14.8987 23.0083L36.0426 10.8013L42.0952 14.2968Z" fill="#353C4C"/>
+<path d="M14.8987 27.9078V23.0083L20.9512 26.5038V31.4033L14.8987 27.9078Z" fill="#2B303F"/>
+<path d="M20.9512 31.4033L42.0951 19.1963V14.2968L20.9512 26.5038V30.9268" fill="#232733"/>
+<path d="M26.1127 29.4791L13 21.957V19.2145L26.1127 26.6892V29.4791Z" fill="#D6D8E5"/>
+<path d="M45.0851 37.5796L13 19.2146L15.3752 17.8433L47.4603 36.2083L45.0851 37.5796Z" fill="#E7E9F2"/>
+<path d="M40.5383 25.1435L24.0647 15.6136V12.8674L40.5383 21.6952V25.1435Z" fill="#D6D8E5"/>
+<path d="M53.0326 29.3119L24.0647 12.871L26.4399 11.4998L55.4078 27.9406L53.0326 29.3119Z" fill="#E7E9F2"/>
+<path d="M32.8416 17.9306V20.6732L33.9691 28.5699L35.6423 29.6102L32.8416 17.9306Z" fill="#D6D8E5"/>
+<path d="M37.7993 30.7814L35.6314 19.542L32.8416 17.9306L34.5329 29.0064L37.7993 30.7814Z" fill="#E7E9F2"/>
+<path d="M32.8418 20.673L24.1885 22.9537L19.7437 20.3857L32.4635 17.705L32.8418 17.9305V20.673Z" fill="#B1B4C4"/>
+<path d="M32.8418 17.9305L20.7912 20.9932L18.2014 19.4982L30.3466 16.3956L32.8418 17.9305Z" fill="#E7E9F2"/>
+<path d="M43.4226 26.5947L25.5886 16.2974L43.4226 6L61.2566 16.2974L43.4226 26.5947Z" fill="#E7E9F2"/>
+<path d="M25.5886 48.0952V16.2974L43.4226 26.5948V58.3926L25.5886 48.0952Z" fill="#D6D8E5"/>
+<path d="M61.2568 16.2974V48.0952L43.4229 58.3926V26.5912L61.2568 16.2974Z" fill="#B1B4C4"/>
+<path d="M43.4226 37.6705L33.1834 31.7598L29.8916 21.2842L43.4226 29.0972V37.6705Z" fill="#3BA3EE"/>
+<path d="M61.2568 18.7999V27.3732L43.4229 37.6742V29.1009L61.2568 18.7999Z" fill="#005CC3"/>
+<path d="M122.947 85.7563L45.78 41.2023V38.4597L122.947 83.0137V85.7563Z" fill="#D6D8E5"/>
+<path d="M122.947 83.0138L45.78 38.4634L48.1552 37.0921L125.322 81.6425L122.947 83.0138Z" fill="#E7E9F2"/>
+<path d="M134.011 79.4128L56.8447 34.8588V32.1162L134.011 76.6702V79.4128Z" fill="#D6D8E5"/>
+<path d="M134.011 76.6703L56.8447 32.1163L59.2199 30.745L136.386 75.299L134.011 76.6703Z" fill="#E7E9F2"/>
+<path d="M136.387 78.0488L122.947 85.7564V83.0101L136.387 75.3062V78.0488Z" fill="#B1B4C4"/>
+<path d="M136.386 75.3062L122.954 83.0138L120.942 81.8534L134.375 74.1459L136.386 75.3062Z" fill="#E7E9F2"/>
+<path d="M124.34 73.8223L115.683 76.1029L111.238 73.5349L123.958 70.8542L124.34 71.0797V73.8223Z" fill="#B1B4C4"/>
+<path d="M124.34 71.0796L112.289 74.1422L109.699 72.6436L121.841 69.5446L124.34 71.0796Z" fill="#E7E9F2"/>
+<path d="M104.811 59.8184V62.561L105.938 70.4577L107.611 71.4943L104.811 59.8184Z" fill="#D6D8E5"/>
+<path d="M109.768 72.6692L107.6 61.4298L104.811 59.8184L106.506 70.8942L109.768 72.6692Z" fill="#E7E9F2"/>
+<path d="M104.811 62.5609L96.1575 64.8415L91.7126 62.2736L104.432 59.5928L104.811 59.8184V62.5609Z" fill="#B1B4C4"/>
+<path d="M104.811 59.8184L92.7636 62.881L90.1738 61.3861L102.315 58.2834L104.811 59.8184Z" fill="#E7E9F2"/>
+<path d="M85.2161 48.4953V51.2379L86.34 59.1346L88.0168 60.1749L85.2161 48.4953Z" fill="#D6D8E5"/>
+<path d="M90.1738 61.3461L88.0059 50.1067L85.2161 48.4953L86.9074 59.5711L90.1738 61.3461Z" fill="#E7E9F2"/>
+<path d="M85.2163 51.2378L76.563 53.5184L72.1182 50.9504L84.838 48.2697L85.2163 48.4952V51.2378Z" fill="#B1B4C4"/>
+<path d="M85.2163 48.4952L73.1657 51.5579L70.5759 50.0629L82.7211 46.9603L85.2163 48.4952Z" fill="#E7E9F2"/>
+<path d="M65.6216 37.1795V39.9221L66.7455 47.8188L68.4223 48.8554L65.6216 37.1795Z" fill="#D6D8E5"/>
+<path d="M70.5757 50.0303L68.4114 38.7909L65.6216 37.1795L67.313 48.2553L70.5757 50.0303Z" fill="#E7E9F2"/>
+<path d="M65.6216 39.922L56.9683 42.2026L52.5234 39.6347L65.2433 36.9539L65.6216 37.1794V39.922Z" fill="#B1B4C4"/>
+<path d="M65.6218 37.1794L53.5712 40.2421L50.9814 38.7471L63.123 35.6445L65.6218 37.1794Z" fill="#E7E9F2"/>
+<path d="M36.6428 126.091V112.295L15.8298 109.919V123.803C15.8338 124.041 15.904 124.272 16.0325 124.472C16.1611 124.672 16.3428 124.832 16.5573 124.934L26.3127 130.641C27.4039 131.289 29.3499 131.209 30.623 130.459L35.5698 127.55C36.2973 127.128 36.661 126.586 36.6246 126.095L36.6428 126.091Z" fill="#D6D8E5"/>
+<path d="M36.621 113.8V112.294H35.0205L26.1381 107.086C25.0469 106.438 23.1009 106.522 21.8278 107.268L16.881 110.178C16.7917 110.228 16.7055 110.284 16.6228 110.345L15.8298 109.919C15.8298 109.919 15.8298 111.509 15.8298 111.563C15.8353 111.8 15.9062 112.031 16.0345 112.23C16.1629 112.429 16.3439 112.588 16.5573 112.691L26.3127 118.394C27.4039 119.042 29.3499 118.958 30.623 118.212L35.5698 115.303C36.2973 114.87 36.661 114.31 36.621 113.786V113.8Z" fill="#EDF0F9"/>
+<path d="M26.3129 116.758L16.5721 111.051C15.4809 110.403 15.6046 109.272 16.8813 108.526L21.8281 105.616C23.1012 104.889 25.0326 104.787 26.1383 105.434L35.8828 111.141C36.974 111.789 36.8467 112.92 35.57 113.666L30.6232 116.576C29.3683 117.321 27.4187 117.405 26.3129 116.758Z" fill="#E2E5F2"/>
+<path d="M24.1194 108.966V108.417H23.7884L23.6829 108.352C23.3575 108.183 22.9964 108.095 22.6299 108.095C22.2635 108.095 21.9024 108.183 21.5769 108.352C21.5147 108.387 21.4562 108.428 21.4023 108.475L21.144 108.417V108.966C21.1527 109.099 21.1977 109.227 21.274 109.336C21.3503 109.445 21.4551 109.531 21.5769 109.585C21.9029 109.751 22.2638 109.838 22.6299 109.838C22.996 109.838 23.3569 109.751 23.6829 109.585C23.8036 109.529 23.9074 109.443 23.984 109.334C24.0607 109.225 24.1074 109.099 24.1194 108.966V108.966Z" fill="#005CC3"/>
+<path d="M22.6317 109.29C23.4533 109.29 24.1194 108.899 24.1194 108.417C24.1194 107.935 23.4533 107.544 22.6317 107.544C21.8101 107.544 21.144 107.935 21.144 108.417C21.144 108.899 21.8101 109.29 22.6317 109.29Z" fill="#3BA3EE"/>
+<path d="M27.7129 111.036V110.487H27.3819L27.2801 110.421C26.9546 110.253 26.5935 110.165 26.227 110.165C25.8606 110.165 25.4995 110.253 25.174 110.421C25.1101 110.456 25.0503 110.497 24.9958 110.545L24.7375 110.487V111.036C24.7496 111.168 24.7963 111.295 24.8729 111.404C24.9495 111.512 25.0534 111.599 25.174 111.654C25.5 111.821 25.8609 111.908 26.227 111.908C26.5932 111.908 26.9541 111.821 27.2801 111.654C27.4019 111.601 27.5066 111.515 27.583 111.406C27.6593 111.297 27.7042 111.169 27.7129 111.036Z" fill="#005CC3"/>
+<path d="M26.2252 111.36C27.0469 111.36 27.7129 110.969 27.7129 110.487C27.7129 110.005 27.0469 109.614 26.2252 109.614C25.4036 109.614 24.7375 110.005 24.7375 110.487C24.7375 110.969 25.4036 111.36 26.2252 111.36Z" fill="#3BA3EE"/>
+<path d="M31.314 113.248V112.698H30.9793L30.8775 112.633C30.552 112.464 30.1909 112.377 29.8245 112.377C29.458 112.377 29.0969 112.464 28.7714 112.633C28.7083 112.668 28.6487 112.71 28.5932 112.756L28.335 112.698V113.248C28.3463 113.38 28.3927 113.507 28.4694 113.616C28.5461 113.725 28.6504 113.811 28.7714 113.866C29.0969 114.034 29.458 114.122 29.8245 114.122C30.1909 114.122 30.552 114.034 30.8775 113.866C30.9986 113.811 31.1028 113.725 31.1795 113.616C31.2562 113.507 31.3026 113.38 31.314 113.248V113.248Z" fill="#005CC3"/>
+<path d="M29.8226 113.571C30.6443 113.571 31.3103 113.18 31.3103 112.698C31.3103 112.216 30.6443 111.825 29.8226 111.825C29.001 111.825 28.335 112.216 28.335 112.698C28.335 113.18 29.001 113.571 29.8226 113.571Z" fill="#3BA3EE"/>
+<path d="M195.308 126.792L164.929 109.253C163.019 108.161 161.473 105.197 161.473 102.654V54.856C161.473 52.3098 163.019 51.1459 164.929 52.2443L195.308 69.7873C197.214 70.8785 198.76 73.843 198.76 76.3855V124.191C198.76 126.737 197.214 127.894 195.308 126.792Z" fill="#211B49"/>
+<path d="M162.041 52.3789C162.347 52.1971 162.668 52.0425 163.001 51.9169L163.772 53.441L162.041 52.3789Z" fill="#211B49"/>
+<path d="M194.511 127.192L164.128 109.642C162.222 108.551 160.677 105.586 160.677 103.044V55.2561C160.677 52.7099 162.222 51.5423 164.128 52.6444L194.511 70.1874C196.417 71.2786 197.963 74.2394 197.963 76.782V124.58C197.963 127.123 196.417 128.294 194.511 127.192Z" fill="#2E245B"/>
+<path d="M169.654 62.6107L164.128 59.4208V57.4275L169.654 60.6175V62.6107Z" fill="#A3ABD9"/>
+<path d="M194.166 76.7637L170.69 63.2073V61.2177L194.166 74.7705V76.7637Z" fill="#A548B5"/>
+<path d="M169.654 68.9907L164.128 65.8007V63.8074L169.654 66.9974V68.9907Z" fill="#A3ABD9"/>
+<path d="M186.226 78.5569L170.69 69.5872V67.5939L186.226 76.5637V78.5569Z" fill="#F9B937"/>
+<path d="M169.654 72.1771L164.128 68.9908V66.9975L169.654 70.1838V72.1771Z" fill="#A3ABD9"/>
+<path d="M190.023 83.9403L170.69 72.7773V70.784L190.023 81.9471V83.9403Z" fill="#F27320"/>
+<path d="M169.654 75.3671L164.128 72.1771V70.1838L169.654 73.3738V75.3671Z" fill="#A3ABD9"/>
+<path d="M184.156 83.7402L170.69 75.9671V73.9739L184.156 81.7469V83.7402Z" fill="#A3ABD9"/>
+<path d="M169.654 65.8008L164.128 62.6108V60.6176L169.654 63.8075V65.8008Z" fill="#A3ABD9"/>
+<path d="M182.428 73.1774L170.69 66.3973V64.4041L182.428 71.1804V73.1774Z" fill="#248AEE"/>
+<path d="M169.654 78.557L164.128 75.367V73.3737L169.654 76.5637V78.557Z" fill="#A3ABD9"/>
+<path d="M177.594 83.14L170.69 79.1535V77.1602L177.594 81.1468V83.14Z" fill="#A548B5"/>
+<path d="M169.654 84.9333L164.128 81.7469V79.7537L169.654 82.9436V84.9333Z" fill="#A3ABD9"/>
+<path d="M192.442 98.0896L170.69 85.5334V83.5402L192.442 96.0963V98.0896Z" fill="#F9B937"/>
+<path d="M169.654 88.1232L164.128 84.9333V82.94L169.654 86.13V88.1232Z" fill="#A3ABD9"/>
+<path d="M177.249 92.5098L170.69 88.7233V86.73L177.249 90.5165V92.5098Z" fill="#F27320"/>
+<path d="M169.654 91.3132L164.128 88.1232V86.1299L169.654 89.3199V91.3132Z" fill="#A3ABD9"/>
+<path d="M190.023 103.073L170.69 91.9097V89.9201L190.023 101.08V103.073Z" fill="#A3ABD9"/>
+<path d="M169.654 81.7469L164.128 78.5569V76.5637L169.654 79.7536V81.7469Z" fill="#A3ABD9"/>
+<path d="M188.986 92.9101L170.69 82.3436V80.3503L188.986 90.9168V92.9101Z" fill="#248AEE"/>
+<path d="M169.654 94.5032L164.128 91.3132V89.3199L169.654 92.5099V94.5032Z" fill="#A3ABD9"/>
+<path d="M173.106 96.4965L170.69 95.0997V93.1064L173.106 94.5032V96.4965Z" fill="#A548B5"/>
+<path d="M169.654 100.879L164.128 97.6932V95.6999L169.654 98.8899V100.879Z" fill="#A3ABD9"/>
+<path d="M175.179 104.069L170.69 101.48V99.4864L175.179 102.076V104.069Z" fill="#F9B937"/>
+<path d="M169.654 104.069L164.128 100.879V98.8861L169.654 102.076V104.069Z" fill="#A3ABD9"/>
+<path d="M182.428 111.446L170.69 104.67V102.676L182.428 109.453V111.446Z" fill="#F27320"/>
+<path d="M169.654 107.259L164.128 104.069V102.076L169.654 105.266V107.259Z" fill="#A3ABD9"/>
+<path d="M189.332 118.623L170.69 107.856V105.863L189.332 116.629V118.623Z" fill="#A3ABD9"/>
+<path d="M169.654 97.6931L164.128 94.5032V92.5099L169.654 95.6999V97.6931Z" fill="#A3ABD9"/>
+<path d="M194.166 111.846L170.69 98.2897V96.2964L194.166 109.849V111.846Z" fill="#248AEE"/>
+<path d="M95.8273 48.162C95.8844 48.195 95.9103 48.1747 95.9103 48.1159L95.9103 46.6349L96.5328 46.9944C97.0205 47.276 97.2799 47.126 97.2798 46.5795L97.2798 45.1455C97.2798 44.5931 97.0204 44.1494 96.5327 43.8679L95.2876 43.1489C95.2357 43.119 95.2046 43.1363 95.2046 43.195L95.2047 47.7085C95.2047 47.7673 95.2359 47.8205 95.2877 47.8505L95.8273 48.162ZM96.3668 46.1228L95.9102 45.8592L95.9102 44.2842L96.3667 44.5478C96.5068 44.6286 96.5742 44.7499 96.5742 44.9027L96.5743 46.0075C96.5743 46.1544 96.5068 46.2037 96.3668 46.1228ZM98.4213 49.6598C98.4732 49.6897 98.5043 49.6724 98.5043 49.6137L98.5042 48.1327L98.8622 48.3394L99.2098 50.0328C99.2202 50.0917 99.2462 50.136 99.298 50.166L99.8376 50.4775C99.8947 50.5105 99.9258 50.4932 99.9102 50.4137L99.5522 48.6672C99.8012 48.6876 99.9309 48.5039 99.9309 48.1102L99.9308 46.6762C99.9308 46.1237 99.6714 45.6801 99.1838 45.3986L97.8816 44.6467C97.8297 44.6167 97.7986 44.634 97.7986 44.6928L97.7987 49.2063C97.7987 49.265 97.8298 49.3183 97.8817 49.3482L98.4213 49.6598ZM99.0178 47.6535L98.5042 47.3569L98.5042 45.7819L99.0178 46.0785C99.1527 46.1563 99.2253 46.2805 99.2253 46.4333L99.2253 47.5382C99.2253 47.691 99.1527 47.7314 99.0178 47.6535ZM101.072 51.1905C101.124 51.2204 101.155 51.2031 101.155 51.1443L101.155 46.6309C101.155 46.5721 101.124 46.5189 101.072 46.4889L100.533 46.1774C100.476 46.1444 100.45 46.1647 100.45 46.2235L100.45 50.737C100.45 50.7957 100.476 50.846 100.533 50.8789L101.072 51.1905ZM102.255 51.8734C102.323 51.9124 102.359 51.8922 102.359 51.8158L102.359 49.1712L102.395 49.1921L102.909 52.1451C102.924 52.2246 102.961 52.2808 103.023 52.3168L103.277 52.4635C103.339 52.4995 103.376 52.4852 103.391 52.4237L103.905 50.0638L103.941 50.0848L103.941 52.7294C103.941 52.8058 103.978 52.8679 104.045 52.9069L104.528 53.1854C104.595 53.2244 104.631 53.2042 104.631 53.1278L104.631 48.6614C104.631 48.585 104.595 48.5228 104.527 48.4839L103.843 48.0885C103.78 48.0526 103.744 48.0668 103.728 48.1284L103.153 50.7226L102.577 47.4634C102.561 47.3839 102.525 47.3276 102.463 47.2917L101.778 46.8963C101.71 46.8574 101.674 46.8775 101.674 46.9539L101.674 51.4204C101.674 51.4968 101.71 51.5589 101.778 51.5978L102.255 51.8734ZM107.137 54.6922C107.199 54.7281 107.22 54.7048 107.22 54.6461L107.22 54.0584C107.22 53.9937 107.199 53.9524 107.137 53.9164L105.84 53.1676L105.84 51.9804L106.831 52.5526C106.883 52.5825 106.914 52.5652 106.914 52.5006L106.914 51.9188C106.914 51.8541 106.883 51.8009 106.831 51.7709L105.84 51.1988L105.84 50.0234L107.137 50.7723C107.199 50.8082 107.22 50.7791 107.22 50.7203L107.22 50.1326C107.22 50.0738 107.199 50.0266 107.137 49.9906L105.228 48.8883C105.181 48.8613 105.15 48.8786 105.15 48.9374L105.15 53.4509C105.15 53.5096 105.181 53.5629 105.228 53.5898L107.137 54.6922Z" fill="#BDC1D1"/>
+<path d="M108.371 55.405C108.423 55.4348 108.454 55.4174 108.454 55.3586L108.454 53.4839L109.424 54.0444C109.476 54.0742 109.507 54.0627 109.507 53.9981L109.507 53.4104C109.507 53.3516 109.476 53.2985 109.424 53.2687L108.454 52.7081L108.454 51.5269L109.734 52.2663C109.786 52.2961 109.817 52.2787 109.817 52.22L109.817 51.6323C109.817 51.5735 109.786 51.5203 109.734 51.4905L107.834 50.3933C107.777 50.3605 107.751 50.3809 107.751 50.4397L107.751 54.9532C107.751 55.0119 107.777 55.0621 107.834 55.0949L108.371 55.405ZM112.264 57.653C112.321 57.6858 112.347 57.6713 112.347 57.6067L112.347 57.019C112.347 56.9602 112.321 56.91 112.264 56.8772L111.035 56.1677L111.035 52.3359C111.035 52.2771 111.01 52.227 110.953 52.1942L110.416 51.8841C110.364 51.8543 110.333 51.8716 110.333 51.9304L110.333 56.4439C110.333 56.5085 110.364 56.5558 110.416 56.5856L112.264 57.653ZM114.841 59.1408C114.903 59.1765 114.924 59.1532 114.924 59.0944L114.924 58.5067C114.924 58.4421 114.903 58.4008 114.841 58.365L113.55 57.6196L113.55 56.4325L114.536 57.002C114.588 57.0318 114.619 57.0144 114.619 56.9498L114.619 56.3679C114.619 56.3033 114.588 56.2501 114.536 56.2203L113.55 55.6509L113.55 54.4755L114.841 55.2209C114.903 55.2566 114.924 55.2274 114.924 55.1687L114.924 54.581C114.924 54.5222 114.903 54.475 114.841 54.4392L112.941 53.342C112.894 53.3152 112.863 53.3326 112.863 53.3913L112.863 57.9048C112.863 57.9636 112.894 58.0167 112.941 58.0436L114.841 59.1408ZM115.905 59.755C115.962 59.7877 116.003 59.7881 116.024 59.7412L116.519 58.6053L117.015 60.3137C117.036 60.3844 117.077 60.4317 117.134 60.4645L117.666 60.7716C117.748 60.8193 117.774 60.7755 117.743 60.6753L116.922 57.9445L117.712 56.238C117.743 56.1736 117.717 56.0999 117.635 56.0522L117.118 55.7541C117.061 55.7213 117.02 55.7209 116.999 55.7678L116.519 56.8833L116.039 55.2132C116.018 55.1425 115.977 55.0952 115.92 55.0624L115.404 54.7642C115.321 54.7165 115.295 54.7604 115.326 54.8605L116.111 57.4764L115.296 59.2621C115.265 59.3265 115.29 59.4002 115.373 59.4479L115.905 59.755Z" fill="#BDC1D1"/>
+<path d="M0 0H38.2661V16.1597C38.2661 17.8165 36.923 19.1597 35.2661 19.1597H0V0Z" fill="#F27320"/>
+<path d="M5 14.1597H6.91064V8.16113H6.94873L11.1001 14.1597H12.7632V5H10.8525V10.9541H10.8145L6.67578 5H5V14.1597Z" fill="white"/>
+<path d="M14.293 14.1597H20.3613V12.5791H16.21V10.2749H20.1265V8.77686H16.21V6.58057H20.3613V5H14.293V14.1597Z" fill="white"/>
+<path d="M23.6812 14.1597H25.5537L27.2422 8.02148H27.2803L28.9624 14.1597H30.835L33.2661 5H31.2793L29.8257 11.5635H29.7876L28.0991 5H26.417L24.7285 11.5635H24.6904L23.2432 5H21.2563L23.6812 14.1597Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="166.257" y1="94.3359" x2="66.2726" y2="-41.5467" gradientUnits="userSpaceOnUse">
+<stop stop-color="#A3ABD9"/>
+<stop offset="1" stop-color="#A3ABD9" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(14.6005 8.68489) rotate(25.4082) scale(131.918 124.405)">
+<stop stop-color="#3E88F6"/>
+<stop offset="0.521608" stop-color="#3E9EF6" stop-opacity="0.26"/>
+<stop offset="1" stop-color="#3EF6F6" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint2_linear" x1="-1.75674e-07" y1="17.0703" x2="120.974" y2="125.007" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3E88F6"/>
+<stop offset="0.47914" stop-color="#3EB4F6" stop-opacity="0.33"/>
+<stop offset="1" stop-color="#3EEBF6" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="202.051" y1="-2.09636" x2="176.463" y2="147.951" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078E3"/>
+<stop offset="1" stop-color="#A548B5" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="211" height="115" rx="3" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/browsers/chrome.svg b/public/images/browsers/chrome.svg
new file mode 100644
index 0000000000..c40feec734
--- /dev/null
+++ b/public/images/browsers/chrome.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1 1 176 176"><style><![CDATA[.B{clip-path:url(#C)}.C{fill:#3e2723}.D{fill-opacity:.15}.E{fill-opacity:.2}]]></style><defs><circle id="A" cx="96" cy="96" r="88"/><path id="B" d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z"/></defs><clipPath id="C"><use xlink:href="#A"/></clipPath><g class="B" transform="translate(-7 -7)"><path d="M21.97 8v108h39.4L96 56h88V8z" fill="#db4437"/><linearGradient id="D" x1="29.34" x2="81.84" y1="75.02" y2="44.35" gradientUnits="userSpaceOnUse"><stop stop-color="#a52714" stop-opacity=".6" offset="0"/><stop stop-color="#a52714" stop-opacity="0" offset=".66"/></linearGradient><path d="M21.97 8v108h39.4L96 56h88V8z" fill="url(#D)"/><path d="M62.3 115.6L22.48 47.3l-.58 1 39.54 67.8z" class="C D"/><use xlink:href="#B" fill="#0f9d58"/><linearGradient id="E" x1="110.9" x2="52.54" y1="164.5" y2="130.3" gradientUnits="userSpaceOnUse"><stop stop-color="#055524" stop-opacity=".4" offset="0"/><stop stop-color="#055524" stop-opacity="0" offset=".33"/></linearGradient><path d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z" fill="url(#E)"/><path d="M129.8 117.3l-.83-.48-38.4 67.15h1.15l38.1-66.64z" fill="#263238" class="D"/><defs><path id="F" d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z"/></defs><clipPath id="G"><use xlink:href="#F"/></clipPath><g clip-path="url(#G)"><path d="M96 56l34.65 60-38.88 68H184V56z" fill="#ffcd40"/><linearGradient id="H" x1="121.9" x2="136.6" y1="49.8" y2="114.1" gradientUnits="userSpaceOnUse"><stop stop-color="#ea6100" stop-opacity=".3" offset="0"/><stop stop-color="#ea6100" stop-opacity="0" offset=".66"/></linearGradient><path d="M96 56l34.65 60-38.88 68H184V56z" fill="url(#H)"/></g><path d="M96 56l34.65 60-38.88 68H184V56z" fill="#ffcd40"/><path d="M96 56l34.65 60-38.88 68H184V56z" fill="url(#H)"/><defs><path id="I" d="M96 56l34.65 60-38.88 68H184V56z"/></defs><clipPath id="J"><use xlink:href="#I"/></clipPath><g clip-path="url(#J)"><path d="M21.97 8v108h39.4L96 56h88V8z" fill="#db4437"/><path d="M21.97 8v108h39.4L96 56h88V8z" fill="url(#D)"/></g></g><radialGradient id="K" cx="668.2" cy="55.95" r="84.08" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#3e2723" stop-opacity=".2" offset="0"/><stop stop-color="#3e2723" stop-opacity="0" offset="1"/></radialGradient><g transform="translate(-7 -7)"><path d="M96 56v20.95L174.4 56z" fill="url(#K)" class="B"/><g class="B"><defs><path id="L" d="M21.97 8v40.34L61.36 116 96 56h88V8z"/></defs><clipPath id="M"><use xlink:href="#L"/></clipPath><g clip-path="url(#M)"><use xlink:href="#B" fill="#0f9d58"/><path d="M8 184h83.77l38.88-38.88V116h-69.3L8 24.48z" fill="url(#E)"/></g></g></g><radialGradient id="N" cx="597.9" cy="48.52" r="78.04" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#3e2723" stop-opacity=".2" offset="0"/><stop stop-color="#3e2723" stop-opacity="0" offset="1"/></radialGradient><path transform="translate(-7 -7)" d="M21.97 48.45l57.25 57.24L61.36 116z" fill="url(#N)" class="B"/><radialGradient id="O" cx="671.8" cy="96.14" r="87.87" gradientTransform="translate(-576)" gradientUnits="userSpaceOnUse"><stop stop-color="#263238" stop-opacity=".2" offset="0"/><stop stop-color="#263238" stop-opacity="0" offset="1"/></radialGradient><g transform="translate(-7 -7)"><path d="M91.83 183.9l20.96-78.2 17.86 10.3z" fill="url(#O)" class="B"/><g class="B"><circle cx="96" cy="96" r="40" fill="#f1f1f1"/><circle cx="96" cy="96" r="32" fill="#4285f4"/><path d="M96 55c-22.1 0-40 17.9-40 40v1c0-22.1 17.9-40 40-40h88v-1H96z" class="C E"/><path d="M130.6 116c-6.92 11.94-19.8 20-34.6 20-14.8 0-27.7-8.06-34.6-20h-.04L8 24.48v1L61.4 117c6.92 11.94 19.8 20 34.6 20 14.8 0 27.68-8.05 34.6-20h.05v-1h-.06z" fill="#fff" fill-opacity=".1"/><path d="M97 56c-.17 0-.33.02-.5.03C118.36 56.3 136 74.08 136 96s-17.64 39.7-39.5 39.97c.17 0 .33.03.5.03 22.1 0 40-17.9 40-40s-17.9-40-40-40z" opacity=".1" class="C"/><path d="M131 117.3c3.4-5.88 5.37-12.68 5.37-19.96a39.87 39.87 0 0 0-1.87-12.09c.95 3.42 1.5 7 1.5 10.73 0 7.28-1.97 14.08-5.37 19.96l.02.04-38.88 68h1.16L131 117.3z" fill="#fff" class="E"/><path d="M96 9c48.43 0 87.72 39.13 88 87.5 0-.17.01-.33.01-.5 0-48.6-39.4-88-88-88S8 47.4 8 96c0 .17.01.33.01.5C8.28 48.13 47.57 9 96 9z" fill="#fff" class="E"/><path d="M96 183c48.43 0 87.72-39.13 88-87.5 0 .17.01.33.01.5 0 48.6-39.4 88-88 88S8 144.6 8 96c0-.17.01-.33.01-.5.27 48.37 39.56 87.5 88 87.5z" class="C D"/></g></g></svg>
\ No newline at end of file
diff --git a/public/images/browsers/edge.svg b/public/images/browsers/edge.svg
new file mode 100644
index 0000000000..bbf04d7e39
--- /dev/null
+++ b/public/images/browsers/edge.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{opacity:0.35;fill:url(#radial-gradient);}.cls-2,.cls-4{isolation:isolate;}.cls-3{fill:url(#linear-gradient-2);}.cls-4{opacity:0.41;fill:url(#radial-gradient-2);}.cls-5{fill:url(#radial-gradient-3);}.cls-6{fill:url(#radial-gradient-4);}</style><linearGradient id="linear-gradient" x1="63.33" y1="84.03" x2="241.67" y2="84.03" gradientTransform="matrix(1, 0, 0, -1, 0, 266)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0c59a4"/><stop offset="1" stop-color="#114a8b"/></linearGradient><radialGradient id="radial-gradient" cx="161.83" cy="68.91" r="95.38" gradientTransform="matrix(1, 0, 0, -0.95, 0, 248.84)" gradientUnits="userSpaceOnUse"><stop offset="0.72" stop-opacity="0"/><stop offset="0.95" stop-opacity="0.53"/><stop offset="1"/></radialGradient><linearGradient id="linear-gradient-2" x1="157.35" y1="161.39" x2="45.96" y2="40.06" gradientTransform="matrix(1, 0, 0, -1, 0, 266)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#1b9de2"/><stop offset="0.16" stop-color="#1595df"/><stop offset="0.67" stop-color="#0680d7"/><stop offset="1" stop-color="#0078d4"/></linearGradient><radialGradient id="radial-gradient-2" cx="-340.29" cy="62.99" r="143.24" gradientTransform="matrix(0.15, -0.99, -0.8, -0.12, 176.64, -125.4)" gradientUnits="userSpaceOnUse"><stop offset="0.76" stop-opacity="0"/><stop offset="0.95" stop-opacity="0.5"/><stop offset="1"/></radialGradient><radialGradient id="radial-gradient-3" cx="113.37" cy="570.21" r="202.43" gradientTransform="matrix(-0.04, 1, 2.13, 0.08, -1179.54, -106.69)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#35c1f1"/><stop offset="0.11" stop-color="#34c1ed"/><stop offset="0.23" stop-color="#2fc2df"/><stop offset="0.31" stop-color="#2bc3d2"/><stop offset="0.67" stop-color="#36c752"/></radialGradient><radialGradient id="radial-gradient-4" cx="376.52" cy="567.97" r="97.34" gradientTransform="matrix(0.28, 0.96, 0.78, -0.23, -303.76, -148.5)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#66eb6e"/><stop offset="1" stop-color="#66eb6e" stop-opacity="0"/></radialGradient></defs><title>Edge_Logo_265x265</title><path class="cls-1" d="M235.68,195.46a93.73,93.73,0,0,1-10.54,4.71,101.87,101.87,0,0,1-35.9,6.46c-47.32,0-88.54-32.55-88.54-74.32A31.48,31.48,0,0,1,117.13,105c-42.8,1.8-53.8,46.4-53.8,72.53,0,73.88,68.09,81.37,82.76,81.37,7.91,0,19.84-2.3,27-4.56l1.31-.44A128.34,128.34,0,0,0,241,201.1,4,4,0,0,0,235.68,195.46Z" transform="translate(-4.63 -4.92)"/><path class="cls-2" d="M235.68,195.46a93.73,93.73,0,0,1-10.54,4.71,101.87,101.87,0,0,1-35.9,6.46c-47.32,0-88.54-32.55-88.54-74.32A31.48,31.48,0,0,1,117.13,105c-42.8,1.8-53.8,46.4-53.8,72.53,0,73.88,68.09,81.37,82.76,81.37,7.91,0,19.84-2.3,27-4.56l1.31-.44A128.34,128.34,0,0,0,241,201.1,4,4,0,0,0,235.68,195.46Z" transform="translate(-4.63 -4.92)"/><path class="cls-3" d="M110.34,246.34A79.2,79.2,0,0,1,87.6,225,80.72,80.72,0,0,1,117.13,105c3.12-1.47,8.45-4.13,15.54-4a32.35,32.35,0,0,1,25.69,13,31.88,31.88,0,0,1,6.36,18.66c0-.21,24.46-79.6-80-79.6-43.9,0-80,41.66-80,78.21a130.15,130.15,0,0,0,12.11,56,128,128,0,0,0,156.38,67.11,75.55,75.55,0,0,1-62.78-8Z" transform="translate(-4.63 -4.92)"/><path class="cls-4" d="M110.34,246.34A79.2,79.2,0,0,1,87.6,225,80.72,80.72,0,0,1,117.13,105c3.12-1.47,8.45-4.13,15.54-4a32.35,32.35,0,0,1,25.69,13,31.88,31.88,0,0,1,6.36,18.66c0-.21,24.46-79.6-80-79.6-43.9,0-80,41.66-80,78.21a130.15,130.15,0,0,0,12.11,56,128,128,0,0,0,156.38,67.11,75.55,75.55,0,0,1-62.78-8Z" transform="translate(-4.63 -4.92)"/><path class="cls-5" d="M156.94,153.78c-.81,1.05-3.3,2.5-3.3,5.66,0,2.61,1.7,5.12,4.72,7.23,14.38,10,41.49,8.68,41.56,8.68A59.56,59.56,0,0,0,230.19,167a61.38,61.38,0,0,0,30.43-52.88c.26-22.41-8-37.31-11.34-43.91C228.09,28.76,182.35,4.92,132.61,4.92a128,128,0,0,0-128,126.2c.48-36.54,36.8-66.05,80-66.05,3.5,0,23.46.34,42,10.07,16.34,8.58,24.9,18.94,30.85,29.21,6.18,10.67,7.28,24.15,7.28,29.52S162,147.2,156.94,153.78Z" transform="translate(-4.63 -4.92)"/><path class="cls-6" d="M156.94,153.78c-.81,1.05-3.3,2.5-3.3,5.66,0,2.61,1.7,5.12,4.72,7.23,14.38,10,41.49,8.68,41.56,8.68A59.56,59.56,0,0,0,230.19,167a61.38,61.38,0,0,0,30.43-52.88c.26-22.41-8-37.31-11.34-43.91C228.09,28.76,182.35,4.92,132.61,4.92a128,128,0,0,0-128,126.2c.48-36.54,36.8-66.05,80-66.05,3.5,0,23.46.34,42,10.07,16.34,8.58,24.9,18.94,30.85,29.21,6.18,10.67,7.28,24.15,7.28,29.52S162,147.2,156.94,153.78Z" transform="translate(-4.63 -4.92)"/></svg>
\ No newline at end of file
diff --git a/public/images/browsers/firefox.svg b/public/images/browsers/firefox.svg
new file mode 100644
index 0000000000..47914d66df
--- /dev/null
+++ b/public/images/browsers/firefox.svg
@@ -0,0 +1,450 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   height="81.96698"
+   width="87.418564"
+   id="svg1008"
+   version="1.1"
+   viewBox="0 0 87.418564 81.96698">
+  <metadata
+     id="metadata1012">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs978">
+    <linearGradient
+       gradientTransform="translate(3.7,-0.0040855)"
+       gradientUnits="userSpaceOnUse"
+       y2="74.468002"
+       x2="6.447"
+       y1="12.393"
+       x1="70.786003"
+       id="a">
+      <stop
+         id="stop834"
+         stop-color="#fff44f"
+         offset=".048" />
+      <stop
+         id="stop836"
+         stop-color="#ffe847"
+         offset=".111" />
+      <stop
+         id="stop838"
+         stop-color="#ffc830"
+         offset=".225" />
+      <stop
+         id="stop840"
+         stop-color="#ff980e"
+         offset=".368" />
+      <stop
+         id="stop842"
+         stop-color="#ff8b16"
+         offset=".401" />
+      <stop
+         id="stop844"
+         stop-color="#ff672a"
+         offset=".462" />
+      <stop
+         id="stop846"
+         stop-color="#ff3647"
+         offset=".534" />
+      <stop
+         id="stop848"
+         stop-color="#e31587"
+         offset=".705" />
+    </linearGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="80.796997"
+       cy="-8515.1211"
+       cx="-7907.187"
+       id="b">
+      <stop
+         id="stop851"
+         stop-color="#ffbd4f"
+         offset=".129" />
+      <stop
+         id="stop853"
+         stop-color="#ffac31"
+         offset=".186" />
+      <stop
+         id="stop855"
+         stop-color="#ff9d17"
+         offset=".247" />
+      <stop
+         id="stop857"
+         stop-color="#ff980e"
+         offset=".283" />
+      <stop
+         id="stop859"
+         stop-color="#ff563b"
+         offset=".403" />
+      <stop
+         id="stop861"
+         stop-color="#ff3750"
+         offset=".467" />
+      <stop
+         id="stop863"
+         stop-color="#f5156c"
+         offset=".71" />
+      <stop
+         id="stop865"
+         stop-color="#eb0878"
+         offset=".782" />
+      <stop
+         id="stop867"
+         stop-color="#e50080"
+         offset=".86" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="80.796997"
+       cy="-8482.0889"
+       cx="-7936.7109"
+       id="c">
+      <stop
+         id="stop870"
+         stop-color="#960e18"
+         offset=".3" />
+      <stop
+         id="stop872"
+         stop-opacity=".74"
+         stop-color="#b11927"
+         offset=".351" />
+      <stop
+         id="stop874"
+         stop-opacity=".343"
+         stop-color="#db293d"
+         offset=".435" />
+      <stop
+         id="stop876"
+         stop-opacity=".094"
+         stop-color="#f5334b"
+         offset=".497" />
+      <stop
+         id="stop878"
+         stop-opacity="0"
+         stop-color="#ff3750"
+         offset=".53" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="58.534"
+       cy="-8533.457"
+       cx="-7926.9702"
+       id="d">
+      <stop
+         id="stop881"
+         stop-color="#fff44f"
+         offset=".132" />
+      <stop
+         id="stop883"
+         stop-color="#ffdc3e"
+         offset=".252" />
+      <stop
+         id="stop885"
+         stop-color="#ff9d12"
+         offset=".506" />
+      <stop
+         id="stop887"
+         stop-color="#ff980e"
+         offset=".526" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="38.471001"
+       cy="-8460.9844"
+       cx="-7945.6479"
+       id="e">
+      <stop
+         id="stop890"
+         stop-color="#3a8ee6"
+         offset=".353" />
+      <stop
+         id="stop892"
+         stop-color="#5c79f0"
+         offset=".472" />
+      <stop
+         id="stop894"
+         stop-color="#9059ff"
+         offset=".669" />
+      <stop
+         id="stop896"
+         stop-color="#c139e6"
+         offset="1" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.972,-0.235,0.275,1.138,10095.002,7833.7939)"
+       r="20.396999"
+       cy="-8491.5459"
+       cx="-7935.6201"
+       id="f">
+      <stop
+         id="stop899"
+         stop-opacity="0"
+         stop-color="#9059ff"
+         offset=".206" />
+      <stop
+         id="stop901"
+         stop-opacity=".064"
+         stop-color="#8c4ff3"
+         offset=".278" />
+      <stop
+         id="stop903"
+         stop-opacity=".45"
+         stop-color="#7716a8"
+         offset=".747" />
+      <stop
+         id="stop905"
+         stop-opacity=".6"
+         stop-color="#6e008b"
+         offset=".975" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="27.676001"
+       cy="-8518.4268"
+       cx="-7937.731"
+       id="g">
+      <stop
+         id="stop908"
+         stop-color="#ffe226"
+         offset="0" />
+      <stop
+         id="stop910"
+         stop-color="#ffdb27"
+         offset=".121" />
+      <stop
+         id="stop912"
+         stop-color="#ffc82a"
+         offset=".295" />
+      <stop
+         id="stop914"
+         stop-color="#ffa930"
+         offset=".502" />
+      <stop
+         id="stop916"
+         stop-color="#ff7e37"
+         offset=".732" />
+      <stop
+         id="stop918"
+         stop-color="#ff7139"
+         offset=".792" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="118.081"
+       cy="-8535.9814"
+       cx="-7915.9771"
+       id="h">
+      <stop
+         id="stop921"
+         stop-color="#fff44f"
+         offset=".113" />
+      <stop
+         id="stop923"
+         stop-color="#ff980e"
+         offset=".456" />
+      <stop
+         id="stop925"
+         stop-color="#ff5634"
+         offset=".622" />
+      <stop
+         id="stop927"
+         stop-color="#ff3647"
+         offset=".716" />
+      <stop
+         id="stop929"
+         stop-color="#e31587"
+         offset=".904" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.105,0.995,-0.653,0.069,-4680.304,8470.1869)"
+       r="86.499001"
+       cy="-8522.8594"
+       cx="-7927.165"
+       id="i">
+      <stop
+         id="stop932"
+         stop-color="#fff44f"
+         offset="0" />
+      <stop
+         id="stop934"
+         stop-color="#ffe847"
+         offset=".06" />
+      <stop
+         id="stop936"
+         stop-color="#ffc830"
+         offset=".168" />
+      <stop
+         id="stop938"
+         stop-color="#ff980e"
+         offset=".304" />
+      <stop
+         id="stop940"
+         stop-color="#ff8b16"
+         offset=".356" />
+      <stop
+         id="stop942"
+         stop-color="#ff672a"
+         offset=".455" />
+      <stop
+         id="stop944"
+         stop-color="#ff3647"
+         offset=".57" />
+      <stop
+         id="stop946"
+         stop-color="#e31587"
+         offset=".737" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="73.720001"
+       cy="-8508.1758"
+       cx="-7938.3828"
+       id="j">
+      <stop
+         id="stop949"
+         stop-color="#fff44f"
+         offset=".137" />
+      <stop
+         id="stop951"
+         stop-color="#ff980e"
+         offset=".48" />
+      <stop
+         id="stop953"
+         stop-color="#ff5634"
+         offset=".592" />
+      <stop
+         id="stop955"
+         stop-color="#ff3647"
+         offset=".655" />
+      <stop
+         id="stop957"
+         stop-color="#e31587"
+         offset=".904" />
+    </radialGradient>
+    <radialGradient
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="translate(7978.7,8523.9959)"
+       r="80.685997"
+       cy="-8503.8613"
+       cx="-7918.9229"
+       id="k">
+      <stop
+         id="stop960"
+         stop-color="#fff44f"
+         offset=".094" />
+      <stop
+         id="stop962"
+         stop-color="#ffe141"
+         offset=".231" />
+      <stop
+         id="stop964"
+         stop-color="#ffaf1e"
+         offset=".509" />
+      <stop
+         id="stop966"
+         stop-color="#ff980e"
+         offset=".626" />
+    </radialGradient>
+    <linearGradient
+       gradientTransform="translate(3.7,-0.0040855)"
+       gradientUnits="userSpaceOnUse"
+       y2="66.806"
+       x2="15.267"
+       y1="12.061"
+       x1="70.013"
+       id="l">
+      <stop
+         id="stop969"
+         stop-opacity=".8"
+         stop-color="#fff44f"
+         offset=".167" />
+      <stop
+         id="stop971"
+         stop-opacity=".634"
+         stop-color="#fff44f"
+         offset=".266" />
+      <stop
+         id="stop973"
+         stop-opacity=".217"
+         stop-color="#fff44f"
+         offset=".489" />
+      <stop
+         id="stop975"
+         stop-opacity="0"
+         stop-color="#fff44f"
+         offset=".6" />
+    </linearGradient>
+  </defs>
+  <path
+     style="fill:url(#a)"
+     id="path980"
+     d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 l 0.007,0.065 c -4.382,-10.925 -11.813,-15.33 -17.882,-24.9220005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 l 0.015,-0.026 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 a 19.387,19.387 0 0 0 -10.666,4.111 11.587,11.587 0 0 0 -1,-0.758 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.623,4.347 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 l -0.052,0.256 c -0.073,0.341 -0.336,2.049 -0.381,2.42 0,0.029 -0.006,0.056 -0.009,0.085 A 36.937,36.937 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z m -44.67,30.338 c 0.181,0.087 0.351,0.181 0.537,0.264 l 0.027,0.017 q -0.282,-0.135 -0.564,-0.281 z m 8.878,-23.376 z m 31.952,-4.934 v -0.037 l 0.007,0.041 z" />
+  <path
+     style="fill:url(#b)"
+     id="path982"
+     d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 v 0.037 l 0.007,0.041 a 35.1,35.1 0 0 1 -1.206,26.158 c -4.442,9.531 -15.194,19.3 -32.024,18.825 -18.185,-0.515 -34.2,-14.009 -37.194,-31.683 -0.545,-2.787 0,-4.2 0.274,-6.465 A 28.876,28.876 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z" />
+  <path
+     style="fill:url(#c)"
+     id="path984"
+     d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 v 0.037 l 0.007,0.041 a 35.1,35.1 0 0 1 -1.206,26.158 c -4.442,9.531 -15.194,19.3 -32.024,18.825 -18.185,-0.515 -34.2,-14.009 -37.194,-31.683 -0.545,-2.787 0,-4.2 0.274,-6.465 A 28.876,28.876 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z" />
+  <path
+     style="fill:url(#d)"
+     id="path986"
+     d="m 60.782,31.382915 c 0.084,0.059 0.162,0.118 0.241,0.177 a 21.1,21.1 0 0 0 -3.6,-4.695 C 45.377,14.816915 54.266,0.7419145 55.765,0.0269145 l 0.015,-0.022 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 0.452,-0.031 0.9,-0.069 1.362,-0.069 a 19.56,19.56 0 0 1 16.982,9.917 z" />
+  <path
+     style="fill:url(#e)"
+     id="path988"
+     d="m 43.825,33.788915 c -0.064,0.964 -3.47,4.289 -4.661,4.289 -11.021,0 -12.81,6.667 -12.81,6.667 0.488,5.614 4.4,10.238 9.129,12.684 0.216,0.112 0.435,0.213 0.654,0.312 q 0.569,0.252 1.138,0.466 a 17.235,17.235 0 0 0 5.043,0.973 c 19.317,0.906 23.059,-23.1 9.119,-30.066 a 13.38,13.38 0 0 1 9.345,2.269 19.56,19.56 0 0 0 -16.982,-9.917 c -0.46,0 -0.91,0.038 -1.362,0.069 a 19.387,19.387 0 0 0 -10.666,4.111 c 0.591,0.5 1.258,1.168 2.663,2.553 2.63,2.591 9.375,5.275 9.39,5.59 z" />
+  <path
+     style="fill:url(#f)"
+     id="path990"
+     d="m 43.825,33.788915 c -0.064,0.964 -3.47,4.289 -4.661,4.289 -11.021,0 -12.81,6.667 -12.81,6.667 0.488,5.614 4.4,10.238 9.129,12.684 0.216,0.112 0.435,0.213 0.654,0.312 q 0.569,0.252 1.138,0.466 a 17.235,17.235 0 0 0 5.043,0.973 c 19.317,0.906 23.059,-23.1 9.119,-30.066 a 13.38,13.38 0 0 1 9.345,2.269 19.56,19.56 0 0 0 -16.982,-9.917 c -0.46,0 -0.91,0.038 -1.362,0.069 a 19.387,19.387 0 0 0 -10.666,4.111 c 0.591,0.5 1.258,1.168 2.663,2.553 2.63,2.591 9.375,5.275 9.39,5.59 z" />
+  <path
+     style="fill:url(#g)"
+     id="path992"
+     d="m 29.965,24.356915 c 0.314,0.2 0.573,0.374 0.8,0.531 a 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 c 0.189,-0.005 5.811,-0.106 8.638,1.732 z" />
+  <path
+     style="fill:url(#h)"
+     id="path994"
+     d="m 5.354,42.158915 c 2.991,17.674 19.009,31.168 37.194,31.683 16.83,0.476 27.582,-9.294 32.024,-18.825 a 35.1,35.1 0 0 0 1.206,-26.158 v -0.037 c 0,-0.029 -0.006,-0.046 0,-0.037 l 0.007,0.065 c 1.375,8.977 -3.191,17.674 -10.329,23.555 l -0.022,0.05 c -13.908,11.327 -27.218,6.834 -29.912,5 q -0.282,-0.135 -0.564,-0.281 c -8.109,-3.876 -11.459,-11.264 -10.741,-17.6 a 9.953,9.953 0 0 1 -9.181,-5.775 14.618,14.618 0 0 1 14.249,-0.572 19.3,19.3 0 0 0 14.552,0.572 c -0.015,-0.315 -6.76,-3 -9.39,-5.59 -1.405,-1.385 -2.072,-2.052 -2.663,-2.553 a 11.587,11.587 0 0 0 -1,-0.758 c -0.23,-0.157 -0.489,-0.327 -0.8,-0.531 -2.827,-1.838 -8.449,-1.737 -8.635,-1.732 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.638,4.337 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 c -0.019,0.079 -1.396,6.099 -0.717,9.221 z" />
+  <path
+     style="fill:url(#i)"
+     id="path996"
+     d="m 57.425,26.864915 a 21.1,21.1 0 0 1 3.6,4.7 c 0.213,0.161 0.412,0.321 0.581,0.476 8.787,8.1 4.183,19.55 3.84,20.365 7.138,-5.881 11.7,-14.578 10.329,-23.555 -4.384,-10.93 -11.815,-15.335 -17.884,-24.9270005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 -1.499,0.711 -10.388,14.7860005 1.66,26.8340005 z" />
+  <path
+     style="fill:url(#j)"
+     id="path998"
+     d="m 61.6,32.035915 c -0.169,-0.155 -0.368,-0.315 -0.581,-0.476 -0.079,-0.059 -0.157,-0.118 -0.241,-0.177 a 13.38,13.38 0 0 0 -9.345,-2.269 c 13.94,6.97 10.2,30.972 -9.119,30.066 a 17.235,17.235 0 0 1 -5.043,-0.973 q -0.569,-0.213 -1.138,-0.466 c -0.219,-0.1 -0.438,-0.2 -0.654,-0.312 l 0.027,0.017 c 2.694,1.839 16,6.332 29.912,-5 l 0.022,-0.05 c 0.347,-0.81 4.951,-12.263 -3.84,-20.36 z" />
+  <path
+     style="fill:url(#k)"
+     id="path1000"
+     d="m 26.354,44.744915 c 0,0 1.789,-6.667 12.81,-6.667 1.191,0 4.6,-3.325 4.661,-4.289 a 19.3,19.3 0 0 1 -14.552,-0.572 14.618,14.618 0 0 0 -14.249,0.572 9.953,9.953 0 0 0 9.181,5.775 c -0.718,6.337 2.632,13.725 10.741,17.6 0.181,0.087 0.351,0.181 0.537,0.264 -4.733,-2.445 -8.641,-7.069 -9.129,-12.683 z" />
+  <path
+     style="fill:url(#l)"
+     id="path1002"
+     d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 l 0.007,0.065 c -4.382,-10.925 -11.813,-15.33 -17.882,-24.9220005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 l 0.015,-0.026 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 0.452,-0.031 0.9,-0.069 1.362,-0.069 a 19.56,19.56 0 0 1 16.982,9.917 13.38,13.38 0 0 0 -9.345,-2.269 c 13.94,6.97 10.2,30.972 -9.119,30.066 a 17.235,17.235 0 0 1 -5.043,-0.973 q -0.569,-0.213 -1.138,-0.466 c -0.219,-0.1 -0.438,-0.2 -0.654,-0.312 l 0.027,0.017 q -0.282,-0.135 -0.564,-0.281 c 0.181,0.087 0.351,0.181 0.537,0.264 -4.733,-2.446 -8.641,-7.07 -9.129,-12.684 0,0 1.789,-6.667 12.81,-6.667 1.191,0 4.6,-3.325 4.661,-4.289 -0.015,-0.315 -6.76,-3 -9.39,-5.59 -1.405,-1.385 -2.072,-2.052 -2.663,-2.553 a 11.587,11.587 0 0 0 -1,-0.758 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.623,4.347 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 l -0.052,0.256 c -0.073,0.341 -0.4,2.073 -0.447,2.445 0,0.028 0,-0.029 0,0 A 45.094,45.094 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z m -3.845,1.991 0.007,0.041 z" />
+</svg>
diff --git a/public/images/browsers/opera.svg b/public/images/browsers/opera.svg
new file mode 100644
index 0000000000..975fcbc23a
--- /dev/null
+++ b/public/images/browsers/opera.svg
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 75.591 75.591" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<linearGradient id="a" gradientTransform="matrix(0 -54.944 -54.944 0 23.62 79.474)" gradientUnits="userSpaceOnUse" x2="1">
+<stop offset="0" stop-color="#ff1b2d"/>
+<stop offset=".3" stop-color="#ff1b2d"/>
+<stop offset=".614" stop-color="#ff1b2d"/>
+<stop offset="1" stop-color="#a70014"/>
+</linearGradient>
+<linearGradient id="b" gradientTransform="matrix(0 -48.595 -48.595 0 37.854 76.235)" gradientUnits="userSpaceOnUse" x2="1">
+<stop offset="0" stop-color="#9c0000"/>
+<stop offset=".7" stop-color="#ff4b4b"/>
+<stop offset="1" stop-color="#ff4b4b"/>
+</linearGradient>
+<g transform="matrix(1.3333 0 0 -1.3333 0 107.2)">
+<path d="m28.346 80.398c-15.655 0-28.346-12.691-28.346-28.346 0-15.202 11.968-27.609 26.996-28.313.44848-.02115.89766-.03314 1.3504-.03314 7.2574 0 13.876 2.7289 18.891 7.2137-3.3227-2.2036-7.2074-3.4715-11.359-3.4715-6.7504 0-12.796 3.3488-16.862 8.6297-3.1344 3.6999-5.1645 9.1691-5.3028 15.307v1.3349c.13821 6.1377 2.1683 11.608 5.302 15.307 4.0666 5.2809 10.112 8.6297 16.862 8.6297 4.1526 0 8.038-1.2679 11.361-3.4729-4.9904 4.4643-11.569 7.1876-18.786 7.2144-.03596 0-.07122.0014-.10718.0014z" fill="url(#a)"/>
+<path d="m19.016 68.025c2.6013 3.0709 5.9607 4.9227 9.631 4.9227 8.2524 0 14.941-9.356 14.941-20.897s-6.6891-20.897-14.941-20.897c-3.6703 0-7.0297 1.851-9.6303 4.922 4.0659-5.2809 10.111-8.6297 16.862-8.6297 4.1519 0 8.0366 1.2679 11.359 3.4715 5.802 5.1906 9.4554 12.735 9.4554 21.133 0 8.397-3.6527 15.941-9.4533 21.131-3.3234 2.205-7.2088 3.4729-11.361 3.4729-6.7504 0-12.796-3.3488-16.862-8.6297" fill="url(#b)"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/public/images/browsers/safari.svg b/public/images/browsers/safari.svg
new file mode 100644
index 0000000000..5f134765ed
--- /dev/null
+++ b/public/images/browsers/safari.svg
@@ -0,0 +1,240 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="66.165833mm"
+   height="65.803795mm"
+   viewBox="0 0 66.165833 65.803795"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="Safari browser logo.svg">
+  <title
+     id="title2819">Safari browser logo</title>
+  <defs
+     id="defs2">
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient2135">
+      <stop
+         style="stop-color:#06c2e7;stop-opacity:1"
+         offset="0"
+         id="stop2131" />
+      <stop
+         id="stop2143"
+         offset="0.25000015"
+         style="stop-color:#0db8ec;stop-opacity:1" />
+      <stop
+         id="stop2139"
+         offset="0.5000003"
+         style="stop-color:#12aef1;stop-opacity:1" />
+      <stop
+         style="stop-color:#1f86f9;stop-opacity:1"
+         offset="0.75000012"
+         id="stop2141" />
+      <stop
+         style="stop-color:#107ddd;stop-opacity:1"
+         offset="1"
+         id="stop2133" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       id="linearGradient2127">
+      <stop
+         style="stop-color:#bdbdbd;stop-opacity:1"
+         offset="0"
+         id="stop2123" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1"
+         offset="1"
+         id="stop2125" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2127"
+       id="linearGradient2129"
+       x1="412.97501"
+       y1="237.60777"
+       x2="412.97501"
+       y2="59.392235"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.35154274,0,0,0.35154274,206.79018,159.77261)" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2135"
+       id="radialGradient2137"
+       cx="413.06128"
+       cy="136.81819"
+       fx="413.06128"
+       fy="136.81819"
+       r="82.125351"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0.38143305,0,0,0.38143298,194.54473,155.58044)" />
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter2222"
+       x="-0.020909378"
+       width="1.0418189"
+       y="-0.0223378"
+       height="1.0446756">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.95767362"
+         id="feGaussianBlur2224" />
+    </filter>
+    <filter
+       inkscape:collect="always"
+       style="color-interpolation-filters:sRGB"
+       id="filter2248"
+       x="-0.048"
+       width="1.096"
+       y="-0.048"
+       height="1.096">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="3.5643107"
+         id="feGaussianBlur2250" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="94.825651"
+     inkscape:cy="88.085169"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="1358"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:snap-object-midpoints="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-intersection-paths="false"
+     inkscape:snap-center="false"
+     inkscape:object-paths="false"
+     inkscape:object-nodes="false"
+     fit-margin-left="0.01"
+     fit-margin-top="0.01"
+     fit-margin-right="0.01"
+     fit-margin-bottom="0.01" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>Safari browser logo</dc:title>
+        <dc:date>03/04/2018</dc:date>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Apple, Inc.</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title>CMetalCore</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:source>https://fthmb.tqn.com/gnIDz9kkyZVRsWbJJOlHIYf_42g=/768x0/filters:no_upscale()/Safari-Yosemite-56a01c725f9b58eba4af0427.jpg</dc:source>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Capa 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-318.88562,-180.59501)">
+    <g
+       id="g2858">
+      <path
+         transform="matrix(0.33864636,0,0,0.32609457,212.11606,166.11668)"
+         style="opacity:0.52999998;fill:#000000;fill-opacity:1;stroke:none;stroke-width:2.93077397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(#filter2248)"
+         d="M 502.08277,148.5 A 89.107765,89.107765 0 0 1 412.975,237.60777 89.107765,89.107765 0 0 1 323.86724,148.5 89.107765,89.107765 0 0 1 412.975,59.392235 89.107765,89.107765 0 0 1 502.08277,148.5 Z"
+         id="path2226"
+         inkscape:connector-curvature="0" />
+      <path
+         inkscape:connector-curvature="0"
+         id="path826"
+         d="m 383.29373,211.97671 a 31.325188,31.325188 0 0 1 -31.32519,31.32519 31.325188,31.325188 0 0 1 -31.32518,-31.32519 31.325188,31.325188 0 0 1 31.32518,-31.32519 31.325188,31.325188 0 0 1 31.32519,31.32519 z"
+         style="opacity:1;fill:url(#linearGradient2129);fill-opacity:1;stroke:#cdcdcd;stroke-width:0.09301235;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
+      <path
+         inkscape:connector-curvature="0"
+         id="circle828"
+         d="m 380.83911,211.97671 a 28.870571,28.870571 0 0 1 -28.87057,28.87057 28.870571,28.870571 0 0 1 -28.87057,-28.87057 28.870571,28.870571 0 0 1 28.87057,-28.87057 28.870571,28.870571 0 0 1 28.87057,28.87057 z"
+         style="opacity:1;fill:url(#radialGradient2137);fill-opacity:1;stroke:none;stroke-width:0.94955933;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
+      <path
+         inkscape:connector-curvature="0"
+         id="rect830"
+         d="m 351.96854,184.61172 c -0.23319,0 -0.42092,0.18772 -0.42092,0.42092 v 4.85517 c 0,0.2332 0.18773,0.42092 0.42092,0.42092 0.2332,0 0.42092,-0.18772 0.42092,-0.42092 v -4.85517 c 0,-0.2332 -0.18772,-0.42092 -0.42092,-0.42092 z m -2.75367,0.17404 c -0.0279,-0.003 -0.0566,-0.003 -0.0856,3.5e-4 -0.23194,0.0242 -0.39917,0.2304 -0.37495,0.46234 l 0.21218,2.03119 c 0.0242,0.23194 0.23041,0.39918 0.46233,0.37496 0.23195,-0.0242 0.39919,-0.2304 0.37496,-0.46234 l -0.212,-2.03118 c -0.0212,-0.20295 -0.18177,-0.35637 -0.37695,-0.37532 z m 5.5266,0.002 c -0.19519,0.0188 -0.35578,0.17221 -0.37714,0.37513 l -0.21363,2.03102 c -0.0244,0.23192 0.14285,0.43831 0.37478,0.4627 0.23191,0.0244 0.43811,-0.14268 0.46251,-0.3746 l 0.21364,-2.03119 c 0.0244,-0.23192 -0.14286,-0.43814 -0.37478,-0.46252 -0.029,-0.003 -0.0575,-0.003 -0.0854,-5.2e-4 z m -8.3553,0.4082 c -0.028,2.2e-4 -0.0565,0.003 -0.085,0.009 -0.22814,0.0483 -0.37294,0.27089 -0.32464,0.49903 l 1.00552,4.74981 c 0.0483,0.22814 0.27088,0.37293 0.49902,0.32464 0.22814,-0.0483 0.37294,-0.27072 0.32465,-0.49886 l -1.00552,-4.74998 c -0.0423,-0.19963 -0.21792,-0.33543 -0.41401,-0.3339 z m 11.18382,0.004 c -0.19609,-0.002 -0.3718,0.13394 -0.41419,0.33353 l -1.00897,4.74925 c -0.0485,0.22811 0.0962,0.45076 0.32427,0.49922 0.22811,0.0485 0.45076,-0.0962 0.49921,-0.32428 l 1.00897,-4.74926 c 0.0485,-0.2281 -0.0962,-0.45076 -0.32427,-0.49921 -0.0285,-0.006 -0.057,-0.009 -0.085,-0.009 z m -13.88337,0.75717 c -0.0545,-0.005 -0.11077,0.001 -0.16622,0.0194 -0.22178,0.0721 -0.34238,0.3085 -0.27031,0.53028 l 0.6311,1.94236 c 0.0721,0.22179 0.30868,0.34238 0.53046,0.27032 0.22179,-0.0721 0.3422,-0.30868 0.27013,-0.53046 l -0.63109,-1.94236 c -0.054,-0.16634 -0.20059,-0.27568 -0.36407,-0.28958 z m 16.56765,0.001 c -0.16348,0.0139 -0.30999,0.12324 -0.36406,0.28957 l -0.63147,1.94218 c -0.0721,0.22177 0.0484,0.45837 0.27014,0.53046 0.22178,0.0721 0.45837,-0.0484 0.53047,-0.27013 l 0.63146,-1.94236 c 0.0721,-0.22178 -0.0484,-0.45837 -0.27014,-0.53046 -0.0554,-0.018 -0.11191,-0.0239 -0.1664,-0.0193 z m -19.23721,0.9759 c -0.0547,0.001 -0.11004,0.013 -0.16331,0.0367 -0.21298,0.0947 -0.30836,0.34244 -0.21364,0.55553 l 1.97197,4.43662 c 0.0947,0.21308 0.34244,0.30836 0.55553,0.21364 0.21298,-0.0947 0.30854,-0.34244 0.21382,-0.55553 l -1.97216,-4.43662 c -0.071,-0.15983 -0.22817,-0.25351 -0.39221,-0.25033 z m 21.93693,0.0149 c -0.16403,-0.003 -0.32132,0.0901 -0.39257,0.24979 l -1.97798,4.4339 c -0.095,0.21296 -4e-5,0.46088 0.21292,0.55589 0.21297,0.095 0.46088,5e-5 0.5559,-0.21291 l 1.97796,-4.43389 c 0.095,-0.21297 5e-5,-0.46089 -0.21291,-0.5559 -0.0532,-0.0237 -0.10864,-0.0357 -0.16332,-0.0369 z m -24.41484,1.29618 c -0.0808,-0.006 -0.16406,0.012 -0.23979,0.0558 -0.20196,0.1166 -0.27065,0.37302 -0.15406,0.57497 l 1.02115,1.76869 c 0.1166,0.20196 0.373,0.27065 0.57496,0.15405 0.20195,-0.1166 0.27065,-0.37301 0.15406,-0.57497 l -1.02115,-1.76868 c -0.0729,-0.12623 -0.20047,-0.20041 -0.33517,-0.20983 z m 26.85877,0 c -0.13468,0.009 -0.26211,0.0836 -0.33498,0.20983 l -1.02133,1.76868 c -0.1166,0.20196 -0.0477,0.45837 0.15424,0.57497 0.20196,0.1166 0.45837,0.0479 0.57497,-0.15405 l 1.02114,-1.76869 c 0.1166,-0.20195 0.0479,-0.45837 -0.15406,-0.57497 -0.0757,-0.0437 -0.15916,-0.0614 -0.23998,-0.0558 z m -29.26491,1.50073 c -0.081,0.003 -0.16211,0.029 -0.2329,0.0803 -0.18875,0.13693 -0.23048,0.39911 -0.0935,0.58787 l 2.85086,3.92995 c 0.13693,0.18876 0.39929,0.23049 0.58805,0.0936 0.18876,-0.13693 0.23049,-0.39911 0.0935,-0.58787 l -2.85104,-3.92995 c -0.0856,-0.11798 -0.22004,-0.17847 -0.35497,-0.17386 z m 31.70122,0.0214 c -0.13493,-0.005 -0.26941,0.0555 -0.35516,0.17331 l -2.8563,3.92614 c -0.1372,0.18857 -0.0958,0.45086 0.0928,0.58805 0.18858,0.13718 0.45087,0.0959 0.58806,-0.0926 l 2.85613,-3.92614 c 0.13718,-0.18858 0.0957,-0.45086 -0.0928,-0.58805 -0.0707,-0.0514 -0.15176,-0.0778 -0.23272,-0.0807 z m -33.85196,1.78231 c -0.10744,-0.006 -0.21708,0.0299 -0.30374,0.10791 -0.17332,0.15602 -0.18725,0.42109 -0.0312,0.59441 l 1.36648,1.51799 c 0.15601,0.17332 0.42109,0.18726 0.59441,0.0312 0.17332,-0.15602 0.18726,-0.42127 0.0312,-0.59459 l -1.3663,-1.51781 c -0.078,-0.0867 -0.18339,-0.13351 -0.29085,-0.13916 z m 35.97562,0.003 c -0.10745,0.006 -0.21282,0.0525 -0.29084,0.13915 l -1.36648,1.51763 c -0.15606,0.1733 -0.14224,0.43855 0.0311,0.59459 0.17329,0.15604 0.43837,0.14205 0.59441,-0.0312 l 1.36666,-1.51762 c 0.15605,-0.17331 0.14205,-0.43856 -0.0312,-0.59459 -0.0867,-0.078 -0.19611,-0.11354 -0.30357,-0.10791 z m -38.03696,1.97705 c -0.10745,0.006 -0.21266,0.0525 -0.29067,0.13916 -0.15602,0.17332 -0.14207,0.43839 0.0312,0.59441 l 3.60841,3.24834 c 0.17332,0.15603 0.43839,0.14207 0.5944,-0.0312 0.15603,-0.17331 0.14226,-0.43839 -0.0311,-0.59441 l -3.60858,-3.24834 c -0.0867,-0.078 -0.1963,-0.11356 -0.30376,-0.10791 z m 40.10831,0.0142 c -0.10745,-0.006 -0.21722,0.0298 -0.30393,0.10773 l -3.61059,3.24581 c -0.17342,0.15589 -0.18768,0.42097 -0.0318,0.5944 0.1559,0.17342 0.42117,0.18751 0.59459,0.0316 l 3.61077,-3.2458 c 0.17342,-0.1559 0.1875,-0.42098 0.0316,-0.59441 -0.078,-0.0867 -0.18322,-0.13361 -0.29066,-0.13933 z m -41.8225,2.18998 c -0.13494,-0.005 -0.26949,0.0558 -0.35515,0.17367 -0.13707,0.18866 -0.0955,0.4508 0.0932,0.58787 l 1.65224,1.20044 c 0.18866,0.13708 0.45079,0.0957 0.58786,-0.093 0.13708,-0.18866 0.0956,-0.45098 -0.093,-0.58805 l -1.65224,-1.20044 c -0.0707,-0.0514 -0.15193,-0.0776 -0.23289,-0.0805 z m 43.53505,0.0153 c -0.081,0.003 -0.16211,0.0289 -0.23289,0.0803 l -1.65297,1.19936 c -0.18875,0.13694 -0.2305,0.39929 -0.0936,0.58805 0.13695,0.18875 0.39912,0.23031 0.58787,0.0934 l 1.65316,-1.19935 c 0.18875,-0.13694 0.23031,-0.39912 0.0934,-0.58787 -0.0856,-0.11797 -0.22004,-0.17847 -0.35497,-0.17385 z m -45.13697,2.33585 c -0.13469,0.009 -0.26211,0.0836 -0.33499,0.20982 -0.1166,0.20195 -0.0479,0.45837 0.15405,0.57497 l 4.20463,2.42758 c 0.20195,0.1166 0.45837,0.0479 0.57497,-0.15405 0.1166,-0.20195 0.0479,-0.45837 -0.15405,-0.57497 l -4.20463,-2.42759 c -0.0757,-0.0437 -0.15917,-0.0614 -0.23998,-0.0558 z m 46.72744,0 c -0.0808,-0.006 -0.16425,0.012 -0.23998,0.0558 l -4.20463,2.42759 c -0.20195,0.1166 -0.27065,0.37302 -0.15405,0.57497 0.1166,0.20195 0.37302,0.27065 0.57497,0.15405 l 4.20482,-2.42758 c 0.20195,-0.1166 0.27064,-0.37302 0.15404,-0.57497 -0.0729,-0.12622 -0.20048,-0.20041 -0.33517,-0.20982 z m -47.9386,2.50606 c -0.16403,-0.004 -0.32133,0.0899 -0.39258,0.2496 -0.095,0.21298 -6e-5,0.46091 0.21292,0.5559 l 1.86532,0.83202 c 0.21298,0.095 0.46091,7e-5 0.5559,-0.2129 0.095,-0.21298 -1.2e-4,-0.46091 -0.21309,-0.5559 l -1.86515,-0.83202 c -0.0532,-0.0238 -0.10865,-0.0356 -0.16332,-0.0367 z m 49.15794,0.0173 c -0.0547,10e-4 -0.11024,0.013 -0.16351,0.0367 l -1.86569,0.83057 c -0.21304,0.0949 -0.3083,0.34267 -0.21346,0.55571 0.0949,0.21304 0.34286,0.3083 0.5559,0.21346 l 1.8657,-0.83076 c 0.21303,-0.0948 0.30811,-0.34267 0.21327,-0.55571 -0.0711,-0.15978 -0.22818,-0.25323 -0.39221,-0.24997 z m -50.23739,2.60199 c -0.16349,0.0137 -0.31006,0.12291 -0.36424,0.28921 -0.0722,0.22172 0.048,0.45839 0.26977,0.53064 l 4.61629,1.50418 c 0.22171,0.0722 0.45839,-0.0481 0.53064,-0.26977 0.0722,-0.22172 -0.048,-0.4584 -0.26977,-0.53064 l -4.61628,-1.50419 c -0.0554,-0.0181 -0.11192,-0.024 -0.16641,-0.0194 z m 51.31484,0.018 c -0.0545,-0.005 -0.11078,10e-4 -0.16623,0.0194 l -4.61736,1.50092 c -0.22178,0.0721 -0.34223,0.30869 -0.27014,0.53046 0.0721,0.22177 0.30868,0.34223 0.53046,0.27014 l 4.61719,-1.50092 c 0.22178,-0.0721 0.3424,-0.30869 0.27032,-0.53046 -0.0541,-0.16633 -0.20077,-0.2757 -0.36424,-0.28957 z m -51.98736,2.73152 c -0.1961,-0.002 -0.37196,0.13412 -0.41438,0.33371 -0.0485,0.2281 0.0962,0.45073 0.32427,0.49922 l 1.99777,0.42455 c 0.2281,0.0485 0.45072,-0.0962 0.49921,-0.32427 0.0485,-0.22811 -0.0962,-0.45074 -0.32427,-0.49922 l -1.99759,-0.42455 c -0.0285,-0.006 -0.057,-0.009 -0.085,-0.009 z m 52.65462,0.004 c -0.028,2.3e-4 -0.0563,0.004 -0.0848,0.009 l -1.99778,0.42437 c -0.2281,0.0485 -0.37271,0.27093 -0.32426,0.49904 0.0485,0.2281 0.2711,0.3729 0.49921,0.32445 l 1.99759,-0.42437 c 0.2281,-0.0485 0.3729,-0.27111 0.32445,-0.49922 -0.0424,-0.19959 -0.21829,-0.33537 -0.41437,-0.33371 z m -53.16365,2.76167 c -0.1952,0.0187 -0.35587,0.17185 -0.37731,0.37477 -0.0245,0.2319 0.14232,0.43838 0.37422,0.46288 l 4.82829,0.51048 c 0.2319,0.0245 0.43838,-0.1425 0.46288,-0.37441 0.0245,-0.2319 -0.1425,-0.43838 -0.37441,-0.46288 l -4.82828,-0.51048 c -0.029,-0.003 -0.0575,-0.003 -0.0854,-3.5e-4 z m 53.6763,0.0363 c -0.0279,-0.003 -0.0566,-0.003 -0.0856,3.5e-4 l -4.82883,0.50394 c -0.23194,0.0242 -0.39914,0.2304 -0.37496,0.46233 0.0242,0.23194 0.2304,0.39918 0.46234,0.37496 l 4.82883,-0.50394 c 0.23193,-0.0242 0.39914,-0.2304 0.37496,-0.46234 -0.0212,-0.20294 -0.1816,-0.35634 -0.37678,-0.37532 z m -53.75805,2.79473 c -0.2332,0 -0.42091,0.18772 -0.42091,0.42092 0,0.23319 0.18771,0.42091 0.42091,0.42091 h 2.04228 c 0.23319,0 0.4211,-0.18772 0.4211,-0.42091 0,-0.2332 -0.18791,-0.42092 -0.4211,-0.42092 z m 51.79298,0 c -0.23319,0 -0.42092,0.18772 -0.42092,0.42092 10e-6,0.23319 0.18773,0.42091 0.42092,0.42091 h 2.04228 c 0.23319,0 0.42092,-0.18772 0.42092,-0.42091 0,-0.2332 -0.18773,-0.42092 -0.42092,-0.42092 z m -46.80319,2.29461 c -0.0279,-0.003 -0.0564,-0.003 -0.0854,3.5e-4 l -4.82902,0.50394 c -0.23194,0.0242 -0.39913,0.2304 -0.37495,0.46233 0.0242,0.23194 0.2304,0.39918 0.46233,0.37496 l 4.82902,-0.50394 c 0.23194,-0.0242 0.39913,-0.2304 0.37495,-0.46234 -0.0212,-0.20294 -0.18177,-0.35634 -0.37695,-0.37531 z m 43.85314,0.0298 c -0.19521,0.0187 -0.35588,0.17186 -0.37732,0.37478 -0.0245,0.2319 0.14233,0.43838 0.37423,0.46288 l 4.82829,0.51048 c 0.23191,0.0245 0.43837,-0.14251 0.46288,-0.37441 0.0245,-0.2319 -0.14251,-0.43838 -0.37441,-0.46288 l -4.8281,-0.51048 c -0.029,-0.003 -0.0577,-0.003 -0.0856,-3.5e-4 z m -46.2602,2.8436 c -0.028,2.4e-4 -0.0565,0.003 -0.085,0.009 l -1.99777,0.42436 c -0.22811,0.0485 -0.37271,0.27111 -0.32427,0.49922 0.0485,0.22811 0.27111,0.37272 0.49922,0.32427 l 1.99777,-0.42419 c 0.2281,-0.0485 0.37271,-0.27111 0.32426,-0.49921 -0.0424,-0.1996 -0.2181,-0.33537 -0.41419,-0.33372 z m 48.66925,0.004 c -0.19609,-0.002 -0.37177,0.13394 -0.41419,0.33353 -0.0485,0.2281 0.096,0.45074 0.32409,0.49922 l 1.99777,0.42455 c 0.22809,0.0485 0.45073,-0.096 0.49921,-0.32409 0.0485,-0.2281 -0.0962,-0.45092 -0.32426,-0.4994 l -1.9976,-0.42455 c -0.0285,-0.006 -0.057,-0.009 -0.085,-0.009 z m -45.30519,1.65787 c -0.0545,-0.005 -0.11077,0.001 -0.16622,0.0194 l -4.61736,1.50091 c -0.22178,0.0721 -0.34223,0.30869 -0.27014,0.53046 0.0721,0.22178 0.30868,0.34222 0.53046,0.27014 l 4.61719,-1.50092 c 0.22178,-0.0721 0.34241,-0.30869 0.27032,-0.53046 -0.0541,-0.16633 -0.20077,-0.2757 -0.36425,-0.28957 z m 41.93713,0.0149 c -0.16349,0.0137 -0.31005,0.12292 -0.36423,0.28921 -0.0722,0.22173 0.048,0.4584 0.26977,0.53065 l 4.61628,1.50418 c 0.22172,0.0722 0.4584,-0.0481 0.53064,-0.26977 0.0723,-0.22172 -0.048,-0.4584 -0.26977,-0.53065 l -4.61628,-1.50418 c -0.0554,-0.0181 -0.11191,-0.024 -0.16641,-0.0194 z m -43.69909,3.27251 c -0.0547,0.001 -0.11006,0.0128 -0.16332,0.0365 l -1.86587,0.83075 c -0.21304,0.0948 -0.30812,0.34267 -0.21328,0.55571 0.0949,0.21304 0.34268,0.30812 0.55571,0.21328 l 1.86589,-0.83058 c 0.21303,-0.0948 0.30811,-0.34267 0.21327,-0.55571 -0.0711,-0.15978 -0.22837,-0.25323 -0.3924,-0.24997 z m 45.45888,0.016 c -0.16403,-0.004 -0.32133,0.0899 -0.39258,0.24961 -0.095,0.21297 -6e-5,0.4609 0.21291,0.55589 l 1.86515,0.83202 c 0.21297,0.095 0.46091,6e-5 0.5559,-0.21291 0.095,-0.21297 6e-5,-0.4609 -0.21291,-0.55589 l -1.86515,-0.83203 c -0.0532,-0.0238 -0.10864,-0.0356 -0.16332,-0.0367 z m -41.82613,0.91214 c -0.0808,-0.006 -0.16424,0.012 -0.23998,0.0558 l -4.20463,2.42758 c -0.20195,0.1166 -0.27065,0.37302 -0.15405,0.57497 0.1166,0.20195 0.37302,0.27065 0.57497,0.15405 l 4.20463,-2.4274 c 0.20195,-0.1166 0.27064,-0.3732 0.15405,-0.57515 -0.0729,-0.12622 -0.2003,-0.20041 -0.33499,-0.20982 z m 38.20028,0 c -0.13469,0.009 -0.26229,0.0836 -0.33517,0.20982 -0.1166,0.20195 -0.0479,0.45855 0.15405,0.57515 l 4.20463,2.4274 c 0.20196,0.1166 0.45855,0.0479 0.57515,-0.15405 0.1166,-0.20195 0.0479,-0.45837 -0.15404,-0.57497 l -4.20482,-2.42758 c -0.0757,-0.0437 -0.15899,-0.0614 -0.2398,-0.0558 z m -39.24903,3.56244 c -0.081,0.003 -0.16211,0.0291 -0.2329,0.0805 l -1.65296,1.19935 c -0.18875,0.13694 -0.2305,0.39912 -0.0936,0.58787 0.13695,0.18875 0.39912,0.2305 0.58787,0.0935 l 1.65314,-1.19935 c 0.18877,-0.13693 0.23051,-0.39911 0.0936,-0.58786 -0.0856,-0.11797 -0.22022,-0.17866 -0.35516,-0.17404 z m 40.28761,0.0142 c -0.13494,-0.005 -0.26948,0.0558 -0.35515,0.17367 -0.13708,0.18865 -0.0955,0.45098 0.0932,0.58805 l 1.65224,1.20044 c 0.18866,0.13707 0.4508,0.0955 0.58787,-0.0932 0.13707,-0.18866 0.0956,-0.4508 -0.093,-0.58787 l -1.65224,-1.20044 c -0.0707,-0.0514 -0.15193,-0.0778 -0.23289,-0.0807 z m -36.54387,0.14533 c -0.10743,-0.006 -0.21702,0.0298 -0.30374,0.10773 l -3.61076,3.2458 c -0.17342,0.15589 -0.18751,0.42098 -0.0316,0.59441 0.15589,0.17342 0.42097,0.1875 0.5944,0.0316 l 3.61077,-3.2458 c 0.17342,-0.15589 0.18751,-0.42098 0.0316,-0.59441 -0.0779,-0.0867 -0.18322,-0.13361 -0.29067,-0.13933 z m 32.80012,0.0116 c -0.10745,0.006 -0.21283,0.0525 -0.29084,0.13915 -0.15603,0.17332 -0.14207,0.43839 0.0312,0.59441 l 3.60841,3.24834 c 0.17332,0.15604 0.43857,0.14208 0.59459,-0.0312 0.15603,-0.17331 0.14207,-0.43839 -0.0312,-0.5944 l -3.6086,-3.24835 c -0.0867,-0.078 -0.19611,-0.11355 -0.30356,-0.10791 z m -29.37464,3.08358 c -0.13493,-0.005 -0.2696,0.0554 -0.35534,0.1733 l -2.85613,3.92614 c -0.13719,0.18858 -0.0959,0.45087 0.0926,0.58805 0.18857,0.13719 0.45087,0.0959 0.58805,-0.0927 l 2.85613,-3.92614 c 0.13718,-0.18857 0.0959,-0.45086 -0.0926,-0.58805 -0.0707,-0.0514 -0.15175,-0.0778 -0.23271,-0.0806 z m 25.93573,0.0176 c -0.081,0.003 -0.16211,0.0289 -0.2329,0.0803 -0.18875,0.13694 -0.23048,0.39911 -0.0936,0.58787 l 2.85086,3.92995 c 0.13693,0.18876 0.39911,0.2305 0.58787,0.0936 0.18876,-0.13693 0.23049,-0.3991 0.0936,-0.58786 l -2.85086,-3.92996 c -0.0856,-0.11797 -0.22004,-0.17846 -0.35498,-0.17385 z m -29.6228,0.6064 c -0.10745,0.006 -0.21282,0.0525 -0.29084,0.13915 l -1.36649,1.51763 c -0.15605,0.1733 -0.14223,0.43855 0.0311,0.59459 0.1733,0.15604 0.43837,0.14205 0.5944,-0.0313 l 1.36666,-1.51762 c 0.15606,-0.1733 0.14206,-0.43856 -0.0312,-0.59459 -0.0867,-0.078 -0.19611,-0.11354 -0.30357,-0.10791 z m 33.33076,0.002 c -0.10745,-0.006 -0.21691,0.0299 -0.30356,0.10791 -0.17333,0.156 -0.18726,0.42108 -0.0313,0.5944 l 1.3663,1.51799 c 0.15602,0.17333 0.42109,0.18726 0.59442,0.0312 0.17332,-0.15601 0.18726,-0.42126 0.0312,-0.59459 l -1.36631,-1.5178 c -0.078,-0.0867 -0.18339,-0.13351 -0.29084,-0.13916 z m -25.65524,1.68366 c -0.16403,-0.004 -0.32114,0.0899 -0.39239,0.24961 l -1.97816,4.43389 c -0.095,0.21297 -5e-5,0.46089 0.21292,0.5559 0.21296,0.095 0.46089,5e-5 0.55589,-0.21291 l 1.97815,-4.4339 c 0.095,-0.21296 5e-5,-0.46089 -0.21292,-0.55589 -0.0532,-0.0238 -0.10881,-0.0356 -0.16349,-0.0367 z m 17.95556,0.0122 c -0.0547,0.001 -0.11023,0.0128 -0.1635,0.0365 -0.21297,0.0947 -0.30836,0.34244 -0.21363,0.55553 l 1.97196,4.43662 c 0.0947,0.21297 0.34262,0.30836 0.55571,0.21364 0.21298,-0.0947 0.30836,-0.34244 0.21364,-0.55553 l -1.97197,-4.43662 c -0.071,-0.15973 -0.22818,-0.25329 -0.39221,-0.25015 z m -21.43154,1.35867 c -0.13468,0.009 -0.26212,0.0836 -0.33498,0.20982 l -1.02115,1.76869 c -0.11659,0.20195 -0.0479,0.45837 0.15406,0.57497 0.20195,0.1166 0.45837,0.0479 0.57496,-0.15405 l 1.02115,-1.76869 c 0.11659,-0.20195 0.0479,-0.45837 -0.15406,-0.57497 -0.0757,-0.0437 -0.15916,-0.0614 -0.23998,-0.0558 z m 24.93421,0 c -0.0808,-0.006 -0.16406,0.0121 -0.23979,0.0558 -0.20195,0.1166 -0.27065,0.37302 -0.15405,0.57497 l 1.02114,1.76869 c 0.1166,0.20195 0.37302,0.27064 0.57496,0.15405 0.20196,-0.1166 0.27066,-0.37302 0.15406,-0.57497 l -1.02114,-1.76869 c -0.0729,-0.12622 -0.20049,-0.20041 -0.33518,-0.20982 z m -17.0545,0.0634 c -0.19609,-0.002 -0.3718,0.13394 -0.41419,0.33354 l -1.00897,4.74926 c -0.0485,0.2281 0.0962,0.45076 0.32427,0.49921 0.22811,0.0485 0.45076,-0.0962 0.49922,-0.32427 l 1.00896,-4.74926 c 0.0485,-0.2281 -0.0962,-0.45076 -0.32427,-0.49921 -0.0285,-0.006 -0.057,-0.009 -0.085,-0.009 z m 9.1599,0.003 c -0.028,2.2e-4 -0.0563,0.003 -0.0848,0.009 -0.22814,0.0483 -0.37294,0.27071 -0.32465,0.49885 l 1.00553,4.74999 c 0.0483,0.22814 0.27088,0.37293 0.49903,0.32464 0.22814,-0.0483 0.37293,-0.27089 0.32464,-0.49903 l -1.0057,-4.74965 c -0.0423,-0.19963 -0.21793,-0.33543 -0.41402,-0.33391 z m -4.5725,0.47905 c -0.23319,0 -0.42092,0.18772 -0.42092,0.42092 v 4.85517 c 0,0.2332 0.18773,0.42092 0.42092,0.42092 0.2332,0 0.42092,-0.18772 0.42092,-0.42092 v -4.85517 c 0,-0.2332 -0.18772,-0.42092 -0.42092,-0.42092 z m -7.72657,1.56886 c -0.16347,0.0139 -0.31017,0.12324 -0.36423,0.28957 l -0.63129,1.94236 c -0.0721,0.22178 0.0484,0.45837 0.27014,0.53047 0.22177,0.0721 0.45836,-0.0486 0.53046,-0.27032 l 0.63128,-1.94218 c 0.0721,-0.22177 -0.0484,-0.45836 -0.27013,-0.53046 -0.0554,-0.018 -0.11173,-0.024 -0.16623,-0.0194 z m 15.44987,0.001 c -0.0545,-0.005 -0.11078,0.001 -0.16622,0.0193 -0.22178,0.0721 -0.34238,0.30868 -0.27033,0.53047 l 0.63111,1.94235 c 0.0721,0.22179 0.30868,0.3422 0.53046,0.27014 0.22178,-0.0721 0.34238,-0.3085 0.27032,-0.53028 l -0.63128,-1.94236 c -0.0541,-0.16634 -0.20058,-0.27568 -0.36406,-0.28957 z m -10.36543,1.08181 c -0.1952,0.0188 -0.356,0.17203 -0.37732,0.37496 l -0.21346,2.03119 c -0.0244,0.23192 0.14268,0.43812 0.3746,0.46252 0.23192,0.0244 0.4383,-0.14268 0.4627,-0.3746 l 0.21345,-2.03101 c 0.0244,-0.23192 -0.14268,-0.4383 -0.37458,-0.4627 -0.029,-0.003 -0.0575,-0.003 -0.0854,-3.5e-4 z m 5.26736,0.002 c -0.0279,-0.003 -0.0566,-0.003 -0.0856,3.5e-4 -0.23193,0.0242 -0.39917,0.2304 -0.37495,0.46233 l 0.21218,2.03138 c 0.0242,0.23193 0.2304,0.399 0.46234,0.37478 0.23193,-0.0242 0.39918,-0.23041 0.37496,-0.46234 l -0.212,-2.03119 c -0.0212,-0.20295 -0.18178,-0.35637 -0.37697,-0.37533 z"
+         style="opacity:1;fill:#f4f2f3;fill-opacity:1;stroke:none;stroke-width:0.38088897;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
+      <path
+         transform="matrix(0.35154274,0,0,0.35154274,206.79018,159.77261)"
+         sodipodi:nodetypes="ccccc"
+         inkscape:connector-curvature="0"
+         id="path2150"
+         d="m 469.09621,100.6068 -65.50955,38.06124 -41.41979,65.20654 60.59382,-44.88117 z"
+         style="opacity:0.40900005;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.5614785;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;filter:url(#filter2222)" />
+      <g
+         id="g2847">
+        <path
+           sodipodi:type="star"
+           style="opacity:1;fill:#ff5150;fill-opacity:1;stroke:none;stroke-width:1.01970422;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
+           id="path2096"
+           sodipodi:sides="3"
+           sodipodi:cx="124.97523"
+           sodipodi:cy="142.65184"
+           sodipodi:r1="18.791006"
+           sodipodi:r2="9.395503"
+           sodipodi:arg1="1.3089969"
+           sodipodi:arg2="2.3561945"
+           inkscape:flatsided="true"
+           inkscape:rounded="1.35308e-016"
+           inkscape:randomized="0"
+           d="m 129.8387,160.80256 -23.01419,-23.01419 31.43796,-8.42378 z"
+           inkscape:transform-center-y="-13.18648"
+           transform="matrix(0.64804473,-0.3316906,-0.36122382,0.63205852,329.21345,156.86272)" />
+        <path
+           transform="matrix(-0.36122382,0.63205852,0.64804473,-0.3316906,297.96259,186.70411)"
+           inkscape:transform-center-y="13.186483"
+           d="m 129.8387,160.80256 -23.01419,-23.01419 31.43796,-8.42378 z"
+           inkscape:randomized="0"
+           inkscape:rounded="1.35308e-016"
+           inkscape:flatsided="true"
+           sodipodi:arg2="2.3561945"
+           sodipodi:arg1="1.3089969"
+           sodipodi:r2="9.395503"
+           sodipodi:r1="18.791006"
+           sodipodi:cy="142.65184"
+           sodipodi:cx="124.97523"
+           sodipodi:sides="3"
+           id="path2099"
+           style="opacity:1;fill:#f1f1f1;fill-opacity:1;stroke:none;stroke-width:1.01970422;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill"
+           sodipodi:type="star" />
+        <path
+           style="opacity:0.243;fill:#000000;stroke:none;stroke-width:0.09301235px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+           d="m 331.85294,231.18507 23.41607,-15.75201 16.81513,-22.66472 z"
+           id="path2112"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/public/images/dock/appstore.svg b/public/images/dock/appstore.svg
new file mode 100644
index 0000000000..fc51264657
--- /dev/null
+++ b/public/images/dock/appstore.svg
@@ -0,0 +1,83 @@
+<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 32C0 20.799 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.799 0 32 0H54C65.201 0 70.8016 0 75.0798 2.17987C78.843 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.799 86 32V54C86 65.201 86 70.8016 83.8201 75.0798C81.9027 78.843 78.843 81.9027 75.0798 83.8201C70.8016 86 65.201 86 54 86H32C20.799 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.843 2.17987 75.0798C0 70.8016 0 65.201 0 54V32Z" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_ddi)">
+<path d="M48.5791 31.9791C48.2773 31.4594 47.5857 31.3265 47.1127 31.6973C44.1401 34.0279 43.3347 38.1903 45.2233 41.4615L59.9554 66.9783C61.0236 68.8284 63.3894 69.4623 65.2395 68.3941C67.0929 67.3241 67.7252 64.9525 66.6506 63.1018L63.1075 57H70C72.2091 57 74 55.2091 74 53C74 50.7909 72.2091 49 70 49H58.4623L48.5791 31.9791Z" fill="white"/>
+</g>
+<g filter="url(#filter1_ddi)">
+<path d="M48.5 16.1019C50.5194 17.2678 51.1659 19.3597 50 21.379L33.8281 49H43.2857C46.4417 49 47.5 51 48.5 53C49.5 55 50 56.5 48.5 56.5H16C13.7909 56.5 12 55.2091 12 53C12 50.7909 13.7909 49 16 49L25.0778 49L36.6187 28.3553C36.5349 28.251 36.4596 28.1355 36.3948 28.0089L33 21.379C32.0306 19.4859 33.0939 17.1653 34.9358 16.1019C36.9153 14.959 39.4484 15.7082 40.4878 17.7441L41.7246 20.1668L43.1741 17.6564C44.3399 15.637 46.4807 14.936 48.5 16.1019Z" fill="white"/>
+<path d="M48.5 16.1019C50.5194 17.2678 51.1659 19.3597 50 21.379L33.8281 49H43.2857C46.4417 49 47.5 51 48.5 53C49.5 55 50 56.5 48.5 56.5H16C13.7909 56.5 12 55.2091 12 53C12 50.7909 13.7909 49 16 49L25.0778 49L36.6187 28.3553C36.5349 28.251 36.4596 28.1355 36.3948 28.0089L33 21.379C32.0306 19.4859 33.0939 17.1653 34.9358 16.1019C36.9153 14.959 39.4484 15.7082 40.4878 17.7441L41.7246 20.1668L43.1741 17.6564C44.3399 15.637 46.4807 14.936 48.5 16.1019Z" fill="url(#paint1_linear)"/>
+</g>
+<g filter="url(#filter2_ddi)">
+<path d="M25.5668 59C27.0473 59 27.9398 60.6398 27.1359 61.883L22.9066 68.4242C21.8203 70.1043 19.5662 70.565 17.9078 69.446C16.2933 68.3566 15.8487 66.1749 16.9081 64.5406L19.4692 60.5901C20.112 59.5985 21.2133 59 22.395 59L25.5668 59Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_ddi" x="40.2064" y="29.4863" width="37.7936" height="46.4267" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.643137 0 0 0 0 0.937255 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
+</filter>
+<filter id="filter1_ddi" x="8" y="13.5378" width="46.578" height="49.9622" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.643137 0 0 0 0 0.937255 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
+</filter>
+<filter id="filter2_ddi" x="12.3329" y="57" width="19.1055" height="20.0576" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.372549 0 0 0 0 0.643137 0 0 0 0 0.937255 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect3_innerShadow"/>
+</filter>
+<linearGradient id="paint0_linear" x1="25" y1="5" x2="45.5" y2="77.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#17B2EB"/>
+<stop offset="1" stop-color="#1565D8"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="34.7118" y1="24.8033" x2="42.2882" y2="20.4291" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/dock/finder.svg b/public/images/dock/finder.svg
new file mode 100644
index 0000000000..601eb187a3
--- /dev/null
+++ b/public/images/dock/finder.svg
@@ -0,0 +1,67 @@
+<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 32C0 20.7989 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.7989 0 32 0H54C65.2011 0 70.8016 0 75.0798 2.17987C78.8431 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.7989 86 32V54C86 65.2011 86 70.8016 83.8201 75.0798C81.9027 78.8431 78.8431 81.9027 75.0798 83.8201C70.8016 86 65.2011 86 54 86H32C20.7989 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.8431 2.17987 75.0798C0 70.8016 0 65.2011 0 54V32Z" fill="url(#paint0_linear)"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="86" height="86">
+<path d="M0 32C0 20.7989 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.7989 0 32 0H54C65.2011 0 70.8016 0 75.0798 2.17987C78.8431 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.7989 86 32V54C86 65.2011 86 70.8016 83.8201 75.0798C81.9027 78.8431 78.8431 81.9027 75.0798 83.8201C70.8016 86 65.2011 86 54 86H32C20.7989 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.8431 2.17987 75.0798C0 70.8016 0 65.2011 0 54V32Z" fill="url(#paint1_linear)"/>
+</mask>
+<g mask="url(#mask0)">
+<g filter="url(#filter0_d)">
+<path d="M33.0051 47.4977C33.2283 25.5268 40.724 6.73119 44.5 0L91.5 -8.5V34L87.5 85C77.5 91.3333 56.2 100.5 51 86.5C45.8 72.5 45.5 55.3333 46 48.5H34.0016C33.4493 48.5 32.9995 48.0499 33.0051 47.4977Z" fill="url(#paint2_linear)"/>
+</g>
+</g>
+<g filter="url(#filter1_d)">
+<rect x="59" y="24" width="4" height="9" rx="2" fill="black"/>
+</g>
+<g filter="url(#filter2_d)">
+<rect x="20" y="24" width="4" height="9" rx="2" fill="black"/>
+</g>
+<g filter="url(#filter3_d)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.5398 55.1559C67.9959 55.4582 68.1368 56.0992 67.8544 56.5875L67.0284 56.0401C67.8544 56.5875 67.8537 56.5888 67.8537 56.5888L67.8528 56.5904L67.8505 56.5942L67.8443 56.6048L67.8246 56.6376C67.8082 56.6646 67.7854 56.7017 67.7558 56.7481C67.6968 56.841 67.6109 56.9715 67.4966 57.1342C67.2682 57.4596 66.9261 57.914 66.4577 58.454C65.5209 59.5341 64.0786 60.9569 62.0307 62.3736C57.9259 65.2131 53 68 41.7714 68C25.5 68 19.6097 60.5458 17.1633 56.617C16.8657 56.1391 16.9863 55.4934 17.4327 55.1748C17.8791 54.8562 18.4822 54.9853 18.7798 55.4632C20.8666 58.8144 26.5 65.92 41.7714 65.92C53.5 65.92 57.1883 63.247 60.9763 60.6266C62.8747 59.3133 64.195 58.0061 65.034 57.0387C65.4536 56.5549 65.7528 56.1562 65.9436 55.8844C66.039 55.7486 66.1073 55.6445 66.15 55.5774C66.1713 55.5439 66.1862 55.5196 66.1949 55.5053L66.2025 55.4927L66.2031 55.4917C66.4857 55.0041 67.0839 54.8538 67.5398 55.1559Z" fill="black"/>
+</g>
+<defs>
+<filter id="filter0_d" x="28.005" y="-11.5" width="68.495" height="112.352" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="59" y="24" width="4" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="20" y="24" width="4" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter3_d" x="17" y="55" width="51" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="31" y1="7" x2="39" y2="83.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#19CBF9"/>
+<stop offset="1" stop-color="#2867D8"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="43" y1="0" x2="43" y2="86" gradientUnits="userSpaceOnUse">
+<stop stop-color="#18CDF8"/>
+<stop offset="1" stop-color="#186CF2"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="50.5" y1="8" x2="63.5" y2="81.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EAECEB"/>
+<stop offset="1" stop-color="#D2DCE5"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/dock/github.svg b/public/images/dock/github.svg
new file mode 100644
index 0000000000..837467db96
--- /dev/null
+++ b/public/images/dock/github.svg
@@ -0,0 +1,89 @@
+<svg width="248" height="248" viewBox="0 0 248 248" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ii)">
+<g clip-path="url(#clip0)">
+<path d="M124 248C178.336 248 208.542 248 228.271 228.271C248 208.542 248 178.336 248 124C248 69.6639 248 39.4577 228.271 19.7288C208.542 -3.28488e-06 178.336 0 124 0C69.6639 0 39.4577 -3.28488e-06 19.7288 19.7288C-3.28488e-06 39.4577 0 69.6639 0 124C0 178.336 -3.28488e-06 208.542 19.7288 228.271C39.4577 248 69.6639 248 124 248Z" fill="url(#paint0_radial)"/>
+<g filter="url(#filter1_ii)">
+<path d="M124 34C74.305 34 34 74.2975 34 124C34 163.765 59.785 197.5 95.5525 209.402C100.045 210.235 101.5 207.445 101.5 205.075V188.32C76.465 193.765 71.2525 177.7 71.2525 177.7C67.1575 167.298 61.255 164.53 61.255 164.53C53.0875 158.942 61.8775 159.062 61.8775 159.062C70.915 159.692 75.67 168.34 75.67 168.34C83.695 182.095 96.7225 178.12 101.86 175.818C102.663 170.005 104.995 166.03 107.575 163.788C87.5875 161.5 66.5725 153.783 66.5725 119.305C66.5725 109.472 70.09 101.448 75.8425 95.1475C74.9125 92.875 71.83 83.7175 76.72 71.3275C76.72 71.3275 84.28 68.9125 101.478 80.5525C108.655 78.5575 116.35 77.56 124 77.5225C131.65 77.56 139.352 78.5575 146.545 80.5525C163.727 68.9125 171.272 71.3275 171.272 71.3275C176.17 83.725 173.087 92.8825 172.158 95.1475C177.932 101.448 181.42 109.48 181.42 119.305C181.42 153.872 160.368 161.485 140.327 163.712C143.552 166.503 146.5 171.978 146.5 180.378V205.075C146.5 207.467 147.94 210.28 152.507 209.395C188.245 197.477 214 163.75 214 124C214 74.2975 173.702 34 124 34Z" fill="#24292E"/>
+</g>
+<g style="mix-blend-mode:overlay">
+<path d="M124 248C178.336 248 208.542 248 228.271 228.271C248 208.542 248 178.336 248 124C248 69.6639 248 39.4577 228.271 19.7288C208.542 -3.28488e-06 178.336 0 124 0C69.6639 0 39.4577 -3.28488e-06 19.7288 19.7288C-3.28488e-06 39.4577 0 69.6639 0 124C0 178.336 -3.28488e-06 208.542 19.7288 228.271C39.4577 248 69.6639 248 124 248Z" fill="url(#paint1_linear)"/>
+</g>
+<path d="M124 248C178.336 248 208.542 248 228.271 228.271C248 208.542 248 178.336 248 124C248 69.6639 248 39.4577 228.271 19.7288C208.542 -3.8147e-06 178.336 0 124 0C69.6639 0 39.4577 -3.8147e-06 19.7288 19.7288C-3.8147e-06 39.4577 0 69.6639 0 124C0 178.336 -3.8147e-06 208.542 19.7288 228.271C39.4577 248 69.6639 248 124 248Z" fill="url(#paint2_linear)"/>
+<g style="mix-blend-mode:soft-light" filter="url(#filter2_f)">
+<path d="M227.211 227.211C217.655 236.766 205.521 241.611 188.896 244.05C172.219 246.496 151.211 246.5 124 246.5C96.7892 246.5 75.7809 246.496 59.1044 244.05C42.4786 241.611 30.345 236.766 20.7895 227.211C11.234 217.655 6.38935 205.521 3.95022 188.896C1.50366 172.219 1.5 151.211 1.5 124C1.5 96.7892 1.50366 75.7809 3.95022 59.1044C6.38935 42.4786 11.234 30.345 20.7895 20.7895C30.345 11.234 42.4786 6.38935 59.1044 3.95022C75.7809 1.50366 96.7892 1.5 124 1.5C151.211 1.5 172.219 1.50366 188.896 3.95022C205.521 6.38935 217.655 11.234 227.211 20.7895C236.766 30.345 241.611 42.4786 244.05 59.1044C246.496 75.7809 246.5 96.7892 246.5 124C246.5 151.211 246.496 172.219 244.05 188.896C241.611 205.521 236.766 217.655 227.211 227.211Z" stroke="url(#paint3_linear)" stroke-width="3"/>
+</g>
+<g style="mix-blend-mode:soft-light" filter="url(#filter3_f)">
+<path d="M226.857 226.857C217.404 236.31 205.388 241.125 188.823 243.555C172.191 245.995 151.225 246 124 246C96.775 246 75.809 245.995 59.177 243.555C42.6124 241.125 30.5956 236.31 21.143 226.857C11.6905 217.404 6.87506 205.388 4.44492 188.823C2.00488 172.191 2 151.225 2 124C2 96.775 2.00488 75.809 4.44492 59.177C6.87506 42.6124 11.6905 30.5956 21.143 21.143C30.5956 11.6905 42.6124 6.87506 59.177 4.44492C75.809 2.00488 96.775 2 124 2C151.225 2 172.191 2.00488 188.823 4.44492C205.388 6.87506 217.404 11.6905 226.857 21.143C236.31 30.5956 241.125 42.6124 243.555 59.177C245.995 75.809 246 96.775 246 124C246 151.225 245.995 172.191 243.555 188.823C241.125 205.388 236.31 217.404 226.857 226.857Z" stroke="url(#paint4_linear)" stroke-width="4"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_ii" x="0" y="-2" width="248" height="252" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter1_ii" x="34" y="32" width="180" height="184" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter2_f" x="-2" y="-2" width="252" height="252" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="1" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter3_f" x="-6" y="-6" width="260" height="260" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur"/>
+</filter>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(124 124) rotate(90) scale(124)">
+<stop stop-color="#FAFBFC"/>
+<stop offset="1" stop-color="#F6F8FA"/>
+</radialGradient>
+<linearGradient id="paint1_linear" x1="-2.90864" y1="4.96427e-07" x2="64.9836" y2="290.737" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="0.605667" stop-opacity="0.0781197"/>
+<stop offset="1" stop-opacity="0.26"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="-2.90864" y1="4.96427e-07" x2="64.9836" y2="290.737" gradientUnits="userSpaceOnUse">
+<stop offset="0.140625" stop-color="white" stop-opacity="0.26"/>
+<stop offset="0.640625" stop-color="white" stop-opacity="0.0781197"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="124" y1="248" x2="124" y2="209.25" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="124" y1="0" x2="124" y2="124" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="248" height="248" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/dock/photos.svg b/public/images/dock/photos.svg
new file mode 100644
index 0000000000..e13afbb1cb
--- /dev/null
+++ b/public/images/dock/photos.svg
@@ -0,0 +1,187 @@
+<svg width="86" height="87" viewBox="0 0 86 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 32C0 20.799 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.799 0 32 0H54C65.201 0 70.8016 0 75.0798 2.17987C78.843 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.799 86 32V54C86 65.201 86 70.8016 83.8201 75.0798C81.9027 78.843 78.843 81.9027 75.0798 83.8201C70.8016 86 65.201 86 54 86H32C20.799 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.843 2.17987 75.0798C0 70.8016 0 65.201 0 54V32Z" fill="#FCFCF4"/>
+<g opacity="0.2" filter="url(#filter0_f)">
+<g style="mix-blend-mode:multiply">
+<rect x="31" y="8" width="24" height="35" rx="12" fill="#FFA625"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="31" y="48" width="24" height="35" rx="12" fill="#69ABDF"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="60.7488" y="11" width="23" height="35" rx="11.5" transform="rotate(45 60.7488 11)" fill="#E7E00B"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="77.0122" y="63.7488" width="23" height="35" rx="11.5" transform="rotate(135 77.0122 63.7488)" fill="#63BE9D"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="8.20319" y="27.6628" width="23" height="35" rx="11.5" transform="rotate(-45 8.20319 27.6628)" fill="#FE6D51"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="24.4667" y="80.0122" width="23" height="35" rx="11.5" transform="rotate(-135 24.4667 80.0122)" fill="#A387C1"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="80" y="34" width="23" height="35" rx="11.5" transform="rotate(90 80 34)" fill="#9FCF45"/>
+</g>
+<g style="mix-blend-mode:multiply">
+<rect x="41" y="34" width="23" height="35" rx="11.5" transform="rotate(90 41 34)" fill="#D47A9E"/>
+</g>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter1_di)">
+<rect x="31" y="5" width="24" height="35" rx="12" fill="#FFA625"/>
+<rect x="31" y="5" width="24" height="35" rx="12" fill="url(#paint0_linear)" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter2_di)">
+<rect x="31" y="45" width="24" height="35" rx="12" fill="#69ABDF"/>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter3_di)">
+<rect x="60.7488" y="8" width="23" height="35" rx="11.5" transform="rotate(45 60.7488 8)" fill="#E7E00B"/>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter4_di)">
+<rect x="77.0122" y="60.7488" width="23" height="35" rx="11.5" transform="rotate(135 77.0122 60.7488)" fill="#63BE9D"/>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter5_di)">
+<rect x="8.20319" y="24.6628" width="23" height="35" rx="11.5" transform="rotate(-45 8.20319 24.6628)" fill="#FE6D51"/>
+<rect x="8.20319" y="24.6628" width="23" height="35" rx="11.5" transform="rotate(-45 8.20319 24.6628)" fill="url(#paint1_linear)" style="mix-blend-mode:overlay"/>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter6_di)">
+<rect x="24.4667" y="77.0122" width="23" height="35" rx="11.5" transform="rotate(-135 24.4667 77.0122)" fill="#A387C1"/>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter7_di)">
+<rect x="80" y="31" width="23" height="35" rx="11.5" transform="rotate(90 80 31)" fill="#9FCF45"/>
+</g>
+<g style="mix-blend-mode:multiply" filter="url(#filter8_di)">
+<rect x="40" y="31" width="23" height="35" rx="11.5" transform="rotate(90 40 31)" fill="#D47A9E"/>
+<rect x="40" y="31" width="23" height="35" rx="11.5" transform="rotate(90 40 31)" fill="url(#paint2_linear)" style="mix-blend-mode:overlay"/>
+</g>
+<defs>
+<filter id="filter0_f" x="2" y="4" width="82" height="83" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur"/>
+</filter>
+<filter id="filter1_di" x="28" y="4" width="30" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter2_di" x="28" y="44" width="30" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter3_di" x="37.7635" y="11.7635" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter4_di" x="37.7635" y="39.7635" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter5_di" x="9.96661" y="12.1628" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter6_di" x="9.96667" y="39.7635" width="37.4853" height="37.4853" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter7_di" x="42" y="30" width="41" height="29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter8_di" x="2" y="30" width="41" height="29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<linearGradient id="paint0_linear" x1="40" y1="-9.5" x2="48" y2="12.5" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="12.0637" y1="20.5149" x2="21.2561" y2="30.4144" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="43" y1="75" x2="48" y2="52" gradientUnits="userSpaceOnUse">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/dock/preview.png b/public/images/dock/preview.png
new file mode 100644
index 0000000000..9edf5d2701
Binary files /dev/null and b/public/images/dock/preview.png differ
diff --git a/public/images/dock/safari.svg b/public/images/dock/safari.svg
new file mode 100644
index 0000000000..c2d94d38b6
--- /dev/null
+++ b/public/images/dock/safari.svg
@@ -0,0 +1,57 @@
+<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 32C0 20.799 0 15.1984 2.17987 10.9202C4.09734 7.15695 7.15695 4.09734 10.9202 2.17987C15.1984 0 20.799 0 32 0H54C65.201 0 70.8016 0 75.0798 2.17987C78.843 4.09734 81.9027 7.15695 83.8201 10.9202C86 15.1984 86 20.799 86 32V54C86 65.201 86 70.8016 83.8201 75.0798C81.9027 78.843 78.843 81.9027 75.0798 83.8201C70.8016 86 65.201 86 54 86H32C20.799 86 15.1984 86 10.9202 83.8201C7.15695 81.9027 4.09734 78.843 2.17987 75.0798C0 70.8016 0 65.201 0 54V32Z" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_di)">
+<circle cx="43" cy="43" r="37" fill="url(#paint1_linear)"/>
+</g>
+<circle cx="43" cy="43" r="32.9629" transform="rotate(4.84342 43 43)" stroke="white" stroke-width="3" stroke-dasharray="1 5"/>
+<circle cx="43" cy="43" r="31.4629" transform="rotate(-10.1566 43 43)" stroke="white" stroke-width="6" stroke-dasharray="1 5"/>
+<g filter="url(#filter1_d)">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="39" y="21" width="29" height="26">
+<path d="M39 39.5L67.5 21L45 46.5L39 39.5Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M39 39.5L67.5 21L45 46.5L39 39.5Z" fill="#D27067"/>
+<path d="M40.5 44.5L67.5 21L45 46.5L40.5 44.5Z" fill="#B63027"/>
+</g>
+<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="17" y="39" width="29" height="26">
+<path d="M45.5 46L17 64.5L39.5 39L45.5 46Z" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1)">
+<path d="M45.5 46L17 64.5L39.5 39L45.5 46Z" fill="#CEC4CC"/>
+<path d="M44 41L17 64.5L39.5 39L44 41Z" fill="#FCFFF6"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_di" x="6" y="6" width="74" height="76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.53 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.37 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow"/>
+</filter>
+<filter id="filter1_d" x="13" y="19" width="58.5" height="51.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.74 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="22" y1="76.5" x2="60" y2="-4.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5D5D5"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="57.6053" y1="13.3026" x2="43" y2="80" gradientUnits="userSpaceOnUse">
+<stop stop-color="#25B5F8"/>
+<stop offset="1" stop-color="#3570B6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/dock/settings.png b/public/images/dock/settings.png
new file mode 100644
index 0000000000..9701b7587e
Binary files /dev/null and b/public/images/dock/settings.png differ
diff --git a/public/images/dock/terminal.svg b/public/images/dock/terminal.svg
new file mode 100644
index 0000000000..c4d526965c
--- /dev/null
+++ b/public/images/dock/terminal.svg
@@ -0,0 +1,11 @@
+<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 32C4 26.3335 4.00311 22.3241 4.2592 19.1898C4.51147 16.1021 4.98916 14.2174 5.7439 12.7362C7.27787 9.72556 9.72556 7.27787 12.7362 5.7439C14.2174 4.98916 16.1021 4.51147 19.1898 4.2592C22.3241 4.00311 26.3335 4 32 4H54C59.6665 4 63.6759 4.00311 66.8102 4.2592C69.8979 4.51147 71.7826 4.98916 73.2638 5.7439C76.2744 7.27787 78.7221 9.72556 80.2561 12.7361C81.0108 14.2174 81.4885 16.1021 81.7408 19.1898C81.9969 22.3241 82 26.3335 82 32V54C82 59.6665 81.9969 63.6759 81.7408 66.8102C81.4885 69.8979 81.0108 71.7826 80.2561 73.2638C78.7221 76.2744 76.2744 78.7221 73.2638 80.2561C71.7826 81.0108 69.8979 81.4885 66.8102 81.7408C63.6759 81.9969 59.6665 82 54 82H32C26.3335 82 22.3241 81.9969 19.1898 81.7408C16.1021 81.4885 14.2174 81.0108 12.7362 80.2561C9.72556 78.7221 7.27787 76.2744 5.74389 73.2638C4.98916 71.7826 4.51147 69.8979 4.2592 66.8102C4.00311 63.6759 4 59.6665 4 54V32Z" fill="#262626" stroke="black" stroke-width="8"/>
+<path d="M1 32C1 26.383 1.00078 22.2303 1.26916 18.9455C1.53659 15.6723 2.06474 13.3488 3.07088 11.3742C4.89247 7.7991 7.7991 4.89247 11.3742 3.07088C13.3488 2.06474 15.6723 1.53659 18.9455 1.26916C22.2303 1.00078 26.383 1 32 1H54C59.617 1 63.7697 1.00078 67.0545 1.26916C70.3277 1.53659 72.6512 2.06474 74.6258 3.07088C78.2009 4.89247 81.1075 7.7991 82.9291 11.3742C83.9353 13.3488 84.4634 15.6723 84.7308 18.9455C84.9992 22.2303 85 26.383 85 32V54C85 59.617 84.9992 63.7697 84.7308 67.0545C84.4634 70.3277 83.9353 72.6512 82.9291 74.6258C81.1075 78.2009 78.2009 81.1075 74.6258 82.9291C72.6512 83.9353 70.3277 84.4634 67.0545 84.7308C63.7697 84.9992 59.617 85 54 85H32C26.383 85 22.2303 84.9992 18.9455 84.7308C15.6723 84.4634 13.3488 83.9353 11.3742 82.9291C7.7991 81.1075 4.89247 78.2009 3.07088 74.6258C2.06474 72.6512 1.53659 70.3277 1.26916 67.0545C1.00078 63.7697 1 59.617 1 54V32Z" stroke="url(#paint0_linear)" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 15.5V18L24 22L16 26.5V29L26 23.5V20.5L16 15.5ZM41 30H30V33H41V30Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear" x1="43" y1="0" x2="43" y2="86" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1F2F2"/>
+<stop offset="1" stop-color="#888886"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/dock/trash.png b/public/images/dock/trash.png
new file mode 100644
index 0000000000..b76ead7f19
Binary files /dev/null and b/public/images/dock/trash.png differ
diff --git a/public/images/dock/window.jpg b/public/images/dock/window.jpg
new file mode 100644
index 0000000000..8372ed942c
Binary files /dev/null and b/public/images/dock/window.jpg differ
diff --git a/public/images/favicon.ico b/public/images/favicon.ico
new file mode 100644
index 0000000000..a0b1230c4b
Binary files /dev/null and b/public/images/favicon.ico differ
diff --git a/public/showcase/resources/demo/images/flag_placeholder.png b/public/images/flag/flag_placeholder.png
similarity index 100%
rename from public/showcase/resources/demo/images/flag_placeholder.png
rename to public/images/flag/flag_placeholder.png
diff --git a/public/images/flag/flags_responsive.png b/public/images/flag/flags_responsive.png
new file mode 100755
index 0000000000..71f1de0572
Binary files /dev/null and b/public/images/flag/flags_responsive.png differ
diff --git a/public/showcase/resources/images/forum.png b/public/images/forum.png
similarity index 100%
rename from public/showcase/resources/images/forum.png
rename to public/images/forum.png
diff --git a/public/showcase/resources/demo/images/galleria/galleria1.jpg b/public/images/galleria/galleria1.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria1.jpg
rename to public/images/galleria/galleria1.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria10.jpg b/public/images/galleria/galleria10.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria10.jpg
rename to public/images/galleria/galleria10.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria10s.jpg b/public/images/galleria/galleria10s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria10s.jpg
rename to public/images/galleria/galleria10s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria11.jpg b/public/images/galleria/galleria11.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria11.jpg
rename to public/images/galleria/galleria11.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria11s.jpg b/public/images/galleria/galleria11s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria11s.jpg
rename to public/images/galleria/galleria11s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria12.jpg b/public/images/galleria/galleria12.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria12.jpg
rename to public/images/galleria/galleria12.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria12s.jpg b/public/images/galleria/galleria12s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria12s.jpg
rename to public/images/galleria/galleria12s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria13.jpg b/public/images/galleria/galleria13.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria13.jpg
rename to public/images/galleria/galleria13.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria13s.jpg b/public/images/galleria/galleria13s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria13s.jpg
rename to public/images/galleria/galleria13s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria14.jpg b/public/images/galleria/galleria14.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria14.jpg
rename to public/images/galleria/galleria14.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria14s.jpg b/public/images/galleria/galleria14s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria14s.jpg
rename to public/images/galleria/galleria14s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria15.jpg b/public/images/galleria/galleria15.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria15.jpg
rename to public/images/galleria/galleria15.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria15s.jpg b/public/images/galleria/galleria15s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria15s.jpg
rename to public/images/galleria/galleria15s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria1s.jpg b/public/images/galleria/galleria1s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria1s.jpg
rename to public/images/galleria/galleria1s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria2.jpg b/public/images/galleria/galleria2.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria2.jpg
rename to public/images/galleria/galleria2.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria2s.jpg b/public/images/galleria/galleria2s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria2s.jpg
rename to public/images/galleria/galleria2s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria3.jpg b/public/images/galleria/galleria3.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria3.jpg
rename to public/images/galleria/galleria3.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria3s.jpg b/public/images/galleria/galleria3s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria3s.jpg
rename to public/images/galleria/galleria3s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria4.jpg b/public/images/galleria/galleria4.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria4.jpg
rename to public/images/galleria/galleria4.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria4s.jpg b/public/images/galleria/galleria4s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria4s.jpg
rename to public/images/galleria/galleria4s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria5.jpg b/public/images/galleria/galleria5.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria5.jpg
rename to public/images/galleria/galleria5.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria5s.jpg b/public/images/galleria/galleria5s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria5s.jpg
rename to public/images/galleria/galleria5s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria6.jpg b/public/images/galleria/galleria6.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria6.jpg
rename to public/images/galleria/galleria6.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria6s.jpg b/public/images/galleria/galleria6s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria6s.jpg
rename to public/images/galleria/galleria6s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria7.jpg b/public/images/galleria/galleria7.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria7.jpg
rename to public/images/galleria/galleria7.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria7s.jpg b/public/images/galleria/galleria7s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria7s.jpg
rename to public/images/galleria/galleria7s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria8.jpg b/public/images/galleria/galleria8.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria8.jpg
rename to public/images/galleria/galleria8.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria8s.jpg b/public/images/galleria/galleria8s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria8s.jpg
rename to public/images/galleria/galleria8s.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria9.jpg b/public/images/galleria/galleria9.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria9.jpg
rename to public/images/galleria/galleria9.jpg
diff --git a/public/showcase/resources/demo/images/galleria/galleria9s.jpg b/public/images/galleria/galleria9s.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/galleria/galleria9s.jpg
rename to public/images/galleria/galleria9s.jpg
diff --git a/public/images/github.svg b/public/images/github.svg
new file mode 100644
index 0000000000..ff0af48114
--- /dev/null
+++ b/public/images/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
\ No newline at end of file
diff --git a/public/images/header-pro.jpg b/public/images/header-pro.jpg
new file mode 100644
index 0000000000..40e9d722c0
Binary files /dev/null and b/public/images/header-pro.jpg differ
diff --git a/public/images/landing-new/avatar-1.svg b/public/images/landing-new/avatar-1.svg
new file mode 100644
index 0000000000..93d4a0f896
--- /dev/null
+++ b/public/images/landing-new/avatar-1.svg
@@ -0,0 +1,9 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="28" height="28" rx="14" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1676_1580" transform="scale(0.00131579)"/>
+</pattern>
+<image id="image0_1676_1580" width="760" height="760" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAL4CAYAAAAOIoPjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAI4SSURBVHgB7f0NdFX3fef7f/dBpLl2DKJjnOYBEJ7+kziBP8JOZ3INMQd3prXxOMhu1grYYKSsFcDxAyKT2CmkQeQGJzi5g8iTgawVCYPBXdMaEf+N3c6/0cFBXpk7dhEL/JDe3iIgTabGWUh47LZGaN/93UdbFkLae59z9vN+vxJZIB1sbJ4+53s+v+/PEABAbMzfdDTYX6irK783C8Pvh8rvDam3/jq1/OWC9WWzvvwtDX1fP87fsUGqYvSN8/ca9TGj3/o+9Q9/ZUBM6R/+PpUfYwyV3w8O2u+ND7SM8/cDAETBEABAYMxzHfXyL1bw1sCuYX2SFc4vDs0WDel2QJcG0WBuDNWLadRLlhmm9aSg0D/yRMG03ptyqvw564mBPinQz09+p8+Y1tIvAIBAEPABwCc7vF94jxXcjQapM2e9G9ytr4u+VTs9R5m+iqBPBqxXC4aGjkld4Zz9nicBAFARAj4AjGJXZgq/02hNn63p+lCjlCfv1teHGjI/cU+68isCfdaXrMn/0CmZVDhpPwEYHOyjEgQA7yLgA8idkUm8SKMd4o3CLPvLeajNZJrRKxr+NfTLpF4pXOyXusFeJv8A8oaADyCzJgzyVGlyRoO/Tv/NY2JOKmnwN6avLAkAZBQBH0Am2GH+nd8pDnfjNcwXCfJwNzzxL0ip3Pln2g8gGwj4AFJnJMwXzHliT+SZyiMoesi30GsHfg3+hH4AKUTAB5BodpgfrGuUQmEek3nEYzj0D0/6qfcASDoCPoBEsbfYTHpPcbgzv8j6SKMAyVMa6fS/5191yt8nAJAQBHwAsbID/Xves5TpPNJteMpvmF0yZBwzrrm7VwAgJgR8AJG6JNAXpIm1lMgmAj+A+BDwAYRqeFVlk8jQIgI98ssK/IaUrD92SzLpwmEqPQDCRMAHEKiRQ7GmFeaNwlIqN8B4jF4xhw5bfwp3sakHQNAI+ABqNlK7GTKtUG82MqUHKlaSgtElF+UwdR4AtSLgA6gYU3ogTMN1HlN2s5ITQDUI+AB8GenSG+YqpvRARAyzX8xCyT6sS3cfgE8EfAATuqR6I1IUAHGzwr50EvYBuCHgA7iEHerr3rPK+lJRCPVAghl6u26nFN45SNgHMBoBHwChHkg9wj6AdxHwgZwi1ANZRdgH8o6AD+SIfVB2yAr1dOqBvKCzD+QQAR/IuEu23xDqgTxzwv5BLtYCso2AD2SUeXZPUUxZZb1U38RKSwAjdPWmSBd79oHsIuADGVK+gOo968QYaiXUA/Bm9llB/6BMHmynwgNkBwEfSDkqOAACYld4jKtX7BYAqUbAB1JquILTJAVZxbQeQHCsqb5hhf1Jg5uZ6gPpRMAHUoQtOAAixlQfSCECPpAC5utPNFq/WpfSrQcQD6b6QJoQ8IEEs2s4YmwSpvUAkoOpPpBwBHwgYdiEAyAddKpvtHGJFpA8BHwgITg0CyC1DLOT+g6QHAR8IGbUcABkSMn6XW0zF2gB8SLgAzEo766f1CRGgd31ADKoXN+hpw/Eg4APRIh+PYB8oacPxIGAD0SAYA8g31izCUSJgA+EyAr2DXKhrpWDswAwjAO5QOgI+EAIyhtxzObhjj0AYCyCPhAaAj4QIDbiAECFCPpA4Aj4QAAI9gBQI4I+EBgCPlADgj0ABIygD9SMgA9UgWAPACEj6ANVI+ADFShvxZnUxuFZAIgIQR+oGAEf8IFgDwAxI+gDvhHwARdcUAUACUPQBzwR8IFxEOwBIMnMPpFCpzH97s0C4DIEfGAM8/XHm6VgbCPYA0DSWUHfMNqMq1fsFgAjCPjAsOHNONusLzYKACBFCPrAaAR85J557olGGTQ12BcFAJBiRpfUvbOefj7yjoCP3Cr37CfrLvtWAQBkBwdxkXMEfOSSefaJTRygBYAsM/vkorHd+L0V7QLkDAEfuVLu2UuH9VO/QQAAOUA/H/lDwEcu2BdVDU62gj09ewDIJWo7yBECPjKNffYAgEtZ03z25yPjCPjILOo4AIDxUdtBthHwkTnUcQAAvlDbQUYVBMgQezvOxbqjQrgHAHgxjWZrIHTS/rMDyBAm+MgE6jgAgNqYfWIW7jCuubtXgJQj4CPVuKwKABAoajvIAAI+Usv8p8ebZJLRwXYcAECwOISLdCPgI3U4RAsAiATTfKQUh2yRKuZvn1jHIVoAQCTsQ7h13eYbe1cJkCJM8JEKTO0BADErSd2FFqb5SAMm+Eg8pvYAgAQoWoOmo+b/3MtSByQeE3wkFlN7AEBCMc1HojHBRyIxtQcAJBjTfCQaE3wkClN7AECqsGkHCUTAR2Kw1x4AkE7szUeyEPARO26jBQBkAtN8JAQBH7Eyz+4pWu86rJ+KDQIAQOpZ03yzcIdxzd29AsSEQ7aIjXl27zYr2HcT7gEA2WE0WJP8o+bZJzYJEBMm+Ijc8EHaA9YXGwUAgMyypvl1g4up7CBqTPARKfu67/L6S8I9ACDjjAZ7nab+2QdEiAk+IsFBWgBAzrVL3QU9gNsvQMgI+Aidee6JRhkcOkDXHgCQb1R2EA0qOghV+UbaIQ7SAgAghlZ2TnIDLsLGBB+hsCs5F9+zTUyzWQAAwKXKO/PXU9lBGAj4CFx5S04dU3sAAFxR2UE4qOggUOVKjm7JMRoEAAC4MMpbdqjsIGBM8BEItuQAAFCTdmP6ivUCBICAj5pxcRUAAEGgsoNgUNFBTcyze4pcXAUAQBAM+wyb/WcrUAMCPqpm9+3F6BbTqBcAABAAo0H/bDXPPrFJgCpR0UHFWIEJAEAkuP0WVSHgoyL07QEAiBK9fFSOig58szuB9n57wj0AANEwyr3815/gz174RsCHLyN9ezEaBAAARMhoEMNkXz58I+DDk3l27zYZMtsFAADEZ5Js4/At/KCDjwkNX16lffuiAACApChJ3YUWevmYCAEf4yofpq2jkgMAQCJx+BYTo6KDy5jnnmgsX15lNAgAAEggg8O3mBABH5cw39i7SgbNo1xeBQBA0hkcvsW4CPgYYf72iU1iSqcAAID04PAtxqCDD5u9KUeECQAAAOnVbkxfsV6QewT8nGNTDgAAmaIbdu4wprX0C3KLgJ9jbMoBACCL2LCTdwT8nCLcAwCQZYT8POOQbQ6xBhMAgKwzWKOZYwT8nLHXYF4c6mYNJgAAWWfoGs1u85/2NQlyhYCfI+Zvn1hnr8Ek3AMAkBf1Uhg6wK78fCHg54S9437IbBcAAJA/7MrPFQ7Z5sBwuG8TAACQc0abMf3uzYJMI+BnHBdYAQCASxHys46An2HmG090iGk2CwAAwGiG2WlcvbJFkEkE/Iwi3AMAAFeE/Mwi4GeMea6jXgYnd1tfZO8tAADwYPRK3Tt6IVa/IDMI+BlCuAcAAJUj5GcNAT8jCPcAAKB6hPwsYQ9+BljhvoFwDwAAqmc2yuB7uu1MgdRjgp9y5XBf121fRw0AAFATs0/qBnWS3ydILQJ+ihHuAQBA8Aj5aUfATynCPQAACA8hP83o4KcQ4R4AAITL0KzxMzr56cQEP2UI9wAAIDrmSWuSfzOT/HQh4KcIqzABAED0jKNS987NrNBMDwJ+ShDuAQBAfAj5aULATwHCPQAAiB8hPy04ZJsGhHsAABA7c74MvudngsQj4Cec+cYTHUK4BwAAiWDON9/Y8xNBolHRSTA73JtmswAAACSJYXYYV6/8vCCRmOAnlPnbJzYR7gEAQCKZRot5du9/ESQSAT+B7HA/ZLYJAABAcrWaZ63MgsShopMwhHsAAJAiphUnNxvT794sSAwCfoJY4X6dFe7bBQAAID1MuShfMn5vBRkmIQj4CWH+0+NNUigcEAAAgPQxrVTZYly9YrcgdgT8BDDPPdEoF4e6xTTqBQAAIJ3OWVnmZuOau3sFsSLgx8w819Egg3Xd1g9FgwAAAKTbOam7cL0xraVPEBu26MSIcA8AADJmmpVtfmZnHMSGCX5MrJ/49dYvgKOEewAAkD3mSakb1El+vyBydYJ4DE7WA7UNAgAT6DvzxoSfa5hxtQBAchmzrazzlPWFmwWRY4IfA/Ps3m3Wu1YBkHn9A29J//l/lt7jfdaX35aB82/LSSu4D1hf7j//lv2xvtNnhx+rH3tbKlU/5Qqpn6pvV9rvVcOM6TLV+vI063OzrCcDDTOn25/TJwb6OACIyDZj+oovCSJFwI8YF1kB2aMhXqftvcdPSe/Lp+3w3nvilB3cqwnsYdMnBI1zZ9mBv/ETs2TenJl26G8cfg8AAeIirBgQ8CPERVZA+mmQLx15xQ7yp86ctUO9W5UmbZzwP2/OLCne+DF78t9ofRkAasCO/IgR8CNi77ofNI8KgNTQyXyp51UpvfCaHLMm8hrmkziRD9vY0F9ccB2TfgCVMsU0rmdHfjQI+BFgHSaQDs50/rAV6Es9r2RqMh80neprpWfprTfYX9ZJPwB4YEd+RAj4ISPcA8k1ekJ/8NCLBPoaaMhfZE32m6zArxN+ABgf6zOjQMAPmXl2rxXupSgAEkFDvIb5rmdfssM9gqeVnuLCcthfdON1TPcBjNVtTF/B+swQEfBDxMYcIBk0yB9+4VXpOvSSvd0mLeqnTrXC8tTLPt5/fsB69WFA0kIn+s3LPk3YBzAa6zNDRMAPCRtzgHj1njgtB599UTr3Px979aZhxkw7rDfOnStTp06RaVZonzWz/DF9a7C+rDTM69crpWHfCf2j306dPi3nzuv7M/bX+6yv9505LXEi7AMYZspF+ZLxeyvISiEg4IeAjTlAPLRTv/vJn8dSv9EQrwF+1swZMtv6sgZ4/bp+PGl6Txy3A/+x48flpBX4jx0/YX9dPx4lJ+yvWnaTAMgl0/r/zcb0lSVBoAj4AeNQLRA9DfObv/NUJKHenrhboX3RwgV2kF+0cOHIhD7tnJCvwf+o/f5EJKFfb9fVsL9uzS3s3Adyxz50ezObdYJFwA+QFe7rrXB/lHAPhE+n9dt3/ZW073gu1N30Gt6LVohvnDPHDvONc+ZK3pR6jtihv9TTYwd+rfqERQN+65o/ZqoP5IpxVOreuZnNOsEh4AfIPLt3m/WuVQCEJuxpvRPoFy1YYL9PYsUmbhrye63Af/DQodACvzPV3/SVO+nqA3lgmB3G1Ss/LwgEAT8gbMwBwtX55PN2vz7oYG8ffrWm8k1LlsjS224j0FdBQ/7hI0ekywr8Ou0PmtPTZ78+kGkcug0QAT8A5tk9Res/ZbcACFRYNRwN9auWL7dC/W12uM9Cfz4ptMffdegZe7qvYT/IdZ4cygUyj0O3ASHg14hDtUDwwgj2o0N9ccFCQTQ07DuBP6iwr/WdtofuJOgD2XRO6i5cz6Hb2hDwa2RN708S7oFgBB3sCfXJ0rl/nx30NfAHgaAPZJVx1Jh+9/WCqhHwa8ChWiAYQQd7DfPr1q6131O/SR49lKv1nc2Pbg3kgC5BH8gkbrqtAQG/StxUCwRDN+IEEew1yGuob11zL6E+RTTo62R/9/79UisN+h3fX8NhXCAbOHRbAwJ+Feze/cW6o2Ia9QKgKroNp+WBndJ35g2phU7pNz38MBWclAtyqq8HcVmvCWQCffwqEfArxGVWQG2C2GNPtz7btKO/fceOmlduEvSBLLBvur2eS7AqQ8CvkPn6451iFFYJgIpoz37zdw5I+87npFrUcPJFJ/ltj367pvoO/XwgA7gEq2IE/ArQuweqs90K9W2PPlV1z55gn29BBf3uro1M84F0oo9fIQK+T+V995NPCgDfeo+fkvV/trfqOg7BHqMFEfSp7QCpdU5M42bjmrt7BZ4I+D7QuwcqU2sdh2APN7UGfWo7QFrRx/eLgO8D++4B/2rZjkOwRyVqDfpM84FUYj++DwR8D+brjzeLUegQAK5qndprsG976KsEe1RMg/7ipbdXtV6TaT6QOqaVXluMq1fsFkyIgO+CffeAP7VM7XXN5bYtj0jj3LmC+JiFgojzNvJBc+TNGBoqfznB9MKsavfoM80HUoX9+B4I+C7Ms3tO0rsH3OmGnNav7ZVKNcycKR0/+CF77ONiGGK+5z1iTp4s5qRJ9tc9adC/eFHEejMGB8tf1uCfMFrb2bx1q1RKp/nbvrlCmpZ8UgAknXHUmH739YJxEfAnYP72iU0yZLYJgHH1nT4rLQ/uqmpDjt48S88+Phrqh664wl+o92IFfDvsD78lJfDX0s/Xyo5O8wEkHn38CRDwx2FN7ovWf5puATCurmdflJb7d1W8116n9Tq11+k94mH+zu/I0P/2v0lY7KB/4YL9loSwX21th735QCpoh/BmY/rKkuASBPwxyvvu67qp5gDjW/+1vRUfpNVJvTO1R4wKBbk4ZYpERSs8xr/+a+yT/Wqn+fVTr5D2b67gAC6QaKzOHA8Bfwzz9cc7xSisEgCX0ErOHavapffEqYq+HVP75Bh673vFtN7iYLzzTvlNw35MSj1HrFee7qt4mk9lB0g8qjpjEPBHYSUmML5qtuQwtU+eofe9T8y6OomVNckv/Mu/lCs8MWzl6R8YkM3WNL99x46Kvl3jnFlyYHcrlR0gmUwZKtxpvP+uLoGNgD+Mag4wvmq25DC1T6ZEBHzH8OFcDftx1Heq6eZrL//A4+vtsA8gcVidOUpBUHZhUhvhHriU9u0rDffbHnlEun/6NOE+iZK00rJQsNd06pkAe6NPIdo/jpqX3yXdB5+WVcuX+/42+grW/MUbZfuu6i5zAxCqaTI4+ScCGxN8sVdirpMhs10A2PRWWu3bV7ICk732yTf0O78jZogbdGqlHf04JvrtOx6T9Rs3VPRt6OUDiWTKRfmS8Xsrcp/pch/wua0WuJQepl3ctKWivn3TkiVWuP8Re+2TzjDkYtJ/jExTCrp5x3qLsqOvVZ3FS2+vqLLTtOQG6fjeauvn/ZUCIDGo6ggVHbFezukg3ANlvcdPVRzutZJzYM8ThPs00JtorSl5ollPQnTbz8WrrrIrPFHRV6COlp6vqLLTdegl69fLI/aTYgCJQVVHch7w7WqOSFEAyO4nf15RuNdApF17tuSki12BSYNCwe7m23v7I+rn65PUTuuVKN3+5JeujbV/3RDygSQpmv9zb6vkWG4rOlRzgHdVuimnce5cOfD4Xg7SppTeZKs32qaJVnbsJycR1XYq3ZnPhh0gcXJd1cnvBJ9qDmDb/OhTFYV7rTDo9hHCfXrFtZqyFvqEJMrajh4Wr+Tnub7ypZP8Si+CAxCaXFd1chnw7QutqOYAdrhv+85Tvh+v1YVODtOmnx5kfeutWC6aqslwbUdfgdCufticXn7Tktt8Pb5/4G17jabW3QAkQm6rOrmr6HChFVBWSbjXQK+HaZuX3SXIDp2KDyV4baYr6xWISf/rf0X2SkTbo9+WzVu3+n585/fXyKplnxYAsctlVSchVxpGSC+0MowGAXKsknCvU0zt22vvHtmivXbDmoSb732vpI41zdcDuFo3MiI4ONz20Fft935DfvMDO+33hHwgdk5V52bJkVxN8O1qjlHoECDHKg339O2zL42HbkezL8j653+OpHLUuX+ffSlW/8CAv8czyQeSwJShwp3G++/qkpzITcCnmgMQ7jEx7bZHuXc+cBFWdnpPHJfFn7mdkA+ki1Z1rjWmtfRLDuTnkK1Wc8RoECCnKgn3WsfRw4WE+/wovP12+fbYtNLKzvveJ+akSRK2xjmV/frQug4Hb4HYaVXn65ITuZjgm68/0SiGeVSAnKo03Ovknk05+aS3yKayk+/QDUH6ZOXCBQmb7shfvPR237vymeQDsTOt/99sTF9ZkozLxwTfGDogQE5VEu6dHfeE+/yK6tBqaAxDhq68MpK6UaU1ttav7WFPPhAvHWznYjd+5gO++dsnNlHNQV7pDbWVhHt23ENpyC9EuIIyDFGdKagk5OuefC7DAuJmzDb/aU+bZFymKzrlg7WTTwqQQ13Pvih33NPu67FOuAcuMdxr1/dpZdd13nlHwlZJXadhxtXS3bXRelIwXQDEIvO78bM9wbcP1gL503v8lLTcv8vXY5uWLCHcY3y6meb8+VQfvrVXgEZw8LaSSX7fmTfsSX7f6bMCIBbObvzMyuwEn533yCsNDXZ4sEKEFw7Uwi+tu+gB3FRO8yNcoVnJJL9xzixrkr/B+vV3pQCIXKYP3GZ3gm8YmwTImf6Btwj3CIXWXDQkR1F3CZz1pEQ7+VGoZJKvXfz1X9srAGJhH7g1z3XUSwZlMuBzsBZ5dceqdl/hXsPHgcf3Eu5RGWsCrp12fUvbAVyzrq78CkQEnJDv59dX55M/l80+D8IDCJoxW96pa5UMylzAtw/WDpltAuSMrsMs9bzq+ThuqEWt0jrNNyOsGNm/zn7qL+S3Wb92t+96TgDEoGA8aGfHjMneBJ+Dtcghv+swCfcIjDPNf+utVE3zo6rqKL3xdtuWR3w9VkM+6zOBWGTywG2mDtlysBZ5pIdqZ9+w3tdjj5aet7v3QNDSdAhXd/wbg4MSlbZHvy2bt271fBzrM4HYZO7AbbYm+BysRc44G3P82PbII4R7hGaktpOClZrm5MkSpbaHviqta9d6Pk7Pz7Q86G+9LYBAZe6G28wEfPO3T6zjYC3yRsOAn0O1mx5+WFrX3CtAqLS288//XN6dn+B+ftQBX23b8i1pWnKb5+P0HM36r+0RAFHL1g23majolG+sresm4CNP9FCtn9598/Ll0sFFVoiDrqd873vt+k7STBoYsP7wMCVK/dY/c37xJl878g/sbrWeEHxSAERKb7i91pjW0i8pl40Jvn2w1mgQICe6nn3R96FanRwCsRg+iDtyG26CDuOaRvTzLd2o43d9pv3qHDfdAlHTA7dflwxIfcC3p/dGYZUAOaF/6K/f6H05TiW7uIFQjaruJGWHvhHx9N5h30Gxx/vXb//A2/a9FgAi12q+/kSjpFz6J/iDddsEyBG9+dJP717X87EOE0ljH8bVoO/s0Y8jaF+8GM8/d1hxwUJf6zPLN93SxwciZlgTgP8iKZfqgG+vxRSjSYCc0N5917MveT5OD9X6OdAHxEXXVDr1HXuqH+HaykICNv20rr3X16/R9p1/5esCOwCBKppn9xQlxVJ9yNb6j3+S7j3ywu+++6YlS+TAnicESJ1CQcy6OhnSLTfWewmhJ2/8y79IwXpLAr+HbnU//tHuLVI/9UoBEBXjqDH97uslpVI7wR+e3jcIkBN+9t1zqBapNjRUrvC89Za95cau8WgYD2K6r+cArL9fUsK90vMxfvr4WsnTah6AKJmN5ht7U3vGM70VHS61Qo5oNcdP777jBz+kd4/MsGs8ViDXC7Qm9fdL4c037TqPvZFHQ79bl14/bj1GH6vB3t7kE2ENyK/GOXN99fE7n/y5dB16UQBExhBTtpnnOuolhVJZ0TF/+8QmGTLbBMgBv9Uc7d3rjZlALhnGyOpLI0HrOP1a/JnbpdRzxPUx9VOvkJMvbaOqA0RpyNxsvH9lm6RM6gI+l1ohb2Zf3+o5vdep/cmjxwRAOmkPX/v42st307TkBjmw2/sJP4DApPLyq/RVdLjUCjnit5qj++4BpJc+SdeKnZeuQy+xVQeI1jR5p65VUiZVAZ9LrZAnWs3xc1vttkfYdw9kga7NbF271vNxLQ/stCb9bwmAiBSMB+0MmiLpmuDb03sgH/Sqei96YU7rmnsFQDZseuirnk/Y9VW9zT6e/AMIzDS5WPd1SZHUdPDL3fvJJwXIgc4nn7emdN4BX3v3TO+BbNHDtnro1ovuxm+cM0sARMIc7uL3SQqkZ4LP9B45odUc7d570a05hHsge/SVuVXLl3s+jt34QKSMNE3xUzHBZ3qPPNE/tNt3Puf6GLbmANmm23Rmz5/nuVWn8/urZdWymwRAJEzr/zcb01eWJOHSMcFneo+c0Om9V7hXbM0Bsk1vud300MOej2u1BgIcuAUiYw3GjVRM8RMf8NmcgzzxszVn3dq1VHOAHGhde69d13HTP/C2bN/1VwIgMkXz7J6iJFzyJ/hM75ETerB295M/d32MBnu25gD5oWtwveirfvrqH4BIpGKKn+iAz/QeeeLnYG3bQxysBfKkcc5cz934OsVnbSYQqcRP8ZM9wWd6j5zQ6b3XjbUa7Fctv0sA5IvuxtdOvptO69U/brgFIpP4KX5iAz7Te+SJn+k9B2uBfPJ74JYpPhCpRE/xkzvBZ3qPnPAzvW9evpxqDpBjeuBW6zpudILPFB+ITKKn+Incg8/ee+SFrrebv3ijZ8DnxloAfm64LS64Trq7NgqASCR2L34yJ/hM75ET23f+lWe4Zy0mAKUrM73WZjLFByJlWP+7RxIocQGf7j3yQtfaaT3HDWsxAYy26WG6+ECimEaznV0TJnkTfKb3yInSC696Tu9X0b0HMApTfCBxDLlQt04SJlEBn+k98sRrc44G++ZlrMUEcCmm+EDCGMYqK8PWS4Ika4LP9B454WdzDtN7AONhig8kzjR5p65VEiQxAb88vTcWCZADTO8B1IIpPpAwBePBJE3xkzPBvzCpaL3G0SBAxjG9B1Arv1N8PcwPIBKJmuInJ+AbxiYBckBXY7pheg/ADz9T/N1//nMBEJEETfETEfDN1x9vZnqPPNCJWu+JU66PKS5YwPQegCc/U/z2nc/ZF+oBiES9XJy8VBIgGRN8pvfICa+992rTQ18VAPDDa4rfP/C2bN/l/qohgMAYYkoitkHGHvDNs3uKTO+RB9qF3f2k+8vlzXTvAVRAJ/iNc+a6Pqbr0IsCIDLFcraNVwIm+EzvkQ9dz77k+Rim9wAqpYMBN70nTrMyE4iOYf3/6xKzWAP+8NW+RQFyYPvO51w/r5M4pvcAKrVq+V1SP3Wq62NYmQlEKvYpfrwTfC62Qk4cPPSS52pMrykcAIxHw33rmrWuj9EJPodtgchoFz/Ww7axBfzyxVaFRBxEAMLW4XG4Vif3OoUDgGosXXKb52M4bAtEyDBWxbkyM74Jvn2xFZB9erj2oEf/XldjAkC1GufO9XXxFYDIxHrxVXwBn9WYyInSC95/qHK4FkCt1q31rukQ8oEIFYwHJSaxBHwutkKeeN1cy+FaAEHQ30u8Dtse9LHNC0Bg6uM6bBvPBJ/uPXJC6zleN9dyuBZAEDTcNy9z//3Ez2V7AAIT28rMyAM+qzGRJ17Te/0DmcO1AIKy9Db3w7Z6sy01HSBSRfP1JxolYtFP8FmNiRzpetb9BsmmJUsEAIJiV/5muFf+qOkAkTLEHGqSiEUf8A1jkQA5oNUcr933TO8BBM2r9kdNB4hYwXgw6pWZkQZ8DtciT3bv/7nr5/VgrddaOwColNfggJoOELl6+dfJzRKhaCf4HK5FjnjVc9h9DyAMfoYH1HSASBkyST4jEYos4HO4FnlCPQdAnLwGCNR0gMgVo1yZGd0En8O1yJHDHi9/U88BECZqOkDiGGLKUolIdAGfw7XIkS6Pl7+p5wAIkw4RvLbpHH6BgA9EyjBWRXXYNpKAz+Fa5ImfyRj1HABh81rDywQfiFy9XJgUycrMaCb4HK5FjnjVc/RyK+o5AMLmdemVBvz+gbcEQGQMKxPfIxEIPeBzuBZ5c4DtOQASQAcJOlBwc/AQ23SAiBWjqOmEP8G/UNcqQI54TfCblrhP1QAgKJ41nRdeEwCRMuSd8LNx+AHfiO7EMBA3P+sxF1HPARCRxjlzXT9f6nlFAESsYDwoIQs14Jf3fRoNAuSEBnw39maLme6bLQAgKEs9XjHUgYTXUAJA4OrD3okf7gTfNJsFyJGuQ6zHBILUd/q0LP7M7TLt2gYx/s00uWPlCvtjWRLmv6OvdZlHmOIDEdOd+KEetg0t4NsHCAyDeg5y5ZjHBH8p/XvANw2584s3SanniPQPDNgf6zr0jP2x3hPHJQvc/h2DCvn08IEEMoymMA/bhjfBt/d8GpEs8weSoO/0Wc+Xur36sADe1bpxw0joHU0/phPvtId8e3K/9PYJ/x1b7r9PgjBvLj18IIFC3YkfXsBn9z1y5tgJ92lbo/WHLP17wL+D1iR7Ik7I371/n6SRfv/vuMe9ihPUExivezd0MME+fCByoe7EDyXgs/seeeR1K2TjnDkCwD+vHe4akputKffmrVslTewnJ9bkvvf4cc/HBcFPD599+EAsQtuJH84E/8KkogA50/uye/+e22uByvittLU9+m27zhJUIA6T33CvvLrzlSgudD/g3/tytg4uA6nxr5ObJQThBHzqOcghrwn+PPr3QEU6fvBDzym+o3P/vkAPpoahknCv/97btnxLgsI+fCCRDJkkn5EQBB7wqecgj7zCvf5h3TiXgA9UQqsl3T992nfI13A/e/68RFZ2nG05fsK90ic3QZ7Z8drg1XviND18IB5F8zd2dg5U8BP8C5NDOxEMJFXfmbOun2d7DlAd/bVztPR8RWFXKzsa9LtcDulGaff+/RW9urDp4YelKeCVuvrfz+uJUukF90EFgFAYUqhrloAFH/ANoZ6D3Dl23GODDgdsgarZk/yDT1cU8jVM64VR2s2Pq7ajlZz1GzZI8/1f9H0+QMN920NflTAs8jgHdLiHffhALArGTRKwQAP+cD2nUYCc8Tpgu2ghB2yBWjghv9JXw7Sbr9P8qIO+889t3/mY+BVmuFeLPW7S7vW4qA9AaAKv6QQ7waeeg5zy+oPRa0UdAG8a8o8eft4OwpVyArfuzu96JrzqTunIEfufUelWn7DDvfKa4OtZInr4QCwCr+kYEiDz7N6jwgQfOdM/8LZM+/3Vro8xf3tOAARHA/vmR7dWPZXXJwu6unbVsuVSrPEVNv0+aM9ep/XVrOqMItw7pl3b4Pp97O7aaP13uU4ARK7bmL7iZglIYAHfrucMTj4pQM7o1Gtx05YJP6/bc/SQIIBgabDWSXmp54jUwt5yNWeuFWwX2FNut61XGo71n6vbcHpfPiEHrVcD+s5U9yTDXoX5yCPSvOwuiYq+uuD236vtoTtl01fuFACRM2XwwrXGB1r6JAB1EhSt5wT6egCQDsc86zkzBEDwnDWa7Tses6f51V50pd9OQ285+L67YlMDeP2UdzfP9J8fCPR22QOP7418fa5enuUW8HVgsekrAiB6Tk2nTQIQXAef7TnIqb7Tb7h+nhWZ8KITYZ2san3C+DfT7O0vSb6wKWla195rv0q2avlyCZI9rbem885bUOF+3dq19vc3jrsx5nn8MzloC8QowG06gQR8tucgz7w26AR5WQ2yx7kASaeqToDU/e1Jv5U1afTXWecPflTxzvwo2VP7PXulfcu3fF/eFTQdOLj9s/VMkdfFfQBCE9g2nWAm+BcmFQXIKf0D0c0sAj5c6LR+vMmwfkz75aiMTsVPHj0W+E2wtdBArQdp9clH0BdYVfN98XpV8RhTfCA+RjAbKYMJ+EaBeg5yy+sWWyb4mIhuguk9cXzCz7t9Du6al99lB33t6Add3ans+7HcDva6JSeuqf1YXhfvcaMtEBtDJslnJAA1H4tlew7yjBWZqJbdu196u2cNh58/wdD/zp1P7rPXWYZdfdIgrz371jX3JibUj6Z1MD3zMZH6qVfIub/fJQBiYUrdhd81prX0Sw1qn+BTz0GOMb1Htdp87HDXjScIhv5a1Cm6TvX1sqy2hx629+AHxQn1+orBuX/oS9TEfiyvio4OLjhsC8TowqSaazq1r8ksGEut5xpALnn177nBFuPR205379/n+bhtW74lCJ4GXH3bJOWzDlqFOnb8uDXZ7hn5utvGHP11reF90cIF5f35Cxem6te608N3q4Ad7nnVeswsARA5Q4zCPdb7TqlB7QHflKIAOdV32n2CXz91igCj2YdnH/A+PKvdbV4BCp+GXZ3k69u6tfde8jn9sdLd9yOPnTI1sVP5SumlXu7nP9jgBMSo0TzXUV9LTaemgG+e3VO0nmjUC5BTp86478Bngo+xNm/1ruZosN/00FcF8bIvuspIoB/Lax9+17MvSoe4ny8CEJp6GazT9fMlqVJtHXzTbBYgx7wqOlkNB6iObs1p3/mY5+O0H870HmHyWtepv7f1eQwwAITGEFOWSg1qC/iGsUiAHOs//5br5wlpcOjUfvOjWz0fp9WcVcvvEiBMOnzweoXx8JFXBEBMjJgCvvl6h/XSgdEgQI55Tbi45AoOPysxqeYgSsWFC1w/X3rhNQEQF6Ohlltta5jgTy4KAMDT+g0bfO1ep5qDKC3yWBNa6mGCD8Sqhlttqw/4Nb50AGSB5xadKXTw804P1frp3VPNQdS87gHQVyj7B9xriABCU9OttlUFfF3dY70rCgBX9fUE/DzrOvSMtD36bc/HUc1BHPTnnVcP/+ChlwRAbBqHM3fFqpvgl1f3ALnn1cFngp9fvcePS8v93vvuVffBp6nmIBZePfzel9mHD8SovtrMXV3AZz0m4AtrMvNJ+/Z33LPC9TZUx6aH6d0jPnqjrRt6+ECsql6XWV3ANwrzBABwGQ33fjbmqHVr10ob1RzEaKnHPny90ZYePhAjI6KAb56zV/ZQ0QGAMSoJ941z50r7lm8JECd99cjrlcbSC68KgLgYDdX08Cuf4F+YVBQA0nfGfYMOtYt80c79/OJNvsK9/tw48PheAZLAa13m4R724QOxujCp4nWZ1VR0igIAGLF7/357cu+nc6/hnkO1SJLFCzwO2p44JQBiY1j/v0kqVHnAN4xFAgCw6Z775vu/6CvcaxVCJ/eEeyTJvLleB21fpYcPxMkwwp3gm693NGoXSAAg5zTQt9x3n68990rDvU7uGz3CFBA1vfDKq4evh20BxKbe/I19Bta3Cif4kzhcCyD3nL5955P7fD2ecI+k81qXeZiDtkC8jMkVTfErC/gFo6pVPQCQFdt37PC9KUcR7pEGRY8evtZ0AMTGkIL5/63kG1QW8E3WYwKO+ilXun7eTycb6aFT+8WfuV1aN/6p7x9bwj3SYtFC9006HLQFYlZhD993wKd/D1yqfuoVrp8n4GeD/jiu37DBruSUeo74/nZ6kPZo6XnCPVLBq6LTP/A2U3wgXhX18CuY4NO/B5AfGux1Q87s+fOkfedjFX1bDfWswkSa6KtNRY99+MeY4gPxqqCH7z/g078HkAOjg71uyKn0lZh1a9fak3vCPdKmcc4c189zoy0Qq4p6+P4DPv174DJeNZ2+M6yWS4vSkSNyx8oVVQd7nYBue+QRad/yLQHSqOjRw6eiA8TM8H/ZrK+Ab57Tzo/RIAAuUT/lCkEwdCuNHmKddm2DGP9mmh22d+/3t4ayWhrqWzdusP+Zuhmn69AzVZ2d0EqOTu1b19wrQFot8qjoaA+/78wbAiAuRoPfHn6dnwfJRfr3QDX6+62wOEPgQcO9HmIdHa41bOtb8/332d3gpiVLZN6cuXaY9rqUZzz699ZNOMdOHLf+voek13ofxEHoTQ8/LG0PfVWAtNNfV3rYVn9tTOTgoRdl3ZpbBEBMJk0qWn/t9HqYv4A/ZBStlwUAjNEwc7rrRKv/PJt0/NApulvY1u01ozfYNMyYaXfc9W2qFUqmTZly2bfpO3PGfq+hXqtSQW810icdHT/4IV17ZIruw3cL+NxoC8TKSuPGPD8P9BfwDX9/MyBvpnpUdE7pZUju98dAdCr4TEWP18Bun2/okchpoG976GFZtfwuAbJmnsda11LPKwIgRoaxyM/D/B6yLQqAy0ybSgc/CNVUbqKm30et42jXnnCPrGpacpvr5/UVS3r4QKwazXMd9V4P8gz45tk9RQEwroYZ010/r91yePO6ZCdOTrA/efSY3bVPw5MRoFr681srcG4OH2GKD8RqsM7zbKz3BN80OGALTIA1mcHQLnvSgrN27Dut79e5f+gj2CNXigvde4W9L/P7GhCri0YAAb9g+ur6AHnk1cEP+mBnVmmvXasvXvWA0L8f1uTSruEcfl66f/o0VRzkkte6zK5DLwqA2Pi68Mr7kC0XXAET0i06bpxNLvCmIf/Anr12rUk35uzev/+SzTlh0Un9Imtiqe+LHsEGOPPrX8uZf/z1JR+bctVVMudjH5Ws8Pp1oB38/oG3rFe1rhQAMfBx4ZXr8ku7xD84+ZwAGFffmbMy+/r1E35eax1a8UB17N31J47L4SO6JrOn5t31OqHXPfq6ClC3hWj3n+oN3LzwP16U5/6mZL8//evfyPk335zwsXM++hH5hBX0P9d0u9z4B5+UNNPL39x+rR14vFWabk33vyOQYqbUXfhdY1pL/0QPcA/49gFbo1sATMiYvsL18xrwCZHB0dDh7LXXaf+pCQ4y639z3ZHv7Mv3OjgIOM6ff1N27d0nu/bscw30bmZ88INWyL9BvvzFNTLjQx+UtGm5/4vSab2KNpHWNbfItm+6/94HIDSmGMYdxtV3H5zoAe4VnSHrJQC/izSBnGqYcbXnZVcE/ODYt21OHd66wx0DCFAQwd6hVZ4/P6hvT8sXVtwlq1felaqgX95sNXHAZx8+ELNBc7bbp93je8HggC3gwauHqjepAkg2reD84WeXyXd/tLPmcD/Wj60nDXe2rJbn/iY9L4h7HbTVG221hw8gFob1P9eM7jGfNxsEgKvGOe7Vj1PswgcSTUO9BvAzv/6NhEUn+s3r/rP9z0oDPavi9cqjhnwAMSmY81w/PdEnyrdkGQ0CwJXXZVd6MBRAMn1963cjDd36z1q3cZOkgdcU/+CzLwmAuBgNbjfaTjzB93FLFgCRWTOudv1832lWZQJJpOFe+/ZR015+GkL+4gUeF16dOCUAYnTxPRPWdCYO+EPeOzYB6EvZs1w/zwQfSB6dpMcR7h0a8v/s29+VJNNVsm404NPDB2LkctB24oA/SVy7PQDKvCo6us6RG22B5NDDrknowuvhWw36SaUXXrn18PsH3qaHD8TH9UbbiQO+aTQIAE/1U6+wV2W6YYoPJIPeQvtnW5MzOf+6NcUfezNukpTXZU7sGDUdID4uN9q6bdGhgw/4NG+Oe03nGKsygUTQyX2Y23IqNfDmm4nerFP06OF3cdAWiNHEB23HDfjlG2wB+DV/Dj18IOl0Up7ESox+n3QPfxItWui1D58JPhCrC+9pGO/D40/wDXPCtTsALtfoEfBLPT0CIF5JnpQn9fvmVdEp9/AJ+UB8Lo7buBk/4A8ZRQHg27y57pdd9Z0+zUFbIEZahUnygdYX/sdLcv58sDfoBkEP2RY99uEf7nlVAMTCsP4/7lKcCSb4Bht0gAroJh09bOuGmg4Qn+f+piRJ1/NiMvvsjXPmuH6+9AIBH4jNBEtx6iZ4OBUdoEKLbrzO9WZHPWjrNQkDEI7nflaSIE2ZcpXM+ehHrbePyCc+9lHr6++TOdZ7NfV9V9mfd5z59a9lwJrOn7deRTjzj7+Rl1/7pZz45d9Zb78cmdrP+NAH7b9XEhUXLpT2nTsm/HyJCT4Qn4I57lDeGPsB+zTu4ORzAqAimx99Stq+89SEn29askQO7HlCAETvIzcuqqkC4wT6W24uyq1/WJQZH/ygBOGEFfY1+Ovfe/STgiTReuG0axtcH3Pyb9s91wUDCIUpdRd+15jW0j/6g5dP8AfrWI8JVGHRgutEvjPx5zloC8RDJ+bVhvsb/+CT8rmlt8utNxdDCeDO1D/JtIevh23daoYHD70o69bcIgBiUN6k0zv6Q5cHfN2gYxoCoDJem3R0CtZ7/Lg0elz/DiBYesC2EhrkV6+4yw72Wp1BeR++W8DnRlsgTvYmHY+Af9FodL3+CsC49JCthny3lXGHe44Q8FNKJ8DamdYOtXaqR5ty1VXWJPYjia5Z5Jn+mPn15S+uscM9P46Xmufx+1ap5xUBEItxN+lcHvAnyTwxBUAVijde5xrw2aSTLnr5kG5fefZn3b5vP3UOXX6u6Xa73oF00B+r7d9sY2I/Aa8FAX1n3rDf6OEDsZg69gOXB/wJ1u0A8DZvjvs+/K5Dh6RDkHQa6H+8Z5+9m7xS5e0of2fvXNeDmDoR1rCP+LhVdHRS/5V718gXVt4lmFjDzJlWeJ9phfiJqziHj7wiDctvEgARM6Q49kPjlXE4ZAtUqWmJ+8RWe/huf0AiXjqxv7PlC9Ly4H+uKtyPpVWedV/bJH/wR//J/nsjHlOvGr9uo9P6v/mv+wn3PhUXLnD9fO/L/N4GxMO4bL39JQHf/E1HgwComvbwvV6iPnzkiCB5vr71u1a4Xx1IsB9Lg77+vf/s298VRG+8Pr1WcjTcU8nxb5FHTafrEE9igZjUj83wl07w6+oaBEBNirou00Wph4CfJGf+8dfyH/5kmezas0/C9uO9++xpvv4zER09AD2absd5qmMXB2kr5KeH3z/wlgCIweT3XHLQ9tKAbxrUc4Aa6Y22btiHnxwatLWSo535yP6Zw9N8Qn509CzE9i2b7bMQeiZCv4zKaQ9fd+K7Kb3ArbZALIYuThv91TEdfLNBANSkuNA94PedPm138REvJ9z73Y4T6D+bkB85ndpv/+ZmO+Cjenojt5vDPa8JgMhdtirz0oBfEPebegB4apgx3bOHf/DQM4J4xRXuHU7Ir/aGVSAOeqOtG/bhA7G55OW1sRWdBgFQM68evt5oi/jogdo4w71DQ/6fbeXgLdLD66Ct3mhLDx+IgXFpzZ6KDhACvdHWTekFevhx0XWVURyo9Uv35bNCE2mhN3F79fA15AOIXMPor4wEfPNcR/14ezQBVG6Rjwk+Pfx4rNu4SZJm3cY2qjpIDa+azsFng181C8BTfTnLl707wb9wafIHUD2d4OtOfDesy4zen3c9nYhqzlha1dm1NzmvKgBuvA7a9p44JQBicOE9Dc4X3w34Rh3TeyBAXusyufAqet/90Q5Jqh8nqDYEuJk3132CrwGfHj4Qg1HLct4N+OzABwK12Kumc+KEIDrac0/i9N4x8OabdPGRClrRcevh9w+8TQ8fiMOgOdv54qiAbzLBBwI0z+Ogbe8JevhR0npOVPSGVL1cyXnz64X/QXcZyafh3quHf4yaDhA1QwrmSPCoG/nwJJknpgAIiK7K1B6+TrPGo+FeQ77X9e8IRtDT8U987KMy52MfkU989KMy40MfsL78UZn6vqvscD8R7drr5VYnXvs7+ZW+/+XfjXy/Znzog/ZlTFmi/74vv/pLufEPPun63wXp0zhnjus5oq5nX5J1a24RAJEaeWnt3YBvskEHCJoeti31THx1u/bwCfjhe/m1X9Zcz9GAuuwzt8v//u9ukAWfrC6wOhN9DbyjnbC+fzOtj6c1BOv3X1990CctpzXUj/nvrTfIfq4pW09e8m7pbbdJ+86Jz7Rw0BaIgWE0OF+sG/VR64OM8IEgFW+8zjXgl3p6JHlLG7PndJXh3gn1t/xh8bJQHiSd/qeZHhDWff4T0Uk+ssWrolPu4Z/yvBMEQJDevc+qMN4HAQTDcx/+CW60jYJOlCuhwf7LX1wjLz73/5NvfPXLoYb7LPiExxOUExX+90fy+enhH3YZbgAIg9HgfMkO+KMX4wMIjtf0Snv47MMP3/k3/V0iNTrY63t64/7o+QE3L7/2d4LsKS5Y4Pp5NukA0XMyfXmCzyVXQCj0kG3RY4p/7DhT/LAN+LgldvWKuwj2VbrxD25w/bxWdLipN3uKC93PD3U9y9pXIHL/IqMCPpdcAaFp/IT7FJ8Jfrx0+vxUxy67ikOwr87Uq67y/G934pfUdLJmkceCAO3h9515QwBEqK6uQd+VA75ZaBAAofCa4OtBW8RDu/V/81/307EPgG4WckNNJ3u0h98wY6brYw4feUUARMgsn6kdDvhDDQIgFF4HbbWH33eGrmqYxuuIaxVHJ/dM7YPxv3vUdJ79Wbcge5qWLHH9fOmF1wRAhIYKoyo6AEKjPXyvw7YHn3lGEJ5PfOwjl3xdw72+IThzxvw3HosJfjbNm+u+SafUwwQfiNDIbbbDe/B1nG8IgHDoPny3i19YlxmuW29eLNu3bLZvjdU6TtZujE0Cr1WZA2++OfLfH9nhdVGfdvD7B96yBh1XCoBI2LfZlif4hQI3UQAhmjfHvadKDz98GurtG1UJ96HQg7Ze23T0tltkS8PMmZ49/IOH+HEHImMa0/QdFR0gAk1L3KeWfadP08NH6nlN53WCj+wpLvTYh/8yv7cBkSnI6IqO0WBFfgEQDu3hN8y42nVlXMv990n9lKl22NeDt/3nB+z3Y+m0TLdXOG+Nc+bILOtjOklrnDvX/hgQBz8TfN2Hz8HmbCnfaLt/ws/TwweiZNqHbO3ivXl2zznri+zCB0LU8sBO6Xzy5xI2/cNWg77eMql7qjX4A1H5yI2LXC+1+j8e/rJ8YeVdguzQocTs+fNcH3Pu73fSwweicc6YvuJ3hys6hHsgDHq4bPvO52Rx0xbpiqiHqgd2O/fvk2brFQH9Q1ff9NUB/UMYCJvXPnzWZWaPDhG8XjksvfCqAIhEeU2m+ZuOBgEQqFLPq3aon/b7a6T1a3vtr/eff1vioMFeAz8df0ThlpuLrp93ajrIFq9bbQ/3sA8fiIpmew7ZAgFxpvWzr2+1w72G+qTQCZvXOjsgCLf8YdHzMX9+8GlBtixe4HHQ1mVNMIDgFaSurkEA1KTzyedl/uKN9rTe7SBtXIoef/gCQfGzLpOaTvZ4TfDtVzGtIQiACFjZngk+UAP9Q0uDfcsDuxIZ7B2rlnOoEdG55ebFrp+nppM9fjZ49Z6gJghEpSBmoUEAVEQnUeutab1WcZL+0jP1HETtc023e67C3LV3nyBbyusyJ3aYg7ZANEyzoU4AVESn9rryMoiJvU68dK+9Tr90n/1U3Ws/PAnTnfhjJ2LOfnxnI86x48fl5JnT1vsT9vac8fbmU89B1LSmM+ejH3G9ufbHe/bJl7+4RpAdTUuWWL8/Hpnw8/p756avCIAI1Ik51CCGIQC86SFa7dlXq3wx1Vz7D8JFCxd6TrzG+/bOkwI1djKvwV+DftehZ+RwT4/9deo5iIOG9ztbVk/4+YE337RvtvW6/RbpMW+u++9nHLQFImGIaTQY5j/taZOCsUkAuNJKTrsV8KuhQXzV8uVWsL8t0ptmNexX+iQCCIrXpVd6GPepjh8LskFfQdR7N8Z7JdHR3bXR+v3wOgEQoiFzc8HK+VxyBbjQvr127SsN9xrkNz38sJw8eky6f/q0NFuT9CjDvSLcI06rV7i/eqQVHp3iIxucVyjdHGOKD4TPkKkFMU0CPjCBcrh/pKKd9qODfdtDX7UPuQJ59IWV3vWwP+9iJ36W6FkiN9xoC0RiKmsyARd3rGqvqDeqVZyjpeftYB/1tB5IGj878Z/7WYmVmRmy9LbbXD+fpAsAgSwryCSDFAKMQzv3fv8w0jB/YM9eu4rDxB54l9emHD1sy8rM7PCq6PQPvM1hWyBspjGtYP2Fig4wxuZHn/Ldude1ljq11wO0AC6lW3K8pvi6MpMpfjb46eEfZooPhKtARQe4jE7t277zlK/Hrlu71g73TO2BiXl18ZniZ4vX3RvcaAuEj4APjNJ3+qx9iZUfepC2fcu3BIC7W29eLDM+9AHXxzDFz47iQvebs7ueZXMSEDYr4BsNAsCmk3s/N9RquNeDtGGwL6s6flxKR45c8ubcXguk0Ze/uNb180zxs2PRAveArz38IG4CBzARs6FOANi6Dr0ku5/8uefjtJYTVLjXC2G6nnlGDr/QUw7xZ7xDvPZbtRJk34Zr/UFKPQhpcMvNRZky5SrXKf13f7RTPrf0dmva/0FBejm3bbv9fnb4yCvSsPwmARAOKjrAsPVf2+P5GD1QG0QtR8P84s/cLtOubZCWB+6Tzv37fIV7pbfTdh16Rprvv8++NVLfWjduYMKPRNOVmV/x2Kij1n2Ni9WzoLjQvYdfeuE1ARAeAj5g6Xzyec+XjHVSfuDxvVLTP8cK8hrIF1tTylLPEQmCBvvtOx6z/76791NxQHJ9YcVdnl18brfNBq+aTqnnFQEQHgI+IOW1mF7aHnq46jqMhnCd2LdYU/cwJ+1ef6gCcfPq4iut6iDdih6/F+lARW8KBxCOghbxBcgxP9P75uXLZdVy91V/E9m+Y4fML94U2MR+Ivp9pI+PpNOOvddefJ3i61YdpJf+XqQ9fDcHD70kAMJgNDDBR+75md5vqvJQ7foNG6R145/ah2nDVu0TECBqX/bRxdcpPmsz082rh9/7MueGgLAQ8JFremW6n+l9NZPxlvvuk/adj0kU9OXwIvUcpISf2211beaDHLhNNa8bbenhA+Eh4CPX2nc+5/mYaqb3Gu47n6yuYuBc9e6Edn3Tr+vHJ6JPQoA02f7NzfbaTDfP/azEgdsUW7rkNtfP64229PCBcLAHH7l2uOdV189XM73fvHVr1eFe13AeLT0/4eftS7CG12Qe7umxv67fP+o5SBvddb96xV2eB2rXbWyTv/mL/Z5PBpA8+nuTDibcKoqlF16Vpls/KQCCxQQfuVWywr1XPWfdmnulEroGs+3Rb0u19Abb9Rs3TPj58gVXt0nnD34kJ48ek+6fPi3btjwiQBp9YaX32swzv/61/NnW7wrSyWuz1+Ee9uEDYSDgI7e8pvcapnWi7pdO0zc/ulVq1b7jMd8bd7S+0+TxMjiQVHr5lVZ1vPz5waftN6TP4gUeB21PnBIAwSPgI7f0pWE3TbcukUq0WeE+qB33un0HyAM9cLt6pXfF7Ovf/q6c+cdfC9Jl3lyvg7av0sMHQkDAR26VPCb4S2/zPxnXao6fW2Q3PfywXavxoj17vZ0WyIP//MU1nlUd3arT8uCXBOmirzK6LQhQetgWQLAI+Mglr5eF9Q+kStZO+qnmNC1ZIm0PfdX++/rpzesrAlHszwfi5reqc+KXfyd/9m36+GnjtS7zsMerqQAqR8BHLp067X641usPpNF0eu9VzdE+f8cPfjTy9da193o+gdBwzxQfeeG3qvPjvfu45TZlih49fK9XUwFUjoCPXPKa4DfOmSN++Znedx98+rKXqTt+8EPPl67bd+5gio/c8FPVUbpVh/346bFoofswg4O2QPAI+Milox5/oPjdfX/w0DOe0/uJdunrx1rXrHX9tkzxkSda1enY/l98PfaF//GSIB28XhHtH3ibKT4QMAI+cmng/Nuun5/ncz1mx/79no9xuwl33dp7fU3xgbzQkD/lKu9LrT639HZBOvg503SMKT4QKCvgG30C5Ezf6bOun6+f4h66y3+P0/YE343XTbj6B5+fKb7fvfhAmukazDtbviDn33zT9XEa7vUmXKSHV+2xxEFbIEBmHxN85FK/xwS/vt474PsJ3W7Te4efKf7mrbVfoAUk2YnXfmmH+zO//o3nY7/8xTWCdCl69PCp6ADBIuAjl7Tz6aZhhncHv+vQIdfP60vSfrr8fqb4+mSCw7bIql179lnhfrWvcL96xV1M71NokefWsLel74z7djMA/hHwgSp17dlrX1q1bu3acYO81nP80im+F686EJA2uglHp/Zf3/pdz1qO0mDP9D6ddJDhuQ//yCsCIBgEfKAGOqVv3/ItOXn0mP3WvuWRkcNkS5f4vwnXzyE0evjICifY69Te7zacKVOukqd+sst+j3Ty2off+zI32gJBqdMivvW+QQDURKf4OonXN63TePXqx9Kbbt1CvFaCOgRInzO//rW88H+9JC+/9kt58uDTvqb1Y3Vu/z+p5qSc13ayUg8TfCAYRl+dADlUP/UK1x5+NQH90r9/5d921fK7pHXjBnH7PvWdOe3rfAAQFT0c+9zPSpd8TAO9evnVX8rpX/+mqkA/2vYtm+2bbpFuXq9S0sEHgkPARy7VT/EI+OdrC/jV0H+ehncN8RM5fOSINFhPBICkePm1v5Pv/minhEHrODq5J9xng77Kqb/PTbQwQH9P1lttG+fMEgC1KYhh9guAS/T3x7OxRms6bnqPHxcgSQZqnM5PZM7HPiJ/81/3E+4zxuug7bHjXHgF1GxIBgpy0WT3HnKnYeZ018+7TdHD5NVRjev7BUzkfAgBX1dhPvWTH9O5zyCvC684aAsEwDDPUdFBLjXMuNr186dOx/OHjNd0q/fECQGySqf133j4P1vT+48Kssl7iOF+yzgAf+rEMKjoIHcaZnhM8GMK+F4XY8X1/QImcuYffy210mD/5S+upo6TA55DDCo6QBAG6sSUfjEEyJVZHhP8uKowfg721rrhB0iCGR/8oHyu6Xa7jsNu+/zwHGKcecP6Pe4t6/e4KwVAlUwN+EAONc5139IQZxXGa5NOHBt+gIk4KzG9aKC/8d/dIJ/46Efl1j8s2l9H/vjZFqYhv5GAD9SkToxCn0Z9IE/8VHSYlAPevrDyrsuqNVOuukqmWm9TprzP7tNPfd9VTOkxQnv4bgFfN+mwKhOomimGyUVXyCe96EoP2rpdrNJ74rjnxSxh0JewXadbp7nsCslx682L7TfAr9kzZrh+nguvgNoVxBjqEyCH5nlMiPRSKQBAsPz08AHUwDD6CgLk1OIF17l+vtTTI3Hw2pRTP4XaEID08g74rMoEalWQwcE+AXLIa4Jf6jky4ZXqcaqvJ+ADSK9ZM7zWARPwgZpY2Z4JPnJLD3FpF9/NwUPPSNQa5861u/+6L3q8Q75M8AGkGRUdIHz2Bnzz7F7W6CCXFjdtsSb1r074eQ3a3T99WuKkryLooVt9r29NS24TAEizadc2uL5CevJv2z1vHAcwLtOYvqIwvEXH7Leyfr0AOdN06w2uAV836cS9LlP/2Y1T5woAZIW+EukW8PWyKyHgA9Xo178MV3QK/QLk0KplN7l+Xv8A2r1/nwAAgsNBWyAs5uiAbxLwkUvawS96bNNp37lDAADBaZjpvgt/oP9tAVANo0//Wg74htknQE5pTceNrq3UjToAgGB4LQvoP0/AB2pRDvgXzeTtAgQiojUdr2066zdsEABAMLzONfUPEPCBqpjlof3wBN+gooPc0nDfuvoW18foYdvtOx4TAEDtZrEqEwiHKfZtmcMd/HJfB8irdWtu8XxM26NbE3nxFQAAwGhOwGeCj1zTKf6qZZ92fYyG+5b77xMAQG2meVR02KIDVMV0ztUOV3SG+gTIubaH7vTs4ncdeoaqDgDUaCo3cgPhMEZv0Rkc7BMg5xpmTPfs4iut6mgnHwBQHe9Dtm8JgCqYhVF78N8rVHQAKXfxG2a6356oVZ07Vq6w12cCACrHFh0gJJPf6dN3dsA3prUQ8AEpd/E7vrfG83Ea7hcvvZ2QDwAAEsPJ9IVRH+oTAPbNtn6qOoR8AACQHO9eXFsY74NA3m166E7Pqo7ScD+/eJN9+BYAACA+7w7r3w34Q0OnBIBNqzrdXRs9t+oop5O/eetWAQAAiMWQjFzW827A5zZb4BK6VefA7vW+H9/26Ldl9vx50nucDTsAACBq5jHnS3TwARfax+/4/mrfj3cqO3ohFt18AAAQEVPMd4f17wb8ApddAeNpXnZTRSFfde7fZ0/zNeiXjhwRAACAUE0ye50vjurgX+wTAOPSkK91HT+d/NE06OumHQ37egNu1FN9PR/QuW+f/R4AAGTY8CVXyhj52LmOehmcfE4ATKjvzFlZ3LTFCupvSLUa58yVRQsXSvHGBdI4d640zJwpQdInEQcPPSOlnh7r7Ygd7tu3PCLr1t4rAJAE+vuUDj4m0jDjajn5t+0CwDdT6i78rrMH37jkM2f3WAHfqBcAE9KQv37jE9L17IsSBL3RUUP/PCvsz54xQ2bNmGl/zHkb7wmAhnZ90z8k9a335RNySt8fP259/y5/laC4YKF0//RpAYAkIOADgTtnTF/xu85X6i79nH3QtlEATMjervN4q7TvfE42f+epmq9U16Cuk3Z9C4v+vTX86ysGABA3r7piw8zpAqAifaO/UrjkU0NDxwSAL61rbpGj3Vtk1bJPSxoc5DIuAACyaUguuc/q0oDPLnygIjrN7/z+GvtSLD8338apfecOAQAAGWSYfaO/emnAl0KvAKiY7ss/+VK7vU5Tv5xEThUIAOI23lmh0XR4AsA3U4YMlwl+4SITfKAGuk5Tp/kn/3abXd1J2lR/89atAgBxG2B1LxCsUTvw1aWHbC9c7JW6ggCojVPdUV2HXrI37hx+4dWa1mvWQrfoNC1ZIquW3yUAEDevuzl0iw6ACgwO9o3+6iUB3/hAS595dk8/qzKB4DQtucF+U70nTsvhnlek1POavW6z98QpCYuu2Ny25RHrn32b/WUASAqvgF/ppYJA3mmGH/31ussfordgmQR8IASNc2bab+vW3GJ/vf/8W9J7/LS9avOYFfb7zrxhB3/Vd3r4/ZnLp/76h1/9lCvG/dxozUzsASTQyTNnXD+vv78B8O2yM7SXB/yhi4elUGgQAKGrn3LlyKFcZ8rvlz4pmPb7q10+Xz5Uq/UcAEgSrw7+LPbgA/6NWZGpLi/csyoTSAWd4ntt7Dl2/LgAQNJQ0QGCZF52j9U4J2pZlQmkReMnZrl+nrWYAJKo94T78IFDtoBvpkwqHB37wXEC/jsEfCAlvCb4pZ4eQTrphLPXegWmc98+2bz12wJkRb+PFZn1U68UAD6ZQ5f9orq8gz9Z+mRQAKTAIo+Ar3+Q6oUyDTNmCpJt+47HrKnmCTvU64/Z2BC06q67+HFEJvR6VAd1EQGACtQNXjacv2yCb0xr0TWZfQIg8bSn2jjHvaZz8JlnBMnXuX+/9bbPri6MN+E8fIS6FbJh4LxX/57pPVCB3nJ2v9T4t1oZQ9R0gJQo3ug+xffquiIZGufOcf18LwemkRF9p0+7fl4vCgTg27jLccYP+OOs2wGQTPM8Xs6mh58OjXPmun6+69lDAmSBd8DngC3gm3n5Bh01fsBnkw6QGk1LPun6ef3DVDvdSLalS25z/bz+OLIVCVmgZ03czJtLBx/wyZRCoTTeJyYI+GzSAdJCe/heEy/628nXMHOm9WM51fUxnKdAFnivyKSiA/g2zgYdNX7A1006AFLDa10m/e10aF623PXznU/u97ViEEgq/fnr9XOYig7gnzF9ZWm8j48b8NmkA6TLIo+DtvS302Hpbe41HQ1Guk4TSCs/KzLZogP4NmHjpjDhNxm6eFgApEJxoXvA1/42k9/kKy5Y6FnTad+5gx/LBNu+Y4fMnj/P8yBpXh3zqOcQ7oEKuCzFmTjgGxy0BdJCO6vaxXfDAc10aF2z1vXzTPGTSX9cWu67T1o3/qkd7hcvvZ0nYuPweuLjda8HgBGm9b8Jh/ETB/zCUJ8ASI2mW29w/TwHbdNh3dp7fU3xmRAnR8n6tTW/eJN0Prlv5GP647P50a2CS3lt0Fm04GMCwKdJZhUVnUkXSwIgNbwmX6UX2IefBhru/UzxW+6/TxAv/XFYv2GDPa0f7wlXu/VKC6+2XMrrlUQ26AAVqBusPOBz0BZIl0U+NulQGUgHP1N8DUqEx/g4U/v2ne4/Bm3WFJ9XW8q8DthqzZCKDuCTafaVs/r4Cq7f2Biihw+khP7B6NXD99o/jWTwM8VXrRs3cLYiYl5T+/EeTx+/7LDHz1XCPVAB0zjm9mn3gD9ksEkHSBGvdZlclJQeOsXXy6+83LFyBRPiiHTu32dvyPGa2o+HgC9y1KN/T8AHKmHWEPA5aAukymKvmo7HH7BIDp3id/zgh56PcybEhPzwaLVk8Wdut889VBrU161dK0dLz/t6spZ1xzwqOhywBXwzrQRfcnuAe8DnoC2QKvM8JmBa0WGSmB66F791rXdVx1nLSMgPllPH0a59pVUofYJ2YM9ead/yLc/zFHmgPze9KoJM8IEKuBywVa4Bn4O2QLoUrQm+Ww9fAws9/HTZZgXExjlzPR9HyA+O/jrZvHVr1XUcfWKmU/umJbcJyrwuuGqYeTUbdAC/PA7YKvcJvuJGWyBVvKZg7MNPH50E+6l4OCGfg7fVGR3s2x79dsWvdumkftsjj0j3T5+mkjPGgUOHXD/P9B6ogMcBW+Ud8LnRFkiVosdB21IP+/DTRsOihnw/VQ875H/mdjuowp9ag71ypvata+4VXM6rf+91UR+AEa432Dp8BHyTgA+kiOc+fHr4qaQ1nW1bHvH9eA2qGvSp7EwsiGDvPPliaj8xP/37eUzwAf8meWdz74DvUeIHkCxe+/Dp4adX8/K7fG3WcWhVRys7u/fvE7wriGCvnA05dO3ded5eO/NqKjpABYzpK0tej/EM+MMlfkI+kBJ+boNkH356VRrydXrafP99dpjN+zRfb5/VVzWmXdtQU7B36jhsyPGny6N/71UrBHCJkp8HeU/wlWly0BZIEa8+a9ez7n/gItk05Pvt5Ds03GvI113ueQr6zrReQ32tB5BH13Ea53pvNkKZ1w22xQUEfMA30/Q8YKv8BXzhoC2QJl49fA14fWfoZqeZ1kKquUDJuY1Vg34poxuVNNRv3/FYINN6pU+kNj38MHWcKujPMa//9osI+IBfphQKJT8P9BfwL75TEgCp4dXDV9R00k/DfffBp33tyR9Lg75OtDXsa0c/7VP9saG+deOGmteFOsH+5NFj0vbQV6njVOHgIfffZxrnzGT/PVCJC+/4muAb4pN59omT1l8bBEAqrN+4V9p3PTfh57VHrFUDZINOqWtdjanVn6W3LpHiwoWpCLM6HT7c02MH+SB3/+u/ux6g1ZWXhPraeJ39aF1zi2z75goB4INpnjSuWXmtn4f6D/j/9Hin9bLAKgGQCqWeV2Vx0xbXx5z7hz4CTIYEeZutPgFsWrJEFlnvk9A3t7c/HT9u34iqhzbDWPdKsA+W/njNL97k+pjuro108AG/hqTLeP+KO/w8tE78Kl94RcAHUsKp6fQPvD3hY7SasW4tF/NkhVZ27DpJANP80VNxDbtaAyouWCDzrPf6zwkz9Nt7061weOqM7k8/YU/qwzwzov8+q5YvJ9gHzGs9q67HJNwDvpkySbr8Ptj/BP83HQ1SN/mkAEgNneDrJH8i1HSyS0OyBv3d+/dLWDT0ayDWgNwwY4b95alTpnoe/HVeYdAAf+78eRmwJvH2we+ID3/rz3/t2Ot7BM+rntO87NPS8f01AsAXU0zjeuOau30tvvEd8O2/89k956xvUi8AUqFz//PS8uAu18dQ08k2ncLrND/IjnqaOTUc3YZTzeFk+EM9BwhYBf175XNN5rAh86AASI2mJZ/03KbDLafZ5rxKo295nVRrqHf+O+gTWt2IQ7gPF/UcIGCm4Wt7jqOygG+wDx9IEz+32nrdMolscAKudvS1b56HV23037l9yyP2v3Oen+DEwesyPW6vBSpSUf9e+T9kqy5e6JK6ydsEQGqs+tynXXv4Wt3Q3nPDjMouTEI6aT++8wc/sjfQdB16xu7oZ6W+o09atHqzaMEC+z3Vs3jYh6I9NjmtWuZe3wEwxlBlE/yKOviKHj6QLrpFZ/YNra7bdNoeelg2PfxVQT5pGNOQn8awr1P5RQsX2O+Z0CdD8/33uVZ0tJ5z8qV2AeBThf17VXnAZx8+kDotD+yUzid/PuHnddKp3WTA3jdv75p/Ro4dP5GowO906e11nXPnjmzxQXLozx+9SdgN23OAChlmh3H1ys9X8k0qq+jY/5BJJSvmE/CBFNGXw90Cvv6hrEGOCSjeDdHlnwtO4D92/Lgctd6fOn0mlEumxn4ftDLWaIf4OTJreO8+NbLk0yeGXjY9dKcA8M20wvdhqVDlE/xzHfUyOPmcAEiVab+/2rWmw058VMIJ/vr+1OnT9vu+M2fsz3n1r509+VOnTpFpU6baAf7dffozmcqn2PxFN9k/LybSOGemHO1+RAD4ZsrghWuND7T0VfKNKg749j/p7BMnrb82CIDU2PzoU9L2nadcH8NOfADV8rP7vvP7qzlgC1TmqDF9xfVSocrWZDrMIfbhAymzdMkNno/ZvuMxAYBqtO/c4fmYpbd6/z4EYBTDrGpFfXUB36hsFyeA+Ok+fK+LZfz8AQ0AY2kty+tyKz1cWz/1SgHgm2n973GpQnUBv27QejZh9guAVNn0FffDbc5udACohJ/fN9atuUUAVMjO3JWrKuAb01qscG9wqy2QMjrB19tt3WzfwRQfQGW2e7z6p4drvW7VBnCZUjlzV666Cb4yhR4+kEKtq92naLouMys3mwIIX+f+fZ6bk1qZ3gOVMuWi/FSqVH3Av3iBHj6QQvoyudcUf/PWrQIAfmx+1P33C725ls05QBUKRkmqVHXAL+/jNPoEQKpouPfaZMEUH4Affqb3dO+BKphmn3HN3VXX4auf4Nv/cNZlAmnU7GOatnv/fgEAN17Te9XEakygcgUpSQ1qC/isywRSSQ/beq3M9DOZA5Bffn6P0NWYDTOmC4CKVL0e01FbwGddJpBaXiszlZ/pHIB88rNxa9ND3r/PALhMvzF9ZUlqUFPAZ10mkF5M8QFUS39v6D1x3PUxTO+BKg3JYalRbRN8ZRq7BUAqMcUHUA0/vy8wvQeqYsqk2ivwtQf8ye/QwwdSyu8Un406ABx074GQXbgQ/wR/+IatkgBIJV9TfPbiAxjG9B4IVam8ir42tU/wFbfaAqnlZ4rPXnwAiuk9ECpTDAmk+h5MwOdWWyDVmOID8KLBnuk9ELIA6jkqkIA//FJCSQCkkt8p/m5regcgn/TyO6b3QKh6g6jnqGAm+DYzkGccAOLhZ4rfunGD9A8MCIB80WDf9ui3PR/H9B6omikXa7vcarTgAv7gYKcASC0/U3wN99t3PCYA8qXNZzWH6T1QAzO4yrshATLP7u223hUFQCr1nTkrs69f7/m4k0ePScPMmQIg+/Rgbcv997k+pmHm1dLdtZGAD1TvqDF9xfUSkAArOoqaDpBm+odzm4+qjtcf9gCyw8/BWv19g3APVC3Qeo4KNuBT0wFSb92aW6R+6hWuj+HALZAPuj3L62CtTu9XLbtJANTADHYjZaAVHUVNB0i/9p3Pyfqv7XV9TP3UqXZVR98DyB4N9rPnz/N83NHuLdI4Z5YAqFqg9RwVcEVHUdMB0q7VmuL7OXDr56V7AOm0eOntno/RtZiEe6AmgddzVPABn5oOkAl+1ma273iMG26BDPJbzWEtJhAAM/gLYwMP+Fx6BWSDTvBbV9/i+Tg9cMtufCA7/O6852AtEIhSUJdbjRZCRUf0xYaDAiD17L3W1pTOjd/r6wGkg59qDgdrgUCYYshuCUE4AX/yhU4BkHq6Tafje2s8H6dVna5DzwiAdPNTzVG68x5AAC5cCOXsaigB35jW0i/UdIBM0KpO062f9HycVnX8BAMAyeS3msONtUBgQqnnqHAm+Mo0QnnJAUD0Or6/2nM3vvbwuQALSCf99eu3muPnMjwAnkKr56jwAv7kd7qs73u/AEg9v1Ud3aizfcdjAiBdqOYAkeuXSRdCO7MaWsC3azqmMMUHMqJpyQ2yatmnPR/XunGD9J44LgDSoXP/Pmnf6f3EnGoOECDD7BqutIfzt5cQmWf3FK1/RLcAyIT+gbdl/s0brEnfG66Pa5g5U46WnueWWyDhdGo/v3iT56pbreacfKldAATCtP5/szF9ZUlCEl5Fx1L+jlPTAbLCb1VHQ8MdK1cIgORyevde4V5/3VPNAQJkmn1hhnsVasAftl0AZIbfC7C0j6+9XgDJ5Ld33/7NFVRzgGCFfl9U+AG/bpDX9ICM2bZlhTTOmeX5OF25x358IHk03Pvp3a9bcwsXWgHBMuXiYOjD71A7+A7z7F7t4RcFQGb0nTkr8xdvtHv5brSHr3187eUDiF/pyBHfKzGPdm+R+ilXCoDAdBvTV9wsIYuiosNOfCCD9CV7P318vz1fAOHTSk7LA973VTi9e8I9EKhQd9+PFk3AZyc+kEm6OtNPH59Dt0D89NehPtn207vf9BVWYgKB08O1V6/ITsBnJz6QXdrH14O3XvTQ7fqNGwRAPO64Z4WvcK+9+9Y13k/cAVSoICWJSDQTfGVIlwDIpAO719t9XS/tOx5jsw4Qg/UbNkjvce8L6BrnzrK35gAInCkXBr8hEYks4A/v+ywJgMzRvu6B3V+y33vRzTq79+8TANHwuzFHn6Qf2N0qAEJRMj7Q0icRiW6Cr8zw934CiEfjnJmyzefkr/n++1ifCURAw70+qfbiHKqldw+EIrLDtY5oA/7kC50ctgWyq3nZTfbhPD9arJDfe8K7MgCgOrv37/cV7hWHaoEQRXi41hFpwLcP23KzLZBpbQ/dKauWfdrzcfb6zM/42+gBoDL6Clnz/V/09dhN1q9ZDtUCISpEX1GPdoKvzEEO2wIZ1/n9Nb5uunV25BPygeDoYVp9hcwP3ZjT5vNVNwBVifRwrSOSm2zH4mZbIPv0htv5N2+wwvsbno/VW267Dz7NbbdAjTTc+71YTtfbau8eQKgiubl2rOgn+DZzswDItJFDez7WZ1ZyAQ+A8VUS7u2NOY+zMQcIWeSHax2xTPCVeXbPOesfXy8AMq3vzFlZ3LSFST4QokrDPRtzgAiY5knjmpXXSgximuDbOGwL5ICGCL878pnkA5Uj3AOJZErBiK2xEl/ArxtsZ2UmkA+6I7+762sVhXxWaALeSkeOEO6BpLpw4bDEJLaAb6/MNOPpJQGInob8A7vX+3qsHfI/Q8gH3Oiee7/hnousgIgZZmeUN9eOFWdFR08AsDITyBHd2tHx/dW+HquhZf6im6wQs08AXGr7jh2+99wT7oHIxbIac7RYA74xfWXJelcSALmht922rvZ/qU7z/ffJ5q1bBUCZ/npo3finvh7rhHs/91IACEwpzum9ineCb2NlJpA3586/VdHj2x79NiEfsKzfsMH+9eAH4R6IhWn9P9bpvYptTeZoXHwF5Mvs61ul74z32syxWtfeK5seetgKLlMFyBOtrN2xcoWUeo74ery95373esI9ELUYV2OOloAJvsUc4rAtkBO9J05VFe5V+47H7MO3rNFEnujP9/nFmyoK90zugVjEuhpztGQE/MkXu1iZCeTD4Z5XpRa6WYdd+cgLXYOp4d7vz3dWYQIxMs0+4+oViRhaJyLg2yszufgKyIXuGgO+0rAze/482W5N9IGs0k05ftdgKsI9EKvETO9VMib4iouvgFw4/IJ7wK+kX9+6cQOHb5E5Guj1MK3fTTlKV9Ae7d5CuAfiYk3v47zYaqzEBHym+ED2lazpff/A266POVp6XpqW3CZ+6UYR3ZdPZQdZ4Nzk3L7T/6tTq5Z92p7c10+5UgDEpBD/aszRkjPBV0zxgUzz6t8XFyyUhpkz5cCevbLp4YfFL6eX33XoGQHSSm+m1b5973H/NzhveuhO6fz+GgEQq9gvthorUQHfnuKbwkYdIKNKHvWcxjlzRr7c9tBXKwr5OvnUNYJUdpA2TiVHb6b127fXHfcdVrBv+8qdAiBmhtmZpOm9SsQe/NHM33Q0SN3kkwIgU7SaM+33V7s+pvunT9tT/NF0NWDL/fdVVMHRVwG6Dz5tvweSTKf1d9yzosKf3+y4BxLElMEL1yYt4CeromOx/wOxFx/IHN1/72VsuHc+VmlYZ8sO0kC35FSyAlM1zp3FjnsgSRI4vVeJC/g2w+gUAJly8NBLrp8fL9w7NNzr4dtVy5dLJXTLDhdjIWnsg7TWz8tKtuSodWtuscL9BjblAMmRuO69I5EB35i+smS9KwmAzPDq3zctWeL6eV2f2fmDH1XUy7f/uT3li4KY5iMJnKm931tplfbtt31zhbRbb2zKARIkodN7lbgOvsM8u6doffe6BUDq9Z0+K7NvWO/6GJ3QN86dK37o1hw9UFvpZF5fJej4wQ/p5iNy+nNVz5JUEuwVfXsgsRLZvXcks6IjTPGBLDl2wj2I63Teb7hXjXPm2r38Sis7Gq60m8+mHURFt+Lozzf9eVdpuNf99np5FeEeSKAET+9VYgN+mZmYK38BVO/Asy+6fr64YIFUSqfwWtnZtuURqZRejqWBi735CFPpSLkepj/fKuFUcnS/PZUcIJES2713JDrgM8UHssHrgqtKbq4dq3XtvXLy6LGKazfO3vxKV3ACXpxDtHr5WqU/t3RLjk7tW9fcIgASKuHTe5XwCb5iig+kmfbv+8684fqYRS4bdPzQcK8hv9IDuKpz/z5qOwiEU8ep9BCtY9NX7pSjP9vClhwg2RI/vVeJD/hM8YF089qeo+E8qEOvevttNdN8+9sO13Z2W4EfqJRux9GfP/rzyO9ttA5nat/2ELfSAomXgum9SsEEXzHFB9Kqy3P/feX9eze1TPO1TtF8/30EffimPXv9+aI77SsN9sqZ2nOQFkiFVEzvVWLXZI5lvv54pxiFVQIgVab9/mor+Lw94ecP7NlbUwffjd2FXlr9RVf6ZKHj+z+U4sLaKkTIHg32mx/dWlUVRxUXXGcfpCXYAylimB3G1Ss/LymQkgm+5eLFNgGQKr0nTrmGe6UrL8Myepqvqzgr5TxB0AOTGugA/XngHKCtJtw7G3K6uzYS7oF0Sc30XqUm4Nt9J3NotwBIDa/tObr7PopLp7SbrxdpVbo336FBzgn6VHfyqdZgr5qXfVpO/u02NuQAaZSS7r0jPRN8ZU/xzX4BkApdz3r0728Mtn/vxtmbr5Wgap9UaLCjo58f2qnfvuMx+8e7lmCvdRyd2Hew1x5Iq1RN71VqOvgO8+yeNuu7vUkAJJ4xfYXr57t/+rQVfuLpt+t6TO1Q17IDX58otK65V5YuWRLJKxGIRjnY75D2nY9VdXDWoXUcPUTLxB5IuRR17x3pC/jnOuplsO6k9V2vFwCJVep5VRY3bXF9zLl/6KuqGx8UDffbrRDXboW5WjUvv0vWrVlr146QTrUenHVosF+3+hZpXfvHTOyBtDPNk3Jx8OY01XNUuio6FmNai1Z0tguARDvouR5zYazhXunUfduWb9kHcavt5zv0FQG94Gj+opvs+k4tk19EZ+RyKuvHrZYajmOdNa3Xnr3utCfcAxlgyuNpC/cqdRN8xRQfSD6d3pdcDtm2b3lE1q29V5JEJ/p6UdHu/fslCDrVX7VsOWs2Eyioab1DD9BuskI9t9ACGWJN741rVl4rKZTKgK/M1x9vFqPQIQASR1dj6v57N3H2771o0F+/cYN0HXpGgqCvFOi/KxWeeGmo73r2UKCvsBDsgcwyrZTcYly9IpUbHFMb8JV5du9R612jAEgUrec0rdo24ee1mqP9+yTTAKiVm1oO4Y5Hw/7SJbdZwXA5YT8CYYR6RbAHMi7F03uV8oC/p2j9K3QLgERpfmCn7H7y5xN+vmnJEjmw5wlJOnv//Wdul7A4k31qPMHREK+h/qAV6vUVmCBDPYdngdxI9fRepTrgK2uKrwG/KAASY/7ijfYtthPp/MEPZdXyuyQN2nc8Ztd1wqavamjY1yc/i6z3rN30TwP9sRPHrUB/KLBO/WgEeyBvjAPG9LvvlBRLf8B//YlGMcyjAiAR+k6fldk3rHd9jN4qm6Z6ik7xwwiObpzpfnHBAgL/GL3Hj8th68ej1NNj/7iEtbFIL6jSPfb6HkBumDJ44do0bs4ZLfUBX5ln97Rb/yrrBEDsOp98Xloe2DXh5zWo6lrKNNEevq5QDLqPXwn979Y4Z64d+OdZ7/UJUtxrRqPgVG5KL/TIMSvY91qT+jBXkOq0ftWym6Tp1hsI9kAepfBSq/HUSRbUDbbJYN0q1mYC8evy3H+/QNJGw3XHD34Yah/fiz650LfRm3008Jcn/eXQr4E/zQd39d9Pw3zvyyfklPVlndT3nYnmSZWG+VWf+7Q03XYDNRwgr/RSq8HBb0gGZGKCr6wpfpv1r7NJAMRq9vWtVih7Y8LPp6l/P1ZUffxa2CHfCftz5sisGTPtJwHOW5x08q5vGtxPWcH95JkzkQf50RrnzJKl1qSebj0A0WqOKV8yrlnRLhmQmYCvzNf3nBTDaBAAsdCDtXrA1o3Wc9LcJ2++/z575WJaafBvsEK//d76cZhqvZ82ZYr99alTptrvx1Z/xvvxGl1XcoK7Gjhf/nKfFd6dx+lb//mBRNzu2zDjaruCoxN7KjgARqR8LeZY2ajoOAxpsf7K2kwgJoddbq5VWh9J+2FRvYHX6YKnkT1BHxj+vvdILjiTekI9gAmYUjA2S4ZkKuAb01eWzLN7S8LaTCAWXc969O9vTF//fiydbh/Yszf2Q7eYmB6U1VCvB2WXLvmkPbUHgAkZZqdx9crU7rwfT7Ym+GrwQovU1R3lwC0QPbfd92pRRi5z0lchug8+bd90m4TaCS7V/n+skFXLbxIA8MGUC9k4WDtaQTJmeG/pdgEQqVLPq1bYfdv1MbrXPSs05OskH8njdsgbAC4xZH4j7Tvvx5O5gG+rG2wX0+wTAJHx6t9ruM/a3nb9d9L1mUgWAj4AX/Rg7ftXtkkGZTLgG9Na+ocP3AKISOkFr4Cf/v79eJqX3yXbtjwiSI7+828JAHjI3MHa0bI5wZfygVvrXUkAhE6rOSWPCX5W+vfjaV17r2x6+GFBMvQePyUA4Mo+WLsiUwdrR8tswLfpgVsx+wVAqLzqOVrNyVL/fjxtD32VkJ8QVHQAeMjkwdrRMh3wOXALRMNreq83q+YBIT85CPkAJpTRg7WjZXuCL3ZVp40Dt0C4vPr3TUuWSF4Q8pOh90SfAMBlMnywdrTMB3wbB26B0PSdPuu9/z7j9ZyxNORz8DZeA/1vCwCMYVrR907JgVwE/PKBW5OqDhACr+m97otvnJuPis5oevCWFZrx6X2ZW4YBjKEHa6+5u1dyIB8TfFU32MaBWyB43v37OZJXukLz6OHnM7f/Pw36zpwVABhhmiezfrB2tNwE/PJufJOqDhAwrw06TUtukzzTA8ZHS8/br2QgOqzKBDCKvfM+6wdrR8vPBN9iXH1Pl7AbHwiMdu+9tpXkrX8/Hg333Qefzs02oSRgiw6AERnfeT+eXAV8G7vxgcB4Ha7VYMvkukz/O2hdp3XtWkE0CPkA8lbNceQu4Nsvz5hmZq8mBqLUdegl188XFywQXGrblm+xRjMih4+8IgByLXfVHEf+JvgW45p72oWqDlCzwx4bdJbmvH8/EV2jqdN8Xt0IF5t0gNwr5a2a48hlwLdR1QFqottz+gfcd40X6d9PSPv42svnv1F42KQD5Jl5zsp6n5ecym3Ap6oD1OaYR/9egyvrId3Zh29/+jSVnZCwSQfILVNM4xt5rOY48jvBF6o6QC26nnXv3+d5/32lqOyEQw/Z9g+8JQByp2Rcs6JdcizXAd9GVQeoitcFV0tvo39fCWdf/qrlywXB6T1BDx/Il3xXcxy5D/hUdYDKeYV7Rbe8clpp6vzBj6TjBz9kmh8QryoZgEzJfTXHwQRfqOoAlTrouR6TcF+L5uV32QdwmebXjgk+kCN6oVXOqzkOAr6Dqg7gW8ljPWbTkiWC2ugEX6f5Wtthml+93hN9AiAHcnqh1UQI+MPsl3MMs0UAuNLVmF432M6bO1cQjEbrv+XJo8fsTTsE/crpBJ+DtkDm5fZCq4kQ8Ecxrr6ny/o5sl0ATOiwR/9ee+RUdIKnm3ao7VRHt+kAyDCt5uT0QquJEPDHqhtss17m6RMA4zrw7Iuuny8uWCAIh1Pb0Yk+T6L8O+zjUDiAlKKaMy4C/hjGtJZ+MYSqDjABr7DUtIT1mGFzLshi244/HLQFMsu0ouydVHMuR8AfhzF9ZYmqDnC5vtNnPesOi5gsR0a37eg0n6DvrtTzigDIoCHzG8Y1d/cKLkPAn4AV8lutd/ykAUbx2p6jIZOgGT2CvjtutAUyyDRPGu9f2SYYFwHfzeCFO1idCbyry3P/Pf37ODlB/8CevXT0x6CmA2SJeU4uDt4smBAB38XwLbfrBYDN61bQpfTvE0HPQWhHX8M+W3fKuNEWyAxTDGM9vXt3BHwPxjX3dNLHB8Tefe/Vv2+cw/77JBm9dSfv9R2vehmAlDDN7azE9EbA94PVmYDn9hy9kIn+dzLpj8vo+k4ep/olVmUC6acrMd8a3CzwRMD3wV6dKQX6+Mi1rmc9+vc30r9PA63vjJ7q56Wrrzcwc+EVkGqm9u6N2S1kMR8I+D7Za5hMk2eNyC2vCejS2+jfp4kz1Xe6+u1bHsl8xerwEdZlAillWv/7Er17/wj4FTCuuafd+glG7wu546feQP8+vTTsr1t7rxw9/HymJ/ulF14TAClkmJ3GNSvaBb4R8Cs1+UIrfXzkzUHP9ZgLpX7qVEH6jZ7sn/uHvpHOfhaewHHhFZBC2rt/c/BLgorUCSqifXzzNx2Lpa7uqPW1egFyoPdl9xWD7L/PJn3Spp39puH1p32nT0vviePSdegZOXb8hP3lNHEuvKqfeqUASIPyvnt695UzBFUxX3+8VYzCNgEyTg8nTvv91a6P0WkvFyvlT//AgB3yjx0/bk3He0aeACRZ5/dWW69I3CQAEq/cu6eaUxUCfg3Ms3usn3TGOgESTqeW/ef/2f5yw4yrK/mmdj2nadXEz2V1yqtVDkA5oV/fa/DvPXHCDv59Z07bH4tb65pbZNs3VwiAhDPNduOalVw2WiUCfo3Ms3uPWu8aBUigvtNnpe07T9khvf/82yMfb172aVl66w3StOSTnn+P5gd2yu4nfz7h55uWLJEDe54QwIsGfCfoa+g/Zb2dOz8gAwPn7a8r57395TOnXf9+DTPevXdh9B0MpZ4jLt/majn5twwEgUQzzZNWuL9WUDU6+LUavHAHfXwkUe/xU7K4acslwd7RaQV2faufcoUV0G+QVctukuKC68b9+xw74R6yqObAL321p3Hq8GHdkI5t6BOE2fPnTfx5evhAsumh2ouDNwtqwgQ/AObZPUXrP2W3AAmhk3sN95Vc7KOTTQ35o8O+/n1m3+D+CunR0vP2LbZAUky7tsG1DkQPH0gs0/r/zcb0lSVBTViTGQD7J6I5RE8MiaG1nEpv7dTH61RfnxjMvr5VWh7YKdt3/ZXrt9FaBOEeSaO1MTe9L7u/KgUgJkPmNwj3wSDgB4RLsJAUOnV368z7+nsMh/32nc+5Po71mEgir539XYdeFAAJo4dq37+yTRAIAn6Q9BIsazgkQIxqDfeVoH+PJFo6vLd/IvoEttJXuACESHv3bw1uFgSGgB8gvQTLPnTLTbeIUeeTz0tU2h7dKq0bN0jpyBEBkkKrY143Kx8+wq22QCIMH6rlMqtgEfADZnygpU8MaREgBhruo5xM6saS7Tsek8VLb7cPNt6xcoXs3r/vklWHQBy8evilF14Tv0o9r8rm7zxln0+Z9m9XizF9hcxfvNF6tSy6J9NARplWFL3Tzk4IFFt0QsJNt4iDHo51C/gf/nCDtD64SX7SsV1eeTXcNpn2oBctXChNty6R4kKqPIhWp/VEs+X++yb8fP3UK+Tc3+8a93O9J07JYSvUdz37kr1udrxVsw7dPtXdtdF61WC6AKgIN9WGiIAfIm66RZR0et/ywC7Xx3z30U757J+ssr/8q1/1yV//t4PyF3/ZGXrYV9rX16nqPCv4E/gRNl2Tqa8quTnavcV6IjrLflJ88NCLVrA/bR/AdQv049GQr38vdusDFRgyN3OoNjwE/JCZZ/fqfvyiACHzM71/8olu+/1YUYd9+8IjK+gT+BGm2Y3zXG/D1fsevCb0frWu+WPZ9s2VAsCXbmP6Ci6zChEBP2TmuY56uVB3VAyjQYCQ+Jnef/ZPmq0Jfod4ccL+X/+3LvnFfy9JFJzAr2s3F1mTft2t73VIEvCyfsOfSvvOHRKVzu+vkVXLPi0AXDiHaundh4qAHwHzNx0NUmeFfDHqBQiBHv7Tg4Bujhw+Oe703o2GfQ35f/GXuyML+w4N/Br0NfTPG/4y4EUPeOtWp96XT8jBQ89EeuBbe/1Hf7aFPj4wEcJ9ZAj4ETFff6JRDPOoAAHTYK8B343f6b2b8+f77ZBfnuwftsN/lEZP+Z3Ar+sQkV8a3nuPH5fSCz1yzHrfe+K43b2Pk3b6tY8P4DKmmMb1xjV3c19QBAj4ETJff7xZjEJtKQsYo/mBnZ6XW1UzvfcyEvZ/cTiS3v54nNA/Tyf9Ny6wAz+T/mwaPZlPSpifCH184DJszIkYAT9i5tk9bdZ/9k0CBKDv9FmZfcN618cEMb334lR5tLuvYT/q6f5oTui3w/6cOSPTfjr96eBM5U+dsd6fOGF/WcN83D7174vyqU8tkldeOWY/sfWiqzP1EC8AYWNODAj4MWB9JoIS1/Teyyuv9No1nigP6noZG/xnzZjJxD8mOnkfHeT7zpyxv6wbb5IylddfM3/0H5eWg731NmVK+QiVVtWW3D7f80ks+/GBYabZblyzcr0gUgT8mLA+E7XyM73XYPLkvm6Jm1Pn0elnUgL/aBr89QmAVn2mTZliT/3tJwRM/qumAd55S2qIH80J9B+/rtF63zQS6MejT2A15HvRCb6GfCDHWIcZEwJ+TFifiVr5md7r3vtPfaooSaITUK3xJDnwj+U8AdCJf8OMGSPTf2V/LEeHfTWcOxN4fRs4PyAnrfA+YH1MA7z9uTPRba6plgZ5rdz4CfTj+UlHu3zjm95DyfYtK2Td6lsEyB3dmPPW4PXG7JZ+QeQI+DGy12dOqusm5KNSfqb3OpHUek4aaMh3us0a/vVJQNrYTwCs4K/vnTd9MqBmjfq4Gv3kIC6j10fql53grnTifu78eTu0O2E+LcF9PBrenUCvr2rplysN9ONZdtdiX09QnRtzgdxgHWbsCPgxY0c+qrH50aek7TtPuT7mu492ymf/ZJWkkVYgNOg7wT+uLT1R0icHjtFPBmoxOrTbXz8/kNjNM0HSAD96Qv/xjzdKGCrp42vIr596pQCZR7hPBAJ+ApR35A91E/Lh1+zrW61p6hsTfj5N03s/nFqPU+nRQJWH0A9v+nP9U/+uaIf4j398XmDTeb/056NO8r00L/u0dHx/jQDZZp4Ts3Azu+7jR8BPCHbkw6/OJ5+Xlgd2uT4mzdN7v0aH/ldePWqF/lOp6POjOhraP/yhBnsq/+EPzZZP/ftFdriPMsxPRLv42sn3Qh8fGWfK0NAdxvvvOSiIHQE/QayQ32qF/G0CuMjb9L5SWu/51T/2jVR7mPanixPknWrNhz88y/5y1KteK+Wnj18/9Qo5+rMtrM5EFulFVuuNa1ZsFyQCAT9huAgLbpjeV29s8HdeAUjjgd4s0MBeDu6z7Il8WoL8RPSJ5JL/NF/Ov+n+80kP23Z3baCPjywxhy+y2ixIDAJ+AhHyMRE/03tdjZnWkBSH0UFfw78GNX0i4Hwc1XEm8fpzcWyI188loVoTNN0CtXrtHZ6Pa13zx7LtmysFyADCfUIR8BOK224xlp/p/edbWuXrX6PlFaTRTwC0519+/+6TAOd9ntjd96vqL3mv4d1ZR5nVAO+H3z7+gd2t0rTkkwKkGOE+wQj4CWa+vrfT+hGiawHb4qYtUup51fUx2r1neh8PDf0a9LWiUf7ywPDXz8n5gQH7iYByHuN8m7iMDuE6ab/k/fDh1SlTpo48Tj+X5+Dul9/VmfTxkXLaud9tXLOiRZBIBPyEI+RDabDXgO/ms3/SLN99lEVMaTU6EI5+ElALna6PDuQE9Gj47eMXF1wn3V0bBUgZwn0KEPBTwDy796j1LpybWpAKzQ/slN1P/tz1MUzvgeTQmo7Wdby0PXSnbPrKnQKkhil/a4X7GwSJVhAkX90FvUWF03451Xf6rGe41+k94R5IDj0P80f/scnzcW2PPuVZvQMSwwr38taFPxQkHgE/BYxpLf2E/Pxq+85Tno9pfZClS0DSaGXOzxPvFusVuv6BtwRItOFwb8xuYbdwChDwU4KQn09+pvef+vdFpvdAAul5Bz/nYnT1bcuDuwRILFOOEu7ThYCfInbIH7xwh5hmnyAXmN4D6aZPwP2sru069JJs3/WcAIljmifl4oU7CffpwiHbFDJ/09Egk+q6xTAaBJml0/vZN7gf0vv4xxvl0NNHBUCyLbtrsfziv5dcH6OrM3Wrjt52CySCHe4HbzY+0NInSBUm+Clk/0K7OLiYSX62eVVz1OebWwVA8mlVR9eWuukfeFvuuGcbfXwkA+E+1Qj4KUXIzzb9g15vrnWjvfvP/glXJABpoL9ed+084Pk47eNv9lHNA0JFuE89An6KEfKzq+vZF+0/6N20PtgmANJD+/i6PtNL+86/8vUKHhAK0/wHwn360cHPALuTXzdZR0NchpURs69vdQ34Og3Ui60ApI/ecvvKq+4L0bSPf/RnW6Rh5nQBIsMqzMxggp8B9rNsVmhmhlZzmN4D2bVrxwF/ffxV7QJEhnCfKQT8jGBPfnZsftS9f6vT+0/9+0UCIJ3013DrOu/1tr0nTsn6r+0RIHSE+8wh4GcIIT/9/Ezv/+g/NnGxFZBy2sX328cv9bwqQGgI95lEBz+jzNf3dlo/uqxYSZnFTVs8/zDX7j0BH0i/8+f7Zcnt8+VXv+pzfRx9fITGlE7jmhUtgsxhgp9R1i/YZusX7m5B4mmg17V4erDWK9x/9k+aCfdARkyZUi+7HvNenal9/JYHdwkQKMJ9pk0SZJYVGrvaHrrDepXGKAoSRYP87j//ubQ8sFO27yq/BN9//m3Pb3f+zX555dVj8vHrGu1wACDdpk//PfvX8uHn/8r1cVrdm1Z/hXzqht8XoGam2W5cs/JeQWZR0ckB8+yeNuuH2vtEF0Klt1M6YT6ITq3u1NaJPpddAem37K7F8ov/XvJ8XHfXRikuuE6Aqg2Zm433r2wTZBoBPycI+fHQUK8X1nQ9+1JoB+XKW3WssH/nKvnUp4oCIH389vEbZlwtR7u3SP3UKwWokGmF+28Q7vOBgJ8j5uuPt4pR2CYInYb57fb2i1d8VW+ComH/s3eWp/p09YF00Qm+TvK9NC/7tHR8f40AFTCt/33JuGYFlyvkBAE/Z8w3Hm8S0+iwfugpcAfMqeC073gu0lA/kY9/vFE+39xq78wn7APp8I1vrpefdHhnsAPWvKbp1k8K4M08J6Zphft7OgW5QcDPIfP1JxpFhg6IYTQIauZswUnyrmqnr0/YB5LPbx+/fsoV0jh3lsybM0uKN35MGq33rNLEpTTcF242rrmb+3FyhoCfU+ZvOhpkUl03Ib86YU7rdaOGVmy0k/sXfxn8plOd7P/Rf2iSP/qPS+0vA0gG59f8XzzVKa+8Ul0e046+hv7ijdeVgz8HcvPLNE/KxcGbjQ+09Alyh4CfY4T8yoU1rXdCvd5Sq9N2hx6400le+/c2ex6+qwYHdIF4aajXMK+/xl95tdf+etA05GvYb7r1BmvKP5MDunlAuM89An7Omec66mVwst60UhSMS6f1ugVHt+EEGewnCvUT0aD/F3/ZGcpU36Hfj/L3ZxHTfSAkTqjXX8t//f/vCiXUuxkd+JnwZ1K3/K8LdxqzW6L9iYVEIeDDZp7d0279dFgnGBFGDUdDvYboz7es8xXqxxP2VN/hTPftKs91jXT3gRo49Zu//m9doU3qq6UhX8P+Iuu99viRYuULrNYLco+AjxHsyi8LI9g7k3Gd2Ad5A61OAX/S2W4F/sOhhn2lE30N+gR+wJ9f/KJk/9rUJ+R+Ds0mgXb4NfAvHZ7uU+dJDXbc4xIEfFwiz7vy+06flbbvPGVXcYKgQV4n9bqXPoow7FR4/vq/HYxkOkjgBy6lv+50Qv+LXxyOpXoTBme6r4GfDT2JZYo59HnWYGI0Aj4uk7c1mkEfnNVpfeu6TVVXcIKgIaP8djCykKEBX4O+/nt//Lp5HNpF5jmBXis3+mstzFfRRm/XeuWVY/Y/M2pa39Eaj160RZUnKViDifER8DGuPGzYCTLYO9N6vVgqyApOEJywH0WNZyyd8tsHdq+bb4d+Du4izZzzL1EEeqW/l+iT5okGBvb3xQr7+l6/L1GGfq3yLF3yScJ+nNiUAxcEfEzIDvl1kzskYxt2ggz2SZjWV8Kp8cQR9h32hP/j8+zQ/+EPzWLSj0RyNt288uqxkQ59VK+GVXtmx/4+WyFfK0LOE5Eovs+E/ViwKQeuCPjwlJXDt0F17Ctdb5lUGl406Jen+yWJk072P/yhhpF6jz25ZNqPiIwO8/avi/+rFPkT4LAO4jtT/qi292jAb13zx7Loxuvo7IfDtCb329mUAy8EfPiS5sO3uhVn83cOSPvO56QWSa7h1Er/0NcgEFeVZzxOPUGn/R/+0GyCPwLhVFmcHru+xflqVhih3s3owB/2E/vicF9/1bKbBIGwwr18ybhmRbsAHgj48C1th2+DWneph0c11Ef5h3DcnK6x9ozjDEATcSb+5e09s8pftj6Wlx8feHOC/K9+dao8nX+t/PM4zs02zj0YunlKg30Sfr6OPLH/xeHQOvz1U66QpiU32EGfi7WqpH17Qz5vTF9ZEsAHAj4qkpbDt9utaX3bo0/VFOzT1q8PU7m+0JvYwO/QwKRPyDTwl4P/u5N//ThPALJDg7rTOdcQ/6t/PFkO8wn7+WlvlvrUolRU+kY/sdfQHwbt67c9dCcVnkqYclQuXriTw7SoBAEfFTPPddTLYF1bEm++DeIALcHemxP4nZf741jZV42RoH9VvV39mXLVtJFXAHgSkCwa3jVw/uof+0aC/PmBAXsS73wuifTnzx/9h6aRUJ/mn09hb+DS+s66NbdwMHdiWsnZLW9dWM9hWlSKgI+qJenwrR6gXf+1vdL17EtSLYJ99ZwOv7OyL6rtHWEY/SSg/OVZlzwRUM4TAZ4MVM6pyTjB/fz5AXv6ruFdP/bux9Px88cJ9FoR0+pNVi98C3MDF139cdG3R00I+KiJFfKL1m9CHXFVdoLo2RPsw+FM+Z0DjXFv6gnLSNgffkJgv5861X5SUH4SMHXk487jVVqfIIwO307Q01Be/tzAJdP182/2XxLYs3Czq/74ferfFe0Jvf6ekccbnMMK+1rfaV17iyy9Je+35prnrL/cSd8etSDgo2Zx9fK1htPywE7pO/OGVINgHz0N/Rr4Rld7shD6ajU67I9+MuBwXjm47NsNP5GoxESBTMP46B+LsV9PaiUmTM6h2HfvbuAg91hhhX2d6G/6yp35C/r07REQAj4CY03z26Po5evUvuWBXVXXcXTi1vpgm70VB/FzQr8T+KO+kRNQ+vuCs5WpfB9DYy6n87XQvv5f/OXuQA/oOtWdHGzfYb89AkXAR6DK+/K1l2+EMuaqZTuOs8dewz2Sb7zg79Q9gGrZ5yqGV6za61aHAz2T+eA423h+0rE9sCfrGvB1op/NoG+eE9P4Bn17BImAj8CFUdnRQ7QtD+6qajtOli+oyiMn6Gvw18OZ+t7ZsgI4xgvyTOWjp0/Uf9LZbq/eDOLJubNmMzMHcnW//cXBm6nkIGgEfITCXqV5YVK7GIWaezC1TO11MvfdRzv4Qz0nnPBvvx/eie5sbMljhzzrRlaeDgf30SGeJ/PJor8OtboT1FQ/A0GfFZgIFQEfoSpXdgrbpAq1TO11Yvf1r23jAC0uccledZ38v3nOfiLAk4BkGrm0TO8pmDp15JCr854Qn07OwVzt69cqnUGfSg7CR8BH6Kqp7FQ7tdc/8HUzjtZxgGo4ax7tFY/DrwToEwFnT7u97vHN5F60lHTOq2mjg7tzz4BTq2ECnw/6a+gvnioH/Vp/PaWmo6+VHCncaVxzN51ChIqAj0j4vf22lqm93hqpU3vqOIiSc3GTs1ay/ATh1Mjn7PfDe+JHfzmtTxAuWenp7P532/8/HNoVvzYxEZ3ot39vc82/LhK8XtPekiNvDW6mkoMoEPARKfP1x5utSf628bbsdD37orTcv6viqb2GBu3ZU8dBWo0ONc6ThYk+f+nHT0mldFI+nrGVFye8v/vtGgQIm9Z32rdvrvlivGQFfa3kmF8yrrmnU4CIEPARubGVHd1rv/k7B6R953NSKWftJS/nA0B2ONt3au3paz9/3eo/lvqpV0osuLgKMSHgIzbm2T1tvcdPb7pj1baKb6PVQ7Tf3dphvwcAZJO+etX+vbaagn5MB3G5uAqxIuAjbprQD1hvDX6/gR6i5bIqAMiPoIJ+d9fG8Gs7epDWkM8b01eWBIjJJAHi9T+tt4PW2zQph/0J6bR+90+eldv/0zIBAOSH1jB1kcJn/6TZPqPyyqvHpFJ6vmv7rr+SU2fOSuOcWWHUdpyDtHcZH1r1mgAxYoKPJGm23jbJONN87dp//WusDAYA1D7RD762Y56TIfPzxvvv6RIgAQj4SJoG663NerNvwGVDDgBgInoY9xvfXF/11p0Aajum9VaSwQuf5yAtkoSKDpJG9wPqBGTgruVf+NRjP/zL9/7bf/sxAQBgrOnTf8+u7egwSGs7uma2Ek5tx7DGnY1zZsp73/ueCr61fSPtBuOaFfdu/j8PstseicIEH4l18qTZYFyUDutnaVEAAPBQy4VZOs3/L99cIU233mAFftd4xNQeiUfAR+Kd/H/MVqPczWfZPQDAlYb7n3Rul590VHduSy/J+vqX75DZs64Z57P21P4b1tSeQ2FINAI+UoFpPgCgErUcxNVpvt6Eu8oK+8PTfKb2SBUCPlLl5N+bzdbvteNu2gEAYKxaajs6zf+zL99x7tqZ1zC1R6oQ8JE6Os2Xi9JmBf1VAgCADzrNb9++uZJvUp7ai3zeeusTIEUI+EgtpvkAgEroFP/LD7X4Wat5TsrBnr32SCUCPlKNaT4AoFJa29n+/W/ImTMnx35Kp/bbrTcd9bP6EqlFwEcmWEG/0RiSA8I0HwDgg07zt39vs/xX+xCu5nrRtK9T+5IAKUfAR6ac/L/NNqNg13YAAPC0b/+Pz2342urvSfkWdSATCPjIHGo7AAAfTOt/JXOSfH72bKNPgAwh4COzOIQLAJjASXPICvb/H6MkQAYR8JF51HYAAMPOWcH+e1In7dbUnkO0yCwCPnKB2g4A5Bp1HOQKAR+5Qm0HAHKHOg5yh4CPXDr5/5it1k/+dULQB4Cssus4VrBvEyBnCPjILWo7AJBJpmnKdpkkm+nZI68I+Mg9DfrGkGyzvtgkAID0MqXbnCRfsoJ9rwA5RsAHhtHPB4CUMqXXmtqvp2cPlBHwgTEI+gCQGv1GQVpnzTZ2C4ARBHxgAsP787Wf3yAAgCTpN4dkO/vsgfER8AEXHMQFgEQh2AM+EPABHwj6ABC7TrNgb8bpEwCuCPhABQj6ABA5gj1QIQI+UAWCPgCEzJSSaVrBns04QMUI+EANCPoAEDCCPVAzAj4QAII+ANSIYA8EhoAPBIigDwAVItgDgSPgAyEg6AOAp05zSHYT7IHgEfCBEBH0AeAS/da0frdMsvfY9wmAUBDwgQiMCvqLhJtxAeQPF1QBESLgAxEaDvpFK+hvEoI+gOwj2AMxIOADMTn592YzQR9AJplSMiZJ55DIQYI9ED0CPhCzk/+3WZ7oG1IUAEgzNuIAiUDABxKCA7kAUqp8cNaULoI9kAwEfCBh6OkDSAn69UBCEfCBBLN7+mJN9KnvAEgKajhA4hHwgRRgzSaAmJWn9VrD+YjRKwASjYAPpAxTfQCRKW/D6RoS2U0NB0gPAj6QUkz1AYSEQ7NAyhHwgQxgqg+gZtqtH7KC/WQr2DOtB1KNgA9kyPBUv9Wa6i8VpvoAvLEJB8ggAj6QUXqBlvUrvHk47NcLAJRRwQEyjoAPZJw11a+3pvpNVHiAnKOCA+QGAR/IkZFLtAj7QD6wBQfIJQI+kFMa9gsiS82L0mz9TtAoALKhfBHVYamTTivU9wmA3CHgAyDsA2lHqAcwCgEfwCUI+0BKEOoBTICAD2BCdPaBhHm3U3+QUA9gIgR8AL6MhP3y2s2isHoTiEK/Fep72X4DoBIEfABVGbVnf5FwqRYQpD7TlIO6p17qpJdQD6BSBHwANbOm+40FkUXmRWmiygNUzJ7SU70BEBQCPoBA2RdrDUqjPd0XmcdBXWBcTOkBhIaADyBUTnff+mKROg9yTAN8l/Uq12G69ADCRsAHECmt81iBv3H4sK5O9xsEyB470BsF6aV2AyBqBHwAsSLwIyP6rLcSgR5AEhDwASTKcKVHg35xuMNfFCBpdHWlyGEZkl6ZLCUCPYAkIeADSDxdyVmok3nmkB32mfIjan3iTOcH5RiHYgEkHQEfQOqMbOrRKX/BmvIT+hGcPuut1/p5VRq6KKdkkj2dJ8wDSBUCPoBMcEL/yKTftAI/Kzrhrk+cyTxhHkCGEPABZNrwjbv14nT6xfoywT9v+qy3XtO0Qny5M9+rHyPMA8gqAj6A3Bl1GVe9NelvtGs+TPzTrn/4jSAPIPcI+AAwir3FZ1AatOozdFFmG4bMGg7/DSL2KwGIT7/1Y9Fn/VhoiB+wQ3zB+tgk+9BrnwAAbAR8APDJnvzrYd5BqbefAAzKtOHpf/3wE4AGQS36hgN8nwb4wiQ5OdyN7xMm8QDgGwEfAAI0+knAqMm/WE8Eyq8E2F8ZeTUg668IlGszpvVm2CG9fyS4X7Am8PqxuvLHCe8AEBwCPgDEyK4EqcHh8H/pkwB9X28YMnX44fX2qwUOY9xXDMb7mB99l33EHPUxY6TjLnY9xix/eeQxxvD7cmAXKjMAEJ//Fz3Hq2uCyytfAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/public/images/landing-new/avatar-2.svg b/public/images/landing-new/avatar-2.svg
new file mode 100644
index 0000000000..d4e96c78c3
--- /dev/null
+++ b/public/images/landing-new/avatar-2.svg
@@ -0,0 +1,9 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="28" height="28" rx="14" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1676_1588" transform="scale(0.00131579)"/>
+</pattern>
+<image id="image0_1676_1588" width="760" height="760" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAL4CAYAAAAOIoPjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAI8ISURBVHgB7d0PnFT1fe//z5nZXUCWZYGI/1B2+OeVREC9jZj2wmrVtvEfSfQXm9SINkmb3BjBGpM+blT803vT/BE0+T1ya6xiTHptYyrGmLTBX11MGzG5CmKDDX+cJUUFEmBZFhf2z5zf+Zzdg8OyM3Nm5vw/r2cek9ndmUWUXfZ9PvP5fj6GAABCk8+bbfYbAzJ0bw7fG0fvWw1DJg4/vVXft98qFL19rDapTedxHzGKPmZKl/X/XfabphwYfl8/3nnMcxuG7nM54/hfDwAQCEMAAJ6xAruG7lY7sFthPdMoEwuDkhsO6a12gB8K5s4tyYYuCpzwb10MmAXZ4bxtf1wvFBql07og6BIAgCcI+ADgkh3e+62AnrGCe1amHw3uxlCYl9qr5xhyNPRbFwKvZBpkf2FAXuEiAACqQ8AHgCJ2y8ygLLBbYDKywA7wpvX+UMtM0ivuUdflVP5NU3ZYF1l5+wKgwQ7/nQIAsBHwAaTO0Uq8WMF9KMRPt99OR9tMcpmy0Q7/VvXfut9oV/4bZCOVfwBpQ8AHkFhlgnybID00+GeG2n6s9zo0+OdmGx0CAAlFwAeQCHaYH5R27Y23gpyG+HYhyKOc4Yq/kZGO4VYfqv0AEoGADyB2isL8/OEwT1UeXum0bhuPVvsJ/QBiiIAPINLsMD8gCzINR8N8uxDmEaxO67bRqfTT3gMg6gj4ACLFnmLTb4V47ZkXWWz9LbVAgKgxpONolT9rV/k7BQAigoAPIFQa6DMiV1GdR8x1ylCVf02h36ryzzE2CgCEhIAPIFAjAv0SYSwlkqlTCPwAQkLAB+Cr4VGVS4ysLBYCPdKr07p12H38Iuto6QHgJwI+AE85h2Ktv12WGIZcJbTcAMczZaNpBX3rfg2TegB4jYAPoG5H225Mq0JvHt0IC8Atw6ruG3Y7zzraeQDUi4APoGpU6QFfdVo3ndLzKCM5AdSCgA/AlaO99A1yPVV6IDDautNhH9aldx+ASwR8ACWNaL1pFwDhGmrlWU3YB1AOAR/AMYZD/fWmBnpCPRBdpmw0snbYf4qwD6AYAR8AoR6IO8I+gCIEfCClCPVAQhH2gdQj4AMpogdlh0M9PfVAGtCzD6QSAR9IuBHTb9oFQDq9E/afYrEWkGwEfCCh8lvNdiNjhXqxqvWMtATwDg33a5izDyQXAR9IkOEWnJutH9zLhFAPoLJO05SnJCuraOEBkoOAD8QcLTgAPDHcwjM9ZzwqAGKNgA/ElLbgWN/BS6wfyNqGQ7UegFc6rVuHmZG7qOoD8UTAB2KEKTgAAkVVH4glAj4QA1awX2AF+6vorQcQkk6hqg/EBgEfiDB7Ek5W7qRaDyAyqOoDkUfAByKGSTgAYqLTyMgKlmgB0UPAByKCQ7MAYmw17TtAdBDwgZDRhgMgMQzpMAetoM8CLSBUBHwgBPbs+kGrWp9hdj2ARLLbd+jTB8JBwAcCRH89gJShTx8IAQEfCADBHkDKdQpjNoHAEPABH1nBvk0GZRkHZwHgKA7kAj4j4AM+GJ6Is3Q42AMAjkfQB3xCwAc8xEQcAKgaQR/wGAEf8ADBHgDqRtAHPELAB+pAsAcAzxH0gToR8IEaEOwBwHcEfaBGBHygCsNTcVZweBYAAkPQB6pEwAdcINgDQOgI+oBLBHygDBZUAUDkEPSBCgj4wCgI9gAQaZ1GRlZPzxl3CYDjEPCBEfLbTF1QtVII9gAQdRr0V1hB/1EBcBQBHxhmT8bRYG/IAgEAxAlBHyhCwEfq5fPmAsO0gj0jLwEg7taYGVlOfz7SjoCP1Brus79zuM8eAJAcHMRFqhHwkUo78uadHKAFgETrNEXuz800VgmQMgR8pIrdZ5+RR6w32wQAkAb05yN1CPhIBV1UZZhWsKfPHgDSirYdpAYBH4nGPHsAQLHhaj7z85FoBHwkFu04AIASaNtBohHwkTi04wAAXKJtB4mUESBBdDqOUZANhHsAgAtLrZ8Zef3ZIUCCUMFHItCOA3jjrbd2ysGebnlz1xvSY93b7x/stt/W20H7dtB+29FzcOjjjlNOmfbO2yefNnw/TZqbW+RU67HZs8+SObPmyoQJLQJESKc5KB/IzTE2ChBzBHzEGsuqgOo4AX7Lttfst+3bLr29Yb8dlMv+6ENyx//4igARRNsOYo+Aj9jKbzOXGIZdtWc6DjCChvVfWSF+l3W/ZetmO9DvGg73UaAV/TVPPC9ARHEIF7FGwEfscIgWeIe2z2zZtlm2bn0tkkG+nBf/9XUBIo5qPmKJgI9Y2ZE3dab9CqFqjxQqDvMvb1h/tM0mrtZ87/lj+vWBiKKaj9hpECAGnKq9Fe7bBUgJrci/vOHFofuNL8Y6zI9G/70I+IiBNutnz+rO182lpiE3UM1HHBDwEXlU7ZEGWp1/yQrxL7+8XrYOV+nj0GZTDz3YC8SGKe1WoWlDfrt5V26msUqACCPgI7Ko2iPJNNCv+9e1smXLZnneuk9add4NreADMdNqiKy0qvlXUc1HlBHwEUlU7ZE0BPrjbSXgI66o5iPiOGSLSGFCDpKiuOWGQD+6Cc0t8uw/sVMIscekHUQOAR+RwVx7xJkz4Wbd82vtHno9HIvKmKSDhGDSDiKFFh2Ejm20iKuXNqy3D8Ou++lPUnEo1g9M0kFCDE3a2W62U81HFBDwEar8VrPdKMgjpvWXowAR5/TR2203P11LoPcAk3SQMEutn2nt+S3mB3JzDPrPEBoCPkKzI2+upGqPqNMqvbbbvDx8D28xSQcJ1GZkZYP1M05bdu4SIAT04CNw9kHaQXnS+upbIEDEUKUP1pxZZ8ljq58RIKE6zYxcSMsOgkYFH4GyKhrXW1X7VVa45yAtIkOryOusME+VPni06CDh2oyCXc1fxgFcBIkKPgLBQVpEjbbe6MQbRliGj0k6SAMrcK0qdMtduXOMLgF8RgUfvrPC/QKrgvEkB2kRpuIxlj/68fdpvYkQJukgDayfgcuMFlli/UykZQe+I+DDV2ykRZicUP/Mj75PP32E0aaDFNGWnXx+u7mcDbjwEwEfvtCWHOsvMZ2Ss1SAABHq4+fNXbRIIV0MkZWd2835Zrcsp2UHfiDgw3P2lJyCPCe05CBATk897Tfxs5VRmUinpUaLtNOyAz9wyBaeoiUHQXKm3/z9PzxCqI+xCc0t8uw/sRMIqdVlitxFyw68RMCHJ5iSg6BoC84zVpV+3U9/wkjLBNGAr0EfSCudsjN9prFcAA8Q8FE3FlchCLTgJNt3HvmhzJ49V4CUYzEWPEEPPuqS32q26whMFlfBD1Tr0+NXW18j4ANDU3aes3623pCbbXQIUCMCPmo23G9PzyA8p8H+8e89Qm99iujkI5EPCQAr5GfkOetn7IrpOeMuAWpAwEfVGIEJvxDs02sX24SBY+jAih3bzVa236IW9OCjKvTbw2uP/8PDsvi/XSo//PH3CfYpdsrJ02TNE88LgOPQl4+qEfDhmt1vn5FHhPn28IAeml15/72yddtme3oKwR5M0gFK6jQH5QO5OQbzZOFKRgAXtN9eewKFcI86vfXWTvnUTX8sn77pI3a4V4R7KNp0gJLajKxsyG83GUUNVwj4qMgK9ys5TAsvaDvOdTdczkQcjEon6QAozRBZaf1MvlOACjhki5Lsw7SmPGmF+3YB6rB162a5669uO1qxB0bDJB2gMj182/m62W4acgN9+SiFCj5GZR+mLcgGMQn3qM+3Hr5f/sSq2hPuUQktOoBL1s9me16+9bNagFEQ8HEc6y+MBXa4p98eddCq/Z8svVwesgI+4MYWWnSAagwtxdpiMtUOxyHg4xg78ub1w+GezbSomfbaf6roEC3gxlu7qOADVeLwLUZFwMdRO7abd5oFWS1AjZwJOSsfuJfJOKjJW7TpAFXj8C1GIuDDZk/KEVkhQI10rr1W7ZmQg3q8xNcPUJPhzbcrBRCm6KQek3LgBT1IS689vECbDlA7q1C3rPN1c4F5QD6QO8foEqQWFfwUY1IO6nXwYLfdkkO4h1do0QHqpBN2WmQDE3bSjYCfUsPhns20qJkGMZZWwWs6fQlA3doYo5luBPwUYgwm6vXDHz1hh3vaKeC1t3a9IQA8wRjNFCPgp8zwGEyt3DMGEzXRfvt7/udtTMmBL/TrijYdwDM6RvO5/DZziSBVCPgpYoX7m4fHYBLuUTXtt7/7f36Ofnv4bgttOoCXWg1DnmRWfroQ8FNieMb9KgFqMDTf/iPyzI++L4DfaNMBvMes/HQh4KeAHe6ZcY8aOeGerbQIChV8wB/2rHxCfioQ8BOOBVaoh0400XDPYVoEiUk6gH8I+elAwE+wzu3mI9Y3Mj13qImzmZZwj6DRogP4S0O+ZgRBYhHwE2r4G3epADXQMZiftsI9k3IQBibpAIFYSshPLgJ+wuTzZmvnNlNn3C8VoAYa7nUMJhAm+vCBQCzVzJDfYDJdL2EI+Ami4d4YlOfEEJZaoCbOjHsgbLTpAAGxMoMxQZ4j5CcLAT8hCPeol4Z7ZtwjKqjgAwEi5CcOAT8BrHDfRrhHPQj3iBom6QABGwr5/6KZQhB7BPyYs8N9gXCP2hHuEUW06AAhMOQcK1MQ8hOAgB9jR8O9SJsANSDcI6p0kg5TnIBQ5Aj58UfAjynCPeql03II94gy2nSA0BDyY46AH0OEe9SLUZiIgy1bXxMAoSHkxxgBP2YI96iXVkUJ94iDN9miDISNkB9TBPwYGR6F+aQQ7lEj3Q76qZs+IkAc7GKbLRAFOSt7/CMjNOOFgB8TzLlHvZxwz8FFxAUtOkBE6HQdHaFJyI8NAn4MEO5RLyfcv0XLA2JEv165IAUigpAfKwT8GCDco16f+8s/J9wjlmjTASJkOOQLIo+AH3Gd281HCPeox8oH7pGt2xg3iHj6FW06QLRYId/KJg8LIo2AH2F2uBdZKkCNdJHV4//wiABxtYWLUyCKbiDkRxsBP6J2bDfvFMI96rDu+bUsskLs0aIDRNYNVla5TxBJBPwI0nBviqwQoEZ6qPae//k5AeKOSTpAdFlZZdmOvF2QRMQQ8COGcI96MQ4TScIkHSDSDLMgdxLyo4eAHyHWN8jNhHvUSw/VMjEHSUKbDhBpdsjPbzeXCSKDgB8R+W3mEusbZJUAddBDtet+ulaAJGGSDhB5hiFyn1WovF4QCQT8CMjnzQXWdwajTlCXlzas51AtEolJOkAsaCV/ZX6LyWjvCCDgh8wK921GQZ603mQzHGpmH6r9q9sESKKeg/TgAzExycjKv2i2EYSKgB+i4XD/nPVmmwB1uPt/fo6+eyTWyxteFACxMcnKNoT8kBHwQ2J94bcS7uEF7bsnACHJuHgFYidnh/wNJt0JISHgh8Qw7bacNgHqoK059N0jDd5ikg4QNzljovyjIBQE/BDsyJsrxZR2Aepw8GC3Pe8eSIOXeJUKiB9TLmTbbTgI+AGzF1kVhFmxqNtDj9xP6wJSo4dlV0Asse02HAT8ALHICl555kffl8f/gcmqSI8tWxmVCcSUs+2WGfkBIuAHRGfds8gKXtBe5G/Rd4+U2UrAB+JMQ/4jzMgPDgE/AEWz7oG6abinNQdp89auNwRArBnMyA8OAd9nzLqHl3Rb7TM//r4AaXOwp5tJOkD8TWJ8ZjAI+D4zTNFG6TYBPMC2WqQZffhAIjA+MwAEfB/pxBzGYcIrtOYg7WjTARKC8Zm+I+D7hIk58BILrQAq+ECS6PjM/HaTseE+IeD7gIk58NrKB+4RIO2YpAMkimGI3JffarYLPEfA9xgTc+A1nXm/7qdrBUg7WnSAxDGMjDzMZB3vEfA9ZH2BtjIxB15j5j0whEk6QCLljEH5RybreIuA7yHrP6auYm4TwCMcrAWORR8+kECGnGO0CIduPUTA94hOzDELwmEReIaDtcDxaNMBEmsph269Q8D3gB4QYWIOvEZrDnC83W/mBUAicejWQwT8OtmHajP2MivAM1q9Z2MtcLzX/+NFmbqvQ8YdpnUNSCA9dPuPHLqtHwG/ThyqhR+o3gOj25zfKdlCr7T2vErQB5Jpkh66FdSFgF+HHXlzpRDu4TE9REj1Hhhd96Fe+6YI+kBCGXIOm27rQ8Cvkb2plkO18AFLrYDydu757THvFwf9pv59AiD+2HRbHwJ+DbQ3zAr3KwTw2Esb1svLG14UAKX9Mj/6JB0N+lMOvCitBzdJdrBXAMSaHrq9g3782hDwq1S0zIqFDPAcYzGByrQPv5xxR96Qqfs7CPpA/E2yMte/sASregT8ag3KKqHvHj6geg+4s3PPXlfP06CvFX3684FYy7EEq3oE/Cpo3731etH1AvjgmR9xsBZwo1SLzmiK+/Op5gOxxRKsKhkCV+x59wVhwwp8oXPvl1yzSAC488/fuFNOf1erNI9tqurzesecJgdPmC2D2XECIFb2m4NyUW6OsVFQERV8F4r67gFfMPceqM5//Ocu2banS7bt3i89h/tcfx5tO0BsTTKy8o/047tDwHfB+o90p9B3D5+wtRao3us7d9n3PUf67aD/673d0jcw6OpznbYdDuECsZPLtMgdgooI+BXkt5lLmXcPPz3+vUcEQHXyb+w+5v19hw7L5jf3VhX0qeYD8aPz8XfkTc5DVkDAL8PuuzdkpQA+Wvf8WgFQnT379o/6cQ36WtH/zcG3xQ2q+UDsGFbhdSXz8csj4JfBvHv4TSfnvLWL6iFQrdd37i75mFbw39jfY1f0q63mjz2yWwBE3iRjUP5RUBIBv4Qd20367uG7H/74CQFQvT37uuRQ7+Gyz9FwryF/14FD4oZW8ycdfFkmvL1VAEScIedYWY35+CUQ8EeR32q2myIrBPCRHq5lsRVQOw35bmjAr6aa3/z2NubmAzGg/fia2QTHIeCPYPfdZ4RTj/AdozGB+jiTdNyopZr/rq5/4wAuEG2GldkeZnTm8Qj4Iw3alfs2AXxG9R6oj9sKfrFqqvkZs98+gEvLDhBpjM4cBQG/iI7ENAxh9BJ8x+FaoH67awj4SsP9r3btsyfuuKEtO+/a/2+07AARZbfqbDOXCI4i4A8bHol5pwAB4HAtUL9/37pDajVYMO2Z+W5bdhoHu+0pOw0DBwVA5BhWhnuY0ZnvIOA7aM1BQDhcC3hjT40V/GLVtOxoX/6JXf8q43s7BUDkTDJMeVhgI+BbduTNm2nNQVAI94B3vAj5Gu51OVZvX7+r57cceo2+fCCKTGnPbzeXCQj4+nKOWWAkJoJDew7gnWom6ZQz1Je/33XLjvblT+p+WYzCgACIDKteK3fQqkPAF+vlHB2JyXglBIL2HMBbXlTwi2nAdxvyx/bttvvyOXwLRAqtOpLygK+tOfpyjgABIdwD3nr9DW8q+MU04Od/0yWDhULF5zqHbwn5QITQqpPegE9rDsJAew7grc6du8UPB3r77JYdt4dvmbADRErqW3VSG/BpzUHQaM8BvLfb4xadYs7hW0I+EEupbtVJZcDXhVa05iBohHvAe4d6D3veh1/MWYrlZsKObr7VMZrjjrwhACIgxa06qQv4LLRCWF7asF4AeM+rSTql6FIsbdfZ1+Ouz7714CZCPhANqW3VSV8Fn4VWCMnzP10rALznZwW/2K/3HXQ9YYeQD0RGKlt1UhXwtTWHhVYIg1bvD/Z0CwDv+TFJp5RqxmgS8oGI0FadbeYSSZHUBHxacxCmrVs3CwB/+DVJpxRCPhA7hpUBH85vMFMzXCU9FXxacxCidbTnAL7ZHVCLTjFCPhA7kzItcoekRCoCvlW9X0BrDsLEBB3AP35P0imFkA/EiymyLL/VbJcUSEXANwrypAAhYXoO4L/dew9IGKoJ+S09rzEnHwiXYWTSceA28QF/x3ZT++7bBAgJ/feA//JvvCVhcRvydU4+y7CA0OXy280VknCJDvh6sNZ6OWaFACGi/x7w35594VTwHdWE/MndL0l20N1MfQDeM0Q+m/TZ+Mmu4A8S7hG+rVtfEwD+2rNvv4TNbcjPFnrtSj4hHwhN4mfjJzbgM/MeUbBl62bm3wMBeD3gUZmlVBPyJ3W/LEZhQACEQGfjJ/jAbWIDPjPvEQVv7WJqBhAEnaKj03SiQAP+vp7K1fnGwW6ZeIgzOkBI7AO3SZ2Nn8iAz8FaRMXLTNABAhPGqMxSfr3voBzoPVLxeTo6c8LbWwVAKHLSIsskgRIX8DlYiyjZwgQdIDCv79wlUfLrvd3S29df8XnNb2+T8b2dAiB4ST1wm7wKPgdrESEcsAWCk38jGn34jsGCKfnfdkvfwGDF52rIZ3wmEIpEHrhtkAThYC2iRA/XJvWA7bSpU6R53Fg5YdwY6+3JRz++c88+achk7F7oX+Z3ChCkKEzSGUnD/bY9XTJraqs0NWRLPs8Zn7l34vkymB0nAAI0fOA2N9vokIRIVMDnYC2iJCntOf9l+mnynlnT5YxTp8rs00+RKa0TZfwJY+3qZCnZjGGHmW2/flP6+gfk37d1yiu/ysvPN28TwC9RmaQzkob8/G8P2CE/myn9wrlO1mnt2WSHfACBcjbczpCESEzA35E3bzYLHKxFdMR1g23L+BPkffP/iyyc919k7owzZOzYMcc9p1y4dx7v7RuQ006ear+fO/1UueLC90nzmEZZ/+p/yIubfiXPvfRL6T70tgBecSbpjLdeXYoa/X54Y3+PnDGlpezzmvr3SUvPa9LdfJYACJS94TY301ghCZCIgG8frC0k8xQ04ituIzK1Sn/jVRfLKVPf5VtA6jnSL++ZM9O+feYjV0rHLzbJt55cG6npJ4g3/VrKnXayRNG+Q4ftV7ZOnji+7PPGH+6UvsbJcnjMSQIgOPaB2w3mqtw5Rux/KCWjgq8Haw2q94iWN9+Kfg+6Vuuv/v33yZXt50umIdi/DrSief78ufK+c94tm7f/Wh7/8Tp56T+2C1APnaQT1YCvdEa+trCdOOGEss+b2POq9De00I8PBGtSpkXusO5vkZgzJOa0em8UJC9AxPzJDZdHtk1Hg/0HLlool/23947aghOWX/z7FvmbJ35MRR81u7J9oXz8g38gUaYBX/vxxzU1ln1ef7ZFfjvpdwVAoExzUM7NzTE2SozFvoJvhfuVAkTQrghW8KMa7B2/85458rsLzpIn/+Vn8szzv5Cde/YKUI0oTtIZyRmfWWmyjm66pR8fCJxhNMh91v1FEmOxDvg6FtO6WyJAxERxROYfvu9c+eM/apdJEydIlOnEkcsWnW+F/TPlaSvoP2UFfcCtqE7SGcmZrHPmyZPLPk/78bUXX3vyAQQkAWMzY73oirGYiKq3IlS9P+Vdk+W+v/hT+fS1V0Q+3BebOrlV/vTq98ufXf2HArgVp/auock6lZdbtR7cZL1aPSAAAmNYGfM+ibHYBvzh6n2bABEUler9hy/5Pbn/tk/KrOnTJK60mv/QipvtwA+4EaeQ/5uDvbKvp7fsc3Q+/sRDydirAcSGIQt25M3YLk+NbcCneo8o2xXyiEynav/RK34/kr321dJw/6VlN8i8OTkBKnl1a6fEyRtdPXbLTjnjjrwhY4/Eo/0ISAjDLMjK/AYzltWlWAb8HdtNDfdtAkRUmCMyr/ujRbGv2o/mXa0tcu9nPiZLLrpAgHLiNoVJD91u29Nl3RfKPk9HZ9KqAwRqkrTEc89S7AK+vdRKZKkAEdYTQouOTsi56cOXybWXXZSIqn0pNy65VD562YUClLI7hmNWtYKvM/LLyZj90tqzSQAEZ3j5Veyq+PGr4OtSK6r3iLiDB4MN+NOmTrFbci753f9qVwOT7sN/sEiuv+oSyWRiPScAPumMySSdkbQf/0DvkbLPGdu3W5r69wmAwMSyih+rn472UitDYnvgAenx1q7gWnTOnH6a/NVN18vUd6VrjN6Hfv99csOSPyDk4zhxrOA7fr23u2I/PlN1gGDZVXwrg0qMxGsOvlbvY797F/DOVYt+Rz56eTIO0tbiqvb32vePrPlnKVToX0byaFtay/hxMtG6tRTd1NTxY+y3yy2ScuirXk7/e9/goAwOWu+bpv1xDdt639vXb3/Mb/rP0pA/66RJJZ+jU3UmvL2VBVhAcCYZBbnDur9RYiI2Ad+u3heo3iMeDvZUnm1drz//4B/Ikot/t2K1L+kI+cmkbWfvzp1mh3R9W28a6KdNnWx/7HTr/TDo7Hr9nuvtHzjmbS/1HOmX3xx8W06ccELJ5+gCrLfHTpOBhvjstgBibqmVRe/O5YxOiYH4VPCp3iNG/D5k+9+v/kN5f/vC1Id7h4b8roM98v21PxXEg4b1062wPtcK8U6An5ubFmp4d2NcU4N9myjHvmqmYb+3v196DvcPv11f6NcDtxPHjSn7CoTOxt878XwBEAgjTlX8WETm4ep9XoCYWHLNIt+22d75p1fLJe87T/YdOiw41r0P/YP8fNNrguhwKvFOgB8K85MjHeK9YFf2raCvh2Z7DvdJ32D1ry41j2ks26qjuprPlt6xyRqJC0SYaRbkotxso0MiLh4Bf5u5msO1iJPzf2+G+OFrn71Ofv/8BXaPLo7Xe6RP/vLr35bXfx3uorE00oq8BnkN8c7tdLud5gTBUIVfg75emFdT3c+dONGu5JdSMBplz6R2MTPxOlIHxJYhz7XNMC6SiIt8wKd6jzjyI+BruL/mooWy+c29tOaUsa+7Rz638mH5zd79An9oFf6C98yyQvzpw5X50xJfkfeSfv/aIzHfPlyxsp/NGDL31CnWfelpUQdPmCU9J8wWAIGIRRU/+pf89N4DdluOhnut/hHuy5vc0iy3Lb1a/vL+h2WA/1Z1Kw7zWpUfOvhKVb4e2ld/2qRm++ZU9Uu13OlUHb0YOHni+JK/3vjeHdI7ZpoMZscJAN8ZRtbuxe+QCIt0dKZ6j7jysoK//Nr3W7fL7GCv6+wJ+O48/fz/lb/9xx8zWacKhPnwOJtsSwV9reKXO3DbO+Y06ZowTwAEIvJV/GhX8KneI+WccK+o3lfnikX/VV7d1inrN/5ScDwN7hrmF75nztFgT5gPj4b3M6a02JX60YJ+pdn44468YY/N7GtM18I7ICSRr+JHNj5TvUeceVHB/9MrLrRbc5QGe+29R3W0H/+2+1fLnt/w3+7dVkV+4Xtm25V5vadnPtpGq+jPmtoqzWObSn+OFe4ZmwkEJtJV/OhW8KneI8UuPX/+0XCv9Ac9qqf9+J/58OVy9//+Tqr68Ysn2ujXEq028eNU9HXZVf43XfZhXP17YFaZgN/Uv8++UcUHAhHpKn4kIzTVe8RdPRV8bZf4p5VfOBrIqN7X77s/fl7+/sfPSVI5gV7bbbQ6T6BPHg33dsCnig9ESWSr+NGs4FO9R8xNaG6RgzVss9Vw/w/33nxMOKN6X78PXrRQXnz1P6Rz51uSFBdYQZ5Anx7am6/z8HXqTjNVfCAqDCMjH5MIVvEjF6Op3iMJat1k+08r/9Juq3BQvffOr3a8GevRmXrx9wfnz6PlJuUGC4WyM/EVVXwgUKaZkRm5nNEpERK9Cj7Ve6SUTswpDveK6r13zpx+qlx4/rmy9t9+IXHgtN1ooL/UCvYcioWqFO4VVXwgUIaVXW+27pdLhEQq4A9X768XIGWuvmjh0XGYDq3el5qJjdp89I8WycbXtslv9kVzyy1VenhlwttbqeIDATEMuT6/wbwrd47RJRERrQo+1XskxCknn+a6RUdD3Yo//dBxH6d67z2dqvPRyy+SB77zZGQWYDm99Fqlf/eIV3CAWlHFBwI1SVpkmXW/QiIiMgF/uHq/WICUGXmoVlG9989F//U9svaFl+WXW8M76qOhXqv011x0PlV6+IYqPhAcqz79WauKvyoqVfzoVPAHpd36r9MmQAKccrJWYl+s+DyddT9tlN5qqvf+unHJpfL5lQ8FeuCWUI+gaQU/O9grg9lxAsB3kariRybgG4bcKUBCTJjQUvE52nev22pHonrvv9mnnywLF7xb/vX/bhI/EeoRtnFHdkrPCbMFgP+iVMWPRMDPbzOXWndtAiREc3P5gK9V+1uuff+ojxHug/HxJZfIL7d2yv4D1e8rKEf/bK+xL97aCfUI3fjeHXJobE7MTHQX1wMJ0ppplaus+0clZJH4jqd6j6Q59ZTyhyV1JOa0EmMPCfjB0AO3Sy66QB558p+lXhrktUqv1Xqt2gNRkTH7ZfzhPFV8IBiGadrTIAn4+a1mu1C9R8KUq+Bra45WeEej4b4vpouY4ugP33eurPmXF2qu4muY1z9PHW1JtR5RNfbIHgI+EBRT2jXb5mYbHRKi0AM+1XskkY7JHE251hzF4dpgjRvTVHUVX4O8np1grCXionGwm5GZQHAMIyt3WPcdEqJQA76OxpSCtAuQMBNKVPDLteb0HO6jeh8Ct1V8DswizhiZCQQoAlX8cCv4LLZCQp0ySg++c/iyFHrvw1Gpiq/Bftm1l9Fbj1jTCr5RGOCwLRAMw/qfHrbtkJCEFq+HF1uFt2kG8NmSaxYds832Zw/eXbJ6r5X7zW/uFYSj90iffPLuB+TAwaEWKefQrLbilPozA+Lm4Amz6MUHgrPf7JYZYY3MDO9SfmixFZBYs2eddTTg60HMckGR6n24tIp/+aL3ytMdL9qhnhGXSKIxVhW/RwAEJNTFV6EFfA7XIumcPvxKB2sVAT9czVbA/7gV7P/yI+8n2COxtE2Hw7ZAcHTxlYQU8DMSAhZbIQ3mzD7LvtdWj3LVew7XhkND/ckTx8vcU6fIrJNaZebJUwj3SLyxR3YLgMC0Do+DD1woFXzriuZ6ARLulFNOt4P98msvK/s8qvfByVovHZ7YcoIV7huleWyTAGkz7sgb0t18lgAIRGgjMwMP+IzGRFrMmXWWLPvjq8o+Ryv3BHz/DVXrTyDUI/V0sy1tOkCAdGTmFnNBbo6xUQIUfAWf0ZhICR2VOf/3f0+k0FvyOT1H+gX+cKr1J04YJ9lMKN2IQCRpmw4BHwiMIVlZYt0HGvAD/6ln/cxdLEAKNA50S7ZMuFf7eso/jupptX7W1FY5+/QT7R57wj1wLG3TARAcPWyb32C2SoAC/cnH4VqkSaUfotqeQwXfOxPHjbGDvR6YpRUHKM1p0wEQGOsHkyyVAAUa8DlcizSpNK2CcF8/bcNxJuHkTpxIsIcnug4eknu+9V056eJrZMz575ff+ZPPyLd/+KwkCdN0gEDpYdsrJUCBdcOzuRZpou057+r6t7LP+dWufdLbNyCoHv318NOcJUtlx1t7jvv4V5d/Um66dokkQcFolN1TLhYAgTHNglyUm210SACC+8k4GM6gfyAMlV7+1vYcwn31jlbsT5tCfz188dgza0cN9+reh75rV/fr9cqW7fL8S5skTLTpAIEzrP9dJQEJbIoOh2uRJmP7aM/xEhV7BKVcK46G+x1v7ZLWCTOlFuusUP+Je+47egEx/ZST5LrLLpbbP/FRCUNT/16m6QABsn6UXZ/fYN6VO8foEp8FEvA5XIs0cVMZY3qOe5PHj7Wr9U0NWQH8pAH++ZdfLfucAz21VfB3vLVbLv30F477mL4q0DphfCitP2Osv6d6BECAWmWCPTJztfgskFIYh2uRJm7ac6jgV+aMuzxjSgvhHoGoFO7VonPnSS2uue2eko9pyA+D/l1lFGgVBAJkGBn5mATA94Bvb6412FyL9GB6Tn2ashnGXSIUP1j3s7KPLzr3bKmF9vW/suX1ko8Ptf6EM9VmbN8uARAg3WwbwEx8/yv4g7JMgBSpVMHvOdwnOJ5zgPbMUyYT7BGK518uf/D1ysUXSC105GYlE5ubJQxNAxy0BQJmSIv/2dj3gG8EeGIYCJub7bVU8I+n7Tga7JmMg7BoBb3U9BxHLRV8DfeVft0rFy+0+/DDMKaPgA8ETTfbis98/Uma32q2C4drkSINVsAvR6v32oOPIVq1P2PyBLsdhz57hKlS9V4n3syfU930HL1o0PacSr66/M8kLFqQqFSUAOC51uGM7Bt/S2VGsGt5gbBVGo/Z28+BNsfEcWPsefaTm8cJELanOtaXfdyv6r2OydSLhzA19e0VAIHy/bCtbwE/nzdbac9B2jQOHCz7+IG3j0jaadU+d+JE+0Y7DqLipxu87b8fqt4/W/Y5GuzDmoFfjD58IBRL/Dxs699P10F7zqfvp4SBqMgO9tJ/X4HTa6/VeyAqdAFVpQ211Y7H/Pjd91V8zscuD796r+jDB0LhzMT3hW+Lrph9j7RpHKzcf59W9oSc1vFy4oQTBIiap5+v3J5TzSFY7buvNFNfg/0XP15f9V5fJfjBuhfsi5P5s2fIle21TfnRwoTOwzczgS23B/BOm85q8YEv38327PsCs++RLpXGY6a1/17n2udObJVxTYQHRFOlMF5t9d7NWMx6w73+M0YuyNKLhrXf/FJNrwroPPzesdMEQICGZ+LnzjG6xGP+tOgMEu6RPo0VJuiksf9+8vixdksO4R5RpVXwV7ZsL/ucxee5P2D79cfXuBq3qe05tbp15YOjbr/Vfxc3rUGjqXR+CIBPmv0ZSONLwKc9B2lUsYLfl64K/mmTmuWMKS0cpEWkVRqPqa05biv4GrA14Ffy0B23SC20FUcDfLl/hr4aUek8wWgq/f0FwBeGkZUrxQee/+S123MMKvhIFzfhftA0JQ20337W1Fb67REL616q1J7jvnrv51hMvXi45FOfrziZR23aul2qpWeItA8fQMC0TUezs8e8f9284N+JYCCqsoNvl328bzAdy620337WSZNYWoVY0Ep3pQr+D9atlzHnv//o+1rRn9g83g7p+va82TPtA66qUvjW59cyFtMJ95UuHhz6e6rFmP69cnhM+FN9gJQxrOy81LpfIR7yPOAbplyvPTpAmjQOlu9f7Tmc/PGYOgIzdyItOYiuzjd3y0+tQL/u5VftYO82MBfTiwK9OZ+rFwBu3XTtkqqr91qNv/pz97j+veorBNVM/Cmmr0QS8IHgWS98LxKPeRrwh6fnLBAgZSodsO3tS3bA18O02m8PRI3OuNcQ/vTzP6sp0HullrGY3/7hs/K5VX/juqd+nvVKwleX/5nUqtKoXwA+GW7TyeWMTvGItxV82nOQUg2DlQJ+cntbT5443r4BUaFTcTTUf+Pv19R04NQvf3Hfg/LZP77KVRVfD9LqtBy3dCrPt26v7fCuQyv4zMMHQuF5m46nzTSd28wN1q9IBR+pkjH75aS9pXtvBwumvLrzN5JEhHtEiVbrdXxkpbn2YdM2Gu3FLxX0R5txX47+WvXO1XfsnXi+9DVOFgABM+S5thnGReIRzwK+vrRgFCQvQMpo1WvKgRdLPq4bbLft8XyHRegI94gSHR/pZsJMlGhP/k3XHlvRr/bfw8twrw6eMEt6TpgtAAJnmhmZ4VWbjnen4WjPQUpV7L9P4AZbwj2iRCvecQv3SttwLvnUF+xee20lcjsGU+lBWp2n72W4V2OYhw+ExWnT8egX8wjtOUirlkOvyfjezpKPv7G/R35zsPwYzTgh3CNq5ixZGuoBWi9oYHd7XkCfu/abX6p5HGY5BaNRdk+pfcsugDp42KbjyUkapucgzdI0QSfO4V4PXm7a8rpMbG6W+WfOqGnZEKKpnnA/tKn2bDnj5JOl7dSp9teF3uvXid5GjpzUmfQHenrsMP6K9fXU+eYee5Tlpq2v13Wg1+3n6u9Pw71fX796pkjbDunDB0Lg4TQdb47KD0o7s++RVoZZPsD3DRYkCXQzbRzDvQanW1f+zTGtD87IQp08gvibfspU1yFfA/sViy6QxeedbQX7eVUH5aHnD32Ofn4xna2vof8H617w5aCvjsF84iu3+35xqkULAj4QkgG75X2V1MmTWN65zXzO+pXaBUihk/atlUyZFe8bfx3v1gE1cdwYyZ04UeJIRw1qr/NotBI6MqQhfiqNlNRQrwdatVIf1J+3Vvr1ovLbP1zrSfvQlYsvsMdg1rrEqhqHm06S/S3nCoAQeNSmU3fAZ3oO0qzSiEydf/+rXfE+tNaUzciZp0yO5YZard6fdPE1JR/XcYV6UBHxp2Ml9bBtMQ30OmUm7Iu4x55Za//eag36enHy1eWflKDQhw+EyjS7ZXLuHKOu8Xv1B/xt5lLDkEcESCF9KftdXf9W8vG4j8jUcD/rpEnS1JCVONK56Jd++gslH9dq6O5nvydIBq2aa5uMumLR+wKpdlejlqCv7Tg/f+wbgf+7/Kb192SgYYIACJxpmnJjbpaxWupQd0nOCvdXCZBShll+BGbc++/PmNIS23Cv5s8pP2VEK/xOIET8aRi+7rJL7FvUwr3S39fab/61XZF3Sy9arrntbgnamP69AiAUhpGRj0mdvHjNvV2AlMoOlh9/2TcwKHGlB2qbxzZJnGnIqxTy170U7a2nSBa9CNF2m6FJOFNdfY4e2NUFWEFqGOwWACExZUF+g9kqdagr4Oe3mu3WXV2/ASDOsoXeso8PFkyJIz1Um5RZ99qHXQ4VfIRBzwVoNX/+nBmunq8HdkeeMfDT2CPxHw4AxFirNNc3fr6+Cr7h3cYtII4ylVp0YljB17770yY1S1JcuXhh2ce1OlrP/HKgVk5/vduWHT1IrFtvg6ADBCoVMAD4xpA6W+DrCviGIYsFSDGjUH4G/mAhfj34WrmPQt+9zhLXtoS/uO/BukKNbvus1I9NFR9h0pYdnfbjxudW/Y3dlx+Epj768IGw1HvGteZFV/m8uUAK0iZAijVUatEx49WiM3n8WJncPE7CpNV0PVQ4clGQhvBaRlpquNcFQeUWD2kfvs4ZB8Kii9dUpTYc/f64+nP3yC++8w3xW9PAPumVaQIgFG31bLWtvYJf4HAtUEmcevC1NScKffe6dXa0MF5PD3Kl8P708y8IEDYN+W7adTZtfT2QfvwxffHe4QHE3tBW25rUHPANk/GYQHawfAU/Tj34UWnNKRe2v/H3a2rql68U8LXlIai2B6AcbdepdDBc6QWv37QH3ygMCIBQGEZWrpQa1RTwrZcMWsWggg8khVbvw27NcZQL8PqYVvirpYcZK40k1J5/IAq+9+U7Kn69BnVBOrZvlwAISR3jMmur4A/UN7oHSIqkTJnQbbVRUSnYaOWylkOxVy5+X9nHCfiICj038sRXbi97ONzteM16NQ4cFAChqXlcZm0Bn/GYQEVxac/Rg7VR2lbrpge5lv5jnTtejvY1My4TUaHTn5yDt6P5zIdrbs2tSlM/ffhAiGoel1lTwDes4oEASISoLbTSgF+piq+HcKutuFfqa9Zwv2nrdgGiQr8XRhufqR/72OUXSxAaB7vpwwdCVOu4TEOqpCN7jILkBYCc8tsfl3xMK/ib34z2HGmt3p8xpUWiRltwLvnUF8o+x1kSVGnGfbFLPvX5suMyR6O//sTm8fY/b2jk5kyZP3uGzD9zhv0xwG/ab++0pV2x6H1Vfc17Yf+Ec+XwGL7WgZCYZrdMzp1jdFXzSdXPwR+U9uovC4DkqTRBJw6iVr13aDuNVtzLhXENPV9/fI2rBUHrXtpkVfzX22041dLKvt52vLXHfl9/Hcd1l10sX13+Z4EHLqSLXkhed9klEhZt0yHgAyGaYI/LXF3Np9TSotMuAGIvar33I33tlk9WfE65sZka6nUL7kkXXyOXfvoLNY/YLEcP/H7inq8JkGTapgMgNIZhyCKpUtUB3/qHLBYAsacBP8q0FabSgVsN7Pc+9N1j3teqvrbi+BXqR9KKPodzkWRawacPHwhV1afqqwr4+bypo3raBECs6dz75rFNEnU6RaRS+4sGeu1P1sk6Z35gqdy68sGq++zrxeFcJB1VfCBUrXoGtppPqK6CP8j8eyAJotp7P5KGezfjAPVArlbyw6qk6yFcIMma+qM9MABIvIHqqvhVBfxaR/UAiJY4VO8dbsZmhkkPQM6fM1OAJBvDPHwgTIaRkXnVfEK1PfhU8IFhZqb6IVRR0DymydfDtdquoj3wc5Ysld/5k8/Ix+++z554Uyut4j90xy0SRRru137zSwIkXQMbbYGwVVXBd51Q7P77Av33gKNgNEocTR4/RvwyFO6/UNQqs8ceTak98RqEa50b72ZsZjX0okF/vTNOPlkWnJmzKvAzZGJz86i/P/13+fWuXfb9K1tel84398iBnh77c3R0ISMykQYZs98+bNvXOFkAhMLuw8/ljE43T3ZfgtT+e+bfA65FdQSln+05V3/unlH74LWCr8H/e1/+Ys3tLLq5s56Ar4F+8XlDFwp6weCWBvjWCTOHf42qXiEFEqVxoJuAD4RpqA9/lZunug749N8D8TeuMevbhUfxMqjRaMjX0ZXfuv0WuXLxBVKNb//wWfncqgelWhrO/+T9l8hV7QsJ50CdtIJ/aFybAAhFVX341TQR038PjFDINEimzHzorHVlPGiaEhXNY/1rz9G2lUr0IuCa2+6xx1+62UCrdAymjr6shgZ7PZyrE3hooQG80cRBWyBs7W6f6Crg27M36b8HjmOK9uGXCfjZjAwODEpUTBznX3uO9q/rtJtyVXyHs5yqUsjX2fbFi6zc0GDvZn4+gOpoH3620CuDmXECIBRtbvvw3U3RYf49kAjjmvyd/PPV5X/m+rka3MtV5qsN9/Nmz7AP8n51+ScJ94BPxh6pfSIWAA8Muqviux2T2S4AjjOYLV/J0o2xUaH999mMv78f7a1/6I7lrp+v7Tc6SnPkwdxqw71W7dd+86/pswd81sBGWyBMOu5mvpsnuvppb7j8xYC0KRjlK+JRmqQT1O9FR0f+4jtfd72cSsdovve6zxydla8Hat2Ge63Uf+/Lt1O1BwIypo8+fCBMViZf7OZ57sp5BhV8YDRxmoUf5PbaebNn2hV1tyHfGaP5g44X5BP33Ofqc7Tn/+ePfaPqiTwAaqc9+HoDEBJDFuQ3mK2VnlYx4Oe3mu0CYFQVW3SiVMEPuF1oaMtrdSH/ms/f4+q5Tr99rYuzANSuqW+vAAhRc+WzsZV/4mc4YAuUYlao4KexRafYUJX9/7Wq7AvFK0Ph/q8J90BIGgcOCoBQ1R/w3fb6AGlUqQc/m4nO+uewLjaG+uTvsA/C1ssJ9/TbA+EZ28ckHSBErhZeuZmZRwUfKGEwe0LZx5uy0ang+z1BpxLnIKxOyKmFVuyf+MrthHuE6j/37JWde45tUWkZP07enTtd0kJ78I3CgJgZf8fuAiipvdITyn535vNmKwuugNIqLXyJSotOVH4fuoBqYvP4qjfTDvXz03OP4L3w71vkJy9usu63WsF+n3Qfervkc+fmptm3ay46Xy54zxxJsjH9e+XwGL4fgZC06UHb3DlGV6knlL/8HrCq99EZ4w1ETqVDttqikzUMGTRNCVM2Op1CdquOBnWdljNy/n0pOlufcI+gaIj/26efs24dZQP9SJvzO+3bE/+yXqZNnSIL3zNbll/7fjndejtpmvr3EfCBEGVb7Rb6p0o9Xun1tXYBUJZW8cuNjWtqzEpv34CEKZuJTquQ0tGWrRNut0djVnL7Jz7KAisEotZgPxpt43niX/baYf9Pr7hQbrRuSQr6GvABhGdwQHLlHi9bn7cKjxywBSooVOhDjVIffpR8/O7K8+71QkDbegC/aSvOHy7/kqx8/Ed1h/uR9KLhw1+8X/75xVckKRoHu+0+fAChMKRCRs9U+PQ2AVBWf7al7ONRGpUZFY89s1Z2vLWn7HO0JUcP5gJ+01CvAXzk4Vkv6a/9if/1oPXPekaSQkM+gHBYRfj55R4vGfDtA7ZCwAcqqdSHP66JSRMjuZmko5V7+u7ht7v+9olAQ7deTNzywGOSBGOPMC4TCFFbuY22pSv4A4zHBNyoNElnXCMBv5ib6r0uxvrY5RcL4CcN99o+EzTty09CyKeCD4Rr+KDtqMq16LQLgIoGGmjRqYab6v1Xl/+ZAH7SSnoY4d6hIV8vMOKsYeAgffhAiModtC0Z8I1M+d4eAEPcjsoMU9/goESBm+r9dZddTGsOfKWHXaPQC68XGN+zgn5cZcx+qvhAeMputC1dwTfpvwfcKBiNldt06MO3ffuHz1Z8jo7FBPyih13v+tvvS1RoFf8/fTzc67fGAQI+EKL2Ug+UDvgGPfiAW/0NE8o+Pq6pUcLUNxB+BX/HW7vl+ZdfLfscqvfwm7bm7IxQoO4+1Gv/nuJqbB8HbYEQlTxoO2rAz2812wWAa/0V+vCjUMEPO+R//fGnKj6H6j38pME+ii0x2o+vc/jjSPvwAYRo/OgdN6NX8A0pOXYHwPEqHbSNwiSdwUJBwkT1HmGLcqU8rlV87cMn5AMhyozecVOqRaddALgWh2VXvf3ROGhbCmMx4SdthYnygdb1/77V/j3G0Zj++J4hAGJOJ3iMOhQnU+LZTNABqqCTdAqZ0lV6naQTdptOb1+44+yuWLSw5GNauV907jwB/KKTc6Iurm06Tf37BEBo2kb7YKnEQYsOUKW+hskytq/0CMjmMU2hhuy+gXAD/k3XLik5JvOryz8pgJ9+8uIm8VLL+BPk3bnTZG5umn3T9+da76uJ48fZ7zt0So5W5/Wm5wA253fat1/m37A+9rb9nGlTp1i/3jSJIwI+EB7DGL0of9xw7nzebDUKsl8AVKX57a0y4e1tJR/fd+iw/HpveCPltE1o7qlTJEw6SUcXXT32zNC4zEXnnm0frKV6D7+956O31tUC4wT6S8+fb93myelTvfle+qUV9PX3pb928UVB3OyZ3F5xXDAAX5hmt0zOnWN0FX/w+IC/1Ww3MhLeej8gprSKNeXAiyUf1+r9r3aFW+k6e9q7JJvJCJAmGqL/aPn/klpc8J7ZcvVFC+UPrFAf5wDut+7xZ8mhcW0CIHCmOSjn5uYYG4s/eHyLDhN0gJoMVJyF32BvtB00TQmLXmQ0j20SIE2qrdxrkP/TKy6Uay46326dQWUNbLQFwjM0SadCwDetJxkCoEq60VYXXjWWGRmnIb/nSL+ERf/ZBPzaaK+0VoJ37tl33KIkp//63cO92IiWahZbLb/2Mivct/PnWKUxffThAyEZdZLOcQHfyDBBB6hVX+OUsgFfw3WoAf9wn54AFLijU030cOY/Wze3IdE5dKnV3wveM0cQD9qK87XPXkfFvkbZQq99ow8fCJ5hyMSRHxutgt9GBR+oTX+2fJtO85hGQfTpSMW/ffo5ezZ5tZwJKbqdVMPi8mvfb4X9hYLwlGvR0Uq9/hlpSw7q09S3V3rHxnMSEBBz7SM/MFoP/qgbsQBUdmTMSVaZvPTG1nFN4QX8pmxGcidOFJSmFXvdKFpLsB+NVv3/4oHH7F/za5/9Eyr6IWkZP3pVWS/A/uHem6nae0RfvYznqi4g9o47P3vMOI183mwTADXTPvxyL1Hrwqswqvga7medNIkJOmXc9bdPyIe/eL9n4b6YBn39tfWfgeCN1k+vLTn/tPILhHsPje3bLQBC0Toywx/7035g9G1YANw70ji57ONBV/GdcK9z8HE8Dd9/uPx/2S05ftN/xvs+eYe9+AjBeffwAiqHtkz9/b3LOEjrMe3BNwrhLtQD0io74qDtsQE/Q3sOUK++CgF/4rjgptgQ7svTcP//WJV17ZkP8p+p1XxCfnC0Sq8HaPXgs07J0bfhjzH9fF0DYRgclEnF7x9znDa/zVxlGHKzAKhZdrBXpu7vKPn4YMGUV3f+RvxGuC/PCfc7QwraGjr//t6bPduICkTBobFt0t18lgAIlmnKqtwsY7nz/jEVfCvcTxcAdRnMjgu9D59wX1mY4V45lfxqlzABUaYbvQEEb+SozGNbdEx68AEvVOrD93PZFOG+Mj3sujMCLTL6e1jBwVskSONgN334QBjMY9vsjw34BgEf8MJAQ0vZx/2q4GetS3jCfXk6CjOIA7Vu6bx8/T0BSaEhH0DARmT4owE/nzd1hmarAKhbn4sKvoZxLxHu3fmLB74jUaO/J1p1kBRjjzAuEwhBa36DeTTHF1fw2wSAJ/qtCn4h01D2OeOayj9eDSfce/lrJtH3rGp5FFpzRtLf098+/S8CJAEVfCAk49/J8u8E/AGq94CX+hoqjMs8YYx4RTfUEu4r042yURWltiGgHg0DB+nDB0KQbXxnWM47AZ8Z+ICn+hrLjz+cOM6bgH/GlBZfD+0mxQv/vjWS1XuHtujQi48kyJj9VPGBEAwOSM55+52AX6CCD3ipv8JBW+2Vr7dfXsP95PFjBZXpYdag6IZUnXPv3Nxab12EAEnQOEDABwJmSNG4+6Ov6RuZY1fcAqiPHrTVPvxMmZeqtYr/m4NvSy1Om9RMuK/CCx6H53fnpsnc3GnW7XQ7xOvbE8ePs8N9Kbq9dueeffbmXH01Qe+d35f+GtdctFCAJBjbt1sOjWsTAMEpnoX/TtOuaVXwvR3qAaTeQLZFmgqlF79MHNdUU8A/eeJ4OXHCCQJ3fjkcqOuhwf2ai86Xhe+ZIxe8Z1bZIF+Kbq3V2wXvmS0jf3+nT51c068JRJH24QMIWNGozIbRPgjAG7rwqtxmx3FNjfYEnEHTFLc03OsN7mnVvBZOqL/0/PnHhXIv6asBQJJoH76G/IGGCQIgIOZoAZ8xmYDnhg7abiv5eDZj2NNveo70ixuE+9pszv9nVc/XYP+nV1xo3dqpqgM1GtO/l4APBKvNecMO+PaSq4IA8JibH246LtNNwCfc187tEimCPeCdBibpAIHTZVe5c4wup4LfJgA8VzAa7cO25dp0Jo8fJ2/s7yn76xDu69N9qPI5Bw32y699P8Ee8MjYI3vkQLMACFKrPRVzOODrkquMAPCBjsssF/C1Tad5TGPJKj7h3l86veZrn73O1x57II20Dz9b6JXBzDgBEJABu2jfORTrTSr4gF+0gl9JqUVVOimHcO8fDfX/tPILhHvAJ0190V0uByTS8NCchuJ3AHjPVcC3Kvgj6Yx7nXWP+o22bErbcZZfe5kA8E/TwD7pFaZEAYExhxbX0pgD+Ez78PsrHLbVCr6Oy3RouNcttfCGLqMqRrgHgjGmr7YRtQBqcnSbLRV8IAA6LrOxwuKXyc3j7KVXzWOaCPce+4Pz59l99uv/fYu9qIqNsUAwtAffKAyImWkQAP5zttna33FW3XC6APBNf9bFuMxxTdJzuE9yJxLu/aChnmAPBG9s3y7pHUubDhAE05RJek+LDhCAI2NOqvgc3Wo766RWyWb4tgSQHJVevQTgHadoT4sOEADtw9dRcfpydbHON3fLT1/eJJ1v7ZEdb+2WAz091sf22PcHeg5J18FDx/1a00+ZKhObm6V1wnj7Nm/2TGmzPjb9lJNk3pyZ9scAICrKjQkG4DFj6JCt0xTXKgB8tfvIGNm66UX5wbr1smnrduv2+qgBvpId1sWAyJ6j7+uvV2ze7Bkyf84MWXTuPFl83tl28AeAsDQOdtOHDwTHzvT22I7O7aYpADzX3d0lT3z/UfnJ2jWy+bWN9vtB04C/6Nyz5WOXXSyLzpsngB9e2WJdtG55XTZuycuvd+0a9ZWo4lef9JWnxdbX5fwzZ3ARmgL7J5wrh8fw5wwEwGybaWSMfN5sMwqSFwCeWb++Q1Y9cJesf7FDosQJ+7d/4qOEKtRFQ/vT634mP3j+BXn+5VdrejXKoa863XTtEl5xSrBDY9uku/ksAeA708zIDAI+4BGnWv/w6lWyc2enRJ0G/esuu0Q+dvnFAlTr6s/dI09b4d5r11mvNHEBmjy68G/vxPMFgO+GA/5Ws93IyHMCoGZPfH+1XbGPQ7AfSYPUFz/+UYI+qvKDdS/INbfdI37Rr0kN+kiOXZMvoQ8f8J9pFuQiAj5QB23FufuvlsvmzRsl7gj6qIa25Jz5gaV1teZUoq07T3zldqr5CaEVfK3kA/CVHfAzYjIiE6iWtuPcfc9yufajFyYi3Csd0/mJe+6zqrJ3228D5ehBWW3x8pNOmrrkU1/g6zEhmvr3CoAAGNJm5LeYS42sPCIAXNGq/a2fv8GTdhwNSfb8+uHRlvq+3uukEWfaSDGtlupkEifwvLLldXtaST1jN0uhRQKVPP/yJjuA+02/R9Z+80tU8mOOPnwgEKZpyo3aorPCyMidAqCihx+5X+6+d5nUamg84Ay5cvEF9sQQHRXoJQ3+Gvq1P1rD19DM/NrRtoNKLvnU5+0pOn7T75u13/xrFrnFmC782z2Fv0sAv5kFuYuAD7ikLTk6IacW9hx6KyRfseh9gQYUrew/+vT/J08//7O6wv6RF38kwGi+/vgauXXlg/bb+urTfztnniw4M3fcK1HFrz7pRahegFY7XlNHaX51+ScF8UUfPuC/oYC/zVxlGHKzABiV9tt/8s8/UPVMew01Gkh07F8UWgs0UH37h8/KY888K9Ui4KMUDeiPPbPW7sev5eJVP/eeb33X9QWoturolmbEU/f4s+TQuDYB4B/TlFUa8FdbAf96AXAcDffVHqR1gv1nPrwkku0EWkHVQFVN0Cfgw2/3PvRd++uyEn01TFt1EE+Hm06S/S3nCgBfPZIRACVp5b6acK/h4+ePfcPuW49qr7C+mvDQHbfIljWP2K8uAFGg3zMP3bG84vO0rUdfjUI8NfXvEwD+y1jV+4kC4Djac++2LUfD/Pe+fLtdWYzLpI/ioD/9lKkChE3bfNz02D/VsV4QTxmzXxoGDgoA/5imTNI5+K0C4Bi6ldbtgVqd7qFVe52ME0ca9LesWc1ITESCtrfpK2HlfOdHa31dsAV/jWEePuArIyMTadEBRtA596vuX+HquRpGfvGdbyRiPre2SFDNRxRUutjUcK8TohBPDYPdAsBfBHygiC6v0iVWbmgISdrIvqGFQn9tvRqxUICw6JScSlV82nTia+yR+vZzAKisQdfZCgDbqgdWuNpQq+FeK95+6Hxztz0v/MCIFoQzrPDddqr/rxRoyP/el+9wPdUE8IOG/HILtH69a5cgnrQPP1volcHMOAHgA1PaGgSA7Sc/WSNPfP/Ris/Tthyvwr22Gjy97meybngyiJtZ4Nrz33bqVHtplm7D9as9yPl3JOQjDPq1fe9DpR9/ZUteEF9NfXuld+w0AeAPAj4w7O6/qjyiT8O1F205617aZFfIy1UoS9m09XX79oN1Qy0KGvCvWHSBfPaPr/I87Pv1KgVQybzZM8s+rvscEF9NA/ukVwj4gF/owQcsT3x/dcXWHA3PT3zldqmHbu2cs2SpXPrpL9QU7kejQecbf7/G+nVvsDfVeo2QjzDo6NlKuySYpBNfY/qYhw/4iQo+IENjMSvRoFtrhVxD+Mfvvs+zUF+KtjUASTGxeXzZEK9nVaK6UA7laQ++URgQM0MMAfyg31ltAqSYm+q9bnz92OW1bX39+uNr7HYcv6uN+ntMwrhOAOkwtm8XffiAPzhkC7ip3te6BOrWlQ/aAT8ItV6AAEAYGgcOSq8A8AMBH6m2efNGV9X7Wirj2pLz2DPe98SPRmeG61hBIEkO9JR/1Wtic7Mgvpr66cMH/ELAR6o9vHpVxefUUr2vJ9xrT7FeUGj/sUODjvbxl2rzue6ySwRIEv1ar9TWRv99vDUOdtOHD/iE7yqk2voX15V9vJbqvc6NrzXcz58zQ37+2DdKPq4h/5UtOiLzhaNz8/X3R3sOkqbSGEzOmyTDmP69cngMf5aA1wj4SK31L3ZUbM+56dqrpBo6BlMP1NZKw7v27Zeata+hRm9XLr7Afl9DPqMCkUSbtm4v+/j0U6YK4k/bdAj4gPcI+Eit9evLV+81SM+fU37ZTjGtOHqx9VUP5V65eKGrnnr67pFUT3WsL/t4pUVYiAdt0wHgPRZdIbW0gl+OboethoZ7bZnxwl/c96AAaaWvSv10w6ayz2HnQzJoBV/78AF4i4CP1KoU8K9qXyhuaWuOm757PbC79ptfqvi8TVtfD2y8JhA1Tz//s4qtZ3peBclAFR/wHgEfqaTjMcvR6RzVtL+4ac3Rvnndhqu/bqke+2JBLMcCoqjS95OOheWQbXI09e8VAN4i4COVdr6xo+zj82a7rw5q9b5Sa46GkW/dfsvR92+6dokdUsrRcE8VH2njptWNsbDJMoZ5+IDnCPhIpUoV/GoO8Lmp3mtbzsiZ3Q/dcUvFOd7f+Ps1VPGRGjo5p9IUKv2eof8+WRoGDgoAbxHwkUqbX9tQ9vG2U92N4PvBuvUuqo2jz9LXj33mw0vKfi5VfKSFTqG6+nP3VHyeHn6nPSdZMmY/W20BjxHwkUrd3QfKPu72AN+3f7i24nPKbcLVVh03VXwgyda9tEku+dTnXbW61bJZGtHXOMBBW8BLGvA7BUiZnW90ln18YnP50K204vj08y+UfU6lTbga7t1U8XWhFZBE2uJ26ae/4GrErC6eo3qfTFTwAU91UsFHKnUf6Cr7eOuEZqnETeh2U210U8X3YoEWECU/WPeCzFmy1PXmZz34rt8rSCYCPuAtNtkilboPlg/4bqqElTZtuh3l51TxywWd519+1a7kV7oQAMKkr2qte+lV+xDsyK99/fp9Zct2+9zKd360tqrD4/prPfGV2wXJpX342UKvDGbGCYD6EfCBGmng0Cq+Bn1dzDOyxaCaUX5amaxUydSK58cuv1iAqNJXmpyFb3oxesbJJ8mBnh77/Vq3POuv88RXvkhrTgo09e2V3rHTBED9aNEB6qBLq752yydly5rV1u0Re4GVM99eF1u5NbRYq/zoP/rwEWU67al4m7NW6HUjswb7esK9jpitZmwt4quRcZmAZzJicsgW8IJWGLUSv/abfy27n/1e1e00lS4IKh3oBcKirTm3rnxQvKTfT4T7dKEPH/CIwSFbpFTLhNayj9e7XKqWXvlKLT36e9IgBUSNjrj0kr6aRbhPH+3BB+ANAj5SqWVi+YDv9A0HSS8Kpp9SfsGWHmAEokT77mttwRlJvwe0zU1fBaPnPn30oC1bbQFvZKwyfpcAOEbXweADvrpy8fvKPv7KltcFiApdUOV2zGU5Gux1Z8SvnlzNKMyUaxw4IADqYxbkQMY0he8mpM6009rKPu5VRbJa8+fkyj7+6127BIiKxefNs3c9VHrlqRQN9vr5GuwfuuMWxsCCg7aABwxD9jMmE6k0bVqbyIulHw+r171Sz/ErW/ICRMkXP/5Re4+DjorVUa76KlOpC2S9EJg/Z4Y9fcq5B4rRhw94QwM+LTpInUoV/M43w6ngV+o75pAtomioxeaSowfF9UC4nmPR28Tmoa3Qek+FHpU0DnQLgPpod06DmFbANwRIlWnTppd9PKxWGDcBiI22iDr9+hz6GuWgLKqjFXyjMCBmhgYDoGZWwGeKDlJp7lkLyj4eZitMpX7mMCb8AEBQaNMB6seiK6SS3YNfhrbC1DsLHwBQPSbpAHUxWXSF1Gppaa0Y8jdt3S5hoA8fQJpRwQfqp3PwOwVIoblnzS/7OEulACB4BHygTiYVfKTYwvMvLPv48y9vkjBUqtBPbOaALYDkyg4S8IF6ZaSBCj7Sae7c8hX8519+NZJ9+K0TmgUAkqqBgA/Up4EKPlJMJ+m0TGgt+xxd3BO0oQVAZ9v3o43DdOaKA0AS0aID1M+egN+53TQFSKFrP3KhrH+xo+TjGrTXfvOvJUz6KoLO5dd7vV25+AIBgCTbM7ldBjPjBEDVzLaZxtFNErrNtlWAlLn0kiVlA/6mra+HvlhqaGnQTAGAtNBlV0KPAVALzfRHv326BEihqz90fdnHNdw/9sxaAQAEp2HwbQFQk6KAbxLwkU46D3/h+e1ln/P1x58SAEBwDLNfANRgePx9pvgdII20TaccHVsZ1shMAEijjDkgAGpnB3zTFPZCI7W0TafSNJ2/uO9BAQAEgwo+UCOzuIJPDz5STNt0brxxWdnn6GHbrz++RgAA/mNUJlAbsyC/1ntadADLjUtvrvicex/6biQXXwEAABQbCviDVPCRblrFdzNR5xP3fE0AAP7Kss0WqIXJIVtghGWfXeFis+16WnUAAEA0HdOD30DAB6ZNa6vYi6+0VeeVLdsFAOCPTIEpOkBNTBZdAcfRXnwN+uVoq841t91rj88EAHgvwxQdoDaHiir4uZxBwAdkqBf/q19+pOLzNNxf8qkvEPIBAEBk5M4xjqngq04BYG+2vfGGyq06aQn5XMQAABALnc4b7wR8k4APOJZ99s6KrTpKw+97r/uM/GDdC5JU3/7hswIAACLOGCXgm1ZWEQA2bdV5/LvPVZyqo4Z68u+R51/eJEmjFzB6qBgAAESbWZADztvFLTr04QNFtIL/4N886eq50085SRadO0+S5pJPfV4AAEAMmPKK8+Y7AZ9Z+MBxtB/fzaHbReeeLUlzz7e+a1Xw9wgAAIg8U4qK9fTgAxVc/aGlMvesBWWf87HLL5YkoTUHAIDY2ei88U7AzxLwgVJ27uws+/i82TMlKfRMAa05AADEjDlaBZ8xmUBJ3QfLH1FpnTBekkIr97TmAAAQM4dGmaIzvOyKg7ZAin398TX2DQAAxEqXs+RKZY55iD58YFSVxmVqW0vcbdq6XW5d+aAAQNgGsuMEQBVGZPjMsY+9M14HwDtaJpYP+Dve2iVxpodqr/7cPQIAAOJn5D6rzIjHadEBRjH3rPllH3/+5VclrjTc66Fa+u4BAIitzuJ3jg34hXfG6wB4x7TTcmUfj+sWW8I9gCgapEUHqIZp/a9MBT9DBR8Yzdy5lSv4cevDJ9wDAJAYxxTpjw34WSr4wGguvWRJ2cc13D/2zFqJi2rCfZJGgAKIh8EMFXygKg1lWnRyOUMfpIoPjNDS0ioLz28v+5yvP/5ULKr4Oi3nvdd9xnW4X/vNLwkABMk0GgWAe8MZ/qjMKM8h4AOjqFTF16q4LomKMp1x/zt/cpPrC5Fv3X5Lorb0AoiHgtEgAFwyj+/AOS7gm6asEwDHufpD11ech68B+ts/fFaiRgO9zrivZs79Q3fcIlcuvkAAIGiD2RMEgDsjR2QqKviAS9qmc+ONyyo+73Or/kZe2bJdomLdS5vkvdf996o21Gq4v+6yiwUAwlCgRQdwzzx+j9XxAZ9RmUBJNy692dVW2/ded1NVgdoPTtX+0k9/oapJOYR7AGHjkC3gmpltkA0jP3h8wG8k4AOlaBV/2c13unquhuuP332f3ZsfJA3293zru3LmB5ZWdZGhB2oJ99Ghf476StBjP1xr/3kCaWJm6MEH3BockAMjP2aM/EA+b7YaBdkvAEq69iMXyvoXO1w/X0Pz7Z/4qEw/5STxiwZCDfTf+Ps1VU/z0d/XE1/5IgdqQ6R/dq9sed2+/XrX7uP+DLesecTXrx8gKvqzLfLbSb8rAFwxzW6ZnDvHOKbF3hjtmZ3bzbx11yYARtXd3SXvv+Ic2bmzs5pPk0Xnnm0fXNX7+XPqD9MaAp9e9zP59jPP2su2ajFv9gwr3N9OeAyZtnWVO7uhE40+djmvriD5jjROln0TzxcALpiyoW2Wce7ID5d6DUzbdNoEwKi0Vefx7z4n1370wqpCvoZwJ4hrS4yGa62at506VeZbb0+0Pjaxudl6rPm4BVOdb+6WAz09ssmq8G7ckrd+nU2yaevrUo+brl0iX/z4R1lmFQHzZufKBnyt7ANpMJil/x5wLTP6cJxRA75pyg5j1No+AMe0aW01hXyHVt+LA3+QNNB/dfmf0W8fIfPnzJDHnin9+NPPvyBfu+WTAiQdB2wB98zC8RN0VGbUZzNJB3DFCfl6HxfaHvTzx75BuI+YSjsH9LC2vmoDJN1AtkUAuGJms9Ix2gOjB3wm6QCuabj/13V5ufGGyjPyw6Q99mu/+SXr9tf020eQ/plUapV6qmO9AEk3wJIrwLXRJuioTInndwqAqtzxxZXyo6c3RK6ar6FRJ/ho1X7RufME0XXdZZeUffw7P1pb9YQkIG5o0QHcy802Okb7+KgBP5ezR+10CoCqzJ27wK7mf/XLj4Qe9J1g/6snV3OQNiauXLyw7OPOKFQgqXREJjPwAZfM0h03mZKfY8o6AVCTqz+01A76j//dc9bb19tTd4KiPfbairP72e8R7GNGX2Gp9OdVy54DBEcvwOYsuSHwBXdJUSDcA66ZIjtKPVZyVk5+u7nMenClAPDET9ausW+bN78im1/z7piLXjwsPL9dLj77NLn+/e0E+pjTrbX3PlR+c61euOmrM4gOvei6deXfyGPPPGu/r2cqtC2O78fqHBrbJt3NZwmAikyzILfkZhurRnuwdMDfZi4xDHlSAHhOF2VpyNew77yt9/btYNeoYzedlp+5Zy2w3p5u39u3uQvsj088uElOOPKGIN40KJ75gaVlq/QaGjU8clg6Gta9tEk+cc99VtV+zzEf1z0TX13OaNNq7J9wrhwew9c14IIG/ItK9eCXDvh5s9UoyH4BEAvjezul5dBrgvhzU8UfasX6a0F49CJM/5zKnYvQgK9BH+78pvX3ZKBhggCoyDS7ZXLuHGPURVcle/A5aAvES1/jZEEyaCCs1NqhC9I4cBserdq/97r/XvHPQC8A6Md3p2A0Eu4B9zpLhXuVkfKYhw/ERH9DCwfUEkLD/Wc+XLnqe+vKB1l+FbChXvsH5dJPf+G4lpxSz7/kU1/gYLQL/YR7wDXTHH2DraNswDeFSTpAnPQ1UMVPCq3iTz9lasXnXXPbPVSIA/LYM2vt8xG1vHJyoKdHUB4bbIEq1BPwrU/uFACx0dc4RZAMWsV/6I5bKj7PqRAT8v2zaet267/x5+Xjd6+suhKvF2ociHaHNkPANasGLx3lnlA+4GfLfzKAaNE2HSSHzsV3c0BTwz0h33tOO87v/MlN9pmHaugF2ve+fLt9yJZRme7w9xdQhZ7ybfSGVNC53cxbd20CIBZO2rdWMoUBQXK897rPyCtbXq/4PK0S65IzqsX1cTYG17pUTCcc6asv/Dm4N5gZJ3smtwsAV/JtM40Z5Z5Q6ZAtG22BmKGPNXm0EuymH9+p5HPwtjYa5nVEqfbZ6/SbasO9Vuq1Yq/jSwn31aF6D7hX6YCtqhjwrRo/k3SAGDlCH2viaFh84iu3u2r1cEK+BlW4U2+wV1q11157Zt7X5nATF0SAS6a4KL5XDvgFAj4QJxy0TaZ5s2dWtRVVg6oeDKUvvzQvgr1efOkrLFTt60MFH6hKxWxesQefjbZAvGTMfjlxfwd9+Amloxp1motbGjq/+PGPyscuv1gwpN4ee4dW6/W/LYdo60P/PVAVs22mUbFAXzHgq85t5gbrmQsEQCxMOfCiNPXvEyRTtSFfcQB3aPusVuqrnYgzkrbjfO2WT9qvqqB+b485TQ5MmCcAXDDkubYZxkWVnuZq7aUuvLKuBAj4QExoPysBP7muu+wSmdjcLJ+45z7XFWht1Zmz5Abrcy+W2z/x0dQEfa+q9Ur/m2mb1JWLLxB4h7ZCwD2zUPmArXJVwc9vMZcaWXlEAMRC40C3vKvr3wTJNnSgVvvs90i1NOh/zLotOi95lVMN8voqxw/WvVB3tV5pC46243zmw0tox/HBnkntMpgdJwAqMjMZ+cAZOeOpSk90F/DzZptRkLwAiA3m4aeDhvxrbrvH1Zz80Tg9+ovPOzvWVX2vQ70i2PuvP9siv530uwLAFdPMyIxczuis9ERXAV+x8AqIl5ZDr8n43k5BOmhveb2jMbWqf+WiC+yqfhwCrfbUa5jXuf9ehXpFsA/OobFt0t18lgBwpeKCK4frgJ/fZq42DLleAMSC9uDrYVukRz0tOyPpQVLtNdf7+XPCP0yqFfpXtmyXTVtft6v0el9vT/1IBPvg7Z14vvSxuwNwxTRlTW6W8QE3z3Uf8Leby6wnVze2AUBoGJeZXl5U84tp2J03e4YV9ufJfOt++qlTfQ39nW/ulk1bXpcdu3bbrUdaoffioqUUbU3SMaIE+2AxHhOoimlk5IbpOeNRN092H/Dpwwdih3GZ6aXVfA35jz3zrPhFQ78GYg3IetO3W5vHV+zld5ZvdVqhXavwB3p67I8N3fwL8iPpqxM6UUgvXBA8xmMCVTHNQTk3N8dwtYDWdcBXndtNXXjVKgBiYdzhndLa411vMuJHq98a9L3sUY8zpw3nikULI9F6lGa05wBVcd1/r6oK+PThA/FCmw4caQ76TosR1frooD0HqE41/ffK1aKrowzRlwUI+EBMFIxGGci2SFOBNp2002C79pvzjrbuPP38C54fUo0a56CwLgajtz5ajlC5B6phZrKypppPqK6CTx8+EDu06WA0Gu6ffv5n8u0fPpuYqr6G+CsWXWDP9L9i0fsI9RFGew5Qlar671VVAV/Rhw/EC206qESr+trCE8ewr1X6xefNs+9pv4kH2nOAqlXVf6+qDvj04QPxM/HgJjnhyBsCVKKV/U1bt8tTHevt+ygFfq3IO0F+/pwZMm/2TKr0McT0HKBqj1gB/8ZqPqG6HnxVkA7JEvCBOOkdO42AD1eGQvS8o9VwJ/DrPHq9abXfjyVTI38POmpTD8ZqkNe3nXvEX88JswWAazr/fp1UqfoKft5sNQqyXwDEykn71tKmA884wV/vNfQ798q5L8UJ6hObm+0w33bqVPttvT/j5JOpyidYf7ZFfjvpdwWAa6aZkRm5nNFZzSdVHfBV53ZTD9q2CYDYaH57q0x4e5sAQFi6mudZryieJgBcMmVD2yzjXKlSRmpgmvKUAIiVI020NwAI12H+HgKqMzSivmo1BXzraqKqWZwAwtff0MJYOgCh0cO1Zqb6o39AiplmQb4tNagt4DfYVxNdAiBWDnK4DUBIDo3LCYAq9QRYwc/ljC6ril/TPxBAeLSCX6CCBiBgerh2oGGCAKiCIR25c4yaCuq1VfBFZ/bQhw/E0aGxbQIAQTo0rk0AVEW31/5AalRzwLc+kz58IIbetn7QUsUHEBTdXMvkHKAGpnRIjWoO+MPzODsFQKwUjEY53MgkCwDBoHoP1KQzN8eouR2+9gq+MC4TiCvdbAsAQWA0JlCTDqlDXQGfcZlAPOlhW0ZmAvCbjsYczI4TAFWpeTymo76Az7hMILYYmQnAbz38PQPUois32+iQOtQV8BmXCcQXVXwAfqJ6D9TGNGWd1Km+Cr7+JgryqACIJar4APxC9R6oiZnJ1t8CX3fAl0b68IG4oooPwA9U74HaFSQCFfzhNp0OARBLVPEBeI3qPVAj3V47NIq+LvVX8IWttkCcUcUH4CWq90DNTMPwpvXdk4DPVlsg3qjiA/AK1Xugdl605yhPAr79UgJtOkBsUcUH4AWq90AdTNnoRXuO8qaCL96M9AEQHqr4AOpF9R6omWll6bqWWxXzLOBLg6wWALFFFR9APbRIQPUeqEODdy3vngV82nSA+OtqnicAUK3BzDjpHXOaAKiRh+05yrsKvtCmA8SdVt8OnjBLAKAaVO+BunjanqM8Dfi06QDx9/a4NilkGgQA3LCr92Op3gN1afB2IqWnAZ82HSD+Ckaj9IzjoBwAd/a1nCcA6uBxe47ytoIvtOkASXDIquJz4BZAJToWc6BhggComeftOcrzgE+bDpAMjM0EUI625jAWE/BAg/cLYz0P+LTpAMmgFXyt5APAaDhYC3jAkA6v23OU9xV8i2nIUwIg9npOmGVX6QCgGAdrAU+YhiGPig98CfjWr7paAMSeHrjtmsBsfADH2jvxfAFQv4L4c3bVl4BvvdTQRZsOkAzaqnO46SQBAEVrDuARn9pzlD8VfItZ8OclBwDBOzDhbGbjAxg+WMsyPMADvrXnKN8CvjTaJ4K7BEDsaavOgWZadYC0ozUH8ExXocu/M6u+BXxt0zFNqvhAUmibTu8YDtUBaUVrDuCpNblzDN8K4f5V8JXp/VxPAOHpbj6LqTpACtGaA3jKNAveL7cqZojPOreb+627VgGQCE39+2TKgRcFQDoUjAb5bevvUb0HvJNvm2nMEB/5W8EX+7Dt/QIgMViABaRL9/i5hHvAQ6bp/74o3wO+NMgqAZAo3ePPkv6GCQIg2Q6NbWOhFeAtU7L+F799D/jMxAeSaf+E8xidCSSY9t3rwVoAHvJx9n0x/yv4wkx8IIn0JXtGZwLJpH33OhLT5CIe8JKvs++LBRLwmYkPJJOOzqQfH0ieHkZiAn7onJ4zkhPwmYkPJJf24+vBWwDJoH33XLgDvuiQgARTwVfMxAcSa3/LuczHBxKgP9ti77sA4DnTzMjdEpDAAn5uttHBYVsgmQpGox3yOXQLxJdepOv3MQAfBHS41hFcBV/0ZIH/cz8BhKO/ocWelw0gfpxDtfTdA74I7HCtI9CAb/3TVguHbYHE6h1zGmP1gBjiUC3gq8AO1zoCDfj2YVs22wKJ1nPCLDvoA4gHvSjnUC3gqw4JWLAVfNXAYVsg6bomzGPTLRADOjFHL8oB+CbQw7WOwAO+VcXfyGFbIPn2aT8vk3WAyDrSOJmJOYDfAj5c6wi+gi96KSN3CYBE08k6ewn5QCTZE3MmnCcAfBX44VqHISHp3G7ut+5aBUCiZQd7ZcqBFyVb6BUA4dNwz8QcIBD5tpnGDAlBKBV8xWFbIB00RDAjH4gGwj0QGNPIhNexElrAlwZZJYzMBFJBZ+TvazmfkA+EiHAPBKsgsk5CElrAt0dmmuH0JQEInoZ8en6BcLDICgjc6jAO1zrCq+Ark5GZQJr0NU62R2gCCI6G+32EeyBIoYzGLBZqwM/NNjoYmQmkiy7BYqkOEAwn3OsraAACEtJozGLhVvCFkZlAGmUK/QLAX4R7IBSmORhu9V6FHvCp4gPp09S/TwD4Rw/UEu6BUHTa2TZkoQd8ZQqHbYG0aBzoZiY+4CNnWg7hHghcqKMxi0Ui4EvWPmzLyEwgBajeA/5hFCYQqs7pOSMSRetIBHx7ZCaLr4BUaOrfKwC8R7gHQhWZ6r2KRgVfsfgKSIWmASr4gNeONE6W37T+HuEeCE9nmIutRopMwKeKDySftudkCgMCwDtvj5lmH6g12RQNhCn00ZjFolPBV1TxgUSjPQfw1sETZsuBCWcLgFCFvthqpEgFfLuKbzJRB0iqMRywBTyhM+51K3TPCbMEQOhWR6l6r6JVwVdZu4oPIGEyZj8TdAAPODPudSs0gNBFrnqvIhfw9QqIKj6QPA0DBwVAffqzLcy4B6IlctV7Fb0KvjJltQBIlLF9uwVA7Q6NbWMMJhAtkazeq0gGfHvFrykdAiAxOGAL1Eb77bvHnyXdzWcxKQeIlkhW71U0K/iil0TRWRYAoD7ZwV5ppEUHqJrTb39oXJsAiJTIVu9VZAM+VXwgORoHuwVAdXS+vS6vot8eiKTIVu9VZAO+oooPJMPYI/TfA245LTk6356WHCCSIl29V5EO+FTxgWRgPCbgjk7J+a1VtaclB4i0SFfvVaQDvqKKD8Sb9t9nC70CoDzdSvvbSb/LlBwg2iJfvVeRD/hU8YF4Y3oOUN5Q1f532UoLxEPkq/cq8gFfUcUH4ov590BpTtWeg7RALMSieq9iEfC1is92WyCemgbovwdGOtI4mao9ED+xqN6rWAR8W1ZWCIBYaRzolkxhQAAMcSbk6Gx7qvZArMSmeq9iE/D1iokqPhAvTM8B3vH2mNNkz6QLmZADxFNsqvcqXgN2tYpfkKust1oFQOTRfw8MteP0nDBb+qx7ALEUq+q9ik+LjgxX8QtyvwCIBSr4SLPidhzCPRBrsareq1gFfFuDrLL+v0sARBrhHmmlwV6n49COAyRCPm7VexW7gG9dQXVRxQeij/YcpNGhsW12sNfpOGYmXl2wAI5ninw7btV7ZUgM5fNmq1GQvNCLD0TWlAMvUsVHaugBWu2zZwstkCj5tpnGDImh+LXoyHAV35TlAiCSMmZ/7MO9Och4T1Q2NBmnXQ5MmEe4B5LFNDLxXbQaywq+o/N1c4P12skCARAp2p4zqftlibXBQen/z22SbZ0imdZ3CVCMij2QeLGt3qtYNwiag7Lcurp6TgBEytgjCei/z2Yle+KpMtD5KzH2vCnZqacS9FNOD88eGpez++zprwcSLdbVexXrCr7q3GY+Z/1btAuAyHhX179K48BBSYLBvbtlcNd/2m8bjU2SmfQuyUycIkbTGEE6EOyBlDHlybZZxgclxmIf8PN5c4FRkA0CIBKyg70ydX+HJEl//ldivn3sBUtGW3emnCSZsScIkokFVUAq6VKrGXGcnFMs9gFf5beZqwxDbhYAoRt3eKe09rwqSWL2H7FDvvT3HfeYYQX87JSpYkxoFSNLdTfutFrfO2aaHB5zEsEeSKdH2mYaN0rMJSPgMzYTiIxJ3S/J2L49kjSFQwftfvxSjExWjJZWu08/M36CIF60Wm8H+6aTaMMB0kuXWl0U9+q9SkTAV/mt5gojI3cKgFBN3dch2UKvJFFxP3452qufnXLSUFWfXv3I6s+22JV6eusBiLbmFOSW3GxjlSRAYgK+6txuahW/TQCEonGgW97V9W+SZANvdEqh67eun29Y1XwdtWmcMIGwHwEDmXHSO3aa3X5DCw6AIrEeizlSokoW1pXXDYzNBMKThs21DSefLv2H3xbTurlhamvPoaEDuoT9cPQ3TJDDTScT6gGUEvuxmCMlqoKvGJsJhGfKgRdTEfLLHbp1Sw/nGuObJTNhEj37HtODsv0NLXKk6SS7BWcwwzIqAGUl4mBtscQF/HzebBsem8mBWyBgJ+1bK5nCgKSBHfK3b7Y33tZLD+hKs1Xd1559qvt162o+227DAQAXEjEWc6SMJIz+AZkFuV8ABEor92kJ98poHCMNp88SL5iFQTG7u+z+/v6tr0r/lk3W23m717/gshUobfS/S2Hvbun/z232fbGkHvIG4D1T5O6khXuVuAq+Gh6bqVX8NgEQiOa3t8qEt7dJ2gx27ZXBN/LiJ6fCnxlzgt3Hb4wdl6qZ+/pqidnTI4Ujh8Q8bIX33rftiyKHLhzTsxGOt8eeJgea5wkAVJCog7XFEvkTwroS68pvNTlwCwRoTAp670ejh2ZlcMDV+Mxa2WHWqvAPSpfIb4Y+pqM4ZdwJQ6Fft+k2NcV+q65p/Xc09VxDb2/JMD/q51kXAMXS9EoSgJol7mBtscSWgHKzjY7ObWYHB24B/2XM/lQcri1FZ95rL/7gb96UoNhB2LrZob+IHfazWbvKn2kcI6K34fejUPW3q/F6bsEK8fbbetMg33ekYpAvqe/YgK/jWgGggtXTc8ajklCJfo3XzMoNHLgF/JfmcO/ITj3Vvg8y5I/GGd+p4zkLozyuZwe02j/0dtPQ+87HlXUxYN+KP2f4+cf8c/pGTBBy3req5xrgTa2i671eiGigt98+Ir4YcdCZHnwAFejB2rslwRId8PXQRH6reT8bbgF/EfCHRCXkl2OH7OGgbUoy6EWEXlQYRRcmGvIZjwlgNEk9WFsscVN0RsrNNlZYd50CwDdN/XsFQzTkZ088VRCwEX33jf206QAYVT43086GiZb4gK90w60A8EV2sFcaBw4K3mGH/KKpLvCf2XvsOFHD7BcAGME0B+WDkgKpCPh64NY0mY0P+IHq/ej04G32tJwgGOaIrcJcdAIYxercHGOjpEAqAr4tKyus/+8SAJ5K63hMN3SEZuPMuccdWoX3RgZ8DtoCGCGf9IO1xVIT8HU2vlXFp1UH8BgHbMvTsZV2yG9sEvhn5IQeRmUCKGLPvE/6wdpi6angW3KzjDViSocA8ISGKCqllekIysbcmUMz6uGPET34fF0CKJLomfejSVXAVzobX2jVATzRQJXUNTvkW5X87OSTBN4bbUkWIR+ApKw1x5G6gK8vz5iS3NXEQJDG9u0WVCd7yumM0fTDKIu0mvo4AA6kXOpacxypC/gqN9NYRasOUL+mAfrva6FjNOnL997IUZlM0gFSzsp6aWvNcaQy4CtadYD66OHazIjlQnDPPnyrffknTBB4g0k6AIrst7LejZJSqQ34tOoA9WFKSf2cw7e07Hjj+Fn4fI0CKWWaBbk7ja05jtQGfEWrDlA7+u+9Q8uON0b24GsF3+BVJiB9rGyXm21lvBRLdcBXtOoAtWH+vbe0Zadp5rsl0zpFUKMRPfiqcZAqPpAyqW7NcaQ+4NOqA1SPcO+TbFYaTstJ9rQ2qvk10BYdc/DYcZm06QCpkvrWHEfqA76iVQeoDu05/sq2vsvuzaeaX72RbToNVPCBNFmd9tYcBwF/GK06gHtN/cwX95sewNVqfgO9+dUZOSqzn1GZQEqkcqFVKQT8YXarjmmHfABlZMx+5osHKKO9+XPmDU3aIehXVDhy7GhM7cHnoC2QeKldaFUKAb9Ibpaxxgr59wuAkui/D4c9aYe2nYpGtugo5uEDibc6rQutSiHgj5SVFdb/dwqAUY09Qv99WJy2ncY5Z7MgqwTz0PGvLo2hpQxIMlpzRkHAH8F6eafLLNCqA5RCBT98RxdkMW3neIODx03S4aAtkFimFe4/SGvO8Qj4o8jNNjpo1QGOlx3spd0hQnTajt2fT9A/hnn42IO2Y/q4KAWSyBR7JOZGwXEI+CXkZhnLxBC+aIAiTM+JJoL+sUYGfDbaAomUz800VghGRcAvwzTkA8LoTOAo5t9HmxP0G06fleoe/ZEBX7HRFkiU/WZGLhKURMAvY3h05nIBYGM8ZjxkWlrtHn09jJvGqTujBnw22gJJoSMxl9N3Xx4Bv4LcLGM1/fjAUECi/z5eiqfupKl9xzx8/Ncph8OBZNBMxkjMygj4bjA6EyAgxZgG/eL2nTRU9Qsjqvh8/QKJkLcy2V2Cigj4LtijMzP04yPd6L9PBm3fKa7qJ7ZXv/fYgK8bmHkFCog1HYl5kWYyQUUEfJd0DJMpXDUivaiAJotT1Xd69bMnny7GmBMkKQpHRmnT6WMKFBBTplmQW+i7d4+AX4XcTGOVaQp9X0gdwn2y2WF/yknSOGtuYir7ox20bRrg6xiIqdW52cYqgWsNgupkZZkUZLH1VpsAKUF7TnoMVfaHqvtmYUDMnh4pHNwvZm+vmEfelrgYLeCz8AqIpbyZkVsEVSHgV0l7v/J580KjIBusd1sFSAFGDKaTkWkQo6XV7ttXZv8RO+jHIvAPDtq/X71gcTgLr8wMP/qAmNhP331t+FuuBtoDlt9u3mWIrBQg4fRwIi06UBqW9XY08GtY1qBvVcvNQwfF7OuLVOg3ew6KMWnMMR8b27dLesdOEwCRp333d+dm0ndfCwJ+jbQfP7/NbDMMuVmAiOvu7rJvatq0NqkG4R6l2BX+8RNE9DblJPtjTui3K+ga/PWmwd+qpkthUIKkB21HHjTTZW3M0gGiT+fd03dfO0NQl87XzQ1iygIBImjnzk5Z9cAK+cnap44GfHX1h5bKpZdcZd2WVPw1Wg9uknFH3hCgXhr+RcO+Ff5lOPTbH9OLAet9W3/fO8/Xi4IyittvnCVeRlPT0cf04iMz/tjDwoOZcbJncrsAiLR820xjhqBmBPw65fNWFZ9+fETQ5s0b5dqPXnhMsB+ppaXVDvlXf/B6WbiwfdTnvKvrX+2qJ5AUuyZfQh8+EF354b77TkHNCPgeyG81242MPCdARGjlXsO93rulrTsLz28/JuxnB3tl6v4OAZKkq/ls+vCBaNK++4tys40OQV0I+B7JbzeXcegWUXHrbUvlie/XvrLBCfuXL/5v8sfnnyJAkhwa2ybdzWcJgGjRhaK5mcYKQd0I+B7KbzNXG4ZcL0CItGr/e4tz4pXWCePlikUXyKJz58mViy+w3wfijD58IHpMU1blZhnLBZ4g4HsonzdbDVOe49AtwrTqgbtk1f0rxC+Lzj1brrvsEll83tky/ZSTBIgjDfga9AFEgvbdn8u8e+8Q8D02fOhW+/HbBAiBVu+r6b2vx7zZM+zK/lWLF8qi8+YJEBf04QORwaFaHxDwfcChW4Tlie+vlltvu0HCoK07Wt2/YtH7qO4j8t4ee5ocaHZ3Ubp+fYesf3GddeuQza9ttCdTzZ27QG5cukyu/hBdmUAdzOHK/UaBpwj4PuHQLcJQqXqvh2eXffZOefiR++2g4ieq+4iygtEou6dcPOpjOmJWA/1P1q45GuhL0e+px7/7XNUL5ADYE3NuYZmVPwj4PspvM1ex6RZBcVO9/+qXVx+tOOqFgC7A0s/zO+wrre7rId35GvwJ/IiA37T+ngw0TDj6vaDB/ifPrikb6Eej4f5HT2+w90oAcIeJOf4i4Pusc5v5nPVfuV0An7mp3peqNAYd9rWdRyv8BH6E4ZUt2+X5l1+VX+QPyI//5Z+rDvSjufGGZXLHF3nRFnDFlOfaZhkXCXxDwPeZPVlnaNNtmwA+cVO9v/pDS60K/iNSiRP2tT1Be46D4AR+belZbFX6582ZyThOeKLr4CE70G/a+roV6jfZwV4/5ofiV8gAlMSh2gAQ8AMwPFlHQz6v38IX137kwoph/F/X5avuE9awr7+uLs0KKuw7NPDPnzMU+ufPyVm3mQJU0vnmbvmpFeQ3bsnbgV6DfVC0RUdbdejHB0oi3AeEgB8QK+QvGA75gKc0eGvAL8dt9b4cbWPQf9ZQZX9dYKM4HcVVfm3rmX/mDCb1pJyG+U1bXpd1VlV+09ahKr1f1Xm3dLqOhnwAx2FiToAI+AHKbzOXGobUl7KAEW69baldYS+nlup9JUfD/vp1gfTtj8YJ/fNmz7Rbe6afOpVKf0IVV+ajEuZLoR8fOA4TcwJGwA9Yfqu5wsjInQJ4QKvoeri2HC+q925+H0OB/yk77Add3S/mhH6t7muLj1b76emPD6cqv2PXbnnFutdbkG02pSw8v10WLlwsmze/Yl/YVqIH2hcubBcATMwJAwE/BIzPhFfCqt5XUjxHPOje/VJGBv/pJ59ExT8kWnnf8dYuO8h3vrXHensozP/aCvVRqcrr98yll1w1FOytmzMCU1vV3n/FORUvYpmPDwwxTVmVm2UsFwSKgB8SxmeiXm6q9xpMHv+78JcqO+08Wv2MSuAvpsF/6AJgqNI/33mfyn/NtBL/ayu4a3iPaogv5gT6uWctsO6XlJ1prxewGvIricr3HxAaxmGGhoAfEsZnol5uqvdRbBPQCqi28UQ58I/kXABo9V9vbadMPXrA9wx9/9T0HPbVcN51sOdoeO/qOWSF+T1yoKfHDvB6v8MK9FGnQV5bbtwE+tE8/MgqufveykXJO764Sm68gRdskUr54UO19S+aQNUI+CEaHp+p5Z02AargpnqvFUltz4kDDflOb7OGfy8WDwVNLwDOOPkk+15vE5ubj14E6AWBvu+8GnCG8/EQLwy0wu7QsK7BXcO5/ZgV0J339eYE+DgE99FoeHcCvVbV9W0vts66GU+rfvTDDfY/E0gRxmGGjIAfMmbkoxarHrhLVt2/ouxz4rx0R1sgNOg7wT+sKT1Bmm5dBDiKLwbqURza1YGeQ5GdPOMlDdPFFXodXemHavrxdXSmFxcVQAwQ7iOAgB8BwzPytZLP3/5wRav35UJFnKr3bjhtPU5Lj/67pyH0ozL9Wl/43nY7xM+dO9+z6rxbbvZQqCCmWQERsH843PMXdMgI+BHBjHy49cT3V8utt91Q9jlxrt67VRz6N7+2wQr9O2LRz4/aaGifdlqbXZWfdlpOFp6/2A73UaiKay++9uRXQj8+Es40TflgbpZReY4sfEfAj5D8dnOZ9QfCdhSUlbbqfbW0vWfnG51HW3uo9seLE+Sd1ppp06bbb0d93KSbfnz9d9NWHUZnIoF0kdXy3GzjfkEkEPAjhkVYKIfqfe1GBn/nFYA4HuhNAg25Q8F9ul2Rj0uQL0UvJN9/+TnSfbD815NetOh0K/rxkSDm8CKruwSRQcCPIEI+SnFTvWe5TnWKg76Gf/3vqxcCzsdRG6cSr1+LI0O8PpbEgKtToD755x+o+Lwbb1gmd3yRF2uRCIT7iCLgRxTbbjGSm+o9wcF7xRcA2uc/dP/ORYBznyZ27/uE1mPuNbw74yiTGuDdcNuP/+D/ftKevw/EGOE+wgj4EWaF/NVWyKfXAjY3Pb7ae0/1Phwa+jXoa4vG0NsHht/fL90HDtgXAsp5jvM5YSkO4VppP+Z++PBqS8vEo8/Tx9Ic3N1yOzqTfnzEnB6ofTQ3y7hBEEkE/Igj5EO5GcXHGL54Kw6ExRcB9dDqenEgJ6AHw20/vi7devzvnhMgZgj3MUDAj4HO180NYgprEFPs1tuWyhPff7Tsc6jeA9GhbTrarlPJss+ukGU3c+QKMWLKy22zjPMEkZYRRJ5pyIXWpRin/VJKq4GVwr1W7wn3QHToeRg3PfarHlgh69d3CBALpmwws/L7gsgj4MdALmd0EfLTSwNAJcs+SwUQiBptmXNz4X3r529gXCuibyjc65ZavlhjgIAfE4T8dHJTvdc+Xqr3QPToeQc352L0+7zShCwgVIT72CHgx8hwyNchy52CVKB6D8SbXoC7GV2rM/QffoQloIikvBXuP0i4jxcO2cZQPm+2GQXR0QttgsTSqp4utipHt2LqqD0A0eZmzK1W/HWqju4SACIib2bsyn2nIFao4MeQfqNZ33A6M7FTkFhP/OOjFZ9z49JlAiD6tFVHx5aWo334ugmXfnxEBOE+xgj4MUXITzb9Aa+ba8vRvvurP8SKBCAO9Pv1wb95suLz9JW7VQ+wGBShI9zHHAE/xgj5yaX9uJU2Yer8bADxof34Oj6zEp2hX+lwPeAjwn0C0IOfAHZPvilPsgwrObT3vlzA12qgLrYCED+65Xbza+UHomk/vp6vYUIWAsW0nMSggp8AdiWfEZqJoa05VO+B5Hrwfz/prh//Ux8QIDCE+0Qh4CcEc/KTo1L/rVb0Fp6/WADEk34PL7u58njbzZs3yt33LhfAd4T7xCHgJwghP/7cVO8vvWQJL9sDMae9+G778dev7xDAN4T7RKIHP6Hy28zVhiGMWIkZN7OytfeegA/En7bhvP+Kcype1NOPD7+YpqzOzTJYo5xAVPATyvqGXWp94zKGIQa0Orfq/rvsg7WVwv3VH1rKD3kgITS4P/jNyqMz9ULg1tvIYPAW4T7ZqOAnXH6rucLISOVmTwRKQ/36F9fJE/9YuSWn2FD/fbss++ydBH0gIbQNx02v/R1fXCU33nCzAPWywv0qK9xzwCPBCPgpQMiPBq3CPfzI/XaVvlKl3g0N+lrRZ9kVEH9u2vPU4999ThYubBegVqbIXbmZxgpBohHwU4KQH46hjbSP2ourvAj1o3Gq+ld/8Hp+8AMx5bYfX7/ftR9f23uAKlmFe7mbcJ8OBPwUyW83l1l/4CsFvtMWnIdXD1Xr9Qd3UPSH/9UfHKrq08IDxIv+faGV/Er0lbuvfvkRAapgmgW5JTfbWCVIBQJ+yuS3mUsMQ/QnA+UfjzktOA+vXhVoqC9l7twFcuPSZfbMfMI+EA/ai689+ZXosiwdmQu4sN8q3d+Sm2WsFqQGAT+F8nlzgVEQHd3QJqibPQXngbt8a8HxgtOvT9gHos9tP7626cw9a4F1MT/f/h7Xt/n+xgj7zYw94579OClDwE8pK+S3WSH/OSHk18TPav2Eca1y+Xs/Jj29XfL0z78tXtPK/qUXL7Gqf1fZbwOIBufMjk7X0i22tdCAr0F/KPDP51xOuuWHw32nIHUI+ClGyK+eX9V6J9S3n32VnDdr8dGPv7mvU17e9rw8+E932297jQO6QLg01GuY179XNr+20Zf2PjvsW1V+vbDXi3oO6KYC4T7lCPgpZ4X8VmNQnrS+EtoFo9IfuDoFRytrXgb7UqG+lJe2rZMf/vxRX6r6Dg0C2terrTxU9wF/OKHenrD17JrAz+wUB34u7BPIlOfMrHzQCvfhHwZDaAj4sOW3masMQ9igUsSPNhwN9Rrm/3jxZ12F+tH4XdV3ONV9u5WH3l6gLsUjc/2q1NeKC/vkYIEVHAR8HMWs/CF+BHsN81qp14q9hnyvbHnjFfk/6+63qvvP+xr2lf7g16BP4AfccTZWe7XcLgjFF/Z6TztPbDDjHscg4OMYaZ6VrwtmVj2wwq6yeUGDvFbqr7BC/SmT28RvTgtPx6s/kIO9/lcHCfzAsZx2vvXr14XSeuMHp7qv3+d8j0eWaaX7GxmDiWIEfBwnbWM0vT44q9X6T/7hHTW34Hih49WnZJ11CyrsK6Z3IG2cQK8tNz9Z+1TFLbT1KJ6u9SvrlTt99S5oelGvbTy6TI9WnshgDCZGRcDHqNIwYcfLYO9U6/XmZQuOF5ywH0Qbz0hOIJh71jl26CcUIM40wOvfF0EEeqV/l8w5bX7JgoG+aqdBX+/1ezvI0K8X9FrVJ+yHikk5KImAj5LskD8ojyRtwo6XwT4K1fpqOG08YYR9hzPBQ0P/tNOmU+lHJDmTbja/9srRHvqgWm5qPbOjr9Y5gd8J/0G8gkfYDwGTclABAR8VJeXwrVc99tWOt4wqJwh02NX9dRImDQXTTms72t5jb+gkKCAgxWFe79f/vMP36vxIfh3Ed4K+fp8HEfj1+/bGpcvYmu0f7be/n0k5qISAD1fifPhWf3ivuv8ueypOPaLchlMv/aGvQSCsVp7R2CH/rAV2tX/aaTmCPzyhwV1bbDZvfmXo3roFHeYdfoX6cooDv98X9vYSvQ8ttW7XCzxhmgW5JTfbqO+HGVKBgA/X4nb41qtxl6dMni4fWXxzoD+Ew+bM2neqflEI/MWciv/Q9J7pQ2+zoRNFnCC/c+eOoer8fwwF+TAn2zh7MDTULz77ykj8fVL8Kp5fPfz6famTeNiYXZe8Fe5vtMJ9hwAuEPBRlbgcvtVgr+049fwwj1t/vZ+2DE/tiGrgd2iQ0LYADfxDwf+dyr9+nAuA5NDvbbu1ZjjE73wjPxTmQ6zIj0YPyTqhPup/lxRf2OvND/p9uOyzK2jhqYYpG4b77TsFcImAj6pZIb9VBmVFFDffenGAlmBfmRP4X9rWEdrIvlocDfoTWu3Wn5YJk46+AsBFQLRoeNegvvONzqNBvvvAAbsS7zwWRVqVb7eq8+fNao9Mlb5Wfk/g0vadG5feTNtdadpv/6hkZTmHaVEtAj5qFqXDt/rD/u57l9szqWtFsK+d08PvHNwNanqHH4ovAobenn7MhYByLgS4GKie0ybjBPfu7gN29V3Du37snY/H4+vHCfRzTltg3wex1C4Mfk7gold/VPTboy4EfNTFCvntVsh/REJq2fGiz55g7w+nyv+rNzYeDf5JdDTsD18Q2PcTJ9oXBUMXAROPftx5vorrBUJx+Haq6BrKhx47cEx1vftg1zGBPQmbXU+1Avx5sxbZFXq9T2qgL8evsK/fGzqBh625st8K9x+k3x71IOCjbmH15Ws7zq2fv6Hml+oJ9sFz+vedKn+cK/1eKg77xRcDDueVg+M+b/hCohqlvl80jBcH8JHvR7Ulxk/OoVi9aS+93tJy0N4tv8K+VvSXffbO9AV9+u3hEQI+PJPfZq4Koi9fQ8ett91QczuOTsXRYH/Fe3k5OAqc0O8E/qA3cgJKK/Ma4PXvBw30Z9pvtwnc0579H/78254e0LVbd9IxfYf59vAUAR+eGp6Xr335vpS56pmO48yx13CP6Bst+L+1bwcVf9RF/x7QEH+mXZFfcDTQU5n3jjON5+/W3e/Zxbr26WtFP6FBX1ty7qbfHl4i4MNzfrTsaHuAVu1rmY6T5AVVafSWFR7etIJ+8QWAhn6q/ig2WpCnKh88/b78P1bQ73j1B55cnDtjNhN0IDdvZuQiWnLgNQI+fDE8SlNbdur+W7ieqr1W5lZ85G/5oZ4STvjXSn9x+HfeR7JoW03zuIlHg3txmw0X89Gi34frrJDvVVU/AUGfEZjwFQEfvhpu2VkpNainaq8/5P/iA/dxgBbHcC4AnIq/E/65CIgmDewa1k+1bs1WYD/TqsQ7gV7fJ8THk3Mw9+mff1vqFdOgT0sOfEfAh+9qadmptWqvP/C1x17bcYBajBb69e0e6+ZcHPT0HuBioEanDr+aVhzc9fvWqcY7oZ7wnnz6PaSHcvVW7/dTjHr0tSVHp+RsFMBHBHwEwu3223qq9roK/i8+8DXacRCot+wLgAN28B8Z/t8avtcLg3eev2P4Y50SRxOKKucayJ33J1hvNx99e+jmPK5BXvG9iVI05D/4T3fX/X0R4fGa9pQcycpdtOQgCAR8BCq/zVxqhXxt2TmuPKdjLzXcV1u112rfio88TDsOYuutolDjXCwc+/iOUT+vljB0aomQ7YRxhxPaHYRzBEHbdzTo17sYL2JBf78V7m/JzTJWCxAQAj4CN7JlRwP9qvvvsrfRVssZe8nL+QCQHM70nXr79LU//8Ybbg5vazSLqxASAj5Ck99qrnjtPzbe+clPfaDqLZl6iFar9noPAEgmfZXqW1ZFv56gH9JBXBZXIVQEfIRtgXV7Uqo4gKsVe5ZVAUB6eBX0H//uc0G07eTNgtyYm210CBCSrADh2mXddK/5JBkK+yVptf7rf/4jufTcDwsAID20DVMHKVz+3o/ZE61qmaWv7aAPr75fdr6xQ+aetcCPth3nIO1HcjON/xAgRFTwESVLrdudMko1X3vtda49AAD1VvR9aNvRg7Q35mYZawSIAAI+oqbNuq2wbvbfukzIAQCUopX8rz15S81Tdzxo2zGt/3WYWSvcc5AWEULAR1Qt++D7Pn7nTVd8qZUJOQCAcuqdo1/jtB020iKyCPiIrBdW9rY1Go2PWG+2CwAAFdQT9LWKf/v/uE8uvWSJGEbZeETVHpFHwEfk/WJl3zLDyGhvPqV8AEBZGu7/z7oH7FstdEnWzTfdIaefnhvtYar2iAUCPmKBaj4AoBr1HMTVav7NN91pH8IdruZTtUesEPARK/93Zd9SreabVczNBwCkVz1tO1rN/+xnbt9/+rQZVO0RKwR8xI5W87OSXZExMoGuJQQAxJeGfL1VwaolSYd1u9G6dQoQIwR8xBbVfABANbSKf9ff/ambsZr7ZSjYM9cesUTAR6xRzQcAVEvbdr71T/fIG/vyIx/Sqv391u0u69YlQEwR8JEIP1/ZtyBrZJ6kmg8AcGPoEO49w4dwNdeLpn2t2ncIEHMEfCTKL1b2rzAM404BAMCFJ3/20P6/+oc/15maKwRICAI+Eoe2HQCAC/Yh2qyZvfGc5Yy+RLIQ8JFYHMIFAIzG1HYc07zxd5Y3dgiQQAR8JB5tOwCAYftN03ygQRpWWVV7DtEisQj4SAXadgAg1WjHQaoQ8JEqtO0AQLrQjoM0IuAjlX6xsm+ZVc2/maAPAIllt+NYwX6FAClDwEdq0bYDAIlkWhX7+7PScBd99kgrAj5ST4N+o9G40npziQAA4uy5glm45b3LmzYKkGIEfGAY/fkAEFfGRtMsLKfPHhhCwAdGIOgDQGx0ZQ1Zds7NDY8KgKMI+EAJOj8/YxjXE/QBIHK6TNO8n3n2wOgI+EAZHMQFgEgh2AMuEPABFwj6ABAuQ4zVGTNzF4uqgMoI+EAVCPoAECyCPVA9Aj5QA4I+APiuwzTNu5iMA1SPgA/UgaAPAJ4j2AN1IuADHiDoA0DdCPaARwj4gIcI+gBQNYI94DECPuADgj4AlKeHZwtm4VGCPeA9Aj7gI4I+AByjS0zz0ezQHPtOAeALAj4QACfoZ43MYjbjAkghFlQBASLgAwHSoN8o2XbDyNxJ0AeQAgR7IAQEfCAk/3dl31KCPoCE6sgasloK2acI9kDwCPhAyH6xst+q6Bt3Wm+2CwDEGxNxgAgg4AMRwYFcADFlH5y1Xo1cQ7AHooGAD0QMffoAYoL+eiCiCPhAhGmfvgxV9NsFAKKBNhwg4gj4QAwwZhNAyOxqvSnmmvcub9ooACKNgA/EDFV9AAHqEMNYky1kHqUNB4gPAj4QU1T1AfiEQ7NAzBHwgQSgqg/AAx1iFh7NSuMaqvVAvBHwgQQZmsDTsMwwjKuo6gNwgUk4QAIR8IGE0gVapphLM0bmKuvdVgGAIbTgAAlHwAcSbsNKs3VQ+pfQwgOkHi04QEoQ8IEUcZZoEfaB1GAKDpBCBHwgpeywn2m6SkxZKmIuEABJoYuo1jVIw2or1HcKgNQh4AMg7APxR6gHcBQBH8AxCPtAbBDqAYyKgA+gJHr2gchxeuqfItQDKIWAD8CVorCvYzfbhdGbQBD0YOxGpt8AqAYBH0BNnDn7WSOzmKVagHesH8ydpmk+pXPqG6RhI6EeQLUI+ADq9vOVfQsymexiMc0lQisPUK2hKj2tNwA8QsAH4CldrDUgAwuGtuhm53NQFzgeVXoAfiLgA/CV07tfsCr7tPMgxboMMdaY5uA6eukB+I2ADyBQdjuPyAI9rGv9BbSAwI+EGgr0hmyk7QZA0Aj4AEJF4EcSaMuN9f8dBHoAUUDABxApQy09jQtEzHYxjPnCoV1EkqGjK9dZX6cbs9LYQaAHECUEfACRpyM5jUxmvphmO1V+BK24Om8WCq9wKBZA1BHwAcSOM6nHerPdsKr8hH54xZ5uMzSyskMK5o6sZDsI8wDihoAPIBGc0O9U+q2/3toY0YlyiivzhHkASULAB5BodnuPGK3v9PTbbxP8U+RoVd40d2jPfMF6u1EaOwnzAJKKgA8gdY5W+62wb1ph3xgK/m0E/1jrsn6gdRHkAYCADwDHsMJ/mxX+2+xWn0IhZ1X9pw+Hf+smrYIwWUHd6LR+cG00zcIBDfEima6sZDcyxQYA3kHABwCXtPLfL/1tWvnXCwCzUJg0VP2XVusv0zYO+tZnuJXGCvBGpx3gM5m89sYXpNBJJR4A3CPgA4CHjrkIsKr+phht+vGMkZluDr0KIMMXA/pqQNJfERhum9Fgbmpw73onuA8esD7e2SANnfo8wjsAeIeADwAh0pYgvde2IL03hi8CnAsDQ18dMDIThz5mHnNRYIzyikGtryIMTZQ57tcq/liXIUMhXEO6abfL2L/fzuHfr30/HNiFlhkACM//D4Zn9tNwpj2aAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/public/images/landing-new/avatar-3.svg b/public/images/landing-new/avatar-3.svg
new file mode 100644
index 0000000000..0571e9f0ed
--- /dev/null
+++ b/public/images/landing-new/avatar-3.svg
@@ -0,0 +1,9 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="28" height="28" rx="14" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1676_1596" transform="scale(0.00131579)"/>
+</pattern>
+<image id="image0_1676_1596" width="760" height="760" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAL4CAYAAAAOIoPjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAMNpSURBVHgB7P0LnFX1eS/+P2sYUDTCQEzTSIBNQ71EOQxCaaOJM5g0QXPkYnoaghYYOIo9vwgzRHNep1pu0ZxfxTiDev4NJDpAU0J+bYQhjWLahBm8tKEgQ4fES8lhg0HTXHDA6hiBWf/1WXsWbobZ3+9ae6/7+rzz2pmBvVGBuXzWs57n+RpCRESRMZtbc3h7SsR+a/a9NaQ3V3iFUVNlGMP7nquRwsN6Xmr6ftxfTsqT1/xct/Xv7MY7vaZ53Pqv6S78N1Xl+/577LfVfW+Npoa8EBFRJAwhIiLfWIHdDuEI7Ajrg6pkeG+vOQ4hHYHcKPy8E9RrJN26+x55/AAXAb1m72G8jwsD/Nj6s+gebL21Lgi6hYiIfMGAT0TkEsL7SSugV1kPo0rGFgX3nLz3oPLl+x7dptm7v6qq6o3eXtnPiwAiIm8Y8ImIiqBl5rRIba9dbTdr+9pjavtCfNor7nHX3Vf1z5umebiqyjiEC4DqQvjPCxER2RjwiShznEq89W4tQrxhGGPxvmSjbSa1rG9onYXw37vfkCq8322F/05W/okoaxjwiSi1FEE+J5QZfcG/26r6W8HfaLdbfpoa2oWIKKUY8IkoFRDmT4vUozdeTLulpl4Y5EnBqfgbhrT3tfqw2k9EqcCAT0SJUxTmJ5qmXZFnVZ78khcEf7N3v0hVO0M/ESURAz4RxRrC/CkrwFdZYZ6VeYpIXhD0+yr9bO8horhjwCeiWMEWm5Oozhc22NSZheo8Udy0Oz39gwpV/rwQEcUEAz4RRQqBvrdKZrI6TwmXtx6dYpjbenuN/UOaGjqFiCgiDPhEFKp+gX6WcC0lpVNeGPiJKCIM+EQUqL5VlbMGGVLHQE8ZljfQ1mOY7YN6jQ629BBRkBjwichXzlCs9d4swzBmCltuiM6BFZ29ptlhvbeNm3qIyG8M+ERUMaftxjTtCr1zIiwRudduGLLtdK90sJ2HiCrFgE9EnrFKTxQou52n15SNXMlJROVgwCciV5xe+ipD5gur9ERhQetOO4Z12btPRG4x4BNRSf1ab+qFiKKGsL+BYZ+IVBjwiegsfaF+vhXq64Whnii2DHsNp2yo6pU2hn0iKsaAT0QM9UQJx7BPRMUY8IkyiqGeKJ0Y9omIAZ8oQzAo2xfq2VNPlA3s2SfKIAZ8opTrt/2mXogoq5yw38aDtYjSjQGfKKVONrfWI9SbYlfrudKSiBzd1jf/bdyzT5ReDPhEKdLXgrPUNKVRGOqJSC9vmmZbtRgtbOEhSg8GfKKEYwsOEfnEbuGpXrpwoxBRojHgEyUUWnCseD/LMAwEe1bricgveSsctFeZsopVfaJkYsAnShBuwSGikLGqT5RADPhECfBuc2vtoCqZyd56IooIq/pECcKATxRjaMMxDFkhrNYTUXywqk8Ucwz4RDHDTThElBB5K+iv5CFaRPHDgE8UExyaJaKkssLEBrbvEMUHAz5RxNiGQ0Qp0m7dfVzFA7SIosWATxQB7q4nopSz23fYp08UDQZ8ohCxv56IMoZ9+kQRYMAnCgGDPRFlHNdsEoWIAZ8oQD3NrblqMRs5OEtEVMCBXKLgMeATBQCDs6aYC6oKwZ6IiPph0CcKDgM+kY+4EYeIyBsGfSL/MeAT+YDBnoioMgz6RP5hwCeqAIM9EZG/GPSJKseAT1QGBnsiomAx6BOVjwGfyANsxRkk5koOzxIRhYNBn8g7BnwiFxjsiYiixaBP5B4DPpECD6giIooXBn0iPQZ8ogEw2BMRxVreMGTDoKUNq4SIzsGAT9TPu82tC6oMaRYGeyKiuMuLYa6sXrpwoxDRGQz4RH2wGQfB3hSpFSIiShIGfaIiDPiUeVbFvravYl8vRESUZNsGmdLE/nzKOgZ8yiy7z96QFVbFvlGIiCg1OIhLWceAT5l0em3rCg7QEhGlWr7X7F07pGlRixBlDAM+ZUrfCbSt1rs5ISKiLGB/PmUOAz5lAg6qGlwI9vVCRESZw7YdyhIGfEo17rMnIqJi1l3cldyfT2nHgE+pxXYcIiIqgW07lGoM+JQ6bMchIiI32LZDaVUlRCmC7ThWuN8nDPdERKRhiiw4bcghfO8QohRhBZ9Sge04RERUoXyvKbOHNDV0ClHCMeBTovGwKiIi8hPbdigNGPApsU41t86SQtWe23GIiMhPHMKlRGPAp8ThEC0REYWB1XxKKg7ZUqKcXtu6lEO0REQUhr4h3J2n1j4+X4gShBV8SgRW7YmIKGLtg0xpYDWfkoAVfIo9Vu2JiCgG6q1q/r53mx/jUgeKPVbwKbZYtSciophiNZ9ijRV8iiVW7YmIKMZYzadYYwWfYoVVeyIiShJu2qE4YsCn2OBeeyIiSijuzadYYcCnyPE0WiIiSgNW8ykuGPApUiebW+uNQtU+J0RERMmX7zVl9pCmhk4higiHbCkyp1tam61wv1MY7omIKD1yVYbsO722dYUQRYQVfAodBmmHGLLVFKkVIiKi9MoPMmUaW3YobKzgU6hw3DfWXzLcExFRBuSwThPf+4QoRKzgUyg4SEtERFlmBa6WvgHcbiEKGAM+Be7d5tbaKkO2CnvtiYgo29iyQ6Fgiw4FCifSVnGQloiICNCyc4gn4FLQWMGnQKAlx/oi1my9u0CIiIjoLH0785vYskNBYMAn32FLzmBW7YmIiHTYskOBYIsO+QotOdiSIwz3REREOvaWHbbskN9YwSdfcEsOERFR+bBlZ1BjQ5MQ+YABnyrGg6uI/JU/9ms53vP2mbfdZz167Ncctp4rflv8a72oGXqB/Sg2duTFZz0/3H7N0DOvy1nPD+/7dc7zuaJfQ0RlY8sO+YIBnypysrm13iiswKwRIlJyQvr+o0fOBPj8sd/YIR0P5/mkQtjHxYHzNjfy/XbwH9v34EUAkSt505SGwU0N7UJUJgZ8Khv67a0vQi1CRGcgoCOsI8Tj/c6jr54V6LNu4qgx9gXAxFGj7cCPHzs/R0TvsYpnKwctbVglRGVgwCfPuAKTqACBfdfBl6wQf8QK9b+xgzxDfHkQ8guBf7TUjb+coZ9IePotlY8Bnzxhvz1lkVOV77DDfKEi77TUUHCc6n7d+Muktu99ogxiXz55xoBPrvX127cKV2BSyhVX5jsOvmwHeooe+vhR3Ufgx1v29FOG5HtNmT2kqaFTiFxgwCdX2G9PaYbK/P6+MI/3WZlPBoT8mRMmnWnpIUq7XrO3aUjTIn4vJi0GfNI63dLazP32lCZOoG/r2ndmGDZpRl6SK3p/bL/nxoobx147fM7P9bzZbT2OF72fjNZfVPcR9pfUfZqVfUo1Dt+SGwz4VFLfMC1WYNYLUYKh5WZ71wuxDfRDL6qxHwjmeAx9X40d4As/P/zMc1Ac7MN07LV839vCRYFzIYCfx/vHXj9ceGs977w2KqjmL6n7Y7bxUJq1DzKlgX35VAoDPg0Iw7SDDdkp7LenBHJ2zbdZoX67Feqj3mzjBPRRl008E97P/Lgv3KcNwv7Rl/efFfqPvrL/zM+HZd7Uj8v8qdfaYZ8oZTh8SyUx4NM53m1ura0qhHseXkWJEYcqPYI7QvvIDyG8156pyEdVdY8zhHyE/oN7Ouzg71wMBAUtPMunz7TC/seFKEU4fEsDYsCns5xa+/h8MY0NQpQA6KV3BmPxCEtxRX7UpbWFt33VeCqfXeW3gr4T+vHWbwj6CPnzrKo+23coLTh8S/0x4NMZp9e2rjBNWSlEMeaE+k27nw2t9QbhffzkOrsq74R5CgdCvv3Y2+Fr4GfQp7Th8C0VY8AnGzflUJyFGepRhR8/pa4v0LMyHydo4UHI79rZZgX+Xb4M8zpBH0O5PDmXkg4n3w5qbGgSyjwG/IzjphyKK/TQP9zxj/agbJAHTSG8T5g2w261wVv2yycHwv7u7Rt9Cfvs0acUwYad2UZTQzJ23FIgGPAzjJtyKG4Q6lGlx6BsUD31xRV6Bvr08CvsI+g/sehOHpxFSccNOxnHgJ9RDPcUJwjzqNYHdYqsE+jtt9aD0m339k2y+3sbK+rZx3pNVPTZn08JxpCfYQz4GcQ1mBQHTgvOwx0/8D3UO2034yfX22/ZQ59NqOTv+PpqK+xvknKwbYdSgGs0M4oBP2P61mBilRYTD0UCVfrVO9p8b8FBiJ960zwr0M9klZ7O4gT9ctt3WM2nhOsWUxqqmxq2CWUGA36GnF7butQ0hXtyKXRBVevRP49Qz9YbcgPhHu07HZsf9nyoFqr5j89dxBNxKbG4Kz9bGPAzgjvuKQqo0mMLzqbdz/kW7BnqqVKVtO4snz7LruYTJRF35WcHA34GMNxT2Pxuw2H7DQWh3KCPKv5jVjWfLTuURAz52cCAn3I8wIrC4rTh+HUYlTMoO/Wm+Qz1FCi07exYt9pTfz5adn74xf/JkE+JxJCffgz4KXaqpbXVerNAiALkd389wvyE+pkydcY8br+hUKGaj6DvFk6+RbvOkrpPC1ECbahubGgQSiUG/JRiuKeg+RnsEeTr5i6xW3BGXTZRiKKCKv6jt33KUzWfffmUYAz5KcWAnzJmc2tNryE7TZFaIQoA2m9W79hmD85WCtX66YuXswWHYsdrNZ8hn5LKCoKdVYUDsbytlqJYY8BPEYZ7CpJfwZ7VekqKrp1tsvXBL7mu5mNfPlZpEiUNQ376MOCnBMM9BcWvYM/eekoiry07CPkPzf6C3Z9PlCQM+enCgJ8CPc2tuSGGbGW4Jz/5GezZhkNJt3XNMvuALDcmjhpjb9hhyKeksULhPivk32yF/LxQojHgJxzC/WCrcm+9mxMiH2BgFjvsMTxbLmdv/dQZ89mGQ6nhpS8fu/IR8okS6NAgU65nyE82BvwEY7gnP/mxFcfpr6+7ZQnbcCiVdm/faPfl97yp72JgTz4lGEN+wjHgJxTDPfnJqdgz2BPpHX15vzx62ycZ8intGPITjAE/gRjuyS8dB1+SRZsfK/vkWQZ7yiovw7dcoUkJxpCfUAz4CcNwT35AsEfVHm/LMfKSsfbgLHrsibLKS8jHZh2eeEsJxZCfQAz4CcJVmFSpSgdoGeyJzuYl5GPoFsO3REnTt13neq7QTA4G/IRguKdKYYAWay/L6bNnKw5RaW5DPtZm7rl7leRGXixEScOQnywM+AnAcE+VqKTPnsGeyB23g7djrXC/1wr53JFPScSQnxxVQrHHcE/lQKV+4eZvyicf/SvP4R5hHq04y79/UKbfsZzhnkgD5z0seui72tcdtj4XccFNlERWFplkZZIfCcXeIKFYO9XS2mq9mS5EHqAd53OPPSI/Pvx/xaupM+bJ/P/3b2XCtJky+LzzhYjcGXlJzr4Yfun5p5Wve/mXr9sV/D/MfUSIEuhDy6fPGrt6R1ubUGyxRSfG+sL9AiFyaf/RI7Js67fL2o4zfkqdXbXHWyIqn9sTbzl0SwnXWt3YsFAolhjwY+r02tYVpikrhcgF5xRaDNF6hc04c1c9zmBP5KPNyxfK7u9tUr6G/fiUdFaIbB7U2LBMKHYY8GOI4Z68KHeIlgO0RMHBsO2aOVO0m3V40i0lnGkYsmrQ0oZVQrHCgB8zDPfkViU77dFfP/uur9k9w0QUDIR7hHzdZp3H5v53mT/1WiFKKIb8GGLAjxEr3C+1wn2LEGmUW7VnOw5RuHZv3yibV6gr9NyPTylg9pq9y4Y0LWKGiQkG/Jg41dw6y/rb2CpECuVW7Z12HKy8JKJwbV2zTDo2P6x8DYZtMXRLlGCmGGZD9dKFG4Uix4AfA+82t9ZWGbLTepeN0FQSNuQstKr2eOsFqvVzVz3GdhyiiLjtx39s7iKZP/XjQpRgb/Sacv2QpoZOoUgx4Eesp7k1N7gQ7nNCVAI25CzbutnTr0HVHn32U2fMFyKKFk66XTNnsvI1aNU5uHwNt+pQ0r0xyJSrjaaGvFBkeNBVhBjuSQc99jiwav3zOz39OhxWdcf/+b7k/ssfCRFFb9jFv2u/Pbi3o+Rr3jl10nqcks9cMUGIEmyoacjMVZ+Z1bbq6bZuoUiwgh8Rs7m15rQh+4Thnkpo63rBHqRF371bHKIlijdU8VHNV+EBWJQSh/oq+Qz5EagSisTpwkBtToj6QaDHabSo3HsJ9xiivXvLXoZ7ohjDBbgOBumJUmCclXWeEIoEW3QicLqltdl6M0eI+kFLzmfXPSTbreq9W6jaL3roCbn2vy2WweedL0QUX25adQ5bXwfQh/+HuY8IUcKNWzF91nDrovVpoVCxRSdkPMiKStm4+zn50tbNnqr2OLAKG3J4Ei1RcrjZqsOBW0oRHoQVAbbohKjvIKuVQtQPWnIWbf6m63Bf2JDzkFW5/y7DPVHC4HMWF+Yq+FpQzinVRDFkWNlnxam1j3OlW4hYwQ9J3677fUJUxNmS42W3PffaE6XDo7d9Ug7uKd2qwxNuKWXMXlOu5o78cLCCHwKsw6ziKbXUT8fBl+RTj/6Vp3CPQdovfuOHDPdEKaBrr3NOriZKCcPKQj8yrUwkFDgG/IBx1z0NBAdXfdIK96jgu4FBWgT72Xc/JESUDrhQx0W7yqbdz9rFAKKUGHG6EPLZWxowBvyAWeG+VRjuqY+zAtPLqbRoyeH6S6J0qrtliXaOhlV8ShmuzwwBA36AsDHHelMvRFLot0fV3svgHAZpUbnnIC1ROuFzW1fFRwWfVXxKmWmnW1p5SzpAHLINSN/GnBYhsqDPHsO0XlpyeCItUXas/ux45dpMnGyLE26JUsTsNXuXDWlaxKwUAFbwA4CNOQz35MB+ey/99gj1qNoz3BNlx/TFy5XPs4pPKWRUGVUPnWxurRfyHQO+z7gxh4qhd9bLfntuySHKpqkz5mk/79mLTylkGIY8zs06/mPA9xGmwrkxhxwYpl29Y5ur1zoH33BLDlF26Q6/QgXfy1pdooQY12vIE9ys4y8GfB9ZH6AYqs0JZRqq9ei3dztM66zAnDqDh/wRZRna8nRV/LUd/yhEaWOKTDptCCtcPmLA9wk25lgfoI1CmeZsymnresHV60ddNtEO93hLRKTrxd9ufW1x2/JHlDAL3m1+jDnKJwz4PsCAiGnKSqFMQ7j3cjIt+u2x35799kTk0PXiI9x7WbVLlCAcuvURA36FMFRrFA6zogxDqP+Uh005qNKx356IBqLbi4+TsFnFp5TC0O0THLqtHAN+hThUSwj3btdgOsO00+9YLkREA0EVX3W4HcL9pt3PClFKjejlSbcVY8CvwOmW1mZhuM80Z8e9m2oah2mJyA03p9u2de0TorSyh2550m1FGPDLZJ9Uy6HaTEO4d7vj3gn3HKYlIjfqblmirOLz4CtKO2QsDt2WjwG/DOi751Bttjnh3g1nUw6HaYnILYT7CfUzlK/hwVeUchi6Xc5+/PIw4HtUdJgVD2TIKOd0Wjew15rhnojKoWvnQwWfw7aUciNOG/IjHoLlHQO+RyfFbBH23WcWwr3b02mn3jTPDveq2+xERKWgQICHCldmUgaM4yFY3jHge4C++yrD4IRkRnkJ91iDOXf140JEVAk3KzOJMoCHYHnEgO9SX999i1AmeQ33XINJRH5ABV+3MpPDtpQBdj/+u82ttUKuMOC7UNR3TxnEcE9EUXGzMhND/0QZMKKqcAgW+15dYMB3odeQFcK++0zC7W+GeyKK0oRpM5XPb+96gcO2lBXjrEzGb7QuMOBrWLeDFnDffTahKrZs62ZXr2W4J6KgYNWuatiWJ9tSliCTnVr7OOchNRjwFdB3b90OahbKHC977hnuiShoE+rVVXyebEsZYohpNHM/vhoDvgL33WfT/qNH5Eus3BNRjEydMU97si3bdChDRvQa8oRQSQz4JZxe28q++wzKH/u1fPLRv3L1jZLhnojCUjjZVl3F5058yhJTZNLpllbuxy+BAX8AJ5tb601TVgplCsL9pxjuiSimUMVX6Tj4shBlCfrxkdmEzsGA3w/67g1DWoUyxQn3eKvDcE9EUdDtxEebDloMiTLEsDLb41ydeS4G/H4GiblS2JqTKajYM9wTURJMvUldxW/rekGIMoarMwfAgF8EKzGrDIOrlzJm0ebHGO6JKBF0O/F56BVlkb06s7l1ltAZhpANrTl9W3NyQpnh9pRanCQ5+27O8hBR9P7XdRdLz5vdJZ8/uHyN5EZeLF6h0IEWn+PWXU28j7ub3T099o+LZ5MOW88NH3qB1FgPB94v/NxQ+338+8daD7zvvCUK2BuDTLnaaGrIC0m1kK3QmmPkhDLDbbhHxYzhnojiAm06HZsfLvk8Dr1aPr10MRNhHUEej86jr8qugy+5uotZCQT8iaPG9L0dbb+PiwC8JfLJiNOGPG69vV6IFXw4vbZ1qWlKi1BmoE/1c489on0dTpD84jd+qBxsIyIK08E9HfLobZ9Uvuah2V+QJXWfPvNjDOBiy07h7UsSF07wR+ivG385Qz9Vyuw1e5cNaVqU+UyX+YDf15qDIwCZ4DIClaopa1Zo12GOvGSsHe5HXpITIqI40bXpgFMxR6U+SYdgoaWn1vpvnzFhkv2WgZ88YquOsEUHp9ViJSbDfUa43XXPcE9EcYa5oB3rVitfk9SVmejxx8PZCITAj+r+TCvw4y37+UmDrTqS8Qo+W3OyZ7JVudd900M7DsI92nOIiOII1fvVnx2vreKnEUL+vKnXnmnpIRpA5lt1Mhvw2ZqTPcu2ftvVUe5zVz0mU2dwWyoRxdvu7Rtl84pFkmVo35lvhf0ZE65m2Kf+Mt2qk9mAf6qlFSsx64Uy4eGOf7QC/mbt67jrnoiSZMfXV2tbdfyga1c89lpeosbKPg1gZ3VjQyZbdTIZ8AsHWtm995QB6Lsfv/pu7eu4656IkqjSkI+2RLQkjrp0oh3kMYOEt0MvGu55DglBv+fN43br0LHXDts/PvrKfvvHR1/eH1pL0bypH7d79mdalX3KtMy26mQu4PNAq2xxhmp1O57xze3uLXuFiCiJEKQfve1TrirpCO0T6mdYX/dqZfyU60JdJuAEfTwO7u0oXABY7wcFA7pL6z5tb+RhVT+zMtmqk7mA/27z4xuqDIMN1hmBXffOJoZSuDGHiNICO/LRm4+qOSroCNROVX785DqZOmNe7L7WFYf+rva2wCr9qOrP72vhoczJXKtOpgI+W3Oyxe1Jtajcc2MOEVF84ELFCfx4308YzF1S98dW2P+4UGaY1v9urm5q0IeClMhMwGdrTrZgFSZWYurMvushqbtliRARUTyhmo+Q37XTCvt7d/k20Iv2neXTZzLoZwdadX7PaGrIxG7ZzAR8tuZkh9u+ew7VEhElj9OG5FfYd4I+t++knxV6mwc1NiyTDMhEwH+3ubW2qrDznjJg4eZvyqbdzylfg37U5d//mRARUXI5Yb+rfXvFffsI+qjmI+xTapmmKdcPbmpol5TLRMA/1dJ6SNiakwlu9t1zqJaIKH12b98ku7+3seKefbbupN6h6saG35OUS33AP722dYV1tbZSKPXc7rvnSbVEROmFth2cDVBpCw+DfnqZZu+qwU2LVkqKpTrg9w3WHhLKBIR79t0TEZEDVf2OzWsr2rWPoP/43EVcr5kuqd+NXyUpNkjMlUKZgJWYunCP1hyGeyKi7MDef6xCRlvm1JvmSTkOW99bPvnoX8nCzY9pv89QYow4bcjjkmKpreBz5312uGnNwVHsd2/Zw757IqIMc9p3dn9vk5Rr+fRZHMRNh1QP3KY24HOwNhu6e96WKWtWaKsq3HdPRESOSoM++/NT41Bfq07qduMPkhTCYK31ZpZQ6v3FP/y9PP1Sl/I1uEV705KvChEREeCu7oRpM+3vD1ivefQVbz36x63i0vaufVZx6Tf2ybg1Qy8QSqQRvdL72688vb1dUiZ1FXwO1maHm9YcrsQkIiKdSir6rOYnXioHblM3ZMvB2uzAabU60xcvZ7gnIiIlfJ+Yu/pxWf79g56HcTGEu2jzYxzCTa5UDtymqoLPwdrswNac1Tu2KV+DW69zV6V6SJ6IiALQtbNNtj74Jc979FnNT6zUDdymqoJvhfsVQqmHCoku3KM1B9V7IiIir9Cfj2o+ikRe7gKzmp9YhpGyKn5qhmxPr21dar2ZI5R62JqD7Tkq2Jozfkq9EBERlWvUZROtsD/D8yDu/qNHpK1rn9SOGiM5q6pPiTDiLz8zw0jLwG0qWnT6Bmt3Ctdipt6m3c/alREVtuYQEZHfcBruY8s+57lth3vzEwUDt7+XhrWZqWjR6RuszQmlWqE1p035GrbmEBFREFDNR9uO1+8xaCnFSbhs2UmEEb2GpCJEJL6Cz7WY2bFw8zetCv5zytfMXfWYVcGfL0REREFBFf/R2z7lqZqPAdwnFt1p782nWDN7Tbl6SFNDpyRY4iv4VrhvFko9VD504b5waAnDPRERBQuDt16r+RjAnbxmhfZONEXOqDLkIUm4RFfwuRYzO3Cgle72Jr7Ycuc9ERGFqZxq/pK6T8tDs78gFFuJX5uZ6Ao+12JmAwZrdeGeB1oREVEUnGp+3dwlrn/Nwx0/sKv57MuPrcRX8RMb8FG9Fw7Wph7WYboarL2Dg7VERBSd2Xc/5GlvPlZpcvg2vkyR2lNrH09s329iAz6r99nwcMc/uqreExERRQ1rmr/4jX9yHfLRl4+zXRD2KXYMMY1ms7m1RhIokQH/9NpWhPucUKq5ObEWX0w5WEtERHHhdQAXd6rRrrNRs0iCIjHilPQ2SgIl7iRbrMW0rkparHcTeUVF7i3butmqaryqfM2ih74rQy/ihwIREcXL+Cl19venw10/llPvvqN9/fauFwRF47rxlwvFh2EYE1d9Zta6VU+36f8SYyRxFXweapUNbtZionrPwVoiIoqruluWyN1b9rj+XoW71lyjGTuJrOInKuDb1XvDYD9GBuhac3hiLRERJQHCPfrycRKuGwz58WMYVUtMK4NKgiQq4PdV7ynl3FTv6+YuZfWeiIgSoRDyfyhTb5rn6vUM+bEzoteQRFUVE9ODj+p9tWHwUKsM+Nxjj9ibBUpB9X7+/7tZiIiIkmLweefbJ67Dwb0d2td3HHxJ2JMfK7WrPjNr46qn27olARJTwWf1PhvwBa3wRa00tuYQEVFS4dwWt9/HWMmPFSNJVfxEBHz23meHm0OtuBaTiIiSDCF/7qrHXL2WIT8+TJEFJ5tb6yUBEhHwWb3PBlbviYgoK1CscrvqmSE/NgwjIVX82Ad8Vu+zg9V7IiLKEvTkY/iWIT9R6pNQxY99wGf1PhtYvScioizC+kwvIZ8n3kYuEVX8WAd8Vu+zY+PuZ5XPs3pPRERp5SXkL9r8TW1BjAIX+yp+rAM+q/fZ4GbvPav3RESUZl5CPtZJ5xXrpClwsa/ixzbgs3qfHW5OrWX1noiI0g4hf/ZdX9O+rrvnbfnko39lv6XIxLqKH9uAz+p9NrB6T0RE9B4UtNys0MSBkKjkU2RiXcWPZcBn9T47WL0nIiI6G77vuSluoRd/2dZvC0UmtlX8aomhQvXeEEq/XQdfVj7P6j1RNI69lpeeN49bj27r/cNnfg7wcz3/efZp7c5rAT3EQy8aftbzIz+UK3quxr54t3/eeuv8HBG9B4dhwY51q5Wve7jjB5Ib+X5ZUvdpodAZVYbMs962S8zELkWjej/YkENCqbdp97OycHPp25D4xr/8+z8TIvKXE9qPvry/7/28HHv98JlQ7wT5MDmh33mLCwL0I+PHzluiLNq8fKHs/t4m5Wtqhl4ge+5eZQX9i4VCZw4y5feMpoa8xEjsKvis3meH7sAOHABCROVDeEeIxwOh/egr++1gH0WA1yn8t3aXfN4J+qMunWhdABTCP4M/ZcHsux+yP3fxeVyKM3S71wr5CPsUKuOUmEutt00SI7FK0qzeZwf6BvHFSGX59w/a38iJSA8B+eCeDvuBarwT6tMOIR9fJ8ZPrrPfHz+lTojSBp/Lj972Ke3nNNp0Hpr9BaHQvdFXxe+WmIhVBZ/V++zQHWw1dcY8hnsiBQR4hPmjr3Rab3dlIswPxLlD0bXzvTuCCPkI/PZbBn5KAXw/XPTQd2XNnMnK16Eff+KoMTJ/6rVCoRpxSnobrbcrJSZik6b7qvc7rXdzQqmG1ZjjV9+tfM3dW/ba1TgiKrDDPIJse9uZ3nlyh4Gf0qLjbx+WrQ8uU76G/fiRiVUVPzYV/EEi9cJwnwm7NEdsO721RFmGinzXzu1ycG+h7YaBvnxO65KsK/TyT5g240zg551CSpK6W5ZYF/idyqFb9OMv2vyY/PCL/1MoVLGq4semgn+qpRW99zmh1EP1XnXENg744O57yiKEULSadLVvz2zLTdgQ8qfeNI9hnxIDF/tr5kzRfo1ALz5XZ4YuNlX8WAT8d5tbF1QZ0iqUerrhWq7GpCzBN+pClb7dfht1lT43+mKpGX6h1F41VoYPv0BGDLtAxo4u3ObPjfmA/VzN8AvOvNat7hNvSffxHvv9/JFfnXl7/MTb1s+/LflXf209ftX3fuFtFHDncOpN8+0KP8M+xRna9HT9+GzViYQphtlQvXThRolYLAI+q/fZsXDzN2XT7udKPo/h2rmrHheitEKI3719U2S99Ajm9dd+1A7wtVeOsYO7/RgdnxCAC4LOriN20N9/4LB0HjhiB//OA4clLKzsU9y56cevG385W3XCt7O6seF6iVjkAR9H/BqF4VpKOfQFoj0Hb0vhakxKI6dSv/t7Gwu94CFAYK+9Kidjx1xsB/n6j380ViG+XHbYt6r/7c+/2Bf+Dwde8XfCPlsHKW4eve2T2q8p3110p8yccLVQaEzTlOsHNzW0S4QiD/hW9R7hvl4o9XQn1+L2OLbnEKUFvvHimPmgK/Vom0FbzUTrUX/NFVaYv1xqhl0oWYHQ33kgL+3PIfQfCazS7wzooo2H23goDtCHj3581deXsSMv5gFY4Yu8ih9pwOfBVtmC3vsOxQYdDtdSGjiDsthyEVSoR6CfdcMUK9SPkbprP2q/pffY7TxdR2TbU3ukw6r054/8WvyGeaHpi5ezhYci56ZVZ/n0mdZjllBoIq/iRxrw321+fEOVYTDRZYCb3fdsz6GkKu6rD6IFx6nQz7phssy8cUoqWm3ChMCP6v7GLc/Yb/2G2SFW9SlKblp1Di5fw4HbEFkJv2Vw08ImiUhkAZ/V+2zRtedMqJ8pi5q/K0RJgm+oHZsfDmRPPQJ93bVX2KG+3npL/sAAb/uzLwVS3UebYd3cJbwTSaHD1yCEfBUO3IYu0pWZkQV8rsbMFl17Do7gnjBtphDFHYI8Qj3acNBb75fiKv38L3wiUz30UUJFf8OWXb6GfbTvoJqPFh7elaSwbF2zzP7apIKAj6BP4TDN3lWDmxatlAhEFvC5GjM7dO05GFz737v875El8lMQvfVOqJ//+U/IrM9OZqiPWBBhn+07FBZ8XVr92fHKr0+s4ofujerGhpESgUgCPqv32aJrz+Hue4ozZxOOX731DPXJsO3JvXbPPlp5/MBVmxQGNwO3rOKHKrJh20gCPldjZgvbcyhpnDYcDM7qjoN3q76vn57tN8niDOiuWvOEL1V9Z/sOgz4FBSfcqtoHWcUPXSQrM0MP+ByuzRa251CSOMEeVTA/2nBQqZ9phfrGOz7DUJ8C2Lffsu4paXtqb8WHayHoI+Sjqs8+ffKTm4FbVvFDZfaacvWQpoZOCVG1hGyQmCtjcL4WhWSXonIPODSGKGqo0iPU+9Ffjxac+XOu4/abFMJ5AxseWWxv4kELTyVV/WOvHZYdX19tP9CmyIFc8gvawfBQtRWu3tFmhXwG/JAYhvTiEIJQA37oSZvDtdnyuccelraufSWfZ3sORcnP/nq24GSTM5iLfv1KMeiTX1jFj53QV2aGGvA5XJs9F/+v/0e6e0rfykZ7Dtp0iMLkV7BntZ4c6NVv+frT0rZjT8W9+s6KTW7eoUroDr9iL36ozF6zd9mQpkUtEpJQAz6Ha7MFg7UYsC2Fh1tR2PwK9uitXzDnE6zW04BQ0fdjKJcDuVQJN1X8X//v/yM1Qy8QCkWow7ZVEhIM1wrDfaa0db2gfJ799xQW5xudm+PcVVCl37ntHtm3835Zung6w30M5V/9td02kz/yK4nKAuuuzqG9LfbHSiV3dtCnv3nFIln92Y/I7u0bhcgLpxdf5eGOHwiFpv5kc2u9hCS0gF8YrqUs6Tj4svJ53n6moPkR7NGGgzCPUF9pYKPgINBPm3W/jLu6sfB2cpM03LlOuo+/JVFxLggPvdAs8607PuUqDvrY8uTX6lZKPxyypvLIrn8SCo0hYoY2dBhaiw6Ha7NFtx5z1GUT5e4te4UoCH604tjB/vbpXHGZEAj2qN7354TscnUeOGyvxMQGnZrhlX0coE9/5QNP+HJSLgdyyQ3d6bYIgf/EYdswhTZsG0oFH8O1wnCfKbr1mOMns3pP/kNlc/PyhRVX7FfcfbNddV355ZsZ7hMAPe8DhXtAuw4eXuHX4KJh0rR77DsCI8Yvtvvqy4U7CTXDLrDXbOKCo/WR2yU35mIpFw5hQ3DbvGKhb6csU/pgiUXd3CUlnzetx1d2tAmFpuZ0YWVm4EIJ+FWGcEIoY9q1+++5GpP8g+oUjmdH4MEu+3IgbG2wQtcbB9cz2CfM/q4j6uetKrwXaPeZPa/5nIsGVN/Xrt8hXuBCwblAwMO+02BV750+fT+CPi5o0b7DoE8DqbtlifL5jp+9rNx2R74yxKiaJyEIPOBzuDabdrH/nkKAYI9WHAR7HFRVjjN90lbYwspLSh7cdVHxeursSqtS331i4F+DkO+WMxdQfAcBFw3FP1cc9LGdqVzo039s2efYn0/nQBVf+T3XNGXT7meFQlNvNrcGvh888IBfLWajUKag/x6PUhjuyQ8YNkSwx0mg5Zw+6wR7Ds4m39jR6gp4qfadUvYfKH1HABcLbv95DUvWl3yuf7sPgr4zyD3rhilSDnweoJpf6WnMlD66Np3tigMpyXfGKekNPBsHHvANw2AvRsaw/56ChDaENXMmy9Y1yxjsyZXuE9426WAYVqVm2FBxQ9X7X+o5fExu3dRY9uYdVPLRrkZUDIU11aGSbNMJl2FULZGABRrw+/Z95oQyRdd/zwo+lQOtB87Ky6Mv7xevaieMZbBPKfzdqnjZiY8Kva6lx802Hd1gr66tKDf6A/ZArhP0vfTpoy+/3JY1SieE+6k3KVq/2aYTtpqgd+IHGvBNMRcIZc7+o68qn2fAJy+KB2jLGSJ0hmf3/eh+BvsEcvrYR3zkdjE+cKvMnt98TmD3swdfV73PjXYXtHWDvcX99qrfoxP0vW7ewWwK+/GpmGq5Bdt0QmdUGRLosG1gAR8DBFVsz8kc3OLbf7R0/yrDPXnh9NmXU41E6Gu+71YOzyYYQi7WVKIa7gy9bntyr0y6/h57P71Dt/HISw++7mIgN+YD4sZOTQW//prCxabq91h8IYOg72XzDi6McTgWkQPnz6jadFCcY5tOeKyLqllBDtsGFvBPWv/h1pvAp4QpXlThHkZdOlGIdJwTaMvpsy/eY9+4eLpQcjXe+60Bt9kghKPi7YR8/J3rqvhuQ76u8q7797j959RZd5Ocyn2p32OpIV17IPdHX9WGfHwesVWHHAj3E+pL1127e97Sfg8nXwW6Ez+wgM/d99nUwf57qoBddazgoKqlVqDnAVXp0fZU6dOunZC/ccsz9o9xiJQKDppyQ1fBr71Sv8oSwV13QYFWn9nzW5Sv61RcJOBCY+vGZdoLDrTqcKsOOVTfgwttOi8IhSbQnfiBBHzuvs+uDs3+e9wiJBqI045TzkFV6K1HsG+571YG+xRx01u/4M519spJXeuMrrfesc+HCr5qzSY44b5T8+/SXmxcNca+W6XizLAQwYRpM5TP676Hk+8C24kfSMAfxHCfWarbeyMvGWs9ckJUrJK1l8UrL9GjTOni9uAnHD7V2aUOy8e73fUWHz+hft1EF/9Nug06qNp3ujhdd9aNk7WvQRuabngcW3V4yi0B2nRUhbb9r7EPP2wnpXeBBCCQgM/2nGzC4VaqLwyjLq0VIodTWSxn7SWqqNiMw5WX6YZhUrc9792aYO62B1+3UtPNf0/nT/ThXccZEnfDzZ8TWnWIQHkWjWlqW23JV0aVUTVDAuB7wGd7TnZpB2zZnkN9yt2OUzxAy8046Ye7Mju33es65KvoLgAcbnrndXQVfDfsTTku70rhdY23qwfKUcHfvX2jEI26rHSxDX34uxjww1ZvNv91Tnzme8AfFOBEMMWbLuBzwJacw6rKbcfZt/N+DtBmDPrM8ffu5aCngbjZha89wdbe1qP+2PMj3K+wPsZn3TDF86/R/Rlx4JZg/BR1cQR34ylUxikZskB85n/AN6rYnpNRrOCTCsLFmjlTPPcCI7Swzz7bCpX8eyoK+W6GbPNHKq/e7z9QWXsOgvpKzeBsKa0PL1Y+f+y1w1ybSfYsnGoejoO24TOMKt9vSfsa8NGeY93eYaN1RuWP/abkcxjsUR2wQenlDNHu+Lq36uGZdpy9LYnos8caxg3f3iXbntyj7eMm75yQ73bwtj8Mter+Xo5rqvy66j3srKCCX0m4B3ye6D5X0B7HKj6pCm6YpeOgbeh8b9PxNeCzPSfbVBV8Vu+zp5Ih2uJ2nCRY9cATMmL8YvtgIqw/HDe5yV7dSP5CyMfHxYoyQjBadPD3gt35uAgbiK7K7+YOUrkV/ErDvQO9+yr4vGQVn3SHTvLAq9D53qbjb8Bne05m8QRbKlao2k/xHCSS2I6DcL9ygDCP1Y2lgiRVBhd+9hBqGS076JG3L8KubpSGO9ed1TNfbosOBnNxQTfiI7e73tZTzK9wD24GblnFJ93Kagb88PndplMtPmF7TrbphnK4/z4bEBrQa19OhRBV2cY7PpO4AdoNW3aVfG7t+qdl1o3ehiXJnQVzrrPv9DTcub6swVYE8Q1bnrEfOAW3dsJY7SAuAj5asew99l2HpfMnR6QNLVmvljeUWFiF+WfW7+UT4idcMGz4zq6Svx+nij/9juVC2cRB21iy23SMpj/Piw98C/iF9pxA1upTAnDAllC137xikb0pxwuENC8rAeNGFe4QPBEI3fRuk3dOX37Luh12Bd3NppyBYIWmm4uEBUvWiywRX+Duw9aNTWXPFKjgwgFV/JWKNjFU8etuWcLZqIzS/b0fZsCPgtOms1J84FsiZ3tOtjHgZ1dxr72XcO8c5JP07Ti6He1tT+4VHQx/ojccLR7GB26V2fObOajrAU5zRW/+fJ8r4UFZ2vffG0S4L/53qD422YufbQj4qjvrqqUZFBw/23R8Cfhsz6Hunp6Sz3GDTnqV22s/64bJdsBBMEu6umvUW0van1cfGoMgP2naPYVqf99hTNusi4JJ19/DkO8BLhI3PLLYl535QbGr9psapcW6sA26Fc2p4quwFz/bhl40vORzrOBHxrdtOr4E/EE8uTbzVBX8kZcEV6WiaJRbtXeGaLduakrNTvtpmrWE255SD9pi4HOgU1bRboKtPOQNquJYrVruEG5QnKq91wOsKv136qr4XTvbhLJp1KWl67JckxmdkzLEl42UvgT8KkPYnpNxqi8GIz+UE0qPcqv2TsBJwk57L2beOFn5PIJ6Z4nViRjQ7VSsVeys8NCkLMMQLoI+LiijbN3Bx7s9JxBC1b4/hPsFn1ff8d/9vU1C2aSq4AMHbSNhVBlVM8QHFQd8tOcIK/iZpuu/ZwU/PSqp2kcRcMKAOxG6E047BhjgRPsNVmyqlDs0Su9BwEbrzqEXmu1NTWFU9Z1D2t742Tr7Yz/Ki9qld3xG+Twu2L2eLk3poGudPc4qflTqzebWivuaKw74bM8h3a08rshMPgR6nEbLqv3AdG0X2546d9AWG0506xVnae4OkHu4EMP+fFT19+38qr133s+PS4R6fLwj0L9xcL3974rDBS1+3zNvUH8cYbUtZY/uezPbdKJz2oeDYytek1llyEyhTNMN43CDTrJhEG/H11d7GsZDlbT14cWpD/YOtOm0rN9R8nm02hSvy8RA7cYtz4gOtgyR/2qvGmM/VghWZL4lnV1H7BNo2597qfBj+++rdLjBHRv8XdZZH9+1V46R+o9/VHsXJ0oYZm97qvQ2J1Twcdo0v1ZTMQb8yBhiVM2z3m6QCvixB79eKNN0fXrcoJNMqNpjr73X2/eoYq788uxUtuOUgsFOVHBLhcJCH/4R+4IHQR8nqOrg8KO0DCLHGT5O8feCx9J+W50Q9ruPv7chrGb40ER+XDu/P9Wu/93bN8rsux8Syg5dDz4DfqRq0aZjNDWUveaqohadk82t9dYbpreMO6w9xZY9+EmDzRoYpPUS7pPaa4/Q03jvt+wTUTcqTqVVQbjX7TR3Kqir1mzVtubgzxKnkVK08HGMyrzzSPJFK2YCVDBsy5WZ2cLiW6zVnKpw/XxFAd8Uc4FQ5ukOxOAXkeRw1l8+tuxznr7ZJ7XXHpV0HDC1dt0Oe6PNAivkj7u60a6yezVL0+e87ck99r8Dp67qoD+c1XvyEz43dSszd2/nRh2imDCslF1RC3xFAb/KMOqESIHV++RAD67X9ZcIDGEd3OM3hO0NA/TBo7reZFX0varTXNzY/9x79P9ctObMn+PbYYZEZ+gOvupq5058orgwDCOagP9ucytuHeSEMu/wsdKnbXKDTjJgkNbr+ktUBLF6MMyDe/y0dt3TJZ9D8Ff1Kw/E6cNXGehAq2JszaEg6Q6+4spMoljJVXKqbQUV/N56IRIM4vQIJRNuyyPYb12zzHVLDgICtrug3z7JPcm6NpxVa9Q76geiO1RIh605FCQ3B1/xZFui+KjkVNuyA36VUcX1mGRTnmLLFp3Yck6k9VKxQ9UevfaNi6dL0uXGqIM0Kvjom/di4lVjpFxszaEw6E5e5rAtUWxUdKptWQG/74SteqHM067IfB8HbOOonBNpnUN80lJh1m0VAfTiexm4nXVjee1KbM2hsDgrM0vhsC1RrNSWe6ptWQG/0tU9lB3coBMv5ZxIW7z+Mk10QQcwGLt2/dPiFlogytkklKYLJ4o/3cYnDtsSxUbZ6zLLq+BzPSb1OcxDrhIDg7RoycG2HLfmz/lEItdfutX6yO3a12CtpZcqfv013v6sULlnuKcwoRWMw7bEVqxEKHtdZlkBf5Bh8DxrckV3Uh6Fo3DbfaOnL+gI9RseWZzqE2kRrHWrA3EKrZeBW12PczH71N+72ZpD4eKwLUHPm8eVz+dGXiwUvXLXZXoO+D3NrTmTLTrUh0dZJwPupNy9Za/UzV3i+tdgyLScTTJJgwq6br1ly7qnXa3NzB/5lcye1yxu1E4Ym7q2J0oON8O2RBQLuXL68D0H/EEcrqUixzUBn3vw42X23Q/J7Lsecv36lQ88IbPnN5d1sqvfEJ4b+k6axQOn0OLnKoVwr6vig+5ip7PrsEyado/dt6+DuYatGxuFKCq4Q5cbXbpCi7t9bNMhiofT0ut5XWYZLTpmvRBRYtXdssSu5ru9+Nr25N5CcPUhTJcL/+5ps+63T59FgMYDh1Hh5zoPHJZK2X3wY9S3o1HBL1XF39j336I7yAqcoWX23VPUFmjWsu5Yt1oovdiDnxiGYVR53qHsOeBXGUadEPVhi04yjbpsonzxG//kOuQjUCPARhXyV1rV84Eq485/FwJ2pVofXqx9De4a9LfKusuxwPp5N+Eedwu2bmxiuKdYWKo5zwID+QyB6aX7u60Zqm5dpPCYIsFW8N9tbkXvfU6I+jDgJxfC/fLvH3Tdl++EaT8q5l61PbW35HMYgkXArnRewO3aTOffg7YlBP6VLv+9CPeo3NdexcPfKB50a125Ez/bhjPgx0mN2fzXOS+/wGsFn8O15AlPso0/9OVPX7zc1WujDPk6mBeoNOS7OfwKazPRqoO2pQ0u7xww3FNccSd+dvHuTLKclCGeqvieAn6VIWWt6iGieJt+x3L54jd+6KplBxXzsEO+22CMkN90799IuVDNdLM2025XcjFMCwz3FGduduIzCKYT12QmijHIqPovXn4BK/hEZBs/pc51X37YIb/5vj/TrrJ0YKUlquvlbv5xszbTLYZ7ijt8jOqq+F5Ovqbk6PlPXrglidc+fNcBn/33ROmHcI+QjyFcnTBDfu1VY6ygfK92040D/03lbv5xuzZTB/+tOAWY4T59cPGIOzhxWB/rh/mabToH93JdZhqp7syMZfU+jjz14Xup4LN6T5QBhZD/Q5kwTd+RF37Iv8d1yK9k8w+2i7j99wwEh1hxFWZ6IMivXbfD/nga8ZHbZcT4xfZZDHiLHxc2Oe2KdJVsJdCapmvTOfZaXihd2HqVPF768F0HfPbfE2UHTr5d9NB3XW3YOdOTHkK4QWD2GvInXX+PpwsQO8yt3yHd3eVtiMLFwb4f3c9wnwL4WMDg9rirm6Tx3m/Zw9X916Hix/j5BTiEbXKTbwewhW3B59VVfG7TSR9VDz7772PJUx8+K/hEVJLbDTthh/x9P/qqzLphiqvX478N7ToI7SoIabPntdhhDsO6bvbaF0MFtPm+W6XFelDyOZuSvH4sOAew6T7e4mbmjeo+fLbppA/vyiSPad1wc/taVwG/p7k1J+y/J8okbNhxE/Kdlphy+5Kd02rR8mB84FaZPb/ZbnsYiH1g1KZGT73yjfd865w1mghxqMw6bRbbntrjOdgDWnLQb9+4uPLefYqe047jdlNSf/h1+HirZKNT2NimQ8XYgx9bObd9+NVuXjRYTlvV+0FCRNmEkA+6o+sLIf+rdtj1AuHe3nxTFK63PbnXfqD1AeEDmz4mXjXW7sWvGX6h/Zrm+2+V4VYocbv/HtVY/Lvw39nZddj16bO4a4BhWfy7Rgx7LwS9Yf36GuvHK7+s359PyYCTiVdWeJ6CAxud2p97SXZu+4szH7NxhjadFsWdB7TpOF8LKNl0F2s1Q4cKxdNpGVJvvdmge52rgG9KVb0hRJRl+MaOoayOzeqVeeh3Rx9y6yOLxS1U0VVhG5V2PBy50RdLbswH7OCN0I2e/PwRd9VWN4dT4Z+PzSK4sKidYF1QDIt/OKPK4Q6OX+Hegc8HXPQmIeSjTUcV8Nmmkx7HXlPPJdXwFNu4Mkwx9GvuxGXANwx3/zDKnu6e8gYRKZnQk28fX/899cAdQjTaVpa6bKFpe2qveIEKfKF94kXx04I5nzgT7ClbcGen6Z5vSRAQ8pusi1gvF71RcNp0MLcyEKdNx81ZGZRsbNGJryrDqHP1OnGnXogGcFwT8LGNhdJl7urH7UOxdNCDXFx1V/HrYKlyIdgceqHZDmAM99mEyn25Pfdu4KI3CYO33KaTDboKPrfoxJcpUms2t2rDlTbgn2xurReiMjHgpxNWaLo5DAuDsm4260R1GBRae7B2kzvrs23Dll2y0UXrVqVw0RvW6c/l4jadbND34LNFJ85OudhsqQ34pvRyPSYRncXZk6+7VY9b/Q1L1otO6yO3h17FR6Uew8Cs2BMGa8PScKf+8yFK3KaTDboKPlt04s1NNtcG/CqjylWvDxFlC8I9Qr7uLg3adHTrAu3d9lbYdrvbvlIrvnyzXbXn8Cy1Pbk30Nac/lDBj3urjq5Np2vndqFkO/Z6Xvk8K/ix5urAKzc9+KzgE9GA0KYz+66vaV9XWBeo7sdHyMdu+0Iv/O2BVdYR7lfezbWWVNASQdi2D88q87yIMOjadLra24SSDcsSSpk4aoxQvLk58EoZ8Pua+HNCVEL+2G+Esm3qjPlSN3eJ9nVYnekm1CDoL5hznV1hf+Nn6+y3COS61gE3GO6pGOZD3A6C+wmta2vXPy1x5aZNRxUQKf5ULTqs3idCTjdoq1yTiSZ+7r+nco28JJrBSQof1mcefWW//Y2/FLRB4ECq5vv+TNxCCw3CBh4r+n6u+8RbVjD7jX2xgIB2uER7BQLK8GEXFPbl2zvz2VNKZ2t/Pvxw72hZt0OW3v6Z2O7Gx8FyqjMjsE2n7hb9hT3FDy7OVBdo7L9PiCoTLfQlb6dp9uD31rvfpElEWTZ31WOyZs4U5TcOtOrMvGFKRe03CP21V/WFIg7IUgXC2JxTCqr4+PcvXezurIiw4TwIVcBHmw4DfjIdfXm/8vncyPcLxd/JXnOc6nllejc4YEtELjlDtzpuW3WIgoSAHUV7TrFtHg94CxNW16radBAS2aaTTLq/N1bwE8EwRH3gla48nxMihcPHSu845w787MEBWLp+fKdVhyhKcdhHjwuMuF7sItyrzqdASNRVgime9BV8BvwkMAxDeRhNyYDPAVuqFAN+Nk2/Y7l2P76brTpEQdofkwOnomwT0pn/+U8on+/ayW06SaTbgc8tOomhHLQtGfBPcT0mEZUBF3box9dhFZ+itDMmF5hxbtOZdaP6XIrd39sklDyqHfjYoMMtOglSGLQd+KnSvwoDtkRqqjWZQ9/HCn5WuWnVQQV/45ZdkkT2Bp8QD0ci/x0/8bbEAVqF4tymoxqIR5uOanMWxZOqRYf998miGrQtGfANo0rZ20OkM3TYcKHsctOq03jvtxIxcIv/RtxxmDbrfhnxkdtlxPjFMu7qRjE+cKv949nzm+2LFQ4PJwdWrMYBhn07DxyRuMK6TBUG/GTRrcjkBp1EUZ5oWzrgs/+eNLp74lEBo3hCq47ulNu4H/iDELjgznV2oMfpo/ZQZL/KL3687cm91uvWy6Rp99gXAnEJj1RanO7AxGUeYCC6U20P7mXATxLdgC3775NFdaJtleIXsQeflHQBf+SHckLZNmHaTLtdRwUH/sSx8o3hRwR2L0OQCI24EEClP6ntRxS+OFfwcbK06pA4nmqbLAz4qVNy0HbAgH+yubVeiDSOs4JPLugGbuNYxV9lhXRU7rvL7NNG0EdFn4PE8YSPuTjpPJCXOJt1g2bYdjuHbZPi2Gt55fNckZk8J0t03AwY8A05zelI0tJW8C8ZK0Tow9cN3Mapio9wv9KnYI5qPg72onjpPhGvO0Zxu+DoT9emg1NtKRmOvsIKftpUSW/twD8/AFOq6oWIyCcYuFWdixCXKv5a60Jjpc9V9w1bnmHIj5maYRdKnMR9IxNPtU0PVYsOw30iGaYMfODVwBV8zelYRHD4mPqbkm6DCmUHwn3cq/gYjEXFPQgI+U33/o1QPKjCalTiHPJ5qm06oD2HG3RSKTfQT5Zo0RG26JAWt+iQF3W3LIl1FR+Dsd0B7kbH6b1r1+8Qioc4hvw4063L5Km28ccTbNOpVFH+nICPaVxu0CE32INPXsS5ir9hy65QKqi4Q8AVmvFQMyxeAT/uZyjMn3Od8nn24cef7syCuvGXCyXSgJt0zgn4pxjuySVdwFdVaymb3FTx257aK2Fb9UA4227w+2tYsl4oehOvilcBIu6Dtro2HVSHdRtaKFq6AVueYptcA23SOSfgc4MOuaXrwWfAp/7cVPE3eNg774ewqvcOHJbFHfnRGxGzFp0ktAzVX3OF8vmunduF4ks1J1Ez9AKuyEywgTbpnNuiIwYr+ORKd09PyecY7qkUVPFVEIDxCMvadeH3/aNVJ+4tGWlXG7MKfs3weG32GYj2VNs9PNU2rjBcq7rDwv77RBtwk865FXyjiht0yBVViw7776kUXPzhhFuVsNp0Og8cth9hwx2DuB3ulTVxa9GpGTZU4k63LvPgXgb8uNJtOaobf5lQclUZxvBzfq7/Txgl1u0Q9Xe8p3QFkhV8UtG36ewKpcK98dvhtgMVw0AxRYcVfO/crMtkFT+edH8vrOAnmylS3//nBmjR4ZAtuZM/9puSzw19HwM+lTZ+Sp39KAUDhxtD6MVvfz68VqD+8HsMsxWJzoawWn/tFRIHtVclJ1zp1mUy4MeT7u4KA37iqbfo9DS35oTIBa7IpEpNqFe36WwLuE0HATuK9pxiq9aEs72HBqYbGg1LbswHJCm0ffhs04klVYsOtudwwDbxaszmv84V/8RZAb+a7TnkEjfoUKWmzpin/DhBdTvINp2OGFTPg/49klpdXCr4VyanIJIb/QHrUToMooKvOi2Vwodwr/o7qR01WigFqs47a4b2rIBvDrBmh2ggrOBTpRDuR12mnukPsk0n6uq9Y+OW6OYAsg4tOqqwGpa4XGi4NeuGKcrn2aYTL/oBWx5wlQane80RxT8+K+AbYuSEyAVdBX/kJTkh0pm+eLny+SDbdPbFJOBvi+BgL3rPAs0JrWFIUg8+6GYXGPDj5eCeduXz7L9PhXNWZZ4d8A2DZVdyJc8WHfIBKvhRtekcDvFwK5W43EnIqqWLp0uUEJaTsEGnmO6OQ1d7m1B86E6wZQU/HfqvyuxXwWcPPrnDFh3yg70TXzNs2/ZkMBXu/Ku/kjiIw7BvlmGbzkzNZpggLZjzCUka3QaiY68dVh6qROFB772qRYfhPlXOarPv14PPgE/ucMiW/IJhW5VtO4IJ+AjWcRGHgd8sa4ywip+0/nuHbgNR187tQtHT9d9P5IBtavTP8GcCvtncikTGVEaudPf0lHyO1Xvywk2bjt/iFO6h88ARoeigGq0bHA0CqvfYSpNEuguTo690CkWva6e6XYoV/FSp6cvytjMB/ySr9+TB/qOlAwkHbMkL3TadIA6E6j4Rr9WUnQfyQtFqvv8Wu/UkTPNjMOBbLpxoq/rzYgU/HnT99xywTZfiLH8m4Bus3pMHqh58nmJLXun68DueT3cLS9zuKGQRKukr7r5ZwoK7BnE5SbccCPcI+aXoer8pHKqNRgj3POAqXQZXmWc+Kd9r0eEOfHJJVb0H3W5zov4mTJuhfL495T3q+Zhs9Mk69OKHFbpbH7ldkm6WZjiZ6zKjpfvzZ/U+fU72muOc91nBJ890G3Q4YEteoa1L1dqFLTN+rsuMY98zQ348IHgH3aqD1ZxJ7b0vNvEq9bwVA360dH/+deMvE0oVwxDj3Aq+YVSx7EqusIJPQRg/ua7kc4VVkv4Ooobdb03JgOC9c9u9EpTcmIul5b5bJQ0KO/xLfx4d3MuAHyXdnz8HbNOneBd+8ZpMll3JFR5yRUEYP6VO+fx+n3fF1wyLV8DPH4nHXn4qnCwbRAsNwv3ObfdImtQp1mWiD59V/Oio/uzHjryY/fcpZA40ZCvcokMu6Xbgs4JP5Rg/Rb1RxO8Kvq69gLJtwZzrZOvGJt/u9OCfg39eGlpzik3TrcvkoG0k9O05rN6nVM55hwGfPMsf+03J57gDn8qFHnz1Pvyfip9GsEWHNGbdOFn27bzfrrxXAr8e/5zaFF5UzrxRPWjb1a7ew07BYP99ZuWcd+yAX7wYn0hHVcHnDnyqhKpNB0Oofg7axi1s5cakq7KbFqi47/vRV6Xx9vJOu8WmGfsiIWWVewd+X6q7HKzgR4P999nlZHo74POQK3ILG3RUW3RGXcr2HCrfyA+pQ7efbTps0SG3EGCb779VDr3QLPPnfMJV2w4GUNFvv3VTk9QMu1DSTLUuk3340WD/fZa9Ywf8avwfV2SSW7oNOqzgUyVGXaY+jgODtn7tKXdO4ozLIVO50fyGG3eoVm94ZLH9/rYn99ofj7joxMnICPFjx1wstVeOkVmfnZz6UF+scDfsmZLPo4qvG6In/7D/PttOyfk5603eDviYujWESE8f8FkVpfKFOWjrnMQZh0O0GO6TB/35szT951mBPvzGe79V8nn04dfdskQoHF071XMP7L9PN0N6c3hbVfwDIh3dikxW8KkSukHbzgN58VP9NeGcWqrD/ntKMvbhx8vRV9R/3qzgp1tvX1dOlRB5sP/oq8rnuSKTKqW6C+R3O838L3xC4iCN21UoW9iHHw+6P2v236femdNsC1t0xMgJkQvKAVuGe/LBqEtL9+H7vUkHlUe/evorUXctK2qUbLqLVFbxw6H7c2b1Pv2c02yr+n7A8hG5ourBH/mhnBBVauhFw5XPI+T7KQ5tOqzgU9Lp9uGzgh8OXf/9zAmThNKt1zRH4C1bdMg1DthSGHSbdPKv/kr8tHTxdN9OKy1H7VVjUrsjnbJD14ev28tO/tD1308cNUYo3ZyifXXfj3NCpKEbsOUaNO+OvZa3Klu77LfHXs9Lz5vH7ffxFr2UePRXGEQdbg+j4oGzB/BzuMBCm5RqSDUJdBX8w0f8reAjlCz4/HXSsn6HRKH+2o8KURrUWXfD2p7aO+Bz+FqG9hG2cgZH13+PcM/++/Qz+4ZsnYDPPfik1XHwJeXz3KCj5nyDwy1UVFnw/kABXgcXAMX635LFN1A8xk+usy+6kvb3ogsAQeytX3rHZyIL+EsXf0aI0mDataUDPiB8MuAHR9d/z+p9ZjDgkzfcoOMdAvzu7ZvsPdDlBnqv8O/BA/9eQGUfQX/64uWJCPu6OxB+9+AD2gsab58eesjHgG9a2nM6cehTl/X4yRE5/OqvJH+kMBCNC7LuE4WLMuz7rxl+oX3XBCcJ119zuT1/wDWh6VCnGVg/+kqnUHDYf099CgG/p7k1J0QuqHrwGe7PhkrVjnWrYzFYduy1w3bYxxD01BnzYh/yndajUhdDODU0CCu+fLNs+M6uUE+2XTAnHms6y4HwjtNc23bslfZnXzwT4lXsi7O+CzQcMLZ2XeGCCiG/0bqTgRYPhv3k0p0O3bVzu8gqoYCw/54cZvNf56qFyAWsx1StyOQGnfeq9R2bHz6njSYOcMGBh1PRj3MLjyrg54/4O2TrQDBZcffN0qQ4kdNPuTEXy/w510lSLbhzvbIdwwtU//HPs/+51kUP/h4Y9JNJdTo0PqfxtZHtnP5j/z31V1XNAVtyQbdBJ+sVfAT7NXOmyNYHl8Uy3BdzKvqbVyyS1Z8dL4/e9knrxxtj9d+tGrQNssLeuHh6aHvxm79yqyTZgoAuTjZseUbGTW6SVWueEEoe1YFXwHWZwWD/PRU7JefnuCaTXNEF/Kxu0ME3qzVzJltheWHsg30p+D04YT8uvw9Vhc9NK0gltm5ssqvrQUKVetaNUyTJcCEU5HrRlQ88IZOm3RPYHRsKxkTNmQ5clxkM3YUT+++zp8pkBZ9c0G/QydYOfNwORbUe1e80ndCIyn4cgv7Q95UetA26Rx6hdee2ewILr7h4QL9/0jnrRYOE1p1ps+5nyE8Qpw+/FFbwg6G7cGIFP1sM6WUPPrmTP/abks+hXzpLPZVOxduPAIxvhNiigm+KOPBo+LALpHZCzv75muFDpWbYhWe9HgOm3cd7zgSe/VYAOvTqr+23CEN+hV8EfTwwlBvH7TsY8MQ2lqDg72TntnutcHmfrxcUzsVDWjbn4PTSoDcPYTAXId/+c2NffuzhY1zVh48WQRRIkn5eR9yoCk1jR17M/vsMqkbK54G2pILhWm7QKcAA7dY1y6Rczjc/9KnWXftRO9R7+vVW4McD6wahf784Tnnt7Doi257aIx3Pv2ivKqwEQj4uaBDyp86YL2HRHXbVfaIn0IAP+LtByJ89/6GK/xwBf/d2+0+KTq3Fxx8epcKcXxDyZ89vsf4+/iLwv3eqXO2VY5UfE/iaMmHaTCF/4M9TtYK5dtRooUwx0J3DCj5pafvvJ2ej/x4tOR1/+7CUAyFo/uc/IbM+O/mcqryfEB7xmHVjYdCt88AR2bBll7RZgb/ckIqKG+5Y4BZwWNX8uFT3CiH/nr42kfJDvlO5r70qfa1suFh1whx+f9iFXnvlmHPuRBXffcIdp/bnXpL253/q+g4J7lBh8Lb5vj8Tijd8vVPd2WHA95euTXTGhKuFsscK+Abvk5FS1jfooDLy2LLPee4dRbhZevt0WfCFT0RWtUVAbbnvVvuBEIaAVG611anmf/EbP8xUSxb+7g7tbbGHPsvZ7IKw0/rI7amq3BdzVn3Otz7OVRevxXef8GeydPF0++dxAYo/VzcXUC3rnpaZN0wJbdMRlUd/4FV65pbiQNd/X8v++wwyhmPIlgGflHQDtmkO+Aj3GKT1Eu6dfeqHXmiWlV++OTbBDqEIVeQ3frbObhWZX8YhS6jmYx1omgaL3cLfJf5O8efmZsuO8+edpp77gdgXslZYL/fOFNZt4gIKnzNucH1m/BVmi0p/joR1qndWqL4e1wy9gAO2GVRlGMPZokNa+4++WvI5bM9JczUXlXsvYTYJ1VoEMbTw4NFy/632aaRuK6iAb8xYDTp39WMy9abw+vKLoc1DFSCCgr/XDY8stt/HnZAO64H+cMw+4LnhVrAZZ/13zbxxSiT/fUlmXwxbF04NfQdelYI/dzxYxY83/P3gTIOB4GsIvq5mdb2yn7DsQbXwgeE+u6qR8oWohPyxX9uPUkZdWitphZ57t5V7VKwQ7GfdkKzd5gj7qKDi4aVVAjYvX2SfYBzEN+kkbNhwBkzJP/g4RE++7jRhnKDLP/t4q7umdMAHBnx/6ApQdeMvE8qeXtMcgfU5bNGhkrJ6wNWOdatdD9TWThgr+3ben7hw35/XVgnweofDLd6+zy43pwnjYhSrUim+6j+u/jvkPnx/6P4c68ZfLpQ9hlW8535MUspi/z2+YO74+mpXr0Xv8b4f3Z+qHmun19xNn3lhAPnmxJ7iS/Gku8hElR8boii+8DVReeAVT7T1hW5gmS062cWAT0odB19WPp+2Cj6CKlZCuoHTSLGdJo3wzXnfj74qjbdP177WWaMZpqBOmaV4cNP+hDYdije06ZSC4gALA5VT3UFFuMeQLWUTAn5OiAagO+Aqje05qNy7+aaDcL/SQyuLFxja7LT3hL941gM/HyaE6Ob7b3XVsoO7HuWeEVAOHnaUfvXXqAM+Bpsp3qZdyzadIOm2EeVGvl8os3jQFZWm3X9/abrac7p2tsnu723Svg5tOX6Fe/QRY4tNx/MvWSH+p65CPA4TQvuMfRquFYJyY4JtD0LLDujWE2JuYcK0GZnakU/BsXepryn9fGfXYaF4m6g52C2L63b9pCtGsf8+2xjwqaS2rheUz6etgr/1wS9pX4OBWj/acio5dArVfTxwYQC5vrWMjbd/JrCwj5B//PjbytMpUUlCqw4OwiKqlO7U37DvaJF3ur9D9uFXRncHhP332cYefCpJtf8e0hTwcUqrrhqCqvnWjY1SCWz/GHd1o0ybdX/ZJ8r2h6Czdt0OGTe5STZa//ygoF1H+w3b+objx2139PWr1AwbKpRuaBHTzVpwk0684e9P9TWDB15VhgO2pMKATwNC/71qgw625yRhV7lbaC/RQVtOudtycDATQj0O8Qmy8lgX8G7wrZsataFr84qFEjT24GdDzTBNwD/RIxRvulkKtumUjwO2pMIhWxqQtv8+Resx3VTvF8z5hMyfc52UA9X1SdPu8a1iXwr+G4Ne14l/vm7oFtX33ds3SiWOvZ4XIkq+iVepq8gM+OXBnQ8O2JJCjhV8GpCu/35C/UxJCzfV+xVfLm+oFidyNlqP7hNvS9DKvQDxys1BRG6GlcuFmQMiSgbdgVdHX+kU8k53YcT2HGLApwHp9t+npYKPL5JuqvflVMYb7lwnLet2SBjc7A33k66KX2kvvqoHnzvws0N3YcxZjPjTHnjFVZllYcAnHQZ8Oodu/z3CfVpWIXb87Vrta8qp3iPcb9jyjJTDGUxzQjse+LHqmyQuQsLk5oLCzZ2RUlS3ntl/nw04rRYPFX4sJIPqwCtczHPQ1jvtUoiRvNOZdVyTSedQDdfC+Mnp2Z5zcK9660w51ftVDzxRdrivvWqM7Nv51ZLP43Cfzq4jsu2pPdLx/IuSP/Jre7tPWO05xVDFb3/u/pLPOxsyyhnGVgd8VvCzQHeQFVu1kmOSVaBQnTyMKv6Eaelp+wwDN+iQDiv4dA5t/31KvhDjm4quCoJDrbzAGsyVmgOhVDoPHJGme/+m5PO42Jh142TZ8MhiObS3RXZuu0eafdjLXw5dFR8hHQPMXmkrUwEPElM84KwHlaAPeCP/uFmvS97oNugQMeDTOXZlpP9e900FlXHdN6ZiWIWJ6n2lWtY97XrjDgL2rBumSFRwmq5KV3ubeKXfgc8KfhY4B7mV4uVzk6KlW9+rq0bT2bhBh9xgwKezoPc+f6z0nnYcbpWW/fe6UxS9BmdU7v3acY/tO0mA1iDdAJ3X/lrd69makX7ovUcLmkrdtZcLJQO+Rqg+b7kq0xsO2JIbDPh0Fl3/fZrWY+oq+DM11eliaM3Z6KLvHgO7aKvRQXvC2vXhbOCpBL5xa6v4O71V8XUV/LFszUg9zJjoBmxZwU8WXTufrjWP3qMrgjDgEzDg01nauvYpn0cFPw10FRAEVy9rJ9205iAI4zRc/HPd9M2vtP6Z3cffkrjTDfjq7pT0p/tGzyHb9NN9PuFziLMYycI+fP9ov3/xBFsSBnwqgvWYqgr+yEvGpqb/XhcivVQHUb3Xteagn7/10dvP/NjNYVGoYK5d/7TEnW6FZ9fO7eLFsdcPa/99lF4I97rPp7DXwlLlJmo+b9mm457uLicr+AQM+HTGds32nLRU70H3zcRLiHRTvUdbTs2ws3d2tz5yu7YajYOy4l7Fd/b2l4LbyV6+eXNFZnZ1dh3WbqHCx0DdteEd6kb+0H1N5aCte8dezyufZwWfgAGfzmjPUP+97puJ20HOtif3uqo2DtROgJ9rvF29hjMpVXxdH76X2++qiwFW79MLW6hmz2/Wvg4fa2zPSR4O2vpHVQRh9Z4cDPh0xvaM9N+DdkjJZZBs3bJL+xrVSbjYs++mih932tvvr3SKG7r1b6zgpxPWwk6bdb+rVrdyTpameOCgrT9UF0Os3pMDAT8vlHnovUcPfilpWo8J2l3rLoIkKo6q0xlBdxIu/j1uqvhu9+JHBd+4desy3dC2Tl3JCn7arFrzhKtwD0utzxVW75OLg7aV0xWnxo7kGmGy5VnBJ9vG3c8qn5960zxJE90XyZrhF4pO+/P60O2m2uimir9qTeUHaAVN9c0bF1Ru9uFr9ztP4O3ntMBBVuOubrS3RblRO2GsPZxOycVB28rpilM85IocDPhk051em6b2HPDjMCXdSZtuV/m5qeKjgh/3YVtddd3NN2/dLXpWb+MNd7U2YquU9bY/fPzi47jx3m/JiI/cbvfbuz0YDq05Wzc2CiUbB20rpy1OsUWH+lQLZR7ac3Sn1468JCd0tm2bmuzAsu2pvdL21B4r1Jz9Z+hllR+q+LrtIRjonf8F9c75KE28Sl1dR8DXXSjqvsFzyDbe8DHsHPhWM+wCK5h/4MyFabmnPOMCeOvGJl7cpYAzaFvqY4EVfD3tQYBs0aE+rOCTtj0nTdtz/IYqfct9t8qhvS1y6IVm+31nkMzLSbhuDtZqf1695Shq9R9X//e7GbRVb9Bhe06crV2346zTnLtPvG2fyIwwV0m4x4pZXtilBwdtK8MKPrnFIVvStudMmDZDSA8VRlTiEUje+Nk6V338xXSrJrdZdwniDL9/1SyBrjqn26CDajDFE1py0HrjJ7TlMNynTy378CvCIVtyiUO2Wadrz8HJtWlsz9FtBKq0373/oVZuzJ+jbr/BNp1yK6FhUbVR6G4tc4NOcmELjp9Q5WW4Tyddq5Xu60TWaTfAsYJPfRjwM06/PWe+pJE24J/okbDpDoKBjmd/KnGmaqPR3X7nBp1kwknOfl144nOg+b5b7XDPnvt00n0euz0zI6t6/pMtOuQOAr5+dx2lFttzBhbVxppZN0xRPt/5kyMSZ5Xcfj+4t6OifzaFD0PmK31Y4Ypgj6F0zLFwFWa66Vr5WMFXUx4EyHBPfUzTPF7Va/2fUCZltT0HRl6iDov5V38lUdBtoonqv8utSm6/K09ntO9usKIbN2ilWXH3zXa/fDnw94pfj2Df+sjislrbKHmwYakUDtmWbzgDPvWpMow3uCYzw3TtOXVzl0hajfxQzvr/0hXjw0ei6XXHYT4qnV3xrm7pbr+X+uaNn1d9Y2f1Pr5WfvlmabzjM/a5EG1PvmDdZcqfszLWgRa02qty1oXB5fahR7rNUZRO+Lsv1dbFCr6a6s8nxwFbKlJtsEUns7Z37VM+n7bDrYrpK/jRBHxdlTrJQ7ZQ6puTrv++/hoGwThD5X3BnOvsB3SfeEu6j/fYg+FOO0bN8KGs0JNtnPbrRJ5nrxBVAN05VgXftAK+IZQtm6zqfXfP2yWfT/vhVrrfW1StMKreVAfmA7yu4AyT8iCbEgN0B/eo++/rWOlNFAR5O8yPFqJz6Fq6et5k53ApujWZRAXmcW7RyaiNu59TPj/1pnmSZpgvUImyFUa3SSeKDT9eTFS006CCP9A3KP0JttygQ5QWw4epCxlHX+YmnVJUAZ878KlYlSlVeaFMwWAtBmxV0tyeA25adKLapJN048po01FV8BHu43zHgoi80R1axwo+UUVMgwddZdMuTbifUD8z9f2P2IOv+z12HohmJaXumx9ODY0z3Sag/tU5XXsOB2yJ0kXfosM2FKJKVSHlC2XK6h1tyuenzkh3e45D16bT8fyLQt7pNgH1H6jVBXxuWiFKF92w9bHX80Ln4gpRcgvdOazgZ4xu9z1aVyZMmylZMH6yug0Jh/hEQVehdzOIGyWvm3R0B1xxwJYoXXRfw3pOsEWnHLmR7xciR9UpVvAzRbf7Pu2998V0FXwE/Dj24ce9H71wKFXpW/DFm3RwK15VwcetfB5wRZQ+qq8RPf/JFh2iSlTLO6zgZwkq95s023OmL14uWYGAj158lbYn90rYCgcBXWH3ng9U6aoZNlTizu0mHe6/J6L+2IpCVLnqoU0N+VMtrULppxuuReDN0uEiCPf4PasqyBu+84zM/8J1EqatmxrP+jEODcof+Y19N6FwcFD8N8roNukg2ONu0e7tG5Wvm3njZCGi9MEygbgf3EeUVEbTn+er+95HOa1GKNV0w7V1c5dI1mBjkCrgdx44HPnBUhhIq70qWWsi9Zt0CgH/4N5dytdxgw5ROql24Zc68ZqIXLFvkVcV/4DSSzdcC1kZri2m2xiEivnGLc8IeVP/cXVrDS6qcBtedSse++/Zf0+UTiNiviyAKMHeC/gGA37q6YZrEXR1/ehphN+zbrC4Zd0OIW8QzFWbMrA55+AedfW+/tqPChFlE3fhE5Utj/+zA77JTTqp5ma4tm7uUskqtOmooE80qpWZSVanGJDFN++tDy4TlZk3sP+eKK10u/AZ8L3r7nlbiBx2wO81TS6dTTE3w7W6lZFp5ubuRdO93xLyZppmf73qGziq/zzgiii94n6eRxzpvk919/QIkVFcwWeLTrpxuFYNXzR1fwYYtl27nq06XlRyQNUsVu+JiM6SxTZa8q7X7D2Ct30tOmZeKJU27X5We3Lt1BnzJevqbtFf5Kx84IlYHnwVV6X2+LvB6j0REVH5+rboVLGCn1IbNb33WTq5VgWVkak36TfqNCxZL+Tegs+Xd4YA+++Jso2rMonKYvZv0ckLpQ4q9x2a/vssnVyrM/2O5dpboNue3MtWHQ/KOagK1fskHOZFROUbO/piIe9U36MOH+PBYYSunKo83toB/xQDfiqt3rFN+Ty2x2Tp5Fod/Fm4mUdAqw568kmvENa9teksmPMJISKic7EPn3TM4j3453PINnVcrca8JdvDtQPBn4nuogetOrPnNUv+yK+E9Bpvn+7p9XXsvyci8oxrMgkGn9Wi09TAgJ8yuuo9hmvZf38uVEfmrnpM+zrsxp82636GfBeWLnYf8FHx5+m1ROl3/ATDaDmGXjS85HMM+AROpq8q+rm8UCrgk3zXwZeVr2HvfWm48HHTqsOQ746XnfZszyHKBtwJJe/YokMaeecdBvwU2t71AldjVggDt27mExDyJ11/j2x7co9QaSvuvtnV69ieQ0SA71N0rpEfypV8jkO2JAMF/F7T5NRgSugOtpowbaaQGqokX/zGP7mqltg9+fNbZNWaJ4QGhgr+fE11nu05RESVYZtOtpmmedx5v9p5h6fZpoPuYCvI+sm1bqGCv+ih78qjt33S1euxXWfDt3fJ1k1N9iFPdLaVX75Z2p7aW/LWPNtzKCue/9dD8vyevBx46XU58eY79s8Nu+h8ueH6K+SaKTkZPWqEEA1Ed2cDAb9maHkHDFIamPud984EfJxmayDmU6LpqvdTZ8zjakwP0I+PodvNKxa5er3dsjPtHjusoi0lN4YVaQeq8/gzabr3W+c8hz59Hm5FaYYgv6XtBdnxo5escH9owNfs2Pmi/fbzMyfJXXdMS3XQZw9+MI6zgp9lpllUrK967x0zL5Robqr3HK71DvMKbjbrFNuw5RkZN7lJGu5cJ+3PvShU0Lh4+oCtOrOscM/DrSiNUK1f0LhZpkz/mix/4KmS4b7Yd9r2yaf+9P9nXQyk92tH94m3lM+zEDUw3Z9Lnn34mWZIVafz/ns9+DIoL5Roazv+Ufk8q/flQ8hHu47XDQYI+ti0M+7qRlm7bkfoG3e6j79ltw3hbVy03Pdn57QwzZ9znRClxauvvSEP/vVOufTa++XmRY/bQd1pxXHruPV6XBgg7BM5VGsygT342VZcwT/TooPF+KeFkqrj4Euy/+gR5Wum3sTNOZXAcPLdl02UR2/7lBx7Le/ll9qtO433fst+INxiW0z9NZfb7/vdxoN/V9uTe6T9+Rel/dkXrUrZ23L8xK2e9tEHCe04Wzc19q0Y/bX1+7/Y9RpNorhy04JTjuUPPJnKvnx8nSqFqyBL0xXp2KKTbYOLtui8N2Tb1NB9qqUVyZ+fWQmk671HLzkPtqocvrhiu87WB78kXTvbyvpndB44bD9Q0YeaYRdI7YSxMtEK++NGXyxjrQfaVRCE8TZn/bg/VOS7T/TYdwTw6PzJETn8qvW26/CA3zi3PbU3NgEf0I+/c9s9dshfwOo9JRRCPQZlUa0/8PLrnqv0bqCSv/Qvt8oTjy+UrNBVqbNM92fDFp1M6y4+uLa6+BnD+tiwyvu1QomC6j0eKuy994+zXafjbx+WHetWS8+blS2gQoUdffpB9urjn42Lijht90HI3/ejr2p7cYniBn31GIjd0rYvkFB/zr/PuiOAf+c1fzBO0kLVrsgKfmm6P5vunh6hbDL6nWd1VsA/bZr7qwyDAT9hdNV7rNVi9d5/dbcskQnTZsiOr6+W3d/bJHGHFZVxW99ZuEvBlW4Uf2GH+nP+/XvSFfBR2CiFAb80/NngUaqwxMOusqv/eVb9K/jchZ8wrN5HC9X8uasft4dwsUrTa29+mFrW7XB9oiwRRR/qix14+ReSJqo1mUPfx4Cvogr4bNHJtHzxD84K+KYYndyEnyxuqvcInxQs3CFZ/v2Dsnv7Jquav1EO7umQuME3VLTqcKCVqLQ4hfpiP3npdUkL3Q583WFOWTfqsokli0kcss0s0xRFBb9KTluXhIOEkoHV+/jBKlI88MUXrTsH9+6KVVV/1ZonrIB/jxBRgTMo+53t++SpMtZZknf5V9Xrgtmio6a6w4E1mTzNNpuKd+DDWQH/pAzqHCyUFKzex5fTugPYtoNHlGEfVXscJjX/C58QoqwrXmkZ1PYbv736Wno6aFnBr4zuzwd9+DWjxghlS7W8kz/7x0WGNjXkuSozGVi9Tw7sz8cDjr68327fObi3ww77+HHQEO6xkpIoy9B68/yefN9b//bUk3e6A/94IKOa7s+n8+gRmciAnzlG05/ni39cPcBrGPATgNX7ZELvJB7YwAMYlELId94eez1vBf9CG917b/Pn/HOcTQrYiYwv9rhoKDV0hfWYRFmD02TRcvP8v+btQM/Wm/g4/Kp6EJQtOmr4HqLCPvzsMaxv9f1/7pyA32uaHVWGkROKLVbv0wPfyJwVpk6Vvxybly+yh3sHgtvhcduBT+Q3BHonzOMtfpw2+D2NviT5J9rqevDZoqOmO+yq8+irQtnSf0UmnBPwuSoz/li9p/7sis73Sj+/v4sBP+6cYU8EVPRbD7/ofPnwJTUyxgp0w6z3R4+qSUW484PzZ4X++Z+8/AsOxyZMXlHBd+5OUmm4a6talbn/6BGhrDHP6fc9J+BzVWa8bdr9LKv3dA7dQWbtz78k879wnVD8IJiu/9Y/W4/nXYVUhPzRVvBH6B8zqvD27J8rXBCkRf8w/5OXfmG/n0VpucBT9eCzeu8O/pyOvszDrshmVlcZ+/r/5EA9+J1CscXqPQ0EFXxVRafzQF4ofjDwuaBxs6fqM9o03LSfIAziLsCwvodzMYDH8IuG2hcEYP942PmRhUfn94Lgftz6cyj8/rrP+jGli66CT3qjLq0tuaQBazJx4FVu5MVC2XCq1zje/+fOCfiDrc+900JxhOq97pQ6Vu+zS1XR6TxwRLqPvyU1wy8UiofvtO2TpX/5hATFDsrinXMBAM5FgANtQuU4fuKdMxcxzrrH42/2sK0mg3RD/6MuVQ+QUoGuLRN3+nNTPy6UDdVuhmyNpobuUy2teevdnFCssHpPKuMn1ynXbiLk8xTbeHj1aHeg4b4SCN3vhfF+1fM9QhEZnpK2q8NH1EUqrsh0R7dJh3342YENOsju/X++qsTr2aYTM26q97Pvekgou0ZdVqt8fj/XZcbGzYseFyIv0jJXodugowuuVKAP+NykkxVmieU4AwZ8c4B1OxQtXfUeQ5aVrFmk5Bs/RT1Eiwo+RQ+tOewrJ6/6t0sl1c7nXlQ+z4DvDmYVVHc7WMHPDiuzD3jrfuCALwYr+DHC3ntyw1mdVkr7cz8Vit6OnS8KUVYdP1H6ECauyPQGbZmlYNBWt3GPUsGsrpL2gZ5gi07MIdjrqvdTZ8zTrkmkbFB9HGBzBQZtKVrP/eshIfLqqss+JGnQrqjgs3rvDfvwCQbaoAMDBnxs0hGKhU27n2P1nlzTbaBof57V4ygdLxpgJfJi2LDk9+Bzg46/JkyboXy+rWufUPoNbmpoH+jnBwz4fdO4eaFIFar325SvQfWeWwfIoavodDzHW7ZRYrincl2Zggo+N+j4S9eWiQo+WnUovQxFx02pFh3pNc0OoUjpwj2wek/FdK1andykE6k0nTBL4Sr3DII4aeeAre8m1JdersE+/PTrVSzFqSr9y0z24UcI1Xu056iwek/96TYrMOBHC7vMozoxlpItDT34nT/RtOgw4HumK+qwTSfVTFNKF+OrSj9h5oUiw+o9lUu5WeH428pj4il4V13+u0LkRRrac0BVYEC45wYd73R9+Nu7XmCbTooZUuW9RWeQDGoXioSb6j3CPav3NBBtH/6zXJcZpbTsM6fwpKE9B+EeBYZSRn4oJ+QdLopUVXyEe27TSa/qcnrwOWgbnUWbH1M+P/KSsXZ7DtFAdAG/8yf8Yh+lj00ZJ0ReXDslJ0mnaw/kqufyqfrwQbdqmxIr35fVB6TowbexDz9kbdbtNN1QDKv3pKIL+DzwKlrX/AEDPnmThhYdDtgGR1fwQ6Zgm076lDrB1qEM+L1mLzfphOxLW7+tfL5QvZ8vRKXglq3qm2XngSM88CpCHLQlL/DxkoaLwv0H1HcOWcEvn65NBx7u+IFQ2lQQ8DloG65Nu5/loVbkC9WgLXQeYJtOlG64/nIhcuPKy5I/lJ0/8itliw7DfeXq5i5RPv9wxz8KpYpppfR21QuUAZ+DtuHS9cmxek9ujbqsVvn8fq7LjNT0668QIjduSMHHiq56zxNsK4eLJNUWIrTobLSKiJQe1Zo2emXA56BteFi9Jz+Nn3Kd8nlW8KOFnmoeekVufCwF7Tlbn9qjfH7CNPWQKOkh3Ouq+LrtfJQoygFb0A3Z8kTbkOiq97g6Z/We3NIdYc5B22ihr/qqy9Ox25yCg5WqaTjgqoMDtqGou0Ud8DFsy5Nt00E3YAvagM8TbYOHcK+r3s9dpV6dSdSf6psmDrvioG20pk9jHz6p3TAt+e056L9XHa6nay0h99wM2y7czCyRAsoTbB3agK86JYsqVzjUSt0XhxVYXItJXun6WtufV1fVKFifn3m1EKmkYVZD93WG/ff+0rXyHrYyBzfqJJ+bbK4N+NXchR8o9MSx956CoKvkdDzHW7VRSsv6QwoG2nPS8PGx7cm9yufZf+8vfN3Xfe1H1wD34ifb4KaGdt1r9BX8poZugyE/EAj2q3dsU76G1Xsql+6LfCc36UTu8zMmCdFAPj8zHR8bHYoKvpuWEvJOVxREuOfptonW7uZFLnrwOWgbFF24B1bvqVz45qm6OGTAjx5aMLhNhwaShoCP02u7j5euFOvO66DyuKnio02HA7fJ5GbAFlwFfFMMVvB9Vui9V6+sYvWeKqX6BopvvKrhNwoe2nTmpKRSS/7BhV8aTjvesGWX8vkJ02YIBcPNYo5lW78tlDhmdZWPFfzTLm8HkHu66j0OtWL1niqlWz/X8SzXZUYtLa0Y5J+0tG7p1mOyPSc4KA7qMsT+o0dcdRJQzPQarir41W5eNLSpIX+qpTVvvZsTqpir6v1N81m9p4rpAn778y/J/C+oD8WiYOHQKwxTPv+vh4TO9uHhNTJ6+HAZdt75Mvz8s1uZjr/zjpz4beHxk//4D0kLDNem4fRatACq7hDiaxO/xwULe/F3f2+THHstX/I16MWvG3+5/aBEwAFXeTcvdBXwAX34VYaRE6qYm+o92nOIKqUL+Nue2iOtcrtQtO7682lyc4YD/jArvH9s9Fj52JicjLFC/Ud/54NWsPe2G/2EFfh/8sv/kAO//IX885G89f4v5OfHj0vS3PXn10sabPz2M8rnUcSiYGEOa/ZdX5PHln1O+Trsxt979yqpGXqBULy57b8H1wG/cOCVwc/ICrmp3uO2Gisb5AdnS8XBPQPPyaMPH4Nw9dcmv2KYZNdMGZe5Kv7HxoyVa0bn7FCP9ytlXySMGWs/bpvyh/bPIeQ/f+SwPP3vL1mhP/5D5ajep6VlC8UDFbbnhANrSPHo2ll6aw5246Mf//G5i4RizTSqxHVPleuAf1qqtlWJNAtVxF31ntdR5J8J9TNLBnxoe2ovA34MZKGKjxB+2+Q/lP82YaLnCn05rvyd37UfCPyvHu+Wv+vaL9850Bnbyn5aqve69hx8n9PdXST/oIqP7wE9b3aXfA0O3KwdNVqW1H1aKL56Xfbfg6shWxha6PnpFiqb2+o9kZ907V7YdNF9/C2haDlV/DRCVb35xpny4tIvy7KP14US7vvDvxP/7h/fsdT+b7nygx+UOElT9b5l3Q7l8yg6UHjQEeBmq86Xtm6xB28ptvJDmhpcb7V0HfCh1zR5MkIFWL2nKOgOk0GbTucBflGPA1Tx0+TK3/mg/P0X5tuPP50Qn4ot/lt+sGCx/d/14eHDJQ7SUr0H3fYcfp8LH9p06uYuUb7GtP73uccesYuRFD9e+u/BU8Av9OFTOVi9pyjpKmar1jwhFL20VPHRirPqk5+RHzQs9qW/Pij4b3Mq+lEG/TRV7zHTw/aceJp+h36+D1nlT6yQj9NuKVY89d+Dp4CPPnyhsrB6T1HStemgZ5ZtOvGw9is3S5LdNuWP5MeLl8h/7xt0TQJU9FHNvy2i/+avfPlGSQvd4VZ1c5cKRQN3cxc99F37rUrn0SPyJR6CFTte+u/BU8BnH355WL2nqLlp09m4Rb3WjsKBam4SW3VQtX/85s/Lyk9+2n4/adCjv9K66xB22w4q99NTsPce8HUEQ/sqPL02Wrh74iZvbNz9rL0jn2LDU/89eGzRYR9+OVi9pzjQtels03xjpvDcdus1VtAfIUmBXvsfLLhdPvP7l0nSoW0HIT+M38uwi85P1dwFVmMi5JeCIgNXQEcPB2Dp+vHhK1Z22agpTlI4DJF28chzwLf+Ne1CrqGPbdfBl5WvYfWewoA2HdWtWfTOtmuG4ygcw63gt/a+2ZIEaMlBr30Um3GCgt8L7kZ86dpgd7XfbYX7JF3I6ejuAk69iQc4xsXsux/SnkVgWo//vvkxbtaJnmkaZofXX+Q54A8WYR++B9u7XlBOpKN6j+l2oqAh3Ou+wbaxih8bGLi9/daPSZwhAKMlJ62wVhPDwkG4ZkrOvlOTFvkjv9IWCHi4Vbxgdabujgo263zq0b/iZp2IDeo1gg/4RlMDevDzQq7oethwXLdu4IXIL7qLSe7Ej5cv/fn1sa3wIvgiAKcdhoWxZcdPw+w7NMkepu5vpWYTF+4gsj0nXvD38cVv/JM2g7zR8zZDfoQMkU6jMAPrSRktOvYuTvbhu4CT4XSfELrtJkR+QgVNtaKOw7bxEtdWneYbZyRqS06lsGXHz5CPrTlpas1B9V539w/FLIoft4dgOeszKRJlragvK+Bb1xNs03FBN5zCigZFgcO2yYJWnTgNYqIt508n1ErW+BXyb7/lY6nZee9of/5F5XAtWlHZnhNfuLM7+66HtK/j+sxImL2mbJIylBXwqwtXE1yXqYCr3Y6DLylfw+FaigI2KHDYNllwymkcDsBCuM9CW04pCPmV9OTbK1D/R3pOrHWsekDdnsPvdfHndrPO2o4fcH1myKrDrOD39eHzVFsF3WpMVFFZvacoINxPqFfvoubJtvHT2jI30rYOrI3Mcrh3oDWpnAOxEO6feHyh3X+fJm1P7lWeXAus3icDNuu42XSE9Zm6Aib5pr0vc3tWZosO9uH38hKuBFTvt3ftU74GV8tEUdGdu2AfN3/kV0LxgX78qALi6OHDpeVGbvty4ECsKz/4QU+/BkO1aeq7d7Ss36F8nq2oyTLrrq8p57QA6zPRj8+h28CZVtbeLmUqO+Cflir24Zewy7qyxf77UtiPSFHDx5/uY3Dt+qeF4gVV4A1r50rY/u4L8xN5Om1QTrzzjvWt13D9+q98+QZ7liJt3KzGZHtOslwwbIQs+trfay/KsFkHIV+VdcgPVe1SprID/tDCyp680Dl0/Wn8gkdxoOu35MrMeEJQXPuV8FYsou8+TYdYVerV493yJ9/eJD/55S9cvR4D0mnad19MtxqTJ9cm08hR4+yQr1ufiaHbr7AfP0j5IU0NZbfDlx3wgesyz4W+NN1tK1bvKQ6wOUH1BRxbMVjFjydsYQljsw5ac9h3/x6Eeq/hHgPSaYTqvW6lLotZyTXq8lqZ/aUHta97uOMH2o2BVB7rHmG7VKCigM91mefauPtZ5fPsR6Q40VXxW9btYBU/phAcgw75aM2hgv/vQKcd7n9+3N28G9ZhpjXcg656z1bU5Js6c772Ig39+Hdt3cx+fP+VvR7TUVHA57rMs6EXTTtcO3epEMWFbmUmq/jxFmTI/9OrJrI1Rwr99it++LQ0fX97offehc/PmCSr/+eNklas3meFYf09/qX2Qg39+P99s/6wLPKke3BTQ7tUoKKAz3WZZ9ve9YJy4AST6brpdKIwIdyzip9sQYR8DNSyNee9fvtv7vmx61+DvwtszEkzN9V73aYuSgjDkIUuhm7bD76kXQ9O7pmm2SEVqrBFB+syZaOQTdeH5uYQCaKwsYqffH6H/Nsm/2Hmq/ff2PMv8ukN613320Oae+4drN5nj7NZR+crO7bL/qNHhCpmGlVS8dVSxQF/sAgv2cTdybXsR6Q4YhU/HRAscRiWH3vy/9uE7N5pfP5I3qrab5SVP/yB65YcwCrMtId7YPU+m+yh27u+pnyNaf1vEVt1fDGo14i+gt/XptMuGYf2HBUO11KcsYqfDjdcf4X88O/+n4oOVMpq773Ta//fvr1J/vnIYde/bljfAWRpXYVZjNX7bEMhSFeoxOpMtupUDKfX5qVCFQd84Km2WBX1j8rnp97EigbFF6v46YHDsBA4r7zsQ1IO9N+/6nJTTBog2H/tuQ75w3UPe+q1B/xZ//Dv/kcqD7EaCKv3GWcYMnflN7X78dGqw606ZTPFMH1pffcl4Gf9VFv0nKk+mLkujJLATRV/leYbPMWDEzzL6ctHyEUVG6E3zUG/ONg/9GyHp3YcwKacSu+WJEnngSOs3pN9CBZCvgpadbhVp3x+tOfY/xzxwf1Pt3Uvnz6r3no3Jxn0F//wd1bIf7Xk8zhQCA+iOBt83vly6rfvyMG9pb+2/Mven8msGyfL7/4O1ycmwTV/MM4OoD95+Rdy4k33AfaE9XGANpWn//1le8j0yt/5XRl+fuW9/XGAIP/oj5+T//G9J6T9//5MfnvqlKdfj5acexv/WO5p/LScd161ZMXHpq+Q7hOlt8ShkDV39eNC6ffB3GVy9JV/k1/mXy75msNW0XPiqDFy+QfLu5OYVYZ1LV3V1PBX4gNfKvhgmr2+XHEk0a6DLyuf5+57SgpdFR+a7v2WUHLg1Fu07OCtV6jg/39d++WPvv6wND3ZZg+gJhX+29FjX27FHq667EP2nZEs9NsX27Bll+RfVbdcsHqfIYYhX9C06uAArC9t/bZydTidwzxt9lZ0uFUxXyr48BfTZ+cHGdIoGYPNOar+e1Q1blryVSFKAjdVfHyjr7/2CsmN+YBQMgy3qs4YwC2nmu/4yS//Q/7uwH77cdz6GMEgbtyr+k61/qHnOqzHLnnhtaOeK/aAqv2diz4hX3/gT60/y6GSNbPnNbN6T2cZfN5QGTzkPHnp+R+UfA3C/fmDB0vd+MuF3KkW489XPd3mS2+kIT461dK603pTLxmycPM3ZZNi//3sux6yq6JESdHzZresmTNFjr2WL/ma3OiL5dALLULJ8+pr3fLgX/9IvtO2TyqF1p2PjRkrn/n9y+SaMTmJgwP/8Qt52rqr+s9Wxd7LNpxSrpmSsw+uykqvfX+rHnhCO1w7d9VjHK7NItOUR2//lBzcU7ogNGLohfLvyx+QmqEXCKlZgXzfoMaGq8UnvlXw4S8/M2OcYRj1kiG6W1B/es//0bY8EMUJqvj4mO1qL70cC9U86y6tXcmnZHGq+diy88K//bysar7jV2/9p10VR1X/m3t/bL3/c/nlW2/ZVfKwVm0i0Le99BP5VudeaXpyuzy258d2sP/58eNSCQwqP/yVm+1e+yxW7QFrMWfPV1/IY76Md6kzyvomMOrSifL8d9eXfMk7p06yiu+O2Wv2PvCVp7f/i/jE1wp+T3NrbrAhhyQj0J7zyUdLz0KMumyi3L1lrxAl0aO3fVJZmakZfoHs+9H9bNVJOFTyH/zrnVZl/w3xGyr8Hx4+3H575Qd/V4add54d/L2Gf8wCHH/nHfn5ieP2+z/95S/kJ//xH/Lqie6yeulV0I5z+60fsx7X+HJoWJItuHOddnPO8u8f5BkvWWZV8bc++CXp2PxwyZewiu+KOciU3/Nj/73D14APWWrTWbZ1s7L/nu05lGQI9wj5Ktios3Vjk1DyBRn0B4J9+8Osu0UDhX2EdvT5w89DWtXJYH82DNY23Lle+Roc4Dh3FXvvs+7tE2/IV/7r79vtnaUsnz7TeswSGpjf7Tng2xYdR5a26WzvUvewTpg2Q4iSCmc3TL1pnvI1257cK+3PvSiUfNiy8687lsnar4TTb44Qj/Be6JU/+4HVnHgujHCPMI/zAvbs+JL19nqGexH7QDv03qtgsJabcwguGKY/KPGRjn/iRp3SfN2e4/A94J+Sqg2SAW4Ot+JtS0q66Xcs186QNFi38XnCbXoUB/1r/iAnaYXh2dVfvoHBfgBr1z3tai0mv8dRgSHXzb1T+b3ijZ635OGOHwgNbHAAB8b6HvCHFvqH2iXl0H+vMqGeB1tR8uEbuK5KhyDAE27Tx96f/9giK+x/yX4/DVtknDYcnAvwxOOL2I4zAAzW6rbmoIDFrTlUzFUVf9c/CQ2o3c/ee4fvAR96zd42Sbk2bXsOAz6lA+ZIMDCu0mJV/Niqk07YJoNqPqr6zoFZSQr7CPDOYV+o1q/+8o1W9X6c0MCmzbpf+5ovfuOHQnQ2fRW/++23tMXRDDLFMDdKAAI5Z9u61bDhtEizpBRac1QfpKhuoH+ZKC0wMK4buEWrzr6d90vN8AuF0gnB2AnHz+85JDt+9KI896+H7MOz4gQXJVgFOt164PRZVundQd+9rjUHg7VszaGBOFX8HetWD/g8Trf9yo42qfsiV2YWG9RrBDK76vsWHUeat+ls2v2sLNz8WMnnuVmA0mjrmmXKVWjQuPgz0nzfnwllC3bpP2cF/n+2wv6Bl1+XAy/9oqL9+l4gvCPQX/sH4+zd/gj2DPTeoTVn3GT1RiwUr1C9Z8CnUrBR5y/qSq9ONgxDfvXVR7ky8z07qxsbrpcABFLBh15TNlYZ6Qz47ey/pwzCwG1X+3blCbdo1Zl5wxQegJUxCNQ3TLvCfjgQ9HFq7qtH35CfW2/x4+Mn3rF/zmv4xz8fB3SNHlVjtwddednv2odPYQg4qyfM+s1Naw4Ha0nngotq7A6GUmeomKZpD9tyZaYtsPYcCCzgDxbZ1temk7pjXHcdfFn5PNtzKI3QW4kj6dmqQ26gNQaPUpx9+wj8/TmBHhjgg9d077dcteZwsJa0rAr99Nv/Uh5VHJKoy1AZ0j2o1whsZjWwgG80NXSfbH58o3U7ZqmkiG49JsK9bq0gUVLh4xs9lqpWHQSFhiXreQAWKTnBnQE+WjjQqmXdDuVruPOevPhIXw4qdfBVx89etnfiZ71Nx7AK4cjKEpBAtui8x/B9r2fUuB6Tsg6tOrrb9DgAa+16dWggomih7153oBWwNYe8wHCn8pBE07RnGTPO7LX+GCRAgQb8wU0N7dabcM4ZD4luPSbbcyjtnFYdnZXYyGEFCCKKJ9xpY2sO+c4wrGLnjJJPY5vOLq7LzPdl5MAEXMHHhVrvWkkR3XpM3b5wojRwWnVUuo+/bQ/u8ZRbovhB5V53dgVbc6hcl1hZSNWu3PGzVyTLTNMM/LyowAN+tVS1SEro2nNGXVorRFnhplWHp9wSxQ+C/UoXn5dY98zWHCoHtumoCp7db7+tnGdMObNajMCL34EH/L4BgnZJAW3//bQZQpQVqM4seui72qFyrM5kPz5RPKBtDpuudFC5Z8splU3TpoNGnQyfattuZeO8BCzwgA/YiS8p0MH1mERnQYXGzS38xnu+JZ0HDgsRRWv2/BZt373dmnMHW3OoMuMnl85E6MP/t6NHJIMC3X1fLJSAj534koJhW13/PW9lUhbV3bLEunul3x41e14zh26JIoR997oLbee0WqJKjbA+llT2H31VMihfvXRhegI+2nRM00x0FV93K4nVe8oybNVx04+P6iGHbonCh6Fa3b574EpM8stQTR/+/teyF/CNEFvWQwn4Bcneib9fcytJdSuKKO3c9uOjeogqIhGFx+1QLcI9V2KSX7APX7V8BIdd4ZEhZpUpqyUkoQX8vn2f7ZJQ2g06l3GDDmWb2378DVue4WYdopC4Haq1P3/Zd08+G3rR8NJPmpK1gB/KcK0jxAo+hm17A9/7GRRVr5juNhRRVqAfX7cfH3AI1kYr6BNRcBDucRaFm6Fa3IEj8pVhWBV8VTYy5XB2VmWGNlzrCDXgD5aqDZLAYVvsalXta2V7DtF7Zt/9kKsL3gVWVZGbdYiCgVkXNxtzYNFDT7DvniKRoV34oQ3XOkIN+IVh2+SdbKvtv+eALdFZUA10Exjs6iI36xD5zs3GHJh910O8A02BGanZpJMVRgQt6qEGfDClKnHDtvr+e35xJCqGcO9m6Lb7+NsM+UQ+w8acDS5a4DAzg7Y6IgpUqMO1jtAD/pCmhk5J2LCtblcrAz7RufB5Mfuur2lfhxYChnwifyDcu9mYg7MrOFRLUTuejSHbUIdrHaEHfDBNWSUJomrRQYjRVSmJsgor99xs1uGOfKLKuQ33aJvA2RVEFLjQh2sdkQT8vpWZiRi2RbhXrXEa+aGcEFFpqBK6CfnoF54266sM+URl8BLucVItC1MUB8OHXiApF/pwrSOSgA9JGbbVTXhzwJZIDyF/6k3ztK9jyCfybu26HZ7CPTfmEIUC1fvIOlYiC/jVUtUiCajic8CWyB9zVz/u6vOFIZ/IPZwn0ejidOjCadNch0nhOvaaepNTbuTFkmaDeo0OiUhkAb+wMjOaviQvOGBL5B9UD92GfPTkE1FpCPcLXJxSC+i55/crCpcpx17P7lknhsiGKIZrHZEF/AIj9iszOWBL5J9CFdHdjvz2516UbU/uESI6F3ruvYR7bM0hCpUp0vOmqlHDkLHpreBHshqzWKQBv2/Ytl1iCsO1HLAl8hfC/Re/8U+uQj4O62GrDtHZ3A7UAgbcsc2KKApHX9lf+kkj1S067VFW7yHiCn68V2bqTrDl7U6i8rgN+VifuXb900JEBV7DPXfdU1SsAr6ygj/xktGSUqYZcfUeIg/4ca7iM+ATBcdtyG9Zt4OHYBEJwz0lC8L90ZdLV/Br0rsiM9+XbSMVecCHXlNiOWyrW5HJbQRElcHnkO7Ane7jb8sql6GGKI3QptZw5zqGe0qU1xThHiaOSmUFP9LVmMViEfAHi2DYNnYrM7lBhyh4OEuibu4S5Ws2bHnGHrolyhqEe6yNxeeAGwz3FBeq/nvDelw3/nJJocgOtuovFgG/sDIzfgdf6TboEJE/EEh0G6lYxaesQWvapGn32Gtj3WC4p9gwTTm4d5fiBUYaB2xjU72HWAR8iNvBV9ygQxQehHtdFR8VfFbxKSs6uw7b4R6D5m6g1Y3hnuICA7YH95Q+46nmggtk4qgxkjL5KA+26i82AT9uVXwO2BKFq+6WJdq5FlbxKQvWrtshk66/R7pPvK19LS6OEe65CpPiBP33qg06dR+5VNLGiMFqzGKxCfgQpyq+qnoPDPhE/kJQmX3X15SvQQV/45ZdQpRWOPuh0Xq4gc8ZnA7NcE9xc3Bv6UJ2SvvvIz/Yqr9YBfxCFd+MxXCCroLPE2yJ/IfTNjF0q7LyAVbxKX3Qbz9t1v32Wlg3Rl4yVu7esofFJoof05Su9u2KFxhSl7KAb120bIhT9R5iFfDhlBgtEgNs0SGKBgYFVQqHX7kLQURJgDtTCPduZ0wQ7lG556pmiqNjr+WV/fdjR16ctv772FXvIXYBf6h1BdQbgyp+d09PyedQvWcFnygYqOC7qeJjfSBR0qHfHuHe7TAtPjfu3rKX4Z5i6+AedRtl3fjLJE3iWL2H2AV8MMTYIBE7fKz0yZmonhBRcHRVfBx+tXb900KUVE5Ljtt+e8CmKVTuWWCi2DJN2f0Pm0o+jf77eVOvlRSJZfUeYhnw+474bZcI5Y/9puRzXJFJFCxUKafeNE/5GvQqs4pPSeS1JQdm3/WQzL77ISGKM117Ts0FF6aq/z6u1XuIZcAH6yIwssMC8sfUt0pZwScKnm6nN6v4lDS4IMWWHC8tOU6/PdbIEsWdrj1nxlWTJEViW72H2Ab8KKv4h7UBPydEFCx8nrGKT2mBaj0OrnK7JQewzAHhXjeTQhQHplWZ3bH+KyWfR3vOjAnpCfhxrt5DbAM+RFXFP8wKPlEssIpPSVdO1R7Qb89hWkqSn+3psFt0Shk78gMyc8LVkhKxrt5DrAN+VFV8XYsOB5yIwsEqPiVZOVV752Ra9ttTomC49nublC9J0/acuFfvIdYBH6Ko4utOsWUFnyg8bqr4bU/tFaK4KLdqj5YcHF7Fk2kpaVC5VwV8w/rfkro/lpSIffUeYh/wo6jiswefKD7cVPF5ui3FBfbaj7u6yVPVHtiSQ0mmG66dOGp0ag63SkL1HmIf8CHsKr7qkCtW74nCp6vio0rqZeUgkd+c1ZfYa9994m3Xv87ZksOWHEoqN8O1d7J6H7pEBHxU8cM83VZ1yBX774nC56aKv2oNq/gUvuJ2HK8XmfiYRtWeW3IoyXTDtYj4adl9n5TqPSQi4MNpMVZKSFSHXDHgE0VD15eMcMUqPoUFwR4XleW04+D7yKKHvitzVz/O7ymUbC6Ga3FybW7kxZICianeQ2IC/lDriinMKn4pbNEhigaqnLpKJ6v4FAanzx6zH17acWDqjHmy/PsHZcK0mUKUdFkark1S9R4SE/Chr4rfLQHSnmL7oZwQUTSmL1b34qOC33ngsBAFYcOWXVawb/TcZw9Or/3cVazaU0qg937dV5QvwWrMlAzXJqp6D4kK+Kjim2bvWgmQboMOEUXHTRV/45ZnhMhPTrBvuHO9p7WXDlyYstee0sa0Hgf3lt6eg+HaP5t6raRB0qr3kKiAD9VS1SIBV/FV2KJDFC1dFR9hjAdfUaXwMVRoxSk/2CPQox0HW6BYtae0+dftm7Qn186f+nFJgUNJq95D4gK+dQXVHWQV/zBPsSWKNYQm1echDr5au/5pISpH8fAsWnHKCfYoBGGIFi053GtPaeRmNeaSuk9JGli/1U1Jq95D4gI+RFnFZ8Anih4OBVLZ8G31oStE/WF+A4G+3OFZwPcHpx2HQ7SUZgd2tmlXY86YcLWkwKHBTQ0rJYESGfBRxe81pUkCkGcFnyj26m5Zovxc9OXgK/OUUPo5B1ThgZaccoI94KKT7TiUCVZJu+PbjyhfkpLVmKYYZqgHrfopkQEfhjQ1bLBuAXVKyIZeNFyIKFoIUKEcfHXigMhvfymULp0HjtgfHyM+cntZB1QVQ6UewR4n0TLYUxagcn9wT0fJ57Ea8y+np+IOVr566cLI17OXq1oSDFV8w5Cd4iP24BMlA4JVx+aHSz6P0IZ+6prhF0pZDOvL4wWjCyG/54j1yT9G5LzfEUomfCxgw9K2p/b6ciAaZkHQjsPNOJQpLldjsnofvUQH/MFNDe2nWlrbrXfrJSQM+ETx4KzMVFWSMGy74u6bpWzV1h27C8aJvH1I5K1/LwT98z5YCPpV5wnFG0L9tif3ysbvPCOdXYfLbr8pxmBPWaY/2ErkznQcbLUtydV7SHTAB1TxqwzZJz7JH/uNEFEyoO9ZFfBb1u2oLODD+ZeIvHtM5NRx6wvObwshH48hv1N4rrrMOwQUiCBCPeAE2qk3zWewp+xy0XuP1Zgzkz9caw4yZZkkXOID/pCmhs6TzY+vNQxjqQSMO/CJ4sVZmdnz5sBLtbAyE+0Y9ddeIRV53++LnOgqBHzHu78sPAZdWAj6Q0YW2noodBiqbntyj2/tNw58bOEiUjfUTZQFONiqa+f2ks+jev+X02dI0iXxUKuBpOK7UbUYK0+LzLfe5VdgogxxAtiOdaXPIGmzQl/FAR/tOHbIP3Duc6ffKrTvvG19OR08stC+M5jD+GHAWsuN397lW5XegWIOqvUM9kTvycjBVok81Gogid2iU8zPw6+6e/z9RkFEwdK1TPh2sq3Tj18K1mqiov+mdRHQvUfkndfOrviT7/YfOOxruMfHEg6nWv79n3HdJVER3cFWgOHahDN7TXk4DdV7SEXAh8FNi1Zab/JSoeM9pYMATyQkih9n2LYUu03neZ/aNuxWHBebdBDsMZiLoP9m36pNhn3f5UZXvqnDOZzqf+/6tR3u2WNPdK6f7elQVu9TshozP6SpoUVSIlUNo9YFZoPfazOJKP4m1M9Ub9NZ97TMumGK+OLCcYW2nNMu7wqcPF54AFp3hvS18HALT8Vyoz8g5UConzBtBodmidywwpVqcw6k4GCrxK/F7C9VAT+KtZlEFD1sONn6YOmlB51o5ahkJ34xDNJedMW5Q7duFId9DOdWD7MC//vZs1+mmuEXeHo9wjxCPcI922+I3HGzGhMBP8kwWDso4Wsx+0vdyoeTVhV/cGFtZllfvbt7eoSIkgVhTbUTH206bU/ulflfuE58ger7sAkixzsLvfflcO4C/Pb1wkUDQj6GdFndd01XwcfHxajLJtp3eHARyFBP5F1X+3bl8xNHjZG68ZdLgplpGawtlpoefMfQpoZ8JQO3HLIlSiZUZlU2fOcZ8RVC+EU+fVOzB3R/U9jGg759PP7z3wu9+6d8GBBOI+vPZewHe5UvwYYl9NVzGw5ReTBc27G59O77NBxsZf0WV6dlsLZYKpc2V0tVS9/azJz4iHvwieLLbrt4sPROfF/bdBzYrHPh7xeCuZ/Q+uPs2Qenwj/ogsK/E4drZWnnPv480Np06j+t998uXPRYF0W596tbpI69nhciKt+BnW1pX415aHBTw0pJodRV8KGwNlMahIgyw2nHKAVtOp0HjojvsPdetT7TD06Fv+fVwlaeN37cV+V/qXCqLp5LQ6Ufv0/8PnDn4q3/e/bvFRdRaGdC0O9ri6oZdp7UXFS6nenoy/uFiMq3+x/+Rvl8wldjpm6wtlhqS0AcuCXKHt02HV8OvRoI1mcidCKAh8Wu8qOC/Zuzfx7Du1XWl/Yqq9o/6PxCKxGq/XGp+uO/u/dUYf6g953CjxHq8baMeYbch98nnS8OXMkvdTeHiPRQue+yKvilJH01ZhoHa4ul+h5vpQO3RJQsum06257cI8333SqBGDqm8DbMkD8Qe3gX7xwf+HkEfgR/531noLeq7+eMQedeCDivP+vf887ZP3Y2CiGk44EQj/8QJ9DbP+f/WQBjL7nICvi/GfC5Y68dFiIqz8E9u5TPo3qf4NWYqRysLZbqgI+B25PNj601jKoVQkSpp9umk3/11/bDjwOSBv4PiEnIV7EDd3oO3Rr34WHK51GF5CGFRN7tWFc6/2K49s8SvBozrYO1xVLZg1/MrxNuiSgZxk9WH1zUZlXxA4WQP3S0UDhyoy5SPs8+fCLvDmpOrk34cG1qB2uLpT7gAwduibJDdzJpIIO2/SHkBz14SzZdwGebDpF3u7erW9MTPFxr9ppys2RAJgI+Bm5N0yx7Nz4RJQcCvmrn+banAq7gOzB4ixWaFKiJV6jbrVRVSCIa2MG9pfvvMVy7JKG77zFYO6SpoVMyIBMBH6rFWGm94UoFogzQrctEH34osEJzeG22dtaHjBV8In/p23Mutk+vTaBDaR+sLZaZgI/d+MJWHaJMwLpMlY5nfyqhwdpKhPyq84SCoQr5R1/JRLGOyDeq9hwM1y6p+5QkkL3zPu2DtcUyE/Chuqlhm/WmXcrEShBRMqgq+ND5kxD68Ish3A+bUAj75LuJl7+/5HP4us19+ETuqdpzEPFnTLhakgatOdUp3nk/kEwFfDhZqOKX/GqfG/l+IaJk0wX8/Ku/ktAh5KOSf/6HhPylX5XJ4gyRG7r2nITuvs9Ua44jcwEfu/F7TUnt0cREVNiHr9p93tkVYeC74Pe4RtNnEy9XB46jL7NNh8gNXXtOAnffZ641x5G5gA9DmhpapIJWHSKKP1UVH0O23cffkshgjSb78n1Te4X6zisr+ETu6Npz6sZfLgnTnrXWHEcmAz7oWnUGwj5OouQY+aGxyudD26RTCvrx0ZdfPVyoMtpNOq/nhYjUcCicqj1n4qjRSWvPeWOQKQslozIb8Eu16gwfWnoIjgGfKDlGXVarfH5/Vwyquvbw7VVs2alQzbDzpOai0ndDeJotkR7671USdrgVDrRancXWHEdmAz4M1KpTM/QCIaLkG3mJuoLffeJtiQ227FQs9+H3lXyOLTpEel3tbSWfQ/99wrbntPdlvMzKdMCHclp1iCj+tAH/eIwCPjj78nE4FnlWqxi0xd1XnmhLpKa601VzwYVJ6r/PdGuOI/MBv3+rjmpNJqtARMmBTToqkffgDwQn3l74+4UHq/me1F6h26TDNh2iUtCeo2pDrvvIpZIQmW/NcWQ+4AO36hCljy7gxxqq+BjAZTXfNe2gLQs0RCWpLoDRnnNTQtpzcKBV1ltzHAz4fdy26nDQlohCgQo+KvnszXelbuolyuePvsJd+ESlqPrvEZtrR42RBMjkgValMOD3QauOWCF/rGYFFAM+UXKoqviRnGZbDvTm10wpbNph0C9Jt0lHtyGEKMtUFXzkoonxD/iZPdCqFAb8ItVNDduefunAWtVret48LkSUDIlu0+kPm3bYtqOkOvAKLTos0BCdC+Fe9blRO+rDEndozcnqgValMOD38+P8z1Zab/Klnuc3CKLkSN3nq9O2g4p+9TChs+kGbdmHT3Qu1YYp9N9fF//tOWzNGQAD/rmQCBpKPcmAT5Qcqf18tQ/ImsBtO/1MvFy3SYd9+ET96drXYt6eg605N7M151wM+ANrtx4Dtuow4BOlQ270ByTx0K6Daj6Dvk3VogNclUl0rqOvKD4vDCPWAd+0KvdDmhp45T4ABvzSGq3HOR807MEnothh0LfpVmUqgwxRRqkufCdeMlpqhl4gMXVocFPDSqEBMeCrzZZ+qzNZwSdKBt3JpTXDY/tNq3xO0L/o8kz26GOTjirks4JPdDZkGlWuUR3+GTGcVnu9UEkM+Gp569FU/BPHXs8LEcWf7m5bzbAUBnzH4PcXevQR9jO2dadesQ8fQUZ34UeUJbqL3v8Sz/YcrMRsYt+9GgO+3gYp6sfvOcEWHaIk0N1tS2UFv7/irTsZad/RbdJhFZ/oPbqvk3HsvzdNWcuVmHoM+O6slL7VmazgEyWD7hvX2DHqIJgqCPbF7Tsprurr+vB54BXRe3QXvDHsvz9ULbJKSIsB3x0kBbsfnz34RMmg23leM+xCySS07xRX9VPWq1+naNEB7sIneo/u8yFmFXwTffdGUwODmAsM+O5ho84qbtEhSgZdr3VuTArWZFbCqeo7vfoXjBMZlPy2Je2g7SvcqEfk0HUlxKiCj333y9h37161kBctVgW/1nrMH3pRjRClFe5U4dbtwb0ddkuDc5T5hGkzZfZdX5ORl+Qk7o69rq5M5UZnqEVHB2H//EsKj97fipy0Chm//Q+RUyckiSZe/n7JH31zwOdQsWycVC3jp9TJhPqZ9ttRl00UoixSdSWMHRmfr5GGyIYhTQ0tQq4x4HvXaPb21llvc0KUEqUCfX9dO9vs5+/esif2IV/1jSsTA7blcir7eJinrJBvhf13j1lv/1Pk9NuSBOM+rG87wsex048/8pKxdtAfP7nOfpuEC1giP6i6EnLxCfiHqqzqvZAnDPjedQ8dftE06+0+68EyPiWS20Bf6tduXrFIvviNH0qcqYbHaq8aK+SCUV3o2R/ctwsb1f3T/xn7wI9VmS0b/83161HV3719k/0AVPQR9nHHCoGfKK1UrYw1Q4dKDLzBvvvyMOCXoWnS0HzzvndXGVLVLEQJUEmgH0jcVw3qDm9hBb9MqO7j4QR+VPhPv2WF/bcKlf7T78Qi9E+8orLKIz6+8ejY/LD9Y7bzUBYNHxr5IgL03a+uZt99WRjwy9Q0aUhL896TOaPKWCpEMeN3oB/onx9nuguQ2itZwfcFKvzVwwsP6dte44R+u73nrcL7CP697xZ+LgQYsq256DzpfvO34ge281AaaRcRRHyKLfbds+++fAz4FWiaPLixZd9p6/6tWStEEQo60PcX97YFXcCfOCGWpzOmgxP6YXC/gICAjzYf+yLAetv7TuF983ThIgB6i0J5ryagFx/c5bw/6Hz7Td01vy9tTx8Qv7GdhygUhwY3NTQJlY0Bv0KmvDvbkMHsx6dIoAKDfvigA31/oy6Nd5uCtjI1OuMrMqOC8D+o79tOwN99pn2iNpCA31//dp4kbZqibIvxmRCH0HcvVBHuwa8Q+vFNMWcLUciw0WbNnCl2xT7slpnYV/Bf0bTocMg29aK6iMPn5erPjpcd61YLUZJFtCbTNE1ZyH33lWPA90HTpMHtpvTyVhKFBqH+sWWfi6wXPu7VSfUGHbbnZEHdtVdIlHZ8fbV0/O3DQkTuWeF+9eCmhnahijHg+wRDt1bI3yhEIUBbTlRwyFucN4mgPUd14ZP5E2wzApuSoj7MDFX8uA+kE8WFFe5brHC/UsgXDPi+GtwoYvAcdAoUqve6HvMgxX1NIDfokKM+4io+wj1bdYhcOVQtskrINwz4PmqaZHRj6NZ6Ny9EAUGPb5SwMSTOdAE/6tYNCk8cZi3QpuOs2CSiAR3iYVb+Y8D3Wd/QbYMQBQSrMKMU9wFb3Z8Pe/CzY2JMhqlZxac4QrulyuFjv5YQ4DCrmzlU6z8G/ABw6JaC4uy7j1KSW3RyYy6WmuGRn85IIYnLtiRU8Hdv54gWxcvQi4ZLxBDulw1pamBrcwAY8ANiD932mmuFyEdR3+rHKZ66qk+UdOcBcD1mtmDQNi5/51sf/BIHbomKYGMOT6oNDgN+gHDSrfWmXYh8EnX//ahL431os+7uRv017L/Pmrj8nXPglpImf+w3EqCd3JgTLAb8gJkyiEO35JuDe3cpn29cukI+/OGcBCX2/fd72pXPx6Unm8IzMYSZi49+tFbWf32r9nUYuI26xY7IEeF5JhiqXSgUKAb8gBU265ycZr3Le7NUEazG1K3H/JObF8iWv90ZWMiPff+95gTbqNcmUvjqPx7s3zk+19b/9Vb59B/PkoUNjdrXb31wmRDFharl8njPWxIAZ2NOXihQDPghKGzW6Z0mRBU4uEddvUfQcB5Bhfw4B3zdADLDfTblRn/A7sUPwrBhNWd9rjUuWSHDNDMqmKOJutWOyKEK+AG06HBjTogY8EPSNGlIpxXyuT6TytbVrg4Ff/SH9WfeDyLkI9zHecBWN4DMAdvsqguoD//BB1rP+hxD4F/+l83aX4cqPgduKQ5Um3S6e94WH3FjTsgY8ENkhfwNppg8qY3Koguwn/7jmWf92O+QH/f2HN2fT921lwtl07QA7t6gWo+2nP7+5HMLzrrYHsix1w7b/fhEUVP14fu5B58bc8LHgB+ypkmDV3J9JnmF8Kqr+A0UKpyQ/9ErKt9+E/cTbHUHXHGDTnb5PVyNcN+4dGXp55euEB1s1NHN1BAFbeSH1J8beR9CvhXuW7gxJ3wM+BHg+kzySrd5A1s80B4wEIT8J/9hn6sBQJVRl8V3RSaCkurPCKfX8oCr7EJ7ll99+LpwD7jYdvP5tnnFIiGKkm6Tzv6jR6RCWIfJgz8jwIAfEa7PJC+89N+XsvzeZleVxVLi3KKjG0Cuv/ajQtnl14FXbsJ98WvdDNxGfXgdZRsOL1SpsE0HG3NuFooEA35EitZn5oVIAa052v77T80UNxqXrLT3dZfTl795xcLYthTo9t/PvGGyULbVXllZwPcS7gF31NxcUOPzigO3FBVd4aaCFh1nHSY/uCPCgB+hwvpM7sgnNTcH4/zRH9WLWxgMLGf4dvf2TfLobZ+M5WmcugPAakM47IjirZI1qV7DvQNtOhy4pTjTt+i8KmXgrvsYYMCPWNGOfIZ8GpBuZ7ab9pz+EO6f7TjkuS8fYWTH11fL6s9+xAr8GyUOcAGkurOAYMf+exo75mIpB9ZelhPuHW6q+B2bH+bALUVGFfL/7TXPAf8N7rqPBwb8GOjbkc8hFBqQbjvMQKv63EJffv9d3m4g6GNAMA5BX9e+NIvtOZm3dt0OmTbzfk+/xj7EavNOWbigsuF0NwO3aNHhwC1FRbUhrfvtt7206ZjW/xZy1308MODHRGFHPkM+nU23HQb+6A8rW1+Jvd1o2fmTz80Xr+IQ9HUDyHU8wTaz2p97UabNul8a7/2WdJ9wf2iPvXnqe/vKujs2EA7cUpyp+/BN2d71grhgH2RV3dSwTSgWGPBjxAr5LTwIi4rptsMgiGBFZqXwz3nwgQ1lVfMhqqCvG0DOjbmYJ9hmUP7Ir2TBnevscI+Q7wXuiCHc+3kKNAduKc5UAd8Ud334PMgqfhjwY8Y+CIshn/rotsP4cYBVsUqq+VAc9MPYutO1c7vyeR5ulS3dx9+SVWuekEnT7pGNW54Rr9Bvjy1Tpc6UqATadHSfrxy4pSiMn1InQxV3mLYf2Kf65Qj3q3iQVfww4McQT7slh247TCX996VUWs0HBBVs3Vn92fH25h1U9YOoTGrXY97I/vsscIL9uKubZOUDT3hqxwGnJafSfnsdXEDocOCWoqCq4ne//ZZ0HHxpwOcY7uOLAT+mcNqtKb3xWFNCkdBth4FK++9VUM3Hph20Fuj6h1XQQlOo6o+3q/q6rUBedLWzgp9llQZ7WNiw1A73frS66aCnX3d3DBfCWx/8khCFaUJ96bNU0KYzUMDvNWUDw318GUKx1rzv3Q2GVJXXL0GJhlv1Wx9cVvJ5BBIEkzD8/Od5aXl4pfz9d/255sTtYNwWnlA/w36r28U8EFw44O5AKViPuXPbPULpg756BHuv/fXFCneqWn0bpHXrxIlu+fh14+SE5o7WF7/xQ/tzgygMx44ektX/9fdLPj/iggvlV1999MyPEe6HNDU0CMUWK/gx1zRpyALrOowrpzJItx3G7/57FadtBxX9cvvzi6FKiUq+U9lfM2eybF2zzP45t608umHeBXM+IZQeqNbb6y5n3V/W8KzDGXj1c0uO13//woX6ViDc7SIKywiryKIqtBS36ViV4X0M9/HHCn4CNO8zawzp3WndKAsv0VHk/td1FyvDLoYBg+jBd8Pvin5/6AfFNxvsZ8b7ePQfAsOFgaqF6dALzZIb/QGhZHOq9Z1dh8tqwSmGQF/JbImfPl43zv48Upl910NSd8sSIQoDDjFUnVQ+c8LV8sSiO/dVFU6p5bqnmGPATwiG/GzRtZ/Av+17I5BtH14EHfSLIeAXgv9Yuyl09/c2lXxt7VVjZN/Or4pb+Vd/bVeIESJrhl8guTEf4HrNiGHVZcOS9RW14TiiasdR+Zcft8ucudOUr8HH/PLvH1RuOCHyi+77zsUXvm/fr+57hOE+IRjwE4QhPzvQroJtGqUgqOCUzbhA0EdgaXl4lbYqGYbc6IvtkF4KwiN0H3+7ZFUY/4zWRxbbvfwULvz9YNVlpRV7BPvGJSt9aSsLwu13zJYf/KP6XKCpM+bJ3FWPC1EYEPBLnC2Cga/rrQfDfUIw4CdM876enCGDkexyQqml+CJrQ2hxc3BOFBBYUNHXBZekaLn/Vll6+3Sh8Mya1yxtT+2Vctl97g1L7bWXUd/lUsHF8I3/dRIHbik2Six3OCSFcJ8XSgwG/ARiyE839N2j/14Fh1H90R/VS5w5VX2EfbxNMmzjYSU/HKjej5vcJOVAxR6hHhX7OAf7Yrjr1bJ2pfI1CPcI+URBw/cfzDcVzX8x3CcUt+gkUNOkoXlTTqJ5My+UOqrKPSC4xD3cA8KWfTLu5p329p3l97bEqgfaCwx5UjhWlvFn7bSs4eMMlfukhHtYuGCpdugXXxN4wi2FAfMedXPPDHYz3CcYK/gJxkp+Om1evlA5QIrNOdigk1ROZf8H/9gmP32xMxY9+268cXCd1Ay/UChY465utIeedRDiUanH50NSLxwdHLilOEH1/is3XXro7ePHGO4TjBX8BGMlP50O7t2lfD6q1Zh+cSr7uEhBxRX7yFHdx+8rDusLS1m7/mmhYG3YsstVuAe04iT5rlAx/B50vw+ELtUKQyK/WBeRh+5v/w3DfcKxgp8ChUr+kK3crpN82OuO/kcVBGKcYptWqOijsv/Tn+4/U+HH26hhfeahvc2s4gcIm3M6Dxx29VpU8HGBmKR2HBUO3FI8GPtMqbq+aZLBbTkJx4CfElyhmQ67t29SnmCJCjdCTRb99KdW2D+at4LQYevtIfvtiRPdfT+XlzC03HerLF3MjTpBwL57nFDrRZy3SZWDA7cULYb7NGHATxGG/OR7bNnnpGtnW8nn0dqCA3toYE7QR/BXVUI/PCp35nU33jRJ3MImHWzUIf8tuHOdbNzyjKdfk7YqvvPxyBNuKXwM92nDgJ8yDPnJhvWYPYpgir71pPfgx4mbiml/XJnpv0pWY6atis+BWwofw30accg2ZfAJ2jhp0CRTejcKJcrRl/crwz189Apet/kF1dK//+4G8Wrjll1C/mp//kUp1+MbWhKzickNDtxSmKyssMHKDFcz3KcPA35KNU0asoAhPxmw4xrfrHF6rQoGa+O8ZSZpcNJuOcFw21N7pfv4W0L+WfVA+ecM4ELtri83SJq4acPDXnxdQYBIBeHeygrp+uShMxjwU6wQ8s1VQrHjhHpszEGw3/H11dpv1mlYBxgnaM8pR/fxt7ky00deVmOWgraWf/mXdkkLXMg3Ll2pfR2G8onKYWWDFob7dGPAT7mmSYNXMuTHg3NbHYHeCfVYi+nWMPbb+gatOZW0dbSs2yHkD6+DtaXc9T/TlVXcnHB79JXo18dS8iATWNmgvKEXSgwG/AxgyI8OQj1upSPQY4AWoR7V+3Kkrdc4SuVW7x2o4mOtI1UGw7V+/Tnic6NlbXq+zKH1iMhnZl+4XymUegz4GVEI+b28Yg8JQjxWXqIFZ+uDy8oO9cXS2GschUqr945Va8rvG6eClT7/GabpIrjl4ZXa38uoSzl0T65Z4b53GcN9djDgZ0jTpCEtpshs612WhgLgtOCgUo+KPfbZ+z0Eh17jx1vXCpXv77/rz+w5Ks9uT12lc+EuSIfPd0FwEVzp3Zk4wEWom4/TCdNmCJELb1jhfiEygFBmMOBnTNOk6m3WJzqWLOeFfIHqfHELTtCbLVbf15iqgcIw2cOY1sMvfvWPZ9G2p/ZUPFw7EITjJH9+2K1GLi5Spi9eLiMvyQmRBsL99Va43yCUKQz4GWR9oneacpIhvwL9q/V+tOB4gYFC9uh693irvwUsbIDhyszyVLIaU2f1/cntRnTTmuPA2RlECodMwY77IZzGziCeZJthzft6coYM3mm9mxNyxVlv6Xegv3BojXx66jy5ZsJM+8d3P/pJ7a/B2swtm3cKufPTn3bKjTdNEr+13HerLF08Xcg9tDdNm3W/BGn5vS2ysGGpJAnuPnids8FptuOn1Mn4yXX221GXTRQiKYR7nE6bF8okBvyMa95n1hhyeqv1br3QgFCt79q5XXZ/b6Ovwb441P+X8XVnPfetHavlb3boT6pc2NBoBZlmIb05c6f52p7jqL/2Ctm57R4h9xbcuS7w9qZhw2rk2Y5D9tskQNV+zi3TKh4SHnnJWCvk18qE+hl24GcbTybttML9zTydNtsY8MnWvPdki1FlJKvcFTB7xeXmh309MRKhfqIV5mfXLTkn1PeHKv6/HdRfUCSxUhm2H/xgm9z+57MlKAj4CPqkh9WY4yaH00KTpAvgu768wLcB8GII/Aj6E+pn2m+H8jyNVCscYMUd98SAT0Wa951caYixQjIuiGD//2/vboCsqs87jj/n7kKS2io67ZgZk7hWp1UnlMU4SLQNq5EXaRVYnMQiwgoZ0U6VXQRnfCm7gMm0SLILdUSYQcEoQzJRFk0FdDoutlp1dHYNTo0zWJaqaUw6LvgCDrD35Dx398Bl3bv3nHPPy/+c+/3M3FlY76qw99793ec8z/PXMK+Veq3Ya8j34sOPeuW2By6Vz46U/39Ys3qzXD97vmB4fz3pvEjXJ1LF905779tiXDG67YkXZOLEBjGZbsbS4fk4FId92nkyRXfcr2QNJlwEfJyivftosyW5quz50FNldQvOa8+Ec/y7BvlGp1I/2Qn1Z59VJ0FoBd9LP762IWg//sUXsRd7qCB9zUH07dsgY844TTCy8y5pjmR7Timmz6roG099A5oEt7o/4dr5hY9ILXtwDeZmAQYR8PEFTsivd0K+9uXXSRUIe3BWq/U3TVtetgXHK6/9+IT84UVdvXe13dUorcsaBaXp1qGbb98ocTO1jU03YengtwmHc2nrju7Vp5Unddw1mGzKwSkI+BhWNWzYCTPYu9V67a332oLjx5qtC+T518pfWSDknyqu6r0ac8YfOVX8+MNrmujmnK6QD7fywtSB25WrWgqn75bz7bEz5Hcf9cq7H8S3FnPslTMKg7r6kbBvLDbloCQCPkoaDPmPSsY27IQZ7MOu1pfy6ZGDcteD3/X0A56Qf1Jc1XsXw7alxTlcOxzTBm699t3PdV5f9DVGfTgY8rV1T29xBX7CvpHYlIMREfBRVlaGb8PqsR9pvWWU9If7sgevLnwsh5Afb/XexbBtaXGsxizn2V92G/Gc8Np3f/ZZ58pjy98t+c91AP/NwbAfV+B3w/6E6xjqT4gO065lUw7KIeDDkzQP37qnzupWnEpE3Ybjhd+Qv2b1ozJl8kypNmHtFA+CKv4XafV+/FX3ysFDhyVJJgzcen1s6mvM+mWv+xrQdyv8L+/d4QT+Fz29TgTl9uwzoBsrHaZd0jJ+dLhHciOTCPjwLG3Dt2Gtu9Qq2qxJi32tuIyS/gDXzTpe1meq5jvapHlxdW0/7Vi3QjrWtkkSmhdNk/b75wpOSmq4djgbH96e6JteHarVU5XLuXXWTwrFhEq47TwDgT/c07eL6TYeHc6ddOMdHKwVnf1O5X6BU7nvEsADAj58ScvwrQZ7bcepJNjH1V8fBCG/tCSr90qHbfe/0c7KzCJxr8Ycyde+VifPPtOdyMCt16FaDfYa8MOmQT/q6v7A2s159OuHyuq2JdfIMC38IODDt/Zue4zkj7eZePJtGAO0Jgf7Yn5DvlYttWXHtE0iYYvqRFA/OpwK/mKnkg8pbM3R7TkmSeINr9erSuX67sPiVveff21LJL37tPCEQltynBezUS0M08IvAj4CM2n4Vgdot6+5U/a+sEOCSkuwL+Y35Gv1Uk/21I9ZlOShQcXqv/kN6X7hRwIzhmuH0je5WsWP63ngdWOOhvsH/vHfAx+MF5RW87Wq/5wT9qNo5dEWnmmLlheCPi08ntFvj4oQ8FERJ+Q3OCFfV2nWSQLC6LNPY7Av5mfwVmm40YN/rp+dvS0YJlTvXQzbJr8acyRxDdzq41Efl15ouE/6dSjqsD/hunmFsE/QH1GfLXYj/faoBAEfFUuqL1/bcLa2LixU74NIe7Av5jfkK90L3nxHa2Zadkyp3rtYmWlm9b6YXs2aOLFBoqLDtDpU60XxvntTRBn23V591m0ORb89wkHAR2ja3zjWEUdfvlbqNdgHbcfRy+D6g3TyhGz9YAkS8rPUsmNS9d7Vt29DVQ/bmjRcO5woB2413Ouw98cfl7+yGNVQbZjcsL99z9pQe/Zp3zmB/fYIVY0AIdm9cdWuqbfed8gSa6Lz2y9LBLQdZ9OS2fLBO/5/wOiKyxuuvktaFz4l55+TvQOg/tj5802eME/e+9078r5z80LDxyOb14q+14+ykhk1rd7HfaiVF1/58uiqbdPR1ZgmV++VPv6/9KWvhP7Y9xPu9QriPfO3iun09eX8c8bJ316xqLAyWPV98qHn+Z9SjnxySPZ2PV14bf/o/3rlnL8cV43bd/psyd/TMn70CgFCQgUfoYuiZUfbcLRqH2Q7jgkHVMXt8V0r5afOzY80V/NNrN6ral6ZqZtzdINOEtzn/J87gXTFptkj3jfsgVs/4V6vJq5f9kaqX5e0dUdbeJ5/rbITwotpn34Vbd/Zb0vNVbTkIGwEfESisErTPtZhWbmK+2Aq2Wmv1bGlczbFvpXCBJ171sljTsj3W2FL2878V17tkhvmXCmm2vyvt8j8G74j1aTnrQMy/sr45w+Gm6tZs3VB2fCpK2T1AKxK6ZtM3ZbjNdwnsTEnKlG08GS8T58VmIgUAR+Rau8+2mxJrl0CqKRqr5eStac1CwO0lQjSl6+0mqlBPw2bdjTca8gfiVZIK20lCKoah23jHK51q/XfHjuj8Lwf6lPn+z5v5QVlv/+VDtx6XYWpshbuh9KAr0H/5b1Ph/K8c/v0MxT0tSVnJSswESUCPiIXpGUnaNVef9hrBa/SI96zRAPOw9uXBLqEfv3spsKmHVPbdn7x5Oayvff6Jk/DlP75o1r9V041rcyMazWmfl+1F/xyJ9iXa3HRq1nrnefASPQx/p979ksQXg+xUlkP98U03GvI13bBME7OzUjQ3++E+0Yn3PcIECECPmLh9fTbSqr2WsG7bdaPq7Idx4ugLTvK1KCvazF1wHYkjy3fd8pjQoOGBg5tJwgjdHjRvGiatN8/V6rBitVPSdsDT0kUNMi7od7v1Tmt4pf7fuv5EAtu9r4ITFtx9A3mc893erq//v9ruB/uSkPWhdmrn9KgX9iSI1K7gpYcxIGAj1i1dx9tGmzZ+ULJTddearj3W7XXitjSOY9UfTuOF0FbdpQOIy5oai607ZgQ9L1U73WrkD42Somrql8tw7ZRhXt9bmuo13AfdCBVv8d66vNI9DGuVXwvazN1mPaW22aVfYPpquZwX0xfe7Y7xQat7Ff6BjtFQb9v8FTazQLEhICP2A1t2dFAv2vDysJptH5pK4625FTLdpywBNmy49Jwf31jU+JBP0j1vpQ4qvptdzVK67JGyaq1G3ZJ832PS1gqqdaX0rZptvzX3pHPz9CrVWtWPzriffz026tqasvxQ99gh9G+Y3bQ5+AqJIOAj8S0dx9r+807v2rVvfZ+T6PVKtidTmW22qthldAfqrpCMOjGiySDfhjV++G4PcNhH+ajtIrft2+jZFHnztdl1rxw5gXDqNaXoo/52x64NPDArXveQrmh7mKE+/L06srAG+zKrqQZFvQ5uAqJIuAjaXrilO6nq/P6BVqxn2vYke5pVmkVTcP9xMsaYu3RD7N6X4q7CSTM/d5ZHLbt2XugsPP+4MeHJSgN8uOcYK9X5KJutfNy9Uofz9u2vnDi94UD4Zyqfce6NvFDCxCtC58k3HvkXkmr9Dmn6zXnrNiU5Mm4+51wv8AJ910CJISTbJG03zo3vWZ+pgyE/ZL0h+UPb31WGi75viA8+vd6+djrCtt2/idA1VrDz3+/3VM4Eff9Dw7I6X8yJtKgr0HrmV9uG/E+Wr2fMqGyKt5Zp3/1RCVZTz7WwF/pyr8D7/2/NGVoJ75uzLnmhtXy298fkiC0ut04abHcM/8J53s2P5YgrIdf7en++Yjfy/c/6JXTTz9Tzj//Qln/8L/I7c1/L3te3CV+6NB/mxPuz3QeR/BGT8t1n3NBX4/UR785kNTJuO4g7ZyW8TW/FiBBVPBhkibnpics1Q39B1rZ0732iFYlQ7jFLr64vjCQO2XyDE8Di15p1V5PCY26el9KGJtAstKLr+FeK/e9zpsWv4Y7kCpOXgdulZdDq4bSK4w3cZWxYmFV9CfdeIdMmnNH1BX9PlvEqdrXelupBESMgA/T1Dm3NudWKL+yIScZYQ2/aUjSU0Kvb5xf0SFCLi/7xuMIV+6pnUH/juq+/qeFdp26b/yZpNHBQ5854f5HhRNrvXIPpNI36yYMxWvAD3t7kv65dFXv5AkmDnumVxhBP8L+fCfXS5ctNQsYpIVJCPgwVfP0y3/Q+oNr/3kMG3KSE1bQV9q241b1g7TwaNV++rXjR6yoJjHQWElVP63V/Jtv3yCbPZxUq89dbQFLslpfiteBW6/ot49eWEF/1tKfyNgrZ0gIOJEWxqIHH6Z6Zd2Sl342etRp9ZaPAVyES0OLVly1EvDhRwcqCkMazLWPWXv1X3lVK6dWocLvtYVH1xJ297w64n1mTVpc6OGNkwY6/W9+1fnot0+/66W3Zcu2F2XmNd9KzY583XXfsXF32fvpm621LS8Vvicmhl7t9z52/PNQqvj6Bubu+VsL/05EJ4we/SOfHJLu3T+vtD/frdpPbxlf6284A4gJFXwY79n2o821Vq7VHuZwLMQn7GPnXdqvP+XqmYXKvv56OFq91805I9FA+djydyVJQSuMukJTq/mLb5kmJvO66z4thzppSPwHp4of9PGsVyV0Noh1vckIo6I/7dblhdYdH6jaIxUI+EiFne1H6ixr1KPOA7ZBkLgwW3eKuSs3B26TTrTyLL2rSX7x5JYRv3bpnE3G9D4H/ftpuuFvCi07Jvbm6zrM8Vfd6+m+Jn0vynl5747CeRB+6BsYrdrr1S0kr9KgX2jbufPHA207VslYRK89UoWAj1TZ2X60KedU84W2HSPoD1TtPw97WNGlFf2LL6ovHGw1EhOq90Np6FizdaHvvxsdwG2/f67MnH6pmMLPxpw0bpDxcsKtMm1QGKfS55o+54IWHiZcN0+m3fJPctY5X7haSNUeqUPAR+poNV+kps0J+qyqMERY6+yCMrli3LlnnTzm/N34nV9oXjTVCfo3iQnOu6Q5s+FeaavOw9uXlHz8aguOPr6iOF0X4avkCmNh244T8gvbdiyLqj1Si4CP1KKabx53faSeAPtuwENq/DKxej9U0PMFTFin2XLf49KxofwcoXuwU5q5G5F0oFyD/AVOsNc+e9b0ppOXU4tL+YvLvtt328O72WuP1CLgI9Wo5ptLA74GfQ38YffqF0tTv3fQwJHUOk3dmNP2wFNl76dvstYve4PqNowT4OqiVu3XOrcVzi2cHapAAgj4yIR/az9aX2vltgvVfCPpIOPA7enQ9o6rNFTvhwpazZ85/VvSvmpubNV8r0O1SZw9APjlsT9/v3Nb4Ny6BEg5Aj4yZWf7Maeab7UKjOWG/TAq+6udYDkupe0T2vO9fc86X18T1wCun6Hah5zKPWsikRY6E/PTXavk0yN9xZ/W3+iTsU2AjOCgK2TKE7tXdd049e4ttlhnWpZVLzDO18++sHBYjW4i0XDuHjjU98mHvv49+vV/d8UiSatLL5paCMa/PvCa56saBz8+LD/rfKWwya/hioskKrPmd0jPW/9b9n46VNtwyfcFSIsL6y5zHrPfcwL+IT0oqzBE69ymOzd67ZEpVPCRWQzhpos7oPvmvq6y1X0N93rAUBYE3UAU1QCu1777LH0PUJX23/ng1Qve2tfVJUAGEfCRebTtpJMGXx3U1d5ZdyOPVry1+p/FrSZB1mmGfQJu587XZda88qu+0zj7ACgn9PT12/a6z6W2Y1aLxRAtMouAj6rAth2kQdABXD0BV3vzx5xxmgTlte+eoVqklG3rTnu7ZsE1Ley0R/YR8FFVaNtBGgRZp1lpy46G+66X3i57Pw337IVHyuzP27YT7Ed1CVAlCPioSs+2H22usXKLhaAPQ3lc6/cFQXbme+27T+tJtahObjuOE+zbBKgybNFBVXpi96pXbpx69w627cBU2gJz+djr5NMjB3Xbh+ev0yr8gfd+L/XfPNdTy4625ujWnHL0pNrF33tIgBSwHWsPS23jtS015Y9hBjKICj6qnvbnW9aodufJMFMAA+kA7vrtS3x9jZeWnYOHPpPxV95L3z0ywxZ5IWfnl0xpGd0jQBUj4AOD6M+HyYIO4I7UstNy3+PSsaF8gZO+e5jP6snb+Rb67IEBBHxgCII+TKXtOjqA6/cE3OG27Gze9qLcfPvGsl9L3z1M5oSYg7YlzVMX124RACcQ8IESBvfn61rNOgEMoodiacuOn535xS07Xldi6rkDDy17QwDTaLDvt+217LMHhkfAB0bA/nyYKmjLTscP50r33gOyZdt/jHg/+u5hIoI94A0BH/CAoA9TBdmZ78XSOZtk8gQe7jCHLdZm286t4KAqoDwCPuADQR8m0pYdDfl+q/mlTJ4wzwn4jwhgAoI94B8BHwiAoA/TBG3ZGYrWHJjCFumybXsFm3EA/wj4QAUI+jBNpS07tOYgaQR7oHIEfCAEBH2YJMiWHUVrDpJEsAfCQ8AHQkTQhyn8tuzQmoOkEOyB8BHwgQgQ9GECPwdj0ZqDuA0Mz+a3EOyB8BHwgQgR9GGCTifga8tOKbTmIC66x/64bW+xpLaDrThAdAj4QAyKgv4k4WRcJKBUyw6tOYgDB1QB8SLgAzEaDPoNTtBvFYI+Yqbhfs3WhfKrfXtOfI7WHESJYA8kg4APJGRn+9Emgj6S4K7SvHzsDGld+KQAYdPBWcuSzYfzNTsI9kD8CPhAwna2H2uwLKvVeTI2CBATXaX5Vxd8h9YchIqNOIAZCPiAIRjIBZBGJwdnpZNgD5iBgA8Yhj59AGlAfz1gLgI+YDDt07ecij7tOwBMQRsOYD4CPpACrNkEkCS3Wl8jdueUltE9AsBoBHwgZajqA4iLVutzltX5WT63hTYcID0I+EBKUdUHEAWGZoH0I+ADGUBVH0ClBnrr81s+l1GdVOuBdCPgAxmiVX1baptrLGuGUNUHUAabcIBsIuADGaUHaDk1uaYaKzfDqcyNEQAQWnCAakDABzJue7s95stybCYtPEB1owUHqB4EfKCKuIdoEfaB6sAWHKA6EfCBKqVhvyY3eoZtS5MTA+oFQCYMHkS1R6R28zUtVq8AqDoEfACEfSDlCPUAihHwAZyCsA+kA6EeQCkEfAAl0bMPmMXtqe/P53YQ6gGUQsAH4Ikb9nNWboaGfVZvAtHTlZZ5kR623wDwg4APIBB3z74T+CcJh2oBYertt+0duqf+c6ntIdQD8IuAD6Biz7UfrZdczaS8bc+klQfwx63S03oDICwEfAChGjhY63j9QHW/ZhyDusCwqNIDiAwBH0Ck3N5955cNtPOgWg1U6a1O2+7fQy89gKgR8AHEStt5+kXqdVjX+a1W9+sEyBg30Ocs6aHtBkDcCPgAEkXgR0b02mJ1EegBmICAD8Ao2tKTk1FO6LcbcpY1jqFdmMnq6bfzeyyxe0RGdRHoAZiEgA/AeLqSsyaXG2fbdoNQ5Uf8iqrz+TcZigVgOgI+gNQ5ualHClV+IfQjPL3OrceyrC47bx84LDVdhHkAaUPAB5AJbug/Wem36ljRiTJOVOYJ8wCyhIAPINO0vScn1piTPf3WGIJ/1el1bj39tn1Ae+ZrnF9/JqN6CfMAsoqAD6DquNV+Df55J+wPtPlYdQT/9NK1lLZzE4I8ABDwAaDYzna7TuR4nbb6HM/nz6uxrHM1/DuBsc4JkGMEiRkI8Vav833oydv5Qxric5I7mJeaHrbYAMBJBHwA8Egr/6fJsbp+p/KvbwD68/kztfqvwd8aGPKtE1RCw3uv86OpVwN8bS63X3vjLcn3UokHAO8I+AAQouI3ASJ6NcCq089bVu7cgd8XXnidKwIyJutXBE62zWgwt3Wg9aAb3Pvz/Yc0yIvU9n7u3IfwDgDhIeADQIIGWoLU8cGP7u+twkd9E5CzcmcUPiP2KW8KrOGvGAz3OS96h37CLvrcYHtMIYQPtMfIYCC3B+/jtsjUFj7SMgMAyfkDByxtvdKEhNQAAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/public/images/landing-new/avatar-4.svg b/public/images/landing-new/avatar-4.svg
new file mode 100644
index 0000000000..18ea966cef
--- /dev/null
+++ b/public/images/landing-new/avatar-4.svg
@@ -0,0 +1,9 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="28" height="28" rx="14" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1676_1604" transform="scale(0.00131579)"/>
+</pattern>
+<image id="image0_1676_1604" width="760" height="760" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAL4CAYAAAAOIoPjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAALHZSURBVHgB7P0NeFT3eef/3zPCdsOTpNp4f8YLiDRrnIAMxMabBGwE6bYN2AanWydgEiC92oDxf8FpamzcBNHUD7C51nD9jcHtfwuuMSTpr7ExD026WyTbkGSNXR4ECbhNEbCWrwUTPQHbGND8z32kgwehOd9zZs7MnIf366oqwQyGgKT5nPvc3/tOCQCgbPa1ttbo+34i9vuM874rXdP9jHRVKp2q7P44U2X9P32TlPU+0/3jXlI1kpdMcx//reyfa7N+3Nb9Z8u0i3TZH6fSXc09fx77/cWe9+Orq5sFAFAWKQEABMYK7HYI18CuYT0l/Sq7umRkd0jPVKXsn9dgnroc1mPMugjItH10oZBqznRdOm5/ZF0Y6EXBRfs50mxdELQJACAQBHwA8KgnvNdUdAf3EVnBvab7LVUjKIDeRbAvBtoyXV0H0ul0q3VP4AAXAQDgDwEfALJoy4wV4MeJtsB09RunAT4lmXE9rTNxr7iHXZtW/TP61iXH02k51nMB0ExLEAB8hIAPIHGyKvHjukO8jLCqx+MS0jYTW9YL2v7u8N91IJXu2m/9uM0K//up/ANIGgI+gNhyCfI1gsToCf5tVtXfCv4XGzX411ZXNwoAxBQBH0AsaJi3gnyd9sZnJGWF+K46gjzcOBV/631jT6sP1X4AsUDABxA5WWF+bMbul6cqj6DoId/M/u5Dvl2NhH4AUUTABxBqPW024/rZYZ7KPMqhO/Q7lX7aewCEHQEfQKj0TLGp0575dFomd1fogdBpdHr6L3VX+ZsFAEKCgA+grDTQW9X5GVTnEW3dVf60pF69IBcOWIF/vwBAmRDwAZTUlYE+M1MYS4lYIvADKB8CPoCi6jkQawX5ayYT6JFc9obexrT1ZgX+12npAVBMBHwAgXIOxaa7+s1MpTMzaLkBrqYjOru65PV0+uKrTOoBEDQCPoCCfdR2o5V6+1AsVXrAH13AZYX9i6/TzgOgUAR8AL5RpQeKqbudJyUXXmQkJ4B8EPABePJRL32/uUKVHigVbd1p7DmsS+8+AE8I+ABy6tV6UycAyk3D/kbCPgA3BHwAV+gJ9XMz3YG+TgCEkh7Utd5tvCgXtxL2AWQj4AMg1AMRR9gHkI2ADyQUoR6IJ8I+AAI+kCB6ULYn1NNTDyQDPftAAhHwgZjrNf2mTgAklRP2t7JYC4g3Aj4QU1awr6uQa6xQn9FqPSMtATiscJ96lTn7QHwR8IEY6WnBWZwRWSKEegBGqeZMV2ZrV/rialp4gPgg4AMRRwsOgIDYLTxjqge+KAAijYAPRJS24KS7+s1MpUWDPdV6AAFJNVv/r/GSXFhBVR+IJgI+ECFMwQFQYlT1gQgi4AMRYAX7cVawn0FvPYDyoKoPRAkBHwix7kk4/ZYL1XoA4UFVHwg5Aj4QMkzCARANqea0SD1LtIDwIeADIcGhWQDRldpI+w4QHgR8oMxowwEQI40pubiCBVpAeRHwgTKwZ9dfqpgpFSlm1wOIoe72Hfr0gfIg4AMlRH89gGShTx8oBwI+UAIEewDJxphNoJQI+EARWcG+Jt3VbwkHZwHAwYFcoNgI+EARdE/EqZiXSts99gCAqxD0gWIh4AMBYiIOAPhF0AeCRsAHAkCwB4BCEfSBoBDwgQIQ7AEgaAR9oFAEfCAPBHsAKDaCPpAvAj7gQ/dUnIp6Ds8CQKkQ9AG/CPiABwR7ACg3gj7gFQEfcMGCKgAIG4I+YELAB/pAsAeAMEs1pySzsbZ60AoBcBUCPtDLwQ865klF6lkh2ANAyKWa0yL1Y6oHvigALiPgAz10Mk4/uebZjGTGCQAgQgj6QDYCPhLPCvbjKqSfVuzrBAAQZa9ekouP0J+PpCPgI7G0z75CKpZbXwZLBAAQIxzERbIR8JFITa2dyzlACwBxlmrOdF1aM/b6ytUCJAwBH4nSvYH2mg0imRoBACQA/flIHgI+EkEXVVVIPyvY02cPAMlE2w6Sg4CPWGOePQAgmxV86pmfj7gj4CO2aMcBAPSNth3EGwEfsUM7DgDAG9p2EE9pAWJEp+NY4X6fEO4BAEaZedZrxjF97RAgRqjgIxZoxwEAFCbVbFXz77eq+fsFiDgCPiKNZVUAgGDRtoPoI+Ajsg5+0DFTKlLaa890HABAgDiEi2gj4CNyOEQLACgNqvmIJg7ZIlIOtHYu5hAtAKA09BDuNQ2HWs/OFSBCqOAjEqjaAwDKrPGSXJxPNR9RQAUfoUfVHgAQAnX6WnTgTDtDHRB6VPARWlTtAQAhRTUfoUYFH6FE1R4AEGJU8xFqVPARKlTtAQDRwqQdhA8BH6HBXHsAQDQxNx/hQsBH2bGNFgAQD1TzEQ4EfJSVFe7rKuQaq2qfqREAACIv1XxJ5P7x1QP3C1AmHLJF2Rxs7Xi2Qvo1EO4BAPGRqamQzL6m1s7lApQJFXyUnB6k7SfXvJKRzDgBACC2tJp/YQotOyg1KvgoqQOtZ+fqaDHCPQAg/rSa32/fIeu1T4ASooKPkuAgLQAg2VKrew7gtglQZAR8FJ0V7sdVyDWv0GsPAEg2WnZQGrTooKh6NtJykBYAgO6WnWNswEWxUcFHUfS05DxrfYrNEwAA0Is9M/8RWnZQDAR8BE6n5FTINVTtAQBwRcsOioMWHQSqpyVnH+EeAACT7ik7tOwgaFTwEQim5AAAUIjU6tuqBz4iQAAI+CgYi6uA4HS0t8nZ9nbrfbu0nDghndb77rc26ehotx9T71mPqZae946WE8fFq6HDR1z+eFBlpf3mfDzYehs6bPjl5zmP3zx8+BW/DkCQaNlBMAj4KIgV7uus24uvWB9WCQBXTng/0tRkB/P3Th63f6xhvTvMt9lhPgo07DvBf1Rtrdw8bIT14+H22621twmAfKWaU5KZX1s9qFGAPBHwkTftt7c+gVYLgMs0xGtYP2qH+OPScvJET6A/HpnwHoRRVsi3w/6Y2o8+JvgDnlmvr/VWyF8hQB4I+PCNEZjAlUH+yKGDV4R69K272n+bXfGfMPGu7so/7T6AC7bfIj8EfPhCvz2SSMP827t3d4d4K8zvtT8myAdBA/+tVtC/wwr8d0yaROAHrkJfPvwj4MOz7n77azYwAhNxpmFeK/H2G2G+5DTwa9CfOu0emTDpLgGgNOTL/eOrB+4XwAMCPjyh3x5xpYG+YccOu81Gq/RHmw4KwkFbeqZOv0emWGFfQ//gSs7yI9kyXV2PjL2+ktdiGBHwYXSwteNZ5tsjLrIDvb6PanX+xkH9L388JOtj+8cD+7v+2nMfXpDz1lu2053nLz927tcXJIxmzH7QDvsa+oGk4vAtvCDgI6fuw7T2CMw6ASLK6Z/fu+fN0Ab6AdddIwOuvcYO6hrO9eMbBw+w3/e33vRxJ7TfOKi/lMopK/Q7FwOnez4+1XFOTp09f/nnTvVcGJSSTuTR9p0HFzzEZB4kVeMluTifvnzkQsBHn/QwbYVc00C/PaJo7+435e09u7vfW2/l5gT0musr7dA+8oYqO7g7P9bHo+zYmXY78Ddb7/UCoPlX7fbHpbgToD37c6ygr9V9IFk4fIvcCPi4ihXux1mVeyvcs7wK0eC03bxtVel37dhetnnzWl0fYYX2G60wryHe+TjqAT5fGvCdsH+o5bRd8dePi8Gp6i9Y+jiTeJAgHL5F3wj4uMKB1rNzU5LZKEDIaavNLivU79q5veRVeg3sWn2v+c1KgrxPTuh/61iL/f5wywcSNK3mE/SRJBy+RW8EfFzW1Nq5PCNSL0BIaajfumVzSVtvssP86KFD7I9L2Qcfd9mB//D7HwRa4SfoI0k4fItsBHzYmJSDsHJC/dbNL5fkgKwG+NE33WBX5j9lvSfMl5a28Ryygn7ju8cDq+4T9JEcqdW3VQ98RJB4BPyEY1IOwkh76l9ev64klfrRQ2+wq/N31gztPvRKm01oBB32CfpICJ2wc//46uo2QWIR8BOMSTkIEw31r23eXPSeegJ9NDlh/2/f+UVBozn1MO6cBYtkzsKHBIgvJuwkHQE/oQj3CAut0q9b+bS9QbYY02+0xWbCiJvs/nltvSHQR5/26jccPW5V9k9IvjTof2ftenvyDhBPhPwkI+AnEGMwUW7OnPpN69YWJdRrlV4r9Brs6aGPL63qN1ghX1t48q3q07aDeGOMZlIR8BOmZwymjtIi3KOkitmCo1V5DfNjrCq9vqdKnzwa9PNt39Fq/sKly1iWhbhqs+7Wz7+tevCrgsQg4CfIgdbOxdY/OHNyUVJarddQ/9rmlwOt1muIr/sPw+1KvVbsAVVI0KeajzhjVn6yEPATghn3KDWntz7Iaj2hHl7lG/TpzUecMSs/OQj4CUC4R6k44y2D7K0n1KMQP3jniPX2C/Fr4WPLZKFVzQfihpCfDAT8mGOBFUoh6DYcp6d+yi0jCPUomB7G/b4V8v1O3bnDquJ/Z+06WnYQO4T8+CPgx5gV7jdY/8TzBCiSoNtwNMxrqOegLIrhrePvy8afHPTVtqMtO/99205CPmIotfG26oHzBbFEwI8pwj2KaatVqd+65eVAgr0G+eljPmG9/RahHiWRT9vOo0+tZDkWYoiQH1cE/JjZ19pa1U+uachIZpwAAQqyv16DvC6d0mBPCw7KQdt2lm9/01c1n758xJEVBPdflIu6EKtNEBsE/Bgh3KMYggz2unSq7pYRVOsRGht+elB2NP3S8/O1iq/VfCBOrDC4zwr5Uwn58UHAjwnCPYIWZLDXKv0Dn/4k1XqEkt+RmqNqb7P78gdXVgoQF4T8eCHgx4AV7muscP8K4R5BCCrY01uPKPHbssPhW8RRT8j/ohXymwWRRsCPOA33FVblXiRTI0ABggr22oYzvfYT9ux6gj2ixk/LDiEf8ZQ6dkkuTCXkRxsBP8II9whCUMGeNhzEhZ8pO4R8xBMhP+oI+BFFuEcQdNzlupVPScsJfwuAshHsEUeH3/9AVv74Z3L+wwvG5xLyEU+E/Cgj4EcQ4R6FCmJBVd0tw+VLt39ShgzqL0Ac+enLJ+Qjngj5UUXAjxjCPQpRaLDn4CySxm/I/8EbP2G6DmKGkB9FBPwIYRQm8qV99quWPSavbX5Z8kGwR5L5CfmM0EQcMUIzegj4EUG4Rz4KPUBLsAe6nfvwgizf9qY0nzF/Hd03+0H5i7XrBYgTQn60EPAjgHCPfGg7zrcWLcj7AO0Dt3+SYA9k8RPy2XiLOCLkRwcBPwKaWs/uI9zDq/dOHLeC/cK8++w5PAvk5ifkL3xsmSxc+rgAcaIhv7Z60KcFoUbAD7mDrR0brH+meQIYOO046555SvKhYy7nf/Y2qbme3mHAjZ+e/NWbtsjU6fcIEC+pDbdVD/yaILQI+CFGuIdXhbTjMMce8M9ryB9UWSk/eGMP4zMRQ4T8MCPgh1RTa+fyjEi9AC4Kace5cVB/mWdV7O+suUkA+Oc15DM+E/GVetYK+d8QhA4BP4QI9/Bi0/rn7XYcv9NxmIwDBOfYmXa7J9+08XbK9HtkzaYtAsRMxgqSK2qrB60QhAoBP2QI9zAppGo/vfYT8sCnbyXYAwFqOHpC1r7+jvF5OlVHp+sAMUPIDyECfogcaO1cbP2DrBYgB91Cm89Me/rsgeL6wTtHrLdfGJ+nS7AmTLpLgJjJZLq6vjH2+koyTEgQ8EPi4AcdM6Ui9YoAfTjSdNA+RHu0qcnXr9NKvQb76bW/JQCKa23jP0nDu8ddn0M/PmIsk6lIzR87eOCLgrIj4IfAvtbWcRXSr8H6sEqAXrTXftXjS8Uv2nGA0tIZ+X/6d7uMh27ZdIsYa70kqanjqwfuF5QVAb/MrHBfUyHXWOE+UyNAlnx77XWOvc6zpx0HKD2drPMnVsg3HbqlHx8xZoX8i58eX13dLCgbAn4ZEe6RSz4TcmjHAcLBy6Fb5uMj3lLHLsmFqYT88iHgl4kV7quscL+PcI9suo12yZzZvqv2Wq1/ePLtMmRQfwFQfht+elB2NP3S9Tl3TLpL/nrbTgHiyQ75WslvE5RcWlAWFdLvFcI9suk22gfunugr3GvVXttxVtxzF+EeCJEHbv+kvUzOjX6tb1r3vADxlBlpZZ0fCsqCCn4ZHGzteNb6q18iQI9Vyx6zx1/6QdUeCDddgqWHbt3QqoP4Y9ttORDwS4xFVsimB2mXzJnla/wlvfZAdGxv+qVs/OlB1+ew5RYxxyKsMqBFp4R0kRXhHo6tW162W3L8hHut2n/3i1MJ90BE3GN9rZomWjXs2G636AExlbKyz/IDHWfnCkqGCn6J9My63yeA+G/JoWoPRJeX0ZkswEICZC5J6tPMyC8NKvgl0DMOky21sFty/uDuz/kK9zrXnqo9EF16TuYew9dvy4kT8rLPczhAxKQqJLNLM5Gg6KjgFxmz7uHQW/Dab+9ntr1uo53/2VoBEH3ftKr4zWdyf/1z4BbJwPjMUqCCX2QV0m8D4R7rVj4tf3jvNM/hXsfr6ehLwj0QH/M/d5vr4/r9QbdXA/HG+MxSIOAXkU7Msd7VCRJLF1f9mfWCrVtpvdIDef/1i1ONB/MARMvom24wttrpbHwO3CIBphxsPfvfBEVDi06R6MQc6y93tSCxtN9eq/baW+uVLq2i1x6Ir3MfXpCFm3/seuCWDbdIiEymq+sbY6+vJCsVARX8ItCJOYT7ZHO20noN905LDuEeiLcB115jb7l1o1X8rZtfFiDmUql0+r81tXbWCQJHwA8YE3Owaf3zvvrttRVHwz0tOUAyeJmNv27lU9Lh40A+EFGpjKT+msk6wSPgB8j6BK1iYk6y6WHaVY8v9fx8nZKj4V7H6AFIDlMVn7GZSI7MyH7S74eaoQSBIeAHqEIqlhPuk8nvYVpdXLVo8u1MyQESSg/cmqr4ejeQKj6SICMy3iqQcug2QAT8gHRPzEktESSOc5j2tc2bPD1f++11cdWUUcMFQHI9bF3ku9E2P6r4SI7MvANn2slRAWGKTgCs20p1FdKvQZA4fiflaMXu0f/0GbuCDwDPNb4jje/m/v6hy6/+/sBhGWy9BxIgYwXTqbXVgxoFBaGCX6CeQ7UbBIlzpOmgr3Dv9NsT7gE4dPlV/2tzf0+gio+ESWVEfsih28IR8AvEodpk2rVju69wr/Pt6bcH0JuOzbzHMB6XXnwkTHU/Nt0WjIBfgIOtHc8S7pNn65aXZcmcWZ7GYGq1nvn2ANzo3T2q+MBH9NAtm24LQ8DPk26q5VBt8ugYzG89tMDTc53DtMy3B+CGKj7Ql8wSDt3mj4CfB+0NS4nUCxJFw73XMZg111cy3x6AZ1Txgavopttv04+fHwK+Tx8tsxIWMiSIn3A/ZdQIwj0AX7xU8bU9EEiYaitz7WIJln8EfJ/SXRWr6btPFj/hXqtwiyZ/mkk5AHwzVfH1UP/e3W8KkCyZkSzB8o+A74P23afSqbmCxPAT7nX1PJNyAORLq/h31tzk+hz9ngQkD0uw/CLge9TTd79akBh+w/0Dt98qAFCIe6wqvpu3rQo+VXwkUE8//tlxAk8I+B5k9d0jIfyE+0WTbyfcAwiEHtA3Td6iio+Eqq7oXoJFP74HBHwPKqRiOX33yeE33E8ZNVwAICh6R9CNVvEZmYlksvvxvy0wIuAbHPygYx7z7pPDa7h3FlgR7gEEbfRNNxir+IzMRHJllhzoOMt5SIOUICftu6+QfvuEkZiJ4Dfc6610ACiGhndPyNrGd3I+PqiyUvY0/28BEqr1klz89Pjq6mZBn6jgu2DefXIQ7gGEiU7TMS2+4rAtEqy6n/T7oSAnAn4OTa2d9N0nBOEeQNh4WXzFYVskWUZk/MHWs8zHz4GA34d9ra111idOvSD2Nq1/nnAPIJSmexiZ2XLiuADJlVliFWTrBFch4PfS3Xd/zQZB7O3asV1WPb7U+DzCPYBy0Cq+6bDt1s0vC5BgqYyk/prRmVcj4PeS7qqopzUn/o40HZRvLVrg6bmEewDlYhqZqXchgWRjdGZfCPhZdCRmKp1i9FLMvWfd0l4yZ5Z9SM1E59wT7gGUi47M5LAtYJJZcrC1Y6bgMgJ+D23NkYr0ckGsabj/w3unScuJE8bnssQKQBhw2BYwSkl3q06NwEbA70FrTvx1tLfZlXsv4V5vixPuAYSB6bDt0aaDbLYFRKorpN9fC2wEfMuB1s7FtObE36plj1svhE3G52m4f+D2WwUAwsB02FbbdF7bvEkASN2BM+1LBAR8vZ2TYiRm7OktbC8vgIR7AGE05ZYRro/v2rlDAEgqlU5/m1YdAr5Yt3N0JCbjlWLM66z7CTU3Ee4BhNIEw2ZbZuIDl9GqIwkP+NqaY72rE8SWHqr1MuteJ+U8PPl2AYAw0jad/2iFfDfMxAcuS3yrTmIDPq058edMzDG5cVB/Wfo7n7EXWgFAWNWNcm/T2btntwCwJb5VJ7EBn9ac+PMyMcfZUjvECvkAEGammfjapsNMfOCyRLfqJDLg60IroTUn1lYte8zTxJxH/9NnCPcAIsM0vvdtAj6QLbGtOokL+Cy0ij89VLtp3Vrj83RijtvoOQAImztrhro+vnULffhAlsS26iQu4LPQKt60797LxBxdHMPEHABRY2rT0bZEXXwF4LJEtuqkJEHs1pyK1AZBLOmm2gfunmjsu9eJOd/9/akCAFG04acHZUfTL3M+PqiyUoYOH2G/v3n4cBk6bLj946HWx/pzt9beJkDCZKz/++Jt1YNflYRITMDX2zMVck0D1fv4+rNFC+Q1w5g4nZjDoVoAUXb4/Q9k+bbCeu1HWSFfA/+EiXdZH9fab4MrmTuBWGu9JBc/Pr66uk0SIDEB/8CZjo2pdGquIJa0797LvHut3GsFHwCi7Ksbt8v5Dy9IkDT032oF/SnT7rED/83DRwgQL6lnb6se+A1JgEQEfKt6P65C+u0TxJL23X9h7Bjj8+Z/9jaZXvtbAgBRZ2rTCYIG/jsmTZKpVuCfMOkuAWIgYwXfqbXVgxol5hIR8A+2nj1Ga058/d7Y0ca+ez1UO/+ztQIAcRBEm44fdjuPFfLvm/UgYR8RlzpmVfE/LjEX+yk6Ta2dywn38aXz7k3hXvvuH/g0E3MAxIdpmk7Q9Pvs1s0v29vBtaiyad3z9t1TIHoyIw+caa+XmIt1Bb/7YG2/Y4JY0hebby1aYHzeulm/y6FaALGzfPubcrjlAymnGbMfpKqPKNIDt58eX13dLDEV6wp+98x7xJE9736led699t0T7gEk0YDril/hz67qb93Mki1ERuxn48e2gs/M+3jzMhKz7pbh8nDd7QIAcWSq4K+49y6p+c1KOXX2vJzutN6s96c6zknzr9ql+Uy7nPt1sFN4lPbqL1y6zK7sAyEX6wO38Q34HKyNLS+tOcy7BxB3XgK+9urncswK+Rr8D7ectkN/kO0+BH1EQ+rYJbnw6TjOxu8nMaQHazOE+1jy2pqzaPLthHsAcDHy+kr77c6am+wfa0Vfp/O81dwiP7fen7LCf770UK4WYjatXyurN21hpj5CKjMy3ZVeYn1QLzETu4CvB2szMfyHQrd1K582Ts154PZPyuihNwgAwDvt2dew7wR+rfBr0G84etxu6cnH0aYme0+JVvIXLH2coI/QSaXT/8XKjhvjduA2dodsOVgbX9qaY+q7t0di3s5ITAAolFb3p4/5LXsD+H+13vRc04153hl1DuNyEBchFMsDt7EK+HqwNpVOzRXEjtfWHO27BwAES8O+Di14ftbvyiLrfT53SZ22HX1jhj5Cpq6ptbNOYiReFfyK9HJBLL28fp2n1hz67gGguKZYlXwtpjhVfb+cav7e3aXbxAsYpDKSilUVPzYB/0Br52Km5sSTVno2rVvr+hxacwAkzWnDIdghAz8mxeRU9XWZoN+grwUbDfl6rgoIh3htuI1FwNeDtSlJLRHEkr4ImNCaAwDloXdOnaDvt3Vn3TNPyeI5s2jZQSj0HLitkhiIRcDvPlhL9T6O9FauqTVneu0naM0BkDimMZYDrr1WSmlIz/4R7dH3cxi3Ycd2u5BDyEcIVFfINd+WGIh8wLer9xysjSUvB2vt1pxP05oDAL3p2Mty0B597c/Xc1FeaSHngbsnypGmgwKUV2bJvtaz4yTiIh/wK6Tfs4JY8jLz/g+sF5ByvYgBQLmcNlbvy/t9UX9/PRelbTteq/md7e12yN+07nkByihVIZn/JhEX6YCvYzGtdzMFsaPVe9PMez3UNSWPCQ4AEHVnP7zg+nj/kBQ+tG1HR2v6qeavWraUw7cot8iPzYx2BZ+xmLH17UULjc/5ko8XDACIk/Mffuj6+I0Dw3UuSav5fnrz9fAtIR9llLLeIl3Fj2zA767ec7A2jvRgrWk+MjPvASTZOUMFP4yc+fmEfERBRmTcodazkT3jGd0KPtX72PJ0sJaZ9wAS7HSHYQZ+SAsg+ufSA7gTam7y9HxCPsoo1SWZZ6M6NjOSAb+ptXM51ft48jIW8w9ozQGQcKYK/o0hvsOpB3CX/s5nPPfla8jn4C3KpDrdlY7knqXIBXwdi5mR1DxB7HS0txmr96NvuoGDtQASL+xTdLzQO7FeQ74evN1qGLwAFENUl19FLuCz1Cq+Xl6/zli9122JAJB0p86aWnQGSBRoyJ/32ds8PVdDPnPyUQaRrOJHKuCz1Cq+dCzm1s2bXJ+jYzE5WAsAIud+7d6iE6X9IPfU/pYsmmwu3uicfDbeohx6qvg1EiGRCvjd1XvE0WtbNhur94zFBIBupwwtOjW/WSlRMmXUcF8hv8N6D5RQdYVc822JkMgEfKr38UX1HgC80wO25z+MTwXfoSHfS7uOFoO+tWiBAKWVmRelKn5kAj7V+/iieg8A3jWfaXN9fOT10areZ9N2HS8Hbxt2bGd8JkotFaUqfiQCPtX7+PJSvWepFQB8xDQis38EJui40YO3062gb6LjM01LEYFgZeY1tXbWSQREIuBTvY8vU/VeZzkzFhMAPtL8gXv/ec0N0a3gO+Z/9jZPy7C0VYd+fJRQKiMSiSp+6AM+1ft4M/fej6B6DwBZ4jAD3wsdi2xa2KUFoiVzZglQQnVRqOKHPuBTvY8v09ZafZGieg8AVzLNwK+5PnI7efqkrwEr7rnL2HL09u432XSLUopEFT/UAZ/qfbyZttbq7Vmq9wBwpWOGFp0bY/R9U18DvCw41NcT5uOjhEJfxQ91wKd6H1+m6r1icg4AXMnLiMyaCE/R6cudVrHHdOhW5+N/a9FCAUok9FX80AZ8qvfxtmn9WtfHmXsPAFeL84hMN3ro1nThQqsOSizUVfzQBnyq9/GlY82ONjW5PofqPQBczTRBJ+ojMt0s/Z3PGP/30aqDEgp1FT+UAZ/qfbxt3fKy6+NU7wGgb8YDtjEYkZmLvi6YlmBpq86qZY8JUCKhreKHMuBTvY8vray8ttk94E8ZNUIAAFc61Xle3mp+3/U5o28aInGmm25HD73B9Tm65ZYFWCgRq4qf+qqEUOgCPtX7eGvYscP1cZ3+MPom92/eAJA0Gu6Xb3/TOAP/3IcfStw9PPl2Y6uOLsACSiMzT7OrhEzoAj7V+3gzHa79A3rvAeAKXsO9OtzygcSdl1YdndK27hn3UcxAQFLprvRiCZlQBXyq9/G2y7pt6jYaU6v3LLYCgI/4Cfdqr6GFJy60Vcc0VWfT+uelo939UDIQhFQ6PdfKsKHaMBeqgE/1Pt527dzu+vinaM0BgMv8hnulc/IPvx//Kr6a/7nbXB/XA7cvr3O/awwEpNqq4i+REAlNwO+u3qcnC2LJy+FaRmMCQLd8wr3jreYWSQI9r1VnuOu7buXTjM1ESVgZ9r+EqYofmoBfcamiTiRTI4ilt3fvdn1cv1EzGhMACgv36q2EtOkoLQyZDtyut0I+UAKhquKHp0WnIr1cEFvGzbWMxgQAOXamvaBwr/TXnuo8J0mghSHtx3ez1bp7fKTpoADFFqYqfigC/sEPOuZRvY8vvT3qtrmWw7UAEEy4dyTlsK2aXvsJYxWf5Vcokapr5JoZEgLhqOBTvY+1l9c97/o4h2sBJF3D0ePyp3+3S87/+oLxueNqa+WVlza5PidJbToDrHBvquK/vftNll+hFFJdkgnFNMiyB3zrVkYd1ft4M03PYXMtgCT7wTu/kLWv/5On52q4b9i6TWZOmy5VlbnHRDZbdwPOebhYiAudi3+j4RzXa1vcBz0AAalrau2skzIre8CvkH5U72NMKyam2fdsrkUcJClMITga7n/wzhFPz3XCvRPsZ06blvO5Oi6z+VfJmgFvWpSovfhM1EEJpDIi35YyK2vA71ntWyeIra2GismEmpsEiLLDLadl+bY3EzN7HMHQC8K1r7/jOdzPnTXrinCvJk+c5PprkjIu06FnuUxV/E2GllEgIGWv4pc14LPYKv7eNvQ8TrmF9hxEj4azxndP2MF++fbddri/kTGv8MgZg9lw9ISn52u43/jc81e15Gibjpsk9eE7TFV8bdNhuy1KINXV1VXWw7ZlC/jdi61SoTiIgOLQsWSm9hzTqnEgTDTYa0vFwu/9WJ5rfOeKqj2fy/DCCffaI+/F8qVL7XDfFw38dS5V/CSNy3RoFd9tog7bbVEqqXR6bjlHZpYt4HcvtkKcmTbX0p6DqNBQ5gR7banoPelkJOEeHmhF/Zs/3OV5DKaG+/pH3cc71k2c6Pp4ksZlOkwTdTatf54qPkqhrIuvyteiw2jM2Nu7h/YcRJvTX//Qlr6DvWPIQNpz4E4vEFf9w888jcFUG9auNYZ7NXmSqQ8/eQHfNBdfq/ivbXYfMwoEQRdfSZmUJeCz2Cr+vCy3oqUBYeUEe6e/3mTIYAI++ub3MK223TS8tk3mfXm2p+dri47buEz9/E3ahCcvc/F37dwhQAlUleuwbXkq+BX03sfd27t3uz7OciuEkR6c/ebf7fIc7B2jbxoiQG9+D9PWDB8u+xrfcO2r74vbuEyVxAlPWsV3w+IrlEjZRmaWPOAzGjMZWG6FKNFgv3BL98FZr4cfsw247hoBstl3gXwcpnVm3GvI98s0LvPw+6clabSKbzrntWuH++sUEJA6K/uOkxIrecBnNGYyuI3H1G+8LLdCGGgI04q9BnuvBx/7UvObtJvhIzua/sW+C+T1c8qZcZ9PuFemcZmNHu8gxM09hio+IzNRIql0V3qmlFjJA34qnZ4siDW97dnp8k2TcI9yy+6xz6din00vWKngQzn99ht+2uT51zhjMN366E1M4zJ1q20S23T0tWb00NyvNxy2RanoYdtSj8wsacDncG0ymJZbTRg5VIBysHuifRye9YLD4lD6uaUjML3222so9zopxwvTuEy9qE2iO0cY2nQ4bIvSqLKq+POkhEpbwedwbSK8vcf9gO0YKvgoMa2sbvjpQXvcZdCVzJobCPhJ13D0uK/59tqKoy05XifleGEal3m4JXkVfFU3aoTryEwO26JEUlYV/z4poZIFfA7XJoPe8nT7ZqnjMYcMYqQgSkf7oXVB1Y6mX0o+TH3RNzIDP7GcC8e1r/+T5/n22kqjk3L0UG2QGJfZN22hmzLK/WuYw7YokbpSjswsWcDncG0yHGk66Po44zFRKk6fvfZDn88j2Ghg6p5HPsv1eTU3lG0TOcrIGYHp58Jx8YIF9udU84kT0mgYJZwP0+fqW8dbJInurHFvC9XDtkAJpLq6umZIiZQs4HO4NhlM/fejhzIvHMXlVFXz7bN3gr2+6ceNe/a4Pp8JOsmjd4W0JcfrAW2n337mF6bLyPFjZXzd3TJlxr32xytWrpSg1NGm0yc9bOt2VsZ05xkIipWF55bqsG0/KQEO1yYH/fcoJw1e3/+nI3lX7HWiSfY0ErvS6vI5rS1nTNBJDr143Pizg54P0iqn315poM+mn1/1q56xLgAGW9X9hVIo0zz8vc3vS1LdWXOT6wXZa5tflgmT7hKgyKoqLlXoyMyNUmSlqeBzuDYx3Fp06L9HsTjTcfJpx+ldsc/WuIeNzOhm70zwMSVH6YZZ7bfXkH//V+bkfF79qmCq+IzLzM202VaXMzITHyWQsjLxV6UEih7wOVybHBru3ebf08qAYnDaJfwGFw1Dzz71VJ/B3vHili2u/w1Tby/i4Qfv/MLX4iqln1uvvPSy/Xm2cctm2X8o92z8Nuv7ZvPJYJZR6UWFm6SOy7QXLBpm4jfs2CZACdSVok2n6C066a70ktKv00I5HG1yX+7i9s0V8OuYdbt9beM7vhdVaeDSw45Lvr7QdeqIqT1HA4Pe9kd86Z0h/Rzzc/Go1fpX/mbTFVNyVnio0FcNDqYAYmrTsfvwb5dE0pn4bucQtloXYjNmzxGgyFJ2NrZu3kkRFT3gp9IVM0Qygvg7apigw7QRBEWr9n62hTq0Ur/hubXG0ZfK1DYxgXAfa/mc59Dq+YZeW2n1EK1eLLr/uukFbbLNphcW+t9qy3E31RmXmcSzIzoT//vvWP+mH/b9b6qvYdqmM7iSu80oLt1sK0UO+EWtrVu3IOo4XJscRw8ZKvj0K6NA2b32ftgHHXv67L2Eew1Hrxv676dYYQHxk895Dqfdy2nJcWiw3/i9zcZf/+yTT0mQGJfZN73rNvIG92k6tOmgRKqKPRO/qAE/3VUxT5AYbmPGRl5PRQSFyafXXsOWTsbRg451htaFbK/u3OFaddUD41ywxk8+n2POlBxt+epN7wKZqvfzZs3ydNHpB+Myc5tyi/uFubbpACWQykhxD9sWrUWn+wBBqmQD/VFepgVXIwj4yJO2E6z6h5/5PkTrpx2nN1PP9B/c/klBfOTTa6/0LEf9o4/12V6jwf5FQ1jUz83l1q8PGuMyc9PWuv5WJZ82HZRfZqaVlb8xvrq6TYqgaBV8nfOZsgpogkRoMVSpqOAjH85oQr9Ve2c6Tj7hXieemKqu7HOIj3zvDL3y0iZZ/eTTOXvn5z+8yPjfmVuE6r0I4zLdeGnTMZ0nAwLizMQviuIdsmX2faJwwBZB0220O5p+6evXFFK1d5iq93W3DGefQwzkW7X38jmmF4mmHQr66+sLrN7rhejWnTvsMyNjx9TKzOnTLz+mB37d/gx68ZzUNjPTNJ1dO7az9Aql4MzE3yhFUJSAz+z75DliOGDLDHx4lU/wcnrt++qD9sNL9f5LtOdEXj4Tcvx8jnkZi1n/6FIphE7n0S242ZzzAPqecZm56TQdt4P6r215WZY+HczyMcDAnolfjDadorToWLcc6gSJ0nLieM7H9JZoEkeywb98WnK0oqqHaAsN94rqfbzp7oR8Nh77+Rxbs3698SJR/3tzZ82WfD2ybNlV4V7p7+u0BjnjMnNxxmUmkZelV25DI4AgpbvS86QIitODT3tO4rgtuaqh/x4eONtC/Y4mzLfXvjcv88qp3keTBln9/PrTv8tv47HXzzH9/Fn9wjrj87TFJx/aijN/0SLX30PbcpwZ+IzLzE3bdNy8TcBHaaRS6fR9UgSBB3zac5LniLH/noCP3DR8rfyHn1kB7IjnX6PVyaCq9srLvHKq99Hk3BXy8/mVrW7iRM/PLeZYTP3vTplxr6e5+vt7WiZN4zL9boGOkztrhro+vtdwhgIIUF1Pdg5U8D34XemZxZ2uj7DpbHd/kbhxIKEIfbOXCm1/U05b773S0YQ6vSRIXoIZ1fto0c8tPahd6EjIV3fulNT11Zd/rBX9qsGVdkjXj8eNGWMfcFWmsZh2H38eB2udcG/6HHWM6/nzmPrwG4+ekPmfvU2SSC/WdZ/FqRzfe7SCz7hMlEiqp02nXgIUeMDvl07PzQiShAk6yIdWVlf+j//lqyVHRxP6WVjlhZd55VTvo0XbcbYf+qWvPnuvtP1F35pPdodtXYrmlV6c+q3e729qkvu/OsdzuNc7BE7vvTMuM9c0HR2XqVX8pLZR6kx8t0ldutV2xuw5AhRbKp2+WwIWaK1dbzFY4X6cIFFMM/D1QBOQTaeY+Om3dw45Bh3ulVZG3egBcar30aAXjQu3/NhuxzkfsgOk+YzFfHHLFn+V+9paebbX3S1Ti5H+nSWVqU3n7d206aBkAm/TCbaZRttzkDjvnXR/8eGQLbJp24TbiLretOoZ1EHa3rxMPJk+5hNU70PObvXa9qZ90ein3avUdPqN17Cun5vzHn7o8oFZE12apRfBvSfnTDb04b+V4K22+trU36UAtWvndgFKJBX0NJ1AA7625wgS56zLCxDBCA7nMK3X5VXZ20KLwcvEE+3RfeD2WwXh5EzH8TtatRycz7eR48faoyzdgr5OdFryxOPilc7n3/jc830+pne9GJfZN7baIkyCbtMJLODTnpNcblN0OGAL5Rym9XrgUav1Wo2cOW26FIuXg7V/QGtOaGmb18LvhbMdx0QXqmnQf+SJqyv6Ogazrxn3uWi4N7X+6FZbN82/SvA0HcO4TObho4QCbdMJroJPe05iuU3Rof8eTrj3OpJPw4iG+2K05Dg0YHk5WDvlluL9GZAf7RnPZ1lVGK1ev87usdfPRW3FmXKftzGYSqvyG9au9dTXb5qm81Zzcufhf2roENfHd/k4RA0UKNA2ncCm6DA9J5lMB2yHDKaCn2R+x2B6qUYWSiumpo21ioO14aLBXqv1YW/F8Us/H+c9vMgK7Ms899vby7e2brMP1Xqhd8Lmy6Kcj2sfflLHZY7s6cM//2HfF4u06KCUgmzTCSTg056TXO+dOO76OBX85DpmVew13Hutsmo1ct6XZ0ux6LhBfdv69zuNrTkPWOGe8yPhoBeJ2mff+K63w6l+OaMkRwwfJiOHDbfeD788417n3ffuX9fxmM6ozAPW59Mx68cHmg7Zy6W8BvS+eP21+mfTcO/nDpdpXKZegJ/qPCc3DhogSfQfa26ShhyfX3qHWtt0Jky6S4ASsNt0xldXN0uBAgn4FZcq6qRCgKsQkpLJT7j3W430S4OTTi/x2vrAwdpw0IOfOw79S+Dz7PXzTSvakydOtDe91gzz14ZlP39Y98e9x7ZqgNbQr8uxGouwCVW/Rl75m015ta/puEy3P5Oej5le+wlJItOkN63iE/BRKunulvfVUqBgevArUkzPSShTi05SK0JJ1nD0uOdw7xymLVa4VzqRxGu4t59/Dy/k5eRMxgnyAK29QXbpUnvcauu/NsuG56y7RbNm+w73Jhr4Fy9YaP8+x/YdsH/PoM6S6NkUv5X7bIzLzM00D58+fJRQKpVO3ycBKDjg95z4rRMkUmd7mwAODfdrX/8nT6FMQ30hgcULrd6bRmFmozWnfIoR7DVwO6Fez3YUY1FaLs5iKw36ekFRyOe57oJ45aWXXcddmpjGZeoh+KSOy9Svebd5+PTho8S0TadKClRwwLfbc5BYnYa+0SEDPyZIBifce2EHryKHe6U9917RmlMeQQR7/XzSIO2EaX3TUK/hvpShPhe9W5Bv0M9nA24ubuMyz314IdHjMrUPPxenDx8oFStbFzyZsvAWnYrUDEFidbYn9wUBH9EJJ17DvW7c1OBVSDXSKz+tP7TmlFZQwV4/l5xNx/qmYVrfSvH55Zf+ufTCdolVkfdKD4Tf/5U5EoRxY9y/HpI8LtNLHz5QIikrW39VClRwwM/QnpNopoBPD3786YHalf/jf3l6rrYa5Nq4WQzaouMl6OmIQFpzSiOIYK9BfqNVDQ9Lhd4P/bM/++TTly9KvNDDsbr9tlBzZ7lPqaIPP7e3dwd/aBpwMa7QNp2CAr71m9elRAruE0J0dXRQwU8yP9Ny9MDhaivYlJIuETKNH9SFVtNrf0tQXEEEe+ewrB7MNoXVsHPa1ExVdYcuZ9MD44XQvz+330/HZdKH37e9e2jRQUlV9ZN+BY2fLyjgp7sq5gkS7SxbbBNL55Ov+oefeQ73xV5g1ZuOxmw2Tnnqz0KrIgsy2Gsfu34ehbH9Jh/2FKnX3/DcslO/6hnjBmYTHZfppvFd990mcTZ66A05H9O71S0nkvt3g5JLdXV1FdQCX1DAT6XTkwXIof91BPy48rOhNt9w/+qOHXZbwpInlvkONWvWr/c0PWfR5NtpzSkSPZfxXOM7MvfF7QR7A23Z0f+dXujXg+nC1c2M6dNdH9e7ckk15qYbXB/noC1KKZWuKCjg573oal9rq3XrIFMjABJFK7LFDPfaUqOHCnsv5Wncs8eeQmKik3OWPPG48Xk6EtOtYof8aLDXQH/4/Q+kEPq5s+TrC2Mb6ntzvk5MbTjO14dW/vOhLTr6d5qrdW1vgvvwa25w7zg+Yn1vYaoISidTU8hW2/wr+F3pOkHidTAHP3G0LaeYlXutUPa1cbO7B/kZ119rTxz5qnniyISamxiJGSBn6+zybW9aF3+7Cwr382bNin3FPhf93+ylXWf/oSbj10Iupj58HZdZ6MVZVJkm6bxNHz5KrGerbX6/VvJUkU5zIQvXKTo3DqT1IW42/PSgpxd/nZaTb8/9VpetkatfWJ+z8qg/r4dqvfTdf+2ztwkKl91fv+EnTXkHQw2d+jnTPSv++aLvRwgzbdfxMhlo4/e2SL7c5uErvQuTRHpuzC3ktxTQGgXkoaCttnkF/J7RPXUCIDE0yO1o+qXxeTrnvpBpOW5Tb/SxR6wKf1+0X99Lb7LOu6fvvjAaALVaX0h/vcrusdfPmSQH+2yvvLTJ+HdRUB/+NPc+/MMtyazgq5EuAZ+DtiiDvMdl5lvBL2h0D4BocfqqTXSxVKGjMGuGuQcbbdXp3cKjfcuvulT+Hcy7z59Trf/m3+0quA0nKYdn86V/Hxry3f5e/Cxx681eCubydab/tkkdl2lq0zniYzs2EIC8x2XmFfAZjwkkh07Mec7DlloNDa/8zaaCw9piDz3I2QcRdWKOjg800UO1zLv3Ty/uVv7Dzy6PuWwuYMoKwd477ZNf/mjuyTpLvu59G25fTG06bx1P5lbbIYPdCwBU8FFieY/LzGuKTjqdGpsRAHHndWKOhntd2hNEi8WSBQtlzQvrXVsQtILvVOy9TMzRqhyHar1zDs02vnvCvsArlIZVPTyry6kI9d7p10JbR/tVk3X0IqnQRV91kybZZ1pyaU7ouMyRv+neDXGUCj5KrGdc5iPik++AryN7MrToAInwg3/6hTHc2+0Ef7Mp0P5pHYc55b57XZ+jvfimLbVKD9Uu/Z3PCNxpqG8+0xbIiEuHHhbVMOrl0Cj6pnc65n159uW2tJnTpgdykTTZ8G/SePSE3dKWNKYWvs52trej1OxxmVXjq6t9jS30HfArLlXUSYUARqfOFl75Q/nsaPoXT4dqNcAV0g/cFw2E+tbXuEyHl0OGA667hkO1BtqC81bz+9LwzyfyPiybTcOntn9ohZlgHwy9eJ43vLCKfW/67+T2NabjMk91nrMukAdI0mhRINedq/dO0qKD0rOyt47L3Ojn1/gO+JmU1KUE6DaI2+2xpC9u3/8n86FaZxlRMTz71FMyfvLdUohH/9NnCPd90FCvVfrth34ZSKhXzqjLJC2nirq6iRNdL6J16dX02k9I0gxxCfhU8FEGKalI64vhRj+/yPch21Q6PVmAHoMr85rehJDTvntT8NMqbb6z7r3Qvm0vS39y0fYCNtV+RKuxOgXHWUZVyHjLbFoF1okvrf/azMHZiJk8yf0Oy1sJ3WrrtsOFWfgoj4zvhVe+Kvj7WlvHaS+QAIgtDYFeDtU+W+A4TC+WW4Fx45YtnnrtszExp5uGej0oq3PNg9xOqiFe9x1oPzhtONGl/3b6b5nr60sP2urZDG11A1BWVXoGdnx1dbPXX+Ar4FdcqhhH/z2yDXSp1p1P6BzlKPM67z6oiTkmGj50HGD9qpWef422FCR5Yo7TfhPUBJxsGgid/noq9fGg/556Ed0X7cNv/lW7jL4pWXfC+hsuaHRU5tDhIwQopXRXWqv4q70+318PfkUqr1mciK/Bg3O/yOuLA6JDK3Ve5t1r330pN44uXrDQc8DXlpz5nw32wG/YOdNvgjwom41qfbzpNJ1cAV+91dySuIA/4FruWCB0Uql0ha+xVj4P2aa0RUcAr7i9Gx1eRmLqLHNT3/3+piZ7hKVOudFwqBN2dGFPvhcFusjKC511r4dqk0Bbb/Yef1/eOva+HLMqrMW4W+aMuNSzEFTr40sv3ObLopyP/7wluNYuAIWw+/C/5vXZngM+/ffoi2mKzrkPPyTgR4C2cphGYmpAX+4h3E+Zce9HPb0nrZ871GRP6sinrUcX/HjZUuvMuo/r55peKGvbjbbfaLAPuvXGQQtO8ui/c82w4dJ8su/Do8fowwfCwlcfvueAT/89+sKYzHjQqTkm9R6q8Pd/dU6fB/a0mq/BX6etaEXYCz/hPm6z7rPbbvSgY5AHZHtzxls6uweQPHpR57bV9q3jLTLlFnrOgXLz04fvvUWH/nv0wRTwT5/9v4lclBIlXqbmaGuOVnXdaLB3Wz5lh/z77rW31GpbgJukhfvsCn2xA72irx7ZZkyf7hrwdQoTAR8oO199+D568Om/x9UGGebgn2OSTqhpq4cuO3LjpTVHeRllqc+5/ytz7D5+7e/ui9dwH+UttdpD//P3z8ixD9qK2nKTjVCPXJxzFrm+hvcmdB4+EEJ1Xp/oKeBrzw/99+iLlx58hJdW700HNOs9HpDV5+hbs4dFME6A7x3y4xjuNcw3n+m4XJ0v1qHYvmhv9Yzp0wj1cGUfhrdCfq6ttva4TOtzVw+yAyinTI3XPnxPAZ/+e+RCD350adVYZ6W78dKak+3ZJ5+yK/ReaJBv62i3f43yG+7DFjb0btXps91hXivzpQ7zDg3ykydNtP7tZtsBH/BC+/BzBXylF6hJCfiMeEaYWZm8znq30fQ8TwE/k8rUpSQlQG/GHvwStB4gP2tff8f1ca3qeWnNyaaVYu2xn//wIk/PX71+nTTu3m2H0tUvrPP0a8od7rODvFbn9ULp5+9/UJI2m77ov5P+vU+eONF+z/Qb5GNsrfvhdz3wrUvkksB0Uc6SK5RRysrkY7080VPAT6XTnv5jSJ7Bhh58hJNW7g8b5lvrZJV8Ztdr5Vhn32sl30u7jo7R1DcvFk2+vSThXoP7ebstocNuMzv2QXclXrd6ngrBRatTpWfyDYKin0duffjNCRqXeZYKPsIsnZ7s5WleD9nWCZCHMIQhXO377/zC9XEN9vU+q/fZtJ9X597raEwvId8LDfdTRhXWcqIBRQO7TnfSu0v6sf6cfp7qj0+fPW+/uJ8P2eFwp5feCfRU6VEM2qaTa6ut3YdvXeAmYavteZeAT1sqyi1lvcTua22tGl9d3eb2PGPAt/4jdQLkMHQ4Pb5Ro9V7U+uUHqwtlF4kBBXyH7j9k3Lj4P5XjI/UYJ79QqxVd+fnz/WEdH2vob378ehcbDqBXi+UaLtBqUy2Lh5zBXz1VnNLIgK+2/Q3XvMQBv2k3zjrXaP7c0y60uMkLQBiwlS911Dp52CtGw35+xrfsHvyX925Q/Kl037kHYktrcqPrR1DhR5lpReT8yX3+ZmftxR3P0NYuBUDqOAjDLq6ugoP+BUee32QXFrRaMlRoeWQbbh4qd4/+9RTEiQNq7rB9pEnHpfV69dL0ml1vm7SJOtCaox9sNGZQQ6Um34e6udn88m+v58fS0gfvluLzuDBnDtD2XlaeOWhB58FV0BcNLx73PVxHYtZrEObi7++0L7972UhVlwQ5uPnZEuLnHyv5YqfGzxokIy5dZTEgfbhu221fet4S6y32upFjJubaNFBONSZnuAa8LWJnwVXKMSps1Tww+Lw+6fNk3OsEF4M2oOvvfhxDffOoiBts9H3OkVIwz1hPvp+svdt+dE/NtrvT7S8Lx2dnTmfO2bULTLaCvpfmnmvfG7CHRJFM6ZPdw34+j0kzgH/vGE5480EfISCvfDK9aCtqYI/TgCDm4ePyNmig/BoOOr+b6SV+3GGWdj52N/UFItwr2G9anCl/Xc0YvgwgnyMdXR0yl9u2ix/+dJm10Df26Gj79pv39+6TYYNHWqF/Nvlmw99XYbdPFSiQj+v3extfl/i7HTn/3V9nBn4CIuKimu1hX5rrsddA366K13HAVsg+rxsrV2+tPDJOb29uGWLzHv4IYmC7ADf3Ys8zAryw7N+TOUu7vIN9n3RVp7vb22xw/4fzZktf/yV2ZEI+vq5rhf7ubba6mQqnVh146ABEkfONK5cqOAjLDIXLo50e9w14Kc4YAsPhroEHw7ZhkOjofdep90E3Xu/YuVKqV/1jJSTE8r1f58d4HuCu76v1I+tn7cfG1xJFT7htAVn8RPLrWAefIX6r6yLhh/tapTvLP0T+b3PT5Gwq5s4MWfAV3tjvNXW3INPBR+hkJJUSjP66lxPMLTopGo4YAtEX4Oheh/E3Pve9I7A3Nmz7I+1Pcdp0dH3L27ZLK/u3On66zV4z/vyrCt+bkSv6pkT2nt/TLUdfnz3+Rfst2LSiv68xX9it+zoW5hNnmRd7K9amfPxt2Ic8E8bRmQOphCAkEil0mPdHs8Z8Dlgi6AkZb15WOnhWrcXLQ3SQc29v+q/7QTtYVf+/CNPLDP+Wr3oKNafC3B8e+V37ZacUtELCZ3Cs+bJFRJWzi6GXOdmms/EdxKW2/+2UUU4owTkz/2grVuHPQds4Ylp8cc5w1QCFJf5cO1EKaWNVvXetNlWF+4Q7lFspQ73Du3L13agMJvs0rKnffjZW6XjwtSec/Mw2nMQLj0HbfuUM+DbB2wBD9jsF176Qmw8XPvoY1JKK1xu/TuefTLYZVtAb1pJL0e4d2jI/9Yz35WwmmK48D/cclri5vRZ9wO2VPARNm4HbXMG/FTavbcHQPiZRtrprfiaEk6F8FK912VbNUyqQBH96B8bit5z74UevtWgH0YzrLtobkw7NaKo+QP3Cv6oWuPyUKCUXDfa5g74IjUCeGCq4J8+6z5XGMXzv5pbXB/XMF1KOjbTpNR3FJAs2v/+rZXhqZx/26ri996MGwb2hCmXw+raoqPnq+LE2KLDBB2ET12uB3IG/Aw9+PBoUGWVIJxMFfzJAY/GdKOVe7fRe4rqPYrNPuTaEp5lTe2dnaG4m9CXmdOmuT7e/Kt4HbY1TdAZyvcmhE73Qdu+Hukz4FtPrhMAkfbWcfeqYKnbc9asX2d8DtV7FJNWysPYEqN/Jp3DHzZjDT3nbzWH785DvvS8EhN0EFE1ff1knwG/4lIFJVkEJm63caPirWPuVcpSt+c07tnj+jjVexRbWCvlKox/tpmGPvy3msNzJ6RQzWfaXB8fNYb+e4STldn77LjpM+BnUpk6ATxiTGY4mcbYlbI9xwvGYqKYtBUmrAda1U/2viMdHZ0SJjoLf9yY3JVrbWmJSwHHdMB2wqS7BAihlJXZ+xyK02fAZ4IO/GBMZvicsl543fpJS92eo9z6efXPUheyCw7Ey4/+sVHCbs/b70jYmPZkmFoBo+KQoSByM3cXEVapVE1fP93nJtuUdeGeEQBR9XPDi9W4MWOk1BYvWCgbv7elzzGZzL1Hsf1oV6MEafDgQTJm1Cjr7RYZfeso68cDZYz1XlUOHGQ/7jjZ0iLtVnW+w7qLcPK99+XwkaNy6Oi71tvRy1X7YTcPtf9bYTNj+nRZ/cL6nI/ruMwpt0R/uozpgC0jMhFWqVTfRfmrAr6exmWCDhBthwxLaPRFu9T0dn/D1m1Sv+qZy+MytWq/fOlSqvcouj1vF3aI1Qn0vze1Tr7w+ToZNnSo51+rzx3mPH2C/r97Lz92yAr7Gvz1v519URAW2qKjX7tt7X23sOyNQR8+B2wRbd2TdMZXV19xkKSvCj7hHr4Y5+C7VEZQHM2Gec7lCtTairPxueftN6BUtGKeb3/75ybcIV+aca98YWpdUQK4U/UPK6cPP9eIWw3HpzrPyY2DBkhUccAWMVBjve3P/omrAr49QadCAM8GMwc/VEzVKKrlSBo9YOuHBvk/njPbDvbaOpN02ofvtsNCq/jTaz8hUcUBW0RdzyQd94CfSWXGpbQLH0AkmapR5ei/jwOtAGvPtPZQa091tsGDBlmV2FtC22aRdPpv5tU3H/q6He75d/zI5ElWUWDVypyPax9+lAM+B2wRcX1O0rkq4DNBB4g2UzXKfrGGJ7p8SKev/P2uBs/bT51Dl1+aea/d3oFo0H+rNX9RT8W+D3rXz60P3zSSN+z0AiUXDtgiClLpiqt6pa8O+CI1TNABouvUWfczDzXDqEaZaKD/q5c227PJ/eqejvKuPXNdD1dqRVjDPsrHrUVHK/V/uvDr8kdfYQ+DG92bsXXnjj4f07ZADfmjb7pBoubYmXY5/2HuWf4TJtKeg0io6/0TV83BZ4IOgnbuQzbZlpLpgO04JkLkpBX7L87/I5n/X/4kr3Dfm7byLP6z5TLhd+6x/9soj8pBfbfbaLX+H/92C+HegymGefjNH7i3BobV6bPnXB+/gzueiITMVYchrwj4+1pbawQIWFw2HUbFMZcWHcJ9bt9e+V0r3P9xIMG+Nw36+t/+1jPfFZReX/302pKj4Z6WHG9Mm6/fiui4zLeOuf+5ac9BRFT1zvC9K/g1Avg0lANIoaF3S9xuN9cMGya40sn3WuS3f//L8pcvbZZi+6tNm+1qvv6eKB09AJ1Np+P8cMNfcpDWBy0OVLmMRNY7h1Es5pjueBLwERUVFddecYb2yoDflaY9B4iwU4adAzrPGh/RoK0tOdozX7Lfs6eaT8gvHT0LsebJFfZZCD0ToR/Dv5nTpuV8zB7P+yv3sBw2ppHC2p4z2LDnBQiNDy9VZ/8w3esHNQIgss5/+KHr41W8WF3mhHuv03EC/b0J+SWnVfs1f7HCDvjIj6lAcNiwQTtsWHCFGLlqVOYVAT+VTo8QAJF1uvP/uj4+gnaqy8oV7h1OyM93wypQajOmTXd93G3cZBiZ/rwsuEKU9B6VeWXAp4IPRNq5X1PB90IP1JYz3Ds05H9rJQdvEQ01VoHAbcyujsqMUh++aX7/rfTfI0Iykrmizf6KgN9FwAcizTSStIYKvj2ushQHar3SefmM0ERU1E0yjMuMUB++28QxHR7BAAlESe8i/eWAv6+1tcp6sEoARNZpwyHbqsFU8Bc/sVzCZvET9bTqIBLM4zKjca7EtODqVvrvET06KvNyjs+u4NcIgFhLeovO91/dForWnN60VecvN4XnrgKQy0xDH37zB9Go4P/ccCCYBVeIqBrng+yAT/UeQKx99/n1ElZ/FaK2ISAXLRLEoQ//0PscsEX8VFRce3lYzkcBnxn4QOSdOpu7RSfp1Xvtcw9j9d7R3tlJLz4iwW0evjIdXg0Dt/n3g6zvlSy4QhRlLlwc6XyczvqACj4QY7TnbJNS0Q2pulzJefPqJ3vfESDsxtYa5uG/H+55+LoQ0O280qhaFgIiklLW2+UKfr/LP5tOjxUAiKmgq+Ojbx0lY269RUaPGiXDbr7J+niUVA4cZIf7XLTXXpdbHTryrvxvfX/03ct/rmE3D7WXMQFhp33482VRzsd/HvJ5+M2/cl9wNWEi7TmIpuxZ+P2yfp4KPoBYOnzkaMHtORrcv3zfvfLZO2+XiXfc4Rrkc3Eq+p+bcMcVP3/I+vMNt34+n/8mUGp6N1C32u4/1NTn4zqhRvvwB1x3jYSRacHVHfTfI7IyNc5H/a78yZQAiC63285uB+Pi7kSe4d4J9b/3+bqrQnmQtPoPREndxIk5A77SPvw7a26SMHLrv1f03yO6UjXOR/36+kkAiBOt4Puhwf6P58y236iqA1ermzRJVr+QeyqV9uGHMeDrMkC3Cr723w9m4zciq1cFP3swPgDETUentyVSBHvAG9PCq7D24Tefce+/Z8EVok4z/fjq6jangl8jACLvbATmT5dDu4ctsRrqv/nQ1wn2gAdR7cM3LeKaMv0eASJOi/Zt6awfAIg4t9XrVZWDBVfT6TU/3PCX8uePfZNwD/igffhuwjgP37Tg6ubhyT2rhHjoJ/1q9L0d8CsuVdQIgFhL+hz8vujB2X/82y1FPUALxJX24bsJ4zx8Flwh7jKXuvvw7YCfSX3UlA8AcaNV+t60HUcr91Tti6+jo9N+Q7xErQ+fBVdIAivT2105/QQoUMuJEwKE2ehbb7nixxru9Q3B0U3B39/6mh3k23sONbd3nr18wHnNX6yQL81kkVecRK0PnwVXSIDL22w5ZIuiC+uyk7hxq0wl3RemTpE1T66wt8ZqOw4bY4N3+OhR6+/3nZyP6xZfxE+U5uGbDtiy4Apx4GyzTXf/ID1CgCIZcC0BPwySvOhKaai3q8iE+6L490OHuj5Oi048RakP33Tol/57xEEm01Wt79MCAECBKge5n2U4QQU/lqLUh3/MpYLPgivERiqV3aKjh2xTAqC0TnWek5+/f8Z+rwfAzv/6gpw6e94ed3nWejvfx1z7Gwf1l/7WXZEBPW81N1RaPzdAgHIa0+ucQ2+Hj7wriJ+o9OHrn8NtjPDNw2hkQDykJPXRIduM9QPiPVBc+iKnWxTfan7fHtV27FftfQZ4k1O9eu3fOv6+AOVmmkbkdZswoicKffinz55zffwOQ6sREB1ZU3RSLLpCAd47cVzQNw31jf98XN469n7egT4obR0dAhTLsKFD7ZCfq9deJ+voQdthhl59RI/24a9+YX3Ox7UPv9wB33TAlv57xIid6dP7WltrBCiiIYP6S9Icbjkty7e9KXNf3C4bftJkV7DKGe7V6vXrZOT4sTL/4UXSzGhTFIEpvP/krXcE8ROFPvxjZwj4SA7N9hyyBQKi1fodh/5FFm75sSzfvjuUa9o12G/cstkO+lPuu1detD4GgjJmlKkP/6ggfpw+/FycPvxycttgO3T4cA7YInY04NcIgII0vntCvvnDXXa1Pirz6Bv37JZ5VjVfwz5BH0EYfeso18cPHSXgx5X24btp/pV7Bb2Yzn14wfX7sgZ8IE76ST8q+ChcZ7v7N+4B114rcaWtON/8u13yXOM7kV00pVV9gj6CMHHC7a6P6yQd5uHH09jaWtfH32ou35hUHW7ghg22iKN0xaWKGgEKYAz4Mdxkq7ebN/z0oN2K03ymfJWpIDlB//6vzKFHH3n59zcPdZ2mowdtqeLH08xp010fNx1yLSYO2CJpMpcyNf0EgC9atX/u9X8KpGKvvau6YXacVf0aN2aMVGovq/Wx/nzV4Er7fbY262KqraP9cgA/0NQkx06esN4fssfUtbUX/iL66s4d9lv9o4/J8qVLBfBKl11pH/5P9uY+TKuPfW7CHYJ4cb6XNZ/suzjQXMZ5+LpbxM3NtOgghvplUpmaFEuuUIDO9jZJih1N/2JV7pskX85htJnTpsnkSZNcD6bl+vXOC6mq6zW9QoO/Bn0N6K/v2VNQJb5+1TOy8XubraC/VObOmi2AFxre3QL+3+9qkG8+9HVB/NRNmigbt/T9PUf74LUPf/RNN0ipNTNBB8mS0mxPBR8FM7XoDBn4MYkDbcnZ0fRLyYcG8bmzZtm3sauKOK2hxqpE6Ztzu1zDvk7N2bpzZ15h32nbIeDDq8956MNnHn486bjMjVu25Hy8+YO2sgT8Yy4tOqNq/RVZgKjQQ7YsuQJc6G1lnWnvN9xrkNcWl2P7DkjDa9tknhWSq0o8ik3vEKx+8unLfwa9yACKSSv4pq223391myB+6gzz8HWLd6npnYPzH+Ye0XnzsBECxFAlAR8F62yPxyHTvtjhfvubvmbaZwd77WOvCUl/p774bnzuefvPRdBHMX15xr2uj//VS0xriiP9XudWxCjHQALTBB0q+IijVLqikjGZKJgp4N84aIBE1ap/+JmvFyUN0fsa37CDfVVIF6foizBBH8X0e1PrXB/XaTo/2fu2IH70fFEudh9+iUP+uQ/dF2wxAx9xlU6l06xvQ0E6OuJZwdeee6+Vew3zr7y0yW6DCUvF3iQ76Eflz4xo8NKm893nXxDEj2lwgE4hKyXTiMyhw2nRQfxkMl3VtOigYGddKvgDro3mDPwfvPMLzz33OtZSq/amOdBhpeFeQz4jMRGkP57jfjBbJ+1QxY+fyYY+/GMlruCbxhkzQQdxlEqlaNFBcfWP4JIrrTD94J0jnp67eMECO9zHoQKubUVU8xGUP/qKefLSt5/5riBenD0eufg5zxQEtxn4g6w/5+CQtlIChSLgo2AdLnPwB0asgn/KqvboEisvtOKtE2riRMN9w9Ztkb0bgfDQpVemkZmHjr7LgdsYcmvT0Yr6qc5zUipuFXz67xFnVsDP1AhQALdDtv0jFvC1NcfLhloN91rxLgZ7WVVTkzTu3n3FWyFLq/zQkK/nCWjZQaG8LLT61srv0qoTM3UTJ7o+Xsoq/qlO9wo+EE8pFl2hcHEZk/lWc4s0vmsO0dqWE1S4b7P+7l7dsUNe/8me7hB/0vz7a3Wse5nVNLvftVgtNc7/xhUrVwqQDz1sqxN1frSr0fV58//Ln8j//H+3yLCbWX4VB7qlW1bl/r5Rqkk6xv77MfTfI74I+CiYW8AfMqi/RMWGnzYZn6P9pUG05WiYX2G9ADbu2S1+6XZafXt15w77xxrwZ0ybLku+viDwsF+suxRIju8s/ab85O13pKOjM+dzdGzmb//nWfLn1nO/NPNeQbSZJun8vKU0FfxTZ91bgei/R5zRg4+CxKV6r5V7U7XHbl35m01SiI1bNsvI8WNlyox78wr3fdHWnTXr19n/3Re3BN/PTMhHIbQq/6ceWnU05C/+s+Xyxfl/JCffaxFElx6ydQv5OklHlwgWGzPwkWQEfBTEvOQqGhX877/zC+Nz6h9dmneFXEP4lPvulfkPLypqL71pRB1QDn80Z7bxwK1Dx2dO+N17mJMfcaY+/OZfFb84dLrDvWjDDHzEWVob8QXI03snjkvUeanez5s1S+bOMo/968ua9etlfN3dgVXsc9E/IyMuEVZr/mKFVc2/yfPzNeAT8qNrbK17m07zB21SbKYKPi06iK9MDRV8FFUUevC9VO+X59mm8siyZbLkicftw7TFlu8FCFAK2qqzYc1/M264zUbIj646w93EwyXowzcVbm6igo8YI+CjIKYWnQHXXithpr2gXqr3+VTG5y9aJKtfWCeloC+mdbTnIOTG3DpKfvjXf+k75DNGM3r0e2a5F16dpYKPBCPgoyAthhadASHfZLuj6V+Mz8mneq/hfuP38jvw6hxQc0K7vumP3V4s9SIEiAIN+f/4t1t8tessfqJeED1uZ4K0fabYC6/OuwR8ZuAj7hiTiYKYK/jhDvimKlI+1XudG59vuNcxnPsa38j5uL0Eq2dE5ut79tg/1j8f7TmIEm3X+eFf/5Vdnf/+1m3G559sabGr+DpXH9ExZeJE2dozzrcv+v33xkEDpFjcJvUwQQdxRwUfBTEF/P7Xhvca8vD7p43tOYu/vlD80DGY9auekXzpBttHnliW8/HuBVfTZeNzz8uxfQek4bVt8uyTTwkQNRry1zy5Qvb+eLunav5fvhT8CFgUl/GgbZEXXlHBR5IR8FGQ9wybV4tZnSmU6ZCXhulxhheobFpNX7Gq8K2vq9ev8zxxR9t3NPADUaVBf++PdxjHaP507zuCaDEtvGr+oLgB/2wJZu0DYUXAR0HOulTwo96eM/ML08SPeivcBzXjXqfvAEmiYzTd6CIsbdVBdOi5oZphuVthylnBv3kYE3QQbwR8FKSjPfcs4/4hP2BrquDPmO69Mq6tOV62yC5futRuqzHRPnvdTgskhVbyhw11b9Vp7+gUREvdpNwLr/SgbbFDPpBUBHwUxK0H/8aB4Z2Bf8zwoqKVJz9jJ7205sycNk3qH33M/u966ZvXOwKlmJ8PhIWGfDcdnQT8qDG16Rw7U5yFV6bzVQPpwUfMEfBRkBaXlpQwt+icPus+ns30opRNq/em1hzt59/w3POXf7xkwULjBYSGe6r4SJJDR991fXzwIO/z8xEOkw3f58pVwWcGPuKOgI+8mSboDBkc3gq+6XDXuDFjxCsv1fuGrduummO/4bm1rrPt1eoX1lPFRyLoGMwOQwuOztBHtJjGDP+8BBttgSQi4CNv75mWXIW4gm9q0fE6+15nPJuq97lm6evPLfn6AtdfSxUfSfH9V93Ppoy+9RZB9DiL+3I5ZWilAZAfAj7yZqzgDwpvBf+8YYX5WI/jMTds2WJ8jtsm3MULFnqq4gNxptV708KriXew5CqqxtXmviPKQVugOKyAn2kWIA8tJ6I7A990AKtqsLk/Uyv3blsalWkTroZ7L1V8r3Pxgag5+V6LLH5iufF5D8y8VxBN5TpoCyRXqpkKPvLWYmjRCTPTApSqKnPA9xK63ar3Di9V/BUrC1+gBYSNhvsvzv8jOdnyvuvzPjfhDvrvIyysB22BOCPgI2/GFp2BH5OwMrXouC1ncby6c6fr4zolx0svv5cqvl5McNgWceI13KsvUb2PNNP3wWJvtAWSiICPvL13MrotOkF49aVN9tKqxQsW9PkCpu05XmkV38TUDgRExV++tFk+/59neQv3M+613xBd5d5oCyQRAR95O+tSUQ7zAdsgaZV+9ZNPy7F9B+y31U8+dXm+/Yxp3jfhelmsRR8+okxHYOqknAm/M12+vfK7npZW6eKrbz70dUH0mTbanup0300CwJ9+2ohvva8RwKcjTQdzPhbmLbbFolV8rcTrm7bTVPlcpKKbbt1CvLYEbRAgOjTUHzp6VH70j43yva3bfG+i/c7SPzFut0U0dB+0zT11rPlMR+zv+gKlk2nuJ0Ce3HrwwzwDX/W3/nxuffj5BPRs+fzaubNmy5Inlonbn6n55AlP5wOAUjl0xArwuxov//hkS4u0W8H+sPXzXlpwctHK/e9NnSKIB1Mf/mkq+ECgCPjIi1v1XoV5i60aeJ0h4HcUFvDz4fSpNrucbXh9926psS4EgLA4fORd+e7zL0iQNNzTmhMvY42jMoPtw+9/nXuRyTTmGYg67cFnAC18M03QiXqLTltbeQ59aZuOm/1NTQKESbvPths3gwcPkjVPriDcx5BW8N2KJscDDvhhv4sMFFMmk2lPZ7q6OL4O30zVjyEh76U0HQJuPlme6o5pg265/lxALh0BBfwxt94i//i3W5iYE2Nu7YWnDMsHAXiXSqVbmaKDvJiWXN0Y8ik6pjsMx8t0+9a08XH/oUMCxIlW7bVi/z//3+9xoDbmxtWOyflYMSbpuL0OvXcyuosaAS+0B58WHfh25JB7q8iQkLfoGCv4ZQr4xoUw9I0iZHRhVT402P/xnNn2m36M+AvTJJ1OFgcixjJdl9oJ+MjLWcMEnQHXhbv/0fQiUq5WGC8Hewud8AOU0+cm3GG93U6wT6BKw/etcx9+KEHq79KHT8BHzLUzRQd5cZ2BH4ElVyOud3+hKWcrjGmSTjkm/AC56FhMNxriP3dHd6j/wufrZNhQ2nCSytSCeDrgPny9U5trSy4BH3HXL5WxF10Bvrh9cwx7e4660UOLDpVywOyPvjLbrso7nAA/+tZbZLj1MVV6OEwtiEEftB1oqOB3WG+D+R6P+MlotqeCD9+iPgNfaRuRhny3F5T9h5qkbuIkKTV9EXSr4OvFB8uuEBZfmDrFfgNMtGCib205CkTHSzwL/2x7GwEfsZW+VHGpWQAfTCMyozID39Smo0ulAADBcStOnHVZPpgP02vRewwtQEylKlLNjMmEb6YRmTU3VEkUjLnpBtfHG/fskXIwTcqpGkzFCUA0jXBp0wm6B3/Adde6Pm56LQOiTAN+swA+GJdcDfyYRIHpQqRxz+6ct5LLqaqKgA8gmqorB7s+fu7XwVXxTXdpW6jgI6YuykUq+PDvqGEG/o0h32LrqLG++fc3rDPfunOHlNq42lq7918nTvR1yJcKPoCoMp0fCnJU5kDD93cCPuKs3/jq6uaDrcGsGkcyuB2yHXl9dMKnHrQdeUOlHG75IOdzNm7ZInNnzZZSeuWlTVf8WO8i6KFbfc9kHwBRNsIwSef02f8bWJFIx2RqEed8jt7+I4cOChBHmu3tKToZK0OkrMKgAAY6WizqIzKz3TniJteAr5N0yh2q9fceV1krABB3pzrPyWjD+Sg/Bl6XO+AzCx8xZS+wtVt0UpJhmy08MY3IrLkhWtXlulEjXB/XcP/ils0CAChcqUf8uvXha4tOByEfsZPKDvgpAj48MfUs1lwfrRtB2qYzeqh7tWj1C+sFAFA407KroCfpmJYavs8kHcROpln/vx3wM0zSgUdHDRV80zfTMNI2HTc6tlIn6gAAomWkoehkuisNRFV3wO/q4h4VPDFN0IlaD77SNh3TNJ1Hli0TAEBhTOeZTgVcwTeNyjzS5P6aBkRPqln/vzMmkxYdeGKaoDPAsBo8jLRN557a33J9jh62XbN+nQAA8lfqgQWmu8qmohUQNZmuS3YvtR3wu2jRgQdxm6CTbXrtJ4zPqV+1MpSLrwAAfdMCjlvIP0qLDmLKDvgVGQ7ZwixuE3Sy6YtA3S3uh7803M9/eJEAAPLnNkkn6EO2ym3sphatWjhoi/jIpDJZLTqXKi41C2BgqnREbYJOb1+6/ZPGXvxXd+6gVQcAIqTG0Ie/d/ebAsRFquLKHvxmAQxMIzKjOEEnm249NPXiK23V2U/fJgBEQs0Npkk6fD9HfFyUix/NwRcO2cID02EkU5UkCrQX33Shoq06939ljj0+EwAQbqbXprf3UMFHrDTr/7MD/vjqagI+jNxuYwa5WryctBd/Ud3txudpuJ8y415CPgCEnH5fdwv5R60KPhttERdOpk9/9FPdm6+AvpgO2A6JeHtONr1Yme6hVScpIZ+LGABRZ9pYzjQdxEN3/71K9/WTQG9HDT2KI2PQnpPtgds/6elMgYbf8XV324dv4+rFLVsEAKLMtNH2bQ7aIhY+KtZfDviZri7mRCEn4wSdG6I9Qac3vaW74p67jFN1lNOT37hnt8SNXsDUr3pGACDKTG2ke2P4/RvJk8lkLveaZVXwOWiL3EwHbOPSg59N246W/u5nPD23ZvhwqZs4SeJGW5AAIOr0+7nbXVmt4NOHj8jLZA44H14O+GyzhRu3A7Zxa8/JphcuiyabD93WTZwocbNi5Ur67wHEhqkQRR8+Ii4jWcX6ywG/IkMPPvpmWgIyIsYBX00ZNdw4Zm3urNkSJ7TmAIib0UOHuD6+a8d2AaIsnU7vv/yx8wHbbJGLqaph+qYZB6cM69PHjamVuNAzBbTmACiW5pO57wwO8HDuKV8Tam5yfbxhJwEf0eYsuVLZPfjNAvTBdPgozi06jvMfXnB9vKoyPn8HtOYAKJf+1xUv4Jvm4eu29pYTzBtBpDU7H1wO+DoYP8NBW/TB7Rue6RsmomXN+vWy+oV1AgBxZJqHT5sOIqwte3FtdgVff9AsQJb3rHDvNgM/KeHeNC6zLQbTF/Zb/85LnnhcAKBYTHcHbyzy0sQ7a4a6Pr4rxjtNEG+ZXhn+ioDf1dV1QIAspgVXNTckI+APNNw2jnpLi/757//qHAGAYip3MUSLUm4FGz1zxrhMRFImc0W7RbrXw7To4Aqm7X6makhcmCYFvR7hJSka7vVQLX33AIrNFPCHFLmCr22lbm06ndafj3GZiKTMR1ts1RUBP5VJ7Rcgi2nBVc1vJqOCb7ptHNUttoR7AKXU3uEe8Adce60U2380tenQh4/o0Rn4VPDhjVYyTAuuBhRx4kGYjLy+yvXxxj17IteHT7gHUGqthu+TpXhNMY3LfG3LywJETfYMfPvH2T+4VHGJCj4uO2K4TRn3BVfZTC8IGu5f3LJZosJPuI/TCFAA5XXc8D2nmHPws38PU5uOacEjEDYX5WJz9o+vCPjjq6ubGZUJR4PhNmVS+u+V6QVBrX5hfSSq+DotZ3zd3Z7DfcPWbQIAQTD24A8sbg++484R7kUb2nQQNZrhs3/cu0VHUpIh4MNm6r9PwoKrbKYXBA3MK1atlDDTOfca7r1eiGx4bq2Mq43Pll4A5XXs5EnXx0vV9mkqUNGmgyixivNXdeBcFfAzXZnXBYnnpf++2NMOwqZu1AjjPPzV69eFslVHA/0jy5b5mnO/Ye1amTltugBAUNpdigulfE3R34s2HcRGrxGZKt3H06jgw/iNLUn99w5t07mn9reMz1vyxDLZb7j7UUqNu3fbVXs/G2o13M/78mwBgCC5fW+8cWBpi0ajb2KrLWIik7lqj9XVLTqMyoToNj/67/syvfYTnrbajp98t6xZ7z1QF4NTtfc7KYdwD6BY3NoDS3HANtuUW0a4Pq5tOiy9QgRkUtf029f7J68K+EzSgTItuDJVPuJKX4AeuP2Tnp6rlfz5Dy8q+RhKfQFdsXKljBw/1lfVXg/UEu4BFMv+kG1G99Kmw9IrREHqUtdVV6J9teg0CxLtvRPHpcUllGq4T8r8+75om45poo5j45bNdtAuRdDPDvb1q57xNdGnZvhwe1oO4R5AsRw/6f49sBznukzDE9atfFqAsLsoF82HbMdXV7dZ1f5mQWK9vdt9K2upqyxh9OjvfMa43TabE/Sn3Hev3bpjqmR5pSF+4+bN9n+3+uM1voO90ik5Gu6ZlgOgmExFjhsHDZBS0+EJbrSCT5sOwkwn6HRn9yv16/vpdh9+jSCRTOPBktp/n01bdVbcc5cs3/6mnOo87/nXNe7Zbb8pbYkZN6ZWxlrBeuSwYTLW+lh/Lvstm744anjXi4P9hw/J69aFWKGHeRcvWCD1jz7GMisARWcK+EMGfkxKzdlxcrjlgz4f1zad1zZvkjkLFwkQRqkcw3H6DPiZrq7jqXRakExuE3Tsb4YJ7b/vTW8n5xPyHRrWswN/KWmgf/app2jJAVAy+w8dyvmYvraUo4KvtE0nV8BXu3buIOAjtKzMfqCvn+8zxTNJJ7lMY8EI91dyQv6NEdoJUDdxkuxrfINwD/ig1Wdth9PD8+W4KI8D1xGZZfweatpxokMnjnDYFuGkE3Qa+3qgzwq+TtKpyNW9g1gzjcecMJL2nN405D8/63dlw08Pyo6mX0pY6UFa3UyrAR+AO22Fe33PbrvqrLskmrMOiGpLHV9H/ugdS7fzQUMGli/g692D/1hzkzS8m7uFqMEqft1ae5sAYdPXBB2VK8U3CxLJNB5zDBX8nOZ/9jZ7rvKqf/hZXi07xaQtOVq1p9ceMHtk2eOy+oX1OR8P0yK7qAjbiMzetIrvFvA3rX9eFj62TICwqa0e1NjXz/fZosMknWTS3nvTeMwhEWpFKYea6yvtav6iuttD1bbTxhQIwLOxholSfD35d8BwUVRzfZWUk76+ubXp6GFb04Z3oNR0gk6ux3KepM10ZV4XJMpW4/Qc93nB+MiUW4bbQX/FvXdJnfVxGPYGlHrhFhBVNcOGuz7efPKkwJ+GPXtcHw9DQUR3nLhhJj5CJ5M5nuuhnI32XdZVQYXIXEFimNpzGI/pn1aFnIPJbzW/b721SPOZdvstKHrx8Kme32Ov9XvkohU0Zt0DhaOC799xlwKD9sDr3c9ym177CfnBO0dyPq6vkToTfzCtjgiHjBXwcxbjcwb8ikyqWZAYOiHArT1npPXNl/acwugdEOcuyLlfX5DmX3UH/XO//lCOWe/Pf3jB/nl931cPv1PhGmH9W9w4sL+MvKHK/nhkzwuj/jfcAr72wM6dJQAKxFkWf+z9HS4tOmEI98o0E1+9vG4tvfgIjXQ6nbNFJ2fAv1RxqZFJOsnx2mb39pxPDeVwbZC06p5d3Q+C6RZ340/cb5EjOR5ZtkzaOtrtqUq4WnuHe4W+ajAB34+wH7DN9sDtn5TlLbnvZnPYFmFyUS7678HnoG2ymMZj6nQYhJvpNre+yNJakGx6DmN83d2y+oV1snHLZlmzfp3gaqbzKlWVgwXemQ7Yjr5piIQFh20RFRkro3dn9b4Z1tWy8CoJTNNztDIclluocDfacKeF8X7JpbPcNdxnV1NZ2tQ304FQ0yFcXCkKB2yzcdgWkZCRA24Puwb8S11dTNJJANP0nAlMz4mMkYZRc1t37BAkz4qVK2XKjHv7vINz/1fmMGGpF1PFefIkllz54fb3GZYDttn0sK0bNtsiFDKZ/AM+B22TwTQ9h/ac6DD19OtWTiSHBvop990r9auecX9OjvCfRPbWWsMFDxV87/SOkdvfZxjvDjuHbd1sNZxbA4osk06nG92e4F7Br7jUKIi1XTu2G6fn0J4THTrpyO12t7ZjEOSSQ6e9jKsdY3yeBjC9EOBzQ2Tj97a4Pl4zfDjjZn0wtQWGdb+KHrZ185p157uDrxeUkdsBW+Ua8DloG3+mw7XTDLcqET6mlqqtO2nTSZLljz4m48aYA6kGsUeeSPZ0EL3QeXHLZtfn1E2cKPCu0XSe4YbybrDNxcth29c2bxKgHEwHbJXhkC0bbePsvRPHjeMxx9zEeMyoMd1a5lBlsmgV/5WXNtmVZxOdrJPkkF+/aqXxOXNnzRZ497rh+83oEL/GmA7bms6vAUVjOGCrjAFfN9oKYunt3eZvvCy3ih7TyLlXd+6kFSNhNNxryPeyoGn1+nX2odyk8VK917/HuokcsPVK/07d+u/DHO6VHrZ1q+IfbWpiZCbKwXWDrcMY8MVlSxaibd3Kp1wfrxvF4dooMh0QM22VRDxpm86zTz7l6bl6KDdpIV8PGpvUP7pU4J3pbuHokC9Q1O+lU0a53/liZCbKIe0hm5sDvqGJH9Fkmn1vf2O7hUkRUXXnCPc+fFOlEvE0b9ZsWb7UW0jVkD//4UWSBHoxY5ycY1Xvac/xR+8Wuhk9NDwLrnK5s2ao6+M6hU7bXYFSqq0e1Gh6jjHgaxN/ijad2GH2fbyZ7r7QppNc9Y8+5jnka09+3KfrrFm/3nWMqIPqvX9u/ff2ncYInPHSP6PpTsOmdc8LUEKNXp7koYIv0sXCq1jxcrj2HqbnRJqXNh0O2yaXhnyv1Wj9PNENuHFchvXili2y5InHjc+jeu+f7hNwuzCM0vhlRmYiTDJdXcYDtspTwE9lUlTwY8R0uJbZ9/FgatPRyiWSa+Nzaz2HVntO/ox7Y3VRqOF+3sMPeXpuw9ZtAn9M43jDOv++L15GZr68bq0AJZBJXdOv0csTPQV8Fl7Fi+lwLbPv48HUpsPSK/gO+ffdG4vDt3px6zXcazuTlxGjuJJp/n0U+u+zmUZmblpPmw5K49KlD4Or4I+vrm5m4VU86Hptt8O1ugXVVPlFNHhZt75m/TpBsvkJ+Ur71TXoR7FlRy9o5y9a5KktR82cNs1uZ4I/+rnhNqlLX2eidpfYNDJTq/iMzESx9Sy4avbyXE8B3/6PsvAqFl4zHK79lHUrcsB11wjiwdQ7uvoF2nTQHfK9HrxVTl9+lC4QtSdc/8wbv+dtgpRW7Tc8R1U2H6ZWrk9FcIEiIzMRCh4WXDk8B3wWXkXfkaaDxgrDlwyBENGiVTK3qhOHbeHwM11H6efOkieWycjxY+3wHFZaTb7/K3PsMwRe7zpouNe+ey+LwXA1Pd/gxjR6MqzuGePevqojM6nio4gy0i/9qtcnew74ku7y/B9FOJl6BLU1h8218aJVJ1PvaBK3lqJvGvK9LsNyOAdwdWZ+mNp29AJEP7e1av+q4cBnNifc03efHy9FgygdsM2mr4+mtkeq+CimrksXgq/ga89PxvraFUSSl9GY02/jcG0cTbnFfNiWKj4cSxYslH2vv+E74OrMfK3ma3/+qzu8B+qg6d0E/TNUf7zGPi/g5yA54b5wpoupqJ/xMrU9svgKxdLTf++5m8Z7BV91dW0VRJKpqqCHnqKwdAT+eak6mW6pI1nGjam1g27dxEnil14s3v/VOXbY1xae/U1NUmwa6vX30lCf7zhP/d+6r/ENwn2BTNtrJ4yMZnuOw8viK1MxDciLj/57lfLz5H1n2pdUpNPPCiJFqwlfGDvG9TmL6m63Kr28sMXV4fc/kOXb3HtDW/+1mZ5jXEWr4IW2cWlo1gA94wvTZFxtbUEhWivyetFw4FCTPYoxiHGvixcskNVP0loRBL3Icvv3WDfrdyPfCtrw7glZ2/hOzscHWd9H//7AYRnM91MEJ5OpSM0fO3jgi15/gb+A39paUyH9jgki5c8WLXCtKGj1/nnrmy7i7aEtP5ZTnedzPl7/6FJZvpSRgLia02cfVI+9XkjqXYKxVtivHjxYRgwbbv9c9gWm83sdP3lCmk+evBzsm08G1+ffPSlnbV53KnA1XW418ytzcj6u1e8V994lcfDVjdvl/IcXcj6+cOnjsvCxZQIEJHNJLn7aT4uOr4CvDrR2tlq/qEoQCVTv4djR9C+y4ae52yU0XB3bd4AqPnIKopofFlq110PFfL4HZ97Di+TFLbnHkMbpteYH7/zCejuS83Gt4u9p/t8CBCEjmWNjqwd/3M+v8deDr+jDjxQvvfeE+2TQzbamkZksvoIbDcR6ETh31iyJKq3WN7y2zW7JIdwHa6vhgO2YGJ3zYvEVSikl6UbxyXfAT2VSjYJI8DI55w+Ye58YXkZm6uKrQvuZEW/a1rLxueftA6lRam1xgr2+0ZITPJ2i5Pa9Q9tz4jSGmcVXKKFMpkJ8L5v1HfAvVVxiHn5EUL1Hb6aqE1V8eKWHZZ3AHOaKPsG+NEzTc/QOYtyw+Aql0nXpQvED/vjq6jbrYqJZEGpU79EXqvgImoZmreg7rTthGDNZM2y4vZVXJ0MR7ItPv18kqT3H4WUE8WtbGJmJwmRE9usuKvHJfw++/mZdGfrwQ+7bixa6Pk71Prmo4qMYnNYdDfpOVb+UYV9DvIZ6/b2P7T/AAdoSMi23ilt7TjbT4qtdO7ZLBwUTFCAlKc+Tc7L1kzx0pdOvVogsFoTSVqtyb7otSPU+uZwqvtsEiPpVK62ANpulP8iLhm2nar7/UJO8vnu3PbNeR1/qjwulFXptERpbO8b+fXTkJmG+fEyL8uLYnuNwFl8dbvmgz8f1sO3L69YyMhP5yqQk8zeSB99jMtW+1taqtPQ7xrjMcPq9saOlxWVeNXPvce7DC7Jw849d5zjPnDZdXnlpkwBBsufZWyFf3x9oapLWjnZpb++wf5zdGuZcXFZWDpaRVqCv1Nn5uiSrZ2Y+wkEv2nRrsZs4LLdyYxpBzMhMFEDn3/9md3u8P3lV8PU3OtjaqbcM6gShogdrWwzLaKjew0sVX2+765ZQ+pcRJA3nzueUXkQi2vR7hJs7R9wU63Cv9A7F963vpbkKJs7IzAmT4rHkCyXVmE+4V3n14KtLzMMPHT1Yu8m6Feim5vpKeu9hM/Xiq7gsNQJQHKb2nAkjh0rceRlewMhM5CGT6ep6TfKUd8CXdBfjMkNGv4F0Gg7zLP2dzwig9EXJdEBMq3NumykBJJe253ip4CeBFkzc6MhMDtvCr650V6PkKe+A3z2yh3GZYaEHa01jMeusyn3cb5XCH6063Wj4nFjyxDLGZgK4iinc62vOgOvc7xLGhRZMTCMzXzbcYQeyZayMbWXtvCboqPwr+MK4zLDQ1px1K59yfY6GuC/Re48+LKq73fVxxmYC6Mua9etdH7+zJv7tOdlMd0Q3rX9eAK9Skm6UAhQU8HVcpqDsvBysnT7mE1Tv0SdnzJsbHZsZxHhDAPFgGnmqRaU7a5LRnuPQ76Vu55qcw7aAB3mPx3QUFPBFLu7PWAU+Qdl4ac3Rb7TTDQeAkGzzPnub8TmPLGOOM4BupvacT8Vwc60XpsO2uvgK8KCttnpQoxSgoICvo3tSInn3B6EwXlpz1Ip7GM0FdyOvrzReBOoLOq06AJRpes6UGC+3cjN66BDXx1/b4l6QA1Qmk3ldClRgBd9yKfOioCw8tebU0poDb7R/1DQ2U1t1OHALJJuX6TmnO8/Jqc7zkjSmlkdt0znadFAAFxnpV3gLfMEB/1LFJfrwy8Bra84Dn75VAC90CsT8z7m36mi4n//wIgGQXKZwr55r/Cd5aMuPZfm2N6Xx3eOJCvujDe1J9OHDpOvShYIr+Hltss3Ws9W2UdhqWzLamrNq2VLj8xZNvj0xI8oQDF2Cpi/Gh1s+yPkcNtwCybZilfcFeIff/8B+U7poUcPvnSOHSs1vVsb29clu03HZEn60iYEFcNXYPYq+MAUHfKVbbSvS6TpBSfzhvdOMC620Ncc0GQXoy8PWheGf/N2unGvXlVbx9zW+IVWVlQIgOTZu2Wy36OSj+Uy7/bbj0C/tHzuBf+QNlfbHNddXSSxkMq4PHzlEiw5yymQqUoG0vgcS8Lu32qafFRTdqmWPGfvutTVn/mdrBciHntnQSRA/cKlA6Qu8VvGefdJ8yBtAPDhf90FxAn82Dfo3DuwvNTd0B/4bB30s9MH/3K8vWP872uw7FY3vnjC2I3VyjgkugmjPUSkJyMHWzgahTaeodEnGqsfNrTnrZv0uB2tRMO2fNb1QNby2jVYdICFWrFwp9auekXLQwtUQK/jrWSEN/9reM2TggJ73H7MeHyDFpkH+3IcfWmG+Q06fPSfHPmjv8yLFZOjw4fKjA4cF6M2697NvbPWgT0sAAgv4B86016fS6eWCojjSdFAeuHui8Xk6CeWB2zlYi8JpNUoPyLnRFp1j+w7QqgPEnFbvR44fK2HW3wr7A6+9xr4QUHox0L+nz/9GH0Uvp7Bx3g70F6wwf17OWu/1x0G4Y9Ik+ettfy9AL5lMV9c3xl5fuVoCEEyLjuhW266NFULALwY9VLtkzizj8ybU3ES4R2C0N1Zn4+9o+mXO5zhTdV55aZMAiK96D605Gly1hbQlzx79QmkA17ewT+yZMWuOAH3pslveg1H4HPwePSd+GwWB6mhvsw/Veum7/5qHbaSAH3pHyFT50qk6LMAC4ksP1r5ovbnRtpO/WPuC3XqyetMWmTp9ugzizt5VFi59XGbMflCA3jIi+4OYnuMIrEVH0aYTvD+4+3OeRmrRd49i8dqqo1N1aqwXeQDxoq05psk531m7vs/gqjPfdWeLTo5J8nhIvQDSv6MJk9gsjz4F2p6jAg34+1pbayqk3zFBIP5s0ULrG6O59WG+VbnXVgqgWDb89KBrq44aN6ZW9r3+hgCIDy8Ha70eGtU70Xqe7G0r9B+1Av/e3eaFWVGnbUvakkPVHgaZS3Lx46Gt4Cum6QRj3cqnZd0z5hGEHKpFKehBM63im6ZFLFmwkNGZQEx4PVj7gzf2yK21+bWIaoVfK/stJ47bof+I9XHUx0jqBc/UaffIlOn3ULGHJ0FOz3EEHvBp0ymc13Cvh2qX/s5nBCiFY1a415DvtgBLMToTiAcvrTkzZj0o33l+vQRJA75W+p3g33LyuLzXc3g3bOFfzxlooJ8w8S4ZZV3kTLAq9kOHjxDAh8Dbc1TgAZ82ncJ4Dfd68PG/fnFqbFd9I5y2N/1SNv7UfQsj/fhA9HltzdFxj0NL+LWuAV9Df4f9/oT9sf5cZ0fb5WEU7/W8D2Kaj/O/7WbrvX48aHCVHeD141trawnzCELg7Tkq8ICvaNPJj59wv+KeuzhUi7JYvv1NOdzygetztIKvlXwA0eO1NSfXwdqwsS8A2tuu+rmOnrsBN/dxgUJwRwk13FY9aKoErCgBf9+Z9iUV6fSzAs9WLXtMNq1ba3yeVuy/a1XuCfcol9Od5+2Qb5o1TT8+EE1eWnPYxgoEIpOpSM0fO3jgixKwwObgX/lf7doo8ETn3Ou0HK/hnso9yk0//xbV3W583ur16+wZ+QCiQ1tzmj20trCJFQhG16ULr0sRFKWCr2jTMXOWWHmdDfzd358qNdezOATh4GV0Jv34QHR4bc3RZU0LH1smAApWlPYcVZwKvrqUCfx2Q5y8d+K4PHD3RM/hftHk2wn3CBXdvzB66A2uz2lrb5cpM+613wMIL+dr1URbcwj3QCC0PadoWbloAf9SxaVXM9b3DMFVdO6vhnuvJ/w13E8ZRQUU4fOw9bnZ/1r3SU5aFXzkCQIBEGa05gAl19Z16cJWKZKiBfzx1dVt0tVFFb8XnZSjbTleZvnaB2p/fyrhHqGl/fhLf9e8i2Hjls12gAAQPvr1ufqFdcbnaWvOUNrtgICkXrWzcrH+61JE+1o76ypEGgR2S863Fi20V3R74RyopS0HUfCDd45Yb78wPo8lWEC4aNV+fN3dxjY6puYAgcpYAXxqbfWgRimSogZ8daC1s9X6TaokwbQlZ8mcWZ438DHnHlHkZT4+h26B8NBQr+He1Jqj21r/9o2fUL0HApKRzLGx1YM/LkVUvEO2jq6uNZJQOiVH59t7bclRWrEn3COKHv2dz9gXp244dAuEh9e++0efWkm4B4LUlSla772j6AG/K921WhLIOUjrZb59tuYz7fL9d35hXCIEhM2Aa7vbyrwcur3/K3MEQPlouPfSd//ggocisa0WiJCMlY2LXvwuesDvOUDQKAnjdUJOXxrfPSEPbfmxLN/2phx+/wMBokLvPOn4TJPGPbuZrAOUSePu3VK/6hnj87Rq/xAjMYGgNVrZuFmKrEJKYOGfPp6SdGqmJMittbfJnIWLrG+QI+TooYOeW3SynT573g77DdbbwOuukZrrE32UAREx8gY9GJ4yXpz+7O23rWelpG4Sh26BUrHvoH11jrFNTvvuX/4fDXLDv/t3AiAwOvt+xfqnnzogRVaSgP/Hjz/abCX8BSmR35CEcYK+ajl5Iq+gf/7DC/JW8/t20NcWHg36OmUHCCtdgHW68//an69utJI/0qoSjqutFQDFpeFez8B46btfsnyFTPzt/yQAgpORTPPYqkFfkxIo+hQdx4Ez7atT6fRiSTBt29m6eZNs3fJyQS086s4RN0ndqBFyZ81NAoTROevC9E//bpfxPIlO1tHxmePGEPKBYtKJOfs9bE/XvvulT7O3AgheasNt1QPjFfCZif+RIIO+9jx/6fZb5VM3DTFOMAFK7bQV7nV8pink69jMhq3bGJ8JFMkjy5Z5OlQ7yrqbpiMxAQQuc0kufrwU/feqZAFfHWzt1IBfJ7Bpu86uHdtl3cqnCg76qu6W4VZFfyhVfYTKsTPt9oFxbTVzQ8gHikMn5ng9VPvX2/6ekZhAcTTcVj1oqpRISQP+vjPtSyrS6WcFV9m6+eXAgr5W9UffdIM8cPsnqeojFBqOnpC1r79jfJ626Wi7jrbtACic13DPMiugqPRw7fyxgwe+KCVS2oDf2lqVln7Hkr7Z1o0G/de2bJK9u3dLEDToTxk1nBYelN0P3jlivf3C+Ly6iZPskA+gMC9u2SLzHn7I03MffeqZywMhAASrFJtreytpwFcHzrTXp9Lp5QJXWslf98xTdp9+UGjhQblt+OlB2dH0S+Pz5s2aLRue87ckDsBHXt25w/NCuYVLH5eFzLsHiqh0h2sv/45SYlYVf1yF9Nsn8ESD/q4d22TT+ucDad9RTgvPlFEj7PdAKa38h5/J3ub3jc+rf/QxWb50qQDwRyfl6DjMNg9jmZmYAxRdSQ/XOkoe8BWHbfMTdPuOIuyj1HR8ph66Nc3IV4R8wB8/4f6OSZPsQ7UAiqqkh2sdZQn4jMwsjNO+s3fPm4FV9RVhH6XidXymIuQD3vgJ93qYVg/VDuJAO1BMJT9c6yhLwFcHWjtbOWxbuGJU9RVhH8XmJ+SvfvIpWbxgoQDom99wzzhMoPjKcbjWUb6Az2HbQGklf9O6tbJr5/ZAq/rKCft6QFffD7juGgGC4HVGvtr43FqZO2u2ALgS4R4IpbJV71XZAj4jM4tn7+435TWrsh/kBJ5sd464Se4ceROjNxEIQj6Qv0br7u39X51DuAfCpyyHax1lC/jKquKvtqr4iwVF4WzKLUYLj6Pm+sru6v7IobTyIG9eF2GpV17aJDOnTRcg6fzMuWeRFVBqpR+NecXvLmXEYdvS0bYdrexvWr9Wjlq3c4uh/3XXyJj/5waq+8iL15CvW251EZZuvQWSas369bLkicc9PVfDvVbuR9XyNQOUSFmr96qsAV8xMrP0umfrb7fDftD9+tmo7sMvr9tuCflIshUrV0r9qmc8PZdwD5RFWUZjZit7wKeKX15Hmw7ak3iKcTi3t+6wf5MV/KsI/MiJkA/k9siyZbL6hXWenku4B8oiY4XrqbXVgxqljMoe8BVV/HBwKvtbt2wqWhuPQ9t5Rv5mJYEffSLkA1fSQ7T3f2WONO7xdp5Ke+3XbPoe4R4osXKOxswWkoDfMU8PIwhCw+nZL+YB3WwEfvRGyAe6NVvfj3UMZrPHu6xMywHKpqyjMbOFIuAzMjPcnLDfsHObHfY7PYxjC4KGfLuPf+gQ5u8nlNeQrxihiTjyMwZTEe6B8glL9V6FIuArFl9FhzNnf++eN4vet59Nw76+jRl6Q8/HXA8mASEfSeVnUo4i3ANlFZrqvQpNwKeKH01O375T3S8lp63HqfLfOOhjhP6YIuQjSbRar5NyvB6mVXdMmmT33OvBWgClp9X7Lrk0tZyjMbOFJuArqvjRZ7fyWIFfq/vFPqjbF0J/fPkJ+fWPPibLly4VIGq0z15bcvb7+P5536wH5S+eXy8Ayqm8i616C1XAp4ofL07v/tvWW6nbebIR+uODkI8408202pLT5uOc08Klj8vCx5YJgLIq+2Kr3kIV8JVVxV9tVfEXC2JHZ+4fsapS2s6j78sV+B0a+G8c2F9qbugO/gOu7UfwjwBCPuImn5YcbcV59KlnZMbsOQKg3MJVvVehC/hWFb+mwqriC2IvbIFfOdX+AddeI6NvvsEO/AT/8CHkIy60FUdbcpp9fP9jxj0QKqGr3qvQBXx14EzHxlQ6NVeQKE7g15aeI4cOlqWH3012xd8O/tbFQI1eDDC+syz8hPx5s2bLhufWChAmfqfkKA31Gu6ZlAOERfiq9yqUAX9fa2ddhUiDINF03r7Tw3/UCvylntLjVXbVX8P/jYMGyJBB/WXIwI/ZH6N4/IR8XYSlC7GqmDKCMtNq/fyHF3neSut4cMFD8tBjy5iUA4RHKKv3KpQBXx1s7dSAXydAFq3ya9B/e88b8p71Ihm2Kn9ftPKv4V9D/432GxcAQfIT8musqmfD1m32e6ActGpfv+oZXwdpNdDrYdo5CxcJgDAJZ/VehTbgU8WHF1rlP9LU3c4TpdCfLfsOgAZ/bflxLgK0/3/IwAG0ARk0HD0ha19/x9NzCfkoh3yr9vTbA6EV2uq9Cm3AV1TxkY84hP6+3GhX/fvbHzt3AzT4OxcAejHQ/9prEntX4K3m9+W5xnfk/IcXjM/VcP/KS5vsth2gmLRS71Tt/dL59kufXklLDhBK4a3eq1AHfKr4CEp26G85cdzu6dcDvZ0+bpNHTfYFgd4d6G/fGejf81j3RcCQQc7j3RcHA669NtJ3C46daZfl2970FPK1F7/+0aWyeMFCAYqhcfdumf//WeRrQo6iJQcIvVBX71WoA76iio9i0tGc72ng76n2d18IxDv4e6UXBAOv7Q77zoWCci4WHM5FQza3uwhD+ni+V6c7z+d87NyHH8q5X1+QU9ZzGt/1Hqh0ws5yK+jTsoOg5NuOo5iSA0RBuKv3KvQBnyo+ykEP83ZYIT9JFf+kY14+CuW04+jCqrY8vlewlRaIhNBX71XoA76iio+wcFp9Ou3wf9AO/lT940Or+Nq2M9eq6gN+5DMdx6FV+79Y+wIHaYFICH/1XkUi4FPFRxRowNdqvx7qbbHfuiv/zp0ARAdBH17l22fvoGoPREokqvcqEgFfsd0WUZdd/XcuAFpOHrd/7FwUIFw06G/4/66VukmTBMimwX7FqpV59dmrO6zPqaVPraJqD0RKNKr3KjIBf19ra02F9DsmQIw5dwCci4DO9jb7IsAJ/1wIlEfdxEn2QVyCPgoN9kzIASIrMtV7FZmAr6jiA92cdiBt/+nsedMf2x93tF1xQeA8jsJp0J83axatOwlUaLBXM2Y9KI8y1x6IqOhU71WkAr5W8dPSb5/1h64SAL50B/02+31HT+B3LgT04uDyczrarrooeK/neXG4WKgZNlzaOtrzOgx5+b9Bj34i6OfIi1s2y+oX1ufdY6+0HWfh0mUyYdJdAiCSIlW9V5EK+OrAmfb6VDq9XACUnXPRkO29rCD0h/dOc/31+c6fz/VrdHlVVa/qaNXgq39ObbSCm1ZkCwlu+udY8vWFMmPaNObox0ih4y4dtOMAcRGt6r2KXMC3qvhVVhX/GFV8INz27n7TGPBb/7W5z/BdKhru11ghbrUV5gqlC7MWf32BjOPQZGQF0YajNNjPWfCQHexpxwGiLSOZY11yaWqUqvcqLRFj/QW3SVfXGgEQag07trs+rv3sVWUOP1p1f/bJp+XYvgMyd9YsKYTeERhfd7eMn3y33dbRFvFWpqTQf6cVK1fa/25TZtxbcLh/0Ar2Pzpw2B59SbgH4iD1N1EL9ypyFXxFFR8IP63eaxU/l9VPPiWLFyyUMNGKvi4renHLFgmCVvXnfnkW03dCKKhqvUMP0GqoH0qrFhAbWr0fWz344xJBkQz46mBrxzztiRIAoaO9+RNr/r3rcxpe22ZX8cNIg/4jTyyTV3fukCDonQL930oLT3lpqH/173cGeoeFYA/EViZTkZo/dvDAFyWCIhvw1YHWTp2oM04AhMquHdtlyZzcLS/amqP992GmAVBbbpoD3jugYX/GtOkyz6rsE/aLrxihXhHsgXiLcvVeRTrg72vtrKuwCoECIFT+bNECeW3zyzkfnzltmrzy0ssSdtq+MeW+e6VYnMo+bTzB0RCvoX6rFer1DkyQoZ7Ds0BiRLp6ryId8NXB1k4N+HUCIDT+4O7PydGmppyPb3xubWRmyK9ev85u1yk2vauhYV8vfiZb7xm76Z0G+gOHmqxAvzOwnvpsBHsgcV65rXrQFyXCIh/w97WeHVchmX0CIBTeO3FcvjB2jOtz9jW+Ean2FK3iFyM4unGq+3UTJxL4e9lvXTy+bv17NO7ZY/+7FGtiEQuqgESK3FKrvkQ+4KsDZzpXp9KyWACU3dbNL8u3Fi3I+bgGVR1LGSXah68jFIPux/dD/97Gjam1A/9Y671eIJV7zGgpOC03jT/ZIwesYL/fqtQXcwSpVui1v37K9HsI9kAiRW+pVV/6SQx0pS/Wp6XfXMZmAuW3a6dp/v1EiRoN1xueW1vUfnwTvbjQt+zJPhr4uyv93aFfA3+UD+7q/z4N8/sPH5Lj1sdaqW8+WZqLKq3Wz5g1R6ZawZ42HCCZupdaXfxziYFYVPDVgTPt9al0erkAKKvfGztaWlwq3VHqv++tVP34hbBDvhP2x4yREcOG2xcBzls5aeVd3zS4H7eC+7GTJ0se5LONsi6Gpk67h956ACqTkdQ3xlYPXC0xEJuArw60dhxLSapGAJTFkaaD8sDd7hV6bc+Jcj/5vIcX2SMXo0qDf40V+u331r9DpfW+evBg+8eVgyvt971bf/r698puV3KCu2rv6P642QrvzvP0ra2jPRTbfXWspbbg3DHpLlpwAFwW9bGYvcWiRcfRJan5jM0Eyudtl821SttHon5YVDfwOr3gUWRX0Nt7/ux7JBGcSj2hHkAOGalIr5AYiVXAH189qPFga2ejMDYTKIsGw+bXus9Fr/++N61uv/LSprIfukVu2m7THervlanTp1tV+xECALmlNkZ55n1fYhXw1SW5OD8t/fZx4BYoPW3RcTM5Jsuc9C5Ew9Zt9qbbMLSd4EqPPvWMzJg9RwDAg8wluRCLg7XZ0hIz9tzSrq41AqCk9u5+UzoNYVfnuseFhnyt5CN8WrizAsCjjMifR33mfV9iF/BVV7prdUYyzQKgZEz99xru4za3Xf836fhMhAsBH4AX3QdrB9VLDMUy4FtXYm164FYAlMzbhk2vUZx/78W8WbPl2SefEoRHJ21TAMxid7A2WywDvtIDt9a7RgFQdBqo9hoq+HHpv+/LkgULZfnSpYJwOHLooACAu/gdrM0W24Cv9MBtRqRNABSVKdxra06c+u/7Uv/oY4T8kKBFB4BBLA/WZot1wOfALVAaxvn3Y2olCQj54dFy4rgAQF/ierA2W6wDvhp7fWU9B26B4tq7xz3gz5w2TZKCkB8OR5qiuYgMQHHF+WBtttgHfMWBW6B43rMqpUcNYWpyzNtzetOQz8Hb8upspzsTwFUyXZL+oiRAIgK+Hri1/kVp1QGK4O3d7tNzdF78uNpktOhk04O3jNAsHyr4AK6W2ji+euB+SYBEBHzVlb5Yz4FbIHim9pxxY8ZIUukIzX2vvxG7+f9R8D4HbQFk0dacuB+szZaYgN89Gz9Dqw4QMNMB25nTpkuS6QHjfY1v2HcyUDqMygSQxZ55H/eDtdkSE/DV+OrBrwqz8YHAHGk6aBxJmLT++75ouG/Yui0x04TCgFGZAD4S75n3fUlUwFfMxgeCYzpcq8GWynU3/XvQdp0lCxYISoNRmQCS1prjSFzA77490xXb1cRAKe3aud318bqJEwVXevbJpxmjWSKmBWwAYi9xrTmOxAV8Nba6crXQqgMUzNR/PyPh/fe56BhNreZzd6O4mKQDJF5j0lpzHIkM+IpWHaAwWh3tbG93fU4d/fc5aT++9uXzd1Q8TNIBkisjmVYr631NEiqxAZ9WHaAwR5vcp5RocGU8pDv78O1r22jZKRIm6QCJZdVw03+exNYcR2IDvqJVB8hfw84dro8nef69X7TsFIdO0ukw3GUCEEuNY6sHrpYES3TAV7TqAPkxHWCcMZ3+ez+ceflzZ80SBMd0pwlAvCS9NceR+IBPqw7gn5fpJPSW+6ctTRufe142PLeWan5ACPhAoiS+NceR+ICvaNUB/GnYYRqPSbgvxLxZs+0DuFTzC3eUSTpAgqQ2Jr01x0HA70GrDuDd3j3uFfyZ06YJCqMVfK3ma9sO1fz8cdAWSIakLrTKhYDfQ2/ndElmvgBwpaMxTVXRsbW1gmCMs/4uj+07YE/aIej7p5+rHLQFYi+xC61yIeBnGV89+NVMl6wRADmZ+u+1j5wWneDppB3advLz/onjAiDOUhuTutAqFwJ+L13pi/XWbZ5mAdCnXTtN/fcTBcXhtO1oRZ+LKO+8HAoHEE205vSNgN+LdXunrUtStOoAOby929R/z3jMYnMWZDFtxxsO2gKxlemSS1+kNedqBPw+jK8e1EirDnC1904ct5cHuZlMZblkdNqOVvMJ+u5Mh8IBRFNGREdi7hdchYCfw9jrBy2xPnH4pAGyvL17t+vjGjIJmqVH0HfHRlsgfrQ1Z2z1oHpBnwj4Lrrk4v2MzgQ+Qv99uDlB/5WXNtGj3wsLr4D40G21XXJpqiAnAr6LntGZjwgAmykkzaD/PhT0HIT26GvYZ+pONwI+EBs6EvMR+u7dEfANxlcP3kg/PiByxApIpv77cWOYfx8m2VN3kt6+Y2ovAxANGZE1jMQ0I+B7wOhMwDw9Rxcy0f8dTvrvkt2+k8SqPgdtgejTvvsuubhCYETA96B7dGaafnwkWsPOHa6P132O/vso0Pad7Kp+Unr1dQNzCwuvgCjTkZhTNZMJjAj4Ho2vHrjfquVz1YjEMi0LmjGd/vsocar6Tq/+6iefin2LFQuvgMjKZCT1DfruvSPg+zC2unJ1pitD3xcSx0swov8+ujTsL16wUPa9/kasK/v04QNRldo4tnrgaoFnBHyfutKXltCPj6Rp2GEajzlJqiorBdGXXdlv/dfmyz37cbiAow8fiB7tu78kF74h8KWfwBft/drX2jolLf32pUSqBEiAo4eaXB9n/n086UWb9uzP7Bl/2nzihOy3Phde3blDDjQdsj+OEmfh1eAiXozqtKmjTU12v3/LyRPynvV7OtOn+joDMHT4iJ73w2WQ9efS9zcPGyGjamvtH99ae5sASeXMu6fv3r+UIC8HWtuXpCT9rAAxp4cTJ9b8e9fnaLWXxUrJ02Z9bmjIP2AF2sY9ey5fAITZd9aukxmz50gQOtrb7DCvC+D0vc7a7wx4Y66G/FFWyNfAP2HiXXLHpEnWBQq1JSSC3XdPa05+CPgFOHCmc3UqLYsFiLFdO7bLkjm5xypqlVdbOQDlhH59r8F//6FDdvBvtqrZbQGH33w8uOAhWfr0SsmXE+o3rX/eHh3bWYb/TRr4NehPnXaPTJh0lwBxlBFZPbZ6EMtG80TAL9CB1k5t1RknQEz92aIF8trml3M+PnPaNHnlpZcFMNGA7wR9Df3HrbfWjnZpb++wf6yas5ap6XPd1Az7aO9C9g6Gxj25D9NqC8yPDhwWv/SguVbq9WuhMwQXKg7936Mhf4oV9qdOv0eAONC++7HVgz8uyBs9+AXqkov304+PONO2Aze05sArvdszrrLnsG6Rjm3oBcLI8WNzPu63D1+D/bqVTxsXvZWL/u/Zal106JsT9u+b9SCVfURW9zKrS1MFBaGCH4B9rZ11FSINAsTMeyeOyxfGjnF9zr7GN+wttkBYVH+8xrUdyEsfftiDvYmG/YVLl9mtPDf3HOQFIiBzSWTq+OpBjYKCMCYzAPqJmJEu+sQQO6a54doWQbhH2GjbmJsjTbkPAutF7dfunSZ/aL1FNdwrrex/a9EC+wJd37/HFl9EQEbkzwn3waBFJyC6BOvAmY5xqXRqrgAudFTeEXuM3gl57+Rx+72+aV9vZ3tbn/29OkljUGXVVaP0nB/rhI1iTNYwzQ1nPCbCqHtm/5acjzfs3N7nQVut2G9atzZUPfZBcFp47ph0l1XVf5z2HYRSz6HaekEgaNEJ0L7W1qq09Gvg0C2y6a1+nbqhYbmYUzd6j9PT8F/oDO3fGzv68gzvvmx8bq3MnTVbgDAx9eGrHx04dHkGvc6u1yr30aZgR3xec12VXPMbVdK/skYGWG/2z/1GpfXz1fbH59ub7ffnrPcX/q3N/vGFXxd/3LfTvjNj9oMChEFP3/2nmXcfHAJ+wKyQX5OWCivkp2oEiaRj9F7bvLlnNvbBslcDtWqXzwxtDT0P3O1eoT+278AV00uAsPDah6/jLtc981QgX6c3DK+Tqn831nobJ0Osj/v3hHo/NOi3ndpvh/22/7PfejsgH5xolGIg6CMMnEO1VrhvFgSGgF8EHLpNnuxQH/a+3ewZ2m6tPdqqsGrZYzn/O9p7rwdsgTCa//BDsnFL7jadKdPvsV8Adc9DvrRCX2mF+Zrb5srQ/zDTrtYXy2kr5J8+/rr9PujAr0H/0adWMmYT5ZC5JBe1cr9fECgCfpGw6TYZtP3mZasCuLdMC2+CoBX+GbMevGraxuI5s6TBJfzMmzVLNjz3vABhtHHLZivkL5Ji0FA/onae1NTOLWqoz0Wr+xr0mw++GGjY14ueR596hqk7KBU21RYRAb+I2HQbT061fuuWl40z4qPGqe5r4NcpIm4XLa+8tElmTpsuQBhpe4626QRJW3A+dddyu/0mLIoR9rVlZ8HSxwn6KKqMyAoO1RYPAb/IDrZ2aqtOnSDyNNi/vH5dLKds5KP1X5vtxUVAWI0cN9a4DdcL7aW/454NoQr2fdGw//M3663A//rlA7z50rYdPaOgU3eAImi4rXoQy6yKiIBfZN2TdSr2ceg2ugj2V9PttQ2vbRMgzB5Z9risfmG95Et77D9x52L5D3csKUsrTiGON220wv6KQIL+d9auZ7QmAsOh2tIg4JdA92SdflbIl2i9QiRcqYK9hgitEPavqpFrr+v+FMmevlGuUXputDVHW3SAMGvcs1um3Hev5EPbcSZYVft8JuGEScu7r8o/711TcPsObTsIAuG+dAj4JbKv9ey4CsnsE0SCTtZYtWyp6wz4fGhY0Nv8lfYYvcn2bOx8K4M6Qk+Dvo7RO99+zH7f3vNzpaDjMesfXSqTrWo+ozIRRtqHr/Pw23xeoH/yruXyqUn1Eifap68V/UKCPmM1USAm5pQQAb+E9rV2zKuQ1AZBaOnsdx0NGdSoS63OD71lpgwZMbnoY/QcGvydg3fFnKGdbd6s2bLcCvsEfYTJipUrpX7VM56fH5Ve+0IEEfSp5iMPTMwpMQJ+iR1o7ay3/tKXC0LFacfRhTeF0lA/Qudia7APSVBwwr7eri9m4NfefA36dZMmCVBuK1Y+YwX8lZ6eq+F+8oMNkW/J8arQHn2q+fCDiTmlR8AvA8ZnhovOsNc19YW242jP7n+YsNgO9WE/kKeB//jBjYFM2+iL074z16rsA+XitQdfv3Y/9/uvRO4gbRAKDfpU82FihfvVVrh/RFBSBPwyYXxm+WnVfr1V4dNDtPkKY7XeL23p0aCvgb/9VLCtkQR9lJuXUZn3PdKayHDv0MP7//z2avmFFfTzQTUfLhiHWSYE/DJhfGZ5FVq1j/L4PDdaxWu2KnrHD74YaGWfA7koFy+jMu9+sCHWffdeOXP0jze9KPmYs/Ahq5q/TAazHwNyeWKOHqot79i3hCLgl1H3+MyKBkJ+aW1a/7ysenyp5COuwb4vxWjj0XA/78uzrYr+LII+SsJLm84nJiyRsb/9rKBbIW07Ws3/79t20rKTcIzDLD8CfpkxI7903jtx3KraL8x7Qo624WgISMohvGz6gt9sVfWDOqBL6w5KRUdkVn+8xvU5Wr3XKj4+ouFe5+f/y978hp4sfGwZW3ATinAfDgT8ENAZ+WnJNBDyi6eQlhw9gPepu5ZzC18+uoUfVFWfoI9S0Aq+VvJz0btxX1h4LNF9+Lno1/nrL0/J6+udA7jJY4X71p5wz6z7MksLym589cD9XZLhhHmRrFv5tPzhvdN8h3ttx7nNqthPpj/3su454RvlCw8ds+eFF3o3o9n6N5n38CJ7GdGLWzYLUAzjxoxxfVwPmZ4rwjSpONCvcf161+Vffm3d/LL9vVfvniIRMlahcj7hPhwI+CExvnrwxox0EfIDpFNy/mzRwrxm22vV/rf/cJ/8hwlLBH0bUTvPfuH/7O+/Yv99FYKgj2LyspdB70ohN93s+/mv7fN9Ua+FlS+MHSOb1j0viDVdZPXIbdWDtwpCgRadkGERVjC0YpRv1V4r09pvD38KncCRTRdmbXhuLQdxEQi9gNSLRzd6wapf+3Cndzt+vntFXr35TNmJrUzPIqv85qyiKAj4IUTIL8yRpoOyZM4s3+Feq9ATAmg7Sbogg/68WbPtzbgEfRRKD9rqgdtcqv7dOLtCDW/ynbTDlJ3YIdyHFC06IaTrnDNdskbg29YtL+dVuXd67Qn3hcvu0x9RO1cKsXHLZrvyumLlStdwBpjoDgY39OD7o3c88jmfpN+b9Xv03jynmSFUCPchRsAPqbHXD1qS6coUXgJNED1M+62HFkinjyCoYVSrdvTaBy/IoF+/6hkZX3c3/fnI28hhw1wf19aT84R8X/RrXMeL+j2A64R8/Z6NyLLCfeZFwn14EfBDbOz1g+cR8r3RFwq/h2m1z/63rXCvt+ZRPEEF/eyDuM15biBGco2trTU+58N/Y+FmPvQA7t153AHV79mrluW3dBBl1RPuB88XhBYBP+TskC/CyCkX+UzK0YqTTn9h7nXpBBn0NeTPt8I+QR9eVXs42Nn2fw4I8qOtOvm07Oh0nT+4eyKjNCPEyiT7CPfhR8CPgC65OIWQfzUdg/k16zbva5s3ef41OiVHK01acUJ5ZAf9obfMkHxpf7627Wh/PmAydoy5gn/h11TwC5Fvy87RpoPMy48IK4v8k5VJPi8IPaboRMS+1taqtPTTbbf0k0h3uNcXhKNNTZ5/jb74cJA2fFrefVUO/M9HCup/1ik7zz75lMycNl2AXFLXV7s+/okJS2Tsbz8rKJxO2TnwPx7xddGkE3ZWb9oit9beJggfJ9yPr67mSjgCqOBHhH5BUcnv5sy49xPu7cVVeSxpQfHpWYhCN+Nqq879X5lD2w5cVRnadC7Qgx8YnbKjywL9fE3r4dsH7p7IUqwQ0rYcwn20EPAjpCfk35+RTLMkVD7hfsRtc+3KPf324eZsxtXb+9pKlY/ssZpAb1WD3QM+ozKDpeFeCyt+FwfqwVsm7ISHlTmOWdnji4T7aCHgR4z1BdbcJZemJDHk57OdVsPiHdM3CqJDz0do5a+Qg7g6VlOD/qs7dwjgYGFa6WlhRQca+O3LZ8JOOHSH+0tTNXsIIoWAH0FJDPn5hnsO00ZT9kFc2nZQKszBLx79Xnybz/MN2qqzeM4s6WDJXVkQ7qONgB9RSQr5+YR77ecm3EefhvtC+/O1bWfKjHtlzfp1AqB8dKHg532ehWrYsZ0JO2VAuI8+An6EJSHkO9NyvIZ77d3WMKj93IgP+8CeFQz83uZ3aAV/yRPLWJIFlJkuFvQ7zYwxmqVlZYp/JdxHHwE/4j4K+fGbrpNPuNcZzIT7eNJeXr0rU8iiLJZkAeXnHL71sxRLXwcI+cXXPQrz0u2E++gj4MdAd8iP3whNP9NynHCv1SHEm9OfH0TbzovWe8BxLZO2SkYv2PV7tu4e8MoJ+Uesij6Cx5z7eCHgx0Tc5uT/2aKFhHu4yh6rmQ+t4M+zKvlT7ruXaj5s/a4j4JeaLhbz8zVMyC8O5tzHDwE/RuIS8nX+8WubN3l6LuEehbbtNO7Zzez8hGhjGkso+Z2w02n9O+pCrK2bXxYUrifcTyXcxwsBP2b0C3Rs9aDxma7MixJBGu51/rEXhHs4gmjbcWbn07YTX80n3e/U0KJTPjphR+fl+1ly961FCwj5BcpIZqOVGT5NuI8fAn5Mjb1+8LyohXzCPQoVxLQdbdvhEG48mSr4+V4cIhi68fZunxN2NOSz9TY/3eF+8HxBLBHwY8wO+SIrJAJ27djuOdwrrdQS7tGX7Gk7VTfm9zmih3DH191N206M7PdwpucaevDLLp8xmvraQcj3x8oGqwn38UbAjznr1lt92EO+jj3TKoxXGu610gO40YDw+T/cl3fbjlZ7nbad/R4PfCO8jp8035Gp+ndjBeWnX6+E/OLRTGBlg0cEsUbAT4Awh3xnS22nx8Nv2nrBnHv4oZ8vk+39CPnPztdqPm070eblIo0WnfAg5BdFpifc1wtij4CfEN0hvytUV+x+F1lpuNfWC8Av5xCutu0wOz+Z9h06ZHwObX/h4izE8tNqR8jPyQr3qW8Q7pMjJUiUfa0dM9OS2mD9w5e92XTJnFl2770XhHsE6Z/3rpZfvLlCLvw6v8ERNcOHS8PWbfZ7REP1x2tcD9lquP+8FSYRPhf+rU1++nf3y+kTjZ5/zcLHlsnCpY8L7MO0rV2S/sb46oEbBYlBBT9hxlcPfrVLUlOsL/hmKSOtsHgN99pvT7hHkHQk32//4b6C2na0N5+2nWjQ9hzTBJ3KG6neh5Wz9dbP1yuV/G7d4f7SVMJ98hDwE8j6Qt9vfcGXLeRvWv+854k5WlW7Y/oGAYIWxOx8p21nzfp1gvB6fc9u43OGjKgThJt+vRLyvbNe449Zr/U64z4WG+7hDy06CbavtbUmLRUNKUnVSInoenHdQOhFPoesgHz9fHe93baTL23XqX90qcydNVsQLuMn3y37D7kfsi3kfAZK6+3t8+R4k/c1L0ls1+kJ97qdtlmQSAT8hLNCflWF9HvF+rBOisyZmOPlUK3Oo9YWCl5wUUrn25vlwP9cIi3vbpV8zbMC/nIr6NOfHw5OO5Ub+u+jx+8FecJCfsMlufhFttMmGy06CaffAG6rHjQl0yVrpMj0UK3XiTmf/c+vEO5Rcvo599nff7Xgth0NlI88sYz+/BCoX2VeVnbD8DpBtOi5LD8bq5PSrqMLrKzX9KmEe1QIYFm/6ukfLXhsWSpVpEr+qmWPSYOPiTk1zLpHGWlFVz8H09f8hnxw4nXJx8/eflu2/v1Oqa6slHG1tYLS0wssvdD6t1//2vV5439vnfzGwP9HEC1D9MLMetHy+jX69u43reenZMKkuySGdMb9n4+tHsToINio4OOyYs3K10O1m9at9fRcxmEiLHRyh34uam92VZ4TVjRgznt4kV3RZ35+6b24ZYtxeo7eqWH+fXTlU8nftO55iZnMJUl9jRn3yEYPPq6yr/XsuLR0vRLE4Vvtu//C2DGenksfLMLseNNG+fmbK+w+/XzVTZwkzz75FBX9EtCLK51wZGqT8juZBeHktyf/O2vXy4zZD0rUfTQGk0k5uBIVfFwlqDGazqFaL7p7n18RIKxG1M6zt2r6qRb21rhnt4yvu5v5+SWgvfemv2P9vjNk+GRB9Pmt5H9r0QLZuvlliTLGYMINAR990tFaGvKtDxslT/912WOeJ+YwDhNRkN22U0jV1zmIS9AvDv379dISpT3cfN+JD/3a/MSEJZ6fv2rZUnt0c0Q19IT7ZgH6QIsOjA60dtZbnyi+ypY6rcDrMqvbfvtZe7MoEDVBtO0oRmsGx2trjmL2fTz5mZM/qLJS/vu2nXJr7W0SEXqYds3Y6kGBn5dDvBDw4cmB1vYlKUk/6+W5fpZZcagWcfDPe1fLv+xdQ9APgSn33Wu3QpnwvSfe/Ib8H7yxR24ePkJCzgr3qW+MrR64WgADAj4883L41s8yKw7VIk403P/8zXpfGzZzIejn55Fly2T1C+uMz9OqvZ6n0JYrxJefkD/U+lrTSn5YQ353v33qa+OrBzUK4AE9+PDMy+Fbbc3xEu45VIu40c9pnchSaH++okffvxUrV3oK9+pTd9UT7hNAvx69jrjV1y0tTmmRKmwyVn2te1IO4R7eUcGHb/taW6vSXf3qU2lZnP3zfvru736woXtJCRBTp080WhXE+QW37Sgdr7n46wtk5vTpgqt5rdwrnYakm4qRDBf+rU3eeHmKtJ3yNmhGK/k/eOMnMriyUkIgYxXUXrTC/SNspoVfBHzkLfvwrZ959/S+IkmCOoirtGWn/tGlMtkK/LTviL3ESu9yvLpzh6fn610WJnYlj9+QP6r2Nrtdp8whn357FISAj4Lsa+2s62z91YYv191V46U1Z+gtM2nNQSIFGfSrrOAxc9r0RPfp729qkvu/OsdXC5Oe+WFrbTLp193rVsj3+vV33+wH5S/Wrpdy6F5elfoiLTkoRIUABXhh5dPN1/3GdVsbdu6caf3QtalVq2b/ceYWel+RSBosdRzsgKoaafs/B+TCr/O/4/5vv/617D/UJGteWC9bd+6Uj/3GdXborwpHW0FRadV+5Zo1MuuP/tD+2Csdx3vzLTMFyaSvO/rv3/LuVk9fe0etC8jOjnaZ+Pn/JKX0Ub99JcurUBAq+AiS3kpcnOtBqmdAN60iNlsV/eMHXwykou/Q6TszvjAttr362orzyBPLfB88pi0QDr+V/IWPLZOFSx+XEmC+PQJFBR9B+pH1piW1z1hvv5H9gL7ADvvUlwVAdzVRD5lrRVHvbHWeOVpQRd+hVf3vv/JDefF7W+TAoUNSNbgyFi08jbt32732K9es9lW1V4R7ZHO+9v73z78vXZf+zfj8t3e/KYMqq+S2CROkWLQlRyS9zAr3KwQICBV8FEON9dbQ855594AHQfboZ9O2HZ3CM3PatEgdztUgv2b9ens6jt9Q7yDcI5e2/7PfPnjr9cL6O2vXy4zZD0rQuufba0tOdbMAASLgo1i00X61VZ2cy9QKwLtiBX3HuDG1MnmSFfi/ME3G1daGqm9fW2+27twhr+7c6WkbrRvtudczD0Au+rWmo2y90G23Olnn1trbJCCMwERREfBRVBMf2Lnk//mtLzwrAHxpefdV+ee9a+SDE41STBr4NeiPGzNGxvZ8XIrQr1V5DfSvW0F+/6FDdhtO88nCl3pdc12VfPY/v8KeDXjyz3tXy8H/6a3tPahttz0tOX/OCEwUEwEfRTdzaaamIv1Ryw4A77SS//M36z1P/wiChn4N+WOtsD9y2DAZMWy4/WNt7/HT4uMchtWRlhro9x8+JMetn9MfBxHme7vBCvUT7tnAHUP48vPd9fKLN721vxca8ntacr5oVe2ZkoOiIuCjJGbWZ6oq/k3qrc+4xQLANw36uh23mO07fthjOQf3XekvRnh3o1V77benJQf5OmBV8f9lr7eCui7C+v+9tkMqq3yNfLan5HTJxRW05KAUCPgoqS8+lpmXSom27DAMH8iTBv3jBzeWtKofVro8b+xvP0vVHgV7e/s8Od70oqfn6iKs7zy3TlIpc4zqXlyV/sb46oEbBSgRAv7/v727ebHzqgM4/ntuWi0WzWQlqJBRVFCknYK47fgXNJR0ZcGanXXR6KK13TQt2Ca4MBXBjWiybmunIG4UnKDgRnBaUEEXnSxUtEImgm1i5t7jOc/cmU5qXmYy9+V5+XzK7UwnLxQa0u/95XfOw8xZ2YHJKQcF/5pD/+9/Xok+Kes4n89Te7v2TMq1Kxv1zTob/9zb9syjX388nnzhzC2/z9aDqzYfdksOsybwmZvjT6VTaRDPBnBg2ys862+en/rB3HkS9kxTifxf/viBPa/BPfmd0/Ho49+40Td5cBVzJfCZq0eeSUujFK+FaT5MTImUv/1lpZ7s/+viauvXeMqO/ae/9ER85osn6wcVwTTt92m3z//gh3HsK4/u/PPWQdrqxANHPrwaMCcCn7mrV3aq+gDuVwOYuDLZf/vihfpjW6b7Zaf+Y599qN6xN61n1vbzIKxyR345dPu5++53kJbGEPg0xvgAblnZWQxgakrob/zjja3gb8iEvwR9CfnDH12Kj+ewd2iWeSvPovjtqw9HvUl/G59YXLz089+/eeK+Ix/p12EYGkvg0yim+TB7ZaWnHCzcjv7yz5fzBHMa4V/WbUq8L+SQLzF/7+Gj9eeCnibaw4OwSv2v5teJ/FoPaAiBTyMdfzqdzL9rlmm+hVuYkxL6/7m8Xod+2Uf+75XL9deuXb2UP16+5Y+9+57DOeaPxL0LR3ei/gP3LAh5WuePv3ku/vTrUzf6pkv59Xx+eSItjSPwaazxdZo/yZ8uBwDMye9+9rX6StoxU3saT+DTeKb5AMzTrjvyTe1pBYFPK5jmAzBH6d9v/2H1Fz/6gqk9rSDwaRU37QAwY5dyLD3/youVqT2tIfBpHTftADADKf+1Oow4sXK6Wg9oEYFPa5nmAzAlZdf+xKsvVu61p5UGAS3109PVueEovpwnLOcDAA6uTO3PDt+NT4l72swEn0545Jm0NErxWpjmA3Bn3qpSnHjldLUa0HICn045/lQ6lQb12g4A7MWlHPbfz2F/KqAjBD6d4xAuAHvgEC2dJfDpLIdwAbgJ6zh0msCn86ztADBWr+NsXomzK2erjYCOEvj0grUdgF6zjkOvCHx6xdoOQO9Yx6F3BD69dPzpdDJFPBFCH6Cr3I5Dbwl8esvaDkAnlXWcl4ZX4jl79vSVwKf36tAfxPfKpwFAe6X41WAQ33r5hWotoMcEPozZzwdopxSxNkjxTXv2sEXgw/sIfYDWKCs4J199sTofwA6BDzcxvj+/7OcvBgBNslGN4qXNq+6zhxsR+HALDuICNIqwhz0Q+LAHQh9gzlKcG6Z4buWMB1XB7Qh82AehDzBjwh72TeDDHRD6AFOWYrXKYf/KGTfjwH4JfDgAoQ8wYcIeDkzgwwQIfYADEvYwMQIfJkjoA+yTsIeJE/gwBUIf4DZSnMthf17Yw+QJfJgioQ9wnY1RjvqU4qxbcWB6BD7MwK7QfzA8GRfoHw+oghkS+DBDJfQHVSxXVTwbQh/oPmEPcyDwYU4e/nZ6TOgDnZRiNRfGueG78bqwh9kT+DBnx59Ky6mEfp7sB0CbuREHGkHgQ0M4kAu0VH1w9lCKFWEPzSDwoWHs6QMtYb8eGkrgQ4PVe/qRJ/rWd4CmsIYDjSfwoQVcswnMWT2tz6+Vl79brQXQaAIfWsZUH5iZchvOIFaG78R5azjQHgIfWspUH5gSh2ah5QQ+dICpPnBgeVqfIs6PrsSKaT20m8CHDilT/aqKk4MqHgpTfeD23IQDHSTwoaPGD9B6LLZifyEAtljBgY4T+NBxx06mhcE9ccwKD/ScFRzoDYEPPbLzEC2xD/3gFhzoJYEPPVXfwnMoHkopygHdpQC6YetBVBc2I86tnKnWA+gdgQ+IfWg7UQ/sIvCB64h9aAlRD9yEwAduys4+NMz2Tv0wXhf1wM0IfGBPdmJ/69rN5XD1JszCRo76NbffAPsh8IE7suue/QfDQ7VgclKsjyJeL/fUb16NNVEP7JfABw7skWfSUg6SB2MUx6zywL7VU3qrN8CkCHxgosqDte76YCyV6X5+3e+gLtyAKT0wRQIfmKpdB3WXrfPQY2VKv5IiLtilB6ZN4AMzVdZ5hqNYGh/WLdP9xYDuqYM+BrFm7QaYNYEPzJXgpxNSrOe/rwp6oAkEPtAo9YO2BrE0SrE8iLjfoV2aKEWspRQX8v9E1/Kv1VVBDzSJwAcar76S81CO/VTHvik/s7VrOl8N4w2HYoGmE/hA62zf1DOKWK4GOfxFP5NSYr6KtfxazZ9fHL6bp/NiHmgZgQ90ws71nONJf8rB74pObmnXZF7MA10i8IFOq9d7BrGwvdOfqlgQ/j0znsrnXwMXy878oRz0196JdTEPdJXAB3pnZ9qfwz+VG3wGOfxN/NuuXEu5IeQBBD7AdcotPnfl2C+rPqNRfHJQxdFx/C/mb14I5mkj/7dYr1KO+IjLJeKrKjaGo1hziw3AewQ+wB6Vyf/dH8rxP8yT//wGIH88Uh/yTXX4L+bfUReDO7e1E1+/SsAPBvFW2Y3Pb7LWTeIB9k7gA0zQ7jcBoxL8aSv686T5aLx30095M1DeFHT9TwTqtZmUp+xVCff8+Xa4p1H+mIN+s3z9amyId4DJEfgAc1RWgsrHu8bxP9r+U4DxG4NyKHgQcbj+WnlTkK57U7D4fz/hnf4pwtb0/P3Wd/28Wzvu5d+xrMeMP89fr7/PYPzjN8c/xsoMwPz8D/HL8zLeQTCvAAAAAElFTkSuQmCC"/>
+</defs>
+</svg>
diff --git a/public/images/landing-new/avatar-5.svg b/public/images/landing-new/avatar-5.svg
new file mode 100644
index 0000000000..5c625a68ad
--- /dev/null
+++ b/public/images/landing-new/avatar-5.svg
@@ -0,0 +1,9 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="28" height="28" rx="14" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_1676_1612" transform="scale(0.00131579)"/>
+</pattern>
+<image id="image0_1676_1612" width="760" height="760" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAL4CAYAAAAOIoPjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAIs+SURBVHgB7d0PfNT1ne/7z28SQBM0GUlYEysZlKKACEJltbYl2D9nT9Vq/9m1t1tA7znHrm7FPk51t3tPgZ67e1f33BVb3bV3Hy2wu7eedbdb3ErPbrstodW1xSIggn+qZsCa9JKESZAEBTJzf59fZnAIycxvZn7/f69nH9NJMsMfgSTv32c+n8/XEACAb3K9mZT1Rr2M3Rv5+1w2lX9KsyQSTafeNsxb4W059XbRTygpqYYh6Qk+mi76eQfN/x+03s5mh069bSTS+cfH7k+O3RttyYl+PgCABwwBADgml8k0y1tm8NbArmG9TprkZHZ2PqQ35wN8sxmIJw7o0TJo/vfqhUDaek8vArLZA9bbemGg7+uFwxRJG8nkoAAAHEHABwCbrPB+wgzoCSu4d5wK7mOhPVV19Rxjxl5FGAv92eweqU9kzFcE9nARAACVIeADQBGrZWaKLBaryp5dnA/wi/PhPeoV96AbtC4CCq8E1Ce6rQuAk2b4pyUIAE4h4AOInaJK/OJ8iO/Ih/g4tM1ElyG78+F/jxiJ3Vblv152U/kHEDcEfACRVSLIpwTxocFfq/+jVvDv0uBvtCa7BAAiioAPIBKsMD8qnVZvfNYM8Yb5NkEepRQq/gnpslp9qPYDiAgCPoDQKQrzi/Jhnqo8nJI2b7utNh8xq/2EfgAhRMAHEGhWmD9pBvj6U2Geyjy8lhYN/flKP+09AIKOgA8gUPJbbDqtnvm6xHIzzC8WIGgMM+wXevrrrCp/WgAgIAj4AHxlBfqz5Eaq8wi5tIxV+bfICbPKPzO5WwDAJwR8AJ46LdCL3CSspUQ0pYXAD8AnBHwArsoPxN5kfrVZLgR6xFfavHVZffwi22npAeAmAj4AR50aipXsTVKXuJGWG2ACuqJzNLtdJLGFTT0AnEbAB1CzU203ObNCPzYUS5UeqIQO7RpWO8922nkA1IqAD6BiVOkBV6VF23myspmVnACqQcAHYMupXvqErKRKD3hGW3e6rGFdevcB2ETABzCpca03nQLAX2OtPJuEsA+gBAI+gNPkQ/1KK9AT6oHg0kHdsbD/OGEfQDECPgBCPRB2hH0ARQj4QEwR6oGIIuwDsUfAB2LEGpQVK9TTUw/EAT37QCwR8IGIG7f9plMAxNM7Yf9xDtYCoo2AD0RUri/TaYV6McM9Ky0BvEPD/Rb27APRRcAHIiTfgnOX+Y17jRDqAZSXlmz2calPbKCFB4gOAj4QcrTgAHBEvoXHDPqbBUCoEfCBkLJacCRrBvuEtuFQrQfglLSMnZ67nqo+EE4EfCBE2IIDwFNU9YFQIuADIZA7lFksU+RGeusB+CQtVPWB0CDgAwFmteHUyVqq9QACg6o+EHgEfCBg2IQDICTSZkV/nXCIFhA4BHwgIBiaBRBim2jfAYKDgA/4jDYcAJGh7TujZtDnAC3AVwR8wAdju+tHzWp9HbvrAUSR1b5Dnz7gDwI+4CH66wHEDH36gA8I+IAHCPYAYi4trNkEPEPAB1xkBvuUnMyuYXAWAE5hIBdwGQEfcIE1OGtkV4lhBXsAwJkI+oBLCPiAg9iIAwAVI+gDDiPgAw4g2ANAzQj6gEMI+EANCPYA4DiCPlAjAj5QBYI9ALiOoA9UiYAPVMDaijOaXcfwLAB4hqAPVIiAD9hAsAcA3xH0AZsI+EAJHFAFAIFD0AfKIOADEyDYA0Cgpc2Qv8kM+esFwBkI+MA4uf7+VWLUPSAEewAIOg3668ygv1kAnELAB/LGTp+VB8zbYgEAhAlBHyhCwEfs5TKZxZIzgz0rLwEg7LaYQf9u+vMRdwR8xFa+z35tvs8eABAdDOIi1gj4iCUz3K9lgBYAIi0tkn3QmDFjgwAxQ8BHrFh99gnZaL6ZEgBAHNCfj9gh4CMWrIOqcmawp88eAOKKth3EBgEfkcY+ewDAacaq+ezPR6QR8BFZtOMAACZB2w4ijYCPyKEdBwBgE207iKSEABGS346zi3APALBhlfk9o9v63gFECBV8RALtOACAGqVlVD5uzEzuFiDkqOAj1HSI1rw9YP5L3iaEewBA9VJSJ7tyA5mNVqsnEGJU8BFauf7+m8So06o923EAAE5iCBehRsBH6DBECwDwCEO4CCVadBAqZri/iyFaAIBHdAh3m/m9Z6UAIUIFH6FA1R4A4CtDuszbaqr5CAMq+Ag8qvYAAN/p96CsDuEOrBEg4KjgI7Co2gMAAolqPgKOCj4Ciao9ACCwqOYj4KjgI1Co2gMAQoZNOwgcAj4Cg732AICQYm8+AoWAD9/pabTm3Vrz5U5e6gQAhBnVfAQCAR++yvVlOs0vhlq1TwkAAOGXllH5uDEzuVsAnzBkC9+YlfsHzH+B24RwDwCIjpTUyS7ze9xaAXxCBR+eswZpR+V75r++xQIAQHRpb/4KWnbgNSr48JR13LeuvyTcAwCiL2Wt09TvfYCHqODDEwzSAgBibkN+AHdQAJcR8OE6M9wvNoP994ReewBAvNGyA0/QogNX5U+kZZAWAICxlp1uTsCF26jgwxX5lpwHzC9kqwQAAIynO/PvpmUHbiDgw3HWlhyq9gAAlEPLDlxBiw4clW/J2SWEewAAyhnbskPLDhxGBR+OYEsOAAA12WDMSN4tgAMI+KgZB1cBAOAIWnbgCFp0UJNcX6aTg6sAAHCENcNmfW8FakDAR9WsfvuENUzbLAAAwAkp/d5qfo9dK0CVaNFBxViBCQCAJzj9FlUh4KMi9NsDAOAp+vJRMVp0YFu+334b4R4AAM+M9eUfyvC9F7YR8GFLUb99SgAAgJdSUse+fNhHwEdZZrjXfvsNAgAAfJR4gOFb2EEPPiZlDdPm5HvmrVMAAEAwGNJl3lbTl4/JEPAxIWuYNktLDgAAAcXwLSZFiw7OYIb7xdbhVYR7AACCiuFbTIqAj9OY4X5lPtxzeBUAAMHG8C0mRMDHKdbgTlY2CQAACBGGb3E6evBhyW/KoQIAAEB4bTBmJO8WxB4BP+bYlAMAQISMbdj5uJFMDgpii4AfY2zKAQAgktiwE3P04McU4R5ArbqefFJW33mHAAicsQ07+r0esUTAjyHWYAKohQb7FR+7QVbceINsevQ70vXUkwIgcFijGWME/JjJr8HUyj1rMAFUpDjYF4f69ffdJwACSddobsv1Z24SxAo9+DFihvu7zHC/QQCgAumDB61WnFKV+m3//H3pvOZ9AiCosncbM2aQAWKCCn5M5Hfc84kNoGLp1w+WbcOJQhWfmQJEG7vy44SAHwP5cL9OAKAKWpkvV53XC4Cw9uIzU4DYMLMAIT8eCPgRlz/Aap0AQA3W3ntv2edsfvRRCRNmChBLhPxYoAc/wsxP4I3mJ/IqAQAHaBguVd1ubmqS7l17rPsgY6YAsGwyZiRXCyKJCn5EEe4BOK1cFX9waEgefOSvJOjiMlMAlLEqN2BmBUQSFfyIMYN9s4zKNvNvlr23ABxnp4qfeS0tQVfuv0NRxUcsGLLbvOmpt4OCyKCCHyGEewBuu+v220s+rlX8MAypRnGmAKhKzswMOevUW87HiRACfkQQ7gF44aaPXle2x/7BRx6RoLOzGWjLD7ZaFyxA5BHyI4eAHwHmJ2SKcA/AK2v+S+kqvlbwwxCMozJTADhiLOT/xMoUCD168EPO+kTMmuFej6MGAA9o8E1elCr5nE0PPSwrb/msBF1UZgoAB3Wb5d9rjWQyLQgtKvghRrgH4AcNveXaWzaFpH89KjMFgINmm9mCSn7IEfBDinAPwE83ffSjJR/f/fzeULTpRGWmAHAYIT/kCPghRLgH4Ldy7Tca7jXkh0FUZgoAhxHyQ4yAHzKEewBBYKdN5/GtWyUM7rr9CyUf13D/+A/C8d8COIyQH1IE/BDJr8L8nhDuAQRAuTadLf/rBxIGUZopAFwwW3LyT6zQDBcCfkiw5x5A0CwvE4rTBw+GprUlKjMFgCtyckV+hSYhPyQI+CFAuAcQRIsXLiw7oBqWDTRRmikAXEHIDxUCfhgQ7gEEVLkq/vYnwxHwozRTALgmH/IFgUfADzjzSnkj4R7wR5cZTlffeYdgciuuuabk4+nXD0pYRGWmAHCVGfJzA5lvCwKNgB9gVrjPyioB4CkN9nrC6Yobb5BNj36Hg45KWLRwYcnHdz//vIRFlGYKAJetJuQHGwE/oMxwv5ZwD3irONgXh/r1990nmNjiy0oHfA3FYRGlmQLAAxry/0IQSAT8AMqH+3UCwBMaQicK9gX6MYLdxDQQlwvFYWrTicpMAeCRNVZmQeAQ8AOGcA94TwNouQBPFX9yqQtnlXw8TFX8KM0UAB4wzMyylpAfPAT8ADE/Qe4i3APe0+0p5TaoUMWfXMes0gH/QIgCfpRmCgCPjIX8gYE1gsAg4AdErr//JvMTZIMA8MXae+8t+5zNnGY6oWTTuRIVUZopADxkmJHyL3KZIysFgUDADwCzcr9YjLqNAsA3dqr4W36wlS0qE2g+t3QPfpj+zKI2UwB4yKzkjz6QO5RhtXcAEPB9Zob7lFm5/575JifDAT4rV8XXoPrgI38lOF25QBy2i6IozRQAHktKnXXabUrgKwK+j/Lhfpv5ZkoA+M5OFX/DNx8RRFuUZgoAHyTNbEPI9xkB3yfmP/xmwj0QPHfdfnvJx7UazbDt6aLWthSlmQLAJ7PzIZ/uBJ8Q8P2Ss9pyUgIgUG766HVlW04efMSbKv5wpn/SW5AMHikd8FNlKuJBE6WZAsBHs82s808CX9QLPGde0T5gXtl2CoBAWvNfbpd190++914r+Bryyl0IqBNvjcjxYyMy1HtQThw7JsfN90cG+823R8Zu+n4+sB83H9f3KzXlrAaZevbZMuXsButt1ZBsGXt/WoM0mm83JGdYjzWe13LqOU5JH3y95ONNNv6cgiRqMwWAb3KyQk+7NWYkvyTwFAHfY/mDrNgVCwTYXbd/oWTA14D3+A+2yspbPmu9r6F8+HC/GeJfl8HfHLSCuwb64cMDVQX2SumvYf06mYGij7406fM14De3X2jdN7XNOvV2c/usqsJ/ucDbHLKAD8BRetrtkJFMrhd4hoDvIQ6yAsJBA6kO25bqtX/4L78hc08OjAX504J18OnFQN9rYxcAPft3nfZYIfw3mWG/dfYl0tDcYgX/UnY/v7fk42Fr0aFCDzgqf9rtkbSRPHezwBMEfI9Yu+45yAoIjZs++tGSAX//K6/Kr3btkMZpUyRKCuFfb688+SPrY+NDf+tFl56q9O/eu7fsz1lu7WTQRG2mAAgA3ZG/MXcos8eYmdwtcB0B3wNFu+4BBJgOr/ZruO1+Ud7V/1Lp5x4/IenDQ7KgrUWibqLQbwX+tlny1IHSA7/l1o4GUdRmCoCAMPI78pcYyWRa4CoCvsvYdQ8E11hwfdEM9C9J775nz2i1WdDeIvt6Jg+wO9I9sQj4Exnsed26benaWfJ5qVkXStgwUwC4prAjX0P+oMA1BHy35WSjEO6BwNAqvfad9+5/9lQf+mSWdbSVCfi9svrqyyXO9vWWruC/d+kSCZuozRQAAVNYn3mtwDUEfBflN+Z0CgBfaZW+36zS95ihXqvOds1vby398745IsNvn4hcH75d+3r7rD+DUkZ3/pv89OSAdCx9n7TMvsRa2RlkUZwpAAKH9ZmuI+C7hI05gL8Gew5K7wu75MDOJ6vecjN7RpM0TJ0iI8dPTPocrWAvS7VJHG176WDJx/XPr/WchlP9+6r1oksCHfbLVe/DOFMABNSa3MDAQWPGDBaQuICA7wI25gD+0J769M6nbLXf2KV9+M+keyd9XKvYcQz4h8zKfdfLpQP+/PYzA/xEYb9jyTUSFF1PPVXy8TDOFAABZYgk/iLXl9lttCa7BI4i4DuMjTmA97QF54UfP+5YqC92WVvpgN93xP2DrILosZ0vlH3O9ZfNKfl4Iezv/7fHrbA/570fLrtz323bS6xGVVTwAUcZkpBvm9npWjbrOIuA7yDzH2gzG3MAb2i1/pWnfiS/evJHrp4Wm2ppLvl49+H4HYpkp3qv24W0PceOkUy/HNipt6es9ZtzrvmIL1X9rieflPTB0v9dywn4gNOsodt8yGezjkMI+M5aK4R7wFVuVusnkppReiViuSHTKLJTve+8pEOqoUPQv/yHb52q6s/74I2e9epv+p+Plnx88cKFbNAB3JCTK8zbX5hv3SpwBAHfIfmNOWsEgCu0unvg2Sc9C/YFjVOnlB20PfTmsMw8p1HiYF9PX9nq/Uyzcr9ibm1BuLiq37H0GquiryfoukUr95sf/U7J53S+NzizAkAErcoNDDzH0K0zCPgOyPVlOtmYAzjPqzaccjSwpgcmb8XpO3osFgFfV4I+tP3Zss/79NJ54iTr4s68uTmUu+7++8o+567bvyAAXMPQrYMI+DXKD9VuFACOCUqwL2gtE/C1gh+HE203Pv1c2ZYkJ6r3kykeyp3/oRsdC/q2qvfXvI/2HMB9OnT7T/mTbtOCqhHwa8VQLeCYoAX7gulT43mQVTHtuy/XmqOcrt5PRNt3Cn36TgR9O9X7VbfcIgA8kcyfdBu+Y7ADhIBfA/MK8wEz4KcEQE2CGuwLGsqcVDvy9gmJsm0vHTAD/otln9dpVu7dqt5PxImgr5tzylXvtXK/8pbPCgCP5OQKTrqtDQG/SvmTahmqBWqkG3GCGuwLGstU8IePRzfga7h/2EbfvbbmfMaD6v1EioP+ez51q+1h3MGhIVn9B3eUfd66e+4VAJ7jpNsaEPCrkO+7XycAqqbrLnf+47dkODMgCCa74V5pa47dvfdu0aD/07++39q6Y2e95po//krZvfdU7wHf6NDtV83MtYV+/MoR8CtUdJhVswComNd77J0Q5Qr9ZLbufUU2Pr3X1nNvNsO9l6055RS27pQK+uvvu69sa46ieg+In5Jm5vpJfuiWQ7AqQMCv1Gh2gxiJlACoiLbgvPBvj8uvnvqRhE25Hnu/K9dO0205W/e+auu5ehDYzUvd209fCw35eiE5vj9/86OPyrr7/6zsj9fBWqr3gO9mmyGfQ7AqRMCvQL7vfqUAqIgO0Gp/dJD77Es5dLT077tx6lSJgkNvjsjDXTtlX2+/redr3/29H7lKgqy4P/8D/+ke+cd/+ZGsuvP3y/44bc1Ze88fCoBA4BCsChHwbcr33fMPC6jAYM/r8tzW74SqHWciw2Uq+I3Twr9Gc0e6Vx7avtP2RiAN9+uvf39oXr3QoH/vbZ+xPVOgrTnsvQcCY6wf/1Cmy5iZ3C0oi4BvQ1HfPQAbwtyOM5FSh1yp1ulnS1iNnU67U54xA75dYQv3qpKZgrX33ktrDhA8Sak7dQgW/fhlEPDtWSscZgXYErXtON1lwr2aeU6jhJGG3r9/9sWK9viHMdxXMlOweOFCs3pPaw4QUNqP/1Xznv34ZRDwy8j1969i3z1QXtSq9gUHygT8BW2lVzEG0b6ePquanbZx8VJMB2q15z4s4b7SmQJtyfne3/ydAAi0NbnMkT1G8tzNgkkR8EvI990/IABKivJO++fNMFxKmCrZGuz1RFq7gbfYiks6ZNVVC0Mzb1DNTMHWTRvpuweCz5Ds6ANmRtvOfvzJEfBLYd89UJZuyNnzxKMSVeXC8IL2Vgm6Hekeq0WlmmCvdM99UFdhjlfLTMGBf/2f0mxev7TPXyIAAi0pOfkn855P1kkQ8CdhXhmuNQN+SgBMyFo/aFbtw74hp5R9vX3S92bpFZmXBbRFR4Pu1udfkSeef7WiHvtiGnzvWL7UvIgJRxtSrTMF+m/66b99yNqbrwdkAQiwnFyRG8j8hTEjST/+BAzBGXJ9mU5JsDUHmEzP/mfll//w7dDutbfroa6d0vXywUkfnz2jSf78k9dKUGiof+ZAr2x76UDV1fqC6xbOkZuXXBqKlhw3Zgoaki3W3vyJTsEFEBg5sxh7rdGa7BKchoA/Tr7vXsN9SgCc4bknHo3cIO1EdEDz9x/915LPuW7hxbL66svFT4VQr7MCO8z7aqv1BWGq2rs9UzDlrAZZdMMtp52CCyBwus2iLKszx6FFZ7zR7DoxEikBcBqrfeHvvmEdXhUHj+18oexzrr9sjvghPTBohdod3b3SfXio5lCvNOheZ/73XHfZxYGv2ns1U6CvUOkpuPpvn5YdILBYnTkBKvhFrJWYRt1GAXCaKG/JmYid6r2ux1x/w/vFC4VA390/5EiVfrzOubPkM2boDfJGIL9nCprbL5SrPvcHtOwAwZQz//cJoyW5RWAh4OfRmgNMLOpbciZSrvde3dG5VFbMdXalooZYDfNpsyp/6MiIFeoPHR1xPNAXaNDVFiPtRQ+ioM0UaF/+1Z+70wz7rNIEAiiTb9VJCwj4Bbn+gU1iJFYKgFPi0m9fTPu61z7xZMnnaCX4L2/5D1KJQ28OW/d9R49Zm3mGjx+3Qvzw8RPWcKibQb6YBtwrO9rkejPwBjHYh2GmYNH1t8icaz4sAALGkG3GecngbD7wET34YlXv7zKr94R7IE97j5/+229EegXmRMZ2qD9b9nmfXjpP7NIw/4Uy7T5eCHKPfdhmCvQVLf0coS8fCJicdOYGBtYYM2ZskJiLfcDPt+asEwAWHSj86V/fF5t++2Ibn36u7N57rQg73ZrjJq1c37xkXqC24kRhpmD/vz0ugz0H5T2fvs3atgMgEAyRxFfNbLcl7q06VPBzokO1nFYLmHRDzs//7uuxDPe6Nadc372qpHqvGnyolmuYX5Zql853z/K1Wh/1mYKe/busi2GGb4FA0VNuv23ex7pVJ9YBP9+a0ykA5MCzT8me7z8a+cOrJqJDnLpPvRytDFdavW+c6n7A1hCvodbLUM9MwRi9KP7pX9/PoVhAkNCqE98h23xrzi6heg/EclNOgYb7h2303Wtrzvrr319V28en/p/vidP096PBVkO9BluvKvXMFEyMDTtA4MR6q058K/i05gCWF378uNVPHEd2w736dA093Q1mFX/kePXV7EKFPnVekyxob7V28Af9MCq3BHGmQI3NroxV8gn5QCDEulUnlgHfOtAqR2sOEOdwv3XvK7Lx6b22nqsnn9YyWDt9mv2Ar5X5DjPMz5zeILNbmmW+GeZnBugAqjjPFJSj7W0//sY6a/C2Y8k1AsBnMW7ViV3Az7fmrBUg5uIc7nVbzta9r9p6rlbOb156qdSqENK1mq+vBGhvvn5s5jmN1sf01wlSkJ9MVGcKnPTLf/iWdU/IB3wX26068avgj2bXiZFICRBjcQ33h94ckYe7dto+FVUD970fuUpqVemhWHHk10yBWwj5QGDEslUnVgHfas3htFrEXFzD/Y50rzy0faftzS61DNVGHTMF9hDygYDQVp3+zE1GS3KLxERsAj6tOUA8w/3Y6bQ75Rkz4NtFuC8tSjMFbiPkA4FgmP/7tpkFu4xkclBiID4VfFpzEHNxDPc6SPv3z75Y0T52wr09UZkp8AIhHwiEpFno/ap5/yWJgVjswc8dyiyWOmvnPRBLcQv3+3r6rA05euBSJTSUas894R5uYLsO4LucGfKvNVqTXRJx8ajg14nzp8wAIRGncK/BXk+ktTtEW2zFJR2y6qqFsd0vD/fpSdFN51/InnzAP4YkrIHbiyTiIl/Bz2Uya82rtXUCxFBcTqjdke6x1l5WE+yV7rl3YhUmUM6Usxo4DAvwWza73midsU4iLNIBPz9Y2y1ADPXsf1ae/tuHJKp0eHbr86/IE8+/WlGPfTHtEb9j+dLAnYqKaGtItlghvzHJvzvAJxmzkr8kyrvxox3w+wc2sRYTcTTY87r89K/vs07WjBIN9c8c6JVtLx2oulpfcN3COXLzkktpyYEvCPmAzwzZZpyXjOxu/MgG/LGd93UbBYiZkUy/Fe6HMwMSBYVQ/3xPn+ww76ut1hdQtUdQNLdfaIb8e622HQCei/TAbXQD/kBGW3NSAsSIVux//PW1oQ/36YFBq0K/o7tXug8P1RzqlVbqr7tsjnm7mKo9AqNj6TXynk/dJgB80Z1v1YncbvxIbtHJD9amBIiZp//2G6EM94VA390/5EiVfrzOubPkM0vnsf4SgXNg51NWm868D94oADw3W05m15j36yRiIlfBZ7AWcRWGdZjabqNhPm1W5Q8dGbFC/aGjI44H+gJtw1l99eXWfnsgyBZdf4vMuebDAsBzkRy4jV4Ff+zEWgHiRNdh+h3uD705bN33HT0mfW+OyPDx41aIHz5+wjpwys0gX0zbb67saJPrF84h2CM09PO3ZfYlrM8EvJeUnLUbP1IDt5Gq4DNYizjSodr/df894hcN81949F/Fb/TYI+zYrAP4JnIDt9Gq4Bt1awWIkcLGnDjTNpybl8xjKw5CTz+fd/7jt6zNOgA8FbkTbiMT8HOZzF0M1iJufmmGAb+Haht8qJZrmF+WapfOd8+iWo9I6XvtJXnuiUfl8utvEQCemp3rG1gXlRNuIxHw84O1awSIER2q1TDgt8ap7gdsDfHaT0+oRxz86qkfSctFl0j7/CUCwEOJxBfNTLkhCmszo1HBHxusTQkQEz37nw38xpxa6YFUOiyroV7DPaEecfLLf/i2fPCLs+jHB7yVNAvGXzXvvyQhF/ohW9ZiIm6CeFLt5zc9ISPHq9+QU6jQp85rkgXtrbKgrYVAj9jTk24/+AfrBYCncjIqS4yZyd0SYuGv4GflAQFiZM8TjwbuMKvpZhi3G/C1Mt9hhvmZ0xtkdkuzzDfD/EwOoALOMNjzOv34gPcMMx3/hYR8bWaoA761FlPkJgFiQvvue/bvkiAqhPSGqVOsE2O1N18/NvOcRutjWqEnyAOV0X78tvlXSOtFlwoAj+SkM9eX6Qzz2sxQt+jkBjLampMSIAb83ncPwB+6H/9DX1wnU87iAhnwjCG7jPOSoZ10D+2Rr/nqfUqAmIj7vnsgrvTiXlvzAHgoJ4tzmcxKCanQBnwOtUKcaGtO0PruAXjnwM6nrO1ZADxj6JynGfKbJYRCGfDNP2wN9ykBYkCrd1FfiQmgPF2deeKtEQHgmaSczIbynKXQBfz8WsxVAsQErTkAlIb7X/7DtwSAh8YOvwpdFT98FXw91IrqPWKC1hwAxXSLVt9rLwoAz4Syih+qgG9V741EaAcegErQmgNgIr/8R1p1AE+NVfFTEiLhquCPVe+BWPjlP/JSPIAz6cX/C1z8A15KSla+KiESmoBP9R5xohsz+l57SQBgInoA1mDPQQHgmVVhquKHp4JP9R4xYVXnfrxFAKCU57ayGx/wkBGmKn4oAj7Ve8TJK2ZljsFaAOXoq3wHnn1KAHhmVa4v0ykhEI4KPtV7xIRW7/WldwCwY8/3H2XgFvCOIXXhqOIHPuBTvUec7P8xg3MA7NNw/6snKQoAnslJZxiq+MGv4FO9R0zoYK3eAKASY219/QLAE6Go4gc64FO9R5wwWAugGlrFf4FX/wDvhKCKH+wKPtV7xIRW7hmsBVCtsdW6nHALeCTwVfzABnyq94gTqvcAakUVH/BQwKv4wa3gU71HTFC9B+AEXZtJFR/wTKCr+IEM+FTvERdjvbNU7wE4gyo+4KEAV/GDWcGneo+Y4FArAE6iig94yjCT9OclgAIX8KneIy70UKsDO58UAHASVXzAU6us7BowwavgU71HTGiljeo9AKdRxQc8ZcjJ7F0SMIEK+FTvESf03gNwC1V8wEOJxEozwzZLgASrgk/1HjHB5hwAbqKKD3gqaVbx10iABCbg56v3ywWIAar3ANxGFR/wUCLxxSBV8YNTwR8d7TT/PyVAxFG9B+CFsTmffgHgiUBV8YMT8I26tQLEwK/+/UcCAF7QggIAjwSoih+IgJ/r718lVO8RA9oTO9RzUADAC3rWhh6oB8ATGu5vlAAIRgWf6j1i4sCzVNMAeEfD/a+e5FVDwCOG5CQQ2yB9D/j5I35TAkTc2MFWBHwA3urdv0sAeCQnnfls6yv/K/h1QvUesfAG32QB+GCw9yArMwHvGGa2/ar4zNeAb63GNK90BIiBV5/6oQCAH1iZCXgoAFV8fyv4HGyFmOgxq/esxgTgF12ZybAt4BlDJOvrsK1vAT9/sFUgBhEAt6WffVIAwE8M2wIeSiRW+rky078K/tjBVkDk6XBt7z767wH4q7+bPnzAQ74efOVfwGc1JmJCXxoHAL/p1yKGbQEPJRJfFJ/4EvA52Apxwsm1AIKih21egJea/Rq29aeCn6ij9x6xoO05nFwLICg4iwPwlG8rMz0P+KzGRJz86imq9wCCQzfp0KYDeEhXZh7KLBaPeV/BZzUmYqR3/7MCAEFCmw7gKUOM7E3iMe8DvpFYLkAM6OmR7L4HEDS06QAeSyS+6PXKTE8DPsO1iBO+iQIIItp0AM81y4nsKvGQtxV8hmsRI7TnAAgq2nQATxlSn/iYeMizgM9wLeKE9hwAQcYrjIDHdNjWw5WZ3lXwGa5FjPS9yuFWAIKLNh3Ac4ZI9kbxiHcBn+FaxEjvC7TnAAg2TtkGPJZIrPRq2NaTgM9wLeJkrDLGN04AwdbfTQUf8FizjI56sjLTmwo+w7WIEcI9gDDQr1VakADgGcPMxJ8XD7ge8BmuRdz0sD0HQEi8sY9tOoCndNjWgzYd9yv4J7NrBIiRfgbXAIQEbTqA5wwvsrH7AT+R8GxiGPAb6zEBhAkthYAPEokvistcDfj5fZ8pAWJiqOd1AYCwGMn0m0WJfgHgqWa3d+K7W8E3vD2WF/DbG6zHBBAyVPEBzxlmAnd12Na1gG8NEBi05yBejvQcFAAIE/rwAV/c5OawrXsV/LE9n54s8weCYOylbvrvAYQLFXzAF67uxHcv4LP7HjEz2Ev/PYDw0eIE+/ABz7m6E9+VgM/ue8RRH+sxAYQU+/ABH7i4E9+dCv7oaKcAMTPUS/89gHDi6xfgkxPuLKRxJ+DTnoMYoo8VQFj18/UL8IMh9YmPiQscD/i05yCOaM8BEGZ6SB99+IAPtE2n18zODqsXp53I3iR17h+QCwTJCNtzgNAZfvuE9B0dlvTAETn05rB5G5E+vR0dC7r6/ngN06bI9KlTpHV6gzSa96mWJknNaJZG8+ML2lokzLRQ0T5/iQDwlFnFt9p01omDnA/4iQTtOYidQfpXgcDTEL+/d0Ce7+kz7/snDPDljJgXBXor/NgdB3pPe1xDfmpGkyyb3R66wK9thgR8wAd1iQ+IwxwN+FZ7TlYWCxAzDKgBwbTPDPM70r3yjBnEqwn0Ff965oWD3rY+/6pV7V/W0SbLUu3mrU2Cjq9jgE/ybTpGWzItDnG2gk97DmJqsIcd+EBQdA8MyjNmqH/CDNlabfeL/tpdLx+0bq3nNFgh/7rL5shM8+0g0gq+9uFPOSuYvz8gwhxv03E24NOegxjSb4gMpwH+02r9YztftCroQaO9/Vv3vmrdOufOkpuXzgtk0B/sMS9GLrpUAHjM4TYdxwI+7TmIK/2GCMBfD2/fKdteCsfnYqGqf93CiwNX0dcqPgEf8IHDbTrO9dNoew4QQ7TnAP56bOcLoQn3xbSav/aJn5lh/4AERX83K38BnxTadBzhXMCnPQcxNTIYvHYAIE62vRzeV9G0deehrmfN205PhoDLoWAB+MjBNh1HWnRoz0GcsXkC8FdfDcFY99fPb2uRmdMbZOa5jdZ+ex2I1R331s18vJiG8OHjJ2TEvKUHhuTQkWFJHx6y3h6uYaBXW3Z0duDOzqW+rtfUeSLdh0+bDuADB9t0nOnBHx3tFKNOgDg6/tYxAeAf7WG3W/3WwH5lR5tc1t46Fuwr7H8vfv74IK4BXYP+jnSP7Oup/JU9vVBZ+/2fyc1LL7WGcP0y2Ps6AR/wS53V8r5BauRMwE/UrTSvOoBYGjlMiw7gp49eNkc2Pf3cpI9rqNdhVg3kC9rdq45bP795u+6yi62wvs0apj1QceuNbgLSVwlWX325+KHfrOC/+5oPCwDPGVKf+Jg4EPANqVG+PadbgBjSl7P/ef2dAsBfGop12LaYhvmbl8xzNdTboUH/H8zfW6VBXw/JuqNz6RltQm7TPfgfW/uQAPBFThJynpFMDkoNaq/g056DGBvOUL0HgkDbWlbMnXVqB7624XgdjCejvy+9VRr0d+jpu0/8TNZf/35P/1u0cKHrf5vbZwkAH4yOapvOJqlB7Vt0jLobBYipE8c44AoICh2O1UOk9BaUcF9MQ76Gdd1/b5f29N//w5+L1/q6XxIAvjAkUfd5qZETazI7BYipkcyAAIBdehGivfXrb3i/7QFffVXi4a6d4iW2gwE+ysniXCbTLDWoKeDn+jKd5l1NvwEgzGjRAVANHcbVan5qRpOt52t7z/gZAzf17NslAHzTLCdrWz9fWwXfcO7ELSCMtFcVAKqh1fz/8clrbbfs6CDxtpe8OfVWv7ZRwAB8Y4hka2qBrzHgJ5YLEGP04AOolbbs2N17v+npvZ6deNv3Gn34gG8SCX8Cfi6T0ZcOUgLE2MggFS4AtbN7uJXux/dq6La/+0UB4JuUnmorVaq+gn8i2ykAAMARGvLttOvoZh0v+vGp4AM+GzvVtirVB/z6BOsxEXsj9KgCcJC269g5mEuHbt2mX9+YMwJ8UzjVtipVBXxrdU+O9ZgAADjtno9cVXaFZp9HffhvsE0H8E8N6zKrq+DXuLoHiIph9uADcFjj1CnyZTPkN0yd/LCu2TbXa9aKffiAr6pel1ldwGc9JgAArtEAX2ro9qML54gX+unDB/xU9brMKnvwE4sEAAC45vqFF08Y8vVjK+bOEi8MmhV8+vABH1W5LrNeKpTLZFKSpUUHQDgNv31C0gODkj48JN39QzKi75tvq4n2izdMmyLTp06R1ukNVutEqqVJUjOarRNIy/VJA7XSzToa5vf1jg30X9nRJo3TpoiX+l57UdrnLxEAvkhpH76RTA5W8oMqDvgyOtopRp0AcccGnfDY19MnO9K9VkjSFYOV0AsAvRXC/44Dvace6zSDl2498TpwIV70xNvOc7yp2E9E12US8AEfjY7qusxNlfyQygO+GJ0CAAFXCPXbfnXQCuhu6Hp57Oe+5z9cJUBUMWgL+MowC+sfENcDvpFYLgAQQNp+0/WrA7Kju/dUS4PbtKKvvy5VfESVVvC1D3/KWbSkAT7RCv6tlfyAigJ+LpNZLFlJCQAEiAbsrc+/Ik88/6pr1fpStId/QVv5w4mAsBrsOSitF10qAHzRnOvNpIy2ZNruD6isgj86upj+ewBBom04G59+zrODfybSOJXqPaJNq/gEfMBHdVmt4m+w+/TKAr5RV9WqHgBwmg69Pty107NWnMnoJp2UR4cOAX7p737R/H8iAOATQ+oSl1fyAyrtwWc9JpA35Wz6Uf2yde8r8vfPvuhLO04xDffrr3+/AFE32PO6APBVRX34tgM+/ffA6Rg485722t//w5/XXLXXgdj5bS0yc3qDzG5plg6zAq9tNhPttddf89DRERk5fsJasXnoyLAMm2/rj+t89yyGaxELOmSr+/Bp0wF8U1Efvv0KPv33AHzUbYZrDffV9tovaG+RBW2t1jCsvm2XBvjZ08ZacBikRZwN9r5OwAf8VEEfvv2AT/89AJ9se+mAbPz53opbcjSca5V9Waq9olAP4Ez9ZgX/3dd8WAD4oqI+/Ep68Om/B8bRNh196Rru0X77jU/vrejHaLC/7rI55u1iWmgAh+gmHQC+6rT7RFsBP5fJpOi/B8409eyzCfguemznC+btxYp+zHUL58jNSy4l2AMO0691w5l+aUzyahjgk5TdPvyE2KH99wDgoUrDva6q1I02q69eSLgHXNKzf5cA8NGU0U47T7PXopMzOsUQAOM0mJWs4cyAwFmVhnuq9vCSblYaPn7certx6tRY/bsb6j0oAHxjmJl8kZ0n2gv4dYlFkhMA49SzC99xOlBrN9xrsLpj+VJZlmoTwC37evqsE5N1TWr34aEzhr0bdNPSeU2ybHabXNnRPuG61aigDx/wmZFYbudpNiv49pv6gTiZOo2A7yRdhfnw9mdtPbdwyFRrhMMU/NX18kHrgrPcuQsa+PU5etv473utdaorLpklnXM7JGpGMv304QN+MmRxLpNpNpLJwVJPKxvwc32ZTgEwoQa+yTnm0Jsj1p57O7Tf/t6PXEW4hyv0QnPTvz9X9YFqhbC/o7tXVr338shV9LWK37iUr32Ab05amy27Sj2lfAU/l11sdxYXiBtOs3WO3UOsCsO09NvDDdWsZZ3MjgO9VtC/eeml1pxIVIz14V8jAHxiZfPSAb98cq+z1+sDxNFUevAdoUO12t9cDuEebtJ/h06F+4Lh4yesn1N/7qhgkw7gK1sHXtkpzbMiE5hEQ3KGoDY6wGhnqFbbHLQth3APN1Rz5kJlP/+LkQn52ofP+R+ArzrLPaFkwNcmfvMuJQAmxKBZbXTd4EM2hmoZqIWbtC3HzXBfoL+G/lpR0Pea+39eACaVymf0SZWu4J+keg+UwpBtbR579gVbffe6CpNwDzfocLfTbTml6K9V7fBukLAuE/BbXckW+jItOtlOAVBSI206VdFgtXXvq2Wfd/PSebKgnQspuMPu5iYnPdS103r1Ksz6CfiAv06cmF3q4dIBnwFboKz6sxsFlVv7xM/KPufKVJu1gQRwg+65tzPc7TR91Wrr8+Fu1RnsPUgfPuAfQxJGDRX8HP33QDnN518oqIwGq3KtOdp3f+vVZRcFAFX7ex+HXvXVq7BX8Qd7DgoAnxjGolIPTxrwGbAF7KEPv3J2gtWnl86j7x6u2dfbZ2v+wy26PjPsVXzWZQK+KjloO3kFnwFbwBY26VTGTvV+WapNVsydJYBbtr3kf/XZzgxKkI0deAXAP5MP2pZo0WHAFrCjqZ0WnUrYqd6vpjUHLgvCJhut4od5o85gz+v04QN+KjFoO3nATyRK9vYAGEMF3z471ftOs3JPaw7c1D0w5Gt7TrEd6R4JKw339OEDvil5ou3kAZ8BW8CWKWc1sCrTpm0vHyj7nM8snSeAmw74sDlnMvt7wr0Tf7D3dQHgm87JHpg84Bv04AN2ndtOv3g5uvd+X5kwQ/UeXugeGJSgOBSQVxKq1bu//EnUAFwz6aDthAE/15fpFAC2NZ9PwC/HzsYQqvfwwkiA1lNqH/6hN4clrLQPH4CPTkzccTNxBd8YnXTtDoAzNVPBL4vqPYLi0NFgVc37jh6TsKIPH/BZYnTCjpuJA37O6BQAtjW3sUmnVisu6ZCw0AOKtOoa5sorgiPsB171db8kAHxhmJl9wqU49RM+vS6xSHICwCY97EqHbVkZNzndbZ+eZLhRT61d0BbcbUT7evpkR7rXWmmo1d/xLR4N06bIZee3yLLZbTK/rdX670FwNUydIkEyfPy4hFn/ay/Ku6/5sADwgWGkJvrwxAE/K83mNQGACrRcfIn07uNkx8lct3COtSZzoqHCVQHde6+/3yf2vjLphUmBBv4dB3qtm9J2o+vN/97UjCZB8EwPWMCfeU6jhFnfa1TwAd8YNiv41jRulg06QKV00JaAP7lGM1Stv/791kFXGpzVgvYWuXnJPOs+SLRi/9D2Z6vela7/fXrToH/z0nlU9AOGWQ9n6SuXw5l+zgQB/GFt0jGSydPWg51ZwT9phvuEAKhQ60WXyAs/FpSgwerOzqXWLageMy9AHtv5ojhBQ7629ejJvNqihGAIWsU8dV74X+np2b+LNh3AL2ObdHYXf+jMKM8GHaAqbNIJv4e373Qs3BfoqwD3//Dn1oUDgiFI8x76ylbjtGC1DFVjqJdNOoBvJtikc2bAzxm05wBV0CHbJkJ+aG18+jnZ9pJ7IUUvHAj5waCvJAWlbSrIw+WVoA8f8M2Em3TODPiJxITN+gDKa519iSB8NHhv3fuquE1D/raXDgj8d2VAWqaunN0uUTCS6bf68AH4IJE4o89vggr+xCdiASivuY0KftjoVh+n23JK2fT03gk3CcFby1LBCNaXRaSCr6jiA77pHP+BCXrw2aADVKt9wRWCcFn7xM/ES8PHT8jDXTsF/tLWGL+3N+nvIUobfejDB3xzxvzsaQE/l8mkBEDVtA+/MTlDEA665abPh2q6btbZuvcVgb90hamvv/57/P31naabdAD4ojnXe3qGP72Cf5L2HKBWLbMvFYTD3/s49KptQcPjTsSFt/ys4lu/doTac5T24XOaN+CTs+pOm6E9PeDnsrTnADVqvYiAHwZ+Ve8LtFWn62UGbv125/Kl0uDDybZBPguiFn2veTfPAqDI6PFk8bunB3yDCj5QKz3wCsH3i3SP+G1HulfgL+2B97pVR3+9qJ6my6At4IszVmWeHvATiQ4BUJOGZAt9+CHwTADCtfbi6w3+un7hxZ6FfF3PefPS6L7K10/AB/wxblXmuBYdKviAE+jDD7Z9vX0SFPt6gvN7iTMN3SvmulvjSs1oslqComyw9yB9+IAfcqdvwaRFB3BBE/vwAy3dPyRBsa+HCn5Q3NG5xLVKvg7zrr/+/dI4zft+f68N9rAuE/DcuAx/KuDnMhndodksAGrWejF9+EGWHghOwA/S7wVjlfw7OpfKTAd75K9bOCc24V6xLhPwRXM+y1vqix5ICQBH6Im2uhOfl6qD6dDR4Py96DYdXZcZl/AXBivmzrJOmNU1qrptqVrakrP66st9P1DLaxx4BfjkhJXld+ub7wT8k2b1PiEAHNJiVvF791HJQnl95gVH47QmQXDolhtdZfmZpfOsoP/MgV7b5xZooL/usjmyLNUmcTTY87pV3NAiBwAPTanTQaJxAd/agU/CB5zSmrqUgA9btIqPYCoEfWVtPerpk+6BIRnJv/JSeM7M6Q0yu6VZruxoi/2rMRrutQ+fM0EAj504Mbvw5jsB36D/HnBSc/uFAiA6onj6rFsGe18n4APeMsz/nVoF9k7JPpFYJAAco9/ceIk6mPw4uRSIk979zwoAjxXtwn8n4FPBBxxHFT+YZgbsFNFGLjgQMdqHD8BjRedZFTfdpwSAozjwKpi0XzpIWgP2+wFqVejDB+AhY6KAzym2gONaL2IffhDNb2+VoJg9o4kVmYikvu6XBICnUoU3rIBfvBgfgHOa2znRNog0VAelD5/qPaKKffiA9wqZvlDBTwkAx+mQLVX8YFpxSTAuvq6c3S5AFPWwJhjw3ltSFPBPMmALuKWpjSp+EC1LBSNYX8baRUSU9uEPZ/oFgIfqx4r2YwHfGE0JAFewCzqYrJ3m7f6G6865s6xDkoCo6nuNPnzAU/lMPxbwc0ZKALiCFp3gunnpPPHTiks6JA5GToxaN8RPf/eLAsBDWcPqyqkXAK7SPvym9lkyxMq4wClU8ff1eN9GoNX7KJ2K+vPXD1u3YydH5Vg+zB8rCva/t3iWXHXheYJ4oYIPeOrUabb5Fh2GbAE3tc6mih9Uq66+XPzwGZ9fPXDar4eOya8Gjlr3AyPHrVtx1V7fR/yMZPqtXnwAHsmfZpvIvxOP14kBnzQzaBtYujLT65CvrUFR672f0TC15ONa2Uc8vcE2HcA7uVxS7xICwHXtC64QBNf1Cy+W68ybF65MtZkBP3qD12dPqSv5OBX8+GIfPuAlwyraF3rwUwLANdqH35icIcOZgdM+fujNYdnfO2DdH3pzREbePiGHjpr3x0/IUfOm748306z86iFNjflbqqXJ/FijVRFOncepqNVabVbxR94+KdtePiBuSZmvFty5fKlE0bvOPbvk428cOSaIp3768AHvGFI0ZJtjDz7gtrMvuFh27HtRdqR7JT0wJN2HhyYM8OXohUCxHQd6T3tfQ6TeLmtvkfltrdYFAey5o3OJNEyrl617XxWn6TDvPR++KrIXYOUq+GzRia9Bs4Kvffha6ADgutO26BDwARcMDg3J5ke/I1t+8APZ/fxe63236cWD3rpeHntZXCv7uq1F+74J++VpJb91eqM8tvMF65UUJ1y3cI758y6UKNMefA35xyYJ8vpxbdMp16uPaOp77UVpn79EALhuLODnMpmUZAWAg7qefFLW33+fdD31pPitz6z4d7150Nq5TsC3R3vyfzvVJn9vhvzChVI1tGp/85J5vh+o5ZUZZ0+VX5+YvBVHt+zMaGBVZhzpukwCPuCNXG8mxR58wCGFav2Gbz4i6YPBGiqbma/iwz595ePOzqXWOksN+s8c6JVhmy1VcQv2BRc0nS2/LtFr/2v68GOLQVvAW/VyUlLs0gFqs8kM9lqxD1qwL5hPuK9aIeirfb39sq+nT7oHhqz2HX11RAee9TkzpzfI7JZmubKjLbaDzheee7b8osTjuiMf8aQVfPrwAY/UCxV8oBbainP3//EV2b13rwSZtuegdtbJt1wsTerdM6aXfFwr+NqLX24gF9E02HNQWi+K3opYIIgSYoymBEBFtB3n7q98RVbceEPgwz3tOfBKYdB2MhruX6dNJ7b6WJcJeMPM9lTwgQpp1X71H9zhSDuOtnK0Tm+w1lpqe4fute8w3y7suB/f6qE94MPaGnJ0bFWmbss5dGRY0ofHNudM1CNOew68ouFe9+HrMO1kftV/VOaWqfQjmvq7XzT//0YB4L56yRkpMQSADQ8+8ois+eM/kmppYNcwvyzVbgXv2ebblf54vRW24YyvzGtPuPaH70j3yP7efmtnPu058NLcluklA/5zvxmS6y45XxA/gz2vCwDXGZrtqeADNmlLzoZv/pVUQ7eprJjb4foApg576m1Zqs16X8N+pRcRQC3s9OGzDz+edMhW9+HThw+4TwM+h1wBJWi//cd/73MV77TXIH/dZXPMYD/LCt1+INzDaxrwSx14pX7++mGq+DE12Ps6AR9wX1PCLOQT8IFJaLjXQdpKwr0Gez019i9/9z+Y95f6Fu4Bv1z1rtKHWW3r7hPEU/9rLwoAlyUSTbToACVo5b6SLTnainPn8qWEesTaoramkiFeq/svDzBsG0ds0gG8YVbwE7yGD0xAe+7tVu61an/PR66S9de/n3CP2Cu06ZTyg5d+I4gf7cPXffgAXJTLJWnRASaw/r77bA/U6lac//GJa08NtgIQufai1pKP66adl0ts20F09XVTxQfcZTQlBMBpdM/9uvv/zNZzr1s4R/7HJ6+lag+Ms2J2a9nnfHffG4L4Geqlgg+4jYAPFNHDq/QQKzt0kHb11QsFwJm0RafsysyhY/KT1xi4jZuefbsEgLt0yDYlACzr7r/P1gm1Gu51Q44bDr05LCPH9cTak6d9vHX62TLznEYBwkJXYW7491dKPker+O9qOpuB2xjRPvzhTL80JjllG3CFIRx0BRRs2bpVNj/6nbLP07Ycp8L98Nsn5JkDvfJ8T9+pk2fL0Z7/mdMbZNnsNpnf1nrqVFsgaLSCf/n5TdbptaX8P890yx994BIOv4oR3abTuJSAD7jFyB3OdEuOKj4w+4pFZav31kDtJ6+VWu0zA/1jO1+UfWaor5V1cm1Hm3XhQdhH0Oiptf/XT18qefCV0paeTy24QK668DxB9HUsvUbe86nbBIAruqngA6ZNZuW+XLjX8HzvR66SWnS9fFD+fucL0mejUm+X/lxbn3/Vut3ZuUQ653YIEBRalb9u7vnyj2UGavUC4G93H7ROuf29xbOo5kcc+/ABdzFkC5jW339f2ed8eum8qrflaOvN2u//TB7q2ulouB9vQVv5zSWA11Zc1Fp24LZA12d+9cf7ZSt78iNtJNNv9eIDcEeC9hzEnZ3qfefcWbLCvFVj695X5L/+008caccpRX+PrOtEUGlV/ryz7Vflf/Dybwj5EfcG23QAt6So4CP27FTvP2NW76ux8ennzNteGXn7hLhtxSW05iC4tOXmv1w5u+wJt8UI+dHGPnzAPQR8xNruvXttVe+rqYw/vH2nWb1/VbywoK3FugFBpusw11w9p+KQz4m30dRPHz7gGgI+Ym3DNx8p+5xqqvca7re9VF11qnHaFGtbz4L2llM3fV8/PplOqvcICQ35uhKzknadv9tNpTeKBs0KPn34gDvYooNY2/7UkyUfr6Z6/9jOF6oO97PNIP/nJdZw6oBu98CQ7Ej3nNqbr9t9qp0PAPyg7Tpr3jvHqs7r1pxydNWmVvE5DCt6+l57UdrnLxEAziLgI7a6nnyybHvO9QvnSEU/58sHrf321dLwrn37q6++fMLH9WLD2nufarPe18HdYQ/6+wGnacjXwduPzh077fbwseMln7/ttT4CfgTpukwCPuA8WnQQW+Wq91oZ19YYu7Sarjvua6V9+3Y37mjffSHsA2GkQf+/f2h+2TWav6IPP5IYtAXcQcBHbHU99VTJx6+sMDg/5uABVhv//TkB4kSr+aXoQVjaqoNo0Qo+ffiA8wj4iK2uMhX8Zal2sf1zvXzQupVz89J5sv6G95d9XnpgyNqfD8SFVvLLnV577OSoIHoGe6jiA04j4COWdD1mKY1Tp1S0dtJOa46+InDz0kutn3fVJD32xbSXn/56xEm5zTojJwj4UdTHukzAcQR8xNKB10tXjCrpvdfKfbnWHO3nv3P50lPvX7/wYmv9ZSnDx0/I1uep4iM+fn3kWMnHGyrYn4/w6O+ufjEBgIkR8BFL5Sr4qRb7Ad9O9X799e8/Y4+9Bv6GqVNK/jgduKWKjzjQIdpjZSr07zr3bEH0DPa8LgCcRcBHLO16/vmSj8+cbm/3/Y4DPWWr95Pt0tePaSW/FKr4iIty+/AJ99GlQ7a6Dx+Acwj4iKWhoaGSj6damsUOOwdalToJ97qFc2xV8YEoe7n/aNmA/+4WduBH2WAvVXzASQkxJC1AzJQ74KqxTOhWuvf+mXRvyeeUOwlXfx07VXy7e/GBsNHVl3+3p/yF8lUXnieIrn4q+ICT0lTwEUuDR0pX8Bumlj/keb+N0F2qel9gp4r/2C9rP0ALCBoN9w8+/UrZ/fZ6CBYtOtHGJh3AWQR8xNJgmRadmec0Sjm/SPeUfFzXYZaq3hfYqeJrBZ9hW0SJ3XCvqN5Hn/bhD2d4pRJwCgEfqNK9H7nKOrTqussuttZgjtd5SYfdn8qq4pejA71AFGx7rU/+7Kcv2Q73BPx4oIoPOKd8HwKASWmVXm+r33u5tU1nx4Fe2WFW9vf19MuyjjbbP491sFZ7i/XjJqOPrZhr/6IBCBI9pOq53wzJD17+ja1gr/Tgq4/OPV8QD0O9OotxjQConQb8tHlLCYCaaDuOVvP1pu004/fel6MXBKUCfrmBXiBoNNT/euiYPPf/DckvXj9c8Um0n7rsApnRMFUQD/1U8AFn5CRNBR+x1NzUVLIPv5qAXqyaH6stPRufnvwALt2mc+jNYVvzAYBXNMDv+c07n0tanT92clTeOHLMdqV+Ilq5X3S+/QPnEH704APOIeAjlprPLRPwjx+vKeBXQ9t0tJf/UImDs3TYloCPIPm1GeS17cZJGu6vu4TWnLjRQdvBnoPS3D5LANQmYZbxBwXAaUaOnxQ/XJkq3befHii9/Qfw2rEK225KOXtKnfze4lmE+xjjwCvACbkhM+BnSQyIndSs0hWiUlV0N82eUfoE3b4j/vy+gMmMOBTwLzj3bPmjD1zCxpyYGxu0BVATw8jQooNYSs26UOSpyR/ve3NY/NAxo3TPcfdhrscRLVq1v/aiVrblwDJCHz7giHqrRccQIFZSF5ap4B/1p1I+s8zBWH1vUsFHsAwcq26QthDsO2e3SoP5NqBo0QEckM0OaQWfHnzETkeZFh2/WmF00LacWjf8AH5694zpMrdlOsEeE9IKvg7bTjmr/CngACY1RIsOYmnxZQtLPu5nK0y5TTp+bPgBJnO4zCpMrdRbod68XX5+E3vtUdbw4X426QA1qhcjlxYgZsoN2WorDJVyoDxts9EAX1AI8O8692w5z3ybKj0qpW06BHygajnN9lTwEUt60JX24adfn3xjQ9qs4i9oaxGvtZap4PcdPcYufASGVuUv50AqOIhBW6B2CcnVpQWIoUULS7fp7OvpEwCAt0YGCfhATcxsnxAgplZcc03Jx/f1+PNNptymHDuDuAAQVtqDD6A2CamXtAAxVLaC39tv9eEHTcNUOusARNfI4IAAqMFJoYKP+NJNOtqLX8qOAz3iNT3sakF7i6TM+4mGfBunsoUEQHTRgw/Urt5IJtO5gYwAcaPhXkN+11NPTvqcrpcOyoq5HeKlez9y1Wnv66sIevDWyPETbPYBEAvDZshvTHq/5ACIAqMteaqCz2FXiKWbPvrRko+nB4Z8b9PRQD9bq/ptLbIs1SYAEHUnjnFqN1AlK9OPBXyDgI94WnnLZ0s+PmxWzbtePiAAAO+wSQeoWlHAzxLwEU/aptN5zftKPueJ518VAIB3jh87JgCqkBtbnlOo4KcFiKlybTq6tlI36gAAvHHiLVp0gFqMBfxcdkiAmNI2nXLbdDb++3MCAPAGPfhAlYziCn6OFh3El4b7Nf/l9pLP0WHbrXtfEQCA++jBB6qUzR7Uu0LATwsQY3fd/oWyz3ls54uBPPgKAACg2FjAT+So4CPWtIq/8pZbSj5HN+o83LVTAADuGj5MBR+oQk6MXFrfyFfw69ICxNy6e/7Qxsm2vbTqAACAYMpn+rGAX0+LDpCaNatsL77SVh3tyQcAuOPkW6zJBKqSK96Dz0m2gEV78TXol6KtOvf98Ody6E22PACAG46zJhOozpSiLTpGMknAB2SsF3/jQw+XfZ7uxl/7xM8I+QAAIDAKmT7xzkdo0wGUnmy75vbyrTqEfAAAECDpwhuJiT4IxN3ae/6wbKuO0pD/5e/+RHakewUAAMA3uYkCfjZ7QABYtFVn2+PfL7tVR2lP/v0//Lk8tvMFAQAA8Efu1AaQdwI+p9kCp9EK/vf+9u9sP1+363zh0X9lww4AAPBeLren8GZxwE8LgNNoP76dodsCbdn5r9/9iTzUtZPefAAA4JVccbG+/tSHE2MnXwE43apbPmvdr77zDts/puvlg9atc+4sWXFJhyxoaxEA8TL89gnzFb1BSR8eku7+Idnf2y9Hj5+QEfPjauY5DdI6vUFSM5pk2ex2vk4AqI2R2H3qzcIbuUxmsWRllwCY0JYfbLVC/uBQ5S04reY38usXXixXdrRb39S9ogHjmQO95q/bJo3TpggA91hhfuCIGeYHZZ8Z5itt19OvE59ZeqnMb2v19OtEEDUkW+Q/3nO/ALAtJ6OyxJiZtEJ+ccBvNgN+RgBMKn3woKy48QbrvlpardNK3YL2Vuttp7+RH3pz2Ar1+97ol+d/029VC1dfvVCuWzhHADhDP8/29w5YYV6DfLdZpS9U5mtVCPqdczskrgj4QMVykpDzCnvwjdMeGchowG8WAJPScH/3H3/Fqug7ocGsrM8+r2ks7J+rL9k3WtX2xqn10jB1inkB0HjGj9HK/PDx49J39JjV968hQ++1FWCi3n+9oFh/w/sFQGX0c63v6PBplflDR0ccC/OlaIvf6qsvj+WrbwR8oGIZY0byvMI7pwf8/swu8yOLBUBZGx75K1l//31Vtez44X988lrrIgLAxMb3zGtl3u+tWPo5u/7698cu5LfMvkSW/+d7BYBNOdlltCSXFN6tP/3R7B6RBAEfsGHN7V+Qmz56nay7/89k86OPStDtSPcQ8AE5sypf6tUvv+kFhp6YHceQD6ASudPOszo94Ot6HUMA2KS78jc99JfWph0dwK2lN99tW/e+KjcvnSdAXIQpyJeiIX/T08/JHZ1LBQAmlDt9G+bpAd/I7RYAFdN9+d279simR79jVfO7nnpSgkZP3NX+YVbxIWp04FVDvIb5Q0dGQhvkS9n28kG5MtUuy1JtEgeN5/F1CqiA7sAvUcEXTrMFaqGVfL1pJV9bd7Y/9VSgqvqP/fIFhm0DRINpYVBateY3KrVOP9u6n2jAOo4KlfhDbx6LdIgvZ6NZxdcLdFp1AJyhaAe+Oj3g19XtlqwAqFGhdUfpth29+Rn2F7S3mJW/dul89yyBv/b19FnV2B0Hem1vYtFVqrpRqXHqWLArXAjMPHU/diFgPScf/gpbmIofDxq9wFGFixzdDKVhXkO7vt93dOS0g6GCrrm5WVKplCxfvlwWL14snZ2dsmbNGnn88cfFCfpn0vXygVisvG1opoIPVOSkpIvfPS3gG8lkOjeQ0So+qzIBh+ggrt7U7uf3yvYnn5SufNjX992gwW++Wem7rL2VQ64CQk82/vudL5yq1lfijCp1r1St+NyF4ouGAn2/waF/L8X/rdoiNnJ8LKhHoeo+PswXbuMNObxla0e6NxYBf8rZ8T7oC6iU0ZZMF79ff+YzZFByBHzADYsvW2jd7rr9C9b7umJTQ77e79m7V9Kvv36qyn/q/vUzq/7NTU3SfG6TyMiQVc2dOd28ndsoqfw+fQJ9cGiYfbhrpzX/EARxamlxioZ5De+LFi06VZnXcG9HOp0WJ1l7+M1XPqLevjXlLAI+YFtOzpihPTPgZ7PbxUikBIDrNKjrgK4qVPntOvHWiPzz+jsFwdWdX3EYlhYTiBXcC9X4QqC3G+Yn4nTAV8/EoIrfmJwhAOw6fUWmOjPgsyoTCAWtcLVedIn0vfaSIHi0leL+H/5cEEzjq/KFIK8fd4ob4V51D4TjcL1aUMEHKpDL7Rn/oQladFiVCYRFU9ssAn4AaRvMQ9t3CvynoV1vGuRnz559KtA7GeQn41bA74tBmxVrMgHbclI/Zdf4D54Z8NmkA4RG60WXyitP/UgQHBruacvxVmHgtVCF7+jocKUiXymnB2wLDh2NfsCngg9U4OToGV9s6id4WloAhIK26CBYHqtyUw5KK1TiC7dCiC+E+yDavZsXxKvR3MY6X6Ai9TaGbI1kcjB3OJM2C/4pARBoWuVqap8lQz3BOUwrzg5Ze8qd+btYtWqVbNy4UQYHB61bod2j8L5Wh/VeFR4rbgkZ//wgKgTzQqW9ENY1vBfeDnKAL8etP/eoX0DWn3W2ALApJ7s1u4//cP1kTzb/PyUAAq919iUE/IDQ6r1TtmzZYgX84uDrhOKLgInCv5MXBIXf+/i3wxrYK0UFvzr03wMVmfAL9sQBP5s9IImEAAg+Xs4ODt2c4xQN2RoQJzo8qRZxCddB4OYrJ1Hehc8ptkAFctk9E3144hTPJh0gNNoXXCHw344DPadOanXK9u3bBeHl1hadqGtuv1AA2KIbdLomemDigK+bdACEgvbhcyiM//b1OH9SrbbpIJzcnn3oO3pMoooKPlCBCTboqMn6cNICIDRaZl8q8FfahcOH6OEOL7f/7oYjvIaVHnzAPqM12TXRxycM+NY0rkHIB8JC9+HDX24ELq0Ad3V1CcJnz5494qbh48clinSmiB34gE05mbSSMPkkbTZL8ycQEuzD95/T/fcF9OGH04YNG8RNUT1IjRWZQCVyByZ7pETAF14bBkKiIdlC1SuiqOCHz6ZNm1wfsB0+Hs2A39zOVjDAppxkc5NWgCYP+IlcWgCERvt8tun4qWHqFHGD9nIH9aAqTGz9+vVSq3L/ng5F9LArXo0EKmAkqmjRqavrEgCh0cQ+fF+1nuPOKyiFffgIBw33TlTvRyJaoS+HDTpABeqr6MFn0BYIl9aLqXz5abpLFXz1+OOPC4JPw/26devEC30RrOBrmyEtOoBtaSurT6L0cbU5+vCBsGD7RHRRwQ82fZXl7rvv9izcqyhW+JvaOOAKsC2XK7mqq3TAH2WTDhAmLVTxfeNWi47SQVtCfjDp380VV1zh+tac8Y5GMOBTvQcqUFPAZ9AWCJXWFPvw/dLoYouOevDBBwX+K5xNoO04K1assG5ub8yZSBTXZDJgC9iWM0N6V6kn1Jd60Bq0zQqAkGhu5yVuvzROmypu0tWLK1eulM7OToF/mpubrb+DVColixYtko6ODuusAq9DfhTXZLIoAKhAfek2+pIVfAZtgXDRE23pw/dHw7R6cdvq1atZmRkQGvBvuukm68Kru7tb1q5da4V/Lx16c1iiQs/yaEyyQQewqeSArSrdoqM40RYIFar4/nC7RUdplVhbQgj5waMDtrt27bKCPyrXzIAtYF+Z/ntlI+CzSQcIk5bZ9OH7Yeb0RvGCDtvqUKcffd8oTcO9hvzFixeLF/qOHpOoaF+wRADYUvIE24LyAb/EKVkAgodBtejTcK8h34kTU+EsbdPZtm2bJ5X84QgN2jadTwUfsM1GNi8f8Oup4ANhoqvm6MP3nptrMieibTraFjJ79myrN3/Lli1U9QNCQ/7GjRvFbcPHj0sUaP89KzIB+4zWZFe555QN+FYTPwdeAaExdhok1TA/NHjQhz+ehnod9NQ1mnqvKxzp0fefbtrRrUduisqqTF51BCqQky47T7O39iGX3W6+HOBNUyGAmrXNWyJ9r70k8Nb0aVM8P2FUW0G0Wsz6zOBZs2aNbN68WdwSlVWZuv0LgE25bNkBW1W+RUcZOSr4QIi0cqKtL7yu4N91113WUCfhPph02NbNgduoBPyW2Xy9AmzKSf2ULjtPtBfw9cArAKHR3EYfvh8ap3kX8HXv+oYNGzzfvY7KuHnxFYUhW/1axf57oBKjzlXwjWQyzYFXQLh0LL1G4K2Z0725qNJwrwO2CL4bb7xR3BKFHvwW+u+BSqStTG6DvQq+4sArIFTa518hiB7tuSfch4e26Lj1Kkvf0REJO75OARWwccBVQQUBn006QJiwLtN7XqzKJNyHi4Z7t/rwj4a8B1/XYzJgC9iWk7r6LXafbD/gT0nY/kkB+I91md5rdHnIVqv3bq9ehPMYgp4Y6zGBCp0Ydb6Cn+/5YbkyECIdS94n8E7jtKniJl27iPBZvny5uGG6D+cuOKljCXNCQAXSxsyk7W4a+xV8lcs+LgBCo33BFbTpRMiiRYsE4aMVfDf68BtCHPBpzwEqVEH/vaos4NOHD4QKbTreaj3nbHGTmzvV4S43/u5SLU0SVrTnABWpqP9eVRbw6cMHQoc2He/MnN4obtEKMDvvw+umm24Spy1oa5Wwoj0HqFAF/feqooBPHz4QPrTpRIMO2CK8nO7D14HuZak2CSPac4CKVdR/r+qlUtqHbyRY4wCEhIZ73TV94NmnBO5yc01mXKr3g4OD1q3U206Y6IKp+GNOX1AV9uE79d9wZUjDvaI9B6hYl1So8oAvuS7z/wj4QIjoqbYE/HALc/99Op22gm3h/sCBA6feLny88LwgKm6PmugioHCvz2lqajrj+YX3tU1n06ZN4oTPLJ0nYTXvg+6d7gtEUE4SdRUfNlt5wK+r2yJZ2SgAQkNfDtdK/om3wn/yZdDNNKv4h950/s85yBX8QljfvXv3qfBefAu74lcPgvDf0zl3lieHqrmhuW2WNCZbBEAlRt0P+EYyOZg7nEmb1xMpARAac675sLzwYzbdhpXfKzILlXYN8XobGhqy7gvhHt7QC8gwV+/nvO/DAqACOdmdn4GtSBUtOqbR7OOSSNwlAEJDh20J+O5rDXkFv1CJ37Nnj3R3d1v3UanEh13jtCmy/vr3h7Z6r3QeCEAFjOpW1FcX8MVal0nAB0JEXxrX4ba+114SuGfm9AbZJ85zeuhzfEVeg7zex6kar4F5+O0TEhZ3LF8a6nCvs0Bs9AIqkpOs/I1UobqAX29eTWStdZksZQZCRIfb+l67X+Ce1Ax3Dh+qJeAXgnwhxBdaa+IuLOG+ULl369+WV+a8l/YcoGL1Hlbw8334u83rik4BEBoM27pvWapdNj69V5xUSbgvBPi4VuWjZkF7i9wZ8sq90lcQm9tnCYAK5KRLM7dUocoWHdPJ7ONSl+gUAKHCsK27NIhpKNvX0y9OmSzgF4f57du3R2bgdWY+zDZMnWJVrwtapzsTcoePn5CR46dX77WaX/wxN+YoKqF/Bp9eOk9WzI1GKGa4FqhYTrLZf5YqVR/wpyR0XeYDAiBU3m1+o33lqR9RxXfRso42RwO+DthqeO/q6gplmNeQrievdsxosu41vDZOm2q9rRdEheA+M6BV6uKw33d07O3iC4JDbw6f9rzxz9ELCjvtQPrndKX5b2fF3A7rIjEq9OTajiXXCIBKJbqkSobUIHc40826TCB8fvkP3+LgKxdpoPvyd3/iexXYSxrONcDrkPHMcxut0K7hXd8vrsLHmYZ8/bdRuADoy//7KFzkBPUCp1aLrv9d85XDjwiAinQbM5IXSZWqr+Ar1mUCocTJtu7SyvSqqy+X+3/4c4mSiUK8Dn5GNZg6zXolY9qUd/682iQW2uYvEQAV65Ia1BbwWZcJhJIO27Iy013LUmOtFttePiBhUxzkZ7c0n3qbSjwqpcUETq4FKlb1esyC2gI+6zKB0GJlpvtWvXehdA8MSnpgSIKIIA+36dcZABUbNFqTXVKDmgI+6zKB8KKK7z5t1Vl/w/tl7fd/5nvI11YavWmQT5039jZBHm6ieg9UKZfbLjWqsUXHlB3dLEZdpwAIHar47iuE/I3//px0vXxQ3KahXXvjF7S1UJWHr6jeA1XJSV39FqlR7QG/rk7XZW4UAKFDFd8bGvLv7FwqC9pb5R92vuDYdh0N7VZl/ryxyvx8M9Qz8IogoHoP1GK05gp+TWsyC3KHM9to0wHCqe+1F+Wnf00V3yu6GvH53v6qgr6G+eLK/GzzBgTR79xzPwEfqEZOthktyWulRrVX8BWn2gKhRRXfW7rzfMU5s6wTSveZQX9Hd4+kDw9Zwb8Q+AttNvTMI4yo3gNVy0ld3WZxgDMV/EwmJVnpFgChRBUfgFOo3gNVy0lCLjKSybTUKCEOsH4jRm0L+QH4p1DFB4BaUL0HapCT3U6Ee+VIwLeMZmseCADgHzZeAKgVX0eAquUkm63pcKtizgX8+sQmARBaVPEB1ELDPdV7oAZTEjWvxyxwLODTpgOE33s+dZsAQKUazGCv7TkAquRge45yroKvaNMBQk2/SfMSO4BKzf8Q1XugBo625yhnAz5tOkDovft9H5YpZ3FYEgB7rOr9Eqr3QE0cbM9RjgZ82nSA8NNwP+9DVPEB2HP15+4UADVwuD1HOVvBV7TpAKH37ms+zMAtgLK07765fZYAqJrj7TnK+YBPmw4QCfTiAyiFmR3AIQ635yjHAz5tOkA06NrMOWYlHwAmwmAt4ICcdDndnqOcr+Crk9nHBUDojX0DnyEAUIzBWsAROamr2ywucCfgT6FNB4gCHbhdym58AON84D/dIwCcMOrK7KorAd98qWGQNh0gGrRVp33+FQIAihNrAYe41J6j3Kngq+yoKy85APDeez59G7vxAVitOfNZows4wbX2HOVewK+r04ngQQEQehru3/PpWwVAvNGaAzjGzMijrs2suhbwrTadbJYqPhAR7fOXMFQHxBitOYCjtlhZ2SXuVfDHfnrH93oC8M+iG25hqw4QQ7TmAI7KSVYcP9yqmKsB32hNdgltOkBksFUHiB/9vKc1B3BUOp+RXeNyBd+UzT4oACKDA7CAeBl75Y7WHMAxWffPi3I/4NcnNgiASFl0/S3S3H6hAIg2vZhn9gZwVM7Mxq4Xv10P+OzEB6Lp6s/9AaszgQij7x5wgYu774u5X8FX7MQHIke/+bM6E4imQt89F/GAo1zdfV/Mm4DPTnwgknR1Jv34QPTM+xArMQEXpI3kudEJ+OzEB6JL+/FbL7pEAESDXrS/mwt3wA1d4hFvKvhjvxQ78YGIuvr3/oD9+EAE6PC8XrQDcFzOTN1fE494FvCtfZ8M2wKRpH26VzF0C4SaztXo5zEAF3g0XFvgYQXfdNL9vZ8A/NHcPsus/P2uAAifwlAtffeAKzwbri3wNuBPSWwShm2ByOpY+j6Z90HW6gFhw1At4CrPhmsLPA34+WFbTrYFIkz3ZnMwDhAeelHOUC3gqi7xmLcVfFXPsC0Qde/59G2cdAuEgG7M4TArwFWeDtcWeB7wzSr+boZtgej7wH+6l806QIC1zL6EjTmA2zweri3wvoKvRmW9AIi0saE9Qj4QRLox572fZ2MO4DLPh2sLDPFJbiCTMe+aBUCkjWT65ad/fZ8MZwYEgP803LMxB/BEtzEjeZH4wJ8KvmLYFoiFwm5tduQD/iPcA57JSaLOt44V/wJ+fWKDsDITiAXdka+hgpAP+IdwD3htdLv4xLeAn1+Z6UtfEgDvaci/+vfuFADe4yArwHOb/BiuLfCvgj/2y7MyE4iR1osulfd86lYB4J13Bt4J94BHfFmNWczXgG+0JrtYmQnEi552O4dDdQBPFMI951IAHvJpNWYxnyv4wspMIIZOvDUiANxFuAd8kTP/52v1Xvke8KniA/HT/9qLAsA9YwO1hHvAB2kr2/rM/wq+ygrDtkBMDPYeZCc+4KLCthzCPeA5X1djFgtGwK8THbZlZSYQA32vviQA3MEqTMBXaSN5biCK1oEI+PmVmRx8BcRAX5r2HMANhHvAV4Gp3qtgVPAVB18BsdBPBR9wXMvsS+RDX1xHuAf8k/bzYKvxAhPwqeID0df32ots0AEc1rHkGln+n+/lpGjAX76vxiwWnAq+oooPRFrfa1TvASfN++CN8p5P3yYAfOX7wVbjBSrg56v4bNQBIqq/m/57wAlarX/Pp26T+R+6UQD4blOQqvcqWBV8NVbFBxAx2ppDBR+oXWHHfcfSawSA7wJXvVeBC/jWFVCOKj4QNYM9BwVAbXS3PTvugUAJXPVe1UsQ5RKbxJCVAiAyevbvEgDVm3PNh62WHIZpgcAIZPVeBa9Fx2Qd8WtIlwCIjL5u2nOAamigv/z6W2SReSPcA4ESyOq9CmYFX43KevPyo1MAhN5Ipl+GaNEBKqb99ld/7g9oyQGCJ7DVexXYgK9V/NzhTJf5x9cpAEJtsPd1AVAZ3W+/6Aaq9kBABbZ6r4JbwVdU8YFI6Nn/rACwRwP9vA/dKO++5sMCIJACXb1XgQ74VPGBaOh/jf33gB3ainPV5/5AGpMtAiCwAl29V8Gu4Cuq+ECoaf/9cGZAAJSmp9JycBUQeIGv3qvAB3yq+EC4cbgVUJpW7Zd+8n9nkBYIh8BX71XwK/iKKj4QWm+8QP89MBmq9kCohKJ6r0IR8K0qfv/AZjESHH4FhEz/q1TwgfFaZl8ii67/LFV7IFxCUb1X4ajgq7rEOslyui0QJoO9B+XEWyMCYAwbcoDQCk31XoUm4OsVE1V8IFz6qN4Dp3QsvYbTaIHwCk31XoWngq/GqvjarNgsAAKvl/57wGrH0T771osuFQChFKrqvQpVwLeq+H0DD0oisVYABB4bdBBntOMAkRGq6r0KVwVf1Sc2mFX8u4QqPhBofRxuhZjSYD/HDPXvft+HaccBwq87bNV7FbqAb15BDVLFB4KvZ/8uAeJGg7224xDsgYjIyt8YM8JVvVfhq+ArqvhA4A31HhQgLnSAVnfaNyZbBEBkdButyXUSQqEM+FYVvz9ztxiyUQAEjq7GDHv//cmTJ6W+Ppw1EHiHYA9EVk4SdeslpEL73ctoSW7KHc7cZf7xLxYAgRKN4VpD9j/3grT+Vot5axWgGMEeiLy0kTx3s4RUuMtTo3K3JGSbAAiUnv3hX49ZX18n7+q4wAr5vz74hrxr1gUE/ZhjeBaIjVBX75UhIWdW8beZfw2dAiAw/u0b62SoJxo9+L09vXLg1bH/lmlnTZPWma3Sen6LTJs2TRAPBHsgZnLyPaMl+QkJsfA3mJ40q/h1wroOICBGMv2RCfeqrb1NMv0ZOTL0prz91ttmNf/X1k2r+ee3/5Y0Tm8URBMHVAGxlDNz5Zck5EIf8I2Zyd35tZl3CQDfRfFwq4vnXiz7975gBfyCvv+vz7o1NDZI2wXnS3JGkqHcCNAKvfbXt8+/gmAPxFPoDrWaSOhbdFQuk2mWrHQLazMB3/37331DevdF70W1I0NHrH78yWi415DfOrNFzm0+VxAuWq1PLX2ftC+4gjYcIL70UKtroxDwI1Fu4vArIDiORKg9p9i5TedKx8WzTvXjj6drNQtVfe3Vb2s3q/otSXr1A6yp7UKzUr+E3noAKiej8vUwHmo1kUhU8AtyAxmt4qcEgC8Gew/Kj7++TqLs1Zdfs0K8XXphoKs2tapP2PdfQ3KGdCx5n7RedAktOACKdZvh/iKJiGg1jGZlNWszAf/0vRq9/vvxOi7qkOGjwzIyPGLr+draozdF2PdHoVJPqAcwidCvxRwvUhV8xdpMwD8//ev7IjlkO54O244fuq2UDudq4D9vRpKefYdpu40V6hcssYZlOYwKQBkbzer9rRIh0Qv4mUzKrOTrhB8Dt4DH/nn9nXLiLXuV7bDTcL931/NW732tdED3nKZzToV9qvu1Wfqp2yS19BoBABvM6r1cFIXB2mKR2+mmf0EM3ALe63vtxdiEe6WDtHPnv7vkZh279CIhM5CxboWfW6v755qhXyv97No/k7ZJvTn0pgwNHZEm88/q/AvOP/WYnsUAALZk5WtRGawtFs2lzfWJDeZf2Eph4BbwTBxac8bTEH7x3IuswVsn6asDfW/1nRrmLVT4G/NtPQ3TG2K1c1//PHSOYfjoiDX7oLfiV07Gv+IxMkjAB2BLt9GaXCcRFMnvEGNrMzMM3AIe6u9+UeJIT7Q9OXpy0vWZTji9wv+G9TGt8lvVffOm9/p+2Cv9+t+pYV4D/GRhfiJvv336LMSJY/F5JQlA1SI3WFsssiUg84qsK3c408XALeA+bc2JYwW/oK29TUZPjsqvD7whXtEgrLdCW0+Bhn2t7uv9WWbonzpt6tj7Aan66+9ZA7sGd+u/wQznGuaPv3286nmG428dP+39wd7XBQDK2GQkz90sERXt13gNWW0GfAZuAZfFOdwXvGvWu6x7L0P+RArrOwurOcfTSn+hpWXaWVOL3h67r6urO+NCoPBYsfEbhApVdL3Q0aB+0rwfHdWK/FhwHx0drWnrUCn6CkoxevABlKGDtV+TCIt0wGfgFvCGDtgiOCG/lELl3zIkkVB4VaD4wmTYDPmsxwQwoYgO1hZLSMQZrTPWmXdpAeCavm4q+AUa8t/VcYHAW/oKQbGhXvdmIgCEWmQHa4tFPuBb9IRbAK7QdoihHsJUMQ35HRfPEnhn5Ojpg7XHjx0TABgnJ6PyCYmBWAR8HbiVbPZBAeA4+u8npoO3ukIT3nhrXH8/FXwAE9hkzEzulhiIRwVf1SfWmf8/KAAc1RfT9Zh26ArNy5csjNXOer+MH+Bl0BbAON1RH6wtFpuAr7vxzRdmaNUBHNbPgG1Juq5y4RWXTbiJBs4ZvwufVZkAilg773X5isREfCr4JqMluUUM6RIAjhjsPSjDmQFBaRru5y+cZ4V9uKOwHvTU+1TwAbwj0jvvJxKrgG8xrCo+rTqAA4Z6qJLapSFf23XOv+B8gfNGJzgka5iQDyBmrTkFsQv4+ZdnIns0MeClN154VlCZ1EUdrNF0gR6sNb5NhwFwIPZi15pTEL8KvsmYkdxAqw5Qu/5XCVDV0DWaWs2nL99Z41dlskkHiLmcdMWtNacglgHfQqsOUBM9vfbEWyOC6mg/vvbln9t0jsAZb7FJB8A7MlInt0pMxTbg06oD1GaQ/vuaWcO3l8+nZcch41dlskkHiC090OprcWzNKYhvBV9o1QFq0Uv/vWNo2XHG+B58reDzKhMQQ9qaM9PMeDEW64BvoVUHqAoDjM4a25e/UFp/q0VQnfGrMtVgD334QMzEujWnIPYBn1YdoHJ9HG7livr6Orl47sXm7SKq+VXQFp2T49Zl0qYDxErsW3MKqOALrTpApXr27xK4p/W3Wq0BXKr5lRvfh88mHSBWNsW9NaeAgF9Aqw5gW1837Tlu0wq+VvMXLrmMan4FxrfpcBgbEBuxPNBqMgT8POvlnJwV8gGUoEOLQ/Q1e6axsVGuuHKxtWmHoF/e8Lhd+INmBZ9BWyDyYnug1WQI+EWMluQWyWYfFACTYrjWH7pph7ad8sZv0lHDh9mHD0TcprgeaDUZAv549Yl15v+nBcCEevazHtMvhbYdrehzQNbE3hw6csbHaCkDIo3WnAkQ8McxX94ZlCytOsBk+tmg47vCAVls2znTyZOjZ2zSYdAWiKycmWQ/QWvOmQj4EzBak1206gBn0oODhjMDgmDQbTtazSfon278oC1tZUBEZa2VmLsFZyDgT8JonbFGDOEfDVCEoBRMBP3TjR+05URbIJK6zYLsOsGECPilGPJxYXUmcMobL9B/H2SFoD93/txY9+iPDA+f8TFOtAUiJWMm2GsFkyLgl5BfnXm3ALAcISSFwnkzklaPvob9OG7dGTl67IyPcaItEBm6EvNu+u5LI+CXYbQkN9GPD4ztE6f/PlyKt+7EqX1neIIKPsPhQERk5UFWYpZHwLeD1ZmA9L1K/31YabAvbt+JQ1V/+OjpIZ/5ESASuqVe1gvKIuDbYK3OHKUfH/HWS/99JGj7TnFVP6q9+uM36eiQ7XCGA6+AENOVmNdamQxlEfBtMmZaa5i4akRsUQGNlkJVv9Crn7qoQxoaGyQqxm/SUfwbBkIrZxZav0TfvX0E/AoYM5IbJJel7wux00f/cqRp2D//gvPl8iULI1PZH1/BV/3d/DsGQmqTWWjdILCtXlCZusQaycpy862UADHRs3+XIB6syv5ZrVZ1X0+EPTL0pmQGDlsV8YlCc1BNtCqTCj4QSt1mOfpLgooQ8CukvV+5TGaFGfI18TQLEANDvazHjKP6+nqrZ19v6u233pZhM+SHIfCfPDkqb7/9tkyb9s7moMKBV1POcq8VaffevdbtwOsHJf3665I+eNC6qfTrZ34epS6cNXY/a5Y0NzVJh3k/+8ILZdFlC633Fy9cKECMZei7rw4BvwraA5YbyGg//gMCRJwGIiqfUFrd11sh8GuFX0P+iBn2jwwdkbfMC4Aghf4jg0esVyKKvbFvl6SWXiNOGBwassL8lv/1A9mjwf75vdbHKlEI/ROFf2WFfDPsLzKDfud7r5HO973P+hgQA9p3/zVjBn331TAEVcv1DWyQROIuASJM23Oe/ttvCGBHIfRrBX3k6LD1tgb/428ftx7z0vnt50vq4o7TPjbnmg/LoutvkWoVQv2D33xEup56suJA7wQN/MvNoH/Tf/yoFfiBSMrKBqM1yWGjVSLg1yh3OLPLvMZcLEBE/fIfvyUHdj4lQK004BeCvrb76E3fHh0dtd5Wb5uPFxQ+Npnig7umTZt62se0NefcpnPl3OZzT/sxDckW+Y/33C+V6nrySatSv/nR7/gS6iejrT2d17xPbjTD/k3XXSdARHSblfuLBFUj4Ncol8mk6MdHlP3bN9bJUA89+IiOj619yHYfvgb79fffZ1Xrg64Q9lf+7i1U9hFm3fm++7SgaqzJrJH1DzBrHYIFRI4OJRLuETXah1+OBvsVH7tBVtx4QyjCvdJh3k3mKwz6e559xSLr1YbCgC8QEjkzU91KuK8dAd8BRmuyy7yjTwyRw3AtoqjUVigNxGEL9hPR/45Vd95hBf3V5j1BH6GQla/lMxVqRIuOg3L9A5vESKwUoAT9RltYo9f9+utyIL9GT/t6B48MTdjfq1szms9tOmOVXseFs06t0nNjswb994iiyfrw1993n2z45l8FqsfeSdq+s/aee2nfQTAxVOsoAr6DcplMs/ni0jaGblFMX+rf8/xesxr4lKtbN8av09OLgVp3aP/L/V+W4cyAAFHzO2bAbzSDvtIL7tV/cId176Tmc8+2bh0XnCcd7zrvtI+p9K8PW/cHzPvBN4+N3R85Jm7Trw3rzKC/8pbPChAQ2ne/hH33ziHgOyw/dLtNOOk2tjTAa+/rlh/8oKq92E7Tql01O7QHew/Kj7++ToAoWvqp26x9+A8+8oisu//PHPk8XX7VHFk07wJZPP8C+cBvz5FUPtRXQgP+nhfesML+7v1vyB7ztv0Xr4gbCPoICIZqXUDAd0GuL9Np/mPdJoiN4lAf9L7d4h3apVp7fvXkj+S5rY8KEEXNcy6Th7qeNT9nt0q1tBK/yAzzKz+5TD724YWnKvNu0JC//ef5m8OBX4P+A3/yp3LTR1mzCc/l8pX73QJHEfBdkhvIrBFOuo08bb/x88AbJ2iFf9Utt8hy816/0Rf8+999Q3ptbBsBwubQmyOy9omfSd+b1Z26a4X6TyyTz39qmauhfjLa2vNTM+Rv/scdjoZ9Dfga9Iu/DgAu0pNqv2TMTG4QOI6A7yJOuo2mQrV+06OPWi04UVKo7q/63Vvk4D99U068VV0AAoJqX0+f3PejX8jI2yekUtqC89Uv/o51HxRuhP1Vt3zWGsYl6MNVWVlvtCbXCVxBwHdZ7nBGh247BaGnwV77daO8ZaNY6zkNcv3Ci+XKjnaZeY69Q4GAINv20gF5ePuzUikdkP32/Z8NVLCfiIb9rz34L1bgLwzwVkvD/arfNYP+vfcK4LicbDNaktcKXEPAd5m1WWfspNuUIJTiFuwnsqCtRVZcMkvmt7US9hFKj+18wby9WNGP0fabL65ebt38aMWpxd98d4cV9p0I+hsfethq5QMcwlCtBwj4Hshv1tGQ3ywIDa+CvbVGz6wQpi44T5ryIaJ4+4Zfq/Qm0zl3lhn2O6zQD4RBNeFeq/XfMqv21WzCCZLHf7hXvr5xe83tO7TtwCGEe48Q8D2SO5RZLHXCxGJI6GaNu//4K46f/qhhQdfnLZ53gRUgNNhXWxnU9Xka+Pfse0PSbxy23tf1el6Ff23h+czSS6nqI9CqCfdfvet3rFuUaMD/2oZ/qSnos1YTNWJjjocI+B7K9WdWmX/iGwWBpQfdaLB3atWlhnddn9dphnm31+gVaNDXqr9+I3dzh3YxrerfvHQeQR+BUmm4D0uvfS2cCPpU81EFNuZ4jIDvsVxfZp15BbtWECiFdhw98KZWGuI//8llcqMZ6IMSFKywb1b6H//RXlcDv7bt3PyeebTvIBAqCfga7n/8nTtD35JjV609+lTzURE25niOgO8D1mcGi+6y12Pqa23H0TCvw3jLf3tO4AfytufX6jmxbWMihfadzrkdAvhlX2+/rP3+z8o+Tz93v/vIbaEbpHVCrUGfaj7KysoGM9zfLfAUAd8nrM/0n1bt1993nzVEW60gVusrZbXx/NwM/P+0w3rbSQR9+O33H/1X62CrUvp3/1+xDPcFOrejg7ga9KtBNR+TYh2mbwj4PmF9pr9qrdqHeX1eKVrF04qe3pys7DOQC79sfPo52br31ZLP0dacKPfd21XYo6+f/9VYc/sXrGp+c1OTADK2MUeHagcFniPg+yi/PnObEPI9pb32a/74j6QaUQ32E3GjjUeD/oq5s6yKPkEfXrDTpqOfz3/x3z4uGFNL245W87c9/n1adsA6TJ8R8H3GjnzvaLV+9Z13VL0hR9tw/m8zBMRlCK+YfsPXsO/UgC6tO/DK8PETsnLTEyWfo3MzP370TsE7NNxr247eqrHunj/kFNz4ItwHAAE/API78rWST8h3SS0tOfrS/Ve/+Du8hC/vvITvVFWfoA8vrH3iZ7Kvp3/Sx/XVuFd++tVY9+FPRj/PP/TZh6r6fGcAN5Yy+XDPrnufEfADgh357tFB2mrWX+o3ez3sRl++x5lq3b5RjKAPN9npw9/5xJdl0fwLBBPTz/VqhnBp2YmVnPm/TxgtyS0C3xHwAyQ3kFlj3j0gcIRuybn7K1+RTf/zO1KpqBxT74XHf7jXehnfifYdgj7csONAj9z/r78o+RztwedivjTdsvXJ279V1UX9hj/5U7nr9i8IIksPsrrbmJl8UBAIdYLAWH//fT9f9+U/NMzLrk5BTbQV5+rf+UjF/fZatf9/v75S/vSeG3i53qZLL/4tWfmpZda6UF23t+eF6ldtjhw/ITvSvVY7xYL2VmmcNkWAWk2tq5Otz5eu4P9W67ly40cWCiZ3vvlnpJ/nb719Un6x+0BFP/ZffvJjGTpyRK56z3vkrLPOEkRKzjrIambyPkFgUMEPIE67rc3uvXvl45//XMX99lTtnVHrqr1inXNnyc1L57FxBzX7/KYnrAvIyWh7jrbpwJ5qW/Ro2YmcXP6U2vWCQCHgBxSn3VZn86OPWiswtT2nErw87zwng/7NSy+V6y6bQ0UfVbvvhz+XZ8xXhyajr9jpgVewTz/Hb/vydypuz9Nwv/Ghh6XzmvcJQo1wH2AE/ADL9Q9sEiOxUmBLNcO0HWa1/p8euY3hOhc5FfTpz0ct7Aza6iYdXsGrXLUDuKzSDDUdqN1stCRXCwKJgB9whHx7qgn3utf+W3/+WXrtPeJk0F9//ftp20FFul4+KA917Sz5HDbpVE+r+FrNr7RlR0+/feBP/lQQKoT7ECDgh0DucGaX+cm0WDCh1XfcUfGmHF1/qTd4z6mgT38+KmFnk45e8K/85DJBdapt2Vl82UL53t/+HX35YZGTZ81wv1QQaAlB8BmywrxxaMQ42me/4mM3VBTutVr/4+/cSbj3kbZAfNsMUtoOoa+iVEsrsl/+7k/ksZ0vCFDO7PPKnyM4dOSYoHr6ua0nAlf69XX383tlxY03VHUQITyWk11SJx8UBB4BPwSMZHKQkH86K9yb3xAqWYOp/fa/NF+C50TaYNAw8N1v3ibffeS2qvueh4+fMAP+i/KFR/+15AAl0GrjlR4nDm3D2CukehHffI799kcN9/o1XcM+Amos3F9rZRIEHgE/JAj57zj1jWCv/W8EGuq1v5YBuuDR3eNazddAUO3fT9+bI9aWFO2xPmS+DUykYWrpLUyDVPAdo/vyf7m1sq+5+rX9iuUfkAcf+StBwBDuQ4eAHyL5kP9x8820xFQ14V6/0WhbDsO0waZ/Txr0tfpXSeWvmLbt/L5ZzadtBxOZXmbN6gEq+I5K5V81rbQVb80ff8VanIDA6DbD/ScI9+FCwA8Z8xMsbf6trZAYhvxCuK+kT7PwUjHCQ//OtPL3+RqGHWnbwURaGcj2nBZWtBWv0r583Yp2txn04btuM3Nca2UPhAoBP4TiGPKrDfcM04ZT8SAubTvwSvoNKvhu0a/FeqBgJTY88lfy8d/7XMUHF8IxhPsQI+CHVJxCfjXh/lv3f5ZwHwEa7mvtz9e2nbVP/Ey27q1sdR8AZ+lp4ZXOQm35wVZrWxobdjxHuA85An6IxSHkF7bl2P3iri8Ha7hf+Sl2WUeJNbBnBoNqL9q0mr/x6b1W2w7VfMA/epDYv33nzopCPms0PUe4jwACfsidCvkR3K5TTbjXYVrCfTTp368GfK3oV9ufr0Ffh3Bp2wH8Uxi+Xf7b9lcWV/NKLqqg23ISsoRwH34E/AiwPhEjuEKzkm05hXDPMfPRV+jPd6Jtp+vlAwIUsGnLO9bX7EfvtNp27GJXvstYhRkpBPyIiNqe/NV33EG4R0nFazWrodX8h7qelbXf/xnVfFiqXc+K6ungbSWfw1bI/xgh33GE+8gh4EdIVEK+7j/e9D+/Y+u5hHvU2razr7ef3fkxMfz2CUHwVLphR9s39UCszY/a+z6BMgj3kUTAjxj9BDXOS14huexmCSEN97r/2A7CPQqcaNsp7M6nbSe6yr1SQ4uOf7RV57uP3FbRqyir7ryDkF+rnGwyWpJLCPfRQ8CPKKNlxqqwhXzCPWrlxLYdbdthCDeaRo6XruB3VHlxCGfc+JGFVl9+JRfpGvI59bZKY+F+tSCSCPgRZoX8rKyXENBdx3bDvfqWWakl3GMixdt2qv03okO4X/7uT2jbiZDugfKHJVHB9181azT1ewchv0JZ2UC4jzYCfsQZrcl1QQ/5OjS12qzC2KV77m/88EIBStGAoIfqVNu2M2xWewttO+kBTtIMu76jw2Wfs2geRYMg0M9XQr6LzExgZoO7BZFGwI+BIIf8wtozu0eRa2WWPfeohLbtaFioZXf+fzWr+bTthFu6v/zXmBQtOoFByHdFLh/u1wkizxDERm4gs8a8e0ACwtqE0PkB2weXaLivtrcaUOlfH5YPffYh674arec0yGeWXiqdczsE4XLfD38uz6R7Sz7n5GsbBMEyeOSYfPCWh2TPC2/Y/jHr7vlDWXvvvYLT5GRUvmTMTPKPPCao4MeIMcP8xM6J7iILxLS8tuUQ7uElrQZqb76u5Ktm53lhCFfbdqjmh8u+nv6SjzPTE0yFA7EqOfWWSv4ZMma4v5VwHy8E/JgxWpJbzE/0FeabafGRfvHVwVo7tN+ecA8n6Uq+X279ck1tO7o7n7adcNAB23IbdOi/D65CyK/k85WQf0rGTHrXmuF+kyBWCPgxZH6i7zb/5n0L+Q8+8ojtjTlaVdONOYDTnNidr9t21j7xM9m69xVBcO3v6Sv7nEoqxPCHfq4S8ivSbX6v1x33kTjhHpWhBz/GcplMSrKyzXwzJR7ZvXev1Xdvh+6k/nGFQ1ZAtb724L9Yt2rRnx9cOiRdbhOStm7xtSYcbv3yd+RvvrvD9vNj2pPfbVXuk8m0IJao4MeY9YmfkCvMy7wu8YD223/885+z9dzCQVZ8w4VXCrvzq13ByiFZwaR/F+XCvb5SyNea8NBKfiVtm7Gr5OfMwt1Y5T4tiC0Cfszp8dTGeckVks0+KC7TcG93qFaPLOcbLrym/+a++83bam7b0f78jU8/R9APADuHldGeEz6VLl6ITcgfO8BKK/eBWKYB/9QJYFr/5/f/y7ov/6FhVvM7xQV3f+Urtodq2XUPv2lFV3t9z5o2Rbb/orr++l8dysiOA70y3fw5UjOaBd7TC6yNT++VE6PZks/7y//zZjm/9VxBuCy/auzCzO7naNdTT4r1Te5975MI0h33XzNak38kgNCDj3Hc2JWvQ7Vr/tje1xzWYSJodGf+J2//luzZb38P93j05/tDq/d6GnEpOuvz6k+/KgivSudnNvzJn8pdt39BIiSXX4O5SYA8Aj7OkDuUWWy+tvM9cWD4VltyZl+xyNZztWq684kvCxBEOtSnIaLaQ7LUgrYWWf3ey82KfpPAXVq91w1HfWXapL51/2d5xTACKg35mx56WFbeEokNbZn8MC2bcnAaevBxBqfWaGq4X3HjDbaeq1U07bsHgkpbdn5pXoDW8grTvt5+a6MLg7ju0+p9uXCvX3cKbR4It0pf/V115x2y+dHvSMixBhOTooKPSVlrNHOy0bx1ShU+/nufs9V3rxtzNDgxVIuw0Cq+VgsrWdU3kc65s+TmpfNk5jkNAufooLNeRJWjF23f5pyNSPnSf/+efH3jdlvPbW5qkm3//H1ZfFl1m7N8pZty6uQTDNNiMgR8lJXry6wzqwRrK/kxuq3A7mFWf/HfPm6dLAqEjRNtO4qg7xy7rTmK3ffRVMme/BCGfB2mfdBoTd4tQAkEfNhSyfBtJYdZMVSLKNCKod4I+v5b+/2fWa1Q5fC1J9oqDfm7un4qqVmzJOB0mPZLxszkBgHKIODDNjvDt4W+ezv77hmqRZQ41bajCPrV0bMHtu59tezztPdev/ZoeyCiq5KQr+F+2+PfD3LI7zYr97ealfsuAWwg4KMiVl9+VrbJJCHf7uCSfoPlpFpEEUHfH3ZWYhawOSc+ll7357LnBXsrbgMb8nOyK99vnxbAJgI+KmaG/GY5mV0nicRdxR+vpO9ewz3bKxBlevjObWYFsda2HaXrNa9bOEeWpdoEZ7JbuVcM1sbL4JFj8sFbHqoo5Gu7jrbtBEDO/N9mM9zfzTAtKkXAR9WKh28r2XdP7yvixKlBXFU4MGt+WytVfdPw2yfkoe075Zl0r63n88phPFUa8nXgVgdvfQ759NujJgR81MQM+Z2HhzIbl17bmbLTd3/jhxfKd7/JvnvEj5NBv2HaFFnW0Rbr9p3ugSG5/4c/t7Utp0D77nX2B/Gjn3cf+uxDtj//Vt3yWdn40MPik4xk5RP026MWdQLUYP2f35duOPusx7f84Ac3me82l3quVs/+36+vZLANsaTBUtfBavVYK4laVazWidGspM2Au/X5V2WHWb2eWp+QhqlTpdEM/lGnVfste16WDT9+RkaOn7D943Qd740fCeG+czhCv+98zCww/fOP9tr63Nv9/F4ZOnJEfueDHxRPjfXbX2vM4PAq1IYKPpykLyXeNdmDVM+AMVpF1Iq+3pyo6BfoUO6yVHtke/X1Ykb77fsqPAWYtkAUVFrJX3fPH8rae+8VD7DfHo6igg8n/Yt5GzJvV5m3s4of0G+un7lhiQAYqybqkLlWFFMXnCcvvXaopop+gVb1n3r117Lt5YPW243TpkaihWdfT5883PWsVbmvpGqvCPcoZn3u/fYceez7u+St4yfLPr/rqScl2dQkV73nSnFRRkblK8bM5HoBHEIFH25ImbdTqzTZdw+U52SPfjHt17/s/BZZNrstVMO52oqz9flX5InnX5WRtysL9QWEe0xmz/43rMHbwTftXVhveuhhWXmLK9uXuiUh17ICE04j4MMt2o+/oeNd561kawVgn1tBvyA1o8lau7lsdrukzmsKVN/+oTeH5ZkDvbKju9fWabSlaM+9zjwAk9n8jzvktnvKn9uidKOObtbRDTsOYQUmXEXAh6ue+NZ/XvM7K+Y/IAAq8vgP98rXN2639um7SQO/3ma36H2zZ6FfK/R9R4etIN/dPyT7zftDFfbWT0RbML77yG2cswFb9HPsS//9e7ae6+BBWNqS8zVWYMJNBHy47lj3A6kpOWPS028BTK5wMq7d7R9O0MDfOHWKdT/z3AZpnd5ohf7W6WfLzHMabf88WpFX6YEjVu98d/+gNSCbPjzkSJgfT0O9nlLLK4aohH5+6c0OB0K+tuToqbRsyYGrCPjwRK77geaTWVlnGMZdAqBiGvR/albz3WzfqYT29k+fOnGl343wXopW7bXXnpYcVEur+FrNt0PbdH7y+D9LsrlZKmBtyZF6WU9LDrxAwIenjr/ywKpEwtCWnYq+MgJ4h7btaP+wl1X9oNLD8/7v//Zxqvao2a1f/o41A2OHHoT17W88JGbRys7TM/lTaTcJ4BECPjxHyw7gHA0k2q//uBn240Tbcb76xd+h1x6O0Ytl3ayjB9HZseb2L8gDf/KnpZ80dnDVJ9iSA68R8OGbE68+oC07awVAzQotPFrZd3sw108Ee7hJQ/57rv9z221wD/yffyJrvvD7Ez3EwVXwFQEfvjre/cDiRM7QFQYpAeAIDSnavqOVfQ37YW/j0R577a/Xm74NuKnS0243fuMhWfXZ/634Q91muL/VDPddAviEgA/factOXU7WJcRYKQAcpyF/+8/zt5BU97WnXk/61R57qvXwWiUHYemOfB26vWLh5QzSIjAI+AiM/ACutuykBIBrNOTv2ffGWPAPSIVfA/0HfnuOLJ53gXzsIwsZmoXv9BWwT93+LcnZeO5FqVTm1V/uutVoSW4RIAAI+AgUqvmA9zTg62BhIfQX3ncj+GuLTYcZ3heZQV7DvPX2/AsI9AgkGwdhaf7vMm+3mre0AAFBwEcgHX/1gTWJsQFc1mkCPtGAf+DXh602Bet+6Jj1tn68XPjXIK83De5N5+Tv8+8DYVLiIKyMPmzeOJEWgUPAR2Dl12luNN/sFAAAfHLbl78jm9/ZkU/VHoFHwEfgUc0HAPipaEc+VXuEAgEfoUA1HwDgo9wLr/yma+FH/oyqPUKBgI9QYdMOAMBjmWwu97WpF99N1R6hQcBH6LBpBwDgAavXvs7I3WrMvjstQIgQ8BFaVPMBAC7JSDZ3a/2cu9lrj1BKCBBSU+fcvemEkVuRldxmAQCgdrlcNrfBrNpfRLhHmFHBRyQc735gcSJn6GkkKQEAoHLdudHcrVPefXeXACFHwEeknHj1gXXG2EpNAADsyORyua9PufjudQJEBAEfkcMQLgDABoZoEVkEfEQWQ7gAgEnQjoNII+Aj8mjbAQDkWe049QnZYFbtBwWIKAI+YoG2HQCINdpxECsEfMQKbTsAEDu04yB2CPiIpeOvPrAmYRh3CUEfAKKK7TiILQI+You2HQCIJD2s6sH6OllPnz3iioCP2NOgP0WMByQnNwkAIMy2ZY3cl6bOvnu3ADFGwAfy6M8HgHAyw8zu7GjubvrsgTEEfGAcgj4AhMagGMaa+tl3bRYApxDwgUnk9+drf35KAABBMpjL5R5knz0wMQI+UAKDuAAQKAR7wAYCPmADQR8A/GUYsikhufUcVAWUR8AHKkDQBwBvEeyByhHwgSoQ9AHAdV250dx6NuMAlSPgAzUg6AOA4wj2QI0I+IADCPoAUDOCPeAQAj7gIII+AFSMYA84jIAPuICgDwCl6fBs9mRuM8EecB4BH3ARQR8ATqN77Dfn99inBYArCPiAB4qC/nLhZFwA8cMBVYCHCPiAh6ygPyqdiYSxVgj6AKKPYA/4gIAP+OT4Kw+sIugDiKguMYxNdZJ9nGAPeI+AD/jsxK8e6DTqrKDfKQAQbmzEAQKAgA8EBAO5AELKGpyVrGwh2APBQMAHAoY+fQAhQX89EFAEfCDA8n36WtHvFAAIBtpwgIAj4AMhwJpNAD6zqvW5Udkyde7duwVAoBHwgZChqg/AQ12GYWxJSHYzbThAeBDwgZCiqg/AJQzNAiFHwAcigKo+AAd0ZbO5zVPqZAvVeiDcCPhAhGhVvz4ra8yX1G8UqvoAymMTDhBBBHwgovQArVydrEqIFfabBQDG0IIDRBwBH4i4XPcDzSdG5SZaeIDYowUHiAkCPhAjRYdoEfaBeGALDhBDBHwgpjTsT5XEjZLLrcqJLBYAUdGVy+W21ydkkxnq0wIgdgj4AAj7QPgR6gGcQsAHcBrCPhAahHoAEyLgA5gUPftA4BR66h8n1AOYDAEfgC2nwn6dYVb3rbDP6k3AfToYu5vtNwAqQcAHUJWiPfvLhUO1ACelc7nc47qnvr5edhPqAVSKgA+gZse7H1hcJ4nlZii5SWjlASplVelpvQHgFAI+AEfpwVonT8pire7XibGIQV1gQlTpAbiGgA/AVYXefUlIJ+08iLFBw5Ato6O57fTSA3AbAR+Ap7SdR0ZlcX5YV6v7KQGixwr05rfZ3bTdAPAaAR+Arwj8iIi0Gei7CPQAgoCADyBQtKVnihn4c4Z0GoaxSBjaRQAZuroyl9uey8nuKXXSRaAHECQEfACBpys5E/WJRTnJdVLlhw9OVeezJ7N7GIoFEHQEfAChU9jUo4O7RsKs8hP64Zy0+Z1xtyFGV240e6BurDpPmAcQKgR8AJFQCP2FSr+RkxQrOlHGqco8YR5AlBDwAUSatveYIa650NNvftFrJvjHjlWVz2VzB7RnXupk9xQN94R5ABFFwAcQO4Vqfz74L9Y2Hyr+oTdo3QjyAEDAB4BiZvhPmeE/pa0+2Wx2thn+O/LhP2U+3Czw06CRr8Zns7khDfEJ82N1ddbQa1oAABYCPgDYpJX/E2bQN05Kc/4CIJkf8tXgnxIGfWuVlrG++LQG+EQi0a298dk6SVOJBwD7CPgA4KDii4CcYd4bY6E/Yb4SYFacU/mn6X2zRP8VAattxvxGM2j+WaT1vhDcR0ezQ+YrI+n6eivUDxLeAcA5BHwA8JG2BOm9tgVZ7+cvCAoXBqZm8+KgyXpMLwhyp10UpCb4KSf6mB3pkh8zxoK6vqkhXfJvmxct1nOM/H0+sAstMwDgn/8fkZ2cZSv+KN0AAAAASUVORK5CYII="/>
+</defs>
+</svg>
diff --git a/public/images/landing-new/avatar.png b/public/images/landing-new/avatar.png
new file mode 100644
index 0000000000..e87b045157
Binary files /dev/null and b/public/images/landing-new/avatar.png differ
diff --git a/public/images/landing-new/blocks-icon.svg b/public/images/landing-new/blocks-icon.svg
new file mode 100644
index 0000000000..99e137ec29
--- /dev/null
+++ b/public/images/landing-new/blocks-icon.svg
@@ -0,0 +1,6 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.125 5.625H7.5C7.00279 5.625 6.52586 5.82254 6.17411 6.17411C5.82254 6.52588 5.625 7.0028 5.625 7.5V28.125C5.625 28.6222 5.82254 29.0991 6.17411 29.4509C6.52588 29.8025 7.0028 30 7.5 30H28.125C28.6222 30 29.0991 29.8025 29.4509 29.4509C29.8025 29.0991 30 28.6222 30 28.125V7.5C30 7.00279 29.8025 6.52586 29.4509 6.17411C29.0991 5.82254 28.6222 5.625 28.125 5.625ZM28.125 28.125H7.5V7.5H28.125V28.125Z" fill="#03C4E8"/>
+<path d="M1.875 1.875H22.5V3.75H24.375V1.875C24.375 1.37779 24.1775 0.900857 23.8259 0.549107C23.4741 0.197545 22.9972 0 22.5 0H1.875C1.37779 0 0.900857 0.197545 0.549107 0.549107C0.197545 0.900879 0 1.3778 0 1.875V22.5C0 22.9972 0.197545 23.4741 0.549107 23.8259C0.900879 24.1775 1.3778 24.375 1.875 24.375H3.75V22.5H1.875V1.875Z" fill="#03C4E8"/>
+<path d="M10.3125 23.4375H25.3125C25.5622 23.4389 25.8022 23.3408 25.9792 23.1646C26.1563 22.9884 26.2557 22.749 26.2555 22.4991C26.2552 22.2495 26.1554 22.0103 25.9782 21.8343L22.2282 18.0843C22.0524 17.9098 21.8149 17.8116 21.5671 17.8116C21.3195 17.8116 21.0818 17.9098 20.9062 18.0843L19.6875 19.303L16.6032 16.2187C16.4274 16.0442 16.1899 15.946 15.9421 15.946C15.6945 15.946 15.4568 16.0442 15.2812 16.2187L9.65625 21.8437C9.48403 22.0195 9.38777 22.2558 9.38818 22.5018C9.3886 22.7479 9.48591 22.984 9.65876 23.1589C9.83162 23.3339 10.0664 23.4339 10.3125 23.4375L10.3125 23.4375Z" fill="#03C4E8"/>
+<path d="M24.375 14.0625C24.375 15.0979 23.5354 15.9375 22.5 15.9375C21.4646 15.9375 20.625 15.0979 20.625 14.0625C20.625 13.0271 21.4646 12.1875 22.5 12.1875C23.5354 12.1875 24.375 13.0271 24.375 14.0625Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/blocks/logo-1.svg b/public/images/landing-new/blocks/logo-1.svg
new file mode 100644
index 0000000000..2846a84c0e
--- /dev/null
+++ b/public/images/landing-new/blocks/logo-1.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg" >
+    <path
+        d="M9.44607 1.35475C9.64885 0.858807 10.3512 0.858806 10.5539 1.35474L13.9386 9.63271C13.9591 9.68281 13.9863 9.7299 14.0195 9.77269L19.496 16.8429C19.8241 17.2665 19.473 17.8747 18.9421 17.8023L10.0808 16.5946C10.0272 16.5873 9.97281 16.5873 9.91918 16.5946L1.0579 17.8023C0.52702 17.8747 0.175868 17.2665 0.503973 16.8429L5.98054 9.77269C6.01369 9.7299 6.04088 9.68281 6.06136 9.63271L9.44607 1.35475Z"
+        fill="#03C4E8"
+        />
+</svg>
\ No newline at end of file
diff --git a/public/images/landing-new/blocks/logo-2.svg b/public/images/landing-new/blocks/logo-2.svg
new file mode 100644
index 0000000000..4467c4c890
--- /dev/null
+++ b/public/images/landing-new/blocks/logo-2.svg
@@ -0,0 +1,6 @@
+ <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg" >
+    <path 
+        d="M5.47105 1.35749C5.91003 -0.180724 8.08997 -0.180724 8.52895 1.35749L8.86936 2.55028C9.10485 3.37542 9.95258 3.86486 10.7849 3.65622L11.9881 3.35463C13.5397 2.9657 14.6297 4.85358 13.5171 6.00286L12.6543 6.89406C12.0574 7.51056 12.0574 8.48944 12.6543 9.10594L13.5171 9.99714C14.6297 11.1464 13.5397 13.0343 11.9881 12.6454L10.7849 12.3438C9.95258 12.1351 9.10485 12.6246 8.86936 13.4497L8.52895 14.6425C8.08997 16.1807 5.91003 16.1807 5.47105 14.6425L5.13064 13.4497C4.89515 12.6246 4.04742 12.1351 3.21509 12.3438L2.01189 12.6454C0.46027 13.0343 -0.629699 11.1464 0.482936 9.99714L1.34572 9.10594C1.94257 8.48944 1.94257 7.51056 1.34572 6.89406L0.482936 6.00286C-0.6297 4.85358 0.46027 2.9657 2.01189 3.35463L3.21509 3.65622C4.04742 3.86486 4.89515 3.37542 5.13064 2.55028L5.47105 1.35749Z"
+        fill="#03C4E8"
+        />
+</svg>
\ No newline at end of file
diff --git a/public/images/landing-new/blocks/question.svg b/public/images/landing-new/blocks/question.svg
new file mode 100644
index 0000000000..be11fff635
--- /dev/null
+++ b/public/images/landing-new/blocks/question.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M12 0C10.3438 0 8.78906 0.3125 7.33594 0.9375C5.86719 1.5625 4.58594 2.42188 3.49219 3.51562C2.41406 4.59375 1.5625 5.86719 0.9375 7.33594C0.3125 8.78906 0 10.3438 0 12C0 13.6562 0.3125 15.2109 0.9375 16.6641C1.5625 18.1328 2.41406 19.4141 3.49219 20.5078C4.58594 21.5859 5.86719 22.4375 7.33594 23.0625C8.78906 23.6875 10.3438 24 12 24C13.6562 24 15.2109 23.6875 16.6641 23.0625C18.1328 22.4375 19.4062 21.5859 20.4844 20.5078C21.5781 19.4141 22.4375 18.1328 23.0625 16.6641C23.6875 15.2109 24 13.6562 24 12C24 10.3438 23.6875 8.78906 23.0625 7.33594C22.4375 5.86719 21.5781 4.59375 20.4844 3.51562C19.4062 2.42188 18.1328 1.5625 16.6641 0.9375C15.2109 0.3125 13.6562 0 12 0ZM12 22.0078C10.625 22.0078 9.32812 21.7422 8.10938 21.2109C6.89062 20.6953 5.82812 19.9844 4.92188 19.0781C4.01562 18.1719 3.30469 17.1094 2.78906 15.8906C2.25781 14.6719 1.99219 13.375 1.99219 12C1.99219 10.625 2.25781 9.32812 2.78906 8.10938C3.30469 6.89062 4.01562 5.82812 4.92188 4.92188C5.82812 4.01562 6.89062 3.30469 8.10938 2.78906C9.32812 2.25781 10.625 1.99219 12 1.99219C13.375 1.99219 14.6719 2.25781 15.8906 2.78906C17.1094 3.30469 18.1719 4.01562 19.0781 4.92188C19.9844 5.82812 20.6953 6.89062 21.2109 8.10938C21.7422 9.32812 22.0078 10.625 22.0078 12C22.0078 13.375 21.7422 14.6719 21.2109 15.8906C20.6953 17.1094 19.9844 18.1719 19.0781 19.0781C18.1719 19.9844 17.1094 20.6953 15.8906 21.2109C14.6719 21.7422 13.375 22.0078 12 22.0078ZM8.92969 6.25781C8.53906 6.64844 8.22656 7.10938 7.99219 7.64062C7.77344 8.17188 7.66406 8.73438 7.66406 9.32812C7.66406 9.60938 7.75781 9.85156 7.94531 10.0547C8.14844 10.2422 8.39062 10.3359 8.67188 10.3359C8.9375 10.3359 9.16406 10.2422 9.35156 10.0547C9.55469 9.85156 9.65625 9.60938 9.65625 9.32812C9.65625 9 9.71875 8.69531 9.84375 8.41406C9.96875 8.13281 10.1328 7.89062 10.3359 7.6875C10.5547 7.48438 10.8047 7.32812 11.0859 7.21875C11.3672 7.09375 11.6719 7.03125 12 7.03125C12.3281 7.03125 12.6328 7.09375 12.9141 7.21875C13.1953 7.32812 13.4453 7.48438 13.6641 7.6875C13.8672 7.89062 14.0312 8.14062 14.1562 8.4375C14.2812 8.71875 14.3438 9.02344 14.3438 9.35156C14.3438 9.99219 14.1172 10.5391 13.6641 10.9922C13.2109 11.4453 12.6641 11.6719 12.0234 11.6719C12.0234 11.6719 12.0156 11.6719 12 11.6719C11.7188 11.6875 11.4844 11.7891 11.2969 11.9766C11.1094 12.1641 11.0078 12.3984 10.9922 12.6797V14.0156C10.9922 14.2969 11.0859 14.5391 11.2734 14.7422C11.4766 14.9297 11.7188 15.0234 12 15.0234C12.2812 15.0234 12.5156 14.9297 12.7031 14.7422C12.9062 14.5391 13.0078 14.2969 13.0078 14.0156V13.5703C13.4141 13.4609 13.7891 13.3125 14.1328 13.125C14.4766 12.9219 14.7891 12.6875 15.0703 12.4219C15.4609 12.0156 15.7656 11.5547 15.9844 11.0391C16.2188 10.5078 16.3359 9.94531 16.3359 9.35156C16.3359 8.74219 16.2188 8.17969 15.9844 7.66406C15.7656 7.13281 15.4609 6.67188 15.0703 6.28125C14.6641 5.90625 14.1953 5.60938 13.6641 5.39062C13.1484 5.15625 12.5938 5.03906 12 5.03906C11.4062 5.03906 10.8438 5.14844 10.3125 5.36719C9.79688 5.58594 9.33594 5.88281 8.92969 6.25781ZM13.6641 17.6719C13.6641 18.125 13.5 18.5156 13.1719 18.8438C12.8438 19.1719 12.4531 19.3359 12 19.3359C11.5469 19.3359 11.1562 19.1719 10.8281 18.8438C10.5 18.5156 10.3359 18.125 10.3359 17.6719C10.3359 17.2031 10.5 16.8125 10.8281 16.5C11.1562 16.1719 11.5469 16.0078 12 16.0078C12.4531 16.0078 12.8438 16.1719 13.1719 16.5C13.5 16.8125 13.6641 17.2031 13.6641 17.6719Z"
+        fill="#BBC7CD"
+        />
+</svg>
\ No newline at end of file
diff --git a/public/images/landing-new/brown-watch.png b/public/images/landing-new/brown-watch.png
new file mode 100644
index 0000000000..b6245d3c26
Binary files /dev/null and b/public/images/landing-new/brown-watch.png differ
diff --git a/public/images/landing-new/core-icon.svg b/public/images/landing-new/core-icon.svg
new file mode 100644
index 0000000000..4d31216b1f
--- /dev/null
+++ b/public/images/landing-new/core-icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.7038 5.3815C11.4592 5.13721 11.1277 5 10.782 5C10.4363 5 10.1047 5.13721 9.86014 5.3815L1.16349 14.0782C0.919198 14.3227 0.781982 14.6543 0.781982 15C0.781982 15.3457 0.919198 15.6773 1.16349 15.9218L9.86014 24.6185C10.1047 24.8628 10.4363 25 10.782 25C11.1277 25 11.4592 24.8628 11.7038 24.6185C11.9481 24.3739 12.0853 24.0423 12.0853 23.6966C12.0853 23.351 11.9481 23.0194 11.7038 22.7748L3.92902 15L11.7038 7.22519C11.9481 6.9806 12.0853 6.64904 12.0853 6.30335C12.0853 5.95766 11.9481 5.6261 11.7038 5.3815Z" fill="#03C4E8"/>
+<path d="M30.8366 14.0781L22.14 5.38148C21.8927 5.15106 21.5656 5.02561 21.2277 5.03158C20.8897 5.03754 20.5673 5.17444 20.3283 5.41345C20.0893 5.65246 19.9524 5.9749 19.9464 6.31286C19.9404 6.65081 20.0659 6.97789 20.2963 7.22518L28.0711 15L20.2963 22.7748C20.052 23.0194 19.9148 23.3509 19.9148 23.6966C19.9148 24.0423 20.052 24.3739 20.2963 24.6185C20.5409 24.8628 20.8725 25 21.2181 25C21.5638 25 21.8954 24.8628 22.14 24.6185L30.8366 15.9218C31.0809 15.6772 31.2181 15.3457 31.2181 15C31.2181 14.6543 31.0809 14.3227 30.8366 14.0781Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/css-icon.svg b/public/images/landing-new/css-icon.svg
new file mode 100644
index 0000000000..84c01e9735
--- /dev/null
+++ b/public/images/landing-new/css-icon.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4375 14.0625H1.8125C1.29688 14.0625 0.875 14.4844 0.875 15V24.375C0.875 24.8906 1.29688 25.3125 1.8125 25.3125H22.4375C22.954 25.3125 23.375 24.8906 23.375 24.375V15C23.375 14.4844 22.954 14.0625 22.4375 14.0625ZM9.36607 21.9675C8.84103 22.4559 8.21198 22.5535 7.58857 22.5535C5.77448 22.5535 4.95795 21.3159 4.95795 19.8694C4.95795 18.4228 5.86448 17.1787 7.58857 17.1787C8.24107 17.1787 8.75771 17.3737 9.30516 17.8463C9.50773 18.0329 9.53012 18.3627 9.32776 18.5728C9.1252 18.7519 8.81779 18.7304 8.63867 18.5502C8.33126 18.2277 8.01612 18.1386 7.58857 18.1386C6.43448 18.1386 5.87953 18.9562 5.87953 19.8702C5.87953 20.8002 6.42612 21.6542 7.58857 21.6542C8.01609 21.6542 8.41346 21.4807 8.75771 21.1741C8.99104 20.9935 9.31265 21.0825 9.44867 21.2635C9.56858 21.4276 9.62759 21.705 9.36601 21.9675L9.36607 21.9675ZM10.5971 22.1251C10.3496 21.9236 10.3571 21.5944 10.4921 21.391C10.6871 21.197 10.9037 21.1294 11.1596 21.3385C11.7736 21.7585 13.3563 22.0734 13.4687 21.0076C13.3712 19.8985 10.2521 20.5661 10.4846 18.437C10.657 16.9831 12.8526 16.7215 13.8876 17.5165C14.3976 17.9281 13.8577 18.5806 13.4076 18.2506C12.8526 17.8982 11.5935 17.7331 11.4361 18.5121C11.2335 19.7422 14.4943 19.038 14.4417 21.0312C14.3902 22.9351 11.6311 22.9801 10.5971 22.125L10.5971 22.1251ZM15.4449 22.1251C15.1974 21.9236 15.2049 21.5944 15.3409 21.391C15.5349 21.197 15.7525 21.1294 16.0074 21.3385C16.6224 21.7585 18.2049 22.0734 18.3164 21.0076C18.2189 19.8985 15.1009 20.5661 15.3334 18.437C15.5058 16.9831 17.7006 16.7215 18.7356 17.5165C19.2466 17.9281 18.7065 18.5806 18.2555 18.2506C17.7006 17.8982 16.4425 17.7331 16.2849 18.5121C16.0815 19.7422 19.3431 19.038 19.2895 21.0312C19.2389 22.9351 16.48 22.9801 15.4449 22.125L15.4449 22.1251Z" fill="#03C4E8"/>
+<path d="M26.1873 7.11161L20.0132 0.9375C19.4712 0.393857 18.5188 0 17.75 0H7.4375C5.88688 0 4.625 1.26188 4.625 2.8125V12.1875C4.625 12.7058 5.04415 13.125 5.5625 13.125C6.08085 13.125 6.5 12.7058 6.5 12.1875V2.8125C6.5 2.29604 6.91999 1.875 7.4375 1.875H15.875C16.9109 1.875 17.75 2.715 17.75 3.75V7.26562C17.75 8.4262 18.7007 9.375 19.8594 9.375H23.375C24.4109 9.375 25.25 10.215 25.25 11.25V27.1875C25.25 27.704 24.8308 28.125 24.3125 28.125H7.4375C6.91999 28.125 6.5 27.704 6.5 27.1875C6.5 26.6692 6.08085 26.25 5.5625 26.25C5.04415 26.25 4.625 26.6692 4.625 27.1875C4.625 28.7381 5.88688 30 7.4375 30H24.3125C25.8631 30 27.125 28.7381 27.125 27.1875V9.375C27.125 8.60721 26.7312 7.65466 26.1875 7.11182L26.1873 7.11161Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/designer-dark.svg b/public/images/landing-new/designer-dark.svg
new file mode 100644
index 0000000000..bdf1d36757
--- /dev/null
+++ b/public/images/landing-new/designer-dark.svg
@@ -0,0 +1,4 @@
+<svg width="225" height="21" viewBox="0 0 225 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.8395 20.4716C36.121 20.4716 36.249 20.3181 36.249 20.0622V13.6136H39.3197C41.7251 13.6136 43.0046 12.3086 43.0046 9.92873V3.68489C43.0046 1.27948 41.7251 0 39.3197 0H33.1782C32.9223 0 32.7688 0.153537 32.7688 0.409432V20.0622C32.7688 20.3181 32.9223 20.4716 33.1782 20.4716H35.8395ZM38.5009 10.2358H36.249V3.37782H38.5009C39.1918 3.37782 39.5244 3.73607 39.5244 4.4014V9.21223C39.5244 9.85197 39.1918 10.2358 38.5009 10.2358ZM48.3784 20.4716C48.6343 20.4716 48.7878 20.3181 48.7878 20.0622V13.6136H50.5535L52.268 20.1134C52.3192 20.3437 52.4471 20.4716 52.703 20.4716H55.3643C55.6458 20.4716 55.7994 20.3181 55.7226 20.011L53.9569 13.3066C55.1852 12.7692 55.825 11.6432 55.825 9.92873V3.68489C55.825 1.27948 54.5455 0 52.1401 0H45.7171C45.4612 0 45.3077 0.153537 45.3077 0.409432V20.0622C45.3077 20.3181 45.4612 20.4716 45.7171 20.4716H48.3784ZM51.3212 10.2358H48.7878V3.37782H51.3212C51.9865 3.37782 52.3448 3.73607 52.3448 4.4014V9.21223C52.3448 9.87755 51.9865 10.2358 51.3212 10.2358ZM61.4547 20.4716C61.7105 20.4716 61.8641 20.3181 61.8641 20.0622V0.409432C61.8641 0.153537 61.7105 0 61.4547 0H58.7933C58.5119 0 58.3839 0.153537 58.3839 0.409432V20.0622C58.3839 20.3181 58.5119 20.4716 58.7933 20.4716H61.4547ZM67.2891 20.4716C67.6217 20.4716 67.8009 20.2925 67.8009 19.9598V8.44454H67.98L70.5133 20.011C70.5901 20.3181 70.7692 20.4716 71.0763 20.4716H72.3302C72.6373 20.4716 72.8164 20.3181 72.8932 20.011L75.4265 8.44454H75.6057V19.9598C75.6057 20.2925 75.7848 20.4716 76.1174 20.4716H78.4973C78.8299 20.4716 79.0091 20.2925 79.0091 19.9598V0.51179C79.0091 0.179127 78.8299 0 78.4973 0H75.1195C74.8124 0 74.6333 0.153537 74.5565 0.460611L71.716 13.2042L68.8756 0.460611C68.7988 0.153537 68.6197 0 68.3126 0H64.9348C64.6022 0 64.423 0.179127 64.423 0.51179V19.9598C64.423 20.2925 64.6022 20.4716 64.9348 20.4716H67.2891ZM91.3688 20.4716C91.6759 20.4716 91.7782 20.3181 91.7782 20.0622V17.5032C91.7782 17.2217 91.6759 17.0938 91.3688 17.0938H84.9714V11.9247H89.859C90.1149 11.9247 90.2685 11.7712 90.2685 11.4897V8.95633C90.2685 8.67485 90.1149 8.52131 89.859 8.52131H84.9714V3.40341H91.3688C91.6759 3.40341 91.7782 3.22428 91.7782 2.96838V0.409432C91.7782 0.153537 91.6759 0 91.3688 0H81.9519C81.7216 0 81.568 0.153537 81.568 0.409432V20.0622C81.568 20.3181 81.7216 20.4716 81.9519 20.4716H91.3688Z" fill="#191919"/>
+<path d="M105.329 20.4716C107.735 20.4716 109.014 19.1921 109.014 16.7867V3.71048C109.014 1.30507 107.735 0 105.329 0H99.1877C98.9063 0 98.7783 0.153537 98.7783 0.409432V20.0622C98.7783 20.3437 98.9063 20.4716 99.1877 20.4716H105.329ZM104.613 17.0938H102.258V3.37782H104.613C105.278 3.37782 105.636 3.73607 105.636 4.42699V16.0702C105.636 16.7611 105.278 17.0938 104.613 17.0938ZM121.374 20.4716C121.681 20.4716 121.783 20.3181 121.783 20.0622V17.5032C121.783 17.2217 121.681 17.0938 121.374 17.0938H114.976V11.9247H119.864C120.12 11.9247 120.274 11.7712 120.274 11.4897V8.95633C120.274 8.67485 120.12 8.52131 119.864 8.52131H114.976V3.40341H121.374C121.681 3.40341 121.783 3.22428 121.783 2.96838V0.409432C121.783 0.153537 121.681 0 121.374 0H111.957C111.727 0 111.573 0.153537 111.573 0.409432V20.0622C111.573 20.3181 111.727 20.4716 111.957 20.4716H121.374ZM130.125 20.4716C132.531 20.4716 133.81 19.1921 133.81 16.7867V10.8755C133.81 10.3893 133.58 10.1079 133.145 9.92873L127.055 7.93275V4.4014C127.055 3.73607 127.439 3.37782 128.078 3.37782H129.307C129.998 3.37782 130.33 3.73607 130.33 4.4014V6.39738C130.33 6.65328 130.484 6.80681 130.74 6.80681H133.401C133.682 6.80681 133.81 6.65328 133.81 6.39738V3.68489C133.81 1.27948 132.531 0 130.125 0H127.259C124.88 0 123.575 1.27948 123.575 3.68489V9.72402C123.575 10.2102 123.805 10.5173 124.265 10.6708L130.33 12.6668V16.0702C130.33 16.7611 129.972 17.0938 129.307 17.0938H128.078C127.439 17.0938 127.055 16.7611 127.055 16.0702V14.0998C127.055 13.8183 126.927 13.6904 126.645 13.6904H123.984C123.728 13.6904 123.575 13.8183 123.575 14.0998V16.7867C123.575 19.1921 124.88 20.4716 127.259 20.4716H130.125ZM139.44 20.4716C139.696 20.4716 139.85 20.3181 139.85 20.0622V0.409432C139.85 0.153537 139.696 0 139.44 0H136.779C136.497 0 136.369 0.153537 136.369 0.409432V20.0622C136.369 20.3181 136.497 20.4716 136.779 20.4716H139.44ZM149.471 20.4716C151.851 20.4716 153.156 19.1921 153.156 16.7867V9.67284C153.156 9.39135 153.003 9.26341 152.747 9.26341H148.448C148.166 9.26341 148.038 9.39135 148.038 9.67284V12.2318C148.038 12.4877 148.166 12.6412 148.448 12.6412H149.778V16.0702C149.778 16.7611 149.42 17.0938 148.755 17.0938H146.912C146.247 17.0938 145.889 16.7611 145.889 16.0702V4.4014C145.889 3.73607 146.221 3.37782 146.912 3.37782H148.755C149.42 3.37782 149.778 3.73607 149.778 4.4014V6.3462C149.778 6.6021 149.906 6.75563 150.188 6.75563H152.747C153.003 6.75563 153.156 6.6021 153.156 6.3462V3.68489C153.156 1.27948 151.851 0 149.471 0H146.093C143.688 0 142.408 1.27948 142.408 3.68489V16.7867C142.408 19.1921 143.688 20.4716 146.093 20.4716H149.471ZM158.786 20.4716C159.067 20.4716 159.195 20.3181 159.195 20.0622V9.21223H159.323L163.238 20.139C163.315 20.3693 163.469 20.4716 163.699 20.4716H166.232C166.488 20.4716 166.642 20.3181 166.642 20.0622V0.409432C166.642 0.153537 166.488 0 166.232 0H163.571C163.29 0 163.162 0.153537 163.162 0.409432V11.2082H163.008L159.118 0.332664C159.042 0.102358 158.888 0 158.658 0H156.124C155.869 0 155.715 0.153537 155.715 0.409432V20.0622C155.715 20.3181 155.869 20.4716 156.124 20.4716H158.786ZM179.001 20.4716C179.309 20.4716 179.411 20.3181 179.411 20.0622V17.5032C179.411 17.2217 179.309 17.0938 179.001 17.0938H172.604V11.9247H177.492C177.748 11.9247 177.901 11.7712 177.901 11.4897V8.95633C177.901 8.67485 177.748 8.52131 177.492 8.52131H172.604V3.40341H179.001C179.309 3.40341 179.411 3.22428 179.411 2.96838V0.409432C179.411 0.153537 179.309 0 179.001 0H169.585C169.354 0 169.201 0.153537 169.201 0.409432V20.0622C169.201 20.3181 169.354 20.4716 169.585 20.4716H179.001ZM184.785 20.4716C185.041 20.4716 185.194 20.3181 185.194 20.0622V13.6136H186.96L188.674 20.1134C188.726 20.3437 188.853 20.4716 189.109 20.4716H191.771C192.052 20.4716 192.206 20.3181 192.129 20.011L190.363 13.3066C191.592 12.7692 192.231 11.6432 192.231 9.92873V3.68489C192.231 1.27948 190.952 0 188.546 0H182.123C181.868 0 181.714 0.153537 181.714 0.409432V20.0622C181.714 20.3181 181.868 20.4716 182.123 20.4716H184.785ZM187.728 10.2358H185.194V3.37782H187.728C188.393 3.37782 188.751 3.73607 188.751 4.4014V9.21223C188.751 9.87755 188.393 10.2358 187.728 10.2358Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/designer-icon.svg b/public/images/landing-new/designer-icon.svg
new file mode 100644
index 0000000000..0b79634993
--- /dev/null
+++ b/public/images/landing-new/designer-icon.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5454 0.436488C22.5454 0.436488 24.5712 0.031435 27.2679 2.7318H27.2674C29.9346 5.39735 29.5735 7.40446 29.5645 7.45429C29.5644 7.45491 29.5644 7.45523 29.5644 7.45523L9.31948 27.696L0.413086 29.5842L2.30109 20.6784L22.5454 0.436488ZM5.7524 27.2778L8.78967 26.6242L9.66667 25.7452C9.66667 25.7452 9.63108 24.096 7.76611 22.2289C5.90418 20.3632 4.24986 20.3309 4.24986 20.3309L3.37119 21.2058L2.71763 24.2438C3.26708 24.5358 3.81648 24.8899 4.46171 25.5352C5.10669 26.1829 5.45966 26.7288 5.7524 27.2778ZM22.4999 2L5.99993 19C5.99993 19 7.99988 20 8.99988 21C9.99988 22 10.4999 24.5 10.4999 24.5L27.9999 7C27.9999 7 27.4999 5.5 25.9999 4C24.4999 2.5 22.4999 2 22.4999 2Z" fill="#03C4E8"/>
+<path d="M6.35405 14.0806L7.6301 12.8051L1.83848 7.01297L7.01279 1.83866L8.20837 3.03423L6.59637 4.64623C6.24342 4.99778 6.24412 5.57002 6.59637 5.92156C6.94792 6.27452 7.51874 6.27452 7.87171 5.92156L9.4837 4.30957L11.6886 6.51328L10.0759 8.12664C9.72364 8.4782 9.72364 9.05044 10.0766 9.40198C10.2698 9.59566 10.5284 9.67239 10.7818 9.65309L14.0795 6.35494L8.17371 0.448671C7.5336 -0.191437 6.43963 -0.140742 5.73655 0.563067L0.562948 5.73762C-0.139956 6.44094 -0.191087 7.53354 0.449248 8.17478L6.35405 14.0806Z" fill="#03C4E8"/>
+<path d="M29.55 21.8251L23.6478 15.9231L20.2701 19.3005C20.2915 19.4968 20.3652 19.6902 20.5161 19.8411C20.8676 20.1941 21.438 20.1941 21.7907 19.8411L23.4034 18.2289L25.6076 20.4338L23.9949 22.046C23.6426 22.3976 23.6426 22.9698 23.9949 23.3211C24.3478 23.6745 24.9182 23.6745 25.2709 23.3211L26.8829 21.7091L28.1603 22.9868H28.1596L22.9863 28.1616L17.1982 22.3732L15.9221 23.6486L21.8251 29.5511C22.4657 30.1914 23.5587 30.1405 24.2623 29.4381L29.4359 24.2638C30.1406 23.5592 30.1906 22.4662 29.55 21.8252L29.55 21.8251Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/designer-light.svg b/public/images/landing-new/designer-light.svg
new file mode 100644
index 0000000000..d4e5af23ac
--- /dev/null
+++ b/public/images/landing-new/designer-light.svg
@@ -0,0 +1,4 @@
+<svg width="225" height="21" viewBox="0 0 225 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.8395 20.4716C36.121 20.4716 36.249 20.3181 36.249 20.0622V13.6136H39.3197C41.7251 13.6136 43.0046 12.3086 43.0046 9.92873V3.68489C43.0046 1.27948 41.7251 0 39.3197 0H33.1782C32.9223 0 32.7688 0.153537 32.7688 0.409432V20.0622C32.7688 20.3181 32.9223 20.4716 33.1782 20.4716H35.8395ZM38.5009 10.2358H36.249V3.37782H38.5009C39.1918 3.37782 39.5244 3.73607 39.5244 4.4014V9.21223C39.5244 9.85197 39.1918 10.2358 38.5009 10.2358ZM48.3784 20.4716C48.6343 20.4716 48.7878 20.3181 48.7878 20.0622V13.6136H50.5535L52.268 20.1134C52.3192 20.3437 52.4471 20.4716 52.703 20.4716H55.3643C55.6458 20.4716 55.7994 20.3181 55.7226 20.011L53.9569 13.3066C55.1852 12.7692 55.825 11.6432 55.825 9.92873V3.68489C55.825 1.27948 54.5455 0 52.1401 0H45.7171C45.4612 0 45.3077 0.153537 45.3077 0.409432V20.0622C45.3077 20.3181 45.4612 20.4716 45.7171 20.4716H48.3784ZM51.3212 10.2358H48.7878V3.37782H51.3212C51.9865 3.37782 52.3448 3.73607 52.3448 4.4014V9.21223C52.3448 9.87755 51.9865 10.2358 51.3212 10.2358ZM61.4547 20.4716C61.7105 20.4716 61.8641 20.3181 61.8641 20.0622V0.409432C61.8641 0.153537 61.7105 0 61.4547 0H58.7933C58.5119 0 58.3839 0.153537 58.3839 0.409432V20.0622C58.3839 20.3181 58.5119 20.4716 58.7933 20.4716H61.4547ZM67.2891 20.4716C67.6217 20.4716 67.8009 20.2925 67.8009 19.9598V8.44454H67.98L70.5133 20.011C70.5901 20.3181 70.7692 20.4716 71.0763 20.4716H72.3302C72.6373 20.4716 72.8164 20.3181 72.8932 20.011L75.4265 8.44454H75.6057V19.9598C75.6057 20.2925 75.7848 20.4716 76.1174 20.4716H78.4973C78.8299 20.4716 79.0091 20.2925 79.0091 19.9598V0.51179C79.0091 0.179127 78.8299 0 78.4973 0H75.1195C74.8124 0 74.6333 0.153537 74.5565 0.460611L71.716 13.2042L68.8756 0.460611C68.7988 0.153537 68.6197 0 68.3126 0H64.9348C64.6022 0 64.423 0.179127 64.423 0.51179V19.9598C64.423 20.2925 64.6022 20.4716 64.9348 20.4716H67.2891ZM91.3688 20.4716C91.6759 20.4716 91.7782 20.3181 91.7782 20.0622V17.5032C91.7782 17.2217 91.6759 17.0938 91.3688 17.0938H84.9714V11.9247H89.859C90.1149 11.9247 90.2685 11.7712 90.2685 11.4897V8.95633C90.2685 8.67485 90.1149 8.52131 89.859 8.52131H84.9714V3.40341H91.3688C91.6759 3.40341 91.7782 3.22428 91.7782 2.96838V0.409432C91.7782 0.153537 91.6759 0 91.3688 0H81.9519C81.7216 0 81.568 0.153537 81.568 0.409432V20.0622C81.568 20.3181 81.7216 20.4716 81.9519 20.4716H91.3688Z" fill="white"/>
+<path d="M105.329 20.4716C107.735 20.4716 109.014 19.1921 109.014 16.7867V3.71048C109.014 1.30507 107.735 0 105.329 0H99.1877C98.9063 0 98.7783 0.153537 98.7783 0.409432V20.0622C98.7783 20.3437 98.9063 20.4716 99.1877 20.4716H105.329ZM104.613 17.0938H102.258V3.37782H104.613C105.278 3.37782 105.636 3.73607 105.636 4.42699V16.0702C105.636 16.7611 105.278 17.0938 104.613 17.0938ZM121.374 20.4716C121.681 20.4716 121.783 20.3181 121.783 20.0622V17.5032C121.783 17.2217 121.681 17.0938 121.374 17.0938H114.976V11.9247H119.864C120.12 11.9247 120.274 11.7712 120.274 11.4897V8.95633C120.274 8.67485 120.12 8.52131 119.864 8.52131H114.976V3.40341H121.374C121.681 3.40341 121.783 3.22428 121.783 2.96838V0.409432C121.783 0.153537 121.681 0 121.374 0H111.957C111.727 0 111.573 0.153537 111.573 0.409432V20.0622C111.573 20.3181 111.727 20.4716 111.957 20.4716H121.374ZM130.125 20.4716C132.531 20.4716 133.81 19.1921 133.81 16.7867V10.8755C133.81 10.3893 133.58 10.1079 133.145 9.92873L127.055 7.93275V4.4014C127.055 3.73607 127.439 3.37782 128.078 3.37782H129.307C129.998 3.37782 130.33 3.73607 130.33 4.4014V6.39738C130.33 6.65328 130.484 6.80681 130.74 6.80681H133.401C133.682 6.80681 133.81 6.65328 133.81 6.39738V3.68489C133.81 1.27948 132.531 0 130.125 0H127.259C124.88 0 123.575 1.27948 123.575 3.68489V9.72402C123.575 10.2102 123.805 10.5173 124.265 10.6708L130.33 12.6668V16.0702C130.33 16.7611 129.972 17.0938 129.307 17.0938H128.078C127.439 17.0938 127.055 16.7611 127.055 16.0702V14.0998C127.055 13.8183 126.927 13.6904 126.645 13.6904H123.984C123.728 13.6904 123.575 13.8183 123.575 14.0998V16.7867C123.575 19.1921 124.88 20.4716 127.259 20.4716H130.125ZM139.44 20.4716C139.696 20.4716 139.85 20.3181 139.85 20.0622V0.409432C139.85 0.153537 139.696 0 139.44 0H136.779C136.497 0 136.369 0.153537 136.369 0.409432V20.0622C136.369 20.3181 136.497 20.4716 136.779 20.4716H139.44ZM149.471 20.4716C151.851 20.4716 153.156 19.1921 153.156 16.7867V9.67284C153.156 9.39135 153.003 9.26341 152.747 9.26341H148.448C148.166 9.26341 148.038 9.39135 148.038 9.67284V12.2318C148.038 12.4877 148.166 12.6412 148.448 12.6412H149.778V16.0702C149.778 16.7611 149.42 17.0938 148.755 17.0938H146.912C146.247 17.0938 145.889 16.7611 145.889 16.0702V4.4014C145.889 3.73607 146.221 3.37782 146.912 3.37782H148.755C149.42 3.37782 149.778 3.73607 149.778 4.4014V6.3462C149.778 6.6021 149.906 6.75563 150.188 6.75563H152.747C153.003 6.75563 153.156 6.6021 153.156 6.3462V3.68489C153.156 1.27948 151.851 0 149.471 0H146.093C143.688 0 142.408 1.27948 142.408 3.68489V16.7867C142.408 19.1921 143.688 20.4716 146.093 20.4716H149.471ZM158.786 20.4716C159.067 20.4716 159.195 20.3181 159.195 20.0622V9.21223H159.323L163.238 20.139C163.315 20.3693 163.469 20.4716 163.699 20.4716H166.232C166.488 20.4716 166.642 20.3181 166.642 20.0622V0.409432C166.642 0.153537 166.488 0 166.232 0H163.571C163.29 0 163.162 0.153537 163.162 0.409432V11.2082H163.008L159.118 0.332664C159.042 0.102358 158.888 0 158.658 0H156.124C155.869 0 155.715 0.153537 155.715 0.409432V20.0622C155.715 20.3181 155.869 20.4716 156.124 20.4716H158.786ZM179.001 20.4716C179.309 20.4716 179.411 20.3181 179.411 20.0622V17.5032C179.411 17.2217 179.309 17.0938 179.001 17.0938H172.604V11.9247H177.492C177.748 11.9247 177.901 11.7712 177.901 11.4897V8.95633C177.901 8.67485 177.748 8.52131 177.492 8.52131H172.604V3.40341H179.001C179.309 3.40341 179.411 3.22428 179.411 2.96838V0.409432C179.411 0.153537 179.309 0 179.001 0H169.585C169.354 0 169.201 0.153537 169.201 0.409432V20.0622C169.201 20.3181 169.354 20.4716 169.585 20.4716H179.001ZM184.785 20.4716C185.041 20.4716 185.194 20.3181 185.194 20.0622V13.6136H186.96L188.674 20.1134C188.726 20.3437 188.853 20.4716 189.109 20.4716H191.771C192.052 20.4716 192.206 20.3181 192.129 20.011L190.363 13.3066C191.592 12.7692 192.231 11.6432 192.231 9.92873V3.68489C192.231 1.27948 190.952 0 188.546 0H182.123C181.868 0 181.714 0.153537 181.714 0.409432V20.0622C181.714 20.3181 181.868 20.4716 182.123 20.4716H184.785ZM187.728 10.2358H185.194V3.37782H187.728C188.393 3.37782 188.751 3.73607 188.751 4.4014V9.21223C188.751 9.87755 188.393 10.2358 187.728 10.2358Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-accessibility.svg b/public/images/landing-new/features/icon-accessibility.svg
new file mode 100644
index 0000000000..452e1803a7
--- /dev/null
+++ b/public/images/landing-new/features/icon-accessibility.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="26" viewBox="0 0 21 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.63671 3.34105C7.63671 2.58749 7.93595 1.86496 8.46882 1.33211C9.00152 0.799417 9.724 0.5 10.4776 0.5C11.2311 0.5 11.9537 0.799436 12.4863 1.33211C13.0191 1.86496 13.3184 2.58749 13.3184 3.34105C13.3184 4.09442 13.0192 4.81715 12.4863 5.34979C11.9536 5.88264 11.2311 6.18191 10.4776 6.18191C9.724 6.18191 9.00147 5.88266 8.46882 5.34979C7.93598 4.8171 7.63671 4.09442 7.63671 3.34105ZM19.5686 7.31821H1.38635C0.980382 7.31821 0.605229 7.5349 0.402241 7.88646C0.199253 8.23803 0.199253 8.67119 0.402241 9.02277C0.605229 9.37434 0.980377 9.59102 1.38635 9.59102H7.06836V24.3636C7.06836 24.7696 7.28504 25.1448 7.63661 25.3478C7.98817 25.5507 8.42134 25.5507 8.77291 25.3478C9.12448 25.1448 9.34116 24.7696 9.34116 24.3636V16.4092H11.614V24.3636H11.6138C11.6138 24.7696 11.8305 25.1448 12.182 25.3478C12.5336 25.5507 12.9667 25.5507 13.3183 25.3478C13.6699 25.1448 13.8866 24.7696 13.8866 24.3636V9.59102H19.5686C19.9746 9.59102 20.3497 9.37433 20.5527 9.02277C20.7557 8.6712 20.7557 8.23804 20.5527 7.88646C20.3497 7.53489 19.9746 7.31821 19.5686 7.31821H19.5686Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-community.svg b/public/images/landing-new/features/icon-community.svg
new file mode 100644
index 0000000000..4ff556d145
--- /dev/null
+++ b/public/images/landing-new/features/icon-community.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="26" viewBox="0 0 27 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.9625 4.8449C21.2901 4.07754 19.4968 3.51218 17.6217 3.18837C17.5875 3.18212 17.5534 3.19774 17.5358 3.22897C17.3052 3.6392 17.0497 4.17436 16.8708 4.595C14.854 4.29307 12.8475 4.29307 10.8721 4.595C10.6932 4.16501 10.4284 3.6392 10.1967 3.22897C10.1791 3.19878 10.145 3.18316 10.1109 3.18837C8.2368 3.51114 6.44341 4.0765 4.76998 4.8449C4.7555 4.85115 4.74308 4.86157 4.73484 4.8751C1.33316 9.95714 0.401292 14.9143 0.858433 19.8099C0.860502 19.8339 0.873947 19.8568 0.892564 19.8714C3.1369 21.5195 5.31092 22.5201 7.44457 23.1834C7.47871 23.1938 7.51489 23.1813 7.53662 23.1532C8.04134 22.4639 8.49125 21.7372 8.877 20.9729C8.89977 20.9282 8.87804 20.8751 8.83151 20.8574C8.11788 20.5867 7.43836 20.2566 6.78471 19.8818C6.733 19.8516 6.72887 19.7776 6.77643 19.7422C6.91398 19.6392 7.05157 19.5319 7.18291 19.4236C7.20668 19.4039 7.23979 19.3997 7.26773 19.4122C11.5619 21.3728 16.2109 21.3728 20.4544 19.4122C20.4824 19.3986 20.5155 19.4028 20.5403 19.4226C20.6717 19.5309 20.8092 19.6392 20.9478 19.7422C20.9954 19.7776 20.9923 19.8516 20.9406 19.8818C20.2869 20.2639 19.6074 20.5867 18.8927 20.8563C18.8462 20.874 18.8255 20.9282 18.8483 20.9729C19.2423 21.7361 19.6922 22.4629 20.1876 23.1521C20.2083 23.1813 20.2455 23.1938 20.2797 23.1834C22.4237 22.5201 24.5977 21.5195 26.842 19.8714C26.8617 19.8568 26.8741 19.8349 26.8762 19.811C27.4233 14.151 25.9598 9.23456 22.9967 4.87613C22.9894 4.86157 22.977 4.85115 22.9625 4.8449ZM9.51827 16.829C8.22542 16.829 7.16015 15.6421 7.16015 14.1844C7.16015 12.7267 8.20476 11.5398 9.51827 11.5398C10.8421 11.5398 11.8971 12.7371 11.8764 14.1844C11.8764 15.6421 10.8317 16.829 9.51827 16.829ZM18.237 16.829C16.9442 16.829 15.8789 15.6421 15.8789 14.1844C15.8789 12.7267 16.9235 11.5398 18.237 11.5398C19.5609 11.5398 20.6158 12.7371 20.5951 14.1844C20.5951 15.6421 19.5609 16.829 18.237 16.829Z" fill="#406AFF"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-components.svg b/public/images/landing-new/features/icon-components.svg
new file mode 100644
index 0000000000..b9a28d5c35
--- /dev/null
+++ b/public/images/landing-new/features/icon-components.svg
@@ -0,0 +1,4 @@
+<svg width="29" height="26" viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7008 2.13655L0.40966 9.05525C-0.136553 9.35863 -0.136553 10.2084 0.40966 10.5118L13.7008 17.4305C14.065 17.6126 14.4899 17.6126 14.854 17.4305L28.1452 10.5118C28.6914 10.2084 28.6914 9.35863 28.1452 9.05525L14.7932 2.13655C14.429 1.95448 14.0649 1.95448 13.7007 2.13655H13.7008Z" fill="#916AFF"/>
+<path d="M28.0841 15.4885L25.5959 14.214C25.4746 14.1533 25.2925 14.1533 25.1105 14.214L15.5819 19.1907C15.157 19.4335 14.6715 19.4941 14.2466 19.4941C13.7612 19.4941 13.3363 19.3728 12.9114 19.1907L3.38335 14.214C3.26204 14.1533 3.07997 14.1533 2.89789 14.214L0.40966 15.4885C-0.136553 15.7919 -0.136553 16.6417 0.40966 16.9451L13.7008 23.8638C14.065 24.0459 14.4899 24.0459 14.854 23.8638L28.1452 16.9451C28.6305 16.6417 28.6305 15.7921 28.0843 15.4885H28.0841Z" fill="#916AFF"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-mobile.svg b/public/images/landing-new/features/icon-mobile.svg
new file mode 100644
index 0000000000..a0593dcfd8
--- /dev/null
+++ b/public/images/landing-new/features/icon-mobile.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="26" viewBox="0 0 15 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.904 2.47354V23.6405L14.9037 23.6406C14.9124 23.6755 14.9182 23.7132 14.9211 23.751C14.9123 24.3904 14.5549 25.0182 13.9678 25.303C13.6975 25.4367 13.4127 25.4948 13.1133 25.4948H5.15601C4.86269 25.4948 4.56872 25.4961 4.27454 25.4974C3.68552 25.5 3.09563 25.5026 2.50834 25.4948C1.53761 25.4832 0.761625 24.6927 0.758719 23.7249C0.757744 23.6615 0.756441 23.5984 0.755141 23.5354C0.752566 23.4108 0.75 23.2866 0.75 23.161V2.34856C0.75 1.66555 1.07551 1.00292 1.71202 0.691942C2.10625 0.498957 2.50048 0.499495 2.91456 0.500061C2.93701 0.500092 2.95951 0.500122 2.98207 0.500122H12.9568H13.1718C13.7909 0.505968 14.3809 0.840194 14.686 1.38657C14.8779 1.72952 14.904 2.09571 14.904 2.47354ZM6.3013 21.8793C6.3013 22.7308 6.9901 23.4196 7.84164 23.4196C8.69317 23.4196 9.38198 22.7279 9.38198 21.8793C9.38198 21.0277 8.69317 20.3389 7.84164 20.3389C6.9901 20.3389 6.3013 21.0277 6.3013 21.8793ZM10.9496 2.37872C10.9407 2.40627 10.9456 2.36176 10.9501 2.32157C10.9524 2.30045 10.9546 2.28053 10.9546 2.27288C10.9546 2.25434 10.9539 2.2358 10.9532 2.21692C10.9525 2.19732 10.9517 2.17735 10.9517 2.15663V1.66255H4.72316V2.24092V2.2758C4.72316 2.30196 4.72316 2.32811 4.72607 2.35427C4.72785 2.35427 4.73292 2.37945 4.73724 2.40091C4.73996 2.41443 4.74238 2.42647 4.7435 2.42984C4.74786 2.44146 4.7515 2.45381 4.75513 2.46616C4.75876 2.47852 4.76239 2.49087 4.76675 2.5025C4.76675 2.50395 4.76748 2.50467 4.76821 2.5054C4.76893 2.50613 4.76966 2.50685 4.76966 2.50831C4.77257 2.51121 4.77547 2.51412 4.77547 2.51703L4.78129 2.52865C4.78681 2.53971 4.79234 2.55193 4.79639 2.56088C4.79872 2.56604 4.80057 2.57012 4.80163 2.57225C4.80336 2.57745 4.81543 2.59505 4.82797 2.61334C4.83646 2.62572 4.84517 2.63843 4.85104 2.64781C4.83941 2.63619 4.8336 2.63328 4.85104 2.65363C4.85611 2.65869 4.85841 2.661 4.85868 2.66079C4.85902 2.66051 4.85596 2.65601 4.85104 2.64781C4.86266 2.66525 4.88882 2.69431 4.88882 2.69431C4.89234 2.69959 4.90968 2.7155 4.9267 2.73111C4.93781 2.7413 4.94878 2.75136 4.95567 2.75825C4.95368 2.75706 4.9518 2.75592 4.9501 2.75489C4.93935 2.74838 4.93559 2.7461 4.95567 2.76116C4.96729 2.76988 4.96439 2.76697 4.95567 2.75825C4.9731 2.76988 5.00217 2.79022 5.00217 2.79022C5.01088 2.79313 5.06029 2.81929 5.08354 2.83382C5.0661 2.82801 5.05739 2.8251 5.08354 2.83672C5.09179 2.83947 5.09548 2.84092 5.09555 2.84076C5.09563 2.84059 5.0912 2.83841 5.08354 2.83382C5.10389 2.83963 5.13876 2.85416 5.13876 2.85416L5.1388 2.85417C5.15348 2.85711 5.25501 2.87742 5.2463 2.88032C5.26374 2.88323 5.27827 2.88323 5.2928 2.88323H5.3393C6.19174 2.89679 7.04545 2.89227 7.89959 2.88775C8.32682 2.88549 8.75416 2.88323 9.18149 2.88323H10.0534H10.2917H10.3411H10.3527H10.3527C10.3847 2.88323 10.4138 2.88323 10.4457 2.88032C10.437 2.88323 10.4312 2.88613 10.4312 2.88613C10.4336 2.88613 10.451 2.88235 10.4638 2.87937C10.4578 2.88032 10.4518 2.88032 10.4457 2.88032C10.4493 2.88032 10.4529 2.87921 10.4579 2.87768C10.461 2.87673 10.4646 2.87562 10.469 2.87451C10.4799 2.8714 10.4905 2.86851 10.501 2.86565C10.5283 2.85822 10.5546 2.85108 10.5809 2.84128C10.5838 2.83908 10.589 2.83665 10.6001 2.83279C10.6027 2.83138 10.6053 2.82994 10.6077 2.82866C10.6104 2.82719 10.6127 2.82591 10.6143 2.8251C10.6311 2.81335 10.6498 2.80257 10.6688 2.79165C10.6827 2.78365 10.6967 2.77557 10.7102 2.76697C10.7117 2.76552 10.7131 2.76479 10.7146 2.76406C10.716 2.76334 10.7175 2.76261 10.7189 2.76116L10.7248 2.75534C10.748 2.735 10.7683 2.71466 10.7916 2.69141C10.7954 2.68765 10.8045 2.67635 10.8139 2.6647C10.8264 2.64929 10.8393 2.63328 10.841 2.63328C10.8526 2.61584 10.8643 2.5984 10.873 2.58096C10.8773 2.5737 10.8817 2.5657 10.8861 2.55771C10.8904 2.54972 10.8948 2.54173 10.8991 2.53446C10.8991 2.53446 10.902 2.52865 10.9049 2.51993C10.9064 2.51848 10.9071 2.51702 10.9079 2.51557C10.9086 2.51412 10.9093 2.51266 10.9108 2.51121C10.9127 2.50636 10.915 2.50085 10.9172 2.49535C10.9217 2.48439 10.9263 2.47342 10.9282 2.46761C10.9329 2.45187 10.9368 2.43443 10.9407 2.41666C10.9435 2.40401 10.9464 2.3912 10.9496 2.37872ZM10.5852 2.83963C10.5879 2.83829 10.5912 2.83695 10.5946 2.83561C10.5912 2.83728 10.5879 2.83873 10.5852 2.83963ZM13.75 4H1.75V19H13.75V4Z" fill="#00A3FF"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-productivity.svg b/public/images/landing-new/features/icon-productivity.svg
new file mode 100644
index 0000000000..ebe7084b3f
--- /dev/null
+++ b/public/images/landing-new/features/icon-productivity.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="26" viewBox="0 0 17 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8196 0.5H4.2712L0.5 13.579H6.73867C6.93482 13.579 7.11832 13.6676 7.23854 13.8194C7.35876 13.9713 7.40306 14.1738 7.35876 14.3573L4.67591 25.5L16.2681 10.5732H9.89641C9.70026 10.5732 9.51043 10.4783 9.39654 10.3265C9.27632 10.1683 9.23835 9.96579 9.28897 9.77597L11.8196 0.5Z" fill="#03E8BF"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-support.svg b/public/images/landing-new/features/icon-support.svg
new file mode 100644
index 0000000000..0a7ce89398
--- /dev/null
+++ b/public/images/landing-new/features/icon-support.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.9656 4.83481C23.9265 7.10809 25.0038 10.0115 25.0006 13.0136C24.9972 16.0157 23.9135 18.9168 21.9476 21.1852L16.8672 16.1048C17.5091 15.2018 17.8553 14.1217 17.8581 13.0138C17.8609 11.9059 17.5199 10.8243 16.8823 9.91801L21.9656 4.83481ZM20.7058 3.56963L15.6261 8.6493C14.7189 7.9974 13.6307 7.64519 12.5134 7.64244C11.3963 7.63945 10.3061 7.98604 9.39571 8.63318L4.31527 3.55274H4.31507C6.5911 1.58085 9.50245 0.496793 12.5138 0.500007C15.5251 0.502997 18.4343 1.5932 20.7058 3.56968L20.7058 3.56963ZM4.33548 22.465L9.41872 17.3818C10.325 18.0193 11.4066 18.3604 12.5145 18.3576C13.6225 18.3548 14.7025 18.0086 15.6055 17.3666L20.686 22.4471C18.4171 24.413 15.5164 25.4966 12.5143 25.5C9.51219 25.5032 6.60906 24.4259 4.33553 22.465H4.33548ZM3.07029 21.2052C1.09361 18.9334 0.00342547 16.0245 7.01672e-06 13.0132C-0.00318184 10.0019 1.08065 7.09059 3.05254 4.81451L8.13399 9.89495L8.13379 9.89514C7.48664 10.8056 7.14005 11.8958 7.14306 13.0128C7.14585 14.1301 7.49801 15.2183 8.14992 16.1256L3.07029 21.2052Z" fill="#FFBD80"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-theme.svg b/public/images/landing-new/features/icon-theme.svg
new file mode 100644
index 0000000000..db59124fae
--- /dev/null
+++ b/public/images/landing-new/features/icon-theme.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0017 0.500022C10.5292 0.499682 8.11241 1.23254 6.05657 2.60581C4.00068 3.97907 2.39821 5.93123 1.452 8.21526C0.505633 10.4993 0.257845 13.0126 0.740012 15.4374C1.22211 17.8623 2.41253 20.0898 4.16062 21.8382C5.90872 23.5865 8.13605 24.7772 10.5607 25.2597C12.9855 25.7422 15.4988 25.4947 17.7831 24.5486C20.0673 23.6026 22.0195 22.0005 23.3932 19.9449C24.7668 17.8893 25.4999 15.4725 25.4999 13C25.4964 9.68632 24.1784 6.50911 21.8355 4.16575C19.4923 1.82239 16.3156 0.504129 13.0019 0.5L13.0017 0.500022ZM1.35355 13C1.35711 9.91192 2.58549 6.95116 4.76916 4.76753C6.95279 2.5839 9.91356 1.35561 13.0017 1.35192V24.6464C9.91377 24.6433 6.95301 23.4153 4.76938 21.2319C2.58575 19.0485 1.35724 16.0879 1.35355 13V13Z" fill="#FFAA8F"/>
+</svg>
diff --git a/public/images/landing-new/features/icon-ts.svg b/public/images/landing-new/features/icon-ts.svg
new file mode 100644
index 0000000000..df3220fc70
--- /dev/null
+++ b/public/images/landing-new/features/icon-ts.svg
@@ -0,0 +1,11 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1676_2383)">
+<path d="M25.25 13C25.25 6.09644 19.6536 0.5 12.75 0.5C5.84644 0.5 0.25 6.09644 0.25 13C0.25 19.9036 5.84644 25.5 12.75 25.5C19.6536 25.5 25.25 19.9036 25.25 13Z" fill="#3178C6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6949 15.6891V17.7512C14.0302 17.9231 14.4266 18.052 14.8844 18.1379C15.3421 18.2238 15.8245 18.2668 16.3317 18.2668C16.826 18.2668 17.2955 18.2195 17.7403 18.125C18.1852 18.0305 18.5753 17.8747 18.9105 17.6578C19.2457 17.4409 19.5111 17.1573 19.7067 16.8071C19.9022 16.457 20 16.0242 20 15.5086C20 15.1349 19.9441 14.8073 19.8324 14.5259C19.7206 14.2445 19.5595 13.9943 19.3489 13.7752C19.1383 13.5561 18.8858 13.3595 18.5914 13.1855C18.297 13.0115 17.9649 12.8472 17.5953 12.6925C17.3245 12.5808 17.0817 12.4723 16.8668 12.3671C16.6519 12.2618 16.4692 12.1544 16.3188 12.0449C16.1684 11.9353 16.0523 11.8193 15.9707 11.6969C15.889 11.5744 15.8482 11.4359 15.8482 11.2812C15.8482 11.1395 15.8847 11.0116 15.9578 10.8978C16.0309 10.7839 16.134 10.6862 16.2672 10.6046C16.4005 10.523 16.5638 10.4596 16.7572 10.4145C16.9506 10.3693 17.1655 10.3468 17.4019 10.3468C17.5738 10.3468 17.7554 10.3597 17.9466 10.3855C18.1379 10.4112 18.3302 10.451 18.5237 10.5047C18.7171 10.5584 18.9051 10.6261 19.0878 10.7077C19.2704 10.7893 19.4391 10.8838 19.5938 10.9912V9.06439C19.2801 8.9441 18.9373 8.85496 18.5656 8.79696C18.1938 8.73896 17.7672 8.70996 17.2859 8.70996C16.7959 8.70996 16.3317 8.76261 15.8933 8.86785C15.455 8.9731 15.0692 9.13742 14.7361 9.36081C14.403 9.58425 14.1398 9.86885 13.9464 10.2147C13.753 10.5605 13.6562 10.974 13.6562 11.4552C13.6562 12.0696 13.8335 12.5937 14.1881 13.0276C14.5427 13.4615 15.081 13.8288 15.8031 14.1296C16.0867 14.2456 16.3511 14.3594 16.596 14.4711C16.841 14.5828 17.0527 14.6988 17.231 14.8191C17.4094 14.9394 17.5502 15.0704 17.6533 15.2122C17.7565 15.354 17.8081 15.5151 17.8081 15.6955C17.8081 15.8287 17.7758 15.9522 17.7113 16.0661C17.6469 16.1799 17.5491 16.2787 17.418 16.3625C17.2869 16.4463 17.1236 16.5118 16.9281 16.559C16.7325 16.6063 16.5036 16.6299 16.2415 16.6299C15.7945 16.6299 15.3518 16.5515 14.9134 16.3947C14.475 16.2379 14.0688 16.0027 13.6949 15.6891ZM10.2282 10.6082H12.8736V8.91593H5.5V10.6082H8.13249V18.1432H10.2282V10.6082Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1676_2383">
+<rect width="25" height="25" fill="white" transform="translate(0.25 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/landing-new/icons-icon.svg b/public/images/landing-new/icons-icon.svg
new file mode 100644
index 0000000000..b9b5328414
--- /dev/null
+++ b/public/images/landing-new/icons-icon.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1291 8.63573e-05H2.41952C1.0856 8.63573e-05 0.000186987 1.0855 0.000186987 2.41942V11.129C0.000186987 12.4629 1.0856 13.5484 2.41952 13.5484H11.1291C12.463 13.5484 13.5485 12.4629 13.5485 11.129V2.41942C13.5485 1.0855 12.4633 8.63573e-05 11.1291 8.63573e-05ZM6.7745 9.67742C6.28239 9.67742 5.81592 9.58562 5.39401 9.42395L3.87112 9.67742L4.06553 8.51165C3.64127 8.02697 3.38745 7.42718 3.38745 6.77448C3.38745 5.17089 4.90394 3.87111 6.77444 3.87111C8.64493 3.87111 10.1614 5.17089 10.1614 6.77448C10.1614 8.37807 8.64499 9.67742 6.7745 9.67742ZM27.5808 16.4517H18.8712C17.5372 16.4517 16.4518 17.5371 16.4518 18.8711V27.5807C16.4518 28.9146 17.5372 30 18.8712 30H27.5808C28.9147 30 30.0001 28.9146 30.0001 27.5807V18.8711C30.0001 17.5369 28.9147 16.4517 27.5808 16.4517ZM25.827 23.4272L22.1501 25.8786C21.9894 25.9852 21.7741 25.8701 21.7741 25.6771V20.7746C21.7741 20.5816 21.9894 20.4658 22.1501 20.5735L25.827 23.0249C25.9708 23.1204 25.9708 23.3313 25.827 23.4272ZM11.1287 16.4517H2.41909C1.08517 16.4517 -0.000244141 17.5371 -0.000244141 18.8711V27.5807C-0.000244141 28.9146 1.08517 30 2.41909 30H11.1287C12.4626 30 13.548 28.9146 13.548 27.5807V18.8711C13.548 17.5369 12.4629 16.4517 11.1287 16.4517ZM9.67701 25.1613C9.67701 25.696 9.24397 26.129 8.70936 26.129H4.83834C4.30371 26.129 3.87069 25.6959 3.87069 25.1613V22.258H9.67701V25.1613ZM9.67701 21.774H3.87069V21.29C3.87069 20.7554 4.30372 20.3224 4.83834 20.3224H8.70936C9.24399 20.3224 9.67701 20.7554 9.67701 21.29V21.774ZM27.5801 0H18.8705C17.5366 0 16.4511 1.08542 16.4511 2.41933V11.1289C16.4511 12.4629 17.5366 13.5483 18.8705 13.5483H27.5801C28.914 13.5483 29.9994 12.4629 29.9994 11.1289V2.41933C29.9994 1.08542 28.914 0 27.5801 0ZM26.6121 8.95154C26.6121 9.08519 26.5037 9.19354 26.3701 9.19354H20.0797C19.9461 9.19354 19.8377 9.08519 19.8377 8.95154V5.79811L23.2247 7.28012L26.6117 5.79811L26.6121 8.95154ZM26.6121 5.27026L23.2251 6.75193L19.8381 5.27026V4.59691C19.8381 4.46325 19.9465 4.3549 20.0801 4.3549H26.3705C26.5041 4.3549 26.6125 4.46325 26.6125 4.59691L26.6121 5.27026Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/overview-icon.svg b/public/images/landing-new/overview-icon.svg
new file mode 100644
index 0000000000..25ede1ee0f
--- /dev/null
+++ b/public/images/landing-new/overview-icon.svg
@@ -0,0 +1,54 @@
+<svg width="62" height="71" viewBox="0 0 62 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.6995 32.561L40.8887 31.4923L44.6304 36.8358V53.4007L57.4594 42.7137V24.5458L51.5795 26.6832L45.6995 32.561Z" fill="url(#paint0_linear_1704_5975)"/>
+<path d="M15.7653 32.561L20.5762 31.4923L16.8344 36.8358V53.4007L4.00545 42.7137V24.5458L9.88538 26.6832L15.7653 32.561Z" fill="url(#paint1_linear_1704_5975)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4385 37.9046L22.7148 31.4924L25.3875 33.0955H36.0783L38.751 31.4924L43.0273 37.9046V61.9504L39.8201 66.7596L36.0783 70.5H25.3875L21.6457 66.7596L18.4385 61.9504V37.9046Z" fill="url(#paint2_linear_1704_5975)"/>
+<path d="M44.6304 63.5536L51.5794 56.607V49.6605L44.6304 55.5383V63.5536Z" fill="url(#paint3_linear_1704_5975)"/>
+<path d="M16.8345 63.5536L9.88546 56.607V49.6605L16.8345 55.5383V63.5536Z" fill="url(#paint4_linear_1704_5975)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7832 0.5L19.5068 10.6527L26.4558 30.958H29.6632V0.5H23.7832ZM31.8013 0.5V30.958H35.543L41.9575 10.6527L37.6812 0.5H31.8013Z" fill="url(#paint5_linear_1704_5975)"/>
+<path d="M26.4561 30.9581L3.47091 22.4084L0.263672 9.04968L20.0416 10.6527L26.9906 30.9581H26.4561Z" fill="url(#paint6_linear_1704_5975)"/>
+<path d="M35.5434 30.9581L58.5286 22.4084L61.7358 9.04968L41.4233 10.6527L35.0089 30.9581H35.5434Z" fill="url(#paint7_linear_1704_5975)"/>
+<path d="M43.0269 9.04961L54.2523 7.98091L46.7687 0.5H39.2852L43.0269 9.04961Z" fill="url(#paint8_linear_1704_5975)"/>
+<path d="M18.4379 9.04961L7.21259 7.98091L14.6961 0.5H22.1797L18.4379 9.04961Z" fill="url(#paint9_linear_1704_5975)"/>
+<defs>
+<linearGradient id="paint0_linear_1704_5975" x1="49.174" y1="24.5458" x2="49.174" y2="53.4007" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1704_5975" x1="12.2908" y1="24.5458" x2="12.2908" y2="53.4007" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1704_5975" x1="30.7329" y1="31.4924" x2="30.7329" y2="70.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint3_linear_1704_5975" x1="48.1049" y1="49.6605" x2="48.1049" y2="63.5536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint4_linear_1704_5975" x1="13.36" y1="49.6605" x2="13.36" y2="63.5536" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint5_linear_1704_5975" x1="30.7322" y1="0.5" x2="30.7322" y2="30.958" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint6_linear_1704_5975" x1="13.6272" y1="9.04968" x2="13.6272" y2="30.9581" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint7_linear_1704_5975" x1="48.3724" y1="9.04968" x2="48.3724" y2="30.9581" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint8_linear_1704_5975" x1="46.7687" y1="0.5" x2="46.7687" y2="9.04961" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+<linearGradient id="paint9_linear_1704_5975" x1="14.6961" y1="0.5" x2="14.6961" y2="9.04961" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D7FF"/>
+<stop offset="1" stop-color="#00AACA"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/landing-new/templates-icon.svg b/public/images/landing-new/templates-icon.svg
new file mode 100644
index 0000000000..cad09cb124
--- /dev/null
+++ b/public/images/landing-new/templates-icon.svg
@@ -0,0 +1,5 @@
+<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0299 0.000901703C17.0188 5.23287e-08 17.0067 0 16.9936 0C16.823 0 16.6605 0.0383176 16.516 0.105935L16.523 0.103005L1.49333 7.04051C1.10361 7.22331 0.837891 7.61303 0.837891 8.0634C0.837891 8.51374 1.10341 8.90348 1.48611 9.08334L1.4931 9.08627L16.5227 16.0238C16.6611 16.0894 16.8236 16.1268 16.9943 16.1268C17.1649 16.1268 17.3274 16.0885 17.473 16.0208L17.466 16.0238L32.4957 9.08627C32.8854 8.90347 33.1511 8.51376 33.1511 8.06339C33.1511 7.61304 32.8856 7.22331 32.5029 7.04345L32.4959 7.04052L17.4663 0.10301C17.338 0.0423763 17.1895 0.00496237 17.0321 0L17.0299 0.000901703ZM16.9936 2.36893L29.3343 8.06406L16.9936 13.7603L4.65287 8.06406L16.9936 2.3698V2.36893Z" fill="#03C4E8"/>
+<path d="M32.0635 13.867C32.0553 13.867 32.0452 13.8661 32.0362 13.8661C31.8595 13.8661 31.6929 13.9064 31.5444 13.9792L31.5514 13.9763L16.9931 20.6957L2.43494 13.9763C2.29655 13.9107 2.13403 13.8733 1.9634 13.8733C1.34039 13.8733 0.836426 14.3782 0.836426 15.0003C0.836426 15.4518 1.10195 15.8404 1.48465 16.0202L1.49164 16.0232L16.5213 22.9607C16.6597 23.0263 16.8222 23.0637 16.9928 23.0637C17.1634 23.0637 17.3259 23.0254 17.4716 22.9577L17.4646 22.9607L32.4942 16.0232C32.892 15.8435 33.1637 15.4506 33.1637 14.9931C33.1637 14.3802 32.6739 13.8814 32.0639 13.8661H32.063L32.0635 13.867Z" fill="#03C4E8"/>
+<path d="M32.0635 20.8033C32.0553 20.8033 32.0452 20.8024 32.0362 20.8024C31.8595 20.8024 31.6929 20.8427 31.5444 20.9155L31.5514 20.9126L16.9931 27.632L2.43494 20.9126C2.29655 20.847 2.13403 20.8096 1.9634 20.8096C1.34039 20.8096 0.836426 21.3145 0.836426 21.9366C0.836426 22.388 1.10195 22.7766 1.48465 22.9565L1.49164 22.9594L16.5213 29.8969C16.6597 29.9625 16.8222 30 16.9928 30C17.1634 30 17.3259 29.9616 17.4716 29.894L17.4646 29.8969L32.4942 22.9594C32.892 22.7798 33.1637 22.3869 33.1637 21.9293C33.1637 21.3165 32.6739 20.8177 32.0639 20.8024H32.063L32.0635 20.8033Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/landing-new/templates/apollo-dark.jpg b/public/images/landing-new/templates/apollo-dark.jpg
new file mode 100644
index 0000000000..b55fb3da93
Binary files /dev/null and b/public/images/landing-new/templates/apollo-dark.jpg differ
diff --git a/public/images/landing-new/templates/apollo-light.jpg b/public/images/landing-new/templates/apollo-light.jpg
new file mode 100644
index 0000000000..c515672e15
Binary files /dev/null and b/public/images/landing-new/templates/apollo-light.jpg differ
diff --git a/public/images/landing-new/templates/atlantis-dark.jpeg b/public/images/landing-new/templates/atlantis-dark.jpeg
new file mode 100644
index 0000000000..d7c7b6567c
Binary files /dev/null and b/public/images/landing-new/templates/atlantis-dark.jpeg differ
diff --git a/public/images/landing-new/templates/atlantis-light.jpeg b/public/images/landing-new/templates/atlantis-light.jpeg
new file mode 100644
index 0000000000..d40f1ab667
Binary files /dev/null and b/public/images/landing-new/templates/atlantis-light.jpeg differ
diff --git a/public/images/landing-new/templates/diamond-dark.jpeg b/public/images/landing-new/templates/diamond-dark.jpeg
new file mode 100644
index 0000000000..b515469f12
Binary files /dev/null and b/public/images/landing-new/templates/diamond-dark.jpeg differ
diff --git a/public/images/landing-new/templates/diamond-light.jpeg b/public/images/landing-new/templates/diamond-light.jpeg
new file mode 100644
index 0000000000..d933584c14
Binary files /dev/null and b/public/images/landing-new/templates/diamond-light.jpeg differ
diff --git a/public/images/landing-new/templates/freya-dark.jpeg b/public/images/landing-new/templates/freya-dark.jpeg
new file mode 100644
index 0000000000..daccc597c8
Binary files /dev/null and b/public/images/landing-new/templates/freya-dark.jpeg differ
diff --git a/public/images/landing-new/templates/freya-light.jpeg b/public/images/landing-new/templates/freya-light.jpeg
new file mode 100644
index 0000000000..c43fd4bb11
Binary files /dev/null and b/public/images/landing-new/templates/freya-light.jpeg differ
diff --git a/public/images/landing-new/templates/templates-dark.png b/public/images/landing-new/templates/templates-dark.png
new file mode 100644
index 0000000000..c059238a4e
Binary files /dev/null and b/public/images/landing-new/templates/templates-dark.png differ
diff --git a/public/images/landing-new/templates/templates-light.png b/public/images/landing-new/templates/templates-light.png
new file mode 100644
index 0000000000..173102a3df
Binary files /dev/null and b/public/images/landing-new/templates/templates-light.png differ
diff --git a/public/images/landing-new/templates/templates-text-dark.png b/public/images/landing-new/templates/templates-text-dark.png
new file mode 100644
index 0000000000..c059238a4e
Binary files /dev/null and b/public/images/landing-new/templates/templates-text-dark.png differ
diff --git a/public/images/landing-new/templates/templates-text-light.png b/public/images/landing-new/templates/templates-text-light.png
new file mode 100644
index 0000000000..173102a3df
Binary files /dev/null and b/public/images/landing-new/templates/templates-text-light.png differ
diff --git a/public/images/landing-new/templates/ultima-dark.jpeg b/public/images/landing-new/templates/ultima-dark.jpeg
new file mode 100644
index 0000000000..b0af529204
Binary files /dev/null and b/public/images/landing-new/templates/ultima-dark.jpeg differ
diff --git a/public/images/landing-new/templates/ultima-light.jpeg b/public/images/landing-new/templates/ultima-light.jpeg
new file mode 100644
index 0000000000..48bf105842
Binary files /dev/null and b/public/images/landing-new/templates/ultima-light.jpeg differ
diff --git a/public/images/landing-new/watch.png b/public/images/landing-new/watch.png
new file mode 100644
index 0000000000..e1612bbe5d
Binary files /dev/null and b/public/images/landing-new/watch.png differ
diff --git a/public/images/landing-new/wave-dark-alt.svg b/public/images/landing-new/wave-dark-alt.svg
new file mode 100644
index 0000000000..88b9ce24fb
--- /dev/null
+++ b/public/images/landing-new/wave-dark-alt.svg
@@ -0,0 +1,9 @@
+<svg width="1440" height="322" viewBox="0 0 1440 322" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M707.129 217.954C497.129 155.127 287.129 0 77.1292 0C49.7181 0 26.1776 3.57767 -1 10.5V322H77.1292H707.129H1337.13H1439.13V159.089C1404.49 156.957 1372.26 156.753 1337.13 159.089C1127.13 171.305 917.129 280.78 707.129 217.954Z" fill="url(#paint0_linear_1615_1550)"/>
+<defs>
+<linearGradient id="paint0_linear_1615_1550" x1="986" y1="66" x2="975" y2="322" gradientUnits="userSpaceOnUse">
+<stop stop-color="#061B38"/>
+<stop offset="1" stop-color="#030B17" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/landing-new/wave-dark.svg b/public/images/landing-new/wave-dark.svg
new file mode 100644
index 0000000000..0555f5f82e
--- /dev/null
+++ b/public/images/landing-new/wave-dark.svg
@@ -0,0 +1,9 @@
+<svg width="1439" height="452" viewBox="0 0 1439 452" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M690 287.954C900 225.127 1110 0 1320 0C1360.42 0 1400.83 8.33874 1440.5 22.6151V452H1320H690H60H0V197.443C211.689 252.303 506.67 342.801 690 287.954Z" fill="url(#paint0_linear_1600_1392)"/>
+<defs>
+<linearGradient id="paint0_linear_1600_1392" x1="561.99" y1="138.5" x2="561.99" y2="452" gradientUnits="userSpaceOnUse">
+<stop stop-color="#061B38"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/landing-new/wave-light-alt.svg b/public/images/landing-new/wave-light-alt.svg
new file mode 100644
index 0000000000..2d5d69fbab
--- /dev/null
+++ b/public/images/landing-new/wave-light-alt.svg
@@ -0,0 +1,9 @@
+<svg width="1440" height="322" viewBox="0 0 1440 322" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M707.129 217.954C497.129 155.127 287.129 0 77.1292 0C49.7181 0 26.1776 3.57767 -1 10.5V322H77.1292H707.129H1337.13H1439.13V159.089C1404.49 156.957 1372.26 156.753 1337.13 159.089C1127.13 171.305 917.129 280.78 707.129 217.954Z" fill="url(#paint0_linear_1757_1351)"/>
+<defs>
+<linearGradient id="paint0_linear_1757_1351" x1="861.817" y1="98.6659" x2="861.817" y2="322" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5E7FF"/>
+<stop offset="1" stop-color="#EDF5FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/landing-new/wave-light.svg b/public/images/landing-new/wave-light.svg
new file mode 100644
index 0000000000..ca21db9185
--- /dev/null
+++ b/public/images/landing-new/wave-light.svg
@@ -0,0 +1,9 @@
+<svg width="1439" height="452" viewBox="0 0 1439 452" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M690 287.954C900 225.127 1110 0 1320 0C1360.42 0 1400.83 8.33874 1440.5 22.6151V452H1320H690H60H0V197.443C211.689 252.303 506.67 342.801 690 287.954Z" fill="url(#paint0_linear_1704_7459)"/>
+<defs>
+<linearGradient id="paint0_linear_1704_7459" x1="561.99" y1="138.5" x2="561.99" y2="452" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D5E7FF"/>
+<stop offset="1" stop-color="#EDF5FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/images/landing-new/whouses/airbus-dark.svg b/public/images/landing-new/whouses/airbus-dark.svg
new file mode 100644
index 0000000000..5ae7a37de9
--- /dev/null
+++ b/public/images/landing-new/whouses/airbus-dark.svg
@@ -0,0 +1,18 @@
+<svg width="87" height="16" viewBox="0 0 87 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7146 7.90211C14.6419 4.20105 11.7967 1.19474 8.29614 1.19474C4.79324 1.19395 2.02219 4.27842 2.02219 7.97947H0.782715C0.782715 3.89237 3.84587 0.576579 7.71193 0.5C11.578 0.5 14.788 3.81579 14.788 7.90211H14.7146Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9078 7.63672C14.9078 4.62883 12.6467 2.23909 9.80227 2.23909C6.95701 2.23909 4.91543 4.62962 4.91543 7.63672H3.52832C3.52832 4.24356 6.15411 1.54435 9.36332 1.46777C12.4999 1.46777 15.0531 4.55146 15.1265 7.55935L14.907 7.63672H14.9078Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6434 7.62361C14.6434 5.4644 12.8923 3.69045 10.7773 3.69045C8.66234 3.69045 7.12998 5.4644 7.12998 7.70097H5.81787C5.81787 5.07834 7.71419 2.91992 10.1939 2.91992C12.6744 2.91992 14.6434 5.07834 14.7168 7.62361H14.6434Z" fill="#191919"/>
+<mask id="mask0_1676_2195" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="15" height="8">
+<path d="M0.782715 8.02051V15.5H14.8606V8.02051H0.782715Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask0_1676_2195)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.928767 8.09788C0.928767 11.7989 3.77324 14.806 7.27456 14.806C10.8485 14.806 13.6211 11.7223 13.6211 8.02051H14.8606C14.8606 12.1076 11.724 15.5 7.85798 15.5C3.99193 15.5 0.855346 12.1842 0.782715 8.09788H0.928767Z" fill="#191919"/>
+</g>
+<mask id="mask1_1676_2195" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="13" height="7">
+<path d="M0.782715 8.02051V14.1895H12.3075V8.02051H0.782715Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask1_1676_2195)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.928767 8.02051C0.928767 11.0284 3.18982 13.4181 6.03429 13.4181C8.87956 13.4181 10.9946 11.0276 10.9211 8.02051H12.3075C12.3075 11.4137 9.68166 14.1895 6.54508 14.1895C3.33587 14.1895 0.782715 11.1058 0.782715 8.09788L0.929557 8.02051H0.928767Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.782715 7.83597C0.855346 9.99439 2.6064 11.7675 4.64877 11.7675C6.76456 11.7675 8.29614 9.99439 8.29614 7.7586H9.60824C9.60824 10.3797 7.71193 12.5397 5.23219 12.5397C2.75245 12.5397 0.782715 10.457 0.782715 7.83597ZM21.8238 13.4199L22.4798 11.8781H26.1272L26.3459 13.4199H29.9932L27.9509 1.46729H24.2301L18.1748 13.4199H21.8222H21.8238ZM25.9085 9.41018H23.574L25.4703 5.09176L25.9085 9.41018ZM31.4506 13.4199L33.4203 1.46807H37.1403L35.1706 13.4199H31.4506ZM40.9748 13.4199L41.6317 9.25623H43.0906C43.528 9.25623 43.8927 9.3336 44.1114 9.41018C44.3301 9.56492 44.4761 9.71886 44.5496 9.95018C44.6222 10.1815 44.6222 10.4894 44.5496 10.8754L44.4761 11.8007C44.3301 12.572 44.3301 13.1112 44.3301 13.4199H48.1235V13.0347C48.0509 13.0347 47.9048 13.0347 47.9048 12.9573C47.8322 12.8807 47.8322 12.726 47.9048 12.4173L48.1969 10.5668C48.2696 9.71886 48.2696 9.10228 48.0509 8.7936C47.8322 8.40834 47.394 8.09886 46.7372 7.79097C47.1027 7.71439 47.394 7.55965 47.6861 7.40571C48.0509 7.09781 48.3422 6.78834 48.5609 6.40307C48.853 5.94044 48.999 5.47781 49.1451 4.86044C49.2177 4.3986 49.2177 4.01255 49.1451 3.70465C49.0828 3.37589 48.9588 3.06192 48.7796 2.77939C48.5765 2.48733 48.3309 2.22734 48.0509 2.00807C47.6861 1.85334 47.3214 1.69939 46.8114 1.62202C46.1594 1.52056 45.5007 1.4691 44.8409 1.46807H39.3698L37.4009 13.4207H40.9756L40.9748 13.4199ZM42.4338 4.3986H44.2575C44.8417 4.3986 45.2064 4.47518 45.4251 4.7065C45.5703 4.86044 45.6438 5.16992 45.5703 5.47781C45.4977 5.86307 45.3517 6.17176 45.0603 6.32571C44.8409 6.55702 44.4035 6.6336 43.8201 6.6336H42.069L42.4338 4.3986ZM56.1248 8.40755C56.8551 8.40755 57.2932 8.56228 57.5119 8.71623C57.7306 8.94676 57.8032 9.17886 57.7306 9.56413C57.6572 9.87202 57.5119 10.1807 57.2198 10.412C56.9277 10.5668 56.4903 10.7207 55.7609 10.7207H54.2293L54.594 8.40755H56.1256H56.1248ZM55.9069 13.4199C56.7817 13.4199 57.3659 13.3425 57.7306 13.266C58.1303 13.1722 58.5207 13.043 58.8974 12.8799C59.3348 12.6486 59.6269 12.4947 59.8456 12.2633C60.2103 12.032 60.4298 11.646 60.6477 11.2607C60.9128 10.8387 61.0868 10.366 61.1585 9.87281C61.2311 9.17886 61.1585 8.56228 60.9398 8.09886C60.6477 7.55965 60.2838 7.25097 59.7003 7.09623C60.7938 6.40307 61.4506 5.55439 61.5967 4.55176C61.8153 3.47255 61.5232 2.70202 60.7211 2.16202C60.1369 1.69939 59.1896 1.46729 57.7306 1.46729H52.1869L50.2172 13.4199H55.9069ZM56.4903 4.1665C57.0003 4.1665 57.3659 4.24386 57.5119 4.24386C57.6066 4.27612 57.694 4.32675 57.769 4.39287C57.8441 4.45898 57.9054 4.53927 57.9493 4.62913C58.0953 4.78307 58.0953 5.01439 58.0953 5.24571C58.0219 5.55439 57.8767 5.78571 57.5846 6.01702C57.3659 6.17176 56.9277 6.32492 56.3451 6.32492H54.958L55.3235 4.1665H56.4903ZM64.3748 1.46807H68.0222L66.7827 8.87018C66.7093 9.33281 66.7093 9.71807 66.7827 9.94939C66.8553 10.1807 67.0014 10.4128 67.2927 10.5668C67.5848 10.7207 67.8769 10.7981 68.2409 10.7981C68.7517 10.7981 69.2625 10.6433 69.5538 10.3354C69.9185 10.0275 70.138 9.48676 70.2832 8.87018L71.5227 1.46807H75.1701L74.0032 8.48492C73.858 9.33281 73.7111 10.0268 73.4932 10.5668C73.2713 11.0464 72.9759 11.4886 72.6177 11.8773C72.253 12.2633 71.8156 12.6486 71.3782 12.8799C70.8799 13.1882 70.3392 13.422 69.7732 13.5739C69.1164 13.6512 68.4595 13.7286 67.8035 13.7286C67.0014 13.7286 66.3446 13.6512 65.7611 13.5739C65.1769 13.4199 64.7396 13.1886 64.3748 12.8799C63.9375 12.572 63.6461 12.2633 63.4267 11.8773C63.208 11.492 63.0619 10.952 63.0619 10.3354C62.9893 9.94939 63.0619 9.25544 63.208 8.40755L64.3748 1.46807ZM86.6459 5.2465H83.0711C83.0711 4.93781 82.9251 4.62992 82.779 4.47518C82.5603 4.32123 82.2682 4.24386 81.8317 4.24386C81.3935 4.24386 81.0288 4.32123 80.8101 4.47518C80.5914 4.62992 80.518 4.78386 80.4453 5.01518C80.4453 5.2465 80.4453 5.32307 80.5914 5.47781C80.7367 5.63176 81.1022 5.78571 81.7582 5.94044L83.1446 6.32571C84.384 6.71176 85.2596 7.17439 85.6969 7.79097C86.1351 8.40834 86.2811 9.1015 86.1351 9.95018C85.989 10.6441 85.7703 11.1841 85.4056 11.7233C85.0409 12.2633 84.6027 12.726 84.1661 13.0339C83.728 13.3433 83.1446 13.5747 82.4877 13.806C81.8309 13.9599 81.1022 14.0373 80.3719 14.0373C79.6432 14.0373 78.9138 13.9599 78.2569 13.7286C77.6009 13.4973 77.0901 13.1886 76.7253 12.8033C76.3606 12.4173 76.0685 11.9547 75.9224 11.4154C75.8498 11.0294 75.8498 10.5668 75.8498 10.0268H79.4246C79.4246 10.4128 79.5698 10.7215 79.7885 10.8754C80.008 11.1068 80.4453 11.1833 81.028 11.1833C81.5396 11.1833 81.9043 11.1068 82.123 10.952C82.3417 10.7981 82.4151 10.6441 82.4877 10.4128C82.4877 10.1815 82.4877 9.95018 82.3417 9.79544C82.1956 9.64149 81.8309 9.48755 81.1748 9.3336L79.9353 9.02571C79.3511 8.87097 78.6943 8.63886 78.1835 8.33097C77.6735 8.02307 77.2361 7.63623 77.0174 7.09702C76.798 6.63439 76.798 6.09439 76.8714 5.40044C77.0174 4.70728 77.2361 4.16729 77.6009 3.62729C77.941 3.12318 78.3896 2.70157 78.9138 2.39334C79.3511 2.00807 79.9346 1.85334 80.518 1.69939C81.0889 1.54679 81.6773 1.46903 82.2682 1.46807C82.9985 1.46807 83.5819 1.54544 84.1653 1.69939C84.7495 1.85334 85.1127 2.08465 85.4782 2.31597C85.7703 2.54807 85.989 2.85597 86.1351 3.16465C86.353 3.47255 86.4272 3.78123 86.499 4.08992C86.5724 4.39781 86.6451 4.78386 86.6451 5.2465" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/airbus-light.svg b/public/images/landing-new/whouses/airbus-light.svg
new file mode 100644
index 0000000000..d7d57113c7
--- /dev/null
+++ b/public/images/landing-new/whouses/airbus-light.svg
@@ -0,0 +1,18 @@
+<svg width="87" height="16" viewBox="0 0 87 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7146 7.90211C14.6419 4.20105 11.7967 1.19474 8.29614 1.19474C4.79324 1.19395 2.02219 4.27842 2.02219 7.97947H0.782715C0.782715 3.89237 3.84587 0.576579 7.71193 0.5C11.578 0.5 14.788 3.81579 14.788 7.90211H14.7146Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9078 7.63672C14.9078 4.62883 12.6467 2.23909 9.80227 2.23909C6.95701 2.23909 4.91543 4.62962 4.91543 7.63672H3.52832C3.52832 4.24356 6.15411 1.54435 9.36332 1.46777C12.4999 1.46777 15.0531 4.55146 15.1265 7.55935L14.907 7.63672H14.9078Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6434 7.62361C14.6434 5.4644 12.8923 3.69045 10.7773 3.69045C8.66234 3.69045 7.12998 5.4644 7.12998 7.70097H5.81787C5.81787 5.07834 7.71419 2.91992 10.1939 2.91992C12.6744 2.91992 14.6434 5.07834 14.7168 7.62361H14.6434Z" fill="white"/>
+<mask id="mask0_1676_2195" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="15" height="8">
+<path d="M0.782715 8.02051V15.5H14.8606V8.02051H0.782715Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1676_2195)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.928767 8.09788C0.928767 11.7989 3.77324 14.806 7.27456 14.806C10.8485 14.806 13.6211 11.7223 13.6211 8.02051H14.8606C14.8606 12.1076 11.724 15.5 7.85798 15.5C3.99193 15.5 0.855346 12.1842 0.782715 8.09788H0.928767Z" fill="white"/>
+</g>
+<mask id="mask1_1676_2195" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="8" width="13" height="7">
+<path d="M0.782715 8.02051V14.1895H12.3075V8.02051H0.782715Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1676_2195)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.928767 8.02051C0.928767 11.0284 3.18982 13.4181 6.03429 13.4181C8.87956 13.4181 10.9946 11.0276 10.9211 8.02051H12.3075C12.3075 11.4137 9.68166 14.1895 6.54508 14.1895C3.33587 14.1895 0.782715 11.1058 0.782715 8.09788L0.929557 8.02051H0.928767Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.782715 7.83597C0.855346 9.99439 2.6064 11.7675 4.64877 11.7675C6.76456 11.7675 8.29614 9.99439 8.29614 7.7586H9.60824C9.60824 10.3797 7.71193 12.5397 5.23219 12.5397C2.75245 12.5397 0.782715 10.457 0.782715 7.83597ZM21.8238 13.4199L22.4798 11.8781H26.1272L26.3459 13.4199H29.9932L27.9509 1.46729H24.2301L18.1748 13.4199H21.8222H21.8238ZM25.9085 9.41018H23.574L25.4703 5.09176L25.9085 9.41018ZM31.4506 13.4199L33.4203 1.46807H37.1403L35.1706 13.4199H31.4506ZM40.9748 13.4199L41.6317 9.25623H43.0906C43.528 9.25623 43.8927 9.3336 44.1114 9.41018C44.3301 9.56492 44.4761 9.71886 44.5496 9.95018C44.6222 10.1815 44.6222 10.4894 44.5496 10.8754L44.4761 11.8007C44.3301 12.572 44.3301 13.1112 44.3301 13.4199H48.1235V13.0347C48.0509 13.0347 47.9048 13.0347 47.9048 12.9573C47.8322 12.8807 47.8322 12.726 47.9048 12.4173L48.1969 10.5668C48.2696 9.71886 48.2696 9.10228 48.0509 8.7936C47.8322 8.40834 47.394 8.09886 46.7372 7.79097C47.1027 7.71439 47.394 7.55965 47.6861 7.40571C48.0509 7.09781 48.3422 6.78834 48.5609 6.40307C48.853 5.94044 48.999 5.47781 49.1451 4.86044C49.2177 4.3986 49.2177 4.01255 49.1451 3.70465C49.0828 3.37589 48.9588 3.06192 48.7796 2.77939C48.5765 2.48733 48.3309 2.22734 48.0509 2.00807C47.6861 1.85334 47.3214 1.69939 46.8114 1.62202C46.1594 1.52056 45.5007 1.4691 44.8409 1.46807H39.3698L37.4009 13.4207H40.9756L40.9748 13.4199ZM42.4338 4.3986H44.2575C44.8417 4.3986 45.2064 4.47518 45.4251 4.7065C45.5703 4.86044 45.6438 5.16992 45.5703 5.47781C45.4977 5.86307 45.3517 6.17176 45.0603 6.32571C44.8409 6.55702 44.4035 6.6336 43.8201 6.6336H42.069L42.4338 4.3986ZM56.1248 8.40755C56.8551 8.40755 57.2932 8.56228 57.5119 8.71623C57.7306 8.94676 57.8032 9.17886 57.7306 9.56413C57.6572 9.87202 57.5119 10.1807 57.2198 10.412C56.9277 10.5668 56.4903 10.7207 55.7609 10.7207H54.2293L54.594 8.40755H56.1256H56.1248ZM55.9069 13.4199C56.7817 13.4199 57.3659 13.3425 57.7306 13.266C58.1303 13.1722 58.5207 13.043 58.8974 12.8799C59.3348 12.6486 59.6269 12.4947 59.8456 12.2633C60.2103 12.032 60.4298 11.646 60.6477 11.2607C60.9128 10.8387 61.0868 10.366 61.1585 9.87281C61.2311 9.17886 61.1585 8.56228 60.9398 8.09886C60.6477 7.55965 60.2838 7.25097 59.7003 7.09623C60.7938 6.40307 61.4506 5.55439 61.5967 4.55176C61.8153 3.47255 61.5232 2.70202 60.7211 2.16202C60.1369 1.69939 59.1896 1.46729 57.7306 1.46729H52.1869L50.2172 13.4199H55.9069ZM56.4903 4.1665C57.0003 4.1665 57.3659 4.24386 57.5119 4.24386C57.6066 4.27612 57.694 4.32675 57.769 4.39287C57.8441 4.45898 57.9054 4.53927 57.9493 4.62913C58.0953 4.78307 58.0953 5.01439 58.0953 5.24571C58.0219 5.55439 57.8767 5.78571 57.5846 6.01702C57.3659 6.17176 56.9277 6.32492 56.3451 6.32492H54.958L55.3235 4.1665H56.4903ZM64.3748 1.46807H68.0222L66.7827 8.87018C66.7093 9.33281 66.7093 9.71807 66.7827 9.94939C66.8553 10.1807 67.0014 10.4128 67.2927 10.5668C67.5848 10.7207 67.8769 10.7981 68.2409 10.7981C68.7517 10.7981 69.2625 10.6433 69.5538 10.3354C69.9185 10.0275 70.138 9.48676 70.2832 8.87018L71.5227 1.46807H75.1701L74.0032 8.48492C73.858 9.33281 73.7111 10.0268 73.4932 10.5668C73.2713 11.0464 72.9759 11.4886 72.6177 11.8773C72.253 12.2633 71.8156 12.6486 71.3782 12.8799C70.8799 13.1882 70.3392 13.422 69.7732 13.5739C69.1164 13.6512 68.4595 13.7286 67.8035 13.7286C67.0014 13.7286 66.3446 13.6512 65.7611 13.5739C65.1769 13.4199 64.7396 13.1886 64.3748 12.8799C63.9375 12.572 63.6461 12.2633 63.4267 11.8773C63.208 11.492 63.0619 10.952 63.0619 10.3354C62.9893 9.94939 63.0619 9.25544 63.208 8.40755L64.3748 1.46807ZM86.6459 5.2465H83.0711C83.0711 4.93781 82.9251 4.62992 82.779 4.47518C82.5603 4.32123 82.2682 4.24386 81.8317 4.24386C81.3935 4.24386 81.0288 4.32123 80.8101 4.47518C80.5914 4.62992 80.518 4.78386 80.4453 5.01518C80.4453 5.2465 80.4453 5.32307 80.5914 5.47781C80.7367 5.63176 81.1022 5.78571 81.7582 5.94044L83.1446 6.32571C84.384 6.71176 85.2596 7.17439 85.6969 7.79097C86.1351 8.40834 86.2811 9.1015 86.1351 9.95018C85.989 10.6441 85.7703 11.1841 85.4056 11.7233C85.0409 12.2633 84.6027 12.726 84.1661 13.0339C83.728 13.3433 83.1446 13.5747 82.4877 13.806C81.8309 13.9599 81.1022 14.0373 80.3719 14.0373C79.6432 14.0373 78.9138 13.9599 78.2569 13.7286C77.6009 13.4973 77.0901 13.1886 76.7253 12.8033C76.3606 12.4173 76.0685 11.9547 75.9224 11.4154C75.8498 11.0294 75.8498 10.5668 75.8498 10.0268H79.4246C79.4246 10.4128 79.5698 10.7215 79.7885 10.8754C80.008 11.1068 80.4453 11.1833 81.028 11.1833C81.5396 11.1833 81.9043 11.1068 82.123 10.952C82.3417 10.7981 82.4151 10.6441 82.4877 10.4128C82.4877 10.1815 82.4877 9.95018 82.3417 9.79544C82.1956 9.64149 81.8309 9.48755 81.1748 9.3336L79.9353 9.02571C79.3511 8.87097 78.6943 8.63886 78.1835 8.33097C77.6735 8.02307 77.2361 7.63623 77.0174 7.09702C76.798 6.63439 76.798 6.09439 76.8714 5.40044C77.0174 4.70728 77.2361 4.16729 77.6009 3.62729C77.941 3.12318 78.3896 2.70157 78.9138 2.39334C79.3511 2.00807 79.9346 1.85334 80.518 1.69939C81.0889 1.54679 81.6773 1.46903 82.2682 1.46807C82.9985 1.46807 83.5819 1.54544 84.1653 1.69939C84.7495 1.85334 85.1127 2.08465 85.4782 2.31597C85.7703 2.54807 85.989 2.85597 86.1351 3.16465C86.353 3.47255 86.4272 3.78123 86.499 4.08992C86.5724 4.39781 86.6451 4.78386 86.6451 5.2465" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/amex-dark.svg b/public/images/landing-new/whouses/amex-dark.svg
new file mode 100644
index 0000000000..100ce2d72e
--- /dev/null
+++ b/public/images/landing-new/whouses/amex-dark.svg
@@ -0,0 +1,3 @@
+<svg width="81" height="30" viewBox="0 0 81 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5785 7.45714L6.02279 3.58L4.47493 7.45714H7.57922H7.5785ZM41.8692 5.91429C41.5564 6.10786 41.1871 6.11429 40.7442 6.11429H37.9814V3.95429H40.7814C41.1785 3.95429 41.5914 3.97286 41.8599 4.13C42.1556 4.27143 42.3385 4.57286 42.3385 4.99C42.3385 5.415 42.1642 5.75643 41.8692 5.91429ZM61.5778 7.45786L60.0035 3.58071L58.4392 7.45786H61.5778ZM24.8399 11.655H22.5085L22.4999 4.03714L19.2028 11.6543H17.2056L13.8999 4.03V11.6543H9.27422L8.40064 9.485H3.66493L2.78207 11.6543H0.312073L4.38564 1.92857H7.76422L11.6321 11.1364V1.92857H15.3435L18.3199 8.52643L21.0528 1.92857H24.8385V11.6543H24.8392L24.8399 11.655ZM34.1321 11.655H26.5342V1.92857H34.1314V3.95357H28.8085V5.70714H34.0035V7.70143H28.8085V9.64286H34.1314V11.6543L34.1321 11.655ZM44.8428 4.54786C44.8428 6.09929 43.8306 6.9 43.2406 7.14071C43.7385 7.33429 44.1635 7.67643 44.3656 7.96C44.6871 8.44357 44.7421 8.87571 44.7421 9.74429V11.655H42.4485L42.4399 10.4286C42.4399 9.84286 42.4942 9.00143 42.0806 8.53357C41.7485 8.19143 41.2421 8.11714 40.4235 8.11714H37.9821V11.655H35.7071V1.92857H40.9378C42.0999 1.92857 42.9564 1.96 43.6914 2.39429C44.4114 2.82857 44.8421 3.46286 44.8421 4.54786H44.8428ZM48.4821 11.655H46.1621V1.92857H48.4821V11.6543V11.655ZM75.4021 11.655H72.1792L67.8692 4.355V11.655H63.2378L62.3521 9.48571H57.6285L56.7699 11.655H54.1092C53.0035 11.655 51.6042 11.405 50.8114 10.5793C50.0121 9.75357 49.5964 8.635 49.5964 6.86643C49.5964 5.42357 49.8449 4.105 50.8221 3.06357C51.5571 2.28571 52.7078 1.92857 54.2749 1.92857H56.4771V4.01214H54.3214C53.4914 4.01214 53.0228 4.13857 52.5714 4.58857C52.1835 4.99786 51.9178 5.77214 51.9178 6.79143C51.9178 7.83357 52.1206 8.58429 52.5428 9.07572C52.8928 9.46071 53.5292 9.57714 54.1285 9.57714H55.1499L58.3535 1.92857H61.7606L65.6114 11.1279V1.92857H69.0742L73.0714 8.70214V1.92857H75.4007V11.6543L75.4021 11.655ZM0.285645 13.5643H4.17136L5.04779 11.4043H7.00922L7.88279 13.5643H15.5278V11.9129L16.2099 13.5714H20.1792L20.8614 11.8879V13.5643H39.8614L39.8521 10.0186H40.2199C40.4771 10.0271 40.5521 10.0521 40.5521 10.4864V13.565H50.3785V12.7386C51.1714 13.1729 52.4042 13.5643 54.0264 13.5643H58.1606L59.0449 11.4043H61.0064L61.8721 13.5643H69.8385V11.5121L71.0449 13.5643H77.4285V0H71.1106V1.60214L70.2256 0H63.7428V1.60214L62.9306 0H54.1735C52.7078 0 51.4199 0.209286 50.3785 0.792143V0H44.3356V0.792143C43.6735 0.191429 42.7714 0 41.7678 0H19.6906L18.2092 3.50357L16.6878 0H9.73422V1.60214L8.96993 0H3.03993L0.285645 6.44929V13.5643ZM80.2856 20.4314H76.1749C75.7649 20.4314 75.4921 20.4471 75.2621 20.6071C75.0242 20.7643 74.9328 20.9979 74.9328 21.3064C74.9328 21.6729 75.1335 21.9229 75.4256 22.0307C75.6642 22.1157 75.9192 22.1407 76.2949 22.1407L77.5178 22.1743C78.7514 22.2057 79.5749 22.4243 80.0764 22.9564C80.1678 23.0307 80.2228 23.1136 80.2856 23.1971V20.4314ZM80.2856 26.8407C79.7378 27.6657 78.6699 28.0836 77.2249 28.0836H72.8692V26H77.2071C77.6378 26 77.9385 25.9414 78.1199 25.7593C78.2771 25.6093 78.3871 25.3907 78.3871 25.125C78.3871 24.8421 78.2771 24.6179 78.1114 24.4821C77.9471 24.3343 77.7092 24.2664 77.3164 24.2664C75.1992 24.1929 72.5571 24.3343 72.5571 21.2579C72.5571 19.8479 73.4264 18.3636 75.7928 18.3636H80.2856V16.4286H76.1114C74.8514 16.4286 73.9364 16.7393 73.2885 17.2221V16.4286H67.1149C66.1278 16.4286 64.9685 16.6807 64.4206 17.2221V16.4286H53.3956V17.2221C52.5178 16.5714 51.0378 16.4286 50.3542 16.4286H43.0821V17.2221C42.3878 16.53 40.8442 16.4286 39.9035 16.4286H31.7642L29.9021 18.505L28.1571 16.4286H15.9999V29.9929H27.9285L29.8478 27.8843L31.6556 29.9936L39.0085 30V26.8093H39.7314C40.7071 26.8243 41.8578 26.7843 42.8728 26.3321V29.9929H48.9378V26.4571H49.2306C49.6042 26.4571 49.6406 26.4736 49.6406 26.8571V29.9929H68.0649C69.2342 29.9929 70.4578 29.6843 71.1342 29.125V29.9929H76.9785C78.1942 29.9929 79.3821 29.8171 80.2856 29.3671V26.8407ZM71.2892 22.9564C71.7285 23.425 71.9635 24.0157 71.9635 25.0164C71.9635 27.1079 70.6949 28.0843 68.4206 28.0843H64.0278V25.9993H68.4028C68.8306 25.9993 69.1342 25.9407 69.3242 25.7586C69.4792 25.6086 69.5906 25.39 69.5906 25.1243C69.5906 24.8414 69.4699 24.6171 69.3156 24.4814C69.1428 24.3336 68.9049 24.2657 68.5121 24.2657C66.4028 24.1921 63.7621 24.3336 63.7621 21.2571C63.7621 19.8471 64.6214 18.3629 66.9864 18.3629H71.5078V20.4321H67.3706C66.9599 20.4321 66.6935 20.4479 66.4664 20.6071C66.2199 20.7643 66.1278 20.9986 66.1278 21.3071C66.1278 21.6736 66.3378 21.9229 66.6214 22.0307C66.8592 22.1164 67.1149 22.1414 67.4999 22.1414L68.7135 22.175C69.9378 22.2057 70.7778 22.4236 71.2892 22.9564ZM50.9378 22.3564C50.6356 22.5407 50.2628 22.5564 49.8235 22.5564H47.0842V20.3729H49.8614C50.2628 20.3729 50.6649 20.3821 50.9378 20.5486C51.2299 20.7057 51.4049 21.0071 51.4049 21.4236C51.4049 21.8393 51.2299 22.1743 50.9378 22.3564ZM52.2999 23.5664C52.8021 23.7571 53.2121 24.0993 53.4042 24.3821C53.7228 24.8571 53.7685 25.3 53.7785 26.1571V28.0843H51.5142V26.8679C51.5142 26.2829 51.5685 25.4171 51.1499 24.965C50.8199 24.6164 50.3178 24.5336 49.4949 24.5336H47.0842V28.0836H44.8178V18.3621H50.0249C51.1671 18.3621 51.9985 18.4143 52.7392 18.8214C53.4506 19.2643 53.8985 19.8714 53.8985 20.98C53.8985 22.5314 52.8935 23.3229 52.2999 23.5657V23.5664ZM55.1492 18.3621H62.6764V20.3729H57.3949V22.14H62.5478V24.1236H57.3949V26.0579L62.6764 26.0671V28.0843H55.1492V18.3629V18.3621ZM39.9321 22.8486H37.0178V20.3729H39.9585C40.7728 20.3729 41.3371 20.715 41.3371 21.5657C41.3371 22.4057 40.7985 22.8486 39.9321 22.8486ZM34.7706 27.2L31.3085 23.24L34.7706 19.4057V27.2ZM25.8285 26.0571H20.2842V24.1229H25.2356V22.1393H20.2842V20.3721H25.9385L28.4056 23.205L25.8292 26.0571H25.8285ZM43.7599 21.5643C43.7599 24.2643 41.8035 24.8229 39.8321 24.8229H37.0178V28.0836H32.6342L29.8571 24.8657L26.9714 28.0843H18.0356V18.3629H27.1071L29.8821 21.5486L32.7506 18.3629H39.9578C41.7471 18.3629 43.7578 18.8729 43.7578 21.565L43.7599 21.5643Z" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/amex-light.svg b/public/images/landing-new/whouses/amex-light.svg
new file mode 100644
index 0000000000..66953f0483
--- /dev/null
+++ b/public/images/landing-new/whouses/amex-light.svg
@@ -0,0 +1,3 @@
+<svg width="81" height="30" viewBox="0 0 81 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5785 7.45714L6.02279 3.58L4.47493 7.45714H7.57922H7.5785ZM41.8692 5.91429C41.5564 6.10786 41.1871 6.11429 40.7442 6.11429H37.9814V3.95429H40.7814C41.1785 3.95429 41.5914 3.97286 41.8599 4.13C42.1556 4.27143 42.3385 4.57286 42.3385 4.99C42.3385 5.415 42.1642 5.75643 41.8692 5.91429ZM61.5778 7.45786L60.0035 3.58071L58.4392 7.45786H61.5778ZM24.8399 11.655H22.5085L22.4999 4.03714L19.2028 11.6543H17.2056L13.8999 4.03V11.6543H9.27422L8.40064 9.485H3.66493L2.78207 11.6543H0.312073L4.38564 1.92857H7.76422L11.6321 11.1364V1.92857H15.3435L18.3199 8.52643L21.0528 1.92857H24.8385V11.6543H24.8392L24.8399 11.655ZM34.1321 11.655H26.5342V1.92857H34.1314V3.95357H28.8085V5.70714H34.0035V7.70143H28.8085V9.64286H34.1314V11.6543L34.1321 11.655ZM44.8428 4.54786C44.8428 6.09929 43.8306 6.9 43.2406 7.14071C43.7385 7.33429 44.1635 7.67643 44.3656 7.96C44.6871 8.44357 44.7421 8.87571 44.7421 9.74429V11.655H42.4485L42.4399 10.4286C42.4399 9.84286 42.4942 9.00143 42.0806 8.53357C41.7485 8.19143 41.2421 8.11714 40.4235 8.11714H37.9821V11.655H35.7071V1.92857H40.9378C42.0999 1.92857 42.9564 1.96 43.6914 2.39429C44.4114 2.82857 44.8421 3.46286 44.8421 4.54786H44.8428ZM48.4821 11.655H46.1621V1.92857H48.4821V11.6543V11.655ZM75.4021 11.655H72.1792L67.8692 4.355V11.655H63.2378L62.3521 9.48571H57.6285L56.7699 11.655H54.1092C53.0035 11.655 51.6042 11.405 50.8114 10.5793C50.0121 9.75357 49.5964 8.635 49.5964 6.86643C49.5964 5.42357 49.8449 4.105 50.8221 3.06357C51.5571 2.28571 52.7078 1.92857 54.2749 1.92857H56.4771V4.01214H54.3214C53.4914 4.01214 53.0228 4.13857 52.5714 4.58857C52.1835 4.99786 51.9178 5.77214 51.9178 6.79143C51.9178 7.83357 52.1206 8.58429 52.5428 9.07572C52.8928 9.46071 53.5292 9.57714 54.1285 9.57714H55.1499L58.3535 1.92857H61.7606L65.6114 11.1279V1.92857H69.0742L73.0714 8.70214V1.92857H75.4007V11.6543L75.4021 11.655ZM0.285645 13.5643H4.17136L5.04779 11.4043H7.00922L7.88279 13.5643H15.5278V11.9129L16.2099 13.5714H20.1792L20.8614 11.8879V13.5643H39.8614L39.8521 10.0186H40.2199C40.4771 10.0271 40.5521 10.0521 40.5521 10.4864V13.565H50.3785V12.7386C51.1714 13.1729 52.4042 13.5643 54.0264 13.5643H58.1606L59.0449 11.4043H61.0064L61.8721 13.5643H69.8385V11.5121L71.0449 13.5643H77.4285V0H71.1106V1.60214L70.2256 0H63.7428V1.60214L62.9306 0H54.1735C52.7078 0 51.4199 0.209286 50.3785 0.792143V0H44.3356V0.792143C43.6735 0.191429 42.7714 0 41.7678 0H19.6906L18.2092 3.50357L16.6878 0H9.73422V1.60214L8.96993 0H3.03993L0.285645 6.44929V13.5643ZM80.2856 20.4314H76.1749C75.7649 20.4314 75.4921 20.4471 75.2621 20.6071C75.0242 20.7643 74.9328 20.9979 74.9328 21.3064C74.9328 21.6729 75.1335 21.9229 75.4256 22.0307C75.6642 22.1157 75.9192 22.1407 76.2949 22.1407L77.5178 22.1743C78.7514 22.2057 79.5749 22.4243 80.0764 22.9564C80.1678 23.0307 80.2228 23.1136 80.2856 23.1971V20.4314ZM80.2856 26.8407C79.7378 27.6657 78.6699 28.0836 77.2249 28.0836H72.8692V26H77.2071C77.6378 26 77.9385 25.9414 78.1199 25.7593C78.2771 25.6093 78.3871 25.3907 78.3871 25.125C78.3871 24.8421 78.2771 24.6179 78.1114 24.4821C77.9471 24.3343 77.7092 24.2664 77.3164 24.2664C75.1992 24.1929 72.5571 24.3343 72.5571 21.2579C72.5571 19.8479 73.4264 18.3636 75.7928 18.3636H80.2856V16.4286H76.1114C74.8514 16.4286 73.9364 16.7393 73.2885 17.2221V16.4286H67.1149C66.1278 16.4286 64.9685 16.6807 64.4206 17.2221V16.4286H53.3956V17.2221C52.5178 16.5714 51.0378 16.4286 50.3542 16.4286H43.0821V17.2221C42.3878 16.53 40.8442 16.4286 39.9035 16.4286H31.7642L29.9021 18.505L28.1571 16.4286H15.9999V29.9929H27.9285L29.8478 27.8843L31.6556 29.9936L39.0085 30V26.8093H39.7314C40.7071 26.8243 41.8578 26.7843 42.8728 26.3321V29.9929H48.9378V26.4571H49.2306C49.6042 26.4571 49.6406 26.4736 49.6406 26.8571V29.9929H68.0649C69.2342 29.9929 70.4578 29.6843 71.1342 29.125V29.9929H76.9785C78.1942 29.9929 79.3821 29.8171 80.2856 29.3671V26.8407ZM71.2892 22.9564C71.7285 23.425 71.9635 24.0157 71.9635 25.0164C71.9635 27.1079 70.6949 28.0843 68.4206 28.0843H64.0278V25.9993H68.4028C68.8306 25.9993 69.1342 25.9407 69.3242 25.7586C69.4792 25.6086 69.5906 25.39 69.5906 25.1243C69.5906 24.8414 69.4699 24.6171 69.3156 24.4814C69.1428 24.3336 68.9049 24.2657 68.5121 24.2657C66.4028 24.1921 63.7621 24.3336 63.7621 21.2571C63.7621 19.8471 64.6214 18.3629 66.9864 18.3629H71.5078V20.4321H67.3706C66.9599 20.4321 66.6935 20.4479 66.4664 20.6071C66.2199 20.7643 66.1278 20.9986 66.1278 21.3071C66.1278 21.6736 66.3378 21.9229 66.6214 22.0307C66.8592 22.1164 67.1149 22.1414 67.4999 22.1414L68.7135 22.175C69.9378 22.2057 70.7778 22.4236 71.2892 22.9564ZM50.9378 22.3564C50.6356 22.5407 50.2628 22.5564 49.8235 22.5564H47.0842V20.3729H49.8614C50.2628 20.3729 50.6649 20.3821 50.9378 20.5486C51.2299 20.7057 51.4049 21.0071 51.4049 21.4236C51.4049 21.8393 51.2299 22.1743 50.9378 22.3564ZM52.2999 23.5664C52.8021 23.7571 53.2121 24.0993 53.4042 24.3821C53.7228 24.8571 53.7685 25.3 53.7785 26.1571V28.0843H51.5142V26.8679C51.5142 26.2829 51.5685 25.4171 51.1499 24.965C50.8199 24.6164 50.3178 24.5336 49.4949 24.5336H47.0842V28.0836H44.8178V18.3621H50.0249C51.1671 18.3621 51.9985 18.4143 52.7392 18.8214C53.4506 19.2643 53.8985 19.8714 53.8985 20.98C53.8985 22.5314 52.8935 23.3229 52.2999 23.5657V23.5664ZM55.1492 18.3621H62.6764V20.3729H57.3949V22.14H62.5478V24.1236H57.3949V26.0579L62.6764 26.0671V28.0843H55.1492V18.3629V18.3621ZM39.9321 22.8486H37.0178V20.3729H39.9585C40.7728 20.3729 41.3371 20.715 41.3371 21.5657C41.3371 22.4057 40.7985 22.8486 39.9321 22.8486ZM34.7706 27.2L31.3085 23.24L34.7706 19.4057V27.2ZM25.8285 26.0571H20.2842V24.1229H25.2356V22.1393H20.2842V20.3721H25.9385L28.4056 23.205L25.8292 26.0571H25.8285ZM43.7599 21.5643C43.7599 24.2643 41.8035 24.8229 39.8321 24.8229H37.0178V28.0836H32.6342L29.8571 24.8657L26.9714 28.0843H18.0356V18.3629H27.1071L29.8821 21.5486L32.7506 18.3629H39.9578C41.7471 18.3629 43.7578 18.8729 43.7578 21.565L43.7599 21.5643Z" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/ebay-dark.svg b/public/images/landing-new/whouses/ebay-dark.svg
new file mode 100644
index 0000000000..e03996dbb8
--- /dev/null
+++ b/public/images/landing-new/whouses/ebay-dark.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="26" viewBox="0 0 64 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2216" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="6" width="16" height="17">
+<path d="M0.249512 6.77344V22.2007H15.0503V6.77344H0.249512Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask0_1676_2216)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.32508 13.1058C3.32508 13.1058 3.53493 8.9467 7.74402 8.94519C11.9372 8.94367 11.9372 13.1058 11.9372 13.1058H3.32584H3.32508ZM7.81675 6.77246C0.499322 6.7717 0.214473 13.124 0.251595 14.7732C0.251595 14.7732 -0.106739 22.2005 7.6372 22.2005C14.291 22.2005 14.6183 17.5399 14.6183 17.5399L11.5577 17.5475C11.5577 17.5475 10.9614 20.1141 7.65008 20.0459C3.3925 19.9573 3.22735 15.3581 3.22735 15.3581H15.0205C15.0205 15.3581 15.916 6.77473 7.81599 6.77246H7.81675Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0812 19.1545C18.2509 19.2182 18.3297 13.7545 18.3297 13.7545C18.3297 13.7545 18.1532 8.49546 23.0736 8.36061C27.9941 8.225 27.8335 13.8667 27.8335 13.8667C27.8335 13.8667 27.9123 19.0902 23.0812 19.1545ZM23.7842 6.17576C19.9585 6.15303 18.313 8.56288 18.313 8.56288V0.5H15.2471L15.2986 17.5409C15.2986 17.5409 15.2805 19.5258 15.1646 20.8379H18.1426L18.2706 18.9235C18.2706 18.9235 19.66 21.3333 23.7191 21.3333C27.7797 21.3333 30.9858 18.6977 31.0714 13.8106C31.1562 8.92348 27.6092 6.19849 23.7835 6.17576H23.7842ZM37.6888 20.2598C37.6888 20.2598 34.5312 20.2644 34.3456 17.6083C34.1486 14.7735 39.2032 14.9439 39.2032 14.9439L42.7752 14.9409C42.7752 14.9409 43.3532 20.3379 37.6888 20.2598ZM45.9221 18.4144C45.9297 16.1523 45.9926 14.1326 45.9221 12.7076C45.8388 11.0561 45.988 7.06894 39.2032 6.77424C39.2032 6.77424 32.6994 6.15 32.0236 11.2462H35.3502C35.3502 11.2462 35.6085 8.91136 38.9842 8.97879C42.1789 9.04243 42.7608 10.6909 42.7441 12.7197C42.7441 12.7197 40.0062 12.7273 39.0926 12.7326C37.4456 12.7417 31.6835 12.9333 31.1456 16.628C30.5062 21.022 34.2305 22.3924 37.1456 22.375C40.06 22.3576 41.7229 21.4386 42.9577 19.7917L43.0896 21.8371L45.988 21.8205C45.988 21.8205 45.913 20.6765 45.9221 18.4144Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.0054 6.75H46.5031L51.619 17.2682L56.7463 6.75H59.9084L50.6523 25.5H47.2705L49.9486 20.2894L43.0054 6.75ZM62.0986 7.55455V7.1303H61.897V6.97121H62.0986V6.75H62.4637V6.97121H62.891V7.1303H62.4637V7.52576C62.4637 7.59773 62.5357 7.62651 62.6592 7.62651C62.741 7.62651 62.8137 7.61742 62.8864 7.59924V7.75076C62.7955 7.77652 62.6963 7.79167 62.5576 7.79167C62.2879 7.79167 62.0986 7.73182 62.0986 7.55455Z" fill="#191919"/>
+<mask id="mask1_1676_2216" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="62" y="6" width="2" height="2">
+<path d="M63.7509 7.17748V6.76611H62.8926V7.17748H63.7509Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask1_1676_2216)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.8916 6.77436H63.0211V6.83497C63.0437 6.81213 63.0708 6.79431 63.1007 6.78268C63.1306 6.77106 63.1626 6.7659 63.1946 6.76755C63.2757 6.76755 63.3333 6.79482 63.3628 6.838C63.3881 6.81384 63.4179 6.79497 63.4506 6.78248C63.4832 6.76999 63.518 6.76414 63.553 6.76527C63.6757 6.76527 63.7507 6.82133 63.7507 6.91982V7.1774H63.6219V6.94785C63.6219 6.88346 63.5795 6.84936 63.5068 6.84936C63.4363 6.84936 63.3855 6.88421 63.3855 6.94936V7.17664H63.2568V6.94785C63.2568 6.88497 63.2136 6.85012 63.1431 6.85012C63.0711 6.85012 63.0219 6.888 63.0219 6.95012V7.1774H62.8916V6.77436Z" fill="#191919"/>
+</g>
+</svg>
diff --git a/public/images/landing-new/whouses/ebay-light.svg b/public/images/landing-new/whouses/ebay-light.svg
new file mode 100644
index 0000000000..7b8ef42bc5
--- /dev/null
+++ b/public/images/landing-new/whouses/ebay-light.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="26" viewBox="0 0 64 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2216" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="6" width="16" height="17">
+<path d="M0.249512 6.77344V22.2007H15.0503V6.77344H0.249512Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1676_2216)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.32508 13.1058C3.32508 13.1058 3.53493 8.9467 7.74402 8.94519C11.9372 8.94367 11.9372 13.1058 11.9372 13.1058H3.32584H3.32508ZM7.81675 6.77246C0.499322 6.7717 0.214473 13.124 0.251595 14.7732C0.251595 14.7732 -0.106739 22.2005 7.6372 22.2005C14.291 22.2005 14.6183 17.5399 14.6183 17.5399L11.5577 17.5475C11.5577 17.5475 10.9614 20.1141 7.65008 20.0459C3.3925 19.9573 3.22735 15.3581 3.22735 15.3581H15.0205C15.0205 15.3581 15.916 6.77473 7.81599 6.77246H7.81675Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.0812 19.1545C18.2509 19.2182 18.3297 13.7545 18.3297 13.7545C18.3297 13.7545 18.1532 8.49546 23.0736 8.36061C27.9941 8.225 27.8335 13.8667 27.8335 13.8667C27.8335 13.8667 27.9123 19.0902 23.0812 19.1545ZM23.7842 6.17576C19.9585 6.15303 18.313 8.56288 18.313 8.56288V0.5H15.2471L15.2986 17.5409C15.2986 17.5409 15.2805 19.5258 15.1646 20.8379H18.1426L18.2706 18.9235C18.2706 18.9235 19.66 21.3333 23.7191 21.3333C27.7797 21.3333 30.9858 18.6977 31.0714 13.8106C31.1562 8.92348 27.6092 6.19849 23.7835 6.17576H23.7842ZM37.6888 20.2598C37.6888 20.2598 34.5312 20.2644 34.3456 17.6083C34.1486 14.7735 39.2032 14.9439 39.2032 14.9439L42.7752 14.9409C42.7752 14.9409 43.3532 20.3379 37.6888 20.2598ZM45.9221 18.4144C45.9297 16.1523 45.9926 14.1326 45.9221 12.7076C45.8388 11.0561 45.988 7.06894 39.2032 6.77424C39.2032 6.77424 32.6994 6.15 32.0236 11.2462H35.3502C35.3502 11.2462 35.6085 8.91136 38.9842 8.97879C42.1789 9.04243 42.7608 10.6909 42.7441 12.7197C42.7441 12.7197 40.0062 12.7273 39.0926 12.7326C37.4456 12.7417 31.6835 12.9333 31.1456 16.628C30.5062 21.022 34.2305 22.3924 37.1456 22.375C40.06 22.3576 41.7229 21.4386 42.9577 19.7917L43.0896 21.8371L45.988 21.8205C45.988 21.8205 45.913 20.6765 45.9221 18.4144Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.0054 6.75H46.5031L51.619 17.2682L56.7463 6.75H59.9084L50.6523 25.5H47.2705L49.9486 20.2894L43.0054 6.75ZM62.0986 7.55455V7.1303H61.897V6.97121H62.0986V6.75H62.4637V6.97121H62.891V7.1303H62.4637V7.52576C62.4637 7.59773 62.5357 7.62651 62.6592 7.62651C62.741 7.62651 62.8137 7.61742 62.8864 7.59924V7.75076C62.7955 7.77652 62.6963 7.79167 62.5576 7.79167C62.2879 7.79167 62.0986 7.73182 62.0986 7.55455Z" fill="white"/>
+<mask id="mask1_1676_2216" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="62" y="6" width="2" height="2">
+<path d="M63.7509 7.17748V6.76611H62.8926V7.17748H63.7509Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1676_2216)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.8916 6.77436H63.0211V6.83497C63.0437 6.81213 63.0708 6.79431 63.1007 6.78268C63.1306 6.77106 63.1626 6.7659 63.1946 6.76755C63.2757 6.76755 63.3333 6.79482 63.3628 6.838C63.3881 6.81384 63.4179 6.79497 63.4506 6.78248C63.4832 6.76999 63.518 6.76414 63.553 6.76527C63.6757 6.76527 63.7507 6.82133 63.7507 6.91982V7.1774H63.6219V6.94785C63.6219 6.88346 63.5795 6.84936 63.5068 6.84936C63.4363 6.84936 63.3855 6.88421 63.3855 6.94936V7.17664H63.2568V6.94785C63.2568 6.88497 63.2136 6.85012 63.1431 6.85012C63.0711 6.85012 63.0219 6.888 63.0219 6.95012V7.1774H62.8916V6.77436Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/images/landing-new/whouses/ford-dark.svg b/public/images/landing-new/whouses/ford-dark.svg
new file mode 100644
index 0000000000..c99e2d8113
--- /dev/null
+++ b/public/images/landing-new/whouses/ford-dark.svg
@@ -0,0 +1,8 @@
+<svg width="64" height="26" viewBox="0 0 64 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2229" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="26">
+<path d="M63.9492 26H0.335938V0H63.9492V26Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask0_1676_2229)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.27 8.94496C30.3921 8.81118 30.5978 8.41317 30.5568 8.14728C30.5376 8.01433 30.4757 7.85881 30.331 7.88055C30.0217 7.9466 29.8377 8.1038 29.7566 8.43408C29.6529 8.7886 29.6956 9.03359 29.7566 9.29865C29.7566 9.29865 29.9606 9.32123 30.27 8.94496ZM46.4553 17.523C47.3374 17.4787 48.9571 15.6617 49.3484 15.2177C49.4295 15.1065 49.5741 14.9084 49.6536 14.9084C49.7372 14.9084 49.9011 14.9962 49.9011 15.1274C49.9011 15.2177 49.7171 15.5505 49.5741 15.7495C48.7522 16.8583 47.3985 18.564 45.86 18.6083C45.1016 18.6083 44.8148 18.2772 44.7103 17.6342C44.3633 17.9662 43.1718 18.5431 41.961 18.5431C40.956 18.5205 40.5446 17.8784 40.3414 17.3691C40.1549 16.9469 40.0747 16.3265 40.2185 15.7052C39.6641 16.0163 39.1507 16.0597 38.4124 16.0388C37.552 16.0163 37.0186 15.594 36.7527 14.5104C35.7677 16.4586 35.7259 16.5263 34.7208 18.564H32.9758L35.2125 14.4627C35.5009 13.9108 35.6448 13.4677 35.7451 13.0011C35.7602 12.9402 35.7617 12.8767 35.7495 12.8151C35.7374 12.7536 35.7118 12.6954 35.6748 12.6448C35.6377 12.5942 35.5899 12.5523 35.5349 12.5221C35.4799 12.4919 35.4189 12.4742 35.3563 12.4702C35.0712 12.4702 34.5987 12.7795 34.1456 13.2461C34.1456 13.2461 32.9958 14.5764 32.1555 15.926C31.3562 17.2128 29.9815 18.6777 28.4848 18.6777C27.3962 18.6777 26.4112 18.0339 26.208 16.7922C26.208 16.7922 26.1035 17.0807 25.1402 17.6785C25.0575 17.722 24.8526 17.8541 24.7916 17.8106C24.6059 17.635 24.5048 17.4118 24.4847 17.2563C24.5457 17.278 24.6687 17.1685 25.0575 16.8357C25.8184 16.2144 25.9822 15.7278 25.9822 15.7278C26.167 15.3055 26.4948 14.6416 26.7206 14.1759C27.3351 12.8464 28.4012 11.4944 30.1454 11.4275C30.4331 11.4275 30.515 11.5613 30.576 11.6716C30.7416 11.8054 30.6797 12.0696 30.6797 12.0696C29.4489 12.2686 28.6061 13.0463 28.0944 13.7996C27.7867 14.2879 27.4597 15.084 27.3962 15.6617C27.2749 16.6593 27.7064 17.3257 28.341 17.4787C29.53 17.6785 30.515 16.7479 31.296 15.3047C31.4991 14.9301 31.6446 13.9543 31.6446 13.4217C31.6446 12.8899 31.3771 12.3372 31.1722 12.1148C31.1722 11.7369 31.3971 11.4944 31.6639 11.4944C31.7458 11.4944 31.8269 11.4944 31.9105 11.583C32.3194 12.0253 32.546 12.8682 32.546 13.5128C32.546 13.7319 32.546 13.9543 32.5059 14.1759C33.3671 13.0463 34.4541 11.583 35.2944 11.2929C35.4591 11.2051 35.6239 11.2051 35.7877 11.2051C37.3263 11.1616 37.1206 12.6675 37.1206 12.6675C37.9417 11.6491 38.5161 11.2711 39.2728 11.3154C40.0956 11.3623 40.3832 11.981 40.3832 12.4702C40.3615 13.0463 39.971 13.7093 39.2962 13.7327C38.7009 13.7327 38.3514 13.4217 38.1666 12.8464C37.7778 13.0011 37.593 13.2896 37.5119 13.8665C37.389 14.5956 37.9007 15.1734 38.5571 15.1734C39.685 15.1734 40.1767 14.6416 40.5872 14.2428C41.9819 12.823 42.7629 11.3372 44.7738 11.3623C45.9812 11.3832 46.2914 12.4267 46.4963 12.8682L49.1435 8.03607H50.7623L46.3725 16.4368C46.2914 16.6141 46.0866 16.9469 46.105 17.2128C46.1468 17.6342 46.6393 17.523 46.4553 17.523ZM18.3282 18.6978C16.5447 18.6978 14.9652 17.4352 14.925 15.1734C14.9041 13.7996 15.9292 12.1148 17.8357 11.6047C18.0631 11.6047 18.1459 11.6934 18.1459 11.8272C18.1459 11.915 18.0623 12.0253 17.8783 12.1148C17.3264 12.3372 16.3599 13.5128 16.3599 14.5956C16.3599 15.4176 16.834 16.3265 17.6342 16.5271C17.8566 16.5915 18.0631 16.5706 18.268 16.5706C20.2588 16.5706 22.4947 14.1542 24.9162 10.4751C24.5257 10.4969 22.8617 10.6959 22.4537 11.2051C22.2689 11.3623 22.1468 11.272 22.1042 11.0964C22.1042 11.0512 22.1669 10.8949 22.2296 10.8071C22.8826 10.0094 24.8526 9.83128 25.325 9.76606C27.0926 6.8362 29.3461 4.96908 29.9648 4.8353C29.9523 4.83028 29.9356 4.82443 29.9197 4.82108C28.3402 4.42141 26.9045 4.09113 25.7766 4.09113C21.8166 4.09113 20.054 5.92982 20.1359 7.61549C20.1777 8.3028 20.6894 8.74429 21.4461 8.59044C22.2689 8.43408 23.4169 7.59291 23.7054 6.86128C23.7673 6.70576 23.9312 6.68402 23.9922 6.7275C24.1143 6.83704 24.0733 6.99507 24.0733 6.99507C23.973 7.85881 22.7397 10.2535 20.6067 10.2535C19.4168 10.2535 18.6158 9.05617 18.6392 7.88055C18.6584 5.6865 20.7296 3.46903 25.8384 3.46903C26.8025 3.46903 27.8895 3.55934 29.0793 3.78092C30.4531 4.04598 33.8805 4.66723 36.669 4.71071C37.6942 4.71071 39.0094 4.75587 40.0747 4.57944C41.2026 4.37876 40.956 4.33528 41.4075 4.33528C41.818 4.33528 41.818 4.51171 41.818 4.68897C41.818 5.39803 39.5203 6.75091 37.5721 6.75091C34.7016 6.75091 31.7207 5.34368 30.1739 4.89048C30.2341 4.95152 30.2759 5.04935 30.2282 5.17645C30.1388 5.30592 30.035 5.42485 29.9188 5.53097C29.5091 5.92982 28.1144 6.90727 26.596 9.67826C27.8285 9.61137 29.2633 9.34464 29.2633 9.34464C29.2633 9.34464 29.183 9.05617 29.183 8.81118C29.2449 7.85797 29.7566 7.28103 30.4122 7.39307C30.587 7.42685 30.7445 7.52076 30.8574 7.65852C30.9703 7.79628 31.0313 7.96919 31.0301 8.14728C31.0301 8.52187 30.7608 9.07875 30.4966 9.34464C30.3118 9.49933 30.1053 9.65402 29.8586 9.7878C29.8586 10.032 30.1663 10.2301 30.4331 10.2535C30.372 10.496 30.3913 10.6072 30.2901 10.5855C29.6738 10.5855 29.4272 9.94165 29.4272 9.94165C28.6069 10.0972 27.8084 10.2092 26.1879 10.3848C22.1042 17.523 20.8324 18.6978 18.3282 18.6978ZM32.1522 2.28254C15.7829 2.28254 2.55256 7.09206 2.55256 13.0103C2.55256 18.952 15.7829 23.7632 32.1522 23.7632C48.5022 23.7632 61.7769 18.952 61.7769 13.0103C61.7769 7.09206 48.5022 2.28254 32.1522 2.28254ZM44.8566 12.4024C44.1375 12.313 43.2345 12.9794 42.4945 13.9543C42.1266 14.4418 41.7353 15.3724 41.6751 15.926C41.5931 16.4803 41.7353 17.0372 41.9217 17.1902C42.1057 17.3466 42.9251 17.8106 44.1977 16.4143C44.9168 15.64 45.6133 14.3749 45.6133 14.3749L45.3876 14.3097C45.819 13.4443 45.7379 12.5145 44.8566 12.4033V12.4024ZM32.1513 24.6687C15.2896 24.6687 1.58681 19.4821 1.58681 13.0095C1.58681 6.5586 15.2896 1.30676 32.1513 1.30676C49.0574 1.30676 62.7376 6.55776 62.7376 13.0095C62.7376 19.4813 49.0574 24.6687 32.1513 24.6687ZM32.1513 -0.000976562C14.573 -0.000976562 0.335938 5.82948 0.335938 13.0095C0.335938 20.192 14.573 25.9999 32.1513 25.9999C49.7129 25.9999 63.95 20.1911 63.95 13.0095C63.95 5.82864 49.7129 -0.000976562 32.1513 -0.000976562Z" fill="#191919"/>
+</g>
+</svg>
diff --git a/public/images/landing-new/whouses/ford-light.svg b/public/images/landing-new/whouses/ford-light.svg
new file mode 100644
index 0000000000..d0b5852c77
--- /dev/null
+++ b/public/images/landing-new/whouses/ford-light.svg
@@ -0,0 +1,8 @@
+<svg width="64" height="26" viewBox="0 0 64 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2229" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="64" height="26">
+<path d="M63.9492 26H0.335938V0H63.9492V26Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1676_2229)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.27 8.94496C30.3921 8.81118 30.5978 8.41317 30.5568 8.14728C30.5376 8.01433 30.4757 7.85881 30.331 7.88055C30.0217 7.9466 29.8377 8.1038 29.7566 8.43408C29.6529 8.7886 29.6956 9.03359 29.7566 9.29865C29.7566 9.29865 29.9606 9.32123 30.27 8.94496ZM46.4553 17.523C47.3374 17.4787 48.9571 15.6617 49.3484 15.2177C49.4295 15.1065 49.5741 14.9084 49.6536 14.9084C49.7372 14.9084 49.9011 14.9962 49.9011 15.1274C49.9011 15.2177 49.7171 15.5505 49.5741 15.7495C48.7522 16.8583 47.3985 18.564 45.86 18.6083C45.1016 18.6083 44.8148 18.2772 44.7103 17.6342C44.3633 17.9662 43.1718 18.5431 41.961 18.5431C40.956 18.5205 40.5446 17.8784 40.3414 17.3691C40.1549 16.9469 40.0747 16.3265 40.2185 15.7052C39.6641 16.0163 39.1507 16.0597 38.4124 16.0388C37.552 16.0163 37.0186 15.594 36.7527 14.5104C35.7677 16.4586 35.7259 16.5263 34.7208 18.564H32.9758L35.2125 14.4627C35.5009 13.9108 35.6448 13.4677 35.7451 13.0011C35.7602 12.9402 35.7617 12.8767 35.7495 12.8151C35.7374 12.7536 35.7118 12.6954 35.6748 12.6448C35.6377 12.5942 35.5899 12.5523 35.5349 12.5221C35.4799 12.4919 35.4189 12.4742 35.3563 12.4702C35.0712 12.4702 34.5987 12.7795 34.1456 13.2461C34.1456 13.2461 32.9958 14.5764 32.1555 15.926C31.3562 17.2128 29.9815 18.6777 28.4848 18.6777C27.3962 18.6777 26.4112 18.0339 26.208 16.7922C26.208 16.7922 26.1035 17.0807 25.1402 17.6785C25.0575 17.722 24.8526 17.8541 24.7916 17.8106C24.6059 17.635 24.5048 17.4118 24.4847 17.2563C24.5457 17.278 24.6687 17.1685 25.0575 16.8357C25.8184 16.2144 25.9822 15.7278 25.9822 15.7278C26.167 15.3055 26.4948 14.6416 26.7206 14.1759C27.3351 12.8464 28.4012 11.4944 30.1454 11.4275C30.4331 11.4275 30.515 11.5613 30.576 11.6716C30.7416 11.8054 30.6797 12.0696 30.6797 12.0696C29.4489 12.2686 28.6061 13.0463 28.0944 13.7996C27.7867 14.2879 27.4597 15.084 27.3962 15.6617C27.2749 16.6593 27.7064 17.3257 28.341 17.4787C29.53 17.6785 30.515 16.7479 31.296 15.3047C31.4991 14.9301 31.6446 13.9543 31.6446 13.4217C31.6446 12.8899 31.3771 12.3372 31.1722 12.1148C31.1722 11.7369 31.3971 11.4944 31.6639 11.4944C31.7458 11.4944 31.8269 11.4944 31.9105 11.583C32.3194 12.0253 32.546 12.8682 32.546 13.5128C32.546 13.7319 32.546 13.9543 32.5059 14.1759C33.3671 13.0463 34.4541 11.583 35.2944 11.2929C35.4591 11.2051 35.6239 11.2051 35.7877 11.2051C37.3263 11.1616 37.1206 12.6675 37.1206 12.6675C37.9417 11.6491 38.5161 11.2711 39.2728 11.3154C40.0956 11.3623 40.3832 11.981 40.3832 12.4702C40.3615 13.0463 39.971 13.7093 39.2962 13.7327C38.7009 13.7327 38.3514 13.4217 38.1666 12.8464C37.7778 13.0011 37.593 13.2896 37.5119 13.8665C37.389 14.5956 37.9007 15.1734 38.5571 15.1734C39.685 15.1734 40.1767 14.6416 40.5872 14.2428C41.9819 12.823 42.7629 11.3372 44.7738 11.3623C45.9812 11.3832 46.2914 12.4267 46.4963 12.8682L49.1435 8.03607H50.7623L46.3725 16.4368C46.2914 16.6141 46.0866 16.9469 46.105 17.2128C46.1468 17.6342 46.6393 17.523 46.4553 17.523ZM18.3282 18.6978C16.5447 18.6978 14.9652 17.4352 14.925 15.1734C14.9041 13.7996 15.9292 12.1148 17.8357 11.6047C18.0631 11.6047 18.1459 11.6934 18.1459 11.8272C18.1459 11.915 18.0623 12.0253 17.8783 12.1148C17.3264 12.3372 16.3599 13.5128 16.3599 14.5956C16.3599 15.4176 16.834 16.3265 17.6342 16.5271C17.8566 16.5915 18.0631 16.5706 18.268 16.5706C20.2588 16.5706 22.4947 14.1542 24.9162 10.4751C24.5257 10.4969 22.8617 10.6959 22.4537 11.2051C22.2689 11.3623 22.1468 11.272 22.1042 11.0964C22.1042 11.0512 22.1669 10.8949 22.2296 10.8071C22.8826 10.0094 24.8526 9.83128 25.325 9.76606C27.0926 6.8362 29.3461 4.96908 29.9648 4.8353C29.9523 4.83028 29.9356 4.82443 29.9197 4.82108C28.3402 4.42141 26.9045 4.09113 25.7766 4.09113C21.8166 4.09113 20.054 5.92982 20.1359 7.61549C20.1777 8.3028 20.6894 8.74429 21.4461 8.59044C22.2689 8.43408 23.4169 7.59291 23.7054 6.86128C23.7673 6.70576 23.9312 6.68402 23.9922 6.7275C24.1143 6.83704 24.0733 6.99507 24.0733 6.99507C23.973 7.85881 22.7397 10.2535 20.6067 10.2535C19.4168 10.2535 18.6158 9.05617 18.6392 7.88055C18.6584 5.6865 20.7296 3.46903 25.8384 3.46903C26.8025 3.46903 27.8895 3.55934 29.0793 3.78092C30.4531 4.04598 33.8805 4.66723 36.669 4.71071C37.6942 4.71071 39.0094 4.75587 40.0747 4.57944C41.2026 4.37876 40.956 4.33528 41.4075 4.33528C41.818 4.33528 41.818 4.51171 41.818 4.68897C41.818 5.39803 39.5203 6.75091 37.5721 6.75091C34.7016 6.75091 31.7207 5.34368 30.1739 4.89048C30.2341 4.95152 30.2759 5.04935 30.2282 5.17645C30.1388 5.30592 30.035 5.42485 29.9188 5.53097C29.5091 5.92982 28.1144 6.90727 26.596 9.67826C27.8285 9.61137 29.2633 9.34464 29.2633 9.34464C29.2633 9.34464 29.183 9.05617 29.183 8.81118C29.2449 7.85797 29.7566 7.28103 30.4122 7.39307C30.587 7.42685 30.7445 7.52076 30.8574 7.65852C30.9703 7.79628 31.0313 7.96919 31.0301 8.14728C31.0301 8.52187 30.7608 9.07875 30.4966 9.34464C30.3118 9.49933 30.1053 9.65402 29.8586 9.7878C29.8586 10.032 30.1663 10.2301 30.4331 10.2535C30.372 10.496 30.3913 10.6072 30.2901 10.5855C29.6738 10.5855 29.4272 9.94165 29.4272 9.94165C28.6069 10.0972 27.8084 10.2092 26.1879 10.3848C22.1042 17.523 20.8324 18.6978 18.3282 18.6978ZM32.1522 2.28254C15.7829 2.28254 2.55256 7.09206 2.55256 13.0103C2.55256 18.952 15.7829 23.7632 32.1522 23.7632C48.5022 23.7632 61.7769 18.952 61.7769 13.0103C61.7769 7.09206 48.5022 2.28254 32.1522 2.28254ZM44.8566 12.4024C44.1375 12.313 43.2345 12.9794 42.4945 13.9543C42.1266 14.4418 41.7353 15.3724 41.6751 15.926C41.5931 16.4803 41.7353 17.0372 41.9217 17.1902C42.1057 17.3466 42.9251 17.8106 44.1977 16.4143C44.9168 15.64 45.6133 14.3749 45.6133 14.3749L45.3876 14.3097C45.819 13.4443 45.7379 12.5145 44.8566 12.4033V12.4024ZM32.1513 24.6687C15.2896 24.6687 1.58681 19.4821 1.58681 13.0095C1.58681 6.5586 15.2896 1.30676 32.1513 1.30676C49.0574 1.30676 62.7376 6.55776 62.7376 13.0095C62.7376 19.4813 49.0574 24.6687 32.1513 24.6687ZM32.1513 -0.000976562C14.573 -0.000976562 0.335938 5.82948 0.335938 13.0095C0.335938 20.192 14.573 25.9999 32.1513 25.9999C49.7129 25.9999 63.95 20.1911 63.95 13.0095C63.95 5.82864 49.7129 -0.000976562 32.1513 -0.000976562Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/images/landing-new/whouses/fox-dark.svg b/public/images/landing-new/whouses/fox-dark.svg
new file mode 100644
index 0000000000..18d9500116
--- /dev/null
+++ b/public/images/landing-new/whouses/fox-dark.svg
@@ -0,0 +1,4 @@
+<svg width="51" height="22" viewBox="0 0 51 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.8801 21.9602H43.9579C43.8946 21.9602 43.7785 21.6784 43.7449 21.62C42.7926 19.8894 41.8414 18.1499 40.8946 16.422C39.8817 18.2616 38.8964 20.1321 37.8863 21.974C35.62 21.9795 33.3724 21.963 31.126 21.9685C31.3803 21.489 31.6517 21.0206 31.9231 20.5499C33.8128 17.2609 35.6756 13.9278 37.5681 10.636C35.5561 7.09649 33.5139 3.58451 31.4909 0.0527076C31.4854 0.0527076 31.4717 0.0306889 31.4854 0.0334412H38.44C39.2949 1.59952 40.1283 3.18542 40.9694 4.76306C41.8441 3.19973 42.688 1.60503 43.5539 0.0334412H50.2773C50.2828 0.0609646 50.2635 0.0917908 50.2498 0.11436C48.2874 3.58671 46.2781 7.07117 44.319 10.5496C46.4967 14.3566 48.7162 18.1609 50.8806 21.9602H50.8801Z" fill="#191919"/>
+<path d="M34.0766 8.54271C34.2538 9.26712 34.3562 10.0647 34.3562 10.9037C34.3562 13.5206 33.6032 15.4604 32.5573 17.0381C32.38 17.3056 32.2 17.5621 32.0068 17.8071C31.4283 18.5442 30.7481 19.1955 29.9866 19.7414C29.4714 20.1097 28.9352 20.4438 28.3396 20.7257C27.1555 21.2855 25.7249 21.7231 24.0751 21.7231C21.4962 21.7231 19.5921 20.9315 18.0508 19.8449C16.5095 18.755 15.3084 17.3139 14.4915 15.4962C13.9438 14.2786 13.5843 12.8738 13.5425 11.1624C13.5232 10.3152 13.6283 9.47905 13.7803 8.75464C14.1678 6.92598 14.9291 5.49367 15.8919 4.25897C16.8552 3.02702 18.0756 2.0626 19.5503 1.33488C20.1676 1.03287 20.8153 0.797414 21.4824 0.632487C22.187 0.456888 22.9687 0.337437 23.8125 0.337437H23.8263C24.6509 0.298353 25.5251 0.432117 26.2115 0.585147C26.8879 0.739704 27.5464 0.963837 28.1767 1.25397C30.0031 2.08517 31.3644 3.32813 32.4604 4.88045C33.1826 5.89771 33.7248 7.11865 34.0766 8.54271ZM25.7744 15.8061C25.8405 15.5386 25.8212 15.1957 25.8212 14.8417V6.78672C25.8212 6.44102 25.7827 6.17349 25.683 5.92248C25.591 5.69609 25.4556 5.48985 25.2845 5.31532C24.9608 4.98338 24.4737 4.68503 23.8621 4.73237C23.5659 4.75494 23.3199 4.84962 23.1041 4.98614C22.6833 5.2513 22.3847 5.67226 22.2734 6.15698C22.2101 6.42121 22.2129 6.75864 22.2129 7.10709V15.1621C22.2129 15.3349 22.2046 15.5023 22.2267 15.6498C22.2845 16.0737 22.4727 16.4138 22.7193 16.6671C23.0375 16.9935 23.5302 17.2671 24.1665 17.1972C24.9883 17.1074 25.5922 16.5586 25.7739 15.8061H25.7744ZM13.8249 6.01496H6.47117C6.44089 6.93424 6.46566 7.95206 6.4574 8.87739C8.44459 8.89391 10.4621 8.88014 12.463 8.8829V14.8835C10.4483 14.889 8.41707 14.8753 6.41337 14.889C6.41612 17.2693 6.42713 19.6049 6.42713 21.9851C6.42713 21.9934 6.42438 21.9961 6.42162 21.9994H0.292167C0.281158 22.0022 0.281158 21.9939 0.272901 21.9939C0.259139 14.6848 0.259139 7.32948 0.270149 0.0187159C0.270149 0.0110094 0.270149 0 0.275653 0H13.4071C13.4153 0 13.4181 0 13.4208 0.00550468C13.559 2.007 13.6922 4.01071 13.8249 6.01496Z" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/fox-light.svg b/public/images/landing-new/whouses/fox-light.svg
new file mode 100644
index 0000000000..102d886e1b
--- /dev/null
+++ b/public/images/landing-new/whouses/fox-light.svg
@@ -0,0 +1,4 @@
+<svg width="51" height="22" viewBox="0 0 51 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50.8801 21.9602H43.9579C43.8946 21.9602 43.7785 21.6784 43.7449 21.62C42.7926 19.8894 41.8414 18.1499 40.8946 16.422C39.8817 18.2616 38.8964 20.1321 37.8863 21.974C35.62 21.9795 33.3724 21.963 31.126 21.9685C31.3803 21.489 31.6517 21.0206 31.9231 20.5499C33.8128 17.2609 35.6756 13.9278 37.5681 10.636C35.5561 7.09649 33.5139 3.58451 31.4909 0.0527076C31.4854 0.0527076 31.4717 0.0306889 31.4854 0.0334412H38.44C39.2949 1.59952 40.1283 3.18542 40.9694 4.76306C41.8441 3.19973 42.688 1.60503 43.5539 0.0334412H50.2773C50.2828 0.0609646 50.2635 0.0917908 50.2498 0.11436C48.2874 3.58671 46.2781 7.07117 44.319 10.5496C46.4967 14.3566 48.7162 18.1609 50.8806 21.9602H50.8801Z" fill="white"/>
+<path d="M34.0766 8.54271C34.2538 9.26712 34.3562 10.0647 34.3562 10.9037C34.3562 13.5206 33.6032 15.4604 32.5573 17.0381C32.38 17.3056 32.2 17.5621 32.0068 17.8071C31.4283 18.5442 30.7481 19.1955 29.9866 19.7414C29.4714 20.1097 28.9352 20.4438 28.3396 20.7257C27.1555 21.2855 25.7249 21.7231 24.0751 21.7231C21.4962 21.7231 19.5921 20.9315 18.0508 19.8449C16.5095 18.755 15.3084 17.3139 14.4915 15.4962C13.9438 14.2786 13.5843 12.8738 13.5425 11.1624C13.5232 10.3152 13.6283 9.47905 13.7803 8.75464C14.1678 6.92598 14.9291 5.49367 15.8919 4.25897C16.8552 3.02702 18.0756 2.0626 19.5503 1.33488C20.1676 1.03287 20.8153 0.797414 21.4824 0.632487C22.187 0.456888 22.9687 0.337437 23.8125 0.337437H23.8263C24.6509 0.298353 25.5251 0.432117 26.2115 0.585147C26.8879 0.739704 27.5464 0.963837 28.1767 1.25397C30.0031 2.08517 31.3644 3.32813 32.4604 4.88045C33.1826 5.89771 33.7248 7.11865 34.0766 8.54271ZM25.7744 15.8061C25.8405 15.5386 25.8212 15.1957 25.8212 14.8417V6.78672C25.8212 6.44102 25.7827 6.17349 25.683 5.92248C25.591 5.69609 25.4556 5.48985 25.2845 5.31532C24.9608 4.98338 24.4737 4.68503 23.8621 4.73237C23.5659 4.75494 23.3199 4.84962 23.1041 4.98614C22.6833 5.2513 22.3847 5.67226 22.2734 6.15698C22.2101 6.42121 22.2129 6.75864 22.2129 7.10709V15.1621C22.2129 15.3349 22.2046 15.5023 22.2267 15.6498C22.2845 16.0737 22.4727 16.4138 22.7193 16.6671C23.0375 16.9935 23.5302 17.2671 24.1665 17.1972C24.9883 17.1074 25.5922 16.5586 25.7739 15.8061H25.7744ZM13.8249 6.01496H6.47117C6.44089 6.93424 6.46566 7.95206 6.4574 8.87739C8.44459 8.89391 10.4621 8.88014 12.463 8.8829V14.8835C10.4483 14.889 8.41707 14.8753 6.41337 14.889C6.41612 17.2693 6.42713 19.6049 6.42713 21.9851C6.42713 21.9934 6.42438 21.9961 6.42162 21.9994H0.292167C0.281158 22.0022 0.281158 21.9939 0.272901 21.9939C0.259139 14.6848 0.259139 7.32948 0.270149 0.0187159C0.270149 0.0110094 0.270149 0 0.275653 0H13.4071C13.4153 0 13.4181 0 13.4208 0.00550468C13.559 2.007 13.6922 4.01071 13.8249 6.01496Z" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/intel-dark.svg b/public/images/landing-new/whouses/intel-dark.svg
new file mode 100644
index 0000000000..569e6b70b0
--- /dev/null
+++ b/public/images/landing-new/whouses/intel-dark.svg
@@ -0,0 +1,4 @@
+<svg width="53" height="34" viewBox="0 0 53 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8397 14.4214V22.7475H13.1885V12.2826L18.6599 12.2875C20.9841 12.2875 21.7758 13.927 21.7758 15.415V22.7475H19.1303V15.429C19.1303 14.8053 18.8073 14.4214 18.0288 14.4214H15.8389H15.8397ZM33.8614 14.297C32.9551 14.297 32.2548 14.7625 31.9615 15.3944C31.7885 15.7734 31.7283 16.065 31.7086 16.5297H35.786C35.7332 15.3944 35.2183 14.297 33.8614 14.297ZM31.7086 18.334C31.7086 19.6893 32.5506 20.687 34.0558 20.687C35.2257 20.687 35.8082 20.3624 36.4846 19.6893L38.1217 21.2522C37.0737 22.287 35.9738 22.9156 34.036 22.9156C31.4985 22.9156 29.0705 21.5315 29.0705 17.5002C29.0705 14.0547 31.1912 12.1046 33.9767 12.1046C36.8002 12.1046 38.4315 14.3884 38.4315 17.3791V18.3332H31.7086V18.334ZM26.8336 22.7344C24.6751 22.7344 23.7581 21.2316 23.7581 19.747V9.4311H26.4044V12.2817H28.3998V14.4214H26.4036V19.5814C26.4036 20.1894 26.6911 20.5264 27.3222 20.5264H28.399V22.7344H26.8328H26.8336ZM10.8313 10.8358H8.16193V8.30073H10.8313V10.8358ZM10.8379 22.8571C8.83917 22.6652 8.16028 21.4532 8.16028 20.0551L8.16276 12.2826H10.8379V22.8571ZM42.6432 22.6347C40.6494 22.4419 39.9721 21.2316 39.9721 19.8343V7.94069H42.6432V22.6339V22.6347ZM51.9794 9.65931C49.5597 -2.14119 26.6532 -2.88845 11.8884 6.10013V7.09209C26.6375 -0.487651 47.5568 -0.443161 49.4624 10.4255C50.1001 14.0193 48.075 17.7663 44.4582 19.9208V22.7385C48.8116 21.1459 53.2762 15.981 51.9802 9.65931H51.9794ZM25.1405 30.3059C14.9507 31.2476 4.33252 29.7687 2.84623 21.8058C2.11874 17.8809 3.90739 13.7194 6.27936 11.1349V9.75241C2.00916 13.4978 -0.308425 18.2384 1.02544 23.8408C2.72841 31.0235 11.8422 35.0951 25.7519 33.7423C31.2554 33.2051 38.4595 31.4354 43.467 28.6869V24.7817C38.9233 27.4882 31.4037 29.725 25.1405 30.3059Z" fill="#191919"/>
+<path d="M45.7301 8.73005C45.7301 8.6007 45.6543 8.5595 45.4813 8.5595H45.3148V8.92613L45.4813 8.93025C45.6543 8.93025 45.7301 8.87258 45.7301 8.75147V8.73005ZM45.9904 9.63879H45.7927C45.7746 9.63879 45.7597 9.62808 45.7515 9.61243L45.4813 9.15517C45.4772 9.14693 45.4533 9.1354 45.4442 9.1354H45.3231V9.58853C45.3231 9.61325 45.3066 9.63879 45.2745 9.63879H45.0957C45.0735 9.63879 45.0512 9.61243 45.0512 9.58936V8.44086C45.0512 8.37495 45.0767 8.34694 45.1336 8.3387C45.1962 8.33046 45.3676 8.3247 45.4599 8.3247C45.7894 8.3247 45.9871 8.42109 45.9871 8.73005V8.75147C45.9871 8.94261 45.8924 9.04312 45.7449 9.09256L46.025 9.56629C46.0267 9.57535 46.0333 9.58853 46.0333 9.59925C46.0333 9.61819 46.0217 9.63879 45.9904 9.63879ZM45.5208 8.11708C45.0347 8.11708 44.6401 8.51913 44.6401 9.00358C44.6401 9.48802 45.0339 9.88349 45.5208 9.88349C46.0053 9.88349 46.4024 9.48802 46.4024 9.00358C46.4024 8.51913 46.0053 8.11708 45.5208 8.11708ZM45.5208 10.0656C44.9293 10.0656 44.458 9.58853 44.458 9.00275C44.458 8.41862 44.9293 7.93994 45.5208 7.93994C46.1058 7.93994 46.5861 8.41862 46.5861 9.00275C46.5861 9.58853 46.1058 10.0656 45.5208 10.0656Z" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/intel-light.svg b/public/images/landing-new/whouses/intel-light.svg
new file mode 100644
index 0000000000..35c3d326d0
--- /dev/null
+++ b/public/images/landing-new/whouses/intel-light.svg
@@ -0,0 +1,4 @@
+<svg width="53" height="34" viewBox="0 0 53 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8397 14.4214V22.7475H13.1885V12.2826L18.6599 12.2875C20.9841 12.2875 21.7758 13.927 21.7758 15.415V22.7475H19.1303V15.429C19.1303 14.8053 18.8073 14.4214 18.0288 14.4214H15.8389H15.8397ZM33.8614 14.297C32.9551 14.297 32.2548 14.7625 31.9615 15.3944C31.7885 15.7734 31.7283 16.065 31.7086 16.5297H35.786C35.7332 15.3944 35.2183 14.297 33.8614 14.297ZM31.7086 18.334C31.7086 19.6893 32.5506 20.687 34.0558 20.687C35.2257 20.687 35.8082 20.3624 36.4846 19.6893L38.1217 21.2522C37.0737 22.287 35.9738 22.9156 34.036 22.9156C31.4985 22.9156 29.0705 21.5315 29.0705 17.5002C29.0705 14.0547 31.1912 12.1046 33.9767 12.1046C36.8002 12.1046 38.4315 14.3884 38.4315 17.3791V18.3332H31.7086V18.334ZM26.8336 22.7344C24.6751 22.7344 23.7581 21.2316 23.7581 19.747V9.4311H26.4044V12.2817H28.3998V14.4214H26.4036V19.5814C26.4036 20.1894 26.6911 20.5264 27.3222 20.5264H28.399V22.7344H26.8328H26.8336ZM10.8313 10.8358H8.16193V8.30073H10.8313V10.8358ZM10.8379 22.8571C8.83917 22.6652 8.16028 21.4532 8.16028 20.0551L8.16276 12.2826H10.8379V22.8571ZM42.6432 22.6347C40.6494 22.4419 39.9721 21.2316 39.9721 19.8343V7.94069H42.6432V22.6339V22.6347ZM51.9794 9.65931C49.5597 -2.14119 26.6532 -2.88845 11.8884 6.10013V7.09209C26.6375 -0.487651 47.5568 -0.443161 49.4624 10.4255C50.1001 14.0193 48.075 17.7663 44.4582 19.9208V22.7385C48.8116 21.1459 53.2762 15.981 51.9802 9.65931H51.9794ZM25.1405 30.3059C14.9507 31.2476 4.33252 29.7687 2.84623 21.8058C2.11874 17.8809 3.90739 13.7194 6.27936 11.1349V9.75241C2.00916 13.4978 -0.308425 18.2384 1.02544 23.8408C2.72841 31.0235 11.8422 35.0951 25.7519 33.7423C31.2554 33.2051 38.4595 31.4354 43.467 28.6869V24.7817C38.9233 27.4882 31.4037 29.725 25.1405 30.3059Z" fill="white"/>
+<path d="M45.7301 8.73005C45.7301 8.6007 45.6543 8.5595 45.4813 8.5595H45.3148V8.92613L45.4813 8.93025C45.6543 8.93025 45.7301 8.87258 45.7301 8.75147V8.73005ZM45.9904 9.63879H45.7927C45.7746 9.63879 45.7597 9.62808 45.7515 9.61243L45.4813 9.15517C45.4772 9.14693 45.4533 9.1354 45.4442 9.1354H45.3231V9.58853C45.3231 9.61325 45.3066 9.63879 45.2745 9.63879H45.0957C45.0735 9.63879 45.0512 9.61243 45.0512 9.58936V8.44086C45.0512 8.37495 45.0767 8.34694 45.1336 8.3387C45.1962 8.33046 45.3676 8.3247 45.4599 8.3247C45.7894 8.3247 45.9871 8.42109 45.9871 8.73005V8.75147C45.9871 8.94261 45.8924 9.04312 45.7449 9.09256L46.025 9.56629C46.0267 9.57535 46.0333 9.58853 46.0333 9.59925C46.0333 9.61819 46.0217 9.63879 45.9904 9.63879ZM45.5208 8.11708C45.0347 8.11708 44.6401 8.51913 44.6401 9.00358C44.6401 9.48802 45.0339 9.88349 45.5208 9.88349C46.0053 9.88349 46.4024 9.48802 46.4024 9.00358C46.4024 8.51913 46.0053 8.11708 45.5208 8.11708ZM45.5208 10.0656C44.9293 10.0656 44.458 9.58853 44.458 9.00275C44.458 8.41862 44.9293 7.93994 45.5208 7.93994C46.1058 7.93994 46.5861 8.41862 46.5861 9.00275C46.5861 9.58853 46.1058 10.0656 45.5208 10.0656Z" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/lufthansa-dark.svg b/public/images/landing-new/whouses/lufthansa-dark.svg
new file mode 100644
index 0000000000..e61f257300
--- /dev/null
+++ b/public/images/landing-new/whouses/lufthansa-dark.svg
@@ -0,0 +1,11 @@
+<svg width="97" height="18" viewBox="0 0 97 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.823 5.08533H49.2537V3.29541H47.851C46.0175 3.29541 45.0471 4.30266 45.0471 6.31547V6.53921H43.9678V8.32829H45.0471V14.7036H47.6364V8.32829H49.1465V6.53921H47.6356V6.31547C47.6356 5.53197 48.0663 5.08533 48.8222 5.08533H48.823ZM50.6565 6.53921H49.5772V8.32913H50.6565V12.2425C50.6565 13.9209 51.4115 14.7036 52.9215 14.7036H54.8631V12.8022H54.3243L53.4612 12.6899C53.3531 12.467 53.2458 12.131 53.2458 11.5721V8.32913H54.7559V6.53921H53.2458V3.96663H50.6565V6.53921ZM57.993 3.29541H55.4028V14.7036H57.9921V10.0059C57.9921 8.88806 58.4237 8.32829 59.2868 8.32829C60.0418 8.32829 60.3653 8.88806 60.3653 10.0059V14.7036H62.9546V10.0059C62.9546 8.88806 62.8474 8.10539 62.6312 7.65791C62.0915 6.76295 61.3356 6.31547 60.1499 6.31547C59.0714 6.31547 58.4237 6.65066 57.993 7.43417V3.29541ZM67.3774 11.2361L68.9947 10.7894V11.4606C68.9947 12.5793 68.4559 13.1383 67.1621 13.1383C66.5152 13.1383 66.0836 12.9145 66.0836 12.3548C66.0836 11.7958 66.5152 11.4606 67.3774 11.2369V11.2361ZM67.809 7.99394C68.564 7.99394 68.8883 8.21684 68.8883 8.77577C68.8883 9.11179 68.673 9.3347 68.1341 9.44698L65.8674 9.89363C64.3574 10.3419 63.6015 11.2369 63.6015 12.467C63.6015 13.2497 63.8186 13.8078 64.4655 14.3684C65.0051 14.8159 65.7585 15.0388 66.6224 15.0388C67.4855 15.0388 68.3487 14.7036 69.2126 14.0332L69.3199 14.7036H71.6922L71.4777 13.5857V9.33386C71.4777 7.20959 70.2911 6.20318 67.809 6.20318C65.3286 6.20318 64.0331 7.20875 64.0331 9.11096H66.4071C66.4071 8.43974 66.8378 7.99226 67.809 7.99226V7.99394ZM74.7139 6.53921H72.3408V14.7036H74.9284V10.0059C74.9284 8.88806 75.36 8.32913 76.2239 8.32913C76.9781 8.32913 77.4105 8.88806 77.4105 10.0059V14.7036H79.9999V10.0059C80.0031 9.20289 79.8564 8.40631 79.5675 7.65707C79.0286 6.76295 78.2728 6.31547 77.0854 6.31547C76.2239 6.31547 75.3592 6.65066 74.8203 7.43417L74.7131 6.53921H74.7139ZM83.4515 8.66348C83.4515 8.216 83.7766 7.9931 84.4235 7.9931C85.1777 7.9931 85.502 8.32829 85.6093 9.1118H88.0913L87.659 7.65707C87.2274 6.6515 86.1489 6.20318 84.5308 6.20318C81.9414 6.20318 80.754 7.09814 80.754 8.99951C80.754 10.2297 81.6188 11.0123 83.4523 11.4606H84.2065C85.1769 11.6835 85.7165 12.0196 85.7165 12.467C85.7165 12.9145 85.2858 13.1374 84.4227 13.1374C83.5596 13.1374 83.0199 12.8022 83.0199 12.131V12.0196H80.5395C80.5395 14.0324 81.8334 15.0388 84.6381 15.0388C87.0129 15.0388 88.3059 14.1447 88.3059 12.2425C88.3059 10.9017 87.3347 10.0059 85.502 9.67072L84.6389 9.44698C83.8839 9.33553 83.4515 9.11179 83.4515 8.66432" fill="#191919"/>
+<mask id="mask0_1676_2273" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="6" width="9" height="10">
+<path d="M96.8288 15.0397V6.2041H88.7373V15.0397H96.8288Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask0_1676_2273)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5132 11.237L94.1322 10.7895V11.4616C94.1322 12.5794 93.5925 13.1383 92.297 13.1383C91.6501 13.1383 91.2194 12.9146 91.2194 12.3548C91.2194 11.7959 91.6501 11.4616 92.5132 11.237ZM92.9456 7.99402C93.6998 7.99402 94.0249 8.21692 94.0249 8.77585C94.0249 9.11187 93.8071 9.33561 93.2682 9.4479L91.0024 9.89454C89.4923 10.342 88.7373 11.237 88.7373 12.4671C88.7373 13.2498 88.9527 13.8087 89.6004 14.3693C90.1401 14.816 90.8951 15.0397 91.7582 15.0397C92.6213 15.0397 93.4844 14.7045 94.3475 14.0333L94.4556 14.7037H96.8288L96.6126 13.5858V9.33561C96.6126 7.21051 95.4252 6.2041 92.9456 6.2041C90.5708 6.2041 89.2778 7.21051 89.1697 9.11187H91.5428C91.5428 8.44066 91.9744 7.99402 92.9456 7.99402Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.69075 1.28267C10.8485 1.28267 12.5748 2.0645 14.0856 3.51922C15.4876 5.0854 16.2426 6.87531 16.2426 8.99958C16.2426 11.1247 15.4884 12.9146 14.0856 14.4799C12.5748 15.9347 10.8485 16.7173 8.79885 16.7173C6.74916 16.7173 5.02293 15.9347 3.51374 14.4799C2.11097 12.9146 1.35595 11.1247 1.35595 8.99958C1.35595 6.87531 2.11013 5.0854 3.51374 3.51922C5.02293 2.0645 6.74916 1.28183 8.69075 1.28183V1.28267ZM14.6236 2.96029C13.1153 1.28267 11.1712 0.5 8.90694 0.5C6.6419 0.5 4.69947 1.28267 2.97408 2.96029C1.35511 4.63792 0.600098 6.65074 0.600098 8.99958C0.600098 11.4607 1.35595 13.3612 2.97324 15.0389C4.59221 16.7165 6.5338 17.5 8.79885 17.5C11.0647 17.5 13.0055 16.7165 14.6244 15.0389C16.2426 13.3612 16.9976 11.4607 16.9976 8.99958C16.9976 6.65074 16.2434 4.63792 14.6244 2.96029" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29695 7.09814L3.18969 7.54562L2.00228 7.21043L1.89502 7.65707C2.75813 7.88165 3.83661 8.44058 5.23854 9.22408C7.72062 10.7894 10.31 12.0196 13.0066 12.6908L13.7616 12.0196H13.2228C11.6038 12.0196 10.31 11.4606 9.33875 10.3419C10.4691 9.74634 11.7289 9.43893 13.0066 9.44698L13.8697 9.55844L14.1931 9.1118H13.2228L10.9569 9.22408L11.065 8.88806H14.4085L14.7328 8.44058H11.2803L11.3884 8.21684H14.9482L15.1644 7.88165L11.6038 7.76936L11.7127 7.43417L15.3797 7.54562L15.7032 7.21043L12.7904 6.98669L9.87841 7.20959C9.44685 8.55203 8.58374 9.22408 7.28906 9.22408C6.74941 9.22408 6.10249 8.99951 5.34664 8.55203L5.02318 8.32829L5.13212 8.21684L6.85667 8.88722L6.96561 8.66432L3.29695 7.0973V7.09814ZM30.6987 3.29541H28.0013V14.7036H35.3378V12.467H30.6987V3.29541ZM43.4293 6.53921H40.8399V11.2361C40.8399 12.3548 40.4084 12.9145 39.5452 12.9145C38.7894 12.9145 38.4668 12.3548 38.4668 11.2361V6.53921H35.8774V11.4606C35.8774 12.3548 35.9847 13.1383 36.309 13.5849C36.7397 14.4799 37.4956 14.9273 38.7894 14.9273C39.6533 14.9273 40.4084 14.5922 41.0553 13.9209V14.7036H43.4284V6.53921H43.4293Z" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/lufthansa-light.svg b/public/images/landing-new/whouses/lufthansa-light.svg
new file mode 100644
index 0000000000..756df15db4
--- /dev/null
+++ b/public/images/landing-new/whouses/lufthansa-light.svg
@@ -0,0 +1,11 @@
+<svg width="97" height="18" viewBox="0 0 97 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.823 5.08533H49.2537V3.29541H47.851C46.0175 3.29541 45.0471 4.30266 45.0471 6.31547V6.53921H43.9678V8.32829H45.0471V14.7036H47.6364V8.32829H49.1465V6.53921H47.6356V6.31547C47.6356 5.53197 48.0663 5.08533 48.8222 5.08533H48.823ZM50.6565 6.53921H49.5772V8.32913H50.6565V12.2425C50.6565 13.9209 51.4115 14.7036 52.9215 14.7036H54.8631V12.8022H54.3243L53.4612 12.6899C53.3531 12.467 53.2458 12.131 53.2458 11.5721V8.32913H54.7559V6.53921H53.2458V3.96663H50.6565V6.53921ZM57.993 3.29541H55.4028V14.7036H57.9921V10.0059C57.9921 8.88806 58.4237 8.32829 59.2868 8.32829C60.0418 8.32829 60.3653 8.88806 60.3653 10.0059V14.7036H62.9546V10.0059C62.9546 8.88806 62.8474 8.10539 62.6312 7.65791C62.0915 6.76295 61.3356 6.31547 60.1499 6.31547C59.0714 6.31547 58.4237 6.65066 57.993 7.43417V3.29541ZM67.3774 11.2361L68.9947 10.7894V11.4606C68.9947 12.5793 68.4559 13.1383 67.1621 13.1383C66.5152 13.1383 66.0836 12.9145 66.0836 12.3548C66.0836 11.7958 66.5152 11.4606 67.3774 11.2369V11.2361ZM67.809 7.99394C68.564 7.99394 68.8883 8.21684 68.8883 8.77577C68.8883 9.11179 68.673 9.3347 68.1341 9.44698L65.8674 9.89363C64.3574 10.3419 63.6015 11.2369 63.6015 12.467C63.6015 13.2497 63.8186 13.8078 64.4655 14.3684C65.0051 14.8159 65.7585 15.0388 66.6224 15.0388C67.4855 15.0388 68.3487 14.7036 69.2126 14.0332L69.3199 14.7036H71.6922L71.4777 13.5857V9.33386C71.4777 7.20959 70.2911 6.20318 67.809 6.20318C65.3286 6.20318 64.0331 7.20875 64.0331 9.11096H66.4071C66.4071 8.43974 66.8378 7.99226 67.809 7.99226V7.99394ZM74.7139 6.53921H72.3408V14.7036H74.9284V10.0059C74.9284 8.88806 75.36 8.32913 76.2239 8.32913C76.9781 8.32913 77.4105 8.88806 77.4105 10.0059V14.7036H79.9999V10.0059C80.0031 9.20289 79.8564 8.40631 79.5675 7.65707C79.0286 6.76295 78.2728 6.31547 77.0854 6.31547C76.2239 6.31547 75.3592 6.65066 74.8203 7.43417L74.7131 6.53921H74.7139ZM83.4515 8.66348C83.4515 8.216 83.7766 7.9931 84.4235 7.9931C85.1777 7.9931 85.502 8.32829 85.6093 9.1118H88.0913L87.659 7.65707C87.2274 6.6515 86.1489 6.20318 84.5308 6.20318C81.9414 6.20318 80.754 7.09814 80.754 8.99951C80.754 10.2297 81.6188 11.0123 83.4523 11.4606H84.2065C85.1769 11.6835 85.7165 12.0196 85.7165 12.467C85.7165 12.9145 85.2858 13.1374 84.4227 13.1374C83.5596 13.1374 83.0199 12.8022 83.0199 12.131V12.0196H80.5395C80.5395 14.0324 81.8334 15.0388 84.6381 15.0388C87.0129 15.0388 88.3059 14.1447 88.3059 12.2425C88.3059 10.9017 87.3347 10.0059 85.502 9.67072L84.6389 9.44698C83.8839 9.33553 83.4515 9.11179 83.4515 8.66432" fill="white"/>
+<mask id="mask0_1676_2273" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="6" width="9" height="10">
+<path d="M96.8288 15.0397V6.2041H88.7373V15.0397H96.8288Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1676_2273)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.5132 11.237L94.1322 10.7895V11.4616C94.1322 12.5794 93.5925 13.1383 92.297 13.1383C91.6501 13.1383 91.2194 12.9146 91.2194 12.3548C91.2194 11.7959 91.6501 11.4616 92.5132 11.237ZM92.9456 7.99402C93.6998 7.99402 94.0249 8.21692 94.0249 8.77585C94.0249 9.11187 93.8071 9.33561 93.2682 9.4479L91.0024 9.89454C89.4923 10.342 88.7373 11.237 88.7373 12.4671C88.7373 13.2498 88.9527 13.8087 89.6004 14.3693C90.1401 14.816 90.8951 15.0397 91.7582 15.0397C92.6213 15.0397 93.4844 14.7045 94.3475 14.0333L94.4556 14.7037H96.8288L96.6126 13.5858V9.33561C96.6126 7.21051 95.4252 6.2041 92.9456 6.2041C90.5708 6.2041 89.2778 7.21051 89.1697 9.11187H91.5428C91.5428 8.44066 91.9744 7.99402 92.9456 7.99402Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.69075 1.28267C10.8485 1.28267 12.5748 2.0645 14.0856 3.51922C15.4876 5.0854 16.2426 6.87531 16.2426 8.99958C16.2426 11.1247 15.4884 12.9146 14.0856 14.4799C12.5748 15.9347 10.8485 16.7173 8.79885 16.7173C6.74916 16.7173 5.02293 15.9347 3.51374 14.4799C2.11097 12.9146 1.35595 11.1247 1.35595 8.99958C1.35595 6.87531 2.11013 5.0854 3.51374 3.51922C5.02293 2.0645 6.74916 1.28183 8.69075 1.28183V1.28267ZM14.6236 2.96029C13.1153 1.28267 11.1712 0.5 8.90694 0.5C6.6419 0.5 4.69947 1.28267 2.97408 2.96029C1.35511 4.63792 0.600098 6.65074 0.600098 8.99958C0.600098 11.4607 1.35595 13.3612 2.97324 15.0389C4.59221 16.7165 6.5338 17.5 8.79885 17.5C11.0647 17.5 13.0055 16.7165 14.6244 15.0389C16.2426 13.3612 16.9976 11.4607 16.9976 8.99958C16.9976 6.65074 16.2434 4.63792 14.6244 2.96029" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.29695 7.09814L3.18969 7.54562L2.00228 7.21043L1.89502 7.65707C2.75813 7.88165 3.83661 8.44058 5.23854 9.22408C7.72062 10.7894 10.31 12.0196 13.0066 12.6908L13.7616 12.0196H13.2228C11.6038 12.0196 10.31 11.4606 9.33875 10.3419C10.4691 9.74634 11.7289 9.43893 13.0066 9.44698L13.8697 9.55844L14.1931 9.1118H13.2228L10.9569 9.22408L11.065 8.88806H14.4085L14.7328 8.44058H11.2803L11.3884 8.21684H14.9482L15.1644 7.88165L11.6038 7.76936L11.7127 7.43417L15.3797 7.54562L15.7032 7.21043L12.7904 6.98669L9.87841 7.20959C9.44685 8.55203 8.58374 9.22408 7.28906 9.22408C6.74941 9.22408 6.10249 8.99951 5.34664 8.55203L5.02318 8.32829L5.13212 8.21684L6.85667 8.88722L6.96561 8.66432L3.29695 7.0973V7.09814ZM30.6987 3.29541H28.0013V14.7036H35.3378V12.467H30.6987V3.29541ZM43.4293 6.53921H40.8399V11.2361C40.8399 12.3548 40.4084 12.9145 39.5452 12.9145C38.7894 12.9145 38.4668 12.3548 38.4668 11.2361V6.53921H35.8774V11.4606C35.8774 12.3548 35.9847 13.1383 36.309 13.5849C36.7397 14.4799 37.4956 14.9273 38.7894 14.9273C39.6533 14.9273 40.4084 14.5922 41.0553 13.9209V14.7036H43.4284V6.53921H43.4293Z" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/mercedes-dark.svg b/public/images/landing-new/whouses/mercedes-dark.svg
new file mode 100644
index 0000000000..bbec524c86
--- /dev/null
+++ b/public/images/landing-new/whouses/mercedes-dark.svg
@@ -0,0 +1,8 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2210" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="34" height="34">
+<path d="M33.4522 34V0H0.261719V34H33.4522Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask0_1676_2210)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7446 14.1163C32.7086 14.0712 32.6851 14.0036 32.6545 13.9216C31.4421 10.049 30.4099 8.52742 28.416 6.26394C25.7928 3.28022 21.5092 0.977973 16.9525 0.972564C8.24115 0.972564 1.17577 8.29485 1.17577 17.3154C1.17577 19.9999 1.73916 22.3138 2.19167 23.4785C2.72622 24.8279 3.64387 26.6443 3.69075 26.7272C3.72431 26.794 3.74132 26.8679 3.74032 26.9427C3.67992 26.8924 3.62947 26.8312 3.59159 26.7624C3.32657 26.3657 2.24486 24.3465 1.90682 23.4659C1.17577 21.5458 0.632205 19.4518 0.632205 17.2532C0.632205 7.95501 7.90041 0.410074 16.8849 0.410074C24.9067 0.410074 31.3799 6.18461 32.7446 13.9152C32.75 13.9874 32.7717 14.0505 32.7446 14.1172V14.1163ZM3.24454 25.1542C2.69467 23.9743 2.11595 22.3147 1.87617 21.0005C1.87257 20.9238 1.86085 20.8625 1.88248 20.7931C1.92575 20.8463 1.94288 20.9049 1.97623 20.9959C2.35483 22.2021 2.67934 23.2829 3.53931 24.9126L3.24454 25.1542ZM3.54562 25.0037L15.1704 16.3455L14.1752 15.7596L3.82145 24.6774C2.65681 22.4923 1.84823 19.6907 1.84823 17.0243C1.84823 8.5797 8.3367 1.74509 16.5577 1.6928L14.4376 15.3476L15.4273 15.9435L16.7596 1.6919C16.7831 1.51342 16.8993 1.51342 16.8993 1.6919L16.9796 16.7205L19.3395 15.2836L17.0814 1.6901C25.1582 1.91546 31.854 8.65993 31.854 16.9981C31.854 19.6853 31.0653 22.4923 29.8754 24.6918L19.5306 15.765L18.5336 16.3545L29.6563 24.708C29.9241 24.9036 29.8411 24.9938 29.5545 24.8297L17.0652 17.3704V20.1657L29.5842 25.12C26.962 29.5505 22.2259 32.3864 16.8083 32.3864C11.3817 32.3864 6.72224 29.5541 4.09639 25.1146L16.6397 20.1576V17.3614L3.65379 25.1317C3.34099 25.3057 3.26076 25.2101 3.54562 25.0028V25.0037ZM16.8516 33.3554C10.6173 33.3554 5.72617 29.9985 3.39688 25.3841L3.75294 25.2471C4.3569 26.272 5.15015 27.1698 6.21384 28.384C7.52271 29.8768 11.6639 32.7533 16.8453 32.7533C22.3647 32.7542 27.2117 29.7903 29.9322 25.2615C30.1413 25.2011 30.2098 25.1065 30.1377 24.9181C31.3844 22.6447 32.229 19.7889 32.229 16.999C32.229 15.2394 31.982 13.8116 31.5863 12.5334C31.3413 11.7482 31.044 10.9802 30.6966 10.2347C30.6545 10.1693 30.6337 10.0925 30.6371 10.0148C30.6994 10.0655 30.7504 10.1288 30.7867 10.2005C31.0274 10.6584 31.5647 11.7726 31.818 12.4982C32.1587 13.4708 32.7717 14.8113 32.7717 16.999C32.7717 25.9457 25.7 33.3599 16.8525 33.3554H16.8516ZM16.8516 -7.51361e-05C7.69218 -0.00458227 0.261719 7.60886 0.261719 16.9981C0.260817 26.3847 7.68587 33.9981 16.8507 33.9999C26.0191 33.9999 33.4522 26.3901 33.4522 16.9981C33.4522 7.61427 26.0218 -0.000976562 16.8507 -0.000976562L16.8516 -7.51361e-05Z" fill="#191919"/>
+</g>
+</svg>
diff --git a/public/images/landing-new/whouses/mercedes-light.svg b/public/images/landing-new/whouses/mercedes-light.svg
new file mode 100644
index 0000000000..d6d19ca27e
--- /dev/null
+++ b/public/images/landing-new/whouses/mercedes-light.svg
@@ -0,0 +1,8 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2210" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="34" height="34">
+<path d="M33.4522 34V0H0.261719V34H33.4522Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1676_2210)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7446 14.1163C32.7086 14.0712 32.6851 14.0036 32.6545 13.9216C31.4421 10.049 30.4099 8.52742 28.416 6.26394C25.7928 3.28022 21.5092 0.977973 16.9525 0.972564C8.24115 0.972564 1.17577 8.29485 1.17577 17.3154C1.17577 19.9999 1.73916 22.3138 2.19167 23.4785C2.72622 24.8279 3.64387 26.6443 3.69075 26.7272C3.72431 26.794 3.74132 26.8679 3.74032 26.9427C3.67992 26.8924 3.62947 26.8312 3.59159 26.7624C3.32657 26.3657 2.24486 24.3465 1.90682 23.4659C1.17577 21.5458 0.632205 19.4518 0.632205 17.2532C0.632205 7.95501 7.90041 0.410074 16.8849 0.410074C24.9067 0.410074 31.3799 6.18461 32.7446 13.9152C32.75 13.9874 32.7717 14.0505 32.7446 14.1172V14.1163ZM3.24454 25.1542C2.69467 23.9743 2.11595 22.3147 1.87617 21.0005C1.87257 20.9238 1.86085 20.8625 1.88248 20.7931C1.92575 20.8463 1.94288 20.9049 1.97623 20.9959C2.35483 22.2021 2.67934 23.2829 3.53931 24.9126L3.24454 25.1542ZM3.54562 25.0037L15.1704 16.3455L14.1752 15.7596L3.82145 24.6774C2.65681 22.4923 1.84823 19.6907 1.84823 17.0243C1.84823 8.5797 8.3367 1.74509 16.5577 1.6928L14.4376 15.3476L15.4273 15.9435L16.7596 1.6919C16.7831 1.51342 16.8993 1.51342 16.8993 1.6919L16.9796 16.7205L19.3395 15.2836L17.0814 1.6901C25.1582 1.91546 31.854 8.65993 31.854 16.9981C31.854 19.6853 31.0653 22.4923 29.8754 24.6918L19.5306 15.765L18.5336 16.3545L29.6563 24.708C29.9241 24.9036 29.8411 24.9938 29.5545 24.8297L17.0652 17.3704V20.1657L29.5842 25.12C26.962 29.5505 22.2259 32.3864 16.8083 32.3864C11.3817 32.3864 6.72224 29.5541 4.09639 25.1146L16.6397 20.1576V17.3614L3.65379 25.1317C3.34099 25.3057 3.26076 25.2101 3.54562 25.0028V25.0037ZM16.8516 33.3554C10.6173 33.3554 5.72617 29.9985 3.39688 25.3841L3.75294 25.2471C4.3569 26.272 5.15015 27.1698 6.21384 28.384C7.52271 29.8768 11.6639 32.7533 16.8453 32.7533C22.3647 32.7542 27.2117 29.7903 29.9322 25.2615C30.1413 25.2011 30.2098 25.1065 30.1377 24.9181C31.3844 22.6447 32.229 19.7889 32.229 16.999C32.229 15.2394 31.982 13.8116 31.5863 12.5334C31.3413 11.7482 31.044 10.9802 30.6966 10.2347C30.6545 10.1693 30.6337 10.0925 30.6371 10.0148C30.6994 10.0655 30.7504 10.1288 30.7867 10.2005C31.0274 10.6584 31.5647 11.7726 31.818 12.4982C32.1587 13.4708 32.7717 14.8113 32.7717 16.999C32.7717 25.9457 25.7 33.3599 16.8525 33.3554H16.8516ZM16.8516 -7.51361e-05C7.69218 -0.00458227 0.261719 7.60886 0.261719 16.9981C0.260817 26.3847 7.68587 33.9981 16.8507 33.9999C26.0191 33.9999 33.4522 26.3901 33.4522 16.9981C33.4522 7.61427 26.0218 -0.000976562 16.8507 -0.000976562L16.8516 -7.51361e-05Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/images/landing-new/whouses/nvidia-dark.svg b/public/images/landing-new/whouses/nvidia-dark.svg
new file mode 100644
index 0000000000..ad0d477ee6
--- /dev/null
+++ b/public/images/landing-new/whouses/nvidia-dark.svg
@@ -0,0 +1,4 @@
+<svg width="86" height="16" viewBox="0 0 86 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M83.6954 14.3825V14.0353H83.918C84.0398 14.0353 84.2064 14.0451 84.2064 14.1935C84.2064 14.3545 84.121 14.3825 83.9768 14.3825H83.6954ZM83.6954 14.6261H83.8438L84.1896 15.2323H84.5704L84.1868 14.6023C84.3856 14.5883 84.548 14.4945 84.548 14.2285C84.548 13.8967 84.3184 13.7903 83.9334 13.7903H83.3748V15.2323H83.6954V14.6261ZM85.3194 14.5141C85.3194 13.6657 84.66 13.1743 83.9264 13.1743C83.1872 13.1743 82.5278 13.6657 82.5278 14.5141C82.5278 15.3611 83.1872 15.8553 83.9264 15.8553C84.66 15.8553 85.3194 15.3611 85.3194 14.5141ZM84.9162 14.5141C84.9162 15.1315 84.464 15.5473 83.9264 15.5473V15.5431C83.3748 15.5473 82.9296 15.1315 82.9296 14.5141C82.9296 13.8967 83.3748 13.4837 83.9264 13.4837C84.464 13.4837 84.9162 13.8967 84.9162 14.5141Z" fill="#191919"/>
+<path d="M34.2008 0.165531L34.2022 15.3807H38.4988V0.165531H34.2008ZM0.39502 0.144531V15.3807H4.73082V3.81253H8.08942C9.20102 3.81253 9.99342 4.08833 10.531 4.66233C11.21 5.38613 11.4872 6.55373 11.4872 8.69153V15.3807H15.6886V6.96253C15.6886 0.953731 11.8582 0.144531 8.11182 0.144531H0.39502ZM41.121 0.165531V15.3807H48.0902C51.8044 15.3807 53.0168 14.7633 54.3272 13.3787C55.254 12.4071 55.8518 10.2721 55.8518 7.94253C55.8518 5.80333 55.345 3.89513 54.4616 2.70653C52.8698 0.579931 50.5752 0.165531 47.1522 0.165531H41.121ZM45.3826 3.47793H47.2306C49.9102 3.47793 51.6448 4.68333 51.6448 7.80533C51.6448 10.9301 49.9102 12.1341 47.2306 12.1341H45.3826V3.47793ZM28.0058 0.165531L24.4176 12.2251L20.982 0.165531H16.3424L21.2508 15.3807H27.4444L32.392 0.165531H28.0058ZM57.851 15.3807H62.1504V0.165531H57.851V15.3807ZM69.8994 0.171131L63.899 15.3779H68.1354L69.0846 12.6885H76.1868L77.0856 15.3779H81.686L75.6394 0.171131H69.8994ZM72.6882 2.94453L75.2922 10.0691H70.003L72.6882 2.94453Z" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/nvidia-light.svg b/public/images/landing-new/whouses/nvidia-light.svg
new file mode 100644
index 0000000000..6131a44f9f
--- /dev/null
+++ b/public/images/landing-new/whouses/nvidia-light.svg
@@ -0,0 +1,4 @@
+<svg width="86" height="16" viewBox="0 0 86 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M83.6954 14.3825V14.0353H83.918C84.0398 14.0353 84.2064 14.0451 84.2064 14.1935C84.2064 14.3545 84.121 14.3825 83.9768 14.3825H83.6954ZM83.6954 14.6261H83.8438L84.1896 15.2323H84.5704L84.1868 14.6023C84.3856 14.5883 84.548 14.4945 84.548 14.2285C84.548 13.8967 84.3184 13.7903 83.9334 13.7903H83.3748V15.2323H83.6954V14.6261ZM85.3194 14.5141C85.3194 13.6657 84.66 13.1743 83.9264 13.1743C83.1872 13.1743 82.5278 13.6657 82.5278 14.5141C82.5278 15.3611 83.1872 15.8553 83.9264 15.8553C84.66 15.8553 85.3194 15.3611 85.3194 14.5141ZM84.9162 14.5141C84.9162 15.1315 84.464 15.5473 83.9264 15.5473V15.5431C83.3748 15.5473 82.9296 15.1315 82.9296 14.5141C82.9296 13.8967 83.3748 13.4837 83.9264 13.4837C84.464 13.4837 84.9162 13.8967 84.9162 14.5141Z" fill="white"/>
+<path d="M34.2008 0.165531L34.2022 15.3807H38.4988V0.165531H34.2008ZM0.39502 0.144531V15.3807H4.73082V3.81253H8.08942C9.20102 3.81253 9.99342 4.08833 10.531 4.66233C11.21 5.38613 11.4872 6.55373 11.4872 8.69153V15.3807H15.6886V6.96253C15.6886 0.953731 11.8582 0.144531 8.11182 0.144531H0.39502ZM41.121 0.165531V15.3807H48.0902C51.8044 15.3807 53.0168 14.7633 54.3272 13.3787C55.254 12.4071 55.8518 10.2721 55.8518 7.94253C55.8518 5.80333 55.345 3.89513 54.4616 2.70653C52.8698 0.579931 50.5752 0.165531 47.1522 0.165531H41.121ZM45.3826 3.47793H47.2306C49.9102 3.47793 51.6448 4.68333 51.6448 7.80533C51.6448 10.9301 49.9102 12.1341 47.2306 12.1341H45.3826V3.47793ZM28.0058 0.165531L24.4176 12.2251L20.982 0.165531H16.3424L21.2508 15.3807H27.4444L32.392 0.165531H28.0058ZM57.851 15.3807H62.1504V0.165531H57.851V15.3807ZM69.8994 0.171131L63.899 15.3779H68.1354L69.0846 12.6885H76.1868L77.0856 15.3779H81.686L75.6394 0.171131H69.8994ZM72.6882 2.94453L75.2922 10.0691H70.003L72.6882 2.94453Z" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/sap-dark.svg b/public/images/landing-new/whouses/sap-dark.svg
new file mode 100644
index 0000000000..26eba96b68
--- /dev/null
+++ b/public/images/landing-new/whouses/sap-dark.svg
@@ -0,0 +1,4 @@
+<svg width="72" height="36" viewBox="0 0 72 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.786133 0.5V35.4819H36.521L71.4989 0.503938H0.786133V0.5ZM46.0495 31.9061V34.5155H46.4433V33.3829H46.886L47.6003 34.5155H48.043L47.2798 33.3829C47.661 33.3356 47.9689 33.1135 47.9689 32.6441C47.9689 32.1306 47.6539 31.9061 47.034 31.9061H46.0495ZM46.4433 32.2511H46.9844C47.2506 32.2511 47.5507 32.2936 47.5507 32.6197C47.5507 33.0269 47.2467 33.0631 46.9104 33.0631H46.4433V32.2503V32.2511ZM46.9356 30.946C45.6864 30.946 44.6216 31.9085 44.6216 33.2104C44.6216 34.5218 45.6864 35.5 46.9356 35.5C47.2353 35.5008 47.5322 35.4419 47.8089 35.3268C48.0856 35.2116 48.3366 35.0426 48.5474 34.8295C48.7581 34.6164 48.9244 34.3635 49.0364 34.0856C49.1485 33.8076 49.2041 33.5101 49.2 33.2104C49.2 31.9085 48.1674 30.946 46.9356 30.946ZM46.9356 31.3154C47.9548 31.3154 48.7566 32.1385 48.7566 33.2104C48.7566 34.3005 47.9548 35.1062 46.9356 35.1062C45.8991 35.1062 45.065 34.3005 45.065 33.2104C45.065 32.1392 45.8991 31.3154 46.9356 31.3154Z" fill="#070D42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.1574 17.2386H41.6247V11.6331H43.1574C45.2036 11.6331 46.8324 12.3073 46.8324 14.4C46.8324 16.5612 45.2036 17.2386 43.1574 17.2386ZM26.6608 21.246C25.8999 21.2485 25.1447 21.1146 24.4311 20.8506L26.6387 13.8881H26.686L28.848 20.8695C28.1467 21.1192 27.4076 21.2466 26.6632 21.246H26.6608ZM42.751 7.07916H35.7908V23.6293L29.7104 7.07916H23.6836L18.4885 20.916C17.9395 17.4284 14.3268 16.221 11.4866 15.3208C9.61446 14.7182 7.62179 13.833 7.63991 12.8524C7.65566 12.0506 8.71028 11.3071 10.7904 11.4181C12.1923 11.489 13.4289 11.6024 15.8839 12.7894L18.3018 8.57721C16.0619 7.4328 12.9579 6.7145 10.4186 6.70898H10.4029C7.44064 6.70898 4.97226 7.6746 3.44114 9.25534C2.37707 10.3612 1.80133 11.76 1.77534 13.3171C1.73596 15.4499 2.52121 16.9637 4.16496 18.1743C5.55588 19.1935 7.33038 19.8495 8.89773 20.341C10.8313 20.9372 12.4097 21.4578 12.3916 22.5676C12.3758 22.9716 12.2254 23.3505 11.9332 23.6498C11.452 24.1499 10.7124 24.335 9.68928 24.3578C7.7171 24.3972 6.2545 24.0901 3.92473 22.7133L1.77534 26.9845C4.17751 28.3492 6.89111 29.0711 9.65384 29.0804H10.0169C12.4585 29.0331 14.4307 28.3361 16.0067 27.0696L16.2619 26.8467L15.5657 28.7181H21.8863L22.948 25.4896C24.0585 25.8653 25.3234 26.0764 26.6624 26.0764C27.969 26.0764 29.2016 25.8795 30.2925 25.5204L31.3132 28.7181H41.6262V22.0312H43.8765C49.311 22.0312 52.5292 19.2651 52.5292 14.6229C52.5292 9.45618 49.4039 7.08625 42.7502 7.08625" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/sap-light.svg b/public/images/landing-new/whouses/sap-light.svg
new file mode 100644
index 0000000000..6a4ccac10d
--- /dev/null
+++ b/public/images/landing-new/whouses/sap-light.svg
@@ -0,0 +1,4 @@
+<svg width="72" height="36" viewBox="0 0 72 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.786133 0.5V35.4819H36.521L71.4989 0.503938H0.786133V0.5ZM46.0495 31.9061V34.5155H46.4433V33.3829H46.886L47.6003 34.5155H48.043L47.2798 33.3829C47.661 33.3356 47.9689 33.1135 47.9689 32.6441C47.9689 32.1306 47.6539 31.9061 47.034 31.9061H46.0495ZM46.4433 32.2511H46.9844C47.2506 32.2511 47.5507 32.2936 47.5507 32.6197C47.5507 33.0269 47.2467 33.0631 46.9104 33.0631H46.4433V32.2503V32.2511ZM46.9356 30.946C45.6864 30.946 44.6216 31.9085 44.6216 33.2104C44.6216 34.5218 45.6864 35.5 46.9356 35.5C47.2353 35.5008 47.5322 35.4419 47.8089 35.3268C48.0856 35.2116 48.3366 35.0426 48.5474 34.8295C48.7581 34.6164 48.9244 34.3635 49.0364 34.0856C49.1485 33.8076 49.2041 33.5101 49.2 33.2104C49.2 31.9085 48.1674 30.946 46.9356 30.946ZM46.9356 31.3154C47.9548 31.3154 48.7566 32.1385 48.7566 33.2104C48.7566 34.3005 47.9548 35.1062 46.9356 35.1062C45.8991 35.1062 45.065 34.3005 45.065 33.2104C45.065 32.1392 45.8991 31.3154 46.9356 31.3154Z" fill="#070D42"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.1574 17.2386H41.6247V11.6331H43.1574C45.2036 11.6331 46.8324 12.3073 46.8324 14.4C46.8324 16.5612 45.2036 17.2386 43.1574 17.2386ZM26.6608 21.246C25.8999 21.2485 25.1447 21.1146 24.4311 20.8506L26.6387 13.8881H26.686L28.848 20.8695C28.1467 21.1192 27.4076 21.2466 26.6632 21.246H26.6608ZM42.751 7.07916H35.7908V23.6293L29.7104 7.07916H23.6836L18.4885 20.916C17.9395 17.4284 14.3268 16.221 11.4866 15.3208C9.61446 14.7182 7.62179 13.833 7.63991 12.8524C7.65566 12.0506 8.71028 11.3071 10.7904 11.4181C12.1923 11.489 13.4289 11.6024 15.8839 12.7894L18.3018 8.57721C16.0619 7.4328 12.9579 6.7145 10.4186 6.70898H10.4029C7.44064 6.70898 4.97226 7.6746 3.44114 9.25534C2.37707 10.3612 1.80133 11.76 1.77534 13.3171C1.73596 15.4499 2.52121 16.9637 4.16496 18.1743C5.55588 19.1935 7.33038 19.8495 8.89773 20.341C10.8313 20.9372 12.4097 21.4578 12.3916 22.5676C12.3758 22.9716 12.2254 23.3505 11.9332 23.6498C11.452 24.1499 10.7124 24.335 9.68928 24.3578C7.7171 24.3972 6.2545 24.0901 3.92473 22.7133L1.77534 26.9845C4.17751 28.3492 6.89111 29.0711 9.65384 29.0804H10.0169C12.4585 29.0331 14.4307 28.3361 16.0067 27.0696L16.2619 26.8467L15.5657 28.7181H21.8863L22.948 25.4896C24.0585 25.8653 25.3234 26.0764 26.6624 26.0764C27.969 26.0764 29.2016 25.8795 30.2925 25.5204L31.3132 28.7181H41.6262V22.0312H43.8765C49.311 22.0312 52.5292 19.2651 52.5292 14.6229C52.5292 9.45618 49.4039 7.08625 42.7502 7.08625" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/unicredit-dark.svg b/public/images/landing-new/whouses/unicredit-dark.svg
new file mode 100644
index 0000000000..9026d2b8fa
--- /dev/null
+++ b/public/images/landing-new/whouses/unicredit-dark.svg
@@ -0,0 +1,31 @@
+<svg width="79" height="18" viewBox="0 0 79 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="72" y="0" width="7" height="18">
+<path d="M72.6172 17.0941H78.4091V0.0214844H72.6172V17.0941Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask0_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.4579 0.0214844C75.018 0.0214844 73.8438 1.30307 73.8438 2.8772V4.40907H72.6172V6.83536H73.8431V14.0411C73.8431 16.0098 74.9656 17.0941 77.0034 17.0941C77.7482 17.0941 78.2864 16.8565 78.4085 16.7962V14.2967C78.2125 14.3705 77.8918 14.4591 77.6784 14.4591C76.8598 14.4591 76.6102 14.2095 76.6102 13.3902V6.83469H78.4085V4.40907H76.6102V0.0214844H76.4572H76.4579Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6332 15.9554H62.4516C60.6654 15.9554 59.7971 14.5939 59.7971 11.7946C59.7971 9.77425 60.2903 7.36541 62.6401 7.36541C62.9756 7.36262 63.3099 7.4055 63.6338 7.49289V15.9554H63.6332ZM66.3191 0.789062C64.8269 0.789062 63.6124 2.08407 63.6124 3.67431V5.71209C63.1027 5.58059 62.578 5.51652 62.0517 5.52153C58.951 5.52153 56.9481 8.04511 56.9481 11.9503C56.9481 15.8252 58.8719 17.973 62.3664 17.9999C62.5026 17.9999 65.8582 18.0012 66.4614 17.9569V0.789062H66.3191ZM48.4648 10.6982C48.4729 8.44838 49.2566 7.33186 50.9166 7.27952C51.6997 7.25536 53.3953 7.36138 53.4885 9.98024L48.4648 10.6982ZM56.0832 11.2243C56.0832 7.41305 54.2689 5.31822 51.024 5.31822C47.7261 5.31822 45.7051 7.73176 45.7051 11.6235C45.7051 15.6165 47.873 17.9999 51.5044 17.9999C53.512 17.9999 54.9177 17.5134 55.6766 17.1008V14.5913C54.9238 15.1395 53.875 15.8172 51.7983 15.8172C49.9242 15.8172 48.8949 14.808 48.6447 12.7481L56.0832 11.7094V11.2243Z" fill="#191919"/>
+<mask id="mask1_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="39" y="4" width="7" height="14">
+<path d="M39.7002 17.9999H45.6867V4.6499H39.7002V17.9999Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask1_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.7002 5.66792V18H39.8552C41.4112 18 42.672 16.654 42.672 14.9993V7.14946C43.2893 6.81397 44.6467 6.56235 45.6867 7.33868V4.73727C42.7123 4.44404 41.1589 4.92783 39.7002 5.66725" fill="#191919"/>
+</g>
+<mask id="mask2_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="27" y="0" width="12" height="18">
+<path d="M38.6989 0H27.627V17.9999H38.6989V0Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask2_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.627 8.95298C27.627 13.4486 30.1257 17.9999 34.9018 17.9999C36.4887 17.9999 37.8407 17.6349 38.6996 16.9558V13.8767C38.0031 14.8791 36.8409 15.279 35.5661 15.279C32.6594 15.279 30.7061 11.9946 30.7061 8.92815C30.7061 5.87114 32.5647 2.57256 35.5654 2.57256C37.0859 2.57256 38.0387 3.22342 38.6989 4.14536V1.0407C37.6086 0.326771 36.3176 0 34.9273 0C30.1338 0 27.627 4.50366 27.627 8.95298Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0987 4.64992V17.9999H24.2705C25.9835 17.9999 27.3758 16.6559 27.3758 15.0039V4.65059H24.0987V4.64992ZM24.084 2.15788C24.084 2.90133 24.8596 3.50656 25.8138 3.50656C26.784 3.50656 27.5436 2.91408 27.5436 2.15788C27.5436 1.39027 26.784 0.789062 25.8138 0.789062C24.8596 0.789062 24.084 1.40302 24.084 2.15788Z" fill="#191919"/>
+<mask id="mask3_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="18">
+<path d="M0.733887 17.0941H11.8112V0.0214844H0.733887V17.0941Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask3_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6602 0.0214844C10.1485 0.0214844 8.91792 1.2608 8.91792 2.78394V12.2469C8.91792 13.7901 7.6115 14.6235 6.38226 14.6235C5.1255 14.6235 3.82512 13.7344 3.82512 12.2469V0.0214844H3.6245C2.03023 0.0214844 0.733887 1.3279 0.733887 2.93357V12.269C0.733887 15.0201 3.11522 17.0941 6.27288 17.0941C9.43055 17.0941 11.8112 15.0201 11.8112 12.269V0.0214844H11.6602Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.3913 4.6499V17.9999H68.5517C70.15 17.9999 71.4503 16.6559 71.4503 15.0039V4.65057H68.3906L68.3913 4.6499Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.1904 2.15788C68.1904 2.90133 68.9668 3.50656 69.9216 3.50656C70.8912 3.50656 71.65 2.91408 71.65 2.15788C71.65 1.39027 70.8912 0.789062 69.9209 0.789062C68.9668 0.789062 68.1904 1.40302 68.1904 2.15788Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8413 6.23761V18H15.7809V7.61314C16.264 7.42727 16.6968 7.32461 17.457 7.32461C19.0748 7.32461 19.4143 8.32774 19.4143 9.16915L19.4123 15.1698C19.4123 16.7292 20.6724 18 22.2083 18H22.3546V9.12554C22.3546 7.70305 21.7326 5.31836 17.5657 5.31836C15.699 5.31836 14.1048 5.63507 12.842 6.23761" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/unicredit-light.svg b/public/images/landing-new/whouses/unicredit-light.svg
new file mode 100644
index 0000000000..1fe99b1e18
--- /dev/null
+++ b/public/images/landing-new/whouses/unicredit-light.svg
@@ -0,0 +1,31 @@
+<svg width="79" height="18" viewBox="0 0 79 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="72" y="0" width="7" height="18">
+<path d="M72.6172 17.0941H78.4091V0.0214844H72.6172V17.0941Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M76.4579 0.0214844C75.018 0.0214844 73.8438 1.30307 73.8438 2.8772V4.40907H72.6172V6.83536H73.8431V14.0411C73.8431 16.0098 74.9656 17.0941 77.0034 17.0941C77.7482 17.0941 78.2864 16.8565 78.4085 16.7962V14.2967C78.2125 14.3705 77.8918 14.4591 77.6784 14.4591C76.8598 14.4591 76.6102 14.2095 76.6102 13.3902V6.83469H78.4085V4.40907H76.6102V0.0214844H76.4572H76.4579Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6332 15.9554H62.4516C60.6654 15.9554 59.7971 14.5939 59.7971 11.7946C59.7971 9.77425 60.2903 7.36541 62.6401 7.36541C62.9756 7.36262 63.3099 7.4055 63.6338 7.49289V15.9554H63.6332ZM66.3191 0.789062C64.8269 0.789062 63.6124 2.08407 63.6124 3.67431V5.71209C63.1027 5.58059 62.578 5.51652 62.0517 5.52153C58.951 5.52153 56.9481 8.04511 56.9481 11.9503C56.9481 15.8252 58.8719 17.973 62.3664 17.9999C62.5026 17.9999 65.8582 18.0012 66.4614 17.9569V0.789062H66.3191ZM48.4648 10.6982C48.4729 8.44838 49.2566 7.33186 50.9166 7.27952C51.6997 7.25536 53.3953 7.36138 53.4885 9.98024L48.4648 10.6982ZM56.0832 11.2243C56.0832 7.41305 54.2689 5.31822 51.024 5.31822C47.7261 5.31822 45.7051 7.73176 45.7051 11.6235C45.7051 15.6165 47.873 17.9999 51.5044 17.9999C53.512 17.9999 54.9177 17.5134 55.6766 17.1008V14.5913C54.9238 15.1395 53.875 15.8172 51.7983 15.8172C49.9242 15.8172 48.8949 14.808 48.6447 12.7481L56.0832 11.7094V11.2243Z" fill="white"/>
+<mask id="mask1_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="39" y="4" width="7" height="14">
+<path d="M39.7002 17.9999H45.6867V4.6499H39.7002V17.9999Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M39.7002 5.66792V18H39.8552C41.4112 18 42.672 16.654 42.672 14.9993V7.14946C43.2893 6.81397 44.6467 6.56235 45.6867 7.33868V4.73727C42.7123 4.44404 41.1589 4.92783 39.7002 5.66725" fill="white"/>
+</g>
+<mask id="mask2_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="27" y="0" width="12" height="18">
+<path d="M38.6989 0H27.627V17.9999H38.6989V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.627 8.95298C27.627 13.4486 30.1257 17.9999 34.9018 17.9999C36.4887 17.9999 37.8407 17.6349 38.6996 16.9558V13.8767C38.0031 14.8791 36.8409 15.279 35.5661 15.279C32.6594 15.279 30.7061 11.9946 30.7061 8.92815C30.7061 5.87114 32.5647 2.57256 35.5654 2.57256C37.0859 2.57256 38.0387 3.22342 38.6989 4.14536V1.0407C37.6086 0.326771 36.3176 0 34.9273 0C30.1338 0 27.627 4.50366 27.627 8.95298Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0987 4.64992V17.9999H24.2705C25.9835 17.9999 27.3758 16.6559 27.3758 15.0039V4.65059H24.0987V4.64992ZM24.084 2.15788C24.084 2.90133 24.8596 3.50656 25.8138 3.50656C26.784 3.50656 27.5436 2.91408 27.5436 2.15788C27.5436 1.39027 26.784 0.789062 25.8138 0.789062C24.8596 0.789062 24.084 1.40302 24.084 2.15788Z" fill="white"/>
+<mask id="mask3_1676_2249" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="12" height="18">
+<path d="M0.733887 17.0941H11.8112V0.0214844H0.733887V17.0941Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_1676_2249)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6602 0.0214844C10.1485 0.0214844 8.91792 1.2608 8.91792 2.78394V12.2469C8.91792 13.7901 7.6115 14.6235 6.38226 14.6235C5.1255 14.6235 3.82512 13.7344 3.82512 12.2469V0.0214844H3.6245C2.03023 0.0214844 0.733887 1.3279 0.733887 2.93357V12.269C0.733887 15.0201 3.11522 17.0941 6.27288 17.0941C9.43055 17.0941 11.8112 15.0201 11.8112 12.269V0.0214844H11.6602Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.3913 4.6499V17.9999H68.5517C70.15 17.9999 71.4503 16.6559 71.4503 15.0039V4.65057H68.3906L68.3913 4.6499Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M68.1904 2.15788C68.1904 2.90133 68.9668 3.50656 69.9216 3.50656C70.8912 3.50656 71.65 2.91408 71.65 2.15788C71.65 1.39027 70.8912 0.789062 69.9209 0.789062C68.9668 0.789062 68.1904 1.40302 68.1904 2.15788Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8413 6.23761V18H15.7809V7.61314C16.264 7.42727 16.6968 7.32461 17.457 7.32461C19.0748 7.32461 19.4143 8.32774 19.4143 9.16915L19.4123 15.1698C19.4123 16.7292 20.6724 18 22.2083 18H22.3546V9.12554C22.3546 7.70305 21.7326 5.31836 17.5657 5.31836C15.699 5.31836 14.1048 5.63507 12.842 6.23761" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/verizon-dark.svg b/public/images/landing-new/whouses/verizon-dark.svg
new file mode 100644
index 0000000000..4fca2cc3da
--- /dev/null
+++ b/public/images/landing-new/whouses/verizon-dark.svg
@@ -0,0 +1,19 @@
+<svg width="102" height="18" viewBox="0 0 102 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9033 8.49793H64.9613L65.3723 13.7699H66.4873L69.4243 6.99193H68.3673L66.1943 12.3259L65.8423 6.99193H64.6093L62.4953 12.3259L62.1413 6.99193H60.9683L61.6733 13.7699H62.7893L64.9033 8.49793ZM71.4223 5.79993L71.6553 4.48193H70.5983L70.3643 5.79993H71.4223ZM71.2433 6.99093H70.1873L69.0703 13.7689H70.1293L71.2433 6.99093Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.3581 9.81593C73.5341 8.81293 74.2981 7.99593 75.2961 7.99593H75.6501L75.8821 6.80593H75.5891C74.7681 6.80593 74.1221 7.30593 73.5951 8.12193L73.7701 6.99193H72.7701L71.5981 13.7679H72.7141L73.3591 9.81493L73.3581 9.81593ZM76.5281 9.81593C76.7071 8.87393 77.4681 7.99593 78.2911 7.86993V6.86793C76.5901 7.11793 75.5891 8.68793 75.2391 10.5699C74.9431 12.5129 75.7661 13.9569 77.5271 13.9569C77.8221 13.9569 78.1151 13.9569 78.2911 13.8959V12.8909C78.1731 12.9529 77.9971 12.9529 77.8221 12.9529C76.6461 12.9529 76.1181 12.1379 76.3531 10.7579H78.2921V9.81593H76.5281ZM78.2921 13.8959V12.8909C79.0571 12.7009 79.5851 12.0739 79.7021 11.6349H80.7581C80.7001 11.9499 80.2281 12.9529 79.3491 13.5179C79.1131 13.6439 78.8201 13.8309 78.2921 13.8959ZM78.2921 7.86993C78.4101 7.80793 78.5281 7.80793 78.6461 7.80793C79.9361 7.80793 80.1711 8.81293 80.0531 9.81593H78.2921V10.7579H80.9921C81.0511 10.3799 81.1101 10.0049 81.1101 9.69093V9.25093C81.0501 7.74593 80.3461 6.80493 78.9371 6.80493C78.7021 6.80493 78.5271 6.80493 78.2911 6.86793V7.86993H78.2921ZM85.5131 9.81593C85.6921 8.87393 86.4531 7.99593 87.3351 7.86993V6.86793C85.5731 7.11793 84.5731 8.68793 84.2801 10.5699C83.9291 12.5129 84.7511 13.9569 86.5701 13.9569C86.8631 13.9569 87.0991 13.9569 87.3351 13.8959V12.8909C87.1581 12.9529 87.0411 12.9529 86.8631 12.9529C85.6311 12.9529 85.1631 12.1379 85.3951 10.7579H87.3351V9.81593H85.5131ZM87.3351 13.8959V12.8909C88.0971 12.7009 88.6251 12.0739 88.7431 11.6349H89.8011C89.6831 11.9499 89.2721 12.9529 88.3331 13.5179C88.0971 13.6439 87.8041 13.8309 87.3351 13.8959ZM87.3351 7.86993C87.3921 7.80793 87.5111 7.80793 87.6281 7.80793C88.9181 7.80793 89.1551 8.81293 89.0361 9.81593H87.3351V10.7579H90.0351C90.0951 10.3799 90.0951 10.0049 90.1521 9.69093V9.25093C90.0941 7.74593 89.3901 6.80493 87.9221 6.80493C87.7461 6.80493 87.5111 6.80493 87.3351 6.86793V7.86993ZM84.1621 4.48193H83.1051L81.5791 13.7699H82.6371L84.1621 4.48193ZM95.9661 8.93693C96.0261 8.56093 96.1431 6.80493 93.9111 6.80493C92.6191 6.80493 91.3851 7.43093 91.0911 8.93693C90.9751 9.87893 91.4451 10.3809 92.3251 10.6309L93.4991 10.9449C94.3801 11.1949 94.6751 11.3849 94.6151 11.8869C94.4971 12.6389 93.7351 12.9529 92.9721 12.9529C91.4451 12.9529 91.4451 12.1369 91.5021 11.5729H90.4461C90.3871 12.3889 90.2701 13.9569 92.7961 13.9569C94.2641 13.9569 95.4961 13.1419 95.7311 11.6989C95.8481 10.8189 95.4971 10.2549 94.2041 9.94193L93.2071 9.62793C92.3851 9.43893 92.0921 9.31393 92.2071 8.74793C92.3251 7.86993 93.2651 7.74593 93.6181 7.74593C94.9681 7.74593 94.9681 8.49893 94.9081 8.93693H95.9661Z" fill="#191919"/>
+<mask id="mask0_1676_2292" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="96" y="6" width="6" height="8">
+<path d="M101.808 13.9562V6.80518H96.2764V13.9562H101.808Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask0_1676_2292)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M101.781 8.93615C101.838 8.56215 102.017 6.80615 99.7256 6.80615C98.4926 6.80615 97.1986 7.43215 96.9656 8.93815C96.7886 9.87915 97.3166 10.3822 98.1386 10.6312L99.3146 10.9462C100.195 11.1962 100.548 11.3862 100.43 11.8872C100.311 12.6392 99.5486 12.9542 98.7866 12.9542C97.3166 12.9542 97.3166 12.1382 97.3166 11.5742H96.3196C96.2026 12.3902 96.1426 13.9562 98.6686 13.9562C100.076 13.9562 101.31 13.1412 101.545 11.6992C101.663 10.8192 101.31 10.2552 100.076 9.94215L99.0216 9.62815C98.2576 9.43915 97.9036 9.31315 98.0216 8.74815C98.1386 7.86915 99.1376 7.74615 99.4336 7.74615C100.784 7.74615 100.841 8.49915 100.784 8.93815H101.781V8.93615Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9013 4.48193L31.4903 7.18093H35.7763L30.2573 14.9609L29.9043 17.3459H38.5383H58.5023L58.9133 15.4929L34.2493 14.5839L39.7703 6.80493L40.1813 4.48193H31.9013Z" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5534 13.7688H26.0874L27.6134 4.48181H31.0794L29.5534 13.7688ZM27.7924 3.28981L28.2594 0.653809H31.7244L31.2544 3.28981H27.7924Z" fill="#191919"/>
+<mask id="mask1_1676_2292" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="4" width="10" height="10">
+<path d="M0.192383 4.48193V13.7689H9.99938V4.48193H0.192383Z" fill="#191919"/>
+</mask>
+<g mask="url(#mask1_1676_2292)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65838 13.7689L0.192383 4.48193H3.65538L4.18538 10.3179L6.70938 4.48193H9.99938L5.53538 13.7689H1.65838Z" fill="#191919"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5766 13.769L51.1026 4.48198H54.2746L54.0406 5.98698C54.9806 4.85798 55.9776 4.22998 57.2696 4.22998C59.5596 4.22998 60.4416 5.67398 59.9696 8.18398L59.0896 13.769H55.6236L56.3886 8.81298C56.5626 7.93498 56.4486 7.11798 55.5076 7.11798C54.4506 7.11798 54.0406 7.80798 53.8046 8.99998L53.0406 13.77H49.5766V13.769ZM18.9826 13.769L20.5096 4.48198H23.6796L23.3296 6.30198H23.3866C24.0906 4.92198 25.0906 4.22998 26.3816 4.22998C26.4986 4.22998 26.6736 4.29298 26.7916 4.29298L26.2066 7.93498C25.9696 7.86898 25.7356 7.80798 25.5586 7.80798C24.1506 7.80798 23.3286 8.56098 22.9746 10.57L22.4466 13.77H18.9826V13.769ZM44.7616 6.74198C43.8806 6.99198 43.4696 8.12198 43.2946 8.99998C42.9996 10.757 43.5276 11.574 44.4096 11.574C44.5276 11.574 44.6456 11.511 44.7616 11.511V13.956C44.4666 14.019 44.1746 14.019 43.8216 14.019C41.0036 14.019 39.1236 12.389 39.6536 9.18898C40.1206 6.23898 42.1776 4.54498 44.7616 4.29298V6.74198ZM45.2316 6.67898C45.0566 6.67898 44.9386 6.67898 44.7616 6.74198V4.29298C44.9956 4.22998 45.2316 4.22998 45.4066 4.22998C48.5196 4.22998 50.1066 6.17598 49.6346 8.99998C49.1076 12.013 47.1686 13.644 44.7616 13.956V11.511C45.5246 11.322 46.0526 10.507 46.2886 8.99998C46.5216 7.61998 46.1106 6.61498 45.2316 6.67898ZM12.5226 8.05798H14.1086V9.94198H12.2286C12.0536 11.07 12.7006 11.761 13.6386 11.761C13.8156 11.761 13.9336 11.761 14.1086 11.699V13.957C13.7556 14.019 13.4046 14.019 13.0506 14.019C10.2336 14.019 8.35457 12.326 8.88157 9.18898C9.35157 6.36498 11.5256 4.48198 14.1086 4.29298V6.42698C13.2286 6.55198 12.7006 7.17998 12.5216 8.05798H12.5226ZM14.1086 13.957V11.699C14.4977 11.5603 14.8288 11.2947 15.0486 10.945H18.3956C17.5736 12.891 15.8116 13.705 14.1086 13.957ZM14.1086 8.05798H15.6946C15.8116 7.17998 15.2246 6.42798 14.4016 6.42798H14.1086V4.29198C14.2846 4.22998 14.4606 4.22998 14.6376 4.22998C17.8676 4.22998 19.4516 6.54998 18.8076 9.94098H14.1076V8.05798H14.1086Z" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/verizon-light.svg b/public/images/landing-new/whouses/verizon-light.svg
new file mode 100644
index 0000000000..060185084a
--- /dev/null
+++ b/public/images/landing-new/whouses/verizon-light.svg
@@ -0,0 +1,19 @@
+<svg width="102" height="18" viewBox="0 0 102 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9033 8.49793H64.9613L65.3723 13.7699H66.4873L69.4243 6.99193H68.3673L66.1943 12.3259L65.8423 6.99193H64.6093L62.4953 12.3259L62.1413 6.99193H60.9683L61.6733 13.7699H62.7893L64.9033 8.49793ZM71.4223 5.79993L71.6553 4.48193H70.5983L70.3643 5.79993H71.4223ZM71.2433 6.99093H70.1873L69.0703 13.7689H70.1293L71.2433 6.99093Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M73.3581 9.81593C73.5341 8.81293 74.2981 7.99593 75.2961 7.99593H75.6501L75.8821 6.80593H75.5891C74.7681 6.80593 74.1221 7.30593 73.5951 8.12193L73.7701 6.99193H72.7701L71.5981 13.7679H72.7141L73.3591 9.81493L73.3581 9.81593ZM76.5281 9.81593C76.7071 8.87393 77.4681 7.99593 78.2911 7.86993V6.86793C76.5901 7.11793 75.5891 8.68793 75.2391 10.5699C74.9431 12.5129 75.7661 13.9569 77.5271 13.9569C77.8221 13.9569 78.1151 13.9569 78.2911 13.8959V12.8909C78.1731 12.9529 77.9971 12.9529 77.8221 12.9529C76.6461 12.9529 76.1181 12.1379 76.3531 10.7579H78.2921V9.81593H76.5281ZM78.2921 13.8959V12.8909C79.0571 12.7009 79.5851 12.0739 79.7021 11.6349H80.7581C80.7001 11.9499 80.2281 12.9529 79.3491 13.5179C79.1131 13.6439 78.8201 13.8309 78.2921 13.8959ZM78.2921 7.86993C78.4101 7.80793 78.5281 7.80793 78.6461 7.80793C79.9361 7.80793 80.1711 8.81293 80.0531 9.81593H78.2921V10.7579H80.9921C81.0511 10.3799 81.1101 10.0049 81.1101 9.69093V9.25093C81.0501 7.74593 80.3461 6.80493 78.9371 6.80493C78.7021 6.80493 78.5271 6.80493 78.2911 6.86793V7.86993H78.2921ZM85.5131 9.81593C85.6921 8.87393 86.4531 7.99593 87.3351 7.86993V6.86793C85.5731 7.11793 84.5731 8.68793 84.2801 10.5699C83.9291 12.5129 84.7511 13.9569 86.5701 13.9569C86.8631 13.9569 87.0991 13.9569 87.3351 13.8959V12.8909C87.1581 12.9529 87.0411 12.9529 86.8631 12.9529C85.6311 12.9529 85.1631 12.1379 85.3951 10.7579H87.3351V9.81593H85.5131ZM87.3351 13.8959V12.8909C88.0971 12.7009 88.6251 12.0739 88.7431 11.6349H89.8011C89.6831 11.9499 89.2721 12.9529 88.3331 13.5179C88.0971 13.6439 87.8041 13.8309 87.3351 13.8959ZM87.3351 7.86993C87.3921 7.80793 87.5111 7.80793 87.6281 7.80793C88.9181 7.80793 89.1551 8.81293 89.0361 9.81593H87.3351V10.7579H90.0351C90.0951 10.3799 90.0951 10.0049 90.1521 9.69093V9.25093C90.0941 7.74593 89.3901 6.80493 87.9221 6.80493C87.7461 6.80493 87.5111 6.80493 87.3351 6.86793V7.86993ZM84.1621 4.48193H83.1051L81.5791 13.7699H82.6371L84.1621 4.48193ZM95.9661 8.93693C96.0261 8.56093 96.1431 6.80493 93.9111 6.80493C92.6191 6.80493 91.3851 7.43093 91.0911 8.93693C90.9751 9.87893 91.4451 10.3809 92.3251 10.6309L93.4991 10.9449C94.3801 11.1949 94.6751 11.3849 94.6151 11.8869C94.4971 12.6389 93.7351 12.9529 92.9721 12.9529C91.4451 12.9529 91.4451 12.1369 91.5021 11.5729H90.4461C90.3871 12.3889 90.2701 13.9569 92.7961 13.9569C94.2641 13.9569 95.4961 13.1419 95.7311 11.6989C95.8481 10.8189 95.4971 10.2549 94.2041 9.94193L93.2071 9.62793C92.3851 9.43893 92.0921 9.31393 92.2071 8.74793C92.3251 7.86993 93.2651 7.74593 93.6181 7.74593C94.9681 7.74593 94.9681 8.49893 94.9081 8.93693H95.9661Z" fill="white"/>
+<mask id="mask0_1676_2292" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="96" y="6" width="6" height="8">
+<path d="M101.808 13.9562V6.80518H96.2764V13.9562H101.808Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1676_2292)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M101.781 8.93615C101.838 8.56215 102.017 6.80615 99.7256 6.80615C98.4926 6.80615 97.1986 7.43215 96.9656 8.93815C96.7886 9.87915 97.3166 10.3822 98.1386 10.6312L99.3146 10.9462C100.195 11.1962 100.548 11.3862 100.43 11.8872C100.311 12.6392 99.5486 12.9542 98.7866 12.9542C97.3166 12.9542 97.3166 12.1382 97.3166 11.5742H96.3196C96.2026 12.3902 96.1426 13.9562 98.6686 13.9562C100.076 13.9562 101.31 13.1412 101.545 11.6992C101.663 10.8192 101.31 10.2552 100.076 9.94215L99.0216 9.62815C98.2576 9.43915 97.9036 9.31315 98.0216 8.74815C98.1386 7.86915 99.1376 7.74615 99.4336 7.74615C100.784 7.74615 100.841 8.49915 100.784 8.93815H101.781V8.93615Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9013 4.48193L31.4903 7.18093H35.7763L30.2573 14.9609L29.9043 17.3459H38.5383H58.5023L58.9133 15.4929L34.2493 14.5839L39.7703 6.80493L40.1813 4.48193H31.9013Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.5534 13.7688H26.0874L27.6134 4.48181H31.0794L29.5534 13.7688ZM27.7924 3.28981L28.2594 0.653809H31.7244L31.2544 3.28981H27.7924Z" fill="white"/>
+<mask id="mask1_1676_2292" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="4" width="10" height="10">
+<path d="M0.192383 4.48193V13.7689H9.99938V4.48193H0.192383Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_1676_2292)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.65838 13.7689L0.192383 4.48193H3.65538L4.18538 10.3179L6.70938 4.48193H9.99938L5.53538 13.7689H1.65838Z" fill="white"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5766 13.769L51.1026 4.48198H54.2746L54.0406 5.98698C54.9806 4.85798 55.9776 4.22998 57.2696 4.22998C59.5596 4.22998 60.4416 5.67398 59.9696 8.18398L59.0896 13.769H55.6236L56.3886 8.81298C56.5626 7.93498 56.4486 7.11798 55.5076 7.11798C54.4506 7.11798 54.0406 7.80798 53.8046 8.99998L53.0406 13.77H49.5766V13.769ZM18.9826 13.769L20.5096 4.48198H23.6796L23.3296 6.30198H23.3866C24.0906 4.92198 25.0906 4.22998 26.3816 4.22998C26.4986 4.22998 26.6736 4.29298 26.7916 4.29298L26.2066 7.93498C25.9696 7.86898 25.7356 7.80798 25.5586 7.80798C24.1506 7.80798 23.3286 8.56098 22.9746 10.57L22.4466 13.77H18.9826V13.769ZM44.7616 6.74198C43.8806 6.99198 43.4696 8.12198 43.2946 8.99998C42.9996 10.757 43.5276 11.574 44.4096 11.574C44.5276 11.574 44.6456 11.511 44.7616 11.511V13.956C44.4666 14.019 44.1746 14.019 43.8216 14.019C41.0036 14.019 39.1236 12.389 39.6536 9.18898C40.1206 6.23898 42.1776 4.54498 44.7616 4.29298V6.74198ZM45.2316 6.67898C45.0566 6.67898 44.9386 6.67898 44.7616 6.74198V4.29298C44.9956 4.22998 45.2316 4.22998 45.4066 4.22998C48.5196 4.22998 50.1066 6.17598 49.6346 8.99998C49.1076 12.013 47.1686 13.644 44.7616 13.956V11.511C45.5246 11.322 46.0526 10.507 46.2886 8.99998C46.5216 7.61998 46.1106 6.61498 45.2316 6.67898ZM12.5226 8.05798H14.1086V9.94198H12.2286C12.0536 11.07 12.7006 11.761 13.6386 11.761C13.8156 11.761 13.9336 11.761 14.1086 11.699V13.957C13.7556 14.019 13.4046 14.019 13.0506 14.019C10.2336 14.019 8.35457 12.326 8.88157 9.18898C9.35157 6.36498 11.5256 4.48198 14.1086 4.29298V6.42698C13.2286 6.55198 12.7006 7.17998 12.5216 8.05798H12.5226ZM14.1086 13.957V11.699C14.4977 11.5603 14.8288 11.2947 15.0486 10.945H18.3956C17.5736 12.891 15.8116 13.705 14.1086 13.957ZM14.1086 8.05798H15.6946C15.8116 7.17998 15.2246 6.42798 14.4016 6.42798H14.1086V4.29198C14.2846 4.22998 14.4606 4.22998 14.6376 4.22998C17.8676 4.22998 19.4516 6.54998 18.8076 9.94098H14.1076V8.05798H14.1086Z" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/viacom-dark.svg b/public/images/landing-new/whouses/viacom-dark.svg
new file mode 100644
index 0000000000..55cce16998
--- /dev/null
+++ b/public/images/landing-new/whouses/viacom-dark.svg
@@ -0,0 +1,3 @@
+<svg width="87" height="14" viewBox="0 0 87 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7944 0.637488V11.8387C16.7944 12.7127 17.3181 13.3461 18.4704 13.3461H20.2872V0.637488H16.7944ZM77.1541 9.74935C77.1541 9.74935 74.9519 3.56648 74.5328 2.40192C74.2718 1.61382 73.888 0.637488 72.0883 0.637488H67.9833V13.3461H69.3639C70.4278 13.3461 71.0916 12.8838 71.0916 11.8043V2.93305H71.1447L75.145 13.3453H78.8817L82.8812 2.93141H82.9344V11.8215C82.9344 12.7127 83.4238 13.3461 84.662 13.3461H86.392V0.637488H82.5317C81.1699 0.637488 80.3319 1.01394 79.9129 2.19651L77.2237 9.74935H77.1541ZM7.92227 9.86884C7.92227 9.86884 4.91799 2.16213 4.74286 1.71693C4.51617 1.11706 4.20191 0.637488 3.04881 0.637488H0.464355L5.79202 13.3461H9.6687L15.187 0.637488H12.8997C11.9217 0.637488 11.5371 1.04832 11.2924 1.66538L7.97465 9.86884H7.92227ZM46.1342 3.30951H47.9158C49.1916 3.30951 49.9429 2.84712 49.9429 1.71693V0.637488H44.8771C40.6518 0.637488 38.6247 3.08691 38.6247 6.99223C38.6247 11.8559 41.7157 13.3461 44.8771 13.3461H49.9429V12.2495C49.9429 11.1365 49.1565 10.6741 48.0034 10.6741H46.1342C44.1275 10.6741 42.2583 9.97195 42.2583 6.99141C42.2583 4.40532 43.6741 3.30869 46.1342 3.30869V3.30951ZM32.5638 8.5848C32.5638 9.85165 31.9704 10.8452 30.224 10.8452H28.408C27.133 10.8452 26.3833 10.5031 26.3833 9.49238C26.3833 8.51605 27.0814 8.12241 28.408 8.12241H32.5638V8.5848ZM30.8713 0.637488H23.7269V1.61382C23.7269 2.46985 24.1803 3.30951 25.4209 3.30951H29.9793C31.9009 3.30951 32.5638 3.92575 32.5638 5.41602V5.63862H27.7451C24.1459 5.63862 22.8365 7.26556 22.8365 9.4752C22.8365 12.1644 24.6721 13.3461 27.7451 13.3461H30.9573C35.167 13.3461 36.0746 11.274 36.0746 8.55043V5.39965C36.0746 2.45348 34.9575 0.637488 30.8713 0.637488ZM58.1169 10.8116C60.3871 10.8116 61.7137 9.26978 61.7137 6.99223C61.7137 4.57718 60.2979 3.17202 58.1169 3.17202C55.7935 3.17202 54.4833 4.69666 54.4833 6.99223C54.4833 9.18385 55.7592 10.8116 58.1169 10.8116ZM58.1169 0.5C62.3586 0.5 65.3809 2.76119 65.3809 6.99223C65.3809 11.0342 62.5869 13.5 58.1169 13.5C53.75 13.5 50.8333 11.1365 50.8333 6.99223C50.8333 2.89868 53.714 0.500818 58.1169 0.500818V0.5Z" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/viacom-light.svg b/public/images/landing-new/whouses/viacom-light.svg
new file mode 100644
index 0000000000..0e5d84c4f2
--- /dev/null
+++ b/public/images/landing-new/whouses/viacom-light.svg
@@ -0,0 +1,3 @@
+<svg width="87" height="14" viewBox="0 0 87 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.7944 0.637488V11.8387C16.7944 12.7127 17.3181 13.3461 18.4704 13.3461H20.2872V0.637488H16.7944ZM77.1541 9.74935C77.1541 9.74935 74.9519 3.56648 74.5328 2.40192C74.2718 1.61382 73.888 0.637488 72.0883 0.637488H67.9833V13.3461H69.3639C70.4278 13.3461 71.0916 12.8838 71.0916 11.8043V2.93305H71.1447L75.145 13.3453H78.8817L82.8812 2.93141H82.9344V11.8215C82.9344 12.7127 83.4238 13.3461 84.662 13.3461H86.392V0.637488H82.5317C81.1699 0.637488 80.3319 1.01394 79.9129 2.19651L77.2237 9.74935H77.1541ZM7.92227 9.86884C7.92227 9.86884 4.91799 2.16213 4.74286 1.71693C4.51617 1.11706 4.20191 0.637488 3.04881 0.637488H0.464355L5.79202 13.3461H9.6687L15.187 0.637488H12.8997C11.9217 0.637488 11.5371 1.04832 11.2924 1.66538L7.97465 9.86884H7.92227ZM46.1342 3.30951H47.9158C49.1916 3.30951 49.9429 2.84712 49.9429 1.71693V0.637488H44.8771C40.6518 0.637488 38.6247 3.08691 38.6247 6.99223C38.6247 11.8559 41.7157 13.3461 44.8771 13.3461H49.9429V12.2495C49.9429 11.1365 49.1565 10.6741 48.0034 10.6741H46.1342C44.1275 10.6741 42.2583 9.97195 42.2583 6.99141C42.2583 4.40532 43.6741 3.30869 46.1342 3.30869V3.30951ZM32.5638 8.5848C32.5638 9.85165 31.9704 10.8452 30.224 10.8452H28.408C27.133 10.8452 26.3833 10.5031 26.3833 9.49238C26.3833 8.51605 27.0814 8.12241 28.408 8.12241H32.5638V8.5848ZM30.8713 0.637488H23.7269V1.61382C23.7269 2.46985 24.1803 3.30951 25.4209 3.30951H29.9793C31.9009 3.30951 32.5638 3.92575 32.5638 5.41602V5.63862H27.7451C24.1459 5.63862 22.8365 7.26556 22.8365 9.4752C22.8365 12.1644 24.6721 13.3461 27.7451 13.3461H30.9573C35.167 13.3461 36.0746 11.274 36.0746 8.55043V5.39965C36.0746 2.45348 34.9575 0.637488 30.8713 0.637488ZM58.1169 10.8116C60.3871 10.8116 61.7137 9.26978 61.7137 6.99223C61.7137 4.57718 60.2979 3.17202 58.1169 3.17202C55.7935 3.17202 54.4833 4.69666 54.4833 6.99223C54.4833 9.18385 55.7592 10.8116 58.1169 10.8116ZM58.1169 0.5C62.3586 0.5 65.3809 2.76119 65.3809 6.99223C65.3809 11.0342 62.5869 13.5 58.1169 13.5C53.75 13.5 50.8333 11.1365 50.8333 6.99223C50.8333 2.89868 53.714 0.500818 58.1169 0.500818V0.5Z" fill="white"/>
+</svg>
diff --git a/public/images/landing-new/whouses/vw-dark.svg b/public/images/landing-new/whouses/vw-dark.svg
new file mode 100644
index 0000000000..263060cd64
--- /dev/null
+++ b/public/images/landing-new/whouses/vw-dark.svg
@@ -0,0 +1,6 @@
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.502 4.68312C19.4551 4.4036 18.3762 4.26194 17.2926 4.26172C16.2067 4.26172 15.1553 4.40709 14.1533 4.66841L17.335 13.5801L20.502 4.68312ZM29.8333 17.0092C29.8333 15.4197 29.5651 13.9011 29.0416 12.4959L23.0736 28.303C25.1182 27.2098 26.8272 25.5814 28.0179 23.592C29.2085 21.6025 29.836 19.3269 29.8333 17.0084" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.6056 5.99188L19.9255 16.2681H14.7459L11.0528 5.94775C9.69036 6.74519 8.48796 7.78885 7.50684 9.0256L12.7522 22.8296L14.6732 17.7876H19.7109L21.6319 22.8296L26.9275 8.86206C25.9961 7.7186 24.8715 6.74719 23.6048 5.99188" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2935 31.8264C9.25062 31.8264 2.67785 25.1697 2.67785 17.0082C2.67785 8.83033 9.25062 2.1615 17.2927 2.1615C25.3356 2.1615 31.9092 8.83033 31.9092 17.0082C31.9092 25.1697 25.3356 31.8264 17.2935 31.8264ZM17.2935 0.000865309C8.07382 1.46064e-08 0.537109 7.63276 0.537109 17.0091C0.537109 26.3551 8.07382 34 17.2935 34C26.5219 34 34.0344 26.3551 34.0344 17.0091C34.0344 7.63362 26.5219 0 17.2935 0" fill="#191919"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1837 20.4908L13.9467 29.0149L13.9319 29.2796C15.0032 29.5851 16.1281 29.7382 17.2936 29.7382C18.3882 29.7382 19.4499 29.5989 20.4597 29.3341L20.4234 29.0149L17.1837 20.4917V20.4908ZM4.74079 17.0089C4.74079 21.8 7.37388 26.0062 11.2694 28.1643L5.45293 12.7759C4.97679 14.1359 4.73596 15.5671 4.74079 17.008" fill="#191919"/>
+</svg>
diff --git a/public/images/landing-new/whouses/vw-light.svg b/public/images/landing-new/whouses/vw-light.svg
new file mode 100644
index 0000000000..4e6eb80a6a
--- /dev/null
+++ b/public/images/landing-new/whouses/vw-light.svg
@@ -0,0 +1,6 @@
+<svg width="35" height="34" viewBox="0 0 35 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.502 4.68312C19.4551 4.4036 18.3762 4.26194 17.2926 4.26172C16.2067 4.26172 15.1553 4.40709 14.1533 4.66841L17.335 13.5801L20.502 4.68312ZM29.8333 17.0092C29.8333 15.4197 29.5651 13.9011 29.0416 12.4959L23.0736 28.303C25.1182 27.2098 26.8272 25.5814 28.0179 23.592C29.2085 21.6025 29.836 19.3269 29.8333 17.0084" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.6056 5.99188L19.9255 16.2681H14.7459L11.0528 5.94775C9.69036 6.74519 8.48796 7.78885 7.50684 9.0256L12.7522 22.8296L14.6732 17.7876H19.7109L21.6319 22.8296L26.9275 8.86206C25.9961 7.7186 24.8715 6.74719 23.6048 5.99188" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2935 31.8264C9.25062 31.8264 2.67785 25.1697 2.67785 17.0082C2.67785 8.83033 9.25062 2.1615 17.2927 2.1615C25.3356 2.1615 31.9092 8.83033 31.9092 17.0082C31.9092 25.1697 25.3356 31.8264 17.2935 31.8264ZM17.2935 0.000865309C8.07382 1.46064e-08 0.537109 7.63276 0.537109 17.0091C0.537109 26.3551 8.07382 34 17.2935 34C26.5219 34 34.0344 26.3551 34.0344 17.0091C34.0344 7.63362 26.5219 0 17.2935 0" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1837 20.4908L13.9467 29.0149L13.9319 29.2796C15.0032 29.5851 16.1281 29.7382 17.2936 29.7382C18.3882 29.7382 19.4499 29.5989 20.4597 29.3341L20.4234 29.0149L17.1837 20.4917V20.4908ZM4.74079 17.0089C4.74079 21.8 7.37388 26.0062 11.2694 28.1643L5.45293 12.7759C4.97679 14.1359 4.73596 15.5671 4.74079 17.008" fill="white"/>
+</svg>
diff --git a/public/images/landing/airbus.svg b/public/images/landing/airbus.svg
new file mode 100644
index 0000000000..dc0f2f480c
--- /dev/null
+++ b/public/images/landing/airbus.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="109" height="19" viewBox="0 0 109 19">
+    <defs>
+        <path id="prefix__a" d="M0 0.332L0 9.806 17.832 9.806 17.832 0.332 0 0.332z"/>
+        <path id="prefix__c" d="M0 0.332L0 8.146 14.598 8.146 14.598 0.332 0 0.332z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#ffffff" d="M17.647 9.376C17.555 4.688 13.951.88 9.517.88 5.08.879 1.57 4.786 1.57 9.474H0C0 4.297 3.88.097 8.777 0c4.897 0 8.963 4.2 8.963 9.376h-.093z"/>
+        <path fill="#ffffff" d="M17.892 9.04c0-3.81-2.864-6.837-6.467-6.837-3.604 0-6.19 3.028-6.19 6.837H3.478c0-4.298 3.326-7.717 7.391-7.814 3.973 0 7.207 3.906 7.3 7.716l-.278.098z"/>
+        <path fill="#ffffff" d="M17.557 9.023c0-2.735-2.218-4.982-4.897-4.982-2.679 0-4.62 2.247-4.62 5.08H6.378c0-3.322 2.402-6.056 5.543-6.056 3.142 0 5.636 2.734 5.729 5.958h-.093z"/>
+        <g transform="translate(0 9.194)">
+            <mask id="prefix__b" fill="#fff">
+                <use xlink:href="#prefix__a"/>
+            </mask>
+            <path fill="#ffffff" d="M.185.43c0 4.688 3.603 8.497 8.038 8.497 4.527 0 8.039-3.906 8.039-8.595h1.57c0 5.177-3.973 9.474-8.87 9.474C4.065 9.806.092 5.606 0 .43h.185z" mask="url(#prefix__b)"/>
+        </g>
+        <g transform="translate(0 9.194)">
+            <mask id="prefix__d" fill="#fff">
+                <use xlink:href="#prefix__c"/>
+            </mask>
+            <path fill="#ffffff" d="M.185.332c0 3.81 2.864 6.837 6.467 6.837 3.604 0 6.283-3.028 6.19-6.837h1.756c0 4.298-3.326 7.814-7.299 7.814C3.234 8.146 0 4.24 0 .43L.186.332z" mask="url(#prefix__d)"/>
+        </g>
+        <path fill="#ffffff" d="M0 9.292c.092 2.734 2.31 4.98 4.897 4.98 2.68 0 4.62-2.246 4.62-5.078h1.662c0 3.32-2.402 6.056-5.543 6.056S0 12.612 0 9.292M26.652 16.365l.831-1.953h4.62l.277 1.953H37l-2.587-15.14H29.7l-7.67 15.14h4.62zm5.174-5.079h-2.957l2.402-5.47.555 5.47zM38.846 16.365L41.341 1.226 46.053 1.226 43.558 16.365zM50.91 16.365l.832-5.274h1.848c.554 0 1.016.098 1.293.195.277.196.462.391.555.684.092.293.092.683 0 1.172l-.093 1.172c-.185.977-.185 1.66-.185 2.051h4.805v-.488c-.092 0-.277 0-.277-.098-.092-.097-.092-.293 0-.684l.37-2.344c.092-1.074.092-1.855-.185-2.246-.277-.488-.832-.88-1.664-1.27.463-.097.832-.293 1.202-.488.462-.39.831-.782 1.108-1.27.37-.586.555-1.172.74-1.954.092-.585.092-1.074 0-1.464a3.351 3.351 0 00-.463-1.172 4.51 4.51 0 00-.923-.977c-.462-.196-.924-.391-1.57-.489a16.397 16.397 0 00-2.496-.195h-6.93l-2.494 15.14h4.528zm1.848-11.427h2.31c.74 0 1.202.097 1.479.39.184.195.277.587.184.977-.092.488-.277.879-.646 1.074-.278.293-.832.39-1.571.39h-2.218l.462-2.831zM70.1 10.016c.925 0 1.48.196 1.757.391.277.292.369.586.277 1.074-.093.39-.277.781-.647 1.074-.37.196-.924.391-1.848.391h-1.94l.462-2.93h1.94zm-.276 6.349c1.108 0 1.848-.098 2.31-.195a8.75 8.75 0 001.478-.489c.554-.293.924-.488 1.201-.781.462-.293.74-.782 1.016-1.27a4.53 4.53 0 00.647-1.758c.092-.879 0-1.66-.277-2.247-.37-.683-.831-1.074-1.57-1.27 1.385-.878 2.217-1.953 2.402-3.223.277-1.367-.093-2.343-1.109-3.027-.74-.586-1.94-.88-3.788-.88h-7.022l-2.495 15.14h7.207zm.739-11.721c.646 0 1.109.098 1.294.098a.962.962 0 01.554.488c.185.195.185.488.185.781-.093.391-.277.684-.647.977-.277.196-.832.39-1.57.39h-1.757l.463-2.734h1.478zM80.55 1.226h4.62l-1.57 9.376c-.093.586-.093 1.074 0 1.367.092.293.277.587.646.782.37.195.74.293 1.201.293.647 0 1.294-.196 1.663-.586.462-.39.74-1.075.924-1.856l1.57-9.376h4.62l-1.478 8.888c-.184 1.074-.37 1.953-.646 2.637a6.443 6.443 0 01-1.109 1.66c-.462.489-1.016.977-1.57 1.27a7.616 7.616 0 01-2.033.879c-.832.098-1.664.196-2.495.196-1.016 0-1.848-.098-2.587-.196-.74-.195-1.294-.488-1.756-.879-.554-.39-.923-.781-1.201-1.27-.277-.488-.462-1.172-.462-1.953-.092-.489 0-1.368.185-2.442l1.478-8.79zM108.76 6.012h-4.528c0-.391-.185-.781-.37-.977-.277-.195-.647-.293-1.2-.293-.555 0-1.017.098-1.294.293-.277.196-.37.391-.462.684 0 .293 0 .39.185.586.184.195.647.39 1.478.586l1.756.488c1.57.489 2.679 1.075 3.233 1.856.555.782.74 1.66.555 2.735-.185.879-.462 1.563-.924 2.246-.462.684-1.017 1.27-1.57 1.66-.555.392-1.294.685-2.126.978-.832.195-1.755.293-2.68.293-.923 0-1.847-.098-2.679-.391-.831-.293-1.478-.684-1.94-1.172-.462-.489-.832-1.075-1.017-1.758-.092-.489-.092-1.075-.092-1.759h4.528c0 .489.184.88.461 1.075.278.293.832.39 1.57.39.648 0 1.11-.097 1.387-.293.277-.195.37-.39.462-.683 0-.293 0-.586-.185-.782-.185-.195-.647-.39-1.478-.585l-1.57-.39c-.74-.196-1.572-.49-2.219-.88-.646-.39-1.2-.88-1.477-1.563-.278-.586-.278-1.27-.185-2.149.185-.878.462-1.562.924-2.246a5.163 5.163 0 011.663-1.563c.554-.488 1.293-.684 2.032-.879a8.64 8.64 0 012.217-.293c.925 0 1.664.098 2.403.293.74.195 1.2.488 1.663.781.37.294.647.684.832 1.075.276.39.37.781.461 1.172.093.39.185.879.185 1.465"/>
+    </g>
+</svg>
diff --git a/public/showcase/resources/images/home/amex.svg b/public/images/landing/amex.svg
similarity index 99%
rename from public/showcase/resources/images/home/amex.svg
rename to public/images/landing/amex.svg
index 775574751a..8b9f4a7107 100644
--- a/public/showcase/resources/images/home/amex.svg
+++ b/public/images/landing/amex.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="112" height="42" viewBox="0 0 112 42">
-    <g fill="#FFF" fill-rule="nonzero">
+    <g fill="#ffffff">
         <path d="M10.21 10.44L8.032 5.012 5.865 10.44h4.346zM58.217 8.28c-.438.271-.955.28-1.575.28h-3.868V5.536h3.92c.556 0 1.134.026 1.51.246.414.198.67.62.67 1.204 0 .595-.244 1.073-.657 1.294zm27.592 2.161l-2.204-5.428-2.19 5.428h4.394zm-51.433 5.876h-3.264L31.1 5.652l-4.616 10.664h-2.796L19.06 5.642v10.674h-6.476l-1.223-3.037H4.731l-1.236 3.037H.037L5.74 2.7h4.73l5.415 12.891V2.7h5.196l4.167 9.237L29.074 2.7h5.3v13.616h.001zm13.009 0H36.748V2.7h10.636v2.835h-7.452V7.99h7.273v2.792h-7.273V13.5h7.452v2.816zm14.995-9.95c0 2.172-1.417 3.293-2.243 3.63.697.271 1.292.75 1.575 1.147.45.677.527 1.282.527 2.498v2.675h-3.211l-.012-1.717c0-.82.076-1.998-.503-2.653-.465-.479-1.174-.583-2.32-.583h-3.418v4.953H49.59V2.7h7.323c1.627 0 2.826.044 3.855.652 1.008.608 1.611 1.496 1.611 3.015zm5.095 9.95h-3.248V2.7h3.248v13.616zm37.688 0h-4.512l-6.034-10.22v10.22h-6.484l-1.24-3.037H80.28l-1.202 3.037h-3.725c-1.548 0-3.507-.35-4.617-1.506-1.119-1.156-1.701-2.722-1.701-5.198 0-2.02.348-3.866 1.716-5.324C71.78 3.2 73.391 2.7 75.585 2.7h3.083v2.917H75.65c-1.162 0-1.818.177-2.45.807-.543.573-.915 1.657-.915 3.084 0 1.459.284 2.51.875 3.198.49.539 1.381.702 2.22.702h1.43L81.295 2.7h4.77l5.391 12.879V2.7h4.848l5.596 9.483V2.7h3.261v13.616zM0 18.99h5.44l1.227-3.024h2.746l1.223 3.024h10.703v-2.312L22.294 19h5.557l.955-2.357v2.347h26.6l-.013-4.964h.515c.36.012.465.047.465.655v4.31H70.13v-1.157c1.11.608 2.836 1.156 5.107 1.156h5.788l1.238-3.024h2.746l1.212 3.024h11.153v-2.873l1.689 2.873H108V0h-8.845v2.243L97.916 0H88.84v2.243L87.703 0h-12.26c-2.052 0-3.855.293-5.313 1.109V0h-8.46v1.109C60.743.268 59.48 0 58.075 0H27.167l-2.074 4.905L22.963 0h-9.735v2.243L12.158 0H3.856L0 9.029v9.961zM112 28.604h-5.755c-.574 0-.956.022-1.278.246-.333.22-.461.547-.461.979 0 .513.281.863.69 1.014.334.119.691.154 1.217.154l1.712.047c1.727.044 2.88.35 3.582 1.095.128.104.205.22.293.337v-3.872zm0 8.973c-.767 1.155-2.262 1.74-4.285 1.74h-6.098V36.4h6.073c.603 0 1.024-.082 1.278-.337.22-.21.374-.516.374-.888 0-.396-.154-.71-.386-.9-.23-.207-.563-.302-1.113-.302-2.964-.103-6.663.095-6.663-4.212 0-1.974 1.217-4.052 4.53-4.052H112V23h-5.844c-1.764 0-3.045.435-3.952 1.111V23h-8.643c-1.382 0-3.005.353-3.772 1.111V23H74.354v1.111C73.125 23.2 71.053 23 70.096 23H59.915v1.111c-.972-.969-3.133-1.111-4.45-1.111H44.07l-2.607 2.907L39.02 23H22v18.99h16.7l2.687-2.952 2.531 2.953L54.212 42v-4.467h1.012c1.366.021 2.977-.035 4.398-.668v5.125h8.491v-4.95h.41c.523 0 .574.023.574.56v4.39h25.794c1.637 0 3.35-.432 4.297-1.215v1.215h8.182c1.702 0 3.365-.246 4.63-.876v-3.537zm-12.595-5.438c.615.656.944 1.483.944 2.884 0 2.928-1.776 4.295-4.96 4.295h-6.15v-2.919h6.125c.599 0 1.024-.082 1.29-.337.217-.21.373-.516.373-.888 0-.396-.169-.71-.385-.9-.242-.207-.575-.302-1.125-.302-2.953-.103-6.65.095-6.65-4.212 0-1.974 1.203-4.052 4.514-4.052h6.33v2.897h-5.792c-.575 0-.948.022-1.266.245-.345.22-.474.548-.474.98 0 .513.294.862.691 1.013.333.12.691.155 1.23.155l1.699.047c1.714.043 2.89.348 3.606 1.094zm-28.492-.84c-.423.258-.945.28-1.56.28h-3.835v-3.057h3.888c.562 0 1.125.013 1.507.246.409.22.654.642.654 1.225 0 .582-.245 1.051-.654 1.306zm1.907 1.694c.703.267 1.277.746 1.546 1.142.446.665.51 1.285.524 2.485v2.698h-3.17v-1.703c0-.819.076-2.031-.51-2.664-.462-.488-1.165-.604-2.317-.604h-3.375v4.97h-3.173v-13.61h7.29c1.599 0 2.763.073 3.8.643.996.62 1.623 1.47 1.623 3.022 0 2.172-1.407 3.28-2.238 3.62zm3.989-7.286h10.538v2.815h-7.394v2.474h7.214v2.777h-7.214v2.708l7.394.013v2.824H76.809v-13.61zm-21.304 6.281h-4.08v-3.466h4.117c1.14 0 1.93.479 1.93 1.67 0 1.176-.754 1.796-1.967 1.796zm-7.226 6.092l-4.847-5.544 4.847-5.368V38.08zM35.76 36.48h-7.762v-2.708h6.932v-2.777h-6.932v-2.474h7.916l3.454 3.966-3.607 3.993zm25.104-6.29c0 3.78-2.739 4.562-5.499 4.562h-3.94v4.565h-6.137L41.4 34.812l-4.04 4.506H24.85v-13.61h12.7l3.885 4.46 4.016-4.46h10.09c2.505 0 5.32.714 5.32 4.483z"/>
     </g>
 </svg>
diff --git a/public/images/landing/asset-accesibility.png b/public/images/landing/asset-accesibility.png
new file mode 100644
index 0000000000..ec5286a648
Binary files /dev/null and b/public/images/landing/asset-accesibility.png differ
diff --git a/public/images/landing/asset-charts.png b/public/images/landing/asset-charts.png
new file mode 100644
index 0000000000..f8d21cb3ce
Binary files /dev/null and b/public/images/landing/asset-charts.png differ
diff --git a/public/images/landing/asset-community.png b/public/images/landing/asset-community.png
new file mode 100644
index 0000000000..1375a1925a
Binary files /dev/null and b/public/images/landing/asset-community.png differ
diff --git a/public/images/landing/asset-components.png b/public/images/landing/asset-components.png
new file mode 100644
index 0000000000..a8e2fb5234
Binary files /dev/null and b/public/images/landing/asset-components.png differ
diff --git a/public/images/landing/asset-data.png b/public/images/landing/asset-data.png
new file mode 100644
index 0000000000..9b8fe7f7ee
Binary files /dev/null and b/public/images/landing/asset-data.png differ
diff --git a/public/images/landing/asset-designer.jpg b/public/images/landing/asset-designer.jpg
new file mode 100644
index 0000000000..bf75bf1edc
Binary files /dev/null and b/public/images/landing/asset-designer.jpg differ
diff --git a/public/images/landing/asset-forms.png b/public/images/landing/asset-forms.png
new file mode 100644
index 0000000000..29ede5fd18
Binary files /dev/null and b/public/images/landing/asset-forms.png differ
diff --git a/public/images/landing/asset-hero-mobile.png b/public/images/landing/asset-hero-mobile.png
new file mode 100644
index 0000000000..5b01eb3a7d
Binary files /dev/null and b/public/images/landing/asset-hero-mobile.png differ
diff --git a/public/images/landing/asset-menus.png b/public/images/landing/asset-menus.png
new file mode 100644
index 0000000000..5dcbf376f6
Binary files /dev/null and b/public/images/landing/asset-menus.png differ
diff --git a/public/images/landing/asset-mobile.png b/public/images/landing/asset-mobile.png
new file mode 100644
index 0000000000..4d125a083f
Binary files /dev/null and b/public/images/landing/asset-mobile.png differ
diff --git a/public/images/landing/asset-opensource.png b/public/images/landing/asset-opensource.png
new file mode 100644
index 0000000000..29e6a6a646
Binary files /dev/null and b/public/images/landing/asset-opensource.png differ
diff --git a/public/images/landing/asset-panels.png b/public/images/landing/asset-panels.png
new file mode 100644
index 0000000000..d5bceb902c
Binary files /dev/null and b/public/images/landing/asset-panels.png differ
diff --git a/public/images/landing/asset-pro.png b/public/images/landing/asset-pro.png
new file mode 100644
index 0000000000..36462d5134
Binary files /dev/null and b/public/images/landing/asset-pro.png differ
diff --git a/public/images/landing/asset-productivity.png b/public/images/landing/asset-productivity.png
new file mode 100644
index 0000000000..6a79b42d1b
Binary files /dev/null and b/public/images/landing/asset-productivity.png differ
diff --git a/public/images/landing/asset-support.png b/public/images/landing/asset-support.png
new file mode 100644
index 0000000000..d6dec7cc93
Binary files /dev/null and b/public/images/landing/asset-support.png differ
diff --git a/public/images/landing/asset-templates.png b/public/images/landing/asset-templates.png
new file mode 100644
index 0000000000..54214ad2ad
Binary files /dev/null and b/public/images/landing/asset-templates.png differ
diff --git a/public/images/landing/asset-themes.png b/public/images/landing/asset-themes.png
new file mode 100644
index 0000000000..8e28a664d9
Binary files /dev/null and b/public/images/landing/asset-themes.png differ
diff --git a/public/images/landing/bg-millions.svg b/public/images/landing/bg-millions.svg
new file mode 100644
index 0000000000..4f652ff479
--- /dev/null
+++ b/public/images/landing/bg-millions.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="260" height="52" viewBox="0 0 260 52">
+    <path fill="#20272A" fill-rule="evenodd" d="M0 52L60 0 200 0 260 52"/>
+</svg>
diff --git a/public/images/landing/ebay.svg b/public/images/landing/ebay.svg
new file mode 100644
index 0000000000..33ae973287
--- /dev/null
+++ b/public/images/landing/ebay.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="84" height="33" viewBox="0 0 84 33">
+    <defs>
+        <path id="prefix__a" d="M0 0.031L0 20.395 19.537 20.395 19.537 0.031 0 0.031z"/>
+        <path id="prefix__c" d="M1.134 0.564L1.134 0.021 0.001 0.021 0.001 0.564 1.134 0.564z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(0 8.25)">
+            <mask id="prefix__b" fill="#fff">
+                <use xlink:href="#prefix__a"/>
+            </mask>
+            <path fill="#ffffff" d="M4.06 8.39s.277-5.49 5.833-5.492c5.535-.002 5.535 5.492 5.535 5.492H4.061zM9.989.03C.33.029-.046 8.414.003 10.591c0 0-.473 9.804 9.749 9.804 8.783 0 9.215-6.152 9.215-6.152l-4.04.01s-.787 3.388-5.158 3.298c-5.62-.117-5.838-6.188-5.838-6.188h15.567S20.68.033 9.988.03z" mask="url(#prefix__b)"/>
+        </g>
+        <path fill="#ffffff" d="M30.138 24.624c-6.376.084-6.272-7.128-6.272-7.128s-.233-6.942 6.262-7.12c6.495-.179 6.283 7.268 6.283 7.268s.104 6.895-6.273 6.98m.928-17.132c-5.05-.03-7.222 3.151-7.222 3.151V0h-4.047l.068 22.494s-.024 2.62-.177 4.352h3.931l.169-2.527S25.622 27.5 30.98 27.5c5.36 0 9.592-3.479 9.705-9.93.112-6.451-4.57-10.048-9.62-10.078M49.42 26.083s-4.168.006-4.413-3.5c-.26-3.742 6.412-3.517 6.412-3.517l4.715-.004s.763 7.124-6.714 7.021m10.868-2.436c.01-2.986.093-5.652 0-7.533-.11-2.18.087-7.443-8.869-7.832 0 0-8.585-.824-9.477 5.903h4.391s.341-3.082 4.797-2.993c4.217.084 4.985 2.26 4.963 4.938 0 0-3.614.01-4.82.017-2.174.012-9.78.265-10.49 5.142-.844 5.8 4.072 7.609 7.92 7.586 3.847-.023 6.042-1.236 7.672-3.41l.174 2.7 3.826-.022s-.099-1.51-.087-4.496"/>
+        <path fill="#ffffff" d="M56.438 8.25L61.055 8.25 67.808 22.134 74.576 8.25 78.75 8.25 66.532 33 62.068 33 65.603 26.122zM81.641 9.312v-.56h-.266v-.21h.266V8.25h.482v.292h.564v.21h-.564v.522c0 .095.095.133.258.133.108 0 .204-.012.3-.036v.2c-.12.034-.251.054-.434.054-.356 0-.606-.079-.606-.313"/>
+        <g transform="translate(82.688 8.25)">
+            <mask id="prefix__d" fill="#fff">
+                <use xlink:href="#prefix__c"/>
+            </mask>
+            <path fill="#ffffff" d="M0 .032h.171v.08A.3.3 0 01.4.023c.107 0 .183.036.222.093A.347.347 0 01.873.02c.162 0 .261.074.261.204v.34h-.17V.261c0-.085-.056-.13-.152-.13-.093 0-.16.046-.16.132v.3h-.17V.261C.482.178.425.132.332.132c-.095 0-.16.05-.16.132v.3H0V.032z" mask="url(#prefix__d)"/>
+        </g>
+    </g>
+</svg>
diff --git a/public/images/landing/ford.svg b/public/images/landing/ford.svg
new file mode 100644
index 0000000000..85ae27ef99
--- /dev/null
+++ b/public/images/landing/ford.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="32" viewBox="0 0 77 32">
+    <defs>
+        <path id="prefix__a" d="M76.079 31.096L0 31.096 0 0.001 76.079 0.001 76.079 31.096z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <mask id="prefix__b" fill="#fff">
+            <use xlink:href="#prefix__a"/>
+        </mask>
+        <path fill="#ffffff" d="M35.8 10.699c.146-.16.392-.636.343-.954-.023-.159-.097-.345-.27-.319-.37.079-.59.267-.687.662-.124.424-.073.717 0 1.034 0 0 .244.027.614-.423m19.357 10.259c1.055-.053 2.992-2.226 3.46-2.757.097-.133.27-.37.365-.37.1 0 .296.105.296.262 0 .108-.22.506-.391.744-.983 1.326-2.602 3.366-4.442 3.419-.907 0-1.25-.396-1.375-1.165-.415.397-1.84 1.087-3.288 1.087-1.202-.027-1.694-.795-1.937-1.404-.223-.505-.319-1.247-.147-1.99-.663.372-1.277.424-2.16.399-1.029-.027-1.667-.532-1.985-1.828-1.178 2.33-1.228 2.411-2.43 4.848h-2.087l2.675-4.905c.345-.66.517-1.19.637-1.748a.513.513 0 00-.465-.635c-.341 0-.906.37-1.448.928 0 0-1.375 1.591-2.38 3.205-.956 1.539-2.6 3.291-4.39 3.291-1.302 0-2.48-.77-2.723-2.255 0 0-.125.345-1.277 1.06-.099.052-.344.21-.417.158-.222-.21-.343-.477-.367-.663.073.026.22-.105.685-.503.91-.743 1.106-1.325 1.106-1.325.221-.505.613-1.299.883-1.856.735-1.59 2.01-3.207 4.096-3.287.344 0 .442.16.515.292.198.16.124.476.124.476-1.472.238-2.48 1.168-3.092 2.069-.368.584-.759 1.536-.835 2.227-.145 1.193.371 1.99 1.13 2.173 1.422.239 2.6-.874 3.534-2.6.243-.448.417-1.615.417-2.252 0-.636-.32-1.297-.565-1.563 0-.452.269-.742.588-.742.098 0 .195 0 .295.106.489.529.76 1.537.76 2.308 0 .262 0 .528-.048.793 1.03-1.351 2.33-3.101 3.335-3.448.197-.105.394-.105.59-.105 1.84-.052 1.594 1.749 1.594 1.749.982-1.218 1.669-1.67 2.574-1.617.984.056 1.328.796 1.328 1.381-.026.689-.493 1.482-1.3 1.51-.712 0-1.13-.372-1.351-1.06-.465.185-.686.53-.783 1.22-.147.872.465 1.563 1.25 1.563 1.349 0 1.937-.636 2.428-1.113 1.668-1.698 2.602-3.475 5.007-3.445 1.444.025 1.815 1.273 2.06 1.801l3.166-5.779h1.936l-5.25 10.047c-.097.212-.342.61-.32.928.05.504.639.371.419.371m-33.639 1.405c-2.133 0-4.022-1.51-4.07-4.215-.025-1.643 1.201-3.658 3.481-4.268.272 0 .371.106.371.266 0 .105-.1.237-.32.344-.66.266-1.816 1.672-1.816 2.967 0 .983.567 2.07 1.524 2.31.266.077.513.052.758.052 2.381 0 5.055-2.89 7.951-7.29-.467.026-2.457.264-2.945.873-.221.188-.367.08-.418-.13 0-.054.075-.241.15-.346.781-.954 3.137-1.167 3.702-1.245C32 8.177 34.695 5.944 35.435 5.784c-.015-.006-.035-.013-.054-.017-1.889-.478-3.606-.873-4.955-.873-4.736 0-6.844 2.199-6.746 4.215.05.822.662 1.35 1.567 1.166.984-.187 2.357-1.193 2.702-2.068.074-.186.27-.212.343-.16.146.131.097.32.097.32-.12 1.033-1.595 3.897-4.146 3.897-1.423 0-2.381-1.432-2.353-2.838.023-2.624 2.5-5.276 8.61-5.276 1.153 0 2.453.108 3.876.373 1.643.317 5.742 1.06 9.077 1.112 1.226 0 2.799.054 4.073-.157 1.349-.24 1.054-.292 1.594-.292.491 0 .491.211.491.423 0 .848-2.748 2.466-5.078 2.466-3.433 0-6.998-1.683-8.848-2.225.072.073.122.19.065.342a2.493 2.493 0 01-.37.424c-.49.477-2.158 1.646-3.974 4.96 1.474-.08 3.19-.399 3.19-.399s-.096-.345-.096-.638c.074-1.14.686-1.83 1.47-1.696a.912.912 0 01.739.902c0 .448-.322 1.114-.638 1.432-.221.185-.468.37-.763.53 0 .292.368.529.687.557-.073.29-.05.423-.171.397-.737 0-1.032-.77-1.032-.77-.981.186-1.936.32-3.874.53-4.884 8.537-6.405 9.942-9.4 9.942M38.051 2.731c-19.577 0-35.4 5.752-35.4 12.83 0 7.106 15.823 12.86 35.4 12.86 19.554 0 35.43-5.754 35.43-12.86 0-7.078-15.876-12.83-35.43-12.83m15.194 12.103c-.86-.107-1.94.69-2.825 1.856-.44.583-.908 1.696-.98 2.358-.098.663.072 1.329.295 1.512.22.187 1.2.742 2.722-.928.86-.926 1.693-2.439 1.693-2.439l-.27-.078c.516-1.035.419-2.147-.635-2.28M38.05 29.504c-20.166 0-36.554-6.203-36.554-13.944 0-7.715 16.388-13.996 36.554-13.996 20.219 0 36.58 6.28 36.58 13.996 0 7.74-16.361 13.944-36.58 13.944M38.05 0C17.027 0 0 6.973 0 15.56c0 8.59 17.027 15.536 38.05 15.536 21.003 0 38.03-6.947 38.03-15.536 0-8.588-17.027-15.56-38.03-15.56" mask="url(#prefix__b)"/>
+    </g>
+</svg>
diff --git a/public/images/landing/fox.svg b/public/images/landing/fox.svg
new file mode 100644
index 0000000000..dfbd7ac522
--- /dev/null
+++ b/public/images/landing/fox.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="92" height="40" viewBox="0 0 92 40">
+    <g fill="#ffffff">
+        <path d="M91.955 39.894H79.38c-.115 0-.326-.512-.387-.618-1.73-3.144-3.458-6.304-5.178-9.443-1.84 3.342-3.63 6.74-5.465 10.086-4.117.01-8.2-.02-12.281-.01.462-.871.955-1.722 1.448-2.577 3.433-5.975 6.817-12.03 10.255-18.01-3.655-6.43-7.365-12.81-11.04-19.226-.01 0-.035-.04-.01-.035h12.634c1.553 2.845 3.067 5.726 4.595 8.592 1.589-2.84 3.122-5.737 4.695-8.592H90.86c.01.05-.025.106-.05.147-3.565 6.308-7.215 12.638-10.774 18.957 3.956 6.916 7.988 13.827 11.92 20.729z"/>
+        <path d="M61.429 15.519c.322 1.316.508 2.765.508 4.289 0 4.754-1.368 8.278-3.268 11.144-.322.486-.649.952-1 1.397a17.99 17.99 0 01-3.67 3.514c-.936.669-1.91 1.276-2.992 1.788-2.151 1.017-4.75 1.812-7.747 1.812-4.685 0-8.144-1.438-10.944-3.412-2.8-1.98-4.982-4.598-6.466-7.9-.995-2.212-1.648-4.764-1.724-7.873-.035-1.539.156-3.058.432-4.374.704-3.322 2.087-5.924 3.836-8.167 1.75-2.238 3.967-3.99 6.646-5.312a17.596 17.596 0 013.51-1.276C39.83.83 41.25.613 42.783.613h.025c1.498-.071 3.086.172 4.333.45a18.27 18.27 0 013.57 1.215c3.318 1.51 5.791 3.768 7.782 6.588 1.312 1.848 2.297 4.066 2.936 6.653zM46.347 28.714c.12-.486.085-1.109.085-1.752V12.329c0-.628-.07-1.114-.251-1.57a3.412 3.412 0 00-.724-1.103c-.588-.603-1.473-1.145-2.584-1.059-.538.041-.985.213-1.377.461a3.418 3.418 0 00-1.509 2.127c-.115.48-.11 1.093-.11 1.726v14.633c0 .314-.015.618.025.886.105.77.447 1.388.895 1.848.578.593 1.473 1.09 2.629.963 1.493-.163 2.59-1.16 2.92-2.527zM24.639 10.927H11.28c-.055 1.67-.01 3.519-.025 5.2 3.61.03 7.275.005 10.91.01v10.901c-3.66.01-7.35-.015-10.99.01.005 4.324.025 8.567.025 12.891 0 .015-.005.02-.01.026H.055c-.02.005-.02-.01-.035-.01C-.005 26.677-.005 13.315.015.034.015.02.015 0 .025 0H23.88c.015 0 .02 0 .025.01.251 3.636.493 7.276.734 10.917z"/>
+    </g>
+</svg>
diff --git a/public/images/landing/github.png b/public/images/landing/github.png
new file mode 100644
index 0000000000..246aae802a
Binary files /dev/null and b/public/images/landing/github.png differ
diff --git a/public/images/landing/icon-angular.svg b/public/images/landing/icon-angular.svg
new file mode 100644
index 0000000000..bc835f6b5e
--- /dev/null
+++ b/public/images/landing/icon-angular.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-angular</title>
+    <defs>
+        <polygon id="path-1" points="14.8947371 0 14.8947371 0 14.8947371 0 0.038353864 5.2597509 2.30431134 24.76202 14.8947371 31.6852464 14.8947371 31.6852464 14.8947371 31.6852464 27.4851628 24.76202 29.7511203 5.2597509"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-angular" transform="translate(1.000000, 1.000000)">
+            <circle id="Oval" stroke="#DD0031" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" cx="23" cy="23" r="23"></circle>
+            <g id="primeng-icon" transform="translate(8.000000, 7.000000)">
+                <g id="angular-back">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Shape" fill="#DD0031" fill-rule="nonzero" xlink:href="#path-1"></use>
+                    <polygon id="Shape-path" fill="#C3002F" mask="url(#mask-2)" points="14.8947371 0 14.8947371 3.51706235 14.8947371 3.50121972 14.8947371 19.549797 14.8947371 19.549797 14.8947371 31.6852464 14.8947371 31.6852464 27.4851628 24.76202 29.7511203 5.2597509"></polygon>
+                </g>
+                <g id="head" transform="translate(5.789474, 5.560656)" fill="#FFFFFF">
+                    <polygon id="chick-right" fill-rule="nonzero" points="13.4599544 9.46665012 12.0347828 9.15109512 13.1432496 10.7288701 13.1432496 15.6199727 16.9437073 12.4644227 16.9437073 7.09998759 15.2018309 7.7310976"></polygon>
+                    <polygon id="chick-left" fill-rule="nonzero" transform="translate(3.562929, 11.359980) scale(-1, 1) translate(-3.562929, -11.359980) " points="2.53363848 9.46665012 1.10846684 9.15109512 2.21693367 10.7288701 2.21693367 15.6199727 6.01739139 12.4644227 6.01739139 7.09998759 4.27551494 7.7310976"></polygon>
+                    <polygon id="mask" points="5.36842113 11.025017 6.63157905 9.12786899 7.42105274 9.60215599 10.5789475 9.60215599 11.3684212 9.12786899 12.6315791 11.025017 12.6315791 18.1393221 11.6842107 19.5621831 10.5789475 20.6688528 7.42105274 20.6688528 6.31578957 19.5621831 5.36842113 18.1393221"></polygon>
+                    <polygon id="bottom-chick-right" fill-rule="nonzero" points="13.1432496 18.6177452 15.2018309 16.5666377 15.2018309 14.5155302 13.1432496 16.2510827"></polygon>
+                    <polygon id="bottom-chick-left" fill-rule="nonzero" transform="translate(3.879634, 16.566638) scale(-1, 1) translate(-3.879634, -16.566638) " points="2.85034329 18.6177452 4.90892456 16.5666377 4.90892456 14.5155302 2.85034329 16.2510827"></polygon>
+                    <path d="M11.0846684,0 L12.3514876,2.99777254 L10.4512587,8.99331762 L9.3427919,8.99331762 L9.3427919,0 L11.0846684,0 Z M8.70938228,8.99331762 L7.75926785,8.99331762 L5.70068658,2.99777254 L6.96750582,0 L8.70938228,0 L8.70938228,8.99331762 Z"></path>
+                    <polygon id="head-left" fill-rule="nonzero" points="7.75926785 8.99331762 0.950114431 6.46887758 0 2.52444003 5.85903899 2.99777254 7.91762026 8.99331762"></polygon>
+                    <polygon id="head-right" fill-rule="nonzero" transform="translate(14.251716, 5.758879) scale(-1, 1) translate(-14.251716, -5.758879) " points="18.0521742 8.99331762 11.2430208 6.46887758 10.2929063 2.52444003 16.3102977 2.99777254 18.2105266 8.99331762"></polygon>
+                    <polygon id="ear-right" fill-rule="nonzero" points="12.6681924 2.52444003 15.9935929 2.20888503 13.7766592 0 11.5597256 0"></polygon>
+                    <polygon id="ear-left" fill-rule="nonzero" transform="translate(4.275515, 1.262220) scale(-1, 1) translate(-4.275515, -1.262220) " points="3.1670481 2.52444003 6.49244861 2.20888503 4.27551494 0 2.05858127 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/landing/icon-faces.svg b/public/images/landing/icon-faces.svg
new file mode 100644
index 0000000000..8e636aac55
--- /dev/null
+++ b/public/images/landing/icon-faces.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-faces</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-faces" transform="translate(1.000000, 1.000000)">
+            <circle id="Oval" stroke="#263238" stroke-width="2" fill="#FFFFFF" fill-rule="nonzero" cx="23" cy="23" r="23"></circle>
+            <g id="primefaces-icon" transform="translate(7.000000, 7.000000)">
+                <polygon id="bg" fill="#263238" points="8.83669321 0 5.23049982 3.92377699 0 2.94365637 2.91059727 12.9441812 4.84586139 25.1277393 12.4761886 34.1790297 19.1940403 34.1790297 26.7282079 25.1524483 28.7592154 12.85317 31.8621319 2.94365637 26.6795037 3.92377699 22.936772 0"></polygon>
+                <g id="primefaces" transform="translate(3.267911, 2.412637)">
+                    <polygon id="chick-right" fill="#D0D8DC" fill-rule="nonzero" points="19.021373 13.2602971 17.0073453 12.8182872 18.5738113 15.0283367 18.5738113 21.8794902 23.9445519 17.4593912 23.9445519 9.94522282 21.4829625 10.8292426"></polygon>
+                    <polygon id="chick-left" fill="#D0D8DC" fill-rule="nonzero" transform="translate(5.035069, 15.912357) scale(-1, 1) translate(-5.035069, -15.912357) " points="3.58049375 13.2602971 1.56646601 12.8182872 3.13293203 15.0283367 3.13293203 21.8794902 8.50367265 17.4593912 8.50367265 9.94522282 6.0420832 10.8292426"></polygon>
+                    <polygon id="mask" fill="#D0D8DC" points="7.60854921 15.4703466 9.39879609 12.8182872 10.5177004 13.481302 14.9933176 13.481302 16.1122219 12.8182872 17.9024687 15.4703466 17.9024687 25.4155694 16.5597836 27.404614 14.9933176 28.9516487 10.5177004 28.9516487 8.95123437 27.404614 7.60854921 25.4155694"></polygon>
+                    <polygon id="bottom-chick-right" fill="#7A858A" fill-rule="nonzero" points="18.5738113 26.0785843 21.4829625 23.2055199 21.4829625 20.3324556 18.5738113 22.76351"></polygon>
+                    <polygon id="bottom-chick-left" fill="#7A858A" fill-rule="nonzero" transform="translate(5.482631, 23.205520) scale(-1, 1) translate(-5.482631, -23.205520) " points="4.02805547 26.0785843 6.93720664 23.2055199 6.93720664 20.3324556 4.02805547 22.76351"></polygon>
+                    <path d="M15.6646601,0 L17.454907,4.19909408 L14.7695367,12.5972822 L13.2030707,12.5972822 L13.2030707,0 L15.6646601,0 Z M12.3079473,12.5972822 L10.9652621,12.5972822 L8.05611093,4.19909408 L9.84635781,0 L12.3079473,0 L12.3079473,12.5972822 Z" id="head" fill="#D0D8DC"></path>
+                    <polygon id="head-left" fill="#D0D8DC" fill-rule="nonzero" points="10.9652621 12.5972822 1.34268516 9.06120302 0 3.53607923 8.57826627 4.22211543 11.4376884 12.5972822"></polygon>
+                    <polygon id="head-right" fill="#D0D8DC" fill-rule="nonzero" transform="translate(20.015955, 8.066681) scale(-1, 1) translate(-20.015955, -8.066681) " points="25.2623726 12.5972822 15.6397956 9.06120302 14.2971105 3.53607923 22.8753767 4.22211543 25.7347988 12.5972822"></polygon>
+                    <polygon id="ear-right" fill="#D0D8DC" fill-rule="nonzero" points="17.9024687 3.53607923 22.6018668 3.09406932 19.4689348 0 16.3360027 0"></polygon>
+                    <polygon id="ear-left" fill="#D0D8DC" fill-rule="nonzero" transform="translate(6.042083, 1.768040) scale(-1, 1) translate(-6.042083, -1.768040) " points="4.47561718 3.53607923 9.17501523 3.09406932 6.0420832 0 2.90915117 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/landing/icon-github-b.svg b/public/images/landing/icon-github-b.svg
new file mode 100644
index 0000000000..f372d5b25f
--- /dev/null
+++ b/public/images/landing/icon-github-b.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>icon-github-b</title>
+    <desc>Created with Sketch.</desc>
+    <g id="PrimeNG" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrimeNG---Landing" transform="translate(-1291.000000, -65.000000)" fill="#ffffff" fill-rule="nonzero">
+            <g id="topbar" transform="translate(0.000000, 42.000000)">
+                <g id="menuitem-github" transform="translate(1232.000000, 20.000000)">
+                    <path d="M67.9289303,16.8054027 L68.0267965,16.7946438 C70.750014,15.8839284 72.7143021,13.3124968 72.7143021,10.2857075 C72.7143021,6.49998868 69.6428698,3.42855644 65.857151,3.42855644 C62.0714322,3.42855644 59,6.49998868 59,10.2857075 C59,13.3124968 60.9642881,15.8839284 63.6875056,16.7946438 C64.0357203,16.8571439 64.1607204,16.6428579 64.1607204,16.4642863 C64.1607204,16.2946432 64.1517919,15.7589283 64.1517919,15.187499 C64.1517919,15.187499 62.2410753,15.5982138 61.8392891,14.3749981 C61.8392891,14.3749981 61.5267887,13.5803543 61.0803596,13.3749969 C61.0803596,13.3749969 60.4553589,12.9464249 61.1250025,12.9553535 C61.1250025,12.9553535 61.8035748,13.008925 62.1785752,13.6607115 C62.7767902,14.7142842 63.7767914,14.4107124 64.169649,14.2321407 C64.2321491,13.7946402 64.4107207,13.4910684 64.6071495,13.3124968 C63.080362,13.1428537 61.4821458,12.5535673 61.4821458,9.92855644 C61.4821458,9.1785633 61.7500033,8.57141972 62.1875038,8.08927628 C62.1160751,7.91070464 61.883932,7.21427524 62.2589325,6.26784554 C62.8303617,6.0892739 64.1428633,6.97320352 64.1428633,6.97320352 C64.6875068,6.82141763 65.2767932,6.74106039 65.857151,6.74106039 C66.4375089,6.74106039 67.0267953,6.82141763 67.5714388,6.97320352 C67.5714388,6.97320352 68.8839404,6.0892739 69.4553696,6.26784554 C69.8303701,7.21427524 69.5982269,7.91070464 69.5267983,8.08927628 C69.9642988,8.57141972 70.2321562,9.1785633 70.2321562,9.92855644 C70.2321562,12.5624959 68.6250115,13.1428537 67.0982239,13.3124968 C67.3482242,13.5267828 67.5625102,13.9374975 67.5625102,14.5803555 C67.5625102,15.4999994 67.5535816,16.2410717 67.5535816,16.4642863 C67.5535816,16.6428579 67.6785818,16.8571439 68.0267965,16.7946438 L67.9289303,16.8054027 Z" id="icon-github-b"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/landing/icon-primereact.png b/public/images/landing/icon-primereact.png
new file mode 100644
index 0000000000..c7a948ecf3
Binary files /dev/null and b/public/images/landing/icon-primereact.png differ
diff --git a/public/images/landing/icon-react.svg b/public/images/landing/icon-react.svg
new file mode 100644
index 0000000000..36b19d1671
--- /dev/null
+++ b/public/images/landing/icon-react.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 63.1 (101010) - https://sketch.com -->
+    <title>442656EB-5D13-4E00-B92C-AE67949B19E9</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <polygon id="path-1" points="2.15330465e-06 0.040425532 29.3897197 0.040425532 29.3897197 31.9574426 2.15330465e-06 31.9574426"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrimeNG---Landing" transform="translate(-135.000000, -488.000000)">
+            <g id="topbar" transform="translate(0.000000, 42.000000)">
+                <g id="icon-react" transform="translate(135.000000, 446.000000)">
+                    <circle id="Oval" stroke="#03C4E8" stroke-width="2" fill="#FFFFFF" cx="24" cy="24" r="23"></circle>
+                    <g id="primereact-logo" transform="translate(9.000000, 7.000000)">
+                        <g id="base">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <g id="path-1"></g>
+                            <path d="M27.9525342,23.6196553 C27.3280759,24.6882511 26.2097356,25.3262511 24.960905,25.3262511 L21.1376696,25.3262511 L26.0407873,16.9348043 L27.9524481,20.2064213 C28.5769064,21.2750596 28.5769064,22.551017 27.9525342,23.6196553 Z M20.4871993,24.527783 L20.4334528,24.619783 L20.3207919,24.8125915 L19.722001,25.8374426 L19.6189007,26.0138681 L18.3745921,28.1434851 L17.9994003,28.7855702 L17.7351467,29.237783 L17.7251985,29.2400809 L17.7192554,29.2502085 C17.0864422,30.3333149 15.9320556,30.6452298 14.6664292,30.6452298 C13.4025686,30.6452298 12.2915496,30.3350596 11.6582627,29.2548043 L11.63828,29.249783 L10.9959923,28.1505915 L10.8350974,27.8752723 L3.90735646,16.0189319 L5.16393891,13.8684638 L5.16411119,13.8691872 L7.3805507,10.0778255 L7.37900035,10.0775277 L7.63059243,9.64701703 L7.63222896,9.6473149 L9.37179766,6.67161277 L20.0443506,6.66791063 L25.4823493,15.979017 L20.4403003,24.6080809 L20.4871993,24.527783 Z M17.6472489,29.3831447 C17.6704615,29.3465915 17.6931573,29.3096128 17.7151641,29.2719957 C17.6931573,29.3096128 17.6704615,29.3465915 17.6472489,29.3831447 Z M17.5752854,29.4919532 C17.5921242,29.4674426 17.6086186,29.4425489 17.6248545,29.4174851 C17.6086186,29.4425489 17.5921242,29.4674426 17.5752854,29.4919532 Z M17.4986278,29.5991447 C17.5155528,29.5763362 17.5322193,29.5532723 17.5486706,29.5300383 C17.5322193,29.5532723 17.5155528,29.5763362 17.4986278,29.5991447 Z M17.4145197,29.7078681 C17.4338133,29.6839106 17.4528916,29.6597404 17.4716253,29.6351872 C17.4528916,29.6597404 17.4338133,29.6839106 17.4145197,29.7078681 Z M17.2211099,29.9288468 C17.2802827,29.8668894 17.3373452,29.8024638 17.3921684,29.735783 C17.3373452,29.8024638 17.2802827,29.8668894 17.2211099,29.9288468 Z M17.1304557,30.020166 C17.1544436,29.9968468 17.1780438,29.9731021 17.2013856,29.9489745 C17.1780438,29.9731021 17.1544436,29.9968468 17.1304557,30.020166 Z M17.0345045,30.1099106 C17.0584062,30.0884213 17.0819633,30.0665064 17.1052621,30.0442936 C17.0819633,30.0665064 17.0584062,30.0884213 17.0345045,30.1099106 Z M16.9283035,30.2018681 C16.955995,30.1788894 16.983342,30.1554851 17.0103875,30.1315702 C16.983342,30.1554851 16.955995,30.1788894 16.9283035,30.2018681 Z M16.7046613,30.3727191 C16.7764094,30.3225489 16.8462626,30.2694851 16.9141778,30.2137404 C16.8462626,30.2694851 16.7763663,30.3225064 16.7046613,30.3727191 Z M16.5979435,30.4443787 C16.6311044,30.4229319 16.6640069,30.4009319 16.6964787,30.3783362 C16.6640069,30.4009319 16.6311044,30.4229319 16.5979435,30.4443787 Z M16.4854118,30.5139532 C16.5173668,30.495017 16.5488912,30.4756128 16.5802003,30.4556979 C16.5488912,30.4756128 16.5173668,30.495017 16.4854118,30.5139532 Z M16.3606924,30.5845489 C16.3970832,30.5649745 16.4330865,30.5446766 16.4687022,30.5238255 C16.4330865,30.5446766 16.3970832,30.5649745 16.3606924,30.5845489 Z M16.1155602,30.7040809 C16.1978164,30.6679957 16.2784792,30.6286766 16.3574194,30.5863362 C16.2784792,30.6286766 16.1978164,30.6679532 16.1155602,30.7040809 Z M13.0089014,30.5863362 C13.0879277,30.6286766 13.1685905,30.6679957 13.2508468,30.7041234 C13.1685905,30.6679532 13.0879277,30.6286766 13.0089014,30.5863362 Z M12.8976617,30.5238255 C12.9333635,30.5446766 12.9693668,30.565017 13.0058007,30.5845915 C12.9693668,30.565017 12.9333635,30.5446766 12.8976617,30.5238255 Z M12.7862928,30.4557404 C12.8175157,30.4756128 12.8490401,30.495017 12.880909,30.5139532 C12.8490401,30.495017 12.8175157,30.4756128 12.7862928,30.4557404 Z M12.6699282,30.3783362 C12.7024001,30.4009319 12.7352164,30.4229319 12.7684204,30.4443787 C12.7352164,30.4229319 12.7024001,30.4009319 12.6699282,30.3783362 Z M12.4522722,30.213783 C12.5201444,30.2694851 12.5899976,30.3225489 12.6617026,30.3727191 C12.5899976,30.3225064 12.5201444,30.2694851 12.4522722,30.213783 Z M12.3560195,30.1315702 C12.3829789,30.1554426 12.4103258,30.1788468 12.4379743,30.2018255 C12.4103258,30.1788468 12.3829789,30.1554426 12.3560195,30.1315702 Z M12.2611449,30.0442936 C12.2844436,30.0665489 12.3080008,30.0884213 12.3318594,30.1099106 C12.3080008,30.0884213 12.2844436,30.0665489 12.2611449,30.0442936 Z M12.1651936,29.9491872 C12.1884493,29.9732298 12.2119634,29.9968894 12.2358651,30.0201234 C12.2119634,29.9968894 12.1884493,29.9732298 12.1651936,29.9491872 Z M11.9741955,29.735783 C12.0290187,29.8024638 12.0860381,29.8668043 12.1451679,29.9287617 C12.0860381,29.8668043 12.0290187,29.8024638 11.9741955,29.735783 Z M11.8948247,29.6352298 C11.9135154,29.6597404 11.9325506,29.6839106 11.9518012,29.707783 C11.9325506,29.6839106 11.9135154,29.6597404 11.8948247,29.6352298 Z M11.8177795,29.5301234 C11.8341876,29.5533574 11.8508542,29.5763362 11.8677361,29.5991021 C11.8508542,29.5763362 11.8341876,29.5533574 11.8177795,29.5301234 Z M11.7415525,29.4175277 C11.7577884,29.4425489 11.7742396,29.4674 11.7910785,29.4918681 C11.7742396,29.4674 11.7577884,29.4425489 11.7415525,29.4175277 Z M11.6512429,29.2719957 C11.6732496,29.3096128 11.6959885,29.3465915 11.7191581,29.3831447 C11.6959885,29.3465915 11.6732496,29.3096128 11.6512429,29.2719957 Z M4.39675954,25.3262511 C3.15951376,25.3262511 2.05155239,24.6942085 1.43290796,23.6354426 C0.814306603,22.5767191 0.814306603,21.3125489 1.43290796,20.253783 L3.34887537,16.9748043 L8.22869434,25.3262511 L4.39675954,25.3262511 Z M1.43725764,11.7914851 C0.812842357,10.7228468 0.812842357,9.4468468 1.43725764,8.37825107 C2.06162985,7.30961277 3.17997015,6.67161277 4.4288007,6.67161277 L8.25207925,6.67161277 L3.34887537,15.0631021 L1.43725764,11.7914851 Z M11.6746278,2.72591064 C12.3074409,1.64284681 13.4408974,0.996293617 14.7065668,0.996293617 C15.9721932,0.996293617 17.1056497,1.64284681 17.7384198,2.72591064 L19.4854389,5.71578297 L9.92760865,5.71578297 L11.6746278,2.72591064 Z M24.9929462,6.67161277 C26.230235,6.67161277 27.3382395,7.30369787 27.9568408,8.36246383 C28.5754852,9.42114467 28.5754422,10.6853149 27.9568408,11.7440809 L26.0408303,15.0231447 L21.1610114,6.67161277 L24.9929462,6.67161277 Z M26.5993545,15.9789319 L28.7945624,12.2219957 C29.5880983,10.8639957 29.5880983,9.24250637 28.7946055,7.88450637 C28.0011128,6.52654893 26.5799317,5.71578297 24.9929462,5.71578297 L20.6024872,5.71578297 L18.5762275,2.24799574 C17.768523,0.865697873 16.322019,0.0404212767 14.7065668,0.0404212767 C13.0912869,0.0404212767 11.6444815,0.86578298 10.8368631,2.24799574 L8.81060339,5.71578297 L4.4288007,5.71578297 C2.83027348,5.71578297 1.39871348,6.53242127 0.599449867,7.90033617 C-0.199813751,9.2682085 -0.199813751,10.9015277 0.599449867,12.2694 L2.79035121,16.0189319 L0.595143256,19.7759106 C-0.198349504,21.1338681 -0.198349504,22.7553574 0.595143256,24.1134 C1.38863602,25.4713574 2.80981708,26.2820809 4.39675954,26.2820809 L8.78721851,26.2820809 L10.8134782,29.7499106 C11.6211828,31.1322085 13.0678159,31.9574426 14.683225,31.9574426 C16.2986342,31.9574426 17.7452242,31.1322085 18.5528426,29.7499106 L20.5791454,26.2820809 L24.960905,26.2820809 C26.5594322,26.2820809 27.9910353,25.4654426 28.7902989,24.0975277 C29.5895195,22.7296979 29.5895195,21.0964213 28.7902128,19.7285489 L26.5993545,15.9789319 Z" id="bg-base" fill="#03C4E8" fill-rule="nonzero" mask="url(#mask-2)"></path>
+                        </g>
+                        <g id="prime-logo-2018" transform="translate(4.363636, 6.626263)">
+                            <polygon id="chick-right" fill="#03C4E8" fill-rule="nonzero" points="15.5292051 10.8761919 13.8849363 10.5136522 15.163812 12.3263509 15.163812 17.9457167 19.2150351 14.3203194 19.5485288 8.15714396 17.5388669 8.88222342"></polygon>
+                            <polygon id="chick-left" fill="#03C4E8" fill-rule="nonzero" transform="translate(4.110672, 13.051430) scale(-1, 1) translate(-4.110672, -13.051430) " points="2.92314449 10.8761919 1.27887571 10.5136522 2.55775143 12.3263509 2.55775143 17.9457167 6.60897449 14.3203194 6.94246816 8.15714396 4.93280632 8.88222342"></polygon>
+                            <path d="M13.1541502,10.5136522 L14.6157224,12.6888906 L14.615682,15.9176522 L12.0707645,17.7372241 L12.0679959,18.4644666 L14.615682,16.6426522 L14.615682,17.3676522 L12.0707645,19.187383 L12.0679959,19.9146255 L14.615682,18.0926522 L14.615682,18.8186522 L12.0707645,20.6375419 L12.0679959,21.3647844 L14.615682,19.5426522 L14.6157224,20.8460346 L12.9076549,24.0808081 L7.58625593,24.0808081 L6.21168204,20.8460346 L6.21168204,19.5806522 L8.70628312,21.3647844 L8.70351455,20.6375419 L6.21168204,18.8556522 L6.21168204,18.1306522 L8.70628312,19.9146255 L8.70351455,19.187383 L6.21168204,17.4046522 L6.21168204,16.6806522 L8.70628312,18.4644666 L8.70351455,17.7372241 L6.21168204,15.9546522 L6.21168204,12.6888906 L7.67325428,10.5136522 L8.58673693,11.0574618 L12.2406675,11.0574618 L13.1541502,10.5136522 Z" id="mask" fill="#03C4E8"></path>
+                            <g id="mask-effect-right" transform="translate(11.692578, 15.770478)"></g>
+                            <g id="mask-effect-left" transform="translate(5.846289, 15.770478)"></g>
+                            <polygon id="bottom-chick-right" fill="#03C4E8" fill-rule="nonzero" points="15.163812 21.3898442 17.5388669 19.0333359 17.5388669 16.6768276 15.163812 18.6707962"></polygon>
+                            <polygon id="bottom-chick-left" fill="#03C4E8" fill-rule="nonzero" transform="translate(4.476065, 19.033336) scale(-1, 1) translate(-4.476065, -19.033336) " points="3.28853755 21.3898442 5.66359245 19.0333359 5.66359245 16.6768276 3.28853755 18.6707962"></polygon>
+                            <path d="M11.5098814,3.10862447e-14 L11.5098814,4.53174664 L12.2406675,4.16920691 L12.2406675,3.10862447e-14 L12.7887571,0 L14.2503294,3.44412745 L12.057971,10.3323823 L10.7790953,10.3323823 L10.7790953,0 L11.5098814,3.10862447e-14 Z M8.58673693,4.16920691 L9.31752306,4.53174664 L9.31752306,0 L10.0483092,0 L10.0483092,10.3323823 L8.95213,10.3323823 L6.5770751,3.44412745 L8.03864734,0 L8.58673693,0 L8.58673693,4.16920691 Z" id="head" fill="#03C4E8"></path>
+                            <polygon id="head-left" fill="#03C4E8" fill-rule="nonzero" points="8.95213 10.3323823 1.09617918 7.4320645 0 2.90031785 6.75977163 3.44412745 9.13482653 10.3323823"></polygon>
+                            <polygon id="head-right" fill="#03C4E8" fill-rule="nonzero" transform="translate(16.442688, 6.616350) scale(-1, 1) translate(-16.442688, -6.616350) " points="20.8274045 10.3323823 12.9714537 7.4320645 11.8752745 2.90031785 18.8177426 3.44412745 21.010101 10.3323823"></polygon>
+                            <polygon id="ear-right" fill="#03C4E8" fill-rule="nonzero" points="14.6157224 2.90031785 18.1188559 2.53777812 15.8945982 0 13.3368467 0"></polygon>
+                            <polygon id="ear-left" fill="#03C4E8" fill-rule="nonzero" transform="translate(5.099553, 1.450159) scale(-1, 1) translate(-5.099553, -1.450159) " points="3.98742428 2.90031785 7.49055775 2.53777812 5.26629999 0 2.70854856 0"></polygon>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/landing/icon-vue.svg b/public/images/landing/icon-vue.svg
new file mode 100644
index 0000000000..9fa0c2e8c8
--- /dev/null
+++ b/public/images/landing/icon-vue.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 63.1 (101010) - https://sketch.com -->
+    <title>D68BBE86-8ECE-444A-B427-BA6B56F736D1</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrimeNG---Landing" transform="translate(-199.000000, -488.000000)">
+            <g id="topbar" transform="translate(0.000000, 42.000000)">
+                <g id="icon-vue" transform="translate(199.000000, 446.000000)">
+                    <circle id="Oval" stroke="#41B883" stroke-width="2" fill="#FFFFFF" cx="24" cy="24" r="23"></circle>
+                    <g id="head" transform="translate(10.000000, 8.000000)">
+                        <polygon id="chick-right" fill="#41B883" fill-rule="nonzero" points="20.4591292 14.4366404 18.2928685 13.955419 19.9777379 16.3615257 19.9777379 23.8204566 25.7544332 19.0082431 25.7544332 10.8274803 23.1067812 11.789923"></polygon>
+                        <polygon id="chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(5.415652, 17.323968) scale(-1, 1) translate(-5.415652, -17.323968) " points="3.85113021 14.4366404 1.68486946 13.955419 3.36973893 16.3615257 3.36973893 23.8204566 9.14643424 19.0082431 9.14643424 10.8274803 6.49878222 11.789923"></polygon>
+                        <polygon id="mask" fill="#41B883" points="8.18365169 16.8427471 10.1092168 13.955419 11.312695 14.677251 16.1266077 14.677251 17.3300859 13.955419 19.255651 16.8427471 19.255651 27.6702274 17.8114772 29.8357234 16.1266077 31.5199981 11.312695 31.5199981 9.62782551 29.8357234 8.18365169 27.6702274"></polygon>
+                        <polygon id="bottom-chick-right" fill="#41B883" fill-rule="nonzero" points="19.9777379 28.3920594 23.1067812 25.2641206 23.1067812 22.1361819 19.9777379 24.7828993"></polygon>
+                        <polygon id="bottom-chick-left" fill="#41B883" fill-rule="nonzero" transform="translate(5.897043, 25.264121) scale(-1, 1) translate(-5.897043, -25.264121) " points="4.33252148 28.3920594 7.46156477 25.2641206 7.46156477 22.1361819 4.33252148 24.7828993"></polygon>
+                        <path d="M17.888043,2.468 L18.7742598,4.57160278 L15.8859121,13.7148083 L14.2010426,13.7148083 L14.200043,11.401 L17.888043,2.468 Z M9.64004296,2.257 L13.238043,11.553 L13.2382601,13.7148083 L11.7940863,13.7148083 L8.66504296,4.57160278 L9.64004296,2.257 Z M13.2382601,0 L13.238043,9.337 L11.874043,5.815 L12.2754775,6.01526682 L12.2754775,0 L13.2382601,0 Z M15.1638252,3.8191672e-14 L15.1638252,6.01526682 L15.661043,5.766 L14.200043,9.304 L14.2010426,0 L15.1638252,3.8191672e-14 Z M16.8486946,0 L17.451043,1.431 L16.126043,4.64 L16.1266077,3.8191672e-14 L16.8486946,0 Z M11.312695,0 L11.312043,4.362 L10.086043,1.196 L10.5906081,0 L11.312695,0 Z" fill="#455C71"></path>
+                        <path d="M27.6799984,3.84977076 L26.2358245,9.86503758 L15.8859121,13.7148083 L15.6452165,13.7148083 L18.5335641,4.57160278 L27.6799984,3.84977076 Z M0,3.84977076 L8.9057386,4.57160278 L12.0347819,13.7148083 L11.7940863,13.7148083 L1.44417383,9.86503758 L0,3.84977076 Z" id="head-right-2" fill="#41B883" fill-rule="nonzero"></path>
+                        <polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="19.255651 3.84977076 24.3102594 3.36854942 20.9405205 0 17.5707816 0"></polygon>
+                        <polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(6.498782, 1.924885) scale(-1, 1) translate(-6.498782, -1.924885) " points="4.81391276 3.84977076 9.86852115 3.36854942 6.49878222 0 3.12904329 0"></polygon>
+                        <polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="3.75999978 4.15999975 8.95999947 4.55999973 12.0799993 13.7199992 11.7599993 13.7199992 8.3999995 12.4799993"></polygon>
+                        <polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="23.8399986 4.15999975 18.4799989 4.55999973 15.5199991 13.7199992 15.9199991 13.7119992 19.0399989 12.5599993"></polygon>
+                        <polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="9.67999942 14.5599991 10.0799994 13.9199992 11.4399993 14.5599991 16.239999 14.5599991 17.279999 13.9199992 17.7599989 14.5599991 13.7199992 21.4399987"></polygon>
+                        <path d="M18.0420811,-5.32907052e-15 L13.6971418,10.5228998 L9.62376124,-5.32907052e-15 L18.0420811,-5.32907052e-15 Z" id="Path-6" fill="#41B883" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/landing/intel.svg b/public/images/landing/intel.svg
new file mode 100644
index 0000000000..7fb93e81c0
--- /dev/null
+++ b/public/images/landing/intel.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="63" height="42" viewBox="0 0 63 42">
+    <g fill="#ffffff">
+        <path d="M18.438 17.504V27.61H15.22V14.908l6.641.006c2.821 0 3.782 1.99 3.782 3.796v8.9h-3.211v-8.883c0-.757-.392-1.223-1.337-1.223h-2.658zm21.874-.151c-1.1 0-1.95.565-2.306 1.332-.21.46-.283.814-.307 1.378h4.949c-.064-1.378-.689-2.71-2.336-2.71m-2.613 4.9c0 1.645 1.022 2.856 2.849 2.856 1.42 0 2.127-.394 2.948-1.211l1.987 1.897c-1.272 1.256-2.607 2.019-4.959 2.019-3.08 0-6.027-1.68-6.027-6.573 0-4.182 2.574-6.549 5.955-6.549 3.427 0 5.407 2.772 5.407 6.402v1.158h-8.16m-5.917 5.342c-2.62 0-3.733-1.824-3.733-3.626V11.447h3.212v3.46h2.422v2.597H31.26v6.263c0 .738.349 1.147 1.115 1.147h1.307v2.68h-1.901M12.359 13.152h-3.24v-3.077h3.24v3.077zm.008 14.591c-2.426-.233-3.25-1.704-3.25-3.401l.003-9.434h3.247v12.835zm38.604-.27c-2.42-.234-3.242-1.703-3.242-3.399V9.638h3.242v17.834zm11.332-15.749c-2.937-14.323-30.74-15.23-48.661-4.32v1.204c17.902-9.2 43.293-9.146 45.606 4.046.774 4.362-1.684 8.91-6.074 11.525v3.42c5.284-1.933 10.703-8.202 9.13-15.875m-32.577 25.06c-12.368 1.143-25.256-.652-27.06-10.317-.883-4.764 1.288-9.815 4.167-12.952v-1.678c-5.183 4.546-7.996 10.3-6.377 17.1 2.067 8.718 13.129 13.66 30.012 12.018 6.68-.652 15.424-2.8 21.502-6.136v-4.74c-5.515 3.285-14.642 6-22.244 6.705"/>
+        <path d="M54.718 10.596c0-.157-.092-.207-.302-.207h-.202v.445l.202.005c.21 0 .302-.07.302-.217v-.026zm.316 1.103h-.24c-.022 0-.04-.013-.05-.032l-.328-.555c-.005-.01-.034-.024-.045-.024h-.147v.55c0 .03-.02.061-.059.061h-.217c-.027 0-.054-.032-.054-.06v-1.394c0-.08.031-.114.1-.124.076-.01.284-.017.396-.017.4 0 .64.117.64.492v.026c0 .232-.115.354-.294.414l.34.575c.002.011.01.027.01.04 0 .023-.014.048-.052.048m-.57-1.847c-.59 0-1.069.488-1.069 1.076 0 .588.478 1.068 1.069 1.068.588 0 1.07-.48 1.07-1.068 0-.588-.482-1.076-1.07-1.076m0 2.365c-.718 0-1.29-.579-1.29-1.29 0-.709.572-1.29 1.29-1.29.71 0 1.293.581 1.293 1.29 0 .711-.583 1.29-1.293 1.29"/>
+    </g>
+</svg>
diff --git a/public/images/landing/lufthansa.svg b/public/images/landing/lufthansa.svg
new file mode 100644
index 0000000000..80a0c13d56
--- /dev/null
+++ b/public/images/landing/lufthansa.svg
@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="115" height="21" viewBox="0 0 115 21">
+    <defs>
+        <path id="prefix__a" d="M10.29 10.612L10.29 0.068 0.634 0.068 0.634 10.612 10.29 10.612z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#ffffff" d="M57.547 6.15h.514V4.014h-1.674c-2.188 0-3.346 1.202-3.346 3.604v.267h-1.288v2.135h1.288v7.608h3.09V10.02h1.802V7.885H56.13v-.267c0-.935.514-1.468 1.416-1.468M59.735 7.885h-1.288v2.136h1.288v4.67c0 2.003.901 2.937 2.703 2.937h2.317v-2.269h-.643l-1.03-.134c-.129-.266-.257-.667-.257-1.334v-3.87h1.802V7.885h-1.802v-3.07h-3.09v3.07zM68.49 4.014h-3.091v13.614h3.09v-5.606c0-1.334.515-2.002 1.545-2.002.901 0 1.287.668 1.287 2.002v5.606h3.09v-5.606c0-1.334-.128-2.268-.386-2.802-.644-1.068-1.546-1.602-2.961-1.602-1.287 0-2.06.4-2.574 1.335V4.014zM79.689 13.49l1.93-.533v.801c0 1.335-.643 2.002-2.187 2.002-.772 0-1.287-.267-1.287-.935 0-.667.515-1.067 1.544-1.334m.515-3.87c.901 0 1.288.266 1.288.933 0 .401-.257.667-.9.801l-2.705.533c-1.802.535-2.704 1.603-2.704 3.071 0 .934.259 1.6 1.031 2.269.644.534 1.543.8 2.574.8 1.03 0 2.06-.4 3.091-1.2l.128.8h2.831l-.256-1.334V11.22c0-2.535-1.416-3.736-4.378-3.736-2.96 0-4.506 1.2-4.506 3.47h2.833c0-.801.514-1.335 1.673-1.335M88.444 7.885h-2.832v9.743H88.7v-5.606c0-1.334.515-2.001 1.546-2.001.9 0 1.416.667 1.416 2.001v5.606h3.09v-5.606a7.704 7.704 0 00-.516-2.803c-.643-1.067-1.545-1.601-2.962-1.601-1.028 0-2.06.4-2.703 1.335l-.128-1.068zM98.871 10.42c0-.534.388-.8 1.16-.8.9 0 1.287.4 1.415 1.335h2.962l-.516-1.736c-.515-1.2-1.802-1.735-3.733-1.735-3.09 0-4.507 1.068-4.507 3.337 0 1.468 1.032 2.402 3.22 2.937h.9c1.158.266 1.802.667 1.802 1.201s-.514.8-1.544.8-1.674-.4-1.674-1.201v-.133h-2.96c0 2.402 1.544 3.603 4.891 3.603 2.834 0 4.377-1.067 4.377-3.337 0-1.6-1.159-2.669-3.346-3.069l-1.03-.267c-.901-.133-1.417-.4-1.417-.934"/>
+        <g transform="translate(104.545 7.417)">
+            <mask id="prefix__b" fill="#fff">
+                <use xlink:href="#prefix__a"/>
+            </mask>
+            <path fill="#ffffff" d="M5.14 6.074l1.932-.534v.802c0 1.334-.644 2.001-2.19 2.001-.772 0-1.286-.267-1.286-.935 0-.667.514-1.066 1.544-1.334m.516-3.87c.9 0 1.288.266 1.288.933 0 .401-.26.668-.903.802l-2.704.533C1.535 5.006.634 6.074.634 7.542c0 .934.257 1.601 1.03 2.27.644.533 1.545.8 2.575.8 1.03 0 2.06-.4 3.09-1.201l.129.8h2.832l-.258-1.334V3.805c0-2.536-1.417-3.737-4.376-3.737-2.834 0-4.377 1.201-4.506 3.47h2.832c0-.801.515-1.334 1.674-1.334" mask="url(#prefix__b)"/>
+        </g>
+        <path fill="#ffffff" d="M9.655 1.612c2.575 0 4.635.933 6.438 2.669 1.673 1.869 2.574 4.005 2.574 6.54 0 2.536-.9 4.672-2.574 6.54-1.803 1.736-3.863 2.67-6.309 2.67s-4.506-.934-6.307-2.67C1.803 15.493.902 13.357.902 10.821c0-2.535.9-4.671 2.575-6.54 1.801-1.736 3.861-2.67 6.178-2.67m7.08 2.003c-1.8-2.002-4.12-2.936-6.822-2.936-2.703 0-5.021.934-7.08 2.936C.901 5.616 0 8.018 0 10.821c0 2.937.902 5.205 2.832 7.207 1.932 2.002 4.249 2.937 6.952 2.937 2.704 0 5.02-.935 6.952-2.937 1.931-2.002 2.832-4.27 2.832-7.207 0-2.803-.9-5.205-2.832-7.207"/>
+        <path fill="#ffffff" d="M3.218 8.552l-.128.534-1.417-.4-.128.533c1.03.268 2.317.935 3.99 1.87 2.962 1.868 6.052 3.336 9.27 4.137l.901-.801h-.643c-1.932 0-3.476-.667-4.635-2.002a9.264 9.264 0 014.377-1.068l1.03.133.386-.533h-1.158l-2.704.134.129-.401h3.99l.387-.534h-4.12l.129-.267h4.248l.258-.4-4.249-.134.13-.4 4.376.133.386-.4-3.476-.267-3.475.266c-.515 1.602-1.545 2.404-3.09 2.404-.644 0-1.416-.268-2.318-.802l-.386-.267.13-.133 2.058.8.13-.266-4.378-1.87zM35.918 4.014L32.699 4.014 32.699 17.628 41.454 17.628 41.454 14.959 35.918 14.959zM51.11 7.885h-3.09v5.605c0 1.335-.515 2.003-1.545 2.003-.902 0-1.287-.668-1.287-2.003V7.885h-3.09v5.873c0 1.067.128 2.002.515 2.535.514 1.068 1.416 1.602 2.96 1.602 1.031 0 1.932-.4 2.704-1.201v.934h2.832V7.885z"/>
+    </g>
+</svg>
diff --git a/public/images/landing/mercedes.svg b/public/images/landing/mercedes.svg
new file mode 100644
index 0000000000..9a68862fcf
--- /dev/null
+++ b/public/images/landing/mercedes.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37" height="38" viewBox="0 0 37 38">
+    <defs>
+        <path id="prefix__a" d="M36.821 37.718L36.821 0 0.001 0 0.001 37.718z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <mask id="prefix__b" fill="#fff">
+            <use xlink:href="#prefix__a"/>
+        </mask>
+        <path fill="#ffffff" d="M36.036 15.66c-.04-.05-.066-.125-.1-.216-1.345-4.296-2.49-5.984-4.702-8.495-2.91-3.31-7.662-5.864-12.717-5.87-9.664 0-17.502 8.123-17.502 18.13 0 2.978.625 5.545 1.127 6.837.593 1.497 1.611 3.512 1.663 3.604a.517.517 0 01.055.239.698.698 0 01-.165-.2c-.294-.44-1.494-2.68-1.869-3.657-.811-2.13-1.414-4.453-1.414-6.892C.412 8.825 8.475.455 18.442.455c8.899 0 16.08 6.406 17.594 14.982.006.08.03.15 0 .224zM3.31 27.905c-.61-1.309-1.252-3.15-1.518-4.608-.004-.085-.017-.153.007-.23.048.059.067.124.104.225.42 1.338.78 2.537 1.734 4.345l-.327.268zm.334-.167l12.896-9.605-1.104-.65L3.95 27.376c-1.292-2.424-2.189-5.532-2.189-8.49 0-9.368 7.198-16.95 16.318-17.008l-2.352 15.148 1.098.661 1.478-15.81c.026-.198.155-.198.155 0l.089 16.672 2.618-1.594-2.505-15.08c8.96.25 16.388 7.732 16.388 16.982 0 2.981-.875 6.095-2.195 8.535l-11.476-9.903-1.106.654L32.61 27.41c.297.217.205.317-.113.135L18.642 19.27v3.101l13.888 5.496c-2.909 4.915-8.163 8.061-14.173 8.061-6.02 0-11.189-3.142-14.102-8.067l13.915-5.499V19.26L3.764 27.88c-.347.193-.436.087-.12-.143zm14.761 9.265c-6.916 0-12.342-3.724-14.926-8.843l.395-.152c.67 1.137 1.55 2.133 2.73 3.48 1.452 1.656 6.046 4.847 11.794 4.847 6.123.001 11.5-3.287 14.518-8.311.232-.067.308-.172.228-.381 1.383-2.522 2.32-5.69 2.32-8.785 0-1.952-.274-3.536-.713-4.954a20.473 20.473 0 00-.987-2.55.418.418 0 01-.066-.244.636.636 0 01.166.206c.267.508.863 1.744 1.144 2.549.378 1.079 1.058 2.566 1.058 4.993 0 9.925-7.845 18.15-17.66 18.145zm0-37.003C8.244-.005.001 8.441.001 18.857 0 29.27 8.237 37.716 18.404 37.718c10.171 0 18.417-8.442 18.417-18.861 0-10.41-8.243-18.858-18.417-18.858z" mask="url(#prefix__b)"/>
+    </g>
+</svg>
diff --git a/public/images/landing/nvidia.svg b/public/images/landing/nvidia.svg
new file mode 100644
index 0000000000..9246b63978
--- /dev/null
+++ b/public/images/landing/nvidia.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="86px" height="17px" viewBox="0 0 86 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>nvidia</title>
+    <g id="PrimeNG" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PrimeNG---Landing" transform="translate(-511.000000, -675.000000)" fill="#ffffff" fill-rule="nonzero">
+            <g id="section-brands" transform="translate(0.000000, 552.000000)">
+                <g id="nvidia" transform="translate(511.000000, 123.000000)">
+                    <path d="M83.5242786,15.0627397 L83.5242786,14.7155397 L83.7468786,14.7155397 C83.8686786,14.7155397 84.0352786,14.7253397 84.0352786,14.8737397 C84.0352786,15.0347397 83.9498786,15.0627397 83.8056786,15.0627397 L83.5242786,15.0627397 Z M83.5242786,15.3063397 L83.6726786,15.3063397 L84.0184786,15.9125397 L84.3992786,15.9125397 L84.0156786,15.2825397 C84.2144786,15.2685397 84.3768786,15.1747397 84.3768786,14.9087397 C84.3768786,14.5769398 84.1472786,14.4705398 83.7622786,14.4705398 L83.2036786,14.4705398 L83.2036786,15.9125397 L83.5242786,15.9125397 L83.5242786,15.3063397 Z M85.1482785,15.1943397 C85.1482785,14.3459398 84.4888786,13.8545398 83.7552786,13.8545398 C83.0160786,13.8545398 82.3566786,14.3459398 82.3566786,15.1943397 C82.3566786,16.0413397 83.0160786,16.5355397 83.7552786,16.5355397 C84.4888786,16.5355397 85.1482785,16.0413397 85.1482785,15.1943397 M84.7450786,15.1943397 C84.7450786,15.8117397 84.2928786,16.2275397 83.7552786,16.2275397 L83.7552786,16.2233397 C83.2036786,16.2275397 82.7584786,15.8117397 82.7584786,15.1943397 C82.7584786,14.5769398 83.2036786,14.1639398 83.7552786,14.1639398 C84.2928786,14.1639398 84.7450786,14.5769398 84.7450786,15.1943397" id="path4"></path>
+                    <path d="M34.0297994,0.845599986 L34.0311994,16.0607997 L38.3277993,16.0607997 L38.3277993,0.845599986 L34.0297994,0.845599986 Z M0.223999996,0.824599986 L0.223999996,16.0607997 L4.55979992,16.0607997 L4.55979992,4.49259992 L7.91839987,4.49259992 C9.02999985,4.49259992 9.82239983,4.76839992 10.3599998,5.34239991 C11.0389998,6.0661999 11.3161998,7.23379988 11.3161998,9.37159984 L11.3161998,16.0607997 L15.5175997,16.0607997 L15.5175997,7.64259987 C15.5175997,1.63379997 11.6871998,0.824599986 7.94079986,0.824599986 L0.223999996,0.824599986 Z M40.9499993,0.845599986 L40.9499993,16.0607997 L47.9191992,16.0607997 C51.6333991,16.0607997 52.8457991,15.4433997 54.1561991,14.0587998 C55.0829991,13.0871998 55.6807991,10.9521998 55.6807991,8.62259985 C55.6807991,6.48339989 55.1739991,4.57519992 54.2905991,3.38659994 C52.6987991,1.25999998 50.4041991,0.845599986 46.9811992,0.845599986 L40.9499993,0.845599986 Z M45.2115992,4.15799993 L47.0595992,4.15799993 C49.7391992,4.15799993 51.4737991,5.36339991 51.4737991,8.48539986 C51.4737991,11.6101998 49.7391992,12.8141998 47.0595992,12.8141998 L45.2115992,12.8141998 L45.2115992,4.15799993 Z M27.8347995,0.845599986 L24.2465996,12.9051998 L20.8109996,0.845599986 L16.1713997,0.845599986 L21.0797996,16.0607997 L27.2733995,16.0607997 L32.2209995,0.845599986 L27.8347995,0.845599986 Z M57.679999,16.0607997 L61.9793989,16.0607997 L61.9793989,0.845599986 L57.679999,0.845599986 L57.679999,16.0607997 Z M69.7283988,0.851199986 L63.7279989,16.0579997 L67.9643988,16.0579997 L68.9135988,13.3685998 L76.0157987,13.3685998 L76.9145987,16.0579997 L81.5149986,16.0579997 L75.4683987,0.851199986 L69.7283988,0.851199986 Z M72.5171988,3.62459994 L75.1211987,10.7491998 L69.8319988,10.7491998 L72.5171988,3.62459994 Z" id="path6"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/landing/placeholders/placeholder-component-feature.jpg b/public/images/landing/placeholders/placeholder-component-feature.jpg
new file mode 100644
index 0000000000..2052a45d6b
Binary files /dev/null and b/public/images/landing/placeholders/placeholder-component-feature.jpg differ
diff --git a/public/images/landing/placeholders/placeholder-features.jpg b/public/images/landing/placeholders/placeholder-features.jpg
new file mode 100644
index 0000000000..b19d0789d4
Binary files /dev/null and b/public/images/landing/placeholders/placeholder-features.jpg differ
diff --git a/public/images/landing/placeholders/placeholder-hero-image.jpg b/public/images/landing/placeholders/placeholder-hero-image.jpg
new file mode 100644
index 0000000000..04000df012
Binary files /dev/null and b/public/images/landing/placeholders/placeholder-hero-image.jpg differ
diff --git a/public/images/landing/placeholders/placeholder-templates.jpg b/public/images/landing/placeholders/placeholder-templates.jpg
new file mode 100644
index 0000000000..fe825ccfa9
Binary files /dev/null and b/public/images/landing/placeholders/placeholder-templates.jpg differ
diff --git a/public/images/landing/primeblocks.png b/public/images/landing/primeblocks.png
new file mode 100644
index 0000000000..a43a59b698
Binary files /dev/null and b/public/images/landing/primeblocks.png differ
diff --git a/public/images/landing/primeflex.png b/public/images/landing/primeflex.png
new file mode 100644
index 0000000000..9e30df4f6e
Binary files /dev/null and b/public/images/landing/primeflex.png differ
diff --git a/public/images/landing/primereact-logo.svg b/public/images/landing/primereact-logo.svg
new file mode 100644
index 0000000000..82c6473d9a
--- /dev/null
+++ b/public/images/landing/primereact-logo.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="175px" height="42px" viewBox="0 0 175 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>primereact-logo</title>
+    <defs>
+        <polygon id="path-1" points="2.82650061e-06 0.0528952515 38.5779416 0.0528952515 38.5779416 41.8150827 2.82650061e-06 41.8150827"></polygon>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="primereact-logo">
+            <g id="text-primereact" transform="translate(49.068002, 10.575000)" fill-rule="nonzero">
+                <path d="M0.0253800009,20.3127992 L0.0253800009,0.431121616 C0.0253800009,0.172245606 0.180705607,0.0169200006 0.439581616,0.0169200006 L6.65260585,0.0169200006 C9.08604034,0.0169200006 10.3804204,1.31130005 10.3804204,3.74473454 L10.3804204,10.0613092 C10.3804204,12.4688561 9.08604034,13.7891237 6.65260585,13.7891237 L3.54609373,13.7891237 L3.54609373,20.3127992 C3.54609373,20.5716752 3.41665573,20.7270008 3.13189212,20.7270008 L0.439581616,20.7270008 C0.180705607,20.7270008 0.0253800009,20.5716752 0.0253800009,20.3127992 Z M3.54609373,10.3719604 L5.82420262,10.3719604 C6.52316784,10.3719604 6.85970666,9.98364637 6.85970666,9.33645635 L6.85970666,4.46958737 C6.85970666,3.79650974 6.52316784,3.43408333 5.82420262,3.43408333 L3.54609373,3.43408333 L3.54609373,10.3719604 Z M23.3501085,3.74473454 L23.3501085,10.0613092 C23.3501085,11.7957784 22.7029184,12.9348329 21.4603136,13.4784725 L23.2465581,20.261024 C23.3242209,20.5716752 23.1688953,20.7270008 22.8841317,20.7270008 L20.1918212,20.7270008 C19.9329451,20.7270008 19.8035071,20.5975628 19.7517319,20.3645744 L18.0172627,13.7891237 L16.2310182,13.7891237 L16.2310182,20.3127992 C16.2310182,20.5716752 16.0756926,20.7270008 15.8168166,20.7270008 L13.1245061,20.7270008 C12.8656301,20.7270008 12.7103045,20.5716752 12.7103045,20.3127992 L12.7103045,0.431121616 C12.7103045,0.172245606 12.8656301,0.0169200006 13.1245061,0.0169200006 L19.6222939,0.0169200006 C22.0557284,0.0169200006 23.3501085,1.31130005 23.3501085,3.74473454 Z M16.2310182,10.3719604 L18.7938907,10.3719604 C19.4669683,10.3719604 19.8293947,10.009534 19.8293947,9.33645635 L19.8293947,4.46958737 C19.8293947,3.79650974 19.4669683,3.43408333 18.7938907,3.43408333 L16.2310182,3.43408333 L16.2310182,10.3719604 Z M26.3530702,0.0169200006 L29.0453807,0.0169200006 C29.3042567,0.0169200006 29.4595823,0.172245606 29.4595823,0.431121616 L29.4595823,20.3127992 C29.4595823,20.5716752 29.3042567,20.7270008 29.0453807,20.7270008 L26.3530702,20.7270008 C26.0683066,20.7270008 25.9388686,20.5716752 25.9388686,20.3127992 L25.9388686,0.431121616 C25.9388686,0.172245606 26.0683066,0.0169200006 26.3530702,0.0169200006 Z M42.8693596,0.0169200006 L46.2865229,0.0169200006 C46.6230617,0.0169200006 46.8042749,0.198133207 46.8042749,0.53467202 L46.8042749,20.2092488 C46.8042749,20.5457876 46.6230617,20.7270008 46.2865229,20.7270008 L43.878976,20.7270008 C43.5424372,20.7270008 43.361224,20.5457876 43.361224,20.2092488 L43.361224,8.55982832 L43.1800108,8.55982832 L40.6171383,20.261024 C40.5394755,20.5716752 40.3582623,20.7270008 40.0476111,20.7270008 L38.7791186,20.7270008 C38.4684674,20.7270008 38.2872542,20.5716752 38.2095914,20.261024 L35.6467189,8.55982832 L35.4655057,8.55982832 L35.4655057,20.2092488 C35.4655057,20.5457876 35.2842925,20.7270008 34.9477537,20.7270008 L32.5660944,20.7270008 C32.2295556,20.7270008 32.0483424,20.5457876 32.0483424,20.2092488 L32.0483424,0.53467202 C32.0483424,0.198133207 32.2295556,0.0169200006 32.5660944,0.0169200006 L35.9832577,0.0169200006 C36.293909,0.0169200006 36.4751222,0.172245606 36.552785,0.482896818 L39.4263087,13.3749221 L42.2998324,0.482896818 C42.3774952,0.172245606 42.5587084,0.0169200006 42.8693596,0.0169200006 Z M59.7221878,0.431121616 L59.7221878,3.01988171 C59.7221878,3.27875772 59.6186374,3.45997093 59.3079862,3.45997093 L52.836086,3.45997093 L52.836086,8.63749112 L57.7806177,8.63749112 C58.0394938,8.63749112 58.1948194,8.79281673 58.1948194,9.07758034 L58.1948194,11.6404528 C58.1948194,11.9252164 58.0394938,12.080542 57.7806177,12.080542 L52.836086,12.080542 L52.836086,17.3098374 L59.3079862,17.3098374 C59.6186374,17.3098374 59.7221878,17.4392754 59.7221878,17.7240391 L59.7221878,20.3127992 C59.7221878,20.5716752 59.6186374,20.7270008 59.3079862,20.7270008 L49.7813491,20.7270008 C49.5483606,20.7270008 49.393035,20.5716752 49.393035,20.3127992 L49.393035,0.431121616 C49.393035,0.172245606 49.5483606,0.0169200006 49.7813491,0.0169200006 L59.3079862,0.0169200006 C59.6186374,0.0169200006 59.7221878,0.172245606 59.7221878,0.431121616 Z" id="PRIME" fill="#FFFFFF"></path>
+                <path d="M72.8461863,3.74473454 L72.8461863,10.0613092 C72.8461863,11.7957784 72.1989963,12.9348329 70.9563914,13.4784725 L72.7426359,20.261024 C72.8202987,20.5716752 72.6649731,20.7270008 72.3802095,20.7270008 L69.687899,20.7270008 C69.429023,20.7270008 69.299585,20.5975628 69.2478098,20.3645744 L67.5133405,13.7891237 L65.727096,13.7891237 L65.727096,20.3127992 C65.727096,20.5716752 65.5717704,20.7270008 65.3128944,20.7270008 L62.6205839,20.7270008 C62.3617079,20.7270008 62.2063823,20.5716752 62.2063823,20.3127992 L62.2063823,0.431121616 C62.2063823,0.172245606 62.3617079,0.0169200006 62.6205839,0.0169200006 L69.1183718,0.0169200006 C71.5518063,0.0169200006 72.8461863,1.31130005 72.8461863,3.74473454 Z M65.727096,10.3719604 L68.2899685,10.3719604 C68.9630462,10.3719604 69.3254726,10.009534 69.3254726,9.33645635 L69.3254726,4.46958737 C69.3254726,3.79650974 68.9630462,3.43408333 68.2899685,3.43408333 L65.727096,3.43408333 L65.727096,10.3719604 Z M85.7640992,0.431121616 L85.7640992,3.01988171 C85.7640992,3.27875772 85.6605488,3.45997093 85.3498976,3.45997093 L78.8779973,3.45997093 L78.8779973,8.63749112 L83.8225291,8.63749112 C84.0814051,8.63749112 84.2367307,8.79281673 84.2367307,9.07758034 L84.2367307,11.6404528 C84.2367307,11.9252164 84.0814051,12.080542 83.8225291,12.080542 L78.8779973,12.080542 L78.8779973,17.3098374 L85.3498976,17.3098374 C85.6605488,17.3098374 85.7640992,17.4392754 85.7640992,17.7240391 L85.7640992,20.3127992 C85.7640992,20.5716752 85.6605488,20.7270008 85.3498976,20.7270008 L75.8232604,20.7270008 C75.590272,20.7270008 75.4349464,20.5716752 75.4349464,20.3127992 L75.4349464,0.431121616 C75.4349464,0.172245606 75.590272,0.0169200006 75.8232604,0.0169200006 L85.3498976,0.0169200006 C85.6605488,0.0169200006 85.7640992,0.172245606 85.7640992,0.431121616 Z M100.054055,20.7270008 L97.3099692,20.7270008 C97.0769808,20.7270008 96.9475428,20.5975628 96.8957676,20.3645744 L96.1709148,16.5849846 L91.5629218,16.5849846 L90.8639566,20.3645744 C90.8121814,20.5975628 90.6827434,20.7270008 90.449755,20.7270008 L87.6797817,20.7270008 C87.3950181,20.7270008 87.26558,20.5716752 87.3432428,20.2869116 L91.6405846,0.379346414 C91.6923598,0.120470404 91.8476854,0.0169200006 92.0806738,0.0169200006 L95.6790504,0.0169200006 C95.9120388,0.0169200006 96.0673644,0.120470404 96.1191396,0.379346414 L100.416481,20.2869116 C100.468257,20.5716752 100.364706,20.7270008 100.054055,20.7270008 Z M95.5237248,13.5820229 L93.8669183,4.54725017 L92.2101118,13.5820229 L95.5237248,13.5820229 Z M112.609541,3.74473454 L112.609541,6.54059544 C112.609541,6.79947145 112.454216,6.95479706 112.19534,6.95479706 L109.60658,6.95479706 C109.321816,6.95479706 109.192378,6.79947145 109.192378,6.54059544 L109.192378,4.46958737 C109.192378,3.79650974 108.829952,3.43408333 108.156874,3.43408333 L106.810719,3.43408333 C106.111754,3.43408333 105.775215,3.79650974 105.775215,4.46958737 L105.775215,16.2743334 C105.775215,16.9732986 106.137641,17.3098374 106.810719,17.3098374 L108.156874,17.3098374 C108.829952,17.3098374 109.192378,16.9732986 109.192378,16.2743334 L109.192378,14.2033253 C109.192378,13.9444493 109.321816,13.7891237 109.60658,13.7891237 L112.19534,13.7891237 C112.454216,13.7891237 112.609541,13.9444493 112.609541,14.2033253 L112.609541,16.9991862 C112.609541,19.4326207 111.289274,20.7270008 108.881727,20.7270008 L105.982316,20.7270008 C103.548881,20.7270008 102.228613,19.4326207 102.228613,16.9991862 L102.228613,3.74473454 C102.228613,1.31130005 103.548881,0.0169200006 105.982316,0.0169200006 L108.881727,0.0169200006 C111.289274,0.0169200006 112.609541,1.31130005 112.609541,3.74473454 Z M114.318123,0.0169200006 L123.84476,0.0169200006 C124.129524,0.0169200006 124.258962,0.172245606 124.258962,0.431121616 L124.258962,3.01988171 C124.258962,3.27875772 124.129524,3.43408333 123.84476,3.43408333 L120.841798,3.43408333 L120.841798,20.3127992 C120.841798,20.5975628 120.71236,20.7270008 120.427597,20.7270008 L117.735286,20.7270008 C117.47641,20.7270008 117.321085,20.5975628 117.321085,20.3127992 L117.321085,3.43408333 L114.318123,3.43408333 C114.059247,3.43408333 113.903921,3.27875772 113.903921,3.01988171 L113.903921,0.431121616 C113.903921,0.172245606 114.059247,0.0169200006 114.318123,0.0169200006 Z" id="REACT" fill="#03C4E8"></path>
+            </g>
+            <g id="primereact-icon">
+                <g id="base" transform="translate(0.000000, 0.002784)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="path-1"></g>
+                    <path d="M36.6914432,30.9054092 C35.871758,32.3036256 34.4037867,33.138424 32.7645294,33.138424 L27.746021,33.138424 L34.1820195,22.1585391 L36.6913301,26.4393239 C37.5110153,27.837596 37.5110153,29.5071372 36.6914432,30.9054092 Z M26.8921917,32.0936593 L26.8216423,32.2140377 L26.6737597,32.4663202 L25.8877665,33.8072984 L25.7524336,34.0381444 L24.119112,36.8246662 L23.6266225,37.6648098 L23.2797543,38.2565128 L23.2666959,38.2595195 L23.2588948,38.2727712 C22.4282428,39.6899742 20.9129558,40.0981028 19.2516518,40.0981028 C17.5926655,40.0981028 16.1343043,39.692257 15.3030305,38.2787846 L15.2768005,38.2722144 L14.4337119,36.8339647 L14.2225158,36.4737202 L5.12892844,20.9601554 L6.77836113,18.1463507 L6.77858726,18.1472973 L9.68796085,13.1864465 L9.6859258,13.1860568 L10.0161741,12.6227502 L10.0183223,12.62314 L12.3017391,8.72954833 L26.3108936,8.72470423 L33.4489948,20.9079283 L26.8306305,32.198726 L26.8921917,32.0936593 Z M23.1643766,38.446713 C23.1948463,38.3988846 23.2246376,38.3504994 23.2535244,38.3012789 C23.2246376,38.3504994 23.1948463,38.3988846 23.1643766,38.446713 Z M23.069915,38.5890848 C23.0920182,38.5570136 23.1136692,38.5244412 23.134981,38.4916462 C23.1136692,38.5244412 23.0920182,38.5570136 23.069915,38.5890848 Z M22.9692915,38.7293407 C22.9915078,38.6994967 23.0133849,38.6693185 23.0349794,38.6389177 C23.0133849,38.6693185 22.9915078,38.6994967 22.9692915,38.7293407 Z M22.8588884,38.8716011 C22.8842138,38.8402537 22.9092566,38.8086279 22.9338472,38.776501 C22.9092566,38.8086279 22.8842138,38.8402537 22.8588884,38.8716011 Z M22.6050121,39.1607432 C22.6826844,39.0796743 22.7575866,38.995376 22.8295493,38.9081267 C22.7575866,38.995376 22.6826844,39.0796743 22.6050121,39.1607432 Z M22.4860164,39.2802309 C22.5175037,39.2497186 22.5484821,39.2186496 22.5791214,39.1870795 C22.5484821,39.2186496 22.5175037,39.2497186 22.4860164,39.2802309 Z M22.3600676,39.3976583 C22.3914417,39.3695403 22.4223636,39.3408655 22.4529464,39.311801 C22.4223636,39.3408655 22.3914417,39.3695403 22.3600676,39.3976583 Z M22.2206646,39.5179811 C22.2570134,39.4879143 22.2929099,39.4572907 22.3284108,39.425999 C22.2929099,39.4572907 22.2570134,39.4879143 22.2206646,39.5179811 Z M21.9271042,39.7415331 C22.0212832,39.6758873 22.1129749,39.6064553 22.2021227,39.5335156 C22.1129749,39.6064553 22.0212267,39.6758316 21.9271042,39.7415331 Z M21.7870229,39.8352969 C21.8305509,39.8072346 21.8737399,39.7784484 21.9163635,39.7488828 C21.8737399,39.7784484 21.8305509,39.8072346 21.7870229,39.8352969 Z M21.6393099,39.9263324 C21.6812552,39.9015552 21.7226352,39.8761654 21.7637325,39.8501076 C21.7226352,39.8761654 21.6812552,39.9015552 21.6393099,39.9263324 Z M21.475599,40.0187042 C21.5233669,39.9930918 21.570626,39.9665328 21.6173763,39.93925 C21.570626,39.9665328 21.5233669,39.9930918 21.475599,40.0187042 Z M21.1538302,40.1751072 C21.2618025,40.1278912 21.3676832,40.0764436 21.4713027,40.0210428 C21.3676832,40.0764436 21.2618025,40.1278355 21.1538302,40.1751072 Z M17.0759247,40.0210428 C17.1796573,40.0764436 17.285538,40.1278912 17.3935103,40.1751628 C17.285538,40.1278355 17.1796573,40.0764436 17.0759247,40.0210428 Z M16.9299077,39.93925 C16.976771,39.9665328 17.0240302,39.9931475 17.0718545,40.0187599 C17.0240302,39.9931475 16.976771,39.9665328 16.9299077,39.93925 Z M16.783721,39.8501633 C16.8247053,39.8761654 16.8660853,39.9015552 16.9079175,39.9263324 C16.8660853,39.9015552 16.8247053,39.8761654 16.783721,39.8501633 Z M16.6309769,39.7488828 C16.6736006,39.7784484 16.7166764,39.8072346 16.7602611,39.8352969 C16.7166764,39.8072346 16.6736006,39.7784484 16.6309769,39.7488828 Z M16.3452743,39.5335712 C16.4343656,39.6064553 16.5260573,39.6758873 16.6201797,39.7415331 C16.5260573,39.6758316 16.4343656,39.6064553 16.3452743,39.5335712 Z M16.2189297,39.425999 C16.2543175,39.4572351 16.2902141,39.4878586 16.3265063,39.5179254 C16.2902141,39.4878586 16.2543175,39.4572351 16.2189297,39.425999 Z M16.0943941,39.311801 C16.1249768,39.3409212 16.1558987,39.3695403 16.1872164,39.3976583 C16.1558987,39.3695403 16.1249768,39.3409212 16.0943941,39.311801 Z M15.9684452,39.1873579 C15.9989714,39.2188167 16.0298368,39.2497743 16.061211,39.2801752 C16.0298368,39.2497743 15.9989714,39.2188167 15.9684452,39.1873579 Z M15.7177346,38.9081267 C15.7896973,38.995376 15.864543,39.079563 15.9421587,39.1606319 C15.864543,39.079563 15.7896973,38.995376 15.7177346,38.9081267 Z M15.6135498,38.7765567 C15.6380838,38.8086279 15.6630701,38.8402537 15.688339,38.8714897 C15.6630701,38.8402537 15.6380838,38.8086279 15.6135498,38.7765567 Z M15.5124176,38.639029 C15.5339555,38.6694299 15.5558327,38.6994967 15.5779924,38.729285 C15.5558327,38.6994967 15.5339555,38.6694299 15.5124176,38.639029 Z M15.4123595,38.4917019 C15.4336713,38.5244412 15.4552658,38.5569579 15.477369,38.5889734 C15.4552658,38.5569579 15.4336713,38.5244412 15.4123595,38.4917019 Z M15.2938161,38.3012789 C15.3227029,38.3504994 15.3525507,38.3988846 15.3829639,38.446713 C15.3525507,38.3988846 15.3227029,38.3504994 15.2938161,38.3012789 Z M5.7713355,33.138424 C4.14728478,33.138424 2.69293715,32.3114207 1.88088352,30.9260662 C1.06888643,29.5407674 1.06888643,27.8866494 1.88088352,26.5012949 L4.39584725,22.2108775 L10.8012629,33.138424 L5.7713355,33.138424 Z M1.88659306,15.4287041 C1.06696441,14.030432 1.06696441,12.3608352 1.88659306,10.9626188 C2.70616517,9.56434675 4.17413653,8.72954833 5.81339381,8.72954833 L10.8319587,8.72954833 L4.39584725,19.7094889 L1.88659306,15.4287041 Z M15.3245118,3.56674907 C16.1551638,2.14960177 17.6429773,1.30361182 19.3043378,1.30361182 C20.9656418,1.30361182 22.4534552,2.14960177 23.2840506,3.56674907 L25.5772471,7.47888185 L13.0313154,7.47888185 L15.3245118,3.56674907 Z M32.8065877,8.72954833 C34.430695,8.72954833 35.8850991,9.55660734 36.6970962,10.9419618 C37.5091498,12.3272049 37.5090933,13.981323 36.6970962,15.3666775 L34.182076,19.6572061 L27.7766603,8.72954833 L32.8065877,8.72954833 Z M34.9152137,20.9078169 L37.796718,15.9920107 C38.83834,14.21512 38.83834,12.0934636 37.7967745,10.3165729 C36.7552091,8.53973789 34.8897187,7.47888185 32.8065877,7.47888185 L27.0435226,7.47888185 L24.3837855,2.94141584 C23.3235651,1.13273232 21.4248351,0.0528896836 19.3043378,0.0528896836 C17.1840666,0.0528896836 15.2849408,1.13284368 14.2248335,2.94141584 L11.5650964,7.47888185 L5.81339381,7.47888185 C3.71511283,7.47888185 1.83599869,8.54742161 0.7868582,10.3372856 C-0.262282298,12.1270938 -0.262282298,14.264229 0.7868582,16.0540373 L3.66270951,20.9601554 L0.781205196,25.8760173 C-0.260360277,27.6528524 -0.260360277,29.7745087 0.781205196,31.5514551 C1.82277067,33.3282901 3.68826107,34.3890905 5.7713355,34.3890905 L11.5344007,34.3890905 L14.1941377,38.9266122 C15.2543581,40.7352957 17.1532577,41.8150827 19.2736985,41.8150827 C21.3941393,41.8150827 23.2929824,40.7352957 24.3530897,38.9266122 L27.0128833,34.3890905 L32.7645294,34.3890905 C34.8628104,34.3890905 36.741981,33.3205507 37.7911216,31.5306868 C38.8402055,29.7409342 38.8402055,27.6038546 37.7910085,25.8140464 L34.9152137,20.9078169 Z" id="bg-base" fill="#03C4E8" fill-rule="nonzero" mask="url(#mask-2)"></path>
+                </g>
+                <g id="head" transform="translate(5.703750, 8.723077)" fill="#03C4E8">
+                    <polygon id="chick-right" fill-rule="nonzero" points="20.4304883 14.1833229 18.2672601 13.7105455 19.9497709 16.0744327 19.9497709 23.4024828 25.2796293 18.6747085 25.7183793 10.6374922 23.0744338 11.5830471"></polygon>
+                    <polygon id="chick-left" fill-rule="nonzero" transform="translate(5.408070, 17.019988) scale(-1, 1) translate(-5.408070, -17.019988) " points="3.84573896 14.1833229 1.6825108 13.7105455 3.36502159 16.0744327 3.36502159 23.4024828 8.69488006 18.6747085 9.13363004 10.6374922 6.4896845 11.5830471"></polygon>
+                    <polygon id="mask" points="8.1721953 16.5472101 10.0950648 13.7105455 11.2968582 14.4197117 16.1040319 14.4197117 17.3058253 13.7105455 19.2286948 16.5472101 19.2286948 27.1847023 16.9815319 31.4030756 9.98060827 31.4030756 8.1721953 27.1847023"></polygon>
+                    <polygon id="bottom-chick-right" fill-rule="nonzero" points="19.9497709 27.8938684 23.0744338 24.8208151 23.0744338 21.7477618 19.9497709 24.3480377"></polygon>
+                    <polygon id="bottom-chick-left" fill-rule="nonzero" transform="translate(5.888788, 24.820815) scale(-1, 1) translate(-5.888788, -24.820815) " points="4.32645634 27.8938684 7.45111924 24.8208151 7.45111924 21.7477618 4.32645634 24.3480377"></polygon>
+                    <path d="M16.825108,0 L18.7479775,4.4913856 L15.8636732,13.4741568 L14.1811624,13.4741568 L14.1811624,0 L16.825108,0 Z M13.2197277,13.4741568 L11.7775756,13.4741568 L8.65291267,4.4913856 L10.5757822,0 L13.2197277,0 L13.2197277,13.4741568 Z"></path>
+                    <polygon id="head-left" fill-rule="nonzero" points="11.7775756 13.4741568 1.44215211 9.69193734 0 3.78221945 8.89327136 4.4913856 12.0179343 13.4741568"></polygon>
+                    <polygon id="head-right" fill-rule="nonzero" transform="translate(21.632282, 8.628188) scale(-1, 1) translate(-21.632282, -8.628188) " points="27.4008901 13.4741568 17.0654667 9.69193734 15.6233145 3.78221945 24.7569446 4.4913856 27.6412488 13.4741568"></polygon>
+                    <polygon id="ear-right" fill-rule="nonzero" points="19.2286948 3.78221945 23.8374772 3.30944202 20.9112056 0 17.546184 0"></polygon>
+                    <polygon id="ear-left" fill-rule="nonzero" transform="translate(6.709059, 1.891110) scale(-1, 1) translate(-6.709059, -1.891110) " points="5.24592369 3.78221945 9.8547061 3.30944202 6.92843448 0 3.56341289 0"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/landing/sap.svg b/public/images/landing/sap.svg
new file mode 100644
index 0000000000..a9d7893819
--- /dev/null
+++ b/public/images/landing/sap.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="45" viewBox="0 0 90 45">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#20272A" fill-rule="nonzero" d="M0 0L0 44.415 45.371 44.415 89.781.005 89.781.005 0 .005zM57.469 39.875v3.313h.5V41.75h.562l.907 1.438H60l-.969-1.438c.484-.06.875-.342.875-.938 0-.652-.4-.937-1.187-.937h-1.25zm.5.438h.687c.338 0 .719.054.719.468 0 .517-.386.563-.813.563h-.593v-1.032zm.625-1.657c-1.586 0-2.938 1.222-2.938 2.875 0 1.665 1.352 2.907 2.938 2.907a2.868 2.868 0 002.875-2.907c0-1.653-1.311-2.875-2.875-2.875zm0 .469c1.294 0 2.312 1.045 2.312 2.406 0 1.384-1.018 2.407-2.312 2.407-1.316 0-2.375-1.023-2.375-2.407 0-1.36 1.059-2.406 2.375-2.406z"/>
+        <path fill="#FFF" d="M53.797 21.252h-1.946v-7.117h1.946c2.598 0 4.666.856 4.666 3.513 0 2.744-2.068 3.604-4.666 3.604M32.852 26.34a8.083 8.083 0 01-2.831-.502l2.803-8.84h.06l2.745 8.864a8.251 8.251 0 01-2.774.478M53.281 8.353h-8.837v21.013l-7.72-21.013h-7.652l-6.596 17.568c-.697-4.428-5.284-5.961-8.89-7.104-2.377-.765-4.907-1.889-4.884-3.134.02-1.018 1.359-1.962 4-1.821 1.78.09 3.35.234 6.467 1.741l3.07-5.348C19.395 8.802 15.454 7.89 12.23 7.883h-.02c-3.761 0-6.895 1.226-8.839 3.233-1.351 1.404-2.082 3.18-2.115 5.157-.05 2.708.947 4.63 3.034 6.167 1.766 1.294 4.019 2.127 6.009 2.751 2.455.757 4.459 1.418 4.436 2.827-.02.513-.211.994-.582 1.374-.611.635-1.55.87-2.849.899-2.504.05-4.361-.34-7.319-2.088l-2.729 5.423a20.39 20.39 0 0010.003 2.661h.461c3.1-.06 5.604-.945 7.605-2.553l.324-.283-.884 2.376h8.025l1.348-4.099c1.41.477 3.016.745 4.716.745 1.659 0 3.224-.25 4.609-.706l1.296 4.06h13.094v-8.49h2.857c6.9 0 10.986-3.512 10.986-9.406 0-6.56-3.968-9.569-12.416-9.569"/>
+    </g>
+</svg>
diff --git a/public/showcase/resources/images/layouts/apollo-react.jpg b/public/images/landing/templates/apollo-react.jpg
similarity index 100%
rename from public/showcase/resources/images/layouts/apollo-react.jpg
rename to public/images/landing/templates/apollo-react.jpg
diff --git a/public/showcase/resources/images/layouts/avalon-react.jpg b/public/images/landing/templates/avalon-react.jpg
similarity index 100%
rename from public/showcase/resources/images/layouts/avalon-react.jpg
rename to public/images/landing/templates/avalon-react.jpg
diff --git a/public/showcase/resources/images/layouts/babylon-react.jpg b/public/images/landing/templates/babylon-react.jpg
similarity index 100%
rename from public/showcase/resources/images/layouts/babylon-react.jpg
rename to public/images/landing/templates/babylon-react.jpg
diff --git a/public/images/landing/templates/diamond-react.jpg b/public/images/landing/templates/diamond-react.jpg
new file mode 100644
index 0000000000..fc8d4fbf8f
Binary files /dev/null and b/public/images/landing/templates/diamond-react.jpg differ
diff --git a/public/showcase/resources/images/layouts/roma-react.jpg b/public/images/landing/templates/roma-react.jpg
similarity index 100%
rename from public/showcase/resources/images/layouts/roma-react.jpg
rename to public/images/landing/templates/roma-react.jpg
diff --git a/public/showcase/resources/images/layouts/themeswitcher-apollo.png b/public/images/landing/templates/templates-small/apollo-react.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-apollo.png
rename to public/images/landing/templates/templates-small/apollo-react.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-avalon.png b/public/images/landing/templates/templates-small/avalon-react.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-avalon.png
rename to public/images/landing/templates/templates-small/avalon-react.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-babylon.png b/public/images/landing/templates/templates-small/babylon-react.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-babylon.png
rename to public/images/landing/templates/templates-small/babylon-react.png
diff --git a/public/images/landing/templates/templates-small/diamond-react.png b/public/images/landing/templates/templates-small/diamond-react.png
new file mode 100644
index 0000000000..c2a39aae58
Binary files /dev/null and b/public/images/landing/templates/templates-small/diamond-react.png differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-roma.jpg b/public/images/landing/templates/templates-small/roma-react.jpg
old mode 100755
new mode 100644
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-roma.jpg
rename to public/images/landing/templates/templates-small/roma-react.jpg
diff --git a/public/images/landing/templates/templates-small/ultima-react.png b/public/images/landing/templates/templates-small/ultima-react.png
new file mode 100644
index 0000000000..32c59ff5ba
Binary files /dev/null and b/public/images/landing/templates/templates-small/ultima-react.png differ
diff --git a/public/showcase/resources/images/layouts/ultima-react.jpg b/public/images/landing/templates/ultima-react.jpg
similarity index 100%
rename from public/showcase/resources/images/layouts/ultima-react.jpg
rename to public/images/landing/templates/ultima-react.jpg
diff --git a/public/images/landing/twitter.png b/public/images/landing/twitter.png
new file mode 100755
index 0000000000..ad31890ffb
Binary files /dev/null and b/public/images/landing/twitter.png differ
diff --git a/public/images/landing/unicredit.svg b/public/images/landing/unicredit.svg
new file mode 100644
index 0000000000..17b32ce388
--- /dev/null
+++ b/public/images/landing/unicredit.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="27" viewBox="0 0 116 27">
+    <defs>
+        <path id="prefix__a" d="M0.153 25.65L8.785 25.65 8.785 0.206 0.153 0.206z"/>
+        <path id="prefix__c" d="M0.073 20.25L8.995 20.25 8.995 0.354 0.073 0.354 0.073 20.25z"/>
+        <path id="prefix__e" d="M16.625 0.174L0.124 0.174 0.124 27 16.625 27z"/>
+        <path id="prefix__g" d="M0 25.65L16.509 25.65 16.509 0.206 0 0.206 0 25.65z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(106.978)">
+            <mask id="prefix__b" fill="#fff">
+                <use xlink:href="#prefix__a"/>
+            </mask>
+            <path fill="#ffffff" d="M5.877.206c-2.146 0-3.896 1.91-3.896 4.256v2.283H.153v3.616H1.98V21.1c0 2.934 1.673 4.55 4.71 4.55 1.11 0 1.912-.354 2.094-.444v-3.725c-.292.11-.77.242-1.088.242-1.22 0-1.592-.372-1.592-1.593v-9.77h2.68V6.745h-2.68V.206h-.228z" mask="url(#prefix__b)"/>
+        </g>
+        <path fill="#ffffff" d="M93.741 23.953H91.98c-2.662 0-3.956-2.029-3.956-6.201 0-3.011.735-6.601 4.237-6.601a5.51 5.51 0 011.481.19v12.612zM97.744 1.35c-2.224 0-4.034 1.93-4.034 4.3v3.037a8.968 8.968 0 00-2.326-.284c-4.621 0-7.606 3.761-7.606 9.581 0 5.775 2.867 8.976 8.075 9.016.203 0 5.204.002 6.103-.064V1.35h-.212zM71.135 16.118c.012-3.353 1.18-5.017 3.654-5.095 1.167-.036 3.694.122 3.833 4.025l-7.487 1.07zm11.354.784c0-5.68-2.704-8.802-7.54-8.802-4.915 0-7.927 3.597-7.927 9.397 0 5.951 3.231 9.503 8.643 9.503 2.992 0 5.087-.725 6.218-1.34v-3.74c-1.122.817-2.685 1.827-5.78 1.827-2.793 0-4.327-1.504-4.7-4.574l11.086-1.548v-.723z"/>
+        <g transform="translate(58 6.75)">
+            <mask id="prefix__d" fill="#fff">
+                <use xlink:href="#prefix__c"/>
+            </mask>
+            <path fill="#ffffff" d="M.073 1.871V20.25h.231c2.319 0 4.198-2.006 4.198-4.472V4.079c.92-.5 2.943-.875 4.493.282V.484C4.562.047 2.247.768.073 1.87" mask="url(#prefix__d)"/>
+        </g>
+        <g transform="translate(39.956)">
+            <mask id="prefix__f" fill="#fff">
+                <use xlink:href="#prefix__e"/>
+            </mask>
+            <path fill="#ffffff" d="M.124 13.517C.124 20.217 3.848 27 10.966 27c2.365 0 4.38-.544 5.66-1.556v-4.589c-1.038 1.494-2.77 2.09-4.67 2.09-4.332 0-7.243-4.895-7.243-9.465 0-4.556 2.77-9.472 7.242-9.472 2.266 0 3.686.97 4.67 2.344V1.725C15 .661 13.076.174 11.004.174 3.86.174.124 6.886.124 13.517" mask="url(#prefix__f)"/>
+        </g>
+        <path fill="#ffffff" d="M34.822 7.104V27h.256c2.553 0 4.628-2.003 4.628-4.465V7.105h-4.884zM34.8 3.39c0 1.108 1.156 2.01 2.578 2.01 1.446 0 2.578-.883 2.578-2.01 0-1.144-1.132-2.04-2.578-2.04-1.422 0-2.578.915-2.578 2.04"/>
+        <mask id="prefix__h" fill="#fff">
+            <use xlink:href="#prefix__g"/>
+        </mask>
+        <path fill="#ffffff" d="M16.284.206c-2.253 0-4.087 1.847-4.087 4.117v14.103c0 2.3-1.947 3.542-3.779 3.542-1.873 0-3.811-1.325-3.811-3.542V.206h-.299C1.932.206 0 2.153 0 4.546v13.913c0 4.1 3.549 7.191 8.255 7.191 4.706 0 8.254-3.091 8.254-7.191V.206h-.225z" mask="url(#prefix__h)"/>
+        <path fill="#ffffff" d="M18.044 9.47V27h4.381V11.52c.72-.277 1.365-.43 2.498-.43 2.411 0 2.917 1.495 2.917 2.749l-.003 8.943c0 2.324 1.878 4.218 4.167 4.218h.218V13.774c0-2.12-.927-5.674-7.137-5.674-2.782 0-5.158.472-7.04 1.37"/>
+        <g fill="#ffffff">
+            <path d="M.3.354V20.25h.239c2.382 0 4.32-2.003 4.32-4.465V.355H.299z" transform="translate(100.533 6.75)"/>
+        </g>
+        <path fill="#ffffff" d="M100.533 3.39c0 1.108 1.157 2.01 2.58 2.01 1.445 0 2.576-.883 2.576-2.01 0-1.144-1.131-2.04-2.577-2.04-1.422 0-2.579.915-2.579 2.04"/>
+    </g>
+</svg>
diff --git a/public/images/landing/verizon.svg b/public/images/landing/verizon.svg
new file mode 100644
index 0000000000..c1ff0798b6
--- /dev/null
+++ b/public/images/landing/verizon.svg
@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="17" viewBox="0 0 102 17">
+    <defs>
+        <path id="prefix__a" d="M5.893 7.51L5.893 0.359 0.361 0.359 0.361 7.51 5.893 7.51z"/>
+        <path id="prefix__c" d="M0 0.551L0 9.838 9.807 9.838 9.807 0.551 0 0.551z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#ffffff" d="M64.711 8.075L64.769 8.075 65.18 13.347 66.295 13.347 69.232 6.569 68.175 6.569 66.002 11.903 65.65 6.569 64.417 6.569 62.303 11.903 61.949 6.569 60.776 6.569 61.481 13.347 62.597 13.347zM71.23 5.377L71.23 5.377 71.463 4.059 70.406 4.059 70.172 5.377zM71.051 6.568L71.051 6.568 69.995 6.568 68.878 13.346 69.937 13.346z"/>
+        <g>
+            <path fill="#ffffff" d="M1.766 5.885c.176-1.003.94-1.82 1.938-1.82h.354l.232-1.19h-.293c-.821 0-1.467.5-1.994 1.316l.175-1.13h-1L.006 9.837h1.116l.645-3.953zM4.936 5.885c.179-.942.94-1.82 1.763-1.946V2.937c-1.701.25-2.702 1.82-3.052 3.702-.296 1.943.527 3.387 2.288 3.387.295 0 .588 0 .764-.061V8.96c-.118.062-.294.062-.469.062-1.176 0-1.704-.815-1.469-2.195H6.7v-.942H4.936zM6.7 9.965V8.96c.765-.19 1.293-.817 1.41-1.256h1.056c-.058.315-.53 1.318-1.409 1.883-.236.126-.529.313-1.057.378zm0-6.026c.118-.062.236-.062.354-.062 1.29 0 1.525 1.005 1.407 2.008H6.7v.942H9.4c.059-.378.118-.753.118-1.067v-.44c-.06-1.505-.764-2.446-2.173-2.446-.235 0-.41 0-.646.063v1.002zM13.921 5.885c.179-.942.94-1.82 1.822-1.946V2.937c-1.762.25-2.762 1.82-3.055 3.702-.351 1.943.471 3.387 2.29 3.387.293 0 .529 0 .765-.061V8.96c-.177.062-.294.062-.472.062-1.232 0-1.7-.815-1.468-2.195h1.94v-.942h-1.822zm1.822 4.08V8.96c.762-.19 1.29-.817 1.408-1.256h1.058c-.118.315-.529 1.318-1.468 1.883-.236.126-.529.313-.998.378zm0-6.026c.057-.062.176-.062.293-.062 1.29 0 1.527 1.005 1.408 2.008h-1.701v.942h2.7c.06-.378.06-.753.117-1.067v-.44c-.058-1.505-.762-2.446-2.23-2.446-.176 0-.411 0-.587.063v1.002zM12.57.551L11.513.551 9.987 9.839 11.045 9.839zM24.374 5.006c.06-.376.177-2.132-2.055-2.132-1.292 0-2.526.626-2.82 2.132-.116.942.354 1.444 1.234 1.694l1.174.314c.881.25 1.176.44 1.116.942-.118.752-.88 1.066-1.643 1.066-1.527 0-1.527-.816-1.47-1.38h-1.056c-.059.816-.176 2.384 2.35 2.384 1.468 0 2.7-.815 2.935-2.258.117-.88-.234-1.444-1.527-1.757l-.997-.314c-.822-.189-1.115-.314-1-.88.118-.878 1.058-1.002 1.411-1.002 1.35 0 1.35.753 1.29 1.191h1.058z" transform="translate(71.4 3.508)"/>
+            <g transform="translate(71.4 3.508) translate(24.323 2.515)">
+                <mask id="prefix__b" fill="#fff">
+                    <use xlink:href="#prefix__a"/>
+                </mask>
+                <path fill="#ffffff" d="M5.865 2.49C5.922 2.116 6.101.36 3.81.36c-1.233 0-2.527.626-2.76 2.132-.177.941.351 1.444 1.173 1.693l1.176.315c.88.25 1.233.44 1.115.941-.119.752-.881 1.067-1.643 1.067-1.47 0-1.47-.816-1.47-1.38H.404C.287 5.944.227 7.51 2.753 7.51c1.407 0 2.641-.815 2.876-2.257.118-.88-.235-1.444-1.469-1.757l-1.054-.314c-.764-.189-1.118-.315-1-.88C2.223 1.423 3.222 1.3 3.518 1.3c1.35 0 1.407.753 1.35 1.192h.997z" mask="url(#prefix__b)"/>
+            </g>
+        </g>
+        <path fill="#ffffff" d="M31.709 4.059L31.298 6.758 35.584 6.758 30.065 14.538 29.712 16.923 38.346 16.923 58.31 16.923 58.721 15.07 34.057 14.161 39.578 6.382 39.989 4.059z"/>
+        <g>
+            <path fill="#ffffff" d="M29.361 13.192L29.361 13.192 25.895 13.192 27.421 3.905 30.887 3.905zM27.6 2.713L27.6 2.713 28.067.077 31.532.077 31.062 2.713z" transform="translate(0 .154)"/>
+            <g transform="translate(0 .154) translate(0 3.354)">
+                <mask id="prefix__d" fill="#fff">
+                    <use xlink:href="#prefix__c"/>
+                </mask>
+                <path fill="#ffffff" d="M1.466 9.838L0 0.551 3.463 0.551 3.993 6.387 6.517 0.551 9.807 0.551 5.343 9.838z" mask="url(#prefix__d)"/>
+            </g>
+            <path fill="#ffffff" d="M49.384 13.192l1.526-9.287h3.172l-.234 1.505c.94-1.129 1.937-1.757 3.229-1.757 2.29 0 3.172 1.444 2.7 3.954l-.88 5.585h-3.466l.765-4.956c.174-.878.06-1.695-.881-1.695-1.057 0-1.467.69-1.703 1.882l-.764 4.77h-3.464zM18.79 13.192l1.527-9.287h3.17l-.35 1.82h.057c.704-1.38 1.704-2.072 2.995-2.072.117 0 .292.063.41.063l-.585 3.642c-.237-.066-.471-.127-.648-.127-1.408 0-2.23.753-2.584 2.762l-.528 3.2H18.79zM44.569 6.165c-.881.25-1.292 1.38-1.467 2.258-.295 1.757.233 2.574 1.115 2.574.118 0 .236-.063.352-.063v2.445c-.295.063-.587.063-.94.063-2.818 0-4.698-1.63-4.168-4.83.467-2.95 2.524-4.644 5.108-4.896v2.449zm.47-.063c-.175 0-.293 0-.47.063V3.716c.234-.063.47-.063.645-.063 3.113 0 4.7 1.946 4.228 4.77-.527 3.013-2.466 4.644-4.873 4.956v-2.445c.763-.189 1.291-1.004 1.527-2.511.233-1.38-.178-2.385-1.057-2.321zM12.33 7.481h1.586v1.884h-1.88c-.175 1.128.472 1.819 1.41 1.819.177 0 .295 0 .47-.062v2.258c-.353.062-.704.062-1.058.062-2.817 0-4.696-1.693-4.169-4.83.47-2.824 2.644-4.707 5.227-4.896V5.85c-.88.125-1.408.753-1.587 1.631zm1.586 5.899v-2.258a1.84 1.84 0 00.94-.754h3.347c-.822 1.946-2.584 2.76-4.287 3.012zm0-5.899h1.586c.117-.878-.47-1.63-1.293-1.63h-.293V3.715c.176-.062.352-.062.529-.062 3.23 0 4.814 2.32 4.17 5.711h-4.7V7.481z" transform="translate(0 .154)"/>
+        </g>
+    </g>
+</svg>
diff --git a/public/showcase/resources/images/home/viacom.svg b/public/images/landing/viacom.svg
similarity index 79%
rename from public/showcase/resources/images/home/viacom.svg
rename to public/images/landing/viacom.svg
index 1bc39006e6..c0f9911fcd 100644
--- a/public/showcase/resources/images/home/viacom.svg
+++ b/public/images/landing/viacom.svg
@@ -1,18 +1,18 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="105" height="16" viewBox="0 0 105 16">
     <defs>
-        <path id="a" d="M0 0h104.866v15.853H0z"/>
-        <path id="c" d="M0 16.044V.014h105.04v16.03"/>
+        <path id="prefix__a" d="M0 0L104.866 0 104.866 15.853 0 15.853z"/>
+        <path id="prefix__c" d="M0 16.044L0 0.013 105.039 0.013 105.039 16.044"/>
     </defs>
     <g fill="none" fill-rule="evenodd" transform="matrix(1 0 0 -1 .01 15.917)">
-        <mask id="b" fill="#fff">
-            <use xlink:href="#a"/>
+        <mask id="prefix__b" fill="#fff">
+            <use xlink:href="#prefix__a"/>
         </mask>
-        <g mask="url(#b)">
+        <g mask="url(#prefix__b)">
             <g transform="translate(0 -.191)">
-                <mask id="d" fill="#fff">
-                    <use xlink:href="#c"/>
+                <mask id="prefix__d" fill="#fff">
+                    <use xlink:href="#prefix__c"/>
                 </mask>
-                <g fill="#FFF" fill-rule="nonzero" mask="url(#d)">
+                <g fill="#ffffff" fill-rule="nonzero" mask="url(#prefix__d)">
                     <path d="M19.954 15.898V2.211c0-1.068.64-1.842 2.048-1.842h2.22v15.529h-4.268zM93.709 4.764s-2.691 7.555-3.203 8.978c-.319.963-.788 2.156-2.987 2.156h-5.016V.369h1.687c1.3 0 2.111.565 2.111 1.884v10.84h.065L91.254.37h4.566l4.887 12.725h.065V2.232c0-1.089.598-1.863 2.111-1.863h2.114v15.529h-4.717c-1.664 0-2.688-.46-3.2-1.905l-3.286-9.229h-.085zM9.113 4.618s-3.671 9.417-3.885 9.961c-.277.733-.661 1.319-2.07 1.319H0L6.51.369h4.737l6.743 15.529h-2.795c-1.195 0-1.665-.502-1.964-1.256L9.177 4.618h-.064zm46.692 8.015h2.177c1.559 0 2.477.565 2.477 1.946v1.319h-6.19c-5.163 0-7.64-2.993-7.64-7.765 0-5.943 3.777-7.764 7.64-7.764h6.19v1.34c0 1.36-.961 1.925-2.37 1.925h-2.284c-2.452 0-4.736.858-4.736 4.5 0 3.16 1.73 4.5 4.736 4.5zM39.223 6.187c0-1.548-.725-2.762-2.859-2.762h-2.219c-1.558 0-2.474.418-2.474 1.653 0 1.193.853 1.674 2.474 1.674h5.078v-.565zm-2.068 9.711h-8.73v-1.193c0-1.046.554-2.072 2.07-2.072h5.57c2.348 0 3.158-.753 3.158-2.574v-.272h-5.888c-4.398 0-5.998-1.988-5.998-4.688 0-3.286 2.243-4.73 5.998-4.73h3.925c5.144 0 6.253 2.532 6.253 5.86v3.85c0 3.6-1.365 5.819-6.358 5.819zM70.447 3.466c2.774 0 4.395 1.884 4.395 4.667 0 2.951-1.73 4.668-4.395 4.668-2.839 0-4.44-1.863-4.44-4.668 0-2.678 1.559-4.667 4.44-4.667zm0 12.6c5.183 0 8.876-2.763 8.876-7.933 0-4.939-3.414-7.952-8.876-7.952-5.336 0-8.9 2.888-8.9 7.952 0 5.002 3.52 7.932 8.9 7.932z"/>
                 </g>
             </g>
diff --git a/public/images/landing/vw.svg b/public/images/landing/vw.svg
new file mode 100644
index 0000000000..6a76759c64
--- /dev/null
+++ b/public/images/landing/vw.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="39" height="40" viewBox="0 0 39 40">
+    <g fill="#ffffff" fill-rule="evenodd">
+        <path d="M23.073 5.825a14.39 14.39 0 00-3.709-.487c-1.255 0-2.47.168-3.628.47l3.677 10.299 3.66-10.282zM33.857 20.07c0-1.837-.31-3.592-.915-5.216l-6.897 18.268a14.782 14.782 0 007.812-13.053"/>
+        <path d="M26.66 7.338l-4.253 11.876H16.421L12.153 7.287a14.726 14.726 0 00-4.098 3.557l6.062 15.953 2.22-5.827h5.822l2.22 5.827 6.12-16.142a14.59 14.59 0 00-3.84-3.317"/>
+        <path d="M19.365 37.194c-9.295 0-16.891-7.693-16.891-17.125 0-9.451 7.596-17.158 16.89-17.158 9.295 0 16.892 7.707 16.892 17.158 0 9.432-7.597 17.125-16.891 17.125m0-36.78C8.71.413 0 9.234 0 20.07c0 10.801 8.71 19.636 19.365 19.636 10.665 0 19.347-8.835 19.347-19.636C38.712 9.235 30.03.413 19.365.413"/>
+        <path d="M19.238 24.094l-3.741 9.851-.017.306c1.238.353 2.538.53 3.885.53 1.265 0 2.492-.161 3.659-.467l-.042-.369-3.744-9.85zM4.858 20.07c0 5.537 3.043 10.398 7.545 12.892L5.681 15.178a14.653 14.653 0 00-.823 4.891"/>
+    </g>
+</svg>
diff --git a/public/images/layouts/apollo-nextjs.jpg b/public/images/layouts/apollo-nextjs.jpg
new file mode 100644
index 0000000000..b126f422f1
Binary files /dev/null and b/public/images/layouts/apollo-nextjs.jpg differ
diff --git a/public/images/layouts/apollo-react.jpg b/public/images/layouts/apollo-react.jpg
new file mode 100644
index 0000000000..c4b3a0a5c5
Binary files /dev/null and b/public/images/layouts/apollo-react.jpg differ
diff --git a/public/images/layouts/atlantis-react.jpg b/public/images/layouts/atlantis-react.jpg
new file mode 100644
index 0000000000..d1c988408c
Binary files /dev/null and b/public/images/layouts/atlantis-react.jpg differ
diff --git a/public/images/layouts/avalon-react.jpg b/public/images/layouts/avalon-react.jpg
new file mode 100644
index 0000000000..8dfaaa2d25
Binary files /dev/null and b/public/images/layouts/avalon-react.jpg differ
diff --git a/public/images/layouts/babylon-react.jpg b/public/images/layouts/babylon-react.jpg
new file mode 100644
index 0000000000..cd0402d322
Binary files /dev/null and b/public/images/layouts/babylon-react.jpg differ
diff --git a/public/images/layouts/diamond-react.jpg b/public/images/layouts/diamond-react.jpg
new file mode 100644
index 0000000000..fc8d4fbf8f
Binary files /dev/null and b/public/images/layouts/diamond-react.jpg differ
diff --git a/public/images/layouts/freya-react.jpg b/public/images/layouts/freya-react.jpg
new file mode 100644
index 0000000000..6e1ebbb1a3
Binary files /dev/null and b/public/images/layouts/freya-react.jpg differ
diff --git a/public/images/layouts/roma-react.jpg b/public/images/layouts/roma-react.jpg
new file mode 100644
index 0000000000..35140098da
Binary files /dev/null and b/public/images/layouts/roma-react.jpg differ
diff --git a/public/images/layouts/sakai-react.jpg b/public/images/layouts/sakai-react.jpg
new file mode 100644
index 0000000000..08c5204023
Binary files /dev/null and b/public/images/layouts/sakai-react.jpg differ
diff --git a/public/images/layouts/themeswitcher-apollo.svg b/public/images/layouts/themeswitcher-apollo.svg
new file mode 100644
index 0000000000..dcb89f672a
--- /dev/null
+++ b/public/images/layouts/themeswitcher-apollo.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.999 0L0 31.9619H5.39707L15.9998 9.27496L26.3892 31.9619H32L15.999 0Z" fill="#6366F1"/>
+<path d="M21.1182 24.0977L24.731 32.0459H17.9568L21.1182 24.0977Z" fill="#6366F1"/>
+<path d="M13.8038 32.0459L10.191 24.0977L7.02972 32.0459H13.8038Z" fill="#6366F1"/>
+</svg>
diff --git a/public/images/layouts/themeswitcher-atlantis.svg b/public/images/layouts/themeswitcher-atlantis.svg
new file mode 100644
index 0000000000..1b6f6076e8
--- /dev/null
+++ b/public/images/layouts/themeswitcher-atlantis.svg
@@ -0,0 +1,3 @@
+<svg width="31" height="29" viewBox="0 0 31 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.9647 5.64508C8.88982 14.1611 21.3667 14.155 22.2888 5.64508C19.0937 5.3509 16.3919 3.32837 15.1267 0.524414C13.8616 3.32837 11.1597 5.3509 7.9647 5.64508ZM14.3241 13.6126C14.0453 16.6954 11.5916 19.386 8.54972 19.9499C4.43875 20.8049 0.364535 17.7312 0 13.6126C3.19504 13.3184 5.89689 11.2959 7.16204 8.49195C8.418 11.3174 11.2393 13.3521 14.3241 13.6126ZM22.2888 21.5801C21.9212 25.2084 18.8487 28.0522 15.1267 28.0522C11.4048 28.0522 8.3323 25.2084 7.9647 21.5801C11.0495 21.3197 13.8708 19.2849 15.1267 16.4595C16.3827 19.2849 19.204 21.3197 22.2888 21.5801ZM30.2533 13.6126C29.8857 17.4677 26.3598 20.4371 22.4357 20.0541C19.0905 19.7997 16.2233 16.9559 15.9292 13.6126C19.014 13.3521 21.8353 11.3174 23.0912 8.49195C24.3564 11.2959 27.0582 13.3184 30.2533 13.6126Z" fill="#44486D"/>
+</svg>
diff --git a/public/images/layouts/themeswitcher-avalon.png b/public/images/layouts/themeswitcher-avalon.png
new file mode 100644
index 0000000000..4122cf21a1
Binary files /dev/null and b/public/images/layouts/themeswitcher-avalon.png differ
diff --git a/public/images/layouts/themeswitcher-babylon.png b/public/images/layouts/themeswitcher-babylon.png
new file mode 100644
index 0000000000..87cd97ec79
Binary files /dev/null and b/public/images/layouts/themeswitcher-babylon.png differ
diff --git a/public/images/layouts/themeswitcher-diamond.png b/public/images/layouts/themeswitcher-diamond.png
new file mode 100644
index 0000000000..c2a39aae58
Binary files /dev/null and b/public/images/layouts/themeswitcher-diamond.png differ
diff --git a/public/images/layouts/themeswitcher-freya.png b/public/images/layouts/themeswitcher-freya.png
new file mode 100644
index 0000000000..df243604bc
Binary files /dev/null and b/public/images/layouts/themeswitcher-freya.png differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-luna-amber.png b/public/images/layouts/themeswitcher-luna-amber.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-luna-amber.png
rename to public/images/layouts/themeswitcher-luna-amber.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-luna-blue.png b/public/images/layouts/themeswitcher-luna-blue.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-luna-blue.png
rename to public/images/layouts/themeswitcher-luna-blue.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-luna-green.png b/public/images/layouts/themeswitcher-luna-green.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-luna-green.png
rename to public/images/layouts/themeswitcher-luna-green.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-luna-pink.png b/public/images/layouts/themeswitcher-luna-pink.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-luna-pink.png
rename to public/images/layouts/themeswitcher-luna-pink.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-nova-colored.png b/public/images/layouts/themeswitcher-nova-colored.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-nova-colored.png
rename to public/images/layouts/themeswitcher-nova-colored.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-nova-dark.png b/public/images/layouts/themeswitcher-nova-dark.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-nova-dark.png
rename to public/images/layouts/themeswitcher-nova-dark.png
diff --git a/public/showcase/resources/images/layouts/themeswitcher-nova-light.png b/public/images/layouts/themeswitcher-nova-light.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-nova-light.png
rename to public/images/layouts/themeswitcher-nova-light.png
diff --git a/public/images/layouts/themeswitcher-rhea.png b/public/images/layouts/themeswitcher-rhea.png
new file mode 100644
index 0000000000..8ea24c4518
Binary files /dev/null and b/public/images/layouts/themeswitcher-rhea.png differ
diff --git a/public/images/layouts/themeswitcher-roma.jpg b/public/images/layouts/themeswitcher-roma.jpg
new file mode 100755
index 0000000000..ce9b2b2867
Binary files /dev/null and b/public/images/layouts/themeswitcher-roma.jpg differ
diff --git a/public/images/layouts/themeswitcher-sakai.svg b/public/images/layouts/themeswitcher-sakai.svg
new file mode 100644
index 0000000000..8fb475a075
--- /dev/null
+++ b/public/images/layouts/themeswitcher-sakai.svg
@@ -0,0 +1,7 @@
+<svg width="120" height="108" viewBox="0 0 85 63" fill="none" style="background-color:white" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.017 30.3135C27.0057 30.5602 27 30.8085 27 31.0581C27 39.9267 34.1894 47.1161 43.0581 47.1161C51.9267 47.1161 59.1161 39.9267 59.1161 31.0581C59.1161 30.8026 59.1102 30.5485 59.0984 30.2959C60.699 30.0511 62.2954 29.7696 63.8864 29.4515L64.0532 29.4181C64.0949 29.9593 64.1161 30.5062 64.1161 31.0581C64.1161 42.6881 54.6881 52.1161 43.0581 52.1161C31.428 52.1161 22 42.6881 22 31.0581C22 30.514 22.0206 29.9747 22.0612 29.441L22.1136 29.4515C23.7428 29.7773 25.3777 30.0646 27.017 30.3135ZM52.4613 18.0397C49.8183 16.1273 46.5698 15 43.0581 15C39.54 15 36.2862 16.1313 33.6406 18.05C31.4938 17.834 29.3526 17.5435 27.221 17.1786C31.0806 12.7781 36.7449 10 43.0581 10C49.3629 10 55.0207 12.7708 58.8799 17.1612C56.7487 17.5285 54.6078 17.8214 52.4613 18.0397ZM68.9854 28.4316C69.0719 29.2954 69.1161 30.1716 69.1161 31.0581C69.1161 45.4495 57.4495 57.1161 43.0581 57.1161C28.6666 57.1161 17 45.4495 17 31.0581C17 30.1793 17.0435 29.3108 17.1284 28.4544L12.2051 27.4697C12.0696 28.6471 12 29.8444 12 31.0581C12 48.211 25.9052 62.1161 43.0581 62.1161C60.211 62.1161 74.1161 48.211 74.1161 31.0581C74.1161 29.8366 74.0456 28.6317 73.9085 27.447L68.9854 28.4316ZM69.6705 15.0372L64.3929 16.0927C59.6785 9.38418 51.8803 5 43.0581 5C34.2269 5 26.4218 9.39306 21.7089 16.1131L16.4331 15.0579C21.867 6.03506 31.7578 0 43.0581 0C54.3497 0 64.234 6.02581 69.6705 15.0372Z" fill="black"/>
+<mask id="path-2-inside-1" fill="white">
+<path d="M42.5 28.9252C16.5458 30.2312 0 14 0 14C0 14 26 22.9738 42.5 22.9738C59 22.9738 85 14 85 14C85 14 68.4542 27.6193 42.5 28.9252Z"/>
+</mask>
+<path d="M0 14L5.87269 -3.01504L-12.6052 26.8495L0 14ZM42.5 28.9252L41.5954 10.948L42.5 28.9252ZM85 14L96.4394 27.8975L79.1273 -3.01504L85 14ZM0 14C-12.6052 26.8495 -12.5999 26.8546 -12.5946 26.8598C-12.5928 26.8617 -12.5874 26.8669 -12.5837 26.8706C-12.5762 26.8779 -12.5685 26.8854 -12.5605 26.8932C-12.5445 26.9088 -12.5274 26.9254 -12.5092 26.943C-12.4729 26.9782 -12.4321 27.0174 -12.387 27.0605C-12.2969 27.1467 -12.1892 27.2484 -12.0642 27.3646C-11.8144 27.5968 -11.4949 27.8874 -11.1073 28.2273C-10.3332 28.9063 -9.28165 29.7873 -7.96614 30.7967C-5.34553 32.8073 -1.61454 35.3754 3.11693 37.872C12.5592 42.8544 26.4009 47.7581 43.4046 46.9025L41.5954 10.948C32.6449 11.3983 25.2366 8.83942 19.9174 6.03267C17.2682 4.63475 15.2406 3.22667 13.9478 2.23478C13.3066 1.74283 12.8627 1.366 12.6306 1.16243C12.5151 1.06107 12.4538 1.00422 12.4485 0.999363C12.446 0.996981 12.4576 1.00773 12.4836 1.03256C12.4966 1.04498 12.5132 1.06094 12.5334 1.08055C12.5436 1.09035 12.5546 1.10108 12.5665 1.11273C12.5725 1.11855 12.5787 1.12461 12.5852 1.13091C12.5884 1.13405 12.5934 1.13895 12.595 1.14052C12.6 1.14548 12.6052 1.15049 0 14ZM43.4046 46.9025C59.3275 46.1013 72.3155 41.5302 81.3171 37.1785C85.8337 34.9951 89.4176 32.8333 91.9552 31.151C93.2269 30.3079 94.2446 29.5794 94.9945 29.0205C95.3698 28.7409 95.6788 28.503 95.92 28.3138C96.0406 28.2192 96.1443 28.1366 96.2309 28.067C96.2742 28.0321 96.3133 28.0005 96.348 27.9723C96.3654 27.9581 96.3817 27.9448 96.3969 27.9323C96.4045 27.9261 96.4119 27.9201 96.419 27.9143C96.4225 27.9114 96.4276 27.9072 96.4294 27.9057C96.4344 27.9016 96.4394 27.8975 85 14C73.5606 0.102497 73.5655 0.0985097 73.5703 0.0945756C73.5718 0.0933319 73.5765 0.0894438 73.5795 0.0869551C73.5856 0.0819751 73.5914 0.077195 73.597 0.0726136C73.6082 0.0634509 73.6185 0.055082 73.6278 0.0474955C73.6465 0.0323231 73.6614 0.0202757 73.6726 0.0112606C73.695 -0.00676378 73.7026 -0.0126931 73.6957 -0.00726687C73.6818 0.00363418 73.6101 0.0596753 73.4822 0.154983C73.2258 0.346025 72.7482 0.691717 72.0631 1.14588C70.6873 2.05798 68.5127 3.38259 65.6485 4.7672C59.8887 7.55166 51.6267 10.4432 41.5954 10.948L43.4046 46.9025ZM85 14C79.1273 -3.01504 79.1288 -3.01557 79.1303 -3.01606C79.1306 -3.01618 79.1319 -3.01664 79.1326 -3.01688C79.134 -3.01736 79.135 -3.0177 79.1356 -3.01791C79.1369 -3.01834 79.1366 -3.01823 79.1347 -3.01759C79.131 -3.01633 79.1212 -3.01297 79.1055 -3.00758C79.0739 -2.99681 79.0185 -2.97794 78.9404 -2.95151C78.7839 -2.89864 78.5366 -2.81564 78.207 -2.7068C77.5472 -2.48895 76.561 -2.16874 75.3165 -1.78027C72.8181 -1.00046 69.3266 0.039393 65.3753 1.07466C57.0052 3.26771 48.2826 4.97383 42.5 4.97383V40.9738C53.2174 40.9738 65.7448 38.193 74.4997 35.8992C79.1109 34.691 83.1506 33.4874 86.0429 32.5846C87.4937 32.1318 88.6676 31.7509 89.4942 31.478C89.9077 31.3414 90.2351 31.2317 90.4676 31.1531C90.5839 31.1138 90.6765 31.0823 90.7443 31.0591C90.7783 31.0475 90.806 31.038 90.8275 31.0306C90.8382 31.0269 90.8473 31.0238 90.8549 31.0212C90.8586 31.0199 90.862 31.0187 90.865 31.0177C90.8665 31.0172 90.8684 31.0165 90.8691 31.0163C90.871 31.0156 90.8727 31.015 85 14ZM42.5 4.97383C36.7174 4.97383 27.9948 3.26771 19.6247 1.07466C15.6734 0.039393 12.1819 -1.00046 9.68352 -1.78027C8.43897 -2.16874 7.4528 -2.48895 6.79299 -2.7068C6.46337 -2.81564 6.21607 -2.89864 6.05965 -2.95151C5.98146 -2.97794 5.92606 -2.99681 5.89453 -3.00758C5.87876 -3.01297 5.86897 -3.01633 5.86528 -3.01759C5.86344 -3.01823 5.86312 -3.01834 5.86435 -3.01791C5.86497 -3.0177 5.86597 -3.01736 5.86736 -3.01688C5.86805 -3.01664 5.86939 -3.01618 5.86973 -3.01606C5.87116 -3.01557 5.87269 -3.01504 0 14C-5.87269 31.015 -5.87096 31.0156 -5.86914 31.0163C-5.8684 31.0165 -5.86647 31.0172 -5.86498 31.0177C-5.86201 31.0187 -5.85864 31.0199 -5.85486 31.0212C-5.84732 31.0238 -5.83818 31.0269 -5.82747 31.0306C-5.80603 31.038 -5.77828 31.0475 -5.74435 31.0591C-5.67649 31.0823 -5.58388 31.1138 -5.46761 31.1531C-5.23512 31.2317 -4.9077 31.3414 -4.49416 31.478C-3.66764 31.7509 -2.49366 32.1318 -1.04289 32.5846C1.84938 33.4874 5.88908 34.691 10.5003 35.8992C19.2552 38.193 31.7826 40.9738 42.5 40.9738V4.97383Z" fill="black" mask="url(#path-2-inside-1)"/>
+</svg>
diff --git a/public/showcase/resources/images/layouts/themeswitcher-sigma.png b/public/images/layouts/themeswitcher-sigma.png
similarity index 100%
rename from public/showcase/resources/images/layouts/themeswitcher-sigma.png
rename to public/images/layouts/themeswitcher-sigma.png
diff --git a/public/images/layouts/themeswitcher-ultima.png b/public/images/layouts/themeswitcher-ultima.png
new file mode 100644
index 0000000000..448b9936da
Binary files /dev/null and b/public/images/layouts/themeswitcher-ultima.png differ
diff --git a/public/images/layouts/ultima-react.jpg b/public/images/layouts/ultima-react.jpg
new file mode 100644
index 0000000000..21fd3ee062
Binary files /dev/null and b/public/images/layouts/ultima-react.jpg differ
diff --git a/public/images/liveeditor/codesandbox.svg b/public/images/liveeditor/codesandbox.svg
new file mode 100644
index 0000000000..96dc87be7f
--- /dev/null
+++ b/public/images/liveeditor/codesandbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-codesandbox"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline><polyline points="7.5 19.79 7.5 14.6 3 12"></polyline><polyline points="21 12 16.5 14.6 16.5 19.79"></polyline><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
diff --git a/public/images/logo-100.png b/public/images/logo-100.png
new file mode 100644
index 0000000000..5c2cb2adbe
Binary files /dev/null and b/public/images/logo-100.png differ
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000000..06802182e7
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/public/images/logos/cra.svg b/public/images/logos/cra.svg
new file mode 100644
index 0000000000..7bd1599766
--- /dev/null
+++ b/public/images/logos/cra.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.96 159.93"><defs><style>.cls-1{fill:#09d3ac}</style></defs><path d="M141.35,73.27c0-6.89-8.11-13-20.58-16.73,3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63s8.12,13,20.59,16.72c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26C133.27,86.18,141.34,80.12,141.35,73.27ZM96.56,42.06c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM71.77,78.94c.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88c-2.71-.39-5.34-.88-7.84-1.46C69.86,84,70.75,81.5,71.77,78.94ZM69,59.9c2.53-.59,5.18-1.08,7.93-1.46-1,1.48-1.86,3-2.76,4.59s-1.69,3-2.46,4.52Q70.18,63.65,69,59.9Zm5.21,13.34q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55s2.88,5.22,4.12,7.83c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55S75.5,75.85,74.25,73.24Zm32.86-14.77c2.72.38,5.35.87,7.84,1.45-.74,2.47-1.62,5-2.64,7.55-.79-1.5-1.61-3-2.48-4.51S108,59.93,107.11,58.47Zm2.76,24.92q1.29-2.27,2.46-4.53c1,2.6,2,5.16,2.7,7.66-2.52.59-5.17,1.07-7.92,1.45Q108.52,85.75,109.87,83.39ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM64.53,85.26a58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25,98.72,98.72,0,0,0,64.53,85.26Zm23,19.1c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm4.57-4.51c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm10.8-28.44c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14,98.1,98.1,0,0,0,4.49-12,58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14S132.17,80.42,125.07,83.37ZM92,82.39a9.18,9.18,0,1,0-9.17-9.19A9.17,9.17,0,0,0,92,82.39ZM31,17.88V128.53H153.07V17.88ZM148.3,123.77H35.78V22.65H148.3Zm-85-33.9c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26,12.41-3.72,20.48-9.78,20.49-16.63s-8.11-13-20.58-16.73c3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63S50.84,86.13,63.31,89.87Zm24.21,14.49c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm24.79-36.89c-.79-1.5-1.61-3-2.48-4.51s-1.8-3-2.72-4.49c2.72.38,5.35.87,7.84,1.45C114.21,62.39,113.33,64.92,112.31,67.47Zm2.72,19c-2.52.59-5.17,1.07-7.92,1.45q1.41-2.22,2.76-4.58t2.46-4.53C113.37,81.46,114.28,84,115,86.52Zm-5.21-13.35c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55s-2.87-5.22-4.12-7.83q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55S108.58,70.56,109.82,73.17ZM77,88c-2.71-.39-5.34-.88-7.84-1.46.74-2.46,1.63-5,2.65-7.55.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88ZM74.21,63c-.87,1.5-1.69,3-2.46,4.52Q70.18,63.65,69,59.9c2.53-.59,5.18-1.08,7.93-1.46C76,59.92,75.11,61.45,74.21,63ZM92.09,99.85c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm5.28-50.66a58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14s-4.41,7.16-11.51,10.11c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14A98.1,98.1,0,0,0,119.55,61.15Zm-23-19.09c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25a98.72,98.72,0,0,0-4.49,12,58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05Zm33,1a9.18,9.18,0,1,0,9.17,9.19A9.17,9.17,0,0,0,92,64Zm0,0a9.18,9.18,0,1,0,9.17,9.19A9.17,9.17,0,0,0,92,64Zm0,0a9.18,9.18,0,1,0,9.17,9.19A9.17,9.17,0,0,0,92,64Zm49.35,9.24c0-6.89-8.11-13-20.58-16.73,3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63s8.12,13,20.59,16.72c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26C133.27,86.18,141.34,80.12,141.35,73.27ZM96.56,42.06c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM71.77,78.94c.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88c-2.71-.39-5.34-.88-7.84-1.46C69.86,84,70.75,81.5,71.77,78.94ZM69,59.9c2.53-.59,5.18-1.08,7.93-1.46-1,1.48-1.86,3-2.76,4.59s-1.69,3-2.46,4.52Q70.18,63.65,69,59.9Zm5.21,13.34q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55s2.88,5.22,4.12,7.83c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55S75.5,75.85,74.25,73.24Zm32.86-14.77c2.72.38,5.35.87,7.84,1.45-.74,2.47-1.62,5-2.64,7.55-.79-1.5-1.61-3-2.48-4.51S108,59.93,107.11,58.47Zm2.76,24.92q1.29-2.27,2.46-4.53c1,2.6,2,5.16,2.7,7.66-2.52.59-5.17,1.07-7.92,1.45Q108.52,85.75,109.87,83.39ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM64.53,85.26a58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25,98.72,98.72,0,0,0,64.53,85.26Zm23,19.1c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm4.57-4.51c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm10.8-28.44c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14,98.1,98.1,0,0,0,4.49-12,58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14S132.17,80.42,125.07,83.37ZM92,82.39a9.18,9.18,0,1,0-9.17-9.19A9.17,9.17,0,0,0,92,82.39Zm-69.32,54.5V26.2L17.89,31V141.66H139.94l4.78-4.77Z" class="cls-1"/></svg>
\ No newline at end of file
diff --git a/public/images/logos/next-js.svg b/public/images/logos/next-js.svg
new file mode 100644
index 0000000000..14b3837867
--- /dev/null
+++ b/public/images/logos/next-js.svg
@@ -0,0 +1 @@
+<svg height="1024pt" viewBox=".5 -.2 1023 1024.1" width="1024pt" xmlns="http://www.w3.org/2000/svg"><path d="m478.5.6c-2.2.2-9.2.9-15.5 1.4-145.3 13.1-281.4 91.5-367.6 212-48 67-78.7 143-90.3 223.5-4.1 28.1-4.6 36.4-4.6 74.5s.5 46.4 4.6 74.5c27.8 192.1 164.5 353.5 349.9 413.3 33.2 10.7 68.2 18 108 22.4 15.5 1.7 82.5 1.7 98 0 68.7-7.6 126.9-24.6 184.3-53.9 8.8-4.5 10.5-5.7 9.3-6.7-.8-.6-38.3-50.9-83.3-111.7l-81.8-110.5-102.5-151.7c-56.4-83.4-102.8-151.6-103.2-151.6-.4-.1-.8 67.3-1 149.6-.3 144.1-.4 149.9-2.2 153.3-2.6 4.9-4.6 6.9-8.8 9.1-3.2 1.6-6 1.9-21.1 1.9h-17.3l-4.6-2.9c-3-1.9-5.2-4.4-6.7-7.3l-2.1-4.5.2-200.5.3-200.6 3.1-3.9c1.6-2.1 5-4.8 7.4-6.1 4.1-2 5.7-2.2 23-2.2 20.4 0 23.8.8 29.1 6.6 1.5 1.6 57 85.2 123.4 185.9s157.2 238.2 201.8 305.7l81 122.7 4.1-2.7c36.3-23.6 74.7-57.2 105.1-92.2 64.7-74.3 106.4-164.9 120.4-261.5 4.1-28.1 4.6-36.4 4.6-74.5s-.5-46.4-4.6-74.5c-27.8-192.1-164.5-353.5-349.9-413.3-32.7-10.6-67.5-17.9-106.5-22.3-9.6-1-75.7-2.1-84-1.3zm209.4 309.4c4.8 2.4 8.7 7 10.1 11.8.8 2.6 1 58.2.8 183.5l-.3 179.8-31.7-48.6-31.8-48.6v-130.7c0-84.5.4-132 1-134.3 1.6-5.6 5.1-10 9.9-12.6 4.1-2.1 5.6-2.3 21.3-2.3 14.8 0 17.4.2 20.7 2z"/><path d="m784.3 945.1c-3.5 2.2-4.6 3.7-1.5 2 2.2-1.3 5.8-4 5.2-4.1-.3 0-2 1-3.7 2.1zm-6.9 4.5c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-5 3c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-5 3c-1.8 1.4-1.8 1.5.4.4 1.2-.6 2.2-1.3 2.2-1.5 0-.8-.5-.6-2.6 1.1zm-7.6 4c-3.8 2-3.6 2.8.2.9 1.7-.9 3-1.8 3-2 0-.7-.1-.6-3.2 1.1z"/></svg>
\ No newline at end of file
diff --git a/public/images/logos/remix.png b/public/images/logos/remix.png
new file mode 100644
index 0000000000..d3432268f2
Binary files /dev/null and b/public/images/logos/remix.png differ
diff --git a/public/images/logos/vite.png b/public/images/logos/vite.png
new file mode 100644
index 0000000000..8b23c919ed
Binary files /dev/null and b/public/images/logos/vite.png differ
diff --git a/public/images/nature/nature1.jpg b/public/images/nature/nature1.jpg
new file mode 100755
index 0000000000..a224b31136
Binary files /dev/null and b/public/images/nature/nature1.jpg differ
diff --git a/public/images/nature/nature10.jpg b/public/images/nature/nature10.jpg
new file mode 100755
index 0000000000..46b76f977d
Binary files /dev/null and b/public/images/nature/nature10.jpg differ
diff --git a/public/images/nature/nature11.jpg b/public/images/nature/nature11.jpg
new file mode 100755
index 0000000000..fe6d7edd90
Binary files /dev/null and b/public/images/nature/nature11.jpg differ
diff --git a/public/images/nature/nature12.jpg b/public/images/nature/nature12.jpg
new file mode 100755
index 0000000000..f0fad9834b
Binary files /dev/null and b/public/images/nature/nature12.jpg differ
diff --git a/public/images/nature/nature2.jpg b/public/images/nature/nature2.jpg
new file mode 100755
index 0000000000..b643b30940
Binary files /dev/null and b/public/images/nature/nature2.jpg differ
diff --git a/public/images/nature/nature3.jpg b/public/images/nature/nature3.jpg
new file mode 100755
index 0000000000..456925a725
Binary files /dev/null and b/public/images/nature/nature3.jpg differ
diff --git a/public/images/nature/nature4.jpg b/public/images/nature/nature4.jpg
new file mode 100755
index 0000000000..568bc91843
Binary files /dev/null and b/public/images/nature/nature4.jpg differ
diff --git a/public/images/nature/nature5.jpg b/public/images/nature/nature5.jpg
new file mode 100755
index 0000000000..2648e9157a
Binary files /dev/null and b/public/images/nature/nature5.jpg differ
diff --git a/public/images/nature/nature6.jpg b/public/images/nature/nature6.jpg
new file mode 100755
index 0000000000..500ee9c8b1
Binary files /dev/null and b/public/images/nature/nature6.jpg differ
diff --git a/public/images/nature/nature7.jpg b/public/images/nature/nature7.jpg
new file mode 100755
index 0000000000..02489a8f03
Binary files /dev/null and b/public/images/nature/nature7.jpg differ
diff --git a/public/images/nature/nature8.jpg b/public/images/nature/nature8.jpg
new file mode 100755
index 0000000000..c9fcdc8641
Binary files /dev/null and b/public/images/nature/nature8.jpg differ
diff --git a/public/images/nature/nature9.jpg b/public/images/nature/nature9.jpg
new file mode 100755
index 0000000000..e25252d81f
Binary files /dev/null and b/public/images/nature/nature9.jpg differ
diff --git a/public/images/news/topbar-newyear-bg.png b/public/images/news/topbar-newyear-bg.png
new file mode 100644
index 0000000000..3a93cdca89
Binary files /dev/null and b/public/images/news/topbar-newyear-bg.png differ
diff --git a/public/images/news/topbar-newyear-logo.svg b/public/images/news/topbar-newyear-logo.svg
new file mode 100644
index 0000000000..8a7e379b3a
--- /dev/null
+++ b/public/images/news/topbar-newyear-logo.svg
@@ -0,0 +1,44 @@
+<svg width="111" height="43" viewBox="0 0 111 43" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_d_15_144)">
+<path d="M29.849 21.009L28.0227 20.6033L29.4432 22.6318V28.9202L34.3133 24.8632V17.9662L32.0812 18.7777L29.849 21.009Z" fill="white"/>
+<path d="M18.4853 21.009L20.3116 20.6033L18.8912 22.6318V28.9202L14.0211 24.8632V17.9662L16.2532 18.7777L18.4853 21.009Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 23.0375L21.1233 20.6033L22.1379 21.2118H26.1963L27.2109 20.6033L28.8343 23.0375V32.1658L27.6168 33.9914L26.1963 35.4114H22.1379L20.7174 33.9914L19.4999 32.1658V23.0375Z" fill="white"/>
+<path d="M29.4431 32.7744L32.0811 30.1373V27.5002L29.4431 29.7316V32.7744Z" fill="white"/>
+<path d="M18.891 32.7744L16.253 30.1373V27.5002L18.891 29.7316V32.7744Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5288 8.83795L19.9054 12.6921L22.5434 20.4004L23.7609 20.4004V8.83795H21.5288ZM24.5726 8.83795V20.4004L25.9931 20.4004L28.4281 12.6921L26.8048 8.83795H24.5726Z" fill="white"/>
+<path d="M22.5437 20.4004L13.818 17.1548L12.6005 12.0836L20.1086 12.6921L22.7466 20.4004H22.5437Z" fill="white"/>
+<path d="M25.9933 20.4004L34.719 17.1548L35.9365 12.0836L28.2255 12.6921L25.7904 20.4004H25.9933Z" fill="white"/>
+<path d="M28.8343 12.0836L33.0956 11.6779L30.2547 8.83795H27.4138L28.8343 12.0836Z" fill="white"/>
+<path d="M19.4997 12.0836L15.2383 11.6779L18.0793 8.83795H20.9202L19.4997 12.0836Z" fill="white"/>
+<rect x="4" width="36.1183" height="28" fill="url(#pattern0)"/>
+</g>
+<g filter="url(#filter1_d_15_144)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.2218 28.3518C47.2218 28.5819 47.3608 28.72 47.5925 28.72H50.002C50.2568 28.72 50.3726 28.5819 50.3726 28.3518V22.5523H53.1528C55.3306 22.5523 56.489 21.3786 56.489 19.2384V13.623C56.489 11.4598 55.3306 10.3091 53.1528 10.3091H47.5925C47.3608 10.3091 47.2218 10.4472 47.2218 10.6773V28.3518ZM50.3727 19.5146V13.3469H52.4115C53.037 13.3469 53.3382 13.6691 53.3382 14.2674V18.594C53.3382 19.1693 53.037 19.5146 52.4115 19.5146H50.3727ZM66.5027 10.3091C68.6805 10.3091 69.8389 11.4598 69.8389 13.623V19.2384C69.8389 20.7803 69.2597 21.7929 68.1476 22.2762L69.7462 28.3057C69.8157 28.5819 69.6767 28.72 69.4219 28.72H67.0124C66.7807 28.72 66.6649 28.6049 66.6186 28.3978L65.0663 22.5523H63.4677V28.3518C63.4677 28.5819 63.3287 28.72 63.097 28.72H60.6876C60.4559 28.72 60.3169 28.5819 60.3169 28.3518V10.6773C60.3169 10.4472 60.4559 10.3091 60.6876 10.3091H66.5027ZM63.4677 19.5146V13.3469H65.7613C66.3637 13.3469 66.688 13.6691 66.688 14.2674V18.594C66.688 19.1924 66.3637 19.5146 65.7613 19.5146H63.4677ZM73.8984 10.6773C73.8984 10.4472 74.0142 10.3091 74.2691 10.3091H76.6785C76.9102 10.3091 77.0492 10.4472 77.0492 10.6773V28.3518C77.0492 28.5819 76.9102 28.72 76.6785 28.72H74.2691C74.0142 28.72 73.8984 28.5819 73.8984 28.3518V10.6773ZM90.7929 10.3091C90.5149 10.3091 90.3527 10.4472 90.2832 10.7233L87.7116 22.1841L85.14 10.7233C85.0705 10.4472 84.9083 10.3091 84.6303 10.3091H81.5721C81.2709 10.3091 81.1087 10.4702 81.1087 10.7694V28.2597C81.1087 28.5589 81.2709 28.72 81.5721 28.72H83.7036C84.0047 28.72 84.1669 28.5589 84.1669 28.2597V17.9036H84.3291L86.6227 28.3057C86.6922 28.5819 86.8544 28.72 87.1324 28.72H88.2676C88.5457 28.72 88.7078 28.5819 88.7773 28.3057L91.071 17.9036H91.2331V28.2597C91.2331 28.5589 91.3953 28.72 91.6965 28.72H93.8511C94.1523 28.72 94.3145 28.5589 94.3145 28.2597V10.7694C94.3145 10.4702 94.1523 10.3091 93.8511 10.3091H90.7929ZM107.247 10.3091C107.525 10.3091 107.618 10.4472 107.618 10.6773V12.9787C107.618 13.2088 107.525 13.3699 107.247 13.3699H101.455V17.9726H105.88C106.112 17.9726 106.251 18.1107 106.251 18.3639V20.6422C106.251 20.8954 106.112 21.0334 105.88 21.0334H101.455V25.6822H107.247C107.525 25.6822 107.618 25.7973 107.618 26.0504V28.3518C107.618 28.5819 107.525 28.72 107.247 28.72H98.7215C98.513 28.72 98.374 28.5819 98.374 28.3518V10.6773C98.374 10.4472 98.513 10.3091 98.7215 10.3091H107.247Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_15_144" x="0.620005" y="0" width="42.8783" height="42.1714" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3.37999"/>
+<feGaussianBlur stdDeviation="1.69"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15_144"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_15_144" result="shape"/>
+</filter>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_15_144" transform="translate(-0.0830604 -0.214286) scale(0.00036102 0.000465694)"/>
+</pattern>
+<filter id="filter1_d_15_144" x="43.6745" y="10.3091" width="67.651" height="25.5055" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3.32548"/>
+<feGaussianBlur stdDeviation="1.66274"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_15_144"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_15_144" result="shape"/>
+</filter>
+<image id="image0_15_144" width="3000" height="3000" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAu4CAYAAABxFfV5AAAAAXNSR0IArs4c6QAAIABJREFUeF7s2jERAAAMArHi33Rt/JAq4FJGdo4AAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECAQEFsggAgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOAN3JSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDqzbxFAAAgAElEQVRAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQDPdx2gAACAASURBVIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIJAQM3BNvEIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDNx1gAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQSAgbuiTcIQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIG7jpAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgkBA/fEG4QgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQN3HSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBhICBe+INQhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQICAgbsOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBCwMA98QYhCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQMDAXQcIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAICFg4J54gxAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgYOCuAwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQEDBwT7xBCAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAwcNcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEgIGLgn3iAEAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBi46wABAgQIECBAgAABAgQIECBAgAABAgQIEHj27u+4jSPrG/CZHgCUrlYoSm/5bjeDdzNYZ/Axg0UIejOgMpAysDOQM5AyoDKQ7iBgqwzWrk0RIKa/Am1pJdsySQl/emYeVLksmjPd5zynr8ifWwQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAAB47OTYAAAIABJREFUAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAQMDdGSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgQE3IsYgyIIECBAgAABAgQIECBAgAABAgQIECBAgAABAncX+PHRo79f1fWDlPPfI+cHEfG3XFV/e79SlfPmz3/9zMrnuarOPnr2dURs/okmpReD9Xoxns8/fP/u1XmDAAECBAgQIECAAAECBAgQIECAAAECdxcQcL+7mTcIECBAgAABAgQIECBAgAABAgQIECBAgAABAnsV2ATZ1xF/r6pqE2D/9obg+rZre5Or6nWV84sccVandDaeTq+D8D4ECBAgQIAAAQIECBAgQIAAAQIECBDYtoCA+7ZFrUeAAAECBAgQIECAAAECBAgQIECAAAECBAgQ+AqBHx88eLAejb6tIv7+a5j9H1+x3K5ePa8irgPvm9veH02nL3a1kXUJECBAgAABAgQIECBAgAABAgQIEOiXgIB7v+atWwIECBAgQIAAAQIECBAgQIAAAQIECBAgQKBAgX/9z/+cVDl/G1X1bUT8b4El3lTSL4H3qnqRquq5G95v4vJ9AgQIECBAgAABAgQIECBAgAABAgQ+JyDg7mwQIECAAAECBAgQIECAAAECBAgQIECAAAECBPYs8OM33/ytyfk61J4j/t+et9/Hdq8i5xcp4rvxfH62jw3tQYAAAQIECBAgQIAAAQIECBAgQIBANwQE3LsxR10QIECAAAECBAgQIECAAAECBAgQIECAAAEChQu8D7VHzpOW3tL+pcJvIufnwu5fyuc9AgQIECBAgAABAgQIECBAgAABAv0SEHDv17x1S4AAAQIECBAgQIAAAQIECBAgQIAAAQIECOxRoMeh9s8pv4qq+i5dXn43XiwWexyFrQgQIECAAAECBAgQIECAAAECBAgQaImAgHtLBqVMAgQIECBAgAABAgQIECBAgAABAgQIECBAoB0CPz548GA9HJ5ESpMq53+0o+qDVPl9k9J3j6bTFwfZ3aYECBAgQIAAAQIECBAgQIAAAQIECBQpIOBe5FgURYAAAQIECBAgQIAAAQIECBAgQIAAAQIECLRNYP7NN9+mpplExElE/KVt9R+w3jc559N6tXruVvcDTsHWBAgQIECAAAECBAgQIECAAAECBAoREHAvZBDKIECAAAECBAgQIECAAAECBAgQIECAAAECBNonsLmtvTk6mkTOjyPir+3roKiKzyPn71JdPx1Pp6+LqkwxBAgQIECAAAECBAgQIECAAAECBAjsTUDAfW/UNiJAgAABAgQIECBAgAABAgQIECBAgAABAgS6IvDjo0d/b6pqE2r/Z1d6KqyP71NKp4LuhU1FOQQIECBAgAABAgQIECBAgAABAgT2ICDgvgdkWxAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLdEPjXo0eT6pdg+/92o6Oyu6giflin9PTRdPqi7EpVR4AAAQIECBAgQIAAAQIECBAgQIDAtgQE3LclaR0CBAgQIECAAAECBAgQIECAAAECBAgQIECgkwI/PnjwoBmNNqH2SUT8tZNNFt5UrqqXuapOBd0LH5TyCBAgQIAAAQIECBAgQIAAAQIECGxBQMB9C4iWIECAAAECBAgQIECAAAECBAgQIECAAAECBLon8OM33/ytaZrTiDiJiL90r8P2dbQJutdVNRlPp6/bV72KCRAgQIAAAQIECBAgQIAAAQIECBC4jYCA+22UPEOAAAECBAgQIECAAAECBAgQIECAAAECBAj0RmD+zTffpqbZ3Nb+z9403b5Gv08pnQq6t29wKiZAgAABAgQIECBAgAABAgQIECBwk4CA+01Cvk+AAAECBAgQIECAAAECBAgQIECAAAECBAj0QmATbK9yPq1y/kcvGu5Ckzk/S6vV6XixWHShHT0QIECAAAECBAgQIECAAAECBAgQIBAh4O4UECBAgAABAgQIECBAgAABAgQIECBAgAABAr0W+NejR5NIaSLY3tpjcB4RT49ns9PWdqBwAgQIECBAgAABAgQIECBAgAABAgQ+CAi4OwwECBAgQIAAAQIECBAgQIAAAQIECBAgQIBALwU2wfaqqjah6L/2EqB7Tb/JEY8fzmbPu9eajggQIECAAAECBAgQIECAAAECBAj0R0DAvT+z1ikBAgQIECBAgAABAgQIECBAgAABAgQIECAQEYLt3T4Guape1lU1GU+nr7vdqe4IECBAgAABAgQIECBAgAABAgQIdFNAwL2bc9UVAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8BsBwfbeHYknabl8Ol4sFr3rXMMECBAgQIAAAQIECBAgQIAAAQIEWiwg4N7i4SmdAAECBAgQIECAAAECBAgQIECAAAECBAgQuFlAsP1mow4/8SZHPH44mz3vcI9aI0CAAAECBAgQIECAAAECBAgQINApAQH3To1TMwQIECBAgAABAgQIECBAgAABAgQIECBAgMB7AcF2Z+G9QK6ql3VVTcbT6WsqBAgQIECAAAECBAgQIECAAAECBAiULSDgXvZ8VEeAAAECBAgQIECAAAECBAgQIECAAAECBAjcUUCw/Y5g/Xn8PCKeHs9mp/1pWacECBAgQIAAAQIECBAgQIAAAQIE2icg4N6+mamYAAECBAgQIECAAAECBAgQIECAAAECBAgQ+AMBwXbH4pYCr1LOk/F8fnbL5z1GgAABAgQIECBAgAABAgQIECBAgMAeBQTc94htKwIECBAgQIAAAQIECBAgQIAAAQIECBAgQGD7AoLt2zftxYo5P0ur1el4sVj0ol9NEiBAgAABAgQIECBAgAABAgQIEGiJgIB7SwalTAIECBAgQIAAAQIECBAgQIAAAQIECBAgQOBTAcF2J2ILAm+alCaPptMXW1jLEgQIECBAgAABAgQIECBAgAABAgQIbEFAwH0LiJYgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE9icg2L4/697s5Db33oxaowQIECBAgAABAgQIECBAgAABAuULCLiXPyMVEiBAgAABAgQIECBAgAABAgQIECBAgACB3gv8+ODBg+boaBI5P46Iv/YeBMAuBNzmvgtVaxIgQIAAAQIECBAgQIAAAQIECBC4o4CA+x3BPE6AAAECBAgQIECAAAECBAgQIECAAAECBAjsT+A62D4abULtm3/+sr+d7dRbAbe593b0GidAgAABAgQIECBAgAABAgQIEChDQMC9jDmoggABAgQIECBAgAABAgQIECBAgAABAgQIEPhIQLDdcTiwgNvcDzwA2xMgQIAAAQIECBAgQIAAAQIECPRXQMC9v7PXOQECBAgQIECAAAECBAgQIECAAAECBAgQKE5AsL24kfS7ILe593v+uidAgAABAgQIECBAgAABAgQIEDiIgID7QdhtSoAAAQIECBAgQIAAAQIECBAgQIAAAQIECHwsINjuPBQs8CrlPBnP52cF16g0AgQIECBAgAABAgQIECBAgAABAp0REHDvzCg1QoAAAQIECBAgQIAAAQIECBAgQIAAAQIE2icg2N6+mfW44ifHs9lpj/vXOgECBAgQIECAAAECBAgQIECAAIG9CAi474XZJgQIECBAgAABAgQIECBAgAABAgQIECBAgMDHAoLtzkNLBV6llE7G0+nrltavbAIECBAgQIAAAQIECBAgQIAAAQLFCwi4Fz8iBRIgQIAAAQIECBAgQIAAAQIECBAgQIAAge4ICLZ3Z5Y97uQ8qur0+O3bpz020DoBAgQIECBAgAABAgQIECBAgACBnQkIuO+M1sIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAewHBdmehawJVxA/VcjkZLxaLrvWmHwIECBAgQIAAAQIECBAgQIAAAQKHFBBwP6S+vQkQIECAAAECBAgQIECAAAECBAgQIECAQMcFBNs7PmDtneeIycPZ7DkKAgQIECBAgAABAgQIECBAgAABAgS2IyDgvh1HqxAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIfCQi2Ow69Esj5WVqtTt3m3qupa5YAAQIECBAgQIAAAQIECBAgQGBHAgLuO4K1LAECBAgQIECAAAECBAgQIECAAAECBAgQ6KOAYHsfp67nXwXeNClNHk2nL4gQIECAAAECBAgQIECAAAECBAgQIPDlAgLuX27nTQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOBXAcF2R4HAB4Enx7PZKQ8CBAgQIECAAAECBAgQIECAAAECBL5MQMD9y9y8RYAAAQIECBAgQIAAAQIECBAgQIAAAQIECESEYLtjQOAPBV6lnCfj+fyMDwECBAgQIECAAAECBAgQIECAAAECdxMQcL+bl6cJECBAgAABAgQIECBAgAABAgQIECBAgAABwXZngMBtBdzmflspzxEgQIAAAQIECBAgQIAAAQIECBD4VUDA3VEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEbi3gxvZbU3mQwLVArqqXdVVNxtPpayQECBAgQIAAAQIECBAgQIAAAQIECNwsIOB+s5EnCBAgQIAAAQIECBAgQIAAAQIECBAgQIBA7wUE23t/BAB8ncB5VNXp8du3T79uGW8TIECAAAECBAgQIECAAAECBAgQ6L6AgHv3Z6xDAgQIECBAgAABAgQIECBAgAABAgQIECDwxQKC7V9M50UCvxOoIn6olsvJeLFY4CFAgAABAgQIECBAgAABAgQIECBA4I8FBNydDAIECBAgQIAAAQIECBAgQIAAAQIECBAgQOB3AoLtDgWBnQmc54jJw9ns+c52sDABAgQIECBAgAABAgQIECBAgACBFgsIuLd4eEonQIAAAQIECBAgQIAAAQIECBAgQIAAAQLbFhBs37ao9Qh8VuD7tFw+dpu7E0KAAAECBAgQIECAAAECBAgQIEDgUwEBdyeCAAECBAgQIECAAAECBAgQIECAAAECBAgQCMF2h4DAQQTeNClNHk2nLw6yu00JECBAgAABAgQIECBAgAABAgQIFCgg4F7gUJREgAABAgQIECBAgAABAgQIECBAgAABAgT2JSDYvi9p+xD4E4Gcn6XV6tRt7k4JAQIECBAgQIAAAQIECBAgQIAAgQgBd6eAAAECBAgQIECAAAECBAgQIECAAAECBAj0UECwvYdD13LpAq9SzpPxfH5WeqHqI0CAAAECBAgQIECAAAECBAgQILBLAQH3XepamwABAgQIECBAgAABAgQIECBAgAABAgQIFCYg2F7YQJRD4PcCT45ns1MwBAgQIECAAAECBAgQIECAAAECBPoqIODe18nrmwABAgQIECBAgAABAgQIECBAgAABAgR6JSDY3qtxa7b9Aq9SSifj6fR1+1vRAQECBAgQIECAAAECBAgQIECAAIG7CQi4383L0wQIECBAgAABAgQIECBAgAABAgQIECBAoFUCgu2tGpdiCXwscB5VdXr89u1TLAQIECBAgAABAgQIECBAgAABAgT6JCDg3qdp65UAAQIECBAgQIAAAQIECBAgQIAAAQIEeiMg2N6bUWu04wK5ql7Wl5cn48Vi0fFWtUeAAAECBAgQIECAAAECBAgQIEDgWkDA3UEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIdEhBs79AwtULgvwLnOWLycDZ7DoUAAQIECBAgQIAAAQIECBAgQIBA1wUE3Ls+Yf0RIECAAAECBAgQIECAAAECBAgQIECAQC8EBNt7MWZN9lygivihWi4nbnPv+UHQPgECBAgQIECAAAECBAgQIECg4wIC7h0fsPYIECBAgAABAgQIECBAgAABAgQIECBAoNsCgu3dnq/uCPyBwJsmpcmj6fQFHQIECBAgQIAAAQIECBAgQIAAAQJdFBBw7+JU9USAAAECBAgQIECAAAECBAgQIECAAAECnRcQbO/8iDVI4M8Fcn52PJ8/xkSAAAECBAgQIECAAAECBAgQIECgawIC7l2bqH4IECBAgAABAgQIECBAgAABAgQIECBAoNMCgu2dHq/mCNxV4FXKeTKez8/u+qLnCRAgQIAAAQIECBAgQIAAAQIECJQqIOBe6mTURYAAAQIECBAgQIAAAQIECBAgQIAAAQIEPhIQbHccCBD4E4Enx7PZKSECBAgQIECAAAECBAgQIECAAAECXRAQcO/CFPVAgAABAgQIECBAgAABAgQIECBAgAABAp0VEGzv7Gg1RmCrArmqXtZVNRlPp6+3urDFCBAgQIAAAQIECBAgQIAAAQIECOxZQMB9z+C2I0CAAAECBAgQIECAAAECBAgQIECAAAECtxEQbL+NkmcIEPiNwHnO+fHD+fw7MgQIECBAgAABAgQIECBAgAABAgTaKiDg3tbJqZsAAQIECBAgQIAAAQIECBAgQIAAAQIEOikg2N7JsWqKwF4FqogfquVyMl4sFnvd2GYECBAgQIAAAQIECBAgQIAAAQIEtiAg4L4FREsQIECAAAECBAgQIECAAAECBAgQIECAAIGvFRBs/1pB7xMg8BuB8xwxeTibPSdDgAABAgQIECBAgAABAgQIECBAoE0CAu5tmpZaCRAgQIAAAQIECBAgQIAAAQIECBAgQKBzAoLtnRuphgiUJZDzs7RanbrNvayxqIYAAQIECBAgQIAAAQIECBAgQODzAgLuTgcBAgQIECBAgAABAgQIECBAgAABAgQIEDiAgGD7AdBtSaC/Am9Szifj+fysvwQ6J0CAAAECBAgQIECAAAECBAgQaIuAgHtbJqVOAgQIECBAgAABAgQIECBAgAABAgQIEOiEgGB7J8aoCQJtFXhyPJudtrV4dRMgQIAAAQIECBAgQIAAAQIECPRDQMC9H3PWJQECBAgQIECAAAECBAgQIECAAAECBAgcWECw/cADsD0BAu8FXqWUTsbT6WskBAgQIECAAAECBAgQIECAAAECBEoUEHAvcSpqIkCAAAECBAgQIECAAAECBAgQIECAAIHOCAi2d2aUGiHQJYHzqKrT47dvn3apKb0QIECAAAECBAgQIECAAAECBAh0Q0DAvRtz1AUBAgQIECBAgAABAgQIECBAgAABAgQIFCYg2F7YQJRDgMDvBKqIH6rlcjJeLBZ4CBAgQIAAAQIECBAgQIAAAQIECJQiIOBeyiTUQYAAAQIECBAgQIAAAQIECBAgQIAAAQKdEBBs78QYNUGgTwLnOWLycDZ73qem9UqAAAECBAgQIECAAAECBAgQIFCugIB7ubNRGQECBAgQIECAAAECBAgQIECAAAECBAi0SECwvUXDUioBAn8k8H1aLh+7zd3hIECAAAECBAgQIECAAAECBAgQOLSAgPuhJ2B/AgQIECBAgAABAgQIECBAgAABAgQIEGi1wI/ffPO3pmlOI+KfrW5E8QQIEIh406Q0eTSdvoBBgAABAgQIECBAgAABAgQIECBA4FACAu6HkrcvAQIECBAgQIAAAQIECBAgQIAAAQIECLRaQLC91eNTPAECfy7w5Hg22/yPOz4ECBAgQIAAAQIECBAgQIAAAQIE9i4g4L53chsSIECAAAECBAgQIECAAAECBAgQIECAQJsFBNvbPD21EyBwB4FXKefJeD4/u8M7HiVAgAABAgQIECBAgAABAgQIECDw1QIC7l9NaAECBAgQIECAAAECBAgQIECAAAECBAgQ6IOAYHsfpqxHAgR+I3AeVXV6/PbtUzIECBAgQIAAAQIECBAgQIAAAQIE9iUg4L4vafsQIECAAAECBAgQIECAAAECBAgQIECAQCsFBNtbOTZFEyCwRYFcVS/ry8uT8WKx2OKyliJAgAABAgQIECBAgAABAgQIECDwhwIC7g4GAQIECBAgQIAAAQIECBAgQIAAAQIECBD4AwHBdseCAAECnwic54jJw9nsORcCBAgQIECAAAECBAgQIECAAAECuxQQcN+lrrUJECBAgAABAgQIECBAgAABAgQIECBAoHUCgu2tG5mCCRDYr8D3abl87Db3/aLbjQABAgQIECBAgAABAgQIECDQJwEB9z5NW68ECBAgQIAAAQIECBAgQIAAAQIECBAg8FkBwXaHgwABArcWeJNyPhnP52e3fsODBAgQIECAAAECBAgQIECAAAECBG4pIOB+SyiPESBAgAABAgQIECBAgAABAgQIECBAgEA3BQTbuzlXXREgsBeBJ8ez2eledrIJAQIECBAgQIAAAQIECBAgQIBAbwQE3Hszao0SIECAAAECBAgQIECAAAECBAgQIECAwMcCgu3OAwECBLYi8CqldDKeTl9vZTWLECBAgAABAgQIECBAgAABAgQI9F5AwL33RwAAAQIECBAgQIAAAQIECBAgQIAAAQIE+iUg2N6veeuWAIG9CJxHVZ0ev337dC+72YQAAQIECBAgQIAAAQIECBAgQKDTAgLunR6v5ggQIECAAAECBAgQIECAAAECBAgQIEDgvYBgu7PQB4HNL34G8d9f/wwifdJ2neqI6ve/HqojRdp87w6fplnHOprfv5FzrJv1h/+eIz4810SO/37nDpt5tBUCVcQP1XI5GS8Wi1YUrEgCBAgQIECAAAECBAgQIECAAIEiBQTcixyLoggQIECAAAECBAgQIECAAAECBAgQIEBgWwKC7duStM4hBT4Orr8PrX8cVh+m4SHL+6K9PwTkPwrEX/0amF/FJhbv01KB8xwxeTibPW9p/comQIAAAQIECBAgQIAAAQIECBA4sICA+4EHYHsCBAgQIECAAAECBAgQIECAAAECBAgQ2I2AYPtuXK26O4HN/ekpqrgOsFcp6pSuv67TYHebFrxyk5tY53XkponNnzfhdzfAFzyw35aW87O0Wp26zb1FM1MqAQIECBAgQIAAAQIECBAgQKAQAQH3QgahDAIECBAgQIAAAQIECBAgQIAAAQIECBDYjoBg+3YcrbIbgfc3sdfX0fWIuh7E5s8pbeLtPrcVWDdX16H3dbO+Dr5fRXbn+23x9vvcm5TzyXg+P9vvtnYjQIAAAQIECBAgQIAAAQIECBBos4CAe5unp3YCBAgQIECAAAECBAgQIECAAAECBAgQ+CAg2O4wlCawiaxvwuv15hb2TZC9qiNVqbQyO1NP06yvb3wXei9ypE+OZ7PTIitTFAECBAgQIECAAAECBAgQIECAQHECAu7FjURBBAgQIECAAAECBAgQIECAAAECBAgQIHAXAcH2u2h5dlcCw02IfRNmr1LUqY46DXa1lXXvILC56X0TeF/lX256b+7wrke3K5Cr6mVdVZPxdPp6uytbjQABAgQIECBAgAABAgQIECBAoGsCAu5dm6h+CBAgQIAAAQIECBAgQIAAAQIECBAg0BMBwfaeDLrANt/fzD6sNkF2YfYCR/TZkja3vF81VwLvhxvaec758cP5/LvDlWBnAgQIECBAgAABAgQIECBAgACB0gUE3EufkPoIECBAgAABAgQIECBAgAABAgQIECBA4BMBwXYHYp8Cm1+kDKKKweZ29noQwzTc5/b22rHAJvC+bK7iKl/FVeTIO97P8r8IVBE/VMvlZLxYLJgQIECAAAECBAgQIECAAAECBAgQ+K2AgLszQYAAAQIECBAgQIAAAQIECBAgQIAAAQKtEBBsb8WYWl9kug60p6irOoZuZ2/9PO/awGq9jKtN6D3W0dz1Zc/fVeBNk9Lk0XT64q4vep4AAQIECBAgQIAAAQIECBAgQKDbAgLu3Z6v7ggQIECAAAECBAgQIECAAAECBAgQINB6AcH21o+w6AbeB9qHVR2DNIiU6qLrVdzD64JIAAAgAElEQVT+BNbNVaw2Yfe8ivX+tu3fTjk/O57PH/evcR0TIECAAAECBAgQIECAAAECBAh8TkDA3dkgQIAAAQIECBAgQIAAAQIECBAgQIAAgSIFBNuLHEvri9r8YmQQVYyqgUB766e5vwaaTdC9uRJ23x35q5TzZDyfn+1uCysTIECAAAECBAgQIECAAAECBAi0RUDAvS2TUicBAgQIECBAgAABAgQIECBAgAABAgR6IiDY3pNB77HNYVQxqAYxTHXUabDHnW3VRQFh9x1Otar+7/jt26c73MHSBAgQIECAAAECBAgQIECAAAECLRAQcG/BkJRIgAABAgQIECBAgAABAgQIECBAgACBPggItvdhyvvpMUXEKOoYpDqG9Wg/m9qllwLrza3u61UsYx1NLwW233Suqpf15eXJeLFYbH91KxIgQIAAAQIECBAgQIAAAQIECLRBQMC9DVNSIwECBAgQIECAAAECBAgQIECAAAECBDosINje4eHusbX3t7SP0iBSqve4s60I/CKwWi9juQm8i7pv40ic54jJw9ns+TYWswYBAgQIECBAgAABAgQIECBAgEC7BATc2zUv1RIgQIAAAQIECBAgQIAAAQIECBAgQKAzAoLtnRnlQRrZ3NI+iBSbQLtb2g8yApt+RqDJzfWt7pd5Jer+tack52dptTp1m/vXQnqfAAECBAgQIECAAAECBAgQINAuAQH3ds1LtQQIECBAgAABAgQIECBAgAABAgQIEGi9gGB760d4sAY297KPoo5hPYw6DQ5Wh40J3FZg1ayuw+5udb+t2B8+9yblfDKez8++ahUvEyBAgAABAgQIECBAgAABAgQItEZAwL01o1IoAQIECBAgQIAAAQIECBAgQIAAAQIE2i0g2N7u+R2q+mFUMagG1ze1p7SJuPsQaJ+AW923MrMnx7PZ6VZWsggBAgQIECBAgAABAgQIECBAgEDRAgLuRY9HcQQIECBAgAABAgQIECBAgAABAgQIEGi/gGB7+2e47w42ofZRNYhBPYxUpX1vbz8COxVYrZdx2axiFXmn+3Rx8VxVL+uqmoyn09dd7E9PBAgQIECAAAECBAgQIECAAAECvwgIuDsJBAgQIECAAAECBAgQIECAAAECBAgQILATAcH2nbB2dlGh9s6OVmOfEWiadVysL2MVjaj73U7Jec758cP5/Lu7veZpAgQIECBAgAABAgQIECBAgACBtggIuLdlUuokQIAAAQIECBAgQIAAAQIECBAgQIBASwQE21syqALKFGovYAhKOLhAk5tYXl3GZayjOXg17SmgivihWi4n48Vi0Z6qVUqAAAECBAgQIECAAAECBAgQIHAbAQH32yh5hgABAgQIECBAgAABAgQIECBAgAABAgRuFBBsv5HIAxEh1O4YEPi8wCbo/i6vYg3ptgJvmpQmj6bTF7d9wXMECBAgQIAAAQIECBAgQIAAAQLlCwi4lz8jFRIgQIAAAQIECBAgQIAAAQIECBAgQKBoAcH2osdTRHFC7UWMQREtElg1q7hcL2MVuUVVH7TUJ8ez2elBK7A5AQIECBAgQIAAAQIECBAgQIDA1gQE3LdGaSECBAgQIECAAAECBAgQIECAAAECBAj0S0CwvV/zvmu3dUSMqmGM0iBS2nzlQ4DAXQU2QfflehXLaO76ah+ff5Vynozn87M+Nq9nAgQIECBAgAABAgQIECBAgECXBATcuzRNvRAgQIAAAQIECBAgQIAAAQIECBAgQGAPAoLte0Bu6RZpE2qPOo7qkVB7S2eo7DIFmmYdF+tLQfebx3MeVXV6/Pbt05sf9QQBAgQIECBAgAABAgQIECBAgECpAgLupU5GXQQIECBAgAABAgQIECBAgAABAgQIEChMQLC9sIEUUs7mFw3DSDGqhzFMw0KqUgaBbgoIut9urlXED9VyORkvFovbveEpAgQIECBAgAABAgQIECBAgACBkgQE3EuahloIECBAgAABAgQIECBAgAABAgQIECBQoIBge4FDKaCkYVQxqgYxGhwVUI0SCPRLQND9VvM+b1I6eTSdvrjV0x4iQIAAAQIECBAgQIAAAQIECBAoRkDAvZhRKIQAAQIECBAgQIAAAQIECBAgQIAAAQJlCQi2lzWPEqpJEXFUDWOUBpFSXUJJaiDQawFB91uMP+dnabU6dZv7Law8QoAAAQIECBAgQIAAAQIECBAoREDAvZBBKIMAAQIECBAgQIAAAQIECBAgQIAAAQKlCAi2lzKJMurY/CJhGCnu1aOo06CMolRBgMAnAoLuNx6IVynnyXg+P7vxSQ8QIECAAAECBAgQIECAAAECBAgcXEDA/eAjUAABAgQIECBAgAABAgQIECBAgAABAgTKEBBsL2MOpVQxjCpG1SBGg6NSSlIHAQI3CAi63wBUVf93/PbtUweJAAECBAgQIECAAAECBAgQIECgbAEB97LnozoCBAgQIECAAAECBAgQIECAAAECBAjsXECwfefErdkgRcRR1DGqR5FS3Zq6FUqAwKcC6+YqLtaXsYqM5jcCuape1peXJ+PFYgGHAAECBAgQIECAAAECBAgQIECgTAEB9zLnoioCBAgQIECAAAECBAgQIECAAAECBAjsXECwfefErdlgc1v7URrGsB61pmaFEiBws8CqWcXleino/nuq8xwxeTibPb9Z0RMECBAgQIAAAQIECBAgQIAAAQL7FhBw37e4/QgQIECAAAECBAgQIECAAAECBAgQIHBgAcH2Aw+gkO2vb2uvhjFKA7e1FzITZRDYlcDy6jIu8iqaXW3Q1nVzfpZWq1O3ubd1gOomQIAAAQIECBAgQIAAAQIEuiog4N7VyeqLAAECBAgQIECAAAECBAgQIECAAAECvxEQbHckNgKjSDGqhzFMQyAECPRM4N3VZbzLq8g96/uGdl+lnCfj+fwMCwECBAgQIECAAAECBAgQIECAQBkCAu5lzEEVBAgQIECAAAECBAgQIECAAAECBAgQ2JmAYPvOaFuz8PVt7VHHaHAUqdp85UOAQF8FmtzE5SboHuu+Enyu7yfHs9kpFAIECBAgQIAAAQIECBAgQIAAgcMLCLgffgYqIECAAAECBAgQIECAAAECBAgQIECAwE4E5t98822V82mV8z92soFFixcYRhVHaRjDelR8rQokQGC/Ak2zjp/X78J97v91z1X1sq6qyXg6fb3fadiNAAECBAgQIECAAAECBAgQIEDgYwEBd+eBAAECBAgQIECAAAECBAgQIECAAAECHRMQbO/YQO/Yzofb2utRpFTf8W2PEyDQN4FVs4qf15fR9K3xz/d7niMmD2ez50gIECBAgAABAgQIECBAgAABAgQOIyDgfhh3uxIgQIAAAQIECBAgQIAAAQIECBAgQGDrAoLtWydt1YKb29pH1SBGg6NW1a1YAgTKEHh3dRnvsvvcP5rG92m5fDxeLBZlTEgVBAgQIECAAAECBAgQIECAAIH+CAi492fWOiVAgAABAgQIECBAgAABAgQIECBAoKMCgu0dHewt2tr8kH8YKe7XR25rv4WXRwgQ+HOBJjdxcfUulu5zfw/1JuV8Mp7Pz5wdAgQIECBAgAABAgQIECBAgACB/QkIuO/P2k4ECBAgQIAAAQIECBAgQIAAAQIECBDYqoBg+1Y5W7VYioj71TAG9TBStfnKhwABAtsTWDWruFhfxnp7S7Z9pSfHs9lp25tQPwECBAgQIECAAAECBAgQIECgLQIC7m2ZlDoJECBAgAABAgQIECBAgAABAgQIECDwq4Bge3+PwjCqOKpHMUzD/iLonACBvQm8u7qMd3kVeW87lrtRrqqXdVVNxtPp63KrVBkBAgQIECBAgAABAgQIECBAoBsCAu7dmKMuCBAgQIAAAQIECBAgQIAAAQIECBDogYBgew+G/Actbn6Qfy/qGNWjSKnuJ4KuCRA4mECTm/j56iLE3K9HcJ4jJg9ns+cHG4iNCRAgQIAAAQIECBAgQIAAAQI9EBBw78GQtUiAAAECBAgQIECAAAECBAgQIECAQLsFBNvbPb8vrX4TZb9XDWM0OPrSJbxHgACBrQmsmlX8vL6MZmsrtnqh79Ny+Xi8WCxa3YXiCRAgQIAAAQIECBAgQIAAAQKFCgi4FzoYZREgQIAAAQIECBAgQIAAAQIECBAgQECwvZ9nYBQpRvUwhmnYTwBdEyBQrMDmNvfl1WVcxLrYGvdY2JuU88l4Pj/b4562IkCAAAECBAgQIECAAAECBAj0QkDAvRdj1iQBAgQIECBAgAABAgQIECBAgAABAm0SEGxv07S2U+vmh/X3oo5RPYqUNne3+xAgQKBcgXVzFRfry1hFLrfI/VX25Hg2O93fdnYiQIAAAQIECBAgQIAAAQIECHRfQMC9+zPWIQECBAgQIECAAAECBAgQIECAAAECLREQbG/JoLZYZoqI+9UwBvUwUrX5yocAAQLtEXh3dRnvsph7rqqXdVVNxtPp6/ZMT6UECBAgQIAAAQIECBAgQIAAgXIFBNzLnY3KCBAgQIAAAQIECBAgQIAAAQIECBDoiYBge08G/VGbw6jiqB7FMA3717yOCRDolEDTrOPn9Tu3uUec54jJw9nseacGrBkCBAgQIECAAAECBAgQIECAwAEEBNwPgG5LAgQIECBAgAABAgQIECBAgAABAgQIbAQE2/t1DjY/kB9Givv1UaRU96t53RIg0HkBt7l/GPH3abl8PF4sFp0fugYJECBAgAABAgQIECBAgAABAjsSEHDfEaxlCRAgQIAAAQIECBAgQIAAAQIECBAg8DkBwfZ+nY0UEUdRx2hwFKnafOVDgACBbgq4zf3DXN+knE/G8/lZNyetKwIECBAgQIAAAQIECBAgQIDAbgUE3Hfra3UCBAgQIECAAAECBAgQIECAAAECBAh8EBBs79dhGEYVo2pwHWz3IUCAQJ8E3Ob+YdpPjmez0z7NXq8ECBAgQIAAAQIECBAgQIAAgW0ICLhvQ9EaBAgQIECAAAECBAgQIECAAAECBAgQ+BMBwfZ+HY9RpBjVwximYb8a1y0BAgQ+EnCb+y8Yuape1lU1GU+nrx0QAgQIECBAgAABAgQIECBAgACB2wkIuN/OyVMECBAgQIAAAQIECBAgQIAAAQIECBC4s4Bg+53JWvvC5oftR1HHUT2KlOrW9qFwAgQIbFvAbe7Xouc5YvJwNnu+bV/rESBAgAABAgQIECBAgAABAgS6KCDg3sWp6okAAQIECBAgQIAAAQIECBAgQIAAgYMKCLYflH+vm6dNsL0aXt/YnqrNVz4ECBAg8FuBdXMVP63fxRrN92m5fDxeLBYoCBAgQIAAAQIECBAgQIAAAQIEPi8g4O50ECBAgAABAgQIECBAgAABAgQIECBAYEsCgu1bgmzBMsOoYlQNYjQ4akG1SiRAgEAZAu9WF3Eh5v4m5Xwyns/PypiKKggQIECAAAECBAgQIECAAAEC5QkIuJc3ExURIECAAAECBAgQIECAAAECBAgQINAyAcH2lg3sK8rdBNuP6lEM0/ArVvEqAQIE+iuwalbx8/oymv4SvO/8yfFsdoqBAAECBAgQIECAAAECBAgQIEDg9wIC7k4FAQIECBAgQIAAAQIECBAgQIAAAQIEvlBAsP0L4Vr22uYH6cNIcb8+ipTqllWvXAIECJQn0OQmfr66iFXk8orbY0W5ql7WVTUZT6ev97itrQgQIECAAAECBAgQIECAAAECxQsIuBc/IgUSIECAAAECBAgQIECAAAECBAgQIFCagGB7aRPZTT2bH6DfizpGg6NIVdrNJlYlQIBAjwWWV5fxc+57zD3Oc8Tk4Wz2vMdHQesECBAgQIAAAQIECBAgQIAAgU8EBNwdCAIECBAgQIAAAQIECBAgQIAAAQIECNxSQLD9llAtf2wTZb9fDa+D7T4ECBAgsFuBplnHf9YXsd7tNm1Y/fu0XD4eLxaLNhSrRgIECBAgQIAAAQIECBAgQIDALgUE3Hepa20CBAgQIECAAAECBAgQIECAAAECBDohINjeiTHe2MQwqjiqRzFMwxuf9QABAgQIbFfgYnUR78Tc36ScT8bz+dl2da1GgAABAgQIECBAgAABAgQIEGiXgIB7u+alWgIECBAgQIAAAQIECBAgQIAAAQIE9igg2L5H7ANuNYoU9+pR1GlwwCpsTYAAAQKr9TJ+apaRUTw5ns1OMRAgQIAAAQIECBAgQIAAAQIE+iog4N7XyeubAAECBAgQIECAAAECBAgQIECAAIHPCgi2d/9wbH44fi/qGNWjSKnufsM6JECAQEsEmmYd/1lf9P4u91xVL+uqmoyn09ctGZ0yCRAgQIAAAQIECBAgQIAAAQJbExBw3xqlhQgQIECAAAECBAgQIECAAAECBAgQaLuAYHvbJ3hz/SkijqphjOphpGrzlQ8BAgQIlChwsbqId72Pucd5jpg8nM2elzgjNREgQIAAAQIECBAgQIAAAQIEdiUg4L4rWesSIECAAAECBAgQIECAAAECBAgQINAaAcH21ozqiwsdRhWjahCjwdEXr+FFAgQIENivwGq9jJ+aZeT9blvibt+n5fLxeLFYlFicmggQIECAAAECBAgQIECAAAEC2xYQcN+2qPUIECBAgAABAgQIECBAgAABAgQIEGiNgGB7a0b1xYVugu1H9SiGafjFa3iRAAECBA4n0DTr+M/6wl3uEW9Szifj+fzscNOwMwECBAgQIECAAAECBAgQIEBgPwIC7vtxtgsBAgQIECBAgAABAgQIECBAgAABAgUJCLYXNIwdlTKKFPfro0ip3tEOliVAgACBfQk0uYmLq3exjGZfW5a8z5Pj2ey05ALVRoAAAQIECBAgQIAAAQIECBD4WgEB968V9D4BAgQIECBAgAABAgQIECBAgAABAq0REGxvzai+qNDND7zvRR2jwVGkKn3RGl4iQIAAgXIFlleX8VNelVvgnirLVfWyvrw8GS8Wiz1taRsCBAgQIECAAAECBAgQIECAwF4FBNz3ym0zAgQIECBAgAABAgQIECBAgAABAgQOISDYfgj1/e25ibLfr4bXwXYfAgQIEOi2wLq5in+v30Xudpu36e48R0wezmbPb/OwZwgQIECAAAECBAgQIECAAAECbRIQcG/TtNRKgAABAgQIECBAgAABAgQIECBAgMCdBATb78TVuoeHUcVRGsawHrWudgUTIECAwJcLNLmJ/1z9HOsvX6I7b+b8LK1Wp25z785IdUKAAAECBAgQIECAAAECBAhECLg7BQQIECBAgAABAgQIECBAgAABAgQIdE5AsL1zI/2koVGkGNXDGKZhtxvVHQECBAj8qcBPq59jGQ2liFcp58l4Pj+DQYAAAQIECBAgQIAAAQIECBDogoCAexemqAcCBAgQIECAAAECBAgQIECAAAECBK4FBNu7fRA2wfb79VGkVHe7Ud0RIECAwK0FlleX8VNe3fr5Tj9YVf93/Pbt0073qDkCBAgQIECAAAECBAgQIECgFwIC7r0YsyYJECBAgAABAgQIECBAgAABAgQIdFtAsL278938EPte1DEaHEWqUncb1RkBAgQIfLHAurmKf6/fRf7iFbrzYq6ql/Xl5cl4sVh0pyudECBAgAABAgQIECBAgAABAn0TEHDv28T1S4AAAQIECBAgQIAAAQIECBAgQKBDAoLtHRrmb1rZRNmPqmGM6qFge3fHrDMCBAhsTaBp1vGf9UWst7Ziqxc6zxGTh7PZ81Z3oXgCBAgQIECAAAECBAgQIECgtwIC7r0dvcYJECBAgAABAgQIECBAgAABAgQItFdAsL29s7up8k2w/f4m2D44uulR3ydAgAABAp8INLmJn68uYuUu919ccn52PJ8/dkwIECBAgAABAgQIECBAgAABAm0TEHBv28TUS4AAAQIECBAgQIAAAQIECBAgQKDHAoLt3R3+MKo4qkcxTMPuNqkzAgQIENiLwMXqIt65y/299auU82Q8n5/tBd8mBAgQIECAAAECBAgQIECAAIEtCAi4bwHREgQIECBAgAABAgQIECBAgAABAgQI7FZAsH23vodcXbD9kPr27pJArqqojj76mw9Sijga/b7FlKIafdnfkJCvVhFXV79fc3X1yX/Pq1VU63WXePXSQoHl1WX8lFctrHwnJZ9HVZ0ev337dCerW5QAAQIECBAgQIAAAQIECBAgsGUBAfctg1qOAAECBAgQIECAAAECBAgQIECAAIHtCQi2b8+ytJVGkeJ+fRQp1aWVph4CxQh8Elq/f++XugaDqAa//k0Hw8H118V/Lt5dl5ibdcRy+Uu5l8uIpglh+OKn1+oC181V/Hv9LnKru9he8VXED9VyORkvFovtrWolAgQIECBAgAABAgQIECBAgMD2BQTct29qRQIECBAgQIAAAQIECBAgQIAAAQIEvlJAsP0rAQt+XbC94OEo7TAC9+5FvL9t/f3t6nWKGP3B7euHqXA/u25uhl9dxYdb4n+9FT5fXkaVxZP3M4Ru7rIJuf+0fhf+ToEP8z1vUjp5NJ2+6ObEdUWAAAECBAgQIECAAAECBAh0QUDAvQtT1AMBAgQIECBAgAABAgQIECBAgACBjggItndkkL9pY/OD6HtRx6geubG9myPW1Q0CH25i34TWh4OoRkfX/27F7eslTLdprm98/xB+v3jn5vcS5tKiGprcxH+ufhZy/3hmOT87ns8ft2iMSiVAgAABAgQIECBAgAABAgR6JCDg3qNha5UAAQIECBAgQIAAAQIECBAgQIBAqQKC7aVO5uvq+hBsHxxFqtLXLeZtAi0RyKPhLwH2o9H/Z+9eduu60jzBf2ufCw9JyRJDl1A6q9vhyOxxZc9yFgYKqGkrp40CggnUrAepKKAHNSrFMGeOFyg4BgV0zBxvEAbqAewHqCor02ne5CApkSJ5Ds9ejU1ZTjvCtng5l335nYAhyd57re/7fVuE4uh/Fr/58eKEdq/5CFRh9/HZxenvMR5HnJ7OZx+rtkLgePIqxlG2opcZNfFZURSPN7a3P5/RepYhQIAAAQIECBAgQIAAAQIECMxEQMB9JowWIUCAAAECBAgQIECAAAECBAgQIEDgOgLPHz58HCk9STn/4jr3u6eeAoLt9ZyLqmYv8E2YfXUUaWUlojqh3Wv5AuNx5LOzi1Pfhd6XP466VXAyOYlTZ7l/eyyHOecn9/f2PqrbrNRDgAABAgQIECBAgAABAgQIdFdAwL27s9c5AQIECBAgQIAAAQIECBAgQIAAgaUJPH/wYDOl9DQi3ltaETaeuUB1RvVqGsSwvzLztS1IYNkCudd7HWKvwuzVCe2ro2WXZP+rCLw56b368ews0nR6lbtd2zKB8flZHOdJy7q6WTsp4vdpPN7cODg4uNlK7iZAgAABAgQIECBAgAABAgQI3FxAwP3mhlYgQIAAAQIECBAgQIAAAQIECBAgQOCSAoLtl4Rq2GWC7Q0bmHIvJXARaF9dfR1or37s9y91n4saInB+Hvnk5OKU93x6Emks7NyQyc2szCrk/ipPIs9sxVYs9Kwsis0H29t/aEU3miBAgAABAgQIECBAgAABAgQaKyDg3tjRKZwAAQIECBAgQIAAAQIECBAgQIBAcwQE25szq6tUKth+FS3X1l3gm0D7+trrk9oF2us+stnWV5avA+/VCe/Hx054n61ubVeblufxcnoq5P7nE/r1vd3d6jvteBEgQIAAAQIECBAgQIAAAQIEliIg4L4UdpsSIECAAAECBAgQIECAAAECBAgQ6IaAYHs75yzY3s65dq2rnFKk9XUntHdt8Jft980J728C79k535ela9p1Qu7fP7Gc0ie9lDY3trc/b9pM1UuAAAECBAgQIECAAAECBAg0X0DAvfkz1AEBAgQIECBAgAABAgQIECBAgACB2gkIttduJDMpSLB9JowWWabAaBRRndC+uhoxHC6zEns3TWA8fn3C+/GriNPTplWv3rcIlOU0jqYnMSX1pwKHOWLz/u7ux2gIECBAgAABAgQIECBAgAABAosUEHBfpLa9CBAgQIAAAQIECBAgQIAAAQIECLRcQLC9nQMeRIqV3jAGxaCdDeqqtQLfOaW9Oq29qD6m4UXghgJl+U3YPR8fR3K6+w1B63F7mcs4On8l5P794/htMR4/2Tg4OKjHtFRBgAABAgQIECBAgAABAgQItF1AwL3tE9YfAQIECBAgQIAAAQIECBAgQIAAgQUICLYvAHkJWwi2LwHdljcWyL1epPX1SO/cdkr7jTUtcCmB6nT3Fy/jIuw+dQb4pcxqepGQ+48O5lmR8+ONvb1Pazo+ZREgQIAAAQIECBAgQIAAAQItEhBwb9EwtUKAAAECBAgQIECAAAECBAgQIEBg0QKC7YsWX8x+gu2LcbbL7ATycBDp9u2LYHv0+7Nb2EoEripwfn4RdM8vX0YaT656t+trInA8eRXjKGtSTc3KSOlX93Z2PqxZVcohQIAAAQIECBAgQIAAAQIEWiYg4N6ygWqHAAECBAgQIECAAAECBAgQIECAwCIEBNsXobz4PQTbF29ux+sLCLVf386dCxIQdl8Q9Hy2EXL/Ydec0ie9s7PHGwcHB/PRtyoBAgQIECBAgAABAgQIECDQdQEB964/AfonQIAAAQIECBAgQIAAAQIECBAgcAUBwfYrYDXo0iIi1norMSgGDapaqV0UEGrv4tRb0vObsPvBYaTptCVNtb8NIfcfnfFhjti8v7v7cfufBB0SIECAAAECBAgQIECAAAECixYQcF+0uP0IECBAgAABAgQIECBAgAABAgQINFBAsL2BQ7tEyVWwfTUNYthfucTVLiGwHIHc60V653ak27cj+v3lFGFXArMUGI8jv3gZ+eXLSDnPcmVrzUFAyP0tqDn/5t7e3pM50FuSAAECBAgQIECAAAECBAgQ6LCAgHuHh691AgQIECBAgKJgYDAAACAASURBVAABAgQIECBAgAABAm8TEGx/m1Az/7tgezPn1qWqc0oXgfYq2B7DYZda12vHBPLxccTLo4hXrzrWebPaPZ2cxEk4ef9HpvZZkfPmxt7ep82arGoJECBAgAABAgQIECBAgACBugoIuNd1MuoiQIAAAQIECBAgQIAAAQIECBAgsEQBwfYl4s9xa8H2OeJaejYCt25FrK9FWl+fzXpWIdAUgfPzixPdq5Pd01SQuo5jG5+fxXGe1LG0utR0GCk9vbez82FdClIHAQIECBAgQIAAAQIECBAg0FwBAffmzk7lBAgQIECAAAECBAgQIECAAAECBGYuINg+c9JaLCjYXosxKOIHBPJwEOnOndeh9qJ6Wr0IdFvAqe71nb+Q+9tnkyJ+n8bjzY2Dg4O3X+0KAgQIECBAgAABAgQIECBAgMD3Cwi4ezIIECBAgAABAgQIECBAgAABAgQIEAjB9nY+BNUbwGtpEMP+Sjsb1FVjBXJKF4H2dPdOxHDY2D4UTmCuAtWp7geHFye7p5znupXFLy8g5H4pq8OyKB4/2N7+w6WudhEBAgQIECBAgAABAgQIECBA4E8EBNw9EgQIECBAgAABAgQIECBAgAABAgQ6LCDY3s7hV2/8jqJ3EWwvkhOx2znlhnY1GkXcvhXp9u2GNqBsAksQKMuoTnXPf9yPNJ0uoQBb/qmAkPuln4lf39vdfXrpq11IgAABAgQIECBAgAABAgQIEPhaQMDdo0CAAAECBAgQIECAAAECBAgQIECggwKC7e0cumB7O+fa9K4uTmu/ffv1ae39ftPbUT+BpQpUp7nHy6OI09Ol1mHzCCH3Sz8FnxVF8Xhje/vzS9/hQgIECBAgQIAAAQIECBAgQKDzAgLunX8EABAgQIAAAQIECBAgQIAAAQIECHRJQLC9vdOuTmxfcWJ7ewfcwM7ycBDpzp1I6+sRhe8k0MARKrnOAienkff3Bd2XPCMh90sP4DDn/OT+3t5Hl77DhQQIECBAgAABAgQIECBAgECnBQTcOz1+zRMgQIAAAQIECBAgQIAAAQIECHRFQLC9vZMeRhGrvZUoil57m9RZswRu3bo4sT1WR82qW7UEmigg6L70qQm5X2kEvy3G4ycbBwcHV7rLxQQIECBAgAABAgQIECBAgEDnBATcOzdyDRMgQIAAAQIECBAgQIAAAQIECHRJQLC9vdMeRIq13kiwvb0jblRnOaVId++8Drb3+42qXbEEWiEg6L7UMQq5X4n/WZHz4429vU+vdJeLCRAgQIAAAQIECBAgQIAAgU4JCLh3atyaJUCAAAECBAgQIECAAAECBAgQ6IqAYHt7J10F21d6wxgUg/Y2qbPGCOThINKdr4PtjalaoQRaLHByGuVXzyONJy1usp6tCblfeS6/vre7+/TKd7mBAAECBAgQIECAAAECBAgQ6ISAgHsnxqxJAgQIECBAgAABAgQIECBAgACBrggItrd30kVErPVWBNvbO+Jmdba2dhFsj9VRs+pWLYGOCOSXLyP/cT/SdNqRjuvRppD71eaQU/qkd3b2eOPg4OBqd7qaAAECBAgQIECAAAECBAgQaLuAgHvbJ6w/AgQIECBAgAABAgQIECBAgACBTggItrd3zFWwfTUNYthfaW+TOmuOwK1bkX6yEdHvN6dmlRLoqkBZRj48jHxwGCnnriosvO/T87M4yU7QvwL8YY7YvL+7+/EV7nEpAQIECBAgQIAAAQIECBAg0HIBAfeWD1h7BAgQIECAAAECBAgQIECAAAEC7RYQbG/vfKs3b0fRuwi2F6mKuXsRWI5ATinS3TuvT2wvPIvLmYJdCdxA4Pw88vOvIl69usEibr2KwPHkVYyjvMotrs35N8Vk8tRp7h4FAgQIECBAgAABAgQIECBAoBIQcPccECBAgAABAgQIECBAgAABAgQIEGiggGB7A4d2hZKrYPuKYPsVxFw6D4Hc670Ott++Ldg+D2BrEli0wMlplLu7kabTRe/cyf2E3K819s+KnDc39vY+vdbdbiJAgAABAgQIECBAgAABAgRaIyDg3ppRaoQAAQIECBAgQIAAAQIECBAgQKALAoLt7Z7yMIpY7a1EUfTa3ajuai1wEWz/ycbrYLsXAQKtE8j7+xH7B63rq44NCblfayqHkdLTezs7H17rbjcRIECAAAECBAgQIECAAAECrRAQcG/FGDVBgAABAgQIECBAgAABAgQIECDQdgHB9nZPeBApVnrDGBSDdjequ3oLjEYRd96JtL5e7zpVR4DAzQXG48jPv4o4Pb35Wlb4UQEh9+s9ICni92k83tw4OPBpjOsRuosAAQIECBAgQIAAAQIECDRaQMC90eNTPAECBAgQIECAAAECBAgQIECAQNsFBNvbPeEiItaKYQx6w3Y3qrt6C4xGkTY2IlZH9a5TdQQIzFwgHx5GfPXHma9rwe8KvJgcxRTKdQQOy6J4/GB7+w/Xudk9BAgQIECAAAECBAgQIECAQHMFBNybOzuVEyBAgAABAgQIECBAgAABAgQItFhAsL3Fw42I6o3ZURrEqL/S7kZ1V2+BW7ci3b4t2F7vKamOwPwFxuMod3cjjSfz36ujO5S5jKPzV0Lu15//r+/t7j69/u3uJECAAAECBAgQIECAAAECBJomIODetImplwABAgQIECBAgAABAgQIECBAoNUCgu2tHu9Fc6PoxUp/JYpUnd/uRWAJAlWw/ScbEf3+Eja3JQECdRXIz7+KePGiruU1vi4h9xuP8LOiKB5vbG9/fuOVLECAAAECBAgQIECAAAECBAjUXkDAvfYjUiABAgQIECBAgAABAgQIECBAgEAXBATb2z/lQaRY642iKHrtb1aH9RQQbK/nXFRFoEYC+fg48u5epJxrVFV7SqlC7i/OXwXda8/0MOf85P7e3kfXXsGNBAgQIECAAAECBAgQIECAQCMEBNwbMSZFEiBAgAABAgQIECBAgAABAgQItFVAsL2tk/3Xvqpz2td6KzEoBu1vVof1FBBsr+dcVEWgrgLn51Fub0caT+paYaPrmpbn8XJ6KuR+syn+thiPn2wcHBzcbBl3EyBAgAABAgQIECBAgAABAnUVEHCv62TURYAAAQIECBAgQIAAAQIECBAg0GoBwfZWj/eiuerN17U0iGF/pf3N6rCeAoLt9ZyLqgg0RKA6yT2OjhpSbbPKFHKfybyeFTk/3tjb+3Qmq1mEAAECBAgQIECAAAECBAgQqJWAgHutxqEYAgQIECBAgAABAgQIECBAgACBtgsItrd9wq/7G0UvVvorUaTq/HYvAgsWEGxfMLjtCLRXIL98GbH3vL0NLrGz8flZHGen5N94BCn96t7Ozoc3XscCBAgQIECAAAECBAgQIECAQK0EBNxrNQ7FECBAgAABAgQIECBAgAABAgQItFVAsL2tk/1uX4NIsdYbRVH0utGwLuslINher3mohkBbBMbjKP/ly0g5t6Wj2vQh5D6bUeSUPumdnT3eODg4mM2KViFAgAABAgQIECBAgAABAgSWLSDgvuwJ2J8AAQIECBAgQIAAAQIECBAgQKDVAoLtrR7vN81V57Sv9VZiUAy60bAu6yUg2F6veaiGQBsFqpD77m6ksRPHZz3ek8lJnMZ01st2cb3DHLF5f3f34y42r2cCBAgQIECAAAECBAgQINA2AQH3tk1UPwQIECBAgAABAgQIECBAgAABArUQEGyvxRjmXkT1BusoejEarM59LxsQ+DMBwXYPBQECixQoyyi//FLIfQ7mx5NXMY5yDit3cMmcf3Nvb+9JBzvXMgECBAgQIECAAAECBAgQaJWAgHurxqkZAgQIECBAgAABAgQIECBAgACBZQsIti97AovbfxhFrPZWoih6i9vUTgQqAcF2zwEBAssSEHKfm/yLyZFz3Gen+1mR8+bG3t6ns1vSSgQIECBAgAABAgQIECBAgMAiBQTcF6ltLwIECBAgQIAAAQIECBAgQIAAgdYKCLa3drR/1lgVZ6+C7YNi0J2mdVoPgbW1SPfvRfT79ahHFQQIdFOgLCM//yri6Kib/c+p6zKXcXT+Ssh9dr6HkdLTezs7H85uSSsRIECAAAECBAgQIECAAAECixIQcF+UtH0IECBAgAABAgQIECBAgAABAgRaKSDY3sqxfm9T1ZupozSIUX+lO03rtB4Co1GkjY2I1VE96lEFAQIEIiLv7gm5z/hJKMtpvJieRJ7xul1eLkX8Po3HmxsHBwdddtA7AQIECBAgQIAAAQIECBBomoCAe9Mmpl4CBAgQIECAAAECBAgQIECAAIFaCAi212IMCytiGEWs9kdRpGJhe9qIQAi2ewgIEKi5gJD77Ac0Lc/jxfR09gt3e8VnZVFsPtje/kO3GXRPgAABAgQIECBAgAABAgSaIyDg3pxZqZQAAQIECBAgQIAAAQIECBAgQKAGAoLtNRjCAkvoRcRqbyUGxWCBu9qq6wK514t0/16k9fWuU+ifAIEGCJRffBFpPGlApc0pcXx+FseZ6Rwm9ut7u7tP57CuJQkQIECAAAECBAgQIECAAIEZCwi4zxjUcgQIECBAgAABAgQIECBAgAABAu0UEGxv51x/qKvqjdNRGsSov9KtxnW7VIGLYPtPNiLdvr3UOmxOgACBKwmUZZRffinkfiW0t198OjmJk5i+/UJXXEkgp/RJL6XNje3tz690o4sJECBAgAABAgQIECBAgACBhQoIuC+U22YECBAgQIAAAQIECBAgQIAAAQJNExBsb9rEbl7vIFKs9VejSMXNF7MCgUsI5JQi3b0T6c6diMJzdwkylxAgUDcBIfe5TOR48irGUc5l7Y4vepgjNu/v7n7ccQftEyBAgAABAgQIECBAgACB2goIuNd2NAojQIAAAQIECBAgQIAAAQIECBBYlsD+3bt3y+HwSURsRsR7y6rDvosVqGLFa72VGBSDxW5st24LvPPOxantgu3dfgx0T6AVAufnUf7zF5FybkU7dWiizGUcnb9yjvv8hvHbYjx+snFwcDC/LaxMgAABAgQIECBAgAABAgQIXEdAwP06au4hQIAAAQIECBAgQIAAAQIECBBopcC3gu1VuP1OK5vU1PcKrEYvRoNVOgQWJ3Dr1utge7+/uD3tRIAAgXkLjMeRv/iXee/SqfWrkPuL81fhYwNzG/tnRc6bG3t7n85tBwsTIECAAAECBAgQIECAAAECVxYQcL8ymRsIECBAgAABAgQIECBAgAABAgTaJiDY3raJXr6fQaRY642iKHqXv8mVBG4iMBpF2tiIWB3dZBX3EiBAoLYC+eXLiL3nta2viYVNy/N4MT1tYunNqTmlX93b2fmwOQWrlAABAgQIECBAgAABAgQItFtAwL3d89UdAQIECBAgQIAAAQIECBAgQIDAjwgItnf38ajeGF0vhjHoDbuLoPOFCuRe7+LE9nT79kL3tRkBAgSWIZB39yKOjpaxdWv3HJ+fxXGetLa/OjSWIn6fxuPNjYODgzrUowYCBAgQIECAAAECBAgQINBlAQH3Lk9f7wQIECBAgAABAgQIECBAgACBjgoItnd08F+3PYperPRXokhFtyF0vxCBnFKku3den9ruRYAAgQ4JlF98EWkskD3LkZ9MTuI0prNc0lp/LnBYFsXjB9vbf4BDgAABAgQIECBAgAABAgQILE9AwH159nYmQIAAAQIECBAgQIAAAQIECBBYsIBg+4LBa7ZdFWdf663EoBjUrDLltFbg1q1I9+9FFD5M0doZa4wAgR8WOD+P8p+/iJQzpRkKHE2OYxJMZ0j6/Uvl/Jt7e3tP5r6PDQgQIECAAAECBAgQIECAAIHvFRBw92AQIECAAAECBAgQIECAAAECBAi0XkCwvfUjfmuDq9GL0WD1rde5gMBMBEaj18H24XAmy1mEAAECTRXIL19G7D1vavm1rLvMZbw8fxVlLatrXVGfFUXxeGN7+/PWdaYhAgQIECBAgAABAgQIECBQcwEB95oPSHkECBAgQIAAAQIECBAgQIAAAQLXFxBsv75dW+4cRIrV3kr0in5bWtJHjQVyr3cRbE/r6zWuUmkECBBYrEDe3ol49Wqxm7Z8t2l5Hi+np85xX8ycD3POT+7v7X20mO3sQoAAAQIECBAgQIAAAQIECFQCAu6eAwIECBAgQIAAAQIECBAgQIAAgdYJCLa3bqRXbqh643OUBjHqr1z5XjcQuKpATinS3TuR7tyJKIqr3u56AgQItFugLKN89k+Rcm53nwvubnx+Fsd5suBdO73db4vx+MnGwcFBpxU0T4AAAQIECBAgQIAAAQIEFiQg4L4gaNsQIECAAAECBAgQIECAAAECBAjMX0Cwff7GTdihOrV9rTeKoug1oVw1Nl1gbe3i1Pbo+y4BTR+l+gkQmJ9APj6O2Nmd3wYdXfl48irGUXa0+6W0/azI+fHG3t6nS9ndpgQIECBAgAABAgQIECBAoEMCAu4dGrZWCRAgQIAAAQIECBAgQIAAAQJtFRBsb+tkr9ZX9WbnejGMQW94tRtdTeAaArnXi+Lhw4jV0TXudgsBAgS6J5C/3Io4Pe1e43Pu+MXkKKZz3sPyfyKQ0q/u7ex8yIUAAQIECBAgQIAAAQIECBCYn4CA+/xsrUyAAAECBAgQIECAAAECBAgQIDBnAcH2OQM3aPmLU9v7q1GkokFVK7WJAjmlSHfvRNrYaGL5aiZAgMDyBM7PI//TPy9v/5buXJbTeDE9idzS/uraVk7pk97Z2eONg4ODutaoLgIECBAgQIAAAQIECBAg0GQBAfcmT0/tBAgQIECAAAECBAgQIECAAIGOCgi2d3Tw39O2U9s9CwsVWFuLdP9eRL+/0G1tRoAAgbYI5P39iH154FnPczIdx1E5nvWy1nu7wGGO2Ly/u/vx2y91BQECBAgQIECAAAECBAgQIHAVAQH3q2i5lgABAgQIECBAgAABAgQIECBAYKkCgu1L5a/d5k5tr91IWltQ7vWiePgwYnXU2h41RoAAgYUIlGWUz/4pUnbe+Ky9TycncRLTWS9rvcsI5Pybe3t7Ty5zqWsIECBAgAABAgQIECBAgACBywkIuF/OyVUECBAgQIAAAQIECBAgQIAAAQJLFBBsXyJ+Dbd2ansNh9LmkjbuRrpzJ6Io2tyl3ggQILAwAae4z4/6aHIck/DhgfkJ/+jKnxU5b27s7X26pP1tS4AAAQIECBAgQIAAAQIEWiUg4N6qcWqGAAECBAgQIECAAAECBAgQINAuAcH2ds1zFt04tX0Wita4lMBoFOnhg4h+/1KXu4gAAQIELi9wcYr71Gnjlxe73JVlLuPF+SsR98txzeOqw5zzk/t7ex/NY3FrEiBAgAABAgQIECBAgACBLgkIuHdp2nolQIAAAQIECBAgQIAAAQIECDREQLC9IYNaYJlObV8gdse3yilFun8v0u3bHZfQPgECBOYnkF++jNh7Pr8NOrzypJzE0fSswwLLbz1F/D6Nx5sbBwcHy69GBQQIECBAgAABAgQIECBAoJkCAu7NnJuqCRAgQIAAAQIECBAgQIAAAQKtFBBsb+VYb9yUU9tvTGiBywrcunURbo+iuOwdriNAgACBawo4xf2acJe47XRyEifhhPxLUM3zkmdlUWw+2N7+wzw3sTYBAgQIECBAgAABAgQIEGirgIB7WyerLwIECBAgQIAAAQIECBAgQIBAgwQE2xs0rAWW6tT2BWJ3fKvc60Xx8GHE6qjjEtonQIDA4gTy/n7EvgOu5yX+YnIk4j4v3Kut++t7u7tPr3aLqwkQIECAAAECBAgQIECAAAEBd88AAQIECBAgQIAAAQIECBAgQIDA0gQE25dGX/uNndpe+xG1p8B33on0kw2ntrdnojohQKApAmUZF6e459yUihtVZ1lO48X0JOguf2w5pU96KW1ubG9/vvxqVECAAAECBAgQIECAAAECBJohIODejDmpkgABAgQIECBAgAABAgQIECDQKgHB9laNc6bNVG9YjtIgRv2Vma5rMQJ/KpCHg9entg+HcAgQIEBgSQJ5dy/i6GhJu7d/28l0HEfluP2NNqPDwxyxeX939+NmlKtKAgQIECBAgAABAgQIECCwXAEB9+X6250AAQIECBAgQIAAAQIECBAg0CkBwfZOjfvKzfYi4lZvNYqi+pkXgTkKbNyNtLExxw0sTYAAAQKXEhiPI3/xL5e61EXXEzievIpxlNe72V2zF8j5N8Vk8nTj4OBg9otbkQABAgQIECBAgAABAgQItEdAwL09s9QJAQIECBAgQIAAAQIECBAgQKC2AoLttR1NbQpbjV6MBqu1qUch7RRwans756orAgSaLVB+8UWk8aTZTdS4+jKX8fL8lYh7vWb0WZHz5sbe3qf1Kks1BAgQIECAAAECBAgQIECgPgIC7vWZhUoIECBAgAABAgQIECBAgAABAq0TEGxv3Uhn3lBxcWr7KHpFf+ZrW5DAdwSc2u6BIECAQC0F8suXEXvPa1lbW4qalufxYnralnba0sdhpPT03s7Oh21pSB8ECBAgQIAAAQIECBAgQGCWAgLus9S0FgECBAgQIECAAAECBAgQIECAwIWAYLsH4TICo+jFSn8lilTF3L0IzEfAqe3zcbUqAQIEZiZQlpE/fzaz5Sz0/QKnk5M4iSmemgmkiN+n8Xhz4+DgoGalKYcAAQIECBAgQIAAAQIECCxVQMB9qfw2J0CAAAECBAgQIECAAAECBAi0S0CwvV3znFc31ZuS68UwBr3hvLawLoHXAk5t9yQQIECgEQJ5eyfi1atG1NrkIl9MjkTc6znAw7IoHj/Y3v5DPctTFQECBAgQIECAAAECBAgQWLyAgPvize1IgAABAgQIECBAgAABAgQIEGidgGB760Y6t4YGkWKtv+rU9rkJW7gScGq754AAAQLNEsgvX0bsPW9W0Q2stiyn8WJ6ErmBtXek5F/f29192pFetUmAAAECBAgQIECAAAECBH5UQMDdA0KAAAECBAgQIECAAAECBAgQIHBtAcH2a9N18sbVNIhRf6WTvWt6gQLvvBPp/r0FbmgrAgQIELixQFlG/vzZjZexwNsFTs/P4iRP3n6hK5Yl8FlRFI83trc/X1YB9iVAgAABAgQIECBAgAABAnUQEHCvwxTUQIAAAQIECBAgQIAAAQIECBBomIBge8MGtuRyexGx3htFr+gvuRLbt1kg93pRPHwYsTpqc5t6I0CAQGsF8pdbEaenre2vTo0dTY5j4hz3Oo3kT2s5zBGb93d3P65zkWojQIAAAQIECBAgQIAAAQLzFBBwn6eutQkQIECAAAECBAgQIECAAAECLRMQbG/ZQBfQzjCKWO2PokjFAnazRWcFbt16fWp74Tnr7DOgcQIEGi+Q9/cj9g8a30cTGijLabyYnoi4139Yvy3G4ycbBwd+Y9R/ViokQIAAAQIECBAgQIAAgRkLCLjPGNRyBAgQIECAAAECBAgQIECAAIE2Cgi2t3Gq8+2peuNxLQ1i2F+Z70ZW77RATinSwweR1tc77aB5AgQItELg5DTy1lYrWmlCE6fnZ3GSJ00otes1flbkvLmxt/dp1yH0T4AAAQIECBAgQIAAAQLdEhBw79a8dUuAAAECBAgQIECAAAECBAgQuJKAYPuVuFz8tUAvIm71VqMoqp95EZiTwGh0EW6Pfn9OG1i2FgJlGXE2/rNS8vgsovpvP/aq7nvbNT90f/VcDd7ybBVFpOH3fIinus9zWYvHRxHNE8j/8381r+gGV3w0OY6Jc9ybMcGUfnVvZ+fDZhSrSgIECBAgQIAAAQIECBAgcHMBAfebG1qBAAECBAgQIECAAAECBAgQINA6AcH21o10YQ2Noherg9WF7Wejjgps3I20sdHR5hva9ngcMX0dSP9OOH1yHnF+/k1T+ewsUs4NbfKHy87DQaRvf+hnOIzoFa9v+NOg/Oqodf1riMBlBfKXWxGnp5e93HU3FCjLaRxOT264itsXJZAifp/G482Ng4ODRe1pHwIECBAgQIAAAQIECBAgsCwBAfdlyduXAAECBAgQIECAAAECBAgQIFBDAcH2Gg6lISVVbzSuF8MY9IYNqViZTRTIvV4Uf/EoogoHe9VD4Ovgej6fvA6qVyH26t9VQfbJJNJ0Wo86m1rF6Ouwe1FErHz93Pf7kfqD1x0Jwzd1sur+AYH8/KuIFy/4LFDgdHISJ+Fr9QLJb7rVYVkUjx9sb//hpgu5nwABAgQIECBAgAABAgQI1FlAwL3O01EbAQIECBAgQIAAAQIECBAgQGBBAoLtC4Ju6Ta9iLjVW43i26cTt7RXbS1R4NatSPfvXZx27bVAgZPXJynn069P+P36105YXuAMLrFV9eGPNBi8/v3xdRA+jb7+bhrVr/2+uYSiS+ogkF++jNh7XodSOlXDi8mRiHvTJp7zb+7t7T1pWtnqJUCAAAECBAgQIECAAAEClxUQcL+slOsIECBAgAABAgQIECBAgAABAi0UEGxv4VAX3NIoerE6+DpEueC9bdcNgZzSRbA93b7djYaX0eXJaeRy+vrk9cn5xUns+ewsUs7LqMaecxLIw0Gk6oNI1XdA6BUXP1782inwcxK37LUEqq9HW1vXutVN1xeYlJM4mp5dfwF3Lkvgs6IoHm9sb3++rALsS4AAAQIECBAgQIAAAQIE5iUg4D4vWesSIECAAAECBAgQIECAAAECBGosINhe4+E0pLTqjcX1YhiD3rAhFSuziQJVILd4+PB1INfrZgJlGXE2jjw+ex1iH48jTyaRptObrevu9giMRv96Any/H6k/eH0avNPf2zPjJnRSlpE/f9aESltX48nkJE6d497EuR7mnJ/c39v7qInFq5kAAQIECBAgQIAAAQIECPyQgIC7Z4MAAQIECBAgQIAAAQIECBAg0CEBwfYODXuOrfYi4lZvNYrq5F8vAvMSuHXr4uR24dprVncBnAAAIABJREFUAFfh9bOzi5PYozoNWZD9Gohu+Y5AFX7v9yMG/dcnvw8GPnjiEZmbQP6f/2tua1v4hwXKXMaL81fhe3c09in5bTEeP9k4ODhobAcKJ0CAAAECBAgQIECAAAEC3xIQcPc4ECBAgAABAgQIECBAgAABAgQ6ICDY3oEhL6jFYRSxPlhb0G626aJATuki2J5u3+5i+1fvuQqwf+tU9jg9vfoa7iBwTYHc670Ou6++DsBfnPpe/dyLwA0EBNxvgHfDWyfTcRyV4xuu4vYlCjwrcn68sbf36RJrsDUBAgQIECBAgAABAgQIEJiJgID7TBgtQoAAAQIECBAgQIAAAQIECBCop4Bgez3n0sSqqjcS19Ighv2VJpav5oYI5OEgiocPnQz9Q/N6czL72Tjy6Umk8aQhk1Vm1wS+E3x34nvXxn/jfvOXW+HDOjdmvPYCR5PjmDjH/dp+tbgxpV/d29n5sBa1KIIAAQIECBAgQIAAAQIECFxTQMD9mnBuI0CAAAECBAgQIECAAAECBAjUWUCwvc7TaV5tRUTc6o2iV/SbV7yKmyNw69bFye1RVE+cV5RlxNdB9qhOaT87i5QzGAKNFqg+xJKGKxGDfqTRasTK0O/5Rk90PsULuM/H9bKrluU0Dqcnl73cdTUVyCl90js7e7xxcHBQ0xKVRYAAAQIECBAgQIAAAQIEflRAwN0DQoAAAQIECBAgQIAAAQIECBBokYBge4uGWZNWBpFirb8aRRI6rslI2lnGvZ9EunOnnb1dtqvz88gnJ9+E2p3Oflk41zVd4M9Oe19Ziej7QFXT53qT+gXcb6I3m3tPJydxEtPZLGaVZQoc5ojN+7u7Hy+zCHsTIECAAAECBAgQIECAAIHrCAi4X0fNPQQIECBAgAABAgQIECBAgACBGgp89dOfPomcn0ZEx1OiNRxOQ0tajV6MBqsNrV7ZTRDIKUXxl+9GDIdNKHe2Nb4JtFens5+cRJoKEs4W2GpNFqi+NqQq6L46uvj6cPFzofcmj/RKtQu4X4lrLheXuYwX56/C9w2ZC+/iF835N/f29p4sfmM7EiBAgAABAgQIECBAgACB6wsIuF/fzp0ECBAgQIAAAQIECBAgQIAAgVoIPH/wYDOlVAXb36tFQYpovED1puF6MYxBr4Oh48ZPrzkN5OEginffjSg68t0ByvL1Ce3HrwTam/OYqrRGAn8Wel9d7c7XjxrNYRGl5P/5vxaxjT3eIjA+P4vjPOHUHoHPipw3N/b2Pm1PSzohQIAAAQIECBAgQIAAgTYLCLi3ebp6I0CAAAECBAgQIECAAAECBFotINje6vEurbleRNzqrUZRVD/zIjAngXfeiXT/3pwWr9Gy1ensx8eRT08ijYUEazQZpbREIPd635z0noZfn/jekt663IaAe32mfzQ5jolz3OszkJtXcphzfnJ/b++jmy9lBQIECBAgQIAAAQIECBAgMF8BAff5+lqdAAECBAgQIECAAAECBAgQIDBzAcH2mZNa8GuBYRSx2h9FkTpyorbJL0fgwf1It28vZ+9573p+/t1T2nOe947WJ0DgTwVGo4jhMGJ19Dr83u8zapLAeBz5i39pUsWtrnVSTuJoetbqHrvYXIr4fRqPNzcODg662L+eCRAgQIAAAQIECBAgQKAZAgLuzZiTKgkQIECAAAECBAgQIECAAAECIdjuIZinwGoaxKi/Ms8trN1xgZxSFH/57uvgaZteVRjzxUuntLdppnpplYBT3ps1zuq7XsTObrOKbnm1x5NXMY6y5V12sr1nRc6PN/b2Pu1k95omQIAAAQIECBAgQIAAgdoLCLjXfkQKJECAAAECBAgQIECAAAECBLouINje9Sdgvv1XbxCuF8MY9FoWOp4vm9WvKJCHgyjefTeiaMd3B7gIYB6/iurH5JT2Kz4NLidQA4HqlPfqhPfRasTKsDVfm2oge+MS8vOvIl68uPE6FpidQFlO43B6MrsFrVQ3gV/f2919Wrei1EOAAAECBAgQIECAAAECBATcPQMECBAgQIAAAQIECBAgQIAAgZoKCLbXdDAtKqtXhdt7o+gV/RZ1pZXaCdy6Fenhg9qVdaWCyvIizF6F2uPVqyvd6mICBOovUH0I5yLsXoXeV1cF3pc4svKLLyKNJ0uswNbfJ3A6OYmTmMJpqUBO6ZNeSpsb29uft7RFbREgQIAAAQIECBAgQIBAAwUE3Bs4NCUTIECAAAECBAgQIECAAAEC7RYQbG/3fOvS3SBSrPVXo0jtOFG7Lq7q+BOBez+JdOdOM1mE2ps5N1UTmIHAN4H3leHrwHvfB8FmwPr2Jc7PI//TP7/9OlcsXKDMZbw4fxV54TvbcIEChzli8/7u7scL3NNWBAgQIECAAAECBAgQIEDgBwUE3D0cBAgQIECAAAECBAgQIECAAIGaCAi212QQHShjFL1YHax2oFMtLksgp3RxantaX19WCdfbV6j9em7uItBygdzrvQ66Vye8V1/XCh8Om8fI8/5+xP7BPJa25gwEnOI+A8QmLJHzb4rJ5OnGwYHfjE2YlxoJECBAgAABAgQIECDQYgEB9xYPV2sECBAgQIAAAQIECBAgQIBAMwQE25sxp7ZUuZ4GMeyvtKUdfdRQoAq3F3/5bsRwWMPqvqckofZmzEmVBGok8M0J71XgvQq+C7zffDplGeWzf4qUnRF+c8z5rOAU9/m41nTVz4qcNzf29j6taX3KIkCAAAECBAgQIECAAIEOCAi4d2DIWiRAgAABAgQIECBAgAABAgTqKSDYXs+5tLWq6o3A271R9Ip+W1vUVw0EqtBn8e67jQh75uPjiONXUf0oUFmDh0cJBBos8J3Ae9O+c0VN3J3eXpNBvKWM8flZHOdJM4pV5U0FDiOlp/d2dj686ULuJ0CAAAECBAgQIECAAAEC1xEQcL+OmnsIECBAgAABAgQIECBAgAABAjcQ2Hv06IOU89OU8y9usIxbCVxaoBcRt3qrURTVz7wIzElgbS3Swwf1Drefn0c+OHwdap9O5wRhWQIEOi8wGkVUp7uPVi9+9HqLwPl5lP/8hQ8bNeRBOZwcRdmQWpV5c4EU8fs0Hm9uHBwc3Hw1KxAgQIAAAQIECBAgQIAAgcsLCLhf3sqVBAgQIECAAAECBAgQIECAAIEbCQi234jPzdcUGESKtf5qFKm45gpuI3AJgXfeiXT/3iUuXMIlZXkRaM+Hh5HGTp1dwgRsSaDTAjmlSKuvg+4XPw6Hnfb4vubLL77w9blBT4VT3Bs0rNmV+qwsis0H29t/mN2SViJAgAABAgQIECBAgAABAj8uIODuCSFAgAABAgQIECBAgAABAgQIzFlAsH3OwJb/QYFhFLE+WCNEYG4CF8HN+/ci3b49tz2uvfDJaeSXLyOOjq69hBsJECAwawGB9++K5t09X6dn/ZAtYD2nuC8AuZ5b/Pre7u7TepamKgIECBAgQIAAAQIECBBom4CAe9smqh8CBAgQIECAAAECBAgQIECgNgKC7bUZRScLWU+DGPZXOtm7phcjUIU0i798t16nEVentb98GfngMNJ0uhgIuxAgQOAGAl0OvAu33+DBWfKtTnFf8gCWu/1nRVE83tje/ny5ZdidAAECBAgQIECAAAECBNouIODe9gnrjwABAgQIECBAgAABAgQIEFi4gGD7wslt+C2B6g2/9WIYg96QC4G5CeThIIpHjyL6/bntcaWFndZ+JS4XEyBQX4HvBN6HKxGro/oWe93Kqg8jbe9EnJ5edwX31UDAKe41GMLySjjMEZv3d3c/Xl4JdiZAgAABAgQIECBAgACBtgsIuLd9wvojQIAAAQIECBAgQIAAAQIEFiYg2L4wahv9gED1Zt/t3ih6RU1CxybVSoGLcPu770YUxXL7qwKSx8eR/7jvtPblTsLuBAjMW2A0ev3dMlZHkVZW6vPhomv0ffF1e3cvUs7XuNstdRJwinudprG0Wn5bjMdPNg4ODpZWgY0JECBAgAABAgQIECBAoLUCAu6tHa3GCBAgQIAAAQIECBAgQIAAgUUJ7D969LNpzh+lnH+xqD3tQ+BPBXoRcau/FkVacujYaNotcOtWpIcPltvj+Xnkg8PIL18KSC53EnYnQGBJAhenvFdB9+p09+GwGaH36jtt7O87tX1Jz8w8ti1zGS/OX4WPKsxDt1FrflbkvLmxt/dpo6pWLAECBAgQIECAAAECBAjUXkDAvfYjUiABAgQIECBAgAABAgQIECBQV4Eq2F6W5dOI+GVda1RXNwSE27sx56V3uexwexWOPDyMePVq6RQKIECAQN0Evgm9Vye9D/qRhisRK8PlfreNN99p4/Aw0nhSNzL1zEDgdHISJzGdwUqWaLxASr+6t7PzYeP70AABAgQIECBAgAABAgQI1EZAwL02o1AIAQIECBAgQIAAAQIECBAg0BQBwfamTKobdQ6jiPXBWjea1eXyBJYZbnfq7/LmbmcCBNohMBq9Drp/HXi/CL9Xr1kH4KvvsHF2FjEeRz4+Fmpvx9Pzo104xb0DQ75CizmlT3pnZ483Dg4OrnCbSwkQIECAAAECBAgQIECAwPcKCLh7MAgQIECAAAECBAgQIECAAAEClxQQbL8klMsWJjCKXqwOVhe2n406KrCscLtge0cfOG0TILAUgSoE/+1XdRJ8r/jxUk5OL/57LqfC7EsZWj02PZ68inGU9ShGFXUQOCyL4vGD7e0/1KEYNRAgQIAAAQIECBAgQIBAcwUE3Js7O5UTIECAAAECBAgQIECAAAECCxIQbF8QtG2uJLCeBjHsf30C65XudDGBKwgsI9xenQD8/KuIV6+uUKhLCRAgQIAAgWUIlOU0Dqcny9jannUWyPk39/b2ntS5RLURIECAAAECBAgQIECAQL0FBNzrPR/VESBAgAABAgQIECBAgAABAksU2L979245GDyNlP5hiWXYmsB3BKo39NaE2z0VixAYjSK9+xeL2On1HlWw/Y/7EUdHi9vTTgQIECBAgMCNBY4mxzGJfON1LNA6gc+Koni8sb39ees60xABAgQIECBAgAABAgQIzF1AwH3uxDYgQIAAAQIECBAgQIAAAQIEmiZwEWwfDqvT5qp/7jStfvW2V6B6M+92bxS9ot/eJnVWC4Hc60Xxv/2biKKYfz2C7fM3tgMBAgQIEJijwGQ6jqNyPMcdLN1ggcOc85P7e3sfNbgHpRMgQIAAAQIECBAgQIDAEgQE3JeAbksCBAgQIECAAAECBAgQIECgngKC7fWci6peCwi3exIWKZD+zV9GDIfz3XI8jnxw6MT2+SpbnQABAgQILETgcHIU5UJ2sklDBX5bjMdPNg4ODhpav7IJECBAgAABAgQIECBAYMECAu4LBrcdAQIECBAgQIAAAQIECBAgUD8Bwfb6zURF3xXoRcSt3moURfUzLwJzFti4G2ljY36bnJxG3t+POD2d3x5WJkCAAAECBBYqcHp+Fid5stA9bdY4gWdFzo839vY+bVzlCiZAgAABAgQIECBAgACBhQsIuC+c3IYECBAgQIAAAQIECBAgQIBAnQS+evjwaUQ8iYg7dapLLQTeCFyE2/trUaQCCoG5C+ReL4r3/ve57JOPjyMOXwi2z0XXogQIECBAYLkCZS7j8PzVcouwe1MEfn1vd7f6/+FeBAgQIECAAAECBAgQIEDgBwUE3D0cBAgQIECAAAECBAgQIECAQCcFnj94sJlSqv5S/b1OAmi6EQLC7Y0YU7uKvPeTSHdm+Hmfsowq2J7/uB9pOm2XlW4IECBAgACB7wgcT17FOEoqBN4qkFP6pHd29njj4ODgrRe7gAABAgQIECBAgAABAgQ6KSDg3smxa5oAAQIECBAgQIAAAQIECHRXQLC9u7NvWufDKGK1P3Jye9MG1/B601/8RcTq6OZdnJ9HPjiM/PJlpJxvvp4VCBAgQIAAgdoLTKbjOCrHta9TgbUROMwRm/d3dz+uTUUKIUCAAAECBAgQIECAAIHaCAi412YUCiFAgAABAgQIECBAgAABAgTmKSDYPk9da89aoAq3rw/WZr2s9Qi8VSD9/P23XvNjF1SB9nh5FHF6eqN13EyAAAECBAg0U+BwcuQM92aObnlV5/ybYjJ56jT35Y3AzgQIECBAgAABAgQIEKijgIB7HaeiJgIECBAgQIAAAQIECBAgQGBmAnuPHn1QlOVHEfHezBa1EIE5Cgi3zxHX0m8X+OnDSOvrb7/uW1fk4+OI41dR/ei09ivRuZgAAQIECLRO4GRyEqcxbV1fGpq7wGdFzpsbe3ufzn0nGxAgQIAAAQIECBAgQIBAIwQE3BsxJkUSIECAAAECBAgQIECAAAECVxWogu0p56cp519c9V7XE1iWgHD7suTt+0YgDwdRvPtuRFH8MEpZRj45EWr32BAgQIAAAQJ/JjAtz+PF1Hdy8WhcS+AwUnp6b2fnw2vd7SYCBAgQIECAAAECBAgQaJWAgHurxqkZAgQIECBAgAABAgQIECBAQLDdM9BUgdU0iFF/panlq7tFAjml16e4D/qRRquRT09edzc5jzw+izSetKhbrRAgQIAAAQKzFjicHEU560Wt1xmBFPH7NB5vbhwcHHSmaY0SIECAAAECBAgQIECAwJ8JCLh7KAgQIECAAAECBAgQIECAAIFWCOw/ePA306L40IntrRhn55pYT4MYCrd3bu4aJkCAAAECBAi0UeBkchKnMW1ja3panMCzsig2H2xv/2FxW9qJAAECBAgQIECAAAECBOokIOBep2mohQABAgQIECBAgAABAgQIELiywP6jRz8ry/JpRPzyyje7gUANBITbazAEJRAgQIAAAQIECMxMYFqex4vp6czWs1CnBX59b3e3+v/7XgQIECBAgAABAgQIECDQMQEB944NXLsECBAgQIAAAQIECBAgQKAtAoLtbZlkt/sQbu/2/HVPgAABAgQIEGirwOHkKMq2NqevRQt8VhTF443t7c8XvbH9CBAgQIAAAQIECBAgQGB5AgLuy7O3MwECBAgQIECAAAECBAgQIHANgf27d++Ww+GHTmy/Bp5baiUg3F6rcSiGAAECBAgQIEBghgInk5M4jekMV7RUxwUOc8Tm/d3djzvuoH0CBAgQIECAAAECBAh0RkDAvTOj1igBAgQIECBAgAABAgQIEGi2wNfB9icRUf1zp9ndqL7rAsLtXX8C9E+AAAECBAgQaLfAZDqOo3Lc7iZ1twyB3xbj8ZONg4ODZWxuTwIECBAgQIAAAQIECBBYnICA++Ks7USAAAECBAgQIECAAAECBAhcQ0Cw/Rpobqm1gHB7rcejOAIECBAgQIAAgRkJ7E+OZrSSZQh8R+BZkfPjjb29T7kQIECAAAECBAgQIECAQHsFBNzbO1udESBAgAABAgQIECBAgACBxgt89dOfPomcnzqxvfGj1MDXAsLtHgUCBAgQIECAAIGuCBxNjmMSuSvt6nPRAin96t7OzoeL3tZ+BAgQIECAAAECBAgQILAYAQH3xTjbhQABAgQIECBAgAABAgQIELiCwPMHDzZTSlWw/b0r3OZSArUWEG6v9XgUR4AAAQIECBAgMGOB0/OzOMmTGa9qOQL/KpBT+qR3dvZ44+DggAsBAgQIECBAgAABAgQItEtAwL1d89QNAQIECBAgQIAAAQIECBBotIBge6PHp/gfERBu93gQIECAAAECBAh0TWBanseL6WnX2tbv4gUOy6J4/GB7+w+L39qOBAgQIECAAAECBAgQIDAvAQH3eclalwABAgQIECBAgAABAgQIELi0wN6jRx+knJ+mnH9x6ZtcSKAhAsLtDRmUMgkQIECAAAECBGYusD85mvmaFiTwvQI5/+be3t4TOgQIECBAgAABAgQIECDQDgEB93bMURcECBAgQIAAAQIECBAgQKCRAoLtjRyboq8gINx+BSyXEiBAgAABAgQItE7gaHIck8it60tDtRX4rMh5c2Nv79PaVqgwAgQIECBAgAABAgQIELiUgID7pZhcRIAAAQIECBAgQIAAAQIECMxSYP/Ro59Nc/7Iie2zVLVW3QSE2+s2EfUQIECAAAECBAgsWuB0chInMV30tvbrtsBhzvnJ/b29j7rNoHsCBAgQIECAAAECBAg0W0DAvdnzUz0BAgQIECBAgAABAgQIEGiUQBVsL8vyaUT8slGFK5bAFQWE268I5nICBAgQIECAAIFWCkym4zgqx63sTVP1FkgRv0/j8ebGwcFBvStVHQECBAgQIECAAAECBAh8n4CAu+eCAAECBAgQIECAAAECBAgQmLvA/t27d8vh8EPB9rlT26AGAsLtNRiCEggQIECAAAECBGohUJbTOJye1KIWRXRS4FlZFJsPtrf/0MnuNU2AAAECBAgQIECAAIEGCwi4N3h4SidAgAABAgQIECBAgAABAnUX+DrY/iQiqn/u1L1e9RG4qYBw+00F3U+AAAECBAgQINA2gf3JUdta0k/zBH59b3e3+m5yXgQIECBAgAABAgQIECDQEAEB94YMSpkECBAgQIAAAQIECBAgQKBpAl89fFj95bFge9MGp95rC4yiF6uD1Wvf70YCBAgQIECAAAECbRQ4mhzHJHIbW9NTgwRySp/0Utrc2N7+vEFlK5UAAQIECBAgQIAAAQKdFRBw7+zoNU6AAAECBAgQIECAAAECBOYj8PzBg82UUhVuf28+O1iVQP0EhlHE+mCtfoWpiAABAgQIECBAgMCSBQTclzwA239b4PA84v/56e7uf8NCgAABAgQIECBAgAABAvUWEHCv93xUR4AAAQIECBAgQIAAAQIEGiPw/OHDxyniQ8H2xoxMoTMSEG6fEaRlCBAgQIAAAQIEWilwOjmJk5i2sjdNNU/guCjiLOdPe0Xx+OdbW8+a14GKCRAgQIAAAQIECBAg0A0BAfduzFmXBAgQIECAAAECBAgQIEBgbgJ7jx59kHJ+mnL+xdw2sTCBmgoIt9d0MMoiQIAAAQIECBCojcDp+Vmc5Elt6lFItwVySrEVEf2UTkY5//37Ozu/67aI7gkQIECAAAECBAgQIFBPAQH3es5FVQQIECBAgAABAgQIECBAoPYC+w8e/M20KD4UbK/9qBQ4J4FeRLwzuDWn1S1LgAABAgQIECBAoB0Ck3ISR9OzdjSji1YI/LEo4jTni17WIj7+q52dv2tFY5ogQIAAAQIECBAgQIBAiwQE3Fs0TK0QIECAAAECBAgQIECAAIFFCOw/evSzsiyfRsQvF7GfPQjUUaAKt9/qr0WRijqWpyYCBAgQIECAAAECtREQcK/NKBTytcBpUcQfvw64V/9qmNL2IKW//fnW1jNIBAgQIECAAAECBAgQIFAPAQH3esxBFQQIECBAgAABAgQIECBAoPYC+3fv3i0Hg6eR0j/UvlgFEpijgHD7HHEtTYAAAQIECBAg0DqBaXkeL6anretLQ80W2CqKyN8KuaeU8npK/+n9ra0Pm92Z6gkQIECAAAECBAgQINAOAQH3dsxRFwQIECBAgAABAgQIECBAYG4CF8H24fBJRFT/3JnbRhYm0ACB6s20d5zc3oBJKZEAAQIECBAgQKBOAvuTozqVoxYCcVAU8epbAfc3JKspffLX29sfICJAgAABAgQIECBAgACB5QoIuC/X3+4ECBAgQIAAAQIECBAgQKDWAl/99KdPIuengu21HpPiFiRQvZF2uzeKXtFf0I62IUCAAAECBAgQINAOAQH3dsyxTV2cpRRf/UBD/ZRO1ori37/35Zf/vU0964UAAQIECBAgQIAAAQJNEhBwb9K01EqAAAECBAgQIECAAAECBBYk8PzBg82UUhVsf29BW9qGQK0FhNtrPR7FESBAgAABAgQI1FxAwL3mA+poeTtFEdPvOcW94kgp5fWU/vH9ra3/3FEebRMgQIAAAQIECBAgQGCpAgLuS+W3OQECBAgQIECAAAECBAgQqJfA3qNHH6Scn6acf1GvylRDYLkC62kQw/7KcouwOwECBAgQIECAAIGGCgi4N3RwLS/7RVHE0Q8E3N+0vpLS/+in9O9+vrX1rOUc2iNAgAABAgQIECBAgECtBATcazUOxRAgQIAAAQIECBAgQIAAgeUI7D948DfTovhQsH05/natt4Bwe73nozoCBAgQIECAAIH6Cwi4139GXaxwklLsXaLxfkono5z//v2dnd9d4nKXECBAgAABAgQIECBAgMAMBATcZ4BoCQIECBAgQIAAAQIECBAg0FSB/UePflaW5dOI+GVTe1A3gXkKjKIXq4PVeW5hbQIECBAgQIAAAQKtFxBwb/2IG9vgXlHE5C2nuL9pbi3i47/a2fm7xjarcAIECBAgQIAAAQIECDRIQMC9QcNSKgECBAgQIECAAAECBAgQmJXA/t27d8vh8ElE/JdZrWkdAm0TGEYR64O1trWlHwIECBAgQIAAAQILFZiW5/FierrQPW1G4LICx0URh5cMuFdrDlPaHqT0tz/f2np22T1cR4AAAQIECBAgQIAAAQJXFxBwv7qZOwgQIECAAAECBAgQIECAQGMFvhVsr8LtdxrbiMIJzFlgECluDdbnvIvlCRAgQIAAAQIECLRfYFJO4mh61v5GddhIgWlKsXPFylNKeT2l//T+1taHV7zV5QQIECBAgAABAgQIECBwSQEB90tCuYwAAQIECBAgQIAAAQIECDRd4PmDB5sppacR8V7Te1E/gXkK9CLiVn8tilTMcxtrEyBAgAABAgQIEOiEgIB7J8bc6Cb3iiImVzjF/U2zqyl98tfb2x80unnFEyBAgAABAgQIECBAoKYCAu41HYyyCBAgQIAAAQIECBAgQIDArAT2Hj36oCjLjwTbZyVqnTYLVG+WvdNbjaKoYu5eBAgQIECAAAECBAjcVOB0chInMb3pMu4nMDeB46KIw2sE3KuC+imdrBXFv3/vyy//+9wKtDABAgRg7Ip8AAAgAElEQVQIECBAgAABAgQ6KCDg3sGha5kAAQIECBAgQIAAAQIEuiFQBdtTzk9Tzr/oRse6JHAzgeqNstu9UfSK/s0WcjcBAgQIECBAgAABAt8InExO4lTA3RNRY4FpSrFzg/pSSnk9pX98f2vrP99gGbcSIECAAAECBAgQIECAwLcEBNw9DgQIECBAgAABAgQIECBAoGUC+48e/awsy6cR8cuWtaYdAnMVWE+DGPZX5rqHxQkQIECAAAECBAh0TeBochyTyF1rW78NE/hjUcTpNU9xf9PqKOLTXlE8/vnW1rOGta9cAgQIECBAgAABAgQI1E5AwL12I1EQAQIECBAgQIAAAQIECBC4nsD+3bt3y+HwSUT8l+ut4C4C3RVYTYMYCbd39wHQOQECBAgQIECAwNwEDiZH4u1z07XwrAROiiL2bxhwr2rpp3Qyyvnv39/Z+d2sarMOAQIECBAgQIAAAQIEuigg4N7FqeuZAAECBAgQIECAAAECBFon8NXDh9WJ7VW4/U7rmtMQgTkLDKOI9cHanHexPAECBAgQIECAAIHuCUzL83gxPe1e4zpunEBOKbZmVHVKKa+l9F9/vrX1H2e0pGUIECBAgAABAgQIECDQOQEB986NXMMECBAgQIAAAQIECBAg0CaB5w8ebKaUqnD7e23qSy8EFiXQi4h3BrcWtZ19CBAgQIAAAQIECHRK4PT8LE7ypFM9a7a5An8sijidwSnubwSGKW0PUvrbn29tPWuuisoJECBAgAABAgQIECCwHAEB9+W425UAAQIECBAgQIAAAQIECNxIYO/Row9Szk9Tzr+40UJuJtBhgSIibvfXokjVz7wIECBAgAABAgQIEJi1wNHkOCaRZ72s9QjMReCkKGJ/hgH3qsheSuerOf+H93d2fjeXoi1KgAABAgQIECBAgACBlgoIuLd0sNoiQIAAAQIECBAgQIAAgXYK7D969LNpzh8JtrdzvrpanED1ptjt3ih6RX9xm9qJAAECBAgQIECAQIcEylzG4fmrDnWs1aYL5JRia05NrEV8/Fc7O383p+UtS4AAAQIECBAgQIAAgdYJCLi3bqQaIkCAAAECBAgQIECAAIE2CuzfvXu3HA4/jIhftrE/PRFYtMCtYhiD3nDR29qPAAECBAgQIECAQGcExudncZwnnelXo+0QeF4UMZ7xKe5vZAYRB8Oi+Jufb209a4eWLggQIECAAAECBAgQIDA/AQH3+dlamQABAgQIECBAgAABAgQI3Fjg62D7k4io/rlz4wUtQIBArEYvRoNVEgQIECBAgAABAgQIzFHgaHIck8hz3MHSBGYvcFwUcTingHtVbUopr6f0n97f2qoOMfAiQIAAAQIECBAgQIAAgR8QEHD3aBAgQIAAAQIECBAgQIAAgZoKPH/wYDOl9DQi3qtpicoi0DiBQaS4NVhvXN0KJkCAAAECBAgQINAkgbKcxuH0pEklq5XAhcA0pdhZgMVqSp/89fb2BwvYyhYECBAgQIAAAQIECBBopICAeyPHpmgCBAgQIECAAAECBAgQaLPA3qNHHxRlWZ3k9W/b3KfeCCxaoBcRt/prUaRi0VvbjwABAgQIECBAgECnBI4nr2IcZad61mx7BPaKIiZzPMX9jVQ/pZO1ovj373355X9vj55OCBAgQIAAAQIECBAgMBsBAffZOFqFAAECBAgQIECAAAECBAjcWGD/0aOfTXP+KOX8ixsvZgECBL4jUL0Jdrs3il7RJ0OAAAECBAgQIECAwBwFnN4+R1xLL0TguCjicAEB96qZlFJeT+kf39/a+s8Lac4mBAgQIECAAAECBAgQaIiAgHtDBqVMAgQIECBAgAABAgQIEGivwP7du3fLweBppPQP7e1SZwSWK3CrGMagN1xuEXYnQIAAAQIECBAg0AEBp7d3YMgtb3GaUuwsuMdRxKf/x87O/7ngbW1HgAABAgQIECBAgACB2goIuNd2NAojQIAAAQIECBAgQIAAgS4IfPXw4dOIeBIRd7rQrx4JLENgFL1YHawuY2t7EiBAgACBWgtMy/MoI/9wjTnHtJzOpYde0auOrf3RtXtRRFFd50WAQGMEJuUkjqZnjalXoQR+SGCnKGK6oFPc39TQT+lklPPfv7+z8zuTIUCAAAECBAgQIECAQNcFBNy7/gTonwABAgQIECBAgAABAgSWIvD8wYPNlFIVbn9vKQXYlEBHBKpI3DuDWx3pVpsECBAg0BWBMpcxzf8aPJ+WZUQuv2m/iq1/+1WF2OcTU1+OePWXW/3487/i6kfxnYKKVEQq/vXfCcwvZ1527ZbAi8lRq77edGt6uv22wIuiiKMFB9yr/VNKeS2l//rzra3/aCIECBAgQIAAAQIECBDosoCAe5enr3cCBAgQIECAAAECBAgQWLjA3qNHH6Scn6acf7HwzW1IoGMC1Rtf7/TXogq3eREgQIAAgboLlOU0pl8H06fT84tyq7PVv/l3kf8ktl73jupfX/VBuOJbQflvB+S/fcJ8L/X8eaL+41RhDQROJydxIt5eg0koYRYCk5RibxYLXXONlZT+Rz+lf/fzra1n11zCbQQIECBAgAABAgQIEGi0gIB7o8eneAIECBAgQIAAAQIECBBoisD+o0c/K8uyOrH9l02pWZ0Emi5wq7cSg2LQ9DbUT4AAAQItEPjmxPWcY1q+Pkv9zSnr55EvguxezRCoPjbX+zoUX50I/+Yv2r4diPfnj2bMUpWzFZiUkzians12UasRWLLAVlFEXsIp7m/a7qd0Msr579/f2fndkilsT4AAAQIECBAgQIAAgYULCLgvnNyGBAgQIECAAAECBAgQINAlgf27d++Ww+GTiPgvXepbrwSWLbAavRgNVpddhv0JECBAoEMC07KKrOd4c/p69auLX3fIQKvfFfh2GP7N6fDVd5ZJxevvLiMI74lpi0D19e/l9NSHddoyUH18I3BQFPFqiQH3qpCUUh6l9P/99dbW/200BAgQIECAAAECBAgQ6JKAgHuXpq1XAgQIECBAgAABAgQIEFiowPMHDzZTSh9GxJ2FbmwzAh0X6EXEO4NbHVfQPgECBAjMQ+DNSezTsozI5cUp7NPIUc5jM2t2RuD7gvBvToSvTokviupPN14E6ilQfV08On/lwzz1HI+qbihwWhTxxyUH3N+0MExpe5DS3/58a+vZDdtyOwECBAgQIECAAAECBBohIODeiDEpkgABAgQIECBAgAABAgSaJLD36NEHRVlWwfZ/26S61UqgDQLVm13v9FYFwdowTD0QIEBgyQKTchJVkD3nKsRehdmz04mXPJMub1/9Gacfr/9a781p8L1e/+LXvdSL6mR4LwKLFhBuX7S4/RYtkFOKrUVv+iP79VI6X835P7y/s/O7GpWlFAIECBAgQIAAAQIECMxFQMB9LqwWJUCAAAECBAgQIECAAIEuCuw/evSzXJYf5oj/q4v965lAHQTW0yCG/ZU6lKIGAgQIEGiIQFlOY5qnMS2nTmRvyMyU+f0Cb06CT5GiF+ki9J6KIorq18XrMLwXgVkJCLfPStI6dRf4Y1HEaU1OcX9jtRbx8V/t7Pxd3e3UR4AAAQIECBAgQIAAgZsICLjfRM+9BAgQIECAAAECBAgQIEAgIvbv3r1bDgZPI6V/AEKAwPIEBpHi1mB9eQXYmQABAgRqL/CnYXanstd+ZAqcocCfnQKfiugJwM9QuDtLTcvzOJ6exrQ7Leu0wwLHRRGHNQu4V+MYprQ9SOlvf7619azD49E6AQIECBAgQIAAAQItFhBwb/FwtUaAAAECBAgQIECAAAEC8xf46qc/fRI5P42IO/PfzQ4ECPyQQPUm1zv9tYuTSr0IECBAgMAbgUk5ien0/OJkdmF2zwWBHxf40wD8mxPge1FEUfTwEbgQqL6uHk/PIvMg0BGBaUqxU9Neeymdr+b8H97f2fldTUtUFgECBAgQIECAAAECBK4tIOB+bTo3EiBAgAABAgQIECBAgECXBfYePfqgKMuPIuK9LjvonUBdBG4Vwxj0hnUpRx0ECBAgsASB6nT28/I8prmMSUydLLyEGdiy3QLVxwh7kaIKvFd/wdjr9S9+Lvze7rl/u7vTyUmc+OranYHr9BuBnaKIaQ1PcX9T4FrEx3+1s/N3RkaAAAECBAgQIECAAIE2CQi4t2maeiFAgAABAgQIECBAgACBuQvsP3r0s2nOH6WcfzH3zWxAgMClBEbRi9XB6qWudREBAgQItEfgTaB9kqcXJ7SX7WlNJwQaJ1Cd717F3vtRRK/oXXxXnV7Rb1wfCv5+gWl5HsfTU9F2D0hnBV4URRzVOOBeDWaY0vYgpb/9+dbWs84OSuMECBAgQIAAAQIECLRKQMC9VePUDAECBAgQIECAAAECBAjMS2D/7t275WDwNFL6h3ntYV0CBK4uUJ0keru/dhGi8iJAgACBdgsItLd7vrprp8Ag0sX/eqkXvaK4+NGf25oz6zKXMT4/c2p7c0am0jkJnBZF/LHmAfeq9V5K56sp/b/vb219OCcKyxIgQIAAAQIECBAgQGBhAgLuC6O2EQECBAgQIECAAAECBAg0VeD5gwebKaXqLwfvNLUHdRNoq8CtYhiD3rCt7emLAAECnRaogpXVqcHn5TTGMXVCe6efBs23SaD6WGLvW6e9X4Tei+oMeK86CVwE2/PE1946DUUtSxPIKcXW0na/+sarKX3y19vbH1z9TncQIECAAAECBAgQIECgPgIC7vWZhUoIECBAgAABAgQIECBAoGYCe48efVCUZRVs/7c1K005BAhERHUi6K3BOgsCBAgQaJFAFWifTCcXgfb/n7276Y3jvNaFvVaR3RRFxWKyDynuPbHFOAEysjLLzAYCZJpk6BcB7AN4HmPP9iie7tHxH3CiqUbH/+AkQOYnf8A4WxM3GYmmEycW2c2qelGMlK04ssWP/qiPqwFDgl31PGtdq6yWqLsflj3qSysECLxcoPm93Vo0p7wXsVY0J76vv/wmV8xdQLB97qQW7InA46KIaQdOcX/GPYr4fFwU9/Ynk4c9GYE2CBAgQIAAAQIECBAYmICA+8AGrl0CBAgQIECAAAECBAgQeLnA8d7ea3VVfVhH/PTlV7uCAIFVCDRf1Hpl/WYU2ZwB6kWAAAECXRVoTmk/K2cxq8tozgmuu9qIugkQWIhAc67730LvTeD9bz/6/d/8qZ/9WuzE9vnbWrE/Al8URXzRoYB7I5+Z9Vbmv9+dTJrDG7wIECBAgAABAgQIECDQKQEB906NS7EECBAgQIAAAQIECBAgsEiB4+3t7Wo8fj8ifrXIfaxNgMD1BTZzFDfWN66/kBUIECBAYOkC56e0V2VM65lT2peub0MC3RdoPt64FhnrTfC9Oem9Cb0XTRTe67ICza/HJ+XUB4wuC+f6QQrMMuNRRzvfzPzd6wcHb3W0fGUTIECAAAECBAgQIDBQAQH3gQ5e2wQIECBAgAABAgQIECDwjwKPd3bezcwPIuJVNgQItFugiS+9MrrV7iJVR4AAAQL/IDCrZnFWnsU0yqjYECBAYAECo8jz094zm+C7096/jrhqPmBUnfmQ0QKeQUv2X2BSFFF37BT3Z1MZRXw+Lop7+5PJw/5PSocECBAgQIAAAQIECPRBQMC9D1PUAwECBAgQIECAAAECBAhcWeDR3t5bWdcfZF2/eeVF3EiAwFIFbq1txKgYLXVPmxEgQIDA5QVm5fQ8RDmLKurL3+4OAgQIXFvg+dPeiywiBxp8b05qn5azaL5vRnltVQsQGK7AZ0URJx0NuDdTy8x6K/Pf704mHw53ijonQIAAAQIECBAgQKArAgLuXZmUOgkQIECAAAECBAgQIEBgrgLH29vb1Xjc/IXeO3Nd2GIECCxUYBxFbI1uLnQPixMgQIDA1QSquoqzJkBZl0LtVyN0FwECSxJo/oJ0/dmJ7xGxtrbenP0ea8X6kipY7DbNd80oqyrO6rM4i9qHjBbLbfUBCfy1KOJPHQ64PxvVZubvXj84eGtAo9MqAQIECBAgQIAAAQIdFBBw7+DQlEyAAAECBAgQIECAAAEC1xM42t39ICLej4jb11vJ3QQILFOg+ULWK+s3ozl904sAAQIE2iHwLNQ+rZuT2p3T3o6pqIIAgesIPAu/53kAPs9/79mc/N7GAHxVNSeyV+dh9rJ++vPrNO9eAgS+UWCWGY96YjSK+HxcFPf2J5OHPWlJGwQIECBAgAABAgQI9ExAwL1nA9UOAQIECBAgQIAAAQIECHy9wKO9vbeKqrofEa9yIkCgewKbsRY3RpvdK1zFBAgQ6JmAUHvPBqodAgQuLbAWcR54b17N2e/PXs1J8M+/1nLtSh/ObH6dbQLrz15NgD3q6vxjRE2gvfnZf//XS5fvBgIEriEwKYqoe3CKe0OQmfVWXb999/DwwTVI3EqAAAECBAgQIECAAIGFCAi4L4TVogQIECBAgAABAgQIECDQJoHjvb3Xyrq+n3X9ZpvqUgsBAhcXaGJD33J6+8XBXEmAAIEFCMzKaUyr5qT2v4UsvQgQIECAAAECQxP4rCjipCcB92ezuxnx8XcPD38+tFnqlwABAgQIECBAgACBdgsIuLd7PqojQIAAAQIECBAgQIAAgWsIHG9vb1fj8fsR8atrLONWAgRaILCVoxivb7SgEiUQIEBgWAKzahbTcibUPqyx65YAAQIECBD4GoG/FkX8qWcB96bVcebBKPNH+5PJQ8MnQIAAAQIECBAgQIBAGwQE3NswBTUQIECAAAECBAgQIECAwNwFHu/svJuZH0TEq3Nf3IIECCxVoDm9/fbo1lL3tBkBAgSGLFBWZ+eh9mmUUQ0ZQu8ECBAgQIAAga8IzDLjUU9V1jLPNuv6F3cPDx/0tEVtESBAgAABAgQIECDQIQEB9w4NS6kECBAgQIAAAQIECBAg8HKB452de2VRfJh1/ebLr3YFAQJdEHB6exempEYCBLouUFVlTJtgez2LsuvNqJ8AAQIECBAgsECBSVFE3cNT3J+R3Yz4+LuHhz9fIKGlCRAgQIAAAQIECBAg8FIBAfeXErmAAAECBAgQIECAAAECBLogcLy9vV2NRh9E5i+7UK8aCRC4mIDT2y/m5CoCBAhcRaCqqzhrTmqvz2IW9VWWcA8BAgQIECBAYHACj4sipj0OuDcDHWcejDJ/tD+ZPBzcgDVMgAABAgQIECBAgEArBATcWzEGRRAgQIAAAQIECBAgQIDAdQQe7+y8m5kfRsTt66zjXgIE2ifg9Pb2zURFBAh0X2BWzWJazmIWlVh798epAwIECBAgQGDJAl8URXzR84B7Q7qWebZZ17+4e3j4YMnEtiNAgAABAgQIECBAgEAIuHsICBAgQIAAAQIECBAgQKCzAo/29t4qqqoJtr/R2SYUToDA1wo4vd3DQYAAgfkJVFUZ03Iap1FGNb9lrUSAAAECBAgQGJzAaWYcDajrmxEff/fw8OcDalmrBAgQIECAAAECBAi0QEDAvQVDUAIBAgQIECBAgAABAgQIXE7geHt7uxqPm2D7O5e709UECHRJwOntXZqWWgkQaKvA9Ow0pvVZzJzV3tYRqYsAAQIECBDomECdGZOO1XzdcjcyP1nP/PH+ZPLwumu5nwABAgQIECBAgAABAhcREHC/iJJrCBAgQIAAAQIECBAgQKA1Akd37rwfdf1BRNxuTVEKIUBg7gLNF61eWb8ZRTbnuHsRIECAwGUEyuospuXs/LT2+jI3upYAAQIECBAgQOBCAo+KImb1sH6ntZ755EZd/8+7h4cPLoTkIgIECBAgQIAAAQIECFxDQMD9GnhuJUCAAAECBAgQIECAAIHlCTza23urqKrm1PY3lrernQgQWJXAZqzFjdHmqra3LwECBDonUNVVnJWzOKlnUXauegUTIECAAAECBLol8HlRxJcDC7g3E8rM+mbmr/cnk/e6NTHVEiBAgAABAgQIECDQNQEB965NTL0ECBAgQIAAAQIECBAYmMDx9vZ2NR43wfZ3Bta6dgkMWuD22mYUxdqgDTRPgACBiwg0p7WflNOYReW09ouAuYYAAQIECBAgMAeBJ0URxwMMuD+j28j8ZD3zx/uTycM5cFqCAAECBAgQIECAAAEC/yQg4O6hIECAAAECBAgQIECAAIHWChzdufN+1PUHEXG7tUUqjACBuQuMo4it0c25r2tBAgQI9EXAae19maQ+CBAgQIAAga4KzDLjUVeLn1Pd65lPbhbFT1799NPfz2lJyxAgQIAAAQIECBAgQODvAgLuHgYCBAgQIECAAAECBAgQaJ3Ao729t4qqak5tf6N1xSmIAIGFC9wqxjFaGy98HxsQIECgawJOa+/axNRLgAABAgQI9Fng0xS3yMx6K/M/704m/9HnWeuNAAECBAgQIECAAIHlC/gT1/LN7UiAAAECBAgQIECAAAECXyNwvL29XY3HTbD9HUgECAxToGi+ZcPo1jCb1zUBAgReIOC0do8FAQIECBAgQKCdAo+LIqZ13c7illzVjYg/fO/w8IdL3tZ2BAgQIECAAAECBAj0WEDAvcfD1RoBAgQIECBAgAABAgS6JHB05877UdcfNNnWLtWtVgIE5iuwGWtxY7Q530WtRoAAgQ4KOK29g0NTMgECBAgQIDAogT8XRfxFwP3vM1/PfLKR+YP9yeThoB4EzRIgQIAAAQIECBAgsBABAfeFsFqUAAECBAgQIECAAAECBC4q8Ghv762iqppT29+46D2uI0CgvwK31zajKNb626DOCBAg8BKB6dlpTOuzmIXTQD0sBAgQIECAAIE2C/y1KOJPAu7/MKLMrLcy//3uZNJ8rc+LAAECBAgQIECAAAECVxYQcL8ynRsJECBAgAABAgQIECBA4DoCx9vb29Vo9EFk/vI667iXAIH+CDSx9ldGt/rTkE4IECBwQYGqKuO0nMZplGLtFzRzGQECBAgQIEBg1QKnmXG06iJauv9m5u9ePzh4q6XlKYsAAQIECBAgQIAAgQ4ICLh3YEhKJECAAAECBAgQIECAQN8EHu/svJuZzUlOt/vWm34IELi6wGaO4sb6xtUXcCcBAgQ6JjBrQu3VzGntHZubcgkQIECAAAECzwQ+TZGLr3saxpkHo8wf7U8mDz0xBAgQIECAAAECBAgQuKyAP21dVsz1BAgQIECAAAECBAgQIHBlgeOdnXtlUXyYdf3mlRdxIwECvRW4vbYZRdGc4+5FgACB/gpUdRXTchan9Syq/rapMwIECBAgQIDAIAQOiyLKuh5Er1dpci3zbLOuf3H38PDBVe53DwECBAgQIECAAAECwxUQcB/u7HVOgAABAgQIECBAgACBpQkcb29vV6PRB5H5y6VtaiMCBDol0MTaXxnd6lTNiiVAgMBlBMrqLE7KaUzF2i/D5loCBAgQIECAQKsFPiuKOBFwf+mMtorio/3J5L2XXugCAgQIECBAgAABAgQIPBUQcPcoECBAgAABAgQIECBAgMBCBR7v7v4sIz6MiFcXupHFCRDotMCNWIvN0Wane1A8AQIEXiQwPTuNk3oWJR4CBAgQIECAAIHeCXxRFPGFgPuF5rqR+cl65o/3J5OHF7rBRQQIECBAgAABAgQIDFpAwH3Q49c8AQIECBAgQIAAAQIEFidwvLf3WlnX97Ou31zcLlYmQKAvArfWNmJUjPrSjj4IEBi4QFWVMS2ncRJl1AO30D4BAgQIECBAoM8CJ0URnwm4X3jE65lPbtT1/7x7ePjgwje5kAABAgQIECBAgACBQQoIuA9y7JomQIAAAQIECBAgQIDAYgWOdnc/iIj3I+L2YneyOgECfRBovkC1PbrVh1b0QIDAwAVm1SxOy2nMxNoH/iRonwABAgQIEBiKwGlmHA2l2Tn1mZn1VuZ/3p1M/mNOS1qGAAECBAgQIECAAIEeCgi493CoWiJAgAABAgQIECBAgMCqBB7t7b1VVNX9iHh1VTXYlwCB7gmMIuPWaKt7hauYAAECEVHVVZyVs3hSz6IiQoAAAQIECBAgMDiBT1Ps4ipDvxHxh+8dHv7wKve6hwABAgQIECBAgACB/gv4k1b/Z6xDAgQIECBAgAABAgQILFzgeHt7uxqPP4yIdxa+mQ0IEOidwGaO4sb6Ru/60hABAv0WqKry/LT20yid197vUeuOAAECBAgQIPCNAodFEWVdU7qCwCji83FR3NufTB5e4Xa3ECBAgAABAgQIECDQYwEB9x4PV2sECBAgQIAAAQIECBBYhsDjnZ13M7MJt99exn72IECgfwK31jZiVIz615iOCBDopcCsmp0H22di7b2cr6YIECBAgAABApcVeFwUMRVwvyzb36/PzHor89/vTibN1xe9CBAgQIAAAQIECBAgcC4g4O5BIECAAAECBAgQIECAAIErCRzv7Nwri+LDrOs3r7SAmwgQIPBU4NujWywIECDQaoGqrmJazuK0nkXV6koVR4AAAQIECBAgsGyBPxdF/EXA/drsNyM+/u7h4c+vvZAFCBAgQIAAAQIECBDohYCAey/GqAkCBAgQIECAAAECBAgsT+B4e3u7Go/fj4hfLW9XOxEg0FeBtYh4RcC9r+PVF4HOC1RVGU/K02hi7XXnu9EAAQIECBAgQIDAIgS+KIr4QsB9LrTjzINR5o/2J5OHc1nQIgQIECBAgAABAgQIdFZAwL2zo1M4AQIECBAgQIAAAQIEli/waG/vraKq7kfEq8vf3Y4ECPRRYBxFbI1u9rE1PREg0GGBWTmN02oWM7H2Dk9R6QQIECBAgACB5QicZsbRcrYaxC7rmU9u1PX/vHt4+GAQDWuSAAECBAgQIECAAIEXCgi4ezAIECBAgAABAgQIECBA4KUCzant9Xh8v4746UsvdgEBAgQuIbAZa3FjtHmJO1xKgACBxQhUdRXTchandXNeuxcBAgQIECBAgACBiwkIuF/M6TJXZRSidEQAACAASURBVGZ9M/PX+5PJe5e5z7UECBAgQIAAAQIECPRHQMC9P7PUCQECBAgQIECAAAECBBYicHTnzvtR1x9ExO2FbGBRAgQGLXBrbSNGxWjQBponQGC1AlVVxpPyNJpYe73aUuxOgAABAgQIECDQUYFPU/RiEaO7EfGH7x0e/nARa1uTAAECBAgQIECAAIF2C/hTVrvnozoCBAgQIECAAAECBAisTOB4b++1sq7vZ12/ubIibEyAQO8Fbq9tRlGs9b5PDRIg0D6BWTmN02oWM7H29g1HRQQIECBAgACBjgkIuC9uYKOIz8dFcW9/Mnm4uF2sTIAAAQIECBAgQIBA2wQE3Ns2EfUQIECAAAECBAgQIECgBQJHu7vNie2/akEpSiBAoOcC3x7d6nmH2iNAoE0CVV3F9Ow0TqOMqk2FqYUAAQIECBAgQKDTAo+KIma17we0qCFmZr1V12/fPTx8sKg9rEuAAAECBAgQIECAQLsEBNzbNQ/VECBAgAABAgQIECBAYKUCj/b23iqq6n5EvLrSQmxOgMAgBIqIuC3gPohZa5LAqgXK6ixOymlMxdpXPQr7EyBAgAABAgR6KfC4KGIq4L7w2d6M+Pi7h4c/X/hGNiBAgAABAgQIECBAYOUCAu4rH4ECCBAgQIAAAQIECBAgsHqB4+3t7Wo0+iAyf7n6alRAgMBQBEaRcWu0NZR29UmAwAoEmtPap/VZzMJpmivgtyUBAgQIECBAYDACnxVFnAi4L2XeG5mfrGf+eH8yebiUDW1CgAABAgQIECBAgMBKBATcV8JuUwIECBAgQIAAAQIECLRH4PHu7s8yojm1/XZ7qlIJAQJDEBBwH8KU9Uhg+QJVXUUTbD+N0nnty+e3IwECBAgQIEBgkAJfFEV8IeC+tNmvZz65WRQ/efXTT3+/tE1tRIAAAQIECBAgQIDAUgUE3JfKbTMCBAgQIECAAAECBAi0R+B4b++1uqo+rCN+2p6qVEKAwJAEbsRabI42h9SyXgkQWKBAWZ3FSTmNqVj7ApUtTYAAAQIECBAg8CIBAfflPxeZWW9l/ufdyeQ/lr+7HQkQIECAAAECBAgQWLSAgPuiha1PgAABAgQIECBAgACBFgoc3bnzftT1B05tb+FwlERgQAKbsRY3BNwHNHGtEliMQHNa+7Q+i1nUi9nAqgQIECBAgAABAgReIvDXoog/OcF9Jc/JZubvXj84eGslm9uUAAECBAgQIECAAIGFCQi4L4zWwgQIECBAgAABAgQIEGifwPHOzr2yKD7Mun6zfdWpiACBoQkIuA9t4volMD+BqipjWk7jJEqx9vmxWokAAQIECBAgQOCKAqeZcXTFe912fYFx5sEo80f7k8nD669mBQIECBAgQIAAAQIE2iAg4N6GKaiBAAECBAgQIECAAAECSxA42t1tTmz/1RK2sgUBAgQuJCDgfiEmFxEg8JzArJrFtJzFNCouBAgQIECAAAECBFojIOC++lGsZZ5t1vUv7h4ePlh9NSogQIAAAQIECBAgQOC6AgLu1xV0PwECBAgQIECAAAECBFou8Ghv762iqj6MiDdaXqryCBAYmICA+8AGrl0C1xCYnp3GST2L8hpruJUAAQIECBAgQIDAogQE3Bcle7l1M7O+mfnr/cnkvcvd6WoCBAgQIECAAAECBNomIODetomohwABAgQIECBAgAABAnMSON7e3q5Gow8i85dzWtIyBAgQmKuAgPtcOS1GoHcCVVXGtJzGSZRR9647DREgQIAAAQIECPRJQMC9XdO8EfGH7x0e/rBdVamGAAECBAgQIECAAIHLCAi4X0bLtQQIECBAgAABAgQIEOiIwNNT2+9HxKsdKVmZBAgMUEDAfYBD1zKBCwjMqllMy1lMo7rA1S4hQIAAAQIECBAg0A6BT1P8oh2T+FsVo4jPx0Vxb38yedimutRCgAABAgQIECBAgMDFBPwJ62JOriJAgAABAgQIECBAgEAnBJpT2+vx+H4d8dNOFKxIAgQGLSDgPujxa57APwlMz07jpJ5FyYYAAQIECBAgQIBABwUE3Ns3tLXMs826/sXdw8MH7atORQQIECBAgAABAgQIfJOAgLvngwABAgQIECBAgAABAj0ReLy7+7OMaE5tv92TlrRBgEDPBQTcez5g7RG4gEBVlXFaTuM0yqgvcL1LCBAgQIAAAQIECLRVQMC9rZOJ2CqKj/Ynk/faW6HKCBAgQIAAAQIECBD4qoCAu2eCAAECBAgQIECAAAECHRdwanvHB6h8AgMWuBFrsTnaHLCA1gkMV2BWzc6D7TOx9uE+BDonQIAAAQIECPRMQMC93QPdyPzk+wcHr7e7StURIECAAAECBAgQIPBMQMDds0CAAAECBAgQIECAAIEOCzze2Xk3Mz90anuHh6h0AgMWGEXGrdHWgAW0TmBYAlVdxVk5iyf1LKphta5bAgQIECBAgACBAQgIuLd/yOuZTzYyf7A/mTxsf7UqJECAAAECBAgQIDBsAQH3Yc9f9wQIECBAgAABAgQIdFTgeG/vtbKu72ddv9nRFpRNgACBEHD3EBAYhkBVleentZ9G6bz2YYxclwQIECBAgACBQQoIuHdj7JlZb9X123cPDx90o2JVEiBAgAABAgQIEBimgID7MOeuawIECBAgQIAAAQIEOixwdOfO+1HXHzi1vcNDVDoBAucCRfML2egWDQIEeiowq2bnwfaZWHtPJ6wtAgQIECBAgACB5wUE3Lv1PGwVxUf7k8l73apatQQIECBAgAABAgSGIyDgPpxZ65QAAQIECBAgQIAAgY4LOLW94wNUPgECLxT4toC7J4NArwSquoqzchZP6llUvepMMwQIECBAgAABAgS+WUDAvXtPyEbmJ98/OHi9e5WrmAABAgQIECBAgED/BQTc+z9jHRIgQIAAAQIECBAg0AMBp7b3YIhaIEDghQKvrN2ItWKdDgECHReoqjKelKfRxNrrjveifAIECBAgQIAAAQJXERBwv4ra6u9Zz3yykfmD/cnk4eqrUQEBAgQIECBAgAABAs8EBNw9CwQIECBAgAABAgQIEGixgFPbWzwcpREgMBeBW2sbMSpGc1nLIgQILF9gVk7jtJrFTKx9+fh2JECAAAECBAgQaJWAgHurxnGpYjKz3qrrt+8eHj641I0uJkCAAAECBAgQIEBgYQIC7gujtTABAgQIECBAgAABAgSuJ+DU9uv5uZsAgW4IbMZa3BhtdqNYVRIgcC5Q1VVMy1mc1s157V4ECBAgQIAAAQIECDQCAu7dfw62iuKj/cnkve53ogMCBAgQIECAAAEC3RcQcO/+DHVAgAABAgQIECBAgEDPBI53du5Vmfcj4o2etaYdAgQI/JPAOIrYGt0kQ4BABwSqqown5Wk0sfa6A/UqkQABAgQIECBAgMAyBQTcl6m9uL02Mj/5/sHB64vbwcoECBAgQIAAAQIECFxEQMD9IkquIUCAAAECBAgQIECAwJIEjnZ3P4iIXy1pO9sQIEBg5QJrEfHK6NbK61AAAQJfLzArp3FazWIm1u4xIUCAAAECBAgQIPBCgTIzDtn0RmA988lG5g/2J5OHvWlKIwQIECBAgAABAgQ6JiDg3rGBKZcAAQIECBAgQIAAgX4KOLW9n3PVFQECFxO4vX4ziiwudrGrCBBYikBVVzEtZ3FaN+e1exEgQIAAAQIECBAg8E0Cp5lxhKhXAplZb9X123cPDx/0qjHNECBAgAABAgQIEOiIgIB7RwalTAIECBAgQIAAAQIE+itwdOfO+1HXzcntt/vbpc4IECDw9QK31jZiVIwQESDQAoGyOouTchpTsfYWTEMJBAgQIECAAAECXREQcO/KpC5XZxNyv5n56/3J5L3L3elqAgQIECBAgAABAgSuKyDgfl1B9xMgQIAAAQIECBAgQOCKAsd7e6+VdX0/6/rNKy7hNgIECPRCYDPW4sZosxe9aIJAVwWmZ6cxrc9iFnVXW1A3AQIECBAgQIAAgZUJCLivjH4pG9+I+MP3Dg9/uJTNbEKAAAECBAgQIECAwLmAgLsHgQABAgQIECBAgAABAisQcGr7CtBtSYBAawXWIuKV0a3W1qcwAn0VqOoqmmD7aZTOa+/rkPVFgAABAgQIECCwFIEviiK+qH1YdCnYK9pkFPH5uCju7U8mD1dUgm0JECBAgAABAgQIDEpAwH1Q49YsAQIECBAgQIAAAQKrFnBq+6onYH8CBNoqcHv9ZhRZtLU8dRHolUBZncVJOY2pWHuv5qoZAgQIECBAgACB1QkIuK/Ofpk7r2Webdb1L+4eHj5Y5r72IkCAAAECBAgQIDBEAQH3IU5dzwQIECBAgAABAgQIrETAqe0rYbcpAQIdEdjKUYzXNzpSrTIJdFOgOa19Wp/FLJws2c0JqpoAAQIECBAgQKCtAp8XRXzpBPe2jmeudWVmvZX5n3cnk/+Y68IWI0CAAAECBAgQIEDgHwQE3D0QBAgQIECAAAECBAgQWLCAU9sXDGx5AgR6ITCOIrZGN3vRiyYItEmgqsqYltM4jdJ57W0ajFoIECBAgAABAgR6JfC4KGIq4N6rmb6smc3M371+cPDWy67z3wkQIECAAAECBAgQuJqAgPvV3NxFgAABAgQIECBAgACBCwk4tf1CTC4iQIBANF+k2h7dIkGAwJwEZtUspuUspmLtcxK1DAECBAgQIECAAIGvF3hUFDETcB/cIzLOPBhl/mh/Mnk4uOY1TIAAAQIECBAgQGDBAgLuCwa2PAECBAgQIECAAAECwxQ43t7ersfj+3XET4cpoGsCBAhcXuBWMY7R2vjyN7qDAIG/C0zPTuOknkXJhAABAgQIECBAgACBpQl8mqIXS8Nu2UbrmU9uFsVPXv3009+3rDTlECBAgAABAgQIEOi0gD9ldXp8iidAgAABAgQIECBAoI0Cj3d3f5YR9yPidhvrUxMBAgTaKjCKjFujrbaWpy4CrRWoqjKm5TROooy6tVUqjAABAgQIECBAgEA/BcrMOOxna7q6oEBm1luZ/353Mvnwgre4jAABAgQIECBAgACBlwgIuHtECBAgQIAAAQIECBAgMCcBp7bPCdIyBAgMWuD2+s0oshi0geYJXFRgVs1iWs5iGtVFb3EdAQIECBAgQIAAAQJzFjjNjKM5r2m5bgpsFcVH+5PJe92sXtUECBAgQIAAAQIE2iUg4N6ueaiGAAECBAgQIECAAIGOCjza23urqKqPndre0QEqmwCB1ghs5ihurG+0ph6FEGijwPTsNE7qWZRtLE5NBAgQIECAAAECBAYm8EVRxBe176U0sLF/bbsbmZ98/+DgdR4ECBAgQIAAAQIECFxPQMD9en7uJkCAAAECBAgQIEBg4ALNqe3VaPRBZP5y4BTaJ0CAwFwEmrPbb49uzWUtixDok0BVlTEtp3ESZYjO9GmyeiFAgAABAgQIEOi6wGdFEScC7l0f41zrX898spH5g/3J5OFcF7YYAQIECBAgQIAAgQEJCLgPaNhaJUCAAAECBAgQIEBgvgLHOzv3qszm1PZX57uy1QgQIDBsgVtrGzEqRsNG0D2BpwKzahan5TRmYu2eCQIECBAgQIAAAQKtFDgsiigF3Fs5m1UWtZZ5tlnXv7h7ePhglXXYmwABAgQIECBAgEBXBQTcuzo5dRMgQIAAAQIECBAgsFKBo93dDyLiVystwuYECBDoqcAoMm6NtnranbYIvFygqqs4K2fxpJ5F9fLLXUGAAAECBAgQIECAwIoE6syYrGhv27ZfIDPrm5m/3p9M3mt/tSokQIAAAQIECBAg0C4BAfd2zUM1BAgQIECAAAECBAi0XODpqe33I+KNlpeqPAIECHRa4PbaZhTFWqd7UDyBywpUVXl+WvtplM5rvyye6wkQIECAAAECBAisQOCkKOIzp7evQL5bW25m/u71g4O3ulW1agkQIECAAAECBAisVkDAfbX+didAgAABAgQIECBAoEMCR3fuvB913ZzcfrtDZSuVAAECnRQYRxFbo5udrF3RBC4rMKtm58H2mVj7ZelcT4AAAQIECBAgQGClAn8uiviLgPtKZ9CVzTcyP1nP/PH+ZPKwKzWrkwABAgQIECBAgMAqBQTcV6lvbwIECBAgQIAAAQIEOiFwvL29XW5sfJx1/WYnClYkAQIEeiLgFPeeDFIbLxSo6irOylk8qWdRMSJAgAABAgQIECBAoJMCj4oiZgLunZzdKopez3xysyh+8uqnn/5+FfvbkwABAgQIECBAgECXBATcuzQttRIgQIAAAQIECBAgsHSBx7u7P8uI+05tXzq9DQkQIBBOcfcQ9FGgqsrz09pPo3Reex8HrCcCBAgQIECAAIHBCNSZMRlMtxqdl0Bm1lt1/fbdw8MH81rTOgQIECBAgAABAgT6KCDg3sep6okAAQIECBAgQIAAgWsLNKe2V+PxhxHxzrUXswABAgQIXFnAKe5XpnNjywRmTai9msVMrL1lk1EOAQIECBAgQIAAgasJnBRFfOb09qvhuSu2iuKj/cnkPRQECBAgQIAAAQIECLxYQMDdk0GAAAECBAgQIECAAIGvCDza23urqKrm1PZX4RAgQIDAagVGkXFrtLXaIuxO4IoCVV3FtJzFaT2L6opruI0AAQIECBAgQIAAgXYKfF4U8aWAezuH05GqbkT84XuHhz/sSLnKJECAAAECBAgQILBUAQH3pXLbjAABAgQIECBAgACBtgsc7e5+EBG/anud6iNAgMCQBG6tbcSoGA2pZb12XKCqynhSnkYTa6873ovyCRAgQIAAAQIECBB4scCkKKIWcPd4XFNgnHkwyvzR/mTy8JpLuZ0AAQIECBAgQIBArwQE3Hs1Ts0QIECAAAECBAgQIHBVgeO9vdeqqvo4It646hruI0CAAIHFCBQRcXt0azGLW5XAHAVm5TROq1nMxNrnqGopAgQIECBAgAABAu0TOCmK+Ey4vX2D6WhF65lPbhbFT1799NPfd7QFZRMgQIAAAQIECBCYu4CA+9xJLUiAAAECBAgQIECAQNcEju7ceT/qujm5/XbXalcvAQIEhiKwGWtxY7Q5lHb12SGBqq5iWs7itG7Oa/ciQIAAAQIECBAgQGAIAp8XRXwp4D6EUS+tx8yst+r67buHhw+WtqmNCBAgQIAAAQIECLRYQMC9xcNRGgECBAgQIECAAAECixU43t7ersfj+3XETxe7k9UJECBAYB4Ct9c2oyjW5rGUNQhcW6CszuKknEYTa6+vvZoFCBAgQIAAAQIECBDoikCdGQeZUQu4d2Vknapzqyg+2p9M3utU0YolQIAAAQIECBAgsAABAfcFoFqSAAECBAgQIECAAIH2Czza23urqKqPndre/lmpkAABAs8ERpFxa7QFhMBKBaZnpzGtz2Im1r7SOdicAAECBAgQIECAwKoEnhRFHAu3r4p/EPveiPjD9w4PfziIZjVJgAABAgQIECBA4GsEBNw9GgQIECBAgAABAgQIDE7gaGfnw8j85eAa1zABAgR6ILCZo7ixvtGDTrTQJYGqrqIJtp9GGVWXClcrAQIECBAgQIAAAQJzF3hUFDETcJ+7qwX/UWCceTDK/NH+ZPKQDQECBAgQIECAAIEhCgi4D3HqeiZAgAABAgQIECAwUIHjnZ17Veb9iHhjoATaJkCAQC8EXlm7EWvFei960US7BcrqLE7KaUzF2ts9KNURIECAAAECBAgQWJLAaWYcLWkv2xBYz3xysyh+8uqnn/6eBgECBAgQIECAAIGhCQi4D23i+iVAgAABAgQIECAwUIGjO3fej7r+ICJuD5RA2wQIEOiNwFpE3Fq/GUUWvelJI+0SaE5rn9ZnMYu6XYWphgABAgQIECBAgACBlQp8XhTxpdPbVzqDoW2emfVWXb999/DwwdB61y8BAgQIECBAgMCwBQTchz1/3RMgQIAAAQIECBDovcDx9vZ2PR7fryN+2vtmNUiAAIEBCYyjiK3RzQF1rNVFC1R1FU2w/TRK57UvGtv6BAgQIECAAAECBDooUGbGYQfrVnI/BLaK4qP9yeS9fnSjCwIECBAgQIAAAQIvFxBwf7mRKwgQIECAAAECBAgQ6KjAo729t4qquh8Rr3a0BWUTIECAwDcIbOUoxusbjAhcS6CszuKknMZUrP1ajm4mQIAAAQIECBAg0HcBp7f3fcLt728z83evHxy81f5KVUiAAAECBAgQIEDg+gIC7tc3tAIBAgQIECBAgAABAi0UONrd/SAiftXC0pREgAABAnMUeGXtRqwV63Nc0VJDEWhOaz+pZ1EOpWF9EiBAgAABAgQIECBwZQGnt1+Zzo1zFtjI/GQ988f7k8nDOS9tOQIECBAgQIAAAQKtEhBwb9U4FEOAAAECBAgQIECAwHUFjvf2Xivr+n7W9ZvXXcv9BAgQINB+geaLW6+sbUZRrLW/WBWuXKCqypiW0ziJMuqVV6MAAgQIECBAgAABAgS6IvBZUcRJ7U8RXZlX3+tcz3yykfkDIfe+T1p/BAgQIECAAIFhCwi4D3v+uidAgAABAgQIECDQK4HHu7s/y4j7EXG7V41phgABAgS+UaCJtt9avxlFFqQIvFBgVs1iWs5iGhUhAgQIECBAgAABAgQIXErgNDOOLnWHiwksXiAz6626fvvu4eGDxe9mBwIECBAgQIAAAQLLFxBwX765HQkQIECAAAECBAgQWIDA0c7Oh5H5ywUsbUkCBAgQ6IBAE3J/ZXSrA5UqcZkC07PTOKlnUS5zU3sRIECAAAECBAgQINArgUdFETOnt/dqpn1p5jzknvmfdyeT/+hLT/ogQIAAAQIECBAg8ExAwN2zQIAAAQIECBAgQIBApwWOd3buVZnNqe1vdLoRxRMgQIDAtQXGUcTW6Oa117FAtwWqqoxpOY2TKKPudiuqJ0CAAAECBAgQIEBgxQJfFEV8Idy+4inY/mUCNyM+/u7h4c9fdp3/ToAAAQIECBAgQKBLAgLuXZqWWgkQIECAAAECBAgQ+AeBxzs772bmhxFxGw0BAgQIEGgEhNyH+xzMqllMy1lMoxougs4JECBAgAABAgQIEJibwCwzHs1tNQsRWKzARuYn3z84eH2xu1idAAECBAgQIECAwPIEBNyXZ20nAgQIECBAgAABAgTmJHC8vb1djcdNsP2dOS1pGQIECBDokYCQe4+G+ZJWqrqKs3IWT+qZWPtwxq5TAgQIECBAgAABAksReFQUMXN6+1KsbTIfgVHE5+OiuLc/mTycz4pWIUCAAAECBAgQILA6AQH31dnbmQABAgQIECBAgACBKwgc7+zcqzLvR8QbV7jdLQQIECAwEAEh934PuqrKOC2ncRpl1P1uVXcECBAgQIAAAQIECKxA4M9FEX8Rbl+BvC2vK7Ce+eRmUfzk1U8//f1113I/AQIECBAgQIAAgVUKCLivUt/eBAgQIECAAAECBAhcSuDxzs67mdmc3H77Uje6mAABAgQGKTCKjJvrm1FkMcj++9j0rJqdB9tnYu19HK+eCBAgQIAAAQIECLRC4KQo4jPh9lbMQhFXE8jMequu3757ePjgaiu4iwABAgQIECBAgMDqBQTcVz8DFRAgQIAAAQIECBAg8BKB4+3t7Wo8boLt78AiQIAAAQKXEViLiFvrN4XcL4PWsmuruoppOYvTehZVy2pTDgECBAgQIECAAAEC/RKYZcbjzKgF3Ps12AF204Tcb2b+en8yeW+A7WuZAAECBAgQIECgBwIC7j0YohYIECBAgAABAgQI9FngeG/vtaqqPo6IN/rcp94IECBAYHECzfntt9ZuxFqxvrhNrDx3gbI6i5Pz09or57XPXdeCBAgQIECAAAECBAh8VaB+Gm6fCbd7OHokcDPi4+8eHv68Ry1phQABAgQIECBAYCACAu4DGbQ2CRAgQIAAAQIECHRR4PHu7s8y4n5E3O5i/WomQIAAgfYINF8E2yrGMVobt6colbxQYHp2GtP6LGZi7Z4QAgQIECBAgAABAgSWJCDcviRo26xEYCPzk+8fHLy+ks1tSoAAAQIECBAgQOCKAgLuV4RzGwECBAgQIECAAAECixU42tn5MDJ/udhdrE6AAAECQxO4EWuxOdocWtut77eqyjgtp3EapVh766elQAIECBAgQIAAAQL9E/isKOLEye39G6yO/i4wivh8XBT39ieTh1gIECBAgAABAgQIdEFAwL0LU1IjAQIECBAgQIAAgQEJHG9vb5cbGx9nXb85oLa1SoAAAQJLFBhFxs21G1EUa0vc1VYvEnBau+eCAAECBAgQIECAAIFVC3xeFPGlcPuqx2D/JQisZz65WRQ/efXTT3+/hO1sQYAAAQIECBAgQOBaAgLu1+JzMwECBAgQIECAAAEC8xQ43tm5V2X+NiJuz3NdaxEgQIAAga8KNF8U2yrGMVobw1mygNPalwxuOwIECBAgQIAAAQIEXihQZ8afMoXbPR+DEsjMequu3757ePhgUI1rlgABAgQIECBAoHMCAu6dG5mCCRAgQIAAAQIECPRT4PHOzruZ+Zt+dqcrAgQIEGirwPlp7uubUWTR1hJ7UVdVV3FWzuKknkXZi440QYAAAQIEui1wmt37K8Lmd2sjJyx3+8FTPYEWCTTh9seZMfPrSoumopRlCTQh95uZv96fTN5b1p72IUCAAAECBAgQIHBZge599eqyHbqeAAECBAgQIECAAIFWCxxvb29X4/GHEfFOqwtVHAECBAj0VqD5AtmNHMWN9Y3e9riqxmblNKbVWUyjWlUJ9iVAgAABAq0UmGW+8N3x7Gv+fdPE6Us6mQpp/l0oM2P0DV7nYfmv+e/rEVG8wLL592uMW/n/k6IIXFagzIzPhNsvy+b6HgrcjPj4u4eHP+9ha1oiQIAAAQIECBDogYCAew+GqAUCBAgQIECAAAECXRU43tt7raqqjyPija72oG4CBAgQ6I9Ac5r7hHxCZQAAIABJREFUxto4RsU3xaH60++iOimbQHs5i9Moo17UJtYlQIAAAQIrEPjqqecvCqN/NYTevBc6HXgFw1rSli8K0r8oPP/V0LzT6Jc0INsQeIFA82t5E26vfWDF80HgXGAj85PvHxy8joMAAQIECBAgQIBA2wQE3Ns2EfUQIECAAAECBAgQGIjA8c7OvSrztxFxeyAta5MAAQIEOiIwjiI21zaiKNY6UvHqy3wWap9G6az21Y9DBQQIECDwDQLPh9SrzDh77tqvhtOdiO5RWpbAV4Py56fFP7d58/HLfBrGFY5f1lTs00eBvxZF/EmwvY+j1dM1BcaZB6PMH+1PJg+vuZTbCRAgQIAAAQIECMxNQMB9bpQWIkCAAAECBAgQIEDgogKPd3bezczfXPR61xEgQIAAgVUICLp/s7pQ+yqeSnsSIECAwPMCz4fVp/nff+U1i/j7B67KiCiFGT04PRYYZcazp//5YPzzp8YLxff4AdDahQTqzDjKDB9cuhCXiwYqsJ75ZCPzB0LuA30AtE2AAAECBAgQaKGAgHsLh6IkAgQIECBAgAABAn0WONrdvR8R7/S5R70RIECAQL8EBN3/e56zahZn5Vk4qb1fz7huCBAg0BaB8rkT1c8y/x5Sf/5kdeHEtkxLHV0VWMv8++nwzwfinz8lfsOHQro6XnW/QOCkKOI4ImrPteeDwEsF1jLPNuv6F3cPDx+89GIXECBAgAABAgQIEFiwgID7goEtT4AAAQIECBAgQIDA3wSOt7e3y42Nj7Ou32RCgAABAgS6KDCKjHGux3h9o4vlX6nmqq7irJzFrC5jFlXUV1rFTQQIECAwdIFnJ603J+g2p6s3r2enrDfvLTOhw6E/IvpvqUBmRhN8b17Ph+HHT/+fPf93/v9t6fSU1Xxo6k+ZceIZ9TAQuJRAZtZbmf9+dzL58FI3upgAAQIECBAgQIDAnAUE3OcMajkCBAgQIECAAAECBP5Z4Hhn516V+XFEvMqHAAECBAh0XaD5gtpGrMV4bRRrRRPr6ddrVk7jrGoC7WWU/WpNNwQIECAwZ4FnJ64Lrs8Z1nIEOigwzr/9tfM4IpqfFU0o/mmw2InwHRxoh0tu3pP+0vzj1PYOT1HpbRDYKoqP9ieT99pQixoIECBAgAABAgSGKSDgPsy565oAAQIECBAgQIDA0gQe7e29VVRVE26/vbRNbUSAAAECBJYk0AR3xrEW62vrMSqenW+5pM3nsE1zQntZnUVZlXEWVcyc0T4HVUsQIECgHwIvCq+fPm2tOX29diJuPwatCwJLFBhlnoffn50GLwS/RPyBbPWkKOLPEVF6jxrIxLW5aIHNzN+9fnDw1qL3sT4BAgQIECBAgACBFwkIuHsuCBAgQIAAAQIECBBYmMDjnZ13M/M3C9vAwgQIECBAoEUCfwvrZKxnE3Zfa+Xp7rNqFmVVRVn/LdBetchPKQQIECCwXIHTp6ctn2Wevx80ofVnPwqvL3cWdiNA4L8FnoXgn50E33yENOv6b6F4oWWPytcICLZ7NAgsTmAj85PvHxy8vrgdrEyAAAECBAgQIEDgxQIC7p4MAgQIECBAgAABAgQWInC0u3s/It5ZyOIWJUBg6QLNCZ7CBEtnt2EPBEaRsRZFZBaxVhSxlmtRZHNW5eJe56ey12XUVRXNz5sgexm1MPviyK1MgACBVgo8C7BPnwbZn52+PhUQbeW8FEWAwMUE1po/mz53CnwTfC8E4C+G18OrBNt7OFQttVJgFPH5uCju7U8mD1tZoKIIECBAgAABAgR6KSDg3suxaooAAQIECBAgQIDA6gSOt7e36/H4fh3x09VVYWcCBOYp8EVRxM26FnCfJ6q1Bi/QBN+b13n4/alGE3zP4gLh97qOsir/btgE2JuXEPvgHysABAgMTKD5AOJZRDiBfWCD1y4BAt8o8HUnwG/4cE9vnpzm/e/LzPhLRPiOI70Zq0Y6ILCe+WQj8wdC7h0YlhIJECBAgAABAj0REHDvySC1QYAAAQIECBAgQKANAk24vRqPfxsRb7ShHjUQIHB9gZOiiJOI2K7+FqD1IkCAAAECBAgQWJ7ALPP8Y0zNKex18+P5B5oiSkHN5Q3BTgQI9EYgM2PUnPgecf7js9PfxxGRfl1t/Zyb09qfRMSJWbV+Vgrsr8Ba5tlmXf/i7uHhg/52qTMCBAgQIECAAIG2CAi4t2US6iBAgAABAgQIECDQcYHjnZ17VebHEfFqx1tRPgECTwWaU9H+mBnfqetw2p3HggABAgQIECCwGAEh9sW4WpUAAQKXFRhnCr9fFm3B1z/70H0TbHda+4KxLU/gggKZWW/V9dtC7hcEcxkBAgQIECBAgMCVBQTcr0znRgIECBAgQIAAAQIEngk8Dbc3J7ffpkKAQD8E6sx4nH/7ssGO09v7MVRdECBAgAABAisTaD44eOYk9pX525gAAQLXFXg+/N6c/t6c+O6D4NdV/ef7m69FnGTGacT5ae1C7fM3tiKBeQlsFcVH+5PJe/NazzoECBAgQIAAAQIEviog4O6ZIECAAAECBAgQIEDgWgKPd3bezcwPhduvxehmAq0T+Lwo4su6jm9nxqaAe+vmoyACBAgQIECgnQKnmVE9DbPPIqKMiFldt7NYVREgQIDAtQXWMmMtIsYR5z+u13WsNz/3a/+FbJtAe/PeOY04D7V7z7wQm4sItEZAyL01o1AIAQIECBAgQKCXAgLuvRyrpggQIECAAAECBAgsR+BpuP03y9nNLgQILEvgSVHE8dO/jP/XpyfTLWtv+xAgQIAAAQIE2i7w7DT2s8zzAHsTymvC7E6Zbfvk1EeAAIHlCowyo/nL+I2IKJ6G35sfRwMOv8+aD4E9PaG9ee8UaF/uM2k3AosQ2Mj85PsHB68vYm1rEiBAgAABAgQIDFtAwH3Y89c9AQIECBAgQIAAgSsLHN25837U9f+68gJuJECglQLNXzY/zjwPaN3IjO84vb2Vc1IUAQIECBAgsHiBZ0H26dMg+1kTZh9wKHHx4nYgQIDAcAQyM0ZPg+/Nj81r/PQ9pjkNPjv+ftOcyt6czn4eYvcdTYbzYOt0sAJC7oMdvcYJECBAgAABAgsVEHBfKK/FCRAgQIAAAQIECPRT4Gh3935EvNPP7nRFYLgCzV8+N+H2ZyeofTszNgXch/tA6JwAAQIECAxEQJB9IIPWJgECBDom8CwE35S9HhFrT+tvfl48F4BfZiD+2XtmU0rVnMb+tKbTpz/6jiYde8iUS2COAuuZTzYyf7A/mTyc47KWIkCAAAECBAgQGLCAgPuAh691AgQIECBAgAABAlcREG6/ipp7CHRD4POiiC+f+0vyf+3BqXHdkFclAQIECBAgsAyB5sN804g4e3qirBPZl6FuDwIECBBYhcA45xMDKJvT1zt+mvwq/O1JYKgCQu5Dnby+CRAgQIAAAQKLEZjPn2wXU5tVCRAgQIAAAQIECBBomYBwe8sGohwCcxT4a1HEn577S+sbmfEdp7fPUdhSBAgQIECAwDIFTjPPT5ZtTpJtQu1OlF2mvr0IECBAgAABAgSGKpCZ9VZdv3338PDBUA30TYAAAQIECBAgMB8BAff5OFqFAAECBAgQIECAQK8Fjre3t+vx+H4d8dNeN6o5AgMVmGXGo6/0/u3M2BRwH+gToW0CBAgQINAdgTIzzk9ifxpmb06anTlptjsDVCkBAgQIECBAgEDvBITcezdSDREgQIAAAQIEViIg4L4SdpsSIECAAAECBAgQ6I5AE26vxuPfRsQb3alapQQIXFSgzow/Zv7Ttxy/ExFrwmEXZXQdAQIECBAgsASB5kN5Z05lX4K0LQgQIECAAAECBAhcX2CrKD7an0zeu/5KViBAgAABAgQIEBiigID7EKeuZwIECBAgQIAAAQIXFBBuvyCUywh0WODzoogvvxJkX8uMO05v7/BUlU6AAAECBLovcPpcmH3mVPbuD1QHBAgQIECAAAECgxQQch/k2DVNgAABAgQIEJiLgID7XBgtQoAAAQIECBAgQKB/AsLt/Zupjgh8VeBJUcTxC05pv5kZ2wLuHhgCBAgQIEBgCQLNd5OZRsT06cnsTZi99F1kliBvCwIECBAgQIAAAQLLEbgR8YfvHR7+cDm72YUAAQIECBAgQKAvAgLufZmkPggQIECAAAECBAjMUUC4fY6YliLQUoFZZjzOjPoFAbJvZ8amgHtLJ6csAgQIECDQXQFh9u7OTuUECBAgQIAAAQIEriOwkfnJ9w8OXr/OGu4lQIAAAQIECBAYloCA+7DmrVsCBAgQIECAAAECLxUQbn8pkQsIdF6gCZc14fbZ15yOuhMRIyendn7OGiBAgAABAqsUEGZfpb69CRAgQIAAAQIECLRPYJx5MMr80f5k8rB91amIAAECBAgQIECgbQIC7m2biHoIECBAgAABAgQIrFBAuH2F+LYmsESBz4sivvyGAPu/CbcvcRq2IkCAAAEC3RcQZu/+DHVAgAABAgQIECBAYBkC65lPNjJ/IOS+DG17ECBAgAABAgS6LSDg3u35qZ4AAQIECBAgQIDA3ASE2+dGaSECrRY4KYr47BsC7OPM+B9V1eoeFEeAAAECBAisVuA0M86a7wYTEacRUfpw3GoHYncCBAgQIECAAAECHRIQcu/QsJRKgAABAgQIEFihgID7CvFtTYAAAQIECBAgQKBNAo/v3Plt1vWbbapJLQQIzFegzIw/Zkb9DSG0m5mxLeA+X3irESBAgACBDgvMvhJmnwmzd3iaSidAgAABAgQIECDQDoHMrLfq+u27h4cP2lGRKggQIECAAAECBNomIODetomohwABAgQIECBAgMAKBI52d+9HxDsr2NqWBAgsUeBxUcT0JaG0b2XGtwTclzgVWxEgQIAAgfYI1JnRnM7+7GT25sdv+mBceypXCQECBAgQIECAAAECXRMQcu/axNRLgAABAgQIEFiugID7cr3tRoAAAQIECBAgQKB1AsLtrRuJgggsROCLoogvLnDi6r9ExMYFrltIkRYlQIAAAQIElirQnM4+fS7QXvo9wFL9bUaAAAECBAgQIEBg6ALnIffM/7w7mfzH0C30T4AAAQIECBAg8I8CAu6eCAIECBAgQIAAAQIDFhBuH/DwtT4ogeYk1qMLdizgfkEolxEgQIAAgY4JfPV09pd9V5eOtadcAgQIECBAgAABAgQ6LLBVFB/tTybvdbgFpRMgQIAAAQIECMxZQMB9zqCWI0CAAAECBAgQINAVgaM7d96Puv5fXalXnQQIXE2gCbP9MTMueiLrvzm59WrQ7iJAgAABAi0TcDp7ywaiHAIECBAgQIAAAQIEvlFAyN0DQoAAAQIECBAg8LyAgLvngQABAgQIECBAgMAABR7v7Lybmb8ZYOtaJjA4gc+KIk4uEVoXcB/cI6JhAgQIEOiBQPOBtmlETDPjtPnxEu/9PWhfCwQIECBAgAABAgQI9ERgI/OT7x8cvN6TdrRBgAABAgQIECBwDQEB92vguZUAAQIECBAgQIBAFwUe7+7+LCP+dxdrVzMBApcTeFIUcXyJgFtmxr9W1eU2cTUBAgQIECCwdIEyM85PaI84D7TPLvF+v/RibUiAAAECBAgQIECAAIFLCAi5XwLLpQQIECBAgACBHgsIuPd4uFojQIAAAQIECBAg8FWB452de1XmbyPiNh0CBPot0ATf/pgZ9SUCb+PM+B8C7v1+MHRHgAABAp0UaMLsZ09PZ28C7eUl3t872bCiCRAgQIAAAQIECBAYtEATcl/P/PH+ZPJw0BCaJ0CAAAECBAgMWEDAfcDD1zoBAgQIECBAgMCwBI739l6rquoPwu3DmrtuhyvwuChiesnwm4D7cJ8XnRMgQIBAuwTOT2d/LtB+mQ+stasT1RAgQIAAAQIECBAgQOBqAuuZTzYyfyDkfjU/dxEgQIAAAQIEui4g4N71CaqfAAECBAgQIECAwAUEjre3t6vxuDm5/Y0LXO4SAgQ6LvBFUcQXlwy3Ny0LuHd88MonQIAAgc4KnD4XaL/sB9Q627TCCRAgQIAAAQIECBAg8BIBIXePCAECBAgQIEBguAIC7sOdvc4JECBAgAABAgQGJPDZ7u7HdcRPB9SyVgkMVqA58fXRFbsXcL8inNsIECBAgMAlBQTaLwnmcgIECBAgQIAAAQIEBivQhNxvFsVPXv30098PFkHjBAgQIECAAIEBCgi4D3DoWiZAgAABAgQIEBiWwNHu7v2IeGdYXeuWwDAF6sx4nBmzK5ze3ogJuA/zudE1AQIECCxeQKB98cZ2IECAAAECBAgQIECgvwKZWW/V9dt3Dw8f9LdLnREgQIAAAQIECDwvIODueSBAgAABAgQIECDQY4HHOzvvZuZvetyi1ggQeE7gz0URf7liuL1ZRsDd40SAAAECBOYjINA+H0erECBAgAABAgQIECBA4JmAkLtngQABAgQIECAwLAEB92HNW7cECBAgQIAAAQIDEjje2blXZf7fAbWsVQKDFmiCdEfXFBBwvyag2wkQIEBgsAIC7YMdvcYJECBAgAABAgQIEFiigJD7ErFtRYAAAQIECBBYsYCA+4oHYHsCBAgQIECAAAECixA43t7ersbj/4qI24tY35oECLRLoM6MP2ZGeY3T25uOBNzbNVfVECBAgEB7BQTa2zsblREgQIAAAQIECBAg0H+BraL4aH8yea//neqQAAECBAgQIDBcAQH34c5e5wQIECBAgAABAj0WONrd/UNEvNHjFrVGgMBzAp8XRXx5zXB7s5yAu8eKAAECBAi8WGCWGdPMOI2Ikzm853ImQIAAAQIECBAgQIAAgesJCLlfz8/dBAgQIECAAIG2Cwi4t31C6iNAgAABAgQIECBwSYGjnZ0PI/OXl7zN5QQIdFTgpCjiszkF7dYy405VdVRC2QQIECBAYH4CZWacPA20N6H2ek7vtfOr0EoECBAgQIAAAQIECBAgIOTuGSBAgAABAgQI9FdAwL2/s9UZAQIECBAgQIDAAAUe7+y8m5m/GWDrWiYwSIE6Mw4y5xq6+zcBvkE+S5omQIDA0AWa99TnA+2l98OhPxL6J0CAAAECBAgQIECgIwKbmb97/eDgrY6Uq0wCBAgQIECAAIELCgi4XxDKZQQIECBAgAABAgTaLnC8s3OvyvxtRNxue63qI0BgPgKfFUWczDmAJ+A+n9lYhQABAgTaL9B8F5RpRDQntM/m/H7a/u5VSIAAAQIECBAgQIAAgf4IbGR+8v2Dg9f705FOCBAgQIAAAQIEBNw9AwQIECBAgAABAgR6IHC8vb1djcdNuP2NHrSjBQIELiDQhPI+W0AYbyciRgtY9wItuYQAAQIECCxUYJYZ08x4EhFT73ULtbY4AQIECBAgQIAAAQIEli0g5L5scfsRIECAAAECBBYrIOC+WF+rEyBAgAABAgQIEFiKwNHOzoeR+culbGYTAgRWLlBnxkFm1AsI5/1LRGwsYN2VoymAAAECBAYnUD4NtDcntDeh9kW8bw4OVcMECBAgQIAAAQIECBBosYCQe4uHozQCBAgQIECAwCUFBNwvCeZyAgQIECBAgAABAm0TeLy7+7OM+N9tq0s9BAgsTuCzooiTBYXQv50Zm1W1uOKtTIAAAQIEFijQfIeTaUQ0ofbZgt4rF1i+pQkQIECAAAECBAgQIEDgmgLjzINR5o/2J5OH11zK7QQIECBAgAABAisUEHBfIb6tCRAgQIAAAQIECFxX4Hh7e7saj/8rIm5fdy33EyDQDYEmuPfZAgN738qMbwm4d+NhUCUBAgQIxOy5U9oX9eEvzAQIECBAgAABAgQIECDQLYH1zCcbmT8Qcu/W3FRLgAABAgQIEHheQMDd80CAAAECBAgQIECgwwKP79z5bdb1mx1uQekECFxCoM6Mg8yoFxhwv5EZ3xFwv8RUXEqAAAECyxRo3gtPM+Pk6Snt5QLfE5fZl70IECBAgAABAgQIECBAYL4CQu7z9bQaAQIECBAgQGDZAgLuyxa3HwECBAgQIECAAIE5CRzdufN+1PX/mtNyliFAoAMCnxVFLPp02lFm7Ai4d+BpUCIBAgSGI/DslPYnETEVaB/O4HVKgAABAgQIECBAgACBawoIuV8T0O0ECBAgQIAAgRUKCLivEN/WBAgQIECAAAECBK4qcLy391pVVX+IiNtXXcN9BAh0S+CkKOKzJYX6/m1J+3RrAqolQIAAgWUJNKe0nzQntUdEE2pf5HcuWVZP9iFAgAABAgQIECBAgACB1QgIua/G3a4ECBAgQIAAgesKCLhfV9D9BAgQIECAAAECBFYgcLS724Tb31jB1rYkQGAFAk3Q7yBzaQG/f4mIDSH3FUzalgQIEBiugFPahzt7nRMgQIAAAQIECBAgQGDRAplZbdX1/3f38PDBoveyPgECBAgQIECAwHwEBNzn42gVAgQIECBAgAABAksTONrd/SAifrW0DW1EgMDKBT4rijhZYuD8dmZsVdXK+1YAAQIECPRXoPnw1mlzUnvE+Unt5RLf5/qrqjMCBAgQIECAAAECBAgQ+DqBzKy36vptIXfPCAECBAgQIECgGwIC7t2YkyoJECBAgAABAgQInAsc7+29VlVVc3r7bSQECAxDoAn/HS251ZuZsS3gvmR12xEgQKD/AmUTaG+C7RFL/eBW/2V1SIAAAQIECBAgQIAAAQIXERByv4iSawgQIECAAAEC7RAQcG/HHFRBgAABAgQIECBA4EICj+/c+W3W9ZsXuthFBAh0XqA53faPmUs/1XYtM+4IuHf++dEAAQIE2iDQfFCr+eeJU9rbMA41ECBAgAABAgQIECBAYPACQu6DfwQAECBAgAABAh0REHDvyKCUSYAAAQIECBAgQODxzs67mfkbEgQIDEfgz0URf6nrlTR8JyLWVrT3Shq2KQECBAjMRaD5cFZzSnsTaG9Oaq+9l8zF1SIECBAgQIAAAQIECBAgMD8BIff5WVqJAAECBAgQILAoAQH3RclalwABAgQIECBAgMAcBY63t7er8fi/IuL2HJe1FAECLRZoTrs9WmF9386MTae4r3ACtiZAgEB3BGaZMc2MLyNiJtDencGplAABAgQIECBAgAABAgMWEHIf8PC1ToAAAQIECHRCQMC9E2NSJAECBAgQIECAwNAFjnZ370fEO0N30D+BIQkcFkWUKwwJ3syMbQH3IT1yeiVAgMClBJoPYjX/NCe1r/L96lJFu5gAAQIECBAgQIAAAQIECHxFYKsoPtqfTN4DQ4AAAQIECBAg0C4BAfd2zUM1BAgQIECAAAECBP5J4NHe3ltFVf0fNAQIDEfgi6KIL1YYbm+kMzP+VcB9OA+dTgkQIPASgTozTppQe8R5qL1e8fuUgREgQIAAAQIECBAgQIAAgXkJCLnPS9I6BAgQIECAAIH5CQi4z8/SSgQIECBAgAABAgQWInC0u/uHiHhjIYtblACB1gnMMuNRS6raiYiRAGNLpqEMAgQILF+gfC7UfuL9YPkDsCMBAgQIECBAgAABAgQILE1AyH1p1DYiQIAAAQIECFxIQMD9QkwuIkCAAAECBAgQILAagcc7O+9m5m9Ws7tdCRBYhcDjoohpS0KEtzLjFae4r+IxsCcBAgRWJtB80Ko5qf0kImYteT9aGYaNCRAgQIAAAQIECBAgQGBQAkLugxq3ZgkQIECAAIGWCwi4t3xAyiNAgAABAgQIEBiuwPH29nY1Hv9XRNweroLOCQxL4K9FEX9qUZhwLTPuCLgP6yHULQECgxQ4zYzmnycRUbbofWiQw9A0AQIECBAgQIAAAQIECKxUQMh9pfw2J0CAAAECBAj8XUDA3cNAgAABAgQIECBAoKUCR7u7H0TEr1panrIIEJizQJ0ZB5lRtyxYuBMRo5bVNGd6yxEgQGCQAidFcX5KexNqb9t7zyAHomkCBAgQIECAAAECBAgQaI2AkHtrRqEQAgQIECBAYMACAu4DHr7WCRAgQIAAAQIE2itwvLf3WlVV/6+9FaqMAIF5C3zWBA1bGCS/lRmvOMV93uO2HgECBJYu0HyQ6uTpKe1tfL9ZOogNCRAgQIAAAQIECBAgQIDANwgIuXs8CBAgQIAAAQKrFRBwX62/3QkQIECAAAECBAi8UOBod/d+RLyDhwCBYQicZsZRS1vNzPhXAfeWTkdZBAgQ+GaB8mmo/TSilR+iMj8CBAgQIECAAAECBAgQINBmASH3Nk9HbQQIECBAgEDfBQTc+z5h/REgQIAAAQIECHRO4Hhn516V+X87V7iCCRC4kkBzou4fM6Ns4entzxr6TmbcEHK/0nzdRIAAgWULPAu1fxkRsxa/tyzbxX4ECBAgQIAAAQIECBAgQOAqAkLuV1FzDwECBAgQIEDg+gIC7tc3tAIBAgQIECBAgACBuQo8vnPnt1nXb851UYsRINBagS+KIr5oeQDxRmZ8R8C9tc+QwggQIDDLjGlmCLV7FggQIECAAAECBAgQIECAwPwFNjN/9/rBwVvzX9mKBAgQIECAAAECXycg4O7ZIECAAAECBAgQINAigUd7e28VVfV/WlSSUggQWKBAc8ru4QLXn+fSdyJireVB/Hn2ay0CBAi0XaAJtT9p/olo9XcBabuj+ggQIECAAAECBAgQIECAwEUENjI/+f7BwesXudY1BAgQIECAAAEC1xcQcL++oRUIECBAgAABAgQIzE3A6e1zo7QQgU4IPC6KmHYkNP6tzPiWU9w78VwpkgCB/goItfd3tjojQIAAAQIECBAgQIAAgfYLCLm3f0YqJECAAAECBPojIODen1nqhAABAgQIECBAoOMCTm/v+ACVT+CSAk+KIo47Em5vWsvM+FcB90tO2eUECBC4voBQ+/UNrUCAAAECBAgQIECAAAECBOYlIOQ+L0nrECBAgAABAgS+WUDA3RNCgAABAgQIECBAoCUCTm9TfBLhAAAgAElEQVRvySCUQWAJAnVmHGRG3aGAe8Py7czYFHJfwhNiCwIEhi4g1D70J0D/BAgQIECAAAECBAgQINBmASH3Nk9HbQQIECBAgEBfBATc+zJJfRAgQIAAAQIECHRawOntnR6f4glcWuDPRRF/6Vi4vWlyLTPuCLhfet5uIECAwEUEhNovouQaAgQIECBAgAABAgQIECDQDgEh93bMQRUECBAgQIBAfwUE3Ps7W50RIECAAAECBAh0SMDp7R0allIJXFOgCTA+uuYaq7z9O5lxQ8h9lSOwNwECPRIQau/RMLVCgAABAgQIECBAgAABAoMTEHIf3Mg1TIAAAQIECCxRQMB9idi2IkCAAAECBAgQIPAiAae3ey4IDEvgcVHEtIOntz+b0jgz/oeA+7AeWt0SIDBXAaH2uXJajAABAgQIECBAgAABAgQIrFRAyH2l/DYnQIAAAQIEeiwg4N7j4WqNAAECBAgQIECgGwJHu7v3I+KdblSrSgIEriPwpCjiuMPh9me9/0vE/8/e3cfYWd53wv9dt4fxGA+dwTBnnNKOx44TYimMaZv0hdIxrNryBwGSVZWSthB2RdhN80YU2qpJKGyh2zZNFQvSrR7aPInK7uohWikU9nl22VYiWBHtrlYKDJFStiEZu4GZU+bFE9t4GM+c8+hMcEKIseflvNznvj+WLEO4r+v6/T6/2yPF/p5rYmsB+tjMLK0lQIDAegSE2tej5VkCBAgQIECAAAECBAgQINBdAkLu3TUv1RIgQIAAAQLdISDg3h1zUiUBAgQIECBAgEBBBeZ37hyt1WrfKmh72iJA4FUC9ZRiOqWoFyAY7hZ3rzYBAgTOLSDUfm4jTxAgQIAAAQIECBAgQIAAgaIICLkXZZL6IECAAAECBPIiIOCel0mogwABAgQIECBAoJQCbm8v5dg1XVKB72RZHC9AuP30+C5MKbbVaiWdprYJECBwZgGhdm8GAQIECBAgQIAAAQIECBAor4CQe3lnr3MCBAgQIECg+QIC7s03tSMBAgQIECBAgACBNQnMDw4O1np759f0sIcIEOhqgUbg8cWu7uCHi9+SUgwLuBdsqtohQGAjAispxWJK8VJEnCrQB5k2YmENAQIECBAgQIAAAQIECBAou4CQe9nfAP0TIECAAAECzRIQcG+WpH0IECBAgAABAgQIrFNgtlK5OyLuWucyjxMg0IUCM1kWSwUMPQ6kFNuF3LvwjVQyAQKbFRBq36yg9QQIECBAgAABAgQIECBAoLgCQu7Fna3OCBAgQIAAgfYJCLi3z9pJBAgQIECAAAECBH5AYLZSmYyIXVgIECi2wMksi/kChtsbU0spxc56PVJB+yv2m6k7AgTWK1B/5ab2ExGF/NDSej08T4AAAQIECBAgQIAAAQIECLy+gJC7t4MAAQIECBAgsDkBAffN+VlNgAABAgQIECBAYEMCM0NDt6SUPr+hxRYRINA1Ao0w5HRKUS9wALw/pfgRt7h3zTupUAIE1idwOtR+MiIWC/y1fH0qniZAgAABAgQIECBAgAABAgTWItAX8dSbqtWfWMuzniFAgAABAgQIEPhBAQF3bwQBAgQIECBAgACBDgjMDA9/OdXrBzpwtCMJEGijwLEsi2MlCEQORcR5Jeizja+OowgQ6LDAYpbFYkQ0gu1F/pBSh5kdT4AAAQIECBAgQIAAAQIECi+wPcs+t2dq6tbCN6pBAgQIECBAgECTBQTcmwxqOwIECBAgQIAAAQLnEpgfGrq8ltJXz/Wc/06AQHcLrKQU1e5uYc3V96YUF7vFfc1eHiRAIJ8Cp1KKEykJtedzPKoiQIAAAQIECBAgQIAAAQJdKyDk3rWjUzgBAgQIECDQQQEB9w7iO5oAAQIECBAgQKCcArOVyhci4r3l7F7XBMojMJNlsVSiW80HUortQu7lecF1SqAgAo1Q+8lXQu0rJfqaXZDxaYMAAQIECBAgQIAAAQIECHSNgJB714xKoQQIECBAgEBOBATcczIIZRAgQIAAAQIECJRDYH5wcLDW2zsZEQPl6FiXBMop8HJKMVuy1lNKsbNejyQgWrLJa5dA9wk0vsPGYkrxUkSc8jWr+waoYgIECBAgQIAAAQIECBAg0KUCQu5dOjhlEyBAgAABAh0REHDvCLtDCRAgQIAAAQIEyiowMzR0S0rp82XtX98EyiJQzbIo403AfSnFDre4l+U11yeBrhKovxJqPxFRqu+u0VVDUiwBAgQIECBAgAABAgQIECiBgJB7CYasRQIECBAgQKApAgLuTWG0CQECBAgQIECAAIG1CcxWKk9FxP61Pe0pAgS6UeBElsVCiW8EvjCl2Cbk3o2vrpoJFFJgMctiMSJeKvHX5UIOVlMECBAgQGAdAj2jo1G/4EfOuqL35352HTt+/9G+XaOxddeuDa3dzKLlhYU48XTjj5g29+Plr30t0rHja96k/uw/RG1pac3Pe5AAAQIECBA4s4CQuzeDAAECBAgQIHBuAQH3cxt5ggABAgQIECBAgEBTBOaHhi6vpfTVpmxmEwIEcinQuCF4OqWolzhImVKKSr0eW0pskMuXU1EESiRwKqU4kVKcjCj11+MSjVyrBAgQIFAAgay3N9Klb/mBTmo/+oboe014/PUC5f3790fPwEABJIrRwuKRI7E4OXnWZtYa0l/6u78/J0o69p1YPsd559zEAwQIECBAoM0CQu5tBnccAQIECBAg0HUCAu5dNzIFEyBAgAABAgQIdKvA7NDQwUjpI91av7oJEDi3wHeyLI4LdkdvSnGxW9zP/cJ4ggCBpgmspBSLKUXj/tEVX4eb5mojAgQIECCwHoHXhtSzffuiZ/C7ofOewcHYPvb9b2jX+Pf+sbH1bO9ZApsWaITqjz/99Dn3WWv4fvnoQtS+/vVz7pee/3Ysz82d8zkPECBAgED5BITcyzdzHRMgQIAAAQJrFxBwX7uVJwkQIECAAAECBAhsSmC2UjkaEa4T25SixQTyK9AIV1bzW17bK7sgpbhAyL3t7g4kUCaBxnfNaITaT0TEklB7mUavVwIECBBoo8CWy74bQq9f0B9b3/rW1X9+dVhdUL2Nw3BUoQXWEr4/MfF0LB9t/PHimX+8/LWvRTrW+MjnD/9wy32hXx/NESDQ5QJC7l0+QOUTIECAAAECLRMQcG8ZrY0JECBAgAABAgQIfF9gplJ5Z4r4EhMCBIorMJNlApavGe9FEbFV6LS4L73OCHRIYDHLYjEiXvL1pUMTcCwBAgQIFEHgdHC99qNviL5du1ZbGhg/sPpr3+ho9I2MFKFNPRAgsAaBs4XrXy9U/3ph+pVnJtZwokcIECBA4LUC/RE37q5WHyJDgAABAgQIECDwfQEBd28DAQIECBAgQIAAgTYIzFUqD9cjbmjDUY4gQKADAi+nFLMdODfvR6aUYme9HkkINe+jUh+B3AucSilONn5GxIqvKbmflwIJECBAoLMCPaOjUb/gR+J0eL1v12hs3bVr9eb1/rHv3sjuBwECBNolsHjkSCxOTv7AcS8fPhyLh1/zv53hBnqB+XZNyTkECHRaIKVU316vv0fIvdOTcD4BAgQIECCQJwEB9zxNQy0ECBAgQIAAAQKFFJgfHBys9fbOF7I5TREgsCpQzTKBy9d5F3pTiotrNW8KAQIE1i1QTyleavyMiFNC7ev2s4AAAQIEiitwOsCe7dsXPYMDsX3/5dEzMBD9+/ev/uoHAQIEiipwfGIilo8e/V57rw3KLx4+HNkLU9/77/Vn/yFqS0tF5dAXAQIFExByL9hAtUOAAAECBAhsWkDAfdOENiBAgAABAgQIECBwdoGZoaFbUkqf50SAQDEFTmZZzAtennW4/SnFjwi5F/M3gK4ItEBgMctWQ+2Lvra2QNeWBAgQINANAllvb6RL3/K9G9gF2LthamokQKAbBI4eOvS9Ml8bjl/6u7//3n8TjO+GaaqRQDEFhNyLOVddESBAgAABAhsTEHDfmJtVBAgQIECAAAECBNYsMDM8/OVUrx9Y8wIPEiDQNQKN24WnU4q6EOY5Z3ZhSrFNyP2cTh4gUFaBUynFyZTiRISvqWV9CfRNgACBkgn07NgR9Ut+LE7fwj4wfiB6Bgejf2ysZBLaJUCAQL4FFo8cicXJydUiXx2Kf/Vt8en5b8fy3Fy+G1EdAQJdIyDk3jWjUigBAgQIECDQYgEB9xYD254AAQIECBAgQKDcAvM7d47WarVvlVtB9wSKK3Asy+KYcPuaBpxSiovr9TiP15q8PESgDAKNDwm91PgZEad8bSjDyPVIgACB0gm89iZ2IfbSvQIaJkCghALHJyZi+ejR1c4XDj2x+uvy0YWoff3rq//sdvgSvhRaJrABgUbI/YIsG9/1wgtf2cBySwgQIECAAAEChRAQcC/EGDVBgAABAgQIECCQV4HZ4eHbo17/TF7rUxcBAhsXWEkp/tnt7esCbITcd9brkQRZ1+XmYQJFE1jMstVQ+6KvBUUbrX4IECBQWoGe0dGo/eiPxta3vjX6do3G1l27YnB8vLQeGidAgACBcwssLyzE8aefXn3wxMTTq6H4VwfhV56ZOPcmniBAoNACPSmd3JrSvj1TU4cL3ajmCBAgQIAAAQKvIyDg7tUgQIAAAQIECBAg0EKB2UrlqYjY38IjbE2AQIcEjjYCmsKZ69Y/75Wb3IXc101nAYGuFjiVUpxMKU40biz0tbOrZ6l4AgQIlFlgy2VjUfvRN0Tfrl2xff/lq7/2j42VmUTvBAgQINBigcUjR2JxcjIagfgTTzf+qDli6e/+fvVXIfgW49ueQA4EhNxzMAQlECBAgAABAh0TEHDvGL2DCRAgQIAAAQIEii4wv3PnaK1W+1bR+9QfgTIKNG5vr5ax8Sb13JdS7KjVmrSbbQgQyKtAPaVYTCmOR8Qpofa8jkldBAgQIHAGgVcH2QfGD0Tf6Gj0jYywIkCAAAECuRQ4PjGxegP86ZvgFw8fjuyFqUjPfzuW5+ZyWbOiCBBYu4CQ+9qtPEmAAAECBAgUS0DAvVjz1A0BAgQIECBAgECOBGaHh2+Pev0zOSpJKQQINElgJstiSVhzU5rnpxSDQu6bMrSYQF4FXn7ltnbf5SKvE1IXAQIECJwW6BkdjZVLL129iV2Q3XtBgAABAkUVOH0L/OkA/Mtf+1qkY8ej/uw/RG1pqaht64tAoQSE3As1Ts0QIECAAAECaxQQcF8jlMcIECBAgAABAgQIrFdgtlJpfM/Y/etd53kCBPIt0Ahuzua7xK6pTsi9a0alUALnFGh8Z4uXGj8jYsUHgM7p5QECBAgQaK9Az44dUb/kx6L35342tu+/fDXQ3j821t4inEaAAAECBHIqcPTQoVheWIgTTz8Vy0cXovb1r7v9PaezUla5BXpTmr50evoN5VbQPQECBAgQIFAmAQH3Mk1brwQIECBAgAABAm0TmB8cHKz19s637UAHESDQNgG3tzeXeiCl2O4m9+ai2o1AGwVOZlmciPBdLdpo7igCBAgQOLvAlsvGItu3L/pGd8X2sf0xOD6OjAABAgQIENigwPGJiVg+ejQWDj0Ri4cPR/bClJvfN2hpGYFmCGxN6bk3T0/vbcZe9iBAgAABAgQI5F1AwD3vE1IfAQIECBAgQIBAVwrMDA3dklL6fFcWr2gCBF5XoBHknHczcdPfkAtTim1C7k13tSGBVgmcSilOprQabK/7mtgqZvsSIECAwDkEXnsre//+/dE3MsKNAAECBAgQaJNA4+b3lw8fjsXDk/Hy174W2QsvxPLkZJtOdwyB8goIuZd39jonQIAAAQJlExBwL9vE9UuAAAECBAgQINAWgblK5eF6xA1tOcwhBAi0TaCaZbEizNkSbyH3lrDalEDTBOopxWJKcTwiTvk62DRXGxEgQIDA2gR6Rkdj5dJLoxFib9zK3vi1Z2BgbYs9RYAAAQIECLRVoHHre+O29xNPP7UafE/HjsfKMxNtrcFhBIouIORe9AnrjwABAgQIEGgICLh7DwgQIECAAAECBAg0WWB+cHCw1ts73+RtbUeAQIcF3N7e+gEIubfe2AkE1ivw8iu3tZ90W/t66TxPgAABAhsU2HLZWGT79q2G2Lfu2hWD4+Mb3MkyAgQIECBAIE8Crw2+u/E9T9NRSzcKbM+yz+2Zmrq1G2tXMwECBAgQIEBgLQIC7mtR8gwBAgQIECBAgACBdQjMVCrvTBFfWscSjxIgkHOBxs3F0ylF3a3FLZ+UkHvLiR1A4JwCja95L71yW7vvWnFOLg8QIECAwCYEXh1m375/f/SPjW1iN0sJECBAgACBbhRoBN9PPP10LB6ejKW/+/uoP/sPUVta6sZW1Eyg7QJC7m0ndyABAgQIECDQRgEB9zZiO4oAAQIECBAgQKAcArOVyhci4r3l6FaXBMohcCzL4phwe9uG3Z9S/Eit1rbzHESAwHcFFrMsXmr86uudV4IAAQIEmiyQ9fZGuvQt0ftzPxt9u0ZDmL3JwLYjQIAAAQIFE1heWIjjTz8dC4eeiMXDh2PLs8/G8uRkwbrUDoHmCAi5N8fRLgQIECBAgED+BATc8zcTFREgQIAAAQIECHS5wGylcjQiBrq8DeUTIPCKgNvbO/MqnJ9SDAq5dwbfqaUSWHnltvZGsN1t7aUavWYJECDQUgE3s7eU1+YECBAgQKC0AkcPHYoTE0+vht+F3kv7Gmj8DAL9WfbR3VNTB+EQIECAAAECBIokIOBepGnqhQABAgQIECBAoOMC80NDl9dS+mrHC1EAAQJNE3B7e9Mo172RkPu6ySwgsGaBk1kWJyJiyW3tazbzIAECBAicWUCY3ZtBgAABAgQIdFLg+MREnHj6u6H3+v/6n2567+QwnN0xgZRSfXu9/p7d1epDHSvCwQQIECBAgACBJgsIuDcZ1HYECBAgQIAAAQLlFpitVO6OiLvKraB7AsURaNxsXC1OO13ZyXkpxcX1eiQh3K6cn6LzJXAqpTiRUpyMiLrfU/kajmoIECDQJQI9o6OxcumlMTh+ILbv3x/9Y2NdUrkyCRAgQIAAgTIJuOm9TNPW62kBIXfvAgECBAgQIFA0AQH3ok1UPwQIECBAgAABAh0VmK1UnoqI/R0twuEECDRN4GiWxUtCoE3z3OhGjZD7jno9tpjFRgmtK7FAPaV4qfEzIk75PVTiN0HrBAgQWL9Az44dsfL2t0f//v2xfWx/DI6Pr38TKwgQIECAAAECORFohN4XDj0RL3/ta5H9wz/E8txcTipTBoHmCTRC7uentHvP1NTh5u1qJwIECBAgQIBAZwQE3Dvj7lQCBAgQIECAAIECCswPDg7WenvnC9ialgiUUsDt7fkae3rlJvfzBHTzNRjV5FZgMctiMcKHdHI7IYURIEAgXwJZb2/E294WW9/61hgYP7Aaau8ZGMhXkaohQIAAAQIECDRRYPHIkTj+9NOx8MQTUfv612PlmYkm7m4rAp0T6Enp5NaU9gm5d24GTiZAgAABAgSaIyDg3hxHuxAgQIAAAQIECBCImUrlnSniSygIECiGgNvb8znHC1OKbbVaPotTFYEOCzQ+mHP6tvYVHwbp8DQcT4AAgXwLbLlsLLJ9+2LgwHfD7H0jI/kuWHUECBAgQIAAgTYING55PzHxdJz4ylci/vf/jtrSUhtOdQSB5gsIuTff1I4ECBAgQIBA+wUE3Ntv7kQCBAgQIECAAIGCCsxWKl+IiPcWtD1tESiVgNvb8z3u81OKQSH3fA9JdW0TqKcUiynFiYhYEmpvm7uDCBAg0E0CPaOjsXLppatB9tXb2cfGuql8tRIgQIAAAQIEOibQuOW9ccP70UNPxJZnn43lycmO1eJgAusV6E1p+tLp6Tesd53nCRAgQIAAAQJ5ERBwz8sk1EGAAAECBAgQIND1ArOVSuNPt3d1fSMaIEAg5rIsFgVFc/0mnJdSXFyvRzKnXM9Jca0TeDmlONn4GRF1vw9aB21nAgQIdJlA1tsb8ba3xda3vvW7Yfb9+6NnYKDLulAuAQIECBAgQCCfAssLC9G45b0Req//r/8p8J7PManqVQJbU3ruzdPTe6EQIECAAAECBLpRQMC9G6emZgIECBAgQIAAgdwJzO/cOVqr1b6Vu8IURIDAugUaodHZda+yoBMCKaXYUa/HVuHeTvA7swMCje8u8VLjZ0SseO87MAFHEiBAIH8CjdvZ00//zHdvZz9wIPpGRvJXpIoIECBAgAABAgUVaATejz/9dCwceiKW/u7vY+WZiYJ2qq1uFhBy7+bpqZ0AAQIECJRbQMC93PPXPQECBAgQIECAQJMEZoeHb496/TNN2s42BAh0UGAmy2JJcLSDE1j/0RekFBfUautfaAWBLhCopxSLKcXxiDjla1MXTEyJBAgQaJ1Az44dUXvLW2L7lVfG9rH9MTg+3rrD7EyAAAECBAgQILAhgdUb3gXeN2RnUesEtmfZ5/ZMTd3auhPsTIAAAQIECBBovoCAe/NN7UiAAAECBAgQIFBCgblK5eF6xA0lbF3LBAol4Pb27h3nea/c5r5FALh7h6jyHxBYzLJYjIiXvNPeDAIECJRWYMtlY5Ht27d6M3vjhna3s5f2VdA4AQIECBAg0MUCjcD77COPRP1//c9Ynpzs4k6U3u0CQu7dPkH1EyBAgACB8gkIuJdv5jomQIAAAQIECBBogcBspXI0IgZasLUtCRBoo4Db29uI3YKjUkoxGBHb3ObeAl1btkPgVEpxMqU4ERF1wfZ2kDuDAAECuRFwO3tuRqEQAgQIECBAgEDLBJYXFmL1hvcnnhB4b5myjc8m0B9x4+5q9SFKBAgQIECAAIFuEBBw74YpqZEAAQIECBAgQCDXAvNDQ5fXUvpqrotUHAEC5xRwe/s5ibrmgb6U4sJ6PZKAcNfMrMyFrqQULzV+RsSKd7bMr4LeCRAomYDb2Us2cO0SIECAAAECBM4gsHjkyGrY/eihJyI9/njUlpY4EWipQEqpvr1ef4+Qe0uZbU6AAAECBAg0SUDAvUmQtiFAgAABAgQIECivwOzw8O1Rr3+mvAI6J1AMAbe3F2OOp7twm3ux5lm0bhqh9sVXQu2nhNqLNl79ECBA4IcE3M7upSBAgAABAgQIEFiLwPGJiVg49ES89N/+e6w8M7GWJZ4hsG6BRsj9giwb3/XCC19Z92ILCBAgQIAAAQJtFBBwbyO2owgQIECAAAECBIopMFepPFyPuKGY3emKQDkE3N5e3Dn3vnKb+xYh4uIOuUs6q78Saj8ZEYvexy6ZmjIJECCwMQG3s2/MzSoCBAgQIECAAIEfFJh59NHVG97rf/s3sTw3h4dA0wR6Ujq5NaV9e6amDjdtUxsRIECAAAECBJosIODeZFDbESBAgAABAgQIlE9gtlI5GhED5etcxwSKI+D29uLM8kydNG5z74+IC2q1Yjequ9wJCLXnbiQKIkCAQNMFst7eiLe9Lba+9a0xMH4gBsfHm36GDQkQIECAAAECBAgsHjkSs4/8dZz4ylei9uSTQAhsWqARct83PX3+pjeyAQECBAgQIECgRQIC7i2CtS0BAgQIECBAgEA5BOaHhi6vpfTVcnSrSwLFFHB7ezHneqautqQUg/V6bHV7dnmG3oFOhdo7gO5IAgQItFGgZ3Q00k//TPTv3x8DBw5E38hIG093FAECBAgQIECAAIHvCrjd3ZvQDIGtKT335unpvc3Yyx4ECBAgQIAAgWYLCLg3W9R+BAgQIECAAAECpRKYHR6+Per1z5Sqac0SKJiA29sLNtA1tNObUlxYr8cWQfc1aHlkLQJC7WtR8gwBAgS6T8Dt7N03MxUTIECAAAECBMoocPp295f+23+PlWcmykig500ICLlvAs9SAgQIECBAoKUCAu4t5bU5AQIECBAgQIBA0QXmKpWH6xE3FL1P/REoqoDb24s62bX1dX5KMVCvRxJ0XxuYp35AQKjdC0GAAIHiCTRuZ1+59NIYHD8Q2/fvj/6xseI1qSMCBAgQIECAAIFCCywvLMTsI4/E0UNPRHr88agtLRW6X801R2B7ln1uz9TUrc3ZzS4ECBAgQIAAgeYICLg3x9EuBAgQIECAAAECJRWYrVQmI2JXSdvXNoGuF3B7e9ePcNMNpJSiPyL6Bd03bVmGDVZSisWU4qWIOOWDEWUYuR4JECiwQON29nTpW6L35342BsYPRP/+/dEzMFDgjrVGgAABAgQIECBQRoGZRx+NhSeeiPrf/k0sz82VkUDPaxQQcl8jlMcIECBAgACBtgkIuLeN2kEECBAgQIAAAQJFE5jfuXO0Vqt9q2h96YdAWQTc3l6WSa+tT0H3tTmV8alTKcXJlOJlofYyjl/PBAgUSKBnx45YefvbV4Psq4F2t7MXaLpaIUCAAAECBAgQWIvA8YmJmH3kr+PU//gfsTzZuLvHDwLfF0gp1bfX6+/ZXa0+xIUAAQIECBAgkAcBAfc8TEENBAgQIECAAAECXSkwMzR0S0rp811ZvKIJEAi3t3sJziQg6O69qDfC7I2b2iPiZETU3dTupSBAgEBXCmy5bGz1dvbt+y+PwfFxt7N35RQVTYAAAQIECBAg0CqBxSNHVsPuJ7/4RWH3ViF34b5C7l04NCUTIECAAIECCwi4F3i4WiNAgAABAgQIEGitwOzQ0MFI6SOtPcXuBAi0QsDt7a1QLdaejaD7toi4oF6PLQLOxRruGbpp3NK+1LipPSKWzLvw89YgAQLFE8h6eyPe9rbYfuWVsX1s/2qg3Q8CBAgQIECAAAECBNYmsLywELOPPBIL/+9/jdqTT65tkacKK9CT0smtKe3bMzV1uLBNaowAAQIECBDoCgEB964YkyIJECBAgAABAgTyKDBbqTwVEfvzWJuaCBA4u4Db270h6xHoSym21+uxVfB5PWy5fvbVt7S/HBErZpvreSmOAAECrxXoGR2NlUsvjcHxAwY/kZ0AACAASURBVDFw4ED0jYxAIkCAAAECBAgQIECgCQLC7k1ALMAWjZD7vunp8wvQihYIECBAgACBLhYQcO/i4SmdAAECBAgQIECgcwLzg4ODtd7e+c5V4GQCBDYq4Pb2jcpZtyWl6I+I8+v1SALRXfdCNH7vr/6MiFPm13XzUzABAuUW2HLZWPT+3M/G9v2Xr97O3jMwUG4Q3RMgQIAAAQIECBBog4CwexuQc3zE1pSee/P09N4cl6g0AgQIECBAoOACAu4FH7D2CBAgQIAAAQIEWiPw4s6dV2W12uOt2d2uBAi0UsDt7a3ULc/e56cUfRHRV6uVp+ku67QRZl96JdC+JNDeZdNTLgECZRbIensj3va22PrWt8bA+IHVQLsfBAgQIECAAAECBAh0VkDYvbP+nTp9W0pP7J2evqpT5zuXAAECBAgQKLeAgHu55697AgQIECBAgACBDQrMVip3R8RdG1xuGQECHRI4lVK82KGzHVtMgZRSbI+IbfV6nCdE3bEh1xth9giB9o5NwMEECBDYuMDpQPv2K69cDbT3j41tfDMrCRAgQIAAAQIECBBoucDpsPuxv3gglicnW36eAzorsD3LPrdnaurWzlbhdAIECBAgQKCMAgLuZZy6ngkQIECAAAECBDYtMDM8/OVUrx/Y9EY2IECgrQJHsyxeEkJuq3mZDtuSUmyLiF43u7d87I0PqyynFKci4uWIOOX3dcvNHUCAAIFmCfTs2BErb397DI4fiIEDB6JvZKRZW9uHAAECBAgQIECAAIE2CyweORKzj/x1nPziF4Xd22zfzuP6I27cXa0+1M4znUWAAAECBAgQEHD3DhAgQIAAAQIECBDYgMBspXI0IgY2sNQSAgQ6JLCSUlQ7dLZjyyfQuNl9a+Nm90bgvV6PLQLYG34JGr93G4H274XZI6LOc8OeFhIgQKDdAgLt7RZ3HgECBAgQIECAAIHOCDTC7s/fd1/U//ZvYnlurjNFOLUlAiml+vZ6/T1C7i3htSkBAgQIECDwOgIC7l4NAgQIECBAgAABAusUmN+5c7RWq31rncs8ToBAhwXc3t7hAZT8+Mbt7o3Ae+NnT70e5wlon/GNOH0z+/Lpm9mF2Uv+O0f7BAh0o4BAezdOTc0ECBAgQIAAAQIEmitwfGIinr//vkiPPx61paXmbm63jgj0pHRya0r79kxNHe5IAQ4lQIAAAQIESicg4F66kWuYAAECBAgQIEBgswIzQ0O3pJQ+v9l9rCdAoH0Cbm9vn7WT1i7Qm1L0RsR5JQy9v5xS1F+5lb1xM/tKRJwS+l/7y+NJAgQI5Egg6+2N+tVXx+D4gRg4cCD6RkZyVJ1SCBAgQIAAAQIECBDotMDMo4/G3H/6j1F78slOl+L8TQo0Qu77pqfP3+Q2lhMgQIAAAQIE1iQg4L4mJg8RIECAAAECBAgQ+L7A7NDQwUjpI0wIEOgeAbe3d8+syl7peSlF4w9rVm96j4isXl/9dUuXhb8b4fXG3VynQ+z1iNV/bwTZV7qsl7K/k/onQIDAawUagfZ429ti+5VXxsD4gegfG4NEgAABAgQIECBAgACBcwosLyzE7COPxLG/eCCWJyfP+bwH8imwNaXn3jw9vTef1amKAAECBAgQKJKAgHuRpqkXAgQIECBAgACBtgjMDA9/OdXrB9pymEMIENi0QCNgO7XpXWxAoPMCp8Pvq4H3V8pp3P6eXgmMN26DP/3Praq2cfP66R/LKUXtlX95+ZVfBdhbJW9fAgQIdFZgy2Vj0ftzPxsXXX+DQHtnR+F0AgQIECBAgAABAoUQWDxyJJ6/776o/+3fxPLcXCF6KlMT50c8/MZq9V1l6lmvBAgQIECAQPsFBNzbb+5EAgQIECBAgACBLheYrVQaF9H6QYBAlwgcy7I45sboLpmWMpspsCWl7wXhN7KvsPpG1KwhQIBAMQR6Rkcj/fTPxMCBA3HxddcVoyldECBAgAABAgQIECCQS4GZRx+N2Uf+OuqPPZbL+hR1ZoH+LPuj3VNTv8uHAAECBAgQINAqAQH3VsnalwABAgQIECBAoJAC80NDl9dS+mohm9MUgQIKNG5vn04p6gLuBZyulggQIECAAIFmCWS9vVG/+uoYHD+wGmrvGxlp1tb2IUCAAAECBAgQIECAwJoElhcWovrgX8XJL34xlicn17TGQ50TSCnVt9fr79ldrT7UuSqcTIAAAQIECBRZQMC9yNPVGwECBAgQIECAQNMFZoaGbkkpfb7pG9uQAIGWCLi9vSWsNiVAgAABAgQKINC4pf28X/7luOj6G6J/bKwAHWmBAAECBAgQIECAAIGiCByfmIjn778v0uOPR21pqShtFa6PLSkt96W0d8/U1OHCNachAgQIECBAoOMCAu4dH4ECCBAgQIAAAQIEuklgdmjoYKT0kW6qWa0EyiwwlWVuby/zC6B3AgQIECBA4HsCr76l/aLrr4+egQE6BAgQIECAAAECBAgQyLVA41b32UceiWN/8YBb3XM6qZ6UTu6bnj4/p+UpiwABAgQIEOhiAQH3Lh6e0gkQIECAAAECBNovMFupPBUR+9t/shMJEFivwMksi/l6fb3LPE+AAAECBAgQKIyAW9oLM0qNECBAgAABAgQIECi9gFvd8/sKbE3puTdPT+/Nb4UqI0CAAAECBLpRQMC9G6emZgIECBAgQIAAgY4JzFYq0rId03cwgfUJVLMsVgTc14fmaQIECBAgQKDrBbIrroiBa98RAwcORN/ISNf3owECBAgQIECAAAECBAi8WsCt7vl8H86PePiN1eq78lmdqggQIECAAIFuFBBw78apqZkAAQIECBAgQKAjAi/u3HlVVqs93pHDHUqAwLoE3N6+Li4PEyBAgAABAl0skPX2Rv3qq+Oi62+Ii6+7ros7UToBAgQIECBAgAABAgTWJ3D6Vvf6Y4+tb6GnWyLQn2V/tHtq6ndbsrlNCRAgQIAAgdIJCLiXbuQaJkCAAAECBAgQ2KjAzNDQLSmlz290vXUECLRPYCbLYsnt7e0DdxIBAgQIECDQVoGeHTsi/eIvxfDNN0f/2Fhbz3YYAQIECBAgQIAAAQIE8ibQuNW9+uBfxcm//MtYnpvLW3mlqSelVN9er79nd7X6UGma1igBAgQIECDQMgEB95bR2pgAAQIECBAgQKBoArNDQwcjpY8UrS/9ECiawMspxWzRmtIPAQIECBBYp0B2xRWx/cor46X/9t9j5ZmJda72eB4FekZHY9u73716U3vfyEgeS1QTAQIECBAgQIAAAQIEOi5w9NCh+Of/8GdRe/LJjtdSxgJ6Ujq5NaV9e6amDpexfz0TIECAAAECzRMQcG+epZ0IECBAgAABAgQKLjAzPPzlVK8fKHib2iPQ9QJub+/6EWqAAAECBDYg0Ag/p5/+mbjo+utjcHx8dYfGX+pP/8avb2A3S/IiINSel0mogwABAgQIECBAgACBbhNYPHIknr/vvlh5+EtRW1rqtvK7ut7zIo6+pVq9sKubUDwBAgQIECDQcQEB946PQAEECBAgQIAAAQLdIjBbqdS7pVZ1EiirwEpKUS1r8/omQIAAgVIJZL29Ub/66hgcP7Aaau8ZGPih/r8x/guxPDlZKpciNCvUXoQp6oEAAQIECBAgQIAAgbwILC8sxOwjj8SxP/10LM/N5aWswtfRF/HUm6rVnyh8oxokQIAAAQIEWiYg4N4yWhsTIECAAAECBAgUSWB+aOjyWkpfLVJPeiFQRIGjWRYv1X0WpYiz1RMBAgQIRDSCz+f98i/HRdffEP1jY2clOXzvPXHygQewdYmAUHuXDEqZBAgQIECAAAECBAh0tUDjO53983/4s6g9+WRX99EtxW/Pss/tmZq6tVvqVScBAgQIECCQLwEB93zNQzUECBAgQIAAAQI5FZgZGrolpfT5nJanLAIEIsLt7V4DAgQIECiiQHbFFTFw7Tti4MCB6BsZWVOLjW/DfuRfXO1bsK9Jq3MPCbV3zt7JBAgQIECAAAECBAiUW6Dx/5sP3/P7kR5/3P93buGrkFKqb6/X37O7Wn2ohcfYmgABAgQIECiogIB7QQerLQIECBAgQIAAgeYKzA4NHYyUPtLcXe1GgEAzBY5lWRxze3szSe1FgAABAh0Q6NmxI1be/vbVW9ovvu66DVXw7Ptujfpjj21orUWtFWjMd9utt67Od60fWGhtRXYnQIAAAQIECBAgQIBAeQWWFxbi+fvvi1P/5b/E8txceSFa2PmWlJb7Utq7Z2rqcAuPsTUBAgQIECBQQAEB9wIOVUsECBAgQIAAAQLNF5gZHv5yqtcPNH9nOxIg0AyBekoxnVLUBdybwWkPAgQIEGizQCP0nH7xl2L45pujf2xsU6c3vt369G/8+qb2sLi5As2cb3MrsxsBAgQIECBAgAABAgQInBaoPvhgHPvTTwu6t+CVOC/i6Fuq1QtbsLUtCRAgQIAAgQILCLgXeLhaI0CAAAECBAgQaJ7AbKVyNCIGmrejnQgQaKbAySyLeeH2ZpLaiwABAgRaLNAzOhrb3v3upt/k/Y3xX4jlyckWV2/7cwlkvb1Rv/rqTd3Ef64z/HcCBAgQIECAAAECBAgQaL5A44PjL/7xH8fKMxPN37zEO/ZFPPWmavUnSkygdQIECBAgQGCdAgLu6wTzOAECBAgQIECAQPkE5nfuHK3Vat8qX+c6JtA9AtUsixUB9+4ZmEoJECBQUoFWhdpPczZum5v/xMdLqpuPtrMrroiBa98RF11/ffQM+HxsPqaiCgIECBAgQIAAAQIECKxf4PjERDx//31Rf+yx9S+24owC27Psc3umpm7FQ4AAAQIECBBYi4CA+1qUPEOAAAECBAgQIFBqgZlK5Z0p4kulRtA8gRwLuL09x8NRGgECBAhEq0Ptp4mXFxbimz/1k1FbWqLeZoGeHTvivF/5lRi++b3RNzLS5tMdR4AAAQIECBAgQIAAAQKtFFg8ciQO3/P7gu5NQE4p1bfX6+/ZXa0+1ITtbEGAAAECBAgUXEDAveAD1h4BAgQIECBAgMDmBWYrlbsj4q7N72QHAgRaITCTZbHk9vZW0NqTAAECBDYo0K5Q+6vLO3zvPXHygQc2WLFl6xXIenujfvXVMXzTzTE4Pr7e5Z4nQIAAAQIECBAgQIAAgS4TaHywvHGj+8tf+IIPl29idltSWu5Lae+eqanDm9jGUgIECBAgQKAEAgLuJRiyFgkQIECAAAECBDYnMFepPFyPuGFzu1hNgEArBE6lFC+2YmN7EiBAgACBdQp0ItR+usTGbXJH/sXV/oJ9nTPbyOONOV/wvtviouuvj56BgY1sYQ0BAgQIECBAgAABAgQIdLGAoPvmh3dexNG3VKsXbn4nOxAgQIAAAQJFFhBwL/J09UaAAAECBAgQINAUgdlKZTIidjVlM5sQINBUgaNZFi+5vb2ppjYjQIAAgbUL9OzYEdtuvTUuuv6G6BsZWfvCJj/57Ptu9a3Sm2z66u1O39Z+yYc+HP1jYy08ydYECBAgQIAAAQIECBAg0E0C1QcfjGN/+ulYnpvrprJzUeu2lJ7YOz19VS6KUQQBAgQIECCQSwEB91yORVEECBAgQIAAAQJ5EZgfHBys9fbO56UedRAg8H2BlZSiCoQAAQIECLRZoBFqT7/4SzF88825CDs3bm+fvPLn26xQjuPc1l6OOeuSAAECBAgQIECAAAECmxUQdN+YYH+W/dHuqanf3dhqqwgQIECAAIGiCwi4F33C+iNAgAABAgQIENiUwIs7d16V1WqPb2oTiwkQaInAsSyLY25vb4mtTQkQIEDgBwVO3+DduKn94uuuyxXP/7nxV6P25JO5qqnbi0nXXBNua+/2KaqfAAECBAgQIECAAAEC7RcQdF+feUqpvi3iHW+cnv7/1rfS0wQIECBAgEAZBATcyzBlPRIgQIAAAQIECGxYYHZ4+Pao1z+z4Q0sJECgJQL1lGI6pagLuLfE16YECBAg8F2B7IorYuDad8RF118fPQMDuWM5euhQTP/Gr+eurm4sqHEz/3m/8iurwfY8zrobTdVMgAABAgQIECBAgACBsgoIuq998j0pndya0r49U1OH177KkwQIECBAgEAZBATcyzBlPRIgQIAAAQIECGxYYLZS+UJEvHfDG1hIgEBLBE5mWcwLt7fE1qYECBAou0Aj6Lzt1lujcVt738hIrjn+8dprY+WZiVzXmPfitlw2Fhf+23+bu5v58+6mPgIECBAgQIAAAQIECBA4t4Cg+7mNGk9sTem5N09P713b054iQIAAAQIEyiIg4F6WSeuTAAECBAgQIEBgQwIzw8NfTvX6gQ0ttogAgZYJVLMsVgTcW+ZrYwIECJRNIOvtjfrVV6/e3t0/NtYV7bu9feNjOj3vXXf+Xu4/xLDxLq0kQIAAAQIECBAgQIAAgbwICLqfexLbs+xze6ambj33k54gQIAAAQIEyiIg4F6WSeuTAAECBAgQIEBgQwKzlUp9QwstIkCgZQIvpxSzLdvdxgQIECBQJoHG7d0/cuONcdH110fPwEBXte729vWPq3E7/wUfu6Mr573+bq0gQIAAAQIECBAgQIAAgbwJCLqffSL9ETfurlYfytvc1EOAAAECBAh0RkDAvTPuTiVAgAABAgQIEOgCgfmhoctrKX21C0pVIoFSCcxlWSy6vb1UM9csAQIEminQuL17yzvfFZd8+MNde3u329vX90aka66J4ZtujsHx8fUt9DQBAgQIECBAgAABAgQIEGiBgKD7mVG3pLTcl9LePVNTh1vAbksCBAgQIECgywQE3LtsYMolQIAAAQIECBBon8BMpfLOFPGl9p3oJAIEziWwklJUz/WQ/06AAAECBM4gcPq29uGbbup6H7e3n3uEjQ8ybL3llhi++b1d+0GGc3fpCQIECBAgQIAAAQIECBDoZoFG0H3h390dtaWlbm6jqbX3pjR96fT0G5q6qc0IECBAgACBrhQQcO/KsSmaAAECBAgQIECgHQKzlcrdEXFXO85yBgECaxP4TpbFcbe3rw3LUwQIECAQRbit/bVjdHv72V/sntHRuOB9t0URPsjgtzABAgQIECBAgAABAgQIFF9geWEhnr//vnj5C18QdH9l3OdHPPzGavVdxZ++DgkQIECAAIGzCQi4ez8IECBAgAABAgQIvI7AzPDwl1O9fgAQAQL5EKinFNMpRV3APR8DUQUBAgRyLFCk29pfy+z29jO/eOmaa+KSD304+sfGcvxmKo0AAQIECBAgQIAAAQIECJxZQND9B136s+yju6emDnpfCBAgQIAAgfIKCLiXd/Y6J0CAAAECBAgQOIfAbKUyGRG7QBEgkA+Bk1kW88Lt+RiGKggQIJBDgcZt7fWrr45dd/5e9I2M5LDCzZd0fGIivv2Oaze/UUF26NmxI877lV9ZDbb3DAwUpCttECBAgAABAgQIECBAgECZBRaPHInD9/x+1B97rMwMkVKqn5/S7j1TU4dLDaF5AgQIECBQYgEB9xIPX+sECBAgQIAAAQKvLzA/ODhY6+2dZ0SAQH4EqlkWKwLu+RmISggQIJATgUbI+YKP3REXXX994UPOz77v1tL/BXfjtSvyDf05+W2lDAIECBAgQIAAAQIECBDosEAj6H7kt38rak8+2eFKOnf8eRFH31KtXti5CpxMgAABAgQIdFJAwL2T+s4mQIAAAQIECBDIrcCLO3deldVqj+e2QIURKJnAyynFbMl61i4BAgQInF0gu+KKqPzmB2JwfLwUVI2/2J688udL0evrNZmuuWb1tvb+sbFSO2ieAAECBAgQIECAAAECBMojcPTQoXjxj/84Vp6ZKE/Tr+p0W0pP7J2evqqUzWuaAAECBAiUXEDAveQvgPYJECBAgAABAgTOLDBbqdwdEXfxIUAgHwJHsyxecnt7PoahCgIECHRQIOvtjS3vfFdc8uEPR9/ISAcraf/RZb29vTHzrbfcEsM3v7d0M2//W+ZEAgQIECBAgAABAgQIEMirwMyjj8bROz8Zy3NzeS2xZXX1Z9lHd09NHWzZATYmQIAAAQIEcikg4J7LsSiKAAECBAgQIECg0wKzlcoXIuK9na7D+QQIRKykFFUQBAgQIFBqgZ4dO+KCj90RF11/ffQMDJTOYnlhIb75Uz8ZtaWl0vR+eubDN91Ump41SoAAAQIECBAgQIAAAQIEziXw/GfvjxMHD5bqzwi2pLTcl9LePVNTh8/l478TIECAAAECxREQcC/OLHVCgAABAgQIECDQRIHZSuWpiNjfxC1tRYDABgWOZVkcc3v7BvUsI0CAQHcLbLlsLIZ+53dicHy8uxvZZPWH770nTj7wwCZ36Y7lZt4dc1IlAQIECBAgQIAAAQIECHROoPFB+Ofvv680f1bQkO5NafrS6ek3dE7dyQQIECBAgEC7BQTc2y3uPAIECBAgQIAAga4QmK1U6l1RqCIJlECgmmWxIuBegklrkQABAt8XSNdcE7vu/L3oGxnBEhHfuHx/4b8FuZl71QkQIECAAAECBAgQIECAwPoEFo8ciSO//VtRe/LJ9S3s0qfPj3j4jdXqu7q0fGUTIECAAAEC6xQQcF8nmMcJECBAgAABAgSKLzA/NHR5LaWvFr9THRLIv8DJLIt54fb8D0qFBAgQaIJA1tsbW2+5JYZvfq9g+6s8qw8+GPOf+HgThPO3hZnnbyYqIkCAAAECBAgQIECAAIHuEzh66FC8+Md/HCvPTHRf8eusuD/ixt3V6kPrXOZxAgQIECBAoAsFBNy7cGhKJkCAAAECBAgQaK3AzNDQLSmlz7f2FLsTILAWgZksiyUB97VQeYYAAQJdK9CzY0dc8LE74qLrr4+egYGu7aNVhf/jtdcW7i+oGzPfduutMXzTzWbeqhfHvgQIECBAgAABAgQIECBQOoHGh+QX/t3dUVtaKmzvW1Ja7ktp756pqcOFbVJjBAgQIECAwKqAgLsXgQABAgQIECBAgMBrBGYrlbsj4i4wBAh0VmAlpah2tgSnEyBAgEALBXpGR+OC990Wwzfd1MJTunvr4xMT8e13XNvdTbyqejMvzCg1QoAAAQIECBAgQIAAAQI5FVheWIjn778vTj7wQE4r3HxZW1N67s3T03s3v5MdCBAgQIAAgTwLCLjneTpqI0CAAAECBAgQ6IjAzPDwl1O9fqAjhzuUAIHvCXwny+K429u9EQQIECicwJbLxmLod34nBsfHC9dbsxt69n23Rv2xx5q9bdv3M/O2kzuQAAECBAgQIECAAAECBEousHjkSPzT+99fuO8Kd3qs27Psc3umpm4t+Zi1T4AAAQIECi0g4F7o8WqOAAECBAgQIEBgIwKzlcrRiBjYyFprCBBojkA9pZhOKeoC7s0BtQsBAgRyIJBdcUVUfvMDgu1rnEXjxrVv/tRPdvW3FTfzNQ7bYwQIECBAgAABAgQIECBAoEUCRw8dipkPfyiW5+ZadEJntk0p1S/IsvFdL7zwlc5U4FQCBAgQIECg1QIC7q0Wtj8BAgQIECBAgEBXCcwPDg7Wenvnu6poxRIooMDJLIt54fYCTlZLBAiUUSBdc03suvP3om9kpIztb7jn5z97fxz71Kc2vL6TC828k/rOJkCAAAECBAgQIECAAAECPyxw+N574uUvfKGrP0j/2q56Ujq5b3r6fPMmQIAAAQIEiikg4F7MueqKAAECBAgQIEBggwIv7tx5VVarPb7B5ZYRINAkgRezLE4JuDdJ0zYECBDojICQ8+bcv3H5/q67Xc3MNzdzqwkQIECAAAECBAgQIECAQCsFFo8ciSO//VtRe/LJVh7T1r23pfTE3unpq9p6qMMIECBAgACBtggIuLeF2SEECBAgQIAAAQLdIjBbqdwdEXd1S73qJFBEgVMpxYtFbExPBAgQKImAkPPmB9349uHTv/Hrm9+oDTtkvb2x5Z3viks+/GG39LfB2xEECBAgQIAAAQIECBAgQGCzAo0/d5j58Ie67oP1r9d3f5Z9dPfU1MHNulhPgAABAgQI5EtAwD1f81ANAQIECBAgQIBAhwVmK5UvRMR7O1yG4wmUWuBolsVLbm8v9TugeQIEulNAsL15c3v2fbdG/bHHmrdhC3ZqBNu33nJLXPKhD0fPwEALTrAlAQIECBAgQIAAAQIECBAg0EqBw/feEy9/4QtRW1pq5TEt33tLSst9Ke3dMzV1uOWHOYAAAQIECBBom4CAe9uoHUSAAAECBAgQINANArOVylMRsb8balUjgSIK1FOK6ZSiLuBexPHqiQCBggpsu+22GL75vW7vbtJ8lxcW4ps/9ZO5/ctlwfYmDdo2BAgQIECAAAECBAgQIEAgBwKLR47EP73//bHyzEQOqtl4Cb0pTV86Pf2Gje9gJQECBAgQIJA3AQH3vE1EPQQIECBAgAABAh0VmK1U6h0twOEESi5wMstiXri95G+B9gkQ6BaBxo3tb/z0n7q9u8kDqz74YMx/4uNN3nXz2wm2b97QDgQIECBAgAABAgQIECBAIK8CM48+GnMfvT23H7hfi1t/lv3R7qmp313Ls54hQIAAAQIE8i8g4J7/GamQAAECBAgQIECgTQLzQ0OX11L6apuOcwwBAmcQeDHL4pSAu3eDAAECuRZoBNt33fl7bmxv0ZT+8dprc3VrmmB7iwZtWwIECBAgQIAAAQIECBAgkDOBxneVO3zPPXHqiw/lrLK1lZNSql+QZeO7XnjhK2tb4SkCBAgQIEAgzwIC7nmejtoIECBAgAABAgTaKjAzNHRLSunzbT3UYQQIfE/gVErxIg8CBAgQyK2AYHvrR9P4tuCTV/586w9a4wlmvkYojxEgQIAAAQIECBAgQIAAgQIJHD10KGY++YlYnpzsuq7Oizj6lmr1wq4rXMEECBAgQIDADwkIuHspCBAgQIAAAQIECLwiMFup3B0RdwEhQKAzAkezLF5y0sYLLQAAIABJREFUe3tn8J1KgACBswgIObfv9Xj+s/fHsU99qn0Hvs5JZt7xESiAAAECBAgQIECAAAECBAh0XODwvffEyQce6Hgd6y3g/IiH31itvmu96zxPgAABAgQI5EtAwD1f81ANAQIECBAgQIBABwVmhoe/nOr1Ax0swdEESitQTymmU4q6gHtp3wGNEyCQP4Hsiiti5FN/En0jI/krrqAVfePy/bE8N9ex7sy8Y/QOJkCAAAECBAgQIECAAAECuRRofLe5f3r/+2PlmYlc1vd6RfVH3Li7Wn2oq4pWLAECBAgQIPADAgLuXggCBAgQIECAAAECrwjMVipHI2IACAEC7Rc4mWUxL9zefngnEiBA4AwCWy4bi6Hf+Z0YHB/n00aB4xMT8e13XNvGE79/lJl3hN2hBAgQIECAAAECBAgQIECgawQa33XuxMGDUVta6oqae1I6uW96+vyuKFaRBAgQIECAwBkFBNy9GAQIECBAgAABAgQiYn5wcLDW2zsPgwCBzgi8mGVxSsC9M/hOJUCAwCsCQs6dfRWeu+OOOPXF9l4s1rNjR1x83/0+zNDZ0TudAAECBAgQIECAAAECBAh0hUDjNvcjv/1bUXvyya6od1tKT+ydnr6qK4pVJAECBAgQIPBDAgLuXgoCBAgQIECAAAECEfHizp1XZbXa4zAIEGi/wKmU4sX2H+tEAgQIEHhFoBFyvuBjd8TwTTcx6aDANy7fH8tzc22pIOvtjYG77jbztmg7hAABAgQIECBAgAABAgQIFEtg5tFHY+6jt3fFbe79ETfurlbbe6NAscatGwIECBAg0DEBAfeO0TuYAAECBAgQIEAgTwKzlcrdEXFXnmpSC4GyCHwny+K429vLMm59EiCQIwEh5/wM4/jERHz7Hde2paBtt90Wl3zow9EzMNCW8xxCgAABAgQIECBAgAABAgQIFE9geWEhvvlvbsv9be49KZ3cmtK+PVNTh4s3BR0RIECAAIFiCwi4F3u+uiNAgAABAgQIEFijwFyl8nA94oY1Pu4xAgSaKDCVZVEXcG+iqK0IECBwdoFGsH3rLbcIOefoRXnujjvi1Bdbe5lYdsUVMfKpP4m+kZEcda4UAgQIECBAgAABAgQIECBAoJsFuuE2976Ip95Urf5ENzurnQABAgQIlFFAwL2MU9czAQIECBAgQIDADwnMVipPRcR+NAQItFfgZJbFvHB7e9GdRoBAqQXSNdfErjt/T8g5Z2/BNy7fH8tzcy2pqmd0NC6+9w9icHy8JfvblAABAgQIECBAgAABAgQIECi3QDfc5t6fZR/dPTV1sNyT0j0BAgQIEOguAQH37pqXagkQIECAAAECBFokMFup1Fu0tW0JEDiLwEyWxZKAu3eEAAECLRfYctlYvOEP/zD6x8ZafpYD1idwfGIivv2Oa9e3aA1PN27q33777XHJBz+0hqc9QoAAAQIECBAgQIAAAQIECBDYnECeb3PfktJyX0p790xNHd5cl1YTIECAAAEC7RIQcG+XtHMIECBAgAABAgRyK/Dizp1XZbXa47ktUGEECiqwklJUC9qbtggQIJAXgZ4dO+Li++53e3deBnKGOg7fe0+cfOCBplbYuKn/jZ/+0+gZGGjqvjYjQIAAAQIECBAgQIAAAQIECJxNYPHIkfin978/Vp6ZyB1UX8RTb6pWfyJ3hSmIAAECBAgQOKOAgLsXgwABAgQIECBAoPQCM0NDt6SUPl96CAAE2ixwLMvimNvb26zuOAIEyiLg9u7umfQ3xn8hlicnm1KwDzQ0hdEmBAgQIECAAAECBAgQIECAwCYFnv/s/XHi4MGoLS1tcqfmLu/Pso/unpo62Nxd7UaAAAECBAi0QkDAvRWq9iRAgAABAgQIEOgqgdmhoYOR0ke6qmjFEiiAQDXLYkXAvQCT1AIBAnkTOO/dvxq77rzT7d15G8wZ6mncajZ55c83pdJtt90Wuz55Z1P2sgkBAgQIECBAgAABAgQIECBAYLMCjT/3+PZv/HrTPti/2Xoa67ektNyX0t49U1OHm7GfPQgQIECAAIHWCQi4t87WzgQIECBAgAABAl0iMDM8/OVUrx/oknKVSaAQAotZFnPC7YWYpSYIEMiPwJbLxuLH//zPo29kJD9FqeSsAtUHH4z5T3x8U0qNub/hD/8w+sfGNrWPxQQIECBAgAABAgQIECBAgACBVggcvveeOPnAA63YekN79kU89aZq9Sc2tNgiAgQIECBAoG0CAu5to3YQAQIECBAgQIBAXgVmK5WjETGQ1/rURaCIAkezLF4ScC/iaPVEgEAHBHp27IiL77s/BsfHO3C6Izcj8H9u/NWoPfnkhrbIentj++23xyUf/NCG1ltEgAABAgQIECBAgAABAgQIEGiXwPGJiZi++aZYnptr15FnPac/4sbd1epDuShGEQQIECBAgMAZBQTcvRgECBAgQIAAAQKlFpjfuXO0Vqt9q9QImifQZoF6SjHV5jMdR4AAgSIKNALOW2+5JXZ98s4itleKnv5h5Mc31GfP6Gj82H/8T27r35CeRQQIECBAgAABAgQIECBAgEAnBJYXFuLwPffEqS92Plfek9LJfdPT53fCwZkECBAgQIDA2gQE3Nfm5CkCBAgQIECAAIGCCry4c+dVWa32eEHb0xaBXAqczLKYd3t7LmejKAIEukcgXXNNvPHTfxo9A74JTfdM7QcrnXn00Zj5wG+uu/xtt93mQw3rVrOAAAECBAgQIECAAAECBAgQyItA489E5j56e9SWljpa0raUntg7PX1VR4twOAECBAgQIPC6AgLuXg4CBAgQIECAAIFSC8xWKndHxF2lRtA8gTYLvJhlcUrAvc3qjiNAoCgCjZu7L773D2JwfLwoLZW2j+fuuGNdN5b17NgRO//qwegfGyutmcYJECBAgAABAgQIECBAgACBYgg0bnP/1q/9Wqw8M9HRhvojbtxdrXb+SvmOKjicAAECBAjkU0DAPZ9zURUBAgQIECBAgECbBOYqlYfrETe06TjHECi9wEpKUS29AgACBAisXyDr7Y3tt98el3zwQ+tfbEUuBb4x/guxPDm5ptrc2L8mJg8RIECAAAECBAgQIECAAAECXSZw+N574uQDD3Ss6vMijr6lWr2wYwU4mAABAgQIEHhdAQF3LwcBAgQIECBAgECpBWYrlaciYn+pETRPoI0C38myOO729jaKO4oAgSIICDcXYYo/2MPikSMxeeXPr6mxC//g38fwTTet6VkPESBAgAABAgQIECBAgAABAgS6TeD4xERM33xTLM/NdaT08yMefmO1+q6OHO5QAgQIECBA4HUFBNy9HAQIECBAgAABAqUWmK1U6qUG0DyBNgtUsyxWBNzbrO44AgS6VaBndDQuvvcPYnB8vFtbUPfrCFQffDDmP/Hxs/r07NgRO//qwegfG+NIgAABAgQIECBAgAABAgQIECi0wPLCQnzz39wWtSefbHufKaX6BVk2vuuFF77S9sMdSIAAAQIECLyugIC7l4MAAQIECBAgQKC0Ai/u3HlVVqs9XloAjRNos8BilsWccHub1R1HgEA3CmS9vbH1llti1yfv7Mby1bwGgWffd2vUH3vsdZ9sfLhh9NH/Gj0DA2vYzSMECBAgQIAAAQIECBAgQIAAgWIIPP/Z++PEwYNRW1pqa0O9KU1fOj39hrYe6jACBAgQIEDgrAIC7l4QAgQIECBAgACB0grMDA3dklL6fGkBNE6gzQJHsyxeEnBvs7rjCBDoNoHsiiti5FN/En0jI91WunrXIfCNy/e/7rfdTtdcE5f+xV+uYzePEiBAgAABAgQIECBAgAABAgSKI3B8YiKmP/iBWJ6cbGtT/Vn2R7unpn63rYc6jAABAgQIEHhdAQF3LwcBAgQIECBAgEBpBWaHhg5GSh8pLYDGCbRRoJ5STLXxPEcRIECg2wR6duyIwXvujYuvu67bSlfvOgUWjxyJySt//oyrtt12m5v71+npcQIECBAgQIAAAQIECBAgQKB4AssLC/HcHR8763fAa3bXW1Ja7ktp756pqcPN3tt+BAgQIECAwPoFBNzXb2YFAQIECBAgQIBAQQRmhoe/nOr1AwVpRxsEci1wMsti3u3tuZ6R4ggQ6JzAee/+1dh1553RMzDQuSKc3DaB6oMPxvwnPv5D5134B/8+hm+6qW11OIgAAQIECBAgQIAAAQIECBAgkHeB1/tzlFbV3Rfx1Juq1Z9o1f72JUCAAAECBNYuIOC+ditPEiBAgAABAgQIFExgtlI5GhGSZAWbq3byKfBilsUpAfd8DkdVBAh0TKBndDQuvvcPYnB8vGM1OLj9As++79Yfun1MuL39c3AiAQIECBAgQIAAAQIECBAg0B0CxycmYvrmm2J5bq4tBfdH3Li7Wn2oLYc5hAABAgQIEHhdAQF3LwcBAgQIECBAgEApBeZ37hyt1WrfKmXzmibQZoGVlKLa5jMdR4AAgbwLbLvtttj1yTvzXqb6WiDwjfFfiOXJye/tLNzeAmRbEiBAgAABAgQIECBAgAABAoUSWF5YiG/+m9ui9uSTLe+rJ6WT+6anz2/5QQ4gQIAAAQIEziog4O4FIUCAAAECBAgQKKXATKXyzhTxpVI2r2kCbRY4lmVxzO3tbVZ3HAECeRXYctlY/Pif/3n0jYzktUR1tVCg8Zex37jsrd87Qbi9hdi2JkCAAAECBAgQIECAAAECBAon8Pxn749jn/pUy/s6P+LhN1ar72r5QQ4gQIAAAQIEXldAwN3LQYAAAQIECBAgUEqB2Url7oi4q5TNa5pAmwWqWRYrAu5tVnccAQJ5E8h6e2P77bfHJR/8UN5KU08bBWYefTRmPvCbqyee9+5fjTd++tNtPN1RBAgQIECAAAECBAgQIECAAIHuFzh66FD887/+V1FbWmpZMyml+vkp7d4zNXW4ZYfYmAABAgQIEDirgIC7F4QAAQIECBAgQKCUAnOVysP1iBtK2bymCbRR4FRK8WIbz3MUAQIE8ijg1vY8TqUzNR2+9544+cADkV1xRbz5/3moM0U4lQABAgQIECBAgAABAgQIECDQ5QKLR47Et3/j12N5crJlnWxN6bk3T0/vbdkBNiZAgAABAgTOKiDg7gUhQIAAAQIECBAopcBspdL4E69dpWxe0wTaKHA0y+Ilt7e3UdxRBAjkSaBxa/vAXXfH8E035akstXRQ4B+vvTbS89+O0ScORc/AQAcrcTQBAgQIECBAgAABAgQIECBAoPsFnn3frVF/7LGWNdKfZR/dPTV1sGUH2JgAAQIECBB4XQEBdy8HAQIECBAgQIBAKQVmK5V6KRvXNIE2C0xlWdQF3Nus7jgCBPIg0Lihe8//9YAQcx6GkaMa/s/eN0bl//58DI6P56gqpRAgQIAAAQIECBAgQIAAAQIEuleg+uCDMf+Jj7ekgZ6UTu6bnj6/JZvblAABAgQIEDirgIC7F4QAAQIECBAgQKB0Ai/u3HlVVqs9XrrGNUygzQKLWRZzwu1tVnccgfwI9IyORvrpn4mBAwdWQ97//K//VdSWlvJTYIsqadzavuMzB+Pi665r0Qm27VaBxrfOPnzP78elf/GX3dqCugkQIECAAAECBAgQIECAAAECuRQ4PjERL/zLd7Xkzx/Pj3j4jdXqu3LZuKIIECBAgECBBQTcCzxcrREgQIAAAQIECJxZYHZ4+Pao1z/DhwCB1grMZVksCri3FtnuBHIk8OpAe+N26kaovfGjcYPSwr+7uyV/uZSj9ldLcWt73iaSr3qOHjoU/fv3u9U/X2NRDQECBAgQIECAAAECBAgQIFAQgeWFhZi87h2xPDnZ1I5SSvXzU9q9Z2rqcFM3thkBAgQIECBwVgEBdy8IAQIECBAgQIBA6QRmh4YORkofKV3jGibQRoF6SjHVxvMcRYBA+wV6duyIlbe/PQbHD6ze0t43MvJDRbTy2wO3v+PXP7Fxa/vAXXfH8E035aksteRMoPGXrKc/+JGz0pRDgAABAgQIECBAgAABAgQIECiMwLPvuzXqjz3W1H62pvTcm6en9zZ1U5sRIECAAAECZxUQcPeCECBAgAABAgQIlE5gZnj4y6leP1C6xjVMoI0CJ7Ms5t3e3kZxRxFoj0DjhvLtV14ZA+MHon9s7KyHliXcvuWysfjxP//zMwb82zMVpxAgQIAAAQIECBAgQIAAAQIECBAg8GqBVvzZZH+WfXT31NRB0gQIECBAgEB7BATc2+PsFAIECBAgQIAAgRwJzFYq9RyVoxQChRSYy7JYFHAv5Gw1VS6Bxi3t6Rd/afWG9ouvu27Nzc88+mjMfOA31/x8Nz7YuLV9++23xyUf/FA3lq9mAgQIECBAgAABAgQIECBAgAABAoUWOD4xES/8y3dFbWmpKX2eF3H0LdXqhU3ZzCYECBAgQIDAOQUE3M9J5AECBAgQIECAAIEiCczv3Dlaq9W+VaSe9EIgbwIrKUU1b0WphwCBNQucvqX9outv2NCt5M3+i6M1F97GB3tGR+PH/uN/2pBPG8t0FAECBAgQIECAAAECBAgQIECAAIFSCyweORLf/o1fj+XJyaY4bM+yz+2Zmrq1KZvZhAABAgQIEDirgIC7F4QAAQIECBAgQKBUAjOVyjtTxJdK1bRmCbRZ4ESWxYLb29us7jgCGxdo3ERev/rqaATaB8fHo2dgYMOblSHcvu2222LXJ+/csJGFBAgQIECAAAECBAgQIECAAAECBAi0T2B5YSGeu+NjUX/ssU0fuiWl5b6U9u6Zmjq86c1sQIAAAQIECJxVQMDdC0KAAAECBAgQIFAqgdlK5e6IuKtUTWuWQJsFXsyyOCXg3mZ1xxFYn0DPjh2RfvGXYvjmm6N/bGx9i1/n6cZfFE1e946m3YbUlKKauEnj1vadn/2zpnk1sTRbESBAgAABAgQIECBAgAABAgQIECBwDoHnP3t/HPvUpzbttC2lJ/ZOT1+16Y1sQIAAAQIECJxVQMDdC0KAAAECBAgQIFAqgblK5eF6xA2lalqzBNoosJJSVNt4nqMIEFi7QCOgve3d7169qb1vZGTtC9f45D9ee22sPDOxxqe767Hz3v2rsevOOzd1u313daxaAgQIECBAgAABAgQIECBAgAABAsUTmHn00Zj76O1RW1racHMppfoFWTa+64UXvrLhTSwkQIAAAQIEzikg4H5OIg8QIECAAAECBAgUSWC2UpmMiF1F6kkvBPIkcCzL4pjb2/M0ErWUXCC74orYfuWVLQu1n+Z97o474tQXHyqcdtbbGzs+czAuvu66wvWmIQIECBAgQIAAAQIECBAgQIAAAQJlFDg+MRHTN98Uy3NzG25/a0rPvXl6eu+GN7CQAAECBAgQOKeAgPs5iTxAgAABAgQIECBQJIHZSqVepH70QiBvAtUsixUB97yNRT0lE2iE2geufUdcdP31bblxvHHr0cwHfrNwylsuG4vd//k/t8WwcHgaIkCAAAECBAgQIECAAAECBAgQIJBjgeWFhfjWr/3apr4jZX+WfXT31NTBHLepNAIECBAg0NUCAu5dPT7FEyBAgAABAgQIrEfgxZ07r8pqtcfXs8azBAisXeBUSvHi2h/3JAECTRRod6j9dOmNvwj65k/95Ka+pW8TGZq21QW//dtxyQc/1LT9bESAAAECBAgQIECAAAECBAgQIECAQP4Enn3frVF/7LENFXZexNG3VKsXbmixRQQIECBAgMA5BQTcz0nkAQIECBAgQIAAgaIIzA4P3x71+meK0o8+CORN4DtZFsfd3p63sainwAKNG8Z/5MYb23ZT+5ko//Haazd1y1HextMzOho7P/tn0T82lrfS1EOAAAECBAgQIECAAAECBAgQIECAQAsEqg8+GPOf+PiGdu7Psj/aPTX1uxtabBEBAgQIECBwVgEBdy8IAQIECBAgQIBAaQRmh4YORkofKU3DGiXQZoFqlsWKgHub1R1XNoFGAHvbu98dF11/Q/T9/+zdfZBl9Xkn9ueevn2nX6d7Bvp2uxlmmhctK2MG7W4qu4ttQHFVZlM2sdjyCmXFWOwGk62KkPDali1ZLDh6NYvCZIVKMZIlxdjyqpIIOZL/UP4BEVbZP5KSVrtJVsIDM8C8MdM93XRPz51+uTd1Gg0eYGD65b6cc+7nVlEM4nd+v+f5/I6omp5vP717d0fbP/Lo52P+oYc6WkMzDy/t2xfXPPy5KI+MNHNbexEgQIAAAQIECBAgQIAAAQIECBAgkHGBhR/9KI7+w9s3/JMqe0qllZ89frw34+0pjwABAgQI5FJAwD2X16ZoAgQIECBAgACBzQicGh9/qtRo3LKZZz1DgMDbCyyXSnESEgECLREo79wZvb/2azH+6x/oeKj9fIO1F16IF/6zd2/4D3xaArTFTZNKJXY+ciAuv+22Le7kcQIECBAgQIAAAQIECBAgQIAAAQIE8iqQfs3zpTvfHyuHDm2ohYGIb11z4sTtG3rIYgIECBAgQOCSAgLulySygAABAgQIECBAoCgC09Vqoyi96INA1gReSZJYML09a9einhwLpKHrxrvfHVfc+6EY2rs3c5385H13RP37389cXRstKJ2Iv+tP/ywz3ziw0fqtJ0CAAAECBAgQIECAAAECBAgQIECgeQIrc3Px3H9zz4a+9lkqlRoDpdJVVx87drh5ldiJAAECBAgQEHD3DhAgQIAAAQIECHSFwOmJial6vf58VzSrSQIdEDiWJNEQcO+AvCOLJpDcdFPsfP+dmZ4mPvv003H8zvfnnr73vXfENQ8/nPs+NECAAAECBAgQIECAAAECBAgQIECAQHMFDn/yE3H2scfWvWl/qfS9a48fv3XdD1hIgAABAgQIXFJAwP2SRBYQIECAAAECBAgUQeBUtfqeUsQTRehFDwSyJlBLkpgRbs/atagnRwLpFPH+9743xvf/epRHRjJf+V+968ZYmZnJfJ1vVWA6HX/nIwcy/U0EucVVOAECBAgQIECAAAECBAgQIECAAIGCCJx4/PGY+4MHo760dMmOTHG/JJEFBAgQIEBgwwIC7hsm8wABAgQIECBAgEAeBaar1Qcj4oE81q5mAlkXmE2SWBRwz/o1qS9jAmnIuuc9t8f4r/96DO3dm7Hq3rqcI49+PuYfeig39b6x0PSbCXb96Z9F3+7due1B4QQIECBAgAABAgQIECBAgAABAgQItEdg4Uc/iqP/8PZ1hdy3lUoH/8bx49e2pzKnECBAgACB4gsIuBf/jnVIgAABAgQIECAQEafGx58qNRq3wCBAoPkCx5IkGgLuzYe1YyEFem7YG9vf974Y378/d/2tzM3Fc3/nb6/rD3Oy2Fzve++Iax5+OIulqYkAAQIECBAgQIAAAQIECBAgQIAAgYwKpF8XPXTbr8TKoUOXrHB7T88v7jl69JlLLrSAAAECBAgQuKSAgPsliSwgQIAAAQIECBAogsB0tZp+1WlPEXrRA4EsCdSSJGaE27N0JWrJoEB5587o/bVfi/Ff/0CuJ4cf/uQn4uxjj2VQ+O1LSqfl73zkQFx+2225q13BBAgQIECAAAECBAgQIECAAAECBAhkQ+DHv3F3NL773bctxhT3bNyVKggQIECgGAIC7sW4R10QIECAAAECBAi8jcDp0dHReqVyGhIBAs0XmE2SWBRwbz6sHQshkNx0U+x8/52FCFbndXp7eWoqdv3pn+X6GwsK8X8GTRAgQIAAAQIECBAgQIAAAQIECBAogMCJxx+P07//sbftxBT3Aly0FggQIEAgEwIC7pm4BkUQIECAAAECBAi0UuDkxMStSb3+ZCvPsDeBbhU4liTREHDv1uvX90UE0mnhPe+5Pa740IcKFarO4/T20r59cd2Xvuw9JUCAAAECBAgQIECAAAECBAgQIECAQNMEZp9+Ol7+p/8k6ktLF92zUiodv+748Z9p2oE2IkCAAAECXSog4N6lF69tAgQIECBAgEA3CUyPj98XjcYj3dSzXgm0Q6CWJDEj3N4OamfkQKDnhr2x/X3vi/H9+3NQ7cZL/Mm117zlH9hsfLfWPpF+k8HIAw8W9i5aq2d3AgQIECBAgAABAgQIECBAgAABAgQuJVB74YV46c73x8qhQxddOpQkv3nVsWMHLrWPf0+AAAECBAi8tYCAu7eDAAECBAgQIECg8ALT1erXIuIDhW9UgwTaLDCbJLEo4N5mdcdlSSANUjfe/e644t4PxdDevVkqram1rOfH7jb1wC1sVt65Myb+5PFC38cWeDxKgAABAgQIECBAgAABAgQIECBAgECTBFbm5uLgb/9WNL773Tft2Bsx+zdPnNjRpKNsQ4AAAQIEulJAwL0rr13TBAgQIECAAIHuEjg1Pv5UqdG4pbu61i2B1gscS5JoCLi3HtoJmRNIQ9T9d98d4/t/PcojI5mrr9kF/dXNv/iWk4iafdZW9ktuuimu/qPHuuJOtuLkWQIECBAgQIAAAQIECBAgQIAAAQIEmidw5NHPx/xDD71pQ1Pcm2dsJwIECBDoTgEB9+68d10TIECAAAECBLpKYLpabXRVw5ol0AaBWpLEjHB7G6QdkSWBnhv2xo5/9s/i8ttuy1JZLa1l9umn4/id72/pGc3YvP+ee2LPx+9vxlb2IECAAAECBAgQIECAAAECBAgQIECAwIYE0q+jvvxP/0nUl5Zee84U9w0RWkyAAAECBN4kIODupSBAgAABAgQIECi0wOmxsXfVS6UfFLpJzRHogMBsksSigHsH5B3ZCYHSvn2x5/5/EX27d3fi+I6e+ePfuPuiP2K3o0VdcHhSqcTORw501TcdZMVeHQQIECBAgAABAgQIECBAgAABAgQI/LVA7YUX4qU73/+6n4Zpirs3hAABAgQIbF5AwH3zdp4kQIAAAQIECBDIgcCpavU9pYgnclCqEgnkSuBYkkRDwD1Xd6bYjQmUd+6M3l/7tbgXkJ3uAAAgAElEQVTi3g9FeWRkYw8XZPXK3Fw893f+9uumDmWptfLUVEw8+oUY2rs3S2WphQABAgQIECBAgAABAgQIECBAgACBLhVIv6Z68Ld/67WhIaa4d+mLoG0CBAgQaIqAgHtTGG1CgAABAgQIECCQVYHpavXBiHggq/Wpi0AeBWpJEjPC7Xm8OjWvQyANtg//1m/H+P7961hd7CUnHn88Tv/+xzLZZHLTTXH1Hz3Wtd98kMlLURQBAgQIECBAgAABAgQIECBAgAABAmsCRx79fMw/9NDar01x91IQIECAAIHNCQi4b87NUwQIECBAgAABAjkRODU+/lSp0bglJ+Uqk0AuBGaTJBYF3HNxV4pcv0DPDXtj7Hd/N0Zvvnn9DxV85U/ed0fUv//9zHXZf889sefj92euLgURIECAAAECBAgQIECAAAECBAgQIEDgvMDCj34UR//h7dGztDT7N0+c2EGGAAECBAgQ2JiAgPvGvKwmQIAAAQIECBDImcB0tXooIvbkrGzlEsi0wLEkiYaAe6bvSHHrFyjt2xdX3PuhGNq7d/0PdcHK9Efp/tUNP5epTpNKJXY+ciAuv+22TNWlGAIECBAgQIAAAQIECBAgQIAAAQIECFxMIP066/P/+B9H///zH37zqmPHDlAiQIAAAQIE1i8g4L5+KysJECBAgAABAgRyJnB6dHS0XqmczlnZyiWQaYFaksSMcHum70hxlxZIg9KNd7879tz/L6Jv9+5LP9CFK048/nic/v2PZabz8s6dMfEnj/tGhMzciEIIECBAgAABAgQIECBAgAABAgQIEFivwLHPfe707o99dOd611tHgAABAgQIRAi4ewsIECBAgAABAgQKK3ByYuLWpF5/srANaoxABwRmkyQWBdw7IO/IZgikwfZtd921NrG9PDLSjC0Lu8ePf+PuaHz3u5nor+eGvXHV17/uzjJxG4ogQIAAAQIECBAgQIAAAQIECBAgQGAzAqunZ364bXz83aVSaXYzz3uGAAECBAh0m4CAe7fduH4JECBAgAABAl0kMD0+fl80Go90UctaJdBygRNJEqsC7i13dkBzBQTbN+75k2uvifrS0sYfbPITpX374rovfbnJu9qOAAECBAgQIECAAAECBAgQIECAAAEC7RdoRByOUrynUqn8sP2nO5EAAQIECORLQMA9X/elWgIECBAgQIAAgQ0ITFerX4uID2zgEUsJEHgbgeVSKU4SIpAjgfLOnTH8W78d4/v356jqzpe68KMfxUu/8ssdL2THpz7t7jp+CwogQIAAAQIECBAgQIAAAQIECBAgQKDZAjOzC18YH9/5wWbvaz8CBAgQIFAkAQH3It2mXggQIECAAAECBF4ncGp8/KlSo3ELFgIEmiPwSpLEguntzcG0S0sFBNu3xnvk0c/H/EMPbW2TLTydTtyvfuWrMXrzzVvYxaMECBAgQIAAAQIECBAgQIAAAQIECBDIpsCZxVqcePn07PBw77smJycPZ7NKVREgQIAAgc4KCLh31t/pBAgQIECAAAECLRSYrlYbLdze1gS6TuBEksSqgHvX3XueGhZsb85t/eR9d0T9+99vzmYb3CW9w4k/eTyG9u7d4JOWEyBAgAABAgQIECBAgAABAgQIECBAID8Cx0/MxOzcmcaO7YP/fNeeiQP5qVylBAgQIECgPQIC7u1xdgoBAgQIECBAgECbBU6Pjb2rXir9oM3HOo5AYQWWS6U4WdjuNJZ3AcH25t7gX73rxliZmWnupuvYrTw1FVPf/k6UR0bWsdoSAgQIECBAgAABAgQIECBAgAABAgQI5FdgdbUezx06FsvLK7F9uP97V12969b8dqNyAgQIECDQfAEB9+ab2pEAAQIECBAgQCADAqeq1feUIp7IQClKIFAIgVeSJBZMby/EXRapCcH25t/mytxc/NUNP9f8jS+xY2nfvrjuS19u+7kOJECAAAECBAgQIECAAAECBAgQIECAQKcEzizW4vALJ9aOr1R6z46MDPznk5PVZzpVj3MJECBAgECWBATcs3QbaiFAgAABAgQIEGiawHS1+mBEPNC0DW1EoMsFTiRJrAq4d/lbkJ32BdtbdxezTz8dx+98f+sOuMjO/ffcE3s+fn9bz3QYAQIECBAgQIAAAQIECBAgQIAAAQIEsiBw/MRMzJyeXyslSZLG8FD/X0xdNXl7FmpTAwECBAgQ6KSAgHsn9Z1NgAABAgQIECDQMoFT4+NPlRqNW1p2gI0JdJHAaqkUr84P8SHQWQHB9tb7H/7kJ+LsY4+1/qCfnrDjU5+O8f3723aegwgQIECAAAECBAgQIECAAAECBAgQIJAlgdXVejx36FgsL6+8VtbAwLbjg4Plvzc5OXk4S7WqhQABAgQItFNAwL2d2s4iQIAAAQIECBBom8B0tTobESNtO9BBBAoscCZJYs709gLfcPZbSyqVGHngQUHoNlzVj3/j7mh897stPym908lvPhFDe/e2/CwHECBAgAABAgQIECBAgAABAgQIECBAIMsC8/OL8eKRk68rMZ3mPrp98A+v3DPx0SzXrjYCBAgQINAqAQH3VsnalwABAgQIECBAoGMCp0dHR+uVyumOFeBgAgUTOJkksSzgXrBbzUc7aQh62113xRX3fijKI75nqR239uwv/3Ks/vsftfSodBL/xJ88LtzeUmWbEyBAgAABAgQIECBAgAABAgQIECCQJ4EXXzoZ8wuLbyrZNPc83aJaCRAgQKCZAgLuzdS0FwECBAgQIECAQCYETk5M3JrU609mohhFEMi5wGqpFCdy3oPy8ycg2N65O/vJtddEfWmpZQWUp6Zi6tvf8Q0LLRO2MQECBAgQIECAAAECBAgQIECAAAECeRRYXa3HswePRL1ef1P55XLPysjQwO/s2jNxII+9qZkAAQIECGxGQMB9M2qeIUCAAAECBAgQyLTAdLX6YEQ8kOkiFUcgJwJnkiTmTG/PyW0Vo8zSvn2x5/5/EX27dxejoZx18R93X9myipObboqr/+gx4faWCduYAAECBAgQIECAAAECBAgQIECAAIE8C8zMvBLHX37rH1I9NNh/sH8g+aXJycnDee5T7QQIECBAYD0CAu7rUbKGAAECBAgQIEAgVwLT1erXIuIDuSpasQQyKjCTJFETcM/o7RSrrDT8vPuhfynY3sFrrb3wQhz6hZ9vSQXpNy5c96Uvt2RvmxIgQIAAAQIECBAgQIAAAQIECBAgQKAoAodeOBGLi7W3bCdJksbo9sE/vHLPxEeL0rM+CBAgQIDAxQQE3L0XBAgQIECAAAEChROYrlZ/GBE3Fq4xDRFos0CjVIpjbT7Tcd0n0HPD3hj73d+N0Ztv7r7mM9bx7NNPx/E739/0qvrvuSf2fPz+pu9rQwIECBAgQIAAAQIECBAgQIAAAQIECBRNYHl5JZ49eOSSbQ0MbDs+ONj3jyYnq89ccrEFBAgQIEAghwIC7jm8NCUTIECAAAECBAi8vcB0tdpgRIDA1gXOJkmcNr1965B2uKhAeefOGP3EJ+Py224jlBGBVgTcd3zq0zG+f39GOlQGAQIECBAgQIAAAQIECBAgQIAAAQIEsi9w8tRsnDw1d8lC02nuw0P9fzF11eTtl1xsQaEEjrxw/I5Suf5vJycnDxeqMc0QIEDgAgEBd68DAQIECBAgQIBAoQROj429q14q/aBQTWmGQIcEZpIkagLuHdIv7rFJpRKD990XV3zw3uI2mdPOmhlwT+955yMHfANDTt8FZRMgQIAAAQIECBAgQIAAAQIECBAg0FmBdIp7Os19PZ9Kpffs8EDfx3btmTiwnvXW5FsgDbfPzJ358x3bB/+5O8/3XaqeAIG3FxBw94YQIECAAAECBAgUSuDU2NhdpVLpq4VqSjMEOiRwLEmiIeDeIf1iHtt/zz1xxb0fivLISDEbzHlXhz/5iTj72GNb7iINt09+84kY2rt3y3vZgAABAgQIECBAgAABAgQIECBAgAABAt0ocGaxFodfOLGh1ocG+w/2DyS/ZKr3hthytfh8uL1er5cuGx3+TQH3XF2fYgkQ2KCAgPsGwSwnQIAAAQIECBDItsB0tfpgRDyQ7SpVRyD7ArUkiRnh9uxfVE4qTG66KXY/9C+jb/funFTcnWU2I+Au3N6d746uCRAgQIAAAQIECBAgQIAAAQIECBBovsCLL52M+YXFDW2cJEljeKj/L6aumrx9Qw9anHmBC8PtabEC7pm/MgUSILBFAQH3LQJ6nAABAgQIECBAIFsCp8bHnyo1GrdkqyrVEMifwGySxKKAe/4uLmMVl6em4vJPfipGb745Y5Up52ICWw24p/c99e3vmNDv9SJAgAABAgQIECBAgAABAgQIECBAgEATBFZX6/HswSNRr9c3vFu53LMyMjTwOyZ8b5gukw+8dPj4fadfOfPfp5Pbzxco4J7Jq1IUAQJNFBBwbyKmrQgQIECAAAECBDovMF2tzkbESOcrUQGBfAucSJJYFXDP9yV2sPp0ivfIAw/G+P79HazC0RsV2ErAXbh9o9rWEyBAgAABAgQIECBAgAABAgQIECBA4NICMzOvxPGXT1964Vus6OurzA4P9982OVl9ZtObeLCjAi8cOvrl03Nn/us3FiHg3tFrcTgBAm0QEHBvA7IjCBAgQIAAAQIE2iNwenR0tF6pbP4rPO0p0ykEMi+wXCrFycxXqcCsCvS+947Yc//9pnhn9YLepq7NBtyF23N42UomQIAAAQIECBAgQIAAAQIECBAgQCA3As89fyxq55a2VO/QYP/B/oHKXYLuW2Js+8MH/+qlv1o4c/aaix0s4N7263AgAQJtFhBwbzO44wgQIECAAAECBFoncHJi4takXn+ydSfYmUB3CLySJLFgent3XHYTu+y5YW9c+cUvRt/u3U3c1VbtFNhMwL20b19c96Uvt7NMZxEgQIAAAQIECBAgQIAAAQIECBAgQKCrBM4s1uLwCyea0vP24f7vbetLPjA5OXm4KRvapCUCR4++/Atzc4v/+9LScv9bHSDg3hJ6mxIgkCEBAfcMXYZSCBAgQIAAAQIEtiYwXa0+GBEPbG0XTxMgcDJJYlnA3YuwToHyzp0x+olPxuW33bbOJyzLqsCJxx+P07//sXWXJ9y+bioLCRAgQIAAAQIECBAgQIAAAQIECBAgsCWBo8emY3ZuYUt7nH84SZLG0OC2pwXdm8LZ9E1ePHz8M7OvnPnder3+ttlOAfem09uQAIGMCQi4Z+xClEOAAAECBAgQILB5gelq9WsR8YHN7+BJAgRWS6VozgwQlt0g0H/PPXHFvR+K8shIN7Rb+B5nn346jt/5/nX1Kdy+LiaLCBAgQIAAAQIECBAgQIAAAQIECBAg0BSB1dV6PHvwSNTr9absl24i6N40yqZsdPTo0T1nzqz828XFcxPr2VDAfT1K1hAgkGcBAfc8357aCRAgQIAAAQIEXicwXa3+MCJuxEKAwOYFziRJzJnevnnALnmy54a9ceUXvxh9u3d3Scfd0eZ6A+69770jrnn44e5A0SUBAgQIECBAgAABAgQIECBAgAABAgQyIjAz80ocf/l006v566B75eOTk9Vnmn6ADS8psN6p7RduJOB+SVYLCBDIuYCAe84vUPkECBAgQIAAAQJ/LTBdrTZ4ECCwNYGZJImagPvWEAv8dHnnzhj9xCfj8ttuK3CX3dvawo9+FC/9yi+/LcCOT306xvfv714knRMgQIAAAQIECBAgQIAAAQIECBAgQKCDAukU9+XllZZVMDTYf7B/oHKXoHvLiF+38dGjL//C/PzZb9dqS6MbPfHyHcPvu2L3xDc2+pz1BAgQyIuAgHtebkqdBAgQIECAAAECbytwemzsXfVS6QeYCBDYvECjVIpjm3/ckwUX6L/nnrji3g9FeWSk4J12d3v/cfeVbwkg3N7d74buCRAgQIAAAQIECBAgQIAAAQIECBDovMCZxVocfuFEywvp66vMDvZt+4NdeyYOtPywLjzg6NGje87V6v/TK/Nnb9ls+zfe+A7Zz83ieY4AgVwI+I9cLq5JkQQIECBAgAABApcSODU2dlepVPrqpdb59wQIvLVALUlixvR2r8gbBHpu2Bs/85nPxNDevWy6QOCtAu7C7V1w+VokQIAAAQIECBAgQIAAAQIECBAgQCAXAodeOBGLi7W21Fou96wMDvR9p7It7pucnDzclkMLfMj5YPvCmXM31+v1LWU3BdwL/KJojQCBNYEt/UeSIQECBAgQIECAAIGsCExXqw9GxANZqUcdBPIoMJsksSjgnsera0nNSaUSg/fdF1d88N6W7G/TbAo8+8u/HKv//kevK064PZt3pSoCBAgQIECAAAECBAgQIECAAAECBLpTYHl5JZ49eKTtzQ8N9h/c1lt+1FT3jdM3M9ienp5+48H111/du/FKPEGAAIH8CAi45+euVEqAAAECBAgQIPA2AqfGx58qNRqb/hFucAkQiDiWJNEQcPcqRERy001x9R89FuWRER5dJvCT990R9e9//7Wuhdu77AXQLgECBAgQIECAAAECBAgQIECAAAECuRA4emw6ZucWOlJrGq7u76v8h77+yr2Tk9VnOlJETg49evTlXzhXW/pkMya2X9hyX19l9rrr9uzICYMyCRAgsCkBAfdNsXmIAAECBAgQIEAgawLT1epsREhiZu1i1JMbgeVSKU7mplqFtkqgvHNnXP6vPh+jN9/cqiPsm3GBw5/8RJx97LG1KoXbM35ZyiNAgAABAgQIECBAgAABAgQIECBAoGsFVlfra1Pc6/V6Rw0qld6z/X2V71a2lT8n7P7XV/Hi4eOfqS0t3bW4eG6iFReUTtO/5tpd17Zib3sSIEAgKwIC7lm5CXUQIECAAAECBAhsWuD0xMRUvV5/ftMbeJAAgXglSWLB9PaufhN633tH7Ln/flPbu/otiJh9+uk4fuf7hdu7/D3QPgECBAgQIECAAAECBAgQIECAAAEC2Rc4eWo2Tp6ay0yhadh9W6X842295c9esXviG5kprE2FHHnh+B3nlld+72xt6edWVlbLrTx2+3D/9666etetrTzD3gQIEOi0gIB7p2/A+QQIECBAgAABAlsWODkxcWtSrz+55Y1sQKCLBU4mSSwLuHflG1CemoqJR78QQ3v3dmX/mn69QO2FF6J26JAp/l4MAgQIECBAgAABAgQIECBAgAABAgQIZFwgK1PcL8aUJEmjr6/3xLbe8l+WK+WvFXW6eztD7Rc67xwd/uyVeyY+mvFXVHkECBDYkoCA+5b4PEyAAAECBAgQIJAFgelq9cGIeCALtaiBQB4FVkulOJHHwtW8ZYH+e+6JPR+/f8v72IAAAQIECBAgQIAAAQIECBAgQIAAAQIECBBov8Ds3EIcPTbd/oM3eGK53LPSt61yuKcn+fe9Pcm/zuuE96NHX/6FlaWVu5ZX6rcunj13db1e70j+8vIdw+/Lq+EGXx3LCRDoYoGO/Ae2i721ToAAAQIECBAg0AKBmWr1W42IX23B1rYk0BUCZ5MkTpve3hV3fb5JU9u76ro1S4AAAQIECBAgQIAAAQIECBAgQIAAAQIFFnj24JFYXl7JXYd9fZXZ3nLPoXJP8n8npeQ/7NozcSBrTbx0+Ph9K/X6Laur9Rtq55b2rKyslrNQ4403vkPuMwsXoQYCBFoq4D90LeW1OQECBAgQIECAQDsEpqvVH0bEje04yxkEiigwkyRRE3Av4tW+qaekUonB++6LKz54b1f0q0kCBAgQIECAAAECBAgQIECAAAECBAgQIFB0gbxMcV/PPaST3svlnoVKb8+/S9f39pS/lf69leH3dCp7fbn+n9Qb9Z9brdevXVpevXFlZXUoK2H2N7pVKr1n3/nOqYH1eFpDgACBPAsIuOf59tROgAABAgQIECCwJjBdrTZQECCweYGjJb813Lxefp7suWFvXPnFL0bf7t35KVqlBAgQIECAAAECBAgQIECAAAECBAgQIECAwCUFnnv+WNTOLV1yXd4XnA/An+/jfBB+PX01GjGyvLI6dX5trbY0up7nsrZmaLD/4DXX7ro2a3WphwABAs0WkGJotqj9CBAgQIAAAQIE2ipwcmLi1qRef7KthzqMQIEEakkSM6a3F+hG39yKqe2Fvl7NESBAgAABAgQIECBAgAABAgQIECBAgACBOLNYi8MvnCDRBQI7Rgb/ePfU5N1d0KoWCRDocgEB9y5/AbRPgAABAgQIEMi7wKmxsbtKpdJX896H+gl0SuCVJIkFAfdO8bf8XFPbW07sAAIECBAgQIAAAQIECBAgQIAAAQIECBAgkAmBQy+ciMXFWiZqUUTrBMbGRn5xcrL6TOtOsDMBAgSyISDgno17UAUBAgQIECBAgMAmBabHxg5EqfThTT7uMQJdL3AiSWJVwL2Q70H/PffEno/fX8jeNEWAAAECBAgQIECAAAECBAgQIECAAAECBAi8XsAU9+K/EeVyz8r111/dW/xOdUiAAIEIAXdvAQECBAgQIECAQK4FTo2PP1VqNG7JdROKJ9AhgdVSKfywyg7ht/DY8tRUTDz6hRjau7eFp9iaAAECBAgQIECAAAECBAgQIECAAAECBAgQyJqAKe5Zu5Hm1jM02H/wmmt3XdvcXe1GgACBbAoIuGfzXlRFgAABAgQIECCwToHpanU2IkbWudwyAgQuEDiTJDFnenuh3glT2wt1nZohQIAAAQIECBAgQIAAAQIECBAgQIAAAQIbEjDFfUNcuVu8Y2Twj3dPTd6du8IVTIAAgU0ICLhvAs0jBAgQIECAAAEC2RA4PTExVa/Xn89GNaogkD+BmSSJmoB7/i7uIhWXd+6MiT953NT2QtymJggQIECAAAECBAgQIECAAAECBAgQIECAwOYFTHHfvF3WnxwbG5yanJw8nPU61UeAAIFmCAi4N0PRHgQIECBAgAABAh0RODkxcWtSrz/ZkcMdSqAAAkdLfktYgGuM3vfeEXvuvz/KI36YRRHuUw8ECBAgQIAAAQIECBAgQIAAAQIECBAgQGArAqa4b0Uvu89WKr1n3/nOqYHsVqgyAgQINFdAmqG5nnYjQIAAAQIECBBoo8B0tfpgRDzQxiMdRaAwArUkiRnT23N9n0mlEjsfORCX33ZbrvtQPAECBAgQIECAAAECBAgQIECAAAECBAgQINBcAVPcm+uZhd1Gtg9+a+qqyduzUIsaCBAg0A4BAfd2KDuDAAECBAgQIECgJQIz1eq3GhG/2pLNbUqg4AKvJEksCLjn9pZ7btgbV33966a25/YGFU6AAAECBAgQIECAAAECBAgQIECAAAECBFonYIp762w7tfPY2MgvTk5Wn+nU+c4lQIBAuwUE3Nst7jwCBAgQIECAAIGmCUxXqz+MiBubtqGNCHSRwIkkiVUB99zdeDq1ffC+++KKD96bu9oVTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECLRPwBT39lm3+qRKpffsO985NdDqc+xPgACBLAkIuGfpNtRCgAABAgQIECCwIYHparWxoQcsJkBgTWC1VIoTLHInUJ6aiolHvxBDe/fmrnYFEyBAgAABAgQIECBAgAABAgQIECBAgAABAu0VMMW9vd6tPG1k++C3pq6avL2VZ9ibAAECWRMQcM/ajaiHAAECBAgQIEBgXQInJyZuTer1J9e12CICBF4ncCZJYs709ly9Fb3vvSP23H9/lEdGclW3YgkQIECAAAECBAgQIECAAAECBAgQIECAAIHOCZji3jn7Zp48NjY4NTk5ebiZe9qLAAECWRcQcM/6DamPAAECBAgQIEDgogKnxsbuKpVKX8VDgMDGBWaSJGoC7huH68ATSaUSOx85EJffdlsHTnckAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkGcBU9zzfHuv1j402H/wmmt3XZv/TnRAgACBjQkIuG/My2oCBAgQIECAAIGMCEyPjR2IUunDGSlHGQRyJXC05LeCebiwnhv2xpVf/GL07d6dh3LVSIAAAQIECBAgQIAAAQIECBAgQIAAAQIECGRQ4NmDR2J5eSWDlSlpPQKXjQ7/5q49EwfWs9YaAgQIFElAqqFIt6kXAgQIECBAgEAXCZwaH3+q1Gjc0kUta5VAUwRqSRIzprc3xbKVm/Tfc0/s+fj9rTzC3gQIECBAgAABAgQIECBAgAABAgQIECBAgEAXCMzOLcTRY9Nd0GnxWiyXe1auv/7q3uJ1piMCBAhcWkDA/dJGVhAgQIAAAQIECGRQYLpabWSwLCURyLzAK0kSCwLumb2npFKJ6le+GqM335zZGhVGgAABAgQIECBAgAABAgQIECBAgAABAgQI5EvAFPd83df5aneMDP7x7qnJu/NZvaoJECCwNQEB9635eZoAAQIECBAgQKADAqcnJqbq9frzHTjakQRyL3AiSWJVwD2T99hzw9646utfj/LISCbrUxQBAgQIECBAgAABAgQIECBAgAABAgQIECCQTwFT3PN3b0mSNG644Zokf5WrmAABAs0REHBvjqNdCBAgQIAAAQIE2ihwqlp9TyniiTYe6SgChRBYLZXiRCE6KV4T/ffcE3s+fn/xGtMRAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkAkBU9wzcQ3rLmL7cP/3rrp6163rfsBCAgQIFExAwL1gF6odAgQIECBAgEA3CExXqw9GxAPd0KseCTRT4GySxGnT25tJuuW9kkolql/5aozefPOW97IBAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOCtBE6emo2Tp+YA5UAgnd5+2WX9V01OTh7OQblKJECAQEsEBNxbwmpTAgQIECBAgACBVgrMVKvfakT8aivPsDeBIgrMJEnUBNwzc7XlqamY+vZ3ojwykpmaFEKAAAECBAgQIECAAAECBAgQIECAAAECBAgUU2B1tRQ0EpQAACAASURBVB7pFPd6vV7MBgvUlentBbpMrRAgsGkBAfdN03mQAAECBAgQIECgUwLT1eqhiNjTqfOdSyCvAseSJBoC7pm4vt733hHXPPxwJmpRBAECBAgQIECAAAECBAgQIECAAAECBAgQINAdAqa4Z/+eTW/P/h2pkACB9ggIuLfH2SkECBAgQIAAAQJNFJiuVhtN3M5WBLpC4FypFNNd0Wm2m0wqldj5yIG4/Lbbsl2o6ggQIECAAAECBAgQIECAAAECBAgQIECAAIHCCaRT3H/87IuF66tIDZneXqTb1AsBAlsREHDfip5nCRAgQIAAAQIE2i5wcmLi1qRef7LtBzuQQM4F5pMk5k1v7+gtlqemYuLRL8TQ3r0drcPhBAgQIECAAAECBAjkT+DMYu2iRS8vr0T611t9arXlWK3X19XwpfZa1yZbXNS3rRJJT7KuXSq95ejt7XnLtW+1V0+SRF9fZV1nWESAAAECBAgQIECgiAJHj03H7NxCEVvLfU/lcs/K9ddf3Zv7RjRAgACBJggIuDcB0RYECBAgQIAAAQLtE5geH78vGo1H2neikwgUQ+BkksSygHvHLrO0b19c8/Dnojwy0rEaHEyAAAECBAgQIECAQHsF3hhKX3xDSH15eTWW3hBOz0LIvL1K2TntYoH4vm290XNB4D4Nx297Qzh+cKAvO02ohAABAgQIECBAgMA6BNLfdzx78Mg6VlrSboGdo8OfvXLPxEfbfa7zCBAgkEUBAfcs3oqaCBAgQIAAAQIE3lJgemzsQJRKH0ZEgMD6BRqlUhxb/3Irmyww/JGPxBUfvLfJu9qOAAECBAgQIECAAIF2CKTBj/Mh9PpqPWrnll479o3T0d8YYG9Hfc7IlkDyhunwb5wyP3BBGD4N1F8Yns9WJ6ohQIAAAQIECBAousCLL52M+YXForeZq/76+iqz1123Z0euilYsAQIEWigg4N5CXFsTIECAAAECBAg0X+DU+PhTpUbjlubvbEcCxRWoJUnMmN7e9gtOKpWofuWrMXrzzW0/24EECBAgQIAAAQIECFxc4MLA+rnaUqzW62sLLwyr12pLUf/p/86RQDsEenvLkf6Vfi4MxV/4vwvEt+MmnEGAAAECBAgQ6B6B9CdOHX7hRPc0nINOx8ZGfnFysvpMDkpVIgECBNoiIODeFmaHECBAgAABAgQINEtgulptNGsv+xDoFoHZJIlFAfe2Xnd5aip2/emfRd/u3W0912EECBAgQIAAAQIEulUgDWeknzTAnv6Vfs4snlv7+xsnr3erkb6LI5CG3ZOeJHrWJsb3rjV2YRh+8IJJ8cXpWicECBAgQIAAAQLNFjj0wonwk6iarbq5/bYP93/vqqt33bq5pz1FgACBYgoIuBfzXnVFgAABAgQIECikwOmJial6vf58IZvTFIEWCpxIklgVcG+h8Ou3Lu3bF9c8/Lkoj4y07UwHESBAgAABAgQIECiqwPmJ6xeG1M8H1y8Msxe1f30R2IrA+dD7hUH48+H4VyfFvzo13ocAAQIECBAgQKA7BWbnFuLosenubD5DXVcqvWff+c6pgQyVpBQCBAhkQkDAPRPXoAgCBAgQIECAAIH1CJyqVt9TinhiPWutIUDgVYHVUin8gMn2vQ3DH/lIXPHBe9t3oJMIECBAgAABAgQI5FhgdbUetXNLr5uwfj68XqstRb1ez3F3SieQD4FkbQp8Za3YwYFta38/H4JP/97Tk+SjEVUSIECAAAECBAhsSuDZg0de+ylYm9rAQ1sWuHzH8Puu2D3xjS1vZAMCBAgUTEDAvWAXqh0CBAgQIECAQJEFpqvVByPigSL3qDcCzRY4kyQxZ3p7s1nftF9SqUT1K1+N0ZtvbvlZDiBAgAABAgQIECCQF4E3Bthf/efl1wXa89KLOgl0s8Drp773rE1+T/8yBb6b3wq9EyBAgAABAkURmJl5JY6/fLoo7eSuj+3D/d+76updt+aucAUTIECgDQIC7m1AdgQBAgQIECBAgEBzBGaq1W81In61ObvZhUB3CMwkSdQE3Ft62eWpqZh49AsxtHdvS8+xOQECBAgQIECAAIEsCqST1lfr9VhcrIUAexZvSE0EWi/w1xPfe9cmvp//58GBvtYf7gQCBAgQIECAAIEtCaS/j0unuPsJWlti3NTDlUrv2Xe+c2pgUw97iAABAl0gIODeBZesRQIECBAgQIBAUQSmq9VDEbGnKP3og0A7BI4lSTQE3FtGndx0U1z9R49FeWSkZWfYmAABAgQIECBAgECnBc4s1l6bur68vBpLyyuRBtsFIDp9M84nkA+BgYG+6EmS6OvrfW36exqCT8PwPgQIECBAgAABAp0XOHpsOmbnFjpfSBdVkCRJ47LLhm+enKw+00Vta5UAAQIbEhBw3xCXxQQIECBAgAABAp0UmK5WG50839kE8iZwrlSK6bwVnaN6e997R1zz8MM5qlipBAgQIECAAAECBN5aIA2sL6fB9XPp34XYvSsECLRHQPi9Pc5OIUCAAAECBAi8nUD6e8F0irtP+wR2jg5/9so9Ex9t34lOIkCAQP4EBNzzd2cqJkCAAAECBAh0pcDJiYlbk3r9ya5sXtMENikwnyQxb3r7JvXe/rEdn/p0jO/f35K9bUqAAAECBAgQIECgVQLpj55PA+znakuxWq/HmcVza6H29C8fAgQIZEkgWZv4XolKbzl6e3sinfje21te+998CBAgQIAAAQIEmi/w4ksnY35hsfkb2/FNAtuH+7931dW7bkVDgAABAm8vIODuDSFAgAABAgQIEMiFwPT4+H3RaDySi2IVSSAjAqeSJJYE3Jt6G0mlEpPffCKG9u5t6r42I0CAAAECBAgQINBMgTSwvrS8EouLNdPYmwlrLwIEMiGQht2TniQGB7athd7TvwYH+jJRmyIIECBAgAABAnkVOLNYi8MvnMhr+bmpe2Bg2/F3vGP3z+SmYIUSIECggwIC7h3EdzQBAgQIECBAgMD6BabHxg5EqfTh9T9hJYHuFmiUSnGsuwma3n15aip2/emfRd/u3U3f24YECBAgQIAAAQIENiNwsSB7Gmr3IUCAQDcK/HXY/a+D72kYvqcn6UYOPRMgQIAAAQIENizw7MEjfsLXhtXW/0Cl0nt2ZKTyzsnJycPrf8pKAgQIdK+AgHv33r3OCRAgQIAAAQK5Ejg1Pv5UqdG4JVdFK5ZABwVqSRIzprc37QZ6btgbV33961EeGWnanjYiQIAAAQIECBAgsF6B1dV61M4txbna0tpk9tq55ajVlqJer693C+sIECDQtQIXC76b+N61r4PGCRAgQIAAgbcRmJ1biKPHphm1QCBJksZll/VfJdzeAlxbEiBQWAEB98JercYIECBAgAABAsUSmK5WG8XqSDcEWivwSpLEgoB7U5BL+/bFdV/6clP2sgkBAgQIECBAgACBSwmkwfV0MnsaaD+zeG7t1+lfPgQIECDQXIE0+J5OeO/r6137+9o/91Wae4jdCBAgQIAAAQI5Eki/uTqd4u6bqZt7aWm4fefI4H91xe6JbzR3Z7sRIECg2AIC7sW+X90RIECAAAECBAohcHps7F31UukHhWhGEwTaJHAySWJZwH3L2sMf+Uhc8cF7t7yPDQgQIECAAAECBAhcTODMYm1tKns6kT2dzL64WANFgAABAh0WGBjoi8pa+L03tvVVwrT3Dl+I4wkQIECAAIG2Chw/MRMzp+fbemaRDxNuL/Lt6o0AgVYLCLi3Wtj+BAgQIECAAAECWxY4Va2+pxTxxJY3sgGBLhFolEpxrEt6bVWbSaUSIw88GOP797fqCPsSIECAAAECBAh0kUA6BS+dyJ4G2Gu15dcmtHcRgVYJECCQa4E3TntPJ72n/5sPAQIECBAgQKBoAulPEEunuPtsXUC4feuGdiBAoLsFBNy7+/51T4AAAQIECBDIhcB0tfpgRDyQi2IVSSADAmeTJE6b3r7pm0jD7ZPffCKG9u7d9B4eJECAAAECBAgQ6F6BN4bZ02B7GhDwIUCAAIFiCSRJEmnQfXBgW/RtezXwnv6zDwECBAgQIEAg7wIvvnQy5hcW895GR+sXbu8ov8MJECiIgIB7QS5SGwQIECBAgACBIgucGh9/qtRo3FLkHvVGoJkCs0kSiwLumyItT03FxKNfEG7flJ6HCBAgQIAAAQLdJyDM3n13rmMCBAhcSmBgoC/6tvWuhd3T4LvQ+6XE/HsCBAgQIEAgawLz84vx4pGTWSsrN/UIt+fmqhRKgEDGBQTcM35ByiNAgAABAgQIEIiYrlYPRcQeFgQIrE/gRJLEqoD7+rAuWJWG26e+/Z0oj4xs+FkPECBAgAABAgQIdIfAmcVanKstRe3ccqS/Npm9O+5dlwQIENiqwIWh98GBvrVp7z4ECBAgQIAAgSwLPHvwiN/zbuKChNs3geYRAgQIvIWAgLtXgwABAgQIECBAINMCp0dHR+uVyulMF6k4AhkSWC2V4kSG6slLKaV9++Kahz8n3J6XC1MnAQIECBAgQKANAml4PQ2x12pLsbh4LmrnltpwqiMIECBAoBsEkiRZm+w+OLDttSnvQu/dcPN6JECAAAEC+RGYmXkljr/sj2g3cmPlcs/K6PDAnVfsnvjGRp6zlgABAgQuLiDg7s0gQIAAAQIECBDItMDJiYlbk3r9yUwXqTgCGRI4myRx2vT2Dd1IGm6/7ktf3tAzFhMgQIAAAQIECBRLYHW1vhZgX1ysxZk0zF5binq9XqwmdUOAAAECmRZIA+592yrR19cb6cT3dNK7DwECBAgQIECgUwLp75N//OyLnTo+d+dWKr1nR0Yq75ycnDycu+IVTIAAgYwKCLhn9GKURYAAAQIECBAg8KrA9Pj4fdFoPMKDAIH1CcwkSdQE3NeHFRH999wTez5+/7rXW0iAAAECBAgQIFAMgfPT2dcms9eWTGcvxrXqggABAoUTeDXwXomBCya9F65JDREgQIAAAQKZFTh6bDpm5xYyW19WChsa7D/YP5D8knB7Vm5EHQQIFEVAwL0oN6kPAgQIECBAgEBBBaar1a9FxAcK2p62CDRd4FiSREPAfV2uOz716Rjfv39day0iQIAAAQIECBDIt8CZxVqcqy2tTWdPf206e77vU/UECBDoVoEkSdYC74MD29amvKcB+J6epFs59E2AAAECBAi0WCD9hvDnDh1r8Sn53n5k++C3pq6avD3fXaieAAEC2RQQcM/mvaiKAAECBAgQIEDgpwKnxsefKjUatwAhQODSAsulUpy89LKuX5FUKjHywIPC7V3/JgAgQIAAAQIEiiqQ/hj1xcXa2lT2NNCe/tqHAAECBAgUVeDCKe+DA33R21suaqv6IkCAAAECBDog8Nzzx/zUs4u4J0nS2LF98J/v2jNxoAPX4kgCBAh0hYCAe1dcsyYJECBAgAABAvkVmK5WG/mtXuUE2itwJklizvT2t0VPw+2T33wihvbube/lOI0AAQIECBAgQKBlAucD7elk9sXFc/7gvWXSNiZAgACBPAikU97ToHtfX+/alPf01z4ECBAgQIAAgc0KzM4txNFj05t9vJDPDQxsOz44WP57k5OThwvZoKYIECCQEQEB94xchDIIECBAgAABAgTeLHB6bOxd9VLpB2wIEFifwEySRE3A/S2xhNvX9x5ZRYAAAQIECBDIusDy8kqcD7Onf0//2YcAAQIECBB4a4FXg+7bIp32nv66pyfBRYAAAQIECBBYl0D6TeXPHjwS9Xp9XeuLvCid2j481P8XU1dN3l7kPvVGgACBrAgIuGflJtRBgAABAgQIECDwJoFT1ep7ShFPoCFAYH0Cx5IkGgLuF8UqT03FxKNfMLl9fa+SVQQIECBAgACBTAkItGfqOhRDgAABAgUQeDXovm1turvAewEuVAsECBAgQKDFAukE93SSezd/Xp3a3vePJierz3Szg94JECDQTgEB93ZqO4sAAQIECBAgQGBDAtPV6oMR8cCGHrKYQJcKLJdKcbJLe79U22m4ferb34nyyMillvr3BAgQIECAAAECGRAQaM/AJSiBAAECBLpKoLe3/NOw+6uh9/SffQgQIECAAAEC5wVqtaV47tCxrgQpl3tWtg8NPHzlnomPdiWApgkQINBBAQH3DuI7mgABAgQIECBA4O0FTo2PP1VqNG7hRIDApQXOJEnMmd7+Jijh9ku/O1YQIECAAAECBDotkP6488XFWpxZrMXi4rmonVvqdEnOJ0CAAAECXS0g8N7V1695AgQIECBwUYHnnj/Wlb9fT5KkMTLc/5XdU5N3ezUIECBAoL0CAu7t9XYaAQIECBAgQIDABgSmq9VDEbFnA49YSqBrBU4lSSwJuL/u/oXbu/b/DhonQIAAAQIEciCQhtnn5xcF2nNwV0okQIAAAQIC794BAgQIECBAYHZuIY4em+5aiOGh/h9efc2uv9W1ABonQIBABwQE3DuA7kgCBAgQIECAAIFLC5weHR2tVyqnL73SCgIEUoGjJb+9u/BNKO3bF9d96cteDgIECBAgQIAAgYwIpD/OPJ3S/srC2bW/+xAgQIAAAQL5Fbgw8D48NBA9PUl+m1E5AQIECBAgsC6B9KevPXvwSNTr9XWtL+Kivr7K7PBw77smJycPF7E/PREgQCBrAhIQWbsR9RAgQIAAAQIECKwJnJyYuDWp15/EQYDApQXOlUrRvTMz3uwj3H7pd8YKAgQIECBAgECrBZaXVyKd0r64eC5emV/s6j8Ab7W1/QkQIECAQKcF+rZVYmBgWwwO9MXAQJ/Ae6cvxPkECBAgQKBFAukE93SSezd/kiRpjG4f/MMr90x8tJsd9E6AAIF2CAi4t0PZGQQIECBAgAABAhsWmB4fvy8ajUc2/KAHCHShwHySxHyj0YWdv7ll4XavAQECBAgQIECgcwLz84uvhdpr55Y6V4iTCRAgQIAAgY4KpIH34eH+tbB7Gnr3IUCAAAECBIohkP50tucOHStGM1vsYnio/4d9/cl7THPfIqTHCRAg8DYCAu5eDwIECBAgQIAAgUwKTFerX4uID2SyOEURyJjAqSSJJQH3EG7P2IupHAIECBAgQKDwAumU9ldD7edifmGx8P1qkAABAgQIENicwPDQQAwObFsLvPf1VTa3iacIECBAgACBTAg8e/BIpF8P8Ikol3tWRoYGfmfXnokDPAgQIECg+QIC7s03tSMBAgQIECBAgEATBE6Njz9VajRuacJWtiBQeIGjJb+1E24v/GuuQQIECBAgQCADAqur9VhcrMX8wtm1Se3+QDsDl6IEAgQIECCQM4EkSWL78EAMDGxbm+7e21vOWQfKJUCAAAEC3S0wM/NKHH/5dHcjvKH7ocH+g/0DyS+Z5u61IECAQHMFpCCa62k3AgQIECBAgACBJglMV6uNJm1lGwKFFjhXKsV0oTu8dHPC7Zc2soIAAQIECBAgsFkBU9o3K+c5AgQIECBAYD0Cfdsqr4Xdh4cH1vOINQQIECBAgEAHBdJvfv/xsy92sIJsHp0kSWNkuP8ru6cm785mhaoiQIBA/gQE3PN3ZyomQIAAAQIECBRe4PTY2LvqpdIPCt+oBgk0QWA+SWK+0b3fD7LjU5+O8f37myBpCwIECBAgQIAAgfMC8/OLaxPa00ntprR7LwgQIECAAIF2CgwPDcTgwLYYGOiLvr5KO492FgECBAgQILBOgRdfOhnzC4vrXN1dyyqV3rPDA30f27Vn4kB3da5bAgQINF9AwL35pnYkQIAAAQIECBDYosCpsbG7SqXSV7e4jccJdIXAqSSJpS4NuAu3d8UrrkkCBAgQIECgDQLp9LX0D6bn58+uBdvr9XobTnUEAQIECBAgQODtBXp7yzE40BfDQ/1rgfeengQZAQIECBAgkAGB9BvjXzxyMgOVZLeEvr7K7PBw/22Tk9VnslulyggQIJBtAQH3bN+P6ggQIECAAAECXSkwXa0+GBEPdGXzmiawQYGjpe78bZ1w+wZfFMsJECBAgAABAm8QqNWWYnGxFrNzZ6J2bokPAQIECBAgQCDzAmnIfftPw+6mu2f+uhRIgAABAgUXePbgET/1bR13PDTYf7B/oHKXoPs6sCwhQIDAGwS6MwnhNSBAgAABAgQIEMi0wKnx8adKjcYtmS5ScQQyIHCuVIrpDNTR7hKE29st7jwCBAgQIECgKALpdPZ0ytr8wll/CF2US9UHAQIECBDoUoELp7sPDw90qYK2CRAgQIBA5wSOn5iJmdPznSsgZyenQfdtveVHd+2ZOJCz0pVLgACBjgkIuHeM3sEECBAgQIAAAQJvJTBdrc5GxAghAgTeXmA+SWK+0egqJuH2rrpuzRIgQIAAAQJNEDgfaH9lfjHq9XoTdrQFAQIECBAgQCB7AsNDAzE4sC3SsHsafvchQIAAAQIEWiuwvLwS6RR3n40J9PVVZgf6tv2PV+6Z+OjGnuye1S8cOvrl+TO1D4wOD9x5xe6Jb3RP5zolQOCNAgLu3gkCBAgQIECAAIFMCZweHR2tVyqnM1WUYghkVOBUksRSFwXchdsz+iIqiwABAgQIEMiUwOpqPeYXFmN+/uza330IECBAgAABAt0m0LetEgM/DbsPDvR1W/v6JUCAAAECbRN47vljUTu31LbzinRQudyzMtBf+Tfb+iofn5ysPlOk3jbTy9GjL//CudrSJxfPLv38yspqOfW5/vqrezezl2cIECiOgIB7ce5SJwQIECBAgACBQgicnJi4NanXnyxEM5og0GKBo6Xu+S2dcHuLXybbEyBAgAABArkWSKempZPazyyeE2rP9U0qngABAgQIEGi2QJIksX144NXA+9BA9PQkzT7CfgQIECBAoGsFZucW4uix6a7tv1mNDwxsO76tt/yXu6cm727WnnnZ58XDxz9TW1q6a3Hx3MSFNQ8P9f/w6mt2/a289KFOAgRaI9A9aYjW+NmVAAECBAgQIECgyQLT1eqDEfFAk7e1HYHCCZwrlaJbvmQo3F6411dDBAgQIECAQBMEzofaZ+fOmJbWBE9bECBAgAABAt0hkIbcB3863b23t9wdTeuSAAECBAi0SCD9KXI/fvbFFu3efdsmSdIY6N/2XKW3/D9fuWfio0UVSEPtS8sr/2jx7Lmr6/X6RfOrO0eHP1tkg6Lerb4INFtAwL3ZovYjQIAAAQIECBDYksB0tfq1iPjAljbxMIEuEJhPkphvNArf6fBHPhJXfPDewvepQQIECBAgQIDAegSE2tejZA0BAgQIECBAYH0Cfdsqa5PdR0eGoq+vsr6HrCJAgAABAgReJ/DiSyf9NLkWvRPnJ7uXK+WvTU5Wn2nRMS3f9ujRo3tWl5N/dqlQ+/lC0qD/DTdc48futPxmHEAg+wIC7tm/IxUSIECAAAECBLpKYLpa/WFE3NhVTWuWwCYETiVJLBU84F7aty+u+9KXN6HjEQIECBAgQIBAcQRqtaVYXKyFSe3FuVOdECBAgAABAtkTSKe5Dw70xfBQfwwPD2SvQBURIECAAIGMCszPL8aLR05mtLrilFUu96z0basc7i0nT2U98J4G2uvLye3LqyvvqZ1b+U+Xlpb7N3IT24cH/r+rrr7iZzfyjLUECBRTQMC9mPeqKwIECBAgQIBAbgWmq9Xij6TO7e0oPEsCR0vF/u2ccHuW3ja1ECBAgAABAu0WSCe1T8+8EvMLZyP9tQ8BAgQIECBAgED7BJIkie3DA2vT3YeHBqKnxwDR9uk7iQABAgTyKPAff/Ji1Ov1PJae25rTKeeVSnmu0tvz78o95f8zKcUPr9g98Y12N3Q+zL5Sr9+yulq/YWl5ZXKjgfY31nz5juH3daKXdts5jwCBSwsUOxFx6f6tIECAAAECBAgQyJDA6bGxd9VLpR9kqCSlEMikwLlSKaa3UFkyMhr1udkt7NDaR4XbW+trdwIECBAgQCCbAmmQPZ16ZlJ7Nu9HVQQIECBAgED3CqQh9+HhfmH37n0FdE6AAAEClxA4emw6ZucWOGVAoFLpPZskpXNp8D0tJw2/lyJOpL/etWfiwEZLPB9gT5+rN+o/t1qvX1uvx66V1dXLlpZWRur1elPzp+mk+uuvv7p3o3VaT4BAMQWa+h+YYhLpigABAgQIECBAoF0Cp8bG7iqVSl9t13nOIZBXgfkkifnGxn/YQRps7/ncv4r6wnys3vffZrJ94fZMXouiCBAgQIAAgRYJCLW3CNa2BAgQIECAAIEWCQwM9MX2of4YHh6I3t5yi06xLQECBAgQyJdArbYUzx06lq+iVbsmcD4Qn/66FYH1jTKPbB/81tRVk7dv9DnrCRAopoCAezHvVVcECBAgQIAAgVwKTFerD0bEA7ksXtEE2igwkyRR22DAffWmX4jeP/hsrDQiev/ff5fJgLtwextfIkcRIECAAAECHRMQau8YvYMJECBAgAABAk0V6NtWidGRQWH3pqrajAABAgTyKvDswSORfs3Dh8BWBMbGRn5xcrL6zFb28CwBAsUREHAvzl3qhAABAgQIECCQe4FT4+NPlRqNW3LfiAYItFjgWJJEYwMB954DX4jln73xtaqyGHAXbm/xS2N7AgQIECBAoKMCq6v1mF9YjPn5s2t/9yFAgAABAgQIECiWgLB7se5TNwQIECCwcYGTp2bj5Km5jT/oCQI/FRga7D94zbW7rgVCgACB8wIC7t4FAgQIECBAgACBzAhMV6uzETGSmYIUQiCDAsulUpxcZ13p1PZtD3wqlko9r3siawH38tRUTH37O1Ee8X//dV6tZQQIECBAgEBOBGbnFoTac3JXyiRAgAABAgQINEtA2L1ZkvYhQIAAgTwJpNPb0ynuPgQ2K3DZ6PBv7tozcWCzz3uOAIHiCQi4F+9OdUSAAAECBAgQyKXA6dHR0XqlcjqXxSuaQBsFziRJzK1jenvy330m6n//5qhfZG2WAu7C7W18ybD0/AAAIABJREFUeRxFgAABAgQItEVgfn4x5hfOxivzi1Gv19typkMIECBAgAABAgSyKZCG3QcGtsVlO7dHb285m0WqigABAgQINEngueePRe3cUpN2s003CZTLPSvXX391bzf1rFcCBC4tIOB+aSMrCBAgQIAAAQIE2iBwcmLi1qRef7INRzmCQK4FZpIkam8TcE9GRqPna1+Pc4Pb37LPrATchdtz/SoqngABAgQIELhAoFZbirVp7QtnI51Y5kOAAAECBAgQIEDgjQImu3snCBAgQKDoAjMzr8Txl80zK/o9t6K/HSODf7x7avLuVuxtTwIE8isg4J7fu1M5AQIECBAgQKBQAtPV6oMR8UChmtIMgRYIHEuSaLxFwH3pV341Kh/+yEWntl9YShYC7uWdO2Pqe09HeWSkBUq2JECAAAECBAi0XiANsqfT2mfnzphO1npuJxAgQIAAAQIECiUg7F6o69QMAQIECPxUIP1aybMHj/AgsCEB09s3xGUxga4SEHDvquvWLAECBAgQIEAguwLT1erXIuID2a1QZQQ6L7BcKsXJtyij58AXYvlnb1xXkZ0OuCeVSkx+84kY2rt3XfVaRIAAAQIECBDIksDapPb5szG/sJilstRCgAABAgQIECCQUwFh95xenLIJECBA4KICh144EYuLNToE1i2wfbj/e1ddvevWdT9gIQECXSMg4N41V61RAgQIECBAgEC2Baar1R9GxPrSudluRXUEWiZwJkli7g3T25OR0Ui+/r/EUm/fus/tZMBduH3d12QhAQIECBAgkCGBM4u1mJs7E6/ML0a9Xs9QZUohQIAAAQIECBAoksD5sPvIyFD09CRFak0vBAgQINAlAulggKPHprukW21uVSBJksZll/VfNTk5eXire3meAIHiCQi4F+9OdUSAAAECBAgQyKXAdLXayGXhiibQRoHZJInFCwLuS7/yq1H58Eei/obQ+6VK6mTAfdd3/tLk9ktdkH9PgAABAgQIZEIg/bHa6R/Kzs6difTXPgQIECBAgAABAgTaKTA8NBDDw/2R/l3YvZ3yziJAgACBrQisrtbjx8++uJUtPNtFAqa3d9Fla5XAJgQE3DeB5hECBAgQIECAAIHmCpweG3tXvVT6QXN3tRuB4gmcSJJY/WmYvefAF2L5Zzf3Qw86FXDf8alPx/j+/cW7GB0RIECAAAEChRJIQ+3z82djfmGxUH1phgABAgQIECBAIL8Cach9dGQwhocH8tuEygkQIECgawRefOmkr6t0zW1vvlHT2zdv50kC3SIg4N4tN61PAgQIECBAgECGBU6Njd1VKpW+muESlUag4wKrpVKciIhkZDR6vvb1ODe4fdM1dSLgLty+6evyIAECBAgQINAGgVptKWZOz8cr84tRr9fbcKIjCBAgQIAAAQIECGxcIEmS2D48EMND/cLuG+fzBAECBAi0SSAdHnD02HSbTnNMXgVMb8/rzambQPsEBNzbZ+0kAgQIECBAgACBtxCYHhs7EKXShwERIPDWAmeTJE79/Z+P3j/4bKw0tia17f/6N7H8sd/d2iYbeLr3vXfENQ8/vIEnLCVAgAABAgQItF4g/ZHZc3MLMTt3Jmrnllp/oBMIECBAgAABAgQINFGgt7e8FnQfHRmKvr5KE3e2FQECBAgQ2JpA+jWXHz/74tY28XShBcrlnpXrr7+6t9BNao4AgS0LCLhvmdAGBAgQIECAAAECWxU4NT7+VKnRuGWr+3ieQJEFTv7W78Xyf/FfRr2xtXR7+gdflT//Spx97LG2cJX27YvrvvTltpzlEAIECBAgQIDAegTOLNZibu5MpNPEfAgQIECAAAECBAgUQSD9mt9lO4bXprqnv/YhQIAAAQKdFnjxpZMxv7DY6TKcn1GBHSODf7x7avLujJanLAIEMiIg4J6Ri1AGAQIECBAgQKCbBaar1dmIGOlmA70TeDuBuT9+POZ3X90UpMmfuSzmPv9IWwLuyU03xd/4199oSt02IUCAAAECBAhsRWB5eWUt0J5Oa09/7UOAAAECBAgQIECgqAIDA30xOjIYw0MD0dOTFLVNfREgQIBAxgXSr8McPTad8SqV1wmBvr7K7HXX7dnRibOdSYBAvgQE3PN1X6olQIAAAQIECBRO4PTExFS9Xn++cI1piEATBBrDozHzjW/G2d5tTdgtIkmSeMc1V8RLn/lUywPu5ampmPr2d6I84ntXmnJ5NiFAgAABAgQ2JTA/v7gWajcxbFN8HiJAgAABAgQIEMi5wOjIUAwP9a9NdvchQIAAAQLtFFhdrcePn32xnUc6KycCl40O/+auPRMHclKuMgkQ6KCAgHsH8R1NgAABAgQIECAQcXJi4takXn+SBQECrxdY/Ls/H2c+8Zk4V+ppGs3Y5SMxdvloHP7kJ1oacC/v3BlT33tauL1pN2cjAgQIECBAYCMCprVvRMtaAgQIECBAgACBbhDo7S2vBd3TwHtfX6UbWtYjAQIECGRA4MWXTho6kIF7yFIJQ4P9B6+5dte1WapJLQQIZFdAwD27d6MyAgQIECBAgEBXCExXqw9GxANd0awmCaxT4Mxtt8fch38n6o3GOp9Y37Lr3nHl2o8lbmXAPalUYvKbT8TQ3r3rK8oqAgQIECBAgECTBExrbxKkbQgQIECAAAECBAot0LetEqMjgzEyMrT2tUIfAgQIECDQKoHZuYU4emy6VdvbN2cCSZI0Lrus/6rJycnDOStduQQIdEhAwL1D8I4lQIAAAQIECBB4VWCmWv1WI+JXeRAg8KrAwm/9Xsz+g9uazpFOZ5r8mcvW9m1lwH3Xd/5SuL3pt2dDAgQIECBA4K0E0h93PTe3ENOn5yOd3O5DgAABAgQIECBAgMD6BYaHBtbC7sPDA+t/yEoCBAgQILBOgfTrNj9+9sV1rras6AI7Rgb/ePfU5N1F71N/BAg0T0DAvXmWdiJAgAABAgQIENiEwHS1+sOIuHETj3qEQOEEZv/8m7Fw+XhL+nrHNVdE+qOI00+rAu47PvXpGN+/vyX125QAAQIECBAgcKHAmcVazM2diXQSmA8BAgQIECBAgAABAlsTSJJkLeieDsno66tsbTNPEyBAgACBCwRefOlkzC8sMulygb6+yux11+3Z0eUM2idAYIMCAu4bBLOcAAECBAgQIECguQLT1WqjuTvajUD+BBrDozH7+J/HmcHtLSk+ncR05a6x1/ZuRcC9/557Ys/H729J/TYlQIAAAQIECKQC6dSv9A9EZ2bmo3ZuCQoBAgQIECBAgAABAi0Q6NtWiZ07hyP9mmJPT9KCE2xJgAABAt0kkA4nOHpsupta1usbBJIkaVx22fDNk5PVZ+AQIEBgIwIC7hvRspYAAQIECBAgQKCpAicnJm5N6vUnm7qpzQjkTCANt5/6X/+3OFfqaVnle3aPx+BA32v7NzvgXtq3L6770pdbVr+NCRAgQIAAge4WWF5eiemZV2J27kzU6/XuxtA9AQIECBAgQIAAgTYKpBPdh4f6Y3h4oI2nOooAAQIEiiSQfl3n2YNHitSSXjYoMLJ98FtTV03evsHHLCdAgEAIuHsJCBAgQIAAAQIEOiZwamzsrlKp9NWOFeBgAh0WWPy7Px/zn3oollv4cwx6e8vxjmuueF2nzQy4l6em4tqn/48OSzqeAAECBAgQKKLA/PxiTJ+ej8XFWhHb0xMBAgQIECBAgACB3AikX2McHRmMNPCe/tqHAAECBAhsROC554/5aXwbASvQ2r6+yux11+3ZUaCWtEKAQBsFBNzbiO0oAgQIECBAgACB1wtMj40diFLpw1wIdKNAGm6f/dS/jHqjhen2iJj8mcvW/uDpws+RRz8f8w89tGX2NNw+9e3vRHlkZMt72YAAAQIECBAgkAqsrtZjbm5hLdieTvjyIUCAAAECBAgQIEAgWwLDQwMxPNz/pq85ZqtK1RAgQIBAlgRmZl6J4y+fzlJJammDQJIkjcsu679qcnLycBuOcwQBAgUUEHAv4KVqiQABAgQIECCQF4FT4+NPlRqNW/JSrzoJNEtg4bd+L2b/wW3N2u4t90mSJP7m37jyTf9+9umn4/id79/S+UmlEpPffCKG9u7d0j4eJkCAAAECBAikAmmY/eSpuXhlfjHq9ToUAgQIECBAgAABAgQyLpB+7TGd6n7Zzu2mumf8rpRHgACBTgukX/d59uCRTpfh/DYL7Bwd/uyVeyY+2uZjHUeAQIEEBNwLdJlaIUCAAAECBAjkTWC6Wp2NCKOf83Zx6t2SQLvC7WmRY5ePxNjlo2+qtxkB94k//bMYvfnmLVl4mAABAgQIECAwP7+4Nq19cbEGgwABAgQIECBAgACBnAoMDPSthd3T6e49PUlOu1A2AQIECLRS4Lnnj0Xt3FIrj7B3hgSGh/p/ePU1u/5WhkpSCgECORQQcM/hpSmZAAECBAgQIFAEgdMTE1P1ev35IvSiBwLrFZj/H74Ycz/bvonn77jmiotOT9pqwH3Hpz4d4/v3r7dt6wgQIECAAAECrxNYXa3H3NzCWrA9neDlQ4AAAQIECBAgQIBAMQTSqe7bhwdi547h6OurFKMpXRAgQIBAUwSOn5iJmdPzTdnLJtkWqFR6z77znVMD2a5SdQQI5EFAwD0Pt6RGAgQIECBAgEABBU5OTNya1OtPFrA1LRG4qMDsn38zFi4fb5tOOi3pyl1jF6/l6afj+J3v31QtpX374rovfXlTz3qIAAECBAgQ6G6BNMw+PfNKzM6diXq93t0YuidAgAABAgQIECBQcIG+bZXYuXPYVPeC37P2CBAgsF6BWm0pnjt0bL3LrcupQJIkjcsu679qcnLycE5bUDYBAhkSEHDP0GUohQABAgQIECDQTQLT1eqDEfH/s3dvMY6cV4LnD4OXZDKTyUsmg0zmtbJUV7VLNjCA7FZrqoAFBgYGBUsva1vAoKyFIOzDri2vjYEN7EIC7Aa07gYsATsjz4NWWhhYdz20qqanJWM9gnWBtN4H71rGNATJGlmVVZW34i2zmMliJcmIRaS77JRcWZlkMhjfF/Hni2VXxHfO+Z2wu0UenXg6SDVTa3AFBj3c7kjPzeZlJBG/K3qvG9zDnzsjx159NbiNpHIEEEAAAQQQ6Elgq9GUarUu9c1GT/dzEwIIIIAAAggggAACCOgrwFZ3fXtH5ggggEC/BT76eIm3+fUbVbHzJjLJr03NFi4qlhbpIICApgIMuGvaONJGAAEEEEAAAQR0F6ia5mVb5Cu610H+COwn4MVwezQakWNHp/ZMrZcB90g2K/NvvS2RVGq/kvlzBBBAAAEEEEBgR2B9Y3NnsL15exsRBBBAAAEEEEAAAQQQQEASibikUyOSTo2igQACCCAQQIHllcrO90V8/CmQSY28ODtffMKf1VEVAgh4IcCAuxfqxEQAAQQQQAABBBCQimm+JyIPQIGAXwXsZFqqF1+RW9GhgZdYMDOSzY7tGbfbAXcjFpPiK5dk9MyZgddCQAQQQAABBBDQS6DTsaRauynrG1ts5NKrdWSLAAIIIIAAAggggMDABJyt7s6g+3h2TJxlHXwQQAABBIIhUK835NpSKRjFBqzK0ZHhj4/eN31fwMqmXAQQcFmAAXeXgTkeAQQQQAABBBBA4O4CFdO0sUHArwLOcHv57/9BbofCnpR44tiMhMPGnrG7HXCf+Hf/XibOn/ekFoIigAACCCCAgB4CrVZbKtU/DLZblqVH0mSJAAIIIIAAAggggAACnguw1d3zFpAAAgggMFCB9z9YHGg8grkvkEgMrR47NjvpfiQiIIBA0AQYcA9ax6kXAQQQQAABBBBQQKBUKJwzLOsNBVIhBQT6LuD1cLvzet/i5Pg96+pmwH34ySdl7n/+X/ruxIEIIIAAAggg4A+BZnNbqrU6r5f2RzupAgEEEEAAAQQQQAABzwScTe7OVnfn+022unvWBgIjgAACrgtcu16S+mbD9TgEGIxALBa9lUrFThWLRf7JhcGQEwWBQAkw4B6odlMsAggggAACCCCghkAln39KbPvHamRDFgj0T8Dr4XankrnZvIwk4vcs6qAD7sZf/qUc/7uL/QPiJAQQQAABBBDwjcBWoyml8oY0Gk3f1EQhCCCAAAIIIIAAAgggoIaAM+SeSo3s+z2nGtmSBQIIIIBANwLrG5uyvFLp5hauVVSA4XZFG0NaCPhIgAF3HzWTUhBAAAEEEEAAAV0EKrnccxIKfUuXfMkTgYMIqDDc7mw2OnZ0at90DzLgHpmfl/n/9I8SSaX2PY8LEEAAAQQQQCA4As6PkNVqXZq3t4NTNJUigAACCCCAAAIIIICAJwLO9525iZQkRxMSDhue5EBQBBBAAIH+CrRabfno46X+HsppAxcwDMMeH0/+y2LRfGfgwQmIAAKBEWDAPTCtplAEEEAAAQQQQEAdgXI+/2bIts+qkxGZIHA4ARWG250KCmZGstmxfYvZb8DdiMWk+MolGT1zZt+zuAABBBBAAAEEgiHgDLY7G9udHyH5IIAAAggggAACCCCAAAKDFDAMQ8aSiZ1hd2fonQ8CCCCAgN4Cv/9kheUJGrfQGW7Ppka+PjVb4DXQGveR1BHQQYABdx26RI4IIIAAAggggIDPBCqmafusJMoJsIAqw+1OC04cmznQJqP9Btwn/t2/l4nz5wPcVUpHAAEEEEAAAUeg07GkWrsplWpdLMsCBQEEEEAAAQQQQAABBBDwXCCRiMt4JinJZMLzXEgAAQQQQKA3gdW1qlRr9d5u5i5PBRhu95Sf4AgEToAB98C1nIIRQAABBBBAAAFvBWqFwrxlWZ94mwXREeiPgErD7enUqBQnxw9U2L0G3KP/7Vfl6N/+7YHO4SIEEEAAAQQQ8KcAg+3+7CtVIYAAAggggAACCCDgJwFnk7sz6J5KjR5o6YefaqcWBBBAQHeBrUZTFq+u6V5G4PJnuD1wLadgBDwXYMDd8xaQAAIIIIAAAgggECyBsmk+EhK5FKyqqdaPAioNtzu+M1O5A28t2mvAPfy5M3Ls1Vf92C5qQgABBBBAAIEDCLRabSmVN2R9Y/MAV3MJAggggAACCCCAAAIIIOC9gGEYMpZMSG4iJc7QOx8EEEAAAT0EPvjdNd4YqEerdrJkuF2jZpEqAj4SYMDdR82kFAQQQAABBBBAQAeBimk+IyJP65ArOSKwl4Bqw+3ODzfHjk4duGF3G3A3YjFZ+H//P4mkUgc+hwsRQAABBBBAwB8CDLb7o49UgQACCCCAAAIIIIBA0AUSifjOVvdkMhF0CupHAAEElBe4dr0k9c2G8nmSIMPtPAMIIOCdAAPu3tkTGQEEEEAAAQQQCKRA1TQv2yJfCWTxFO0bgfWfvSKbE3ll6slmklLIZw+cz90G3Kf/8VUZPXPmwGdwIQIIIIAAAgjoL9Bsbku1Vmdju/6tpAIEEEAAAQQQQAABBBDYJeAsBHEG3VOpUQmHDWwQQAABBBQUcN4guLxSUTAzUtotEItFb6VSiX9VLJrvIIMAAggMWoAB90GLEw8BBBBAAAEEEAi4QMU0r4jIXMAZKF9jAdWG2x1KZ3t7N6/f/eyAe/Lf/luZ+h/+R427QuoIIIAAAggg0I3AVqMppfKGNBrNbm7jWgQQQAABBBBAAAEEEEBAKwHDMCSdGpHx7FhX359qVSTJIoAAApoKOG8U/OjjJU2zD0bafxhuj50qFouLwaiYKhFAQDUBBtxV6wj5IIAAAggggAACPheomKbt8xIpz8cCKg63x4disnBksiv13QPuxl/+pRz/u4td3c/FCCCAAAIIIKCnAIPtevaNrBFAAAEEEEAAAQQQQODwAsnRhGSzSRlJxA9/GCcggAACCPRFwBlwdwbd+agnkEgMrY6MRL7IcLt6vSEjBIIkwIB7kLpNrQgggAACCCCAgMcCpULhnGFZb3icBuER6ElAxeF2p5Di5LikU6Nd1XRnwD0yPy/z/+kfJZJKdXU/FyOAAAIIIICAXgIMtuvVL7JFAAEEEEAAAQQQQAAB9wSchSHOoHu336m6lxEnI4AAAsEVWF2rSrVWDy6AopUnR4ffWzg6/QVF0yMtBBAIkAAD7gFqNqUigAACCCCAAAJeC1Ty+afEtn/sdR7ER6Bbgc3vfE/Wv3y+29sGcv2JYzMSDhtdxXIG3G/8d49L8ZVLMnrmTFf3cjECCCCAAAII6CPAYLs+vSJTBBBAAAEEEEAAAQQQGKxANBqRdGpEspmxrr9fHWymREMAAQT8K1CvN+TaUsm/BWpYWSY18uLsfPEJDVMnZQQQ8KEAA+4+bColIYAAAggggAACqgpUcrnnJBT6lqr5kRcCdxNQebjdea3uzHSu68Y5A+63Fxcl/2/+Tdf3cgMCCCCAAAIIqC/AYLv6PSJDBBBAAAEEEEAAAQQQUEPAMAwZSyYkN5ESZ+idDwIIIIDA4AQ6HUs+/Oja4AISaU8BwzDsbGrk61OzhYswIYAAAqoIMOCuSifIAwEEEEAAAQQQCIBAOZ9/M2TbZwNQKiX6RGDr8Sel9tgFZauZmcpJMpnoOr/2xoZEUqmu7+MGBBBAAAEEEFBbgMF2tftDdggggAACCCCAAAIIIKC2gLNQJJtNykgirnaiZIcAAgj4SODK1TVpNJo+qki/UuLx2HoyGf18sVhc1C97MkYAAT8LMODu5+5SGwIIIIAAAgggoJhAxTRtxVIiHQT2FGg8+JCs//XfiGWr+dg6m4VOHp+hgwgggAACCCCAgDDYzkOAAAIIIIAAAggggAACCPRPIJGISzo1IunUaP8O5SQEEEAAgbsKlMrrUipvoOORwFhy+K0jC9PnPApPWAQQQOCeAgy484AggAACCCCAAAIIDESgVijMW5b1yUCCEQSBQwq0jh6X0n94Wdnhdqc858eV4uT4ISvldgQQQAABBBDQWYDBdp27R+4IIIAAAggggAACCCCgukA0GpHxTFJSqVEJhw3V0yU/BBBAQEsB5/utxatrWuauc9KGYdiZsZH/aXqu8JzOdZA7Agj4W4ABd3/3l+oQQAABBBBAAAFlBMqm+UhI5JIyCZEIAnsI2Mm0lP/+H+R2KKy00cxUTpLJhNI5khwCCCCAAAIIuCPAYLs7rpyKAAIIIIAAAggggAACCNxNwHmb5ng2KdnMGIPuPCIIIICACwLvf7DowqkcuZdAIjG0OjIS+WKxWASexwQBBJQWYMBd6faQHAIIIIAAAggg4B+Bimk+IyJP+6ciKvGrQOkXbys/3O78oHLy+IxfW0BdCCCAAAIIILCHQKvVlqWVijQaTYwQQAABBBBAAAEEEEAAAQQ8EHDerJmbSImz3Z0PAggggEB/BK5cXeP7rv5Q3vMUZ2t7cnT4P84fKT46gHCEQAABBA4twID7oQk5AAEEEEAAAQQQQOAgAlXTvGyLfOUg13INAl4JrP/sFdmcyHsV/sBxnR9RipPjB76eCxFAAAEEEEBAbwFnsL1U3pD1jU29CyF7BBBAAAEEEEAAAQQQQMAnAsnRhGSzSRlJxH1SEWUggAAC3gmUyus7333xcU8gHo+tJ5PD54tF8x33onAyAggg0F8BBtz768lpCCCAAAIIIIAAAnsIVEzziojMAYSAqgL151+QjdNnVE3vU3nNTOUkmUxokStJIoAAAggggEDvAgy2927HnQgggAACCCCAAAIIIIDAIAQSifjORncG3QehTQwEEPCrwFajKYtX1/xanqd1OVvb02Mj/+vMXOH7niZCcAQQQKAHAQbce0DjFgQQQAABBBBAAIHuBSqmaXd/F3cgMBiBze98T9a/fH4wwQ4ZxTAMOXl85pCncDsCCCCAAAIIqCzQ6ViydqPGxnaVm0RuCCCAAAIIIIAAAggggMAugWg0sjPo7rx9kw8CCCCAQPcC73+w2P1N3HFPgeTo8HvxYeORYrEILs8KAghoKcCAu5ZtI2kEEEAAAQQQQEAvgVKhcM6wrDf0yppsgyLQePAhqf7wR9qU6/xAUpwc1yZfEkUAAQQQQACBgws4g+3V2k2pVOtiWdbBb+RKBBBAAAEEEEAAAQQQQAABJQTuDLonRxMSDhtK5EQSCCCAgA4CV66uSaPR1CFV5XOMx2Pro8ND//3UbOGi8smSIAIIIHAPAQbceTwQQAABBBBAAAEEXBeo5PNPiW3/2PVABECgS4HW0eNS+g8vi2Xr84KBmamcJJOJLivlcgQQQAABBBBQXaBUXmewXfUmkR8CCCCAAAIIIIAAAgggcEAB502c49mkZDNjDLof0IzLEEAg2ALOd2Ol8kawEQ5ZfSQSbo+NJv52Zq7w/UMexe0IIICAEgIMuCvRBpJAAAEEEEAAAQT8LVAxzZdF5IK/q6Q63QTsZFrKf/8PcjsU1iZ150eRk8dntMmXRBFAAAEEEEBgf4H1jc2dH+9arfb+F3MFAggggAACCCCAAAIIIICAVgJ3Bt2dN3M62935IIAAAgjcXWCr0ZTFq2vw9CDgDLYnR+L/x+x88YkebucWBBBAQFkBBtyVbQ2JIYAAAggggAAC/hEo5/Nvhmz7rH8qohI/CKz/7BXZnMhrVYrzI0hxclyrnEkWAQQQQAABBO4uUK83ZPVGjcF2HhAEEEAAAQQQQAABBBBAICACzve7uYkUg+4B6TdlIoBA9wLvf7DY/U0BvsMwDHt0ZOjtobhxoVgsghfgZ4HSEfCrAAPufu0sdSGAAAIIIIAAAgoJVEzTVigdUkFA6s+/IBunz2gnMTOVk2QyoV3eJIwAAggggAACfxJwtlE5G9sbjSYsCCCAAAIIIIAAAggggAACARRg0D2ATadkBBA4kMCVq2t8Z3YAKTa2HwCJSxBAwBcCDLj7oo0UgQACCCCAAAIIqCtQy+U+b4VCv1E3QzILmsDW409K7bEL2pXtvMr25PEZ7fImYQQQQAABBBD4g0Cr1ZbVtZrUNxuQIIAAAggggAACCCCDMNMTAAAgAElEQVSAAAIIICDOoHs2k5R4PIYGAggggICIlMrrO4sh+NxdIBaL3hoZjv2fs/PFJzBCAAEEgiDAgHsQukyNCCCAAAIIIICAhwJl03wkJHLJwxQIjcAfBRoPPiTrf/03Ytn6vVQgOZqQmekc3UQAAQQQQAABzQQ6HUvWbtRkfWNTs8xJFwEEEEAAAQQQQAABBBBAYBACiURcchMpGUnEBxGOGAgggICyAvV6Q64tlZTNz6vERkeGPx6KRv636bnCc17lQFwEEEDACwEG3L1QJyYCCCCAAAIIIBAggYppPiMiTweoZEpVVMBOpqX89/8gt0NhRTO8d1rFyfGdjT58EEAAAQQQQEAPAWewvVq7KZVqXSzL0iNpskQAAQQQQAABBBBAAAEEEPBMgEF3z+gJjAACigg436d9+NE1RbLxNg1nW/twPPZ/xYbkqWKxuOhtNkRHAAEEvBFgwN0bd6IigAACCCCAAAKBESjn82+GbPtsYAqmUGUF1n/2imxO5JXNb7/EThybkXDY2O8y/hwBBBBAAAEEFBBwtrU7r1NutdoKZEMKCCCAAAIIIIAAAggggAACOgkw6K5Tt8gVAQT6LfD7T1akeXu738dqcV4kEm4Px2P/NBSNPDs1W7ioRdIkiQACCLgowIC7i7gcjQACCCCAAAIIICBSMc0rIjKHBQJeCmz+4FlZ/+LDXqZwqNjODxrzs/oO5x+qeG5GAAEEEEBAI4GtRlOWVyoMtmvUM1JFAAEEEEAAAQQQQAABBFQVYNBd1c6QFwIIuCngfLfmLI8Iyoeh9qB0mjoRQKAXAQbce1HjHgQQQAABBBBAAIEDCdTS6bQVi9UOdDEXIeCSQOPBh6T6wx+5dPpgji2YGclmxwYTjCgIIIAAAggg0LWAs6l9aaUijUaz63u5AQEEEEAAAQQQQAABBBBAAIF7CTiD7unUiKRTo0AhgAACvhdwhtudIXc/fwzDsJOjw/8xGjb+jk3tfu40tSGAwGEFGHA/rCD3I4AAAggggAACCOwpUCoUzhmW9QZECHglYCfTsnLpNbFs26sU+hJ3YX5S4vFYX87iEAQQQAABBBDon0CnY8najVqgtkr1T4+TEEAAAQQQQAABBBBAAAEEuhGIRiOSm0gx6N4NGtcigIB2As3mtvz+yop2eXeb8OjI8MfDCeO/KRaLi93ey/UIIIBAUAQYcA9Kp6kTAQQQQAABBBDwQKCSzz8ltv1jD0ITEoEdgcprv5Rb0SGtNZwfLY4dndK6BpJHAAEEEEDAjwKl8rpUqnWxLMuP5VETAggggAACCCCAAAIIIICAogIMuivaGNJCAIG+Cbz/QTBmvmOx6K1UKnaKIfe+PTochAACPhNgwN1nDaUcBBBAAAEEEEBAJYGKab4sIhdUyolcgiNQf/4F2Th9RvuCs5mkFPJZ7eugAAQQQAABBPwiUK83ZPVGTVqttl9Kog4EEEAAAQQQQAABBBBAAAENBRh017BppIwAAgcSuHJ1TRqN5oGu1f2iPwy5J/5VsWi+o3st5I8AAgj0W4AB936Lch4CCCCAAAIIIIDAHwXK+fybIds+CwkCgxbYOv+o1L753UGHdSXezFROksmEK2dzKAIIIIAAAggcXMB5PbIz2B6UH9cOLsOVCCCAAAIIIIAAAggggAACXgow6O6lPrERQMANAefNiaXyhhtHK3mmYRh2NjXy9anZwkUlEyQpBBBAwCMBBtw9gicsAggggAACCCAQBIGKadpBqJMa1RKwk2m5celVafnk6Tt9ck4tYLJBAAEEEEAgYAKdjiVrN2qyvrEZsMopFwEEEEAAAQQQQAABBBBAQCcBBt116ha5IoDAvQScNyheWyoFCokh90C1m2IRQOCAAgy4HxCKyxBAAAEEEEAAAQS6E6jlcp+3QqHfdHcXVyNweIHa5Z/L1sjY4Q9S4IREIi7zs3kFMiEFBBBAAAEEgilQrd6UG+UNsSwrmABUjQACCCCAAAIIIIAAAgggoJ1AfCgm+XxGRhJx7XInYQQQQMARaLXa8tHHS4HDYMg9cC2nYAQQ2EeAAXceEQQQQAABBBBAAAFXBMqm+UhI5JIrh3MoAnsIbP7gWVn/4sO+8SmYGclm/TGs75umUAgCCCCAQCAEthpNWV6p7PyYxgcBBBBAAAEEEEAAAQQQQAABHQWcBSq5iRSD7jo2j5wRQEA++N21QC6dcIbcU8nh/312vvgEjwECCCAQdAEG3IP+BFA/AggggAACCCDgkkDFNJ8RkaddOp5jEfgzgcaDD8n6X/+NWLbtG52F+UmJx2O+qYdCEEAAAQQQUF3AGWhfXatJfbOheqrkhwACCCCAAAIIIIAAAggggMCBBBh0PxATFyGAgGICV66uSaPRVCyrwaWTSY28yJD74LyJhAACagow4K5mX8gKAQQQQAABBBDQXqCcz78Zsu2z2hdCAdoIlH7xttwOhbXJd79EDcOQk8dn9ruMP0cAAQQQQACBPgh0OpZUazelVN7ow2kcgQACCCCAAAIIIIAAAggggIB6Agy6q9cTMkIAgb0FSuX1wH9Xx5A7/w1BAIGgCzDgHvQngPoRQAABBBBAAAGXBCqmeUVE5lw6nmMR+JTAxos/lfrsgq9UkqMJmZnO+aomikEAAQQQQEBFgXq9Ias3auJsb+eDAAIIIIAAAggggAACCCCAgN8FGHT3e4epDwF/CDjf2V1bKvmjmENUwZD7IfC4FQEEtBdgwF37FlIAAggggAACCCCgnkAtnU5bsVhNvczIyI8CW+cfldo3v+u70oqT45JOjfquLgpCAAEEEEBAFQFnoH1ppRLoVx2r0gvyQAABBBBAAAEEEEAAAQQQGLyAs2SlkM9INBoZfHAiIoAAAvsION/dffTxEk4iwpA7jwECCARVgAH3oHaeuhFAAAEEEEAAARcFSoXCOcOy3nAxBEcjsCNgJ9Ny49Kr0rL9B3Ls6BQ/LPivrVSEAAIIIKCAQKdjSbV2M/CvOFagFaSAAAIIIIAAAggggAACCCCggICzaCU3keL7aAV6QQoIIPBpgfc/WITknwUYcudRQACBIAow4B7ErlMzAggggAACCCDgskAln39KbPvHLofheASkdvnnsjUy5jsJZ2OOM+DOBwEEEEAAAQT6K+C82nj1Rk2cDVB8EEAAAQQQQAABBBBAAAEEEEDgTwIMuvM0IICAagJXrq7x9sVdTWHIXbUnlHwQQMBtAQbc3RbmfAQQQAABBBBAIIACFdN8WUQuBLB0Sh6gwNbjT0rtMX8+Zs4PCcXJ8QFqEgoBBBBAAAF/CzgD7UsrFX4Q83ebqQ4BBBBAAAEEEEAAAQQQQKAPAs4292xmTMJhow+ncQQCCCDQu8DqWlWqtXrvB/jwTobcfdhUSkIAgT0FGHDn4UAAAQQQQAABBBDou0DFNN8TkQf6fjAHIvDPAnYyLSuXXhPLtn1p4gy3O0PufBBAAAEEEEDgcAKdjiXV2k0plTcOdxB3I4AAAggggAACCCCAAAIIIBAgAcMwZDybZNA9QD2nVARUFKhWb+68jZHPpwXG08lvT88VnsMFAQQQ8LsAA+5+7zD1IYAAAggggAACHghUTNOfU8ceWBLy7gK1yz+XrZEx3/IcOzol0WjEt/VRGAIIIIAAAoMQqNcbOz+AOdvb+SCAAAIIIIAAAggggAACCCCAQPcCdwbdcxPp7m/mDgQQQOCQAluNpixeXTvkKf673TAMO5sa+frUbOGi/6qjIgQQQOBPAgy48zQggAACCCCAAAII9FWglst93gqFftPXQzkMgV0CW48/KbXHLvjWxBlsdwbc+SCAAAIIIIBAbwLOQPvqWk3qm43eDuAuBBBAAAEEEEAAAQQQQAABBBD4lIDzvXVuIsWbR3kuEEBgoALO2xk//OjaQGPqEowhd106RZ4IIHAYAQbcD6PHvQgggAACCCCAAAJ/JlDO5b4RCoVeggYBNwTsZFpWLr0mlu3flwSkU6NSnBx3g48zEUAAAQQQ8L1AqbwulWpdLMvyfa0UiAACCCCAAAIIIIAAAggggMCgBZxB94KZkWQyMejQxEMAgYAKfPC7a3zXt0fvGXIP6H8pKBuBAAkw4B6gZlMqAggggAACCCAwCIGKaT4jIk8PIhYxgidQu/xz2RoZ83Xhzo8D2ay/a/R1AykOAQQQQMATAed1xWtrNWne3vYkPkERQAABBBBAAAEEEEAAAQQQCJJAIhHf2eg+kogHqWxqRQABDwSuXF2TRqPpQWQ9QkYi4XYmE7+vWCwu6pExWSKAAAIHF2DA/eBWXIkAAggggAACCCBwAIFyPv9myLbPHuBSLkGgK4Gtx5+U2mMXurpHx4sX5iclHo/pmDo5I4AAAgggMHAB5zXFztb2aq0+8NgERAABBBBAAAEEEEAAAQQQQCDoAs6g+9TkuDib3fkggAACbgisrlX57m8f2FgseiuVip1iyN2NJ5AzEUDASwEG3L3UJzYCCCCAAAIIIOBDgYpprotIyoelUZKHAnYyLSuXXhPLtj3Mwv3QhmHIyeMz7gciAgIIIIAAAj4QqNcbsrRS4RXFPuglJSCAAAIIIIAAAggggAACCOgtkE6N7mx0Z9Bd7z6SPQIqClSrN2X1Rk3F1JTKyRlyP3VqPqFUUiSDAAIIHFKAAfdDAnI7AggggAACCCCAwJ8Eaul02orF+IaBh6LvAhsv/lTqswt9P1e1A51tN/OzedXSIh8EEEAAAQSUEmi12juD7byaWKm2kAwCCCCAAAIIIIAAAggggAACO0Pu2cyYhMMGGggggEBfBLYaTVm8utaXs/x+yOjI8MdH75u+z+91Uh8CCARHgAH34PSaShFAAAEEEEAAAdcFSoXCOcOy3nA9EAECJbB1/lGpffO7gajZ+fI/N5EORK0UiQACCCCAQC8CpfK6VKp1trb3gsc9CCCAAAIIIIAAAggggAACCAxAwHlT6Xg2yXfdA7AmBAJBEOh0LPnwo2tBKLUvNSZHh99bODr9hb4cxiEIIICAxwIMuHvcAMIjgAACCCCAAAJ+EqiY5jMi8rSfaqIW7wXWXn9XWrb3eQwig7nZvIwk4oMIRQwEEEAAAQS0EnA2Na2t1aR5e1urvEkWAQQQQAABBBBAAAEEEEAAgaAKRKORnY3u6dRoUAmoGwEE+iTw/geLfTopGMdkUiMvzs4XnwhGtVSJAAJ+FmDA3c/dpTYEEEAAAQQQQGDAAhXTfFlELgw4LOF8LFB//gXZOH3GxxV+urQTx2Z4dWtguk2hCCCAAAIHEXA2NDlb26u1+kEu5xoEEEAAAQQQQAABBBBAAAEEEFBMIJGI7wy6s9xFscaQDgIaCVy5uiaNRlOjjL1PdTyd/Pb0XOE57zMhAwQQQKB3AQbce7fjTgQQQAABBBBAAIHPCFRM8z0ReQAYBPoh0Dp6XNZ+8lI/jtLijPhQTBaOTGqRK0kigAACCCAwCIF6vSGrN2rSarUHEY4YCCCAAAIIIIAAAggggAACCCDgooAz6D41OS7OZnc+CCCAQDcC166XpL7Z6OaWwF9rGIadTY18fWq2cDHwGAAggIC2Agy4a9s6EkcAAQQQQAABBNQTqJimrV5WZKSrQOW1X8qt6JCu6Xedt/Oa1uLkeNf3cQMCCCCAAAJ+E3C2ti+vVPjRym+NpR4EEEAAAQQQQAABBBBAAAEERMT5LjxvZnibKU8DAggcWMB5w2OpvHHg67nwDwKxWPRWKhU7VSwWFzFBAAEEdBRgwF3HrpEzAggggAACCCCgoEAtl/u8FQr9RsHUSElDga3Hn5TaYxc0zLz3lAtmRrLZsd4P4E4EEEAAAQR8IFCt3pQb5Q2xLMsH1VACAggggAACCCCAAAIIIIAAAgjcTcAwDBnPJiWbGWPQnUcEAQT2FVjf2NxZiMGne4F4PLZ+4sRcpvs7uQMBBBDwXoABd+97QAYIIIAAAggggIAvBMq53DdCodBLviiGIjwVsJNpuXHpVWkF7H0Ac7N5GUnEPbUnOAIIIIAAAl4JtFptWVqpSKPR9CoF4iKAAAIIIIAAAggggAACCCCAwIAFotGI5CZSO1vd+SCAAAJ7CWw1mrJ4dQ2gHgWSo8PvLRyd/kKPt3MbAggg4JkAA+6e0RMYAQQQQAABBBDwl0DFNJ8Rkaf9VRXVeCFQf/4F2Th9xovQnsY8fXLO0/gERwABBBBAwCsB5xXDlWqdre1eNYC4CCCAAAIIIIAAAggggAACCHgsEB+KST6fYQmMx30gPAKqCjjLMT76eEnV9LTIK5MaeXF2vviEFsmSJAIIIPDPAgy48ygggAACCCCAAAII9EWgnM+/GbLts305jEMCK9A6elzWfhK8FwE4X94vHJkMbN8pHAEEEEAgmALN5vbOq4Wbt7eDCUDVCCCAAAIIIIAAAggggAACCCDwKYHkaEIK+Yw4m935IIAAArsF3v9gEZBDCBiGYWdTI1+fmi1cPMQx3IoAAggMVIAB94FyEwwBBBBAAAEEEPCvQMU010Uk5d8KqWwQApXXfim3okODCKVUDOf1q8XJcaVyIhkEEEAAAQTcFHC2tpfKG26G4GwEEEAAAQQQQAABBBBAAAEEENBUIDeRkmxmTMJhQ9MKSBsBBPot4Gxwdza58+ldIBIJtzOZ+H3FYpF/WqB3Ru5EAIEBCjDgPkBsQiGAAAIIIIAAAn4VqKXTaSsWq/m1PuoajMDW+Uel9s3vDiaYYlEKZkay2THFsiIdBBBAAAEE+i+w1WjK2lqNre39p+VEBBBAAAEEEEAAAQQQQAABBHwlYBiGmM6gO9+d+6qvFINArwJXrq5Jo9Hs9Xbu+2eBeDy2fuLEXAYQBBBAQAcBBtx16BI5IoAAAggggAACiguUCoVzhmW9oXiapKe4wNrr70rLVjxJl9Kbm83LSCLu0ukciwACCCCAgPcCnY4lztb2aq3ufTJkgAACCCCAAAIIIIAAAggggAAC2ghEo5GdN6DyHbo2LSNRBFwRuHa9JPXNhitnB+3QseTwW0cWps8FrW7qRQAB/QQYcNevZ2SMAAIIIIAAAggoJ1AxzWdE5GnlEiMhbQTqz78gG6fPaJNvvxM9fXKu30dyHgIIIIAAAsoIOFvbl1cqvEJYmY6QCAIIIIAAAggggAACCCCAAAL6CSQScZmaHBdn4J0PAggET8BZnlEqbwSvcJcqzqaTz87MFb7v0vEciwACCPRFgAH3vjByCAIIIIAAAgggEGyBqmletkW+EmwFqu9VwE6mZeXSa2LZwVzf7nwZf+zoVK983IcAAggggICyAmxtV7Y1JIYAAggggAACCCCAAAIIIICAtgLZTFJyE2kJhw1tayBxBBDoXoAB9+7N7nWHYRj2+HjyXxaL5jv9PZnTEEAAgf4JMODeP0tOQgABBBBAAAEEAitQMc33ROSBwAJQ+KEENl78qdRnFw51hs43J0cTMjOd07kEckcAAQQQQODPBNjazkOBAAIIIIAAAggggAACCCCAAAJuCRiGIYV8RtKpUbdCcC4CCCgmUK835NpSSbGs9E4nFoveOnVqPqF3FWSPAAJ+FmDA3c/dpTYEEEAAAQQQQGBAAhXTDObq7QH5+jlM6+hxWfvJS34ucd/achOpnW0zfBBAAAEEEPCDAFvb/dBFakAAAQQQQAABBBBAAAEEEEBAD4H4UEzy+YyMJOJ6JEyWCCDQs4CzUGPx6lrP93Pj3QWSo8PvLRyd/gI+CCCAgIoCDLir2BVyQgABBBBAAAEENBIoFQrnDMt6Q6OUSVUhgcprv5Rb0SGFMhp8KjNTOUkmWY4weHkiIoAAAgj0W4Ct7f0W5TwEEEAAAQQQQAABBBBAAAEEEDiIgPOmVGejezQaOcjlXIMAAhoKNJvb8vsrKxpmrn7K4+nkt6fnCs+pnykZIoBA0AQYcA9ax6kXAQQQQAABBBDos0A5l/tGKBQK9gruPpsG5bit849K7ZvfDUq5e9a5MD8p8Xgs8A4AIIAAAgjoK8DWdn17R+YIIIAAAggggAACCCCAAAII+EXAMAwZzyYlmxmTcNjwS1nUgQACuwTe/2ARDxcEDMOwx8eHjxSLRYBd8OVIBBDoXYAB997tuBMBBBBAAAEEEEBARCq53HMSCn0LDAS6FWB7+x/ETp+c65aO6xFAAAEEEFBGgK3tyrSCRBBAAAEEEEAAAQQQQAABBBBAQGRni3vBzPDmVJ4GBHwowIC7e01NJIZWjx2bnXQvAicjgAAC3Qsw4N69GXcggAACCCCAAAII7BIo5/Nvhmz7LCgIdCOw9fiTUnvsQje3+PLa+FBMFo7wXZEvm0tRCCCAgM8F2Nru8wZTHgIIIIAAAggggAACCCCAAAKaCyQS8Z1Bd96gqnkjSR+BXQIf/O6aWJaFiUsCqbGRy/NHio+6dDzHIoAAAl0LMODeNRk3IIAAAggggAACCOwWqJjmuoikUEGgG4G119+Vlt3NHf68NjmakJnpnD+LoyoEEEAAAd8KsLXdt62lMAQQQAABBBBAAAEEEEAAAQR8J5DNJCU3kZZw2PBdbRSEQNAErlxdk0ajGbSyB1avYRh2NjXy9anZwsWBBSUQAgggcA8BBtx5PBBAAAEEEEAAAQR6FqgVCvOWZX3S8wHcGEiBze98T9a/fD6QtX+26NxEaueLdT4IIIAAAgjoIMDWdh26RI4IIIAAAggggAACCCCAAAIIIPBZAcMwpJDPSDo1Cg4CCGgswIC7+82LxaK3Tp2aT7gfiQgIIIDA/gIMuO9vxBUIIIAAAggggAACewiUCoVzhmW9ARAC3Qiwvf1PWjNTOUkm+Y6om+eHaxFAAAEEvBFga7s37kRFAAEEEEAAAQQQQAABBBBAAIH+CSQScXEWz4wk4v07lJMQQGBgAgy4D4Z6LDn81pGF6XODiUYUBBBAYG8BBtx5OhBAAAEEEEAAAQR6FqiY5jMi8nTPB3Bj4AQ2f/CsrH/x4cDVvVfBc7N5vkjnaUAAAQQQUFqAre1Kt4fkEEAAAQQQQAABBBBAAAEEEECgBwFnk3vezEg4bPRwN7cggIBXAqtrVanW6l6FD1TciUzya1OzhYuBKppiEUBAOQEG3JVrCQkhgAACCCCAAAL6CFRN87It8hV9MiZTLwXsZFpWLr0mlm17mYZSsU+fnFMqH5JBAAEEEEBgtwBb23keEEAAAQQQQAABBBBAAAEEEEDArwKGYYg5kZJsdsyvJVIXAr4TKJXXpVTe8F1dKhYUi0VvnTo1z2uoVWwOOSEQIAEG3APUbEpFAAEEEEAAAQT6LVAxzfdE5IF+n8t5/hSoP/+CbJw+48/ieqjK+fL85PGZHu7kFgQQQAABBNwVYGu7u76cjgACCCCAAAIIIIAAAggggAAC6gjEh2KSz2d426o6LSETBPYUYMB9sA/HWHL4rSML0+cGG5VoCCCAwJ8EGHDnaUAAAQQQQAABBBDoWaBimqzi7lkvWDeyvf3P+51IxGV+Nh+sB4FqEUAAAQSUF2g2t2V5pSLN29vK50qCCCCAAAIIIIAAAggggAACCCCAQL8E0qlRyZsZCYeNfh3JOQgg0GcBBtz7DHqA4yYyya9NzRYuHuBSLkEAAQT6LsCAe99JORABBBBAAAEEEAiGQKlQOGdY1hvBqJYqDyvA9vY/F3S+LC9Ojh+WlvsRQAABBBDomwA/EPWNkoMQQAABBBBAAAEEEEAAAQQQQEBDAefNq+ZESrLZMQ2zJ2UE/C/A95eD73EsFr116tR8YvCRiYgAAgiIMODOU4AAAggggAACCCDQk0A5l/tGKBR6qaebuSlQAmxvv3u7cxMpyU2kA/UsUCwCCCCAgJoCbG1Xsy9khQACCCCAAAIIIIAAAggggAAC3gg4b2AtmBmJx2PeJEBUBBC4q0C93pBrSyV0Biwwlhx+68jC9LkBhyUcAgggwIA7zwACCCCAAAIIIIBAbwKVXO45CYW+1dvd3BUkAba3373bM1M5SSZZeBCk/y5QKwIIIKCiAFuPVOwKOSGAAAIIIIAAAggggAACCCCAgAoC2UxyZ1FNOGyokA45IBB4ga1GUxavrgXewQuAXC71cLFovuNFbGIigEBwBdjgHtzeUzkCCCCAAAIIIHAogXI+/2bIts8e6hBu9r0A29v3bvHcbF5GEnHfPwMUiAACCCCgpkCr1ZZr10vSvL2tZoJkhQACCCCAAAIIIIAAAggggAACCCggYBiGFPIZSadGFciGFBAItgAD7t71Px6PrZ84MZfxLgMiI4BAEAUYcA9i16kZAQQQQAABBBDog0DFNNdFJNWHozjCxwJsb9+7uSeOzbD1xcfPPqUhgAACKgtUqzflRnlDLMtSOU1yQwABBBBAAAEEEEAAAQQQQAABBJQRSCTiMjU5LtFoRJmcSASBoAkw4O5txzOpkRdn54tPeJsF0RFAIEgCDLgHqdvUigACCCCAAAII9EmgVijMW5b1SZ+O4xgfC6y9/q60bB8XeIjSTp+cO8Td3IoAAggggED3As7W9qWVijQaze5v5g4EEEAAAQQQQAABBBBAAAEEEEAAAclNpCSbGWOBDc8CAh4IMODuAfqukIZh2OPjw0eKxeKit5kQHQEEgiLAgHtQOk2dCCCAAAIIIIBAHwVKhcI5w7Le6OORHOVDgc3vfE/Wv3zeh5UdvqT4UEwWjkwe/iBOQAABBBBA4IAC9XpjZ7idre0HBOMyBBBAAAEEEEAAAQQQQAABBBBAYA8BZ4t7cXJcRhJxjBBAYIACDLgPEHuPUKMjwx8fvW/6Pu8zIQMEEAiCAAPuQegyNSKAAAIIIIAAAn0WqJjmMyLydJ+P5TifCbC9fe+GOq8ynZ/N+6zjlIMAAgggoKJAp2PJ8kpF6psNFdMjJwQQQAABBBBAAAEEEEAAAQQQQEBbgeRoYmfQPRw2tK2BxBHQSYABdzW6NZ5Ofnt6rvCcGtmQBQII+FmAAXc/d5faEMcGlk4AACAASURBVEAAAQQQQAABlwSqpnnZFvmKS8dzrA8E2N5+7yZmM0kp5LM+6DQlIIAAAgioLMDWdpW7Q24IIIAAAggggAACCCCAAAIIIOAHAcMwxJxISTY75odyqAEBpQUYcFejPbFY9NapU/MJNbIhCwQQ8LMAA+5+7i61IYAAAggggAACLglUTPOKiMy5dDzH+kCA7e33bmJuIiW5ibQPOk0JCCCAAAIqCjhb20vldanW6iqmR04IIIAAAggggAACCCCAAAIIIICA7wTiQ7Gdbe7xeMx3tVEQAqoIMOCuSidEUmMjl+ePFB9VJyMyQQABPwow4O7HrlITAggggAACCCDgskDFNG2XQ3C8xgJb5x+V2je/q3EF7qfufMmdTo26H4gICCCAAAKBE3B+5FleqUir1Q5c7RSMAAIIIIAAAggggAACCCCAAAIIeC3gvMHVWXATDhtep0J8BHwnwIC7Oi01DMMeHx8+UiwWF9XJikwQQMBvAgy4+62j1IMAAggggAACCLgsUCoUzhmW9YbLYTheY4HKa7+UW9EhjStwP/W52byMJOLuByICAggggECgBJyt7aXyRqBqplgEEEAAAQQQQAABBBBAAAEEEEBANYFoNLKzzZ3fAVTrDPnoLsCAu1odTI4Ov7dwdPoLamVFNggg4CcBBtz91E1qQQABBBBAAAEEBiBQyeefEtv+8QBCEUJDgcaDD0n1hz/SMPPBpsyA+2C9iYYAAgj4XaDZ3N7Z2t68ve33UqkPAQQQQAABBBBAAAEEEEAAAQQQ0EYgOZrYGXRnm7s2LSNRxQUYcFevQblc6uFi0XxHvczICAEE/CDAgLsfukgNCCCAAAIIIIDAAAUqudxzEgp9a4AhCaWRwPrPXpHNibxGGXuT6umTc94EJioCCCCAgO8EqtWbsnqj5ru6KAgBBBBAAAEEEEAAAQQQQAABBBDwg4BhGGJOpCSbHfNDOdSAgKcCDLh7yn/X4PF4bP3EibmMepmREQII+EGAAXc/dJEaEEAAAQQQQACBAQqU8/k3Q7Z9doAhCaWJQOvocVn7yUuaZOttmgy4e+tPdAQQQMAPAq1WW5ZWKtJoNP1QDjUggAACCCCAAAIIIIAAAggggAACvhZIJOIyNTku0WjE13VSHAJuCjDg7qZu72ePp5Pfnp4rPNf7CdyJAAII3F2AAXeeDAQQQAABBBBAAIGuBCqmaXd1AxcHRqD+/AuycfpMYOrttVDny+tjR6d6vZ37EEAAAQQQkHq9sTPcblkWGggggAACCCCAAAIIIIAAAggggAACGgnkJlKSm0hrlDGpIqCOAAPu6vRidyaRSLh9//0LUTWzIysEENBZgAF3nbtH7ggggAACCCCAwIAFaoXCvGVZnww4LOE0EVh+/f8Wy+aff9ivXc6WlvnZ/H6X8ecIIIAAAgj8mUCnY8nySkXqmw10EEAAAQQQQAABBBBAAAEEEEAAAQQ0FYgPxSSfz8hIIq5pBaSNgDcCpfK6lMob3gQn6j0FMqmRF2fni0/AhAACCPRTgAH3fmpyFgIIIIAAAggg4HOBsmk+EhK55PMyKa8Hgc3vfE/Wv3y+hzuDdwsD7sHrORUjgAAC/RBwthNdu15ia3s/MDkDAQQQQAABBBBAAAEEEEAAAQQQUEAgm0nubHMPhw0FsiEFBNQXYMBd3R45W9wzmfh9xWJxUd0syQwBBHQTYMBdt46RLwIIIIAAAggg4KFAxTSfEZGnPUyB0IoKlH7xttwOhRXNTq200qlRKU6Oq5UU2SCAAAIIKCvgbG13frip1urK5khiCCCAAAIIIIAAAggggAACCCCAAAK9CUSjkZ3fDNjm3psfdwVLgAF3tfs9lhx+68jC9Dm1syQ7BBDQSYABd526Ra4IIIAAAggggIDHAlXTvGyLfMXjNAivmMDW+Uel9s3vKpaVuunkJlI7G1n4IIAAAgggsJ9As7ktyysVad7e3u9S/hwBBBBAAAEEEEAAAQQQQAABBBBAQGOB5GhiZ9Cdbe4aN5HUXRdgwN114kMFMAzDHh8fPsIW90MxcjMCCOwSYMCdxwEBBBBAAAEEEEDgwAIV07wiInMHvoELAyGw/rNXZHMiH4ha+1EkA+79UOQMBBBAwP8C/Fjj/x5TIQIIIIAAAggggAACCCCAAAIIILBbwDAMmZocl2QyAQwCCNxF4Nr1ktQ3G9goLMAWd4WbQ2oIaCjAgLuGTSNlBBBAAAEEEEDAK4GKadpexSaumgJ2Mi1Lr7yqZnKKZlUwM5LNjimaHWkhgAACCHgt0Gq1ZWmlIo1G0+tUiI8AAggggAACCCCAAAIIIIAAAggg4IFAIhHfGXSPRiMeRCckAuoKXLm6xvem6rZnJzO2uCveINJDQDMBBtw1axjpIoAAAggggAACXgmUCoVzhmW94VV84qopUH/+Bdk4fUbN5BTNam42LyOJuKLZkRYCCCCAgJcC6xubsrpWE8uyvEyD2AgggAACCCCAAAIIIIAAAggggAACHgs429zNiRQLczzuA+HVEmDAXa1+7JXN6Mjwx0fvm75Pj2zJEgEEVBZgwF3l7pAbAggggAACCCCgkEAln39KbPvHCqVEKgoIrL3+rrTY699VJxhw74qLixFAAIFACHQ6liyvVHi9biC6TZEIIIAAAggggAACCCCAAAIIIIDAwQXY5n5wK670v8AHv7vGchBN2pzLpR4uFs13NEmXNBFAQFEBBtwVbQxpIYAAAggggAACqglUcrnnJBT6lmp5kY93AluPPym1xy54l4CmkRlw17RxpI0AAgi4JLDVaMq16yV+mHHJl2MRQAABBBBAAAEEEEAAAQQQQAAB3QXY5q57B8m/XwLvf7DYr6M4x2UBtri7DMzxCAREgAH3gDSaMhFAAAEEEEAAgcMKlPP5N0O2ffaw53C/fwRql38uWyNj/iloQJUszE9KPB4bUDTCIIAAAgioKuBsbS+V16Vaq6uaInkhgAACCCCAAAIIIIAAAggggAACCCgkwDZ3hZpBKgMXcL5P/fCjawOPS8DeBdji3rsddyKAwB8EGHDnSUAAAQQQQAABBBA4kEDFNO0DXchFgRBoHT0uaz95KRC19rvI0yfn+n0k5yGAAAIIaCbQbG7L8kpFmre3NcucdBFAAAEEEEAAAQQQQAABBBBAAAEEvBbITaQkN5H2Og3iIzBQAedNmItX1wYak2CHE2CL++H8uBsBBBhw5xlAAAEEEEAAAQQQOIBArVCYtyzrkwNcyiUBEdj8wbOy/sWHA1Jtf8tkwL2/npyGAAII6CbgbG0vlTd0S5t8EUAAAQQQQAABBBBAAAEEEEAAAQQUEogPxaQ4Oc4bYxXqCam4K8CAu7u+bp2ey43MF4vFRbfO51wEEPC3ABvc/d1fqkMAAQQQQAABBPoiUDbNR0Iil/pyGIf4QmDt9XelxU7/nnrJgHtPbNyEAAIIaC/QarVlaaUijUZT+1ooAAEEEEAAAQQQQAABBBBAAAEEEEBADQG2uavRB7JwX4DFIe4buxFhLDn81pGF6XNunM2ZCCDgfwEG3P3fYypEAAEEEEAAAQQOLVAxzWdE5OlDH8QBvhDYOv+o1L75XV/U4kURDLh7oU5MBBBAwFuB9Y1NWV2riWVZ3iZCdAQQQAABBBBAAAEEEEAAAQQQQAAB3wmwzd13LaWguwisrlWlWqtjo5mAYRj2+PjwEba4a9Y40kVAEQEG3BVpBGkggAACCCCAAAIqC1RN87It8hWVcyS3wQms/+wV2ZzIDy6gzyIx4O6zhlIOAgggcA+BTseS5ZWK1DcbOCGAAAIIIIAAAggggAACCCCAAAIIIOCqANvcXeXlcI8Frlxd4+2YHveg1/Bsce9VjvsQQIABd54BBBBAAAEEEEAAgX0FKqZ5RUTm9r2QC3wvYCfTsnLpNbFs2/e1ulUgA+5uyXIuAgggoJbAVqO5M9zearXVSoxsEEAAAQQQQAABBBBAAAEEEEAAAQR8K8A2d9+2NvCFffTxEt+1avoUOFvcP/e5o4am6ZM2Agh4KMCAu4f4hEYAAQQQQAABBHQQqKXTaSsWq+mQKzm6L7D5ne/J+pfPux/IpxGcL5YXjkz6tDrKQgABBBC4I8DrcnkWEEAAAQQQQAABBBBAAAEEEEAAAQS8FGCbu5f6xHZD4P0PFt04ljMHJJBJjbw4O198YkDhCIMAAj4RYMDdJ42kDAQQQAABBBBAwC2BUqFwzrCsN9w6n3P1Eqi89ku5FR3SK2mFsk0k4jI/m1coI1JBAAEEEOinQLO5vbO1vXl7u5/HchYCCCCAAAIIIIAAAggggAACCCCAAAJdCzhLd2amcxKNRrq+lxsQUEnAeVvm4tU1lVIily4FIpFw+/77F6Jd3sblCCAQcAEG3AP+AFA+AggggAACCCCwn0Aln39KbPvH+13Hn/tfoHX0uKz95CX/F+pihQy4u4jL0QgggIDHAtXqTVm9wUtvPG4D4RFAAAEEEEAAAQQQQAABBBBAAAEEdgkYhiHmREqy2TFcENBWgO9etW3dpxLPppPPzswVvu+PaqgCAQQGIcCA+yCUiYEAAggggAACCGgsUDHNl0XkgsYlkHqfBDZ/8Kysf/HhPp0WzGMYcA9m36kaAQT8LdBqtWVppSKNRtPfhVIdAggggAACCCCAAAIIIIAAAggggIC2As7vE1OT42xz17aDwU58da0q1Vo92Ag+qD4ej62fODGX8UEplIAAAgMSYMB9QNCEQQABBBBAAAEEdBUo5/Nvhmz7rK75k3f/BEq/eFtuh8L9OzCAJzHgHsCmUzICCPhaoF5v7Ay3W5bl6zopDgEEEEAAAQQGKxCLRW8ZRuj2flFj0fBv97tm95+HDeO/GiHjn7q55yDXGlHrUrFYXDzItb1es3R19au2LZO93n+v+1qd9iPdnrvd6jxwkHva7c5ou92JHORarkEAAQQQQAABBNwWYJu728Kc75bAlatrLBhxC3fA505kkl+bmi1cHHBYwiGAgKYCDLhr2jjSRgABBBBAAAEEBiVQMU17ULGIo65A48GHpPrDH6mboCaZMeCuSaNIEwEEENhHoNOxZHmlIvXNBlYIIIAAAgggEACBvQbOo5HwlVBINu5GEA1HLu9FM4iB8AC0xTcl7je8f68B/HbHOmFZdvyzGJZlD21vt4Z9g0QhCCCAAAIIINBXAba595WTwwYg8P4Hrv7ztAOogBB3BEZHhj8+et/0fYgggAACBxFgwP0gSlyDAAIIIIAAAggEVKCWy33eCoV+E9DyKXuXwMaLP5X67AImhxRgwP2QgNyOAAIIKCCw1WjuDLe3Wm0FsiEFBBBAAAEEELibgPPa893/uWGEmpGw8eHu/+xu28xDIVlhkxzPlN8Fri+uPvXZGm2RfLvT/tJn//O7DdCzld7vTwj1IYAAAggERcDZ5j41OS7JZCIoJVOnpgLO97GLV9c0zZ607yaQy43Mu/0WMOQRQMAfAgy4+6OPVIEAAggggAACCLgiUDbNR0Iil1w5nEO1Elh7/V1pscv/0D1jwP3QhByAAAIIeCpQKq9LqXzXJa2e5kVwBBBAAAEE/CTw2W3psWj4t7vri4QjvwqJ/HG6wYgavy4WzXf8ZEAtCOgmsLx846+slvUvdudt2dZfdCzrU5sZt1udB3Zfw7C8bp0mXwQQQAABPwokRxNSnByXcNjwY3nU5AOBavWmrN6o+aASSrgjMJYcfuvIwvQ5RBBAAIH9BBhw30+IP0cAAQQQQAABBAIsUDHNZ0Tk6QATULqINB58SKo//BEWfRBgwL0PiByBAAIIeCDQbG7vbG1v3t72IDohEUAAAQQQ0E8gEgm3I5Hw5p3Mdw+pf3ZzuhG1LrG5Tb8ekzECbgl8dsN827LO2raVuRPPsmS63emM3/n3DMm71QnORQABBBAIkgDb3IPUbf1qvXa9JPXNhn6Jk/GeAs53BvffvxCFCAEEENhPgAH3/YT4cwQQQAABBBBAIMAC5Xz+zZBtnw0wAaWLyMaLP5X67AIWfRBgwL0PiByBAAIIDFjA2RB0o7whlmUNODLhEEAAAQQQUENg97C6YYSakbDx4Z3MouHI5Tt/zaC6Gv0iCwSCLvDZbfKfHZDfvUXesuyh7e3WcNDNqB8BBBBAAIE7AtlMUnITaba580goJfDB767x3axSHelPMtl08tmZucL3+3MapyCAgF8FGHD3a2epCwEEEEAAAQQQ6INAxTSviMhcH47iCI0F1l5/V1q2xgUolDoD7go1g1QQQACBfQQ6HUuuLZWk0WhihQACCCCAgK8EDMOwY7HIhlNUJByuGIZcd/5692Z1I2r8ulg03/FV4RSDAAII7COwdHX1q7Ytk85ltki+3Wl/6c4t7Y51wrLsuPPv2RrPo4QAAggg4GeBaDQixclxGUns/J89Pgh4KuC8WfP3V1Y8zYHg7ggkEkOrx47N7vz/3nwQQACBvQQYcOfZQAABBBBAAAEEELirQC2dTluxWA2eYAs0HnxIqj/8UbAR+lh9fCgmC0f4rqaPpByFAAIIuCJQrzdkaaXCZiBXdDkUAQQQQMANgb2G1iPhyK9CImtOzOm5wnNuxOZMBBBAIMgCy8vLc1bLePSOQavTfuTOX+8eit/ebqcsy+K3+SA/LNSOAAIIaCaQm0jtbHPng4CXAqXyupTKO/98Nh8fCuRyqYf5h+t92FhKQqCPAvxNdB8xOQoBBBBAAAEEEPCTQKlQOGdY1ht+qolauhfYePGnUp9d6P5G7thT4PRJXorA44EAAgioKuBsbV+7UZP1jU1VUyQvBBBAAIGACeweXI9GwldCIdkIhYxaxDDeciiMqHWpWCwuBoyFchFAAAGtBXZvim9b1lnbtjJOQdutzgPOv1qWPbS93RrWukiSRwABBBDwhYCztMfZ5h6Px3xRD0XoJ/D7T1akeXtbv8TJ+EACY8nht44sTJ870MVchAACgRRgwD2QbadoBBBAAAEEEEBgf4FKPv+U2PaP97+SK/wssPb6u9Ky/Vzh4GtjwH3w5kREAAEEDiKw1WjK8kpFWq32QS7nGgQQQAABBA4tEItFbxlG6HYkHK4Yhlx3DoyGI5edf2Vw/dC8HIAAAgj4QmD3hniG4X3RUopAAAEEtBMwDEPMiZRks2Pa5U7Cegs4y0g+/Oia3kWQ/T0FIpFw+/77F6IwIYAAAnsJMODOs4EAAggggAACCCBwV4GKab4sIhfgCa5A48GHpPrDHwUXwKXKGXB3CZZjEUAAgUMI8KrbQ+BxKwIIIIDAXQU+O7y+e+v69FzhOdgQQAABBBDot8CdzfC2SL7daX/JOd+yZLrd6Yw7f91sbqf7HZPzEEAAAQSCI5BIxGVmKifhsBGcoqnUUwHnLZvOQhI+/hbIppPPzswVvu/vKqkOAQR6FWDAvVc57kMAAQQQQAABBHwuUM7n3wzZ9lmfl0l59xCoP/+CbJw+g1GfBRhw7zMoxyGAAAKHEGg2t3d+JOE1t4dA5FYEEEAggAKGYdixWGTDMELNSNj40CG4s3md4fUAPhCUjAACCGgmcLdB+HbHOmFZdrzd7oy2252IZiWRLgIIIIDAgAScbe5Tk+OSTCYGFJEwQRa4dr0k9c1GkAkCUfvoyPDHR++bvi8QxVIkAgh0LcCAe9dk3IAAAggggAACCARDoGKadjAqpcq9BEq/eFtuh8IA9VmAAfc+g3IcAggg0KNAtXpTbpQ3xLKsHk/gNgQQQAABvwo4r8iORMKbkXC4YhhyPWwY/9UIGf9kRI1fF4vmO36tm7oQQAABBBC4I7C8vDxntYxHnX/f6rQfcf71zjZ4huB5ThBAAAEE0qlRyZsZtrnzKLgm0OlY8uFH11w7n4PVEsjlRuaLxeKiWlmRDQIIqCDAgLsKXSAHBBBAAAEEEEBAMYFaLvd5KxT6jWJpkc4ABVpHj8vaT14aYMTghDpxbIYvfYPTbipFAAEFBVqttiytVKTRaCqYHSkhgAACCAxC4LMb2BlgH4Q6MRBAAAEE/CZwtyH4O5vgt7fbKcuymEXwW9OpBwEEENglEI1GZGYqJ/F4DBcE+i6wvrG58+ZNPsEQyKRGXpydLz4RjGqpEgEEuhHgbyq70eJaBBBAAAEEEEAgIAJl03wkJHIpIOVS5l0ENn/wrKx/8WFsXBCYm83LSCLuwskciQACCCCwn0C93tgZbmdr+35S/DkCCCCgv0AsFr1lGKHbsWj4t0410XDkcigkK1OzhYv6V0cFCCCAAAII6CGwvHzjr6yW9S8s2/qLjmXdd2cLvGXZQ9vbrWE9qiBLBBBAAIF7CeQmUpKbSIOEQF8Ffv/JijRvb/f1TA5TV8D5DufUqfmEuhmSGQIIeCXAgLtX8sRFAAEEEEAAAQQUFqiY5jMi8rTCKZKaywK1yz+XrZExl6ME83gG3IPZd6pGAAFvBZxX2jobf+qbDW8TIToCCCCAQF8F4vHYunOgM8QeChm1iGG8ZUSNXxeL5jt9DcRhCCCAAAIIIOCKwJ0t8LZIvt1pf8m2JdVqd+YZgHeFm0MRQAAB1wQSibhMTY6Ls9WdDwKHFXDewPnRx0uHPYb7NRPI5VIP832OZk0jXQQGIMCA+wCQCYEAAggggAACCOgmUM7n3wzZ9lnd8ibf/gjYybQsvfJqfw7jlD8TYMCdhwIBBBAYrMBWo7kz3O78MMIHAQQQQEA/gd2b2P80xG5dKhaLi/pVQ8YIIIAAAggg0I3AXhvgt7fbKcuymHXoBpNrEUAAAZcFDMPYGXJPJlnC7DK1749fXatKtVb3fZ0U+GmBseTwW0cWps/hggACCOwW4G/6eB4QQAABBBBAAAEE/kygYppXRGQOmmAKbD3+pNQeuxDM4gdQ9cxUji94B+BMCAQQQMDZ2l4qr/NjCI8CAgggoIFAJBJuRyLhzWgkfMUwjCtsYtegaaSIAAIIIICAAgJLV1e/atsy2eq0H3HS2W51HmD7uwKNIQUEEAi0QDo1KnkzI+GwEWgHiu9NwPlO19nebllWbwdwl7YCzndD99+/ENW2ABJHAAFXBBhwd4WVQxFAAAEEEEAAAX0Faul02orFavpWQOaHFVj/2SuyOZE/7DHcv4dAbiIluYk0PggggAACLgo0m9s7W9ubt7ddjMLRCCCAAALdCsTjsXXDCDUjYePDSDjyq5DI2vRc4bluz+F6BBBAAAEEEEBgP4E729/blnXWtq2MM/zu3NNsbvPF3H54/DkCCCBwSIFoNCLOsp94PHbIk7g9aALrG5s73+vyCabARCb5tanZwsVgVk/VCCBwNwEG3HkuEEAAAQQQQAABBD4lUCoUzhmW9QYswRVYe/1dadnBrd/tyhlwd1uY8xFAIOgCztb2Unkj6AzUjwACCHgmYBiGHYtFNpxt7KGQbETDkctG1Ph1sWi+41lSBEYAAQQQQAABBHYJLC8vz1kt49Hdw+9sfucRQQABBPovwO8h/Tf1+4nO9vZWq+33MqlvD4Hk6PB7C0envwAQAgggcEeAAXeeBQQQQAABBBBAAIFPCVRM8xkReRqWYAo0HnxIqj/8UTCLH1DV2UxSCvnsgKIRBgEEEAiOgPPDx7XrJba2B6flVIoAAh4L7B5kNwzjSsQw3jKi1qVisbjocWqERwABBBBAAAEEehbYvfndsqz5Vrsz3253RtvtTqTnQ7kRAQQQCLBAIhHf2eYeDhsBVqD0gwiwvf0gSv6+JhIJt++/fyHq7yqpDgEEuhFgwL0bLa5FAAEEEEAAAQQCIFAxzZdF5EIASqXEuwhs/uBZWf/iw9i4KOB8mTs/m3cxAkcjgAACwROoVm/KjfKGWJYVvOKpGAEEEHBZgEF2l4E5HgEEEEAAAQS0EVi6uvpVy5bPtzvtL1mWTLc7nfFmczutTQEkigACCHgkYBiGTE2OSzKZ8CgDwuogwPZ2Hbrkfo4TmeTXpmYLF92PRAQEENBBgAF3HbpEjggggAACCCCAwAAFKqb5nog8MMCQhFJIoPLaL+VWdEihjPyXCgPu/uspFSGAgHcCnY4l15ZK0mg0vUuCyAgggICPBOLx2HokHK4YhlyPhiOX2cjuo+ZSCgIIIIAAAgi4JnC3re/b2+2UZVnMY7imzsEIIKCjgPOG29xEmm3uOjbP5ZzZ3u4ysEbHJ0eH31s4Ov0FjVImVQQQcFGAv6FyEZejEUAAAQQQQAABHQUqpmnrmDc590fg+n9+tz8HccqeAs6mkpPHZxBCAAEEEDikQL3ekKWVClvbD+nI7QggEEwB55XPsVikHAkbH0bCkV+Fo8arxaL5TjA1qBoBBBBAAAEEEHBP4Pri6lOWbf1Fx7Lu2251Hmi3O6PtdifiXkRORgABBNQWiA/FpDg5LvF4TO1EyW6gAmxvHyi30sGc76zuv38hqnSSJIcAAgMTYMB9YNQEQgABBBBAAAEE1Beo5XKft0Kh36ifKRm6IbD1+JNSe+yCG0dz5mcETp+cwwQBBBBAoEcBZ2v78kpF6puNHk/gNgQQQCBYAs5W9mgkfMUwjCsRw3hreq7wXLAEqBYBBBBAAAEEEFBPgMF39XpCRgggMDgBZxFQIZ+RdGp0cEGJpKxAtXpTVm/UlM2PxAYvMJFJfm1qtnBx8JGJiAACqgkw4K5aR8gHAQQQQAABBBDwUKCcy30jFAq95GEKhPZQYOPFn0p9dsHDDIIT+tjRKYlGWdQUnI5TKQII9Etgq9GUa9dLbG3vFyjnIICArwScDVeRSHgzFg3/lq3svmotxSCAAAIIIIBAgAQ+O/i+vd1OWZbFXEeAngFKRSBIAsnRxM4293DYCFLZ1LpLwFlm4mxvtywLFwT+KDCWHH7ryML0OUgQQAAB/kaIZwABBBBAAAEEEEDgjwIV03xGRJ6GJJgCpV+8LbdD4WAWP+Cq52bzMpKIDzgq4RBAAAF9BZwfOkrldanW6voWQeYIIIBAHwWcYfZYwn1SxQAAIABJREFULFKOhI0Po+HIZSNqXSoWi4t9DMFRCCCAAAIIIIAAAooILC8vz1kt49G2ZZ3tdKzPtTud8WZzO61IeqSBAAIIHErAWQY0M5WTeDx2qHO4WU+B1bUq3/nq2TpXs47FordOnZpPuBqEwxFAQAsBBty1aBNJIoAAAggggAACgxEo5/Nvhmz77GCiEUUlATuZlqVXXlUpJV/n4nxZm0zyvYyvm0xxCCDQNwFna/vySkVarXbfzuQgBBBAQCcB50e9WDSyHA4b/yViGG9NzxWe0yl/ckUAAQQQQAABBBBwR2B5+cZfdVrWv2532l9qd6wT29vtiXa7w2sj3eHmVAQQcFkgN5GS3AT/7I7LzEod73zvu3h1TamcSEYdgVwu9XCxaL6jTkZkggACXggw4O6FOjERQAABBBBAAAFFBSqmuS4iKUXTIy0XBbYef1Jqj11wMQJH7xbgi1qeBwQQQOBgAmzwOZgTVyGAgH8EGGb3Ty+pBAEEEEAAAQQQ8Erg+uLqU862d8uy5lvtzjzb3r3qBHERQKBbgUQivrPNPRw2ur2V6zUTcN7Y+fsrKyw10axvg0w3NTZyef5I8dFBxiQWAgioJ8CAu3o9ISMEEEAAAQQQQMATgVo6nbZisZonwQnqucDGiz+V+uyC53kEJYF0alSKk+NBKZc6EUAAga4Fms3tna3tzdvbXd/LDQgggIAuApFIuB2LRcrRSOT/YTO7Ll0jTwQQQAABBBBAQE+B3dvet1udB7a32ynLspgX0bOdZI2ArwUMw5CpyXHeguvrLouw2MTnDe5DeYnE0OqxY7OTfTiKIxBAQGMB/oZF4+aROgIIIIAAAggg0E+BUqFwzrCsN/p5JmfpI1D6xdtyOxTWJ2HNM3W2kMzP5jWvgvQRQAABdwRK5XUplTfcOZxTEUAAAY8EDMOw4/HoWiRsfBgNRy4bUetSsVhc9CgdwiKAAAIIIIAAAgggIMvLy3NWy3i01Wk/0u5YJ7a32xPtdicCDQIIIKCCQDaTlNxEmm3uKjSjzzlsNZqyeHWtz6dynB8FHnjgGLOtfmwsNSHQhQD/I9AFFpcigAACCCCAAAJ+FqiY5jMi8rSfa6S2uwvYybQsvfIqPAMUcDaQnDw+M8CIhEIAAQTUF2Bru/o9IkMEEDi4QDweW49Fw7+NhCO/CkeNV4tF852D382VCCCAAAIIIIAAAgh4I7B76N2yZHq71S5ub7eGvcmGqAggEHSB+FBs52248Xgs6BS+qb/TseSjj5fEsizf1EQh7glk08lnZ+YK33cvAicjgIDqAgy4q94h8kMAAQQQQAABBAYkUDHNl0XkwoDCEUYhga3Hn5TaY7R+0C05fXJu0CGJhwACCCgrwNZ2ZVtDYgggcACBWCx6KxaNLIfDxn+Jho2/m5otXDzAbVyCAAIIIIAAAggggIA2AtcXV59qW9bZTsf6HEPv2rSNRBHwjUDBzEg2O+abeoJcyO8/WZHm7e0gE1B7FwLJ0eH3Fo5Of6GLW7gUAQR8JsCAu88aSjkIIIAAAggggECvAhXTfE9EHuj1fu7TV2DjxZ9KfXZB3wI0zXxuNi8jibim2ZM2Aggg0B+BVqst166X+FGjP5ycggACAxAwDMOOxSIbznb2aDhy2Yhal4rF4uIAQhMCAQQQQAABBBBAAAGlBJyh91an/Ui7Y53Y3m5PtNudiFIJkgwCCPhKIJGIy9TkuESj/E+Nro1dXqnI+samrumT9z0EnOUPbrzxJRIJt++/fyEKPgIIBFeAAffg9p7KEUAAAQQQQACBTwlUTNOGJJgCldd+KbeiQ8Es3sOqnddqplOjHmZAaAQQQMBbgWr1ptwob/A6Wm/bQHQEENhHwPkhLT4UW4xGjDfDhvGf2c7OI4MAAggggAACCCCAwN0FlpeX56yW8eidofdms5W3LIuZFB4YBBDom4BhGP8/e3cfG/d93wn+y+FwOHwSKcscjseySElWtY6byP3nmkWdWsDhdgPsGbFxKBzkHzubXNE/Dom9SdH4roVdJLtJu+1GwS6Q/JFsEuSwbRBs4uKQZNuksZLaRXHAwT7cLgwjsSUq8piWNCIpksPhcPibw6hwNg9+4MM8/B5eBIoE0O/7/b4/r8+EYocffSeU5w773UrXRPu3Uee94KUry/070El9FZidnX5PY7P579fWN+/p9sGdvSuV0jPd3td+BAgkQ8D/M5GMPklJgAABAgQIEOipwPLs7D3R0NBzPT3E5rEVuPy9Z2ObLc3BZm+dDrO3zqS5RLURIEDgDQU6t7a/8mot1OsNQgQIEIidQLFYWBnJD18cyef/y/BI9AW3s8euRQIRIECAAAECBAgkSKBavXLvznb0L1o7rX/a3N4502g0vSGaoP6JSiCuAlOT46FzidDwcC6uEeX6OYHOre2d29t9pVOg817a6dPzhzv/0K1W27zQ7X/cdnh64kvHFiofTqeeqggQeDsBA+5vJ+TPCRAgQIAAAQIZELg2O/vI0NDQlzNQqhJ/SWDj/gfD8kc+zmUAAp2P01w4NjeAkx1JgACBwQm4tX1w9k4mQOBXBXK5XLtYHHktP5x7cWQ4/9TR+fI5TgQIECBAgAABAgQI9FbglUtLD23vRO/f2Yne2dxuVZrN7bHenmh3AgTSKNC5zf32246EqanxNJaXmpoMt6emlW9ayC0zU5+5Y778eOeBny4uffr6ytonuln15MTYSyfvPHpnN/e0FwECyREw4J6cXklKgAABAgQIEOiZQK1UejKE8ETPDrBxbAXWPvf5sPqOd8U2X5qDdd58/Se/dkeaS1QbAQIEfibg1nYvBgIE4iCQzw+3iqOFxeHh3P83Mpz7y9uPlb8eh1wyECBAgAABAgQIEMiyQOfG12g79+D2TuuBzi3vzWZrutu3v2bZV+0E0i7gNvf4dthwe3x7061knffa7r77xMjP7/fjH196tV7fKvfyjG7tbR8CBOIvYMA9/j2SkAABAgQIECDQc4Frc3Pnh9rt+3p+kANiJ7D81HfDxsSh2OXKSqBTJ28PIyP5rJSrTgIEMirg1vaMNl7ZBGIg8PpA+0g+dz5fyH+lUik9E4NYIhAgQIAAAQIECBAg8DYCnVved6Lof9puRWfd8u7lQoDA2wl0LhQqzx0OM9OTb/eoP++TgOH2PkEP+JhDU2M/PH7i6Nmfj1GtXrm3Vlv7UTf/sdrs7PR7vK834GY7nsCABAy4DwjesQQIECBAgACBOAnUSqWVEMJ0nDLJ0h+B6vf/PkTtdn8Oc8qvCMwfmwsT40UyBAgQSKWAW9tT2VZFEYi1QKEwsjlayL+YH879PwbaY90q4QgQIECAAAECBAjsSaBzy/vOdu73Wjutf9q55b3RaM7saQMPEyCQCYHx8WK4/bYjLhYacLcNtw+4AX08/s0Gzy9eqH5r9cbGA92KMn1o4qmF45UHu7WffQgQSI6AAffk9EpSAgQIECBAgEBPBJZnZmaiQmG5J5vbNNYC2yd/Lbz2hS/HOmPaw83eOh1mb/W7mLT3WX0Esijg1vYsdl3NBPov8PpA+0g+/1+GR6IvVCqVxf6ncCIBAgQIECBAgAABAoMQ6Nzyvr0TvX+71Xp3o7E9182bYgdRjzMJEOiOQOc29yO3TPndS3c497zL0mvXw/XltT2vsyB5AuPjo0unTh277c2Sv/ji4nK3/kHa5MTYSyfvPHpn8pQkJkDgoAIG3A8qaD0BAgQIECBAIOECV8vls7koejrhZYi/D4GND/5uWP7Aw/tYaUm3BDq3iSwcm+vWdvYhQIDAwAXc2j7wFghAINUC+fxwqzhaWCyM5L9hoD3VrVYcAQIECBAgQIAAgT0LVKtX7m01W49st6Kzja3mfKu1k9/zJhYQIJAagZGRfKjcdsSn6Papozs7Uai+Wgtr6/U+neiYQQvcMjP1mTvmy4+/WY7O38tXr67+XTdydt4TvPvuEyPd2MseBAgkS8CAe7L6JS0BAgQIECBAoOsCtVLpyRDCE13f2IaxF1j73OfD6jveFfucaQ7YuUnkn/zaHWkuUW0ECGRIwK3tGWq2Ugn0SeD1gfaRfO58vpD/SqVSeqZPRzuGAAECBAgQIECAAIGEC1Sr1fmd7dzvbbda791qtk43m9tjCS9JfAIE9iEwNTkeynOHQ2fg3VdvBBqNZvjpK1dD5/ITX9kQ2O3A+YWXL5+/sbZ5XzdUZmen3+O9wW5I2oNAsgQMuCerX9ISIECAAAECBLoucL1Ueqodwvu6vrENYy9Q+84PwubIaOxzpj3gqZO3e2M17U1WH4GUC7i1PeUNVh6BPgrkcrl2sTjy2uhI/tsG2vsI7ygCBAgQIECAAAECGRAw8J6BJiuRwJsIdC4bOnLLVLjl8KEwPJzj1EWBq9dWwtVrq13c0VZJEJiaHHv+xMmjv7GbrC+8cLHejX9kdnh64kvHFiof3s2ZniFAID0CBtzT00uVECBAgAABAgT2JVArlZ4PIZzZ12KLEi1Q/f7fh6jdTnQNaQjf+YjMmenJNJSiBgIEMijg1vYMNl3JBLosMD4+ujSSz//DyHDuL28/Vv56l7e3HQECBAgQIECAAAECBN5Q4PWB99ZO6582t3fONBrNGVQECKRboDPo3rnN3e9kDt7nzq3tS1eWQ73eOPhmdkicwK2Hp96/2/fxLi8uPVpbWfvsQYvcy1D9Qc+yngCB+AgYcI9PLyQhQIAAAQIECAxEoFYqmXAeiPxgD90++WvhtS98ebAhnH5ToPNGamfI3RcBAgSSJND5BUb11VpobDWTFFtWAgRiIFAojGwWR/P/98hw/qmj8+VzMYgkAgECBAgQIECAAAECBG4KdIbwmq3Ww1vN1ulu3DaLlQCBeAqMjOTD7K3TBt330Z6dnShcX77h1vZ92KVlSee9vbvuWhjfSz0vv3T5ubX1zXv2suaXn93PuQc5z1oCBOIhYMA9Hn2QggABAgQIECAwEIGr5fLZXBQ9PZDDHTpQgY0P/m5Y/sDDA83g8H8U6LyReurk7TgIECCQGAEfO5uYVglKIBYC+fxwqzhaWCyM5L8xPBJ9oVKpLMYimBAECBAgQIAAAQIECBB4C4HXb3jfbrXea+DdS4VAOgXGx4s3B90nxovpLLDLVa2srt8cbN/ebnV5Z9slSWD60MRTC8crD+4lc+fv1OXlxk9arZ38Xtb98rNnzpwy63oQQGsJJFDA/+gT2DSRCRAgQIAAAQLdErg2O/vI0NCQa7y7BZqgfdY+9/mw+o53JShxuqN2Btw7g+6+CBAgEGcBt7bHuTuyEYiXwPj46NJIPv8PhdH8n1cqpWfilU4aAgQIECBAgAABAgQI7F3g5wfeNxvNXz/okN7eE1hBgECvBDqD7jPTE250fxPgjXrj5mB7vd7oVQvsmyCB2dnp9+zn/b6fLi59+vrK2icOUuqRmanHfCLkQQStJZA8AQPuyeuZxAQIECBAgACBrgnUZmfPhaGhj3ZtQxslRqD2nR+EzZHRxORNe9DKbUe8cZr2JquPQIIFfOxsgpsnOoE+CXQ+Ini0kH+xkM9/1S+Z+oTuGAIECBAgQIAAAQIEBipQrV65t9VsPbLdis42tprzBt4H2g6HE+iKQOcios6N7jPTk13ZL+mbdG5sX1ndMNie9EZ2MX/nPcC77loY3++WP/7xpVfr9a3yftfv5/b4/Z5lHQEC8RAw4B6PPkhBgAABAgQIEBiIwLW5ufND7fZ9AzncoQMVeO37z4bt9kAjOPznBDpvlnaG3H0RIEAgbgKd23mqr9Z87GzcGiMPgQEL5HK5drE48troSP7b+UL+K/u5tWnAJTieAAECBAgQIECAAAECXRV45dLSQ9s70fu3W613Nxrbc1EUmcfpqrDNCPRPIJfLhSO3TN0cdM/ap+92LjtZXV0PteU17wn37yWXmJMOOmDe+TSUWm3zwn7/jpycGHvp5J1H70wMmKAECBxYwA/UBya0AQECBAgQIEAguQK1UmklhDCd3Aok349Ae2omvPLNb+9nqTU9Eui8QXrq5O092t22BAgQ2LtA5xcZV6+thOvLa3tfbAUBAqkUcEt7KtuqKAIECBAgQIAAAQIEeiRweXHp0e2d1gONrdb/0Gxuj/XoGNsSINBjganJ8TAzPRGmpvZ9aXWPE3Zn+7W1elhb3wydW9t9EXgzgdnZ6fcc9KKLixeq31q9sfHAfpTz+eHW3XefGNnPWmsIEEimgAH3ZPZNagIECBAgQIDAgQWWy+WFKIouHHgjGyROYOP+B8PyRz6euNxpD3xi4bZQLBbSXqb6CBBIgEDnlxmvvFoLURQlIK2IBAj0UmB8fHTJLe29FLY3AQIECBAgQIAAAQJZEOjcWLuznfu95nbrdxpbzflWayefhbrVSCBNAp1b3TuD7p1b3dPyu5zOp3e+Pti+vd1KU7vU0gOBzuUXd9210JV/6fHii4vLjUZzZj8xz5w5Zd51P3DWEEiogP/BJ7RxYhMgQIAAAQIEDipwtVw+m4uipw+6j/XJE1j/5GfCyrvfk7zgKU9cLh0Ot9xyKOVVKo8AgTgLdG5tr75aC2vr9TjHlI0AgR4KdG5BGisW/utIPv9f7pgvP97Do2xNgAABAgQIECBAgACBzAq8cmnpoe2d6P3brda76/WtcmYhFE4goQKdT+WdmhwLE+PFRN3s3hli7wy11+tb4cZa3QUnCX39DSr2oamxHx4/cfRsN86vVq/ce/Xq6t/tZ68jM1OPHZ0vn9vPWmsIEEiegAH35PVMYgIECBAgQIBAVwRqpdKTIYQnurKZTRIlsPqlr4W1YycSlTkLYYujhXDi+G1ZKFWNBAjEUOD69RvhyrVVv9SIYW9EItBrgc7tS2PFwl+PDOf+8vZj5a/3+jz7EyBAgAABAgQIECBAgMAvCvx0cenT263WezcbzV93u7tXB4HkCUxNjoeJ8dEwWizcHHqPy1dnmH2r0QyNre2bg+1uaY9LZ5KZ49bDU+/v5nuHF16+fP7G2uZ9e9WYPjTx1MLxyoN7Xed5AgSSKWDAPZl9k5oAAQIECBAgcGCB66XSU+0Q3nfgjWyQOIHad34QNkdGE5c7C4FPn7ojDA/nslCqGgkQiIlA55car7xaC/V6IyaJxCBAoNcCuVyuXSyOvDY6kv92vhA+WalUFnt9pv0JECBAgAABAgQIECBAYHcCnVttm1utj7ndfXdeniIQR4Hx8WIojo6EYrEQOre9dy446tXvfjrv7za3WzeH1//xhvatn/33ONrIlEyBzqc+3n33iZFup3/hhYv1ZnN7bC/7Tk6MvXTyzqN37mWNZwkQSK6AAffk9k5yAgQIECBAgMCBBGql0vMhhDMH2sTiRApUv//3IWq3E5k97aErtx0JM9OTaS9TfQQIxETg6rWVcPXaakzSiEGAQC8FOr+EKo4WFgsj+W/cMV9+vJdn2ZsAAQIECBAgQIAAAQIEuifgdvfuWdqJwKAFOoPvna/hXC4Ui3ubFd7e3rk5yP76lwtLBt3NbJ3fq6Hyy4tLj9ZW1j67F81isbBy+vT84b2s8SwBAskVMOCe3N5JToAAAQIECBA4kECtVDLhfCDB5C6+/L1nkxs+5ck7H2N5x9HZlFepPAIEBi3Q+Tja115bDo2t5qCjOJ8AgR4KFAojm6OF/IujI/nPdPPjg3sY2dYECBAgQIAAAQIECBAg8BYCr1xaemh7J3r/VnP7bKPRnIFFgAABAgT6IXDLzNRnenVpxssvXX5ubX3znr3UcebMKTOvewHzLIEEC/gfe4KbJzoBAgQIECBAYL8CV8vls7koenq/661LrsDG/Q+G5Y98PLkFZCD56VN39OyjKjPAp0QCBN5CYGcnCp1b268vr3EiQCClAp2h9rFi4a8Lo/k/r1RKz6S0TGURIECAAAECBAgQIEAg8wLVanW+1Qx/tN2KztY3t05EUWT+J/OvCgAECBDojcDs7MRCpVJZ7MXunb/PlpcbP2m1dvK73X92dvo93vvcrZbnCCRbwA+4ye6f9AQIECBAgACBfQlcm519ZGho6Mv7WmxRogXWP/aJsPLe+xNdQ9rDV247EmamJ9NepvoIEOizwNpaPbzyai1EUdTnkx1HgECvBcbHR5dGR/LfzhfCJ3v1i6Ze12B/AgQIECBAgAABAgQIEDiYwOXFpUebrdbDm43mr+9lSPBgp1pNgAABAmkX6FyocdddC+O9rPOni0ufvr6y9ondnnFkZuqxo/Plc7t93nMECCRXwIB7cnsnOQECBAgQIEBg3wK12dlzYWjoo/vewMLECqx97vNh9R3vSmz+LASfmhwPdxydzUKpaiRAoA8C29utm4Pt9XqjD6c5ggCBfgjkcrl2sTjymqH2fmg7gwABAgQIECBAgAABAskTeOXS0kPbO9H7NxvNf95sbo8lrwKJCRAgQCAuAoemxn54/MTRs73O8+MfX3q1Xt8q7+acfmXaTRbPECDQWwED7r31tTsBAgQIECBAIJYC1+bmzg+12/fFMpxQPRVYfuq7YWPiUE/PsPnBBU6dvD2MjOz6k/gOfqAdCBBIpcDVayuhdn3Nre2p7K6isibQGWofHxt9uTCS/8Yd8+XHs1a/egkQIECAAAECBAgQIEBgfwLV6pV7W83WI1vbrX+x28HB/Z1kFQECBAikUaBft6VXq9X5Wm3zQhRFbzvPOjkx9tLJO4/emUZvNREg8IsCb/sNARgBAgQIECBAgED6BGql0koIYTp9lano7QRq3/lB2BwZfbvH/PmABcqlw+GWW/xDhAG3wfEEEiuwUW+E6qu10Lm93RcBAskVMNSe3N5JToAAAQIECBAgQIAAgTgKdIYHW83wR9ut6Gx9c+vEboYI41iHTAQIECDQP4EzZ071bb704oXqt1ZvbDzwdtUVi4WV06fnD7/dc/6cAIHkC/TtG1DyqVRAgAABAgQIEEiHwHK5vBBF0YV0VKOKvQpc/t6ze13i+QEIdG5v79zi7osAAQJ7EdjZicJrV5bDyur6XpZ5lgCBGAkYao9RM0QhQIAAAQIECBAgQIBAygV+urj06eZ263cMu6e80cojQIDAPgUGMUj+4ouLy41Gc+atInfeQ33nO0/m9lmWZQQIJEjAgHuCmiUqAQIECBAgQKAbAtdKpQeGQvhWN/ayR/IEDLgnp2cnFm4LxWIhOYElJUBgoALXr98IV66thiiKBprD4QQI7F3AUPvezawgQIAAAQIECBAgQIAAge4KdIbdt1ut9242mr/eau3ku7u73QgQIEAgiQKHpsZ+ePzE0bP9zF6tXrn36tXVv3u7M/t5s/zbZfHnBAj0TsCAe+9s7UyAAAECBAgQiKVArVR6MoTwRCzDCdVTgY37HwzLH/l4T8+wefcEZqYnQ+W2I93b0E4ECKRSoNFohqUry6Feb6SyPkURSKuAofa0dlZdBAgQIECAAAECBAgQSL7AK5eWHtrabn3CsHvye6kCAgQIHETglpmpz9wxX378IHvsZ+2Fly+fv7G2ed9brT0yM/XY0fnyuf3sbw0BAskRMOCenF5JSoAAAQIECBDoisD1Uumpdgjv68pmNkmUwMYHfzcsf+DhRGXOcthcLhdOnbw9DA/7hL0svw7UTuDNBHZ2onD12kq4vrwGiQCBhAgYak9Io8QkQIAAAQIECBAgQIAAgZ8JGHb3YiBAgEB2BWZnJxYqlcriIAReeOFivdncHnuzsw24D6IrziTQfwED7v03dyIBAgQIECBAYKACtVLpYghhfqAhHD4QgbXPfT6svuNdAznbofsTKJcOh1tuObS/xVYRIJBagZXV9bD02nKIoii1NSqMQJoEJifGXiqM5L8xiNuO0uSoFgIECBAgQIAAAQIECBAYrIBh98H6O50AAQL9FMjnh1t3331ipJ9n/vxZlxeXHq2trH32zc4/NDX2w+Mnjp4dVD7nEiDQHwED7v1xdgoBAgQIECBAIDYCtVKpHZswgvRVYPVLXwtrx0709UyHHUxgZCR/8xZ3XwQIEOgINBrNsHRlOdTrDSAECMRcYHx8dGl0JP/tfCF8clC3HMWcSDwCBAgQIECAAAECBAgQSLCAYfcEN090AgQI7EKgc2nHyTuP3rmLR3v2yMsvXX5ubX3znjc6wIB7z9htTCBWAgbcY9UOYQgQIECAAAECvRW4Wi6fzUXR0709xe5xFah95wdhc2Q0rvHkehOBO26fDVNT43wIEMiwwM5OFK5eWwnXl9cyrKB0AvEXKBRGNifGCv/JUHv8eyUhAQIECBAgQIAAAQIECHRPoDPs3mi2/nV9c+tEFEXmkLpHaycCBAgMTGD60MRTC8crDw4sQAihWq3OLy83ftJq7eR/OUexWFg5fXr+8CDzOZsAgd4L+MGy98ZOIECAAAECBAjERqA2N/doaLff9KO8YhNUkJ4IGHDvCWvPNx0fL4aFY3M9P8cBBAjEU2BldT0svbYcoiiKZ0CpCGRcoDPUPlYs/HVhNP/nlUrpmYxzKJ8AAQIECBAgQIAAAQIEMi7w08WlTze3W79j2D3jLwTlEyCQeIEjM1OPHZ0vnxt0IZcXlx6traz9ynyDAfdBd8b5BPojYMC9P85OIUCAAAECBAjEQqA2O3suDA19NBZhhOi7wOXvPdv3Mx3YHYH5Y3NhYrzYnc3sQoBAIgQajWZYurIc6vVGIvIKSSBLAvn8cGusWPivoyP5z9x+rPz1LNWuVgIECBAgQIAAAQIECBAgsFuBzrB7o9l8pF7fKu92jecIECBAIB4CZ86cis1c6Y9/fOnVN/q7JE4Z49E1KQikTyA234jSR6siAgQIECBAgED8BK7NzZ0farfvi18yifohYMC9H8q9OcMt7r1xtSuBOArs7EThtSvLoXNzuy8CBOIjkMvl2uNjoy8XRvLfuGO+/Hh8kklCgAABAgQIECBAgAABAgTiLVCtVudbzfBHm1vb/0uj0ZyJd1ru6oV1AAAgAElEQVTpCBAgQKDzqZV33bUwHheJzt8jtdrmhSiKfmHW1YB7XDokB4HeCRhw752tnQkQIECAAAECsROolUrt2IUSqC8C9d/8rXD9U3/al7Mc0huBUydvDyMj+d5sblcCBGIhcP36jXDl2mqIoigWeYQgQCCE8fHRpdGR/LePLVQ+zIMAAQIECBAgQIAAAQIECBA4mEC1euXe5lbrY5uN5j9vNrfHDrab1QQIECDQC4HOe6KnTh27rRd773fPSxerX1xe3fjQz6+fnZ1+T6VSema/e1pHgED8BQy4x79HEhIgQIAAAQIEuiKwXC4vRFF0oSub2SRxAhv3PxiWP/LxxOUW+L8LzExPhsptR5AQIJBCgY16I1RfrYXt7VYKq1MSgeQJdG4oGisW/rowmv9zvyBJXv8kJkCAAAECBAgQIECAAIFkCLxyaemhre3WJzYbzV9vtXbc7pKMtklJgEAGBA5Njf3w+ImjZ+NW6osvLi7//CeBHJmZeuzofPlc3HLKQ4BA9wQMuHfP0k4ECBAgQIAAgVgLXCuVHhgK4VuxDilczwQMuPeMtq8bn1i4LRSLhb6e6TACBHon0BloX3ptOayt13t3iJ0JENiVQC6Xa0+Mj/6/oyP5z9x+rPz1XS3yEAECBAgQIECAAAECBAgQINAVgZ8uLn26ud36nfWNzZNd2dAmBAgQILBvgbgOjnc+BaRWW/tRFEU3Z17jmnPf8BYSIPArAgbcvSgIECBAgAABAhkRqJVKT4YQnshIucr8JYG1z30+rL7jXVwSLjA+XgwLx+YSXoX4BAjs7ETh+vKNcPXaKgwCBAYs0Pm43WKh8JU75suPDziK4wkQIECAAAECBAgQIECAQOYFqtXqfKsZ/mhjs/mBZnN7LPMgAAgQIDAAgdnZ6ffE9ZMtL7x8+fyNtc37OixxvWl+AC1zJIHUChhwT21rFUaAAAECBAgQ+EWB66XSU+0Q3sclmwIG3NPT9/ljc2FivJieglRCIGMCK6vrN29tj6IoY5Url0B8BAqFkc2xYuGvC6Ph0UqlshifZJIQIECAAAECBAgQIECAAAECrwt0buptbDb//Waj+eut1k6eDAECBAj0R+DMmVOxnil94YWL9c4/gjLg3p/Xg1MIDFIg1t+MBgnjbAIECBAgQIBA2gRqpdLFEMJ82upSz+4EVr/0tbB27MTuHvZUrAXc4h7r9ghH4E0FNuqN8Npry6Gx1aREgMAABHK5XHt8bPTlYiH/f9x+rPz1AURwJAECBAgQIECAAAECBAgQILBPgZ8uLn26ud36nfWNzZP73MIyAgQIENiFQOdykLvuWhjfxaMDe+SVS0sPXVte+0sD7gNrgYMJ9E3AgHvfqB1EgAABAgQIEBisQK1Uag82gdMHKVD7zg/C5sjoICM4u4sClduOhJnpyS7uaCsCBHolsL3dunlj+9p6vVdH2JcAgbcQKBYLK2OjI//52ELlw6AIECBAgAABAgQIECBAgACBZAtUq9X55lY4t9lo/vPO7b3JrkZ6AgQIxE9gfHx06dSpY7fFL9kvJnr5pcvPbbd2Fk6fnj8c96zyESCwfwED7vu3s5IAAQIECBAgkBiBq+Xy2VwUPZ2YwIJ2XcCAe9dJB7rhyEg+nFi4LQwP5waaw+EECLy5wM5OFK5eWwnXl9cwESDQZ4F8frg1PlZ4drRY+MNKpfRMn493HAECBAgQIECAAAECBAgQINAHgc4Nvo1m61/XN7dORFFk/qkP5o4gQCD9Akm5Fb3zD54269Hfnrzz6J3p74oKCWRXwA942e29ygkQIECAAIEMCdTm5h4N7fZnM1SyUn9J4Orf/ChsDQ1zSZHA7K3TYfbWmRRVpBQC6RHoDLbXrq+FKIrSU5RKCCRAoHO7ULFQ+Mod8+XHExBXRAIECBAgQIAAAQIECBAgQKALAp0hx1Yz/NHGZvMDbnXvAqgtCBDItMDh6YkvJeXTMDvf/yuVymKmG6Z4AikXMOCe8gYrjwABAgQIECDQEajNzp4LQ0MfpZFdgcvfeza7xae48lMnbw+d29x9ESAQD4GV1fVw9dpq2N5uxSOQFAQyIOC29gw0WYkECBAgQIAAAQIECBAgQGCXAm513yWUxwgQIPAmAkdmph47Ol8+B4gAAQJxEDDgHocuyECAAAECBAgQ6LHAtbm580Pt9n09Psb2MRYw4B7j5hwg2vh4MSwcmzvADpYSINANgY164+Zge73e6MZ29iBAYBcCbmvfBZJHCBAgQIAAAQIECBAgQIBARgXc6p7RxiubAIEDC8zOTr+nUik9c+CNbECAAIEuCBhw7wKiLQgQIECAAAECcReolUrtuGeUr7cCBtx76zvI3culw+GWWw4NMoKzCWRWoHNT+yuv1gy2Z/YVoPB+C7itvd/iziNAgAABAgQIECBAgAABAskXcKt78nuoAgIE+idw5swp86T943YSAQJvI+AbkpcIAQIECBAgQCDlAsvl8kIURRdSXqby3kJg++Svhde+8GVGKRXI5XLh5PHbwshIPqUVKotA/AQ6g+2dG9tXVtfjF04iAikUcFt7CpuqJAIECBAgQIAAAQIECBAg0GeBzq3uza1wbqPe+J9brR1vqPfZ33EECMRfIJfLtd/5zpO5+CeVkACBrAgYcM9Kp9VJgAABAgQIZFbgWqn0wFAI38osgMLDxv0PhuWPfJxEigXGx4th4dhciitUGoF4COzsROH68o1Qu74WoiiKRygpCKRUwG3tKW2ssggQIECAAAECBAgQIECAQAwELi8uPbrZbP5Bvb5VjkEcEQgQIBALgWKxsHL69PzhWIQRggABAiEEA+5eBgQIECBAgACBlAvUSqUnQwhPpLxM5b2FgAH3bLw8yqXD4ZZbDmWjWFUS6LOAwfY+gzsu0wKdX6KMjY7852MLlQ9nGkLxBAgQIECAAAECBAgQIECAQM8FqtUr9241mp9a39j67SiKzFD1XNwBBAjEWcCAe5y7IxuBbAr44SybfVc1AQIECBAgkCGBa3Nz54fa7fsyVLJSf0nAgHs2XhK5XO7mLe7FYiEbBauSQJ8EVlbXw9Vrq2F7u9WnEx1DIHsCnY++HR8bfXlsvPBIpVJ6JnsCKiZAgAABAgQIECBAgAABAgQGLXDpYvWLG5vNDzSb22ODzuJ8AgQIDELg0NTYD4+fOHp2EGc7kwABAm8kYMDd64IAAQIECBAgkHKBWql0MYQwn/IylfcWAgbcs/PyKI4WwvyxuTA8nMtO0Sol0CMBg+09grUtgZ8TyOeHW1MTxa/mC+GTlUplEQ4BAgQIECBAgAABAgQIECBAYNAClxeXHt3abv1v6xubJwedxfkECBDop4AB935qO4sAgd0IGHDfjZJnCBAgQIAAAQIJFViemZmJCoXlhMYXu0sCa5/7fFh9x7u6tJtt4i4wMz0ZKrcdiXtM+QjEVmBtrR6Wriy7sT22HRIsDQKTE2MvjY7k/8PR+fK5NNSjBgIECBAgQIAAAQIECBAgQCB9AtXqlXu3Gs1PrW9s/XYURear0tdiFREg8EsC04cmnlo4XnkQDAECBOIi4AewuHRCDgIECBAgQIBADwSulstnc1H0dA+2tmWCBAy4J6hZXYraGXDvDLr7IkBg9wIb9Ua4em011OuN3S/yJAECuxbI5XLtyYnRH40WC39YqZSe2fVCDxIgQIAAAQIECBAgQIAAAQIEBihQrVbnW83wR2sbjYdbrZ38AKM4mgABAj0VODIz9ZhLSXpKbHMCBPYoYMB9j2AeJ0CAAAECBAgkSaA2N/doaLc/m6TMsnZfwIB7903jvmMulwsLx+ZCsViIe1T5CAxcwGD7wFsgQMoFCoWRzYmxwn86tlD5cMpLVR4BAgQIECBAgAABAgQIECCQcoGfLi59ut7Y+r1GozmT8lKVR4BABgUMuGew6UomEHMBA+4xb5B4BAgQIECAAIGDCNRKpa+EEB4+yB7WJl/AgHvye7ifCkZG8uHEwm1heDi3n+XWEEi9gMH21LdYgQMWmJwYe2l0JP8f3Pgz4EY4ngABAgQIECBAgAABAgQIEOi6wCuXlh5qNFv/en1j82TXN7chAQIEBiRgwH1A8I4lQOBNBQy4e3EQIECAAAECBFIscG1u7vxQu31fiktU2i4EDLjvAimljxRHC2H+2Jwh95T2V1n7EzDYvj83qwjsRiCXy7UnJ0Z/NFos/GGlUnpmN2s8Q4AAAQIECBAgQIAAAQIECBBIqkC1euXexmbz32/Ut85EUWQGK6mNlJsAgZsCs7MTC5VKZREHAQIE4iLgh6u4dEIOAgQIECBAgEAPBGqlUrsH29oyYQIG3BPWsC7HnZmeDJXbjnR5V9sRSJ6Awfbk9Uzi5Ajk88OtqYniV/OF8Em/AElO3yQlQIAAAQIECBAgQIAAAQIEuiNQrVbntxrRV9c3tn7boHt3TO1CgED/Bc6cOWWWtP/sTiRA4C0EfFPy8iBAgAABAgQIpFRgeXb2nmho6LmUlqesPQgYcN8DVkofNeSe0sYqa1cCBtt3xeQhAvsSKBYLK+PF0S/cMV9+fF8bWESAAAECBAgQIECAAAECBAgQSJnApYvVL65tNB5utXbyKStNOQQIpFzAgHvKG6w8AgkUMOCewKaJTIAAAQIECBDYjcC1UumBoRC+tZtnPZNugZW/+GZYv3Uu3UWq7m0FOre4dwbdfRHIioDB9qx0Wp2DEJicGHtpbLzwSKVSemYQ5zuTAAECBAgQIECAAAECBAgQIBB3AYPuce+QfAQI/LKAAXevCQIE4iZgwD1uHZGHAAECBAgQINAlgVqp9GQI4YkubWebBAvUvvODsDkymuAKRO+WgCH3bknaJ84CBtvj3B3ZkiyQy+XakxOjPxot5h6uVCqLSa5FdgIECBAgQIAAAQIECBAgQIBAvwR+urj06Xpj6/cajeZMv850DgECBPYjYMB9P2rWECDQSwED7r3UtTcBAgQIECBAYIAC1+bmzg+12/cNMIKjYyJgwD0mjYhJDEPuMWmEGF0XWFldD9evr4XGVrPre9uQQJYF8vnh1tRE8av5QvikwfYsvxLUToAAAQIECBAgQIAAAQIECBxE4PLi0qMbja0nDLofRNFaAgR6JVAsFlZOn54/3Kv97UuAAIH9CBhw34+aNQQIECBAgACBBAjUSqWLIYT5BEQVsccCBtx7DJzA7Q25J7BpIr+pQGew/eq11bC93aJEgEAXBTq/0BgbHfnPxxYqH+7itrYiQIAAAQIECBAgQIAAAQIECGRawKB7ptuveAKxFTDgHtvWCEYg0wIG3DPdfsUTIECAAAECaRVYnpmZiQqF5bTWp669CRhw35tXVp425J6VTqezzp2dKKyurofa8prB9nS2WFUDFBgfH10aKxT+5Oh8+dwAYziaAAECBAgQIECAAAECBAgQIJBqAYPuqW6v4ggkTsCAe+JaJjCBTAgYcM9EmxVJgAABAgQIZE3garl8NhdFT2etbvW+sYABd6+MNxMw5O61kTSBzmD79eUboXZ9LURRlLT48hKItcDkxNhLY+OFRyqV0jOxDiocAQIECBAgQIAAAQIECBAgQCBFAgbdU9RMpRBIsIAB9wQ3T3QCKRYw4J7i5iqNAAECBAgQyK5AbW7u0dBufza7Air/eQED7l4PbyUwMz0ZOoPuvgjEWWB7uxWuXlsNN9bqBtvj3CjZEieQy+XakxOjPxotFv7QYHvi2icwAQIECBAgQIAAAQIECBAgkCIBg+4paqZSCCRQwIB7ApsmMoEMCBhwz0CTlUiAAAECBAhkT6BWKn0lhPBw9ipX8RsJGHD3ung7AUPubyfkzwclsFFvhNXVjbCyuj6oCM4lkEqB/z7Ynnu4UqksprJIRREgQIAAAQIECBAgQIAAAQIEEihg0D2BTROZQAoEDLinoIlKIJBCAQPuKWyqkggQIECAAAEC1+bmzg+12/eRINARMODudbAbgeJoIcwfmwvDw7ndPO4ZAj0V6Ay0r6xuhHq90dNzbE4gawL5/HBraqL41WMLlQ9nrXb1EiBAgAABAgQIECBAgAABAgSSJGDQPUndkpVA8gUMuCe/hyogkEYBA+5p7KqaCBAgQIAAgcwL1EqlduYRAPxMwIC7F8NuBUZG8uGO22dDsVjY7RLPEeiawM5OFFZX10NteS1sb7e6tq+NCBAIwWC7VwEBAgQIECBAgAABAgQIECBAIJkCnUH3tXrj3zSb22PJrEBqAgSSIGDAPQldkpFA9gQMuGev5yomQIAAAQIEUi6wPDt7TzQ09FzKy1TeHgQMuO8By6Mhl8uF8tzhMDM9SYNAXwQ6w+y16zdu3tgeRVFfznQIgawIdH4pMVEc/eOj8+VzWalZnQQIECBAgAABAgQIECBAgACBNApculj94tpG4+FWayefxvrURIDAYAUMuA/W3+kECLyxgAF3rwwCBAgQIECAQMoErpVKDwyF8K2UlaWcAwgYcD8AXoaXdgbc50qHw/BwLsMKSu+lwNpa/eZQ+9p6vZfH2JtAJgUMtmey7YomQIAAAQIECBAgQIAAAQIEMiDQGXRfXdv8l1EUmfnKQL+VSKBfAgbc+yXtHAIE9iLgh529aHmWAAECBAgQIJAAgVqp9GQI4YkERBWxTwIG3PsEncJjiqOFULntSCgWCymsTkmDENjZicLq6nqoLa+Fzs3tvggQ6K6AwfbuetqNAAECBAgQIECAAAECBAgQIBBHgWq1Or/ViL66vrH12wbd49ghmQgkT8CAe/J6JjGBLAgYcM9Cl9VIgAABAgQIZErg2tzc+aF2+75MFa3YtxRY/dLXwtqxE5QI7Esgl8uF0q3T4ZZbDu1rvUUEOgIb9UZYXd0IK6vrQAgQ6IHA5MTYS2PjhUcqldIzPdjelgQIECBAgAABAgQIECBAgAABAjEU6Ay6Nzajp9bWN++JYTyRCBBIkIAB9wQ1S1QCGRIw4J6hZiuVAAECBAgQyIZArVRaCSFMZ6NaVe5GYO1znw+r73jXbh71DIE3FRgfL4bbbzsSRkbylAjsSsBt7bti8hCBAwkYbD8Qn8UECBAgQIAAAQIECBAgQIAAgVQIVKtX7t3YaHyjXt8qp6IgRRAg0HcBA+59J3cgAQK7EDDgvgskjxAgQIAAAQIEkiKwPDMzExUKy0nJK2d/BAy498c5C6e4zT0LXT54jWtr9bC2vum29oNT2oHAmwoYbPfiIECAAAECBAgQIECAAAECBAgQ+GWBy4tLj240tp5oNJozdAgQILAXAQPue9HyLAEC/RIw4N4vaecQIECAAAECBPogcLVcPpuLoqf7cJQjEiRgwD1BzUpI1OJoIVRuOxKKxUJCEovZa4Ht7VaoXb9xc7C98999ESDQGwGD7b1xtSsBAgQIECBAgAABAgQIECBAIE0Cly5Wv7i20Xi41drxkaxpaqxaCPRQIJfLtd/5zpO5Hh5hawIECOxZwID7nsksIECAAAECBAjEV6BWKj0ZQngivgklG4SAAfdBqGfjzJnpyTBXOhyGh73flY2O/2KVOztRWF1dDyurG6Gx1cwigZoJ9E3AYHvfqB1EgAABAgQIECBAgAABAgQIEEiFQLVand9qRF9d39j67SiKzIeloquKINBbgTNnTvle0VtiuxMgsEcB35T2COZxAgQIECBAgECcBWql0ldCCA/HOaNs/Rcw4N5/8yydmMvlwpFbpsLsrT7xNAt97wy1r63Xw9ra5s3/9EWAQG8FDLb31tfuBAgQIECAAAECBAgQIECAAIG0C1SrV+7d2Gh8o17fKqe9VvURIHAwAQPuB/OzmgCB7gsYcO++qR0JECBAgAABAgMTqJVKz4cQzgwsgINjKWDAPZZtSV2okZF8mL11OnRudfeVLgFD7enqp2qSIWCwPRl9kpIAAQIECBAgQIAAAQIECBAgkBSBy4tLj67VG/+m2dweS0pmOQkQ6K+AAff+ejuNAIG3FzDg/vZGniBAgAABAgQIJEagViq1ExNW0L4JrH/sE2Hlvff37TwHZVvAoHs6+m+oPR19VEXyBAy2J69nEhMgQIAAAQIECBAgQIAAAQIEkiRw8UL1W2vrm++LosjMWJIaJyuBPggYcO8DsiMIENiTgB9W9sTlYQIECBAgQIBAfAWWZ2fviYaGnotvQskGJbBx/4Nh+SMfH9Txzs2owOuD7lOT42F4OJdRhWSVvb3dCmtr9bBR3wpr6/VkhZeWQMIFDLYnvIHiEyBAgAABAgQIECBAgAABAgQSJFCtVuc369Hfrm9snkxQbFEJEOixwK2Hp95/+7Hy13t8jO0JECCwawED7rum8iABAgQIECBAIN4C12ZnHxkaGvpyvFNKNwgBA+6DUHfm6wK5XC4cuWUqzExPhs7Qu694CTQazbCyuh7q9a3Q2GrGK5w0BDIgUCwWVibHRn/PLw0y0GwlEiBAgAABAgQIECBAgAABAgRiJnB5cenR1fX6v221drx5H7PeiENgEAJHZqYeOzpfPjeIs51JgACBNxIw4O51QYAAAQIECBBIiUCtVHoyhPBESspRRhcFDLh3EdNWBxLoDLlPT0+EifHigfaxeP8CnVvaN+qNmwPtN9bqIYqi/W9mJQEC+xboDLZPFEf/2C8L9k1oIQECBAgQIECAAAECBAgQIECAQJcELrx8+fz6xtZvR1FkjqxLprYhkEQBA+5J7JrMBNIt4AeTdPdXdQQIECBAgECGBK7NzZ0farfvy1DJSt2lgAH3XUJ5rG8CnZvcZ6Yn3OreB/GdnSjU642fDbW7pb0P6I4g8BYCBtu9PAgQIECAAAECBAgQIECAAAECBOIoUK1euXdtbfP/ajSaM3HMJxMBAr0XODw98aVjC5UP9/4kJxAgQGB3Agbcd+fkKQIECBAgQIBA7AVqpdJKCGE69kEFHIjA5e89O5BzHUrg7QSKo4Wbw+5TU+OhM/ju62ACrw+0dwbZN+pbN4fbfREgMHiBQmFkc2q8+L+7sX3wvZCAAAECBAgQIECAAAECBAgQIEDgzQV+urj06ZUbG3/gNnevEgLZEzg0NfbD4yeOns1e5SomQCCuAgbc49oZuQgQIECAAAECexBYnpmZiQqF5T0s8WjGBAy4Z6zhCS339WH38fFiKBYLCa2iv7G3t1s3b2dvNJqhXt8Kbmjvr7/TCLydQD4/3JqaKH7VrTdvJ+XPCRAgQIAAAQIECBAgQIAAAQIE4iJQrVbnNzZa/1Cvb5XjkkkOAgR6L2DAvffGTiBAYG8CBtz35uVpAgQIECBAgEAsBa6Wy2dzUfR0LMMJFQsBA+6xaIMQexDo3OY+MV4M4+OjN//T7e4hdG5n7wywd25lbzS2bw62R1G0B1WPEiDQLwGD7f2Sdg4BAgQIECBAgAABAgQIECBAgECvBC4vLj26ul7/t63Wjo9f7RWyfQnESGB8fHTp1Kljt8UokigECGRcwIB7xl8AyidAgAABAgTSIVArlZ4MITyRjmpU0QuB177/bNhu92JnexLoj8DPD7x3bnpP+w3vnRvZO7ezdwbaN+pbN/975/98ESAQb4FcLteenBj90Wgx93ClUlmMd1rpCBAgQIAAAQIECBAgQIAAAQIECLy1QOc298Zm9NTa+uY9rAgQSLdAsVhYOX16/nC6q1QdAQJJEjDgnqRuyUqAAAECBAgQeBOBWqn0lRDCw4AIvJlA7Ts/CJsjo4AIpEpgfLwYiqMjoTCSD6PFQugMvg8P5xJT4+s3sr8+vN65lf31ofbEFCEoAQI3BQy2eyEQIECAAAECBAgQIECAAAECBAikWcBt7mnurtoI/KNAoTCyedddC+M8CBAgEBcBA+5x6YQcBAgQIECAAIEDCNRKpedDCGcOsIWlKRcw4J7yBivvZwK5XO7m7e6dofeRkeHQufm983+dr4nxYl+lNuqNm+e9PsD+jwPt2yG6+Z/NvmZxGAECvROYnBh7aWy88EilUnqmd6fYmQABAgQIECBAgAABAgQIECBAgMBgBdzmPlh/pxPoh8CZM6fMk/YD2hkECOxKwDekXTF5iAABAgQIECAQb4FaqdSOd0LpBi2w/NR3w8bEoUHHcD6BWAi8PgT/82Emxvf+CQedG9d3ouhn2xhcj0V7hSDQN4Hx8dGliYni7xhs7xu5gwgQIECAAAECBAgQIECAAAECBGIg0LnNffnGxr+LosjcWQz6IQKBbgoYcO+mpr0IEDiogB80DipoPQECBAgQIEBgwALLs7P3RENDzw04huNjLrD2uc+H1Xe8K+YpxSNAgAABAvEXKBYLKxPF0T8+Ol8+F/+0EhIgQIAAAQIECBAgQIAAAQIECBDovkDnNveNjdY/1Otb5e7vbkcCBAYlcGRm6jHvfQ9K37kECPyygAF3rwkCBAgQIECAQMIFrs3OPjI0NPTlhJchfo8FDLj3GNj2BAgQIJB6gXx+uHVocvzP7pgvP576YhVIgAABAgQIECBAgAABAgQIECBAYBcCly5Wv7i6tvkv3ea+CyyPEEiAgAH3BDRJRAIZEjDgnqFmK5UAAQIECBBIp0BtdvZcGBr6aDqrU1W3BNY/9omw8t77u7WdfQgQIECAQGYEcrlce2py7K8WjlcezEzRCiVAgAABAgQIECBAgAABAgQIECCwS4Fq9cq9q6v1v2k2t8d2ucRjBAjEVODQ1NgPj584ejam8cQiQCBjAgbcM9Zw5RIgQIAAAQLpE7g2N3d+qN2+L32VqaibAhv3PxiWP/Lxbm5pLwIECBAgkGqBzmD75MToj0aLuYcrlcpiqotVHAECBAgQIECAAAECBAgQIECAAIEDClx4+fL5G2ubfmd5QEfLCQxSYGpy7PkTJ4/+xiAzOJsAAQKvCxhw91ogQIAAAQIECCRcoFYqrYQQphNehvg9Fqj/5m+F65/60x6fYnsCBAgQIJAOgcmJsZfGxguPVCqlZ9JRkSoIECBAgAABAjv9P88AACAASURBVAQIECBAgAABAgQI9F7g8uLSo8s3Nv5dFEVm0nrP7QQCXRcoFgsrp0/PH+76xjYkQIDAPgT8MLEPNEsIECBAgAABAnERWC6XF6IouhCXPHLEW+Dy956Nd0DpCBAgQIDAgAU6b95PFEf/+Oh8+dyAozieAAECBAgQIECAAAECBAgQIECAQCIFqtXq/Nra9vONRnMmkQUITSDDAvn8cOvuu0+MZJhA6QQIxEjAgHuMmiEKAQIECBAgQGCvAlfL5bO5KHp6r+s8n00BA+7Z7LuqCRAgQODtBTpv2h+aHP+zO+bLj7/9054gQIAAAQIECBAgQIAAAQIECBAgQODtBC68fPn8jbXN+97uOX9OgEC8BM6cOWWmNF4tkYZAZgV8M8ps6xVOgAABAgQIpEGgVio9GUJ4Ig21qKH3ArXv/CBsjoz2/iAnECBAgACBhAjkcrn25MToj46fOHo2IZHFJECAAAECBAgQIECAAAECBAgQIJAYgZ8uLn165cbGH0RRZEYtMV0TNOsCR2amHvMpp1l/FaifQDwE/PAQjz5IQYAAAQIECBDYl8D1Uumpdgjv29diizInYMA9cy1XMAECBAi8hcDU5NjzxbHcA5VKZREUAQIECBAgQIAAAQIECBAgQIAAAQK9EahWr9y7ulr/m2Zze6w3J9iVAIFuChyenvjSsYXKh7u5p70IECCwHwED7vtRs4YAAQIECBAgEBOBWqn0fAjhTEziiBFzgdUvfS2sHTsR85TiESBAgACB3goUi4WVqamx+yuV0jO9PcnuBAgQIECAAAECBAgQIECAAAECBAh0BKrV6vxmPfrb9Y3Nk0QIEIi3wKGpsR/61NN490g6AlkRMOCelU6rkwABAgQIEEilQK1UaqeyMEX1RGDtc58Pq+94V0/2tikBAgQIEIi7QD4/3JqeHP99H60a907JR4AAAQIECBAgQIAAAQIECBAgkFaBixeq31q9sfFAWutTF4E0CHQuiTl9ev5wGmpRAwECyRYw4J7s/klPgAABAgQIZFjgarl8NhdFT2eYQOl7FNj44O+G5Q88vMdVHidAgAABAskWyOVy7cmJ0R+5cSbZfZSeAAECBAgQIECAAAECBAgQIEAgHQI/XVz69MqNjT+IosjcWjpaqoqUCXQui7n77hMjKStLOQQIJFDADwoJbJrIBAgQIECAAIGOwLXZ2UeGhoa+TIPAbgU27n8wLH/k47t93HMECBAgQCDxApMTYy+Njef+x0qlspj4YhRAgAABAgQIECBAgAABAgQIECBAICUCr1xaemhlrf5/tlo7+ZSUpAwCqRKYnZ1Y8L56qlqqGAKJFDDgnsi2CU2AAAECBAgQCKE2O3suDA19lAWB3Qq0p2bCK9/89m4f9xwBAgQIEEisQOcjVCfHRn/v9mPlrye2CMEJECBAgAABAgQIECBAgAABAgQIpFigWq3Or642X2g2t8dSXKbSCCRS4MjM1GNH58vnEhleaAIEUiNgwD01rVQIAQIECBAgkDWBa3Nz54fa7fuyVrd6DyZw+XvPHmwDqwkQIECAQIwFOh+dOjVR/OqxhcqHYxxTNAIECBAgQIAAAQIECBAgQIAAAQIEQgidIffNevS36xubJ4EQIBAfgUNTYz88fuLo2fgkkoQAgSwKGHDPYtfVTIAAAQIECKRCoFYqrYQQplNRjCL6JlD7zg/C5sho385zEAECBAgQ6JdA5w330WLuYR+b2i9x5xAgQIAAAQIECBAgQIAAAQIECBDojsBLP7n8E0Pu3bG0C4FuCIyPjy6dOnXstm7sZQ8CBAjsV8CA+37lrCNAgAABAgQIDFBguVxeiKLowgAjODqhAstPfTdsTBxKaHqxCRAgQIDArwoUi4WVqamx+yuV0jN8CBAgQIAAAQIECBAgQIAAAQIECBBIpsCli9UvLq9ufCiZ6aUmkC6Bzqel3n33iZF0VaUaAgSSJmDAPWkdk5cAAQIECBAgEEK4Wi6fzUXR0zAI7FVg7XOfD6vveNdel3meAAECBAjETqDzBvuhyfE/u2O+/HjswglEgAABAgQIECBAgAABAgQIECBAgMCeBQy575nMAgI9E5idnVjwiak947UxAQK7EDDgvgskjxAgQIAAAQIE4iZQK5WeDCE8Ebdc8sRfYOODvxuWP/Bw/INKSIAAAQIE3kLg0NTYD4+fOHoWEgECBAgQIECAAAECBAgQIECAAAEC6RIw5J6ufqomuQK3zEx9xgUzye2f5ATSIGDAPQ1dVAMBAgQIECCQOYHrpdJT7RDel7nCFXxggfpv/la4/qk/PfA+NiBAgAABAoMQKBYLK1NTY/dXKqVnBnG+MwkQIECAAAECBAgQIECAAAECBAgQ6L3A5cWlR5dvbPy7KIrMtvWe2wkE3lDARTNeGAQIDFrADwGD7oDzCRAgQIAAAQL7EKiVSs+HEM7sY6klBMLl7z1LgQABAgQIJEognx9uHZoc/zO3xSSqbcISIECAAAECBAgQIECAAAECBAgQ2LfAK5eWHrq+uvEXhtz3TWghgQMJdC6cOX16/vCBNrGYAAECBxAw4H4APEsJECBAgAABAoMSqJVK7UGd7dzkC7z2/WfDtldQ8hupAgIECGREoHNLzGgx93ClUlnMSMnKJECAAAECBAgQIECAAAECBAgQIEAghGDI3cuAwGAFzpw5Zb50sC1wOoFMC/gGlOn2K54AAQIECBBIosDVcvlsLoqeTmJ2meMhsPzUd8PGxKF4hJGCAAECBAi8iUDndpipqbH7K5XSM5AIECBAgAABAgQIECBAgAABAgQIEMimgCH3bPZd1fEQODIz9djR+fK5eKSRggCBrAkYcM9ax9VLgAABAgQIJF7g2uzsI0NDQ19OfCEKGJjA2uc+H1bf8a6Bne9gAgQIECDwVgK5XK49c2jiT+6YLz9OigABAgQIECBAgAABAgQIECBAgAABAobcvQYIDEag8wmrx08cPTuY051KgEDWBQy4Z/0VoH4CBAgQIEAgcQK12dlzYWjoo4kLLnBsBDY++Lth+QMPxyaPIAQIECBA4HWBqcmx54tjuQcqlcoiFQIECBAgQIAAAQIECBAgQIAAAQIECLwuYMjda4FA/wU6n7R6+vT84f6f7EQCBAiEYMDdq4AAAQIECBAgkDCBa3Nz54fa7fsSFlvcGAnUf/O3wvVP/WmMEolCgAABAlkXKBRGNg9NFD94+7Hy17NuoX4CBAgQIECAAAECBAgQIECAAAECBN5Y4NLF6heXVzc+xIcAgf4JnDlzyoxp/7idRIDAzwn45uPlQIAAAQIECBBImECtVGonLLK4MRS4/L1nY5hKJAIECBDImkAul2tPTY791cLxyoNZq129BAgQIECAAAECBAgQIECAAAECBAjsXcCQ+97NrCBwEIEjM1OPHZ0vnzvIHtYSIEBgPwIG3PejZg0BAgQIECBAYEACy+XyQhRFFwZ0vGNTJFD7zg/C5shoiipSCgECBAgkTWB8fHRpYiL/7kqlspi07PISIECAAAECBAgQIECAAAECBAgQIDA4AUPug7N3cvYEpibHnj9x8uhvZK9yFRMgMGgBA+6D7oDzCRAgQIAAAQJ7ELhWKj0wFMK39rDEowTeUGD1S18La8dO0CFAgAABAn0XyOeHW9OT47/vxpe+0zuQAAECBAgQIECAAAECBAgQIECAQGoELrx8+fyNtc37UlOQQgjEVKBQGNm8666F8ZjGE4sAgRQLGHBPcXOVRoAAAQIECKRPoFYqPRlCeCJ9lamo3wLrH/tEWHnv/f0+1nkECBAgkHGBzk0vxbHcA25tz/gLQfkECBAgQIAAAQIECBAgQIAAAQIEuiDw0k8u/2R9Y/NkF7ayBQECbyEwOzv9nkql9AwkAgQI9FPAgHs/tZ1FgAABAgQIEDigwPVS6al2CO874DaWEwj13/ytcP1Tf0qCAAECBAj0RaBzw8uhieIHbz9W/npfDnQIAQIECBAgQIAAAQIECBAgQIAAAQKZEPjxjy+9Wq9vlTNRrCIJDEjg8PTEl44tVD48oOMdS4BARgUMuGe08comQIAAAQIEkilQK5UuhhDmk5le6rgJXP7es3GLJA8BAgQIpEwgl8u1pybH/mrheOXBlJWmHAIECBAgQIAAAQIECBAgQIAAAQIEYiBQrVbnV1ebLzSb22MxiCMCgVQKjI+PLp06dey2VBanKAIEYitgwD22rRGMAAECBAgQIPCrArVSqc2FQLcEat/5QdgcGe3WdvYhQIAAAQK/IFAsFlampsbu97GlXhgECBAgQIAAAQIECBAgQIAAAQIECPRSoDPkXqttXoiiyCxcL6HtnVmBzmU273znyVxmARROgMBABPylPhB2hxIgQIAAAQIE9i5wtVw+m4uip/e+0goCbyyw+qWvhbVjJ/AQIECAAIGuCnTe6J45NPEnd8yXH+/qxjYjQIAAAQIECBAgQIAAAQIECBAgQIDAmwi8cmnpoeurG39hyN1LhEBvBG6ZmfqM9/17Y2tXAgTeWMCAu1cGAQIECBAgQCAhArW5uUdDu/3ZhMQVMwEC6x/7RFh57/0JSCoiAQIECCRFoPMxpRMT+XdXKpXFpGSWkwABAgQIECBAgAABAgQIECBAgACBdAhculj94vLqxofSUY0qCMRLYHJi7KWTdx69M16ppCFAIM0CBtzT3F21ESBAgAABAqkSqM3OngtDQx9NVVGKGajA9slfC6994csDzeBwAgQIEEiHQD4/3JqeHP/9o/Plc+moSBUECBAgQIAAAQIECBAgQIAAAQIECCRR4MLLl8/fWNu8L4nZZSYQZ4HO7wHuvvvESJwzykaAQLoEDLinq5+qIUCAAAECBFIscG1u7vxQu+3NmBT3eBClVb//9yFqtwdxtDMJECBAICUCU5NjzxfHcg+4tT0lDVUGAQIECBAgQIAAAQIECBAgQIAAgYQL/PjHl16t17fKCS9DfAKxE7j18NT7bz9W/nrsgglEgEAqBQy4p7KtiiJAgAABAgTSKFArlUwhp7GxA65p+anvho2JQwNO4XgCBAgQSKKAW9uT2DWZCRAgQIAAAQIECBAgQIAAAQIECKRfoFqtzq+uNl9oNrfH0l+tCgn0T6Bz4c2Jk0d/o38nOokAgSwLGHDPcvfVToAAAQIECCRGYLlcXoii6EJiAguaGIH1T34mrLz7PYnJKygBAgQIxEPg0NTYD0eLuYfd2h6PfkhBgAABAgQIECBAgAABAgQIECBAgMAvCrxyaemh66sbfxFFkfk4Lw4CXRLoXHxz990nRrq0nW0IECDwlgL+AvcCIUCAAAECBAgkQOBaqfTAUAjfSkBUERMmsHH/g2H5Ix9PWGpxCRAgQGBQAoXCyOahieIHfQTpoDrgXAIECBAgQIAAAQIECBAgQIAAAQIEditw6WL1i8urGx/a7fOeI0Dg7QXmbp35X8u3z37x7Z/0BAECBA4mYMD9YH5WEyBAgAABAgT6IlArlZ4MITzRl8MckjmBy997NnM1K5gAAQIE9i7QubX9+ImjZ/e+0goCBAgQIECAAAECBAgQIECAAAECBAgMRuDlly4/t7a+ec9gTncqgfQJTE6MvXTyzqN3pq8yFREgEDcBA+5x64g8BAgQIECAAIE3ELheKj3VDuF9cAj0QqD2nR+EzZHRXmxtTwIECBBIgYBb21PQRCUQIECAAAECBAgQIECAAAECBAgQyLDACy9crDeb22MZJlA6ga4J5HK59jvfeTLXtQ1tRIAAgTcRMODupUGAAAECBAgQSIBArVS6GEKYT0BUERMosPa5z4fVd7wrgclFJkCAAIFeC7i1vdfC9idAgAABAgQIECBAgAABAgQIECBAoNcC1eqVe2u1tR9FUWRWrtfY9s+EwC0zU5+5Y778eCaKVSQBAgMT8Jf2wOgdTIAAAQIECBDYvUCtVGrv/mlPEtibwMb9D4blj3x8b4s8TYAAAQKpFnBre6rbqzgCBAgQIECAAAECBAgQIECAAAECmRO4dLH6xeXVjQ9lrnAFE+iBwPj46NKpU8du68HWtiRAgMDPBAy4ezEQIECAAAECBGIucLVcPpuLoqdjHlO8hAtc/t6zCa9AfAIECBDoloBb27slaR8CBAgQIECAAAECBAgQIECAAAECBOIk8OMfX3q1Xt8qxymTLASSKjA7O7FQqVQWk5pfbgIE4i9gwD3+PZKQAAECBAgQyLhAbW7u0dBufzbjDMrvsUDtOz8ImyOjPT7F9gQIECAQZwG3tse5O7IRIECAAAECBAgQIECAAAECBAgQIHBQgWq1Or+83PhJq7WTP+he1hPIusD0oYmnFo5XHsy6g/oJEOidgAH33tnamQABAgQIECDQFYHa7Oy5MDT00a5sZhMCbyKw/snPhJV3v4cPAQIECGRUwK3tGW28sgkQIECAAAECBAgQIECAAAECBAhkTODy4tKjtZU1l4tlrO/K7b5A59Kcu+5aGO/+znYkQIDAPwoYcPdKIECAAAECBAjEXODa3Nz5oXb7vpjHFC/hAvXf/K1w/VN/mvAqxCdAgACBvQq4tX2vYp4nQIAAAQIECBAgQIAAAQIECBAgQCDpAi+/dPm5tfXNe5Jeh/wEBi1w6+Gp999+rPz1QedwPgEC6RQw4J7OvqqKAAECBAgQSJFArVRqp6gcpcRYoPr9vw9R28stxi0SjQABAl0VmJoce/7EyaO/0dVNbUaAAAECBAgQIECAAAECBAgQIECAAIEECLzwwsV6s7k9loCoIhKIrcDkxNhLJ+88emdsAwpGgECiBQy4J7p9whMgQIAAAQJpF1ienb0nGhp6Lu11qi8eAit/8c2wfutcPMJIQYAAAQI9E8jnh1vTk+O/f3S+fK5nh9iYAAECBAgQIECAAAECBAgQIECAAAECMRZ45dLSQ9eW1/4yxhFFIxB7gVwu1z5yZOx4pVJZjH1YAQkQSJyAAffEtUxgAgQIECBAIEsC10qlB4ZC+FaWalbr4ATWP/aJsPLe+wcXwMkECBAg0HOBzq3txbHcA95s7jm1AwgQIECAAAECBAgQIECAAAECBAgQiLnAhZcvn7+xtnlfzGOKRyDWAtOHJp5aOF55MNYhhSNAIJECBtwT2TahCRAgQIAAgawI1EqlJ0MIT2SlXnUOVmD75K+F177w5cGGcDoBAgQI9ESgc4vK4UMT/8qt7T3htSkBAgQIECBAgAABAgQIECBAgAABAgkV+G//7eXtVmsnn9D4YhMYuEDnU2PvvvvEyMCDCECAQOoEDLinrqUKIkCAAAECBNIkcG1u7vxQu+3WgDQ1Nea1XP2bH4WtoeGYpxSPAAECBPYiMD4+ujQxkX+3W9v3ouZZAgQIECBAgAABAgQIECBAgAABAgSyIHB5cenR2sraZ7NQqxoJ9ErgyMzUYy7Y6ZWufQlkV8CAe3Z7r3ICBAgQIEAgAQK1UuliCGE+AVFFTInA6pe+FtaOnUhJNcogQIBAtgU6t7bPHJr4kzvmy49nW0L1BAgQIECAAAECBAgQIECAAAECBAgQeHOBl1+6/Nza+uY9jAgQ2J9AsVhYOX16/vD+VltFgACBNxYw4O6VQYAAAQIECBCIqcDyzMxMVCgsxzSeWCkVqP/mb4Xrn/rTlFanLAIECGRHoPNm8tTU2P2VSumZ7FStUgIECBAgQIAAAQIECBAgQIAAAQIECOxdoFqtztdqmxeiKDJLt3c+KwjcFJidnX6P30l4MRAg0E0Bfyl3U9NeBAgQIECAAIEuClwtl8/moujpLm5pKwK7Eqh+/+9D1G7v6lkPESBAgEC8BDq3tk9Njv3VwvHKg/FKJg0BAgQIECBAgAABAgQIECBAgAABAgTiK3DpYvWLy6sbH4pvQskIxFtgcmLspZN3Hr0z3imlI0AgSQIG3JPULVkJECBAgACBTAnU5uYeDe32ZzNVtGJjIbDyF98M67fOxSKLEAQIECCwe4FCYWTz0ETxg7cfK39996s8SYAAAQIECBAgQIAAAQIECBAgQIAAAQIdgRdfXFxuNJozNAgQ2J/A7OzEQqVSWdzfaqsIECDwiwIG3L0iCBAgQIAAAQIxFaiVSl8JITwc03hipVhg44O/G5Y/4KWX4hYrjQCBFApMTY49f+Lk0d9IYWlKIkCAAAECBAgQIECAAAECBAgQIECAQF8EqtUr9169uvp3fTnMIQRSKHBoauyHx08cPZvC0pREgMAABAy4DwDdkQQIECBAgACB3Qhcm5s7P9Ru37ebZz1DoJsC7amZ8Mo3v93NLe1FgAABAj0SyOeHW9OT479/dL58rkdH2JYAAQIECBAgQIAAAQIECBAgQIAAAQKZEXj5pcvPra1v3pOZghVKoIsCuVyufeTI2HG3uHcR1VYEMixgwD3DzVc6AQIECBAgEG+BWqnUjndC6dIssPzUd8PGxKE0l6g2AgQIJF5gfHx0aWIi/25vFCe+lQogQIAAAQIECBAgQIAAAQIECBAgQCAmAtVqdb5W27wQRZG5upj0RIxkCbjFPVn9kpZAnAX8RRzn7shGgAABAgQIZFZgeXb2nmho6LnMAih84ALrH/tEWHnv/QPPIQABAgQI/KpA5waU6amx/3hsofJhPgQIECBAgAABAgQIECBAgAABAgQIECDQXYFLF6tfXF7d+FB3d7UbgWwIuMU9G31WJYF+CBhw74eyMwgQIECAAAECexS4Vio9MBTCt/a4zOMEuibQnpoJr3zz213bz0YECBAg0B2BQmFkc3p6/J9VKqVnurOjXQgQIECAAAECBAgQIECAAAECBAgQIEDglwVeeOFivdncHiNDgMDeBdzivnczKwgQ+FUBA+5eFQQIECBAgACBGArUSqUnQwhPxDCaSBkSWH7qu2Fj4lCGKlYqAQIE4i3gDeF490c6AgQIECBAgAABAgQIECBAgAABAgTSI3B5cenR2sraZ9NTkUoI9E/ALe79s3YSgTQLGHBPc3fVRoAAAQIECCRW4Nrc3Pmhdvu+xBYgeCoE1j/2ibDy3vtTUYsiCBAgkGSBfH64NT05/vtH58vnklyH7AQIECBAgAABAgQIECBAgAABAgQIEEiSwIsvLi43Gs2ZJGWWlUBcBFzaE5dOyEEguQIG3JPbO8kJECBAgACBFAvUSqWLIYT5FJeotAQItKdmwivf/HYCkopIgACB9AqMj48uTUzk312pVBbTW6XKCBAgQIAAAQIECBAgQIAAAQIECBAgED+BVy4tPXRtee0v45dMIgLxF3CLe/x7JCGBuAsYcI97h+QjQIAAAQIEMiewPDMzExUKy5krXMGxFFh+6rthY+JQLLMJRYAAgTQLdN74nZ4a+4/HFiofTnOdaiNAgAABAgQIECBAgAABAgQIECBAgECcBV76yeWfrG9snoxzRtkIxFXALe5x7YxcBJIhYMA9GX2SkgABAgQIEMiQwNVy+Wwuip7OUMlKjbHA+sc+EVbee3+ME4pGgACB9AkUCiOb09Pj/6xSKT2TvupURIAAAQIECBAgQIAAAQIECBAgQIAAgeQIVKtX7r16dfXvkpNYUgLxEXCLe3x6IQmBJAoYcE9i12QmQIAAAQIEUi1Qm5t7NLTbn011kYpLjEB7aia88s1vJyavoAQIEEi6wNTk2PMnTh79jaTXIT8BAgQIECBAgAABAgQIECBAgAABAgTSIuAW97R0Uh2DEHCL+yDUnUkgHQIG3NPRR1UQIECAAAECKRKolUpfCSE8nKKSlJJwgeWnvhs2Jg4lvArxCRAgEG+Bzi0mhw9N/Kuj8+Vz8U4qHQECBAgQIECAAAECBAgQIECAAAECBLIl4Bb3bPVbtd0XmJ2dfo9Pre2+qx0J/P/s3VtsnNeVIOpdv0iKxRJvllmslGmSutiO4s7EeTMadktAA4M8dDr2w0GSRoDYbT2cp8RO3+I5A9jdgwMnmAGiASaYPFhJumfQied0j9WYSQ5mJj2WO+7BvBzEhiEYhqwLZYWkTJVIiuJFJFV1UOm423Fsq4qsy3/58qq9117rW78iuGrV/tMuYMA97R1WHwECBAgQIJA4gavj46dztdrRxCUu4dQK3PiDr4elz3w2tfUpjAABAt0W6O/vWxoc7H2gXC7PdDsX5xMgQIAAAQIECBAgQIAAAQIECBAgQIDArwu4xd1TQWDnAvsK+XOHDk8c3nkEOwkQyKKAAfcsdl3NBAgQIECAQKwFKsViLdYJSi6TArM/+V+hWvNoZrL5iiZAoK0CXs3ZVl7BCRAgQIAAAQIECBAgQIAAAQIECBAg0BIBt7i3hFGQDAvsHxl8yltsM/wAKJ3ADgQMuO8AzRYCBAgQIECAQLsEFsfGHqjmcj9rV3xxCexUYOkH/zncuHN8p9vtI0CAAIH3CfT07NkeGRz40l2TpRfgECBAgAABAgQIECBAgAABAgQIECBAgED8BdziHv8eyTC+AvW32d5339RofDOUGQECcRMw4B63jsiHAAECBAgQyLTA1bGxx3K53PcyjaD4WAqsfvbRsPiVP4xlbpIiQIBA0gQGBvbOFwo9D5bL5Zmk5S5fAgQIECBAgAABAgQIECBAgAABAgQIZFXALe5Z7by6WyUwOlw4OTldPt6qeOIQIJBuAQPu6e6v6ggQIECAAIGECVSKxWdDCM8kLG3pZkTgyk/+PmzVMlKsMgkQINAmgeGhwqnpA+VH2xReWAIECBAgQIAAAQIECBAgQIAAAQIECBBoo4Bb3NuIK3TqBaIoqu3fnz/gAqDUt1qBBFoiYMC9JYyCECBAgAABAgRaI3B1fPx0rlY72ppoohBorcDKv/33YfkT/6y1QUUjQIBARgR6evZsjwwOfOmuydILGSlZmQQIECBAgAABAgQIECBAgAABAgQIEEidgFvcU9dSBXVYYHBf/tWDhyY+3eFjHUeAQAIFDLgnsGlSJkCAAAECBNIrUCkWl0IIw+mtUGVJFtg6BpCdZQAAIABJREFUdG+48p3vJbkEuRMgQKArAgMDe+cLhZ4H3UjSFX6HEiBAgAABAgQIECBAgAABAgQIECBAoKUCb745s7ixsTnS0qCCEciQwJ2jg19wIVCGGq5UAjsUMOC+QzjbCBAgQIAAAQKtFlgcGRmp9vUttjqueARaKVD58f8M6717WxlSLAIECKRWoP6qzeHB/Hcnp8vHU1ukwggQIECAAAECBAgQIECAAAECBAgQIJAxgcsz809Wlla+lbGylUugZQL9/X1L9903NdqygAIRIJBKAQPuqWyroggQIECAAIEkCiyUSseiavWlJOYu5+wI3PiDr4elz3w2OwWrlAABAjsU6OvrXR8q9D/uBpIdAtpGgAABAgQIECBAgAABAgQIECBAgACBGAu88cbFtc3NrXyMU5QagVgLDA8VTk0fKD8a6yQlR4BAVwUMuHeV3+EECBAgQIAAgX8SqBSLz4YQnmFCIO4Csz/5X6Faq8U9TfkRIECgawL7Cvlz+YHot8vl8kzXknAwAQIECBAgQIAAAQIECBAgQIAAAQIECLRN4NLF2ecXl1efaNsBAhNIuUD9Lbj79+cP+C4l5Y1WHoFdCBhw3wWerQQIECBAgACBVgpUisXvhxC+3MqYYhFoh8Dyyf8QViYPtiO0mAQIEEi8wOhw4eTkdPl44gtRAAECBAgQIECAAAECBAgQIECAAAECBAh8pMDrr5+rVqtV83eeEwI7FBgY2Dt/zz2TH9vhdtsIEEi5gH9gU95g5REgQIAAAQLJEagUi6+GED6VnIxlmlWBrUP3hivf+V5Wy1c3AQIEPlCgp2fP9sjgwJfumiy9gIgAAQIECBAgQIAAAQIECBAgQIAAAQIE0i9w4fzl09dX1o+mv1IVEmifwB0jg9+4e6r0dPtOEJkAgaQKGHBPaufkTYAAAQIECKROoFIs1lJXlIJSK1D58f8M6717U1ufwggQINCMQP2GkUKh50Gv0WxGzVoCBAgQIECAAAECBAgQIECAAAECBAgkW2B29p2HFhaWf5rsKmRPoLsCURTV9u/PH/AdS3f74HQCcRQw4B7HrsiJAAECBAgQyJzA4tjYA9Vc7meZK1zBiRW48QdfD0uf+Wxi85c4AQIEWiUwPFQ4NX2g/Gir4olDgAABAgQIECBAgAABAgQIECBAgAABAskROHv20tza2s1ScjKWKYH4CdQvErrnnsmPxS8zGREg0E0BA+7d1Hc2AQIECBAgQOCXAlfHxh7L5XLfA0IgSQKzP/lfoVrz4oEk9UyuBAi0TqCnZ8/2yODAl+6aLL3QuqgiESBAgAABAgQIECBAgAABAgQIECBAgECSBN6emX/u2tLK15OUs1wJxFHgjpHBb9w9VXo6jrnJiQCB7ggYcO+Ou1MJECBAgAABAr8iUCkWnw0hPIOFQJIEVv7tvw/Ln/hnSUpZrgQIEGiJQP0mkUKh50Gvy2wJpyAECBAgQIAAAQIECBAgQIAAAQIECBBItMCZM+e3trdv9SS6CMkT6LJAFEW1/fvzB3z30uVGOJ5AjAQMuMeoGVIhQIAAAQIEsitwdXz8dK5WO5pdAZUnUWDr0L3hyne8eCCJvZMzAQI7FxgazL984ODEsZ1HsJMAAQIECBAgQIAAAQIECBAgQIAAAQIE0iRw4fzl09dX1n3Xm6amqqUrAv39fUv33Tc12pXDHUqAQOwEDLjHriUSIkCAAAECBLIoUCkWl0IIw1msXc3JFlj6wX8ON+4cT3YRsidAgEADAvWbQ0aHCl+bmCqdaGC5JQQIECBAgAABAgQIECBAgAABAgQIECCQEYHZ2XceWlhY/mlGylVmxgXq35dUq9W2zZ0ODxVOTR8oP5pxZuUTIBBCaNv/0dAlQIAAAQIECBBoTGBxZGSk2te32NhqqwjES2D1s4+Gxa/8YbySkg0BAgRaLNDX17s+PNx3xGsxWwwrHAECBAgQIECAAAECBAgQIECAAAECBFIicPbspbm1tZullJSjDAIfKlB/022tFoZXbqw/0C6mO0cHv3DXZOmFdsUXlwCBZAgYcE9Gn2RJgAABAgQIpFhgoVQ6FlWrL6W4RKWlXGDhv/9duJnbk/IqlUeAQFYFBvflXz14aOLTWa1f3QQIECBAgAABAgQIECBAgAABAgQIECBwe4FLF2efX1xefeL2K60gkGyB/SODT9Xfdnvurctv3VhdP9SOalw81A5VMQkkT8CAe/J6JmMCBAgQIEAgZQKVYvHZEMIzKStLORkSuPEHXw9Ln/lshipWKgECWRCov2JzeDD/3cnp8vEs1KtGAgQIECBAgAABAgQIECBAgAABAgQIENi5wOzs7FSlsn6hWq2ax9s5o50JEBgbK0y/+8bbN9+cWdzY2BxpR9r7Cvlzhw5PHG5HbDEJEEiGgH9Qk9EnWRIgQIAAAQIpFqgUi98PIXw5xSUqLQMCV37y92GrloFClUiAQCYE6jeDDBX6H/f6y0y0W5EECBAgQIAAAQIECBAgQIAAAQIECBBoiUA7b7RuSYKCENilQP37kyNHpgfeDVP/Ycfy8uYbm5tb+V2G/sDto8OFky4iaoesmASSIWDAPRl9kiUBAgQIECCQYoFKsfhqCOFTKS5RaRkQWPm3/z4sf+KfZaBSJRIgkHaBgYG984VCz4Pv3j6S9nrVR4AAAQIECBAgQIAAAQIECBAgQIAAAQKtEXh7Zv65a0srX29NNFEIxE9gcF/+1YOHJj793szaPeR+5+jgF1xIFL9nQUYEOiFgwL0Tys4gQIAAAQIECHyEQKVYdO+1JyTxArXBkTD34o9DteZxTnwzFUAgwwLDQ4VT0wfKj2aYQOkECBAgQIAAAQIECBAgQIAAAQIECBAgsAuB118/V61Wq2bydmFoa3wF7hgZ/MbdU6Wn359hfch9fa36tzdW1w+1Ovuenj3bo6P9h11M1GpZ8QjEX8A/pvHvkQwJECBAgACBFAsslErHomr1pRSXqLQMCSyf/A9hZfJghipWKgECaRGIoqg2OlT42sRU6URaalIHAQIECBAgQIAAAQIECBAgQIAAAQIECHRe4Nxbl99qx5Bv5ytxIoFfFxgbK0x/1KB5u57//v6+pfvumxrVEwIEsiVgwD1b/VYtAQIECBAgEDOBq2Njj+Vyue/FLC3pENiRwNahe8OV73icd4RnEwECXRPo6+tdHx7uO+Lmj661wMEECBAgQIAAAQIECBAgQIAAAQIECBBIjcDbM/PPXVta+XpqClIIgV8K1L9POXJkeuB2IBfOXz59fWX96O3WNfvng/vyrx48NPHpZvdZT4BAcgUMuCe3dzInQIAAAQIEUiBQGRs7EXK5r6agFCUQ+IXA0g/+c7hx5zgNAgQIJELAh6GJaJMkCRAgQIAAAQIECBAgQIAAAQIECBAgkCiB118/V61Wq+byEtU1yd5OoJnvVC5dnH1+eWX991v992B0uHBycrp8/Ha5+nMCBNIh4B/SdPRRFQQIECBAgEBCBa6Oj5/O1Wot//VyQjmknQIBt7inoIlKIJABgSiKasOD+e/6EDQDzVYiAQIECBAgQIAAAQIECBAgQIAAAQIEOixw7q3Lb91YXT/U4WMdR6CtAvtHBp+amCqdaPSQn1+a//z11Y3vbW5u5Rvd08i6O0cHv3DXZOmFRtZaQ4BAsgUMuCe7f7InQIAAAQIEEi5QKRaXQgjDCS9D+gR+RWDx1P8bVgtDVAgQIBBLgZ6ePdsjgwNf8uFnLNsjKQIECBAgQIAAAQIECBAgQIAAAQIECCRe4O2Z+eeuLa18PfGFKIDALwXqFwd98pOHomZBZmdnp9bXqn/byh981HPZv3/wt8rl4ivN5mM9AQLJEjDgnqx+yZYAAQIECBBIkcBiqTRdrVYvpKgkpRD4hcDqZx8Ni1/5QxoECBCInUB/f9/S4GDvA+VyeSZ2yUmIAAECBAgQIECAAAECBAgQIECAAAECBFIhUB/qXVhYvZiKYhRBIIQwMLB3/p57Jj+2U4z6jz6Wrq/+SbVabcm8al9f7/rwcN8R3/fstCP2EUiGQEv+DyMZpcqSAAECBAgQIBAvgYVS6VhUrb4Ur6xkQ6A1ApUf/8+w3ru3NcFEIUCAQAsEBvflXz14aOLTLQglBAECBAgQIECAAAECBAgQIECAAAECBAgQ+EiBs2cvza2t3SxhIpAGgdHhwsnJ6fLx3dRS/+HH6ur2/27V34v6pUb33Tc1upuc7CVAIN4CBtzj3R/ZESBAgAABAikWqBSLz4YQnklxiUrLsIBb3DPcfKUTiJlA/VWVI0OFb949VXo6ZqlJhwABAgQIECBAgAABAgQIECBAgAABAgRSKnDxwuyLy9dXH0lpecrKmMDY2PDD5XLxlVaUXb/N/fqNtT/c3r7Vs9t4+wr5c4cOTxzebRz7CRCIp4AB93j2RVYECBAgQIBABgSuFYunaiF8LgOlKjGjAm5xz2jjlU0gRgL1V1QOFfofv2uy9EKM0pIKAQIECBAgQIAAAQIECBAgQIAAAQIECKRcYHb2nYcWFpZ/mvIylZcBgfp3LUeOTA+0stT6be43N6p/fn1l/ehu4xpy362g/QTiK2DAPb69kRkBAgQIECCQcoFKsfhqCOFTKS9TeRkWcIt7hpuvdAIxEBgY2DtfKPQ8WC6XZ2KQjhQIECBAgAABAgQIECBAgAABAgQIECBAIGMCZ86c32rFLdUZY1NuzASGhwqnpg+UH21HWvUfgqyvbX7/xur6od3EHx0unJycLh/fTQx7CRCIn4AB9/j1REYECBAgQIBARgQqxWItI6UqM8MCbnHPcPOVTqCLAkOD+ZcPHJw41sUUHE2AAAECBAgQIECAAAECBAgQIECAAAECGRc499blt3Y7uJtxQuXHQGBsbPjhcrn4SjtTacWguyH3dnZIbALdETDg3h13pxIgQIAAAQIZF1golY5F1epLGWdQfgYE3OKegSYrkUCMBKIoqo0MFb5591Tp6RilJRUCBAgQIECAAAECBAgQIECAAAECBAgQyKDApYuzzy8urz6RwdKVnBKBvr7e9SNHpgc6Vc67g+5r6zcPVqvVpmdbDbl3qlPOIdAZgab/T6AzaTmFAAECBAgQIJBugatjY4/lcrnvpbtK1RH4BwG3uHsSCBDohED9Q9ahQv/jd02WXujEec4gQIAAAQIECBAgQIAAAQIECBAgQIAAAQIfJTA7Ozu1sLB6kRKBpAoMDxVOTR8oP9rp/Ot/dzZvhhOraxu/s719q6eZ8w25N6NlLYF4Cxhwj3d/ZEeAAAECBAikVKAyNnYi5HJfTWl5yiLwKwJucfdAECDQboGBgb3zhULPg+VyeabdZ4lPgAABAgQIECBAgAABAgQIECBAgAABAgQaFXjjjYtrm5tb+UbXW0cgTgJjY8MPl8vFV7qZ088vzX9+Y3P7/27mVndD7t3smLMJtE7AgHvrLEUiQIAAAQIECDQscHV8/HSuVjva8AYLCSRcYOHHfxtu9vYnvArpEyAQR4GhwfzLBw5OHItjbnIiQIAAAQIECBAgQIAAAQIECBAgQIAAgWwLnD93+WcrN9YfyLaC6pMoUH9z7pEj0wNxyv3tmfnntra3P7O+sfkbt7vZvVy+85mxsdE/i1P+ciFAoDkBA+7NeVlNgAABAgQIEGiJQKVYXAohDLckmCAEEiAwf9+RsP3vnk9AplIkQCApAlEU1YYH89+dnC4fT0rO8iRAgAABAgQIECBAgAABAgQIECBAgACBbAlcujj7/OLy6hPZqlq1aRAYHiqcmj5QfjSutczOvvPQ9ub2Y1vb1WMbNzenPmjg3U3uce2evAg0JmDAvTEnqwgQIECAAAECLRNYLJWmq9XqhZYFFIhAzAVu5nKhEkLo/cu/DjfvHI95ttIjQCAJAj09e7ZHBge+dNdk6YUk5CtHAgQIECBAgAABAgQIECBAgAABAgQIEMimQH0Id2Fh+afZrF7VSRYYGxt+uFwuvpKUGmZnZ6eqW9GjW7e2H6nVwvDW9q3p7e1b+4b2Dfybu6dKTyelDnkSIPBPAgbcPQ0ECBAgQIAAgQ4LLJRKx6Jq9aUOH+s4Al0TWImisFKrhdy9Hw+33OLetT44mEBaBPr7+5YGB3sfKJfLM2mpSR0ECBAgQIAAAQIECBAgQIAAAQIECBAgkF6BM2fOb33Q7dLprVhlSRcYGNg7f889kx9Leh3yJ0Ag2QIG3JPdP9kTIECAAAECCRSoFIvPhhCeSWDqUiawI4GrURQ2a7Vf7O19/i/CzcmDO4pjEwECBAb35V89eGji0yQIECBAgAABAgQIECBAgAABAgQIECBAgEBSBM6evTS3tnazlJR85UlgdLhwcnK6fJwEAQIEuilgwL2b+s4mQIAAAQIEMilwrVg8VQvhc5ksXtGZE6jlcmHuPVVHwyOh+lc/CtVfDrxnDkTBBAjsWMCHqTums5EAAQIECBAgQIAAAQIECBAgQIAAAQIEuihw4fzl09dX1o92MQVHE2hYIIqi2ic/eShqeIOFBAgQaJOAAfc2wQpLgAABAgQIEPgwgUqx+GoI4VOECGRBYCOKwrX3DbPvOfHtsPUJfwWy0H81EmiFQP2D1DuGC1+8a7L0QiviiUGAAAECBAgQIECAAAECBAgQIECAAAECBDopcHlm/snK0sq3OnmmswjsVGBfIX/u0OGJwzvdbx8BAgRaJWDAvVWS4hAgQIAAAQIEGhSoFIu1BpdaRiDxAtejKNz4gNvao//xStj2NyHx/VUAgXYL9PX1rg8P9x0pl8sz7T5LfAIECBAgQIAAAQIECBAgQIAAAQIECBAg0A6B2dnZqYWF1YvtiC0mgVYL3Dk6+AWXDrVaVTwCBHYiYMB9J2r2ECBAgAABAgR2KLBQKh2LqtWXdrjdNgKJE7gSReHWBwy4h6/9cah+5ncTV4+ECRDonED9hpD8QPTbhts7Z+4kAgQIECBAgAABAgQIECBAgAABAgQIEGiPwJkz57e2t2/1tCe6qARaI1C/eOjIkemB1kQThQABArsTMOC+Oz+7CRAgQIAAAQJNCVTGx58MtZrXzzWlZnFSBW7lcuHKRyTf86OfhM3e/qSWJ28CBNooMDxUODV9oPxoG48QmgABAgQIECBAgAABAgQIECBAgAABAgQIdEzg7NlLc2trN0sdO9BBBHYgMDpcODk5XT6+g622ECBAoOUCBtxbTiogAQIECBAgQODDBSpjYydCLvdVRgSyILAeRWHxg25v/2Xxm7/zudDzlT/KAoUaCRBoUCCKotrIUOGbd0+Vnm5wi2UECBAgQIAAAQIECBAgQIAAAQIECBAgQCD2AhfOXz59fWX9aOwTlWBmBerf0ezfnz/gzbqZfQQUTiB2AgbcY9cSCREgQIAAAQJpFrg6Pn46V6v54CLNTVbbPwosRVFY+4gB9/rC3r/863DzznFqBAgQCPXXXg4V+h+/a7L0Ag4CBAgQIECAAAECBAgQIECAAAECBAgQIJAmgbdn5p+7trTy9TTVpJZ0CQzuy7968NDEp9NVlWoIEEiygAH3JHdP7gQIECBAgEDiBCrFYi1xSUuYwA4F5qIo1G4z4J679+Oh9u2ToXqbdTtMwTYCBBIi0N/ftzQ42PuAW0ES0jBpEiBAgAABAgQIECBAgAABAgQIECBAgEBTAj+/NP/5q4srP2xqk8UEOigwNjb8cLlcfKWDRzqKAAECHylgwN0DQoAAAQIECBDokMBiqTRdrVYvdOg4xxDoqsBWLhcWGsxgz4lvh61PfKrB1ZYRIJA2gX2F/LlDhycOp60u9RAgQIAAAQIECBAgQIAAAQIECBAgQIAAgfcKvPbaWZeheSRiKTAwsHf+nnsmPxbL5CRFgEBmBQy4Z7b1CidAgAABAgQ6LXC1WHwkF8KLnT7XeQS6IbASRWGliVvZo//xStj2kV43WuVMAl0VGB0unJycLh/vahIOJ0CAAAECBAgQIECAAAECBAgQIECAAAECHRB4442La5ubW/kOHOUIAk0J7B8ZfGpiqnSiqU0WEyBAoM0CBtzbDCw8AQIECBAgQOBdgUqx+GwI4RkiBLIgcDWKwmYTA+6bv/O50POVP8oCjRoJEAghRFFUu2O48MW7JksvACFAgAABAgQIECBAgAABAgQIECBAgAABAlkQePPNmcWNjc2RLNSqxuQI9PX1rh85Mj2QnIxlSoBAVgQMuGel0+okQIAAAQIEui5wrVg8VQvhc11PRAIE2ixQy+XC3A7O6H3xx+FmYWgHO20hQCBJAvUPSoeHB/55uVx8JUl5y5UAAQIECBAgQIAAAQIECBAgQIAAAQIECOxG4ML5y6evr6wf3U0Mewm0WsDbdlstKh4BAq0SMODeKklxCBAgQIAAAQK3EagUixdDCFOgCKRdYCOKwrUmbm9/1yN378dD7dsnQ3UHe9Nuqj4CaRHo7+9bGhzsfaBcLs+kpSZ1ECBAgAABAgQIECBAgAABAgQIECBAgACBRgQuXph9cfn66iONrLWGQCcEenr2bN9//8HeTpzlDAIECDQrYMC9WTHrCRAgQIAAAQI7FKgUi7UdbrWNQKIErkdRuLHDIfU9J74dtj7xqUTVK1kCBBoT2FfInzt0eOJwY6utIkCAAAECBAgQIECAAAECBAgQIECAAAEC6RK4PDP/ZGVp5Vvpqko1SRZwe3uSuyd3AukXMOCe/h6rkAABAgQIEIiBwEKpdCyqVl+KQSpSINB2gStRFG7tcMC9nlz0P14J234O0vY+OYBAJwV8QNpJbWcRIECAAAECBAgQIECAAAECBAgQIECAQBwFfn5p/vNXF1d+GMfc5JQ9Abe3Z6/nKiaQNAED7knrmHwJECBAgACBRApUxsefDLWaX+MnsnuSbkbgVi4XrjSz4QPWbv7O50LPV/5ol1FsJ0AgDgJRFNWGB/PfnZwuH49DPnIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLdFHjttbOueepmA5z9jwJDg/mXDxycOIaEAAECcRUw4B7XzsiLAAECBAgQSJVAZWzsRMjlvpqqohRD4AMEVqMoLO/i9vZ3Q/Y+/xfh5uRBxgQIJFigPtx+x3Dhi3dNll5IcBlSJ0CAAAECBAgQIECAAAECBAgQIECAAAECLRMw4N4ySoF2IVD/Dmf//vyBcrk8s4swthIgQKCtAgbc28orOAECBAgQIEDgHwSujo+fztVqR3kQSLvAtSgKGy0YcI+GR0L1r34Uqi2IlXZz9RGIo0BfX+/6UKH/ccPtceyOnAgQIECAAAECBAgQIECAAAECBAgQIECgWwJvvjmzuLGxOdKt851LoC7g9nbPAQECSRAw4J6ELsmRAAECBAgQSLxApVj0qrnEd1EBjQjMRVGotWgo/dZjT4Tc7z3eyLHWECAQI4H6cPvwcN8Rt37EqClSIUCAAAECBAgQIECAAAECBAgQIECAAIFYCBhwj0UbMp1ET8+e7dHR/sO+x8n0Y6B4AokQMOCeiDZJkgABAgQIEEiywGKpNF2tVi8kuQa5E2hE4GYuFyqNLGxiTe+LPw43C0NN7LCUAIFuCgwM7J0vFHoe9KFoN7vgbAIECBAgQIAAAQIECBAgQIAAAQIECBCIq8DZs5fm1tZuluKan7zSLzA6XDg5OV0+nv5KVUiAQNIFDLgnvYPyJ0CAAAECBGIvcLVYfCQXwouxT1SCBHYpcD2Kwo0W3d7+biq5ez8eat8+GaotjrvLUm0nQOADBPYV8ucOHZ44DIcAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4YIEL5y+fvr6yfpQPgW4I1G9vv//+g73dONuZBAgQaFbAgHuzYtYTIECAAAECBJoUqBSLz4YQnmlym+UEEiewEEVhqw2D6NGfPRe2H3w4cR4SJpAlAcPtWeq2WgkQIECAAAECBAgQIECAAAECBAgQIEBgpwIG3HcqZ18rBNze3gpFMQgQ6JSAAfdOSTuHAAECBAgQyKzAtWLxVC2Ez2UWQOGZELiVy4Urbay050c/CZu9/W08QWgCBHYqMDxUODV9oPzoTvfbR4AAAQIECBAgQIAAAQIECBAgQIAAAQIEsiJgwD0rnY5fnX19vetHjkwPxC8zGREgQOCDBQy4ezIIECBAgAABAm0WqBSLF0MIU20+RngCXRVYj6Kw2Ibb298tKnfvx0Pt2ydDtY1ndBXQ4QQSKuCmj4Q2TtoECBAgQIAAAQIECBAgQIAAAQIECBAg0BWBSxdnn19cXn2iK4c7NNMC+0cGn5qYKp3INILiCRBIlIAB90S1S7IECBAgQIBAEgUqxWItiXnLmUAzAteiKGy0efg8+rPnwvaDDzeTlrUECLRRwHB7G3GFJkCAAAECBAgQIECAAAECBAgQIECAAIFUClyemX+ysrTyrVQWp6jYCvT39y3dd9/UaGwTlBgBAgQ+QMCAu8eCAAECBAgQINBGgYVS6VhUrb7UxiOEJhALgbkoCrU2D7jXC+350U/CZm9/LGqWBIEsCxhuz3L31U6AAAECBAgQIECAAAECBAgQIECAAAECOxUw4L5TOft2IzA2NvxwuVx8ZTcx7CVAgECnBQy4d1rceQQIECBAgECmBCrj40+GWs0v8DPV9ewVezOXC5UOlZ279+Oh9u2TodqBYfoOleQYAokSiKKoNjJU+ObdU6WnE5W4ZAkQIECAAAECBAgQIECAAAECBAgQIECAQAwEDLjHoAkZS2FwX/7Vg4cmPp2xspVLgEAKBAy4p6CJSiBAgAABAgTiK1ApFr8fQvhyfDOUGYHdC1yPonCjgwPntx57IuR+7/HdJy4CAQJNCdSH2+8YLnzxrsnSC01ttJgAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4hYABdw9CJwXq3+3s358/UC6XZzp5rrMIECDQCgED7q1QFIMAAQIECBAg8CECV8fHT+dqtaOACKRZYCGKwlYHB9wrWfrkAAAgAElEQVTrlr0v/jjcLAylmVVtBGIlYLg9Vu2QDAECBAgQIECAAAECBAgQIECAAAECBAgkVMCAe0Ibl9C0h4cKp6YPlB9NaPrSJkAg4wIG3DP+ACifAAECBAgQaK9ApVistfcE0Ql0V+BWLheudCGFaHgkVP/qR6Ha4cH6LpTqSAJdFzDc3vUWSIAAAQIECBAgQIAAAQIECBAgQIAAAQIEUiJgwD0ljUxAGX19vetHjkwPJCBVKRIgQOADBQy4ezAIECBAgAABAm0SWBwbe6Cay/2sTeGFJRALgfUoCotdGjLf/J3PhZ6v/FEsHCRBIK0ChtvT2ll1ESBAgAABAgQIECBAgAABAgQIECBAgEA3BAy4d0M9m2fuHxl8amKqdCKb1auaAIE0CBhwT0MX1UCAAAECBAjEUuBqsfhILoQXY5mcpAi0SOBaFIWNLg2410voff4vws3Jgy2qRhgCBN4rYLjd80CAAAECBAgQIECAAAECBAgQIECAAAECBForYMC9tZ6ifbDAvkL+3KHDE4f5ECBAIMkCBtyT3D25EyBAgAABArEWqBSLz4YQnol1kpIjsEuBuSgKtS4OuNfT7/lvL4fN3J5dVmI7AQLvFTDc7nkgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKtFzDg3npTEX9VoP4dz/79+QPlcnmGDQECBJIsYMA9yd2TOwECBAgQIBBrgavj46dztdrRWCcpOQK7ENiIonCty8Pt9fRv/eZDYc+ffjNUY5DLLjhtJRAbAcPtsWmFRAgQIECAAAECBAgQIECAAAECBAgQIEAgZQIG3FPW0BiWc8fI4Dfunio9HcPUpESAAIGmBAy4N8VlMQECBAgQIECgcYFKsXgxhDDV+A4rCSRL4HoUhRtxGSr/2h+H6md+N1mAsiUQUwEffMa0MdIiQIAAAQIECBAgQIAAAQIECBAgQIAAgcQLGHBPfAtjXUB/f9/SffdNjcY6SckRIECgQQED7g1CWUaAAAECBAgQaEZgcWRkpNrXt9jMHmsJJE3gShSFW3EZcA8h9L7443CzMJQ0RvkSiJXA6HDh5OR0+XiskpIMAQIECBAgQIAAAQIECBAgQIAAAQIECBBIiYAB95Q0MoZl1N/Qu3//4G+Vy8VXYpielAgQINC0gAH3pslsIECAAAECBAjcXmChVDoWVasv3X6lFQSSKXArlwtXYpZ6NDwSwl/917Bdi1li0iGQEAHD7QlplDQJECBAgAABAgQIECBAgAABAgQIECBAILECBtwT27rYJz48VDg1faD8aOwTlSABAgQaFDDg3iCUZQQIECBAgACBZgQq4+NPhlrtW83ssZZAkgRWoygsx+j29nftbv3mQyH37DeSRClXArEQMNweizZIggABAgQIECBAgAABAgQIECBAgAABAgRSLmDAPeUN7lJ5/f19S/fdNzXapeMdS4AAgbYIGHBvC6ugBAgQIECAQNYFKsXi90MIX866g/rTK3A1isJmDAfc6+LRnz0Xth98OL34KiPQYoGhwfzLBw5OHGtxWOEIECBAgAABAgQIECBAgAABAgQIECBAgACB9wkYcPdItFogiqLa/v2Dv1UuF19pdWzxCBAg0E0BA+7d1Hc2AQIECBAgkFqBq+Pjp3O12tHUFqiwTAvUcrkwF3OB3hd/HG4WhmKepfQIdF9gXyF/7tDhicPdz0QGBAgQIECAAAECBAgQIECAAAECBAgQIEAg/QKXLs4+v7i8+kT6K1VhpwTuGB38wd2Tpd/r1HnOIUCAQKcEDLh3Sto5BAgQIECAQKYEKsViLVMFKzZTAhtRFK7F9Pb2dxsRDY+E6D/9TdjM7clUbxRLoBkBw+3NaFlLgAABAgQIECBAgAABAgQIECBAgAABAgR2L3Dh/OXT11fWXZS2e0oRQggDA3vn77ln8mMwCBAgkEYBA+5p7KqaCBAgQIAAga4KLI6NPVDN5X7W1SQcTqCNAktRFNZiPuBeL//Wbz4U9vzpN0M1Abm2sV1CE/hAgb6+3vUjR6YH8BAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKdEzDg3jnrtJ8URVFt//78gXK5PJP2WtVHgEA2BQy4Z7PvqiZAgAABAgTaKHC1WHwkF8KLbTxCaAJdFZiLolBLytD41/44VD/zu131cjiBuAnUh9uHh/uO+MAzbp2RDwECBAgQIECAAAECBAgQIECAAAECBAikXcCAe9o73Ln69o8MPjUxVTrRuROdRIAAgc4KGHDvrLfTCBAgQIAAgQwIVIrFZ0MIz2SgVCVmUGArlwsLCau79/m/CDcnDyYsa+kSaI+A2zza4yoqAQIECBAgQIAAAQIECBAgQIAAAQIECBBoRODNN2cWNzY2RxpZaw2BDxMY3Jd/9eChiU8TIkCAQJoFDLinubtqI0CAAAECBLoicHV8/HSuVjvalcMdSqDNAtejKNxIyu3t77Ho+W8vh83cnjbrCE8g3gL14fY7hgtfvGuy9EK8M5UdAQIECBAgQIAAAQIECBAgQIAAAQIECBBIp4AB93T2tZNV1d/Ue+TI9EAnz3QWAQIEuiFgwL0b6s4kQIAAAQIEUi1QKRYvhhCmUl2k4jIrsBBFYSuBA+7R8Eio/tWPQjWBuWf2YVN4ywXuGBn8xt1TpadbHlhAAgQIECBAgAABAgQIECBAgAABAgQIECBAoCGBM2fOb21v3+ppaLFFBN4n8A9v6h38rXK5+AocAgQIpF3AgHvaO6w+AgQIECBAoKMCiyMjI9W+vsWOHuowAh0SuJXLhSsdOqsdx9z6zYfCnj/9piH3duCKGXuB0eHCycnp8vHYJypBAgQIECBAgAABAgQIECBAgAABAgQIECCQYoHXXjtbS3F5SmuzgMuM2gwsPAECsRIw4B6rdkiGAAECBAgQSLrAQql0LKpWX0p6HfIn8EECq1EUlpN+A/rX/jhUP/O7GkwgUwL7Cvlzhw5PHM5U0YolQIAAAQIECBAgQIAAAQIECBAgQIAAAQIxE5idnZ1aWFitvw3c/wg0LTC4L//qwUMTn256ow0ECBBIqIAB94Q2TtoECBAgQIBAPAUq4+NPhlrtW/HMTlYEdidwLYrCRtIH3EMIvc//Rbg5eXB3GHYTSIhAX1/v+pEj0wMJSVeaBAgQIECAAAECBAgQIECAAAECBAgQIEAgtQKXZ+afrCyt+C45tR1uX2G+72mfrcgECMRXwIB7fHsjMwIECBAgQCCBApVi8fshhC8nMHUpE/hIgVouF+ZSZNT74o/DzcJQiipSCoFfF+jp2bM9Otp/uFwuz/AhQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEuivw9sz8c9eWVr7e3SycnjSBKIpq+/fnD/i+J2mdky8BArsVMOC+W0H7CRAgQIAAAQLvEagUi6+GED4FhUDaBNajKCym4Pb2d/sSDY+E6D/9TdjM7Ulbq9RD4BcC9Q877xgufPGuydILSAgQIECAAAECBAgQIECAAAECBAgQIECAAIHuC1w4f/n09ZX1o93PRAZJErhzdPALvu9JUsfkSoBAqwQMuLdKUhwCBAgQIECAQAihUizWQBBIo8BSFIW1FA2413uUu/fjofbtk6GasrrS+PypqXmB0eHCycnp8vHmd9pBgAABAgQIECBAgAABAgQIECBAgAABAgQItEPg7NlLc2trN0vtiC1mOgV835POvqqKAIHGBAy4N+ZkFQECBAgQIEDgtgKLY2MPVHO5n912oQUEEigwF0WhlsJB8Fu/+VDIPfuNBHZEygQ+XGBwX/7Vg4cmPs2IAAECBAgQIECAAAECBAgQIECAAAECBAgQiI/Am2/OLG5sbI7EJyOZxFlgXyF/7tDhicNxzlFuBAgQaKeAAfd26opNgAABAgQIZErg6tjYY7lc7nuZKlqxmRDYiKJwLYXD7f/YvK/9cah+5ncz0UtFpl+gv79v6b77pkbTX6kKCRAgQIAAAQIECBAgQIAAAQIECBAgQIBAsgRee+2st4Enq2Vdy9b3PV2jdzABAjESMOAeo2ZIhQABAgQIEEi2QKVYfDaE8Eyyq5A9gV8XuB5F4UaaB9xDCHtOfDtsfeJT2k8g0QJRFNX2788fKJfLM4kuRPIECBAgQIAAAQIECBAgQIAAAQIECBAgQCBlArOz7zy0sLD805SVtaty6t9rDO7L/83y9dVHdhUoZZv7+nrXh4f7jvi+J2WNVQ4BAk0LGHBvmswGAgQIECBAgMAHC1wdHz+dq9WO8iGQNoErURRupXzAvd6z3r/863DzzvG0tU89GRLYPzL41MRU6USGSlYqAQIECBAgQIAAAQIECBAgQIAAAQIECBBIhMDbM/PPXVta+Xoiku1AkvUh7qFC/+O1WvhYZWnlWx04MhFH1If+7xgufPGuydILiUhYkgQIEGijgAH3NuIKTYAAAQIECGRLoFIsLoUQhrNVtWrTLrCVy4WFtBf5nvp6fvSTsNnbn6GKlZoWgaHB/MsHDk4cS0s96iBAgAABAgQIECBAgAABAgQIECBAgAABAmkSuHD+8unrK+suSwshvPeG8ssz808acP+nJ/3O0cEvGG5P0998tRAgsBsBA+670bOXAAECBAgQIPBLgcWRkZFqX98iEAJpE1iJorCSgdvb3+1bNDwSov/0N2EztydtrVRPigX6+/uW7rtvajTFJSqNAAECBAgQIECAAAECBAgQIECAAAECBAgkWuDNN2cWNzY2RxJdRAuS31fInzt0eOLwu6EM/v8T6uhw4eTkdPl4C5iFIECAQCoEDLinoo2KIECAAAECBLotsFAqHYuq1Ze6nYfzCbRaYCGKwlaGBtzrfvUh9+pf/ShUM1Z3q58d8TojUH9V5f79+QPlcnmmMyc6hQABAgQIECBAgAABAgQIECBAgAABAgQIEGhW4PXXz1Wr1WqmZ/U+6G20Btz/4Uky3N7s3yjrCRDIgkCm/9HMQoPVSIAAAQIECHRGoFIsPhtCeKYzpzmFQGcEbuVy4UpnjordKbd+86Gw50+/acg9dp2R0PsF7hgZ/MbdU6WnyRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLxFPj5pfnPX11c+WE8s2t/VvXLeoYH89/9oNvJDbiH8P5b7dvfEScQIEAgGQIG3JPRJ1kSIECAAAECMReoFIvfDyF8OeZpSo9AUwKrURSWM3yLuSH3ph4Xi7sgMLgv/+rBQxOf7sLRjiRAgAABAgQIECBAgAABAgQIECBAgAABAgQaFLh0cfb5xeXVJxpcnqplPT17tkcGB75012TphQ8q7M03ZxY3NjZHUlV0E8UYbm8Cy1ICBDInYMA9cy1XMAECBAgQINAOgUqx+GoI4VPtiC0mgW4JLERR2MrwgHvd/dZjT4Tc7z3erRY4l8CHCvT19a4PD/cdKZfLM5gIECBAgAABAgQIECBAgAABAgQIECBAgACB+Aqce+vyWzdW1w/FN8P2ZNbf37c0ONj7wEd9l5HlAXfD7e157kQlQCA9Agbc09NLlRAgQIAAAQJdFKgUi7UuHu9oAi0XqOVyYa7lURMa8Gt/HKqf+d2EJi/ttArcOTr4hQ+77SStNauLAAECBAgQIECAAAECBAgQIECAAAECBAgkUeDMmfNb29u3epKY+05zbvQttK+/fq5arVYzN8NYv8joyJHpgZ362keAAIEsCGTuH4csNFWNBAgQIECAQGcFFsfGHqjmcj/r7KlOI9BegfUoCosZv739V4QNubf3gRO9KYGhwfzLBw5OHGtqk8UECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAxwVmZ995aGFh+acdP7hLB0ZRVBsezH93crp8vJEUXnvtbOYukvOW3kaeDGsIECAQggF3TwEBAgQIECBAYJcCV8fGHsvlct/bZRjbCcRK4FoUhQ0D7r/Sk+jPngvbDz4cqz5JJnsCbvTIXs9VTIAAAQIECBAgQIAAAQIECBAgQIAAAQLJFbh0cfb5xeXVJ5JbQeOZ17/DGCr0P97oG2izNvxflzTc3vjzZCUBAgQMuHsGCBAgQIAAAQK7FKgUi8+GEJ7ZZRjbCcRGoJbLhbnYZBOvRHr/8q/DzTvH45WUbDIlcOfo4Bca/WA4UzCKJUCAAAECBAgQIECAAAECBAgQIECAAAECMRQ4e/bS3NrazVIMU2tpSvsK+XP5gei3y+XyTKOBL8/MP1lZWvlWo+uTvs5we9I7KH8CBDotYMC90+LOI0CAAAECBFIncHV8/HSuVjuausIUlFmB9SgKi25v/9D+G3LP7F+Nrhc+NJh/+cDBiWNdT0QCBAgQIECAAAECBAgQIECAAAECBAgQIECAQEMCr79+rlqtVlM7oxdFUW14MP/dyeny8YZA3rMoa7fbDw/3HWnmBwDNelpPgACBtAmk9h/PtDVKPQQIECBAgEB8BSrF4lIIYTi+GcqMQHMC16IobBhw/0g0Q+7NPVNW716gp2fP9v33H+zdfSQRCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgU4IpP2G8vqN5EOF/sd3+ubZC+cvn76+sp76i+Tc3N6Jv23OIEAgjQIG3NPYVTURIECAAAECHRNYHBkZqfb1LXbsQAcR6IDAXBSFmgH320obcr8tkQUtFNg/MvjUxFTpRAtDCkWAAAECBAgQIECAAAECBAgQIECAAAECBAi0UeD8ucs/W7mx/kAbj+ha6H2F/Ln8QPTbu7mR/OzZS3NrazdLXSuiAwcbbu8AsiMIEEitgAH31LZWYQQIECBAgEAnBBZKpWNRtfpSJ85yBoFOCGxEUbhmuL1hakPuDVNZuAuB+ofEhw5PHN5FCFsJECBAgAABAgQIECBAgAABAgQIECBAgACBDgucOXN+a3v7Vk+Hj23rcVEU1UaGCt+8e6r09G4PeuONi2ubm1v53caJ637D7XHtjLwIEEiKgAH3pHRKngQIECBAgEAsBSrF4rMhhGdimZykCOxAYCmKwpoB96bken/w1+Hm/vGm9lhMoFGB+gfF+/fnD+zmBpRGz7KOAAECBAgQIECAAAECBAgQIECAAAECBAgQaI3Azy/Nf/7q4soPWxMtHlH6+/uWBgfzny2Xi6+0IqPXXjtba0WcOMYYGNg7Xyj0POj7nTh2R04ECCRFwIB7UjolTwIECBAgQCCWApVi8fshhC/HMjlJEdiBwFwUhZoB96bkBkI4Ff7+//vkjdX1Q01ttJhAAwKjw4WTk9Pl4w0stYQAAQIECBAgQIAAAQIECBAgQIAAAQIECBCIicD5c5d/tnJj/YGYpLPrNIaHCqemD5Qf3XWgXwZI4w8A3rXxZt5WPSXiECCQdQED7ll/AtRPgAABAgQI7EqgUiy+GkL41K6C2EwgJgIbURSuGW5vuhuFKJo+ODc3c+6ty28Zcm+az4aPEKi/uvLIkekBSAQIECBAgAABAgQIECBAgAABAgQIECBAgECyBM6cOb+1vX2rJ1lZ/3q29e8qhgr9j981WXqhlbW8PTP/3LWlla+3MmYcYhluj0MX5ECAQFoEDLinpZPqIECAAAECBLoiUCkWU/vatK6AOrSrAktRFNYMuDfVg7253Ll75+cPv7vJkHtTfBbfRmD/yOBTE1OlE6AIECBAgAABAgQIECBAgAABAgQIECBAgACB5Aik5XbyocH8ywcOThxrh/yF85dPX19ZP9qO2N2K2U6vbtXkXAIECHRTwIB7N/WdTYAAAQIECCRaYKFUOhZVqy8lugjJE3iPwFwUhZoB96aeiX0hfOHAlSu/cmOFIfemCC3+EAE3fHg0CBAgQIAAAQIECBAgQIAAAQIECBAgQIBAMgWS/l1Ru25tf283z569NLe2drOUzA7/etajw4WTk9Pl42mpRx0ECBCIg4AB9zh0QQ4ECBAgQIBAIgWujo09lsvlvpfI5CVN4H0CG1EUrhlub+q56A1h6eNXrox+0Kakf3DZFITFbREYGxt+uFwuvtKW4IISIECAAAECBAgQIECAAAECBAgQIECAAAECbRN4/fVz1Wq1msi5vE7dQn7mzPmt7e1bPW1rQocCR1FUGx0qfM0beTsE7hgCBDIlkMh/SDPVIcUSIECAAAECsRWojI2dCLncV2OboMQINCGwFEVhzYB7E2IhFKLo5MG5uQ+9icGQe1OcFr9HoFMfHkMnQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEWitw6eLs84vLq0+0Nmr7o/X39y3ty+/9P++aLP3Km4vbcfLs7OzUwsLqxXbE7mTM+nD7HcOFL3bCrJN1OYsAAQJxETDgHpdOyIMAAQIECBBInMDV8fHTuVrtaOISlzCBDxCYi6JQM+De8LORy+VqvzE/H91ugyH32wn58/cL1D8M3b8/f6BcLs/QIUCAAAECBAgQIECAAAECBAgQIECAAAECBJIl8OabM4sbG5sjScm6/r3E4L7830wfKD/aqZwvz8w/WVla+VanzmvHOX19vevDw31HfJ/TDl0xCRAg8A8CBtw9CQQIECBAgACBHQpUisWlEMLwDrfbRiA2AhtRFK4Zbm+qH/lc7uXD8/PHGtl08cLsi8vXVx9pZK01BNze7hkgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLJFJidfeehhYXlnyYl+4GBvfOFQv//US4XX+lkzhfOXz59fWU9sRfJ7Svkz+UHot823N7Jp8ZZBAhkUcCAexa7rmYCBAgQIEBg1wKLpdJ0tVq9sOtAAhCIgcD1KAo3DLg31YmhPXsenpqdbfjDvqS+jrIpFIt3LdDTs2d7dLT/sA9Ed00pAAECBAgQIECAAAECBAgQIECAAAECBAgQ6LhAUt7sW/8+YmjfwL+5e6r0dMeRQghJu+X+vUYuKurGE+NMAgSyKmDAPaudVzcBAgQIECCwK4GFUulYVK2+tKsgNhOIicCVKAq3DLg33I29udy5e+fnDze84ZcLDbk3K5a99aPDhZOT0+Xj2atcxQQIECBAgAABAgQIECBAgAABAgQIECBAINkCs7OzU5XK+oVqtRrrebz6gPbe/ujL3bxs5/XXz1Xj7vT+pzGKotrIUOGb3fpRQLL/dsieAAECOxOI9T+oOyvJLgIECBAgQIBA+wUqxeKzIYRn2n+SEwi0V2ArlwsL7T0iddH3RdFTB+bmTuyksLdn5p9bur76J0n70G4ntdrTnED9tpT77z/Y29wuqwkQIECAAAECBAgQIECAAAECBAgQIECAAIE4CFw4f/n09ZX1o3HI5YNy6O/vWxoczH+2XC42/IbidtTy80vzn7+6uPLDdsRuV8y+vt71oUL/43dNll5o1xniEiBAgMCvCxhw91QQIECAAAECBHYgcK1YPFUL4XM72GoLgVgJXI+icMPt7Q33pCeXWz8yPz/Q8IYPWFj/4O7a8uoPDLnvRjF9e93enr6eqogAAQIECBAgQIAAAQIECBAgQIAAAQIEsiNw5sz5re3tWz1xq7h+wc7wvoE/mpgq7ejyplbXc/HC7IvL11cfaXXcdsXbV8ifyw9Ev93NG+/bVZu4BAgQiLuAAfe4d0h+BAgQIECAQCwFKsXiqyGET8UyOUkRaEJgLopCzYB7w2KFKDp5cG7ueMMbPmRhfch9aWXtP8bxg87d1mZ/8wL111ru358/4MPR5u3sIECAAAECBAgQIECAAAECBAgQIECAAAEC3Ra4dHH2+cXl1Se6ncd7z69/9zC4L/830wfKj8Ypr7NnL82trd0sxSmnD8tleKhwKm5+SXCTIwECBFolYMC9VZLiECBAgAABApkSqBSLtUwVrNhUCmxEUbhmuL3h3uZyudpvzM9HDW+4zcLZ2dmp5eXNNzY3t/KtiilOMgWGBvMvHzg4cSyZ2cuaAAECBAgQIECAAAECBAgQIECAAAECBAhkWyBut7cP7su/2p+PHonjxTqvv36uGve3HNdvvR8ZHPjSXZOlF7L9ZKueAAEC3RUw4N5df6cTIECAAAECCRRYKJWORdXqSwlMXcoEfkVgKYrCmgH3hp+KfC738uH5+ZYOIdeH3FdWtl7d2NgcaTgRC1Ml4Pb2VLVTMQQIECBAgAABAgQIECBAgAABAgQIECCQMYE43d6+r5A/lx/oe6xcLr4SxzbU33B8dXHlh3HM7d2cBgb2zhcKPQ/G8ccBcXaTGwECBNohYMC9HapiEiBAgAABAqkWuDo29lgul/teqotUXCYE5qIo1Ay4N9zroT17Hp6anW3LB4Ln3rr81o3V9UMNJ2NhagTqHzYfOjxxODUFKYQAAQIECBAgQIAAAQIECBAgQIAAAQIECGRIIA63t/f39y0V+vf+6cRU6USc6S9emH1x+frqI3HMsX4h0fBg/ruT0+XjccxPTgQIEMiigAH3LHZdzQQIECBAgMCuBCpjYydCLvfVXQWxmUCXBTaiKFwz3N5wF/bmcufunZ9v6xBynD/UaxjKwqYFxsaGH47rTSpNF2MDAQIECBAgQIAAAQIECBAgQIAAAQIECBDIkEC3b29PymD7u4/E2bOX5tbWbpbi9oj09fWuDw8P/HPf18StM/IhQCDrAgbcs/4EqJ8AAQIECBBoWuDq+PjpXK12tOmNNhCIkcBSFIU1A+4Nd2RfFD11YG6u7bde1D8IXV5Z//1qteq/1RruTnIX1l9zec89kx9LbgUyJ0CAAAECBAgQIECAAAECBAgQIECAAAEC2RSYnZ2dWlzceGt7+1ZPpwXqA9mDA/3/Iu43tr/f5bXXztY6bXW784YG8y8fODhx7Hbr/DkBAgQIdF7A0ETnzZ1IgAABAgQIJFygUiwuhRCGE16G9DMuMBdFoWbAvaGnoDeEpY9fuTLa0OIWLPr5pfnPX1te/YEh9xZgxjzEHSOD37h7qvR0zNOUHgECBAgQIECAAAECBAgQIECAAAECBAgQIPA+gQvnL5++vrLe0UvRenr2bA8W+v98crp8PGkNea9QQ0cAACAASURBVHtm/rlrSytfj0ve9R8JDBX6H79rsvRCXHKSBwECBAj8qoABd08EAQIECBAgQKAJgcVSabparV5oYoulBGInsBFF4Zrh9ob7Uoiikwfn5jr6QeHs7DsPLS+v/ffNza18w4lamCiB+ofQ999/sDdRSUuWAAECBAgQIECAAAECBAgQIECAAAECBAgQCPXb2yuV9Quduqyov79vKb+396+TONj+7uNy7q3Lb91YXT8Uh8fHre1x6IIcCBAgcHsBA+63N7KCAAECBAgQIPCPAgul0rGoWn0JCYEkCyxFUVgz4N5QC/fkctufmJ/vyhBy/cPR1dXt/722drPUULIWJUrAh6eJapdkCRAgQIAAAQIECBAgQIAAAQIECBAgQIDAPwp0ali7Pthe6N/7pxNTpRNJ5z9z5vzW9vatnm7W4db2buo7mwABAs0LGHBv3swOAgQIECBAIMMClWLx2RDCMxkmUHoKBOaiKNQMuDfUyXwu9/Lh+fljDS1u06JuvOKyTaUI+x6BsbHhh8vl4itQCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgeQIXJ6Zf7KytPKtdmacpsH2utPPL81//uriyg/bafZRsaMoqu0r7P27AwcnuvqdX7fqdy4BAgSSKmDAPamdkzcBAgQIECDQFYFrxeKpWgif68rhDiXQAoGNKArXDLc3JJnL5WoDudyBg3NzMw1taOOiSxdnn19eWf/9Tr3qso2lCB1CGBjYO3/PPZMfg0GAAAECBAgQIECAAAECBAgQIECAAAECBAgkS+CNNy6ubW5u5duR9b5C/lx+oO+xtF2Qc/7c5Z+t3Fh/oB1mt4tZ/7HA4GD+s2kzvV3d/pwAAQJpEDDgnoYuqoEAAQIECBDomEClWLwYQpjq2IEOItBigWtRFDYMuDekujeXO3fv/PzhhhZ3YFH9doullbX/2O3XN3ag1NQfMTpcODk5XT6e+kIVSIAAAQIECBAgQIAAAQIECBAgQIAAAQIEUiRw8cLsi8vXVx9pZUnv3i6+t7/vX6Z1CPvMmfNbnf5+q6dnz/bQvoF/c/dU6elW9kssAgQIEOicgAH3zlk7iQABAgQIEEiBQKVYrKWgDCVkVKCWy4W5jNa+k7KH9ux5eGp29pWd7G3XntnZ2amVla1XNzY2R9p1hrjtFxgbK0yXy+Wuvxmg/ZU6gQABAgQIECBAgAABAgQIECBAgAABAgQIpENgdvadhyqVlb9r1dt2+/p61wv5vr9M+4U49Qucri6u/LCTT8HQYP7lvf3Rl30X00l1ZxEgQKD1AgbcW28qIgECBAgQIJBSgYVS6VhUrb6U0vKUlQGB9SgKi25vb6jTvSEsffzKldGGFndhUTdf5diFclN15MDA3vl77pn8WKqKUgwBAgQIECBAgAABAgQIECBAgAABAgQIEEi5wJtvziy24gKifYX8ub29Pf9uYqp0IuVkvyivk99pFQb6rw4U9j6a1pvws/C8qJEAAQLvFTDg7nkgQIAAAQIECDQoUBkffzLUat9qcLllBGIncC2KwoYB94b6si+KnjowNxfrDxbfnpl/bun66p+06qaQhmAs2rXA6HDhZNpvY9k1kgAECBAgQIAAAQIECBAgQIAAAQIECBAgQCBGAhcvzL64fH31kZ2m1NOzZ3sg3/f3e/v7/mXWhq/PnDm/tb19q2endo3sq9+GPzjQ/y+y8qOBRkysIUCAQBoEDLinoYtqIECAAAECBDoiUBkbOxFyua925DCHEGixQC2XC3MtjpnWcHtyue1PzM/3JqG++msdr69ufG9zcyufhHzlGMLYWGHaKzE9CQQIECBAgAABAgQIECBAgAABAgQIECBAIBkCs7PvPFSprPzdTi4cqr/Vtb+v7/t3T5WeTka1rc2y/j3W1cWVH7Y26j9Fq/9wYLDQ/+cuFmqXsLgECBDoroAB9+76O50AAQIECBBIkMDV8fHTuVrtaIJSliqBfxRYjaKw7Pb2hp6IQhSdPDg3d7yhxTFYNDs7O7W+Vv3bG6vrh2KQjhQ+QqD+QfY990x+DBIBAgQIECBAgAABAgQIECBAgAABAgQIECCQDIE33ri41sxFQ/Wh68JA/3/t2xuezPqFN+feuvxWO76/iqKotq+w9++mD9z1SC6XW0rGkyRLAgQIEGhWwIB7s2LWEyBAgAABApkVqBSLtcwWr/DECyxEUdgy4H7bPuZyudpvzM9Ht10YwwWXLs4+v7yy/vs7uUEkhuWkMqXhocKp6QPlR1NZnKIIECBAgAABAgQIECBAgAABAgQIECBAgEDKBC6cv3z6+sr6bS9Aqw9cFwb2vra3t+cbd02WXkgZw47Lef31c9VWfm/17mD73v7oy1n/8cCOm2IjAQIEEiRgwD1BzZIqAQIECBAg0D2BxVJpulqtXuheBk4msHOBW7lcuLLz7Znamc/lXj48P38sqUXXX/V4fXXje83cJJLUWpOY99jY8MPlcvGVJOYuZwIECBAgQIAAAQIECBAgQIAAAQIECBAgkCWByzPzT1aWVr71YTXXh60H8nvP9/X2/D93T5WezpJNI7XWL2ZaXF59opG1t1tjsP12Qv6cAAEC6RQw4J7OvqqKAAECBAgQaLHA1WLxkVwIL7Y4rHAEOiKwGkVh2e3tDVkXomj64NzcTEOLY7podnZ2an2t+rfteOVjTEtORFr1V5Lef//B3kQkK0kCBAgQIECAAAECBAgQIECAAAECBAgQIJBhgfp3LZXK+oUPun18YGDv/N7enh9NTpePZ5jotqWfPXtpbm3tZum2Cz9igcH23ejZS4AAgeQLGHBPfg9VQIAAAQIECHRAoFIsPhtCeKYDRzmCQMsFrkRRuGXA/baue3O5c/fOzx++7cKELHh7Zv65peurf9LKVz8mpPRYprmvkD936PBEap6vWCJLigABAgQIECBAgAABAgQIECBAgAABAgQItEDgzTdnFjc2Nkfqod69qb23Jzrd0xf+VblcTvRFSS3guW2I2dl3HlpYWP7pbRd+yAKD7TuVs48AAQLpEjDgnq5+qoYAAQIECBBok8C1YvFULYTPtSm8sATaJrCVy4WFtkVPV+ChPXsenpqdfSVNVdU/QFxZWf8v734Im6baklbLHSOD3/CK0qR1Tb4ECBAgQIAAAQIECBAgQIAAAQIECBAgkDWB8+cu/2x9Y/M3+vf2zfT19vw/Pttv/gm4cP7y6esr60eb3Vl/G+5gof/P3Y7frJz1BAgQSKeAAfd09lVVBAgQIECAQIsFKsXixRDCVIvDCkeg7QLXoyjccHv7bZ37crn5++bnP3bbhQldsNMPEhNabizTHhsbfrhcLqbqBxSxhJYUAQIECBAgQIAAAQIECBAgQIAAAQIECBDYhcDPL81//q7J0gu7CJH5rWfOnN/a3r7V0yhEf3/f0kD/3u/4MUGjYtYRIEAgGwIG3LPRZ1USIECAAAECuxSoFIu1XYawnUBXBK5EUbhlwP229vui6KkDc3MnbrswwQvqH8guraz9x2Y+UExwubFKvX7jyP33H+yNVVKSIUCAAAECBAgQIECAAAECBAgQIECAAAECBAi0WODSxdnnF5dXn7hd2CiKagP5vefzA32PuSDodlr+nAABAtkUMOCezb6rmgABAgQIEGhCYKFUOhZVqy81scVSArEQ2IiicM1w+2170RvC0sevXBm97cIULJidnZ3aWK+eWrmx/kAKyklMCQMDe+fvuWcytW8ISEwjJEqAAAECBAgQIECAAAECBAgQIECAAAECBAi0VeDNN2cWNzY2Rz7skL6+3vVCvu8ve/rCvyqXyzNtTUZwAgQIEEi0gAH3RLdP8gQIECBAgEAnBCrj40+GWu1bnTjLGQRaKbAURWHNgPttSQtRdPLg3Nzx2y5M0YK3Z+afW7q++ifVatV/E3agr0OD+ZcPHJw41oGjHEGAAAECBAgQIECAAAECBAgQIECAAAECBAgQ6IpA/W3CVxdXfvj+w9+9rb2/r+f/umuy9EJXknMoAQIECCROwDBD4lomYQIECBAgQKDTApWxsRMhl/tqp891HoHdCNRyuTCfy4WaAfePZNyTy21/Yn6+dzfWSd1bv819dXX7f6+t3SwltYak5L1/ZPCpianSiaTkK08CBAgQIECAAAECBAgQIECAAAECBAgQIECAQLMC5966/NaN1fVD7+6rv+F2b2/Pjyany5m6aKpZN+sJECBA4IMFDLh7MggQIECAAAECtxG4Oj5+OlerHQVFIEkC61EUFg2337ZlWby9/f0obnO/7WOy6wVjY4Vpr9ncNaMABAgQIECAAAECBAgQIECAAAECBAgQIECAQEwFZmffeWhhYfmn+f69N/r39rzQ0xf+le9GYtosaREgQCAhAgbcE9IoaRIgQIAAAQLdE6gUi7Xune5kAjsTuBZFYcOA+0fi5XK52kAud+Dg3NzMzpTTs8tt7u3rZf21m5/85KGofSeITIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDorkD9u6YQeu4ul4uvdDcTpxMgQIBAWgQMuKelk+ogQIAAAQIE2iKwWCpNV6vVC20JLiiBNgncyuXClTbFTlPYfC738uH5+WNpqmm3tbjNfbeCv76/v79v6b77pkZbH1lEAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQTgED7unsq6oIECBAgACBFglcLRYfyYXwYovCCUOgIwKrURSW3d5+W+tCFE27vf3Xmeo3bGysV0+t3Fh/4LaIFtxWYHBf/tWDhyY+fduFFhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQK/EDDg7kEgQIAAAQIECHyEQKVYfDaE8AwkAkkSWIiisGXA/SNbtjeXO3fv/PzhJPW107lenpl/cvnG2r/e3r7V0+mz03Te0GD+5QMHJ7wpIE1NVQsBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQItFXAgHtbeQUnQIAAAQIEki5wrVg8VQvhc0mvQ/7ZEdjK5cJCdsrdcaVDe/Y8PDU7+8qOA2Ro44Xzl09fX1k/mqGSW1rqHSOD37h7qvR0S4MKRoAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEUixgwD3FzVUaAQIECBAgsHuBSrF4MYQwtftIIhDojMD1KAo33N7+kdhub2/+WZydfeehlZX1/7KxsTnS/O5s79g/MvjUxFTpRLYVVE+AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBBoXMODeuJWVBAgQIECAQMYEFkdGRqp9fYsZK1u5CReYi6JQM+D+kV3cF0VPHZibM3C8g2f97Zn555aur/5JtVr135IN+t05OviFuyZLLzS43DICBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJB5AUMJmX8EABAgQIAAAQIfJrBQKh2LqtWXCBFIisBGFIVrhts/sl29ISx9/MqV0aT0NI55zs7OTm2sV0+t3Fh/II75xS2nT33qHv/dHbemyIcAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEYi3gi/ZYt0dyBAgQIECAQDcFKuPjT4Za7VvdzMHZBJoRuBZFYcOA+0eSub29mSfqo9f+/NL852+s3/zOxsbmSOuipi+SAff09VRFBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINBeAQPu7fUVnQABAgQIEEiwQKVY/H4I4csJLkHqGRKo5XJhLkP17qTUPbnc9ifm53t3steeDxd4e2b+ues31v5we/tWD6dfFzDg7qkgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLNCRhwb87LagIECBAgQCBDAlfHx0/narWjGSpZqQkWWI2isOz29o/sYCGKTh6cmzue4DbHNvXZ2dmpmxvVP7+xevO3qtWq/878Zad6evZs33//QT+qiO2TKzECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQiKOAwYM4dkVOBAgQIECAQCwEKsViLRaJSIJAAwILURS2DLh/qJTb2xt4iFqwZHb2nYfW1za/f2N1/VALwiU+RH9/39J9902NJr4QBRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQ4KGHDvILajCBAgQIAAgeQILI6NPVDN5X6WnIxlmmWBrVwuLGQZoIHa3d7eAFILl/z80vznb6zf/M7GxuZIC8MmLpQB98S1TMIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgEAMBA+4xaIIUCBAgQIAAgfgJXC0WH8mF8GL8MpMRgV8XuB5F4Ybb2z/00cjlcrWBXO7Awbm5Gc9PZwUuz8w/uXxj7V9vb9/q6ezJ8TjNgHs8+iALAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEEiWgAH3ZPVLtgT+f/bu58fO6twT/bPeso1dlKGck9p7F50+RRXFr/RtAbMr3QR7dlrqKx3QHYDuhEih1d2jg9WTMGjBpHWY4T+AKOlZGMHoTrEVz+GK6IQkgHFun9p749pUBf8ou37s96pMQmKwcbn2rqp3ve8nkpWB37XW83yeZcmWv14QIECAAIF9Ehi0Wq9HxGv7dJxjCIwk0C2KKAXc72h4LKVzi73eqZGQLR5J4I+fLb11+er1l5oWdBdwH+naWEyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECDRUQcG/o4LVNgAABAgQIfLfAcrt9NpXlSU4Eqi6wVhSxItx+xzF5vb1aN/jCp//r7JWrN54dDoeN+LOogHu17p9qCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQCAPgUaECvIYhSoJECBAgACBKgkMWq3PImKuSjWphcDtBL4oirgu4H7Hy+H19ur9ullaWpq7cX34P5sQdD90aGLz3/27hcPVm4KKCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAdQUE3Ks7G5URIECAAAECBySwMj09PTxyZOWAjncsgR0LbKUU/R1/3cwPH5iY+PHc0tL5ZnZf7a6bEnR/6qlH/bm72ldRdQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQMQF/0V6xgSiHAAECBAgQOHiBS53OqWI4fO/gK1EBge8WuFwUcdnr7XdEui+lTx7r9Rbdo2oL1D3oLuBe7funOgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBConoCAe/VmoiICBAgQIEDggAUG7fYrUZZvHnAZjidwV4F+UcSWgPsdnbzeftcrVKkP6hp0F3Cv1DVTDAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhkICDgnsGQlEiAAAECBAjsr8Cg1fplRLy0v6c6jcC9CdxIKQb3tqRRX3u9Pd9x1y3o/uCDU//x4Ydn/598J6JyAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCwvwIC7vvr7TQCBAgQIEAgA4HldvtsKsuTGZSqxAYLrBZFXPN6+x1vgNfb8//FsR10X78RZ65eu/5/bm5uHcq1o7+bPn76B3OdM7nWr24CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQILDfAgLu+y3uPAIECBAgQKDyAoNWq6x8kQpstECZUnQbLfDdzR9Jqfd4rzeLqD4Cf/xs6a3LV6+/lGPQ/XvTx9/4t3OdV+szDZ0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIG9FRBw31tfuxMgQIAAAQKZCazMzDw9TOn9zMpWbsMErhZF/Mnr7Xec+lRRnJ7vdr2YXcNfF//rYu+Vq9dvvHb9+vp0Lu09cPzYufmFH5zKpV51EiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBgxYQcD/oCTifAAECBAgQqJTAcqv1XIp4p1JFKYbANwQuFUVsCLjf9l4cjlh9ot8/4dLUW+Bf/9h74fr65v+4cnXtkap3OnX/sU8eWfzBYtXrVB8BAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiKgIB7VSahDgIECBAgQKASAoNW6/WIeK0SxSiCwG0ENlKKS2TuKOD19mZdjqWlpbkb14f/89ra+v+xubl1qIrdHz16ZPXxx+f8o4sqDkdNBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBJAQH3So5FUQQIECBAgMBBCSy322dTWZ48qPOdS+BuAqtFEde83n5bJq+33+321Pvn//jZ0ltrNzb+r+vX16er1GlRFOW///ePFFWqSS0ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDKAgLuVZ6O2ggQIECAAIF9Fxi0Wp9FxNy+H+xAAjsQKFOKXkpRCrjfVsvr7Tu4RA345F//2Hvh+vrm/7i2dmNhOBxW4s+8MzMP/vihh1rnG8CvRQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMLJAJf6yf+QubECAAAECBAgQGIPAyvT09PDIkZUxbGULAnsisFYUsSLcfltbr7fvyZXLetOlpaW5zfX471fX1v/v9fWNYwfZzPemj7/xb+c6rx5kDc4mQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQK5CAi45zIpdRIgQIAAAQJ7LnCp0zlVDIfv7flBDiCwS4FLRREbAu631bu/KH6+0O2+vEtay2oucNCvuj9w/Ni5+YUfnKo5s/YIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBYBATcx8JoEwIECBAgQKAOAoNW6/WIeK0OveihfgIbKcWl+rU1lo4mUtr8Ya93eCyb2aT2An/8bOmtGxub//HatRud/Wr26NEjq48/Pndiv85zDgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyFlAwD3n6amdAAECBAgQGKvAoNX6ZUS8NNZNbUZgTAKrRRHXvN5+W02vt4/pkjVsm6Wlz3+0fmPzv61dX/+H9fWNY3vd/lNPPerP33uNbH8CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqIWAv2CvxRg1QYAAAQIECIxDYNBqfRART41jL3sQGKdAmVL0UopSwP1brF5vH+dNa+5e//rH3gs3NjZ/tnZ9/X/b3Nw6tBcSfzd9/PQP5jpn9mJvexIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgToJCLjXaZp6IUCAAAECBEYSGLRa5UgbWExgjwTWiiJWhNtvq+v19j26dA3edq/C7g8cP3ZufuEHpxpMq3UCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQILAjAQH3HTH5iAABAgQIEKi7wMrMzNPDlN6ve5/6y1PgUlHEhoD7t4bn9fY873NOVY8z7H7kyOG1J598eDKn/tVKgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQOQkDA/SDUnUmAAAECBAhUTmB5ZuYnKaVfVK4wBTVe4EZKMWi8wu0BvN7uYuynwDjC7jMzD/74oYda5/ezbmcRIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIHcBATcc5uYegkQIECAAIE9ERi0Wq9HxGt7srlNCYwgsFoUcc3r7d8S9Hr7CJfK0pEFlpY+/9H6jc3/tnZ9/R/W1zeO7XTDEw/e//O/f/ihl3f6ve8IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEATBQTcmzh1PRMgQIAAAQLfElhut8+msjyJhkCVBMqUolulgipUi9fbKzSMhpeytLQ0t7ke/31jc3jq2tqNheFweMc/Z09O3td79NG/n204mfYJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMB3Cgi4uyAECBAgQIAAgYgYtFqrEfEgDAJVErhaFPEnr7d/ayReb6/SLVXLNwX+9Y+9F9Y3N//r+sbWU9evr09/8+dnZh788UMPtc6TI0CAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBG4vIODuZhAgQIAAAQKNF1iZnp4eHjmy0ngIAJUT6BdFbAm4f2suXm+v3FVV0B0Etl9339oo/svG5uZ/uLG++fj6+saxBx+4/92H5x96HhoBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBwewEBdzeDAAECBAgQaLzApU7nVDEcvtd4CACVEriRUgwqVVE1ivF6ezXmoIrdCWwH3svN4n//N3/feXt3O1hFgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTqLyDgXv8Z65AAAQIECBC4i8Cg1Xo9Il4DRaBKAl8URVz3evu3RuL19irdUrUQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBMYvIOA+flM7EiBAgAABApkJDFqtX0bES5mVrdwaC2ylFP0a97fb1rzevls56wgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEC+QgIuOczK5USIECAAAECeyQwaLU+iIin9mh72xK4Z4HLRRGXvd7+LTevt9/zVbKAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJCdgIB7diNTMAECBAgQIDBugUGrVY57T/sRGEWgWxRRCrjfQuj19lFulLUECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgXwEBNzzmZVKCRAgQIAAgT0QWJmZeXqY0vt7Br2HyAAAIABJREFUsLUtCexKYK0oYkW4/Vt2Xm/f1XWyiAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQnYCAe3YjUzABAgQIECAwToHlmZmfpJR+Mc497UVgFIFLRREbAu63EHq9fZQbZS0BAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIC8BAfe85qVaAgQIECBAYMwCg1br9Yh4bczb2o7ArgQ2UopLu1pZ70Veb6/3fHVHgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEPhbAQF394EAAQIECBBotMByu302leXJRiNovjICq0UR17zefss8vN5emeupEAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAvggIuO8Ls0MIECBAgACBqgoMWq3ViHiwqvWpqzkCZUrRbU67O+7U6+07pvIhAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAWAgLutRijJggQIECAAIHdCKx0Og8Ph8MLu1lrDYFxC1wuirjs9fZbWL3ePu5bZj8CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQPUFBNyrPyMVEiBAgAABAnskcKnTOVUMh+/t0fa2JXBPAv2iiC0B91vMvN5+T1fIxwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBWggIuNdijJogQIAAAQIEdiMwaLVej4jXdrPWGgLjFFgrilgRbr+F1Ovt47xh9iJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5CMg4J7PrFRKgAABAgQIjFngi1br3TLiH8e8re0I3LPAclHEuoD7LW5eb7/na2QBAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAWAgLutRijJggQIECAAIHdCAxarQ8i4qndrLWGwLgENlKKS+ParCb7eL29JoPUBgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEBgFwIC7rtAs4QAAQIECBCoh8Cg1Srr0YkuchZYLYq45vX2W0bo9facb7TaCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKjCQi4j+ZnNQECBAgQIJCpwKVO51QxHL6XafnKronAVkrRr0kv42rD6+3jkrQPAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQCBPAQH3POemagIECBAgQGBEgeWZmZ+klH4x4jaWExhJ4HJRxGWvt99iOFUUb8x3u6+OBGsxAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAtgIC7tmOTuEECBAgQIDAKAKDmZkzkdI/jbKHtQRGFegWRZQC7l8zHo5YfaLfPzGqq/UECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQL5Cgi45zs7lRMgQIAAAQIjCCy322dTWZ4cYQtLCYwksFYUsSLcfovhVFGcnu92z4wEazEBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEDWAgLuWY9P8QQIECBAgMBuBQat1mpEPLjb9dYRGFWgXxSxJeD+NaPX20e9UdYTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBOohIOBejznqggABAgQIELgHgZVO5+HhcHjhHpb4lMBYBW6kFIOx7pj/Zl5vz3+GOiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIjENAwH0civYgQIAAAQIEshK41OmcKobD97IqWrG1Elguilj3evvXM/V6e62ut2YIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAiMJCLiPxGcxAQIECBAgkKPAoNV6PSJey7F2NecvsJVS9PNvY6wdeL19rJw2I0CAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhkLSDgnvX4FE+AAAECBAjsRuCLVuvdMuIfd7PWGgKjCqwWRVzzevvXjEdS6j3e682O6mo9AQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAPQQE3OsxR10QIECAAAEC9yAwaLU+iIin7mGJTwmMRaBMKbpj2ak+mzwwMfHjuaWl8/XpSCcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKjCAi4j6JnLQECBAgQIJClwKDVKrMsXNHZC1wuirjs9fav53hfSp881ustZj9YDRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECIxNQMB9bJQ2IkCAAAECBHIQuNTpnCqGw/dyqFWN9RLYfr29l1KUAu5fD9br7fW647ohQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECIxDQMB9HIr2IECAAAECBLIRWJ6Z+UlK6RfZFKzQ2gisFUWsCLd/PU+vt9fmamuEAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDBWAQH3sXLajAABAgQIEKi6wGBm5kyk9E9Vr1N99RPoF0VsCbjfHGxKqTxeFM/OLS2dr9+kdUSAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDCKgID7KHrWEiBAgAABAtkJLLfbZ1NZnsyucAVnLeD19lvHdyylc4u93qmsh6p4AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBPREQcN8TVpsSIECAAAECVRUYtFqrEfFgVetTVz0Flosi1r3efnO426+3T6Y0v9DtXqzntHVFgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAwioCA+yh61hIgQIAAAQJZCax0Og8Ph8MLWRWt2OwFbqQUg+y7GF8DXm8fn6WdCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJ1FBBwr+NU9USAAAECBAjcVmC51XouRbyDh8B+Cni9/a/aXm/fz5vnLAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAngIC7nnOTdUECBAgQIDALgQGrdbrEfHaLpZaQmBXAlspRX9XK+u56P6i+PlCt/tyPbvTFQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwDgEBNzHoWgPAgQIECBAIAuBL1qtd8uIf8yiWEXWQmC1KOJaWdail1GbmEhp84e93uFR97GeAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECg3gIC7vWer+4IECBAgACBvxEYtFqfRcQcFAL7IeD19luVvd6+H7fOGQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB/AUE3POfoQ4IECBAgACBHQoMWi1Pae/QymejC3xZFHHF6+03IQ9HrD7R758YXdUOBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECdRcQcK/7hPVHgAABAgQI3BS41OmcKobD93AQ2A+BMqXopRSlgPtN7qmiOD3f7Z7ZD3tnECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5C0g4J73/FRPgAABAgQI7FBg0G6/EmX55g4/9xmBkQQuF0VcFm6/aej19pGuksUECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgcYJCLg3buQaJkCAAAECzRQYzMyciZT+qZnd63o/Bbzefqu219v38/Y5iwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQv4CAe/4z1AEBAgQIECCwA4HldvtsKsuTO/jUJwRGErhaFPEnr7ffNLwvpU8e6/UWRwK1mAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoFECAu6NGrdmCRAgQIBAcwUGrVbZ3O51vp8C/aKILQH3m+QPTEz8eG5p6fx++juLAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgbwEB97znp3oCBAgQIEBgBwIrnc7Dw+Hwwg4+9QmBkQTWiiJWhNtvGh6N+ODRfv+ZkUAtJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQaJyAgHvjRq5hAgQIECDQPIHlVuu5FPFO8zrX8X4LeL39K/GUUjmZ0vxCt3txv2fgPAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgbwFBNzznp/qCRAgQIAAgR0IDFqt1yPitR186hMCuxbwevtf6Y6ldG6x1zu1a0wLCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEGisg4N7Y0WucAAECBAg0R+CLVuvdMuIfm9OxTg9CwOvtX6lPpLR5NKVFr7cfxC10JgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgfwEB9/xnqAMCBAgQIEDgLgKDVuuziJgDRWCvBLze/lfZ+4vi5wvd7st7ZW1fAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBegsIuNd7vrojQIAAAQIEImLQapUgCOylwHJRxHrpmm2/3v7DXu/wXlrbmwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoN4CAu71nq/uCBAgQIBA4wUudTqniuHwvcZDANgzgRspxWDPds9r46miOD3f7Z7Jq2rVEiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIVElAwL1K01ALAQIECBAgMHaBQbv9SpTlm2Pf2IYE/izg9favIA5HrD7R759wMQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiMIiDgPoqetQQIECBAgEDlBQYzM2cipX+qfKEKzFLA6+1/HdvxiP/0cL//VpaDVDQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBlBATcKzMKhRAgQIAAAQJ7IbDcbp9NZXlyL/a2JwGvt391B+5L6ZPHer1FN4IAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAqAIC7qMKWk+AAAECBAhUWmDQapWVLlBx2Qp4vf2vo3tgYuLHc0tL57MdpsIJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqIyDgXplRKIQAAQIECBAYt8BKp/PwcDi8MO597UdgW8Dr7V/dg2MpnVvs9U65FQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTGISDgPg5FexAgQIAAAQKVFFhutZ5LEe9UsjhFZS3g9favxpdSKidTml/odi9mPVDFEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIVEZAwL0yo1AIAQIECBAgMG6BQav1ekS8Nu597UfA6+1f3YHJiHcf6fefdyMIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIjEtAwH1ckvYhQIAAAQIEKiew3G6fTWV5snKFKShrAa+3fzW+iZQ2f9jrHc56mIonQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBConICAe+VGoiACBAgQIEBgXAKDVuuziJgb1372IbAt4PX2r+7BVFG8Md/tvupWECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEBingID7ODXtRYAAAQIECFRGYGV6enp45MhKZQpSSC0EvN7+1RgPR6w+0e+fqMVQNUGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFApAQH3So1DMQQIECBAgMC4BC51OqeK4fC9ce1nHwLbAl5v/+oeTEW8ON/vv+1WECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEBi3gID7uEXtR4AAAQIECFRCYNBuvxJl+WYlilFELQS83v7VGO9L6ZPHer3FWgxVEwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABApUTEHCv3EgURIAAAQIECIxDYNBq/TIiXhrHXvYgsC3g9faIlFJ5vCienVtaOu9WECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIENgLAQH3vVC1JwECBAgQIHDgAsvt9tlUlicPvBAF1ELA6+1fjfFYSucWe71TtRiqJggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBCopIOBeybEoigABAgQIEBhVYNBqlaPuYT2Bvwh4vT1iIqXNoyktLnS7F90MAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAnslIOC+V7L2JUCAAAECBA5MYGVm5ulhSu8fWAEOrpWA19u/Guf9RfHzhW735VoNVzMECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKVExBwr9xIFESAAAECBAiMKrDcaj2XIt4ZdR/rCWwLXCqK2Cib/R8EOByx+kS/f8KNIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQILDXAgLuey1sfwIECBAgQGDfBQat1usR8dq+H+zA2gmsFUWsNDzcvj3UqaI4Pd/tnqndgDVEgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQOQEB98qNREEECBAgQIDAqALL7fbZVJYnR93HegL9ooithgfc70vpk8d6vUW3gQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMB+CAi474eyMwgQIECAAIF9FRi0Wp9FxNy+Huqw2gl4vT0ipVQeL4pn55aWztduwBoiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCopICAeyXHoigCBAgQIEBgtwIr09PTwyNHVna73joCfxHwenvEsZTOLfZ6p9wKAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAvslIOC+X9LOIUCAAAECBPZF4FKnc6oYDt/bl8McUlsBr7dHTKS0eTSlxYVu92JtB60xAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBygkIuFduJAoiQIAAAQIERhEYtNuvRFm+Ocoe1jZboEwpeilFWZaNhri/KH6+0O2+3GgEzRMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECOy7gID7vpM7kAABAgQIENhLgUGr9cuIeGkvz7B3vQUuF0Vcbni4/XDE6hP9/ol6T1p3BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECVRQQcK/iVNREgAABAgQI7Fpgud0+m8ry5K43sLDRAl5v/2r8U0Vxer7bPdPoy6B5AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBAxEQcD8QdocSIECAAAECeyUwaLXKvdrbvvUX8Hp7xH0pffJYr7dY/2nrkAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoIoCAu5VnIqaCBAgQIAAgV0JrMzMPD1M6f1dLbao8QJbKcXnKUVZNvffSKSUyuNF8ezc0tL5xl8IAAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgciIOB+IOwOJUCAAAECBPZCYLnVei5FvLMXe9uz/gKrRRHXGhxu357wsZTOLfZ6p+o/bR0SIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhUVUDAvaqTURcBAgQIECBwzwKDVuv1iHjtnhda0HiBjZTiUsMVJlLa/GGvd7jhDNonQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA4YAEB9wMegOMJECBAgACB8Qkst9tnU1meHN+OdmqKwHJRxHrDX2+fKoo35rvdV5syc30SIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhUU0DAvZpzURUBAgQIECCwC4FBq7UaEQ/uYqklDRa4XhTxRcPD7YcjVp/o9080+BponQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoCICAu4VGYQyCBAgQIAAgdEEVqanp4dHjqyMtovVTRToF0VsNTzg/sDExI/nlpbON3H+eiZAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiWgIB7teahGgIECBAgQGCXApc6nVPFcPjeLpdb1lCBy0URlxsebj8a8cGj/f4zDb0C2iZAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiYgIB7xQaiHAIECBAgQGB3AoNW6/WIeG13q61qosBWSvF5SlE2OOCeUionU5pf6HYvNvEO6JkAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKB6AgLu1ZuJiggQIECAAIFdCAxarV9GxEu7WGpJQwWWiyLWGxxu3x77/UXx84Vu9+WGXgFtEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIVFBAwL2CQ1ESAQIECBAgcO8Cg1brg4h46t5XWtFEgetFEV80PNx+OGL1iX7/RBPnr2cCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIHqCgi4V3c2KiNAgAABAgTuQWDQapX38LlPGyxQphSfpxRbDQ+4TxXF6flu90yDr4LWCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEKigg4F7BoSiJAAECBAgQuDeBlZmZp4cpvX9vq3zdVIEviyKuNDzcfl9KnzzW6y029Q7omwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoLoCAu7VnY3KCBAgQIAAgR0KLM/M/CSl9Isdfu6zBgvcSCkGDe5/u/WUUjmZ0vxCt3ux4RTaJ0CAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqKCAgHsFh6IkAgQIECBA4N4EBq3W6xHx2r2t8nXTBMqU4vOUYqvhr7dPRrz7SL//fNPmr18CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIE8BATc85iTKgkQIECAAIHvEFhut8+msjwJicB3CXxZFHGl4eH2QymtPdnrTbopBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBKoqIOBe1cmoiwABAgQIENixwKDVWo2IB3e8wIeNE7iRUgwa1/W3G54qitPz3e4ZFAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSqKiDgXtXJqIsAAQIECBDYkcDK9PT08MiRlR197KNGCpQpxecpxVbDX2+/L6VPHuv1Fht5CTRNgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQjYCAezajUigBAgQIECBwO4FLnc6pYjh8jw6BOwl8WRRxpeHh9pRSOZnS/EK3e9FNIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBlAQH3Kk9HbQQIECBAgMBdBQat1usR8dpdP/RBIwWuF0V80fBw+/bgJyPefaTff76Rl0DTBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECWQkIuGc1LsUSIECAAAEC3xQYtFq/jIiXyBD4pkCZUvRSirLhAfdDKa092etNuiEECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEchAQcM9hSmokQIAAAQIE7igwaLU+iIinEBH4psByUcR6w8Pt2yZTRXF6vts944YQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyEFAwD2HKamRAAECBAgQuKPAoNUq8RD4psDVoog/CbfHfSl98livt+iGECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMhFQMA9l0mpkwABAgQIEPiWwMrMzNPDlN5HQ+BvBTZSiktIIqVUTqY0v9DtXsRBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIBcBAfdcJqVOAgQIECBA4FsCyzMzP0kp/QINgb8IlCnF5ynFltfbYzLi3Uf6/efdDgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQI5CQi45zQttRIgQIAAAQK3CAxardcj4jUsBP4i8EVRxHXh9jiU0tqTvd6km0GAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgNwEB99wmpl4CBAgQIEDga4HldvtsKsuTSAhsC1wtiviTcPvNyzBVFKfnu90zbgYBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB3AQE3HObmHoJECBAgACBrwX+v07n2uRweAwJgRspxQDDTYGjER882u8/g4MAAQIECBAgQIAzj77CAAAgAElEQVQAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAjgIC7jlOTc0ECBAgQIBAXHzooR9dHQ5/3R4OaTRcYCul+DylKL3eHimlcjKl+YVu92LDr4X2CRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEMhUQcM90cMomQIAAAQJNF7gwO/vKleHwzb+LiPsEmxt7HcqUYjml2HAHbt6B+4vi5wvd7suNvRAaJ0CAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyF5AwD37EWqAAAECBAg0U+DjTufsWlmenEwppr3i3sxLEBGrRRHXhNtvzv9wxOoT/f6Jxl4GjRMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNRCQMC9FmPUBAECBAgQaJ7A7zqd7npZdrY7n42IJOTcuEtwtSjiT+b+9dynIl6c7/ffbtxF0DABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgECtBATcazVOzRAgQIAAgeYI/LbTubZZlse2O34wpbjfK+7NGX5EXC+K+EK4/euZH0vp3GKvd6pRl0CzBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECtRQQcK/lWDVFgAABAgTqL/Bhu13+pcuJlKIt4F7/of+5w42UYjmlKAXcb4pMpLR5NKXFhW73YmMugUYJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRqKyDgXtvRaowAAQIECNRX4MLs7CtXhsM3/7bD76UUR4Xc6zv0P3dWphQ94fZb5jxVFG/Md7uv1n74GiRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEGiEgIB7I8asSQIECBAgUC+BT2dn37o6HP70b7s6klJ8X8C9XoP+Rjfb4fbtl9s3vNz+tcyRlHqP93qztR685ggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBBolIODeqHFrlgABAgQI1EPgD+32+9cjnv5mNzMRcVj4uR5Dvk0Xl4pCuP1vXFJK5fGieHZuael8bYeuMQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgcYJCLg3buQaJkCAAAEC+Qt81G6vbERMf7OTyZRi2ivu+Q/4Nh2sFkVc848XbpGZjHj3kX7/+VoOXFMECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKNFRBwb+zoNU6AAAECBPIV+E2nMyzL8ra/j2lHxIQgdL7DvU3lwu3fRjmU0tqTvd5krQatGQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIRIeDuGhAgQIAAAQJZCVx86KEffbm19es7Fe0V96zGeddivyyKuOIfLHzLaSrixfl+/+27AvqAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQGYCAu6ZDUy5BAgQIECg6QIXZmdfuTIcvvldDl5xr8ctWSuKWBFu/9Ywj0Z88Gi//0w9pqwLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABArcKCLi7EQQIECBAgEBWAh93OmfXyvLkdxXtFfesRnrbYoXbbz/DiZQ2j6a0uNDtXsx/yjogQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8G0BAXe3ggABAgQIEMhK4HedTne9LDt3K9or7ncTqu7PC7ffeTZTRfHGfLf7anWnpzICBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECowkIuI/mZzUBAgQIECCwzwK/7XSubZblsbsd6xX3uwlV8+eF2+88lyMp9R7v9WarOTlVESBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEBiPgID7eBztQoAAAQIECOyTwIftdrnTo2Yi4nC54893uq3v9khAuP3OsCml8nhRPDu3tHR+j/htS4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKASAgLulRiDIggQIECAAIGdCFyYnX3lynD45k6+3f7mSErx/eFwp5/77gAFhNu/G38y4t1H+v3nD3BEjiZAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCwLwIC7vvC7BACBAgQIEBgHAKfzs6+dXU4/Om97PW9lOKokPu9kO37t8Lt301+OGL1iX7/xL4PxoEECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDkBAwP0A0B1JgAABAgQI7E7gD+32+9cjnr6X1RMpRVvA/V7I9vXbq0URfyrLfT0zt8OmIl6c7/ffzq1u9RIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDYjYCA+27UrCFAgAABAgQOROCjdntlI2L6Xg8/nlIcF3K/V7Y9/361KOKacPt3Oh9L6dxir3dqz4fhAAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIVERBwr8gglEGAAAECBAjcXeA3nU5Z7jIQ3Y6IiV2uvXtlvrhXAeH2u4tNpLR5NKXFhW734t2/9gUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBeggIuNdjjrogQIAAAQK1F7j40EM/+nJr69e7bfRISvF9r7jvlm9s68qUYpBSrPvHBnc1nSqK0/Pd7pm7fugDAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAjUSEHCv0TC1QoAAAQIE6ixwYXb2n68Mhz8bpccHU4r7hdxHIRxp7Xa4fTml2BBuv6vj0YgPHu33n7nrhz4gQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUDMBAfeaDVQ7BAgQIECgrgIfdzpn18ry5Kj9zUTEYQHrURnvef3Gn8PtJfu72qWUysmU5he63Yt3/dgHBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBGomIOBes4FqhwABAgQI1FXgd51Od70sO6P2dzil+H5ZRhK0HpVyx+uvF0WsRIRw+87Iporijflu99Wdfe0rAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAvUSEHCv1zx1Q4AAAQIEaivwL53OxlZZHhpHg5MpxfRwOI6t7HEXgctFEZf9Y4Id35MjKfUe7/Vmd7zAhwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRqJiDgXrOBaocAAQIECNRV4MN2uxxnbydSimNC7uMkvWWvMqVYSSmuC7fv2DilVB4vimfnlpbO73iRDwkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjUTEDAvWYD1Q4BAgQIEKijwIXZ2VeuDIdvjrO3lFJ8vyzjsAD2OFlv7rWRUqymFBts78l2MuLdR/r95+9pkY8JECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI1ExAwL1mA9UOAQIECBCoo8An7fY71yKeG3dv2yH3TllGEsQeG+1aUcRqRJRM78n0cMTqE/3+iXta5GMCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECNRQQcK/hULVEgAABAgTqJvCHdvv96xFP70Vfh//8kruQ+2i6ZUrxp5TimmD7PUOmlMrjRfHs3NLS+XtebAEBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBmgkIuNdsoNohQIAAAQJ1FPio3V7ZiJjeq96E3EeT3UgpVlOKDeH2XUEeS+ncYq93aleLLSJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQMwEB95oNVDsECBAgQKCOAh+22+Ve9yXkvjvhy0URlwXbd4cXEYdSWnuy15vc9QYWEiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiZgIB7zQaqHQIECBAgUDeBiw899KMvt7Z+vR99CbnvXHkrpVhJKdaF23eOdpsvpyJenO/33x5pE4sJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI1EhAwL1Gw9QKAQIECBCoo8CF2dl/vjIc/my/ehNyv7v09qvtVyKiFG6/O9Z3fHEspXOLvd6pkTaxmAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEDNBATcazZQ7RAgQIAAgboJfNzpnF0ry5P72dd2yP17ZRkTAty3sG+kFKspxQaXka/joZTWnuz1JkfeyAYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEaiYg4F6zgWqHAAECBAjUTeB3nU53vSw7+91XSim+X5ZxWJg7ypTickpxhcXYruFUxIvz/f7bY9vQRgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRqIiDgXpNBaoMAAQIECNRV4F86nY2tsjx0UP09mFLcPxwe1PEHfu5aUcRqRJTC7WObxbGUzi32eqfGtqGNCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNRIQMC9RsPUCgECBAgQqKPAh+12edB9HU0pTpRlpAaFvG+kFKspxVaDet6PezaR0ubRlBYXut2L+3GeMwgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjkJiDgntvE1EuAAAECBBokcGF29pUrw+GbVWg5bYfcI+JozV9z3w62X04p1gXb9+TaTRXF6flu98yebG5TAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAjUQEHCvwRC1QIAAAQIE6irwSbv9zrWI56rU3/Zr7g+WZUzULAAu2L73t+xoxAeP9vvP7P1JTiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQr4CAe76zUzkBAgQIEKi9wB/a7fevRzxdtUa3X3OfioipsoyUedD9elHElQgvtu/xJZtIafNoSosL3e7FPT7K9gQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSyFhBwz3p8iidAgAABAvUW+KjdXtmImK5qlxMpxQMRcWw4rGqJt62rTCmupXQz2L6VeUA/F/ipojg93+2eyaVedRIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA4KAEB94OSdy4BAgQIECBwV4EP2+3yrh9V4IPtoPv2i+6TFX/R/UZKsbb9IyJKwfZ9uzlHIz54tN9/Zt8OdBABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBjAUE3DMentIJECBAgECdBS602y9cifhVTj2mlOJYRNxflnG4IgHyjb8JtXutff9v00RKm0dTWlzodi/u/+lOJECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJCfgIB7fjNTMQECBAgQaITAhdnZf74yHP4s12YPpxSTEXFkn8PuZUqx/VL7esTNl9qF2g/2Bk0Vxen5bvfMwVbhdAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQL5CAi45zMrlRIgQIAAgUYJfNzpnF0ry5N1aHoipbgv4uaP7cD7xBhfd99KKbZfad8OtN/8Mca962B/kD0cjfjg0X7/mYOswdkECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEchMQcM9tYuolQIAAAQINEfio3V7ZiJiua7tHUopDETERcfP/ix0E0zdTiuH2q+wRsSnMXumrMZHS5tGUFhe63YuVLlRxBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBComIOBesYEohwABAgQIEPhK4F86nY2tstzOfvsfgewEpori9Hy3eya7whVMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4IAFBNwPeACOJ0CAAAECBL4t8Ons7NzV4fAzNgRyFDga8cGj/f4zOdauZgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIHLSDgftATcD4BAgQIECDwLYELs7OvXBkO30RDIDeBiZQ2j6a0uNDtXsytdvUSIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQqIKAgHsVpqAGAgQIECBA4BaBT9rtd65FPIeFQG4CU0Vxer7bPZNb3eolQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUBUBAfeqTEIdBAgQIECAwNcCv+90Pr5Rlo8gIZCTwNGIDx7t95/JqWa1EiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiagIB71SaiHgIECBAgQCA+ardXNiKmURDIReBQSmtP9nqTudSrTgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJVFRBwr+pk1EWAAAECBBos8GG7XTa4fa1nKDAV8eJ8v/92hqUrmQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEClBATcKzUOxRAgQIAAAQIX2u0XrkT8igSBXASOpXRusdc7lUu96iRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQZQEB9ypPR20ECBAgQKCBAhdmZ//5ynD4swa2ruUMBQ6ltPZkrzeZYelKJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBJAQH3So5FUQQIECBAoLkCH3c6Z9fK8mRzBXSek8BUxIvz/f7bOdWsVgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJVFhBwr/J01EaAAAECBBoo8FG7vbIRMd3A1rWcmcCxlM4t9nqnMitbuQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqLSDgXunxKI4AAQIECDRP4F86nY2tsjzUvM51nJPA4YjVJ/r9EznVrFYCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECOQgIuOcwJTUSIECAAIGGCHw6Ozt3dTj8rCHtajNTgZRSebwonp1bWjqfaQvKJkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBZAQH3yo5GYQQIECBAoHkCF2ZnX7kyHL7ZvM51nJPAZMS7j/T7z+dUs1oJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5CIg4J7LpNRJgAABAgQaIPBJu/3OtYjnGtCqFjMVOByx+kS/fyLT8pVNgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoPICAu6VH5ECCRAgQIBAcwR+3+l8fKMsH2lOxzrNSSClVE6mNL/Q7V7MqW61EiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMhJQMA9p2mplQABAgQI1Fzgo3Z7ZSNiuuZtai9TgamieGO+23010/KVTYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQCALAQH3LMakSAIECBAg0AyBD9vtshmd6jI3gSMp9R7v9WZzq1u9BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBHITEHDPbWLqJUCAAAECNRW40G6/cCXiVzVtT1sZC0yktHk0pcWFbvdixm0onQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEAWAgLuWYxJkQQIECBAoP4Cn87OvnV1OPxp/TvVYW4CU0Vxer7bPZNb3eolQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkKOAgHuOU1MzAQIECBCoocDHnc7ZtbI8WcPWtJSxwNGIDx7t95/JuAWlEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMhKQMA9q3EplgABAgQI1Ffgo3Z7ZSNiur4d6iw3gUMprT3Z603mVrd6CRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECOQsIOCe8/TUToAAAQIEaiTwm05nWJal35vUaKa5tzIV8eJ8v/927n2onwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBOAkJkOU1LrQQIECBAoKYCn87Ozl0dDj+raXvaylBgMuLdR/r95zMsXckECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEshYQcM96fIonQIAAAQL1ELgwO/vKleHwzXp0o4vcBQ5HrD7R75/IvQ/1EyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMhRQMA9x6mpmQABAgQI1Ezg407n7FpZnqxZW9rJUCClVB4vimfnlpbOZ1i+kgkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhkLyDgnv0INUCAAAECBPIX+H2n8/GNsnwk/050kLvAVFG8Md/tvpp7H+onQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkKuAgHuuk1M3AQIECBCokcBvO51rm2V5rEYtaSVDgSMp9R7v9WYzLF3JBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBGojIOBem1FqhAABAgQI5CvwYbtd5lu9yusgMJHS5tGUFhe63Yt16EcPBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBHIVEHDPdXLqJkCAAAECNRG40G6/cCXiVzVpRxuZCkwVxen5bvdMpuUrmwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBtBATcazNKjRAgQIAAgTwFPp2dfevqcPjTPKtXdR0EjqV0brHXO1WHXvRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIHcBAffcJ6h+AgQIECCQucDHnc7ZtbI8mXkbys9U4FBKa0/2epOZlq9sAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABArUTEHCv3Ug1RIAAAQIE8hL4qN1e2YiYzqtq1dZBIKVUHi+KZ+eWls7XoR89ECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiDgIB7HaaoBwIECBAgkLHAbzqdYVmWfk+S8QxzLf3+ovj5Qrf7cq71q5sAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAHQWEyeo4VT0RIECAAIFMBD6dnZ27Ohx+lkm5yqyRwJGUeo/3erM1akkrBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBGohIOBeizFqggABAgQI5ClwYXb2lSvD4Zt5Vq/qXAUmUto8mtLiQrd7Mdce1E2AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgrgIC7nWdrL4IECBAgEAGAh93OmfXyvJkBqUqsUYCU0Vxer7bPVOjlrRCgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoDYCAu61GaVGCBAgQIBAfgK/73Q+vlGWj+RXuYpzFTiW0rnFXu9UrvWrmwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEDdBQTc6z5h/REgQIAAgQoL/LbTubZZlscqXKLSaiRwKKUrT/Z6x2vUklYIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI1E5AwL12I9UQAQIECBDIR+DDdrvMp1qV5iyQUiqPF8Wzc0tL53PuQ+0ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE6i4g4F73CeuPAAECBAhUVOBCu/3ClYhfVbQ8ZdVMYKoo3pjvdl+tWVvaIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFA7AQH32o1UQwQIECBAIA+BT2dn37o6HP40j2pVmbPAfSl98livt5hzD2onQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0BQBAfemTFqfBAgQIECgYgJ/aLffvx7xdMXKUk7NBA6ltHZfSk8udLsXa9aadggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjUUkDAvZZj1RQBAgQIEKi+wEft9spGxHT1K1VhzgJTES/O9/tv59yD2gkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAg0SUDAvUnT1isBAgQIEKiQwG86nWFZln4vUqGZ1K2UyYh3H+n3n69bX/ohQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUGcBobI6T1dvBLc9vEkAACAASURBVAgQIECgogIXH3roR19ubf26ouUpqwYCR1LqPd7rzdagFS0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQaJSAgHujxq1ZAgQIECBQDYELs7OvXBkO36xGNaqom8BESptHU1pc6HYv1q03/RAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCou4CAe90nrD8CBAgQIFBBgY87nbNrZXmygqUpqQYCU0Vxer7bPVODVrRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoHECAu6NG7mGCRAgQIDAwQv8rtPprpdl5+ArUUHdBI6ldG6x1ztVt770Q4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKApAgLuTZm0PgkQIECAQIUEftvpXNssy2MVKkkpNRA4HLH6RL9/ogataIEAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAYwUE3Bs7eo0TIECAAIGDE/iw3S4P7nQn11EgpVROpjS/0O1erGN/eiJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQFAEB96ZMWp8ECBAgQKAiAhdmZ1+5Mhy+WZFylFETgamiOD3f7Z6pSTvaIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINBYAQH3xo5e4wQIECBA4GAEPp2dfevqcPjTgzndqXUUOBrxwaP9/jN17E1PBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBJomIODetInrlwABAgSyFHj//d8/HZGm/1L8xET5cFmmh29tZvvny6fv0OD2t3P71XxZxv+bUqze5ryzk8/9w3++fu1qZ79qcU69BQ6ltPZkrzdZ7y51R4DA/8/evcXYdV53gl97VxVZLrJUJZIliqLJKooqtml0eOo4yKBhtC36oTvT9IPlB8XuSSOigWSmgR7DcjLptAE3LGP6IfFlJEPzIKDREOVBd25ALAdod95M2RkZ8+AcHtqIlCpLxYupIkNKIk2qVGQVzx4cWvJFlsS6nMu+/DZg+ML9feu/ft+WKAOrPhIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEqiNgwL06Z61TAgQIEMiBwC8OqqdptIfR3xha/5Xh9PavjeUgcscjbD7ykVheWe74vjasnkCSJNlomn548qWX/rZ63euYAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQDkFDLiX81x1RYAAAQI9Emg05scjVm7dmv6WW9V/YXg97u9RnEKUGfjND0WWZYXIKmS+Bbam6R/vW1j4XL5TSkeAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwFoEDLivRcu7BAgQIFAZgV8cXE/TOPzTxrOpiGTqDYTS3rDezUPOGt+PgT/6TDdL2LsiAsMRJ6YvXKhXpF1tEiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEKiMgAH3yhy1RgkQIEDgTYFGY3YmIhl/y43rbwyxh8H1Ln4qrf/6VAw+9Z+7WMHWVRAYTJLXD54/P1KFXvVIgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoGoCBtyrduL6JUCAQMkFGo3npiIGpwYGkvEsy24Nske0//3Wc3/J2899e5v/3e/G8tzzuc8pYH4FkiTJRtP0w5MvvfS3+U0pGQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEC6xUw4L5eOesIECBAoOcCjcb8eMTKrWH1NI03b1x383rPT2L9BYc/9i/ixuuvr38DKysvsDVN/3jfwsLnKg8BgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBJBQy4l/RgtUWAAIEiCrw5wD4wkE1lWTIVkU1FJFNZFuNJErUi9iTzLwts+p8/HCutFhYC6xIYjjgxfeFCfV2LLSJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoBACBtwLcUxCEiBAoDwCjcZzUxGDU2ka7ZvYxyPisAH28pzv7TpJ/+U/v90rfp3A2woMJsnrB8+fH8FDgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEC5BQy4l/t8dUeAAIG+CTQac4d/fhN7zGRZTLmFvW/HkYvCrf/6VAw+9Z9zkUWIYgkkSZKNpumHJ1966W+LlVxaAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTWKmDAfa1i3idAgACBXxJoNGZnBgbSqSzL2jeyH46IqYiYxETgrQID//GPIvv//l8wBNYssDVN/3jfwsLn1rzQAgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECidgwL1wRyYwAQIE+ifw02H29m3s6UzErYH2+/uXRuWiCQwf/WTceOnHRYstb58F3pMkz9x3/nz7h2c8BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhUQMCAewUOWYsECBBYj0Cj8dzUwMDAYcPs69Gz5u0ENh/5SCyvLMMhsGqBoYjL77tw4c5VL/AiAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKFFzDgXvgj1AABAgQ6I9C+nT1Nk/YtyW/+a6wzO9uFwE8F0n/5z1EQWLVAkiTZSJLsu3dh4fSqF3mRAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIHCCxhwL/wRaoAAAQLrEzDQvj43q9YnkDW+HwN/9Jn1LbaqkgJb0/Sz+xYWHqtk85omQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUGEBA+4VPnytEyBQLYFG47mpgYGBw1mWPPDGLe1uaK/WJ9DXbm9+7asx9N+/0dcMihdH4D1J8sx958+3/zQJDwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECFRMw4F6xA9cuAQLVEmg05g6naXugPWsPtU9Wq3vdDgykMbx504YhbiyvxPLyyob22fzvfjeW557f0B4WV0NgU5Kc/yfnz++qRre6JECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgrQIG3H0TBAgQKJFAozE/PjCw/ECWxeGIWze1u6W9JOf7i8Pqm4c3xUCa3upsy8jmn3U4PLwp0jf+9263vbi49LMSS9eX4+bN1q3//ub//tah+OGP/Yu48frr3Y5l/4ILDCTJynCS3HfvwsLpgrciPgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEC6xQw4L5OOMsIECCQF4GfD7XfGmj/WF5yybF2gS0jw5G+cev6Twfah2JoaPDWv4r6tFqtWFq6EecOHoibWVbUNuTukcDWiE/uu3Dhz3tUThkCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBHIoYMA9h4ciEgECBFYjcPLk7NEsM9S+Gqu8vdMeZH9zcL19A3vRh9hX4/v83j2rec07FRbYkqb/5d6Fhd+tMIHWCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBCICAPuPgMCBAgUSKDRmDucptnRiFuD7WMFil7ZqO1h9s3Dm27dxj586983Vc7i0uOPx6Uvf6lyfWt49QKbk+SFA+fP37f6Fd4kQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCsAgbcy3qy+iJAoDQCjcZzU2k62B5ofzgiJkvTWAkbad/E3h5obw+yj4xsruQw+9sd66lP/FYsfe97JTxxLXVCYDBJXt+cJAfvXVg43Yn97EGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQLEFDLgX+/ykJ0CgxAK/cFv7QyVus9Ct/XSQfTi2vDHM3h5w9/yqwJkPfSgWT59CQ+BXBJIkyUbT9MOTL730t3gIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQFjDg7jsgQIBAjgQajfnxgYHlB7IsecRt7Tk6mDeiDAykMbp15Nbt7O2b2g20r+6M5vfvj+vLN1b3srcqJbA1Tf9438LC5yrVtGYJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEHhXAQPuPhACBAjkQKDReG4qTQePRsTDETGWg0givCHQvqW9PdQ+OvqeGN68ics6BJ7fu2cdqywpu8B7kuSZ+86fP1z2PvVHgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMDaBAy4r83L2wQIEOiowE8H2wceiUge6ujGNtuQwOjoSIxufU/cMToSaZpuaK+qL37t2Wfj7Cc/UXUG/b9FYCji8vsuXLgTDAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBN4qYMDdN0GAAIE+CBhs7wP6u5QcGEh/dkv7lpFhQ+0dPJ6Fz38+rnz9qQ7uaKuiCwwkycpwktx378LC6aL3Ij8BAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAp0XMODeeVM7EiBA4B0FDLbn6+N486b28bGt+QpWojRnjhyJxR/+oEQdaWWjAlsjPrnvwoU/3+g+1hMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUE4BA+7lPFddESCQMwGD7fk5kPYN7WNjW+KO0RE3tffgWE6//2C8fu1aDyopUQSBLWn6X+5dWPjdImSVkQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB/ggYcO+Pu6oECFREoNGYH0/Tm49EZJ+pSMu5bHNoaDDat7SPj22J9n/29E5gbnJv3Myy3hVUKbcCm5PkhQPnz9+X24CCESBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQCwED7rk4BiEIECijQLM590hEPBwRY2Xsrwg9jY6O3BpqH906UoS4pcz4/N49pexLU2sTGEyS1w+eP+8vxLWxeZsAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAJQUMuFfy2DVNgEA3BRqNucNpGsciYrKbdez99gJua8/Pl3Hp8cfj0pe/lJ9AkvRFIEmSbDRNPzz50kt/25cAihIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUCgBA+6FOi5hCRDIs0Cj8dxUmg4+FhEfy3POsmbbMjIcY2NbYnxsa1lbLFxfpz7xW7H0ve8VLrfAnRXYmqaf3bew0P57o4cAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQK3FTDgflsiLxAgQOD2As3m3MMR8UhEjN3+bW90UqA90L5t22gMb97UyW3t1QGBM7/+gVi8eLEDO9miqAIjEU/vv3Dh40XNLzcBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAr0XMODee3MVCRAokUCjMTuTJMmxJIlaidrKfSsDA2lsu/OOGB/bEkNDg7nPW9WA8/v3x/XlG1Vtv/J9b06SFw6cP39f5SEAECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCwJgED7mvi8jIBAgR+LtBszrVvbP8Ck94JvDnYvn3baKRp2rvCKq1L4Pm9e9a1zqLiCwwmyeubk+TgvQsLp4vfjQ4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEOilgAH3XmqrRYBAKQQajeemkmTwabe29+4427e0T+wYiztGRwy29459Q5Uu/+Vfxvk/+P0N7WFxMQWSJInhu+76V/edPPk3xexAagIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE+ilgwL2f+moTIFA4gWZz7uGIaN/cPla48AUM/OZg+/jY1gKmr3bkhc9/Pq58/alqI1S0+5WHfi/S337odJIkDx86dN/TFWXQNgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEC6xQw4L5OOMsIEKiWQKMxP56mK8ci4mPV6rw/3Q4MpLHtzjtu3druKabAmSNHYvGHPyhmeKnXLZDWfyNW/uTRX1z/TKu1crReP3hq3ZtaSIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBApQQMuFfquDVLgMB6BBqN2Zk0Tdq3EE+uZ701qxd4c7B9+7bRSNN09Qu9mTuB+f374/ryjdzlEqh7ApvHt8Xrf/HXb1fgSkQ8VqtNt//0Cw8BAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTeVcCAuw+EAAEC7yJw8uTs0SxLnoTUfYFt2+6Iu3aMGWzvPnVPKsxN7o2bWdaTWor0X2AwTePGk38asWv3O4bJsmhmWTxcr08f739iCQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyKuAAfe8noxcBAj0XaDZnD0WkTzU9yAlDzA+tjUmdozF0NBgyTutTns3Tp+OFz/0z6vTcMU7TZIkVv74sUjqv75KieRrrdbAI/X6vsurXOA1AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqJGDAvUKHrVUCBFYn0GjMjyfJyvEkidrqVnhrPQJbRoZvDbaPjAyvZ7k1ORa49PjjcenLX8pxQtE6KbDy0O9F+ttr/lmg061WHHWbeydPwl4ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEyiFgwL0c56gLAgQ6JNBozM6kafJ0REx2aEvbvEVgYCCNnXfdGe2b2z3lFDj1id+Kpe99r5zN6eqXBNL6b8TKnzy6ARW3uW8Az1ICBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECpRQw4F7KY9UUAQLrEWg05g6nabSH28fWs96a2wts23ZH3LVjLNI0vf3L3iiswJlf/0AsXrxY2PyCr05g8/i2eP0v/np1L7/7W25z74SiPQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiURMCAe0kOUhsECGxM4OTJ2aNZljy5sV2sfieBLSPDsXPnnTG8eROkCgjM798f15dvVKDT6rY4mKZx42++02EAt7l3GNR2BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAopYMC9kMcmNAECnRRoNuceiYgvdHJPe/1UYGAgjYkd47HtzlEkFRJ4fu+eCnVbvVaTJImbx/4sYtfubjR/utXKHqjXD5zoxub2JECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAg/wIG3PN/RhISINBFgWZz9lhE8lAXS1R269HRkdi9a3ukaVpZgyo2/tqzz8bZT36iiq1XpueVP/hcpL/50W73+8Vabbr9w0ceAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQqJmDAvWIHrl0CBH4uYLi9O19D+9b2e3Ztj9GtI90pYNdcC1x6/PG49OUv5TqjcOsXaH3oIxH/8f9c/wZrW/lMq7VytF4/eGpty7xNgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgECRBQy4F/n0ZCdAYN0ChtvXTfeuC7dtuyPu2jHm1vbu8BZi1zNHjsTiD39QiKxCrk1g0z3vjaVjf7a2RRt/+0qSJEcPHbrv6Y1vZQcCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBIogYMC9CKckIwECHRUw3N5RzlububW986ZF3fHMr38gFi9eLGp8ud9BYGhwKK5/69t99MmearWGHq7X913uYwilCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDogYAB9x4gK0GAQH4EDLd3/ixGR0di967tbm3vPG0hd5zfvz+uL98oZHah315gME3jxpN/GrFrd1+JsiyaWZYdrdcPnOhrEMUJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEOiqgAH3rvLanACBPAkYbu/sabi1vbOeZdntHyb3RpZlZWmn8n0kSRLLv/8fIv3Nj+bF4kqSZA8fOnTgWF4CyUGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQGcFDLh31tNuBAjkVMBwe2cPZsvIcNyza3sMDQ12dmO7FV7g+b17Ct+DBn4usPLQ70X62w/lkCR7qtUaerhe33c5h+FEIkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEBgAwIG3DeAZykBAsUQMNze2XOa2DEeEzvGOrup3UohcOnxx+PSl79Uil40EZHWfyNW/uTR3FJkWTSzbOWBev3gqdyGFIwAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgTULGHBfM5kFBAgUScBwe+dOa2AgjT27J2JkZLhzm9qpVAIG3MtznJvHt8Xrf/HXRWjoSpIkRw8duu/pIoSVkQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB2wsYcL+9kTcIECioQLM590hEfKGg8XMVe8vIcOx570SkaZqrXMLkS+DMkSOx+MMf5CuUNGsWGEzTuPE331nzuj4v+GKtNt3+e76HAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGCCxhwL/gBik+AwNsLnDw5ezTLkif5bFxgYsd4TOwY2/hGdii9gAH34h/xQJLE8rE/i9i1u4jNfLPVGjxar++7XMTwMhMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8FMBA+6+BAIESidguL0zRzowkMY9u7bH6NaRzmxol9ILnH7/wXj92rXS91nWBpP2cPvv/4dIf/OjhW0xy6KZZdnRev3AicI2ITgBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBigsYcK/4B6B9AmUTaDRmZ9I0OR4RrhzfwOEOD2+KPbsnYmhocAO7WFo1gfn9++P68o2qtV2afpc/+vEY+MwflKGfK0mSHD106L6ny9CMHggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhUTcCAe9VOXL8ESizQaDw3laaD7Vt7Dbdv4JzHx7bG3TvvjDRNN7CLpVUUMOBe3FNP678RK3/yaHEbePvkn63Vph8rW1P6IUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFB2AQPuZT9h/RGoiECjMT+eJCvHkyRqFWm5K21O7BiPiR1+PqAruBXY9Pm9eyrQZfla3Dy+LV7/i78uX2O3OsqeqtUOHC1pc9oiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUEoBA+6lPFZNEaieQLM593REfKx6nXem44GBNHbedWe0b2/3EFivgAH39cr1b92mgYFY+h/P9C9Abyo/02oNPlCv77vcm3KqECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCwEQED7hvRs5YAgVwINJtzj0TEF3IRpoAh2sPtk3t3xvDmTQVML3KeBAy45+k0bp9lKE0j/dNvxOt3br/9ywV/I8uimWUrD9TrB08VvBXxCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJRewIB76Y9YgwTKLXDy5I8eyLLsG+XusnvdDQ9viqm9OyNN0+4VsXMlBF579tk4+8lPVKLXMjSZJEns/MpXY/zBB+OlhZfj8pVrZWjrdj1cabWyw/X6gRO3e9GvEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQPwED7v2zV5kAgQ0KNBqzM2maHI+IsQ1uVcnlW0aGY897Jwy3V/L0O9/0pccfj0tf/lLnN7ZjVwR2/OG/jx2f/vTP9n7l1atx/sIrXamVs02vJEly9NCh+57OWS5xCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBB4Q8CAu0+BAIFCCjQa8+NJsnI8SaJWyAb6HHp8bGvcs2t7n1MoXyYBA+7FOc0tRz4ae5544lcCt29xb9/mXoUnSbJPHTp04FgVetUjAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgaIJGHAv2onJS4DALYFmc659++7HcKxdwHD72s2suL2AAffbG+XhjZHJqdj73e++Y5TFxaU4e+5i3LzZykPcbmf4Yq02/Ui3i9ifAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIG1CRhwX5uXtwkQgF9AVAAAIABJREFUyIFAszn3cEQ8moMohYvQvrW9PeDuIdBpAQPunRbt/H7v2bo1Jv/+udtuvHT9Rpw+c6EiQ+7ZU7XagaO3RfECAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQI9EzDg3jNqhQgQ6IRAozE7k6ZJoxN7VW0Pw+1VO/He9mvAvbfea602lKax55nvxKbJyVUtNeS+KiYvESBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQBQED7l1AtSUBAt0RaDTmx9N05URErG5CszsxCrmr4fZCHluhQhtwz+9xJUkS+77z3VUPt7/ZyfLySpw9dzGWlm7kt7nOJXum1Rp8oF7fd7lzW9qJAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIH1CBhwX4+aNQQI9EWg2Zw9FpE81JfiBS06MJBGe7h9dOtIQTsQuygCZx54IBb/7vtFiVuZnO3h9p1f+WqMP/jgunputVpx6syFSgy5Z1k0s2zwsCH3dX0qFhEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDomIAB945R2ogAgW4KnDz5oweyLPtGN2uUbe/2cPvk3p0xvHlT2VrTTw4Fzhw5Eos//EEOk1U70tjvPBS7/tN/2hCCIfcN8VlMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMAaBQy4rxHM6wQI9F6g0XhuKk0HT0TEWO+rF7Oi4fZinluRU8//zu/E9ePfLnILpcu+5chHY88TT3SkL0PuHWG0CQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECqxAw4L4KJK8QINBfgWZz7nhE3N/fFMWpbri9OGdVpqSXHn88Ln35S2VqqdC9jExMxN7v/11HezDk3lFOmxEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8A4CBtx9GgQI5Fqg2Zx7OCIezXXIHIUz3J6jw6hYFAPu+Tnw92zdGpN//1xXAhly7wqrTQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQ+AUBA+4+BwIEcivQaDw3laaDJyJiLLchcxTMcHuODqOCUQy45+PQh9I09jzzndg0Odm1QIbcu0ZrYwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEIsKAu8+AAIHcCjSbc8cj4v7cBsxZsD3vnYjRrSM5SyVOVQQMuPf/pAeSJCa/892uDre/2aUh9/6ftwQECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEyipgwL2sJ6svAgUXaDbnHo6IRwveRs/i37Nre4yPbe1ZPYUIvFXAgHt/v4kkSWLnV74a4w8+2LMg7SH3uRfOxc2brZ7V7FehLItmlg0ertf3Xe5XBnUJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIVEXAgHtVTlqfBAok0Gg8N5WmgyciYqxAsfsW1XB73+gV/gUBA+79/Rx2/OG/jx2f/nTPQyxdvxGnz1ww5N5zeQUJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIlFfAgHt5z1ZnBAor0GzOHY+I+wvbQA+DG27vIbZStxV4fu+e277jhc4LbDny0djzxBOd33iVOxpyXyWU1wgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQWJWAAfdVMXmJAIFeCZw8OXs0y5Ine1WvyHXGx7ZGe8DdQyAvAgbce38SI//012Lvt77V+8Jvqdgecn9xfqHvOXoRIMuimWWDh+v1fZd7UU8NAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAlUTMOBetRPXL4EcCzQa8+NpunIqIsZyHDMX0Qy35+IYhHiLgAH33n4SIxMTsff7f9fbou9S7fKVa/HSwsu5ydPNIIbcu6lrbwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgaoLGHCv+hegfwI5Emg2Z49FJA/lKFIuo2wZGY7JvTtzmU2oagvM798f15dvVBuhR91vHtoU+154oUfVVl+mSkPuEfFMrTZ9ePU63iRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAYDUCBtxXo+QdAgS6LtBozB1O0/h21wsVvMDw8KaY2rsz0jQteCfil1HAgHtvTnUoTWPPM9+JTZOTvSm4xirtW9zbg+7VeLKnarUDR6vRqy4JECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI9EbAgHtvnFUhQOA2As3m3KmIyOe0Zk5Ob2Agjen9uw235+Q8xPhVgTNHjsTiD3+AposCSZLEvu98N7fD7W+2fvbcxbh6dbGLEnna2pB7nk5DFgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgeILGHAv/hnqgEDhBZrNuUci4guFb6SLDbSH2yf37ozhzZu6WMXWBDYmcOoTvxVL3/vexjax+h0F2sPtO7/y1Rh/8MHcK7VarTh15kIsLd3IfdYOBfxirTbd/r3MQ4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDABgUMuG8Q0HICBDYm0GjMj6fpSvv29rGN7VTu1ffs2h7jY1vL3aTuCi9w6fHH49KXv1T4PvLawN1f/b8KMdz+pl97yH3uhXNx82Yrr6QdzZUk2acOHTpwrKOb2owAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBABQUMuFfw0LVMIE8CzebssYjkoTxlyluWiR3jMbHD/H/ezkWeXxW4/oMfxPxHj6DpgsCWIx+NPU880YWdu7vl0vUb8eL8QneL5Gj3JEk+fujQfU/nKJIoBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAonYMC9cEcmMIHyCDQac4fTNL5dno4630n71vb27e0eAkUR+IfJvZFlWVHiFiJnUYfb38S9fOVavLTwciGsOxDySquVHa7XD5zowF62IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBJAQPulTx2TRPIh0CzOXc8Iu7PR5r8pRge3hRTe3dGmqb5CycRgXcQmN+/P64v3+DTIYGRiYnY+/2/69Bu/dvm/D++Gq+88pP+Beht5Sut1spMvX7wVG/LqkaAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgHAIG3MtxjrogUDiBkydnj2ZZ8mThgvco8MBAGvdO7YqhocEeVVSGQGcEzhw5Eos//EFnNqv4LmUZbn/zGE+fuRCvLS5V4lSzLJpZNni4Xt93uRINa5IAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBABwUMuHcQ01YECKxeoNmca99sO7n6FdV6c897J2J060i1mtZtKQQuPf54XPryl0rRSz+bGErT2H/qdD8jdLx2q9WKuRfOxc2brY7vndMNn6nVpg/nNJtYBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBHIrYMA9t0cjGIHyCjSbc49ExBfK2+HGOpvYMR4TO8Y2tonVBPok0Lp8OWYP/VqfqpejbHu4fc8z34lNk+X7GaCl6zfixfmFchzUqrrInqrVDhxd1ateIkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgloABdx8CAQI9FWg05sfTdKV9e7sJ7reR3zIyHJN7d/b0TBQj0GmB+f374/ryjU5vW4n9yjzc/uYBvvLq1Th/4ZVKnOetf9hOsk8dOnTgWGUa1igBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBDQoYcN8goOUECKxNoNn80WMR2WfWtqoabw8MpDG9f3ekaVqNhnVZWoFTn/itWPre90rbX7caS5Ik9n3nu6W8uf2tZmfPXYyrVxe7RZm7fVut+Ei9Pn08d8EEIkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJBDAQPuOTwUkQiUVaDReG4qTQfny9rfRvua2rszRkaGN7qN9QT6LnD5L/8yzv/B7/c9R5ECtIfbd37lqzH+4INFir3urK1WK16YX4jl5ZV171GwhVdarZWZev1g+08w8RAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8C4CBtx9HgQI9Eyg2Zw9FpE81LOCBSo0sWM8JnaMFSixqATeXWBucm/czDJMqxCo2nD7myRL12/Ei/MLqxAqxytZFs0sGzxcr++7XI6OdEGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgOwIG3LvjalcCBN4i4Pb2d/4khoc3xb1Tu3wzBEolcObIkVj84Q9K1VM3mqnqcPublhcvXYmLlyo17/3NWm36gW58S/YkQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUBYBA+5lOUl9EMi5gNvb3/6ABgbSW8PtQ0ODOT9B8QisTeC1Z5+Ns5/8xNoWVeztqg+3v3ncp89ciNcWl6p0+p+t1aYfq1LDeiVAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCwFgED7mvR8i4BAusSaDRmZ9I0aaxrcckX3bNre4yPbS15l9qrqsD8gQNxfen1qrb/rn0bbv85z/LySrx4aiFu3mxV5ltpteIj9fr08co0rFECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECaxAw4L4GLK8SILA+gWZzrj3Ed//6Vpd31ejoSOzZPVHeBnVWeYGFz38+rnz9qco7vBVgIEli4itfjfEHH2TzhsDVa4tx9scXq+RxpdVamanXD56qUtN6JUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQILAaAQPuq1HyDgEC6xZoNOYOp2l8e90blHThwEAa0/t3R5qmJe1QWwR+KjA3uTduZhmONwSG0jT2PPOd2DQ5yeQtAmfPXYyrVxcr45Jl0ZyZmZ6pTMMaJUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQILBKAQPuq4TyGgEC6xNwe/vbu+1570SMbh1ZH6pVBAokcPbf/tt47Vv/vUCJuxfVcPu727ZarZh74VzcvNnq3iHkbufka7XafQ/nLpZABAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBPooYMC9j/hKEyi7gNvb3/6ER0dHYs/uibIfv/4I/EzALe4RIxMTcfdffcPN7bf56+LqtcU4++OLlfqrJ0mSjx86dN/TlWpaswQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTeRcCAu8+DAIGuCTSbc+2BvY91rUABNx4YSGN6/+5I07SA6UUmsD6BS48/Hpe+/KX1LS7BqvZw+97v/10JOulNC2fPXYyrVxd7UywfVa60Wisz9frBU/mIIwUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB/goYcO+vv+oESivQaDw3laaD86VtcJ2N7XnvRIxuHVnnassIFFfg9PsPxuvXrhW3gXUm33Lko7HniSfWubqay1qtVsy9cC5u3mxVBiDLojkzMz1TmYY1SoAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOBdBAy4+zwIEOiKQLM5eywieagrmxd009HRkdize6Kg6cUmsDGB1559Nn78rz8ZWZZtbKOCrE6SJLb/H38YOz796YIkzlfMq9cW4+yPL+YrVPfTfLFWm36k+2VUIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJBvAQPu+T4f6QgUUsDt7b96bAMDaUzv3x1pmhbyTIUm0AmBhc9/Pq58/alObJXrPYbSNO7+b38aWz74wVznzHu402cuxGuLS3mP2dF8rVZ8pF6fPt7RTW1GgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoGACBtwLdmDiEiiCgNvbf/WU7t65LbbdOVqE45ORQFcFzvz6B2LxYnlv5h6ZmIi7/+obsWlysquOVdh8eXklXjy1EDdvtqrQ7ps9Xmm1Bqfq9X2Xq9S0XgkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj8ooABd98DAQIdFXB7+69ybhkZjsm9OzvqbDMCRRW4cfp0nL3/w7HcKtfQcpIkMfKvjsSeJ54o6tHkMvfFS1fi4qXKzXp/s1abfiCXByIUAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgR4IGHDvAbISBKok0GzOPRIRX6hSz7fr9d59u2J486bbvebXCVRGoGxD7kNpGnf/tz+NLR/8YGXOsJeNzr1wLtq3uVfpSZLsU4cOHThWpZ71SoAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOBNAQPuvgUCBDom0GjMj6fpyqmIGOvYpgXfaNu2O+Luu+4seBfiE+i8wE/+5m9i4X/7XyPLss5v3sMdR/7pr8Xeb32rhxWrV2pxcSlOnblQtcavtForM/X6wfbvqR4CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEClRIw4F6p49Ysge4KNJtzD0fEo92tUpzdBwbSmN6/O9I0LU5oSQn0UOC1Z5+N8//Lv47lVquHVTtTqn1r+/YvfyXGH3ywMxva5V0Fzp67GFevLlZN6Zlabfpw1ZrWLwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAED7r4BAgQ6JtBszrVvmp3s2IYF3+ieXdtjfGxrwbsQn0B3BW6cPh1n7/9wYYbckySJzf/sn8XUn/9Fd2Hs/ksCy8sr8eKphbh5s3g/DLHBo/xsrTb92Ab3sJwAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAoQQMuBfquIQlkF+Bkydnj2ZZ8mR+E/Y22fDwprh3aldvi6pGoMACZz70oVg83f4Zmfw+IxMTcfdffSM2Tfo5nn6c0sVLV+Lipcv9KN3PmldarZWZev1gvv/i6KeQ2gQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAqUTMOBeuiPVEIH+CDSbc8cj4v7+VM9f1am9O2NkZDh/wSQikGOBhc9/Pn7y/3w9sizLVcr2YPv2x//v2PLBD+YqV9XCtFqteGF+Idq3uVfseaZWmz5csZ61S4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUGEBA+4VPnytE+iUQKMxdzhN49ud2q/o+4yOjsSe3RNFb0N+An0RuHH6dJz/N/8mF7e5G2zvyyfwrkUvX7kWLy28nL9g3U/02Vpt+rHul1GBAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQP8FDLj3/wwkIFB4gWZz9lhE8lDhG+lQA9P7d8fQ0GCHdrMNgWoKvPbss/Hyp//3WLx4sacASZLEe/ZOxvY/+RM3tvdUfvXFTp+5EK8tLq1+QTnevNJqrczU6wdPlaMdXRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBB4ZwED7r4OAgQ2JNBoPDeVpoPzG9qkRIu3bbsj7r7rzhJ1pBUC/RW4Nej+R38Ur585HVmWdS3Me7ZujfTD98eeJ57oWg0bd0ZgcXEpTp250JnNirXLM7Xa9OFiRZaWAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwNoFDLiv3cwKAgR+QaDZnHskIr4AJWJgII327e1pmuIgQKALAguf/3ws/49vxfVLl+LmBofdB5IkNu/YEclv/E+x83Ofi02Tk11IbMtuCVT0FvdIkuxThw4dONYtV/sSIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyIOAAfc8nIIMBAos0GzOXY6IsQK30LHoEzvGY2IHio6B2ojAuwi0b3Z/5etfj+zMmbj5D/9w680bK8u/cst7e5B9cHAo0s2bIpnaF0Mf+EDcceRIbPngB/kWWGDp+o14cX6hwB2sO/qVVmtwql7f1/6910OAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECglAIG3Et5rJoi0BuBkydnj2ZZ8mRvquW7itvb830+0hEgUD6BlxZejstXrpWvsdt2lD1Vqx04etvXvECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgoAIG3At6cGITyINAszl3PCLuz0OWfmdwe3u/T0B9AgSqJrC8vBJzL5yrWtu3+m214iP1+nT792APAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgdIJGHAv3ZFqiEBvBBqN2Zk0TRq9qZbvKkNDg7F/365I0zTfQaUjQIBAyQSqe4t7nK7VpqdKdpzaIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHBLwIC7D4EAgXUJNJuzxyKSh9a1uGSL7tm1PcbHtpasK+0QIEAg/wJVvsU9Ir5Yq00/kv9TkpAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDA2gQMuK/Ny9sECEREozE/nqYrpyJirOog7dvbp/fvrjqD/gkQINA3gQrf4n6l1VqZqdcPtn8/9hAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAojYAB99IcpUYI9E7g5MnZo1mWPNm7ivmtdPfObbHtztH8BpSMAAECJReo+C3u36zVph8o+RFrjwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoGICBtwrduDaJdAJgRMn5k4kSdQ6sVeR9xgYSG/d3p6maZHbkJ0AAQKFF6jwLe7RasVH6vXp44U/RA0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQeEPAgLtPgQCBNQk0GrMzaZo01rSopC9P7BiPiR1jJe1OWwQIECiOQJVvcc+yaM7MTM8U57QkJUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIPDuAgbcfSEECKxJoNmcPRaRPLSmRSV82e3tJTxULREgUGiB02cuxGuLS4XuYb3hkyT71KFDB46td711BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBPIkYMA9T6chC4GcCzQa8+NpunIqIip/bfm2bXfE3XfdmfMTE48AAQLVEVhcXIpTZy5Up+Ff7vRKqzU4Va/vu1xVAH0TIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiUR8CAe3nOUicEui5w8uTs0SxLnux6oQIUmN6/O4aGBguQVEQCBAhUR6DKt7hHxBdrtelHqnPaOiVAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECirgAH3sp6svgh0QaDZnDseEfd3YetCbTk+tjXu2bW9UJmFJUCAQBUELl+5Fi8tvFyFVt+2x1ZrZV+9frD9J614CBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBRWwIB7YY9OcAK9FWg0nptK08H53lbNZ7V79+2K4c2b8hlOKgIECFRcYO6Fc7G8vFJRheypWu3A0Yo2r20CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGSCBhwL8lBaoNAtwWazR89FpF9ptt18r7/lpHhmNy7M+8x5SNAgEBlBV559Wqcv/BKZftvtbJ6vX7gRGUBNE6AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFB4AQPuhT9CDRDojUCzOXcqIiZ7Uy2/Ve7ZtT3Gx7bmN6BkBAgQqLhAq9WK9i3uN2+2qirxTK02fbiqzeubAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECg+AIG3It/hjog0HWBkyd/9ECWZd/oeqGcFxgaGozp/btznlI8AgQIEHhp4eW4fOVaZSFarfhIvT59vLIAGidAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECi0gAH3Qh+f8AR6I9Bszh6LSB7qTbX8VpnYMR4TO8byG1AyAgQIELglsHT9Rrw4v1BlDbe4V/n09U6AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQKLiAAfeCH6D4BLot0GjMj6fpyqvdrlOE/du3t7dvcfcQIECAQP4FXjy1EEtLN/IftEsJ3eLeJVjbEiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIdF3AgHvXiRUgUGyBkydnj2ZZ8mSxu9h4+tHRkdize2LjG9mBAAECBHoicPnKtXhp4eWe1MpjkSyL5szM9Ewes8lEgAB2iITVAAAgAElEQVQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4N0EDLj7PggQeFeBZnPueETcX3WmPe+diNGtI1Vn0D8BAgQKI9BqtWLuhXNx82arMJk7HTRJsk8dOnTgWKf3tR8BAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBbgoYcO+mrr0JFFyg0XhuKk0H5wvexobjDw0NxvT+3RvexwYECBAg0FuB9g3u7ZvcK/ycrtWmpyrcv9YJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQKKGDAvYCHJjKBXgk0m3MPR8SjvaqX1zrbtt0Rd991Z17jyUWAAAEC7yCwdP1GvDi/UGkft7hX+vg1T4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAopIAB90Iem9AEeiNw4sTciSSJWm+q5bdK+/b29i3uHgIECBAonsDcC+dieXmleME7lDjLojkzMz3Toe1sQ4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDrAgbcu06sAIFiCjQaszNpmjSKmb5zqYeHN8W9U7s6t6GdCBAgQKCnAq+8ejXOX3ilpzXzVqzVio/U69PH85ZLHgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJvJ2DA3XdBgMDbCjSbP3osIvtM1Xnu2bU9xse2Vp1B/wQIECisQPv29vYt7hV/nqnVpg9X3ED7BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBREw4F6QgxKTQK8Fms25UxEx2eu6eav3vgN7Ik3TvMWShwABAgTWIHD23MW4enVxDSvK96pb3Mt3pjoiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJRVwIB7WU9WXwQ2INBozM6kadLYwBalWDo6OhJ7dk+UohdNECBAoMoCl69ci5cWXq4yQbt3t7hX/QvQPwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgIAIG3AtyUGIS6KVAs/mjxyKyz/SyZh5r3bNre4yPbc1jNJkIECBAYA0CrVYrnp89u4YV5Xy11crq9fqBE+XsTlcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJlETDgXpaT1AeBDgo0m3OnImKyg1sWcqv3HdgTaZoWMrvQBAgQIPDLAmfPXYyrVxcrzpI9VasdOFpxBO0TIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjkXMCAe84PSDwCvRZoNGZn0jRp9Lpu3uqNjo7Ent0TeYslDwECBAisU+DylWvx0sLL61xdnmWt1sq+ev1g+wfZPAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRyKWDAPZfHIhSB/gk0mz96LCL7TP8S5KPyPbu2x/jY1nyEkYIAAQIENizQarXi+dmzG96n+BskX6vV7nu4+H3ogAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoKwCBtzLerL6IrBOgWZzrn2r6+Q6l5dm2fsO7Ik0TUvTj0YIECBAIOLsuYtx9epi1SmutFqDU/X6vstVh9A/AQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAPgUMuOfzXKQi0BeBRmN2Jk2TRl+K56jo6OhI7Nk9kaNEohAgQIBAJwQuX7kWLy283ImtCr1HkmSfOnTowLFCNyE8AQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAaQUMuJf2aDVGYO0CzeaPHovIPrP2leVacc+u7TE+trVcTemGAAECBKLVasXzs2dJRJyu1aanQBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDIo4AB9zyeikwE+iTQbM6diojJPpXPTdnp/btjaGgwN3kEIUCAAIHOCbx4aiGWlm50bsOC7pQkyccPHbrv6YLGF5sAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDEAgbcS3y4WiOwFoFGY3YmTZPGWtaU8d3h4U1x79SuMramJwIECBCIiFdevRrnL7zCIuKbtdr0AyAIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5E3AgHveTkQeAn0SaDbnHo6IR/tUPjdlJ3aMx8SOsdzkEYQAAQIEOiuwdP1GvDi/0NlNC7pbq7Wyr14/2P7TWzwECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEciNgwD03RyEIgf4KNJtzxyPi/v6m6H/1e/ftiuHNm/ofRAICBAgQ6JrA3AvnYnl5pWv7F2fj5Gu12n3tH3DzECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMiNgAH33ByFIAT6J9BozI+n6cqr/UuQj8oDA2n8k+k9+QgjBQECBAh0TeClhZfj8pVrXdu/QBtfqdWmxwuUV1QCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEKCBhwr8Aha5HA7QROnvzRA1mWfeN275X918fHtsY9u7aXvU39ESBAoPICV68txtkfX6y8QxsgSbJPHTp04BgMAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAnkRMOCel5OQg0AfBZrN2WMRyUN9jJCL0u3h9vaQu4cAAQIEyi3QarXi+dmz5W5y9d09U6tNH179694kQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0F0BA+7d9bU7gUIINJtzpyJishBhuxhyev/uGBoa7GIFWxMgQIBAXgRePLUQS0s38hKnrzlarZV99frB9j8LeAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj0XcCAe9+PQAAC/RVoNGZn0jRp9DdF/6u3B9vbA+4eAgQIEKiGwPl/fDVeeeUn1Wj2tl0mX6vV7nv4tq95gQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEAPBAy49wBZCQJ5Fmg259oDbY/mOWMvso2PbY17dm3vRSk1CBAgQCAHAlevLcbZH1/MQZJcRDhdq01P5SKJEAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABApUXMOBe+U8AQNUFms25pyPiY1V3aA+3t4fcPQQIECBQDYFWqxXPz56tRrOr6DJJko8fOnRf+58JPAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgT6KmDAva/8ihPov0CzOXc5Isb6n6S/Cab3746hocH+hlCdAAECBHoq8OKphVhautHTmvktlj1Vqx04mt98khEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECFRFwIB7VU5anwTeRqDRmJ1J06RRdZz2YHt7wN1DgAABAtUSOP+Pr8Yrr/ykWk2/S7et1uCd9fq+9g++eQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj0TcCAe9/oFSbQf4Fmc+7hiHi0/0n6m2B8bGvcs2t7f0OoToAAAQI9F7h6bTHO/vhiz+vmtWCSZJ86dOjAsbzmk4sAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAaAgbcq3HOuiTwtgLN5tzTEfGxqvPcvXNbbLtztOoM+idAgEDlBJaXV2LuhXOV6/tdGn6mVps+DIQAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAPwUMuPdTX20CfRZoNucuR8RYn2P0vfy9+3bF8OZNfc8hAAECBAj0XqA94N4edPf8VKDVWtlXrx88xYMAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAvwQMuPdLXl0CfRZoNJ6bStPB+T7HyEX5979vMhc5hCBAgACB3gucPXcxrl5d7H3h/Fb8bK02/Vh+40lGgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQdgED7mU/Yf0ReAeBkydnj2ZZ8mTVgbaMDMfk3p1VZ9A/AQIEKitw8dKVuHip/QeaeNoCWRbNmZnpGRoECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE+iVgwL1f8uoS6LNAszl7LCJ5qM8x+l5+27Y74u677ux7DgEIECBAoD8Ci4tLcerMhf4Uz2nVVmtlX71+8FRO44lFgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQcgED7iU/YO0ReCeBEyfmTiRJ1KoudM+u7TE+trXqDPonQIBAZQVarVY8P3u2sv2/Q+OfrdWmH4NCgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoB8CBtz7oa4mgRwINJtzWQ5i9D3Cvft2xfDmTX3PIQABAgQI9E9g7oVzsby80r8AOaucZdGcmZmeyVkscQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBCoiYMC9IgetTQK/KNBozB1O0/g2lYj3v28SAwECBAhUXODsuYtx9epixRV+uf1Wa2VfvX7wFBQCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECvRYw4N5rcfUI5ECg2Zx7OCIezUGUvkbYMjIck3t39jWD4gQIECDQf4GLl67ExUuX+x8kXwk+W6tNP5avSNIQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhUQcCAexVOWY8E3iLQbM4ei0geqjrM+NjWuGfX9qoz6J8AAQKVF7h6bTHO/vhi5R1+ESDLojkzMz0DhQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgECvBQy491pcPQI5EDhxYu5EkkQtB1H6GmFix3hM7BjrawbFCRAgQKD/AkvXb8SL8wv9D5KzBK3W4J31+j5X2+fsXMQhQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECJRdwIB72U9YfwTeRqDZnMvAREzt3RkjI8MoCBAgQIBA/P3zpym8RSBJsk8dOnTgGBgCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECvRQw4N5LbbUI5ECg0Zg7nKbx7RxE6XuE6f27Y2hosO85BCBAgACB/gu8eGohlpZu9D9IvhJ8s1abfiBfkaQhQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAou4AB97KfsP4IvEXg5MnZo1mWPAkm4v3vm8RAgAABAgRuCZw9dzGuXl2k8RaBWm3a/1/wVRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECPRUwMBKT7kVI9B/gWbzR49FZJ/pf5L+Jhge3hT3Tu3qbwjVCRAgQCA3AhcvXYmLly7nJk9egiRJ8vFDh+57Oi955CBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECi/gAH38p+xDgn8kkCzOXc8Iu6vOsuWkeGY3Luz6gz6J0CAAIE3BC5fuRYvLbzM41cEkq/Vavc9DIYAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBArwQMuPdKWh0CORFoNufa19OO5SRO32JM7BiPiR2VZ+ibv8IECBDIm8Di4lKcOnMhb7HykOd0rTY9lYcgMhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECFRDwIB7Nc5ZlwRuCTQa8+NpuvIqjoi7d26LbXeOoiBAgAABArcEWq1WPD97lsbbCLRaK/vq9YOn4BAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDohYAB914oq0EgJwKNxtzhNI1v5yROX2NM7d0ZIyPDfc2gOAECBAjkS+Dvnz+dr0D5SfPZWm36sfzEkYQAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKDMAgbcy3y6eiPwFoGTJ2ePZlnyJJiIe/ftiuHNm1AQIECAAIGfCbx4aiGWlm4Q+VWBb9Zq0w+AIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINALAQPuvVBWg0BOBJrNuUci4gs5idPXGO9/32Rf6ytOgAABAvkTOH3mQry2uJS/YP1PdKVWmx7vfwwJCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEqiBgwL0Kp6xHAm8INJtzxyPifiARBtx9BQQIECDwVoHz//hqvPLKT8C8jUCrFR+p16fb/xzhIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINBVAQPuXeW1OYF8CZw4MXciSaKWr1S9T7NlZDgm9+7sfWEVCRAgQCDXAhcvXYmLly7nOmMfw32xVptu/0kwHgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJdFTDg3lVemxPIl0CzOZflK1F/0hhw74+7qgQIEMi7wCuvXo3zF17Je8x+5XumVps+3K/i6hIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECFRHwIB7dc5apxUXaDTmx9N05dWKM9xqf9u2O+Luu+5EQYAAAQIEfklgcXEpTp25QOUdBGq1af/fwddBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQdQFDKl0nVoBAPgQajbnDaRrfzkea/qaY2DEeEzvG+htCdQIECBDInYAB93c/klYrPlKvTx/P3cEJRIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUCoBA+6lOk7NEHhngZMnf/RAlmXfYBRhwN1XQIAAAQJvJ7C8vBJzL5yD884CX6zVph8BRIAAAQIECBAgQIAAAQIECBAgQIAAAQIE/n/27j07ruraF/CsLcnUFVYkvzAGbMvgUsL5Q1vVAkwLgBZgWgBpAaYFcVqAaUFMCzAtKG//Ebgug2UTMI78kGKjK2x51x3lnISHH6oq1XPvr8Y4I+de1pprzm/tM4jH+LEgQIAAAQIECBAgQIAAgUEKCLgPUldtAmMkkGXNdiDt4zFqaWStHH3tUMztnR3Z+Q4mQIAAgfEV+PvX18a3udF39mWa1k6Nvg0dECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIFFlAwL3It2s2Ar8SyLIrZyNaH0KJWDx2OGZnqygIECBAgMATAgLuz/8o0rTmzw/+74YAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQGCgAgIqA+VVnMD4CGRZ80JEvDU+HY2uEwH30dk7mQABAuMu0Pzm+3j4cHvc2xxZf3neqtfrSxdH1oCDCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECi8g4F74KzYggX8LCLj/8iXU3ng1ZmamfRoECBAgQOAJgWvXb8ZPm1tkni3w5zStnQVEgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAYFACAu6DklWXwJgJZFmzNWYtjayd//nT8ZGd7WACBAgQGG8BAfed7qf1WZound5plb9OgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoFcBAfde5ewjMGECAu6/XJiA+4R9vNolQIDAEAUE3HfEvpamtcUdV1lAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoEcBAfce4WwjMEkCjcZXi0kyfXWSeh5krwLug9RVmwABApMt8N33a3Hv3uZkDzHg7vN8el+9fmJ9wMcoT4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUFIBAfeSXryxyyXQaDRPJUl8Ua6pnz2tgLsvgQABAgSeJbB2ayPWbsluP+8LyfN4u16vXfAVESBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEBiEgID7IFTVJDBmAgLuv1xItbonXl88MmY3pB0CBAgQGBcBAfeObuKTNK2d6WilRQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgS6FBBw7xLMcgKTKJBlzY8i4i+T2Hu/e35xthrHjx3ud1n1CBAgQKAgAgLuHV3k52lae7ejlRYRIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQ6FJAwL1LMMsJTKJAljXbr6x+PIm997tnAfd+i6pHgACBYgkIuHd0n9fStLbY0UqLCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECHQpIODeJZjlBCZRQMD9l1sTcJ/EL1jPBAgQGJ6AgHtn1nk+va9eP7He2WqrCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECHQuIODeuZWVBCZWIMsun4uovD+xA/SxcQH3PmIqRYAAgQIKCLh3dql5Hm/X67ULna22igABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEDnAgLunVtZSWBiBbKs2Q6gvTWxA/SxcQH3PmIqRYAAgQIKCLh3fKmfpGntTMerLSRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQoYCAe4dQlhGYZAEB919uT8B9kr9kvRMgQGDwAgLuHRt/nqa1dztebSEBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBDgUE3DuEsozAJAsIuP9yewLuk/wl650AAQKDFxBw78y41YpsZaW20tlqqwgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAh0LiDg3rmVlQQmViDLmusRMT+xA/SxcQH3PmIqRYAAgQIKCLh3fqlpWvNnic65rCRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEOhQQCilQyjLCEyyQJY1W5Pcfz97F3Dvp6ZaBAgQKJ6AgHvnd5rnrXq9vnSx8x1WEiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIENhZQMB9ZyMrCEy8gID7L1co4D7xn7MBCBAgMFABAffOeSuVynvLyyfPd77DSgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQI7Cwi472xkBYGJFxBw/+UKBdwn/nM2AAECBAYqIODeFe8naVo709UOiwkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjsICDg7hMhUAIBAfdfLlnAvQQfvBEJECCwCwEB967wPk/T2rtd7bCYAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwA4CAu4+EQIFF2g0Lq8kSaVR8DE7Hk/AvWMqCwkQIFBKAQH3rq79yzStnepqh8UECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEdhAQcPeJECi4QKPRPJUk8UXBx+x4PAH3jqksJECAQCkFBNy7u/Y0rfnzRHdkVhMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECOwgIJDiEyFQcAEB999esIB7wT944xEgQGCXAgLu3QHm+faJev3N1e52WU2AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDg2QIC7r4OAgUXEHD/7QULuBf8gzceAQIEdikg4N4dYJ7H2/V67UJ3u6wmQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8GwBAXdfB4GCCwi4P3nB//On4wW/deMRIECAQK8CAu5dy/05TWtnu95lAwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFnCAi4+zQIFFxAwP3JCxZwL/hHbzwCBAjsQuCHG7djfeP+LiqUbusnaVo7U7qpDUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDAwAQH3gdEqTGA8BATcn7wHAffx+DZ1QYAAgXEUuHb9Zvy0uTWOrY1rT5+nae3dcW1OXwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABApMnIOA+eXemYwJdCQi4P8kl4N7VJ2QxAQIESiUg4N71dX+ZprVTXe+ygQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMAzBATcfRoECi4g4P7kBf9p6WgkSVLwmzceAQIECPQiIODetdpGmtYWut5lAwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFnCAi4+zQIFFxAwP3JC148djhmZ6sFv3njESBAgEAvAt+u3oitrQe9bC3tnjSt+TNFaW/f4AQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB/gsIo/TfVEUCYyUg4P7kdQi4j9UnqhkCBAiMlcDfv742Vv1MQjN53jU7TLMAACAASURBVKrX60sXJ6FXPRIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECIy/gID7+N+RDgnsSkDA/Uk+AfddfVI2EyBAoNACAu7dX2+ex9v1eu1C9zvtIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIPCkgIC7r4JAwQUE3J+84JcP74/9++YKfvPGI0CAAIFeBATcu1erVFofLC8vnet+px0ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEnhQQcPdVECi4gID7kxd86OBCHDo4X/CbNx4BAgQIdCuwubkVq9dvdrvN+ohP0rR2BgQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBfggIuPdDUQ0CYywg4P7k5Qi4j/EHqzUCBAiMUEDAvWd8Afee6WwkQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBD4vYCAu2+CQMEFBNyfvOAXZ6tx/Njhgt+88QgQIECgW4H1jfvxw43b3W6zPuLLNK2dAkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgHwIC7v1QVIPAGAsIuD95OQLuY/zBao0AAQIjFFi7tRFrt9ZH2MHEHi3gPrFXp3ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwPgJCLiP353oiEBfBQTcn+Scmkrij7WjfXVWjAABAgQmX0DAvec7FHDvmc5GAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB3wsIuPsmCBRcQMD96Rf8P386XvCbNx4BAgQIdCtw7frN+Glzq9tt1kdEmtb8ucKXQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0BcBQZS+MCpCYHwFBNyffje1N16NmZnp8b04nREgQIDA0AUE3HsnF3Dv3c5OAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB3woIuPsiCBRcQMD96Re8eOxwzM5WC377xiNAgACBbgT+/vW1bpZb+ysBAXefAwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQL8EBNz7JakOgTEVEHB/+sW8cuRALMzvHdNb0xYBAgQIjEJAwL139TyPt+v12oXeK9hJgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4N8CAu6+BAIFFxBwf/oFHzq4EIcOzhf89o1HgAABAp0KbG5uxer1m50ut+53AgLuPgkCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIF+CQi490tSHQJjKtBoXF1Iku27Y9reyNpqv97efsXdjwABAgQItAXu3d+M7/6xBqNHAQH3HuFsI0CAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQeEJAwN1HQaAEAlnWbJVgzK5GfHG2GsePHe5qj8UECBAgUFyBtVsbsXZrvbgDDngyAfcBAytPgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECiRgIB7iS7bqOUVEHB/8u6nppL4Y+1oeT8KkxMgQIDAbwR+uHE71jfuU+ld4JM0rZ3pfbudBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBP4tIODuSyBQAgEB96df8p+WjkaSJCX4AoxIgAABAjsJXLt+M37a3Nppmb/+bAEBd18HAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAXwQE3PvCqAiB8RYQcH/6/SweOxyzs9XxvjzdESBAgMBQBP7+9bWhnFPgQwTcC3y5RiNAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIDFNAwH2Y2s4iMCKBLGuuR8T8iI4f22NfPrw/9u+bG9v+NEaAAAECwxHI8zy+vvzdcA4r7ikC7sW9W5MRIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBIYqIOA+VG6HERiNQJY1L0TEW6M5fXxP3b//D/HyS/vGt0GdESBAgMBQBDY3t2L1+s2hnFXgQwTcC3y5RiNAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIDFNAwH2Y2s4iMCIBAfenw784W43jxw6P6FYcS4AAAQLjIrB2ayPWbrX/ZSd+uxD4PE1r7+5iv60ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEHgsIuPsQCJRAQMD96Zc8NZXEH2tHS/AFGJEAAQIEnifww43bsb5xH9LuBL5M09qp3ZWwmwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgICAu2+AQCkEsqx5PiLeKcWwXQ5Ze+PVmJmZ7nKX5QQIECBQJIFvV2/E1taDIo00ilkE3Eeh7kwCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAEFvOBewEs1EoHfC2RZ80xEfEzmSYGjrx2Kub2zaAgQIECgxAJ///paiafv2+gC7n2jVIgAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUG4BAfdy37/pSyIg4P7siz50cCEOHZwvyZdgTAIECBD4vcDm5lasXr8JZvcCAu67N1SBAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgIgTcfQYESiAg4P7sS35xthrHjx0uwVdgRAIECBB4msCdu/fix5t34OxeQMB994YqECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQICLj7BgiUQ6DRaJ5KkviiHNN2N+XUVBJ/rB3tbpPVBAgQIFAYgR9u3I71jfuFmWeEgwi4jxDf0QQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIgl4wb1It2kWAs8QEHB//qdRe+PVmJmZ9v0QIECAQAkFvl29EVtbD0o4ed9HFnDvO6mCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFyCgi4l/PeTV0yAQH351/4K0cOxML83pJ9FcYlQIAAgTzP4+vL34Hoj4CAe38cVSFAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIlF5AwL30nwCAsghkWbNVllm7nXP//j/Eyy/t63ab9QQIECAw4QKbm1uxev3mhE8xNu0LuI/NVWiEAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDDZAgLuk31/uifQsYCA+7OpqtU98frikY4tLSRAgACBYgis3dqItVvrxRhm9FMIuI/+DnRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECiEgIB7Ia7REAR2FsiyZjvBN7/zynKu+NPS0UiSpJzDm5oAAQIlFbh2/Wb8tLlV0un7PraAe99JFSRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIlFNAwL2c927qEgpkWfNCRLxVwtE7Gvnoa4dibu9sR2stIkCAAIFiCPz962vFGGQ8phBwH4970AUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAYOIFBNwn/goNQKAzAQH35zsdOrgQhw564L6zr8kqAgQITL7A5uZWrF6/OfmDjM8EAu7jcxc6IUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhMtICA+0Rfn+YJdC6QZVfORrQ+7HxHuVZWq3vi9cUj5RratAQIECixwJ279+LHm3dKLND30QXc+06qIAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgnAIC7uW8d1OXUCDLmmci4uMSjt7xyH9aOhpJknS83kICBAgQmFyBa9dvxk+bW5M7wPh1LuA+fneiIwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDARAoIuE/ktWmaQPcCly5dPt1qVT7tfmd5dhx97VDM7Z0tz8AmJUCAQIkF/v71tRJPP5DRBdwHwqooAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKB8AgLu5btzE5dUoNFonkqS+KKk43c09v79f4iXX9rX0VqLCBAgQGByBTY3t2L1+s3JHWA8OxdwH8970RUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAYOIEBNwn7so0TKA3gUbj8kqSVBq97S7HrpmZ6ai98Wo5hjUlAQIESizw4z/vxp07/yqxwEBGF3AfCKuiBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIHyCQi4l+/OTVxigSxrtko8fkejtwPu7aC7HwECBAgUV+Db1RuxtfWguAOOZjIB99G4O5UAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUDgBAffCXamBCDxbQMB956/j5cP7Y/++uZ0XWkGAAAECEynw8OF2NL/5fiJ7H/OmP0nT2pkx71F7BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECEyAg4D4Bl6RFAv0SyLLmhYh4q1/1ilhnbm42jr56qIijmYkAAQIEImJ94378cOM2i/4LCLj331RFAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEApBQTcS3nthi6rQJY1z0fEO2Wdv9O5/+dPxztdah0BAgQITJjAd9+vxb17mxPW9US0K+A+EdekSQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDA+AsIuI//HemQQN8Esqx5JiI+7lvBghY6+tqhmNs7W9DpjEWAAIFyC/z962vlBhjc9ALug7NVmQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQKgEB91Jdt2HLLpBlzY8i4i9ld9hp/oX5vfHKkQM7LfPXCRAgQGDCBO7d34zv/rE2YV1PTLsC7hNzVRolQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECIy3gID7eN+P7gj0VaDRaJ5Kkviir0ULWGxqKok/1o4WcDIjESBAoNwCP9y4Hesb98uNMKDpK5XKe8vLJ88PqLyyBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECJRIQcC/RZRuVQKPx1WKSTF8lsbPA4rHDMTtb3XmhFQQIECAwMQL/t/ldPHqUT0y/k9Ronsfb9XrtwiT1rFcCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIHxFBBwH8970RWBgQlkWbM1sOIFKrx//x/i5Zf2FWgioxAgQKDcAvfub8Z3/1grN8IApxdwHyCu0gQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBkgkIuJfswo1LIMuaqxFxnMTzBWZmpqP2xquYCBAgQKAgAj/cuB3rG/cLMs34jSHgPn53oiMCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwKQKCLhP6s3pm0CPAlnWvBARb/W4vVTbFo8djtnZaqlmNiwBAgSKKvB/m9/Fo0d5Uccb+VxpWvPnipHfggYIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAsUQEEQpxj2agkDHAlnWPBMRH3e8ocQLF+b3xitHDpRYwOgECBAohsC9+5vx3T/WijHMmE4h4D6mF6MtAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMAECgi4T+ClaZnAbgSyrPlRRPxlNzXKsndqKok/1o6WZVxzEiBAoLACP9y4Hesb9ws73zgMJuA+DregBwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAMQQE3Itxj6Yg0LFAo9E8lSTxRccbSr7w6GuHYm7vbMkVjE+AAIHJFcjzPJrffB+PHuWTO8SYd95qRbayUlsZ8za1R4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMCECAu4TclHaJNAvgUbjq8Ukmb7ar3pFr7MwvzdeOXKg6GOajwABAoUVaL/c3n7B3W+gAl+mae3UQE9QnAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoDQCAu6luWqDEvhFIMuaLR6dC/xp6WgkSdL5BisJECBAYGwEvvt+Le7d2xybfkbXSOuziEo7hH58AD0IuA8AVUkCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQFkFBNzLevPmLrVAljUvRMRbpUboYvj2C+7tl9z9CBAgQGCyBB4+3I7mN99PVtOD6/aT/y398QCO+CRNa2cGUFdJAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBEgoIuJfw0o1MIMsun4uovE+iM4FqdU+8vniks8VWESBAgMDYCKzd2oi1W+tj088oG6lUWh88evToQpJMXx1AHwLuA0BVkgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQVgEB97LevLlLLZBlzfYrq4N4wbWwrq+fOBLVF/YUdj6DESBAoIgC7dfb26+4+0Xkebxdr9cuDOLf4tIOzy8vL53jTIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAfAgLu/VBUg8CECTQazVNJEl9MWNsjbXdhfm+8cuTASHtwOAECBAh0LrC5uRWr1292vqHgK/N8el+9fmL90qXLp1utyqf9HPc/4fl+1lSLAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgvAIC7uW9e5OXWKDR+GoxSaavlpig69GnppKovfFqJEnS9V4bCBAgQGD4Aj/cuB3rG/eHf/B4nriRprWFdmuNxtWFJNm+288287xVr9eXLvazploECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLlFRBwL+/dm7zkAlnWbJWcoOvx2y+4t19y9yNAgACB8RZ4+HA7mt98P95NDre7L9O0duo/R2ZZ83xEvNOvFtK05s8U/cJUhwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIIRRfAQESiqQZc0LEfFWScfvaexqdU+8vnikp702ESBAgMDwBNZubcTarfXhHTj2J7U+S9Ol0/9p89Kly6dbrcqnfWr7v6/D96meMgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAiUXEHAv+Qdg/PIKZNnlcxGV98sr0Nvki8cOx+xstbfNdhEgQIDAUATar7e3X3H3+6/AJ2laO/Of/1ejcXUhSbbv9snnN6/D96mmMgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAiUWEHAv8eUbvdwCWdb8KCL+Um6F7qdfmN8brxw50P1GOwgQIEBgKALrG/fjhxu3h3LWpByS5/F2vV5r/5tb/vvLsub5iHinDzN8nqa1d/tQRwkCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECjwUE3H0IBEoq0Gg0TyVJfFHS8Xc1du2NV2NmZnpXNWwmQIAAgcEIXLt+M37a3BpM8QmtmufbJ+r1N1d/3f6lS5dPt1qVT/sw0m9eh+9DPSUIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRKLiDgXvIPwPjlFWg0ri4kyfbd8gr0Pvmhgwtx6OB87wXsJECAAIGBCGxubsXq9ZsDqT3BRTfStLbw+/779d8DKpXWB8vLS+cm2EfrBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECYyYg4D5mF6IdAsMUyLJm+zXX48M8swhnTU0l0X7FPUmSIoxjBgIECBRG4Icbt2N9435h5unTIF+mae3U02plWfNCRLy1m3PyPN6u12vtOn4ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE+iIg4N4XRkUITKZAljXPR8Q7k9n9aLt+5ciBWJjfO9omnE6AAAEC/xV4+HA7mt98T+QJgcpf0/TkR0+DybJm+///L7tBy/PpffX6ifXd1LCXAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwK8FBNx9DwRKLJBlzTMR8XGJCXoefWZm+vEr7n4ECBAgMB4CXm9/+j1UKq0PlpeXzj3trzYaXy0myfTV3dxgmtb8eWI3gPYSIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAg8ISCQ4qMgUGKBRqN5KkniixIT7Gp0r7jvis9mAgQI9E0gz/PHr7c/epT3rWZRCuV5q16vL1181jxZ1lyNiOM9zvtlmtZO9bjXNgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJPFRBw92EQKLFAo3F1IUm275aYYFeje8V9V3w2EyBAoG8Ca7c2Yu3Wet/qFanQTi+sZ9nlcxGV93uc+fM0rb3b417bCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECDxVQMDdh0Gg5AJZ1mwnAudLztDz+EdfOxRze2d73m8jAQIECOxOwOvtz/ZrtSJbWamtPE/40qUr77Zarb/1eAufpGntTI97bSNAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDwVAEBdx8GgZILZFnzQkS8VXKGnsd/cbYax48d7nm/jQQIECCwOwGvtz/Pr/VZmi6dft6K3fzbXCqVynvLyyfP7+4G7SZAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDwWwEBd18EgZILZFmz/fLqxyVn2NX4i8cOx+xsdVc1bCZAgACB7gW83v58s0ql9cHy8tK5nWQvXmxerFQi3Wnd7/96nrfq9frSxW73WU+AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgeQIC7r4PAiUXaDSap5Ikvig5w67G94r7rvhsJkCAQM8CXm9/Pl2nAfQsu3I2ovVhtxeRpjV/lugWzXoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEdBYRSdiSygECxBRqNqwtJsn232FMOfjqvuA/e2AkECBD4tYDX23f+HjoNoF+6dOXdVqv1t50r/mbFl2laO9XlHssJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI7Cgg4L4jkQUEii+QZc3ViDhe/EkHN2G1uideXzwyuANUJkCAAIHfCHi9fccPouMAem//sFvrszRdOr1jFxYQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQ6FJAwL1LMMsJFFEgy5rnI+KdIs42zJleOXIgFub3DvNIZxEgQKCUAl5v7+jaP0nT2pmOVkZED/+w25/TtHa20/rWESBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEOhUQMC9UynrCBRYIMua7QDcxwUecSijzcxMR+2NV4dylkMIECBQZoEf/3k37tz5V5kJdpy9Uqm8t7x8sv0PsHX0y7LL5yIq73e0OCLyPN6u12sXOl1vHQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFOBQTcO5WyjkCBBRqN5qkkiS8KPOLQRvOK+9CoHUSAQEkFHj7cjuY335d0+s7HzvPpffX6ifVOd2RZ86OI+Eun69O05s8RnWJZR4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0JWAYEpXXBYTKK5AljVbxZ1ueJNNTSWPX3FPkmR4hzqJAAECJRL44cbtWN+4X6KJux+11YpsZaW20s3OLv9ht2tpWlvspr61BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBDoVEHDvVMo6AgUXuHixebFSibTgYw5lvEMHF+LQwfmhnOUQAgQIlElgc3MrVq/fLNPIPc7a+ixNl053u7nzf9itt/rd9mM9AQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAOQUE3Mt576Ym8IRAll05G9H6EM3uBdqvuL++eCRmZqZ3X0wFAgQIEPivwLXrN+OnzS0iOwhUKq0PlpeXznUL1cU/7PbnNK2d7ba+9QQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQ6ERBw70TJGgIlELh06fLpVqvyaQlGHcqIC/N745UjB4ZylkMIECBQBoF79zfju3+slWHUXc+Y59sn6vU3V7stlGWXz0VU3t9pX57H2/V67cJO6/x1AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAr0ICLj3omYPgQIKNBpfLSbJ9NUCjjaykRaPHY7Z2erIzncwAQIEiiKQ53l8c/VGPHy4XZSRBjnHtTStLfZyQJY1z0TExzvtTdOaP0PshOSvEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI9CwgnNIznY0ExZjBGQAAIABJREFUiieQZc31iJgv3mSjmaha3ROvLx4ZzeFOJUCAQIEE1m5txNqt9t+i/HYWaH2Wpkund1735IpGo3kqSeKL5+1ttSJbWamt9FLfHgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKdCAi4d6JkDYGSCGRZ80JEvFWScYcy5itHDsTC/N6hnOUQAgQIFFGg/Wr7t6s34tGjvIjj9X2mSqX1wfLy0rleCnf2b3Op/DVNT37US317CBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECHQiIODeiZI1BEoikGXNMxHxcUnGHcqYU1NJ1N54NZIkGcp5DiFAgEDRBL77fi3u3dss2lgDmyfPp/fV6yd6fu4+y5qt5zVXqVTeW14+eX5gAyhMgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQegEB99J/AgAI/CJw6dKVd1ut1t+Y9Feg/YJ7+yV3PwIECBDoTmBzcytWr9/sblOJV7daka2s1FZ2Q7DTv80lz7dP1Otvru7mDHsJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIPE9AwN33QYDAfwUaja8Wk2T6KpL+CyweOxyzs9X+F1aRAAECBRXI8zy+uXojHj7cLuiEgxir8tc0PfnRbipnWbP9Ovs7z6hxLU1ri7upby8BAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBnQQE3HcS8tcJlEwgy5qtko08lHGr1T3x+uKRoZzlEAIECBRBYO3WRqzdWi/CKEOboVKpvLe8fLIdUO/5l2XNMxHx8dMLtD5L06XTPRe3kQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEAHAgLuHSBZQqBMAlnWvBARb5Vp5mHNeujgQhw6OD+s45xDgACBiRXY+vlBfHv1xsT2P6rG07S26/9un2XN9gvwf3naDJVK64Pl5aVzo5rPuQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAuUQ2HUIphxMpiRQHoEsu3I2ovVheSYe7qS1N16NmZnp4R7qNAIECEyYwLerN2Jr68GEdT3ydj9P09q7u+2i0WieSpL44ml18nz7RL3+5upuz7CfAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwPMEBNx9HwQI/EbgeS+3otq9wIuz1Th+7PDuC6lAgACBggqs3dqItVvrBZ1uoGP9OU1rZ3d7QqNxeSVJKo2n1LmWprXF3da3nwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBOAgLuOwn56wRKJvC8l1tLRjGwcV8+vD/275sbWH2FCRAgMKkCWz8/iG+v3pjU9kfadz9fV8+yZuvJYVqfpenS6ZEO6XACBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFSCAi4l+KaDUmgO4GnB9u6q2H1swWmppJ4ffFIzMxMYyJAgACBXwl8u3ojtrYeMOleoK+vqz/tvwdUKq0PlpeXznXfmh0ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEuhMQcO/Oy2oCpRDIsuZqRBwvxbAjGvLF2WocP3Z4RKc7lgABAuMnsHZrI9ZurY9fYxPRUeWvaXryo361mmXNCxHx1q/r5fn0vnr9hAvqF7I6BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECzxQQcPdxECDwhECWNc9HxDtoBitw6OBCHDo4P9hDVCdAgMAECGz9/CC+vXpjAjodzxbzPN6u12vtUHpffr8PuLdaka2s1Fb6UlwRAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAjsICLj7RAgQeEIgy5pnIuJjNIMXeP3Ekai+sGfwBzmBAAECYyzw7eqN2Np6MMYdjnVrG2laW+hnh0++4N7fF+L72ataBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECxRMQcC/enZqIwK4FLl268m6r1frbrgspsKNAtbonFo8djiRJdlxrAQECBIoo8OM/78adO/8q4mhDmqn1WZoune7nYb//B936/UJ8P3tViwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoHgCAu7Fu1MTEdi1QKPx1WKSTF/ddSEFOhLYv/8P8fJL+zpaaxEBAgSKJLC5uRWr128WaaShz1KpVN5bXj55vp8H/y7g3vcX4vvZq1oECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQLFExBwL96dmohAXwSyrLkeEfN9KabIjgJHXzsUc3tnd1xnAQECBIoikOd5NL/5Ph49yosy0ijmGEj4/HcB98/TtPbuKIZzJgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQDkFBNzLee+mJrCjQJY1L0TEWzsutKAvAlNTSby+eCRmZqb7Uk8RAgQIjLvAtes346fNrXFvc8z7a32Wpkun+93kpUuXT7dalU/bdSuV1gfLy0vn+n2GegQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSeJSDg7tsgQOCpAll25WxE60M8wxOoVvc8Drn7ESBAoOgCa7c2Yu1W+18U4rcbgUql8t7y8snzu6nxtL2NRvNUksQX7b+W59P76vUTLqvfyOoRIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAg8U0DA3cdBgMBTBX79eiui4Qns3/+HePmlfcM70EkECBAYssDm5lasXr855FMLedxGmtYWBjHZfwLurVZkKyu1lUGcoSYBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBZwkIuPs2CBB4qkCjcXklSSoNPMMXOPraoZjbOzv8g51IgACBAQvkeR7Nb76PR4/yAZ9UhvKtz9J06fQgJv3VC+5/TtPa2UGcoSYBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBZwkIuPs2CBB4pkCWNVt4hi8wNZXE64tHYmZmeviHO5EAAQIDFLh2/Wb8tLk1wBPKU7pSqby3vHzy/CAm/k/APc+3T9Trb64O4gw1CRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECDxLQMDdt0GAwDMFsqx5ISLeQjR8gWp1TyweOxxJkgz/cCcSIEBgAAI//vNu3LnzrwFULmXJjTStLQxq8nbAvVKJsysrtZVBnaEuAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgWcJCLj7NggQeKZAll05G9H6ENFoBBbm98YrRw6M5nCnEiBAoI8C6xv344cbt/tYseylWp+l6dLpQSn87wvup9K0dmZQZ6hLgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4FkCAu6+DQIEnilw6dLl061W5VNEoxN4+fD+2L9vbnQNOJkAAQK7FNj6+UFcu34zHj3Kd1nJ9v8IVCqV95aXT54flEijcfnxy+31+tLFQZ2hLgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFnCQi4+zYIEHimQDvgliSVBqLRCiweOxyzs9XRNuF0AgQI9CCQ53l8c/VGPHy43cNuW54hcC1Na4t0CBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBRVQMC9qDdrLgJ9Esiy5npEzPepnDI9CExNJXH82OGovrCnh922ECBAYHQC367eiK2tB6NroJAnV/6apic/KuRohiJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAQEQLuPgMCEypw6dLl048excV6feniIEfIsuaFiHhrkGeovbNAtbon2i+5J0my82IrCBAgMAYCP9y4Hesb98egk2K1kOet+qD/3l8sMdMQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAhMmoCA+6TdmH4J/K9Ao3F5JUkqF/J8e6Vef3N1UDBZ1jwTER8Pqr66nQu0Q+6vLx7pfIOVBAgQGJHAnbv34sebd0Z0enGPbbUiW1mprRR3QpMRIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQ8IK7b4DARAtkWXO11Yr1Vmv6VL1+Yn0QwzQazVNJEl8Moraa3QsszO+NV44c6H6jHQQIEBiSQPvV9vbr7X4DEfhzmtbODqSyogQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTGRMAL7mNyEdog0ItAll05G9H6sP2i66BC7o3G1YUk2b7bS3/2DEbg0MGFOHRwfjDFVSVAgMAuBLZ+fhDXrt+MR4/yXVSx9VkCeT69b1D/QBt1AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAuMiIOA+LjehDwI9CFy6dOXdVqv1t/bWQYbcL15sXqxUIu2hRVsGJNB+xb39mrsfAQIExkVAuH3QN9H6LE2XTg/6FPUJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIjFpAwH3UN+B8ArsUyLLmekQ8fs57UCH3LLt8LqLy/i5btb3PAkdfOxRze2f7XFU5AgQIdC+Q53l8c/VGPHy43f1mOzoSqFQq7y0vnzzf0WKLCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECEywgID7BF+e1gm0BZ4SPt/I89apen3pYr+ELl26fLrVqnzar3rq9EdgaiqJ48cOR/WFPf0pqAoBAgR6EGiH21ev34ytrQc97LalQ4FraVpb7HCtZQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQmWkDAfaKvT/MEIp4RPu9ryL3R+GoxSaav8h4/ASH38bsTHREok4Bw+9Bu+5M0rZ0Z2mkOIkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDBCAQH3EeI7mkA/BBqNqwtJsn33KbU2KpXWR8vLS+f6cU6WNVcj4ng/aqnRXwEh9/56qkaAQOcC332/FvfubXa+wcqeBPJ8+0S9/mb778N+BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAovIOBe+Cs2YBkEsqx5PiLeecasfXn1Ncsun4uovF8Gz0mccWZmOt44cSSSJJnE9vVMgMAECvxw43asb9yfwM4nreXWZ2m6dHrSutYvAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgV4FBNx7lbOPwBgJXLp0+XSrVfn0OS19nufTp+v1E+u9tt3BGb2Wtq9PAtXqnlg8dljIvU+eyhAg8GwB4fbhfR15Hm/X67ULwzvRSQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRGKyDgPlp/pxPoi0CjcXUhSbbvPq9YqxVZq9U6Xa8vXezl0E7O6KWuPf0VEHLvr6dqBAg8KSDcPtSv4lqa1haHeqLDCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECIxYQMB9xBfgeAL9Esiy5vmIeGeHehuVSuuj5eWlc72ce/Fi82KlEmkve+0ZnoCQ+/CsnUSgbALC7cO98Uql9UGvf88ebqdOI0CAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINA/AQH3/lmqRGCkApcuXXm31Wr9rcMmPs/z6dP1+on1Dtc/XpZlzTMR8XE3e6wdjYCQ+2jcnUqgyALC7UO/3Y08n17s9u/VQ+/SgQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgT6LCDg3mdQ5QiMUiDLmu3A+nyHPVzL8zhdr9cudLg+Go3LK0lSaXS63rrRCgi5j9bf6QSKJCDcPorbrPw1TU9+NIqTnUmAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEBglAIC7qPUdzaBPgtk2eVzEZX3uytb+WueT53p9IXYLGuuRsTx7s6welQCQu6jkncugeIICLeP5i7zfPtEvf5m+++5fgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRKJSDgXqrrNmzRBRqN5qkkiS96mPNapVL5aHn55Pmd9mbZlbMRrQ93Wuevj49AO+T+ypEDUX1hz/g0pRMCBCZCQLh9ZNf0eZrW3h3Z6Q4mQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgMEIBAfcR4juawCAEdvnC+pd5vn36eS/GNhqXV5Kk0hhE72oOTmBqKonjxw4LuQ+OWGUChRLI8zy+v3E77t3bLNRckzJMnsfb9XrtwqT0q08CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEC/RQQcO+nploExkAgy5pnIuLjXbbySZ5Pn63XT6w/rc4uQ/S7bM32XgWE3HuVs49AuQTa4fbV6zdja+tBuQYfn2m/TNPaqfFpRycECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEhisg4D5cb6cRGLhAo/HVYpJMX+3DQRsRcTZNa+3A/G9+Wdb8KCL+0oczlBiyQDvkfvTVQzE7Wx3yyY4jQGASBITbR39LlUrrg+XlpXOj70QHBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBEYjIOA+GnenEhioQJY1z0fEO3065Fql0jrz67Bdo3F1IUm2VyNivk9nKDNkgVeOHIiF+b1DPtVxBAiMs8DWzw/iu3+sxcOH2+PcZtF7u5amtcWiD2k+AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAs8TEHD3fRAooMClS5dPt1qVT/s82rX2i+55Pn2uXj+xnmXN9svuH/f5DOWGKPDy4f2xf9/cEE90FAEC4yrQDrdfu34zHj3Kx7XFUvTl9fZSXLMhCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEdhAQcPeJECioQJY11wf0wvrGv4PurfNJUmm/FH+8oISlGKv9inv7NXc/AgTKK7C+cT9u/vOucPvoP4GNNK0tjL4NHRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYrYCA+2j9nU5gYAJZduVsROvDgR0QEa1WZJVKpIM8Q+3BC7w4W42jrx2KJEkGf5gTCBAYK4E7d+/FjzfvjFVPJW7mkzSttf/tKH4ECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIESi0g4F7q6zd8kQUaja8Wk2T6apFnNFv/BKrVPXH01UMxMzPdv6IqESAw1gI/3Lgd7dfb/cZCYCPPpxfr9RPtf/uKHwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIFSCwi4l/r6DV90gSxrno+Id4o+p/n6IzA1lcTxY4ej+sKe/hRUhQCBsRTI8zxWr9+Mra0HY9lfSZvyentJL97YBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECTwoIuPsqCBRY4NKlK++2Wq2/FXhEow1A4JUjB2Jhfu8AKitJgMCoBbZ+fhDf/WMtHj7cHnUrzv9FwOvtvgYCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECvxIQcPc5ECi4QJY1VyPieMHHNF6fBdoB93bQ3Y8AgeIIrG/cj5v/vBuPHuXFGaoYk3i9vRj3aAoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIE+CQi49wlSGQLjKpBlzY8i4i/j2p++xlegWt0Ti8cOR5Ik49ukzggQ6Ejgx3/ejTt3/tXRWouGKuD19qFyO4wAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQGASBATcJ+GW9EhgFwKNxtWFJNluv+I+v4sytpZUYGoqiaOvHorZ2WpJBYxNYLIF8jyP7/6xFj9tbk32IMXt3uvtxb1bkxEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECPQoIODeI5xtBCZJIMuunI1ofThJPet1vARePrw/9u+bG6+mdEOAwHMFNje34rvv1+LRo5zUeAp4vX0870VXBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECIxYQcB/xBTiewDAEGo2vFpNk+uowznJGcQXm5mbj1SMHIkmS4g5pMgIFEVi7tRFrt9YLMk1hx/B6e2Gv1mAECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQK7ERBw342evQQmSCDLLp+LqLw/QS1rdQwFZmamH4fcZ2erY9idlggQyPM8vvvHWvy0uQVjvAW83j7e96M7AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBEQoIuI8Q39EEhinQaFxeSZJKY5hnOqu4AocOLsShg/PFHdBkBCZQYHNzK777fi0ePconsPvStez19tJduYEJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQ6FRBw71TKOgIFEMiy5oWIeKsAoxhhDARenK3GK0cORPtVdz8CBEYr8OM/78adO/8abRNO71TgWp5Pr9TrJ9Y73WAdAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgTIJCLiX6bbNWnqBRqN5Kknii9JDAOibwNRUEodf2hcL83v7VlMhAgQ6F9j6+UH8cON2bG096HyTlSMVqFRaHywvL50baRMOJ0CAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDDGAgLuY3w5WiMwCAGvuA9CVc25udl49ciBSJIEBgECQxJYu7URa7c8Aj4k7n4dcy1Na4v9KqYOAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgSIKCLgX8VbNROA5Al5x93kMSqD9mvsrRw7E3N7ZQR2hLgECEeHV9sn9DPI83q7XaxcmdwKdEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEBi8gID74I2dQGDsBLziPnZXUqiGvOZeqOs0zJgJeLV9zC6ku3a+TNPaqe62WE2AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgfAIC7uW7cxMTiEuXLp9utSqfoiAwKIH2a+6HX9oXC/N7B3WEugRKJeDV9sm/bq+3T/4dmoAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQGA4AgLuw3F2CoGxE7h4sXmxUol07BrTUKEEXpytxitHDsTMzHSh5jIMgWEJ5Hket+/ci7Vb68M60jkDEWh9lqZLpwdSWlECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBRMQcC/YhRqHQKcCjUbzVJLEF52ut47AbgQOHVyIQwfnd1PCXgKlE7h3fzN+vHk3Hj7cLt3sBRt4I8+3V+r1N1cLNpdxCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECAxEQMB9IKyKEpgMgSxrXoiItyajW11OukD7FfdXjxyI2dnqpI+ifwIDFWgH2n/85924d29zoOcoPjSBT9K0dmZopzmIAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwIQLCLhP+AVqn8BuBLzivhs9e3sVmJubjZdf2hftwLsfAQK/COR5Hrfv3Is7d/8Vjx7laIohcC3Pp1fq9RPrxRjHFAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQGLyDgPnhjJxAYawGvuI/19RS6uUMHF+LA/rlIkqTQcxqOQCcC6xv3Y+3WRrRfb/crjkClUnlvefnk+eJMZBICBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECgxcQcB+8sRMIjLWAV9zH+noK39zUVBKHX9oXC/N7Cz+rAQk8TWBzc+txsP2nzS1AxRP4Mk1rp4o3lokIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIDFZAwH2wvqoTmAiBLGu2X5d9ZyKa1WQhBarVPfHyS/tidrZayPkMReD3Au2X2tvB9vbL7X7FFMjz7RP1+purxZzOVAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQGJyDgPjhblQlMjECj8dVikkxfnZiGNVpYgRdnq3Ho4Lyge2Fv2GB5nsc/b23EnTv/glFsgU/StHam2COajgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBgBATcB+OqKoGJE8iyy+ciKu9PXOMaLqTAwvzex0H3mZnpQs5nqPIJtIPtt+/cizt3/xWPHuXlAyjXxNfyfHqlXj+xXq6xTUuAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgPwKef+6UAAAgAElEQVQC7v1xVIXAxAs0GlcXkmR7NSLmJ34YAxRGQNC9MFdZ2kEE28t39ZVK5b3l5ZPnyze5iQkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj0R0DAvT+OqhAohECWNc9ExMeFGMYQhRIQdC/UdZZiGMH2Ulzz04b8Mk1rp0o7vcEJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI9EFAwL0PiEoQKJJAljXbr7gfL9JMZimOQDvovn//XFRf2FOcoUxSKAHB9kJdZ7fDbOT59kq9/mb776N+BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj0KCDg3iOcbQSKKnDp0pV3W63W34o6n7mKIfDibDUOHZyP2dlqMQYyxcQLPHy4HWu3NuLe/c149Cif+HkM0JPAJ2laa/+bUPwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIENiFgID7LvBsJVBUgSxrXoiIt4o6n7mKI1Ct7on9++ai/bK7H4FRCGxubsX6xk+xvnF/FMc7c0wEWq3IVlZqK2PSjjYIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQITLSAgPtEX5/mCQxGoNG4vJIklcZgqqtKoP8CMzPTj0PuB/bPRZIk/T9ARQK/E2gH2jc2foqfNrfYEIg8b9Xr9aWLKAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQ2L2AgPvuDVUgUEiBLLtyNqL1YSGHM1ShBdpB9/3756L6wp5Cz2m44Qs8fLj939fa2/+7H4H/FfgkTWtnaBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0B8BAff+OKpCoHACjcbVhSTZXo2I+cINZ6BSCFSre2L/vrn4w9ysV91LceODG/Le/c3HwfZ79zYHd4jKEynQakW2slJbmcjmNU2AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEBgTAUE3Mf0YrRFYBwELl268m6r1frbOPSiBwK9CkxNJTG3d9ar7r0ClnSf19pLevFdjp3n8Xa9XrvQ5TbLCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBB4joCAu8+DAIHnCmRZsx3cewsTgSIIzMxMx4H9f4i5vf8n2v+7H4FfC+R5Hv+6txkbGz/FT5tbcAjsIFD5a5qe/AgTAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQL9FRBw76+nagQKJ9BofLWYJNNXCzeYgUov8OJsNebnX4w/zM1GkiSl9ygzwL37m3Hv3v+L9n8+epSXmcLsHQq0WpGtrNRWOlxuGQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECXQgIuHeBZSmBsgpkWfNMRHxc1vnNXXyBubnZx6+6C7sX/67/M6FQe3nuehCT5nmrXq8vXRxEbTUJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIlF1AwL3sX4D5CXQocPFi82KlEmmHyy0jMLEC7bB7+3X3duB9ZmZ6YufQ+JMCQu2+ij4JfJKmtfY/+OVHgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMAABATcB4CqJIEiCjQal1eSpNIo4mxmIvAsgWp1T8ztnY25uf8T1Rf2gJowgYcPt+Onza24d///xb17mxPWvXbHUaDVimxlpbYyjr3piQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBRBATci3KT5iAwBIEsu3I2ovXhEI5yBIGxE5iaSh6H3WdnX4g/zM1GkiRj16OGItqvtP+0+XNsbm7F1tYDJAT6KbCR59sr9fqbq/0sqhYBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAr8VEHD3RRAg0LFAo3F1IUm2L0bE8Y43WUigoALt191nZ6vx4uwL8eJsVeB9RPfcDrL/J9Defq3dj8AABf6cprWzA6yvNAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECESHg7jMgQKArgUajeSpJ4ouuNllMoAQC/wm8V1+YeRx4n5mZLsHUwx0xz/PHr7ILtA/X3WmPBT5P09q7LAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQGLyAgPvgjZ1AoHACWXblbETrw8INZiACfRSYmkoev/BefWHP41fe2wH4JEn6eELxS7VfZ9/6+eHjUPvWzw8e/6cfgREIbOT59GK9fmJ9BGc7kgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEDpBATcS3flBiawe4FG4+pCkmxfjIjju6+mAoHyCLRfdd8zM/3v4Ht15vEr7+0AfNl/Dx9uR/t/2i+zt/9TmL3sX8R4zZ/n8Xa9XrswXl3phgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBxBQTci3u3JiMwUIFG4/JKklQaAz1EcQIlEWi/7j6V/PvF95mZqcch+Hb4vf0/Rfq1X2R/lOextfX/2bu/pDiuLV/Aeye4z42+D2IGgghBhF+qyBGIOwKrR2DOCMwZgekRNB6B0Qgaj6DRCLKKF0WAIoRmAG/9B3LfKEl269g63kJU7co/HxEOh+2Ve6317Qw//Uj9z/sg+4dQ+38OaUW7DE/gX6fT3ePhrWUjAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAt0VEHDv7t2YjEDnBebzq0Xo78fOD2pAAj0W+PWr758G3v/vP//l/UZdCcG370Pr//1+pv9+H1y/fx9k/6+P/06Ivccv4LhHfzWd7h6Mm8D2BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBMoLCLiXN9eRwKAEZrOrWYxhOqilLEOghwIbG1X4P3/5p7+b/C8fvwy/jHUWX1//9OdDkP1uGUc7g0AXBW7bdnO7rnduujicmQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgMWUDAfci3azcCBQSa5vV2VW3OQghPCrTTggABAgQIrFygbcP/q+vd85U30oAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgT8ICLh7KQgQeLTAxcXlYUrx50cf5AACBAgQILB+gX+dTneP1z+GCQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAiMU0DAfZz3bmsCSxeYz6/OQgjfLf1gBxIgQIAAgXICr6bT3YNy7XQiQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOD3AgLu3gkCBJYi0DRvt6rqbhZCeLqUAx1CgAABAgTKCrxr2839ut65KdtWNwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEPhUQcPc+ECCwNIGmudyvqtgs7UAHESBAgACBMgK3bZsO6npv8YtafggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQWKOAgPsa8bUmMESB+fzqKITwb0PczU4ECBAgMEyBGNNfJ5O902FuZysCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAEC/RIQcO/XfZmWQC8E5vOrsxDCd70Y1pAECBAgMHKB+NN0+mzxy1l+CBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDogICAewcuwQgEhibQNG+3Yrw7jzFMh7abfQgQIEBgUAKvptPdg0FtZBkCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECPRcQcO/5BRqfQFcFmuZyv6rieQjhSVdnNBcBAgQIjFrgXdtu7tf1zs2oFSxPgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoGMCAu4duxDjEBiSwMXF5WFK8ech7WQXAgQIEBiEwG3bpoO63psNYhtLECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEBiQgID7gC7TKgS6KDCfvzkJIf3QxdnMRIAAAQLjFIgx/stk8uxsnNvbmgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEC3BQTcu30/piMwCIH5/Oo8hPB8EMtYggABAgT6LvC36XT3pO9LmJ8AAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAUAUE3Id6s/Yi0CGBpnm7VVV3sxDC0w6NZRQCBAgQGJ1Aejmd7h2Obm0LEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEOiRgIB7jy7LqAT6LNA0l/tVFRdfcn/S5z3MToAAAQK9FXg1ne4e9HZ6gxMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAYiYCA+0gu2poEuiBwcfHmRUrp37swixkIECBAYDwCKYV5SpsHdb1zM56tbUqAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgnwIC7v28N1MT6K3AfH51FEL4t94uYHACBAgQ6JvAbdtubgu39+3azEuAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDBWAQH3sd68vQmsUWA+vzwNIX6/xhG0JkCAAIFxCNy2bTqo673ZONa1JQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIH+Cwi49/8ObUCglwKz2dUsxjDt5fCGJkCAAIFeCLRtqoXbe3FVhiRAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDwm4CAu5eBAIG1CDTN260Y786F3NfCrykBAgQGLxBj+utksnc6+EUtSIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQGBgAgLuA7tQ6xDok0DTvN6uqs1ZCOFJn+Y2KwECBAh0W0C4vdv3YzoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECfyYg4O79IEBgrQJNc7lfVfFcyH2t16A5AQIEhiTwt+l092RIC9mFAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwJgEBNzHdNt2JdBRgYuLNy9SSv/e0fGMRYAAAQK9EUgvp9O9w96Ma1ACBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBP4gIODupSBAoBMCFxeXhynFnzsxjCEIECBAoIcCwu09vDQjEyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEPiDgIC7l4IAgc4ICLl35ioMQoAAgZ4JCLf37MKMS4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOAfCgi4ezkIEOiUwHx+eRpC/L5TQxmGAAECBDosINze4csxGgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEHCwi4P5jMAwQIrFpAyH3Vws4nQIDAUASE24dyk/YgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8KuAgLt3gQCBTgoIuXfyWgxFgACBzgikFOb7+7v7nRnIIAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQILEVAwH0pjA4hQGAVAkLuq1B1JgECBPovsAi3p7R5UNc7N/3fxgYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECHwqIODufSBAoNMCQu6dvh7DESBAoLiAcHtxcg0JECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIFBUQcC/KrRkBAg8VaJq3WzHenccYpg99Vj0BAgQIDE7gl7bdPPTl9sHdq4UIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI/CYg4O5lIECg8wJC7p2/IgMSIECggEB6OZ3uHRZopAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAmsUEHBfI77WBAh8uYCQ+5dbqSRAgMDwBITbh3enNiJAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDweQEBd28GAQK9ERBy781VGZQAAQJLFBBuXyKmowgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAh0XkDAvfNXZEACBH4vMJ9fnoYQvydDgAABAkMXEG4f+g3bjwABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMDvBQTcvRMECPRSQMi9l9dmaAIECDxAIP40nT47esADSgkQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQGICAgPsALtEKBMYqIOQ+1pu3NwECQxeIMf11Mtk7Hfqe9iNAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4I8CAu7eCgIEei0g5N7r6zM8AQIE/iAg3O6lIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIDBuAQH3cd+/7QkMQmA+f3MSQvphEMtYggABAuMVuI0xHk4mz87GS2BzAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQE3L0DBAgMQuDi4vIwpfjzIJaxBAECBMYncNu26aCu92bjW93GBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAh8KiDg7n0gQGAwAkLug7lKixAgMCKBlMI8pXQo3D6iS7cqAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgT8REHD3ehAgMCiBprk6qKpwFkJ4MqjFLEOAAIEBCnwIt28e1PXOzQDXsxIBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAl8hIOD+FWgeIUCg2wJNc7lfVfFcyL3b92Q6AgTGLpBetu03R8LtY38P7E+AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDg7wUE3L0RBAgMUqBp3m7FeHceY5gOckFLESBAoNcC8afp9NlRr1cwPAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECKxEQcF8Jq0MJEOiCwCLkXlV3ZyGE512YxwwECBAgEEKM6a+Tyd4pCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECHxOQMDde0GAwOAF5vPL0xDi94Nf1IIECBDotsBt26aDut6bdXtM0xEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgsE4BAfd16utNgEAxgYuLy8OU4s/FGmpEgAABAr8JpBTmKd29qOtvr7EQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgzwQE3L0fBAiMRqBprg6qKpyFEJ6MZmmLEiBAYO0C6WXbfnNU1zs3ax/FAAQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIdF5AwL3zV2RAAgSWKdA0l/sxxtMYw3SZ5zqLAAECBD4r8LfpdPeEDQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBL5UQMD9S6XUESAwGIGmebtVVXenIYTvBrOURQgQINAtgdu2DS/qeve8W2OZhgABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBrgsIuHf9hsxHgMDKBObzq+MQwo8ra+BgAgQIjFAgpTBP6e5FXX97PcL1rUyAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwCMFBNwfCehxAgT6LdA0VwdVFc5CCE/6vYnpCRAg0AWB9LJtvzmq652bLkxjBgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE+icg4N6/OzMxAQJLFmia19sxbp7FGKZLPtpxBAgQGIvAbYzpaDLZOx3LwvYkQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQGA1AgLuq3F1KgECPRSYz9+chJB+6OHoRiZAgMDaBFIK85TSYV3vzdY2hMYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECAxGQMB9MFdpEQIEliFwcfHmRUpp8QXiJ8s4zxkECBAYtkB62bbfHNX1zs2w97QdAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQKlBATcS0nrQ4BAbwSa5vV2jJtnMYZpb4Y2KAECBMoK3MaYjiaTvcUvBPkhQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDA0gQE3JdG6SACBIYmMJ9fHYcQfhzaXvYhQIDAYwRSCvOU0mFd780ec45nCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg8DkBAXfvBQECBP5EoGmuDqoqLL5Q/BQUAQIECMSfptNnRxwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCwKgEB91XJOpcAgcEINM3braq6W4TcvxvMUhYhQIDAwwRu2za8qOvd84c9ppoAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIPExBwf5iXagIERixwcfHmRUppEXR/MmIGqxMgMD6BX9p287Cud27Gt7qNCRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAoLSDgXlpcPwIEei3QNK+3q2pzEXJ/3utFDE+AAIG8wG2M8XAyeXaWL1VBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACB5QgIuC/H0SkECIxMYD6/OgohHPua+8gu3roExiPwqm3vDuv62+vxrGxTAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgS6ICDg3oVbMAMBAr0U8DX3Xl6boQkQ+HOB28Uv70ynuyegCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgsA4BAfd1qOtJgMCgBC4uLg9Tiosw6JNBLWYZAgTGJuCr7WO7cfsSIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQ6KCAgHsHL8VIBAj0T6Bp3m5V1d1pCOG7/k1vYgIERi5wG2M6mkz2Fv8P80OAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIG1Cgi4r5VfcwIEhibQNFcHVRUWIdGnQ9vNPgQIDFLgl7bdPKzrnZtBbmcpAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgR6JyDg3rsrMzABAl0X+Pg196MQwo9dn9V8BAiMVuBdjPFoMnl2NloBixMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0EkBAfdOXouhCBAYgkDTvN6uqs3F19yfD2EfOxAgMBSB+FPbbhz7avtQ7tMeBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBIYlIOA+rPu0DQECHRS4uHjzIqV0EkJ42sHxjESAwHgEXrVtOqrrvdl4VrYpAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJ9ExBw79uNmZcAgd4KzOdXxyGEoxDCk94uYXACBPoocBtjOppM9hZ/ooQfAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIdFpAwL3T12M4AgSGJtA0r7erauM4hPj90HazDwECXRSIP7XtxnFd79x0cTozESBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4PcCAu7eCQIECKxBoGku96sqnoQQnq+hvZYECAxf4FXbpqO63psNf1UbEiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAwJAEB9yHdpl0IEOidQNNcHcQYTmIM094Nb2ACBLoo8C7GeDSZPDvr4nBmIkCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQE5AwD0n5L8TIECggMDFxeVhSvE4hPC0QDstCBAYnsBtCOFkOt1d/H/EDwECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBHorIODe26szOAECQxQQdB/irdqJwKoF4k9tu3Fc1zs3q+7kfAIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECKxaQMB91cLOJ0CAwFcICLp/BZpHCIxP4Je2vTuq62+vx7e6jQkQIECAAH7B7osAACAASURBVAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQGKqAgPtQb9ZeBAgMQkDQfRDXaAkCyxZ41bbhuK53z5d9sPMIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCwbgEB93XfgP4ECBD4AgFB9y9AUkJg+AKC7cO/YxsSIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQGL2AgPvoXwEABAj0SWARdG/beBRjmPZpbrMSWKHAu49nP11hj3Uf/S7GdDyZ7J2uexD9CRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgsGoBAfdVCzufAAECKxBomquDqgrHIYTnKzjekQT6IPAqxnR6fx+vqyr8Rx8G/ooZBdu/As0jBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj0W0DAvd/3Z3oCBEYu0DSvt6tq4ziE+CKE8GTkHNYfhUB62bbxtK53zxfrzmZXswH+iQaC7aN4ly1JgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMDnBATcvRcECBAYgEDTvN2qqrujEMJhCOHpAFayAoFPBW5DCCdte3da199e//of5vOrxZ9i8OOAqN5/lX4y2Tsd0E5WIUCAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwIMEBNwfxKWYAAEC3Re4uHjzIqW0CLp/1/1pTUjgTwX+YeC7aS73qyo2A/F71bbh+Nev0g9kJ2sQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgqwQE3L+KzUMECBDovkDTvN6uqm+OQkgvfNW9+/dlwt8EbkNIZ217f/zp19p/7zObXc1iDNOeu/3StuFEsL3nt2h8AgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgSWKiDgvlROhxEgQKCbAr7q3s17MdXfCfzDr7X/3mk+f3MSQvqhv37pZS7A39/dTE6AAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIHHCQi4P87P0wQIEOiVQNO83aqqu8OUwuEAvn7dK3vDflbgXQjhtG3vTv/sa+2fPtk0VwdVFf6jh563IYSTtt08qeudmx7Ob2QCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgUERBwL8KsCQECBLon0DSX+1VVHYaQXoQQnnZvQhMNVOA2hHjatu1pXe/NHrLjx1/QuA4hPHnIc+usTSnMqyqdTCZ7p+ucQ28CBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj0RUDAvS83ZU4CBAisUEDYfYW4jl4I3IaQzmKsziaTZ2dfSzKfX52HEJ5/7fNln0sv2zae1vXuYmY/BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIPCFAgLuXwiljAABAmMREHYfy02vfM+lhNp/nXI+f3MSQvph5VM/rsG7EMJJ226e1vXOzeOO8jQBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTGKSDgPs57tzUBAgS+SODXsHtK6SDGMP2ihxSNWeBdCPGsbdvTut6bLQvi4uLyMKX487LOW8E5v8QYTx/zdfoVzORIAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI9FJAwL2X12ZoAgQIlBdomtfbVbX5IoRwEEL4rvwEOnZU4FUI4axt787q+tvrZc/44Zcs4nkI4cmyz37keb7W/khAjxMgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOBzAgLu3gsCBAgQ+CqBi4s3L1IKB77u/lV8fX7o/VfaYwzn9/cb53W9c7OqZZrm7VZV3S1C810Jt9+GkM7aNpws8wv1q/JzLgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBPooIODex1szMwECBDomsPi6+8bGxsEi8B5CXHzh/WnHRjTO1wu8CyGdfwi035+v4ivtnxttEW6P8W7Rd/r1oy/tyV9iTGeTyd7p0k50EAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAh8VkDA3YtBgAABAksX+DTwnlLc70hIeel7DvTAtQTaf285n1+dhxCer8s4pTCvqnRyf//N2Sq/Ur+u/fQlQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAVwUE3Lt6M+YiQIDAgAQWX+MO4W6/qhZfeH//134I4cmAVuzrKrchhFkI4TzGOLu/3zjvQph7Pr88DSF+Xxp1EWqPMZy27d1ZqS/Vl95RPwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECHRdQMC96zdkPgIECAxU4MNX3r/ZTyktwu5C76u/549h9jiLsZ3d34dZXe8twu2d+ikdbhdq79T1G4YAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJBwN1LQIAAAQKdEViE3kPY3P7wpfe0HULcDiE878yA/RnkVQjpOoR43bbhPIS76z58kbxguP2XGNPZ/f03Z134Yn1/XiuTEiBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAYPUCAu6rN9aBAAECBB4p8EnwffG1963FF99TClsxhukjj+7t4x+/PH4TQpyFkG76FGT/HPqKw+3vQkjnMVZnk8mzs95eusEJECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECAwAgEB9xFcshUJECAwZIGmebsVwt3+xkbcSiktAvCLn4OPf198Af5pD/d/F0K4/jj3+eLvMcbZ/X266cvX2B9ivqJw+6sQwlnbpvO63ps9ZB61BAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQILA+AQH39dnrTIAAAQIFBZrmcj+EuPj6e9jYSNspxUX4/eNP2g7h03/+8K+/9ivx//t19d8vmK5DiL8G10OM6fr+/td/TjdjDGIvK9z+wTyexxjO7+83zut656bg66UVAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECCxJQMB9SZCOIUCAAAECBB4m8Mhw+7sQ0sdA+/15XX/72y8OPGwK1QQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQJQEB9y7dhlkIECBAgMAIBJrm7VZV3Z2FEJ5/6bp//4X2/5kJtH+pnDoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAj0S0DAvV/3ZVoCBAgQINBrgUW4Pca7xZfXp3+yyG0I4TyEMGvbxd83Z3W9c9PrxQ1PgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAl8kIOD+RUyKCBAgQIAAgccKNM3lflXFRXD9ySdnLcLss0WgPcY4u7/3dfbHOnueAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECfRYQcO/z7ZmdAAECBAj0RODi4s2LlNJhCOkmhHj94cvsd9d1/e11T1YwJgECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgUEBBwL4CsBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjkBQTc80YqCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCAgIB7AWQtCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQCAvIOCeN1JBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgUEBNwLIGtBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAnkBAfe8kQoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQKCAg4F4AWQsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyAsIuOeNVBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAAQEB9wLIWhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAXkDAPW+kggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQKCAi4F0DWggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTyAgLueSMVBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBAQMC9ALIWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJAXEHDPG6kgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQICAu4FkLUgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgbyAgHveSAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIFBAQcC+ArAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5AUE3PNGKggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECggICAewFkLQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgLyDgnjdSQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIFBATcCyBrQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJ5AQH3vJEKAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECggIOBeAFkLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMgLCLjnjVQQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAEBAfcCyFoQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQF5AwD1vpIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECggIuBdA1oIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE8gIC7nkjFQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQQEDAvQCyFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQFxBwzxupIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIECAgLuBZC1IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIG8gIB73kgFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBQQEHAvgKwFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECOQFBNzzRioIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoICAgHsBZC0IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIC8g4J43UkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBQQE3Asga0GAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECeQEB97yRCgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAoICDgXgBZCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDICwi4541UECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEABAQH3AshaECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBeQMA9b6SCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAoICLgXQNaCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBPICAu55IxUECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUEBAwL0AshYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkBcQcM8bqSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBAgIC7gWQtSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBvICAe95IBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgUEBBwL4CsBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjkBQTc80YqCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCAgIB7AWQtCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQCAvIOCeN1JBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgUEBNwLIGtBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAnkBAfe8kQoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQKCAg4F4AWQsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyAsIuOeNVBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAAQEB9wLIWhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAXkDAPW+kggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQKCAi4F0DWggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTyAgLueSMVBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBAQMC9ALIWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJAXEHDPG6kgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQICAu4FkLUgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgbyAgHveSAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIFBAQcC+ArAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5AUE3PNGKggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECggICAewFkLQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgLyDgnjdSQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIFBATcCyBrQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJ5AQH3vJEKAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECggIOBeAFkLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMgLCLjnjVQQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAEBAfcCyFoQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQF5AwD1vpIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECggIuBdA1oIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE8gIC7nkjFQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQQEDAvQCyFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQFxBwzxupIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIECAgLuBZC1IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIG8gIB73kgFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBQQEHAvgKwFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECOQFBNzzRioIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoICAgHsBZC0IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIC8g4J43UkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBQQE3Asga0GAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECeQEB97yRCgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAoICDgXgBZCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDICwi4541UECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEABAQH3AshaECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBeQMA9b6SCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAoICLgXQNaCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBPICAu55IxUECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUEBAwL0AshYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkBcQcM8bqSBAgAABJYRRRQAAIABJREFUAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBAgIC7gWQtSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBvICAe95IBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgUEBBwL4CsBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjkBQTc80YqCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCAgIB7AWQtCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQCAvIOCeN1JBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgUEBNwLIGtBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAnkBAfe8kQoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQKCAg4F4AWQsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyAsIuOeNVBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAAQEB9wLIWhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAXkDAPW+kggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQKCAi4F0DWggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTyAgLueSMVBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBAQMC9ALIWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJAXEHDPG6kgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQICAu4FkLUgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgbyAgHveSAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIFBAQcC+ArAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5AUE3PNGKggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECggICAewFkLQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgLyDgnjdSQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIFBATcCyBrQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJ5AQH3vJEKAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECggIOBeAFkLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMgLCLjnjVQQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAEBAfcCyFoQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQF5AwD1vpIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECggIuBdA1oIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE8gIC7nkjFQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQQEDAvQCyFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQFxBwzxupIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIECAgLuBZC1IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIG8gIB73kgFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBQQEHAvgKwFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECOQFBNzzRioIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoICAgHsBZC0IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIC8g4J43UkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBQQE3Asga0GAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECeQEB97yRCgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAoICDgXgBZCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDICwi4541UECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEABAQH3AshaECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBeQMA9b6SCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAoICLgXQNaCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBPICAu55IxUECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUEBAwL0AshYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkBcQcM8bqSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBAgIC7gWQtSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBvICAe95IBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgUEBBwL4CsBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAjkBQTc80YqCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKCAgIB7AWQtCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQCAvIOCeN1JBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgUEBNwLIGtBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAnkBAfe8kQoCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQKCAg4F4AWQsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQyAsIuOeNVBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAAQEB9wLIWhAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBAXkDAPW+kggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQKCAi4F0DWggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgTyAgLueSMVBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIFBAQMC9ALIWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIJAXEHDPG6kgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgQICAu4FkLUgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgbyAgHveSAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIFBAQcC+ArAUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI5AUE3PNGKggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECggICAewFkLQgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEAgLyDgnjdSQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIFBATcCyBrQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQJ5AQH3vJEKAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECggIOBeAFkLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEMgLCLjnjVQQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAEBAfcCyFoQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQF5AwD1vpIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECggIuBdA1oIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIE8gIC7nkjFQQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBQQEDAvQCyFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECCQFxBwzxupIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIECAgLuBZC1IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIG8gIB73kgFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBQQEHAvgKwFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECOQFBNzzRioIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoICAgHsBZC0IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAIC8g4J43UkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBQQE3Asga0GAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECeQEB97yRCgIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAoICDgXgBZCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBDICwi4541UECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEABAQH3AshaECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEBeQMA9b6SCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAoICLgXQNaCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBPICAu55IxUECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgUEBAwL0AshYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgkBcQcM8bqSBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBAgIC7v+/XTs2AQAAQBj2/9ee0M0puyBk7gHZBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAi0gMC9jSwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4CAgcD8guyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBFhC4t5EFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBwEBO4HZBcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0AIC9zayIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGDgMD9gOyCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBFpA4N5GFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBwEBC4H5BdECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEALCNzbyIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDgIC9wOyCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBBoAYF7G1kQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwEFA4H5AdkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECLSBwbyMLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEDgICNwPyC4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoAUE7m1kQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIHAYH7AdkFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECLSAwL2NLAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgICBwPyC7IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEWELi3kQUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIHAQE7gdkFwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQAgL3NrIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgYOAwP2A7IIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEWkDg3kYWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHAQELgfkF0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAsI3NvIggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQOAgL3A7ILAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEGgBgXsbWRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAQUDgfkB2QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQItIHBvIwsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOAgI3A/ILggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgBQTubWRBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgcBgfsB2QUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQItIDAvY0sCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOAgIHA/ILsgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgRYQuLeRBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgcBATuB2QXBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINACAvc2siBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBg4DA/YDsggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRaQODeRhYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgcBAQuB+QXRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBACwjc28iCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBA4CAvcDsgsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQaAGBextZECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBBQOB+QHZBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAi0gcG8jCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA4CAjcD8guCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAFBO5tZEGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBwGB+wEfsq+BAAAgAElEQVTZBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAi0gMC9jSwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4CAgcD8guyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBFhC4t5EFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBwEBO4HZBcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0AIC9zayIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGDgMD9gOyCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBFpA4N5GFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBwEBC4H5BdECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEALCNzbyIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDgIC9wOyCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBBoAYF7G1kQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwEFA4H5AdkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECLSBwbyMLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEDgICNwPyC4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoAUE7m1kQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIHAYH7AdkFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECLSAwL2NLAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgICBwPyC7IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEWELi3kQUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIHAQE7gdkFwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQAgL3NrIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgYOAwP2A7IIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEWkDg3kYWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHAQELgfkF0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAsI3NvIggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQOAgL3A7ILAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEGgBgXsbWRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAQUDgfkB2QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQItIHBvIwsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOAgI3A/ILggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgBQTubWRBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgcBgfsB2QUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQItIDAvY0sCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOAgIHA/ILsgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgRYQuLeRBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgcBATuB2QXBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINACAvc2siBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBg4DA/YDsggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRaQODeRhYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgcBAQuB+QXRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBACwjc28iCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBA4CAvcDsgsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQaAGBextZECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBBQOB+QHZBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAi0gcG8jCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA4CAjcD8guCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAFBO5tZEGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBwGB+wHZBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAi0gMC9jSwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4CAgcD8guyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBFhC4t5EFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBwEBO4HZBcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0AIC9zayIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGDgMD9gOyCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBFpA4N5GFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBwEBC4H5BdECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEALCNzbyIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDgIC9wOyCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBBoAYF7G1kQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwEFA4H5AdkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECLSBwbyMLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEDgICNwPyC4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoAUE7m1kQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIHAYH7AdkFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECLSAwL2NLAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgICBwPyC7IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEWELi3kQUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIHAQE7gdkFwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQAgL3NrIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgYOAwP2A7IIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEWkDg3kYWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHAQELgfkF0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAsI3NvIggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQOAgL3A7ILAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEGgBgXsbWRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAQUDgfkB2QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQItIHBvIwsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOAgI3A/ILggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgBQTubWRBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgcBgfsB2QUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQItIDAvY0sCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOAgIHA/ILsgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgRYQuLeRBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgcBATuB2QXBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINACAvc2siBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBg4DA/YDsggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRaQODeRhYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgcBAQuB+QXRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBACwjc28iCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBA4CAvcDsgsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQaAGBextZECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBBQOB+QHZBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAi0gcG8jCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA4CAjcD8guCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAFBO5tZEGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBwGB+wHZBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAi0gMC9jSwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4CAgcD8guyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBFhC4t5EFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBwEBO4HZBcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0AIC9zayIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGDgMD9gOyCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBFpA4N5GFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBwEBC4H5BdECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEALCNzbyIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDgIC9wOyCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBBoAYF7G1kQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwEFA4H5AdkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECLSBwbyMLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEDgICNwPyC4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoAUE7m1kQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIHAYH7AdkFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECLSAwL2NLAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgICBwPyC7IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEWELi3kQUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIHAQE7gdkFwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQAgL3NrIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgYOAwP2A7IIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEWkDg3kYWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHAQELgfkF0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAsI3NvIggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQOAgL3A7ILAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEGgBgXsbWRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAQUDgfkB2QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQItIHBvIwsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOAgI3A/ILggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgBQTubWRBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgcBgfsB2QUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQItIDAvY0sCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOAgIHA/ILsgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgRYQuLeRBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgcBATuB2QXBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINACAvc2siBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBg4DA/YDsggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRaQODeRhYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgcBAQuB+QXRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBACwjc28iCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBA4CAvcDsgsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQaAGBextZECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBBQOB+QHZBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAi0gcG8jCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA4CAjcD8guCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAFBO5tZEGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBwGB+wHZBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAi0gMC9jSwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4CAgcD8guyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAnIbVEQAABCgSURBVAQIECBAgACBFhC4t5EFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBwEBO4HZBcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0AIC9zayIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGDgMD9gOyCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBFpA4N5GFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBwEBC4H5BdECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEALCNzbyIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDgIC9wOyCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBBoAYF7G1kQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwEFA4H5AdkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECLSBwbyMLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEDgICNwPyC4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoAUE7m1kQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIHAYH7AdkFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECLSAwL2NLAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgICBwPyC7IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEWELi3kQUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIHAQE7gdkFwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQAgL3NrIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgYOAwP2A7IIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEWkDg3kYWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHAQELgfkF0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAsI3NvIggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQOAgL3A7ILAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEGgBgXsbWRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAQUDgfkB2QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQItIHBvIwsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOAgI3A/ILggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgBQTubWRBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgcBgfsB2QUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQItIDAvY0sCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQOAgIHA/ILsgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgRYQuLeRBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgcBATuB2QXBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQINACAvc2siBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBg4DA/YDsggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgRaQODeRhYECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgcBAQuB+QXRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIBACwjc28iCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBA4CAvcDsgsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQaAGBextZECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgMBBQOB+QHZBgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAi0gcG8jCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBA4CAjcD8guCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQKAFBO5tZEGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBwGB+wHZBQECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAi0gMC9jSwIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBA4CAgcD8guyBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBFhC4t5EFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBwEBO4HZBcECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAg0AIC9zayIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGDgMD9gOyCAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBFpA4N5GFgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBwEBC4H5BdECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgEALCNzbyIIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEDgIC9wOyCwIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBBoAYF7G1kQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwEFA4H5AdkGAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECLSBwbyMLAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEDgICNwPyC4IECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAoAUE7m1kQYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIHAYH7AdkFAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECLSAwL2NLAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIEDgICBwPyC7IECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIEWELi3kQUBAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIHAQE7gdkFwQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECDQAgL3NrIgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgYOAwP2A7IIAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIEWkDg3kYWBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIHAQELgfkF0QIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQAsI3NvIggABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQOAgL3A7ILAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIEGgBgXsbWRAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAQUDgfkB2QYAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQItIHBvIwsCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQOAgI3A/ILggQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECgBQZEiDSvxlSsfwAAAABJRU5ErkJggg=="/>
+</defs>
+</svg>
diff --git a/public/images/news/topbar-primeblocks-device.png b/public/images/news/topbar-primeblocks-device.png
new file mode 100644
index 0000000000..ff589d7b2d
Binary files /dev/null and b/public/images/news/topbar-primeblocks-device.png differ
diff --git a/public/showcase/resources/demo/images/organization/jesse.jpg b/public/images/organization/jesse.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/organization/jesse.jpg
rename to public/images/organization/jesse.jpg
diff --git a/public/showcase/resources/demo/images/organization/mike.jpg b/public/images/organization/mike.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/organization/mike.jpg
rename to public/images/organization/mike.jpg
diff --git a/public/showcase/resources/demo/images/organization/saul.jpg b/public/images/organization/saul.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/organization/saul.jpg
rename to public/images/organization/saul.jpg
diff --git a/public/showcase/resources/demo/images/organization/walter.jpg b/public/images/organization/walter.jpg
similarity index 100%
rename from public/showcase/resources/demo/images/organization/walter.jpg
rename to public/images/organization/walter.jpg
diff --git a/public/images/primeblocks.png b/public/images/primeblocks.png
new file mode 100644
index 0000000000..a43a59b698
Binary files /dev/null and b/public/images/primeblocks.png differ
diff --git a/public/images/primeflex.png b/public/images/primeflex.png
new file mode 100644
index 0000000000..9e30df4f6e
Binary files /dev/null and b/public/images/primeflex.png differ
diff --git a/public/images/primereact-designer.jpg b/public/images/primereact-designer.jpg
new file mode 100644
index 0000000000..5a6faee2b6
Binary files /dev/null and b/public/images/primereact-designer.jpg differ
diff --git a/public/images/primereact-logo-dark.svg b/public/images/primereact-logo-dark.svg
new file mode 100644
index 0000000000..a26b24f0e2
--- /dev/null
+++ b/public/images/primereact-logo-dark.svg
@@ -0,0 +1,15 @@
+<svg width="162" height="41" viewBox="0 0 162 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9876 15.5318L33.2441 20.2402L35.9822 24.9394C36.9812 26.6537 36.9812 28.7006 35.9823 30.4148C34.9834 32.1292 33.1942 33.1526 31.1963 33.1526H25.72L23.1875 37.4987C22.1781 39.231 20.3701 40.2653 18.3512 40.2653C16.3322 40.2653 14.5242 39.231 13.5148 37.4987L10.9823 33.1526H5.4951C3.51173 33.1526 1.73552 32.1366 0.743811 30.4347C-0.247901 28.7327 -0.247901 26.7006 0.743811 24.9988L3.4874 20.2903L0.749194 15.5912C-0.249731 13.8769 -0.249731 11.83 0.749194 10.1157C1.74812 8.40136 3.53729 7.37791 5.53514 7.37791H11.0115L13.544 3.0319C14.5534 1.29964 16.3616 0.265259 18.3804 0.265259C20.3994 0.265259 22.2072 1.29954 23.2167 3.0319L25.7491 7.37791H31.2364C33.2198 7.37791 34.996 8.394 35.9877 10.0959C36.9794 11.7978 36.9794 13.8299 35.9876 15.5318ZM18.3804 1.46321C16.7985 1.46316 15.3819 2.27351 14.591 3.63086L12.4076 7.37791H24.353L22.1696 3.63086C21.3788 2.27351 19.9622 1.46321 18.3804 1.46321ZM25.605 30.954L25.5464 31.0547L25.5379 31.0693L25.3971 31.311L24.6487 32.5954L24.5198 32.8165L22.9647 35.4854L22.4958 36.2901L22.1655 36.8569L22.1531 36.8597L22.1457 36.8724C21.3548 38.2298 19.912 38.6208 18.3302 38.6207C16.7506 38.6207 15.3621 38.232 14.5706 36.8782L14.5456 36.8719L13.7429 35.4943L13.5418 35.1493L4.88344 20.2903L6.45393 17.5953L6.45414 17.5962L9.22427 12.8446L9.22233 12.8443L9.53677 12.3047L9.53882 12.3051L11.7129 8.57581L25.0516 8.57117L31.848 20.2403L25.605 30.954ZM34.9353 29.8159C34.1548 31.1551 32.7571 31.9547 31.1963 31.9547H26.418L32.546 21.4381L34.9352 25.5383C35.7156 26.8776 35.7156 28.4767 34.9353 29.8159ZM1.79084 29.8357C2.56402 31.1626 3.94876 31.9547 5.49508 31.9547H10.2843L4.18542 21.4883L1.79084 25.5976C1.0177 26.9245 1.0177 28.5089 1.79084 29.8357ZM1.79629 14.9923C1.01589 13.653 1.01589 12.0539 1.79629 10.7146C2.57663 9.37537 3.97434 8.57579 5.53514 8.57579H10.3135L4.18544 19.0924L1.79629 14.9923ZM31.2363 8.57579C32.7827 8.57579 34.1675 9.36796 34.9406 10.6949C35.7138 12.0216 35.7138 13.606 34.9406 14.9329L32.546 19.0424L26.4472 8.57579H31.2363Z" fill="#03C4E8"/>
+<path d="M24.8834 22.1517L22.8237 21.6989L24.4257 23.963V30.9819L29.5005 26.4536L29.9182 18.7555L27.4008 19.6611L24.8834 22.1517Z" fill="#03C4E8"/>
+<path d="M12.0675 22.1517L14.1272 21.6989L12.5252 23.963V30.9819L7.45046 26.4536L7.03271 18.7555L9.55011 19.6611L12.0675 22.1517Z" fill="#03C4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2118 24.4159L15.0426 21.699L16.1869 22.3782H20.764L21.9083 21.699L23.7391 24.4159V34.6046L21.5995 38.645H14.9336L13.2118 34.6046V24.4159Z" fill="#03C4E8"/>
+<path d="M24.4257 35.2837L27.4008 32.3404V29.397L24.4257 31.8875V35.2837Z" fill="#03C4E8"/>
+<path d="M12.5253 35.2837L9.55016 32.3404V29.397L12.5253 31.8875V35.2837Z" fill="#03C4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0178 8.56689H15.5004L13.6696 12.8688L16.6447 21.4725H20.5352L23.2814 12.8688L21.4506 8.56689H18.9332V21.4725H18.0178V8.56689Z" fill="#03C4E8"/>
+<path d="M16.6446 21.4724L6.80391 17.8498L5.43079 12.1895L13.8984 12.8687L16.8735 21.4724H16.6446Z" fill="#03C4E8"/>
+<path d="M20.5352 21.4724L30.3759 17.8498L31.749 12.1895L23.0526 12.8687L20.3063 21.4724H20.5352Z" fill="#03C4E8"/>
+<path d="M23.7391 12.1895L28.1273 11.7367L25.341 8.56689H22.1371L23.7391 12.1895Z" fill="#03C4E8"/>
+<path d="M13.2119 12.1895L8.82367 11.7367L11.6099 8.56689H14.8138L13.2119 12.1895Z" fill="#03C4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.7314 28.7256V11.805C55.7314 11.5847 55.8636 11.4525 56.084 11.4525H61.3716C63.4426 11.4525 64.5442 12.5541 64.5442 14.6251V20.0009C64.5442 22.0499 63.4426 23.1735 61.3716 23.1735H58.7278V28.7256C58.7278 28.9459 58.6176 29.0781 58.3753 29.0781H56.084C55.8636 29.0781 55.7314 28.9459 55.7314 28.7256ZM58.7278 20.2653H60.6666C61.2615 20.2653 61.5479 19.9348 61.5479 19.384V15.242C61.5479 14.6692 61.2615 14.3607 60.6666 14.3607H58.7278V20.2653ZM75.5823 20.0009V14.6251C75.5823 12.5541 74.4807 11.4525 72.4097 11.4525H66.8796C66.6593 11.4525 66.5271 11.5847 66.5271 11.805V28.7256C66.5271 28.9459 66.6593 29.0781 66.8796 29.0781H69.171C69.3913 29.0781 69.5235 28.9459 69.5235 28.7256V23.1735H71.0437L72.5198 28.7697C72.5639 28.968 72.6741 29.0781 72.8944 29.0781H75.1857C75.4281 29.0781 75.5602 28.9459 75.4941 28.6815L73.9739 22.9092C75.0315 22.4465 75.5823 21.4771 75.5823 20.0009ZM69.5235 20.2653H71.7046C72.2775 20.2653 72.5859 19.9569 72.5859 19.384V15.242C72.5859 14.6692 72.2775 14.3607 71.7046 14.3607H69.5235V20.2653ZM80.4293 11.4525H78.138C77.8956 11.4525 77.7855 11.5847 77.7855 11.805V28.7256C77.7855 28.9459 77.8956 29.0781 78.138 29.0781H80.4293C80.6496 29.0781 80.7818 28.9459 80.7818 28.7256V11.805C80.7818 11.5847 80.6496 11.4525 80.4293 11.4525ZM92.1944 11.4525H95.1026C95.389 11.4525 95.5433 11.6067 95.5433 11.8932V28.6375C95.5433 28.9239 95.389 29.0781 95.1026 29.0781H93.0536C92.7672 29.0781 92.613 28.9239 92.613 28.6375V18.7231H92.4588L90.2776 28.6815C90.2115 28.9459 90.0573 29.0781 89.7929 29.0781H88.7133C88.449 29.0781 88.2947 28.9459 88.2286 28.6815L86.0475 18.7231H85.8933V28.6375C85.8933 28.9239 85.739 29.0781 85.4526 29.0781H83.4257C83.1393 29.0781 82.985 28.9239 82.985 28.6375V11.8932C82.985 11.6067 83.1393 11.4525 83.4257 11.4525H86.3339C86.5983 11.4525 86.7525 11.5847 86.8186 11.8491L89.2641 22.821L91.7097 11.8491C91.7758 11.5847 91.93 11.4525 92.1944 11.4525ZM106.537 14.0082V11.805C106.537 11.5847 106.449 11.4525 106.185 11.4525H98.0769C97.8787 11.4525 97.7465 11.5847 97.7465 11.805V28.7256C97.7465 28.9459 97.8787 29.0781 98.0769 29.0781H106.185C106.449 29.0781 106.537 28.9459 106.537 28.7256V26.5224C106.537 26.2801 106.449 26.1699 106.185 26.1699H100.677V21.7194H104.885C105.105 21.7194 105.237 21.5872 105.237 21.3449V19.1637C105.237 18.9214 105.105 18.7892 104.885 18.7892H100.677V14.3828H106.185C106.449 14.3828 106.537 14.2285 106.537 14.0082Z" fill="#20272A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.707 14.6251V20.0009C117.707 21.4771 117.156 22.4465 116.098 22.9092L117.619 28.6815C117.685 28.9459 117.552 29.0781 117.31 29.0781H115.019C114.798 29.0781 114.688 28.968 114.644 28.7697L113.168 23.1735H111.648V28.7256C111.648 28.9459 111.516 29.0781 111.295 29.0781H109.004C108.784 29.0781 108.651 28.9459 108.651 28.7256V11.805C108.651 11.5847 108.784 11.4525 109.004 11.4525H114.534C116.605 11.4525 117.707 12.5541 117.707 14.6251ZM111.648 20.2653H113.829C114.402 20.2653 114.71 19.9569 114.71 19.384V15.242C114.71 14.6692 114.402 14.3607 113.829 14.3607H111.648V20.2653ZM128.701 14.0082V11.805C128.701 11.5847 128.612 11.4525 128.348 11.4525H120.24C120.042 11.4525 119.91 11.5847 119.91 11.805V28.7256C119.91 28.9459 120.042 29.0781 120.24 29.0781H128.348C128.612 29.0781 128.701 28.9459 128.701 28.7256V26.5224C128.701 26.2801 128.612 26.1699 128.348 26.1699H122.84V21.7194H127.048C127.269 21.7194 127.401 21.5872 127.401 21.3449V19.1637C127.401 18.9214 127.269 18.7892 127.048 18.7892H122.84V14.3828H128.348C128.612 14.3828 128.701 14.2285 128.701 14.0082ZM140.862 29.0781H138.527C138.329 29.0781 138.218 28.968 138.174 28.7697L137.557 25.553H133.636L133.041 28.7697C132.997 28.968 132.887 29.0781 132.688 29.0781H130.331C130.089 29.0781 129.978 28.9459 130.045 28.7036L133.702 11.761C133.746 11.5406 133.878 11.4525 134.076 11.4525H137.139C137.337 11.4525 137.469 11.5406 137.513 11.761L141.171 28.7036C141.215 28.9459 141.127 29.0781 140.862 29.0781ZM135.597 15.3081L137.007 22.9973H134.187L135.597 15.3081ZM151.548 14.6251V17.0046C151.548 17.2249 151.416 17.3571 151.195 17.3571H148.992C148.75 17.3571 148.64 17.2249 148.64 17.0046V15.242C148.64 14.6692 148.331 14.3607 147.758 14.3607H146.613C146.018 14.3607 145.731 14.6692 145.731 15.242V25.2886C145.731 25.8835 146.04 26.1699 146.613 26.1699H147.758C148.331 26.1699 148.64 25.8835 148.64 25.2886V23.5261C148.64 23.3057 148.75 23.1735 148.992 23.1735H151.195C151.416 23.1735 151.548 23.3057 151.548 23.5261V25.9055C151.548 27.9765 150.424 29.0781 148.375 29.0781H145.908C143.837 29.0781 142.713 27.9765 142.713 25.9055V14.6251C142.713 12.5541 143.837 11.4525 145.908 11.4525H148.375C150.424 11.4525 151.548 12.5541 151.548 14.6251ZM161.11 11.4525H153.002C152.782 11.4525 152.649 11.5847 152.649 11.805V14.0082C152.649 14.2285 152.782 14.3607 153.002 14.3607H155.558V28.7256C155.558 28.968 155.69 29.0781 155.91 29.0781H158.201C158.444 29.0781 158.554 28.968 158.554 28.7256V14.3607H161.11C161.352 14.3607 161.462 14.2285 161.462 14.0082V11.805C161.462 11.5847 161.352 11.4525 161.11 11.4525Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/primereact-logo-light.svg b/public/images/primereact-logo-light.svg
new file mode 100644
index 0000000000..b64ca769bc
--- /dev/null
+++ b/public/images/primereact-logo-light.svg
@@ -0,0 +1,15 @@
+<svg width="162" height="41" viewBox="0 0 162 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.9876 15.5318L33.2441 20.2402L35.9822 24.9394C36.9812 26.6537 36.9812 28.7006 35.9823 30.4148C34.9834 32.1292 33.1942 33.1526 31.1963 33.1526H25.72L23.1875 37.4987C22.1781 39.231 20.3701 40.2653 18.3512 40.2653C16.3322 40.2653 14.5242 39.231 13.5148 37.4987L10.9823 33.1526H5.4951C3.51173 33.1526 1.73552 32.1366 0.743811 30.4347C-0.247901 28.7327 -0.247901 26.7006 0.743811 24.9988L3.4874 20.2903L0.749194 15.5912C-0.249731 13.8769 -0.249731 11.83 0.749194 10.1157C1.74812 8.40136 3.53729 7.37791 5.53514 7.37791H11.0115L13.544 3.0319C14.5534 1.29964 16.3616 0.265259 18.3804 0.265259C20.3994 0.265259 22.2072 1.29954 23.2167 3.0319L25.7491 7.37791H31.2364C33.2198 7.37791 34.996 8.394 35.9877 10.0959C36.9794 11.7978 36.9794 13.8299 35.9876 15.5318ZM18.3804 1.46321C16.7985 1.46316 15.3819 2.27351 14.591 3.63086L12.4076 7.37791H24.353L22.1696 3.63086C21.3788 2.27351 19.9622 1.46321 18.3804 1.46321ZM25.605 30.954L25.5464 31.0547L25.5379 31.0693L25.3971 31.311L24.6487 32.5954L24.5198 32.8165L22.9647 35.4854L22.4958 36.2901L22.1655 36.8569L22.1531 36.8597L22.1457 36.8724C21.3548 38.2298 19.912 38.6208 18.3302 38.6207C16.7506 38.6207 15.3621 38.232 14.5706 36.8782L14.5456 36.8719L13.7429 35.4943L13.5418 35.1493L4.88344 20.2903L6.45393 17.5953L6.45414 17.5962L9.22427 12.8446L9.22233 12.8443L9.53677 12.3047L9.53882 12.3051L11.7129 8.57581L25.0516 8.57117L31.848 20.2403L25.605 30.954ZM34.9353 29.8159C34.1548 31.1551 32.7571 31.9547 31.1963 31.9547H26.418L32.546 21.4381L34.9352 25.5383C35.7156 26.8776 35.7156 28.4767 34.9353 29.8159ZM1.79084 29.8357C2.56402 31.1626 3.94876 31.9547 5.49508 31.9547H10.2843L4.18542 21.4883L1.79084 25.5976C1.0177 26.9245 1.0177 28.5089 1.79084 29.8357ZM1.79629 14.9923C1.01589 13.653 1.01589 12.0539 1.79629 10.7146C2.57663 9.37537 3.97434 8.57579 5.53514 8.57579H10.3135L4.18544 19.0924L1.79629 14.9923ZM31.2363 8.57579C32.7827 8.57579 34.1675 9.36796 34.9406 10.6949C35.7138 12.0216 35.7138 13.606 34.9406 14.9329L32.546 19.0424L26.4472 8.57579H31.2363Z" fill="#03C4E8"/>
+<path d="M24.8834 22.1517L22.8237 21.6989L24.4257 23.963V30.9819L29.5005 26.4536L29.9182 18.7555L27.4008 19.6611L24.8834 22.1517Z" fill="#03C4E8"/>
+<path d="M12.0675 22.1517L14.1272 21.6989L12.5252 23.963V30.9819L7.45046 26.4536L7.03271 18.7555L9.55011 19.6611L12.0675 22.1517Z" fill="#03C4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2118 24.4159L15.0426 21.699L16.1869 22.3782H20.764L21.9083 21.699L23.7391 24.4159V34.6046L21.5995 38.645H14.9336L13.2118 34.6046V24.4159Z" fill="#03C4E8"/>
+<path d="M24.4257 35.2837L27.4008 32.3404V29.397L24.4257 31.8875V35.2837Z" fill="#03C4E8"/>
+<path d="M12.5253 35.2837L9.55016 32.3404V29.397L12.5253 31.8875V35.2837Z" fill="#03C4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0178 8.56689H15.5004L13.6696 12.8688L16.6447 21.4725H20.5352L23.2814 12.8688L21.4506 8.56689H18.9332V21.4725H18.0178V8.56689Z" fill="#03C4E8"/>
+<path d="M16.6446 21.4724L6.80391 17.8498L5.43079 12.1895L13.8984 12.8687L16.8735 21.4724H16.6446Z" fill="#03C4E8"/>
+<path d="M20.5352 21.4724L30.3759 17.8498L31.749 12.1895L23.0526 12.8687L20.3063 21.4724H20.5352Z" fill="#03C4E8"/>
+<path d="M23.7391 12.1895L28.1273 11.7367L25.341 8.56689H22.1371L23.7391 12.1895Z" fill="#03C4E8"/>
+<path d="M13.2119 12.1895L8.82367 11.7367L11.6099 8.56689H14.8138L13.2119 12.1895Z" fill="#03C4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M55.7314 28.7256V11.805C55.7314 11.5847 55.8636 11.4525 56.084 11.4525H61.3716C63.4426 11.4525 64.5442 12.5541 64.5442 14.6251V20.0009C64.5442 22.0499 63.4426 23.1735 61.3716 23.1735H58.7278V28.7256C58.7278 28.9459 58.6176 29.0781 58.3753 29.0781H56.084C55.8636 29.0781 55.7314 28.9459 55.7314 28.7256ZM58.7278 20.2653H60.6666C61.2615 20.2653 61.5479 19.9348 61.5479 19.384V15.242C61.5479 14.6692 61.2615 14.3607 60.6666 14.3607H58.7278V20.2653ZM75.5823 20.0009V14.6251C75.5823 12.5541 74.4807 11.4525 72.4097 11.4525H66.8796C66.6593 11.4525 66.5271 11.5847 66.5271 11.805V28.7256C66.5271 28.9459 66.6593 29.0781 66.8796 29.0781H69.171C69.3913 29.0781 69.5235 28.9459 69.5235 28.7256V23.1735H71.0437L72.5198 28.7697C72.5639 28.968 72.6741 29.0781 72.8944 29.0781H75.1857C75.4281 29.0781 75.5602 28.9459 75.4941 28.6815L73.9739 22.9092C75.0315 22.4465 75.5823 21.4771 75.5823 20.0009ZM69.5235 20.2653H71.7046C72.2775 20.2653 72.5859 19.9569 72.5859 19.384V15.242C72.5859 14.6692 72.2775 14.3607 71.7046 14.3607H69.5235V20.2653ZM80.4293 11.4525H78.138C77.8956 11.4525 77.7855 11.5847 77.7855 11.805V28.7256C77.7855 28.9459 77.8956 29.0781 78.138 29.0781H80.4293C80.6496 29.0781 80.7818 28.9459 80.7818 28.7256V11.805C80.7818 11.5847 80.6496 11.4525 80.4293 11.4525ZM92.1944 11.4525H95.1026C95.389 11.4525 95.5433 11.6067 95.5433 11.8932V28.6375C95.5433 28.9239 95.389 29.0781 95.1026 29.0781H93.0536C92.7672 29.0781 92.613 28.9239 92.613 28.6375V18.7231H92.4588L90.2776 28.6815C90.2115 28.9459 90.0573 29.0781 89.7929 29.0781H88.7133C88.449 29.0781 88.2947 28.9459 88.2286 28.6815L86.0475 18.7231H85.8933V28.6375C85.8933 28.9239 85.739 29.0781 85.4526 29.0781H83.4257C83.1393 29.0781 82.985 28.9239 82.985 28.6375V11.8932C82.985 11.6067 83.1393 11.4525 83.4257 11.4525H86.3339C86.5983 11.4525 86.7525 11.5847 86.8186 11.8491L89.2641 22.821L91.7097 11.8491C91.7758 11.5847 91.93 11.4525 92.1944 11.4525ZM106.537 14.0082V11.805C106.537 11.5847 106.449 11.4525 106.185 11.4525H98.0769C97.8787 11.4525 97.7465 11.5847 97.7465 11.805V28.7256C97.7465 28.9459 97.8787 29.0781 98.0769 29.0781H106.185C106.449 29.0781 106.537 28.9459 106.537 28.7256V26.5224C106.537 26.2801 106.449 26.1699 106.185 26.1699H100.677V21.7194H104.885C105.105 21.7194 105.237 21.5872 105.237 21.3449V19.1637C105.237 18.9214 105.105 18.7892 104.885 18.7892H100.677V14.3828H106.185C106.449 14.3828 106.537 14.2285 106.537 14.0082Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.707 14.6251V20.0009C117.707 21.4771 117.156 22.4465 116.098 22.9092L117.619 28.6815C117.685 28.9459 117.552 29.0781 117.31 29.0781H115.019C114.798 29.0781 114.688 28.968 114.644 28.7697L113.168 23.1735H111.648V28.7256C111.648 28.9459 111.516 29.0781 111.295 29.0781H109.004C108.784 29.0781 108.651 28.9459 108.651 28.7256V11.805C108.651 11.5847 108.784 11.4525 109.004 11.4525H114.534C116.605 11.4525 117.707 12.5541 117.707 14.6251ZM111.648 20.2653H113.829C114.402 20.2653 114.71 19.9569 114.71 19.384V15.242C114.71 14.6692 114.402 14.3607 113.829 14.3607H111.648V20.2653ZM128.701 14.0082V11.805C128.701 11.5847 128.612 11.4525 128.348 11.4525H120.24C120.042 11.4525 119.91 11.5847 119.91 11.805V28.7256C119.91 28.9459 120.042 29.0781 120.24 29.0781H128.348C128.612 29.0781 128.701 28.9459 128.701 28.7256V26.5224C128.701 26.2801 128.612 26.1699 128.348 26.1699H122.84V21.7194H127.048C127.269 21.7194 127.401 21.5872 127.401 21.3449V19.1637C127.401 18.9214 127.269 18.7892 127.048 18.7892H122.84V14.3828H128.348C128.612 14.3828 128.701 14.2285 128.701 14.0082ZM140.862 29.0781H138.527C138.329 29.0781 138.218 28.968 138.174 28.7697L137.557 25.553H133.636L133.041 28.7697C132.997 28.968 132.887 29.0781 132.688 29.0781H130.331C130.089 29.0781 129.978 28.9459 130.045 28.7036L133.702 11.761C133.746 11.5406 133.878 11.4525 134.076 11.4525H137.139C137.337 11.4525 137.469 11.5406 137.513 11.761L141.171 28.7036C141.215 28.9459 141.127 29.0781 140.862 29.0781ZM135.597 15.3081L137.007 22.9973H134.187L135.597 15.3081ZM151.548 14.6251V17.0046C151.548 17.2249 151.416 17.3571 151.195 17.3571H148.992C148.75 17.3571 148.64 17.2249 148.64 17.0046V15.242C148.64 14.6692 148.331 14.3607 147.758 14.3607H146.613C146.018 14.3607 145.731 14.6692 145.731 15.242V25.2886C145.731 25.8835 146.04 26.1699 146.613 26.1699H147.758C148.331 26.1699 148.64 25.8835 148.64 25.2886V23.5261C148.64 23.3057 148.75 23.1735 148.992 23.1735H151.195C151.416 23.1735 151.548 23.3057 151.548 23.5261V25.9055C151.548 27.9765 150.424 29.0781 148.375 29.0781H145.908C143.837 29.0781 142.713 27.9765 142.713 25.9055V14.6251C142.713 12.5541 143.837 11.4525 145.908 11.4525H148.375C150.424 11.4525 151.548 12.5541 151.548 14.6251ZM161.11 11.4525H153.002C152.782 11.4525 152.649 11.5847 152.649 11.805V14.0082C152.649 14.2285 152.782 14.3607 153.002 14.3607H155.558V28.7256C155.558 28.968 155.69 29.0781 155.91 29.0781H158.201C158.444 29.0781 158.554 28.968 158.554 28.7256V14.3607H161.11C161.352 14.3607 161.462 14.2285 161.462 14.0082V11.805C161.462 11.5847 161.352 11.4525 161.11 11.4525Z" fill="#03C4E8"/>
+</svg>
diff --git a/public/images/pro-effect.png b/public/images/pro-effect.png
new file mode 100644
index 0000000000..664b4a0509
Binary files /dev/null and b/public/images/pro-effect.png differ
diff --git a/public/images/product/bamboo-watch.jpg b/public/images/product/bamboo-watch.jpg
new file mode 100644
index 0000000000..dbff9ed44b
Binary files /dev/null and b/public/images/product/bamboo-watch.jpg differ
diff --git a/public/images/product/black-watch.jpg b/public/images/product/black-watch.jpg
new file mode 100644
index 0000000000..03f8bd44d2
Binary files /dev/null and b/public/images/product/black-watch.jpg differ
diff --git a/public/images/product/blue-band.jpg b/public/images/product/blue-band.jpg
new file mode 100644
index 0000000000..3b84a9a34c
Binary files /dev/null and b/public/images/product/blue-band.jpg differ
diff --git a/public/images/product/blue-t-shirt.jpg b/public/images/product/blue-t-shirt.jpg
new file mode 100644
index 0000000000..3287ead690
Binary files /dev/null and b/public/images/product/blue-t-shirt.jpg differ
diff --git a/public/images/product/bracelet.jpg b/public/images/product/bracelet.jpg
new file mode 100644
index 0000000000..61776652e5
Binary files /dev/null and b/public/images/product/bracelet.jpg differ
diff --git a/public/images/product/brown-purse.jpg b/public/images/product/brown-purse.jpg
new file mode 100644
index 0000000000..04115718d4
Binary files /dev/null and b/public/images/product/brown-purse.jpg differ
diff --git a/public/images/product/chakra-bracelet.jpg b/public/images/product/chakra-bracelet.jpg
new file mode 100644
index 0000000000..29f4771b22
Binary files /dev/null and b/public/images/product/chakra-bracelet.jpg differ
diff --git a/public/images/product/galaxy-earrings.jpg b/public/images/product/galaxy-earrings.jpg
new file mode 100644
index 0000000000..ad0b1b1bbd
Binary files /dev/null and b/public/images/product/galaxy-earrings.jpg differ
diff --git a/public/images/product/game-controller.jpg b/public/images/product/game-controller.jpg
new file mode 100644
index 0000000000..6d309ee52b
Binary files /dev/null and b/public/images/product/game-controller.jpg differ
diff --git a/public/images/product/gaming-set.jpg b/public/images/product/gaming-set.jpg
new file mode 100644
index 0000000000..9fdbe6c51d
Binary files /dev/null and b/public/images/product/gaming-set.jpg differ
diff --git a/public/images/product/gold-phone-case.jpg b/public/images/product/gold-phone-case.jpg
new file mode 100644
index 0000000000..76719685fd
Binary files /dev/null and b/public/images/product/gold-phone-case.jpg differ
diff --git a/public/images/product/green-earbuds.jpg b/public/images/product/green-earbuds.jpg
new file mode 100644
index 0000000000..7813105006
Binary files /dev/null and b/public/images/product/green-earbuds.jpg differ
diff --git a/public/images/product/green-t-shirt.jpg b/public/images/product/green-t-shirt.jpg
new file mode 100644
index 0000000000..fdb70a7362
Binary files /dev/null and b/public/images/product/green-t-shirt.jpg differ
diff --git a/public/images/product/grey-t-shirt.jpg b/public/images/product/grey-t-shirt.jpg
new file mode 100644
index 0000000000..5b6d78ace6
Binary files /dev/null and b/public/images/product/grey-t-shirt.jpg differ
diff --git a/public/images/product/headphones.jpg b/public/images/product/headphones.jpg
new file mode 100644
index 0000000000..5f9f31deec
Binary files /dev/null and b/public/images/product/headphones.jpg differ
diff --git a/public/images/product/light-green-t-shirt.jpg b/public/images/product/light-green-t-shirt.jpg
new file mode 100644
index 0000000000..2fb621979f
Binary files /dev/null and b/public/images/product/light-green-t-shirt.jpg differ
diff --git a/public/images/product/lime-band.jpg b/public/images/product/lime-band.jpg
new file mode 100644
index 0000000000..5627c6b8bc
Binary files /dev/null and b/public/images/product/lime-band.jpg differ
diff --git a/public/images/product/mini-speakers.jpg b/public/images/product/mini-speakers.jpg
new file mode 100644
index 0000000000..8883aa24af
Binary files /dev/null and b/public/images/product/mini-speakers.jpg differ
diff --git a/public/images/product/painted-phone-case.jpg b/public/images/product/painted-phone-case.jpg
new file mode 100644
index 0000000000..5da5f002d9
Binary files /dev/null and b/public/images/product/painted-phone-case.jpg differ
diff --git a/public/images/product/pink-band.jpg b/public/images/product/pink-band.jpg
new file mode 100644
index 0000000000..50124ad179
Binary files /dev/null and b/public/images/product/pink-band.jpg differ
diff --git a/public/images/product/pink-purse.jpg b/public/images/product/pink-purse.jpg
new file mode 100644
index 0000000000..a5e864fe83
Binary files /dev/null and b/public/images/product/pink-purse.jpg differ
diff --git a/public/images/product/product-placeholder.svg b/public/images/product/product-placeholder.svg
new file mode 100644
index 0000000000..714f105107
--- /dev/null
+++ b/public/images/product/product-placeholder.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="300px" height="200px" viewBox="0 0 300 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Artboard</title>
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#F8F9FA" x="0" y="0" width="300" height="200"></rect>
+        <g id="image" transform="translate(110.000000, 70.000000)" fill="#BABABC" fill-rule="nonzero">
+            <path d="M75,0 L5,0 C2.23857625,0 0,2.23857625 0,5 L0,55 C0,57.7614237 2.23857625,60 5,60 L75,60 C77.7614237,60 80,57.7614237 80,55 L80,5 C80,2.23857625 77.7614237,0 75,0 Z M20,10 C25.5228475,10 30,14.4771525 30,20 C30,25.5228475 25.5228475,30 20,30 C14.4771525,30 10,25.5228475 10,20 C10,14.4771525 14.4771525,10 20,10 Z M70,40 L70,50 L10,50 L10,40 L18.55,35.7 C19.4648753,35.2524957 20.5351247,35.2524957 21.45,35.7 L30,40 L53.65,21.1 C54.4866298,20.4991452 55.6133702,20.4991452 56.45,21.1 L70,30 L70,40 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/product/purple-band.jpg b/public/images/product/purple-band.jpg
new file mode 100644
index 0000000000..17523fecd8
Binary files /dev/null and b/public/images/product/purple-band.jpg differ
diff --git a/public/images/product/purple-gemstone-necklace.jpg b/public/images/product/purple-gemstone-necklace.jpg
new file mode 100644
index 0000000000..a40d4b3a52
Binary files /dev/null and b/public/images/product/purple-gemstone-necklace.jpg differ
diff --git a/public/images/product/purple-t-shirt.jpg b/public/images/product/purple-t-shirt.jpg
new file mode 100644
index 0000000000..12d75f1849
Binary files /dev/null and b/public/images/product/purple-t-shirt.jpg differ
diff --git a/public/images/product/shoes.jpg b/public/images/product/shoes.jpg
new file mode 100644
index 0000000000..efc7aca00f
Binary files /dev/null and b/public/images/product/shoes.jpg differ
diff --git a/public/images/product/sneakers.jpg b/public/images/product/sneakers.jpg
new file mode 100644
index 0000000000..53f66dce96
Binary files /dev/null and b/public/images/product/sneakers.jpg differ
diff --git a/public/images/product/teal-t-shirt.jpg b/public/images/product/teal-t-shirt.jpg
new file mode 100644
index 0000000000..749ae9d583
Binary files /dev/null and b/public/images/product/teal-t-shirt.jpg differ
diff --git a/public/images/product/yellow-earbuds.jpg b/public/images/product/yellow-earbuds.jpg
new file mode 100644
index 0000000000..1bfc87ab5c
Binary files /dev/null and b/public/images/product/yellow-earbuds.jpg differ
diff --git a/public/images/product/yoga-mat.jpg b/public/images/product/yoga-mat.jpg
new file mode 100644
index 0000000000..18d9564870
Binary files /dev/null and b/public/images/product/yoga-mat.jpg differ
diff --git a/public/images/product/yoga-set.jpg b/public/images/product/yoga-set.jpg
new file mode 100644
index 0000000000..734ba5839a
Binary files /dev/null and b/public/images/product/yoga-set.jpg differ
diff --git a/public/images/quote.png b/public/images/quote.png
new file mode 100644
index 0000000000..805ede7047
Binary files /dev/null and b/public/images/quote.png differ
diff --git a/public/images/rating/cancel.png b/public/images/rating/cancel.png
new file mode 100644
index 0000000000..8482598af6
Binary files /dev/null and b/public/images/rating/cancel.png differ
diff --git a/public/images/rating/custom-icon-active.png b/public/images/rating/custom-icon-active.png
new file mode 100644
index 0000000000..ca38b0d290
Binary files /dev/null and b/public/images/rating/custom-icon-active.png differ
diff --git a/public/images/rating/custom-icon.png b/public/images/rating/custom-icon.png
new file mode 100644
index 0000000000..7047c28f4e
Binary files /dev/null and b/public/images/rating/custom-icon.png differ
diff --git a/public/showcase/resources/images/setup.png b/public/images/setup.png
similarity index 100%
rename from public/showcase/resources/images/setup.png
rename to public/images/setup.png
diff --git a/public/images/support/card-pro.jpg b/public/images/support/card-pro.jpg
new file mode 100644
index 0000000000..77aa497dd4
Binary files /dev/null and b/public/images/support/card-pro.jpg differ
diff --git a/public/images/support/support-header.png b/public/images/support/support-header.png
new file mode 100644
index 0000000000..fd721f7da5
Binary files /dev/null and b/public/images/support/support-header.png differ
diff --git a/public/images/team/aliriza.jpg b/public/images/team/aliriza.jpg
new file mode 100644
index 0000000000..7d9f858cdc
Binary files /dev/null and b/public/images/team/aliriza.jpg differ
diff --git a/public/images/team/atakan.jpg b/public/images/team/atakan.jpg
new file mode 100644
index 0000000000..656dbcc024
Binary files /dev/null and b/public/images/team/atakan.jpg differ
diff --git a/public/images/team/bahadir.jpg b/public/images/team/bahadir.jpg
new file mode 100644
index 0000000000..3b35c5879c
Binary files /dev/null and b/public/images/team/bahadir.jpg differ
diff --git a/public/images/team/bugra.jpg b/public/images/team/bugra.jpg
new file mode 100644
index 0000000000..7ec2140e58
Binary files /dev/null and b/public/images/team/bugra.jpg differ
diff --git a/public/images/team/cagatay.jpg b/public/images/team/cagatay.jpg
new file mode 100644
index 0000000000..fb71c79719
Binary files /dev/null and b/public/images/team/cagatay.jpg differ
diff --git a/public/images/team/cetin.jpg b/public/images/team/cetin.jpg
new file mode 100644
index 0000000000..024884ff9e
Binary files /dev/null and b/public/images/team/cetin.jpg differ
diff --git a/public/images/team/dilara.jpg b/public/images/team/dilara.jpg
new file mode 100644
index 0000000000..a79cc7297f
Binary files /dev/null and b/public/images/team/dilara.jpg differ
diff --git a/public/images/team/kerem.jpg b/public/images/team/kerem.jpg
new file mode 100644
index 0000000000..3a3d6ea295
Binary files /dev/null and b/public/images/team/kerem.jpg differ
diff --git a/public/images/team/mert.jpg b/public/images/team/mert.jpg
new file mode 100644
index 0000000000..172c6edbcf
Binary files /dev/null and b/public/images/team/mert.jpg differ
diff --git a/public/images/team/olgu.jpg b/public/images/team/olgu.jpg
new file mode 100644
index 0000000000..c6b92bf909
Binary files /dev/null and b/public/images/team/olgu.jpg differ
diff --git a/public/images/team/onur.jpg b/public/images/team/onur.jpg
new file mode 100644
index 0000000000..215aff55cb
Binary files /dev/null and b/public/images/team/onur.jpg differ
diff --git a/public/images/team/tugce.jpg b/public/images/team/tugce.jpg
new file mode 100644
index 0000000000..eee66283d4
Binary files /dev/null and b/public/images/team/tugce.jpg differ
diff --git a/public/images/team/ulas.jpg b/public/images/team/ulas.jpg
new file mode 100644
index 0000000000..14d3efc2f5
Binary files /dev/null and b/public/images/team/ulas.jpg differ
diff --git a/public/images/templates/angular-3d-logo.png b/public/images/templates/angular-3d-logo.png
new file mode 100644
index 0000000000..c4cf162497
Binary files /dev/null and b/public/images/templates/angular-3d-logo.png differ
diff --git a/public/images/templates/apollo-react.jpg b/public/images/templates/apollo-react.jpg
new file mode 100644
index 0000000000..b126f422f1
Binary files /dev/null and b/public/images/templates/apollo-react.jpg differ
diff --git a/public/images/templates/apollo/Drawer.png b/public/images/templates/apollo/Drawer.png
new file mode 100644
index 0000000000..38917f0798
Binary files /dev/null and b/public/images/templates/apollo/Drawer.png differ
diff --git a/public/images/templates/apollo/Horizontal.png b/public/images/templates/apollo/Horizontal.png
new file mode 100644
index 0000000000..b9c90c3656
Binary files /dev/null and b/public/images/templates/apollo/Horizontal.png differ
diff --git a/public/images/templates/apollo/Overlay.png b/public/images/templates/apollo/Overlay.png
new file mode 100644
index 0000000000..1584fb9e03
Binary files /dev/null and b/public/images/templates/apollo/Overlay.png differ
diff --git a/public/images/templates/apollo/Reveal.png b/public/images/templates/apollo/Reveal.png
new file mode 100644
index 0000000000..6d79c055eb
Binary files /dev/null and b/public/images/templates/apollo/Reveal.png differ
diff --git a/public/images/templates/apollo/Slim+.png b/public/images/templates/apollo/Slim+.png
new file mode 100644
index 0000000000..44ce077e13
Binary files /dev/null and b/public/images/templates/apollo/Slim+.png differ
diff --git a/public/images/templates/apollo/Slim.png b/public/images/templates/apollo/Slim.png
new file mode 100644
index 0000000000..75b45635e3
Binary files /dev/null and b/public/images/templates/apollo/Slim.png differ
diff --git a/public/images/templates/apollo/Static.png b/public/images/templates/apollo/Static.png
new file mode 100644
index 0000000000..358cd775d8
Binary files /dev/null and b/public/images/templates/apollo/Static.png differ
diff --git a/public/images/templates/apollo/apollo-features1-feature1.png b/public/images/templates/apollo/apollo-features1-feature1.png
new file mode 100644
index 0000000000..f587cba47c
Binary files /dev/null and b/public/images/templates/apollo/apollo-features1-feature1.png differ
diff --git a/public/images/templates/apollo/apollo-features1-feature2.png b/public/images/templates/apollo/apollo-features1-feature2.png
new file mode 100644
index 0000000000..a3f2db27e0
Binary files /dev/null and b/public/images/templates/apollo/apollo-features1-feature2.png differ
diff --git a/public/images/templates/apollo/apollo-features1-feature3.png b/public/images/templates/apollo/apollo-features1-feature3.png
new file mode 100644
index 0000000000..8a9718d43a
Binary files /dev/null and b/public/images/templates/apollo/apollo-features1-feature3.png differ
diff --git a/public/images/templates/apollo/apollo-features2-compatible-dark.png b/public/images/templates/apollo/apollo-features2-compatible-dark.png
new file mode 100644
index 0000000000..f314bd979d
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-compatible-dark.png differ
diff --git a/public/images/templates/apollo/apollo-features2-compatible.png b/public/images/templates/apollo/apollo-features2-compatible.png
new file mode 100644
index 0000000000..d5970d956a
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-compatible.png differ
diff --git a/public/images/templates/apollo/apollo-features2-customizable-dark.png b/public/images/templates/apollo/apollo-features2-customizable-dark.png
new file mode 100644
index 0000000000..290fc39e19
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-customizable-dark.png differ
diff --git a/public/images/templates/apollo/apollo-features2-customizable.png b/public/images/templates/apollo/apollo-features2-customizable.png
new file mode 100644
index 0000000000..41bcdacddc
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-customizable.png differ
diff --git a/public/images/templates/apollo/apollo-features2-lifetime.png b/public/images/templates/apollo/apollo-features2-lifetime.png
new file mode 100644
index 0000000000..bb3ea0c7d0
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-lifetime.png differ
diff --git a/public/images/templates/apollo/apollo-features2-mobile.png b/public/images/templates/apollo/apollo-features2-mobile.png
new file mode 100644
index 0000000000..354b8ce81c
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-mobile.png differ
diff --git a/public/images/templates/apollo/apollo-features2-quality-dark.png b/public/images/templates/apollo/apollo-features2-quality-dark.png
new file mode 100644
index 0000000000..4b8e13be63
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-quality-dark.png differ
diff --git a/public/images/templates/apollo/apollo-features2-quality.png b/public/images/templates/apollo/apollo-features2-quality.png
new file mode 100644
index 0000000000..4adf9dc377
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-quality.png differ
diff --git a/public/images/templates/apollo/apollo-features2-responsive.png b/public/images/templates/apollo/apollo-features2-responsive.png
new file mode 100644
index 0000000000..94d32165e3
Binary files /dev/null and b/public/images/templates/apollo/apollo-features2-responsive.png differ
diff --git a/public/images/templates/apollo/apollo-hero-dashboard1.png b/public/images/templates/apollo/apollo-hero-dashboard1.png
new file mode 100644
index 0000000000..d1e0922b01
Binary files /dev/null and b/public/images/templates/apollo/apollo-hero-dashboard1.png differ
diff --git a/public/images/templates/apollo/apollo-hero-dashboard2.png b/public/images/templates/apollo/apollo-hero-dashboard2.png
new file mode 100644
index 0000000000..6c1b0d1028
Binary files /dev/null and b/public/images/templates/apollo/apollo-hero-dashboard2.png differ
diff --git a/public/images/templates/apollo/apollo-hero-logo.svg b/public/images/templates/apollo/apollo-hero-logo.svg
new file mode 100644
index 0000000000..bf2d5331f6
--- /dev/null
+++ b/public/images/templates/apollo/apollo-hero-logo.svg
@@ -0,0 +1,13 @@
+<svg width="235" height="40" viewBox="0 0 235 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Vector" d="M20.0055 0L0 39.8951H6.7486L20.0064 11.5771L32.9975 39.8951H40.0134L20.0055 0Z" fill="white"/>
+<path id="Vector_2" d="M26.4066 30.0791L30.9241 40.0001H22.4536L26.4066 30.0791Z" fill="white"/>
+<path id="Vector_3" d="M17.2595 40.0001L12.7419 30.0791L8.78906 40.0001H17.2595Z" fill="white"/>
+<path id="Vector_4" d="M78.0429 27.6582H66.3425L63.2979 34.2844H58.855L72.3786 5.28833L85.4243 34.2844H80.9104L78.0429 27.6582ZM76.3613 23.7886L72.3078 14.512L68.0595 23.7886H76.3613Z" fill="white"/>
+<path id="Vector_5" d="M100.155 23.2053V34.2843H96.0303V7.0022H100.703C102.993 7.0022 104.721 7.16123 105.89 7.47928C107.07 7.79734 108.108 8.39811 109.005 9.2816C110.575 10.813 111.359 12.7449 111.359 15.0773C111.359 17.5746 110.521 19.5536 108.846 21.0143C107.17 22.4751 104.91 23.2053 102.066 23.2053H100.155ZM100.155 19.3887H101.695C105.483 19.3887 107.377 17.9339 107.377 15.0243C107.377 12.2089 105.423 10.8012 101.517 10.8012H100.155V19.3887Z" fill="white"/>
+<path id="Vector_6" d="M121.418 20.5197C121.418 16.6795 122.829 13.3811 125.649 10.6246C128.458 7.86811 131.833 6.48987 135.774 6.48987C139.668 6.48987 143.008 7.8799 145.793 10.6599C148.59 13.44 149.988 16.7796 149.988 20.6788C149.988 24.6013 148.584 27.9292 145.775 30.6622C142.955 33.4069 139.55 34.7792 135.562 34.7792C132.033 34.7792 128.865 33.5601 126.056 31.1216C122.964 28.4239 121.418 24.89 121.418 20.5197ZM125.578 20.5727C125.578 23.5882 126.593 26.0681 128.623 28.0117C130.641 29.9554 132.972 30.9271 135.615 30.9271C138.482 30.9271 140.902 29.9377 142.872 27.9586C144.843 25.9561 145.828 23.5176 145.828 20.6433C145.828 17.7337 144.855 15.2953 142.908 13.3281C140.972 11.3491 138.577 10.3596 135.721 10.3596C132.877 10.3596 130.475 11.3491 128.517 13.3281C126.558 15.2835 125.578 17.6984 125.578 20.5727Z" fill="white"/>
+<path id="Vector_7" d="M166.47 7.0022V30.4147H174.507V34.2843H162.346V7.0022H166.47Z" fill="white"/>
+<path id="Vector_8" d="M189.715 7.0022V30.4147H197.752V34.2843H185.591V7.0022H189.715Z" fill="white"/>
+<path id="Vector_9" d="M206.34 20.5197C206.34 16.6795 207.75 13.3811 210.57 10.6246C213.379 7.86811 216.754 6.48987 220.696 6.48987C224.59 6.48987 227.929 7.8799 230.715 10.6599C233.512 13.44 234.911 16.7796 234.911 20.6788C234.911 24.6013 233.506 27.9292 230.698 30.6622C227.876 33.4069 224.472 34.7792 220.484 34.7792C216.954 34.7792 213.787 33.5601 210.979 31.1216C207.886 28.4239 206.34 24.89 206.34 20.5197ZM210.5 20.5727C210.5 23.5882 211.515 26.0681 213.545 28.0117C215.564 29.9554 217.893 30.9271 220.536 30.9271C223.403 30.9271 225.823 29.9377 227.794 27.9586C229.765 25.9561 230.751 23.5176 230.751 20.6433C230.751 17.7337 229.776 15.2953 227.83 13.3281C225.893 11.3491 223.499 10.3596 220.643 10.3596C217.8 10.3596 215.398 11.3491 213.438 13.3281C211.48 15.2835 210.5 17.6984 210.5 20.5727Z" fill="white"/>
+</g>
+</svg>
diff --git a/public/images/templates/apollo/apollo-hero-pattern.png b/public/images/templates/apollo/apollo-hero-pattern.png
new file mode 100644
index 0000000000..dadf1d2759
Binary files /dev/null and b/public/images/templates/apollo/apollo-hero-pattern.png differ
diff --git a/public/images/templates/apollo/apollo-youtube-screen.png b/public/images/templates/apollo/apollo-youtube-screen.png
new file mode 100644
index 0000000000..8caebf8a41
Binary files /dev/null and b/public/images/templates/apollo/apollo-youtube-screen.png differ
diff --git a/public/images/templates/apollo/features-animation-blocks.png b/public/images/templates/apollo/features-animation-blocks.png
new file mode 100644
index 0000000000..b955742e5c
Binary files /dev/null and b/public/images/templates/apollo/features-animation-blocks.png differ
diff --git a/public/images/templates/apollo/features-animation-component-themes.png b/public/images/templates/apollo/features-animation-component-themes.png
new file mode 100644
index 0000000000..ae12509a4a
Binary files /dev/null and b/public/images/templates/apollo/features-animation-component-themes.png differ
diff --git a/public/images/templates/apollo/features-animation-darkmode.png b/public/images/templates/apollo/features-animation-darkmode.png
new file mode 100644
index 0000000000..fe01b929a9
Binary files /dev/null and b/public/images/templates/apollo/features-animation-darkmode.png differ
diff --git a/public/images/templates/apollo/features-animation-figma.png b/public/images/templates/apollo/features-animation-figma.png
new file mode 100644
index 0000000000..c56f1ba9d4
Binary files /dev/null and b/public/images/templates/apollo/features-animation-figma.png differ
diff --git a/public/images/templates/apollo/features-animation-icons.png b/public/images/templates/apollo/features-animation-icons.png
new file mode 100644
index 0000000000..9c248d0562
Binary files /dev/null and b/public/images/templates/apollo/features-animation-icons.png differ
diff --git a/public/images/templates/apollo/features-animation-menu-themes.png b/public/images/templates/apollo/features-animation-menu-themes.png
new file mode 100644
index 0000000000..8dc7ac1deb
Binary files /dev/null and b/public/images/templates/apollo/features-animation-menu-themes.png differ
diff --git a/public/images/templates/apollo/features-animation-orientations.png b/public/images/templates/apollo/features-animation-orientations.png
new file mode 100644
index 0000000000..e51b1f448a
Binary files /dev/null and b/public/images/templates/apollo/features-animation-orientations.png differ
diff --git a/public/images/templates/apollo/features-animation-utilities.png b/public/images/templates/apollo/features-animation-utilities.png
new file mode 100644
index 0000000000..44b40a79ba
Binary files /dev/null and b/public/images/templates/apollo/features-animation-utilities.png differ
diff --git a/public/images/templates/atlantis-react.jpg b/public/images/templates/atlantis-react.jpg
new file mode 100644
index 0000000000..28f7264a40
Binary files /dev/null and b/public/images/templates/atlantis-react.jpg differ
diff --git a/public/images/templates/atlantis/Drawer.png b/public/images/templates/atlantis/Drawer.png
new file mode 100644
index 0000000000..47d761756c
Binary files /dev/null and b/public/images/templates/atlantis/Drawer.png differ
diff --git a/public/images/templates/atlantis/Horizontal.png b/public/images/templates/atlantis/Horizontal.png
new file mode 100644
index 0000000000..535573a931
Binary files /dev/null and b/public/images/templates/atlantis/Horizontal.png differ
diff --git a/public/images/templates/atlantis/Overlay.png b/public/images/templates/atlantis/Overlay.png
new file mode 100644
index 0000000000..d26814080d
Binary files /dev/null and b/public/images/templates/atlantis/Overlay.png differ
diff --git a/public/images/templates/atlantis/Reveal.png b/public/images/templates/atlantis/Reveal.png
new file mode 100644
index 0000000000..06b18c23e6
Binary files /dev/null and b/public/images/templates/atlantis/Reveal.png differ
diff --git a/public/images/templates/atlantis/Screen.png b/public/images/templates/atlantis/Screen.png
new file mode 100644
index 0000000000..a9842b5ba3
Binary files /dev/null and b/public/images/templates/atlantis/Screen.png differ
diff --git a/public/images/templates/atlantis/Slim+.png b/public/images/templates/atlantis/Slim+.png
new file mode 100644
index 0000000000..25bac60ffc
Binary files /dev/null and b/public/images/templates/atlantis/Slim+.png differ
diff --git a/public/images/templates/atlantis/Slim.png b/public/images/templates/atlantis/Slim.png
new file mode 100644
index 0000000000..26f7a7acf7
Binary files /dev/null and b/public/images/templates/atlantis/Slim.png differ
diff --git a/public/images/templates/atlantis/Static.png b/public/images/templates/atlantis/Static.png
new file mode 100644
index 0000000000..a7dfd6d485
Binary files /dev/null and b/public/images/templates/atlantis/Static.png differ
diff --git a/public/images/templates/atlantis/atlantis-features2-mobile.png b/public/images/templates/atlantis/atlantis-features2-mobile.png
new file mode 100644
index 0000000000..76977183d5
Binary files /dev/null and b/public/images/templates/atlantis/atlantis-features2-mobile.png differ
diff --git a/public/images/templates/atlantis/atlantis-features2-ready.png b/public/images/templates/atlantis/atlantis-features2-ready.png
new file mode 100644
index 0000000000..593b52e713
Binary files /dev/null and b/public/images/templates/atlantis/atlantis-features2-ready.png differ
diff --git a/public/images/templates/atlantis/atlantis-features2-responsive.png b/public/images/templates/atlantis/atlantis-features2-responsive.png
new file mode 100644
index 0000000000..faaa170e15
Binary files /dev/null and b/public/images/templates/atlantis/atlantis-features2-responsive.png differ
diff --git a/public/images/templates/atlantis/atlantis-hero-dashboard1.png b/public/images/templates/atlantis/atlantis-hero-dashboard1.png
new file mode 100644
index 0000000000..fe1158a2af
Binary files /dev/null and b/public/images/templates/atlantis/atlantis-hero-dashboard1.png differ
diff --git a/public/images/templates/atlantis/atlantis-hero-dashboard2.png b/public/images/templates/atlantis/atlantis-hero-dashboard2.png
new file mode 100644
index 0000000000..f6f3bc3446
Binary files /dev/null and b/public/images/templates/atlantis/atlantis-hero-dashboard2.png differ
diff --git a/public/images/templates/atlantis/atlantis-hero-logo.svg b/public/images/templates/atlantis/atlantis-hero-logo.svg
new file mode 100644
index 0000000000..4f213a7e5c
--- /dev/null
+++ b/public/images/templates/atlantis/atlantis-hero-logo.svg
@@ -0,0 +1,11 @@
+<svg width="149" height="40" viewBox="0 0 149 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.3651 24.0154H61.2671L59.6707 27.7636H56.5703L63.8585 11.5677H66.82L74.1313 27.7636H70.9847L69.3651 24.0154ZM68.3702 21.6555L65.3161 14.5755L62.2852 21.6555H68.3702Z" fill="white"/>
+<path d="M83.2274 27.0927C82.8881 27.3703 82.4716 27.5785 81.978 27.7174C81.4998 27.8562 80.9908 27.9256 80.451 27.9256C79.0936 27.9256 78.0447 27.5708 77.3043 26.8613C76.5639 26.1518 76.1938 25.1183 76.1938 23.7609V17.8147H74.1577V15.501H76.1938V12.6783H79.0859V15.501H82.3945V17.8147H79.0859V23.6915C79.0859 24.2931 79.2324 24.7558 79.5255 25.0797C79.8186 25.3882 80.2427 25.5425 80.798 25.5425C81.4459 25.5425 81.9857 25.3728 82.4176 25.0335L83.2274 27.0927Z" fill="white"/>
+<path d="M85.6065 10.596H88.4987V27.7636H85.6065V10.596Z" fill="white"/>
+<path d="M97.0145 15.2696C98.8346 15.2696 100.223 15.7092 101.179 16.5885C102.151 17.4522 102.637 18.7633 102.637 20.5217V27.7636H99.9067V26.2597C99.5519 26.7996 99.0429 27.2161 98.3796 27.5091C97.7318 27.7868 96.9451 27.9256 96.0196 27.9256C95.0942 27.9256 94.2844 27.7713 93.5903 27.4628C92.8961 27.1389 92.3563 26.6993 91.9707 26.144C91.6005 25.5733 91.4154 24.9332 91.4154 24.2237C91.4154 23.1131 91.8241 22.2262 92.6416 21.5629C93.4746 20.8842 94.778 20.5449 96.5518 20.5449H99.7447V20.3598C99.7447 19.496 99.4825 18.8327 98.958 18.37C98.449 17.9073 97.6855 17.6759 96.6675 17.6759C95.9734 17.6759 95.287 17.7839 94.6083 17.9998C93.945 18.2158 93.382 18.5165 92.9193 18.9022L91.7856 16.7967C92.4334 16.3031 93.2123 15.9252 94.1224 15.663C95.0325 15.4008 95.9965 15.2696 97.0145 15.2696ZM96.6212 25.8201C97.3462 25.8201 97.9863 25.6582 98.5416 25.3342C99.1123 24.9949 99.5133 24.5167 99.7447 23.8997V22.4653H96.76C95.0942 22.4653 94.2612 23.0128 94.2612 24.108C94.2612 24.6324 94.4695 25.0489 94.8859 25.3574C95.3024 25.6659 95.8808 25.8201 96.6212 25.8201Z" fill="white"/>
+<path d="M113.359 15.2696C114.917 15.2696 116.166 15.7247 117.107 16.6347C118.048 17.5448 118.519 18.8944 118.519 20.6837V27.7636H115.626V21.0539C115.626 19.9742 115.372 19.1644 114.863 18.6245C114.354 18.0692 113.629 17.7916 112.688 17.7916C111.624 17.7916 110.783 18.1155 110.166 18.7633C109.549 19.3957 109.241 20.3135 109.241 21.5166V27.7636H106.349V15.4085H109.102V17.0049C109.58 16.4342 110.182 16.0023 110.907 15.7092C111.631 15.4162 112.449 15.2696 113.359 15.2696Z" fill="white"/>
+<path d="M129.614 27.0927C129.275 27.3703 128.859 27.5785 128.365 27.7174C127.887 27.8562 127.378 27.9256 126.838 27.9256C125.481 27.9256 124.432 27.5708 123.691 26.8613C122.951 26.1518 122.581 25.1183 122.581 23.7609V17.8147H120.545V15.501H122.581V12.6783H125.473V15.501H128.781V17.8147H125.473V23.6915C125.473 24.2931 125.619 24.7558 125.912 25.0797C126.206 25.3882 126.63 25.5425 127.185 25.5425C127.833 25.5425 128.373 25.3728 128.805 25.0335L129.614 27.0927Z" fill="white"/>
+<path d="M131.994 15.4085H134.886V27.7636H131.994V15.4085ZM133.451 13.3724C132.927 13.3724 132.487 13.2104 132.132 12.8865C131.778 12.5472 131.6 12.1307 131.6 11.6371C131.6 11.1435 131.778 10.7348 132.132 10.4109C132.487 10.0715 132.927 9.90186 133.451 9.90186C133.976 9.90186 134.415 10.0638 134.77 10.3877C135.125 10.6962 135.302 11.0896 135.302 11.5677C135.302 12.0767 135.125 12.5086 134.77 12.8634C134.431 13.2027 133.991 13.3724 133.451 13.3724Z" fill="white"/>
+<path d="M142.499 27.9256C141.497 27.9256 140.517 27.7945 139.561 27.5323C138.604 27.27 137.841 26.9384 137.27 26.5374L138.381 24.3394C138.936 24.7095 139.599 25.0103 140.371 25.2417C141.157 25.4576 141.928 25.5656 142.684 25.5656C144.412 25.5656 145.276 25.1106 145.276 24.2005C145.276 23.7686 145.052 23.4679 144.605 23.2982C144.173 23.1285 143.471 22.9666 142.499 22.8123C141.481 22.6581 140.648 22.4807 140 22.2802C139.368 22.0796 138.813 21.7326 138.335 21.239C137.872 20.73 137.64 20.0282 137.64 19.1335C137.64 17.9612 138.126 17.0281 139.098 16.3339C140.085 15.6244 141.412 15.2696 143.078 15.2696C143.926 15.2696 144.774 15.3699 145.623 15.5704C146.471 15.7555 147.165 16.01 147.705 16.3339L146.594 18.532C145.546 17.915 144.366 17.6065 143.054 17.6065C142.206 17.6065 141.558 17.7376 141.111 17.9998C140.679 18.2466 140.463 18.5782 140.463 18.9947C140.463 19.4574 140.694 19.7891 141.157 19.9896C141.635 20.1747 142.368 20.3521 143.355 20.5217C144.342 20.676 145.152 20.8534 145.785 21.0539C146.417 21.2544 146.957 21.5938 147.404 22.0719C147.867 22.5501 148.098 23.2288 148.098 24.108C148.098 25.2648 147.597 26.1903 146.594 26.8844C145.592 27.5785 144.227 27.9256 142.499 27.9256Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5733 7.44072C12.9176 19.8152 31.0475 19.8063 32.3873 7.44072C27.7447 7.01325 23.8187 4.07436 21.9803 0C20.142 4.07436 16.216 7.01325 11.5733 7.44072ZM20.814 19.0181C20.4089 23.4977 16.8435 27.4073 12.4234 28.2266C6.44984 29.469 0.529697 25.0028 0 19.0181C4.64264 18.5907 8.56863 15.6518 10.407 11.5774C12.232 15.683 16.3316 18.6397 20.814 19.0181ZM32.3873 30.5956C31.8532 35.8677 27.3886 40 21.9803 40C16.5721 40 12.1075 35.8677 11.5733 30.5956C16.0557 30.2171 20.1553 27.2604 21.9803 23.1548C23.8053 27.2604 27.9049 30.2171 32.3873 30.5956ZM43.9603 19.0181C43.4261 24.6198 38.3028 28.9346 32.6007 28.378C27.74 28.0085 23.5736 23.8762 23.1463 19.0181C27.6287 18.6397 31.7283 15.683 33.5533 11.5774C35.3917 15.6518 39.3177 18.5907 43.9603 19.0181Z" fill="white"/>
+</svg>
diff --git a/public/images/templates/atlantis/atlantis-hero-pattern.png b/public/images/templates/atlantis/atlantis-hero-pattern.png
new file mode 100644
index 0000000000..d525c82f5e
Binary files /dev/null and b/public/images/templates/atlantis/atlantis-hero-pattern.png differ
diff --git a/public/images/templates/atlantis/atlantis-youtube-screen.png b/public/images/templates/atlantis/atlantis-youtube-screen.png
new file mode 100644
index 0000000000..1d32cd7105
Binary files /dev/null and b/public/images/templates/atlantis/atlantis-youtube-screen.png differ
diff --git a/public/images/templates/atlantis/features-animation-component-themes.png b/public/images/templates/atlantis/features-animation-component-themes.png
new file mode 100644
index 0000000000..195c0565f7
Binary files /dev/null and b/public/images/templates/atlantis/features-animation-component-themes.png differ
diff --git a/public/images/templates/atlantis/features-animation-darkmode.png b/public/images/templates/atlantis/features-animation-darkmode.png
new file mode 100644
index 0000000000..a750d7fb9e
Binary files /dev/null and b/public/images/templates/atlantis/features-animation-darkmode.png differ
diff --git a/public/images/templates/atlantis/features-animation-figma.png b/public/images/templates/atlantis/features-animation-figma.png
new file mode 100644
index 0000000000..db476b62b7
Binary files /dev/null and b/public/images/templates/atlantis/features-animation-figma.png differ
diff --git a/public/images/templates/atlantis/features-animation-orientations.png b/public/images/templates/atlantis/features-animation-orientations.png
new file mode 100644
index 0000000000..ab04054129
Binary files /dev/null and b/public/images/templates/atlantis/features-animation-orientations.png differ
diff --git a/public/images/templates/avalon-react.jpg b/public/images/templates/avalon-react.jpg
new file mode 100644
index 0000000000..8dfaaa2d25
Binary files /dev/null and b/public/images/templates/avalon-react.jpg differ
diff --git a/public/images/templates/avalon/Drawer.png b/public/images/templates/avalon/Drawer.png
new file mode 100644
index 0000000000..3e9728ffab
Binary files /dev/null and b/public/images/templates/avalon/Drawer.png differ
diff --git a/public/images/templates/avalon/Horizontal.png b/public/images/templates/avalon/Horizontal.png
new file mode 100644
index 0000000000..8844b0e738
Binary files /dev/null and b/public/images/templates/avalon/Horizontal.png differ
diff --git a/public/images/templates/avalon/Overlay.png b/public/images/templates/avalon/Overlay.png
new file mode 100644
index 0000000000..3e99da9915
Binary files /dev/null and b/public/images/templates/avalon/Overlay.png differ
diff --git a/public/images/templates/avalon/Reveal.png b/public/images/templates/avalon/Reveal.png
new file mode 100644
index 0000000000..a80d05d254
Binary files /dev/null and b/public/images/templates/avalon/Reveal.png differ
diff --git a/public/images/templates/avalon/Slim+.png b/public/images/templates/avalon/Slim+.png
new file mode 100644
index 0000000000..b3aea995bf
Binary files /dev/null and b/public/images/templates/avalon/Slim+.png differ
diff --git a/public/images/templates/avalon/Slim.png b/public/images/templates/avalon/Slim.png
new file mode 100644
index 0000000000..ab7843720c
Binary files /dev/null and b/public/images/templates/avalon/Slim.png differ
diff --git a/public/images/templates/avalon/Static.png b/public/images/templates/avalon/Static.png
new file mode 100644
index 0000000000..11e024fcb9
Binary files /dev/null and b/public/images/templates/avalon/Static.png differ
diff --git a/public/images/templates/avalon/avalon-features1-feature1.png b/public/images/templates/avalon/avalon-features1-feature1.png
new file mode 100644
index 0000000000..b3dd86f734
Binary files /dev/null and b/public/images/templates/avalon/avalon-features1-feature1.png differ
diff --git a/public/images/templates/avalon/avalon-features1-feature2.png b/public/images/templates/avalon/avalon-features1-feature2.png
new file mode 100644
index 0000000000..f63e6927a1
Binary files /dev/null and b/public/images/templates/avalon/avalon-features1-feature2.png differ
diff --git a/public/images/templates/avalon/avalon-features1-feature3.png b/public/images/templates/avalon/avalon-features1-feature3.png
new file mode 100644
index 0000000000..bc8989ce55
Binary files /dev/null and b/public/images/templates/avalon/avalon-features1-feature3.png differ
diff --git a/public/images/templates/avalon/avalon-features2-mobile.png b/public/images/templates/avalon/avalon-features2-mobile.png
new file mode 100644
index 0000000000..f8e1e60f66
Binary files /dev/null and b/public/images/templates/avalon/avalon-features2-mobile.png differ
diff --git a/public/images/templates/avalon/avalon-features2-responsive.png b/public/images/templates/avalon/avalon-features2-responsive.png
new file mode 100644
index 0000000000..101173e60f
Binary files /dev/null and b/public/images/templates/avalon/avalon-features2-responsive.png differ
diff --git a/public/images/templates/avalon/avalon-hero-dashboard1.png b/public/images/templates/avalon/avalon-hero-dashboard1.png
new file mode 100644
index 0000000000..da3610612c
Binary files /dev/null and b/public/images/templates/avalon/avalon-hero-dashboard1.png differ
diff --git a/public/images/templates/avalon/avalon-hero-dashboard2.png b/public/images/templates/avalon/avalon-hero-dashboard2.png
new file mode 100644
index 0000000000..ed91cbfdb6
Binary files /dev/null and b/public/images/templates/avalon/avalon-hero-dashboard2.png differ
diff --git a/public/images/templates/avalon/avalon-hero-pattern.png b/public/images/templates/avalon/avalon-hero-pattern.png
new file mode 100644
index 0000000000..91cce8cdb1
Binary files /dev/null and b/public/images/templates/avalon/avalon-hero-pattern.png differ
diff --git a/public/images/templates/avalon/features-animation-component-themes.png b/public/images/templates/avalon/features-animation-component-themes.png
new file mode 100644
index 0000000000..01d2c032f4
Binary files /dev/null and b/public/images/templates/avalon/features-animation-component-themes.png differ
diff --git a/public/images/templates/avalon/features-animation-darkmode.png b/public/images/templates/avalon/features-animation-darkmode.png
new file mode 100644
index 0000000000..035b688132
Binary files /dev/null and b/public/images/templates/avalon/features-animation-darkmode.png differ
diff --git a/public/images/templates/avalon/features-animation-figma.png b/public/images/templates/avalon/features-animation-figma.png
new file mode 100644
index 0000000000..30ac3af96c
Binary files /dev/null and b/public/images/templates/avalon/features-animation-figma.png differ
diff --git a/public/images/templates/avalon/features-animation-menu-themes.png b/public/images/templates/avalon/features-animation-menu-themes.png
new file mode 100644
index 0000000000..f912f7a71a
Binary files /dev/null and b/public/images/templates/avalon/features-animation-menu-themes.png differ
diff --git a/public/images/templates/babylon-react.jpg b/public/images/templates/babylon-react.jpg
new file mode 100644
index 0000000000..cd0402d322
Binary files /dev/null and b/public/images/templates/babylon-react.jpg differ
diff --git a/public/images/templates/babylon/Horizontal.png b/public/images/templates/babylon/Horizontal.png
new file mode 100644
index 0000000000..3666c643e9
Binary files /dev/null and b/public/images/templates/babylon/Horizontal.png differ
diff --git a/public/images/templates/babylon/Overlay.png b/public/images/templates/babylon/Overlay.png
new file mode 100644
index 0000000000..0ef12b2aa4
Binary files /dev/null and b/public/images/templates/babylon/Overlay.png differ
diff --git a/public/images/templates/babylon/Slim.png b/public/images/templates/babylon/Slim.png
new file mode 100644
index 0000000000..468fb33b1a
Binary files /dev/null and b/public/images/templates/babylon/Slim.png differ
diff --git a/public/images/templates/babylon/Static.png b/public/images/templates/babylon/Static.png
new file mode 100644
index 0000000000..de3180c1d5
Binary files /dev/null and b/public/images/templates/babylon/Static.png differ
diff --git a/public/images/templates/babylon/babylon-features2-mobile.png b/public/images/templates/babylon/babylon-features2-mobile.png
new file mode 100644
index 0000000000..f49a6a996e
Binary files /dev/null and b/public/images/templates/babylon/babylon-features2-mobile.png differ
diff --git a/public/images/templates/babylon/babylon-features2-ready.png b/public/images/templates/babylon/babylon-features2-ready.png
new file mode 100644
index 0000000000..2aa9058273
Binary files /dev/null and b/public/images/templates/babylon/babylon-features2-ready.png differ
diff --git a/public/images/templates/babylon/babylon-features2-responsive.png b/public/images/templates/babylon/babylon-features2-responsive.png
new file mode 100644
index 0000000000..2d0effbd46
Binary files /dev/null and b/public/images/templates/babylon/babylon-features2-responsive.png differ
diff --git a/public/images/templates/babylon/babylon-hero-dashboard1.png b/public/images/templates/babylon/babylon-hero-dashboard1.png
new file mode 100644
index 0000000000..aff4e0d555
Binary files /dev/null and b/public/images/templates/babylon/babylon-hero-dashboard1.png differ
diff --git a/public/images/templates/babylon/babylon-hero-dashboard2.png b/public/images/templates/babylon/babylon-hero-dashboard2.png
new file mode 100644
index 0000000000..2fb2b5a24f
Binary files /dev/null and b/public/images/templates/babylon/babylon-hero-dashboard2.png differ
diff --git a/public/images/templates/babylon/babylon-hero-pattern.png b/public/images/templates/babylon/babylon-hero-pattern.png
new file mode 100644
index 0000000000..649656d159
Binary files /dev/null and b/public/images/templates/babylon/babylon-hero-pattern.png differ
diff --git a/public/images/templates/babylon/features-animation-blocks.png b/public/images/templates/babylon/features-animation-blocks.png
new file mode 100644
index 0000000000..996d9c493a
Binary files /dev/null and b/public/images/templates/babylon/features-animation-blocks.png differ
diff --git a/public/images/templates/babylon/features-animation-component-themes.png b/public/images/templates/babylon/features-animation-component-themes.png
new file mode 100644
index 0000000000..cc3dc03773
Binary files /dev/null and b/public/images/templates/babylon/features-animation-component-themes.png differ
diff --git a/public/images/templates/babylon/features-animation-darkmode.png b/public/images/templates/babylon/features-animation-darkmode.png
new file mode 100644
index 0000000000..8bd83a41db
Binary files /dev/null and b/public/images/templates/babylon/features-animation-darkmode.png differ
diff --git a/public/images/templates/babylon/features-animation-icons.png b/public/images/templates/babylon/features-animation-icons.png
new file mode 100644
index 0000000000..4f71da26eb
Binary files /dev/null and b/public/images/templates/babylon/features-animation-icons.png differ
diff --git a/public/images/templates/babylon/features-animation-profile.png b/public/images/templates/babylon/features-animation-profile.png
new file mode 100644
index 0000000000..f724a042e4
Binary files /dev/null and b/public/images/templates/babylon/features-animation-profile.png differ
diff --git a/public/images/templates/babylon/features-animation-utilities.png b/public/images/templates/babylon/features-animation-utilities.png
new file mode 100644
index 0000000000..fc4554906e
Binary files /dev/null and b/public/images/templates/babylon/features-animation-utilities.png differ
diff --git a/public/images/templates/california/california-features2-mobile.png b/public/images/templates/california/california-features2-mobile.png
new file mode 100644
index 0000000000..457690e966
Binary files /dev/null and b/public/images/templates/california/california-features2-mobile.png differ
diff --git a/public/images/templates/california/california-features2-ready.png b/public/images/templates/california/california-features2-ready.png
new file mode 100644
index 0000000000..2e1a595113
Binary files /dev/null and b/public/images/templates/california/california-features2-ready.png differ
diff --git a/public/images/templates/california/california-features2-responsive.png b/public/images/templates/california/california-features2-responsive.png
new file mode 100644
index 0000000000..ac949ccbc2
Binary files /dev/null and b/public/images/templates/california/california-features2-responsive.png differ
diff --git a/public/images/templates/california/california-hero-dashboard1.png b/public/images/templates/california/california-hero-dashboard1.png
new file mode 100644
index 0000000000..1118ddfe71
Binary files /dev/null and b/public/images/templates/california/california-hero-dashboard1.png differ
diff --git a/public/images/templates/california/california-hero-dashboard2.png b/public/images/templates/california/california-hero-dashboard2.png
new file mode 100644
index 0000000000..c194f5dd32
Binary files /dev/null and b/public/images/templates/california/california-hero-dashboard2.png differ
diff --git a/public/images/templates/california/california-hero-pattern.png b/public/images/templates/california/california-hero-pattern.png
new file mode 100644
index 0000000000..c3699d395b
Binary files /dev/null and b/public/images/templates/california/california-hero-pattern.png differ
diff --git a/public/images/templates/california/california-intro.png b/public/images/templates/california/california-intro.png
new file mode 100644
index 0000000000..cd5b61674e
Binary files /dev/null and b/public/images/templates/california/california-intro.png differ
diff --git a/public/images/templates/california/features-animation-blocks.png b/public/images/templates/california/features-animation-blocks.png
new file mode 100644
index 0000000000..24445b5416
Binary files /dev/null and b/public/images/templates/california/features-animation-blocks.png differ
diff --git a/public/images/templates/california/features-animation-color.png b/public/images/templates/california/features-animation-color.png
new file mode 100644
index 0000000000..be020e69fb
Binary files /dev/null and b/public/images/templates/california/features-animation-color.png differ
diff --git a/public/images/templates/california/features-animation-icons.png b/public/images/templates/california/features-animation-icons.png
new file mode 100644
index 0000000000..01e5f815f8
Binary files /dev/null and b/public/images/templates/california/features-animation-icons.png differ
diff --git a/public/images/templates/california/features-animation-mega.png b/public/images/templates/california/features-animation-mega.png
new file mode 100644
index 0000000000..479b561039
Binary files /dev/null and b/public/images/templates/california/features-animation-mega.png differ
diff --git a/public/images/templates/california/features-animation-theme.png b/public/images/templates/california/features-animation-theme.png
new file mode 100644
index 0000000000..36d9e608b8
Binary files /dev/null and b/public/images/templates/california/features-animation-theme.png differ
diff --git a/public/images/templates/california/features-animation-utilities.png b/public/images/templates/california/features-animation-utilities.png
new file mode 100644
index 0000000000..831485cf50
Binary files /dev/null and b/public/images/templates/california/features-animation-utilities.png differ
diff --git a/public/images/templates/diamond-react.jpg b/public/images/templates/diamond-react.jpg
new file mode 100644
index 0000000000..fc8d4fbf8f
Binary files /dev/null and b/public/images/templates/diamond-react.jpg differ
diff --git a/public/images/templates/diamond/Compact.png b/public/images/templates/diamond/Compact.png
new file mode 100644
index 0000000000..d5e561df95
Binary files /dev/null and b/public/images/templates/diamond/Compact.png differ
diff --git a/public/images/templates/diamond/Drawer.png b/public/images/templates/diamond/Drawer.png
new file mode 100644
index 0000000000..1e7525c60b
Binary files /dev/null and b/public/images/templates/diamond/Drawer.png differ
diff --git a/public/images/templates/diamond/Horizontal.png b/public/images/templates/diamond/Horizontal.png
new file mode 100644
index 0000000000..8d755d753d
Binary files /dev/null and b/public/images/templates/diamond/Horizontal.png differ
diff --git a/public/images/templates/diamond/Overlay.png b/public/images/templates/diamond/Overlay.png
new file mode 100644
index 0000000000..1ca0633457
Binary files /dev/null and b/public/images/templates/diamond/Overlay.png differ
diff --git a/public/images/templates/diamond/Reveal.png b/public/images/templates/diamond/Reveal.png
new file mode 100644
index 0000000000..75481aa508
Binary files /dev/null and b/public/images/templates/diamond/Reveal.png differ
diff --git a/public/images/templates/diamond/Slim.png b/public/images/templates/diamond/Slim.png
new file mode 100644
index 0000000000..db908ffa08
Binary files /dev/null and b/public/images/templates/diamond/Slim.png differ
diff --git a/public/images/templates/diamond/Static.png b/public/images/templates/diamond/Static.png
new file mode 100644
index 0000000000..1ab370c7b4
Binary files /dev/null and b/public/images/templates/diamond/Static.png differ
diff --git a/public/images/templates/diamond/diamond-features2-mobile.png b/public/images/templates/diamond/diamond-features2-mobile.png
new file mode 100644
index 0000000000..104f113633
Binary files /dev/null and b/public/images/templates/diamond/diamond-features2-mobile.png differ
diff --git a/public/images/templates/diamond/diamond-features2-ready.png b/public/images/templates/diamond/diamond-features2-ready.png
new file mode 100644
index 0000000000..85167b59c6
Binary files /dev/null and b/public/images/templates/diamond/diamond-features2-ready.png differ
diff --git a/public/images/templates/diamond/diamond-features2-responsive.png b/public/images/templates/diamond/diamond-features2-responsive.png
new file mode 100644
index 0000000000..92d6f941fc
Binary files /dev/null and b/public/images/templates/diamond/diamond-features2-responsive.png differ
diff --git a/public/images/templates/diamond/diamond-hero-dashboard1.png b/public/images/templates/diamond/diamond-hero-dashboard1.png
new file mode 100644
index 0000000000..1fd61cb1df
Binary files /dev/null and b/public/images/templates/diamond/diamond-hero-dashboard1.png differ
diff --git a/public/images/templates/diamond/diamond-hero-dashboard2.png b/public/images/templates/diamond/diamond-hero-dashboard2.png
new file mode 100644
index 0000000000..c77544929d
Binary files /dev/null and b/public/images/templates/diamond/diamond-hero-dashboard2.png differ
diff --git a/public/images/templates/diamond/diamond-hero-logo.svg b/public/images/templates/diamond/diamond-hero-logo.svg
new file mode 100644
index 0000000000..7d1cfd22b1
--- /dev/null
+++ b/public/images/templates/diamond/diamond-hero-logo.svg
@@ -0,0 +1,11 @@
+<svg width="190" height="40" viewBox="0 0 190 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1048_115190)">
+<path d="M38.5201 15.0553C38.5201 15.0021 38.5201 15.0021 38.5727 14.9489C38.6252 14.8958 38.6252 14.7894 38.6252 14.7363C38.6252 14.6299 38.6252 14.5236 38.5727 14.4172L38.5201 14.3641C38.5201 14.3109 38.4676 14.3109 38.4676 14.2577L30.5847 3.62406C30.5321 3.5709 30.4796 3.51773 30.427 3.46456C30.3745 3.41139 30.3219 3.41139 30.2168 3.35822H30.1643C30.1117 3.35822 30.0066 3.30505 29.9541 3.30505H8.93301C8.88046 3.30505 8.77535 3.30505 8.7228 3.35822H8.67025C8.61769 3.35822 8.56514 3.41139 8.46003 3.46456C8.40748 3.51773 8.35493 3.5709 8.30238 3.62406L0.419484 14.2577C0.419484 14.3109 0.366932 14.3109 0.366932 14.3641L0.314379 14.4172C0.314379 14.4704 0.261827 14.5236 0.261827 14.5236C0.209274 14.6831 0.209274 14.7894 0.261827 14.9489C0.261827 15.0021 0.261827 15.0021 0.314379 15.0553C0.314379 15.1084 0.366932 15.1084 0.366932 15.1616L0.419484 15.2148L18.8129 36.4821H18.918C18.9706 36.5353 18.9706 36.5353 19.0231 36.5885L19.0757 36.6416L19.1808 36.6948H19.2333C19.3384 36.748 19.4961 36.748 19.6537 36.6948H19.7063L19.8114 36.6416L19.864 36.5885C19.9165 36.5353 19.9691 36.5353 19.9691 36.4821L20.0216 36.429L38.415 15.1616L38.4676 15.1084C38.5201 15.1084 38.5201 15.0553 38.5201 15.0553ZM10.1943 15.4806H28.6402L19.4435 34.1959L10.1943 15.4806ZM19.4435 5.16595L28.0622 13.8856H10.8249L19.4435 5.16595ZM36.2604 13.8856H30.7423V6.44199L36.2604 13.8856ZM29.1658 4.84694V12.769L21.3354 4.84694H29.1658ZM9.7213 12.769V4.84694H17.5516L9.7213 12.769ZM8.14472 6.44199V13.8856H2.62669L8.14472 6.44199ZM8.46003 15.4806L16.0276 30.74L2.78435 15.4806H8.46003ZM22.912 30.74L30.4796 15.4806H36.1553L22.912 30.74Z" fill="white"/>
+</g>
+<path d="M52.7389 30C52.3111 30 51.9806 29.8931 51.7473 29.6792C51.5334 29.4458 51.4264 29.1153 51.4264 28.6875V10.75C51.4264 10.3222 51.5334 10.0014 51.7473 9.78748C51.9806 9.55415 52.3111 9.43748 52.7389 9.43748H58.3681C61.6931 9.43748 64.2598 10.3125 66.0681 12.0625C67.8764 13.8125 68.7806 16.3597 68.7806 19.7042C68.7806 21.3764 68.5473 22.8542 68.0806 24.1375C67.6334 25.4014 66.9625 26.4708 66.0681 27.3458C65.1736 28.2208 64.0848 28.8819 62.8014 29.3292C61.5181 29.7764 60.0403 30 58.3681 30H52.7389ZM53.8181 27.9583H58.1931C59.5542 27.9583 60.7306 27.7833 61.7223 27.4333C62.7334 27.0833 63.5695 26.5681 64.2306 25.8875C64.9111 25.2069 65.4167 24.3514 65.7473 23.3208C66.0778 22.2708 66.2431 21.0653 66.2431 19.7042C66.2431 16.9625 65.5723 14.9111 64.2306 13.55C62.8889 12.1694 60.8764 11.4792 58.1931 11.4792H53.8181V27.9583ZM74.2694 30.2042C73.8805 30.2042 73.5791 30.0972 73.3652 29.8833C73.1708 29.65 73.0736 29.3389 73.0736 28.95V10.4875C73.0736 10.0792 73.1708 9.76804 73.3652 9.55415C73.5791 9.34026 73.8805 9.23332 74.2694 9.23332C74.6583 9.23332 74.95 9.34026 75.1444 9.55415C75.3583 9.76804 75.4652 10.0792 75.4652 10.4875V28.95C75.4652 29.3389 75.368 29.65 75.1736 29.8833C74.9791 30.0972 74.6777 30.2042 74.2694 30.2042ZM80.1271 30.2042C79.816 30.2042 79.5632 30.1361 79.3688 30C79.1938 29.8444 79.0868 29.65 79.048 29.4167C79.0285 29.1639 79.0868 28.8819 79.223 28.5708L87.2438 10.3125C87.4188 9.9236 87.623 9.65137 87.8563 9.49582C88.1091 9.32082 88.3813 9.23332 88.673 9.23332C88.9646 9.23332 89.2271 9.32082 89.4605 9.49582C89.7132 9.65137 89.9174 9.9236 90.073 10.3125L98.123 28.5708C98.2785 28.8819 98.3369 29.1639 98.298 29.4167C98.2785 29.6694 98.1813 29.8639 98.0063 30C97.8313 30.1361 97.5882 30.2042 97.2771 30.2042C96.9271 30.2042 96.6452 30.1167 96.4313 29.9417C96.2174 29.7472 96.0424 29.475 95.9063 29.125L93.748 24.1375L94.9146 24.75H82.373L83.5688 24.1375L81.4396 29.125C81.2646 29.4944 81.0799 29.7667 80.8855 29.9417C80.691 30.1167 80.4382 30.2042 80.1271 30.2042ZM88.6438 12.2375L83.948 23.2917L83.248 22.7375H94.0396L93.398 23.2917L88.7021 12.2375H88.6438ZM102.98 30.2042C102.63 30.2042 102.357 30.1069 102.163 29.9125C101.969 29.6986 101.871 29.4069 101.871 29.0375V10.4C101.871 10.0111 101.969 9.71943 102.163 9.52498C102.357 9.33054 102.63 9.23332 102.98 9.23332C103.291 9.23332 103.534 9.30137 103.709 9.43748C103.903 9.55415 104.078 9.75832 104.234 10.05L112.226 25.1H111.351L119.313 10.05C119.469 9.75832 119.634 9.55415 119.809 9.43748C119.984 9.30137 120.237 9.23332 120.567 9.23332C120.898 9.23332 121.16 9.33054 121.355 9.52498C121.549 9.71943 121.646 10.0111 121.646 10.4V29.0375C121.646 29.4069 121.549 29.6986 121.355 29.9125C121.18 30.1069 120.907 30.2042 120.538 30.2042C120.188 30.2042 119.916 30.1069 119.721 29.9125C119.527 29.6986 119.43 29.4069 119.43 29.0375V12.6458H120.13L112.838 26.325C112.702 26.5778 112.556 26.7625 112.401 26.8792C112.264 26.9764 112.06 27.025 111.788 27.025C111.516 27.025 111.302 26.9667 111.146 26.85C110.991 26.7333 110.855 26.5583 110.738 26.325L103.359 12.6167H104.059V29.0375C104.059 29.4069 103.962 29.6986 103.767 29.9125C103.592 30.1069 103.33 30.2042 102.98 30.2042ZM135.398 30.2625C133.492 30.2625 131.829 29.8347 130.41 28.9792C129.01 28.1042 127.921 26.8792 127.143 25.3042C126.385 23.7292 126.006 21.8625 126.006 19.7042C126.006 18.0708 126.22 16.6125 126.648 15.3292C127.095 14.0264 127.727 12.9278 128.543 12.0333C129.36 11.1194 130.342 10.4194 131.489 9.93332C132.656 9.42776 133.959 9.17498 135.398 9.17498C137.342 9.17498 139.014 9.60276 140.414 10.4583C141.834 11.3139 142.923 12.5292 143.681 14.1042C144.459 15.6597 144.848 17.5167 144.848 19.675C144.848 21.3083 144.624 22.7764 144.177 24.0792C143.729 25.3819 143.098 26.4903 142.281 27.4042C141.464 28.3181 140.473 29.0278 139.306 29.5333C138.159 30.0194 136.856 30.2625 135.398 30.2625ZM135.398 28.1333C136.875 28.1333 138.12 27.8028 139.131 27.1417C140.161 26.4806 140.949 25.5181 141.493 24.2542C142.038 22.9903 142.31 21.4736 142.31 19.7042C142.31 17.0403 141.707 14.9792 140.502 13.5208C139.316 12.043 137.614 11.3042 135.398 11.3042C133.959 11.3042 132.724 11.6347 131.693 12.2958C130.682 12.9569 129.904 13.9194 129.36 15.1833C128.816 16.4278 128.543 17.9347 128.543 19.7042C128.543 22.3486 129.146 24.4194 130.352 25.9167C131.557 27.3944 133.239 28.1333 135.398 28.1333ZM150.261 30.2042C149.891 30.2042 149.61 30.1069 149.415 29.9125C149.221 29.6986 149.123 29.3972 149.123 29.0083V10.4583C149.123 10.0694 149.221 9.76804 149.415 9.55415C149.61 9.34026 149.862 9.23332 150.173 9.23332C150.485 9.23332 150.708 9.29165 150.844 9.40832C151 9.50554 151.175 9.69026 151.369 9.96248L164.086 26.9083H163.386V10.4C163.386 10.0305 163.483 9.7486 163.678 9.55415C163.872 9.34026 164.154 9.23332 164.523 9.23332C164.873 9.23332 165.136 9.34026 165.311 9.55415C165.505 9.7486 165.603 10.0305 165.603 10.4V29.0375C165.603 29.4069 165.515 29.6986 165.34 29.9125C165.185 30.1069 164.951 30.2042 164.64 30.2042C164.348 30.2042 164.115 30.1458 163.94 30.0292C163.765 29.9125 163.58 29.7278 163.386 29.475L150.698 12.5292H151.369V29.0083C151.369 29.3972 151.272 29.6986 151.078 29.9125C150.883 30.1069 150.611 30.2042 150.261 30.2042ZM172.026 30C171.598 30 171.268 29.8931 171.034 29.6792C170.821 29.4458 170.714 29.1153 170.714 28.6875V10.75C170.714 10.3222 170.821 10.0014 171.034 9.78748C171.268 9.55415 171.598 9.43748 172.026 9.43748H177.655C180.98 9.43748 183.547 10.3125 185.355 12.0625C187.164 13.8125 188.068 16.3597 188.068 19.7042C188.068 21.3764 187.834 22.8542 187.368 24.1375C186.921 25.4014 186.25 26.4708 185.355 27.3458C184.461 28.2208 183.372 28.8819 182.089 29.3292C180.805 29.7764 179.327 30 177.655 30H172.026ZM173.105 27.9583H177.48C178.841 27.9583 180.018 27.7833 181.009 27.4333C182.021 27.0833 182.857 26.5681 183.518 25.8875C184.198 25.2069 184.704 24.3514 185.034 23.3208C185.365 22.2708 185.53 21.0653 185.53 19.7042C185.53 16.9625 184.859 14.9111 183.518 13.55C182.176 12.1694 180.164 11.4792 177.48 11.4792H173.105V27.9583Z" fill="white"/>
+<defs>
+<clipPath id="clip0_1048_115190">
+<rect width="38.8889" height="34.0278" fill="white" transform="translate(0 2.98608)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/templates/diamond/diamond-hero-pattern.png b/public/images/templates/diamond/diamond-hero-pattern.png
new file mode 100644
index 0000000000..15d0e60c70
Binary files /dev/null and b/public/images/templates/diamond/diamond-hero-pattern.png differ
diff --git a/public/images/templates/diamond/diamond-youtube-screen.png b/public/images/templates/diamond/diamond-youtube-screen.png
new file mode 100644
index 0000000000..cbbeb1ae90
Binary files /dev/null and b/public/images/templates/diamond/diamond-youtube-screen.png differ
diff --git a/public/images/templates/diamond/features-animation-component-themes.png b/public/images/templates/diamond/features-animation-component-themes.png
new file mode 100644
index 0000000000..f4687fd0b3
Binary files /dev/null and b/public/images/templates/diamond/features-animation-component-themes.png differ
diff --git a/public/images/templates/diamond/features-animation-darkmode.png b/public/images/templates/diamond/features-animation-darkmode.png
new file mode 100644
index 0000000000..4e14f1f26f
Binary files /dev/null and b/public/images/templates/diamond/features-animation-darkmode.png differ
diff --git a/public/images/templates/diamond/features-animation-figma.png b/public/images/templates/diamond/features-animation-figma.png
new file mode 100644
index 0000000000..86e5554192
Binary files /dev/null and b/public/images/templates/diamond/features-animation-figma.png differ
diff --git a/public/images/templates/diamond/features-animation-orientations.png b/public/images/templates/diamond/features-animation-orientations.png
new file mode 100644
index 0000000000..6666f8d5c6
Binary files /dev/null and b/public/images/templates/diamond/features-animation-orientations.png differ
diff --git a/public/images/templates/freya-react.jpg b/public/images/templates/freya-react.jpg
new file mode 100644
index 0000000000..6e1ebbb1a3
Binary files /dev/null and b/public/images/templates/freya-react.jpg differ
diff --git a/public/images/templates/freya/Drawer.png b/public/images/templates/freya/Drawer.png
new file mode 100644
index 0000000000..ad70ba3572
Binary files /dev/null and b/public/images/templates/freya/Drawer.png differ
diff --git a/public/images/templates/freya/Horizontal.png b/public/images/templates/freya/Horizontal.png
new file mode 100644
index 0000000000..b9f2077e3b
Binary files /dev/null and b/public/images/templates/freya/Horizontal.png differ
diff --git a/public/images/templates/freya/Overlay.png b/public/images/templates/freya/Overlay.png
new file mode 100644
index 0000000000..f47b6566d0
Binary files /dev/null and b/public/images/templates/freya/Overlay.png differ
diff --git a/public/images/templates/freya/Reveal.png b/public/images/templates/freya/Reveal.png
new file mode 100644
index 0000000000..bd2e65e89b
Binary files /dev/null and b/public/images/templates/freya/Reveal.png differ
diff --git a/public/images/templates/freya/Slim+.png b/public/images/templates/freya/Slim+.png
new file mode 100644
index 0000000000..edd89352c4
Binary files /dev/null and b/public/images/templates/freya/Slim+.png differ
diff --git a/public/images/templates/freya/Slim.png b/public/images/templates/freya/Slim.png
new file mode 100644
index 0000000000..db9a8792f9
Binary files /dev/null and b/public/images/templates/freya/Slim.png differ
diff --git a/public/images/templates/freya/Static.png b/public/images/templates/freya/Static.png
new file mode 100644
index 0000000000..3a3ed89b30
Binary files /dev/null and b/public/images/templates/freya/Static.png differ
diff --git a/public/images/templates/freya/features-animation-component-themes.png b/public/images/templates/freya/features-animation-component-themes.png
new file mode 100644
index 0000000000..275463880a
Binary files /dev/null and b/public/images/templates/freya/features-animation-component-themes.png differ
diff --git a/public/images/templates/freya/features-animation-darkmode.png b/public/images/templates/freya/features-animation-darkmode.png
new file mode 100644
index 0000000000..7d868b4edd
Binary files /dev/null and b/public/images/templates/freya/features-animation-darkmode.png differ
diff --git a/public/images/templates/freya/features-animation-figma.png b/public/images/templates/freya/features-animation-figma.png
new file mode 100644
index 0000000000..cba904893d
Binary files /dev/null and b/public/images/templates/freya/features-animation-figma.png differ
diff --git a/public/images/templates/freya/freya-features2-mobile.png b/public/images/templates/freya/freya-features2-mobile.png
new file mode 100644
index 0000000000..89daafc6e1
Binary files /dev/null and b/public/images/templates/freya/freya-features2-mobile.png differ
diff --git a/public/images/templates/freya/freya-features2-ready.png b/public/images/templates/freya/freya-features2-ready.png
new file mode 100644
index 0000000000..bc36bfda2b
Binary files /dev/null and b/public/images/templates/freya/freya-features2-ready.png differ
diff --git a/public/images/templates/freya/freya-features2-responsive.png b/public/images/templates/freya/freya-features2-responsive.png
new file mode 100644
index 0000000000..8e4949ba52
Binary files /dev/null and b/public/images/templates/freya/freya-features2-responsive.png differ
diff --git a/public/images/templates/freya/freya-hero-dashboard1.png b/public/images/templates/freya/freya-hero-dashboard1.png
new file mode 100644
index 0000000000..22c0b7f187
Binary files /dev/null and b/public/images/templates/freya/freya-hero-dashboard1.png differ
diff --git a/public/images/templates/freya/freya-hero-dashboard2.png b/public/images/templates/freya/freya-hero-dashboard2.png
new file mode 100644
index 0000000000..5184f999ae
Binary files /dev/null and b/public/images/templates/freya/freya-hero-dashboard2.png differ
diff --git a/public/images/templates/freya/freya-hero-logo.svg b/public/images/templates/freya/freya-hero-logo.svg
new file mode 100644
index 0000000000..8760d19995
--- /dev/null
+++ b/public/images/templates/freya/freya-hero-logo.svg
@@ -0,0 +1,14 @@
+<svg width="139" height="40" viewBox="0 0 139 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo">
+<g id="Page-1">
+<g id="logo-freya">
+<path id="Path" d="M0 0H10.5065V6.75772L29.7675 2.94574V11.7829L10.5065 15.5949V18.5407L29.7675 14.7287V23.5659L10.5065 27.3779V35.3488H0V0Z" fill="white"/>
+<path id="Path_2" d="M56.124 14.0885H51.6603V12.8153C51.6603 11.825 52.2227 11.2591 53.2068 11.2591H56.0889V6.20166H51.5197C47.5129 6.20166 45.4041 8.42978 45.4041 12.2848V14.0885H42.1705L42.2057 19.2521H45.3338V32.8683H51.8712V19.2521H56.124V14.0885Z" fill="white"/>
+<path id="Path_3" d="M69.8662 13.6433C67.611 13.6433 65.9902 14.2818 64.6512 15.8425L63.6294 13.7143H59.2249V32.8681H65.7788V23.1493C65.7788 20.7019 66.7654 19.6732 69.0557 19.6732H71.628V13.6433H69.8662Z" fill="white"/>
+<path id="Shape" d="M94.2636 22.9079C94.2636 17.3697 90.0799 13.0232 84.0136 13.0232C78.0867 13.0232 73.7985 17.2996 73.7985 23.0832C73.7985 28.8668 78.1216 33.1782 84.0136 33.1782C88.7202 33.1782 92.5553 30.4792 93.8801 26.1678H87.3954C86.8027 27.2895 85.5127 27.9554 84.0136 27.9554C81.9566 27.9554 80.5969 26.8338 80.1786 24.6605H94.159C94.2287 24.0646 94.2636 23.5038 94.2636 22.9079ZM84.0136 18.1408C85.966 18.1408 87.3257 19.1573 87.8835 21.0502H80.2832C80.8061 19.1573 82.1309 18.1408 84.0136 18.1408Z" fill="white"/>
+<path id="Path_4" d="M109.533 13.6433L105.758 24.2429L101.701 13.6433H94.5737L102.441 31.2855C101.559 33.6686 100.819 34.3444 98.3135 34.3444H96.4789V39.9999H98.7369C103.676 39.9999 106.005 37.9013 108.58 31.9969L116.589 13.6433H109.533Z" fill="white"/>
+<path id="Shape_2" d="M133.387 13.585L132.716 15.0598C131.163 13.7606 129.15 13.0232 126.891 13.0232C121.065 13.0232 116.899 17.2017 116.899 23.0656C116.899 28.9646 121.065 33.1782 126.891 33.1782C129.115 33.1782 131.092 32.476 132.646 31.2119L133.211 32.5462H138.295V13.585H133.387ZM127.774 27.4196C125.302 27.4196 123.501 25.5586 123.501 23.0656C123.501 20.6077 125.302 18.7818 127.774 18.7818C130.245 18.7818 132.046 20.6077 132.046 23.0656C132.046 25.5586 130.245 27.4196 127.774 27.4196Z" fill="white"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/public/images/templates/freya/freya-hero-pattern.png b/public/images/templates/freya/freya-hero-pattern.png
new file mode 100644
index 0000000000..300ededbb7
Binary files /dev/null and b/public/images/templates/freya/freya-hero-pattern.png differ
diff --git a/public/images/templates/freya/freya-youtube-screen.png b/public/images/templates/freya/freya-youtube-screen.png
new file mode 100644
index 0000000000..d0829bdac7
Binary files /dev/null and b/public/images/templates/freya/freya-youtube-screen.png differ
diff --git a/public/images/templates/genesis/animation-dark-light-modes.png b/public/images/templates/genesis/animation-dark-light-modes.png
new file mode 100644
index 0000000000..d38130cf03
Binary files /dev/null and b/public/images/templates/genesis/animation-dark-light-modes.png differ
diff --git a/public/images/templates/genesis/animation-figma.png b/public/images/templates/genesis/animation-figma.png
new file mode 100644
index 0000000000..a7a393d52c
Binary files /dev/null and b/public/images/templates/genesis/animation-figma.png differ
diff --git a/public/images/templates/genesis/animation-landing-pages.png b/public/images/templates/genesis/animation-landing-pages.png
new file mode 100644
index 0000000000..48174b41a2
Binary files /dev/null and b/public/images/templates/genesis/animation-landing-pages.png differ
diff --git a/public/images/templates/genesis/animation-menu-themes.png b/public/images/templates/genesis/animation-menu-themes.png
new file mode 100644
index 0000000000..5897748a34
Binary files /dev/null and b/public/images/templates/genesis/animation-menu-themes.png differ
diff --git a/public/images/templates/genesis/animation-second-pages.png b/public/images/templates/genesis/animation-second-pages.png
new file mode 100644
index 0000000000..af719de80d
Binary files /dev/null and b/public/images/templates/genesis/animation-second-pages.png differ
diff --git a/public/images/templates/genesis/animation-tailwind.png b/public/images/templates/genesis/animation-tailwind.png
new file mode 100644
index 0000000000..bb58abaa24
Binary files /dev/null and b/public/images/templates/genesis/animation-tailwind.png differ
diff --git a/public/images/templates/genesis/dashboard-1.png b/public/images/templates/genesis/dashboard-1.png
new file mode 100644
index 0000000000..a88d7af71e
Binary files /dev/null and b/public/images/templates/genesis/dashboard-1.png differ
diff --git a/public/images/templates/genesis/dashboard-2.png b/public/images/templates/genesis/dashboard-2.png
new file mode 100644
index 0000000000..6d10a40536
Binary files /dev/null and b/public/images/templates/genesis/dashboard-2.png differ
diff --git a/public/images/templates/genesis/fully-responsive.png b/public/images/templates/genesis/fully-responsive.png
new file mode 100644
index 0000000000..8e828d2786
Binary files /dev/null and b/public/images/templates/genesis/fully-responsive.png differ
diff --git a/public/images/templates/genesis/hero-pattern.png b/public/images/templates/genesis/hero-pattern.png
new file mode 100644
index 0000000000..ec59897fb3
Binary files /dev/null and b/public/images/templates/genesis/hero-pattern.png differ
diff --git a/public/images/templates/genesis/horizontal-features-img-1.png b/public/images/templates/genesis/horizontal-features-img-1.png
new file mode 100644
index 0000000000..d118ea5d96
Binary files /dev/null and b/public/images/templates/genesis/horizontal-features-img-1.png differ
diff --git a/public/images/templates/genesis/horizontal-features-img-2.png b/public/images/templates/genesis/horizontal-features-img-2.png
new file mode 100644
index 0000000000..7d80de9df1
Binary files /dev/null and b/public/images/templates/genesis/horizontal-features-img-2.png differ
diff --git a/public/images/templates/genesis/horizontal-features-img-3.png b/public/images/templates/genesis/horizontal-features-img-3.png
new file mode 100644
index 0000000000..7db2c3ebf8
Binary files /dev/null and b/public/images/templates/genesis/horizontal-features-img-3.png differ
diff --git a/public/images/templates/genesis/mobile-experience.png b/public/images/templates/genesis/mobile-experience.png
new file mode 100644
index 0000000000..d98be7784d
Binary files /dev/null and b/public/images/templates/genesis/mobile-experience.png differ
diff --git a/public/images/templates/poseidon/Horizontal.png b/public/images/templates/poseidon/Horizontal.png
new file mode 100644
index 0000000000..aaaa728e4f
Binary files /dev/null and b/public/images/templates/poseidon/Horizontal.png differ
diff --git a/public/images/templates/poseidon/Overlay.png b/public/images/templates/poseidon/Overlay.png
new file mode 100644
index 0000000000..8cfea00b55
Binary files /dev/null and b/public/images/templates/poseidon/Overlay.png differ
diff --git a/public/images/templates/poseidon/Static.png b/public/images/templates/poseidon/Static.png
new file mode 100644
index 0000000000..2538706f51
Binary files /dev/null and b/public/images/templates/poseidon/Static.png differ
diff --git a/public/images/templates/poseidon/features-animation-component-themes.png b/public/images/templates/poseidon/features-animation-component-themes.png
new file mode 100644
index 0000000000..5c9f275662
Binary files /dev/null and b/public/images/templates/poseidon/features-animation-component-themes.png differ
diff --git a/public/images/templates/poseidon/features-animation-darkmode.png b/public/images/templates/poseidon/features-animation-darkmode.png
new file mode 100644
index 0000000000..7150392246
Binary files /dev/null and b/public/images/templates/poseidon/features-animation-darkmode.png differ
diff --git a/public/images/templates/poseidon/poseidon-features2-mobile.png b/public/images/templates/poseidon/poseidon-features2-mobile.png
new file mode 100644
index 0000000000..a7777764b3
Binary files /dev/null and b/public/images/templates/poseidon/poseidon-features2-mobile.png differ
diff --git a/public/images/templates/poseidon/poseidon-features2-ready.png b/public/images/templates/poseidon/poseidon-features2-ready.png
new file mode 100644
index 0000000000..53c4da8170
Binary files /dev/null and b/public/images/templates/poseidon/poseidon-features2-ready.png differ
diff --git a/public/images/templates/poseidon/poseidon-features2-responsive.png b/public/images/templates/poseidon/poseidon-features2-responsive.png
new file mode 100644
index 0000000000..720d7f9082
Binary files /dev/null and b/public/images/templates/poseidon/poseidon-features2-responsive.png differ
diff --git a/public/images/templates/poseidon/poseidon-hero-dashboard1.png b/public/images/templates/poseidon/poseidon-hero-dashboard1.png
new file mode 100644
index 0000000000..d6a84eeba4
Binary files /dev/null and b/public/images/templates/poseidon/poseidon-hero-dashboard1.png differ
diff --git a/public/images/templates/poseidon/poseidon-hero-dashboard2.png b/public/images/templates/poseidon/poseidon-hero-dashboard2.png
new file mode 100644
index 0000000000..ddbbeb4bc9
Binary files /dev/null and b/public/images/templates/poseidon/poseidon-hero-dashboard2.png differ
diff --git a/public/images/templates/poseidon/poseidon-hero-pattern.png b/public/images/templates/poseidon/poseidon-hero-pattern.png
new file mode 100644
index 0000000000..6a414cacd3
Binary files /dev/null and b/public/images/templates/poseidon/poseidon-hero-pattern.png differ
diff --git a/public/images/templates/react-3d-logo.png b/public/images/templates/react-3d-logo.png
new file mode 100644
index 0000000000..20c0085ed9
Binary files /dev/null and b/public/images/templates/react-3d-logo.png differ
diff --git a/public/images/templates/related-atlantis.png b/public/images/templates/related-atlantis.png
new file mode 100644
index 0000000000..7099efbcaa
Binary files /dev/null and b/public/images/templates/related-atlantis.png differ
diff --git a/public/images/templates/related-avalon.png b/public/images/templates/related-avalon.png
new file mode 100644
index 0000000000..e8f18500b6
Binary files /dev/null and b/public/images/templates/related-avalon.png differ
diff --git a/public/images/templates/related-diamond.png b/public/images/templates/related-diamond.png
new file mode 100644
index 0000000000..d9b170a996
Binary files /dev/null and b/public/images/templates/related-diamond.png differ
diff --git a/public/images/templates/roma-react.jpg b/public/images/templates/roma-react.jpg
new file mode 100644
index 0000000000..35140098da
Binary files /dev/null and b/public/images/templates/roma-react.jpg differ
diff --git a/public/images/templates/roma/Horizontal.png b/public/images/templates/roma/Horizontal.png
new file mode 100644
index 0000000000..8ee2903acb
Binary files /dev/null and b/public/images/templates/roma/Horizontal.png differ
diff --git a/public/images/templates/roma/Overlay.png b/public/images/templates/roma/Overlay.png
new file mode 100644
index 0000000000..6335d8b07e
Binary files /dev/null and b/public/images/templates/roma/Overlay.png differ
diff --git a/public/images/templates/roma/Slim.png b/public/images/templates/roma/Slim.png
new file mode 100644
index 0000000000..b02d0de7d4
Binary files /dev/null and b/public/images/templates/roma/Slim.png differ
diff --git a/public/images/templates/roma/Static.png b/public/images/templates/roma/Static.png
new file mode 100644
index 0000000000..e28aace107
Binary files /dev/null and b/public/images/templates/roma/Static.png differ
diff --git a/public/images/templates/roma/features-animation-component-themes.png b/public/images/templates/roma/features-animation-component-themes.png
new file mode 100644
index 0000000000..d17e8493fd
Binary files /dev/null and b/public/images/templates/roma/features-animation-component-themes.png differ
diff --git a/public/images/templates/roma/features-animation-darkmode.png b/public/images/templates/roma/features-animation-darkmode.png
new file mode 100644
index 0000000000..0e3e2fac21
Binary files /dev/null and b/public/images/templates/roma/features-animation-darkmode.png differ
diff --git a/public/images/templates/roma/features-animation-menu-themes.png b/public/images/templates/roma/features-animation-menu-themes.png
new file mode 100644
index 0000000000..61adf3e507
Binary files /dev/null and b/public/images/templates/roma/features-animation-menu-themes.png differ
diff --git a/public/images/templates/roma/roma-features2-mobile.png b/public/images/templates/roma/roma-features2-mobile.png
new file mode 100644
index 0000000000..8d127b827c
Binary files /dev/null and b/public/images/templates/roma/roma-features2-mobile.png differ
diff --git a/public/images/templates/roma/roma-features2-ready.png b/public/images/templates/roma/roma-features2-ready.png
new file mode 100644
index 0000000000..50fc3039a5
Binary files /dev/null and b/public/images/templates/roma/roma-features2-ready.png differ
diff --git a/public/images/templates/roma/roma-features2-responsive.png b/public/images/templates/roma/roma-features2-responsive.png
new file mode 100644
index 0000000000..9f05fff748
Binary files /dev/null and b/public/images/templates/roma/roma-features2-responsive.png differ
diff --git a/public/images/templates/roma/roma-hero-dashboard1.png b/public/images/templates/roma/roma-hero-dashboard1.png
new file mode 100644
index 0000000000..2a52a13ef4
Binary files /dev/null and b/public/images/templates/roma/roma-hero-dashboard1.png differ
diff --git a/public/images/templates/roma/roma-hero-dashboard2.png b/public/images/templates/roma/roma-hero-dashboard2.png
new file mode 100644
index 0000000000..d5543d6e06
Binary files /dev/null and b/public/images/templates/roma/roma-hero-dashboard2.png differ
diff --git a/public/images/templates/roma/roma-hero-pattern.png b/public/images/templates/roma/roma-hero-pattern.png
new file mode 100644
index 0000000000..4401e84a99
Binary files /dev/null and b/public/images/templates/roma/roma-hero-pattern.png differ
diff --git a/public/images/templates/roma/roma-intro.png b/public/images/templates/roma/roma-intro.png
new file mode 100644
index 0000000000..6abe2d0877
Binary files /dev/null and b/public/images/templates/roma/roma-intro.png differ
diff --git a/public/images/templates/sakai/Overlay.png b/public/images/templates/sakai/Overlay.png
new file mode 100644
index 0000000000..24880f23f1
Binary files /dev/null and b/public/images/templates/sakai/Overlay.png differ
diff --git a/public/images/templates/sakai/Static.png b/public/images/templates/sakai/Static.png
new file mode 100644
index 0000000000..a297c424f8
Binary files /dev/null and b/public/images/templates/sakai/Static.png differ
diff --git a/public/images/templates/sakai/features-animation-component-themes.png b/public/images/templates/sakai/features-animation-component-themes.png
new file mode 100644
index 0000000000..00437578f1
Binary files /dev/null and b/public/images/templates/sakai/features-animation-component-themes.png differ
diff --git a/public/images/templates/sakai/features-animation-darkmode.png b/public/images/templates/sakai/features-animation-darkmode.png
new file mode 100644
index 0000000000..de2f47eecf
Binary files /dev/null and b/public/images/templates/sakai/features-animation-darkmode.png differ
diff --git a/public/images/templates/sakai/sakai-features2-mobile.png b/public/images/templates/sakai/sakai-features2-mobile.png
new file mode 100644
index 0000000000..632c5d2c45
Binary files /dev/null and b/public/images/templates/sakai/sakai-features2-mobile.png differ
diff --git a/public/images/templates/sakai/sakai-features2-responsive.png b/public/images/templates/sakai/sakai-features2-responsive.png
new file mode 100644
index 0000000000..8ea8bb08e5
Binary files /dev/null and b/public/images/templates/sakai/sakai-features2-responsive.png differ
diff --git a/public/images/templates/sakai/sakai-github.png b/public/images/templates/sakai/sakai-github.png
new file mode 100644
index 0000000000..3fe3a5385c
Binary files /dev/null and b/public/images/templates/sakai/sakai-github.png differ
diff --git a/public/images/templates/sakai/sakai-hero-dashboard1.png b/public/images/templates/sakai/sakai-hero-dashboard1.png
new file mode 100644
index 0000000000..a15ab4caa6
Binary files /dev/null and b/public/images/templates/sakai/sakai-hero-dashboard1.png differ
diff --git a/public/images/templates/sakai/sakai-hero-dashboard2.png b/public/images/templates/sakai/sakai-hero-dashboard2.png
new file mode 100644
index 0000000000..2a1f9a5fcc
Binary files /dev/null and b/public/images/templates/sakai/sakai-hero-dashboard2.png differ
diff --git a/public/images/templates/sakai/sakai-hero-pattern.png b/public/images/templates/sakai/sakai-hero-pattern.png
new file mode 100644
index 0000000000..454c92e653
Binary files /dev/null and b/public/images/templates/sakai/sakai-hero-pattern.png differ
diff --git a/public/images/templates/sakai/sakai-ready.png b/public/images/templates/sakai/sakai-ready.png
new file mode 100644
index 0000000000..3c229e01fc
Binary files /dev/null and b/public/images/templates/sakai/sakai-ready.png differ
diff --git a/public/showcase/resources/images/layouts/sapphire-react.jpg b/public/images/templates/sapphire-react.jpg
similarity index 100%
rename from public/showcase/resources/images/layouts/sapphire-react.jpg
rename to public/images/templates/sapphire-react.jpg
diff --git a/public/showcase/resources/images/layouts/serenity-react.jpg b/public/images/templates/serenity-react.jpg
similarity index 100%
rename from public/showcase/resources/images/layouts/serenity-react.jpg
rename to public/images/templates/serenity-react.jpg
diff --git a/public/images/templates/ultima-react.jpg b/public/images/templates/ultima-react.jpg
new file mode 100644
index 0000000000..d9de5bb902
Binary files /dev/null and b/public/images/templates/ultima-react.jpg differ
diff --git a/public/images/templates/ultima/Drawer.png b/public/images/templates/ultima/Drawer.png
new file mode 100644
index 0000000000..bd3db5923a
Binary files /dev/null and b/public/images/templates/ultima/Drawer.png differ
diff --git a/public/images/templates/ultima/Horizontal.png b/public/images/templates/ultima/Horizontal.png
new file mode 100644
index 0000000000..e3cb4506c1
Binary files /dev/null and b/public/images/templates/ultima/Horizontal.png differ
diff --git a/public/images/templates/ultima/Overlay.png b/public/images/templates/ultima/Overlay.png
new file mode 100644
index 0000000000..31d4333b2a
Binary files /dev/null and b/public/images/templates/ultima/Overlay.png differ
diff --git a/public/images/templates/ultima/Reveal.png b/public/images/templates/ultima/Reveal.png
new file mode 100644
index 0000000000..12aff6b169
Binary files /dev/null and b/public/images/templates/ultima/Reveal.png differ
diff --git a/public/images/templates/ultima/Slim+.png b/public/images/templates/ultima/Slim+.png
new file mode 100644
index 0000000000..5ae9cb0823
Binary files /dev/null and b/public/images/templates/ultima/Slim+.png differ
diff --git a/public/images/templates/ultima/Slim.png b/public/images/templates/ultima/Slim.png
new file mode 100644
index 0000000000..33c9d5c679
Binary files /dev/null and b/public/images/templates/ultima/Slim.png differ
diff --git a/public/images/templates/ultima/Static.png b/public/images/templates/ultima/Static.png
new file mode 100644
index 0000000000..d2f88543ee
Binary files /dev/null and b/public/images/templates/ultima/Static.png differ
diff --git a/public/images/templates/ultima/features-animation-component-themes.png b/public/images/templates/ultima/features-animation-component-themes.png
new file mode 100644
index 0000000000..8723047a1c
Binary files /dev/null and b/public/images/templates/ultima/features-animation-component-themes.png differ
diff --git a/public/images/templates/ultima/features-animation-darkmode.png b/public/images/templates/ultima/features-animation-darkmode.png
new file mode 100644
index 0000000000..ec36241bd4
Binary files /dev/null and b/public/images/templates/ultima/features-animation-darkmode.png differ
diff --git a/public/images/templates/ultima/features-animation-figma.png b/public/images/templates/ultima/features-animation-figma.png
new file mode 100644
index 0000000000..690f5adf46
Binary files /dev/null and b/public/images/templates/ultima/features-animation-figma.png differ
diff --git a/public/images/templates/ultima/ultima-features2-mobile.png b/public/images/templates/ultima/ultima-features2-mobile.png
new file mode 100644
index 0000000000..e5ceb60a54
Binary files /dev/null and b/public/images/templates/ultima/ultima-features2-mobile.png differ
diff --git a/public/images/templates/ultima/ultima-features2-ready.png b/public/images/templates/ultima/ultima-features2-ready.png
new file mode 100644
index 0000000000..6c954cccfd
Binary files /dev/null and b/public/images/templates/ultima/ultima-features2-ready.png differ
diff --git a/public/images/templates/ultima/ultima-features2-responsive.png b/public/images/templates/ultima/ultima-features2-responsive.png
new file mode 100644
index 0000000000..81e544ea41
Binary files /dev/null and b/public/images/templates/ultima/ultima-features2-responsive.png differ
diff --git a/public/images/templates/ultima/ultima-hero-dashboard1.png b/public/images/templates/ultima/ultima-hero-dashboard1.png
new file mode 100644
index 0000000000..395caf9464
Binary files /dev/null and b/public/images/templates/ultima/ultima-hero-dashboard1.png differ
diff --git a/public/images/templates/ultima/ultima-hero-dashboard2.png b/public/images/templates/ultima/ultima-hero-dashboard2.png
new file mode 100644
index 0000000000..612ecf180c
Binary files /dev/null and b/public/images/templates/ultima/ultima-hero-dashboard2.png differ
diff --git a/public/images/templates/ultima/ultima-hero-logo.svg b/public/images/templates/ultima/ultima-hero-logo.svg
new file mode 100644
index 0000000000..7e5899ab86
--- /dev/null
+++ b/public/images/templates/ultima/ultima-hero-logo.svg
@@ -0,0 +1,16 @@
+<svg width="209" height="40" viewBox="0 0 209 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo" clip-path="url(#clip0_957_53077)">
+<path id="Vector" d="M95.6837 6.5625V25.9765C95.6707 27.8906 95.2474 29.5573 94.4141 30.9765C93.5808 32.3959 92.4024 33.4896 90.8789 34.2578C89.3686 35.013 87.6303 35.3906 85.6641 35.3906C82.6693 35.3906 80.2669 34.5769 78.4571 32.9492C76.6602 31.3086 75.7292 29.043 75.6641 26.1524V6.5625H78.0469V25.8008C78.0469 28.1966 78.7306 30.0586 80.0977 31.3867C81.4649 32.7019 83.3203 33.3594 85.6641 33.3594C88.0078 33.3594 89.8568 32.6952 91.2111 31.3672C92.5782 30.039 93.2618 28.1901 93.2618 25.8203V6.5625H95.6837Z" fill="white"/>
+<path id="Vector_2" d="M104.805 32.9688H118.848V35H102.383V6.5625H104.805V32.9688Z" fill="white"/>
+<path id="Vector_3" d="M137.383 8.61328H127.636V35H125.235V8.61328H115.508V6.5625H137.383V8.61328Z" fill="white"/>
+<path id="Vector_4" d="M144.923 35H142.52V6.5625H144.923V35Z" fill="white"/>
+<path id="Vector_5" d="M155.84 6.5625L166.327 31.6601L176.855 6.5625H180.059V35H177.656V22.6172L177.851 9.92188L167.265 35H165.41L154.864 10.0195L155.059 22.539V35H152.656V6.5625H155.84Z" fill="white"/>
+<path id="Vector_6" d="M202.969 27.0312H190.059L187.129 35H184.61L195.371 6.5625H197.656L208.418 35H205.918L202.969 27.0312ZM190.801 24.9805H202.208L196.504 9.49219L190.801 24.9805Z" fill="white"/>
+<path id="Vector_7" fill-rule="evenodd" clip-rule="evenodd" d="M49.9636 10.7127C49.889 10.5341 49.7146 10.4185 49.5213 10.4185H46.8866L48.3213 8.68796C48.44 8.54566 48.4639 8.34796 48.3854 8.18083C48.3069 8.01369 48.1382 7.90671 47.9525 7.90671H19.0408L10.842 0.131475C10.683 -0.0184707 10.4417 -0.0433026 10.2578 0.0732162L5.65804 2.95276L5.6542 2.95657L5.64941 2.95849L0.216438 6.52472C0.20303 6.53333 0.196326 6.54669 0.183876 6.5572C0.157061 6.57821 0.134076 6.60114 0.113007 6.62692C0.0938536 6.64984 0.0785306 6.67276 0.0641652 6.69855C0.0488423 6.72625 0.0383076 6.75395 0.0287308 6.78355C0.0191537 6.81411 0.0134076 6.84468 0.0095769 6.87715C0.00861921 6.89339 0 6.90675 0 6.92395C0 6.93922 0.00670382 6.95069 0.00861921 6.96598C0.0114923 6.99749 0.0181961 7.0271 0.027773 7.05861C0.0373499 7.09013 0.0478845 7.11974 0.0641652 7.14935C0.070869 7.16176 0.0718267 7.17514 0.0794882 7.18755C0.0861921 7.19805 0.0986421 7.20187 0.106304 7.21142C0.139822 7.2544 0.179088 7.28974 0.225058 7.31839C0.242295 7.3289 0.255704 7.34228 0.272941 7.35086C0.336149 7.38142 0.405102 7.40149 0.479802 7.40149H7.02179L8.49854 11.0757L8.50045 11.0785V11.0814L18.108 34.0365L12.4366 39.1691C12.29 39.3019 12.2402 39.51 12.3121 39.6944C12.3829 39.8788 12.5611 40 12.7584 40H20.9236C20.9869 40 21.0491 39.9866 21.1075 39.9627C21.1659 39.9389 21.2186 39.9035 21.2626 39.8596L25.555 35.5627C25.5608 35.5694 25.5626 35.578 25.5694 35.5848L29.6338 39.851C29.7248 39.9475 29.8445 39.9743 29.9834 40C37.3624 39.9589 48.5578 39.9216 49.0845 39.9761C49.1343 39.9924 49.185 40 49.2357 40C49.3996 40 49.5595 39.9169 49.6486 39.7728C49.9254 39.3237 49.9234 39.319 35.7831 25.3254L49.8593 11.2361C49.9971 11.0967 50.0374 10.8913 49.9636 10.7127ZM46.9354 8.86084L45.6454 10.4185H21.6898L20.0474 8.86084H46.9354ZM10.4522 1.07795L20.3011 10.4185H9.26661L6.50559 3.54872L10.4522 1.07795ZM2.07722 6.44545L5.6858 4.07687L6.63775 6.44545H2.07722ZM26.2628 34.9258C26.2502 34.9124 26.233 34.9066 26.2196 34.8961L29.6501 31.4626V38.4805L26.2628 34.9258ZM48.1306 39.0163C46.3225 38.9895 41.83 38.9781 30.6077 39.0401V30.8141C30.6077 30.7262 30.5771 30.6479 30.536 30.5763L35.108 25.9996C39.6167 30.4626 45.9998 36.8149 48.1306 39.0163ZM21.0903 38.6781L9.66117 11.3736H45.7508C45.7853 11.3813 45.8197 11.3918 45.8542 11.3918C45.882 11.3918 45.9079 11.3784 45.9356 11.3736H48.3681L21.0903 38.6781Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_957_53077">
+<rect width="208.75" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/templates/ultima/ultima-hero-pattern.png b/public/images/templates/ultima/ultima-hero-pattern.png
new file mode 100644
index 0000000000..99ddbcb760
Binary files /dev/null and b/public/images/templates/ultima/ultima-hero-pattern.png differ
diff --git a/public/images/templates/ultima/ultima-youtube-screen.png b/public/images/templates/ultima/ultima-youtube-screen.png
new file mode 100644
index 0000000000..612bc2ae71
Binary files /dev/null and b/public/images/templates/ultima/ultima-youtube-screen.png differ
diff --git a/public/images/templates/verona.jpg b/public/images/templates/verona.jpg
new file mode 100644
index 0000000000..31066ddeab
Binary files /dev/null and b/public/images/templates/verona.jpg differ
diff --git a/public/images/templates/verona/Overlay.png b/public/images/templates/verona/Overlay.png
new file mode 100644
index 0000000000..3a5cf3a4b5
Binary files /dev/null and b/public/images/templates/verona/Overlay.png differ
diff --git a/public/images/templates/verona/Slim+.png b/public/images/templates/verona/Slim+.png
new file mode 100644
index 0000000000..b8bcb0613f
Binary files /dev/null and b/public/images/templates/verona/Slim+.png differ
diff --git a/public/images/templates/verona/Slim.png b/public/images/templates/verona/Slim.png
new file mode 100644
index 0000000000..3e0bc6db96
Binary files /dev/null and b/public/images/templates/verona/Slim.png differ
diff --git a/public/images/templates/verona/Static.png b/public/images/templates/verona/Static.png
new file mode 100644
index 0000000000..b4b1152d31
Binary files /dev/null and b/public/images/templates/verona/Static.png differ
diff --git a/public/images/templates/verona/features-animation-component-themes.png b/public/images/templates/verona/features-animation-component-themes.png
new file mode 100644
index 0000000000..19d1a340b6
Binary files /dev/null and b/public/images/templates/verona/features-animation-component-themes.png differ
diff --git a/public/images/templates/verona/features-animation-darkmode.png b/public/images/templates/verona/features-animation-darkmode.png
new file mode 100644
index 0000000000..70944cb02e
Binary files /dev/null and b/public/images/templates/verona/features-animation-darkmode.png differ
diff --git a/public/images/templates/verona/features-animation-figma.png b/public/images/templates/verona/features-animation-figma.png
new file mode 100644
index 0000000000..376dabc910
Binary files /dev/null and b/public/images/templates/verona/features-animation-figma.png differ
diff --git a/public/images/templates/verona/features-animation-orientations.png b/public/images/templates/verona/features-animation-orientations.png
new file mode 100644
index 0000000000..c998fb57fd
Binary files /dev/null and b/public/images/templates/verona/features-animation-orientations.png differ
diff --git a/public/images/templates/verona/verona-features2-mobile.png b/public/images/templates/verona/verona-features2-mobile.png
new file mode 100644
index 0000000000..2fcab4aa3e
Binary files /dev/null and b/public/images/templates/verona/verona-features2-mobile.png differ
diff --git a/public/images/templates/verona/verona-features2-ready.png b/public/images/templates/verona/verona-features2-ready.png
new file mode 100644
index 0000000000..b8679324da
Binary files /dev/null and b/public/images/templates/verona/verona-features2-ready.png differ
diff --git a/public/images/templates/verona/verona-features2-responsive.png b/public/images/templates/verona/verona-features2-responsive.png
new file mode 100644
index 0000000000..9f8c409b6f
Binary files /dev/null and b/public/images/templates/verona/verona-features2-responsive.png differ
diff --git a/public/images/templates/verona/verona-hero-dashboard1.png b/public/images/templates/verona/verona-hero-dashboard1.png
new file mode 100644
index 0000000000..4707c4d36f
Binary files /dev/null and b/public/images/templates/verona/verona-hero-dashboard1.png differ
diff --git a/public/images/templates/verona/verona-hero-dashboard2.png b/public/images/templates/verona/verona-hero-dashboard2.png
new file mode 100644
index 0000000000..b8ff66475b
Binary files /dev/null and b/public/images/templates/verona/verona-hero-dashboard2.png differ
diff --git a/public/images/templates/verona/verona-hero-pattern.png b/public/images/templates/verona/verona-hero-pattern.png
new file mode 100644
index 0000000000..bae6e7f4c5
Binary files /dev/null and b/public/images/templates/verona/verona-hero-pattern.png differ
diff --git a/public/images/templates/verona/verona-youtube-screen.png b/public/images/templates/verona/verona-youtube-screen.png
new file mode 100644
index 0000000000..08b855f72e
Binary files /dev/null and b/public/images/templates/verona/verona-youtube-screen.png differ
diff --git a/public/images/templates/vue-3d-logo.png b/public/images/templates/vue-3d-logo.png
new file mode 100644
index 0000000000..24058abd89
Binary files /dev/null and b/public/images/templates/vue-3d-logo.png differ
diff --git a/public/showcase/resources/images/themes.png b/public/images/themes.png
similarity index 100%
rename from public/showcase/resources/images/themes.png
rename to public/images/themes.png
diff --git a/public/images/themes/arya-blue.png b/public/images/themes/arya-blue.png
new file mode 100644
index 0000000000..62a7b0535f
Binary files /dev/null and b/public/images/themes/arya-blue.png differ
diff --git a/public/images/themes/arya-green.png b/public/images/themes/arya-green.png
new file mode 100644
index 0000000000..8b67fd8fd3
Binary files /dev/null and b/public/images/themes/arya-green.png differ
diff --git a/public/images/themes/arya-orange.png b/public/images/themes/arya-orange.png
new file mode 100644
index 0000000000..fef1ac465a
Binary files /dev/null and b/public/images/themes/arya-orange.png differ
diff --git a/public/images/themes/arya-purple.png b/public/images/themes/arya-purple.png
new file mode 100644
index 0000000000..fb7f9e83a1
Binary files /dev/null and b/public/images/themes/arya-purple.png differ
diff --git a/public/images/themes/bootstrap4-dark-blue.svg b/public/images/themes/bootstrap4-dark-blue.svg
new file mode 100644
index 0000000000..d0a9de440d
--- /dev/null
+++ b/public/images/themes/bootstrap4-dark-blue.svg
@@ -0,0 +1,4 @@
+<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#007BFF"/>
+<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7V1105.84ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.13 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857V493.164ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7V1748.19Z" fill="#121212"/>
+</svg>
diff --git a/public/images/themes/bootstrap4-dark-purple.svg b/public/images/themes/bootstrap4-dark-purple.svg
new file mode 100644
index 0000000000..c97df77436
--- /dev/null
+++ b/public/images/themes/bootstrap4-dark-purple.svg
@@ -0,0 +1,4 @@
+<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#883CAE"/>
+<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="#121212"/>
+</svg>
diff --git a/public/images/themes/bootstrap4-light-blue.svg b/public/images/themes/bootstrap4-light-blue.svg
new file mode 100644
index 0000000000..93c8b56c66
--- /dev/null
+++ b/public/images/themes/bootstrap4-light-blue.svg
@@ -0,0 +1,4 @@
+<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#007BFF"/>
+<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7V1105.84ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.13 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857V493.164ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7V1748.19Z" fill="white"/>
+</svg>
diff --git a/public/images/themes/bootstrap4-light-purple.svg b/public/images/themes/bootstrap4-light-purple.svg
new file mode 100644
index 0000000000..b9c644c3b5
--- /dev/null
+++ b/public/images/themes/bootstrap4-light-purple.svg
@@ -0,0 +1,4 @@
+<svg width="2500" height="2500" viewBox="0 0 2500 2500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 2177.65C0 2355.69 144.326 2500 322.354 2500H2177.64C2355.69 2500 2500 2355.67 2500 2177.65V322.363C2500 144.307 2355.67 0 2177.65 0H322.363C144.307 0 0 144.326 0 322.354V2177.64V2177.65Z" fill="#883CAE"/>
+<path d="M1036.7 1105.84V751.807H1348.33C1378.02 751.807 1406.63 754.277 1434.19 759.229C1461.75 764.17 1486.13 772.998 1507.33 785.723C1528.53 798.447 1545.49 816.113 1558.21 838.721C1570.93 861.338 1577.29 890.313 1577.29 925.635C1577.29 989.238 1558.21 1035.18 1520.05 1063.44C1481.89 1091.71 1433.13 1105.84 1373.77 1105.84H1036.7ZM703.857 493.164V2006.84H1437.37C1505.21 2006.84 1571.29 1998.36 1635.6 1981.4C1699.9 1964.43 1757.14 1938.29 1807.31 1902.96C1857.48 1867.63 1897.41 1822.04 1927.09 1766.22C1956.78 1710.39 1971.61 1644.32 1971.61 1568C1971.61 1473.3 1948.64 1392.39 1902.71 1325.26C1856.78 1258.12 1787.17 1211.13 1693.89 1184.28C1761.73 1151.78 1812.97 1110.08 1847.6 1059.2C1882.22 1008.32 1899.53 944.727 1899.53 868.398C1899.53 797.734 1887.87 738.379 1864.55 690.322C1841.23 642.275 1808.37 603.76 1765.97 574.785C1723.57 545.811 1672.7 524.961 1613.33 512.246C1553.97 499.521 1488.25 493.164 1416.17 493.164H703.857ZM1036.7 1748.19V1332.68H1399.21C1471.29 1332.68 1529.24 1349.28 1573.06 1382.5C1616.87 1415.71 1638.78 1471.18 1638.78 1548.92C1638.78 1588.5 1632.06 1621 1618.63 1646.44C1605.21 1671.88 1587.19 1692.02 1564.57 1706.86C1541.96 1721.7 1515.81 1732.29 1486.13 1738.66C1456.45 1745.01 1425.36 1748.19 1392.85 1748.19H1036.7Z" fill="white"/>
+</svg>
diff --git a/public/images/themes/fluent-light.png b/public/images/themes/fluent-light.png
new file mode 100644
index 0000000000..4766eebb75
Binary files /dev/null and b/public/images/themes/fluent-light.png differ
diff --git a/public/images/themes/lara-dark-blue.png b/public/images/themes/lara-dark-blue.png
new file mode 100644
index 0000000000..0a999085ea
Binary files /dev/null and b/public/images/themes/lara-dark-blue.png differ
diff --git a/public/images/themes/lara-dark-indigo.png b/public/images/themes/lara-dark-indigo.png
new file mode 100644
index 0000000000..b435d9804b
Binary files /dev/null and b/public/images/themes/lara-dark-indigo.png differ
diff --git a/public/images/themes/lara-dark-purple.png b/public/images/themes/lara-dark-purple.png
new file mode 100644
index 0000000000..e0d5bf41d7
Binary files /dev/null and b/public/images/themes/lara-dark-purple.png differ
diff --git a/public/images/themes/lara-dark-teal.png b/public/images/themes/lara-dark-teal.png
new file mode 100644
index 0000000000..2ae219440a
Binary files /dev/null and b/public/images/themes/lara-dark-teal.png differ
diff --git a/public/images/themes/lara-light-blue.png b/public/images/themes/lara-light-blue.png
new file mode 100644
index 0000000000..0278849dde
Binary files /dev/null and b/public/images/themes/lara-light-blue.png differ
diff --git a/public/images/themes/lara-light-indigo.png b/public/images/themes/lara-light-indigo.png
new file mode 100644
index 0000000000..80bee58333
Binary files /dev/null and b/public/images/themes/lara-light-indigo.png differ
diff --git a/public/images/themes/lara-light-purple.png b/public/images/themes/lara-light-purple.png
new file mode 100644
index 0000000000..7745c13a19
Binary files /dev/null and b/public/images/themes/lara-light-purple.png differ
diff --git a/public/images/themes/lara-light-teal.png b/public/images/themes/lara-light-teal.png
new file mode 100644
index 0000000000..f8fb07fe9e
Binary files /dev/null and b/public/images/themes/lara-light-teal.png differ
diff --git a/public/images/themes/luna-amber.png b/public/images/themes/luna-amber.png
new file mode 100644
index 0000000000..2cb7685a49
Binary files /dev/null and b/public/images/themes/luna-amber.png differ
diff --git a/public/images/themes/luna-blue.png b/public/images/themes/luna-blue.png
new file mode 100644
index 0000000000..fac4339492
Binary files /dev/null and b/public/images/themes/luna-blue.png differ
diff --git a/public/images/themes/luna-green.png b/public/images/themes/luna-green.png
new file mode 100644
index 0000000000..f4c378994c
Binary files /dev/null and b/public/images/themes/luna-green.png differ
diff --git a/public/images/themes/luna-pink.png b/public/images/themes/luna-pink.png
new file mode 100644
index 0000000000..6ef7b35fba
Binary files /dev/null and b/public/images/themes/luna-pink.png differ
diff --git a/public/images/themes/md-dark-deeppurple.svg b/public/images/themes/md-dark-deeppurple.svg
new file mode 100644
index 0000000000..c6f838bef4
--- /dev/null
+++ b/public/images/themes/md-dark-deeppurple.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>4</title>
+    <g id="4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#9D1BB2" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#CE93D8" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#121212" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/themes/md-dark-indigo.svg b/public/images/themes/md-dark-indigo.svg
new file mode 100644
index 0000000000..68658b609d
--- /dev/null
+++ b/public/images/themes/md-dark-indigo.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2</title>
+    <g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#3D4DB7" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#9FA8DA" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#121212" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/themes/md-light-deeppurple.svg b/public/images/themes/md-light-deeppurple.svg
new file mode 100644
index 0000000000..0d3119f852
--- /dev/null
+++ b/public/images/themes/md-light-deeppurple.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>4</title>
+    <g id="4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#9D1BB2" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#CE93D8" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#ffffff" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/themes/md-light-indigo.svg b/public/images/themes/md-light-indigo.svg
new file mode 100644
index 0000000000..1afeed7070
--- /dev/null
+++ b/public/images/themes/md-light-indigo.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1024px" height="1024px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2</title>
+    <g id="2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <circle id="circle" fill="#3D4DB7" cx="512" cy="512" r="512"></circle>
+        <rect id="rectangle" fill="#9FA8DA" x="154" y="155" width="715" height="716"></rect>
+        <polygon id="triangle" fill="#FFFFFF" points="154 154.5 868.5 154.5 512 870.5"></polygon>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/themes/mira.jpg b/public/images/themes/mira.jpg
new file mode 100644
index 0000000000..18e5b6efd5
Binary files /dev/null and b/public/images/themes/mira.jpg differ
diff --git a/public/images/themes/nano.jpg b/public/images/themes/nano.jpg
new file mode 100644
index 0000000000..62f3a107ac
Binary files /dev/null and b/public/images/themes/nano.jpg differ
diff --git a/public/images/themes/nova-accent.png b/public/images/themes/nova-accent.png
new file mode 100644
index 0000000000..260087fbc3
Binary files /dev/null and b/public/images/themes/nova-accent.png differ
diff --git a/public/images/themes/nova-alt.png b/public/images/themes/nova-alt.png
new file mode 100644
index 0000000000..6d2eaa7e39
Binary files /dev/null and b/public/images/themes/nova-alt.png differ
diff --git a/public/images/themes/nova.png b/public/images/themes/nova.png
new file mode 100644
index 0000000000..12ff704a8a
Binary files /dev/null and b/public/images/themes/nova.png differ
diff --git a/public/images/themes/rhea.png b/public/images/themes/rhea.png
new file mode 100644
index 0000000000..2ac342184b
Binary files /dev/null and b/public/images/themes/rhea.png differ
diff --git a/public/images/themes/saga-blue.png b/public/images/themes/saga-blue.png
new file mode 100644
index 0000000000..0671d46198
Binary files /dev/null and b/public/images/themes/saga-blue.png differ
diff --git a/public/images/themes/saga-green.png b/public/images/themes/saga-green.png
new file mode 100644
index 0000000000..4c8c3b8bd9
Binary files /dev/null and b/public/images/themes/saga-green.png differ
diff --git a/public/images/themes/saga-orange.png b/public/images/themes/saga-orange.png
new file mode 100644
index 0000000000..2cabd5dedc
Binary files /dev/null and b/public/images/themes/saga-orange.png differ
diff --git a/public/images/themes/saga-purple.png b/public/images/themes/saga-purple.png
new file mode 100644
index 0000000000..4b45f8bd03
Binary files /dev/null and b/public/images/themes/saga-purple.png differ
diff --git a/public/images/themes/soho-dark.png b/public/images/themes/soho-dark.png
new file mode 100644
index 0000000000..02194d4cdb
Binary files /dev/null and b/public/images/themes/soho-dark.png differ
diff --git a/public/images/themes/soho-light.png b/public/images/themes/soho-light.png
new file mode 100644
index 0000000000..9532fb526a
Binary files /dev/null and b/public/images/themes/soho-light.png differ
diff --git a/public/images/themes/tailwind-light.png b/public/images/themes/tailwind-light.png
new file mode 100644
index 0000000000..679bd1e603
Binary files /dev/null and b/public/images/themes/tailwind-light.png differ
diff --git a/public/images/themes/vela-blue.png b/public/images/themes/vela-blue.png
new file mode 100644
index 0000000000..6780f35f36
Binary files /dev/null and b/public/images/themes/vela-blue.png differ
diff --git a/public/images/themes/vela-green.png b/public/images/themes/vela-green.png
new file mode 100644
index 0000000000..634452606e
Binary files /dev/null and b/public/images/themes/vela-green.png differ
diff --git a/public/images/themes/vela-orange.png b/public/images/themes/vela-orange.png
new file mode 100644
index 0000000000..a2a9cdeabb
Binary files /dev/null and b/public/images/themes/vela-orange.png differ
diff --git a/public/images/themes/vela-purple.png b/public/images/themes/vela-purple.png
new file mode 100644
index 0000000000..d53ac06f6e
Binary files /dev/null and b/public/images/themes/vela-purple.png differ
diff --git a/public/images/themes/viva-dark.svg b/public/images/themes/viva-dark.svg
new file mode 100644
index 0000000000..43b77067ee
--- /dev/null
+++ b/public/images/themes/viva-dark.svg
@@ -0,0 +1,4 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="600" height="600" fill="#0E1315"/>
+<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="#9EADE6" stroke-width="21"/>
+</svg>
diff --git a/public/images/themes/viva-light.svg b/public/images/themes/viva-light.svg
new file mode 100644
index 0000000000..1904eb4608
--- /dev/null
+++ b/public/images/themes/viva-light.svg
@@ -0,0 +1,4 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="600" height="600" fill="#5472D4"/>
+<path d="M299.5 456L154 145H226.75L299.5 415.5L372.25 145H445L299.5 456Z" stroke="white" stroke-width="21"/>
+</svg>
diff --git a/public/images/typescript-icon.png b/public/images/typescript-icon.png
new file mode 100644
index 0000000000..af2d133415
Binary files /dev/null and b/public/images/typescript-icon.png differ
diff --git a/public/images/uikit/logo-figma-dark.svg b/public/images/uikit/logo-figma-dark.svg
new file mode 100644
index 0000000000..0eb31fd445
--- /dev/null
+++ b/public/images/uikit/logo-figma-dark.svg
@@ -0,0 +1,8 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="60" height="60" rx="30" fill="#424242"/>
+<path d="M44.0805 16.6833C44.0805 20.3744 41.0883 23.3667 37.3972 23.3667H30.5403V10H37.3972C41.0883 10 44.0805 12.9922 44.0805 16.6833Z" stroke="white" stroke-width="2.61787"/>
+<path d="M17 16.6833C17 20.3744 19.9922 23.3667 23.6833 23.3667H30.5403V10H23.6833C19.9922 10 17 12.9922 17 16.6833Z" stroke="white" stroke-width="2.61787"/>
+<path d="M17 30.0501C17 33.7413 19.9922 36.7335 23.6833 36.7335H30.5403V23.3668H23.6833C19.9922 23.3668 17 26.359 17 30.0501Z" stroke="white" stroke-width="2.61787"/>
+<path d="M17 43.4166C17 47.1077 20.0353 50.0999 23.7265 50.0999C27.4655 50.0999 30.5403 47.0688 30.5403 43.3298V36.7333H23.6833C19.9922 36.7333 17 39.7255 17 43.4166Z" stroke="white" stroke-width="2.61787"/>
+<path d="M30.5403 30.0501C30.5403 33.7413 33.5325 36.7335 37.2236 36.7335H37.3972C41.0883 36.7335 44.0805 33.7413 44.0805 30.0501C44.0805 26.359 41.0883 23.3668 37.3972 23.3668H37.2236C33.5325 23.3668 30.5403 26.359 30.5403 30.0501Z" stroke="white" stroke-width="2.61787"/>
+</svg>
diff --git a/public/images/uikit/logo-figma-light.svg b/public/images/uikit/logo-figma-light.svg
new file mode 100644
index 0000000000..2821deb0e1
--- /dev/null
+++ b/public/images/uikit/logo-figma-light.svg
@@ -0,0 +1,8 @@
+<svg width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="60" height="60" rx="30" fill="#E9ECEF"/>
+<path d="M44.0805 16.6833C44.0805 20.3744 41.0883 23.3667 37.3972 23.3667H30.5403V10H37.3972C41.0883 10 44.0805 12.9922 44.0805 16.6833Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M17 16.6833C17 20.3744 19.9922 23.3667 23.6833 23.3667H30.5403V10H23.6833C19.9922 10 17 12.9922 17 16.6833Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M17 30.0501C17 33.7413 19.9922 36.7335 23.6833 36.7335H30.5403V23.3668H23.6833C19.9922 23.3668 17 26.359 17 30.0501Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M17 43.4166C17 47.1077 20.0353 50.0999 23.7265 50.0999C27.4655 50.0999 30.5403 47.0688 30.5403 43.3298V36.7333H23.6833C19.9922 36.7333 17 39.7255 17 43.4166Z" stroke="#212121" stroke-width="2.61787"/>
+<path d="M30.5403 30.0501C30.5403 33.7413 33.5325 36.7335 37.2236 36.7335H37.3972C41.0883 36.7335 44.0805 33.7413 44.0805 30.0501C44.0805 26.359 41.0883 23.3668 37.3972 23.3668H37.2236C33.5325 23.3668 30.5403 26.359 30.5403 30.0501Z" stroke="#212121" stroke-width="2.61787"/>
+</svg>
diff --git a/public/images/uikit/primeone-cover-dark.jpeg b/public/images/uikit/primeone-cover-dark.jpeg
new file mode 100644
index 0000000000..5514be3daa
Binary files /dev/null and b/public/images/uikit/primeone-cover-dark.jpeg differ
diff --git a/public/images/uikit/primeone-cover-dark.jpg b/public/images/uikit/primeone-cover-dark.jpg
new file mode 100644
index 0000000000..93ce7d5415
Binary files /dev/null and b/public/images/uikit/primeone-cover-dark.jpg differ
diff --git a/public/images/uikit/primeone-cover-light.jpeg b/public/images/uikit/primeone-cover-light.jpeg
new file mode 100644
index 0000000000..c124ffa181
Binary files /dev/null and b/public/images/uikit/primeone-cover-light.jpeg differ
diff --git a/public/images/uikit/primeone-cover-light.jpg b/public/images/uikit/primeone-cover-light.jpg
new file mode 100644
index 0000000000..02cb7f6edf
Binary files /dev/null and b/public/images/uikit/primeone-cover-light.jpg differ
diff --git a/public/images/uikit/uikit-figma.png b/public/images/uikit/uikit-figma.png
new file mode 100644
index 0000000000..94b417731f
Binary files /dev/null and b/public/images/uikit/uikit-figma.png differ
diff --git a/public/images/uikit/uikit-system.png b/public/images/uikit/uikit-system.png
new file mode 100644
index 0000000000..45ff20bb2a
Binary files /dev/null and b/public/images/uikit/uikit-system.png differ
diff --git a/public/images/uikit/uikit-themes.png b/public/images/uikit/uikit-themes.png
new file mode 100644
index 0000000000..e7751ebf65
Binary files /dev/null and b/public/images/uikit/uikit-themes.png differ
diff --git a/public/showcase/resources/demo/images/usercard.png b/public/images/usercard.png
similarity index 100%
rename from public/showcase/resources/demo/images/usercard.png
rename to public/images/usercard.png
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 4f61a3a790..0000000000
--- a/public/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-93461466-1"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-    </script>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">
-    <link rel="shortcut icon" href="http://github.com/%PUBLIC_URL%/favicon.ico">
-    <link id="theme-link" rel="stylesheet" href="http://github.com/%PUBLIC_URL%/resources/themes/nova-light/theme.css">
-    <title>PrimeReact</title>
-</head>
-
-<body>
-    <div id="root"></div>
-</body>
-</html>
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/luna-amber/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-amber/theme.css b/public/resources/themes/luna-amber/theme.css
deleted file mode 100644
index e7c0854496..0000000000
--- a/public/resources/themes/luna-amber/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #FFB300;
-  --primaryTextColor: #212121;
-  --panelContentBorder: 1px solid #191919;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #FFB300;
-  text-decoration: none;
-}
-body a:hover {
-  color: #FFA000;
-}
-body a:active {
-  color: #FF8F00;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #dedede;
-  background: #585858;
-  padding: 0.429em;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #FFB300;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #FFB300;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #FFB300;
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #FF8F00;
-  background-color: #FF8F00;
-  color: #212121;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #FFB300;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #FFB300;
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #212121;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #FF8F00;
-  background-color: #FF8F00;
-  color: #212121;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #585858;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #323232;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #585858;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #FFB300;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #FFA000;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #FFB300;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #dedede;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #FFB300;
-  color: #212121;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #212121;
-  background-color: #FFB300;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #FFB300;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #dedede;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #FFB300;
-  color: #212121;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #FFB300;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #dedede;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #212121;
-  background-color: #FFB300;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #FFB300;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #dedede;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #252525;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #888888;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #212121;
-  background-color: #FFB300;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #323232;
-  border: 1px solid #191919;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #252525;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #323232;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #212121;
-  background-color: #FFB300;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #585858;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #191919;
-  background-color: #191919;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #191919;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #dedede;
-}
-body .p-editor-container .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #FFB300;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #FFB300;
-}
-body .p-rating .p-rating-icon {
-  font-size: 20px;
-  text-align: center;
-  display: inline-block;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #CD3A3A;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #FFB300;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #d76161;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #585858;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.5715em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.5715em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.143em;
-  width: 1.143em;
-  background-color: #4c4c4c;
-  border: 2px solid #FFB300;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-slider .p-slider-range {
-  background-color: #FFB300;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: #FFB300;
-  border: 2px solid #FFB300;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 20em;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #dedede;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #252525;
-  color: #dedede;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  border-color: #FFB300;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #dedede;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #212121;
-  background-color: #FFB300;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #FF8F00;
-  color: #212121;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #212121;
-  background-color: #FFB300;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #3f3f3f;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #3f3f3f;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #888888;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #dedede;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #dedede;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #212121;
-  background-color: #FFB300;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #3f3f3f;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #191919;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #FFA000;
-  color: #212121;
-  border-color: #FFA000;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #FF8F00;
-  color: #212121;
-  border-color: #FF8F00;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #191919;
-  background-color: #252525;
-  color: #888888;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #9b9b9b;
-}
-body :-moz-placeholder {
-  color: #9b9b9b;
-}
-body ::-moz-placeholder {
-  color: #9b9b9b;
-}
-body :-ms-input-placeholder {
-  color: #9b9b9b;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #CD3A3A;
-}
-
-body .p-button {
-  margin: 0;
-  color: #212121;
-  background-color: #FFB300;
-  border: 1px solid #FFB300;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-button:enabled:hover {
-  background-color: #FFA000;
-  color: #212121;
-  border-color: #FFA000;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-button:enabled:active {
-  background-color: #FF8F00;
-  color: #212121;
-  border-color: #FF8F00;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #888888;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #FFB300;
-  border-color: #FFB300;
-  color: #212121;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #212121;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #FFA000;
-  border-color: #FFA000;
-  color: #212121;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-selectbutton .p-button {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #888888;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #FFB300;
-  border-color: #FFB300;
-  color: #212121;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #212121;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #FFA000;
-  border-color: #FFA000;
-  color: #212121;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f4f4f4;
-  border: 1px solid #f4f4f4;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #c8c8c8;
-  color: #333333;
-  border-color: #c8c8c8;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #a0a0a0;
-  color: #333333;
-  border-color: #a0a0a0;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #ffffff;
-  background-color: #34A835;
-  border: 1px solid #34A835;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #107D11;
-  color: #ffffff;
-  border-color: #107D11;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
-  -moz-box-shadow: 0 0 0 0.2em #aae5aa;
-  box-shadow: 0 0 0 0.2em #aae5aa;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #0C6B0D;
-  color: #ffffff;
-  border-color: #0C6B0D;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #ffba01;
-  border: 1px solid #ffba01;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #ED990B;
-  color: #333333;
-  border-color: #ED990B;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
-  -moz-box-shadow: 0 0 0 0.2em #ffeab4;
-  box-shadow: 0 0 0 0.2em #ffeab4;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #D38B10;
-  color: #333333;
-  border-color: #D38B10;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #ffffff;
-  background-color: #e91224;
-  border: 1px solid #e91224;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #c01120;
-  color: #ffffff;
-  border-color: #c01120;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
-  -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
-  box-shadow: 0 0 0 0.2em #f9b4ba;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #a90000;
-  color: #ffffff;
-  border-color: #a90000;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  background-color: #191919;
-  color: #dedede;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #888888;
-  border: 1px solid transparent;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #888888;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #FFB300;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #FFB300;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  color: #dedede;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #888888;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #FFB300;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #FFB300;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #FFB300;
-  border: 1px solid #FFB300;
-  color: #212121;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #212121;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #FF8F00;
-  background-color: #FF8F00;
-  color: #212121;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #212121;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: transparent;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  float: none;
-  display: inline-block;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #888888;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #FFB300;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #FFB300;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #FFB300;
-  border: 1px solid #FFB300;
-  color: #212121;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #212121;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #FF8F00;
-  background-color: #FF8F00;
-  color: #212121;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #212121;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #191919;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #888888;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #323232;
-  color: #dedede;
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-body .p-paginator {
-  background-color: #252525;
-  border: 1px solid #191919;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #FFB300;
-  background-color: #212121;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #212121;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #dedede;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #ffd980;
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #FFB300;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #FFB300;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3, 0 0.2em 0 0 #ffe8b3;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3, 0 0.2em 0 0 #ffe8b3, -0.1em -0.1em 0 0.1em #ffe8b3;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3, 0 0.2em 0 0 #ffe8b3, 0.1em -0.1em 0 0.1em #ffe8b3;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #323232;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #ffd980;
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #212121;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #212121;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #FFB300;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #191919;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc th {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #323232;
-  border: 1px solid #191919;
-  color: #dedede;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #191919;
-}
-body .fc .fc-row {
-  border-right: 1px solid #191919;
-}
-body .fc .fc-event {
-  background-color: #FFA000;
-  border: 1px solid #FFA000;
-  color: #212121;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #212121;
-  background-color: #FFB300;
-  border: 1px solid #FFB300;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #FFA000;
-  color: #212121;
-  border-color: #FFA000;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc .fc-divider {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #FFB300;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #FFB300;
-}
-body .p-tree {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.286em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #212121;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #212121;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #FFB300;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #FFB300;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #FFB300;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #252525;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #805a00;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #888888;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #FFB300;
-  background-color: #212121;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #212121;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #888888;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #FFB300;
-  color: #212121;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #212121;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: #ffd980;
-  color: #212121;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #212121;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3, 0 0.2em 0 0 #ffe8b3;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3, 0 0.2em 0 0 #ffe8b3, -0.1em -0.1em 0 0.1em #ffe8b3;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #ffe8b3, 0 0.2em 0 0 #ffe8b3, 0.1em -0.1em 0 0.1em #ffe8b3;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #dedede;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #FFB300;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #191919;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #FFB300;
-  border: 1px solid #FFB300;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #212121;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #FFA000;
-  color: #212121;
-  border-color: #FFA000;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #252525;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #FFB300;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #7fbcec;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #b7d8b7;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe399;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #f8b7bd;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-message.p-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.25em;
-}
-body .p-message .p-message-text {
-  font-size: 1em;
-}
-body .p-growl {
-  top: 70px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 2.571em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 2.571em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #FFB300;
-  color: #212121;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #FF8F00;
-  color: #212121;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(50, 50, 50, 0);
-  border-bottom-color: #323232;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(25, 25, 25, 0);
-  border-bottom-color: #191919;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #323232;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #191919;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #888888;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #191919;
-  border-top: 0 none;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #888888;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #dedede;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #4c4c4c;
-  color: #dedede;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #4c4c4c;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #dedede;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #888888;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #dedede;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #323232;
-  color: #dedede;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #dedede;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #323232;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #dedede;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #888888;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #888888;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #888888;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #dedede;
-  background-color: #191919;
-  border: 1px solid #191919;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #dedede;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #FFB300;
-  color: #212121;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #dedede;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #191919;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #FFB300;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #212121;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #212121;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #FFB300;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #212121;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #212121;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #FFB300;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #212121;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #212121;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #FFB300;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #212121;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #212121;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #191919;
-  color: #dedede;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: transparent;
-  border-bottom: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #888888;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #FFB300;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #FFB300;
-  border: 1px solid #FFB300;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #212121;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #212121;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #FFB300;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #212121;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #212121;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #888888;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #FFB300;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #FFB300;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #FFB300;
-  background-color: #FFB300;
-  color: #212121;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #212121;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #FF8F00;
-  background-color: #FF8F00;
-  color: #212121;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #212121;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: inset 0 0 0 0.2em #ffe8b3;
-  box-shadow: inset 0 0 0 0.2em #ffe8b3;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 24px;
-  background-color: #eaeaea;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #FFB300;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #dedede;
-  line-height: 24px;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #FFB300;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #191919;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #FFB300;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #252525;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #FFB300;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #FFB300;
-  border: 1px solid #FFB300;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #212121;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #FFA000;
-  color: #212121;
-  border-color: #FFA000;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #FFB300;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #FFB300;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #ffe8b3;
-  -moz-box-shadow: 0 0 0 0.2em #ffe8b3;
-  box-shadow: 0 0 0 0.2em #ffe8b3;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/luna-blue/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-blue/theme.css b/public/resources/themes/luna-blue/theme.css
deleted file mode 100644
index 4f3f683b1e..0000000000
--- a/public/resources/themes/luna-blue/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #1f7ed0;
-  --primaryTextColor: #ffffff;
-  --panelContentBorder: 1px solid #191919;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #1f7ed0;
-  text-decoration: none;
-}
-body a:hover {
-  color: #1b71bb;
-}
-body a:active {
-  color: #1864a6;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #dedede;
-  background: #585858;
-  padding: 0.429em;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #1f7ed0;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #1f7ed0;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #1f7ed0;
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #1864a6;
-  background-color: #1864a6;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #1f7ed0;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #1f7ed0;
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #1864a6;
-  background-color: #1864a6;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #585858;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #323232;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #585858;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #1f7ed0;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #1b71bb;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #1f7ed0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #dedede;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #1f7ed0;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #ffffff;
-  background-color: #1f7ed0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #1f7ed0;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #dedede;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #1f7ed0;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #1f7ed0;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #dedede;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #ffffff;
-  background-color: #1f7ed0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #1f7ed0;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #dedede;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #252525;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #888888;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #ffffff;
-  background-color: #1f7ed0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #323232;
-  border: 1px solid #191919;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #252525;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #323232;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #ffffff;
-  background-color: #1f7ed0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #585858;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #191919;
-  background-color: #191919;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #191919;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #dedede;
-}
-body .p-editor-container .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #1f7ed0;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #1f7ed0;
-}
-body .p-rating .p-rating-icon {
-  font-size: 20px;
-  text-align: center;
-  display: inline-block;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #CD3A3A;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #1f7ed0;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #d76161;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #585858;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.5715em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.5715em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.143em;
-  width: 1.143em;
-  background-color: #4c4c4c;
-  border: 2px solid #1f7ed0;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-slider .p-slider-range {
-  background-color: #1f7ed0;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: #1f7ed0;
-  border: 2px solid #1f7ed0;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 20em;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #dedede;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #252525;
-  color: #dedede;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  border-color: #1f7ed0;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #dedede;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #ffffff;
-  background-color: #1f7ed0;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #1864a6;
-  color: #ffffff;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #ffffff;
-  background-color: #1f7ed0;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #3f3f3f;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #3f3f3f;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #888888;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #dedede;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #dedede;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #ffffff;
-  background-color: #1f7ed0;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #3f3f3f;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #191919;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #1b71bb;
-  color: #ffffff;
-  border-color: #1b71bb;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #1864a6;
-  color: #ffffff;
-  border-color: #1864a6;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #191919;
-  background-color: #252525;
-  color: #888888;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #9b9b9b;
-}
-body :-moz-placeholder {
-  color: #9b9b9b;
-}
-body ::-moz-placeholder {
-  color: #9b9b9b;
-}
-body :-ms-input-placeholder {
-  color: #9b9b9b;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #CD3A3A;
-}
-
-body .p-button {
-  margin: 0;
-  color: #ffffff;
-  background-color: #1f7ed0;
-  border: 1px solid #1f7ed0;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-button:enabled:hover {
-  background-color: #1b71bb;
-  color: #ffffff;
-  border-color: #1b71bb;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-button:enabled:active {
-  background-color: #1864a6;
-  color: #ffffff;
-  border-color: #1864a6;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #888888;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #1f7ed0;
-  border-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #1b71bb;
-  border-color: #1b71bb;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #888888;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #1f7ed0;
-  border-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #1b71bb;
-  border-color: #1b71bb;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f4f4f4;
-  border: 1px solid #f4f4f4;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #c8c8c8;
-  color: #333333;
-  border-color: #c8c8c8;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #a0a0a0;
-  color: #333333;
-  border-color: #a0a0a0;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #ffffff;
-  background-color: #34A835;
-  border: 1px solid #34A835;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #107D11;
-  color: #ffffff;
-  border-color: #107D11;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
-  -moz-box-shadow: 0 0 0 0.2em #aae5aa;
-  box-shadow: 0 0 0 0.2em #aae5aa;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #0C6B0D;
-  color: #ffffff;
-  border-color: #0C6B0D;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #ffba01;
-  border: 1px solid #ffba01;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #ED990B;
-  color: #333333;
-  border-color: #ED990B;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
-  -moz-box-shadow: 0 0 0 0.2em #ffeab4;
-  box-shadow: 0 0 0 0.2em #ffeab4;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #D38B10;
-  color: #333333;
-  border-color: #D38B10;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #ffffff;
-  background-color: #e91224;
-  border: 1px solid #e91224;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #c01120;
-  color: #ffffff;
-  border-color: #c01120;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
-  -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
-  box-shadow: 0 0 0 0.2em #f9b4ba;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #a90000;
-  color: #ffffff;
-  border-color: #a90000;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  background-color: #191919;
-  color: #dedede;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #888888;
-  border: 1px solid transparent;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #888888;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #1f7ed0;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #1f7ed0;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  color: #dedede;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #888888;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #1f7ed0;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #1f7ed0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #1f7ed0;
-  border: 1px solid #1f7ed0;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #1864a6;
-  background-color: #1864a6;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: transparent;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  float: none;
-  display: inline-block;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #888888;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #1f7ed0;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #1f7ed0;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #1f7ed0;
-  border: 1px solid #1f7ed0;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #1864a6;
-  background-color: #1864a6;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #191919;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #888888;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #323232;
-  color: #dedede;
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-body .p-paginator {
-  background-color: #252525;
-  border: 1px solid #191919;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #1f7ed0;
-  background-color: #ffffff;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #dedede;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #82bbec;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #1f7ed0;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #1f7ed0;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #aed3f3;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #aed3f3, 0 0.2em 0 0 #aed3f3;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #aed3f3, 0 0.2em 0 0 #aed3f3, -0.1em -0.1em 0 0.1em #aed3f3;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #aed3f3, 0 0.2em 0 0 #aed3f3, 0.1em -0.1em 0 0.1em #aed3f3;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #323232;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #82bbec;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #1f7ed0;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #191919;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc th {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #323232;
-  border: 1px solid #191919;
-  color: #dedede;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #191919;
-}
-body .fc .fc-row {
-  border-right: 1px solid #191919;
-}
-body .fc .fc-event {
-  background-color: #1b71bb;
-  border: 1px solid #1b71bb;
-  color: #ffffff;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background-color: #1f7ed0;
-  border: 1px solid #1f7ed0;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #1b71bb;
-  color: #ffffff;
-  border-color: #1b71bb;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc .fc-divider {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #1f7ed0;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #1f7ed0;
-}
-body .p-tree {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.286em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #1f7ed0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #1f7ed0;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #1f7ed0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #252525;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #0e3b61;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #888888;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #1f7ed0;
-  background-color: #ffffff;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #888888;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #1f7ed0;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: #82bbec;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #aed3f3;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #aed3f3, 0 0.2em 0 0 #aed3f3;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #aed3f3, 0 0.2em 0 0 #aed3f3, -0.1em -0.1em 0 0.1em #aed3f3;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #aed3f3, 0 0.2em 0 0 #aed3f3, 0.1em -0.1em 0 0.1em #aed3f3;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #dedede;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #1f7ed0;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #191919;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #1f7ed0;
-  border: 1px solid #1f7ed0;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #1b71bb;
-  color: #ffffff;
-  border-color: #1b71bb;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #252525;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #1f7ed0;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #7fbcec;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #b7d8b7;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe399;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #f8b7bd;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-message.p-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.25em;
-}
-body .p-message .p-message-text {
-  font-size: 1em;
-}
-body .p-growl {
-  top: 70px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 2.571em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 2.571em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #1f7ed0;
-  color: #ffffff;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #1864a6;
-  color: #ffffff;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(50, 50, 50, 0);
-  border-bottom-color: #323232;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(25, 25, 25, 0);
-  border-bottom-color: #191919;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #323232;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #191919;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #888888;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #191919;
-  border-top: 0 none;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #888888;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #dedede;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #4c4c4c;
-  color: #dedede;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #4c4c4c;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #dedede;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #888888;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #dedede;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #323232;
-  color: #dedede;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #dedede;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #323232;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #dedede;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #888888;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #888888;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #888888;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #dedede;
-  background-color: #191919;
-  border: 1px solid #191919;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #dedede;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #1f7ed0;
-  color: #ffffff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #dedede;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #191919;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1f7ed0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1f7ed0;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1f7ed0;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1f7ed0;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #191919;
-  color: #dedede;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: transparent;
-  border-bottom: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #888888;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #1f7ed0;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #1f7ed0;
-  border: 1px solid #1f7ed0;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1f7ed0;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #888888;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #1f7ed0;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #1f7ed0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #1f7ed0;
-  background-color: #1f7ed0;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #1864a6;
-  background-color: #1864a6;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: inset 0 0 0 0.2em #aed3f3;
-  box-shadow: inset 0 0 0 0.2em #aed3f3;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 24px;
-  background-color: #eaeaea;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #1f7ed0;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #dedede;
-  line-height: 24px;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #1f7ed0;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #191919;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #1f7ed0;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #252525;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #1f7ed0;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #1f7ed0;
-  border: 1px solid #1f7ed0;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #1b71bb;
-  color: #ffffff;
-  border-color: #1b71bb;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #1f7ed0;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #1f7ed0;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #aed3f3;
-  -moz-box-shadow: 0 0 0 0.2em #aed3f3;
-  box-shadow: 0 0 0 0.2em #aed3f3;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/luna-green/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-green/theme.css b/public/resources/themes/luna-green/theme.css
deleted file mode 100644
index ec87181788..0000000000
--- a/public/resources/themes/luna-green/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #1ea04c;
-  --primaryTextColor: #ffffff;
-  --panelContentBorder: 1px solid #191919;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #1ea04c;
-  text-decoration: none;
-}
-body a:hover {
-  color: #1b9044;
-}
-body a:active {
-  color: #18803c;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #dedede;
-  background: #585858;
-  padding: 0.429em;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #1ea04c;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #1ea04c;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #1ea04c;
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #18803c;
-  background-color: #18803c;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #1ea04c;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #1ea04c;
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #18803c;
-  background-color: #18803c;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #585858;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #323232;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #585858;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #1ea04c;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #1b9044;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #1ea04c;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #dedede;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #1ea04c;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #ffffff;
-  background-color: #1ea04c;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #1ea04c;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #dedede;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #1ea04c;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #1ea04c;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #dedede;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #ffffff;
-  background-color: #1ea04c;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #1ea04c;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #dedede;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #252525;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #888888;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #ffffff;
-  background-color: #1ea04c;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #323232;
-  border: 1px solid #191919;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #252525;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #323232;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #ffffff;
-  background-color: #1ea04c;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #585858;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #191919;
-  background-color: #191919;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #191919;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #dedede;
-}
-body .p-editor-container .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #1ea04c;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #1ea04c;
-}
-body .p-rating .p-rating-icon {
-  font-size: 20px;
-  text-align: center;
-  display: inline-block;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #CD3A3A;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #1ea04c;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #d76161;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #585858;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.5715em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.5715em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.143em;
-  width: 1.143em;
-  background-color: #4c4c4c;
-  border: 2px solid #1ea04c;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-slider .p-slider-range {
-  background-color: #1ea04c;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: #1ea04c;
-  border: 2px solid #1ea04c;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 20em;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #dedede;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #252525;
-  color: #dedede;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  border-color: #1ea04c;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #dedede;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #ffffff;
-  background-color: #1ea04c;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #18803c;
-  color: #ffffff;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #ffffff;
-  background-color: #1ea04c;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #3f3f3f;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #3f3f3f;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #888888;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #dedede;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #dedede;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #ffffff;
-  background-color: #1ea04c;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #3f3f3f;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #191919;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #1b9044;
-  color: #ffffff;
-  border-color: #1b9044;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #18803c;
-  color: #ffffff;
-  border-color: #18803c;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #191919;
-  background-color: #252525;
-  color: #888888;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #9b9b9b;
-}
-body :-moz-placeholder {
-  color: #9b9b9b;
-}
-body ::-moz-placeholder {
-  color: #9b9b9b;
-}
-body :-ms-input-placeholder {
-  color: #9b9b9b;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #CD3A3A;
-}
-
-body .p-button {
-  margin: 0;
-  color: #ffffff;
-  background-color: #1ea04c;
-  border: 1px solid #1ea04c;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-button:enabled:hover {
-  background-color: #1b9044;
-  color: #ffffff;
-  border-color: #1b9044;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-button:enabled:active {
-  background-color: #18803c;
-  color: #ffffff;
-  border-color: #18803c;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #888888;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #1ea04c;
-  border-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #1b9044;
-  border-color: #1b9044;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #888888;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #1ea04c;
-  border-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #1b9044;
-  border-color: #1b9044;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f4f4f4;
-  border: 1px solid #f4f4f4;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #c8c8c8;
-  color: #333333;
-  border-color: #c8c8c8;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #a0a0a0;
-  color: #333333;
-  border-color: #a0a0a0;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #ffffff;
-  background-color: #34A835;
-  border: 1px solid #34A835;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #107D11;
-  color: #ffffff;
-  border-color: #107D11;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
-  -moz-box-shadow: 0 0 0 0.2em #aae5aa;
-  box-shadow: 0 0 0 0.2em #aae5aa;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #0C6B0D;
-  color: #ffffff;
-  border-color: #0C6B0D;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #ffba01;
-  border: 1px solid #ffba01;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #ED990B;
-  color: #333333;
-  border-color: #ED990B;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
-  -moz-box-shadow: 0 0 0 0.2em #ffeab4;
-  box-shadow: 0 0 0 0.2em #ffeab4;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #D38B10;
-  color: #333333;
-  border-color: #D38B10;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #ffffff;
-  background-color: #e91224;
-  border: 1px solid #e91224;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #c01120;
-  color: #ffffff;
-  border-color: #c01120;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
-  -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
-  box-shadow: 0 0 0 0.2em #f9b4ba;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #a90000;
-  color: #ffffff;
-  border-color: #a90000;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  background-color: #191919;
-  color: #dedede;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #888888;
-  border: 1px solid transparent;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #888888;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #1ea04c;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #1ea04c;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  color: #dedede;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #888888;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #1ea04c;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #1ea04c;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #1ea04c;
-  border: 1px solid #1ea04c;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #18803c;
-  background-color: #18803c;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: transparent;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  float: none;
-  display: inline-block;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #888888;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #1ea04c;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #1ea04c;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #1ea04c;
-  border: 1px solid #1ea04c;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #18803c;
-  background-color: #18803c;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #191919;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #888888;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #323232;
-  color: #dedede;
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-body .p-paginator {
-  background-color: #252525;
-  border: 1px solid #191919;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #1ea04c;
-  background-color: #ffffff;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #dedede;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5de18c;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #1ea04c;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #1ea04c;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #88e9aa;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #88e9aa, 0 0.2em 0 0 #88e9aa;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #88e9aa, 0 0.2em 0 0 #88e9aa, -0.1em -0.1em 0 0.1em #88e9aa;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #88e9aa, 0 0.2em 0 0 #88e9aa, 0.1em -0.1em 0 0.1em #88e9aa;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #323232;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #5de18c;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #1ea04c;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #191919;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc th {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #323232;
-  border: 1px solid #191919;
-  color: #dedede;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #191919;
-}
-body .fc .fc-row {
-  border-right: 1px solid #191919;
-}
-body .fc .fc-event {
-  background-color: #1b9044;
-  border: 1px solid #1b9044;
-  color: #ffffff;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background-color: #1ea04c;
-  border: 1px solid #1ea04c;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #1b9044;
-  color: #ffffff;
-  border-color: #1b9044;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc .fc-divider {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #1ea04c;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #1ea04c;
-}
-body .p-tree {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.286em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #1ea04c;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #1ea04c;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #1ea04c;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #252525;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #0a3519;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #888888;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #1ea04c;
-  background-color: #ffffff;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #888888;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #1ea04c;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5de18c;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #88e9aa;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #88e9aa, 0 0.2em 0 0 #88e9aa;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #88e9aa, 0 0.2em 0 0 #88e9aa, -0.1em -0.1em 0 0.1em #88e9aa;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #88e9aa, 0 0.2em 0 0 #88e9aa, 0.1em -0.1em 0 0.1em #88e9aa;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #dedede;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #1ea04c;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #191919;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #1ea04c;
-  border: 1px solid #1ea04c;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #1b9044;
-  color: #ffffff;
-  border-color: #1b9044;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #252525;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #1ea04c;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #7fbcec;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #b7d8b7;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe399;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #f8b7bd;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-message.p-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.25em;
-}
-body .p-message .p-message-text {
-  font-size: 1em;
-}
-body .p-growl {
-  top: 70px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 2.571em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 2.571em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #1ea04c;
-  color: #ffffff;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #18803c;
-  color: #ffffff;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(50, 50, 50, 0);
-  border-bottom-color: #323232;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(25, 25, 25, 0);
-  border-bottom-color: #191919;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #323232;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #191919;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #888888;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #191919;
-  border-top: 0 none;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #888888;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #dedede;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #4c4c4c;
-  color: #dedede;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #4c4c4c;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #dedede;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #888888;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #dedede;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #323232;
-  color: #dedede;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #dedede;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #323232;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #dedede;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #888888;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #888888;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #888888;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #dedede;
-  background-color: #191919;
-  border: 1px solid #191919;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #dedede;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #1ea04c;
-  color: #ffffff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #dedede;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #191919;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1ea04c;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1ea04c;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1ea04c;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1ea04c;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #191919;
-  color: #dedede;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: transparent;
-  border-bottom: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #888888;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #1ea04c;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #1ea04c;
-  border: 1px solid #1ea04c;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #1ea04c;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #888888;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #1ea04c;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #1ea04c;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #1ea04c;
-  background-color: #1ea04c;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #18803c;
-  background-color: #18803c;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: inset 0 0 0 0.2em #88e9aa;
-  box-shadow: inset 0 0 0 0.2em #88e9aa;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 24px;
-  background-color: #eaeaea;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #1ea04c;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #dedede;
-  line-height: 24px;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #1ea04c;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #191919;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #1ea04c;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #252525;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #1ea04c;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #1ea04c;
-  border: 1px solid #1ea04c;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #1b9044;
-  color: #ffffff;
-  border-color: #1b9044;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #1ea04c;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #1ea04c;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #88e9aa;
-  -moz-box-shadow: 0 0 0 0.2em #88e9aa;
-  box-shadow: 0 0 0 0.2em #88e9aa;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/luna-pink/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/luna-pink/theme.css b/public/resources/themes/luna-pink/theme.css
deleted file mode 100644
index 3fa80502a5..0000000000
--- a/public/resources/themes/luna-pink/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #cc285c;
-  --primaryTextColor: #ffffff;
-  --panelContentBorder: 1px solid #191919;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #cc285c;
-  text-decoration: none;
-}
-body a:hover {
-  color: #b72452;
-}
-body a:active {
-  color: #a32049;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #dedede;
-  background: #585858;
-  padding: 0.429em;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #cc285c;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #cc285c;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #cc285c;
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #a32049;
-  background-color: #a32049;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #585858;
-  background-color: #585858;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #cc285c;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #cc285c;
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #a32049;
-  background-color: #a32049;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #585858;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #323232;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #585858;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #cc285c;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #b72452;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #cc285c;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #dedede;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #cc285c;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #ffffff;
-  background-color: #cc285c;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #cc285c;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #dedede;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #cc285c;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #cc285c;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #dedede;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #ffffff;
-  background-color: #cc285c;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect {
-  background: #585858;
-  border: 1px solid #585858;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #cc285c;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #dedede;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #9b9b9b;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #585858;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #191919;
-  background-color: #323232;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #252525;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #888888;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #ffffff;
-  background-color: #cc285c;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #323232;
-  border: 1px solid #191919;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #252525;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #323232;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #ffffff;
-  background-color: #cc285c;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #dedede;
-  background-color: #4c4c4c;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #585858;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #191919;
-  background-color: #191919;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #191919;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #585858;
-  color: #dedede;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #dedede;
-}
-body .p-editor-container .ql-picker-label {
-  color: #dedede;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #cc285c;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #cc285c;
-}
-body .p-rating .p-rating-icon {
-  font-size: 20px;
-  text-align: center;
-  display: inline-block;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #CD3A3A;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #cc285c;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #d76161;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 2.786em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 2.357em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #585858;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.5715em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.5715em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.143em;
-  width: 1.143em;
-  background-color: #4c4c4c;
-  border: 2px solid #cc285c;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-slider .p-slider-range {
-  background-color: #cc285c;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: #cc285c;
-  border: 2px solid #cc285c;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 20em;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #dedede;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #252525;
-  color: #dedede;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  border-color: #cc285c;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #dedede;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #ffffff;
-  background-color: #cc285c;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #a32049;
-  color: #ffffff;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #ffffff;
-  background-color: #cc285c;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #191919;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #3f3f3f;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #3f3f3f;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #888888;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #dedede;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #dedede;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #ffffff;
-  background-color: #cc285c;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #3f3f3f;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #191919;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #b72452;
-  color: #ffffff;
-  border-color: #b72452;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #a32049;
-  color: #ffffff;
-  border-color: #a32049;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #191919;
-  background-color: #252525;
-  color: #888888;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #9b9b9b;
-}
-body :-moz-placeholder {
-  color: #9b9b9b;
-}
-body ::-moz-placeholder {
-  color: #9b9b9b;
-}
-body :-ms-input-placeholder {
-  color: #9b9b9b;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #CD3A3A;
-}
-
-body .p-button {
-  margin: 0;
-  color: #ffffff;
-  background-color: #cc285c;
-  border: 1px solid #cc285c;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-button:enabled:hover {
-  background-color: #b72452;
-  color: #ffffff;
-  border-color: #b72452;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-button:enabled:active {
-  background-color: #a32049;
-  color: #ffffff;
-  border-color: #a32049;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #888888;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #cc285c;
-  border-color: #cc285c;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #b72452;
-  border-color: #b72452;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button {
-  background-color: #252525;
-  border: 1px solid #252525;
-  color: #dedede;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #888888;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  border-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #dedede;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #cc285c;
-  border-color: #cc285c;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #b72452;
-  border-color: #b72452;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f4f4f4;
-  border: 1px solid #f4f4f4;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #c8c8c8;
-  color: #333333;
-  border-color: #c8c8c8;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #a0a0a0;
-  color: #333333;
-  border-color: #a0a0a0;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #ffffff;
-  background-color: #34A835;
-  border: 1px solid #34A835;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #107D11;
-  color: #ffffff;
-  border-color: #107D11;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
-  -moz-box-shadow: 0 0 0 0.2em #aae5aa;
-  box-shadow: 0 0 0 0.2em #aae5aa;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #0C6B0D;
-  color: #ffffff;
-  border-color: #0C6B0D;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #ffba01;
-  border: 1px solid #ffba01;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #ED990B;
-  color: #333333;
-  border-color: #ED990B;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
-  -moz-box-shadow: 0 0 0 0.2em #ffeab4;
-  box-shadow: 0 0 0 0.2em #ffeab4;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #D38B10;
-  color: #333333;
-  border-color: #D38B10;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #ffffff;
-  background-color: #e91224;
-  border: 1px solid #e91224;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #c01120;
-  color: #ffffff;
-  border-color: #c01120;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
-  -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
-  box-shadow: 0 0 0 0.2em #f9b4ba;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #a90000;
-  color: #ffffff;
-  border-color: #a90000;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  background-color: #191919;
-  color: #dedede;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #888888;
-  border: 1px solid transparent;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #888888;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #cc285c;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #cc285c;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #191919;
-  color: #dedede;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #888888;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #cc285c;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #cc285c;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #cc285c;
-  border: 1px solid #cc285c;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #a32049;
-  background-color: #a32049;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: transparent;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  float: none;
-  display: inline-block;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #888888;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #cc285c;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #cc285c;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #cc285c;
-  border: 1px solid #cc285c;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #a32049;
-  background-color: #a32049;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #323232;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  color: #dedede;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #191919;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #888888;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #323232;
-  color: #dedede;
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-body .p-paginator {
-  background-color: #252525;
-  border: 1px solid #191919;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #dedede;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #dedede;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #cc285c;
-  background-color: #ffffff;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #888888;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #dedede;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #e88ba9;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #cc285c;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #cc285c;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8, 0 0.2em 0 0 #f1b6c8;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8, 0 0.2em 0 0 #f1b6c8, -0.1em -0.1em 0 0.1em #f1b6c8;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8, 0 0.2em 0 0 #f1b6c8, 0.1em -0.1em 0 0.1em #f1b6c8;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #323232;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #e88ba9;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #cc285c;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #191919;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #191919;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc th {
-  background-color: #191919;
-  border: 1px solid #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #323232;
-  border: 1px solid #191919;
-  color: #dedede;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #191919;
-}
-body .fc .fc-row {
-  border-right: 1px solid #191919;
-}
-body .fc .fc-event {
-  background-color: #b72452;
-  border: 1px solid #b72452;
-  color: #ffffff;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background-color: #cc285c;
-  border: 1px solid #cc285c;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #b72452;
-  color: #ffffff;
-  border-color: #b72452;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc .fc-divider {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #cc285c;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #191919;
-  color: #dedede;
-  background-color: #252525;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #252525;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #dedede;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #cc285c;
-}
-body .p-tree {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.286em 0 0;
-  color: #888888;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.286em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #cc285c;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #cc285c;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #cc285c;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #252525;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #61132c;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #191919;
-  border-color: #191919;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #191919;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #888888;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #191919;
-  font-weight: 700;
-  color: #dedede;
-  background-color: #252525;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #888888;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #cc285c;
-  background-color: #ffffff;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #dedede;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #323232;
-  color: #dedede;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #191919;
-  padding: 0.429em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #888888;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #cc285c;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: #e88ba9;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8, 0 0.2em 0 0 #f1b6c8;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8, 0 0.2em 0 0 #f1b6c8, -0.1em -0.1em 0 0.1em #f1b6c8;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #f1b6c8, 0 0.2em 0 0 #f1b6c8, 0.1em -0.1em 0 0.1em #f1b6c8;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #dedede;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #cc285c;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #191919;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #cc285c;
-  border: 1px solid #cc285c;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #b72452;
-  color: #ffffff;
-  border-color: #b72452;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #252525;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #cc285c;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #7fbcec;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #b7d8b7;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe399;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #f8b7bd;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-message.p-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.25em;
-}
-body .p-message .p-message-text {
-  font-size: 1em;
-}
-body .p-growl {
-  top: 70px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 2.571em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 2.571em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #cc285c;
-  color: #ffffff;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #a32049;
-  color: #ffffff;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(50, 50, 50, 0);
-  border-bottom-color: #323232;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(25, 25, 25, 0);
-  border-bottom-color: #191919;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #323232;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #191919;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #888888;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #dedede;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #191919;
-  border-top: 0 none;
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #323232;
-  color: #dedede;
-  padding: 0.571em 1em;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #888888;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #dedede;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #4c4c4c;
-  color: #dedede;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #4c4c4c;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #4c4c4c;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #dedede;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #888888;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #dedede;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #323232;
-  color: #dedede;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #dedede;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #323232;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #dedede;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #888888;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #888888;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #888888;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #dedede;
-  background-color: #191919;
-  border: 1px solid #191919;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #dedede;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #cc285c;
-  color: #ffffff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #dedede;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #191919;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #cc285c;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #cc285c;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #cc285c;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #252525;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #cc285c;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #191919;
-  color: #dedede;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #191919;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: transparent;
-  border-bottom: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.571em 1em;
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #888888;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #191919;
-  border: 1px solid #191919;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #cc285c;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #dedede;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #cc285c;
-  border: 1px solid #cc285c;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #dedede;
-  background-color: #191919;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #cc285c;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #ffffff;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #dedede;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #888888;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #191919;
-  background-color: #191919;
-  color: #cc285c;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #cc285c;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #cc285c;
-  background-color: #cc285c;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #a32049;
-  background-color: #a32049;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #252525;
-  border: 1px solid #191919;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #dedede;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #4c4c4c;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #dedede;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: inset 0 0 0 0.2em #f1b6c8;
-  box-shadow: inset 0 0 0 0.2em #f1b6c8;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 24px;
-  background-color: #eaeaea;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #cc285c;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #dedede;
-  line-height: 24px;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #cc285c;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #191919;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #191919;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #cc285c;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #252525;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #cc285c;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #cc285c;
-  border: 1px solid #cc285c;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #b72452;
-  color: #ffffff;
-  border-color: #b72452;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #cc285c;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #cc285c;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #323232;
-  color: #dedede;
-  border: 1px solid #191919;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #4c4c4c;
-  color: #dedede;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #f1b6c8;
-  -moz-box-shadow: 0 0 0 0.2em #f1b6c8;
-  box-shadow: 0 0 0 0.2em #f1b6c8;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/nova-colored/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-colored/theme.css b/public/resources/themes/nova-colored/theme.css
deleted file mode 100644
index 60ec13e68d..0000000000
--- a/public/resources/themes/nova-colored/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #007ad9;
-  --primaryTextColor: #ffffff;
-  --panelContentBorder: 1px solid #c8c8c8;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #007ad9;
-  text-decoration: none;
-}
-body a:hover {
-  color: #116fbf;
-}
-body a:active {
-  color: #005b9f;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #333333;
-  background: #ffffff;
-  padding: 0.429em;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #212121;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #a6a6a6;
-  background-color: #ffffff;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #a6a6a6;
-  background-color: #ffffff;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #212121;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #cccccc;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #ffffff;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #b7b7b7;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #007ad9;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #116fbf;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #333333;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #e02365;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #ffffff;
-  background-color: #e02365;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #d8dae2;
-  color: #333333;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #333333;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #e02365;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown {
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #666666;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #848484;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #ffffff;
-  background-color: #e02365;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-multiselect {
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #333333;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #666666;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #007ad9;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #848484;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #ffffff;
-  background-color: #e02365;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #007ad9;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #ffffff;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #ffffff;
-  background-color: #e02365;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #a6a6a6;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #c8c8c8;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #ffffff;
-  color: #333333;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #ffffff;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #ffffff;
-}
-body .p-editor-container .ql-picker-label {
-  color: #ffffff;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #e02365;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #e02365;
-}
-body .p-rating .p-rating-icon {
-  font-size: 20px;
-  text-align: center;
-  display: inline-block;
-  color: #333333;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #e4018d;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #007ad9;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #b5019f;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 2.429em;
-}
-body .p-spinner .p-spinner-button {
-  width: 2em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 2.429em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 2em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #c8c8c8;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.5715em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.5715em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.143em;
-  width: 1.143em;
-  background-color: #ffffff;
-  border: 2px solid #666666;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-slider .p-slider-range {
-  background-color: #007ad9;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: 2px solid #666666;
-  border: 2px solid #007ad9;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 20em;
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #a6a6a6;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #007ad9;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #eaeaea;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #ffffff;
-  color: #333333;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #a6a6a6;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #a6a6a6;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #333333;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #d0d0d0;
-  color: #333333;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #a6a6a6;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #d8dae2;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #d8dae2;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #a6a6a6;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #007ad9;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #333333;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #d8dae2;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #007ad9;
-  padding: 0.571em 1em;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #a6a6a6;
-  background-color: #eaeaea;
-  color: #848484;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #666666;
-}
-body :-moz-placeholder {
-  color: #666666;
-}
-body ::-moz-placeholder {
-  color: #666666;
-}
-body :-ms-input-placeholder {
-  color: #666666;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #a80000;
-}
-
-body .p-button {
-  margin: 0;
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2.25em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2.25em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #dadada;
-  border: 1px solid #dadada;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #666666;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #007ad9;
-  border-color: #007ad9;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #116fbf;
-  border-color: #116fbf;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button {
-  background-color: #dadada;
-  border: 1px solid #dadada;
-  color: #333333;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #666666;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #007ad9;
-  border-color: #007ad9;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #116fbf;
-  border-color: #116fbf;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f4f4f4;
-  border: 1px solid #f4f4f4;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #c8c8c8;
-  color: #333333;
-  border-color: #c8c8c8;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #a0a0a0;
-  color: #333333;
-  border-color: #a0a0a0;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #ffffff;
-  background-color: #34A835;
-  border: 1px solid #34A835;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #107D11;
-  color: #ffffff;
-  border-color: #107D11;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
-  -moz-box-shadow: 0 0 0 0.2em #aae5aa;
-  box-shadow: 0 0 0 0.2em #aae5aa;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #0C6B0D;
-  color: #ffffff;
-  border-color: #0C6B0D;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #ffba01;
-  border: 1px solid #ffba01;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #ED990B;
-  color: #333333;
-  border-color: #ED990B;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
-  -moz-box-shadow: 0 0 0 0.2em #ffeab4;
-  box-shadow: 0 0 0 0.2em #ffeab4;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #D38B10;
-  color: #333333;
-  border-color: #D38B10;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #ffffff;
-  background-color: #e91224;
-  border: 1px solid #e91224;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #c01120;
-  color: #ffffff;
-  border-color: #c01120;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
-  -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
-  box-shadow: 0 0 0 0.2em #f9b4ba;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #a90000;
-  color: #ffffff;
-  border-color: #a90000;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  background-color: #007ad9;
-  color: #ffffff;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #ffffff;
-  border: 1px solid transparent;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #5ab7ff;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-  background-color: #007ad9;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #ffffff;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #27a0ff;
-  border: 1px solid #27a0ff;
-  color: #ffffff;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #ffffff;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-  background-color: #007ad9;
-  color: #ffffff;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #27a0ff;
-  border: 1px solid #27a0ff;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #e02365;
-  border: 1px solid #e02365;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #e96694;
-  background-color: #e96694;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: transparent;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-  float: none;
-  display: inline-block;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #ffffff;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #27a0ff;
-  border: 1px solid #27a0ff;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #e02365;
-  border: 1px solid #e02365;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #e96694;
-  background-color: #e96694;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #ffffff;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #ffffff;
-  color: #333333;
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-body .p-paginator {
-  background-color: #f4f4f4;
-  border: 1px solid #c8c8c8;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #848484;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #848484;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #333333;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #848484;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #848484;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #e02365;
-  background-color: #ffffff;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #333333;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #ffffff;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #c8c8c8;
-  padding: 0.429em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #848484;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #333333;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #f093b3;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #e02365;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #e02365;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, -0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, 0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #f093b3;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #007ad9;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #007ad9;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc th {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #007ad9;
-}
-body .fc .fc-row {
-  border-right: 1px solid #007ad9;
-}
-body .fc .fc-event {
-  background-color: #116fbf;
-  border: 1px solid #116fbf;
-  color: #ffffff;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc .fc-divider {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #007ad9;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #e02365;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #007ad9;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #e02365;
-}
-body .p-tree {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.286em 0 0;
-  color: #848484;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.286em 0 0;
-  color: #848484;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.286em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #e02365;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #e02365;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #007ad9;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #007ad9;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #731033;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #c8c8c8;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #c8c8c8;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #848484;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #e02365;
-  background-color: #ffffff;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #333333;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #ffffff;
-  color: #333333;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #c8c8c8;
-  padding: 0.429em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #848484;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #e02365;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: #f093b3;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, -0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, 0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #333333;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #007ad9;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #007ad9;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #333333;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #ffffff;
-  color: #007ad9;
-  border-color: solid 1px rgba(178, 193, 205, 0.64);
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #b2c1cd;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #007ad9;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #7fbcec;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #b7d8b7;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe399;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #f8b7bd;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-message.p-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.25em;
-}
-body .p-message .p-message-text {
-  font-size: 1em;
-}
-body .p-growl {
-  top: 70px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 2.571em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 2.571em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #007ad9;
-  color: #ffffff;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(200, 200, 200, 0);
-  border-bottom-color: #c8c8c8;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #ffffff;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #c8c8c8;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #ffffff;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #5ab7ff;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #c8c8c8;
-  border-top: 0 none;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #848484;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #333333;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #333333;
-  color: #ffffff;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #333333;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #333333;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #333333;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #333333;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #ffffff;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #ffffff;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #5ab7ff;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #ffffff;
-  color: #333333;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #ffffff;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #333333;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #848484;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #848484;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #848484;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #333333;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #848484;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #e02365;
-  color: #ffffff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #333333;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #c8c8c8;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #333333;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #333333;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #ffffff;
-  background-color: #007ad9;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #ffffff;
-  background-color: #007ad9;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #27a0ff;
-  color: #ffffff;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: transparent;
-  border-bottom: 1px solid #007ad9;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #27a0ff;
-  border: 1px solid #27a0ff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #5ab7ff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #e02365;
-  border: 1px solid #e02365;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #ffffff;
-  background-color: #007ad9;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #27a0ff;
-  background-color: #27a0ff;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #e02365;
-  background-color: #e02365;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #e96694;
-  background-color: #e96694;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 24px;
-  background-color: #eaeaea;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #007ad9;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #333333;
-  line-height: 24px;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #007ad9;
-  color: #ffffff;
-  border: 1px solid #007ad9;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #007ad9;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #b2c1cd;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #333333;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #ffffff;
-  color: #007ad9;
-  border-color: solid 1px rgba(178, 193, 205, 0.64);
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #007ad9;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #007ad9;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/nova-dark/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-dark/theme.css b/public/resources/themes/nova-dark/theme.css
deleted file mode 100644
index 3b586671de..0000000000
--- a/public/resources/themes/nova-dark/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #007ad9;
-  --primaryTextColor: #ffffff;
-  --panelContentBorder: 1px solid #c8c8c8;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #007ad9;
-  text-decoration: none;
-}
-body a:hover {
-  color: #116fbf;
-}
-body a:active {
-  color: #005b9f;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #333333;
-  background: #ffffff;
-  padding: 0.429em;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #212121;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #a6a6a6;
-  background-color: #ffffff;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #a6a6a6;
-  background-color: #ffffff;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #212121;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #cccccc;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #ffffff;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #b7b7b7;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #007ad9;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #116fbf;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #333333;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #007ad9;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #d8dae2;
-  color: #333333;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #333333;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #007ad9;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown {
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #666666;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #848484;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-multiselect {
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #333333;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #666666;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #007ad9;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #848484;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #007ad9;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #ffffff;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #a6a6a6;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #333333;
-  background-color: #333333;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #c8c8c8;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #ffffff;
-  color: #333333;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #ffffff;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #ffffff;
-}
-body .p-editor-container .ql-picker-label {
-  color: #ffffff;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #007ad9;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #007ad9;
-}
-body .p-rating .p-rating-icon {
-  font-size: 20px;
-  text-align: center;
-  display: inline-block;
-  color: #333333;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #e4018d;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #007ad9;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #b5019f;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 2.429em;
-}
-body .p-spinner .p-spinner-button {
-  width: 2em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 2.429em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 2em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #c8c8c8;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.5715em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.5715em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.143em;
-  width: 1.143em;
-  background-color: #ffffff;
-  border: 2px solid #666666;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-transition: box-color 0.2s;
-  -o-transition: box-color 0.2s;
-  -webkit-transition: box-color 0.2s;
-  transition: box-color 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-slider .p-slider-range {
-  background-color: #007ad9;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: 2px solid #666666;
-  border: 2px solid #007ad9;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 20em;
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #a6a6a6;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #007ad9;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #eaeaea;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #ffffff;
-  color: #333333;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #a6a6a6;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #a6a6a6;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #333333;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #d0d0d0;
-  color: #333333;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #a6a6a6;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #d8dae2;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #d8dae2;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #a6a6a6;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #007ad9;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #333333;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #d8dae2;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #333333;
-  padding: 0.571em 1em;
-  border: 1px solid #333333;
-  color: #ffffff;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #a6a6a6;
-  background-color: #eaeaea;
-  color: #848484;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #666666;
-}
-body :-moz-placeholder {
-  color: #666666;
-}
-body ::-moz-placeholder {
-  color: #666666;
-}
-body :-ms-input-placeholder {
-  color: #666666;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #a80000;
-}
-
-body .p-button {
-  margin: 0;
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2.25em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2.25em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #dadada;
-  border: 1px solid #dadada;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #666666;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #007ad9;
-  border-color: #007ad9;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #116fbf;
-  border-color: #116fbf;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button {
-  background-color: #dadada;
-  border: 1px solid #dadada;
-  color: #333333;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #666666;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #007ad9;
-  border-color: #007ad9;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #116fbf;
-  border-color: #116fbf;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f4f4f4;
-  border: 1px solid #f4f4f4;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #c8c8c8;
-  color: #333333;
-  border-color: #c8c8c8;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #a0a0a0;
-  color: #333333;
-  border-color: #a0a0a0;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #ffffff;
-  background-color: #34A835;
-  border: 1px solid #34A835;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #107D11;
-  color: #ffffff;
-  border-color: #107D11;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
-  -moz-box-shadow: 0 0 0 0.2em #aae5aa;
-  box-shadow: 0 0 0 0.2em #aae5aa;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #0C6B0D;
-  color: #ffffff;
-  border-color: #0C6B0D;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #ffba01;
-  border: 1px solid #ffba01;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #ED990B;
-  color: #333333;
-  border-color: #ED990B;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
-  -moz-box-shadow: 0 0 0 0.2em #ffeab4;
-  box-shadow: 0 0 0 0.2em #ffeab4;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #D38B10;
-  color: #333333;
-  border-color: #D38B10;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #ffffff;
-  background-color: #e91224;
-  border: 1px solid #e91224;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #c01120;
-  color: #ffffff;
-  border-color: #c01120;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
-  -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
-  box-shadow: 0 0 0 0.2em #f9b4ba;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #a90000;
-  color: #ffffff;
-  border-color: #a90000;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  background-color: #333333;
-  color: #ffffff;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #ffffff;
-  border: 1px solid transparent;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #b4b4b4;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #333333;
-  color: #ffffff;
-  background-color: #333333;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #ffffff;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #494949;
-  border: 1px solid #494949;
-  color: #ffffff;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #ffffff;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #333333;
-  color: #ffffff;
-  background-color: #333333;
-  color: #ffffff;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #494949;
-  border: 1px solid #494949;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: transparent;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #333333;
-  background-color: #333333;
-  float: none;
-  display: inline-block;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #ffffff;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #494949;
-  border: 1px solid #494949;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #333333;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #ffffff;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #ffffff;
-  color: #333333;
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-body .p-paginator {
-  background-color: #f4f4f4;
-  border: 1px solid #c8c8c8;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #848484;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #848484;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #333333;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #848484;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #848484;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #007ad9;
-  background-color: #ffffff;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #333333;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #ffffff;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #c8c8c8;
-  padding: 0.429em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #848484;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #333333;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #007ad9;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #007ad9;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, -0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, 0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #007ad9;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #333333;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc th {
-  background-color: #333333;
-  border: 1px solid #333333;
-  color: #ffffff;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #333333;
-}
-body .fc .fc-row {
-  border-right: 1px solid #333333;
-}
-body .fc .fc-event {
-  background-color: #116fbf;
-  border: 1px solid #116fbf;
-  color: #ffffff;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc .fc-divider {
-  background-color: #333333;
-  border: 1px solid #333333;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #333333;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #007ad9;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #333333;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #007ad9;
-}
-body .p-tree {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.286em 0 0;
-  color: #848484;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.286em 0 0;
-  color: #848484;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.286em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #007ad9;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #007ad9;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #007ad9;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #007ad9;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #00325a;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #c8c8c8;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #c8c8c8;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #848484;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #007ad9;
-  background-color: #ffffff;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #333333;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #ffffff;
-  color: #333333;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #c8c8c8;
-  padding: 0.429em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #848484;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, -0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, 0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #333333;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #007ad9;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #333333;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #333333;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #ffffff;
-  color: #007ad9;
-  border-color: solid 1px rgba(178, 193, 205, 0.64);
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #b2c1cd;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #007ad9;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #7fbcec;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #b7d8b7;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe399;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #f8b7bd;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-message.p-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.25em;
-}
-body .p-message .p-message-text {
-  font-size: 1em;
-}
-body .p-growl {
-  top: 70px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 2.571em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 2.571em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #007ad9;
-  color: #ffffff;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(200, 200, 200, 0);
-  border-bottom-color: #c8c8c8;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #ffffff;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #c8c8c8;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #333333;
-  background-color: #333333;
-  color: #ffffff;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #ffffff;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #b4b4b4;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #c8c8c8;
-  border-top: 0 none;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #848484;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #333333;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #333333;
-  color: #ffffff;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #333333;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #333333;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #333333;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #333333;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #333333;
-  background-color: #333333;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #ffffff;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #ffffff;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #b4b4b4;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #ffffff;
-  color: #333333;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #ffffff;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #333333;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #848484;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #848484;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #848484;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #333333;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #848484;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #007ad9;
-  color: #ffffff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #333333;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #c8c8c8;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #333333;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #333333;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #ffffff;
-  background-color: #333333;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #ffffff;
-  background-color: #333333;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #494949;
-  color: #ffffff;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: transparent;
-  border-bottom: 1px solid #333333;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #333333;
-  background-color: #333333;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #494949;
-  border: 1px solid #494949;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #b4b4b4;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #ffffff;
-  background-color: #333333;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #333333;
-  background-color: #333333;
-  color: #ffffff;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #494949;
-  background-color: #494949;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 24px;
-  background-color: #eaeaea;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #007ad9;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #333333;
-  line-height: 24px;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #333333;
-  color: #ffffff;
-  border: 1px solid #333333;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #333333;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #b2c1cd;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #333333;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #ffffff;
-  color: #007ad9;
-  border-color: solid 1px rgba(178, 193, 205, 0.64);
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #007ad9;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #007ad9;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/nova-light/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/nova-light/theme.css b/public/resources/themes/nova-light/theme.css
deleted file mode 100644
index 484f90b4db..0000000000
--- a/public/resources/themes/nova-light/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #007ad9;
-  --primaryTextColor: #ffffff;
-  --panelContentBorder: 1px solid #c8c8c8;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #007ad9;
-  text-decoration: none;
-}
-body a:hover {
-  color: #116fbf;
-}
-body a:active {
-  color: #005b9f;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #333333;
-  background: #ffffff;
-  padding: 0.429em;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #212121;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #a6a6a6;
-  background-color: #ffffff;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #a6a6a6;
-  background-color: #ffffff;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #212121;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #cccccc;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #ffffff;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #b7b7b7;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #007ad9;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #116fbf;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #333333;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #007ad9;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #d8dae2;
-  color: #333333;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #333333;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #007ad9;
-  color: #ffffff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown {
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #666666;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #848484;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-multiselect {
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #212121;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #333333;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #666666;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #ffffff;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #007ad9;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #848484;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #ffffff;
-  border: 1px solid #a6a6a6;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #007ad9;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #ffffff;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #333333;
-  background-color: #eaeaea;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #a6a6a6;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #eaeaea;
-  color: #333333;
-  background-color: #ffffff;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #c8c8c8;
-  background-color: #f4f4f4;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #c8c8c8;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #ffffff;
-  color: #333333;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #333333;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #333333;
-}
-body .p-editor-container .ql-picker-label {
-  color: #333333;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #007ad9;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #007ad9;
-}
-body .p-rating .p-rating-icon {
-  font-size: 20px;
-  text-align: center;
-  display: inline-block;
-  color: #333333;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #e4018d;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #007ad9;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #b5019f;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 2.429em;
-}
-body .p-spinner .p-spinner-button {
-  width: 2em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 2.429em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 2em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #c8c8c8;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.5715em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.5715em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.143em;
-  width: 1.143em;
-  background-color: #ffffff;
-  border: 2px solid #666666;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  border-radius: 100%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-slider .p-slider-range {
-  background-color: #007ad9;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: 2px solid #666666;
-  border: 2px solid #007ad9;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 20em;
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #a6a6a6;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #007ad9;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #eaeaea;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #ffffff;
-  color: #333333;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #a6a6a6;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  border-color: #007ad9;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #a6a6a6;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #333333;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #d0d0d0;
-  color: #333333;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #a6a6a6;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #d8dae2;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #d8dae2;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #a6a6a6;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #007ad9;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #333333;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #ffffff;
-  background-color: #007ad9;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #d8dae2;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #f4f4f4;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #a6a6a6;
-  background-color: #eaeaea;
-  color: #848484;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #666666;
-}
-body :-moz-placeholder {
-  color: #666666;
-}
-body ::-moz-placeholder {
-  color: #666666;
-}
-body :-ms-input-placeholder {
-  color: #666666;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #a80000;
-}
-
-body .p-button {
-  margin: 0;
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2.25em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2.25em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #dadada;
-  border: 1px solid #dadada;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #666666;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #007ad9;
-  border-color: #007ad9;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #116fbf;
-  border-color: #116fbf;
-  color: #ffffff;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button {
-  background-color: #dadada;
-  border: 1px solid #dadada;
-  color: #333333;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #666666;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #212121;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #007ad9;
-  border-color: #007ad9;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #116fbf;
-  border-color: #116fbf;
-  color: #ffffff;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #ffffff;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f4f4f4;
-  border: 1px solid #f4f4f4;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #c8c8c8;
-  color: #333333;
-  border-color: #c8c8c8;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #a0a0a0;
-  color: #333333;
-  border-color: #a0a0a0;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #005b9f;
-  color: #ffffff;
-  border-color: #005b9f;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #ffffff;
-  background-color: #34A835;
-  border: 1px solid #34A835;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #107D11;
-  color: #ffffff;
-  border-color: #107D11;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #aae5aa;
-  -moz-box-shadow: 0 0 0 0.2em #aae5aa;
-  box-shadow: 0 0 0 0.2em #aae5aa;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #0C6B0D;
-  color: #ffffff;
-  border-color: #0C6B0D;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #ffba01;
-  border: 1px solid #ffba01;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #ED990B;
-  color: #333333;
-  border-color: #ED990B;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #ffeab4;
-  -moz-box-shadow: 0 0 0 0.2em #ffeab4;
-  box-shadow: 0 0 0 0.2em #ffeab4;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #D38B10;
-  color: #333333;
-  border-color: #D38B10;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #ffffff;
-  background-color: #e91224;
-  border: 1px solid #e91224;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #c01120;
-  color: #ffffff;
-  border-color: #c01120;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #f9b4ba;
-  -moz-box-shadow: 0 0 0 0.2em #f9b4ba;
-  box-shadow: 0 0 0 0.2em #f9b4ba;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #a90000;
-  color: #ffffff;
-  border-color: #a90000;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  background-color: #f4f4f4;
-  color: #333333;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #848484;
-  border: 1px solid transparent;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #333333;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  background-color: #f4f4f4;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #848484;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #dbdbdb;
-  border: 1px solid #dbdbdb;
-  color: #333333;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #333333;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  background-color: #f4f4f4;
-  color: #333333;
-  font-weight: 700;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #848484;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #dbdbdb;
-  border: 1px solid #dbdbdb;
-  color: #333333;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #333333;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: transparent;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #c8c8c8;
-  background-color: #f4f4f4;
-  float: none;
-  display: inline-block;
-  color: #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #848484;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #dbdbdb;
-  border: 1px solid #dbdbdb;
-  color: #333333;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #333333;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 2px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 2px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #f4f4f4;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #848484;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #ffffff;
-  color: #333333;
-  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-}
-
-body .p-paginator {
-  background-color: #f4f4f4;
-  border: 1px solid #c8c8c8;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #848484;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #848484;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #333333;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #848484;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #848484;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #007ad9;
-  background-color: #ffffff;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #333333;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #ffffff;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #c8c8c8;
-  padding: 0.429em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #848484;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #333333;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #007ad9;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #007ad9;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, -0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, 0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #f9f9f9;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #ffffff;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #ffffff;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #007ad9;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #f4f4f4;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc th {
-  background-color: #f4f4f4;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #c8c8c8;
-}
-body .fc .fc-row {
-  border-right: 1px solid #c8c8c8;
-}
-body .fc .fc-event {
-  background-color: #116fbf;
-  border: 1px solid #116fbf;
-  color: #ffffff;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #116fbf;
-  color: #ffffff;
-  border-color: #116fbf;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .fc .fc-divider {
-  background-color: #f4f4f4;
-  border: 1px solid #c8c8c8;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #007ad9;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #c8c8c8;
-  color: #333333;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #007ad9;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #333333;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #007ad9;
-}
-body .p-tree {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.286em 0 0;
-  color: #848484;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.286em 0 0;
-  color: #848484;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.286em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #ffffff;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #007ad9;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #007ad9;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #007ad9;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #007ad9;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #00325a;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #c8c8c8;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #c8c8c8;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #c8c8c8;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #848484;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 3px;
-  -webkit-border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  -moz-border-radius-bottomright: 3px;
-  -webkit-border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #c8c8c8;
-  font-weight: 700;
-  color: #333333;
-  background-color: #f4f4f4;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #848484;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #007ad9;
-  background-color: #ffffff;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #e0e0e0;
-  color: #333333;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #333333;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #ffffff;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #ffffff;
-  color: #333333;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #c8c8c8;
-  padding: 0.429em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #848484;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #007ad9;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: #5ab7ff;
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #ffffff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, -0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #8dcdff, 0 0.2em 0 0 #8dcdff, 0.1em -0.1em 0 0.1em #8dcdff;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #333333;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #007ad9;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #f4f4f4;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #333333;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #ffffff;
-  color: #007ad9;
-  border-color: solid 1px rgba(178, 193, 205, 0.64);
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #b2c1cd;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #007ad9;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #7fbcec;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #b7d8b7;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe399;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #f8b7bd;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-message.p-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.25em;
-}
-body .p-message .p-message-text {
-  font-size: 1em;
-}
-body .p-growl {
-  top: 70px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 2.571em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 2.571em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #7fbcec;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #b7d8b7;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe399;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #f8b7bd;
-  border: 0 none;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #007ad9;
-  color: #ffffff;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(200, 200, 200, 0);
-  border-bottom-color: #c8c8c8;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #ffffff;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #c8c8c8;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #c8c8c8;
-  background-color: #f4f4f4;
-  color: #333333;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #848484;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #333333;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #c8c8c8;
-  border-top: 0 none;
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #ffffff;
-  color: #333333;
-  padding: 0.571em 1em;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #848484;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #333333;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #333333;
-  color: #ffffff;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #333333;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #333333;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #333333;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #333333;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #c8c8c8;
-  background-color: #f4f4f4;
-  color: #333333;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #333333;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #848484;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #333333;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #ffffff;
-  color: #333333;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #ffffff;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #333333;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #848484;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #848484;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #848484;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #333333;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #848484;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #007ad9;
-  color: #ffffff;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #333333;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #c8c8c8;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #333333;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #333333;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #333333;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #333333;
-  background-color: #f4f4f4;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #333333;
-  background-color: #f4f4f4;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #dbdbdb;
-  color: #333333;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: transparent;
-  border-bottom: 1px solid #c8c8c8;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #c8c8c8;
-  background-color: #f4f4f4;
-  color: #333333;
-  padding: 0.571em 1em;
-  margin-right: 2px;
-  -moz-border-radius-topleft: 3px;
-  -webkit-border-top-left-radius: 3px;
-  border-top-left-radius: 3px;
-  -moz-border-radius-topright: 3px;
-  -webkit-border-top-right-radius: 3px;
-  border-top-right-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #848484;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #dbdbdb;
-  border: 1px solid #dbdbdb;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #333333;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #007ad9;
-  border: 1px solid #007ad9;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #333333;
-  background-color: #f4f4f4;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -webkit-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #333333;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #333333;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #c8c8c8;
-  background-color: #f4f4f4;
-  color: #333333;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #848484;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #dbdbdb;
-  background-color: #dbdbdb;
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #007ad9;
-  background-color: #007ad9;
-  color: #ffffff;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #005b9f;
-  background-color: #005b9f;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #333333;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: inset 0 0 0 0.2em #8dcdff;
-  box-shadow: inset 0 0 0 0.2em #8dcdff;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 24px;
-  background-color: #eaeaea;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #007ad9;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #333333;
-  line-height: 24px;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #f4f4f4;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #c8c8c8;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #b2c1cd;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #007ad9;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #ffffff;
-  border: solid 1px rgba(178, 193, 205, 0.64);
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #333333;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #ffffff;
-  color: #007ad9;
-  border-color: solid 1px rgba(178, 193, 205, 0.64);
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #007ad9;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #007ad9;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #ffffff;
-  color: #333333;
-  border: 1px solid #c8c8c8;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #8dcdff;
-  -moz-box-shadow: 0 0 0 0.2em #8dcdff;
-  box-shadow: 0 0 0 0.2em #8dcdff;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.eot b/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.eot
deleted file mode 100644
index 019d4f7060..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.eot and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.svg b/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.svg
deleted file mode 100644
index c0a1c8cd78..0000000000
--- a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.svg
+++ /dev/null
@@ -1,332 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1159" ><font-face
-    font-family="Open Sans Light"
-    units-per-em="2048"
-    panose-1="2 11 3 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="492" d="M276 377H215L186 1462H305L276 377ZM164 78Q164 176 244 176Q326 176 326 78Q326 -20 244 -20Q164 -20 164 78Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="723" d="M260 1462L227 934H166L133 1462H260ZM590 1462L557 934H496L463 1462H590Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M967 928L891 530H1194V451H874L788 0H698L786 451H426L340 0H252L338 451H55V530H354L430 928H133V1008H444L530 1462H621L532 1008H897L985 1462H1071L983 1008H1268V928H967ZM440 530H803L881
-928H518L440 530Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M991 440Q991 307 892 223T618 117V-119H537V113Q445 115 337 135T164 186V289Q239 253 343 228T537 203V711Q392 755 322 799T220 903T188 1049Q188 1173 282 1257T537 1362V1554H618V1364Q815
-1355 969 1292L936 1202Q795 1264 618 1274V788Q831 722 911 644T991 440ZM881 444Q881 529 818 584T618 680V209Q740 222 810 284T881 444ZM297 1049Q297 963 354 908T537 815V1268Q418 1252 358 1192T297 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1653" d="M211 1026Q211 840 256 747T397 653Q590 653 590 1026Q590 1210 541 1302T397 1395Q301 1395 256 1303T211 1026ZM688 1026Q688 800 613 683T397 565Q264 565 189 685T113 1026Q113 1249 185 1366T397
-1483Q536 1483 612 1363T688 1026ZM1063 438Q1063 253 1108 161T1249 68Q1442 68 1442 438Q1442 807 1249 807Q1153 807 1108 716T1063 438ZM1540 438Q1540 212 1466 95T1251 -23Q1115 -23 1040 98T965 438Q965 663 1038 779T1251 895Q1388 895 1464 775T1540 438ZM1280
-1462L469 0H373L1184 1462H1280Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1460" d="M123 371Q123 509 196 606T471 811L396 893Q330 964 298 1032T266 1174Q266 1317 361 1401T618 1485Q773 1485 863 1404T954 1180Q954 1075 884 988T631 793L1083 336Q1144 408 1187 493T1262
-694H1358Q1295 448 1149 268L1415 0H1280L1087 197Q995 107 923 66T766 2T571 -20Q362 -20 243 83T123 371ZM578 70Q706 70 812 113T1022 260L539 745Q403 673 343 623T255 513T227 375Q227 232 320 151T578 70ZM373 1176Q373 1097 413 1030T565 856Q724 941 786
-1015T848 1184Q848 1278 786 1336T618 1395Q504 1395 439 1337T373 1176Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="393" d="M260 1462L227 934H166L133 1462H260Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="557" d="M82 561Q82 826 159 1057T383 1462H496Q348 1280 269 1050T190 563Q190 80 494 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="557" d="M475 561Q475 298 398 71T174 -324H63Q367 80 367 563Q367 820 288 1050T61 1462H174Q321 1287 398 1056T475 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1128" d="M631 1556L594 1151L999 1255L1020 1124L625 1085L872 745L748 674L557 1053L377 674L252 745L494 1085L104 1124L123 1255L524 1151L485 1556H631Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="440" d="M295 238L307 217Q232 -48 133 -264H68Q145 11 178 238H295Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="698" d="M674 1462L129 0H25L569 1462H674Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1055 735Q1055 350 938 165T582 -20Q353 -20 234 170T115 735Q115 1117 230 1301T582 1485Q813 1485 934 1295T1055 735ZM223 735Q223 395 312 233T582 70Q771 70 857 238T944 735Q944 1059 858 1227T582
-1395Q393 1395 308 1227T223 735Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M682 0H584V1065Q584 1210 596 1366Q581 1351 565 1337T256 1094L199 1165L596 1462H682V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1028 0H113V88L502 494Q666 664 732 754T829 926T860 1098Q860 1229 774 1311T551 1393Q368 1393 201 1260L147 1329Q330 1483 553 1483Q744 1483 853 1381T963 1100Q963 955 890 820T621 485L246
-100V96H1028V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M979 1118Q979 982 894 889T664 770V764Q840 742 932 652T1024 410Q1024 205 885 93T483 -20Q260 -20 94 63V162Q178 118 282 93T479 68Q700 68 811 157T922 410Q922 555 809 633T475 711H317V807H477Q659
-807 765 893T872 1128Q872 1250 786 1323T559 1397Q450 1397 360 1367T158 1262L109 1329Q194 1400 314 1441T557 1483Q759 1483 869 1388T979 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1141 373H889V0H795V373H43V440L768 1470H889V459H1141V373ZM795 459V877Q795 1179 809 1384H801Q781 1347 678 1196L162 459H795Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M537 879Q771 879 905 766T1040 455Q1040 230 900 105T514 -20Q405 -20 307 1T143 63V166Q251 111 335 90T514 68Q706 68 822 169T938 444Q938 607 825 700T518 793Q388 793 246 754L186 793L244 1462H948V1366H338L293
-850Q449 879 537 879Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M131 623Q131 908 208 1102T428 1391T772 1485Q866 1485 944 1462V1374Q871 1401 768 1401Q521 1401 384 1223T229 705H242Q318 803 416 853T623 903Q828 903 943 786T1059 463Q1059 239 938 110T610
--20Q388 -20 260 149T131 623ZM610 68Q774 68 865 171T956 465Q956 633 866 727T621 821Q519 821 432 776T292 657T240 504Q240 393 289 291T423 128T610 68Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M334 0L936 1366H109V1462H1055V1389L451 0H334Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M582 1487Q768 1487 881 1392T995 1135Q995 1023 925 937T696 778Q888 699 966 605T1044 377Q1044 196 918 88T578 -20Q357 -20 239 81T121 375Q121 506 204 605T461 774Q300 850 234 934T168 1137Q168
-1242 221 1321T369 1444T582 1487ZM223 360Q223 222 316 146T578 70Q742 70 842 150T942 369Q942 493 864 570T561 733Q377 662 300 576T223 360ZM580 1397Q439 1397 354 1328T268 1137Q268 1067 299 1014T390 917T590 815Q753 878 824 954T895 1137Q895 1257 811
-1327T580 1397Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1036 842Q1036 554 961 360T741 73T391 -20Q287 -20 199 6V92Q242 78 302 71T395 63Q642 63 782 241T938 762H926Q853 666 752 615T541 563Q338 563 225 675T111 993Q111 1213 235 1349T559 1485Q703
-1485 811 1410T977 1188T1036 842ZM559 1397Q401 1397 307 1291T213 999Q213 825 300 735T549 645Q650 645 737 690T876 809T928 961Q928 1078 882 1180T752 1339T559 1397Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="487" d="M162 78Q162 176 242 176Q324 176 324 78Q324 -20 242 -20Q162 -20 162 78ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="487" d="M303 238L315 217Q240 -48 141 -264H76Q105 -167 138 -19T186 238H303ZM162 971Q162 1069 242 1069Q324 1069 324 971Q324 918 301 895T242 872Q208 872 185 895T162 971Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1059 266L111 682V743L1059 1217V1122L236 717L1059 362V266Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M111 885V967H1059V885H111ZM111 477V559H1059V477H111Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M111 362L934 717L111 1122V1217L1059 743V682L111 266V362Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="862" d="M293 377V414Q293 537 330 615T469 782L560 861Q632 922 663 982T694 1120Q694 1247 611 1322T391 1397Q312 1397 243 1380T94 1323L57 1403Q167 1451 241 1467T395 1483Q578 1483 683 1385T788
-1114Q788 1046 770 995T720 901T641 817T539 729Q475 675 441 631T391 537T375 391V377H293ZM260 78Q260 176 340 176Q422 176 422 78Q422 -20 340 -20Q260 -20 260 78Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1815" d="M1702 725Q1702 497 1612 359T1366 221Q1277 221 1222 275T1157 422H1153Q1110 322 1029 272T840 221Q692 221 611 317T530 588Q530 790 650 918T965 1047Q1103 1047 1251 1006L1229 542V512Q1229 408
-1264 356T1380 303Q1483 303 1548 419T1614 723Q1614 917 1535 1063T1310 1287T975 1366Q745 1366 570 1267T300 985T205 567Q205 245 372 70T846 -106Q939 -106 1034 -88T1266 -18V-117Q1063 -197 852 -197Q503 -197 308 3T113 561Q113 817 221 1021T528 1339T977
-1452Q1192 1452 1357 1363T1612 1109T1702 725ZM633 590Q633 447 688 375T862 303Q1117 303 1135 649L1151 940Q1072 967 958 967Q809 967 721 865T633 590Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1284" d="M207 1462H608Q879 1462 1006 1370T1133 1092Q1133 965 1056 881T829 772V766Q1004 740 1086 656T1169 420Q1169 218 1035 109T655 0H207V1462ZM309 811H631Q837 811 930 879T1024 1094Q1024 1240 919
-1306T604 1372H309V811ZM309 721V90H653Q1059 90 1059 420Q1059 721 631 721H309Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167 1311Q1007
-1391 831 1391Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1446" d="M1317 745Q1317 377 1124 189T557 0H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1028" d="M309 0H207V1462H1008V1368H309V748H969V653H309V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1481" d="M782 737H1321V70Q1109 -20 844 -20Q498 -20 314 175T129 729Q129 952 220 1124T482 1391T874 1485Q1113 1485 1303 1397L1262 1305Q1072 1393 868 1393Q579 1393 410 1215T240 733Q240 403 401 237T874
-70Q1076 70 1217 127V641H782V737Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1473" d="M1266 0H1163V719H309V0H207V1462H309V813H1163V1462H1266V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="516" d="M207 0V1462H309V0H207Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="506" d="M-33 -369Q-125 -369 -184 -342V-254Q-106 -274 -35 -274Q207 -274 207 -10V1462H309V0Q309 -369 -33 -369Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1190" d="M1190 0H1065L504 772L309 600V0H207V1462H309V702L471 864L1044 1462H1174L575 844L1190 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1051" d="M207 0V1462H309V96H1006V0H207Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1767" d="M850 0L305 1350H297Q305 1226 305 1096V0H207V1462H365L883 176H889L1407 1462H1561V0H1458V1108Q1458 1224 1470 1348H1462L915 0H850Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325 1049 1186
-1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1198" d="M1087 1042Q1087 830 943 717T535 604H309V0H207V1462H565Q1087 1462 1087 1042ZM309 692H510Q757 692 867 773T977 1038Q977 1207 873 1288T551 1370H309V692Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1565" d="M1436 733Q1436 439 1310 247T961 0L1294 -348H1128L846 -18L813 -20H782Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046
-76 1185 246T1325 733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1217" d="M309 637V0H207V1462H555Q827 1462 957 1362T1087 1059Q1087 912 1010 811T774 666L1171 0H1049L672 637H309ZM309 725H588Q773 725 875 807T977 1051Q977 1218 877 1294T551 1370H309V725Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1116" d="M1014 377Q1014 194 880 87T522 -20Q254 -20 111 39V141Q269 74 514 74Q694 74 799 156T905 373Q905 456 870 510T756 610T524 707Q300 784 215 873T129 1112Q129 1276 257 1379T588 1483Q794 1483 975
-1405L938 1317Q756 1393 590 1393Q428 1393 332 1318T236 1114Q236 1033 265 981T362 888T592 788Q763 729 849 674T974 548T1014 377Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1073" d="M588 0H485V1366H10V1462H1063V1366H588V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1182" d="M1071 1462H1182L635 0H545L0 1462H109L477 467Q561 242 590 129Q610 204 669 362L1071 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1827" d="M1372 0H1288L967 1128Q927 1267 907 1356Q891 1269 862 1156T539 0H453L51 1462H158L414 520Q429 463 442 415T465 324T484 242T500 162Q524 298 602 575L852 1462H965L1258 444Q1309 268 1331 160Q1344
-232 1364 313T1673 1462H1776L1372 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1102" d="M1102 0H985L553 682L113 0H0L492 762L45 1462H160L555 836L956 1462H1065L612 764L1102 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1180" d="M1098 0H82V76L938 1366H121V1462H1075V1386L217 96H1098V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="653" d="M602 -324H174V1462H602V1368H272V-229H602V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="698" d="M127 1462L674 0H571L25 1462H127Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="653" d="M51 -229H381V1368H51V1462H479V-324H51V-229Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1169" d="M88 561L553 1473H621L1081 561H981L586 1352L188 561H88Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -266H-4V-184H846V-266Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M776 1241H707Q611 1320 519 1412T393 1552V1569H535Q561 1521 633 1427T776 1257V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106 826 1013T915
-723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1219" d="M641 1108Q869 1108 984 965T1100 545Q1100 274 979 127T637 -20Q521 -20 428 28T281 164H272L244 0H182V1556H281V1165Q281 1077 277 1003L274 918H281Q343 1016 430 1062T641 1108ZM639 1018Q447 1018
-364 908T281 545V528Q281 282 367 175T637 68Q815 68 905 192T995 547Q995 1018 639 1018Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20 616 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1219" d="M580 1108Q698 1108 784 1065T938 918H944Q938 1044 938 1165V1556H1036V0H971L946 166H938Q814 -20 582 -20Q357 -20 238 120T119 528Q119 810 237 959T580 1108ZM580 1018Q402 1018 313 893T223 530Q223
-68 582 68Q766 68 852 175T938 528V545Q938 797 854 907T580 1018Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435 1020 340 917T229
-618H901Q901 807 819 913T592 1020Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="614" d="M586 1001H330V0H231V1001H29V1059L231 1096V1180Q231 1380 304 1473T545 1567Q635 1567 725 1540L702 1454Q622 1479 543 1479Q427 1479 379 1411T330 1188V1087H586V1001Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1071" d="M1030 1087V1018L805 1004Q895 892 895 758Q895 601 791 504T510 406Q436 406 406 412Q347 381 316 339T285 250Q285 198 324 174T457 150H647Q824 150 918 79T1012 -133Q1012 -305 873 -398T475 -492Q270
--492 158 -413T45 -193Q45 -81 114 -7T303 94Q254 115 225 153T195 242Q195 351 334 434Q239 473 186 556T133 748Q133 911 236 1009T516 1108Q623 1108 682 1087H1030ZM150 -184Q150 -408 483 -408Q911 -408 911 -135Q911 -37 844 7T627 51H449Q150 51 150 -184ZM233
-748Q233 622 309 553T514 483Q650 483 722 552T795 752Q795 891 721 960T512 1030Q382 1030 308 956T233 748Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1556H281V1061L276 922H283Q344 1020 437 1064T668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168 1292 168 1389Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="463" d="M37 -492Q-43 -492 -98 -467V-381Q-29 -401 31 -401Q182 -401 182 -225V1087H281V-211Q281 -346 218 -419T37 -492ZM168 1389Q168 1485 231 1485Q262 1485 279 1460T297 1389Q297 1344 280 1318T231 1292Q168
-1292 168 1389Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="991" d="M279 477L834 1087H954L526 623L991 0H872L459 549L281 387V0H182V1556H281V776L274 477H279Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="463" d="M281 0H182V1556H281V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1808" d="M1540 0V713Q1540 872 1478 945T1288 1018Q1121 1018 1041 926T961 637V0H860V743Q860 1018 608 1018Q437 1018 359 919T281 600V0H182V1087H264L285 938H291Q336 1019 419 1063T602 1108Q859 1108 932
-915H936Q989 1008 1078 1058T1282 1108Q1460 1108 1549 1013T1638 711V0H1540Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977 770 878 894T598
-1018Q418 1018 321 895T223 545Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1219" d="M647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1087H266L285 932H291Q403 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20ZM645 68Q812 68 903 192T995 539Q995
-1018 649 1018Q459 1018 370 914T281 573V541Q281 286 366 177T645 68Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1219" d="M569 -20Q355 -20 237 122T119 532Q119 807 237 957T575 1108Q811 1108 928 934H934L952 1087H1036V-492H938V-78Q938 44 944 170H938Q820 -20 569 -20ZM571 68Q769 68 853 177T938 543V555Q938 800 853
-909T582 1018Q406 1018 315 894T223 530Q223 301 312 185T571 68Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="797" d="M610 1108Q679 1108 758 1094L739 999Q671 1016 598 1016Q459 1016 370 898T281 600V0H182V1087H266L276 891H283Q350 1011 426 1059T610 1108Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="954" d="M856 283Q856 137 745 59T430 -20Q212 -20 84 47V154Q248 72 430 72Q591 72 674 125T758 268Q758 350 692 406T473 516Q310 575 244 617T145 713T111 844Q111 966 213 1037T500 1108Q676 1108 834 1042L797
-952Q637 1018 500 1018Q367 1018 289 974T211 852Q211 767 271 716T508 602Q655 549 722 507T822 410T856 283Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="686" d="M469 68Q563 68 633 84V4Q561 -20 467 -20Q323 -20 255 57T186 299V1001H25V1059L186 1104L236 1350H287V1087H606V1001H287V313Q287 188 331 128T469 68Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="940" d="M420 0L0 1087H102L383 348Q439 206 467 100H473Q514 236 557 350L838 1087H940L520 0H420Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1481" d="M1051 0L813 727Q790 801 754 944H748L727 870L682 725L440 0H342L31 1087H137L311 457Q372 223 391 113H397Q456 347 483 424L707 1087H797L1010 426Q1082 191 1098 115H1104Q1112 180 1184 463L1350
-1087H1450L1155 0H1051Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1020" d="M449 559L70 1087H184L508 629L829 1087H938L565 559L965 0H850L508 485L164 0H55L449 559Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362 -143T416
-0L0 1087Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="944" d="M858 0H82V63L727 999H129V1087H856V1024L207 88H858V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="723" d="M389 -27Q389 -129 448 -179T651 -233V-324Q456 -324 374 -249T291 -18V319Q291 524 61 528V608Q183 610 237 659T291 807V1157Q291 1456 651 1462V1372Q513 1367 451 1314T389 1157V852Q389 722
-345 658T203 573V565Q300 545 344 482T389 295V-27Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1108" d="M508 1561H600V-506H508V1561Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="723" d="M334 295Q334 418 378 481T520 565V573Q423 593 379 657T334 852V1157Q334 1260 273 1313T72 1372V1462Q246 1462 339 1385T432 1157V807Q432 707 486 659T662 608V528Q432 524 432 319V-18Q432
--173 350 -248T72 -324V-233Q213 -231 273 -181T334 -27V295Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M334 745Q285 745 226 715T111 625V719Q219 829 344 829Q405 829 459 816T614 758Q740 700 834 700Q890 700 943 730T1059 825V729Q1011 680 955 648T825 616Q709 616 555 688Q431 745 334 745Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="492" d="M215 711H276L305 -375H186L215 711ZM166 1010Q166 1108 246 1108Q328 1108 328 1010Q328 957 305 934T246 911Q212 911 189 934T166 1010Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M602 190Q416 220 314 365T211 745Q211 977 313 1126T602 1309V1483H684V1317H698Q829 1317 973 1262L942 1178Q808 1229 705 1229Q518 1229 417 1107T315 748Q315 523 415 399T696 274Q827 274
-963 332V240Q853 184 696 184H684V-20H602V190Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M412 676V420Q412 304 377 224T264 96H1073V0H78V84Q188 105 249 194T311 418V676H100V758H311V1055Q311 1259 409 1370T690 1481Q865 1481 1020 1413L985 1327Q828 1393 690 1393Q549 1393
-481 1312T412 1059V758H823V676H412Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M991 723Q991 572 901 467L1040 326L981 266L844 408Q734 315 584 315Q431 315 324 408L186 266L127 326L266 467Q176 573 176 723Q176 870 266 981L127 1122L186 1182L324 1040Q427 1133
-584 1133Q739 1133 844 1040L981 1182L1040 1122L901 981Q991 870 991 723ZM584 395Q718 395 812 490T907 723Q907 859 812 956T584 1053Q450 1053 355 956T260 723Q260 587 354 491T584 395Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M586 666L1014 1462H1124L692 674H975V592H637V387H975V305H637V0H532V305H195V387H532V592H195V674H473L43 1462H160L586 666Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1108" d="M508 1561H600V797H508V1561ZM508 258H600V-506H508V258Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M145 813Q145 896 195 965T334 1073Q248 1120 209 1175T170 1311Q170 1428 271 1494T547 1561Q722 1561 883 1497L848 1417Q757 1451 690 1464T545 1477Q411 1477 340 1433T268 1313Q268 1259
-293 1225T379 1159T567 1085Q759 1021 831 953T903 782Q903 609 717 508Q803 466 846 412T889 276Q889 141 776 69T465 -4Q373 -4 294 11T129 63V158Q311 80 461 80Q623 80 708 129T793 270Q793 325 768 357T680 423T489 502Q289 575 217 643T145 813ZM246 825Q246
-760 277 721T383 646T633 547Q715 588 759 645T803 766Q803 828 771 868T663 945T426 1032Q345 1009 296 953T246 825Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M336 1389Q336 1435 351 1455T399 1475Q463 1475 463 1389Q463 1303 399 1303Q336 1303 336 1389ZM717 1389Q717 1435 732 1455T780 1475Q844 1475 844 1389Q844 1303 780 1303Q717 1303 717 1389Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M897 1092Q755 1092 675 998T594 733Q594 547 668 458T889 369Q973 369 1087 412V324Q985 279 879 279Q692 279 591 394T489 725Q489 933 600 1057T897 1182Q1016 1182 1124 1130L1087 1047Q989
-1092 897 1092ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511
-905 1426 1056T1187 1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="686" d="M512 813L487 885Q403 801 285 801Q190 801 134 850T78 989Q78 1089 158 1140T399 1200L494 1204V1247Q494 1324 456 1361T350 1399Q263 1399 154 1350L121 1423Q238 1479 352 1479Q580
-1479 580 1264V813H512ZM168 993Q168 939 203 908T299 877Q389 877 441 927T494 1069V1133L406 1128Q290 1122 229 1092T168 993Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="885" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543ZM442 543L752 936L813 893L559 530L813 168L752 125L442 516V543Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1038 764V270H956V682H111V764H1038Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M92 512V594H567V512H92Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M709 731H821Q912 731 964 777T1016 913Q1016 1085 819 1085H709V731ZM1120 918Q1120 839 1082 779T971 684L1208 291H1087L877 651H709V291H608V1171H819Q962 1171 1041 1109T1120 918ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM193 731Q193 553 281 402T522 161T852 72Q1030 72 1181 160T1422 401T1511 731Q1511 905 1426 1056T1187
-1299T852 1391Q676 1391 524 1303T282 1060T193 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1638H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M139 1184Q139 1316 225 1399T438 1483Q564 1483 650 1400T737 1184Q737 1052 651 969T438 885Q308 885 224 968T139 1184ZM229 1184Q229 1093 290 1030T438 967Q524 967 585 1029T647 1184Q647
-1276 587 1338T438 1401Q348 1401 289 1337T229 1184Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M111 1V83H1059V1H111ZM625 764H1059V682H625V250H543V682H111V764H543V1198H625V764Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="688" d="M629 586H53V664L295 901Q420 1022 467 1094T514 1243Q514 1314 468 1355T344 1397Q236 1397 127 1315L78 1380Q197 1483 348 1483Q472 1483 542 1420T612 1245Q612 1198 599 1156T559
-1071T491 981T182 674H629V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="688" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1257Q466 1336 537 1428T635 1569H776V1552Q740 1500 654 1414T463 1241H393V1257Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1221" d="M281 1087V383Q281 219 350 145T563 70Q757 70 848 168T940 487V1087H1038V0H954L936 150H930Q880 73 780 27T563 -20Q464 -20 396 7T276 92Q281 0 281 -78V-492H182V1087H281Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1106 -260H1006V1462H778V-260H678V559Q614 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1106V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="487" d="M162 721Q162 819 242 819Q324 819 324 721Q324 623 242 623Q162 623 162 721Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M393 -291Q393 -391 326 -441T137 -492Q69 -492 43 -481V-393Q73 -403 135 -403Q213 -403 254 -375T295 -295Q295 -201 102 -174L195 0H291L225 -117Q393 -154 393 -291Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="688" d="M350 1462H442V586H344V1133Q344 1232 356 1366Q330 1343 123 1221L76 1298L350 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="739" d="M670 1141Q670 980 590 891T367 801Q224 801 147 887T70 1141Q70 1303 148 1391T371 1479Q513 1479 591 1392T670 1141ZM160 1141Q160 877 369 877Q578 877 578 1141Q578 1272 528 1335T369
-1399Q260 1399 210 1336T160 1141Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="885" d="M803 518L494 125L432 168L686 530L432 893L494 936L803 545V518ZM442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1516" d="M589 1462H681V586H583V1133Q583 1232 595 1366Q569 1343 362 1221L315 1298L589 1462ZM1148 1462L337 0H243L1054 1462H1148ZM1392 242H1263V1H1173V242H760V302L1167 883H1263V320H1392V242ZM1173
-320V541Q1173 673 1181 773Q1175 761 1160 738T864 320H1173Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1516" d="M541 1462H633V586H535V1133Q535 1232 547 1366Q521 1343 314 1221L267 1298L541 1462ZM1073 1462L262 0H168L979 1462H1073ZM1403 1H827V79L1069 316Q1194 437 1241 509T1288 658Q1288 729
-1242 770T1118 812Q1010 812 901 730L852 795Q971 898 1122 898Q1246 898 1316 835T1386 660Q1386 613 1373 571T1333 486T1265 396T956 89H1403V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1516" d="M616 1260Q616 1182 572 1129T455 1053Q641 1008 641 842Q641 712 553 641T305 569Q161 569 41 629V717Q177 655 307 655Q422 655 481 704T541 840Q541 923 482 962T303 1001H172V1085H307Q412
-1085 465 1128T518 1249Q518 1316 471 1356T344 1397Q216 1397 98 1319L51 1389Q181 1483 344 1483Q471 1483 543 1423T616 1260ZM1300 1462L489 0H395L1206 1462H1300ZM1495 242H1366V1H1276V242H863V302L1270 883H1366V320H1495V242ZM1276 320V541Q1276 673 1284
-773Q1278 761 1263 738T967 320H1276Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="862" d="M569 711V674Q569 549 530 470T393 305L303 226Q230 165 199 106T168 -33Q168 -157 250 -233T471 -309Q596 -309 704 -263L768 -236L805 -315Q694 -363 620 -379T467 -395Q283 -395 179
--296T74 -27Q74 43 94 97T152 199T324 358Q388 411 422 456T472 550T487 696V711H569ZM440 1010Q440 1108 520 1108Q602 1108 602 1010Q602 957 579 934T520 911Q486 911 463 934T440 1010Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM720 1579H651Q555 1658 463 1750T337 1890V1907H479Q505 1859
-577 1765T720 1595V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM504 1595Q577 1674 648 1766T746 1907H887V1890Q851 1838
-765 1752T574 1579H504V1595Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM328 1595Q390 1662 459 1751T570 1907H668Q736 1787
-910 1595V1579H840Q718 1680 619 1786Q511 1672 398 1579H328V1595Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM784 1581Q748 1581 709 1599T608 1671Q576 1697 546 1717T483
-1737Q438 1737 408 1703T360 1581H287Q297 1692 350 1755T487 1819Q535 1819 575 1794T657 1735Q691 1707 723 1685T784 1663Q830 1663 861 1699T909 1819H985Q969 1703 916 1642T784 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM367 1727Q367 1773 382 1793T430 1813Q494 1813 494 1727Q494
-1641 430 1641Q367 1641 367 1727ZM748 1727Q748 1773 763 1793T811 1813Q875 1813 875 1727Q875 1641 811 1641Q748 1641 748 1727Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1229" d="M911 516H317L113 0H0L588 1468H653L1229 0H1114L911 516ZM354 608H877L678 1135Q653 1197 618 1307Q591 1211 559 1133L354 608ZM836 1610Q836 1513 776 1455T619 1397Q522 1397 462 1455T402
-1610Q402 1704 462 1762T619 1821Q716 1821 776 1762T836 1610ZM482 1610Q482 1544 519 1507T619 1469Q681 1469 718 1506T756 1610Q756 1674 717 1711T619 1749Q557 1749 520 1711T482 1610Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1653" d="M1528 0H811V516H336L109 0H-2L651 1462H1528V1368H913V815H1489V721H913V94H1528V0ZM377 608H811V1368H711L377 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1272" d="M831 1391Q556 1391 398 1215T240 733Q240 420 389 247T815 74Q999 74 1153 121V31Q1008 -20 791 -20Q483 -20 306 179T129 735Q129 958 213 1128T456 1390T825 1483Q1039 1483 1208 1403L1167
-1311Q1007 1391 831 1391ZM911 -291Q911 -391 844 -441T655 -492Q587 -492 561 -481V-393Q591 -403 653 -403Q731 -403 772 -375T813 -295Q813 -201 620 -174L713 0H809L743 -117Q911 -154 911 -291Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM697 1579H628Q532 1658 440 1750T314 1890V1907H456Q482 1859 554 1765T697 1595V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM463 1595Q536 1674 607 1766T705 1907H846V1890Q810 1838 724 1752T533 1579H463V1595Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM315 1595Q377 1662 446 1751T557 1907H655Q723 1787 897 1595V1579H827Q705 1680 606 1786Q498 1672 385 1579H315V1595Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1130" d="M1006 0H207V1462H1006V1368H309V815H967V721H309V94H1006V0ZM354 1727Q354 1773 369 1793T417 1813Q481 1813 481 1727Q481 1641 417 1641Q354 1641 354 1727ZM735 1727Q735 1773 750 1793T798
-1813Q862 1813 862 1727Q862 1641 798 1641Q735 1641 735 1727Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM320 1579H251Q155 1658 63 1750T-63 1890V1907H79Q105 1859 177 1765T320 1595V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM191 1595Q264 1674 335 1766T433 1907H574V1890Q538 1838 452 1752T261 1579H191V1595Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM-32 1595Q30 1662 99 1751T210 1907H308Q376 1787 550 1595V1579H480Q358 1680 259 1786Q151 1672 38 1579H-32V1595Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="516" d="M207 0V1462H309V0H207ZM5 1727Q5 1773 20 1793T68 1813Q132 1813 132 1727Q132 1641 68 1641Q5 1641 5 1727ZM386 1727Q386 1773 401 1793T449 1813Q513 1813 513 1727Q513 1641 449 1641Q386
-1641 386 1727Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1466" d="M1317 745Q1317 377 1124 189T557 0H207V678H47V772H207V1462H602Q952 1462 1134 1279T1317 745ZM1206 741Q1206 1055 1047 1213T578 1372H309V772H715V678H309V90H551Q1206 90 1206 741Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1477" d="M1270 0H1167L301 1298H293Q305 1066 305 948V0H207V1462H309L1174 166H1180Q1171 346 1171 508V1462H1270V0ZM897 1581Q861 1581 822 1599T721 1671Q689 1697 659 1717T596 1737Q551 1737
-521 1703T473 1581H400Q410 1692 463 1755T600 1819Q648 1819 688 1794T770 1735Q804 1707 836 1685T897 1663Q943 1663 974 1699T1022 1819H1098Q1082 1703 1029 1642T897 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM885 1579H816Q720 1658 628 1750T502 1890V1907H644Q670 1859 742 1765T885 1595V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM686 1595Q759 1674 830 1766T928 1907H1069V1890Q1033 1838 947 1752T756 1579H686V1595Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325
-733Q1325 1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM492 1595Q554 1662 623 1751T734 1907H832Q900 1787 1074 1595V1579H1004Q882 1680 783 1786Q675 1672 562 1579H492V1595Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM940 1581Q904 1581 865 1599T764 1671Q732 1697 702 1717T639 1737Q594 1737 564 1703T516 1581H443Q453 1692 506 1755T643 1819Q691 1819 731 1794T813 1735Q847 1707 879 1685T940 1663Q986 1663 1017 1699T1065
-1819H1141Q1125 1703 1072 1642T940 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q477 -20 303 182T129 735Q129 1084 304 1284T784 1485Q1090 1485 1263 1284T1436 733ZM240 733Q240 419 380 248T782 76Q1046 76 1185 246T1325 733Q1325
-1049 1186 1217T784 1386Q523 1386 382 1216T240 733ZM529 1727Q529 1773 544 1793T592 1813Q656 1813 656 1727Q656 1641 592 1641Q529 1641 529 1727ZM910 1727Q910 1773 925 1793T973 1813Q1037 1813 1037 1727Q1037 1641 973 1641Q910 1641 910 1727Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M584 780L993 1188L1051 1130L643 723L1049 315L991 258L584 666L178 258L121 315L526 723L119 1130L176 1188L584 780Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1565" d="M1436 733Q1436 385 1262 183T782 -20Q546 -20 387 100L301 -20L227 39L317 166Q129 366 129 735Q129 1084 304 1284T784 1485Q1016 1485 1176 1364L1284 1516L1356 1456L1245 1303Q1436 1096
-1436 733ZM1325 733Q1325 1048 1186 1219L444 182Q577 76 782 76Q1046 76 1185 246T1325 733ZM240 733Q240 421 379 250L1118 1284Q985 1386 784 1386Q523 1386 382 1216T240 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM833 1579H764Q668 1658 576 1750T450 1890V1907H592Q618
-1859 690 1765T833 1595V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM633 1595Q706 1674 777 1766T875 1907H1016V1890Q980
-1838 894 1752T703 1579H633V1595Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM444 1595Q506 1662 575 1751T686 1907H784Q852
-1787 1026 1595V1579H956Q834 1680 735 1786Q627 1672 514 1579H444V1595Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1473" d="M1282 1462V516Q1282 264 1136 122T729 -20Q475 -20 333 122T190 520V1462H293V516Q293 305 410 188T741 70Q950 70 1065 185T1180 506V1462H1282ZM481 1727Q481 1773 496 1793T544 1813Q608
-1813 608 1727Q608 1641 544 1641Q481 1641 481 1727ZM862 1727Q862 1773 877 1793T925 1813Q989 1813 989 1727Q989 1641 925 1641Q862 1641 862 1727Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1081" d="M543 662L971 1462H1081L594 565V0H489V557L0 1462H117L543 662ZM434 1595Q507 1674 578 1766T676 1907H817V1890Q781 1838 695 1752T504 1579H434V1595Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1198" d="M1087 778Q1087 566 943 453T535 340H309V0H207V1462H309V1198H565Q1087 1198 1087 778ZM309 428H510Q757 428 867 509T977 774Q977 943 873 1024T551 1106H309V428Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1194" d="M961 1284Q961 1145 822 1034Q741 970 712 934T682 858Q682 814 696 790T748 733T850 655Q956 580 1001 531T1069 428T1092 307Q1092 151 1004 66T758 -20Q663 -20 584 -2T457 47V154Q522
-116 605 92T758 68Q872 68 932 122T993 283Q993 366 954 427T805 563Q678 650 630 710T582 856Q582 916 614 966T721 1074Q795 1131 827 1179T860 1286Q860 1379 790 1429T588 1479Q443 1479 362 1410T281 1214V0H182V1206Q182 1379 285 1473T578 1567Q766 1567
-863 1495T961 1284Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM638 1241H569Q473 1320 381 1412T255 1552V1569H397Q423 1521 495 1427T638 1257V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM422 1257Q495 1336 566 1428T664 1569H805V1552Q769 1500 683 1414T492 1241H422V1257Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738
-1106 826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM507 1257Q569 1324 638 1413T749 1569H847Q915 1449 1089 1257V1241H1019Q897 1342 798 1448Q690 1334 577 1241H507V1257Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM953 1243Q917 1243 878 1261T777 1333Q745 1359 715 1379T652 1399Q607 1399 577 1365T529 1243H456Q466 1354 519 1417T656 1481Q704 1481
-744 1456T826 1397Q860 1369 892 1347T953 1325Q999 1325 1030 1361T1078 1481H1154Q1138 1365 1085 1304T953 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM538 1389Q538 1435 553 1455T601 1475Q665 1475 665 1389Q665 1303 601 1303Q538 1303 538 1389ZM919 1389Q919 1435 934 1455T982 1475Q1046
-1475 1046 1389Q1046 1303 982 1303Q919 1303 919 1389Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1085" d="M842 0L817 172H809Q727 67 641 24T436 -20Q276 -20 187 62T98 289Q98 448 230 536T614 629L821 635V707Q821 862 758 941T555 1020Q404 1020 242 936L205 1022Q384 1106 559 1106Q738 1106
-826 1013T915 723V0H842ZM442 70Q616 70 716 169T817 446V553L627 545Q398 534 301 474T203 285Q203 183 265 127T442 70ZM1015 1456Q1015 1359 955 1301T798 1243Q701 1243 641 1301T581 1456Q581 1550 641 1608T798 1667Q895 1667 955 1608T1015 1456ZM661 1456Q661
-1390 698 1353T798 1315Q860 1315 897 1352T935 1456Q935 1520 896 1557T798 1595Q736 1595 699 1557T661 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1731" d="M1243 -20Q948 -20 846 236Q778 103 678 42T426 -20Q270 -20 184 62T98 289Q98 443 223 532T600 629L801 635V707Q801 862 740 941T541 1020Q393 1020 236 936L199 1022Q372 1106 545 1106Q806
-1106 870 895Q981 1108 1217 1108Q1401 1108 1506 974T1612 610V530H897Q897 70 1245 70Q1330 70 1395 82T1569 139V49Q1477 8 1404 -6T1243 -20ZM434 70Q603 70 700 169T797 446V553L610 545Q391 534 297 474T203 285Q203 183 264 127T434 70ZM1217 1020Q933 1020
-903 618H1507Q1507 806 1430 913T1217 1020Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="973" d="M616 -20Q383 -20 251 127T119 537Q119 807 256 957T631 1108Q772 1108 901 1059L874 971Q733 1018 629 1018Q429 1018 326 895T223 539Q223 319 326 195T614 70Q762 70 889 123V31Q785 -20
-616 -20ZM723 -291Q723 -391 656 -441T467 -492Q399 -492 373 -481V-393Q403 -403 465 -403Q543 -403 584 -375T625 -295Q625 -201 432 -174L525 0H621L555 -117Q723 -154 723 -291Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM941 1241H872Q776 1320 684 1412T558 1552V1569H700Q726 1521 798 1427T941 1257V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM452 1257Q525 1336 596 1428T694 1569H835V1552Q799 1500 713 1414T522 1241H452V1257Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM546 1257Q608 1324 677 1413T788 1569H886Q954 1449 1128 1257V1241H1058Q936 1342 837 1448Q729 1334 616 1241H546V1257Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1124" d="M621 -20Q384 -20 252 126T119 535Q119 795 247 951T592 1108Q784 1108 895 974T1006 610V530H223Q225 306 327 188T621 70Q714 70 784 83T963 139V49Q871 9 793 -5T621 -20ZM592 1020Q435
-1020 340 917T229 618H901Q901 807 819 913T592 1020ZM587 1389Q587 1435 602 1455T650 1475Q714 1475 714 1389Q714 1303 650 1303Q587 1303 587 1389ZM968 1389Q968 1435 983 1455T1031 1475Q1095 1475 1095 1389Q1095 1303 1031 1303Q968 1303 968 1389Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM349 1241H280Q184 1320 92 1412T-34 1552V1569H108Q134 1521 206 1427T349 1257V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM107 1257Q180 1336 251 1428T349 1569H490V1552Q454 1500 368 1414T177 1241H107V1257Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-58 1257Q4 1324 73 1413T184 1569H282Q350 1449 524 1257V1241H454Q332 1342 233 1448Q125 1334 12 1241H-58V1257Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="463" d="M281 0H182V1087H281V0ZM-21 1389Q-21 1435 -6 1455T42 1475Q106 1475 106 1389Q106 1303 42 1303Q-21 1303 -21 1389ZM360 1389Q360 1435 375 1455T423 1475Q487 1475 487 1389Q487 1303
-423 1303Q360 1303 360 1389Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1174" d="M1055 559Q1055 283 931 132T582 -20Q368 -20 243 110T117 471Q117 699 243 828T586 958Q694 958 773 925T922 829L926 831Q862 1101 657 1290L387 1133L338 1210L582 1356Q496 1418 383 1475L428
-1556Q575 1487 676 1411L901 1548L950 1464L748 1343Q902 1192 978 990T1055 559ZM950 557Q950 703 853 785T586 868Q401 868 311 768T221 463Q221 277 315 174T584 70Q763 70 856 193T950 557Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1208" d="M940 0V705Q940 869 871 943T657 1018Q462 1018 372 920T281 600V0H182V1087H266L285 938H291Q397 1108 668 1108Q1038 1108 1038 711V0H940ZM1035 1243Q999 1243 960 1261T859 1333Q827 1359
-797 1379T734 1399Q689 1399 659 1365T611 1243H538Q548 1354 601 1417T738 1481Q786 1481 826 1456T908 1397Q942 1369 974 1347T1035 1325Q1081 1325 1112 1361T1160 1481H1236Q1220 1365 1167 1304T1035 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM974 1241H905Q809 1320 717 1412T591 1552V1569H733Q759 1521 831 1427T974 1257V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM499 1257Q572 1336 643 1428T741 1569H882V1552Q846 1500 760 1414T569 1241H499V1257Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM309 1257Q371 1324 440 1413T551 1569H649Q717 1449 891 1257V1241H821Q699 1342 600 1448Q492 1334 379 1241H309V1257Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM1017 1243Q981 1243 942 1261T841 1333Q809 1359 779 1379T716 1399Q671 1399 641 1365T593 1243H520Q530 1354 583 1417T720 1481Q768 1481 808 1456T890 1397Q924 1369 956 1347T1017 1325Q1063 1325 1094 1361T1142
-1481H1218Q1202 1365 1149 1304T1017 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q453 -20 344 49T177 247T119 545Q119 811 248 959T602 1108Q826 1108 953 958T1081 545ZM223 545Q223 321 321 196T600 70Q780 70 878 195T977 545Q977
-770 878 894T598 1018Q418 1018 321 895T223 545ZM346 1389Q346 1435 361 1455T409 1475Q473 1475 473 1389Q473 1303 409 1303Q346 1303 346 1389ZM727 1389Q727 1435 742 1455T790 1475Q854 1475 854 1389Q854 1303 790 1303Q727 1303 727 1389Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M111 682V764H1059V682H111ZM504 1075Q504 1174 584 1174Q666 1174 666 1075Q666 1023 643 1000T584 977Q550 977 527 1000T504 1075ZM504 371Q504 469 584 469Q666 469 666 371Q666 318 643
-295T584 272Q550 272 527 295T504 371Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1200" d="M1081 545Q1081 279 952 130T596 -20Q423 -20 305 78L219 -35L147 23L240 143Q119 296 119 545Q119 811 248 959T602 1108Q781 1108 903 1004L999 1128L1073 1073L969 936Q1081 789 1081 545ZM223
-545Q223 345 301 223L844 928Q746 1018 598 1018Q418 1018 321 895T223 545ZM977 545Q977 735 905 854L362 152Q456 70 600 70Q780 70 878 195T977 545Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM943 1241H874Q778 1320 686 1412T560 1552V1569H702Q728
-1521 800 1427T943 1257V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM495 1257Q568 1336 639 1428T737 1569H878V1552Q842
-1500 756 1414T565 1241H495V1257Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM313 1257Q375 1324 444 1413T555 1569H653Q721
-1449 895 1257V1241H825Q703 1342 604 1448Q496 1334 383 1241H313V1257Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1208" d="M268 1087V383Q268 219 337 145T551 70Q745 70 836 168T928 487V1087H1026V0H942L924 150H918Q812 -20 541 -20Q170 -20 170 377V1087H268ZM350 1389Q350 1435 365 1455T413 1475Q477 1475
-477 1389Q477 1303 413 1303Q350 1303 350 1389ZM731 1389Q731 1435 746 1455T794 1475Q858 1475 858 1389Q858 1303 794 1303Q731 1303 731 1389Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM617 1257Q690 1336 761 1428T859 1569H1000V1552Q964 1500 878 1414T687 1241H617V1257Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1219" d="M281 918Q395 1108 649 1108Q869 1108 984 964T1100 543Q1100 275 979 128T647 -20Q396 -20 281 168H274L277 84Q281 10 281 -78V-492H182V1556H281V1165L274 918H281ZM645 68Q812 68 903 192T995
-539Q995 1018 647 1018Q454 1018 368 913T281 559V541Q281 286 366 177T645 68Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="940" d="M0 1087H102L332 477Q437 196 465 98H471Q513 227 608 483L838 1087H940L453 -176Q394 -330 354 -384T261 -465T131 -492Q74 -492 4 -471V-385Q62 -401 129 -401Q180 -401 219 -377T289 -303T362
--143T416 0L0 1087ZM470 1389Q470 1435 485 1455T533 1475Q597 1475 597 1389Q597 1303 533 1303Q470 1303 470 1389ZM851 1389Q851 1435 866 1455T914 1475Q978 1475 978 1389Q978 1303 914 1303Q851 1303 851 1389Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 512V594H942V512H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 512V594H1966V512H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="297" d="M41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="297" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="451" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="614" d="M358 961L346 981Q380 1101 429 1236T520 1462H586Q556 1364 523 1214T475 961H358ZM41 961L29 981Q61 1093 110 1232T203 1462H268Q238 1361 204 1205T158 961H41Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="614" d="M256 1462L268 1442Q193 1177 94 961H29Q58 1057 90 1202T139 1462H256ZM573 1462L586 1442Q550 1314 501 1181T412 961H346Q376 1059 409 1209T457 1462H573Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="768" d="M295 238L307 218Q232 -47 133 -263H68Q97 -167 129 -22T178 238H295ZM612 238L625 218Q589 90 540 -43T451 -263H385Q415 -165 448 -15T496 238H612Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M231 748Q231 837 271 882T385 928Q458 928 498 881T539 748Q539 663 498 615T385 567Q313 567 272 614T231 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="524" d="M82 543L391 936L453 893L199 530L453 168L391 125L82 516V543Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="524" d="M442 518L133 125L72 168L326 530L72 893L133 936L442 545V518Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.ttf b/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.ttf
deleted file mode 100644
index 35cc356afb..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.ttf and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.woff b/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.woff
deleted file mode 100644
index 38328c4ccd..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.woff and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.woff2 b/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.woff2
deleted file mode 100644
index 4af4545985..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-300.woff2 and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.eot b/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.eot
deleted file mode 100644
index bf88bfad78..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.eot and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.svg b/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.svg
deleted file mode 100644
index 8e6b61ade1..0000000000
--- a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.svg
+++ /dev/null
@@ -1,334 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1295" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 8 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="586" d="M416 485H172L121 1462H467L416 485ZM117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="967" d="M412 1462L371 934H174L133 1462H412ZM834 1462L793 934H596L555 1462H834Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M999 844L952 612H1210V406H913L836 0H616L694 406H500L424 0H209L283 406H45V612H322L369 844H117V1053H406L483 1460H702L625 1053H823L901 1460H1116L1038 1053H1278V844H999ZM539 612H735L782
-844H586L539 612Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1169" d="M1092 457Q1092 298 977 202T655 86V-119H518V82Q274 87 90 168V432Q177 389 299 356T518 317V627L451 653Q253 731 171 822T88 1049Q88 1194 201 1287T518 1401V1554H655V1405Q884 1395 1069 1313L975
-1079Q819 1143 655 1157V862Q850 787 932 732T1053 611T1092 457ZM791 442Q791 484 757 513T655 573V324Q791 347 791 442ZM389 1049Q389 1005 419 977T518 918V1153Q389 1134 389 1049Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1845" d="M315 1024Q315 897 337 835T410 772Q506 772 506 1024Q506 1274 410 1274Q360 1274 338 1213T315 1024ZM758 1026Q758 796 669 681T408 565Q243 565 153 683T63 1026Q63 1483 408 1483Q577 1483
-667 1365T758 1026ZM1446 1462L635 0H395L1206 1462H1446ZM1339 440Q1339 313 1361 251T1434 188Q1530 188 1530 440Q1530 690 1434 690Q1384 690 1362 629T1339 440ZM1782 442Q1782 213 1693 98T1432 -18Q1267 -18 1177 100T1087 442Q1087 899 1432 899Q1601 899
-1691 781T1782 442Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1536" d="M1536 0H1159L1044 113Q853 -20 612 -20Q368 -20 225 92T82 395Q82 532 142 628T350 809Q275 895 241 973T207 1145Q207 1297 323 1390T635 1483Q821 1483 932 1397T1044 1165Q1044 1046
-975 948T752 760L1036 483Q1107 600 1159 784H1477Q1441 649 1378 521T1235 293L1536 0ZM403 424Q403 338 467 287T633 236Q759 236 860 297L528 627Q470 583 437 535T403 424ZM762 1133Q762 1186 726 1216T633 1247Q566 1247 528 1215T489 1124Q489 1036 584 930Q670
-978 716 1024T762 1133Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="545" d="M412 1462L371 934H174L133 1462H412Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="694" d="M82 561Q82 826 159 1057T383 1462H633Q492 1269 420 1038T348 563Q348 318 421 90T631 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="694" d="M612 561Q612 298 535 71T311 -324H63Q198 -140 272 88T346 563Q346 807 274 1038T61 1462H311Q458 1287 535 1056T612 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1116" d="M688 1556L647 1188L1020 1292L1053 1040L713 1016L936 719L709 598L553 911L416 600L180 719L401 1016L63 1042L102 1292L467 1188L426 1556H688Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1169" d="M475 612H88V831H475V1221H694V831H1081V612H694V227H475V612Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="594" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="846" d="M836 1462L291 0H14L559 1462H836Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1169" d="M1096 731Q1096 348 971 164T584 -20Q331 -20 203 170T74 731Q74 1118 199 1301T584 1485Q837 1485 966 1293T1096 731ZM381 731Q381 462 427 346T584 229Q692 229 740 347T788 731Q788 1000 740 1117T584
-1235Q475 1235 428 1118T381 731Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1169" d="M846 0H537V846L540 985L545 1137Q468 1060 438 1036L270 901L121 1087L592 1462H846V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1169" d="M1104 0H82V215L449 586Q612 753 662 817T734 937T756 1051Q756 1139 708 1182T578 1225Q493 1225 413 1186T246 1075L78 1274Q186 1366 257 1404T412 1462T600 1483Q737 1483 842 1433T1005 1293T1063
-1087Q1063 986 1028 898T918 716T655 451L467 274V260H1104V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1169" d="M1047 1135Q1047 998 964 902T731 770V764Q908 742 999 657T1090 426Q1090 215 937 98T500 -20Q262 -20 78 59V322Q163 279 265 252T467 225Q620 225 693 277T766 444Q766 547 682 590T414 633H303V870H416Q586
-870 664 914T743 1067Q743 1233 535 1233Q463 1233 389 1209T223 1126L80 1339Q280 1483 557 1483Q784 1483 915 1391T1047 1135Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1169" d="M1137 303H961V0H659V303H35V518L676 1462H961V543H1137V303ZM659 543V791Q659 853 664 971T672 1108H664Q627 1026 575 948L307 543H659Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1169" d="M614 934Q826 934 951 815T1077 489Q1077 244 926 112T494 -20Q250 -20 100 59V326Q179 284 284 258T483 231Q766 231 766 463Q766 684 473 684Q420 684 356 674T252 651L129 717L184 1462H977V1200H455L428
-913L463 920Q524 934 614 934Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1169" d="M72 621Q72 1055 255 1267T805 1479Q930 1479 1001 1464V1217Q912 1237 825 1237Q666 1237 566 1189T415 1047T356 780H369Q468 950 686 950Q882 950 993 827T1104 487Q1104 253 972 117T606 -20Q444
--20 324 55T138 274T72 621ZM600 227Q699 227 752 293T805 483Q805 590 756 651T606 713Q512 713 446 652T379 510Q379 391 441 309T600 227Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1169" d="M227 0L776 1200H55V1460H1104V1266L551 0H227Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1169" d="M586 1481Q796 1481 924 1386T1053 1128Q1053 1016 991 929T791 772Q955 684 1026 589T1098 379Q1098 199 957 90T586 -20Q346 -20 209 82T72 371Q72 496 138 593T352 764Q227 843 172 933T117 1130Q117
-1287 247 1384T586 1481ZM358 389Q358 303 418 255T582 207Q697 207 754 256T811 387Q811 454 755 512T571 637Q358 539 358 389ZM584 1255Q505 1255 457 1215T408 1106Q408 1046 446 999T586 901Q684 947 723 995T762 1106Q762 1175 712 1215T584 1255Z" />
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1169" d="M1098 838Q1098 406 916 193T365 -20Q235 -20 168 -6V242Q252 221 344 221Q499 221 599 266T752 409T813 678H801Q743 584 667 546T477 508Q286 508 176 630T66 971Q66 1206 199 1342T563 1479Q725
-1479 846 1403T1033 1183T1098 838ZM569 1231Q473 1231 419 1165T365 975Q365 869 414 807T563 745Q657 745 724 806T791 948Q791 1067 729 1149T569 1231Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="584" d="M117 143Q117 227 162 270T293 313Q376 313 421 269T467 143Q467 64 421 19T293 -27Q209 -27 163 17T117 143ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293
-799Q209 799 163 843T117 969Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="594" d="M444 238L459 215Q407 13 283 -264H63Q128 2 164 238H444ZM117 969Q117 1053 162 1096T293 1139Q376 1139 421 1095T467 969Q467 888 421 844T293 799Q209 799 163 843T117 969Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1169" d="M1081 203L88 641V784L1081 1280V1040L397 723L1081 442V203Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1169" d="M88 805V1024H1081V805H88ZM88 418V637H1081V418H88Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1169" d="M88 442L772 723L88 1040V1280L1081 784V641L88 203V442Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="977" d="M276 485V559Q276 655 317 726T467 877Q572 952 605 999T639 1104Q639 1169 591 1203T457 1237Q307 1237 115 1139L6 1358Q229 1483 479 1483Q685 1483 806 1384T928 1120Q928 1010 878 930T688
-750Q592 679 567 642T541 545V485H276ZM244 143Q244 227 289 270T420 313Q503 313 548 269T594 143Q594 64 548 19T420 -27Q336 -27 290 17T244 143Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1837" d="M1735 752Q1735 608 1689 489T1559 301T1364 233Q1290 233 1233 268T1151 362H1135Q1027 233 860 233Q683 233 581 339T479 631Q479 842 613 971T963 1100Q1049 1100 1152 1084T1323 1044L1300 555Q1300
-416 1376 416Q1440 416 1478 509T1516 754Q1516 915 1449 1038T1261 1227T983 1292Q781 1292 632 1209T404 970T324 608Q324 332 471 185T899 37Q1005 37 1132 60T1382 129V-63Q1168 -154 907 -154Q527 -154 315 46T102 602Q102 849 210 1050T519 1366T981 1481Q1201
-1481 1374 1391T1641 1135T1735 752ZM711 627Q711 416 883 416Q973 416 1020 479T1077 686L1090 907Q1039 918 975 918Q850 918 781 840T711 627Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1376" d="M184 1462H639Q950 1462 1090 1374T1231 1092Q1231 961 1170 877T1006 776V766Q1145 735 1206 650T1268 424Q1268 224 1124 112T731 0H184V1462ZM494 883H674Q800 883 856 922T913 1051Q913 1135 852
-1171T657 1208H494V883ZM494 637V256H696Q824 256 885 305T946 455Q946 637 686 637H494Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051 1167
-968 1196T805 1225Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1516" d="M1397 745Q1397 384 1192 192T598 0H184V1462H643Q1001 1462 1199 1273T1397 745ZM1075 737Q1075 1208 659 1208H494V256H627Q1075 256 1075 737Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1124" d="M489 0H184V1462H1022V1208H489V831H985V578H489V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1483" d="M739 821H1319V63Q1178 17 1054 -1T799 -20Q468 -20 294 174T119 733Q119 1087 321 1285T883 1483Q1108 1483 1317 1393L1214 1145Q1054 1225 881 1225Q680 1225 559 1090T438 727Q438 489 535 364T819
-238Q916 238 1016 258V563H739V821Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1567" d="M1382 0H1073V631H494V0H184V1462H494V889H1073V1462H1382V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="678" d="M184 0V1462H494V0H184Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="678" d="M31 -430Q-74 -430 -152 -408V-150Q-72 -170 -6 -170Q96 -170 140 -107T184 92V1462H494V94Q494 -162 377 -296T31 -430Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1360" d="M1360 0H1008L625 616L494 522V0H184V1462H494V793L616 965L1012 1462H1356L846 815L1360 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1157" d="M184 0V1462H494V256H1087V0H184Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1931" d="M803 0L451 1147H442Q461 797 461 680V0H184V1462H606L952 344H958L1325 1462H1747V0H1458V692Q1458 741 1459 805T1473 1145H1464L1087 0H803Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227 817 1227Q632
-1227 538 1103T444 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1286" d="M494 774H596Q739 774 810 830T881 995Q881 1104 822 1156T635 1208H494V774ZM1194 1006Q1194 770 1047 645T627 520H494V0H184V1462H651Q917 1462 1055 1348T1194 1006Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1630" d="M1511 733Q1511 475 1420 301T1151 45L1503 -348H1106L838 -20H815Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240
-1186 733Q1186 1227 817 1227Q632 1227 538 1103T444 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1352" d="M494 813H594Q741 813 811 862T881 1016Q881 1120 810 1164T588 1208H494V813ZM494 561V0H184V1462H610Q908 1462 1051 1354T1194 1024Q1194 895 1123 795T922 637Q1252 144 1352 0H1008L659 561H494Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1128" d="M1047 406Q1047 208 905 94T508 -20Q274 -20 94 68V356Q242 290 344 263T532 236Q634 236 688 275T743 391Q743 434 719 467T649 532T459 631Q325 694 258 752T151 887T111 1067Q111 1261 242 1372T606
-1483Q720 1483 823 1456T1040 1380L940 1139Q823 1187 747 1206T596 1225Q508 1225 461 1184T414 1077Q414 1036 433 1006T493 947T690 844Q895 746 971 648T1047 406Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1186" d="M748 0H438V1204H41V1462H1145V1204H748V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1331" d="M1018 1462H1331L834 0H496L0 1462H313L588 592Q611 515 635 413T666 270Q677 362 741 592L1018 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1980" d="M1608 0H1255L1057 768Q1046 809 1020 937T989 1110Q983 1056 959 937T922 766L725 0H373L0 1462H305L492 664Q541 443 563 281Q569 338 590 457T631 643L844 1462H1137L1350 643Q1364 588 1385 475T1417
-281Q1427 359 1449 475T1489 664L1675 1462H1980L1608 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1366" d="M1366 0H1012L672 553L332 0H0L485 754L31 1462H373L688 936L997 1462H1331L872 737L1366 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1186" d="M1137 0H49V201L750 1206H68V1462H1118V1262L418 256H1137V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="678" d="M627 -324H143V1462H627V1251H403V-113H627V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="846" d="M289 1462L834 0H557L12 1462H289Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="678" d="M51 -113H274V1251H51V1462H535V-324H51V-113Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1090" d="M8 520L446 1470H590L1085 520H846L524 1163L244 520H8Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="842" d="M846 -324H-4V-184H846V-324Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1243" d="M707 1241Q644 1285 522 1383T332 1548V1569H674Q737 1468 909 1268V1241H707Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083 745V0H870ZM780
-518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1296" d="M782 1139Q980 1139 1092 985T1204 561Q1204 284 1089 132T774 -20Q577 -20 465 123H444L393 0H160V1556H465V1194Q465 1125 453 973H465Q572 1139 782 1139ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q782 227 837 313T893 565Q893 730 837 812T684 895Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1296" d="M514 -20Q317 -20 205 133T92 557Q92 832 206 985T522 1139Q733 1139 844 975H854Q831 1100 831 1198V1556H1137V0H903L844 145H831Q727 -20 514 -20ZM621 223Q738 223 792 291T852 522V555Q852 735 797
-813T616 891Q514 891 458 805T401 553Q401 388 458 306T621 223Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781 207 871
-228T1059 295V59Q979 19 888 0T666 -20Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="793" d="M778 889H514V0H209V889H41V1036L209 1118V1200Q209 1391 303 1479T604 1567Q762 1567 885 1520L807 1296Q715 1325 637 1325Q572 1325 543 1287T514 1188V1118H778V889Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1157" d="M1133 1118V963L958 918Q1006 843 1006 750Q1006 570 881 470T532 369L477 372L432 377Q385 341 385 297Q385 231 553 231H743Q927 231 1023 152T1120 -80Q1120 -276 957 -384T487 -492Q253 -492 130
--411T6 -182Q6 -81 69 -13T254 84Q207 104 172 149T137 246Q137 310 174 352T281 436Q193 474 142 558T90 756Q90 939 209 1039T549 1139Q596 1139 660 1131T743 1118H1133ZM270 -158Q270 -221 330 -257T500 -293Q664 -293 757 -248T850 -125Q850 -62 795 -38T625
--14H467Q383 -14 327 -53T270 -158ZM381 752Q381 661 422 608T549 555Q635 555 675 608T715 752Q715 954 549 954Q381 954 381 752Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1346" d="M1192 0H887V653Q887 895 707 895Q579 895 522 808T465 526V0H160V1556H465V1239Q465 1202 458 1065L451 975H467Q569 1139 791 1139Q988 1139 1090 1033T1192 729V0Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="625" d="M147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147 1257 147 1407ZM465 0H160V1118H465V0Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="625" d="M70 -492Q-47 -492 -131 -467V-227Q-61 -246 12 -246Q89 -246 124 -203T160 -76V1118H465V-121Q465 -299 362 -395T70 -492ZM147 1407Q147 1556 313 1556Q479 1556 479 1407Q479 1336 438 1297T313 1257Q147
-1257 147 1407Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1270" d="M453 608L586 778L899 1118H1243L799 633L1270 0H918L596 453L465 348V0H160V1556H465V862L449 608H453Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="625" d="M465 0H160V1556H465V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="2011" d="M1161 0H856V653Q856 774 816 834T688 895Q571 895 518 809T465 526V0H160V1118H393L434 975H451Q496 1052 581 1095T776 1139Q1027 1139 1116 975H1143Q1188 1053 1275 1096T1473 1139Q1663 1139 1760
-1042T1858 729V0H1552V653Q1552 774 1512 834T1384 895Q1272 895 1217 815T1161 561V0Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835 235 987T637
-1139Q798 1139 921 1069T1110 868T1176 561Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1296" d="M774 -20Q577 -20 465 123H449Q465 -17 465 -39V-492H160V1118H408L451 973H465Q572 1139 782 1139Q980 1139 1092 986T1204 561Q1204 382 1152 250T1002 49T774 -20ZM684 895Q571 895 519 826T465 596V563Q465
-383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1296" d="M623 219Q739 219 793 285T852 518V555Q852 735 797 813T618 891Q403 891 403 553Q403 385 456 302T623 219ZM514 -20Q316 -20 204 132T92 557Q92 831 206 985T520 1139Q626 1139 705 1099T844 975H852L879
-1118H1137V-492H831V-23Q831 38 844 145H831Q782 64 701 22T514 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="930" d="M784 1139Q846 1139 887 1130L864 844Q827 854 774 854Q628 854 547 779T465 569V0H160V1118H391L436 930H451Q503 1024 591 1081T784 1139Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="1018" d="M940 332Q940 160 821 70T463 -20Q341 -20 255 -4T94 45V297Q179 257 285 230T473 203Q639 203 639 299Q639 335 617 357T541 408T397 475Q268 529 208 575T120 680T92 827Q92 976 207 1057T535 1139Q737
-1139 928 1051L836 831Q752 867 679 890T530 913Q395 913 395 840Q395 799 438 769T629 680Q760 627 821 581T911 475T940 332Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="889" d="M631 223Q711 223 823 258V31Q709 -20 543 -20Q360 -20 277 72T193 350V889H47V1018L215 1120L303 1356H498V1118H811V889H498V350Q498 285 534 254T631 223Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1165" d="M426 0L0 1118H319L535 481Q571 360 580 252H586Q591 348 631 481L846 1118H1165L739 0H426Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1753" d="M1079 0L993 391L877 885H870L666 0H338L20 1118H324L453 623Q484 490 516 256H522Q526 332 557 497L573 582L711 1118H1047L1178 582Q1182 560 1190 517T1207 426T1221 331T1229 256H1235Q1244 328 1267
-453T1300 623L1434 1118H1733L1411 0H1079Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1184" d="M389 571L29 1118H375L592 762L811 1118H1157L793 571L1174 0H827L592 383L356 0H10L389 571Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444 8L0 1118Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="999" d="M938 0H55V180L573 885H86V1118H920V920L416 233H938V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="807" d="M287 270Q287 357 222 403T31 449V688Q157 688 222 732T287 858V866V1184Q287 1337 384 1399T725 1462V1237Q626 1234 589 1199T551 1096V797Q545 609 317 575V563Q551 528 551 351V342V43Q551
--25 588 -60T725 -98V-324Q481 -324 384 -262T287 -45V270Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M455 1550H674V-465H455V1550Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="807" d="M520 -45Q520 -157 479 -214T344 -297T82 -324V-98Q181 -96 218 -62T256 43V342V353Q256 439 315 492T489 563V575Q262 609 256 797V1096Q256 1166 219 1200T82 1237V1462Q249 1462 344 1436T479
-1352T520 1184V866V856Q520 772 581 730T776 688V449Q651 449 586 408T520 270V-45Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1169" d="M322 672Q267 672 205 639T88 551V782Q191 891 344 891Q417 891 481 875T621 827Q750 772 848 772Q901 772 964 804T1081 893V662Q980 553 825 553Q759 553 699 566T549 616Q418 672 322 672Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="586" d="M168 606H412L463 -369H117L168 606ZM467 948Q467 864 422 821T291 778Q208 778 163 822T117 948Q117 1029 163 1073T291 1118Q375 1118 421 1074T467 948Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1169" d="M563 176Q143 235 143 741Q143 1002 247 1144T563 1317V1483H741V1325Q907 1316 1040 1251L950 1016Q878 1045 816 1063T692 1081Q571 1081 513 998T455 743Q455 416 692 416Q774 416 840 431T1006
-492V238Q879 177 741 168V-20H563V176Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1169" d="M700 1483Q895 1483 1090 1401L997 1171Q840 1235 725 1235Q647 1235 605 1191T563 1063V870H938V651H563V508Q563 338 412 260H1130V0H82V248Q185 292 223 349T262 506V651H84V870H262V1065Q262
-1266 376 1374T700 1483Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1169" d="M188 723Q188 825 242 920L113 1047L260 1194L387 1067Q478 1120 584 1120Q689 1120 780 1065L907 1194L1057 1051L928 922Q981 833 981 723Q981 616 928 524L1053 399L907 254L780 379Q685
-328 584 328Q469 328 385 379L260 256L115 401L242 526Q188 619 188 723ZM395 723Q395 646 449 591T584 535Q665 535 720 590T776 723Q776 803 720 858T584 913Q506 913 451 857T395 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1169" d="M584 860L848 1462H1161L778 715H973V537H727V399H973V221H727V0H440V221H193V399H440V537H193V715H383L6 1462H322L584 860Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M455 1550H674V735H455V1550ZM455 350H674V-465H455V350Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="995" d="M121 805Q121 884 157 949T254 1055Q121 1139 121 1288Q121 1419 232 1498T526 1577Q696 1577 889 1493L807 1303Q739 1335 669 1360T520 1386Q439 1386 402 1363T365 1292Q365 1243 414 1206T578
-1124Q741 1060 818 976T895 782Q895 605 770 522Q832 482 863 430T895 303Q895 155 776 68T455 -20Q252 -20 106 59V266Q187 225 286 197T455 168Q649 168 649 285Q649 324 631 348T567 397T442 457Q259 531 190 609T121 805ZM344 827Q344 760 409 708T590 610Q668
-667 668 756Q668 824 618 871T434 967Q397 953 371 914T344 827Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1243" d="M279 1405Q279 1470 316 1505T418 1540Q484 1540 521 1503T559 1405Q559 1345 521 1309T418 1272Q354 1272 317 1307T279 1405ZM682 1405Q682 1475 722 1507T823 1540Q888 1540 926 1504T965
-1405Q965 1344 926 1308T823 1272Q763 1272 723 1304T682 1405Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M895 1010Q798 1010 745 936T692 731Q692 451 895 451Q952 451 1018 466T1141 510V319Q1021 262 889 262Q685 262 573 387T461 733Q461 953 571 1075T881 1198Q1030 1198 1186 1120L1112
-952Q999 1010 895 1010ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462
-731Q1462 895 1380 1036T1156 1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="784" d="M561 764L530 874Q487 816 425 784T289 752Q172 752 110 810T47 975Q47 1084 129 1138T397 1202L496 1206Q496 1323 369 1323Q288 1323 152 1262L86 1397Q152 1429 231 1454T410 1479Q547
-1479 621 1408T696 1206V764H561ZM252 977Q252 939 275 921T330 903Q407 903 451 944T496 1051V1087L397 1081Q252 1071 252 977Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1260" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573ZM588 573L958 1028L1178 909L899 561L1178 213L958 94L588 547V573Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1169" d="M1081 248H862V612H88V831H1081V248Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M61 424V674H598V424H61Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M1157 905Q1157 735 1014 672L1251 272H997L819 610H772V272H543V1188H807Q988 1188 1072 1118T1157 905ZM772 778H803Q869 778 897 806T926 901Q926 966 898 993T801 1020H772V778ZM100
-731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM242 731Q242 567 324 426T548 203T852 121Q1016 121 1157 203T1380 427T1462 731Q1462 895 1380 1036T1156
-1259T852 1341Q688 1341 547 1259T324 1035T242 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1757H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M92 1137Q92 1229 138 1309T264 1436T438 1483Q530 1483 610 1437T737 1310T784 1137Q784 1044 738 964T611 838T438 793Q293 793 193 892T92 1137ZM283 1137Q283 1073 327 1028T438 983Q504
-983 549 1029T594 1137Q594 1200 549 1247T438 1294Q374 1294 329 1248T283 1137Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1169" d="M475 674H88V893H475V1282H694V893H1081V674H694V289H475V674ZM88 0V219H1081V0H88Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="776" d="M702 586H55V754L279 973Q381 1073 409 1117T438 1212Q438 1250 414 1270T350 1290Q269 1290 170 1202L47 1354Q194 1483 383 1483Q520 1483 599 1417T678 1233Q678 1148 631 1073T455
-881L350 786H702V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="776" d="M666 1249Q666 1106 496 1051V1038Q590 1018 642 963T694 829Q694 708 606 639T332 569Q189 569 59 639V829Q207 739 330 739Q473 739 473 846Q473 899 429 925T307 952H195V1112H287Q370
-1112 410 1138T451 1221Q451 1259 426 1284T350 1309Q303 1309 261 1290T162 1231L61 1372Q123 1419 198 1450T377 1481Q504 1481 585 1417T666 1249Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1243" d="M332 1241V1268Q504 1468 567 1569H909V1548Q857 1496 732 1394T535 1241H332Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1352" d="M465 465Q465 344 509 284T647 223Q773 223 830 309T887 592V1118H1192V0H961L918 150H903Q861 65 801 23T653 -20Q591 -20 539 3T455 70L460 -15L465 -172V-492H160V1118H465V465Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1167 -260H1006V1356H840V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1167V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="584" d="M117 723Q117 807 162 850T293 893Q376 893 421 849T467 723Q467 642 421 598T293 553Q209 553 163 597T117 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="420" d="M418 -250Q418 -378 343 -435T109 -492Q31 -492 -37 -471V-303Q-10 -310 35 -317T106 -324Q178 -324 178 -262Q178 -179 12 -154L90 0H283L256 -61Q330 -85 374 -135T418 -250Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="776" d="M584 586H346V1032L349 1144L354 1239Q327 1203 279 1161L201 1100L92 1227L393 1462H584V586Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="795" d="M737 1116Q737 945 646 849T395 752Q242 752 150 850T57 1116Q57 1285 146 1382T399 1479Q551 1479 644 1381T737 1116ZM260 1116Q260 1016 292 966T397 915Q469 915 500 965T532 1116Q532
-1216 501 1265T397 1315Q325 1315 293 1266T260 1116Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1260" d="M1178 547L807 94L588 213L866 561L588 909L807 1028L1178 573V547ZM672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1682 152H1557V1H1319V152H936V306L1321 883H1557V320H1682V152ZM1319
-320V484Q1319 570 1325 668Q1316 642 1290 588T1248 511L1121 320H1319Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1804" d="M794 586H556V1032L559 1144L564 1239Q537 1203 489 1161L411 1100L302 1227L603 1462H794V586ZM1370 1462L559 0H320L1131 1462H1370ZM1716 1H1069V169L1293 388Q1395 488 1423 532T1452
-627Q1452 665 1428 685T1364 705Q1283 705 1184 617L1061 769Q1208 898 1397 898Q1534 898 1613 832T1692 648Q1692 563 1645 488T1469 296L1364 201H1716V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1804" d="M697 1249Q697 1106 527 1051V1038Q621 1018 673 963T725 829Q725 708 637 639T363 569Q220 569 90 639V829Q238 739 361 739Q504 739 504 846Q504 899 460 925T338 952H226V1112H318Q401
-1112 441 1138T482 1221Q482 1259 457 1284T381 1309Q334 1309 292 1290T193 1231L92 1372Q154 1419 229 1450T408 1481Q535 1481 616 1417T697 1249ZM1441 1462L630 0H391L1202 1462H1441ZM1712 152H1587V1H1349V152H966V306L1351 883H1587V320H1712V152ZM1349
-320V484Q1349 570 1355 668Q1346 642 1320 588T1278 511L1151 320H1349Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="977" d="M713 606V532Q713 434 669 363T516 215Q407 137 379 93T350 -14Q350 -71 393 -108T526 -145Q605 -145 695 -116T881 -45L983 -266Q885 -322 762 -356T532 -391Q312 -391 187 -295T61 -29Q61
-79 109 158T301 342Q396 412 422 449T449 547V606H713ZM745 948Q745 864 700 821T569 778Q486 778 441 822T395 948Q395 1029 441 1073T569 1118Q653 1118 699 1074T745 948Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM713 1579Q650 1623 528 1721T338 1886V1907H680Q743 1806 915 1606V1579H713Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM541 1579V1606Q713 1806 776 1907H1118V1886Q1066 1834 941 1732T744 1579H541Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM938 1579Q781 1672 704 1755Q626 1674 475 1579H272V1606Q461 1795
-528 1907H885Q916 1855 992 1766T1141 1606V1579H938Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM543 1684Q512 1684 484 1658T442 1577H293Q304 1722 375 1804T565 1886Q606
-1886 645 1870T723 1834T799 1798T872 1782Q903 1782 931 1808T973 1888H1122Q1111 1743 1039 1661T850 1579Q809 1579 770 1595T692 1631T616 1667T543 1684Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM365 1743Q365 1808 402 1843T504 1878Q570 1878 607 1841T645 1743Q645
-1683 607 1647T504 1610Q440 1610 403 1645T365 1743ZM768 1743Q768 1813 808 1845T909 1878Q974 1878 1012 1842T1051 1743Q1051 1682 1012 1646T909 1610Q849 1610 809 1642T768 1743Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1413" d="M1079 0L973 348H440L334 0H0L516 1468H895L1413 0H1079ZM899 608Q752 1081 734 1143T707 1241Q674 1113 518 608H899ZM959 1567Q959 1459 888 1393T705 1327Q593 1327 525 1391T457 1565Q457
-1673 524 1737T705 1802Q815 1802 887 1736T959 1567ZM801 1565Q801 1610 774 1635T705 1661Q663 1661 636 1636T609 1565Q609 1520 633 1494T705 1468Q747 1468 774 1494T801 1565Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1950" d="M1829 0H956V348H465L315 0H0L655 1462H1829V1208H1266V887H1792V633H1266V256H1829V0ZM578 608H956V1198H829L578 608Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1305" d="M805 1225Q630 1225 534 1094T438 727Q438 238 805 238Q959 238 1178 315V55Q998 -20 776 -20Q457 -20 288 173T119 729Q119 957 202 1128T440 1391T805 1483Q1018 1483 1233 1380L1133 1128Q1051
-1167 968 1196T805 1225ZM959 -250Q959 -378 884 -435T650 -492Q572 -492 504 -471V-303Q531 -310 576 -317T647 -324Q719 -324 719 -262Q719 -179 553 -154L631 0H824L797 -61Q871 -85 915 -135T959 -250Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM634 1579Q571 1623 449 1721T259 1886V1907H601Q664 1806 836 1606V1579H634Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM424 1579V1606Q596 1806 659 1907H1001V1886Q949 1834 824 1732T627 1579H424Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM841 1579Q684 1672 607 1755Q529 1674 378 1579H175V1606Q364 1795 431 1907H788Q819 1855 895 1766T1044 1606V1579H841Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1147" d="M1026 0H184V1462H1026V1208H494V887H989V633H494V256H1026V0ZM272 1743Q272 1808 309 1843T411 1878Q477 1878 514 1841T552 1743Q552 1683 514 1647T411 1610Q347 1610 310 1645T272 1743ZM675
-1743Q675 1813 715 1845T816 1878Q881 1878 919 1842T958 1743Q958 1682 919 1646T816 1610Q756 1610 716 1642T675 1743Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM317 1579Q254 1623 132 1721T-58 1886V1907H284Q347 1806 519 1606V1579H317Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM167 1579V1606Q339 1806 402 1907H744V1886Q692 1834 567 1732T370 1579H167Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM570 1579Q413 1672 336 1755Q258 1674 107 1579H-96V1606Q93 1795 160 1907H517Q548 1855 624 1766T773 1606V1579H570Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="678" d="M184 0V1462H494V0H184ZM-3 1743Q-3 1808 34 1843T136 1878Q202 1878 239 1841T277 1743Q277 1683 239 1647T136 1610Q72 1610 35 1645T-3 1743ZM400 1743Q400 1813 440 1845T541 1878Q606
-1878 644 1842T683 1743Q683 1682 644 1646T541 1610Q481 1610 441 1642T400 1743Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1516" d="M47 850H184V1462H643Q1001 1462 1199 1273T1397 745Q1397 384 1192 192T598 0H184V596H47V850ZM1075 737Q1075 969 971 1088T657 1208H494V850H731V596H494V256H625Q1075 256 1075 737Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1665" d="M1481 0H1087L451 1106H442Q461 813 461 688V0H184V1462H575L1210 367H1217Q1202 652 1202 770V1462H1481V0ZM668 1684Q637 1684 609 1658T567 1577H418Q429 1722 500 1804T690 1886Q731 1886
-770 1870T848 1834T924 1798T997 1782Q1028 1782 1056 1808T1098 1888H1247Q1236 1743 1164 1661T975 1579Q934 1579 895 1595T817 1631T741 1667T668 1684Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM824 1579Q761 1623 639 1721T449 1886V1907H791Q854 1806 1026 1606V1579H824Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM658 1579V1606Q830 1806 893 1907H1235V1886Q1183 1834 1058 1732T861 1579H658Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM1047 1579Q890 1672 813 1755Q735 1674 584 1579H381V1606Q570 1795 637 1907H994Q1025 1855 1101 1766T1250 1606V1579H1047Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186 1227
-817 1227Q632 1227 538 1103T444 733ZM652 1684Q621 1684 593 1658T551 1577H402Q413 1722 484 1804T674 1886Q715 1886 754 1870T832 1834T908 1798T981 1782Q1012 1782 1040 1808T1082 1888H1231Q1220 1743 1148 1661T959 1579Q918 1579 879 1595T801 1631T725
-1667T652 1684Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q479 -20 299 175T119 735Q119 1100 299 1292T817 1485Q1154 1485 1332 1291T1511 733ZM444 733Q444 488 537 364T815 240Q1186 240 1186 733Q1186
-1227 817 1227Q632 1227 538 1103T444 733ZM474 1743Q474 1808 511 1843T613 1878Q679 1878 716 1841T754 1743Q754 1683 716 1647T613 1610Q549 1610 512 1645T474 1743ZM877 1743Q877 1813 917 1845T1018 1878Q1083 1878 1121 1842T1160 1743Q1160 1682 1121
-1646T1018 1610Q958 1610 918 1642T877 1743Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1169" d="M428 723L129 1024L281 1178L582 879L887 1178L1040 1028L735 723L1036 420L887 268L582 569L281 270L131 422L428 723Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1630" d="M1511 733Q1511 370 1331 175T815 -20Q618 -20 479 45L389 -90L227 18L317 154Q119 348 119 735Q119 1100 299 1292T817 1485Q1015 1485 1161 1415L1245 1540L1405 1436L1317 1305Q1511 1111
-1511 733ZM444 733Q444 542 500 426L1006 1182Q922 1227 817 1227Q632 1227 538 1103T444 733ZM1186 733Q1186 913 1135 1030L635 279Q711 240 815 240Q1186 240 1186 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM750 1579Q687 1623 565 1721T375
-1886V1907H717Q780 1806 952 1606V1579H750Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM602 1579V1606Q774 1806 837 1907H1179V1886Q1127
-1834 1002 1732T805 1579H602Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM1006 1579Q849 1672 772 1755Q694
-1674 543 1579H340V1606Q529 1795 596 1907H953Q984 1855 1060 1766T1209 1606V1579H1006Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1548" d="M1374 1462V516Q1374 354 1302 232T1092 45T768 -20Q486 -20 330 124T174 520V1462H483V567Q483 398 551 319T776 240Q928 240 996 319T1065 569V1462H1374ZM433 1743Q433 1808 470 1843T572
-1878Q638 1878 675 1841T713 1743Q713 1683 675 1647T572 1610Q508 1610 471 1645T433 1743ZM836 1743Q836 1813 876 1845T977 1878Q1042 1878 1080 1842T1119 1743Q1119 1682 1080 1646T977 1610Q917 1610 877 1642T836 1743Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1278" d="M639 860L944 1462H1278L793 569V0H485V559L0 1462H336L639 860ZM461 1579V1606Q633 1806 696 1907H1038V1886Q986 1834 861 1732T664 1579H461Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1286" d="M1194 770Q1194 541 1052 417T647 293H494V0H184V1462H494V1233H672Q926 1233 1060 1114T1194 770ZM494 543H594Q739 543 810 595T881 770Q881 877 818 929T618 981H494V543Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1456" d="M1249 1241Q1249 1177 1228 1129T1175 1042T1106 975T1037 922T984 877T963 834Q963 807 989 781T1082 715Q1228 624 1280 575T1358 465T1384 326Q1384 154 1268 67T924 -20Q825 -20 753
--6T621 43V285Q674 249 756 224T903 199Q1071 199 1071 322Q1071 363 1055 388T998 444T883 516Q757 588 708 647T659 788Q659 852 694 905T799 1007Q876 1062 907 1102T938 1188Q938 1248 875 1288T711 1329Q595 1329 530 1277T465 1128V0H160V1139Q160 1340 306
-1453T711 1567Q955 1567 1102 1479T1249 1241Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM870 1241Q807 1285 685 1383T495 1548V1569H837Q900 1468 1072 1268V1241H870Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM441 1241V1268Q613 1468 676 1569H1018V1548Q966 1496 841 1394T644 1241H441Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963
-1043T1083 745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM1099 1496Q942 1589 865 1672Q787 1591 636 1496H433V1523Q622 1712 689 1824H1046Q1077 1772 1153 1683T1302 1523V1496H1099Z" />
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM467 1346Q436 1346 408 1320T366 1239H217Q228 1384 299 1466T489 1548Q530 1548 569 1532T647 1496T723 1460T796 1444Q827 1444 855 1470T897 1550H1046Q1035
-1405 963 1323T774 1241Q733 1241 694 1257T616 1293T540 1329T467 1346Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM285 1405Q285 1470 322 1505T424 1540Q490 1540 527 1503T565 1405Q565 1345 527 1309T424 1272Q360 1272 323 1307T285 1405ZM688 1405Q688 1475 728 1507T829
-1540Q894 1540 932 1504T971 1405Q971 1344 932 1308T829 1272Q769 1272 729 1304T688 1405Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1237" d="M870 0L811 152H803Q726 55 645 18T432 -20Q271 -20 179 72T86 334Q86 512 210 596T586 690L780 696V745Q780 915 606 915Q472 915 291 834L190 1040Q383 1141 618 1141Q843 1141 963 1043T1083
-745V0H870ZM780 518L662 514Q529 510 464 466T399 332Q399 203 547 203Q653 203 716 264T780 426V518ZM883 1479Q883 1371 812 1305T629 1239Q517 1239 449 1303T381 1477Q381 1585 448 1649T629 1714Q739 1714 811 1648T883 1479ZM725 1477Q725 1522 698 1547T629
-1573Q587 1573 560 1548T533 1477Q533 1432 557 1406T629 1380Q671 1380 698 1406T725 1477Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1878" d="M1329 -20Q1192 -20 1080 30T895 186Q797 69 699 25T442 -20Q281 -20 184 74T86 334Q86 512 207 596T569 690L760 696V780Q760 849 716 882T594 915Q454 915 289 838L190 1040Q379 1141 612 1141Q839
-1141 954 1010Q1020 1074 1106 1106T1313 1139Q1534 1139 1662 1002T1790 631V483H1067Q1072 353 1144 280T1346 207Q1542 207 1726 295V59Q1647 20 1555 0T1329 -20ZM760 518L647 514Q523 510 461 467T399 332Q399 203 539 203Q640 203 700 264T760 426V518ZM1307
-922Q1090 922 1073 686H1503Q1501 798 1448 860T1307 922Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="1053" d="M614 -20Q92 -20 92 553Q92 838 234 988T641 1139Q835 1139 989 1063L899 827Q827 856 765 874T641 893Q403 893 403 555Q403 227 641 227Q729 227 804 250T954 324V63Q880 16 805 -2T614
--20ZM805 -250Q805 -378 730 -435T496 -492Q418 -492 350 -471V-303Q377 -310 422 -317T493 -324Q565 -324 565 -262Q565 -179 399 -154L477 0H670L643 -61Q717 -85 761 -135T805 -250Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906 1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680 207Q781
-207 871 228T1059 295V59Q979 19 888 0T666 -20ZM447 1241V1268Q619 1468 682 1569H1024V1548Q972 1496 847 1394T650 1241H447Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM860 1241Q703 1334 626 1417Q548 1336 397 1241H194V1268Q383 1457 450 1569H807Q838 1517 914 1428T1063 1268V1241H860Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1210" d="M623 922Q526 922 471 861T408 686H836Q834 799 777 860T623 922ZM666 -20Q396 -20 244 129T92 551Q92 832 232 985T621 1139Q858 1139 990 1004T1122 631V483H401Q406 353 478 280T680
-207Q781 207 871 228T1059 295V59Q979 19 888 0T666 -20ZM297 1405Q297 1470 334 1505T436 1540Q502 1540 539 1503T577 1405Q577 1345 539 1309T436 1272Q372 1272 335 1307T297 1405ZM700 1405Q700 1475 740 1507T841 1540Q906 1540 944 1504T983 1405Q983 1344
-944 1308T841 1272Q781 1272 741 1304T700 1405Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM274 1241Q211 1285 89 1383T-101 1548V1569H241Q304 1468 476 1268V1241H274Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM145 1241V1268Q317 1468 380 1569H722V1548Q670 1496 545 1394T348 1241H145Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM544 1241Q387 1334 310 1417Q232 1336 81 1241H-122V1268Q67 1457 134 1569H491Q522 1517 598 1428T747 1268V1241H544Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="625" d="M465 0H160V1118H465V0ZM-29 1405Q-29 1470 8 1505T110 1540Q176 1540 213 1503T251 1405Q251 1345 213 1309T110 1272Q46 1272 9 1307T-29 1405ZM374 1405Q374 1475 414 1507T515 1540Q580
-1540 618 1504T657 1405Q657 1344 618 1308T515 1272Q455 1272 415 1304T374 1405Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1268" d="M510 1303Q430 1356 358 1395L459 1571Q603 1506 717 1430L942 1569L1042 1415L872 1311Q1028 1168 1102 987T1176 573Q1176 293 1031 137T631 -20Q386 -20 239 117T92 489Q92 722 222 858T573
-995Q778 995 848 897L856 901Q789 1063 664 1182L434 1040L334 1196L510 1303ZM864 532Q864 640 803 705T635 770Q514 770 459 702T403 487Q403 347 463 276T635 205Q758 205 811 287T864 532Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1346" d="M1192 0H887V653Q887 774 844 834T707 895Q579 895 522 810T465 526V0H160V1118H393L434 975H451Q502 1056 591 1097T795 1139Q990 1139 1091 1034T1192 729V0ZM508 1346Q477 1346 449 1320T407
-1239H258Q269 1384 340 1466T530 1548Q571 1548 610 1532T688 1496T764 1460T837 1444Q868 1444 896 1470T938 1550H1087Q1076 1405 1004 1323T815 1241Q774 1241 735 1257T657 1293T581 1329T508 1346Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM868 1241Q805 1285 683 1383T493 1548V1569H835Q898 1468 1070 1268V1241H868Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM467 1241V1268Q639 1468 702 1569H1044V1548Q992 1496 867 1394T670 1241H467Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM864 1241Q707 1334 630 1417Q552 1336 401 1241H198V1268Q387 1457 454 1569H811Q842 1517 918 1428T1067 1268V1241H864Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92 835
-235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM469 1346Q438 1346 410 1320T368 1239H219Q230 1384 301 1466T491 1548Q532 1548 571 1532T649 1496T725 1460T798 1444Q829 1444 857 1470T899 1550H1048Q1037 1405 965 1323T776 1241Q735 1241 696 1257T618
-1293T542 1329T469 1346Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1268" d="M403 561Q403 395 457 310T635 225Q757 225 810 309T864 561Q864 727 810 810T633 893Q511 893 457 811T403 561ZM1176 561Q1176 288 1032 134T631 -20Q470 -20 347 50T158 253T92 561Q92
-835 235 987T637 1139Q798 1139 921 1069T1110 868T1176 561ZM291 1405Q291 1470 328 1505T430 1540Q496 1540 533 1503T571 1405Q571 1345 533 1309T430 1272Q366 1272 329 1307T291 1405ZM694 1405Q694 1475 734 1507T835 1540Q900 1540 938 1504T977 1405Q977
-1344 938 1308T835 1272Q775 1272 735 1304T694 1405Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1169" d="M88 612V831H1081V612H88ZM444 373Q444 449 481 486T584 524Q650 524 686 485T723 373Q723 303 686 262T584 221Q519 221 482 260T444 373ZM444 1071Q444 1146 481 1184T584 1223Q651 1223
-687 1183T723 1071Q723 1001 686 961T584 920Q519 920 482 959T444 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1268" d="M1176 561Q1176 288 1032 134T631 -20Q505 -20 397 25L330 -76L176 29L244 129Q92 285 92 561Q92 835 235 987T637 1139Q769 1139 885 1087L940 1169L1092 1061L1034 977Q1176 822 1176 561ZM403
-561Q403 467 422 395L739 870Q696 893 633 893Q511 893 457 811T403 561ZM864 561Q864 642 852 702L543 240Q581 225 635 225Q757 225 810 309T864 561Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM876 1241Q813 1285 691 1383T501 1548V1569H843Q906
-1468 1078 1268V1241H876Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM498 1241V1268Q670 1468 733 1569H1075V1548Q1023
-1496 898 1394T701 1241H498Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM901 1241Q744 1334 667 1417Q589
-1336 438 1241H235V1268Q424 1457 491 1569H848Q879 1517 955 1428T1104 1268V1241H901Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1346" d="M952 0L911 143H895Q846 65 756 23T551 -20Q354 -20 254 85T154 389V1118H459V465Q459 344 502 284T639 223Q767 223 824 308T881 592V1118H1186V0H952ZM326 1405Q326 1470 363 1505T465
-1540Q531 1540 568 1503T606 1405Q606 1345 568 1309T465 1272Q401 1272 364 1307T326 1405ZM729 1405Q729 1475 769 1507T870 1540Q935 1540 973 1504T1012 1405Q1012 1344 973 1308T870 1272Q810 1272 770 1304T729 1405Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM393 1241V1268Q565 1468 628 1569H970V1548Q918 1496 793 1394T596 1241H393Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1296" d="M465 973Q515 1054 596 1096T782 1139Q980 1139 1092 985T1204 561Q1204 288 1093 134T782 -20Q569 -20 465 117H451L458 55L465 -39V-492H160V1556H465V1165L458 1045L451 973H465ZM684 895Q571
-895 519 826T465 596V563Q465 383 518 305T688 227Q893 227 893 565Q893 730 843 812T684 895Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1165" d="M0 1118H334L545 489Q572 407 582 295H588Q599 398 631 489L838 1118H1165L692 -143Q627 -318 507 -405T225 -492Q146 -492 70 -475V-233Q125 -246 190 -246Q271 -246 331 -197T426 -47L444
-8L0 1118ZM499 1405Q499 1470 536 1505T638 1540Q704 1540 741 1503T779 1405Q779 1345 741 1309T638 1272Q574 1272 537 1307T499 1405ZM902 1405Q902 1475 942 1507T1043 1540Q1108 1540 1146 1504T1185 1405Q1185 1344 1146 1308T1043 1272Q983 1272 943 1304T902
-1405Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 436V666H942V436H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 436V666H1966V436H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="444" d="M39 961L25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="444" d="M406 1462L420 1440Q370 1243 244 961H25Q94 1257 125 1462H406Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="596" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="911" d="M492 983Q514 1074 564 1211T668 1462H887Q821 1195 786 961H506L492 983ZM25 983Q47 1074 97 1211T201 1462H420Q354 1195 319 961H39L25 983Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="911" d="M420 1440Q370 1243 244 961H25Q94 1257 125 1462H406L420 1440ZM887 1440Q837 1243 711 961H492Q561 1257 592 1462H872L887 1440Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="1061" d="M459 215Q407 13 283 -264H63Q128 2 164 238H444L459 215ZM926 215Q874 13 750 -264H530Q595 2 631 238H911L926 215Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M98 748Q98 902 172 983T385 1065Q522 1065 597 983T672 748Q672 596 597 513T385 430Q247 430 173 513T98 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="754" d="M82 573L453 1028L672 909L393 561L672 213L453 94L82 547V573Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="754" d="M672 547L301 94L82 213L360 561L82 909L301 1028L672 573V547Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.ttf b/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.ttf
deleted file mode 100644
index 11aec0f49e..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.ttf and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.woff b/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.woff
deleted file mode 100644
index 2523e953cb..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.woff and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.woff2 b/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.woff2
deleted file mode 100644
index 2b04b15bb7..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-700.woff2 and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.eot b/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.eot
deleted file mode 100644
index 1a8b1160df..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.eot and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.svg b/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.svg
deleted file mode 100644
index 78eb653a75..0000000000
--- a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.svg
+++ /dev/null
@@ -1,336 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs >
-<font id="OpenSans" horiz-adv-x="1206" ><font-face
-    font-family="Open Sans"
-    units-per-em="2048"
-    panose-1="2 11 6 6 3 5 4 2 2 4"
-    ascent="2189"
-    descent="-600"
-    alphabetic="0" />
-<glyph unicode=" " glyph-name="space" horiz-adv-x="532" />
-<glyph unicode="!" glyph-name="exclam" horiz-adv-x="547" d="M326 403H221L170 1462H377L326 403ZM152 106Q152 242 272 242Q330 242 361 207T393 106Q393 42 361 7T272 -29Q220 -29 186 2T152 106Z" />
-<glyph unicode="&quot;" glyph-name="quotedbl" horiz-adv-x="821" d="M319 1462L279 934H174L133 1462H319ZM688 1462L647 934H543L502 1462H688Z" />
-<glyph unicode="#" glyph-name="numbersign" horiz-adv-x="1323" d="M981 899L915 559H1198V430H891L807 0H670L754 430H451L369 0H233L313 430H51V559H338L406 899H129V1026H428L510 1462H649L567 1026H872L956 1462H1090L1006 1026H1270V899H981ZM475 559H778L844
-899H541L475 559Z" />
-<glyph unicode="$" glyph-name="dollar" horiz-adv-x="1171" d="M1036 449Q1036 313 934 225T649 113V-119H520V104Q408 104 303 121T131 170V326Q214 289 322 266T520 242V682Q315 747 233 833T150 1055Q150 1186 251 1270T520 1372V1554H649V1374Q833 1369 1004
-1300L952 1169Q803 1228 649 1239V805Q806 755 884 708T999 599T1036 449ZM866 436Q866 508 822 552T649 641V252Q866 282 866 436ZM319 1057Q319 981 364 935T520 848V1235Q421 1219 370 1173T319 1057Z" />
-<glyph unicode="%" glyph-name="percent" horiz-adv-x="1686" d="M242 1026Q242 856 279 771T399 686Q563 686 563 1026Q563 1364 399 1364Q316 1364 279 1280T242 1026ZM700 1026Q700 798 624 682T399 565Q259 565 182 684T104 1026Q104 1253 178 1368T399 1483Q544
-1483 622 1364T700 1026ZM1122 440Q1122 269 1159 185T1280 100Q1364 100 1404 183T1444 440Q1444 611 1404 693T1280 776Q1196 776 1159 694T1122 440ZM1581 440Q1581 213 1505 97T1280 -20Q1138 -20 1062 99T985 440Q985 667 1059 782T1280 897Q1422 897 1501
-780T1581 440ZM1323 1462L512 0H365L1176 1462H1323Z" />
-<glyph unicode="&amp;" glyph-name="ampersand" horiz-adv-x="1495" d="M414 1171Q414 1102 450 1040T573 889Q702 964 752 1027T803 1174Q803 1251 752 1299T614 1348Q525 1348 470 1300T414 1171ZM569 129Q810 129 969 283L532 707Q421 639 375 595T307 499T285
-383Q285 266 362 198T569 129ZM113 379Q113 509 182 609T432 811Q347 906 317 955T268 1057T250 1167Q250 1317 348 1401T621 1485Q783 1485 876 1402T969 1169Q969 1062 901 972T676 788L1083 397Q1139 459 1172 542T1229 725H1397Q1329 439 1192 291L1491 0H1262L1077
-178Q959 72 837 26T565 -20Q350 -20 232 86T113 379Z" />
-<glyph unicode="&apos;" glyph-name="quotesingle" horiz-adv-x="453" d="M319 1462L279 934H174L133 1462H319Z" />
-<glyph unicode="(" glyph-name="parenleft" horiz-adv-x="606" d="M82 561Q82 826 159 1057T383 1462H545Q401 1269 329 1038T256 563Q256 323 330 94T543 -324H383Q236 -154 159 73T82 561Z" />
-<glyph unicode=")" glyph-name="parenright" horiz-adv-x="606" d="M524 561Q524 298 447 71T223 -324H63Q202 -136 276 93T350 563Q350 807 278 1038T61 1462H223Q370 1287 447 1056T524 561Z" />
-<glyph unicode="*" glyph-name="asterisk" horiz-adv-x="1130" d="M657 1556L614 1161L1012 1272L1038 1090L657 1059L905 733L733 639L557 1001L397 639L221 733L463 1059L86 1090L115 1272L506 1161L463 1556H657Z" />
-<glyph unicode="+" glyph-name="plus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791Z" />
-<glyph unicode="," glyph-name="comma" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="-" glyph-name="hyphen" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="." glyph-name="period" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106Z" />
-<glyph unicode="/" glyph-name="slash" horiz-adv-x="752" d="M731 1462L186 0H20L565 1462H731Z" />
-<glyph unicode="0" glyph-name="zero" horiz-adv-x="1171" d="M1069 733Q1069 354 950 167T584 -20Q348 -20 225 171T102 733Q102 1115 221 1300T584 1485Q822 1485 945 1292T1069 733ZM270 733Q270 414 345 269T584 123Q750 123 824 270T899 733Q899 1048 825
-1194T584 1341Q420 1341 345 1197T270 733Z" />
-<glyph unicode="1" glyph-name="one" horiz-adv-x="1171" d="M715 0H553V1042Q553 1172 561 1288Q540 1267 514 1244T276 1049L188 1163L575 1462H715V0Z" />
-<glyph unicode="2" glyph-name="two" horiz-adv-x="1171" d="M1061 0H100V143L485 530Q661 708 717 784T801 932T829 1087Q829 1204 758 1272T561 1341Q470 1341 389 1311T207 1202L119 1315Q321 1483 559 1483Q765 1483 882 1378T999 1094Q999 955 921 819T629
-475L309 162V154H1061V0Z" />
-<glyph unicode="3" glyph-name="three" horiz-adv-x="1171" d="M1006 1118Q1006 978 928 889T705 770V762Q881 740 966 650T1051 414Q1051 205 906 93T494 -20Q378 -20 282 -3T94 59V217Q189 170 296 146T500 121Q879 121 879 418Q879 684 461 684H317V827H463Q634
-827 734 902T834 1112Q834 1219 761 1280T561 1341Q465 1341 380 1315T186 1219L102 1331Q192 1402 309 1442T557 1483Q770 1483 888 1386T1006 1118Z" />
-<glyph unicode="4" glyph-name="four" horiz-adv-x="1171" d="M1130 336H913V0H754V336H43V481L737 1470H913V487H1130V336ZM754 487V973Q754 1116 764 1296H756Q708 1200 666 1137L209 487H754Z" />
-<glyph unicode="5" glyph-name="five" horiz-adv-x="1171" d="M557 893Q788 893 920 779T1053 465Q1053 238 909 109T510 -20Q263 -20 133 59V219Q203 174 307 149T512 123Q688 123 785 206T883 446Q883 752 508 752Q413 752 254 723L168 778L223 1462H950V1309H365L328
-870Q443 893 557 893Z" />
-<glyph unicode="6" glyph-name="six" horiz-adv-x="1171" d="M117 625Q117 1056 284 1269T780 1483Q893 1483 958 1464V1321Q881 1346 782 1346Q547 1346 423 1200T287 739H299Q409 911 647 911Q844 911 957 792T1071 469Q1071 241 947 111T610 -20Q383 -20 250
-150T117 625ZM608 121Q750 121 828 210T907 469Q907 614 834 697T616 780Q526 780 451 743T332 641T287 506Q287 403 327 314T440 173T608 121Z" />
-<glyph unicode="7" glyph-name="seven" horiz-adv-x="1171" d="M285 0L891 1309H94V1462H1067V1329L469 0H285Z" />
-<glyph unicode="8" glyph-name="eight" horiz-adv-x="1171" d="M584 1483Q784 1483 901 1390T1018 1133Q1018 1025 951 936T737 774Q915 689 990 596T1065 379Q1065 197 938 89T590 -20Q356 -20 230 82T104 373Q104 624 410 764Q272 842 212 932T152 1135Q152
-1294 269 1388T584 1483ZM268 369Q268 249 351 182T586 115Q735 115 818 185T901 377Q901 474 823 549T551 696Q402 632 335 555T268 369ZM582 1348Q457 1348 386 1288T315 1128Q315 1036 374 970T592 838Q735 898 794 967T854 1128Q854 1229 782 1288T582 1348Z"
-/>
-<glyph unicode="9" glyph-name="nine" horiz-adv-x="1171" d="M1061 838Q1061 -20 397 -20Q281 -20 213 0V143Q293 117 395 117Q635 117 757 265T891 721H879Q824 638 733 595T528 551Q334 551 220 667T106 991Q106 1219 233 1351T569 1483Q718 1483 829 1407T1001
-1184T1061 838ZM569 1341Q426 1341 348 1249T270 993Q270 849 342 767T561 684Q652 684 728 721T849 822T893 956Q893 1061 852 1150T738 1290T569 1341Z" />
-<glyph unicode=":" glyph-name="colon" horiz-adv-x="545" d="M152 106Q152 173 182 207T270 242Q328 242 360 208T393 106Q393 41 360 6T270 -29Q219 -29 186 2T152 106ZM152 989Q152 1124 270 1124Q393 1124 393 989Q393 924 360 889T270 854Q219 854 186 885T152 989Z" />
-<glyph unicode=";" glyph-name="semicolon" horiz-adv-x="545" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350ZM147 989Q147 1124 266 1124Q389 1124 389 989Q389 924 356 889T266 854Q208 854 178 889T147 989Z" />
-<glyph unicode="&lt;" glyph-name="less" horiz-adv-x="1171" d="M1065 242L104 664V762L1065 1241V1092L283 721L1065 393V242Z" />
-<glyph unicode="=" glyph-name="equal" horiz-adv-x="1171" d="M119 858V995H1049V858H119ZM119 449V586H1049V449H119Z" />
-<glyph unicode="&gt;" glyph-name="greater" horiz-adv-x="1171" d="M104 393L887 719L104 1092V1241L1065 762V664L104 242V393Z" />
-<glyph unicode="?" glyph-name="question" horiz-adv-x="879" d="M289 403V457Q289 574 325 649T459 809Q595 924 630 982T666 1122Q666 1224 601 1279T412 1335Q333 1335 258 1317T86 1249L27 1384Q216 1483 422 1483Q613 1483 719 1389T825 1124Q825 1051 806
-996T748 891T584 731Q483 645 451 588T418 436V403H289ZM240 106Q240 242 360 242Q418 242 449 207T481 106Q481 42 449 7T360 -29Q308 -29 274 2T240 106Z" />
-<glyph unicode="@" glyph-name="at" horiz-adv-x="1841" d="M1720 729Q1720 587 1676 469T1552 286T1368 221Q1282 221 1223 273T1153 406H1145Q1105 319 1031 270T854 221Q704 221 620 323T535 602Q535 806 653 933T963 1061Q1031 1061 1117 1049T1272 1014L1247
-544V522Q1247 344 1380 344Q1471 344 1528 451T1585 731Q1585 912 1511 1048T1301 1257T987 1331Q764 1331 599 1239T347 975T260 578Q260 273 421 109T885 -55Q1095 -55 1321 31V-102Q1129 -186 885 -186Q522 -186 322 13T121 571Q121 831 228 1034T533 1348T987
-1460Q1202 1460 1369 1370T1628 1113T1720 729ZM686 598Q686 344 881 344Q1088 344 1106 657L1120 918Q1048 938 963 938Q833 938 760 848T686 598Z" />
-<glyph unicode="A" glyph-name="A" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885Z" />
-<glyph unicode="B" glyph-name="B" horiz-adv-x="1327" d="M201 1462H614Q905 1462 1035 1375T1165 1100Q1165 970 1093 886T881 776V766Q1214 709 1214 416Q1214 220 1082 110T711 0H201V1462ZM371 836H651Q831 836 910 892T989 1083Q989 1206 901 1260T621 1315H371V836ZM371
-692V145H676Q853 145 942 213T1032 428Q1032 564 941 628T662 692H371Z" />
-<glyph unicode="C" glyph-name="C" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159 1253Q993
-1331 827 1331Z" />
-<glyph unicode="D" glyph-name="D" horiz-adv-x="1493" d="M1368 745Q1368 383 1172 192T606 0H201V1462H649Q990 1462 1179 1273T1368 745ZM1188 739Q1188 1025 1045 1170T618 1315H371V147H578Q882 147 1035 296T1188 739Z" />
-<glyph unicode="E" glyph-name="E" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0Z" />
-<glyph unicode="F" glyph-name="F" horiz-adv-x="1057" d="M371 0H201V1462H1016V1311H371V776H977V625H371V0Z" />
-<glyph unicode="G" glyph-name="G" horiz-adv-x="1491" d="M844 766H1341V55Q1225 18 1105 -1T827 -20Q495 -20 310 177T125 731Q125 959 216 1130T480 1392T883 1483Q1117 1483 1319 1397L1253 1247Q1055 1331 872 1331Q605 1331 455 1172T305 731Q305 435 449
-282T874 129Q1026 129 1171 164V614H844V766Z" />
-<glyph unicode="H" glyph-name="H" horiz-adv-x="1511" d="M1311 0H1141V688H371V0H201V1462H371V840H1141V1462H1311V0Z" />
-<glyph unicode="I" glyph-name="I" horiz-adv-x="571" d="M201 0V1462H371V0H201Z" />
-<glyph unicode="J" glyph-name="J" horiz-adv-x="547" d="M-12 -385Q-106 -385 -160 -358V-213Q-89 -233 -12 -233Q87 -233 138 -173T190 0V1462H360V14Q360 -176 264 -280T-12 -385Z" />
-<glyph unicode="K" glyph-name="K" horiz-adv-x="1257" d="M1257 0H1057L524 709L371 573V0H201V1462H371V737L1034 1462H1235L647 827L1257 0Z" />
-<glyph unicode="L" glyph-name="L" horiz-adv-x="1063" d="M201 0V1462H371V154H1016V0H201Z" />
-<glyph unicode="M" glyph-name="M" horiz-adv-x="1849" d="M848 0L352 1296H344Q358 1142 358 930V0H201V1462H457L920 256H928L1395 1462H1649V0H1479V942Q1479 1104 1493 1294H1485L985 0H848Z" />
-<glyph unicode="N" glyph-name="N" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0Z" />
-<glyph unicode="O" glyph-name="O" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290 1028
-1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="P" glyph-name="P" horiz-adv-x="1233" d="M1128 1036Q1128 814 977 695T543 575H371V0H201V1462H580Q1128 1462 1128 1036ZM371 721H524Q750 721 851 794T952 1028Q952 1173 857 1244T561 1315H371V721Z" />
-<glyph unicode="Q" glyph-name="Q" horiz-adv-x="1595" d="M1470 733Q1470 452 1357 266T1038 14L1386 -348H1139L854 -18L799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042
-129 1166 282T1290 733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="R" glyph-name="R" horiz-adv-x="1266" d="M371 608V0H201V1462H602Q871 1462 999 1359T1128 1049Q1128 759 834 657L1231 0H1030L676 608H371ZM371 754H604Q784 754 868 825T952 1040Q952 1185 867 1249T592 1313H371V754Z" />
-<glyph unicode="S" glyph-name="S" horiz-adv-x="1124" d="M1026 389Q1026 196 886 88T506 -20Q246 -20 106 47V211Q196 173 302 151T512 129Q682 129 768 193T854 373Q854 449 824 497T722 587T504 680Q300 753 213 853T125 1114Q125 1283 252 1383T588 1483Q806
-1483 989 1403L936 1255Q755 1331 584 1331Q449 1331 373 1273T297 1112Q297 1036 325 988T419 899T623 809Q853 727 939 633T1026 389Z" />
-<glyph unicode="T" glyph-name="T" horiz-adv-x="1133" d="M651 0H481V1311H18V1462H1114V1311H651V0Z" />
-<glyph unicode="U" glyph-name="U" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305Z" />
-<glyph unicode="V" glyph-name="V" horiz-adv-x="1219" d="M1036 1462H1219L692 0H524L0 1462H180L516 516Q574 353 608 199Q644 361 702 522L1036 1462Z" />
-<glyph unicode="W" glyph-name="W" horiz-adv-x="1896" d="M1477 0H1309L1014 979Q993 1044 967 1143T940 1262Q918 1130 870 973L584 0H416L27 1462H207L438 559Q486 369 508 215Q535 398 588 573L850 1462H1030L1305 565Q1353 410 1386 215Q1405 357 1458 561L1688
-1462H1868L1477 0Z" />
-<glyph unicode="X" glyph-name="X" horiz-adv-x="1182" d="M1174 0H981L588 643L188 0H8L494 764L41 1462H229L592 883L958 1462H1139L686 770L1174 0Z" />
-<glyph unicode="Y" glyph-name="Y" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731Z" />
-<glyph unicode="Z" glyph-name="Z" horiz-adv-x="1169" d="M1087 0H82V133L858 1309H106V1462H1065V1329L289 154H1087V0Z" />
-<glyph unicode="[" glyph-name="bracketleft" horiz-adv-x="674" d="M623 -324H166V1462H623V1321H334V-182H623V-324Z" />
-<glyph unicode="\" glyph-name="backslash" horiz-adv-x="752" d="M186 1462L733 0H567L23 1462H186Z" />
-<glyph unicode="]" glyph-name="bracketright" horiz-adv-x="674" d="M51 -182H340V1321H51V1462H508V-324H51V-182Z" />
-<glyph unicode="^" glyph-name="asciicircum" horiz-adv-x="1110" d="M49 551L483 1473H582L1059 551H907L535 1296L201 551H49Z" />
-<glyph unicode="_" glyph-name="underscore" horiz-adv-x="918" d="M922 -315H-4V-184H922V-315Z" />
-<glyph unicode="`" glyph-name="grave" horiz-adv-x="1182" d="M786 1241H676Q611 1293 522 1389T393 1548V1569H596Q628 1500 685 1410T786 1266V1241Z" />
-<glyph unicode="a" glyph-name="a" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878 1027T973
-748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117Z" />
-<glyph unicode="b" glyph-name="b" horiz-adv-x="1255" d="M686 1114Q902 1114 1021 967T1141 549Q1141 279 1021 130T686 -20Q579 -20 491 19T342 141H330L295 0H176V1556H342V1178Q342 1051 334 950H342Q458 1114 686 1114ZM662 975Q492 975 417 878T342 549Q342
-318 419 219T666 119Q819 119 894 230T969 551Q969 765 894 870T662 975Z" />
-<glyph unicode="c" glyph-name="c" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781 -20 614 -20Z" />
-<glyph unicode="d" glyph-name="d" horiz-adv-x="1255" d="M922 147H913Q798 -20 569 -20Q354 -20 235 127T115 545Q115 816 235 966T569 1116Q792 1116 911 954H924L917 1033L913 1110V1556H1079V0H944L922 147ZM590 119Q760 119 836 211T913 510V545Q913 778
-836 877T588 977Q442 977 365 864T287 543Q287 333 364 226T590 119Z" />
-<glyph unicode="e" glyph-name="e" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384 891T291
-653H864Q864 810 794 893T594 977Z" />
-<glyph unicode="f" glyph-name="f" horiz-adv-x="694" d="M670 967H391V0H225V967H29V1042L225 1102V1163Q225 1567 578 1567Q665 1567 782 1532L739 1399Q643 1430 575 1430Q481 1430 436 1368T391 1167V1096H670V967Z" />
-<glyph unicode="g" glyph-name="g" horiz-adv-x="1122" d="M1073 1096V991L870 967Q898 932 920 876T942 748Q942 587 832 491T530 395Q481 395 438 403Q332 347 332 262Q332 217 369 196T496 174H690Q868 174 963 99T1059 -119Q1059 -301 913 -396T487 -492Q272
--492 156 -412T39 -186Q39 -86 103 -13T283 86Q241 105 213 145T184 238Q184 298 216 343T317 430Q232 465 179 549T125 741Q125 921 233 1018T539 1116Q625 1116 694 1096H1073ZM199 -184Q199 -273 274 -319T489 -365Q698 -365 798 -303T899 -133Q899 -44 844
--10T637 25H438Q325 25 262 -29T199 -184ZM289 745Q289 630 354 571T535 512Q778 512 778 748Q778 995 532 995Q415 995 352 932T289 745Z" />
-<glyph unicode="h" glyph-name="h" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q501 975 422 881T342 573V0H176V1556H342V1085Q342 1000 334 944H344Q393 1023 483 1068T690 1114Q891 1114 991 1019T1092 715V0H926Z" />
-<glyph unicode="i" glyph-name="i" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260 1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="j" glyph-name="j" horiz-adv-x="518" d="M43 -492Q-52 -492 -111 -467V-332Q-42 -352 25 -352Q103 -352 139 -310T176 -180V1096H342V-168Q342 -492 43 -492ZM162 1393Q162 1450 190 1476T260 1503Q300 1503 329 1476T358 1393Q358 1337 329 1310T260
-1282Q218 1282 190 1309T162 1393Z" />
-<glyph unicode="k" glyph-name="k" horiz-adv-x="1075" d="M340 561Q383 622 471 721L825 1096H1022L578 629L1053 0H852L465 518L340 410V0H176V1556H340V731Q340 676 332 561H340Z" />
-<glyph unicode="l" glyph-name="l" horiz-adv-x="518" d="M342 0H176V1556H342V0Z" />
-<glyph unicode="m" glyph-name="m" horiz-adv-x="1905" d="M1573 0V713Q1573 844 1517 909T1343 975Q1188 975 1114 886T1040 612V0H874V713Q874 844 818 909T643 975Q487 975 415 882T342 575V0H176V1096H311L338 946H346Q393 1026 478 1071T670 1116Q927 1116
-1006 930H1014Q1063 1016 1156 1066T1368 1116Q1554 1116 1646 1021T1739 715V0H1573Z" />
-<glyph unicode="n" glyph-name="n" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926Z" />
-<glyph unicode="o" glyph-name="o" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950 758 866
-866T616 975Q453 975 370 868T287 549Z" />
-<glyph unicode="p" glyph-name="p" horiz-adv-x="1255" d="M686 -20Q579 -20 491 19T342 141H330Q342 45 342 -41V-492H176V1096H311L334 946H342Q406 1036 491 1076T686 1116Q904 1116 1022 967T1141 549Q1141 279 1021 130T686 -20ZM662 975Q494 975 419 882T342
-586V549Q342 318 419 219T666 119Q808 119 888 234T969 551Q969 756 889 865T662 975Z" />
-<glyph unicode="q" glyph-name="q" horiz-adv-x="1255" d="M590 119Q756 119 832 208T913 508V545Q913 775 835 876T588 977Q442 977 365 864T287 543Q287 336 363 228T590 119ZM565 -20Q353 -20 234 129T115 545Q115 814 235 965T569 1116Q794 1116 915 946H924L948
-1096H1079V-492H913V-23Q913 77 924 147H911Q796 -20 565 -20Z" />
-<glyph unicode="r" glyph-name="r" horiz-adv-x="836" d="M676 1116Q749 1116 807 1104L784 950Q716 965 664 965Q531 965 437 857T342 588V0H176V1096H313L332 893H340Q401 1000 487 1058T676 1116Z" />
-<glyph unicode="s" glyph-name="s" horiz-adv-x="977" d="M883 299Q883 146 769 63T449 -20Q231 -20 109 49V203Q188 163 278 140T453 117Q583 117 653 158T723 285Q723 349 668 394T451 502Q298 559 234 601T138 698T106 827Q106 961 215 1038T514 1116Q691 1116
-860 1044L801 909Q636 977 502 977Q384 977 324 940T264 838Q264 794 286 763T359 704T551 623Q746 552 814 480T883 299Z" />
-<glyph unicode="t" glyph-name="t" horiz-adv-x="723" d="M530 117Q574 117 615 123T680 137V10Q653 -3 601 -11T506 -20Q188 -20 188 315V967H31V1047L188 1116L258 1350H354V1096H672V967H354V322Q354 223 401 170T530 117Z" />
-<glyph unicode="u" glyph-name="u" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332Z" />
-<glyph unicode="v" glyph-name="v" horiz-adv-x="1026" d="M416 0L0 1096H178L414 446Q494 218 508 150H516Q527 203 585 369T848 1096H1026L610 0H416Z" />
-<glyph unicode="w" glyph-name="w" horiz-adv-x="1593" d="M1071 0L870 643Q851 702 799 911H791Q751 736 721 641L514 0H322L23 1096H197Q303 683 358 467T422 176H430Q441 233 465 323T508 467L709 1096H889L1085 467Q1141 295 1161 178H1169Q1173 214 1190
-289T1399 1096H1571L1268 0H1071Z" />
-<glyph unicode="x" glyph-name="x" horiz-adv-x="1073" d="M440 561L59 1096H248L537 676L825 1096H1012L631 561L1032 0H844L537 444L227 0H39L440 561Z" />
-<glyph unicode="y" glyph-name="y" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096Z" />
-<glyph unicode="z" glyph-name="z" horiz-adv-x="958" d="M877 0H82V113L680 967H119V1096H862V967L272 129H877V0Z" />
-<glyph unicode="{" glyph-name="braceleft" horiz-adv-x="776" d="M475 12Q475 -90 533 -136T705 -184V-324Q515 -322 411 -237T307 2V305Q307 409 244 453T61 498V639Q191 641 249 687T307 829V1135Q307 1290 415 1376T705 1462V1323Q475 1317 475 1124V829Q475
-614 252 575V563Q475 524 475 309V12Z" />
-<glyph unicode="|" glyph-name="bar" horiz-adv-x="1128" d="M494 1556H635V-496H494V1556Z" />
-<glyph unicode="}" glyph-name="braceright" horiz-adv-x="776" d="M522 575Q299 614 299 829V1124Q299 1317 72 1323V1462Q256 1462 361 1375T467 1135V829Q467 732 526 687T715 639V498Q593 498 530 454T467 305V2Q467 -151 365 -236T72 -324V-184Q183 -182
-241 -136T299 12V309Q299 423 354 483T522 563V575Z" />
-<glyph unicode="~" glyph-name="asciitilde" horiz-adv-x="1171" d="M338 713Q285 713 222 680T104 592V743Q204 852 348 852Q416 852 472 838T618 786Q684 758 733 745T829 731Q883 731 947 763T1065 852V702Q963 592 821 592Q749 592 686 608T551 657Q476 689
-431 701T338 713Z" />
-<glyph unicode="&#xa0;" glyph-name="nbspace" horiz-adv-x="532" />
-<glyph unicode="&#xa1;" glyph-name="exclamdown" horiz-adv-x="547" d="M219 684H324L375 -373H168L219 684ZM393 983Q393 848 272 848Q212 848 182 883T152 983Q152 1046 183 1082T272 1118Q323 1118 358 1086T393 983Z" />
-<glyph unicode="&#xa2;" glyph-name="cent" horiz-adv-x="1171" d="M971 240Q866 186 719 180V-20H586V186Q383 218 287 354T190 741Q190 1249 586 1311V1483H721V1319Q796 1316 867 1300T987 1260L938 1120Q805 1171 696 1171Q524 1171 443 1066T362 743Q362
-531 441 430T688 328Q829 328 971 387V240Z" />
-<glyph unicode="&#xa3;" glyph-name="sterling" horiz-adv-x="1171" d="M682 1481Q872 1481 1042 1397L981 1264Q827 1341 684 1341Q561 1341 499 1279T436 1077V782H858V655H436V434Q436 334 404 266T297 154H1092V0H63V141Q268 188 268 432V655H70V782H268V1098Q268
-1276 380 1378T682 1481Z" />
-<glyph unicode="&#xa4;" glyph-name="currency" horiz-adv-x="1171" d="M184 723Q184 845 258 952L123 1092L217 1184L352 1051Q456 1124 586 1124Q713 1124 815 1051L952 1184L1047 1092L913 954Q987 841 987 723Q987 592 913 489L1044 354L952 262L815 395Q713
-324 586 324Q452 324 352 397L217 264L125 356L258 492Q184 599 184 723ZM313 723Q313 611 391 531T586 451Q702 451 781 530T860 723Q860 837 780 918T586 999Q470 999 392 917T313 723Z" />
-<glyph unicode="&#xa5;" glyph-name="yen" horiz-adv-x="1171" d="M584 735L963 1462H1137L721 692H983V565H666V395H983V268H666V0H502V268H186V395H502V565H186V692H442L31 1462H209L584 735Z" />
-<glyph unicode="&#xa6;" glyph-name="brokenbar" horiz-adv-x="1128" d="M494 1556H635V780H494V1556ZM494 281H635V-496H494V281Z" />
-<glyph unicode="&#xa7;" glyph-name="section" horiz-adv-x="1057" d="M139 809Q139 895 182 963T303 1069Q229 1109 187 1164T145 1305Q145 1426 248 1495T549 1565Q643 1565 722 1551T899 1497L846 1366Q748 1405 681 1418T537 1432Q421 1432 363 1403T305 1309Q305
-1249 366 1207T582 1110Q768 1042 843 967T918 784Q918 694 877 624T762 512Q915 431 915 285Q915 145 798 69T469 -8Q251 -8 123 57V205Q201 168 298 146T477 123Q611 123 681 161T752 270Q752 316 728 345T650 403T481 475Q339 527 272 572T172 674T139 809ZM285
-829Q285 752 351 700T584 586L633 567Q770 647 770 758Q770 841 697 897T438 1010Q370 991 328 941T285 829Z" />
-<glyph unicode="&#xa8;" glyph-name="dieresis" horiz-adv-x="1182" d="M309 1393Q309 1445 335 1468T399 1491Q437 1491 464 1468T492 1393Q492 1343 465 1319T399 1294Q362 1294 336 1318T309 1393ZM690 1393Q690 1445 716 1468T780 1491Q817 1491 844 1468T872
-1393Q872 1343 845 1319T780 1294Q743 1294 717 1318T690 1393Z" />
-<glyph unicode="&#xa9;" glyph-name="copyright" horiz-adv-x="1704" d="M893 1059Q768 1059 701 972T633 731Q633 563 696 482T891 401Q977 401 1102 446V322Q1054 302 1004 288T883 274Q689 274 585 394T481 731Q481 940 591 1063T893 1186Q1021 1186 1139 1126L1081
-1008Q973 1059 893 1059ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499
-731Q1499 905 1412 1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaa;" glyph-name="ordfeminine" horiz-adv-x="725" d="M532 801L508 885Q416 788 276 788Q181 788 126 837T70 989Q70 1091 147 1143T389 1202L506 1206V1245Q506 1378 358 1378Q258 1378 154 1327L111 1423Q225 1479 358 1479Q488 1479 556
-1427T625 1253V801H532ZM193 989Q193 889 305 889Q506 889 506 1069V1118L408 1114Q296 1110 245 1082T193 989Z" />
-<glyph unicode="&#xab;" glyph-name="guillemotleft" horiz-adv-x="1018" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551ZM477 551L821 958L938 889L651 539L938 188L821 117L477 524V551Z" />
-<glyph unicode="&#xac;" glyph-name="logicalnot" horiz-adv-x="1171" d="M1065 791V264H928V653H104V791H1065Z" />
-<glyph unicode="&#xad;" glyph-name="uni00AD" horiz-adv-x="659" d="M84 473V625H575V473H84Z" />
-<glyph unicode="&#xae;" glyph-name="registered" horiz-adv-x="1704" d="M723 762H831Q911 762 959 803T1008 909Q1008 984 965 1016T829 1049H723V762ZM1157 913Q1157 833 1115 772T995 680L1233 285H1065L858 639H723V285H575V1176H836Q1002 1176 1079 1111T1157
-913ZM100 731Q100 931 200 1106T475 1382T852 1483Q1052 1483 1227 1383T1503 1108T1604 731Q1604 534 1507 361T1235 84T852 -20Q645 -20 470 83T198 360T100 731ZM205 731Q205 558 292 408T529 171T852 84Q1026 84 1175 171T1411 406T1499 731Q1499 905 1412
-1054T1177 1290T852 1378Q678 1378 529 1291T293 1056T205 731Z" />
-<glyph unicode="&#xaf;" glyph-name="overscore" horiz-adv-x="1024" d="M1030 1556H-6V1683H1030V1556Z" />
-<glyph unicode="&#xb0;" glyph-name="degree" horiz-adv-x="877" d="M127 1171Q127 1301 217 1392T438 1483Q568 1483 659 1393T750 1171Q750 1087 709 1016T595 902T438 860Q308 860 218 950T127 1171ZM242 1171Q242 1089 300 1032T440 975Q520 975 577 1031T635
-1171Q635 1255 579 1311T440 1368Q357 1368 300 1311T242 1171Z" />
-<glyph unicode="&#xb1;" glyph-name="plusminus" horiz-adv-x="1171" d="M653 791H1065V653H653V227H514V653H104V791H514V1219H653V791ZM104 1V139H1065V1H104Z" />
-<glyph unicode="&#xb2;" glyph-name="twosuperior" horiz-adv-x="711" d="M653 586H49V690L285 920Q374 1006 415 1054T472 1141T489 1233Q489 1301 449 1335T346 1370Q294 1370 245 1351T127 1282L61 1370Q192 1481 344 1481Q476 1481 549 1416T623 1239Q623
-1159 579 1084T387 870L213 705H653V586Z" />
-<glyph unicode="&#xb3;" glyph-name="threesuperior" horiz-adv-x="711" d="M627 1255Q627 1175 586 1124T477 1049Q653 1002 653 840Q653 712 561 641T301 569Q149 569 33 625V748Q180 680 303 680Q514 680 514 842Q514 987 283 987H166V1094H285Q388 1094 437
-1133T487 1241Q487 1302 447 1336T340 1370Q274 1370 218 1349T106 1292L37 1382Q100 1427 170 1454T334 1481Q470 1481 548 1422T627 1255Z" />
-<glyph unicode="&#xb4;" glyph-name="acute" horiz-adv-x="1182" d="M393 1266Q441 1328 496 1416T584 1569H786V1548Q742 1483 655 1388T504 1241H393V1266Z" />
-<glyph unicode="&#xb5;" glyph-name="mu" horiz-adv-x="1268" d="M342 381Q342 119 596 119Q767 119 846 213T926 520V1096H1092V0H956L930 147H920Q809 -20 580 -20Q430 -20 342 72H332Q342 -12 342 -172V-492H176V1096H342V381Z" />
-<glyph unicode="&#xb6;" glyph-name="paragraph" horiz-adv-x="1341" d="M1120 -260H1006V1452H793V-260H678V559Q616 541 532 541Q316 541 215 666T113 1042Q113 1302 222 1429T563 1556H1120V-260Z" />
-<glyph unicode="&#xb7;" glyph-name="middot" horiz-adv-x="545" d="M152 723Q152 789 183 823T270 858Q328 858 360 824T393 723Q393 658 360 623T270 588Q219 588 186 619T152 723Z" />
-<glyph unicode="&#xb8;" glyph-name="cedilla" horiz-adv-x="465" d="M436 -289Q436 -386 360 -439T133 -492Q82 -492 37 -483V-377Q82 -385 141 -385Q220 -385 260 -365T301 -291Q301 -248 262 -222T113 -178L201 0H311L256 -115Q436 -154 436 -289Z" />
-<glyph unicode="&#xb9;" glyph-name="onesuperior" horiz-adv-x="711" d="M338 1462H481V586H348V1165Q348 1256 354 1346Q332 1324 305 1302T143 1184L76 1280L338 1462Z" />
-<glyph unicode="&#xba;" glyph-name="ordmasculine" horiz-adv-x="768" d="M702 1135Q702 971 617 880T381 788Q235 788 151 881T66 1135Q66 1298 150 1388T385 1479Q537 1479 619 1388T702 1135ZM188 1135Q188 1013 233 952T383 891Q488 891 534 952T580 1135Q580
-1258 534 1317T383 1376Q280 1376 234 1317T188 1135Z" />
-<glyph unicode="&#xbb;" glyph-name="guillemotright" horiz-adv-x="1018" d="M936 524L592 117L475 188L762 539L475 889L592 958L936 551V524ZM541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-<glyph unicode="&#xbc;" glyph-name="onequarter" horiz-adv-x="1597" d="M1298 1462L395 0H252L1155 1462H1298ZM593 1462H736V586H603V1165Q603 1256 609 1346Q587 1324 560 1302T398 1184L331 1280L593 1462ZM1489 203H1364V1H1219V203H817V304L1225 883H1364V320H1489V203ZM1219
-320V515Q1219 649 1225 724Q1220 712 1208 693T1181 651T1151 606T1125 566L957 320H1219Z" />
-<glyph unicode="&#xbd;" glyph-name="onehalf" horiz-adv-x="1597" d="M1230 1462L327 0H184L1087 1462H1230ZM564 1462H707V586H574V1165Q574 1256 580 1346Q558 1324 531 1302T369 1184L302 1280L564 1462ZM1499 1H895V105L1131 335Q1220 421 1261 469T1318
-556T1335 648Q1335 716 1295 750T1192 785Q1140 785 1091 766T973 697L907 785Q1038 896 1190 896Q1322 896 1395 831T1469 654Q1469 574 1425 499T1233 285L1059 120H1499V1Z" />
-<glyph unicode="&#xbe;" glyph-name="threequarters" horiz-adv-x="1597" d="M876 1255Q876 1175 835 1124T726 1049Q902 1002 902 840Q902 712 810 641T550 569Q398 569 282 625V748Q429 680 552 680Q763 680 763 842Q763 987 532 987H415V1094H534Q637 1094
-686 1133T736 1241Q736 1302 696 1336T589 1370Q523 1370 467 1349T355 1292L286 1382Q349 1427 419 1454T583 1481Q719 1481 797 1422T876 1255ZM1390 1462L487 0H344L1247 1462H1390ZM1569 203H1444V1H1299V203H897V304L1305 883H1444V320H1569V203ZM1299 320V515Q1299
-649 1305 724Q1300 712 1288 693T1261 651T1231 606T1205 566L1037 320H1299Z" />
-<glyph unicode="&#xbf;" glyph-name="questiondown" horiz-adv-x="879" d="M590 684V633Q590 511 553 437T418 279Q297 173 267 136T224 60T211 -35Q211 -135 277 -191T465 -248Q545 -248 620 -229T793 -162L852 -297Q655 -393 457 -393Q267 -393 159 -300T51
--37Q51 33 68 85T118 182T194 268T293 356Q394 444 426 502T459 653V684H590ZM639 983Q639 848 518 848Q459 848 428 882T397 983Q397 1047 430 1082T518 1118Q569 1118 604 1086T639 983Z" />
-<glyph unicode="&#xc0;" glyph-name="Agrave" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM724 1579H614Q549 1631 460 1727T331 1886V1907H534Q566 1838
-623 1748T724 1604V1579Z" />
-<glyph unicode="&#xc1;" glyph-name="Aacute" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM526 1604Q574 1666 629 1754T717 1907H919V1886Q875 1821 788
-1726T637 1579H526V1604Z" />
-<glyph unicode="&#xc2;" glyph-name="Acircumflex" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM303 1602Q430 1738 481 1802T555 1907H721Q743 1865 797
-1799T977 1602V1579H858Q770 1634 637 1765Q501 1631 418 1579H303V1602Z" />
-<glyph unicode="&#xc3;" glyph-name="Atilde" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM792 1581Q749 1581 708 1599T628 1640T552 1681T481 1700Q431
-1700 406 1670T366 1579H268Q281 1700 338 1768T487 1837Q533 1837 576 1819T658 1778T733 1737T801 1718Q850 1718 874 1747T913 1839H1012Q999 1718 943 1650T792 1581Z" />
-<glyph unicode="&#xc4;" glyph-name="Adieresis" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM364 1731Q364 1783 390 1806T454 1829Q492 1829 519 1806T547
-1731Q547 1681 520 1657T454 1632Q417 1632 391 1656T364 1731ZM745 1731Q745 1783 771 1806T835 1829Q872 1829 899 1806T927 1731Q927 1681 900 1657T835 1632Q798 1632 772 1656T745 1731Z" />
-<glyph unicode="&#xc5;" glyph-name="Aring" horiz-adv-x="1296" d="M1120 0L938 465H352L172 0H0L578 1468H721L1296 0H1120ZM885 618L715 1071Q682 1157 647 1282Q625 1186 584 1071L412 618H885ZM870 1587Q870 1489 809 1430T645 1370Q544 1370 484 1428T424
-1585Q424 1683 484 1740T645 1798Q746 1798 808 1739T870 1587ZM762 1585Q762 1641 729 1671T645 1702Q594 1702 561 1672T528 1585Q528 1529 558 1499T645 1468Q697 1468 729 1498T762 1585Z" />
-<glyph unicode="&#xc6;" glyph-name="AE" horiz-adv-x="1788" d="M1665 0H915V465H401L174 0H-2L696 1462H1665V1311H1085V840H1626V690H1085V152H1665V0ZM469 618H915V1311H797L469 618Z" />
-<glyph unicode="&#xc7;" glyph-name="Ccedilla" horiz-adv-x="1292" d="M827 1331Q586 1331 447 1171T307 731Q307 444 441 288T825 131Q978 131 1174 186V37Q1022 -20 799 -20Q476 -20 301 176T125 733Q125 959 209 1129T453 1391T829 1483Q1059 1483 1231 1399L1159
-1253Q993 1331 827 1331ZM950 -289Q950 -386 874 -439T647 -492Q596 -492 551 -483V-377Q596 -385 655 -385Q734 -385 774 -365T815 -291Q815 -248 776 -222T627 -178L715 0H825L770 -115Q950 -154 950 -289Z" />
-<glyph unicode="&#xc8;" glyph-name="Egrave" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM713 1579H603Q538 1631 449 1727T320 1886V1907H523Q555 1838 612 1748T713 1604V1579Z" />
-<glyph unicode="&#xc9;" glyph-name="Eacute" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM456 1604Q504 1666 559 1754T647 1907H849V1886Q805 1821 718 1726T567 1579H456V1604Z" />
-<glyph unicode="&#xca;" glyph-name="Ecircumflex" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM263 1602Q390 1738 441 1802T515 1907H681Q703 1865 757 1799T937 1602V1579H818Q730 1634 597 1765Q461 1631 378 1579H263V1602Z" />
-<glyph unicode="&#xcb;" glyph-name="Edieresis" horiz-adv-x="1139" d="M1016 0H201V1462H1016V1311H371V840H977V690H371V152H1016V0ZM327 1731Q327 1783 353 1806T417 1829Q455 1829 482 1806T510 1731Q510 1681 483 1657T417 1632Q380 1632 354 1656T327 1731ZM708
-1731Q708 1783 734 1806T798 1829Q835 1829 862 1806T890 1731Q890 1681 863 1657T798 1632Q761 1632 735 1656T708 1731Z" />
-<glyph unicode="&#xcc;" glyph-name="Igrave" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM398 1579H288Q223 1631 134 1727T5 1886V1907H208Q240 1838 297 1748T398 1604V1579Z" />
-<glyph unicode="&#xcd;" glyph-name="Iacute" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM179 1604Q227 1666 282 1754T370 1907H572V1886Q528 1821 441 1726T290 1579H179V1604Z" />
-<glyph unicode="&#xce;" glyph-name="Icircumflex" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM-57 1602Q70 1738 121 1802T195 1907H361Q383 1865 437 1799T617 1602V1579H498Q410 1634 277 1765Q141 1631 58 1579H-57V1602Z" />
-<glyph unicode="&#xcf;" glyph-name="Idieresis" horiz-adv-x="571" d="M201 0V1462H371V0H201ZM5 1731Q5 1783 31 1806T95 1829Q133 1829 160 1806T188 1731Q188 1681 161 1657T95 1632Q58 1632 32 1656T5 1731ZM386 1731Q386 1783 412 1806T476 1829Q513 1829
-540 1806T568 1731Q568 1681 541 1657T476 1632Q439 1632 413 1656T386 1731Z" />
-<glyph unicode="&#xd0;" glyph-name="Eth" horiz-adv-x="1479" d="M1352 745Q1352 383 1156 192T590 0H201V649H47V799H201V1462H635Q972 1462 1162 1275T1352 745ZM1171 739Q1171 1315 602 1315H371V799H750V649H371V147H561Q1171 147 1171 739Z" />
-<glyph unicode="&#xd1;" glyph-name="Ntilde" horiz-adv-x="1544" d="M1343 0H1149L350 1227H342Q358 1011 358 831V0H201V1462H393L1190 240H1198Q1196 267 1189 413T1184 623V1462H1343V0ZM935 1581Q892 1581 851 1599T771 1640T695 1681T624 1700Q574 1700
-549 1670T509 1579H411Q424 1700 481 1768T630 1837Q676 1837 719 1819T801 1778T876 1737T944 1718Q993 1718 1017 1747T1056 1839H1155Q1142 1718 1086 1650T935 1581Z" />
-<glyph unicode="&#xd2;" glyph-name="Ograve" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM907 1579H797Q732 1631 643 1727T514 1886V1907H717Q749 1838 806 1748T907 1604V1579Z" />
-<glyph unicode="&#xd3;" glyph-name="Oacute" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM659 1604Q707 1666 762 1754T850 1907H1052V1886Q1008 1821 921 1726T770 1579H659V1604Z" />
-<glyph unicode="&#xd4;" glyph-name="Ocircumflex" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM448 1602Q575 1738 626 1802T700 1907H866Q888 1865 942 1799T1122 1602V1579H1003Q915 1634 782 1765Q646 1631 563 1579H448V1602Z" />
-<glyph unicode="&#xd5;" glyph-name="Otilde" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290 733Q1290
-1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM942 1581Q899 1581 858 1599T778 1640T702 1681T631 1700Q581 1700 556 1670T516 1579H418Q431 1700 488 1768T637 1837Q683 1837 726 1819T808 1778T883 1737T951 1718Q1000 1718 1024 1747T1063 1839H1162Q1149
-1718 1093 1650T942 1581Z" />
-<glyph unicode="&#xd6;" glyph-name="Odieresis" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q476 -20 301 177T125 735Q125 1092 301 1288T801 1485Q1116 1485 1293 1285T1470 733ZM305 733Q305 436 431 283T799 129Q1042 129 1166 282T1290
-733Q1290 1028 1167 1180T801 1333Q558 1333 432 1180T305 733ZM522 1731Q522 1783 548 1806T612 1829Q650 1829 677 1806T705 1731Q705 1681 678 1657T612 1632Q575 1632 549 1656T522 1731ZM903 1731Q903 1783 929 1806T993 1829Q1030 1829 1057 1806T1085 1731Q1085
-1681 1058 1657T993 1632Q956 1632 930 1656T903 1731Z" />
-<glyph unicode="&#xd7;" glyph-name="multiply" horiz-adv-x="1171" d="M940 1176L1036 1077L684 723L1034 371L938 272L584 623L236 272L135 371L485 723L133 1075L233 1176L586 821L940 1176Z" />
-<glyph unicode="&#xd8;" glyph-name="Oslash" horiz-adv-x="1595" d="M1470 733Q1470 382 1293 181T799 -20Q564 -20 416 80L315 -61L195 18L303 172Q125 370 125 735Q125 1092 301 1288T801 1485Q1010 1485 1167 1391L1264 1526L1384 1446L1278 1298Q1470 1096
-1470 733ZM1290 733Q1290 1005 1180 1159L508 211Q623 129 799 129Q1042 129 1166 282T1290 733ZM305 733Q305 471 406 317L1075 1260Q969 1333 801 1333Q558 1333 432 1180T305 733Z" />
-<glyph unicode="&#xd9;" glyph-name="Ugrave" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM856 1579H746Q681 1631 592 1727T463 1886V1907H666Q698
-1838 755 1748T856 1604V1579Z" />
-<glyph unicode="&#xda;" glyph-name="Uacute" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM600 1604Q648 1666 703 1754T791 1907H993V1886Q949
-1821 862 1726T711 1579H600V1604Z" />
-<glyph unicode="&#xdb;" glyph-name="Ucircumflex" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM393 1602Q520 1738 571 1802T645
-1907H811Q833 1865 887 1799T1067 1602V1579H948Q860 1634 727 1765Q591 1631 508 1579H393V1602Z" />
-<glyph unicode="&#xdc;" glyph-name="Udieresis" horiz-adv-x="1491" d="M1305 1462V516Q1305 266 1154 123T739 -20Q475 -20 331 124T186 520V1462H356V508Q356 325 456 227T750 129Q935 129 1035 227T1135 510V1462H1305ZM461 1731Q461 1783 487 1806T551 1829Q589
-1829 616 1806T644 1731Q644 1681 617 1657T551 1632Q514 1632 488 1656T461 1731ZM842 1731Q842 1783 868 1806T932 1829Q969 1829 996 1806T1024 1731Q1024 1681 997 1657T932 1632Q895 1632 869 1656T842 1731Z" />
-<glyph unicode="&#xdd;" glyph-name="Yacute" horiz-adv-x="1147" d="M573 731L963 1462H1147L659 567V0H487V559L0 1462H186L573 731ZM442 1604Q490 1666 545 1754T633 1907H835V1886Q791 1821 704 1726T553 1579H442V1604Z" />
-<glyph unicode="&#xde;" glyph-name="Thorn" horiz-adv-x="1251" d="M1145 784Q1145 557 994 438T555 319H371V0H201V1462H371V1206H586Q867 1206 1006 1103T1145 784ZM371 465H539Q765 465 866 536T967 772Q967 921 872 990T575 1059H371V465Z" />
-<glyph unicode="&#xdf;" glyph-name="germandbls" horiz-adv-x="1274" d="M1049 1266Q1049 1131 906 1016Q818 946 790 913T762 846Q762 814 775 793T824 744T938 664Q1078 569 1129 491T1180 311Q1180 151 1083 66T807 -20Q619 -20 512 49V203Q575 164 653 141T803
-117Q1018 117 1018 299Q1018 374 977 427T825 551Q698 633 650 694T602 840Q602 903 636 956T742 1062Q817 1119 849 1164T881 1262Q881 1342 813 1384T618 1427Q342 1427 342 1204V0H176V1202Q176 1380 286 1473T618 1567Q824 1567 936 1489T1049 1266Z" />
-<glyph unicode="&#xe0;" glyph-name="agrave" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM928 1241H818Q753 1293 664 1389T535 1548V1569H738Q770 1500 827 1410T928 1266V1241Z" />
-<glyph unicode="&#xe1;" glyph-name="aacute" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM436 1266Q484 1328 539 1416T627 1569H829V1548Q785 1483 698 1388T547 1241H436V1266Z" />
-<glyph unicode="&#xe2;" glyph-name="acircumflex" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784
-1114 878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM484 1264Q611 1400 662 1464T736 1569H902Q924 1527 978 1461T1158 1264V1241H1039Q951 1296 818 1427Q682 1293 599 1241H484V1264Z"
-/>
-<glyph unicode="&#xe3;" glyph-name="atilde" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM977 1243Q934 1243 893 1261T813 1302T737 1343T666 1362Q616 1362 591 1332T551 1241H453Q466 1362 523 1430T672 1499Q718 1499 761
-1481T843 1440T918 1399T986 1380Q1035 1380 1059 1409T1098 1501H1197Q1184 1380 1128 1312T977 1243Z" />
-<glyph unicode="&#xe4;" glyph-name="adieresis" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114
-878 1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM535 1393Q535 1445 561 1468T625 1491Q663 1491 690 1468T718 1393Q718 1343 691 1319T625 1294Q588 1294 562 1318T535 1393ZM916 1393Q916
-1445 942 1468T1006 1491Q1043 1491 1070 1468T1098 1393Q1098 1343 1071 1319T1006 1294Q969 1294 943 1318T916 1393Z" />
-<glyph unicode="&#xe5;" glyph-name="aring" horiz-adv-x="1139" d="M850 0L817 156H809Q727 53 646 17T442 -20Q279 -20 187 64T94 303Q94 635 625 651L811 657V725Q811 854 756 915T578 977Q441 977 268 893L217 1020Q298 1064 394 1089T588 1114Q784 1114 878
-1027T973 748V0H850ZM475 117Q630 117 718 202T807 440V539L641 532Q443 525 356 471T268 301Q268 211 322 164T475 117ZM1060 1458Q1060 1360 999 1301T835 1241Q734 1241 674 1299T614 1456Q614 1554 674 1611T835 1669Q936 1669 998 1610T1060 1458ZM952 1456Q952
-1512 919 1542T835 1573Q784 1573 751 1543T718 1456Q718 1400 748 1370T835 1339Q887 1339 919 1369T952 1456Z" />
-<glyph unicode="&#xe6;" glyph-name="ae" horiz-adv-x="1757" d="M94 303Q94 464 218 553T596 651L780 657V725Q780 854 722 915T545 977Q401 977 238 893L186 1020Q260 1061 359 1087T557 1114Q687 1114 769 1071T893 932Q946 1020 1031 1068T1227 1116Q1419
-1116 1535 983T1651 627V520H950Q958 125 1272 125Q1363 125 1441 142T1604 199V51Q1518 13 1444 -3T1268 -20Q979 -20 854 213Q773 86 675 33T442 -20Q279 -20 187 65T94 303ZM268 301Q268 206 321 162T463 117Q608 117 692 201T776 440V539L618 532Q432 524 350
-470T268 301ZM1225 977Q1104 977 1035 894T954 653H1473Q1473 809 1409 893T1225 977Z" />
-<glyph unicode="&#xe7;" glyph-name="ccedilla" horiz-adv-x="975" d="M614 -20Q376 -20 246 126T115 541Q115 816 247 966T625 1116Q704 1116 783 1099T907 1059L856 918Q801 940 736 954T621 969Q287 969 287 543Q287 341 368 233T610 125Q747 125 891 184V37Q781
--20 614 -20ZM762 -289Q762 -386 686 -439T459 -492Q408 -492 363 -483V-377Q408 -385 467 -385Q546 -385 586 -365T627 -291Q627 -248 588 -222T439 -178L527 0H637L582 -115Q762 -154 762 -289Z" />
-<glyph unicode="&#xe8;" glyph-name="egrave" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM967 1241H857Q792 1293 703 1389T574 1548V1569H777Q809 1500 866 1410T967 1266V1241Z" />
-<glyph unicode="&#xe9;" glyph-name="eacute" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977 384
-891T291 653H864Q864 810 794 893T594 977ZM471 1266Q519 1328 574 1416T662 1569H864V1548Q820 1483 733 1388T582 1241H471V1266Z" />
-<glyph unicode="&#xea;" glyph-name="ecircumflex" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462
-977 384 891T291 653H864Q864 810 794 893T594 977ZM515 1264Q642 1400 693 1464T767 1569H933Q955 1527 1009 1461T1189 1264V1241H1070Q982 1296 849 1427Q713 1293 630 1241H515V1264Z" />
-<glyph unicode="&#xeb;" glyph-name="edieresis" horiz-adv-x="1149" d="M639 -20Q396 -20 256 128T115 539Q115 804 245 960T596 1116Q802 1116 922 981T1042 623V518H287Q292 325 384 225T645 125Q822 125 995 199V51Q907 13 829 -3T639 -20ZM594 977Q462 977
-384 891T291 653H864Q864 810 794 893T594 977ZM319 1393Q319 1445 345 1468T409 1491Q447 1491 474 1468T502 1393Q502 1343 475 1319T409 1294Q372 1294 346 1318T319 1393ZM700 1393Q700 1445 726 1468T790 1491Q827 1491 854 1468T882 1393Q882 1343 855 1319T790
-1294Q753 1294 727 1318T700 1393Z" />
-<glyph unicode="&#xec;" glyph-name="igrave" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM355 1241H245Q180 1293 91 1389T-38 1548V1569H165Q197 1500 254 1410T355 1266V1241Z" />
-<glyph unicode="&#xed;" glyph-name="iacute" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM169 1266Q217 1328 272 1416T360 1569H562V1548Q518 1483 431 1388T280 1241H169V1266Z" />
-<glyph unicode="&#xee;" glyph-name="icircumflex" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-77 1264Q50 1400 101 1464T175 1569H341Q363 1527 417 1461T597 1264V1241H478Q390 1296 257 1427Q121 1293 38 1241H-77V1264Z" />
-<glyph unicode="&#xef;" glyph-name="idieresis" horiz-adv-x="518" d="M342 0H176V1096H342V0ZM-20 1393Q-20 1445 6 1468T70 1491Q108 1491 135 1468T163 1393Q163 1343 136 1319T70 1294Q33 1294 7 1318T-20 1393ZM361 1393Q361 1445 387 1468T451 1491Q488
-1491 515 1468T543 1393Q543 1343 516 1319T451 1294Q414 1294 388 1318T361 1393Z" />
-<glyph unicode="&#xf0;" glyph-name="eth" horiz-adv-x="1221" d="M1122 563Q1122 282 992 131T614 -20Q392 -20 253 114T113 475Q113 705 244 836T596 967Q822 967 922 846L930 850Q873 1064 668 1255L397 1100L324 1208L557 1341Q465 1403 371 1452L440 1569Q596
-1496 698 1421L936 1559L1012 1452L805 1333Q957 1190 1039 991T1122 563ZM954 512Q954 659 864 744T618 829Q281 829 281 469Q281 302 368 211T618 119Q793 119 873 219T954 512Z" />
-<glyph unicode="&#xf1;" glyph-name="ntilde" horiz-adv-x="1257" d="M926 0V709Q926 843 865 909T674 975Q502 975 422 882T342 575V0H176V1096H311L338 946H346Q397 1027 489 1071T694 1116Q892 1116 992 1021T1092 715V0H926ZM802 1243Q759 1243 718 1261T638
-1302T562 1343T491 1362Q441 1362 416 1332T376 1241H278Q291 1362 348 1430T497 1499Q543 1499 586 1481T668 1440T743 1399T811 1380Q860 1380 884 1409T923 1501H1022Q1009 1380 953 1312T802 1243Z" />
-<glyph unicode="&#xf2;" glyph-name="ograve" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM998 1241H888Q823 1293 734 1389T605 1548V1569H808Q840 1500 897 1410T998 1266V1241Z" />
-<glyph unicode="&#xf3;" glyph-name="oacute" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM479 1266Q527 1328 582 1416T670 1569H872V1548Q828 1483 741 1388T590 1241H479V1266Z" />
-<glyph unicode="&#xf4;" glyph-name="ocircumflex" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950
-549Q950 758 866 866T616 975Q453 975 370 868T287 549ZM282 1264Q409 1400 460 1464T534 1569H700Q722 1527 776 1461T956 1264V1241H837Q749 1296 616 1427Q480 1293 397 1241H282V1264Z" />
-<glyph unicode="&#xf5;" glyph-name="otilde" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM1029 1243Q986 1243 945 1261T865 1302T789 1343T718 1362Q668 1362 643 1332T603 1241H505Q518 1362 575 1430T724 1499Q770 1499 813 1481T895 1440T970 1399T1038 1380Q1087 1380 1111 1409T1150 1501H1249Q1236
-1380 1180 1312T1029 1243Z" />
-<glyph unicode="&#xf6;" glyph-name="odieresis" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q467 -20 353 49T177 247T115 549Q115 817 249 966T621 1116Q851 1116 986 963T1122 549ZM287 549Q287 339 371 229T618 119Q781 119 865 228T950 549Q950
-758 866 866T616 975Q453 975 370 868T287 549ZM336 1393Q336 1445 362 1468T426 1491Q464 1491 491 1468T519 1393Q519 1343 492 1319T426 1294Q389 1294 363 1318T336 1393ZM717 1393Q717 1445 743 1468T807 1491Q844 1491 871 1468T899 1393Q899 1343 872 1319T807
-1294Q770 1294 744 1318T717 1393Z" />
-<glyph unicode="&#xf7;" glyph-name="divide" horiz-adv-x="1171" d="M104 653V791H1065V653H104ZM471 373Q471 433 500 463T584 494Q636 494 665 463T694 373Q694 316 665 284T584 252Q532 252 502 283T471 373ZM471 1071Q471 1131 500 1161T584 1192Q636 1192
-665 1161T694 1071Q694 1014 665 982T584 950Q532 950 502 981T471 1071Z" />
-<glyph unicode="&#xf8;" glyph-name="oslash" horiz-adv-x="1237" d="M1122 549Q1122 281 987 131T614 -20Q460 -20 348 49L264 -68L150 10L244 141Q115 293 115 549Q115 817 249 966T621 1116Q775 1116 891 1040L975 1159L1092 1083L995 950Q1122 798 1122 549ZM287
-549Q287 378 340 276L805 922Q730 975 616 975Q453 975 370 868T287 549ZM950 549Q950 713 899 813L434 170Q505 119 618 119Q781 119 865 228T950 549Z" />
-<glyph unicode="&#xf9;" glyph-name="ugrave" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM982 1241H872Q807 1293 718 1389T589
-1548V1569H792Q824 1500 881 1410T982 1266V1241Z" />
-<glyph unicode="&#xfa;" glyph-name="uacute" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM506 1266Q554 1328 609 1416T697
-1569H899V1548Q855 1483 768 1388T617 1241H506V1266Z" />
-<glyph unicode="&#xfb;" glyph-name="ucircumflex" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM286 1264Q413 1400 464 1464T538
-1569H704Q726 1527 780 1461T960 1264V1241H841Q753 1296 620 1427Q484 1293 401 1241H286V1264Z" />
-<glyph unicode="&#xfc;" glyph-name="udieresis" horiz-adv-x="1257" d="M332 1096V385Q332 251 393 185T584 119Q756 119 835 213T915 520V1096H1081V0H944L920 147H911Q860 66 770 23T563 -20Q363 -20 264 75T164 379V1096H332ZM342 1393Q342 1445 368 1468T432
-1491Q470 1491 497 1468T525 1393Q525 1343 498 1319T432 1294Q395 1294 369 1318T342 1393ZM723 1393Q723 1445 749 1468T813 1491Q850 1491 877 1468T905 1393Q905 1343 878 1319T813 1294Q776 1294 750 1318T723 1393Z" />
-<glyph unicode="&#xfd;" glyph-name="yacute" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM411
-1266Q459 1328 514 1416T602 1569H804V1548Q760 1483 673 1388T522 1241H411V1266Z" />
-<glyph unicode="&#xfe;" glyph-name="thorn" horiz-adv-x="1255" d="M344 948Q410 1037 495 1076T686 1116Q901 1116 1021 966T1141 549Q1141 281 1021 131T686 -20Q464 -20 342 141H330L334 107Q342 30 342 -33V-492H176V1556H342V1090Q342 1038 336 948H344ZM664
-975Q496 975 420 883T342 590V549Q342 318 419 219T666 119Q969 119 969 551Q969 766 895 870T664 975Z" />
-<glyph unicode="&#xff;" glyph-name="ydieresis" horiz-adv-x="1032" d="M2 1096H180L420 471Q499 257 518 162H526Q539 213 580 336T852 1096H1030L559 -152Q489 -337 396 -414T166 -492Q90 -492 16 -475V-342Q71 -354 139 -354Q310 -354 383 -162L444 -6L2 1096ZM490
-1393Q490 1445 516 1468T580 1491Q618 1491 645 1468T673 1393Q673 1343 646 1319T580 1294Q543 1294 517 1318T490 1393ZM871 1393Q871 1445 897 1468T961 1491Q998 1491 1025 1468T1053 1393Q1053 1343 1026 1319T961 1294Q924 1294 898 1318T871 1393Z" />
-<glyph unicode="&#x2013;" glyph-name="endash" horiz-adv-x="1024" d="M82 473V625H942V473H82Z" />
-<glyph unicode="&#x2014;" glyph-name="emdash" horiz-adv-x="2048" d="M82 473V625H1966V473H82Z" />
-<glyph unicode="&#x2018;" glyph-name="quoteleft" horiz-adv-x="348" d="M37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x2019;" glyph-name="quoteright" horiz-adv-x="348" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309Z" />
-<glyph unicode="&#x201a;" glyph-name="quotesinglbase" horiz-adv-x="502" d="M350 238L365 215Q339 115 290 -17T188 -264H63Q90 -160 122 -7T168 238H350Z" />
-<glyph unicode="&#x201c;" glyph-name="quotedblleft" horiz-adv-x="717" d="M406 961L391 983Q447 1198 569 1462H692Q662 1347 633 1203T590 961H406ZM37 961L25 983Q47 1073 96 1207T201 1462H324Q258 1208 221 961H37Z" />
-<glyph unicode="&#x201d;" glyph-name="quotedblright" horiz-adv-x="717" d="M309 1462L324 1440Q298 1340 249 1208T147 961H25Q95 1246 127 1462H309ZM678 1462L692 1440Q668 1349 620 1216T516 961H391Q417 1061 450 1215T496 1462H678Z" />
-<glyph unicode="&#x201e;" glyph-name="quotedblbase" horiz-adv-x="829" d="M309 238L324 216Q298 116 249 -16T147 -263H25Q95 22 127 238H309ZM678 238L692 216Q668 125 620 -8T516 -263H391Q417 -163 450 -9T496 238H678Z" />
-<glyph unicode="&#x2022;" glyph-name="bullet" horiz-adv-x="770" d="M164 748Q164 869 220 932T385 995Q490 995 548 933T606 748Q606 629 549 565T385 500Q278 500 221 565T164 748Z" />
-<glyph unicode="&#x2039;" glyph-name="guilsinglleft" horiz-adv-x="623" d="M82 551L424 958L543 889L254 539L543 188L424 117L82 524V551Z" />
-<glyph unicode="&#x203a;" glyph-name="guilsinglright" horiz-adv-x="623" d="M541 524L197 117L80 188L367 539L80 889L197 958L541 551V524Z" />
-</font>
-</defs>
-</svg>
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.ttf b/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.ttf
deleted file mode 100644
index 9d4e8e526d..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.ttf and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.woff b/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.woff
deleted file mode 100644
index e495e6f010..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.woff and /dev/null differ
diff --git a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.woff2 b/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.woff2
deleted file mode 100644
index c8050c25f8..0000000000
Binary files a/public/resources/themes/rhea/fonts/open-sans-v15-latin-regular.woff2 and /dev/null differ
diff --git a/public/resources/themes/rhea/theme.css b/public/resources/themes/rhea/theme.css
deleted file mode 100644
index 830866796a..0000000000
--- a/public/resources/themes/rhea/theme.css
+++ /dev/null
@@ -1,4210 +0,0 @@
-@charset "UTF-8";
-:root {
-  --primaryColor: #7B95A3;
-  --primaryTextColor: #ffffff;
-  --panelContentBorder: 1px solid #dadada;
-}
-
-/* open-sans-300 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 300;
-  src: url("http://github.com/fonts/open-sans-v15-latin-300.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Light"), local("OpenSans-Light"), url("http://github.com/fonts/open-sans-v15-latin-300.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-300.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-300.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-300.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-300.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-regular - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  src: url("http://github.com/fonts/open-sans-v15-latin-regular.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("http://github.com/fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-regular.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-/* open-sans-700 - latin */
-@font-face {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 700;
-  src: url("http://github.com/fonts/open-sans-v15-latin-700.eot");
-  /* IE9 Compat Modes */
-  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("http://github.com/fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("http://github.com/fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("http://github.com/fonts/open-sans-v15-latin-700.woff") format("woff"), url("http://github.com/fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("http://github.com/fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
-  /* Legacy iOS */
-}
-* {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-body .p-component {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  text-decoration: none;
-}
-body a {
-  color: #7B95A3;
-  text-decoration: none;
-}
-body a:hover {
-  color: #6c8999;
-}
-body a:active {
-  color: #617c8a;
-}
-body .p-disabled, body .p-component:disabled {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-body .pi {
-  font-size: 1.25em;
-}
-body .p-link {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-
-body {
-  /* Validations */
-}
-body .p-inputtext {
-  font-size: 14px;
-  color: #666666;
-  background: #f4f4f4;
-  padding: 0.429em;
-  border: 1px solid #dadada;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-inputtext:enabled:hover {
-  border-color: #a6a6a6;
-}
-body .p-inputtext:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-checkbox {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-checkbox .p-checkbox-box {
-  border: 1px solid #dadada;
-  background-color: #f4f4f4;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
-  border-color: #a6a6a6;
-}
-body .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #7B95A3;
-  background-color: #7B95A3;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
-  border-color: #617c8a;
-  background-color: #617c8a;
-  color: #ffffff;
-}
-body .p-checkbox .p-checkbox-box .p-checkbox-icon {
-  overflow: hidden;
-  position: relative;
-  font-size: 18px;
-}
-body .p-checkbox-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-radiobutton {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0;
-  width: 20px;
-  height: 20px;
-}
-body .p-radiobutton .p-radiobutton-box {
-  border: 1px solid #dadada;
-  background-color: #f4f4f4;
-  width: 20px;
-  height: 20px;
-  text-align: center;
-  position: relative;
-  -moz-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
-  border-color: #a6a6a6;
-}
-body .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight {
-  border-color: #7B95A3;
-  background-color: #7B95A3;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight .p-radiobutton-icon {
-  background-color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
-  border-color: #617c8a;
-  background-color: #617c8a;
-  color: #ffffff;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
-  background: transparent;
-  width: 10px;
-  height: 10px;
-  display: inline-block;
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -5px;
-  margin-top: -5px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-}
-body .p-radiobutton .p-radiobutton-box .p-radiobutton-icon:before {
-  display: none;
-}
-body .p-radiobutton-label {
-  margin: 0 0 0 0.5em;
-}
-body .p-inputswitch {
-  width: 3em;
-  height: 1.75em;
-}
-body .p-inputswitch .p-inputswitch-slider {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  border-radius: 30px;
-  background: #f4f4f4;
-}
-body .p-inputswitch .p-inputswitch-slider:before {
-  background-color: #7B95A3;
-  height: 1.25em;
-  width: 1.25em;
-  left: 0.25em;
-  bottom: 0.25em;
-  border-radius: 50%;
-  -webkit-transition: 0.2s;
-  transition: 0.2s;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider:before {
-  -webkit-transform: translateX(1.25em);
-  -ms-transform: translateX(1.25em);
-  transform: translateX(1.25em);
-}
-body .p-inputswitch.p-inputswitch-focus .p-inputswitch-slider {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #d8dae2;
-}
-body .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
-  background-color: #AFD3C8;
-}
-body .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
-  background-color: #AFD3C8;
-}
-body .p-autocomplete .p-autocomplete-input {
-  padding: 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container {
-  padding: 0.2145em 0.429em;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
-  border-color: #a6a6a6;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token {
-  margin: 0;
-  padding: 0.2145em 0;
-  color: #666666;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-}
-body .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container .p-autocomplete-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #AFD3C8;
-  color: #385048;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-autocomplete-panel {
-  padding: 0;
-  border: 1px solid #eaeaea;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-autocomplete-panel .p-autocomplete-items {
-  padding: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #666666;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item:hover {
-  color: #666666;
-  background-color: #f4f4f4;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-list-item.p-highlight {
-  color: #385048;
-  background-color: #AFD3C8;
-}
-body .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-group {
-  padding: 0.429em 0.857em;
-  background-color: #dadada;
-  color: #666666;
-}
-body .p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-  width: 2.357em;
-}
-body .p-fluid .p-autocomplete.p-autocomplete-multiple.p-autocomplete-dd .p-autocomplete-multiple-container {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-fluid .p-autocomplete.p-autocomplete-dd .p-inputtext {
-  border-right: 0 none;
-  width: calc(100% - 2.357em);
-}
-body .p-chips > ul.p-inputtext {
-  padding: 0.2145em 0.429em;
-  display: inline-block;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled):hover {
-  border-color: #a6a6a6;
-}
-body .p-chips > ul.p-inputtext:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token {
-  padding: 0.2145em 0;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input {
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  font-size: 14px;
-  padding: 0;
-  margin: 0;
-  color: #666666;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:hover {
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-input-token input:focus {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-  outline: 0 none;
-  border: 0 none;
-}
-body .p-chips > ul.p-inputtext .p-chips-token {
-  font-size: 14px;
-  padding: 0.2145em 0.429em;
-  margin: 0 0.286em 0 0;
-  background: #AFD3C8;
-  color: #385048;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-dropdown {
-  background: #f4f4f4;
-  border: 1px solid #dadada;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-dropdown:not(.p-disabled):hover {
-  border-color: #a6a6a6;
-}
-body .p-dropdown:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
-}
-body .p-dropdown .p-dropdown-label.p-placeholder {
-  color: #a6a6a6;
-}
-body .p-dropdown .p-dropdown-label:focus {
-  outline: 0 none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-body .p-dropdown .p-dropdown-trigger {
-  background-color: #f4f4f4;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #666666;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-dropdown .p-dropdown-clear-icon {
-  color: #666666;
-}
-body .p-dropdown-panel {
-  padding: 0;
-  border: 1px solid #eaeaea;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dropdown-panel .p-dropdown-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #dadada;
-  color: #666666;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  right: 1.357em;
-  color: #a6a6a6;
-}
-body .p-dropdown-panel .p-dropdown-items {
-  padding: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #666666;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group.p-highlight {
-  color: #385048;
-  background-color: #AFD3C8;
-}
-body .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover, body .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group:not(.p-highlight):not(.p-disabled):hover {
-  color: #666666;
-  background-color: #f4f4f4;
-}
-body .p-multiselect {
-  background: #f4f4f4;
-  border: 1px solid #dadada;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-multiselect:not(.p-disabled):hover {
-  border-color: #a6a6a6;
-}
-body .p-multiselect:not(.p-disabled).p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-multiselect .p-multiselect-label {
-  padding: 0.429em;
-  padding-right: 2em;
-  font-weight: 400;
-  color: #666666;
-}
-body .p-multiselect .p-multiselect-label.p-placeholder {
-  color: #a6a6a6;
-}
-body .p-multiselect .p-multiselect-trigger {
-  background-color: #f4f4f4;
-  width: 2em;
-  line-height: 2em;
-  text-align: center;
-  padding: 0;
-  color: #666666;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-multiselect-panel {
-  padding: 0;
-  border: 1px solid #eaeaea;
-  background-color: #ffffff;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-multiselect-panel .p-multiselect-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #dadada;
-  color: #666666;
-  background-color: #ffffff;
-  margin: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
-  float: none;
-  width: 70%;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: 0;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-  color: #a6a6a6;
-  top: 50%;
-  margin-top: -0.5em;
-  right: 0.5em;
-  left: auto;
-}
-body .p-multiselect-panel .p-multiselect-header .p-checkbox {
-  margin-right: 0.5em;
-  float: none;
-  vertical-align: middle;
-}
-body .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
-  color: #666666;
-  top: 50%;
-  margin-top: -0.5em;
-  line-height: 1;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-multiselect-panel .p-multiselect-items {
-  padding: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #666666;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #666666;
-  background-color: #f4f4f4;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #385048;
-  background-color: #AFD3C8;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-multiselect-panel .p-multiselect-items .p-multiselect-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox {
-  padding: 0;
-  min-width: 12em;
-  background: #ffffff;
-  border: 1px solid #dadada;
-}
-body .p-listbox .p-checkbox {
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-bottom: 1px solid #dadada;
-  color: #666666;
-  background-color: #ffffff;
-  margin: 0;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container input {
-  padding: 0.429em;
-  padding-right: 2em;
-}
-body .p-listbox .p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.5em;
-  color: #a6a6a6;
-}
-body .p-listbox .p-listbox-list {
-  background-color: #ffffff;
-}
-body .p-listbox .p-listbox-list .p-listbox-item {
-  margin: 0;
-  padding: 0.429em 0.857em;
-  border: 0 none;
-  color: #666666;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
-  color: #385048;
-  background-color: #AFD3C8;
-}
-body .p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-body .p-listbox .p-listbox-list .p-listbox-item .p-checkbox {
-  position: static;
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0 0.5em 0 0;
-}
-body .p-listbox .p-listbox-list .p-listbox-item label {
-  display: inline-block;
-  vertical-align: middle;
-}
-body .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #666666;
-  background-color: #f4f4f4;
-}
-body .p-listbox.p-disabled .p-checkbox-box:not(.p-disabled):not(.p-highlight):hover {
-  border: 1px solid #dadada;
-}
-body .p-listbox .p-listbox-list-wrapper {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-listbox .p-listbox-footer {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border-top: 1px solid #dadada;
-  color: #666666;
-  background-color: #ffffff;
-}
-body .p-editor-container .p-editor-toolbar {
-  border: 1px solid #7B95A3;
-  background-color: #7B95A3;
-}
-body .p-editor-container .p-editor-content {
-  border: 1px solid #dadada;
-}
-body .p-editor-container .p-editor-content .ql-editor {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-editor-container .ql-picker.ql-expanded .ql-picker-label {
-  color: #ffffff;
-}
-body .p-editor-container .ql-stroke {
-  stroke: #ffffff;
-}
-body .p-editor-container .ql-picker-label {
-  color: #ffffff;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover,
-body .p-editor-container .ql-snow .ql-toolbar button:hover,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
-  color: #AFD3C8;
-}
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
-body .p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
-body .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
-body .p-editor-container .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
-  stroke: #AFD3C8;
-}
-body .p-rating .p-rating-icon {
-  font-size: 1.429em;
-  text-align: center;
-  display: inline-block;
-  color: #666666;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-rating .p-rating-icon.p-rating-cancel {
-  color: #f3b9b9;
-}
-body .p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon:hover {
-  color: #7B95A3;
-}
-body .p-rating:not(.p-disabled):not(.p-rating-readonly) .p-rating-icon.p-rating-cancel:hover {
-  color: #d66161;
-}
-body .p-spinner .p-spinner-input {
-  padding-right: 1.858em;
-}
-body .p-spinner .p-spinner-button {
-  width: 1.429em;
-}
-body .p-spinner .p-spinner-button .p-spinner-button-icon {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-top: -0.5em;
-  margin-left: -0.5em;
-  width: 1em;
-}
-body .p-spinner .p-spinner-button.p-spinner-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-up {
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button.p-spinner-button-down {
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-spinner .p-spinner-button.p-spinner-button:focus {
-  z-index: 1;
-}
-body .p-fluid .p-spinner .p-spinner-input {
-  padding-right: 1.858em;
-}
-body .p-fluid .p-spinner .p-spinner-button {
-  width: 1.429em;
-}
-body .p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-  left: 50%;
-}
-body .p-slider {
-  background-color: #c4c4c4;
-  border: 0 none;
-}
-body .p-slider.p-slider-horizontal {
-  height: 0.286em;
-}
-body .p-slider.p-slider-horizontal .p-slider-handle {
-  top: 50%;
-  margin-top: -0.7145em;
-}
-body .p-slider.p-slider-vertical {
-  width: 0.286em;
-}
-body .p-slider.p-slider-vertical .p-slider-handle {
-  left: 50%;
-  margin-left: -0.7145em;
-}
-body .p-slider .p-slider-handle {
-  height: 1.429em;
-  width: 1.429em;
-  background-color: #ffffff;
-  border: 2px solid #7f7f7f;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-slider .p-slider-handle:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-slider .p-slider-range {
-  background-color: #7B95A3;
-}
-body .p-slider:not(.p-disabled) .p-slider-handle:hover {
-  background-color: 2px solid #7f7f7f;
-  border: 2px solid #7B95A3;
-}
-body .p-datepicker {
-  padding: 0.857em;
-  min-width: 18.571em;
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #dadada;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-datepicker:not(.p-datepicker-inline) {
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-prev:hover,
-body .p-datepicker:not(.p-disabled) .p-datepicker-header .p-datepicker-next:hover {
-  color: #666666;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled) {
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #f4f4f4;
-}
-body .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):hover {
-  background-color: #f4f4f4;
-}
-body .p-datepicker .p-datepicker-header {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  background-color: #ffffff;
-  color: #666666;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-prev,
-body .p-datepicker .p-datepicker-header .p-datepicker-next {
-  cursor: pointer;
-  top: 0;
-  color: #a6a6a6;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title {
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select {
-  margin-top: -0.35em;
-  margin-bottom: 0;
-  -moz-transition: border-color 0.2s, box-shadow 0.2s;
-  -o-transition: border-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: border-color 0.2s, box-shadow 0.2s;
-  transition: border-color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  border-color: #7B95A3;
-}
-body .p-datepicker table {
-  font-size: 14px;
-  margin: 0.857em 0 0 0;
-}
-body .p-datepicker table th {
-  padding: 0.5em;
-}
-body .p-datepicker table th.p-datepicker-weekheader {
-  border-right: 1px solid #dadada;
-}
-body .p-datepicker table td {
-  padding: 0.5em;
-}
-body .p-datepicker table td > span {
-  display: block;
-  text-align: center;
-  color: #666666;
-  cursor: pointer;
-  padding: 0.5em;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-datepicker table td > span.p-highlight {
-  color: #ffffff;
-  background-color: #7B95A3;
-}
-body .p-datepicker table td.p-datepicker-today > span {
-  background-color: #d0d0d0;
-  color: #666666;
-}
-body .p-datepicker table td.p-datepicker-today > span.p-highlight {
-  color: #ffffff;
-  background-color: #7B95A3;
-}
-body .p-datepicker table td.p-datepicker-weeknumber {
-  border-right: 1px solid #dadada;
-}
-body .p-datepicker .p-datepicker-buttonbar {
-  border-top: 1px solid #d8dae2;
-}
-body .p-datepicker .p-timepicker {
-  border: 0 none;
-  border-top: 1px solid #a6a6a6;
-  padding: 0.857em;
-}
-body .p-datepicker .p-timepicker button {
-  color: #a6a6a6;
-  font-size: 1.286em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datepicker .p-timepicker button:hover {
-  color: #666666;
-}
-body .p-datepicker .p-timepicker span {
-  font-size: 1.286em;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month {
-  color: #666666;
-}
-body .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
-  color: #ffffff;
-  background-color: #7B95A3;
-}
-body .p-datepicker.p-datepicker-timeonly {
-  padding: 0;
-}
-body .p-datepicker.p-datepicker-timeonly .p-timepicker {
-  border-top: 0 none;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
-  border-right: 1px solid #d8dae2;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
-}
-body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:hover:not(.p-error), body .p-calendar.p-calendar-w-btn .p-inputtext:enabled:focus:not(.p-error) {
-  border-right: 0 none;
-}
-body .p-calendar.p-calendar-w-btn .p-datepicker-trigger.p-button {
-  width: 2.357em;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-  width: calc(100% - 2.357em);
-}
-body .p-fileupload .p-fileupload-buttonbar {
-  background-color: #7B95A3;
-  padding: 0.571em 1em;
-  border: 1px solid #7B95A3;
-  color: #ffffff;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button {
-  margin-right: 8px;
-}
-body .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-fileupload .p-fileupload-content {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  color: #666666;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-fileupload .p-progressbar {
-  top: 0;
-}
-body .p-fileupload-choose:not(.p-disabled):hover {
-  background-color: #6c8999;
-  color: #ffffff;
-  border-color: #6c8999;
-}
-body .p-fileupload-choose:not(.p-disabled):active {
-  background-color: #617c8a;
-  color: #ffffff;
-  border-color: #617c8a;
-}
-body .p-password-panel {
-  padding: 12px;
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-inputgroup .p-inputgroup-addon {
-  border-color: #dadada;
-  background-color: #dbdbdb;
-  color: #666666;
-  padding: 0.429em;
-  min-width: 2em;
-}
-body .p-inputgroup .p-inputgroup-addon:first-child {
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-body .p-inputgroup .p-inputgroup-addon:last-child {
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-checkbox .p-checkbox {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton {
-  position: relative;
-}
-body .p-inputgroup .p-inputgroup-addon.p-inputgroup-addon-radiobutton .p-radiobutton {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  margin-left: -10px;
-  margin-top: -10px;
-}
-body .p-inputgroup .p-button:first-child {
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-body .p-inputgroup .p-button:last-child {
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-inputgroup .p-inputtext:focus {
-  z-index: 1;
-}
-body .p-fluid .p-inputgroup .p-button {
-  width: auto;
-}
-body .p-fluid .p-inputgroup .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body ::-webkit-input-placeholder {
-  color: #a6a6a6;
-}
-body :-moz-placeholder {
-  color: #a6a6a6;
-}
-body ::-moz-placeholder {
-  color: #a6a6a6;
-}
-body :-ms-input-placeholder {
-  color: #a6a6a6;
-}
-body .p-inputtext.p-error,
-body .p-dropdown.p-error,
-body .p-autocomplete.p-error > .p-inputtext,
-body .p-calendar.p-error > .p-inputtext,
-body .p-chips.p-error > .p-inputtext,
-body .p-checkbox.p-error > .p-checkbox-box,
-body .p-radiobutton.p-error > .p-radiobutton-box,
-body .p-inputswitch.p-error,
-body .p-listbox.p-error,
-body .p-multiselect.p-error,
-body .p-spinner.p-error > .p-inputtext,
-body .p-selectbutton.p-error > .p-button,
-body .p-togglebutton.p-error > .p-button {
-  border: 1px solid #e7a3a3;
-}
-
-body .p-button {
-  margin: 0;
-  color: #ffffff;
-  background-color: #7B95A3;
-  border: 1px solid #617c8a;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-button:enabled:hover {
-  background-color: #6c8999;
-  color: #ffffff;
-  border-color: #6c8999;
-}
-body .p-button:enabled:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-button:enabled:active {
-  background-color: #617c8a;
-  color: #ffffff;
-  border-color: #617c8a;
-}
-body .p-button.p-button-text-only .p-button-text {
-  padding: 0.429em 1em;
-}
-body .p-button.p-button-text-icon-left .p-button-text {
-  padding: 0.429em 1em 0.429em 2em;
-}
-body .p-button.p-button-text-icon-right .p-button-text {
-  padding: 0.429em 2em 0.429em 1em;
-}
-body .p-button.p-button-icon-only {
-  width: 2.357em;
-}
-body .p-button.p-button-icon-only .p-button-text {
-  padding: 0.429em;
-}
-body .p-button.p-button-raised {
-  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
-}
-body .p-button.p-button-rounded {
-  -moz-border-radius: 15px;
-  -webkit-border-radius: 15px;
-  border-radius: 15px;
-}
-body .p-fluid .p-button-icon-only {
-  width: 2.357em;
-}
-body .p-togglebutton {
-  background-color: #eaeaea;
-  border: 1px solid #eaeaea;
-  color: #333333;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-togglebutton .p-button-icon-left {
-  color: #666666;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-togglebutton:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #666666;
-}
-body .p-togglebutton.p-focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-togglebutton.p-highlight {
-  background-color: #AFD3C8;
-  border-color: #AFD3C8;
-  color: #385048;
-}
-body .p-togglebutton.p-highlight .p-button-icon-left {
-  color: #385048;
-}
-body .p-togglebutton.p-highlight:hover {
-  background-color: #8DC8B5;
-  border-color: #8DC8B5;
-  color: #385048;
-}
-body .p-togglebutton.p-highlight:hover .p-button-icon-left {
-  color: #385048;
-}
-body .p-selectbutton .p-button {
-  background-color: #eaeaea;
-  border: 1px solid #eaeaea;
-  color: #333333;
-  outline: 0 none;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-selectbutton .p-button .p-button-icon-left {
-  color: #666666;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #c8c8c8;
-  border-color: #c8c8c8;
-  color: #333333;
-}
-body .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover .p-button-icon-left {
-  color: #666666;
-}
-body .p-selectbutton .p-button.p-focus, body .p-selectbutton .p-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  z-index: 1;
-}
-body .p-selectbutton .p-button.p-highlight {
-  background-color: #AFD3C8;
-  border-color: #AFD3C8;
-  color: #385048;
-}
-body .p-selectbutton .p-button.p-highlight .p-button-icon-left {
-  color: #385048;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover {
-  background-color: #8DC8B5;
-  border-color: #8DC8B5;
-  color: #385048;
-}
-body .p-selectbutton .p-button.p-highlight:not(.p-disabled):hover .p-button-icon-left {
-  color: #385048;
-}
-body .p-selectbutton .p-button:first-child {
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-body .p-selectbutton .p-button:last-child {
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-splitbutton.p-buttonset .p-button {
-  border: 1px solid transparent;
-}
-body .p-splitbutton.p-buttonset .p-button:first-child {
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button.p-splitbutton-menubutton {
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-body .p-splitbutton.p-buttonset .p-button:focus {
-  z-index: 1;
-}
-body .p-splitbutton.p-buttonset .p-menu {
-  min-width: 100%;
-}
-body .p-splitbutton.p-buttonset .p-splitbutton-menubutton .p-button-icon-left:before {
-  content: "";
-}
-body .p-button.p-button-secondary, body .p-buttonset.p-button-secondary > .p-button {
-  color: #333333;
-  background-color: #f3f3f3;
-  border: 1px solid #f3f3f3;
-}
-body .p-button.p-button-secondary:enabled:hover, body .p-buttonset.p-button-secondary > .p-button:enabled:hover {
-  background-color: #d1d1d1;
-  color: #212121;
-  border-color: #d1d1d1;
-}
-body .p-button.p-button-secondary:enabled:focus, body .p-buttonset.p-button-secondary > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #99adb8;
-  -moz-box-shadow: 0 0 0 0.2em #99adb8;
-  box-shadow: 0 0 0 0.2em #99adb8;
-}
-body .p-button.p-button-secondary:enabled:active, body .p-buttonset.p-button-secondary > .p-button:enabled:active {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border-color: #7B95A3;
-}
-body .p-button.p-button-info, body .p-buttonset.p-button-info > .p-button {
-  color: #3D4447;
-  background-color: #A3DEF8;
-  border: 1px solid #79C8EB;
-}
-body .p-button.p-button-info:enabled:hover, body .p-buttonset.p-button-info > .p-button:enabled:hover {
-  background-color: #81CBEC;
-  color: #3D4447;
-  border-color: #60B7DE;
-}
-body .p-button.p-button-info:enabled:focus, body .p-buttonset.p-button-info > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #d2effc;
-  -moz-box-shadow: 0 0 0 0.2em #d2effc;
-  box-shadow: 0 0 0 0.2em #d2effc;
-}
-body .p-button.p-button-info:enabled:active, body .p-buttonset.p-button-info > .p-button:enabled:active {
-  background-color: #3ea9db;
-  color: #3D4447;
-  border-color: #2987B1;
-}
-body .p-button.p-button-success, body .p-buttonset.p-button-success > .p-button {
-  color: #323E39;
-  background-color: #A3E2C6;
-  border: 1px solid #80CAAA;
-}
-body .p-button.p-button-success:enabled:hover, body .p-buttonset.p-button-success > .p-button:enabled:hover {
-  background-color: #80CAAA;
-  color: #323E39;
-  border-color: #5EA285;
-}
-body .p-button.p-button-success:enabled:focus, body .p-buttonset.p-button-success > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #caeede;
-  -moz-box-shadow: 0 0 0 0.2em #caeede;
-  box-shadow: 0 0 0 0.2em #caeede;
-}
-body .p-button.p-button-success:enabled:active, body .p-buttonset.p-button-success > .p-button:enabled:active {
-  background-color: #31B57C;
-  color: #323E39;
-  border-color: #5EA285;
-}
-body .p-button.p-button-warning, body .p-buttonset.p-button-warning > .p-button {
-  color: #333333;
-  background-color: #FEEDBC;
-  border: 1px solid #F7DB8A;
-}
-body .p-button.p-button-warning:enabled:hover, body .p-buttonset.p-button-warning > .p-button:enabled:hover {
-  background-color: #FFDE87;
-  color: #333333;
-  border-color: #F3CE61;
-}
-body .p-button.p-button-warning:enabled:focus, body .p-buttonset.p-button-warning > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #fef4d5;
-  -moz-box-shadow: 0 0 0 0.2em #fef4d5;
-  box-shadow: 0 0 0 0.2em #fef4d5;
-}
-body .p-button.p-button-warning:enabled:active, body .p-buttonset.p-button-warning > .p-button:enabled:active {
-  background-color: #FDC328;
-  color: #333333;
-  border-color: #DEA818;
-}
-body .p-button.p-button-danger, body .p-buttonset.p-button-danger > .p-button {
-  color: #262222;
-  background-color: #F4B6B6;
-  border: 1px solid #E38787;
-}
-body .p-button.p-button-danger:enabled:hover, body .p-buttonset.p-button-danger > .p-button:enabled:hover {
-  background-color: #EF9999;
-  color: #262222;
-  border-color: #CB5858;
-}
-body .p-button.p-button-danger:enabled:focus, body .p-buttonset.p-button-danger > .p-button:enabled:focus {
-  -webkit-box-shadow: 0 0 0 0.2em #fbe2e2;
-  -moz-box-shadow: 0 0 0 0.2em #fbe2e2;
-  box-shadow: 0 0 0 0.2em #fbe2e2;
-}
-body .p-button.p-button-danger:enabled:active, body .p-buttonset.p-button-danger > .p-button:enabled:active {
-  background-color: #EB5656;
-  color: #262222;
-  border-color: #B73737;
-}
-
-body .p-panel {
-  padding: 0;
-  border: 0 none;
-}
-body .p-panel .p-panel-titlebar {
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  background-color: #7B95A3;
-  color: #ffffff;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panel .p-panel-titlebar .p-panel-title {
-  vertical-align: middle;
-  font-weight: 700;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon {
-  margin: 0.143em 0 0 0;
-  position: relative;
-  font-size: 14px;
-  color: #ffffff;
-  border: 1px solid transparent;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:hover {
-  color: #ffffff;
-}
-body .p-panel .p-panel-titlebar .p-panel-titlebar-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-panel .p-panel-content {
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-panel .p-panel-footer {
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  border-top: 0 none;
-  margin: 0;
-}
-body .p-fieldset {
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-fieldset .p-fieldset-legend a {
-  padding: 0.571em 1em;
-  border: 1px solid #7B95A3;
-  color: #ffffff;
-  background-color: #7B95A3;
-  font-weight: 700;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-toggler {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 0.5em;
-  color: #ffffff;
-}
-body .p-fieldset .p-fieldset-legend a .p-fieldset-legend-text {
-  padding: 0;
-}
-body .p-fieldset .p-fieldset-legend a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
-  background-color: #617c8a;
-  border: 1px solid #617c8a;
-  color: #ffffff;
-}
-body .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover .p-fieldset-toggler {
-  color: #ffffff;
-}
-body .p-fieldset .p-fieldset-content {
-  padding: 0;
-}
-body .p-accordion .p-accordion-tab {
-  margin-bottom: 2px;
-}
-body .p-accordion .p-accordion-header a {
-  padding: 0.571em 1em;
-  border: 1px solid #7B95A3;
-  color: #ffffff;
-  background-color: #7B95A3;
-  color: #ffffff;
-  font-weight: 700;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header a .p-accordion-toggle-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-accordion .p-accordion-header:not(.p-disabled) a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #617c8a;
-  border: 1px solid #617c8a;
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover a .p-accordion-toggle-icon {
-  color: #ffffff;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight {
-  margin-bottom: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a {
-  background-color: #AFD3C8;
-  border: 1px solid #dadada;
-  color: #385048;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight a .p-accordion-toggle-icon {
-  color: #385048;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a {
-  border: 1px solid #8DC8B5;
-  background-color: #8DC8B5;
-  color: #385048;
-}
-body .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover a .p-accordion-toggle-icon {
-  color: #385048;
-}
-body .p-accordion .p-accordion-content {
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-  border-top: 0;
-  -moz-border-radius-topleft: 0;
-  -webkit-border-top-left-radius: 0;
-  border-top-left-radius: 0;
-  -moz-border-radius-topright: 0;
-  -webkit-border-top-right-radius: 0;
-  border-top-right-radius: 0;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-tabview.p-tabview-top, body .p-tabview.p-tabview-bottom, body .p-tabview.p-tabview-left, body .p-tabview.p-tabview-right {
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav, body .p-tabview.p-tabview-bottom .p-tabview-nav, body .p-tabview.p-tabview-left .p-tabview-nav, body .p-tabview.p-tabview-right .p-tabview-nav {
-  padding: 0;
-  background: #ffffff;
-  border: 0 none;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a, body .p-tabview.p-tabview-bottom .p-tabview-nav li a, body .p-tabview.p-tabview-left .p-tabview-nav li a, body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  border: 1px solid #7B95A3;
-  background-color: #7B95A3;
-  float: none;
-  display: inline-block;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-left-icon {
-  margin-right: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li a .p-tabview-right-icon {
-  margin-left: 0.5em;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-bottom .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-left .p-tabview-nav li a:not(.p-disabled):focus, body .p-tabview.p-tabview-right .p-tabview-nav li a:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li .p-tabview-close {
-  color: #ffffff;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover a {
-  background-color: #617c8a;
-  border: 1px solid #617c8a;
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-close {
-  color: #ffffff;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight a {
-  background-color: #AFD3C8;
-  border: 1px solid #dadada;
-  color: #385048;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight .p-tabview-close, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight .p-tabview-close {
-  color: #385048;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a {
-  border: 1px solid #8DC8B5;
-  background-color: #8DC8B5;
-  color: #385048;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-top .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-left .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-left-icon, body .p-tabview.p-tabview-right .p-tabview-nav li.p-highlight:hover a .p-tabview-right-icon {
-  color: #385048;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-bottom .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-left .p-tabview-nav li.p-tabview-selected a, body .p-tabview.p-tabview-right .p-tabview-nav li.p-tabview-selected a {
-  cursor: pointer;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav {
-  margin-bottom: -1px;
-}
-body .p-tabview.p-tabview-top .p-tabview-nav li a {
-  margin-right: 0.214em;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav {
-  margin-top: -1px;
-}
-body .p-tabview.p-tabview-bottom .p-tabview-nav li a {
-  margin-right: 0.214em;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav {
-  margin-right: -px;
-}
-body .p-tabview.p-tabview-left .p-tabview-nav li a {
-  margin-bottom: 0.214em;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav {
-  margin-right: -1px;
-}
-body .p-tabview.p-tabview-right .p-tabview-nav li a {
-  margin-bottom: 0.214em;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-tabview .p-tabview-panels {
-  background-color: #ffffff;
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  color: #666666;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-tabview .p-tabview-panels .p-tabview-panel {
-  padding: 0;
-}
-body .p-toolbar {
-  background-color: #7B95A3;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-toolbar button {
-  vertical-align: middle;
-}
-body .p-toolbar .p-toolbar-separator {
-  vertical-align: middle;
-  color: #ffffff;
-  margin: 0 0.5em;
-}
-body .p-card {
-  background-color: #ffffff;
-  color: #666666;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-
-body .p-paginator {
-  background-color: #ffffff;
-  border: 1px solid #dadada;
-  padding: 0;
-}
-body .p-paginator .p-paginator-first,
-body .p-paginator .p-paginator-prev,
-body .p-paginator .p-paginator-next,
-body .p-paginator .p-paginator-last {
-  color: #666666;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
-body .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-paginator .p-dropdown {
-  border: 0 none;
-}
-body .p-paginator .p-dropdown .p-dropdown-trigger, body .p-paginator .p-dropdown .p-dropdown-label {
-  color: #666666;
-}
-body .p-paginator .p-dropdown:hover .p-dropdown-trigger, body .p-paginator .p-dropdown:hover .p-dropdown-label {
-  color: #666666;
-}
-body .p-paginator .p-paginator-first:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-prev:before {
-  position: relative;
-}
-body .p-paginator .p-paginator-next:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-last:before {
-  position: relative;
-  top: 1px;
-}
-body .p-paginator .p-paginator-current {
-  vertical-align: top;
-  display: inline-block;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-}
-body .p-paginator .p-paginator-pages {
-  vertical-align: top;
-  display: inline-block;
-  padding: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page {
-  color: #666666;
-  height: 2.286em;
-  min-width: 2.286em;
-  border: 0 none;
-  line-height: 2.286em;
-  padding: 0;
-  margin: 0;
-  vertical-align: top;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
-  height: 2.286em;
-  min-width: auto;
-}
-body .p-datatable .p-datatable-header,
-body .p-datatable .p-datatable-footer {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-datatable .p-datatable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-datatable .p-datatable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-datatable .p-datatable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #dadada;
-  font-weight: 700;
-  color: #666666;
-  background-color: #ffffff;
-  text-align: center;
-}
-body .p-datatable .p-datatable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #dadada;
-  font-weight: 700;
-  color: #666666;
-  background-color: #ffffff;
-  text-align: center;
-}
-body .p-datatable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-icon {
-  color: #666666;
-}
-body .p-datatable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #AFD3C8;
-  background-color: #385048;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #666666;
-}
-body .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #666666;
-}
-body .p-datatable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-body .p-datatable .p-sortable-column.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #385048;
-}
-body .p-datatable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-datatable .p-row-editor-init {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr {
-  background: #ffffff;
-  color: #666666;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #dadada;
-  padding: 0.571em 0.857em;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler {
-  color: #a6a6a6;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:hover {
-  color: #666666;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler {
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight .p-row-toggler:hover {
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
-  background-color: white;
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
-  box-shadow: inset 0 2px 0 0 #AFD3C8;
-}
-body .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
-  box-shadow: inset 0 -2px 0 0 #AFD3C8;
-}
-body .p-datatable .p-datatable-tbody > tr:focus {
-  outline: none;
-}
-body .p-datatable .p-datatable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec, 0 0.2em 0 0 #e4e9ec;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec, 0 0.2em 0 0 #e4e9ec, -0.1em -0.1em 0 0.1em #e4e9ec;
-}
-body .p-datatable .p-datatable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec, 0 0.2em 0 0 #e4e9ec, 0.1em -0.1em 0 0.1em #e4e9ec;
-}
-body .p-datatable .p-datatable-tbody > tr.p-rowgroup-header body .p-datatable .p-datatable-tbody > tr.p-rowgroup-footer {
-  font-weight: 700;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even) {
-  background-color: #f8f8f8;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler {
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler:hover {
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu {
-  background-color: white;
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler {
-  color: #385048;
-}
-body .p-datatable .p-datatable-tbody > tr:nth-child(even).p-highlight-contextmenu .p-row-toggler:hover {
-  color: #385048;
-}
-body .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-datatable .p-column-resizer-helper {
-  background-color: #7B95A3;
-}
-body .p-datatable .p-datatable-scrollable-header,
-body .p-datatable .p-datatable-scrollable-footer {
-  background-color: #7B95A3;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #dadada;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #dadada;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
-body .p-datagrid .p-datagrid-header {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datagrid .p-datagrid-content {
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-}
-body .p-datagrid .p-datagrid-footer {
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #dadada;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datalist .p-datalist-header {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datalist .p-datalist-content {
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-}
-body .p-datalist .p-datalist-footer {
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #dadada;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-datascroller .p-datascroller-header {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-}
-body .p-datascroller .p-datascroller-content {
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-}
-body .p-datascroller .p-datascroller-footer {
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #dadada;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-}
-body .p-dataview .p-dataview-header {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-dataview .p-dataview-content {
-  padding: 0.571em 1em;
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-}
-body .p-dataview .p-dataview-footer {
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #dadada;
-  padding: 0.571em 1em;
-  border-top: 0 none;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .fc th {
-  background-color: #7B95A3;
-  border: 1px solid #7B95A3;
-  color: #ffffff;
-  padding: 0.571em 1em;
-}
-body .fc td.ui-widget-content {
-  background-color: #ffffff;
-  border: 1px solid #dadada;
-  color: #666666;
-}
-body .fc td.fc-head-container {
-  border: 1px solid #7B95A3;
-}
-body .fc .fc-row {
-  border-right: 1px solid #7B95A3;
-}
-body .fc .fc-event {
-  background-color: #AFD3C8;
-  border: 1px solid #6c8999;
-  color: #385048;
-}
-body .fc .fc-toolbar .fc-button {
-  color: #ffffff;
-  background-color: #7B95A3;
-  border: 1px solid #617c8a;
-  font-size: 14px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .fc .fc-toolbar .fc-button:enabled:hover {
-  background-color: #6c8999;
-  color: #ffffff;
-  border-color: #6c8999;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-left:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right {
-  font-family: "PrimeIcons" !important;
-  text-indent: 0;
-}
-body .fc .fc-toolbar .fc-button .fc-icon-chevron-right:before {
-  content: "";
-}
-body .fc .fc-toolbar .fc-button:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button {
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:first-child {
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-}
-body .fc .fc-toolbar .fc-button-group .fc-button:last-child {
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .fc .fc-divider {
-  background-color: #7B95A3;
-  border: 1px solid #7B95A3;
-}
-body .p-fluid .fc .fc-toolbar .ui-button {
-  width: auto;
-}
-body .p-picklist .p-picklist-buttons button {
-  font-size: 16px;
-}
-body .p-picklist .p-picklist-caption {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-picklist .p-picklist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #7B95A3;
-  color: #666666;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-picklist .p-picklist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #a6a6a6;
-}
-body .p-picklist .p-picklist-buttons {
-  padding: 0.571em 1em;
-}
-body .p-picklist .p-picklist-list {
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-picklist .p-picklist-list .p-picklist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #666666;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-picklist .p-picklist-list .p-picklist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-body .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-picklist .p-picklist-list .p-picklist-droppoint-highlight {
-  background-color: #AFD3C8;
-}
-@media (max-width: 40em) {
-  body .p-picklist.p-picklist-responsive .p-picklist-buttons {
-    padding: 0.571em 1em;
-  }
-}
-body .p-orderlist .p-orderlist-controls {
-  padding: 0.571em 1em;
-}
-body .p-orderlist .p-orderlist-controls button {
-  font-size: 16px;
-}
-body .p-orderlist .p-orderlist-caption {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-orderlist .p-orderlist-filter-container {
-  padding: 0.429em 0.857em 0.429em 0.857em;
-  border: 1px solid #7B95A3;
-  color: #666666;
-  background-color: #ffffff;
-  margin: 0;
-  border-bottom: 0 none;
-}
-body .p-orderlist .p-orderlist-filter-container input {
-  width: 100%;
-  padding-right: 2em;
-  text-indent: 0;
-}
-body .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-  top: 50%;
-  margin-top: -0.5em;
-  left: auto;
-  right: 1.357em;
-  color: #a6a6a6;
-}
-body .p-orderlist .p-orderlist-list {
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item {
-  padding: 0.429em 0.857em;
-  margin: 0;
-  border: 0 none;
-  color: #666666;
-  background-color: transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-orderlist .p-orderlist-list .p-orderlist-droppoint-highlight {
-  background-color: #AFD3C8;
-}
-body .p-tree {
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-tree .p-tree-container {
-  padding: 0.286em;
-  margin: 0;
-}
-body .p-tree .p-tree-container .p-treenode {
-  padding: 0.143em 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content {
-  padding: 0;
-  border: 1px solid transparent;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
-  vertical-align: middle;
-  display: inline-block;
-  float: none;
-  margin: 0 0.143em 0 0;
-  color: #a6a6a6;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler .p-tree-toggler-icon {
-  line-height: 1.25em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
-  vertical-align: middle;
-  display: inline-block;
-  margin: 0 0.143em 0 0;
-  color: #a6a6a6;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-label {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-  padding: 0.286em;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
-  margin: 0 0.143em 0 0;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
-  color: #385048;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-checkbox .p-checkbox-box {
-  border-color: #385048;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight-contextmenu {
-  border: 1px dashed #AFD3C8;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover .p-treenode-icon {
-  color: #666666;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content > span {
-  line-height: inherit;
-}
-body .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-tree .p-tree-container .p-treenode-droppoint.p-treenode-droppoint-active {
-  background-color: #AFD3C8;
-}
-body .p-tree.p-tree-horizontal {
-  padding-left: 0;
-  padding-right: 0;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content {
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-checkbox .p-icon {
-  color: #7B95A3;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content .p-treenode-label:not(.p-highlight):not(.p-disabled):hover {
-  background-color: inherit;
-  color: inherit;
-}
-body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):not(.p-disabled):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter {
-  width: 100%;
-  padding-right: 2em;
-}
-body .p-tree .p-tree-filter-container .p-tree-filter-icon {
-  top: 50%;
-  left: auto;
-  margin-top: -0.5em;
-  right: 0.8em;
-  color: #a6a6a6;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
-  color: #5da68f;
-}
-body .p-organizationchart .p-organizationchart-line-down {
-  background-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-left {
-  border-right: 1px solid #dadada;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-line-top {
-  border-top: 1px solid #dadada;
-  border-color: #c8c8c8;
-}
-body .p-organizationchart .p-organizationchart-node-content {
-  border: 1px solid #dadada;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-  bottom: -0.7em;
-  margin-left: -0.46em;
-  color: #a6a6a6;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-treetable .p-treetable-header,
-body .p-treetable .p-treetable-footer {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-  text-align: center;
-}
-body .p-treetable .p-treetable-header {
-  border-bottom: 0 none;
-  font-weight: 700;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-treetable .p-treetable-footer {
-  border-top: 0 none;
-  font-weight: 700;
-  -moz-border-radius-bottomleft: 2px;
-  -webkit-border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 2px;
-  -moz-border-radius-bottomright: 2px;
-  -webkit-border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 2px;
-}
-body .p-treetable .p-treetable-thead > tr > th {
-  padding: 0.571em 0.857em;
-  border: 1px solid #dadada;
-  font-weight: 700;
-  color: #666666;
-  background-color: #ffffff;
-  text-align: center;
-}
-body .p-treetable .p-treetable-tfoot > tr > td {
-  padding: 0.571em 0.857em;
-  border: 1px solid #dadada;
-  font-weight: 700;
-  color: #666666;
-  background-color: #ffffff;
-  text-align: center;
-}
-body .p-treetable .p-sortable-column {
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-icon {
-  color: #666666;
-}
-body .p-treetable .p-sortable-column .p-sortable-column-badge {
-  border-radius: 50%;
-  height: 18px;
-  min-width: 18px;
-  line-height: 18px;
-  display: inline-block;
-  color: #AFD3C8;
-  background-color: #385048;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover {
-  background-color: #eaeaea;
-  color: #666666;
-}
-body .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
-  color: #666666;
-}
-body .p-treetable .p-sortable-column:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-body .p-treetable .p-sortable-column.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
-  color: #385048;
-}
-body .p-treetable .p-editable-column input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-}
-body .p-treetable .p-treetable-tbody > tr {
-  background: #ffffff;
-  color: #666666;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-treetable .p-treetable-tbody > tr > td {
-  background: inherit;
-  border: 1px solid #dadada;
-  padding: 0.571em 0.857em;
-}
-body .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
-  color: #a6a6a6;
-  vertical-align: middle;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight {
-  background-color: #AFD3C8;
-  color: #385048;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
-  color: #385048;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu {
-  background-color: white;
-  color: #385048;
-}
-body .p-treetable .p-treetable-tbody > tr.p-highlight-contextmenu .p-treetable-toggler {
-  color: #385048;
-}
-body .p-treetable .p-treetable-tbody > tr:focus {
-  outline: none;
-}
-body .p-treetable .p-treetable-tbody > tr:focus + tr > td {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec, 0 0.2em 0 0 #e4e9ec;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:first-child {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec, 0 0.2em 0 0 #e4e9ec, -0.1em -0.1em 0 0.1em #e4e9ec;
-}
-body .p-treetable .p-treetable-tbody > tr:focus > td:last-child {
-  box-shadow: 0 -0.2em 0 0 #e4e9ec, 0 0.2em 0 0 #e4e9ec, 0.1em -0.1em 0 0.1em #e4e9ec;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover {
-  cursor: pointer;
-  background-color: #eaeaea;
-  color: #333333;
-}
-body .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):not(.p-highlight-contextmenu):hover .p-treetable-toggler {
-  color: #333333;
-}
-body .p-treetable .p-column-resizer-helper {
-  background-color: #7B95A3;
-}
-body .p-treetable .p-treetable-scrollable-header,
-body .p-treetable .p-treetable-scrollable-footer {
-  background-color: #7B95A3;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev,
-body .p-carousel .p-carousel-content .p-carousel-next {
-  background-color: #7B95A3;
-  border: 1px solid #617c8a;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-carousel .p-carousel-content .p-carousel-prev:not(.p-disabled):hover,
-body .p-carousel .p-carousel-content .p-carousel-next:not(.p-disabled):hover {
-  background-color: #6c8999;
-  color: #ffffff;
-  border-color: #6c8999;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon {
-  width: 20px;
-  height: 6px;
-  background-color: #b2c1cd;
-  margin: 0 0.2em;
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item .p-carousel-dot-icon::before {
-  content: " ";
-}
-body .p-carousel .p-carousel-dots-container .p-carousel-dot-item.p-highlight .p-carousel-dot-icon {
-  background-color: #7B95A3;
-}
-
-body .p-messages {
-  margin: 1em 0;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-messages .p-messages-wrapper {
-  padding: 1em;
-}
-body .p-messages.p-messages-info {
-  background-color: #A3DEF8;
-  border: 1px solid #79C8EB;
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-info .p-messages-close {
-  background-color: #A3DEF8;
-  color: #212121;
-}
-body .p-messages.p-messages-success {
-  background-color: #A3E2C6;
-  border: 1px solid #A3E2C6;
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-success .p-messages-close {
-  background-color: #A3E2C6;
-  color: #212121;
-}
-body .p-messages.p-messages-warn {
-  background-color: #ffe277;
-  border: 1px solid #ffe277;
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-warn .p-messages-close {
-  background-color: #ffe277;
-  color: #212121;
-}
-body .p-messages.p-messages-error {
-  background-color: #ff8b8b;
-  border: 1px solid #ff8b8b;
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-icon {
-  color: #212121;
-}
-body .p-messages.p-messages-error .p-messages-close {
-  background-color: #ff8b8b;
-  color: #212121;
-}
-body .p-messages .p-messages-close {
-  top: -0.769em;
-  right: -0.769em;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-}
-body .p-messages .p-messages-close .p-messages-close-icon {
-  line-height: inherit;
-  font-size: 1.5em;
-}
-body .p-messages .p-messages-close:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-messages .p-messages-icon {
-  font-size: 2em;
-}
-body .p-message {
-  padding: 0.429em;
-  margin: 0;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-message.p-message-info {
-  background-color: #A3DEF8;
-  border: 1px solid #79C8EB;
-  color: #212121;
-}
-body .p-message.p-message-info .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-success {
-  background-color: #A3E2C6;
-  border: 1px solid #A3E2C6;
-  color: #212121;
-}
-body .p-message.p-message-success .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-warn {
-  background-color: #ffe277;
-  border: 1px solid #ffe277;
-  color: #212121;
-}
-body .p-message.p-message-warn .p-message-icon {
-  color: #212121;
-}
-body .p-message.p-message-error {
-  background-color: #ff8b8b;
-  border: 1px solid #ff8b8b;
-  color: #212121;
-}
-body .p-message.p-message-error .p-message-icon {
-  color: #212121;
-}
-body .p-message .p-message-icon {
-  font-size: 1.714em;
-}
-body .p-message .p-message-text {
-  font-size: 14px;
-}
-body .p-growl {
-  top: 120px;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-growl .p-growl-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-growl .p-growl-item-container .p-growl-item {
-  padding: 1em;
-}
-body .p-growl .p-growl-item-container .p-growl-item .p-growl-image {
-  font-size: 3.429em;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info {
-  background-color: #A3DEF8;
-  border: 1px solid #79C8EB;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-info .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success {
-  background-color: #A3E2C6;
-  border: 1px solid #A3E2C6;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-success .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn {
-  background-color: #ffe277;
-  border: 1px solid #ffe277;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-warn .p-growl-icon-close {
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error {
-  background-color: #ff8b8b;
-  border: 1px solid #ff8b8b;
-  color: #212121;
-}
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-image,
-body .p-growl .p-growl-item-container.p-growl-message-error .p-growl-icon-close {
-  color: #212121;
-}
-body .p-toast {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-body .p-toast .p-toast-item-container {
-  margin: 0 0 1em 0;
-  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-toast .p-toast-item-container .p-toast-item {
-  padding: 1em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-message {
-  margin: 0 0 0 4em;
-}
-body .p-toast .p-toast-item-container .p-toast-item .p-toast-image {
-  font-size: 3.429em;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info {
-  background-color: #A3DEF8;
-  border: 1px solid #79C8EB;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-info .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success {
-  background-color: #A3E2C6;
-  border: 1px solid #A3E2C6;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-success .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn {
-  background-color: #ffe277;
-  border: 1px solid #ffe277;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-warn .p-toast-icon-close {
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error {
-  background-color: #ff8b8b;
-  border: 1px solid #ff8b8b;
-  color: #212121;
-}
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-image,
-body .p-toast .p-toast-item-container.p-toast-message-error .p-toast-icon-close {
-  color: #212121;
-}
-
-body .p-component-overlay {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-body .p-overlaypanel {
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0;
-  border: 1px solid #f1f1f1;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-overlaypanel .p-overlaypanel-content {
-  padding: 1em;
-}
-body .p-overlaypanel .p-overlaypanel-close {
-  background-color: #7B95A3;
-  color: #ffffff;
-  width: 1.538em;
-  height: 1.538em;
-  line-height: 1.538em;
-  text-align: center;
-  position: absolute;
-  top: -0.769em;
-  right: -0.769em;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-overlaypanel .p-overlaypanel-close:hover {
-  background-color: #617c8a;
-  color: #ffffff;
-}
-body .p-overlaypanel .p-overlaypanel-close > span {
-  line-height: inherit;
-}
-body .p-overlaypanel:after {
-  border-color: rgba(255, 255, 255, 0);
-  border-bottom-color: #ffffff;
-}
-body .p-overlaypanel:before {
-  border-color: rgba(241, 241, 241, 0);
-  border-bottom-color: #f1f1f1;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:after {
-  border-top-color: #ffffff;
-}
-body .p-overlaypanel.p-overlaypanel-flipped:before {
-  border-top-color: #f1f1f1;
-}
-body .p-dialog {
-  padding: 0;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-dialog .p-dialog-titlebar {
-  border: 1px solid #7B95A3;
-  background-color: #7B95A3;
-  color: #ffffff;
-  padding: 1em;
-  font-weight: 700;
-  border-bottom: 0 none;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-title {
-  margin: 0;
-  float: none;
-  font-weight: 700;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon {
-  color: #ffffff;
-  border: 0 none;
-  padding: 0;
-  margin-left: 0.5em;
-  -moz-transition: color 0.2s, box-shadow 0.2s;
-  -o-transition: color 0.2s, box-shadow 0.2s;
-  -webkit-transition: color 0.2s, box-shadow 0.2s;
-  transition: color 0.2s, box-shadow 0.2s;
-}
-body .p-dialog .p-dialog-titlebar .p-dialog-titlebar-icon:hover {
-  color: #ffffff;
-}
-body .p-dialog .p-dialog-content {
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #f1f1f1;
-  padding: 1em;
-}
-body .p-dialog .p-dialog-footer {
-  border: 1px solid #dadada;
-  border-top: 0 none;
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-  margin: 0;
-  text-align: right;
-}
-body .p-dialog .p-dialog-footer button {
-  margin: 0 0.5em 0 0;
-  width: auto;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content {
-  padding: 1.5em;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span {
-  float: none;
-  display: inline-block;
-  vertical-align: middle;
-  line-height: 14px;
-  margin: 0;
-}
-body .p-dialog.p-confirm-dialog .p-dialog-content > span.p-icon {
-  margin-right: 0.35em;
-  font-size: 16px;
-}
-body .p-sidebar {
-  background-color: #ffffff;
-  color: #666666;
-  padding: 0.571em 1em;
-  border: 1px solid #f1f1f1;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-sidebar .p-sidebar-close {
-  color: #a6a6a6;
-  line-height: 1;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-sidebar .p-sidebar-close:hover {
-  color: #666666;
-}
-body .p-tooltip .p-tooltip-text {
-  background-color: #AFD3C8;
-  color: #385048;
-  padding: 0.429em;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-tooltip.p-tooltip-right .p-tooltip-arrow {
-  border-right-color: #AFD3C8;
-}
-body .p-tooltip.p-tooltip-left .p-tooltip-arrow {
-  border-left-color: #AFD3C8;
-}
-body .p-tooltip.p-tooltip-top .p-tooltip-arrow {
-  border-top-color: #AFD3C8;
-}
-body .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
-  border-bottom-color: #AFD3C8;
-}
-body .p-lightbox {
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-lightbox .p-lightbox-caption {
-  border: 1px solid #7B95A3;
-  background-color: #7B95A3;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  font-weight: 700;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-caption-text {
-  color: #ffffff;
-  margin: 0;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close {
-  padding: 0;
-  color: #ffffff;
-  -moz-transition: color 0.2s;
-  -o-transition: color 0.2s;
-  -webkit-transition: color 0.2s;
-  transition: color 0.2s;
-}
-body .p-lightbox .p-lightbox-caption .p-lightbox-close:hover {
-  color: #ffffff;
-}
-body .p-lightbox .p-lightbox-content-wrapper {
-  overflow: hidden;
-  background-color: #ffffff;
-  color: #666666;
-  border: 0 none;
-  padding: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right {
-  -moz-transition: all 0.2s;
-  -o-transition: all 0.2s;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  font-size: 3em;
-  color: #ffffff;
-  margin-top: -0.5em;
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-left:hover, body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-nav-right:hover {
-  -webkit-transform: scale(1.2);
-  -moz-transform: scale(1.2);
-  -o-transform: scale(1.2);
-  -ms-transform: scale(1.2);
-  transform: scale(1.2);
-}
-body .p-lightbox .p-lightbox-content-wrapper .p-lightbox-content.p-lightbox-loading ~ a {
-  display: none;
-}
-
-body .p-breadcrumb {
-  background-color: #ffffff;
-  border: 1px solid #dadada;
-  padding: 0.571em 1em;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-breadcrumb ul li .p-menuitem-link {
-  color: #666666;
-  margin: 0;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-breadcrumb ul li .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-breadcrumb ul li.p-breadcrumb-chevron {
-  margin: 0 0.5em 0 0.5em;
-  color: #a6a6a6;
-}
-body .p-breadcrumb ul li:first-child a {
-  color: #a6a6a6;
-  margin: 0;
-}
-body .p-breadcrumb ul li .p-menuitem-icon {
-  color: #a6a6a6;
-}
-body .p-steps {
-  position: relative;
-}
-body .p-steps .p-steps-item {
-  background-color: transparent;
-}
-body .p-steps .p-steps-item .p-menuitem-link {
-  background-color: transparent;
-  overflow: hidden;
-  -moz-transition: box-shadow 0.2s;
-  -o-transition: box-shadow 0.2s;
-  -webkit-transition: box-shadow 0.2s;
-  transition: box-shadow 0.2s;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  display: inline-block;
-  color: #a6a6a6;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  min-width: 28px;
-  height: 28px;
-  font-size: 16px;
-  line-height: 24px;
-  text-align: center;
-  position: relative;
-  z-index: 1;
-}
-body .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
-  display: block;
-  margin-top: 6px;
-  color: #a6a6a6;
-}
-body .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-number {
-  background: #AFD3C8;
-  color: #385048;
-}
-body .p-steps .p-steps-item.p-highlight .p-steps-title {
-  font-weight: 700;
-  color: #666666;
-}
-body .p-steps .p-steps-item:before {
-  content: " ";
-  border-top: 1px solid #dadada;
-  width: 100%;
-  top: 50%;
-  left: 0;
-  display: block;
-  position: absolute;
-  margin-top: -14px;
-}
-body .p-menu .p-menuitem-link,
-body .p-menubar .p-menuitem-link,
-body .p-tieredmenu .p-menuitem-link,
-body .p-contextmenu .p-menuitem-link,
-body .p-megamenu .p-menuitem-link,
-body .p-slidemenu .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #666666;
-  font-weight: normal;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0;
-  border-radius: 0;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-menu .p-menuitem-link .p-menuitem-text,
-body .p-menubar .p-menuitem-link .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link .p-menuitem-text,
-body .p-megamenu .p-menuitem-link .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link .p-menuitem-text {
-  color: #666666;
-}
-body .p-menu .p-menuitem-link .p-menuitem-icon,
-body .p-menubar .p-menuitem-link .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link .p-menuitem-icon {
-  color: #666666;
-  margin-right: 0.5em;
-}
-body .p-menu .p-menuitem-link:hover,
-body .p-menubar .p-menuitem-link:hover,
-body .p-tieredmenu .p-menuitem-link:hover,
-body .p-contextmenu .p-menuitem-link:hover,
-body .p-megamenu .p-menuitem-link:hover,
-body .p-slidemenu .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-text,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-text,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-text,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-text {
-  color: #666666;
-}
-body .p-menu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-menubar .p-menuitem-link:hover .p-menuitem-icon,
-body .p-tieredmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-contextmenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-megamenu .p-menuitem-link:hover .p-menuitem-icon,
-body .p-slidemenu .p-menuitem-link:hover .p-menuitem-icon {
-  color: #666666;
-}
-body .p-menu .p-menuitem-link:focus,
-body .p-menubar .p-menuitem-link:focus,
-body .p-tieredmenu .p-menuitem-link:focus,
-body .p-contextmenu .p-menuitem-link:focus,
-body .p-megamenu .p-menuitem-link:focus,
-body .p-slidemenu .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-body .p-menu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-menu .p-menuitem {
-  margin: 0;
-}
-body .p-menu.p-menu-overlay {
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menu .p-submenu-header {
-  margin: 0;
-  padding: 0.714em 0.857em;
-  color: #ffffff;
-  background-color: #7B95A3;
-  font-weight: 700;
-  border: 0 none;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-}
-body .p-menu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-  padding: 0.714em 0.857em;
-}
-body .p-menubar .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-menubar .p-submenu-list .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-submenu-list .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-menubar .p-menuitem {
-  margin: 0;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #666666;
-}
-body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-menubar .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #666666;
-}
-body .p-contextmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-contextmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-contextmenu .p-menuitem {
-  margin: 0;
-}
-body .p-contextmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #666666;
-}
-body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-contextmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #666666;
-}
-body .p-contextmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-tieredmenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tieredmenu .p-menuitem {
-  margin: 0;
-}
-body .p-tieredmenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #666666;
-}
-body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-tieredmenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #666666;
-}
-body .p-tieredmenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-tieredmenu.p-menu-overlay {
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-slidemenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-slidemenu .p-submenu-list {
-  padding: 0;
-  background-color: #ffffff;
-  border: 0 none;
-}
-body .p-slidemenu .p-menuitem {
-  margin: 0;
-}
-body .p-slidemenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #666666;
-}
-body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-slidemenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #666666;
-}
-body .p-slidemenu .p-slidemenu-backward {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #ffffff;
-  background-color: #7B95A3;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-slidemenu .p-slidemenu-backward:hover {
-  background-color: #617c8a;
-  color: #ffffff;
-}
-body .p-slidemenu .p-menu-separator {
-  border: 1px solid #c8c8c8;
-  border-width: 1px 0 0 0;
-}
-body .p-slidemenu.p-menu-overlay {
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-tabmenu {
-  border: 0 none;
-}
-body .p-tabmenu .p-tabmenu-nav {
-  padding: 0;
-  background: #ffffff;
-  border-bottom: 1px solid #7B95A3;
-}
-body .p-tabmenu .p-tabmenu-nav:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
-  margin-bottom: -1px;
-  border: 1px solid #7B95A3;
-  background-color: #7B95A3;
-  color: #ffffff;
-  padding: 0.571em 1em;
-  margin-right: 0.214em;
-  -moz-border-radius-topleft: 2px;
-  -webkit-border-top-left-radius: 2px;
-  border-top-left-radius: 2px;
-  -moz-border-radius-topright: 2px;
-  -webkit-border-top-right-radius: 2px;
-  border-top-right-radius: 2px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-  margin-right: 0.5em;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
-  background-color: #617c8a;
-  border: 1px solid #617c8a;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-text {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link .p-menuitem-icon {
-  color: #ffffff;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
-  background-color: #AFD3C8;
-  border: 1px solid #dadada;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-text {
-  color: #385048;
-}
-body .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link .p-menuitem-icon {
-  color: #385048;
-}
-body .p-megamenu {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-}
-body .p-megamenu .p-megamenu-submenu-header {
-  margin: 0;
-  padding: 0.571em 1em;
-  color: #ffffff;
-  background-color: #7B95A3;
-  font-weight: 700;
-  border: 0 none;
-}
-body .p-megamenu .p-megamenu-panel {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #eaeaea;
-  -webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  -moz-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
-}
-body .p-megamenu .p-menuitem {
-  margin: 0;
-}
-body .p-megamenu .p-menuitem .p-menuitem-link .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link {
-  background-color: #eaeaea;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-text {
-  color: #666666;
-}
-body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-menuitem-icon, body .p-megamenu .p-menuitem.p-menuitem-active > .p-menuitem-link .p-submenu-icon {
-  color: #666666;
-}
-body .p-megamenu.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-  right: 0.429em;
-}
-body .p-panelmenu .p-icon {
-  position: static;
-}
-body .p-panelmenu .p-panelmenu-panel .p-panelmenu-header {
-  margin-top: 2px;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-header {
-  padding: 0;
-}
-body .p-panelmenu .p-panelmenu-header > a {
-  border: 1px solid #7B95A3;
-  background-color: #7B95A3;
-  color: #ffffff;
-  padding: 0.714em 0.857em;
-  font-weight: 700;
-  position: static;
-  font-size: 14px;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-right:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a .p-panelmenu-icon.pi-caret-down:before {
-  content: "";
-}
-body .p-panelmenu .p-panelmenu-header > a:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-  z-index: 100;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover {
-  outline: 0 none;
-  border: 1px solid #617c8a;
-  background-color: #617c8a;
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header:not(.p-highlight) > a:hover .p-panelmenu-icon {
-  color: #ffffff;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight {
-  margin-bottom: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a {
-  border: 1px solid #dadada;
-  background-color: #AFD3C8;
-  color: #385048;
-  -moz-border-radius-bottomleft: 0;
-  -webkit-border-bottom-left-radius: 0;
-  border-bottom-left-radius: 0;
-  -moz-border-radius-bottomright: 0;
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a .p-panelmenu-icon {
-  color: #385048;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover {
-  outline: 0 none;
-  border: 1px solid #8DC8B5;
-  background-color: #8DC8B5;
-  color: #385048;
-}
-body .p-panelmenu .p-panelmenu-header.p-highlight > a:hover .p-panelmenu-icon {
-  color: #385048;
-}
-body .p-panelmenu .p-panelmenu-panel:first-child {
-  margin-top: 0;
-}
-body .p-panelmenu .p-panelmenu-content {
-  padding: 0;
-  background-color: #ffffff;
-  border: 1px solid #c8c8c8;
-  margin-top: 0;
-  position: static;
-  border-top: 0 none;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem {
-  margin: 0;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link {
-  padding: 0.714em 0.857em;
-  color: #666666;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover {
-  background-color: #eaeaea;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-icon, body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-panelmenu-icon {
-  color: #666666;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:hover .p-menuitem-text {
-  color: #666666;
-}
-body .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: inset 0 0 0 0.2em #e4e9ec;
-  box-shadow: inset 0 0 0 0.2em #e4e9ec;
-}
-
-body .p-progressbar {
-  border: 0 none;
-  height: 1.714em;
-  background-color: #efefef;
-}
-body .p-progressbar .p-progressbar-value {
-  border: 0 none;
-  margin: 0;
-  background: #7B95A3;
-}
-body .p-progressbar .p-progressbar-label {
-  margin-top: 0;
-  color: #666666;
-  line-height: 1.714em;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon {
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-close .p-galleria-close-icon:hover {
-  color: #7B95A3;
-}
-body .p-galleria .p-galleria-header,
-body .p-galleria .p-galleria-footer {
-  background-color: #7B95A3;
-  color: #ffffff;
-  border: 1px solid #7B95A3;
-  padding: 0.571em 1em;
-}
-body .p-galleria .p-galleria-header + .p-galleria-content,
-body .p-galleria .p-galleria-footer + .p-galleria-content {
-  border: 1px solid #7B95A3;
-  border-top: 0 none;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-nav-button:not(.p-disabled):hover {
-  color: #7B95A3;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-preview-container .p-galleria-preview-caption {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  color: #ffffff;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  border-radius: 3px;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item > button {
-  display: inline-flex;
-  align-items: center;
-  height: 1.5em;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #b2c1cd;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi:before {
-  content: "";
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #7B95A3;
-}
-body .p-galleria .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: #7B95A3;
-  border: 1px solid #617c8a;
-  -moz-border-radius: 50%;
-  -webkit-border-radius: 50%;
-  border-radius: 50%;
-  margin: 0.2em;
-  color: #ffffff;
-  -moz-transition: background-color 0.2s, box-shadow 0.2s;
-  -o-transition: background-color 0.2s, box-shadow 0.2s;
-  -webkit-transition: background-color 0.2s, box-shadow 0.2s;
-  transition: background-color 0.2s, box-shadow 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: #6c8999;
-  color: #ffffff;
-  border-color: #6c8999;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-  opacity: 0.4;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item:hover {
-  opacity: 1;
-  -moz-transition: opacity 0.2s;
-  -o-transition: opacity 0.2s;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item.p-galleria-thumbnail-item-current {
-  opacity: 1;
-}
-body .p-galleria .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-items-content .p-galleria-thumbnail-items-container .p-galleria-thumbnail-item .p-galleria-thumbnail-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-galleria.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item .p-galleria-indicator-icon.pi {
-  color: #ffffff;
-}
-body .p-galleria.p-galleria-indicator-onpreview .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item.p-highlight .p-galleria-indicator-icon.pi {
-  color: #7B95A3;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  bottom: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-top: 0;
-  padding-bottom: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  top: 0;
-  height: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-bottom: 0;
-  padding-top: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-start;
-  left: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-right: 0;
-  padding-left: 1em;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container {
-  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 70%);
-  display: flex;
-  align-items: flex-end;
-  right: 0;
-  width: 30%;
-}
-body .p-galleria.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-content .p-galleria-preview-content .p-galleria-indicator-container .p-galleria-indicator-item {
-  padding-left: 0;
-  padding-right: 1em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
-  background-color: transparent;
-  border: 0 none;
-  color: #ffffff;
-  font-size: 1.2em;
-}
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:not(.p-disabled):hover,
-body .p-galleria.p-galleria-fullscreen .p-galleria-content .p-galleria-thumbnail-content .p-galleria-thumbnail-container .p-galleria-thumbnail-next:not(.p-disabled):hover {
-  background-color: transparent;
-  color: #7B95A3;
-  border-color: 0 none;
-}
-body .p-galleria-mask {
-  background-color: black;
-}
-body .p-terminal {
-  background-color: #ffffff;
-  color: #666666;
-  border: 1px solid #dadada;
-  padding: 0.571em 1em;
-}
-body .p-terminal .p-terminal-input {
-  font-size: 14px;
-  font-family: "Open Sans", "Helvetica Neue", sans-serif;
-  height: 16px;
-}
-body .p-terminal .p-terminal-command {
-  height: 16px;
-}
-body .p-inplace {
-  min-height: 2.357em;
-}
-body .p-inplace .p-inplace-display {
-  padding: 0.429em;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: background-color 0.2s;
-  -o-transition: background-color 0.2s;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-body .p-inplace .p-inplace-display:not(.p-disabled):hover {
-  background-color: #f4f4f4;
-  color: #666666;
-}
-body .p-inplace .p-inplace-display:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  -webkit-box-shadow: 0 0 0 0.2em #e4e9ec;
-  -moz-box-shadow: 0 0 0 0.2em #e4e9ec;
-  box-shadow: 0 0 0 0.2em #e4e9ec;
-}
-body .p-fluid .p-inplace.p-inplace-closable .p-inplace-content > :first-child {
-  display: inline-block;
-  width: calc(100% - 2.357em);
-}
-
-/* Add your customizations of theme here */
diff --git a/public/scripts/prism/prism.js b/public/scripts/prism/prism.js
new file mode 100644
index 0000000000..31bc3c7c64
--- /dev/null
+++ b/public/scripts/prism/prism.js
@@ -0,0 +1,17 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+json+json5+markup-templating+php+jsx+tsx+scss+typescript&plugins=toolbar+copy-to-clipboard */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function e(n,t){var r,i;switch(t=t||{},a.util.type(n)){case"Object":if(i=a.util.objId(n),t[i])return t[i];for(var l in r={},t[i]=r,n)n.hasOwnProperty(l)&&(r[l]=e(n[l],t));return r;case"Array":return i=a.util.objId(n),t[i]?t[i]:(r=[],t[i]=r,n.forEach((function(n,a){r[a]=e(n,t)})),r);default:return n}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(r.stack)||[])[1];if(e){var n=document.getElementsByTagName("script");for(var t in n)if(n[t].src==e)return n[t]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:r,plaintext:r,text:r,txt:r,extend:function(e,n){var t=a.util.clone(a.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(e,n,t,r){var i=(r=r||a.languages)[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in t)t.hasOwnProperty(s)&&(l[s]=t[s]);t.hasOwnProperty(o)||(l[o]=i[o])}var u=r[e];return r[e]=l,a.languages.DFS(a.languages,(function(n,t){t===u&&n!=e&&(this[n]=l)})),l},DFS:function e(n,t,r,i){i=i||{};var l=a.util.objId;for(var o in n)if(n.hasOwnProperty(o)){t.call(n,o,n[o],r||o);var s=n[o],u=a.util.type(s);"Object"!==u||i[l(s)]?"Array"!==u||i[l(s)]||(i[l(s)]=!0,e(s,t,o,i)):(i[l(s)]=!0,e(s,t,null,i))}}},plugins:{},highlightAll:function(e,n){a.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};a.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),a.hooks.run("before-all-elements-highlight",r);for(var i,l=0;i=r.elements[l++];)a.highlightElement(i,!0===n,r.callback)},highlightElement:function(n,t,r){var i=a.util.getLanguage(n),l=a.languages[i];a.util.setLanguage(n,i);var o=n.parentElement;o&&"pre"===o.nodeName.toLowerCase()&&a.util.setLanguage(o,i);var s={element:n,language:i,grammar:l,code:n.textContent};function u(e){s.highlightedCode=e,a.hooks.run("before-insert",s),s.element.innerHTML=s.highlightedCode,a.hooks.run("after-highlight",s),a.hooks.run("complete",s),r&&r.call(s.element)}if(a.hooks.run("before-sanity-check",s),(o=s.element.parentElement)&&"pre"===o.nodeName.toLowerCase()&&!o.hasAttribute("tabindex")&&o.setAttribute("tabindex","0"),!s.code)return a.hooks.run("complete",s),void(r&&r.call(s.element));if(a.hooks.run("before-highlight",s),s.grammar)if(t&&e.Worker){var c=new Worker(a.filename);c.onmessage=function(e){u(e.data)},c.postMessage(JSON.stringify({language:s.language,code:s.code,immediateClose:!0}))}else u(a.highlight(s.code,s.grammar,s.language));else u(a.util.encode(s.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};if(a.hooks.run("before-tokenize",r),!r.grammar)throw new Error('The language "'+r.language+'" has no grammar.');return r.tokens=a.tokenize(r.code,r.grammar),a.hooks.run("after-tokenize",r),i.stringify(a.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new s;return u(a,a.head,e),o(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=a.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=a.hooks.all[e];if(t&&t.length)for(var r,i=0;r=t[i++];)r(n)}},Token:i};function i(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function l(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function o(e,n,t,r,s,g){for(var f in t)if(t.hasOwnProperty(f)&&t[f]){var h=t[f];h=Array.isArray(h)?h:[h];for(var d=0;d<h.length;++d){if(g&&g.cause==f+","+d)return;var v=h[d],p=v.inside,m=!!v.lookbehind,y=!!v.greedy,k=v.alias;if(y&&!v.pattern.global){var x=v.pattern.toString().match(/[imsuy]*$/)[0];v.pattern=RegExp(v.pattern.source,x+"g")}for(var b=v.pattern||v,w=r.next,A=s;w!==n.tail&&!(g&&A>=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j<O||"string"==typeof C.value);C=C.next)L++,j+=C.value.length;L--,E=e.slice(A,j),P.index-=A}else if(!(P=l(b,0,E,m)))continue;S=P.index;var N=P[0],_=E.slice(0,S),M=E.slice(S+N.length),W=A+E.length;g&&W>g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;n.next=r,r.prev=n,e.length-=a}if(e.Prism=a,i.stringify=function e(n,t){if("string"==typeof n)return n;if(Array.isArray(n)){var r="";return n.forEach((function(n){r+=e(n,t)})),r}var i={type:n.type,content:e(n.content,t),tag:"span",classes:["token",n.type],attributes:{},language:t},l=n.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(i.classes,l):i.classes.push(l)),a.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=" "+s+'="'+(i.attributes[s]||"").replace(/"/g,"&quot;")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+o+">"+i.content+"</"+i.tag+">"},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
+Prism.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},Prism.languages.webmanifest=Prism.languages.json;
+!function(n){var e=/("|')(?:\\(?:\r\n?|\n|.)|(?!\1)[^\\\r\n])*\1/;n.languages.json5=n.languages.extend("json",{property:[{pattern:RegExp(e.source+"(?=\\s*:)"),greedy:!0},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/,alias:"unquoted"}],string:{pattern:e,greedy:!0},number:/[+-]?\b(?:NaN|Infinity|0x[a-fA-F\d]+)\b|[+-]?(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[eE][+-]?\d+\b)?/})}(Prism);
+!function(e){function n(e,n){return"___"+e.toUpperCase()+n+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(t,a,r,o){if(t.language===a){var c=t.tokenStack=[];t.code=t.code.replace(r,(function(e){if("function"==typeof o&&!o(e))return e;for(var r,i=c.length;-1!==t.code.indexOf(r=n(a,i));)++i;return c[i]=e,r})),t.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(t,a){if(t.language===a&&t.tokenStack){t.grammar=e.languages[a];var r=0,o=Object.keys(t.tokenStack);!function c(i){for(var u=0;u<i.length&&!(r>=o.length);u++){var g=i[u];if("string"==typeof g||g.content&&"string"==typeof g.content){var l=o[r],s=t.tokenStack[l],f="string"==typeof g?g:g.content,p=n(a,l),k=f.indexOf(p);if(k>-1){++r;var m=f.substring(0,k),d=new e.Token(a,e.tokenize(s,t.grammar),"language-"+a,s),h=f.substring(k+p.length),v=[];m&&v.push.apply(v,c([m])),v.push(d),h&&v.push.apply(v,c([h])),"string"==typeof g?i.splice.apply(i,[u,1].concat(v)):g.content=v}}else g.content&&c(g.content)}return i}(t.tokens)}}}})}(Prism);
+!function(e){var a=/\/\*[\s\S]*?\*\/|\/\/.*|#(?!\[).*/,t=[{pattern:/\b(?:false|true)\b/i,alias:"boolean"},{pattern:/(::\s*)\b[a-z_]\w*\b(?!\s*\()/i,greedy:!0,lookbehind:!0},{pattern:/(\b(?:case|const)\s+)\b[a-z_]\w*(?=\s*[;=])/i,greedy:!0,lookbehind:!0},/\b(?:null)\b/i,/\b[A-Z_][A-Z0-9_]*\b(?!\s*\()/],i=/\b0b[01]+(?:_[01]+)*\b|\b0o[0-7]+(?:_[0-7]+)*\b|\b0x[\da-f]+(?:_[\da-f]+)*\b|(?:\b\d+(?:_\d+)*\.?(?:\d+(?:_\d+)*)?|\B\.\d+)(?:e[+-]?\d+)?/i,n=/<?=>|\?\?=?|\.{3}|\??->|[!=]=?=?|::|\*\*=?|--|\+\+|&&|\|\||<<|>>|[?~]|[/^|%*&<>.+-]=?/,s=/[{}\[\](),:;]/;e.languages.php={delimiter:{pattern:/\?>$|^<\?(?:php(?=\s)|=)?/i,alias:"important"},comment:a,variable:/\$+(?:\w+\b|(?=\{))/,package:{pattern:/(namespace\s+|use\s+(?:function\s+)?)(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,lookbehind:!0,inside:{punctuation:/\\/}},"class-name-definition":{pattern:/(\b(?:class|enum|interface|trait)\s+)\b[a-z_]\w*(?!\\)\b/i,lookbehind:!0,alias:"class-name"},"function-definition":{pattern:/(\bfunction\s+)[a-z_]\w*(?=\s*\()/i,lookbehind:!0,alias:"function"},keyword:[{pattern:/(\(\s*)\b(?:array|bool|boolean|float|int|integer|object|string)\b(?=\s*\))/i,alias:"type-casting",greedy:!0,lookbehind:!0},{pattern:/([(,?]\s*)\b(?:array(?!\s*\()|bool|callable|(?:false|null)(?=\s*\|)|float|int|iterable|mixed|object|self|static|string)\b(?=\s*\$)/i,alias:"type-hint",greedy:!0,lookbehind:!0},{pattern:/(\)\s*:\s*(?:\?\s*)?)\b(?:array(?!\s*\()|bool|callable|(?:false|null)(?=\s*\|)|float|int|iterable|mixed|never|object|self|static|string|void)\b/i,alias:"return-type",greedy:!0,lookbehind:!0},{pattern:/\b(?:array(?!\s*\()|bool|float|int|iterable|mixed|object|string|void)\b/i,alias:"type-declaration",greedy:!0},{pattern:/(\|\s*)(?:false|null)\b|\b(?:false|null)(?=\s*\|)/i,alias:"type-declaration",greedy:!0,lookbehind:!0},{pattern:/\b(?:parent|self|static)(?=\s*::)/i,alias:"static-context",greedy:!0},{pattern:/(\byield\s+)from\b/i,lookbehind:!0},/\bclass\b/i,{pattern:/((?:^|[^\s>:]|(?:^|[^-])>|(?:^|[^:]):)\s*)\b(?:abstract|and|array|as|break|callable|case|catch|clone|const|continue|declare|default|die|do|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|enum|eval|exit|extends|final|finally|fn|for|foreach|function|global|goto|if|implements|include|include_once|instanceof|insteadof|interface|isset|list|match|namespace|never|new|or|parent|print|private|protected|public|readonly|require|require_once|return|self|static|switch|throw|trait|try|unset|use|var|while|xor|yield|__halt_compiler)\b/i,lookbehind:!0}],"argument-name":{pattern:/([(,]\s*)\b[a-z_]\w*(?=\s*:(?!:))/i,lookbehind:!0},"class-name":[{pattern:/(\b(?:extends|implements|instanceof|new(?!\s+self|\s+static))\s+|\bcatch\s*\()\b[a-z_]\w*(?!\\)\b/i,greedy:!0,lookbehind:!0},{pattern:/(\|\s*)\b[a-z_]\w*(?!\\)\b/i,greedy:!0,lookbehind:!0},{pattern:/\b[a-z_]\w*(?!\\)\b(?=\s*\|)/i,greedy:!0},{pattern:/(\|\s*)(?:\\?\b[a-z_]\w*)+\b/i,alias:"class-name-fully-qualified",greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/(?:\\?\b[a-z_]\w*)+\b(?=\s*\|)/i,alias:"class-name-fully-qualified",greedy:!0,inside:{punctuation:/\\/}},{pattern:/(\b(?:extends|implements|instanceof|new(?!\s+self\b|\s+static\b))\s+|\bcatch\s*\()(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,alias:"class-name-fully-qualified",greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/\b[a-z_]\w*(?=\s*\$)/i,alias:"type-declaration",greedy:!0},{pattern:/(?:\\?\b[a-z_]\w*)+(?=\s*\$)/i,alias:["class-name-fully-qualified","type-declaration"],greedy:!0,inside:{punctuation:/\\/}},{pattern:/\b[a-z_]\w*(?=\s*::)/i,alias:"static-context",greedy:!0},{pattern:/(?:\\?\b[a-z_]\w*)+(?=\s*::)/i,alias:["class-name-fully-qualified","static-context"],greedy:!0,inside:{punctuation:/\\/}},{pattern:/([(,?]\s*)[a-z_]\w*(?=\s*\$)/i,alias:"type-hint",greedy:!0,lookbehind:!0},{pattern:/([(,?]\s*)(?:\\?\b[a-z_]\w*)+(?=\s*\$)/i,alias:["class-name-fully-qualified","type-hint"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}},{pattern:/(\)\s*:\s*(?:\?\s*)?)\b[a-z_]\w*(?!\\)\b/i,alias:"return-type",greedy:!0,lookbehind:!0},{pattern:/(\)\s*:\s*(?:\?\s*)?)(?:\\?\b[a-z_]\w*)+\b(?!\\)/i,alias:["class-name-fully-qualified","return-type"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}}],constant:t,function:{pattern:/(^|[^\\\w])\\?[a-z_](?:[\w\\]*\w)?(?=\s*\()/i,lookbehind:!0,inside:{punctuation:/\\/}},property:{pattern:/(->\s*)\w+/,lookbehind:!0},number:i,operator:n,punctuation:s};var l={pattern:/\{\$(?:\{(?:\{[^{}]+\}|[^{}]+)\}|[^{}])+\}|(^|[^\\{])\$+(?:\w+(?:\[[^\r\n\[\]]+\]|->\w+)?)/,lookbehind:!0,inside:e.languages.php},r=[{pattern:/<<<'([^']+)'[\r\n](?:.*[\r\n])*?\1;/,alias:"nowdoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<<'[^']+'|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<'?|[';]$/}}}},{pattern:/<<<(?:"([^"]+)"[\r\n](?:.*[\r\n])*?\1;|([a-z_]\w*)[\r\n](?:.*[\r\n])*?\2;)/i,alias:"heredoc-string",greedy:!0,inside:{delimiter:{pattern:/^<<<(?:"[^"]+"|[a-z_]\w*)|[a-z_]\w*;$/i,alias:"symbol",inside:{punctuation:/^<<<"?|[";]$/}},interpolation:l}},{pattern:/`(?:\\[\s\S]|[^\\`])*`/,alias:"backtick-quoted-string",greedy:!0},{pattern:/'(?:\\[\s\S]|[^\\'])*'/,alias:"single-quoted-string",greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,alias:"double-quoted-string",greedy:!0,inside:{interpolation:l}}];e.languages.insertBefore("php","variable",{string:r,attribute:{pattern:/#\[(?:[^"'\/#]|\/(?![*/])|\/\/.*$|#(?!\[).*$|\/\*(?:[^*]|\*(?!\/))*\*\/|"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*')+\](?=\s*[a-z$#])/im,greedy:!0,inside:{"attribute-content":{pattern:/^(#\[)[\s\S]+(?=\]$)/,lookbehind:!0,inside:{comment:a,string:r,"attribute-class-name":[{pattern:/([^:]|^)\b[a-z_]\w*(?!\\)\b/i,alias:"class-name",greedy:!0,lookbehind:!0},{pattern:/([^:]|^)(?:\\?\b[a-z_]\w*)+/i,alias:["class-name","class-name-fully-qualified"],greedy:!0,lookbehind:!0,inside:{punctuation:/\\/}}],constant:t,number:i,operator:n,punctuation:s}},delimiter:{pattern:/^#\[|\]$/,alias:"punctuation"}}}}),e.hooks.add("before-tokenize",(function(a){/<\?/.test(a.code)&&e.languages["markup-templating"].buildPlaceholders(a,"php",/<\?(?:[^"'/#]|\/(?![*/])|("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|(?:\/\/|#(?!\[))(?:[^?\n\r]|\?(?!>))*(?=$|\?>|[\r\n])|#\[|\/\*(?:[^*]|\*(?!\/))*(?:\*\/|$))*?(?:\?>|$)/g)})),e.hooks.add("after-tokenize",(function(a){e.languages["markup-templating"].tokenizePlaceholders(a,"php")}))}(Prism);
+!function(t){var n=t.util.clone(t.languages.javascript),e="(?:\\{<S>*\\.{3}(?:[^{}]|<BRACES>)*\\})";function a(t,n){return t=t.replace(/<S>/g,(function(){return"(?:\\s|//.*(?!.)|/\\*(?:[^*]|\\*(?!/))\\*/)"})).replace(/<BRACES>/g,(function(){return"(?:\\{(?:\\{(?:\\{[^{}]*\\}|[^{}])*\\}|[^{}])*\\})"})).replace(/<SPREAD>/g,(function(){return e})),RegExp(t,n)}e=a(e).source,t.languages.jsx=t.languages.extend("markup",n),t.languages.jsx.tag.pattern=a("</?(?:[\\w.:-]+(?:<S>+(?:[\\w.:$-]+(?:=(?:\"(?:\\\\[^]|[^\\\\\"])*\"|'(?:\\\\[^]|[^\\\\'])*'|[^\\s{'\"/>=]+|<BRACES>))?|<SPREAD>))*<S>*/?)?>"),t.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,t.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,t.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,t.languages.jsx.tag.inside.comment=n.comment,t.languages.insertBefore("inside","attr-name",{spread:{pattern:a("<SPREAD>"),inside:t.languages.jsx}},t.languages.jsx.tag),t.languages.insertBefore("inside","special-attr",{script:{pattern:a("=<BRACES>"),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:t.languages.jsx}}},t.languages.jsx.tag);var s=function(t){return t?"string"==typeof t?t:"string"==typeof t.content?t.content:t.content.map(s).join(""):""},g=function(n){for(var e=[],a=0;a<n.length;a++){var o=n[a],i=!1;if("string"!=typeof o&&("tag"===o.type&&o.content[0]&&"tag"===o.content[0].type?"</"===o.content[0].content[0].content?e.length>0&&e[e.length-1].tagName===s(o.content[0].content[1])&&e.pop():"/>"===o.content[o.content.length-1].content||e.push({tagName:s(o.content[0].content[1]),openedBraces:0}):e.length>0&&"punctuation"===o.type&&"{"===o.content?e[e.length-1].openedBraces++:e.length>0&&e[e.length-1].openedBraces>0&&"punctuation"===o.type&&"}"===o.content?e[e.length-1].openedBraces--:i=!0),(i||"string"==typeof o)&&e.length>0&&0===e[e.length-1].openedBraces){var r=s(o);a<n.length-1&&("string"==typeof n[a+1]||"plain-text"===n[a+1].type)&&(r+=s(n[a+1]),n.splice(a+1,1)),a>0&&("string"==typeof n[a-1]||"plain-text"===n[a-1].type)&&(r=s(n[a-1])+r,n.splice(a-1,1),a--),n[a]=new t.Token("plain-text",r,null,r)}o.content&&"string"!=typeof o.content&&g(o.content)}};t.hooks.add("after-tokenize",(function(t){"jsx"!==t.language&&"tsx"!==t.language||g(t.tokens)}))}(Prism);
+!function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var s=e.languages.extend("typescript",{});delete s["class-name"],e.languages.typescript["class-name"].inside=s,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:s}}}}),e.languages.ts=e.languages.typescript}(Prism);
+!function(e){var a=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",a),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var t=e.languages.tsx.tag;t.pattern=RegExp("(^|[^\\w$]|(?=</))(?:"+t.pattern.source+")",t.pattern.flags),t.lookbehind=!0}(Prism);
+Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(http://github.com/?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),Prism.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),Prism.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),Prism.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),Prism.languages.scss.atrule.inside.rest=Prism.languages.scss;
+!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var e=[],t={},n=function(){};Prism.plugins.toolbar={};var a=Prism.plugins.toolbar.registerButton=function(n,a){var r;r="function"==typeof a?a:function(e){var t;return"function"==typeof a.onClick?((t=document.createElement("button")).type="button",t.addEventListener("click",(function(){a.onClick.call(this,e)}))):"string"==typeof a.url?(t=document.createElement("a")).href=a.url:t=document.createElement("span"),a.className&&t.classList.add(a.className),t.textContent=a.text,t},n in t?console.warn('There is a button with the key "'+n+'" registered already.'):e.push(t[n]=r)},r=Prism.plugins.toolbar.hook=function(a){var r=a.element.parentNode;if(r&&/pre/i.test(r.nodeName)&&!r.parentNode.classList.contains("code-toolbar")){var o=document.createElement("div");o.classList.add("code-toolbar"),r.parentNode.insertBefore(o,r),o.appendChild(r);var i=document.createElement("div");i.classList.add("toolbar");var l=e,d=function(e){for(;e;){var t=e.getAttribute("data-toolbar-order");if(null!=t)return(t=t.trim()).length?t.split(/\s*,\s*/g):[];e=e.parentElement}}(a.element);d&&(l=d.map((function(e){return t[e]||n}))),l.forEach((function(e){var t=e(a);if(t){var n=document.createElement("div");n.classList.add("toolbar-item"),n.appendChild(t),i.appendChild(n)}})),o.appendChild(i)}};a("label",(function(e){var t=e.element.parentNode;if(t&&/pre/i.test(t.nodeName)&&t.hasAttribute("data-label")){var n,a,r=t.getAttribute("data-label");try{a=document.querySelector("template#"+r)}catch(e){}return a?n=a.content:(t.hasAttribute("data-url")?(n=document.createElement("a")).href=t.getAttribute("data-url"):n=document.createElement("span"),n.textContent=r),n}})),Prism.hooks.add("complete",r)}}();
+!function(){function t(t){var e=document.createElement("textarea");e.value=t.getText(),e.style.top="0",e.style.left="0",e.style.position="fixed",document.body.appendChild(e),e.focus(),e.select();try{var o=document.execCommand("copy");setTimeout((function(){o?t.success():t.error()}),1)}catch(e){setTimeout((function(){t.error(e)}),1)}document.body.removeChild(e)}"undefined"!=typeof Prism&&"undefined"!=typeof document&&(Prism.plugins.toolbar?Prism.plugins.toolbar.registerButton("copy-to-clipboard",(function(e){var o=e.element,n=function(t){var e={copy:"Copy","copy-error":"Press Ctrl+C to copy","copy-success":"Copied!","copy-timeout":5e3};for(var o in e){for(var n="data-prismjs-"+o,c=t;c&&!c.hasAttribute(n);)c=c.parentElement;c&&(e[o]=c.getAttribute(n))}return e}(o),c=document.createElement("button");c.className="copy-to-clipboard-button",c.setAttribute("type","button");var r=document.createElement("span");return c.appendChild(r),u("copy"),function(e,o){e.addEventListener("click",(function(){!function(e){navigator.clipboard?navigator.clipboard.writeText(e.getText()).then(e.success,(function(){t(e)})):t(e)}(o)}))}(c,{getText:function(){return o.textContent},success:function(){u("copy-success"),i()},error:function(){u("copy-error"),setTimeout((function(){!function(t){window.getSelection().selectAllChildren(t)}(o)}),1),i()}}),c;function i(){setTimeout((function(){u("copy")}),n["copy-timeout"])}function u(t){r.textContent=n[t],c.setAttribute("data-copy-state",t)}})):console.warn("Copy to Clipboard plugin loaded before Toolbar plugin."))}();
diff --git a/public/showcase/resources/changelog/changelog.json b/public/showcase/resources/changelog/changelog.json
deleted file mode 100644
index 22915536ee..0000000000
--- a/public/showcase/resources/changelog/changelog.json
+++ /dev/null
@@ -1,3001 +0,0 @@
-{
-    "4.2.0": {
-        "inputnumber": [
-            {
-                "number": 1311,
-                "title": "New Component: InputNumber",
-                "url": "https://github.com/primefaces/primereact/issues/1311"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 1336,
-                "title": "Add filterLocale property to MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1336"
-            },
-            {
-                "number": 1332,
-                "title": "Add checkValidity method to MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1332"
-            },
-            {
-                "number": 1319,
-                "title": "Refactor MultiSelect outside click detection",
-                "url": "https://github.com/primefaces/primereact/issues/1319"
-            },
-            {
-                "number": 1306,
-                "title": "MultiSelect/Dropdown expose input attributes for labeling and validation purposes",
-                "url": "https://github.com/primefaces/primereact/issues/1306"
-            },
-            {
-                "number": 1331,
-                "title": "Dropdown checkValidity fails",
-                "url": "https://github.com/primefaces/primereact/issues/1331"
-            }
-        ],
-        "listbox": [
-            {
-                "number": 1335,
-                "title": "Add filterLocale property to ListBox",
-                "url": "https://github.com/primefaces/primereact/issues/1335"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 1334,
-                "title": "Add filterLocale property to Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/1334"
-            },
-            {
-                "number": 1332,
-                "title": "Add checkValidity method to MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1332"
-            },
-            {
-                "number": 1310,
-                "title": "Refactor Dropdown outside click detection ",
-                "url": "https://github.com/primefaces/primereact/issues/1310"
-            },
-            {
-                "number": 1306,
-                "title": "MultiSelect/Dropdown expose input attributes for labeling and validation purposes",
-                "url": "https://github.com/primefaces/primereact/issues/1306"
-            },
-            {
-                "number": 1331,
-                "title": "Dropdown checkValidity fails",
-                "url": "https://github.com/primefaces/primereact/issues/1331"
-            }
-        ],
-        "tree": [
-            {
-                "number": 1338,
-                "title": "Add filterLocale property to Tree",
-                "url": "https://github.com/primefaces/primereact/issues/1338"
-            },
-            {
-                "number": 1182,
-                "title": "Tree drag&drop not working if dragdropScope contains upper case letter",
-                "url": "https://github.com/primefaces/primereact/issues/1182"
-            }
-        ],
-        "carousel": [
-            {
-                "number": 1300,
-                "title": "Carousel  - Button inside carousel-item is not clickable in mobile phones",
-                "url": "https://github.com/primefaces/primereact/issues/1300"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1293,
-                "title": "Add milliseconds support to Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/1293"
-            },
-            {
-                "number": 1281,
-                "title": "Today Button doesn't work on prefilled Calendar with timeonly",
-                "url": "https://github.com/primefaces/primereact/issues/1281"
-            },
-            {
-                "number": 1294,
-                "title": "Improve timepicker style on Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/1294"
-            },
-            {
-                "number": 1328,
-                "title": "Calendar.showOtherMonths property not being used",
-                "url": "https://github.com/primefaces/primereact/issues/1328"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 1305,
-                "title": "Autocomplete dropdown button close behavior enhancement",
-                "url": "https://github.com/primefaces/primereact/issues/1305"
-            },
-            {
-                "number": 1308,
-                "title": "Refactor AutoComplete outside click detection",
-                "url": "https://github.com/primefaces/primereact/issues/1308"
-            },
-            {
-                "number": 1316,
-                "title": "IE11: Autocomplete with dropdown and multiple selection requires doubleclick",
-                "url": "https://github.com/primefaces/primereact/issues/1316"
-            },
-            {
-                "number": 1297,
-                "title": "AutoComplete: selectedItemTemplate ts binding claims to expect JSX.Element in return, but at runtime a string is expected",
-                "url": "https://github.com/primefaces/primereact/issues/1297"
-            }
-        ],
-        "utils": [
-            {
-                "number": 1286,
-                "title": "Not nullable `dataKey` in DropDown break `selectedOption` property",
-                "url": "https://github.com/primefaces/primereact/issues/1286"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 1333,
-                "title": "Add filterLocale property to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1333"
-            },
-            {
-                "number": 1307,
-                "title": "multiSortMeta depends on single sort",
-                "url": "https://github.com/primefaces/primereact/issues/1307"
-            },
-            {
-                "number": 1329,
-                "title": "Update sortIcons",
-                "url": "https://github.com/primefaces/primereact/issues/1329"
-            }
-        ],
-        "togglebutton": [
-            {
-                "number": 1321,
-                "title": "Disable prop on ToggleButton not working",
-                "url": "https://github.com/primefaces/primereact/issues/1321"
-            },
-            {
-                "number": 1330,
-                "title": "onFocus - onBlur for ToggleButton",
-                "url": "https://github.com/primefaces/primereact/issues/1330"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 1337,
-                "title": "Add filterLocale property to TreeTable",
-                "url": "https://github.com/primefaces/primereact/issues/1337"
-            },
-            {
-                "number": 1276,
-                "title": "TreeTable goes to edit mode when expanded",
-                "url": "https://github.com/primefaces/primereact/issues/1276"
-            },
-            {
-                "number": 1329,
-                "title": "Update sortIcons",
-                "url": "https://github.com/primefaces/primereact/issues/1329"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 1309,
-                "title": "InputMask displayed value does not change when value changes to undefined or null",
-                "url": "https://github.com/primefaces/primereact/issues/1309"
-            }
-        ],
-        "menu": [
-            {
-                "number": 1318,
-                "title": "Refactor Menu outside click detection ",
-                "url": "https://github.com/primefaces/primereact/issues/1318"
-            }
-        ],
-        "tooltip": [
-            {
-                "number": 1327,
-                "title": "Adding missing type definition className to ToolTipOptions",
-                "url": "https://github.com/primefaces/primereact/pull/1327"
-            }
-        ],
-        "colorpicker": [
-            {
-                "number": 1317,
-                "title": "Refactor ColorPicker outside click detection",
-                "url": "https://github.com/primefaces/primereact/issues/1317"
-            }
-        ],
-        "overlaypanel": [
-            {
-                "number": 1320,
-                "title": "Refactor OverlayPanel outside click detection",
-                "url": "https://github.com/primefaces/primereact/issues/1320"
-            }
-        ],
-        "fileupload": [
-            {
-                "number": 1282,
-                "title": "FileUpload in auto mode sends two post requests in IE11",
-                "url": "https://github.com/primefaces/primereact/issues/1282"
-            }
-        ],
-        "chips": [
-            {
-                "number": 1285,
-                "title": "Separator for Chips",
-                "url": "https://github.com/primefaces/primereact/issues/1285"
-            }
-        ],
-        "tristatecheckbox": [
-            {
-                "number": 1325,
-                "title": "Disabled prop for TriStateCheckbox",
-                "url": "https://github.com/primefaces/primereact/issues/1325"
-            }
-        ]
-    },
-
-    "4.1.2": {
-        "datatable": [
-            {
-                "number": 1279,
-                "title": "Multiple Sort doesn't work as expected in the DataTable if a sortable column has sortField and field properties",
-                "url": "https://github.com/primefaces/primereact/issues/1279"
-            },
-            {
-                "number": 1269,
-                "title": "Tab-Key doesn't work in Datatable with cell editing on IE11 and Edge",
-                "url": "https://github.com/primefaces/primereact/issues/1269"
-            },
-            {
-                "number": 1271,
-                "title": "Setting state in onFocus of Datatable Editors crashes app",
-                "url": "https://github.com/primefaces/primereact/issues/1271"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 1278,
-                "title": "Chips in disabled Autocomplete are not disabled",
-                "url": "https://github.com/primefaces/primereact/issues/1278"
-            },
-            {
-                "number": 1267,
-                "title": "IE11: Autocomplete with dropdown requires doubleclick",
-                "url": "https://github.com/primefaces/primereact/issues/1267"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1277,
-                "title": "Calendar display not update when value change.",
-                "url": "https://github.com/primefaces/primereact/issues/1277"
-            },
-            {
-                "number": 1272,
-                "title": "Calendar closes right away in Chrome when it has showTime={true}",
-                "url": "https://github.com/primefaces/primereact/issues/1272"
-            },
-            {
-                "number": 1270,
-                "title": "Invalid Date in Calendar in IE11 crashes the app",
-                "url": "https://github.com/primefaces/primereact/issues/1270"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 1265,
-                "title": "OnComplete callback has wrong property params on InputMask.d.ts",
-                "url": "https://github.com/primefaces/primereact/issues/1265"
-            }
-        ],
-        "dataview": [
-            {
-                "number": 1264,
-                "title": "DataView: lazy loading implementation",
-                "url": "https://github.com/primefaces/primereact/issues/1264"
-            }
-        ]
-    },
-
-    "4.1.1": {
-        "paginator": [
-            {
-                "number": 1251,
-                "title": "currentPageReport should check for {last} boundary",
-                "url": "https://github.com/primefaces/primereact/issues/1251"
-            }
-        ],
-        "tabview": [
-            {
-                "number": 1254,
-                "title": "Disabled TabPanel focussable with TAB-Key",
-                "url": "https://github.com/primefaces/primereact/issues/1254"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 1253,
-                "title": "Error on TreeTable docs about responsive",
-                "url": "https://github.com/primefaces/primereact/issues/1253"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 1252,
-                "title": "Select components don't correctly return value",
-                "url": "https://github.com/primefaces/primereact/issues/1252"
-            },
-            {
-                "number": 1249,
-                "title": "resetFilter function for Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/1249"
-            },
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            },
-            {
-                "number": 1260,
-                "title": "Add onFocus-onBlur to Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/1260"
-            }
-        ],
-        "listbox": [
-            {
-                "number": 1252,
-                "title": "Select components don't correctly return value",
-                "url": "https://github.com/primefaces/primereact/issues/1252"
-            },
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 1252,
-                "title": "Select components don't correctly return value",
-                "url": "https://github.com/primefaces/primereact/issues/1252"
-            },
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "selectbutton": [
-            {
-                "number": 1252,
-                "title": "Select components don't correctly return value",
-                "url": "https://github.com/primefaces/primereact/issues/1252"
-            },
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "growl": [
-            {
-                "number": 1248,
-                "title": "onClose of GrowlMessage is also allowing onClick to fire.",
-                "url": "https://github.com/primefaces/primereact/issues/1248"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 1255,
-                "title": "InputMask OnComplete does not contain the new value",
-                "url": "https://github.com/primefaces/primereact/issues/1255"
-            },
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "checkbox": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "chips": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "colorpicker": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "inputswitch": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "radiobutton": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "rating": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "spinner": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "togglebutton": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "tristatecheckbox": [
-            {
-                "number": 1199,
-                "title": "Improve type definition for onChange of form components",
-                "url": "https://github.com/primefaces/primereact/issues/1199"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 1261,
-                "title": "DataTable scrollHeight doesn't calculate correctly with frozen columns and header groups",
-                "url": "https://github.com/primefaces/primereact/issues/1261"
-            }
-        ]
-    },
-
-    "4.1.0": {
-        "column": [
-            {
-                "number": 1246,
-                "title": "Add reorderable to Column",
-                "url": "https://github.com/primefaces/primereact/issues/1246"
-            },
-            {
-                "number": 1221,
-                "title": "Add filterField to column",
-                "url": "https://github.com/primefaces/primereact/issues/1221"
-            },
-            {
-                "number": 1223,
-                "title": "New filtering modes for Table",
-                "url": "https://github.com/primefaces/primereact/issues/1223"
-            },
-            {
-                "number": 1222,
-                "title": "Accents support in Table filtering",
-                "url": "https://github.com/primefaces/primereact/issues/1222"
-            },
-            {
-                "number": 1032,
-                "title": "DataTable Columns: Conditional reorder",
-                "url": "https://github.com/primefaces/primereact/issues/1032"
-            },
-            {
-                "number": 1224,
-                "title": "New DataTable Customer Demo",
-                "url": "https://github.com/primefaces/primereact/issues/1224"
-            },
-            {
-                "number": 1220,
-                "title": "Move column filters to their own row",
-                "url": "https://github.com/primefaces/primereact/issues/1220"
-            },
-            {
-                "number": 1031,
-                "title": "Datatable Columns: Conditional select",
-                "url": "https://github.com/primefaces/primereact/issues/1031"
-            },
-            {
-                "number": 1226,
-                "title": "Add rowHover to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1226"
-            },
-            {
-                "number": 1227,
-                "title": "Add filterHeaderStyle and filterHeaderClassName to Column",
-                "url": "https://github.com/primefaces/primereact/issues/1227"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 1246,
-                "title": "Add reorderable to Column",
-                "url": "https://github.com/primefaces/primereact/issues/1246"
-            },
-            {
-                "number": 1219,
-                "title": " Remove tabIndex from the headers of the non-sortable dataTable.",
-                "url": "https://github.com/primefaces/primereact/issues/1219"
-            },
-            {
-                "number": 1236,
-                "title": "Change the type of emptyMessage property on DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1236"
-            },
-            {
-                "number": 1218,
-                "title": "The virtualScroll height is always added to rows on DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1218"
-            },
-            {
-                "number": 1198,
-                "title": "Added warnings to columnKeys in reorderable DataTables",
-                "url": "https://github.com/primefaces/primereact/pull/1198"
-            },
-            {
-                "number": 1221,
-                "title": "Add filterField to column",
-                "url": "https://github.com/primefaces/primereact/issues/1221"
-            },
-            {
-                "number": 1223,
-                "title": "New filtering modes for Table",
-                "url": "https://github.com/primefaces/primereact/issues/1223"
-            },
-            {
-                "number": 1222,
-                "title": "Accents support in Table filtering",
-                "url": "https://github.com/primefaces/primereact/issues/1222"
-            },
-            {
-                "number": 1032,
-                "title": "DataTable Columns: Conditional reorder",
-                "url": "https://github.com/primefaces/primereact/issues/1032"
-            },
-            {
-                "number": 1224,
-                "title": "New DataTable Customer Demo",
-                "url": "https://github.com/primefaces/primereact/issues/1224"
-            },
-            {
-                "number": 1220,
-                "title": "Move column filters to their own row",
-                "url": "https://github.com/primefaces/primereact/issues/1220"
-            },
-            {
-                "number": 1031,
-                "title": "Datatable Columns: Conditional select",
-                "url": "https://github.com/primefaces/primereact/issues/1031"
-            },
-            {
-                "number": 1226,
-                "title": "Add rowHover to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1226"
-            },
-            {
-                "number": 1227,
-                "title": "Add filterHeaderStyle and filterHeaderClassName to Column",
-                "url": "https://github.com/primefaces/primereact/issues/1227"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 1246,
-                "title": "Add reorderable to Column",
-                "url": "https://github.com/primefaces/primereact/issues/1246"
-            },
-            {
-                "number": 1220,
-                "title": "Move column filters to their own row",
-                "url": "https://github.com/primefaces/primereact/issues/1220"
-            },
-            {
-                "number": 1221,
-                "title": "Add filterField to column",
-                "url": "https://github.com/primefaces/primereact/issues/1221"
-            },
-            {
-                "number": 1223,
-                "title": "New filtering modes for Table",
-                "url": "https://github.com/primefaces/primereact/issues/1223"
-            },
-            {
-                "number": 1222,
-                "title": "Accents support in Table filtering",
-                "url": "https://github.com/primefaces/primereact/issues/1222"
-            },
-            {
-                "number": 1224,
-                "title": "New DataTable Customer Demo",
-                "url": "https://github.com/primefaces/primereact/issues/1224"
-            },
-            {
-                "number": 1226,
-                "title": "Add rowHover to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1226"
-            }
-        ],
-        "paginator": [
-            {
-                "number": 1233,
-                "title": "Datatable doesn't change page when the last element on a page is removed.",
-                "url": "https://github.com/primefaces/primereact/issues/1233"
-            },
-            {
-                "number": 1225,
-                "title": "New options for CurrentPageReport",
-                "url": "https://github.com/primefaces/primereact/issues/1225"
-            }
-        ],
-        "listbox": [
-            {
-                "number": 1245,
-                "title": "Implement filterBy and filterMatchMode for ListBox",
-                "url": "https://github.com/primefaces/primereact/issues/1245"
-            },
-            {
-                "number": 1230,
-                "title": "Add optionValue to Select components",
-                "url": "https://github.com/primefaces/primereact/issues/1230"
-            },
-            {
-                "number": 1175,
-                "title": "Implement className in MultiSelect, Dropdown, SelectButton, ListBox options",
-                "url": "https://github.com/primefaces/primereact/issues/1175"
-            },
-            {
-                "number": 1242,
-                "title": "Add filterPlaceholder to MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1242"
-            },
-            {
-                "number": 1215,
-                "title": "Add filterPlaceholder to Listbox",
-                "url": "https://github.com/primefaces/primereact/issues/1215"
-            }
-        ],
-        "tree": [
-            {
-                "number": 1232,
-                "title": "Filter does not work after adding a new node to the root node on Tree",
-                "url": "https://github.com/primefaces/primereact/issues/1232"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1231,
-                "title": "Clear Button does not clear the input value on Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/1231"
-            },
-            {
-                "number": 1217,
-                "title": "Time support for min date or max date in calendar component",
-                "url": "https://github.com/primefaces/primereact/issues/1217"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 1230,
-                "title": "Add optionValue to Select components",
-                "url": "https://github.com/primefaces/primereact/issues/1230"
-            },
-            {
-                "number": 1221,
-                "title": "Add filterField to column",
-                "url": "https://github.com/primefaces/primereact/issues/1221"
-            },
-            {
-                "number": 1223,
-                "title": "New filtering modes for Table",
-                "url": "https://github.com/primefaces/primereact/issues/1223"
-            },
-            {
-                "number": 1222,
-                "title": "Accents support in Table filtering",
-                "url": "https://github.com/primefaces/primereact/issues/1222"
-            },
-            {
-                "number": 1224,
-                "title": "New DataTable Customer Demo",
-                "url": "https://github.com/primefaces/primereact/issues/1224"
-            },
-            {
-                "number": 1220,
-                "title": "Move column filters to their own row",
-                "url": "https://github.com/primefaces/primereact/issues/1220"
-            },
-            {
-                "number": 1175,
-                "title": "Implement className in MultiSelect, Dropdown, SelectButton, ListBox options",
-                "url": "https://github.com/primefaces/primereact/issues/1175"
-            },
-            {
-                "number": 1242,
-                "title": "Add filterPlaceholder to MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1242"
-            },
-            {
-                "number": 1215,
-                "title": "Add filterPlaceholder to Listbox",
-                "url": "https://github.com/primefaces/primereact/issues/1215"
-            },
-            {
-                "number": 1226,
-                "title": "Add rowHover to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1226"
-            },
-            {
-                "number": 1244,
-                "title": "Implement filterBy and filterMatchMode for MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1244"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 1230,
-                "title": "Add optionValue to Select components",
-                "url": "https://github.com/primefaces/primereact/issues/1230"
-            },
-            {
-                "number": 1221,
-                "title": "Add filterField to column",
-                "url": "https://github.com/primefaces/primereact/issues/1221"
-            },
-            {
-                "number": 1223,
-                "title": "New filtering modes for Table",
-                "url": "https://github.com/primefaces/primereact/issues/1223"
-            },
-            {
-                "number": 1222,
-                "title": "Accents support in Table filtering",
-                "url": "https://github.com/primefaces/primereact/issues/1222"
-            },
-            {
-                "number": 1179,
-                "title": "Reset filter textbox of dropdown if options changes",
-                "url": "https://github.com/primefaces/primereact/issues/1179"
-            },
-            {
-                "number": 1224,
-                "title": "New DataTable Customer Demo",
-                "url": "https://github.com/primefaces/primereact/issues/1224"
-            },
-            {
-                "number": 1220,
-                "title": "Move column filters to their own row",
-                "url": "https://github.com/primefaces/primereact/issues/1220"
-            },
-            {
-                "number": 1149,
-                "title": "Implement filterBy and filterMatchMode for Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/1149"
-            },
-            {
-                "number": 1175,
-                "title": "Implement className in MultiSelect, Dropdown, SelectButton, ListBox options",
-                "url": "https://github.com/primefaces/primereact/issues/1175"
-            },
-            {
-                "number": 1226,
-                "title": "Add rowHover to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1226"
-            }
-        ],
-        "utils": [
-            {
-                "number": 1221,
-                "title": "Add filterField to column",
-                "url": "https://github.com/primefaces/primereact/issues/1221"
-            },
-            {
-                "number": 1223,
-                "title": "New filtering modes for Table",
-                "url": "https://github.com/primefaces/primereact/issues/1223"
-            },
-            {
-                "number": 1222,
-                "title": "Accents support in Table filtering",
-                "url": "https://github.com/primefaces/primereact/issues/1222"
-            },
-            {
-                "number": 1224,
-                "title": "New DataTable Customer Demo",
-                "url": "https://github.com/primefaces/primereact/issues/1224"
-            },
-            {
-                "number": 1220,
-                "title": "Move column filters to their own row",
-                "url": "https://github.com/primefaces/primereact/issues/1220"
-            },
-            {
-                "number": 1149,
-                "title": "Implement filterBy and filterMatchMode for Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/1149"
-            },
-            {
-                "number": 1226,
-                "title": "Add rowHover to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1226"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 1170,
-                "title": "Allow Dialogs already maximized ",
-                "url": "https://github.com/primefaces/primereact/issues/1170"
-            }
-        ],
-        "tabview": [
-            {
-                "number": 1079,
-                "title": "Change the type of the 'header' property on TabPanel",
-                "url": "https://github.com/primefaces/primereact/issues/1079"
-            }
-        ],
-        "slider": [
-            {
-                "number": 1094,
-                "title": "Deadlock situation in range slider",
-                "url": "https://github.com/primefaces/primereact/issues/1094"
-            }
-        ],
-        "selectbutton": [
-            {
-                "number": 1175,
-                "title": "Implement className in MultiSelect, Dropdown, SelectButton, ListBox options",
-                "url": "https://github.com/primefaces/primereact/issues/1175"
-            },
-            {
-                "number": 1230,
-                "title": "Add optionValue to Select components",
-                "url": "https://github.com/primefaces/primereact/issues/1230"
-            },
-            {
-                "number": 1238,
-                "title": "Templating support to SelectButton",
-                "url": "https://github.com/primefaces/primereact/issues/1238"
-            }
-        ],
-        "contextmenu": [
-            {
-                "number": 1189,
-                "title": "ContextMenu hide/onHide triggers even though already hidden",
-                "url": "https://github.com/primefaces/primereact/issues/1189"
-            }
-        ],
-        "common": [
-            {
-                "number": 1213,
-                "title": "Improve style of p-link component",
-                "url": "https://github.com/primefaces/primereact/issues/1213"
-            }
-        ],
-        "chips": [
-            {
-                "number": 1241,
-                "title": "Chips cover 100% although input is visually smaller",
-                "url": "https://github.com/primefaces/primereact/issues/1241"
-            }
-        ]
-    },
-
-    "4.0.0": {
-        "dialog": [
-            {
-                "number": 1174,
-                "title": "Dialog header not visible",
-                "url": "https://github.com/primefaces/primereact/issues/1174"
-            },
-            {
-                "number": 1169,
-                "title": "Maximizable property is not working correctly on dialog",
-                "url": "https://github.com/primefaces/primereact/issues/1169"
-            },
-            {
-                "number": 1203,
-                "title": "Add position property to Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/1203"
-            },
-            {
-                "number": 1194,
-                "title": "Add maskClassName property to Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/1194"
-            },
-            {
-                "number": 1165,
-                "title": "Dialog is not displayed correctly in mobile view",
-                "url": "https://github.com/primefaces/primereact/issues/1165"
-            },
-            {
-                "number": 1167,
-                "title": "Dismissable mask behaves over dialog",
-                "url": "https://github.com/primefaces/primereact/issues/1167"
-            },
-            {
-                "number": 1202,
-                "title": "Add FocusTrap support to Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/1202"
-            }
-        ],
-        "steps": [
-            {
-                "number": 1192,
-                "title": "The  disabled items can be focused in the Steps",
-                "url": "https://github.com/primefaces/primereact/issues/1192"
-            },
-            {
-                "number": 1191,
-                "title": "ReImplemented Steps styles",
-                "url": "https://github.com/primefaces/primereact/issues/1191"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 1196,
-                "title": "Remove min-width style from Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/1196"
-            }
-        ],
-        "growl": [
-            {
-                "number": 1190,
-                "title": "Alignment problem on Growl message without details",
-                "url": "https://github.com/primefaces/primereact/issues/1190"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 1164,
-                "title": "Add sort number feature to sortable columns on DataTable and TreeTable with multi sorting",
-                "url": "https://github.com/primefaces/primereact/issues/1164"
-            },
-            {
-                "number": 1163,
-                "title": "Typedefinition for DataTable OnFilter is wrong.",
-                "url": "https://github.com/primefaces/primereact/issues/1163"
-            },
-            {
-                "number": 1201,
-                "title": "Add sortFunction support to DataTable with multiple column sorting",
-                "url": "https://github.com/primefaces/primereact/issues/1201"
-            }
-        ],
-        "galleria": [
-            {
-                "number": 1105,
-                "title": "New Component: Galleria",
-                "url": "https://github.com/primefaces/primereact/issues/1105"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 1164,
-                "title": "Add sort number feature to sortable columns on DataTable and TreeTable with multi sorting",
-                "url": "https://github.com/primefaces/primereact/issues/1164"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1141,
-                "title": "Add editing support to the input field on Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/1141"
-            },
-            {
-                "number": 1204,
-                "title": "Add keepInvalid property to Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/1204"
-            }
-        ],
-        "lightbox": [
-            {
-                "number": 1200,
-                "title": "Remove the legacy lifecycle method from Lightbox component",
-                "url": "https://github.com/primefaces/primereact/issues/1200"
-            }
-        ],
-        "fileupload": [
-            {
-                "number": 1152,
-                "title": "Add onRemove callback to FileUpload",
-                "url": "https://github.com/primefaces/primereact/issues/1152"
-            }
-        ]
-    },
-
-    "3.4.0": {
-        "datatable": [
-            {
-                "number": 1148,
-                "title": "Add expandableRowGroups property to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1148"
-            },
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            },
-            {
-                "number": 1142,
-                "title": "Add removableSort property to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1142"
-            }
-        ],
-        "inputtextarea": [
-            {
-                "number": 1127,
-                "title": "InputTextarea does not render props like cols and rows",
-                "url": "https://github.com/primefaces/primereact/issues/1127"
-            }
-        ],
-        "panelmenu": [
-            {
-                "number": 1121,
-                "title": "PanelMenu Icon does not show for entries without sub children",
-                "url": "https://github.com/primefaces/primereact/issues/1121"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 1156,
-                "title": "When the InputMask is focused, the mask disappears",
-                "url": "https://github.com/primefaces/primereact/issues/1156"
-            },
-            {
-                "number": 1021,
-                "title": "InputMask is not changing the mask at runtime.",
-                "url": "https://github.com/primefaces/primereact/issues/1021"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 1158,
-                "title": "Wrong property name on the propTypes definition of Dropdown ",
-                "url": "https://github.com/primefaces/primereact/issues/1158"
-            },
-            {
-                "number": 1053,
-                "title": "Dropdown cannot open the panel after double clicking an option",
-                "url": "https://github.com/primefaces/primereact/issues/1053"
-            }
-        ],
-        "dataview": [
-            {
-                "number": 1131,
-                "title": "Some DataView lazy and loading types missing",
-                "url": "https://github.com/primefaces/primereact/issues/1131"
-            },
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "slider": [
-            {
-                "number": 1094,
-                "title": "Deadlock situation in range slider",
-                "url": "https://github.com/primefaces/primereact/issues/1094"
-            }
-        ],
-        "contextmenu": [
-            {
-                "number": 1118,
-                "title": "ContextMenu.d.ts has wrong property name",
-                "url": "https://github.com/primefaces/primereact/issues/1118"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            },
-            {
-                "number": 1157,
-                "title": "Calendar component keyboard support",
-                "url": "https://github.com/primefaces/primereact/issues/1157"
-            }
-        ],
-        "carousel": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            },
-            {
-                "number": 1154,
-                "title": "The icon of the next button has wrong class name on Carousel",
-                "url": "https://github.com/primefaces/primereact/issues/1154"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            },
-            {
-                "number": 1138,
-                "title": "Enhance Dialog Positioning",
-                "url": "https://github.com/primefaces/primereact/issues/1138"
-            }
-        ],
-        "editor": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "fileupload": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "growl": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "lightbox": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "messages": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "organizationchart": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "overlaypanel": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "paginator": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "sidebar": [
-            {
-                "number": 1155,
-                "title": "When the buttons inside the components are clicked, they submit the form",
-                "url": "https://github.com/primefaces/primereact/issues/1155"
-            }
-        ],
-        "utils": [
-            {
-                "number": 1157,
-                "title": "Calendar component keyboard support",
-                "url": "https://github.com/primefaces/primereact/issues/1157"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 1129,
-                "title": "TreeTable default filter value is not showing in the filter widget ",
-                "url": "https://github.com/primefaces/primereact/issues/1129"
-            }
-        ]
-    },
-
-    "3.3.3": {
-        "multiselect": [
-            {
-                "number": 1074,
-                "title": "Add maxSelectedLabels property to MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1074"
-            },
-            {
-                "number": 1075,
-                "title": "Add selectedItemsLabel property to MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/1075"
-            }
-        ],
-        "tree": [
-            {
-                "number": 1078,
-                "title": "Add disabled property to Tree",
-                "url": "https://github.com/primefaces/primereact/issues/1078"
-            },
-            {
-                "number": 1068,
-                "title": "Tree className property not working ",
-                "url": "https://github.com/primefaces/primereact/issues/1068"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 1085,
-                "title": "Properties of TreeNodes on TreeTable not Working",
-                "url": "https://github.com/primefaces/primereact/issues/1085"
-            }
-        ],
-        "growl": [
-            {
-                "number": 1095,
-                "title": "Growl messages from \"bottom*\" is not displaying as expected",
-                "url": "https://github.com/primefaces/primereact/issues/1095"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1101,
-                "title": "Add repeat functionality to timer buttons on Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/1101"
-            },
-            {
-                "number": 1056,
-                "title": "selectDate() set date to undefined when minDate is set and selected date is <= minDate",
-                "url": "https://github.com/primefaces/primereact/issues/1056"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 617,
-                "title": "Datatable multisort broken",
-                "url": "https://github.com/primefaces/primereact/issues/617"
-            },
-            {
-                "number": 1102,
-                "title": "Add exportFunction property to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1102"
-            },
-            {
-                "number": 1088,
-                "title": "Add reset method to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1088"
-            },
-            {
-                "number": 1080,
-                "title": "onColReorder in Datatable parameter missing",
-                "url": "https://github.com/primefaces/primereact/issues/1080"
-            }
-        ],
-        "utils": [
-            {
-                "number": 1104,
-                "title": "DomHandler functions throw NPE on components",
-                "url": "https://github.com/primefaces/primereact/issues/1104"
-            },
-            {
-                "number": 1073,
-                "title": "Passing of data-* Attributes as Props",
-                "url": "https://github.com/primefaces/primereact/issues/1073"
-            }
-        ],
-        "sidebar": [
-            {
-                "number": 1065,
-                "title": "Sidebar dismissable is only updating whenever the visible prop updates",
-                "url": "https://github.com/primefaces/primereact/issues/1065"
-            }
-        ],
-        "button": [
-            {
-                "number": 1073,
-                "title": "Passing of data-* Attributes as Props",
-                "url": "https://github.com/primefaces/primereact/issues/1073"
-            }
-        ],
-        "inputswitch": [
-            {
-                "number": 1073,
-                "title": "Passing of data-* Attributes as Props",
-                "url": "https://github.com/primefaces/primereact/issues/1073"
-            }
-        ],
-        "inputtext": [
-            {
-                "number": 1073,
-                "title": "Passing of data-* Attributes as Props",
-                "url": "https://github.com/primefaces/primereact/issues/1073"
-            }
-        ],
-        "inputtextarea": [
-            {
-                "number": 1073,
-                "title": "Passing of data-* Attributes as Props",
-                "url": "https://github.com/primefaces/primereact/issues/1073"
-            }
-        ],
-        "password": [
-            {
-                "number": 1073,
-                "title": "Passing of data-* Attributes as Props",
-                "url": "https://github.com/primefaces/primereact/issues/1073"
-            }
-        ],
-        "message": [
-            {
-                "number": 1076,
-                "title": "className property of Message component not working",
-                "url": "https://github.com/primefaces/primereact/issues/1076"
-            }
-        ],
-        "column": [
-            {
-                "number": 1103,
-                "title": "Add exportable property to Column",
-                "url": "https://github.com/primefaces/primereact/issues/1103"
-            }
-        ]
-    },
-    "3.3.2": {
-        "datatable": [
-            {
-                "number": 1061,
-                "title": "Table state is not working with columnResizeMode=\"expand\" on DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/1061"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 1060,
-                "title": "Calendar component throws NPE after updating the value",
-                "url": "https://github.com/primefaces/primereact/issues/1060"
-            }
-        ]
-    },
-    "3.3.1": {
-        "carousel": [
-            {
-                "number": 1051,
-                "title": "Improve Carousel styles",
-                "url": "https://github.com/primefaces/primereact/issues/1051"
-            }
-        ]
-    },
-    "3.3.0": {
-        "selectbutton": [
-            {
-                "number": 1019,
-                "title": "Add className support to SelectButtonItems",
-                "url": "https://github.com/primefaces/primereact/issues/1019"
-            }
-        ],
-        "sidebar": [
-            {
-                "number": 1046,
-                "title": "Add closeOnEscape property to Sidebar",
-                "url": "https://github.com/primefaces/primereact/issues/1046"
-            }
-        ],
-        "inputtextarea": [
-            {
-                "number": 1040,
-                "title": "InputTextarea: Floating Label",
-                "url": "https://github.com/primefaces/primereact/issues/1040"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 999,
-                "title": "Calendar Overlay doesnt open with current date after value update",
-                "url": "https://github.com/primefaces/primereact/issues/999"
-            }
-        ],
-        "common": [
-            {
-                "number": 1040,
-                "title": "InputTextarea: Floating Label",
-                "url": "https://github.com/primefaces/primereact/issues/1040"
-            }
-        ],
-        "inputtext": [
-            {
-                "number": 1040,
-                "title": "InputTextarea: Floating Label",
-                "url": "https://github.com/primefaces/primereact/issues/1040"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 1036,
-                "title": "Add filterInputAutoFocus property to Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/1036"
-            }
-        ],
-        "carousel": [
-            {
-                "number": 1030,
-                "title": "New Component: Carousel",
-                "url": "https://github.com/primefaces/primereact/issues/1030"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 1045,
-                "title": "AutoComplete mode multiple ignores maxlength property",
-                "url": "https://github.com/primefaces/primereact/issues/1045"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 1044,
-                "title": "The datatable is broken with scrollable and no columns settings",
-                "url": "https://github.com/primefaces/primereact/issues/1044"
-            }
-        ]
-    },
-    "3.2.0": {
-        "fileupload": [
-            {
-                "number": 1008,
-                "title": "Add customUpload property to FileUpload",
-                "url": "https://github.com/primefaces/primereact/issues/1008"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 1009,
-                "title": "DataTable column headers not displaying in nested table",
-                "url": "https://github.com/primefaces/primereact/issues/1009"
-            },
-            {
-                "number": 1007,
-                "title": "Improve columns' editor option on editing mode",
-                "url": "https://github.com/primefaces/primereact/issues/1007"
-            },
-            {
-                "number": 1003,
-                "title": "DataTable has null state under certain conditions",
-                "url": "https://github.com/primefaces/primereact/issues/1003"
-            },
-            {
-                "number": 809,
-                "title": "Add row edit support to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/809"
-            },
-            {
-                "number": 1012,
-                "title": "DataTable with global filter and header checkbox selection select all records",
-                "url": "https://github.com/primefaces/primereact/issues/1012"
-            },
-            {
-                "number": 1005,
-                "title": "Add keyboard support to DataTable with Checkbox selection",
-                "url": "https://github.com/primefaces/primereact/issues/1005"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 1010,
-                "title": "Add type property to AutoComplete",
-                "url": "https://github.com/primefaces/primereact/issues/1010"
-            }
-        ],
-        "column": [
-            {
-                "number": 809,
-                "title": "Add row edit support to DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/809"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 998,
-                "title": "Value doesnt change on Input mask when unmask is enabled",
-                "url": "https://github.com/primefaces/primereact/issues/998"
-            }
-        ]
-    },
-    "3.1.9": {
-        "progressbar": [
-            {
-                "number": 978,
-                "title": "Add displayValueTemplate property to ProgressBar",
-                "url": "https://github.com/primefaces/primereact/issues/978"
-            },
-            {
-                "number": 973,
-                "title": "ProgressBar does not show value for 0%",
-                "url": "https://github.com/primefaces/primereact/issues/973"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 986,
-                "title": "Nested originalEvent in DataTable header RowCheckbox event ",
-                "url": "https://github.com/primefaces/primereact/issues/986"
-            },
-            {
-                "number": 980,
-                "title": "Typings missing in DataTable: resetColumnOrder",
-                "url": "https://github.com/primefaces/primereact/issues/980"
-            }
-        ],
-        "radiobutton": [
-            {
-                "number": 975,
-                "title": "Add tabIndex prop to RadioButton",
-                "url": "https://github.com/primefaces/primereact/issues/975"
-            },
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 988,
-                "title": "Add focusOnShow property to Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/988"
-            }
-        ],
-        "tooltip": [
-            {
-                "number": 994,
-                "title": "Add className option to Tooltip",
-                "url": "https://github.com/primefaces/primereact/issues/994"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 996,
-                "title": "Style props doesnt update after re-rendering with Inputmask",
-                "url": "https://github.com/primefaces/primereact/issues/996"
-            },
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "spinner": [
-            {
-                "number": 976,
-                "title": "Add tabIndex prop to Spinner",
-                "url": "https://github.com/primefaces/primereact/issues/976"
-            },
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            },
-            {
-                "number": 1001,
-                "title": "Wrong typings for the property of Spinner",
-                "url": "https://github.com/primefaces/primereact/issues/1001"
-            }
-        ],
-        "button": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "checkbox": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "colorpicker": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "inputswitch": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "inputtext": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "inputtextarea": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "listbox": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "password": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "rating": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "selectbutton": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "splitbutton": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "togglebutton": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "tristatecheckbox": [
-            {
-                "number": 972,
-                "title": "Tooltips appear with old contents after being undefined",
-                "url": "https://github.com/primefaces/primereact/issues/972"
-            }
-        ],
-        "contextmenu": [
-            {
-                "number": 1000,
-                "title": "Export hide() for ContextMenu in type definition file",
-                "url": "https://github.com/primefaces/primereact/issues/1000"
-            }
-        ]
-    },
-    "3.1.8": {
-        "datatable": [
-            {
-                "number": 944,
-                "title": "The DataTable will sort a column when shrinking it on resize",
-                "url": "https://github.com/primefaces/primereact/issues/944"
-            },
-            {
-                "number": 959,
-                "title": "DataTable fails to render if columns are mapped and has a static column",
-                "url": "https://github.com/primefaces/primereact/issues/959"
-            },
-            {
-                "number": 961,
-                "title": "Datatable rowGroup with rowSpan mode and pagination fails on page break",
-                "url": "https://github.com/primefaces/primereact/issues/961"
-            },
-            {
-                "number": 934,
-                "title": "Add shift key selection support to DataTable with multiple mode",
-                "url": "https://github.com/primefaces/primereact/issues/934"
-            },
-            {
-                "number": 967,
-                "title": "Datatable rowGroup with rowSpan mode: row separator line style on group break",
-                "url": "https://github.com/primefaces/primereact/issues/967"
-            }
-        ],
-        "datascroller": [
-            {
-                "number": 955,
-                "title": "Simple DataScroller does not display items.",
-                "url": "https://github.com/primefaces/primereact/issues/955"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 956,
-                "title": "Month View shows a redundant week on the calendar",
-                "url": "https://github.com/primefaces/primereact/issues/956"
-            },
-            {
-                "number": 968,
-                "title": "Calendar ButtonBar Clear button does not use clearButtonStyleClass prop",
-                "url": "https://github.com/primefaces/primereact/issues/968"
-            }
-        ],
-        "checkbox": [
-            {
-                "number": 952,
-                "title": "Add required prop to Checkbox",
-                "url": "https://github.com/primefaces/primereact/issues/952"
-            },
-            {
-                "number": 953,
-                "title": "Add required prop to RadioButton",
-                "url": "https://github.com/primefaces/primereact/issues/953"
-            }
-        ],
-        "radiobutton": [
-            {
-                "number": 952,
-                "title": "Add required prop to Checkbox",
-                "url": "https://github.com/primefaces/primereact/issues/952"
-            },
-            {
-                "number": 953,
-                "title": "Add required prop to RadioButton",
-                "url": "https://github.com/primefaces/primereact/issues/953"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 963,
-                "title": "Add autoFocus attribute to Autocomplete",
-                "url": "https://github.com/primefaces/primereact/issues/963"
-            }
-        ],
-        "togglebutton": [
-            {
-                "number": 957,
-                "title": "Add tabIndex prop to ToggleButton",
-                "url": "https://github.com/primefaces/primereact/issues/957"
-            }
-        ],
-        "growl": [
-            {
-                "number": 965,
-                "title": "Growl detail should be placed in <div> not <p>",
-                "url": "https://github.com/primefaces/primereact/issues/965"
-            }
-        ],
-        "picklist": [
-            {
-                "number": 962,
-                "title": "Add onTargetSelect and onSourceSelect props to Picklist",
-                "url": "https://github.com/primefaces/primereact/issues/962"
-            }
-        ]
-    },
-    "3.1.7": {
-        "chart": [
-            {
-                "number": 946,
-                "title": "Charts always redraw when they are updated",
-                "url": "https://github.com/primefaces/primereact/issues/946"
-            }
-        ]
-    },
-    "3.1.6": {
-        "chart": [
-            {
-                "number": 945,
-                "title": "The ChartJs API is not imported correctly",
-                "url": "https://github.com/primefaces/primereact/issues/945"
-            }
-        ]
-    },
-    "3.1.5": {
-        "chips": [
-            {
-                "number": 932,
-                "title": "Tooltip in chips does not work properly",
-                "url": "https://github.com/primefaces/primereact/issues/932"
-            },
-            {
-                "number": 918,
-                "title": "Close icon is still active on the disabled Chips ",
-                "url": "https://github.com/primefaces/primereact/issues/918"
-            }
-        ],
-        "tooltip": [
-            {
-                "number": 932,
-                "title": "Tooltip in chips does not work properly",
-                "url": "https://github.com/primefaces/primereact/issues/932"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 937,
-                "title": "The hide method of Dropdown throws an exception on console",
-                "url": "https://github.com/primefaces/primereact/issues/937"
-            },
-            {
-                "number": 933,
-                "title": "The \"required\" prop is not working on Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/933"
-            }
-        ],
-        "spinner": [
-            {
-                "number": 924,
-                "title": "Add formatInput prop to Spinner",
-                "url": "https://github.com/primefaces/primereact/issues/924"
-            },
-            {
-                "number": 925,
-                "title": "Add decimalSeparator and thousandSeparator props to Spinner",
-                "url": "https://github.com/primefaces/primereact/issues/925"
-            },
-            {
-                "number": 920,
-                "title": "Add required, pattern and placeholder props to Spinner. ",
-                "url": "https://github.com/primefaces/primereact/issues/920"
-            }
-        ],
-        "sidebar": [
-            {
-                "number": 910,
-                "title": "Second Sidebar reset blockScroll",
-                "url": "https://github.com/primefaces/primereact/issues/910"
-            }
-        ],
-        "checkbox": [
-            {
-                "number": 940,
-                "title": "When components are placed placed inside a label element clicking on the component fires the click event twice",
-                "url": "https://github.com/primefaces/primereact/issues/940"
-            }
-        ],
-        "progressspinner": [
-            {
-                "number": 908,
-                "title": "ProgressSpinner not visible in IE11",
-                "url": "https://github.com/primefaces/primereact/issues/908"
-            }
-        ],
-        "editor": [
-            {
-                "number": 938,
-                "title": "Add theme prop to Editor",
-                "url": "https://github.com/primefaces/primereact/issues/938"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 907,
-                "title": "Wrong type for showWeek in Calendar.d.ts",
-                "url": "https://github.com/primefaces/primereact/issues/907"
-            },
-            {
-                "number": 926,
-                "title": "The 'showWeek' prop throws an error with TypedScript on Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/926"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 916,
-                "title": "Add ariaCloseIconLabel prop to Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/916"
-            }
-        ],
-        "chart": [
-            {
-                "number": 913,
-                "title": "Can't resolve 'chart.js/src/chart.js'",
-                "url": "https://github.com/primefaces/primereact/issues/913"
-            }
-        ],
-        "growl": [
-            {
-                "number": 914,
-                "title": "onRemove event does not exists on Growl component",
-                "url": "https://github.com/primefaces/primereact/issues/914"
-            }
-        ],
-        "messages": [
-            {
-                "number": 930,
-                "title": "Add \"replace\" method in Messages component",
-                "url": "https://github.com/primefaces/primereact/issues/930"
-            },
-            {
-                "number": 928,
-                "title": "Empty array crashes Messages component",
-                "url": "https://github.com/primefaces/primereact/issues/928"
-            }
-        ]
-    },
-    "3.1.4": {
-        "chips": [
-            {
-                "number": 897,
-                "title": "onFocus and onBlur for Chips",
-                "url": "https://github.com/primefaces/primereact/issues/897"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 899,
-                "title": "The ability to reset columnOrder in DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/899"
-            },
-            {
-                "number": 881,
-                "title": "The scroll bar is not moving correctly on the DataTable with resizeMode=\"expand\"",
-                "url": "https://github.com/primefaces/primereact/issues/881"
-            },
-            {
-                "number": 884,
-                "title": "DataTable expanded rows collapse when modifying one property of a record",
-                "url": "https://github.com/primefaces/primereact/issues/884"
-            },
-            {
-                "number": 777,
-                "title": "DataTable onValueChange callback one key press behind when using custom InputText filter ",
-                "url": "https://github.com/primefaces/primereact/issues/777"
-            },
-            {
-                "number": 843,
-                "title": "Unlogical editor navigation with shift+tab in DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/843"
-            },
-            {
-                "number": 891,
-                "title": "CellEditor should have onSubmit and onCancel method.",
-                "url": "https://github.com/primefaces/primereact/issues/891"
-            },
-            {
-                "number": 896,
-                "title": "Data*: alwaysShowPaginator prop not used",
-                "url": "https://github.com/primefaces/primereact/issues/896"
-            }
-        ],
-        "utils": [
-            {
-                "number": 881,
-                "title": "The scroll bar is not moving correctly on the DataTable with resizeMode=\"expand\"",
-                "url": "https://github.com/primefaces/primereact/issues/881"
-            }
-        ],
-        "editor": [
-            {
-                "number": 904,
-                "title": "Modules property for Editor",
-                "url": "https://github.com/primefaces/primereact/issues/904"
-            }
-        ],
-        "panel": [
-            {
-                "number": 888,
-                "title": "Add expandIcon and collapseIcon props to Panel component",
-                "url": "https://github.com/primefaces/primereact/issues/888"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 905,
-                "title": "Add iconsTemplate to Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/905"
-            }
-        ],
-        "fileupload": [
-            {
-                "number": 802,
-                "title": "Cannot read property 'show' of undefined at FileUpload.validate ",
-                "url": "https://github.com/primefaces/primereact/issues/802"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 875,
-                "title": "Dropdown showClear not always displayed",
-                "url": "https://github.com/primefaces/primereact/issues/875"
-            },
-            {
-                "number": 844,
-                "title": "Editable Dropdown should support maxLength",
-                "url": "https://github.com/primefaces/primereact/issues/844"
-            },
-            {
-                "number": 903,
-                "title": "Not able to set focus on Dropdown component",
-                "url": "https://github.com/primefaces/primereact/issues/903"
-            },
-            {
-                "number": 874,
-                "title": "Support for disabling dropdown item(s).",
-                "url": "https://github.com/primefaces/primereact/issues/874"
-            }
-        ],
-        "column": [
-            {
-                "number": 891,
-                "title": "CellEditor should have onSubmit and onCancel method.",
-                "url": "https://github.com/primefaces/primereact/issues/891"
-            },
-            {
-                "number": 898,
-                "title": "DataTable sortFunction Typescript definition wrong",
-                "url": "https://github.com/primefaces/primereact/issues/898"
-            }
-        ],
-        "dataview": [
-            {
-                "number": 896,
-                "title": "Data*: alwaysShowPaginator prop not used",
-                "url": "https://github.com/primefaces/primereact/issues/896"
-            }
-        ],
-        "paginator": [
-            {
-                "number": 896,
-                "title": "Data*: alwaysShowPaginator prop not used",
-                "url": "https://github.com/primefaces/primereact/issues/896"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 896,
-                "title": "Data*: alwaysShowPaginator prop not used",
-                "url": "https://github.com/primefaces/primereact/issues/896"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 901,
-                "title": "Calendar time parsing broken for showSeconds == false",
-                "url": "https://github.com/primefaces/primereact/issues/901"
-            },
-            {
-                "number": 894,
-                "title": "Show week numbers for Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/894"
-            }
-        ],
-        "selectitem": [
-            {
-                "number": 874,
-                "title": "Support for disabling dropdown item(s).",
-                "url": "https://github.com/primefaces/primereact/issues/874"
-            }
-        ]
-    },
-    "3.1.3": {
-        "calendar": [
-            {
-                "number": 869,
-                "title": "Improve outside click on Calendar",
-                "url": "https://github.com/primefaces/primereact/issues/869"
-            },
-            {
-                "number": 870,
-                "title": "Calendar panel is not aligned correctly on window resize",
-                "url": "https://github.com/primefaces/primereact/issues/870"
-            },
-            {
-                "number": 859,
-                "title": "The min/max date support is added to Calendar for monthNavigation and yearNavigation",
-                "url": "https://github.com/primefaces/primereact/issues/859"
-            },
-            {
-                "number": 856,
-                "title": "Calendar view=\"month\" does not allow typing",
-                "url": "https://github.com/primefaces/primereact/issues/856"
-            }
-        ],
-        "overlaypanel": [
-            {
-                "number": 865,
-                "title": "Missing method typings for OverlayPanel",
-                "url": "https://github.com/primefaces/primereact/issues/865"
-            },
-            {
-                "number": 873,
-                "title": "Multiple target support to OverlayPanel",
-                "url": "https://github.com/primefaces/primereact/issues/873"
-            },
-            {
-                "number": 872,
-                "title": "Improve outside click on OverlayPanel",
-                "url": "https://github.com/primefaces/primereact/issues/872"
-            },
-            {
-                "number": 871,
-                "title": "OverlayPanel's icon is in the wrong position after window is resized",
-                "url": "https://github.com/primefaces/primereact/issues/871"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 855,
-                "title": "Add ariaLabel and ariaLabelledBy properties to DropDown",
-                "url": "https://github.com/primefaces/primereact/issues/855"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 849,
-                "title": "The tableStyle and tableClassName props have no effect on Scrollable DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/849"
-            },
-            {
-                "number": 835,
-                "title": "onRowSelect called instead of onRowUnselect",
-                "url": "https://github.com/primefaces/primereact/issues/835"
-            },
-            {
-                "number": 662,
-                "title": "Datatable scrollHeight can't be changed",
-                "url": "https://github.com/primefaces/primereact/issues/662"
-            },
-            {
-                "number": 860,
-                "title": "Calendar used in DataTable is unable to switch months",
-                "url": "https://github.com/primefaces/primereact/issues/860"
-            },
-            {
-                "number": 851,
-                "title": "Add stateStorage property to DataTable.d.ts",
-                "url": "https://github.com/primefaces/primereact/issues/851"
-            }
-        ],
-        "utils": [
-            {
-                "number": 840,
-                "title": "Calendar is rendering behind the browser window.",
-                "url": "https://github.com/primefaces/primereact/issues/840"
-            },
-            {
-                "number": 868,
-                "title": "Flipped OverlayPanel rendered behind browser",
-                "url": "https://github.com/primefaces/primereact/issues/868"
-            }
-        ],
-        "chart": [
-            {
-                "number": 834,
-                "title": "Chart doesn't reload when new data is added to it",
-                "url": "https://github.com/primefaces/primereact/issues/834"
-            }
-        ],
-        "tree": [
-            {
-                "number": 842,
-                "title": "Add contentStyle and contentClassName props to Tree",
-                "url": "https://github.com/primefaces/primereact/issues/842"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 854,
-                "title": "OnHide callback is not called when visibility property is changed",
-                "url": "https://github.com/primefaces/primereact/issues/854"
-            }
-        ]
-    },
-    "3.1.2": {
-        "datatable": [
-            {
-                "number": 830,
-                "title": "DataTable selection with uncontrolled sorting broken",
-                "url": "https://github.com/primefaces/primereact/issues/830"
-            }
-        ]
-    },
-    "3.1.1": {
-        "accordion": [
-            {
-                "number": 829,
-                "title": "On Accordion, the disabled head can be focused on ",
-                "url": "https://github.com/primefaces/primereact/issues/829"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 813,
-                "title": "DataTable row selection slow with sortable columns",
-                "url": "https://github.com/primefaces/primereact/issues/813"
-            },
-            {
-                "number": 825,
-                "title": "Improve DataTable VirtualScrolling",
-                "url": "https://github.com/primefaces/primereact/issues/825"
-            },
-            {
-                "number": 800,
-                "title": "Exclude column from global filter",
-                "url": "https://github.com/primefaces/primereact/pull/800"
-            },
-            {
-                "number": 635,
-                "title": "Datatable does not scroll horizontally when there is no data",
-                "url": "https://github.com/primefaces/primereact/issues/635"
-            },
-            {
-                "number": 822,
-                "title": "Close datatable cell editor programmatically",
-                "url": "https://github.com/primefaces/primereact/issues/822"
-            }
-        ],
-        "autocomplete": [
-            {
-                "number": 814,
-                "title": "Overlays wrong position on initial/first render",
-                "url": "https://github.com/primefaces/primereact/issues/814"
-            }
-        ],
-        "colorpicker": [
-            {
-                "number": 814,
-                "title": "Overlays wrong position on initial/first render",
-                "url": "https://github.com/primefaces/primereact/issues/814"
-            },
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 814,
-                "title": "Overlays wrong position on initial/first render",
-                "url": "https://github.com/primefaces/primereact/issues/814"
-            },
-            {
-                "number": 781,
-                "title": "Dropdown - TypeError: Cannot read property 'element' of null",
-                "url": "https://github.com/primefaces/primereact/issues/781"
-            },
-            {
-                "number": 826,
-                "title": "Remove autoWidth from Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/826"
-            },
-            {
-                "number": 805,
-                "title": "Dropdown duplicated IDs",
-                "url": "https://github.com/primefaces/primereact/issues/805"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 814,
-                "title": "Overlays wrong position on initial/first render",
-                "url": "https://github.com/primefaces/primereact/issues/814"
-            },
-            {
-                "number": 782,
-                "title": "Add onBlur and onFocus events to multiselect and chips",
-                "url": "https://github.com/primefaces/primereact/issues/782"
-            }
-        ],
-        "splitbutton": [
-            {
-                "number": 814,
-                "title": "Overlays wrong position on initial/first render",
-                "url": "https://github.com/primefaces/primereact/issues/814"
-            },
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "spinner": [
-            {
-                "number": 787,
-                "title": "Using \"maxlength\" of Spinner causes errors",
-                "url": "https://github.com/primefaces/primereact/issues/787"
-            },
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "progressbar": [
-            {
-                "number": 783,
-                "title": "Changes to prop does not render ProgressBar",
-                "url": "https://github.com/primefaces/primereact/issues/783"
-            }
-        ],
-        "column": [
-            {
-                "number": 825,
-                "title": "Improve DataTable VirtualScrolling",
-                "url": "https://github.com/primefaces/primereact/issues/825"
-            },
-            {
-                "number": 800,
-                "title": "Exclude column from global filter",
-                "url": "https://github.com/primefaces/primereact/pull/800"
-            },
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "overlaypanel": [
-            {
-                "number": 790,
-                "title": "Syntax error in optional typescript function interface",
-                "url": "https://github.com/primefaces/primereact/issues/790"
-            }
-        ],
-        "slidemenu": [
-            {
-                "number": 807,
-                "title": "SlideMenu empty after model change",
-                "url": "https://github.com/primefaces/primereact/issues/807"
-            },
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "utils": [
-            {
-                "number": 791,
-                "title": "DataTable crashes with a \"Cannot read property 'xxx' of undefined\" for nested objects",
-                "url": "https://github.com/primefaces/primereact/issues/791"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 823,
-                "title": "Update dialog animations",
-                "url": "https://github.com/primefaces/primereact/issues/823"
-            }
-        ],
-        "fullcalendar": [
-            {
-                "number": 827,
-                "title": "Update to FullCalendar 4.0.1",
-                "url": "https://github.com/primefaces/primereact/issues/827"
-            },
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "dataview": [
-            {
-                "number": 824,
-                "title": "Fixed renderItem uses wrong [first] on lazy DataView.",
-                "url": "https://github.com/primefaces/primereact/pull/824"
-            },
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "fileupload": [
-            {
-                "number": 808,
-                "title": "FileUpload thows JS exception in Edge",
-                "url": "https://github.com/primefaces/primereact/issues/808"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "datascroller": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "deferredcontent": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "editor": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "inputswitch": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "orderlist": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "organizationchart": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "paginator": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "picklist": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "rating": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "row": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "slider": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "tree": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 784,
-                "title": "\"propTypes\" incorrectly named as \"propsTypes\"",
-                "url": "https://github.com/primefaces/primereact/issues/784"
-            }
-        ],
-        "sidebar": [
-            {
-                "number": 780,
-                "title": "propTypes error using new iconsTemplate",
-                "url": "https://github.com/primefaces/primereact/issues/780"
-            }
-        ],
-        "chart": [
-            {
-                "number": 812,
-                "title": "Chart with latest chart.js does not build",
-                "url": "https://github.com/primefaces/primereact/issues/812"
-            }
-        ]
-    },
-    "3.1.0": {
-        "datatable": [
-            {
-                "number": 774,
-                "title": "Datatable toggle issue after reordering",
-                "url": "https://github.com/primefaces/primereact/issues/774"
-            },
-            {
-                "number": 736,
-                "title": "TableState for DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/736"
-            },
-            {
-                "number": 772,
-                "title": "TreeTableBodyCell.js: Uncaught TypeError: Cannot read property 'removeAttribute' of null",
-                "url": "https://github.com/primefaces/primereact/issues/772"
-            },
-            {
-                "number": 766,
-                "title": "Multiple selection in a table without data is selected by default",
-                "url": "https://github.com/primefaces/primereact/issues/766"
-            }
-        ],
-        "tree": [
-            {
-                "number": 769,
-                "title": "Filtering for Tree",
-                "url": "https://github.com/primefaces/primereact/issues/769"
-            }
-        ],
-        "common": [
-            {
-                "number": 760,
-                "title": "Improve style of p-link component",
-                "url": "https://github.com/primefaces/primereact/issues/760"
-            }
-        ],
-        "inputtextarea": [
-            {
-                "number": 773,
-                "title": "Inputtextarea autoresize invalid height issue after render",
-                "url": "https://github.com/primefaces/primereact/issues/773"
-            }
-        ],
-        "overlaypanel": [
-            {
-                "number": 763,
-                "title": "onClose event for OverlayPanel ",
-                "url": "https://github.com/primefaces/primereact/issues/763"
-            },
-            {
-                "number": 762,
-                "title": "Arrow for OverlayPanel",
-                "url": "https://github.com/primefaces/primereact/issues/762"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 772,
-                "title": "TreeTableBodyCell.js: Uncaught TypeError: Cannot read property 'removeAttribute' of null",
-                "url": "https://github.com/primefaces/primereact/issues/772"
-            },
-            {
-                "number": 380,
-                "title": "Filtering for TreeTable",
-                "url": "https://github.com/primefaces/primereact/issues/380"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 751,
-                "title": "code debugger in production mode \"component input calendar\"",
-                "url": "https://github.com/primefaces/primereact/issues/751"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 768,
-                "title": "Dropdown with dataKey attribute throws console errors.",
-                "url": "https://github.com/primefaces/primereact/issues/768"
-            }
-        ],
-        "sidebar": [
-            {
-                "number": 716,
-                "title": "Added customIcons render prop to Sidebar, to add new toolbar's icons",
-                "url": "https://github.com/primefaces/primereact/pull/716"
-            }
-        ],
-        "inputtext": [
-            {
-                "number": 761,
-                "title": "InputGroup border issue for using with other components",
-                "url": "https://github.com/primefaces/primereact/issues/761"
-            }
-        ],
-        "utils": [
-            {
-                "number": 736,
-                "title": "TableState for DataTable",
-                "url": "https://github.com/primefaces/primereact/issues/736"
-            }
-        ]
-    },
-    "3.0.0-Final": {
-        "spinner": [
-            {
-                "number": 743,
-                "title": "Spinner arrow keys not working",
-                "url": "https://github.com/primefaces/primereact/issues/743"
-            }
-        ],
-        "column": [
-            {
-                "number": 746,
-                "title": "Customizable editorValidatorEvent for IncellEditing",
-                "url": "https://github.com/primefaces/primereact/issues/746"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 746,
-                "title": "Customizable editorValidatorEvent for IncellEditing",
-                "url": "https://github.com/primefaces/primereact/issues/746"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 739,
-                "title": "Paginator - Uncaught TypeError: this.getOptionLabel(...).toLowerCase is not a function",
-                "url": "https://github.com/primefaces/primereact/issues/739"
-            }
-        ],
-        "paginator": [
-            {
-                "number": 739,
-                "title": "Paginator - Uncaught TypeError: this.getOptionLabel(...).toLowerCase is not a function",
-                "url": "https://github.com/primefaces/primereact/issues/739"
-            }
-        ]
-    },
-    "3.0.0-rc.1": {
-        "datatable": [
-            {
-                "number": 668,
-                "title": "DataTable: hide column after reordering columns throws exception",
-                "url": "https://github.com/primefaces/primereact/issues/668"
-            },
-            {
-                "number": 730,
-                "title": "Incorrect column sortable prop type definition",
-                "url": "https://github.com/primefaces/primereact/issues/730"
-            },
-            {
-                "number": 734,
-                "title": "DataTable edit throws error on route change",
-                "url": "https://github.com/primefaces/primereact/issues/734"
-            }
-        ],
-        "inputswitch": [
-            {
-                "number": 735,
-                "title": "InputSwitch focus visuals are missing",
-                "url": "https://github.com/primefaces/primereact/issues/735"
-            }
-        ],
-        "scrollpanel": [
-            {
-                "number": 726,
-                "title": "ScrollPanel: Cannot read property 'classList' of null",
-                "url": "https://github.com/primefaces/primereact/issues/726"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 674,
-                "title": "MultiSelect - Support a fixed defaultLabel",
-                "url": "https://github.com/primefaces/primereact/issues/674"
-            },
-            {
-                "number": 733,
-                "title": "Rename defaultLabel to placeholder in MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/733"
-            }
-        ],
-        "inputmask": [
-            {
-                "number": 686,
-                "title": "InputMask doesn't update the value according to state",
-                "url": "https://github.com/primefaces/primereact/issues/686"
-            }
-        ],
-        "editor": [
-            {
-                "number": 724,
-                "title": "Editor component cannot refresh it's value when the state change",
-                "url": "https://github.com/primefaces/primereact/issues/724"
-            }
-        ],
-        "checkbox": [
-            {
-                "number": 729,
-                "title": "Enhance accessibility for Checkbox with ARIA roles",
-                "url": "https://github.com/primefaces/primereact/issues/729"
-            }
-        ],
-        "dropdown": [
-            {
-                "number": 727,
-                "title": "Ability to use dataKey as the key in Dropdown",
-                "url": "https://github.com/primefaces/primereact/issues/727"
-            },
-            {
-                "number": 665,
-                "title": "Form validity is true, even though no Dropdown selection has been made.",
-                "url": "https://github.com/primefaces/primereact/issues/665"
-            }
-        ],
-        "calendar": [
-            {
-                "number": 706,
-                "title": "Header and Footer templates for Calendar component",
-                "url": "https://github.com/primefaces/primereact/issues/706"
-            }
-        ]
-    },
-    "3.0.0-beta.1": {
-        "sidebar": [
-            {
-                "number": 692,
-                "title": "Sidebar close icon should receive focus on open",
-                "url": "https://github.com/primefaces/primereact/issues/692"
-            }
-        ],
-        "inputswitch": [
-            {
-                "number": 695,
-                "title": "Keyboard Accessibility for InputSwitch",
-                "url": "https://github.com/primefaces/primereact/issues/695"
-            }
-        ],
-        "panel": [
-            {
-                "number": 710,
-                "title": "Reimplement Panel Animation with CSSTransition",
-                "url": "https://github.com/primefaces/primereact/issues/710"
-            },
-            {
-                "number": 712,
-                "title": "Reimplement Fieldset Animation with CSSTransition",
-                "url": "https://github.com/primefaces/primereact/issues/712"
-            }
-        ],
-        "orderlist": [
-            {
-                "number": 708,
-                "title": "OrderList droppoints are not highlighted",
-                "url": "https://github.com/primefaces/primereact/issues/708"
-            },
-            {
-                "number": 696,
-                "title": "Keyboard Accessibility for OrderList",
-                "url": "https://github.com/primefaces/primereact/issues/696"
-            }
-        ],
-        "togglebutton": [
-            {
-                "number": 689,
-                "title": "Improve ToggleButton Accessibility",
-                "url": "https://github.com/primefaces/primereact/issues/689"
-            }
-        ],
-        "listbox": [
-            {
-                "number": 690,
-                "title": "Improve Listbox Accessibility",
-                "url": "https://github.com/primefaces/primereact/issues/690"
-            }
-        ],
-        "menu": [
-            {
-                "number": 719,
-                "title": "Keyboard Accessibility for Menu",
-                "url": "https://github.com/primefaces/primereact/issues/719"
-            }
-        ],
-        "accordion": [
-            {
-                "number": 714,
-                "title": "Reimplement Accordion Animation with CSSTransition",
-                "url": "https://github.com/primefaces/primereact/issues/714"
-            },
-            {
-                "number": 717,
-                "title": "Remove certain props from Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/717"
-            }
-        ],
-        "inplace": [
-            {
-                "number": 698,
-                "title": "Keyboard Accessibility for Inplace",
-                "url": "https://github.com/primefaces/primereact/issues/698"
-            }
-        ],
-        "tieredmenu": [
-            {
-                "number": 720,
-                "title": "Reimplement TieredMenu",
-                "url": "https://github.com/primefaces/primereact/issues/720"
-            },
-            {
-                "number": 700,
-                "title": "Keyboard Accessibility for TieredMenu",
-                "url": "https://github.com/primefaces/primereact/issues/700"
-            }
-        ],
-        "dialog": [
-            {
-                "number": 717,
-                "title": "Remove certain props from Dialog",
-                "url": "https://github.com/primefaces/primereact/issues/717"
-            },
-            {
-                "number": 715,
-                "title": "Reimplement Dialog Positioning",
-                "url": "https://github.com/primefaces/primereact/issues/715"
-            }
-        ],
-        "megamenu": [
-            {
-                "number": 702,
-                "title": "Keyboard Accessibility for MegaMenu",
-                "url": "https://github.com/primefaces/primereact/issues/702"
-            }
-        ],
-        "menubar": [
-            {
-                "number": 701,
-                "title": "Keyboard Accessibility for Menubar",
-                "url": "https://github.com/primefaces/primereact/issues/701"
-            },
-            {
-                "number": 721,
-                "title": "Reimplement Menubar",
-                "url": "https://github.com/primefaces/primereact/issues/721"
-            }
-        ],
-        "datatable": [
-            {
-                "number": 693,
-                "title": "DataTable/TreeTable sort headers should be keyboard accessible",
-                "url": "https://github.com/primefaces/primereact/issues/693"
-            }
-        ],
-        "treetable": [
-            {
-                "number": 693,
-                "title": "DataTable/TreeTable sort headers should be keyboard accessible",
-                "url": "https://github.com/primefaces/primereact/issues/693"
-            },
-            {
-                "number": 685,
-                "title": "TreeTable Pagination Error",
-                "url": "https://github.com/primefaces/primereact/issues/685"
-            }
-        ],
-        "panelmenu": [
-            {
-                "number": 703,
-                "title": "Keyboard Accessibility for PanelMenu",
-                "url": "https://github.com/primefaces/primereact/issues/703"
-            },
-            {
-                "number": 718,
-                "title": "Reimplement PanelMenu Animation with CSSTransition ",
-                "url": "https://github.com/primefaces/primereact/issues/718"
-            }
-        ],
-        "fieldset": [
-            {
-                "number": 712,
-                "title": "Reimplement Fieldset Animation with CSSTransition",
-                "url": "https://github.com/primefaces/primereact/issues/712"
-            }
-        ],
-        "picklist": [
-            {
-                "number": 697,
-                "title": "Keyboard accessibility for PickList",
-                "url": "https://github.com/primefaces/primereact/issues/697"
-            }
-        ],
-        "selectbutton": [
-            {
-                "number": 687,
-                "title": "Improve SelectButton Accessibility",
-                "url": "https://github.com/primefaces/primereact/issues/687"
-            }
-        ],
-        "multiselect": [
-            {
-                "number": 691,
-                "title": "Keyboard Accessibility for MultiSelect",
-                "url": "https://github.com/primefaces/primereact/issues/691"
-            }
-        ]
-    }
-}
diff --git a/public/showcase/resources/demo/data/cars-large.json b/public/showcase/resources/demo/data/cars-large.json
deleted file mode 100644
index 7511502849..0000000000
--- a/public/showcase/resources/demo/data/cars-large.json
+++ /dev/null
@@ -1,1204 +0,0 @@
-{
-    "data":[
-        {
-            "vin":"ee8a89d8",
-            "brand":"Fiat",
-            "year":1987,
-            "color":"Maroon"
-        },
-        {
-            "vin":"642b3edc",
-            "brand":"Renault",
-            "year":1968,
-            "color":"White"
-        },
-        {
-            "vin":"19ec7580",
-            "brand":"Renault",
-            "year":1981,
-            "color":"Black"
-        },
-        {
-            "vin":"39980f30",
-            "brand":"VW",
-            "year":1986,
-            "color":"Red"
-        },
-        {
-            "vin":"ec9cc4e4",
-            "brand":"Fiat",
-            "year":1981,
-            "color":"Brown"
-        },
-        {
-            "vin":"09a06548",
-            "brand":"VW",
-            "year":1965,
-            "color":"Green"
-        },
-        {
-            "vin":"05c47246",
-            "brand":"Mercedes",
-            "year":2007,
-            "color":"Blue"
-        },
-        {
-            "vin":"a9cb87aa",
-            "brand":"Fiat",
-            "year":1962,
-            "color":"Green"
-        },
-        {
-            "vin":"eae758fa",
-            "brand":"BMW",
-            "year":1999,
-            "color":"Yellow"
-        },
-        {
-            "vin":"1241c403",
-            "brand":"Jaguar",
-            "year":1964,
-            "color":"Yellow"
-        },
-        {
-            "vin":"13f853a7",
-            "brand":"Honda",
-            "year":2006,
-            "color":"White"
-        },
-        {
-            "vin":"447d9ed9",
-            "brand":"Jaguar",
-            "year":2005,
-            "color":"Orange"
-        },
-        {
-            "vin":"78fa052e",
-            "brand":"Jaguar",
-            "year":1990,
-            "color":"Orange"
-        },
-        {
-            "vin":"8b77772a",
-            "brand":"Mercedes",
-            "year":1991,
-            "color":"Blue"
-        },
-        {
-            "vin":"23ba7e86",
-            "brand":"Honda",
-            "year":1975,
-            "color":"Yellow"
-        },
-        {
-            "vin":"9bacb32d",
-            "brand":"Volvo",
-            "year":1968,
-            "color":"Brown"
-        },
-        {
-            "vin":"62094d91",
-            "brand":"Mercedes",
-            "year":1962,
-            "color":"Green"
-        },
-        {
-            "vin":"dc7003f4",
-            "brand":"Jaguar",
-            "year":1976,
-            "color":"Maroon"
-        },
-        {
-            "vin":"08607aef",
-            "brand":"Mercedes",
-            "year":1987,
-            "color":"Maroon"
-        },
-        {
-            "vin":"45eee33a",
-            "brand":"BMW",
-            "year":1980,
-            "color":"Silver"
-        },
-        {
-            "vin":"f199ec5c",
-            "brand":"Jaguar",
-            "year":1961,
-            "color":"Green"
-        },
-        {
-            "vin":"b34cd9e8",
-            "brand":"VW",
-            "year":1993,
-            "color":"Silver"
-        },
-        {
-            "vin":"54b20b02",
-            "brand":"Renault",
-            "year":1967,
-            "color":"Brown"
-        },
-        {
-            "vin":"5dd8766e",
-            "brand":"Honda",
-            "year":1998,
-            "color":"Orange"
-        },
-        {
-            "vin":"df50ce22",
-            "brand":"Mercedes",
-            "year":1964,
-            "color":"White"
-        },
-        {
-            "vin":"ecb3e9e1",
-            "brand":"Honda",
-            "year":2003,
-            "color":"Silver"
-        },
-        {
-            "vin":"750d731d",
-            "brand":"Renault",
-            "year":1962,
-            "color":"Blue"
-        },
-        {
-            "vin":"bec38cf4",
-            "brand":"Renault",
-            "year":1960,
-            "color":"Blue"
-        },
-        {
-            "vin":"b7752002",
-            "brand":"Jaguar",
-            "year":1964,
-            "color":"Black"
-        },
-        {
-            "vin":"315fe9c4",
-            "brand":"Fiat",
-            "year":1985,
-            "color":"Red"
-        },
-        {
-            "vin":"be65f786",
-            "brand":"Mercedes",
-            "year":1963,
-            "color":"Orange"
-        },
-        {
-            "vin":"786a7d57",
-            "brand":"Mercedes",
-            "year":2003,
-            "color":"Black"
-        },
-        {
-            "vin":"a3aee412",
-            "brand":"Volvo",
-            "year":2003,
-            "color":"Maroon"
-        },
-        {
-            "vin":"749e6bdd",
-            "brand":"Audi",
-            "year":1995,
-            "color":"Brown"
-        },
-        {
-            "vin":"8cc40f50",
-            "brand":"BMW",
-            "year":1961,
-            "color":"Brown"
-        },
-        {
-            "vin":"5de63a6f",
-            "brand":"Renault",
-            "year":1961,
-            "color":"White"
-        },
-        {
-            "vin":"bdae1e20",
-            "brand":"Jaguar",
-            "year":2008,
-            "color":"Blue"
-        },
-        {
-            "vin":"290cc891",
-            "brand":"VW",
-            "year":1992,
-            "color":"Brown"
-        },
-        {
-            "vin":"007e1014",
-            "brand":"Renault",
-            "year":1966,
-            "color":"Black"
-        },
-        {
-            "vin":"429c502d",
-            "brand":"Honda",
-            "year":1995,
-            "color":"Silver"
-        },
-        {
-            "vin":"c336f9b6",
-            "brand":"Honda",
-            "year":1991,
-            "color":"Maroon"
-        },
-        {
-            "vin":"a6783ba3",
-            "brand":"Honda",
-            "year":2004,
-            "color":"Yellow"
-        },
-        {
-            "vin":"2ddaf8d5",
-            "brand":"Volvo",
-            "year":1982,
-            "color":"Blue"
-        },
-        {
-            "vin":"c09c4b15",
-            "brand":"VW",
-            "year":1991,
-            "color":"Blue"
-        },
-        {
-            "vin":"4609844c",
-            "brand":"Honda",
-            "year":1972,
-            "color":"Black"
-        },
-        {
-            "vin":"8db7df27",
-            "brand":"Audi",
-            "year":1982,
-            "color":"Blue"
-        },
-        {
-            "vin":"dcc58086",
-            "brand":"Audi",
-            "year":2001,
-            "color":"Brown"
-        },
-        {
-            "vin":"f1274cbe",
-            "brand":"Fiat",
-            "year":1995,
-            "color":"Silver"
-        },
-        {
-            "vin":"0858a5d4",
-            "brand":"Renault",
-            "year":1992,
-            "color":"Green"
-        },
-        {
-            "vin":"c2d42bb6",
-            "brand":"Volvo",
-            "year":1972,
-            "color":"Green"
-        },
-        {
-            "vin":"5535cd5a",
-            "brand":"Renault",
-            "year":1980,
-            "color":"Silver"
-        },
-        {
-            "vin":"e3313e1e",
-            "brand":"Honda",
-            "year":2009,
-            "color":"Orange"
-        },
-        {
-            "vin":"f4dea691",
-            "brand":"BMW",
-            "year":2002,
-            "color":"Brown"
-        },
-        {
-            "vin":"ec15a449",
-            "brand":"Honda",
-            "year":1990,
-            "color":"Yellow"
-        },
-        {
-            "vin":"80b74a0e",
-            "brand":"BMW",
-            "year":1979,
-            "color":"Yellow"
-        },
-        {
-            "vin":"513fe268",
-            "brand":"Honda",
-            "year":1987,
-            "color":"White"
-        },
-        {
-            "vin":"6934c8f8",
-            "brand":"Renault",
-            "year":1989,
-            "color":"Red"
-        },
-        {
-            "vin":"6a4c3ad0",
-            "brand":"Honda",
-            "year":1994,
-            "color":"Yellow"
-        },
-        {
-            "vin":"e0acd7b5",
-            "brand":"Mercedes",
-            "year":1965,
-            "color":"Red"
-        },
-        {
-            "vin":"2f31ac35",
-            "brand":"Jaguar",
-            "year":1991,
-            "color":"Brown"
-        },
-        {
-            "vin":"36104237",
-            "brand":"VW",
-            "year":1992,
-            "color":"Silver"
-        },
-        {
-            "vin":"5be099b4",
-            "brand":"BMW",
-            "year":1991,
-            "color":"Yellow"
-        },
-        {
-            "vin":"e2f55f31",
-            "brand":"BMW",
-            "year":1967,
-            "color":"Silver"
-        },
-        {
-            "vin":"11274338",
-            "brand":"Mercedes",
-            "year":1999,
-            "color":"Blue"
-        },
-        {
-            "vin":"f710e177",
-            "brand":"Fiat",
-            "year":2007,
-            "color":"White"
-        },
-        {
-            "vin":"d8375b4b",
-            "brand":"Volvo",
-            "year":1977,
-            "color":"Blue"
-        },
-        {
-            "vin":"a27ddfe3",
-            "brand":"VW",
-            "year":1978,
-            "color":"Blue"
-        },
-        {
-            "vin":"d8848162",
-            "brand":"BMW",
-            "year":2008,
-            "color":"Black"
-        },
-        {
-            "vin":"e9cb3677",
-            "brand":"BMW",
-            "year":2004,
-            "color":"Black"
-        },
-        {
-            "vin":"c9dc321d",
-            "brand":"BMW",
-            "year":1989,
-            "color":"Red"
-        },
-        {
-            "vin":"4c75c610",
-            "brand":"Volvo",
-            "year":1972,
-            "color":"Yellow"
-        },
-        {
-            "vin":"1c90c93d",
-            "brand":"Audi",
-            "year":2004,
-            "color":"Silver"
-        },
-        {
-            "vin":"5ccc9f7f",
-            "brand":"Jaguar",
-            "year":1961,
-            "color":"Red"
-        },
-        {
-            "vin":"94498bc0",
-            "brand":"Fiat",
-            "year":1965,
-            "color":"Silver"
-        },
-        {
-            "vin":"1d1a21f3",
-            "brand":"Honda",
-            "year":1985,
-            "color":"Red"
-        },
-        {
-            "vin":"ea463ad3",
-            "brand":"BMW",
-            "year":1992,
-            "color":"Blue"
-        },
-        {
-            "vin":"c24bdeb2",
-            "brand":"Honda",
-            "year":1991,
-            "color":"Red"
-        },
-        {
-            "vin":"af3b744b",
-            "brand":"Audi",
-            "year":1998,
-            "color":"Green"
-        },
-        {
-            "vin":"bebd5a96",
-            "brand":"Jaguar",
-            "year":1989,
-            "color":"Black"
-        },
-        {
-            "vin":"6ef9dbf3",
-            "brand":"Fiat",
-            "year":1962,
-            "color":"Orange"
-        },
-        {
-            "vin":"eede8f1e",
-            "brand":"Jaguar",
-            "year":1977,
-            "color":"Brown"
-        },
-        {
-            "vin":"9d11b02d",
-            "brand":"BMW",
-            "year":1971,
-            "color":"Yellow"
-        },
-        {
-            "vin":"1d4223a1",
-            "brand":"Mercedes",
-            "year":1975,
-            "color":"Brown"
-        },
-        {
-            "vin":"4d118346",
-            "brand":"Mercedes",
-            "year":1985,
-            "color":"Brown"
-        },
-        {
-            "vin":"cce76f06",
-            "brand":"Honda",
-            "year":1980,
-            "color":"Maroon"
-        },
-        {
-            "vin":"2af398ed",
-            "brand":"Renault",
-            "year":1970,
-            "color":"Yellow"
-        },
-        {
-            "vin":"c0ddab4c",
-            "brand":"Audi",
-            "year":2003,
-            "color":"Silver"
-        },
-        {
-            "vin":"a27ea639",
-            "brand":"Mercedes",
-            "year":1968,
-            "color":"Yellow"
-        },
-        {
-            "vin":"e6441f09",
-            "brand":"Jaguar",
-            "year":1982,
-            "color":"Green"
-        },
-        {
-            "vin":"c4c59d58",
-            "brand":"Fiat",
-            "year":2005,
-            "color":"Orange"
-        },
-        {
-            "vin":"9d31fc0a",
-            "brand":"Mercedes",
-            "year":1974,
-            "color":"Brown"
-        },
-        {
-            "vin":"b0ffce2d",
-            "brand":"Volvo",
-            "year":1966,
-            "color":"Yellow"
-        },
-        {
-            "vin":"ca7e52e3",
-            "brand":"Honda",
-            "year":1971,
-            "color":"Orange"
-        },
-        {
-            "vin":"56b36f0e",
-            "brand":"Mercedes",
-            "year":2008,
-            "color":"Orange"
-        },
-        {
-            "vin":"ba045e1e",
-            "brand":"Jaguar",
-            "year":1968,
-            "color":"White"
-        },
-        {
-            "vin":"fd579989",
-            "brand":"BMW",
-            "year":1975,
-            "color":"Black"
-        },
-        {
-            "vin":"084850a3",
-            "brand":"Audi",
-            "year":1990,
-            "color":"Red"
-        },
-        {
-            "vin":"e39245ab",
-            "brand":"BMW",
-            "year":1969,
-            "color":"White"
-        },
-        {
-            "vin":"41ab14a1",
-            "brand":"Jaguar",
-            "year":1987,
-            "color":"Silver"
-        },
-        {
-            "vin":"7ec4c1c0",
-            "brand":"Jaguar",
-            "year":1980,
-            "color":"Black"
-        },
-        {
-            "vin":"bf1c14aa",
-            "brand":"Audi",
-            "year":1984,
-            "color":"Yellow"
-        },
-        {
-            "vin":"adeff567",
-            "brand":"Volvo",
-            "year":2000,
-            "color":"Brown"
-        },
-        {
-            "vin":"61e5e07d",
-            "brand":"Mercedes",
-            "year":1978,
-            "color":"Orange"
-        },
-        {
-            "vin":"7555e46a",
-            "brand":"Audi",
-            "year":1966,
-            "color":"Blue"
-        },
-        {
-            "vin":"95babbd1",
-            "brand":"Honda",
-            "year":1998,
-            "color":"Black"
-        },
-        {
-            "vin":"ff6885f7",
-            "brand":"Audi",
-            "year":1996,
-            "color":"White"
-        },
-        {
-            "vin":"5b5a0031",
-            "brand":"Audi",
-            "year":1968,
-            "color":"Brown"
-        },
-        {
-            "vin":"de63c575",
-            "brand":"Mercedes",
-            "year":1989,
-            "color":"Yellow"
-        },
-        {
-            "vin":"6bf3bfbc",
-            "brand":"Audi",
-            "year":1968,
-            "color":"Green"
-        },
-        {
-            "vin":"d2d2e8d4",
-            "brand":"Fiat",
-            "year":1985,
-            "color":"Green"
-        },
-        {
-            "vin":"edcab1f7",
-            "brand":"VW",
-            "year":1979,
-            "color":"Silver"
-        },
-        {
-            "vin":"03234e20",
-            "brand":"Mercedes",
-            "year":1962,
-            "color":"Orange"
-        },
-        {
-            "vin":"de2a7b08",
-            "brand":"Honda",
-            "year":2007,
-            "color":"Blue"
-        },
-        {
-            "vin":"717b8282",
-            "brand":"BMW",
-            "year":1999,
-            "color":"Yellow"
-        },
-        {
-            "vin":"790e7f03",
-            "brand":"Volvo",
-            "year":1983,
-            "color":"White"
-        },
-        {
-            "vin":"8eefb223",
-            "brand":"Jaguar",
-            "year":1983,
-            "color":"Silver"
-        },
-        {
-            "vin":"5e524acd",
-            "brand":"Jaguar",
-            "year":1994,
-            "color":"Maroon"
-        },
-        {
-            "vin":"26b1aff9",
-            "brand":"BMW",
-            "year":1965,
-            "color":"Black"
-        },
-        {
-            "vin":"c007a623",
-            "brand":"Renault",
-            "year":1968,
-            "color":"Maroon"
-        },
-        {
-            "vin":"76733e83",
-            "brand":"Honda",
-            "year":1991,
-            "color":"White"
-        },
-        {
-            "vin":"ef3c14f7",
-            "brand":"Fiat",
-            "year":1987,
-            "color":"Brown"
-        },
-        {
-            "vin":"2b4ca005",
-            "brand":"Honda",
-            "year":2009,
-            "color":"Silver"
-        },
-        {
-            "vin":"8191dbb6",
-            "brand":"BMW",
-            "year":2005,
-            "color":"Black"
-        },
-        {
-            "vin":"f6b3bd94",
-            "brand":"Renault",
-            "year":1967,
-            "color":"Yellow"
-        },
-        {
-            "vin":"abb19f41",
-            "brand":"Volvo",
-            "year":1975,
-            "color":"Blue"
-        },
-        {
-            "vin":"7470c95f",
-            "brand":"Renault",
-            "year":1996,
-            "color":"Black"
-        },
-        {
-            "vin":"5f1b57a3",
-            "brand":"Volvo",
-            "year":1986,
-            "color":"Red"
-        },
-        {
-            "vin":"ed47a74b",
-            "brand":"BMW",
-            "year":2007,
-            "color":"Brown"
-        },
-        {
-            "vin":"ed6030f7",
-            "brand":"Honda",
-            "year":1990,
-            "color":"Red"
-        },
-        {
-            "vin":"944c71dc",
-            "brand":"Mercedes",
-            "year":1991,
-            "color":"Silver"
-        },
-        {
-            "vin":"c7d838a5",
-            "brand":"VW",
-            "year":1980,
-            "color":"Yellow"
-        },
-        {
-            "vin":"712db898",
-            "brand":"Audi",
-            "year":1965,
-            "color":"Red"
-        },
-        {
-            "vin":"99acc06f",
-            "brand":"BMW",
-            "year":1995,
-            "color":"Silver"
-        },
-        {
-            "vin":"6c68ffa5",
-            "brand":"Jaguar",
-            "year":1999,
-            "color":"Green"
-        },
-        {
-            "vin":"63893922",
-            "brand":"Renault",
-            "year":1991,
-            "color":"Brown"
-        },
-        {
-            "vin":"dca5f739",
-            "brand":"Jaguar",
-            "year":2002,
-            "color":"Blue"
-        },
-        {
-            "vin":"16da6dcb",
-            "brand":"Jaguar",
-            "year":2006,
-            "color":"Blue"
-        },
-        {
-            "vin":"fe9ca30c",
-            "brand":"Fiat",
-            "year":1967,
-            "color":"Maroon"
-        },
-        {
-            "vin":"f0193ac7",
-            "brand":"Mercedes",
-            "year":1979,
-            "color":"Orange"
-        },
-        {
-            "vin":"145f5551",
-            "brand":"Jaguar",
-            "year":1993,
-            "color":"Brown"
-        },
-        {
-            "vin":"24714317",
-            "brand":"Mercedes",
-            "year":1971,
-            "color":"White"
-        },
-        {
-            "vin":"1a9c6e4e",
-            "brand":"Jaguar",
-            "year":1997,
-            "color":"Yellow"
-        },
-        {
-            "vin":"c9b7ef72",
-            "brand":"Fiat",
-            "year":1992,
-            "color":"Maroon"
-        },
-        {
-            "vin":"b1b6c375",
-            "brand":"Fiat",
-            "year":1963,
-            "color":"Silver"
-        },
-        {
-            "vin":"7254a003",
-            "brand":"Audi",
-            "year":1982,
-            "color":"White"
-        },
-        {
-            "vin":"6f0de80f",
-            "brand":"Renault",
-            "year":1987,
-            "color":"Blue"
-        },
-        {
-            "vin":"e3048f87",
-            "brand":"Fiat",
-            "year":1989,
-            "color":"Blue"
-        },
-        {
-            "vin":"361e435a",
-            "brand":"BMW",
-            "year":1973,
-            "color":"Green"
-        },
-        {
-            "vin":"59e6a9f3",
-            "brand":"BMW",
-            "year":1964,
-            "color":"Maroon"
-        },
-        {
-            "vin":"b791fe05",
-            "brand":"Mercedes",
-            "year":1993,
-            "color":"Yellow"
-        },
-        {
-            "vin":"68b0dd88",
-            "brand":"BMW",
-            "year":2002,
-            "color":"Green"
-        },
-        {
-            "vin":"5b439d1f",
-            "brand":"BMW",
-            "year":1964,
-            "color":"Maroon"
-        },
-        {
-            "vin":"9a7ac9e3",
-            "brand":"Renault",
-            "year":1988,
-            "color":"White"
-        },
-        {
-            "vin":"d214751d",
-            "brand":"Honda",
-            "year":1997,
-            "color":"White"
-        },
-        {
-            "vin":"72229390",
-            "brand":"Mercedes",
-            "year":1996,
-            "color":"White"
-        },
-        {
-            "vin":"b5fbbeee",
-            "brand":"VW",
-            "year":1999,
-            "color":"Brown"
-        },
-        {
-            "vin":"8972b543",
-            "brand":"Audi",
-            "year":1973,
-            "color":"Black"
-        },
-        {
-            "vin":"7bc21024",
-            "brand":"Renault",
-            "year":1980,
-            "color":"Yellow"
-        },
-        {
-            "vin":"5d661964",
-            "brand":"Renault",
-            "year":2005,
-            "color":"Silver"
-        },
-        {
-            "vin":"a6ccc2d8",
-            "brand":"Honda",
-            "year":1994,
-            "color":"Blue"
-        },
-        {
-            "vin":"c1f15f28",
-            "brand":"Volvo",
-            "year":1999,
-            "color":"Black"
-        },
-        {
-            "vin":"161512ce",
-            "brand":"VW",
-            "year":1962,
-            "color":"Black"
-        },
-        {
-            "vin":"16e0b448",
-            "brand":"Fiat",
-            "year":1990,
-            "color":"Green"
-        },
-        {
-            "vin":"f0734442",
-            "brand":"Audi",
-            "year":1966,
-            "color":"Orange"
-        },
-        {
-            "vin":"5e233279",
-            "brand":"Audi",
-            "year":1964,
-            "color":"Green"
-        },
-        {
-            "vin":"1de720b2",
-            "brand":"Renault",
-            "year":2003,
-            "color":"Orange"
-        },
-        {
-            "vin":"46efaeb2",
-            "brand":"Jaguar",
-            "year":1993,
-            "color":"Green"
-        },
-        {
-            "vin":"88f2354c",
-            "brand":"Jaguar",
-            "year":2006,
-            "color":"Black"
-        },
-        {
-            "vin":"04819fd6",
-            "brand":"Mercedes",
-            "year":1983,
-            "color":"White"
-        },
-        {
-            "vin":"401771c8",
-            "brand":"Volvo",
-            "year":1962,
-            "color":"Silver"
-        },
-        {
-            "vin":"8600877b",
-            "brand":"VW",
-            "year":1996,
-            "color":"Black"
-        },
-        {
-            "vin":"946bd645",
-            "brand":"Honda",
-            "year":1991,
-            "color":"Red"
-        },
-        {
-            "vin":"ad078e69",
-            "brand":"Fiat",
-            "year":1991,
-            "color":"Brown"
-        },
-        {
-            "vin":"93138901",
-            "brand":"Mercedes",
-            "year":1961,
-            "color":"Silver"
-        },
-        {
-            "vin":"f365dfa4",
-            "brand":"Mercedes",
-            "year":1980,
-            "color":"Black"
-        },
-        {
-            "vin":"22647161",
-            "brand":"Audi",
-            "year":2007,
-            "color":"Blue"
-        },
-        {
-            "vin":"92d1ee27",
-            "brand":"Jaguar",
-            "year":1977,
-            "color":"Silver"
-        },
-        {
-            "vin":"137c2b3a",
-            "brand":"Honda",
-            "year":1970,
-            "color":"Blue"
-        },
-        {
-            "vin":"b05b5235",
-            "brand":"BMW",
-            "year":1967,
-            "color":"Yellow"
-        },
-        {
-            "vin":"1afbf400",
-            "brand":"Audi",
-            "year":1966,
-            "color":"Maroon"
-        },
-        {
-            "vin":"8530ae50",
-            "brand":"BMW",
-            "year":1979,
-            "color":"Brown"
-        },
-        {
-            "vin":"c9a487a3",
-            "brand":"Volvo",
-            "year":1981,
-            "color":"Silver"
-        },
-        {
-            "vin":"5cb0bed6",
-            "brand":"Honda",
-            "year":1962,
-            "color":"Orange"
-        },
-        {
-            "vin":"cf7d0b45",
-            "brand":"Fiat",
-            "year":1997,
-            "color":"Green"
-        },
-        {
-            "vin":"bc762dd0",
-            "brand":"Jaguar",
-            "year":2000,
-            "color":"Yellow"
-        },
-        {
-            "vin":"97207a61",
-            "brand":"VW",
-            "year":1976,
-            "color":"Blue"
-        },
-        {
-            "vin":"17680899",
-            "brand":"Mercedes",
-            "year":2006,
-            "color":"Silver"
-        },
-        {
-            "vin":"d8a98d30",
-            "brand":"Renault",
-            "year":1990,
-            "color":"Green"
-        },
-        {
-            "vin":"ff01ead0",
-            "brand":"Audi",
-            "year":1962,
-            "color":"Blue"
-        },
-        {
-            "vin":"38b30a61",
-            "brand":"Fiat",
-            "year":1977,
-            "color":"White"
-        },
-        {
-            "vin":"9a6793c1",
-            "brand":"Renault",
-            "year":1983,
-            "color":"Red"
-        },
-        {
-            "vin":"b1f27273",
-            "brand":"Mercedes",
-            "year":2007,
-            "color":"Brown"
-        },
-        {
-            "vin":"0fa8c1aa",
-            "brand":"Jaguar",
-            "year":1982,
-            "color":"Blue"
-        },
-        {
-            "vin":"a7520f42",
-            "brand":"Volvo",
-            "year":2008,
-            "color":"Maroon"
-        },
-        {
-            "vin":"494eba81",
-            "brand":"BMW",
-            "year":1966,
-            "color":"Silver"
-        },
-        {
-            "vin":"683535b8",
-            "brand":"Renault",
-            "year":2003,
-            "color":"White"
-        },
-        {
-            "vin":"62e5d216",
-            "brand":"Audi",
-            "year":1962,
-            "color":"Orange"
-        },
-        {
-            "vin":"16a65b56",
-            "brand":"Jaguar",
-            "year":2009,
-            "color":"Blue"
-        },
-        {
-            "vin":"d00250a3",
-            "brand":"BMW",
-            "year":1978,
-            "color":"Blue"
-        },
-        {
-            "vin":"f3c3909d",
-            "brand":"Renault",
-            "year":2003,
-            "color":"Green"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/cars-medium.json b/public/showcase/resources/demo/data/cars-medium.json
deleted file mode 100644
index cf68699732..0000000000
--- a/public/showcase/resources/demo/data/cars-medium.json
+++ /dev/null
@@ -1,54 +0,0 @@
-{
-    "data":[
-        {"vin":"a1653d4d","brand":"VW","year":1998,"color":"White","price":10000},
-        {"vin":"ddeb9b10","brand":"Mercedes","year":1985,"color":"Green","price":25000},
-        {"vin":"d8ebe413","brand":"Jaguar","year":1979,"color":"Silver","price":30000},
-        {"vin":"aab227b7","brand":"Audi","year":1970,"color":"Black","price":12000},
-        {"vin":"631f7412","brand":"Volvo","year":1992,"color":"Red","price":15500},
-        {"vin":"7d2d22b0","brand":"VW","year":1993,"color":"Maroon","price":40000},
-        {"vin":"50e900ca","brand":"Fiat","year":1964,"color":"Blue","price":25000},
-        {"vin":"4bbcd603","brand":"Renault","year":1983,"color":"Maroon","price":22000},
-        {"vin":"70214c7e","brand":"Renault","year":1961,"color":"Black","price":19000},
-        {"vin":"ec229a92","brand":"Audi","year":1984,"color":"Brown","price":36000},
-        {"vin":"1083ee40","brand":"VW","year":1984,"color":"Silver","price":215000},
-        {"vin":"6e0da3ab","brand":"Volvo","year":1987,"color":"Silver","price":32000},
-        {"vin":"5aee636b","brand":"Jaguar","year":1995,"color":"Maroon","price":20000},
-        {"vin":"7cc43997","brand":"Jaguar","year":1984,"color":"Orange","price":14000},
-        {"vin":"88ec9f66","brand":"Honda","year":1989,"color":"Maroon","price":36000},
-        {"vin":"f5a4a5f5","brand":"BMW","year":1986,"color":"Blue","price":28000},
-        {"vin":"15b9a5c9","brand":"Mercedes","year":1986,"color":"Orange","price":14000},
-        {"vin":"f7e18d01","brand":"Mercedes","year":1991,"color":"White","price":25000},
-        {"vin":"cec593d7","brand":"VW","year":1992,"color":"Blue","price":36000},
-        {"vin":"d5bac4f0","brand":"Renault","year":2001,"color":"Blue","price":25000},
-        {"vin":"56b527c8","brand":"Jaguar","year":1990,"color":"Yellow","price":52000},
-        {"vin":"1ac011ff","brand":"Audi","year":1966,"color":"Maroon","price":45000},
-        {"vin":"fc074185","brand":"BMW","year":1962,"color":"Blue","price":54000},
-        {"vin":"606ba663","brand":"Honda","year":1982,"color":"Blue","price":22000},
-        {"vin":"d05060b8","brand":"Mercedes","year":2003,"color":"Silver","price":15000},
-        {"vin":"46e4bbe8","brand":"Mercedes","year":1986,"color":"White","price":18000},
-        {"vin":"c29da0d7","brand":"BMW","year":1983,"color":"Brown","price":32000},
-        {"vin":"24622f70","brand":"VW","year":1973,"color":"Maroon","price":36000},
-        {"vin":"7f573d2c","brand":"Mercedes","year":1991,"color":"Red","price":21000},
-        {"vin":"b69e6f5c","brand":"Jaguar","year":1993,"color":"Yellow","price":16000},
-        {"vin":"ead9bf1d","brand":"Fiat","year":1968,"color":"Maroon","price":43000},
-        {"vin":"bc58113e","brand":"Renault","year":1981,"color":"Silver","price":36000},
-        {"vin":"2989d5b1","brand":"Honda","year":2006,"color":"Blue","price":240000},
-        {"vin":"c243e3a0","brand":"Fiat","year":1990,"color":"Maroon","price":15000},
-        {"vin":"e3d3ebf3","brand":"Audi","year":1996,"color":"White","price":28000},
-        {"vin":"45337e7a","brand":"Mercedes","year":1982,"color":"Blue","price":14000},
-        {"vin":"36e9cf7e","brand":"Fiat","year":2000,"color":"Orange","price":26000},
-        {"vin":"036bf135","brand":"Mercedes","year":1973,"color":"Black","price":22000},
-        {"vin":"ad612e9f","brand":"Mercedes","year":1975,"color":"Red","price":45000},
-        {"vin":"97c6e1e9","brand":"Volvo","year":1967,"color":"Green","price":42000},
-        {"vin":"ae962274","brand":"Volvo","year":1982,"color":"Red","price":36000},
-        {"vin":"81f8972a","brand":"BMW","year":2007,"color":"Black","price":56000},
-        {"vin":"f8506743","brand":"Audi","year":1975,"color":"Blue","price":42000},
-        {"vin":"596859d1","brand":"Fiat","year":2002,"color":"Green","price":48000},
-        {"vin":"d83c1d9a","brand":"Volvo","year":1972,"color":"Black","price":29000},
-        {"vin":"32f41550","brand":"Mercedes","year":1978,"color":"Brown","price":17000},
-        {"vin":"c28cd2e4","brand":"Volvo","year":1982,"color":"Silver","price":24000},
-        {"vin":"80890dcc","brand":"Audi","year":1962,"color":"White","price":36000},
-        {"vin":"4bf1aeb5","brand":"VW","year":2000,"color":"Silver","price":24000},
-        {"vin":"45ca4786","brand":"BMW","year":1995,"color":"Maroon","price":50000}
-    ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/cars-small.json b/public/showcase/resources/demo/data/cars-small.json
deleted file mode 100644
index 7a2bc59ef6..0000000000
--- a/public/showcase/resources/demo/data/cars-small.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-    "data": [
-        {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
-        {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
-        {"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
-        {"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
-        {"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
-        {"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
-        {"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
-        {"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
-        {"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
-        {"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
-    ]
-}
diff --git a/public/showcase/resources/demo/data/countries.json b/public/showcase/resources/demo/data/countries.json
deleted file mode 100644
index bf5bf652fe..0000000000
--- a/public/showcase/resources/demo/data/countries.json
+++ /dev/null
@@ -1,247 +0,0 @@
-{
-    "data": [ 
-        {"name": "Afghanistan", "code": "AF"}, 
-        {"name": "Åland Islands", "code": "AX"}, 
-        {"name": "Albania", "code": "AL"}, 
-        {"name": "Algeria", "code": "DZ"}, 
-        {"name": "American Samoa", "code": "AS"}, 
-        {"name": "Andorra", "code": "AD"}, 
-        {"name": "Angola", "code": "AO"}, 
-        {"name": "Anguilla", "code": "AI"}, 
-        {"name": "Antarctica", "code": "AQ"}, 
-        {"name": "Antigua and Barbuda", "code": "AG"}, 
-        {"name": "Argentina", "code": "AR"}, 
-        {"name": "Armenia", "code": "AM"}, 
-        {"name": "Aruba", "code": "AW"}, 
-        {"name": "Australia", "code": "AU"}, 
-        {"name": "Austria", "code": "AT"}, 
-        {"name": "Azerbaijan", "code": "AZ"}, 
-        {"name": "Bahamas", "code": "BS"}, 
-        {"name": "Bahrain", "code": "BH"}, 
-        {"name": "Bangladesh", "code": "BD"}, 
-        {"name": "Barbados", "code": "BB"}, 
-        {"name": "Belarus", "code": "BY"}, 
-        {"name": "Belgium", "code": "BE"}, 
-        {"name": "Belize", "code": "BZ"}, 
-        {"name": "Benin", "code": "BJ"}, 
-        {"name": "Bermuda", "code": "BM"}, 
-        {"name": "Bhutan", "code": "BT"}, 
-        {"name": "Bolivia", "code": "BO"}, 
-        {"name": "Bosnia and Herzegovina", "code": "BA"}, 
-        {"name": "Botswana", "code": "BW"}, 
-        {"name": "Bouvet Island", "code": "BV"}, 
-        {"name": "Brazil", "code": "BR"}, 
-        {"name": "British Indian Ocean Territory", "code": "IO"}, 
-        {"name": "Brunei Darussalam", "code": "BN"}, 
-        {"name": "Bulgaria", "code": "BG"}, 
-        {"name": "Burkina Faso", "code": "BF"}, 
-        {"name": "Burundi", "code": "BI"}, 
-        {"name": "Cambodia", "code": "KH"}, 
-        {"name": "Cameroon", "code": "CM"}, 
-        {"name": "Canada", "code": "CA"}, 
-        {"name": "Cape Verde", "code": "CV"}, 
-        {"name": "Cayman Islands", "code": "KY"}, 
-        {"name": "Central African Republic", "code": "CF"}, 
-        {"name": "Chad", "code": "TD"}, 
-        {"name": "Chile", "code": "CL"}, 
-        {"name": "China", "code": "CN"}, 
-        {"name": "Christmas Island", "code": "CX"}, 
-        {"name": "Cocos (Keeling) Islands", "code": "CC"}, 
-        {"name": "Colombia", "code": "CO"}, 
-        {"name": "Comoros", "code": "KM"}, 
-        {"name": "Congo", "code": "CG"}, 
-        {"name": "Congo, The Democratic Republic of the", "code": "CD"}, 
-        {"name": "Cook Islands", "code": "CK"}, 
-        {"name": "Costa Rica", "code": "CR"}, 
-        {"name": "Cote D\"Ivoire", "code": "CI"}, 
-        {"name": "Croatia", "code": "HR"}, 
-        {"name": "Cuba", "code": "CU"}, 
-        {"name": "Cyprus", "code": "CY"}, 
-        {"name": "Czech Republic", "code": "CZ"}, 
-        {"name": "Denmark", "code": "DK"}, 
-        {"name": "Djibouti", "code": "DJ"}, 
-        {"name": "Dominica", "code": "DM"}, 
-        {"name": "Dominican Republic", "code": "DO"}, 
-        {"name": "Ecuador", "code": "EC"}, 
-        {"name": "Egypt", "code": "EG"}, 
-        {"name": "El Salvador", "code": "SV"}, 
-        {"name": "Equatorial Guinea", "code": "GQ"}, 
-        {"name": "Eritrea", "code": "ER"}, 
-        {"name": "Estonia", "code": "EE"}, 
-        {"name": "Ethiopia", "code": "ET"}, 
-        {"name": "Falkland Islands (Malvinas)", "code": "FK"}, 
-        {"name": "Faroe Islands", "code": "FO"}, 
-        {"name": "Fiji", "code": "FJ"}, 
-        {"name": "Finland", "code": "FI"}, 
-        {"name": "France", "code": "FR"}, 
-        {"name": "French Guiana", "code": "GF"}, 
-        {"name": "French Polynesia", "code": "PF"}, 
-        {"name": "French Southern Territories", "code": "TF"}, 
-        {"name": "Gabon", "code": "GA"}, 
-        {"name": "Gambia", "code": "GM"}, 
-        {"name": "Georgia", "code": "GE"}, 
-        {"name": "Germany", "code": "DE"}, 
-        {"name": "Ghana", "code": "GH"}, 
-        {"name": "Gibraltar", "code": "GI"}, 
-        {"name": "Greece", "code": "GR"}, 
-        {"name": "Greenland", "code": "GL"}, 
-        {"name": "Grenada", "code": "GD"}, 
-        {"name": "Guadeloupe", "code": "GP"}, 
-        {"name": "Guam", "code": "GU"}, 
-        {"name": "Guatemala", "code": "GT"}, 
-        {"name": "Guernsey", "code": "GG"}, 
-        {"name": "Guinea", "code": "GN"}, 
-        {"name": "Guinea-Bissau", "code": "GW"}, 
-        {"name": "Guyana", "code": "GY"}, 
-        {"name": "Haiti", "code": "HT"}, 
-        {"name": "Heard Island and Mcdonald Islands", "code": "HM"}, 
-        {"name": "Holy See (Vatican City State)", "code": "VA"}, 
-        {"name": "Honduras", "code": "HN"}, 
-        {"name": "Hong Kong", "code": "HK"}, 
-        {"name": "Hungary", "code": "HU"}, 
-        {"name": "Iceland", "code": "IS"}, 
-        {"name": "India", "code": "IN"}, 
-        {"name": "Indonesia", "code": "ID"}, 
-        {"name": "Iran, Islamic Republic Of", "code": "IR"}, 
-        {"name": "Iraq", "code": "IQ"}, 
-        {"name": "Ireland", "code": "IE"}, 
-        {"name": "Isle of Man", "code": "IM"}, 
-        {"name": "Israel", "code": "IL"}, 
-        {"name": "Italy", "code": "IT"}, 
-        {"name": "Jamaica", "code": "JM"}, 
-        {"name": "Japan", "code": "JP"}, 
-        {"name": "Jersey", "code": "JE"}, 
-        {"name": "Jordan", "code": "JO"}, 
-        {"name": "Kazakhstan", "code": "KZ"}, 
-        {"name": "Kenya", "code": "KE"}, 
-        {"name": "Kiribati", "code": "KI"}, 
-        {"name": "Korea, Democratic People\"S Republic of", "code": "KP"}, 
-        {"name": "Korea, Republic of", "code": "KR"}, 
-        {"name": "Kuwait", "code": "KW"}, 
-        {"name": "Kyrgyzstan", "code": "KG"}, 
-        {"name": "Lao People\"S Democratic Republic", "code": "LA"}, 
-        {"name": "Latvia", "code": "LV"}, 
-        {"name": "Lebanon", "code": "LB"}, 
-        {"name": "Lesotho", "code": "LS"}, 
-        {"name": "Liberia", "code": "LR"}, 
-        {"name": "Libyan Arab Jamahiriya", "code": "LY"}, 
-        {"name": "Liechtenstein", "code": "LI"}, 
-        {"name": "Lithuania", "code": "LT"}, 
-        {"name": "Luxembourg", "code": "LU"}, 
-        {"name": "Macao", "code": "MO"}, 
-        {"name": "Macedonia, The Former Yugoslav Republic of", "code": "MK"}, 
-        {"name": "Madagascar", "code": "MG"}, 
-        {"name": "Malawi", "code": "MW"}, 
-        {"name": "Malaysia", "code": "MY"}, 
-        {"name": "Maldives", "code": "MV"}, 
-        {"name": "Mali", "code": "ML"}, 
-        {"name": "Malta", "code": "MT"}, 
-        {"name": "Marshall Islands", "code": "MH"}, 
-        {"name": "Martinique", "code": "MQ"}, 
-        {"name": "Mauritania", "code": "MR"}, 
-        {"name": "Mauritius", "code": "MU"}, 
-        {"name": "Mayotte", "code": "YT"}, 
-        {"name": "Mexico", "code": "MX"}, 
-        {"name": "Micronesia, Federated States of", "code": "FM"}, 
-        {"name": "Moldova, Republic of", "code": "MD"}, 
-        {"name": "Monaco", "code": "MC"}, 
-        {"name": "Mongolia", "code": "MN"}, 
-        {"name": "Montserrat", "code": "MS"}, 
-        {"name": "Morocco", "code": "MA"}, 
-        {"name": "Mozambique", "code": "MZ"}, 
-        {"name": "Myanmar", "code": "MM"}, 
-        {"name": "Namibia", "code": "NA"}, 
-        {"name": "Nauru", "code": "NR"}, 
-        {"name": "Nepal", "code": "NP"}, 
-        {"name": "Netherlands", "code": "NL"}, 
-        {"name": "Netherlands Antilles", "code": "AN"}, 
-        {"name": "New Caledonia", "code": "NC"}, 
-        {"name": "New Zealand", "code": "NZ"}, 
-        {"name": "Nicaragua", "code": "NI"}, 
-        {"name": "Niger", "code": "NE"}, 
-        {"name": "Nigeria", "code": "NG"}, 
-        {"name": "Niue", "code": "NU"}, 
-        {"name": "Norfolk Island", "code": "NF"}, 
-        {"name": "Northern Mariana Islands", "code": "MP"}, 
-        {"name": "Norway", "code": "NO"}, 
-        {"name": "Oman", "code": "OM"}, 
-        {"name": "Pakistan", "code": "PK"}, 
-        {"name": "Palau", "code": "PW"}, 
-        {"name": "Palestinian Territory, Occupied", "code": "PS"}, 
-        {"name": "Panama", "code": "PA"}, 
-        {"name": "Papua New Guinea", "code": "PG"}, 
-        {"name": "Paraguay", "code": "PY"}, 
-        {"name": "Peru", "code": "PE"}, 
-        {"name": "Philippines", "code": "PH"}, 
-        {"name": "Pitcairn", "code": "PN"}, 
-        {"name": "Poland", "code": "PL"}, 
-        {"name": "Portugal", "code": "PT"}, 
-        {"name": "Puerto Rico", "code": "PR"}, 
-        {"name": "Qatar", "code": "QA"}, 
-        {"name": "Reunion", "code": "RE"}, 
-        {"name": "Romania", "code": "RO"}, 
-        {"name": "Russian Federation", "code": "RU"}, 
-        {"name": "RWANDA", "code": "RW"}, 
-        {"name": "Saint Helena", "code": "SH"}, 
-        {"name": "Saint Kitts and Nevis", "code": "KN"}, 
-        {"name": "Saint Lucia", "code": "LC"}, 
-        {"name": "Saint Pierre and Miquelon", "code": "PM"}, 
-        {"name": "Saint Vincent and the Grenadines", "code": "VC"}, 
-        {"name": "Samoa", "code": "WS"}, 
-        {"name": "San Marino", "code": "SM"}, 
-        {"name": "Sao Tome and Principe", "code": "ST"}, 
-        {"name": "Saudi Arabia", "code": "SA"}, 
-        {"name": "Senegal", "code": "SN"}, 
-        {"name": "Serbia and Montenegro", "code": "CS"}, 
-        {"name": "Seychelles", "code": "SC"}, 
-        {"name": "Sierra Leone", "code": "SL"}, 
-        {"name": "Singapore", "code": "SG"}, 
-        {"name": "Slovakia", "code": "SK"}, 
-        {"name": "Slovenia", "code": "SI"}, 
-        {"name": "Solomon Islands", "code": "SB"}, 
-        {"name": "Somalia", "code": "SO"}, 
-        {"name": "South Africa", "code": "ZA"}, 
-        {"name": "South Georgia and the South Sandwich Islands", "code": "GS"}, 
-        {"name": "Spain", "code": "ES"}, 
-        {"name": "Sri Lanka", "code": "LK"}, 
-        {"name": "Sudan", "code": "SD"}, 
-        {"name": "Suriname", "code": "SR"}, 
-        {"name": "Svalbard and Jan Mayen", "code": "SJ"}, 
-        {"name": "Swaziland", "code": "SZ"}, 
-        {"name": "Sweden", "code": "SE"}, 
-        {"name": "Switzerland", "code": "CH"}, 
-        {"name": "Syrian Arab Republic", "code": "SY"}, 
-        {"name": "Taiwan, Province of China", "code": "TW"}, 
-        {"name": "Tajikistan", "code": "TJ"}, 
-        {"name": "Tanzania, United Republic of", "code": "TZ"}, 
-        {"name": "Thailand", "code": "TH"}, 
-        {"name": "Timor-Leste", "code": "TL"}, 
-        {"name": "Togo", "code": "TG"}, 
-        {"name": "Tokelau", "code": "TK"}, 
-        {"name": "Tonga", "code": "TO"}, 
-        {"name": "Trinidad and Tobago", "code": "TT"}, 
-        {"name": "Tunisia", "code": "TN"}, 
-        {"name": "Turkey", "code": "TR"}, 
-        {"name": "Turkmenistan", "code": "TM"}, 
-        {"name": "Turks and Caicos Islands", "code": "TC"}, 
-        {"name": "Tuvalu", "code": "TV"}, 
-        {"name": "Uganda", "code": "UG"}, 
-        {"name": "Ukraine", "code": "UA"}, 
-        {"name": "United Arab Emirates", "code": "AE"}, 
-        {"name": "United Kingdom", "code": "GB"}, 
-        {"name": "United States", "code": "US"}, 
-        {"name": "United States Minor Outlying Islands", "code": "UM"}, 
-        {"name": "Uruguay", "code": "UY"}, 
-        {"name": "Uzbekistan", "code": "UZ"}, 
-        {"name": "Vanuatu", "code": "VU"}, 
-        {"name": "Venezuela", "code": "VE"}, 
-        {"name": "Viet Nam", "code": "VN"}, 
-        {"name": "Virgin Islands, British", "code": "VG"}, 
-        {"name": "Virgin Islands, U.S.", "code": "VI"}, 
-        {"name": "Wallis and Futuna", "code": "WF"}, 
-        {"name": "Western Sahara", "code": "EH"}, 
-        {"name": "Yemen", "code": "YE"}, 
-        {"name": "Zambia", "code": "ZM"}, 
-        {"name": "Zimbabwe", "code": "ZW"} 
-    ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/customers-large.json b/public/showcase/resources/demo/data/customers-large.json
deleted file mode 100644
index f8ef80338d..0000000000
--- a/public/showcase/resources/demo/data/customers-large.json
+++ /dev/null
@@ -1,3204 +0,0 @@
-{
-    "data": [
-    {
-      "id": 1000,
-      "name": "James Butt",
-      "country": {
-        "name": "Algeria",
-        "code": "dz"
-      },
-      "company": "Benton, John B Jr",
-      "date": "2015-09-13",
-      "status": "unqualified",
-      "activity": 17,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1001,
-      "name": "Josephine Darakjy",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chanay, Jeffrey A Esq",
-      "date": "2019-02-09",
-      "status": "proposal",
-      "activity": 0,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1002,
-      "name": "Art Venere",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Chemel, James L Cpa",
-      "date": "2017-05-13",
-      "status": "qualified",
-      "activity": 63,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1003,
-      "name": "Lenna Paprocki",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Feltz Printing Service",
-      "date": "2020-09-15",
-      "status": "new",
-      "activity": 37,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1004,
-      "name": "Donette Foller",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Printing Dimensions",
-      "date": "2016-05-20",
-      "status": "proposal",
-      "activity": 33,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1005,
-      "name": "Simona Morasca",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chapman, Ross E Esq",
-      "date": "2018-02-16",
-      "status": "qualified",
-      "activity": 68,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1006,
-      "name": "Mitsue Tollner",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Morlong Associates",
-      "date": "2018-02-19",
-      "status": "renewal",
-      "activity": 54,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1007,
-      "name": "Leota Dilliard",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Commercial Press",
-      "date": "2019-08-13",
-      "status": "renewal",
-      "activity": 69,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1008,
-      "name": "Sage Wieser",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Truhlar And Truhlar Attys",
-      "date": "2018-11-21",
-      "status": "unqualified",
-      "activity": 76,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1009,
-      "name": "Kris Marrier",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "King, Christopher A Esq",
-      "date": "2015-07-07",
-      "status": "proposal",
-      "activity": 3,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1010,
-      "name": "Minna Amigon",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Dorl, James J Esq",
-      "date": "2018-11-07",
-      "status": "qualified",
-      "activity": 38,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1011,
-      "name": "Abel Maclead",
-      "country": {
-        "name": "Singapore",
-        "code": "sg"
-      },
-      "company": "Rangoni Of Florence",
-      "date": "2017-03-11",
-      "status": "qualified",
-      "activity": 87,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1012,
-      "name": "Kiley Caldarera",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Feiner Bros",
-      "date": "2015-10-20",
-      "status": "unqualified",
-      "activity": 80,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1013,
-      "name": "Graciela Ruta",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "Buckley Miller \u0026 Wright",
-      "date": "2016-07-25",
-      "status": "negotiation",
-      "activity": 59,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1014,
-      "name": "Cammy Albares",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Rousseaux, Michael Esq",
-      "date": "2019-06-25",
-      "status": "new",
-      "activity": 90,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1015,
-      "name": "Mattie Poquette",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Century Communications",
-      "date": "2017-12-12",
-      "status": "negotiation",
-      "activity": 52,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1016,
-      "name": "Meaghan Garufi",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Bolton, Wilbur Esq",
-      "date": "2018-07-04",
-      "status": "unqualified",
-      "activity": 31,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1017,
-      "name": "Gladys Rim",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "T M Byxbee Company Pc",
-      "date": "2020-02-27",
-      "status": "renewal",
-      "activity": 48,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1018,
-      "name": "Yuki Whobrey",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Farmers Insurance Group",
-      "date": "2017-12-21",
-      "status": "negotiation",
-      "activity": 16,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1019,
-      "name": "Fletcher Flosi",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Post Box Services Plus",
-      "date": "2016-01-04",
-      "status": "renewal",
-      "activity": 19,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1020,
-      "name": "Bette Nicka",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Sport En Art",
-      "date": "2016-10-21",
-      "status": "renewal",
-      "activity": 100,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1021,
-      "name": "Veronika Inouye",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "C 4 Network Inc",
-      "date": "2017-03-24",
-      "status": "renewal",
-      "activity": 72,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1022,
-      "name": "Willard Kolmetz",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Ingalls, Donald R Esq",
-      "date": "2017-04-15",
-      "status": "renewal",
-      "activity": 94,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1023,
-      "name": "Maryann Royster",
-      "country": {
-        "name": "Belarus",
-        "code": "by"
-      },
-      "company": "Franklin, Peter L Esq",
-      "date": "2017-03-11",
-      "status": "qualified",
-      "activity": 56,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1024,
-      "name": "Alisha Slusarski",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Wtlz Power 107 Fm",
-      "date": "2018-03-27",
-      "status": "qualified",
-      "activity": 7,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1025,
-      "name": "Allene Iturbide",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Ledecky, David Esq",
-      "date": "2016-02-20",
-      "status": "qualified",
-      "activity": 1,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1026,
-      "name": "Chanel Caudy",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Professional Image Inc",
-      "date": "2018-06-24",
-      "status": "new",
-      "activity": 26,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1027,
-      "name": "Ezekiel Chui",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Sider, Donald C Esq",
-      "date": "2016-09-24",
-      "status": "new",
-      "activity": 76,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1028,
-      "name": "Willow Kusko",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "U Pull It",
-      "date": "2020-04-11",
-      "status": "qualified",
-      "activity": 7,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1029,
-      "name": "Bernardo Figeroa",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Clark, Richard Cpa",
-      "date": "2018-04-11",
-      "status": "renewal",
-      "activity": 81,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1030,
-      "name": "Ammie Corrio",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Moskowitz, Barry S",
-      "date": "2016-06-11",
-      "status": "negotiation",
-      "activity": 56,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1031,
-      "name": "Francine Vocelka",
-      "country": {
-        "name": "Honduras",
-        "code": "hn"
-      },
-      "company": "Cascade Realty Advisors Inc",
-      "date": "2017-08-02",
-      "status": "qualified",
-      "activity": 94,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1032,
-      "name": "Ernie Stenseth",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Knwz Newsradio",
-      "date": "2018-06-06",
-      "status": "renewal",
-      "activity": 68,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1033,
-      "name": "Albina Glick",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Giampetro, Anthony D",
-      "date": "2019-08-08",
-      "status": "proposal",
-      "activity": 85,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1034,
-      "name": "Alishia Sergi",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "Milford Enterprises Inc",
-      "date": "2018-05-19",
-      "status": "negotiation",
-      "activity": 46,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1035,
-      "name": "Solange Shinko",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Mosocco, Ronald A",
-      "date": "2015-02-12",
-      "status": "qualified",
-      "activity": 32,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1036,
-      "name": "Jose Stockham",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Tri State Refueler Co",
-      "date": "2018-04-25",
-      "status": "qualified",
-      "activity": 77,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1037,
-      "name": "Rozella Ostrosky",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Parkway Company",
-      "date": "2016-02-27",
-      "status": "unqualified",
-      "activity": 66,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1038,
-      "name": "Valentine Gillian",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Fbs Business Finance",
-      "date": "2019-09-17",
-      "status": "qualified",
-      "activity": 25,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1039,
-      "name": "Kati Rulapaugh",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "Eder Assocs Consltng Engrs Pc",
-      "date": "2016-12-03",
-      "status": "renewal",
-      "activity": 51,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1040,
-      "name": "Youlanda Schemmer",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Tri M Tool Inc",
-      "date": "2017-12-15",
-      "status": "negotiation",
-      "activity": 49,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1041,
-      "name": "Dyan Oldroyd",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "International Eyelets Inc",
-      "date": "2017-02-02",
-      "status": "qualified",
-      "activity": 5,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1042,
-      "name": "Roxane Campain",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Rapid Trading Intl",
-      "date": "2018-12-25",
-      "status": "unqualified",
-      "activity": 100,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1043,
-      "name": "Lavera Perin",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Abc Enterprises Inc",
-      "date": "2018-04-10",
-      "status": "qualified",
-      "activity": 71,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1044,
-      "name": "Erick Ferencz",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Cindy Turner Associates",
-      "date": "2018-05-06",
-      "status": "unqualified",
-      "activity": 54,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1045,
-      "name": "Fatima Saylors",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Stanton, James D Esq",
-      "date": "2019-07-10",
-      "status": "renewal",
-      "activity": 93,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1046,
-      "name": "Jina Briddick",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Grace Pastries Inc",
-      "date": "2018-02-19",
-      "status": "unqualified",
-      "activity": 97,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1047,
-      "name": "Kanisha Waycott",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Schroer, Gene E Esq",
-      "date": "2019-11-27",
-      "status": "new",
-      "activity": 80,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1048,
-      "name": "Emerson Bowley",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Knights Inn",
-      "date": "2018-11-24",
-      "status": "new",
-      "activity": 63,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1049,
-      "name": "Blair Malet",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Bollinger Mach Shp \u0026 Shipyard",
-      "date": "2018-04-19",
-      "status": "new",
-      "activity": 92,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1050,
-      "name": "Brock Bolognia",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Orinda News",
-      "date": "2019-09-06",
-      "status": "renewal",
-      "activity": 72,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1051,
-      "name": "Lorrie Nestle",
-      "country": {
-        "name": "Germany",
-        "code": "de"
-      },
-      "company": "Ballard Spahr Andrews",
-      "date": "2018-04-26",
-      "status": "renewal",
-      "activity": 36,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1052,
-      "name": "Sabra Uyetake",
-      "country": {
-        "name": "Peru",
-        "code": "pe"
-      },
-      "company": "Lowy Limousine Service",
-      "date": "2018-04-12",
-      "status": "new",
-      "activity": 31,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1053,
-      "name": "Marjory Mastella",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Vicon Corporation",
-      "date": "2018-01-24",
-      "status": "negotiation",
-      "activity": 89,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1054,
-      "name": "Karl Klonowski",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Rossi, Michael M",
-      "date": "2017-04-17",
-      "status": "unqualified",
-      "activity": 27,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1055,
-      "name": "Tonette Wenner",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Northwest Publishing",
-      "date": "2019-04-14",
-      "status": "qualified",
-      "activity": 27,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1056,
-      "name": "Amber Monarrez",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Branford Wire \u0026 Mfg Co",
-      "date": "2019-09-09",
-      "status": "new",
-      "activity": 79,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1057,
-      "name": "Shenika Seewald",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "East Coast Marketing",
-      "date": "2017-02-18",
-      "status": "renewal",
-      "activity": 39,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1058,
-      "name": "Delmy Ahle",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Wye Technologies Inc",
-      "date": "2020-10-05",
-      "status": "unqualified",
-      "activity": 55,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1059,
-      "name": "Deeanna Juhas",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Healy, George W Iv",
-      "date": "2018-09-28",
-      "status": "negotiation",
-      "activity": 79,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1060,
-      "name": "Blondell Pugh",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Alpenlite Inc",
-      "date": "2016-06-16",
-      "status": "renewal",
-      "activity": 49,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1061,
-      "name": "Jamal Vanausdal",
-      "country": {
-        "name": "Morocco",
-        "code": "ma"
-      },
-      "company": "Hubbard, Bruce Esq",
-      "date": "2017-05-25",
-      "status": "proposal",
-      "activity": 87,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1062,
-      "name": "Cecily Hollack",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Arthur A Oliver \u0026 Son Inc",
-      "date": "2020-05-09",
-      "status": "negotiation",
-      "activity": 5,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1063,
-      "name": "Carmelina Lindall",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "George Jessop Carter Jewelers",
-      "date": "2019-09-07",
-      "status": "qualified",
-      "activity": 77,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1064,
-      "name": "Maurine Yglesias",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Schultz, Thomas C Md",
-      "date": "2015-08-10",
-      "status": "renewal",
-      "activity": 94,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1065,
-      "name": "Tawna Buvens",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "H H H Enterprises Inc",
-      "date": "2018-03-20",
-      "status": "new",
-      "activity": 25,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1066,
-      "name": "Penney Weight",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Hawaiian King Hotel",
-      "date": "2020-03-03",
-      "status": "qualified",
-      "activity": 96,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1067,
-      "name": "Elly Morocco",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Killion Industries",
-      "date": "2018-09-18",
-      "status": "qualified",
-      "activity": 38,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1068,
-      "name": "Ilene Eroman",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Robinson, William J Esq",
-      "date": "2019-06-08",
-      "status": "new",
-      "activity": 49,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1069,
-      "name": "Vallie Mondella",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Private Properties",
-      "date": "2018-12-06",
-      "status": "new",
-      "activity": 16,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1070,
-      "name": "Kallie Blackwood",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Rowley Schlimgen Inc",
-      "date": "2017-04-05",
-      "status": "unqualified",
-      "activity": 25,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1071,
-      "name": "Johnetta Abdallah",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Forging Specialties",
-      "date": "2015-02-02",
-      "status": "new",
-      "activity": 16,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1072,
-      "name": "Bobbye Rhym",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Smits, Patricia Garity",
-      "date": "2018-08-17",
-      "status": "qualified",
-      "activity": 85,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1073,
-      "name": "Micaela Rhymes",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "H Lee Leonard Attorney At Law",
-      "date": "2018-09-08",
-      "status": "renewal",
-      "activity": 92,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1074,
-      "name": "Tamar Hoogland",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "A K Construction Co",
-      "date": "2018-11-13",
-      "status": "proposal",
-      "activity": 22,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1075,
-      "name": "Moon Parlato",
-      "country": {
-        "name": "Czech Republic",
-        "code": "cz"
-      },
-      "company": "Ambelang, Jessica M Md",
-      "date": "2019-08-18",
-      "status": "renewal",
-      "activity": 64,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1076,
-      "name": "Laurel Reitler",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Q A Service",
-      "date": "2015-04-02",
-      "status": "negotiation",
-      "activity": 80,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1077,
-      "name": "Delisa Crupi",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Wood \u0026 Whitacre Contractors",
-      "date": "2017-09-15",
-      "status": "unqualified",
-      "activity": 70,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1078,
-      "name": "Viva Toelkes",
-      "country": {
-        "name": "United States",
-        "code": "us"
-      },
-      "company": "Mark Iv Press Ltd",
-      "date": "2017-03-27",
-      "status": "qualified",
-      "activity": 16,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1079,
-      "name": "Elza Lipke",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Museum Of Science \u0026 Industry",
-      "date": "2017-06-01",
-      "status": "proposal",
-      "activity": 90,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1080,
-      "name": "Devorah Chickering",
-      "country": {
-        "name": "Spain",
-        "code": "es"
-      },
-      "company": "Garrison Ind",
-      "date": "2017-03-14",
-      "status": "proposal",
-      "activity": 96,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1081,
-      "name": "Timothy Mulqueen",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Saronix Nymph Products",
-      "date": "2018-07-09",
-      "status": "renewal",
-      "activity": 77,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1082,
-      "name": "Arlette Honeywell",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Smc Inc",
-      "date": "2018-09-11",
-      "status": "proposal",
-      "activity": 46,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1083,
-      "name": "Dominque Dickerson",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "E A I Electronic Assocs Inc",
-      "date": "2017-11-12",
-      "status": "qualified",
-      "activity": 83,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1084,
-      "name": "Lettie Isenhower",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Conte, Christopher A Esq",
-      "date": "2016-03-01",
-      "status": "qualified",
-      "activity": 83,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1085,
-      "name": "Myra Munns",
-      "country": {
-        "name": "Lithuania",
-        "code": "lt"
-      },
-      "company": "Anker Law Office",
-      "date": "2016-05-21",
-      "status": "unqualified",
-      "activity": 49,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1086,
-      "name": "Stephaine Barfield",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Beutelschies \u0026 Company",
-      "date": "2016-01-22",
-      "status": "new",
-      "activity": 34,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1087,
-      "name": "Lai Gato",
-      "country": {
-        "name": "Nigeria",
-        "code": "ng"
-      },
-      "company": "Fligg, Kenneth I Jr",
-      "date": "2016-07-26",
-      "status": "unqualified",
-      "activity": 64,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1088,
-      "name": "Stephen Emigh",
-      "country": {
-        "name": "Cuba",
-        "code": "cu"
-      },
-      "company": "Sharp, J Daniel Esq",
-      "date": "2020-07-24",
-      "status": "renewal",
-      "activity": 51,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1089,
-      "name": "Tyra Shields",
-      "country": {
-        "name": "Honduras",
-        "code": "hn"
-      },
-      "company": "Assink, Anne H Esq",
-      "date": "2019-11-10",
-      "status": "negotiation",
-      "activity": 11,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1090,
-      "name": "Tammara Wardrip",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Jewel My Shop Inc",
-      "date": "2016-06-05",
-      "status": "renewal",
-      "activity": 64,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1091,
-      "name": "Cory Gibes",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Chinese Translation Resources",
-      "date": "2016-02-28",
-      "status": "new",
-      "activity": 44,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1092,
-      "name": "Danica Bruschke",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Stevens, Charles T",
-      "date": "2018-12-13",
-      "status": "unqualified",
-      "activity": 62,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1093,
-      "name": "Wilda Giguere",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Mclaughlin, Luther W Cpa",
-      "date": "2017-06-16",
-      "status": "new",
-      "activity": 79,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1094,
-      "name": "Elvera Benimadho",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Tree Musketeers",
-      "date": "2019-02-17",
-      "status": "proposal",
-      "activity": 50,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1095,
-      "name": "Carma Vanheusen",
-      "country": {
-        "name": "Turkey",
-        "code": "tr"
-      },
-      "company": "Springfield Div Oh Edison Co",
-      "date": "2019-11-26",
-      "status": "renewal",
-      "activity": 84,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1096,
-      "name": "Malinda Hochard",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Logan Memorial Hospital",
-      "date": "2016-07-06",
-      "status": "new",
-      "activity": 88,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1097,
-      "name": "Natalie Fern",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Kelly, Charles G Esq",
-      "date": "2019-10-02",
-      "status": "proposal",
-      "activity": 44,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1098,
-      "name": "Lisha Centini",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Industrial Paper Shredders Inc",
-      "date": "2018-07-05",
-      "status": "new",
-      "activity": 7,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1099,
-      "name": "Arlene Klusman",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "Beck Horizon Builders",
-      "date": "2018-05-14",
-      "status": "proposal",
-      "activity": 99,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1100,
-      "name": "Alease Buemi",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Porto Cayo At Hawks Cay",
-      "date": "2018-03-14",
-      "status": "unqualified",
-      "activity": 0,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1101,
-      "name": "Louisa Cronauer",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Pacific Grove Museum Ntrl Hist",
-      "date": "2018-09-23",
-      "status": "qualified",
-      "activity": 3,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1102,
-      "name": "Angella Cetta",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Bender \u0026 Hatley Pc",
-      "date": "2018-04-10",
-      "status": "qualified",
-      "activity": 88,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1103,
-      "name": "Cyndy Goldammer",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Di Cristina J \u0026 Son",
-      "date": "2017-09-18",
-      "status": "unqualified",
-      "activity": 92,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1104,
-      "name": "Rosio Cork",
-      "country": {
-        "name": "Singapore",
-        "code": "sg"
-      },
-      "company": "Green Goddess",
-      "date": "2017-08-19",
-      "status": "negotiation",
-      "activity": 19,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1105,
-      "name": "Celeste Korando",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "American Arts \u0026 Graphics",
-      "date": "2020-06-18",
-      "status": "proposal",
-      "activity": 21,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1106,
-      "name": "Twana Felger",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Opryland Hotel",
-      "date": "2016-11-18",
-      "status": "negotiation",
-      "activity": 97,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1107,
-      "name": "Estrella Samu",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Marking Devices Pubg Co",
-      "date": "2017-06-25",
-      "status": "unqualified",
-      "activity": 27,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1108,
-      "name": "Donte Kines",
-      "country": {
-        "name": "Slovakia",
-        "code": "sk"
-      },
-      "company": "W Tc Industries Inc",
-      "date": "2019-02-16",
-      "status": "new",
-      "activity": 35,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1109,
-      "name": "Tiffiny Steffensmeier",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Whitehall Robbins Labs Divsn",
-      "date": "2018-03-11",
-      "status": "new",
-      "activity": 81,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1110,
-      "name": "Edna Miceli",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Sampler",
-      "date": "2017-10-15",
-      "status": "renewal",
-      "activity": 54,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1111,
-      "name": "Sue Kownacki",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "Juno Chefs Incorporated",
-      "date": "2017-03-17",
-      "status": "proposal",
-      "activity": 31,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1112,
-      "name": "Jesusa Shin",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Carroccio, A Thomas Esq",
-      "date": "2017-04-06",
-      "status": "renewal",
-      "activity": 28,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1113,
-      "name": "Rolland Francescon",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Stanley, Richard L Esq",
-      "date": "2019-02-03",
-      "status": "qualified",
-      "activity": 45,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1114,
-      "name": "Pamella Schmierer",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "K Cs Cstm Mouldings Windows",
-      "date": "2016-09-22",
-      "status": "unqualified",
-      "activity": 34,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1115,
-      "name": "Glory Kulzer",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Comfort Inn",
-      "date": "2017-09-27",
-      "status": "unqualified",
-      "activity": 36,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1116,
-      "name": "Shawna Palaspas",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "Windsor, James L Esq",
-      "date": "2017-06-25",
-      "status": "unqualified",
-      "activity": 69,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1117,
-      "name": "Brandon Callaro",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Jackson Shields Yeiser",
-      "date": "2016-07-13",
-      "status": "proposal",
-      "activity": 55,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1118,
-      "name": "Scarlet Cartan",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Box, J Calvin Esq",
-      "date": "2018-09-13",
-      "status": "renewal",
-      "activity": 1,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1119,
-      "name": "Oretha Menter",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Custom Engineering Inc",
-      "date": "2017-09-11",
-      "status": "renewal",
-      "activity": 8,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1120,
-      "name": "Ty Smith",
-      "country": {
-        "name": "United States",
-        "code": "us"
-      },
-      "company": "Bresler Eitel Framg Gllry Ltd",
-      "date": "2019-07-06",
-      "status": "unqualified",
-      "activity": 50,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1121,
-      "name": "Xuan Rochin",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "Carol, Drake Sparks Esq",
-      "date": "2018-05-22",
-      "status": "proposal",
-      "activity": 77,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1122,
-      "name": "Lindsey Dilello",
-      "country": {
-        "name": "Austria",
-        "code": "at"
-      },
-      "company": "Biltmore Investors Bank",
-      "date": "2017-07-18",
-      "status": "renewal",
-      "activity": 65,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1123,
-      "name": "Devora Perez",
-      "country": {
-        "name": "Uruguay",
-        "code": "uy"
-      },
-      "company": "Desco Equipment Corp",
-      "date": "2017-10-09",
-      "status": "unqualified",
-      "activity": 30,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1124,
-      "name": "Herman Demesa",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Merlin Electric Co",
-      "date": "2019-05-23",
-      "status": "proposal",
-      "activity": 10,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1125,
-      "name": "Rory Papasergi",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Bailey Cntl Co Div Babcock",
-      "date": "2019-03-02",
-      "status": "qualified",
-      "activity": 22,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1126,
-      "name": "Talia Riopelle",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "Ford Brothers Wholesale Inc",
-      "date": "2017-02-18",
-      "status": "new",
-      "activity": 69,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1127,
-      "name": "Van Shire",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Cambridge Inn",
-      "date": "2020-05-12",
-      "status": "new",
-      "activity": 4,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1128,
-      "name": "Lucina Lary",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Matricciani, Albert J Jr",
-      "date": "2019-11-20",
-      "status": "negotiation",
-      "activity": 11,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1129,
-      "name": "Bok Isaacs",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "Nelson Hawaiian Ltd",
-      "date": "2016-11-10",
-      "status": "proposal",
-      "activity": 41,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1130,
-      "name": "Rolande Spickerman",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Neland Travel Agency",
-      "date": "2016-07-11",
-      "status": "renewal",
-      "activity": 84,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1131,
-      "name": "Howard Paulas",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Asendorf, J Alan Esq",
-      "date": "2017-07-17",
-      "status": "negotiation",
-      "activity": 22,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1132,
-      "name": "Kimbery Madarang",
-      "country": {
-        "name": "Senegal",
-        "code": "sn"
-      },
-      "company": "Silberman, Arthur L Esq",
-      "date": "2018-08-19",
-      "status": "negotiation",
-      "activity": 63,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1133,
-      "name": "Thurman Manno",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "Honey Bee Breeding Genetics \u0026",
-      "date": "2016-05-02",
-      "status": "qualified",
-      "activity": 47,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1134,
-      "name": "Becky Mirafuentes",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Wells Kravitz Schnitzer",
-      "date": "2018-04-13",
-      "status": "unqualified",
-      "activity": 62,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1135,
-      "name": "Beatriz Corrington",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Prohab Rehabilitation Servs",
-      "date": "2020-01-04",
-      "status": "renewal",
-      "activity": 55,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1136,
-      "name": "Marti Maybury",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Eldridge, Kristin K Esq",
-      "date": "2016-02-05",
-      "status": "unqualified",
-      "activity": 3,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1137,
-      "name": "Nieves Gotter",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Vlahos, John J Esq",
-      "date": "2017-03-12",
-      "status": "proposal",
-      "activity": 3,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1138,
-      "name": "Leatha Hagele",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Ninas Indian Grs \u0026 Videos",
-      "date": "2019-03-27",
-      "status": "unqualified",
-      "activity": 67,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1139,
-      "name": "Valentin Klimek",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Schmid, Gayanne K Esq",
-      "date": "2019-08-06",
-      "status": "unqualified",
-      "activity": 14,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1140,
-      "name": "Melissa Wiklund",
-      "country": {
-        "name": "Japan",
-        "code": "jp"
-      },
-      "company": "Moapa Valley Federal Credit Un",
-      "date": "2018-03-20",
-      "status": "qualified",
-      "activity": 8,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1141,
-      "name": "Sheridan Zane",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Kentucky Tennessee Clay Co",
-      "date": "2016-02-15",
-      "status": "qualified",
-      "activity": 17,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1142,
-      "name": "Bulah Padilla",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Admiral Party Rentals \u0026 Sales",
-      "date": "2016-02-10",
-      "status": "proposal",
-      "activity": 58,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1143,
-      "name": "Audra Kohnert",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Nelson, Karolyn King Esq",
-      "date": "2019-07-16",
-      "status": "unqualified",
-      "activity": 82,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1144,
-      "name": "Daren Weirather",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Panasystems",
-      "date": "2015-07-23",
-      "status": "negotiation",
-      "activity": 96,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1145,
-      "name": "Fernanda Jillson",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Shank, Edward L Esq",
-      "date": "2017-07-02",
-      "status": "unqualified",
-      "activity": 92,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1146,
-      "name": "Gearldine Gellinger",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Megibow \u0026 Edwards",
-      "date": "2019-08-17",
-      "status": "proposal",
-      "activity": 18,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1147,
-      "name": "Chau Kitzman",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Benoff, Edward Esq",
-      "date": "2019-07-04",
-      "status": "new",
-      "activity": 9,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1148,
-      "name": "Theola Frey",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Woodbridge Free Public Library",
-      "date": "2020-03-14",
-      "status": "unqualified",
-      "activity": 44,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1149,
-      "name": "Cheryl Haroldson",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "New York Life John Thune",
-      "date": "2018-04-03",
-      "status": "new",
-      "activity": 55,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1150,
-      "name": "Laticia Merced",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Alinabal Inc",
-      "date": "2017-03-04",
-      "status": "unqualified",
-      "activity": 21,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1151,
-      "name": "Carissa Batman",
-      "country": {
-        "name": "Greece",
-        "code": "gr"
-      },
-      "company": "Poletto, Kim David Esq",
-      "date": "2016-05-05",
-      "status": "negotiation",
-      "activity": 91,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1152,
-      "name": "Lezlie Craghead",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Chang, Carolyn Esq",
-      "date": "2019-05-28",
-      "status": "renewal",
-      "activity": 30,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1153,
-      "name": "Ozell Shealy",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Silver Bros Inc",
-      "date": "2016-08-19",
-      "status": "proposal",
-      "activity": 14,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1154,
-      "name": "Arminda Parvis",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Newtec Inc",
-      "date": "2020-02-09",
-      "status": "proposal",
-      "activity": 77,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1155,
-      "name": "Reita Leto",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Creative Business Systems",
-      "date": "2020-04-03",
-      "status": "unqualified",
-      "activity": 58,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1156,
-      "name": "Yolando Luczki",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Dal Tile Corporation",
-      "date": "2015-01-27",
-      "status": "renewal",
-      "activity": 78,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1157,
-      "name": "Lizette Stem",
-      "country": {
-        "name": "Slovakia",
-        "code": "sk"
-      },
-      "company": "Edward S Katz",
-      "date": "2018-08-06",
-      "status": "new",
-      "activity": 67,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1158,
-      "name": "Gregoria Pawlowicz",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Oh My Goodknits Inc",
-      "date": "2020-02-20",
-      "status": "renewal",
-      "activity": 29,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1159,
-      "name": "Carin Deleo",
-      "country": {
-        "name": "China",
-        "code": "cn"
-      },
-      "company": "Redeker, Debbie",
-      "date": "2015-05-28",
-      "status": "qualified",
-      "activity": 13,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1160,
-      "name": "Chantell Maynerich",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "Desert Sands Motel",
-      "date": "2016-09-05",
-      "status": "unqualified",
-      "activity": 75,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1161,
-      "name": "Dierdre Yum",
-      "country": {
-        "name": "Czech Republic",
-        "code": "cz"
-      },
-      "company": "Cummins Southern Plains Inc",
-      "date": "2016-12-20",
-      "status": "negotiation",
-      "activity": 1,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1162,
-      "name": "Larae Gudroe",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Lehigh Furn Divsn Lehigh",
-      "date": "2015-11-28",
-      "status": "unqualified",
-      "activity": 13,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1163,
-      "name": "Latrice Tolfree",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "United Van Lines Agent",
-      "date": "2018-11-11",
-      "status": "renewal",
-      "activity": 73,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1164,
-      "name": "Kerry Theodorov",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Capitol Reporters",
-      "date": "2016-11-05",
-      "status": "unqualified",
-      "activity": 76,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1165,
-      "name": "Dorthy Hidvegi",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Kwik Kopy Printing",
-      "date": "2020-08-13",
-      "status": "qualified",
-      "activity": 60,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1166,
-      "name": "Fannie Lungren",
-      "country": {
-        "name": "Belarus",
-        "code": "by"
-      },
-      "company": "Centro Inc",
-      "date": "2015-07-06",
-      "status": "negotiation",
-      "activity": 24,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1167,
-      "name": "Evangelina Radde",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Campbell, Jan Esq",
-      "date": "2020-02-25",
-      "status": "unqualified",
-      "activity": 93,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1168,
-      "name": "Novella Degroot",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Evans, C Kelly Esq",
-      "date": "2017-12-19",
-      "status": "unqualified",
-      "activity": 30,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1169,
-      "name": "Clay Hoa",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Scat Enterprises",
-      "date": "2016-02-22",
-      "status": "negotiation",
-      "activity": 93,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1170,
-      "name": "Jennifer Fallick",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Nagle, Daniel J Esq",
-      "date": "2016-12-24",
-      "status": "unqualified",
-      "activity": 88,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1171,
-      "name": "Irma Wolfgramm",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Serendiquity Bed \u0026 Breakfast",
-      "date": "2020-10-18",
-      "status": "negotiation",
-      "activity": 70,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1172,
-      "name": "Eun Coody",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Ray Carolyne Realty",
-      "date": "2018-02-12",
-      "status": "qualified",
-      "activity": 61,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1173,
-      "name": "Sylvia Cousey",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Berg, Charles E",
-      "date": "2018-06-10",
-      "status": "unqualified",
-      "activity": 91,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1174,
-      "name": "Nana Wrinkles",
-      "country": {
-        "name": "Austria",
-        "code": "at"
-      },
-      "company": "Ray, Milbern D",
-      "date": "2017-04-11",
-      "status": "renewal",
-      "activity": 98,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1175,
-      "name": "Layla Springe",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Chadds Ford Winery",
-      "date": "2019-07-27",
-      "status": "unqualified",
-      "activity": 97,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1176,
-      "name": "Joesph Degonia",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "A R Packaging",
-      "date": "2020-04-23",
-      "status": "renewal",
-      "activity": 56,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1177,
-      "name": "Annabelle Boord",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "Corn Popper",
-      "date": "2020-09-16",
-      "status": "proposal",
-      "activity": 76,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1178,
-      "name": "Stephaine Vinning",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Birite Foodservice Distr",
-      "date": "2016-05-14",
-      "status": "negotiation",
-      "activity": 43,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1179,
-      "name": "Nelida Sawchuk",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Anchorage Museum Of Hist \u0026 Art",
-      "date": "2018-06-22",
-      "status": "qualified",
-      "activity": 58,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1180,
-      "name": "Marguerita Hiatt",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Haber, George D Md",
-      "date": "2018-10-25",
-      "status": "qualified",
-      "activity": 72,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1181,
-      "name": "Carmela Cookey",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Royal Pontiac Olds Inc",
-      "date": "2018-07-19",
-      "status": "proposal",
-      "activity": 24,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1182,
-      "name": "Junita Brideau",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Leonards Antiques Inc",
-      "date": "2015-03-15",
-      "status": "proposal",
-      "activity": 86,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1183,
-      "name": "Claribel Varriano",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Meca",
-      "date": "2017-04-14",
-      "status": "unqualified",
-      "activity": 15,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1184,
-      "name": "Benton Skursky",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Nercon Engineering \u0026 Mfg Inc",
-      "date": "2015-02-19",
-      "status": "proposal",
-      "activity": 9,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1185,
-      "name": "Hillary Skulski",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Replica I",
-      "date": "2016-03-25",
-      "status": "unqualified",
-      "activity": 82,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1186,
-      "name": "Merilyn Bayless",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "20 20 Printing Inc",
-      "date": "2020-10-13",
-      "status": "unqualified",
-      "activity": 13,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1187,
-      "name": "Teri Ennaco",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Publishers Group West",
-      "date": "2019-12-21",
-      "status": "unqualified",
-      "activity": 57,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1188,
-      "name": "Merlyn Lawler",
-      "country": {
-        "name": "Germany",
-        "code": "de"
-      },
-      "company": "Nischwitz, Jeffrey L Esq",
-      "date": "2016-02-26",
-      "status": "renewal",
-      "activity": 45,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1189,
-      "name": "Georgene Montezuma",
-      "country": {
-        "name": "Senegal",
-        "code": "sn"
-      },
-      "company": "Payne Blades \u0026 Wellborn Pa",
-      "date": "2018-10-11",
-      "status": "new",
-      "activity": 64,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1190,
-      "name": "Jettie Mconnell",
-      "country": {
-        "name": "Denmark",
-        "code": "dk"
-      },
-      "company": "Coldwell Bnkr Wright Real Est",
-      "date": "2015-10-18",
-      "status": "negotiation",
-      "activity": 74,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1191,
-      "name": "Lemuel Latzke",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "Computer Repair Service",
-      "date": "2016-02-13",
-      "status": "proposal",
-      "activity": 79,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1192,
-      "name": "Melodie Knipp",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Fleetwood Building Block Inc",
-      "date": "2018-03-08",
-      "status": "negotiation",
-      "activity": 19,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1193,
-      "name": "Candida Corbley",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Colts Neck Medical Assocs Inc",
-      "date": "2017-12-02",
-      "status": "negotiation",
-      "activity": 11,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1194,
-      "name": "Karan Karpin",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "New England Taxidermy",
-      "date": "2019-01-07",
-      "status": "proposal",
-      "activity": 4,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1195,
-      "name": "Andra Scheyer",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Ludcke, George O Esq",
-      "date": "2016-08-14",
-      "status": "qualified",
-      "activity": 62,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1196,
-      "name": "Felicidad Poullion",
-      "country": {
-        "name": "Greece",
-        "code": "gr"
-      },
-      "company": "Mccorkle, Tom S Esq",
-      "date": "2016-03-05",
-      "status": "renewal",
-      "activity": 64,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1197,
-      "name": "Belen Strassner",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Eagle Software Inc",
-      "date": "2015-12-14",
-      "status": "qualified",
-      "activity": 91,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1198,
-      "name": "Gracia Melnyk",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Juvenile \u0026 Adult Super",
-      "date": "2019-06-01",
-      "status": "unqualified",
-      "activity": 40,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1199,
-      "name": "Jolanda Hanafan",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Perez, Joseph J Esq",
-      "date": "2015-12-09",
-      "status": "qualified",
-      "activity": 27,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/customers-medium.json b/public/showcase/resources/demo/data/customers-medium.json
deleted file mode 100644
index f27210c13c..0000000000
--- a/public/showcase/resources/demo/data/customers-medium.json
+++ /dev/null
@@ -1,804 +0,0 @@
-{
-    "data": [
-    {
-      "id": 1000,
-      "name": "James Butt",
-      "country": {
-        "name": "Algeria",
-        "code": "dz"
-      },
-      "company": "Benton, John B Jr",
-      "date": "2015-09-13",
-      "status": "unqualified",
-      "activity": 17,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1001,
-      "name": "Josephine Darakjy",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chanay, Jeffrey A Esq",
-      "date": "2019-02-09",
-      "status": "proposal",
-      "activity": 0,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1002,
-      "name": "Art Venere",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Chemel, James L Cpa",
-      "date": "2017-05-13",
-      "status": "qualified",
-      "activity": 63,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1003,
-      "name": "Lenna Paprocki",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Feltz Printing Service",
-      "date": "2020-09-15",
-      "status": "new",
-      "activity": 37,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1004,
-      "name": "Donette Foller",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Printing Dimensions",
-      "date": "2016-05-20",
-      "status": "proposal",
-      "activity": 33,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1005,
-      "name": "Simona Morasca",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chapman, Ross E Esq",
-      "date": "2018-02-16",
-      "status": "qualified",
-      "activity": 68,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1006,
-      "name": "Mitsue Tollner",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Morlong Associates",
-      "date": "2018-02-19",
-      "status": "renewal",
-      "activity": 54,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1007,
-      "name": "Leota Dilliard",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Commercial Press",
-      "date": "2019-08-13",
-      "status": "renewal",
-      "activity": 69,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1008,
-      "name": "Sage Wieser",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Truhlar And Truhlar Attys",
-      "date": "2018-11-21",
-      "status": "unqualified",
-      "activity": 76,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1009,
-      "name": "Kris Marrier",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "King, Christopher A Esq",
-      "date": "2015-07-07",
-      "status": "proposal",
-      "activity": 3,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1010,
-      "name": "Minna Amigon",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Dorl, James J Esq",
-      "date": "2018-11-07",
-      "status": "qualified",
-      "activity": 38,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1011,
-      "name": "Abel Maclead",
-      "country": {
-        "name": "Singapore",
-        "code": "sg"
-      },
-      "company": "Rangoni Of Florence",
-      "date": "2017-03-11",
-      "status": "qualified",
-      "activity": 87,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1012,
-      "name": "Kiley Caldarera",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Feiner Bros",
-      "date": "2015-10-20",
-      "status": "unqualified",
-      "activity": 80,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1013,
-      "name": "Graciela Ruta",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "Buckley Miller \u0026 Wright",
-      "date": "2016-07-25",
-      "status": "negotiation",
-      "activity": 59,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1014,
-      "name": "Cammy Albares",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Rousseaux, Michael Esq",
-      "date": "2019-06-25",
-      "status": "new",
-      "activity": 90,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1015,
-      "name": "Mattie Poquette",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Century Communications",
-      "date": "2017-12-12",
-      "status": "negotiation",
-      "activity": 52,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1016,
-      "name": "Meaghan Garufi",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Bolton, Wilbur Esq",
-      "date": "2018-07-04",
-      "status": "unqualified",
-      "activity": 31,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1017,
-      "name": "Gladys Rim",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "T M Byxbee Company Pc",
-      "date": "2020-02-27",
-      "status": "renewal",
-      "activity": 48,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1018,
-      "name": "Yuki Whobrey",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Farmers Insurance Group",
-      "date": "2017-12-21",
-      "status": "negotiation",
-      "activity": 16,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1019,
-      "name": "Fletcher Flosi",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Post Box Services Plus",
-      "date": "2016-01-04",
-      "status": "renewal",
-      "activity": 19,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1020,
-      "name": "Bette Nicka",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Sport En Art",
-      "date": "2016-10-21",
-      "status": "renewal",
-      "activity": 100,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1021,
-      "name": "Veronika Inouye",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "C 4 Network Inc",
-      "date": "2017-03-24",
-      "status": "renewal",
-      "activity": 72,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1022,
-      "name": "Willard Kolmetz",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Ingalls, Donald R Esq",
-      "date": "2017-04-15",
-      "status": "renewal",
-      "activity": 94,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1023,
-      "name": "Maryann Royster",
-      "country": {
-        "name": "Belarus",
-        "code": "by"
-      },
-      "company": "Franklin, Peter L Esq",
-      "date": "2017-03-11",
-      "status": "qualified",
-      "activity": 56,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1024,
-      "name": "Alisha Slusarski",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Wtlz Power 107 Fm",
-      "date": "2018-03-27",
-      "status": "qualified",
-      "activity": 7,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1025,
-      "name": "Allene Iturbide",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Ledecky, David Esq",
-      "date": "2016-02-20",
-      "status": "qualified",
-      "activity": 1,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1026,
-      "name": "Chanel Caudy",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Professional Image Inc",
-      "date": "2018-06-24",
-      "status": "new",
-      "activity": 26,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1027,
-      "name": "Ezekiel Chui",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Sider, Donald C Esq",
-      "date": "2016-09-24",
-      "status": "new",
-      "activity": 76,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1028,
-      "name": "Willow Kusko",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "U Pull It",
-      "date": "2020-04-11",
-      "status": "qualified",
-      "activity": 7,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1029,
-      "name": "Bernardo Figeroa",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Clark, Richard Cpa",
-      "date": "2018-04-11",
-      "status": "renewal",
-      "activity": 81,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1030,
-      "name": "Ammie Corrio",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Moskowitz, Barry S",
-      "date": "2016-06-11",
-      "status": "negotiation",
-      "activity": 56,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1031,
-      "name": "Francine Vocelka",
-      "country": {
-        "name": "Honduras",
-        "code": "hn"
-      },
-      "company": "Cascade Realty Advisors Inc",
-      "date": "2017-08-02",
-      "status": "qualified",
-      "activity": 94,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1032,
-      "name": "Ernie Stenseth",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Knwz Newsradio",
-      "date": "2018-06-06",
-      "status": "renewal",
-      "activity": 68,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1033,
-      "name": "Albina Glick",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Giampetro, Anthony D",
-      "date": "2019-08-08",
-      "status": "proposal",
-      "activity": 85,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1034,
-      "name": "Alishia Sergi",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "Milford Enterprises Inc",
-      "date": "2018-05-19",
-      "status": "negotiation",
-      "activity": 46,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1035,
-      "name": "Solange Shinko",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Mosocco, Ronald A",
-      "date": "2015-02-12",
-      "status": "qualified",
-      "activity": 32,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1036,
-      "name": "Jose Stockham",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Tri State Refueler Co",
-      "date": "2018-04-25",
-      "status": "qualified",
-      "activity": 77,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1037,
-      "name": "Rozella Ostrosky",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Parkway Company",
-      "date": "2016-02-27",
-      "status": "unqualified",
-      "activity": 66,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1038,
-      "name": "Valentine Gillian",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Fbs Business Finance",
-      "date": "2019-09-17",
-      "status": "qualified",
-      "activity": 25,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1039,
-      "name": "Kati Rulapaugh",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "Eder Assocs Consltng Engrs Pc",
-      "date": "2016-12-03",
-      "status": "renewal",
-      "activity": 51,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1040,
-      "name": "Youlanda Schemmer",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Tri M Tool Inc",
-      "date": "2017-12-15",
-      "status": "negotiation",
-      "activity": 49,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1041,
-      "name": "Dyan Oldroyd",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "International Eyelets Inc",
-      "date": "2017-02-02",
-      "status": "qualified",
-      "activity": 5,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1042,
-      "name": "Roxane Campain",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Rapid Trading Intl",
-      "date": "2018-12-25",
-      "status": "unqualified",
-      "activity": 100,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1043,
-      "name": "Lavera Perin",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Abc Enterprises Inc",
-      "date": "2018-04-10",
-      "status": "qualified",
-      "activity": 71,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1044,
-      "name": "Erick Ferencz",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Cindy Turner Associates",
-      "date": "2018-05-06",
-      "status": "unqualified",
-      "activity": 54,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1045,
-      "name": "Fatima Saylors",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Stanton, James D Esq",
-      "date": "2019-07-10",
-      "status": "renewal",
-      "activity": 93,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1046,
-      "name": "Jina Briddick",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Grace Pastries Inc",
-      "date": "2018-02-19",
-      "status": "unqualified",
-      "activity": 97,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1047,
-      "name": "Kanisha Waycott",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Schroer, Gene E Esq",
-      "date": "2019-11-27",
-      "status": "new",
-      "activity": 80,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1048,
-      "name": "Emerson Bowley",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Knights Inn",
-      "date": "2018-11-24",
-      "status": "new",
-      "activity": 63,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1049,
-      "name": "Blair Malet",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Bollinger Mach Shp \u0026 Shipyard",
-      "date": "2018-04-19",
-      "status": "new",
-      "activity": 92,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/customers-small.json b/public/showcase/resources/demo/data/customers-small.json
deleted file mode 100644
index c1b116be7e..0000000000
--- a/public/showcase/resources/demo/data/customers-small.json
+++ /dev/null
@@ -1,164 +0,0 @@
-{
-    "data": [
-    {
-      "id": 1000,
-      "name": "James Butt",
-      "country": {
-        "name": "Algeria",
-        "code": "dz"
-      },
-      "company": "Benton, John B Jr",
-      "date": "2015-09-13",
-      "status": "unqualified",
-      "activity": 17,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1001,
-      "name": "Josephine Darakjy",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chanay, Jeffrey A Esq",
-      "date": "2019-02-09",
-      "status": "proposal",
-      "activity": 0,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1002,
-      "name": "Art Venere",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Chemel, James L Cpa",
-      "date": "2017-05-13",
-      "status": "qualified",
-      "activity": 63,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1003,
-      "name": "Lenna Paprocki",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Feltz Printing Service",
-      "date": "2020-09-15",
-      "status": "new",
-      "activity": 37,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1004,
-      "name": "Donette Foller",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Printing Dimensions",
-      "date": "2016-05-20",
-      "status": "proposal",
-      "activity": 33,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1005,
-      "name": "Simona Morasca",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chapman, Ross E Esq",
-      "date": "2018-02-16",
-      "status": "qualified",
-      "activity": 68,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1006,
-      "name": "Mitsue Tollner",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Morlong Associates",
-      "date": "2018-02-19",
-      "status": "renewal",
-      "activity": 54,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1007,
-      "name": "Leota Dilliard",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Commercial Press",
-      "date": "2019-08-13",
-      "status": "renewal",
-      "activity": 69,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1008,
-      "name": "Sage Wieser",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Truhlar And Truhlar Attys",
-      "date": "2018-11-21",
-      "status": "unqualified",
-      "activity": 76,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1009,
-      "name": "Kris Marrier",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "King, Christopher A Esq",
-      "date": "2015-07-07",
-      "status": "proposal",
-      "activity": 3,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/customers-xlarge.json b/public/showcase/resources/demo/data/customers-xlarge.json
deleted file mode 100644
index 14543ff2e4..0000000000
--- a/public/showcase/resources/demo/data/customers-xlarge.json
+++ /dev/null
@@ -1,8004 +0,0 @@
-{
-    "data": [
-    {
-      "id": 1000,
-      "name": "James Butt",
-      "country": {
-        "name": "Algeria",
-        "code": "dz"
-      },
-      "company": "Benton, John B Jr",
-      "date": "2015-09-13",
-      "status": "unqualified",
-      "activity": 17,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1001,
-      "name": "Josephine Darakjy",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chanay, Jeffrey A Esq",
-      "date": "2019-02-09",
-      "status": "proposal",
-      "activity": 0,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1002,
-      "name": "Art Venere",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Chemel, James L Cpa",
-      "date": "2017-05-13",
-      "status": "qualified",
-      "activity": 63,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1003,
-      "name": "Lenna Paprocki",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Feltz Printing Service",
-      "date": "2020-09-15",
-      "status": "new",
-      "activity": 37,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1004,
-      "name": "Donette Foller",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Printing Dimensions",
-      "date": "2016-05-20",
-      "status": "proposal",
-      "activity": 33,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1005,
-      "name": "Simona Morasca",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Chapman, Ross E Esq",
-      "date": "2018-02-16",
-      "status": "qualified",
-      "activity": 68,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1006,
-      "name": "Mitsue Tollner",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Morlong Associates",
-      "date": "2018-02-19",
-      "status": "renewal",
-      "activity": 54,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1007,
-      "name": "Leota Dilliard",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Commercial Press",
-      "date": "2019-08-13",
-      "status": "renewal",
-      "activity": 69,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1008,
-      "name": "Sage Wieser",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Truhlar And Truhlar Attys",
-      "date": "2018-11-21",
-      "status": "unqualified",
-      "activity": 76,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1009,
-      "name": "Kris Marrier",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "King, Christopher A Esq",
-      "date": "2015-07-07",
-      "status": "proposal",
-      "activity": 3,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1010,
-      "name": "Minna Amigon",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Dorl, James J Esq",
-      "date": "2018-11-07",
-      "status": "qualified",
-      "activity": 38,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1011,
-      "name": "Abel Maclead",
-      "country": {
-        "name": "Singapore",
-        "code": "sg"
-      },
-      "company": "Rangoni Of Florence",
-      "date": "2017-03-11",
-      "status": "qualified",
-      "activity": 87,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1012,
-      "name": "Kiley Caldarera",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Feiner Bros",
-      "date": "2015-10-20",
-      "status": "unqualified",
-      "activity": 80,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1013,
-      "name": "Graciela Ruta",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "Buckley Miller \u0026 Wright",
-      "date": "2016-07-25",
-      "status": "negotiation",
-      "activity": 59,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1014,
-      "name": "Cammy Albares",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Rousseaux, Michael Esq",
-      "date": "2019-06-25",
-      "status": "new",
-      "activity": 90,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1015,
-      "name": "Mattie Poquette",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Century Communications",
-      "date": "2017-12-12",
-      "status": "negotiation",
-      "activity": 52,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1016,
-      "name": "Meaghan Garufi",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Bolton, Wilbur Esq",
-      "date": "2018-07-04",
-      "status": "unqualified",
-      "activity": 31,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1017,
-      "name": "Gladys Rim",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "T M Byxbee Company Pc",
-      "date": "2020-02-27",
-      "status": "renewal",
-      "activity": 48,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1018,
-      "name": "Yuki Whobrey",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Farmers Insurance Group",
-      "date": "2017-12-21",
-      "status": "negotiation",
-      "activity": 16,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1019,
-      "name": "Fletcher Flosi",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Post Box Services Plus",
-      "date": "2016-01-04",
-      "status": "renewal",
-      "activity": 19,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1020,
-      "name": "Bette Nicka",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Sport En Art",
-      "date": "2016-10-21",
-      "status": "renewal",
-      "activity": 100,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1021,
-      "name": "Veronika Inouye",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "C 4 Network Inc",
-      "date": "2017-03-24",
-      "status": "renewal",
-      "activity": 72,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1022,
-      "name": "Willard Kolmetz",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Ingalls, Donald R Esq",
-      "date": "2017-04-15",
-      "status": "renewal",
-      "activity": 94,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1023,
-      "name": "Maryann Royster",
-      "country": {
-        "name": "Belarus",
-        "code": "by"
-      },
-      "company": "Franklin, Peter L Esq",
-      "date": "2017-03-11",
-      "status": "qualified",
-      "activity": 56,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1024,
-      "name": "Alisha Slusarski",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Wtlz Power 107 Fm",
-      "date": "2018-03-27",
-      "status": "qualified",
-      "activity": 7,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1025,
-      "name": "Allene Iturbide",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Ledecky, David Esq",
-      "date": "2016-02-20",
-      "status": "qualified",
-      "activity": 1,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1026,
-      "name": "Chanel Caudy",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Professional Image Inc",
-      "date": "2018-06-24",
-      "status": "new",
-      "activity": 26,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1027,
-      "name": "Ezekiel Chui",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Sider, Donald C Esq",
-      "date": "2016-09-24",
-      "status": "new",
-      "activity": 76,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1028,
-      "name": "Willow Kusko",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "U Pull It",
-      "date": "2020-04-11",
-      "status": "qualified",
-      "activity": 7,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1029,
-      "name": "Bernardo Figeroa",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Clark, Richard Cpa",
-      "date": "2018-04-11",
-      "status": "renewal",
-      "activity": 81,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1030,
-      "name": "Ammie Corrio",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Moskowitz, Barry S",
-      "date": "2016-06-11",
-      "status": "negotiation",
-      "activity": 56,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1031,
-      "name": "Francine Vocelka",
-      "country": {
-        "name": "Honduras",
-        "code": "hn"
-      },
-      "company": "Cascade Realty Advisors Inc",
-      "date": "2017-08-02",
-      "status": "qualified",
-      "activity": 94,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1032,
-      "name": "Ernie Stenseth",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Knwz Newsradio",
-      "date": "2018-06-06",
-      "status": "renewal",
-      "activity": 68,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1033,
-      "name": "Albina Glick",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Giampetro, Anthony D",
-      "date": "2019-08-08",
-      "status": "proposal",
-      "activity": 85,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1034,
-      "name": "Alishia Sergi",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "Milford Enterprises Inc",
-      "date": "2018-05-19",
-      "status": "negotiation",
-      "activity": 46,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1035,
-      "name": "Solange Shinko",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Mosocco, Ronald A",
-      "date": "2015-02-12",
-      "status": "qualified",
-      "activity": 32,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1036,
-      "name": "Jose Stockham",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Tri State Refueler Co",
-      "date": "2018-04-25",
-      "status": "qualified",
-      "activity": 77,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1037,
-      "name": "Rozella Ostrosky",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Parkway Company",
-      "date": "2016-02-27",
-      "status": "unqualified",
-      "activity": 66,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1038,
-      "name": "Valentine Gillian",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Fbs Business Finance",
-      "date": "2019-09-17",
-      "status": "qualified",
-      "activity": 25,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1039,
-      "name": "Kati Rulapaugh",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "Eder Assocs Consltng Engrs Pc",
-      "date": "2016-12-03",
-      "status": "renewal",
-      "activity": 51,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1040,
-      "name": "Youlanda Schemmer",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Tri M Tool Inc",
-      "date": "2017-12-15",
-      "status": "negotiation",
-      "activity": 49,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1041,
-      "name": "Dyan Oldroyd",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "International Eyelets Inc",
-      "date": "2017-02-02",
-      "status": "qualified",
-      "activity": 5,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1042,
-      "name": "Roxane Campain",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Rapid Trading Intl",
-      "date": "2018-12-25",
-      "status": "unqualified",
-      "activity": 100,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1043,
-      "name": "Lavera Perin",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Abc Enterprises Inc",
-      "date": "2018-04-10",
-      "status": "qualified",
-      "activity": 71,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1044,
-      "name": "Erick Ferencz",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Cindy Turner Associates",
-      "date": "2018-05-06",
-      "status": "unqualified",
-      "activity": 54,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1045,
-      "name": "Fatima Saylors",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Stanton, James D Esq",
-      "date": "2019-07-10",
-      "status": "renewal",
-      "activity": 93,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1046,
-      "name": "Jina Briddick",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Grace Pastries Inc",
-      "date": "2018-02-19",
-      "status": "unqualified",
-      "activity": 97,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1047,
-      "name": "Kanisha Waycott",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Schroer, Gene E Esq",
-      "date": "2019-11-27",
-      "status": "new",
-      "activity": 80,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1048,
-      "name": "Emerson Bowley",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Knights Inn",
-      "date": "2018-11-24",
-      "status": "new",
-      "activity": 63,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1049,
-      "name": "Blair Malet",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Bollinger Mach Shp \u0026 Shipyard",
-      "date": "2018-04-19",
-      "status": "new",
-      "activity": 92,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1050,
-      "name": "Brock Bolognia",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Orinda News",
-      "date": "2019-09-06",
-      "status": "renewal",
-      "activity": 72,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1051,
-      "name": "Lorrie Nestle",
-      "country": {
-        "name": "Germany",
-        "code": "de"
-      },
-      "company": "Ballard Spahr Andrews",
-      "date": "2018-04-26",
-      "status": "renewal",
-      "activity": 36,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1052,
-      "name": "Sabra Uyetake",
-      "country": {
-        "name": "Peru",
-        "code": "pe"
-      },
-      "company": "Lowy Limousine Service",
-      "date": "2018-04-12",
-      "status": "new",
-      "activity": 31,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1053,
-      "name": "Marjory Mastella",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Vicon Corporation",
-      "date": "2018-01-24",
-      "status": "negotiation",
-      "activity": 89,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1054,
-      "name": "Karl Klonowski",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Rossi, Michael M",
-      "date": "2017-04-17",
-      "status": "unqualified",
-      "activity": 27,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1055,
-      "name": "Tonette Wenner",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Northwest Publishing",
-      "date": "2019-04-14",
-      "status": "qualified",
-      "activity": 27,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1056,
-      "name": "Amber Monarrez",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Branford Wire \u0026 Mfg Co",
-      "date": "2019-09-09",
-      "status": "new",
-      "activity": 79,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1057,
-      "name": "Shenika Seewald",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "East Coast Marketing",
-      "date": "2017-02-18",
-      "status": "renewal",
-      "activity": 39,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1058,
-      "name": "Delmy Ahle",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Wye Technologies Inc",
-      "date": "2020-10-05",
-      "status": "unqualified",
-      "activity": 55,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1059,
-      "name": "Deeanna Juhas",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Healy, George W Iv",
-      "date": "2018-09-28",
-      "status": "negotiation",
-      "activity": 79,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1060,
-      "name": "Blondell Pugh",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Alpenlite Inc",
-      "date": "2016-06-16",
-      "status": "renewal",
-      "activity": 49,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1061,
-      "name": "Jamal Vanausdal",
-      "country": {
-        "name": "Morocco",
-        "code": "ma"
-      },
-      "company": "Hubbard, Bruce Esq",
-      "date": "2017-05-25",
-      "status": "proposal",
-      "activity": 87,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1062,
-      "name": "Cecily Hollack",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Arthur A Oliver \u0026 Son Inc",
-      "date": "2020-05-09",
-      "status": "negotiation",
-      "activity": 5,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1063,
-      "name": "Carmelina Lindall",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "George Jessop Carter Jewelers",
-      "date": "2019-09-07",
-      "status": "qualified",
-      "activity": 77,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1064,
-      "name": "Maurine Yglesias",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Schultz, Thomas C Md",
-      "date": "2015-08-10",
-      "status": "renewal",
-      "activity": 94,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1065,
-      "name": "Tawna Buvens",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "H H H Enterprises Inc",
-      "date": "2018-03-20",
-      "status": "new",
-      "activity": 25,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1066,
-      "name": "Penney Weight",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Hawaiian King Hotel",
-      "date": "2020-03-03",
-      "status": "qualified",
-      "activity": 96,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1067,
-      "name": "Elly Morocco",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Killion Industries",
-      "date": "2018-09-18",
-      "status": "qualified",
-      "activity": 38,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1068,
-      "name": "Ilene Eroman",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Robinson, William J Esq",
-      "date": "2019-06-08",
-      "status": "new",
-      "activity": 49,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1069,
-      "name": "Vallie Mondella",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Private Properties",
-      "date": "2018-12-06",
-      "status": "new",
-      "activity": 16,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1070,
-      "name": "Kallie Blackwood",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Rowley Schlimgen Inc",
-      "date": "2017-04-05",
-      "status": "unqualified",
-      "activity": 25,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1071,
-      "name": "Johnetta Abdallah",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Forging Specialties",
-      "date": "2015-02-02",
-      "status": "new",
-      "activity": 16,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1072,
-      "name": "Bobbye Rhym",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Smits, Patricia Garity",
-      "date": "2018-08-17",
-      "status": "qualified",
-      "activity": 85,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1073,
-      "name": "Micaela Rhymes",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "H Lee Leonard Attorney At Law",
-      "date": "2018-09-08",
-      "status": "renewal",
-      "activity": 92,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1074,
-      "name": "Tamar Hoogland",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "A K Construction Co",
-      "date": "2018-11-13",
-      "status": "proposal",
-      "activity": 22,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1075,
-      "name": "Moon Parlato",
-      "country": {
-        "name": "Czech Republic",
-        "code": "cz"
-      },
-      "company": "Ambelang, Jessica M Md",
-      "date": "2019-08-18",
-      "status": "renewal",
-      "activity": 64,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1076,
-      "name": "Laurel Reitler",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Q A Service",
-      "date": "2015-04-02",
-      "status": "negotiation",
-      "activity": 80,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1077,
-      "name": "Delisa Crupi",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Wood \u0026 Whitacre Contractors",
-      "date": "2017-09-15",
-      "status": "unqualified",
-      "activity": 70,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1078,
-      "name": "Viva Toelkes",
-      "country": {
-        "name": "United States",
-        "code": "us"
-      },
-      "company": "Mark Iv Press Ltd",
-      "date": "2017-03-27",
-      "status": "qualified",
-      "activity": 16,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1079,
-      "name": "Elza Lipke",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Museum Of Science \u0026 Industry",
-      "date": "2017-06-01",
-      "status": "proposal",
-      "activity": 90,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1080,
-      "name": "Devorah Chickering",
-      "country": {
-        "name": "Spain",
-        "code": "es"
-      },
-      "company": "Garrison Ind",
-      "date": "2017-03-14",
-      "status": "proposal",
-      "activity": 96,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1081,
-      "name": "Timothy Mulqueen",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Saronix Nymph Products",
-      "date": "2018-07-09",
-      "status": "renewal",
-      "activity": 77,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1082,
-      "name": "Arlette Honeywell",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Smc Inc",
-      "date": "2018-09-11",
-      "status": "proposal",
-      "activity": 46,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1083,
-      "name": "Dominque Dickerson",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "E A I Electronic Assocs Inc",
-      "date": "2017-11-12",
-      "status": "qualified",
-      "activity": 83,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1084,
-      "name": "Lettie Isenhower",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Conte, Christopher A Esq",
-      "date": "2016-03-01",
-      "status": "qualified",
-      "activity": 83,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1085,
-      "name": "Myra Munns",
-      "country": {
-        "name": "Lithuania",
-        "code": "lt"
-      },
-      "company": "Anker Law Office",
-      "date": "2016-05-21",
-      "status": "unqualified",
-      "activity": 49,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1086,
-      "name": "Stephaine Barfield",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Beutelschies \u0026 Company",
-      "date": "2016-01-22",
-      "status": "new",
-      "activity": 34,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1087,
-      "name": "Lai Gato",
-      "country": {
-        "name": "Nigeria",
-        "code": "ng"
-      },
-      "company": "Fligg, Kenneth I Jr",
-      "date": "2016-07-26",
-      "status": "unqualified",
-      "activity": 64,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1088,
-      "name": "Stephen Emigh",
-      "country": {
-        "name": "Cuba",
-        "code": "cu"
-      },
-      "company": "Sharp, J Daniel Esq",
-      "date": "2020-07-24",
-      "status": "renewal",
-      "activity": 51,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1089,
-      "name": "Tyra Shields",
-      "country": {
-        "name": "Honduras",
-        "code": "hn"
-      },
-      "company": "Assink, Anne H Esq",
-      "date": "2019-11-10",
-      "status": "negotiation",
-      "activity": 11,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1090,
-      "name": "Tammara Wardrip",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Jewel My Shop Inc",
-      "date": "2016-06-05",
-      "status": "renewal",
-      "activity": 64,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1091,
-      "name": "Cory Gibes",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Chinese Translation Resources",
-      "date": "2016-02-28",
-      "status": "new",
-      "activity": 44,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1092,
-      "name": "Danica Bruschke",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Stevens, Charles T",
-      "date": "2018-12-13",
-      "status": "unqualified",
-      "activity": 62,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1093,
-      "name": "Wilda Giguere",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Mclaughlin, Luther W Cpa",
-      "date": "2017-06-16",
-      "status": "new",
-      "activity": 79,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1094,
-      "name": "Elvera Benimadho",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Tree Musketeers",
-      "date": "2019-02-17",
-      "status": "proposal",
-      "activity": 50,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1095,
-      "name": "Carma Vanheusen",
-      "country": {
-        "name": "Turkey",
-        "code": "tr"
-      },
-      "company": "Springfield Div Oh Edison Co",
-      "date": "2019-11-26",
-      "status": "renewal",
-      "activity": 84,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1096,
-      "name": "Malinda Hochard",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Logan Memorial Hospital",
-      "date": "2016-07-06",
-      "status": "new",
-      "activity": 88,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1097,
-      "name": "Natalie Fern",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Kelly, Charles G Esq",
-      "date": "2019-10-02",
-      "status": "proposal",
-      "activity": 44,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1098,
-      "name": "Lisha Centini",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Industrial Paper Shredders Inc",
-      "date": "2018-07-05",
-      "status": "new",
-      "activity": 7,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1099,
-      "name": "Arlene Klusman",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "Beck Horizon Builders",
-      "date": "2018-05-14",
-      "status": "proposal",
-      "activity": 99,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1100,
-      "name": "Alease Buemi",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Porto Cayo At Hawks Cay",
-      "date": "2018-03-14",
-      "status": "unqualified",
-      "activity": 0,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1101,
-      "name": "Louisa Cronauer",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Pacific Grove Museum Ntrl Hist",
-      "date": "2018-09-23",
-      "status": "qualified",
-      "activity": 3,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1102,
-      "name": "Angella Cetta",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Bender \u0026 Hatley Pc",
-      "date": "2018-04-10",
-      "status": "qualified",
-      "activity": 88,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1103,
-      "name": "Cyndy Goldammer",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Di Cristina J \u0026 Son",
-      "date": "2017-09-18",
-      "status": "unqualified",
-      "activity": 92,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1104,
-      "name": "Rosio Cork",
-      "country": {
-        "name": "Singapore",
-        "code": "sg"
-      },
-      "company": "Green Goddess",
-      "date": "2017-08-19",
-      "status": "negotiation",
-      "activity": 19,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1105,
-      "name": "Celeste Korando",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "American Arts \u0026 Graphics",
-      "date": "2020-06-18",
-      "status": "proposal",
-      "activity": 21,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1106,
-      "name": "Twana Felger",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Opryland Hotel",
-      "date": "2016-11-18",
-      "status": "negotiation",
-      "activity": 97,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1107,
-      "name": "Estrella Samu",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Marking Devices Pubg Co",
-      "date": "2017-06-25",
-      "status": "unqualified",
-      "activity": 27,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1108,
-      "name": "Donte Kines",
-      "country": {
-        "name": "Slovakia",
-        "code": "sk"
-      },
-      "company": "W Tc Industries Inc",
-      "date": "2019-02-16",
-      "status": "new",
-      "activity": 35,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1109,
-      "name": "Tiffiny Steffensmeier",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Whitehall Robbins Labs Divsn",
-      "date": "2018-03-11",
-      "status": "new",
-      "activity": 81,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1110,
-      "name": "Edna Miceli",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Sampler",
-      "date": "2017-10-15",
-      "status": "renewal",
-      "activity": 54,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1111,
-      "name": "Sue Kownacki",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "Juno Chefs Incorporated",
-      "date": "2017-03-17",
-      "status": "proposal",
-      "activity": 31,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1112,
-      "name": "Jesusa Shin",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Carroccio, A Thomas Esq",
-      "date": "2017-04-06",
-      "status": "renewal",
-      "activity": 28,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1113,
-      "name": "Rolland Francescon",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Stanley, Richard L Esq",
-      "date": "2019-02-03",
-      "status": "qualified",
-      "activity": 45,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1114,
-      "name": "Pamella Schmierer",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "K Cs Cstm Mouldings Windows",
-      "date": "2016-09-22",
-      "status": "unqualified",
-      "activity": 34,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1115,
-      "name": "Glory Kulzer",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Comfort Inn",
-      "date": "2017-09-27",
-      "status": "unqualified",
-      "activity": 36,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1116,
-      "name": "Shawna Palaspas",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "Windsor, James L Esq",
-      "date": "2017-06-25",
-      "status": "unqualified",
-      "activity": 69,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1117,
-      "name": "Brandon Callaro",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Jackson Shields Yeiser",
-      "date": "2016-07-13",
-      "status": "proposal",
-      "activity": 55,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1118,
-      "name": "Scarlet Cartan",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Box, J Calvin Esq",
-      "date": "2018-09-13",
-      "status": "renewal",
-      "activity": 1,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1119,
-      "name": "Oretha Menter",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Custom Engineering Inc",
-      "date": "2017-09-11",
-      "status": "renewal",
-      "activity": 8,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1120,
-      "name": "Ty Smith",
-      "country": {
-        "name": "United States",
-        "code": "us"
-      },
-      "company": "Bresler Eitel Framg Gllry Ltd",
-      "date": "2019-07-06",
-      "status": "unqualified",
-      "activity": 50,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1121,
-      "name": "Xuan Rochin",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "Carol, Drake Sparks Esq",
-      "date": "2018-05-22",
-      "status": "proposal",
-      "activity": 77,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1122,
-      "name": "Lindsey Dilello",
-      "country": {
-        "name": "Austria",
-        "code": "at"
-      },
-      "company": "Biltmore Investors Bank",
-      "date": "2017-07-18",
-      "status": "renewal",
-      "activity": 65,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1123,
-      "name": "Devora Perez",
-      "country": {
-        "name": "Uruguay",
-        "code": "uy"
-      },
-      "company": "Desco Equipment Corp",
-      "date": "2017-10-09",
-      "status": "unqualified",
-      "activity": 30,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1124,
-      "name": "Herman Demesa",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Merlin Electric Co",
-      "date": "2019-05-23",
-      "status": "proposal",
-      "activity": 10,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1125,
-      "name": "Rory Papasergi",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Bailey Cntl Co Div Babcock",
-      "date": "2019-03-02",
-      "status": "qualified",
-      "activity": 22,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1126,
-      "name": "Talia Riopelle",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "Ford Brothers Wholesale Inc",
-      "date": "2017-02-18",
-      "status": "new",
-      "activity": 69,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1127,
-      "name": "Van Shire",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Cambridge Inn",
-      "date": "2020-05-12",
-      "status": "new",
-      "activity": 4,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1128,
-      "name": "Lucina Lary",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Matricciani, Albert J Jr",
-      "date": "2019-11-20",
-      "status": "negotiation",
-      "activity": 11,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1129,
-      "name": "Bok Isaacs",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "Nelson Hawaiian Ltd",
-      "date": "2016-11-10",
-      "status": "proposal",
-      "activity": 41,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1130,
-      "name": "Rolande Spickerman",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Neland Travel Agency",
-      "date": "2016-07-11",
-      "status": "renewal",
-      "activity": 84,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1131,
-      "name": "Howard Paulas",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Asendorf, J Alan Esq",
-      "date": "2017-07-17",
-      "status": "negotiation",
-      "activity": 22,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1132,
-      "name": "Kimbery Madarang",
-      "country": {
-        "name": "Senegal",
-        "code": "sn"
-      },
-      "company": "Silberman, Arthur L Esq",
-      "date": "2018-08-19",
-      "status": "negotiation",
-      "activity": 63,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1133,
-      "name": "Thurman Manno",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "Honey Bee Breeding Genetics \u0026",
-      "date": "2016-05-02",
-      "status": "qualified",
-      "activity": 47,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1134,
-      "name": "Becky Mirafuentes",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Wells Kravitz Schnitzer",
-      "date": "2018-04-13",
-      "status": "unqualified",
-      "activity": 62,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1135,
-      "name": "Beatriz Corrington",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Prohab Rehabilitation Servs",
-      "date": "2020-01-04",
-      "status": "renewal",
-      "activity": 55,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1136,
-      "name": "Marti Maybury",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Eldridge, Kristin K Esq",
-      "date": "2016-02-05",
-      "status": "unqualified",
-      "activity": 3,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1137,
-      "name": "Nieves Gotter",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Vlahos, John J Esq",
-      "date": "2017-03-12",
-      "status": "proposal",
-      "activity": 3,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1138,
-      "name": "Leatha Hagele",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Ninas Indian Grs \u0026 Videos",
-      "date": "2019-03-27",
-      "status": "unqualified",
-      "activity": 67,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1139,
-      "name": "Valentin Klimek",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Schmid, Gayanne K Esq",
-      "date": "2019-08-06",
-      "status": "unqualified",
-      "activity": 14,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1140,
-      "name": "Melissa Wiklund",
-      "country": {
-        "name": "Japan",
-        "code": "jp"
-      },
-      "company": "Moapa Valley Federal Credit Un",
-      "date": "2018-03-20",
-      "status": "qualified",
-      "activity": 8,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1141,
-      "name": "Sheridan Zane",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Kentucky Tennessee Clay Co",
-      "date": "2016-02-15",
-      "status": "qualified",
-      "activity": 17,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1142,
-      "name": "Bulah Padilla",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Admiral Party Rentals \u0026 Sales",
-      "date": "2016-02-10",
-      "status": "proposal",
-      "activity": 58,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1143,
-      "name": "Audra Kohnert",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Nelson, Karolyn King Esq",
-      "date": "2019-07-16",
-      "status": "unqualified",
-      "activity": 82,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1144,
-      "name": "Daren Weirather",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Panasystems",
-      "date": "2015-07-23",
-      "status": "negotiation",
-      "activity": 96,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1145,
-      "name": "Fernanda Jillson",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Shank, Edward L Esq",
-      "date": "2017-07-02",
-      "status": "unqualified",
-      "activity": 92,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1146,
-      "name": "Gearldine Gellinger",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Megibow \u0026 Edwards",
-      "date": "2019-08-17",
-      "status": "proposal",
-      "activity": 18,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1147,
-      "name": "Chau Kitzman",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Benoff, Edward Esq",
-      "date": "2019-07-04",
-      "status": "new",
-      "activity": 9,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1148,
-      "name": "Theola Frey",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Woodbridge Free Public Library",
-      "date": "2020-03-14",
-      "status": "unqualified",
-      "activity": 44,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1149,
-      "name": "Cheryl Haroldson",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "New York Life John Thune",
-      "date": "2018-04-03",
-      "status": "new",
-      "activity": 55,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1150,
-      "name": "Laticia Merced",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Alinabal Inc",
-      "date": "2017-03-04",
-      "status": "unqualified",
-      "activity": 21,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1151,
-      "name": "Carissa Batman",
-      "country": {
-        "name": "Greece",
-        "code": "gr"
-      },
-      "company": "Poletto, Kim David Esq",
-      "date": "2016-05-05",
-      "status": "negotiation",
-      "activity": 91,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1152,
-      "name": "Lezlie Craghead",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Chang, Carolyn Esq",
-      "date": "2019-05-28",
-      "status": "renewal",
-      "activity": 30,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1153,
-      "name": "Ozell Shealy",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Silver Bros Inc",
-      "date": "2016-08-19",
-      "status": "proposal",
-      "activity": 14,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1154,
-      "name": "Arminda Parvis",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Newtec Inc",
-      "date": "2020-02-09",
-      "status": "proposal",
-      "activity": 77,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1155,
-      "name": "Reita Leto",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Creative Business Systems",
-      "date": "2020-04-03",
-      "status": "unqualified",
-      "activity": 58,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1156,
-      "name": "Yolando Luczki",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Dal Tile Corporation",
-      "date": "2015-01-27",
-      "status": "renewal",
-      "activity": 78,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1157,
-      "name": "Lizette Stem",
-      "country": {
-        "name": "Slovakia",
-        "code": "sk"
-      },
-      "company": "Edward S Katz",
-      "date": "2018-08-06",
-      "status": "new",
-      "activity": 67,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1158,
-      "name": "Gregoria Pawlowicz",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Oh My Goodknits Inc",
-      "date": "2020-02-20",
-      "status": "renewal",
-      "activity": 29,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1159,
-      "name": "Carin Deleo",
-      "country": {
-        "name": "China",
-        "code": "cn"
-      },
-      "company": "Redeker, Debbie",
-      "date": "2015-05-28",
-      "status": "qualified",
-      "activity": 13,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1160,
-      "name": "Chantell Maynerich",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "Desert Sands Motel",
-      "date": "2016-09-05",
-      "status": "unqualified",
-      "activity": 75,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1161,
-      "name": "Dierdre Yum",
-      "country": {
-        "name": "Czech Republic",
-        "code": "cz"
-      },
-      "company": "Cummins Southern Plains Inc",
-      "date": "2016-12-20",
-      "status": "negotiation",
-      "activity": 1,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1162,
-      "name": "Larae Gudroe",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Lehigh Furn Divsn Lehigh",
-      "date": "2015-11-28",
-      "status": "unqualified",
-      "activity": 13,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1163,
-      "name": "Latrice Tolfree",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "United Van Lines Agent",
-      "date": "2018-11-11",
-      "status": "renewal",
-      "activity": 73,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1164,
-      "name": "Kerry Theodorov",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Capitol Reporters",
-      "date": "2016-11-05",
-      "status": "unqualified",
-      "activity": 76,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1165,
-      "name": "Dorthy Hidvegi",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Kwik Kopy Printing",
-      "date": "2020-08-13",
-      "status": "qualified",
-      "activity": 60,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1166,
-      "name": "Fannie Lungren",
-      "country": {
-        "name": "Belarus",
-        "code": "by"
-      },
-      "company": "Centro Inc",
-      "date": "2015-07-06",
-      "status": "negotiation",
-      "activity": 24,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1167,
-      "name": "Evangelina Radde",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Campbell, Jan Esq",
-      "date": "2020-02-25",
-      "status": "unqualified",
-      "activity": 93,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1168,
-      "name": "Novella Degroot",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Evans, C Kelly Esq",
-      "date": "2017-12-19",
-      "status": "unqualified",
-      "activity": 30,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1169,
-      "name": "Clay Hoa",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Scat Enterprises",
-      "date": "2016-02-22",
-      "status": "negotiation",
-      "activity": 93,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1170,
-      "name": "Jennifer Fallick",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Nagle, Daniel J Esq",
-      "date": "2016-12-24",
-      "status": "unqualified",
-      "activity": 88,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1171,
-      "name": "Irma Wolfgramm",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Serendiquity Bed \u0026 Breakfast",
-      "date": "2020-10-18",
-      "status": "negotiation",
-      "activity": 70,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1172,
-      "name": "Eun Coody",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Ray Carolyne Realty",
-      "date": "2018-02-12",
-      "status": "qualified",
-      "activity": 61,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1173,
-      "name": "Sylvia Cousey",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Berg, Charles E",
-      "date": "2018-06-10",
-      "status": "unqualified",
-      "activity": 91,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1174,
-      "name": "Nana Wrinkles",
-      "country": {
-        "name": "Austria",
-        "code": "at"
-      },
-      "company": "Ray, Milbern D",
-      "date": "2017-04-11",
-      "status": "renewal",
-      "activity": 98,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1175,
-      "name": "Layla Springe",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Chadds Ford Winery",
-      "date": "2019-07-27",
-      "status": "unqualified",
-      "activity": 97,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1176,
-      "name": "Joesph Degonia",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "A R Packaging",
-      "date": "2020-04-23",
-      "status": "renewal",
-      "activity": 56,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1177,
-      "name": "Annabelle Boord",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "Corn Popper",
-      "date": "2020-09-16",
-      "status": "proposal",
-      "activity": 76,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1178,
-      "name": "Stephaine Vinning",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Birite Foodservice Distr",
-      "date": "2016-05-14",
-      "status": "negotiation",
-      "activity": 43,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1179,
-      "name": "Nelida Sawchuk",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Anchorage Museum Of Hist \u0026 Art",
-      "date": "2018-06-22",
-      "status": "qualified",
-      "activity": 58,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1180,
-      "name": "Marguerita Hiatt",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Haber, George D Md",
-      "date": "2018-10-25",
-      "status": "qualified",
-      "activity": 72,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1181,
-      "name": "Carmela Cookey",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Royal Pontiac Olds Inc",
-      "date": "2018-07-19",
-      "status": "proposal",
-      "activity": 24,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1182,
-      "name": "Junita Brideau",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Leonards Antiques Inc",
-      "date": "2015-03-15",
-      "status": "proposal",
-      "activity": 86,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1183,
-      "name": "Claribel Varriano",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Meca",
-      "date": "2017-04-14",
-      "status": "unqualified",
-      "activity": 15,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1184,
-      "name": "Benton Skursky",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Nercon Engineering \u0026 Mfg Inc",
-      "date": "2015-02-19",
-      "status": "proposal",
-      "activity": 9,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1185,
-      "name": "Hillary Skulski",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Replica I",
-      "date": "2016-03-25",
-      "status": "unqualified",
-      "activity": 82,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1186,
-      "name": "Merilyn Bayless",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "20 20 Printing Inc",
-      "date": "2020-10-13",
-      "status": "unqualified",
-      "activity": 13,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1187,
-      "name": "Teri Ennaco",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Publishers Group West",
-      "date": "2019-12-21",
-      "status": "unqualified",
-      "activity": 57,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1188,
-      "name": "Merlyn Lawler",
-      "country": {
-        "name": "Germany",
-        "code": "de"
-      },
-      "company": "Nischwitz, Jeffrey L Esq",
-      "date": "2016-02-26",
-      "status": "renewal",
-      "activity": 45,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1189,
-      "name": "Georgene Montezuma",
-      "country": {
-        "name": "Senegal",
-        "code": "sn"
-      },
-      "company": "Payne Blades \u0026 Wellborn Pa",
-      "date": "2018-10-11",
-      "status": "new",
-      "activity": 64,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1190,
-      "name": "Jettie Mconnell",
-      "country": {
-        "name": "Denmark",
-        "code": "dk"
-      },
-      "company": "Coldwell Bnkr Wright Real Est",
-      "date": "2015-10-18",
-      "status": "negotiation",
-      "activity": 74,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1191,
-      "name": "Lemuel Latzke",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "Computer Repair Service",
-      "date": "2016-02-13",
-      "status": "proposal",
-      "activity": 79,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1192,
-      "name": "Melodie Knipp",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Fleetwood Building Block Inc",
-      "date": "2018-03-08",
-      "status": "negotiation",
-      "activity": 19,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1193,
-      "name": "Candida Corbley",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Colts Neck Medical Assocs Inc",
-      "date": "2017-12-02",
-      "status": "negotiation",
-      "activity": 11,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1194,
-      "name": "Karan Karpin",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "New England Taxidermy",
-      "date": "2019-01-07",
-      "status": "proposal",
-      "activity": 4,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1195,
-      "name": "Andra Scheyer",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Ludcke, George O Esq",
-      "date": "2016-08-14",
-      "status": "qualified",
-      "activity": 62,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1196,
-      "name": "Felicidad Poullion",
-      "country": {
-        "name": "Greece",
-        "code": "gr"
-      },
-      "company": "Mccorkle, Tom S Esq",
-      "date": "2016-03-05",
-      "status": "renewal",
-      "activity": 64,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1197,
-      "name": "Belen Strassner",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Eagle Software Inc",
-      "date": "2015-12-14",
-      "status": "qualified",
-      "activity": 91,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1198,
-      "name": "Gracia Melnyk",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Juvenile \u0026 Adult Super",
-      "date": "2019-06-01",
-      "status": "unqualified",
-      "activity": 40,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1199,
-      "name": "Jolanda Hanafan",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Perez, Joseph J Esq",
-      "date": "2015-12-09",
-      "status": "qualified",
-      "activity": 27,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1200,
-      "name": "Barrett Toyama",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Case Foundation Co",
-      "date": "2019-08-16",
-      "status": "new",
-      "activity": 82,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1201,
-      "name": "Helga Fredicks",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "Eis Environmental Engrs Inc",
-      "date": "2018-06-20",
-      "status": "new",
-      "activity": 33,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1202,
-      "name": "Ashlyn Pinilla",
-      "country": {
-        "name": "Japan",
-        "code": "jp"
-      },
-      "company": "Art Crafters",
-      "date": "2018-04-11",
-      "status": "unqualified",
-      "activity": 5,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1203,
-      "name": "Fausto Agramonte",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Marriott Hotels Resorts Suites",
-      "date": "2019-06-25",
-      "status": "new",
-      "activity": 22,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1204,
-      "name": "Ronny Caiafa",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Remaco Inc",
-      "date": "2020-07-21",
-      "status": "new",
-      "activity": 61,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1205,
-      "name": "Marge Limmel",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Bjork, Robert D Jr",
-      "date": "2015-03-12",
-      "status": "unqualified",
-      "activity": 90,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1206,
-      "name": "Norah Waymire",
-      "country": {
-        "name": "United States",
-        "code": "us"
-      },
-      "company": "Carmichael, Jeffery L Esq",
-      "date": "2019-06-11",
-      "status": "renewal",
-      "activity": 48,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1207,
-      "name": "Aliza Baltimore",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Andrews, J Robert Esq",
-      "date": "2020-11-25",
-      "status": "unqualified",
-      "activity": 59,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1208,
-      "name": "Mozell Pelkowski",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Winship \u0026 Byrne",
-      "date": "2018-04-13",
-      "status": "unqualified",
-      "activity": 94,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1209,
-      "name": "Viola Bitsuie",
-      "country": {
-        "name": "Denmark",
-        "code": "dk"
-      },
-      "company": "Burton \u0026 Davis",
-      "date": "2018-07-07",
-      "status": "new",
-      "activity": 94,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1210,
-      "name": "Franklyn Emard",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Olympic Graphic Arts",
-      "date": "2018-02-25",
-      "status": "qualified",
-      "activity": 95,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1211,
-      "name": "Willodean Konopacki",
-      "country": {
-        "name": "Hong Kong",
-        "code": "hk"
-      },
-      "company": "Magnuson",
-      "date": "2017-10-03",
-      "status": "renewal",
-      "activity": 20,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1212,
-      "name": "Beckie Silvestrini",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "A All American Travel Inc",
-      "date": "2016-11-26",
-      "status": "renewal",
-      "activity": 81,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1213,
-      "name": "Rebecka Gesick",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Polykote Inc",
-      "date": "2019-06-22",
-      "status": "renewal",
-      "activity": 45,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1214,
-      "name": "Frederica Blunk",
-      "country": {
-        "name": "Lithuania",
-        "code": "lt"
-      },
-      "company": "Jets Cybernetics",
-      "date": "2019-06-07",
-      "status": "renewal",
-      "activity": 56,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1215,
-      "name": "Glen Bartolet",
-      "country": {
-        "name": "Germany",
-        "code": "de"
-      },
-      "company": "Metlab Testing Services",
-      "date": "2015-02-13",
-      "status": "proposal",
-      "activity": 99,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1216,
-      "name": "Freeman Gochal",
-      "country": {
-        "name": "Slovenia",
-        "code": "si"
-      },
-      "company": "Kellermann, William T Esq",
-      "date": "2019-08-27",
-      "status": "negotiation",
-      "activity": 2,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1217,
-      "name": "Vincent Meinerding",
-      "country": {
-        "name": "United States",
-        "code": "us"
-      },
-      "company": "Arturi, Peter D Esq",
-      "date": "2018-06-18",
-      "status": "new",
-      "activity": 58,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1218,
-      "name": "Rima Bevelacqua",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Mcauley Mfg Co",
-      "date": "2019-05-18",
-      "status": "new",
-      "activity": 31,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1219,
-      "name": "Glendora Sarbacher",
-      "country": {
-        "name": "Lithuania",
-        "code": "lt"
-      },
-      "company": "Defur Voran Hanley Radcliff",
-      "date": "2018-04-21",
-      "status": "new",
-      "activity": 79,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1220,
-      "name": "Avery Steier",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Dill Dill Carr \u0026 Stonbraker Pc",
-      "date": "2017-07-27",
-      "status": "proposal",
-      "activity": 63,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1221,
-      "name": "Cristy Lother",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Kleensteel",
-      "date": "2018-05-19",
-      "status": "renewal",
-      "activity": 55,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1222,
-      "name": "Nicolette Brossart",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Goulds Pumps Inc Slurry Pump",
-      "date": "2015-05-26",
-      "status": "new",
-      "activity": 25,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1223,
-      "name": "Tracey Modzelewski",
-      "country": {
-        "name": "Denmark",
-        "code": "dk"
-      },
-      "company": "Kansas City Insurance Report",
-      "date": "2019-07-02",
-      "status": "renewal",
-      "activity": 4,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1224,
-      "name": "Virgina Tegarden",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Berhanu International Foods",
-      "date": "2017-10-09",
-      "status": "qualified",
-      "activity": 62,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1225,
-      "name": "Tiera Frankel",
-      "country": {
-        "name": "India",
-        "code": "in"
-      },
-      "company": "Roland Ashcroft",
-      "date": "2018-03-27",
-      "status": "unqualified",
-      "activity": 90,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1226,
-      "name": "Alaine Bergesen",
-      "country": {
-        "name": "Peru",
-        "code": "pe"
-      },
-      "company": "Hispanic Magazine",
-      "date": "2017-08-10",
-      "status": "qualified",
-      "activity": 34,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1227,
-      "name": "Earleen Mai",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Little Sheet Metal Co",
-      "date": "2016-06-22",
-      "status": "proposal",
-      "activity": 38,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1228,
-      "name": "Leonida Gobern",
-      "country": {
-        "name": "Cuba",
-        "code": "cu"
-      },
-      "company": "Holmes, Armstead J Esq",
-      "date": "2020-02-24",
-      "status": "renewal",
-      "activity": 96,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1229,
-      "name": "Ressie Auffrey",
-      "country": {
-        "name": "Japan",
-        "code": "jp"
-      },
-      "company": "Faw, James C Cpa",
-      "date": "2016-10-21",
-      "status": "negotiation",
-      "activity": 28,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1230,
-      "name": "Justine Mugnolo",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Evans Rule Company",
-      "date": "2016-02-21",
-      "status": "negotiation",
-      "activity": 83,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1231,
-      "name": "Eladia Saulter",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Tyee Productions Inc",
-      "date": "2016-03-10",
-      "status": "new",
-      "activity": 16,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1232,
-      "name": "Chaya Malvin",
-      "country": {
-        "name": "Cuba",
-        "code": "cu"
-      },
-      "company": "Dunnells \u0026 Duvall",
-      "date": "2016-07-22",
-      "status": "renewal",
-      "activity": 12,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1233,
-      "name": "Gwenn Suffield",
-      "country": {
-        "name": "Austria",
-        "code": "at"
-      },
-      "company": "Deltam Systems Inc",
-      "date": "2019-06-23",
-      "status": "qualified",
-      "activity": 67,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1234,
-      "name": "Salena Karpel",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "Hammill Mfg Co",
-      "date": "2016-08-02",
-      "status": "renewal",
-      "activity": 0,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1235,
-      "name": "Yoko Fishburne",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Sams Corner Store",
-      "date": "2017-08-06",
-      "status": "unqualified",
-      "activity": 73,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1236,
-      "name": "Taryn Moyd",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Siskin, Mark J Esq",
-      "date": "2016-12-18",
-      "status": "negotiation",
-      "activity": 57,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1237,
-      "name": "Katina Polidori",
-      "country": {
-        "name": "Nigeria",
-        "code": "ng"
-      },
-      "company": "Cape \u0026 Associates Real Estate",
-      "date": "2016-08-25",
-      "status": "unqualified",
-      "activity": 37,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1238,
-      "name": "Rickie Plumer",
-      "country": {
-        "name": "Turkey",
-        "code": "tr"
-      },
-      "company": "Merrill Lynch",
-      "date": "2018-11-04",
-      "status": "unqualified",
-      "activity": 71,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1239,
-      "name": "Alex Loader",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Sublett, Scott Esq",
-      "date": "2016-01-07",
-      "status": "unqualified",
-      "activity": 22,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1240,
-      "name": "Lashon Vizarro",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Sentry Signs",
-      "date": "2019-08-02",
-      "status": "negotiation",
-      "activity": 46,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1241,
-      "name": "Lauran Burnard",
-      "country": {
-        "name": "Czech Republic",
-        "code": "cz"
-      },
-      "company": "Professionals Unlimited",
-      "date": "2016-04-27",
-      "status": "renewal",
-      "activity": 30,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1242,
-      "name": "Ceola Setter",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Southern Steel Shelving Co",
-      "date": "2017-05-13",
-      "status": "qualified",
-      "activity": 43,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1243,
-      "name": "My Rantanen",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Bosco, Paul J",
-      "date": "2017-09-11",
-      "status": "proposal",
-      "activity": 60,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1244,
-      "name": "Lorrine Worlds",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Longo, Nicholas J Esq",
-      "date": "2018-05-10",
-      "status": "renewal",
-      "activity": 51,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1245,
-      "name": "Peggie Sturiale",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Henry County Middle School",
-      "date": "2019-11-03",
-      "status": "renewal",
-      "activity": 41,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1246,
-      "name": "Marvel Raymo",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Edison Supply \u0026 Equipment Co",
-      "date": "2016-03-08",
-      "status": "renewal",
-      "activity": 9,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1247,
-      "name": "Daron Dinos",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Wolf, Warren R Esq",
-      "date": "2016-03-25",
-      "status": "unqualified",
-      "activity": 30,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1248,
-      "name": "An Fritz",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Linguistic Systems Inc",
-      "date": "2017-08-04",
-      "status": "proposal",
-      "activity": 86,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1249,
-      "name": "Portia Stimmel",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Peace Christian Center",
-      "date": "2020-01-13",
-      "status": "qualified",
-      "activity": 30,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1250,
-      "name": "Rhea Aredondo",
-      "country": {
-        "name": "Greece",
-        "code": "gr"
-      },
-      "company": "Double B Foods Inc",
-      "date": "2016-06-19",
-      "status": "qualified",
-      "activity": 68,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1251,
-      "name": "Benedict Sama",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Alexander \u0026 Alexander Inc",
-      "date": "2018-08-18",
-      "status": "negotiation",
-      "activity": 79,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1252,
-      "name": "Alyce Arias",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Fairbanks Scales",
-      "date": "2018-09-14",
-      "status": "new",
-      "activity": 77,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1253,
-      "name": "Heike Berganza",
-      "country": {
-        "name": "Bulgaria",
-        "code": "bg"
-      },
-      "company": "Cali Sportswear Cutting Dept",
-      "date": "2019-01-21",
-      "status": "unqualified",
-      "activity": 95,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1254,
-      "name": "Carey Dopico",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Garofani, John Esq",
-      "date": "2020-05-25",
-      "status": "negotiation",
-      "activity": 35,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1255,
-      "name": "Dottie Hellickson",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "Thompson Fabricating Co",
-      "date": "2016-02-12",
-      "status": "qualified",
-      "activity": 7,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1256,
-      "name": "Deandrea Hughey",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Century 21 Krall Real Estate",
-      "date": "2018-09-26",
-      "status": "unqualified",
-      "activity": 96,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1257,
-      "name": "Kimberlie Duenas",
-      "country": {
-        "name": "Bulgaria",
-        "code": "bg"
-      },
-      "company": "Mid Contntl Rlty \u0026 Prop Mgmt",
-      "date": "2015-07-27",
-      "status": "qualified",
-      "activity": 96,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1258,
-      "name": "Martina Staback",
-      "country": {
-        "name": "Luxembourg",
-        "code": "lu"
-      },
-      "company": "Ace Signs Inc",
-      "date": "2017-02-14",
-      "status": "new",
-      "activity": 47,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1259,
-      "name": "Skye Fillingim",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Rodeway Inn",
-      "date": "2017-02-12",
-      "status": "new",
-      "activity": 86,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1260,
-      "name": "Jade Farrar",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Bonnet \u0026 Daughter",
-      "date": "2017-02-23",
-      "status": "new",
-      "activity": 73,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1261,
-      "name": "Charlene Hamilton",
-      "country": {
-        "name": "India",
-        "code": "in"
-      },
-      "company": "Oshins \u0026 Gibbons",
-      "date": "2017-09-23",
-      "status": "unqualified",
-      "activity": 32,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1262,
-      "name": "Geoffrey Acey",
-      "country": {
-        "name": "Hong Kong",
-        "code": "hk"
-      },
-      "company": "Price Business Services",
-      "date": "2019-10-11",
-      "status": "proposal",
-      "activity": 98,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1263,
-      "name": "Stevie Westerbeck",
-      "country": {
-        "name": "Lithuania",
-        "code": "lt"
-      },
-      "company": "Wise, Dennis W Md",
-      "date": "2017-08-01",
-      "status": "renewal",
-      "activity": 57,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1264,
-      "name": "Pamella Fortino",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Super 8 Motel",
-      "date": "2018-09-03",
-      "status": "new",
-      "activity": 100,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1265,
-      "name": "Harrison Haufler",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "John Wagner Associates",
-      "date": "2016-08-25",
-      "status": "qualified",
-      "activity": 85,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1266,
-      "name": "Johnna Engelberg",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Thrifty Oil Co",
-      "date": "2019-06-02",
-      "status": "renewal",
-      "activity": 1,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1267,
-      "name": "Buddy Cloney",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Larkfield Photo",
-      "date": "2020-05-14",
-      "status": "qualified",
-      "activity": 9,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1268,
-      "name": "Dalene Riden",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Silverman Planetarium",
-      "date": "2019-08-23",
-      "status": "renewal",
-      "activity": 31,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1269,
-      "name": "Jerry Zurcher",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "J \u0026 F Lumber",
-      "date": "2015-05-11",
-      "status": "renewal",
-      "activity": 52,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1270,
-      "name": "Haydee Denooyer",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Cleaning Station Inc",
-      "date": "2016-04-17",
-      "status": "qualified",
-      "activity": 80,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1271,
-      "name": "Joseph Cryer",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Ames Stationers",
-      "date": "2019-11-26",
-      "status": "qualified",
-      "activity": 53,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1272,
-      "name": "Deonna Kippley",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Midas Muffler Shops",
-      "date": "2017-08-26",
-      "status": "qualified",
-      "activity": 52,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1273,
-      "name": "Raymon Calvaresi",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Seaboard Securities Inc",
-      "date": "2017-07-09",
-      "status": "qualified",
-      "activity": 45,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1274,
-      "name": "Alecia Bubash",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Petersen, James E Esq",
-      "date": "2016-05-19",
-      "status": "new",
-      "activity": 28,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1275,
-      "name": "Ma Layous",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Development Authority",
-      "date": "2016-02-11",
-      "status": "qualified",
-      "activity": 2,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1276,
-      "name": "Detra Coyier",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "Schott Fiber Optics Inc",
-      "date": "2019-06-05",
-      "status": "proposal",
-      "activity": 95,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1277,
-      "name": "Terrilyn Rodeigues",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Stuart J Agins",
-      "date": "2016-08-04",
-      "status": "renewal",
-      "activity": 35,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1278,
-      "name": "Salome Lacovara",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Mitsumi Electronics Corp",
-      "date": "2015-06-05",
-      "status": "unqualified",
-      "activity": 78,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1279,
-      "name": "Garry Keetch",
-      "country": {
-        "name": "Luxembourg",
-        "code": "lu"
-      },
-      "company": "Italian Express Franchise Corp",
-      "date": "2015-06-20",
-      "status": "unqualified",
-      "activity": 86,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1280,
-      "name": "Matthew Neither",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "American Council On Sci \u0026 Hlth",
-      "date": "2018-06-24",
-      "status": "qualified",
-      "activity": 4,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1281,
-      "name": "Theodora Restrepo",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Kleri, Patricia S Esq",
-      "date": "2017-08-15",
-      "status": "renewal",
-      "activity": 66,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1282,
-      "name": "Noah Kalafatis",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Twiggs Abrams Blanchard",
-      "date": "2020-06-24",
-      "status": "negotiation",
-      "activity": 35,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1283,
-      "name": "Carmen Sweigard",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Maui Research \u0026 Technology Pk",
-      "date": "2019-08-08",
-      "status": "new",
-      "activity": 96,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1284,
-      "name": "Lavonda Hengel",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Bradley Nameplate Corp",
-      "date": "2019-10-25",
-      "status": "negotiation",
-      "activity": 48,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1285,
-      "name": "Junita Stoltzman",
-      "country": {
-        "name": "Turkey",
-        "code": "tr"
-      },
-      "company": "Geonex Martel Inc",
-      "date": "2015-03-19",
-      "status": "proposal",
-      "activity": 64,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1286,
-      "name": "Herminia Nicolozakes",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Sea Island Div Of Fstr Ind Inc",
-      "date": "2019-09-09",
-      "status": "negotiation",
-      "activity": 0,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1287,
-      "name": "Casie Good",
-      "country": {
-        "name": "Japan",
-        "code": "jp"
-      },
-      "company": "Papay, Debbie J Esq",
-      "date": "2016-11-27",
-      "status": "new",
-      "activity": 87,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1288,
-      "name": "Reena Maisto",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Lane Promotions",
-      "date": "2016-08-22",
-      "status": "new",
-      "activity": 16,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1289,
-      "name": "Mirta Mallett",
-      "country": {
-        "name": "Singapore",
-        "code": "sg"
-      },
-      "company": "Stephen Kennerly Archts Inc Pc",
-      "date": "2017-11-27",
-      "status": "renewal",
-      "activity": 14,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1290,
-      "name": "Cathrine Pontoriero",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "Business Systems Of Wis Inc",
-      "date": "2020-02-07",
-      "status": "negotiation",
-      "activity": 58,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1291,
-      "name": "Filiberto Tawil",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Flash, Elena Salerno Esq",
-      "date": "2018-01-28",
-      "status": "proposal",
-      "activity": 0,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1292,
-      "name": "Raul Upthegrove",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Neeley, Gregory W Esq",
-      "date": "2019-11-16",
-      "status": "renewal",
-      "activity": 59,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1293,
-      "name": "Sarah Candlish",
-      "country": {
-        "name": "Hong Kong",
-        "code": "hk"
-      },
-      "company": "Alabama Educational Tv Comm",
-      "date": "2019-06-09",
-      "status": "proposal",
-      "activity": 30,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1294,
-      "name": "Lucy Treston",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "Franz Inc",
-      "date": "2017-02-07",
-      "status": "proposal",
-      "activity": 59,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1295,
-      "name": "Judy Aquas",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Plantation Restaurant",
-      "date": "2020-09-14",
-      "status": "renewal",
-      "activity": 86,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1296,
-      "name": "Yvonne Tjepkema",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Radio Communications Co",
-      "date": "2017-01-06",
-      "status": "renewal",
-      "activity": 33,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1297,
-      "name": "Kayleigh Lace",
-      "country": {
-        "name": "Denmark",
-        "code": "dk"
-      },
-      "company": "Dentalaw Divsn Hlth Care",
-      "date": "2019-11-04",
-      "status": "negotiation",
-      "activity": 70,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1298,
-      "name": "Felix Hirpara",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "American Speedy Printing Ctrs",
-      "date": "2015-03-13",
-      "status": "new",
-      "activity": 8,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1299,
-      "name": "Tresa Sweely",
-      "country": {
-        "name": "Germany",
-        "code": "de"
-      },
-      "company": "Grayson, Grant S Esq",
-      "date": "2019-12-22",
-      "status": "proposal",
-      "activity": 22,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1300,
-      "name": "Kristeen Turinetti",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Jeanerette Middle School",
-      "date": "2017-09-28",
-      "status": "new",
-      "activity": 67,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1301,
-      "name": "Jenelle Regusters",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Haavisto, Brian F Esq",
-      "date": "2019-07-27",
-      "status": "qualified",
-      "activity": 13,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1302,
-      "name": "Renea Monterrubio",
-      "country": {
-        "name": "Greece",
-        "code": "gr"
-      },
-      "company": "Wmmt Radio Station",
-      "date": "2016-03-28",
-      "status": "proposal",
-      "activity": 73,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1303,
-      "name": "Olive Matuszak",
-      "country": {
-        "name": "Germany",
-        "code": "de"
-      },
-      "company": "Colony Paints Sales Ofc \u0026 Plnt",
-      "date": "2018-04-15",
-      "status": "unqualified",
-      "activity": 70,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1304,
-      "name": "Ligia Reiber",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "Floral Expressions",
-      "date": "2017-02-02",
-      "status": "negotiation",
-      "activity": 51,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1305,
-      "name": "Christiane Eschberger",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Casco Services Inc",
-      "date": "2018-03-27",
-      "status": "unqualified",
-      "activity": 81,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1306,
-      "name": "Goldie Schirpke",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Reuter, Arthur C Jr",
-      "date": "2015-04-21",
-      "status": "renewal",
-      "activity": 8,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1307,
-      "name": "Loreta Timenez",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Kaminski, Katherine Andritsaki",
-      "date": "2015-07-17",
-      "status": "proposal",
-      "activity": 29,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1308,
-      "name": "Fabiola Hauenstein",
-      "country": {
-        "name": "Czech Republic",
-        "code": "cz"
-      },
-      "company": "Sidewinder Products Corp",
-      "date": "2015-12-12",
-      "status": "renewal",
-      "activity": 42,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1309,
-      "name": "Amie Perigo",
-      "country": {
-        "name": "Russia",
-        "code": "ru"
-      },
-      "company": "General Foam Corporation",
-      "date": "2016-06-13",
-      "status": "new",
-      "activity": 55,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1310,
-      "name": "Raina Brachle",
-      "country": {
-        "name": "Greece",
-        "code": "gr"
-      },
-      "company": "Ikg Borden Divsn Harsco Corp",
-      "date": "2016-11-28",
-      "status": "negotiation",
-      "activity": 12,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1311,
-      "name": "Erinn Canlas",
-      "country": {
-        "name": "United Kingdom",
-        "code": "gb"
-      },
-      "company": "Anchor Computer Inc",
-      "date": "2018-12-08",
-      "status": "proposal",
-      "activity": 89,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1312,
-      "name": "Cherry Lietz",
-      "country": {
-        "name": "Bulgaria",
-        "code": "bg"
-      },
-      "company": "Sebring \u0026 Co",
-      "date": "2017-11-04",
-      "status": "qualified",
-      "activity": 22,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1313,
-      "name": "Kattie Vonasek",
-      "country": {
-        "name": "Austria",
-        "code": "at"
-      },
-      "company": "H A C Farm Lines Co Optv Assoc",
-      "date": "2017-02-17",
-      "status": "proposal",
-      "activity": 58,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1314,
-      "name": "Lilli Scriven",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Hunter, John J Esq",
-      "date": "2017-04-15",
-      "status": "qualified",
-      "activity": 79,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1315,
-      "name": "Whitley Tomasulo",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "Freehold Fence Co",
-      "date": "2017-11-16",
-      "status": "qualified",
-      "activity": 6,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1316,
-      "name": "Barbra Adkin",
-      "country": {
-        "name": "Nigeria",
-        "code": "ng"
-      },
-      "company": "Binswanger",
-      "date": "2019-07-24",
-      "status": "qualified",
-      "activity": 64,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1317,
-      "name": "Hermila Thyberg",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Chilton Malting Co",
-      "date": "2016-11-05",
-      "status": "qualified",
-      "activity": 57,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1318,
-      "name": "Jesusita Flister",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Schoen, Edward J Jr",
-      "date": "2017-03-03",
-      "status": "proposal",
-      "activity": 29,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1319,
-      "name": "Caitlin Julia",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Helderman, Seymour Cpa",
-      "date": "2018-03-13",
-      "status": "renewal",
-      "activity": 19,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1320,
-      "name": "Roosevelt Hoffis",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "Denbrook, Myron",
-      "date": "2019-04-14",
-      "status": "new",
-      "activity": 49,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1321,
-      "name": "Helaine Halter",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "Lippitt, Mike",
-      "date": "2019-09-28",
-      "status": "renewal",
-      "activity": 62,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1322,
-      "name": "Lorean Martabano",
-      "country": {
-        "name": "Slovakia",
-        "code": "sk"
-      },
-      "company": "Hiram, Hogg P Esq",
-      "date": "2017-03-23",
-      "status": "negotiation",
-      "activity": 8,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1323,
-      "name": "France Buzick",
-      "country": {
-        "name": "Nigeria",
-        "code": "ng"
-      },
-      "company": "In Travel Agency",
-      "date": "2016-12-14",
-      "status": "renewal",
-      "activity": 22,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1324,
-      "name": "Justine Ferrario",
-      "country": {
-        "name": "Ukraine",
-        "code": "ua"
-      },
-      "company": "Newhart Foods Inc",
-      "date": "2015-09-07",
-      "status": "unqualified",
-      "activity": 7,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1325,
-      "name": "Adelina Nabours",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Courtyard By Marriott",
-      "date": "2018-05-26",
-      "status": "renewal",
-      "activity": 59,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1326,
-      "name": "Derick Dhamer",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Studer, Eugene A Esq",
-      "date": "2020-07-04",
-      "status": "new",
-      "activity": 72,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1327,
-      "name": "Jerry Dallen",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Seashore Supply Co Waretown",
-      "date": "2015-10-23",
-      "status": "renewal",
-      "activity": 21,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1328,
-      "name": "Leota Ragel",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "Mayar Silk Inc",
-      "date": "2019-06-15",
-      "status": "negotiation",
-      "activity": 74,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1329,
-      "name": "Jutta Amyot",
-      "country": {
-        "name": "Cameroon",
-        "code": "cm"
-      },
-      "company": "National Medical Excess Corp",
-      "date": "2019-09-01",
-      "status": "proposal",
-      "activity": 8,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1330,
-      "name": "Aja Gehrett",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Stero Company",
-      "date": "2018-01-28",
-      "status": "qualified",
-      "activity": 46,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1331,
-      "name": "Kirk Herritt",
-      "country": {
-        "name": "Morocco",
-        "code": "ma"
-      },
-      "company": "Hasting, H Duane Esq",
-      "date": "2018-10-24",
-      "status": "renewal",
-      "activity": 2,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1332,
-      "name": "Leonora Mauson",
-      "country": {
-        "name": "Hong Kong",
-        "code": "hk"
-      },
-      "company": "Insty Prints",
-      "date": "2019-02-02",
-      "status": "proposal",
-      "activity": 8,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1333,
-      "name": "Winfred Brucato",
-      "country": {
-        "name": "Austria",
-        "code": "at"
-      },
-      "company": "Glenridge Manor Mobile Home Pk",
-      "date": "2019-08-16",
-      "status": "renewal",
-      "activity": 8,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1334,
-      "name": "Tarra Nachor",
-      "country": {
-        "name": "Panama",
-        "code": "pa"
-      },
-      "company": "Circuit Solution Inc",
-      "date": "2019-07-10",
-      "status": "proposal",
-      "activity": 88,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1335,
-      "name": "Corinne Loder",
-      "country": {
-        "name": "Brazil",
-        "code": "br"
-      },
-      "company": "Local Office",
-      "date": "2016-05-21",
-      "status": "proposal",
-      "activity": 85,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1336,
-      "name": "Dulce Labreche",
-      "country": {
-        "name": "South Africa",
-        "code": "za"
-      },
-      "company": "Lee Kilkelly Paulson \u0026 Kabaker",
-      "date": "2019-11-10",
-      "status": "qualified",
-      "activity": 24,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1337,
-      "name": "Kate Keneipp",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Davis, Maxon R Esq",
-      "date": "2019-06-20",
-      "status": "proposal",
-      "activity": 44,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1338,
-      "name": "Kaitlyn Ogg",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Garrison, Paul E Esq",
-      "date": "2019-08-01",
-      "status": "proposal",
-      "activity": 91,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1339,
-      "name": "Sherita Saras",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Black History Resource Center",
-      "date": "2017-06-09",
-      "status": "unqualified",
-      "activity": 79,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1340,
-      "name": "Lashawnda Stuer",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Rodriguez, J Christopher Esq",
-      "date": "2018-01-08",
-      "status": "negotiation",
-      "activity": 6,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1341,
-      "name": "Ernest Syrop",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "Grant Family Health Center",
-      "date": "2016-10-06",
-      "status": "unqualified",
-      "activity": 90,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1342,
-      "name": "Nobuko Halsey",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Goeman Wood Products Inc",
-      "date": "2019-01-02",
-      "status": "unqualified",
-      "activity": 72,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1343,
-      "name": "Lavonna Wolny",
-      "country": {
-        "name": "Czech Republic",
-        "code": "cz"
-      },
-      "company": "Linhares, Kenneth A Esq",
-      "date": "2019-03-09",
-      "status": "negotiation",
-      "activity": 77,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1344,
-      "name": "Lashaunda Lizama",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Earnhardt Printing",
-      "date": "2016-02-16",
-      "status": "negotiation",
-      "activity": 76,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1345,
-      "name": "Mariann Bilden",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "H P G Industrys Inc",
-      "date": "2019-12-15",
-      "status": "proposal",
-      "activity": 20,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1346,
-      "name": "Helene Rodenberger",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Bailey Transportation Prod Inc",
-      "date": "2016-09-22",
-      "status": "unqualified",
-      "activity": 26,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1347,
-      "name": "Roselle Estell",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Mcglynn Bliss Pc",
-      "date": "2016-11-25",
-      "status": "negotiation",
-      "activity": 80,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1348,
-      "name": "Samira Heintzman",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Mutual Fish Co",
-      "date": "2019-11-26",
-      "status": "qualified",
-      "activity": 70,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1349,
-      "name": "Margart Meisel",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Yeates, Arthur L Aia",
-      "date": "2019-10-27",
-      "status": "negotiation",
-      "activity": 77,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1350,
-      "name": "Kristofer Bennick",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Logan, Ronald J Esq",
-      "date": "2016-02-13",
-      "status": "proposal",
-      "activity": 5,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1351,
-      "name": "Weldon Acuff",
-      "country": {
-        "name": "Estonia",
-        "code": "ee"
-      },
-      "company": "Advantage Martgage Company",
-      "date": "2019-10-22",
-      "status": "qualified",
-      "activity": 38,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1352,
-      "name": "Shalon Shadrick",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Germer And Gertz Llp",
-      "date": "2015-01-03",
-      "status": "proposal",
-      "activity": 66,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1353,
-      "name": "Denise Patak",
-      "country": {
-        "name": "Uruguay",
-        "code": "uy"
-      },
-      "company": "Spence Law Offices",
-      "date": "2016-11-03",
-      "status": "qualified",
-      "activity": 77,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1354,
-      "name": "Louvenia Beech",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "John Ortiz Nts Therapy Center",
-      "date": "2016-04-11",
-      "status": "renewal",
-      "activity": 62,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1355,
-      "name": "Audry Yaw",
-      "country": {
-        "name": "Portugal",
-        "code": "pt"
-      },
-      "company": "Mike Uchrin Htg \u0026 Air Cond Inc",
-      "date": "2017-11-22",
-      "status": "unqualified",
-      "activity": 12,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1356,
-      "name": "Kristel Ehmann",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Mccoy, Joy Reynolds Esq",
-      "date": "2016-06-23",
-      "status": "new",
-      "activity": 67,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1357,
-      "name": "Vincenza Zepp",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Kbor 1600 Am",
-      "date": "2016-01-04",
-      "status": "qualified",
-      "activity": 25,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1358,
-      "name": "Elouise Gwalthney",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "Quality Inn Northwest",
-      "date": "2016-04-05",
-      "status": "proposal",
-      "activity": 14,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1359,
-      "name": "Venita Maillard",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Wallace Church Assoc Inc",
-      "date": "2016-03-23",
-      "status": "negotiation",
-      "activity": 69,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1360,
-      "name": "Kasandra Semidey",
-      "country": {
-        "name": "Indonesia",
-        "code": "id"
-      },
-      "company": "Can Tron",
-      "date": "2015-09-03",
-      "status": "new",
-      "activity": 25,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1361,
-      "name": "Xochitl Discipio",
-      "country": {
-        "name": "Slovakia",
-        "code": "sk"
-      },
-      "company": "Ravaal Enterprises Inc",
-      "date": "2016-11-14",
-      "status": "qualified",
-      "activity": 47,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1362,
-      "name": "Maile Linahan",
-      "country": {
-        "name": "Nigeria",
-        "code": "ng"
-      },
-      "company": "Thompson Steel Company Inc",
-      "date": "2016-07-24",
-      "status": "new",
-      "activity": 0,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1363,
-      "name": "Krissy Rauser",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Anderson, Mark A Esq",
-      "date": "2020-03-06",
-      "status": "renewal",
-      "activity": 33,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1364,
-      "name": "Pete Dubaldi",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Womack \u0026 Galich",
-      "date": "2015-11-22",
-      "status": "unqualified",
-      "activity": 31,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1365,
-      "name": "Linn Paa",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Valerie \u0026 Company",
-      "date": "2015-08-12",
-      "status": "unqualified",
-      "activity": 26,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1366,
-      "name": "Paris Wide",
-      "country": {
-        "name": "Uruguay",
-        "code": "uy"
-      },
-      "company": "Gehring Pumps Inc",
-      "date": "2018-10-21",
-      "status": "proposal",
-      "activity": 90,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1367,
-      "name": "Wynell Dorshorst",
-      "country": {
-        "name": "Romania",
-        "code": "ro"
-      },
-      "company": "Haehnel, Craig W Esq",
-      "date": "2018-05-10",
-      "status": "new",
-      "activity": 60,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1368,
-      "name": "Quentin Birkner",
-      "country": {
-        "name": "Senegal",
-        "code": "sn"
-      },
-      "company": "Spoor Behrins Campbell \u0026 Young",
-      "date": "2019-02-03",
-      "status": "unqualified",
-      "activity": 68,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1369,
-      "name": "Regenia Kannady",
-      "country": {
-        "name": "Portugal",
-        "code": "pt"
-      },
-      "company": "Ken Jeter Store Equipment Inc",
-      "date": "2018-07-13",
-      "status": "new",
-      "activity": 74,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1370,
-      "name": "Sheron Louissant",
-      "country": {
-        "name": "France",
-        "code": "fr"
-      },
-      "company": "Potter, Brenda J Cpa",
-      "date": "2017-01-04",
-      "status": "qualified",
-      "activity": 86,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1371,
-      "name": "Izetta Funnell",
-      "country": {
-        "name": "Hong Kong",
-        "code": "hk"
-      },
-      "company": "Baird Kurtz \u0026 Dobson",
-      "date": "2019-11-05",
-      "status": "new",
-      "activity": 67,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1372,
-      "name": "Rodolfo Butzen",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Minor, Cynthia A Esq",
-      "date": "2020-09-25",
-      "status": "proposal",
-      "activity": 17,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1373,
-      "name": "Zona Colla",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Solove, Robert A Esq",
-      "date": "2020-10-08",
-      "status": "negotiation",
-      "activity": 64,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1374,
-      "name": "Serina Zagen",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Mark Ii Imports Inc",
-      "date": "2018-07-14",
-      "status": "negotiation",
-      "activity": 46,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1375,
-      "name": "Paz Sahagun",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "White Sign Div Ctrl Equip Co",
-      "date": "2018-03-23",
-      "status": "negotiation",
-      "activity": 49,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1376,
-      "name": "Markus Lukasik",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "M \u0026 M Store Fixtures Co Inc",
-      "date": "2018-03-21",
-      "status": "negotiation",
-      "activity": 23,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1377,
-      "name": "Jaclyn Bachman",
-      "country": {
-        "name": "Slovakia",
-        "code": "sk"
-      },
-      "company": "Judah Caster \u0026 Wheel Co",
-      "date": "2020-10-20",
-      "status": "new",
-      "activity": 10,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1378,
-      "name": "Cyril Daufeldt",
-      "country": {
-        "name": "India",
-        "code": "in"
-      },
-      "company": "Galaxy International Inc",
-      "date": "2019-02-11",
-      "status": "qualified",
-      "activity": 79,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1379,
-      "name": "Gayla Schnitzler",
-      "country": {
-        "name": "Brazil",
-        "code": "br"
-      },
-      "company": "Sigma Corp Of America",
-      "date": "2017-09-15",
-      "status": "new",
-      "activity": 14,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1380,
-      "name": "Erick Nievas",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Soward, Anne Esq",
-      "date": "2018-10-07",
-      "status": "proposal",
-      "activity": 28,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1381,
-      "name": "Jennie Drymon",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "Osborne, Michelle M Esq",
-      "date": "2016-09-14",
-      "status": "negotiation",
-      "activity": 80,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1382,
-      "name": "Mitsue Scipione",
-      "country": {
-        "name": "Ecuador",
-        "code": "ec"
-      },
-      "company": "Students In Free Entrprs Natl",
-      "date": "2019-07-28",
-      "status": "qualified",
-      "activity": 24,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1383,
-      "name": "Ciara Ventura",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Johnson, Robert M Esq",
-      "date": "2018-04-02",
-      "status": "renewal",
-      "activity": 24,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1384,
-      "name": "Galen Cantres",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Del Charro Apartments",
-      "date": "2020-02-16",
-      "status": "unqualified",
-      "activity": 61,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1385,
-      "name": "Truman Feichtner",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Legal Search Inc",
-      "date": "2019-10-16",
-      "status": "renewal",
-      "activity": 98,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1386,
-      "name": "Gail Kitty",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Service Supply Co Inc",
-      "date": "2020-01-15",
-      "status": "negotiation",
-      "activity": 67,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1387,
-      "name": "Dalene Schoeneck",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Sameshima, Douglas J Esq",
-      "date": "2019-11-27",
-      "status": "proposal",
-      "activity": 85,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1388,
-      "name": "Gertude Witten",
-      "country": {
-        "name": "Morocco",
-        "code": "ma"
-      },
-      "company": "Thompson, John Randolph Jr",
-      "date": "2017-08-13",
-      "status": "proposal",
-      "activity": 40,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1389,
-      "name": "Lizbeth Kohl",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "E T Balancing Co Inc",
-      "date": "2019-04-20",
-      "status": "qualified",
-      "activity": 57,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1390,
-      "name": "Glenn Berray",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Griswold, John E Esq",
-      "date": "2017-08-13",
-      "status": "negotiation",
-      "activity": 68,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1391,
-      "name": "Lashandra Klang",
-      "country": {
-        "name": "Bulgaria",
-        "code": "bg"
-      },
-      "company": "Acqua Group",
-      "date": "2016-06-08",
-      "status": "negotiation",
-      "activity": 32,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1392,
-      "name": "Lenna Newville",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Brooks, Morris J Jr",
-      "date": "2020-09-12",
-      "status": "qualified",
-      "activity": 82,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1393,
-      "name": "Laurel Pagliuca",
-      "country": {
-        "name": "Russia",
-        "code": "ru"
-      },
-      "company": "Printing Images Corp",
-      "date": "2017-05-26",
-      "status": "unqualified",
-      "activity": 21,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1394,
-      "name": "Mireya Frerking",
-      "country": {
-        "name": "Belarus",
-        "code": "by"
-      },
-      "company": "Roberts Supply Co Inc",
-      "date": "2017-04-21",
-      "status": "renewal",
-      "activity": 54,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1395,
-      "name": "Annelle Tagala",
-      "country": {
-        "name": "Colombia",
-        "code": "co"
-      },
-      "company": "Vico Products Mfg Co",
-      "date": "2017-10-02",
-      "status": "proposal",
-      "activity": 53,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1396,
-      "name": "Dean Ketelsen",
-      "country": {
-        "name": "Ivory Coast",
-        "code": "ci"
-      },
-      "company": "J M Custom Design Millwork",
-      "date": "2019-07-25",
-      "status": "negotiation",
-      "activity": 98,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1397,
-      "name": "Levi Munis",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Farrell \u0026 Johnson Office Equip",
-      "date": "2017-06-24",
-      "status": "proposal",
-      "activity": 39,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1398,
-      "name": "Sylvie Ryser",
-      "country": {
-        "name": "India",
-        "code": "in"
-      },
-      "company": "Millers Market \u0026 Deli",
-      "date": "2016-02-23",
-      "status": "unqualified",
-      "activity": 89,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1399,
-      "name": "Sharee Maile",
-      "country": {
-        "name": "Ireland",
-        "code": "ie"
-      },
-      "company": "Holiday Inn Naperville",
-      "date": "2020-07-17",
-      "status": "renewal",
-      "activity": 0,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1400,
-      "name": "Cordelia Storment",
-      "country": {
-        "name": "Guatemala",
-        "code": "gt"
-      },
-      "company": "Burrows, Jon H Esq",
-      "date": "2020-02-17",
-      "status": "negotiation",
-      "activity": 45,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1401,
-      "name": "Mollie Mcdoniel",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Dock Seal Specialty",
-      "date": "2017-08-13",
-      "status": "unqualified",
-      "activity": 59,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1402,
-      "name": "Brett Mccullan",
-      "country": {
-        "name": "Senegal",
-        "code": "sn"
-      },
-      "company": "Five Star Limousines Of Tx Inc",
-      "date": "2015-05-21",
-      "status": "qualified",
-      "activity": 9,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1403,
-      "name": "Teddy Pedrozo",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Barkan, Neal J Esq",
-      "date": "2019-02-19",
-      "status": "proposal",
-      "activity": 38,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1404,
-      "name": "Tasia Andreason",
-      "country": {
-        "name": "Venezuela",
-        "code": "ve"
-      },
-      "company": "Campbell, Robert A",
-      "date": "2016-03-06",
-      "status": "renewal",
-      "activity": 25,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1405,
-      "name": "Hubert Walthall",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Dee, Deanna",
-      "date": "2020-12-19",
-      "status": "renewal",
-      "activity": 32,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1406,
-      "name": "Arthur Farrow",
-      "country": {
-        "name": "Brazil",
-        "code": "br"
-      },
-      "company": "Young, Timothy L Esq",
-      "date": "2019-02-05",
-      "status": "proposal",
-      "activity": 55,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1407,
-      "name": "Vilma Berlanga",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Wells, D Fred Esq",
-      "date": "2016-02-09",
-      "status": "unqualified",
-      "activity": 26,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1408,
-      "name": "Billye Miro",
-      "country": {
-        "name": "Hungary",
-        "code": "hu"
-      },
-      "company": "Gray, Francine H Esq",
-      "date": "2015-09-05",
-      "status": "new",
-      "activity": 70,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1409,
-      "name": "Glenna Slayton",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Toledo Iv Care",
-      "date": "2016-03-10",
-      "status": "unqualified",
-      "activity": 86,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1410,
-      "name": "Mitzie Hudnall",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Cangro Transmission Co",
-      "date": "2020-05-04",
-      "status": "new",
-      "activity": 19,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1411,
-      "name": "Bernardine Rodefer",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Sat Poly Inc",
-      "date": "2020-10-19",
-      "status": "proposal",
-      "activity": 69,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1412,
-      "name": "Staci Schmaltz",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Midwest Contracting \u0026 Mfg Inc",
-      "date": "2018-03-14",
-      "status": "unqualified",
-      "activity": 81,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1413,
-      "name": "Nichelle Meteer",
-      "country": {
-        "name": "Denmark",
-        "code": "dk"
-      },
-      "company": "Print Doctor",
-      "date": "2016-09-23",
-      "status": "renewal",
-      "activity": 39,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1414,
-      "name": "Janine Rhoden",
-      "country": {
-        "name": "Nigeria",
-        "code": "ng"
-      },
-      "company": "Nordic Group Inc",
-      "date": "2018-08-13",
-      "status": "qualified",
-      "activity": 95,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1415,
-      "name": "Ettie Hoopengardner",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Jackson Millwork Co",
-      "date": "2017-07-24",
-      "status": "renewal",
-      "activity": 23,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1416,
-      "name": "Eden Jayson",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Harris Corporation",
-      "date": "2018-03-15",
-      "status": "renewal",
-      "activity": 9,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1417,
-      "name": "Lynelle Auber",
-      "country": {
-        "name": "Netherlands",
-        "code": "nl"
-      },
-      "company": "United Cerebral Palsy Of Ne Pa",
-      "date": "2020-12-11",
-      "status": "proposal",
-      "activity": 0,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1418,
-      "name": "Merissa Tomblin",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "One Day Surgery Center Inc",
-      "date": "2018-03-05",
-      "status": "new",
-      "activity": 50,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1419,
-      "name": "Golda Kaniecki",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Calaveras Prospect",
-      "date": "2019-04-17",
-      "status": "negotiation",
-      "activity": 91,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1420,
-      "name": "Catarina Gleich",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Terk, Robert E Esq",
-      "date": "2017-01-26",
-      "status": "unqualified",
-      "activity": 12,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1421,
-      "name": "Virgie Kiel",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Cullen, Terrence P Esq",
-      "date": "2016-06-28",
-      "status": "renewal",
-      "activity": 89,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1422,
-      "name": "Jolene Ostolaza",
-      "country": {
-        "name": "Puerto Rico",
-        "code": "pr"
-      },
-      "company": "Central Die Casting Mfg Co Inc",
-      "date": "2016-08-08",
-      "status": "negotiation",
-      "activity": 85,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1423,
-      "name": "Keneth Borgman",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "Centerline Engineering",
-      "date": "2019-02-04",
-      "status": "unqualified",
-      "activity": 41,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1424,
-      "name": "Rikki Nayar",
-      "country": {
-        "name": "Norway",
-        "code": "no"
-      },
-      "company": "Targan \u0026 Kievit Pa",
-      "date": "2017-03-06",
-      "status": "negotiation",
-      "activity": 47,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1425,
-      "name": "Elke Sengbusch",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Riley Riper Hollin \u0026 Colagreco",
-      "date": "2019-05-28",
-      "status": "renewal",
-      "activity": 76,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1426,
-      "name": "Hoa Sarao",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Kaplan, Joel S Esq",
-      "date": "2020-08-13",
-      "status": "negotiation",
-      "activity": 0,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1427,
-      "name": "Trinidad Mcrae",
-      "country": {
-        "name": "Burkina Faso",
-        "code": "bf"
-      },
-      "company": "Water Office",
-      "date": "2020-12-26",
-      "status": "renewal",
-      "activity": 76,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1428,
-      "name": "Mari Lueckenbach",
-      "country": {
-        "name": "Cuba",
-        "code": "cu"
-      },
-      "company": "Westbrooks, Nelson E Jr",
-      "date": "2017-10-27",
-      "status": "new",
-      "activity": 34,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1429,
-      "name": "Selma Husser",
-      "country": {
-        "name": "Morocco",
-        "code": "ma"
-      },
-      "company": "Armon Communications",
-      "date": "2018-02-16",
-      "status": "proposal",
-      "activity": 84,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1430,
-      "name": "Antione Onofrio",
-      "country": {
-        "name": "Taiwan",
-        "code": "tw"
-      },
-      "company": "Jacobs \u0026 Gerber Inc",
-      "date": "2017-11-07",
-      "status": "negotiation",
-      "activity": 37,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1431,
-      "name": "Luisa Jurney",
-      "country": {
-        "name": "Canada",
-        "code": "ca"
-      },
-      "company": "Forest Fire Laboratory",
-      "date": "2018-06-12",
-      "status": "unqualified",
-      "activity": 96,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1432,
-      "name": "Clorinda Heimann",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Haughey, Charles Jr",
-      "date": "2016-11-03",
-      "status": "proposal",
-      "activity": 63,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1433,
-      "name": "Dick Wenzinger",
-      "country": {
-        "name": "Mexico",
-        "code": "mx"
-      },
-      "company": "Wheaton Plastic Products",
-      "date": "2017-04-05",
-      "status": "negotiation",
-      "activity": 92,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1434,
-      "name": "Ahmed Angalich",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Reese Plastics",
-      "date": "2018-11-20",
-      "status": "unqualified",
-      "activity": 83,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1435,
-      "name": "Iluminada Ohms",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Nazette Marner Good Wendt",
-      "date": "2015-08-18",
-      "status": "proposal",
-      "activity": 66,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1436,
-      "name": "Joanna Leinenbach",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Levinson Axelrod Wheaton",
-      "date": "2016-02-11",
-      "status": "proposal",
-      "activity": 64,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1437,
-      "name": "Caprice Suell",
-      "country": {
-        "name": "Algeria",
-        "code": "dz"
-      },
-      "company": "Egnor, W Dan Esq",
-      "date": "2018-07-09",
-      "status": "unqualified",
-      "activity": 99,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1438,
-      "name": "Stephane Myricks",
-      "country": {
-        "name": "Honduras",
-        "code": "hn"
-      },
-      "company": "Portland Central Thriftlodge",
-      "date": "2018-05-28",
-      "status": "renewal",
-      "activity": 51,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1439,
-      "name": "Quentin Swayze",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Ulbrich Trucking",
-      "date": "2019-02-11",
-      "status": "negotiation",
-      "activity": 37,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1440,
-      "name": "Annmarie Castros",
-      "country": {
-        "name": "Jamaica",
-        "code": "jm"
-      },
-      "company": "Tipiak Inc",
-      "date": "2015-08-24",
-      "status": "qualified",
-      "activity": 46,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1441,
-      "name": "Shonda Greenbush",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Saint George Well Drilling",
-      "date": "2018-06-01",
-      "status": "negotiation",
-      "activity": 16,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1442,
-      "name": "Cecil Lapage",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Hawkes, Douglas D",
-      "date": "2018-11-09",
-      "status": "qualified",
-      "activity": 43,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1443,
-      "name": "Jeanice Claucherty",
-      "country": {
-        "name": "Lithuania",
-        "code": "lt"
-      },
-      "company": "Accurel Systems Intrntl Corp",
-      "date": "2016-06-02",
-      "status": "qualified",
-      "activity": 48,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1444,
-      "name": "Josphine Villanueva",
-      "country": {
-        "name": "Japan",
-        "code": "jp"
-      },
-      "company": "Santa Cruz Community Internet",
-      "date": "2019-11-08",
-      "status": "unqualified",
-      "activity": 39,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1445,
-      "name": "Daniel Perruzza",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Gersh \u0026 Danielson",
-      "date": "2017-09-24",
-      "status": "renewal",
-      "activity": 86,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1446,
-      "name": "Cassi Wildfong",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Cobb, James O Esq",
-      "date": "2015-09-08",
-      "status": "qualified",
-      "activity": 85,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1447,
-      "name": "Britt Galam",
-      "country": {
-        "name": "Poland",
-        "code": "pl"
-      },
-      "company": "Wheatley Trucking Company",
-      "date": "2020-10-26",
-      "status": "new",
-      "activity": 69,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1448,
-      "name": "Adell Lipkin",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Systems Graph Inc Ab Dick Dlr",
-      "date": "2017-05-09",
-      "status": "unqualified",
-      "activity": 92,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1449,
-      "name": "Jacqueline Rowling",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "John Hancock Mutl Life Ins Co",
-      "date": "2019-06-28",
-      "status": "negotiation",
-      "activity": 79,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1450,
-      "name": "Lonny Weglarz",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "History Division Of State",
-      "date": "2016-08-12",
-      "status": "new",
-      "activity": 49,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1451,
-      "name": "Lonna Diestel",
-      "country": {
-        "name": "Philippines",
-        "code": "ph"
-      },
-      "company": "Dimmock, Thomas J Esq",
-      "date": "2017-02-10",
-      "status": "proposal",
-      "activity": 9,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1452,
-      "name": "Cristal Samara",
-      "country": {
-        "name": "Australia",
-        "code": "au"
-      },
-      "company": "Intermed Inc",
-      "date": "2016-08-17",
-      "status": "qualified",
-      "activity": 99,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1453,
-      "name": "Kenneth Grenet",
-      "country": {
-        "name": "Croatia",
-        "code": "hr"
-      },
-      "company": "Bank Of New York",
-      "date": "2020-07-24",
-      "status": "negotiation",
-      "activity": 78,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1454,
-      "name": "Elli Mclaird",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Sportmaster Intrnatl",
-      "date": "2017-06-10",
-      "status": "qualified",
-      "activity": 61,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1455,
-      "name": "Alline Jeanty",
-      "country": {
-        "name": "Denmark",
-        "code": "dk"
-      },
-      "company": "W W John Holden Inc",
-      "date": "2015-12-08",
-      "status": "renewal",
-      "activity": 74,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1456,
-      "name": "Sharika Eanes",
-      "country": {
-        "name": "Chile",
-        "code": "cl"
-      },
-      "company": "Maccani \u0026 Delp",
-      "date": "2018-08-16",
-      "status": "qualified",
-      "activity": 14,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1457,
-      "name": "Nu Mcnease",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Amazonia Film Project",
-      "date": "2018-07-03",
-      "status": "negotiation",
-      "activity": 47,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1458,
-      "name": "Daniela Comnick",
-      "country": {
-        "name": "Tunisia",
-        "code": "tn"
-      },
-      "company": "Water \u0026 Sewer Department",
-      "date": "2017-07-07",
-      "status": "negotiation",
-      "activity": 31,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1459,
-      "name": "Cecilia Colaizzo",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Switchcraft Inc",
-      "date": "2019-06-08",
-      "status": "proposal",
-      "activity": 21,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1460,
-      "name": "Leslie Threets",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "C W D C Metal Fabricators",
-      "date": "2016-11-26",
-      "status": "unqualified",
-      "activity": 50,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1461,
-      "name": "Nan Koppinger",
-      "country": {
-        "name": "Norway",
-        "code": "no"
-      },
-      "company": "Shimotani, Grace T",
-      "date": "2020-11-15",
-      "status": "proposal",
-      "activity": 94,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1462,
-      "name": "Izetta Dewar",
-      "country": {
-        "name": "Cuba",
-        "code": "cu"
-      },
-      "company": "Lisatoni, Jean Esq",
-      "date": "2019-11-22",
-      "status": "renewal",
-      "activity": 41,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1463,
-      "name": "Tegan Arceo",
-      "country": {
-        "name": "Iceland",
-        "code": "is"
-      },
-      "company": "Ceramic Tile Sales Inc",
-      "date": "2016-08-07",
-      "status": "new",
-      "activity": 79,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1464,
-      "name": "Ruthann Keener",
-      "country": {
-        "name": "Morocco",
-        "code": "ma"
-      },
-      "company": "Maiden Craft Inc",
-      "date": "2019-04-25",
-      "status": "negotiation",
-      "activity": 43,
-      "representative": {
-        "name": "Elwin Sharvill",
-        "image": "elwinsharvill.png"
-      }
-    },
-    {
-      "id": 1465,
-      "name": "Joni Breland",
-      "country": {
-        "name": "Uruguay",
-        "code": "uy"
-      },
-      "company": "Carriage House Cllsn Rpr Inc",
-      "date": "2018-07-20",
-      "status": "new",
-      "activity": 18,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1466,
-      "name": "Vi Rentfro",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Video Workshop",
-      "date": "2018-10-01",
-      "status": "negotiation",
-      "activity": 99,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1467,
-      "name": "Colette Kardas",
-      "country": {
-        "name": "Honduras",
-        "code": "hn"
-      },
-      "company": "Fresno Tile Center Inc",
-      "date": "2017-08-22",
-      "status": "new",
-      "activity": 14,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1468,
-      "name": "Malcolm Tromblay",
-      "country": {
-        "name": "Uruguay",
-        "code": "uy"
-      },
-      "company": "Versatile Sash \u0026 Woodwork",
-      "date": "2019-11-25",
-      "status": "renewal",
-      "activity": 23,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1469,
-      "name": "Ryan Harnos",
-      "country": {
-        "name": "Paraguay",
-        "code": "py"
-      },
-      "company": "Warner Electric Brk \u0026 Cltch Co",
-      "date": "2019-02-12",
-      "status": "qualified",
-      "activity": 71,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1470,
-      "name": "Jess Chaffins",
-      "country": {
-        "name": "Belarus",
-        "code": "by"
-      },
-      "company": "New York Public Library",
-      "date": "2017-02-12",
-      "status": "qualified",
-      "activity": 91,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1471,
-      "name": "Sharen Bourbon",
-      "country": {
-        "name": "Saudi Arabia",
-        "code": "sa"
-      },
-      "company": "Mccaleb, John A Esq",
-      "date": "2017-06-13",
-      "status": "renewal",
-      "activity": 35,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1472,
-      "name": "Nickolas Juvera",
-      "country": {
-        "name": "Finland",
-        "code": "fi"
-      },
-      "company": "United Oil Co Inc",
-      "date": "2019-01-06",
-      "status": "negotiation",
-      "activity": 14,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1473,
-      "name": "Gary Nunlee",
-      "country": {
-        "name": "Turkey",
-        "code": "tr"
-      },
-      "company": "Irving Foot Center",
-      "date": "2015-07-22",
-      "status": "renewal",
-      "activity": 72,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1474,
-      "name": "Diane Devreese",
-      "country": {
-        "name": "Bolivia",
-        "code": "bo"
-      },
-      "company": "Acme Supply Co",
-      "date": "2018-05-13",
-      "status": "renewal",
-      "activity": 78,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1475,
-      "name": "Roslyn Chavous",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Mcrae, James L",
-      "date": "2018-03-20",
-      "status": "proposal",
-      "activity": 45,
-      "representative": {
-        "name": "Bernardo Dominic",
-        "image": "bernardodominic.png"
-      }
-    },
-    {
-      "id": 1476,
-      "name": "Glory Schieler",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Mcgraths Seafood",
-      "date": "2017-05-13",
-      "status": "proposal",
-      "activity": 34,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1477,
-      "name": "Rasheeda Sayaphon",
-      "country": {
-        "name": "Latvia",
-        "code": "lv"
-      },
-      "company": "Kummerer, J Michael Esq",
-      "date": "2017-02-21",
-      "status": "proposal",
-      "activity": 12,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1478,
-      "name": "Alpha Palaia",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Stoffer, James M Jr",
-      "date": "2017-07-21",
-      "status": "renewal",
-      "activity": 4,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1479,
-      "name": "Refugia Jacobos",
-      "country": {
-        "name": "China",
-        "code": "cn"
-      },
-      "company": "North Central Fl Sfty Cncl",
-      "date": "2020-11-25",
-      "status": "negotiation",
-      "activity": 18,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1480,
-      "name": "Shawnda Yori",
-      "country": {
-        "name": "Luxembourg",
-        "code": "lu"
-      },
-      "company": "Fiorucci Foods Usa Inc",
-      "date": "2018-05-09",
-      "status": "unqualified",
-      "activity": 11,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1481,
-      "name": "Mona Delasancha",
-      "country": {
-        "name": "Hong Kong",
-        "code": "hk"
-      },
-      "company": "Sign All",
-      "date": "2017-10-06",
-      "status": "renewal",
-      "activity": 61,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1482,
-      "name": "Gilma Liukko",
-      "country": {
-        "name": "Morocco",
-        "code": "ma"
-      },
-      "company": "Sammys Steak Den",
-      "date": "2018-10-06",
-      "status": "unqualified",
-      "activity": 34,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1483,
-      "name": "Janey Gabisi",
-      "country": {
-        "name": "Israel",
-        "code": "il"
-      },
-      "company": "Dobscha, Stephen F Esq",
-      "date": "2019-05-22",
-      "status": "unqualified",
-      "activity": 38,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1484,
-      "name": "Lili Paskin",
-      "country": {
-        "name": "Costa Rica",
-        "code": "cr"
-      },
-      "company": "Morgan Custom Homes",
-      "date": "2018-06-11",
-      "status": "unqualified",
-      "activity": 69,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1485,
-      "name": "Loren Asar",
-      "country": {
-        "name": "Italy",
-        "code": "it"
-      },
-      "company": "Olsen Payne \u0026 Company",
-      "date": "2017-12-11",
-      "status": "unqualified",
-      "activity": 16,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1486,
-      "name": "Dorothy Chesterfield",
-      "country": {
-        "name": "Spain",
-        "code": "es"
-      },
-      "company": "Cowan \u0026 Kelly",
-      "date": "2015-08-11",
-      "status": "renewal",
-      "activity": 31,
-      "representative": {
-        "name": "Anna Fali",
-        "image": "annafali.png"
-      }
-    },
-    {
-      "id": 1487,
-      "name": "Gail Similton",
-      "country": {
-        "name": "Malaysia",
-        "code": "my"
-      },
-      "company": "Johnson, Wes Esq",
-      "date": "2016-08-10",
-      "status": "qualified",
-      "activity": 63,
-      "representative": {
-        "name": "Xuxue Feng",
-        "image": "xuxuefeng.png"
-      }
-    },
-    {
-      "id": 1488,
-      "name": "Catalina Tillotson",
-      "country": {
-        "name": "Pakistan",
-        "code": "pk"
-      },
-      "company": "Icn Pharmaceuticals Inc",
-      "date": "2018-08-04",
-      "status": "negotiation",
-      "activity": 13,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1489,
-      "name": "Lawrence Lorens",
-      "country": {
-        "name": "Egypt",
-        "code": "eg"
-      },
-      "company": "New England Sec Equip Co Inc",
-      "date": "2020-04-15",
-      "status": "negotiation",
-      "activity": 82,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1490,
-      "name": "Carlee Boulter",
-      "country": {
-        "name": "Vietnam",
-        "code": "vn"
-      },
-      "company": "Tippett, Troy M Ii",
-      "date": "2016-09-22",
-      "status": "renewal",
-      "activity": 71,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1491,
-      "name": "Thaddeus Ankeny",
-      "country": {
-        "name": "Qatar",
-        "code": "qa"
-      },
-      "company": "Atc Contracting",
-      "date": "2015-03-08",
-      "status": "unqualified",
-      "activity": 78,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1492,
-      "name": "Jovita Oles",
-      "country": {
-        "name": "Sweden",
-        "code": "se"
-      },
-      "company": "Pagano, Philip G Esq",
-      "date": "2019-07-18",
-      "status": "negotiation",
-      "activity": 42,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1493,
-      "name": "Alesia Hixenbaugh",
-      "country": {
-        "name": "Thailand",
-        "code": "th"
-      },
-      "company": "Kwikprint",
-      "date": "2017-07-24",
-      "status": "negotiation",
-      "activity": 23,
-      "representative": {
-        "name": "Ivan Magalhaes",
-        "image": "ivanmagalhaes.png"
-      }
-    },
-    {
-      "id": 1494,
-      "name": "Lai Harabedian",
-      "country": {
-        "name": "Serbia",
-        "code": "rs"
-      },
-      "company": "Buergi \u0026 Madden Scale",
-      "date": "2018-11-11",
-      "status": "new",
-      "activity": 28,
-      "representative": {
-        "name": "Asiya Javayant",
-        "image": "asiyajavayant.png"
-      }
-    },
-    {
-      "id": 1495,
-      "name": "Brittni Gillaspie",
-      "country": {
-        "name": "Senegal",
-        "code": "sn"
-      },
-      "company": "Inner Label",
-      "date": "2019-11-23",
-      "status": "renewal",
-      "activity": 14,
-      "representative": {
-        "name": "Ioni Bowcher",
-        "image": "ionibowcher.png"
-      }
-    },
-    {
-      "id": 1496,
-      "name": "Raylene Kampa",
-      "country": {
-        "name": "Belgium",
-        "code": "be"
-      },
-      "company": "Hermar Inc",
-      "date": "2020-04-22",
-      "status": "unqualified",
-      "activity": 65,
-      "representative": {
-        "name": "Stephen Shaw",
-        "image": "stephenshaw.png"
-      }
-    },
-    {
-      "id": 1497,
-      "name": "Flo Bookamer",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Simonton Howe \u0026 Schneider Pc",
-      "date": "2020-08-10",
-      "status": "unqualified",
-      "activity": 30,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    },
-    {
-      "id": 1498,
-      "name": "Jani Biddy",
-      "country": {
-        "name": "Switzerland",
-        "code": "ch"
-      },
-      "company": "Warehouse Office \u0026 Paper Prod",
-      "date": "2019-11-07",
-      "status": "negotiation",
-      "activity": 20,
-      "representative": {
-        "name": "Onyama Limba",
-        "image": "onyamalimba.png"
-      }
-    },
-    {
-      "id": 1499,
-      "name": "Chauncey Motley",
-      "country": {
-        "name": "Argentina",
-        "code": "ar"
-      },
-      "company": "Affiliated With Travelodge",
-      "date": "2019-04-23",
-      "status": "renewal",
-      "activity": 42,
-      "representative": {
-        "name": "Amy Elsner",
-        "image": "amyelsner.png"
-      }
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/events.json b/public/showcase/resources/demo/data/events.json
deleted file mode 100644
index 4b7d64037c..0000000000
--- a/public/showcase/resources/demo/data/events.json
+++ /dev/null
@@ -1,68 +0,0 @@
-{
-    "data": [
-    	{
-            "id": 1,
-    		"title": "All Day Event",
-    		"start": "2017-02-01"
-    	},
-    	{
-            "id": 2,
-    		"title": "Long Event",
-    		"start": "2017-02-07",
-    		"end": "2017-02-10"
-    	},
-    	{
-    		"id": 3,
-    		"title": "Repeating Event",
-    		"start": "2017-02-09T16:00:00"
-    	},
-    	{
-    		"id": 4,
-    		"title": "Repeating Event",
-    		"start": "2017-02-16T16:00:00"
-    	},
-    	{
-            "id": 5,
-    		"title": "Conference",
-    		"start": "2017-02-11",
-    		"end": "2017-02-13"
-    	},
-    	{
-            "id": 6,
-    		"title": "Meeting",
-    		"start": "2017-02-12T10:30:00",
-    		"end": "2017-02-12T12:30:00"
-    	},
-    	{
-            "id": 7,
-    		"title": "Lunch",
-    		"start": "2017-02-12T12:00:00"
-    	},
-    	{
-            "id": 8,
-    		"title": "Meeting",
-    		"start": "2017-02-12T14:30:00"
-    	},
-    	{
-            "id": 9,
-    		"title": "Happy Hour",
-    		"start": "2017-02-12T17:30:00"
-    	},
-    	{
-            "id": 10,
-    		"title": "Dinner",
-    		"start": "2017-02-12T20:00:00"
-    	},
-    	{
-            "id": 11,
-    		"title": "Birthday Party",
-    		"start": "2017-02-13T07:00:00"
-    	},
-    	{
-            "id": 12,
-    		"title": "Click for Google",
-    		"url": "http://google.com/",
-    		"start": "2017-02-28"
-    	}
-    ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/galleria.json b/public/showcase/resources/demo/data/galleria.json
deleted file mode 100644
index c4434780d4..0000000000
--- a/public/showcase/resources/demo/data/galleria.json
+++ /dev/null
@@ -1,94 +0,0 @@
-{
-    "data":[
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria1.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria1s.jpg",
-            "alt": "Description for Image 1",
-            "title": "Title 1"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria2.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria2s.jpg",
-            "alt": "Description for Image 2",
-            "title": "Title 2"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria3.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria3s.jpg",
-            "alt": "Description for Image 3",
-            "title": "Title 3"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria4.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria4s.jpg",
-            "alt": "Description for Image 4",
-            "title": "Title 4"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria5.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria5s.jpg",
-            "alt": "Description for Image 5",
-            "title": "Title 5"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria6.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria6s.jpg",
-            "alt": "Description for Image 6",
-            "title": "Title 6"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria7.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria7s.jpg",
-            "alt": "Description for Image 7",
-            "title": "Title 7"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria8.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria8s.jpg",
-            "alt": "Description for Image 8",
-            "title": "Title 8"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria9.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria9s.jpg",
-            "alt": "Description for Image 9",
-            "title": "Title 9"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria10.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria10s.jpg",
-            "alt": "Description for Image 10",
-            "title": "Title 10"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria11.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria11s.jpg",
-            "alt": "Description for Image 11",
-            "title": "Title 11"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria12.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria12s.jpg",
-            "alt": "Description for Image 12",
-            "title": "Title 12"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria13.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria13s.jpg",
-            "alt": "Description for Image 13",
-            "title": "Title 13"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria14.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria14s.jpg",
-            "alt": "Description for Image 14",
-            "title": "Title 14"
-        },
-        {
-            "previewImageSrc": "showcase/resources/demo/images/galleria/galleria15.jpg",
-            "thumbnailImageSrc": "showcase/resources/demo/images/galleria/galleria15s.jpg",
-            "alt": "Description for Image 15",
-            "title": "Title 15"
-        }
-    ]
-}
diff --git a/public/showcase/resources/demo/data/icons.json b/public/showcase/resources/demo/data/icons.json
deleted file mode 100644
index 57363182a5..0000000000
--- a/public/showcase/resources/demo/data/icons.json
+++ /dev/null
@@ -1 +0,0 @@
-{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M677.12 343.467c2.409-1.206 5.248-1.911 8.253-1.911 10.368 0 18.773 8.405 18.773 18.773 0 0.824-0.053 1.636-0.156 2.432l0.010-0.094v298.667c0.093 0.702 0.146 1.514 0.146 2.338 0 10.368-8.405 18.773-18.773 18.773-3.004 0-5.844-0.706-8.362-1.96l0.109 0.049-261.547-149.333c-6.247-4.187-10.304-11.22-10.304-19.2s4.057-15.013 10.221-19.148l0.083-0.052z","M332.8 341.333h59.733c7.069 0 12.8 5.731 12.8 12.8v315.733c0 7.069-5.731 12.8-12.8 12.8h-59.733c-7.069 0-12.8-5.731-12.8-12.8v-315.733c0-7.069 5.731-12.8 12.8-12.8z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["step-backward-alt"]},"attrs":[{},{}],"properties":{"order":211,"id":184,"name":"step-backward-alt","prevSize":64,"code":59820},"setIdx":0,"setId":1,"iconIdx":0},{"icon":{"paths":["M346.88 343.467c-2.409-1.206-5.248-1.911-8.253-1.911-10.368 0-18.773 8.405-18.773 18.773 0 0.824 0.053 1.636 0.156 2.432l-0.010-0.094v298.667c-0.093 0.702-0.146 1.514-0.146 2.338 0 10.368 8.405 18.773 18.773 18.773 3.004 0 5.844-0.706 8.362-1.96l-0.109 0.049 261.547-149.333c6.247-4.187 10.304-11.22 10.304-19.2s-4.057-15.013-10.221-19.148l-0.083-0.052z","M631.467 341.333h59.733c7.069 0 12.8 5.731 12.8 12.8v315.733c0 7.069-5.731 12.8-12.8 12.8h-59.733c-7.069 0-12.8-5.731-12.8-12.8v-315.733c0-7.069 5.731-12.8 12.8-12.8z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["step-forward-alt"]},"attrs":[{},{}],"properties":{"order":210,"id":183,"name":"step-forward-alt","prevSize":64,"code":59821},"setIdx":0,"setId":1,"iconIdx":1},{"icon":{"paths":["M500.053 492.8l-298.667-149.333c-2.74-1.373-5.969-2.176-9.387-2.176-11.782 0-21.333 9.551-21.333 21.333 0 0.015 0 0.030 0 0.045l-0-0.002v298.667c-0 0.013-0 0.028-0 0.043 0 11.782 9.551 21.333 21.333 21.333 3.417 0 6.647-0.804 9.51-2.232l-0.124 0.056 298.667-149.333c7.181-3.536 12.034-10.801 12.034-19.2s-4.854-15.664-11.909-19.144l-0.125-0.056z","M841.387 492.8l-298.667-149.333c-2.74-1.373-5.969-2.176-9.387-2.176-11.782 0-21.333 9.551-21.333 21.333 0 0.015 0 0.030 0 0.045l-0-0.002v298.667c-0 0.013-0 0.028-0 0.043 0 11.782 9.551 21.333 21.333 21.333 3.417 0 6.647-0.804 9.51-2.232l-0.124 0.056 298.667-149.333c7.181-3.536 12.034-10.801 12.034-19.2s-4.854-15.664-11.909-19.144l-0.125-0.056z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["forward"]},"attrs":[{},{}],"properties":{"order":209,"id":182,"name":"forward","prevSize":64,"code":59822},"setIdx":0,"setId":1,"iconIdx":2},{"icon":{"paths":["M523.947 492.8l298.667-149.333c2.74-1.373 5.969-2.176 9.387-2.176 11.782 0 21.333 9.551 21.333 21.333 0 0.015-0 0.030-0 0.045l0-0.002v298.667c0 0.013 0 0.028 0 0.043 0 11.782-9.551 21.333-21.333 21.333-3.417 0-6.647-0.804-9.51-2.232l0.124 0.056-298.667-149.333c-7.181-3.536-12.034-10.801-12.034-19.2s4.854-15.664 11.909-19.144l0.125-0.056z","M182.613 492.8l298.667-149.333c2.74-1.373 5.969-2.176 9.387-2.176 11.782 0 21.333 9.551 21.333 21.333 0 0.015-0 0.030-0 0.045l0-0.002v298.667c0 0.013 0 0.028 0 0.043 0 11.782-9.551 21.333-21.333 21.333-3.417 0-6.647-0.804-9.51-2.232l0.124 0.056-298.667-149.333c-7.181-3.536-12.034-10.801-12.034-19.2s4.854-15.664 11.909-19.144l0.125-0.056z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["backward"]},"attrs":[{},{}],"properties":{"order":208,"id":181,"name":"backward","prevSize":64,"code":59823},"setIdx":0,"setId":1,"iconIdx":3},{"icon":{"paths":["M826.453 343.467c2.409-1.206 5.248-1.911 8.253-1.911 10.368 0 18.773 8.405 18.773 18.773 0 0.824-0.053 1.636-0.156 2.432l0.010-0.094v298.667c0.093 0.702 0.146 1.514 0.146 2.338 0 10.368-8.405 18.773-18.773 18.773-3.004 0-5.844-0.706-8.362-1.96l0.109 0.049-261.547-149.333c-6.247-4.187-10.304-11.22-10.304-19.2s4.057-15.013 10.221-19.148l0.083-0.052z","M527.787 343.467c2.409-1.206 5.248-1.911 8.253-1.911 10.368 0 18.773 8.405 18.773 18.773 0 0.824-0.053 1.636-0.156 2.432l0.010-0.094v298.667c0.093 0.702 0.146 1.514 0.146 2.338 0 10.368-8.405 18.773-18.773 18.773-3.004 0-5.844-0.706-8.362-1.96l0.109 0.049-261.547-149.333c-6.247-4.187-10.304-11.22-10.304-19.2s4.057-15.013 10.221-19.148l0.083-0.052z","M183.467 341.333h59.733c7.069 0 12.8 5.731 12.8 12.8v315.733c0 7.069-5.731 12.8-12.8 12.8h-59.733c-7.069 0-12.8-5.731-12.8-12.8v-315.733c0-7.069 5.731-12.8 12.8-12.8z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["fast-backward"]},"attrs":[{},{},{}],"properties":{"order":207,"id":180,"name":"fast-backward","prevSize":64,"code":59824},"setIdx":0,"setId":1,"iconIdx":4},{"icon":{"paths":["M197.547 343.467c-2.409-1.206-5.248-1.911-8.253-1.911-10.368 0-18.773 8.405-18.773 18.773 0 0.824 0.053 1.636 0.156 2.432l-0.010-0.094v298.667c-0.093 0.702-0.146 1.514-0.146 2.338 0 10.368 8.405 18.773 18.773 18.773 3.004 0 5.844-0.706 8.362-1.96l-0.109 0.049 261.547-149.333c6.247-4.187 10.304-11.22 10.304-19.2s-4.057-15.013-10.221-19.148l-0.083-0.052z","M496.213 343.467c-2.409-1.206-5.248-1.911-8.253-1.911-10.368 0-18.773 8.405-18.773 18.773 0 0.824 0.053 1.636 0.156 2.432l-0.010-0.094v298.667c-0.093 0.702-0.146 1.514-0.146 2.338 0 10.368 8.405 18.773 18.773 18.773 3.004 0 5.844-0.706 8.362-1.96l-0.109 0.049 261.547-149.333c6.247-4.187 10.304-11.22 10.304-19.2s-4.057-15.013-10.221-19.148l-0.083-0.052z","M780.8 341.333h59.733c7.069 0 12.8 5.731 12.8 12.8v315.733c0 7.069-5.731 12.8-12.8 12.8h-59.733c-7.069 0-12.8-5.731-12.8-12.8v-315.733c0-7.069 5.731-12.8 12.8-12.8z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["fast-forward"]},"attrs":[{},{},{}],"properties":{"order":206,"id":179,"name":"fast-forward","prevSize":64,"code":59825},"setIdx":0,"setId":1,"iconIdx":5},{"icon":{"paths":["M362.667 170.667h42.667c23.564 0 42.667 19.103 42.667 42.667v597.333c0 23.564-19.103 42.667-42.667 42.667h-42.667c-23.564 0-42.667-19.103-42.667-42.667v-597.333c0-23.564 19.103-42.667 42.667-42.667z","M618.667 170.667h42.667c23.564 0 42.667 19.103 42.667 42.667v597.333c0 23.564-19.103 42.667-42.667 42.667h-42.667c-23.564 0-42.667-19.103-42.667-42.667v-597.333c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["pause"]},"attrs":[{},{}],"properties":{"order":205,"id":178,"name":"pause","prevSize":64,"code":59826},"setIdx":0,"setId":1,"iconIdx":6},{"icon":{"paths":["M829.867 474.027l-597.333-298.667c-5.59-2.877-12.198-4.564-19.2-4.564-23.519 0-42.593 19.029-42.666 42.531l-0 0.007v597.333c-0.001 0.089-0.001 0.193-0.001 0.298 0 23.564 19.103 42.667 42.667 42.667 7.003 0 13.611-1.687 19.441-4.677l-0.24 0.112 597.333-298.667c14.123-7.152 23.635-21.559 23.635-38.187s-9.512-31.034-23.391-38.075l-0.243-0.112z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["play"]},"attrs":[{}],"properties":{"order":204,"id":177,"name":"play","prevSize":64,"code":59827},"setIdx":0,"setId":1,"iconIdx":7},{"icon":{"paths":["M576 512c0 35.346-28.654 64-64 64s-64-28.654-64-64c0-35.346 28.654-64 64-64s64 28.654 64 64z","M753.493 270.507c-61.756-61.689-147.035-99.84-241.225-99.84-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c94.19 0 179.469-38.151 241.228-99.843l-0.003 0.003c61.849-61.782 100.109-147.17 100.109-241.493s-38.259-179.711-100.105-241.49l-0.003-0.003zM331.093 692.907l90.453-271.36 271.36-90.453-90.453 271.36z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["compass"]},"attrs":[{},{}],"properties":{"order":203,"id":176,"name":"compass","prevSize":64,"code":59819},"setIdx":0,"setId":1,"iconIdx":8},{"icon":{"paths":["M170.667 384v341.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-341.333zM341.333 426.667c0.636-0.024 1.382-0.038 2.132-0.038 33.461 0 60.587 27.126 60.587 60.587s-27.126 60.587-60.587 60.587c-33.461 0-60.587-27.126-60.587-60.587 0-0.137 0-0.274 0.001-0.41l-0 0.021c-0.004-0.256-0.006-0.557-0.006-0.859 0-32.456 26.072-58.823 58.415-59.3l0.045-0.001zM426.667 652.373c0.002 0.128 0.003 0.279 0.003 0.43 0 16.346-13.131 29.625-29.421 29.863l-0.022 0h-111.787c-16.312-0.239-29.443-13.518-29.443-29.864 0-0.151 0.001-0.302 0.003-0.452l-0 0.023v-59.733c0.056-23.181 13.030-43.319 32.102-53.6l0.324-0.16c13.093 14.472 31.942 23.526 52.907 23.526s39.814-9.054 52.852-23.465l0.055-0.061c19.397 10.441 32.371 30.579 32.427 53.752l0 0.008zM768 669.867c-0.229 6.975-5.825 12.571-12.779 12.799l-0.021 0.001h-230.4c-6.975-0.229-12.571-5.825-12.799-12.779l-0.001-0.021v-17.067c0.229-6.975 5.825-12.571 12.779-12.799l0.021-0.001h230.4c6.975 0.229 12.571 5.825 12.799 12.779l0.001 0.021zM768 584.533c-0.229 6.975-5.825 12.571-12.779 12.799l-0.021 0.001h-230.4c-6.975-0.229-12.571-5.825-12.799-12.779l-0.001-0.021v-17.067c0.229-6.975 5.825-12.571 12.779-12.799l0.021-0.001h230.4c6.975 0.229 12.571 5.825 12.799 12.779l0.001 0.021zM768 499.2c-0.229 6.975-5.825 12.571-12.779 12.799l-0.021 0.001h-230.4c-6.975-0.229-12.571-5.825-12.799-12.779l-0.001-0.021v-17.067c0.229-6.975 5.825-12.571 12.779-12.799l0.021-0.001h230.4c6.975 0.229 12.571 5.825 12.799 12.779l0.001 0.021z","M810.667 256h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 42.667h682.667v-42.667c0-23.564-19.103-42.667-42.667-42.667v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["id-card"]},"attrs":[{},{}],"properties":{"order":202,"id":175,"name":"id-card","prevSize":64,"code":59818},"setIdx":0,"setId":1,"iconIdx":9},{"icon":{"paths":["M853.333 448v-149.333c0-23.564-19.103-42.667-42.667-42.667v0h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 149.333c35.346 0 64 28.654 64 64s-28.654 64-64 64v0 149.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-149.333c-35.346 0-64-28.654-64-64s28.654-64 64-64v0zM746.667 659.2c0 18.851-15.282 34.133-34.133 34.133h-401.067c-18.851 0-34.133-15.282-34.133-34.133h-0v-294.4c0-18.851 15.282-34.133 34.133-34.133h401.067c18.851 0 34.133 15.282 34.133 34.133h-0z","M320 373.333h384v277.333h-384v-277.333z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["ticket"]},"attrs":[{},{}],"properties":{"order":201,"id":174,"name":"ticket","prevSize":64,"code":59817},"setIdx":0,"setId":1,"iconIdx":10},{"icon":{"paths":["M587.52 364.8c-4.29-0.233-7.68-3.768-7.68-8.095 0-0.004 0-0.008 0-0.012l-0 0.001v-186.027h-256c-37.572 0.479-67.845 31.048-67.845 68.688 0 0.302 0.002 0.603 0.006 0.904l-0-0.046v543.573c-0.003 0.255-0.005 0.557-0.005 0.859 0 37.64 30.274 68.209 67.8 68.688l0.045 0h376.32c37.572-0.479 67.845-31.048 67.845-68.688 0-0.302-0.002-0.603-0.006-0.904l0 0.046v-418.987zM707.84 783.787c0.008 0.131 0.012 0.283 0.012 0.437 0 4.331-3.397 7.869-7.672 8.095l-0.020 0.001h-376.32c-4.295-0.227-7.692-3.765-7.692-8.096 0-0.154 0.004-0.307 0.013-0.458l-0.001 0.021v-543.573c-0.008-0.131-0.012-0.283-0.012-0.437 0-4.331 3.397-7.869 7.672-8.095l0.020-0.001h195.84v125.013c-0.008 0.382-0.012 0.833-0.012 1.285 0 37.642 30.277 68.213 67.807 68.688l0.045 0h120.32z","M653.227 327.68h94.293c20.48 0 18.773-17.493 18.773-39.253v-6.4l-106.667-111.36h-15.787c-16.213 0-28.16 0-28.16 19.627v98.133c-0.006 0.257-0.010 0.559-0.010 0.863 0 20.911 16.715 37.918 37.512 38.39l0.044 0.001z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["file-o"]},"attrs":[{},{}],"properties":{"order":200,"id":173,"name":"file-o","prevSize":64,"code":59816},"setIdx":0,"setId":1,"iconIdx":11},{"icon":{"paths":["M844.373 426.667l-223.147-186.88c-16.64-11.947-42.667 0-42.667 16.213v117.333h-395.093c-0.129-0.005-0.282-0.008-0.434-0.008-6.834 0-12.373 5.54-12.373 12.373 0 0.153 0.003 0.305 0.008 0.456l-0.001-0.022v390.4c-0.005 0.129-0.008 0.282-0.008 0.434 0 6.834 5.54 12.373 12.373 12.373 0.153 0 0.305-0.003 0.456-0.008l-0.022 0.001h111.787c0.129 0.005 0.282 0.008 0.434 0.008 6.834 0 12.373-5.54 12.373-12.373 0-0.153-0.003-0.305-0.008-0.456l0.001 0.022v-264.533h270.507v117.333c0 18.347 26.027 28.16 42.667 15.787l223.147-186.453c5.407-3.359 8.953-9.265 8.953-16s-3.546-12.641-8.873-15.954l-0.080-0.046z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["reply"]},"attrs":[{}],"properties":{"order":199,"id":172,"name":"reply","prevSize":64,"code":59815},"setIdx":0,"setId":1,"iconIdx":12},{"icon":{"paths":["M170.667 512c0.044 14.486 5.902 27.595 15.363 37.123l-0.003-0.003 289.707 288.853c9.303 9.301 22.083 15.126 36.222 15.359l0.044 0.001c14.348-0.065 27.315-5.925 36.691-15.357l0.003-0.003 288.427-289.28c9.455-9.361 15.31-22.343 15.31-36.693s-5.855-27.332-15.306-36.689l-0.004-0.004-287.573-289.28c-9.43-9.479-22.483-15.346-36.907-15.346s-27.477 5.866-36.904 15.344l-0.002 0.002-289.707 288.853c-9.458 9.525-15.316 22.634-15.36 37.112l-0 0.008zM447.573 512v64.427l-96-96.427 96-96v64h160.853v192h-64.427v-128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["directions-alt"]},"attrs":[{}],"properties":{"order":195,"id":171,"name":"directions-alt","prevSize":64,"code":59813},"setIdx":0,"setId":1,"iconIdx":13},{"icon":{"paths":["M837.973 474.88l-289.707-288.853c-9.43-9.479-22.483-15.346-36.907-15.346s-27.477 5.866-36.904 15.344l-0.002 0.002-288.427 289.28c-9.455 9.361-15.31 22.343-15.31 36.693s5.855 27.332 15.306 36.689l0.004 0.004 288.427 289.28c9.431 9.49 22.492 15.364 36.925 15.364 0.219 0 0.437-0.001 0.655-0.004l-0.033 0c0.007 0 0.014 0 0.022 0 14.486 0 27.602-5.87 37.098-15.36l-0 0 289.707-288.853c9.504-9.498 15.382-22.623 15.382-37.12s-5.878-27.622-15.382-37.12l-0-0zM480 512v128h-64.427v-192.427h160.853v-63.573l96 96.427-96 96.427v-64.853z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["directions"]},"attrs":[{}],"properties":{"order":196,"id":170,"name":"directions","prevSize":64,"code":59814},"setIdx":0,"setId":1,"iconIdx":14},{"icon":{"paths":["M853.333 542.72c0.534-4.094 1.28-7.706 2.266-11.219l-0.132 0.553v-73.813c0.001-0.127 0.001-0.277 0.001-0.428 0-39.438-31.85-71.437-71.232-71.679l-0.023-0h-250.88l39.68-120.747c2.411-6.871 3.804-14.794 3.804-23.041 0-39.425-31.829-71.416-71.193-71.678l-0.025-0h-7.68c-118.613 119.893-177.92 184.747-177.92 195.413v487.253h391.253c11.52 0 56.747-103.68 142.080-310.613z","M241.92 853.333h35.413v-469.333h-35.413c-39.404 0.241-71.255 32.241-71.255 71.679 0 0.15 0 0.301 0.001 0.451l-0-0.023v325.12c-0.001 0.127-0.001 0.277-0.001 0.428 0 39.438 31.85 71.437 71.232 71.679l0.023 0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["thumbs-up"]},"attrs":[{},{}],"properties":{"order":191,"id":169,"name":"thumbs-up","prevSize":64,"code":59811},"setIdx":0,"setId":1,"iconIdx":15},{"icon":{"paths":["M172.8 481.28c0.116 1.595 0.181 3.457 0.181 5.333s-0.066 3.738-0.195 5.582l0.014-0.248v73.813c-0.030 0.777-0.047 1.688-0.047 2.604 0 38.704 30.676 70.244 69.041 71.632l0.127 0.004h248.747l-39.68 120.747c-1.979 6.257-3.119 13.453-3.119 20.916 0 39.184 31.442 71.025 70.472 71.67l0.060 0.001h7.68c118.613-119.893 177.92-184.747 177.92-195.413v-487.253h-391.253c-11.52 0-56.747 103.68-139.947 310.613z","M782.080 170.667h-35.413v469.333h35.413c39.404-0.241 71.255-32.241 71.255-71.679 0-0.15-0-0.301-0.001-0.451l0 0.023v-325.12c0.001-0.127 0.001-0.277 0.001-0.428 0-39.438-31.85-71.437-71.232-71.679l-0.023-0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["thumbs-down"]},"attrs":[{},{}],"properties":{"order":192,"id":168,"name":"thumbs-down","prevSize":64,"code":59812},"setIdx":0,"setId":1,"iconIdx":16},{"icon":{"paths":["M460.373 667.733h-59.307v-480c0-9.387-11.093-17.067-24.32-17.067h-49.493c-13.227 0-24.32 7.68-24.32 17.067v480h-59.307c-10.938 0.179-19.736 9.087-19.736 20.051 0 4.501 1.483 8.655 3.986 12.002l-0.038-0.052 108.373 145.493c3.615 4.855 9.337 7.965 15.787 7.965s12.172-3.111 15.75-7.913l0.037-0.052 108.373-145.493c2.466-3.294 3.949-7.448 3.949-11.949 0-10.963-8.798-19.872-19.719-20.051l-0.017-0z","M665.173 614.4l24.32-2.987v235.947c-0.055 0.283-0.087 0.608-0.087 0.94 0 2.828 2.292 5.12 5.12 5.12 0.333 0 0.658-0.032 0.973-0.092l-0.032 0.005h40.533c4.267 0 6.4-2.133 6.4-5.973v-286.72c0-3.84 0-5.973-6.4-5.973l-71.68 9.387c-0.004-0-0.008-0-0.013-0-4.006 0-7.253 3.247-7.253 7.253 0 0.15 0.005 0.299 0.014 0.447l-0.001-0.020v35.84c-0.022 0.2-0.035 0.433-0.035 0.668 0 3.535 2.865 6.4 6.4 6.4 0.62 0 1.22-0.088 1.787-0.253l-0.045 0.011z","M740.267 170.667h-51.2c-38.827 0-59.733 18.347-59.733 52.053v78.933c0 34.133 20.907 52.48 59.733 52.48h36.267l-51.627 106.667c-2.56 5.12 0 8.533 6.4 8.533h42.667c0.364 0.050 0.785 0.079 1.213 0.079 3.823 0 7.113-2.286 8.576-5.566l0.024-0.060 60.587-128c2.692-5.434 4.267-11.832 4.267-18.599 0-0.061-0-0.123-0-0.184l0 0.009v-94.293c2.56-33.707-18.347-52.053-57.173-52.053zM743.68 289.707c0 9.813-5.973 14.933-17.067 14.933h-23.893c-11.093 0-17.067-5.12-17.067-14.933v-55.040c0-9.387 5.973-14.933 17.067-14.933h22.613c11.093 0 17.067 5.547 17.067 14.933z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-numeric-down-alt"]},"attrs":[{},{},{}],"properties":{"order":181,"id":167,"name":"sort-numeric-down-alt","prevSize":64,"code":59798},"setIdx":0,"setId":1,"iconIdx":17},{"icon":{"paths":["M367.787 178.773c-3.615-4.855-9.337-7.965-15.787-7.965s-12.172 3.111-15.75 7.913l-0.037 0.052-108.373 145.493c-2.466 3.294-3.949 7.448-3.949 11.949 0 10.963 8.798 19.872 19.719 20.051l0.017 0h59.307v480c0 9.387 11.093 17.067 24.32 17.067h49.493c13.227 0 24.32-7.68 24.32-17.067v-480h59.307c10.938-0.179 19.736-9.087 19.736-20.051 0-4.501-1.483-8.655-3.986-12.002l0.038 0.052z","M665.173 571.733l24.32-2.987v235.947c-0.055 0.283-0.087 0.608-0.087 0.94 0 2.828 2.292 5.12 5.12 5.12 0.333 0 0.658-0.032 0.973-0.092l-0.032 0.005h40.533c4.267 0 6.4-2.133 6.4-5.973v-286.72c0-3.84 0-5.973-6.4-5.973l-71.68 9.387c-0.004-0-0.008-0-0.013-0-4.006 0-7.253 3.247-7.253 7.253 0 0.15 0.005 0.299 0.014 0.447l-0.001-0.020v35.84c-0.022 0.2-0.035 0.433-0.035 0.668 0 3.535 2.865 6.4 6.4 6.4 0.62 0 1.22-0.088 1.787-0.253l-0.045 0.011z","M740.267 170.667h-51.2c-38.827 0-59.733 18.347-59.733 52.053v78.933c0 34.133 20.907 52.48 59.733 52.48h36.267l-51.627 106.667c-2.56 5.12 0 8.533 6.4 8.533h42.667c0.364 0.050 0.785 0.079 1.213 0.079 3.823 0 7.113-2.286 8.576-5.566l0.024-0.060 60.587-128c2.692-5.434 4.267-11.832 4.267-18.599 0-0.061-0-0.123-0-0.184l0 0.009v-94.293c2.56-33.707-18.347-52.053-57.173-52.053zM743.68 289.707c0 9.813-5.973 14.933-17.067 14.933h-23.893c-11.093 0-17.067-5.12-17.067-14.933v-55.040c0-9.387 5.973-14.933 17.067-14.933h22.613c11.093 0 17.067 5.547 17.067 14.933z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-numeric-up-alt"]},"attrs":[{},{},{}],"properties":{"order":182,"id":166,"name":"sort-numeric-up-alt","prevSize":64,"code":59799},"setIdx":0,"setId":1,"iconIdx":18},{"icon":{"paths":["M439.040 667.733h-59.307v-480c0-9.387-11.093-17.067-24.32-17.067h-49.493c-13.227 0-24.32 7.68-24.32 17.067v480h-59.307c-10.938 0.179-19.736 9.087-19.736 20.051 0 4.501 1.483 8.655 3.986 12.002l-0.038-0.052 108.373 145.493c3.615 4.855 9.337 7.965 15.787 7.965s12.172-3.111 15.75-7.913l0.037-0.052 108.373-145.493c2.466-3.294 3.949-7.448 3.949-11.949 0-10.963-8.798-19.872-19.719-20.051l-0.017-0z","M572.16 853.333h54.187c4.693 0 7.253 0 8.107-5.12l13.653-54.613h90.027l14.080 54.613c1.073 3.033 3.916 5.167 7.257 5.167 0.299 0 0.595-0.017 0.885-0.050l-0.035 0.003h53.76c5.973 0 8.107-2.133 6.827-6.4l-85.333-287.147c-1.056-3.063-3.914-5.224-7.277-5.224-0.444 0-0.879 0.038-1.302 0.11l0.045-0.006h-68.693c-4.693 0-7.68 0-8.533 5.12l-85.333 287.147c-0.427 6.4 2.133 6.4 7.68 6.4zM693.333 619.947l32 128h-64.427z","M810.667 170.667h-219.307c-5.973 0-9.387 0-9.387 6.4v36.267c0 3.84 3.413 5.973 9.387 5.973h121.173l-145.92 240.213c-3.413 5.12 0 8.96 8.96 8.96h227.413c5.973 0 9.387-2.56 9.387-6.4v-35.413c0-3.84-3.413-5.547-9.387-5.547h-128l145.493-240.64c2.56-5.973 0.427-9.813-9.813-9.813z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-alpha-down-alt"]},"attrs":[{},{},{}],"properties":{"order":183,"id":165,"name":"sort-alpha-down-alt","prevSize":64,"code":59800},"setIdx":0,"setId":1,"iconIdx":19},{"icon":{"paths":["M346.453 178.773c-3.615-4.855-9.337-7.965-15.787-7.965s-12.172 3.111-15.75 7.913l-0.037 0.052-108.373 145.493c-2.466 3.294-3.949 7.448-3.949 11.949 0 10.963 8.798 19.872 19.719 20.051l0.017 0h59.307v480c0 9.387 11.093 17.067 24.32 17.067h49.493c13.227 0 24.32-7.68 24.32-17.067v-480h59.307c10.938-0.179 19.736-9.087 19.736-20.051 0-4.501-1.483-8.655-3.986-12.002l0.038 0.052z","M572.16 853.333h54.187c4.693 0 7.253 0 8.107-5.12l13.653-54.613h90.027l14.080 54.613c1.073 3.033 3.916 5.167 7.257 5.167 0.299 0 0.595-0.017 0.885-0.050l-0.035 0.003h53.76c5.973 0 8.107-2.133 6.827-6.4l-85.333-287.147c-1.056-3.063-3.914-5.224-7.277-5.224-0.444 0-0.879 0.038-1.302 0.11l0.045-0.006h-68.693c-4.693 0-7.68 0-8.533 5.12l-85.333 287.147c-0.427 6.4 2.133 6.4 7.68 6.4zM693.333 619.947l32 128h-64.427z","M810.667 170.667h-219.307c-5.973 0-9.387 0-9.387 6.4v36.267c0 3.84 3.413 5.973 9.387 5.973h121.173l-145.92 240.213c-3.413 5.12 0 8.96 8.96 8.96h227.413c5.973 0 9.387-2.56 9.387-6.4v-35.413c0-3.84-3.413-5.547-9.387-5.547h-128l145.493-240.64c2.56-5.973 0.427-9.813-9.813-9.813z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-alpha-up-alt"]},"attrs":[{},{},{}],"properties":{"order":184,"id":164,"name":"sort-alpha-up-alt","prevSize":64,"code":59801},"setIdx":0,"setId":1,"iconIdx":20},{"icon":{"paths":["M460.373 667.733h-59.307v-480c0-9.387-11.093-17.067-24.32-17.067h-49.493c-13.227 0-24.32 7.68-24.32 17.067v480h-59.307c-10.938 0.179-19.736 9.087-19.736 20.051 0 4.501 1.483 8.655 3.986 12.002l-0.038-0.052 108.373 145.493c3.615 4.855 9.337 7.965 15.787 7.965s12.172-3.111 15.75-7.913l0.037-0.052 108.373-145.493c2.466-3.294 3.949-7.448 3.949-11.949 0-10.963-8.798-19.872-19.719-20.051l-0.017-0z","M665.173 230.4l24.32-2.987v235.947c-0.055 0.283-0.087 0.608-0.087 0.94 0 2.828 2.292 5.12 5.12 5.12 0.333 0 0.658-0.032 0.973-0.092l-0.032 0.005h40.533c4.267 0 6.4-2.133 6.4-5.973v-286.72c0-3.84 0-5.973-6.4-5.973l-71.68 9.387c-0.004-0-0.008-0-0.013-0-4.006 0-7.253 3.247-7.253 7.253 0 0.15 0.005 0.299 0.014 0.447l-0.001-0.020v35.84c-0.022 0.2-0.035 0.433-0.035 0.668 0 3.535 2.865 6.4 6.4 6.4 0.62 0 1.22-0.088 1.787-0.253l-0.045 0.011z","M740.267 554.667h-51.2c-38.827 0-59.733 18.347-59.733 52.053v78.933c0 34.133 20.907 52.48 59.733 52.48h36.267l-51.627 106.667c-2.56 5.12 0 8.533 6.4 8.533h42.667c0.364 0.050 0.785 0.079 1.213 0.079 3.823 0 7.113-2.286 8.576-5.566l0.024-0.060 60.587-128c2.692-5.434 4.267-11.832 4.267-18.599 0-0.061-0-0.123-0-0.184l0 0.009v-94.293c2.56-33.707-18.347-52.053-57.173-52.053zM743.68 673.707c0 9.813-5.973 14.933-17.067 14.933h-23.893c-11.093 0-17.067-5.12-17.067-14.933v-55.040c0-9.387 5.973-14.933 17.067-14.933h22.613c11.093 0 17.067 5.547 17.067 14.933z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-numeric-down"]},"attrs":[{},{},{}],"properties":{"order":185,"id":163,"name":"sort-numeric-down","prevSize":64,"code":59802},"setIdx":0,"setId":1,"iconIdx":21},{"icon":{"paths":["M367.787 178.773c-3.615-4.855-9.337-7.965-15.787-7.965s-12.172 3.111-15.75 7.913l-0.037 0.052-108.373 145.493c-2.466 3.294-3.949 7.448-3.949 11.949 0 10.963 8.798 19.872 19.719 20.051l0.017 0h59.307v480c0 9.387 11.093 17.067 24.32 17.067h49.493c13.227 0 24.32-7.68 24.32-17.067v-480h59.307c10.938-0.179 19.736-9.087 19.736-20.051 0-4.501-1.483-8.655-3.986-12.002l0.038 0.052z","M665.173 230.4l24.32-2.987v235.947c-0.055 0.283-0.087 0.608-0.087 0.94 0 2.828 2.292 5.12 5.12 5.12 0.333 0 0.658-0.032 0.973-0.092l-0.032 0.005h40.533c4.267 0 6.4-2.133 6.4-5.973v-286.72c0-3.84 0-5.973-6.4-5.973l-71.68 9.387c-0.004-0-0.008-0-0.013-0-4.006 0-7.253 3.247-7.253 7.253 0 0.15 0.005 0.299 0.014 0.447l-0.001-0.020v35.84c-0.022 0.2-0.035 0.433-0.035 0.668 0 3.535 2.865 6.4 6.4 6.4 0.62 0 1.22-0.088 1.787-0.253l-0.045 0.011z","M740.267 554.667h-51.2c-38.827 0-59.733 18.347-59.733 52.053v78.933c0 34.133 20.907 52.48 59.733 52.48h36.267l-51.627 106.667c-2.56 5.12 0 8.533 6.4 8.533h42.667c0.364 0.050 0.785 0.079 1.213 0.079 3.823 0 7.113-2.286 8.576-5.566l0.024-0.060 60.587-128c2.692-5.434 4.267-11.832 4.267-18.599 0-0.061-0-0.123-0-0.184l0 0.009v-94.293c2.56-33.707-18.347-52.053-57.173-52.053zM743.68 673.707c0 9.813-5.973 14.933-17.067 14.933h-23.893c-11.093 0-17.067-5.12-17.067-14.933v-55.040c0-9.387 5.973-14.933 17.067-14.933h22.613c11.093 0 17.067 5.547 17.067 14.933z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-numeric-up"]},"attrs":[{},{},{}],"properties":{"order":186,"id":162,"name":"sort-numeric-up","prevSize":64,"code":59803},"setIdx":0,"setId":1,"iconIdx":22},{"icon":{"paths":["M439.040 667.733h-59.307v-480c0-9.387-11.093-17.067-24.32-17.067h-49.493c-13.227 0-24.32 7.68-24.32 17.067v480h-59.307c-10.938 0.179-19.736 9.087-19.736 20.051 0 4.501 1.483 8.655 3.986 12.002l-0.038-0.052 108.373 145.493c3.615 4.855 9.337 7.965 15.787 7.965s12.172-3.111 15.75-7.913l0.037-0.052 108.373-145.493c2.466-3.294 3.949-7.448 3.949-11.949 0-10.963-8.798-19.872-19.719-20.051l-0.017-0z","M572.16 469.333h54.187c4.693 0 7.253 0 8.107-5.12l13.653-54.613h90.027l14.080 54.613c1.073 3.033 3.916 5.167 7.257 5.167 0.299 0 0.595-0.017 0.885-0.050l-0.035 0.003h53.76c5.973 0 8.107-2.133 6.827-6.4l-85.333-287.147c-1.056-3.063-3.914-5.224-7.277-5.224-0.444 0-0.879 0.038-1.302 0.11l0.045-0.006h-68.693c-4.693 0-7.68 0-8.533 5.12l-85.333 287.147c-0.427 6.4 2.133 6.4 7.68 6.4zM693.333 235.947l32 130.133h-64.427z","M810.667 554.667h-219.307c-5.973 0-9.387 2.133-9.387 6.4v36.267c0 3.84 3.413 5.973 9.387 5.973h121.173l-145.92 240.213c-3.413 5.12 0 8.96 8.96 8.96h227.413c5.973 0 9.387-2.56 9.387-6.4v-35.413c0-3.84-3.413-5.547-9.387-5.547h-128l145.493-240.64c2.56-5.973 0.427-9.813-9.813-9.813z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-alpha-down"]},"attrs":[{},{},{}],"properties":{"order":187,"id":161,"name":"sort-alpha-down","prevSize":64,"code":59804},"setIdx":0,"setId":1,"iconIdx":23},{"icon":{"paths":["M346.453 178.773c-3.615-4.855-9.337-7.965-15.787-7.965s-12.172 3.111-15.75 7.913l-0.037 0.052-108.373 145.493c-2.466 3.294-3.949 7.448-3.949 11.949 0 10.963 8.798 19.872 19.719 20.051l0.017 0h59.307v480c0 9.387 11.093 17.067 24.32 17.067h49.493c13.227 0 24.32-7.68 24.32-17.067v-480h59.307c10.938-0.179 19.736-9.087 19.736-20.051 0-4.501-1.483-8.655-3.986-12.002l0.038 0.052z","M572.16 469.333h54.187c4.693 0 7.253 0 8.107-5.12l13.653-54.613h90.027l14.080 54.613c1.073 3.033 3.916 5.167 7.257 5.167 0.299 0 0.595-0.017 0.885-0.050l-0.035 0.003h53.76c5.973 0 8.107-2.133 6.827-6.4l-85.333-287.147c-1.056-3.063-3.914-5.224-7.277-5.224-0.444 0-0.879 0.038-1.302 0.11l0.045-0.006h-68.693c-4.693 0-7.68 0-8.533 5.12l-85.333 287.147c-0.427 6.4 2.133 6.4 7.68 6.4zM693.333 235.947l32 130.133h-64.427z","M810.667 554.667h-219.307c-5.973 0-9.387 2.133-9.387 6.4v36.267c0 3.84 3.413 5.973 9.387 5.973h121.173l-145.92 240.213c-3.413 5.12 0 8.96 8.96 8.96h227.413c5.973 0 9.387-2.56 9.387-6.4v-35.413c0-3.84-3.413-5.547-9.387-5.547h-128l145.493-240.64c2.56-5.973 0.427-9.813-9.813-9.813z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-alpha-up"]},"attrs":[{},{},{}],"properties":{"order":188,"id":160,"name":"sort-alpha-up","prevSize":64,"code":59805},"setIdx":0,"setId":1,"iconIdx":24},{"icon":{"paths":["M357.12 178.773c-3.615-4.855-9.337-7.965-15.787-7.965s-12.172 3.111-15.75 7.913l-0.037 0.052-108.373 145.493c-2.466 3.294-3.949 7.448-3.949 11.949 0 10.963 8.798 19.872 19.719 20.051l0.017 0h59.307v480c0 9.387 11.093 17.067 24.32 17.067h49.493c13.227 0 24.32-7.68 24.32-17.067v-480h59.307c10.938-0.179 19.736-9.087 19.736-20.051 0-4.501-1.483-8.655-3.986-12.002l0.038 0.052z","M791.040 667.733h-59.307v-480c0-9.387-11.093-17.067-24.32-17.067h-49.493c-13.227 0-24.32 7.68-24.32 17.067v480h-59.307c-10.938 0.179-19.736 9.087-19.736 20.051 0 4.501 1.483 8.655 3.986 12.002l-0.038-0.052 108.373 145.493c3.615 4.855 9.337 7.965 15.787 7.965s12.172-3.111 15.75-7.913l0.037-0.052 108.373-145.493c2.466-3.294 3.949-7.448 3.949-11.949 0-10.963-8.798-19.872-19.719-20.051l-0.017-0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-alt"]},"attrs":[{},{}],"properties":{"order":189,"id":159,"name":"sort-alt","prevSize":64,"code":59806},"setIdx":0,"setId":1,"iconIdx":25},{"icon":{"paths":["M314.453 178.773c-3.615-4.855-9.337-7.965-15.787-7.965s-12.172 3.111-15.75 7.913l-0.037 0.052-108.373 145.493c-2.466 3.294-3.949 7.448-3.949 11.949 0 10.963 8.798 19.872 19.719 20.051l0.017 0h59.307v480c0 9.387 11.093 17.067 24.32 17.067h49.493c13.227 0 24.32-7.68 24.32-17.067v-480h59.307c10.938-0.179 19.736-9.087 19.736-20.051 0-4.501-1.483-8.655-3.986-12.002l0.038 0.052z","M486.4 170.667h349.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-349.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 362.667h264.533c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-264.533c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 554.667h179.2c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-179.2c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 746.667h93.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-93.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z"],"attrs":[{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-amount-up"]},"attrs":[{},{},{},{},{}],"properties":{"order":190,"id":158,"name":"sort-amount-up","prevSize":64,"code":59807},"setIdx":0,"setId":1,"iconIdx":26},{"icon":{"paths":["M282.88 845.227c3.615 4.855 9.337 7.965 15.787 7.965s12.172-3.111 15.75-7.913l0.037-0.052 108.373-145.493c2.466-3.294 3.949-7.448 3.949-11.949 0-10.963-8.798-19.872-19.719-20.051l-0.017-0h-59.307v-480c0-9.387-11.093-17.067-24.32-17.067h-49.493c-13.227 0-24.32 7.68-24.32 17.067v480h-59.307c-10.938 0.179-19.736 9.087-19.736 20.051 0 4.501 1.483 8.655 3.986 12.002l-0.038-0.052z","M486.4 170.667h349.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-349.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 362.667h264.533c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-264.533c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 554.667h179.2c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-179.2c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 746.667h93.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-93.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z"],"attrs":[{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-amount-down"]},"attrs":[{},{},{},{},{}],"properties":{"order":180,"id":157,"name":"sort-amount-down","prevSize":64,"code":59808},"setIdx":0,"setId":1,"iconIdx":27},{"icon":{"paths":["M282.88 845.227c3.615 4.855 9.337 7.965 15.787 7.965s12.172-3.111 15.75-7.913l0.037-0.052 108.373-145.493c2.466-3.294 3.949-7.448 3.949-11.949 0-10.963-8.798-19.872-19.719-20.051l-0.017-0h-59.307v-480c0-9.387-11.093-17.067-24.32-17.067h-49.493c-13.227 0-24.32 7.68-24.32 17.067v480h-59.307c-10.938 0.179-19.736 9.087-19.736 20.051 0 4.501 1.483 8.655 3.986 12.002l-0.038-0.052z","M486.4 170.667h93.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-93.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 362.667h179.2c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-179.2c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 554.667h264.533c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-264.533c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 746.667h349.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-349.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z"],"attrs":[{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-amount-down-alt"]},"attrs":[{},{},{},{},{}],"properties":{"order":179,"id":156,"name":"sort-amount-down-alt","prevSize":64,"code":59809},"setIdx":0,"setId":1,"iconIdx":28},{"icon":{"paths":["M314.453 178.773c-3.615-4.855-9.337-7.965-15.787-7.965s-12.172 3.111-15.75 7.913l-0.037 0.052-108.373 145.493c-2.466 3.294-3.949 7.448-3.949 11.949 0 10.963 8.798 19.872 19.719 20.051l0.017 0h59.307v480c0 9.387 11.093 17.067 24.32 17.067h49.493c13.227 0 24.32-7.68 24.32-17.067v-480h59.307c10.938-0.179 19.736-9.087 19.736-20.051 0-4.501-1.483-8.655-3.986-12.002l0.038 0.052z","M486.4 170.667h93.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-93.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 362.667h179.2c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-179.2c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 554.667h264.533c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-264.533c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z","M486.4 746.667h349.867c9.426 0 17.067 7.641 17.067 17.067v72.533c0 9.426-7.641 17.067-17.067 17.067h-349.867c-9.426 0-17.067-7.641-17.067-17.067v-72.533c0-9.426 7.641-17.067 17.067-17.067z"],"attrs":[{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-amount-up-alt"]},"attrs":[{},{},{},{},{}],"properties":{"order":178,"id":155,"name":"sort-amount-up-alt","prevSize":64,"code":59810},"setIdx":0,"setId":1,"iconIdx":29},{"icon":{"paths":["M841.387 422.4c-40.744-146.209-172.73-251.701-329.355-251.701-188.513 0-341.333 152.82-341.333 341.333 0 156.625 105.492 288.611 249.3 328.782l2.401 0.573c26.832 7.417 57.669 11.766 89.494 11.946l0.106 0h4.693c56.163-0.816 101.379-46.536 101.379-102.816 0-16.135-3.716-31.403-10.34-44.993l0.268 0.609-6.827-14.080c-4.125-8.535-6.536-18.561-6.536-29.15 0-37.703 30.564-68.267 68.267-68.267 10.589 0 20.615 2.411 29.559 6.714l-0.409-0.177 14.080 6.827c12.981 6.356 28.248 10.072 44.384 10.072 56.281 0 102-45.215 102.816-101.302l0.001-0.077c0.020-1.386 0.032-3.023 0.032-4.662 0-31.888-4.373-62.755-12.551-92.033l0.573 2.402zM273.067 456.533c-0-28.277 22.923-51.2 51.2-51.2s51.2 22.923 51.2 51.2c0 28.277-22.923 51.2-51.2 51.2v0c-28.277 0-51.2-22.923-51.2-51.2h0zM358.4 689.067c-28.258-0.025-51.156-22.939-51.156-51.2 0-28.277 22.923-51.2 51.2-51.2s51.2 22.923 51.2 51.2c0 0.75-0.016 1.497-0.048 2.239l0.004-0.106c-1.176 27.344-23.629 49.067-51.156 49.067-0.016 0-0.031-0-0.047-0l0.002 0zM469.333 375.467c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2c28.277 0 51.2 22.923 51.2 51.2v-0c0 28.277-22.923 51.2-51.2 51.2v0zM650.667 409.6c-28.277 0-51.2-22.923-51.2-51.2s22.923-51.2 51.2-51.2c28.277 0 51.2 22.923 51.2 51.2v0c0 0.013 0 0.029 0 0.044 0 28.277-22.923 51.2-51.2 51.2-0.75 0-1.497-0.016-2.239-0.048l0.106 0.004z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["palette"]},"attrs":[{}],"properties":{"order":177,"id":154,"name":"palette","prevSize":64,"code":59797},"setIdx":0,"setId":1,"iconIdx":30},{"icon":{"paths":["M200.533 203.947l68.693 69.12c61.888-62.497 147.711-101.194 242.573-101.194 188.513 0 341.333 152.82 341.333 341.333s-152.82 341.333-341.333 341.333c-154.74 0-285.431-102.968-327.292-244.124l-0.614-2.415c-0.864-3.207-1.36-6.89-1.36-10.688 0-23.564 19.103-42.667 42.667-42.667 0.478 0 0.955 0.008 1.43 0.023l-0.069-0.002c0.033-0 0.071-0 0.11-0 18.678 0 34.552 12.002 40.333 28.714l0.090 0.3c31.908 107.6 129.887 184.75 245.885 184.75 14.723 0 29.156-1.243 43.199-3.629l-1.511 0.212c109.168-24.767 192.85-111.312 213.069-220.152l0.265-1.715c1.174-9.208 1.844-19.86 1.844-30.669 0-141.385-114.615-256-256-256-71.987 0-137.034 29.713-183.546 77.543l-0.057 0.059 12.8 12.8 77.653 79.787c3.1 3.217 5.009 7.599 5.009 12.427 0 9.407-7.249 17.122-16.466 17.862l-0.063 0.004h-219.733c-0.071 0.001-0.155 0.002-0.239 0.002-10.368 0-18.773-8.405-18.773-18.773 0-1.055 0.087-2.090 0.254-3.098l-0.015 0.109v-219.733c0.925-9.111 8.556-16.161 17.833-16.161 4.639 0 8.866 1.762 12.048 4.654l-0.015-0.013z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["undo"]},"attrs":[{}],"properties":{"order":176,"id":153,"name":"undo","prevSize":64,"code":59796},"setIdx":0,"setId":1,"iconIdx":31},{"icon":{"paths":["M810.667 170.667h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 426.667c0 23.564 19.103 42.667 42.667 42.667v0h256v106.667h85.333v-106.667h256c23.564 0 42.667-19.103 42.667-42.667v0-426.667c0-23.564-19.103-42.667-42.667-42.667v0zM768 597.333h-512v-341.333h512z","M362.667 789.333h298.667c11.782 0 21.333 9.551 21.333 21.333v21.333c0 11.782-9.551 21.333-21.333 21.333h-298.667c-11.782 0-21.333-9.551-21.333-21.333v-21.333c0-11.782 9.551-21.333 21.333-21.333z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["desktop"]},"attrs":[{},{}],"properties":{"order":175,"id":152,"name":"desktop","prevSize":64,"code":59795},"setIdx":0,"setId":1,"iconIdx":32},{"icon":{"paths":["M790.187 832v-256h20.48c23.564 0 42.667-19.103 42.667-42.667v0-42.667c0-23.564-19.103-42.667-42.667-42.667v0h-20.48v-256c0-0.005 0-0.011 0-0.017 0-11.782-9.551-21.333-21.333-21.333-0.3 0-0.599 0.006-0.896 0.018l0.043-0.001h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 256h-21.333c-23.564 0-42.667 19.103-42.667 42.667v0 42.667c0 23.564 19.103 42.667 42.667 42.667v0h22.187v256c0 11.782 9.551 21.333 21.333 21.333v0h42.667c11.782 0 21.333-9.551 21.333-21.333v0z","M564.053 832v-106.667h11.947c23.564 0 42.667-19.103 42.667-42.667v0-42.667c0-23.564-19.103-42.667-42.667-42.667v0h-11.947v-405.333c0-11.782-9.551-21.333-21.333-21.333v0h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 405.333h-30.72c-23.564 0-42.667 19.103-42.667 42.667v0 42.667c0 23.564 19.103 42.667 42.667 42.667v0h30.72v106.667c0 11.782 9.551 21.333 21.333 21.333v0h42.667c11.782 0 21.333-9.551 21.333-21.333v0z","M319.147 832v-405.333h22.187c23.564 0 42.667-19.103 42.667-42.667v0-42.667c0-23.564-19.103-42.667-42.667-42.667v0h-22.187v-106.667c0-0.005 0-0.011 0-0.017 0-11.482-9.071-20.845-20.437-21.315l-0.043-0.001h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 106.667h-21.333c-23.564 0-42.667 19.103-42.667 42.667v0 42.667c0 23.564 19.103 42.667 42.667 42.667v0h20.48v405.333c-0 0.005-0 0.011-0 0.017 0 11.782 9.551 21.333 21.333 21.333 0.3 0 0.599-0.006 0.896-0.018l-0.043 0.001h42.667c11.409-0.471 20.48-9.834 20.48-21.316 0-0.006-0-0.012-0-0.018l0 0.001z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sliders-v"]},"attrs":[{},{},{}],"properties":{"order":174,"id":151,"name":"sliders-v","prevSize":64,"code":59793},"setIdx":0,"setId":1,"iconIdx":33},{"icon":{"paths":["M832 233.813h-256v-20.48c0-23.564-19.103-42.667-42.667-42.667v0h-42.667c-23.564 0-42.667 19.103-42.667 42.667v0 20.48h-256c-0.005-0-0.011-0-0.017-0-11.782 0-21.333 9.551-21.333 21.333 0 0.3 0.006 0.599 0.018 0.896l-0.001-0.043v42.667c0 11.782 9.551 21.333 21.333 21.333v0h256v21.333c0 23.564 19.103 42.667 42.667 42.667v0h42.667c23.564 0 42.667-19.103 42.667-42.667v0-22.187h256c0.005 0 0.011 0 0.017 0 11.482 0 20.845-9.071 21.315-20.437l0.001-0.043v-42.667c0.011-0.255 0.017-0.553 0.017-0.853 0-11.782-9.551-21.333-21.333-21.333-0.006 0-0.012 0-0.018 0l0.001-0z","M832 459.947h-106.667v-11.947c0-23.564-19.103-42.667-42.667-42.667v0h-42.667c-23.564 0-42.667 19.103-42.667 42.667v0 11.947h-405.333c-11.782 0-21.333 9.551-21.333 21.333v0 42.667c0 11.782 9.551 21.333 21.333 21.333v0h405.333v30.72c0 23.564 19.103 42.667 42.667 42.667v0h42.667c23.564 0 42.667-19.103 42.667-42.667v0-30.72h106.667c11.782 0 21.333-9.551 21.333-21.333v0-42.667c0-11.782-9.551-21.333-21.333-21.333v0z","M832 704.853h-405.333v-22.187c0-23.564-19.103-42.667-42.667-42.667v0h-42.667c-23.564 0-42.667 19.103-42.667 42.667v0 22.187h-106.667c-0.005-0-0.011-0-0.017-0-11.482 0-20.845 9.071-21.315 20.437l-0.001 0.043v42.667c0 11.782 9.551 21.333 21.333 21.333v0h106.667v21.333c0 23.564 19.103 42.667 42.667 42.667v0h42.667c23.564 0 42.667-19.103 42.667-42.667v0-20.48h405.333c0.005 0 0.011 0 0.017 0 11.782 0 21.333-9.551 21.333-21.333 0-0.3-0.006-0.599-0.018-0.896l0.001 0.043v-42.667c-0.471-11.409-9.834-20.48-21.316-20.48-0.006 0-0.012 0-0.018 0l0.001-0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sliders-h"]},"attrs":[{},{},{}],"properties":{"order":173,"id":150,"name":"sliders-h","prevSize":64,"code":59794},"setIdx":0,"setId":1,"iconIdx":34},{"icon":{"paths":["M961.707 834.987l-193.707-194.987c37.647-53.731 60.16-120.464 60.16-192.456 0-0.14-0-0.279-0-0.419l0 0.022c0-0.018 0-0.039 0-0.060 0-188.513-152.82-341.333-341.333-341.333s-341.333 152.82-341.333 341.333c0 188.513 152.82 341.333 341.333 341.333 70.971 0 136.883-21.66 191.487-58.731l-1.193 0.764 195.84 195.84c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003 30.293-30.293c7.309-7.645 11.808-18.029 11.808-29.465 0-12.484-5.362-23.716-13.908-31.518l-0.033-0.030zM484.693 660.053c-117.821 0-213.333-95.513-213.333-213.333s95.513-213.333 213.333-213.333c117.821 0 213.333 95.513 213.333 213.333v0c0 117.821-95.513 213.333-213.333 213.333v0z","M614.4 405.333h-261.12c-10.468 0.467-18.778 9.067-18.778 19.608 0 0.156 0.002 0.313 0.005 0.468l-0-0.023v43.947c-0.003 0.132-0.005 0.289-0.005 0.445 0 10.541 8.31 19.141 18.736 19.607l0.042 0.001h261.12c10.427-0.228 18.792-8.735 18.792-19.196 0-0.302-0.007-0.602-0.021-0.9l0.002 0.042v-42.667c0.076-0.641 0.119-1.383 0.119-2.136 0-10.496-8.422-19.024-18.876-19.197l-0.016-0z","M526.507 578.56v-261.12c-0.467-10.468-9.067-18.778-19.608-18.778-0.156 0-0.313 0.002-0.468 0.005l0.023-0h-45.227c-0.132-0.003-0.289-0.005-0.445-0.005-10.541 0-19.141 8.31-19.607 18.736l-0.001 0.042v261.12c0.467 10.468 9.067 18.778 19.608 18.778 0.156 0 0.313-0.002 0.468-0.005l-0.023 0h45.227c0.132 0.003 0.289 0.005 0.445 0.005 10.541 0 19.141-8.31 19.607-18.736l0.001-0.042z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["search-plus"]},"attrs":[{},{},{}],"properties":{"order":172,"id":149,"name":"search-plus","prevSize":64,"code":59791},"setIdx":0,"setId":1,"iconIdx":35},{"icon":{"paths":["M914.773 825.6l-195.413-195.84c37.18-53.855 59.388-120.531 59.388-192.394 0-188.513-152.82-341.333-341.333-341.333s-341.333 152.82-341.333 341.333c0 188.513 152.82 341.333 341.333 341.333 71.298 0 137.491-21.86 192.241-59.244l-1.176 0.758 195.84 195.84c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003 29.867-30.293c7.668-7.712 12.407-18.343 12.407-30.080s-4.74-22.368-12.409-30.082l0.002 0.002zM437.76 650.24c-117.821 0-213.333-95.513-213.333-213.333s95.513-213.333 213.333-213.333c117.821 0 213.333 95.513 213.333 213.333v0c0 117.821-95.513 213.333-213.333 213.333v0z","M567.893 394.667h-261.12c-10.468 0.467-18.778 9.067-18.778 19.608 0 0.156 0.002 0.313 0.005 0.468l-0-0.023v45.227c-0.003 0.132-0.005 0.289-0.005 0.445 0 10.541 8.31 19.141 18.736 19.607l0.042 0.001h261.12c10.468-0.467 18.778-9.067 18.778-19.608 0-0.156-0.002-0.313-0.005-0.468l0 0.023v-45.227c0.003-0.132 0.005-0.289 0.005-0.445 0-10.541-8.31-19.141-18.736-19.607l-0.042-0.001z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["search-minus"]},"attrs":[{},{}],"properties":{"order":171,"id":148,"name":"search-minus","prevSize":64,"code":59792},"setIdx":0,"setId":1,"iconIdx":36},{"icon":{"paths":["M640 341.333h106.667c23.467 0 21.333-19.2 21.333-42.667v-7.253l-120.747-120.747h-7.253c-23.467 0-42.667 0-42.667 21.333v106.667c0 23.564 19.103 42.667 42.667 42.667v0z","M597.333 384c-23.564 0-42.667-19.103-42.667-42.667v0-170.667h-256c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h426.667c23.564 0 42.667-19.103 42.667-42.667v0-426.667zM620.8 746.667h-46.080c-7.229-0.065-13.538-3.946-17.016-9.723l-0.050-0.090c-36.267-64.853-21.76-42.667-45.653-89.6-15.669 35.737-30.929 65.148-47.798 93.491l2.145-3.891c-3.334 5.868-9.527 9.772-16.634 9.813l-0.006 0h-46.507c-0.114 0.003-0.249 0.004-0.384 0.004-10.368 0-18.773-8.405-18.773-18.773 0-3.458 0.935-6.697 2.565-9.479l-0.048 0.089 74.24-121.173-74.24-121.173c-1.583-2.694-2.517-5.933-2.517-9.391 0-10.368 8.405-18.773 18.773-18.773 0.135 0 0.27 0.001 0.404 0.004l-0.020-0h46.507c7.113 0.042 13.306 3.945 16.59 9.719l0.050 0.095c14.269 23.986 29.521 53.387 43.233 83.635l2.42 5.965c15.741-35.637 31.139-65.043 48.174-93.352l-2.094 3.752c3.334-5.868 9.527-9.772 16.634-9.813l0.006-0h46.080c0.114-0.003 0.249-0.004 0.384-0.004 10.368 0 18.773 8.405 18.773 18.773 0 3.458-0.935 6.697-2.565 9.479l0.048-0.089c-25.6 42.667-72.96 119.467-74.24 121.173l74.24 121.173c1.583 2.694 2.517 5.933 2.517 9.391 0 10.368-8.405 18.773-18.773 18.773-0.135 0-0.27-0.001-0.404-0.004l0.020 0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["file-excel"]},"attrs":[{},{}],"properties":{"order":170,"id":147,"name":"file-excel","prevSize":64,"code":59790},"setIdx":0,"setId":1,"iconIdx":37},{"icon":{"paths":["M640 341.333h106.667c23.467 0 21.333-19.2 21.333-42.667v-7.253l-120.747-120.747h-7.253c-23.467 0-42.667 0-42.667 21.333v106.667c0 23.564 19.103 42.667 42.667 42.667v0z","M496.213 575.147c-12.139 33.696-24.796 61.846-39.278 88.871l1.732-3.538c24.207-11.362 52.661-21.32 82.237-28.389l3.096-0.624c-19.638-15.136-35.682-33.904-47.331-55.401l-0.456-0.919z","M495.787 449.707c-1.593 7.577-2.505 16.282-2.505 25.201 0 13.231 2.008 25.993 5.735 37.999l-0.242-0.907c7.253-13.227 8.533-62.293-2.987-62.293z","M602.88 640c49.067 20.907 56.747 11.947 56.747 11.947s-3.413-16.64-56.747-11.947z","M371.2 741.547s17.493-7.253 46.080-53.76c-18.43 14.886-33.794 32.698-45.589 52.852l-0.491 0.908z","M597.333 384c-23.564 0-42.667-19.103-42.667-42.667v0-170.667h-256c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h426.667c23.564 0 42.667-19.103 42.667-42.667v0-426.667zM647.68 682.667c-31.706-2.371-60.778-11.736-86.298-26.544l0.965 0.517c-41.061 9.041-76.156 19.758-110.052 32.881l5.092-1.734c-33.707 56.32-57.6 80.213-81.493 80.213-11.296-0.644-21.326-5.589-28.57-13.209l-0.017-0.018c-25.6-29.44 36.693-72.107 72.533-90.88v0c15.787-28.16 38.827-77.653 54.187-114.347-7.959-21.986-12.561-47.362-12.561-73.812 0-10.23 0.688-20.3 2.022-30.165l-0.127 1.15c5.236-11.927 16.944-20.106 30.561-20.106 16.894 0 30.848 12.588 32.994 28.897l0.018 0.169c1.038 7.499 1.63 16.164 1.63 24.967 0 21.591-3.564 42.349-10.135 61.719l0.398-1.353c10.173 30.418 30.181 55.264 56.18 71.353l0.567 0.327c25.6-3.413 79.36-8.533 98.133 9.813 7.062 6.354 11.483 15.524 11.483 25.726 0 19.087-15.473 34.56-34.56 34.56-1.038 0-2.066-0.046-3.081-0.135l0.131 0.009z"],"attrs":[{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["file-pdf"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":169,"id":146,"name":"file-pdf","prevSize":64,"code":59789},"setIdx":0,"setId":1,"iconIdx":38},{"icon":{"paths":["M810.667 170.667h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-597.333c0-23.564-19.103-42.667-42.667-42.667v0zM753.067 406.187l-265.387 265.387c-7.789 8.188-18.767 13.28-30.933 13.28s-23.144-5.092-30.917-13.262l-0.017-0.018-154.453-155.307c-2.615-2.623-4.231-6.243-4.231-10.24s1.617-7.617 4.232-10.24l-0 0 42.667-42.667c2.623-2.615 6.243-4.231 10.24-4.231s7.617 1.617 10.24 4.232l-0-0 123.733 123.733 213.333-213.333 20.48-20.053c2.573-2.722 6.209-4.416 10.24-4.416s7.667 1.694 10.234 4.41l0.006 0.007 42.667 42.667c1.914 2.435 3.069 5.544 3.069 8.923 0 4.46-2.013 8.451-5.18 11.112l-0.022 0.018z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["check-square"]},"attrs":[{}],"properties":{"order":168,"id":145,"name":"check-square","prevSize":64,"code":59788},"setIdx":0,"setId":1,"iconIdx":39},{"icon":{"paths":["M832 682.667h-576v-405.333c0-11.782-9.551-21.333-21.333-21.333v0h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 469.333c0 11.782 9.551 21.333 21.333 21.333v0h640c11.782 0 21.333-9.551 21.333-21.333v0-42.667c0-11.782-9.551-21.333-21.333-21.333v0z","M814.080 277.333h-186.027c-0.131-0.004-0.285-0.006-0.44-0.006-9.661 0-17.493 7.832-17.493 17.493 0 4.835 1.962 9.212 5.133 12.379l0 0 64.427 64-89.173 89.173-93.44-93.44c-3.302-3.218-7.819-5.203-12.8-5.203s-9.498 1.985-12.804 5.207l0.004-0.004-146.347 145.067c-3.144 3.097-5.091 7.401-5.091 12.16s1.948 9.063 5.089 12.158l0.002 0.002 32.853 33.28c3.302 3.218 7.819 5.203 12.8 5.203s9.498-1.985 12.804-5.207l-0.004 0.004 100.693-100.267 93.44 93.44c3.255 3.32 7.787 5.379 12.8 5.379s9.545-2.058 12.797-5.376l0.003-0.003 134.4-134.4 63.573 63.573c3.255 3.321 7.788 5.379 12.801 5.379 9.838 0 17.825-7.928 17.919-17.744l0-0.009v-184.747c0-0.002 0-0.003 0-0.005 0-9.661-7.832-17.493-17.493-17.493-0.15 0-0.3 0.002-0.449 0.006l0.022-0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chart-line"]},"attrs":[{},{}],"properties":{"order":167,"id":144,"name":"chart-line","prevSize":64,"code":59787},"setIdx":0,"setId":1,"iconIdx":40},{"icon":{"paths":["M581.12 314.453c0 97.084-78.702 175.787-175.787 175.787s-175.787-78.702-175.787-175.787c0-97.084 78.702-175.787 175.787-175.787s175.787 78.702 175.787 175.787z","M864.427 597.333l-42.667-42.667c-4.886-6.227-12.412-10.19-20.864-10.19-6.347 0-12.172 2.235-16.73 5.961l0.047-0.038-17.067 16.64 85.333 85.333 16.64-17.067c3.72-4.522 5.975-10.37 5.975-16.746 0-8.663-4.164-16.353-10.6-21.178l-0.069-0.049z","M541.867 793.173l-8.533 92.16 92.16-8.533 209.92-209.493-85.333-85.333zM615.253 859.307v0l-30.72 2.987 2.56-30.72-30.72 2.56 2.987-30.72 16.64-16.64 55.893 55.893z","M563.627 466.347c-39.875 41.867-96.044 67.904-158.293 67.904s-118.418-26.037-158.209-67.815l-0.085-0.089c-58.102 29.271-97.342 88.304-97.706 156.538l-0 0.049v174.507c0.241 48.445 39.448 87.652 87.87 87.893l0.023 0h258.133c-2.955-4.165-4.724-9.352-4.724-14.953 0-0.443 0.011-0.884 0.033-1.322l-0.002 0.062 9.387-101.12c0.516-5.985 3.020-11.304 6.839-15.374l-0.013 0.014 153.173-151.893c-8.342-59.179-44.91-108.31-95.418-133.936l-1.009-0.464z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["user-edit"]},"attrs":[{},{},{},{}],"properties":{"order":166,"id":143,"name":"user-edit","prevSize":64,"code":59786},"setIdx":0,"setId":1,"iconIdx":41},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM512 704c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64v0c0 35.346-28.654 64-64 64v0zM564.053 522.667c-0.234 11.687-9.647 21.099-21.311 21.333l-0.022 0h-61.867c-11.687-0.234-21.099-9.647-21.333-21.311l-0-0.022-11.52-181.333c0-11.782 9.551-21.333 21.333-21.333v0h85.333c11.782 0 21.333 9.551 21.333 21.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["exclamation-circle"]},"attrs":[{}],"properties":{"order":165,"id":142,"name":"exclamation-circle","prevSize":64,"code":59785},"setIdx":0,"setId":1,"iconIdx":42},{"icon":{"paths":["M307.2 433.92v176.213c0 23.564-19.103 42.667-42.667 42.667v0c-0.156 0.002-0.34 0.003-0.524 0.003-24.164 0-43.943-18.773-45.548-42.53l-0.008-0.14v-176.213c1.613-23.897 21.392-42.67 45.556-42.67 0.184 0 0.368 0.001 0.552 0.003l-0.028-0c23.564 0 42.667 19.103 42.667 42.667v0zM323.413 672.853c-0 24.978 20.249 45.227 45.227 45.227l0 0h30.293v92.587c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-92.587h56.32v92.587c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-92.587h30.72c0.001 0 0.001 0 0.002 0 24.742 0 44.8-20.058 44.8-44.8 0-0.15-0.001-0.3-0.002-0.45l0 0.023v-273.067h-378.027zM701.44 384h-379.733c1.396-66.221 40.299-123.032 96.264-150.169l1.016-0.445-29.44-53.76c-0.765-0.994-1.226-2.255-1.226-3.625 0-3.299 2.674-5.973 5.973-5.973 2.45 0 4.556 1.475 5.477 3.587l0.015 0.039 29.867 54.187c24.327-10.811 52.709-17.106 82.56-17.106s58.233 6.295 83.889 17.63l-1.329-0.524 29.44-54.187c0.936-2.15 3.042-3.625 5.492-3.625 3.299 0 5.973 2.674 5.973 5.973 0 1.37-0.461 2.631-1.236 3.639l0.010-0.014-29.44 53.76c56.635 27.803 95.199 84.563 96.424 150.452l0.002 0.161zM441.6 298.667c-0.828-7.801-7.082-13.909-14.879-14.503l-0.055-0.003c-7.756 1.306-13.592 7.971-13.592 16s5.836 14.694 13.497 15.987l0.095 0.013c8.411-0.657 14.988-7.644 14.988-16.167 0-0.467-0.020-0.929-0.058-1.386l0.004 0.060zM614.4 298.667c-0.879-8.202-7.763-14.534-16.126-14.534-0.331 0-0.659 0.010-0.985 0.029l0.045-0.002c-7.756 1.306-13.592 7.971-13.592 16s5.836 14.694 13.497 15.987l0.095 0.013c0.271 0.016 0.587 0.025 0.906 0.025 8.954 0 16.213-7.259 16.213-16.213 0-0.459-0.019-0.914-0.057-1.364l0.004 0.059zM758.613 389.973c-23.564 0-42.667 19.103-42.667 42.667v0 177.493c0 23.564 19.103 42.667 42.667 42.667v0c0.156 0.002 0.34 0.003 0.524 0.003 24.164 0 43.943-18.773 45.548-42.53l0.008-0.14v-176.213c-1.829-23.703-21.512-42.243-45.526-42.243-0.195 0-0.389 0.001-0.584 0.004l0.030-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["android"]},"attrs":[{}],"properties":{"order":164,"id":141,"name":"android","prevSize":64,"code":59781},"setIdx":0,"setId":1,"iconIdx":43},{"icon":{"paths":["M847.787 520.107c0.274 4.931 0.43 10.701 0.43 16.508 0 175.082-141.932 317.013-317.013 317.013-4.803 0-9.581-0.107-14.332-0.318l0.675 0.024c-188.513 0-341.333-152.82-341.333-341.333s152.82-341.333 341.333-341.333v0c1.131-0.014 2.466-0.022 3.804-0.022 87.118 0 166.305 33.953 225.052 89.347l-0.163-0.152-92.587 89.6c-121.6-117.333-347.733-29.44-347.733 162.56-0.007 0.634-0.011 1.383-0.011 2.133 0 117.821 95.513 213.333 213.333 213.333 0.004 0 0.007-0 0.011-0l-0 0c3.91 0.295 8.47 0.464 13.068 0.464 88.823 0 162.971-62.827 180.429-146.466l0.209-1.197h-195.413v-117.333h325.12c3.257 17.027 5.12 36.612 5.12 56.632 0 0.19-0 0.38-0.001 0.571l0-0.029z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["google"]},"attrs":[{}],"properties":{"order":163,"id":140,"name":"google","prevSize":64,"code":59782},"setIdx":0,"setId":1,"iconIdx":44},{"icon":{"paths":["M704.853 531.627c-0.017-0.819-0.027-1.784-0.027-2.752 0-54.148 30.474-101.179 75.207-124.877l0.767-0.37c-29.155-40.19-75.331-66.495-127.728-68.259l-0.272-0.007c-54.187-4.267-113.067 31.573-134.827 31.573s-75.52-29.867-116.48-29.867c-85.333 0-175.36 67.84-175.36 203.093 0.448 44.466 8.383 86.938 22.602 126.41l-0.842-2.677c18.773 54.613 89.173 191.573 162.56 189.44 38.4 0 65.707-27.307 115.627-27.307s73.387 27.307 116.48 27.307c73.813 0 137.813-125.867 156.16-181.76-55.538-23.15-93.867-77-93.867-139.801 0-0.051 0-0.103 0-0.154l-0 0.008zM619.52 281.173c22.477-25.256 36.209-58.726 36.209-95.402 0-5.32-0.289-10.573-0.852-15.744l0.057 0.64c-41.308 4.654-77.328 24.252-103.113 53.173l-0.141 0.16c-24.743 26.031-39.963 61.317-39.963 100.158 0 3.191 0.103 6.357 0.305 9.497l-0.022-0.428c1.071 0.032 2.331 0.050 3.595 0.050 42.128 0 79.503-20.352 102.828-51.761l0.244-0.343z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["apple"]},"attrs":[{}],"properties":{"order":162,"id":139,"name":"apple","prevSize":64,"code":59783},"setIdx":0,"setId":1,"iconIdx":45},{"icon":{"paths":["M170.667 170.667h326.827v326.827h-326.827zM526.507 170.667h326.827v326.827h-326.827zM170.667 526.507h326.827v326.827h-326.827zM526.507 526.507h326.827v326.827h-326.827z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["microsoft"]},"attrs":[{}],"properties":{"order":161,"id":138,"name":"microsoft","prevSize":64,"code":59784},"setIdx":0,"setId":1,"iconIdx":46},{"icon":{"paths":["M210.347 554.667c-220.587-218.88 63.573-512 287.147-313.6 3.866 3.355 8.947 5.4 14.507 5.4s10.641-2.045 14.534-5.423l-0.027 0.023c223.573-198.4 507.733 94.72 287.147 313.6l-286.293 286.293c-3.935 3.922-9.364 6.347-15.36 6.347s-11.425-2.425-15.361-6.347l0.001 0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["heart"]},"attrs":[{}],"properties":{"order":160,"id":137,"name":"heart","prevSize":64,"code":59780},"setIdx":0,"setId":1,"iconIdx":47},{"icon":{"paths":["M661.333 170.667h-298.667c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h298.667c23.564 0 42.667-19.103 42.667-42.667v0-597.333c0-23.564-19.103-42.667-42.667-42.667v0zM512 768c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667c23.564 0 42.667 19.103 42.667 42.667v0c0 23.564-19.103 42.667-42.667 42.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["mobile"]},"attrs":[{}],"properties":{"order":159,"id":136,"name":"mobile","prevSize":64,"code":59778},"setIdx":0,"setId":1,"iconIdx":48},{"icon":{"paths":["M768 170.667h-512c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h512c23.564 0 42.667-19.103 42.667-42.667v0-597.333c0-23.564-19.103-42.667-42.667-42.667v0zM512 768c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667c23.564 0 42.667 19.103 42.667 42.667v0c0 23.564-19.103 42.667-42.667 42.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["tablet"]},"attrs":[{}],"properties":{"order":158,"id":135,"name":"tablet","prevSize":64,"code":59779},"setIdx":0,"setId":1,"iconIdx":49},{"icon":{"paths":["M193.707 839.253l125.44 14.080c0.304 0.033 0.656 0.052 1.013 0.052 2.577 0 4.922-0.993 6.673-2.618l-0.006 0.006 28.16-28.16c1.661-1.692 2.686-4.013 2.686-6.574 0-0.541-0.046-1.072-0.134-1.589l0.008 0.055-5.973-64.853 64.853 6.4c0.156 0.008 0.338 0.012 0.521 0.012 2.937 0 5.607-1.141 7.592-3.004l-0.006 0.005 27.733-27.733c1.873-1.982 3.025-4.663 3.025-7.613 0-0.324-0.014-0.644-0.041-0.961l0.003 0.041-5.973-64.853 64.853 5.973c0.418 0.063 0.9 0.099 1.39 0.099 2.601 0 4.966-1.012 6.722-2.664l-0.005 0.005 42.667-42.667c19.203 5.87 41.275 9.25 64.137 9.25 125.361 0 226.987-101.625 226.987-226.987s-101.625-226.987-226.987-226.987c-125.361 0-226.987 101.625-226.987 226.987 0 22.862 3.38 44.934 9.667 65.744l-0.417-1.607-238.080 238.080c-1.619 1.745-2.612 4.090-2.612 6.667 0 0.357 0.019 0.709 0.056 1.056l-0.004-0.043 14.080 125.44c0.412 4.774 4.186 8.548 8.923 8.957l0.037 0.003zM556.8 469.333c-17.673-17.935-28.586-42.573-28.586-69.76s10.913-51.825 28.598-69.772l-0.012 0.012c17.853-17.853 42.517-28.896 69.76-28.896 54.486 0 98.656 44.17 98.656 98.656 0 27.243-11.042 51.907-28.896 69.76l0-0c-17.98 17.573-42.604 28.415-69.76 28.415s-51.78-10.842-69.779-28.433l0.019 0.019z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["key"]},"attrs":[{}],"properties":{"order":157,"id":134,"name":"key","prevSize":64,"code":59777},"setIdx":0,"setId":1,"iconIdx":50},{"icon":{"paths":["M829.867 311.467h-534.187l-12.373-63.147c-1.761-9.401-8.736-16.803-17.751-19.162l-0.169-0.038-66.133-15.787h-4.693c-13.136 0.664-23.535 11.476-23.535 24.717 0 11.416 7.73 21.027 18.242 23.883l0.173 0.040 51.2 11.947c27.307 136.96 57.173 273.92 85.333 410.88 2.206 10.762 11.416 18.805 22.572 19.199l0.041 0.001h52.053c-10.32 11.322-16.64 26.446-16.64 43.047 0 35.346 28.654 64 64 64s64-28.654 64-64c0-16.6-6.32-31.725-16.686-43.098l0.046 0.051h118.613c-10.32 11.322-16.64 26.446-16.64 43.047 0 35.346 28.654 64 64 64s64-28.654 64-64c0-16.6-6.32-31.725-16.686-43.098l0.046 0.051h49.067c12.201-1.658 21.504-12.009 21.504-24.533s-9.303-22.875-21.376-24.519l-0.128-0.014h-389.973l-10.24-49.067h421.12c11.198-0.395 20.408-8.438 22.587-19.046l0.026-0.154 52.053-245.333c0.342-1.542 0.538-3.314 0.538-5.131 0-13.406-10.66-24.323-23.967-24.735l-0.038-0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["shopping-cart"]},"attrs":[{}],"properties":{"order":156,"id":133,"name":"shopping-cart","prevSize":64,"code":59776},"setIdx":0,"setId":1,"iconIdx":51},{"icon":{"paths":["M843.093 640c6.506-13.897 10.303-30.176 10.303-47.342 0-23.902-7.361-46.085-19.94-64.405l0.251 0.387c-22.583-34.571-55.687-60.634-94.713-73.861l-1.287-0.379c-10.051-3.736-22.616-7.408-35.483-10.28l-2.063-0.387c-4.457 28.438-16.625 53.46-34.273 73.549l0.14-0.163c-35.337 38.663-82.305 66.16-135.344 76.952l-1.616 0.275c-23.103 5.52-49.629 8.685-76.894 8.685-12.591 0-25.024-0.675-37.265-1.991l1.519 0.132c2.313 27.899 13.558 52.805 30.83 72.233l-0.11-0.126c30.968 34.070 72.265 58.256 118.922 67.606l1.398 0.234c20.216 4.795 43.427 7.544 67.281 7.544 10.866 0 21.599-0.571 32.171-1.683l-1.318 0.112c3.411 0.252 6.49 1.496 8.998 3.442l-0.038-0.028c33.303 28.98 74.244 50.053 119.393 59.836l1.781 0.324 12.373 2.133c0.651 0.131 1.4 0.206 2.166 0.206 4.41 0 8.241-2.478 10.177-6.117l0.030-0.062c1.366-1.823 2.187-4.122 2.187-6.613s-0.821-4.791-2.208-6.642l0.021 0.029c-3.84-4.693-8.107-9.387-12.373-13.653-16.687-17.021-29.032-38.359-35.202-62.184l-0.212-0.963c8.533-5.973 16.64-11.093 24.32-17.067 19.832-15.668 35.509-35.724 45.693-58.752l0.387-0.982z","M634.88 485.12c21.667-24.124 34.917-56.191 34.917-91.352 0-32.37-11.23-62.118-30.006-85.559l0.21 0.271c-28.137-35.836-66.272-62.658-110.194-76.371l-1.593-0.429c-32.422-11.621-69.828-18.338-108.803-18.338-42.485 0-83.106 7.981-120.445 22.526l2.261-0.775c-46.247 15.661-84.209 45.617-109.587 84.528l-0.493 0.806c-14.231 20.338-22.74 45.591-22.74 72.83 0 20.055 4.612 39.032 12.833 55.929l-0.334-0.76c13.38 25.939 32.305 47.323 55.321 63.2l0.572 0.373c8.96 6.827 18.347 12.8 27.733 19.627-7.921 28.343-22.762 52.576-42.613 71.629l-0.054 0.051-13.653 15.787c-1.598 2.113-2.56 4.784-2.56 7.68s0.962 5.567 2.583 7.712l-0.023-0.032c2.087 4.055 6.244 6.78 11.037 6.78 1.081 0 2.13-0.139 3.129-0.399l-0.086 0.019 14.507-0.853c53.373-10.954 100.088-34.3 138.697-66.937l-0.457 0.377c2.381-2.169 5.484-3.581 8.91-3.837l0.050-0.003c10.499 1.097 22.683 1.723 35.013 1.723 27.513 0 54.299-3.115 80.024-9.012l-2.397 0.462c55.177-10.949 102.618-38.633 138.063-77.457l0.177-0.196z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["comments"]},"attrs":[{},{}],"properties":{"order":155,"id":132,"name":"comments","prevSize":64,"code":59774},"setIdx":0,"setId":1,"iconIdx":52},{"icon":{"paths":["M298.667 657.92c-12.8-9.387-26.027-17.493-37.973-27.307-31.923-23.957-57.185-55.102-73.638-91.115l-0.602-1.472c-10.174-22.123-16.107-48-16.107-75.263 0-37.573 11.268-72.514 30.61-101.629l-0.423 0.678c35.016-55.070 87.057-96.615 148.616-117.595l1.998-0.591c47.983-19.181 103.599-30.305 161.812-30.305 53.017 0 103.879 9.227 151.068 26.163l-3.12-0.978c62.363 20.009 114.476 57.367 152.211 106.369l0.536 0.724c24.804 32.171 39.755 73.049 39.755 117.419 0 49.549-18.645 94.744-49.302 128.95l0.161-0.182c-47.978 53.894-112.27 92.329-185.087 107.558l-2.219 0.388c-31.689 7.517-68.073 11.826-105.463 11.826-16.954 0-33.701-0.886-50.197-2.614l2.059 0.175c-5.282 0.181-10.048 2.255-13.67 5.562l0.017-0.015c-52.060 44.688-115.92 77.133-186.246 92.094l-21.967 3.906c-1.252 0.338-2.69 0.532-4.174 0.532-6.592 0-12.289-3.833-14.983-9.393l-0.043-0.099c-1.509-2.57-2.4-5.66-2.4-8.958 0-4.803 1.89-9.165 4.966-12.382l-0.006 0.007c6.107-8.009 12.256-15.104 18.812-21.8l-0.039 0.040c26.046-27.266 45.249-61.287 54.717-99.165l0.323-1.528z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["comment"]},"attrs":[{}],"properties":{"order":154,"id":131,"name":"comment","prevSize":64,"code":59775},"setIdx":0,"setId":1,"iconIdx":53},{"icon":{"paths":["M810.667 388.693h-128v-50.347c-1.655-45.826-39.203-82.347-85.281-82.347-0.018 0-0.037 0-0.055 0l-170.664-0c-0.016-0-0.034-0-0.052-0-46.078 0-83.626 36.521-85.277 82.196l-0.004 0.151v50.347h-128c-23.564 0-42.667 19.103-42.667 42.667v0 80.64h682.667v-82.347c-0.942-22.818-19.669-40.96-42.633-40.96-0.012 0-0.024 0-0.036 0l0.002-0zM597.333 388.693h-170.667v-50.347h170.667z","M597.333 597.333c0 23.564-19.103 42.667-42.667 42.667v0h-85.333c-23.564 0-42.667-19.103-42.667-42.667v0-42.667h-256v213.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-213.333h-256z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["briefcase"]},"attrs":[{},{}],"properties":{"order":153,"id":130,"name":"briefcase","prevSize":64,"code":59773},"setIdx":0,"setId":1,"iconIdx":54},{"icon":{"paths":["M828.587 571.307l-23.893-16.64c-14.567-10.727-23.999-27.696-24.319-46.883l-0.001-0.051v-102.4c-8.422-131.471-117.116-234.915-249.971-234.915-3.921 0-7.821 0.090-11.699 0.268l0.55-0.020h-14.507c-3.568-0.182-7.747-0.286-11.95-0.286-132.697 0-241.209 103.551-249.136 234.255l-0.034 0.698v100.693c0.011 0.415 0.017 0.905 0.017 1.395 0 19.409-9.529 36.593-24.164 47.127l-0.172 0.118-23.893 18.347c-14.944 10.55-24.584 27.749-24.584 47.198 0 18.138 8.383 34.317 21.486 44.875l0.111 0.086c13.441 10.947 30.776 17.579 49.66 17.579 1.292 0 2.577-0.031 3.854-0.092l-0.18 0.007h532.48c0.51 0.012 1.111 0.019 1.713 0.019 19.783 0 37.865-7.277 51.717-19.301l-0.097 0.083c13.214-10.644 21.597-26.824 21.597-44.962 0-19.45-9.64-36.648-24.403-47.077l-0.181-0.121z","M512 853.333c70.692 0 128-57.308 128-128v0h-256c0 70.692 57.308 128 128 128v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["bell"]},"attrs":[{},{}],"properties":{"order":152,"id":129,"name":"bell","prevSize":64,"code":59772},"setIdx":0,"setId":1,"iconIdx":55},{"icon":{"paths":["M395.947 853.333c-0.453 0.003-0.988 0.005-1.523 0.005-60.676 0-115.853-23.542-156.897-61.989l0.127 0.118c-41.205-38.087-66.919-92.414-66.919-152.747s25.714-114.66 66.78-152.62l0.139-0.127 286.72-270.507c30.132-27.277 70.29-43.97 114.347-43.97s84.214 16.694 114.492 44.1l-0.146-0.13c30.006 27.621 48.74 67.090 48.74 110.933s-18.734 83.312-48.634 110.837l-0.106 0.096-287.147 270.933c-18.439 16.877-43.105 27.217-70.187 27.217s-51.747-10.34-70.266-27.288l0.079 0.071c-18.342-17.116-29.895-41.304-30.292-68.194l-0.001-0.072c-0-0.073-0-0.16-0-0.246 0-27.227 11.645-51.734 30.226-68.813l0.067-0.061 264.96-250.027c6.875-6.889 16.38-11.151 26.88-11.151s20.005 4.262 26.879 11.15l0.001 0.001c6.788 6.921 10.977 16.411 10.977 26.88s-4.189 19.959-10.983 26.886l0.006-0.006-266.667 250.027c-3.906 3.457-6.356 8.482-6.356 14.080s2.45 10.623 6.336 14.063l0.020 0.017c4.763 4.364 11.136 7.038 18.133 7.038s13.371-2.674 18.153-7.056l-0.020 0.018 287.147-268.8c14.992-13.914 24.343-33.726 24.343-55.722 0-0.66-0.008-1.319-0.025-1.975l0.002 0.097c-0.226-22.084-9.687-41.915-24.698-55.848l-0.049-0.045c-16.306-15.119-38.217-24.394-62.293-24.394s-45.987 9.276-62.352 24.448l0.059-0.054-286.293 270.933c-26.497 24.13-43.061 58.771-43.061 97.28s16.564 73.15 42.956 97.186l0.105 0.094c27.916 25.902 65.435 41.794 106.667 41.794s78.751-15.893 106.767-41.886l-0.1 0.092 286.72-270.507c6.965-7.573 16.921-12.302 27.981-12.302 20.972 0 37.973 17.001 37.973 37.973 0 11.805-5.387 22.352-13.836 29.316l-0.065 0.052-287.147 270.933c-41.038 38.335-96.324 61.872-157.107 61.872-0.567 0-1.134-0.002-1.7-0.006l0.087 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["paperclip"]},"attrs":[{}],"properties":{"order":151,"id":128,"name":"paperclip","prevSize":64,"code":59771},"setIdx":0,"setId":1,"iconIdx":56},{"icon":{"paths":["M725.333 597.333c-0.056-0-0.122-0-0.188-0-32.752 0-62.631 12.301-85.269 32.536l0.124-0.109v-2.987l-196.267-114.773 198.827-114.773v-2.987c21.935 19.618 50.873 31.81 82.647 32.425l0.126 0.002c70.692 0 128-57.308 128-128s-57.308-128-128-128c-70.692 0-128 57.308-128 128v0c0.191 10.839 1.58 21.258 4.040 31.257l-0.2-0.963-195.413 113.067c-23.198-35.152-62.518-58.027-107.181-58.027-70.692 0-128 57.308-128 128s57.308 128 128 128c44.663 0 83.983-22.875 106.884-57.548l0.297-0.479 195.84 113.067c-2.603 9.054-4.154 19.469-4.266 30.229l-0.001 0.064c0 70.692 57.308 128 128 128s128-57.308 128-128c0-70.692-57.308-128-128-128v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["share-alt"]},"attrs":[{}],"properties":{"order":150,"id":127,"name":"share-alt","prevSize":64,"code":59770},"setIdx":0,"setId":1,"iconIdx":57},{"icon":{"paths":["M485.547 564.907c6.687 6.948 16.066 11.265 26.453 11.265s19.767-4.316 26.442-11.253l0.011-0.012 306.347-277.333c4.893-5.591 7.877-12.96 7.877-21.026 0-17.673-14.327-32-32-32-0.971 0-1.931 0.043-2.879 0.128l0.123-0.009h-611.84c-0.81-0.073-1.753-0.115-2.705-0.115-17.673 0-32 14.327-32 32 0 8.264 3.133 15.797 8.276 21.475l-0.024-0.027z","M833.28 380.16l-313.173 274.347c-2.189 1.802-5.020 2.894-8.107 2.894s-5.918-1.093-8.129-2.912l0.022 0.018-313.173-274.347c-2.125-1.975-4.983-3.187-8.123-3.187-6.598 0-11.947 5.349-11.947 11.947 0 0.22 0.006 0.439 0.018 0.657l-0.001-0.030v387.413c-0 6.834 5.54 12.373 12.373 12.373h657.92c6.834 0 12.373-5.54 12.373-12.373v0-387.413c0.010-0.187 0.016-0.406 0.016-0.627 0-6.598-5.349-11.947-11.947-11.947-3.141 0-5.998 1.212-8.131 3.193l0.007-0.007z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["envelope"]},"attrs":[{},{}],"properties":{"order":149,"id":126,"name":"envelope","prevSize":64,"code":59769},"setIdx":0,"setId":1,"iconIdx":58},{"icon":{"paths":["M587.093 260.267l-133.973 123.733h-138.24c-23.564 0-42.667 19.103-42.667 42.667v0 170.667c0 23.564 19.103 42.667 42.667 42.667v0h138.24l133.973 123.733c2.8 2.577 6.554 4.157 10.676 4.157 8.53 0 15.48-6.766 15.777-15.223l0.001-0.027v-481.28c-0.297-8.485-7.247-15.25-15.778-15.25-4.122 0-7.875 1.58-10.687 4.167l0.011-0.010z","M687.787 415.147l-30.72 37.973c18.715 13.117 30.8 34.587 30.8 58.88s-12.085 45.763-30.57 58.727l-0.23 0.153 30.72 37.973c2.659 2.878 6.453 4.675 10.667 4.675s8.007-1.796 10.658-4.665l0.009-0.010c26.227-24.589 42.567-59.453 42.567-98.133s-16.34-73.544-42.494-98.065l-0.073-0.068c-2.531-2.204-5.861-3.548-9.505-3.548-4.863 0-9.166 2.392-11.798 6.064l-0.030 0.044z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["volume-down"]},"attrs":[{},{}],"properties":{"order":148,"id":125,"name":"volume-down","prevSize":64,"code":59766},"setIdx":0,"setId":1,"iconIdx":59},{"icon":{"paths":["M449.28 260.267l-133.973 123.733h-138.667c-23.564 0-42.667 19.103-42.667 42.667v0 170.667c0 23.564 19.103 42.667 42.667 42.667v0h138.667l133.973 123.733c2.759 2.665 6.521 4.308 10.667 4.308 8.483 0 15.36-6.877 15.36-15.36 0-0.014-0-0.029-0-0.043l0 0.002v-481.28c0-0.012 0-0.027 0-0.041 0-8.483-6.877-15.36-15.36-15.36-4.146 0-7.908 1.642-10.671 4.312l0.004-0.004z","M549.547 415.147l-30.293 37.973c18.041 13.687 29.817 34.821 30.716 58.739l0.004 0.141c-0.903 24.059-12.679 45.193-30.529 58.741l-0.191 0.139 30.293 37.973c2.659 2.878 6.453 4.675 10.667 4.675s8.007-1.796 10.658-4.665l0.009-0.010c26.576-24.418 43.171-59.338 43.171-98.133s-16.596-73.715-43.075-98.046l-0.096-0.087c-2.531-2.204-5.861-3.548-9.505-3.548-4.863 0-9.166 2.392-11.798 6.064l-0.030 0.044z","M677.973 349.867c-3.067-2.97-7.253-4.801-11.867-4.801-5.611 0-10.59 2.708-13.701 6.889l-0.032 0.045-17.92 22.187c-2.921 3.118-4.715 7.323-4.715 11.947s1.794 8.829 4.724 11.956l-0.009-0.010c31.934 28.016 52.384 68.451 53.754 113.684l0.006 0.236c-0.911 45.233-20.76 85.657-51.916 113.798l-0.138 0.122c-2.921 3.118-4.715 7.323-4.715 11.947s1.794 8.829 4.724 11.956l-0.009-0.010 17.92 22.187c3.143 4.226 8.122 6.934 13.733 6.934 4.614 0 8.8-1.831 11.871-4.805l-0.005 0.004c45.832-39.363 74.683-97.379 74.683-162.133s-28.851-122.771-74.399-161.895l-0.284-0.238z","M782.507 285.867c-2.713-2.767-6.489-4.482-10.667-4.482s-7.954 1.715-10.664 4.48l-0.002 0.002-21.76 26.88c-2.59 2.555-4.195 6.103-4.195 10.027s1.605 7.472 4.193 10.025l0.002 0.002c51.099 42.853 83.795 106.206 85.329 177.234l0.004 0.26c-1.538 71.287-34.234 134.64-84.965 177.193l-0.368 0.3c-2.59 2.555-4.195 6.103-4.195 10.027s1.605 7.472 4.193 10.025l0.002 0.002 21.76 26.88c2.713 2.767 6.489 4.482 10.667 4.482s7.954-1.715 10.664-4.48l0.002-0.002c64.241-53.739 105.408-133.218 107.513-222.365l0.007-0.355c-1.057-90.773-42.447-171.671-107.052-225.752l-0.468-0.381z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["volume-up"]},"attrs":[{},{},{},{}],"properties":{"order":147,"id":124,"name":"volume-up","prevSize":64,"code":59767},"setIdx":0,"setId":1,"iconIdx":60},{"icon":{"paths":["M656.64 260.267l-133.973 123.733h-138.667c-23.564 0-42.667 19.103-42.667 42.667v0 170.667c0 23.564 19.103 42.667 42.667 42.667v0h138.667l133.973 123.733c2.759 2.665 6.521 4.308 10.667 4.308 8.483 0 15.36-6.877 15.36-15.36 0-0.014-0-0.029-0-0.043l0 0.002v-481.28c0-0.012 0-0.027 0-0.041 0-8.483-6.877-15.36-15.36-15.36-4.146 0-7.908 1.642-10.671 4.312l0.004-0.004z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["volume-off"]},"attrs":[{}],"properties":{"order":146,"id":123,"name":"volume-off","prevSize":64,"code":59768},"setIdx":0,"setId":1,"iconIdx":61},{"icon":{"paths":["M817.493 586.667c19.812-0.284 35.763-16.411 35.763-36.263 0-9.784-3.875-18.664-10.173-25.187l0.010 0.011-305.92-311.893c-6.421-6.488-15.328-10.505-25.173-10.505s-18.752 4.017-25.17 10.502l-0.003 0.003-305.92 311.893c-6.288 6.513-10.163 15.392-10.163 25.177 0 19.852 15.951 35.979 35.736 36.263l0.027 0z","M213.333 650.667h597.333c23.564 0 42.667 19.103 42.667 42.667v85.333c0 23.564-19.103 42.667-42.667 42.667h-597.333c-23.564 0-42.667-19.103-42.667-42.667v-85.333c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{}],"grid":0,"tags":["eject"],"isMulticolor":false,"isMulticolor2":false},"attrs":[{},{}],"properties":{"order":145,"id":122,"name":"eject","prevSize":64,"code":59765},"setIdx":0,"setId":1,"iconIdx":62},{"icon":{"paths":["M810.667 298.667h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 341.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-341.333c0-23.564-19.103-42.667-42.667-42.667v0zM213.333 682.667v-85.333c47.128 0 85.333 38.205 85.333 85.333v0zM213.333 426.667v-85.333h85.333c0 47.128-38.205 85.333-85.333 85.333v0zM512 618.667c-48.62-6.348-85.776-47.511-85.776-97.352 0-3.28 0.161-6.522 0.475-9.719l-0.032 0.405c-0.282-2.792-0.443-6.035-0.443-9.314 0-49.841 37.157-91.004 85.281-97.299l0.495-0.053c48.62 6.348 85.776 47.511 85.776 97.352 0 3.28-0.161 6.522-0.475 9.719l0.032-0.405c0.282 2.792 0.443 6.035 0.443 9.314 0 49.841-37.157 91.004-85.281 97.299l-0.495 0.053zM810.667 682.667h-85.333c0-47.128 38.205-85.333 85.333-85.333v0zM810.667 426.667c-47.128 0-85.333-38.205-85.333-85.333v0h85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["money-bill"]},"attrs":[{}],"properties":{"order":144,"id":121,"name":"money-bill","prevSize":64,"code":59764},"setIdx":0,"setId":1,"iconIdx":63},{"icon":{"paths":["M209.92 704v-384h-42.667c-23.564 0-42.667 19.103-42.667 42.667v0 426.667c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-42.667h-554.667c-23.564 0-42.667-19.103-42.667-42.667v0z","M860.587 213.333h-547.84c-21.495 0.241-38.827 17.722-38.827 39.251 0 0.001 0 0.002 0 0.002l-0-0v390.827c-0 0.001-0 0.001-0 0.002 0 21.529 17.332 39.010 38.804 39.251l0.023 0h547.84c21.495-0.241 38.827-17.722 38.827-39.251 0-0.001-0-0.002-0-0.002l0 0v-390.827c0-0.001 0-0.001 0-0.002 0-21.529-17.332-39.010-38.804-39.251l-0.023-0zM430.080 291.413c0.127-0.001 0.277-0.001 0.427-0.001 43.358 0 78.507 35.149 78.507 78.507s-35.149 78.507-78.507 78.507c-43.358 0-78.506-35.148-78.507-78.505l-0-0c-0-0-0-0.001-0-0.001 0-43.208 34.906-78.263 78.057-78.505l0.023-0zM821.333 526.080v78.507h-469.333v-78.507l66.987-33.28c3.31-1.602 7.199-2.538 11.307-2.538s7.997 0.936 11.465 2.607l-0.158-0.069 66.987 33.28 184.747-147.627c3.023-2.172 6.8-3.474 10.88-3.474s7.857 1.302 10.936 3.513l-0.056-0.038 106.24 70.827z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["images"]},"attrs":[{},{}],"properties":{"order":143,"id":120,"name":"images","prevSize":64,"code":59763},"setIdx":0,"setId":1,"iconIdx":64},{"icon":{"paths":["M810.667 256h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 426.667c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-426.667c0-23.564-19.103-42.667-42.667-42.667v0zM341.333 341.333c47.128 0 85.333 38.205 85.333 85.333s-38.205 85.333-85.333 85.333c-47.128 0-85.333-38.205-85.333-85.333v0c0-47.128 38.205-85.333 85.333-85.333v0zM768 597.333v85.333h-512v-85.333l72.96-36.693c3.612-1.807 7.869-2.864 12.373-2.864s8.761 1.057 12.537 2.938l-0.163-0.074 72.96 36.693 201.813-161.28c3.314-2.404 7.462-3.845 11.947-3.845s8.633 1.442 12.006 3.887l-0.060-0.041 115.627 75.947z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["image"]},"attrs":[{}],"properties":{"order":142,"id":119,"name":"image","prevSize":64,"code":59762},"setIdx":0,"setId":1,"iconIdx":65},{"icon":{"paths":["M673.707 491.947l-226.56-229.547c-4.432-3.468-10.085-5.561-16.227-5.561-14.315 0-25.974 11.37-26.439 25.572l-0.001 0.043v144.213h-213.333c-11.782 0-21.333 9.551-21.333 21.333v0 128c0 11.782 9.551 21.333 21.333 21.333v0h213.333v144.213c0.466 14.244 12.125 25.615 26.44 25.615 6.142 0 11.795-2.093 16.285-5.605l-0.058 0.044 226.56-229.973c5.504-4.871 8.956-11.952 8.956-19.84s-3.452-14.969-8.928-19.816l-0.028-0.024z","M574.293 298.667h108.373c12.028 0.024 23.465 2.533 33.831 7.040l-0.551-0.213c5.601 2.387 10.367 4.957 14.866 7.901l-0.36-0.221c8.972 6.446 16.594 14.068 22.84 22.747l0.2 0.293c9.007 13.45 14.411 29.978 14.507 47.762l0 0.025v256c-0.096 17.809-5.499 34.336-14.706 48.104l0.2-0.317c-6.446 8.972-14.068 16.594-22.747 22.84l-0.293 0.2c-4.139 2.723-8.906 5.293-13.895 7.445l-0.612 0.235c-9.815 4.294-21.252 6.803-33.271 6.827l-0.009 0h-108.373c-10.744 0.233-19.393 8.882-19.626 19.605l-0 0.022v46.080c0.233 10.744 8.882 19.393 19.605 19.626l0.022 0h88.747c105.096 0 190.293-85.197 190.293-190.293v0-216.747c0-105.096-85.197-190.293-190.293-190.293v-0h-88.747c-10.744 0.233-19.393 8.882-19.626 19.605l-0 0.022v46.080c0.233 10.744 8.882 19.393 19.605 19.626l0.022 0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sign-in"]},"attrs":[{},{}],"properties":{"order":141,"id":118,"name":"sign-in","prevSize":64,"code":59760},"setIdx":0,"setId":1,"iconIdx":66},{"icon":{"paths":["M844.373 491.947l-226.56-229.547c-4.432-3.468-10.085-5.561-16.227-5.561-14.315 0-25.974 11.37-26.439 25.572l-0.001 0.043v144.213h-213.333c-11.782 0-21.333 9.551-21.333 21.333v0 128c0 11.782 9.551 21.333 21.333 21.333v0h213.333v144.213c0.466 14.244 12.125 25.615 26.44 25.615 6.142 0 11.795-2.093 16.285-5.605l-0.058 0.044 226.56-229.973c5.504-4.871 8.956-11.952 8.956-19.84s-3.452-14.969-8.928-19.816l-0.028-0.024z","M449.707 725.333h-108.373c-12.028-0.024-23.465-2.533-33.831-7.040l0.551 0.213c-5.601-2.387-10.367-4.957-14.866-7.901l0.36 0.221c-8.972-6.446-16.594-14.068-22.84-22.747l-0.2-0.293c-9.007-13.45-14.411-29.978-14.507-47.762l-0-0.025v-256c0.096-17.809 5.499-34.336 14.706-48.104l-0.2 0.317c6.446-8.972 14.068-16.594 22.747-22.84l0.293-0.2c4.139-2.723 8.906-5.293 13.895-7.445l0.612-0.235c9.815-4.294 21.252-6.803 33.271-6.827l0.009-0h108.373c10.744-0.233 19.393-8.882 19.626-19.605l0-0.022v-46.080c-0.233-10.744-8.882-19.393-19.605-19.626l-0.022-0h-88.747c-105.096 0-190.293 85.197-190.293 190.293h-0v216.747c0 105.096 85.197 190.293 190.293 190.293v0h88.747c10.744-0.233 19.393-8.882 19.626-19.605l0-0.022v-46.080c-0.233-10.744-8.882-19.393-19.605-19.626l-0.022-0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sign-out"]},"attrs":[{},{}],"properties":{"order":140,"id":117,"name":"sign-out","prevSize":64,"code":59761},"setIdx":0,"setId":1,"iconIdx":67},{"icon":{"paths":["M871.68 426.667c-87.068-102.859-215.499-168.373-359.289-170.662l-0.391-0.005c-144.181 2.293-272.612 67.808-359.101 169.965l-0.579 0.702c-3.324 3.744-5.355 8.703-5.355 14.135 0 6.68 3.070 12.642 7.876 16.554l0.039 0.031 32.853 27.307c3.627 2.942 8.299 4.723 13.387 4.723 6.389 0 12.123-2.809 16.032-7.259l0.021-0.024c71.42-84.402 176.587-138.33 294.408-140.793l0.419-0.007c118.056 2.128 223.21 55.602 294.369 138.97l0.458 0.55c3.93 4.474 9.664 7.283 16.053 7.283 5.088 0 9.76-1.781 13.427-4.754l-0.040 0.031 32.853-27.307c4.474-3.93 7.283-9.664 7.283-16.053 0-5.088-1.781-9.76-4.754-13.427l0.031 0.040z","M597.333 682.667c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z","M512 426.667c-92.074 0.973-174.524 41.37-231.411 105.080l-0.269 0.307c-3.324 3.744-5.355 8.703-5.355 14.135 0 6.68 3.070 12.642 7.876 16.554l0.039 0.031 33.28 27.733c3.505 2.893 8.043 4.647 12.99 4.647 6.234 0 11.817-2.785 15.573-7.179l0.023-0.028c41.571-45.756 100.912-74.727 167.037-75.944l0.217-0.003c66.341 1.22 125.683 30.19 167.083 75.757l0.17 0.19c3.78 4.422 9.363 7.207 15.597 7.207 4.947 0 9.485-1.754 13.025-4.675l-0.035 0.028 33.28-27.733c4.845-3.942 7.915-9.905 7.915-16.585 0-5.432-2.031-10.391-5.374-14.157l0.019 0.022c-57.157-64.017-139.606-104.413-231.508-105.385l-0.172-0.001z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["wifi"]},"attrs":[{},{},{}],"properties":{"order":139,"id":116,"name":"wifi","prevSize":64,"code":59759},"setIdx":0,"setId":1,"iconIdx":68},{"icon":{"paths":["M469.333 597.333h85.333c23.564 0 42.667 19.103 42.667 42.667v85.333c0 23.564-19.103 42.667-42.667 42.667h-85.333c-23.564 0-42.667-19.103-42.667-42.667v-85.333c0-23.564 19.103-42.667 42.667-42.667z","M213.333 597.333h85.333c23.564 0 42.667 19.103 42.667 42.667v85.333c0 23.564-19.103 42.667-42.667 42.667h-85.333c-23.564 0-42.667-19.103-42.667-42.667v-85.333c0-23.564 19.103-42.667 42.667-42.667z","M725.333 597.333h85.333c23.564 0 42.667 19.103 42.667 42.667v85.333c0 23.564-19.103 42.667-42.667 42.667h-85.333c-23.564 0-42.667-19.103-42.667-42.667v-85.333c0-23.564 19.103-42.667 42.667-42.667z","M277.333 533.333c0-11.782 9.551-21.333 21.333-21.333v0h192v42.667h42.667v-42.667h192c11.782 0 21.333 9.551 21.333 21.333v0 21.333h42.667v-21.333c0-35.346-28.654-64-64-64v0h-192v-42.667h32c23.564 0 42.667-19.103 42.667-42.667v0-85.333c0-23.564-19.103-42.667-42.667-42.667v0h-106.667c-23.564 0-42.667 19.103-42.667 42.667v0 85.333c0 23.564 19.103 42.667 42.667 42.667v0h32v42.667h-192c-35.346 0-64 28.654-64 64v0 21.333h42.667z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sitemap"]},"attrs":[{},{},{},{}],"properties":{"order":138,"id":115,"name":"sitemap","prevSize":64,"code":59758},"setIdx":0,"setId":1,"iconIdx":69},{"icon":{"paths":["M832 682.667h-576v-405.333c0-11.782-9.551-21.333-21.333-21.333v0h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 469.333c0 11.782 9.551 21.333 21.333 21.333v0h640c11.782 0 21.333-9.551 21.333-21.333v0-42.667c0-11.782-9.551-21.333-21.333-21.333v0z","M361.813 426.667h42.667c11.782 0 21.333 9.551 21.333 21.333v128c0 11.782-9.551 21.333-21.333 21.333h-42.667c-11.782 0-21.333-9.551-21.333-21.333v-128c0-11.782 9.551-21.333 21.333-21.333z","M490.667 341.333h42.667c11.782 0 21.333 9.551 21.333 21.333v213.333c0 11.782-9.551 21.333-21.333 21.333h-42.667c-11.782 0-21.333-9.551-21.333-21.333v-213.333c0-11.782 9.551-21.333 21.333-21.333z","M618.667 384h42.667c11.782 0 21.333 9.551 21.333 21.333v170.667c0 11.782-9.551 21.333-21.333 21.333h-42.667c-11.782 0-21.333-9.551-21.333-21.333v-170.667c0-11.782 9.551-21.333 21.333-21.333z","M746.667 298.667h42.667c11.782 0 21.333 9.551 21.333 21.333v256c0 11.782-9.551 21.333-21.333 21.333h-42.667c-11.782 0-21.333-9.551-21.333-21.333v-256c0-11.782 9.551-21.333 21.333-21.333z"],"attrs":[{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chart-bar"]},"attrs":[{},{},{},{},{}],"properties":{"order":137,"id":114,"name":"chart-bar","prevSize":64,"code":59757},"setIdx":0,"setId":1,"iconIdx":70},{"icon":{"paths":["M810.667 345.6h-85.333l-30.293-89.6c-7.737-11.685-20.826-19.286-35.69-19.286-0.953 0-1.899 0.031-2.837 0.093l0.127-0.007h-288.853c-0.769-0.049-1.667-0.078-2.572-0.078-14.68 0-27.629 7.414-35.306 18.702l-0.095 0.148-31.147 90.027h-85.333c-1.117-0.113-2.414-0.177-3.726-0.177-19.937 0-36.402 14.863-38.92 34.112l-0.021 0.198v375.467c2.539 19.448 19.004 34.311 38.941 34.311 1.312 0 2.609-0.064 3.888-0.19l-0.162 0.013h597.333c1.117 0.113 2.414 0.177 3.726 0.177 19.937 0 36.402-14.863 38.92-34.112l0.021-0.198v-375.467c-2.539-19.448-19.004-34.311-38.941-34.311-1.312 0-2.609 0.064-3.888 0.19l0.162-0.013zM512 682.667c-70.692 0-128-57.308-128-128s57.308-128 128-128c70.692 0 128 57.308 128 128v0c0 70.692-57.308 128-128 128v0z","M597.333 554.667c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["camera"]},"attrs":[{},{}],"properties":{"order":136,"id":113,"name":"camera","prevSize":64,"code":59756},"setIdx":0,"setId":1,"iconIdx":71},{"icon":{"paths":["M580.267 415.573c-8.533 0-13.653-4.267-13.653-11.52v-55.893c0-18.773-11.093-28.587-34.133-28.587h-42.667c-21.333 0-34.133 9.813-34.133 28.587v98.987l203.093 56.32c14.507 5.12 22.187 12.8 22.187 26.453v165.973c0 65.28-40.107 101.547-116.053 103.68v85.333c0 7.253-5.12 11.52-13.653 11.52h-81.92c-9.387 0-13.653-4.267-13.653-11.52v-85.333c-71.68-2.133-114.347-38.4-114.347-103.68v-75.52c0-7.68 5.12-11.52 13.653-11.52h88.747c9.387 0 13.653 3.84 13.653 11.52v55.467c0 19.2 12.8 28.587 34.133 28.587h42.667c22.187 0 34.133-9.387 34.133-28.587v-95.573l-203.947-55.893c-13.102-1.944-23.041-13.113-23.041-26.605 0-0.097 0.001-0.194 0.002-0.29l-0 0.015v-170.667c0-65.28 42.667-101.547 115.2-103.68v-85.333c0-7.253 4.267-11.52 13.653-11.52h84.48c8.533 0 13.653 4.267 13.653 11.52v85.333c75.947 0 116.053 38.4 116.053 103.68v77.227c0 7.253-4.267 11.52-13.653 11.52z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["dollar"]},"attrs":[{}],"properties":{"order":135,"id":112,"name":"dollar","prevSize":64,"code":59755},"setIdx":0,"setId":1,"iconIdx":72},{"icon":{"paths":["M680.107 170.667c-117.821 0-213.333 95.513-213.333 213.333v0 128h-293.547c-23.564 0-42.667 19.103-42.667 42.667v0 256c0 23.564 19.103 42.667 42.667 42.667v0h512c23.564 0 42.667-19.103 42.667-42.667v0-256c0-23.564-19.103-42.667-42.667-42.667v0h-133.12v-128c0-70.692 57.308-128 128-128s128 57.308 128 128v-0 128c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0-128c0-117.821-95.513-213.333-213.333-213.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["lock-open"]},"attrs":[{}],"properties":{"order":134,"id":111,"name":"lock-open","prevSize":64,"code":59754},"setIdx":0,"setId":1,"iconIdx":73},{"icon":{"paths":["M810.667 256h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 426.667c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-426.667c0-23.564-19.103-42.667-42.667-42.667v0zM469.333 682.667c0 11.782-9.551 21.333-21.333 21.333v0h-170.667c-11.782 0-21.333-9.551-21.333-21.333v0-85.333c0-11.782 9.551-21.333 21.333-21.333v0h170.667c11.782 0 21.333 9.551 21.333 21.333v0zM469.333 469.333c0 11.782-9.551 21.333-21.333 21.333v0h-170.667c-11.782 0-21.333-9.551-21.333-21.333v0-85.333c0-11.782 9.551-21.333 21.333-21.333v0h170.667c11.782 0 21.333 9.551 21.333 21.333v0zM768 682.667c0 11.782-9.551 21.333-21.333 21.333v0h-170.667c-11.782 0-21.333-9.551-21.333-21.333v0-85.333c0-11.782 9.551-21.333 21.333-21.333v0h170.667c11.782 0 21.333 9.551 21.333 21.333v0zM768 469.333c0 11.782-9.551 21.333-21.333 21.333v0h-170.667c-11.782 0-21.333-9.551-21.333-21.333v0-85.333c0-11.782 9.551-21.333 21.333-21.333v0h170.667c11.782 0 21.333 9.551 21.333 21.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["table"]},"attrs":[{}],"properties":{"order":133,"id":110,"name":"table","prevSize":64,"code":59753},"setIdx":0,"setId":1,"iconIdx":74},{"icon":{"paths":["M789.333 446.72c0 107.52-122.027 235.093-262.4 399.787-3.687 4.101-9.010 6.669-14.933 6.669s-11.246-2.568-14.917-6.651l-0.016-0.018c-140.8-163.84-262.4-291.84-262.4-399.787 0-153.167 124.166-277.333 277.333-277.333s277.333 124.166 277.333 277.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["map-marker"]},"attrs":[{}],"properties":{"order":132,"id":109,"name":"map-marker","prevSize":64,"code":59752},"setIdx":0,"setId":1,"iconIdx":75},{"icon":{"paths":["M213.333 448h42.667c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-42.667c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z","M384 448h426.667c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-426.667c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z","M213.333 213.333h42.667c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-42.667c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z","M384 213.333h426.667c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-426.667c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z","M213.333 682.667h42.667c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-42.667c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z","M384 682.667h426.667c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-426.667c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["list"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":131,"id":108,"name":"list","prevSize":64,"code":59751},"setIdx":0,"setId":1,"iconIdx":76},{"icon":{"paths":["M606.293 561.067c-5.293 9.624-11.531 17.902-18.777 25.177l0.004-0.004-3.84 3.413c-6.185 5.883-13.196 10.988-20.818 15.105l-0.516 0.255c-14.435 8.517-31.792 13.578-50.325 13.653l-0.022 0c-58.91 0-106.667-47.756-106.667-106.667v0c0.075-18.555 5.136-35.911 13.911-50.82l-0.258 0.473c4.372-8.138 9.477-15.148 15.399-21.374l-0.039 0.041 3.413-3.84c7.271-7.242 15.549-13.481 24.605-18.485l0.568-0.288-147.2-147.2c-5.699-5.321-13.376-8.588-21.815-8.588-17.673 0-32 14.327-32 32 0 8.44 3.267 16.116 8.606 21.834l-0.017-0.019 50.773 50.773c-58.050 41.252-107.742 89.316-149.403 143.842l-1.211 1.651s152.747 213.333 341.333 213.333c49.114-0.907 95.104-13.43 135.605-34.923l-1.632 0.79 62.293 62.293c5.858 6.274 14.178 10.185 23.412 10.185 17.673 0 32-14.327 32-32 0-9.234-3.911-17.554-10.166-23.394l-0.019-0.017z","M512 298.667c-19.611 0.202-38.574 2.523-56.809 6.745l1.769-0.345 305.493 305.493c33.184-29.834 62.99-62.076 89.635-96.867l1.245-1.693s-152.747-213.333-341.333-213.333z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye-slash"]},"attrs":[{},{}],"properties":{"order":130,"id":107,"name":"eye-slash","prevSize":64,"code":59749},"setIdx":0,"setId":1,"iconIdx":77},{"icon":{"paths":["M512 298.667c-188.587 0-341.333 213.333-341.333 213.333s152.747 213.333 341.333 213.333 341.333-213.333 341.333-213.333-152.747-213.333-341.333-213.333zM512 618.667c-58.91 0-106.667-47.756-106.667-106.667s47.756-106.667 106.667-106.667c58.91 0 106.667 47.756 106.667 106.667v0c0 58.91-47.756 106.667-106.667 106.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["eye"]},"attrs":[{}],"properties":{"order":129,"id":106,"name":"eye","prevSize":64,"code":59750},"setIdx":0,"setId":1,"iconIdx":78},{"icon":{"paths":["M313.6 469.333h539.733v-103.68c-1.77-20.674-18.988-36.784-39.969-36.784-0.949 0-1.891 0.033-2.824 0.098l0.126-0.007h-256l-85.333-72.96h-256c-1.063-0.102-2.299-0.161-3.548-0.161-20.534 0-37.386 15.767-39.108 35.855l-0.010 0.146v439.467c-0.092 0.705-0.144 1.52-0.144 2.347s0.052 1.642 0.154 2.442l-0.010-0.095 100.267-238.933c7.147-16.446 23.251-27.738 41.991-27.738 0.237 0 0.474 0.002 0.711 0.005l-0.036-0z","M865.28 533.333h-505.173c-0.313-0.010-0.68-0.015-1.049-0.015-14.293 0-26.654 8.268-32.563 20.282l-0.095 0.213-78.080 164.267c-1.483 3.855-2.342 8.316-2.342 12.977 0 20.501 16.619 37.12 37.12 37.12 1.276 0 2.536-0.064 3.779-0.19l-0.156 0.013h501.76c0.287 0.007 0.625 0.011 0.964 0.011 16.058 0 30.044-8.871 37.325-21.98l0.111-0.218 76.8-162.56c1.483-3.855 2.342-8.316 2.342-12.977 0-20.501-16.619-37.12-37.12-37.12-1.276 0-2.536 0.064-3.779 0.19l0.156-0.013z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["folder-open"]},"attrs":[{},{}],"properties":{"order":128,"id":105,"name":"folder-open","prevSize":64,"code":59748},"setIdx":0,"setId":1,"iconIdx":79},{"icon":{"paths":["M810.667 768h-597.333c-0.807 0.058-1.749 0.091-2.698 0.091-20.981 0-38.199-16.11-39.959-36.635l-0.010-0.149v-439.467c1.733-20.234 18.584-36.001 39.118-36.001 1.249 0 2.485 0.058 3.704 0.172l-0.156-0.012h256l85.333 72.96h256c0.807-0.058 1.749-0.091 2.698-0.091 20.981 0 38.199 16.11 39.959 36.635l0.010 0.149v365.653c-1.77 20.674-18.988 36.784-39.969 36.784-0.949 0-1.891-0.033-2.824-0.098l0.126 0.007z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["folder"]},"attrs":[{}],"properties":{"order":126,"id":104,"name":"folder","prevSize":64,"code":59747},"setIdx":0,"setId":1,"iconIdx":80},{"icon":{"paths":["M192 256h426.667c23.564 0 42.667 19.103 42.667 42.667v426.667c0 23.564-19.103 42.667-42.667 42.667h-426.667c-23.564 0-42.667-19.103-42.667-42.667v-426.667c0-23.564 19.103-42.667 42.667-42.667z","M840.533 341.333l-136.533 85.333v170.667l136.533 85.333c19.448-2.539 34.311-19.004 34.311-38.941 0-1.312-0.064-2.609-0.19-3.888l0.013 0.162v-256c0.113-1.117 0.177-2.414 0.177-3.726 0-19.937-14.863-36.402-34.112-38.92l-0.198-0.021z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["video"]},"attrs":[{},{}],"properties":{"order":125,"id":103,"name":"video","prevSize":64,"code":59746},"setIdx":0,"setId":1,"iconIdx":81},{"icon":{"paths":["M847.787 504.747l-165.12-216.747s-19.2-32-42.667-32h-256c-23.467 0-42.667 32-42.667 32l-165.12 216.747c-3.324 4.343-5.383 9.809-5.546 15.749l-0.001 0.037v215.467c0 17.493 19.2 32 42.667 32h597.333c23.467 0 42.667-14.507 42.667-32v-215.467c-0.163-5.977-2.223-11.444-5.595-15.852l0.048 0.066zM597.333 490.667l-42.667 64h-85.333l-42.667-64h-128l117.333-170.667h192l117.333 170.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["inbox"]},"attrs":[{}],"properties":{"order":124,"id":102,"name":"inbox","prevSize":64,"code":59745},"setIdx":0,"setId":1,"iconIdx":82},{"icon":{"paths":["M768 469.333h-42.667v-85.333c0-117.821-95.513-213.333-213.333-213.333s-213.333 95.513-213.333 213.333v0 85.333h-42.667c-23.564 0-42.667 19.103-42.667 42.667v0 298.667c0 23.564 19.103 42.667 42.667 42.667v0h512c23.564 0 42.667-19.103 42.667-42.667v0-298.667c0-23.564-19.103-42.667-42.667-42.667v0zM384 384c0-70.692 57.308-128 128-128s128 57.308 128 128v0 85.333h-256z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["lock"]},"attrs":[{}],"properties":{"order":123,"id":101,"name":"lock","prevSize":64,"code":59743},"setIdx":0,"setId":1,"iconIdx":83},{"icon":{"paths":["M768 512h-384v-128c0-70.692 57.308-128 128-128s128 57.308 128 128v0c0 23.564 19.103 42.667 42.667 42.667s42.667-19.103 42.667-42.667v0c0-117.821-95.513-213.333-213.333-213.333s-213.333 95.513-213.333 213.333v0 128h-42.667c-23.564 0-42.667 19.103-42.667 42.667v0 256c0 23.564 19.103 42.667 42.667 42.667v0h512c23.564 0 42.667-19.103 42.667-42.667v0-256c0-23.564-19.103-42.667-42.667-42.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["unlock"]},"attrs":[{}],"properties":{"order":122,"id":100,"name":"unlock","prevSize":64,"code":59744},"setIdx":0,"setId":1,"iconIdx":84},{"icon":{"paths":["M906.24 508.16l-293.547-294.827c-7.733-7.795-18.45-12.621-30.293-12.621s-22.56 4.826-30.291 12.618l-0.003 0.003-29.867 30.293 264.533 264.533c7.418 7.666 11.989 18.126 11.989 29.653s-4.571 21.987-12 29.665l0.011-0.012-211.2 211.2 30.293 30.293c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003 241.067-241.493c7.042-7.587 11.363-17.784 11.363-28.992 0-11.854-4.834-22.58-12.639-30.312l-0.003-0.003z","M725.333 515.413l-306.773-308.48c-7.173-7.136-17.063-11.547-27.983-11.547-0.513 0-1.023 0.010-1.531 0.029l0.073-0.002-237.227 4.267c-23.564 0-42.667 19.103-42.667 42.667v0l-4.267 237.227c-0.013 0.384-0.021 0.835-0.021 1.288 0 10.972 4.406 20.915 11.545 28.157l-0.005-0.005 310.187 308.053c7.666 7.418 18.126 11.989 29.653 11.989s21.987-4.571 29.665-12l-0.012 0.011 239.36-242.773c7.295-7.642 11.784-18.017 11.784-29.44s-4.489-21.798-11.8-29.457l0.016 0.017zM288 378.453c-11.716 12.548-28.356 20.37-46.823 20.37-35.346 0-64-28.654-64-64 0-18.467 7.822-35.107 20.333-46.789l0.037-0.034c11.398-10.643 26.751-17.177 43.63-17.177 35.346 0 64 28.654 64 64 0 16.879-6.534 32.232-17.211 43.667l0.034-0.037z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["tags"]},"attrs":[{},{}],"properties":{"order":121,"id":99,"name":"tags","prevSize":64,"code":59741},"setIdx":0,"setId":1,"iconIdx":85},{"icon":{"paths":["M479.573 195.413l-237.227 4.267c-23.564 0-42.667 19.103-42.667 42.667v0l-4.267 237.227c-0.013 0.384-0.021 0.835-0.021 1.288 0 10.972 4.406 20.915 11.545 28.157l-0.005-0.005 308.48 308.053c7.642 7.295 18.017 11.784 29.44 11.784s21.798-4.489 29.457-11.8l-0.017 0.016 241.493-241.493c7.295-7.642 11.784-18.017 11.784-29.44s-4.489-21.798-11.8-29.457l0.016 0.017-306.773-309.76c-7.237-7.135-17.18-11.541-28.152-11.541-0.453 0-0.904 0.008-1.354 0.022l0.065-0.002zM378.453 378.453c-11.625 11.463-27.599 18.543-45.227 18.543s-33.602-7.079-45.234-18.55l0.007 0.007c-10.643-11.398-17.177-26.751-17.177-43.63 0-35.346 28.654-64 64-64 16.879 0 32.232 6.534 43.667 17.211l-0.037-0.034c11.463 11.625 18.543 27.599 18.543 45.227s-7.079 33.602-18.55 45.234l0.007-0.007z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["tag"]},"attrs":[{}],"properties":{"order":120,"id":98,"name":"tag","prevSize":64,"code":59742},"setIdx":0,"setId":1,"iconIdx":86},{"icon":{"paths":["M810.667 346.88c-30.528-54.639-73.991-98.786-126.385-129.266l-1.615-0.867c-5.567-3.162-12.23-5.025-19.328-5.025-14.658 0-27.46 7.948-34.33 19.769l-0.102 0.19c-3.881 5.942-6.19 13.217-6.19 21.032 0 13.414 6.802 25.239 17.145 32.214l0.138 0.088c80.778 45.773 134.4 131.156 134.4 229.063 0 144.92-117.48 262.4-262.4 262.4s-262.4-117.48-262.4-262.4c0-97.907 53.622-183.29 133.099-228.384l1.301-0.679c12.052-6.906 20.040-19.693 20.040-34.347 0-21.79-17.664-39.453-39.453-39.453-7.136 0-13.83 1.895-19.606 5.208l0.192-0.102c-104.428 59.707-173.667 170.425-173.667 297.316 0 188.513 152.82 341.333 341.333 341.333s341.333-152.82 341.333-341.333c0-61.256-16.136-118.743-44.389-168.443l0.883 1.687z","M512 572.16c22.15 0 40.107-17.956 40.107-40.107v0-321.28c0-22.15-17.956-40.107-40.107-40.107s-40.107 17.956-40.107 40.107v0 321.28c0 22.15 17.956 40.107 40.107 40.107h0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["power-off"]},"attrs":[{},{}],"properties":{"order":119,"id":97,"name":"power-off","prevSize":64,"code":59740},"setIdx":0,"setId":1,"iconIdx":87},{"icon":{"paths":["M838.827 384l-198.827-198.827c-8.976-8.92-21.33-14.451-34.976-14.507l-0.011-0h-377.6c-31.243 0.24-56.507 25.503-56.747 56.724l-0 0.023v569.173c0.24 31.243 25.503 56.507 56.724 56.747l0.023 0h569.173c31.243-0.24 56.507-25.503 56.747-56.724l0-0.023v-377.6c-0.056-13.656-5.586-26.010-14.509-34.989l0.003 0.003zM512 768c-47.128 0-85.333-38.205-85.333-85.333s38.205-85.333 85.333-85.333c47.128 0 85.333 38.205 85.333 85.333v0c0 47.128-38.205 85.333-85.333 85.333v0zM597.333 384c0 23.564-19.103 42.667-42.667 42.667v0h-256c-23.564 0-42.667-19.103-42.667-42.667v0-85.333c0-23.564 19.103-42.667 42.667-42.667v0h256c23.564 0 42.667 19.103 42.667 42.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["save"]},"attrs":[{}],"properties":{"order":118,"id":96,"name":"save","prevSize":64,"code":59739},"setIdx":0,"setId":1,"iconIdx":88},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM538.453 704.427c0.027 0.269 0.043 0.581 0.043 0.896 0 5.184-4.203 9.387-9.387 9.387-0.316 0-0.628-0.016-0.935-0.046l0.039 0.003h-47.787c-0.286 0.032-0.617 0.051-0.953 0.051-4.948 0-8.96-4.012-8.96-8.96 0-0.47 0.036-0.931 0.106-1.381l-0.006 0.050v-46.507c-0.063-0.4-0.099-0.861-0.099-1.331 0-4.948 4.012-8.96 8.96-8.96 0.336 0 0.667 0.018 0.993 0.054l-0.040-0.004h47.787c0.269-0.027 0.581-0.043 0.896-0.043 5.184 0 9.387 4.203 9.387 9.387 0 0.316-0.016 0.628-0.046 0.935l0.003-0.039zM613.547 482.133c0.008 0.189 0.013 0.41 0.013 0.632 0 4.938-2.33 9.332-5.951 12.142l-0.035 0.026-64 61.867c-3.173 2.679-5.175 6.659-5.175 11.107 0 0.446 0.020 0.887 0.059 1.322l-0.004-0.056v22.187c0.027 0.269 0.043 0.581 0.043 0.896 0 5.184-4.203 9.387-9.387 9.387-0.316 0-0.628-0.016-0.935-0.046l0.039 0.003h-47.787c-0.286 0.032-0.617 0.051-0.953 0.051-4.948 0-8.96-4.012-8.96-8.96 0-0.47 0.036-0.931 0.106-1.381l-0.006 0.050v-42.667c-0.011-0.23-0.018-0.5-0.018-0.772 0-4.514 1.797-8.608 4.715-11.605l-0.004 0.004 69.12-68.267v-71.68c0.059-0.552 0.093-1.193 0.093-1.842 0-10.133-8.214-18.347-18.347-18.347-0.785 0-1.558 0.049-2.316 0.145l0.090-0.009h-23.893c-0.816-0.131-1.756-0.207-2.713-0.207-9.897 0-17.92 8.023-17.92 17.92 0 0.825 0.056 1.637 0.164 2.433l-0.010-0.093v39.68c0.037 0.273 0.057 0.59 0.057 0.911 0 4.006-3.247 7.253-7.253 7.253-0.321 0-0.637-0.021-0.947-0.061l0.037 0.004h-52.48c-5.973 0-8.533-2.987-8.533-8.107v-52.053c-0.333-2.478-0.524-5.344-0.524-8.253 0-36.053 29.227-65.28 65.28-65.28 3.043 0 6.038 0.208 8.971 0.611l-0.34-0.038h56.32c2.444-0.322 5.271-0.506 8.14-0.506 36.289 0 65.707 29.418 65.707 65.707 0 2.735-0.167 5.43-0.491 8.077l0.032-0.318z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["question-circle"]},"attrs":[{}],"properties":{"order":117,"id":95,"name":"question-circle","prevSize":64,"code":59737},"setIdx":0,"setId":1,"iconIdx":89},{"icon":{"paths":["M559.787 170.667c3.951-0.501 8.522-0.786 13.16-0.786 61.031 0 110.507 49.476 110.507 110.507 0 4.638-0.286 9.209-0.84 13.697l0.054-0.537v168.107c0.036 0.503 0.056 1.089 0.056 1.68 0 7.929-3.665 15.001-9.394 19.615l-0.048 0.038-108.373 104.107c-5.287 4.922-8.583 11.922-8.583 19.692 0 0.577 0.018 1.151 0.054 1.719l-0.004-0.078v37.547c0.068 0.545 0.108 1.175 0.108 1.814 0 8.483-6.877 15.36-15.36 15.36-0.639 0-1.27-0.039-1.888-0.115l0.074 0.007h-80.213c-0.545 0.068-1.175 0.108-1.814 0.108-8.483 0-15.36-6.877-15.36-15.36 0-0.639 0.039-1.27 0.115-1.888l-0.007 0.074v-75.093c-0.012-0.299-0.019-0.651-0.019-1.003 0-7.697 3.287-14.626 8.534-19.46l0.018-0.017 116.053-115.2v-117.76c0.101-0.943 0.159-2.038 0.159-3.146 0-17.202-13.945-31.147-31.147-31.147-1.108 0-2.202 0.058-3.281 0.171l0.135-0.011h-42.667c-1.238-0.179-2.668-0.282-4.122-0.282-16.731 0-30.293 13.563-30.293 30.293 0 1.454 0.102 2.883 0.3 4.282l-0.019-0.161v66.56c0.047 0.406 0.074 0.877 0.074 1.354 0 6.834-5.54 12.373-12.373 12.373-0.477 0-0.948-0.027-1.411-0.080l0.057 0.005h-87.040c-0.406 0.047-0.877 0.074-1.354 0.074-6.834 0-12.373-5.54-12.373-12.373 0-0.477 0.027-0.948 0.080-1.411l-0.005 0.057v-90.453c-0.541-4.099-0.85-8.838-0.85-13.65 0-60.796 49.284-110.080 110.080-110.080 4.811 0 9.551 0.309 14.199 0.907l-0.55-0.058zM442.027 757.76c-0.068-0.545-0.108-1.175-0.108-1.814 0-8.483 6.877-15.36 15.36-15.36 0.639 0 1.27 0.039 1.888 0.115l-0.074-0.007h80.213c0.545-0.068 1.175-0.108 1.814-0.108 8.483 0 15.36 6.877 15.36 15.36 0 0.639-0.039 1.27-0.115 1.888l0.007-0.074v78.507c0.068 0.545 0.108 1.175 0.108 1.814 0 8.483-6.877 15.36-15.36 15.36-0.639 0-1.27-0.039-1.888-0.115l0.074 0.007h-80.213c-0.545 0.068-1.175 0.108-1.814 0.108-8.483 0-15.36-6.877-15.36-15.36 0-0.639 0.039-1.27 0.115-1.888l-0.007 0.074z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["question"]},"attrs":[{}],"properties":{"order":116,"id":94,"name":"question","prevSize":64,"code":59738},"setIdx":0,"setId":1,"iconIdx":90},{"icon":{"paths":["M677.12 314.027h90.88c19.627 0 17.92-16.213 17.92-35.84v-5.973l-103.253-101.547h-5.973c-19.627 0-35.413 0-35.413 17.493v90.027c0 19.794 16.046 35.84 35.84 35.84v0z","M317.013 744.96v-459.52h-42.667c-19.558 0-35.413 15.855-35.413 35.413v0 497.067c0 19.558 15.855 35.413 35.413 35.413v0h354.987c19.558 0 35.413-15.855 35.413-35.413v0-37.547h-311.893c-0.001 0-0.002 0-0.003 0-19.644 0-35.597-15.804-35.837-35.391l-0-0.023z","M640 348.16c-19.558 0-35.413-15.855-35.413-35.413v0-142.080h-213.333c-19.558 0-35.413 15.855-35.413 35.413h0v497.067c-0 19.558 15.855 35.413 35.413 35.413h354.987c19.558 0 35.413-15.855 35.413-35.413v0-354.987z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["copy"]},"attrs":[{},{},{}],"properties":{"order":115,"id":93,"name":"copy","prevSize":64,"code":59735},"setIdx":0,"setId":1,"iconIdx":91},{"icon":{"paths":["M597.333 384c-23.564 0-42.667-19.103-42.667-42.667v0-170.667h-256c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h426.667c23.564 0 42.667-19.103 42.667-42.667v0-426.667z","M640 341.333h106.667c23.467 0 21.333-19.2 21.333-42.667v-7.253l-120.747-120.747h-7.253c-23.467 0-42.667 0-42.667 21.333v106.667c0 23.564 19.103 42.667 42.667 42.667v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["file"]},"attrs":[{},{}],"properties":{"order":114,"id":92,"name":"file","prevSize":64,"code":59736},"setIdx":0,"setId":1,"iconIdx":92},{"icon":{"paths":["M807.68 170.667h-454.827c-25.214 0-45.653 20.44-45.653 45.653h0v90.88h-90.88c-25.214-0-45.653 20.44-45.653 45.653v0 454.827c0 25.214 20.44 45.653 45.653 45.653v0h454.827c25.214 0 45.653-20.44 45.653-45.653v0-90.88h90.88c25.214 0 45.653-20.44 45.653-45.653v0-454.827c0-25.214-20.44-45.653-45.653-45.653v0zM625.92 762.453h-364.373v-364.373h45.653v273.067c-0 25.214 20.44 45.653 45.653 45.653v0h273.067zM762.453 625.92h-364.373v-364.373h364.373z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["clone"]},"attrs":[{}],"properties":{"order":111,"id":90,"name":"clone","prevSize":64,"code":59733},"setIdx":0,"setId":1,"iconIdx":93},{"icon":{"paths":["M810.667 215.893h-63.147v-47.787c0-23.564-19.103-42.667-42.667-42.667v0h-18.347c-23.564 0-42.667 19.103-42.667 42.667v0 47.787h-262.827v-45.227c0-23.564-19.103-42.667-42.667-42.667v0h-18.347c-23.564 0-42.667 19.103-42.667 42.667v0 46.933h-64c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-597.333c0.022-0.509 0.034-1.106 0.034-1.707 0-23.564-19.103-42.667-42.667-42.667-0.012 0-0.024 0-0.036 0l0.002-0zM789.333 791.893c0 23.564-19.103 42.667-42.667 42.667v0h-469.333c-23.564 0-42.667-19.103-42.667-42.667v0-357.973c0-23.564 19.103-42.667 42.667-42.667v0h469.333c23.564 0 42.667 19.103 42.667 42.667v0z","M674.56 489.813l-37.973-37.973c-4.883-4.981-11.681-8.068-19.2-8.068s-14.317 3.087-19.196 8.064l-0.004 0.004-85.333 85.333-85.333-85.333c-4.883-4.981-11.681-8.068-19.2-8.068s-14.317 3.087-19.196 8.064l-0.004 0.004-37.973 37.973c-4.981 4.883-8.068 11.681-8.068 19.2s3.087 14.317 8.064 19.196l0.004 0.004 85.333 85.333-85.333 85.333c-4.981 4.883-8.068 11.681-8.068 19.2s3.087 14.317 8.064 19.196l0.004 0.004 37.973 37.973c4.883 4.981 11.681 8.068 19.2 8.068s14.317-3.087 19.196-8.064l0.004-0.004 85.333-85.333 85.333 85.333c4.883 4.981 11.681 8.068 19.2 8.068s14.317-3.087 19.196-8.064l0.004-0.004 37.973-37.973c4.981-4.883 8.068-11.681 8.068-19.2s-3.087-14.317-8.064-19.196l-0.004-0.004-85.333-85.333 85.333-85.333c4.981-4.883 8.068-11.681 8.068-19.2s-3.087-14.317-8.064-19.196l-0.004-0.004z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["calendar-times"]},"attrs":[{},{}],"properties":{"order":110,"id":89,"name":"calendar-times","prevSize":64,"code":59730},"setIdx":0,"setId":1,"iconIdx":94},{"icon":{"paths":["M810.667 215.893h-63.147v-47.787c0-23.564-19.103-42.667-42.667-42.667v0h-18.347c-23.564 0-42.667 19.103-42.667 42.667v0 47.787h-262.827v-45.227c0-23.564-19.103-42.667-42.667-42.667v0h-18.347c-23.564 0-42.667 19.103-42.667 42.667v0 46.933h-64c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-597.333c0.022-0.509 0.034-1.106 0.034-1.707 0-23.564-19.103-42.667-42.667-42.667-0.012 0-0.024 0-0.036 0l0.002-0zM789.333 791.893c0 23.564-19.103 42.667-42.667 42.667v0h-469.333c-23.564 0-42.667-19.103-42.667-42.667v0-357.973c0-23.564 19.103-42.667 42.667-42.667v0h469.333c23.564 0 42.667 19.103 42.667 42.667v0z","M362.667 569.173h298.667c11.782 0 21.333 9.551 21.333 21.333v47.787c0 11.782-9.551 21.333-21.333 21.333h-298.667c-11.782 0-21.333-9.551-21.333-21.333v-47.787c0-11.782 9.551-21.333 21.333-21.333z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["calendar-minus"]},"attrs":[{},{}],"properties":{"order":109,"id":88,"name":"calendar-minus","prevSize":64,"code":59731},"setIdx":0,"setId":1,"iconIdx":95},{"icon":{"paths":["M810.667 215.893h-63.147v-47.787c0-23.564-19.103-42.667-42.667-42.667v0h-18.347c-23.564 0-42.667 19.103-42.667 42.667v0 47.787h-262.827v-45.227c0-23.564-19.103-42.667-42.667-42.667v0h-18.347c-23.564 0-42.667 19.103-42.667 42.667v0 46.933h-64c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-597.333c0.022-0.509 0.034-1.106 0.034-1.707 0-23.564-19.103-42.667-42.667-42.667-0.012 0-0.024 0-0.036 0l0.002-0zM789.333 791.893c0 23.564-19.103 42.667-42.667 42.667v0h-469.333c-23.564 0-42.667-19.103-42.667-42.667v0-357.973c0-23.564 19.103-42.667 42.667-42.667v0h469.333c23.564 0 42.667 19.103 42.667 42.667v0z","M659.627 568.747h-101.973v-101.973c0-12.725-10.315-23.040-23.040-23.040v0h-45.227c-12.725 0-23.040 10.315-23.040 23.040v0 101.973h-101.973c-12.725 0-23.040 10.315-23.040 23.040v0 45.227c0 12.725 10.315 23.040 23.040 23.040v0h101.973v101.973c0 12.725 10.315 23.040 23.040 23.040v0h45.227c12.725 0 23.040-10.315 23.040-23.040v0-101.973h101.973c12.725 0 23.040-10.315 23.040-23.040v0-45.227c0-12.725-10.315-23.040-23.040-23.040v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["calendar-plus"]},"attrs":[{},{}],"properties":{"order":108,"id":87,"name":"calendar-plus","prevSize":64,"code":59732},"setIdx":0,"setId":1,"iconIdx":96},{"icon":{"paths":["M597.333 256c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z","M597.333 512c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z","M597.333 768c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["ellipsis-v"]},"attrs":[{},{},{}],"properties":{"order":107,"id":86,"name":"ellipsis-v","prevSize":64,"code":59728},"setIdx":0,"setId":1,"iconIdx":97},{"icon":{"paths":["M341.333 512c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z","M597.333 512c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z","M853.333 512c0 47.128-38.205 85.333-85.333 85.333s-85.333-38.205-85.333-85.333c0-47.128 38.205-85.333 85.333-85.333s85.333 38.205 85.333 85.333z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["ellipsis-h"]},"attrs":[{},{},{}],"properties":{"order":106,"id":85,"name":"ellipsis-h","prevSize":64,"code":59729},"setIdx":0,"setId":1,"iconIdx":98},{"icon":{"paths":["M725.333 853.333l-213.333-146.347-213.333 146.347v-634.027c-0.050-0.801-0.078-1.738-0.078-2.681 0-24.276 18.772-44.167 42.591-45.95l0.154-0.009h341.333c23.973 1.792 42.745 21.684 42.745 45.959 0 0.943-0.028 1.88-0.084 2.809l0.006-0.128z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["bookmark"]},"attrs":[{}],"properties":{"order":105,"id":84,"name":"bookmark","prevSize":64,"code":59726},"setIdx":0,"setId":1,"iconIdx":99},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM765.013 398.933v2.133l-11.947-12.8v-11.52l-11.52-9.813-3.84-4.267h-12.373l3.84 11.947 16.213 8.533 2.56 2.987h-3.413v9.387l-7.68 3.413h-6.4l-5.12-5.547h11.093l2.56-3.84-23.467-16.213-2.987-6.4-9.387 8.96-9.813-2.133-14.933 19.2-2.987 7.68h-23.893l-8.533-3.84-2.987-15.787 2.987-8.107 14.080-2.987 15.787 2.987 2.133-8.533h-6.827l2.133-13.227 15.787-2.56 11.093-15.787h21.76c17.836 19.097 33.189 40.852 45.331 64.526l0.749 1.607zM711.68 320h-2.56l-2.987-7.253zM701.44 309.76h-4.267v-4.267zM670.293 327.253l-6.827-4.267-4.693-2.987v-4.693l2.987-4.693h9.813l2.56 11.947 5.547 8.533 3.413 4.267 6.4 2.56-6.827 5.547h-20.48v-10.24h7.253zM662.187 327.253v6.4l-12.8 8.96h-6.827v-8.533l5.973-9.813h8.107zM373.76 271.787v0 5.12h20.48l-2.56-6.4h-17.067c7.718-4.702 16.959-9.549 26.504-13.841l1.656-0.666h13.227l10.667-3.413 6.4 2.987-11.52 10.667h-15.36c0.199 1.601 0.313 3.454 0.313 5.333s-0.114 3.732-0.334 5.552l0.022-0.219h20.48v-5.12h12.8v-7.68h-7.68l5.973-8.107h26.027l-11.093 10.24v7.68h11.52v-14.080l12.373-3.84 19.627-2.56 28.587 12.8v10.667l9.387 2.56-4.693 8.533h-13.227l-4.267 8.107-29.44-6.827 23.467-12.373-8.96-7.68-20.053 2.56-7.68 8.107h-9.387v4.693h-4.267v4.267h-7.68v-8.96l-13.227 3.84-27.307 16.213 2.987 11.093 7.68 5.12h15.36v25.173h6.827l6.4-13.653 16.213-5.12v-23.893l6.4-4.693 21.76 4.693v14.080h5.547l15.36-8.107v17.92l11.52 7.253v11.52l-11.52 2.987v3.413l13.653 5.973v7.68h-3.84l-17.067-5.12v-5.547l7.253-3.413v-5.973h-5.12v4.693h-16.213l-2.56-4.693h-9.813l-2.987 2.56v5.547h11.093l-5.12 5.973-2.56-2.987h-4.693l-13.653 12.8-20.053 11.093-18.773 19.627v8.533l-18.773 12.8-8.96 9.387v18.347l-12.8-5.973v-8.107h-35.84l-18.347 9.387-8.107 14.933-3.413 11.52 5.547 11.52h14.507l23.467-15.36 2.133 7.68-7.253 13.653 17.493 2.987 2.133 27.307 24.32 4.267 15.36-17.92 18.773 3.84 6.4 8.96h17.92v-5.547l9.813 5.12 11.093 17.493h19.2l7.253 12.373v15.36l21.333 8.107h29.867l7.68 13.227 11.947 3.413v10.667l-13.227 16.64-3.84 36.693-11.52 9.387h-20.907l-5.973 10.24 4.267 18.773-19.2 24.32-5.973 11.52-17.92 8.533h-11.947v5.12l8.107 2.56v5.12l-7.68 7.253 4.693 5.973h8.96v7.253l-2.56 6.827v5.547l12.373 10.24c-10.667 0-20.907 0-31.147-3.84l-5.973-5.547-14.080-24.747v-23.893l-10.667-14.080 4.267-23.893h-5.973v-49.92s-17.92-13.227-18.773-13.227l-9.387-2.56v-9.813l-23.040-29.013 2.56-10.24v-17.067l15.787-11.093-2.133-18.773-23.467-2.133-20.053-22.613-12.8-3.84h-8.107v-7.68h-10.667v4.267l-26.453-6.4-10.24-20.48 4.693-7.68-17.067-24.747-2.987-17.92h-6.827l2.56 17.493 11.52 17.92v7.253h-9.813l-11.947-20.48v-20.48c22.54-63.527 65.458-115.145 120.752-148.2l1.275-0.706zM501.76 360.107v3.84h-4.267v3.84h-8.533v-3.84h8.533v-4.267h3.413zM478.293 367.36v4.267h-8.96v-4.267l2.56-3.413zM738.133 673.707l-3.84-5.547v-24.32l-8.96-8.96v-9.813l11.52-21.76-21.333-37.547 2.133-25.6-19.2-2.133-6.827-7.253h-13.227l-6.4 6.4h-35.84l-29.013-33.28v-25.6h4.693v-9.813h-6.827l-2.987-10.667 33.707-24.32v-17.067l16.64-9.387h20.053l10.24-4.693 34.133-2.987v17.493l27.307 6.827 5.12 3.84h5.12v-9.387h15.36l2.987 2.56c10.337 27.116 16.421 58.468 16.64 91.213l0 0.093c-0.081 60.759-19.749 116.909-53.026 162.491l0.546-0.785z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["globe"]},"attrs":[{}],"properties":{"order":104,"id":83,"name":"globe","prevSize":64,"code":59727},"setIdx":0,"setId":1,"iconIdx":100},{"icon":{"paths":["M823.467 203.947l-68.693 69.12c-61.888-62.497-147.711-101.194-242.573-101.194-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c154.74 0 285.431-102.968 327.292-244.124l0.614-2.415c0.864-3.207 1.36-6.89 1.36-10.688 0-23.564-19.103-42.667-42.667-42.667-0.478 0-0.955 0.008-1.43 0.023l0.069-0.002c-0.033-0-0.071-0-0.11-0-18.678 0-34.552 12.002-40.333 28.714l-0.090 0.3c-31.908 107.6-129.887 184.75-245.885 184.75-14.723 0-29.156-1.243-43.199-3.629l1.511 0.212c-109.168-24.767-192.85-111.312-213.069-220.152l-0.265-1.715c-1.099-8.907-1.726-19.218-1.726-29.675 0-141.385 114.615-256 256-256 71.498 0 136.15 29.311 182.596 76.571l0.036 0.037-12.8 12.8-76.8 79.787c-3.1 3.217-5.009 7.599-5.009 12.427 0 9.407 7.249 17.122 16.466 17.862l0.063 0.004h219.733c0.071 0.001 0.155 0.002 0.239 0.002 10.368 0 18.773-8.405 18.773-18.773 0-1.055-0.087-2.090-0.254-3.098l0.015 0.109v-219.733c-0.925-9.111-8.556-16.161-17.833-16.161-4.639 0-8.866 1.762-12.048 4.654l0.015-0.013z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["replay"]},"attrs":[{}],"properties":{"order":102,"id":82,"name":"replay","prevSize":64,"code":59725},"setIdx":0,"setId":1,"iconIdx":101},{"icon":{"paths":["M790.613 170.667h-557.227c-17.708 0.262-31.962 14.678-31.962 32.423 0 7.99 2.89 15.305 7.681 20.957l-0.039-0.047 217.6 216.32v270.933c-0.028 0.412-0.044 0.894-0.044 1.379 0 5.145 1.785 9.872 4.77 13.597l-0.033-0.043 131.84 128c4.267 4.267 34.133 0 34.133-42.667v-371.2l217.6-216.747c4.83-5.573 7.774-12.896 7.774-20.907 0-17.673-14.327-32-32-32-0.033 0-0.066 0-0.099 0l0.005-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["filter"]},"attrs":[{}],"properties":{"order":101,"id":81,"name":"filter","prevSize":64,"code":59724},"setIdx":0,"setId":1,"iconIdx":102},{"icon":{"paths":["M768 341.333h-85.333v-128c0-23.564-19.103-42.667-42.667-42.667v0h-341.333c-23.564 0-42.667 19.103-42.667 42.667v0 128c-47.128 0-85.333 38.205-85.333 85.333v0 234.667c0.234 11.687 9.647 21.099 21.311 21.333l0.022 0h64v128c0 23.564 19.103 42.667 42.667 42.667v0h341.333c23.564 0 42.667-19.103 42.667-42.667v0-128h149.333c11.687-0.234 21.099-9.647 21.333-21.311l0-0.022v-234.667c0-47.128-38.205-85.333-85.333-85.333v0zM320 234.667h256v21.333c0.234 11.687 9.647 21.099 21.311 21.333l0.022 0h21.333v149.333h-298.667v-192zM618.667 789.333h-298.667v-170.667h298.667v170.667zM768 458.667c-17.673 0-32-14.327-32-32s14.327-32 32-32c17.673 0 32 14.327 32 32v0c-0.237 17.577-14.423 31.763-31.977 32l-0.023 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["print"]},"attrs":[{}],"properties":{"order":99,"id":80,"name":"print","prevSize":64,"code":59723},"setIdx":0,"setId":1,"iconIdx":103},{"icon":{"paths":["M405.333 213.333h426.667c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-426.667c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 384h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M405.333 554.667h426.667c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-426.667c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 725.333h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["align-right"]},"attrs":[{},{},{},{}],"properties":{"order":98,"id":79,"name":"align-right","prevSize":64,"code":59718},"setIdx":0,"setId":1,"iconIdx":104},{"icon":{"paths":["M192 213.333h426.667c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-426.667c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 384h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 554.667h426.667c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-426.667c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 725.333h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["align-left"]},"attrs":[{},{},{},{}],"properties":{"order":97,"id":78,"name":"align-left","prevSize":64,"code":59719},"setIdx":0,"setId":1,"iconIdx":105},{"icon":{"paths":["M320 213.333h384c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-384c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 384h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M320 554.667h384c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-384c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 725.333h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["align-center"]},"attrs":[{},{},{},{}],"properties":{"order":96,"id":77,"name":"align-center","prevSize":64,"code":59720},"setIdx":0,"setId":1,"iconIdx":106},{"icon":{"paths":["M192 213.333h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 384h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 554.667h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z","M192 725.333h640c11.782 0 21.333 9.551 21.333 21.333v42.667c0 11.782-9.551 21.333-21.333 21.333h-640c-11.782 0-21.333-9.551-21.333-21.333v-42.667c0-11.782 9.551-21.333 21.333-21.333z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["align-justify"]},"attrs":[{},{},{},{}],"properties":{"order":95,"id":76,"name":"align-justify","prevSize":64,"code":59721},"setIdx":0,"setId":1,"iconIdx":107},{"icon":{"paths":["M832.427 451.84l-85.333-14.080c-4.9-15.611-10.688-29.028-17.657-41.705l0.59 1.172 50.773-69.547c1.604-3.817 2.535-8.254 2.535-12.909 0-10.348-4.605-19.62-11.877-25.88l-0.045-0.038-36.267-36.267c-6.297-7.317-15.57-11.922-25.918-11.922-4.654 0-9.091 0.932-13.134 2.619l0.226-0.083-69.547 49.067c-11.505-6.378-24.922-12.167-38.932-16.627l-1.601-0.44-14.080-85.333c-5.988-11.563-17.862-19.328-31.55-19.328-1.060 0-2.109 0.047-3.145 0.138l0.134-0.010h-51.2c-0.665-0.044-1.441-0.070-2.223-0.070-14.33 0-26.672 8.511-32.247 20.755l-0.090 0.222-14.080 85.333c-15.611 4.9-29.028 10.688-41.705 17.657l1.172-0.59-69.547-50.773c-3.817-1.604-8.254-2.535-12.909-2.535-10.348 0-19.62 4.605-25.88 11.877l-0.038 0.045-36.267 36.267c-7.317 6.297-11.922 15.57-11.922 25.918 0 4.654 0.932 9.091 2.619 13.134l-0.083-0.226 49.067 69.547c-6.378 11.505-12.167 24.922-16.627 38.932l-0.44 1.601-85.333 14.080c-11.563 5.988-19.328 17.862-19.328 31.55 0 1.060 0.047 2.109 0.138 3.145l-0.010-0.134v51.2c-0.044 0.665-0.070 1.441-0.070 2.223 0 14.33 8.511 26.672 20.755 32.247l0.222 0.090 85.333 14.080c4.9 15.611 10.688 29.028 17.657 41.705l-0.59-1.172-50.773 69.547c-1.604 3.817-2.535 8.254-2.535 12.909 0 10.348 4.605 19.62 11.877 25.88l0.045 0.038 36.267 36.267c6.297 7.317 15.57 11.922 25.918 11.922 4.654 0 9.091-0.932 13.134-2.619l-0.226 0.083 69.547-49.067c11.505 6.378 24.922 12.167 38.932 16.627l1.601 0.44 14.080 85.333c5.665 12.465 18.007 20.977 32.337 20.977 0.782 0 1.558-0.025 2.328-0.075l-0.105 0.005h51.2c0.665 0.044 1.441 0.070 2.223 0.070 14.33 0 26.672-8.511 32.247-20.755l0.090-0.222 14.080-85.333c15.611-4.9 29.028-10.688 41.705-17.657l-1.172 0.59 69.547 49.067c3.817 1.604 8.254 2.535 12.909 2.535 10.348 0 19.62-4.605 25.88-11.877l0.038-0.045 36.267-36.267c7.317-6.297 11.922-15.57 11.922-25.918 0-4.654-0.932-9.091-2.619-13.134l0.083 0.226-49.067-69.547c6.378-11.505 12.167-24.922 16.627-38.932l0.44-1.601 85.333-14.080c11.563-5.988 19.328-17.862 19.328-31.55 0-1.060-0.047-2.109-0.138-3.145l0.010 0.134v-51.2c0.044-0.665 0.070-1.441 0.070-2.223 0-14.33-8.511-26.672-20.755-32.247l-0.222-0.090zM512 636.16c-68.572 0-124.16-55.588-124.16-124.16s55.588-124.16 124.16-124.16c68.572 0 124.16 55.588 124.16 124.16v0c-0.242 68.474-55.686 123.918-124.137 124.16l-0.023 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cog"]},"attrs":[{}],"properties":{"order":94,"id":75,"name":"cog","prevSize":64,"code":59722},"setIdx":0,"setId":1,"iconIdx":108},{"icon":{"paths":["M725.333 432.64c0-2.133 0-3.84 0-5.973-0.239-46.947-38.352-84.913-85.332-84.913-21.23 0-40.649 7.753-55.581 20.582l0.113-0.095c-26.218-62.624-86.998-105.82-157.867-105.82-94.109 0-170.427 76.171-170.666 170.224l-0 0.023c-0.201 3.378-0.316 7.329-0.316 11.307s0.115 7.928 0.341 11.849l-0.025-0.542c-51.619 30-85.772 85.038-85.772 148.054 0 94.257 76.41 170.667 170.667 170.667 0.154 0 0.308-0 0.462-0.001l-0.024 0h341.333c93.373-1.155 168.621-77.117 168.621-170.654 0-78.35-52.797-144.369-124.754-164.42l-1.2-0.286zM637.013 583.253l-114.773 113.92c-2.364 2.809-5.882 4.582-9.813 4.582s-7.449-1.773-9.797-4.562l-0.016-0.019-115.2-113.92c-2.168-2.348-3.497-5.499-3.497-8.96 0-7.305 5.922-13.227 13.227-13.227 0.030 0 0.059 0 0.089 0l-0.005-0h83.2v-122.453c0.231-8.624 7.162-15.555 15.765-15.786l0.022-0h31.573c8.624 0.231 15.555 7.162 15.786 15.765l0 0.022v122.453h83.2c0.025-0 0.055-0 0.084-0 7.305 0 13.227 5.922 13.227 13.227 0 3.461-1.329 6.612-3.506 8.969l0.008-0.009z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cloud-download"]},"attrs":[{}],"properties":{"order":93,"id":74,"name":"cloud-download","prevSize":64,"code":59715},"setIdx":0,"setId":1,"iconIdx":109},{"icon":{"paths":["M725.333 432.64c0-2.133 0-3.84 0-5.973-0.239-46.947-38.352-84.913-85.332-84.913-21.23 0-40.649 7.753-55.581 20.582l0.113-0.095c-26.218-62.624-86.998-105.82-157.867-105.82-94.109 0-170.427 76.171-170.666 170.224l-0 0.023c-0.201 3.378-0.316 7.329-0.316 11.307s0.115 7.928 0.341 11.849l-0.025-0.542c-51.619 30-85.772 85.038-85.772 148.054 0 94.257 76.41 170.667 170.667 170.667 0.154 0 0.308-0 0.462-0.001l-0.024 0h341.333c93.373-1.155 168.621-77.117 168.621-170.654 0-78.35-52.797-144.369-124.754-164.42l-1.2-0.286zM627.2 547.413h-83.627v122.453c-0.231 8.624-7.162 15.555-15.765 15.786l-0.022 0h-31.573c-8.624-0.231-15.555-7.162-15.786-15.765l-0-0.022v-122.453h-83.2c-0.025 0-0.055 0-0.084 0-7.305 0-13.227-5.922-13.227-13.227 0-3.461 1.329-6.612 3.506-8.969l-0.008 0.009 114.773-113.92c2.364-2.809 5.882-4.582 9.813-4.582s7.449 1.773 9.797 4.562l0.016 0.019 114.773 113.92c2.168 2.348 3.497 5.499 3.497 8.96 0 7.305-5.922 13.227-13.227 13.227-0.030 0-0.059-0-0.089-0l0.005 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cloud-upload"]},"attrs":[{}],"properties":{"order":92,"id":73,"name":"cloud-upload","prevSize":64,"code":59716},"setIdx":0,"setId":1,"iconIdx":110},{"icon":{"paths":["M725.333 432.64c0-2.133 0-3.84 0-5.973-0.239-46.947-38.352-84.913-85.332-84.913-21.23 0-40.649 7.753-55.581 20.582l0.113-0.095c-26.218-62.624-86.998-105.82-157.867-105.82-94.109 0-170.427 76.171-170.666 170.224l-0 0.023c-0.201 3.378-0.316 7.329-0.316 11.307s0.115 7.928 0.341 11.849l-0.025-0.542c-51.619 30-85.772 85.038-85.772 148.054 0 94.257 76.41 170.667 170.667 170.667 0.154 0 0.308-0 0.462-0.001l-0.024 0h341.333c93.373-1.155 168.621-77.117 168.621-170.654 0-78.35-52.797-144.369-124.754-164.42l-1.2-0.286z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["cloud"]},"attrs":[{}],"properties":{"order":91,"id":72,"name":"cloud","prevSize":64,"code":59717},"setIdx":0,"setId":1,"iconIdx":111},{"icon":{"paths":["M800.853 298.667l-75.52-75.52c-8.989-11.049-22.586-18.051-37.818-18.051-11.376 0-21.841 3.906-30.125 10.449l0.103-0.078-30.293 30.293 151.040 151.040 32.427-30.293c5.98-7.989 9.575-18.064 9.575-28.979 0-15.828-7.561-29.891-19.268-38.773l-0.121-0.088z","M220.16 653.227l-15.36 165.973 165.973-15.36 377.173-377.173-150.613-150.613zM251.733 672l29.867-32 102.4 102.4-30.293 29.867-55.040 5.12 4.693-55.040-56.747 2.987 5.12-55.040z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["pencil"]},"attrs":[{},{}],"properties":{"order":90,"id":71,"name":"pencil","prevSize":64,"code":59714},"setIdx":0,"setId":1,"iconIdx":112},{"icon":{"paths":["M686.507 318.72c0 97.084-78.702 175.787-175.787 175.787s-175.787-78.702-175.787-175.787c0-97.084 78.702-175.787 175.787-175.787s175.787 78.702 175.787 175.787z","M669.013 469.333c-39.875 41.867-96.044 67.904-158.293 67.904s-118.418-26.037-158.209-67.815l-0.085-0.089c-57.665 29.637-96.43 88.719-96.43 156.855 0 0.356 0.001 0.711 0.003 1.067l-0-0.055v174.507c0.209 47.567 37.988 86.242 85.182 87.889l0.151 0.004h336.213c0.635 0.016 1.384 0.026 2.134 0.026 48.637 0 88.091-39.314 88.319-87.897l0-0.022v-174.507c-0.104-69.039-39.991-128.737-97.959-157.407l-1.028-0.46z","M810.667 327.68c60.242-0.723 108.8-49.727 108.8-110.073 0-60.796-49.284-110.080-110.080-110.080-60.793 0-110.076 49.28-110.080 110.072l-0 0c-0.001 0.131-0.001 0.285-0.001 0.44 0 60.56 49.093 109.653 109.653 109.653 0.6 0 1.2-0.005 1.798-0.014l-0.090 0.001z","M213.333 327.68c0.381 0.005 0.83 0.007 1.28 0.007 60.796 0 110.080-49.284 110.080-110.080s-49.284-110.080-110.080-110.080c-60.793 0-110.076 49.28-110.080 110.072l-0 0c-0.001 0.128-0.001 0.279-0.001 0.43 0 60.26 48.609 109.167 108.755 109.65l0.046 0z","M908.8 312.747c-24.937 26.29-60.124 42.647-99.13 42.647-29.346 0-56.53-9.258-78.79-25.014l0.426 0.286c-2.33 34.274-12.010 65.827-27.465 93.738l0.585-1.151c52.954 32.164 89.227 87.242 95.089 151.12l0.057 0.773h115.2c30.398 0 55.040-24.642 55.040-55.040v0-109.227c-0.268-42.726-24.742-79.673-60.387-97.844l-0.626-0.29z","M317.013 423.253c-14.977-26.193-24.675-57.19-26.846-90.242l-0.034-0.638c-21.302 14.404-47.563 22.993-75.829 22.993-38.993 0-74.169-16.346-99.048-42.56l-0.057-0.060c-36.272 18.46-60.746 55.407-61.013 98.097l-0 0.036v109.227c0 30.398 24.642 55.040 55.040 55.040v0h112.64c5.991-64.629 42.241-119.68 94.274-151.399l0.873-0.494z"],"attrs":[{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["users"]},"attrs":[{},{},{},{},{},{}],"properties":{"order":88,"id":70,"name":"users","prevSize":64,"code":59713},"setIdx":0,"setId":1,"iconIdx":113},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM512 768c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256v0c0 141.385-114.615 256-256 256v0z","M533.333 346.88h-32c-11.782 0-21.333 9.551-21.333 21.333v0 149.333h-74.667c-11.782 0-21.333 9.551-21.333 21.333v0 32c0 11.782 9.551 21.333 21.333 21.333v0h128c11.782 0 21.333-9.551 21.333-21.333v0-202.667c0-11.782-9.551-21.333-21.333-21.333v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["clock"]},"attrs":[{},{}],"properties":{"order":87,"id":69,"name":"clock","prevSize":64,"code":59712},"setIdx":0,"setId":1,"iconIdx":114},{"icon":{"paths":["M687.787 314.453c0 97.084-78.702 175.787-175.787 175.787s-175.787-78.702-175.787-175.787c0-97.084 78.702-175.787 175.787-175.787s175.787 78.702 175.787 175.787z","M618.667 637.013h298.667c11.782 0 21.333 9.551 21.333 21.333v48.64c0 11.782-9.551 21.333-21.333 21.333h-298.667c-11.782 0-21.333-9.551-21.333-21.333v-48.64c0-11.782 9.551-21.333 21.333-21.333z","M554.667 706.987v-48.64c0-35.346 28.654-64 64-64v0h146.773c-9.988-56.423-45.602-102.865-94.142-127.537l-1.005-0.463c-39.875 41.867-96.044 67.904-158.293 67.904s-118.418-26.037-158.209-67.815l-0.085-0.089c-58.102 29.271-97.342 88.304-97.706 156.538l-0 0.049v174.507c0.241 48.445 39.448 87.652 87.87 87.893l0.023 0h336.213c48.445-0.241 87.652-39.448 87.893-87.87l0-0.023v-26.453h-149.333c-35.346 0-64-28.654-64-64v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["user-minus"]},"attrs":[{},{},{}],"properties":{"order":83,"id":67,"name":"user-minus","prevSize":64,"code":59710},"setIdx":0,"setId":1,"iconIdx":115},{"icon":{"paths":["M679.68 770.987h-61.013c-35.346 0-64-28.654-64-64v0-48.64c0-35.346 28.654-64 64-64v0h61.013v-61.013c-0-0.012-0-0.026-0-0.040 0-18.807 8.222-35.694 21.268-47.263l0.066-0.057c-8.938-6.944-18.992-13.455-29.59-19.079l-1.13-0.547c-39.875 41.867-96.044 67.904-158.293 67.904s-118.418-26.037-158.209-67.815l-0.085-0.089c-58.102 29.271-97.342 88.304-97.706 156.538l-0 0.049v174.507c0.241 48.445 39.448 87.652 87.87 87.893l0.023 0h336.213c8.441-0.195 16.486-1.585 24.071-4.007l-0.604 0.167c-14.613-11.668-23.893-29.482-23.893-49.464 0-0.010 0-0.021 0-0.031l-0 0.002z","M687.787 314.453c0 97.084-78.702 175.787-175.787 175.787s-175.787-78.702-175.787-175.787c0-97.084 78.702-175.787 175.787-175.787s175.787 78.702 175.787 175.787z","M917.333 637.013h-103.68v-103.68c0-11.782-9.551-21.333-21.333-21.333v0h-48.64c-11.782 0-21.333 9.551-21.333 21.333v0 103.68h-103.68c-11.782 0-21.333 9.551-21.333 21.333v0 48.64c0 11.782 9.551 21.333 21.333 21.333v0h103.68v103.68c0 11.782 9.551 21.333 21.333 21.333v0h48.64c11.782 0 21.333-9.551 21.333-21.333v0-103.68h103.68c11.782 0 21.333-9.551 21.333-21.333v0-48.64c0-11.782-9.551-21.333-21.333-21.333v0z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["user-plus"]},"attrs":[{},{},{}],"properties":{"order":86,"id":68,"name":"user-plus","prevSize":64,"code":59711},"setIdx":0,"setId":1,"iconIdx":116},{"icon":{"paths":["M810.667 277.333h-103.253v-85.333c0-37.231-30.182-67.413-67.413-67.413h-256c-37.231 0-67.413 30.182-67.413 67.413v0 85.333h-103.253c-11.782 0-21.333 9.551-21.333 21.333v0 42.667c0 11.782 9.551 21.333 21.333 21.333v0h42.667v426.667c0 47.128 38.205 85.333 85.333 85.333v0h341.333c47.128 0 85.333-38.205 85.333-85.333v0-426.667h42.667c11.782 0 21.333-9.551 21.333-21.333v0-42.667c0-11.782-9.551-21.333-21.333-21.333v0zM408.747 238.080c0.234-11.687 9.647-21.099 21.311-21.333l0.022-0h163.84c11.687 0.234 21.099 9.647 21.333 21.311l0 0.022v39.253h-206.507zM416 789.333c0 11.782-9.551 21.333-21.333 21.333v0h-21.333c-11.782 0-21.333-9.551-21.333-21.333v0-298.667c0-11.782 9.551-21.333 21.333-21.333v0h21.333c11.782 0 21.333 9.551 21.333 21.333v0zM544 789.333c0 11.782-9.551 21.333-21.333 21.333v0h-21.333c-11.782 0-21.333-9.551-21.333-21.333v0-298.667c0-11.782 9.551-21.333 21.333-21.333v0h21.333c11.782 0 21.333 9.551 21.333 21.333v0zM672 789.333c0 11.782-9.551 21.333-21.333 21.333v0h-21.333c-11.782 0-21.333-9.551-21.333-21.333v0-298.667c0-11.782 9.551-21.333 21.333-21.333v0h21.333c11.782 0 21.333 9.551 21.333 21.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["trash"]},"attrs":[{}],"properties":{"order":81,"id":65,"name":"trash","prevSize":64,"code":59709},"setIdx":0,"setId":1,"iconIdx":117},{"icon":{"paths":["M789.333 151.893h-554.667c-45.714 0-82.773 37.059-82.773 82.773v0 256c0.239 11.833 9.888 21.333 21.756 21.333 0.001 0 0.003-0 0.004-0l36.693 0c0.001 0 0.003 0 0.004 0 11.868 0 21.516-9.501 21.755-21.311l0-0.022v-256l2.56-2.56 557.227 2.56-2.56 557.227h-256c-10.872 0.114-19.825 8.183-21.32 18.657l-0.014 0.116v38.4c0 11.782 9.551 21.333 21.333 21.333v0h256c45.714 0 82.773-37.059 82.773-82.773v-552.96c0-45.714-37.059-82.773-82.773-82.773v0z","M444.587 389.973c-2.812-2.625-6.599-4.237-10.762-4.237-8.107 0-14.787 6.111-15.684 13.978l-0.007 0.073v189.013c-0.035 0.392-0.056 0.847-0.056 1.307 0 8.483 6.877 15.36 15.36 15.36 0.32 0 0.637-0.010 0.952-0.029l-0.043 0.002h189.013c8.137-0.432 14.571-7.134 14.571-15.34 0-4.369-1.824-8.311-4.751-11.108l-0.006-0.006-67.84-66.987 145.92-145.92c3.344-3.324 5.414-7.927 5.414-13.013s-2.070-9.689-5.413-13.012l-0.001-0.001-26.027-26.027c-3.255-3.32-7.787-5.379-12.8-5.379s-9.545 2.058-12.797 5.376l-0.003 0.003-147.627 145.067z","M194.56 616.107h170.667c23.564 0 42.667 19.103 42.667 42.667v170.667c0 23.564-19.103 42.667-42.667 42.667h-170.667c-23.564 0-42.667-19.103-42.667-42.667v-170.667c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["window-minimize"]},"attrs":[{},{},{}],"properties":{"order":80,"id":64,"name":"window-minimize","prevSize":64,"code":59706},"setIdx":0,"setId":1,"iconIdx":118},{"icon":{"paths":["M789.333 151.893h-554.667c-45.714 0-82.773 37.059-82.773 82.773v0 256c0.239 11.833 9.888 21.333 21.756 21.333 0.001 0 0.003-0 0.004-0l36.693 0c0.001 0 0.003 0 0.004 0 11.868 0 21.516-9.501 21.755-21.311l0-0.022v-256l2.56-2.56 557.227 2.56-2.56 557.227h-256c-10.872 0.114-19.825 8.183-21.32 18.657l-0.014 0.116v38.4c0 11.782 9.551 21.333 21.333 21.333v0h256c45.714 0 82.773-37.059 82.773-82.773v-552.96c0-45.714-37.059-82.773-82.773-82.773v0z","M690.347 523.093c2.8 2.577 6.554 4.157 10.676 4.157 8.53 0 15.48-6.766 15.777-15.223l0.001-0.027v-189.013c0.035-0.392 0.056-0.847 0.056-1.307 0-8.483-6.877-15.36-15.36-15.36-0.32 0-0.637 0.010-0.952 0.029l0.043-0.002h-188.587c-8.137 0.432-14.571 7.134-14.571 15.34 0 4.369 1.824 8.311 4.751 11.108l0.006 0.006 68.693 68.693-147.2 146.773c-3.344 3.324-5.414 7.927-5.414 13.013s2.070 9.689 5.413 13.012l0.001 0.001 26.027 26.027c3.255 3.32 7.787 5.379 12.8 5.379s9.545-2.058 12.797-5.376l0.003-0.003 146.347-146.347z","M194.56 616.107h170.667c23.564 0 42.667 19.103 42.667 42.667v170.667c0 23.564-19.103 42.667-42.667 42.667h-170.667c-23.564 0-42.667-19.103-42.667-42.667v-170.667c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["window-maximize"]},"attrs":[{},{},{}],"properties":{"order":79,"id":63,"name":"window-maximize","prevSize":64,"code":59707},"setIdx":0,"setId":1,"iconIdx":119},{"icon":{"paths":["M850.347 512h-36.693c-0.001-0-0.003-0-0.004-0-11.868 0-21.516 9.501-21.755 21.311l-0 0.022v256l-2.56 2.56-557.227-2.56 2.56-557.227h256c10.872-0.114 19.825-8.183 21.32-18.657l0.014-0.116v-38.4c0-11.782-9.551-21.333-21.333-21.333v0h-256c-0.005-0-0.011-0-0.018-0-45.114 0-81.799 36.092-82.754 80.977l-0.001 0.089v554.667c0 45.714 37.059 82.773 82.773 82.773v0h554.667c45.714 0 82.773-37.059 82.773-82.773v0-256c-0.239-11.833-9.888-21.333-21.756-21.333-0.001 0-0.003 0-0.004 0l0-0z","M701.013 262.4l-225.28 225.28c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 30.293 30.293c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 225.28-225.707 79.787 80.213c3.258 3.337 7.801 5.407 12.828 5.407 9.548 0 17.351-7.467 17.89-16.879l0.002-0.048v-219.733c0.030-0.39 0.047-0.844 0.047-1.303 0-9.897-8.023-17.92-17.92-17.92-0.317 0-0.632 0.008-0.945 0.024l0.044-0.002h-220.587c-9.46 0.541-16.927 8.345-16.927 17.892 0 5.027 2.070 9.57 5.403 12.824l0.004 0.003z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["external-link"]},"attrs":[{},{}],"properties":{"order":78,"id":62,"name":"external-link","prevSize":64,"code":59708},"setIdx":0,"setId":1,"iconIdx":120},{"icon":{"paths":["M153.173 452.267c4.206 1.523 9.059 2.404 14.119 2.404 18.301 0 33.912-11.523 39.971-27.709l0.097-0.294c42.688-116.148 152.349-197.506 281.013-197.506 96.227 0 181.826 45.508 236.448 116.176l0.513 0.69-76.8 80.64c-3.1 3.217-5.009 7.599-5.009 12.427 0 9.407 7.249 17.122 16.466 17.862l0.063 0.004h219.733c0.129 0.003 0.28 0.005 0.432 0.005 10.368 0 18.773-8.405 18.773-18.773 0-0.152-0.002-0.303-0.005-0.454l0 0.022v-222.293c-0.541-9.46-8.345-16.927-17.892-16.927-5.027 0-9.57 2.070-12.824 5.403l-0.003 0.004-81.067 81.493c-70.962-86.761-178.017-141.702-297.905-141.702-165.417 0-306.404 104.593-360.436 251.252l-0.859 2.663c-1.639 4.352-2.588 9.383-2.588 14.635 0 18.211 11.409 33.757 27.469 39.881l0.293 0.098z","M870.827 571.733c-4.206-1.523-9.059-2.404-14.119-2.404-18.301 0-33.912 11.523-39.971 27.709l-0.097 0.294c-42.688 116.148-152.349 197.506-281.013 197.506-96.227 0-181.826-45.508-236.448-116.176l-0.513-0.69 76.8-78.507c3.1-3.217 5.009-7.599 5.009-12.427 0-9.407-7.249-17.122-16.466-17.862l-0.063-0.004h-219.733c-0.129-0.003-0.28-0.005-0.432-0.005-10.368 0-18.773 8.405-18.773 18.773 0 0.152 0.002 0.303 0.005 0.454l-0-0.022v222.293c0.541 9.46 8.345 16.927 17.892 16.927 5.027 0 9.57-2.070 12.824-5.403l0.003-0.004 81.067-81.493c70.959 86.381 177.782 141.051 297.375 141.051 165.97 0 307.348-105.294 360.976-252.727l0.849-2.671c1.639-4.352 2.588-9.383 2.588-14.635 0-18.211-11.409-33.757-27.469-39.881l-0.293-0.098z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["refresh"]},"attrs":[{},{}],"properties":{"order":77,"id":61,"name":"refresh","prevSize":64,"code":59704},"setIdx":0,"setId":1,"iconIdx":121},{"icon":{"paths":["M687.787 314.453c0 97.084-78.702 175.787-175.787 175.787s-175.787-78.702-175.787-175.787c0-97.084 78.702-175.787 175.787-175.787s175.787 78.702 175.787 175.787z","M670.293 466.347c-39.875 41.867-96.044 67.904-158.293 67.904s-118.418-26.037-158.209-67.815l-0.085-0.089c-58.102 29.271-97.342 88.304-97.706 156.538l-0 0.049v174.507c0.241 48.445 39.448 87.652 87.87 87.893l0.023 0h336.213c48.445-0.241 87.652-39.448 87.893-87.87l0-0.023v-174.507c-0.364-68.283-39.604-127.315-96.7-156.126l-1.007-0.461z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["user"]},"attrs":[{},{}],"properties":{"order":76,"id":60,"name":"user","prevSize":64,"code":59705},"setIdx":0,"setId":1,"iconIdx":122},{"icon":{"paths":["M888.747 768l-330.667-566.613c-9.57-15.727-26.617-26.069-46.080-26.069s-36.51 10.343-45.946 25.832l-0.134 0.237-330.667 566.613c-4.885 7.901-7.779 17.48-7.779 27.736 0 29.455 23.878 53.333 53.333 53.333 0.185 0 0.37-0.001 0.554-0.003l-0.028 0h661.333c0.156 0.002 0.341 0.003 0.526 0.003 29.455 0 53.333-23.878 53.333-53.333 0-10.256-2.895-19.835-7.911-27.966l0.132 0.23zM473.173 369.92h77.653c12.018 0 21.76 9.742 21.76 21.76v-0l-8.533 175.787c0 0.001 0 0.003 0 0.004 0 11.782-9.551 21.333-21.333 21.333-0.15 0-0.3-0.002-0.449-0.005l0.022 0h-60.587c-0.127 0.003-0.277 0.004-0.427 0.004-11.782 0-21.333-9.551-21.333-21.333 0-0.002 0-0.003 0-0.005l-0 0-8.533-175.787c0-12.018 9.742-21.76 21.76-21.76l-0-0zM512 747.947c-35.341-0.007-63.987-28.658-63.987-64 0-35.346 28.654-64 64-64 34.896 0 63.269 27.929 63.986 62.653l0.001 0.067c0.008 0.381 0.013 0.83 0.013 1.28 0 35.346-28.654 64-64 64-0.005 0-0.009-0-0.014-0l0.001 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["exclamation-triangle"]},"attrs":[{}],"properties":{"order":75,"id":59,"name":"exclamation-triangle","prevSize":64,"code":59682},"setIdx":0,"setId":1,"iconIdx":123},{"icon":{"paths":["M810.667 215.893h-597.333c-23.564 0-42.667 19.103-42.667 42.667v0 597.333c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-597.333c0-23.564-19.103-42.667-42.667-42.667v0zM789.333 791.893c0 23.564-19.103 42.667-42.667 42.667v0h-469.333c-23.564 0-42.667-19.103-42.667-42.667v0-357.973c0-23.564 19.103-42.667 42.667-42.667v0h469.333c23.564 0 42.667 19.103 42.667 42.667v0z","M296.96 436.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M419.413 436.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M541.867 436.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M664.32 436.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M296.96 564.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M419.413 564.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M541.867 564.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M664.32 564.48h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M296.96 686.933h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M419.413 686.933h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M541.867 686.933h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M664.32 686.933h62.72c11.782 0 21.333 9.551 21.333 21.333v62.72c0 11.782-9.551 21.333-21.333 21.333h-62.72c-11.782 0-21.333-9.551-21.333-21.333v-62.72c0-11.782 9.551-21.333 21.333-21.333z","M320 126.293h18.347c23.564 0 42.667 19.103 42.667 42.667v96c0 23.564-19.103 42.667-42.667 42.667h-18.347c-23.564 0-42.667-19.103-42.667-42.667v-96c0-23.564 19.103-42.667 42.667-42.667z","M686.507 125.44h18.347c23.564 0 42.667 19.103 42.667 42.667v96c0 23.564-19.103 42.667-42.667 42.667h-18.347c-23.564 0-42.667-19.103-42.667-42.667v-96c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["calendar"]},"attrs":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],"properties":{"order":74,"id":57,"name":"calendar","prevSize":64,"code":59687},"setIdx":0,"setId":1,"iconIdx":124},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM636.16 682.667l-57.173 57.173c-3.619 3.57-8.592 5.774-14.080 5.774s-10.461-2.205-14.082-5.777l0.002 0.002-27.307-27.733-159.147-157.44c-11.286-10.748-18.304-25.888-18.304-42.667s7.019-31.919 18.28-42.644l0.024-0.023 184.32-184.32c3.551-3.545 8.453-5.737 13.867-5.737s10.316 2.192 13.867 5.737l-0-0 56.747 56.32c3.57 3.619 5.774 8.592 5.774 14.080s-2.205 10.461-5.777 14.082l0.002-0.002-141.227 141.227 118.187 117.76 27.307 27.733c2.811 3.372 4.517 7.75 4.517 12.527 0 5.444-2.216 10.37-5.796 13.926l-0.001 0.001z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-circle-left"]},"attrs":[{}],"properties":{"order":73,"id":58,"name":"chevron-circle-left","prevSize":64,"code":59688},"setIdx":0,"setId":1,"iconIdx":125},{"icon":{"paths":["M853.333 512c0-188.513-152.82-341.333-341.333-341.333s-341.333 152.82-341.333 341.333c0 188.513 152.82 341.333 341.333 341.333v0c188.513 0 341.333-152.82 341.333-341.333v0zM469.333 662.187l-184.32-184.32c-3.545-3.551-5.737-8.453-5.737-13.867s2.192-10.316 5.737-13.867l-0 0 56.32-55.040c3.619-3.57 8.592-5.774 14.080-5.774s10.461 2.205 14.082 5.777l-0.002-0.002 141.227 141.227 117.76-118.187 27.733-27.307c3.551-3.545 8.453-5.737 13.867-5.737s10.316 2.192 13.867 5.737l-0-0 57.173 57.173c3.57 3.619 5.774 8.592 5.774 14.080s-2.205 10.461-5.777 14.082l0.002-0.002-27.733 27.307-158.72 160.427c-10.677 10.788-25.486 17.468-41.855 17.468-17.197 0-32.673-7.373-43.438-19.13l-0.040-0.044z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-circle-down"]},"attrs":[{}],"properties":{"order":70,"id":56,"name":"chevron-circle-down","prevSize":64,"code":59689},"setIdx":0,"setId":1,"iconIdx":126},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM662.187 554.667l-184.32 184.32c-3.551 3.545-8.453 5.737-13.867 5.737s-10.316-2.192-13.867-5.737l0 0-55.040-54.187c-3.57-3.619-5.774-8.592-5.774-14.080s2.205-10.461 5.777-14.082l-0.002 0.002 141.227-141.227-117.333-117.76-27.307-27.733c-3.545-3.551-5.737-8.453-5.737-13.867s2.192-10.316 5.737-13.867l-0 0 57.173-57.173c3.619-3.57 8.592-5.774 14.080-5.774s10.461 2.205 14.082 5.777l-0.002-0.002 27.307 27.733 159.573 156.587c10.788 10.677 17.468 25.486 17.468 41.855 0 17.197-7.373 32.673-19.13 43.438l-0.044 0.040z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-circle-right"]},"attrs":[{}],"properties":{"order":69,"id":55,"name":"chevron-circle-right","prevSize":64,"code":59690},"setIdx":0,"setId":1,"iconIdx":127},{"icon":{"paths":["M170.667 512c0 188.513 152.82 341.333 341.333 341.333s341.333-152.82 341.333-341.333c0-188.513-152.82-341.333-341.333-341.333v0c-188.513 0-341.333 152.82-341.333 341.333v0zM554.667 361.813l184.32 184.32c3.545 3.551 5.737 8.453 5.737 13.867s-2.192 10.316-5.737 13.867l0-0-55.040 55.040c-3.619 3.57-8.592 5.774-14.080 5.774s-10.461-2.205-14.082-5.777l0.002 0.002-141.227-141.227-116.907 117.333-27.733 27.307c-3.551 3.545-8.453 5.737-13.867 5.737s-10.316-2.192-13.867-5.737l0 0-57.173-57.6c-3.57-3.619-5.774-8.592-5.774-14.080s2.205-10.461 5.777-14.082l-0.002 0.002 27.733-27.307 156.587-159.147c10.677-10.788 25.486-17.468 41.855-17.468 17.197 0 32.673 7.373 43.438 19.13l0.040 0.044z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-circle-up"]},"attrs":[{}],"properties":{"order":68,"id":54,"name":"chevron-circle-up","prevSize":64,"code":59691},"setIdx":0,"setId":1,"iconIdx":128},{"icon":{"paths":["M647.68 532.053v0l-141.653 141.653-128-128-32-33.707c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-51.2 51.2c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 196.267 196.267c11.625 11.463 27.599 18.543 45.227 18.543s33.602-7.079 45.234-18.55l-0.007 0.007 208.213-208.213c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-51.2-51.2c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001z","M677.973 220.16l-171.947 171.947-158.293-158.293c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-52.907 49.493c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 30.293 30.293 165.973 168.107c11.625 11.463 27.599 18.543 45.227 18.543s33.602-7.079 45.234-18.55l-0.007 0.007 208.213-208.213c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-51.2-51.2c-3.936-4.574-9.731-7.452-16.199-7.452-5.413 0-10.355 2.016-14.117 5.339l0.023-0.020z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-double-down"]},"attrs":[{},{}],"properties":{"order":67,"id":53,"name":"angle-double-down","prevSize":64,"code":59692},"setIdx":0,"setId":1,"iconIdx":129},{"icon":{"paths":["M491.947 647.68v0l-141.653-141.653 128-128 33.707-32c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-51.2-51.2c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-30.293 30.293-167.68 165.973c-11.463 11.625-18.543 27.599-18.543 45.227s7.079 33.602 18.55 45.234l-0.007-0.007 208.213 208.213c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 51.2-51.2c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001z","M803.84 677.973l-171.947-171.947 158.293-158.293c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-51.2-51.2c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-194.56 194.56c-11.463 11.625-18.543 27.599-18.543 45.227s7.079 33.602 18.55 45.234l-0.007-0.007 208.213 208.213c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 51.2-51.2c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-double-left"]},"attrs":[{},{}],"properties":{"order":66,"id":52,"name":"angle-double-left","prevSize":64,"code":59693},"setIdx":0,"setId":1,"iconIdx":130},{"icon":{"paths":["M532.053 376.32v0l141.653 141.653-158.293 158.293c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 51.2 51.2c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 196.267-196.267c11.463-11.625 18.543-27.599 18.543-45.227s-7.079-33.602-18.55-45.234l0.007 0.007-179.627-176.213-30.293-30.293c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-51.2 51.2c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001z","M220.16 346.027l171.947 171.947-158.293 158.293c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 51.2 51.2c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 30.293-30.293 166.4-164.267c11.463-11.625 18.543-27.599 18.543-45.227s-7.079-33.602-18.55-45.234l0.007 0.007-180.053-177.92-30.293-30.293c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-51.2 51.2c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-double-right"]},"attrs":[{},{}],"properties":{"order":65,"id":51,"name":"angle-double-right","prevSize":64,"code":59694},"setIdx":0,"setId":1,"iconIdx":131},{"icon":{"paths":["M376.32 491.947v0l141.653-141.653 158.293 158.293c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 51.2-51.2c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-194.56-194.56c-11.625-11.463-27.599-18.543-45.227-18.543s-33.602 7.079-45.234 18.55l0.007-0.007-208.213 208.213c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 51.2 51.2c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001z","M346.027 803.84l171.947-171.947 158.293 158.293c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 51.2-51.2c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-194.56-194.56c-11.625-11.463-27.599-18.543-45.227-18.543s-33.602 7.079-45.234 18.55l0.007-0.007-208.213 208.213c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 51.2 51.2c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-double-up"]},"attrs":[{},{}],"properties":{"order":64,"id":50,"name":"angle-double-up","prevSize":64,"code":59695},"setIdx":0,"setId":1,"iconIdx":132},{"icon":{"paths":["M551.253 650.667l208.213-208.213c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-51.2-51.2c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001-171.947 171.947-158.293-158.293c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-52.907 49.493c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 196.267 196.267c11.625 11.463 27.599 18.543 45.227 18.543s33.602-7.079 45.234-18.55l-0.007 0.007z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-down"]},"attrs":[{}],"properties":{"order":63,"id":49,"name":"angle-down","prevSize":64,"code":59696},"setIdx":0,"setId":1,"iconIdx":133},{"icon":{"paths":["M373.333 551.253l208.213 208.213c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 51.2-51.2c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001-171.947-171.947 158.293-158.293c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-51.2-51.2c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-194.56 194.56c-11.463 11.625-18.543 27.599-18.543 45.227s7.079 33.602 18.55 45.234l-0.007-0.007z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-left"]},"attrs":[{}],"properties":{"order":62,"id":48,"name":"angle-left","prevSize":64,"code":59697},"setIdx":0,"setId":1,"iconIdx":134},{"icon":{"paths":["M650.667 472.747l-208.213-208.213c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-51.2 51.2c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001 171.947 171.947-158.293 158.293c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 51.2 51.2c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 196.267-196.267c10.466-11.417 16.88-26.697 16.88-43.475 0-17.65-7.097-33.642-18.593-45.278l0.006 0.006z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-right"]},"attrs":[{}],"properties":{"order":61,"id":47,"name":"angle-right","prevSize":64,"code":59698},"setIdx":0,"setId":1,"iconIdx":135},{"icon":{"paths":["M472.747 373.333l-208.213 208.213c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 51.2 51.2c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001 171.947-171.947 158.293 158.293c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 51.2-51.2c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-194.56-194.56c-11.625-11.463-27.599-18.543-45.227-18.543s-33.602 7.079-45.234 18.55l0.007-0.007z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["angle-up"]},"attrs":[{}],"properties":{"order":60,"id":46,"name":"angle-up","prevSize":64,"code":59699},"setIdx":0,"setId":1,"iconIdx":136},{"icon":{"paths":["M282.453 450.987h144.213v210.347c0 11.782 9.551 21.333 21.333 21.333v0h128c11.782 0 21.333-9.551 21.333-21.333v0-210.347h144.213c0.012 0 0.027 0 0.041 0 14.374 0 26.027-11.653 26.027-26.027 0-6.347-2.272-12.164-6.048-16.681l0.033 0.041-229.973-225.707c-4.989-5.267-12.032-8.544-19.84-8.544s-14.851 3.277-19.828 8.532l-0.012 0.012-229.547 225.28c-3.963 4.543-6.38 10.524-6.38 17.070 0 14.374 11.653 26.027 26.027 26.027 0.143 0 0.285-0.001 0.428-0.003l-0.021 0z","M810.667 637.013h-170.667v20.907c0 0 0 0.001 0 0.001 0 35.196-28.411 63.757-63.55 63.998l-0.023 0h-128c-0.127 0.001-0.277 0.001-0.427 0.001-35.346 0-64-28.654-64-64 0-0 0-0.001 0-0.001l0-0v-20.907h-170.667c-23.564 0-42.667 19.103-42.667 42.667v0 128c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-128c0-23.564-19.103-42.667-42.667-42.667v0zM768 778.667c-17.673 0-32-14.327-32-32s14.327-32 32-32c17.673 0 32 14.327 32 32v0c-0.237 17.577-14.423 31.763-31.977 32l-0.023 0z"],"attrs":[{"opacity":0.99},{"opacity":0.99}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["upload"]},"attrs":[{"opacity":0.99},{"opacity":0.99}],"properties":{"order":59,"id":45,"name":"upload","prevSize":64,"code":59700},"setIdx":0,"setId":1,"iconIdx":137},{"icon":{"paths":["M492.373 673.707c4.871 5.504 11.952 8.956 19.84 8.956s14.969-3.452 19.816-8.928l0.024-0.028 229.547-225.28c3.742-4.476 6.014-10.293 6.014-16.64 0-14.374-11.653-26.027-26.027-26.027-0.014 0-0.029 0-0.043 0l0.002-0h-144.213v-210.773c0-11.782-9.551-21.333-21.333-21.333v0h-128c-11.782 0-21.333 9.551-21.333 21.333v0 210.347h-144.213c-0.012-0-0.027-0-0.041-0-14.374 0-26.027 11.653-26.027 26.027 0 6.347 2.272 12.164 6.048 16.681l-0.033-0.041z","M810.667 636.587h-186.027l-81.067 78.507c-8.741 6.405-19.708 10.248-31.573 10.248s-22.832-3.844-31.725-10.354l0.151 0.106-81.067-78.507h-186.027c-23.564 0-42.667 19.103-42.667 42.667v0 128c0 23.564 19.103 42.667 42.667 42.667v0h597.333c23.564 0 42.667-19.103 42.667-42.667v0-128c0-23.564-19.103-42.667-42.667-42.667v-0zM768 778.667c-17.673 0-32-14.327-32-32s14.327-32 32-32c17.673 0 32 14.327 32 32v0c-0.237 17.577-14.423 31.763-31.977 32l-0.023 0z"],"attrs":[{"opacity":0.96},{"opacity":0.96}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["download"]},"attrs":[{"opacity":0.96},{"opacity":0.96}],"properties":{"order":113,"id":91,"name":"download","prevSize":64,"code":59734},"setIdx":0,"setId":1,"iconIdx":138},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM512 256c0.198-0.001 0.432-0.001 0.667-0.001 55.317 0 106.488 17.752 148.126 47.87l-0.74-0.509-356.693 356.693c-29.609-40.899-47.361-92.070-47.361-147.387 0-0.234 0-0.469 0.001-0.703l-0 0.036c0-141.385 114.615-256 256-256v0zM512 768c-0.198 0.001-0.432 0.001-0.667 0.001-55.317 0-106.488-17.752-148.126-47.87l0.74 0.509 356.693-356.693c29.609 40.899 47.361 92.070 47.361 147.387 0 0.234-0 0.469-0.001 0.703l0-0.036c0 141.385-114.615 256-256 256v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["ban"]},"attrs":[{}],"properties":{"order":58,"id":44,"name":"ban","prevSize":64,"code":59701},"setIdx":0,"setId":1,"iconIdx":139},{"icon":{"paths":["M686.933 853.333c-10.188-0.085-19.733-2.763-28.029-7.405l0.296 0.152-147.2-81.493-147.2 81.493c-7.951 4.506-17.463 7.162-27.596 7.162-12.378 0-23.831-3.963-33.158-10.69l0.167 0.115c-14.811-10.203-24.395-27.069-24.395-46.173 0-3.588 0.338-7.096 0.984-10.496l-0.055 0.349 28.587-176.64-122.453-125.44c-9.918-10.331-16.025-24.385-16.025-39.866 0-6.338 1.024-12.438 2.915-18.141l-0.117 0.407c6.717-20.286 24.107-35.253 45.348-38.363l0.305-0.037 166.827-25.6 73.813-158.293c9.459-19.631 29.202-32.938 52.053-32.938s42.594 13.307 51.903 32.594l0.15 0.344 75.947 157.44 166.827 25.6c21.547 3.147 38.936 18.114 45.539 38.002l0.114 0.398c1.907 5.48 3.008 11.796 3.008 18.37 0 15.587-6.191 29.728-16.249 40.098l0.014-0.015-122.453 125.44 28.587 176.64c0.591 3.051 0.929 6.559 0.929 10.147 0 19.104-9.585 35.97-24.208 46.051l-0.188 0.122c-9.009 6.695-20.351 10.717-32.632 10.717-0.828 0-1.652-0.018-2.471-0.054l0.116 0.004zM512 685.653c0.225-0.003 0.49-0.005 0.756-0.005 9.936 0 19.243 2.696 27.229 7.396l-0.252-0.137 122.027 67.413-21.76-147.627c-0.463-2.743-0.727-5.902-0.727-9.124 0-15.728 6.303-29.983 16.522-40.378l-0.008 0.008 103.253-105.813-140.373-21.76c-18.991-3.343-34.561-15.534-42.516-32.079l-0.151-0.348-64-130.56-61.44 130.56c-7.867 17.080-23.555 29.38-42.345 32.384l-0.321 0.042-140.373 21.76 102.827 105.813c10.21 10.386 16.514 24.642 16.514 40.369 0 3.221-0.264 6.381-0.773 9.459l0.046-0.335-23.893 147.627 122.027-67.413c7.734-4.563 17.041-7.259 26.977-7.259 0.266 0 0.531 0.002 0.796 0.006l-0.040-0zM316.16 616.533v0zM708.267 616.533v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["star-o"]},"attrs":[{}],"properties":{"order":57,"id":43,"name":"star-o","prevSize":64,"code":59702},"setIdx":0,"setId":1,"iconIdx":140},{"icon":{"paths":["M531.627 185.6l85.333 186.88c3.070 6.345 9.015 10.879 16.097 11.932l0.117 0.014 197.973 30.293c10.389 1.552 18.266 10.412 18.266 21.112 0 5.926-2.416 11.288-6.317 15.153l-0.002 0.002-142.080 146.347c-3.817 4.16-6.157 9.729-6.157 15.845 0 1.032 0.067 2.049 0.196 3.046l-0.012-0.118 34.133 207.787c0.142 0.934 0.223 2.011 0.223 3.107 0 12.018-9.742 21.76-21.76 21.76-3.838 0-7.443-0.993-10.574-2.737l0.111 0.057-174.933-96.427c-2.915-1.81-6.452-2.883-10.24-2.883s-7.325 1.073-10.324 2.931l0.084-0.048-174.933 96.427c-3.020 1.687-6.625 2.681-10.463 2.681-12.018 0-21.76-9.742-21.76-21.76 0-1.096 0.081-2.174 0.238-3.226l-0.015 0.119 34.133-207.787c0.117-0.879 0.183-1.896 0.183-2.929 0-6.116-2.34-11.685-6.172-15.862l0.016 0.017-144.213-146.347c-3.903-3.867-6.319-9.229-6.319-15.155 0-10.7 7.877-19.56 18.148-21.097l0.117-0.014 197.973-30.72c7.198-1.068 13.143-5.601 16.158-11.82l0.056-0.127 85.333-186.88c2.987-8.689 11.089-14.821 20.624-14.821 9.692 0 17.905 6.337 20.72 15.094l0.043 0.154z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["star"]},"attrs":[{}],"properties":{"order":56,"id":42,"name":"star","prevSize":64,"code":59703},"setIdx":0,"setId":1,"iconIdx":141},{"icon":{"paths":["M293.547 551.253l358.827 358.827c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001 60.16-60.16c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001-313.6-313.6 271.36-271.787 30.293-29.867c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001-60.16-60.16c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001-30.293 29.867-316.587 317.013c-11.669 11.531-18.895 27.535-18.895 45.227s7.227 33.696 18.889 45.221l0.006 0.006z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-left"]},"attrs":[{}],"properties":{"order":16,"id":41,"name":"chevron-left","prevSize":64,"code":59648},"setIdx":0,"setId":1,"iconIdx":142},{"icon":{"paths":["M730.453 472.747l-358.827-358.827c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001-60.16 60.16c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001 313.6 313.6-271.36 271.787-30.293 29.867c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001 60.16 60.16c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001 30.293-29.867 316.587-317.013c11.669-11.531 18.895-27.535 18.895-45.227s-7.227-33.696-18.889-45.221l-0.006-0.006z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-right"]},"attrs":[{}],"properties":{"order":17,"id":17,"name":"chevron-right","prevSize":64,"code":59649},"setIdx":0,"setId":1,"iconIdx":143},{"icon":{"paths":["M551.253 730.453l358.827-358.827c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001-60.16-60.16c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001-313.6 313.6-271.787-271.36-29.867-30.293c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001-60.16 60.16c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001 29.867 30.293 317.013 316.587c11.531 11.669 27.535 18.895 45.227 18.895s33.696-7.227 45.221-18.889l0.006-0.006z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-down"]},"attrs":[{}],"properties":{"order":18,"id":19,"name":"chevron-down","prevSize":64,"code":59650},"setIdx":0,"setId":1,"iconIdx":144},{"icon":{"paths":["M472.747 293.547l-358.827 358.827c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001 60.16 60.16c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001 313.6-313.6 271.787 271.36 29.867 30.293c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001 60.16-60.16c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001-29.867-30.293-317.013-316.587c-11.531-11.669-27.535-18.895-45.227-18.895s-33.696 7.227-45.221 18.889l-0.006 0.006z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["chevron-up"]},"attrs":[{}],"properties":{"order":19,"id":16,"name":"chevron-up","prevSize":64,"code":59651},"setIdx":0,"setId":1,"iconIdx":145},{"icon":{"paths":["M352.427 536.32l277.333 278.613c5.573 4.83 12.896 7.774 20.907 7.774 17.673 0 32-14.327 32-32 0-0.033-0-0.066-0-0.099l0 0.005v-557.227c-0.262-17.708-14.678-31.962-32.423-31.962-7.99 0-15.305 2.89-20.957 7.681l0.047-0.039-276.907 279.040c-6.86 5.829-11.184 14.463-11.184 24.107s4.324 18.278 11.138 24.069l0.045 0.037z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["caret-left"]},"attrs":[{}],"properties":{"order":20,"id":14,"name":"caret-left","prevSize":64,"code":59652},"setIdx":0,"setId":1,"iconIdx":146},{"icon":{"paths":["M671.573 487.68l-277.333-278.613c-5.573-4.83-12.896-7.774-20.907-7.774-17.673 0-32 14.327-32 32 0 0.033 0 0.066 0 0.099l-0-0.005v557.227c0.262 17.708 14.678 31.962 32.423 31.962 7.99 0 15.305-2.89 20.957-7.681l-0.047 0.039 276.907-279.040c6.86-5.829 11.184-14.463 11.184-24.107s-4.324-18.278-11.138-24.069l-0.045-0.037z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["caret-right"]},"attrs":[{}],"properties":{"order":21,"id":13,"name":"caret-right","prevSize":64,"code":59653},"setIdx":0,"setId":1,"iconIdx":147},{"icon":{"paths":["M536.32 671.573l278.613-277.333c4.83-5.573 7.774-12.896 7.774-20.907 0-17.673-14.327-32-32-32-0.033 0-0.066 0-0.099 0l0.005-0h-557.227c-17.708 0.262-31.962 14.678-31.962 32.423 0 7.99 2.89 15.305 7.681 20.957l-0.039-0.047 279.040 276.907c5.829 6.86 14.463 11.184 24.107 11.184s18.278-4.324 24.069-11.138l0.037-0.045z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["caret-down"]},"attrs":[{}],"properties":{"order":22,"id":5,"name":"caret-down","prevSize":64,"code":59654},"setIdx":0,"setId":1,"iconIdx":148},{"icon":{"paths":["M487.68 352.427l-278.613 277.333c-4.83 5.573-7.774 12.896-7.774 20.907 0 17.673 14.327 32 32 32 0.033 0 0.066-0 0.099-0l-0.005 0h557.227c17.708-0.262 31.962-14.678 31.962-32.423 0-7.99-2.89-15.305-7.681-20.957l0.039 0.047-279.040-276.907c-5.829-6.86-14.463-11.184-24.107-11.184s-18.278 4.324-24.069 11.138l-0.037 0.045z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["caret-up"]},"attrs":[{}],"properties":{"order":23,"id":12,"name":"caret-up","prevSize":64,"code":59655},"setIdx":0,"setId":1,"iconIdx":149},{"icon":{"paths":["M469.333 125.44c-188.513-0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM469.333 680.107c-117.821 0-213.333-95.513-213.333-213.333s95.513-213.333 213.333-213.333c117.821 0 213.333 95.513 213.333 213.333v0c0 117.821-95.513 213.333-213.333 213.333v0z","M658.342 749.788l90.51-90.51 196.104 196.104c16.662 16.662 16.662 43.677 0 60.34v0l-30.17 30.17c-16.662 16.662-43.677 16.662-60.34 0v0l-196.104-196.104z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["search"]},"attrs":[{},{}],"properties":{"order":24,"id":26,"name":"search","prevSize":64,"code":59656},"setIdx":0,"setId":1,"iconIdx":150},{"icon":{"paths":["M474.453 781.653l392.107-392.533c3.771-3.845 6.098-9.117 6.098-14.933s-2.327-11.088-6.102-14.937l0.003 0.003-60.587-60.587c-3.845-3.771-9.117-6.098-14.933-6.098s-11.088 2.327-14.937 6.102l0.003-0.003-346.88 346.88-181.333-180.907c-3.845-3.771-9.117-6.098-14.933-6.098s-11.088 2.327-14.937 6.102l0.003-0.003-60.587 60.587c-3.771 3.845-6.098 9.117-6.098 14.933s2.327 11.088 6.102 14.937l-0.003-0.003 226.56 226.56c11.67 11.364 27.63 18.372 45.227 18.372s33.557-7.008 45.241-18.386l-0.014 0.014z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["check"]},"attrs":[{}],"properties":{"order":25,"id":10,"name":"check","prevSize":64,"code":59657},"setIdx":0,"setId":1,"iconIdx":151},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM750.507 406.187l-263.68 263.68c-7.753 7.924-18.556 12.837-30.507 12.837s-22.753-4.913-30.499-12.83l-0.008-0.008-131.84-131.84-20.48-20.053c-2.615-2.623-4.231-6.243-4.231-10.24s1.617-7.617 4.232-10.24l-0 0 42.667-40.533c2.555-2.59 6.103-4.195 10.027-4.195s7.472 1.605 10.025 4.193l0.002 0.002 20.48 20.48 101.12 101.547 213.333-213.333 20.48-20.053c2.555-2.59 6.103-4.195 10.027-4.195s7.472 1.605 10.025 4.193l0.002 0.002 42.667 42.667c1.075 1.942 1.707 4.257 1.707 6.72 0 4.553-2.161 8.602-5.514 11.175l-0.033 0.025z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["check-circle"]},"attrs":[{}],"properties":{"order":26,"id":11,"name":"check-circle","prevSize":64,"code":59658},"setIdx":0,"setId":1,"iconIdx":152},{"icon":{"paths":["M632.747 512l135.253-135.68c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003-59.733-59.733c-7.733-7.795-18.45-12.621-30.293-12.621s-22.56 4.826-30.291 12.618l-0.003 0.003-135.68 135.253-135.68-135.253c-7.733-7.795-18.45-12.621-30.293-12.621s-22.56 4.826-30.291 12.618l-0.003 0.003-59.733 59.733c-7.795 7.733-12.621 18.45-12.621 30.293s4.826 22.56 12.618 30.291l0.003 0.003 135.253 135.68-135.253 135.68c-7.795 7.733-12.621 18.45-12.621 30.293s4.826 22.56 12.618 30.291l0.003 0.003 59.733 59.733c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003 135.68-135.253 135.68 135.253c7.733 7.795 18.45 12.621 30.293 12.621s22.56-4.826 30.291-12.618l0.003-0.003 59.733-59.733c7.795-7.733 12.621-18.45 12.621-30.293s-4.826-22.56-12.618-30.291l-0.003-0.003z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["times"]},"attrs":[{}],"properties":{"order":27,"id":35,"name":"times","prevSize":64,"code":59659},"setIdx":0,"setId":1,"iconIdx":153},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM674.56 597.333c4.981 4.883 8.068 11.681 8.068 19.2s-3.087 14.317-8.064 19.196l-0.004 0.004-37.973 37.973c-4.883 4.981-11.681 8.068-19.2 8.068s-14.317-3.087-19.196-8.064l-0.004-0.004-85.333-85.333-85.333 85.333c-4.883 4.981-11.681 8.068-19.2 8.068s-14.317-3.087-19.196-8.064l-0.004-0.004-37.973-37.973c-4.981-4.883-8.068-11.681-8.068-19.2s3.087-14.317 8.064-19.196l0.004-0.004 85.333-85.333-85.333-85.333c-4.981-4.883-8.068-11.681-8.068-19.2s3.087-14.317 8.064-19.196l0.004-0.004 37.973-37.973c4.883-4.981 11.681-8.068 19.2-8.068s14.317 3.087 19.196 8.064l0.004 0.004 85.333 85.333 85.333-85.333c4.883-4.981 11.681-8.068 19.2-8.068s14.317 3.087 19.196 8.064l0.004 0.004 37.973 37.973c4.981 4.883 8.068 11.681 8.068 19.2s-3.087 14.317-8.064 19.196l-0.004 0.004-85.333 85.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["times-circle"]},"attrs":[{}],"properties":{"order":28,"id":36,"name":"times-circle","prevSize":64,"code":59660},"setIdx":0,"setId":1,"iconIdx":154},{"icon":{"paths":["M597.333 426.667v-192c0-23.564-19.103-42.667-42.667-42.667v0h-85.333c-23.564 0-42.667 19.103-42.667 42.667v0 192h-192c-23.564 0-42.667 19.103-42.667 42.667v0 85.333c0 23.564 19.103 42.667 42.667 42.667v0h192v192c0 23.564 19.103 42.667 42.667 42.667v0h85.333c23.564 0 42.667-19.103 42.667-42.667v0-192h192c23.564 0 42.667-19.103 42.667-42.667v0-85.333c0-23.564-19.103-42.667-42.667-42.667v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["plus"]},"attrs":[{}],"properties":{"order":35,"id":29,"name":"plus","prevSize":64,"code":59661},"setIdx":0,"setId":1,"iconIdx":155},{"icon":{"paths":["M270.507 270.507c-61.689 61.756-99.84 147.035-99.84 241.225 0 188.513 152.82 341.333 341.333 341.333s341.333-152.82 341.333-341.333c0-94.19-38.151-179.469-99.843-241.228l0.003 0.003c-61.782-61.849-147.17-100.109-241.493-100.109s-179.711 38.259-241.49 100.105l-0.003 0.003zM687.787 457.813c15.081 0 27.307 12.226 27.307 27.307v0 53.76c0 15.081-12.226 27.307-27.307 27.307v0h-121.6v121.6c0 15.081-12.226 27.307-27.307 27.307v0h-53.76c-15.081 0-27.307-12.226-27.307-27.307v0-121.6h-121.6c-15.081 0-27.307-12.226-27.307-27.307h-0v-53.76c0-15.081 12.226-27.307 27.307-27.307h121.6v-121.6c0-15.081 12.226-27.307 27.307-27.307v-0h53.76c15.081 0 27.307 12.226 27.307 27.307v-0 121.6z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["plus-circle"]},"attrs":[{}],"properties":{"order":36,"id":20,"name":"plus-circle","prevSize":64,"code":59662},"setIdx":0,"setId":1,"iconIdx":156},{"icon":{"paths":["M234.667 427.52h554.667c23.564 0 42.667 19.103 42.667 42.667v84.053c0 23.564-19.103 42.667-42.667 42.667h-554.667c-23.564 0-42.667-19.103-42.667-42.667v-84.053c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["minus"]},"attrs":[{}],"properties":{"order":41,"id":21,"name":"minus","prevSize":64,"code":59663},"setIdx":0,"setId":1,"iconIdx":157},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM715.093 539.307c0 14.845-12.035 26.88-26.88 26.88v0h-352.427c-14.845 0-26.88-12.035-26.88-26.88v-54.613c0-14.845 12.035-26.88 26.88-26.88v0h352.427c14.845-0 26.88 12.035 26.88 26.88v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["minus-circle"]},"attrs":[{}],"properties":{"order":42,"id":22,"name":"minus-circle","prevSize":64,"code":59664},"setIdx":0,"setId":1,"iconIdx":158},{"icon":{"paths":["M853.333 512c0 188.513-152.82 341.333-341.333 341.333s-341.333-152.82-341.333-341.333c0-188.513 152.82-341.333 341.333-341.333s341.333 152.82 341.333 341.333z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["radio-on"]},"attrs":[{}],"properties":{"order":47,"id":27,"name":"circle-on","prevSize":64,"code":59665},"setIdx":0,"setId":1,"iconIdx":159},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM512 768c-141.385 0-256-114.615-256-256s114.615-256 256-256c141.385 0 256 114.615 256 256v0c0 141.385-114.615 256-256 256v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["radio-off"]},"attrs":[{}],"properties":{"order":48,"id":28,"name":"circle-off","prevSize":64,"code":59666},"setIdx":0,"setId":1,"iconIdx":160},{"icon":{"paths":["M536.32 908.8l278.613-277.333c4.753-5.605 7.642-12.92 7.642-20.91 0-17.746-14.254-32.162-31.938-32.423l-0.025-0h-557.227c-0.14-0.002-0.306-0.003-0.472-0.003-17.673 0-32 14.327-32 32 0 8.212 3.093 15.701 8.178 21.367l-0.026-0.030 279.040 277.333c5.897 6.73 14.508 10.956 24.107 10.956s18.21-4.226 24.075-10.919l0.032-0.037z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-down"]},"attrs":[{}],"properties":{"order":51,"id":25,"name":"sort-down","prevSize":64,"code":59667},"setIdx":0,"setId":1,"iconIdx":161},{"icon":{"paths":["M487.68 115.2l-278.613 277.333c-4.753 5.605-7.642 12.92-7.642 20.91 0 17.746 14.254 32.162 31.938 32.423l0.025 0h557.227c0.14 0.002 0.306 0.003 0.472 0.003 17.673 0 32-14.327 32-32 0-8.212-3.093-15.701-8.178-21.367l0.026 0.030-279.040-277.333c-5.897-6.73-14.508-10.956-24.107-10.956s-18.21 4.226-24.075 10.919l-0.032 0.037z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort-up"]},"attrs":[{}],"properties":{"order":52,"id":34,"name":"sort-up","prevSize":64,"code":59668},"setIdx":0,"setId":1,"iconIdx":162},{"icon":{"paths":["M233.387 445.867h557.227c0.14 0.002 0.306 0.003 0.472 0.003 17.673 0 32-14.327 32-32 0-8.212-3.093-15.701-8.178-21.367l0.026 0.030-279.040-277.333c-5.897-6.73-14.508-10.956-24.107-10.956s-18.21 4.226-24.075 10.919l-0.032 0.037-278.613 277.333c-4.753 5.605-7.642 12.92-7.642 20.91 0 17.746 14.254 32.162 31.938 32.423l0.025 0z","M790.613 578.133h-557.227c-0.14-0.002-0.306-0.003-0.472-0.003-17.673 0-32 14.327-32 32 0 8.212 3.093 15.701 8.178 21.367l-0.026-0.030 279.040 277.333c5.897 6.73 14.508 10.956 24.107 10.956s18.21-4.226 24.075-10.919l0.032-0.037 278.613-277.333c4.753-5.605 7.642-12.92 7.642-20.91 0-17.746-14.254-32.162-31.938-32.423l-0.025-0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["sort"]},"attrs":[{},{}],"properties":{"order":54,"id":33,"name":"sort","prevSize":64,"code":59669},"setIdx":0,"setId":1,"iconIdx":163},{"icon":{"paths":["M672.427 814.933c5.573 4.83 12.896 7.774 20.907 7.774 17.673 0 32-14.327 32-32 0-0.033-0-0.066-0-0.099l0 0.005v-557.227c-0.262-17.708-14.678-31.962-32.423-31.962-7.99 0-15.305 2.89-20.957 7.681l0.047-0.039-276.907 279.040c-6.773 5.798-11.051 14.342-11.093 23.886l-0 0.007c0.031 9.685 4.304 18.367 11.056 24.288l0.037 0.032z","M320 822.613h42.667c11.782 0 21.333-9.551 21.333-21.333v0-578.56c0-11.782-9.551-21.333-21.333-21.333v0h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 578.56c0 11.782 9.551 21.333 21.333 21.333v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["step-backward"]},"attrs":[{},{}],"properties":{"order":29,"id":32,"name":"step-backward","prevSize":64,"code":59670},"setIdx":0,"setId":1,"iconIdx":164},{"icon":{"paths":["M351.573 209.067c-5.573-4.83-12.896-7.774-20.907-7.774-17.673 0-32 14.327-32 32 0 0.033 0 0.066 0 0.099l-0-0.005v557.227c0.262 17.708 14.678 31.962 32.423 31.962 7.99 0 15.305-2.89 20.957-7.681l-0.047 0.039 276.907-279.040c6.773-5.798 11.051-14.342 11.093-23.886l0-0.007c-0.031-9.685-4.304-18.367-11.056-24.288l-0.037-0.032z","M704 201.387h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 578.56c0 11.782 9.551 21.333 21.333 21.333v0h42.667c11.782 0 21.333-9.551 21.333-21.333v0-578.56c0-11.782-9.551-21.333-21.333-21.333v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["step-forward"]},"attrs":[{},{}],"properties":{"order":30,"id":31,"name":"step-forward","prevSize":64,"code":59671},"setIdx":0,"setId":1,"iconIdx":165},{"icon":{"paths":["M170.667 170.667h256c23.564 0 42.667 19.103 42.667 42.667v213.333c0 23.564-19.103 42.667-42.667 42.667h-256c-23.564 0-42.667-19.103-42.667-42.667v-213.333c0-23.564 19.103-42.667 42.667-42.667z","M170.667 550.4h256c23.564 0 42.667 19.103 42.667 42.667v213.333c0 23.564-19.103 42.667-42.667 42.667h-256c-23.564 0-42.667-19.103-42.667-42.667v-213.333c0-23.564 19.103-42.667 42.667-42.667z","M597.333 170.667h256c23.564 0 42.667 19.103 42.667 42.667v213.333c0 23.564-19.103 42.667-42.667 42.667h-256c-23.564 0-42.667-19.103-42.667-42.667v-213.333c0-23.564 19.103-42.667 42.667-42.667z","M597.333 554.667h256c23.564 0 42.667 19.103 42.667 42.667v213.333c0 23.564-19.103 42.667-42.667 42.667h-256c-23.564 0-42.667-19.103-42.667-42.667v-213.333c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["th-large"]},"attrs":[{},{},{},{}],"properties":{"order":34,"id":30,"name":"th-large","prevSize":64,"code":59672},"setIdx":0,"setId":1,"iconIdx":166},{"icon":{"paths":["M444.16 120.32v588.8l-239.787-239.787c-3.912-3.797-9.256-6.137-15.147-6.137s-11.234 2.341-15.152 6.142l0.005-0.005-60.16 60.16c-3.984 3.745-6.465 9.050-6.465 14.933s2.481 11.188 6.454 14.923l0.011 0.010 29.867 30.293 317.013 317.013c11.579 11.565 27.568 18.717 45.227 18.717s33.648-7.152 45.227-18.718l328.959-328.533 29.867-30.293c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001-60.16-60.16c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001-29.867 30.293-217.6 217.173v-584.533c0-11.782-9.551-21.333-21.333-21.333v0h-85.333c-11.782 0-21.333 9.551-21.333 21.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-down"]},"attrs":[{}],"properties":{"order":37,"id":0,"name":"arrow-down","prevSize":64,"code":59673},"setIdx":0,"setId":1,"iconIdx":167},{"icon":{"paths":["M903.68 444.16h-588.8l209.92-209.92 30.293-29.867c3.797-3.912 6.137-9.256 6.137-15.147s-2.341-11.234-6.142-15.152l0.005 0.005-60.587-60.16c-3.745-3.984-9.050-6.465-14.933-6.465s-11.188 2.481-14.923 6.454l-0.010 0.011-30.293 29.867-317.013 317.013c-11.565 11.579-18.717 27.568-18.717 45.227s7.152 33.648 18.718 45.227l328.533 328.959 30.293 29.867c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001 60.16-60.16c3.898-3.867 6.31-9.225 6.31-15.147s-2.413-11.28-6.309-15.145l-0.001-0.001-30.293-29.867-217.173-217.6h584.533c11.782 0 21.333-9.551 21.333-21.333v0-85.333c0-11.782-9.551-21.333-21.333-21.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-left"]},"attrs":[{}],"properties":{"order":40,"id":9,"name":"arrow-left","prevSize":64,"code":59674},"setIdx":0,"setId":1,"iconIdx":168},{"icon":{"paths":["M120.32 579.84h588.8l-209.92 209.92-30.293 29.867c-3.797 3.912-6.137 9.256-6.137 15.147s2.341 11.234 6.142 15.152l-0.005-0.005 60.587 60.16c3.745 3.984 9.050 6.465 14.933 6.465s11.188-2.481 14.923-6.454l0.010-0.011 30.293-29.867 317.013-317.013c11.565-11.579 18.717-27.568 18.717-45.227s-7.152-33.648-18.718-45.227l-328.533-328.959-30.293-29.867c-3.867-3.898-9.225-6.31-15.147-6.31s-11.28 2.413-15.145 6.309l-0.001 0.001-60.587 60.16c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001 30.293 29.867 217.173 217.6h-584.107c-11.782 0-21.333 9.551-21.333 21.333v0 85.333c0 11.782 9.551 21.333 21.333 21.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-right"]},"attrs":[{}],"properties":{"order":43,"id":8,"name":"arrow-right","prevSize":64,"code":59675},"setIdx":0,"setId":1,"iconIdx":169},{"icon":{"paths":["M579.84 903.68v-588.8l209.92 209.92 29.867 30.293c3.912 3.797 9.256 6.137 15.147 6.137s11.234-2.341 15.152-6.142l-0.005 0.005 60.16-60.587c3.984-3.745 6.465-9.050 6.465-14.933s-2.481-11.188-6.454-14.923l-0.011-0.010-29.867-30.293-317.013-317.013c-11.579-11.565-27.568-18.717-45.227-18.717s-33.648 7.152-45.227 18.718l-328.959 328.533-29.867 30.293c-3.898 3.867-6.31 9.225-6.31 15.147s2.413 11.28 6.309 15.145l0.001 0.001 60.16 60.16c3.867 3.898 9.225 6.31 15.147 6.31s11.28-2.413 15.145-6.309l0.001-0.001 29.867-30.293 217.6-217.173v584.533c0 11.782 9.551 21.333 21.333 21.333v0h85.333c11.782 0 21.333-9.551 21.333-21.333v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-up"]},"attrs":[{}],"properties":{"order":46,"id":7,"name":"arrow-up","prevSize":64,"code":59676},"setIdx":0,"setId":1,"iconIdx":170},{"icon":{"paths":["M213.333 448h597.333c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-597.333c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z","M213.333 213.333h597.333c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-597.333c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z","M213.333 682.667h597.333c23.564 0 42.667 19.103 42.667 42.667v42.667c0 23.564-19.103 42.667-42.667 42.667h-597.333c-23.564 0-42.667-19.103-42.667-42.667v-42.667c0-23.564 19.103-42.667 42.667-42.667z"],"attrs":[{},{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["bars"]},"attrs":[{},{},{}],"properties":{"order":49,"id":6,"name":"bars","prevSize":64,"code":59677},"setIdx":0,"setId":1,"iconIdx":171},{"icon":{"paths":["M170.667 512c0 188.513 152.82 341.333 341.333 341.333s341.333-152.82 341.333-341.333c0-188.513-152.82-341.333-341.333-341.333v0c-188.513 0-341.333 152.82-341.333 341.333v0zM538.027 298.667c8.012 0 14.507 6.495 14.507 14.507v0 264.107l123.307-123.733c2.555-2.59 6.103-4.195 10.027-4.195s7.472 1.605 10.025 4.193l0.002 0.002 42.667 40.533c2.615 2.623 4.231 6.243 4.231 10.24s-1.617 7.617-4.232 10.24l0-0-200.107 197.973c-7.753 7.924-18.556 12.837-30.507 12.837s-22.753-4.913-30.499-12.83l-0.008-0.008-190.72-190.72c-2.615-2.623-4.231-6.243-4.231-10.24s1.617-7.617 4.232-10.24l-0 0 42.667-40.533c2.555-2.59 6.103-4.195 10.027-4.195s7.472 1.605 10.025 4.193l0.002 0.002 20.48 20.48 97.707 98.133v-266.24c-0-0.017-0-0.037-0-0.057 0-7.561 5.785-13.771 13.17-14.446l0.057-0.004z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-circle-down"]},"attrs":[{}],"properties":{"order":50,"id":4,"name":"arrow-circle-down","prevSize":64,"code":59678},"setIdx":0,"setId":1,"iconIdx":172},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM725.333 538.027c-0 8.012-6.495 14.507-14.507 14.507h-264.107l123.733 123.307c2.59 2.555 4.195 6.103 4.195 10.027s-1.605 7.472-4.193 10.025l-0.002 0.002-40.533 42.667c-2.623 2.615-6.243 4.231-10.24 4.231s-7.617-1.617-10.24-4.232l0 0-197.973-200.107c-7.924-7.753-12.837-18.556-12.837-30.507s4.913-22.753 12.83-30.499l0.008-0.008 190.72-190.72c2.623-2.615 6.243-4.231 10.24-4.231s7.617 1.617 10.24 4.232l-0-0 40.533 42.667c2.59 2.555 4.195 6.103 4.195 10.027s-1.605 7.472-4.193 10.025l-0.002 0.002-20.48 20.48-98.133 97.707h267.093c8.012 0 14.507 6.495 14.507 14.507v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-circle-left"]},"attrs":[{}],"properties":{"order":53,"id":3,"name":"arrow-circle-left","prevSize":64,"code":59679},"setIdx":0,"setId":1,"iconIdx":173},{"icon":{"paths":["M512 853.333c188.513 0 341.333-152.82 341.333-341.333s-152.82-341.333-341.333-341.333c-188.513 0-341.333 152.82-341.333 341.333v0c0 188.513 152.82 341.333 341.333 341.333v0zM298.667 485.973c0-8.012 6.495-14.507 14.507-14.507v0h264.107l-123.733-123.307c-2.59-2.555-4.195-6.103-4.195-10.027s1.605-7.472 4.193-10.025l0.002-0.002 40.533-42.667c2.623-2.615 6.243-4.231 10.24-4.231s7.617 1.617 10.24 4.232l-0-0 197.973 197.973c7.924 7.753 12.837 18.556 12.837 30.507s-4.913 22.753-12.83 30.499l-0.008 0.008-190.72 190.72c-2.623 2.615-6.243 4.231-10.24 4.231s-7.617-1.617-10.24-4.232l0 0-40.533-42.667c-2.59-2.555-4.195-6.103-4.195-10.027s1.605-7.472 4.193-10.025l0.002-0.002 20.48-20.48 98.133-97.707h-266.24c-0.121 0.004-0.263 0.006-0.406 0.006-6.802 0-12.511-4.682-14.080-10.999l-0.021-0.1z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-circle-right"]},"attrs":[{}],"properties":{"order":55,"id":2,"name":"arrow-circle-right","prevSize":64,"code":59680},"setIdx":0,"setId":1,"iconIdx":174},{"icon":{"paths":["M853.333 512c0-188.513-152.82-341.333-341.333-341.333s-341.333 152.82-341.333 341.333c0 188.513 152.82 341.333 341.333 341.333v0c188.513 0 341.333-152.82 341.333-341.333v0zM485.973 725.333c-8.012-0-14.507-6.495-14.507-14.507v0-264.107l-123.307 123.733c-2.555 2.59-6.103 4.195-10.027 4.195s-7.472-1.605-10.025-4.193l-0.002-0.002-42.667-40.533c-2.615-2.623-4.231-6.243-4.231-10.24s1.617-7.617 4.232-10.24l-0 0 200.107-197.973c7.753-7.924 18.556-12.837 30.507-12.837s22.753 4.913 30.499 12.83l0.008 0.008 190.72 190.72c2.615 2.623 4.231 6.243 4.231 10.24s-1.617 7.617-4.232 10.24l0-0-42.667 40.533c-2.555 2.59-6.103 4.195-10.027 4.195s-7.472-1.605-10.025-4.193l-0.002-0.002-20.48-20.48-97.707-98.133v267.093c0 8.012-6.495 14.507-14.507 14.507v0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["arrow-circle-up"]},"attrs":[{}],"properties":{"order":31,"id":1,"name":"arrow-circle-up","prevSize":64,"code":59681},"setIdx":0,"setId":1,"iconIdx":175},{"icon":{"paths":["M448 320h128c11.782 0 21.333-9.551 21.333-21.333v0-85.333c0-11.782-9.551-21.333-21.333-21.333v0h-132.267c-9.426 0-17.067 7.641-17.067 17.067h0v89.6c0 11.782 9.551 21.333 21.333 21.333v0z","M640 725.333h-42.667v-298.667c0-11.782-9.551-21.333-21.333-21.333v0h-192c-11.782 0-21.333 9.551-21.333 21.333v0 64c0 11.782 9.551 21.333 21.333 21.333v0h42.667v213.333h-42.667c-11.782 0-21.333 9.551-21.333 21.333v0 64c0 11.782 9.551 21.333 21.333 21.333v0h256c11.782 0 21.333-9.551 21.333-21.333v0-64c0-11.782-9.551-21.333-21.333-21.333v0z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["info"]},"attrs":[{},{}],"properties":{"order":33,"id":23,"name":"info","prevSize":64,"code":59683},"setIdx":0,"setId":1,"iconIdx":176},{"icon":{"paths":["M512 170.667c-188.513 0-341.333 152.82-341.333 341.333s152.82 341.333 341.333 341.333c188.513 0 341.333-152.82 341.333-341.333v0c0-188.513-152.82-341.333-341.333-341.333v0zM455.253 309.76c0-6.127 4.967-11.093 11.093-11.093h88.32c7.776 0 14.080 6.304 14.080 14.080v0 57.173c0 7.776-6.304 14.080-14.080 14.080v-0h-85.333c-7.776 0-14.080-6.304-14.080-14.080v-0zM611.413 711.253c0 7.776-6.304 14.080-14.080 14.080v0h-170.667c-7.776 0-14.080-6.304-14.080-14.080v0-42.667c-0-0.002-0-0.004-0-0.006 0-7.862 6.254-14.263 14.058-14.5l0.022-0.001h28.587v-142.080h-28.587c-7.776 0-14.080-6.304-14.080-14.080v-42.667c-0-0.002-0-0.004-0-0.006 0-7.862 6.254-14.263 14.058-14.5l0.022-0.001h128c7.826 0.238 14.080 6.639 14.080 14.5 0 0.002-0 0.004-0 0.007l0-0v198.827h28.587c7.826 0.238 14.080 6.639 14.080 14.5 0 0.002-0 0.004-0 0.007l0-0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["info-circle"]},"attrs":[{}],"properties":{"order":38,"id":24,"name":"info-circle","prevSize":64,"code":59684},"setIdx":0,"setId":1,"iconIdx":177},{"icon":{"paths":["M923.307 453.12l-397.653-338.347c-3.699-3-8.464-4.816-13.653-4.816s-9.954 1.816-13.694 4.848l0.041-0.032-397.653 338.347c-9.836 7.884-16.080 19.898-16.080 33.371 0 10.771 3.991 20.61 10.575 28.118l-0.042-0.049c7.882 9.459 19.666 15.435 32.846 15.435 10.422 0 19.971-3.736 27.38-9.943l-0.067 0.054 341.333-294.827c3.64-3.153 8.422-5.074 13.653-5.074s10.013 1.921 13.68 5.096l-0.026-0.022 341.333 294.827c7.343 6.152 16.892 9.888 27.314 9.888 13.18 0 24.964-5.976 32.791-15.366l0.056-0.069c7.441-7.671 12.027-18.146 12.027-29.693 0-12.588-5.451-23.903-14.122-31.713l-0.038-0.034z","M526.080 286.72c-3.701-3.381-8.649-5.452-14.080-5.452s-10.379 2.071-14.096 5.467l0.016-0.015-305.493 267.947c-13.135 11.509-21.468 28.22-21.759 46.883l-0.001 0.051v248.32c0 35.346 28.654 64 64 64v0h181.333c11.782 0 21.333-9.551 21.333-21.333v0-148.907c0-23.564 19.103-42.667 42.667-42.667v0h64c23.564 0 42.667 19.103 42.667 42.667v0 148.907c0 11.782 9.551 21.333 21.333 21.333v0h181.333c35.346 0 64-28.654 64-64v0-247.893c-0.444-18.815-8.729-35.61-21.702-47.308l-0.058-0.052z"],"attrs":[{},{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["home"]},"attrs":[{},{}],"properties":{"order":39,"id":37,"name":"home","prevSize":64,"code":59685},"setIdx":0,"setId":1,"iconIdx":178},{"icon":{"paths":["M512 881.92c-204.301 0-369.92-165.619-369.92-369.92s165.619-369.92 369.92-369.92v0c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0c-0.102-0-0.222-0-0.342-0-157.409 0-285.013 127.605-285.013 285.013s127.605 285.013 285.013 285.013c157.409 0 285.013-127.605 285.013-285.013 0-54.736-15.43-105.869-42.177-149.285l0.706 1.232c-4.111-6.442-6.552-14.296-6.552-22.72 0-14.892 7.629-28.002 19.193-35.634l0.16-0.099c6.264-3.817 13.841-6.077 21.946-6.077 15.403 0 28.9 8.162 36.401 20.397l0.106 0.186c33.784 54.703 53.803 121.015 53.803 192.002 0 203.631-164.723 368.788-368.189 369.491l-0.067 0z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["spinner"]},"attrs":[{}],"properties":{"order":44,"id":39,"name":"spinner","prevSize":64,"code":59686},"setIdx":0,"setId":1,"iconIdx":179}],"height":1024,"metadata":{"name":"primeicons","url":"https://github.com/primefaces/primeicons","designer":"","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"pi-","metadata":{"fontFamily":"primeicons","majorVersion":1,"minorVersion":0,"copyright":"PrimeTek Informatics","designer":"","description":"Icon Library for Prime UI Libraries","fontURL":"https://github.com/primefaces/primeicons","license":"MIT","licenseURL":"https://opensource.org/licenses/MIT"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false,"autoHost":true,"showSelector":true,"showMetrics":true,"showMetadata":true,"showVersion":true,"includeMetadata":true},"imagePref":{"prefix":"pi-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16,"quickUsageToken":{"PrimeIcons":"NDFlNWM1Y2E0OTIzZmEyMmE0NzQyMjcyYTM1MmNmNGUjMSMxNTYyOTI4NzYwIyMj"}}}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/data/treenodes.json b/public/showcase/resources/demo/data/treenodes.json
deleted file mode 100644
index 1648fefd8e..0000000000
--- a/public/showcase/resources/demo/data/treenodes.json
+++ /dev/null
@@ -1,54 +0,0 @@
-{
-    "root": [
-        {
-            "key": "0",
-            "label": "Documents",
-            "data": "Documents Folder",
-            "icon": "pi pi-fw pi-inbox",
-            "children": [{
-                "key": "0-0",
-                "label": "Work",
-                "data": "Work Folder",
-                "icon": "pi pi-fw pi-cog",
-                "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
-            },
-            {
-                "key": "0-1",
-                "label": "Home",
-                "data": "Home Folder",
-                "icon": "pi pi-fw pi-home",
-                "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
-            }]
-        },
-        {
-            "key": "1",
-            "label": "Events",
-            "data": "Events Folder",
-            "icon": "pi pi-fw pi-calendar",
-            "children": [
-                { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
-                { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
-                { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
-        },
-        {
-            "key": "2",
-            "label": "Movies",
-            "data": "Movies Folder",
-            "icon": "pi pi-fw pi-star",
-            "children": [{
-                "key": "2-0",
-                "icon": "pi pi-fw pi-star",
-                "label": "Al Pacino",
-                "data": "Pacino Movies",
-                "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
-            },
-            {
-                "key": "2-1",
-                "label": "Robert De Niro",
-                "icon": "pi pi-fw pi-star",
-                "data": "De Niro Movies",
-                "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
-            }]
-        }
-    ]
-}
diff --git a/public/showcase/resources/demo/data/treetablenodes.json b/public/showcase/resources/demo/data/treetablenodes.json
deleted file mode 100644
index be13bfa5b9..0000000000
--- a/public/showcase/resources/demo/data/treetablenodes.json
+++ /dev/null
@@ -1,353 +0,0 @@
-{
-    "root":
-    [  
-        {
-            "key": "0",
-            "data":{  
-                "name":"Applications",
-                "size":"100kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "0-0",
-                    "data":{
-                        "name":"React",
-                        "size":"25kb",
-                        "type":"Folder"
-                    },
-                    "children":[  
-                        {  
-                            "key": "0-0-0",
-                            "data":{  
-                                "name":"react.app",
-                                "size":"10kb",
-                                "type":"Application"
-                            }
-                        },
-                        {  
-                            "key": "0-0-1",
-                            "data":{  
-                                "name":"native.app",
-                                "size":"10kb",
-                                "type":"Application"
-                            }
-                        },
-                        {  
-                            "key": "0-0-2",
-                            "data":{  
-                                "name":"mobile.app",
-                                "size":"5kb",
-                                "type":"Application"
-                            }
-                        }
-                    ]
-                },
-                {  
-                    "key": "0-1",
-                    "data":{  
-                        "name":"editor.app",
-                        "size":"25kb",
-                        "type":"Application"
-                    }
-                },
-                {  
-                    "key": "0-2",
-                    "data":{  
-                        "name":"settings.app",
-                        "size":"50kb",
-                        "type":"Application"
-                    }
-                }
-            ]
-        },
-        {  
-            "key": "1",
-            "data":{  
-                "name":"Cloud",
-                "size":"20kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "1-0",
-                    "data":{  
-                        "name":"backup-1.zip",
-                        "size":"10kb",
-                        "type":"Zip"
-                    }
-                },
-                {  
-                    "key": "1-1",
-                    "data":{  
-                        "name":"backup-2.zip",
-                        "size":"10kb",
-                        "type":"Zip"
-                    }
-                }
-            ]
-        },
-        {  
-            "key": "2",
-            "data": {  
-                "name":"Desktop",
-                "size":"150kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "2-0",
-                    "data":{  
-                        "name":"note-meeting.txt",
-                        "size":"50kb",
-                        "type":"Text"
-                    }
-                },
-                {  
-                    "key": "2-1",
-                    "data":{  
-                        "name":"note-todo.txt",
-                        "size":"100kb",
-                        "type":"Text"
-                    }
-                }
-            ]
-        },
-        {  
-            "key": "3",
-            "data":{  
-                "name":"Documents",
-                "size":"75kb",
-                "type":"Folder"
-            },
-            "children":[
-                {  
-                    "key": "3-0",
-                    "data":{  
-                        "name":"Work",
-                        "size":"55kb",
-                        "type":"Folder"
-                    },
-                    "children":[  
-                        {  
-                            "key": "3-0-0",
-                            "data":{  
-                                "name":"Expenses.doc",
-                                "size":"30kb",
-                                "type":"Document"
-                            }
-                        },
-                        {  
-                            "key": "3-0-1",
-                            "data":{  
-                                "name":"Resume.doc",
-                                "size":"25kb",
-                                "type":"Resume"
-                            }
-                        }
-                    ]
-                },
-                {  
-                    "key": "3-1",
-                    "data":{  
-                        "name":"Home",
-                        "size":"20kb",
-                        "type":"Folder"
-                    },
-                    "children":[  
-                        {  
-                            "key": "3-1-0",
-                            "data":{  
-                                "name":"Invoices",
-                                "size":"20kb",
-                                "type":"Text"
-                            }
-                        }
-                    ]
-                }
-            ]
-        },
-        {  
-            "key": "4",
-            "data": {  
-                "name":"Downloads",
-                "size":"25kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "4-0",
-                    "data": {  
-                        "name":"Spanish",
-                        "size":"10kb",
-                        "type":"Folder"
-                    },
-                    "children":[  
-                        {  
-                            "key": "4-0-0",
-                            "data":{  
-                                "name":"tutorial-a1.txt",
-                                "size":"5kb",
-                                "type":"Text"
-                            }
-                        },
-                        {  
-                            "key": "4-0-1",
-                            "data":{  
-                                "name":"tutorial-a2.txt",
-                                "size":"5kb",
-                                "type":"Text"
-                            }
-                        }
-                    ]
-                },
-                {  
-                    "key": "4-1",
-                    "data":{  
-                        "name":"Travel",
-                        "size":"15kb",
-                        "type":"Text"
-                    },
-                    "children":[  
-                        {  
-                            "key": "4-1-0",
-                            "data":{  
-                                "name":"Hotel.pdf",
-                                "size":"10kb",
-                                "type":"PDF"
-                            }
-                        },
-                        {  
-                            "key": "4-1-1",
-                            "data":{  
-                                "name":"Flight.pdf",
-                                "size":"5kb",
-                                "type":"PDF"
-                            }
-                        }
-                    ]
-                }
-            ]
-        },
-        {  
-            "key": "5",
-            "data": {  
-                "name":"Main",
-                "size":"50kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "5-0",
-                    "data":{  
-                        "name":"bin",
-                        "size":"50kb",
-                        "type":"Link"
-                    }
-                },
-                { 
-                    "key": "5-1", 
-                    "data":{  
-                        "name":"etc",
-                        "size":"100kb",
-                        "type":"Link"
-                    }
-                },
-                {  
-                    "key": "5-2",
-                    "data":{  
-                        "name":"var",
-                        "size":"100kb",
-                        "type":"Link"
-                    }
-                }
-            ]
-        },
-        {  
-            "key": "6",
-            "data":{  
-                "name":"Other",
-                "size":"5kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "6-0",
-                    "data":{  
-                        "name":"todo.txt",
-                        "size":"3kb",
-                        "type":"Text"
-                    }
-                },
-                {  
-                    "key": "6-1",
-                    "data":{  
-                        "name":"logo.png",
-                        "size":"2kb",
-                        "type":"Picture"
-                    }
-                }
-            ]
-        },
-        {  
-            "key": "7",
-            "data":{  
-                "name":"Pictures",
-                "size":"150kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "7-0",
-                    "data":{  
-                        "name":"barcelona.jpg",
-                        "size":"90kb",
-                        "type":"Picture"
-                    }
-                },
-                {  
-                    "key": "7-1",
-                    "data":{  
-                        "name":"primeng.png",
-                        "size":"30kb",
-                        "type":"Picture"
-                    }
-                },
-                {  
-                    "key": "7-2",
-                    "data":{  
-                        "name":"prime.jpg",
-                        "size":"30kb",
-                        "type":"Picture"
-                    }
-                }
-            ]
-        },
-        {  
-            "key": "8",
-            "data":{  
-                "name":"Videos",
-                "size":"1500kb",
-                "type":"Folder"
-            },
-            "children":[  
-                {  
-                    "key": "8-0",
-                    "data":{  
-                        "name":"primefaces.mkv",
-                        "size":"1000kb",
-                        "type":"Video"
-                    }
-                },
-                {  
-                    "key": "8-1",
-                    "data":{  
-                        "name":"intro.avi",
-                        "size":"500kb",
-                        "type":"Video"
-                    }
-                }
-            ]
-        }
-    ]
-}
\ No newline at end of file
diff --git a/public/showcase/resources/demo/images/car/Audi.png b/public/showcase/resources/demo/images/car/Audi.png
deleted file mode 100644
index a5a5d5d1f1..0000000000
Binary files a/public/showcase/resources/demo/images/car/Audi.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/BMW.png b/public/showcase/resources/demo/images/car/BMW.png
deleted file mode 100644
index 6779a37d1c..0000000000
Binary files a/public/showcase/resources/demo/images/car/BMW.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/Fiat.png b/public/showcase/resources/demo/images/car/Fiat.png
deleted file mode 100644
index 5e4c7073d0..0000000000
Binary files a/public/showcase/resources/demo/images/car/Fiat.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/Ford.png b/public/showcase/resources/demo/images/car/Ford.png
deleted file mode 100644
index 6e9b964cfc..0000000000
Binary files a/public/showcase/resources/demo/images/car/Ford.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/Honda.png b/public/showcase/resources/demo/images/car/Honda.png
deleted file mode 100644
index 7352d48a45..0000000000
Binary files a/public/showcase/resources/demo/images/car/Honda.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/Jaguar.png b/public/showcase/resources/demo/images/car/Jaguar.png
deleted file mode 100644
index 9c6097dc64..0000000000
Binary files a/public/showcase/resources/demo/images/car/Jaguar.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/Mercedes.png b/public/showcase/resources/demo/images/car/Mercedes.png
deleted file mode 100644
index d2e6df6fed..0000000000
Binary files a/public/showcase/resources/demo/images/car/Mercedes.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/Renault.png b/public/showcase/resources/demo/images/car/Renault.png
deleted file mode 100644
index 83b174e95f..0000000000
Binary files a/public/showcase/resources/demo/images/car/Renault.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/VW.png b/public/showcase/resources/demo/images/car/VW.png
deleted file mode 100644
index cd6ce01977..0000000000
Binary files a/public/showcase/resources/demo/images/car/VW.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/car/Volvo.png b/public/showcase/resources/demo/images/car/Volvo.png
deleted file mode 100644
index 48c4410a6f..0000000000
Binary files a/public/showcase/resources/demo/images/car/Volvo.png and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos1.jpg b/public/showcase/resources/demo/images/sopranos/sopranos1.jpg
deleted file mode 100755
index 576b8c1dd7..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos1.jpg and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos1_small.jpg b/public/showcase/resources/demo/images/sopranos/sopranos1_small.jpg
deleted file mode 100755
index 6a67a9c9bd..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos1_small.jpg and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos2.jpg b/public/showcase/resources/demo/images/sopranos/sopranos2.jpg
deleted file mode 100755
index 4ba6b79656..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos2.jpg and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos2_small.jpg b/public/showcase/resources/demo/images/sopranos/sopranos2_small.jpg
deleted file mode 100755
index 24a61c8215..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos2_small.jpg and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos3.jpg b/public/showcase/resources/demo/images/sopranos/sopranos3.jpg
deleted file mode 100755
index edc4f1d649..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos3.jpg and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos3_small.jpg b/public/showcase/resources/demo/images/sopranos/sopranos3_small.jpg
deleted file mode 100755
index 9fa256258c..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos3_small.jpg and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos4.jpg b/public/showcase/resources/demo/images/sopranos/sopranos4.jpg
deleted file mode 100755
index 811b2d1ac8..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos4.jpg and /dev/null differ
diff --git a/public/showcase/resources/demo/images/sopranos/sopranos4_small.jpg b/public/showcase/resources/demo/images/sopranos/sopranos4_small.jpg
deleted file mode 100755
index ed17146c2f..0000000000
Binary files a/public/showcase/resources/demo/images/sopranos/sopranos4_small.jpg and /dev/null differ
diff --git a/public/showcase/resources/images/home/airbus.svg b/public/showcase/resources/images/home/airbus.svg
deleted file mode 100644
index a491311e42..0000000000
--- a/public/showcase/resources/images/home/airbus.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="109" height="19" viewBox="0 0 109 19">
-    <defs>
-        <path id="a" d="M0 .332v9.474h17.832V.332H0z"/>
-        <path id="c" d="M0 .332v7.814h14.598V.332H0z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#FFF" d="M17.647 9.376C17.555 4.688 13.951.88 9.517.88 5.08.879 1.57 4.786 1.57 9.474H0C0 4.297 3.88.097 8.777 0c4.897 0 8.963 4.2 8.963 9.376h-.093z"/>
-        <path fill="#FFF" d="M17.892 9.04c0-3.81-2.864-6.837-6.467-6.837-3.604 0-6.19 3.028-6.19 6.837H3.478c0-4.298 3.326-7.717 7.391-7.814 3.973 0 7.207 3.906 7.3 7.716l-.278.098z"/>
-        <path fill="#FFF" d="M17.557 9.023c0-2.735-2.218-4.982-4.897-4.982-2.679 0-4.62 2.247-4.62 5.08H6.378c0-3.322 2.402-6.056 5.543-6.056 3.142 0 5.636 2.734 5.729 5.958h-.093z"/>
-        <g transform="translate(0 9.194)">
-            <mask id="b" fill="#fff">
-                <use xlink:href="#a"/>
-            </mask>
-            <path fill="#FFF" d="M.185.43c0 4.688 3.603 8.497 8.038 8.497 4.527 0 8.039-3.906 8.039-8.595h1.57c0 5.177-3.973 9.474-8.87 9.474C4.065 9.806.092 5.606 0 .43h.185z" mask="url(#b)"/>
-        </g>
-        <g transform="translate(0 9.194)">
-            <mask id="d" fill="#fff">
-                <use xlink:href="#c"/>
-            </mask>
-            <path fill="#FFF" d="M.185.332c0 3.81 2.864 6.837 6.467 6.837 3.604 0 6.283-3.028 6.19-6.837h1.756c0 4.298-3.326 7.814-7.299 7.814C3.234 8.146 0 4.24 0 .43L.186.332z" mask="url(#d)"/>
-        </g>
-        <path fill="#FFF" d="M0 9.292c.092 2.734 2.31 4.98 4.897 4.98 2.68 0 4.62-2.246 4.62-5.078h1.662c0 3.32-2.402 6.056-5.543 6.056S0 12.612 0 9.292M26.652 16.365l.831-1.953h4.62l.277 1.953H37l-2.587-15.14H29.7l-7.67 15.14h4.62zm5.174-5.079h-2.957l2.402-5.47.555 5.47zM38.846 16.365l2.495-15.14h4.712l-2.495 15.14zM50.91 16.365l.832-5.274h1.848c.554 0 1.016.098 1.293.195.277.196.462.391.555.684.092.293.092.683 0 1.172l-.093 1.172c-.185.977-.185 1.66-.185 2.051h4.805v-.488c-.092 0-.277 0-.277-.098-.092-.097-.092-.293 0-.684l.37-2.344c.092-1.074.092-1.855-.185-2.246-.277-.488-.832-.88-1.664-1.27.463-.097.832-.293 1.202-.488.462-.39.831-.782 1.108-1.27.37-.586.555-1.172.74-1.954.092-.585.092-1.074 0-1.464a3.351 3.351 0 0 0-.463-1.172 4.51 4.51 0 0 0-.923-.977c-.462-.196-.924-.391-1.57-.489a16.397 16.397 0 0 0-2.496-.195h-6.93l-2.494 15.14h4.528zm1.848-11.427h2.31c.74 0 1.202.097 1.479.39.184.195.277.587.184.977-.092.488-.277.879-.646 1.074-.278.293-.832.39-1.571.39h-2.218l.462-2.831zM70.1 10.016c.925 0 1.48.196 1.757.391.277.292.369.586.277 1.074-.093.39-.277.781-.647 1.074-.37.196-.924.391-1.848.391h-1.94l.462-2.93h1.94zm-.276 6.349c1.108 0 1.848-.098 2.31-.195a8.75 8.75 0 0 0 1.478-.489c.554-.293.924-.488 1.201-.781.462-.293.74-.782 1.016-1.27a4.53 4.53 0 0 0 .647-1.758c.092-.879 0-1.66-.277-2.247-.37-.683-.831-1.074-1.57-1.27 1.385-.878 2.217-1.953 2.402-3.223.277-1.367-.093-2.343-1.109-3.027-.74-.586-1.94-.88-3.788-.88h-7.022l-2.495 15.14h7.207zm.739-11.721c.646 0 1.109.098 1.294.098a.962.962 0 0 1 .554.488c.185.195.185.488.185.781-.093.391-.277.684-.647.977-.277.196-.832.39-1.57.39h-1.757l.463-2.734h1.478zM80.55 1.226h4.62l-1.57 9.376c-.093.586-.093 1.074 0 1.367.092.293.277.587.646.782.37.195.74.293 1.201.293.647 0 1.294-.196 1.663-.586.462-.39.74-1.075.924-1.856l1.57-9.376h4.62l-1.478 8.888c-.184 1.074-.37 1.953-.646 2.637a6.443 6.443 0 0 1-1.109 1.66c-.462.489-1.016.977-1.57 1.27a7.616 7.616 0 0 1-2.033.879c-.832.098-1.664.196-2.495.196-1.016 0-1.848-.098-2.587-.196-.74-.195-1.294-.488-1.756-.879-.554-.39-.923-.781-1.201-1.27-.277-.488-.462-1.172-.462-1.953-.092-.489 0-1.368.185-2.442l1.478-8.79zM108.76 6.012h-4.528c0-.391-.185-.781-.37-.977-.277-.195-.647-.293-1.2-.293-.555 0-1.017.098-1.294.293-.277.196-.37.391-.462.684 0 .293 0 .39.185.586.184.195.647.39 1.478.586l1.756.488c1.57.489 2.679 1.075 3.233 1.856.555.782.74 1.66.555 2.735-.185.879-.462 1.563-.924 2.246-.462.684-1.017 1.27-1.57 1.66-.555.392-1.294.685-2.126.978-.832.195-1.755.293-2.68.293-.923 0-1.847-.098-2.679-.391-.831-.293-1.478-.684-1.94-1.172-.462-.489-.832-1.075-1.017-1.758-.092-.489-.092-1.075-.092-1.759h4.528c0 .489.184.88.461 1.075.278.293.832.39 1.57.39.648 0 1.11-.097 1.387-.293.277-.195.37-.39.462-.683 0-.293 0-.586-.185-.782-.185-.195-.647-.39-1.478-.585l-1.57-.39c-.74-.196-1.572-.49-2.219-.88-.646-.39-1.2-.88-1.477-1.563-.278-.586-.278-1.27-.185-2.149.185-.878.462-1.562.924-2.246a5.163 5.163 0 0 1 1.663-1.563c.554-.488 1.293-.684 2.032-.879a8.64 8.64 0 0 1 2.217-.293c.925 0 1.664.098 2.403.293.74.195 1.2.488 1.663.781.37.294.647.684.832 1.075.276.39.37.781.461 1.172.093.39.185.879.185 1.465"/>
-    </g>
-</svg>
diff --git a/public/showcase/resources/images/home/bank-of-america.svg b/public/showcase/resources/images/home/bank-of-america.svg
deleted file mode 100644
index 18bb9ea07a..0000000000
--- a/public/showcase/resources/images/home/bank-of-america.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="41" viewBox="0 0 104 41" width="104" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="a" fill="#fff"><path d="m.45691139 16.5454545h30.97944301v-16.36779055h-30.97944301z" fill="none"/></mask><mask id="b" fill="#fff"><path d="m0 42h104v-42h-104z" fill="none"/></mask><g fill="#fff" fill-rule="evenodd" transform=""><path d="m44.4602074 22.9090909c1.429342.5165172 2.8592805 1.0696119 4.2486534 1.6969697-4.4473057 1.6598381-8.7753006 3.652198-12.8652707 5.9393939-1.3899695-.6644894-2.8193114-1.3284246-4.2486534-1.9186509 4.1293427-2.2129327 8.4179651-4.1315836 12.8652707-5.7177127z"/><path d="m39.7874082 21.6363636c-4.6605206 1.5440739-9.1598965 3.5470442-13.4582943 5.9669083 1.3658066.5429021 2.7316131 1.0851773 4.0575861 1.6694554 4.1378567-2.5452456 8.516525-4.6735975 13.056338-6.342426-1.2052654-.4595234-2.4105309-.9184199-3.6556298-1.2939377"/><path d="m73.8912607 30.1515694c.0848709.181688.2973671.2422507.5098634.2422507.1269872 0 .2546126 0 .3394835-.0605627.0427545-.0300536.0848708-.0906163.0848708-.1516344 0-.1211254-.1269872-.1816881-.2973671-.1816881l-.296729-.0605626c-.085509-.0305091-.2124962-.0305091-.2973671-.0910718-.085509-.0605627-.1276253-.1516344-.1276253-.2422507 0-.2427062.2973671-.3333225.5947342-.3333225.2546126 0 .5098633.0906163.5947342.3028134l-.2124962.0305091c0-.1215808-.2124963-.2121971-.4249925-.2121971-.1269873 0-.3394835.0605627-.3394835.181688 0 .1516345.1269872.1816881.2973671.2121971l.2546126.0305091c.1276254.0300536.2546126.0605627.3401216.0906163.0848709.0910717.1269873.1516344.1269873.2727598 0 .0910717-.0421164.2121971-.1697418.2727598-.1276253.0610181-.2973671.0910717-.4671088.0910717-.3401216 0-.5526179-.1215807-.6796051-.3638315z"/><path d="m75.1728658 30.5454545h-.1348911v-1.2727272h.2363129l.4386495 1.0178949.371204-1.0178949h.2702893v1.2727272h-.1688674v-1.1139949l-.4391566 1.1139949h-.1348911l-.4386495-1.1139949z"/><path d="m55.2911392 22.9882078c-3.7653717-1.5448894-7.6530996-2.843989-11.623218-3.8972987-1.4319972.351279-2.8240288.7373695-4.1742503 1.12346 4.0924746 1.0533098 8.1031734 2.3877482 11.9503209 3.9674491 1.2684458-.4214294 2.5375064-.8075199 3.8471474-1.1936104"/><path d="m61.8734177 21.8125512c-3.8364306-1.6053953-7.8370761-2.9366557-11.9207586-3.9943694-1.3199155.235309-2.5983126.5094439-3.8767097.8224048 4.0421639 1.1353657 8.0019106 2.5454545 11.7962031 4.2685043 1.3199156-.3917894 2.6813497-.7835788 4.0012652-1.0965397"/><path d="m26.9067342.17766395c-9.504 3.0004326-18.40162028 7.29141066-26.44982281 12.64586205 2.02207595 1.17758 3.96334177 2.3928151 5.86389874 3.7221568 7.60344307-5.6585455 16.05630377-10.36772418 25.11554427-13.93754863-1.4965063-.87348589-2.9930126-1.67109091-4.5296202-2.43047022" mask="url(#a)" transform="translate(43.443038 24.181818)"/><path d="m63.5492619 21.6363636c-9.576421 2.5790549-18.5643765 6.7697165-26.6885024 12.3310306 1.8049027.9268857 3.6109847 1.894334 5.3769708 2.9416967 7.9672804-5.641834 16.7983904-10.0746603 26.2179659-12.9757943-1.6091406-.8058033-3.2182813-1.6116066-4.9064343-2.296933"/><path d="m37.5189873 9.9791499c.5916718 0 .8505629-.51655472.8505629-2.36107629 0-1.69709286-.1850016-2.32449623-.8505629-2.32449623-.6655612 0-.8505628.62740337-.8505628 2.32449623 0 1.84452157.2588911 2.36107629.8505628 2.36107629m0-6.16096808c2.1816854 0 3.2911393 1.62337851 3.2911393 3.79989179 0 2.25022763-1.0722314 3.83647189-3.2911393 3.83647189-2.2555748 0-3.2911392-1.58624426-3.2911392-3.83647189 0-2.17651328 1.1094539-3.79989179 3.2911392-3.79989179"/><path d="m41.9144565 5.32684199h-1.1043299v-1.76237662h1.1043299v-.88088746c0-1.96274241 1.0194796-2.68357791 2.802612-2.68357791.5097398 0 .9346293.08002598 1.3588809.12033982v1.96274241c-.1275945-.04031384-.3400392-.08062768-.5091019-.08062768-.7221845 0-.9767355.28039177-.9767355.76054764v.80146318h1.4858374v1.76237662h-1.4858374v6.12770351h-2.6756555z"/><path d="m13.1036217 7.78450196c-.8464889.07406917-1.5010144.40765885-1.5010144 1.33435876 0 .51904105.2694425.77856158.7314265.77856158.2694425 0 .5770463-.18545137.7695879-.44497189zm0-1.74201761c0-.44497189-.1925416-.74124854-.615786-.74124854-.6157859 0-.8083275.51848414-.8083275.96345603l-2.15496169-.44497189c.26886429-1.40842792 1.65481629-2.00153813 3.04019019-2.00153813 1.4622748 0 3.0020287.59311021 3.0020287 2.22430253v4.07770235c0 .8153177.1156406 1.0748382.230703 1.1862204h-2.5400448c-.0381614-.2227644-.076901-.5563541-.076901-.6671793-.4232444.4076588-1.1546709.8153177-1.8473578.8153177-1.2315719 0-2.15553995-.8153177-2.11680037-2.15023342.03873959-1.89015593 2.27060227-2.48382306 3.88725727-2.66871751z"/><path d="m19.6983025 6.12414213v5.33040337h-2.5843784v-7.44779747h2.5036924l.0406463.75653673c.564802-.52934852 1.251543-.94510294 2.2610279-.94510294 1.1308172 0 1.7769118.71791473 1.7769118 1.73912573v5.89723795h-2.5843784v-5.14126919c0-.41575442-.1619787-.64294263-.606055-.64294263-.2827043 0-.5654086.15164813-.8074666.45380845"/><path d="m25.0126582 0h2.4073237v5.80932358h.0372966l1.7681962-2.41420049h2.369462l-1.9931058 2.45476496 1.9931058 5.60465745h-2.4819168l-1.1663653-3.51804577h-.0378617l-.488811.61399855v2.90404722h-2.4073237z"/><path d="m2.69890313 4.54076202h.95230851c.99226134 0 1.3894044-.57281946 1.3894044-1.22738248 0-1.10445984-.71438046-1.26794695-1.34945157-1.26794695h-.99226134zm0 4.78660729h1.03221417c.63507111 0 1.42876091-.28640973 1.42876091-1.43204866 0-.85861459-.51640523-1.43143405-1.42876091-1.43143405h-1.03221417zm3.13599902-3.84563454c1.19023656.40933236 2.06383203 1.43204866 2.06383203 2.90527641 0 1.96307442-1.50866658 3.06753432-3.65180795 3.06753432h-4.24692623v-11.4545455h4.36618841c1.98452267 0 3.25466489 1.22738248 3.25466489 2.78173916 0 1.51379221-.99226134 2.29127786-1.78595115 2.61825206z"/><path d="m97.3951497 7.78450196c-.8464245.07406917-1.5009002.40765885-1.5009002 1.33435876 0 .51904105.269422.77856158.6926342.77856158.3081587 0 .5775806-.18545137.808266-.44497189zm0-1.74201761c0-.44497189-.2306854-.74124854-.6544757-.74124854-.5770025 0-.7695294.51848414-.8076878.96345603l-2.1166393-.44497189c.269422-1.40842792 1.6546904-2.00153813 3.0399588-2.00153813 1.4627417 0 3.0018003.59311021 3.0018003 2.22430253v4.07770235c0 .8153177.1156318 1.0748382.192527 1.1862204h-2.5016931c-.0381585-.2227644-.0768951-.5563541-.0768951-.6671793-.4232122.4076588-1.1545831.8153177-1.8853757.8153177-1.1933197 0-2.1553759-.8153177-2.1172175-2.15023342.0774733-1.89015593 2.3091662-2.48382306 3.9256981-2.66871751z"/><path d="m74.0834229 6.76931299c0-.66393524-.0769147-1.47584269-.924133-1.47584269-.6928105 0-.9623011.81190745-.9235546 1.47584269zm-1.8476876 1.40213368c-.0387465.62680363.1538294 1.7335471 1.154877 1.7335471.5771494 0 1.0779623-.44280823 1.1930452-.99590286l1.65569.55309463c-.1156612.33196762-.8472182 1.99235996-3.0413111 1.99235996-2.3485005 0-3.4258845-1.80781035-3.4258845-3.83674767 0-2.06551471 1.154877-3.79961601 3.387138-3.79961601 2.3485005 0 3.1951405 1.95522831 3.1951405 3.87332502v.47993983z"/><path d="m82.9367089 11.4545455h2.6329114v-7.63636368h-2.6329114z" mask="url(#b)"/><path d="m82.9367089 2.54545455h2.6329114v-2.54545455h-2.6329114z" mask="url(#b)"/><path d="m91.3135014 6.73239288c0-.29485742 0-.66398343-.1177194-.92226079-.1171307-.29541165-.3131335-.51655471-.705139-.51655471-.8228584 0-.9399891.95939508-.9399891 2.43479064 0 1.62337851.2742861 2.17706752.9399891 2.17706752.8622944 0 .9405778-.84854643.9405778-1.40223544l1.9588503.25827735c-.1960028 1.77080725-1.2931473 2.69306805-3.0954308 2.69306805-2.2331365 0-3.4085644-1.84452161-3.4085644-3.65246313 0-1.99195028 1.1754279-3.98390055 3.5262837-3.98390055 2.6251419 0 3.0559948 2.17651328 3.0559948 2.91421106z" mask="url(#b)"/><path d="m52.2175041 7.11806768h1.9445188l-.8452497-4.66343443h-.0850965zm-.718875-7.11806768h3.9315858l2.4938357 11.4545455h-2.8742298l-.4648556-2.33171726h-2.7478552l-.549317 2.33171726h-2.5789322z" mask="url(#b)"/><path d="m77.6708861 4.00730194h2.6117114v.98308385h.0424c.5474025-.79396374 1.5580405-1.17220397 2.6117114-1.17220397v2.41937447c-.3373013-.11301773-.6322025-.18855219-1.095438-.18855219-.7163696 0-1.1796051.22660338-1.4745063.56679242v4.83874898h-2.6958785z" mask="url(#b)"/><path d="m64.4607878 6.12414213v5.33040337h-2.5424349v-5.10378313c0-.41575443-.1206354-.68042869-.6049953-.68042869-.2418768 0-.6456111.18913419-.8474783.45380845v5.33040337h-2.5418287v-7.44779747h2.501819l.0400097.75653673c.5649856-.4912945 1.3718479-.94510294 2.2999519-.94510294.8074686 0 1.3318382.41575442 1.573715.982589h.0406159c.443744-.45324048 1.2105967-.982589 2.259336-.982589 1.0899613 0 1.8161981.64294263 1.8161981 1.7010717v5.93529198h-2.5424349v-5.10378313c0-.41575443-.1212415-.68042869-.6049952-.68042869-.3231087 0-.6862271.26467426-.8474783.45380845" mask="url(#b)"/><path d="m101.606575 10.1818182c0 .5658926.478973.9894268 1.101062.9894268.574623 0 1.052877-.4235342 1.052877-.9894268 0-.56589267-.478254-1.03758792-1.052877-1.03758792-.622089 0-1.101062.47169525-1.101062 1.03758792m-.239486 0c0-.70754289.574623-1.27272729 1.340548-1.27272729.71774 0 1.292363.5651844 1.292363 1.27272729 0 .7068346-.574623 1.2727273-1.292363 1.2727273-.765925 0-1.340548-.5658927-1.340548-1.2727273" mask="url(#b)"/><path d="m103.210127 10.6910366c.210316 0 .526582.042063.526582-.1695271 0-.1701643-.158133-.2122274-.36845-.2122274h-.421424v.3817545zm.736899.7635089h-.263292l-.473607-.5939819h-.263292v.5939819h-.263291v-1.2727273h.736899c.105159 0 .263291 0 .36845.0427004.158133.0847635.211107.169527.211107.2969909 0 .2542906-.263291.3390541-.526582.3390541z" mask="url(#b)"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/bmw.svg b/public/showcase/resources/images/home/bmw.svg
deleted file mode 100644
index 8586e92def..0000000000
--- a/public/showcase/resources/images/home/bmw.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="37" viewBox="0 0 38 37" width="38" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><mask id="a" fill="#fff"><path d="m37.7204286 18.4802517v-18.20901032h-37.7204286v18.20901032 18.2090104h37.7204286z" fill="none"/></mask><g fill="none" fill-rule="evenodd" transform=""><path d="m18.8629286 36.1874c-10.1134286 0-18.3404286-7.9433103-18.3404286-17.708 0-9.76468966 8.227-17.70537931 18.3404286-17.70537931 10.1147857 0 18.335 7.94068965 18.335 17.70537931 0 9.7646897-8.2202143 17.708-18.335 17.708m0-35.91655172c-10.40114289 0-18.8629286 8.17-18.8629286 18.20855172 0 10.0411724 8.46178571 18.2098621 18.8629286 18.2098621 10.3984285 0 18.8575-8.1686897 18.8575-18.2098621 0-10.03855172-8.4590715-18.20855172-18.8575-18.20855172" fill="#231f20" mask="url(#a)" transform="translate(0 .039103)"/><g fill="#fff"><path d="m8.11313571 11.3701793c.01764286.0157241.03528572.0301379.05292858.0432414.00407142.0013103.01492857-.0131035.01492857-.0144138.36914285-.4455172.73964285-.8897241 1.10335714-1.3313103.13435714-.16117246.27007143-.32234488.40307143-.48613798.13707143-.16117241.16557143-.37344828.08685714-.56475862-.10314286-.19917241-.30264286-.33151724-.53742857-.32365517-.19135714.00655172-.34064286.10613793-.45735714.24634483-.16421429.19524137-.32571429.39310344-.48857143.58965517-.33521429.39965517-.665.80455177-.9975 1.20682757.171.1349655.34607143.2673104.51842857.4009655.10314286.0773104.20221429.1546207.30128571.2332414"/><path d="m29.5854429 12.9006621-.6473572-1.0679311 2.2284286-2.82379307-3.3412857 1.47937927-.9391429-.83862065 3.0440714-3.86551724.9432143.84124138-1.7602143 2.22889655 2.8106429-1.24482758.8251429.99062068-1.8755715 2.37434486 2.6328572-1.16751727.6487143 1.06924137zm-10.7227858 16.4880689c-6.2157142 0-11.25478567-4.8666207-11.25478567-10.8693103 0-6.004 5.03907147-10.86800001 11.25478567-10.86800001 6.2170715 0 11.2575 4.86400001 11.2575 10.86800001 0 6.0026896-5.0404285 10.8693103-11.2575 10.8693103zm-14.28257139-19.1192413c-.13164285-.1074483-.26735714-.2135863-.40578571-.31841384-.00407143-.00131034-.0475-.03668965-.0475-.038.02442857-.02882758.04342857-.05634483.07192857-.08386207.3515-.42324138.69757143-.84517241 1.04907143-1.26710345.40985714-.49137931.81564286-.98668965 1.2255-1.47544827.07735714-.09172414.15335714-.18868966.23342857-.28434483.13571429-.1637931.32028572-.29089655.52385714-.3682069.44107143-.15593103.94321429-.05372413 1.27842858.26206897.16285714.15462069.27957142.35117241.33385714.56475862.05564286.22275862.03528571.43896552-.02985714.65386207.02985714-.02358621.06107142-.05110345.09364285-.07337931.39492857-.26731035.91064286-.34331035 1.35849996-.14675862.4465.19655172.7342143.58572414.8020715 1.05089655.0176428.17296552.0067857.34855172-.0434286.5202069-.1031429.32496551-.342.57131034-.5577857.82944828-.4193572.5071034-.84007144 1.0102759-1.2567143 1.516069-.34878571.421931-.70028571.8412413-1.04907143 1.2631724-.02714286.0327586-.05021428.0615862-.07871428.0930345-.00407143.007862-.03257143-.0222759-.04071429-.0288276-.12621429-.0995862-.25921429-.1978621-.38678571-.300069-.51164286-.3917931-1.01785715-.7875172-1.5295-1.1793103-.513-.3957242-1.02871429-.7966897-1.54442858-1.1897931zm11.37285719-8.0546897 1.6869285-.18082759 1.2227857 3.44096552 1.2187143-3.44096552 1.6882857.18082759.1872858 4.89282759-1.3137143-.18082759-.1275715-3.26144828-1.1861428 3.26144828h-.9391429l-1.1888571-3.26144828-.1207857 3.26144828-1.3137143.18082759zm2.9097142-1.08627586c-9.94921424 0-18.01199996 7.78606896-18.01199996 17.39089656 0 9.6035172 8.06278572 17.3908965 18.01199996 17.3908965 9.9465 0 18.012-7.7873793 18.012-17.3908965 0-9.6048276-8.0655-17.39089656-18.012-17.39089656z"/><path d="m8.07133571 8.26715172c.04207143-.17820689 0-.36296551-.12892857-.50186206-.15742857-.16379311-.41257143-.22013794-.63242857-.13496552-.15742857.06289655-.25242857.19524138-.35421428.32365517-.40035715.47565517-.79257143.95131035-1.1875 1.42696552-.00407143.00655172-.08957143.10744827-.08278572.11006896.07464286.06158621.15607143.12186207.23885714.18606897.21035715.16510345.42342858.32889654.63107143.49400004.21171429-.25420694.41528572-.50317246.62564286-.75606901.21035714-.25027586.41528571-.49924138.62564286-.75082758.10042857-.12448276.21714285-.23979311.26464285-.39703449"/><path d="m8.17407143 18.5188966h10.68885717v-10.31765522c-5.8343572.14806896-10.53550003 4.68579312-10.68885717 10.31765522"/><path d="m18.8629286 28.8398276c5.833-.1493793 10.5341428-4.6897242 10.6875-10.3202759h-10.6875z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/ebay.svg b/public/showcase/resources/images/home/ebay.svg
deleted file mode 100644
index 2ce7392d19..0000000000
--- a/public/showcase/resources/images/home/ebay.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="85px" height="35px" viewBox="0 0 85 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="ebay" fill="#FFFFFF" fill-rule="nonzero">
-            <path d="M11.0121603,7.45404043 C5.02087038,7.45404043 0.0283324748,9.99584643 0.0283324748,17.6643592 C0.0283324748,23.7395095 3.38545282,27.5652742 11.166862,27.5652742 C20.3259449,27.5652742 20.9130753,21.5319039 20.9130753,21.5319039 L16.4750675,21.5319039 C16.4750675,21.5319039 15.5235214,24.7806419 10.8961339,24.7806419 C7.12725312,24.7806419 4.41652633,22.2346525 4.41652633,18.6660779 L21.3771807,18.6660779 L21.3771807,16.4267447 C21.3771807,12.8963026 19.1359942,7.45404043 11.0121603,7.45404043 Z M10.8574583,10.3160236 C14.4450425,10.3160236 16.8908286,12.5138536 16.8908286,15.8079373 L4.51468462,15.8079373 C4.51468462,12.3108645 7.70705852,10.3160236 10.8574583,10.3160236 Z" id="e"></path>
-            <path d="M21.3740326,0.0283539572 L21.3740326,23.7141772 C21.3740326,25.0586596 21.2780741,26.9464671 21.2780741,26.9464671 L25.5109984,26.9464671 C25.5109984,26.9464671 25.6629325,25.5906171 25.6629325,24.3515021 C25.6629325,24.3515021 27.7542705,27.6232872 33.4407737,27.6232872 C39.4288905,27.6232872 43.4963898,23.4659333 43.4963898,17.5096572 C43.4963898,11.9686194 39.7602602,7.5120535 33.450441,7.5120535 C27.5417411,7.5120535 25.705683,10.7027781 25.705683,10.7027781 L25.705683,0.0283539572 L21.3740326,0.0283539572 Z M32.3578595,10.4417188 C36.4242567,10.4417188 39.0100388,13.4596894 39.0100388,17.5096572 C39.0100388,21.8525126 36.0235468,24.693622 32.3868672,24.693622 C28.0468085,24.693622 25.705683,21.3049225 25.705683,17.5483327 C25.705683,14.0479231 27.8064436,10.4417188 32.3578595,10.4417188 Z" id="b"></path>
-            <path d="M54.0161117,7.45404043 C45.0026692,7.45404043 44.4246012,12.3893603 44.4246012,13.178007 L48.9109522,13.178007 C48.9109522,13.178007 49.1462152,10.2966858 53.7067088,10.2966858 C56.6701913,10.2966858 58.9665712,11.6531189 58.9665712,14.2609195 L58.9665712,15.1891303 L53.7067088,15.1891303 C46.7238682,15.1891303 43.0322842,17.2318871 43.0322842,21.3772022 C43.0322842,25.4567877 46.4431897,27.6764661 51.0526065,27.6764661 C57.3345258,27.6764661 59.3581577,24.2053446 59.3581577,24.2053446 C59.3581577,25.5859667 59.4646003,26.9464671 59.4646003,26.9464671 L63.4529222,26.9464671 C63.4529222,26.9464671 63.2982193,25.2600844 63.2982193,24.1811723 L63.2982193,14.8555546 C63.2982193,8.7408747 58.3660915,7.45404043 54.0161117,7.45404043 Z M58.9665712,17.9737625 L58.9665712,19.211377 C58.9665712,20.8255635 57.9705043,24.8386549 52.106513,24.8386549 C48.8954113,24.8386549 47.518638,23.2360774 47.518638,21.3772022 C47.518638,17.9955415 52.1550423,17.9737625 58.9665712,17.9737625 Z" id="a"></path>
-            <polygon id="y" points="60.8823862 8.22832895 65.9295332 8.22832895 73.1728903 22.73991 80.3996753 8.22832895 84.9716667 8.22832895 71.8082012 34.0635205 67.0124445 34.0635205 70.8109273 26.8616085"></polygon>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/ford.svg b/public/showcase/resources/images/home/ford.svg
deleted file mode 100644
index fcdaec0dff..0000000000
--- a/public/showcase/resources/images/home/ford.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="77" height="32" viewBox="0 0 77 32">
-    <defs>
-        <path id="a" d="M76.08 31.096H0V.001h76.08v31.095z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <mask id="b" fill="#fff">
-            <use xlink:href="#a"/>
-        </mask>
-        <path fill="#FFF" d="M35.8 10.699c.146-.16.392-.636.343-.954-.023-.159-.097-.345-.27-.319-.37.079-.59.267-.687.662-.124.424-.073.717 0 1.034 0 0 .244.027.614-.423m19.357 10.259c1.055-.053 2.992-2.226 3.46-2.757.097-.133.27-.37.365-.37.1 0 .296.105.296.262 0 .108-.22.506-.391.744-.983 1.326-2.602 3.366-4.442 3.419-.907 0-1.25-.396-1.375-1.165-.415.397-1.84 1.087-3.288 1.087-1.202-.027-1.694-.795-1.937-1.404-.223-.505-.319-1.247-.147-1.99-.663.372-1.277.424-2.16.399-1.029-.027-1.667-.532-1.985-1.828-1.178 2.33-1.228 2.411-2.43 4.848h-2.087l2.675-4.905c.345-.66.517-1.19.637-1.748a.513.513 0 0 0-.465-.635c-.341 0-.906.37-1.448.928 0 0-1.375 1.591-2.38 3.205-.956 1.539-2.6 3.291-4.39 3.291-1.302 0-2.48-.77-2.723-2.255 0 0-.125.345-1.277 1.06-.099.052-.344.21-.417.158-.222-.21-.343-.477-.367-.663.073.026.22-.105.685-.503.91-.743 1.106-1.325 1.106-1.325.221-.505.613-1.299.883-1.856.735-1.59 2.01-3.207 4.096-3.287.344 0 .442.16.515.292.198.16.124.476.124.476-1.472.238-2.48 1.168-3.092 2.069-.368.584-.759 1.536-.835 2.227-.145 1.193.371 1.99 1.13 2.173 1.422.239 2.6-.874 3.534-2.6.243-.448.417-1.615.417-2.252 0-.636-.32-1.297-.565-1.563 0-.452.269-.742.588-.742.098 0 .195 0 .295.106.489.529.76 1.537.76 2.308 0 .262 0 .528-.048.793 1.03-1.351 2.33-3.101 3.335-3.448.197-.105.394-.105.59-.105 1.84-.052 1.594 1.749 1.594 1.749.982-1.218 1.669-1.67 2.574-1.617.984.056 1.328.796 1.328 1.381-.026.689-.493 1.482-1.3 1.51-.712 0-1.13-.372-1.351-1.06-.465.185-.686.53-.783 1.22-.147.872.465 1.563 1.25 1.563 1.349 0 1.937-.636 2.428-1.113 1.668-1.698 2.602-3.475 5.007-3.445 1.444.025 1.815 1.273 2.06 1.801l3.166-5.779h1.936l-5.25 10.047c-.097.212-.342.61-.32.928.05.504.639.371.419.371m-33.639 1.405c-2.133 0-4.022-1.51-4.07-4.215-.025-1.643 1.201-3.658 3.481-4.268.272 0 .371.106.371.266 0 .105-.1.237-.32.344-.66.266-1.816 1.672-1.816 2.967 0 .983.567 2.07 1.524 2.31.266.077.513.052.758.052 2.381 0 5.055-2.89 7.951-7.29-.467.026-2.457.264-2.945.873-.221.188-.367.08-.418-.13 0-.054.075-.241.15-.346.781-.954 3.137-1.167 3.702-1.245C32 8.177 34.695 5.944 35.435 5.784c-.015-.006-.035-.013-.054-.017-1.889-.478-3.606-.873-4.955-.873-4.736 0-6.844 2.199-6.746 4.215.05.822.662 1.35 1.567 1.166.984-.187 2.357-1.193 2.702-2.068.074-.186.27-.212.343-.16.146.131.097.32.097.32-.12 1.033-1.595 3.897-4.146 3.897-1.423 0-2.381-1.432-2.353-2.838.023-2.624 2.5-5.276 8.61-5.276 1.153 0 2.453.108 3.876.373 1.643.317 5.742 1.06 9.077 1.112 1.226 0 2.799.054 4.073-.157 1.349-.24 1.054-.292 1.594-.292.491 0 .491.211.491.423 0 .848-2.748 2.466-5.078 2.466-3.433 0-6.998-1.683-8.848-2.225.072.073.122.19.065.342a2.493 2.493 0 0 1-.37.424c-.49.477-2.158 1.646-3.974 4.96 1.474-.08 3.19-.399 3.19-.399s-.096-.345-.096-.638c.074-1.14.686-1.83 1.47-1.696a.912.912 0 0 1 .739.902c0 .448-.322 1.114-.638 1.432-.221.185-.468.37-.763.53 0 .292.368.529.687.557-.073.29-.05.423-.171.397-.737 0-1.032-.77-1.032-.77-.981.186-1.936.32-3.874.53-4.884 8.537-6.405 9.942-9.4 9.942M38.051 2.731c-19.577 0-35.4 5.752-35.4 12.83 0 7.106 15.823 12.86 35.4 12.86 19.554 0 35.43-5.754 35.43-12.86 0-7.078-15.876-12.83-35.43-12.83m15.194 12.103c-.86-.107-1.94.69-2.825 1.856-.44.583-.908 1.696-.98 2.358-.098.663.072 1.329.295 1.512.22.187 1.2.742 2.722-.928.86-.926 1.693-2.439 1.693-2.439l-.27-.078c.516-1.035.419-2.147-.635-2.28M38.05 29.504c-20.166 0-36.554-6.203-36.554-13.944 0-7.715 16.388-13.996 36.554-13.996 20.219 0 36.58 6.28 36.58 13.996 0 7.74-16.361 13.944-36.58 13.944M38.05 0C17.027 0 0 6.973 0 15.56c0 8.59 17.027 15.536 38.05 15.536 21.003 0 38.03-6.947 38.03-15.536 0-8.588-17.027-15.56-38.03-15.56" mask="url(#b)"/>
-    </g>
-</svg>
diff --git a/public/showcase/resources/images/home/fox.svg b/public/showcase/resources/images/home/fox.svg
deleted file mode 100644
index 09ba7eb248..0000000000
--- a/public/showcase/resources/images/home/fox.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="40" viewBox="0 0 92 40" width="92" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform=""><path d="m91.9547541 39.8936709c-4.1827322 0-8.4408743 0-12.5733333 0-.1156285 0-.326776-.5113924-.3871039-.6177215-1.7293989-3.1443038-3.4587978-6.3037975-5.178142-9.443038-1.84 3.3417721-3.6297268 6.7392405-5.4646995 10.0860759-4.117377.0101266-8.1995628-.0202531-12.2817486-.0101265.4625136-.8708861.9551912-1.721519 1.4478688-2.5772152 3.4336612-5.9746836 6.8170492-12.0303798 10.2557377-18.0101266-3.6548634-6.4303798-7.3650273-12.81012659-11.04-19.22531647-.0100546 0-.0351912-.04050633-.0100546-.03544304h12.6336612c1.5534426 2.84556962 3.0666667 5.72658228 4.5949727 8.59240507 1.5886338-2.84050633 3.1219672-5.73670886 4.6955191-8.59240507h12.2113661c.0100547.05063292-.0251366.10632912-.0502732.14683545-3.5643716 6.30886076-7.2142077 12.63797466-10.7735519 18.95696206 3.9565027 6.9164557 7.9884153 13.8278481 11.9197814 20.7291139z"/><path d="m61.4288525 15.5189873c.3217486 1.3164557.5077595 2.764557.5077595 4.2886076 0 4.7544304-1.3674317 8.278481-3.2677595 11.1443038-.3217487.486076-.6485246.9518988-1.0004372 1.3974684-1.0306011 1.3164557-2.277377 2.5164557-3.6699454 3.513924-.9350819.6683545-1.9103825 1.2759494-2.9912568 1.7873418-2.151694 1.0177215-4.7508197 1.8126582-7.7471038 1.8126582-4.6854645 0-8.1442623-1.4379746-10.9444809-3.4126582-2.8002186-1.9797468-4.9820765-4.5974683-6.4651366-7.8987342-.9954098-2.2126582-1.6489617-4.7645569-1.7243716-7.8734177-.0351912-1.5392405.155847-3.0582278.4323497-4.3746835.7038252-3.321519 2.0863388-5.92405066 3.835847-8.16708864 1.7495082-2.23797468 3.9665574-3.98987342 6.6461203-5.3113924 1.0507103-.5164557 2.2271038-.95696203 3.509071-1.27594937s2.6996721-.53670886 4.2330055-.53670886h.0251366c1.498142-.07088608 3.0867759.1721519 4.3335519.45063291 1.2970492.28860759 2.4985792.72911392 3.5693989 1.21518987 3.3180328 1.50886076 5.7914754 3.76708861 7.7822951 6.58734177 1.3121311 1.84810132 2.2974863 4.06582282 2.9359563 6.65316452zm-15.0819673 13.1949368c.1206558-.486076.0854645-1.1088608.0854645-1.7518988 0-4.9063291 0-9.7113924 0-14.6329114 0-.6278481-.0703825-1.113924-.2513661-1.5696202-.1659016-.4151899-.4222951-.79493674-.7239344-1.1037975-.5881967-.60253164-1.4730055-1.14430379-2.5840437-1.05822785-.5379235.04050633-.9853552.21265823-1.3774864.4607595-.7289617.46582278-1.2819672 1.17974685-1.5081967 2.12658225-.1156284.4810127-.1106011 1.0936709-.1106011 1.7265823v14.6329114c0 .313924-.015082.6177215.0251366.8860759.1055738.7696203.4474317 1.3873418.8948634 1.8481013.5781421.5924051 1.4730055 1.0886076 2.6292896.9620253 1.4931148-.1620253 2.5890711-1.1594936 2.9208743-2.5265822z"/><path d="m24.6389071 10.9265823c-4.4542076 0-8.903388 0-13.3575956 0-.0553006 1.6708861-.0100547 3.5189873-.0251366 5.2 3.6096174.0303797 7.2745355.0050633 10.9092896.0101266v10.9012658c-3.6598907.0101266-7.3499454-.0151899-10.9897268.0101266.0050273 4.3240506.0251366 8.5670886.0251366 12.8911392 0 .0151899-.0050273.0202532-.0100546.0253165-3.71016396 0-7.42535522 0-11.13551915 0-.02010929.0050633-.02010929-.0101266-.03519126-.0101266-.02513661-13.2759494-.02513661-26.6379747-.00502732-39.91898736 0-.01518988 0-.03544304.01005464-.03544304h23.85464479c.015082 0 .0201093 0 .0251366.01012658.2513662 3.63544304.4926776 7.27594937.7339891 10.91645572z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-community.svg b/public/showcase/resources/images/home/icon-community.svg
deleted file mode 100644
index 0000cd95f3..0000000000
--- a/public/showcase/resources/images/home/icon-community.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="65" viewBox="0 0 65 65" width="65" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform=""><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><g transform="translate(17.056713 16.682402)"><path d="m14.997375 11.9130163c1.1023189 0 1.9980127-.8753211 1.9980127-1.95682053 0-1.07806318-.8956938-1.95619577-1.9980127-1.95619577-1.1029566 0-1.997375.87813259-1.997375 1.95619577 0 1.08149943.8944184 1.95682053 1.997375 1.95682053z"/><path d="m14.9986505 8c-1.1042321 0-1.9986505.87813259-1.9986505 1.95619577 0 1.08149943.8940995 1.95682053 1.9986505 1.95682053 1.1023188 0 1.9967372-.8753211 1.9967372-1.95682053-.0003188-1.07806318-.8940995-1.95619577-1.9967372-1.95619577z"/><path d="m14.9980127 8c-1.1023188 0-1.9980127.87813259-1.9980127 1.95619577 0 1.08149943.895375 1.95682053 1.9980127 1.95682053 1.1039132 0 1.997375-.8753211 1.997375-1.95682053 0-1.07806318-.8934618-1.95619577-1.997375-1.95619577z"/><path d="m22.4053976 15.9038875c0-2.5841027-1.8640892-4.8195765-4.5642442-5.9035751-.0003189-.0003124-.0003189-.0003124-.0006378-.0003124v.0003124c0 .035925.0066962.0715377.0066962.1074627 0 4.933287-4.2055202 9.0596668-9.8462552 10.1396043h-.0009566c.00031887.0003124.00063773.0003124.0009566.0006248 1.50823495 1.3817077 3.7160613 2.2592155 6.1786615 2.2592155.7547552 0 1.500901-.0834085 2.2215376-.2471017l.2821962-.0281152c.4601232 0 1.4460561.2080527 2.3745931.4307879-.1259519-.273655-.1999288-.5516834-.1782459-.8134675.0274224-.3411316.2031175-.6332177.4907343-.8250261 1.9281812-1.2883027 3.0349642-3.1545297 3.0349642-5.1204096z"/><path d="m28.005978 22.3756682c2.2250451-1.543839 3.4970006-3.7780632 3.4970006-6.1516141 0-3.3760152-2.5490127-6.26032623-6.1314693-7.42398468 0 0-.0003189 0-.0003189.00031239v-.00031239c-.9585104-4.9832697-6.2258536-8.80006942-12.5983854-8.80006942-7.05331021 0-12.772805 4.66869143-12.772805 10.4279417 0 3.2897952 1.88449653 6.201909 4.78394271 8.1337383 1.10518866.7375564-1.57360243 3.2173203-1.57360243 3.2173203s5.35630671-1.4810482 6.15602199-1.3011107c1.08318693.2436654 2.22695833.3754946 3.40644273.3754946.4158009 0 .8252245-.0193682 1.230184-.0512322h.0006377c0 .0003124-.0003188.0003124-.0006377.0006248 1.7435579 2.0511628 4.6187703 3.3985075 7.8718385 3.3985075.8599809 0 1.7145411-.0952794 2.5037338-.275217.5162437 0 2.6430782.5251302 3.9896482.8962513l2.7352303.7553628-2.0627425-1.9158973c-.4594855-.4270392-.9116371-.9946546-1.0347193-1.2861159zm-21.70678529-10.0989934c-1.10263773 0-1.99801273-.8753211-1.99801273-1.9568206 0-1.07806316.89569386-1.95619575 1.99801273-1.95619575 1.10391319 0 1.997375.87813259 1.997375 1.95619575 0 1.0814995-.89346181 1.9568206-1.997375 1.9568206zm12.94531139-3.91301635c1.1023188 0 1.9980127.87813259 1.9980127 1.95619575 0 1.0814995-.8956939 1.9568206-1.9980127 1.9568206-1.1029566 0-1.997375-.8753211-1.997375-1.9568206 0-1.07806316.8944184-1.95619575 1.997375-1.95619575zm-6.4707425 3.91301635c-1.104551 0-1.9986505-.8753211-1.9986505-1.9568206 0-1.07806316.8944184-1.95619575 1.9986505-1.95619575 1.1026377 0 1.9967372.87813259 1.9967372 1.95619575-.0003188 1.0814995-.8944184 1.9568206-1.9967372 1.9568206zm13.8008281 9.892815c-.0216829.2617841.052294.5398125.1782459.8134675-.928537-.2227352-1.9144699-.4307879-2.3745931-.4307879l-.2821962.0281152c-.7206366.1636932-1.4667824.2471017-2.2215376.2471017-2.4626001 0-4.6701077-.8778202-6.1786615-2.2592155-.0003188-.0003124-.0006377-.0003124-.0009566-.0006248h.0009566c5.6404161-1.0799375 9.8462552-5.2063173 9.8462552-10.1396043 0-.035925-.0066962-.0715377-.0066962-.1074627v-.0003124c.0003189 0 .0003189 0 .0006378.0003124 2.7001551 1.0839986 4.5642442 3.3194724 4.5642442 5.9035751 0 1.96588-1.106783 3.832107-3.0349641 5.120722-.2876169.191496-.4633119.4838945-.4907344.8247137z" fill="#fff"/></g></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-component.svg b/public/showcase/resources/images/home/icon-component.svg
deleted file mode 100644
index dc9cdb16b2..0000000000
--- a/public/showcase/resources/images/home/icon-component.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="66" viewBox="0 0 66 66" width="66" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(.282053 .883341)"><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><g fill="#fff"><path d="m40.7192497 24.0280492v1.7398799h5.404801v17.2759971h-26.1918325v-17.2759971h3.1134149v-1.7398799h-5.0456331v20.7576346h30.0558933v-20.7576346z"/><path d="m32.733399 23.005076h5.956327v5.819003h-5.956327z"/><path d="m34.267377 29.541737h9.739988v9.513947h-9.739988z"/><path d="m26.330742 20.076986h5.000174v5.173073h-5.000174z"/><path d="m28.218252 31.315791h3.33132v3.254435h-3.33132z"/><path d="m24.885429 27.354964h2.610354v2.550672h-2.610354z"/><path d="m24.875661 35.929308h2.315807v2.263384h-2.315807z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-mobile.svg b/public/showcase/resources/images/home/icon-mobile.svg
deleted file mode 100644
index da12d8aee5..0000000000
--- a/public/showcase/resources/images/home/icon-mobile.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="65" viewBox="0 0 65 65" width="65" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><path d="m24 45.8547032c0 1.0349532.8556369 1.8743492 1.9106145 1.8743492h11.7181173c1.0549777 0 1.9106146-.8397084 1.9106146-1.8743492v-23.4543561h-15.5393464zm7.769514-1.9377646c.7540558 0 1.3676815.6019784 1.3676815 1.3414092 0 .7394307-.6136257 1.3414092-1.3676815 1.3414092-.7540559 0-1.3676816-.6019785-1.3676816-1.3414092 0-.7394308.6136257-1.3414092 1.3676816-1.3414092zm5.8588994-25.9169386h-11.7177989c-1.0549776 0-1.9106145.8390837-1.9106145 1.8743492v1.8993405h15.5393464v-1.8993405c-.0003185-1.0352655-.8556369-1.8743492-1.910933-1.8743492zm-9.2075698 2.3285665c-.2391453 0-.4337095-.1908713-.4337095-.4257897s.1945642-.4257896.4337095-.4257896c.2391452 0 .4337095.1908712.4337095.4257896s-.1945643.4257897-.4337095.4257897zm5.2793463-.1133982h-3.8610335c-.1760949 0-.3184357-.1399514-.3184357-.3123915s.1423408-.3123915.3184357-.3123915h3.8610335c.176095 0 .3184358.1399514.3184358.3123915s-.1426592.3123915-.3184358.3123915z" fill="#fff" fill-rule="nonzero"/><g fill="#222" transform="translate(26 27)"><path d="m8.86956522 5.95419847-.93913044-.19847328.73043479.99236641v3.07633588l2.50434783-1.98473282v-3.37404581l-1.1478261.39694657z" fill-rule="nonzero"/><path d="m1.66956522 5.95419847-.93913044-.19847328.73043479.99236641v3.07633588l2.50434782-1.98473282v-3.37404581l-1.14782609.39694657z" fill-rule="nonzero" transform="matrix(-1 0 0 1 4.695652 0)"/><path d="m3.54782609 10.3002838v-.39631352l1.42799216 1.02453572-.00991873-.404696-1.41807343-1.0174193v-.39631355l1.42799216 1.02453565-.00991873-.40469588-1.41807343-1.01741935v-1.76593268l.83478261-1.1908397.52173913.29770992h2.08695652l.52173913-.29770992.83478261 1.1908397v1.74416275l-1.44841626 1.03918928-.00991872.40469588 1.45833498-1.04630559v.39631356l-1.44841626 1.03918923-.00991872.404696 1.45833498-1.04630566v.39631356l-1.44841626 1.0391893-.00991872.4046959 1.45833498-1.0463056v.7361202l-.62608696.8931298-.73043478.6946565h-2.08695652l-.73043479-.6946565-.62608695-.8931298v-.7143503l1.42799216 1.0245357-.00991873-.4046959z"/><path d="m8.66086957 11.7099237 1.35652173-1.2900764v-1.29007631l-1.35652173 1.09160301z" fill-rule="nonzero"/><path d="m1.87826087 11.7099237 1.35652174-1.2900764v-1.29007631l-1.35652174 1.09160301z" fill-rule="nonzero" transform="matrix(-1 0 0 1 5.113044 0)"/><path d="m5.32173913 0h.4173913v5.65648855h-.62608695l-1.35652174-3.77099237.83478261-1.88549618h.31304348v2.28244275l.4173913.19847328zm.83478261 0h.4173913v2.48091603l.41739131-.19847328v-2.28244275h.31304348l.8347826 1.88549618-1.25217391 3.77099237h-.73043478z"/><g fill-rule="nonzero"><path d="m5.11304348 5.65648855-4.48695652-1.58778626-.62608696-2.48091603 3.86086957.29770992 1.35652173 3.77099237z"/><path d="m11.8956522 5.65648855-4.48695655-1.58778626-.62608695-2.48091603 3.9652174.29770992 1.2521739 3.77099237z" transform="matrix(-1 0 0 1 18.782608 0)"/><path d="m8.34782609 1.58778626 2.19130431-.19847328-1.46086953-1.38931298h-1.46086957z"/><path d="m2.08695652 1.58778626 2.19130435-.19847328-1.46086957-1.38931298h-1.46086956z" transform="matrix(-1 0 0 1 5.634782 0)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-opensource.svg b/public/showcase/resources/images/home/icon-opensource.svg
deleted file mode 100644
index 998900556a..0000000000
--- a/public/showcase/resources/images/home/icon-opensource.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="66" viewBox="0 0 66 66" width="66" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(.253444 .994793)"><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><path d="m32.5442367 17c-8.5842589 0-15.5442367 6.8348143-15.5442367 15.2665741 0 6.7448455 4.4538895 12.4662964 10.6313112 14.4859077.7777845.139639 1.0612225-.3317598 1.0612225-.7366193 0-.3617493-.0133607-1.3223533-.0209954-2.5959736-4.3240998.9221798-5.2364457-2.0467893-5.2364457-2.0467893-.7071635-1.7628254-1.7263952-2.233287-1.7263952-2.233287-1.411464-.9465464.1068858-.9278029.1068858-.9278029 1.5603405.1077751 2.3810701 1.5735162 2.3810701 1.5735162 1.3866513 2.3326275 3.638886 1.658799 4.5245105 1.2689344.1412418-.9868449.5420632-1.6597362.9867842-2.0411663-3.451836-.3851788-7.0811786-1.6953488-7.0811786-7.5451926 0-1.6662965.6060038-3.0289483 1.6004227-4.0963902-.1603286-.3861159-.6938028-1.938077.1517395-4.0401597 0 0 1.3055327-.4104824 4.2754286 1.5650816 1.2396834-.3392572 2.5700288-.5079486 3.8917852-.5135717 1.3198477.0056231 2.6501931.1743145 3.8917852.5135717 2.9679873-1.975564 4.2706569-1.5650816 4.2706569-1.5650816.8484054 2.1020827.3149311 3.6540438.1546026 4.0401597.9963275 1.0674419 1.598514 2.4300937 1.598514 4.0963902 0 5.8648386-3.6350686 7.155328-7.0983567 7.5330093.558287.4713988 1.0554965 1.4029504 1.0554965 2.8274558 0 2.0402291-.0190868 3.6868448-.0190868 4.187296 0 .4086082.2796207.8837557 1.0688572.7347449 6.17265-2.0233599 10.6227222-7.7410621 10.6227222-14.4840333 0-8.4317598-6.9609322-15.2665741-15.5470998-15.2665741" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-pro-white.svg b/public/showcase/resources/images/home/icon-pro-white.svg
deleted file mode 100644
index c2c3de1fb4..0000000000
--- a/public/showcase/resources/images/home/icon-pro-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="227" viewBox="0 0 239 227" width="239" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m21.6783851 115.917877c.7475305 0 1.495061-.563008 1.495061-1.501353v-18.7669147c0-.7506766-.5606479-1.5013532-1.495061-1.5013532-.9344132 0-1.4950611.5630075-1.4950611 1.5013532v18.9545837c.1868827.750676.7475305 1.313684 1.4950611 1.313684z"/><path d="m20.3702067 130.180732c0 .750676.5606478 1.501353 1.495061 1.501353.9344131 0 1.495061-.563007 1.495061-1.501353v-6.756089c0-.750677-.5606479-1.501354-1.495061-1.501354-.9344132 0-1.495061.563008-1.495061 1.501354z"/><path d="m60.1762068 30.5284162c0 3.9410521 3.1770047 7.1314275 7.1015399 7.1314275 3.9245353 0 7.10154-3.1903754 7.10154-7.1314275 0-3.941052-3.1770047-7.1314274-7.10154-7.1314274-3.9245352 0-7.1015399 3.1903754-7.1015399 7.1314274zm11.3998404 0c0 2.4396989-1.8688263 4.3163904-4.2983005 4.3163904-2.4294741 0-4.2983004-1.8766915-4.2983004-4.3163904 0-2.4396988 1.8688263-4.3163903 4.2983004-4.3163903 2.4294742 0 4.2983005 2.0643606 4.2983005 4.3163903z"/><path d="m134.742376 210.878464c-3.55077 0-6.540892 3.002706-6.540892 6.56842s2.990122 6.56842 6.540892 6.56842 6.540892-3.002706 6.540892-6.56842-2.990122-6.56842-6.540892-6.56842zm0 10.509472c-2.055709 0-3.737652-1.689022-3.737652-3.753383s1.681943-3.753383 3.737652-3.753383 3.737653 1.689022 3.737653 3.753383-1.681944 3.753383-3.737653 3.753383z"/><path d="m206.131541 214.444178c0-.750677-.560648-1.501354-1.495061-1.501354h-23.360329c-.747531 0-1.495061.563008-1.495061 1.501354 0 .750676.560648 1.501353 1.495061 1.501353h23.360329c.934413-.187669 1.495061-.750677 1.495061-1.501353z"/><path d="m219.960855 212.942824h-7.662187c-.747531 0-1.495062.563008-1.495062 1.501354 0 .750676.560648 1.501353 1.495062 1.501353h7.662187c.747531 0 1.495061-.563008 1.495061-1.501353 0-.938346-.560648-1.501354-1.495061-1.501354z"/><path d="m219.960855 221.012598h-16.258788c-.747531 0-1.495061.563007-1.495061 1.501353 0 .750676.560647 1.501353 1.495061 1.501353h16.258788c.747531 0 1.495061-.563007 1.495061-1.501353s-.560648-1.501353-1.495061-1.501353z"/><path d="m196.600527 221.012598h-5.232714c-.747531 0-1.495061.563007-1.495061 1.501353 0 .750676.560648 1.501353 1.495061 1.501353h5.232714c.74753 0 1.495061-.563007 1.495061-1.501353s-.560648-1.501353-1.495061-1.501353z"/><path d="m58 9.50135315c0 .75067655.5606479 1.50135315 1.495061 1.50135315h23.3603288c.7475305 0 1.495061-.5630074 1.495061-1.50135315 0-.75067657-.5606479-1.50135315-1.495061-1.50135315h-23.5472114c-.7475305.18766914-1.3081784.75067658-1.3081784 1.50135315z"/><path d="m44.495061 11.0027063h7.6621879c.7475305 0 1.495061-.5630074 1.495061-1.50135315 0-.75067657-.5606479-1.50135315-1.495061-1.50135315h-7.6621879c-.7475305 0-1.495061.56300743-1.495061 1.50135315 0 .93834575.7475305 1.50135315 1.495061 1.50135315z"/><path d="m44.495061 2.81503716h16.2587888c.7475306 0 1.4950611-.56300743 1.4950611-1.50135315s-.7475305-1.31368401-1.4950611-1.31368401h-16.2587888c-.7475305 0-1.495061.56300743-1.495061 1.50135315 0 .93834573.7475305 1.31368401 1.495061 1.31368401z"/><path d="m67.495061 2.81503716h5.2327137c.7475305 0 1.495061-.56300743 1.495061-1.50135315s-.7475305-1.31368401-1.495061-1.31368401h-5.2327137c-.7475305 0-1.495061.56300743-1.495061 1.50135315 0 .93834573.7475305 1.31368401 1.495061 1.31368401z"/><path d="m41.1141786 161.146141h-23.5472114c-.7475305 0-1.495061.563007-1.495061 1.501353 0 .750676.5606479 1.501353 1.495061 1.501353h23.5472114c.7475305 0 1.495061-.563007 1.495061-1.501353-.1868826-.750677-.7475305-1.501353-1.495061-1.501353z"/><path d="m9.90477938 161.146141h-7.47530519c-.74753052 0-1.49506104.563007-1.49506104 1.501353 0 .750676.56064789 1.501353 1.49506104 1.501353h7.66218781c.7475305 0 1.4950611-.563007 1.4950611-1.501353-.1868827-.750677-.9344132-1.501353-1.68194372-1.501353z"/><path d="m2.42947419 155.891405h16.25878881c.7475305 0 1.495061-.563008 1.495061-1.501354 0-.750676-.5606479-1.501353-1.495061-1.501353h-16.25878881c-.74753052 0-1.49506104.563008-1.49506104 1.501353 0 .938346.56064789 1.501354 1.49506104 1.501354z"/><path d="m31.0225166 155.891405c.7475305 0 1.495061-.563008 1.495061-1.501354 0-.750676-.5606479-1.501353-1.495061-1.501353h-5.2327137c-.7475305 0-1.495061.563008-1.495061 1.501353 0 .750677.5606479 1.501354 1.495061 1.501354z"/><g transform="translate(6 7)"><path d="m128.742376 6.6381933c.186883.1876691.560648.3753382.934413.3753382.373766 0 .747531-.1876691.934413-.3753382.560648-.5630075.560648-1.5013532 0-2.0643606l-3.177004-3.19037549c-.560648-.56300743-1.495061-.56300743-2.055709 0-.560648.56300744-.560648 1.50135316 0 2.06436059z"/><path d="m138.647156 16.772327c.186882.1876692.560647.3753383.934413.3753383.373765 0 .74753-.1876691.934413-.3753383.560648-.5630074.560648-1.5013531 0-2.0643605l-3.177005-3.1903755c-.560648-.5630074-1.495061-.5630074-2.055709 0s-.560648 1.5013532 0 2.0643606z"/><path d="m126.686667 17.1476653c.373765 0 .747531-.1876691.934413-.3753383l3.177005-3.1903754c.560648-.5630074.560648-1.5013532 0-2.0643606s-1.495061-.5630074-2.055709 0l-3.177005 3.1903755c-.560647.5630074-.560647 1.5013531 0 2.0643605.373766.1876692.747531.3753383 1.121296.3753383z"/><path d="m136.591447 7.0135315c.373765 0 .74753-.1876691.934413-.3753382l3.177004-3.1903755c.560648-.56300743.560648-1.50135315 0-2.06436059-.560647-.56300743-1.495061-.56300743-2.055708 0l-3.177005 3.19037549c-.560648.5630074-.560648 1.5013531 0 2.0643606.373765.3753382.74753.3753382 1.121296.3753382z"/><path d="m193.216883 69.3196874c.186883.1876692.560648.3753383.934414.3753383.373765 0 .74753-.1876691.934413-.3753383.560648-.5630074.560648-1.5013531 0-2.0643605l-3.177005-3.1903755c-.560648-.5630074-1.495061-.5630074-2.055709 0s-.560648 1.5013532 0 2.0643606z"/><path d="m200.131541 76.2634458 3.177004 3.1903754c.186883.1876692.560648.3753383.934414.3753383.373765 0 .74753-.1876691.934413-.3753383.560648-.5630074.560648-1.5013531 0-2.0643606l-3.177005-3.1903754c-.560648-.5630074-1.495061-.5630074-2.055709 0-.373765.5630074-.373765 1.5013531.186883 2.0643606z"/><path d="m190.226761 79.2661521c.186883.1876691.560648.3753383.934413.3753383.373766 0 .747531-.1876692.934414-.3753383l3.177004-3.1903755c.560648-.5630074.560648-1.5013531 0-2.0643606-.560648-.5630074-1.495061-.5630074-2.055709 0l-3.177004 3.1903755c-.373766.5630074-.373766 1.5013532.186882 2.0643606z"/><path d="m201.252837 69.6950257c.373765 0 .74753-.1876691.934413-.3753383l3.177004-3.1903754c.560648-.5630074.560648-1.5013532 0-2.0643606s-1.495061-.5630074-2.055709 0l-3.177004 3.1903755c-.560648.5630074-.560648 1.5013531 0 2.0643605.373765.1876692.74753.3753383 1.121296.3753383z"/><path d="m43.1501317 204.253802c-.5606479-.563007-1.4950611-.563007-2.055709 0-.5606479.563008-.5606479 1.501353 0 2.064361l3.1770047 3.190375c.1868827.187669.5606479.375339.9344132.375339.3737652 0 .7475305-.18767.9344131-.375339.5606479-.563007.5606479-1.501353 0-2.06436z"/><path d="m53.2417937 214.387936c-.5606479-.563007-1.4950611-.563007-2.055709 0s-.5606479 1.501353 0 2.064361l3.1770047 3.190375c.1868827.187669.5606479.375338.9344132.375338s.7475305-.187669.9344131-.375338c.5606479-.563007.5606479-1.501353 0-2.064361z"/><path d="m44.2714274 214.387936-3.1770047 3.190375c-.5606479.563008-.5606479 1.501354 0 2.064361.1868827.187669.5606479.375338.9344132.375338.3737652 0 .7475305-.187669.9344131-.375338l3.1770047-3.190375c.5606479-.563008.5606479-1.501354 0-2.064361-.3737652-.563007-1.3081784-.563007-1.8688263 0z"/><path d="m54.3630894 204.253802-3.1770047 3.190376c-.5606479.563007-.5606479 1.501353 0 2.06436.1868827.187669.5606479.375339.9344132.375339.3737652 0 .7475305-.18767.9344131-.375339l3.1770047-3.190375c.5606479-.563008.5606479-1.501353 0-2.064361-.5606478-.563007-1.3081784-.563007-1.8688263 0z"/><path d="m36.6092396 62.18826c9.9047794-5.8177435 14.2030799-17.8285687 10.2785446-28.7133791-4.4851831-12.3861635-18.127615-18.9545836-30.4618686-14.4505241-2.9901221 1.1260148-5.6064789 2.8150371-7.8490705 4.6917286-3.5507699 3.1903754-5.98024413 7.3190966-7.28842254 12.0108252-1.12129577 4.6917286-.93441314 9.5711264.56064789 14.0751858 3.92453525 11.0724795 15.51125825 17.6408996 26.91109875 15.3888699.5606478.1876691 2.0557089.9383457 2.990122 1.5013531 2.4294742 1.5013532 3.7376526 2.0643606 4.6720658 2.0643606.1868826 0 .3737652 0 .5606479-.1876691.3737652-.1876692.7475305-.3753383.7475305-.7506766.1868826-.3753383.1868826-.7506766 0-1.1260149-.3737653-1.5013531-1.1212958-3.5657137-1.1212958-4.5040594zm-2.2425916 2.627368c-.3737652-.1876692-.7475305-.3753383-.9344131-.5630075-2.4294742-1.313684-3.55077-2.0643605-4.2983005-2.0643605h-.3737652c-10.0916621 2.0643605-20.5570893-3.7533829-23.9209767-13.5121784-1.49506101-3.9410521-1.68194364-8.2574424-.5606479-12.3861636 1.1212958-4.1287211 3.1770047-7.6944349 6.3540095-10.509472 2.0557089-1.8766915 4.2983004-3.1903755 6.9146573-4.1287212 10.8391925-3.941052 22.9865634 1.6890223 26.9110987 12.7615018 3.5507699 9.7587955-.5606479 20.4559367-9.3441315 25.5230036-.9344132.3753383-2.055709 1.1260149-.7475306 4.8793978z"/></g><path d="m45.0881034 43.5013532c0-.7506766-.5606479-1.5013532-1.495061-1.5013532h-27.0979814c-.7475305 0-1.495061.5630074-1.495061 1.5013532 0 .7506765.5606479 1.5013531 1.495061 1.5013531h27.0979814c.7475305 0 1.495061-.5630074 1.495061-1.5013531z"/><path d="m38.8751456 52h-17.3800846c-.7475305 0-1.495061.5630074-1.495061 1.5013532 0 .9383457.5606479 1.5013531 1.495061 1.5013531h17.3800846c.7475305 0 1.4950611-.5630074 1.4950611-1.5013531 0-.9383458-.7475306-1.5013532-1.4950611-1.5013532z"/><path d="m214.354376 106.346751c-.373765.187669-.74753.563007-.934413.938345-.186882.563008 0 .938346.373766 1.313684l4.485183 4.50406-.373766 5.254736-5.232713.375338-4.485183-4.504059c-.373766-.375339-.747531-.563008-1.308179-.375339-.373765.187669-.934413.375339-.934413.938346-2.055709 5.254736-.74753 11.447818 3.177005 15.38887.934413.938346 2.055709 1.689022 3.177005 2.439699 1.308178 20.643606 1.681943 42.225557.934413 64.182847 0 3.753383 2.990122 6.943758 6.914657 6.943758 3.737653 0 6.914657-3.002706 6.914657-6.943758-.74753-21.95729-.373765-43.539241.934413-64.370516v-.563008c.560648-.375338 1.121296-.938346 1.681944-1.501353 5.606479-5.630074 5.606479-14.825862 0-20.455937-4.111418-4.128721-10.091662-5.442405-15.324376-3.565713zm9.717897 90.268858c0 2.25203-1.868826 4.128721-4.111418 4.128721-2.242591 0-4.111418-1.876691-4.111418-3.941052.747531-21.394282.373766-42.600896-.934413-62.869163 1.308179.375338 2.80324.563007 4.111418.563007 1.868826 0 3.924535-.375338 5.606479-1.126015-.934413 20.268268-1.308178 41.66255-.560648 63.244502zm3.363888-68.499238c-4.485184 4.50406-11.773606 4.50406-16.258789 0-2.616357-2.627368-3.924535-6.56842-3.177005-10.134134l3.363887 3.378045c.373766.375338.747531.375338 1.121296.375338l6.914657-.563007c.747531 0 1.308179-.563008 1.308179-1.313684l.560648-6.943758c0-.375339-.186883-.750677-.373766-1.126015l-3.177004-3.190376c3.55077-.563007 7.10154.750677 9.717897 3.190376 4.485183 4.504059 4.485183 11.823156 0 16.327215z"/><path d="m234.350818 16.6408996h-52.514019c-2.242592 0-3.924535 1.6890223-3.924535 3.941052v28.7133791c0 2.2520297 1.681943 3.941052 3.924535 3.941052h52.514019c2.242591 0 3.924535-1.6890223 3.924535-3.941052v-28.7133791c0-2.0643606-1.681944-3.941052-3.924535-3.941052zm1.121296 32.6544311c0 .5630074-.560648 1.1260148-1.121296 1.1260148h-52.514019c-.560648 0-1.121296-.5630074-1.121296-1.1260148v-28.7133791c0-.5630074.560648-1.1260149 1.121296-1.1260149h52.514019c.560648 0 1.121296.5630075 1.121296 1.1260149z"/><path d="m219.400207 24.7106728c-5.606478 0-10.091662 4.5040594-10.091662 10.1341338 0 5.6300743 4.485184 10.1341337 10.091662 10.1341337 5.606479 0 10.091662-4.5040594 10.091662-10.1341337 0-5.4424052-4.672065-10.1341338-10.091662-10.1341338zm0 17.6408995c-4.111417 0-7.288422-3.3780446-7.288422-7.3190966s3.363887-7.3190966 7.288422-7.3190966c4.111418 0 7.288423 3.3780446 7.288423 7.3190966s-3.363887 7.3190966-7.288423 7.3190966z"/><path d="m200.711944 29.2147322h-13.829314c-.747531 0-1.495061.5630075-1.495061 1.5013532 0 .7506766.560648 1.5013531 1.495061 1.5013531h13.829314c.747531 0 1.495062-.5630074 1.495062-1.5013531-.186883-.9383457-.747531-1.5013532-1.495062-1.5013532z"/><path d="m200.711944 37.8475129h-13.829314c-.747531 0-1.495061.5630074-1.495061 1.5013531 0 .7506766.560648 1.5013532 1.495061 1.5013532h13.829314c.747531 0 1.495062-.5630075 1.495062-1.5013532-.186883-.7506766-.747531-1.5013531-1.495062-1.5013531z"/><path d="m188.190808 14.3888698h7.662188c.747531 0 1.495061-.5630074 1.495061-1.5013531s-.560648-1.5013532-1.495061-1.5013532h-7.662188c-.74753 0-1.495061.5630075-1.495061 1.5013532s.747531 1.5013531 1.495061 1.5013531z"/><g transform="translate(76 62)"><path d="m64.3043478 45.3435115-6.8086956-1.5114504 5.2956521 7.5572519v23.4274809l18.1565218-15.1145038v-25.6946565l-8.3217391 3.0229008z"/><path d="m12.1043475 45.3435115-6.8086956-1.5114504 5.2956521 7.5572519v23.4274809l18.1565218-15.1145038v-25.6946565l-8.3217391 3.0229008z" transform="matrix(-1 0 0 1 34.043478 0)"/><path d="m25.7217391 78.6405041v-3.0227973l10.326011 7.3764269-.0015458-3.0241085-10.3244652-7.3753227v-3.0227973l10.326011 7.3764269-.0015458-3.0241084-10.3244652-7.3753227v-13.6481376l6.0521739-9.0687023 3.7826087 2.2671755h15.1304348l3.7826087-2.2671755 6.0521739 9.0687023v13.4909902l-10.5444506 7.5324701-.0015457 3.0241084 10.5459963-7.5335743v3.0227973l-10.5444506 7.5324701-.0015457 3.0241085 10.5459963-7.5335744v3.0227973l-10.5444506 7.5324701-.0015457 3.0241085 10.5459963-7.5335744v5.4020361l-4.5391304 6.8015268-5.2956522 5.2900763h-15.1304348l-5.2956521-5.2900763-4.5391305-6.8015268v-5.2448886l10.326011 7.3764269-.0015458-3.0241085z"/><path d="m62.7913043 89.1755725 9.8347827-9.8244275v-9.8244274l-9.8347827 8.3129771z"/><path d="m13.6173921 89.1755725 9.8347826-9.8244275v-9.8244274l-9.8347826 8.3129771z" transform="matrix(-1 0 0 1 37.069566 0)"/><path d="m38.5826087 0h3.026087v43.0763359h-4.5391305l-9.8347826-28.7175573 6.0521739-14.3587786h2.2695652v17.3816794l3.026087 1.5114504zm6.0521739 0h3.026087v18.8931298l3.0260869-1.5114504v-17.3816794h2.2695652l6.052174 14.3587786-9.0782609 28.7175573h-5.2956522z"/><path d="m37.0695652 43.0763359-32.53043477-12.0916031-4.53913043-18.8931297 27.9913043 2.2671755 9.8347827 28.7175573z"/><path d="m86.2434793 43.0763359-32.5304348-12.0916031-4.5391305-18.8931297 28.7478261 2.2671755 9.0782609 28.7175573z" transform="matrix(-1 0 0 1 136.173914 0)"/><path d="m60.5217391 12.0916031 15.8869566-1.5114504-10.5913044-10.5801527h-10.5913043z"/><path d="m15.1304349 12.0916031 15.8869565-1.5114504-10.5913043-10.5801527h-10.5913044z" transform="matrix(-1 0 0 1 40.852174 0)"/></g></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-pro.svg b/public/showcase/resources/images/home/icon-pro.svg
deleted file mode 100644
index e6e14ac06c..0000000000
--- a/public/showcase/resources/images/home/icon-pro.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="227" viewBox="0 0 239 227" width="239" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="m21.6783851 115.917877c.7475305 0 1.495061-.563008 1.495061-1.501353v-18.7669147c0-.7506766-.5606479-1.5013532-1.495061-1.5013532-.9344132 0-1.4950611.5630075-1.4950611 1.5013532v18.9545837c.1868827.750676.7475305 1.313684 1.4950611 1.313684z" fill="#222"/><path d="m20.3702067 130.180732c0 .750676.5606478 1.501353 1.495061 1.501353.9344131 0 1.495061-.563007 1.495061-1.501353v-6.756089c0-.750677-.5606479-1.501354-1.495061-1.501354-.9344132 0-1.495061.563008-1.495061 1.501354z" fill="#222"/><path d="m60.1762068 30.5284162c0 3.9410521 3.1770047 7.1314275 7.1015399 7.1314275 3.9245353 0 7.10154-3.1903754 7.10154-7.1314275 0-3.941052-3.1770047-7.1314274-7.10154-7.1314274-3.9245352 0-7.1015399 3.1903754-7.1015399 7.1314274zm11.3998404 0c0 2.4396989-1.8688263 4.3163904-4.2983005 4.3163904-2.4294741 0-4.2983004-1.8766915-4.2983004-4.3163904 0-2.4396988 1.8688263-4.3163903 4.2983004-4.3163903 2.4294742 0 4.2983005 2.0643606 4.2983005 4.3163903z" fill="#222"/><path d="m134.742376 210.878464c-3.55077 0-6.540892 3.002706-6.540892 6.56842s2.990122 6.56842 6.540892 6.56842 6.540892-3.002706 6.540892-6.56842-2.990122-6.56842-6.540892-6.56842zm0 10.509472c-2.055709 0-3.737652-1.689022-3.737652-3.753383s1.681943-3.753383 3.737652-3.753383 3.737653 1.689022 3.737653 3.753383-1.681944 3.753383-3.737653 3.753383z" fill="#222"/><g fill="#03c4e8"><path d="m206.131541 214.444178c0-.750677-.560648-1.501354-1.495061-1.501354h-23.360329c-.747531 0-1.495061.563008-1.495061 1.501354 0 .750676.560648 1.501353 1.495061 1.501353h23.360329c.934413-.187669 1.495061-.750677 1.495061-1.501353z"/><path d="m219.960855 212.942824h-7.662187c-.747531 0-1.495062.563008-1.495062 1.501354 0 .750676.560648 1.501353 1.495062 1.501353h7.662187c.747531 0 1.495061-.563008 1.495061-1.501353 0-.938346-.560648-1.501354-1.495061-1.501354z"/><path d="m219.960855 221.012598h-16.258788c-.747531 0-1.495061.563007-1.495061 1.501353 0 .750676.560647 1.501353 1.495061 1.501353h16.258788c.747531 0 1.495061-.563007 1.495061-1.501353s-.560648-1.501353-1.495061-1.501353z"/><path d="m196.600527 221.012598h-5.232714c-.747531 0-1.495061.563007-1.495061 1.501353 0 .750676.560648 1.501353 1.495061 1.501353h5.232714c.74753 0 1.495061-.563007 1.495061-1.501353s-.560648-1.501353-1.495061-1.501353z"/><path d="m58 9.50135315c0 .75067655.5606479 1.50135315 1.495061 1.50135315h23.3603288c.7475305 0 1.495061-.5630074 1.495061-1.50135315 0-.75067657-.5606479-1.50135315-1.495061-1.50135315h-23.5472114c-.7475305.18766914-1.3081784.75067658-1.3081784 1.50135315z"/><path d="m44.495061 11.0027063h7.6621879c.7475305 0 1.495061-.5630074 1.495061-1.50135315 0-.75067657-.5606479-1.50135315-1.495061-1.50135315h-7.6621879c-.7475305 0-1.495061.56300743-1.495061 1.50135315 0 .93834575.7475305 1.50135315 1.495061 1.50135315z"/><path d="m44.495061 2.81503716h16.2587888c.7475306 0 1.4950611-.56300743 1.4950611-1.50135315s-.7475305-1.31368401-1.4950611-1.31368401h-16.2587888c-.7475305 0-1.495061.56300743-1.495061 1.50135315 0 .93834573.7475305 1.31368401 1.495061 1.31368401z"/><path d="m67.495061 2.81503716h5.2327137c.7475305 0 1.495061-.56300743 1.495061-1.50135315s-.7475305-1.31368401-1.495061-1.31368401h-5.2327137c-.7475305 0-1.495061.56300743-1.495061 1.50135315 0 .93834573.7475305 1.31368401 1.495061 1.31368401z"/><path d="m41.1141786 161.146141h-23.5472114c-.7475305 0-1.495061.563007-1.495061 1.501353 0 .750676.5606479 1.501353 1.495061 1.501353h23.5472114c.7475305 0 1.495061-.563007 1.495061-1.501353-.1868826-.750677-.7475305-1.501353-1.495061-1.501353z"/><path d="m9.90477938 161.146141h-7.47530519c-.74753052 0-1.49506104.563007-1.49506104 1.501353 0 .750676.56064789 1.501353 1.49506104 1.501353h7.66218781c.7475305 0 1.4950611-.563007 1.4950611-1.501353-.1868827-.750677-.9344132-1.501353-1.68194372-1.501353z"/><path d="m2.42947419 155.891405h16.25878881c.7475305 0 1.495061-.563008 1.495061-1.501354 0-.750676-.5606479-1.501353-1.495061-1.501353h-16.25878881c-.74753052 0-1.49506104.563008-1.49506104 1.501353 0 .938346.56064789 1.501354 1.49506104 1.501354z"/><path d="m31.0225166 155.891405c.7475305 0 1.495061-.563008 1.495061-1.501354 0-.750676-.5606479-1.501353-1.495061-1.501353h-5.2327137c-.7475305 0-1.495061.563008-1.495061 1.501353 0 .750677.5606479 1.501354 1.495061 1.501354z"/></g><g fill="#222"><path d="m134.742376 13.6381933c.186883.1876691.560648.3753382.934413.3753382.373766 0 .747531-.1876691.934413-.3753382.560648-.5630075.560648-1.5013532 0-2.0643606l-3.177004-3.19037549c-.560648-.56300743-1.495061-.56300743-2.055709 0-.560648.56300744-.560648 1.50135316 0 2.06436059z"/><path d="m144.647156 23.772327c.186882.1876692.560647.3753383.934413.3753383.373765 0 .74753-.1876691.934413-.3753383.560648-.5630074.560648-1.5013531 0-2.0643605l-3.177005-3.1903755c-.560648-.5630074-1.495061-.5630074-2.055709 0s-.560648 1.5013532 0 2.0643606z"/><path d="m132.686667 24.1476653c.373765 0 .747531-.1876691.934413-.3753383l3.177005-3.1903754c.560648-.5630074.560648-1.5013532 0-2.0643606s-1.495061-.5630074-2.055709 0l-3.177005 3.1903755c-.560647.5630074-.560647 1.5013531 0 2.0643605.373766.1876692.747531.3753383 1.121296.3753383z"/><path d="m142.591447 14.0135315c.373765 0 .74753-.1876691.934413-.3753382l3.177004-3.1903755c.560648-.56300743.560648-1.50135315 0-2.06436059-.560647-.56300743-1.495061-.56300743-2.055708 0l-3.177005 3.19037549c-.560648.5630074-.560648 1.5013531 0 2.0643606.373765.3753382.74753.3753382 1.121296.3753382z"/><path d="m199.216883 76.3196874c.186883.1876692.560648.3753383.934414.3753383.373765 0 .74753-.1876691.934413-.3753383.560648-.5630074.560648-1.5013531 0-2.0643605l-3.177005-3.1903755c-.560648-.5630074-1.495061-.5630074-2.055709 0s-.560648 1.5013532 0 2.0643606z"/><path d="m206.131541 83.2634458 3.177004 3.1903754c.186883.1876692.560648.3753383.934414.3753383.373765 0 .74753-.1876691.934413-.3753383.560648-.5630074.560648-1.5013531 0-2.0643606l-3.177005-3.1903754c-.560648-.5630074-1.495061-.5630074-2.055709 0-.373765.5630074-.373765 1.5013531.186883 2.0643606z"/><path d="m196.226761 86.2661521c.186883.1876691.560648.3753383.934413.3753383.373766 0 .747531-.1876692.934414-.3753383l3.177004-3.1903755c.560648-.5630074.560648-1.5013531 0-2.0643606-.560648-.5630074-1.495061-.5630074-2.055709 0l-3.177004 3.1903755c-.373766.5630074-.373766 1.5013532.186882 2.0643606z"/><path d="m207.252837 76.6950257c.373765 0 .74753-.1876691.934413-.3753383l3.177004-3.1903754c.560648-.5630074.560648-1.5013532 0-2.0643606s-1.495061-.5630074-2.055709 0l-3.177004 3.1903755c-.560648.5630074-.560648 1.5013531 0 2.0643605.373765.1876692.74753.3753383 1.121296.3753383z"/><path d="m49.1501317 211.253802c-.5606479-.563007-1.4950611-.563007-2.055709 0-.5606479.563008-.5606479 1.501353 0 2.064361l3.1770047 3.190375c.1868827.187669.5606479.375339.9344132.375339.3737652 0 .7475305-.18767.9344131-.375339.5606479-.563007.5606479-1.501353 0-2.06436z"/><path d="m59.2417937 221.387936c-.5606479-.563007-1.4950611-.563007-2.055709 0s-.5606479 1.501353 0 2.064361l3.1770047 3.190375c.1868827.187669.5606479.375338.9344132.375338s.7475305-.187669.9344131-.375338c.5606479-.563007.5606479-1.501353 0-2.064361z"/><path d="m50.2714274 221.387936-3.1770047 3.190375c-.5606479.563008-.5606479 1.501354 0 2.064361.1868827.187669.5606479.375338.9344132.375338.3737652 0 .7475305-.187669.9344131-.375338l3.1770047-3.190375c.5606479-.563008.5606479-1.501354 0-2.064361-.3737652-.563007-1.3081784-.563007-1.8688263 0z"/><path d="m60.3630894 211.253802-3.1770047 3.190376c-.5606479.563007-.5606479 1.501353 0 2.06436.1868827.187669.5606479.375339.9344132.375339.3737652 0 .7475305-.18767.9344131-.375339l3.1770047-3.190375c.5606479-.563008.5606479-1.501353 0-2.064361-.5606478-.563007-1.3081784-.563007-1.8688263 0z"/><path d="m42.6092396 69.18826c9.9047794-5.8177435 14.2030799-17.8285687 10.2785446-28.7133791-4.4851831-12.3861635-18.127615-18.9545836-30.4618686-14.4505241-2.9901221 1.1260148-5.6064789 2.8150371-7.8490705 4.6917286-3.5507699 3.1903754-5.98024413 7.3190966-7.28842254 12.0108252-1.12129577 4.6917286-.93441314 9.5711264.56064789 14.0751858 3.92453525 11.0724795 15.51125825 17.6408996 26.91109875 15.3888699.5606478.1876691 2.0557089.9383457 2.990122 1.5013531 2.4294742 1.5013532 3.7376526 2.0643606 4.6720658 2.0643606.1868826 0 .3737652 0 .5606479-.1876691.3737652-.1876692.7475305-.3753383.7475305-.7506766.1868826-.3753383.1868826-.7506766 0-1.1260149-.3737653-1.5013531-1.1212958-3.5657137-1.1212958-4.5040594zm-2.2425916 2.627368c-.3737652-.1876692-.7475305-.3753383-.9344131-.5630075-2.4294742-1.313684-3.55077-2.0643605-4.2983005-2.0643605h-.3737652c-10.0916621 2.0643605-20.5570893-3.7533829-23.9209767-13.5121784-1.49506101-3.9410521-1.68194364-8.2574424-.5606479-12.3861636 1.1212958-4.1287211 3.1770047-7.6944349 6.3540095-10.509472 2.0557089-1.8766915 4.2983004-3.1903755 6.9146573-4.1287212 10.8391925-3.941052 22.9865634 1.6890223 26.9110987 12.7615018 3.5507699 9.7587955-.5606479 20.4559367-9.3441315 25.5230036-.9344132.3753383-2.055709 1.1260149-.7475306 4.8793978z"/></g><path d="m45.0881034 43.5013532c0-.7506766-.5606479-1.5013532-1.495061-1.5013532h-27.0979814c-.7475305 0-1.495061.5630074-1.495061 1.5013532 0 .7506765.5606479 1.5013531 1.495061 1.5013531h27.0979814c.7475305 0 1.495061-.5630074 1.495061-1.5013531z" fill="#03c4e8"/><path d="m38.8751456 52h-17.3800846c-.7475305 0-1.495061.5630074-1.495061 1.5013532 0 .9383457.5606479 1.5013531 1.495061 1.5013531h17.3800846c.7475305 0 1.4950611-.5630074 1.4950611-1.5013531 0-.9383458-.7475306-1.5013532-1.4950611-1.5013532z" fill="#03c4e8"/><path d="m214.354376 106.346751c-.373765.187669-.74753.563007-.934413.938345-.186882.563008 0 .938346.373766 1.313684l4.485183 4.50406-.373766 5.254736-5.232713.375338-4.485183-4.504059c-.373766-.375339-.747531-.563008-1.308179-.375339-.373765.187669-.934413.375339-.934413.938346-2.055709 5.254736-.74753 11.447818 3.177005 15.38887.934413.938346 2.055709 1.689022 3.177005 2.439699 1.308178 20.643606 1.681943 42.225557.934413 64.182847 0 3.753383 2.990122 6.943758 6.914657 6.943758 3.737653 0 6.914657-3.002706 6.914657-6.943758-.74753-21.95729-.373765-43.539241.934413-64.370516v-.563008c.560648-.375338 1.121296-.938346 1.681944-1.501353 5.606479-5.630074 5.606479-14.825862 0-20.455937-4.111418-4.128721-10.091662-5.442405-15.324376-3.565713zm9.717897 90.268858c0 2.25203-1.868826 4.128721-4.111418 4.128721-2.242591 0-4.111418-1.876691-4.111418-3.941052.747531-21.394282.373766-42.600896-.934413-62.869163 1.308179.375338 2.80324.563007 4.111418.563007 1.868826 0 3.924535-.375338 5.606479-1.126015-.934413 20.268268-1.308178 41.66255-.560648 63.244502zm3.363888-68.499238c-4.485184 4.50406-11.773606 4.50406-16.258789 0-2.616357-2.627368-3.924535-6.56842-3.177005-10.134134l3.363887 3.378045c.373766.375338.747531.375338 1.121296.375338l6.914657-.563007c.747531 0 1.308179-.563008 1.308179-1.313684l.560648-6.943758c0-.375339-.186883-.750677-.373766-1.126015l-3.177004-3.190376c3.55077-.563007 7.10154.750677 9.717897 3.190376 4.485183 4.504059 4.485183 11.823156 0 16.327215z" fill="#222"/><path d="m234.350818 16.6408996h-52.514019c-2.242592 0-3.924535 1.6890223-3.924535 3.941052v28.7133791c0 2.2520297 1.681943 3.941052 3.924535 3.941052h52.514019c2.242591 0 3.924535-1.6890223 3.924535-3.941052v-28.7133791c0-2.0643606-1.681944-3.941052-3.924535-3.941052zm1.121296 32.6544311c0 .5630074-.560648 1.1260148-1.121296 1.1260148h-52.514019c-.560648 0-1.121296-.5630074-1.121296-1.1260148v-28.7133791c0-.5630074.560648-1.1260149 1.121296-1.1260149h52.514019c.560648 0 1.121296.5630075 1.121296 1.1260149z" fill="#222"/><path d="m219.400207 24.7106728c-5.606478 0-10.091662 4.5040594-10.091662 10.1341338 0 5.6300743 4.485184 10.1341337 10.091662 10.1341337 5.606479 0 10.091662-4.5040594 10.091662-10.1341337 0-5.4424052-4.672065-10.1341338-10.091662-10.1341338zm0 17.6408995c-4.111417 0-7.288422-3.3780446-7.288422-7.3190966s3.363887-7.3190966 7.288422-7.3190966c4.111418 0 7.288423 3.3780446 7.288423 7.3190966s-3.363887 7.3190966-7.288423 7.3190966z" fill="#222"/><path d="m200.711944 29.2147322h-13.829314c-.747531 0-1.495061.5630075-1.495061 1.5013532 0 .7506766.560648 1.5013531 1.495061 1.5013531h13.829314c.747531 0 1.495062-.5630074 1.495062-1.5013531-.186883-.9383457-.747531-1.5013532-1.495062-1.5013532z" fill="#03c4e8"/><path d="m200.711944 37.8475129h-13.829314c-.747531 0-1.495061.5630074-1.495061 1.5013531 0 .7506766.560648 1.5013532 1.495061 1.5013532h13.829314c.747531 0 1.495062-.5630075 1.495062-1.5013532-.186883-.7506766-.747531-1.5013531-1.495062-1.5013531z" fill="#03c4e8"/><path d="m188.190808 14.3888698h7.662188c.747531 0 1.495061-.5630074 1.495061-1.5013531s-.560648-1.5013532-1.495061-1.5013532h-7.662188c-.74753 0-1.495061.5630075-1.495061 1.5013532s.747531 1.5013531 1.495061 1.5013531z" fill="#222"/></g><g fill="#222" transform="translate(76 62)"><path d="m64.3043478 45.3435115-6.8086956-1.5114504 5.2956521 7.5572519v23.4274809l18.1565218-15.1145038v-25.6946565l-8.3217391 3.0229008z" fill-rule="nonzero"/><path d="m12.1043478 45.3435115-6.80869563-1.5114504 5.29565213 7.5572519v23.4274809l18.1565218-15.1145038v-25.6946565l-8.3217391 3.0229008z" fill-rule="nonzero" transform="matrix(-1 0 0 1 34.043478 0)"/><path d="m25.7217391 78.6405041v-3.0227973l10.326011 7.3764269-.0015458-3.0241085-10.3244652-7.3753227v-3.0227973l10.326011 7.3764269-.0015458-3.0241084-10.3244652-7.3753227v-13.6481376l6.0521739-9.0687023 3.7826087 2.2671755h15.1304348l3.7826087-2.2671755 6.0521739 9.0687023v13.4909902l-10.5444506 7.5324701-.0015457 3.0241084 10.5459963-7.5335743v3.0227973l-10.5444506 7.5324701-.0015457 3.0241085 10.5459963-7.5335744v3.0227973l-10.5444506 7.5324701-.0015457 3.0241085 10.5459963-7.5335744v5.4020361l-4.5391304 6.8015268-5.2956522 5.2900763h-15.1304348l-5.2956521-5.2900763-4.5391305-6.8015268v-5.2448886l10.326011 7.3764269-.0015458-3.0241085z"/><path d="m62.7913043 89.1755725 9.8347827-9.8244275v-9.8244274l-9.8347827 8.3129771z" fill-rule="nonzero"/><path d="m13.6173913 89.1755725 9.8347826-9.8244275v-9.8244274l-9.8347826 8.3129771z" fill-rule="nonzero" transform="matrix(-1 0 0 1 37.069566 0)"/><path d="m38.5826087 0h3.026087v43.0763359h-4.5391305l-9.8347826-28.7175573 6.0521739-14.3587786h2.2695652v17.3816794l3.026087 1.5114504zm6.0521739 0h3.026087v18.8931298l3.0260869-1.5114504v-17.3816794h2.2695652l6.052174 14.3587786-9.0782609 28.7175573h-5.2956522z"/><g fill-rule="nonzero"><path d="m37.0695652 43.0763359-32.53043477-12.0916031-4.53913043-18.8931297 27.9913043 2.2671755 9.8347827 28.7175573z"/><path d="m86.2434783 43.0763359-32.5304348-12.0916031-4.5391305-18.8931297 28.7478261 2.2671755 9.0782609 28.7175573z" transform="matrix(-1 0 0 1 136.173914 0)"/><path d="m60.5217391 12.0916031 15.8869566-1.5114504-10.5913044-10.5801527h-10.5913043z"/><path d="m15.1304348 12.0916031 15.8869565-1.5114504-10.5913043-10.5801527h-10.59130439z" transform="matrix(-1 0 0 1 40.852174 0)"/></g></g></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-productive.svg b/public/showcase/resources/images/home/icon-productive.svg
deleted file mode 100644
index d336316785..0000000000
--- a/public/showcase/resources/images/home/icon-productive.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="65" viewBox="0 0 65 65" width="65" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform=""><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><path d="m47.9338842 31.1687088-.7578209-.1312044c-.1635165-.4579191-.4129937-.8817458-.7355321-1.2495661l.2515456-.7091288c.1343422-.3622283-.0160916-.7667813-.3566216-.959042l-.6718497-.3779938c-.3401959-.1944231-.7737919-.1191199-1.0252872.1780632l-.4935388.5748004c-.4861839-.0887374-.9848803-.0887374-1.4710642 0l-.4935389-.5779243c-.2521952-.2959994-.6848479-.3711389-1.0252871-.1780632l-.6718497.3811177c-.3394772.1931278-.4895892.5968154-.3566216.959042l.2642821.7091288c-.3227854.3676483-.5722908.7915232-.7355321 1.2495661l-.7578209.1312044c-.3864946.0666941-.6684185.3959717-.6686656.7809789v.7591114c.0002471.3850071.282171.7142847.6686656.7809788l.7578209.1312044c.1633791.4579809.4128704.8818317.7355321 1.2495662l-.2515456.7185005c-.1343423.3622282.0160916.7667813.3566216.959042l.6718497.3779937c.3404392.1930757.7730919.1179363 1.0252871-.1780631l.4935389-.5779244c.4862039.0885236.9848602.0885236 1.4710642 0l.4935388.5779244c.2521953.2959994.684848.3711388 1.0252872.1780631l.6718496-.3811176c.3341906-.1959098.4786987-.5976074.3438852-.9559181l-.2642821-.7091288c.3225384-.3678203.5720156-.7916471.7355321-1.2495661l.7578209-.1312045c.3864946-.066694.6684184-.3959716.6686656-.7809788v-.7684831c.0008816-.381084-.2744983-.7089638-.6559291-.7809789zm-4.5119003 2.4991323c-.7478911-.0017305-1.3532416-.597041-1.3532367-1.3307928.0000048-.7337518.605363-1.3290546 1.3532541-1.3307757s1.3560892.590789 1.3596025 1.3245327c-.0008435.3537757-.1448983.6927329-.4004739.9423042-.2555755.2495714-.6017362.3893132-.9623301.3884837zm-.7005068-12.4956613-.3884628-.6497743c-.1959661-.3340912-.608316-.4816806-.9775254-.3498786l-.7132432.259285c-.3746459-.3168037-.8067146-.5616054-1.2736486-.7216244l-.1337332-.7434919c-.0680766-.3899036-.4184794-.6710548-.8215033-.6591461h-.7610051c-.3924273.0002425-.7280509.2768356-.7960304.6560222l-.1337331.7434919c-.4669023.1600869-.8989587.4048816-1.2736487.7216244l-.7227956-.259285c-.3692093-.131802-.7815593.0157874-.9775253.3498785l-.3852787.6591462c-.1967968.334002-.1202092.758474.1814949 1.0059007l.5890625.4842069c-.0907699.4780119-.0907699.9683608 0 1.4463728l-.5890625.4842068c-.2971822.2441775-.3759867.6608891-.1878632.9934051l.3884629.6591461c.195966.3340912.6083159.4816806.9775253.3498785l.7227956-.2592849c.3748217.3165607.8068412.5613345 1.2736487.7216244l.1337331.7434919c.0679794.3791866.4036031.6557797.7960304.6560222h.7641892c.3924273-.0002425.7280509-.2768356.7960304-.6560222l.1592061-.7309962c.4668074-.1602899.8988269-.4050637 1.2736486-.7216245l.7227956.259285c.3692094.1318021.7815593-.0157873.9775253-.3498785l.3789105-.6716418c.1925977-.3282146.1219281-.7442148-.1687584-.9934051l-.6049831-.4842068c.0907699-.478012.0907699-.9683609 0-1.4463728l.6049831-.4842069c.2973932-.250812.3685259-.6748052.1687584-1.0059007zm-4.6838429 3.5518917c-.5494891-.0012892-1.0439005-.3276944-1.2520778-.8266084-.2081773-.4989141-.0889881-1.0717601.3018419-1.4507103.3908301-.3789502.9760797-.4891305 1.482122-.2790274s.8328918.6989769.8277338 1.2380539c-.0087204.7305921-.6148962 1.3183423-1.3596199 1.3182922zm-13.5930152 2.88025.6718497.3779937c.3404392.1930757.7730919.1179363 1.0252871-.1780632l.4903548-.5748004c.4872245.0890536.9870237.0890536 1.4742483 0l.4935388.5779244c.2521953.2959994.684848.3711388 1.0252872.1780631l.6718497-.3811176c.34053-.1922607.4909638-.5968138.3566216-.959042l-.2642821-.7091288c.3227853-.3676484.5722908-.7915232.7355321-1.2495661l.7578209-.1312045c.3864946-.0666941.6684184-.3959716.6686656-.7809788v-.7622353c-.0002472-.3850072-.282171-.7142848-.6686656-.7809789l-.7578209-.1312044c-.1632413-.4580429-.4127468-.8819178-.7355321-1.2495661l.2642821-.7122527c.1343422-.3622283-.0160916-.7667813-.3566216-.959042l-.6718497-.3811177c-.3404392-.1930757-.7730919-.1179362-1.0252872.1780632l-.4935388.5810482c-.4861906-.088666-.9848736-.088666-1.4710642 0l-.496723-.5810482c-.2521952-.2959994-.684848-.3711389-1.0252871-.1780632l-.6686656.3811177c-.3417334.191267-.493598.5960538-.3598057.959042l.2642821.7122527c-.3226617.3677344-.572153.7915852-.7355321 1.2495661l-.757821.1312044c-.3864945.0666941-.6684184.3959717-.6686655.7809789v.7591114c.0002471.3850071.282171.7142847.6686655.7809788l.757821.1312044c.1635164.4579191.4129936.8817459.7355321 1.2495662l-.2642821.7122527c-.1337923.3629881.0180723.7677749.3598057.959042zm2.9262078-5.5449497c.747055.0000505 1.3534437.5927184 1.3563322 1.3256424s-.5988107 1.3301747-1.3458429 1.3358929c-.7470323.0057182-1.3581569-.5822488-1.3669251-1.3151278-.0033945-.3553947.1379135-.6974234.3925711-.9501983.2546577-.252775.6016057-.3953925.9638647-.3962092zm-9.870777 12.4956612.3884628.6591461c.1959661.3340912.608316.4816806.9775253.3498786l.732348-.2874002c.3747779.3166213.8068096.561402 1.2736487.7216244l.1337331.7434918c.0679794.3791866.4036031.6557798.7960304.6560222h.7737415c.3924273-.0002424.728051-.2768356.7960304-.6560222l.1337331-.7434918c.466839-.1602224.8988708-.4050031 1.2736487-.7216244l.7227956.2592849c.3692094.1318021.7815593-.0157873.9775253-.3498785l.3852787-.6591461c.1967968-.3340021.1202093-.7584741-.1814949-1.0059007l-.5890625-.4842069c.0904477-.476991.0904477-.9662579 0-1.4432489l.5890625-.4842069c.3017042-.2474266.3782917-.6718986.1814949-1.0059007l-.3884628-.6591461c-.1959661-.3340912-.608316-.4816806-.9775253-.3498785l-.7227956.2592849c-.37469-.3167428-.8067464-.5615375-1.2736487-.7216244l-.1337331-.7434918c-.0679795-.3791866-.4036031-.6557798-.7960304-.6560223h-.7705574c-.3924273.0002425-.728051.2768357-.7960304.6560223l-.1337331.7434918c-.4669024.1600869-.8989588.4048816-1.2736487.7216244l-.7259797-.2592849c-.3692094-.1318021-.7815593.0157873-.9775254.3498785l-.3884628.6716418c-.1967968.334002-.1202092.758474.1814949 1.0059007l.5890625.4842069c-.0904476.4769909-.0904476.9662579 0 1.4432488l-.5890625.4873308c-.3017041.2474267-.3782917.6718987-.1814949 1.0059008zm4.6742905-3.5550156c.5486271 0 1.0432328.3242361 1.2531833.8215174.2099505.4972814.0938996 1.069677-.2940383 1.4502797-.387938.3806027-.9713652.4944592-1.4782305.2884785-.5068653-.2059806-.8373503-.6912342-.8373503-1.2294877.0017507-.7342612.6080233-1.3290703 1.3564358-1.3307879zm7.2311402 9.3061437v-1.7275252c-.2487705-.4186652-.4221864-.8762383-.5126436-1.3526553-.2738344-.0843457-.5221959-.5216939-.7546368-1.327664-.2133362-.737244-.2133362-1.2152031 0-1.4619924.0847054-.0985964.2064234-.1594312.3375169-.1686914-.0463063-.1455048-.0835235-.2936452-.1114443-.443596-.1399433-.5929895-.1399433-1.2095096 0-1.8024991.1782353-.7044647.5518495-1.3467378 1.0794173-1.8556057.2892162-.3141201.6176482-.5912099.9775253-.8247136.2938767-.2050535.6153608-.3690643.9552365-.4873308.2868265-.0954818.5858359-.1512089.8883699-.1655675.7742483-.0838727 1.5554987.0781828 2.2288851.4623394.4294259.2283807.7922234.5606608 1.0539443.9652899.3214363.0670092.606814.2469974.8023987.5060742.5126435.6247831.6368243 1.7119056.3916469 3.1988893-.0284971.1511447-.0667841.3003538-.1146284.4467199.1322243.0084338.2552427.069344.340701.1686914.206968.2467893.206968.7247484 0 1.4619924-.2324408.8059701-.4808023 1.2495661-.7546368 1.327664-.090901.4703958-.2643581.9217357-.5126436 1.3339118v1.7462687c-.0003546.0278974.0157838.0534741.0413936.0656022 1.9235955.9424968 3.7383553 2.0851241 5.4130068 3.4081916.443636.3577626.6997044.8923361.6973226 1.4557446v1.5619576c0 .5969506-.4932506 1.0808747-1.1017061 1.0808747h-16.3918581c-.6084554 0-1.1017061-.4839241-1.1017061-1.0808747v-1.5619576c-.0033414-.5645007.2528191-1.100414.6973227-1.4588685 1.6747874-1.3219995 3.4895438-2.4635773 5.4130067-3.4050677.0243739-.0130015.0391667-.0383995.0382095-.0656022z" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-sigma.svg b/public/showcase/resources/images/home/icon-sigma.svg
deleted file mode 100644
index da09920f58..0000000000
--- a/public/showcase/resources/images/home/icon-sigma.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="65" viewBox="0 0 65 65" width="65" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><path d="m45.2972719 23.8853119c-1.143938 0-2.3480652-.0301808-3.6124177-.0905433v.1207244c.5619344.5030206 1.0937573 1.096576 1.5954845 1.7806841.5017272.684108.9432405 1.4386276 1.3245531 2.2635815.3813127.8249538.6823445 1.7203171.9031044 2.6861167.22076.9657995.3311383 1.9919462.3311383 3.0784708 0 1.9919616-.3110662 3.85311-.9332079 5.583501-.6221417 1.7303909-1.5453059 3.2394302-2.7695202 4.527163s-2.7394077 2.3038192-4.5456256 3.0482897-3.903406 1.1167002-6.2916275 1.1167002c-2.2276687 0-4.2245129-.3671995-5.9905926-1.1016097-1.7660797-.7344101-3.2662215-1.7605567-4.5004704-3.0784708-1.2342489-1.317914-2.1774818-2.8973751-2.8297272-4.7384306-.6522453-1.8410554-.9783631-3.8681982-.9783631-6.0814889 0-3.1187279.6773215-5.8349985 2.0319849-8.1488934 1.3546635-2.3138948 3.3163873-4.0643803 5.8852305-5.251509.5619345-.2615707 1.1539637-.4929568 1.7761054-.694165.6221417-.2012083 1.3094976-.3672026 2.0620884-.4979879.7525908-.1307854 1.5854454-.231388 2.4985889-.3018109s1.9316344-.1056338 3.0555033-.1056338h14.6904986v5.8853119zm-12.4026341 0c-1.6858033 0-3.0605152.2615668-4.1241768.7847082-1.0636617.5231415-1.9216023 1.2172995-2.5738476 2.082495-.6522454.8651955-1.1188447 1.8611614-1.3998119 2.9879276s-.4214487 2.2937565-.4214487 3.501006c0 1.4285786.1856362 2.6961715.5569144 3.8028169.3712781 1.1066454.8729977 2.0372196 1.505174 2.7917505s1.3847558 1.3279658 2.2577611 1.7203219 1.8011866.5885312 2.7845719.5885312c2.1674615 0 3.8733083-.7645799 5.1175917-2.2937626 1.2442835-1.5291827 1.8664158-3.6921389 1.8664158-6.4889336 0-1.1267662-.1254299-2.1629731-.3762935-3.1086519-.2508636-.9456787-.5819985-1.8108612-.9934148-2.5955734s-.8780156-1.4889305-1.3998119-2.1126761c-.5217963-.6237455-1.0435847-1.1770599-1.565381-1.6599597z" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-templates.svg b/public/showcase/resources/images/home/icon-templates.svg
deleted file mode 100644
index 71578406b8..0000000000
--- a/public/showcase/resources/images/home/icon-templates.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="65" viewBox="0 0 65 65" width="65" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform=""><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><g fill="#fff" transform="translate(17 17)"><path d="m29.0483965 0h-27.83804665c-.66887755 0-1.21034985.5310656-1.21034985 1.18708782v22.55466848c0 .6560222.5414723 1.1870879 1.21034985 1.1870879h27.83804665c.6688776 0 1.2103499-.5310657 1.2103499-1.1870879v-22.55466848c0-.65602222-.5414723-1.18708782-1.2103499-1.18708782zm-13.6323615 23.7417563c-.6688776 0-1.2103499-.5310656-1.2103499-1.1870878s.5414723-1.1870878 1.2103499-1.1870878c.6688775 0 1.2103498.5310656 1.2103498 1.1870878s-.5414723 1.1870878-1.2103498 1.1870878zm13.6323615-3.5612634h-27.83804665v-18.39986117c0-.31239154.28666181-.59354391.60517493-.59354391h26.62769682c.3185131 0 .6051749.28115237.6051749.59354391z"/><path d="m22.0975219 28.3741756h-1.2103499c-.9873907 0-1.8155248-.8122179-1.8155248-1.7806317v-.5935439h-7.8354227v.5935439c0 .9684138-.8281341 1.7806317-1.81552479 1.7806317h-1.21034986c-.66887755 0-1.21034985.2499133-1.21034985.8746963v.2811524h16.339723v-.2811524c-.0318513-.6560222-.5733236-.8746963-1.2422011-.8746963z"/><path d="m2 2h25.417347v4.748351h-25.417347z"/><path d="m16 8h12.103499v5.935439h-12.103499z"/><path d="m2 8h12.103499v1.187088h-12.103499z"/><path d="m2 13h12.103499v1.187088h-12.103499z"/><path d="m2 11h12.103499v1.187088h-12.103499z"/><path d="m12 16h6.656924v3.561263h-6.656924z"/><path d="m2 16h8.153936v3.561263h-8.153936z"/><path d="m19 16h8.153936v1.187088h-8.153936z"/><path d="m19 18h8.153936v1.187088h-8.153936z"/></g></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/icon-themes.svg b/public/showcase/resources/images/home/icon-themes.svg
deleted file mode 100644
index 082ab3b2ef..0000000000
--- a/public/showcase/resources/images/home/icon-themes.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="65" viewBox="0 0 65 65" width="65" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform=""><path d="m39.8478261 0h-14.6956522c-13.8478261 0-25.1521739 11.3043478-25.1521739 25.1521739v14.6956522c0 13.8478261 11.3043478 25.1521739 25.1521739 25.1521739h14.6956522c13.8478261 0 25.1521739-11.3043478 25.1521739-25.1521739v-14.6956522c0-13.8478261-11.3043478-25.1521739-25.1521739-25.1521739zm23.7391304 39.8478261c0 13.0706522-10.6684782 23.7391304-23.7391304 23.7391304h-14.6956522c-13.0706522 0-23.73913042-10.6684782-23.73913042-23.7391304v-14.6956522c0-13.0706522 10.66847822-23.73913042 23.73913042-23.73913042h14.6956522c13.0706522 0 23.7391304 10.66847822 23.7391304 23.73913042zm-4.2391304-.2826087c0 10.8804348-8.9021739 19.7826087-19.7826087 19.7826087h-14.1304348c-10.8804348 0-19.78260869-8.9021739-19.78260869-19.7826087v-14.1304348c0-10.8804348 8.90217389-19.78260869 19.78260869-19.78260869h14.1304348c10.8804348 0 19.7826087 8.90217389 19.7826087 19.78260869z" fill="#222" fill-rule="nonzero"/><path d="m43.2887475 20.0391531c.3208989.0037487.6361349.0506074.940045.1536966.8116854.273655 1.4780225.9034363 1.7932584 1.696286.1264719.3186394.1906517.6541479.2038652.9952794.0811685 6.4027768.241618 12.8093024-.0037753 19.2083305-.0188764.316765-.0830562.6260326-.2000899.9203054-.2963595.745991-.9060674 1.3532801-1.6573483 1.647553-.3208989.1255814-.6587865.1874349-1.0023371.2005553-7.1484944.0899688-14.3026517.268032-21.4454831-.0018743-.3190113-.0206179-.6304719-.0824714-.9287191-.198681-.7512809-.2942729-1.3609888-.901562-1.6573483-1.647553-.126472-.3186393-.1906517-.6541478-.2038652-.9952794-.0811686-6.4027768-.241618-12.8093023.0037753-19.2083304.0188764-.316765.0830561-.6260327.2000899-.9203055.2963595-.745991.9060674-1.3532801 1.6573483-1.6475529.3208988-.1255814.6587865-.1893093 1.002337-.2024297 7.0994158-.0880944 14.1988315 0 21.2982472 0zm2.0613034 5.0270045h-25.3094831c-.0830562 5.6605345-.1849888 11.3229434.0320899 16.9797292.0132134.2136759.0566292.423603.1359101.6241583.2019775.5060743.6172584.9184311 1.1269213 1.1189865.2170787.0843457.4454832.1274557.6795506.1349531 7.123955.0899688 14.253573.268032 21.3737528-.0018743.215191-.0131205.4266067-.0543561.6285843-.1330788.5096629-.2005554.9249438-.6129122 1.1269213-1.1189865.0868315-.2174245.1283596-.4442207.1377978-.67664.0717303-5.6417911.2057528-11.2873308.067955-16.9272475zm-21.4832359 16.8991322c1.9669213-.3130163 4.8097078-.3448802 6.8370337-2.3579312.8381123-.8322111.8381123-2.1836168 0-3.0158279-.8381124-.832211-2.1991012-.832211-3.0372135 0-2.0273259 2.013051-1.6082697 4.1666783-3.7998202 5.3737591zm5.732764-6.9069767c.6550112-1.3457827 1.8404494-2.9558487 3.3920899-4.4965637 3.0542022-3.032697 6.3783371-4.6577577 7.418427-3.6268657 1.0382022 1.0327664-.5983821 4.3334953-3.6525843 7.3661923-1.5459775 1.535092-3.1599101 2.7084346-4.5133483 3.3607081-.0207641-.1461992-.052854-.2923985-.0943821-.434849-.0868314-.2886498-.215191-.5660535-.383191-.8172163-.0868314-.12933-.1849887-.2492884-.2869213-.3673724-.1094832-.1143353-.1094832-.1124609-.2227416-.2211732-.2755955-.2342936-.571955-.4311003-.9098427-.5660534-.2397303-.0974662-.4907865-.1630684-.7475056-.1968067z" fill="#fff"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/lufthansa.svg b/public/showcase/resources/images/home/lufthansa.svg
deleted file mode 100644
index a4d7d5b862..0000000000
--- a/public/showcase/resources/images/home/lufthansa.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="115" height="21" viewBox="0 0 115 21">
-    <defs>
-        <path id="a" d="M10.29 10.612V.068H.634v10.544h9.656z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#FFF" d="M57.547 6.15h.514V4.014h-1.674c-2.188 0-3.346 1.202-3.346 3.604v.267h-1.288v2.135h1.288v7.608h3.09V10.02h1.802V7.885H56.13v-.267c0-.935.514-1.468 1.416-1.468M59.735 7.885h-1.288v2.136h1.288v4.67c0 2.003.901 2.937 2.703 2.937h2.317v-2.269h-.643l-1.03-.134c-.129-.266-.257-.667-.257-1.334v-3.87h1.802V7.885h-1.802v-3.07h-3.09v3.07zM68.49 4.014h-3.091v13.614h3.09v-5.606c0-1.334.515-2.002 1.545-2.002.901 0 1.287.668 1.287 2.002v5.606h3.09v-5.606c0-1.334-.128-2.268-.386-2.802-.644-1.068-1.546-1.602-2.961-1.602-1.287 0-2.06.4-2.574 1.335V4.014zM79.689 13.49l1.93-.533v.801c0 1.335-.643 2.002-2.187 2.002-.772 0-1.287-.267-1.287-.935 0-.667.515-1.067 1.544-1.334m.515-3.87c.901 0 1.288.266 1.288.933 0 .401-.257.667-.9.801l-2.705.533c-1.802.535-2.704 1.603-2.704 3.071 0 .934.259 1.6 1.031 2.269.644.534 1.543.8 2.574.8 1.03 0 2.06-.4 3.091-1.2l.128.8h2.831l-.256-1.334V11.22c0-2.535-1.416-3.736-4.378-3.736-2.96 0-4.506 1.2-4.506 3.47h2.833c0-.801.514-1.335 1.673-1.335M88.444 7.885h-2.832v9.743H88.7v-5.606c0-1.334.515-2.001 1.546-2.001.9 0 1.416.667 1.416 2.001v5.606h3.09v-5.606a7.704 7.704 0 0 0-.516-2.803c-.643-1.067-1.545-1.601-2.962-1.601-1.028 0-2.06.4-2.703 1.335l-.128-1.068zM98.871 10.42c0-.534.388-.8 1.16-.8.9 0 1.287.4 1.415 1.335h2.962l-.516-1.736c-.515-1.2-1.802-1.735-3.733-1.735-3.09 0-4.507 1.068-4.507 3.337 0 1.468 1.032 2.402 3.22 2.937h.9c1.158.266 1.802.667 1.802 1.201s-.514.8-1.544.8-1.674-.4-1.674-1.201v-.133h-2.96c0 2.402 1.544 3.603 4.891 3.603 2.834 0 4.377-1.067 4.377-3.337 0-1.6-1.159-2.669-3.346-3.069l-1.03-.267c-.901-.133-1.417-.4-1.417-.934"/>
-        <g transform="translate(104.545 7.417)">
-            <mask id="b" fill="#fff">
-                <use xlink:href="#a"/>
-            </mask>
-            <path fill="#FFF" d="M5.14 6.074l1.932-.534v.802c0 1.334-.644 2.001-2.19 2.001-.772 0-1.286-.267-1.286-.935 0-.667.514-1.066 1.544-1.334m.516-3.87c.9 0 1.288.266 1.288.933 0 .401-.26.668-.903.802l-2.704.533C1.535 5.006.634 6.074.634 7.542c0 .934.257 1.601 1.03 2.27.644.533 1.545.8 2.575.8 1.03 0 2.06-.4 3.09-1.201l.129.8h2.832l-.258-1.334V3.805c0-2.536-1.417-3.737-4.376-3.737-2.834 0-4.377 1.201-4.506 3.47h2.832c0-.801.515-1.334 1.674-1.334" mask="url(#b)"/>
-        </g>
-        <path fill="#FFF" d="M9.655 1.612c2.575 0 4.635.933 6.438 2.669 1.673 1.869 2.574 4.005 2.574 6.54 0 2.536-.9 4.672-2.574 6.54-1.803 1.736-3.863 2.67-6.309 2.67s-4.506-.934-6.307-2.67C1.803 15.493.902 13.357.902 10.821c0-2.535.9-4.671 2.575-6.54 1.801-1.736 3.861-2.67 6.178-2.67m7.08 2.003c-1.8-2.002-4.12-2.936-6.822-2.936-2.703 0-5.021.934-7.08 2.936C.901 5.616 0 8.018 0 10.821c0 2.937.902 5.205 2.832 7.207 1.932 2.002 4.249 2.937 6.952 2.937 2.704 0 5.02-.935 6.952-2.937 1.931-2.002 2.832-4.27 2.832-7.207 0-2.803-.9-5.205-2.832-7.207"/>
-        <path fill="#FFF" d="M3.218 8.552l-.128.534-1.417-.4-.128.533c1.03.268 2.317.935 3.99 1.87 2.962 1.868 6.052 3.336 9.27 4.137l.901-.801h-.643c-1.932 0-3.476-.667-4.635-2.002a9.264 9.264 0 0 1 4.377-1.068l1.03.133.386-.533h-1.158l-2.704.134.129-.401h3.99l.387-.534h-4.12l.129-.267h4.248l.258-.4-4.249-.134.13-.4 4.376.133.386-.4-3.476-.267-3.475.266c-.515 1.602-1.545 2.404-3.09 2.404-.644 0-1.416-.268-2.318-.802l-.386-.267.13-.133 2.058.8.13-.266-4.378-1.87zM35.918 4.014h-3.219v13.614h8.755v-2.67h-5.536zM51.11 7.885h-3.09v5.605c0 1.335-.515 2.003-1.545 2.003-.902 0-1.287-.668-1.287-2.003V7.885h-3.09v5.873c0 1.067.128 2.002.515 2.535.514 1.068 1.416 1.602 2.96 1.602 1.031 0 1.932-.4 2.704-1.201v.934h2.832V7.885z"/>
-    </g>
-</svg>
diff --git a/public/showcase/resources/images/home/mercedes.svg b/public/showcase/resources/images/home/mercedes.svg
deleted file mode 100644
index 7991605582..0000000000
--- a/public/showcase/resources/images/home/mercedes.svg
+++ /dev/null
@@ -1,11 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37" height="38" viewBox="0 0 37 38">
-    <defs>
-        <path id="a" d="M36.82 37.718V0H0v37.718z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <mask id="b" fill="#fff">
-            <use xlink:href="#a"/>
-        </mask>
-        <path fill="#FFF" d="M36.036 15.66c-.04-.05-.066-.125-.1-.216-1.345-4.296-2.49-5.984-4.702-8.495-2.91-3.31-7.662-5.864-12.717-5.87-9.664 0-17.502 8.123-17.502 18.13 0 2.978.625 5.545 1.127 6.837.593 1.497 1.611 3.512 1.663 3.604a.517.517 0 0 1 .055.239.698.698 0 0 1-.165-.2c-.294-.44-1.494-2.68-1.869-3.657-.811-2.13-1.414-4.453-1.414-6.892C.412 8.825 8.475.455 18.442.455c8.899 0 16.08 6.406 17.594 14.982.006.08.03.15 0 .224zM3.31 27.905c-.61-1.309-1.252-3.15-1.518-4.608-.004-.085-.017-.153.007-.23.048.059.067.124.104.225.42 1.338.78 2.537 1.734 4.345l-.327.268zm.334-.167l12.896-9.605-1.104-.65L3.95 27.376c-1.292-2.424-2.189-5.532-2.189-8.49 0-9.368 7.198-16.95 16.318-17.008l-2.352 15.148 1.098.661 1.478-15.81c.026-.198.155-.198.155 0l.089 16.672 2.618-1.594-2.505-15.08c8.96.25 16.388 7.732 16.388 16.982 0 2.981-.875 6.095-2.195 8.535l-11.476-9.903-1.106.654L32.61 27.41c.297.217.205.317-.113.135L18.642 19.27v3.101l13.888 5.496c-2.909 4.915-8.163 8.061-14.173 8.061-6.02 0-11.189-3.142-14.102-8.067l13.915-5.499V19.26L3.764 27.88c-.347.193-.436.087-.12-.143zm14.761 9.265c-6.916 0-12.342-3.724-14.926-8.843l.395-.152c.67 1.137 1.55 2.133 2.73 3.48 1.452 1.656 6.046 4.847 11.794 4.847 6.123.001 11.5-3.287 14.518-8.311.232-.067.308-.172.228-.381 1.383-2.522 2.32-5.69 2.32-8.785 0-1.952-.274-3.536-.713-4.954a20.473 20.473 0 0 0-.987-2.55.418.418 0 0 1-.066-.244.636.636 0 0 1 .166.206c.267.508.863 1.744 1.144 2.549.378 1.079 1.058 2.566 1.058 4.993 0 9.925-7.845 18.15-17.66 18.145zm0-37.003C8.244-.005.001 8.441.001 18.857 0 29.27 8.237 37.716 18.404 37.718c10.171 0 18.417-8.442 18.417-18.861 0-10.41-8.243-18.858-18.417-18.858z" mask="url(#b)"/>
-    </g>
-</svg>
diff --git a/public/showcase/resources/images/home/react-accesibility.png b/public/showcase/resources/images/home/react-accesibility.png
deleted file mode 100644
index 8c6f8cd852..0000000000
Binary files a/public/showcase/resources/images/home/react-accesibility.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-community.png b/public/showcase/resources/images/home/react-community.png
deleted file mode 100644
index c7428ae6fb..0000000000
Binary files a/public/showcase/resources/images/home/react-community.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-components.png b/public/showcase/resources/images/home/react-components.png
deleted file mode 100644
index be77a3d0dd..0000000000
Binary files a/public/showcase/resources/images/home/react-components.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-mobile.png b/public/showcase/resources/images/home/react-mobile.png
deleted file mode 100644
index 1c44524aa2..0000000000
Binary files a/public/showcase/resources/images/home/react-mobile.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-opensource.png b/public/showcase/resources/images/home/react-opensource.png
deleted file mode 100644
index d16e2129dc..0000000000
Binary files a/public/showcase/resources/images/home/react-opensource.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-pro.png b/public/showcase/resources/images/home/react-pro.png
deleted file mode 100644
index 67ce8d6ff3..0000000000
Binary files a/public/showcase/resources/images/home/react-pro.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-productivity.png b/public/showcase/resources/images/home/react-productivity.png
deleted file mode 100644
index 3edee30275..0000000000
Binary files a/public/showcase/resources/images/home/react-productivity.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-templates.png b/public/showcase/resources/images/home/react-templates.png
deleted file mode 100644
index 15f2a98a7e..0000000000
Binary files a/public/showcase/resources/images/home/react-templates.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/react-themes.png b/public/showcase/resources/images/home/react-themes.png
deleted file mode 100644
index 8e615a14e1..0000000000
Binary files a/public/showcase/resources/images/home/react-themes.png and /dev/null differ
diff --git a/public/showcase/resources/images/home/sap.svg b/public/showcase/resources/images/home/sap.svg
deleted file mode 100644
index 0200ac5578..0000000000
--- a/public/showcase/resources/images/home/sap.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="45" viewBox="0 0 90 45" width="90" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform=""><path d="m0 0v44.415h45.371l44.41-44.41h-89.781z" fill="#fff" fill-rule="nonzero"/><path d="m57.4688 39.875v3.3125h.5v-1.4375h.5624l.9063 1.4375h.5625l-.9688-1.4375c.4841-.06.875-.3415.875-.9375 0-.653-.3996-.9375-1.1874-.9375zm.5.4375h.6874c.3381 0 .7188.055.7188.4687 0 .5171-.3855.5626-.8125.5626h-.5937zm.625-1.6563c-1.586 0-2.9376 1.2221-2.9376 2.875 0 1.665 1.3515 2.9063 2.9376 2.9063 1.564 0 2.875-1.2411 2.875-2.9063 0-1.6529-1.311-2.875-2.875-2.875zm0 .4688c1.2939 0 2.3124 1.0453 2.3124 2.4062 0 1.3842-1.0185 2.4063-2.3124 2.4063-1.3161 0-2.375-1.0221-2.375-2.4063 0-1.3609 1.0589-2.4062 2.375-2.4062z" fill="#fff" fill-rule="nonzero"/><path d="m53.797 21.252h-1.946v-7.117h1.946c2.598 0 4.666.856 4.666 3.513 0 2.744-2.068 3.604-4.666 3.604m-20.945 5.088c-1.03 0-1.996-.188-2.831-.502l2.803-8.84h.06l2.745 8.864c-.827.296-1.768.478-2.774.478m20.426-17.987h-8.837v21.013l-7.72-21.013h-7.652l-6.596 17.568c-.697-4.428-5.284-5.961-8.89-7.104-2.377-.765-4.907-1.889-4.884-3.134.02-1.018 1.359-1.962 4-1.821 1.78.09 3.35.234 6.467 1.741l3.07-5.348c-2.844-1.453-6.785-2.365-10.009-2.372h-.02c-3.761 0-6.895 1.226-8.839 3.233-1.351 1.404-2.082 3.18-2.115 5.157-.05 2.708.947 4.63 3.034 6.167 1.766 1.294 4.019 2.127 6.009 2.751 2.455.757 4.459 1.418 4.436 2.827-.02.513-.211.994-.582 1.374-.611.635-1.55.87-2.849.899-2.504.05-4.361-.34-7.319-2.088l-2.729 5.423c2.949 1.679 6.44 2.661 10.003 2.661h.461c3.1-.06 5.604-.945 7.605-2.553l.324-.283-.884 2.376h8.025l1.348-4.099c1.41.477 3.016.745 4.716.745 1.659 0 3.224-.25 4.609-.706l1.296 4.06h13.094v-8.49h2.857c6.9 0 10.986-3.512 10.986-9.406 0-6.56-3.968-9.569-12.416-9.569" fill="#222"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/home/unicredit.svg b/public/showcase/resources/images/home/unicredit.svg
deleted file mode 100644
index 92646df437..0000000000
--- a/public/showcase/resources/images/home/unicredit.svg
+++ /dev/null
@@ -1,37 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="116" height="27" viewBox="0 0 116 27">
-    <defs>
-        <path id="a" d="M.153 25.65h8.632V.206H.153z"/>
-        <path id="c" d="M.073 20.25h8.922V.354H.073V20.25z"/>
-        <path id="e" d="M16.625.174H.125V27h16.5z"/>
-        <path id="g" d="M0 25.65H16.51V.206H0V25.65z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <g transform="translate(106.978)">
-            <mask id="b" fill="#fff">
-                <use xlink:href="#a"/>
-            </mask>
-            <path fill="#FFF" d="M5.877.206c-2.146 0-3.896 1.91-3.896 4.256v2.283H.153v3.616H1.98V21.1c0 2.934 1.673 4.55 4.71 4.55 1.11 0 1.912-.354 2.094-.444v-3.725c-.292.11-.77.242-1.088.242-1.22 0-1.592-.372-1.592-1.593v-9.77h2.68V6.745h-2.68V.206h-.228z" mask="url(#b)"/>
-        </g>
-        <path fill="#FFF" d="M93.741 23.953H91.98c-2.662 0-3.956-2.029-3.956-6.201 0-3.011.735-6.601 4.237-6.601a5.51 5.51 0 0 1 1.481.19v12.612zM97.744 1.35c-2.224 0-4.034 1.93-4.034 4.3v3.037a8.968 8.968 0 0 0-2.326-.284c-4.621 0-7.606 3.761-7.606 9.581 0 5.775 2.867 8.976 8.075 9.016.203 0 5.204.002 6.103-.064V1.35h-.212zM71.135 16.118c.012-3.353 1.18-5.017 3.654-5.095 1.167-.036 3.694.122 3.833 4.025l-7.487 1.07zm11.354.784c0-5.68-2.704-8.802-7.54-8.802-4.915 0-7.927 3.597-7.927 9.397 0 5.951 3.231 9.503 8.643 9.503 2.992 0 5.087-.725 6.218-1.34v-3.74c-1.122.817-2.685 1.827-5.78 1.827-2.793 0-4.327-1.504-4.7-4.574l11.086-1.548v-.723z"/>
-        <g transform="translate(58 6.75)">
-            <mask id="d" fill="#fff">
-                <use xlink:href="#c"/>
-            </mask>
-            <path fill="#FFF" d="M.073 1.871V20.25h.231c2.319 0 4.198-2.006 4.198-4.472V4.079c.92-.5 2.943-.875 4.493.282V.484C4.562.047 2.247.768.073 1.87" mask="url(#d)"/>
-        </g>
-        <g transform="translate(39.956)">
-            <mask id="f" fill="#fff">
-                <use xlink:href="#e"/>
-            </mask>
-            <path fill="#FFF" d="M.124 13.517C.124 20.217 3.848 27 10.966 27c2.365 0 4.38-.544 5.66-1.556v-4.589c-1.038 1.494-2.77 2.09-4.67 2.09-4.332 0-7.243-4.895-7.243-9.465 0-4.556 2.77-9.472 7.242-9.472 2.266 0 3.686.97 4.67 2.344V1.725C15 .661 13.076.174 11.004.174 3.86.174.124 6.886.124 13.517" mask="url(#f)"/>
-        </g>
-        <path fill="#FFF" d="M34.822 7.104V27h.256c2.553 0 4.628-2.003 4.628-4.465V7.105h-4.884zM34.8 3.39c0 1.108 1.156 2.01 2.578 2.01 1.446 0 2.578-.883 2.578-2.01 0-1.144-1.132-2.04-2.578-2.04-1.422 0-2.578.915-2.578 2.04"/>
-        <g>
-            <mask id="h" fill="#fff">
-                <use xlink:href="#g"/>
-            </mask>
-            <path fill="#FFF" d="M16.284.206c-2.253 0-4.087 1.847-4.087 4.117v14.103c0 2.3-1.947 3.542-3.779 3.542-1.873 0-3.811-1.325-3.811-3.542V.206h-.299C1.932.206 0 2.153 0 4.546v13.913c0 4.1 3.549 7.191 8.255 7.191 4.706 0 8.254-3.091 8.254-7.191V.206h-.225z" mask="url(#h)"/>
-        </g>
-        <path fill="#FFF" d="M18.044 9.47V27h4.381V11.52c.72-.277 1.365-.43 2.498-.43 2.411 0 2.917 1.495 2.917 2.749l-.003 8.943c0 2.324 1.878 4.218 4.167 4.218h.218V13.774c0-2.12-.927-5.674-7.137-5.674-2.782 0-5.158.472-7.04 1.37M100.832 7.104V27h.24c2.382 0 4.32-2.003 4.32-4.465V7.105h-4.56zM100.533 3.39c0 1.108 1.157 2.01 2.58 2.01 1.445 0 2.576-.883 2.576-2.01 0-1.144-1.131-2.04-2.577-2.04-1.422 0-2.579.915-2.579 2.04"/>
-    </g>
-</svg>
diff --git a/public/showcase/resources/images/home/verizon.svg b/public/showcase/resources/images/home/verizon.svg
deleted file mode 100644
index c2e3495e91..0000000000
--- a/public/showcase/resources/images/home/verizon.svg
+++ /dev/null
@@ -1,26 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="17" viewBox="0 0 102 17">
-    <defs>
-        <path id="a" d="M5.893 7.51V.36H.361V7.51h5.532z"/>
-        <path id="c" d="M0 .551v9.287h9.807V.551H0z"/>
-    </defs>
-    <g fill="none" fill-rule="evenodd">
-        <path fill="#FFF" d="M64.711 8.075h.058l.411 5.272h1.115l2.937-6.778h-1.057l-2.173 5.334-.352-5.334h-1.233l-2.114 5.334-.354-5.334h-1.173l.705 6.778h1.116zM71.23 5.377l.233-1.318h-1.057l-.234 1.318zM71.05 6.568h-1.055l-1.117 6.778h1.059zM73.166 9.393c.176-1.003.94-1.82 1.938-1.82h.354l.232-1.191h-.293c-.821 0-1.467.501-1.994 1.316l.175-1.13h-1l-1.173 6.778h1.116l.645-3.953zM76.336 9.393c.179-.942.94-1.82 1.763-1.946V6.445c-1.701.25-2.702 1.82-3.052 3.701-.296 1.944.527 3.388 2.288 3.388.295 0 .588 0 .764-.061v-1.006c-.118.063-.294.063-.469.063-1.176 0-1.704-.816-1.469-2.196H78.1v-.941h-1.763zm1.763 4.08v-1.006c.765-.188 1.293-.816 1.41-1.255h1.056c-.058.315-.53 1.318-1.409 1.882-.236.127-.529.314-1.057.379zm0-6.026c.118-.062.236-.062.354-.062 1.29 0 1.525 1.005 1.407 2.008H78.1v.941H80.8c.059-.377.118-.753.118-1.066v-.44c-.06-1.505-.764-2.446-2.173-2.446-.235 0-.41 0-.646.063v1.002zM85.321 9.393c.179-.942.94-1.82 1.822-1.946V6.445c-1.762.25-2.762 1.82-3.055 3.701-.351 1.944.471 3.388 2.29 3.388.293 0 .529 0 .765-.061v-1.006c-.177.063-.294.063-.472.063-1.232 0-1.7-.816-1.468-2.196h1.94v-.941h-1.822zm1.822 4.08v-1.006c.762-.188 1.29-.816 1.408-1.255h1.058c-.118.315-.529 1.318-1.468 1.882-.236.127-.529.314-.998.379zm0-6.026c.057-.062.176-.062.293-.062 1.29 0 1.527 1.005 1.408 2.008h-1.701v.941h2.7c.06-.377.06-.753.117-1.066v-.44c-.058-1.505-.762-2.446-2.23-2.446-.176 0-.411 0-.587.063v1.002zM83.97 4.06h-1.057l-1.526 9.287h1.058zM95.774 8.514c.06-.376.177-2.132-2.055-2.132-1.292 0-2.526.626-2.82 2.132-.116.941.354 1.444 1.234 1.693l1.174.315c.881.25 1.176.44 1.116.941-.118.752-.88 1.067-1.643 1.067-1.527 0-1.527-.816-1.47-1.38h-1.056c-.059.816-.176 2.383 2.35 2.383 1.468 0 2.7-.814 2.935-2.257.117-.88-.234-1.444-1.527-1.757l-.997-.314c-.822-.189-1.115-.315-1-.88.118-.879 1.058-1.003 1.411-1.003 1.35 0 1.35.753 1.29 1.192h1.058z"/>
-        <g transform="translate(95.723 6.023)">
-            <mask id="b" fill="#fff">
-                <use xlink:href="#a"/>
-            </mask>
-            <path fill="#FFF" d="M5.865 2.49C5.922 2.116 6.101.36 3.81.36c-1.233 0-2.527.626-2.76 2.132-.177.941.351 1.444 1.173 1.693l1.176.315c.88.25 1.233.44 1.115.941-.119.752-.881 1.067-1.643 1.067-1.47 0-1.47-.816-1.47-1.38H.404C.287 5.944.227 7.51 2.753 7.51c1.407 0 2.641-.815 2.876-2.257.118-.88-.235-1.444-1.469-1.757l-1.054-.314c-.764-.189-1.118-.315-1-.88C2.223 1.423 3.222 1.3 3.518 1.3c1.35 0 1.407.753 1.35 1.192h.997z" mask="url(#b)"/>
-        </g>
-        <path fill="#FFF" d="M31.71 4.06l-.412 2.698h4.286l-5.52 7.78-.352 2.385H58.31l.411-1.853-24.664-.91 5.521-7.778.411-2.323z"/>
-        <g>
-            <path fill="#FFF" d="M29.36 13.346h-3.465l1.526-9.287h3.466zM27.6 2.867l.467-2.636h3.465l-.47 2.636z"/>
-            <g transform="translate(0 3.508)">
-                <mask id="d" fill="#fff">
-                    <use xlink:href="#c"/>
-                </mask>
-                <path fill="#FFF" d="M1.466 9.838L0 .551h3.463l.53 5.836L6.517.55h3.29L5.343 9.838z" mask="url(#d)"/>
-            </g>
-            <path fill="#FFF" d="M49.384 13.346L50.91 4.06h3.172l-.234 1.505c.94-1.129 1.937-1.757 3.229-1.757 2.29 0 3.172 1.444 2.7 3.954l-.88 5.585h-3.466l.765-4.956c.174-.878.06-1.695-.881-1.695-1.057 0-1.467.69-1.703 1.882l-.764 4.77h-3.464zM18.79 13.346l1.527-9.287h3.17l-.35 1.82h.057c.704-1.38 1.704-2.072 2.995-2.072.117 0 .292.063.41.063l-.585 3.642c-.237-.066-.471-.127-.648-.127-1.408 0-2.23.753-2.584 2.762l-.528 3.2H18.79zM44.569 6.319c-.881.25-1.292 1.38-1.467 2.257-.295 1.758.233 2.575 1.115 2.575.118 0 .236-.063.352-.063v2.445c-.295.063-.587.063-.94.063-2.818 0-4.698-1.63-4.168-4.83.467-2.95 2.524-4.644 5.108-4.896V6.32zm.47-.063c-.175 0-.293 0-.47.063V3.87c.234-.063.47-.063.645-.063 3.113 0 4.7 1.946 4.228 4.77-.527 3.013-2.466 4.644-4.873 4.956v-2.445c.763-.189 1.291-1.004 1.527-2.512.233-1.38-.178-2.384-1.057-2.32zM12.33 7.635h1.586V9.52h-1.88c-.175 1.128.472 1.819 1.41 1.819.177 0 .295 0 .47-.062v2.258c-.353.062-.704.062-1.058.062-2.817 0-4.696-1.693-4.169-4.83.47-2.824 2.644-4.707 5.227-4.896v2.134c-.88.125-1.408.753-1.587 1.631zm1.586 5.899v-2.258a1.84 1.84 0 0 0 .94-.754h3.347c-.822 1.946-2.584 2.76-4.287 3.012zm0-5.899h1.586c.117-.878-.47-1.63-1.293-1.63h-.293V3.87c.176-.062.352-.062.529-.062 3.23 0 4.814 2.32 4.17 5.711h-4.7V7.635z"/>
-        </g>
-    </g>
-</svg>
diff --git a/public/showcase/resources/images/home/vw.svg b/public/showcase/resources/images/home/vw.svg
deleted file mode 100644
index 90531936cc..0000000000
--- a/public/showcase/resources/images/home/vw.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="40" viewBox="0 0 39 40" width="39" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" fill-rule="evenodd" transform=""><path d="m23.073375 5.82452069c-1.1881071-.31810345-2.4430714-.48634483-3.7091786-.48634483-1.2549643 0-2.4709285.16824138-3.6283928.46937931l3.6771428 10.29948273z"/><path d="m33.8571536 20.0694759c0-1.8365173-.3106072-3.5910345-.9151072-5.2154828l-6.8974285 18.2676207c4.6256785-2.46 7.8125357-7.3842414 7.8125357-13.0521379"/><path d="m26.6595643 7.33784483-4.2523929 11.87586207h-1.8775714-2.2271786-1.88175l-4.2677143-11.92675862c-1.5781071.91755172-2.95564281 2.12775862-4.09778567 3.55710342l6.06171427 15.9532414 2.2202143-5.8276552h1.7090357 2.4026786 1.7104286l2.2188214 5.8276552 6.1202143-16.1426897c-1.0794643-1.32472409-2.3831786-2.4501034-3.8387143-3.31675857"/><path d="m19.3647536 37.073331c-9.2945357 0-16.8911786-7.693862-16.8911786-17.1252758 0-9.4512069 7.5966429-17.15779313 16.8911786-17.15779313s16.8911785 7.70658623 16.8911785 17.15779313c0 9.4314138-7.5966428 17.1252758-16.8911785 17.1252758m0-36.78124134c-10.65396431 0-19.36489289 8.82206896-19.36489289 19.65737934 0 10.8013793 8.71092858 19.6361724 19.36489289 19.6361724 10.6651071 0 19.3467857-8.8347931 19.3467857-19.6361724 0-10.83531038-8.6816786-19.65737934-19.3467857-19.65737934" transform="translate(0 .121138)"/><path d="m19.2381429 24.0941207-3.7412143 9.8513103-.0167143.3053793c1.23825.3534483 2.5377857.5301725 3.8846786.5301725 1.2647142 0 2.4918214-.1611725 3.6590357-.4665518l-.0417857-.369z"/><path d="m4.85800714 20.0694759c0 5.5378275 3.04339286 10.3984482 7.54510716 12.8923793l-6.72192859-17.7841035c-.53903571 1.5297242-.82317857 3.1683104-.82317857 4.8917242"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/layouts/sigma-biggest.jpg b/public/showcase/resources/images/layouts/sigma-biggest.jpg
deleted file mode 100644
index 7bf76602c7..0000000000
Binary files a/public/showcase/resources/images/layouts/sigma-biggest.jpg and /dev/null differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-rhea.png b/public/showcase/resources/images/layouts/themeswitcher-rhea.png
deleted file mode 100644
index 9d048c4100..0000000000
Binary files a/public/showcase/resources/images/layouts/themeswitcher-rhea.png and /dev/null differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-sapphire.png b/public/showcase/resources/images/layouts/themeswitcher-sapphire.png
deleted file mode 100644
index 65ba93ea20..0000000000
Binary files a/public/showcase/resources/images/layouts/themeswitcher-sapphire.png and /dev/null differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-serenity.png b/public/showcase/resources/images/layouts/themeswitcher-serenity.png
deleted file mode 100644
index 7b85c580b6..0000000000
Binary files a/public/showcase/resources/images/layouts/themeswitcher-serenity.png and /dev/null differ
diff --git a/public/showcase/resources/images/layouts/themeswitcher-ultima.png b/public/showcase/resources/images/layouts/themeswitcher-ultima.png
deleted file mode 100644
index 0936d866c8..0000000000
Binary files a/public/showcase/resources/images/layouts/themeswitcher-ultima.png and /dev/null differ
diff --git a/public/showcase/resources/images/logo.png b/public/showcase/resources/images/logo.png
deleted file mode 100644
index 97a3388a99..0000000000
Binary files a/public/showcase/resources/images/logo.png and /dev/null differ
diff --git a/public/showcase/resources/images/mono/apps.svg b/public/showcase/resources/images/mono/apps.svg
deleted file mode 100644
index cb36c16c90..0000000000
--- a/public/showcase/resources/images/mono/apps.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#889597"><circle cx="20.178" cy="25.659" r="9.253"/><circle cx="43.659" cy="41.706" r="9.252"/><circle cx="43.659" cy="9.324" r="9.252"/><circle cx="67.141" cy="25.659" r="9.252"/><circle cx="43.659" cy="74.086" r="9.252"/><circle cx="20.178" cy="57.751" r="9.253"/><circle cx="67.141" cy="57.751" r="9.252"/><path d="m53.666 19.461h3.469v28.442h-3.469z" transform="matrix(.5642 .8256 -.8256 .5642 51.9487 -31.0618)"/><path d="m30.826 3.27h3.47v28.442h-3.47z" transform="matrix(.5643 .8256 -.8256 .5643 28.6277 -19.2611)"/><path d="m53.666 51.698h3.469v28.441h-3.469z" transform="matrix(.5642 .8256 -.8256 .5642 78.5641 -17.0143)"/><path d="m29.958 35.436h3.468v28.44h-3.468z" transform="matrix(.5639 .8259 -.8259 .5639 54.8315 -4.5165)"/><path d="m31.476 20.689h3.47v28.441h-3.47z" transform="matrix(.5527 -.8334 .8334 .5527 -14.2373 43.2951)"/><path d="m53.665 3.269h3.469v28.443h-3.469z" transform="matrix(.5523 -.8336 .8336 .5523 10.2223 54.0145)"/><path d="m31.476 52.782h3.47v28.441h-3.47z" transform="matrix(.5525 -.8335 .8335 .5525 -40.9857 57.6635)"/><path d="m53.666 35.361h3.469v28.443h-3.469z" transform="matrix(.5524 -.8336 .8336 .5524 -16.5326 68.3766)"/><path d="m65.407 26.801h3.471v28.443h-3.471z" transform="matrix(1 -.0034 .0034 1 -.1381 .2269)"/><path d="m18.667 26.801h3.469v28.443h-3.469z" transform="matrix(1 -.0034 .0034 1 -.1385 .0692)"/><path d="m42.437 44.891h3.471v28.442h-3.471z" transform="matrix(1 -.0028 .0028 1 -.1661 .1245)"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/button.svg b/public/showcase/resources/images/mono/button.svg
deleted file mode 100644
index 4553ba490d..0000000000
--- a/public/showcase/resources/images/mono/button.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m20.351 40.021h-3.184v4.001l3.184.021c1.08 0 1.62-.656 1.62-1.962 0-.599-.134-1.093-.4-1.48-.266-.386-.674-.58-1.22-.58z"/><path d="m21.381 37.231c.261-.288.39-.719.39-1.291 0-.573-.146-.984-.439-1.231-.294-.246-.661-.37-1.1-.37h-3.063v3.322h3.063c.504 0 .89-.144 1.149-.43z"/><path d="m58.905 38.891c-.08-.259-.207-.443-.379-.551-.308-.198-.738-.302-1.291-.31-.553-.005-.947.022-1.182.09-.23.067-.433.22-.601.461-.166.24-.277.57-.33.99-.055.42-.08.99-.08 1.711 0 .72.033 1.28.103 1.679.063.4.188.703.369.91.18.207.385.338.61.394.228.051.533.077.92.077.386 0 .677-.014.871-.041.191-.024.379-.092.56-.2.18-.104.311-.271.391-.498.172-.479.26-1.13.26-1.951s-.016-1.42-.051-1.802c-.033-.379-.09-.7-.17-.959z"/><path d="m84.522 24.263h-81.727c-1.587 0-2.874 1.286-2.874 2.874v24.268c0 1.586 1.287 2.873 2.874 2.873h81.728c1.59 0 2.875-1.287 2.875-2.873v-24.268c-.001-1.588-1.286-2.874-2.876-2.874zm-60.781 21.14c-.687.734-1.783 1.1-3.291 1.1h-6.083v-14.646h6.043c1.414 0 2.453.363 3.121 1.091.668.726 1.001 1.671 1.001 2.832 0 .748-.167 1.423-.501 2.031-.333.607-.833.97-1.5 1.091.642.119 1.175.477 1.602 1.069.428.595.641 1.336.641 2.231-.003 1.401-.345 2.466-1.033 3.201zm11.596 1.099h-2.262l-.541-1.121c-.118.068-.286.168-.5.304-.213.133-.38.235-.5.312-.12.071-.277.157-.47.258-.194.102-.378.178-.552.231-.414.134-.866.199-1.36.199-2.106 0-3.16-1.248-3.16-3.742v-7.063h2.801v7.125c0 .947.394 1.42 1.182 1.42.691 0 1.278-.127 1.76-.379.24-.133.507-.314.799-.541v-7.625h2.803zm8.101-8.501h-2.38v4.261c0 .72.072 1.221.221 1.5.146.281.373.479.679.6.801.279 1.248.42 1.341.42v1.721h-2.44c-1.734 0-2.602-1.266-2.602-3.801v-4.701h-1.721v-1.562l1.721-.58.46-2.961h2.342v2.961h2.38v2.142zm7.625 0h-2.383v4.261c0 .72.073 1.221.221 1.5.146.281.375.479.682.6.799.279 1.246.42 1.34.42v1.721h-2.44c-1.734 0-2.603-1.266-2.603-3.801v-4.701h-1.719v-1.562l1.719-.58.461-2.961h2.341v2.961h2.383zm9.834 7.462c-.688.761-1.957 1.14-3.812 1.14-1.813 0-3.082-.403-3.801-1.222-.695-.784-1.041-2.11-1.041-3.979 0-.921.053-1.691.158-2.312.106-.621.274-1.147.502-1.58.227-.435.541-.778.941-1.03.733-.468 1.812-.701 3.239-.701 1.828 0 3.092.399 3.791 1.2.701.799 1.051 2.225 1.051 4.271.002 2.049-.34 3.454-1.028 4.213zm12.055 1.039h-2.803v-7.122c0-.96-.394-1.44-1.18-1.44-.533 0-.988.07-1.359.21-.375.14-.775.376-1.201.709v7.643h-2.801v-10.623h2.24l.561 1.14c.975-.708 1.746-1.112 2.32-1.22.307-.067.653-.101 1.041-.101 2.121 0 3.182 1.24 3.182 3.722z"/><path d="m84.522 56.274h-81.727c-1.587 0-2.874-1.285-2.874-2.875v2.875c0 1.588 1.287 2.873 2.874 2.873h81.728c1.59 0 2.875-1.285 2.875-2.873v-2.875c-.001 1.59-1.286 2.875-2.876 2.875z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/charts.svg b/public/showcase/resources/images/mono/charts.svg
deleted file mode 100644
index 11240b98a2..0000000000
--- a/public/showcase/resources/images/mono/charts.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m68.851 20.514v23.34h.124l18.323 14.267c-4.269 5.511-10.935 9.074-18.447 9.074-12.892 0-23.34-10.449-23.34-23.341 0-12.891 10.449-23.34 23.34-23.34z"/><path d="m.019 36.949h11.045v30.207h-11.045z"/><path d="m14.788 16.216h11.045v50.939h-11.045z"/><path d="m29.556 27.008h11.045v40.147h-11.045z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/components.svg b/public/showcase/resources/images/mono/components.svg
deleted file mode 100644
index e6f18ea1e9..0000000000
--- a/public/showcase/resources/images/mono/components.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#889597" transform="matrix(5.34921 0 0 5.34921 -1638.26701 -1667.12454)"><path d="m314.768 326.119v-4.224l7.551-4.224v4.224z"/><path d="m314.188 326.165v-4.224l-7.551-4.224v4.224z"/><path d="m312.483 316.089c0-.654-.947-1.184-2.116-1.184s-2.116.53-2.116 1.184.947 1.183 2.116 1.183c1.168.001 2.116-.529 2.116-1.183z"/><path d="m316.428 318.151c0-.654-.947-1.184-2.116-1.184-1.168 0-2.116.53-2.116 1.184s.947 1.183 2.116 1.183c1.169.001 2.116-.529 2.116-1.183z"/><path d="m320.493 316.089c0-.654-.947-1.184-2.116-1.184-1.168 0-2.116.53-2.116 1.184s.948 1.183 2.116 1.183c1.169.001 2.116-.529 2.116-1.183z"/><path d="m314.52 312.99-1.621.906c.375-.188.87-.303 1.413-.303 1.169 0 2.116.53 2.116 1.184s-.947 1.184-2.116 1.184c-1.168 0-2.116-.53-2.116-1.184 0-.304.205-.581.541-.79l-3.468 1.939c.32-.108.695-.171 1.097-.171 1.168 0 2.116.53 2.116 1.184 0 .653-.947 1.184-2.116 1.184s-2.116-.53-2.116-1.184c0-.225.112-.435.306-.614l-1.534.858 7.496 4.193 7.496-4.193zm-.208 7.195c-1.168 0-2.116-.53-2.116-1.183 0-.654.947-1.184 2.116-1.184s2.116.53 2.116 1.184c0 .653-.947 1.183-2.116 1.183zm4.066-2.062c-1.168 0-2.116-.53-2.116-1.184s.948-1.184 2.116-1.184c1.169 0 2.116.53 2.116 1.184-.001.654-.948 1.184-2.116 1.184z"/><path d="m316.428 313.927c0-.654-.947-1.183-2.116-1.183-1.168 0-2.116.53-2.116 1.183 0 .654.947 1.184 2.116 1.184s2.116-.53 2.116-1.184z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/data.svg b/public/showcase/resources/images/mono/data.svg
deleted file mode 100644
index df24eea28e..0000000000
--- a/public/showcase/resources/images/mono/data.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><ellipse cx="43.659" cy="22.15" rx="43.616" ry="16.3"/><path d="m.043 29.25s6.548 14.195 43.616 14.195c37.067 0 43.616-14.195 43.616-14.195v8.218s-7.969 14.195-43.616 14.195c-35.646 0-43.616-13.946-43.616-13.946v-8.467z"/><path d="m.043 42.199s6.548 14.195 43.616 14.195c37.067 0 43.616-14.195 43.616-14.195v8.219s-7.969 14.193-43.616 14.193c-35.646 0-43.616-13.945-43.616-13.945v-8.467z"/><path d="m.043 55.149s6.548 14.193 43.616 14.193c37.067 0 43.616-14.193 43.616-14.193v8.219s-7.969 14.193-43.616 14.193c-35.646 0-43.616-13.945-43.616-13.945v-8.467z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/dragdrop.svg b/public/showcase/resources/images/mono/dragdrop.svg
deleted file mode 100644
index f9e8929f3a..0000000000
--- a/public/showcase/resources/images/mono/dragdrop.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m47.303 33.088h-9.331v3.109h8.293v.572h3.111v-1.608h-2.074v-2.073zm-13.478 0h-9.33v3.109h9.33zm-13.477 0h-9.331v3.109h9.331zm-13.476 0h-4.697c-1.146 0-2.074.928-2.074 2.073v1.375h3.109v-.339h3.662zm-3.662 7.594h-3.109v9.331h3.109zm0 13.479h-3.109v9.33h3.109zm0 13.477h-3.109v9.331h3.109zm-1.035 12.653-1.914.803c.178.421.488.77.878.996.002.001.007.003.01.004.002.002.005.004.007.005.005.004.01.006.015.009.012.006.022.013.035.019.003.001.005.003.008.004.002.003.005.004.007.005.005.003.013.005.018.009.002.001.005.003.007.004.005.001.008.002.01.004.002.001.005.004.007.004.002.002.005.003.01.005.002.001.005.002.007.004.002.002.005.002.007.003.005.003.008.004.01.004.002.003.005.004.007.005.002.002.005.003.01.004.002.001.005.003.007.004.002.001.005.004.01.004.002.001.005.002.007.004v.001c.002 0 .005.001.007.003.005.002.008.002.01.003.002.002.005.003.01.004.002.001.005.003.008.004.002.001.005.003.007.004.005.001.007.002.01.004.002.001.005.002.01.004.002.001.005.002.007.002v.001c.003.002.005.003.01.004.002 0 .005.002.007.003.002.001.005.002.01.004.002.001.005.002.007.004.005 0 .008.001.01.002.002.001.005.003.007.003v.001c.005 0 .007.002.01.002v.002c.002 0 .005.001.007.002h.002c.002.002.005.003.007.004.003 0 .008.001.01.003.002.001.005.002.007.002.005.002.008.003.01.004.002.001.005.003.01.003.002.001.005.002.008.004.005.001.007.001.01.002.002.001.005.003.007.004h.003.002c.002.001.005.001.005.001.002.002.002.002.005.003.002 0 .002.001.005.001h.005c0 .001.002.001.005.003l.002.001h.002l.002.001c.002 0 .005 0 .005.001.002 0 .002.002.005.002.002.001.002.001.005.001l.002.001h.002s.002.002.005.002l.002.001h.002c0 .001.002.001.002.001v.001c.002 0 .002 0 .005.002h.005c.003 0 .003.001.005.001 0 .001.002.001.005.001s.002.002.002.003h.002.002c.002 0 .002.001.005.001.003 0 .005.001.005.001.002.002.002.002.005.002.002.001.002.001.005.002h.005s.002.002.005.002l.002.001h.002l.002.001c.002 0 .002.001.005.001h.005c.002.002.002.002.005.002.002.001.002.001.005.001.002.001.002.001.005.001v.001h.005s.002 0 .002.002h.002l.002.001c.002 0 .005 0 .005.001h.005v.002h.005c.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005v.001s.003 0 .005.002h.005.002.002l.002.001h.002c0 .001.003.001.003.001.002.002.002.002.005.002h.002l.002.001h.005c.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005s.002.002.005.002c0 .001.002.001.002.001h.003l.002.001h.002.002.002.002s.002 0 .002.002h.002c.002.001.005.001.005.001.002 0 .002 0 .005.001.002 0 .002 0 .005.001h.005.005c.002 0 .002.002.005.002h.005c.002.001.002.001.005.001.002 0 .002.001.005.001h.005s.002.001.005.001l.002.002h.002.002.003.002c.002 0 .005.001.005.001h.005c.002 0 .005.001.005.001s0 0 .003 0h.002v.002h.005.005v.001h.005.005.005c.002 0 .002 0 .005.001h.005c.003 0 .003.001.005.001h.005c.002 0 .002 0 .005.002h.005c.002 0 .002 0 .005.001h.005.005.002.002.005s.002.001.005.001h.002.002.002.002l.002.002h.003.002.031.002.002l.002.001h.002.002.003.002.002s.002 0 .002.001h.002.002.002.002.005s0 0 .002 0h.002.005s0 0 .002 0h.002.005.01.002.002l.002.001h.002.002.005.005.002.005s0 0 .002 0h.002c.002.002.005.002.005.002h.004.002.002.002.002.002.005.005.002.005s0 0 .002 0h.002.005s0 0 .002 0h.005v-2.081zm6.896-1.038h-6.896v1.037 2.074h6.896zm13.478 0h-9.331v3.111h9.331zm13.476 0h-9.328v3.111h9.328zm11.278 0h-7.131v3.111h7.131v-2.074zm0 1.037v2.075h.002.004.002.002.002.006.006.004.002.004.002.006.004c.002 0 .002 0 .006-.002h.002.002.004.004.006.004.006l.002-.001h.002.004.004.006.002.002.004.002.002.002.004.004c.004 0 .004 0 .004-.001h.002.002.002.004.004c.004 0 .004 0 .006-.001h.002.002.004.002s.002 0 .002-.002h.006.004.004.002l.002-.001h.006.004.004.002.002c.002 0 .006-.001.006-.001s0 0 .002 0h.002c.004 0 .004-.002.006-.002h.002.002.004c.002-.001.002-.001.004-.001h.006v-.001h.002.002.004.002.002c.002 0 .008-.001.01-.001h.004.002l.002-.002h.006v-.001h.002.002.004.002l.002-.001h.006.004c.004 0 .004 0 .004-.002h.002.002c.002-.001.002-.001.006-.001h.002c.002 0 .002-.001.002-.001h-.005.004l.002-.001h.002.004c.002-.002.002-.002.004-.002h.002.004.002c.002-.001.006-.001.006-.001.002 0 .002-.001.004-.001h.002.004l.002-.001c.002-.002.002-.002.006-.002h.004.002l.004-.001h.002c.002 0 .002-.001.004-.001.004 0 .004 0 .006-.002h.002.004c0-.001.002-.001.002-.001.002 0 .002-.001.004-.001h.004.002s.002 0 .002-.001h.006c.002-.002.002-.002.002-.002h.002l.004-.001h.002s0 0 .002-.001h.006.004s0 0 0-.002h.004s0 0 .002-.001h.002c.004 0 .004-.001.006-.001 0-.001.002-.001.002-.001s0 0 .002 0h.004c.002 0 .002-.002.004-.002.002 0 .002 0 .002-.001h.004l.002-.001h.002s0 0 .004 0v-.002h.004.002.004l.002-.001v-.001h.006l.002-.001c.002 0 .002 0 .002-.002h.002c.004 0 .006-.001.008-.001h.004c0-.001.002-.001.002-.001s0 0 .002 0l.002-.001c.004-.002.004-.002.006-.002h.002.002l.004-.001c0-.001 0-.001 0-.001h.004v-.001h.004c0-.001 0-.001.002-.001l.002-.001h.006s.002 0 .002-.001h.002l.004-.002c.002 0 .002 0 .004-.001.002 0 .002-.001.006-.001h.002.002c0-.002 0-.002.004-.002l.004-.002h.002s0-.001.004-.001c0 0 0 0 .002-.002h.006l.002-.001c.002-.001.002-.001.004-.001s.004-.002.006-.002v-.001h.002.002s0 0 .004-.001c.002 0 .002-.001.004-.001l.004-.002s0 0 .002-.001c0 0 .002 0 .004-.001h.004s.002 0 .002-.001c.002-.002.002-.002.006-.002 0-.001.002-.001.002-.001h.002l.002-.001c.004 0 .004-.002.006-.002.002 0 .002-.001.002-.001h.004l.002-.001c.002 0 .002-.001.004-.001l.004-.002h.002c0-.001.002-.001.002-.001v-.001h.006l.002-.002c.002-.001.006-.002.008-.003h.002l.002-.002c.004 0 .006-.001.008-.002h.004l.002-.002h.004l.004-.001h.002c0-.001.002-.001.002-.001v-.002c.004 0 .004 0 .006-.001l.002-.001c.002-.002.006-.002.01-.003 0 0 0 0 0-.001l.004-.001c.002 0 .004-.002.006-.003h.004s0-.001.002-.001c.002-.001.004-.001.008-.003l.004-.002.004-.002c.002 0 .002 0 .004-.001.002 0 .002-.001.006-.001 0-.001.002-.001.002-.001v-.002h.006c.002-.001.004-.002.006-.004.004-.001.004-.001.006-.001.002-.001.006-.002.008-.004l.002-.002c.002 0 .006-.002.01-.003l.002-.002c.004 0 .006-.002.008-.003h.004c.002-.001.004-.003.006-.004l.004-.001c.002-.001.004-.003.008-.004h.004v-.001c.002-.001.006-.003.008-.004s.002 0 .006-.001c.002-.002.004-.003.006-.004l.004-.001c.002-.002.004-.003.008-.004.002-.002.004-.003.006-.004h.004s0-.001.002-.001c.002-.002.004-.003.008-.004.002-.002.002-.002.004-.003.004 0 .006-.001.008-.002 0 0 0 0 0-.002l.002-.001c.004-.001.006-.002.008-.004.006-.002.008-.004.014-.005 0 0 0 0 0-.001.002-.001.004-.001.008-.003l.004-.002c.002-.002.006-.003.008-.004l.002-.001v-.002c.004 0 .006-.001.008-.002.002-.002.002-.003.006-.003.002-.001.004-.002.006-.004.004-.001.008-.003.012-.006.004-.001.006-.004.012-.006.01-.006.02-.011.029-.017.004-.001.008-.004.01-.005.004-.002.006-.004.008-.005.004 0 .004 0 .006-.002.002-.002.004-.003.008-.003l.002-.003c.002-.003.006-.003.008-.005.002-.003.008-.004.012-.007.004-.002.006-.003.01-.006v-.001c.238-.142.445-.33.609-.555.012-.018.027-.036.039-.054.006-.007.01-.014.012-.021h.004c0-.003.002-.006.004-.008v-.003h.004c0-.004.002-.005.002-.007v-.002c.002-.001.002-.001.002-.001v.005c.002-.003.002-.005.006-.008s.002-.001.002-.003v-.001c.002-.002.002-.004.006-.006v-.001c0-.002 0-.002.002-.003 0-.003.002-.005.002-.008h.002c0-.002.004-.005.004-.007.002-.002.002-.003.002-.004.002-.002.002-.004.006-.007 0-.001 0-.002.002-.003v-.002c0-.001.002-.004.004-.005 0-.001 0-.001 0-.001s0-.003 0-.004l.004-.001v-.003c.002-.001.002-.002.002-.002v-.002c.002-.001.002-.002.002-.002v-.002c0-.001.004-.001.004-.003l.002-.003v.001c0-.001 0-.003.002-.004s0-.001 0-.003c.002-.001.002-.001.002-.001 0-.001 0-.001 0-.001s0-.001 0-.003c.004-.001.004-.001.004-.002l.002-.004c0-.001 0-.001 0-.001l.002-.002c0-.001 0-.001 0-.001s0-.003.002-.004c0 0 0 0 0-.001 0 0 0-.001 0-.003.004 0 .004-.001.004-.001s0 0 0-.001v-.002c.002-.002.002-.002.002-.002v-.001zm2.075-12.419h-3.111v9.332h3.111zm0-13.477h-3.111v9.331h3.111zm0-13.477h-3.111v9.33h3.111zm-2.075-7.829v2.073h2.074c.001-1.145-.927-2.073-2.074-2.073z"/><path d="m56.329 38.811 5.773 23 6.131-6.132 9.256 9.255 2.484-2.481 2.481-2.482-9.256-9.255 6.133-6.133z"/><path d="m85.143 1.045h-45.129c-1.146 0-2.074.929-2.074 2.074v45.13c0 1.145.928 2.072 2.074 2.072h17.068l-2.766-11.005-.842-3.359 3.359.843 23 5.773 3.547.889-2.586 2.587-4.271 4.272h8.619c1.146 0 2.074-.928 2.074-2.072v-45.129c.002-1.146-.926-2.075-2.073-2.075z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/file.svg b/public/showcase/resources/images/mono/file.svg
deleted file mode 100644
index 4cdd197f05..0000000000
--- a/public/showcase/resources/images/mono/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m19.281 79.582 60.706-23.925s1.098.102 1.596-1.993l5.582-32.994s1.097-4.187-3.19-3.19-60.805 11.962-60.805 11.962-6.197 1.371-5.784 7.475c.307 4.481 2.494 40.87 2.494 40.87s.111.992-.599 1.795z"/><path d="m15.491 74.872-2.689-40.472s0-6.58 6.579-7.876 49.815-9.792 49.815-9.792l-.599-7.402s-.896-3.587-4.934-2.99-37.157 4.934-37.157 4.934-5.68 1.271-7.474-4.561c0 0-1.198-3.288-4.413-2.842-3.214.449-11.063 1.124-11.063 1.124s-4.188.448-3.439 4.26c.746 3.813 11.737 60.856 11.737 60.856s2.192 8.548 3.637 4.761z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/input.svg b/public/showcase/resources/images/mono/input.svg
deleted file mode 100644
index 4ba5ed32a6..0000000000
--- a/public/showcase/resources/images/mono/input.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m87.232 57.611h-87.146v-31.811h87.146zm-83.329-3.818h79.512v-24.176h-79.512z"/><path d="m8.212 39.186c1.323-.524 3.092-.787 5.303-.787 1.338 0 2.366.281 3.086.841.721.562 1.081 1.524 1.081 2.89v8.076h-2.422l-.633-1.269c-.06.104-.244.261-.558.47-.312.211-.746.42-1.297.623-.555.203-1.085.307-1.593.307-1.077 0-1.906-.311-2.488-.93-.582-.617-.873-1.334-.873-2.148v-1.09c0-.931.275-1.695.83-2.293.553-.594 1.402-.89 2.553-.883 1.149.008 2.007.012 2.575.012.567 0 .851-.008.851-.021 0-.233 0-.411 0-.534 0-.125 0-.193 0-.207 0-.583-.124-.966-.371-1.146-.248-.183-.741-.272-1.482-.272-.743 0-2.264.08-4.562.239zm2.662 7.635c0 .438.094.725.283.862.189.14.466.206.83.206s.767-.076 1.211-.229c.443-.152.789-.301 1.036-.445l.394-.241v-2.116l-2.814.219c-.626.059-.938.45-.938 1.18z"/><path d="m22.526 33.075v6.132c1.091-.51 2.261-.764 3.512-.764 1.062 0 1.862.254 2.401.764.566.523.938 1.222 1.112 2.094.176.859.263 1.915.263 3.165 0 1.877-.292 3.324-.873 4.343s-1.549 1.526-2.902 1.526c-.624 0-1.258-.131-1.896-.392-.642-.263-1.171-.567-1.595-.919l-.544 1.18h-2.511v-17.129zm2.727 14.642c.51 0 .888-.252 1.136-.754.245-.502.369-1.303.369-2.398 0-1.1-.062-1.91-.186-2.436-.123-.521-.287-.867-.491-1.035-.203-.166-.479-.251-.829-.251-1.062 0-1.963.145-2.707.438v5.739c.745.463 1.646.697 2.708.697z"/><path d="m31.45 44.398c0-1.163.09-2.142.273-2.933.181-.794.45-1.398.807-1.812.356-.415.752-.71 1.189-.885.437-.173.952-.261 1.549-.261 2.138 0 3.913.226 5.322.677v1.898c-1.381-.089-2.483-.132-3.305-.132s-1.316.014-1.484.043c-.167.03-.354.103-.557.218-.203.118-.349.299-.436.548-.204.596-.307 1.443-.307 2.541 0 1.1.068 1.889.207 2.367.14.48.342.797.61.949.27.152.695.229 1.277.229 1.178 0 2.363-.051 3.557-.15l.588-.045v1.922c-.669.348-1.323.553-1.964.609-.946.088-1.766.131-2.465.131h-.13c-.555 0-.859 0-.917 0-1.15 0-2.051-.387-2.707-1.154-.736-.861-1.107-2.445-1.107-4.76z"/><path d="m44.059 33.075h1.907v17.237h-1.907z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/menu.svg b/public/showcase/resources/images/mono/menu.svg
deleted file mode 100644
index 3a91429a4c..0000000000
--- a/public/showcase/resources/images/mono/menu.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m84.43 30.728h-81.542c-1.584 0-2.867 1.283-2.867 2.868v16.291c0 1.583 1.282 2.868 2.867 2.868h81.542c1.582 0 2.865-1.285 2.865-2.868v-16.291c.001-1.585-1.283-2.868-2.865-2.868z"/><path d="m84.43 57.887c.33 0 .604.27.604.604v16.291c0 .333-.273.604-.604.604h-81.542c-.333 0-.604-.271-.604-.604v-16.29c0-.335.27-.604.604-.604h81.542m0-2.264h-81.542c-1.584 0-2.867 1.283-2.867 2.868v16.291c0 1.583 1.282 2.867 2.867 2.867h81.542c1.582 0 2.865-1.284 2.865-2.867v-16.291c.001-1.585-1.283-2.868-2.865-2.868z"/><path d="m84.43 5.76h-81.542c-1.584 0-2.867 1.283-2.867 2.868v.073 16.218.072c0 1.584 1.282 2.868 2.867 2.868h81.542c1.582 0 2.865-1.284 2.865-2.868v-.072-16.217-.074c.001-1.585-1.283-2.868-2.865-2.868zm-54.394 17.925-.913-9.297-2.243 9.297h-2.966l-2.336-9.297-.818 9.297h-2.624l1.216-13.917h3.706l2.321 9.505 2.301-9.505h3.687l1.293 13.917zm13.269-11.407h-5.495c-.469 0-.76.114-.873.342-.077.178-.115.419-.115.723v2.167l5.627.191v2.204l-5.627.171v2.168c0 .48.133.773.398.874.192.076.451.115.78.115h5.304v2.186c-.634.088-2.199.178-4.697.267l-1.235.056c-.102 0-.219 0-.351 0-.133 0-.308-.008-.522-.027-.216-.019-.475-.086-.78-.201-.305-.112-.57-.267-.798-.455-.506-.455-.763-1.159-.763-2.108v-8.291c0-1.152.345-1.944 1.028-2.375.318-.191.63-.324.941-.399.31-.076.557-.115.741-.115.186 0 1.101.023 2.747.066 1.646.046 2.878.124 3.689.238v2.203zm12.567 11.407h-2.662l-5.533-8.898v8.898h-2.68v-13.917h2.699l5.514 8.991v-8.991h2.662zm12.642-6.084c0 1.989-.291 3.436-.875 4.337-.191.313-.375.571-.559.768-.188.197-.42.368-.707.513-.283.146-.527.255-.73.325-.203.068-.475.123-.818.16-.43.052-.955.075-1.578.075h-.266c-1.52 0-2.533-.158-3.043-.475-.227-.152-.492-.376-.797-.675-.303-.297-.533-.663-.684-1.094-.379-1.064-.572-2.377-.572-3.935v-7.832h2.664v7.833c0 1.217.119 2.111.359 2.679.217.509.641.831 1.275.971.279.052.682.076 1.207.076s.967-.094 1.32-.284c.746-.405 1.123-1.553 1.123-3.441v-7.834h2.68v7.833z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/message.svg b/public/showcase/resources/images/mono/message.svg
deleted file mode 100644
index 6f14bc6bb2..0000000000
--- a/public/showcase/resources/images/mono/message.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m36.506 56.748c0 3.607 2.924 6.533 6.532 6.533h23.764l10.147 12.209 1.025-12.209c3.607 0 6.532-2.926 6.532-6.533l2.799-23.02c0-3.607-2.924-6.532-6.532-6.532h-41.469c-3.607 0-6.532 2.925-6.532 6.532z"/><path d="m33.492 57.013-.66-4.11h-5.011l-10.083 12.131-1.017-12.131h-2.221c-3.327 0-6.037-2.708-6.037-6.037l-3.62-29.915c.071-3.268 2.752-5.902 6.034-5.902h53.648c3.271 0 5.94 2.611 6.034 5.858l-1.179 7.271h4.893l1.088-6.707.03-.387c0-5.991-4.874-10.865-10.866-10.865h-53.647c-5.992 0-10.866 4.874-10.866 10.865l3.625 29.938c.071 5.154 3.751 9.453 8.623 10.478l1.651 19.692 16.176-19.46h3.459c-.023-.238-.049-.477-.054-.719z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/misc.svg b/public/showcase/resources/images/mono/misc.svg
deleted file mode 100644
index 8c31fe09e1..0000000000
--- a/public/showcase/resources/images/mono/misc.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m84.444 69.509-17.642-17.642c3.58-4.729 5.705-10.613 5.705-16.986 0-15.556-12.654-28.211-28.211-28.211-15.556 0-28.209 12.655-28.209 28.211s12.653 28.21 28.209 28.21c6.133 0 11.807-1.974 16.441-5.308l17.715 17.717c.828.827 1.914 1.241 2.996 1.241 1.086 0 2.17-.414 2.998-1.241 1.652-1.654 1.652-4.337-.002-5.991zm-59.884-34.629c0-10.883 8.852-19.737 19.736-19.737 10.883 0 19.736 8.854 19.736 19.737 0 10.884-8.854 19.736-19.736 19.736-10.884.001-19.736-8.852-19.736-19.736z"/><path d="m55.397 43.044c0 1.995-1.617 3.612-3.611 3.612h-16.255c-1.996 0-3.613-1.617-3.613-3.612v-16.256c0-1.994 1.617-3.611 3.613-3.611h16.255c1.994 0 3.611 1.617 3.611 3.611z"/><path d="m76.137 34.88c0 2.746-.416 5.394-1.15 7.904h9.83c1.336 0 2.422-1.084 2.422-2.421v-10.895c0-1.337-1.086-2.421-2.422-2.421h-9.793c.719 2.489 1.113 5.116 1.113 7.833z"/><path d="m12.454 34.88c0-2.712.393-5.331 1.109-7.816-.057-.004-.111-.017-.168-.017h-10.895c-1.338 0-2.421 1.084-2.421 2.421v10.896c0 1.337 1.083 2.421 2.421 2.421h10.895c.064 0 .125-.014.189-.019-.73-2.504-1.13-5.148-1.13-7.886z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/multimedia.svg b/public/showcase/resources/images/mono/multimedia.svg
deleted file mode 100644
index cf034dc32d..0000000000
--- a/public/showcase/resources/images/mono/multimedia.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m60.707 28.371c12.215 0 22.152 9.938 22.152 22.153s-9.938 22.151-22.152 22.151c-12.213 0-22.15-9.937-22.15-22.151-.001-12.216 9.937-22.153 22.15-22.153m0-4.43c-14.68 0-26.581 11.9-26.581 26.583 0 14.681 11.901 26.582 26.581 26.582 14.682 0 26.583-11.901 26.583-26.582 0-14.683-11.902-26.583-26.583-26.583z"/><path d="m32.536 63.923h-24.754c-1.834 0-3.324-1.491-3.324-3.323v-46.542c0-1.833 1.49-3.322 3.324-3.322h65.682c1.832 0 3.321 1.489 3.321 3.322v9.9c1.578.989 3.063 2.109 4.431 3.354v-13.254c0-4.282-3.47-7.753-7.752-7.753h-65.682c-4.283 0-7.754 3.471-7.754 7.753v46.542c0 4.282 3.472 7.753 7.754 7.753h27.424c-1.007-1.395-1.903-2.874-2.67-4.43z"/><path d="m55.576 63.988c-.94.618-2.298.013-2.298-.769v-25.22c0-.78 1.171-1.674 2.222-.889l18.757 12.201c.688.52.702 1.685.025 2.127"/><path d="m28.281 18.476c-2.846 0-4.431-1.261-4.431-1.261l.827 27.296c-2.091-.625-4.807-.346-7.38.96-4.285 2.173-6.535 6.347-5.027 9.325 1.509 2.975 6.207 3.627 10.492 1.453 3.178-1.612 5.234-4.326 5.468-6.837h.028v-27.398s1.06.02 2.483-1.344c1.661-1.59 2.562-4.592 2.562-4.592s-2.541 2.398-5.022 2.398z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/overlay.svg b/public/showcase/resources/images/mono/overlay.svg
deleted file mode 100644
index 836b57b73e..0000000000
--- a/public/showcase/resources/images/mono/overlay.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m82.989 10.083h-78.661c-2.338 0-4.235 1.897-4.235 4.235v12.248h87.132v-12.247c0-2.338-1.896-4.236-4.236-4.236zm-1.301 11.012c.516.516.516 1.349 0 1.862-.512.515-1.348.516-1.861 0l-2.77-2.769-2.77 2.769c-.516.516-1.35.515-1.863 0-.514-.514-.514-1.347 0-1.862l2.77-2.769-2.771-2.771c-.512-.516-.512-1.349 0-1.862.516-.515 1.35-.516 1.863 0l2.771 2.771 2.77-2.771c.514-.516 1.35-.515 1.861 0 .516.514.516 1.347 0 1.862l-2.77 2.771z"/><path d="m.093 30.052v39.04c0 2.338 1.897 4.235 4.235 4.235h78.661c2.34 0 4.236-1.897 4.236-4.235v-39.04zm80.197 35.705h-73.26v-28.137h73.26z"/><path d="m11.052 41.882h65.652v5.395h-65.652z"/><path d="m11.052 50.898h46.211v5.396h-46.211z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/mono/panel.svg b/public/showcase/resources/images/mono/panel.svg
deleted file mode 100644
index 780daa1c8e..0000000000
--- a/public/showcase/resources/images/mono/panel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg enable-background="new 0 0 87.318 83.411" height="83.411" viewBox="0 0 87.318 83.411" width="87.318" xmlns="http://www.w3.org/2000/svg"><g fill="#484848"><path d="m77.591 70.883c0 2.082-1.688 3.771-3.77 3.771h-70.019c-2.083 0-3.77-1.689-3.77-3.771v-48.662c0-2.081 1.687-3.77 3.77-3.77h70.021c2.082 0 3.77 1.689 3.77 3.77z"/><path d="m83.517 8.756h-70.02c-2.083 0-3.771 1.688-3.771 3.77v1.616h68.404c2.082 0 3.771 1.689 3.771 3.77v47.047h1.617c2.08 0 3.77-1.688 3.77-3.77v-48.663c-.002-2.082-1.691-3.77-3.771-3.77z"/></g></svg>
\ No newline at end of file
diff --git a/public/showcase/resources/images/news/asset-1-endofyear-2019.png b/public/showcase/resources/images/news/asset-1-endofyear-2019.png
deleted file mode 100644
index a1cd2da38d..0000000000
Binary files a/public/showcase/resources/images/news/asset-1-endofyear-2019.png and /dev/null differ
diff --git a/public/showcase/resources/images/news/topbar-easter-2020-bg.jpg b/public/showcase/resources/images/news/topbar-easter-2020-bg.jpg
deleted file mode 100644
index e7e169614d..0000000000
Binary files a/public/showcase/resources/images/news/topbar-easter-2020-bg.jpg and /dev/null differ
diff --git a/public/showcase/resources/images/news/topbar-easter-2020-text.png b/public/showcase/resources/images/news/topbar-easter-2020-text.png
deleted file mode 100644
index 54a0496ec3..0000000000
Binary files a/public/showcase/resources/images/news/topbar-easter-2020-text.png and /dev/null differ
diff --git a/public/showcase/resources/images/news/topbar-easter-2020-ultima.png b/public/showcase/resources/images/news/topbar-easter-2020-ultima.png
deleted file mode 100644
index f4a5a54803..0000000000
Binary files a/public/showcase/resources/images/news/topbar-easter-2020-ultima.png and /dev/null differ
diff --git a/public/showcase/resources/images/primereact-designer.jpg b/public/showcase/resources/images/primereact-designer.jpg
deleted file mode 100644
index f402b4b817..0000000000
Binary files a/public/showcase/resources/images/primereact-designer.jpg and /dev/null differ
diff --git a/public/showcase/resources/images/primereact-logo.png b/public/showcase/resources/images/primereact-logo.png
deleted file mode 100644
index 3ef453da19..0000000000
Binary files a/public/showcase/resources/images/primereact-logo.png and /dev/null differ
diff --git a/public/showcase/resources/images/quote.png b/public/showcase/resources/images/quote.png
deleted file mode 100644
index ed94f5eb3e..0000000000
Binary files a/public/showcase/resources/images/quote.png and /dev/null differ
diff --git a/public/showcase/resources/menu/menu.json b/public/showcase/resources/menu/menu.json
deleted file mode 100644
index 83f123a55b..0000000000
--- a/public/showcase/resources/menu/menu.json
+++ /dev/null
@@ -1,683 +0,0 @@
-{
-    "data": [
-        {
-            "name": "Input",
-            "icon": "showcase/resources/images/mono/input.svg",
-            "meta": [
-                "input"
-            ],
-            "children": [
-                {
-                    "name": "AutoComplete",
-                    "to": "/autocomplete",
-                    "meta": [
-                        "autocomplete"
-                    ]
-                },
-                {
-                    "name": "Calendar",
-                    "to": "/calendar",
-                    "meta": [
-                        "calendar",
-                        "datepicker"
-                    ],
-                    "badge": "updated"
-                },
-                {
-                    "name": "Checkbox",
-                    "to": "/checkbox",
-                    "meta": [
-                        "checkbox"
-                    ]
-                },
-                {
-                    "name": "ColorPicker",
-                    "to": "/colorpicker",
-                    "meta": [
-                        "colorpicker"
-                    ]
-                },
-                {
-                    "name": "Chips",
-                    "to": "/chips",
-                    "meta": [
-                        "chips"
-                    ]
-                },
-                {
-                    "name": "Dropdown",
-                    "to": "/dropdown",
-                    "meta": [
-                        "dropdown",
-                        "selectOneMenu"
-                    ],
-                    "badge": "updated"
-                },
-                {
-                    "name": "Editor",
-                    "to": "/editor",
-                    "meta": [
-                        "editor"
-                    ]
-                },
-                {
-                    "name": "InputMask",
-                    "to": "/inputmask",
-                    "meta": [
-                        "inputmask"
-                    ]
-                },
-                {
-                    "name": "InputGroup",
-                    "to": "/inputgroup",
-                    "meta": [
-                        "inputgroup"
-                    ]
-                },
-                {
-                    "name": "InputNumber",
-                    "to": "/inputnumber",
-                    "meta": [
-                        "inputnumber"
-                    ],
-                    "badge": "new"
-                },
-                {
-                    "name": "InputSwitch",
-                    "to": "/inputswitch",
-                    "meta": [
-                        "inputswitch"
-                    ]
-                },
-                {
-                    "name": "InputText",
-                    "to": "/inputtext",
-                    "meta": [
-                        "inputtext"
-                    ]
-                },
-                {
-                    "name": "InputTextarea",
-                    "to": "/inputtextarea",
-                    "meta": [
-                        "inputtextarea"
-                    ]
-                },
-                {
-                    "name": "KeyFilter",
-                    "to": "/keyfilter",
-                    "meta": [
-                        "keyfilter"
-                    ]
-                },
-                {
-                    "name": "Listbox",
-                    "to": "/listbox",
-                    "meta": [
-                        "listbox"
-                    ],
-                    "badge": "updated"
-                },
-                {
-                    "name": "MultiSelect",
-                    "to": "/multiselect",
-                    "meta": [
-                        "multiselect",
-                        "selectCheckboxMenu"
-                    ],
-                    "badge": "updated"
-                },
-                {
-                    "name": "Password",
-                    "to": "/password",
-                    "meta": [
-                        "password"
-                    ]
-                },
-                {
-                    "name": "RadioButton",
-                    "to": "/radiobutton",
-                    "meta": [
-                        "radiobutton"
-                    ]
-                },
-                {
-                    "name": "Rating",
-                    "to": "/rating",
-                    "meta": [
-                        "rating"
-                    ]
-                },
-                {
-                    "name": "SelectButton",
-                    "to": "/selectbutton",
-                    "meta": [
-                        "selectbutton",
-                        "selectOneButton",
-                        "selectManyButton"
-                    ],
-                    "badge": "updated"
-                },
-                {
-                    "name": "Slider",
-                    "to": "/slider",
-                    "meta": [
-                        "slider"
-                    ]
-                },
-                {
-                    "name": "Spinner",
-                    "to": "/spinner",
-                    "meta": [
-                        "spinner"
-                    ]
-                },
-                {
-                    "name": "TriStateCheckbox",
-                    "to": "/tristatecheckbox",
-                    "meta": [
-                        "tristateCheckbox"
-                    ]
-                },
-                {
-                    "name": "ToggleButton",
-                    "to": "/togglebutton",
-                    "meta": [
-                        "togglebutton"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Button",
-            "icon": "showcase/resources/images/mono/button.svg",
-            "meta": [
-                "button"
-            ],
-            "children": [
-                {
-                    "name": "Button",
-                    "to": "/button",
-                    "meta": [
-                        "button"
-                    ]
-                },
-                {
-                    "name": "SplitButton",
-                    "to": "/splitbutton",
-                    "meta": [
-                        "splitbutton"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Data",
-            "icon": "showcase/resources/images/mono/data.svg",
-            "meta": [
-                "data"
-            ],
-            "children": [
-                {
-                    "name": "Carousel",
-                    "to": "/carousel",
-                    "meta": [
-                        "carousel"
-                    ]
-                },
-                {
-                    "name": "DataView",
-                    "to": "/dataview",
-                    "meta": [
-                        "dataview"
-                    ]
-                },
-                {
-                    "name": "DataTable",
-                    "to": "/datatable",
-                    "meta": [
-                        "datatable"
-                    ],
-                    "badge": "updated"
-                },
-                {
-                    "name": "DataScroller",
-                    "to": "/datascroller",
-                    "meta": [
-                        "datascroller"
-                    ]
-                },
-                {
-                    "name": "Google Maps",
-                    "to": "/gmap",
-                    "meta": [
-                        "Google Maps",
-                        "gmap"
-                    ]
-                },
-                {
-                    "name": "FullCalendar",
-                    "to": "/fullcalendar",
-                    "meta": [
-                        "fullcalendar",
-                        "schedule"
-                    ]
-                },
-                {
-                    "name": "OrderList",
-                    "to": "/orderlist",
-                    "meta": [
-                        "orderlist"
-                    ]
-                },
-                {
-                    "name": "Org Chart",
-                    "to": "/organizationchart",
-                    "meta": [
-                        "Org Chart",
-                        "organizationchart"
-                    ]
-                },
-                {
-                    "name": "Paginator",
-                    "to": "/paginator",
-                    "meta": [
-                        "paginator"
-                    ]
-                },
-                {
-                    "name": "PickList",
-                    "to": "/picklist",
-                    "meta": [
-                        "picklist"
-                    ]
-                },
-                {
-                    "name": "Tree",
-                    "to": "/tree",
-                    "meta": [
-                        "tree"
-                    ]
-                },
-                {
-                    "name": "TreeTable",
-                    "to": "/treetable",
-                    "meta": [
-                        "treetable"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Panel",
-            "icon": "showcase/resources/images/mono/panel.svg",
-            "meta": [
-                "panel"
-            ],
-            "children": [
-                {
-                    "name": "Accordion",
-                    "to": "/accordion",
-                    "meta": [
-                        "accordion"
-                    ]
-                },
-                {
-                    "name": "Card",
-                    "to": "/card",
-                    "meta": [
-                        "card"
-                    ]
-                },
-                {
-                    "name": "Deferred",
-                    "to": "/deferredcontent",
-                    "meta": [
-                        "deferredcontent"
-                    ]
-                },
-                {
-                    "name": "Fieldset",
-                    "to": "/fieldset",
-                    "meta": [
-                        "fieldset"
-                    ]
-                },
-                {
-                    "name": "Panel",
-                    "to": "/panel",
-                    "meta": [
-                        "panel"
-                    ]
-                },
-                {
-                    "name": "FlexGrid",
-                    "to": "/flexgrid",
-                    "meta": [
-                        "flexgrid"
-                    ]
-                },
-                {
-                    "name": "ScrollPanel",
-                    "to": "/scrollPanel",
-                    "meta": [
-                        "scrollpanel"
-                    ]
-                },
-                {
-                    "name": "TabView",
-                    "to": "/tabview",
-                    "meta": [
-                        "tabview"
-                    ]
-                },
-                {
-                    "name": "Toolbar",
-                    "to": "/toolbar",
-                    "meta": [
-                        "toolbar"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Overlay",
-            "icon": "showcase/resources/images/mono/overlay.svg",
-            "meta": [
-                "overlay"
-            ],
-            "children": [
-                {
-                    "name": "Dialog",
-                    "to": "/dialog",
-                    "meta": [
-                        "dialog"
-                    ],
-                    "badge": "updated"
-                },
-                {
-                    "name": "Lightbox",
-                    "to": "/lightbox",
-                    "meta": [
-                        "lightbox"
-                    ]
-                },
-                {
-                    "name": "OverlayPanel",
-                    "to": "/overlaypanel",
-                    "meta": [
-                        "overlaypanel"
-                    ]
-                },
-                {
-                    "name": "Sidebar",
-                    "to": "/sidebar",
-                    "meta": [
-                        "sidebar"
-                    ]
-                },
-                {
-                    "name": "Tooltip",
-                    "to": "/tooltip",
-                    "meta": [
-                        "tooltip"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "File",
-            "icon": "showcase/resources/images/mono/file.svg",
-            "meta": [
-                "file"
-            ],
-            "children": [
-                {
-                    "name": "Upload",
-                    "to": "/fileupload",
-                    "meta": [
-                        "fileupload"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Menu",
-            "icon": "showcase/resources/images/mono/menu.svg",
-            "meta": [
-                "menu"
-            ],
-            "children": [
-                {
-                    "name": "MenuModel",
-                    "to": "/menumodel",
-                    "meta": [
-                        "menumodel"
-                    ]
-                },
-                {
-                    "name": "Menu",
-                    "to": "/menu",
-                    "meta": [
-                        "menu"
-                    ]
-                },
-                {
-                    "name": "TabMenu",
-                    "to": "/tabmenu",
-                    "meta": [
-                        "tabmenu"
-                    ]
-                },
-                {
-                    "name": "Breadcrumb",
-                    "to": "/breadcrumb",
-                    "meta": [
-                        "breadcrumb"
-                    ]
-                },
-                {
-                    "name": "TieredMenu",
-                    "to": "/tieredmenu",
-                    "meta": [
-                        "tieredMenu"
-                    ]
-                },
-                {
-                    "name": "Menubar",
-                    "to": "/menubar",
-                    "meta": [
-                        "menubar"
-                    ]
-                },
-                {
-                    "name": "ContextMenu",
-                    "to": "/contextmenu",
-                    "meta": [
-                        "contextmenu"
-                    ]
-                },
-                {
-                    "name": "PanelMenu",
-                    "to": "/panelmenu",
-                    "meta": [
-                        "panelmenu"
-                    ]
-                },
-                {
-                    "name": "Steps",
-                    "to": "/steps",
-                    "meta": [
-                        "steps",
-                        "wizard"
-                    ]
-                },
-                {
-                    "name": "MegaMenu",
-                    "to": "/megamenu",
-                    "meta": [
-                        "megamenu"
-                    ]
-                },
-                {
-                    "name": "SlideMenu",
-                    "to": "/slidemenu",
-                    "meta": [
-                        "slidemenu"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Chart",
-            "icon": "showcase/resources/images/mono/charts.svg",
-            "meta": [
-                "chart"
-            ],
-            "children": [
-                {
-                    "name": "ChartModel",
-                    "to": "/chartdemo",
-                    "meta": [
-                        "chartdemo",
-                        "chartmodel"
-                    ]
-                },
-                {
-                    "name": "Pie",
-                    "to": "/piechart",
-                    "meta": [
-                        "piechart"
-                    ]
-                },
-                {
-                    "name": "Doughnut",
-                    "to": "/doughnutchart",
-                    "meta": [
-                        "doughnutchart"
-                    ]
-                },
-                {
-                    "name": "Bar",
-                    "to": "/barchart",
-                    "meta": [
-                        "barchart"
-                    ]
-                },
-                {
-                    "name": "Line",
-                    "to": "/linechart",
-                    "meta": [
-                        "linechart"
-                    ]
-                },
-                {
-                    "name": "PolarArea",
-                    "to": "/polarareachart",
-                    "meta": [
-                        "polarareachart"
-                    ]
-                },
-                {
-                    "name": "Radar",
-                    "to": "/radarchart",
-                    "meta": [
-                        "radarchart"
-                    ]
-                },
-                {
-                    "name": "Combo",
-                    "to": "/combochart",
-                    "meta": [
-                        "combochart"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Messages",
-            "icon": "showcase/resources/images/mono/message.svg",
-            "meta": [
-                "message"
-            ],
-            "children": [
-                {
-                    "name": "Messages",
-                    "to": "/messages",
-                    "meta": [
-                        "messages"
-                    ]
-                },
-                {
-                    "name": "Growl",
-                    "to": "/growl",
-                    "meta": [
-                        "growl",
-                        "toast"
-                    ]
-                }
-            ]
-        },
-        {
-            "name": "Multimedia",
-            "icon": "showcase/resources/images/mono/multimedia.svg",
-            "meta": [
-                "multimedia"
-            ],
-            "children": [
-                {
-                    "name": "Galleria",
-                    "to": "/galleria",
-                    "meta": [
-                        "galleria"
-                    ],
-                    "badge": "new"
-                }
-            ]
-        },
-        {
-            "name": "Misc",
-            "icon": "showcase/resources/images/mono/misc.svg",
-            "meta": [
-                "misc"
-            ],
-            "children": [
-                {
-                    "name": "ProgressBar",
-                    "to": "/progressbar",
-                    "meta": [
-                        "progressbar"
-                    ]
-                },
-                {
-                    "name": "Captcha",
-                    "to": "/captcha",
-                    "meta": [
-                        "captcha"
-                    ]
-                },
-                {
-                    "name": "Inplace",
-                    "to": "/inplace",
-                    "meta": [
-                        "inplace"
-                    ]
-                },
-                {
-                    "name": "ProgressSpinner",
-                    "to": "/progressspinner",
-                    "meta": [
-                        "progressspinner"
-                    ]
-                },
-                {
-                    "name": "PrimeIcons",
-                    "to": "/icons",
-                    "meta": [
-                        "primeicons"
-                    ]
-                }
-            ]
-        }
-    ]
-}
diff --git a/public/showcase/resources/script/prism.js b/public/showcase/resources/script/prism.js
deleted file mode 100644
index 60dcace2f6..0000000000
--- a/public/showcase/resources/script/prism.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(){var e=/\blang(?:uage)?-(\w+)\b/i,t=0,n=_self.Prism={util:{encode:function(e){return e instanceof a?new a(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function(e){var t=n.util.type(e);switch(t){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=n.util.clone(e[r]));return a;case"Array":return e.map&&e.map(function(e){return n.util.clone(e)})}return e}},languages:{extend:function(e,t){var a=n.util.clone(n.languages[e]);for(var r in t)a[r]=t[r];return a},insertBefore:function(e,t,a,r){r=r||n.languages;var i=r[e];if(2==arguments.length){a=arguments[1];for(var l in a)a.hasOwnProperty(l)&&(i[l]=a[l]);return i}var o={};for(var s in i)if(i.hasOwnProperty(s)){if(s==t)for(var l in a)a.hasOwnProperty(l)&&(o[l]=a[l]);o[s]=i[s]}return n.languages.DFS(n.languages,function(t,n){n===r[e]&&t!=e&&(this[t]=o)}),r[e]=o},DFS:function(e,t,a,r){r=r||{};for(var i in e)e.hasOwnProperty(i)&&(t.call(e,i,e[i],a||i),"Object"!==n.util.type(e[i])||r[n.util.objId(e[i])]?"Array"!==n.util.type(e[i])||r[n.util.objId(e[i])]||(r[n.util.objId(e[i])]=!0,n.languages.DFS(e[i],t,i,r)):(r[n.util.objId(e[i])]=!0,n.languages.DFS(e[i],t,null,r)))}},plugins:{},highlightAll:function(e,t){var a={callback:t,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};n.hooks.run("before-highlightall",a);for(var r,i=a.elements||document.querySelectorAll(a.selector),l=0;r=i[l++];)n.highlightElement(r,e===!0,a.callback)},highlightElement:function(t,a,r){for(var i,l,o=t;o&&!e.test(o.className);)o=o.parentNode;o&&(i=(o.className.match(e)||[,""])[1].toLowerCase(),l=n.languages[i]),t.className=t.className.replace(e,"").replace(/\s+/g," ")+" language-"+i,o=t.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+i);var s=t.textContent,u={element:t,language:i,grammar:l,code:s};if(n.hooks.run("before-sanity-check",u),!u.code||!u.grammar)return u.code&&(u.element.textContent=u.code),n.hooks.run("complete",u),void 0;if(n.hooks.run("before-highlight",u),a&&_self.Worker){var g=new Worker(n.filename);g.onmessage=function(e){u.highlightedCode=e.data,n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},g.postMessage(JSON.stringify({language:u.language,code:u.code,immediateClose:!0}))}else u.highlightedCode=n.highlight(u.code,u.grammar,u.language),n.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(t),n.hooks.run("after-highlight",u),n.hooks.run("complete",u)},highlight:function(e,t,r){var i=n.tokenize(e,t);return a.stringify(n.util.encode(i),r)},tokenize:function(e,t){var a=n.Token,r=[e],i=t.rest;if(i){for(var l in i)t[l]=i[l];delete t.rest}e:for(var l in t)if(t.hasOwnProperty(l)&&t[l]){var o=t[l];o="Array"===n.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var u=o[s],g=u.inside,c=!!u.lookbehind,h=!!u.greedy,f=0,d=u.alias;if(h&&!u.pattern.global){var p=u.pattern.toString().match(/[imuy]*$/)[0];u.pattern=RegExp(u.pattern.source,p+"g")}u=u.pattern||u;for(var m=0,y=0;m<r.length;y+=r[m].length,++m){var v=r[m];if(r.length>e.length)break e;if(!(v instanceof a)){u.lastIndex=0;var b=u.exec(v),k=1;if(!b&&h&&m!=r.length-1){if(u.lastIndex=y,b=u.exec(e),!b)break;for(var w=b.index+(c?b[1].length:0),_=b.index+b[0].length,A=m,P=y,j=r.length;j>A&&_>P;++A)P+=r[A].length,w>=P&&(++m,y=P);if(r[m]instanceof a||r[A-1].greedy)continue;k=A-m,v=e.slice(y,P),b.index-=y}if(b){c&&(f=b[1].length);var w=b.index+f,b=b[0].slice(f),_=w+b.length,x=v.slice(0,w),O=v.slice(_),S=[m,k];x&&S.push(x);var N=new a(l,g?n.tokenize(b,g):b,d,b,h);S.push(N),O&&S.push(O),Array.prototype.splice.apply(r,S)}}}}}return r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},a=n.Token=function(e,t,n,a,r){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length,this.greedy=!!r};if(a.stringify=function(e,t,r){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(n){return a.stringify(n,t,e)}).join("");var i={type:e.type,content:a.stringify(e.content,t,r),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}n.hooks.run("wrap",i);var o=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,"&quot;")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(o?" "+o:"")+">"+i.content+"</"+i.tag+">"},!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){var t=JSON.parse(e.data),a=t.language,r=t.code,i=t.immediateClose;_self.postMessage(n.highlight(r,n.languages[a],a)),i&&_self.close()},!1),_self.Prism):_self.Prism;var r=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return r&&(n.filename=r.src,document.addEventListener&&!r.hasAttribute("data-manual")&&("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),_self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
-Prism.languages.markup={comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/i,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/[=>"']/}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
-Prism.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*?(?=\s*\{)/,string:{pattern:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{style:{pattern:/(<style[\w\W]*?>)[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}}),Prism.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:Prism.languages.css}},alias:"language-css"}},Prism.languages.markup.tag));
-Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/};
-Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*\*?|\/|~|\^|%|\.{3}/}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0}}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\\\|\\?[^\\])*?`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}}),Prism.languages.js=Prism.languages.javascript;
diff --git a/public/styles/flags.css b/public/styles/flags.css
new file mode 100755
index 0000000000..7916efb45a
--- /dev/null
+++ b/public/styles/flags.css
@@ -0,0 +1 @@
+span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(https://primefaces.org/cdn/primereact/images/flag/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}
diff --git a/public/styles/landing/themes/bootstrap4-dark-blue/theme.css b/public/styles/landing/themes/bootstrap4-dark-blue/theme.css
new file mode 100644
index 0000000000..ba3d02f888
--- /dev/null
+++ b/public/styles/landing/themes/bootstrap4-dark-blue/theme.css
@@ -0,0 +1,1686 @@
+.landing-themes * {
+  box-sizing: border-box;
+}
+.landing-themes .box.table-container {
+  background-color: #2a323d;
+}
+.landing-themes .p-component {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: normal;
+}
+.landing-themes .p-component-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
+  transition-duration: 0.15s;
+}
+.landing-themes .p-disabled, .landing-themes .p-component:disabled {
+  opacity: 0.65;
+}
+.landing-themes .p-error {
+  color: #f19ea6;
+}
+.landing-themes .p-text-secondary {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .pi {
+  font-size: 1rem;
+}
+.landing-themes .p-link {
+  font-size: 1rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  border-radius: 4px;
+}
+.landing-themes .p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+.landing-themes .p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+.landing-themes .p-calendar.p-invalid.p-component > .p-inputtext {
+  border-color: #f19ea6;
+}
+.landing-themes .p-datepicker {
+  padding: 0;
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+}
+.landing-themes .p-datepicker:not(.p-datepicker-inline) {
+  background: #2a323d;
+  border: 1px solid #3f4b5b;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+  background: #2a323d;
+}
+.landing-themes .p-datepicker .p-datepicker-header {
+  padding: 0.5rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+  margin: 0;
+  border-bottom: 1px solid #3f4b5b;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title {
+  line-height: 2rem;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select {
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datepicker table {
+  font-size: 1rem;
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker table th {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table th > span {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.landing-themes .p-datepicker table td {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table td > span {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 4px;
+  transition: box-shadow 0.15s;
+  border: 1px solid transparent;
+}
+.landing-themes .p-datepicker table td > span.p-highlight {
+  color: #151515;
+  background: #8dd0ff;
+}
+.landing-themes .p-datepicker table td > span:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span {
+  background: transparent;
+  color: #8dd0ff;
+  border-color: transparent;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span.p-highlight {
+  color: #151515;
+  background: #8dd0ff;
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar {
+  padding: 1rem 0;
+  border-top: 1px solid #3f4b5b;
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar .p-button {
+  width: auto;
+}
+.landing-themes .p-datepicker .p-timepicker {
+  border-top: 1px solid #3f4b5b;
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker .p-timepicker button {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-datepicker .p-timepicker button:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-datepicker .p-timepicker button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-datepicker .p-timepicker button:last-child {
+  margin-top: 0.2em;
+}
+.landing-themes .p-datepicker .p-timepicker span {
+  font-size: 1.25rem;
+}
+.landing-themes .p-datepicker .p-timepicker > div {
+  padding: 0 0.5rem;
+}
+.landing-themes .p-datepicker.p-datepicker-timeonly .p-timepicker {
+  border-top: 0 none;
+}
+.landing-themes .p-datepicker .p-monthpicker {
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month {
+  padding: 0.5rem;
+  transition: box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+  color: #151515;
+  background: #8dd0ff;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+  border-right: 1px solid #3f4b5b;
+  padding-right: 0;
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+  padding-left: 0;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+  padding-right: 0;
+  border-right: 0 none;
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+@media screen and (max-width: 769px) {
+  .landing-themes .p-datepicker table th, .landing-themes .p-datepicker table td {
+    padding: 0;
+  }
+}
+.landing-themes .p-checkbox {
+  width: 20px;
+  height: 20px;
+}
+.landing-themes .p-checkbox .p-checkbox-box {
+  border: 1px solid #3f4b5b;
+  background: #20262e;
+  width: 20px;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 4px;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
+  transition-duration: 0.15s;
+  color: #151515;
+  font-size: 14px;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight {
+  border-color: #8dd0ff;
+  background: #8dd0ff;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  border-color: #1dadff;
+  background: #1dadff;
+  color: #151515;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  border-color: #3f4b5b;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  border-color: #1dadff;
+  background: #1dadff;
+  color: #151515;
+}
+.landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
+  border-color: #f19ea6;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  background: #8dd0ff;
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  background: #1dadff;
+}
+.landing-themes .p-highlight .p-checkbox .p-checkbox-box {
+  border-color: #151515;
+}
+.landing-themes .p-dropdown {
+  background: #20262e;
+  border: 1px solid #3f4b5b;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-dropdown:not(.p-disabled):hover {
+  border-color: #3f4b5b;
+}
+.landing-themes .p-dropdown:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
+.landing-themes .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-dropdown .p-dropdown-label {
+  background: transparent;
+  border: 0 none;
+}
+.landing-themes .p-dropdown .p-dropdown-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-dropdown .p-dropdown-label:enabled:focus {
+  outline: 0 none;
+  box-shadow: none;
+}
+.landing-themes .p-dropdown .p-dropdown-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.landing-themes .p-dropdown .p-dropdown-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2.357rem;
+}
+.landing-themes .p-dropdown.p-invalid.p-component {
+  border-color: #f19ea6;
+}
+.landing-themes .p-dropdown-panel {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+  padding-right: 1.75rem;
+  margin-right: -1.75rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
+  padding-right: 3.5rem;
+  margin-right: -3.5rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
+  right: 2.5rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items {
+  padding: 0.5rem 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  color: #151515;
+  background: #8dd0ff;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-dropdown {
+  background: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
+  background-color: transparent;
+}
+.landing-themes .p-inputnumber.p-invalid.p-component > .p-inputtext {
+  border-color: #f19ea6;
+}
+.landing-themes .p-inputtext {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #20262e;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #3f4b5b;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  appearance: none;
+  border-radius: 4px;
+}
+.landing-themes .p-inputtext:enabled:hover {
+  border-color: #3f4b5b;
+}
+.landing-themes .p-inputtext:enabled:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
+.landing-themes .p-inputtext.p-invalid.p-component {
+  border-color: #f19ea6;
+}
+.landing-themes .p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+.landing-themes .p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+.landing-themes .p-float-label > label {
+  left: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+  transition-duration: 0.15s;
+}
+.landing-themes .p-float-label > label.p-error {
+  color: #f19ea6;
+}
+.landing-themes .p-input-icon-left > i:first-of-type,
+.landing-themes .p-input-icon-left > svg:first-of-type,
+.landing-themes .p-input-icon-left > .p-input-prefix {
+  left: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-input-icon-left > .p-inputtext {
+  padding-left: 2.5rem;
+}
+.landing-themes .p-input-icon-left.p-float-label > label {
+  left: 2.5rem;
+}
+.landing-themes .p-input-icon-right > i:last-of-type,
+.landing-themes .p-input-icon-right > svg:last-of-type,
+.landing-themes .p-input-icon-right > .p-input-suffix {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-input-icon-right > .p-inputtext {
+  padding-right: 2.5rem;
+}
+.landing-themes ::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes :-moz-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes ::-moz-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes :-ms-input-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-input-filled .p-inputtext {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:hover {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:focus {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+.landing-themes .p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+.landing-themes .p-multiselect {
+  background: #20262e;
+  border: 1px solid #3f4b5b;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-multiselect:not(.p-disabled):hover {
+  border-color: #3f4b5b;
+}
+.landing-themes .p-multiselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
+.landing-themes .p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-multiselect .p-multiselect-label {
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-multiselect .p-multiselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #8dd0ff;
+  color: #151515;
+  border-radius: 4px;
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-multiselect .p-multiselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.landing-themes .p-multiselect .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2.357rem;
+}
+.landing-themes .p-multiselect.p-invalid.p-component {
+  border-color: #f19ea6;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.75rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
+  padding: 0.5rem 0.75rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-multiselect-panel {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
+  margin: 0 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+  right: 0.75rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items {
+  padding: 0.5rem 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+  color: #151515;
+  background: #8dd0ff;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  font-weight: 600;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-multiselect {
+  background: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-radiobutton {
+  width: 20px;
+  height: 20px;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box {
+  border: 1px solid #3f4b5b;
+  background: #20262e;
+  width: 20px;
+  height: 20px;
+  color: rgba(255, 255, 255, 0.87);
+  border-radius: 50%;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+  border-color: #3f4b5b;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+  width: 12px;
+  height: 12px;
+  transition-duration: 0.15s;
+  background-color: #151515;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight {
+  border-color: #8dd0ff;
+  background: #8dd0ff;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  border-color: #1dadff;
+  background: #1dadff;
+  color: #151515;
+}
+.landing-themes .p-radiobutton.p-invalid > .p-radiobutton-box {
+  border-color: #f19ea6;
+}
+.landing-themes .p-radiobutton:focus {
+  outline: 0 none;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  background-color: #3f4b5b;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  background: #8dd0ff;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  background: #1dadff;
+}
+.landing-themes .p-highlight .p-radiobutton .p-radiobutton-box {
+  border-color: #151515;
+}
+.landing-themes .p-slider {
+  background: #3f4b5b;
+  border: 0 none;
+  border-radius: 4px;
+}
+.landing-themes .p-slider.p-slider-horizontal {
+  height: 0.286rem;
+}
+.landing-themes .p-slider.p-slider-horizontal .p-slider-handle {
+  margin-top: -0.5715rem;
+  margin-left: -0.5715rem;
+}
+.landing-themes .p-slider.p-slider-vertical {
+  width: 0.286rem;
+}
+.landing-themes .p-slider.p-slider-vertical .p-slider-handle {
+  margin-left: -0.5715rem;
+  margin-bottom: -0.5715rem;
+}
+.landing-themes .p-slider .p-slider-handle {
+  height: 1.143rem;
+  width: 1.143rem;
+  background: #8dd0ff;
+  border: 2px solid #8dd0ff;
+  border-radius: 4px;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-slider .p-slider-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-slider .p-slider-range {
+  background: #8dd0ff;
+}
+.landing-themes .p-slider:not(.p-disabled) .p-slider-handle:hover {
+  background: #56bdff;
+  border-color: #56bdff;
+}
+.landing-themes .p-button {
+  color: #151515;
+  background: #8dd0ff;
+  border: 1px solid #8dd0ff;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-button:enabled:hover, .landing-themes .p-button:not(button):not(a):not(.p-disabled):hover {
+  background: #56bdff;
+  color: #151515;
+  border-color: #56bdff;
+}
+.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active {
+  background: #1dadff;
+  color: #151515;
+  border-color: #1dadff;
+}
+.landing-themes .p-button.p-button-outlined {
+  background-color: transparent;
+  color: #8dd0ff;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(141, 208, 255, 0.04);
+  color: #8dd0ff;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(141, 208, 255, 0.16);
+  color: #8dd0ff;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-text {
+  background-color: transparent;
+  color: #8dd0ff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:hover, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(141, 208, 255, 0.04);
+  color: #8dd0ff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(141, 208, 255, 0.16);
+  color: #8dd0ff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:active, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-button .p-button-icon-left {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-right {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-bottom {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-top {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button .p-badge {
+  margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+  color: #8dd0ff;
+  background-color: #151515;
+}
+.landing-themes .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);
+}
+.landing-themes .p-button.p-button-rounded {
+  border-radius: 2rem;
+}
+.landing-themes .p-button.p-button-icon-only {
+  width: 2.357rem;
+  padding: 0.5rem 0;
+}
+.landing-themes .p-button.p-button-icon-only .p-button-icon-left,
+.landing-themes .p-button.p-button-icon-only .p-button-icon-right {
+  margin: 0;
+}
+.landing-themes .p-button.p-button-icon-only.p-button-rounded {
+  border-radius: 50%;
+  height: 2.357rem;
+}
+.landing-themes .p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+.landing-themes .p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.landing-themes .p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+.landing-themes .p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon {
+  margin: 0;
+}
+.landing-themes .p-fluid .p-button {
+  width: 100%;
+}
+.landing-themes .p-fluid .p-button-icon-only {
+  width: 2.357rem;
+}
+.landing-themes .p-fluid .p-buttonset {
+  display: flex;
+}
+.landing-themes .p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
+.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary {
+  color: #ffffff;
+  background: #6c757d;
+  border: 1px solid #6c757d;
+}
+.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover {
+  background: #5a6268;
+  color: #ffffff;
+  border-color: #5a6268;
+}
+.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5);
+}
+.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active {
+  background: #545b62;
+  color: #ffffff;
+  border-color: #4e555b;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  background-color: transparent;
+  color: #6c757d;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(108, 117, 125, 0.04);
+  color: #6c757d;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(108, 117, 125, 0.16);
+  color: #6c757d;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text {
+  background-color: transparent;
+  color: #6c757d;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(108, 117, 125, 0.04);
+  border-color: transparent;
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(108, 117, 125, 0.16);
+  border-color: transparent;
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info {
+  color: #151515;
+  background: #7fd8e6;
+  border: 1px solid #4cc8db;
+}
+.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
+  background: #4cc8db;
+  color: #151515;
+  border-color: #26bdd3;
+}
+.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 1px #b1e8f0;
+}
+.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active {
+  background: #26bdd3;
+  color: #151515;
+  border-color: #00b2cc;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined {
+  background-color: transparent;
+  color: #7fd8e6;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(127, 216, 230, 0.04);
+  color: #7fd8e6;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(127, 216, 230, 0.16);
+  color: #7fd8e6;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text {
+  background-color: transparent;
+  color: #7fd8e6;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(127, 216, 230, 0.04);
+  border-color: transparent;
+  color: #7fd8e6;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(127, 216, 230, 0.16);
+  border-color: transparent;
+  color: #7fd8e6;
+}
+.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success {
+  color: #151515;
+  background: #9fdaa8;
+  border: 1px solid #78cc86;
+}
+.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover {
+  background: #78cc86;
+  color: #151515;
+  border-color: #5ac06c;
+}
+.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 1px #c5e8ca;
+}
+.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active {
+  background: #5ac06c;
+  color: #151515;
+  border-color: #3cb553;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined {
+  background-color: transparent;
+  color: #9fdaa8;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(159, 218, 168, 0.04);
+  color: #9fdaa8;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(159, 218, 168, 0.16);
+  color: #9fdaa8;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text {
+  background-color: transparent;
+  color: #9fdaa8;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(159, 218, 168, 0.04);
+  border-color: transparent;
+  color: #9fdaa8;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(159, 218, 168, 0.16);
+  border-color: transparent;
+  color: #9fdaa8;
+}
+.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning {
+  color: #151515;
+  background: #ffe082;
+  border: 1px solid #ffd54f;
+}
+.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover {
+  background: #ffd54f;
+  color: #151515;
+  border-color: #ffca28;
+}
+.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 1px #ffecb3;
+}
+.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active {
+  background: #ffca28;
+  color: #151515;
+  border-color: #ffc107;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined {
+  background-color: transparent;
+  color: #ffe082;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 224, 130, 0.04);
+  color: #ffe082;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 224, 130, 0.16);
+  color: #ffe082;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text {
+  background-color: transparent;
+  color: #ffe082;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 224, 130, 0.04);
+  border-color: transparent;
+  color: #ffe082;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 224, 130, 0.16);
+  border-color: transparent;
+  color: #ffe082;
+}
+.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help {
+  color: #151515;
+  background: #b7a2e0;
+  border: 1px solid #9a7cd4;
+}
+.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover {
+  background: #9a7cd4;
+  color: #151515;
+  border-color: #845fca;
+}
+.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 1px #d3c7ec;
+}
+.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active {
+  background: #845fca;
+  color: #151515;
+  border-color: #6d43c0;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined {
+  background-color: transparent;
+  color: #b7a2e0;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(183, 162, 224, 0.04);
+  color: #b7a2e0;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(183, 162, 224, 0.16);
+  color: #b7a2e0;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text {
+  background-color: transparent;
+  color: #b7a2e0;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(183, 162, 224, 0.04);
+  border-color: transparent;
+  color: #b7a2e0;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(183, 162, 224, 0.16);
+  border-color: transparent;
+  color: #b7a2e0;
+}
+.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger {
+  color: #151515;
+  background: #f19ea6;
+  border: 1px solid #e97984;
+}
+.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover {
+  background: #e97984;
+  color: #151515;
+  border-color: #f75965;
+}
+.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 1px #ffd0d9;
+}
+.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active {
+  background: #f75965;
+  color: #151515;
+  border-color: #fd464e;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined {
+  background-color: transparent;
+  color: #f19ea6;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(241, 158, 166, 0.04);
+  color: #f19ea6;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(241, 158, 166, 0.16);
+  color: #f19ea6;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text {
+  background-color: transparent;
+  color: #f19ea6;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(241, 158, 166, 0.04);
+  border-color: transparent;
+  color: #f19ea6;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(241, 158, 166, 0.16);
+  border-color: transparent;
+  color: #f19ea6;
+}
+.landing-themes .p-button.p-button-link {
+  color: #8dd0ff;
+  background: transparent;
+  border: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover {
+  background: transparent;
+  color: #56bdff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover .p-button-label, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label {
+  text-decoration: underline;
+}
+.landing-themes .p-button.p-button-link:enabled:focus, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus {
+  background: transparent;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:active, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):active {
+  background: transparent;
+  color: #8dd0ff;
+  border-color: transparent;
+}
+.landing-themes .p-datatable .p-paginator-top {
+  border-width: 0;
+  border-radius: 0;
+}
+.landing-themes .p-datatable .p-paginator-bottom {
+  border-width: 1px 0 0 0;
+  border-radius: 0;
+}
+.landing-themes .p-datatable .p-datatable-header {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.6);
+  border: solid #3f4b5b;
+  border-width: 1px 0 0 0;
+  padding: 1rem 1rem;
+  font-weight: 600;
+}
+.landing-themes .p-datatable .p-datatable-footer {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-width: 1px 0 1px 0;
+  padding: 1rem 1rem;
+  font-weight: 600;
+}
+.landing-themes .p-datatable .p-datatable-thead > tr > th {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #3f4b5b;
+  border-width: 1px 0 2px 0;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-datatable .p-datatable-tfoot > tr > td {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #3f4b5b;
+  border-width: 1px 0 1px 0;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+}
+.landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon {
+  color: rgba(255, 255, 255, 0.6);
+  margin-left: 0.5rem;
+}
+.landing-themes .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 1.143rem;
+  min-width: 1.143rem;
+  line-height: 1.143rem;
+  color: #151515;
+  background: #8dd0ff;
+  margin-left: 0.5rem;
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight {
+  background: #2a323d;
+  color: #8dd0ff;
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+  color: #8dd0ff;
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: #8dd0ff;
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: #8dd0ff;
+}
+.landing-themes .p-datatable .p-sortable-column:focus {
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td {
+  text-align: left;
+  border: 1px solid #3f4b5b;
+  border-width: 1px 0 0 0;
+  padding: 1rem 1rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+  font-weight: 600;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+  background: #8dd0ff;
+  color: #151515;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight {
+  background: #8dd0ff;
+  color: #151515;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #8dd0ff;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #8dd0ff;
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus {
+  outline: 0.15rem solid #e3f3fe;
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus {
+  outline: 0.15rem solid #e3f3fe;
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-column-resizer-helper {
+  background: #8dd0ff;
+}
+.landing-themes .p-datatable .p-datatable-scrollable-header,
+.landing-themes .p-datatable .p-datatable-scrollable-footer {
+  background: #2a323d;
+}
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #2a323d;
+}
+.landing-themes .p-datatable .p-datatable-loading-icon {
+  font-size: 2rem;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px 1px 2px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+  background: rgba(255, 255, 255, 0.02);
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+  background: #8dd0ff;
+  color: #151515;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+  color: #151515;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+  color: #151515;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+  background: rgba(255, 255, 255, 0.02);
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable-drag-selection-helper {
+  background: rgba(141, 208, 255, 0.16);
+}
+.landing-themes .p-column-filter-row .p-column-filter-menu-button,
+.landing-themes .p-column-filter-row .p-column-filter-clear-button {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-column-filter-menu-button {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-column-filter-menu-button:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+  background: #8dd0ff;
+  color: #151515;
+}
+.landing-themes .p-column-filter-menu-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-column-filter-clear-button {
+  width: 2rem;
+  height: 2rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-column-filter-clear-button:hover {
+  color: rgba(255, 255, 255, 0.87);
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-column-filter-clear-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+}
+.landing-themes .p-column-filter-overlay {
+  background: #2a323d;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #3f4b5b;
+  border-radius: 4px;
+  box-shadow: none;
+  min-width: 12.5rem;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items {
+  padding: 0.5rem 0;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+  color: #151515;
+  background: #8dd0ff;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+  border-top: 1px solid #3f4b5b;
+  margin: 0.5rem 0;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-operator {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #3f4b5b;
+  color: rgba(255, 255, 255, 0.87);
+  background: #2a323d;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint {
+  padding: 1.25rem;
+  border-bottom: 1px solid #3f4b5b;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+  border-bottom: 0 none;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-add-rule {
+  padding: 0.5rem 1.25rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+  padding: 1.25rem;
+}
+.landing-themes .p-paginator {
+  background: #2a323d;
+  color: #8dd0ff;
+  border: solid #3f4b5b;
+  border-width: 0;
+  padding: 0.75rem;
+  border-radius: 4px;
+}
+.landing-themes .p-paginator .p-paginator-first,
+.landing-themes .p-paginator .p-paginator-prev,
+.landing-themes .p-paginator .p-paginator-next,
+.landing-themes .p-paginator .p-paginator-last {
+  background-color: transparent;
+  border: 1px solid #3f4b5b;
+  color: #8dd0ff;
+  min-width: 2.357rem;
+  height: 2.357rem;
+  margin: 0 0 0 -1px;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: #3f4b5b;
+  color: #8dd0ff;
+}
+.landing-themes .p-paginator .p-paginator-first {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.landing-themes .p-paginator .p-paginator-last {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.landing-themes .p-paginator .p-dropdown {
+  margin-left: 0.5rem;
+  height: 2.357rem;
+}
+.landing-themes .p-paginator .p-dropdown .p-dropdown-label {
+  padding-right: 0;
+}
+.landing-themes .p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.landing-themes .p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
+.landing-themes .p-paginator .p-paginator-current {
+  background-color: transparent;
+  border: 1px solid #3f4b5b;
+  color: #8dd0ff;
+  min-width: 2.357rem;
+  height: 2.357rem;
+  margin: 0 0 0 -1px;
+  padding: 0 0.5rem;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page {
+  background-color: transparent;
+  border: 1px solid #3f4b5b;
+  color: #8dd0ff;
+  min-width: 2.357rem;
+  height: 2.357rem;
+  margin: 0 0 0 -1px;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+  background: #8dd0ff;
+  border-color: #8dd0ff;
+  color: #151515;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: #3f4b5b;
+  color: #8dd0ff;
+}
+
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+.p-breadcrumb .p-breadcrumb-chevron {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.p-breadcrumb .p-breadcrumb-chevron:before {
+  content: "/";
+}
+
+/* Customizations to the designer theme should be defined here */
diff --git a/public/styles/landing/themes/bootstrap4-light-blue/theme.css b/public/styles/landing/themes/bootstrap4-light-blue/theme.css
new file mode 100644
index 0000000000..465cf4eeab
--- /dev/null
+++ b/public/styles/landing/themes/bootstrap4-light-blue/theme.css
@@ -0,0 +1,1683 @@
+.landing-themes * {
+  box-sizing: border-box;
+}
+.landing-themes .p-component {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-weight: normal;
+}
+.landing-themes .p-component-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
+  transition-duration: 0.15s;
+}
+.landing-themes .p-disabled, .landing-themes .p-component:disabled {
+  opacity: 0.65;
+}
+.landing-themes .p-error {
+  color: #dc3545;
+}
+.landing-themes .p-text-secondary {
+  color: #6c757d;
+}
+.landing-themes .pi {
+  font-size: 1rem;
+}
+.landing-themes .p-link {
+  font-size: 1rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  border-radius: 4px;
+}
+.landing-themes .p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+.landing-themes .p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+.landing-themes .p-calendar.p-invalid.p-component > .p-inputtext {
+  border-color: #dc3545;
+}
+.landing-themes .p-datepicker {
+  padding: 0;
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+}
+.landing-themes .p-datepicker:not(.p-datepicker-inline) {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: none;
+}
+.landing-themes .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+  background: #efefef;
+}
+.landing-themes .p-datepicker .p-datepicker-header {
+  padding: 0.5rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+  margin: 0;
+  border-bottom: 1px solid #dee2e6;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title {
+  line-height: 2rem;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select {
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datepicker table {
+  font-size: 1rem;
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker table th {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table th > span {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.landing-themes .p-datepicker table td {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table td > span {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 4px;
+  transition: box-shadow 0.15s;
+  border: 1px solid transparent;
+}
+.landing-themes .p-datepicker table td > span.p-highlight {
+  color: #ffffff;
+  background: #007bff;
+}
+.landing-themes .p-datepicker table td > span:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span {
+  background: #ced4da;
+  color: #212529;
+  border-color: transparent;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span.p-highlight {
+  color: #ffffff;
+  background: #007bff;
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar {
+  padding: 1rem 0;
+  border-top: 1px solid #dee2e6;
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar .p-button {
+  width: auto;
+}
+.landing-themes .p-datepicker .p-timepicker {
+  border-top: 1px solid #dee2e6;
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker .p-timepicker button {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-datepicker .p-timepicker button:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-datepicker .p-timepicker button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-datepicker .p-timepicker button:last-child {
+  margin-top: 0.2em;
+}
+.landing-themes .p-datepicker .p-timepicker span {
+  font-size: 1.25rem;
+}
+.landing-themes .p-datepicker .p-timepicker > div {
+  padding: 0 0.5rem;
+}
+.landing-themes .p-datepicker.p-datepicker-timeonly .p-timepicker {
+  border-top: 0 none;
+}
+.landing-themes .p-datepicker .p-monthpicker {
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month {
+  padding: 0.5rem;
+  transition: box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+  color: #ffffff;
+  background: #007bff;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+  border-right: 1px solid #dee2e6;
+  padding-right: 0;
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+  padding-left: 0;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+  padding-right: 0;
+  border-right: 0 none;
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+  background: #e9ecef;
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+  background: #e9ecef;
+}
+.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+@media screen and (max-width: 769px) {
+  .landing-themes .p-datepicker table th, .landing-themes .p-datepicker table td {
+    padding: 0;
+  }
+}
+.landing-themes .p-checkbox {
+  width: 20px;
+  height: 20px;
+}
+.landing-themes .p-checkbox .p-checkbox-box {
+  border: 2px solid #ced4da;
+  background: #ffffff;
+  width: 20px;
+  height: 20px;
+  color: #212529;
+  border-radius: 4px;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
+  transition-duration: 0.15s;
+  color: #ffffff;
+  font-size: 14px;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight {
+  border-color: #007bff;
+  background: #007bff;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  border-color: #0062cc;
+  background: #0062cc;
+  color: #ffffff;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  border-color: #ced4da;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  border-color: #0062cc;
+  background: #0062cc;
+  color: #ffffff;
+}
+.landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
+  border-color: #dc3545;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  background: #007bff;
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  background: #0062cc;
+}
+.landing-themes .p-highlight .p-checkbox .p-checkbox-box {
+  border-color: #ffffff;
+}
+.landing-themes .p-dropdown {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-dropdown:not(.p-disabled):hover {
+  border-color: #ced4da;
+}
+.landing-themes .p-dropdown:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
+.landing-themes .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-dropdown .p-dropdown-label {
+  background: transparent;
+  border: 0 none;
+}
+.landing-themes .p-dropdown .p-dropdown-label.p-placeholder {
+  color: #6c757d;
+}
+.landing-themes .p-dropdown .p-dropdown-label:enabled:focus {
+  outline: 0 none;
+  box-shadow: none;
+}
+.landing-themes .p-dropdown .p-dropdown-trigger {
+  background: transparent;
+  color: #495057;
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.landing-themes .p-dropdown .p-dropdown-clear-icon {
+  color: #495057;
+  right: 2.357rem;
+}
+.landing-themes .p-dropdown.p-invalid.p-component {
+  border-color: #dc3545;
+}
+.landing-themes .p-dropdown-panel {
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: none;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #212529;
+  background: #efefef;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+  padding-right: 1.75rem;
+  margin-right: -1.75rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+  right: 0.75rem;
+  color: #495057;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
+  padding-right: 3.5rem;
+  margin-right: -3.5rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
+  right: 2.5rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items {
+  padding: 0.5rem 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+  border: 0 none;
+  color: #212529;
+  background: transparent;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  color: #ffffff;
+  background: #007bff;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  color: #212529;
+  background: #e9ecef;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: #212529;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-dropdown {
+  background: #efefef;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
+  background-color: transparent;
+}
+.landing-themes .p-inputnumber.p-invalid.p-component > .p-inputtext {
+  border-color: #dc3545;
+}
+.landing-themes .p-inputtext {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  color: #495057;
+  background: #ffffff;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #ced4da;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  appearance: none;
+  border-radius: 4px;
+}
+.landing-themes .p-inputtext:enabled:hover {
+  border-color: #ced4da;
+}
+.landing-themes .p-inputtext:enabled:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
+.landing-themes .p-inputtext.p-invalid.p-component {
+  border-color: #dc3545;
+}
+.landing-themes .p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+.landing-themes .p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+.landing-themes .p-float-label > label {
+  left: 0.75rem;
+  color: #6c757d;
+  transition-duration: 0.15s;
+}
+.landing-themes .p-float-label > label.p-error {
+  color: #dc3545;
+}
+.landing-themes .p-input-icon-left > i:first-of-type,
+.landing-themes .p-input-icon-left > svg:first-of-type,
+.landing-themes .p-input-icon-left > .p-input-prefix {
+  left: 0.75rem;
+  color: #495057;
+}
+.landing-themes .p-input-icon-left > .p-inputtext {
+  padding-left: 2.5rem;
+}
+.landing-themes .p-input-icon-left.p-float-label > label {
+  left: 2.5rem;
+}
+.landing-themes .p-input-icon-right > i:last-of-type,
+.landing-themes .p-input-icon-right > svg:last-of-type,
+.landing-themes .p-input-icon-right > .p-input-suffix {
+  right: 0.75rem;
+  color: #495057;
+}
+.landing-themes .p-input-icon-right > .p-inputtext {
+  padding-right: 2.5rem;
+}
+.landing-themes ::-webkit-input-placeholder {
+  color: #6c757d;
+}
+.landing-themes :-moz-placeholder {
+  color: #6c757d;
+}
+.landing-themes ::-moz-placeholder {
+  color: #6c757d;
+}
+.landing-themes :-ms-input-placeholder {
+  color: #6c757d;
+}
+.landing-themes .p-input-filled .p-inputtext {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:hover {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:focus {
+  background-color: #efefef;
+}
+.landing-themes .p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+.landing-themes .p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+.landing-themes .p-multiselect {
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-multiselect:not(.p-disabled):hover {
+  border-color: #ced4da;
+}
+.landing-themes .p-multiselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
+.landing-themes .p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-multiselect .p-multiselect-label {
+  padding: 0.5rem 0.75rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-multiselect .p-multiselect-label.p-placeholder {
+  color: #6c757d;
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.25rem 0.75rem;
+  margin-right: 0.5rem;
+  background: #007bff;
+  color: #ffffff;
+  border-radius: 4px;
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-multiselect .p-multiselect-trigger {
+  background: transparent;
+  color: #495057;
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.landing-themes .p-multiselect .p-multiselect-clear-icon {
+  color: #495057;
+  right: 2.357rem;
+}
+.landing-themes .p-multiselect.p-invalid.p-component {
+  border-color: #dc3545;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.25rem 0.75rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
+  padding: 0.5rem 0.75rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-multiselect-panel {
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: none;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #212529;
+  background: #efefef;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
+  margin: 0 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+  padding-right: 1.75rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+  right: 0.75rem;
+  color: #495057;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items {
+  padding: 0.5rem 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+  border: 0 none;
+  color: #212529;
+  background: transparent;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+  color: #ffffff;
+  background: #007bff;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  color: #212529;
+  background: #e9ecef;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 0.75rem 1rem;
+  color: #212529;
+  background: #ffffff;
+  font-weight: 600;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+  padding: 0.5rem 1.5rem;
+  color: #212529;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-multiselect {
+  background: #efefef;
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #efefef;
+}
+.landing-themes .p-radiobutton {
+  width: 20px;
+  height: 20px;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box {
+  border: 2px solid #ced4da;
+  background: #ffffff;
+  width: 20px;
+  height: 20px;
+  color: #212529;
+  border-radius: 50%;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+  border-color: #ced4da;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+  width: 12px;
+  height: 12px;
+  transition-duration: 0.15s;
+  background-color: #ffffff;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight {
+  border-color: #007bff;
+  background: #007bff;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  border-color: #0062cc;
+  background: #0062cc;
+  color: #ffffff;
+}
+.landing-themes .p-radiobutton.p-invalid > .p-radiobutton-box {
+  border-color: #dc3545;
+}
+.landing-themes .p-radiobutton:focus {
+  outline: 0 none;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  background-color: #efefef;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  background: #007bff;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  background: #0062cc;
+}
+.landing-themes .p-highlight .p-radiobutton .p-radiobutton-box {
+  border-color: #ffffff;
+}
+.landing-themes .p-slider {
+  background: #e9ecef;
+  border: 0 none;
+  border-radius: 4px;
+}
+.landing-themes .p-slider.p-slider-horizontal {
+  height: 0.286rem;
+}
+.landing-themes .p-slider.p-slider-horizontal .p-slider-handle {
+  margin-top: -0.5715rem;
+  margin-left: -0.5715rem;
+}
+.landing-themes .p-slider.p-slider-vertical {
+  width: 0.286rem;
+}
+.landing-themes .p-slider.p-slider-vertical .p-slider-handle {
+  margin-left: -0.5715rem;
+  margin-bottom: -0.5715rem;
+}
+.landing-themes .p-slider .p-slider-handle {
+  height: 1.143rem;
+  width: 1.143rem;
+  background: #007bff;
+  border: 2px solid #007bff;
+  border-radius: 4px;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.landing-themes .p-slider .p-slider-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-slider .p-slider-range {
+  background: #007bff;
+}
+.landing-themes .p-slider:not(.p-disabled) .p-slider-handle:hover {
+  background: #0069d9;
+  border-color: #0069d9;
+}
+.landing-themes .p-button {
+  color: #ffffff;
+  background: #007bff;
+  border: 1px solid #007bff;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  border-radius: 4px;
+}
+.landing-themes .p-button:enabled:hover, .landing-themes .p-button:not(button):not(a):not(.p-disabled):hover {
+  background: #0069d9;
+  color: #ffffff;
+  border-color: #0069d9;
+}
+.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active {
+  background: #0062cc;
+  color: #ffffff;
+  border-color: #0062cc;
+}
+.landing-themes .p-button.p-button-outlined {
+  background-color: transparent;
+  color: #007bff;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(0, 123, 255, 0.04);
+  color: #007bff;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(0, 123, 255, 0.16);
+  color: #007bff;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain {
+  color: #6c757d;
+  border-color: #6c757d;
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: #dee2e6;
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-text {
+  background-color: transparent;
+  color: #007bff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:hover, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(0, 123, 255, 0.04);
+  color: #007bff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(0, 123, 255, 0.16);
+  color: #007bff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text.p-button-plain {
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: #e9ecef;
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:active, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: #dee2e6;
+  color: #6c757d;
+}
+.landing-themes .p-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-button .p-button-icon-left {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-right {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-bottom {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-top {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button .p-badge {
+  margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+  color: #007bff;
+  background-color: #ffffff;
+}
+.landing-themes .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);
+}
+.landing-themes .p-button.p-button-rounded {
+  border-radius: 2rem;
+}
+.landing-themes .p-button.p-button-icon-only {
+  width: 2.357rem;
+  padding: 0.5rem 0;
+}
+.landing-themes .p-button.p-button-icon-only .p-button-icon-left,
+.landing-themes .p-button.p-button-icon-only .p-button-icon-right {
+  margin: 0;
+}
+.landing-themes .p-button.p-button-icon-only.p-button-rounded {
+  border-radius: 50%;
+  height: 2.357rem;
+}
+.landing-themes .p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.4375rem 0.65625rem;
+}
+.landing-themes .p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.landing-themes .p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.625rem 0.9375rem;
+}
+.landing-themes .p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon {
+  margin: 0;
+}
+.landing-themes .p-fluid .p-button {
+  width: 100%;
+}
+.landing-themes .p-fluid .p-button-icon-only {
+  width: 2.357rem;
+}
+.landing-themes .p-fluid .p-buttonset {
+  display: flex;
+}
+.landing-themes .p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
+.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary {
+  color: #ffffff;
+  background: #6c757d;
+  border: 1px solid #6c757d;
+}
+.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover {
+  background: #5a6268;
+  color: #ffffff;
+  border-color: #5a6268;
+}
+.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
+}
+.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active {
+  background: #545b62;
+  color: #ffffff;
+  border-color: #4e555b;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  background-color: transparent;
+  color: #6c757d;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(108, 117, 125, 0.04);
+  color: #6c757d;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(108, 117, 125, 0.16);
+  color: #6c757d;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text {
+  background-color: transparent;
+  color: #6c757d;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(108, 117, 125, 0.04);
+  border-color: transparent;
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(108, 117, 125, 0.16);
+  border-color: transparent;
+  color: #6c757d;
+}
+.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info {
+  color: #ffffff;
+  background: #17a2b8;
+  border: 1px solid #17a2b8;
+}
+.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
+  background: #138496;
+  color: #ffffff;
+  border-color: #117a8b;
+}
+.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+}
+.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active {
+  background: #138496;
+  color: #ffffff;
+  border-color: #117a8b;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined {
+  background-color: transparent;
+  color: #17a2b8;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(23, 162, 184, 0.04);
+  color: #17a2b8;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(23, 162, 184, 0.16);
+  color: #17a2b8;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text {
+  background-color: transparent;
+  color: #17a2b8;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(23, 162, 184, 0.04);
+  border-color: transparent;
+  color: #17a2b8;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(23, 162, 184, 0.16);
+  border-color: transparent;
+  color: #17a2b8;
+}
+.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success {
+  color: #ffffff;
+  background: #28a745;
+  border: 1px solid #28a745;
+}
+.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover {
+  background: #218838;
+  color: #ffffff;
+  border-color: #1e7e34;
+}
+.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
+}
+.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active {
+  background: #1e7e34;
+  color: #ffffff;
+  border-color: #1c7430;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined {
+  background-color: transparent;
+  color: #28a745;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(40, 167, 69, 0.04);
+  color: #28a745;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(40, 167, 69, 0.16);
+  color: #28a745;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text {
+  background-color: transparent;
+  color: #28a745;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(40, 167, 69, 0.04);
+  border-color: transparent;
+  color: #28a745;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(40, 167, 69, 0.16);
+  border-color: transparent;
+  color: #28a745;
+}
+.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning {
+  color: #212529;
+  background: #ffc107;
+  border: 1px solid #ffc107;
+}
+.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover {
+  background: #e0a800;
+  color: #212529;
+  border-color: #d39e00;
+}
+.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+}
+.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active {
+  background: #d39e00;
+  color: #212529;
+  border-color: #c69500;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined {
+  background-color: transparent;
+  color: #ffc107;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 193, 7, 0.04);
+  color: #ffc107;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 193, 7, 0.16);
+  color: #ffc107;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text {
+  background-color: transparent;
+  color: #ffc107;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 193, 7, 0.04);
+  border-color: transparent;
+  color: #ffc107;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 193, 7, 0.16);
+  border-color: transparent;
+  color: #ffc107;
+}
+.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help {
+  color: #ffffff;
+  background: #6f42c1;
+  border: 1px solid #6f42c1;
+}
+.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover {
+  background: #633bad;
+  color: #ffffff;
+  border-color: #58349a;
+}
+.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 0.2rem #d3c6ec;
+}
+.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active {
+  background: #58349a;
+  color: #ffffff;
+  border-color: #4d2e87;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined {
+  background-color: transparent;
+  color: #6f42c1;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(111, 66, 193, 0.04);
+  color: #6f42c1;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(111, 66, 193, 0.16);
+  color: #6f42c1;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text {
+  background-color: transparent;
+  color: #6f42c1;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(111, 66, 193, 0.04);
+  border-color: transparent;
+  color: #6f42c1;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(111, 66, 193, 0.16);
+  border-color: transparent;
+  color: #6f42c1;
+}
+.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger {
+  color: #ffffff;
+  background: #dc3545;
+  border: 1px solid #dc3545;
+}
+.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover {
+  background: #c82333;
+  color: #ffffff;
+  border-color: #bd2130;
+}
+.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+}
+.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active {
+  background: #bd2130;
+  color: #ffffff;
+  border-color: #b21f2d;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined {
+  background-color: transparent;
+  color: #dc3545;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(220, 53, 69, 0.04);
+  color: #dc3545;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(220, 53, 69, 0.16);
+  color: #dc3545;
+  border: 1px solid;
+}
+.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text {
+  background-color: transparent;
+  color: #dc3545;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(220, 53, 69, 0.04);
+  border-color: transparent;
+  color: #dc3545;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(220, 53, 69, 0.16);
+  border-color: transparent;
+  color: #dc3545;
+}
+.landing-themes .p-button.p-button-link {
+  color: #007bff;
+  background: transparent;
+  border: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover {
+  background: transparent;
+  color: #0069d9;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover .p-button-label, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label {
+  text-decoration: underline;
+}
+.landing-themes .p-button.p-button-link:enabled:focus, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus {
+  background: transparent;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:active, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):active {
+  background: transparent;
+  color: #007bff;
+  border-color: transparent;
+}
+.landing-themes .p-datatable .p-paginator-top {
+  border-width: 1px 0 0 0;
+  border-radius: 0;
+}
+.landing-themes .p-datatable .p-paginator-bottom {
+  border-width: 1px 0 0 0;
+  border-radius: 0;
+}
+.landing-themes .p-datatable .p-datatable-header {
+  background: #efefef;
+  color: #212529;
+  border: solid #dee2e6;
+  border-width: 1px 0 0 0;
+  padding: 1rem 1rem;
+  font-weight: 600;
+}
+.landing-themes .p-datatable .p-datatable-footer {
+  background: #efefef;
+  color: #212529;
+  border: 1px solid #dee2e6;
+  border-width: 1px 0 1px 0;
+  padding: 1rem 1rem;
+  font-weight: 600;
+}
+.landing-themes .p-datatable .p-datatable-thead > tr > th {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #dee2e6;
+  border-width: 1px 0 2px 0;
+  font-weight: 600;
+  color: #212529;
+  background: #ffffff;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-datatable .p-datatable-tfoot > tr > td {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #dee2e6;
+  border-width: 1px 0 1px 0;
+  font-weight: 600;
+  color: #212529;
+  background: #ffffff;
+}
+.landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon {
+  color: #6c757d;
+  margin-left: 0.5rem;
+}
+.landing-themes .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 1.143rem;
+  min-width: 1.143rem;
+  line-height: 1.143rem;
+  color: #ffffff;
+  background: #007bff;
+  margin-left: 0.5rem;
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+  background: #e9ecef;
+  color: #212529;
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: #6c757d;
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight {
+  background: #ffffff;
+  color: #007bff;
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+  color: #007bff;
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+  background: #e9ecef;
+  color: #007bff;
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: #007bff;
+}
+.landing-themes .p-datatable .p-sortable-column:focus {
+  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr {
+  background: #ffffff;
+  color: #212529;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td {
+  text-align: left;
+  border: 1px solid #dee2e6;
+  border-width: 1px 0 0 0;
+  padding: 1rem 1rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+  font-weight: 600;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+  background: #007bff;
+  color: #ffffff;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight {
+  background: #007bff;
+  color: #ffffff;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #007bff;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #007bff;
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: #e9ecef;
+  color: #212529;
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus {
+  outline: 0.15rem solid rgba(38, 143, 255, 0.5);
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+  background: #e9ecef;
+  color: #212529;
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus {
+  outline: 0.15rem solid rgba(38, 143, 255, 0.5);
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: #e9ecef;
+  color: #212529;
+}
+.landing-themes .p-datatable .p-column-resizer-helper {
+  background: #007bff;
+}
+.landing-themes .p-datatable .p-datatable-scrollable-header,
+.landing-themes .p-datatable .p-datatable-scrollable-footer {
+  background: #efefef;
+}
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #ffffff;
+}
+.landing-themes .p-datatable .p-datatable-loading-icon {
+  font-size: 2rem;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px 1px 2px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+  background: rgba(0, 0, 0, 0.05);
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+  background: #007bff;
+  color: #ffffff;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+  color: #ffffff;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+  color: #ffffff;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+  background: rgba(0, 0, 0, 0.05);
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable-drag-selection-helper {
+  background: rgba(0, 123, 255, 0.16);
+}
+.landing-themes .p-column-filter-row .p-column-filter-menu-button,
+.landing-themes .p-column-filter-row .p-column-filter-clear-button {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-column-filter-menu-button {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-column-filter-menu-button:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+  background: transparent;
+  color: #495057;
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+  background: #007bff;
+  color: #ffffff;
+}
+.landing-themes .p-column-filter-menu-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-column-filter-clear-button {
+  width: 2rem;
+  height: 2rem;
+  color: #6c757d;
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: box-shadow 0.15s;
+}
+.landing-themes .p-column-filter-clear-button:hover {
+  color: #495057;
+  border-color: transparent;
+  background: transparent;
+}
+.landing-themes .p-column-filter-clear-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-column-filter-overlay {
+  background: #ffffff;
+  color: #212529;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  box-shadow: none;
+  min-width: 12.5rem;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items {
+  padding: 0.5rem 0;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+  margin: 0;
+  padding: 0.5rem 1.5rem;
+  border: 0 none;
+  color: #212529;
+  background: transparent;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+  color: #ffffff;
+  background: #007bff;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+  color: #212529;
+  background: #e9ecef;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+  border-top: 1px solid #dee2e6;
+  margin: 0.5rem 0;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-operator {
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid #dee2e6;
+  color: #212529;
+  background: #efefef;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint {
+  padding: 1.25rem;
+  border-bottom: 1px solid #dee2e6;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+  border-bottom: 0 none;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-add-rule {
+  padding: 0.5rem 1.25rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+  padding: 1.25rem;
+}
+.landing-themes .p-paginator {
+  background: #ffffff;
+  color: #007bff;
+  border: solid #dee2e6;
+  border-width: 0;
+  padding: 0.75rem;
+  border-radius: 4px;
+}
+.landing-themes .p-paginator .p-paginator-first,
+.landing-themes .p-paginator .p-paginator-prev,
+.landing-themes .p-paginator .p-paginator-next,
+.landing-themes .p-paginator .p-paginator-last {
+  background-color: #ffffff;
+  border: 1px solid #dee2e6;
+  color: #007bff;
+  min-width: 2.357rem;
+  height: 2.357rem;
+  margin: 0 0 0 -1px;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+  background: #e9ecef;
+  border-color: #dee2e6;
+  color: #007bff;
+}
+.landing-themes .p-paginator .p-paginator-first {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.landing-themes .p-paginator .p-paginator-last {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.landing-themes .p-paginator .p-dropdown {
+  margin-left: 0.5rem;
+  height: 2.357rem;
+}
+.landing-themes .p-paginator .p-dropdown .p-dropdown-label {
+  padding-right: 0;
+}
+.landing-themes .p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.landing-themes .p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
+.landing-themes .p-paginator .p-paginator-current {
+  background-color: #ffffff;
+  border: 1px solid #dee2e6;
+  color: #007bff;
+  min-width: 2.357rem;
+  height: 2.357rem;
+  margin: 0 0 0 -1px;
+  padding: 0 0.5rem;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page {
+  background-color: #ffffff;
+  border: 1px solid #dee2e6;
+  color: #007bff;
+  min-width: 2.357rem;
+  height: 2.357rem;
+  margin: 0 0 0 -1px;
+  transition: box-shadow 0.15s;
+  border-radius: 0;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+  background: #007bff;
+  border-color: #007bff;
+  color: #ffffff;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+  background: #e9ecef;
+  border-color: #dee2e6;
+  color: #007bff;
+}
+
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+.p-breadcrumb .p-breadcrumb-chevron {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.p-breadcrumb .p-breadcrumb-chevron:before {
+  content: "/";
+}
+
+/* Customizations to the designer theme should be defined here */
diff --git a/public/styles/landing/themes/lara-dark-cyan/theme.css b/public/styles/landing/themes/lara-dark-cyan/theme.css
new file mode 100644
index 0000000000..3603e0cdf4
--- /dev/null
+++ b/public/styles/landing/themes/lara-dark-cyan/theme.css
@@ -0,0 +1,1165 @@
+.landing-themes * {
+    box-sizing: border-box;
+  }
+  .landing-themes .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .landing-themes .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .landing-themes .p-disabled, .landing-themes .p-component:disabled {
+    opacity: 0.4;
+  }
+  .landing-themes .p-error {
+    color: #FCA5A5;
+  }
+  .landing-themes .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .pi {
+    font-size: 1rem;
+  }
+  .landing-themes .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .landing-themes .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .landing-themes .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .landing-themes .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .landing-themes .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box.p-highlight {
+    border-color: #22d3ee;
+    background: #22d3ee;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+    border-color: #a5f3fc;
+    background: #a5f3fc;
+    color: #030712;
+  }
+  .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    border-color: #22d3ee;
+  }
+  .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    border-color: #a5f3fc;
+    background: #a5f3fc;
+    color: #030712;
+  }
+  .landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #FCA5A5;
+  }
+  .landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+    background: #22d3ee;
+  }
+  .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #424b57;
+  }
+  .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #a5f3fc;
+  }
+  .landing-themes .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+  }
+  .landing-themes .p-inputtext:enabled:hover {
+    border-color: #22d3ee;
+  }
+  .landing-themes .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .landing-themes .p-inputtext.p-invalid.p-component {
+    border-color: #FCA5A5;
+  }
+  .landing-themes .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .landing-themes .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .landing-themes .p-float-label > label {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .landing-themes .p-float-label > label.p-error {
+    color: #FCA5A5;
+  }
+  .landing-themes .p-input-icon-left > i:first-of-type,
+  .landing-themes .p-input-icon-left > svg:first-of-type,
+  .landing-themes .p-input-icon-left > .p-input-prefix {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-input-icon-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .landing-themes .p-input-icon-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .landing-themes .p-input-icon-right > i:last-of-type,
+  .landing-themes .p-input-icon-right > svg:last-of-type,
+  .landing-themes .p-input-icon-right > .p-input-suffix {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-input-icon-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  .landing-themes ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .landing-themes .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .landing-themes .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .landing-themes .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .landing-themes .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .landing-themes .p-button {
+    color: #030712;
+    background: #22d3ee;
+    border: 1px solid #22d3ee;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .landing-themes .p-button:not(:disabled):hover {
+    background: #67e8f9;
+    color: #030712;
+    border-color: #67e8f9;
+  }
+  .landing-themes .p-button:not(:disabled):active {
+    background: #a5f3fc;
+    color: #030712;
+    border-color: #a5f3fc;
+  }
+  .landing-themes .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #22d3ee;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 211, 238, 0.04);
+    color: #22d3ee;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 211, 238, 0.16);
+    color: #22d3ee;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-button.p-button-text {
+    background-color: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(34, 211, 238, 0.04);
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-text:not(:disabled):active {
+    background: rgba(34, 211, 238, 0.16);
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .landing-themes .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .landing-themes .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .landing-themes .p-button .p-button-icon-left {
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-button .p-button-icon-right {
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-button .p-button-icon-bottom {
+    margin-top: 0.5rem;
+  }
+  .landing-themes .p-button .p-button-icon-top {
+    margin-bottom: 0.5rem;
+  }
+  .landing-themes .p-button .p-badge {
+    margin-left: 0.5rem;
+    min-width: 1rem;
+    height: 1rem;
+    line-height: 1rem;
+    color: #22d3ee;
+    background-color: #030712;
+  }
+  .landing-themes .p-button.p-button-raised {
+    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);
+  }
+  .landing-themes .p-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .landing-themes .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .landing-themes .p-button.p-button-icon-only .p-button-icon-left,
+  .landing-themes .p-button.p-button-icon-only .p-button-icon-right {
+    margin: 0;
+  }
+  .landing-themes .p-button.p-button-icon-only.p-button-rounded {
+    border-radius: 50%;
+    height: 3rem;
+  }
+  .landing-themes .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .landing-themes .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .landing-themes .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .landing-themes .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .landing-themes .p-fluid .p-button {
+    width: 100%;
+  }
+  .landing-themes .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .landing-themes .p-fluid .p-buttonset {
+    display: flex;
+  }
+  .landing-themes .p-fluid .p-buttonset .p-button {
+    flex: 1;
+  }
+  .landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary {
+    color: #1c2127;
+    background: #CBD5E1;
+    border: 1px solid #CBD5E1;
+  }
+  .landing-themes .p-button.p-button-secondary:not(:disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #b0bfd1;
+    color: #1c2127;
+    border-color: #b0bfd1;
+  }
+  .landing-themes .p-button.p-button-secondary:not(:disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #dbe2ea;
+  }
+  .landing-themes .p-button.p-button-secondary:not(:disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #95a9c2;
+    color: #1c2127;
+    border-color: #95a9c2;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #CBD5E1;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(203, 213, 225, 0.04);
+    color: #CBD5E1;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(203, 213, 225, 0.16);
+    color: #CBD5E1;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #CBD5E1;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(203, 213, 225, 0.04);
+    border-color: transparent;
+    color: #CBD5E1;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(203, 213, 225, 0.16);
+    border-color: transparent;
+    color: #CBD5E1;
+  }
+  .landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info {
+    color: #1c2127;
+    background: #93C5FD;
+    border: 1px solid #93C5FD;
+  }
+  .landing-themes .p-button.p-button-info:not(:disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #6cb0fc;
+    color: #1c2127;
+    border-color: #6cb0fc;
+  }
+  .landing-themes .p-button.p-button-info:not(:disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b3d6fe;
+  }
+  .landing-themes .p-button.p-button-info:not(:disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #449bfc;
+    color: #1c2127;
+    border-color: #449bfc;
+  }
+  .landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #93C5FD;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(147, 197, 253, 0.04);
+    color: #93C5FD;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-info.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(147, 197, 253, 0.16);
+    color: #93C5FD;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #93C5FD;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-info.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(147, 197, 253, 0.04);
+    border-color: transparent;
+    color: #93C5FD;
+  }
+  .landing-themes .p-button.p-button-info.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(147, 197, 253, 0.16);
+    border-color: transparent;
+    color: #93C5FD;
+  }
+  .landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success {
+    color: #1c2127;
+    background: #86EFAC;
+    border: 1px solid #86EFAC;
+  }
+  .landing-themes .p-button.p-button-success:not(:disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #65eb95;
+    color: #1c2127;
+    border-color: #65eb95;
+  }
+  .landing-themes .p-button.p-button-success:not(:disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #aaf4c5;
+  }
+  .landing-themes .p-button.p-button-success:not(:disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #44e67f;
+    color: #1c2127;
+    border-color: #44e67f;
+  }
+  .landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #86EFAC;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(134, 239, 172, 0.04);
+    color: #86EFAC;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-success.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(134, 239, 172, 0.16);
+    color: #86EFAC;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #86EFAC;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-success.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(134, 239, 172, 0.04);
+    border-color: transparent;
+    color: #86EFAC;
+  }
+  .landing-themes .p-button.p-button-success.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(134, 239, 172, 0.16);
+    border-color: transparent;
+    color: #86EFAC;
+  }
+  .landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning {
+    color: #1c2127;
+    background: #FCD34D;
+    border: 1px solid #FCD34D;
+  }
+  .landing-themes .p-button.p-button-warning:not(:disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fbcb2d;
+    color: #1c2127;
+    border-color: #fbcb2d;
+  }
+  .landing-themes .p-button.p-button-warning:not(:disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fde082;
+  }
+  .landing-themes .p-button.p-button-warning:not(:disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fbc30c;
+    color: #1c2127;
+    border-color: #fbc30c;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #FCD34D;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(252, 211, 77, 0.04);
+    color: #FCD34D;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(252, 211, 77, 0.16);
+    color: #FCD34D;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #FCD34D;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(252, 211, 77, 0.04);
+    border-color: transparent;
+    color: #FCD34D;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(252, 211, 77, 0.16);
+    border-color: transparent;
+    color: #FCD34D;
+  }
+  .landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help {
+    color: #1c2127;
+    background: #D8B4FE;
+    border: 1px solid #D8B4FE;
+  }
+  .landing-themes .p-button.p-button-help:not(:disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c289fd;
+    color: #1c2127;
+    border-color: #c289fd;
+  }
+  .landing-themes .p-button.p-button-help:not(:disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #e4cbfe;
+  }
+  .landing-themes .p-button.p-button-help:not(:disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #ab5efd;
+    color: #1c2127;
+    border-color: #ab5efd;
+  }
+  .landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #D8B4FE;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(216, 180, 254, 0.04);
+    color: #D8B4FE;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-help.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(216, 180, 254, 0.16);
+    color: #D8B4FE;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #D8B4FE;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-help.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(216, 180, 254, 0.04);
+    border-color: transparent;
+    color: #D8B4FE;
+  }
+  .landing-themes .p-button.p-button-help.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(216, 180, 254, 0.16);
+    border-color: transparent;
+    color: #D8B4FE;
+  }
+  .landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger {
+    color: #1c2127;
+    background: #FCA5A5;
+    border: 1px solid #FCA5A5;
+  }
+  .landing-themes .p-button.p-button-danger:not(:disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fb7d7d;
+    color: #1c2127;
+    border-color: #fb7d7d;
+  }
+  .landing-themes .p-button.p-button-danger:not(:disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fdc0c0;
+  }
+  .landing-themes .p-button.p-button-danger:not(:disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #f95454;
+    color: #1c2127;
+    border-color: #f95454;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #FCA5A5;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(252, 165, 165, 0.04);
+    color: #FCA5A5;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(252, 165, 165, 0.16);
+    color: #FCA5A5;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #FCA5A5;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(252, 165, 165, 0.04);
+    border-color: transparent;
+    color: #FCA5A5;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(252, 165, 165, 0.16);
+    border-color: transparent;
+    color: #FCA5A5;
+  }
+  .landing-themes .p-button.p-button-link {
+    color: #22d3ee;
+    background: transparent;
+    border: transparent;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2);
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .landing-themes .p-datatable .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .landing-themes .p-datatable .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .landing-themes .p-datatable .p-datatable-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .landing-themes .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .landing-themes .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .landing-themes .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-datatable .p-sortable-column .p-sortable-column-badge {
+    border-radius: 50%;
+    height: 1.143rem;
+    min-width: 1.143rem;
+    line-height: 1.143rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
+    outline: 0 none;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+    font-weight: 700;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(34, 211, 238, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(34, 211, 238, 0.16);
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(34, 211, 238, 0.16);
+  }
+  .landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(34, 211, 238, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(34, 211, 238, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable .p-column-resizer-helper {
+    background: #22d3ee;
+  }
+  .landing-themes .p-datatable .p-datatable-scrollable-header,
+  .landing-themes .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .landing-themes .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .landing-themes .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-header {
+    border-width: 1px 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-footer {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-paginator-top {
+    border-width: 0 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+    border-width: 1px 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable-drag-selection-helper {
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .landing-themes .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-paginator .p-paginator-first,
+  .landing-themes .p-paginator .p-paginator-prev,
+  .landing-themes .p-paginator .p-paginator-next,
+  .landing-themes .p-paginator .p-paginator-last {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .landing-themes .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .landing-themes .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .landing-themes .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .landing-themes .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .landing-themes .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .landing-themes .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .landing-themes .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .landing-themes .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .landing-themes .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .landing-themes .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .landing-themes .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    border-color: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .landing-themes .p-tag {
+    background: #22d3ee;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-tag.p-tag-success {
+    background-color: #86EFAC;
+    color: #1c2127;
+  }
+  .landing-themes .p-tag.p-tag-info {
+    background-color: #93C5FD;
+    color: #1c2127;
+  }
+  .landing-themes .p-tag.p-tag-warning {
+    background-color: #FCD34D;
+    color: #1c2127;
+  }
+  .landing-themes .p-tag.p-tag-danger {
+    background-color: #FCA5A5;
+    color: #1c2127;
+  }
+  .landing-themes .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .landing-themes .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .landing-themes .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .landing-themes .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #22d3ee;
+  }
+  .landing-themes .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .landing-themes .p-badge {
+    background: #22d3ee;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .landing-themes .p-badge.p-badge-secondary {
+    background-color: #CBD5E1;
+    color: #1c2127;
+  }
+  .landing-themes .p-badge.p-badge-success {
+    background-color: #86EFAC;
+    color: #1c2127;
+  }
+  .landing-themes .p-badge.p-badge-info {
+    background-color: #93C5FD;
+    color: #1c2127;
+  }
+  .landing-themes .p-badge.p-badge-warning {
+    background-color: #FCD34D;
+    color: #1c2127;
+  }
+  .landing-themes .p-badge.p-badge-danger {
+    background-color: #FCA5A5;
+    color: #1c2127;
+  }
+  .landing-themes .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .landing-themes .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .landing-themes .p-tag {
+    background: #22d3ee;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-tag.p-tag-success {
+    background-color: #86EFAC;
+    color: #1c2127;
+  }
+  .landing-themes .p-tag.p-tag-info {
+    background-color: #93C5FD;
+    color: #1c2127;
+  }
+  .landing-themes .p-tag.p-tag-warning {
+    background-color: #FCD34D;
+    color: #1c2127;
+  }
+  .landing-themes .p-tag.p-tag-danger {
+    background-color: #FCA5A5;
+    color: #1c2127;
+  }
+    
+  .landing-themes .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(34, 211, 238, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  
\ No newline at end of file
diff --git a/public/styles/landing/themes/lara-light-cyan/theme.css b/public/styles/landing/themes/lara-light-cyan/theme.css
new file mode 100644
index 0000000000..40d08ad66c
--- /dev/null
+++ b/public/styles/landing/themes/lara-light-cyan/theme.css
@@ -0,0 +1,1165 @@
+.landing-themes * {
+    box-sizing: border-box;
+  }
+  .landing-themes .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .landing-themes .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .landing-themes .p-disabled, .landing-themes .p-component:disabled {
+    opacity: 0.6;
+  }
+  .landing-themes .p-error {
+    color: #e24c4c;
+  }
+  .landing-themes .p-text-secondary {
+    color: #6b7280;
+  }
+  .landing-themes .pi {
+    font-size: 1rem;
+  }
+  .landing-themes .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .landing-themes .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .landing-themes .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .landing-themes .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .landing-themes .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box.p-highlight {
+    border-color: #06b6d4;
+    background: #06b6d4;
+  }
+  .landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+    border-color: #0e7490;
+    background: #0e7490;
+    color: #ffffff;
+  }
+  .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    border-color: #06b6d4;
+  }
+  .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    border-color: #0e7490;
+    background: #0e7490;
+    color: #ffffff;
+  }
+  .landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+    background: #06b6d4;
+  }
+  .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #f3f4f6;
+  }
+  .landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+    background: #0e7490;
+  }
+  .landing-themes .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+  }
+  .landing-themes .p-inputtext:enabled:hover {
+    border-color: #06b6d4;
+  }
+  .landing-themes .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .landing-themes .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .landing-themes .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .landing-themes .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .landing-themes .p-float-label > label {
+    left: 0.75rem;
+    color: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .landing-themes .p-float-label > label.p-error {
+    color: #e24c4c;
+  }
+  .landing-themes .p-input-icon-left > i:first-of-type,
+  .landing-themes .p-input-icon-left > svg:first-of-type,
+  .landing-themes .p-input-icon-left > .p-input-prefix {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .landing-themes .p-input-icon-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .landing-themes .p-input-icon-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .landing-themes .p-input-icon-right > i:last-of-type,
+  .landing-themes .p-input-icon-right > svg:last-of-type,
+  .landing-themes .p-input-icon-right > .p-input-suffix {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .landing-themes .p-input-icon-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  .landing-themes ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  .landing-themes :-moz-placeholder {
+    color: #6b7280;
+  }
+  .landing-themes ::-moz-placeholder {
+    color: #6b7280;
+  }
+  .landing-themes :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .landing-themes .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .landing-themes .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .landing-themes .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .landing-themes .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .landing-themes .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .landing-themes .p-button {
+    color: #ffffff;
+    background: #06b6d4;
+    border: 1px solid #06b6d4;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .landing-themes .p-button:not(:disabled):hover {
+    background: #0891b2;
+    color: #ffffff;
+    border-color: #0891b2;
+  }
+  .landing-themes .p-button:not(:disabled):active {
+    background: #0e7490;
+    color: #ffffff;
+    border-color: #0e7490;
+  }
+  .landing-themes .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #06b6d4;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(6, 182, 212, 0.04);
+    color: #06b6d4;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(6, 182, 212, 0.16);
+    color: #06b6d4;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .landing-themes .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .landing-themes .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .landing-themes .p-button.p-button-text {
+    background-color: transparent;
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(6, 182, 212, 0.04);
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-text:not(:disabled):active {
+    background: rgba(6, 182, 212, 0.16);
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .landing-themes .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .landing-themes .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .landing-themes .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .landing-themes .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .landing-themes .p-button .p-button-icon-left {
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-button .p-button-icon-right {
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-button .p-button-icon-bottom {
+    margin-top: 0.5rem;
+  }
+  .landing-themes .p-button .p-button-icon-top {
+    margin-bottom: 0.5rem;
+  }
+  .landing-themes .p-button .p-badge {
+    margin-left: 0.5rem;
+    min-width: 1rem;
+    height: 1rem;
+    line-height: 1rem;
+    color: #06b6d4;
+    background-color: #ffffff;
+  }
+  .landing-themes .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);
+  }
+  .landing-themes .p-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .landing-themes .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .landing-themes .p-button.p-button-icon-only .p-button-icon-left,
+  .landing-themes .p-button.p-button-icon-only .p-button-icon-right {
+    margin: 0;
+  }
+  .landing-themes .p-button.p-button-icon-only.p-button-rounded {
+    border-radius: 50%;
+    height: 3rem;
+  }
+  .landing-themes .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .landing-themes .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .landing-themes .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .landing-themes .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .landing-themes .p-fluid .p-button {
+    width: 100%;
+  }
+  .landing-themes .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .landing-themes .p-fluid .p-buttonset {
+    display: flex;
+  }
+  .landing-themes .p-fluid .p-buttonset .p-button {
+    flex: 1;
+  }
+  .landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748B;
+    border: 1px solid #64748B;
+  }
+  .landing-themes .p-button.p-button-secondary:not(:disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .landing-themes .p-button.p-button-secondary:not(:disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #E2E8F0;
+  }
+  .landing-themes .p-button.p-button-secondary:not(:disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748B;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748B;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748B;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748B;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748B;
+  }
+  .landing-themes .p-button.p-button-secondary.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748B;
+  }
+  .landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #3B82F6;
+    border: 1px solid #3B82F6;
+  }
+  .landing-themes .p-button.p-button-info:not(:disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #2563EB;
+    color: #ffffff;
+    border-color: #2563EB;
+  }
+  .landing-themes .p-button.p-button-info:not(:disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #BFDBFE;
+  }
+  .landing-themes .p-button.p-button-info:not(:disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #1D4ED8;
+    color: #ffffff;
+    border-color: #1D4ED8;
+  }
+  .landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #3B82F6;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    color: #3B82F6;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-info.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    color: #3B82F6;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #3B82F6;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-info.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    border-color: transparent;
+    color: #3B82F6;
+  }
+  .landing-themes .p-button.p-button-info.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    border-color: transparent;
+    color: #3B82F6;
+  }
+  .landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22C55E;
+    border: 1px solid #22C55E;
+  }
+  .landing-themes .p-button.p-button-success:not(:disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16A34A;
+    color: #ffffff;
+    border-color: #16A34A;
+  }
+  .landing-themes .p-button.p-button-success:not(:disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #BBF7D0;
+  }
+  .landing-themes .p-button.p-button-success:not(:disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803D;
+    color: #ffffff;
+    border-color: #15803D;
+  }
+  .landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22C55E;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22C55E;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-success.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22C55E;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22C55E;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-success.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22C55E;
+  }
+  .landing-themes .p-button.p-button-success.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22C55E;
+  }
+  .landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #F59E0B;
+    border: 1px solid #F59E0B;
+  }
+  .landing-themes .p-button.p-button-warning:not(:disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #D97706;
+    color: #ffffff;
+    border-color: #D97706;
+  }
+  .landing-themes .p-button.p-button-warning:not(:disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #FDE68A;
+  }
+  .landing-themes .p-button.p-button-warning:not(:disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #B45309;
+    color: #ffffff;
+    border-color: #B45309;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #F59E0B;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    color: #F59E0B;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    color: #F59E0B;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #F59E0B;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    border-color: transparent;
+    color: #F59E0B;
+  }
+  .landing-themes .p-button.p-button-warning.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    border-color: transparent;
+    color: #F59E0B;
+  }
+  .landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #A855F7;
+    border: 1px solid #A855F7;
+  }
+  .landing-themes .p-button.p-button-help:not(:disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333EA;
+    color: #ffffff;
+    border-color: #9333EA;
+  }
+  .landing-themes .p-button.p-button-help:not(:disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #E9D5FF;
+  }
+  .landing-themes .p-button.p-button-help:not(:disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7E22CE;
+    color: #ffffff;
+    border-color: #7E22CE;
+  }
+  .landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #A855F7;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #A855F7;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-help.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #A855F7;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #A855F7;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-help.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #A855F7;
+  }
+  .landing-themes .p-button.p-button-help.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #A855F7;
+  }
+  .landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #EF4444;
+    border: 1px solid #EF4444;
+  }
+  .landing-themes .p-button.p-button-danger:not(:disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #DC2626;
+    color: #ffffff;
+    border-color: #DC2626;
+  }
+  .landing-themes .p-button.p-button-danger:not(:disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(:disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #FECACA;
+  }
+  .landing-themes .p-button.p-button-danger:not(:disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(:disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #B91C1C;
+    color: #ffffff;
+    border-color: #B91C1C;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #EF4444;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #EF4444;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #EF4444;
+    border: 1px solid;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #EF4444;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-text:not(:disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #EF4444;
+  }
+  .landing-themes .p-button.p-button-danger.p-button-text:not(:disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #EF4444;
+  }
+  .landing-themes .p-button.p-button-link {
+    color: #0e7490;
+    background: transparent;
+    border: transparent;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #0e7490;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: transparent;
+  }
+  .landing-themes .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #0e7490;
+    border-color: transparent;
+  }
+  .landing-themes .p-datatable .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .landing-themes .p-datatable .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .landing-themes .p-datatable .p-datatable-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .landing-themes .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .landing-themes .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .landing-themes .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-datatable .p-sortable-column .p-sortable-column-badge {
+    border-radius: 50%;
+    height: 1.143rem;
+    min-width: 1.143rem;
+    line-height: 1.143rem;
+    color: #0e7490;
+    background: #ecfeff;
+    margin-left: 0.5rem;
+  }
+  .landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #a5f3fc;
+    outline: 0 none;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+    font-weight: 700;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #a5f3fc;
+    outline-offset: -0.15rem;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ecfeff;
+  }
+  .landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ecfeff;
+  }
+  .landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #a5f3fc;
+    outline-offset: -0.15rem;
+  }
+  .landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #a5f3fc;
+    outline-offset: -0.15rem;
+  }
+  .landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .landing-themes .p-datatable .p-column-resizer-helper {
+    background: #06b6d4;
+  }
+  .landing-themes .p-datatable .p-datatable-scrollable-header,
+  .landing-themes .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .landing-themes .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .landing-themes .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-header {
+    border-width: 1px 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-footer {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-paginator-top {
+    border-width: 0 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+    border-width: 1px 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #0e7490;
+  }
+  .landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .landing-themes .p-datatable-drag-selection-helper {
+    background: rgba(6, 182, 212, 0.16);
+  }
+  .landing-themes .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-paginator .p-paginator-first,
+  .landing-themes .p-paginator .p-paginator-prev,
+  .landing-themes .p-paginator .p-paginator-next,
+  .landing-themes .p-paginator .p-paginator-last {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .landing-themes .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .landing-themes .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .landing-themes .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .landing-themes .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .landing-themes .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .landing-themes .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .landing-themes .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .landing-themes .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .landing-themes .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .landing-themes .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .landing-themes .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .landing-themes .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .landing-themes .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #ecfeff;
+    border-color: #ecfeff;
+    color: #0e7490;
+  }
+  .landing-themes .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .landing-themes .p-tag {
+    background: #06b6d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-tag.p-tag-success {
+    background-color: #22C55E;
+    color: #ffffff;
+  }
+  .landing-themes .p-tag.p-tag-info {
+    background-color: #3B82F6;
+    color: #ffffff;
+  }
+  .landing-themes .p-tag.p-tag-warning {
+    background-color: #F59E0B;
+    color: #ffffff;
+  }
+  .landing-themes .p-tag.p-tag-danger {
+    background-color: #EF4444;
+    color: #ffffff;
+  }
+  .landing-themes .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .landing-themes .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .landing-themes .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .landing-themes .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #06b6d4;
+  }
+  .landing-themes .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .landing-themes .p-badge {
+    background: #06b6d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .landing-themes .p-badge.p-badge-secondary {
+    background-color: #64748B;
+    color: #ffffff;
+  }
+  .landing-themes .p-badge.p-badge-success {
+    background-color: #22C55E;
+    color: #ffffff;
+  }
+  .landing-themes .p-badge.p-badge-info {
+    background-color: #3B82F6;
+    color: #ffffff;
+  }
+  .landing-themes .p-badge.p-badge-warning {
+    background-color: #F59E0B;
+    color: #ffffff;
+  }
+  .landing-themes .p-badge.p-badge-danger {
+    background-color: #EF4444;
+    color: #ffffff;
+  }
+  .landing-themes .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .landing-themes .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .landing-themes .p-tag {
+    background: #06b6d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .landing-themes .p-tag.p-tag-success {
+    background-color: #22C55E;
+    color: #ffffff;
+  }
+  .landing-themes .p-tag.p-tag-info {
+    background-color: #3B82F6;
+    color: #ffffff;
+  }
+  .landing-themes .p-tag.p-tag-warning {
+    background-color: #F59E0B;
+    color: #ffffff;
+  }
+  .landing-themes .p-tag.p-tag-danger {
+    background-color: #EF4444;
+    color: #ffffff;
+  }
+    
+  
+  .landing-themes .p-button:focus {
+      box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71e7fb, 0 1px 2px 0 black;
+  }
\ No newline at end of file
diff --git a/public/styles/landing/themes/md-dark-indigo/theme.css b/public/styles/landing/themes/md-dark-indigo/theme.css
new file mode 100644
index 0000000000..adf0141170
--- /dev/null
+++ b/public/styles/landing/themes/md-dark-indigo/theme.css
@@ -0,0 +1,2347 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/themes/md-dark-indigo/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("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/themes/md-dark-indigo/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("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+.landing-themes * {
+  box-sizing: border-box;
+}
+.landing-themes .box.table-container {
+  background-color: #1e1e1e;
+}
+.landing-themes .p-component {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+}
+.landing-themes .p-component-overlay {
+  background-color: rgba(0, 0, 0, 0.32);
+  transition-duration: 0.2s;
+}
+.landing-themes .p-disabled, .landing-themes .p-component:disabled {
+  opacity: 0.38;
+}
+.landing-themes .p-error {
+  color: #f44435;
+}
+.landing-themes .p-text-secondary {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .pi {
+  font-size: 1rem;
+}
+.landing-themes .p-link {
+  font-size: 1rem;
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  border-radius: 4px;
+}
+.landing-themes .p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+.landing-themes .p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+.landing-themes .p-calendar.p-invalid.p-component > .p-inputtext {
+  border-color: #f44435;
+}
+.landing-themes .p-datepicker {
+  padding: 0.5rem;
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+}
+.landing-themes .p-datepicker:not(.p-datepicker-inline) {
+  background: #2b2b2b;
+  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);
+}
+.landing-themes .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+  background: #2b2b2b;
+}
+.landing-themes .p-datepicker .p-datepicker-header {
+  padding: 0.5rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  font-weight: 500;
+  margin: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title {
+  line-height: 2.5rem;
+}
+.landing-themes .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);
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datepicker table {
+  font-size: 1rem;
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker table th {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table th > span {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.landing-themes .p-datepicker table td {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table td > span {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  transition: none;
+  border: 1px solid transparent;
+}
+.landing-themes .p-datepicker table td > span.p-highlight {
+  color: #9FA8DA;
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-datepicker table td > span:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.87);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span.p-highlight {
+  color: #9FA8DA;
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar {
+  padding: 1rem 0;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar .p-button {
+  width: auto;
+}
+.landing-themes .p-datepicker .p-timepicker {
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker .p-timepicker button {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.landing-themes .p-datepicker .p-timepicker button:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-datepicker .p-timepicker button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker .p-timepicker button:last-child {
+  margin-top: 0.2em;
+}
+.landing-themes .p-datepicker .p-timepicker span {
+  font-size: 1.25rem;
+}
+.landing-themes .p-datepicker .p-timepicker > div {
+  padding: 0 0.5rem;
+}
+.landing-themes .p-datepicker.p-datepicker-timeonly .p-timepicker {
+  border-top: 0 none;
+}
+.landing-themes .p-datepicker .p-monthpicker {
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month {
+  padding: 0.5rem;
+  transition: none;
+  border-radius: 4px;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+  color: #9FA8DA;
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+  padding-left: 0;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+  padding-right: 0;
+  border-right: 0 none;
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .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;
+}
+@media screen and (max-width: 769px) {
+  .landing-themes .p-datepicker table th, .landing-themes .p-datepicker table td {
+    padding: 0;
+  }
+}
+.landing-themes .p-checkbox {
+  width: 18px;
+  height: 18px;
+}
+.landing-themes .p-checkbox .p-checkbox-box {
+  border: 2px solid rgba(255, 255, 255, 0.7);
+  background: #1e1e1e;
+  width: 18px;
+  height: 18px;
+  color: rgba(255, 255, 255, 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);
+}
+.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
+  transition-duration: 0.2s;
+  color: #121212;
+  font-size: 14px;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight {
+  border-color: #9FA8DA;
+  background: #9FA8DA;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  border-color: #9FA8DA;
+  background: #9FA8DA;
+  color: #121212;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  border-color: #9FA8DA;
+  background: #9FA8DA;
+  color: #121212;
+}
+.landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
+  border-color: #f44435;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  background: #9FA8DA;
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  background: #9FA8DA;
+}
+.landing-themes .p-dropdown {
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  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;
+}
+.landing-themes .p-dropdown:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-dropdown:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
+.landing-themes .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+  padding-right: 2rem;
+}
+.landing-themes .p-dropdown .p-dropdown-label {
+  background: transparent;
+  border: 0 none;
+}
+.landing-themes .p-dropdown .p-dropdown-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-dropdown .p-dropdown-label:enabled:focus {
+  outline: 0 none;
+  box-shadow: none;
+}
+.landing-themes .p-dropdown .p-dropdown-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.landing-themes .p-dropdown .p-dropdown-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2.357rem;
+}
+.landing-themes .p-dropdown.p-invalid.p-component {
+  border-color: #f44435;
+}
+.landing-themes .p-dropdown-panel {
+  background: #2b2b2b;
+  color: rgba(255, 255, 255, 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);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  background: #2b2b2b;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+  padding-right: 2rem;
+  margin-right: -2rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
+  padding-right: 4rem;
+  margin-right: -4rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
+  right: 3rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items {
+  padding: 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+  margin: 0;
+  padding: 1rem 1rem;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+  transition: none;
+  border-radius: 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  color: #9FA8DA;
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-dropdown {
+  background: rgba(255, 255, 255, 0.06);
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
+  background-color: transparent;
+}
+.landing-themes .p-inputnumber.p-invalid.p-component > .p-inputtext {
+  border-color: #f44435;
+}
+.landing-themes .p-inputtext {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  padding: 1rem 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  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;
+}
+.landing-themes .p-inputtext:enabled:hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-inputtext:enabled:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
+.landing-themes .p-inputtext.p-invalid.p-component {
+  border-color: #f44435;
+}
+.landing-themes .p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+.landing-themes .p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-float-label > label {
+  left: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  transition-duration: 0.2s;
+}
+.landing-themes .p-float-label > label.p-error {
+  color: #f44435;
+}
+.landing-themes .p-input-icon-left > i:first-of-type,
+.landing-themes .p-input-icon-left > svg:first-of-type,
+.landing-themes .p-input-icon-left > .p-input-prefix {
+  left: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-input-icon-left > .p-inputtext {
+  padding-left: 3rem;
+}
+.landing-themes .p-input-icon-left.p-float-label > label {
+  left: 3rem;
+}
+.landing-themes .p-input-icon-right > i:last-of-type,
+.landing-themes .p-input-icon-right > svg:last-of-type,
+.landing-themes .p-input-icon-right > .p-input-suffix {
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-input-icon-right > .p-inputtext {
+  padding-right: 3rem;
+}
+.landing-themes ::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes :-moz-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes ::-moz-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes :-ms-input-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-input-filled .p-inputtext {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.landing-themes .p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+.landing-themes .p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-multiselect {
+  background: #1e1e1e;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  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;
+}
+.landing-themes .p-multiselect:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-multiselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
+.landing-themes .p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 2rem;
+}
+.landing-themes .p-multiselect .p-multiselect-label {
+  padding: 1rem 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);
+}
+.landing-themes .p-multiselect .p-multiselect-label.p-placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+  border-radius: 4px;
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-multiselect .p-multiselect-trigger {
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  width: 2.357rem;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.landing-themes .p-multiselect .p-multiselect-clear-icon {
+  color: rgba(255, 255, 255, 0.6);
+  right: 2.357rem;
+}
+.landing-themes .p-multiselect.p-invalid.p-component {
+  border-color: #f44435;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.5rem 1rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
+  padding: 1rem 1rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 2rem;
+}
+.landing-themes .p-multiselect-panel {
+  background: #2b2b2b;
+  color: rgba(255, 255, 255, 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);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  background: #2b2b2b;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
+  margin: 0 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+  padding-right: 2rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+  right: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items {
+  padding: 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+  margin: 0;
+  padding: 1rem 1rem;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+  transition: none;
+  border-radius: 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+  color: #9FA8DA;
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  background: transparent;
+  font-weight: 400;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-multiselect {
+  background: rgba(255, 255, 255, 0.06);
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+.landing-themes .p-radiobutton {
+  width: 20px;
+  height: 20px;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box {
+  border: 2px solid rgba(255, 255, 255, 0.7);
+  background: #1e1e1e;
+  width: 20px;
+  height: 20px;
+  color: rgba(255, 255, 255, 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);
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+  width: 10px;
+  height: 10px;
+  transition-duration: 0.2s;
+  background-color: #9FA8DA;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight {
+  border-color: #9FA8DA;
+  background: #121212;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  border-color: #9FA8DA;
+  background: #121212;
+  color: #9FA8DA;
+}
+.landing-themes .p-radiobutton.p-invalid > .p-radiobutton-box {
+  border-color: #f44435;
+}
+.landing-themes .p-radiobutton:focus {
+  outline: 0 none;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  background: #121212;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  background: #121212;
+}
+.landing-themes .p-slider {
+  background: rgba(255, 255, 255, 0.3);
+  border: 0 none;
+  border-radius: 4px;
+}
+.landing-themes .p-slider.p-slider-horizontal {
+  height: 2px;
+}
+.landing-themes .p-slider.p-slider-horizontal .p-slider-handle {
+  margin-top: -10px;
+  margin-left: -10px;
+}
+.landing-themes .p-slider.p-slider-vertical {
+  width: 2px;
+}
+.landing-themes .p-slider.p-slider-vertical .p-slider-handle {
+  margin-left: -10px;
+  margin-bottom: -10px;
+}
+.landing-themes .p-slider .p-slider-handle {
+  height: 20px;
+  width: 20px;
+  background: #9FA8DA;
+  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);
+}
+.landing-themes .p-slider .p-slider-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-slider .p-slider-range {
+  background: #9FA8DA;
+}
+.landing-themes .p-slider:not(.p-disabled) .p-slider-handle:hover {
+  background: #9FA8DA;
+  border-color: 0 none;
+}
+.landing-themes .p-button {
+  color: #121212;
+  background: #9FA8DA;
+  border: 0 none;
+  padding: 0.714rem 1rem;
+  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;
+}
+.landing-themes .p-button:enabled:hover, .landing-themes .p-button:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(159, 168, 218, 0.92);
+  color: #121212;
+  border-color: transparent;
+}
+.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active {
+  background: rgba(159, 168, 218, 0.68);
+  color: #121212;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-outlined {
+  background-color: transparent;
+  color: #9FA8DA;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(159, 168, 218, 0.04);
+  color: #9FA8DA;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-text {
+  background-color: transparent;
+  color: #9FA8DA;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:hover, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(159, 168, 218, 0.04);
+  color: #9FA8DA;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text.p-button-plain {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:active, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 255, 255, 0.16);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-button .p-button-icon-left {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-right {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-bottom {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-top {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button .p-badge {
+  margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+  color: #9FA8DA;
+  background-color: #121212;
+}
+.landing-themes .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);
+}
+.landing-themes .p-button.p-button-rounded {
+  border-radius: 2rem;
+}
+.landing-themes .p-button.p-button-icon-only {
+  width: 3rem;
+  padding: 0.714rem;
+}
+.landing-themes .p-button.p-button-icon-only .p-button-icon-left,
+.landing-themes .p-button.p-button-icon-only .p-button-icon-right {
+  margin: 0;
+}
+.landing-themes .p-button.p-button-icon-only.p-button-rounded {
+  border-radius: 50%;
+  height: 3rem;
+}
+.landing-themes .p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.62475rem 0.875rem;
+}
+.landing-themes .p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.landing-themes .p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.8925rem 1.25rem;
+}
+.landing-themes .p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon {
+  margin: 0;
+}
+.landing-themes .p-fluid .p-button {
+  width: 100%;
+}
+.landing-themes .p-fluid .p-button-icon-only {
+  width: 3rem;
+}
+.landing-themes .p-fluid .p-buttonset {
+  display: flex;
+}
+.landing-themes .p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
+.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary {
+  color: #121212;
+  background: #F48FB1;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(244, 143, 177, 0.92);
+  color: #121212;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active {
+  background: rgba(244, 143, 177, 0.68);
+  color: #121212;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  background-color: transparent;
+  color: #F48FB1;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(244, 143, 177, 0.04);
+  color: #F48FB1;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(244, 143, 177, 0.16);
+  color: #F48FB1;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text {
+  background-color: transparent;
+  color: #F48FB1;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(244, 143, 177, 0.04);
+  border-color: transparent;
+  color: #F48FB1;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(244, 143, 177, 0.16);
+  border-color: transparent;
+  color: #F48FB1;
+}
+.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info {
+  color: #212121;
+  background: #90CAF9;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(144, 202, 249, 0.92);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active {
+  background: rgba(144, 202, 249, 0.68);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined {
+  background-color: transparent;
+  color: #90CAF9;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(144, 202, 249, 0.04);
+  color: #90CAF9;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(144, 202, 249, 0.16);
+  color: #90CAF9;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text {
+  background-color: transparent;
+  color: #90CAF9;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(144, 202, 249, 0.04);
+  border-color: transparent;
+  color: #90CAF9;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(144, 202, 249, 0.16);
+  border-color: transparent;
+  color: #90CAF9;
+}
+.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success {
+  color: #212121;
+  background: #C5E1A5;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(197, 225, 165, 0.92);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active {
+  background: rgba(197, 225, 165, 0.68);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined {
+  background-color: transparent;
+  color: #C5E1A5;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(197, 225, 165, 0.04);
+  color: #C5E1A5;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(197, 225, 165, 0.16);
+  color: #C5E1A5;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text {
+  background-color: transparent;
+  color: #C5E1A5;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(197, 225, 165, 0.04);
+  border-color: transparent;
+  color: #C5E1A5;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(197, 225, 165, 0.16);
+  border-color: transparent;
+  color: #C5E1A5;
+}
+.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning {
+  color: #212121;
+  background: #FFF59D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 245, 157, 0.92);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 245, 157, 0.68);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined {
+  background-color: transparent;
+  color: #FFF59D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 245, 157, 0.04);
+  color: #FFF59D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 245, 157, 0.16);
+  color: #FFF59D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text {
+  background-color: transparent;
+  color: #FFF59D;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 245, 157, 0.04);
+  border-color: transparent;
+  color: #FFF59D;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 245, 157, 0.16);
+  border-color: transparent;
+  color: #FFF59D;
+}
+.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help {
+  color: #212121;
+  background: #CE93D8;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(206, 147, 216, 0.92);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active {
+  background: rgba(206, 147, 216, 0.68);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined {
+  background-color: transparent;
+  color: #CE93D8;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(206, 147, 216, 0.04);
+  color: #CE93D8;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(206, 147, 216, 0.16);
+  color: #CE93D8;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text {
+  background-color: transparent;
+  color: #CE93D8;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(206, 147, 216, 0.04);
+  border-color: transparent;
+  color: #CE93D8;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(206, 147, 216, 0.16);
+  border-color: transparent;
+  color: #CE93D8;
+}
+.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger {
+  color: #212121;
+  background: #EF9A9A;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(239, 154, 154, 0.92);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active {
+  background: rgba(239, 154, 154, 0.68);
+  color: #212121;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined {
+  background-color: transparent;
+  color: #EF9A9A;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(239, 154, 154, 0.04);
+  color: #EF9A9A;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(239, 154, 154, 0.16);
+  color: #EF9A9A;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text {
+  background-color: transparent;
+  color: #EF9A9A;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(239, 154, 154, 0.04);
+  border-color: transparent;
+  color: #EF9A9A;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(239, 154, 154, 0.16);
+  border-color: transparent;
+  color: #EF9A9A;
+}
+.landing-themes .p-button.p-button-link {
+  color: #9FA8DA;
+  background: transparent;
+  border: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover {
+  background: transparent;
+  color: #9FA8DA;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover .p-button-label, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label {
+  text-decoration: underline;
+}
+.landing-themes .p-button.p-button-link:enabled:focus, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus {
+  background: transparent;
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:active, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):active {
+  background: transparent;
+  color: #9FA8DA;
+  border-color: transparent;
+}
+.landing-themes .p-datatable .p-paginator-top {
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+}
+.landing-themes .p-datatable .p-paginator-bottom {
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+}
+.landing-themes .p-datatable .p-datatable-header {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-width: 0 0 1px 0;
+  padding: 1rem 1rem;
+  font-weight: 500;
+}
+.landing-themes .p-datatable .p-datatable-footer {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: 1px solid #404040;
+  border-width: 0 0 1px 0;
+  padding: 1rem 1rem;
+  font-weight: 500;
+}
+.landing-themes .p-datatable .p-datatable-thead > tr > th {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #404040;
+  border-width: 0 0 1px 0;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+  transition: none;
+}
+.landing-themes .p-datatable .p-datatable-tfoot > tr > td {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid 3404040;
+  border-width: 0 0 1px 0;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.87);
+  background: #1e1e1e;
+}
+.landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon {
+  color: rgba(255, 255, 255, 0.6);
+  margin-left: 0.5rem;
+}
+.landing-themes .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 1.143rem;
+  min-width: 1.143rem;
+  line-height: 1.143rem;
+  color: #9FA8DA;
+  background: rgba(159, 168, 218, 0.16);
+  margin-left: 0.5rem;
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column:focus {
+  box-shadow: none;
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  transition: none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td {
+  text-align: left;
+  border: 1px solid #404040;
+  border-width: 0 0 1px 0;
+  padding: 1rem 1rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+  font-weight: 500;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight {
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus {
+  outline: 0.15rem solid transparent;
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus {
+  outline: 0.15rem solid transparent;
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.87);
+}
+.landing-themes .p-datatable .p-column-resizer-helper {
+  background: #9FA8DA;
+}
+.landing-themes .p-datatable .p-datatable-scrollable-header,
+.landing-themes .p-datatable .p-datatable-scrollable-footer {
+  background: #1e1e1e;
+}
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #1e1e1e;
+}
+.landing-themes .p-datatable .p-datatable-loading-icon {
+  font-size: 2rem;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+  background: rgba(255, 255, 255, 0.02);
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+  color: #9FA8DA;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+  color: #9FA8DA;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+  background: rgba(255, 255, 255, 0.02);
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable-drag-selection-helper {
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-column-filter-row .p-column-filter-menu-button,
+.landing-themes .p-column-filter-row .p-column-filter-clear-button {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-column-filter-menu-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.landing-themes .p-column-filter-menu-button:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+  background: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+}
+.landing-themes .p-column-filter-menu-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-column-filter-clear-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  border: 0 none;
+  background: transparent;
+  border-radius: 50%;
+  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+.landing-themes .p-column-filter-clear-button:hover {
+  color: rgba(255, 255, 255, 0.6);
+  border-color: transparent;
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-column-filter-clear-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-column-filter-overlay {
+  background: #2b2b2b;
+  color: rgba(255, 255, 255, 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;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items {
+  padding: 0;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+  margin: 0;
+  padding: 1rem 1rem;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.87);
+  background: transparent;
+  transition: none;
+  border-radius: 0;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+  color: #9FA8DA;
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  margin: 0.5rem 0;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-operator {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.87);
+  background: #2b2b2b;
+  margin: 0;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+  border-bottom: 0 none;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-add-rule {
+  padding: 1rem 1rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+  padding: 1rem;
+}
+.landing-themes .p-paginator {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 0.87);
+  border: solid #404040;
+  border-width: 0;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+}
+.landing-themes .p-paginator .p-paginator-first,
+.landing-themes .p-paginator .p-paginator-prev,
+.landing-themes .p-paginator .p-paginator-next,
+.landing-themes .p-paginator .p-paginator-last {
+  background-color: transparent;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+  min-width: 3rem;
+  height: 3rem;
+  margin: 0.143rem;
+  transition: none;
+  border-radius: 50%;
+}
+.landing-themes .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: transparent;
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-paginator .p-paginator-first {
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.landing-themes .p-paginator .p-paginator-last {
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+}
+.landing-themes .p-paginator .p-dropdown {
+  margin-left: 0.5rem;
+  height: 3rem;
+}
+.landing-themes .p-paginator .p-dropdown .p-dropdown-label {
+  padding-right: 0;
+}
+.landing-themes .p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.landing-themes .p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
+.landing-themes .p-paginator .p-paginator-current {
+  background-color: transparent;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+  min-width: 3rem;
+  height: 3rem;
+  margin: 0.143rem;
+  padding: 0 0.5rem;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page {
+  background-color: transparent;
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+  min-width: 3rem;
+  height: 3rem;
+  margin: 0.143rem;
+  transition: none;
+  border-radius: 50%;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+  background: rgba(159, 168, 218, 0.16);
+  border-color: rgba(159, 168, 218, 0.16);
+  color: #9FA8DA;
+}
+.landing-themes .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: transparent;
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.landing-themes .p-button {
+  font-weight: 500;
+  min-width: 4rem;
+}
+.landing-themes .p-button.p-button-icon-only {
+  min-width: auto;
+}
+.landing-themes .p-button:enabled:focus, .landing-themes .p-button:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(159, 168, 218, 0.76);
+}
+.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active {
+  background: rgba(159, 168, 218, 0.68);
+}
+.landing-themes .p-button .p-ink {
+  background-color: rgba(255, 255, 255, 0.32);
+}
+.landing-themes .p-button.p-button-text:enabled:focus, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(159, 168, 218, 0.12);
+}
+.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-button.p-button-text .p-ink, .landing-themes .p-button.p-button-outlined .p-ink {
+  background-color: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-button.p-button-outlined {
+  box-shadow: inset 0 0 0 1px;
+}
+.landing-themes .p-button.p-button-outlined:enabled:focus {
+  box-shadow: inset 0 0 0 1px;
+}
+.landing-themes .p-button.p-button-outlined:enabled:active {
+  box-shadow: inset 0 0 0 1px;
+}
+.landing-themes .p-button:disabled {
+  background-color: rgba(255, 255, 255, 0.12) !important;
+  color: rgba(255, 255, 255, 0.38) !important;
+  opacity: 1;
+}
+.landing-themes .p-button:disabled.p-button-text {
+  background-color: transparent !important;
+  color: rgba(255, 255, 255, 0.38) !important;
+}
+.landing-themes .p-button:disabled.p-button-outlined {
+  background-color: transparent !important;
+  color: rgba(255, 255, 255, 0.38) !important;
+  border-color: rgba(255, 255, 255, 0.38) !important;
+}
+.landing-themes .p-button.p-button-raised:enabled:focus, .landing-themes .p-button.p-button-raised:not(button):not(a):not(.p-disabled):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);
+}
+.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(244, 143, 177, 0.76);
+}
+.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active {
+  background: rgba(244, 143, 177, 0.68);
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:focus, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(244, 143, 177, 0.12);
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(244, 143, 177, 0.16);
+}
+.landing-themes .p-button.p-button-secondary.p-button-text .p-ink, .landing-themes .p-button.p-button-secondary.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  background-color: rgba(244, 143, 177, 0.16);
+}
+.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(144, 202, 249, 0.76);
+}
+.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active {
+  background: rgba(144, 202, 249, 0.68);
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:focus, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-info.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(144, 202, 249, 0.12);
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(144, 202, 249, 0.16);
+}
+.landing-themes .p-button.p-button-info.p-button-text .p-ink, .landing-themes .p-button.p-button-info.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-info.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  background-color: rgba(144, 202, 249, 0.16);
+}
+.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(197, 225, 165, 0.76);
+}
+.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active {
+  background: rgba(197, 225, 165, 0.68);
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:focus, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-success.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(197, 225, 165, 0.12);
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(197, 225, 165, 0.16);
+}
+.landing-themes .p-button.p-button-success.p-button-text .p-ink, .landing-themes .p-button.p-button-success.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-success.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  background-color: rgba(197, 225, 165, 0.16);
+}
+.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(255, 245, 157, 0.76);
+}
+.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 245, 157, 0.68);
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:focus, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-warning.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(255, 245, 157, 0.12);
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 245, 157, 0.16);
+}
+.landing-themes .p-button.p-button-warning.p-button-text .p-ink, .landing-themes .p-button.p-button-warning.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  background-color: rgba(255, 245, 157, 0.16);
+}
+.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(206, 147, 216, 0.76);
+}
+.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active {
+  background: rgba(206, 147, 216, 0.68);
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:focus, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-help.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(206, 147, 216, 0.12);
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(206, 147, 216, 0.16);
+}
+.landing-themes .p-button.p-button-help.p-button-text .p-ink, .landing-themes .p-button.p-button-help.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-help.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  background-color: rgba(206, 147, 216, 0.16);
+}
+.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(239, 154, 154, 0.76);
+}
+.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active {
+  background: rgba(239, 154, 154, 0.68);
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:focus, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-danger.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(239, 154, 154, 0.12);
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(239, 154, 154, 0.16);
+}
+.landing-themes .p-button.p-button-danger.p-button-text .p-ink, .landing-themes .p-button.p-button-danger.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  background-color: rgba(239, 154, 154, 0.16);
+}
+.landing-themes .p-calendar-w-btn {
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: #1e1e1e;
+  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);
+}
+.landing-themes .p-calendar-w-btn .p-inputtext {
+  background-image: none;
+  background-color: transparent;
+  border: 0 none;
+}
+.landing-themes .p-calendar-w-btn .p-inputtext:enabled:focus {
+  box-shadow: none;
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button {
+  background-color: transparent;
+  border: 0 none;
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button span {
+  color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
+  background: rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
+  background: rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-calendar-w-btn:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.6);
+}
+.landing-themes .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+  border-color: #9FA8DA;
+  box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+}
+.landing-themes .p-datepicker .p-datepicker-header {
+  border-bottom: 0 none;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title {
+  margin: 0 auto 0 0;
+  order: 1;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev {
+  order: 2;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next {
+  order: 3;
+}
+.landing-themes .p-datepicker table th {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.38);
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38);
+}
+.landing-themes .p-datepicker table td.p-datepicker-today.p-highlight {
+  box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-calendar.p-invalid .p-inputtext:enabled:focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+.landing-themes .p-calendar.p-invalid.p-calendar-w-btn {
+  border-color: #f44435;
+}
+.landing-themes .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+  box-shadow: none;
+}
+.landing-themes .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.landing-themes .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .landing-themes .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext {
+  border: 0 none;
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid .p-inputtext {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:hover {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled).p-focus, .landing-themes .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+  border: 0 none;
+  background-image: none;
+}
+.landing-themes .p-checkbox {
+  border-radius: 50%;
+  transition: box-shadow 0.2s;
+}
+.landing-themes .p-checkbox .p-checkbox-box {
+  border-color: rgba(255, 255, 255, 0.7);
+  border-radius: 2px;
+  position: relative;
+}
+.landing-themes .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
+  border-color: rgba(255, 255, 255, 0.7);
+}
+.landing-themes .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
+  border-color: rgba(255, 255, 255, 0.7);
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus {
+  border-color: #9FA8DA;
+}
+.landing-themes .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;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused {
+  box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
+}
+.landing-themes .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused {
+  box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+  background-color: #1e1e1e;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
+  background-color: #1e1e1e;
+}
+@keyframes checkbox-check {
+  0% {
+    width: 0;
+    height: 0;
+    border-color: #121212;
+    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: #121212;
+    transform: translate3d(0, -10px, 0) rotate(45deg);
+  }
+}
+.landing-themes .p-datatable .p-sortable-column {
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-sortable-column:focus {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr {
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #9FA8DA;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #9FA8DA;
+}
+.landing-themes .p-dropdown .p-inputtext, .landing-themes .p-dropdown .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-dropdown .p-inputtext {
+  border: 0 none;
+}
+.landing-themes .p-dropdown:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+}
+.landing-themes .p-dropdown-item .p-ink {
+  background-color: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-input-filled .p-dropdown {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.landing-themes .p-input-filled .p-dropdown .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.landing-themes .p-input-filled .p-dropdown .p-inputtext:enabled:hover, .landing-themes .p-input-filled .p-dropdown .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-dropdown .p-inputtext {
+  border: 0 none;
+}
+.landing-themes .p-input-filled .p-dropdown.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-dropdown.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-dropdown.p-invalid:not(.p-disabled).p-focus, .landing-themes .p-input-filled .p-dropdown.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-dropdown.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+.landing-themes .p-inputtext:enabled:focus {
+  box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+}
+.landing-themes .p-inputtext:enabled:focus.p-invalid {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+.landing-themes .p-input-filled .p-inputtext {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.landing-themes .p-input-filled .p-inputtext.p-invalid.p-component {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-inputtext.p-invalid.p-component:enabled:hover {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-inputtext.p-invalid.p-component:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .p-inputnumber.p-invalid .p-inputtext:enabled:focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+.landing-themes .p-input-filled .p-inputnumber.p-invalid .p-inputtext {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:hover {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .p-float-label input:focus ~ label,
+.landing-themes .p-float-label input.p-filled ~ label,
+.landing-themes .p-float-label textarea:focus ~ label,
+.landing-themes .p-float-label textarea.p-filled ~ label,
+.landing-themes .p-float-label .p-inputwrapper-focus ~ label,
+.landing-themes .p-float-label .p-inputwrapper-filled ~ label {
+  top: -0.5rem !important;
+  background-color: #1e1e1e;
+  padding: 2px 4px;
+  margin-left: -4px;
+  margin-top: 0;
+}
+.landing-themes .p-float-label textarea ~ label {
+  margin-top: 0;
+}
+.landing-themes .p-float-label input:focus ~ label,
+.landing-themes .p-float-label .p-inputwrapper-focus ~ label {
+  color: #9FA8DA;
+}
+.landing-themes .p-input-filled .p-float-label .p-inputtext {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.landing-themes .p-input-filled .p-float-label input:focus ~ label,
+.landing-themes .p-input-filled .p-float-label input.p-filled ~ label,
+.landing-themes .p-input-filled .p-float-label textarea:focus ~ label,
+.landing-themes .p-input-filled .p-float-label textarea.p-filled ~ label,
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-focus ~ label,
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-filled ~ label {
+  top: 0.25rem !important;
+  margin-top: 0;
+  background: transparent;
+}
+.landing-themes .p-multiselect .p-multiselect-label, .landing-themes .p-multiselect .p-multiselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-multiselect .p-multiselect-label {
+  border: 0 none;
+}
+.landing-themes .p-multiselect:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+  background-color: rgba(159, 168, 218, 0.16);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+  background: rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+  background: rgba(159, 168, 218, 0.24);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+  background: rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-input-filled .p-multiselect {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid transparent;
+  background: rgba(255, 255, 255, 0.06) no-repeat;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3));
+  background-size: 0 2px, 100% 1px;
+  background-position: 50% 100%, 50% 100%;
+  background-origin: border-box;
+}
+.landing-themes .p-input-filled .p-multiselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.landing-themes .p-input-filled .p-multiselect .p-inputtext:enabled:hover, .landing-themes .p-input-filled .p-multiselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-multiselect .p-multiselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.landing-themes .p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.landing-themes .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;
+}
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+.landing-themes .p-input-filled .p-multiselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-multiselect.p-invalid:not(.p-disabled):hover {
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-input-filled .p-multiselect.p-invalid:not(.p-disabled).p-focus, .landing-themes .p-input-filled .p-multiselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+  box-shadow: none;
+  background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+}
+.landing-themes .p-multiselect.p-invalid:not(.p-disabled).p-focus {
+  box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+}
+.landing-themes .p-paginator {
+  justify-content: flex-end;
+}
+.landing-themes .p-paginator .p-paginator-element:focus {
+  background: rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-paginator .p-paginator-element:focus.p-highlight {
+  background: rgba(159, 168, 218, 0.24);
+}
+.landing-themes .p-progressbar {
+  border-radius: 0;
+}
+.landing-themes .p-progressbar .p-progressbar-label {
+  display: none;
+}
+.landing-themes .p-radiobutton {
+  border-radius: 50%;
+  transition: box-shadow 0.2s;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+  border: 2px solid rgba(255, 255, 255, 0.7);
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+  border: 2px solid rgba(255, 255, 255, 0.7);
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus {
+  border-color: #9FA8DA;
+}
+.landing-themes .p-radiobutton:not(.p-radiobutton-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+}
+.landing-themes .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused {
+  box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+}
+.landing-themes .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
+}
+.landing-themes .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused {
+  box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box {
+  background-color: #1e1e1e;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  background-color: #1e1e1e;
+}
+.landing-themes .p-slider .p-slider-handle {
+  transition: transform 0.2s, box-shadow 0.2s;
+  transform: scale(0.7);
+}
+.landing-themes .p-slider .p-slider-handle:focus {
+  box-shadow: 0 0 1px 10px rgba(244, 143, 177, 0.2);
+}
+.landing-themes .p-slider.p-slider-sliding .p-slider-handle {
+  transform: scale(1);
+}
+
+/* Customizations to the designer theme should be defined here */
diff --git a/public/styles/landing/themes/md-light-indigo/theme.css b/public/styles/landing/themes/md-light-indigo/theme.css
new file mode 100644
index 0000000000..dd747767bb
--- /dev/null
+++ b/public/styles/landing/themes/md-light-indigo/theme.css
@@ -0,0 +1,2344 @@
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/themes/md-dark-indigo/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("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/themes/md-dark-indigo/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("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+.landing-themes * {
+  box-sizing: border-box;
+}
+.landing-themes .p-component {
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  font-size: 1rem;
+  font-weight: normal;
+}
+.landing-themes .p-component-overlay {
+  background-color: rgba(0, 0, 0, 0.32);
+  transition-duration: 0.2s;
+}
+.landing-themes .p-disabled, .landing-themes .p-component:disabled {
+  opacity: 0.38;
+}
+.landing-themes .p-error {
+  color: #B00020;
+}
+.landing-themes .p-text-secondary {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .pi {
+  font-size: 1rem;
+}
+.landing-themes .p-link {
+  font-size: 1rem;
+  font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
+  border-radius: 4px;
+}
+.landing-themes .p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+.landing-themes .p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+@keyframes p-component-overlay-enter-animation {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: var(--maskbg);
+  }
+}
+@keyframes p-component-overlay-leave-animation {
+  from {
+    background-color: var(--maskbg);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+.landing-themes .p-calendar.p-invalid.p-component > .p-inputtext {
+  border-color: #B00020;
+}
+.landing-themes .p-datepicker {
+  padding: 0.5rem;
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+}
+.landing-themes .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);
+}
+.landing-themes .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+  background: #ffffff;
+}
+.landing-themes .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;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next {
+  width: 2.5rem;
+  height: 2.5rem;
+  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;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+.landing-themes .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);
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev:focus,
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title {
+  line-height: 2.5rem;
+}
+.landing-themes .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);
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title select:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datepicker table {
+  font-size: 1rem;
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker table th {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table th > span {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+.landing-themes .p-datepicker table td {
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker table td > span {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  transition: none;
+  border: 1px solid transparent;
+}
+.landing-themes .p-datepicker table td > span.p-highlight {
+  color: #3F51B5;
+  background: rgba(63, 81, 181, 0.12);
+}
+.landing-themes .p-datepicker table td > span:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  border-color: black;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span.p-highlight {
+  color: #3F51B5;
+  background: rgba(63, 81, 181, 0.12);
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar {
+  padding: 1rem 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+.landing-themes .p-datepicker .p-datepicker-buttonbar .p-button {
+  width: auto;
+}
+.landing-themes .p-datepicker .p-timepicker {
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  padding: 0.5rem;
+}
+.landing-themes .p-datepicker .p-timepicker button {
+  width: 2.5rem;
+  height: 2.5rem;
+  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;
+}
+.landing-themes .p-datepicker .p-timepicker button:enabled:hover {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: transparent;
+  background: rgba(0, 0, 0, 0.04);
+}
+.landing-themes .p-datepicker .p-timepicker button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker .p-timepicker button:last-child {
+  margin-top: 0.2em;
+}
+.landing-themes .p-datepicker .p-timepicker span {
+  font-size: 1.25rem;
+}
+.landing-themes .p-datepicker .p-timepicker > div {
+  padding: 0 0.5rem;
+}
+.landing-themes .p-datepicker.p-datepicker-timeonly .p-timepicker {
+  border-top: 0 none;
+}
+.landing-themes .p-datepicker .p-monthpicker {
+  margin: 0.5rem 0;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month {
+  padding: 0.5rem;
+  transition: none;
+  border-radius: 4px;
+}
+.landing-themes .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+  color: #3F51B5;
+  background: rgba(63, 81, 181, 0.12);
+}
+.landing-themes .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;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+  padding-left: 0;
+}
+.landing-themes .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+  padding-right: 0;
+  border-right: 0 none;
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.landing-themes .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-highlight):not(.p-disabled):hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.landing-themes .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;
+}
+@media screen and (max-width: 769px) {
+  .landing-themes .p-datepicker table th, .landing-themes .p-datepicker table td {
+    padding: 0;
+  }
+}
+.landing-themes .p-checkbox {
+  width: 18px;
+  height: 18px;
+}
+.landing-themes .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);
+}
+.landing-themes .p-checkbox .p-checkbox-box .p-checkbox-icon {
+  transition-duration: 0.2s;
+  color: #ffffff;
+  font-size: 14px;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight {
+  border-color: #3F51B5;
+  background: #3F51B5;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled):hover {
+  border-color: #3F51B5;
+  background: #3F51B5;
+  color: #ffffff;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  border-color: #3F51B5;
+  background: #3F51B5;
+  color: #ffffff;
+}
+.landing-themes .p-checkbox.p-invalid > .p-checkbox-box {
+  border-color: #B00020;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+  background-color: #f5f5f5;
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
+  background: #3F51B5;
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+  background-color: #ececec;
+}
+.landing-themes .p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
+  background: #3F51B5;
+}
+.landing-themes .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;
+}
+.landing-themes .p-dropdown:not(.p-disabled):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-dropdown:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.landing-themes .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+  padding-right: 2rem;
+}
+.landing-themes .p-dropdown .p-dropdown-label {
+  background: transparent;
+  border: 0 none;
+}
+.landing-themes .p-dropdown .p-dropdown-label.p-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-dropdown .p-dropdown-label:enabled:focus {
+  outline: 0 none;
+  box-shadow: none;
+}
+.landing-themes .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;
+}
+.landing-themes .p-dropdown .p-dropdown-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 2.357rem;
+}
+.landing-themes .p-dropdown.p-invalid.p-component {
+  border-color: #B00020;
+}
+.landing-themes .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);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header {
+  padding: 1rem;
+  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;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+  padding-right: 2rem;
+  margin-right: -2rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter {
+  padding-right: 4rem;
+  margin-right: -4rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-header .p-dropdown-clearable-filter .p-dropdown-filter-clear-icon {
+  right: 3rem;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items {
+  padding: 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+  margin: 0;
+  padding: 1rem 1rem;
+  border: 0 none;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+  transition: none;
+  border-radius: 0;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+  color: #3F51B5;
+  background: rgba(63, 81, 181, 0.12);
+}
+.landing-themes .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);
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
+.landing-themes .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-dropdown {
+  background: #f5f5f5;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
+  background-color: transparent;
+}
+.landing-themes .p-inputnumber.p-invalid.p-component > .p-inputtext {
+  border-color: #B00020;
+}
+.landing-themes .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: 1rem 1rem;
+  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;
+}
+.landing-themes .p-inputtext:enabled:hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-inputtext:enabled:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.landing-themes .p-inputtext.p-invalid.p-component {
+  border-color: #B00020;
+}
+.landing-themes .p-inputtext.p-inputtext-sm {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+.landing-themes .p-inputtext.p-inputtext-lg {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-float-label > label {
+  left: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  transition-duration: 0.2s;
+}
+.landing-themes .p-float-label > label.p-error {
+  color: #B00020;
+}
+.landing-themes .p-input-icon-left > i:first-of-type,
+.landing-themes .p-input-icon-left > svg:first-of-type,
+.landing-themes .p-input-icon-left > .p-input-prefix {
+  left: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-input-icon-left > .p-inputtext {
+  padding-left: 3rem;
+}
+.landing-themes .p-input-icon-left.p-float-label > label {
+  left: 3rem;
+}
+.landing-themes .p-input-icon-right > i:last-of-type,
+.landing-themes .p-input-icon-right > svg:last-of-type,
+.landing-themes .p-input-icon-right > .p-input-suffix {
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-input-icon-right > .p-inputtext {
+  padding-right: 3rem;
+}
+.landing-themes ::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes :-moz-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes ::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes :-ms-input-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-input-filled .p-inputtext {
+  background-color: #f5f5f5;
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:hover {
+  background-color: #ececec;
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:focus {
+  background-color: #dcdcdc;
+}
+.landing-themes .p-inputtext-sm .p-inputtext {
+  font-size: 0.875rem;
+  padding: 0.875rem 0.875rem;
+}
+.landing-themes .p-inputtext-lg .p-inputtext {
+  font-size: 1.25rem;
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .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;
+}
+.landing-themes .p-multiselect:not(.p-disabled):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-multiselect:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.landing-themes .p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 2rem;
+}
+.landing-themes .p-multiselect .p-multiselect-label {
+  padding: 1rem 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);
+}
+.landing-themes .p-multiselect .p-multiselect-label.p-placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token {
+  padding: 0.5rem 1rem;
+  margin-right: 0.5rem;
+  background: rgba(63, 81, 181, 0.12);
+  color: #3F51B5;
+  border-radius: 4px;
+}
+.landing-themes .p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  margin-left: 0.5rem;
+}
+.landing-themes .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;
+}
+.landing-themes .p-multiselect .p-multiselect-clear-icon {
+  color: rgba(0, 0, 0, 0.6);
+  right: 2.357rem;
+}
+.landing-themes .p-multiselect.p-invalid.p-component {
+  border-color: #B00020;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+  padding: 0.5rem 1rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label.p-multiselect-items-label {
+  padding: 1rem 1rem;
+}
+.landing-themes .p-inputwrapper-filled.p-multiselect.p-multiselect-clearable .p-multiselect-label {
+  padding-right: 2rem;
+}
+.landing-themes .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);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header {
+  padding: 1rem;
+  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;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
+  margin: 0 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+  padding-right: 2rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+  right: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+  width: 2.5rem;
+  height: 2.5rem;
+  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;
+}
+.landing-themes .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);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items {
+  padding: 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+  margin: 0;
+  padding: 1rem 1rem;
+  border: 0 none;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+  transition: none;
+  border-radius: 0;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+  color: #3F51B5;
+  background: rgba(63, 81, 181, 0.12);
+}
+.landing-themes .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);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
+  margin: 0;
+  padding: 1rem;
+  color: rgba(0, 0, 0, 0.6);
+  background: #ffffff;
+  font-weight: 400;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+  padding: 1rem 1rem;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-multiselect {
+  background: #f5f5f5;
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus {
+  background-color: #dcdcdc;
+}
+.landing-themes .p-radiobutton {
+  width: 20px;
+  height: 20px;
+}
+.landing-themes .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);
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+  width: 10px;
+  height: 10px;
+  transition-duration: 0.2s;
+  background-color: #3F51B5;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight {
+  border-color: #3F51B5;
+  background: #ffffff;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  border-color: #3F51B5;
+  background: #ffffff;
+  color: #3F51B5;
+}
+.landing-themes .p-radiobutton.p-invalid > .p-radiobutton-box {
+  border-color: #B00020;
+}
+.landing-themes .p-radiobutton:focus {
+  outline: 0 none;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box {
+  background-color: #f5f5f5;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  background-color: #ececec;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
+  background: #ffffff;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
+  background: #ffffff;
+}
+.landing-themes .p-slider {
+  background: #c1c1c1;
+  border: 0 none;
+  border-radius: 4px;
+}
+.landing-themes .p-slider.p-slider-horizontal {
+  height: 2px;
+}
+.landing-themes .p-slider.p-slider-horizontal .p-slider-handle {
+  margin-top: -10px;
+  margin-left: -10px;
+}
+.landing-themes .p-slider.p-slider-vertical {
+  width: 2px;
+}
+.landing-themes .p-slider.p-slider-vertical .p-slider-handle {
+  margin-left: -10px;
+  margin-bottom: -10px;
+}
+.landing-themes .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);
+}
+.landing-themes .p-slider .p-slider-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-slider .p-slider-range {
+  background: #3F51B5;
+}
+.landing-themes .p-slider:not(.p-disabled) .p-slider-handle:hover {
+  background: #3F51B5;
+  border-color: 0 none;
+}
+.landing-themes .p-button {
+  color: #ffffff;
+  background: #3F51B5;
+  border: 0 none;
+  padding: 0.714rem 1rem;
+  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;
+}
+.landing-themes .p-button:enabled:hover, .landing-themes .p-button:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(63, 81, 181, 0.92);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active {
+  background: rgba(63, 81, 181, 0.68);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-outlined {
+  background-color: transparent;
+  color: #3F51B5;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(63, 81, 181, 0.04);
+  color: #3F51B5;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(63, 81, 181, 0.16);
+  color: #3F51B5;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-button.p-button-outlined.p-button-plain:enabled:active, .landing-themes .p-button.p-button-outlined.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: rgba(0, 0, 0, 0.16);
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-button.p-button-text {
+  background-color: transparent;
+  color: #3F51B5;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:hover, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(63, 81, 181, 0.04);
+  color: #3F51B5;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(63, 81, 181, 0.16);
+  color: #3F51B5;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-text.p-button-plain {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:hover, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-button.p-button-text.p-button-plain:enabled:active, .landing-themes .p-button.p-button-text.p-button-plain:not(button):not(a):not(.p-disabled):active {
+  background: rgba(0, 0, 0, 0.16);
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-button .p-button-icon-left {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-right {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-bottom {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button .p-button-icon-top {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button .p-badge {
+  margin-left: 0.5rem;
+  min-width: 1rem;
+  height: 1rem;
+  line-height: 1rem;
+  color: #3F51B5;
+  background-color: #ffffff;
+}
+.landing-themes .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);
+}
+.landing-themes .p-button.p-button-rounded {
+  border-radius: 2rem;
+}
+.landing-themes .p-button.p-button-icon-only {
+  width: 3rem;
+  padding: 0.714rem;
+}
+.landing-themes .p-button.p-button-icon-only .p-button-icon-left,
+.landing-themes .p-button.p-button-icon-only .p-button-icon-right {
+  margin: 0;
+}
+.landing-themes .p-button.p-button-icon-only.p-button-rounded {
+  border-radius: 50%;
+  height: 3rem;
+}
+.landing-themes .p-button.p-button-sm {
+  font-size: 0.875rem;
+  padding: 0.62475rem 0.875rem;
+}
+.landing-themes .p-button.p-button-sm .p-button-icon {
+  font-size: 0.875rem;
+}
+.landing-themes .p-button.p-button-lg {
+  font-size: 1.25rem;
+  padding: 0.8925rem 1.25rem;
+}
+.landing-themes .p-button.p-button-lg .p-button-icon {
+  font-size: 1.25rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-button.p-button-loading-label-only .p-button-loading-icon {
+  margin: 0;
+}
+.landing-themes .p-fluid .p-button {
+  width: 100%;
+}
+.landing-themes .p-fluid .p-button-icon-only {
+  width: 3rem;
+}
+.landing-themes .p-fluid .p-buttonset {
+  display: flex;
+}
+.landing-themes .p-fluid .p-buttonset .p-button {
+  flex: 1;
+}
+.landing-themes .p-button.p-button-secondary, .landing-themes .p-buttonset.p-button-secondary > .p-button, .landing-themes .p-splitbutton.p-button-secondary > .p-button, .landing-themes .p-fileupload-choose.p-button-secondary {
+  color: #ffffff;
+  background: #ff4081;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary:enabled:hover, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 64, 129, 0.92);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 64, 129, 0.68);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined {
+  background-color: transparent;
+  color: #ff4081;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 64, 129, 0.04);
+  color: #ff4081;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 64, 129, 0.16);
+  color: #ff4081;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text {
+  background-color: transparent;
+  color: #ff4081;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(255, 64, 129, 0.04);
+  border-color: transparent;
+  color: #ff4081;
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 64, 129, 0.16);
+  border-color: transparent;
+  color: #ff4081;
+}
+.landing-themes .p-button.p-button-info, .landing-themes .p-buttonset.p-button-info > .p-button, .landing-themes .p-splitbutton.p-button-info > .p-button, .landing-themes .p-fileupload-choose.p-button-info {
+  color: #ffffff;
+  background: #2196F3;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info:enabled:hover, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(33, 150, 243, 0.92);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active {
+  background: rgba(33, 150, 243, 0.68);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined {
+  background-color: transparent;
+  color: #2196F3;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(33, 150, 243, 0.04);
+  color: #2196F3;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(33, 150, 243, 0.16);
+  color: #2196F3;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-info.p-button-text, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-info.p-button-text {
+  background-color: transparent;
+  color: #2196F3;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:hover, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(33, 150, 243, 0.04);
+  border-color: transparent;
+  color: #2196F3;
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(33, 150, 243, 0.16);
+  border-color: transparent;
+  color: #2196F3;
+}
+.landing-themes .p-button.p-button-success, .landing-themes .p-buttonset.p-button-success > .p-button, .landing-themes .p-splitbutton.p-button-success > .p-button, .landing-themes .p-fileupload-choose.p-button-success {
+  color: #ffffff;
+  background: #689F38;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success:enabled:hover, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(104, 159, 56, 0.92);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active {
+  background: rgba(104, 159, 56, 0.68);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined {
+  background-color: transparent;
+  color: #689F38;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(104, 159, 56, 0.04);
+  color: #689F38;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(104, 159, 56, 0.16);
+  color: #689F38;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-success.p-button-text, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-success.p-button-text {
+  background-color: transparent;
+  color: #689F38;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:hover, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(104, 159, 56, 0.04);
+  border-color: transparent;
+  color: #689F38;
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(104, 159, 56, 0.16);
+  border-color: transparent;
+  color: #689F38;
+}
+.landing-themes .p-button.p-button-warning, .landing-themes .p-buttonset.p-button-warning > .p-button, .landing-themes .p-splitbutton.p-button-warning > .p-button, .landing-themes .p-fileupload-choose.p-button-warning {
+  color: #212529;
+  background: #FBC02D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning:enabled:hover, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(251, 192, 45, 0.92);
+  color: #212529;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active {
+  background: rgba(251, 192, 45, 0.68);
+  color: #212529;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined {
+  background-color: transparent;
+  color: #FBC02D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(251, 192, 45, 0.04);
+  color: #FBC02D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(251, 192, 45, 0.16);
+  color: #FBC02D;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-warning.p-button-text, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text {
+  background-color: transparent;
+  color: #FBC02D;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(251, 192, 45, 0.04);
+  border-color: transparent;
+  color: #FBC02D;
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(251, 192, 45, 0.16);
+  border-color: transparent;
+  color: #FBC02D;
+}
+.landing-themes .p-button.p-button-help, .landing-themes .p-buttonset.p-button-help > .p-button, .landing-themes .p-splitbutton.p-button-help > .p-button, .landing-themes .p-fileupload-choose.p-button-help {
+  color: #ffffff;
+  background: #9C27B0;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help:enabled:hover, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(156, 39, 176, 0.92);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active {
+  background: rgba(156, 39, 176, 0.68);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined {
+  background-color: transparent;
+  color: #9C27B0;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(156, 39, 176, 0.04);
+  color: #9C27B0;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(156, 39, 176, 0.16);
+  color: #9C27B0;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-help.p-button-text, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-help.p-button-text {
+  background-color: transparent;
+  color: #9C27B0;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:hover, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(156, 39, 176, 0.04);
+  border-color: transparent;
+  color: #9C27B0;
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(156, 39, 176, 0.16);
+  border-color: transparent;
+  color: #9C27B0;
+}
+.landing-themes .p-button.p-button-danger, .landing-themes .p-buttonset.p-button-danger > .p-button, .landing-themes .p-splitbutton.p-button-danger > .p-button, .landing-themes .p-fileupload-choose.p-button-danger {
+  color: #ffffff;
+  background: #D32F2F;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger:enabled:hover, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(211, 47, 47, 0.92);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus {
+  box-shadow: none;
+}
+.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active {
+  background: rgba(211, 47, 47, 0.68);
+  color: #ffffff;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined {
+  background-color: transparent;
+  color: #D32F2F;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(211, 47, 47, 0.04);
+  color: #D32F2F;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(211, 47, 47, 0.16);
+  color: #D32F2F;
+  border: 0 none;
+}
+.landing-themes .p-button.p-button-danger.p-button-text, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text {
+  background-color: transparent;
+  color: #D32F2F;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:hover, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:hover, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):hover {
+  background: rgba(211, 47, 47, 0.04);
+  border-color: transparent;
+  color: #D32F2F;
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active {
+  background: rgba(211, 47, 47, 0.16);
+  border-color: transparent;
+  color: #D32F2F;
+}
+.landing-themes .p-button.p-button-link {
+  color: #3F51B5;
+  background: transparent;
+  border: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover {
+  background: transparent;
+  color: #3F51B5;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:hover .p-button-label, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):hover .p-button-label {
+  text-decoration: underline;
+}
+.landing-themes .p-button.p-button-link:enabled:focus, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):focus {
+  background: transparent;
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .p-button.p-button-link:enabled:active, .landing-themes .p-button.p-button-link:not(button):not(a):not(.p-disabled):active {
+  background: transparent;
+  color: #3F51B5;
+  border-color: transparent;
+}
+.landing-themes .p-datatable .p-paginator-top {
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+}
+.landing-themes .p-datatable .p-paginator-bottom {
+  border-width: 0 0 1px 0;
+  border-radius: 0;
+}
+.landing-themes .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: 1rem 1rem;
+  font-weight: 500;
+}
+.landing-themes .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: 1rem 1rem;
+  font-weight: 500;
+}
+.landing-themes .p-datatable .p-datatable-thead > tr > th {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #e4e4e4;
+  border-width: 0 0 1px 0;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+  background: #ffffff;
+  transition: none;
+}
+.landing-themes .p-datatable .p-datatable-tfoot > tr > td {
+  text-align: left;
+  padding: 1rem 1rem;
+  border: 1px solid #e4e4e4;
+  border-width: 0 0 1px 0;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+  background: #ffffff;
+}
+.landing-themes .p-datatable .p-sortable-column .p-sortable-column-icon {
+  color: rgba(0, 0, 0, 0.6);
+  margin-left: 0.5rem;
+}
+.landing-themes .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;
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable .p-sortable-column:focus {
+  box-shadow: none;
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  transition: none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td {
+  text-align: left;
+  border: 1px solid #e4e4e4;
+  border-width: 0 0 1px 0;
+  padding: 1rem 1rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+  width: 2.5rem;
+  height: 2.5rem;
+  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;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+.landing-themes .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);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus,
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
+  margin-right: 0.5rem;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+  font-weight: 500;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+  background: rgba(63, 81, 181, 0.12);
+  color: #3F51B5;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-highlight {
+  background: rgba(63, 81, 181, 0.12);
+  color: #3F51B5;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 rgba(63, 81, 181, 0.12);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 rgba(63, 81, 181, 0.12);
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus {
+  outline: 0.15rem solid transparent;
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus {
+  outline: 0.15rem solid transparent;
+  outline-offset: -0.15rem;
+}
+.landing-themes .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+  background: rgba(0, 0, 0, 0.04);
+  color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .p-datatable .p-column-resizer-helper {
+  background: #3F51B5;
+}
+.landing-themes .p-datatable .p-datatable-scrollable-header,
+.landing-themes .p-datatable .p-datatable-scrollable-footer {
+  background: #ffffff;
+}
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.landing-themes .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #ffffff;
+}
+.landing-themes .p-datatable .p-datatable-loading-icon {
+  font-size: 2rem;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-header {
+  border-width: 1px 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-footer {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-top {
+  border-width: 0 1px 0 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-paginator-bottom {
+  border-width: 0 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th {
+  border-width: 1px 1px 1px 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+  border-width: 1px;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+  background: rgba(0, 0, 0, 0.02);
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+  background: rgba(63, 81, 181, 0.12);
+  color: #3F51B5;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+  color: #3F51B5;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+  color: #3F51B5;
+}
+.landing-themes .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+  background: rgba(0, 0, 0, 0.02);
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-sm .p-datatable-footer {
+  padding: 0.5rem 0.5rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-header {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable.p-datatable-lg .p-datatable-footer {
+  padding: 1.25rem 1.25rem;
+}
+.landing-themes .p-datatable-drag-selection-helper {
+  background: rgba(63, 81, 181, 0.16);
+}
+.landing-themes .p-column-filter-row .p-column-filter-menu-button,
+.landing-themes .p-column-filter-row .p-column-filter-clear-button {
+  margin-left: 0.5rem;
+}
+.landing-themes .p-column-filter-menu-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  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;
+}
+.landing-themes .p-column-filter-menu-button:hover {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: transparent;
+  background: rgba(0, 0, 0, 0.04);
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-open, .landing-themes .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);
+}
+.landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active, .landing-themes .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+  background: rgba(63, 81, 181, 0.12);
+  color: #3F51B5;
+}
+.landing-themes .p-column-filter-menu-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .p-column-filter-clear-button {
+  width: 2.5rem;
+  height: 2.5rem;
+  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;
+}
+.landing-themes .p-column-filter-clear-button:hover {
+  color: rgba(0, 0, 0, 0.6);
+  border-color: transparent;
+  background: rgba(0, 0, 0, 0.04);
+}
+.landing-themes .p-column-filter-clear-button:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .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;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items {
+  padding: 0;
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+  margin: 0;
+  padding: 1rem 1rem;
+  border: 0 none;
+  color: rgba(0, 0, 0, 0.87);
+  background: transparent;
+  transition: none;
+  border-radius: 0;
+}
+.landing-themes .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);
+}
+.landing-themes .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);
+}
+.landing-themes .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+.landing-themes .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;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-operator {
+  padding: 1rem;
+  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;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint {
+  padding: 1rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+  margin-bottom: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+  margin-top: 0.5rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+  border-bottom: 0 none;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-add-rule {
+  padding: 1rem 1rem;
+}
+.landing-themes .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+  padding: 1rem;
+}
+.landing-themes .p-paginator {
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.87);
+  border: solid #e4e4e4;
+  border-width: 0;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+}
+.landing-themes .p-paginator .p-paginator-first,
+.landing-themes .p-paginator .p-paginator-prev,
+.landing-themes .p-paginator .p-paginator-next,
+.landing-themes .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%;
+}
+.landing-themes .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+.landing-themes .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);
+}
+.landing-themes .p-paginator .p-paginator-first {
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+.landing-themes .p-paginator .p-paginator-last {
+  border-top-right-radius: 50%;
+  border-bottom-right-radius: 50%;
+}
+.landing-themes .p-paginator .p-dropdown {
+  margin-left: 0.5rem;
+  height: 3rem;
+}
+.landing-themes .p-paginator .p-dropdown .p-dropdown-label {
+  padding-right: 0;
+}
+.landing-themes .p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.landing-themes .p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
+.landing-themes .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;
+}
+.landing-themes .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%;
+}
+.landing-themes .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;
+}
+.landing-themes .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);
+}
+
+.landing-themes .p-button {
+  font-weight: 500;
+  min-width: 4rem;
+}
+.landing-themes .p-button.p-button-icon-only {
+  min-width: auto;
+}
+.landing-themes .p-button:enabled:focus, .landing-themes .p-button:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(63, 81, 181, 0.76);
+}
+.landing-themes .p-button:enabled:active, .landing-themes .p-button:not(button):not(a):not(.p-disabled):active {
+  background: rgba(63, 81, 181, 0.68);
+}
+.landing-themes .p-button .p-ink {
+  background-color: rgba(255, 255, 255, 0.32);
+}
+.landing-themes .p-button.p-button-text:enabled:focus, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(63, 81, 181, 0.12);
+}
+.landing-themes .p-button.p-button-text:enabled:active, .landing-themes .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(63, 81, 181, 0.16);
+}
+.landing-themes .p-button.p-button-text .p-ink, .landing-themes .p-button.p-button-outlined .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+.landing-themes .p-button.p-button-outlined {
+  box-shadow: inset 0 0 0 1px;
+}
+.landing-themes .p-button.p-button-outlined:enabled:focus {
+  box-shadow: inset 0 0 0 1px;
+}
+.landing-themes .p-button.p-button-outlined:enabled:active {
+  box-shadow: inset 0 0 0 1px;
+}
+.landing-themes .p-button:disabled {
+  background-color: rgba(0, 0, 0, 0.12) !important;
+  color: rgba(0, 0, 0, 0.38) !important;
+  opacity: 1;
+}
+.landing-themes .p-button:disabled.p-button-text {
+  background-color: transparent !important;
+  color: rgba(0, 0, 0, 0.38) !important;
+}
+.landing-themes .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;
+}
+.landing-themes .p-button.p-button-raised:enabled:focus, .landing-themes .p-button.p-button-raised:not(button):not(a):not(.p-disabled):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);
+}
+.landing-themes .p-button.p-button-secondary:enabled:focus, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(255, 64, 129, 0.76);
+}
+.landing-themes .p-button.p-button-secondary:enabled:active, .landing-themes .p-button.p-button-secondary:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 64, 129, 0.68);
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:focus, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(255, 64, 129, 0.12);
+}
+.landing-themes .p-button.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(255, 64, 129, 0.16);
+}
+.landing-themes .p-button.p-button-secondary.p-button-text .p-ink, .landing-themes .p-button.p-button-secondary.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-secondary > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-secondary > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+  background-color: rgba(255, 64, 129, 0.16);
+}
+.landing-themes .p-button.p-button-info:enabled:focus, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(33, 150, 243, 0.76);
+}
+.landing-themes .p-button.p-button-info:enabled:active, .landing-themes .p-button.p-button-info:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info:enabled:active, .landing-themes .p-fileupload-choose.p-button-info:not(button):not(a):not(.p-disabled):active {
+  background: rgba(33, 150, 243, 0.68);
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:focus, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-info.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(33, 150, 243, 0.12);
+}
+.landing-themes .p-button.p-button-info.p-button-text:enabled:active, .landing-themes .p-button.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(33, 150, 243, 0.16);
+}
+.landing-themes .p-button.p-button-info.p-button-text .p-ink, .landing-themes .p-button.p-button-info.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-info > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-info > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-info.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+  background-color: rgba(33, 150, 243, 0.16);
+}
+.landing-themes .p-button.p-button-success:enabled:focus, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(104, 159, 56, 0.76);
+}
+.landing-themes .p-button.p-button-success:enabled:active, .landing-themes .p-button.p-button-success:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success:enabled:active, .landing-themes .p-fileupload-choose.p-button-success:not(button):not(a):not(.p-disabled):active {
+  background: rgba(104, 159, 56, 0.68);
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:focus, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-success.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(104, 159, 56, 0.12);
+}
+.landing-themes .p-button.p-button-success.p-button-text:enabled:active, .landing-themes .p-button.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(104, 159, 56, 0.16);
+}
+.landing-themes .p-button.p-button-success.p-button-text .p-ink, .landing-themes .p-button.p-button-success.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-success > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-success > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-success.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+  background-color: rgba(104, 159, 56, 0.16);
+}
+.landing-themes .p-button.p-button-warning:enabled:focus, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(251, 192, 45, 0.76);
+}
+.landing-themes .p-button.p-button-warning:enabled:active, .landing-themes .p-button.p-button-warning:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning:not(button):not(a):not(.p-disabled):active {
+  background: rgba(251, 192, 45, 0.68);
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:focus, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-warning.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(251, 192, 45, 0.12);
+}
+.landing-themes .p-button.p-button-warning.p-button-text:enabled:active, .landing-themes .p-button.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(251, 192, 45, 0.16);
+}
+.landing-themes .p-button.p-button-warning.p-button-text .p-ink, .landing-themes .p-button.p-button-warning.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-warning > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-warning > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+  background-color: rgba(251, 192, 45, 0.16);
+}
+.landing-themes .p-button.p-button-help:enabled:focus, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(156, 39, 176, 0.76);
+}
+.landing-themes .p-button.p-button-help:enabled:active, .landing-themes .p-button.p-button-help:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help:enabled:active, .landing-themes .p-fileupload-choose.p-button-help:not(button):not(a):not(.p-disabled):active {
+  background: rgba(156, 39, 176, 0.68);
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:focus, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-help.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(156, 39, 176, 0.12);
+}
+.landing-themes .p-button.p-button-help.p-button-text:enabled:active, .landing-themes .p-button.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(156, 39, 176, 0.16);
+}
+.landing-themes .p-button.p-button-help.p-button-text .p-ink, .landing-themes .p-button.p-button-help.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-help > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-help > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-help.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+  background-color: rgba(156, 39, 176, 0.16);
+}
+.landing-themes .p-button.p-button-danger:enabled:focus, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(211, 47, 47, 0.76);
+}
+.landing-themes .p-button.p-button-danger:enabled:active, .landing-themes .p-button.p-button-danger:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger:not(button):not(a):not(.p-disabled):active {
+  background: rgba(211, 47, 47, 0.68);
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:focus, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-button.p-button-danger.p-button-outlined:enabled:focus, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:focus, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:focus, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):focus {
+  background: rgba(211, 47, 47, 0.12);
+}
+.landing-themes .p-button.p-button-danger.p-button-text:enabled:active, .landing-themes .p-button.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-button.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-button.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:enabled:active, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text:not(button):not(a):not(.p-disabled):active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:enabled:active, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined:not(button):not(a):not(.p-disabled):active {
+  background: rgba(211, 47, 47, 0.16);
+}
+.landing-themes .p-button.p-button-danger.p-button-text .p-ink, .landing-themes .p-button.p-button-danger.p-button-outlined .p-ink, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-text .p-ink, .landing-themes .p-buttonset.p-button-danger > .p-button.p-button-outlined .p-ink, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-text .p-ink, .landing-themes .p-splitbutton.p-button-danger > .p-button.p-button-outlined .p-ink, .landing-themes .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .landing-themes .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+  background-color: rgba(211, 47, 47, 0.16);
+}
+.landing-themes .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);
+}
+.landing-themes .p-calendar-w-btn .p-inputtext {
+  background-image: none;
+  background-color: transparent;
+  border: 0 none;
+}
+.landing-themes .p-calendar-w-btn .p-inputtext:enabled:focus {
+  box-shadow: none;
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button {
+  background-color: transparent;
+  border: 0 none;
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button span {
+  color: rgba(0, 0, 0, 0.6);
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+.landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:active, .landing-themes .p-calendar-w-btn .p-datepicker-trigger.p-button:focus {
+  background: rgba(0, 0, 0, 0.12);
+}
+.landing-themes .p-calendar-w-btn:not(.p-disabled):hover {
+  border-color: rgba(0, 0, 0, 0.87);
+}
+.landing-themes .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;
+}
+.landing-themes .p-datepicker .p-datepicker-header {
+  border-bottom: 0 none;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-title {
+  margin: 0 auto 0 0;
+  order: 1;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-prev {
+  order: 2;
+}
+.landing-themes .p-datepicker .p-datepicker-header .p-datepicker-next {
+  order: 3;
+}
+.landing-themes .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;
+}
+.landing-themes .p-datepicker table td.p-datepicker-today > span {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38);
+}
+.landing-themes .p-datepicker table td.p-datepicker-today.p-highlight {
+  box-shadow: 0 0 0 1px rgba(63, 81, 181, 0.12);
+}
+.landing-themes .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;
+}
+.landing-themes .p-calendar.p-invalid.p-calendar-w-btn {
+  border-color: #B00020;
+}
+.landing-themes .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+  box-shadow: none;
+}
+.landing-themes .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;
+}
+.landing-themes .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;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .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));
+}
+.landing-themes .p-input-filled .p-calendar-w-btn:not(.p-disabled).p-focus, .landing-themes .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;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:hover, .landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-calendar-w-btn .p-inputtext {
+  border: 0 none;
+}
+.landing-themes .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);
+}
+.landing-themes .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);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .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);
+}
+.landing-themes .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);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled).p-focus, .landing-themes .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);
+}
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext,
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:hover,
+.landing-themes .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn .p-inputtext:enabled:focus {
+  border: 0 none;
+  background-image: none;
+}
+.landing-themes .p-checkbox {
+  border-radius: 50%;
+  transition: box-shadow 0.2s;
+}
+.landing-themes .p-checkbox .p-checkbox-box {
+  border-color: #757575;
+  border-radius: 2px;
+  position: relative;
+}
+.landing-themes .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
+  border-color: #757575;
+}
+.landing-themes .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
+  border-color: #757575;
+}
+.landing-themes .p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus {
+  border-color: #3F51B5;
+}
+.landing-themes .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;
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+}
+.landing-themes .p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused {
+  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+}
+.landing-themes .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
+}
+.landing-themes .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused {
+  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
+}
+.landing-themes .p-input-filled .p-checkbox .p-checkbox-box {
+  background-color: #ffffff;
+}
+.landing-themes .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);
+  }
+}
+.landing-themes .p-datatable .p-sortable-column {
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-sortable-column:focus {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr {
+  outline: 0 none;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+  box-shadow: inset 0 2px 0 0 #3F51B5;
+}
+.landing-themes .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+  box-shadow: inset 0 -2px 0 0 #3F51B5;
+}
+.landing-themes .p-dropdown .p-inputtext, .landing-themes .p-dropdown .p-dropdown-trigger {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-dropdown .p-inputtext {
+  border: 0 none;
+}
+.landing-themes .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;
+}
+.landing-themes .p-dropdown-item .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+.landing-themes .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;
+}
+.landing-themes .p-input-filled .p-dropdown .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .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));
+}
+.landing-themes .p-input-filled .p-dropdown:not(.p-disabled).p-focus, .landing-themes .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;
+}
+.landing-themes .p-input-filled .p-dropdown .p-inputtext:enabled:hover, .landing-themes .p-input-filled .p-dropdown .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-dropdown .p-inputtext {
+  border: 0 none;
+}
+.landing-themes .p-input-filled .p-dropdown.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.landing-themes .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);
+}
+.landing-themes .p-input-filled .p-dropdown.p-invalid:not(.p-disabled).p-focus, .landing-themes .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);
+}
+.landing-themes .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;
+}
+.landing-themes .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;
+}
+.landing-themes .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;
+}
+.landing-themes .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;
+}
+.landing-themes .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));
+}
+.landing-themes .p-input-filled .p-inputtext:enabled:focus {
+  box-shadow: none;
+  background-color: #dcdcdc;
+  border-color: transparent;
+  background-size: 100% 2px, 100% 1px;
+}
+.landing-themes .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);
+}
+.landing-themes .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);
+}
+.landing-themes .p-input-filled .p-inputtext.p-invalid.p-component:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .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;
+}
+.landing-themes .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);
+}
+.landing-themes .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);
+}
+.landing-themes .p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:focus {
+  box-shadow: none;
+  border-color: transparent;
+}
+.landing-themes .p-float-label input:focus ~ label,
+.landing-themes .p-float-label input.p-filled ~ label,
+.landing-themes .p-float-label textarea:focus ~ label,
+.landing-themes .p-float-label textarea.p-filled ~ label,
+.landing-themes .p-float-label .p-inputwrapper-focus ~ label,
+.landing-themes .p-float-label .p-inputwrapper-filled ~ label {
+  top: -0.5rem !important;
+  background-color: #ffffff;
+  padding: 2px 4px;
+  margin-left: -4px;
+  margin-top: 0;
+}
+.landing-themes .p-float-label textarea ~ label {
+  margin-top: 0;
+}
+.landing-themes .p-float-label input:focus ~ label,
+.landing-themes .p-float-label .p-inputwrapper-focus ~ label {
+  color: #3F51B5;
+}
+.landing-themes .p-input-filled .p-float-label .p-inputtext {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.landing-themes .p-input-filled .p-float-label input:focus ~ label,
+.landing-themes .p-input-filled .p-float-label input.p-filled ~ label,
+.landing-themes .p-input-filled .p-float-label textarea:focus ~ label,
+.landing-themes .p-input-filled .p-float-label textarea.p-filled ~ label,
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-focus ~ label,
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-filled ~ label {
+  top: 0.25rem !important;
+  margin-top: 0;
+  background: transparent;
+}
+.landing-themes .p-multiselect .p-multiselect-label, .landing-themes .p-multiselect .p-multiselect-trigger {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-multiselect .p-multiselect-label {
+  border: 0 none;
+}
+.landing-themes .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;
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+  background-color: rgba(63, 81, 181, 0.16);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+  background: rgba(0, 0, 0, 0.12);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+  background: rgba(63, 81, 181, 0.24);
+}
+.landing-themes .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+  background: rgba(0, 0, 0, 0.12);
+}
+.landing-themes .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;
+}
+.landing-themes .p-input-filled .p-multiselect .p-inputtext {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .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));
+}
+.landing-themes .p-input-filled .p-multiselect:not(.p-disabled).p-focus, .landing-themes .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;
+}
+.landing-themes .p-input-filled .p-multiselect .p-inputtext:enabled:hover, .landing-themes .p-input-filled .p-multiselect .p-inputtext:enabled:focus {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-input-filled .p-multiselect .p-multiselect-label:hover {
+  background-image: none;
+  background: transparent;
+}
+.landing-themes .p-float-label .p-multiselect-label .p-multiselect-token {
+  padding: 0.25rem 1rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+.landing-themes .p-input-filled .p-float-label .p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
+}
+.landing-themes .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;
+}
+.landing-themes .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-token .p-multiselect-token-icon {
+  font-size: 75%;
+}
+.landing-themes .p-input-filled .p-multiselect.p-invalid {
+  border-color: transparent;
+  background-image: linear-gradient(to bottom, #B00020, #B00020), linear-gradient(to bottom, #B00020, #B00020);
+}
+.landing-themes .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);
+}
+.landing-themes .p-input-filled .p-multiselect.p-invalid:not(.p-disabled).p-focus, .landing-themes .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);
+}
+.landing-themes .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;
+}
+.landing-themes .p-paginator {
+  justify-content: flex-end;
+}
+.landing-themes .p-paginator .p-paginator-element:focus {
+  background: rgba(0, 0, 0, 0.12);
+}
+.landing-themes .p-paginator .p-paginator-element:focus.p-highlight {
+  background: rgba(63, 81, 181, 0.24);
+}
+.landing-themes .p-progressbar {
+  border-radius: 0;
+}
+.landing-themes .p-progressbar .p-progressbar-label {
+  display: none;
+}
+.landing-themes .p-radiobutton {
+  border-radius: 50%;
+  transition: box-shadow 0.2s;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+  border: 2px solid #757575;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+  border: 2px solid #757575;
+}
+.landing-themes .p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus {
+  border-color: #3F51B5;
+}
+.landing-themes .p-radiobutton:not(.p-radiobutton-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+}
+.landing-themes .p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused {
+  box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+}
+.landing-themes .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover {
+  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
+}
+.landing-themes .p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled).p-radiobutton-focused {
+  box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box {
+  background-color: #ffffff;
+}
+.landing-themes .p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
+  background-color: #ffffff;
+}
+.landing-themes .p-slider .p-slider-handle {
+  transition: transform 0.2s, box-shadow 0.2s;
+  transform: scale(0.7);
+}
+.landing-themes .p-slider .p-slider-handle:focus {
+  box-shadow: 0 0 1px 10px rgba(255, 64, 129, 0.2);
+}
+.landing-themes .p-slider.p-slider-sliding .p-slider-handle {
+  transform: scale(1);
+}
+
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
new file mode 100644
index 0000000000..14b77578ad
--- /dev/null
+++ b/public/themes/arya-blue/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #383838;
+  --surface-e: #1e1e1e;
+  --surface-f: #1e1e1e;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #64b5f6;
+  --primary-color-text: #212529;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #1e1e1e;
+  --surface-border: #383838;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #93cbf9;
+  --highlight-bg: rgba(100, 181, 246, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#f7fbff;
+  --primary-100:#daedfd;
+  --primary-200:#bcdffb;
+  --primary-300:#9fd1f9;
+  --primary-400:#81c3f8;
+  --primary-500:#64b5f6;
+  --primary-600:#559ad1;
+  --primary-700:#467fac;
+  --primary-800:#376487;
+  --primary-900:#284862;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #121212;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #64b5f6;
+}
+.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: #64b5f6;
+}
+.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: #64b5f6;
+}
+.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: #64b5f6;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1e1e1e;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #383838;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #64b5f6;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #383838;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #383838;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #383838;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #383838;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #64b5f6;
+    background: #64b5f6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #64b5f6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #2396f2;
+    background: #2396f2;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #64b5f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #2396f2;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #64b5f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #2396f2;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #64b5f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #2396f2;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #64b5f6;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #383838;
+    border-left: 1px solid #383838;
+    border-bottom: 1px solid #383838;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #383838;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #64b5f6;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #43a5f4;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #121212;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #64b5f6;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #383838;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #383838;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #64b5f6;
+    background: #64b5f6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #64b5f6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #2396f2;
+    background: #2396f2;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #64b5f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #2396f2;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #64b5f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #2396f2;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #64b5f6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #64b5f6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #64b5f6;
+    border-color: #64b5f6;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #43a5f4;
+    border-color: #43a5f4;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #383838;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #383838;
+    border: 2px solid #64b5f6;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-slider .p-slider-range {
+    background: #64b5f6;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #64b5f6;
+    border-color: #64b5f6;
+  }
+  .p-treeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #64b5f6;
+    border-color: #64b5f6;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #43a5f4;
+    border-color: #43a5f4;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #212529;
+    background: #64b5f6;
+    border: 1px solid #64b5f6;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #43a5f4;
+    color: #212529;
+    border-color: #43a5f4;
+  }
+  .p-button:not(:disabled):active {
+    background: #2396f2;
+    color: #212529;
+    border-color: #2396f2;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #64b5f6;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #64b5f6;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #121212;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #121212;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #383838;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(100, 181, 246, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(100, 181, 246, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #64b5f6;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #383838;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-column-filter-overlay {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #383838;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(12, 120, 207, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #383838;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    border-color: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(35, 150, 242, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #93cbf9;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #64b5f6;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #64b5f6;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #64b5f6;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #64b5f6;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1e1e1e;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #383838;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #383838;
+  }
+  .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 #383838;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #383838;
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #383838;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #383838;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #383838;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #64b5f6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #64b5f6;
+    color: #64b5f6;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1e1e1e;
+    color: #64b5f6;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #383838;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #64b5f6;
+    color: #212529;
+    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: #43a5f4;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-sidebar {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #383838;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #383838;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #383838;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #383838;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #93cbf9;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1e1e1e;
+      border: 1px solid #383838;
+      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 #383838;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #383838;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #64b5f6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #64b5f6;
+    color: #64b5f6;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #383838;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #383838;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(100, 181, 246, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #64b5f6;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #64b5f6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #64b5f6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #64b5f6;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #64b5f6;
+    color: #212529;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #64b5f6;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #64b5f6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #64b5f6;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #64b5f6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #64b5f6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #64b5f6;
+  }
+}
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
new file mode 100644
index 0000000000..ae8805e1b4
--- /dev/null
+++ b/public/themes/arya-green/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #383838;
+  --surface-e: #1e1e1e;
+  --surface-f: #1e1e1e;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #81c784;
+  --primary-color-text: #212529;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #1e1e1e;
+  --surface-border: #383838;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #a7d8a9;
+  --highlight-bg: rgba(129, 199, 132, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#f9fcf9;
+  --primary-100:#e1f2e1;
+  --primary-200:#c9e7ca;
+  --primary-300:#b1dcb3;
+  --primary-400:#99d29b;
+  --primary-500:#81c784;
+  --primary-600:#6ea970;
+  --primary-700:#5a8b5c;
+  --primary-800:#476d49;
+  --primary-900:#345035;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #121212;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #81c784;
+}
+.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: #81c784;
+}
+.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: #81c784;
+}
+.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: #81c784;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1e1e1e;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #383838;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #81c784;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #383838;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #383838;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #383838;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #383838;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #81c784;
+    background: #81c784;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #81c784;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #54b358;
+    background: #54b358;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #81c784;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #54b358;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #81c784;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #54b358;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #81c784;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #54b358;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #81c784;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #383838;
+    border-left: 1px solid #383838;
+    border-bottom: 1px solid #383838;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #383838;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #81c784;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #6abd6e;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #121212;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #81c784;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #383838;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #383838;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #81c784;
+    background: #81c784;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #81c784;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #54b358;
+    background: #54b358;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #81c784;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #54b358;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #81c784;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #54b358;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #81c784;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #81c784;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #81c784;
+    border-color: #81c784;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #6abd6e;
+    border-color: #6abd6e;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #383838;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #383838;
+    border: 2px solid #81c784;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-slider .p-slider-range {
+    background: #81c784;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #81c784;
+    border-color: #81c784;
+  }
+  .p-treeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #81c784;
+    border-color: #81c784;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #6abd6e;
+    border-color: #6abd6e;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #212529;
+    background: #81c784;
+    border: 1px solid #81c784;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #6abd6e;
+    color: #212529;
+    border-color: #6abd6e;
+  }
+  .p-button:not(:disabled):active {
+    background: #54b358;
+    color: #212529;
+    border-color: #54b358;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #81c784;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #81c784;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #121212;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #121212;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #383838;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(129, 199, 132, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(129, 199, 132, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #81c784;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #383838;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-column-filter-overlay {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #383838;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(62, 139, 65, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #383838;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    border-color: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(84, 179, 88, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #a7d8a9;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #81c784;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #81c784;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #81c784;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #81c784;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1e1e1e;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #383838;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #383838;
+  }
+  .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 #383838;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #383838;
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #383838;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #383838;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #383838;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #81c784;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #81c784;
+    color: #81c784;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1e1e1e;
+    color: #81c784;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #383838;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #81c784;
+    color: #212529;
+    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: #6abd6e;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-sidebar {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #383838;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #383838;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #383838;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #383838;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #a7d8a9;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1e1e1e;
+      border: 1px solid #383838;
+      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 #383838;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #383838;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #81c784;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #81c784;
+    color: #81c784;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #383838;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #383838;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(129, 199, 132, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #81c784;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #81c784;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #81c784;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #81c784;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #81c784;
+    color: #212529;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #81c784;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #81c784;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #81c784;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #81c784;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #81c784;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #81c784;
+  }
+}
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
new file mode 100644
index 0000000000..2ee2b72109
--- /dev/null
+++ b/public/themes/arya-orange/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #383838;
+  --surface-e: #1e1e1e;
+  --surface-f: #1e1e1e;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #ffd54f;
+  --primary-color-text: #212529;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #1e1e1e;
+  --surface-border: #383838;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #ffe284;
+  --highlight-bg: rgba(255, 213, 79, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#fffdf6;
+  --primary-100:#fff5d5;
+  --primary-200:#ffedb3;
+  --primary-300:#ffe592;
+  --primary-400:#ffdd70;
+  --primary-500:#ffd54f;
+  --primary-600:#d9b543;
+  --primary-700:#b39537;
+  --primary-800:#8c752b;
+  --primary-900:#665520;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #121212;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #ffd54f;
+}
+.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: #ffd54f;
+}
+.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: #ffd54f;
+}
+.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: #ffd54f;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1e1e1e;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #383838;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #ffd54f;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #383838;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #383838;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #383838;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #383838;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #ffd54f;
+    background: #ffd54f;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ffd54f;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #ffc50c;
+    background: #ffc50c;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffd54f;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffc50c;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #ffd54f;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffc50c;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffd54f;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffc50c;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ffd54f;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #383838;
+    border-left: 1px solid #383838;
+    border-bottom: 1px solid #383838;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #383838;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #ffd54f;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #ffcd2e;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #121212;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ffd54f;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #383838;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #383838;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #ffd54f;
+    background: #ffd54f;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ffd54f;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #ffc50c;
+    background: #ffc50c;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffd54f;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffc50c;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffd54f;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffc50c;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffd54f;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #ffd54f;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ffd54f;
+    border-color: #ffd54f;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #ffcd2e;
+    border-color: #ffcd2e;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #383838;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #383838;
+    border: 2px solid #ffd54f;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-slider .p-slider-range {
+    background: #ffd54f;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ffd54f;
+    border-color: #ffd54f;
+  }
+  .p-treeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ffd54f;
+    border-color: #ffd54f;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #ffcd2e;
+    border-color: #ffcd2e;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #212529;
+    background: #ffd54f;
+    border: 1px solid #ffd54f;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #ffcd2e;
+    color: #212529;
+    border-color: #ffcd2e;
+  }
+  .p-button:not(:disabled):active {
+    background: #ffc50c;
+    color: #212529;
+    border-color: #ffc50c;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #ffd54f;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #ffd54f;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #121212;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #121212;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #383838;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(255, 213, 79, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(255, 213, 79, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #ffd54f;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #383838;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-column-filter-overlay {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #383838;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(207, 157, 0, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #383838;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    border-color: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(255, 197, 12, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #ffe284;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #ffd54f;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffd54f;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #ffd54f;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #ffd54f;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1e1e1e;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #383838;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #383838;
+  }
+  .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 #383838;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #383838;
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #383838;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #383838;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #383838;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #ffd54f;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #ffd54f;
+    color: #ffd54f;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1e1e1e;
+    color: #ffd54f;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #383838;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #ffd54f;
+    color: #212529;
+    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: #ffcd2e;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-sidebar {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #383838;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #383838;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #383838;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #383838;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #ffe284;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1e1e1e;
+      border: 1px solid #383838;
+      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 #383838;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #383838;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #ffd54f;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #ffd54f;
+    color: #ffd54f;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #383838;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #383838;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(255, 213, 79, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #ffd54f;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffd54f;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ffd54f;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #ffd54f;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #ffd54f;
+    color: #212529;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #ffd54f;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #ffd54f;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #ffd54f;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #ffd54f;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ffd54f;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ffd54f;
+  }
+}
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
new file mode 100644
index 0000000000..cd59c1d2d4
--- /dev/null
+++ b/public/themes/arya-purple/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #383838;
+  --surface-e: #1e1e1e;
+  --surface-f: #1e1e1e;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #ba68c8;
+  --primary-color-text: #ffffff;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #1e1e1e;
+  --surface-border: #383838;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --focus-ring: 0 0 0 1px #cf95d9;
+  --highlight-bg: rgba(186, 104, 200, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#fcf7fc;
+  --primary-100:#eedbf2;
+  --primary-200:#e1bee7;
+  --primary-300:#d4a1dd;
+  --primary-400:#c785d2;
+  --primary-500:#ba68c8;
+  --primary-600:#9e58aa;
+  --primary-700:#82498c;
+  --primary-800:#66396e;
+  --primary-900:#4a2a50;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1e1e1e;
+  border: 1px solid #383838;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #383838;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #121212;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #ba68c8;
+}
+.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: #ba68c8;
+}
+.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: #ba68c8;
+}
+.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: #ba68c8;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1e1e1e;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #383838;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #ba68c8;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #383838;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #383838;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #383838;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #383838;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #ba68c8;
+    background: #ba68c8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ba68c8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #a241b2;
+    background: #a241b2;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ba68c8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a241b2;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #ba68c8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a241b2;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ba68c8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #383838;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a241b2;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ba68c8;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #383838;
+    border-left: 1px solid #383838;
+    border-bottom: 1px solid #383838;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #383838;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #ba68c8;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #b052c0;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #121212;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ba68c8;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #383838;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #383838;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #383838;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #383838;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #383838;
+    background: #121212;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #ba68c8;
+    background: #ba68c8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ba68c8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #a241b2;
+    background: #a241b2;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ba68c8;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a241b2;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ba68c8;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #383838;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a241b2;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ba68c8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #ba68c8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ba68c8;
+    border-color: #ba68c8;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #b052c0;
+    border-color: #b052c0;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #383838;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #383838;
+    border: 2px solid #ba68c8;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-slider .p-slider-range {
+    background: #ba68c8;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ba68c8;
+    border-color: #ba68c8;
+  }
+  .p-treeselect {
+    background: #121212;
+    border: 1px solid #383838;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #383838;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #383838;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ba68c8;
+    border-color: #ba68c8;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #b052c0;
+    border-color: #b052c0;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #ba68c8;
+    border: 1px solid #ba68c8;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #b052c0;
+    color: #ffffff;
+    border-color: #b052c0;
+  }
+  .p-button:not(:disabled):active {
+    background: #a241b2;
+    color: #ffffff;
+    border-color: #a241b2;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #ba68c8;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #ba68c8;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #121212;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #121212;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #383838;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(186, 104, 200, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(186, 104, 200, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #ba68c8;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #383838;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-column-filter-overlay {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #383838;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(117, 47, 129, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #383838;
+    border-color: #383838;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #383838;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    border-color: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(162, 65, 178, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #cf95d9;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: #ba68c8;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ba68c8;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #383838;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #ba68c8;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #ba68c8;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1e1e1e;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #383838;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 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: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #383838;
+  }
+  .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 #383838;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #383838;
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #383838;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #383838;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ba68c8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #383838;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ba68c8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #383838;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #ba68c8;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1e1e1e;
+    border-color: #ba68c8;
+    color: #ba68c8;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1e1e1e;
+    color: #ba68c8;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #383838;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #ba68c8;
+    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: #b052c0;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(30, 30, 30, 0);
+    border-bottom-color: #1e1e1e;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(56, 56, 56, 0);
+    border-bottom-color: #353535;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1e1e1e;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #383838;
+  }
+  .p-sidebar {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #383838;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #383838;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #383838;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #383838;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #cf95d9;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1e1e1e;
+      border: 1px solid #383838;
+      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 #383838;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #383838;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #383838;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #383838;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #383838;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #383838;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #383838;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #383838 transparent;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #ba68c8;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1e1e1e;
+    border-color: #ba68c8;
+    color: #ba68c8;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #383838;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #383838;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: #383838;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(186, 104, 200, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #ba68c8;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ba68c8;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ba68c8;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #383838;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #ba68c8;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #383838;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #ba68c8;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #ba68c8;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #ba68c8;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #ba68c8;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #ba68c8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ba68c8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ba68c8;
+  }
+}
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
new file mode 100644
index 0000000000..172f312df7
--- /dev/null
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -0,0 +1,7047 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #2a323d;
+  --surface-b: #20262e;
+  --surface-c: rgba(255, 255, 255, 0.04);
+  --surface-d: #3f4b5b;
+  --surface-e: #2a323d;
+  --surface-f: #2a323d;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #8dd0ff;
+  --primary-color-text: #151515;
+  --surface-0: #20262e;
+  --surface-50: #363c43;
+  --surface-100: #4d5158;
+  --surface-200: #63676d;
+  --surface-300: #797d82;
+  --surface-400: #909397;
+  --surface-500: #a6a8ab;
+  --surface-600: #bcbec0;
+  --surface-700: #d2d4d5;
+  --surface-800: #e9e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e9e9ea;
+  --gray-100: #d2d4d5;
+  --gray-200: #bcbec0;
+  --gray-300: #a6a8ab;
+  --gray-400: #909397;
+  --gray-500: #797d82;
+  --gray-600: #63676d;
+  --gray-700: #4d5158;
+  --gray-800: #363c43;
+  --gray-900: #20262e;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #20262e;
+  --surface-section: #20262e;
+  --surface-card: #2a323d;
+  --surface-overlay: #2a323d;
+  --surface-border: #3f4b5b;
+  --surface-hover: rgba(255, 255, 255, 0.04);
+  --focus-ring: 0 0 0 1px #e3f3fe;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #8dd0ff;
+  --highlight-text-color: #151515;
+  color-scheme: dark;
+}
+
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+  --red-50:#fdf5f6;
+  --red-100:#f7cfd2;
+  --red-200:#f0a8af;
+  --red-300:#e9828c;
+  --red-400:#e35b68;
+  --red-500:#dc3545;
+  --red-600:#bb2d3b;
+  --red-700:#9a2530;
+  --red-800:#791d26;
+  --red-900:#58151c;
+  --primary-50:#f9fdff;
+  --primary-100:#e4f4ff;
+  --primary-200:#ceebff;
+  --primary-300:#b8e2ff;
+  --primary-400:#a3d9ff;
+  --primary-500:#8dd0ff;
+  --primary-600:#78b1d9;
+  --primary-700:#6392b3;
+  --primary-800:#4e728c;
+  --primary-900:#385366;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #2a323d;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #3f4b5b;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #2a323d;
+  border: 1px solid #3f4b5b;
+  box-shadow: none;
+  border-radius: 4px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1.5rem;
+}
+.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 #3f4b5b;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #20262e;
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #8dd0ff;
+}
+.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: #8dd0ff;
+}
+.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: #8dd0ff;
+}
+.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: #8dd0ff;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.15s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.65;
+  }
+  .p-error {
+    color: #f19ea6;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.107rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #8dd0ff;
+    color: #151515;
+    border-radius: 4px;
+  }
+  .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: #f19ea6;
+  }
+  .p-autocomplete-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-datepicker {
+    padding: 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #2a323d;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #3f4b5b;
+    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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: color 0.15s, box-shadow 0.15s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #8dd0ff;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #3f4b5b;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #3f4b5b;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .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: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #3f4b5b;
+    padding-right: 0;
+    padding-left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 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: 0 0 0 1px #e3f3fe;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-cascadeselect-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #3f4b5b;
+    background: #20262e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #151515;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #3f4b5b;
+    background: #20262e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #151515;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #8dd0ff;
+    background: #8dd0ff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #3f4b5b;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #1dadff;
+    background: #1dadff;
+    color: #151515;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f19ea6;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #8dd0ff;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #1dadff;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #8dd0ff;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #1dadff;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #151515;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #8dd0ff;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #1dadff;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #3f4b5b;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #4c5866;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    box-shadow: none;
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-dropdown-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    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;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #3f4b5b;
+    border-left: 1px solid #3f4b5b;
+    border-bottom: 1px solid #3f4b5b;
+    padding: 0.5rem 0.75rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #3f4b5b;
+  }
+  .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.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 4px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 4px;
+    transition-duration: 0.15s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #8dd0ff;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #151515;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #3f4b5b;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #8dd0ff;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f19ea6;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    appearance: none;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #3f4b5b;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-float-label > label {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.15s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f19ea6;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f19ea6;
+  }
+  .p-mention-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #3f4b5b;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f19ea6;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #9fdaa8;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #3f4b5b;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #3f4b5b;
+    background: #20262e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.15s;
+    background-color: #151515;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #8dd0ff;
+    background: #8dd0ff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #3f4b5b;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #1dadff;
+    background: #1dadff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #151515;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f19ea6;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #8dd0ff;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #1dadff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #8dd0ff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #1dadff;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #151515;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f19ea6;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #8dd0ff;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #8dd0ff;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f19ea6;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #151515;
+  }
+  .p-selectbutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f19ea6;
+  }
+  .p-slider {
+    background: #3f4b5b;
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #8dd0ff;
+    border: 2px solid #8dd0ff;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-slider .p-slider-range {
+    background: #8dd0ff;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #56bdff;
+    border-color: #56bdff;
+  }
+  .p-treeselect {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #3f4b5b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #6c757d;
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: #8dd0ff;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f19ea6;
+  }
+  .p-button {
+    color: #151515;
+    background: #8dd0ff;
+    border: 1px solid #8dd0ff;
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #56bdff;
+    color: #151515;
+    border-color: #56bdff;
+  }
+  .p-button:not(:disabled):active {
+    background: #1dadff;
+    color: #151515;
+    border-color: #1dadff;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #8dd0ff;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(141, 208, 255, 0.04);
+    color: #8dd0ff;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(141, 208, 255, 0.16);
+    color: #8dd0ff;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(141, 208, 255, 0.04);
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(141, 208, 255, 0.16);
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.15s;
+  }
+  .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: #8dd0ff;
+    background-color: #151515;
+  }
+  .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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #6c757d;
+    border: 1px solid #6c757d;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #5a6268;
+    color: #ffffff;
+    border-color: #5a6268;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #545b62;
+    color: #ffffff;
+    border-color: #4e555b;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #151515;
+    background: #7fd8e6;
+    border: 1px solid #4cc8db;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #4cc8db;
+    color: #151515;
+    border-color: #26bdd3;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b1e8f0;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #26bdd3;
+    color: #151515;
+    border-color: #00b2cc;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #7fd8e6;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #151515;
+    background: #9fdaa8;
+    border: 1px solid #78cc86;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #78cc86;
+    color: #151515;
+    border-color: #5ac06c;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #c5e8ca;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #5ac06c;
+    color: #151515;
+    border-color: #3cb553;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #9fdaa8;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #151515;
+    background: #ffe082;
+    border: 1px solid #ffd54f;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd54f;
+    color: #151515;
+    border-color: #ffca28;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffecb3;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffca28;
+    color: #151515;
+    border-color: #ffc107;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #151515;
+    background: #b7a2e0;
+    border: 1px solid #9a7cd4;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9a7cd4;
+    color: #151515;
+    border-color: #845fca;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3c7ec;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #845fca;
+    color: #151515;
+    border-color: #6d43c0;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #b7a2e0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #151515;
+    background: #f19ea6;
+    border: 1px solid #e97984;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #e97984;
+    color: #151515;
+    border-color: #f75965;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffd0d9;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #f75965;
+    color: #151515;
+    border-color: #fd464e;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f19ea6;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #20262e;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d2d4d5;
+    color: #20262e;
+    border-color: #d2d4d5;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #bcbec0;
+    color: #20262e;
+    border-color: #bcbec0;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #8dd0ff;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #56bdff;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #e3f3fe;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #8dd0ff;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(141, 208, 255, 0.04);
+    color: #8dd0ff;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(141, 208, 255, 0.16);
+    color: #8dd0ff;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(141, 208, 255, 0.04);
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(141, 208, 255, 0.16);
+    color: #8dd0ff;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #7fd8e6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9fdaa8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b7a2e0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    color: #f19ea6;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    color: #f19ea6;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f19ea6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #343e4d;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #3f4b5b;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #3f4b5b;
+    width: 2rem;
+    height: 0.5rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #151515;
+    background: #8dd0ff;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #2a323d;
+    color: #8dd0ff;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #8dd0ff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #8dd0ff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #8dd0ff;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #e3f3fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #8dd0ff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #8dd0ff;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #e3f3fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #e3f3fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #8dd0ff;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #2a323d;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #2a323d;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #2f3641;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #151515;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #151515;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #2f3641;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(141, 208, 255, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 0 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-column-filter-overlay {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #3f4b5b;
+  }
+  .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.5rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #0e9bff;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #3f4b5b;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #3f4b5b;
+    border-color: #3f4b5b;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #3f4b5b;
+    border-color: #3f4b5b;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-paginator {
+    background: #2a323d;
+    color: #8dd0ff;
+    border: solid #3f4b5b;
+    border-width: 0;
+    padding: 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: 1px solid #3f4b5b;
+    color: #8dd0ff;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: #8dd0ff;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 1px solid #3f4b5b;
+    color: #8dd0ff;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 1px solid #3f4b5b;
+    color: #8dd0ff;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #8dd0ff;
+    border-color: #8dd0ff;
+    color: #151515;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: #8dd0ff;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #151515;
+    background: #8dd0ff;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #64bfff;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    padding: 0.286rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .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: #151515;
+  }
+  .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: #151515;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #3eafff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #e3f3fe;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #151515;
+    background: #8dd0ff;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #2a323d;
+    color: #8dd0ff;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #8dd0ff;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #e3f3fe;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #151515;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #151515;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #8dd0ff;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #2a323d;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #2f3641;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #151515;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #151515;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #2f3641;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #8dd0ff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #3f4b5b;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 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: #3f4b5b;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 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: 1.5rem;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-radius: 4px;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 1rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #2a323d;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #3f4b5b;
+  }
+  .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 #3f4b5b;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: color 0.15s, box-shadow 0.15s;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #3f4b5b;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #3f4b5b;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #8dd0ff;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #2a323d;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3f4b5b;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #8dd0ff;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #3f4b5b;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #3f4b5b;
+    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: solid;
+    border-width: 1px;
+    border-color: #2a323d #2a323d #3f4b5b #2a323d;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e3f3fe;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #2a323d;
+    border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e3f3fe;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #2a323d;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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(42, 50, 61, 0);
+    border-bottom-color: #2a323d;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(63, 75, 91, 0);
+    border-bottom-color: #3c4756;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #2a323d;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #3f4b5b;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 4px;
+    box-shadow: none;
+    border: 1px solid #3f4b5b;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #8dd0ff;
+    color: #151515;
+    width: 2rem;
+    height: 2rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #56bdff;
+    color: #151515;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(42, 50, 61, 0);
+    border-bottom-color: #2a323d;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(63, 75, 91, 0);
+    border-bottom-color: #3c4756;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #2a323d;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #3f4b5b;
+  }
+  .p-sidebar {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.75rem;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #3f4b5b;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #3f4b5b;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #3f4b5b;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #3f4b5b;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #2a323d;
+    padding: 1rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #2a323d;
+    padding: 2rem 1rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #343e4d;
+    border: 0 none;
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #8dd0ff;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #8dd0ff;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e3f3fe;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem 1rem;
+    background: #343e4d;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.6);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem 1rem;
+    background: #343e4d;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.6);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 0.6);
+      border-radius: 50%;
+      transition: color 0.15s, box-shadow 0.15s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: transparent;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #e3f3fe;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #2a323d;
+      border: 1px solid #3f4b5b;
+      box-shadow: none;
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #3f4b5b;
+      margin: 0.5rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.15s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #20262e;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #20262e;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+      margin-left: auto;
+      transition: transform 0.15s;
+    }
+    .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.15s;
+      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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e3f3fe;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #3f4b5b;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 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-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #20262e;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 4px;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #3f4b5b;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #3f4b5b;
+    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: solid;
+    border-width: 1px;
+    border-color: #2a323d #2a323d #3f4b5b #2a323d;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e3f3fe;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #2a323d;
+    border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.75rem;
+    margin: 0;
+    border-radius: 4px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 0px;
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 0px;
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 0px;
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 0px;
+    color: #721c24;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #721c24;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 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: color 0.15s, box-shadow 0.15s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-message.p-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #004085;
+  }
+  .p-message.p-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #155724;
+  }
+  .p-message.p-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #856404;
+  }
+  .p-message.p-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #721c24;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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: color 0.15s, box-shadow 0.15s;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .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: #004085;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .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: #155724;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .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: #856404;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .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: #721c24;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 4rem;
+    height: 4rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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: rgba(255, 255, 255, 0.6);
+    width: 4rem;
+    height: 4rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #7789a1;
+    width: 1rem;
+    height: 1rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #687c97;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #8dd0ff;
+    color: #151515;
+  }
+  .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: #8dd0ff;
+    color: #151515;
+  }
+  .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.6);
+    width: 2rem;
+    height: 2rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .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.6);
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.15s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #3f4b5b;
+    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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #2a323d;
+  }
+  .p-chip {
+    background-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.75rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.75rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: color 0.15s, box-shadow 0.15s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 4px;
+    box-shadow: none;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-scrolltop.p-link {
+    background: #8dd0ff;
+  }
+  .p-scrolltop.p-link:hover {
+    background: #56bdff;
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #151515;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #8dd0ff;
+    color: #151515;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #9fdaa8;
+    color: #151515;
+  }
+  .p-tag.p-tag-info {
+    background-color: #7fd8e6;
+    color: #151515;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #151515;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f19ea6;
+    color: #151515;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #8dd0ff;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #8dd0ff;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #8dd0ff;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #151515;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #8dd0ff;
+    color: #151515;
+    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: #6c757d;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #9fdaa8;
+    color: #151515;
+  }
+  .p-badge.p-badge-info {
+    background-color: #7fd8e6;
+    color: #151515;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #151515;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f19ea6;
+    color: #151515;
+  }
+  .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-tag {
+    background: #8dd0ff;
+    color: #151515;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #9fdaa8;
+    color: #151515;
+  }
+  .p-tag.p-tag-info {
+    background-color: #7fd8e6;
+    color: #151515;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #151515;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f19ea6;
+    color: #151515;
+  }
+}
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+@layer primereact {
+  .p-breadcrumb .p-breadcrumb-chevron {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+  .p-breadcrumb .p-breadcrumb-chevron:before {
+    content: "/";
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
new file mode 100644
index 0000000000..c49fadec5f
--- /dev/null
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -0,0 +1,7047 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #2a323d;
+  --surface-b: #20262e;
+  --surface-c: rgba(255, 255, 255, 0.04);
+  --surface-d: #3f4b5b;
+  --surface-e: #2a323d;
+  --surface-f: #2a323d;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #c298d8;
+  --primary-color-text: #151515;
+  --surface-0: #20262e;
+  --surface-50: #363c43;
+  --surface-100: #4d5158;
+  --surface-200: #63676d;
+  --surface-300: #797d82;
+  --surface-400: #909397;
+  --surface-500: #a6a8ab;
+  --surface-600: #bcbec0;
+  --surface-700: #d2d4d5;
+  --surface-800: #e9e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e9e9ea;
+  --gray-100: #d2d4d5;
+  --gray-200: #bcbec0;
+  --gray-300: #a6a8ab;
+  --gray-400: #909397;
+  --gray-500: #797d82;
+  --gray-600: #63676d;
+  --gray-700: #4d5158;
+  --gray-800: #363c43;
+  --gray-900: #20262e;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #20262e;
+  --surface-section: #20262e;
+  --surface-card: #2a323d;
+  --surface-overlay: #2a323d;
+  --surface-border: #3f4b5b;
+  --surface-hover: rgba(255, 255, 255, 0.04);
+  --focus-ring: 0 0 0 1px #f0e6f5;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #c298d8;
+  --highlight-text-color: #151515;
+  color-scheme: dark;
+}
+
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+  --red-50:#fdf5f6;
+  --red-100:#f7cfd2;
+  --red-200:#f0a8af;
+  --red-300:#e9828c;
+  --red-400:#e35b68;
+  --red-500:#dc3545;
+  --red-600:#bb2d3b;
+  --red-700:#9a2530;
+  --red-800:#791d26;
+  --red-900:#58151c;
+  --primary-50:#fcfafd;
+  --primary-100:#f0e6f6;
+  --primary-200:#e5d3ee;
+  --primary-300:#d9bfe7;
+  --primary-400:#ceacdf;
+  --primary-500:#c298d8;
+  --primary-600:#a581b8;
+  --primary-700:#886a97;
+  --primary-800:#6b5477;
+  --primary-900:#4e3d56;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #2a323d;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #3f4b5b;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #2a323d;
+  border: 1px solid #3f4b5b;
+  box-shadow: none;
+  border-radius: 4px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.04);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1.5rem;
+}
+.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 #3f4b5b;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #20262e;
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #c298d8;
+}
+.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: #c298d8;
+}
+.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: #c298d8;
+}
+.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: #c298d8;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.15s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.65;
+  }
+  .p-error {
+    color: #f19ea6;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.107rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #c298d8;
+    color: #151515;
+    border-radius: 4px;
+  }
+  .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: #f19ea6;
+  }
+  .p-autocomplete-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-datepicker {
+    padding: 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #2a323d;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #3f4b5b;
+    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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: color 0.15s, box-shadow 0.15s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #c298d8;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #3f4b5b;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #3f4b5b;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .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: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #3f4b5b;
+    padding-right: 0;
+    padding-left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 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: 0 0 0 1px #f0e6f5;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-cascadeselect-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #3f4b5b;
+    background: #20262e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #151515;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #3f4b5b;
+    background: #20262e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #151515;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #c298d8;
+    background: #c298d8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #3f4b5b;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #9954bb;
+    background: #9954bb;
+    color: #151515;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f19ea6;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #c298d8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9954bb;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #c298d8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9954bb;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #151515;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #c298d8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3f4b5b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9954bb;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #3f4b5b;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #4c5866;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    box-shadow: none;
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-dropdown-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    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;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #3f4b5b;
+    border-left: 1px solid #3f4b5b;
+    border-bottom: 1px solid #3f4b5b;
+    padding: 0.5rem 0.75rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #3f4b5b;
+  }
+  .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.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 4px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 4px;
+    transition-duration: 0.15s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #c298d8;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #151515;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #3f4b5b;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #c298d8;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f19ea6;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    appearance: none;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #3f4b5b;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-float-label > label {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.15s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f19ea6;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #3f4b5b;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f19ea6;
+  }
+  .p-mention-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f19ea6;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #3f4b5b;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f19ea6;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #9fdaa8;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #3f4b5b;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #3f4b5b;
+    background: #20262e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.15s;
+    background-color: #151515;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #c298d8;
+    background: #c298d8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #3f4b5b;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #9954bb;
+    background: #9954bb;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #151515;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f19ea6;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #c298d8;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #9954bb;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #c298d8;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #9954bb;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #151515;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f19ea6;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #c298d8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #c298d8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f19ea6;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #151515;
+  }
+  .p-selectbutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f19ea6;
+  }
+  .p-slider {
+    background: #3f4b5b;
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #c298d8;
+    border: 2px solid #c298d8;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-slider .p-slider-range {
+    background: #c298d8;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #aa70c7;
+    border-color: #aa70c7;
+  }
+  .p-treeselect {
+    background: #20262e;
+    border: 1px solid #3f4b5b;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #3f4b5b;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f19ea6;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #3f4b5b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #3f4b5b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #3f4b5b;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #6c757d;
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: #c298d8;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f19ea6;
+  }
+  .p-button {
+    color: #151515;
+    background: #c298d8;
+    border: 1px solid #c298d8;
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #aa70c7;
+    color: #151515;
+    border-color: #aa70c7;
+  }
+  .p-button:not(:disabled):active {
+    background: #9954bb;
+    color: #151515;
+    border-color: #9954bb;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #c298d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(194, 152, 216, 0.04);
+    color: #c298d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(194, 152, 216, 0.16);
+    color: #c298d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(194, 152, 216, 0.04);
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(194, 152, 216, 0.16);
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.15s;
+  }
+  .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: #c298d8;
+    background-color: #151515;
+  }
+  .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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #6c757d;
+    border: 1px solid #6c757d;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #5a6268;
+    color: #ffffff;
+    border-color: #5a6268;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px rgba(130, 138, 145, 0.5);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #545b62;
+    color: #ffffff;
+    border-color: #4e555b;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #151515;
+    background: #7fd8e6;
+    border: 1px solid #4cc8db;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #4cc8db;
+    color: #151515;
+    border-color: #26bdd3;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b1e8f0;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #26bdd3;
+    color: #151515;
+    border-color: #00b2cc;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #7fd8e6;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #151515;
+    background: #9fdaa8;
+    border: 1px solid #78cc86;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #78cc86;
+    color: #151515;
+    border-color: #5ac06c;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #c5e8ca;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #5ac06c;
+    color: #151515;
+    border-color: #3cb553;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #9fdaa8;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #151515;
+    background: #ffe082;
+    border: 1px solid #ffd54f;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd54f;
+    color: #151515;
+    border-color: #ffca28;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffecb3;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffca28;
+    color: #151515;
+    border-color: #ffc107;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #151515;
+    background: #b7a2e0;
+    border: 1px solid #9a7cd4;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9a7cd4;
+    color: #151515;
+    border-color: #845fca;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3c7ec;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #845fca;
+    color: #151515;
+    border-color: #6d43c0;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #b7a2e0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #151515;
+    background: #f19ea6;
+    border: 1px solid #e97984;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #e97984;
+    color: #151515;
+    border-color: #f75965;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffd0d9;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #f75965;
+    color: #151515;
+    border-color: #fd464e;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f19ea6;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #20262e;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d2d4d5;
+    color: #20262e;
+    border-color: #d2d4d5;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #bcbec0;
+    color: #20262e;
+    border-color: #bcbec0;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #c298d8;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #aa70c7;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #f0e6f5;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c298d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(194, 152, 216, 0.04);
+    color: #c298d8;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(194, 152, 216, 0.16);
+    color: #c298d8;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(194, 152, 216, 0.04);
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(194, 152, 216, 0.16);
+    color: #c298d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #7fd8e6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #7fd8e6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(127, 216, 230, 0.04);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(127, 216, 230, 0.16);
+    border-color: transparent;
+    color: #7fd8e6;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9fdaa8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9fdaa8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(159, 218, 168, 0.04);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(159, 218, 168, 0.16);
+    border-color: transparent;
+    color: #9fdaa8;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b7a2e0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b7a2e0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(183, 162, 224, 0.04);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(183, 162, 224, 0.16);
+    border-color: transparent;
+    color: #b7a2e0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f19ea6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    color: #f19ea6;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    color: #f19ea6;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f19ea6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(241, 158, 166, 0.04);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(241, 158, 166, 0.16);
+    border-color: transparent;
+    color: #f19ea6;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #343e4d;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #3f4b5b;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #3f4b5b;
+    width: 2rem;
+    height: 0.5rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #151515;
+    background: #c298d8;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #2a323d;
+    color: #c298d8;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #c298d8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #c298d8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #c298d8;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #f0e6f5;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #c298d8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #c298d8;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #f0e6f5;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #f0e6f5;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #c298d8;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #2a323d;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #2a323d;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #2f3641;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #151515;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #151515;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #2f3641;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(194, 152, 216, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 0 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-column-filter-overlay {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #3f4b5b;
+  }
+  .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.5rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #8942ae;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #3f4b5b;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #3f4b5b;
+    border-color: #3f4b5b;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #3f4b5b;
+    border-color: #3f4b5b;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-paginator {
+    background: #2a323d;
+    color: #c298d8;
+    border: solid #3f4b5b;
+    border-width: 0;
+    padding: 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: 1px solid #3f4b5b;
+    color: #c298d8;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: #c298d8;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 1px solid #3f4b5b;
+    color: #c298d8;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 1px solid #3f4b5b;
+    color: #c298d8;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #c298d8;
+    border-color: #c298d8;
+    color: #151515;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: #c298d8;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #151515;
+    background: #c298d8;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #b07acd;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    padding: 0.286rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #c298d8;
+    color: #151515;
+  }
+  .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: #151515;
+  }
+  .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: #151515;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #a263c4;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #f0e6f5;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #151515;
+    background: #c298d8;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #2a323d;
+    color: #c298d8;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #c298d8;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #3f4b5b;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #f0e6f5;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #151515;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #151515;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #c298d8;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #2a323d;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #2f3641;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #151515;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #151515;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #2f3641;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #c298d8;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #3f4b5b;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 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: #3f4b5b;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 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: 1.5rem;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-radius: 4px;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 1rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #2a323d;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #3f4b5b;
+  }
+  .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 #3f4b5b;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: color 0.15s, box-shadow 0.15s;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #3f4b5b;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #3f4b5b;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #c298d8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #2a323d;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3f4b5b;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #c298d8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #3f4b5b;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #3f4b5b;
+    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: solid;
+    border-width: 1px;
+    border-color: #2a323d #2a323d #3f4b5b #2a323d;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #f0e6f5;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #2a323d;
+    border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #f0e6f5;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #2a323d;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    padding: 1rem 1.25rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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(42, 50, 61, 0);
+    border-bottom-color: #2a323d;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(63, 75, 91, 0);
+    border-bottom-color: #3c4756;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #2a323d;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #3f4b5b;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 4px;
+    box-shadow: none;
+    border: 1px solid #3f4b5b;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #c298d8;
+    color: #151515;
+    width: 2rem;
+    height: 2rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #aa70c7;
+    color: #151515;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(42, 50, 61, 0);
+    border-bottom-color: #2a323d;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(63, 75, 91, 0);
+    border-bottom-color: #3c4756;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #2a323d;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #3f4b5b;
+  }
+  .p-sidebar {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.75rem;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #3f4b5b;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #3f4b5b;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #3f4b5b;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #3f4b5b;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #2a323d;
+    padding: 1rem 1.25rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #2a323d;
+    padding: 2rem 1rem;
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #343e4d;
+    border: 0 none;
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #c298d8;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #c298d8;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #f0e6f5;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem 1rem;
+    background: #343e4d;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.6);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem 1rem;
+    background: #343e4d;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.6);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 0.6);
+      border-radius: 50%;
+      transition: color 0.15s, box-shadow 0.15s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: transparent;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #f0e6f5;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #2a323d;
+      border: 1px solid #3f4b5b;
+      box-shadow: none;
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #3f4b5b;
+      margin: 0.5rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.15s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #20262e;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #20262e;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+      margin-left: auto;
+      transition: transform 0.15s;
+    }
+    .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.15s;
+      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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    background: #2a323d;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #f0e6f5;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #3f4b5b;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #3f4b5b;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 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-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #20262e;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 4px;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #c298d8;
+    color: #151515;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #3f4b5b;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #3f4b5b;
+    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: solid;
+    border-width: 1px;
+    border-color: #2a323d #2a323d #3f4b5b #2a323d;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #f0e6f5;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #2a323d;
+    border-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #2a323d;
+    border-color: #3f4b5b #3f4b5b #2a323d #3f4b5b;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #20262e;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #20262e;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.75rem;
+    margin: 0;
+    border-radius: 4px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 0px;
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 0px;
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 0px;
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 0px;
+    color: #721c24;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #721c24;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 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: color 0.15s, box-shadow 0.15s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-message.p-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #004085;
+  }
+  .p-message.p-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #155724;
+  }
+  .p-message.p-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #856404;
+  }
+  .p-message.p-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #721c24;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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: color 0.15s, box-shadow 0.15s;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .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: #004085;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .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: #155724;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .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: #856404;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .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: #721c24;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 4rem;
+    height: 4rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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: rgba(255, 255, 255, 0.6);
+    width: 4rem;
+    height: 4rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #7789a1;
+    width: 1rem;
+    height: 1rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #687c97;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #c298d8;
+    color: #151515;
+  }
+  .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: #c298d8;
+    color: #151515;
+  }
+  .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.6);
+    width: 2rem;
+    height: 2rem;
+    transition: color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .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.6);
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.15s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #3f4b5b;
+    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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #2a323d;
+  }
+  .p-chip {
+    background-color: #3f4b5b;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.75rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.75rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: color 0.15s, box-shadow 0.15s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 4px;
+    box-shadow: none;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-scrolltop.p-link {
+    background: #c298d8;
+  }
+  .p-scrolltop.p-link:hover {
+    background: #aa70c7;
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #151515;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #c298d8;
+    color: #151515;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #9fdaa8;
+    color: #151515;
+  }
+  .p-tag.p-tag-info {
+    background-color: #7fd8e6;
+    color: #151515;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #151515;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f19ea6;
+    color: #151515;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #c298d8;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #c298d8;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #3f4b5b;
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #c298d8;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #151515;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #2a323d;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3f4b5b;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #c298d8;
+    color: #151515;
+    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: #6c757d;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #9fdaa8;
+    color: #151515;
+  }
+  .p-badge.p-badge-info {
+    background-color: #7fd8e6;
+    color: #151515;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #151515;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f19ea6;
+    color: #151515;
+  }
+  .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-tag {
+    background: #c298d8;
+    color: #151515;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #9fdaa8;
+    color: #151515;
+  }
+  .p-tag.p-tag-info {
+    background-color: #7fd8e6;
+    color: #151515;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #151515;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f19ea6;
+    color: #151515;
+  }
+}
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+@layer primereact {
+  .p-breadcrumb .p-breadcrumb-chevron {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+  .p-breadcrumb .p-breadcrumb-chevron:before {
+    content: "/";
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
new file mode 100644
index 0000000000..ac11f45102
--- /dev/null
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -0,0 +1,7047 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #efefef;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #212529;
+  --text-color-secondary: #6c757d;
+  --primary-color: #007bff;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f8f9fa;
+  --surface-200: #e9ecef;
+  --surface-300: #dee2e6;
+  --surface-400: #ced4da;
+  --surface-500: #adb5bd;
+  --surface-600: #6c757d;
+  --surface-700: #495057;
+  --surface-800: #343a40;
+  --surface-900: #212529;
+  --gray-50: #f9fafb;
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-300: #dee2e6;
+  --gray-400: #ced4da;
+  --gray-500: #adb5bd;
+  --gray-600: #6c757d;
+  --gray-700: #495057;
+  --gray-800: #343a40;
+  --gray-900: #212529;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #efefef;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #e9ecef;
+  --focus-ring: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #007bff;
+  --highlight-text-color: #ffffff;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+  --red-50:#fdf5f6;
+  --red-100:#f7cfd2;
+  --red-200:#f0a8af;
+  --red-300:#e9828c;
+  --red-400:#e35b68;
+  --red-500:#dc3545;
+  --red-600:#bb2d3b;
+  --red-700:#9a2530;
+  --red-800:#791d26;
+  --red-900:#58151c;
+  --primary-50:#f2f8ff;
+  --primary-100:#c2dfff;
+  --primary-200:#91c6ff;
+  --primary-300:#61adff;
+  --primary-400:#3094ff;
+  --primary-500:#007bff;
+  --primary-600:#0069d9;
+  --primary-700:#0056b3;
+  --primary-800:#00448c;
+  --primary-900:#003166;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #efefef;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: none;
+  border-radius: 4px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #212529;
+  background: #e9ecef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1.5rem;
+}
+.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 #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #495057;
+  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: #212529;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #212529;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #212529;
+}
+.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: #007bff;
+}
+.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: #007bff;
+}
+.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: #007bff;
+}
+.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: #007bff;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.15s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.65;
+  }
+  .p-error {
+    color: #dc3545;
+  }
+  .p-text-secondary {
+    color: #6c757d;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.107rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #212529;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #007bff;
+    color: #ffffff;
+    border-radius: 4px;
+  }
+  .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: #dc3545;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-datepicker {
+    padding: 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #efefef;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+    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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #007bff;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ced4da;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .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: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dee2e6;
+    padding-right: 0;
+    padding-left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #ced4da;
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #212529;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #212529;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #007bff;
+    background: #007bff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ced4da;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #0062cc;
+    background: #0062cc;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #dc3545;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007bff;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0062cc;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #007bff;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0062cc;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #ffffff;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007bff;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0062cc;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ced4da;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #212529;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #ced4da;
+    color: #212529;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #212529;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #212529;
+    border: 1px solid #212529;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    box-shadow: none;
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6c757d;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #495057;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    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;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #e9ecef;
+    color: #495057;
+    border-top: 1px solid #ced4da;
+    border-left: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    padding: 0.5rem 0.75rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #ced4da;
+  }
+  .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.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 4px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 4px;
+    transition-duration: 0.15s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #007bff;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #ced4da;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #007bff;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #dc3545;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    appearance: none;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ced4da;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-float-label > label {
+    left: 0.75rem;
+    color: #6c757d;
+    transition-duration: 0.15s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #dc3545;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6c757d;
+  }
+  :-moz-placeholder {
+    color: #6c757d;
+  }
+  ::-moz-placeholder {
+    color: #6c757d;
+  }
+  :-ms-input-placeholder {
+    color: #6c757d;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #efefef;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #495057;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    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: #495057;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-listbox.p-invalid {
+    border-color: #dc3545;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #efefef;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #212529;
+    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: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    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: #495057;
+  }
+  .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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .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 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e9ecef;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #dc3545;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffc107;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #28a745;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #ced4da;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #212529;
+    border-radius: 50%;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.15s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #007bff;
+    background: #007bff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ced4da;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #0062cc;
+    background: #0062cc;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #dc3545;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #007bff;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0062cc;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #007bff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0062cc;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #495057;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #dc3545;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #007bff;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #007bff;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #dc3545;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #dc3545;
+  }
+  .p-slider {
+    background: #e9ecef;
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #007bff;
+    border: 2px solid #007bff;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-slider .p-slider-range {
+    background: #007bff;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #0069d9;
+    border-color: #0069d9;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #212529;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #495057;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #efefef;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #6c757d;
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: #007bff;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #dc3545;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #007bff;
+    border: 1px solid #007bff;
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #0069d9;
+    color: #ffffff;
+    border-color: #0069d9;
+  }
+  .p-button:not(:disabled):active {
+    background: #0062cc;
+    color: #ffffff;
+    border-color: #0062cc;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #007bff;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 123, 255, 0.04);
+    color: #007bff;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 123, 255, 0.16);
+    color: #007bff;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #007bff;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(0, 123, 255, 0.04);
+    color: #007bff;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(0, 123, 255, 0.16);
+    color: #007bff;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.15s;
+  }
+  .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: #007bff;
+    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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #6c757d;
+    border: 1px solid #6c757d;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #5a6268;
+    color: #ffffff;
+    border-color: #5a6268;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #545b62;
+    color: #ffffff;
+    border-color: #4e555b;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #17a2b8;
+    border: 1px solid #17a2b8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #138496;
+    color: #ffffff;
+    border-color: #117a8b;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #138496;
+    color: #ffffff;
+    border-color: #117a8b;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #17a2b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #28a745;
+    border: 1px solid #28a745;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #218838;
+    color: #ffffff;
+    border-color: #1e7e34;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #1e7e34;
+    color: #ffffff;
+    border-color: #1c7430;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #28a745;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #ffc107;
+    border: 1px solid #ffc107;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #e0a800;
+    color: #212529;
+    border-color: #d39e00;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #d39e00;
+    color: #212529;
+    border-color: #c69500;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #6f42c1;
+    border: 1px solid #6f42c1;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #633bad;
+    color: #ffffff;
+    border-color: #58349a;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #d3c6ec;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #58349a;
+    color: #ffffff;
+    border-color: #4d2e87;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #6f42c1;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #dc3545;
+    border: 1px solid #dc3545;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c82333;
+    color: #ffffff;
+    border-color: #bd2130;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #bd2130;
+    color: #ffffff;
+    border-color: #b21f2d;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #dc3545;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212529;
+    border: 1px solid #212529;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #343a40;
+    color: #ffffff;
+    border-color: #343a40;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #495057;
+    color: #ffffff;
+    border-color: #495057;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    border-color: transparent;
+    color: #212529;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    border-color: transparent;
+    color: #212529;
+  }
+  .p-button.p-button-link {
+    color: #007bff;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #0069d9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #007bff;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #007bff;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 123, 255, 0.04);
+    color: #007bff;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 123, 255, 0.16);
+    color: #007bff;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #007bff;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 123, 255, 0.04);
+    color: #007bff;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 123, 255, 0.16);
+    color: #007bff;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #17a2b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #28a745;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #6f42c1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    color: #dc3545;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    color: #dc3545;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #dc3545;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #495057;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #343a40;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #e9ecef;
+    width: 2rem;
+    height: 0.5rem;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: #dee2e6;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #ffffff;
+    background: #007bff;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #ffffff;
+    color: #007bff;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #007bff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #007bff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #007bff;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #212529;
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .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: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(38, 143, 255, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #007bff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #007bff;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(38, 143, 255, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(38, 143, 255, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #007bff;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #efefef;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(0, 123, 255, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #212529;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #212529;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 0 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #495057;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #dee2e6;
+  }
+  .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.5rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #e9ecef;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #003e80;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #007bff;
+    border: solid #dee2e6;
+    border-width: 0;
+    padding: 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: #ffffff;
+    border: 1px solid #dee2e6;
+    color: #007bff;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #007bff;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: #ffffff;
+    border: 1px solid #dee2e6;
+    color: #007bff;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: #ffffff;
+    border: 1px solid #dee2e6;
+    color: #007bff;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #007bff;
+    border-color: #007bff;
+    color: #ffffff;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #007bff;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #ffffff;
+    background: #007bff;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #0067d6;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 1.25rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    padding: 0.286rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0062cc;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(38, 143, 255, 0.5);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #ffffff;
+    background: #007bff;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #ffffff;
+    color: #007bff;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #007bff;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #212529;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(38, 143, 255, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #212529;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #007bff;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #efefef;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #007bff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dee2e6;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem 1.25rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    font-weight: 600;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #efefef;
+    border-color: #dee2e6;
+    color: #212529;
+    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: #dee2e6;
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #212529;
+    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: 1.5rem;
+  }
+  .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: #6c757d;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem 1.25rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    font-weight: 600;
+    border-radius: 4px;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: box-shadow 0.15s;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 1rem 1.25rem;
+    color: #212529;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #212529;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #dee2e6;
+  }
+  .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 #dee2e6;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    background: #efefef;
+    color: #212529;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1.25rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    border-radius: 4px;
+    color: #212529;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: box-shadow 0.15s;
+    background: #efefef;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dee2e6;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dee2e6;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007bff;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #212529;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007bff;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #efefef;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #dee2e6;
+    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: solid;
+    border-width: 1px;
+    border-color: #ffffff #ffffff #dee2e6 #ffffff;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #dee2e6;
+    color: #6c757d;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
+    color: #495057;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #495057;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #efefef;
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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(0, 0, 0, 0);
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 4px;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #e9ecef;
+    background: #ffffff;
+    color: #212529;
+    padding: 1rem;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #212529;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #e9ecef;
+    background: #ffffff;
+    color: #212529;
+    padding: 1rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #007bff;
+    color: #ffffff;
+    width: 2rem;
+    height: 2rem;
+    transition: box-shadow 0.15s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #0069d9;
+    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(0, 0, 0, 0);
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #212529;
+    color: #ffffff;
+    padding: 0.5rem 0.75rem;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #212529;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #212529;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #212529;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #212529;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #efefef;
+    padding: 1rem 1.25rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #efefef;
+    border: 0 none;
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #007bff;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #007bff;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(38, 143, 255, 0.5);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem 1rem;
+    background: #efefef;
+    color: rgba(0, 0, 0, 0.9);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.5);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem 1rem;
+    background: #efefef;
+    color: rgba(0, 0, 0, 0.9);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.5);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @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.5);
+      border-radius: 50%;
+      transition: box-shadow 0.15s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: rgba(0, 0, 0, 0.7);
+      background: transparent;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      box-shadow: none;
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #dee2e6;
+      margin: 0.5rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #212529;
+      transition: box-shadow 0.15s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #212529;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #212529;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #212529;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #212529;
+      background: #dee2e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #212529;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+      margin-left: auto;
+      transition: transform 0.15s;
+    }
+    .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.15s;
+      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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #212529;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #efefef;
+    border-color: #dee2e6;
+    color: #212529;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dee2e6;
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    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-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #212529;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #212529;
+    border: 1px solid #dee2e6;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 4px;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6c757d;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #212529;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #dee2e6;
+    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: solid;
+    border-width: 1px;
+    border-color: #ffffff #ffffff #dee2e6 #ffffff;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #dee2e6;
+    color: #6c757d;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
+    color: #495057;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.75rem;
+    margin: 0;
+    border-radius: 4px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 0px;
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 0px;
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 0px;
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 0px;
+    color: #721c24;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #721c24;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 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: box-shadow 0.15s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-message.p-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #004085;
+  }
+  .p-message.p-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #155724;
+  }
+  .p-message.p-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #856404;
+  }
+  .p-message.p-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #721c24;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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: box-shadow 0.15s;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .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: #004085;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .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: #155724;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .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: #856404;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .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: #721c24;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #efefef;
+    width: 4rem;
+    height: 4rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #efefef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #efefef;
+    width: 4rem;
+    height: 4rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #efefef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #efefef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #e9ecef;
+    width: 1rem;
+    height: 1rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #dee2e6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #007bff;
+    color: #ffffff;
+  }
+  .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: #007bff;
+    color: #ffffff;
+  }
+  .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: #efefef;
+    width: 2rem;
+    height: 2rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .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: #efefef;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.15s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: box-shadow 0.15s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dee2e6;
+    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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dee2e6;
+    color: #212529;
+    border-radius: 16px;
+    padding: 0 0.75rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.75rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 4px;
+    box-shadow: none;
+    transition: box-shadow 0.15s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #efefef;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e9ecef;
+    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: #007bff;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #28a745;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #17a2b8;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffc107;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #dc3545;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e9ecef;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007bff;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #007bff;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e9ecef;
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #007bff;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #007bff;
+    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: #6c757d;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #28a745;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #17a2b8;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffc107;
+    color: #212529;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #dc3545;
+    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-tag {
+    background: #007bff;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #28a745;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #17a2b8;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffc107;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #dc3545;
+    color: #ffffff;
+  }
+}
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+@layer primereact {
+  .p-breadcrumb .p-breadcrumb-chevron {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+  .p-breadcrumb .p-breadcrumb-chevron:before {
+    content: "/";
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
new file mode 100644
index 0000000000..8225ae25a7
--- /dev/null
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -0,0 +1,7047 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #efefef;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #212529;
+  --text-color-secondary: #6c757d;
+  --primary-color: #883cae;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f8f9fa;
+  --surface-200: #e9ecef;
+  --surface-300: #dee2e6;
+  --surface-400: #ced4da;
+  --surface-500: #adb5bd;
+  --surface-600: #6c757d;
+  --surface-700: #495057;
+  --surface-800: #343a40;
+  --surface-900: #212529;
+  --gray-50: #f9fafb;
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-300: #dee2e6;
+  --gray-400: #ced4da;
+  --gray-500: #adb5bd;
+  --gray-600: #6c757d;
+  --gray-700: #495057;
+  --gray-800: #343a40;
+  --gray-900: #212529;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #efefef;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #e9ecef;
+  --focus-ring: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #883cae;
+  --highlight-text-color: #ffffff;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f3f8ff;
+  --blue-100:#c5dcff;
+  --blue-200:#97c1fe;
+  --blue-300:#69a5fe;
+  --blue-400:#3b8afd;
+  --blue-500:#0d6efd;
+  --blue-600:#0b5ed7;
+  --blue-700:#094db1;
+  --blue-800:#073d8b;
+  --blue-900:#052c65;
+  --green-50:#f4f9f6;
+  --green-100:#c8e2d6;
+  --green-200:#9ccbb5;
+  --green-300:#70b595;
+  --green-400:#459e74;
+  --green-500:#198754;
+  --green-600:#157347;
+  --green-700:#125f3b;
+  --green-800:#0e4a2e;
+  --green-900:#0a3622;
+  --yellow-50:#fffcf3;
+  --yellow-100:#fff0c3;
+  --yellow-200:#ffe494;
+  --yellow-300:#ffd965;
+  --yellow-400:#ffcd36;
+  --yellow-500:#ffc107;
+  --yellow-600:#d9a406;
+  --yellow-700:#b38705;
+  --yellow-800:#8c6a04;
+  --yellow-900:#664d03;
+  --cyan-50:#f3fcfe;
+  --cyan-100:#c5f2fb;
+  --cyan-200:#97e8f9;
+  --cyan-300:#69def6;
+  --cyan-400:#3bd4f3;
+  --cyan-500:#0dcaf0;
+  --cyan-600:#0baccc;
+  --cyan-700:#098da8;
+  --cyan-800:#076f84;
+  --cyan-900:#055160;
+  --pink-50:#fdf5f9;
+  --pink-100:#f5cee1;
+  --pink-200:#eda7ca;
+  --pink-300:#e681b3;
+  --pink-400:#de5a9b;
+  --pink-500:#d63384;
+  --pink-600:#b62b70;
+  --pink-700:#96245c;
+  --pink-800:#761c49;
+  --pink-900:#561435;
+  --indigo-50:#f7f3fe;
+  --indigo-100:#dac6fc;
+  --indigo-200:#bd98f9;
+  --indigo-300:#a06bf7;
+  --indigo-400:#833df4;
+  --indigo-500:#6610f2;
+  --indigo-600:#570ece;
+  --indigo-700:#470ba9;
+  --indigo-800:#380985;
+  --indigo-900:#290661;
+  --teal-50:#f4fcfa;
+  --teal-100:#c9f2e6;
+  --teal-200:#9fe8d2;
+  --teal-300:#75debf;
+  --teal-400:#4ad3ab;
+  --teal-500:#20c997;
+  --teal-600:#1bab80;
+  --teal-700:#168d6a;
+  --teal-800:#126f53;
+  --teal-900:#0d503c;
+  --orange-50:#fff9f3;
+  --orange-100:#ffe0c7;
+  --orange-200:#fec89a;
+  --orange-300:#feaf6d;
+  --orange-400:#fd9741;
+  --orange-500:#fd7e14;
+  --orange-600:#d76b11;
+  --orange-700:#b1580e;
+  --orange-800:#8b450b;
+  --orange-900:#653208;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#e0e4ea;
+  --bluegray-200:#c7ced9;
+  --bluegray-300:#aeb9c8;
+  --bluegray-400:#95a3b8;
+  --bluegray-500:#7c8ea7;
+  --bluegray-600:#69798e;
+  --bluegray-700:#576375;
+  --bluegray-800:#444e5c;
+  --bluegray-900:#323943;
+  --purple-50:#f8f6fc;
+  --purple-100:#dcd2f0;
+  --purple-200:#c1aee4;
+  --purple-300:#a68ad9;
+  --purple-400:#8a66cd;
+  --purple-500:#6f42c1;
+  --purple-600:#5e38a4;
+  --purple-700:#4e2e87;
+  --purple-800:#3d246a;
+  --purple-900:#2c1a4d;
+  --red-50:#fdf5f6;
+  --red-100:#f7cfd2;
+  --red-200:#f0a8af;
+  --red-300:#e9828c;
+  --red-400:#e35b68;
+  --red-500:#dc3545;
+  --red-600:#bb2d3b;
+  --red-700:#9a2530;
+  --red-800:#791d26;
+  --red-900:#58151c;
+  --primary-50:#f9f5fb;
+  --primary-100:#e2d0ec;
+  --primary-200:#ccabdc;
+  --primary-300:#b586cd;
+  --primary-400:#9f61bd;
+  --primary-500:#883cae;
+  --primary-600:#743394;
+  --primary-700:#5f2a7a;
+  --primary-800:#4b2160;
+  --primary-900:#361846;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #efefef;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-shadow: none;
+  border-radius: 4px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #212529;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #212529;
+  background: #e9ecef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1.5rem;
+}
+.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 #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #495057;
+  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: #212529;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #212529;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #212529;
+}
+.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: #883cae;
+}
+.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: #883cae;
+}
+.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: #883cae;
+}
+.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: #883cae;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.15s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.65;
+  }
+  .p-error {
+    color: #dc3545;
+  }
+  .p-text-secondary {
+    color: #6c757d;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.107rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #212529;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #883cae;
+    color: #ffffff;
+    border-radius: 4px;
+  }
+  .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: #dc3545;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-datepicker {
+    padding: 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #efefef;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+    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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #883cae;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ced4da;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .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: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dee2e6;
+    padding-right: 0;
+    padding-left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #ced4da;
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #212529;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #212529;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.15s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #883cae;
+    background: #883cae;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ced4da;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #68329e;
+    background: #68329e;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #dc3545;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #883cae;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #68329e;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #883cae;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #68329e;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #ffffff;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #883cae;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #efefef;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #68329e;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ced4da;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #212529;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #ced4da;
+    color: #212529;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #212529;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #212529;
+    border: 1px solid #212529;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    box-shadow: none;
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6c757d;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #495057;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    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;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #e9ecef;
+    color: #495057;
+    border-top: 1px solid #ced4da;
+    border-left: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    padding: 0.5rem 0.75rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #ced4da;
+  }
+  .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.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 4px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 4px;
+    transition-duration: 0.15s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #883cae;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #ced4da;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #883cae;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #dc3545;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    appearance: none;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ced4da;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #efefef;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-float-label > label {
+    left: 0.75rem;
+    color: #6c757d;
+    transition-duration: 0.15s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #dc3545;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6c757d;
+  }
+  :-moz-placeholder {
+    color: #6c757d;
+  }
+  ::-moz-placeholder {
+    color: #6c757d;
+  }
+  :-ms-input-placeholder {
+    color: #6c757d;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #efefef;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #495057;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    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: #495057;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-listbox.p-invalid {
+    border-color: #dc3545;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #efefef;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #212529;
+    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: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    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: #495057;
+  }
+  .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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .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 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #dc3545;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e9ecef;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #dc3545;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffc107;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #28a745;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #ced4da;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #212529;
+    border-radius: 50%;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.15s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #883cae;
+    background: #883cae;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ced4da;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #68329e;
+    background: #68329e;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #dc3545;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #883cae;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #68329e;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #883cae;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #68329e;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #495057;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #dc3545;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #883cae;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #883cae;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #dc3545;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #dc3545;
+  }
+  .p-slider {
+    background: #e9ecef;
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #883cae;
+    border: 2px solid #883cae;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-slider .p-slider-range {
+    background: #883cae;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #7a38a7;
+    border-color: #7a38a7;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ced4da;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #212529;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #495057;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #495057;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #dc3545;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1.5rem;
+    color: #212529;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #efefef;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #efefef;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #efefef;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #6c757d;
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #6c757d;
+    border: 1px solid #6c757d;
+    color: #ffffff;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #5a6268;
+    border-color: #545b62;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #545b62;
+    border-color: #4e555b;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: #883cae;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #dc3545;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #883cae;
+    border: 1px solid #883cae;
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #7a38a7;
+    color: #ffffff;
+    border-color: #7a38a7;
+  }
+  .p-button:not(:disabled):active {
+    background: #68329e;
+    color: #ffffff;
+    border-color: #68329e;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #883cae;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(136, 60, 174, 0.04);
+    color: #883cae;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(136, 60, 174, 0.16);
+    color: #883cae;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #883cae;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(136, 60, 174, 0.04);
+    color: #883cae;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(136, 60, 174, 0.16);
+    color: #883cae;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.15s;
+  }
+  .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: #883cae;
+    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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #6c757d;
+    border: 1px solid #6c757d;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #5a6268;
+    color: #ffffff;
+    border-color: #5a6268;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #545b62;
+    color: #ffffff;
+    border-color: #4e555b;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #17a2b8;
+    border: 1px solid #17a2b8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #138496;
+    color: #ffffff;
+    border-color: #117a8b;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(58, 176, 195, 0.5);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #138496;
+    color: #ffffff;
+    border-color: #117a8b;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #17a2b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #28a745;
+    border: 1px solid #28a745;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #218838;
+    color: #ffffff;
+    border-color: #1e7e34;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, 0.5);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #1e7e34;
+    color: #ffffff;
+    border-color: #1c7430;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #28a745;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #ffc107;
+    border: 1px solid #ffc107;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #e0a800;
+    color: #212529;
+    border-color: #d39e00;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(222, 170, 12, 0.5);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #d39e00;
+    color: #212529;
+    border-color: #c69500;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #6f42c1;
+    border: 1px solid #6f42c1;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #633bad;
+    color: #ffffff;
+    border-color: #58349a;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #d3c6ec;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #58349a;
+    color: #ffffff;
+    border-color: #4d2e87;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #6f42c1;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #dc3545;
+    border: 1px solid #dc3545;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c82333;
+    color: #ffffff;
+    border-color: #bd2130;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #bd2130;
+    color: #ffffff;
+    border-color: #b21f2d;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #dc3545;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212529;
+    border: 1px solid #212529;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #343a40;
+    color: #ffffff;
+    border-color: #343a40;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #495057;
+    color: #ffffff;
+    border-color: #495057;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    border-color: transparent;
+    color: #212529;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    border-color: transparent;
+    color: #212529;
+  }
+  .p-button.p-button-link {
+    color: #883cae;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #7a38a7;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #883cae;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #883cae;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(136, 60, 174, 0.04);
+    color: #883cae;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(136, 60, 174, 0.16);
+    color: #883cae;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #883cae;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(136, 60, 174, 0.04);
+    color: #883cae;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(136, 60, 174, 0.16);
+    color: #883cae;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #6c757d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(108, 117, 125, 0.04);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(108, 117, 125, 0.16);
+    border-color: transparent;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #17a2b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #17a2b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(23, 162, 184, 0.04);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(23, 162, 184, 0.16);
+    border-color: transparent;
+    color: #17a2b8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #28a745;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #28a745;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(40, 167, 69, 0.04);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(40, 167, 69, 0.16);
+    border-color: transparent;
+    color: #28a745;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    border-color: transparent;
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #6f42c1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #6f42c1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(111, 66, 193, 0.04);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(111, 66, 193, 0.16);
+    border-color: transparent;
+    color: #6f42c1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #dc3545;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    color: #dc3545;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    color: #dc3545;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #dc3545;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(220, 53, 69, 0.04);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(220, 53, 69, 0.16);
+    border-color: transparent;
+    color: #dc3545;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #495057;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #343a40;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #e9ecef;
+    width: 2rem;
+    height: 0.5rem;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: #dee2e6;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #ffffff;
+    background: #883cae;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #ffffff;
+    color: #883cae;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #883cae;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #883cae;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #883cae;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #212529;
+    transition: box-shadow 0.15s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .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: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(136, 60, 174, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #883cae;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #883cae;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(136, 60, 174, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(136, 60, 174, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #883cae;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #efefef;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(136, 60, 174, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #212529;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #212529;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 0 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    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: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #495057;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    box-shadow: none;
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1.5rem;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.5rem;
+    border-bottom: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #dee2e6;
+  }
+  .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.5rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #e9ecef;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #3e1b4f;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #883cae;
+    border: solid #dee2e6;
+    border-width: 0;
+    padding: 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: #ffffff;
+    border: 1px solid #dee2e6;
+    color: #883cae;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #883cae;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: #ffffff;
+    border: 1px solid #dee2e6;
+    color: #883cae;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: #ffffff;
+    border: 1px solid #dee2e6;
+    color: #883cae;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0 0 0 -1px;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #883cae;
+    border-color: #883cae;
+    color: #ffffff;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #883cae;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem 1.25rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1.5rem;
+    margin: 0;
+    border: 0 none;
+    color: #212529;
+    background: transparent;
+    transition: transform 0.15s, box-shadow 0.15s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #ffffff;
+    background: #883cae;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #703290;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    padding: 1.25rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    padding: 0.286rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #6d308b;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 1px 0 0 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #efefef;
+    color: #212529;
+    border: solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #efefef;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 2px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 1px 0;
+    font-weight: 600;
+    color: #212529;
+    background: #ffffff;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(136, 60, 174, 0.5);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #ffffff;
+    background: #883cae;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #ffffff;
+    color: #883cae;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #883cae;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #212529;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dee2e6;
+    border-width: 1px 0 0 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(136, 60, 174, 0.5);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #212529;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #883cae;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #efefef;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.05);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #883cae;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dee2e6;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem 1.25rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    font-weight: 600;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #efefef;
+    border-color: #dee2e6;
+    color: #212529;
+    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: #dee2e6;
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #212529;
+    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: 1.5rem;
+  }
+  .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: #6c757d;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem 1.25rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    font-weight: 600;
+    border-radius: 4px;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: box-shadow 0.15s;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 1rem 1.25rem;
+    color: #212529;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #212529;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #dee2e6;
+  }
+  .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 #dee2e6;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    background: #efefef;
+    color: #212529;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1.25rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    border-radius: 4px;
+    color: #212529;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: box-shadow 0.15s;
+    background: #efefef;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dee2e6;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dee2e6;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #883cae;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.15s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #212529;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #883cae;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #efefef;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #dee2e6;
+    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: solid;
+    border-width: 1px;
+    border-color: #ffffff #ffffff #dee2e6 #ffffff;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #dee2e6;
+    color: #6c757d;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
+    color: #495057;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #495057;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #efefef;
+    border: 1px solid #dee2e6;
+    padding: 1rem 1.25rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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(0, 0, 0, 0);
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 4px;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #e9ecef;
+    background: #ffffff;
+    color: #212529;
+    padding: 1rem;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #212529;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #e9ecef;
+    background: #ffffff;
+    color: #212529;
+    padding: 1rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #883cae;
+    color: #ffffff;
+    width: 2rem;
+    height: 2rem;
+    transition: box-shadow 0.15s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #7a38a7;
+    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(0, 0, 0, 0);
+    border-bottom-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: rgba(0, 0, 0, 0.2);
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #212529;
+    color: #ffffff;
+    padding: 0.5rem 0.75rem;
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #212529;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #212529;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #212529;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #212529;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #efefef;
+    padding: 1rem 1.25rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dee2e6;
+    color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #efefef;
+    border: 0 none;
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #883cae;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #883cae;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(136, 60, 174, 0.5);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem 1rem;
+    background: #efefef;
+    color: rgba(0, 0, 0, 0.9);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.5);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #212529;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem 1rem;
+    background: #efefef;
+    color: rgba(0, 0, 0, 0.9);
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.5);
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.5);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.5);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.7);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @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.5);
+      border-radius: 50%;
+      transition: box-shadow 0.15s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: rgba(0, 0, 0, 0.7);
+      background: transparent;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      box-shadow: none;
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #dee2e6;
+      margin: 0.5rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #212529;
+      transition: box-shadow 0.15s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #212529;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #212529;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #212529;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #212529;
+      background: #dee2e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #212529;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+      margin-left: auto;
+      transition: transform 0.15s;
+    }
+    .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.15s;
+      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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dee2e6;
+    color: #212529;
+    background: #efefef;
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #212529;
+    padding: 1rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #efefef;
+    border-color: #dee2e6;
+    color: #212529;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dee2e6;
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #212529;
+    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-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #212529;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #212529;
+    border: 1px solid #dee2e6;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 4px;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6c757d;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #212529;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #dee2e6;
+    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: solid;
+    border-width: 1px;
+    border-color: #ffffff #ffffff #dee2e6 #ffffff;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #dee2e6;
+    color: #6c757d;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #dee2e6 #dee2e6 #ffffff #dee2e6;
+    color: #495057;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #212529;
+    transition: box-shadow 0.15s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #212529;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #212529;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #212529;
+    background: #dee2e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #212529;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.75rem;
+    margin: 0;
+    border-radius: 4px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 0px;
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #004085;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 0px;
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #155724;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 0px;
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #856404;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 0px;
+    color: #721c24;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #721c24;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 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: box-shadow 0.15s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-message.p-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #004085;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #004085;
+  }
+  .p-message.p-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #155724;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #155724;
+  }
+  .p-message.p-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #856404;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #856404;
+  }
+  .p-message.p-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #721c24;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #721c24;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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: box-shadow 0.15s;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #cce5ff;
+    border: solid #b8daff;
+    border-width: 1px;
+    color: #004085;
+  }
+  .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: #004085;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #d4edda;
+    border: solid #c3e6cb;
+    border-width: 1px;
+    color: #155724;
+  }
+  .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: #155724;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fff3cd;
+    border: solid #ffeeba;
+    border-width: 1px;
+    color: #856404;
+  }
+  .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: #856404;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8d7da;
+    border: solid #f5c6cb;
+    border-width: 1px;
+    color: #721c24;
+  }
+  .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: #721c24;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #efefef;
+    width: 4rem;
+    height: 4rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #efefef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #efefef;
+    width: 4rem;
+    height: 4rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #efefef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #efefef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #e9ecef;
+    width: 1rem;
+    height: 1rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #dee2e6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #883cae;
+    color: #ffffff;
+  }
+  .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: #883cae;
+    color: #ffffff;
+  }
+  .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: #efefef;
+    width: 2rem;
+    height: 2rem;
+    transition: box-shadow 0.15s;
+    border-radius: 4px;
+  }
+  .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: #efefef;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.15s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: box-shadow 0.15s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dee2e6;
+    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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dee2e6;
+    color: #212529;
+    border-radius: 16px;
+    padding: 0 0.75rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.75rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: box-shadow 0.15s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 4px;
+    box-shadow: none;
+    transition: box-shadow 0.15s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #efefef;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e9ecef;
+    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: #883cae;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #28a745;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #17a2b8;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffc107;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #dc3545;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.75rem;
+    border-radius: 4px;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #e9ecef;
+    color: #212529;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e9ecef;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #883cae;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #883cae;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e9ecef;
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #883cae;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #212529;
+    border: 1px solid #dee2e6;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #883cae;
+    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: #6c757d;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #28a745;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #17a2b8;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffc107;
+    color: #212529;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #dc3545;
+    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-tag {
+    background: #883cae;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #28a745;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #17a2b8;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffc107;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #dc3545;
+    color: #ffffff;
+  }
+}
+/* Vendor extensions to the designer enhanced bootstrap compatibility */
+@layer primereact {
+  .p-breadcrumb .p-breadcrumb-chevron {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+  .p-breadcrumb .p-breadcrumb-chevron:before {
+    content: "/";
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
new file mode 100644
index 0000000000..f175a426d6
--- /dev/null
+++ b/public/themes/fluent-light/theme.css
@@ -0,0 +1,7110 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #faf9f8;
+  --surface-c: #f3f2f1;
+  --surface-d: #edebe9;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #323130;
+  --text-color-secondary: #605e5c;
+  --primary-color: #0078d4;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f3f2f1;
+  --surface-100: #e1dfdd;
+  --surface-200: #bebbb8;
+  --surface-300: #a19f9d;
+  --surface-400: #797775;
+  --surface-500: #484644;
+  --surface-600: #323130;
+  --surface-700: #252423;
+  --surface-800: #1b1a19;
+  --surface-900: #11100f;
+  --gray-50: #f3f2f1;
+  --gray-100: #e1dfdd;
+  --gray-200: #bebbb8;
+  --gray-300: #a19f9d;
+  --gray-400: #797775;
+  --gray-500: #484644;
+  --gray-600: #323130;
+  --gray-700: #252423;
+  --gray-800: #1b1a19;
+  --gray-900: #11100f;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 2px;
+  --surface-ground: #faf9f8;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #edebe9;
+  --surface-hover: #f3f2f1;
+  --focus-ring: inset 0 0 0 1px #605e5c;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #edebe9;
+  --highlight-text-color: #323130;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf3;
+  --green-100:#d9eac4;
+  --green-200:#bbda96;
+  --green-300:#9cca67;
+  --green-400:#7eb939;
+  --green-500:#60a90a;
+  --green-600:#529009;
+  --green-700:#437607;
+  --green-800:#355d06;
+  --green-900:#264404;
+  --yellow-50:#fffcf2;
+  --yellow-100:#ffeec2;
+  --yellow-200:#ffe191;
+  --yellow-300:#ffd461;
+  --yellow-400:#ffc630;
+  --yellow-500:#ffb900;
+  --yellow-600:#d99d00;
+  --yellow-700:#b38200;
+  --yellow-800:#8c6600;
+  --yellow-900:#664a00;
+  --cyan-50:#f2fbfc;
+  --cyan-100:#c2eef1;
+  --cyan-200:#91e0e5;
+  --cyan-300:#61d2da;
+  --cyan-400:#30c5ce;
+  --cyan-500:#00b7c3;
+  --cyan-600:#009ca6;
+  --cyan-700:#008089;
+  --cyan-800:#00656b;
+  --cyan-900:#00494e;
+  --pink-50:#fef2f9;
+  --pink-100:#f8c2e3;
+  --pink-200:#f391ce;
+  --pink-300:#ee61b8;
+  --pink-400:#e830a2;
+  --pink-500:#e3008c;
+  --pink-600:#c10077;
+  --pink-700:#9f0062;
+  --pink-800:#7d004d;
+  --pink-900:#5b0038;
+  --indigo-50:#f5f6fc;
+  --indigo-100:#cdd3f1;
+  --indigo-200:#a5b0e6;
+  --indigo-300:#7d8edc;
+  --indigo-400:#566bd1;
+  --indigo-500:#2e48c6;
+  --indigo-600:#273da8;
+  --indigo-700:#20328b;
+  --indigo-800:#19286d;
+  --indigo-900:#121d4f;
+  --teal-50:#f2f9f8;
+  --teal-100:#c2e1dd;
+  --teal-200:#91c9c2;
+  --teal-300:#61b2a8;
+  --teal-400:#309a8d;
+  --teal-500:#008272;
+  --teal-600:#006f61;
+  --teal-700:#005b50;
+  --teal-800:#00483f;
+  --teal-900:#00342e;
+  --orange-50:#fdf7f2;
+  --orange-100:#f5d8c2;
+  --orange-200:#edb991;
+  --orange-300:#e49a61;
+  --orange-400:#dc7b30;
+  --orange-500:#d45c00;
+  --orange-600:#b44e00;
+  --orange-700:#944000;
+  --orange-800:#753300;
+  --orange-900:#552500;
+  --bluegray-50:#f8f9fb;
+  --bluegray-100:#dee4ed;
+  --bluegray-200:#c4cfe0;
+  --bluegray-300:#a9bad2;
+  --bluegray-400:#8fa4c4;
+  --bluegray-500:#758fb6;
+  --bluegray-600:#637a9b;
+  --bluegray-700:#52647f;
+  --bluegray-800:#404f64;
+  --bluegray-900:#2f3949;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf5f5;
+  --red-100:#f4cecf;
+  --red-200:#eba8a9;
+  --red-300:#e28184;
+  --red-400:#da5b5e;
+  --red-500:#d13438;
+  --red-600:#b22c30;
+  --red-700:#922427;
+  --red-800:#731d1f;
+  --red-900:#541516;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff5;
+  --primary-200:#91c5ed;
+  --primary-300:#61abe4;
+  --primary-400:#3092dc;
+  --primary-500:#0078d4;
+  --primary-600:#0066b4;
+  --primary-700:#005494;
+  --primary-800:#004275;
+  --primary-900:#003055;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #faf9f8;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #a19f9d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #605e5c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #605e5c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #605e5c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #323130;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #323130;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #323130;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #323130;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #323130;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #323130;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  border-radius: 2px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #323130;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #323130;
+  background: #f3f2f1;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 0.5rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #a19f9d;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #323130;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #323130;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #323130;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #323130;
+}
+.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: #0078d4;
+}
+.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: #0078d4;
+}
+.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: #0078d4;
+}
+.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: #0078d4;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #a4252c;
+  }
+  .p-text-secondary {
+    color: #605e5c;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 2px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #323130;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #323130;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #edebe9;
+    color: #323130;
+    border-radius: 2px;
+  }
+  .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: #a4252c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    color: #0078d4;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #a4252c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-datepicker {
+    padding: 0.75rem;
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #605e5c;
+    border-radius: 2px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0 0.5rem 0.5rem 0.5rem;
+    color: #323130;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    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: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #323130;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #0078d4;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datepicker table td {
+    padding: 1px;
+  }
+  .p-datepicker table td > span {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 2px;
+    transition: box-shadow 0.2s;
+    border: 0 none;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #0078d4;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #edebe9;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #edebe9;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .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;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 1px;
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 1px;
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #edebe9;
+    padding-right: 0.75rem;
+    padding-left: 0.75rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f2f1;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f2f1;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f2f1;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #605e5c;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #323130;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #faf9f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #faf9f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #faf9f8;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #605e5c;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #605e5c;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #a4252c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 0.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #605e5c;
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #605e5c;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #323130;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #605e5c;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #323130;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #0078d4;
+    background: #0078d4;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #323130;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #005a9e;
+    background: #005a9e;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #a4252c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #faf9f8;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #0078d4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #faf9f8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005a9e;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #faf9f8;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #0078d4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #faf9f8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005a9e;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #faf9f8;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #0078d4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #faf9f8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005a9e;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #323130;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #edebe9;
+    color: #323130;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e1dfdd;
+    color: #323130;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #323130;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #a4252c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #191919;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #605e5c;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #323130;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #faf9f8;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #faf9f8;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #faf9f8;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #605e5c;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #605e5c;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #605e5c;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a4252c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid #edebe9;
+    color: #323130;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    color: #0078d4;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.5rem;
+    color: #323130;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f2f1;
+    color: #605e5c;
+    border-top: 1px solid #605e5c;
+    border-left: 1px solid #605e5c;
+    border-bottom: 1px solid #605e5c;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #605e5c;
+  }
+  .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: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .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: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #a4252c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ffffff;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #605e5c;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #0078d4;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #ffffff;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #005a9e;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #a4252c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #323130;
+    background: #ffffff;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #605e5c;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #323130;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #a4252c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #faf9f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #faf9f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #faf9f8;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: #605e5c;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #a4252c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #605e5c;
+  }
+  :-moz-placeholder {
+    color: #605e5c;
+  }
+  ::-moz-placeholder {
+    color: #605e5c;
+  }
+  :-ms-input-placeholder {
+    color: #605e5c;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #faf9f8;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #faf9f8;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #faf9f8;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #605e5c;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #605e5c;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid #edebe9;
+    color: #323130;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    border: 1px solid transparent;
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    color: #0078d4;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 0.5rem;
+    color: #323130;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-listbox.p-invalid {
+    border-color: #a4252c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #605e5c;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #323130;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #faf9f8;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #faf9f8;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #faf9f8;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #605e5c;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #edebe9;
+    color: #323130;
+    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: #605e5c;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #a4252c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid #edebe9;
+    color: #323130;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .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: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .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 0.5rem;
+    color: #0078d4;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 0.5rem;
+    color: #323130;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #a4252c;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+    border-radius: 2px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #edebe9;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #d13438;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffaa44;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #498205;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #605e5c;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #605e5c;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #323130;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #0078d4;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #0078d4;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #323130;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #005a9e;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #005a9e;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #a4252c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #faf9f8;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #faf9f8;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #faf9f8;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #faf9f8;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #323130;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #a4252c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #323130;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #0078d4;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #a4252c;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #605e5c;
+    color: #323130;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #605e5c;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f2f1;
+    border-color: #605e5c;
+    color: #323130;
+  }
+  .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: #605e5c;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #edebe9;
+    border-color: #605e5c;
+    color: #323130;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #323130;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #edebe9;
+    border-color: #605e5c;
+    color: #323130;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #323130;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #a4252c;
+  }
+  .p-slider {
+    background: #c8c6c4;
+    border: 0 none;
+    border-radius: 2px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 4px;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -8px;
+    margin-left: -8px;
+  }
+  .p-slider.p-slider-vertical {
+    width: 4px;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -8px;
+    margin-bottom: -8px;
+  }
+  .p-slider .p-slider-handle {
+    height: 16px;
+    width: 16px;
+    background: #ffffff;
+    border: 2px solid #605e5c;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-slider .p-slider-range {
+    background: #605e5c;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ffffff;
+    border-color: #005a9e;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #605e5c;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #323130;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #faf9f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #faf9f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #faf9f8;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #605e5c;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #edebe9;
+    color: #323130;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #605e5c;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #605e5c;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #a4252c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid #edebe9;
+    color: #323130;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 0.5rem;
+    color: #323130;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #faf9f8;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #faf9f8;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #faf9f8;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #605e5c;
+    border-radius: 2px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #605e5c;
+    color: #323130;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #605e5c;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #edebe9;
+    border-color: #605e5c;
+    color: #323130;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #323130;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f2f1;
+    border-color: #605e5c;
+    color: #323130;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #605e5c;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #edebe9;
+    border-color: #605e5c;
+    color: #323130;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #323130;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+    border-color: #0078d4;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #a4252c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #0078d4;
+    border: 1px solid #0078d4;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #106ebe;
+    color: #ffffff;
+    border-color: #106ebe;
+  }
+  .p-button:not(:disabled):active {
+    background: #005a9e;
+    color: #ffffff;
+    border-color: #005a9e;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #0078d4;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 120, 212, 0.04);
+    color: #0078d4;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 120, 212, 0.16);
+    color: #0078d4;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #605e5c;
+    border-color: #605e5c;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f2f1;
+    color: #605e5c;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #edebe9;
+    color: #605e5c;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #0078d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(0, 120, 212, 0.04);
+    color: #0078d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(0, 120, 212, 0.16);
+    color: #0078d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #605e5c;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f2f1;
+    color: #605e5c;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #edebe9;
+    color: #605e5c;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #0078d4;
+    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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #d45c00;
+    border: 1px solid #d45c00;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #bf5300;
+    color: #ffffff;
+    border-color: #bf5300;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ffbc88;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #aa4a00;
+    color: #ffffff;
+    border-color: #aa4a00;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #d45c00;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(212, 92, 0, 0.04);
+    color: #d45c00;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(212, 92, 0, 0.16);
+    color: #d45c00;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #d45c00;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(212, 92, 0, 0.04);
+    border-color: transparent;
+    color: #d45c00;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(212, 92, 0, 0.16);
+    border-color: transparent;
+    color: #d45c00;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #00b7c3;
+    border: 1px solid #00b7c3;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #00a5b0;
+    color: #ffffff;
+    border-color: #00a5b0;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #81f7ff;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #00929c;
+    color: #ffffff;
+    border-color: #00929c;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #00b7c3;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 183, 195, 0.04);
+    color: #00b7c3;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 183, 195, 0.16);
+    color: #00b7c3;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #00b7c3;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(0, 183, 195, 0.04);
+    border-color: transparent;
+    color: #00b7c3;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(0, 183, 195, 0.16);
+    border-color: transparent;
+    color: #00b7c3;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #498205;
+    border: 1px solid #498205;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #427505;
+    color: #ffffff;
+    border-color: #427505;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #baf96f;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #3a6804;
+    color: #ffffff;
+    border-color: #3a6804;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #498205;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(73, 130, 5, 0.04);
+    color: #498205;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(73, 130, 5, 0.16);
+    color: #498205;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #498205;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(73, 130, 5, 0.04);
+    border-color: transparent;
+    color: #498205;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(73, 130, 5, 0.16);
+    border-color: transparent;
+    color: #498205;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #323130;
+    background: #ffaa44;
+    border: 1px solid #ffaa44;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ff9b24;
+    color: #323130;
+    border-color: #ff9b24;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ffddb4;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ff8d03;
+    color: #323130;
+    border-color: #ff8d03;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffaa44;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 170, 68, 0.04);
+    color: #ffaa44;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 170, 68, 0.16);
+    color: #ffaa44;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffaa44;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 170, 68, 0.04);
+    border-color: transparent;
+    color: #ffaa44;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 170, 68, 0.16);
+    border-color: transparent;
+    color: #ffaa44;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #8378de;
+    border: 1px solid #8378de;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #6a5dd7;
+    color: #ffffff;
+    border-color: #6a5dd7;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #cdc9f2;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #5141d1;
+    color: #ffffff;
+    border-color: #5141d1;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #8378de;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(131, 120, 222, 0.04);
+    color: #8378de;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(131, 120, 222, 0.16);
+    color: #8378de;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #8378de;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(131, 120, 222, 0.04);
+    border-color: transparent;
+    color: #8378de;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(131, 120, 222, 0.16);
+    border-color: transparent;
+    color: #8378de;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d13438;
+    border: 1px solid #d13438;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c02b2f;
+    color: #ffffff;
+    border-color: #c02b2f;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #edaeaf;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #aa272a;
+    color: #ffffff;
+    border-color: #aa272a;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d13438;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(209, 52, 56, 0.04);
+    color: #d13438;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(209, 52, 56, 0.16);
+    color: #d13438;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d13438;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(209, 52, 56, 0.04);
+    border-color: transparent;
+    color: #d13438;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(209, 52, 56, 0.16);
+    border-color: transparent;
+    color: #d13438;
+  }
+  .p-button.p-button-link {
+    color: #0078d4;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #005a9e;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #605e5c;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #0078d4;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 2px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0078d4;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 120, 212, 0.04);
+    color: #0078d4;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 120, 212, 0.16);
+    color: #0078d4;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #605e5c;
+    border-color: #605e5c;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f2f1;
+    color: #605e5c;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #edebe9;
+    color: #605e5c;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0078d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 120, 212, 0.04);
+    color: #0078d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 120, 212, 0.16);
+    color: #0078d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #605e5c;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f2f1;
+    color: #605e5c;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #edebe9;
+    color: #605e5c;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d45c00;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(212, 92, 0, 0.04);
+    color: #d45c00;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(212, 92, 0, 0.16);
+    color: #d45c00;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d45c00;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(212, 92, 0, 0.04);
+    border-color: transparent;
+    color: #d45c00;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(212, 92, 0, 0.16);
+    border-color: transparent;
+    color: #d45c00;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #00b7c3;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 183, 195, 0.04);
+    color: #00b7c3;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 183, 195, 0.16);
+    color: #00b7c3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #00b7c3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 183, 195, 0.04);
+    border-color: transparent;
+    color: #00b7c3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 183, 195, 0.16);
+    border-color: transparent;
+    color: #00b7c3;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #498205;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(73, 130, 5, 0.04);
+    color: #498205;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(73, 130, 5, 0.16);
+    color: #498205;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #498205;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(73, 130, 5, 0.04);
+    border-color: transparent;
+    color: #498205;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(73, 130, 5, 0.16);
+    border-color: transparent;
+    color: #498205;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffaa44;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 170, 68, 0.04);
+    color: #ffaa44;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 170, 68, 0.16);
+    color: #ffaa44;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffaa44;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 170, 68, 0.04);
+    border-color: transparent;
+    color: #ffaa44;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 170, 68, 0.16);
+    border-color: transparent;
+    color: #ffaa44;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #8378de;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(131, 120, 222, 0.04);
+    color: #8378de;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(131, 120, 222, 0.16);
+    color: #8378de;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #8378de;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(131, 120, 222, 0.04);
+    border-color: transparent;
+    color: #8378de;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(131, 120, 222, 0.16);
+    border-color: transparent;
+    color: #8378de;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d13438;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(209, 52, 56, 0.04);
+    color: #d13438;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(209, 52, 56, 0.16);
+    color: #d13438;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d13438;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(209, 52, 56, 0.04);
+    border-color: transparent;
+    color: #d13438;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(209, 52, 56, 0.16);
+    border-color: transparent;
+    color: #d13438;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #323130;
+    color: #ffffff;
+  }
+  .p-speeddial-action:hover {
+    background: #605e5c;
+    color: #ffffff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 2px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #c8c6c4;
+    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: #e1dfdd;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #edebe9;
+    color: #323130;
+  }
+  .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: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 1px 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #323130;
+    background: #ffffff;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #323130;
+    background: #ffffff;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #605e5c;
+    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: #323130;
+    background: #edebe9;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #605e5c;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #323130;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #323130;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #605e5c;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #323130;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #f3f2f1;
+    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: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    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: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #605e5c;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #edebe9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #edebe9;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #605e5c;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #605e5c;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #0078d4;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #faf9f8;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #faf9f8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #323130;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #323130;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #faf9f8;
+  }
+  .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-datatable-drag-selection-helper {
+    background: rgba(0, 120, 212, 0.16);
+  }
+  .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: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 1px 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 1px 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #f3f2f1;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .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: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f2f1;
+    color: #605e5c;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+    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.5rem;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #605e5c;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid #edebe9;
+    color: #323130;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #edebe9;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #faf9f8;
+    color: #323130;
+    border: 1px solid #a19f9d;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #a19f9d;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    padding: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 0.5rem;
+    margin: 0;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #faf9f8;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f2f1;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #b4aba3;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #a19f9d;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #a19f9d;
+    border-color: #a19f9d;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #a19f9d;
+    border-color: #a19f9d;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #605e5c;
+    border: solid #f3f2f1;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 2px;
+  }
+  .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: #605e5c;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .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: #f3f2f1;
+    border-color: transparent;
+    color: #323130;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #605e5c;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #605e5c;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #edebe9;
+    border-color: #edebe9;
+    color: #323130;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f2f1;
+    border-color: transparent;
+    color: #323130;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #faf9f8;
+    color: #323130;
+    border: 1px solid #a19f9d;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #a19f9d;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    padding: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 0.5rem;
+    margin: 0;
+    border: 1px solid transparent;
+    color: #323130;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #e1dfdd;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    padding: 1rem;
+    border-radius: 2px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #605e5c;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 2px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    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: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #605e5c;
+  }
+  .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: #323130;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .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: #323130;
+  }
+  .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: #323130;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: #605e5c;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #c3bcb5;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 1px 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #323130;
+    background: #ffffff;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #f3f2f1;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #323130;
+    background: #ffffff;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #605e5c;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #605e5c;
+    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: #323130;
+    background: #edebe9;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #605e5c;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #323130;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #323130;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #f3f2f1;
+    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: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #323130;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #605e5c;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #323130;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #323130;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #323130;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #0078d4;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #faf9f8;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #faf9f8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #323130;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #323130;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #faf9f8;
+  }
+  .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-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #0078d4;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #a19f9d;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #a19f9d;
+    color: #323130;
+    background: #faf9f8;
+    font-weight: 600;
+    border-radius: 2px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f2f1;
+    border-color: #a19f9d;
+    color: #323130;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #faf9f8;
+    border-color: #a19f9d;
+    color: #323130;
+    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: #a19f9d;
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #323130;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
+    border-radius: 2px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .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: #605e5c;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    border-radius: 2px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #a19f9d;
+    color: #323130;
+    background: #faf9f8;
+    font-weight: 600;
+    border-radius: 2px;
+  }
+  .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: 1rem;
+    color: #323130;
+    border-radius: 2px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f2f1;
+    border-color: #a19f9d;
+    color: #323130;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .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 #edebe9;
+  }
+  .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 #edebe9;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #a19f9d;
+    padding: 1rem;
+    background: #faf9f8;
+    color: #323130;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    border-radius: 2px;
+    color: #323130;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #faf9f8;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #edebe9;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #edebe9;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #605e5c;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #323130;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #323130;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #a19f9d;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #323130;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f3f2f1;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 0 none;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #a19f9d;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent transparent transparent;
+    background: #ffffff;
+    color: #605e5c;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    transition: box-shadow 0.2s;
+    margin: 0 0.5rem -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset inset 0 0 0 1px #605e5c;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #f3f2f1;
+    border-color: transparent;
+    color: #605e5c;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #0078d4;
+    color: #323130;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #323130;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset inset 0 0 0 1px #605e5c;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    border: 0 none;
+    color: #323130;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-toolbar {
+    background: #faf9f8;
+    border: 1px solid #a19f9d;
+    padding: 1rem;
+    border-radius: 2px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px;
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px;
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #323130;
+    padding: 1.5rem;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #323130;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #323130;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #0078d4;
+    color: #ffffff;
+    width: 2rem;
+    height: 2rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #106ebe;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #323130;
+    border: 0 none;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px;
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #605e5c;
+    border: 0 none;
+    background: transparent;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #605e5c;
+    border-color: transparent;
+    background: #f3f2f1;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #ffffff;
+    color: #323130;
+    padding: 0.5rem 0.5rem;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+    border-radius: 2px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #ffffff;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #ffffff;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #ffffff;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #ffffff;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #faf9f8;
+    padding: 1rem;
+    border: 1px solid #a19f9d;
+    color: #323130;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #a19f9d;
+    color: #323130;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 2px;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.75rem 0.75rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #323130;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #323130;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #0078d4;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #323130;
+    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);
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 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);
+    border-radius: 2px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 2px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #605e5c;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #323130;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 0.5rem;
+    color: #0078d4;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #0078d4;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #0078d4;
+    background: #f3f2f1;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .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 0.5rem;
+    color: #0078d4;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 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-menuitem-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #0078d4;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #0078d4;
+    background: #f3f2f1;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #0078d4;
+      border-radius: 2px;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #0078d4;
+      background: #f3f2f1;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: inset 0 0 0 1px #605e5c;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 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 #edebe9;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #323130;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #323130;
+      padding: 0.75rem 0.5rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #323130;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #0078d4;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #0078d4;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #323130;
+      background: #edebe9;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #323130;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #0078d4;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #e1dfdd;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #323130;
+      background: #e1dfdd;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #323130;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #323130;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #323130;
+      background: #f3f2f1;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #323130;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #0078d4;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #a19f9d;
+    color: #323130;
+    background: #faf9f8;
+    border-radius: 2px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #323130;
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset inset 0 0 0 1px #605e5c;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f2f1;
+    border-color: #a19f9d;
+    color: #323130;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #faf9f8;
+    border-color: #a19f9d;
+    color: #323130;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #a19f9d;
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #a19f9d;
+    background: #ffffff;
+    color: #323130;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #edebe9;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #323130;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #0078d4;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 0.5rem;
+    color: #323130;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #323130;
+    border: 1px solid #f3f2f1;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #605e5c;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #edebe9;
+    color: #323130;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #323130;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #edebe9;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 0 none;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #a19f9d;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent transparent transparent;
+    background: #ffffff;
+    color: #605e5c;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    transition: box-shadow 0.2s;
+    margin: 0 0.5rem -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset inset 0 0 0 1px #605e5c;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #f3f2f1;
+    border-color: transparent;
+    color: #605e5c;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #0078d4;
+    color: #323130;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #eeeeee;
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 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-content {
+    color: #323130;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #323130;
+    padding: 0.75rem 0.5rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #0078d4;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #323130;
+    background: #edebe9;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e1dfdd;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #323130;
+    background: #e1dfdd;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #323130;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #323130;
+    background: #f3f2f1;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #323130;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #0078d4;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 2px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #f3f2f1;
+    border: 0 none;
+    border-width: 0px;
+    color: #323130;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #605e5c;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #dff6dd;
+    border: 0 none;
+    border-width: 0px;
+    color: #323130;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #107c10;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fff4ce;
+    border: 0 none;
+    border-width: 0px;
+    color: #323130;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #797775;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #fde7e9;
+    border: 0 none;
+    border-width: 0px;
+    color: #323130;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #a80000;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 90%;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 2px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 0.5rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 2px;
+    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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-message.p-message-info {
+    background: #f3f2f1;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #605e5c;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #605e5c;
+  }
+  .p-message.p-message-success {
+    background: #dff6dd;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #107c10;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #107c10;
+  }
+  .p-message.p-message-warn {
+    background: #fff4ce;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #797775;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #797775;
+  }
+  .p-message.p-message-error {
+    background: #fde7e9;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #a80000;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #a80000;
+  }
+  .p-message .p-message-text {
+    font-size: 90%;
+    font-weight: 500;
+  }
+  .p-message .p-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 2px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 0.5rem;
+  }
+  .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: 1.25rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon.p-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
+    font-weight: 600;
+  }
+  .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: 1.25rem;
+    height: 1.25rem;
+    border-radius: 2px;
+    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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #f3f2f1;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .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: #605e5c;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #dff6dd;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .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: #107c10;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fff4ce;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .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: #797775;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #fde7e9;
+    border: 0 none;
+    border-width: 0 0 0 6px;
+    color: #323130;
+  }
+  .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: #a80000;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #faf9f8;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #faf9f8;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #faf9f8;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #faf9f8;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #faf9f8;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #c8c6c4;
+    width: 1rem;
+    height: 1rem;
+    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: #e1dfdd;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #edebe9;
+    color: #323130;
+  }
+  .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: #edebe9;
+    color: #323130;
+  }
+  .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: #faf9f8;
+    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: #faf9f8;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #edebe9;
+    border-radius: 2px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #edebe9;
+    color: #323130;
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 2px;
+    box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #faf9f8;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #edebe9;
+    border-radius: 2px;
+  }
+  .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: #0078d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 2px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #498205;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #00b7c3;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffaa44;
+    color: #323130;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d13438;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f2f1;
+    color: #323130;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #edebe9;
+    border-radius: 2px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #0078d4;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 2px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #0078d4;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 2px;
+    background: #edebe9;
+    border-radius: 2px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #0078d4;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 2px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #323130;
+    border: 1px solid #a19f9d;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #0078d4;
+    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: #d45c00;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #498205;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #00b7c3;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffaa44;
+    color: #323130;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #d13438;
+    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-tag {
+    background: #0078d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 2px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #498205;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #00b7c3;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffaa44;
+    color: #323130;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d13438;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-button-label {
+    font-weight: 600;
+  }
+  .p-slider:not(.p-disabled):hover {
+    background-color: #deecf9;
+  }
+  .p-slider:not(.p-disabled):hover .p-slider-range {
+    background-color: #0078d4;
+  }
+  .p-slider:not(.p-disabled):hover .p-slider-handle {
+    border-color: #005a9e;
+  }
+  .p-inputswitch {
+    width: 40px;
+    height: 20px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    border: 1px solid #605e5c;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    width: 12px;
+    height: 12px;
+    margin-top: -6px;
+  }
+  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
+    border-color: #323130;
+  }
+  .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider:before {
+    background-color: #323130;
+  }
+  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
+    border-color: #0078d4;
+  }
+  .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider:before {
+    background-color: #ffffff;
+  }
+  .p-inputswitch.p-inputswitch-checked .p-inputswitch-slider {
+    border-color: #0078d4;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    order: 1;
+    margin: 0 auto 0 0;
+  }
+  .p-datepicker .p-datepicker-prev {
+    order: 2;
+  }
+  .p-datepicker .p-datepicker-prev .p-datepicker-prev-icon:before {
+    content: "\e919";
+  }
+  .p-datepicker .p-datepicker-next {
+    order: 3;
+    font-size: 90%;
+  }
+  .p-datepicker .p-datepicker-next .p-datepicker-next-icon:before {
+    content: "\e91c";
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 90%;
+  }
+  .p-datepicker .p-timepicker .pi-chevron-up:before {
+    content: "\e91c";
+  }
+  .p-datepicker .p-timepicker .pi-chevron-down:before {
+    content: "\e919";
+  }
+  .p-datepicker table {
+    font-size: 90%;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    border-radius: 50%;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    font-size: 90%;
+    color: #323130;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button .p-button-label {
+    font-weight: 400;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button:enabled:hover {
+    color: #323130;
+    background-color: #f3f2f1;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem 0;
+  }
+  .p-datatable {
+    font-size: 90%;
+  }
+  .p-toast {
+    font-size: 90%;
+  }
+  .p-toast .p-toast-icon-close-icon {
+    font-size: 90%;
+  }
+  .p-message {
+    font-size: 90%;
+  }
+  .p-message .p-message-close .p-message-close-icon {
+    font-size: 90%;
+  }
+  .p-tooltip .p-tooltip-text {
+    font-size: 90%;
+  }
+  .p-component .p-menu-separator {
+    border-color: #eeeeee;
+  }
+  .p-submenu-icon {
+    color: #605e5c !important;
+  }
+  .p-menuitem-active .p-submenu-icon {
+    color: #323130 !important;
+  }
+  .p-progressbar-label {
+    display: none !important;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #0078d4;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #0078d4;
+  }
+  .p-inputtext:disabled {
+    background-color: #f3f2f1;
+    border-color: #f3f2f1;
+    color: #a19f9d;
+    opacity: 1;
+    user-select: none;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #0078d4;
+  }
+  .p-checkbox .p-checkbox-box.p-disabled,
+  .p-radiobutton .p-radiobutton-box.p-disabled,
+  .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container.p-disabled,
+  .p-chips .p-chips-multiple-container.p-disabled {
+    background-color: #f3f2f1;
+    border-color: #f3f2f1;
+    color: #a19f9d;
+    opacity: 1;
+    user-select: none;
+  }
+  .p-checkbox .p-checkbox-box:not(.p-disabled).p-focus,
+  .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus,
+  .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled).p-focus,
+  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #0078d4;
+  }
+  .p-dropdown.p-disabled,
+  .p-multiselect.p-disabled {
+    background-color: #f3f2f1;
+    border-color: #f3f2f1;
+    color: #a19f9d;
+    opacity: 1;
+    user-select: none;
+  }
+  .p-dropdown.p-disabled .p-dropdown-label,
+  .p-dropdown.p-disabled .p-dropdown-trigger-icon,
+  .p-multiselect.p-disabled .p-dropdown-label,
+  .p-multiselect.p-disabled .p-dropdown-trigger-icon {
+    color: #a19f9d;
+  }
+  .p-dropdown:not(.p-disabled).p-focus,
+  .p-multiselect:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #0078d4;
+  }
+  .p-inputswitch.p-focus .p-inputswitch-slider {
+    box-shadow: none;
+    outline: 1px solid #605e5c;
+    outline-offset: 2px;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #0078d4;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #0078d4;
+  }
+}
diff --git a/public/themes/lara-dark-amber/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-amber/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-amber/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-amber/fonts/InterVariable.woff2 b/public/themes/lara-dark-amber/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-amber/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
new file mode 100644
index 0000000000..697c7c006d
--- /dev/null
+++ b/public/themes/lara-dark-amber/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #fbbf24;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(251, 191, 36, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#fffcf4;
+  --primary-100:#fef0ca;
+  --primary-200:#fde3a1;
+  --primary-300:#fdd777;
+  --primary-400:#fccb4e;
+  --primary-500:#fbbf24;
+  --primary-600:#d5a21f;
+  --primary-700:#b08619;
+  --primary-800:#8a6914;
+  --primary-900:#644c0e;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #fbbf24;
+}
+.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: #fbbf24;
+}
+.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: #fbbf24;
+}
+.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: #fbbf24;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #fbbf24;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #fbbf24;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #fbbf24;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #fbbf24;
+    background: #fbbf24;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #fbbf24;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #fde68a;
+    background: #fde68a;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #fbbf24;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #fde68a;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #fbbf24;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #fde68a;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #fbbf24;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #fde68a;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #fbbf24;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #fbbf24;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #fbbf24;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #fcd34d;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #fbbf24;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #fbbf24;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #fbbf24;
+    background: #fbbf24;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #fbbf24;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #fde68a;
+    background: #fde68a;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #fbbf24;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #fde68a;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #fbbf24;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #fde68a;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #fbbf24;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #fbbf24;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #fbbf24;
+    border-color: #fbbf24;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #fcd34d;
+    border-color: #fcd34d;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #fbbf24;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #fbbf24;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #fbbf24;
+    border-color: #fbbf24;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #fbbf24;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #fbbf24;
+    border-color: #fbbf24;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #fcd34d;
+    border-color: #fcd34d;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    border-color: #fbbf24;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #fbbf24;
+    border: 1px solid #fbbf24;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #fcd34d;
+    color: #030712;
+    border-color: #fcd34d;
+  }
+  .p-button:not(:disabled):active {
+    background: #fde68a;
+    color: #030712;
+    border-color: #fde68a;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #fbbf24;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 191, 36, 0.04);
+    color: #fbbf24;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 191, 36, 0.16);
+    color: #fbbf24;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(251, 191, 36, 0.04);
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(251, 191, 36, 0.16);
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #fbbf24;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #fbbf24;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbbf24;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 191, 36, 0.04);
+    color: #fbbf24;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 191, 36, 0.16);
+    color: #fbbf24;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 191, 36, 0.04);
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 191, 36, 0.16);
+    color: #fbbf24;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(251, 191, 36, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(251, 191, 36, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(251, 191, 36, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(251, 191, 36, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(251, 191, 36, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #fbbf24;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(157, 114, 3, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    border-color: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(225, 164, 4, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(251, 191, 36, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(251, 191, 36, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #fbbf24;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #fbbf24;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #fbbf24;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #fbbf24;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #fbbf24;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #fbbf24;
+    color: #fbbf24;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #fbbf24;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #fbbf24;
+    color: #030712;
+    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: #fcd34d;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(251, 191, 36, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(251, 191, 36, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(251, 191, 36, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #fbbf24;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #fbbf24;
+    color: #fbbf24;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(251, 191, 36, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(251, 191, 36, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(251, 191, 36, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(251, 191, 36, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #fbbf24;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #fbbf24;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #fbbf24;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #fbbf24;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #fbbf24;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #fbbf24;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #fbbf24;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #fbbf24;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 191, 36, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #fbbf24;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #fbbf24;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 191, 36, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #fbbf24;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #fbbf24;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-dark-blue/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-blue/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-blue/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-blue/fonts/InterVariable.woff2 b/public/themes/lara-dark-blue/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-blue/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
new file mode 100644
index 0000000000..d1e85fae9d
--- /dev/null
+++ b/public/themes/lara-dark-blue/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #60a5fa;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(96, 165, 250, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f7fbff;
+  --primary-100:#d9e9fe;
+  --primary-200:#bbd8fd;
+  --primary-300:#9cc7fc;
+  --primary-400:#7eb6fb;
+  --primary-500:#60a5fa;
+  --primary-600:#528cd5;
+  --primary-700:#4374af;
+  --primary-800:#355b8a;
+  --primary-900:#264264;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #60a5fa;
+}
+.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: #60a5fa;
+}
+.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: #60a5fa;
+}
+.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: #60a5fa;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #60a5fa;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #60a5fa;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #60a5fa;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #60a5fa;
+    background: #60a5fa;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #60a5fa;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #bfdbfe;
+    background: #bfdbfe;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #60a5fa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #bfdbfe;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #60a5fa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #bfdbfe;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #60a5fa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #bfdbfe;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #60a5fa;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #60a5fa;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #60a5fa;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #93c5fd;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #60a5fa;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #60a5fa;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #60a5fa;
+    background: #60a5fa;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #60a5fa;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #bfdbfe;
+    background: #bfdbfe;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #60a5fa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #bfdbfe;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #60a5fa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #bfdbfe;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #60a5fa;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #60a5fa;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #60a5fa;
+    border-color: #60a5fa;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #93c5fd;
+    border-color: #93c5fd;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #60a5fa;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #60a5fa;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #60a5fa;
+    border-color: #60a5fa;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #60a5fa;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #60a5fa;
+    border-color: #60a5fa;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #93c5fd;
+    border-color: #93c5fd;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    border-color: #60a5fa;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #60a5fa;
+    border: 1px solid #60a5fa;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #93c5fd;
+    color: #030712;
+    border-color: #93c5fd;
+  }
+  .p-button:not(:disabled):active {
+    background: #bfdbfe;
+    color: #030712;
+    border-color: #bfdbfe;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #60a5fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 165, 250, 0.04);
+    color: #60a5fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 165, 250, 0.16);
+    color: #60a5fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(96, 165, 250, 0.04);
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(96, 165, 250, 0.16);
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #60a5fa;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #60a5fa;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #60a5fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 165, 250, 0.04);
+    color: #60a5fa;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 165, 250, 0.16);
+    color: #60a5fa;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 165, 250, 0.04);
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 165, 250, 0.16);
+    color: #60a5fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(96, 165, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(96, 165, 250, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(96, 165, 250, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(96, 165, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(96, 165, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #60a5fa;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(7, 99, 212, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    border-color: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(29, 127, 248, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(96, 165, 250, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(96, 165, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #60a5fa;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #60a5fa;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #60a5fa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #60a5fa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #60a5fa;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #60a5fa;
+    color: #60a5fa;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #60a5fa;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #60a5fa;
+    color: #030712;
+    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: #93c5fd;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(96, 165, 250, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(96, 165, 250, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(96, 165, 250, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #60a5fa;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #60a5fa;
+    color: #60a5fa;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(96, 165, 250, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(96, 165, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(96, 165, 250, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(96, 165, 250, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #60a5fa;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #60a5fa;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #60a5fa;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #60a5fa;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #60a5fa;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #60a5fa;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #60a5fa;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #60a5fa;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(96, 165, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #60a5fa;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #60a5fa;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(96, 165, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #60a5fa;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #60a5fa;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-dark-cyan/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-cyan/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-cyan/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-cyan/fonts/InterVariable.woff2 b/public/themes/lara-dark-cyan/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-cyan/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
new file mode 100644
index 0000000000..f5563f7b71
--- /dev/null
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #22d3ee;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(34, 211, 238, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f4fdfe;
+  --primary-100:#caf4fb;
+  --primary-200:#a0ecf8;
+  --primary-300:#76e4f4;
+  --primary-400:#4cdbf1;
+  --primary-500:#22d3ee;
+  --primary-600:#1db3ca;
+  --primary-700:#1894a7;
+  --primary-800:#137483;
+  --primary-900:#0e545f;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #22d3ee;
+}
+.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: #22d3ee;
+}
+.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: #22d3ee;
+}
+.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: #22d3ee;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #22d3ee;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #22d3ee;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #22d3ee;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #22d3ee;
+    background: #22d3ee;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #22d3ee;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #a5f3fc;
+    background: #a5f3fc;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #22d3ee;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a5f3fc;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #22d3ee;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a5f3fc;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #22d3ee;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a5f3fc;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #22d3ee;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #22d3ee;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #22d3ee;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #67e8f9;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #22d3ee;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #22d3ee;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #22d3ee;
+    background: #22d3ee;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #22d3ee;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #a5f3fc;
+    background: #a5f3fc;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #22d3ee;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a5f3fc;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #22d3ee;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a5f3fc;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #22d3ee;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #22d3ee;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #22d3ee;
+    border-color: #22d3ee;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #67e8f9;
+    border-color: #67e8f9;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #22d3ee;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #22d3ee;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #22d3ee;
+    border-color: #22d3ee;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #22d3ee;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #22d3ee;
+    border-color: #22d3ee;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #67e8f9;
+    border-color: #67e8f9;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    border-color: #22d3ee;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #22d3ee;
+    border: 1px solid #22d3ee;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #67e8f9;
+    color: #030712;
+    border-color: #67e8f9;
+  }
+  .p-button:not(:disabled):active {
+    background: #a5f3fc;
+    color: #030712;
+    border-color: #a5f3fc;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #22d3ee;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 211, 238, 0.04);
+    color: #22d3ee;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 211, 238, 0.16);
+    color: #22d3ee;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(34, 211, 238, 0.04);
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(34, 211, 238, 0.16);
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #22d3ee;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #22d3ee;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22d3ee;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 211, 238, 0.04);
+    color: #22d3ee;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 211, 238, 0.16);
+    color: #22d3ee;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 211, 238, 0.04);
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 211, 238, 0.16);
+    color: #22d3ee;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(34, 211, 238, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(34, 211, 238, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(34, 211, 238, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(34, 211, 238, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(34, 211, 238, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #22d3ee;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(10, 118, 134, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    border-color: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(16, 177, 202, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(34, 211, 238, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(34, 211, 238, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #22d3ee;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #22d3ee;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #22d3ee;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #22d3ee;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #22d3ee;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #22d3ee;
+    color: #22d3ee;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #22d3ee;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #22d3ee;
+    color: #030712;
+    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: #67e8f9;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(34, 211, 238, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(34, 211, 238, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(34, 211, 238, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #22d3ee;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #22d3ee;
+    color: #22d3ee;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(34, 211, 238, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(34, 211, 238, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(34, 211, 238, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(34, 211, 238, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #22d3ee;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #22d3ee;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #22d3ee;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #22d3ee;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #22d3ee;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #22d3ee;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #22d3ee;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #22d3ee;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(34, 211, 238, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #22d3ee;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #22d3ee;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(34, 211, 238, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #22d3ee;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #22d3ee;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-dark-green/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-green/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-green/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-green/fonts/InterVariable.woff2 b/public/themes/lara-dark-green/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-green/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
new file mode 100644
index 0000000000..c0e40c5bdc
--- /dev/null
+++ b/public/themes/lara-dark-green/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #34d399;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(52, 211, 153, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f5fdfa;
+  --primary-100:#cef4e7;
+  --primary-200:#a8ecd3;
+  --primary-300:#81e4c0;
+  --primary-400:#5bdbac;
+  --primary-500:#34d399;
+  --primary-600:#2cb382;
+  --primary-700:#24946b;
+  --primary-800:#1d7454;
+  --primary-900:#15543d;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #34d399;
+}
+.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: #34d399;
+}
+.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: #34d399;
+}
+.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: #34d399;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #34d399;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #34d399;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #34d399;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #34d399;
+    background: #34d399;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #34d399;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #a7f3d0;
+    background: #a7f3d0;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #34d399;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a7f3d0;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #34d399;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a7f3d0;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #34d399;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a7f3d0;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #34d399;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #34d399;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #34d399;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #6ee7b7;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #34d399;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #34d399;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #34d399;
+    background: #34d399;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #34d399;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #a7f3d0;
+    background: #a7f3d0;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #34d399;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a7f3d0;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #34d399;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a7f3d0;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #34d399;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #34d399;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #34d399;
+    border-color: #34d399;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #6ee7b7;
+    border-color: #6ee7b7;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #34d399;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #34d399;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #34d399;
+    border-color: #34d399;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #34d399;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #34d399;
+    border-color: #34d399;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #6ee7b7;
+    border-color: #6ee7b7;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    border-color: #34d399;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #34d399;
+    border: 1px solid #34d399;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #6ee7b7;
+    color: #030712;
+    border-color: #6ee7b7;
+  }
+  .p-button:not(:disabled):active {
+    background: #a7f3d0;
+    color: #030712;
+    border-color: #a7f3d0;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #34d399;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(52, 211, 153, 0.04);
+    color: #34d399;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(52, 211, 153, 0.16);
+    color: #34d399;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(52, 211, 153, 0.04);
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(52, 211, 153, 0.16);
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #34d399;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #34d399;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #34d399;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(52, 211, 153, 0.04);
+    color: #34d399;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(52, 211, 153, 0.16);
+    color: #34d399;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(52, 211, 153, 0.04);
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(52, 211, 153, 0.16);
+    color: #34d399;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(52, 211, 153, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(52, 211, 153, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(52, 211, 153, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(52, 211, 153, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(52, 211, 153, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #34d399;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(24, 111, 80, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    border-color: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(37, 173, 124, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(52, 211, 153, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(52, 211, 153, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #34d399;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #34d399;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #34d399;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #34d399;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #34d399;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #34d399;
+    color: #34d399;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #34d399;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #34d399;
+    color: #030712;
+    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: #6ee7b7;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(52, 211, 153, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(52, 211, 153, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(52, 211, 153, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #34d399;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #34d399;
+    color: #34d399;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(52, 211, 153, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(52, 211, 153, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(52, 211, 153, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(52, 211, 153, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #34d399;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #34d399;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #34d399;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #34d399;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #34d399;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #34d399;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #34d399;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #34d399;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(52, 211, 153, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #34d399;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #34d399;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(52, 211, 153, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #34d399;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #34d399;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-dark-indigo/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-indigo/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-indigo/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-indigo/fonts/InterVariable.woff2 b/public/themes/lara-dark-indigo/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-indigo/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
new file mode 100644
index 0000000000..143118cdf0
--- /dev/null
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #818cf8;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(129, 140, 248, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f9f9ff;
+  --primary-100:#e1e3fd;
+  --primary-200:#c9cefc;
+  --primary-300:#b1b8fb;
+  --primary-400:#99a2f9;
+  --primary-500:#818cf8;
+  --primary-600:#6e77d3;
+  --primary-700:#5a62ae;
+  --primary-800:#474d88;
+  --primary-900:#343863;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #818cf8;
+}
+.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: #818cf8;
+}
+.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: #818cf8;
+}
+.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: #818cf8;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #818cf8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #818cf8;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #818cf8;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #818cf8;
+    background: #818cf8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #818cf8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #c7d2fe;
+    background: #c7d2fe;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #818cf8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #c7d2fe;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #818cf8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #c7d2fe;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #818cf8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #c7d2fe;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #818cf8;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #818cf8;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #818cf8;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #a5b4fc;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #818cf8;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #818cf8;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #818cf8;
+    background: #818cf8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #818cf8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #c7d2fe;
+    background: #c7d2fe;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #818cf8;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #c7d2fe;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #818cf8;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #c7d2fe;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #818cf8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #818cf8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #818cf8;
+    border-color: #818cf8;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #a5b4fc;
+    border-color: #a5b4fc;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #818cf8;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #818cf8;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #818cf8;
+    border-color: #818cf8;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #818cf8;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #818cf8;
+    border-color: #818cf8;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #a5b4fc;
+    border-color: #a5b4fc;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    border-color: #818cf8;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #818cf8;
+    border: 1px solid #818cf8;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #a5b4fc;
+    color: #030712;
+    border-color: #a5b4fc;
+  }
+  .p-button:not(:disabled):active {
+    background: #c7d2fe;
+    color: #030712;
+    border-color: #c7d2fe;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #818cf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 140, 248, 0.04);
+    color: #818cf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 140, 248, 0.16);
+    color: #818cf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(129, 140, 248, 0.04);
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(129, 140, 248, 0.16);
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #818cf8;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #818cf8;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #818cf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 140, 248, 0.04);
+    color: #818cf8;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 140, 248, 0.16);
+    color: #818cf8;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 140, 248, 0.04);
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 140, 248, 0.16);
+    color: #818cf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(129, 140, 248, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(129, 140, 248, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(129, 140, 248, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(129, 140, 248, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(129, 140, 248, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #818cf8;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(13, 34, 236, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    border-color: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(58, 75, 244, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(129, 140, 248, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(129, 140, 248, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #818cf8;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #818cf8;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #818cf8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #818cf8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #818cf8;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #818cf8;
+    color: #818cf8;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #818cf8;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #818cf8;
+    color: #030712;
+    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: #a5b4fc;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(129, 140, 248, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(129, 140, 248, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(129, 140, 248, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #818cf8;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #818cf8;
+    color: #818cf8;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(129, 140, 248, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(129, 140, 248, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(129, 140, 248, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(129, 140, 248, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #818cf8;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #818cf8;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #818cf8;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #818cf8;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #818cf8;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #818cf8;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #818cf8;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #818cf8;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(129, 140, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #818cf8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #818cf8;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(129, 140, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #818cf8;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #818cf8;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-dark-pink/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-pink/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-pink/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-pink/fonts/InterVariable.woff2 b/public/themes/lara-dark-pink/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-pink/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
new file mode 100644
index 0000000000..df254dff4e
--- /dev/null
+++ b/public/themes/lara-dark-pink/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #f472b6;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(244, 114, 182, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#fef8fb;
+  --primary-100:#fcdded;
+  --primary-200:#fac2e0;
+  --primary-300:#f8a8d2;
+  --primary-400:#f68dc4;
+  --primary-500:#f472b6;
+  --primary-600:#cf619b;
+  --primary-700:#ab507f;
+  --primary-800:#863f64;
+  --primary-900:#622e49;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #f472b6;
+}
+.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: #f472b6;
+}
+.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: #f472b6;
+}
+.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: #f472b6;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #f472b6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #f472b6;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #f472b6;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #f472b6;
+    background: #f472b6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #f472b6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #fbcfe8;
+    background: #fbcfe8;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #f472b6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #fbcfe8;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #f472b6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #fbcfe8;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #f472b6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #fbcfe8;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #f472b6;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #f472b6;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #f472b6;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #f9a8d4;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #f472b6;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #f472b6;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #f472b6;
+    background: #f472b6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #f472b6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #fbcfe8;
+    background: #fbcfe8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #f472b6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #fbcfe8;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #f472b6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #fbcfe8;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #f472b6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #f472b6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #f472b6;
+    border-color: #f472b6;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #f9a8d4;
+    border-color: #f9a8d4;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #f472b6;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #f472b6;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #f472b6;
+    border-color: #f472b6;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #f472b6;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #f472b6;
+    border-color: #f472b6;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #f9a8d4;
+    border-color: #f9a8d4;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    border-color: #f472b6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #f472b6;
+    border: 1px solid #f472b6;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #f9a8d4;
+    color: #030712;
+    border-color: #f9a8d4;
+  }
+  .p-button:not(:disabled):active {
+    background: #fbcfe8;
+    color: #030712;
+    border-color: #fbcfe8;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #f472b6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 114, 182, 0.04);
+    color: #f472b6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 114, 182, 0.16);
+    color: #f472b6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(244, 114, 182, 0.04);
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(244, 114, 182, 0.16);
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #f472b6;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #f472b6;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f472b6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 114, 182, 0.04);
+    color: #f472b6;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 114, 182, 0.16);
+    color: #f472b6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 114, 182, 0.04);
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 114, 182, 0.16);
+    color: #f472b6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(244, 114, 182, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(244, 114, 182, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(244, 114, 182, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(244, 114, 182, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(244, 114, 182, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #f472b6;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(214, 17, 120, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    border-color: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(239, 48, 148, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(244, 114, 182, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(244, 114, 182, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #f472b6;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #f472b6;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f472b6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f472b6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #f472b6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #f472b6;
+    color: #f472b6;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #f472b6;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #f472b6;
+    color: #030712;
+    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: #f9a8d4;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(244, 114, 182, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(244, 114, 182, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(244, 114, 182, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #f472b6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #f472b6;
+    color: #f472b6;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(244, 114, 182, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(244, 114, 182, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(244, 114, 182, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(244, 114, 182, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #f472b6;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #f472b6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #f472b6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #f472b6;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #f472b6;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #f472b6;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #f472b6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #f472b6;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(244, 114, 182, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #f472b6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #f472b6;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(244, 114, 182, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #f472b6;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #f472b6;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-dark-purple/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-purple/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-purple/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-purple/fonts/InterVariable.woff2 b/public/themes/lara-dark-purple/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-purple/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
new file mode 100644
index 0000000000..b7c49d1917
--- /dev/null
+++ b/public/themes/lara-dark-purple/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #a78bfa;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(167, 139, 250, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#fbf9ff;
+  --primary-100:#eae3fe;
+  --primary-200:#d9cdfd;
+  --primary-300:#c8b7fc;
+  --primary-400:#b8a1fb;
+  --primary-500:#a78bfa;
+  --primary-600:#8e76d5;
+  --primary-700:#7561af;
+  --primary-800:#5c4c8a;
+  --primary-900:#433864;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #a78bfa;
+}
+.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: #a78bfa;
+}
+.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: #a78bfa;
+}
+.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: #a78bfa;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #a78bfa;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #a78bfa;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #a78bfa;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #a78bfa;
+    background: #a78bfa;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #a78bfa;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #ddd6fe;
+    background: #ddd6fe;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #a78bfa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ddd6fe;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #a78bfa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ddd6fe;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #a78bfa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ddd6fe;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #a78bfa;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #a78bfa;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #a78bfa;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #c4b5fd;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #a78bfa;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #a78bfa;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #a78bfa;
+    background: #a78bfa;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #a78bfa;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #ddd6fe;
+    background: #ddd6fe;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #a78bfa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ddd6fe;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #a78bfa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ddd6fe;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #a78bfa;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #a78bfa;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #a78bfa;
+    border-color: #a78bfa;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #c4b5fd;
+    border-color: #c4b5fd;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #a78bfa;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #a78bfa;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #a78bfa;
+    border-color: #a78bfa;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #a78bfa;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #a78bfa;
+    border-color: #a78bfa;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #c4b5fd;
+    border-color: #c4b5fd;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    border-color: #a78bfa;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #a78bfa;
+    border: 1px solid #a78bfa;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #c4b5fd;
+    color: #030712;
+    border-color: #c4b5fd;
+  }
+  .p-button:not(:disabled):active {
+    background: #ddd6fe;
+    color: #030712;
+    border-color: #ddd6fe;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #a78bfa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(167, 139, 250, 0.04);
+    color: #a78bfa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(167, 139, 250, 0.16);
+    color: #a78bfa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(167, 139, 250, 0.04);
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(167, 139, 250, 0.16);
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #a78bfa;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #a78bfa;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a78bfa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(167, 139, 250, 0.04);
+    color: #a78bfa;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(167, 139, 250, 0.16);
+    color: #a78bfa;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(167, 139, 250, 0.04);
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(167, 139, 250, 0.16);
+    color: #a78bfa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(167, 139, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(167, 139, 250, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(167, 139, 250, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(167, 139, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(167, 139, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #a78bfa;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(74, 17, 245, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    border-color: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(110, 64, 247, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(167, 139, 250, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(167, 139, 250, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #a78bfa;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #a78bfa;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #a78bfa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #a78bfa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #a78bfa;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #a78bfa;
+    color: #a78bfa;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #a78bfa;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #a78bfa;
+    color: #030712;
+    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: #c4b5fd;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(167, 139, 250, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(167, 139, 250, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(167, 139, 250, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #a78bfa;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #a78bfa;
+    color: #a78bfa;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(167, 139, 250, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(167, 139, 250, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(167, 139, 250, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(167, 139, 250, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #a78bfa;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #a78bfa;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #a78bfa;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #a78bfa;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #a78bfa;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #a78bfa;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #a78bfa;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #a78bfa;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(167, 139, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #a78bfa;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #a78bfa;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(167, 139, 250, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #a78bfa;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #a78bfa;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-dark-teal/fonts/InterVariable-Italic.woff2 b/public/themes/lara-dark-teal/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-dark-teal/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-dark-teal/fonts/InterVariable.woff2 b/public/themes/lara-dark-teal/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-dark-teal/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
new file mode 100644
index 0000000000..40b3c05c13
--- /dev/null
+++ b/public/themes/lara-dark-teal/theme.css
@@ -0,0 +1,7078 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #1f2937;
+  --surface-b: #111827;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #424b57;
+  --surface-e: #1f2937;
+  --surface-f: #1f2937;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #2dd4bf;
+  --primary-color-text: #030712;
+  --surface-0: #111827;
+  --surface-50: #1f2937;
+  --surface-100: #374151;
+  --surface-200: #4b5563;
+  --surface-300: #6b7280;
+  --surface-400: #9ca3af;
+  --surface-500: #d1d5db;
+  --surface-600: #e5e7eb;
+  --surface-700: #f3f4f6;
+  --surface-800: #f9fafb;
+  --surface-900: #ffffff;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #111827;
+  --surface-section: #111827;
+  --surface-card: #1f2937;
+  --surface-overlay: #1f2937;
+  --surface-border: rgba(255, 255, 255, 0.1);
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(45, 212, 191, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: dark;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f5fdfc;
+  --primary-100:#cdf5f0;
+  --primary-200:#a5ede3;
+  --primary-300:#7de4d7;
+  --primary-400:#55dccb;
+  --primary-500:#2dd4bf;
+  --primary-600:#26b4a2;
+  --primary-700:#209486;
+  --primary-800:#197569;
+  --primary-900:#12554c;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2937;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2937;
+  border: 1px solid #424b57;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #424b57;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #111827;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #2dd4bf;
+}
+.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: #2dd4bf;
+}
+.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: #2dd4bf;
+}
+.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: #2dd4bf;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #fca5a5;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #2dd4bf;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .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: #fca5a5;
+  }
+  .p-autocomplete-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2937;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #424b57;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #2dd4bf;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #424b57;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #424b57;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #424b57;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #2dd4bf;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #030712;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #2dd4bf;
+    background: #2dd4bf;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #2dd4bf;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #99f6e4;
+    background: #99f6e4;
+    color: #030712;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #fca5a5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #2dd4bf;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #99f6e4;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #2dd4bf;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #99f6e4;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #2dd4bf;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #424b57;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #99f6e4;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #2dd4bf;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #6b7280;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2937;
+    border: 1px solid #424b57;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #2dd4bf;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-dropdown-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #424b57;
+    border-left: 1px solid #424b57;
+    border-bottom: 1px solid #424b57;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #424b57;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #6b7280;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #2dd4bf;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #030712;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #424b57;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #5eead4;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #fca5a5;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #111827;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #2dd4bf;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #424b57;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #fca5a5;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #424b57;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-listbox.p-invalid {
+    border-color: #fca5a5;
+  }
+  .p-mention-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #2dd4bf;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #fca5a5;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #424b57;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #424b57;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #424b57;
+    background: #111827;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #030712;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #2dd4bf;
+    background: #2dd4bf;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #2dd4bf;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #99f6e4;
+    background: #99f6e4;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #030712;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #fca5a5;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #2dd4bf;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #99f6e4;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #2dd4bf;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #99f6e4;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #2dd4bf;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #2dd4bf;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #2dd4bf;
+    border-color: #2dd4bf;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #5eead4;
+    border-color: #5eead4;
+    color: #030712;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #030712;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-slider {
+    background: #424b57;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #424b57;
+    border: 2px solid #2dd4bf;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-slider .p-slider-range {
+    background: #2dd4bf;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #2dd4bf;
+    border-color: #2dd4bf;
+  }
+  .p-treeselect {
+    background: #111827;
+    border: 1px solid #424b57;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #2dd4bf;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #fca5a5;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #424b57;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #424b57;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #2dd4bf;
+    border-color: #2dd4bf;
+    color: #030712;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #5eead4;
+    border-color: #5eead4;
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #030712;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    border-color: #2dd4bf;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #fca5a5;
+  }
+  .p-button {
+    color: #030712;
+    background: #2dd4bf;
+    border: 1px solid #2dd4bf;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #5eead4;
+    color: #030712;
+    border-color: #5eead4;
+  }
+  .p-button:not(:disabled):active {
+    background: #99f6e4;
+    color: #030712;
+    border-color: #99f6e4;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #2dd4bf;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(45, 212, 191, 0.04);
+    color: #2dd4bf;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(45, 212, 191, 0.16);
+    color: #2dd4bf;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(45, 212, 191, 0.04);
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(45, 212, 191, 0.16);
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #2dd4bf;
+    background-color: #030712;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #020617;
+    background: #94a3b8;
+    border: 1px solid #94a3b8;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #cbd5e1;
+    color: #020617;
+    border-color: #cbd5e1;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #e2e8f0;
+    color: #020617;
+    border-color: #e2e8f0;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #082f49;
+    background: #38bdf8;
+    border: 1px solid #38bdf8;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #7dd3fc;
+    color: #082f49;
+    border-color: #7dd3fc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #74d1fa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #bae6fd;
+    color: #082f49;
+    border-color: #bae6fd;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #052e16;
+    background: #4ade80;
+    border: 1px solid #4ade80;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #86efac;
+    color: #052e16;
+    border-color: #86efac;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #80e8a6;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #bbf7d0;
+    color: #052e16;
+    border-color: #bbf7d0;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #431407;
+    background: #fb923c;
+    border: 1px solid #fb923c;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fdba74;
+    color: #431407;
+    border-color: #fdba74;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fcb377;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #fed7aa;
+    color: #431407;
+    border-color: #fed7aa;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #3b0764;
+    background: #c084fc;
+    border: 1px solid #c084fc;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #d8b4fe;
+    color: #3b0764;
+    border-color: #d8b4fe;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d3a9fd;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #e9d5ff;
+    color: #3b0764;
+    border-color: #e9d5ff;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #450a0a;
+    background: #f87171;
+    border: 1px solid #f87171;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #fca5a5;
+    color: #450a0a;
+    border-color: #fca5a5;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fa9c9c;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #fecaca;
+    color: #450a0a;
+    border-color: #fecaca;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #111827;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #111827;
+    border-color: #f3f4f6;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #111827;
+    border-color: #e5e7eb;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #2dd4bf;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.2);
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #2dd4bf;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(45, 212, 191, 0.04);
+    color: #2dd4bf;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(45, 212, 191, 0.16);
+    color: #2dd4bf;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(45, 212, 191, 0.04);
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(45, 212, 191, 0.16);
+    color: #2dd4bf;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #94a3b8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(148, 163, 184, 0.04);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(148, 163, 184, 0.16);
+    border-color: transparent;
+    color: #94a3b8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #38bdf8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(56, 189, 248, 0.04);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(56, 189, 248, 0.16);
+    border-color: transparent;
+    color: #38bdf8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4ade80;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(74, 222, 128, 0.04);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(74, 222, 128, 0.16);
+    border-color: transparent;
+    color: #4ade80;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fb923c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 146, 60, 0.04);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 146, 60, 0.16);
+    border-color: transparent;
+    color: #fb923c;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c084fc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(192, 132, 252, 0.04);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(192, 132, 252, 0.16);
+    border-color: transparent;
+    color: #c084fc;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f87171;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(248, 113, 113, 0.04);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(248, 113, 113, 0.16);
+    border-color: transparent;
+    color: #f87171;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #111827;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #111827;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #424b57;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2);
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid rgba(45, 212, 191, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(45, 212, 191, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(45, 212, 191, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid rgba(45, 212, 191, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid rgba(45, 212, 191, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #2dd4bf;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2937;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #424b57;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-column-filter-overlay {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #424b57;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #1c2532;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(22, 107, 97, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #424b57;
+    border-color: #424b57;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-paginator {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #424b57;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    border-color: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #1f2937;
+    border: 1px solid #424b57;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(35, 171, 154, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: rgba(45, 212, 191, 0.2);
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #424b57;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid rgba(45, 212, 191, 0.2);
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #2dd4bf;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2937;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1c2532;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #2dd4bf;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #030712;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #424b57;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 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: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2937;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #424b57;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #424b57;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #424b57;
+    background: #1f2937;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #424b57;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #424b57;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #2dd4bf;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #424b57;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #2dd4bf;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #424b57;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #2dd4bf;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2937;
+    border-color: #2dd4bf;
+    color: #2dd4bf;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2937;
+    color: #2dd4bf;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #1f2937;
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #424b57;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #2dd4bf;
+    color: #030712;
+    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: #5eead4;
+    color: #030712;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 41, 55, 0);
+    border-bottom-color: #1f2937;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(66, 75, 87, 0);
+    border-bottom-color: #3f4753;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2937;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #424b57;
+  }
+  .p-sidebar {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #424b57;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #424b57;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2937;
+    padding: 1.25rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2937;
+    padding: 2rem 1rem;
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #374151;
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem rgba(45, 212, 191, 0.2);
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #374151;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #374151;
+      border: 1px solid #424b57;
+      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 #424b57;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(45, 212, 191, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(45, 212, 191, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #424b57;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2937;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2937;
+    border-color: #424b57;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #424b57;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #424b57;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #424b57;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #424b57;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #424b57;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #424b57 transparent;
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2937;
+    border-color: #2dd4bf;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2937;
+    border-color: #2dd4bf;
+    color: #2dd4bf;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #374151;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #374151;
+    border: 1px solid #424b57;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(45, 212, 191, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #424b57;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 1px;
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #93c5fd;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 1px;
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #6ee7b7;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 1px;
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #fde047;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 1px;
+    color: #fca5a5;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #fca5a5;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-message.p-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #93c5fd;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #93c5fd;
+  }
+  .p-message.p-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #6ee7b7;
+  }
+  .p-message.p-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #fde047;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #fde047;
+  }
+  .p-message.p-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #fca5a5;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #fca5a5;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(59, 130, 246, 0.2);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #93c5fd;
+  }
+  .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: #93c5fd;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(16, 185, 129, 0.2);
+    border: solid #10b981;
+    border-width: 0 0 0 6px;
+    color: #6ee7b7;
+  }
+  .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: #6ee7b7;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(234, 179, 8, 0.2);
+    border: solid #eab308;
+    border-width: 0 0 0 6px;
+    color: #fde047;
+  }
+  .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: #fde047;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(239, 68, 68, 0.2);
+    border: solid #ef4444;
+    border-width: 0 0 0 6px;
+    color: #fca5a5;
+  }
+  .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: #fca5a5;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #424b57;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(45, 212, 191, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #424b57;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2937;
+  }
+  .p-chip {
+    background-color: #424b57;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(45, 212, 191, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(45, 212, 191, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #2dd4bf;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #2dd4bf;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #2dd4bf;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #424b57;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #2dd4bf;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #030712;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2937;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #424b57;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #2dd4bf;
+    color: #030712;
+    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: #94a3b8;
+    color: #020617;
+  }
+  .p-badge.p-badge-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-badge.p-badge-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+  .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-tag {
+    background: #2dd4bf;
+    color: #030712;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #4ade80;
+    color: #052e16;
+  }
+  .p-tag.p-tag-info {
+    background-color: #38bdf8;
+    color: #082f49;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fb923c;
+    color: #431407;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f87171;
+    color: #450a0a;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #2dd4bf;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #2dd4bf;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(45, 212, 191, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(148, 163, 184, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(74, 222, 128, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(56, 189, 248, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(251, 146, 60, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(192, 132, 252, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(248, 113, 113, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #2dd4bf;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #2dd4bf;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #1c2127, 0 0 0 4px rgba(45, 212, 191, 0.7), 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #2dd4bf;
+    color: #030712;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    border-style: solid;
+    border-color: #424b57;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background: #2dd4bf;
+    color: #030712;
+  }
+}
diff --git a/public/themes/lara-light-amber/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-amber/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-amber/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-amber/fonts/InterVariable.woff2 b/public/themes/lara-light-amber/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-amber/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
new file mode 100644
index 0000000000..58c62d372e
--- /dev/null
+++ b/public/themes/lara-light-amber/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #f59e0b;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #fef08a;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #fffbeb;
+  --highlight-text-color: #b45309;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#fffaf3;
+  --primary-100:#fde8c4;
+  --primary-200:#fbd596;
+  --primary-300:#f9c368;
+  --primary-400:#f7b039;
+  --primary-500:#f59e0b;
+  --primary-600:#d08609;
+  --primary-700:#ac6f08;
+  --primary-800:#875706;
+  --primary-900:#623f04;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #f59e0b;
+}
+.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: #f59e0b;
+}
+.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: #f59e0b;
+}
+.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: #f59e0b;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #f59e0b;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #fffbeb;
+    color: #b45309;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #f59e0b;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #f59e0b;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #f59e0b;
+    background: #f59e0b;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #f59e0b;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #b45309;
+    background: #b45309;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #f59e0b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #b45309;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #f59e0b;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #b45309;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #f59e0b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #b45309;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #f59e0b;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #f59e0b;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #f59e0b;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #d97706;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #f59e0b;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #f59e0b;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #f59e0b;
+    background: #f59e0b;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #f59e0b;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #b45309;
+    background: #b45309;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #f59e0b;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #b45309;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #f59e0b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #b45309;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #f59e0b;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #f59e0b;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #f59e0b;
+    border-color: #f59e0b;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #d97706;
+    border-color: #d97706;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #f59e0b;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-slider .p-slider-range {
+    background: #f59e0b;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #f59e0b;
+    border-color: #f59e0b;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #f59e0b;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #f59e0b;
+    border-color: #f59e0b;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #d97706;
+    border-color: #d97706;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: #f59e0b;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #f59e0b;
+    border: 1px solid #f59e0b;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #d97706;
+    color: #ffffff;
+    border-color: #d97706;
+  }
+  .p-button:not(:disabled):active {
+    background: #b45309;
+    color: #ffffff;
+    border-color: #b45309;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #f59e0b;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #b45309;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #b45309;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #b45309;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    color: #f59e0b;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    color: #f59e0b;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #b45309;
+    background: #fffbeb;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #b45309;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #b45309;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #fef08a;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #fef08a;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #fffbeb;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #fffbeb;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #fef08a;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #fef08a;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #f59e0b;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #b45309;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #b45309;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(245, 158, 11, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #fef08a;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #ffe26c;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #fffbeb;
+    border-color: #fffbeb;
+    color: #b45309;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #fef08a;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .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: #b45309;
+  }
+  .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: #b45309;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ffe789;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #fef08a;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #b45309;
+    background: #fffbeb;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #b45309;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #fef08a;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #b45309;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #b45309;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #f59e0b;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #b45309;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #b45309;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #f59e0b;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f59e0b;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f59e0b;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fef08a;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #f59e0b;
+    color: #f59e0b;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #f59e0b;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fef08a;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #f59e0b;
+    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: #d97706;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #fef08a;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #fef08a;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #b45309;
+      background: #fffbeb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #b45309;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #b45309;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(245, 158, 11, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fef08a;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #fffbeb;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #b45309;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #b45309;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fef08a;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #f59e0b;
+    color: #f59e0b;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b45309;
+    background: #fffbeb;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b45309;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b45309;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(245, 158, 11, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #fffbeb;
+    color: #b45309;
+  }
+  .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: #fffbeb;
+    color: #b45309;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #f59e0b;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #f59e0b;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #f59e0b;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #f59e0b;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #f59e0b;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #f59e0b;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #f59e0b;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #f59e0b;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #f59e0b;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #f59e0b;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #facf85, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #f59e0b;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f59e0b;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/lara-light-blue/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-blue/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-blue/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-blue/fonts/InterVariable.woff2 b/public/themes/lara-light-blue/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-blue/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
new file mode 100644
index 0000000000..55085d4e8a
--- /dev/null
+++ b/public/themes/lara-light-blue/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #3b82f6;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #bfdbfe;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #eff6ff;
+  --highlight-text-color: #1d4ed8;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f5f9ff;
+  --primary-100:#d0e1fd;
+  --primary-200:#abc9fb;
+  --primary-300:#85b2f9;
+  --primary-400:#609af8;
+  --primary-500:#3b82f6;
+  --primary-600:#326fd1;
+  --primary-700:#295bac;
+  --primary-800:#204887;
+  --primary-900:#183462;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #3b82f6;
+}
+.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: #3b82f6;
+}
+.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: #3b82f6;
+}
+.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: #3b82f6;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #3b82f6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #eff6ff;
+    color: #1d4ed8;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #3b82f6;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #3b82f6;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #3b82f6;
+    background: #3b82f6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #3b82f6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #1d4ed8;
+    background: #1d4ed8;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #3b82f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #1d4ed8;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #3b82f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #1d4ed8;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #3b82f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #1d4ed8;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #3b82f6;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #3b82f6;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #3b82f6;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #2563eb;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #3b82f6;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #3b82f6;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #3b82f6;
+    background: #3b82f6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #3b82f6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #1d4ed8;
+    background: #1d4ed8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #3b82f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #1d4ed8;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #3b82f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #1d4ed8;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #3b82f6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #3b82f6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #3b82f6;
+    border-color: #3b82f6;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #2563eb;
+    border-color: #2563eb;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #3b82f6;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-slider .p-slider-range {
+    background: #3b82f6;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #3b82f6;
+    border-color: #3b82f6;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #3b82f6;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #3b82f6;
+    border-color: #3b82f6;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #2563eb;
+    border-color: #2563eb;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: #3b82f6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #3b82f6;
+    border: 1px solid #3b82f6;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #2563eb;
+    color: #ffffff;
+    border-color: #2563eb;
+  }
+  .p-button:not(:disabled):active {
+    background: #1d4ed8;
+    color: #ffffff;
+    border-color: #1d4ed8;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #3b82f6;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #1d4ed8;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #1d4ed8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #1d4ed8;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    color: #3b82f6;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    color: #3b82f6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #1d4ed8;
+    background: #eff6ff;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #1d4ed8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #1d4ed8;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #bfdbfe;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #bfdbfe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #eff6ff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #eff6ff;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #bfdbfe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #bfdbfe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #3b82f6;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #1d4ed8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #1d4ed8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(59, 130, 246, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #bfdbfe;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #70aeff;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #eff6ff;
+    border-color: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #bfdbfe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .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: #1d4ed8;
+  }
+  .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: #1d4ed8;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8cbeff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #bfdbfe;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #1d4ed8;
+    background: #eff6ff;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #1d4ed8;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #bfdbfe;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #1d4ed8;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #1d4ed8;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #3b82f6;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #1d4ed8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #1d4ed8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #3b82f6;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3b82f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3b82f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #3b82f6;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #3b82f6;
+    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: #2563eb;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #bfdbfe;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #bfdbfe;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #1d4ed8;
+      background: #eff6ff;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #1d4ed8;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #1d4ed8;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(59, 130, 246, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #eff6ff;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #1d4ed8;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #1d4ed8;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #3b82f6;
+    color: #3b82f6;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #1d4ed8;
+    background: #eff6ff;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #1d4ed8;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #1d4ed8;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(59, 130, 246, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #eff6ff;
+    color: #1d4ed8;
+  }
+  .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: #eff6ff;
+    color: #1d4ed8;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #3b82f6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #3b82f6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #3b82f6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #3b82f6;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #3b82f6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #3b82f6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #3b82f6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #3b82f6;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #3b82f6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #3b82f6;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #9dc1fb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #3b82f6;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #3b82f6;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/lara-light-cyan/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-cyan/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-cyan/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-cyan/fonts/InterVariable.woff2 b/public/themes/lara-light-cyan/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-cyan/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
new file mode 100644
index 0000000000..0133f6b6a3
--- /dev/null
+++ b/public/themes/lara-light-cyan/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #06b6d4;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #a5f3fc;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #ecfeff;
+  --highlight-text-color: #0e7490;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f3fbfd;
+  --primary-100:#c3edf5;
+  --primary-200:#94e0ed;
+  --primary-300:#65d2e4;
+  --primary-400:#35c4dc;
+  --primary-500:#06b6d4;
+  --primary-600:#059bb4;
+  --primary-700:#047f94;
+  --primary-800:#036475;
+  --primary-900:#024955;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #06b6d4;
+}
+.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: #06b6d4;
+}
+.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: #06b6d4;
+}
+.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: #06b6d4;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #06b6d4;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #ecfeff;
+    color: #0e7490;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #06b6d4;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #06b6d4;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #06b6d4;
+    background: #06b6d4;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #06b6d4;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #0e7490;
+    background: #0e7490;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #06b6d4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0e7490;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #06b6d4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0e7490;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #06b6d4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0e7490;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #06b6d4;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #06b6d4;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #06b6d4;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #0891b2;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #06b6d4;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #06b6d4;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #06b6d4;
+    background: #06b6d4;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #06b6d4;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #0e7490;
+    background: #0e7490;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #06b6d4;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0e7490;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #06b6d4;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0e7490;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #06b6d4;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #06b6d4;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #06b6d4;
+    border-color: #06b6d4;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #0891b2;
+    border-color: #0891b2;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #06b6d4;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-slider .p-slider-range {
+    background: #06b6d4;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #06b6d4;
+    border-color: #06b6d4;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #06b6d4;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #06b6d4;
+    border-color: #06b6d4;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #0891b2;
+    border-color: #0891b2;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: #06b6d4;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #06b6d4;
+    border: 1px solid #06b6d4;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #0891b2;
+    color: #ffffff;
+    border-color: #0891b2;
+  }
+  .p-button:not(:disabled):active {
+    background: #0e7490;
+    color: #ffffff;
+    border-color: #0e7490;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #06b6d4;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(6, 182, 212, 0.04);
+    color: #06b6d4;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(6, 182, 212, 0.16);
+    color: #06b6d4;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(6, 182, 212, 0.04);
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(6, 182, 212, 0.16);
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #06b6d4;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #0e7490;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #0e7490;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #0e7490;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #06b6d4;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(6, 182, 212, 0.04);
+    color: #06b6d4;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(6, 182, 212, 0.16);
+    color: #06b6d4;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(6, 182, 212, 0.04);
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(6, 182, 212, 0.16);
+    color: #06b6d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #0e7490;
+    background: #ecfeff;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #0e7490;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #0e7490;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #a5f3fc;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #a5f3fc;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ecfeff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ecfeff;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #a5f3fc;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #a5f3fc;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #06b6d4;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #0e7490;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #0e7490;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(6, 182, 212, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a5f3fc;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #6df7ff;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #ecfeff;
+    border-color: #ecfeff;
+    color: #0e7490;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a5f3fc;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .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: #0e7490;
+  }
+  .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: #0e7490;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8af9ff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #a5f3fc;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #0e7490;
+    background: #ecfeff;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #0e7490;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #a5f3fc;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #0e7490;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #0e7490;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #06b6d4;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #0e7490;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #0e7490;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #06b6d4;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #06b6d4;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #06b6d4;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #06b6d4;
+    color: #06b6d4;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #06b6d4;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #06b6d4;
+    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: #0891b2;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a5f3fc;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #a5f3fc;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #0e7490;
+      background: #ecfeff;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #0e7490;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #0e7490;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(6, 182, 212, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #ecfeff;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #0e7490;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #0e7490;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #06b6d4;
+    color: #06b6d4;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0e7490;
+    background: #ecfeff;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0e7490;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0e7490;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(6, 182, 212, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #ecfeff;
+    color: #0e7490;
+  }
+  .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: #ecfeff;
+    color: #0e7490;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #06b6d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #06b6d4;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #06b6d4;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #06b6d4;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #06b6d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #06b6d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #06b6d4;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #06b6d4;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71e7fb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #06b6d4;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #06b6d4;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71e7fb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #06b6d4;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #06b6d4;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/lara-light-green/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-green/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-green/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-green/fonts/InterVariable.woff2 b/public/themes/lara-light-green/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-green/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
new file mode 100644
index 0000000000..81e76727e6
--- /dev/null
+++ b/public/themes/lara-light-green/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #10b981;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #a7f3d0;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #f0fdfa;
+  --highlight-text-color: #047857;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f3fcf9;
+  --primary-100:#c6eee1;
+  --primary-200:#98e1c9;
+  --primary-300:#6bd4b1;
+  --primary-400:#3dc699;
+  --primary-500:#10b981;
+  --primary-600:#0e9d6e;
+  --primary-700:#0b825a;
+  --primary-800:#096647;
+  --primary-900:#064a34;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #10b981;
+}
+.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: #10b981;
+}
+.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: #10b981;
+}
+.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: #10b981;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #10b981;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #f0fdfa;
+    color: #047857;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #10b981;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #10b981;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #10b981;
+    background: #10b981;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #10b981;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #047857;
+    background: #047857;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #10b981;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #047857;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #10b981;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #047857;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #10b981;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #047857;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #10b981;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #10b981;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #10b981;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #059669;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #10b981;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #10b981;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #10b981;
+    background: #10b981;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #10b981;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #047857;
+    background: #047857;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #10b981;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #047857;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #10b981;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #047857;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #10b981;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #10b981;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #10b981;
+    border-color: #10b981;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #059669;
+    border-color: #059669;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #10b981;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-slider .p-slider-range {
+    background: #10b981;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #10b981;
+    border-color: #10b981;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #10b981;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #10b981;
+    border-color: #10b981;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #059669;
+    border-color: #059669;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: #10b981;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #10b981;
+    border: 1px solid #10b981;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #059669;
+    color: #ffffff;
+    border-color: #059669;
+  }
+  .p-button:not(:disabled):active {
+    background: #047857;
+    color: #ffffff;
+    border-color: #047857;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #10b981;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(16, 185, 129, 0.04);
+    color: #10b981;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(16, 185, 129, 0.16);
+    color: #10b981;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #10b981;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(16, 185, 129, 0.04);
+    color: #10b981;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(16, 185, 129, 0.16);
+    color: #10b981;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #10b981;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #047857;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #047857;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #047857;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #10b981;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(16, 185, 129, 0.04);
+    color: #10b981;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(16, 185, 129, 0.16);
+    color: #10b981;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #10b981;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(16, 185, 129, 0.04);
+    color: #10b981;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(16, 185, 129, 0.16);
+    color: #10b981;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #047857;
+    background: #f0fdfa;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #047857;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #047857;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #a7f3d0;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #f0fdfa;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #f0fdfa;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #a7f3d0;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #a7f3d0;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #10b981;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #047857;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #047857;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(16, 185, 129, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #80eed5;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #f0fdfa;
+    border-color: #f0fdfa;
+    color: #047857;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .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: #047857;
+  }
+  .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: #047857;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #99f1dd;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #a7f3d0;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #047857;
+    background: #f0fdfa;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #047857;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #a7f3d0;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #047857;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #047857;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #10b981;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #047857;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #047857;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #10b981;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #10b981;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #10b981;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #10b981;
+    color: #10b981;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #10b981;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #10b981;
+    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: #059669;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7f3d0;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #a7f3d0;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #047857;
+      background: #f0fdfa;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #047857;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #047857;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(16, 185, 129, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #f0fdfa;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #047857;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #047857;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #10b981;
+    color: #10b981;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #047857;
+    background: #f0fdfa;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #047857;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #047857;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(16, 185, 129, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #f0fdfa;
+    color: #047857;
+  }
+  .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: #f0fdfa;
+    color: #047857;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #10b981;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #10b981;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #10b981;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #10b981;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #10b981;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #10b981;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #10b981;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #10b981;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71f3c8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #10b981;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #10b981;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #71f3c8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #10b981;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #10b981;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/lara-light-indigo/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-indigo/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-indigo/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-indigo/fonts/InterVariable.woff2 b/public/themes/lara-light-indigo/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-indigo/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
new file mode 100644
index 0000000000..be345f477f
--- /dev/null
+++ b/public/themes/lara-light-indigo/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #6366f1;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #c7d2fe;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #eef2ff;
+  --highlight-text-color: #4338ca;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f7f7fe;
+  --primary-100:#dadafc;
+  --primary-200:#bcbdf9;
+  --primary-300:#9ea0f6;
+  --primary-400:#8183f4;
+  --primary-500:#6366f1;
+  --primary-600:#5457cd;
+  --primary-700:#4547a9;
+  --primary-800:#363885;
+  --primary-900:#282960;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #6366f1;
+}
+.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: #6366f1;
+}
+.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: #6366f1;
+}
+.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: #6366f1;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #6366f1;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #eef2ff;
+    color: #4338ca;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #6366f1;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #6366f1;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #6366f1;
+    background: #6366f1;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #6366f1;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #4338ca;
+    background: #4338ca;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #6366f1;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #4338ca;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #6366f1;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #4338ca;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #6366f1;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #4338ca;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #6366f1;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #6366f1;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #6366f1;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #4f46e5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #6366f1;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #6366f1;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #6366f1;
+    background: #6366f1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #6366f1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #4338ca;
+    background: #4338ca;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #6366f1;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #4338ca;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #6366f1;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #4338ca;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #6366f1;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #6366f1;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #6366f1;
+    border-color: #6366f1;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #4f46e5;
+    border-color: #4f46e5;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #6366f1;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-slider .p-slider-range {
+    background: #6366f1;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #6366f1;
+    border-color: #6366f1;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #6366f1;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #6366f1;
+    border-color: #6366f1;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #4f46e5;
+    border-color: #4f46e5;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: #6366f1;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #6366f1;
+    border: 1px solid #6366f1;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #4f46e5;
+    color: #ffffff;
+    border-color: #4f46e5;
+  }
+  .p-button:not(:disabled):active {
+    background: #4338ca;
+    color: #ffffff;
+    border-color: #4338ca;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #6366f1;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(99, 102, 241, 0.04);
+    color: #6366f1;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(99, 102, 241, 0.16);
+    color: #6366f1;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #6366f1;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(99, 102, 241, 0.04);
+    color: #6366f1;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(99, 102, 241, 0.16);
+    color: #6366f1;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #6366f1;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #4338ca;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #4338ca;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #4338ca;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #6366f1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(99, 102, 241, 0.04);
+    color: #6366f1;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(99, 102, 241, 0.16);
+    color: #6366f1;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #6366f1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(99, 102, 241, 0.04);
+    color: #6366f1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(99, 102, 241, 0.16);
+    color: #6366f1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #4338ca;
+    background: #eef2ff;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4338ca;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #4338ca;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #c7d2fe;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #c7d2fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #eef2ff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #eef2ff;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #c7d2fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #c7d2fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #6366f1;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #4338ca;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #4338ca;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(99, 102, 241, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c7d2fe;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #6f91ff;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #eef2ff;
+    border-color: #eef2ff;
+    color: #4338ca;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c7d2fe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .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: #4338ca;
+  }
+  .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: #4338ca;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8ba7ff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #c7d2fe;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #4338ca;
+    background: #eef2ff;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4338ca;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #c7d2fe;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #4338ca;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #4338ca;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #6366f1;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #4338ca;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #4338ca;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #6366f1;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #6366f1;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #6366f1;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #6366f1;
+    color: #6366f1;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #6366f1;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #6366f1;
+    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: #4f46e5;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c7d2fe;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #c7d2fe;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #4338ca;
+      background: #eef2ff;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4338ca;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4338ca;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(99, 102, 241, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #eef2ff;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #4338ca;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #4338ca;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #6366f1;
+    color: #6366f1;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4338ca;
+    background: #eef2ff;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4338ca;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4338ca;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(99, 102, 241, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
+    margin-right: 0.5rem;
+  }
+  .p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator {
+    margin-bottom: 0.5rem;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button {
+    background: rgba(255, 255, 255, 0.4);
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #eef2ff;
+    color: #4338ca;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #6366f1;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c7d2fe;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #6366f1;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #6366f1;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #6366f1;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #6366f1;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #6366f1;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #6366f1;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #6366f1;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #6366f1;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #6366f1;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b1b3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #6366f1;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #6366f1;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/lara-light-pink/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-pink/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-pink/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-pink/fonts/InterVariable.woff2 b/public/themes/lara-light-pink/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-pink/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
new file mode 100644
index 0000000000..03dace0d01
--- /dev/null
+++ b/public/themes/lara-light-pink/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #ec4899;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #fbcfe8;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #fdf2f8;
+  --highlight-text-color: #be185d;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#fef6fa;
+  --primary-100:#fad3e7;
+  --primary-200:#f7b0d3;
+  --primary-300:#f38ec0;
+  --primary-400:#f06bac;
+  --primary-500:#ec4899;
+  --primary-600:#c93d82;
+  --primary-700:#a5326b;
+  --primary-800:#822854;
+  --primary-900:#5e1d3d;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #ec4899;
+}
+.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: #ec4899;
+}
+.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: #ec4899;
+}
+.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: #ec4899;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ec4899;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #fdf2f8;
+    color: #be185d;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #ec4899;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ec4899;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #ec4899;
+    background: #ec4899;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ec4899;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #be185d;
+    background: #be185d;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ec4899;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #be185d;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #ec4899;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #be185d;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ec4899;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #be185d;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ec4899;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ec4899;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #ec4899;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #db2777;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ec4899;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ec4899;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #ec4899;
+    background: #ec4899;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ec4899;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #be185d;
+    background: #be185d;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ec4899;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #be185d;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ec4899;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #be185d;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ec4899;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #ec4899;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ec4899;
+    border-color: #ec4899;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #db2777;
+    border-color: #db2777;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #ec4899;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-slider .p-slider-range {
+    background: #ec4899;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ec4899;
+    border-color: #ec4899;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ec4899;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ec4899;
+    border-color: #ec4899;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #db2777;
+    border-color: #db2777;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: #ec4899;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #ec4899;
+    border: 1px solid #ec4899;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #db2777;
+    color: #ffffff;
+    border-color: #db2777;
+  }
+  .p-button:not(:disabled):active {
+    background: #be185d;
+    color: #ffffff;
+    border-color: #be185d;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ec4899;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(236, 72, 153, 0.04);
+    color: #ec4899;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(236, 72, 153, 0.16);
+    color: #ec4899;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #ec4899;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(236, 72, 153, 0.04);
+    color: #ec4899;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(236, 72, 153, 0.16);
+    color: #ec4899;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #ec4899;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #be185d;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #be185d;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #be185d;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ec4899;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(236, 72, 153, 0.04);
+    color: #ec4899;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(236, 72, 153, 0.16);
+    color: #ec4899;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ec4899;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(236, 72, 153, 0.04);
+    color: #ec4899;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(236, 72, 153, 0.16);
+    color: #ec4899;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #be185d;
+    background: #fdf2f8;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #be185d;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #be185d;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #fbcfe8;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #fbcfe8;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #fdf2f8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #fdf2f8;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #fbcfe8;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #fbcfe8;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #ec4899;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #be185d;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #be185d;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(236, 72, 153, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #fbcfe8;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #ec84bd;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #fdf2f8;
+    border-color: #fdf2f8;
+    color: #be185d;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #fbcfe8;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .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: #be185d;
+  }
+  .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: #be185d;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #f09cca;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #fbcfe8;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #be185d;
+    background: #fdf2f8;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #be185d;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #fbcfe8;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #be185d;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #be185d;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #ec4899;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #be185d;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #be185d;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #ec4899;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ec4899;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ec4899;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #ec4899;
+    color: #ec4899;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #ec4899;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #ec4899;
+    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: #db2777;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #fbcfe8;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #fbcfe8;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #be185d;
+      background: #fdf2f8;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #be185d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #be185d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(236, 72, 153, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #fdf2f8;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #be185d;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #be185d;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #ec4899;
+    color: #ec4899;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #be185d;
+    background: #fdf2f8;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #be185d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #be185d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(236, 72, 153, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #fdf2f8;
+    color: #be185d;
+  }
+  .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: #fdf2f8;
+    color: #be185d;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #ec4899;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ec4899;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ec4899;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #ec4899;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #ec4899;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #ec4899;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #ec4899;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #ec4899;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f6a4cc, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ec4899;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ec4899;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f6a4cc, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #ec4899;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ec4899;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/lara-light-purple/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-purple/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-purple/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-purple/fonts/InterVariable.woff2 b/public/themes/lara-light-purple/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-purple/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
new file mode 100644
index 0000000000..3b4aff55c5
--- /dev/null
+++ b/public/themes/lara-light-purple/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #8b5cf6;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #ddd6fe;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #f5f3ff;
+  --highlight-text-color: #6d28d9;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f9f7ff;
+  --primary-100:#e3d8fd;
+  --primary-200:#cdb9fb;
+  --primary-300:#b79af9;
+  --primary-400:#a17bf8;
+  --primary-500:#8b5cf6;
+  --primary-600:#764ed1;
+  --primary-700:#6140ac;
+  --primary-800:#4c3387;
+  --primary-900:#382562;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #8b5cf6;
+}
+.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: #8b5cf6;
+}
+.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: #8b5cf6;
+}
+.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: #8b5cf6;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #8b5cf6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #f5f3ff;
+    color: #6d28d9;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #8b5cf6;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #8b5cf6;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #8b5cf6;
+    background: #8b5cf6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #8b5cf6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #6d28d9;
+    background: #6d28d9;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #8b5cf6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #6d28d9;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #8b5cf6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #6d28d9;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #8b5cf6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #6d28d9;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #8b5cf6;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #8b5cf6;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #8b5cf6;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #7c3aed;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #8b5cf6;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #8b5cf6;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #8b5cf6;
+    background: #8b5cf6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #8b5cf6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #6d28d9;
+    background: #6d28d9;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #8b5cf6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #6d28d9;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #8b5cf6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #6d28d9;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #8b5cf6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #8b5cf6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #8b5cf6;
+    border-color: #8b5cf6;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #7c3aed;
+    border-color: #7c3aed;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #8b5cf6;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-slider .p-slider-range {
+    background: #8b5cf6;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #8b5cf6;
+    border-color: #8b5cf6;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #8b5cf6;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #8b5cf6;
+    border-color: #8b5cf6;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #7c3aed;
+    border-color: #7c3aed;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: #8b5cf6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #8b5cf6;
+    border: 1px solid #8b5cf6;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #7c3aed;
+    color: #ffffff;
+    border-color: #7c3aed;
+  }
+  .p-button:not(:disabled):active {
+    background: #6d28d9;
+    color: #ffffff;
+    border-color: #6d28d9;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #8b5cf6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(139, 92, 246, 0.04);
+    color: #8b5cf6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(139, 92, 246, 0.16);
+    color: #8b5cf6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #8b5cf6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(139, 92, 246, 0.04);
+    color: #8b5cf6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(139, 92, 246, 0.16);
+    color: #8b5cf6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #8b5cf6;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #6d28d9;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #6d28d9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #6d28d9;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #8b5cf6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(139, 92, 246, 0.04);
+    color: #8b5cf6;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(139, 92, 246, 0.16);
+    color: #8b5cf6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #8b5cf6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(139, 92, 246, 0.04);
+    color: #8b5cf6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(139, 92, 246, 0.16);
+    color: #8b5cf6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #6d28d9;
+    background: #f5f3ff;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #6d28d9;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #6d28d9;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #ddd6fe;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #ddd6fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #f5f3ff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #f5f3ff;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #ddd6fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #ddd6fe;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #8b5cf6;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #6d28d9;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #6d28d9;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(139, 92, 246, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ddd6fe;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #8b74ff;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #f5f3ff;
+    border-color: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ddd6fe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .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: #6d28d9;
+  }
+  .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: #6d28d9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #a28fff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #ddd6fe;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #6d28d9;
+    background: #f5f3ff;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #6d28d9;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #ddd6fe;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #6d28d9;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #6d28d9;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #8b5cf6;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #6d28d9;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #6d28d9;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #8b5cf6;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #8b5cf6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #8b5cf6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #8b5cf6;
+    color: #8b5cf6;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #8b5cf6;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #8b5cf6;
+    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: #7c3aed;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ddd6fe;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #ddd6fe;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #6d28d9;
+      background: #f5f3ff;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #6d28d9;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6d28d9;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(139, 92, 246, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #f5f3ff;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #6d28d9;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #6d28d9;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #8b5cf6;
+    color: #8b5cf6;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6d28d9;
+    background: #f5f3ff;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6d28d9;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6d28d9;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(139, 92, 246, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #f5f3ff;
+    color: #6d28d9;
+  }
+  .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: #f5f3ff;
+    color: #6d28d9;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #8b5cf6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ddd6fe;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #8b5cf6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #8b5cf6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #8b5cf6;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #8b5cf6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #8b5cf6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #8b5cf6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #8b5cf6;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #8b5cf6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #8b5cf6;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #c5aefb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #8b5cf6;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #8b5cf6;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/lara-light-teal/fonts/InterVariable-Italic.woff2 b/public/themes/lara-light-teal/fonts/InterVariable-Italic.woff2
new file mode 100644
index 0000000000..f22ec25549
Binary files /dev/null and b/public/themes/lara-light-teal/fonts/InterVariable-Italic.woff2 differ
diff --git a/public/themes/lara-light-teal/fonts/InterVariable.woff2 b/public/themes/lara-light-teal/fonts/InterVariable.woff2
new file mode 100644
index 0000000000..22a12b04e1
Binary files /dev/null and b/public/themes/lara-light-teal/fonts/InterVariable.woff2 differ
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
new file mode 100644
index 0000000000..d99c3f527f
--- /dev/null
+++ b/public/themes/lara-light-teal/theme.css
@@ -0,0 +1,7068 @@
+:root {
+  font-family: "Inter var", sans-serif;
+  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  font-variation-settings: normal;
+  --font-family: "Inter var", sans-serif;
+  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  --surface-a: #ffffff;
+  --surface-b: #f9fafb;
+  --surface-c: #f3f4f6;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4b5563;
+  --text-color-secondary: #6b7280;
+  --primary-color: #14b8a6;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f9fafb;
+  --surface-100: #f3f4f6;
+  --surface-200: #e5e7eb;
+  --surface-300: #d1d5db;
+  --surface-400: #9ca3af;
+  --surface-500: #6b7280;
+  --surface-600: #4b5563;
+  --surface-700: #374151;
+  --surface-800: #1f2937;
+  --surface-900: #111827;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f9fafb;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 0.2rem #99f6e4;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #0f766e;
+  --highlight-text-color: #0f766e;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("http://github.com/fonts/InterVariable.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("http://github.com/fonts/InterVariable-Italic.woff2") format("woff2");
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fff5f5;
+  --red-100:#ffd0ce;
+  --red-200:#ffaca7;
+  --red-300:#ff8780;
+  --red-400:#ff6259;
+  --red-500:#ff3d32;
+  --red-600:#d9342b;
+  --red-700:#b32b23;
+  --red-800:#8c221c;
+  --red-900:#661814;
+  --primary-50:#f3fbfb;
+  --primary-100:#c7eeea;
+  --primary-200:#9ae0d9;
+  --primary-300:#6dd3c8;
+  --primary-400:#41c5b7;
+  --primary-500:#14b8a6;
+  --primary-600:#119c8d;
+  --primary-700:#0e8174;
+  --primary-800:#0b655b;
+  --primary-900:#084a42;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f9fafb;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6b7280;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4b5563;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4b5563;
+  background: #f3f4f6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4b5563;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4b5563;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4b5563;
+}
+.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: #14b8a6;
+}
+.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: #14b8a6;
+}
+.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: #14b8a6;
+}
+.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: #14b8a6;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #6b7280;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #14b8a6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #0f766e;
+    color: #0f766e;
+    border-radius: 6px;
+  }
+  .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: #e24c4c;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4b5563;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #14b8a6;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d1d5db;
+    color: #4b5563;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e7eb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e7eb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e7eb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #14b8a6;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #14b8a6;
+    background: #14b8a6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #14b8a6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #0f766e;
+    background: #0f766e;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e24c4c;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #14b8a6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0f766e;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #14b8a6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0f766e;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #14b8a6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f3f4f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0f766e;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #14b8a6;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e5e7eb;
+    color: #4b5563;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #14b8a6;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #6b7280;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f3f4f6;
+    color: #6b7280;
+    border-top: 1px solid #d1d5db;
+    border-left: 1px solid #d1d5db;
+    border-bottom: 1px solid #d1d5db;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d1d5db;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #14b8a6;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7bcc5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #0d9488;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e24c4c;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4b5563;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #14b8a6;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #6b7280;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e24c4c;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6b7280;
+  }
+  :-moz-placeholder {
+    color: #6b7280;
+  }
+  ::-moz-placeholder {
+    color: #6b7280;
+  }
+  :-ms-input-placeholder {
+    color: #6b7280;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #6b7280;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e24c4c;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #14b8a6;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    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: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #6b7280;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .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 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e24c4c;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d1d5db;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d1d5db;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #4b5563;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #14b8a6;
+    background: #14b8a6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #14b8a6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #0f766e;
+    background: #0f766e;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e24c4c;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #14b8a6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0f766e;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #14b8a6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0f766e;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #14b8a6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #14b8a6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .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: #374151;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #14b8a6;
+    border-color: #14b8a6;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #0d9488;
+    border-color: #0d9488;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #14b8a6;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-slider .p-slider-range {
+    background: #14b8a6;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #14b8a6;
+    border-color: #14b8a6;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #14b8a6;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6b7280;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #4b5563;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6b7280;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6b7280;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e24c4c;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f3f4f6;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d1d5db;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d1d5db;
+    color: #4b5563;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6b7280;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #14b8a6;
+    border-color: #14b8a6;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f3f4f6;
+    border-color: #d1d5db;
+    color: #4b5563;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #374151;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #0d9488;
+    border-color: #0d9488;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: #14b8a6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e24c4c;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #14b8a6;
+    border: 1px solid #14b8a6;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #0d9488;
+    color: #ffffff;
+    border-color: #0d9488;
+  }
+  .p-button:not(:disabled):active {
+    background: #0f766e;
+    color: #ffffff;
+    border-color: #0f766e;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #14b8a6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(20, 184, 166, 0.04);
+    color: #14b8a6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(20, 184, 166, 0.16);
+    color: #14b8a6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #14b8a6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(20, 184, 166, 0.04);
+    color: #14b8a6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(20, 184, 166, 0.16);
+    color: #14b8a6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #14b8a6;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e2e8f0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #334155;
+    color: #ffffff;
+    border-color: #334155;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0ea5e9;
+    border: 1px solid #0ea5e9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0284c7;
+    color: #ffffff;
+    border-color: #0284c7;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfdbfe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0369a1;
+    color: #ffffff;
+    border-color: #0369a1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbf7d0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #15803d;
+    color: #ffffff;
+    border-color: #15803d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f97316;
+    border: 1px solid #f97316;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ea580c;
+    color: #ffffff;
+    border-color: #ea580c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde68a;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c2410c;
+    color: #ffffff;
+    border-color: #c2410c;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e9d5ff;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7e22ce;
+    color: #ffffff;
+    border-color: #7e22ce;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fecaca;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #1f2937;
+    border: 1px solid #1f2937;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #374151;
+    color: #ffffff;
+    border-color: #374151;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #4b5563;
+    color: #ffffff;
+    border-color: #4b5563;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    color: #1f2937;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #1f2937;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(31, 41, 55, 0.04);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(31, 41, 55, 0.16);
+    border-color: transparent;
+    color: #1f2937;
+  }
+  .p-button.p-button-link {
+    color: #0f766e;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #0f766e;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #0f766e;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #14b8a6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(20, 184, 166, 0.04);
+    color: #14b8a6;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(20, 184, 166, 0.16);
+    color: #14b8a6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6b7280;
+    border-color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #14b8a6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(20, 184, 166, 0.04);
+    color: #14b8a6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(20, 184, 166, 0.16);
+    color: #14b8a6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f3f4f6;
+    color: #6b7280;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #6b7280;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0ea5e9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(14, 165, 233, 0.04);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(14, 165, 233, 0.16);
+    border-color: transparent;
+    color: #0ea5e9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f97316;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(249, 115, 22, 0.04);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(249, 115, 22, 0.16);
+    border-color: transparent;
+    color: #f97316;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4b5563;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d1d5db;
+    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: #9ca3af;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #0f766e;
+    background: #0f766e;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #0f766e;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #0f766e;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #99f6e4;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #99f6e4;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #0f766e;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #0f766e;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #99f6e4;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #99f6e4;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #14b8a6;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f9fafb;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #0f766e;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #0f766e;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(20, 184, 166, 0.16);
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e5e7eb;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #99f6e4;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #e5e7eb;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f3f4f6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #010505;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6b7280;
+    border: solid #f3f4f6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6b7280;
+    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: #6b7280;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #0f766e;
+    border-color: #0f766e;
+    color: #0f766e;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f3f4f6;
+    border-color: transparent;
+    color: #374151;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #6b7280;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #4b5563;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #99f6e4;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6b7280;
+  }
+  .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: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .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: #0f766e;
+  }
+  .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: #0f766e;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .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: #6b7280;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0c5e58;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f9fafb;
+    color: #374151;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #374151;
+    background: #f9fafb;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #99f6e4;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #374151;
+    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: #0f766e;
+    background: #0f766e;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #374151;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #0f766e;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4b5563;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #99f6e4;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #0f766e;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #0f766e;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4b5563;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #14b8a6;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f9fafb;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #0f766e;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #0f766e;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #14b8a6;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4b5563;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #6b7280;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    background: #f9fafb;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #374151;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #f9fafb;
+    color: #374151;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    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: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #4b5563;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f9fafb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6b7280;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #14b8a6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #4b5563;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4b5563;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #14b8a6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f9fafb;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #99f6e4;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #14b8a6;
+    color: #14b8a6;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #14b8a6;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #99f6e4;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #374151;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4b5563;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #14b8a6;
+    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: #0d9488;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #374151;
+    border-color: transparent;
+    background: #f3f4f6;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4b5563;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4b5563;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4b5563;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f9fafb;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #374151;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #4b5563;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #99f6e4;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4b5563;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #374151;
+    background: #ffffff;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f9fafb;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6b7280;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6b7280;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #99f6e4;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #e5e7eb;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4b5563;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4b5563;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6b7280;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #0f766e;
+      background: #0f766e;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #0f766e;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #0f766e;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(20, 184, 166, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4b5563;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4b5563;
+      background: #f3f4f6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4b5563;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6b7280;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #6b7280;
+    background: #f9fafb;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #99f6e4;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f3f4f6;
+    border-color: #e5e7eb;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f9fafb;
+    border-color: #e5e7eb;
+    color: #374151;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f3f4f6;
+    color: #374151;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #4b5563;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #0f766e;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #0f766e;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #0f766e;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4b5563;
+    border: 1px solid #f3f4f6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6b7280;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #4b5563;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e7eb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #6b7280;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #99f6e4;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9ca3af;
+    color: #6b7280;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #14b8a6;
+    color: #14b8a6;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #4b5563;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4b5563;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6b7280;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #0f766e;
+    background: #0f766e;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #0f766e;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #0f766e;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(20, 184, 166, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4b5563;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4b5563;
+    background: #f3f4f6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4b5563;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6b7280;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0px;
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #3b82f6;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-message.p-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #3b82f6;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #3b82f6;
+  }
+  .p-message.p-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 1;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: rgba(219, 234, 254, 0.7);
+    border: solid #3b82f6;
+    border-width: 0 0 0 6px;
+    color: #3b82f6;
+  }
+  .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: #3b82f6;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: rgba(228, 248, 240, 0.7);
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: rgba(255, 242, 226, 0.7);
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: rgba(255, 231, 230, 0.7);
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f9fafb;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f9fafb;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f9fafb;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d1d5db;
+    width: 1rem;
+    height: 1rem;
+    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: #9ca3af;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #0f766e;
+    color: #0f766e;
+  }
+  .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: #0f766e;
+    color: #0f766e;
+  }
+  .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: #f9fafb;
+    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: #f9fafb;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #4b5563;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f9fafb;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e7eb;
+    border-radius: 6px;
+  }
+  .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: #14b8a6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f3f4f6;
+    color: #4b5563;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #14b8a6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #14b8a6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #14b8a6;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4b5563;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #14b8a6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #14b8a6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0ea5e9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f97316;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-button-label {
+    font-weight: 700;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #14b8a6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #14b8a6;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #b0b9c6, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #88eaac, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #83d3f8, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #fcb98b, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d4aafb, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #14b8a6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #14b8a6;
+  }
+  .p-speeddial-item.p-focus > .p-speeddial-action {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #75f0e3, 0 1px 2px 0 rgb(0, 0, 0);
+  }
+  .p-toast-message {
+    backdrop-filter: blur(10px);
+  }
+  .p-inline-message-text {
+    font-weight: 500;
+  }
+  .p-picklist-buttons .p-button,
+  .p-orderlist-controls .p-button {
+    transition: opacity 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #14b8a6;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #14b8a6;
+    color: #ffffff;
+  }
+}
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
new file mode 100644
index 0000000000..5dc8190578
--- /dev/null
+++ b/public/themes/luna-amber/theme.css
@@ -0,0 +1,6941 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #191919;
+  --surface-b: #191919;
+  --surface-c: #4c4c4c;
+  --surface-d: #4b4b4b;
+  --surface-e: #323232;
+  --surface-f: #323232;
+  --text-color: #dedede;
+  --text-color-secondary: #888888;
+  --primary-color: #ffe082;
+  --primary-color-text: #212529;
+  --surface-0: #191919;
+  --surface-50: #303030;
+  --surface-100: #474747;
+  --surface-200: #5e5e5e;
+  --surface-300: #757575;
+  --surface-400: #8c8c8c;
+  --surface-500: #a3a3a3;
+  --surface-600: #bababa;
+  --surface-700: #d1d1d1;
+  --surface-800: #e8e8e8;
+  --surface-900: #ffffff;
+  --gray-50: #e8e8e8;
+  --gray-100: #d1d1d1;
+  --gray-200: #bababa;
+  --gray-300: #a3a3a3;
+  --gray-400: #8c8c8c;
+  --gray-500: #757575;
+  --gray-600: #5e5e5e;
+  --gray-700: #474747;
+  --gray-800: #303030;
+  --gray-900: #191919;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #191919;
+  --surface-section: #191919;
+  --surface-card: #323232;
+  --surface-overlay: #323232;
+  --surface-border: #4b4b4b;
+  --surface-hover: #4c4c4c;
+  --focus-ring: 0 0 0 0.1rem white;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #ffe082;
+  --highlight-text-color: #212529;
+  color-scheme: dark;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf4f3;
+  --red-100:#f6ccc6;
+  --red-200:#eea39a;
+  --red-300:#e77b6d;
+  --red-400:#df5240;
+  --red-500:#d82a13;
+  --red-600:#b82410;
+  --red-700:#971d0d;
+  --red-800:#77170a;
+  --red-900:#561108;
+  --primary-50:#fffdf9;
+  --primary-100:#fff8e1;
+  --primary-200:#fff2c9;
+  --primary-300:#ffecb2;
+  --primary-400:#ffe69a;
+  --primary-500:#ffe082;
+  --primary-600:#d9be6f;
+  --primary-700:#b39d5b;
+  --primary-800:#8c7b48;
+  --primary-900:#665a34;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #191919;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #323232;
+  border: 1px solid #191919;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #dedede;
+  background: #4c4c4c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #191919;
+  color: #dedede;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #dedede;
+}
+.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: #ffe082;
+}
+.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: #ffe082;
+}
+.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: #ffe082;
+}
+.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: #ffe082;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #e57373;
+  }
+  .p-text-secondary {
+    color: #888888;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ffe082;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #ffe082;
+    color: #212529;
+    border-radius: 3px;
+  }
+  .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: #e57373;
+  }
+  .p-autocomplete-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #323232;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #252525;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #dedede;
+    background: #323232;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #ffe082;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ffca28;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #4b4b4b;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #4b4b4b;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #4b4b4b;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ffe082;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-cascadeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 224, 130, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #ffe082;
+    background: #ffe082;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ffe082;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #ffca28;
+    background: #ffca28;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e57373;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffe082;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffca28;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #ffe082;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffca28;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #212529;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffe082;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffca28;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ffe082;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: #dedede;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ffe082;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-dropdown-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(255, 224, 130, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #252525;
+    color: #888888;
+    border-top: 1px solid #4b4b4b;
+    border-left: 1px solid #4b4b4b;
+    border-bottom: 1px solid #4b4b4b;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #4b4b4b;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #323232;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #ffe082;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #323232;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #4b4b4b;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #ffd54f;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e57373;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    background: #191919;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ffe082;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #9b9b9b;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e57373;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #9b9b9b;
+  }
+  :-moz-placeholder {
+    color: #9b9b9b;
+  }
+  ::-moz-placeholder {
+    color: #9b9b9b;
+  }
+  :-ms-input-placeholder {
+    color: #9b9b9b;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(255, 224, 130, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e57373;
+  }
+  .p-mention-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ffe082;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    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: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(255, 224, 130, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .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.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #eaeaea;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e57373;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffb74d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #aed581;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #4b4b4b;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #ffe082;
+    background: #ffe082;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ffe082;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #ffca28;
+    background: #ffca28;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e57373;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffe082;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffca28;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffe082;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffca28;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #212529;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e4018d;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffe082;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #ffe082;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #b5019f;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #212529;
+  }
+  .p-selectbutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .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: #dedede;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ffe082;
+    border-color: #ffe082;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #ffd54f;
+    border-color: #ffd54f;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-slider {
+    background: #4b4b4b;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #4c4c4c;
+    border: 2px solid #ffe082;
+    border-radius: 100%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-slider .p-slider-range {
+    background: #ffe082;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ffe082;
+    border-color: #ffe082;
+  }
+  .p-treeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ffe082;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #252525;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ffe082;
+    border-color: #ffe082;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #ffd54f;
+    border-color: #ffd54f;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #ffe082;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-button {
+    color: #212529;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #ffd54f;
+    color: #212529;
+    border-color: #ffd54f;
+  }
+  .p-button:not(:disabled):active {
+    background: #ffca28;
+    color: #212529;
+    border-color: #ffca28;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #ffe082;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #b0bec5;
+    border: 1px solid #b0bec5;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #90a4ae;
+    color: #121212;
+    border-color: #90a4ae;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #cfd8dc;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #78909c;
+    color: #121212;
+    border-color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212529;
+    background: #4fc3f7;
+    border: 1px solid #4fc3f7;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #29b6f6;
+    color: #212529;
+    border-color: #29b6f6;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #e1f5fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #03a9f4;
+    color: #212529;
+    border-color: #03a9f4;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212529;
+    background: #aed581;
+    border: 1px solid #aed581;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #9ccc65;
+    color: #212529;
+    border-color: #9ccc65;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #f1f8e9;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #8bc34a;
+    color: #212529;
+    border-color: #8bc34a;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #ffb74d;
+    border: 1px solid #ffb74d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffa726;
+    color: #212529;
+    border-color: #ffa726;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #fffde7;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ff9800;
+    color: #212529;
+    border-color: #ff9800;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #ba68c8;
+    color: #121212;
+    border-color: #ba68c8;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #ab47bc;
+    color: #121212;
+    border-color: #ab47bc;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212529;
+    background: #e57373;
+    border: 1px solid #e57373;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #ef5350;
+    color: #212529;
+    border-color: #ef5350;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #ffebee;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #f44336;
+    color: #212529;
+    border-color: #f44336;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-link {
+    color: #ffe082;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem white;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #474747;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #4d4d4d;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #4b4b4b;
+    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: #4c4c4c;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #ffe082;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem white;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ffe082;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ffe082;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #ffe082;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #191919;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #252525;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(255, 224, 130, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #4b4b4b;
+    border-width: 1px;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #dedede;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-overlay {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #4b4b4b;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(255, 224, 130, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #323232;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #4c4c4c;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #ffc003;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-paginator {
+    background: #252525;
+    color: #dedede;
+    border: solid #191919;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 3px;
+  }
+  .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: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #ffe082;
+    border-color: #ffe082;
+    color: #212529;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(255, 224, 130, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #888888;
+  }
+  .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: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .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: #212529;
+  }
+  .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: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ffcd35;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: white;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #ffe082;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #dedede;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #dedede;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #ffe082;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #191919;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffe082;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #191919;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #191919;
+    border-color: #191919;
+    color: #ffe082;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #ffe082;
+    border-color: #ffe082;
+    color: #212529;
+    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: #ffca28;
+    background: #ffca28;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #323232;
+    color: #dedede;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #888888;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+  }
+  .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.857rem 1rem;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #191919;
+    border-color: #191919;
+    color: #ffe082;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #323232;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #4b4b4b;
+  }
+  .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 #4b4b4b;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    background: #191919;
+    color: #dedede;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #191919;
+    background: #323232;
+    border-radius: 3px;
+    color: #dedede;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #191919;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #4b4b4b;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #4b4b4b;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffe082;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffe082;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #3f3f3f;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #191919;
+    border-color: #191919;
+    color: #ffe082;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffe082;
+    border-color: #ffe082;
+    color: #212529;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffe082;
+    color: #212529;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #191919;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #191919;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 1rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #323232;
+    color: #dedede;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #ffe082;
+    color: #212529;
+    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: #ffd54f;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-sidebar {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4c4c4c;
+    color: #dedede;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4c4c4c;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #191919;
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #252525;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu.p-menu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #dedede;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.1rem white;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #252525;
+      border: 1px solid #191919;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #4b4b4b;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #dedede;
+      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #dedede;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #dedede;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #212529;
+      background: #ffe082;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #ffe082;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #dedede;
+      background: #3c3c3c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #191919;
+    border-color: #191919;
+    color: #ffe082;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #ffe082;
+    border-color: #ffe082;
+    color: #212529;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #ffca28;
+    background: #ffca28;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #ffe082;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    background: #191919;
+    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: #888888;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #ffe082;
+    color: #212529;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #4b4b4b;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #191919;
+    border-color: #191919;
+    color: #ffe082;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffe082;
+    border-color: #ffe082;
+    color: #212529;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #ffe082;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffe082;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-message.p-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #4b4b4b;
+    width: 1rem;
+    height: 1rem;
+    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: #4c4c4c;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #ffe082;
+    color: #212529;
+  }
+  .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: #ffe082;
+    color: #212529;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #4b4b4b;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #323232;
+  }
+  .p-chip {
+    background-color: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: #ffe082;
+  }
+  .p-scrolltop.p-link:hover {
+    background: #ffd54f;
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #212529;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #ffe082;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffe082;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ffe082;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #ffe082;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #ffe082;
+    color: #212529;
+    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: #b0bec5;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-badge.p-badge-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .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-tag {
+    background: #ffe082;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
new file mode 100644
index 0000000000..6213356a3e
--- /dev/null
+++ b/public/themes/luna-blue/theme.css
@@ -0,0 +1,6941 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #191919;
+  --surface-b: #191919;
+  --surface-c: #4c4c4c;
+  --surface-d: #4b4b4b;
+  --surface-e: #323232;
+  --surface-f: #323232;
+  --text-color: #dedede;
+  --text-color-secondary: #888888;
+  --primary-color: #81d4fa;
+  --primary-color-text: #212529;
+  --surface-0: #191919;
+  --surface-50: #303030;
+  --surface-100: #474747;
+  --surface-200: #5e5e5e;
+  --surface-300: #757575;
+  --surface-400: #8c8c8c;
+  --surface-500: #a3a3a3;
+  --surface-600: #bababa;
+  --surface-700: #d1d1d1;
+  --surface-800: #e8e8e8;
+  --surface-900: #ffffff;
+  --gray-50: #e8e8e8;
+  --gray-100: #d1d1d1;
+  --gray-200: #bababa;
+  --gray-300: #a3a3a3;
+  --gray-400: #8c8c8c;
+  --gray-500: #757575;
+  --gray-600: #5e5e5e;
+  --gray-700: #474747;
+  --gray-800: #303030;
+  --gray-900: #191919;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #191919;
+  --surface-section: #191919;
+  --surface-card: #323232;
+  --surface-overlay: #323232;
+  --surface-border: #4b4b4b;
+  --surface-hover: #4c4c4c;
+  --focus-ring: 0 0 0 0.1rem white;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #81d4fa;
+  --highlight-text-color: #212529;
+  color-scheme: dark;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf4f3;
+  --red-100:#f6ccc6;
+  --red-200:#eea39a;
+  --red-300:#e77b6d;
+  --red-400:#df5240;
+  --red-500:#d82a13;
+  --red-600:#b82410;
+  --red-700:#971d0d;
+  --red-800:#77170a;
+  --red-900:#561108;
+  --primary-50:#f9fdff;
+  --primary-100:#e1f5fe;
+  --primary-200:#c9edfd;
+  --primary-300:#b1e4fc;
+  --primary-400:#99dcfb;
+  --primary-500:#81d4fa;
+  --primary-600:#6eb4d5;
+  --primary-700:#5a94af;
+  --primary-800:#47758a;
+  --primary-900:#345564;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #191919;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #323232;
+  border: 1px solid #191919;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #dedede;
+  background: #4c4c4c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #191919;
+  color: #dedede;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #dedede;
+}
+.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: #81d4fa;
+}
+.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: #81d4fa;
+}
+.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: #81d4fa;
+}
+.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: #81d4fa;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #e57373;
+  }
+  .p-text-secondary {
+    color: #888888;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #81d4fa;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #81d4fa;
+    color: #212529;
+    border-radius: 3px;
+  }
+  .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: #e57373;
+  }
+  .p-autocomplete-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #323232;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #252525;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #dedede;
+    background: #323232;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #81d4fa;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #29b6f6;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #4b4b4b;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #4b4b4b;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #4b4b4b;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #81d4fa;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-cascadeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 212, 250, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #81d4fa;
+    background: #81d4fa;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #81d4fa;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #29b6f6;
+    background: #29b6f6;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e57373;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #81d4fa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #29b6f6;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #81d4fa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #29b6f6;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #212529;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #81d4fa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #29b6f6;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #81d4fa;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: #dedede;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #81d4fa;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-dropdown-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(129, 212, 250, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #252525;
+    color: #888888;
+    border-top: 1px solid #4b4b4b;
+    border-left: 1px solid #4b4b4b;
+    border-bottom: 1px solid #4b4b4b;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #4b4b4b;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #323232;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #81d4fa;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #323232;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #4b4b4b;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #4fc3f7;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e57373;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    background: #191919;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #81d4fa;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #9b9b9b;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e57373;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #9b9b9b;
+  }
+  :-moz-placeholder {
+    color: #9b9b9b;
+  }
+  ::-moz-placeholder {
+    color: #9b9b9b;
+  }
+  :-ms-input-placeholder {
+    color: #9b9b9b;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(129, 212, 250, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e57373;
+  }
+  .p-mention-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #81d4fa;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    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: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(129, 212, 250, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .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.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #eaeaea;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e57373;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffb74d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #aed581;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #4b4b4b;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #81d4fa;
+    background: #81d4fa;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #81d4fa;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #29b6f6;
+    background: #29b6f6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e57373;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #81d4fa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #29b6f6;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #81d4fa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #29b6f6;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #212529;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e4018d;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #81d4fa;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #81d4fa;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #b5019f;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #212529;
+  }
+  .p-selectbutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .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: #dedede;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #81d4fa;
+    border-color: #81d4fa;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #4fc3f7;
+    border-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-slider {
+    background: #4b4b4b;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #4c4c4c;
+    border: 2px solid #81d4fa;
+    border-radius: 100%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-slider .p-slider-range {
+    background: #81d4fa;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #81d4fa;
+    border-color: #81d4fa;
+  }
+  .p-treeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #81d4fa;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #252525;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #81d4fa;
+    border-color: #81d4fa;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #4fc3f7;
+    border-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #81d4fa;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-button {
+    color: #212529;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #4fc3f7;
+    color: #212529;
+    border-color: #4fc3f7;
+  }
+  .p-button:not(:disabled):active {
+    background: #29b6f6;
+    color: #212529;
+    border-color: #29b6f6;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #81d4fa;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #b0bec5;
+    border: 1px solid #b0bec5;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #90a4ae;
+    color: #121212;
+    border-color: #90a4ae;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #cfd8dc;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #78909c;
+    color: #121212;
+    border-color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212529;
+    background: #4fc3f7;
+    border: 1px solid #4fc3f7;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #29b6f6;
+    color: #212529;
+    border-color: #29b6f6;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #e1f5fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #03a9f4;
+    color: #212529;
+    border-color: #03a9f4;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212529;
+    background: #aed581;
+    border: 1px solid #aed581;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #9ccc65;
+    color: #212529;
+    border-color: #9ccc65;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #f1f8e9;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #8bc34a;
+    color: #212529;
+    border-color: #8bc34a;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #ffb74d;
+    border: 1px solid #ffb74d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffa726;
+    color: #212529;
+    border-color: #ffa726;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #fffde7;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ff9800;
+    color: #212529;
+    border-color: #ff9800;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #ba68c8;
+    color: #121212;
+    border-color: #ba68c8;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #ab47bc;
+    color: #121212;
+    border-color: #ab47bc;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212529;
+    background: #e57373;
+    border: 1px solid #e57373;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #ef5350;
+    color: #212529;
+    border-color: #ef5350;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #ffebee;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #f44336;
+    color: #212529;
+    border-color: #f44336;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-link {
+    color: #81d4fa;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem white;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #474747;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #4d4d4d;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #4b4b4b;
+    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: #4c4c4c;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #81d4fa;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem white;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #81d4fa;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #81d4fa;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #81d4fa;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #191919;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #252525;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(129, 212, 250, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #4b4b4b;
+    border-width: 1px;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #dedede;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-overlay {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #4b4b4b;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(129, 212, 250, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #323232;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #4c4c4c;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #0aa9f2;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-paginator {
+    background: #252525;
+    color: #dedede;
+    border: solid #191919;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 3px;
+  }
+  .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: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #81d4fa;
+    border-color: #81d4fa;
+    color: #212529;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(129, 212, 250, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #888888;
+  }
+  .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: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .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: #212529;
+  }
+  .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: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #38bbf7;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: white;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #81d4fa;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #dedede;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #dedede;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #81d4fa;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #191919;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #81d4fa;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #191919;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #191919;
+    border-color: #191919;
+    color: #81d4fa;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #81d4fa;
+    border-color: #81d4fa;
+    color: #212529;
+    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: #29b6f6;
+    background: #29b6f6;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #323232;
+    color: #dedede;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #888888;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+  }
+  .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.857rem 1rem;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #191919;
+    border-color: #191919;
+    color: #81d4fa;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #323232;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #4b4b4b;
+  }
+  .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 #4b4b4b;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    background: #191919;
+    color: #dedede;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #191919;
+    background: #323232;
+    border-radius: 3px;
+    color: #dedede;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #191919;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #4b4b4b;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #4b4b4b;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81d4fa;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81d4fa;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #3f3f3f;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #191919;
+    border-color: #191919;
+    color: #81d4fa;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #81d4fa;
+    border-color: #81d4fa;
+    color: #212529;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #81d4fa;
+    color: #212529;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #191919;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #191919;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 1rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #323232;
+    color: #dedede;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #81d4fa;
+    color: #212529;
+    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: #4fc3f7;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-sidebar {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4c4c4c;
+    color: #dedede;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4c4c4c;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #191919;
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #252525;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu.p-menu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #dedede;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.1rem white;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #252525;
+      border: 1px solid #191919;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #4b4b4b;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #dedede;
+      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #dedede;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #dedede;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #212529;
+      background: #81d4fa;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #81d4fa;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #dedede;
+      background: #3c3c3c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #191919;
+    border-color: #191919;
+    color: #81d4fa;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #81d4fa;
+    border-color: #81d4fa;
+    color: #212529;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #29b6f6;
+    background: #29b6f6;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #81d4fa;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    background: #191919;
+    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: #888888;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #4b4b4b;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #191919;
+    border-color: #191919;
+    color: #81d4fa;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #81d4fa;
+    border-color: #81d4fa;
+    color: #212529;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #81d4fa;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #81d4fa;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-message.p-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #4b4b4b;
+    width: 1rem;
+    height: 1rem;
+    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: #4c4c4c;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #81d4fa;
+    color: #212529;
+  }
+  .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: #81d4fa;
+    color: #212529;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #4b4b4b;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #323232;
+  }
+  .p-chip {
+    background-color: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: #81d4fa;
+  }
+  .p-scrolltop.p-link:hover {
+    background: #4fc3f7;
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #212529;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #81d4fa;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #81d4fa;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #81d4fa;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #81d4fa;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #81d4fa;
+    color: #212529;
+    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: #b0bec5;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-badge.p-badge-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .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-tag {
+    background: #81d4fa;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
new file mode 100644
index 0000000000..9641928dbd
--- /dev/null
+++ b/public/themes/luna-green/theme.css
@@ -0,0 +1,6941 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #191919;
+  --surface-b: #191919;
+  --surface-c: #4c4c4c;
+  --surface-d: #4b4b4b;
+  --surface-e: #323232;
+  --surface-f: #323232;
+  --text-color: #dedede;
+  --text-color-secondary: #888888;
+  --primary-color: #c5e1a5;
+  --primary-color-text: #212529;
+  --surface-0: #191919;
+  --surface-50: #303030;
+  --surface-100: #474747;
+  --surface-200: #5e5e5e;
+  --surface-300: #757575;
+  --surface-400: #8c8c8c;
+  --surface-500: #a3a3a3;
+  --surface-600: #bababa;
+  --surface-700: #d1d1d1;
+  --surface-800: #e8e8e8;
+  --surface-900: #ffffff;
+  --gray-50: #e8e8e8;
+  --gray-100: #d1d1d1;
+  --gray-200: #bababa;
+  --gray-300: #a3a3a3;
+  --gray-400: #8c8c8c;
+  --gray-500: #757575;
+  --gray-600: #5e5e5e;
+  --gray-700: #474747;
+  --gray-800: #303030;
+  --gray-900: #191919;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #191919;
+  --surface-section: #191919;
+  --surface-card: #323232;
+  --surface-overlay: #323232;
+  --surface-border: #4b4b4b;
+  --surface-hover: #4c4c4c;
+  --focus-ring: 0 0 0 0.1rem white;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #c5e1a5;
+  --highlight-text-color: #212529;
+  color-scheme: dark;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf4f3;
+  --red-100:#f6ccc6;
+  --red-200:#eea39a;
+  --red-300:#e77b6d;
+  --red-400:#df5240;
+  --red-500:#d82a13;
+  --red-600:#b82410;
+  --red-700:#971d0d;
+  --red-800:#77170a;
+  --red-900:#561108;
+  --primary-50:#fcfefb;
+  --primary-100:#f1f8e9;
+  --primary-200:#e6f2d8;
+  --primary-300:#dbecc7;
+  --primary-400:#d0e7b6;
+  --primary-500:#c5e1a5;
+  --primary-600:#a7bf8c;
+  --primary-700:#8a9e74;
+  --primary-800:#6c7c5b;
+  --primary-900:#4f5a42;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #191919;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #323232;
+  border: 1px solid #191919;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #dedede;
+  background: #4c4c4c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #191919;
+  color: #dedede;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #dedede;
+}
+.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: #c5e1a5;
+}
+.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: #c5e1a5;
+}
+.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: #c5e1a5;
+}
+.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: #c5e1a5;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #e57373;
+  }
+  .p-text-secondary {
+    color: #888888;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #c5e1a5;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c5e1a5;
+    color: #212529;
+    border-radius: 3px;
+  }
+  .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: #e57373;
+  }
+  .p-autocomplete-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #323232;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #252525;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #dedede;
+    background: #323232;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #c5e1a5;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #9ccc65;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #4b4b4b;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #4b4b4b;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #4b4b4b;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #c5e1a5;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-cascadeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(197, 225, 165, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #c5e1a5;
+    background: #c5e1a5;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #c5e1a5;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #9ccc65;
+    background: #9ccc65;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e57373;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #c5e1a5;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9ccc65;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #c5e1a5;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9ccc65;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #212529;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #c5e1a5;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9ccc65;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #c5e1a5;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: #dedede;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #c5e1a5;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-dropdown-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(197, 225, 165, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #252525;
+    color: #888888;
+    border-top: 1px solid #4b4b4b;
+    border-left: 1px solid #4b4b4b;
+    border-bottom: 1px solid #4b4b4b;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #4b4b4b;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #323232;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #c5e1a5;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #323232;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #4b4b4b;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #aed581;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e57373;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    background: #191919;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #c5e1a5;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #9b9b9b;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e57373;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #9b9b9b;
+  }
+  :-moz-placeholder {
+    color: #9b9b9b;
+  }
+  ::-moz-placeholder {
+    color: #9b9b9b;
+  }
+  :-ms-input-placeholder {
+    color: #9b9b9b;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(197, 225, 165, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e57373;
+  }
+  .p-mention-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #c5e1a5;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    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: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(197, 225, 165, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .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.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #eaeaea;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e57373;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffb74d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #aed581;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #4b4b4b;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #c5e1a5;
+    background: #c5e1a5;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #c5e1a5;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #9ccc65;
+    background: #9ccc65;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e57373;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #c5e1a5;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #9ccc65;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #c5e1a5;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #9ccc65;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #212529;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e4018d;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #c5e1a5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #c5e1a5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #b5019f;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #212529;
+  }
+  .p-selectbutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .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: #dedede;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #aed581;
+    border-color: #aed581;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-slider {
+    background: #4b4b4b;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #4c4c4c;
+    border: 2px solid #c5e1a5;
+    border-radius: 100%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-slider .p-slider-range {
+    background: #c5e1a5;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+  }
+  .p-treeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #c5e1a5;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #252525;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #aed581;
+    border-color: #aed581;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #c5e1a5;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-button {
+    color: #212529;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #aed581;
+    color: #212529;
+    border-color: #aed581;
+  }
+  .p-button:not(:disabled):active {
+    background: #9ccc65;
+    color: #212529;
+    border-color: #9ccc65;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #c5e1a5;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #b0bec5;
+    border: 1px solid #b0bec5;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #90a4ae;
+    color: #121212;
+    border-color: #90a4ae;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #cfd8dc;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #78909c;
+    color: #121212;
+    border-color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212529;
+    background: #4fc3f7;
+    border: 1px solid #4fc3f7;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #29b6f6;
+    color: #212529;
+    border-color: #29b6f6;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #e1f5fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #03a9f4;
+    color: #212529;
+    border-color: #03a9f4;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212529;
+    background: #aed581;
+    border: 1px solid #aed581;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #9ccc65;
+    color: #212529;
+    border-color: #9ccc65;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #f1f8e9;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #8bc34a;
+    color: #212529;
+    border-color: #8bc34a;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #ffb74d;
+    border: 1px solid #ffb74d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffa726;
+    color: #212529;
+    border-color: #ffa726;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #fffde7;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ff9800;
+    color: #212529;
+    border-color: #ff9800;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #ba68c8;
+    color: #121212;
+    border-color: #ba68c8;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #ab47bc;
+    color: #121212;
+    border-color: #ab47bc;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212529;
+    background: #e57373;
+    border: 1px solid #e57373;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #ef5350;
+    color: #212529;
+    border-color: #ef5350;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #ffebee;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #f44336;
+    color: #212529;
+    border-color: #f44336;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-link {
+    color: #c5e1a5;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem white;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #474747;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #4d4d4d;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #4b4b4b;
+    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: #4c4c4c;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #c5e1a5;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem white;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #c5e1a5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #c5e1a5;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #c5e1a5;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #191919;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #252525;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #4b4b4b;
+    border-width: 1px;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #dedede;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-overlay {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #4b4b4b;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(197, 225, 165, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #323232;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #4c4c4c;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #87c145;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-paginator {
+    background: #252525;
+    color: #dedede;
+    border: solid #191919;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 3px;
+  }
+  .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: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+    color: #212529;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(197, 225, 165, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #888888;
+  }
+  .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: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .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: #212529;
+  }
+  .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: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #9fce6b;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: white;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #c5e1a5;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #dedede;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #dedede;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #c5e1a5;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #191919;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #c5e1a5;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #191919;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #191919;
+    border-color: #191919;
+    color: #c5e1a5;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+    color: #212529;
+    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: #9ccc65;
+    background: #9ccc65;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #323232;
+    color: #dedede;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #888888;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+  }
+  .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.857rem 1rem;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #191919;
+    border-color: #191919;
+    color: #c5e1a5;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #323232;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #4b4b4b;
+  }
+  .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 #4b4b4b;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    background: #191919;
+    color: #dedede;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #191919;
+    background: #323232;
+    border-radius: 3px;
+    color: #dedede;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #191919;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #4b4b4b;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #4b4b4b;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #c5e1a5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #c5e1a5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #3f3f3f;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #191919;
+    border-color: #191919;
+    color: #c5e1a5;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+    color: #212529;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #c5e1a5;
+    color: #212529;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #191919;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #191919;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 1rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #323232;
+    color: #dedede;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #c5e1a5;
+    color: #212529;
+    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: #aed581;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-sidebar {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4c4c4c;
+    color: #dedede;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4c4c4c;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #191919;
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #252525;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu.p-menu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #dedede;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.1rem white;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #252525;
+      border: 1px solid #191919;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #4b4b4b;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #dedede;
+      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #dedede;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #dedede;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #212529;
+      background: #c5e1a5;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #c5e1a5;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #dedede;
+      background: #3c3c3c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #191919;
+    border-color: #191919;
+    color: #c5e1a5;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+    color: #212529;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #9ccc65;
+    background: #9ccc65;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #c5e1a5;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    background: #191919;
+    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: #888888;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #4b4b4b;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #191919;
+    border-color: #191919;
+    color: #c5e1a5;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #c5e1a5;
+    border-color: #c5e1a5;
+    color: #212529;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #c5e1a5;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #c5e1a5;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-message.p-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #4b4b4b;
+    width: 1rem;
+    height: 1rem;
+    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: #4c4c4c;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #c5e1a5;
+    color: #212529;
+  }
+  .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: #c5e1a5;
+    color: #212529;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #4b4b4b;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #323232;
+  }
+  .p-chip {
+    background-color: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: #c5e1a5;
+  }
+  .p-scrolltop.p-link:hover {
+    background: #aed581;
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #212529;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #c5e1a5;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #c5e1a5;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #c5e1a5;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #c5e1a5;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #c5e1a5;
+    color: #212529;
+    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: #b0bec5;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-badge.p-badge-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .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-tag {
+    background: #c5e1a5;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
new file mode 100644
index 0000000000..0f14c4d857
--- /dev/null
+++ b/public/themes/luna-pink/theme.css
@@ -0,0 +1,6941 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #191919;
+  --surface-b: #191919;
+  --surface-c: #4c4c4c;
+  --surface-d: #4b4b4b;
+  --surface-e: #323232;
+  --surface-f: #323232;
+  --text-color: #dedede;
+  --text-color-secondary: #888888;
+  --primary-color: #f48fb1;
+  --primary-color-text: #212529;
+  --surface-0: #191919;
+  --surface-50: #303030;
+  --surface-100: #474747;
+  --surface-200: #5e5e5e;
+  --surface-300: #757575;
+  --surface-400: #8c8c8c;
+  --surface-500: #a3a3a3;
+  --surface-600: #bababa;
+  --surface-700: #d1d1d1;
+  --surface-800: #e8e8e8;
+  --surface-900: #ffffff;
+  --gray-50: #e8e8e8;
+  --gray-100: #d1d1d1;
+  --gray-200: #bababa;
+  --gray-300: #a3a3a3;
+  --gray-400: #8c8c8c;
+  --gray-500: #757575;
+  --gray-600: #5e5e5e;
+  --gray-700: #474747;
+  --gray-800: #303030;
+  --gray-900: #191919;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #191919;
+  --surface-section: #191919;
+  --surface-card: #323232;
+  --surface-overlay: #323232;
+  --surface-border: #4b4b4b;
+  --surface-hover: #4c4c4c;
+  --focus-ring: 0 0 0 0.1rem white;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #f48fb1;
+  --highlight-text-color: #212529;
+  color-scheme: dark;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf4f3;
+  --red-100:#f6ccc6;
+  --red-200:#eea39a;
+  --red-300:#e77b6d;
+  --red-400:#df5240;
+  --red-500:#d82a13;
+  --red-600:#b82410;
+  --red-700:#971d0d;
+  --red-800:#77170a;
+  --red-900:#561108;
+  --primary-50:#fef9fb;
+  --primary-100:#fce4ec;
+  --primary-200:#facfdd;
+  --primary-300:#f8bacf;
+  --primary-400:#f6a4c0;
+  --primary-500:#f48fb1;
+  --primary-600:#cf7a96;
+  --primary-700:#ab647c;
+  --primary-800:#864f61;
+  --primary-900:#623947;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #191919;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #888888;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #323232;
+  border: 1px solid #191919;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #dedede;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #dedede;
+  background: #4c4c4c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #191919;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #191919;
+  color: #dedede;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #dedede;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #dedede;
+}
+.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: #f48fb1;
+}
+.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: #f48fb1;
+}
+.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: #f48fb1;
+}
+.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: #f48fb1;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #e57373;
+  }
+  .p-text-secondary {
+    color: #888888;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #f48fb1;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #f48fb1;
+    color: #212529;
+    border-radius: 3px;
+  }
+  .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: #e57373;
+  }
+  .p-autocomplete-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #323232;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #252525;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #dedede;
+    background: #323232;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #f48fb1;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ec407a;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #4b4b4b;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #4b4b4b;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #4b4b4b;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #f48fb1;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-cascadeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(244, 143, 177, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #f48fb1;
+    background: #f48fb1;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #f48fb1;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #ec407a;
+    background: #ec407a;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e57373;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #f48fb1;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ec407a;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #f48fb1;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ec407a;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #212529;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #f48fb1;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #4b4b4b;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ec407a;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #f48fb1;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #464646;
+    color: #dedede;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #f48fb1;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-dropdown-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(244, 143, 177, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #252525;
+    color: #888888;
+    border-top: 1px solid #4b4b4b;
+    border-left: 1px solid #4b4b4b;
+    border-bottom: 1px solid #4b4b4b;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #4b4b4b;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #323232;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #f48fb1;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #323232;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #4b4b4b;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #f06292;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e57373;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #dedede;
+    background: #191919;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #f48fb1;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #9b9b9b;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e57373;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #9b9b9b;
+  }
+  :-moz-placeholder {
+    color: #9b9b9b;
+  }
+  ::-moz-placeholder {
+    color: #9b9b9b;
+  }
+  :-ms-input-placeholder {
+    color: #9b9b9b;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #4b4b4b;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #888888;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #4b4b4b;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(244, 143, 177, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e57373;
+  }
+  .p-mention-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #f48fb1;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    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: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(244, 143, 177, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .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.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e57373;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #eaeaea;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e57373;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffb74d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #aed581;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #4b4b4b;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #4b4b4b;
+    background: #191919;
+    width: 20px;
+    height: 20px;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #f48fb1;
+    background: #f48fb1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #f48fb1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #ec407a;
+    background: #ec407a;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e57373;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #f48fb1;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ec407a;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #f48fb1;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ec407a;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #212529;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e4018d;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #f48fb1;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #f48fb1;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #b5019f;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #212529;
+  }
+  .p-selectbutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .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: #dedede;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #f48fb1;
+    border-color: #f48fb1;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #f06292;
+    border-color: #f06292;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-slider {
+    background: #4b4b4b;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #4c4c4c;
+    border: 2px solid #f48fb1;
+    border-radius: 100%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-slider .p-slider-range {
+    background: #f48fb1;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #f48fb1;
+    border-color: #f48fb1;
+  }
+  .p-treeselect {
+    background: #191919;
+    border: 1px solid #4b4b4b;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #f48fb1;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #9b9b9b;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #888888;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #888888;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e57373;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #dedede;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #4b4b4b;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #4b4b4b;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #252525;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #252525;
+    border: 1px solid #252525;
+    color: #dedede;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #888888;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #f48fb1;
+    border-color: #f48fb1;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #4c4c4c;
+    border-color: #4c4c4c;
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #dedede;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #f06292;
+    border-color: #f06292;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+    border-color: #f48fb1;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e57373;
+  }
+  .p-button {
+    color: #212529;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #f06292;
+    color: #212529;
+    border-color: #f06292;
+  }
+  .p-button:not(:disabled):active {
+    background: #ec407a;
+    color: #212529;
+    border-color: #ec407a;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #f48fb1;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #b0bec5;
+    border: 1px solid #b0bec5;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #90a4ae;
+    color: #121212;
+    border-color: #90a4ae;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #cfd8dc;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #78909c;
+    color: #121212;
+    border-color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212529;
+    background: #4fc3f7;
+    border: 1px solid #4fc3f7;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #29b6f6;
+    color: #212529;
+    border-color: #29b6f6;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #e1f5fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #03a9f4;
+    color: #212529;
+    border-color: #03a9f4;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212529;
+    background: #aed581;
+    border: 1px solid #aed581;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #9ccc65;
+    color: #212529;
+    border-color: #9ccc65;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #f1f8e9;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #8bc34a;
+    color: #212529;
+    border-color: #8bc34a;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #ffb74d;
+    border: 1px solid #ffb74d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffa726;
+    color: #212529;
+    border-color: #ffa726;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #fffde7;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ff9800;
+    color: #212529;
+    border-color: #ff9800;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #ba68c8;
+    color: #121212;
+    border-color: #ba68c8;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #ab47bc;
+    color: #121212;
+    border-color: #ab47bc;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212529;
+    background: #e57373;
+    border: 1px solid #e57373;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #ef5350;
+    color: #212529;
+    border-color: #ef5350;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #ffebee;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #f44336;
+    color: #212529;
+    border-color: #f44336;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-button.p-button-link {
+    color: #f48fb1;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem white;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #888888;
+    border-color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #4c4c4c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #3c3c3c;
+    color: #888888;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b0bec5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(176, 190, 197, 0.04);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(176, 190, 197, 0.16);
+    border-color: transparent;
+    color: #b0bec5;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4fc3f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(79, 195, 247, 0.04);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(79, 195, 247, 0.16);
+    border-color: transparent;
+    color: #4fc3f7;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #aed581;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(174, 213, 129, 0.04);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(174, 213, 129, 0.16);
+    border-color: transparent;
+    color: #aed581;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffb74d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 183, 77, 0.04);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 183, 77, 0.16);
+    border-color: transparent;
+    color: #ffb74d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e57373;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(229, 115, 115, 0.04);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(229, 115, 115, 0.16);
+    border-color: transparent;
+    color: #e57373;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #474747;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #4d4d4d;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #4b4b4b;
+    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: #4c4c4c;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #f48fb1;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem white;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #f48fb1;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #f48fb1;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #f48fb1;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #191919;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #252525;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(244, 143, 177, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #323232;
+    color: #dedede;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #4b4b4b;
+    border-width: 1px;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #dedede;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-column-filter-overlay {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #191919;
+    color: #dedede;
+    background: #252525;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #4b4b4b;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(244, 143, 177, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #323232;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #4c4c4c;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #e91b60;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #191919;
+    border-color: #191919;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-paginator {
+    background: #252525;
+    color: #dedede;
+    border: solid #191919;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 3px;
+  }
+  .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: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #dedede;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #f48fb1;
+    border-color: #f48fb1;
+    color: #212529;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #4c4c4c;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #323232;
+    border: 1px solid #191919;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #dedede;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(244, 143, 177, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #888888;
+  }
+  .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: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .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: #212529;
+  }
+  .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: #212529;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #888888;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ed4980;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #191919;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #191919;
+    border-width: 1px;
+    font-weight: 700;
+    color: #dedede;
+    background: #252525;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: white;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #888888;
+    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: #212529;
+    background: #f48fb1;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #dedede;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #323232;
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #191919;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #dedede;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid white;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #212529;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #dedede;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #f48fb1;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #191919;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #212529;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #323232;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #f48fb1;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #191919;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #191919;
+    border-color: #191919;
+    color: #f48fb1;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f48fb1;
+    border-color: #f48fb1;
+    color: #212529;
+    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: #ec407a;
+    background: #ec407a;
+    color: #212529;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #323232;
+    color: #dedede;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #888888;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-radius: 3px;
+  }
+  .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.857rem 1rem;
+    color: #dedede;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #191919;
+    border-color: #191919;
+    color: #f48fb1;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #323232;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #4b4b4b;
+  }
+  .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 #4b4b4b;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    background: #191919;
+    color: #dedede;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    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: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #191919;
+    background: #323232;
+    border-radius: 3px;
+    color: #dedede;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #191919;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #4b4b4b;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #4b4b4b;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    border-width: 2px;
+    background: #191919;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #888888;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #f48fb1;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    color: #dedede;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #191919;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #323232;
+    color: #dedede;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #f48fb1;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #3f3f3f;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #191919;
+    border-color: #191919;
+    color: #f48fb1;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #f48fb1;
+    border-color: #f48fb1;
+    color: #212529;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #f48fb1;
+    color: #212529;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #191919;
+    border: 1px solid #191919;
+    padding: 0.857rem 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #191919;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 1rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #323232;
+    color: #dedede;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #f48fb1;
+    color: #212529;
+    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: #f06292;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(50, 50, 50, 0);
+    border-bottom-color: #323232;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(25, 25, 25, 0);
+    border-bottom-color: #181818;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #323232;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #191919;
+  }
+  .p-sidebar {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(136, 136, 136, 0.5333333333);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #dedede;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4c4c4c;
+    color: #dedede;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4c4c4c;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4c4c4c;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #191919;
+    padding: 0.857rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #323232;
+    padding: 0.571rem 1rem;
+    border: 1px solid #191919;
+    color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #252525;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #dedede;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem white;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menu.p-menu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #dedede;
+    background: #191919;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #dedede;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.1rem white;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #252525;
+      border: 1px solid #191919;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #4b4b4b;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #dedede;
+      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #dedede;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #dedede;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #212529;
+      background: #f48fb1;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #212529;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #f48fb1;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #dedede;
+      background: #3c3c3c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #dedede;
+      background: #4c4c4c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #dedede;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #dedede;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #191919;
+    color: #dedede;
+    background: #191919;
+    border-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #191919;
+    border-color: #191919;
+    color: #f48fb1;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f48fb1;
+    border-color: #f48fb1;
+    color: #212529;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #ec407a;
+    background: #ec407a;
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #191919;
+    background: #323232;
+    color: #dedede;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #f48fb1;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #212529;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #191919;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #dedede;
+    border: 1px solid #191919;
+    background: #191919;
+    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: #888888;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #dedede;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #4b4b4b;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #191919;
+    border-width: 1px;
+    border-color: #191919;
+    background: #191919;
+    color: #dedede;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem white;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #191919;
+    border-color: #191919;
+    color: #f48fb1;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #f48fb1;
+    border-color: #f48fb1;
+    color: #212529;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #252525;
+    color: #dedede;
+    border: 1px solid #191919;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #dedede;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #dedede;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #dedede;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #212529;
+    background: #f48fb1;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #212529;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f48fb1;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #dedede;
+    background: #3c3c3c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #dedede;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-message.p-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #4b4b4b;
+    width: 1rem;
+    height: 1rem;
+    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: #4c4c4c;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #f48fb1;
+    color: #212529;
+  }
+  .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: #f48fb1;
+    color: #212529;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #4b4b4b;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #323232;
+  }
+  .p-chip {
+    background-color: #4b4b4b;
+    color: #dedede;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: #f48fb1;
+  }
+  .p-scrolltop.p-link:hover {
+    background: #f06292;
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #212529;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #f48fb1;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #4c4c4c;
+    color: #dedede;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #f48fb1;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #f48fb1;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #f48fb1;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #323232;
+    color: #dedede;
+    border: 1px solid #191919;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #f48fb1;
+    color: #212529;
+    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: #b0bec5;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-badge.p-badge-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+  .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-tag {
+    background: #f48fb1;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #aed581;
+    color: #212529;
+  }
+  .p-tag.p-tag-info {
+    background-color: #4fc3f7;
+    color: #212529;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffb74d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e57373;
+    color: #212529;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/md-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
new file mode 100644
index 0000000000..af1f1029bc
--- /dev/null
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: hsla(0, 0%, 100%, 0.04);
+  --surface-d: hsla(0, 0%, 100%, 0.12);
+  --surface-e: #1e1e1e;
+  --surface-f: #262626;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #CE93D8;
+  --primary-color-text: #121212;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #262626;
+  --surface-border: hsla(0, 0%, 100%, 0.12);
+  --surface-hover: hsla(0, 0%, 100%, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(206, 147, 216, 0.16);
+  --highlight-text-color: #CE93D8;
+  color-scheme: dark;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#fdfafd;
+  --primary-100:#f3e5f6;
+  --primary-200:#ead1ee;
+  --primary-300:#e1bce7;
+  --primary-400:#d7a8df;
+  --primary-500:#ce93d8;
+  --primary-600:#af7db8;
+  --primary-700:#906797;
+  --primary-800:#715177;
+  --primary-900:#523b56;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #2b2b2b;
+  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(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: hsla(0, 0%, 100%, 0.04);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 1rem 1rem;
+}
+.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 rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #CE93D8;
+}
+.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: #CE93D8;
+}
+.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: #CE93D8;
+}
+.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: #CE93D8;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: #f44435;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 1rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 4rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border-radius: 4px;
+  }
+  .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: #f44435;
+  }
+  .p-autocomplete-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #2b2b2b;
+    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: #2b2b2b;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 500;
+    margin: 0;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #CE93D8;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: none;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid hsla(0, 0%, 100%, 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 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-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 1rem 1rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-cascadeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 1rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #CE93D8;
+    background: #CE93D8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #CE93D8;
+    background: #CE93D8;
+    color: #121212;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44435;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.5rem 1rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: hsla(0, 0%, 100%, 0.24);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.5rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #2b2b2b;
+    border: 1px solid #1e1e1e;
+  }
+  .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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-dropdown.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 2rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-dropdown-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 2rem;
+    margin-right: -2rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+    padding: 1rem 1rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+  }
+  .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: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #bdbdbd;
+    width: 1.5rem;
+    height: 1.5rem;
+    left: -1px;
+    margin-top: -0.75rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: rgba(206, 147, 216, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #CE93D8;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(206, 147, 216, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44435;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    padding: 1rem 1rem;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.875rem 0.875rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-float-label > label {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44435;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.875rem 0.875rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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);
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 2rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44435;
+  }
+  .p-mention-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-multiselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 1rem 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);
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.5rem 1rem;
+  }
+  .p-multiselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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: 2rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    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: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(206, 147, 216, 0.32);
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ef9a9a;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #fff59d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #CE93D8;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #CE93D8;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #CE93D8;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #CE93D8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44435;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #CE93D8;
+    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: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #CE93D8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #CE93D8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-selectbutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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: #CE93D8;
+    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: #CE93D8;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #CE93D8;
+    border-color: 0 none;
+  }
+  .p-treeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 2rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 1rem 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);
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.5rem 1rem;
+  }
+  .p-treeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-treeselect-panel .p-treeselect-header {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 4rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-button {
+    color: #121212;
+    background: #CE93D8;
+    border: 0 none;
+    padding: 0.714rem 1rem;
+    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:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #CE93D8;
+    background-color: #121212;
+  }
+  .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: 3rem;
+    padding: 0.714rem;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #A5D6A7;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212121;
+    background: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212121;
+    background: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212121;
+    background: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #212121;
+    background: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212121;
+    background: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #121212;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d0d0d0;
+    color: #121212;
+    border-color: #d0d0d0;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #b8b8b8;
+    color: #121212;
+    border-color: #b8b8b8;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #CE93D8;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #A5D6A7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #A5D6A7;
+    color: #212121;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(165, 214, 167, 0.92);
+    color: #212121;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(206, 147, 216, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(206, 147, 216, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #CE93D8;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #CE93D8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #CE93D8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 1rem 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 1rem 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 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(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-clear-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-overlay {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    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 hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 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: 1rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 1rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(157, 62, 173, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: solid #404040;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    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(255, 255, 255, 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(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(206, 147, 216, 0.16);
+    border-color: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 1rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.25rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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: #CE93D8;
+  }
+  .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: #CE93D8;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 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: 2rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(182, 94, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: transparent;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #CE93D8;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #CE93D8;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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-visible {
+    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: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem 1.5rem;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 1rem;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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: 1rem;
+    color: rgba(255, 255, 255, 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 1rem 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(255, 255, 255, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #CE93D8;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: transparent;
+    color: #CE93D8;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-panels {
+    background: transparent;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #262626;
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.5rem 1rem 1.5rem;
+  }
+  .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(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 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: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1.5rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #262626;
+    color: rgba(255, 255, 255, 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: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #CE93D8;
+    color: #121212;
+    width: 2.5rem;
+    height: 2.5rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1.25rem;
+    right: -1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: rgba(206, 147, 216, 0.92);
+    color: #121212;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-sidebar {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    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-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #444444;
+    color: rgba(255, 255, 255, 0.87);
+    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: #444444;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #444444;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #444444;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #444444;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-submenu-header {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu.p-menu-overlay {
+    background: #2b2b2b;
+    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: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 3rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 7rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 9rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 11rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2.5rem;
+      height: 2.5rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+      background: rgba(255, 255, 255, 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: #2b2b2b;
+      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 hsla(0, 0%, 100%, 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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 1rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: hsla(0, 0%, 100%, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .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: 3rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 7rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 9rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 11rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #CE93D8;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #2b2b2b;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 1rem 1rem;
+    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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 4px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.5rem;
+  }
+  .p-message .p-message-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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: 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%;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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.3);
+  }
+  .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(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: hsla(0, 0%, 100%, 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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 1rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-left: -1rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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: #A5D6A7;
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(165, 214, 167, 0.92);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #121212;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #CE93D8;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(206, 147, 216, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #CE93D8;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #CE93D8;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 4px;
+    background: rgba(206, 147, 216, 0.32);
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #CE93D8;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #121212;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #CE93D8;
+    color: #121212;
+    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: #A5D6A7;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-badge.p-badge-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .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-tag {
+    background: #CE93D8;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+}
+@layer primereact {
+  .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: rgba(255, 255, 255, 0.04);
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-autocomplete.p-invalid > .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.76);
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+  }
+  .p-button .p-ink {
+    background-color: rgba(255, 255, 255, 0.32);
+  }
+  .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button:disabled {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    opacity: 1;
+  }
+  .p-button:disabled.p-button-text {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button:disabled.p-button-outlined {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button.p-button-raised:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(165, 214, 167, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(165, 214, 167, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+  }
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(165, 214, 167, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(255, 255, 255, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(255, 255, 255, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(255, 255, 255, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(255, 255, 255, 0.16);
+  }
+  .p-calendar-w-btn {
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    background: #1e1e1e;
+    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(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.12);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .p-calendar-w-btn:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+    border-color: #CE93D8;
+    box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.38);
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38);
+  }
+  .p-datepicker table td.p-datepicker-today.p-highlight {
+    box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16);
+  }
+  .p-calendar.p-invalid .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-calendar.p-invalid.p-calendar-w-btn {
+    border-color: #f44435;
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-calendar-w-btn {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: #A5D6A7;
+    color: #121212;
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-cascadeselect-item-content .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-input-filled .p-cascadeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-cascadeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-checkbox {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-checkbox .p-checkbox-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #CE93D8;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  @keyframes checkbox-check {
+    0% {
+      width: 0;
+      height: 0;
+      border-color: #121212;
+      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: #121212;
+      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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-input-filled .p-chips-multiple-container {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-datatable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-datatable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #CE93D8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #CE93D8;
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-dropdown-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-input-filled .p-dropdown {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-dropdown.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-dropdown.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #A5D6A7;
+    color: #121212;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(165, 214, 167, 0.68);
+    color: #121212;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-inputtext:enabled:focus.p-invalid {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputtext {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputtext.p-invalid.p-component:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before {
+    box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-fieldset .p-fieldset-legend {
+    border: 0 none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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: #1e1e1e;
+    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: #CE93D8;
+  }
+  .p-input-filled .p-float-label .p-inputtext {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-input-filled .p-multiselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-multiselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-multiselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #CE93D8;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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(165, 214, 167, 0.2);
+  }
+  .p-slider.p-slider-sliding .p-slider-handle {
+    transform: scale(1);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(3rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(165, 214, 167, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #CE93D8;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background-color: #CE93D8;
+    color: #121212;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 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(206, 147, 216, 0.16);
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus {
+    background-color: rgba(206, 147, 216, 0.12);
+  }
+  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #CE93D8;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-tieredmenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-treeselect-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+  }
+  .p-input-filled .p-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    border-color: transparent;
+    background-size: 100% 2px, 100% 1px;
+  }
+  .p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-treeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-treetable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-treetable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 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(206, 147, 216, 0.16);
+  }
+  .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
+    background-color: rgba(206, 147, 216, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus {
+    background-color: rgba(206, 147, 216, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #CE93D8;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/md-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
new file mode 100644
index 0000000000..df0282df1b
--- /dev/null
+++ b/public/themes/md-dark-indigo/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: hsla(0, 0%, 100%, 0.04);
+  --surface-d: hsla(0, 0%, 100%, 0.12);
+  --surface-e: #1e1e1e;
+  --surface-f: #262626;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #9FA8DA;
+  --primary-color-text: #121212;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #262626;
+  --surface-border: hsla(0, 0%, 100%, 0.12);
+  --surface-hover: hsla(0, 0%, 100%, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(159, 168, 218, 0.16);
+  --highlight-text-color: #9FA8DA;
+  color-scheme: dark;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#fafbfd;
+  --primary-100:#e8eaf6;
+  --primary-200:#d6daef;
+  --primary-300:#c3c9e8;
+  --primary-400:#b1b9e1;
+  --primary-500:#9fa8da;
+  --primary-600:#878fb9;
+  --primary-700:#6f7699;
+  --primary-800:#575c78;
+  --primary-900:#404357;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #2b2b2b;
+  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(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: hsla(0, 0%, 100%, 0.04);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 1rem 1rem;
+}
+.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 rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #9FA8DA;
+}
+.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: #9FA8DA;
+}
+.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: #9FA8DA;
+}
+.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: #9FA8DA;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: #f44435;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 1rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 4rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border-radius: 4px;
+  }
+  .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: #f44435;
+  }
+  .p-autocomplete-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #2b2b2b;
+    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: #2b2b2b;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 500;
+    margin: 0;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #9FA8DA;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: none;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid hsla(0, 0%, 100%, 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 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-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 1rem 1rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-cascadeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 1rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #9FA8DA;
+    background: #9FA8DA;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #9FA8DA;
+    background: #9FA8DA;
+    color: #121212;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44435;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.5rem 1rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: hsla(0, 0%, 100%, 0.24);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.5rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #2b2b2b;
+    border: 1px solid #1e1e1e;
+  }
+  .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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-dropdown.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 2rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-dropdown-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 2rem;
+    margin-right: -2rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+    padding: 1rem 1rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+  }
+  .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: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #bdbdbd;
+    width: 1.5rem;
+    height: 1.5rem;
+    left: -1px;
+    margin-top: -0.75rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: rgba(159, 168, 218, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #9FA8DA;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(159, 168, 218, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44435;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    padding: 1rem 1rem;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.875rem 0.875rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-float-label > label {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44435;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.875rem 0.875rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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);
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 2rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44435;
+  }
+  .p-mention-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-multiselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 1rem 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);
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.5rem 1rem;
+  }
+  .p-multiselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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: 2rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    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: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(159, 168, 218, 0.32);
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ef9a9a;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #fff59d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #9FA8DA;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #9FA8DA;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #9FA8DA;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #9FA8DA;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44435;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #9FA8DA;
+    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: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #9FA8DA;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #9FA8DA;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-selectbutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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: #9FA8DA;
+    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: #9FA8DA;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #9FA8DA;
+    border-color: 0 none;
+  }
+  .p-treeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 2rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 1rem 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);
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.5rem 1rem;
+  }
+  .p-treeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-treeselect-panel .p-treeselect-header {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 4rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-button {
+    color: #121212;
+    background: #9FA8DA;
+    border: 0 none;
+    padding: 0.714rem 1rem;
+    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:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #9FA8DA;
+    background-color: #121212;
+  }
+  .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: 3rem;
+    padding: 0.714rem;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #F48FB1;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212121;
+    background: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212121;
+    background: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212121;
+    background: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #212121;
+    background: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212121;
+    background: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #121212;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d0d0d0;
+    color: #121212;
+    border-color: #d0d0d0;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #b8b8b8;
+    color: #121212;
+    border-color: #b8b8b8;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #9FA8DA;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #F48FB1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #F48FB1;
+    color: #212121;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(244, 143, 177, 0.92);
+    color: #212121;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(159, 168, 218, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(159, 168, 218, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #9FA8DA;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #9FA8DA;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #9FA8DA;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 1rem 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 1rem 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 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(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-clear-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-overlay {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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: 1rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    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 hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 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: 1rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 1rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(69, 86, 180, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: solid #404040;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    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(255, 255, 255, 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(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(159, 168, 218, 0.16);
+    border-color: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 1rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.25rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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: #9FA8DA;
+  }
+  .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: #9FA8DA;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 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: 2rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(105, 119, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: transparent;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #9FA8DA;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #9FA8DA;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.5rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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-visible {
+    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: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem 1.5rem;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 1rem;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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: 1rem;
+    color: rgba(255, 255, 255, 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 1rem 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(255, 255, 255, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: rgba(159, 168, 218, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #9FA8DA;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: transparent;
+    color: #9FA8DA;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-panels {
+    background: transparent;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #262626;
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.5rem 1rem 1.5rem;
+  }
+  .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(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 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: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1.5rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #262626;
+    color: rgba(255, 255, 255, 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: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #9FA8DA;
+    color: #121212;
+    width: 2.5rem;
+    height: 2.5rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1.25rem;
+    right: -1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: rgba(159, 168, 218, 0.92);
+    color: #121212;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-sidebar {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    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-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #444444;
+    color: rgba(255, 255, 255, 0.87);
+    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: #444444;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #444444;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #444444;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #444444;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-submenu-header {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu.p-menu-overlay {
+    background: #2b2b2b;
+    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: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 1rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 3rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 7rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 9rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 11rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2.5rem;
+      height: 2.5rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+      background: rgba(255, 255, 255, 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: #2b2b2b;
+      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 hsla(0, 0%, 100%, 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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 1rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: hsla(0, 0%, 100%, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .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: 3rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 7rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 9rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 11rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 1rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: rgba(159, 168, 218, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #9FA8DA;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #2b2b2b;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 1rem 1rem;
+    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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 4px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.5rem;
+  }
+  .p-message .p-message-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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: 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%;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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.3);
+  }
+  .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(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: hsla(0, 0%, 100%, 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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 1rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-left: -1rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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: #F48FB1;
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(244, 143, 177, 0.92);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #121212;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #9FA8DA;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(159, 168, 218, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #9FA8DA;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #9FA8DA;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 4px;
+    background: rgba(159, 168, 218, 0.32);
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #9FA8DA;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #121212;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #9FA8DA;
+    color: #121212;
+    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: #F48FB1;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-badge.p-badge-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .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-tag {
+    background: #9FA8DA;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+}
+@layer primereact {
+  .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: rgba(255, 255, 255, 0.04);
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-autocomplete.p-invalid > .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(159, 168, 218, 0.76);
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.68);
+  }
+  .p-button .p-ink {
+    background-color: rgba(255, 255, 255, 0.32);
+  }
+  .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(159, 168, 218, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-button.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button:disabled {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    opacity: 1;
+  }
+  .p-button:disabled.p-button-text {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button:disabled.p-button-outlined {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button.p-button-raised:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(244, 143, 177, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(244, 143, 177, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+  }
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(244, 143, 177, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(255, 255, 255, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(255, 255, 255, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(255, 255, 255, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(255, 255, 255, 0.16);
+  }
+  .p-calendar-w-btn {
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    background: #1e1e1e;
+    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(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.12);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .p-calendar-w-btn:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+    border-color: #9FA8DA;
+    box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.38);
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38);
+  }
+  .p-datepicker table td.p-datepicker-today.p-highlight {
+    box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16);
+  }
+  .p-calendar.p-invalid .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-calendar.p-invalid.p-calendar-w-btn {
+    border-color: #f44435;
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-calendar-w-btn {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: #F48FB1;
+    color: #121212;
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-cascadeselect-item-content .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-input-filled .p-cascadeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-cascadeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-checkbox {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-checkbox .p-checkbox-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #9FA8DA;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  @keyframes checkbox-check {
+    0% {
+      width: 0;
+      height: 0;
+      border-color: #121212;
+      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: #121212;
+      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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-input-filled .p-chips-multiple-container {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-datatable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-datatable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #9FA8DA;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #9FA8DA;
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-dropdown-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-input-filled .p-dropdown {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-dropdown.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-dropdown.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #F48FB1;
+    color: #121212;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(244, 143, 177, 0.68);
+    color: #121212;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-inputtext:enabled:focus.p-invalid {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputtext {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputtext.p-invalid.p-component:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before {
+    box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-fieldset .p-fieldset-legend {
+    border: 0 none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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: #1e1e1e;
+    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: #9FA8DA;
+  }
+  .p-input-filled .p-float-label .p-inputtext {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-input-filled .p-multiselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-multiselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-multiselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #9FA8DA;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(159, 168, 218, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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(244, 143, 177, 0.2);
+  }
+  .p-slider.p-slider-sliding .p-slider-handle {
+    transform: scale(1);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(159, 168, 218, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(3rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(244, 143, 177, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 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(159, 168, 218, 0.16);
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus {
+    background-color: rgba(159, 168, 218, 0.12);
+  }
+  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #9FA8DA;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-tieredmenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-treeselect-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+  }
+  .p-input-filled .p-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    border-color: transparent;
+    background-size: 100% 2px, 100% 1px;
+  }
+  .p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-treeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-treetable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-treetable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 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(159, 168, 218, 0.16);
+  }
+  .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
+    background-color: rgba(159, 168, 218, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus {
+    background-color: rgba(159, 168, 218, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #9FA8DA;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/md-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
new file mode 100644
index 0000000000..8901bb3541
--- /dev/null
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #ffffff;
+  --surface-b: #fafafa;
+  --surface-c: rgba(0, 0, 0, 0.04);
+  --surface-d: rgba(0, 0, 0, 0.12);
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: rgba(0, 0, 0, 0.87);
+  --text-color-secondary: rgba(0, 0, 0, 0.6);
+  --primary-color: #673AB7;
+  --primary-color-text: #ffffff;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #fafafa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: rgba(0, 0, 0, 0.12);
+  --surface-hover: rgba(0, 0, 0, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(103, 58, 183, 0.12);
+  --highlight-text-color: #673AB7;
+  color-scheme: light;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#f7f5fb;
+  --primary-100:#dbd0ee;
+  --primary-200:#beaae0;
+  --primary-300:#a185d2;
+  --primary-400:#845fc5;
+  --primary-500:#673ab7;
+  --primary-600:#58319c;
+  --primary-700:#482980;
+  --primary-800:#392065;
+  --primary-900:#291749;
+}
+
+.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: 1rem 1rem;
+}
+.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: #673AB7;
+}
+.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: #673AB7;
+}
+.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: #673AB7;
+}
+.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: #673AB7;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 1rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 4rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+  }
+  .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: #673AB7;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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.5rem 1rem;
+    margin-right: 0.5rem;
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+    border-radius: 4px;
+  }
+  .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: 1rem 1rem;
+    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: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #b00020;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .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: 2.5rem;
+    height: 2.5rem;
+    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-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(0, 0, 0, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #673AB7;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: none;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 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: rgb(0, 0, 0);
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 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: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: 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-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 1rem 1rem;
+  }
+  .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:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    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-item-content {
+    padding: 1rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #757575;
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #673AB7;
+    background: #673AB7;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #673AB7;
+    background: #673AB7;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #b00020;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.5rem 1rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.5rem 1rem;
+    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-focus {
+    background: rgba(0, 0, 0, 0.24);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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.5rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: 1px solid #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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 2rem;
+  }
+  .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:focus, .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: 1rem;
+    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: 2rem;
+    margin-right: -2rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 1rem;
+    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: 1rem 1rem;
+    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:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .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: 1rem 1rem;
+    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: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #b00020;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-highlight .p-inputswitch-slider {
+    background: rgba(103, 58, 183, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #673AB7;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(0, 0, 0, 0.38);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(103, 58, 183, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #b00020;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: #ffffff;
+    padding: 1rem 1rem;
+    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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #b00020;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.875rem 0.875rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-float-label > label {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #b00020;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
+  ::-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.875rem 0.875rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    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);
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 1rem;
+    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: 2rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-listbox.p-invalid {
+    border-color: #b00020;
+  }
+  .p-mention-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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 1rem 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);
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.5rem 1rem;
+    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.5rem 1rem;
+  }
+  .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: 1rem;
+    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: 2rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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: 1rem 1rem;
+    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:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #b00020;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    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(103, 58, 183, 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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #757575;
+    border-radius: 50%;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #673AB7;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #673AB7;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #673AB7;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #673AB7;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #b00020;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #673AB7;
+    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: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #b00020;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #673AB7;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #673AB7;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    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: #673AB7;
+    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: #673AB7;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #673AB7;
+    border-color: 0 none;
+  }
+  .p-treeselect {
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 2rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 1rem 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);
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(0, 0, 0, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(0, 0, 0, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #b00020;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.5rem 1rem;
+  }
+  .p-treeselect-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-treeselect-panel .p-treeselect-header {
+    padding: 1rem;
+    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-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 4rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f5f5f5;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .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-highlight .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f6f6f6;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #b00020;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #673AB7;
+    border: 0 none;
+    padding: 0.714rem 1rem;
+    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:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #673AB7;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+    border: 0 none;
+  }
+  .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:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):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-label {
+    transition-duration: 0.2s;
+  }
+  .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: #673AB7;
+    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: 3rem;
+    padding: 0.714rem;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #4CAF50;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.92);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212121;
+    border: 1px solid #212121;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #424242;
+    color: #ffffff;
+    border-color: #424242;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #616161;
+    color: #ffffff;
+    border-color: #616161;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-link {
+    color: #673AB7;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #673AB7;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4CAF50;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4CAF50;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(76, 175, 80, 0.92);
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-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-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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: 1rem 1rem;
+    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: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    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: 1rem 1rem;
+    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: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):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:not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: 2.5rem;
+    height: 2.5rem;
+    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-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(103, 58, 183, 0.12);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(103, 58, 183, 0.12);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #673AB7;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #ffffff;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #673AB7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #673AB7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(103, 58, 183, 0.16);
+  }
+  .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: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 0 none;
+    padding: 1rem 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: 1rem 1rem;
+    font-weight: 500;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 0 none;
+    padding: 1rem 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-clear-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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: 1rem 1rem;
+    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: #673AB7;
+    background: rgba(103, 58, 183, 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-visible {
+    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: 1rem;
+    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: 1rem;
+    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: 1rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .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: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 1rem 1rem;
+    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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(49, 27, 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: 1rem;
+  }
+  .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-visible {
+    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.5rem 1rem;
+    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: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .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(103, 58, 183, 0.12);
+    border-color: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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: 1rem;
+  }
+  .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: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 1rem 1rem;
+    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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e0e0e0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.25rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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: #673AB7;
+  }
+  .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: #673AB7;
+  }
+  .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-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    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: 2rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 1rem;
+    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-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(82, 46, 146, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: 1rem 1rem;
+    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: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    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: 1rem 1rem;
+    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: #673AB7;
+    background: rgba(103, 58, 183, 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;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #673AB7;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .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-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .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: #673AB7;
+  }
+  .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-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.5rem;
+    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-visible {
+    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: 1rem 1.5rem;
+    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-header:not(.p-highlight) .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: 1rem;
+  }
+  .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: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 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: 1rem;
+    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: 1rem;
+    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-visible {
+    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: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .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 1.25rem;
+    padding: 1.25rem 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: 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    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: 1rem 1rem;
+    border: 1px solid #e0e0e0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border-top: 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 .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: rgba(103, 58, 183, 0.04);
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: #673AB7;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #673AB7;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    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: 1rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .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.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.5rem 1rem 1.5rem;
+  }
+  .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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 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.5rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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-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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .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.5rem 1.5rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1.5rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .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: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #673AB7;
+    color: #ffffff;
+    width: 2.5rem;
+    height: 2.5rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1.25rem;
+    right: -1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: rgba(103, 58, 183, 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: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    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-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .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: 1rem;
+    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;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .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: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem-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-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 1rem;
+    background: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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-submenu-header {
+    margin: 0;
+    padding: 1rem;
+    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-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .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 > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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: 1rem;
+    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: 1rem;
+    background: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .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-content .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:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: 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-menuitem-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-menubar-mobile .p-menubar-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-mobile .p-menubar-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 3rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 7rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 9rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 11rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2.5rem;
+      height: 2.5rem;
+      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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(0, 0, 0, 0.87);
+      padding: 1rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .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-content .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-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .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-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .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: 3rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 7rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 9rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 11rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    background: #ffffff;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1.5rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f6f6f6;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #ffffff;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: 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);
+    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-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .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-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: rgba(103, 58, 183, 0.04);
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: #673AB7;
+  }
+  .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-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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .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-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-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-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 1rem 1rem;
+    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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 4px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.5rem;
+  }
+  .p-message .p-message-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+    border-radius: 16px;
+    padding: 0 1rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-left: -1rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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: #4CAF50;
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(76, 175, 80, 0.92);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #ffffff;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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: #673AB7;
+    color: #ffffff;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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-metergroup .p-metergroup-meter-container {
+    background: rgba(103, 58, 183, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #673AB7;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #673AB7;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 4px;
+    background: rgba(103, 58, 183, 0.32);
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #673AB7;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e0e0e0;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #673AB7;
+    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: #4CAF50;
+    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-tag {
+    background: #673AB7;
+    color: #ffffff;
+    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;
+  }
+}
+@layer primereact {
+  .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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(103, 58, 183, 0.76);
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.68);
+  }
+  .p-button .p-ink {
+    background-color: rgba(255, 255, 255, 0.32);
+  }
+  .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+  }
+  .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-button.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .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:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(76, 175, 80, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(76, 175, 80, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+  }
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(76, 175, 80, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):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-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(33, 150, 243, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):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-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(104, 159, 56, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):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-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(251, 192, 45, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):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-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(211, 47, 47, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(33, 33, 33, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(33, 33, 33, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(33, 33, 33, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(33, 33, 33, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(33, 33, 33, 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 .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .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: #673AB7;
+    box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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(103, 58, 183, 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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: #4CAF50;
+    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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-cascadeselect-item-content .p-ink {
+    background-color: rgba(103, 58, 183, 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: #757575;
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #673AB7;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input: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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #673AB7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #673AB7;
+  }
+  .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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-dropdown-item .p-ink {
+    background-color: rgba(103, 58, 183, 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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: #4CAF50;
+    color: #ffffff;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(76, 175, 80, 0.68);
+    color: #ffffff;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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):has(.p-inputswitch-input: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:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 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:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .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:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 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-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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: #673AB7;
+  }
+  .p-input-filled .p-float-label .p-inputtext {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: #f6f6f6;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #673AB7;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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(76, 175, 80, 0.2);
+  }
+  .p-slider.p-slider-sliding .p-slider-handle {
+    transform: scale(1);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(3rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+    border-color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(76, 175, 80, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #673AB7;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background-color: #673AB7;
+    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(103, 58, 183, 0.16);
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus {
+    background-color: rgba(103, 58, 183, 0.12);
+  }
+  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #673AB7;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-tieredmenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-treeselect-item .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: #f5f5f5 no-repeat;
+    background-image: linear-gradient(to bottom, #673AB7, #673AB7), 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-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #ececec;
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect: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-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.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-treeselect.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-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(103, 58, 183, 0.16);
+  }
+  .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
+    background-color: rgba(103, 58, 183, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus {
+    background-color: rgba(103, 58, 183, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #673AB7;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/md-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
new file mode 100644
index 0000000000..d73791fb63
--- /dev/null
+++ b/public/themes/md-light-indigo/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #ffffff;
+  --surface-b: #fafafa;
+  --surface-c: rgba(0, 0, 0, 0.04);
+  --surface-d: rgba(0, 0, 0, 0.12);
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: rgba(0, 0, 0, 0.87);
+  --text-color-secondary: rgba(0, 0, 0, 0.6);
+  --primary-color: #3F51B5;
+  --primary-color-text: #ffffff;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #fafafa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: rgba(0, 0, 0, 0.12);
+  --surface-hover: rgba(0, 0, 0, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(63, 81, 181, 0.12);
+  --highlight-text-color: #3F51B5;
+  color-scheme: light;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#f5f6fb;
+  --primary-100:#d1d5ed;
+  --primary-200:#acb4df;
+  --primary-300:#8893d1;
+  --primary-400:#6372c3;
+  --primary-500:#3f51b5;
+  --primary-600:#36459a;
+  --primary-700:#2c397f;
+  --primary-800:#232d64;
+  --primary-900:#192048;
+}
+
+.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: 1rem 1rem;
+}
+.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;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 1rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 4rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+  }
+  .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.5rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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.5rem 1rem;
+    margin-right: 0.5rem;
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+    border-radius: 4px;
+  }
+  .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: 1rem 1rem;
+    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: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #b00020;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .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: 2.5rem;
+    height: 2.5rem;
+    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-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(0, 0, 0, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: none;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #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: rgb(0, 0, 0);
+  }
+  .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: 1rem 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: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: 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-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 1rem 1rem;
+  }
+  .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:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .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.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    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-item-content {
+    padding: 1rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #757575;
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #3F51B5;
+    background: #3F51B5;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #3F51B5;
+    background: #3F51B5;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #b00020;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.5rem 1rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.5rem 1rem;
+    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-focus {
+    background: rgba(0, 0, 0, 0.24);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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.5rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: 1px solid #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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 2rem;
+  }
+  .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:focus, .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: 1rem;
+    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: 2rem;
+    margin-right: -2rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 1rem;
+    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: 1rem 1rem;
+    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:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 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.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .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: 1rem 1rem;
+    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: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #b00020;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-highlight .p-inputswitch-slider {
+    background: rgba(63, 81, 181, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #3F51B5;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(0, 0, 0, 0.38);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(63, 81, 181, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #b00020;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: #ffffff;
+    padding: 1rem 1rem;
+    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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.875rem 0.875rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-float-label > label {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #b00020;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 3rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 3rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 3rem;
+  }
+  ::-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.875rem 0.875rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 1.25rem 1.25rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    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);
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 1rem;
+    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: 2rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 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-group {
+    margin: 0;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-listbox.p-invalid {
+    border-color: #b00020;
+  }
+  .p-mention-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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 1rem 1rem;
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 1rem 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);
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.5rem 1rem;
+    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.5rem 1rem;
+  }
+  .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: 1rem;
+    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: 2rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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: 1rem 1rem;
+    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:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 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.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+    background: #ffffff;
+    font-weight: 400;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #b00020;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #757575;
+    border-radius: 50%;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #3F51B5;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #3F51B5;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #3F51B5;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #3F51B5;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #b00020;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #3F51B5;
+    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: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #b00020;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #3F51B5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #3F51B5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    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-treeselect {
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 2rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 1rem 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);
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.5rem 1rem;
+    margin-right: 0.5rem;
+    background: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(0, 0, 0, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(0, 0, 0, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #b00020;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.5rem 1rem;
+  }
+  .p-treeselect-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-treeselect-panel .p-treeselect-header {
+    padding: 1rem;
+    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-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 4rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f5f5f5;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .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-highlight .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f6f6f6;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #b00020;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #3F51B5;
+    border: 0 none;
+    padding: 0.714rem 1rem;
+    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:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .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:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):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-label {
+    transition-duration: 0.2s;
+  }
+  .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: 3rem;
+    padding: 0.714rem;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #ff4081;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.92);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212121;
+    border: 1px solid #212121;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #424242;
+    color: #ffffff;
+    border-color: #424242;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #616161;
+    color: #ffffff;
+    border-color: #616161;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-link {
+    color: #3F51B5;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.62475rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.8925rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ff4081;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #ff4081;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 64, 129, 0.92);
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-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-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: 1rem 1rem;
+    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: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    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: 1rem 1rem;
+    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):not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):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:not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: 2.5rem;
+    height: 2.5rem;
+    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-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .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-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):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-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #3F51B5;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #3F51B5;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(63, 81, 181, 0.16);
+  }
+  .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: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 0 none;
+    padding: 1rem 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: 1rem 1rem;
+    font-weight: 500;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 0 none;
+    padding: 1rem 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-clear-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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: 1rem 1rem;
+    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-visible {
+    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: 1rem;
+    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: 1rem;
+    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: 1rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .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: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 1rem 1rem;
+    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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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: 1rem;
+  }
+  .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-visible {
+    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.5rem 1rem;
+    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: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .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: 1rem;
+  }
+  .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: 1rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 2rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 1rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 1rem 1rem;
+    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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e0e0e0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.25rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    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.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-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    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: 2rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 1rem;
+    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-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(50, 65, 145, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: 1rem 1rem;
+    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: 1rem 1rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    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: 1rem 1rem;
+    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;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e4e4e4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .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-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .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-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .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-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #3F51B5;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #3F51B5;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.5rem;
+    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-visible {
+    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: 1rem 1.5rem;
+    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-header:not(.p-highlight) .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: 1rem;
+  }
+  .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: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 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: 1rem;
+    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: 1rem;
+    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-visible {
+    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: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .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 1.25rem;
+    padding: 1.25rem 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: 1rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    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: 1rem 1rem;
+    border: 1px solid #e0e0e0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border-top: 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 .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 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: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: #3F51B5;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #3F51B5;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    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: 1rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .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.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.5rem 1rem 1.5rem;
+  }
+  .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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 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.5rem;
+    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: 2.5rem;
+    height: 2.5rem;
+    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-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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .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.5rem 1.5rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1.5rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .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: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #3F51B5;
+    color: #ffffff;
+    width: 2.5rem;
+    height: 2.5rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1.25rem;
+    right: -1.25rem;
+  }
+  .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: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    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-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .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: 1rem;
+    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;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .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: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem-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-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 1rem;
+    background: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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-submenu-header {
+    margin: 0;
+    padding: 1rem;
+    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-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .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 > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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: 1rem;
+    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: 1rem;
+    background: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .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-content .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:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: 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-menuitem-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-menubar-mobile .p-menubar-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    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-mobile .p-menubar-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 3rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 7rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 9rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 11rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2.5rem;
+      height: 2.5rem;
+      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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(0, 0, 0, 0.87);
+      padding: 1rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .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-content .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-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .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-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .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: 3rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 7rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 9rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 11rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    background: #ffffff;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1.5rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f6f6f6;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #ffffff;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: 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);
+    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-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .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-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 1rem 1rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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-visible {
+    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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.6);
+    padding: 1rem 1.5rem;
+    font-weight: 500;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 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: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    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-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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .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-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-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-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 1rem 1rem;
+    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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 4px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.5rem;
+  }
+  .p-message .p-message-close {
+    width: 2.5rem;
+    height: 2.5rem;
+    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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+    border-radius: 16px;
+    padding: 0 1rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-left: -1rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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.5rem;
+    color: #ffffff;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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-metergroup .p-metergroup-meter-container {
+    background: rgba(63, 81, 181, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #3F51B5;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #3F51B5;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .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: #ffffff;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e0e0e0;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .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-tag {
+    background: #3F51B5;
+    color: #ffffff;
+    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;
+  }
+}
+@layer primereact {
+  .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-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(63, 81, 181, 0.76);
+  }
+  .p-button:not(:disabled):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:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):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.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .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:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(255, 64, 129, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(255, 64, 129, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):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-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(255, 64, 129, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):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-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(33, 150, 243, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):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-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(104, 159, 56, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):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-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(251, 192, 45, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):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-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(211, 47, 47, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(33, 33, 33, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(33, 33, 33, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(33, 33, 33, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(33, 33, 33, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(33, 33, 33, 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 .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: #757575;
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #3F51B5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input: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-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #3F51B5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #3F51B5;
+  }
+  .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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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):has(.p-inputswitch-input: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:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .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:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .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:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .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-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(63, 81, 181, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(63, 81, 181, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-multiselect .p-multiselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .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-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: #f6f6f6;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #3F51B5;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(3rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+    border-color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(255, 64, 129, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #3F51B5;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-tieredmenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect: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-treeselect-item .p-ink {
+    background-color: rgba(63, 81, 181, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    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-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect: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-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect: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-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.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-treeselect.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-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 li.p-highlight .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:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/mdc-dark-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
new file mode 100644
index 0000000000..643cdf71cb
--- /dev/null
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: hsla(0, 0%, 100%, 0.04);
+  --surface-d: hsla(0, 0%, 100%, 0.12);
+  --surface-e: #1e1e1e;
+  --surface-f: #262626;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #CE93D8;
+  --primary-color-text: #121212;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #262626;
+  --surface-border: hsla(0, 0%, 100%, 0.12);
+  --surface-hover: hsla(0, 0%, 100%, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(206, 147, 216, 0.16);
+  --highlight-text-color: #CE93D8;
+  color-scheme: dark;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#fdfafd;
+  --primary-100:#f3e5f6;
+  --primary-200:#ead1ee;
+  --primary-300:#e1bce7;
+  --primary-400:#d7a8df;
+  --primary-500:#ce93d8;
+  --primary-600:#af7db8;
+  --primary-700:#906797;
+  --primary-800:#715177;
+  --primary-900:#523b56;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #2b2b2b;
+  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(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: hsla(0, 0%, 100%, 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 rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #CE93D8;
+}
+.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: #CE93D8;
+}
+.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: #CE93D8;
+}
+.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: #CE93D8;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: #f44435;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border-radius: 4px;
+  }
+  .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: #f44435;
+  }
+  .p-autocomplete-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #2b2b2b;
+    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: #2b2b2b;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 500;
+    margin: 0;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    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 .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #CE93D8;
+  }
+  .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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.75rem 0;
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid hsla(0, 0%, 100%, 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 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-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-cascadeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .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-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #CE93D8;
+    background: #CE93D8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #CE93D8;
+    background: #CE93D8;
+    color: #121212;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44435;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #CE93D8;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: hsla(0, 0%, 100%, 0.24);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #2b2b2b;
+    border: 1px solid #1e1e1e;
+  }
+  .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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-dropdown.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-dropdown-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+    padding: 0.75rem 0.75rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+  }
+  .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: #f44435;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #bdbdbd;
+    width: 1.5rem;
+    height: 1.5rem;
+    left: -1px;
+    margin-top: -0.75rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: rgba(206, 147, 216, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #CE93D8;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(206, 147, 216, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44435;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44435;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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);
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 0.75rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44435;
+  }
+  .p-mention-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 0.75rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-multiselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .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(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-password-panel {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(206, 147, 216, 0.32);
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ef9a9a;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #fff59d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #CE93D8;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #CE93D8;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #CE93D8;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #CE93D8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44435;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #CE93D8;
+    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-item .p-rating-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #CE93D8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #CE93D8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-selectbutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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: #CE93D8;
+    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: #CE93D8;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #CE93D8;
+    border-color: 0 none;
+  }
+  .p-treeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-treeselect .p-treeselect-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-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #CE93D8;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-button {
+    color: #121212;
+    background: #CE93D8;
+    border: 0 none;
+    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:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #CE93D8;
+    background-color: #121212;
+  }
+  .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.499625rem 0.65625rem;
+  }
+  .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-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.25rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #A5D6A7;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212121;
+    background: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212121;
+    background: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212121;
+    background: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #212121;
+    background: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212121;
+    background: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #121212;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d0d0d0;
+    color: #121212;
+    border-color: #d0d0d0;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #b8b8b8;
+    color: #121212;
+    border-color: #b8b8b8;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #CE93D8;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #CE93D8;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.499625rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.71375rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #A5D6A7;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #A5D6A7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(165, 214, 167, 0.04);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+    border-color: transparent;
+    color: #A5D6A7;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #A5D6A7;
+    color: #212121;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(165, 214, 167, 0.92);
+    color: #212121;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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 #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(206, 147, 216, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(206, 147, 216, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #CE93D8;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #CE93D8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #CE93D8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .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-datatable-drag-selection-helper {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0.75rem;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0.75rem;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 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(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-overlay {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    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 hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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 hsla(0, 0%, 100%, 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;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(157, 62, 173, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: solid #404040;
+    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(255, 255, 255, 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(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(206, 147, 216, 0.16);
+    border-color: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.25rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.25rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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: #CE93D8;
+  }
+  .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: #CE93D8;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(182, 94, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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 #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: transparent;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #CE93D8;
+    background: rgba(206, 147, 216, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #CE93D8;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #CE93D8;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #CE93D8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .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-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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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-visible {
+    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: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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 rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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(255, 255, 255, 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.75rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #CE93D8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(255, 255, 255, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 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 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #CE93D8;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: transparent;
+    color: #CE93D8;
+    width: 2.25rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-panels {
+    background: transparent;
+    padding: 0.75rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #262626;
+    color: rgba(255, 255, 255, 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(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 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: #262626;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.25rem 1.25rem 1.25rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #262626;
+    color: rgba(255, 255, 255, 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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #262626;
+    color: rgba(255, 255, 255, 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: #CE93D8;
+    color: #121212;
+    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(206, 147, 216, 0.92);
+    color: #121212;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-sidebar {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    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-header {
+    padding: 0.75rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.75rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #444444;
+    color: rgba(255, 255, 255, 0.87);
+    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: #444444;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #444444;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #444444;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #444444;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    padding: 0.75rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-submenu-header {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu.p-menu-overlay {
+    background: #2b2b2b;
+    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(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+      background: rgba(255, 255, 255, 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: #2b2b2b;
+      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 hsla(0, 0%, 100%, 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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 0.75rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: hsla(0, 0%, 100%, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 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 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #CE93D8;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #2b2b2b;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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: 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%;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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.3);
+  }
+  .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(206, 147, 216, 0.16);
+    color: #CE93D8;
+  }
+  .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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: hsla(0, 0%, 100%, 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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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: #A5D6A7;
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(165, 214, 167, 0.92);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #121212;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #CE93D8;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(206, 147, 216, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #CE93D8;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #CE93D8;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 4px;
+    background: rgba(206, 147, 216, 0.32);
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #CE93D8;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #121212;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #CE93D8;
+    color: #121212;
+    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: #A5D6A7;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-badge.p-badge-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .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-tag {
+    background: #CE93D8;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+}
+@layer primereact {
+  .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: rgba(255, 255, 255, 0.04);
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-autocomplete.p-invalid > .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.76);
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+  }
+  .p-button .p-ink {
+    background-color: rgba(255, 255, 255, 0.32);
+  }
+  .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button:disabled {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    opacity: 1;
+  }
+  .p-button:disabled.p-button-text {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button:disabled.p-button-outlined {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button.p-button-raised:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(165, 214, 167, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(165, 214, 167, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+  }
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(165, 214, 167, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(255, 255, 255, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(255, 255, 255, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(255, 255, 255, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(255, 255, 255, 0.16);
+  }
+  .p-calendar-w-btn {
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    background: #1e1e1e;
+    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(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.12);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .p-calendar-w-btn:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+    border-color: #CE93D8;
+    box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.38);
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38);
+  }
+  .p-datepicker table td.p-datepicker-today.p-highlight {
+    box-shadow: 0 0 0 1px rgba(206, 147, 216, 0.16);
+  }
+  .p-calendar.p-invalid .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-calendar.p-invalid.p-calendar-w-btn {
+    border-color: #f44435;
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-calendar-w-btn {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: #A5D6A7;
+    color: #121212;
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-cascadeselect-item-content .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-input-filled .p-cascadeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-cascadeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-checkbox {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-checkbox .p-checkbox-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #CE93D8;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  @keyframes checkbox-check {
+    0% {
+      width: 0;
+      height: 0;
+      border-color: #121212;
+      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: #121212;
+      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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-input-filled .p-chips-multiple-container {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-datatable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-datatable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #CE93D8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #CE93D8;
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-dropdown-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-input-filled .p-dropdown {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-dropdown.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-dropdown.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #A5D6A7;
+    color: #121212;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(165, 214, 167, 0.68);
+    color: #121212;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-inputtext:enabled:focus.p-invalid {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputtext {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputtext.p-invalid.p-component:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before {
+    box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-fieldset .p-fieldset-legend {
+    border: 0 none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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: #1e1e1e;
+    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: #CE93D8;
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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 #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-input-filled .p-multiselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-multiselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-multiselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #CE93D8;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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(165, 214, 167, 0.2);
+  }
+  .p-slider.p-slider-sliding .p-slider-handle {
+    transform: scale(1);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(2.25rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(165, 214, 167, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(165, 214, 167, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #CE93D8;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background-color: #CE93D8;
+    color: #121212;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 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(206, 147, 216, 0.16);
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus {
+    background-color: rgba(206, 147, 216, 0.12);
+  }
+  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #CE93D8;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-tieredmenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(206, 147, 216, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8;
+  }
+  .p-treeselect-item .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+  }
+  .p-input-filled .p-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #CE93D8, #CE93D8), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    border-color: transparent;
+    background-size: 100% 2px, 100% 1px;
+  }
+  .p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-treeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-treetable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-treetable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 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(206, 147, 216, 0.16);
+  }
+  .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
+    background-color: rgba(206, 147, 216, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus {
+    background-color: rgba(206, 147, 216, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #CE93D8;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/mdc-dark-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
new file mode 100644
index 0000000000..479e24f613
--- /dev/null
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #1e1e1e;
+  --surface-b: #121212;
+  --surface-c: hsla(0, 0%, 100%, 0.04);
+  --surface-d: hsla(0, 0%, 100%, 0.12);
+  --surface-e: #1e1e1e;
+  --surface-f: #262626;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #9FA8DA;
+  --primary-color-text: #121212;
+  --surface-0: #121212;
+  --surface-50: #2a2a2a;
+  --surface-100: #414141;
+  --surface-200: #595959;
+  --surface-300: #717171;
+  --surface-400: #898989;
+  --surface-500: #a0a0a0;
+  --surface-600: #b8b8b8;
+  --surface-700: #d0d0d0;
+  --surface-800: #e7e7e7;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e7;
+  --gray-100: #d0d0d0;
+  --gray-200: #b8b8b8;
+  --gray-300: #a0a0a0;
+  --gray-400: #898989;
+  --gray-500: #717171;
+  --gray-600: #595959;
+  --gray-700: #414141;
+  --gray-800: #2a2a2a;
+  --gray-900: #121212;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #121212;
+  --surface-section: #121212;
+  --surface-card: #1e1e1e;
+  --surface-overlay: #262626;
+  --surface-border: hsla(0, 0%, 100%, 0.12);
+  --surface-hover: hsla(0, 0%, 100%, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(159, 168, 218, 0.16);
+  --highlight-text-color: #9FA8DA;
+  color-scheme: dark;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#fafbfd;
+  --primary-100:#e8eaf6;
+  --primary-200:#d6daef;
+  --primary-300:#c3c9e8;
+  --primary-400:#b1b9e1;
+  --primary-500:#9fa8da;
+  --primary-600:#878fb9;
+  --primary-700:#6f7699;
+  --primary-800:#575c78;
+  --primary-900:#404357;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1e1e1e;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #2b2b2b;
+  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(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: hsla(0, 0%, 100%, 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 rgba(255, 255, 255, 0.12);
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #1e1e1e;
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #9FA8DA;
+}
+.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: #9FA8DA;
+}
+.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: #9FA8DA;
+}
+.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: #9FA8DA;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: #f44435;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border-radius: 4px;
+  }
+  .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: #f44435;
+  }
+  .p-autocomplete-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #2b2b2b;
+    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: #2b2b2b;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    font-weight: 500;
+    margin: 0;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    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 .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #9FA8DA;
+  }
+  .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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.75rem 0;
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid hsla(0, 0%, 100%, 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 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-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-cascadeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .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-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 18px;
+    height: 18px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #9FA8DA;
+    background: #9FA8DA;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #9FA8DA;
+    background: #9FA8DA;
+    color: #121212;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44435;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9FA8DA;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: hsla(0, 0%, 100%, 0.24);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #2b2b2b;
+    border: 1px solid #1e1e1e;
+  }
+  .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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-dropdown.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-dropdown-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
+    padding: 0.75rem 0.75rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
+  }
+  .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: #f44435;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #bdbdbd;
+    width: 1.5rem;
+    height: 1.5rem;
+    left: -1px;
+    margin-top: -0.75rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: rgba(159, 168, 218, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #9FA8DA;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(159, 168, 218, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44435;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44435;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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);
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 0.75rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44435;
+  }
+  .p-mention-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 0.75rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-multiselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    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(255, 255, 255, 0.87);
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .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(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44435;
+  }
+  .p-password-panel {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(159, 168, 218, 0.32);
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ef9a9a;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #fff59d;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+    background: #1e1e1e;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #9FA8DA;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #9FA8DA;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #9FA8DA;
+    background: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #9FA8DA;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44435;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #121212;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #9FA8DA;
+    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-item .p-rating-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #9FA8DA;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #9FA8DA;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f44435;
+  }
+  .p-selectbutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-slider {
+    background: hsla(0, 0%, 100%, 0.3);
+    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: #9FA8DA;
+    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: #9FA8DA;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #9FA8DA;
+    border-color: 0 none;
+  }
+  .p-treeselect {
+    background: #1e1e1e;
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-treeselect .p-treeselect-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-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44435;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: hsla(0, 0%, 100%, 0.06);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: hsla(0, 0%, 100%, 0.1);
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #2f2f2f;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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);
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #373737;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #9FA8DA;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44435;
+  }
+  .p-button {
+    color: #121212;
+    background: #9FA8DA;
+    border: 0 none;
+    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:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #9FA8DA;
+    background-color: #121212;
+  }
+  .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.499625rem 0.65625rem;
+  }
+  .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-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.25rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #121212;
+    background: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.92);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.68);
+    color: #121212;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #F48FB1;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #212121;
+    background: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #212121;
+    background: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212121;
+    background: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #212121;
+    background: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #212121;
+    background: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.92);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #121212;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d0d0d0;
+    color: #121212;
+    border-color: #d0d0d0;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #b8b8b8;
+    color: #121212;
+    border-color: #b8b8b8;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #9FA8DA;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9FA8DA;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(159, 168, 218, 0.04);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.499625rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.71375rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #F48FB1;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #F48FB1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #F48FB1;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #90caf9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(144, 202, 249, 0.04);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+    border-color: transparent;
+    color: #90caf9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fff59d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 245, 157, 0.04);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+    border-color: transparent;
+    color: #fff59d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef9a9a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 154, 154, 0.04);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+    border-color: transparent;
+    color: #ef9a9a;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #F48FB1;
+    color: #212121;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(244, 143, 177, 0.92);
+    color: #212121;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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 #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(159, 168, 218, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(159, 168, 218, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #9FA8DA;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1e1e1e;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #9FA8DA;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #9FA8DA;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .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-datatable-drag-selection-helper {
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0.75rem;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0.75rem;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 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(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-column-filter-overlay {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    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 hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem;
+    border-bottom: 1px solid hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #2b2b2b;
+    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 hsla(0, 0%, 100%, 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;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(69, 86, 180, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-paginator {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: solid #404040;
+    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(255, 255, 255, 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(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(159, 168, 218, 0.16);
+    border-color: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    font-weight: 500;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.25rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.25rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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: #9FA8DA;
+  }
+  .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: #9FA8DA;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: hsla(0, 0%, 100%, 0.04);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(105, 119, 197, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 0.75rem;
+    font-weight: 500;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #404040;
+    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 #404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid 3404040;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: transparent;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #9FA8DA;
+    background: rgba(159, 168, 218, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #404040;
+    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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #9FA8DA;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #9FA8DA;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1e1e1e;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #222222;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #9FA8DA;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #222222;
+  }
+  .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-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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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-visible {
+    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: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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 rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    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(255, 255, 255, 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.75rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1e1e1e;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px hsla(0, 0%, 100%, 0.12);
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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 rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: #1e1e1e;
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: hsla(0, 0%, 100%, 0.04);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper .p-stepper-panels {
+    background: transparent;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9FA8DA;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(255, 255, 255, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 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 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: rgba(159, 168, 218, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #9FA8DA;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: transparent;
+    color: #9FA8DA;
+    width: 2.25rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-panels {
+    background: transparent;
+    padding: 0.75rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #262626;
+    color: rgba(255, 255, 255, 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(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 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: #262626;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.25rem 1.25rem 1.25rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #262626;
+    color: rgba(255, 255, 255, 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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #262626;
+    color: rgba(255, 255, 255, 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: #9FA8DA;
+    color: #121212;
+    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(159, 168, 218, 0.92);
+    color: #121212;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #262626;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(38, 38, 38, 0);
+    border-bottom-color: #242424;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #262626;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #262626;
+  }
+  .p-sidebar {
+    background: #262626;
+    color: rgba(255, 255, 255, 0.87);
+    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-header {
+    padding: 0.75rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.75rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #444444;
+    color: rgba(255, 255, 255, 0.87);
+    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: #444444;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #444444;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #444444;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #444444;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1e1e1e;
+    padding: 0.75rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1e1e1e;
+    padding: 2rem 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 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-breadcrumb {
+    background: #1e1e1e;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    padding: 0.75rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #2b2b2b;
+    color: rgba(255, 255, 255, 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-submenu-header {
+    margin: 0;
+    padding: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu.p-menu-overlay {
+    background: #2b2b2b;
+    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(255, 255, 255, 0.6);
+    background: transparent;
+    font-weight: 400;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar {
+    padding: 0.75rem;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+      background: rgba(255, 255, 255, 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: #2b2b2b;
+      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 hsla(0, 0%, 100%, 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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 0.75rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: hsla(0, 0%, 100%, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1e1e1e;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1e1e1e;
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0;
+    border: 0 none;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 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-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 0.75rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: solid rgba(255, 255, 255, 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: solid rgba(255, 255, 255, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+    background: transparent;
+    color: rgba(255, 255, 255, 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 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: rgba(159, 168, 218, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.12);
+    color: #9FA8DA;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0;
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #2b2b2b;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: hsla(0, 0%, 100%, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid hsla(0, 0%, 100%, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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: 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%;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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: rgba(255, 255, 255, 0.3);
+    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: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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.3);
+  }
+  .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(159, 168, 218, 0.16);
+    color: #9FA8DA;
+  }
+  .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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: hsla(0, 0%, 100%, 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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1e1e1e;
+  }
+  .p-chip {
+    background-color: hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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: #F48FB1;
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(244, 143, 177, 0.92);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #121212;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 4px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #9FA8DA;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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(255, 255, 255, 0.04);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: rgba(159, 168, 218, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #9FA8DA;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #9FA8DA;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 4px;
+    background: rgba(159, 168, 218, 0.32);
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #9FA8DA;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #121212;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #1e1e1e;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 0.75rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #9FA8DA;
+    color: #121212;
+    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: #F48FB1;
+    color: #121212;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-badge.p-badge-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+  .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-tag {
+    background: #9FA8DA;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #212121;
+  }
+  .p-tag.p-tag-info {
+    background-color: #90caf9;
+    color: #212121;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fff59d;
+    color: #212121;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef9a9a;
+    color: #212121;
+  }
+}
+@layer primereact {
+  .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: rgba(255, 255, 255, 0.04);
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-autocomplete.p-invalid > .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-autocomplete.p-invalid > .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(159, 168, 218, 0.76);
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.68);
+  }
+  .p-button .p-ink {
+    background-color: rgba(255, 255, 255, 0.32);
+  }
+  .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(159, 168, 218, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-button.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button:disabled {
+    background-color: rgba(255, 255, 255, 0.12) !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    opacity: 1;
+  }
+  .p-button:disabled.p-button-text {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button:disabled.p-button-outlined {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-button.p-button-raised:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(244, 143, 177, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(244, 143, 177, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+  }
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(244, 143, 177, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-info.p-button-text .p-ink, .p-button.p-button-info.p-button-outlined .p-ink, .p-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(144, 202, 249, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-success.p-button-text .p-ink, .p-button.p-button-success.p-button-outlined .p-ink, .p-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(197, 225, 165, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-warning.p-button-text .p-ink, .p-button.p-button-warning.p-button-outlined .p-ink, .p-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(255, 245, 157, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(206, 147, 216, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-danger.p-button-text .p-ink, .p-button.p-button-danger.p-button-outlined .p-ink, .p-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(239, 154, 154, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(255, 255, 255, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(255, 255, 255, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(255, 255, 255, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(255, 255, 255, 0.16);
+  }
+  .p-calendar-w-btn {
+    border: 1px solid hsla(0, 0%, 100%, 0.3);
+    background: #1e1e1e;
+    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(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:enabled:hover {
+    background: rgba(255, 255, 255, 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(255, 255, 255, 0.12);
+  }
+  .p-calendar-w-btn .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .p-calendar-w-btn:not(.p-disabled):hover {
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-calendar-w-btn:not(.p-disabled).p-inputwrapper-focus {
+    border-color: #9FA8DA;
+    box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .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 hsla(0, 0%, 100%, 0.12);
+    color: rgba(255, 255, 255, 0.38);
+    font-weight: 400;
+    font-size: 0.875rem;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.38);
+  }
+  .p-datepicker table td.p-datepicker-today.p-highlight {
+    box-shadow: 0 0 0 1px rgba(159, 168, 218, 0.16);
+  }
+  .p-calendar.p-invalid .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-calendar.p-invalid.p-calendar-w-btn {
+    border-color: #f44435;
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-calendar-w-btn {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-calendar.p-invalid.p-calendar-w-btn:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: #F48FB1;
+    color: #121212;
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-cascadeselect-item-content .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-input-filled .p-cascadeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-cascadeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-cascadeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-cascadeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-checkbox {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-checkbox .p-checkbox-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: hsla(0, 0%, 100%, 0.7);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #9FA8DA;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #1e1e1e;
+  }
+  @keyframes checkbox-check {
+    0% {
+      width: 0;
+      height: 0;
+      border-color: #121212;
+      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: #121212;
+      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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-input-filled .p-chips-multiple-container {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-chips.p-invalid .p-chips-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-datatable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-datatable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #9FA8DA;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #9FA8DA;
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-dropdown-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-input-filled .p-dropdown {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-dropdown.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-dropdown.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #F48FB1;
+    color: #121212;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(244, 143, 177, 0.68);
+    color: #121212;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-inputtext:enabled:focus.p-invalid {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputtext {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputtext.p-invalid.p-component:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-inputnumber.p-invalid .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider:before {
+    box-shadow: 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12), 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12), 0px 3px 1px -2px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.14), 0px 1px 5px 0px rgba(255, 255, 255, 0.12);
+  }
+  .p-fieldset .p-fieldset-legend {
+    border: 0 none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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: #1e1e1e;
+    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: #9FA8DA;
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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 #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-input-filled .p-multiselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    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: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 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: hsla(0, 0%, 100%, 0.1);
+    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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-multiselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-multiselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-password.p-invalid > .p-inputtext:enabled:hover {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .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 #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(255, 255, 255, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid hsla(0, 0%, 100%, 0.7);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #9FA8DA;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #1e1e1e;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #1e1e1e;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(159, 168, 218, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(244, 68, 53, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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(244, 143, 177, 0.2);
+  }
+  .p-slider.p-slider-sliding .p-slider-handle {
+    transform: scale(1);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(159, 168, 218, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(159, 168, 218, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(2.25rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(255, 255, 255, 0.38) !important;
+    border-color: rgba(255, 255, 255, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(244, 143, 177, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(144, 202, 249, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(144, 202, 249, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(197, 225, 165, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(255, 245, 157, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 245, 157, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(206, 147, 216, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(239, 154, 154, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 154, 154, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background-color: #9FA8DA;
+    color: #121212;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 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(159, 168, 218, 0.16);
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus {
+    background-color: rgba(159, 168, 218, 0.12);
+  }
+  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #9FA8DA;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-tieredmenu .p-menuitem-link:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(255, 255, 255, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(159, 168, 218, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA;
+  }
+  .p-treeselect-item .p-ink {
+    background-color: rgba(159, 168, 218, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: hsla(0, 0%, 100%, 0.06) no-repeat;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0.3));
+    background-size: 0 2px, 100% 1px;
+    background-position: 50% 100%, 50% 100%;
+    background-origin: border-box;
+  }
+  .p-input-filled .p-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: hsla(0, 0%, 100%, 0.08);
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #9FA8DA, #9FA8DA), linear-gradient(to bottom, rgba(255, 255, 255, 0.87), rgba(255, 255, 255, 0.87));
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-color: hsla(0, 0%, 100%, 0.1);
+    border-color: transparent;
+    background-size: 100% 2px, 100% 1px;
+  }
+  .p-input-filled .p-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-inputwrapper-focus {
+    box-shadow: none;
+    background-image: linear-gradient(to bottom, #f44435, #f44435), linear-gradient(to bottom, #f44435, #f44435);
+  }
+  .p-treeselect.p-invalid:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435, inset 0 0 0 1px #f44435;
+  }
+  .p-treetable .p-sortable-column {
+    outline: 0 none;
+  }
+  .p-treetable .p-sortable-column:focus {
+    background-color: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    outline: 0 none;
+  }
+  .p-treetable .p-treetable-tbody > tr:not(.p-highlight):focus {
+    background-color: rgba(255, 255, 255, 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(159, 168, 218, 0.16);
+  }
+  .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
+    background-color: rgba(159, 168, 218, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus {
+    background-color: rgba(159, 168, 218, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #9FA8DA;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #1c1c1c;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #262626;
+    border-color: rgba(255, 255, 255, 0.12);
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/mdc-light-deeppurple/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
new file mode 100644
index 0000000000..aab5492f2e
--- /dev/null
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #ffffff;
+  --surface-b: #fafafa;
+  --surface-c: rgba(0, 0, 0, 0.04);
+  --surface-d: rgba(0, 0, 0, 0.12);
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: rgba(0, 0, 0, 0.87);
+  --text-color-secondary: rgba(0, 0, 0, 0.6);
+  --primary-color: #673AB7;
+  --primary-color-text: #ffffff;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #fafafa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: rgba(0, 0, 0, 0.12);
+  --surface-hover: rgba(0, 0, 0, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(103, 58, 183, 0.12);
+  --highlight-text-color: #673AB7;
+  color-scheme: light;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#f7f5fb;
+  --primary-100:#dbd0ee;
+  --primary-200:#beaae0;
+  --primary-300:#a185d2;
+  --primary-400:#845fc5;
+  --primary-500:#673ab7;
+  --primary-600:#58319c;
+  --primary-700:#482980;
+  --primary-800:#392065;
+  --primary-900:#291749;
+}
+
+.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: #673AB7;
+}
+.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: #673AB7;
+}
+.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: #673AB7;
+}
+.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: #673AB7;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .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: #673AB7;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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(103, 58, 183, 0.12);
+    color: #673AB7;
+    border-radius: 4px;
+  }
+  .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: #673AB7;
+    background: rgba(103, 58, 183, 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-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .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-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    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 .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(0, 0, 0, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #673AB7;
+  }
+  .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: #673AB7;
+    background: rgba(103, 58, 183, 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: rgb(0, 0, 0);
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 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-visible {
+    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: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: 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-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .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:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    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-item-content {
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #757575;
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #673AB7;
+    background: #673AB7;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #673AB7;
+    background: #673AB7;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #b00020;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #673AB7;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .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-focus {
+    background: rgba(0, 0, 0, 0.24);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: 1px solid #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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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:focus, .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;
+    margin-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:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .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-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 {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-highlight .p-inputswitch-slider {
+    background: rgba(103, 58, 183, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #673AB7;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(0, 0, 0, 0.38);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(103, 58, 183, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #b00020;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #b00020;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .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-float-label > .p-invalid + label {
+    color: #b00020;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    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);
+    outline-color: transparent;
+  }
+  .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;
+    outline: 0 none;
+  }
+  .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:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .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.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-listbox.p-invalid {
+    border-color: #b00020;
+  }
+  .p-mention-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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-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-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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: #673AB7;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .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-visible {
+    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:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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-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(103, 58, 183, 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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #757575;
+    border-radius: 50%;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #673AB7;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #673AB7;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #673AB7;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #673AB7;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #b00020;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #673AB7;
+    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-item .p-rating-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #b00020;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #673AB7;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #673AB7;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    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: #673AB7;
+    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: #673AB7;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #673AB7;
+    border-color: 0 none;
+  }
+  .p-treeselect {
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-treeselect .p-treeselect-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-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-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-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(0, 0, 0, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(0, 0, 0, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #b00020;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-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-treeselect-panel .p-treeselect-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-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-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-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f5f5f5;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .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-highlight .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f6f6f6;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #673AB7;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #b00020;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #673AB7;
+    border: 0 none;
+    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:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #673AB7;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+    border: 0 none;
+  }
+  .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:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):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-label {
+    transition-duration: 0.2s;
+  }
+  .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: #673AB7;
+    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.499625rem 0.65625rem;
+  }
+  .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-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.25rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #4CAF50;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.92);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212121;
+    border: 1px solid #212121;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #424242;
+    color: #ffffff;
+    border-color: #424242;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #616161;
+    color: #ffffff;
+    border-color: #616161;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-link {
+    color: #673AB7;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #673AB7;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(103, 58, 183, 0.04);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+    color: #673AB7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.499625rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.71375rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4CAF50;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4CAF50;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    border-color: transparent;
+    color: #4CAF50;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4CAF50;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(76, 175, 80, 0.92);
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .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;
+  }
+  .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-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):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:not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+  }
+  .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-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(103, 58, 183, 0.12);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(103, 58, 183, 0.12);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #673AB7;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #ffffff;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #673AB7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #673AB7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .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-datatable-drag-selection-helper {
+    background: rgba(103, 58, 183, 0.16);
+  }
+  .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-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-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-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-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 0 none;
+    padding: 0.75rem;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    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-visible {
+    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: #673AB7;
+    background: rgba(103, 58, 183, 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-visible {
+    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;
+  }
+  .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-filter-container {
+    padding: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(49, 27, 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-visible {
+    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: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .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(103, 58, 183, 0.12);
+    border-color: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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-filter-container {
+    padding: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #673AB7;
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .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;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.25rem;
+  }
+  .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-visible {
+    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.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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: #673AB7;
+  }
+  .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: #673AB7;
+  }
+  .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-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    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-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(82, 46, 146, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #673AB7;
+    background: rgba(103, 58, 183, 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;
+  }
+  .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;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #673AB7;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .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-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .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: #673AB7;
+  }
+  .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-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #673AB7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .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-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-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-visible {
+    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-header:not(.p-highlight) .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-visible {
+    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: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .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 1.25rem;
+    padding: 1.25rem 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .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-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 .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #673AB7;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) 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 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: rgba(103, 58, 183, 0.04);
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: #673AB7;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #673AB7;
+    width: 2.25rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 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;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .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-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .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: #673AB7;
+    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(103, 58, 183, 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: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    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-header {
+    padding: 0.75rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-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-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.75rem;
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .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-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    padding: 0.75rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem-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-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .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 {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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-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-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    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-megamenu .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .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 > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .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-content .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:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: 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-menuitem-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-menubar-mobile .p-menubar-button {
+    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-mobile .p-menubar-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(0, 0, 0, 0.87);
+      padding: 0.75rem 0.75rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .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-content .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-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .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-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    background: #ffffff;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1.25rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f6f6f6;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #ffffff;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: 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);
+    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-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .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-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) 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 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: rgba(103, 58, 183, 0.04);
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: #673AB7;
+  }
+  .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-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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .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-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-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-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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(103, 58, 183, 0.12);
+    color: #673AB7;
+  }
+  .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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .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 {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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: #4CAF50;
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(76, 175, 80, 0.92);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #ffffff;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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: #673AB7;
+    color: #ffffff;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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-metergroup .p-metergroup-meter-container {
+    background: rgba(103, 58, 183, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #673AB7;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #673AB7;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 4px;
+    background: rgba(103, 58, 183, 0.32);
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #673AB7;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e0e0e0;
+    padding: 0.75rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #673AB7;
+    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: #4CAF50;
+    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-tag {
+    background: #673AB7;
+    color: #ffffff;
+    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;
+  }
+}
+@layer primereact {
+  .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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(103, 58, 183, 0.76);
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.68);
+  }
+  .p-button .p-ink {
+    background-color: rgba(255, 255, 255, 0.32);
+  }
+  .p-button.p-button-text:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+  }
+  .p-button.p-button-text .p-ink, .p-button.p-button-outlined .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-button.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .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:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(76, 175, 80, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(76, 175, 80, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+  }
+  .p-button.p-button-secondary.p-button-text .p-ink, .p-button.p-button-secondary.p-button-outlined .p-ink, .p-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(76, 175, 80, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):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-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(33, 150, 243, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):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-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(104, 159, 56, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):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-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(251, 192, 45, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):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-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(211, 47, 47, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(33, 33, 33, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(33, 33, 33, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(33, 33, 33, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(33, 33, 33, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(33, 33, 33, 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 .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .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: #673AB7;
+    box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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(103, 58, 183, 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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: #4CAF50;
+    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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-cascadeselect-item-content .p-ink {
+    background-color: rgba(103, 58, 183, 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .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-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: #757575;
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #673AB7;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input: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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #673AB7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #673AB7;
+  }
+  .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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-dropdown-item .p-ink {
+    background-color: rgba(103, 58, 183, 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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: #4CAF50;
+    color: #ffffff;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(76, 175, 80, 0.68);
+    color: #ffffff;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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):has(.p-inputswitch-input: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:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 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:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .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:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .p-inputswitch-slider:before {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 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-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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: #673AB7;
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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 #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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, #673AB7, #673AB7), 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, #673AB7, #673AB7), 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-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: #f6f6f6;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #673AB7;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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(76, 175, 80, 0.2);
+  }
+  .p-slider.p-slider-sliding .p-slider-handle {
+    transform: scale(1);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(103, 58, 183, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(103, 58, 183, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(2.25rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+    border-color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(76, 175, 80, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #673AB7;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background-color: #673AB7;
+    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(103, 58, 183, 0.16);
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:focus {
+    background-color: rgba(103, 58, 183, 0.12);
+  }
+  .p-tabview .p-tabview-nav .p-tabview-ink-bar {
+    z-index: 1;
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #673AB7;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-tieredmenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(103, 58, 183, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7;
+  }
+  .p-treeselect-item .p-ink {
+    background-color: rgba(103, 58, 183, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border: 1px solid transparent;
+    background: #f5f5f5 no-repeat;
+    background-image: linear-gradient(to bottom, #673AB7, #673AB7), 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-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #ececec;
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #673AB7, #673AB7), linear-gradient(to bottom, rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87));
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect: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-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.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-treeselect.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-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(103, 58, 183, 0.16);
+  }
+  .p-tabmenu .p-tabmenu-nav li .p-menuitem-link:focus {
+    background-color: rgba(103, 58, 183, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav li.p-highlight .p-menuitem-link:focus {
+    background-color: rgba(103, 58, 183, 0.12);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenu-ink-bar {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    height: 2px;
+    background-color: #673AB7;
+    transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff
new file mode 100644
index 0000000000..fb70b7e915
Binary files /dev/null and b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff differ
diff --git a/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2
new file mode 100644
index 0000000000..96981bc870
Binary files /dev/null and b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-500.woff2 differ
diff --git a/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..d023f3de32
Binary files /dev/null and b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff differ
diff --git a/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..fd49210352
Binary files /dev/null and b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..f9849dfbee
Binary files /dev/null and b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff differ
diff --git a/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..1f7dd5b890
Binary files /dev/null and b/public/themes/mdc-light-indigo/fonts/roboto-v20-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
new file mode 100644
index 0000000000..22ce3681a5
--- /dev/null
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -0,0 +1,8502 @@
+:root {
+  font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  --font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica,
+  	Arial, "Lucida Grande", sans-serif;
+  --surface-a: #ffffff;
+  --surface-b: #fafafa;
+  --surface-c: rgba(0, 0, 0, 0.04);
+  --surface-d: rgba(0, 0, 0, 0.12);
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: rgba(0, 0, 0, 0.87);
+  --text-color-secondary: rgba(0, 0, 0, 0.6);
+  --primary-color: #3F51B5;
+  --primary-color-text: #ffffff;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #fafafa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: rgba(0, 0, 0, 0.12);
+  --surface-hover: rgba(0, 0, 0, 0.04);
+  --focus-ring: none;
+  --maskbg: rgba(0, 0, 0, 0.32);
+  --highlight-bg: rgba(63, 81, 181, 0.12);
+  --highlight-text-color: #3F51B5;
+  color-scheme: light;
+}
+
+/* roboto-regular - latin-ext_latin */
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Roboto"), local("Roboto-Regular"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-500.woff2") format("woff2"), url("http://github.com/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("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/roboto-v20-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+: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:#fef6f5;
+  --red-100:#fcd2cf;
+  --red-200:#faaea9;
+  --red-300:#f88a82;
+  --red-400:#f6675c;
+  --red-500:#f44336;
+  --red-600:#cf392e;
+  --red-700:#ab2f26;
+  --red-800:#86251e;
+  --red-900:#621b16;
+  --primary-50:#f5f6fb;
+  --primary-100:#d1d5ed;
+  --primary-200:#acb4df;
+  --primary-300:#8893d1;
+  --primary-400:#6372c3;
+  --primary-500:#3f51b5;
+  --primary-600:#36459a;
+  --primary-700:#2c397f;
+  --primary-800:#232d64;
+  --primary-900:#192048;
+}
+
+.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;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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(63, 81, 181, 0.12);
+    color: #3F51B5;
+    border-radius: 4px;
+  }
+  .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-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .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-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    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 .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(0, 0, 0, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 500;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #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: rgb(0, 0, 0);
+  }
+  .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-visible {
+    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-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: 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-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  @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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .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:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .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.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    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-item-content {
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 18px;
+    height: 18px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #757575;
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #3F51B5;
+    background: #3F51B5;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #3F51B5;
+    background: #3F51B5;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #b00020;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f5f5f5;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #ececec;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3F51B5;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .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-focus {
+    background: rgba(0, 0, 0, 0.24);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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: 1px solid #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 {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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:focus, .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;
+    margin-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:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 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.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .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-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 {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2.75rem;
+    height: 1rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 0.5rem;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-highlight .p-inputswitch-slider {
+    background: rgba(63, 81, 181, 0.5);
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #3F51B5;
+    transform: translateX(1.5rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(0, 0, 0, 0.38);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: rgba(63, 81, 181, 0.5);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #b00020;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background-color: #f5f5f5;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #ececec;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #dcdcdc;
+  }
+  .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-float-label > .p-invalid + label {
+    color: #b00020;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    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);
+    outline-color: transparent;
+  }
+  .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;
+    outline: 0 none;
+  }
+  .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:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 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-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.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-listbox.p-invalid {
+    border-color: #b00020;
+  }
+  .p-mention-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-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-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-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .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;
+    outline-color: transparent;
+  }
+  .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-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .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-visible {
+    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:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 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.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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-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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #757575;
+    border-radius: 50%;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #3F51B5;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #3F51B5;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #3F51B5;
+    background: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #3F51B5;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #b00020;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f5f5f5;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #3F51B5;
+    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-item .p-rating-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #b00020;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #3F51B5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #3F51B5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    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-treeselect {
+    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-treeselect:not(.p-disabled):hover {
+    border-color: rgba(0, 0, 0, 0.87);
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f5f5f5;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-treeselect .p-treeselect-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-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-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-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(0, 0, 0, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(0, 0, 0, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #b00020;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-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-treeselect-panel .p-treeselect-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-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-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-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f5f5f5;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #ececec;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #dcdcdc;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+  }
+  .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);
+    outline-color: transparent;
+  }
+  .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-highlight .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f6f6f6;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+    border-color: #3F51B5;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #b00020;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #3F51B5;
+    border: 0 none;
+    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:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .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:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):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-label {
+    transition-duration: 0.2s;
+  }
+  .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.499625rem 0.65625rem;
+  }
+  .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-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.25rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #ff4081;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.92);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.92);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212121;
+    border: 1px solid #212121;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #424242;
+    color: #ffffff;
+    border-color: #424242;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #616161;
+    color: #ffffff;
+    border-color: #616161;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    color: #212121;
+    border: 0 none;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212121;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 33, 33, 0.04);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 33, 33, 0.16);
+    border-color: transparent;
+    color: #212121;
+  }
+  .p-button.p-button-link {
+    color: #3F51B5;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: none;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #3F51B5;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(63, 81, 181, 0.04);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+    color: #3F51B5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(0, 0, 0, 0.16);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.499625rem 0.65625rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.71375rem 0.9375rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ff4081;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ff4081;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 64, 129, 0.04);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+    border-color: transparent;
+    color: #ff4081;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    border-color: transparent;
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 0 none;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #ff4081;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 64, 129, 0.92);
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
+  }
+  .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;
+  }
+  .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-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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):not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):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:not(.p-sortable-disabled):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: none;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+  }
+  .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-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    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 > td.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .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-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):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-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #3F51B5;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #3F51B5;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .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-datatable-drag-selection-helper {
+    background: rgba(63, 81, 181, 0.16);
+  }
+  .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-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-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-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-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 0 none;
+    padding: 0.75rem;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-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-visible {
+    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-visible {
+    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-visible {
+    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;
+  }
+  .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-filter-container {
+    padding: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .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-visible {
+    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: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .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-filter-container {
+    padding: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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;
+    outline: 0 none;
+  }
+  .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.p-focus {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #3F51B5;
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .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;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0.25rem;
+  }
+  .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-visible {
+    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.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-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    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-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(50, 65, 145, 0.12);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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;
+  }
+  .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;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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:focus-visible {
+    outline: 0.15rem solid transparent;
+    outline-offset: -0.15rem;
+  }
+  .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-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .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-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .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-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #3F51B5;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #3F51B5;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: rgba(0, 0, 0, 0.02);
+  }
+  .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-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-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-visible {
+    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-header:not(.p-highlight) .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-visible {
+    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: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .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 1.25rem;
+    padding: 1.25rem 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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .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-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 .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid transparent;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(0, 0, 0, 0.87);
+    font-weight: 500;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(63, 81, 181, 0.12);
+    color: #3F51B5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #bdbdbd;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #3F51B5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) 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 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 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: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    color: #3F51B5;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #3F51B5;
+    width: 2.25rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 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;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .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-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .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: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    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-header {
+    padding: 0.75rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-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-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(0, 0, 0, 0.6);
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.75rem;
+  }
+  .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;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .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-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    padding: 0.75rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list 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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 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);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-contextmenu .p-menuitem-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-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .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 {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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-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-submenu-list {
+    padding: 0.5rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    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-megamenu .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .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 > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .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-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .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-content .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:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: 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-menuitem-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-menubar-mobile .p-menubar-button {
+    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-mobile .p-menubar-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @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-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(0, 0, 0, 0.87);
+      padding: 0.75rem 0.75rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .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-content .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-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .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-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.12);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(0, 0, 0, 0.87);
+      background: rgba(0, 0, 0, 0.04);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(0, 0, 0, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(0, 0, 0, 0.6);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 0 none;
+    color: rgba(0, 0, 0, 0.87);
+    background: #ffffff;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 1.25rem;
+    font-weight: 400;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f6f6f6;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #ffffff;
+    border-color: transparent;
+    color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: 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);
+    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-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .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-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e5e5e5;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 0.75rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .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-visible {
+    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: solid rgba(0, 0, 0, 0.12);
+    border-width: 0 0 1px 0;
+    border-color: transparent transparent rgba(0, 0, 0, 0.12) 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 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 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: rgba(0, 0, 0, 0.12);
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: rgba(0, 0, 0, 0.12);
+    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-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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .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-content {
+    color: rgba(0, 0, 0, 0.87);
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(0, 0, 0, 0.87);
+    padding: 0.75rem 0.75rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(0, 0, 0, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(0, 0, 0, 0.87);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .p-tieredmenu .p-menuitem-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-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 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-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 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;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 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 {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .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 {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    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.5rem;
+    color: #ffffff;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .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;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .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-metergroup .p-metergroup-meter-container {
+    background: rgba(63, 81, 181, 0.32);
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #3F51B5;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 4px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #3F51B5;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .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: #ffffff;
+    line-height: 4px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: rgba(0, 0, 0, 0.87);
+    border: 1px solid #e0e0e0;
+    padding: 0.75rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .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-tag {
+    background: #3F51B5;
+    color: #ffffff;
+    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;
+  }
+}
+@layer primereact {
+  .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-breadcrumb .p-menuitem-link {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-breadcrumb .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-button {
+    font-weight: 500;
+    min-width: 4rem;
+  }
+  .p-button.p-button-icon-only {
+    min-width: auto;
+  }
+  .p-button:not(:disabled):focus {
+    background: rgba(63, 81, 181, 0.76);
+  }
+  .p-button:not(:disabled):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:not(:disabled):focus, .p-button.p-button-outlined:not(:disabled):focus {
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-button.p-button-text:not(:disabled):active, .p-button.p-button-outlined:not(:disabled):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.p-button-outlined {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-button.p-button-outlined:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .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:not(:disabled):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:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    background: rgba(255, 64, 129, 0.76);
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.68);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):focus, .p-button.p-button-secondary.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):focus {
+    background: rgba(255, 64, 129, 0.12);
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):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-button-group.p-button-secondary > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-secondary.p-button-text .p-ink, .p-fileupload-choose.p-button-secondary.p-button-outlined .p-ink {
+    background-color: rgba(255, 64, 129, 0.16);
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.76);
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.68);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):focus, .p-button.p-button-info.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):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-button-group.p-button-info > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-info.p-button-text .p-ink, .p-fileupload-choose.p-button-info.p-button-outlined .p-ink {
+    background-color: rgba(33, 150, 243, 0.16);
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.76);
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.68);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):focus, .p-button.p-button-success.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):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-button-group.p-button-success > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-success.p-button-text .p-ink, .p-fileupload-choose.p-button-success.p-button-outlined .p-ink {
+    background-color: rgba(104, 159, 56, 0.16);
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.76);
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.68);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):focus, .p-button.p-button-warning.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):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-button-group.p-button-warning > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-warning.p-button-text .p-ink, .p-fileupload-choose.p-button-warning.p-button-outlined .p-ink {
+    background-color: rgba(251, 192, 45, 0.16);
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.76);
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.68);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):focus, .p-button.p-button-help.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-help.p-button-text .p-ink, .p-button.p-button-help.p-button-outlined .p-ink, .p-button-group.p-button-help > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-help.p-button-text .p-ink, .p-fileupload-choose.p-button-help.p-button-outlined .p-ink {
+    background-color: rgba(156, 39, 176, 0.16);
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.76);
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.68);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):focus, .p-button.p-button-danger.p-button-outlined:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):focus, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):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-button-group.p-button-danger > .p-button.p-button-text .p-ink, .p-button-group.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, .p-fileupload-choose.p-button-danger.p-button-text .p-ink, .p-fileupload-choose.p-button-danger.p-button-outlined .p-ink {
+    background-color: rgba(211, 47, 47, 0.16);
+  }
+  .p-button.p-button-contrast:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:focus {
+    background: rgba(33, 33, 33, 0.76);
+  }
+  .p-button.p-button-contrast:enabled:active,
+  .p-button-group.p-button-contrast > .p-button:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button:enabled:active {
+    background: rgba(33, 33, 33, 0.68);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:focus, .p-button.p-button-contrast.p-button-outlined:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:focus,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:focus {
+    background: rgba(33, 33, 33, 0.12);
+  }
+  .p-button.p-button-contrast.p-button-text:enabled:active, .p-button.p-button-contrast.p-button-outlined:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text:enabled:active,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:enabled:active {
+    background: rgba(33, 33, 33, 0.16);
+  }
+  .p-button.p-button-contrast.p-button-text .p-ink, .p-button.p-button-contrast.p-button-outlined .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-button-group.p-button-contrast > .p-button.p-button-outlined .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-text .p-ink,
+  .p-splitbutton.p-button-contrast > .p-button.p-button-outlined .p-ink {
+    background-color: rgba(33, 33, 33, 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 .p-datepicker-trigger.p-button:disabled {
+    background-color: transparent !important;
+  }
+  .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-float-label .p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-cascadeselect .p-cascadeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .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-input {
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border-color: #757575;
+    border-radius: 2px;
+    position: relative;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box .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-disabled):has(.p-checkbox-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    border-color: #757575;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+    border-color: #3F51B5;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input: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-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #3F51B5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #3F51B5;
+  }
+  .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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    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,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child,
+  .p-input-filled .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    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):has(.p-inputswitch-input: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:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .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:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .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:not(.p-disabled):has(.p-inputswitch-input:focus-visible).p-highlight .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-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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 .p-listbox-list .p-listbox-item .p-ink {
+    background-color: rgba(63, 81, 181, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-megamenu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menu .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-menubar .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1rem;
+  }
+  .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-panel .p-multiselect-items .p-multiselect-item .p-ink {
+    background-color: rgba(63, 81, 181, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-orderlist .p-orderlist-list .p-orderlist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-paginator {
+    justify-content: flex-end;
+  }
+  .p-paginator .p-paginator-element:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-paginator .p-paginator-element:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .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-panel .p-panel-header-icon:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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 .p-panelmenu-header-link:focus {
+    background: #f6f6f6;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-menuitem .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-progressbar {
+    border-radius: 0;
+  }
+  .p-progressbar .p-progressbar-label {
+    display: none;
+  }
+  .p-radiobutton {
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.04);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
+    box-shadow: 0 0 1px 10px rgba(0, 0, 0, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    border: 2px solid #757575;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight {
+    box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+    border-color: #3F51B5;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled).p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #ffffff;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
+    background-color: #ffffff;
+  }
+  .p-rating {
+    gap: 0;
+  }
+  .p-rating .p-rating-item {
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    justify-content: center;
+  }
+  .p-rating .p-rating-item:focus {
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-rating .p-rating-item:focus.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.12);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover.p-rating-cancel-item {
+    background: rgba(176, 0, 32, 0.04);
+  }
+  .p-selectbutton .p-button:focus {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-selectbutton .p-button:focus.p-highlight {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+  .p-slidemenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-splitbutton.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(63, 81, 181, 0.12);
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(63, 81, 181, 0.16);
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:focus {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:enabled:active {
+    box-shadow: inset 0 0 0 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button.p-splitbutton-menubutton {
+    margin-left: -1px;
+    width: calc(2.25rem + 1px);
+  }
+  .p-splitbutton.p-disabled.p-button-text > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-disabled.p-button-outlined > .p-button {
+    background-color: transparent !important;
+    color: rgba(0, 0, 0, 0.38) !important;
+    border-color: rgba(0, 0, 0, 0.38) !important;
+  }
+  .p-splitbutton.p-button-raised > .p-button:not(:disabled):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-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(255, 64, 129, 0.12);
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 64, 129, 0.16);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(33, 150, 243, 0.12);
+  }
+  .p-splitbutton.p-button-info > .p-button.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(104, 159, 56, 0.12);
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(251, 192, 45, 0.12);
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(156, 39, 176, 0.12);
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):focus {
+    background: rgba(211, 47, 47, 0.12);
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    background-color: #9e9d9e;
+    color: #ffffff;
+    font-size: 0.857rem;
+    min-width: 1.714rem;
+    height: 1.714rem;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-number {
+    background-color: #3F51B5;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-action .p-stepper-title {
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    margin-inline-start: 1.75rem;
+  }
+  .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: 1rem 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-menuitem-link:not(.p-disabled):focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-tieredmenu .p-menuitem-link:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .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-tree .p-tree-container .p-treenode .p-treenode-content:focus {
+    background: rgba(0, 0, 0, 0.12);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content:focus.p-highlight {
+    background: rgba(63, 81, 181, 0.24);
+  }
+  .p-treeselect .p-treeselect-label, .p-treeselect .p-treeselect-trigger {
+    background-image: none;
+    background: transparent;
+  }
+  .p-treeselect .p-treeselect-label {
+    border: 0 none;
+  }
+  .p-treeselect: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-treeselect-item .p-ink {
+    background-color: rgba(63, 81, 181, 0.16);
+  }
+  .p-input-filled .p-treeselect {
+    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-treeselect .p-inputtext {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect: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-treeselect:not(.p-disabled).p-focus, .p-input-filled .p-treeselect: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-treeselect .p-inputtext:enabled:hover, .p-input-filled .p-treeselect .p-inputtext:enabled:focus {
+    background-image: none;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect .p-treeselect-label:hover {
+    background-image: none;
+    background: transparent;
+  }
+  .p-float-label .p-treeselect-label .p-treeselect-token {
+    padding: 0.25rem 1rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect .p-treeselect-label {
+    padding-top: 1.25rem;
+    padding-bottom: 0.25rem;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .p-input-filled .p-float-label .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-token .p-treeselect-token-icon {
+    font-size: 75%;
+  }
+  .p-input-filled .p-treeselect.p-invalid {
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled):hover {
+    background-image: linear-gradient(to bottom, #b00020, #b00020), linear-gradient(to bottom, #b00020, #b00020);
+  }
+  .p-input-filled .p-treeselect.p-invalid:not(.p-disabled).p-focus, .p-input-filled .p-treeselect.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-treeselect.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-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 li.p-highlight .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:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    background: #e0e0e1;
+    border-color: #e0e0e1;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible).p-highlight .p-button {
+    background: #d9d8d9;
+    border-color: #d9d8d9;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/mira/fonts/Inter-Bold.woff b/public/themes/mira/fonts/Inter-Bold.woff
new file mode 100644
index 0000000000..110bb66ceb
Binary files /dev/null and b/public/themes/mira/fonts/Inter-Bold.woff differ
diff --git a/public/themes/mira/fonts/Inter-Bold.woff2 b/public/themes/mira/fonts/Inter-Bold.woff2
new file mode 100644
index 0000000000..2532ddd062
Binary files /dev/null and b/public/themes/mira/fonts/Inter-Bold.woff2 differ
diff --git a/public/themes/mira/fonts/Inter-Medium.woff b/public/themes/mira/fonts/Inter-Medium.woff
new file mode 100644
index 0000000000..1180184628
Binary files /dev/null and b/public/themes/mira/fonts/Inter-Medium.woff differ
diff --git a/public/themes/mira/fonts/Inter-Medium.woff2 b/public/themes/mira/fonts/Inter-Medium.woff2
new file mode 100644
index 0000000000..12454556b6
Binary files /dev/null and b/public/themes/mira/fonts/Inter-Medium.woff2 differ
diff --git a/public/themes/mira/fonts/Inter-Regular.woff b/public/themes/mira/fonts/Inter-Regular.woff
new file mode 100644
index 0000000000..5785a99c43
Binary files /dev/null and b/public/themes/mira/fonts/Inter-Regular.woff differ
diff --git a/public/themes/mira/fonts/Inter-Regular.woff2 b/public/themes/mira/fonts/Inter-Regular.woff2
new file mode 100644
index 0000000000..52c1e3b3ce
Binary files /dev/null and b/public/themes/mira/fonts/Inter-Regular.woff2 differ
diff --git a/public/themes/mira/fonts/Inter-SemiBold.woff b/public/themes/mira/fonts/Inter-SemiBold.woff
new file mode 100644
index 0000000000..6ddf47ec3d
Binary files /dev/null and b/public/themes/mira/fonts/Inter-SemiBold.woff differ
diff --git a/public/themes/mira/fonts/Inter-SemiBold.woff2 b/public/themes/mira/fonts/Inter-SemiBold.woff2
new file mode 100644
index 0000000000..3ba0884fa4
Binary files /dev/null and b/public/themes/mira/fonts/Inter-SemiBold.woff2 differ
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
new file mode 100644
index 0000000000..a0e344aa78
--- /dev/null
+++ b/public/themes/mira/theme.css
@@ -0,0 +1,7178 @@
+:root {
+  font-family: "Inter", sans-serif;
+  --font-family: "Inter", sans-serif;
+  --surface-a: #ffffff;
+  --surface-b: #eceff4;
+  --surface-c: #d8dee9;
+  --surface-d: #e5e9f0;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #4c566a;
+  --text-color-secondary: #81a1c1;
+  --primary-color: #5e81ac;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #edeef0;
+  --surface-100: #dbdde1;
+  --surface-200: #b7bbc3;
+  --surface-300: #949aa6;
+  --surface-400: #707888;
+  --surface-500: #4c566a;
+  --surface-600: #3d4555;
+  --surface-700: #2e3440;
+  --surface-800: #1e222a;
+  --surface-900: #0f1115;
+  --gray-50: #edeef0;
+  --gray-100: #dbdde1;
+  --gray-200: #b7bbc3;
+  --gray-300: #949aa6;
+  --gray-400: #707888;
+  --gray-500: #4c566a;
+  --gray-600: #3d4555;
+  --gray-700: #2e3440;
+  --gray-800: #1e222a;
+  --gray-900: #0f1115;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 4px;
+  --surface-ground: #eceff4;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #e5e9f0;
+  --surface-hover: #d8dee9;
+  --focus-ring: 0 0 0 0.2rem #c0d0e0;
+  --maskbg: rgba(112, 120, 136, 0.5);
+  --highlight-bg: #d8dee9;
+  --highlight-text-color: #2e3440;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Inter"), local("Inter-Regular"), url("http://github.com/fonts/Inter-Regular.woff2") format("woff2"), url("http://github.com/fonts/Inter-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  src: local("Inter Medium"), local("Inter-Medium"), url("http://github.com/fonts/Inter-Medium.woff2") format("woff2"), url("http://github.com/fonts/Inter-Medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: local("Inter SemiBold"), local("Inter-SemiBold"), url("http://github.com/fonts/Inter-SemiBold.woff2") format("woff2"), url("http://github.com/fonts/Inter-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Inter Bold"), local("Inter-Bold"), url("http://github.com/fonts/Inter-Bold.woff2") format("woff2"), url("http://github.com/fonts/Inter-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+:root {
+  --blue-50:#f7f9fb;
+  --blue-100:#d8e1eb;
+  --blue-200:#bac9db;
+  --blue-300:#9bb1cc;
+  --blue-400:#7d99bc;
+  --blue-500:#5e81ac;
+  --blue-600:#506e92;
+  --blue-700:#425a78;
+  --blue-800:#34475f;
+  --blue-900:#263445;
+  --green-50:#f9faf7;
+  --green-100:#e0e9da;
+  --green-200:#c8d7bd;
+  --green-300:#b0c6a0;
+  --green-400:#97b483;
+  --green-500:#7fa366;
+  --green-600:#6c8b57;
+  --green-700:#597247;
+  --green-800:#465a38;
+  --green-900:#334129;
+  --yellow-50:#fdfcf8;
+  --yellow-100:#f6f1df;
+  --yellow-200:#efe6c6;
+  --yellow-300:#e8dbad;
+  --yellow-400:#e1d093;
+  --yellow-500:#dac57a;
+  --yellow-600:#b9a768;
+  --yellow-700:#998a55;
+  --yellow-800:#786c43;
+  --yellow-900:#574f31;
+  --cyan-50:#f8fbfc;
+  --cyan-100:#ddebf0;
+  --cyan-200:#c2dbe5;
+  --cyan-300:#a7cbd9;
+  --cyan-400:#8cbbce;
+  --cyan-500:#71abc2;
+  --cyan-600:#6091a5;
+  --cyan-700:#4f7888;
+  --cyan-800:#3e5e6b;
+  --cyan-900:#2d444e;
+  --pink-50:#fcf7f9;
+  --pink-100:#f0d9e2;
+  --pink-200:#e3bbcb;
+  --pink-300:#d79db3;
+  --pink-400:#cb7f9c;
+  --pink-500:#bf6185;
+  --pink-600:#a25271;
+  --pink-700:#86445d;
+  --pink-800:#693549;
+  --pink-900:#4c2735;
+  --indigo-50:#f6f8fa;
+  --indigo-100:#d5dbe9;
+  --indigo-200:#b3bfd8;
+  --indigo-300:#91a3c7;
+  --indigo-400:#7086b5;
+  --indigo-500:#4e6aa4;
+  --indigo-600:#425a8b;
+  --indigo-700:#374a73;
+  --indigo-800:#2b3a5a;
+  --indigo-900:#1f2a42;
+  --teal-50:#f7fbf9;
+  --teal-100:#d8ebe4;
+  --teal-200:#badbcf;
+  --teal-300:#9bccba;
+  --teal-400:#7dbca5;
+  --teal-500:#5eac90;
+  --teal-600:#50927a;
+  --teal-700:#427865;
+  --teal-800:#345f4f;
+  --teal-900:#26453a;
+  --orange-50:#fdf9f8;
+  --orange-100:#f4e2dd;
+  --orange-200:#ebcbc2;
+  --orange-300:#e2b5a6;
+  --orange-400:#d99e8b;
+  --orange-500:#d08770;
+  --orange-600:#b1735f;
+  --orange-700:#925f4e;
+  --orange-800:#724a3e;
+  --orange-900:#53362d;
+  --bluegray-50:#f9f9fa;
+  --bluegray-100:#e0e4e8;
+  --bluegray-200:#c8ced6;
+  --bluegray-300:#afb8c3;
+  --bluegray-400:#97a3b1;
+  --bluegray-500:#7e8d9f;
+  --bluegray-600:#6b7887;
+  --bluegray-700:#58636f;
+  --bluegray-800:#454e57;
+  --bluegray-900:#323840;
+  --purple-50:#faf7fa;
+  --purple-100:#e7dbe6;
+  --purple-200:#d4bed2;
+  --purple-300:#c0a1be;
+  --purple-400:#ad84aa;
+  --purple-500:#9a6796;
+  --purple-600:#835880;
+  --purple-700:#6c4869;
+  --purple-800:#553953;
+  --purple-900:#3e293c;
+  --red-50:#fcf7f8;
+  --red-100:#f0d9db;
+  --red-200:#e3bbbf;
+  --red-300:#d79da3;
+  --red-400:#cb7f86;
+  --red-500:#bf616a;
+  --red-600:#a2525a;
+  --red-700:#86444a;
+  --red-800:#69353a;
+  --red-900:#4c272a;
+  --primary-50:#f7f9fb;
+  --primary-100:#d8e1eb;
+  --primary-200:#bac9db;
+  --primary-300:#9bb1cc;
+  --primary-400:#7d99bc;
+  --primary-500:#5e81ac;
+  --primary-600:#506e92;
+  --primary-700:#425a78;
+  --primary-800:#34475f;
+  --primary-900:#263445;
+}
+
+.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 #e5e9f0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #81a1c1;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #81a1c1;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #81a1c1;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #4c566a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #4c566a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #4c566a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #4c566a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #4c566a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #4c566a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  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);
+  border-radius: 4px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #4c566a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #4c566a;
+  background: transparent;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.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 #e5e9f0;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #4c566a;
+  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: #4c566a;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #4c566a;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #4c566a;
+}
+.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: #5e81ac;
+}
+.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: #5e81ac;
+}
+.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: #5e81ac;
+}
+.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: #5e81ac;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(112, 120, 136, 0.5);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #bf616a;
+  }
+  .p-text-secondary {
+    color: #81a1c1;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 4px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #81a1c1;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4c566a;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #d8dee9;
+    color: #2e3440;
+    border-radius: 4px;
+  }
+  .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: #bf616a;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #bf616a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #d8dee9;
+    border-radius: 4px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e9f0;
+    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: #81a1c1;
+    border: 2px solid transparent;
+    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: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #4c566a;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #5e81ac;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 4px;
+    transition: none;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ebcb8b;
+    color: #2e3440;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #e5e9f0;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #e5e9f0;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    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: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .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: #2e3440;
+    background: #d8dee9;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #e5e9f0;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #d8dee9;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #d8dee9;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #d8dee9;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d8dee9;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #81a1c1;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #eceff4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #eceff4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #4c566a;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #81a1c1;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #bf616a;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d8dee9;
+    border-radius: 4px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d8dee9;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #4c566a;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d8dee9;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #4c566a;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #5e81ac;
+    background: #5e81ac;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #81a1c1;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #48678c;
+    background: #81a1c1;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #bf616a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #eceff4;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #5e81ac;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #eceff4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #81a1c1;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #eceff4;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #5e81ac;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #eceff4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #81a1c1;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #eceff4;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #5e81ac;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #eceff4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #81a1c1;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #81a1c1;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #e5e9f0;
+    color: #4c566a;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #d8dee9;
+    color: #4c566a;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4c566a;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #bf616a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d8dee9;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #81a1c1;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #eceff4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #4c566a;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #81a1c1;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #81a1c1;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #bf616a;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #4c566a;
+    background: #eceff4;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #ffffff;
+    color: #81a1c1;
+    border-top: 1px solid #d8dee9;
+    border-left: 1px solid #d8dee9;
+    border-bottom: 1px solid #d8dee9;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d8dee9;
+  }
+  .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.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #bf616a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d8dee9;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #5e81ac;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #5e81ac;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #eceff4;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #81a1c1;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #bf616a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #4c566a;
+    background: #ffffff;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #d8dee9;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #81a1c1;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #bf616a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #eceff4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #eceff4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: #4c566a;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #bf616a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #4c566a;
+  }
+  :-moz-placeholder {
+    color: #4c566a;
+  }
+  ::-moz-placeholder {
+    color: #4c566a;
+  }
+  :-ms-input-placeholder {
+    color: #4c566a;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #eceff4;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #eceff4;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #d8dee9;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #4c566a;
+    background: #eceff4;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-listbox.p-invalid {
+    border-color: #bf616a;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d8dee9;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 4px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #81a1c1;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #eceff4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #4c566a;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #e5e9f0;
+    color: #4c566a;
+    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: #81a1c1;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #bf616a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #4c566a;
+    background: #eceff4;
+    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.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .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: #81a1c1;
+    border: 2px solid transparent;
+    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: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #4c566a;
+    background: transparent;
+  }
+  .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 1rem;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #bf616a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #ffffff;
+    color: #4c566a;
+    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);
+    border-radius: 4px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e9f0;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #bf616a;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #d08770;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #7fa366;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d8dee9;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d8dee9;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #4c566a;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 10px;
+    height: 10px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #5e81ac;
+    background: #5e81ac;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #81a1c1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #5e81ac;
+    background: #81a1c1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #bf616a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #eceff4;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #5e81ac;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #eceff4;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #81a1c1;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #eceff4;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #5e81ac;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #eceff4;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #81a1c1;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #4c566a;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #bf616a;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #5e81ac;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #5e81ac;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #d88889;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 2px solid #d8dee9;
+    color: #4c566a;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #81a1c1;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #eceff4;
+    border-color: #81a1c1;
+    color: #4c566a;
+  }
+  .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: #81a1c1;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #5e81ac;
+    border-color: #5e81ac;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #81a1c1;
+    border-color: #5e81ac;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #bf616a;
+  }
+  .p-slider {
+    background: #e5e9f0;
+    border: 0 none;
+    border-radius: 4px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #5e81ac;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-slider .p-slider-range {
+    background: #5e81ac;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #5e81ac;
+    border-color: #5e81ac;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d8dee9;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 4px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #81a1c1;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #eceff4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #4c566a;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #e5e9f0;
+    color: #4c566a;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #81a1c1;
+    width: 2.357rem;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #81a1c1;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #bf616a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #4c566a;
+    background: #eceff4;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #eceff4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d8dee9;
+    border-radius: 4px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 2px solid #d8dee9;
+    color: #4c566a;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #81a1c1;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #5e81ac;
+    border-color: #5e81ac;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #eceff4;
+    border-color: #81a1c1;
+    color: #4c566a;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #81a1c1;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #81a1c1;
+    border-color: #5e81ac;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: #81a1c1;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #bf616a;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #5e81ac;
+    border: 2px solid #5e81ac;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 4px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #81a1c1;
+    color: #ffffff;
+    border-color: #51749e;
+  }
+  .p-button:not(:disabled):active {
+    background: #48678c;
+    color: #ffffff;
+    border-color: #48678c;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #5e81ac;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(94, 129, 172, 0.12);
+    color: #5e81ac;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(94, 129, 172, 0.24);
+    color: #5e81ac;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #81a1c1;
+    border-color: #81a1c1;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #ffffff;
+    color: #81a1c1;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e9f0;
+    color: #81a1c1;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #5e81ac;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(94, 129, 172, 0.12);
+    color: #5e81ac;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(94, 129, 172, 0.24);
+    color: #5e81ac;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #81a1c1;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #ffffff;
+    color: #81a1c1;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e9f0;
+    color: #81a1c1;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #5e81ac;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2), 0 12px 10px 0 rgba(0, 0, 0, 0.06);
+  }
+  .p-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #4c566a;
+    border: 2px solid #4c566a;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #707888;
+    color: #ffffff;
+    border-color: #4c566a;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #b3bac8;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #2e3440;
+    color: #ffffff;
+    border-color: #2e3440;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #4c566a;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(76, 86, 106, 0.12);
+    color: #4c566a;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(76, 86, 106, 0.24);
+    color: #4c566a;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #4c566a;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(76, 86, 106, 0.12);
+    border-color: transparent;
+    color: #4c566a;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(76, 86, 106, 0.24);
+    border-color: transparent;
+    color: #4c566a;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #639bb2;
+    border: 2px solid #639bb2;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #88c0d0;
+    color: #ffffff;
+    border-color: #639bb2;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #c1d7e0;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #497e94;
+    color: #ffffff;
+    border-color: #497e94;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #639bb2;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(99, 155, 178, 0.12);
+    color: #639bb2;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(99, 155, 178, 0.24);
+    color: #639bb2;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #639bb2;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(99, 155, 178, 0.12);
+    border-color: transparent;
+    color: #639bb2;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(99, 155, 178, 0.24);
+    border-color: transparent;
+    color: #639bb2;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #7fa366;
+    border: 2px solid #7fa366;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #a3be8c;
+    color: #ffffff;
+    border-color: #7fa366;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ccdac2;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #658450;
+    color: #ffffff;
+    border-color: #658450;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #7fa366;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(127, 163, 102, 0.12);
+    color: #7fa366;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(127, 163, 102, 0.24);
+    color: #7fa366;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #7fa366;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(127, 163, 102, 0.12);
+    border-color: transparent;
+    color: #7fa366;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(127, 163, 102, 0.24);
+    border-color: transparent;
+    color: #7fa366;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #d08770;
+    border: 2px solid #d08770;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #e2ac94;
+    color: #ffffff;
+    border-color: #d08770;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #eccfc6;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #c05f40;
+    color: #ffffff;
+    border-color: #c05f40;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #d08770;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(208, 135, 112, 0.12);
+    color: #d08770;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(208, 135, 112, 0.24);
+    color: #d08770;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #d08770;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(208, 135, 112, 0.12);
+    border-color: transparent;
+    color: #d08770;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(208, 135, 112, 0.24);
+    border-color: transparent;
+    color: #d08770;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9a6796;
+    border: 2px solid #9a6796;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #b48ead;
+    color: #ffffff;
+    border-color: #9a6796;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #d7c2d5;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7c5278;
+    color: #ffffff;
+    border-color: #7c5278;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9a6796;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(154, 103, 150, 0.12);
+    color: #9a6796;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(154, 103, 150, 0.24);
+    color: #9a6796;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9a6796;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(154, 103, 150, 0.12);
+    border-color: transparent;
+    color: #9a6796;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(154, 103, 150, 0.24);
+    border-color: transparent;
+    color: #9a6796;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #bf616a;
+    border: 2px solid #bf616a;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #d88889;
+    color: #ffffff;
+    border-color: #bf616a;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e5c0c3;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #a4424c;
+    color: #ffffff;
+    border-color: #a4424c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #bf616a;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(191, 97, 106, 0.12);
+    color: #bf616a;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(191, 97, 106, 0.24);
+    color: #bf616a;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #bf616a;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(191, 97, 106, 0.12);
+    border-color: transparent;
+    color: #bf616a;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(191, 97, 106, 0.24);
+    border-color: transparent;
+    color: #bf616a;
+  }
+  .p-button.p-button-link {
+    color: #48678c;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #48678c;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #48678c;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 4px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #5e81ac;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(94, 129, 172, 0.12);
+    color: #5e81ac;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(94, 129, 172, 0.24);
+    color: #5e81ac;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #81a1c1;
+    border-color: #81a1c1;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #ffffff;
+    color: #81a1c1;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e9f0;
+    color: #81a1c1;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #5e81ac;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(94, 129, 172, 0.12);
+    color: #5e81ac;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(94, 129, 172, 0.24);
+    color: #5e81ac;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #81a1c1;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #ffffff;
+    color: #81a1c1;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e9f0;
+    color: #81a1c1;
+  }
+  .p-splitbutton.p-button-raised {
+    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2), 0 12px 10px 0 rgba(0, 0, 0, 0.06);
+  }
+  .p-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4c566a;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(76, 86, 106, 0.12);
+    color: #4c566a;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(76, 86, 106, 0.24);
+    color: #4c566a;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4c566a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(76, 86, 106, 0.12);
+    border-color: transparent;
+    color: #4c566a;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(76, 86, 106, 0.24);
+    border-color: transparent;
+    color: #4c566a;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #639bb2;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(99, 155, 178, 0.12);
+    color: #639bb2;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(99, 155, 178, 0.24);
+    color: #639bb2;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #639bb2;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(99, 155, 178, 0.12);
+    border-color: transparent;
+    color: #639bb2;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(99, 155, 178, 0.24);
+    border-color: transparent;
+    color: #639bb2;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #7fa366;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(127, 163, 102, 0.12);
+    color: #7fa366;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(127, 163, 102, 0.24);
+    color: #7fa366;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #7fa366;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(127, 163, 102, 0.12);
+    border-color: transparent;
+    color: #7fa366;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(127, 163, 102, 0.24);
+    border-color: transparent;
+    color: #7fa366;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d08770;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(208, 135, 112, 0.12);
+    color: #d08770;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(208, 135, 112, 0.24);
+    color: #d08770;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d08770;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(208, 135, 112, 0.12);
+    border-color: transparent;
+    color: #d08770;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(208, 135, 112, 0.24);
+    border-color: transparent;
+    color: #d08770;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9a6796;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(154, 103, 150, 0.12);
+    color: #9a6796;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(154, 103, 150, 0.24);
+    color: #9a6796;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9a6796;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(154, 103, 150, 0.12);
+    border-color: transparent;
+    color: #9a6796;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(154, 103, 150, 0.24);
+    border-color: transparent;
+    color: #9a6796;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #bf616a;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(191, 97, 106, 0.12);
+    color: #bf616a;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(191, 97, 106, 0.24);
+    color: #bf616a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #bf616a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(191, 97, 106, 0.12);
+    border-color: transparent;
+    color: #bf616a;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(191, 97, 106, 0.24);
+    border-color: transparent;
+    color: #bf616a;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 2rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #4c566a;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #3b4252;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(112, 120, 136, 0.5);
+    border-radius: 4px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #e5e9f0;
+    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: #81a1c1;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .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: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #eceff4;
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #4c566a;
+    background: #eceff4;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #4c566a;
+    background: #eceff4;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #81a1c1;
+    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: #2e3440;
+    background: #d8dee9;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #81a1c1;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #eceff4;
+    color: #4c566a;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4c566a;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #4c566a;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #c0d0e0;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #4c566a;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #eceff4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #81a1c1;
+    border: 2px solid transparent;
+    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: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #c0d0e0;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #d8dee9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #d8dee9;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #c0d0e0;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #c0d0e0;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #5e81ac;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #ffffff;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #eceff4;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f6f7fa;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #2e3440;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #2e3440;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f6f7fa;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(94, 129, 172, 0.16);
+  }
+  .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: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #eceff4;
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #ffffff;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #eceff4;
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    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: #81a1c1;
+    border: 2px solid transparent;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #4c566a;
+    background: transparent;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c0d0e0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #4c566a;
+    background: #eceff4;
+    margin: 0;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #e5e9f0;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #e5e9f0;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: transparent;
+    color: #4c566a;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f6f7fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: transparent;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: transparent;
+    color: #4c566a;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #8699bb;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e9f0;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e9f0;
+    border-color: #e5e9f0;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e9f0;
+    border-color: #e5e9f0;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #4c566a;
+    border: solid #ffffff;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    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: #4c566a;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .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: #eceff4;
+    border-color: #5e81ac;
+    color: #4c566a;
+  }
+  .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: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #4c566a;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #4c566a;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #d8dee9;
+    border-color: #d8dee9;
+    color: #2e3440;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #eceff4;
+    border-color: #5e81ac;
+    color: #4c566a;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #e5e9f0;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #4c566a;
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: transparent;
+    color: #4c566a;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #2e3440;
+    background: #d8dee9;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #bec8da;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 1rem;
+    border-radius: 4px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c0d0e0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 4px;
+    transition: none;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    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: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #81a1c1;
+  }
+  .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: #4c566a;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .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: #2e3440;
+  }
+  .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: #2e3440;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: transparent;
+    color: #4c566a;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: transparent;
+    color: #4c566a;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #9fadc9;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #eceff4;
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #4c566a;
+    background: #eceff4;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #ffffff;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #4c566a;
+    background: #eceff4;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #c0d0e0;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #81a1c1;
+    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: #2e3440;
+    background: #d8dee9;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #81a1c1;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #eceff4;
+    color: #4c566a;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4c566a;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #4c566a;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #eceff4;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #4c566a;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #c0d0e0;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #2e3440;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #2e3440;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #4c566a;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #5e81ac;
+  }
+  .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-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f6f7fa;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #2e3440;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #2e3440;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f6f7fa;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #5e81ac;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e9f0;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #e5e9f0;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+    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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #ffffff;
+    border-color: #e5e9f0;
+    color: #4c566a;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #ffffff;
+    border-color: #e5e9f0;
+    color: #4c566a;
+    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: #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    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-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #4c566a;
+    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: 1rem;
+  }
+  .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: #81a1c1;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    border-radius: 4px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #e5e9f0;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+    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: 1rem;
+    color: #4c566a;
+    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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #ffffff;
+    border-color: #e5e9f0;
+    color: #4c566a;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .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 #e5e9f0;
+  }
+  .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 #e5e9f0;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e9f0;
+    padding: 1rem;
+    background: #ffffff;
+    color: #4c566a;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    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: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    border-radius: 4px;
+    color: #4c566a;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #eceff4;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #c2c7d1;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #c2c7d1;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 4px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #81a1c1;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #4c566a;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #5e81ac;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #4c566a;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e9f0;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #5e81ac;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #eceff4;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 2px solid #e5e9f0;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e9f0;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e9f0 transparent;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #81a1c1;
+    color: #4c566a;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #5e81ac;
+    color: #4c566a;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #4c566a;
+    width: 2.357rem;
+    box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2), 0 12px 10px 0 rgba(0, 0, 0, 0.06);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    border: 0 none;
+    color: #4c566a;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-toolbar {
+    background: #ffffff;
+    border: 1px solid #e5e9f0;
+    padding: 1rem;
+    border-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 4px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 1.5rem;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #4c566a;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    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-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    border-radius: 4px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #5e81ac;
+    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: #81a1c1;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #4c566a;
+    border: 0 none;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border: 2px solid transparent;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #4c566a;
+    border-color: #5e81ac;
+    background: #ffffff;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #4c566a;
+    color: #ffffff;
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #4c566a;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #4c566a;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #4c566a;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #4c566a;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #ffffff;
+    padding: 1rem;
+    border: 1px solid #e5e9f0;
+    color: #4c566a;
+    border-bottom: 0 none;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e9f0;
+    color: #4c566a;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e9f0;
+    border-radius: 4px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #4c566a;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #81a1c1;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #4c566a;
+    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);
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 4px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c0d0e0;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #eceff4;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    border-radius: 4px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #4c566a;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #81a1c1;
+    background: #ffffff;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .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 1rem;
+    color: #4c566a;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #eceff4;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 4px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 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-menuitem-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #81a1c1;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #81a1c1;
+    background: #ffffff;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #81a1c1;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #81a1c1;
+      background: #ffffff;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #c0d0e0;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 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 #e5e9f0;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #4c566a;
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #4c566a;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4c566a;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #81a1c1;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #81a1c1;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #4c566a;
+      background: #ffffff;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4c566a;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #81a1c1;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #ffffff;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #4c566a;
+      background: #e5e9f0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #4c566a;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #4c566a;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #4c566a;
+      background: #ffffff;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #4c566a;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #81a1c1;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e9f0;
+    color: #4c566a;
+    background: #ffffff;
+    border-radius: 4px;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #4c566a;
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #ffffff;
+    border-color: #e5e9f0;
+    color: #4c566a;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #ffffff;
+    border-color: #e5e9f0;
+    color: #4c566a;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #e5e9f0;
+    background: #ffffff;
+    color: #4c566a;
+    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-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    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-slidemenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #ffffff;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #4c566a;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #81a1c1;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #4c566a;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: none;
+    border-radius: 4px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #4c566a;
+    border: 1px solid #ffffff;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #81a1c1;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #4c566a;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #e5e9f0;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 2px solid #e5e9f0;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e9f0;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e9f0 transparent;
+    background: #ffffff;
+    color: #4c566a;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    transition: none;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #81a1c1;
+    color: #4c566a;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #5e81ac;
+    color: #4c566a;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    border-radius: 4px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 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-content {
+    color: #4c566a;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #4c566a;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #81a1c1;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #ffffff;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #4c566a;
+    background: #e5e9f0;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #4c566a;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #4c566a;
+    background: #ffffff;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #4c566a;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #81a1c1;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #e5e9f0;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 4px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b8d9e3;
+    border: solid #2e4f5d;
+    border-width: 0px;
+    color: #2e4f5d;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #17282e;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8d8ba;
+    border: solid #3f5332;
+    border-width: 0px;
+    color: #202919;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #202919;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #f1d6ca;
+    border: solid #783b28;
+    border-width: 0px;
+    color: #3c1d14;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #3c1d14;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #e8b8b8;
+    border: solid #662a2f;
+    border-width: 0px;
+    color: #331518;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #331518;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 4px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-message.p-message-info {
+    background: #b8d9e3;
+    border: solid #2e4f5d;
+    border-width: 0 0 0 6px;
+    color: #2e4f5d;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #17282e;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #17282e;
+  }
+  .p-message.p-message-success {
+    background: #c8d8ba;
+    border: solid #3f5332;
+    border-width: 0 0 0 6px;
+    color: #202919;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #202919;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #202919;
+  }
+  .p-message.p-message-warn {
+    background: #f1d6ca;
+    border: solid #783b28;
+    border-width: 0 0 0 6px;
+    color: #3c1d14;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #3c1d14;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #3c1d14;
+  }
+  .p-message.p-message-error {
+    background: #e8b8b8;
+    border: solid #662a2f;
+    border-width: 0 0 0 6px;
+    color: #331518;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #331518;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #331518;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b8d9e3;
+    border: solid #2e4f5d;
+    border-width: 0 0 0 6px;
+    color: #2e4f5d;
+  }
+  .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: #17282e;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8d8ba;
+    border: solid #3f5332;
+    border-width: 0 0 0 6px;
+    color: #202919;
+  }
+  .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: #202919;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #f1d6ca;
+    border: solid #783b28;
+    border-width: 0 0 0 6px;
+    color: #3c1d14;
+  }
+  .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: #3c1d14;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #e8b8b8;
+    border: solid #662a2f;
+    border-width: 0 0 0 6px;
+    color: #331518;
+  }
+  .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: #331518;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #eceff4;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #eceff4;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #eceff4;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 4px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #eceff4;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #eceff4;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d8dee9;
+    width: 1rem;
+    height: 1rem;
+    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: #81a1c1;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #d8dee9;
+    color: #2e3440;
+  }
+  .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: #d8dee9;
+    color: #2e3440;
+  }
+  .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: #eceff4;
+    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: #eceff4;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e9f0;
+    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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e9f0;
+    color: #4c566a;
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #eceff4;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e5e9f0;
+    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: #5e81ac;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #7fa366;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #639bb2;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #d08770;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #bf616a;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #ffffff;
+    color: #4c566a;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e9f0;
+    border-radius: 4px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #5e81ac;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #5e81ac;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e9f0;
+    border-radius: 4px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #5e81ac;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #4c566a;
+    border: 1px solid #e5e9f0;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #5e81ac;
+    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: #4c566a;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #7fa366;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #639bb2;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #d08770;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #bf616a;
+    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-tag {
+    background: #5e81ac;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 4px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #7fa366;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #639bb2;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #d08770;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #bf616a;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-inputtext:enabled:hover {
+    background-color: #eceff4;
+  }
+  .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-chips .p-chips-multiple-container:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-autocomplete .p-autocomplete-panel .p-autocomplete-item:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-autocomplete.p-autocomplete-multiple .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    background-color: #eceff4;
+  }
+  .p-button {
+    font-weight: 500;
+  }
+  .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
+    background-color: #d8dee9;
+  }
+  .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
+    border-color: transparent;
+  }
+  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+    background-color: #d8dee9;
+  }
+  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+    border-color: transparent;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover:not(.p-disabled) .p-accordion-header-link:focus {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: #5e81ac;
+  }
+  .p-datepicker table td > span.p-highlight:hover {
+    background-color: #81a1c1;
+    border: 2px solid #5e81ac;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: #5e81ac;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-menubar .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-tieredmenu .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-menu .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-contextmenu .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .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 {
+    border: 1px solid #5e81ac;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    border: 1px solid #5e81ac;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background-color: #d8dee9;
+  }
+  .p-datatable .p-sortable-column.p-highlight:hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
+    outline: 1px solid #81a1c1;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #81a1c1;
+    color: #ffffff;
+    border: 2px solid #51749e;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #ffffff;
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background-color: #d8dee9;
+  }
+  .p-treetable .p-sortable-column.p-highlight:hover {
+    background-color: #ffffff;
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-treetable .p-sortable-column:focus {
+    box-shadow: inset 0 0 0 0.2rem #c0d0e0;
+    outline: 0 none;
+  }
+  .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    outline: 1px solid #81a1c1;
+  }
+  .p-megamenu .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-megamenu .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled) > a:hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-disabled):hover {
+    box-shadow: inset 0 0 0 0.1rem #81a1c1;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #5e81ac;
+    color: #ffffff;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #5e81ac;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #5e81ac;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #5e81ac;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+}
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
new file mode 100644
index 0000000000..21c725fb0d
--- /dev/null
+++ b/public/themes/nano/theme.css
@@ -0,0 +1,6984 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f2f4f8;
+  --surface-c: #dde1e6;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #343a3f;
+  --text-color-secondary: #697077;
+  --primary-color: #1174c0;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #eff0f0;
+  --surface-100: #dfe0e1;
+  --surface-200: #bfc1c4;
+  --surface-300: #9fa3a6;
+  --surface-400: #7f8489;
+  --surface-500: #5f656b;
+  --surface-600: #4c5156;
+  --surface-700: #393d40;
+  --surface-800: #26282b;
+  --surface-900: #131415;
+  --gray-50: #eff0f0;
+  --gray-100: #dfe0e1;
+  --gray-200: #bfc1c4;
+  --gray-300: #9fa3a6;
+  --gray-400: #7f8489;
+  --gray-500: #5f656b;
+  --gray-600: #4c5156;
+  --gray-700: #393d40;
+  --gray-800: #26282b;
+  --gray-900: #131415;
+  --content-padding: 0.5rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 1px;
+  --surface-ground: #f2f4f8;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #dde1e6;
+  --focus-ring: 0 0 0 0.2rem #90c9f5;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #44a1d9;
+  --highlight-text-color: #ffffff;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f4f9fd;
+  --blue-100:#c9e2f4;
+  --blue-200:#9ecbec;
+  --blue-300:#74b3e4;
+  --blue-400:#499cdb;
+  --blue-500:#1e85d3;
+  --blue-600:#1a71b3;
+  --blue-700:#155d94;
+  --blue-800:#114974;
+  --blue-900:#0c3554;
+  --green-50:#f5fbf7;
+  --green-100:#cfead7;
+  --green-200:#a9dab7;
+  --green-300:#84ca97;
+  --green-400:#5eb978;
+  --green-500:#38a958;
+  --green-600:#30904b;
+  --green-700:#27763e;
+  --green-800:#1f5d30;
+  --green-900:#164423;
+  --yellow-50:#fefcf5;
+  --yellow-100:#fbf0cf;
+  --yellow-200:#f9e4a8;
+  --yellow-300:#f6d982;
+  --yellow-400:#f3cd5b;
+  --yellow-500:#f0c135;
+  --yellow-600:#cca42d;
+  --yellow-700:#a88725;
+  --yellow-800:#846a1d;
+  --yellow-900:#604d15;
+  --cyan-50:#f4fcfe;
+  --cyan-100:#caf0fc;
+  --cyan-200:#a0e4fa;
+  --cyan-300:#75d9f8;
+  --cyan-400:#4bcdf5;
+  --cyan-500:#21c1f3;
+  --cyan-600:#1ca4cf;
+  --cyan-700:#1787aa;
+  --cyan-800:#126a86;
+  --cyan-900:#0d4d61;
+  --pink-50:#fdf6f6;
+  --pink-100:#f5d3d6;
+  --pink-200:#eeb0b5;
+  --pink-300:#e68e94;
+  --pink-400:#df6b74;
+  --pink-500:#d74853;
+  --pink-600:#b73d47;
+  --pink-700:#97323a;
+  --pink-800:#76282e;
+  --pink-900:#561d21;
+  --indigo-50:#f3f6fc;
+  --indigo-100:#c6d4f0;
+  --indigo-200:#99b2e4;
+  --indigo-300:#6b90d8;
+  --indigo-400:#3e6ecc;
+  --indigo-500:#114cc0;
+  --indigo-600:#0e41a3;
+  --indigo-700:#0c3586;
+  --indigo-800:#092a6a;
+  --indigo-900:#071e4d;
+  --teal-50:#f3f9f8;
+  --teal-100:#c6e0df;
+  --teal-200:#98c7c5;
+  --teal-300:#6baeac;
+  --teal-400:#3d9692;
+  --teal-500:#107d79;
+  --teal-600:#0e6a67;
+  --teal-700:#0b5855;
+  --teal-800:#094543;
+  --teal-900:#063230;
+  --orange-50:#fef9f5;
+  --orange-100:#fbe4cf;
+  --orange-200:#f9cfa8;
+  --orange-300:#f6ba82;
+  --orange-400:#f3a45b;
+  --orange-500:#f08f35;
+  --orange-600:#cc7a2d;
+  --orange-700:#a86425;
+  --orange-800:#844f1d;
+  --orange-900:#603915;
+  --bluegray-50:#f8f8f8;
+  --bluegray-100:#dbddde;
+  --bluegray-200:#bfc2c5;
+  --bluegray-300:#a2a6ab;
+  --bluegray-400:#868b91;
+  --bluegray-500:#697077;
+  --bluegray-600:#595f65;
+  --bluegray-700:#4a4e53;
+  --bluegray-800:#3a3e41;
+  --bluegray-900:#2a2d30;
+  --purple-50:#f9f6ff;
+  --purple-100:#e3d3fd;
+  --purple-200:#ccb1fc;
+  --purple-300:#b68efb;
+  --purple-400:#9f6cf9;
+  --purple-500:#8949f8;
+  --purple-600:#743ed3;
+  --purple-700:#6033ae;
+  --purple-800:#4b2888;
+  --purple-900:#371d63;
+  --red-50:#fff4f5;
+  --red-100:#ffccce;
+  --red-200:#ffa4a7;
+  --red-300:#ff7c80;
+  --red-400:#ff5359;
+  --red-500:#ff2b32;
+  --red-600:#d9252b;
+  --red-700:#b31e23;
+  --red-800:#8c181c;
+  --red-900:#661114;
+  --primary-50:#f3f8fc;
+  --primary-100:#c6def0;
+  --primary-200:#99c3e4;
+  --primary-300:#6ba9d8;
+  --primary-400:#3e8ecc;
+  --primary-500:#1174c0;
+  --primary-600:#0e63a3;
+  --primary-700:#0c5186;
+  --primary-800:#09406a;
+  --primary-900:#072e4d;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f2f4f8;
+  border-top-right-radius: 1px;
+  border-top-left-radius: 1px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #697077;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #697077;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #697077;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #343a3f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #343a3f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #343a3f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #343a3f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #343a3f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #343a3f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  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);
+  border-radius: 1px;
+  padding: 0.25rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #343a3f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #343a3f;
+  background: #dde1e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.25rem 0.5rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #343a3f;
+  border-bottom-right-radius: 1px;
+  border-bottom-left-radius: 1px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #343a3f;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #343a3f;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #343a3f;
+}
+.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: #1174c0;
+}
+.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: #1174c0;
+}
+.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: #1174c0;
+}
+.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: #1174c0;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #d8222f;
+  }
+  .p-text-secondary {
+    color: #697077;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 1px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.25rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.607rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.125rem 0.25rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #1174c0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.125rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #343a3f;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.125rem 0.25rem;
+    margin-right: 0.5rem;
+    background: #44a1d9;
+    color: #ffffff;
+    border-radius: 1px;
+  }
+  .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: #d8222f;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #d8222f;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-datepicker {
+    padding: 0.25rem;
+    background: #ffffff;
+    color: #343a3f;
+    border: 1px solid #a5acb3;
+    border-radius: 1px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #343a3f;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 1rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #343a3f;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #1174c0;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.25rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #a5acb3;
+    color: #343a3f;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.5rem 0;
+    border-top: 1px solid #dee2e6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1rem;
+  }
+  .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.25rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.25rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dee2e6;
+    padding-right: 0.25rem;
+    padding-left: 0.25rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #dde1e6;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #dde1e6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #dde1e6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #a5acb3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 1px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #1174c0;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f2f4f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f2f4f8;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.25rem 0.25rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #697077;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #697077;
+    width: 2.357rem;
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #d8222f;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.25rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #a5acb3;
+    border-radius: 1px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #a5acb3;
+    background: #ffffff;
+    width: 14px;
+    height: 14px;
+    color: #343a3f;
+    border-radius: 1px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 12px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 12px;
+    height: 12px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #a5acb3;
+    background: #ffffff;
+    width: 14px;
+    height: 14px;
+    color: #343a3f;
+    border-radius: 1px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 12px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 12px;
+    height: 12px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #1174c0;
+    background: #1174c0;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #1174c0;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #0e5d9a;
+    background: #0e5d9a;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #d8222f;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f2f4f8;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #1174c0;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f2f4f8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0e5d9a;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f2f4f8;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #1174c0;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f2f4f8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0e5d9a;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f2f4f8;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #1174c0;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f2f4f8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0e5d9a;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #1174c0;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.125rem 0.25rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.125rem 0.25rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #343a3f;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #c8cbcf;
+    color: #343a3f;
+  }
+  .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.125rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #343a3f;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #d8222f;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #a5acb3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 1px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #1174c0;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f2f4f8;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f4f8;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.25rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #697077;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #697077;
+    width: 2.357rem;
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #697077;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #d8222f;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 0 none;
+    color: #343a3f;
+    background: #f2f4f8;
+    margin: 0;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.25rem;
+    margin-right: -1.25rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.25rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #dde1e6;
+    color: #697077;
+    border-top: 1px solid #a5acb3;
+    border-left: 1px solid #a5acb3;
+    border-bottom: 1px solid #a5acb3;
+    padding: 0.25rem 0.25rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #a5acb3;
+  }
+  .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: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .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: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #d8222f;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 2rem;
+    height: 1.155rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #a5acb3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 0.825rem;
+    height: 0.825rem;
+    left: 0.165rem;
+    margin-top: -0.4125rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #1174c0;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(0.825rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #929ba3;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #0f68ad;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #d8222f;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #343a3f;
+    background: #ffffff;
+    padding: 0.25rem 0.25rem;
+    border: 1px solid #a5acb3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 1px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #1174c0;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #d8222f;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f2f4f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f2f4f8;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.21875rem 0.21875rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.3125rem 0.3125rem;
+  }
+  .p-float-label > label {
+    left: 0.25rem;
+    color: #697077;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #d8222f;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #697077;
+  }
+  :-moz-placeholder {
+    color: #697077;
+  }
+  ::-moz-placeholder {
+    color: #697077;
+  }
+  :-ms-input-placeholder {
+    color: #697077;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f2f4f8;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f2f4f8;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.21875rem 0.21875rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.3125rem 0.3125rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.25rem;
+    color: #697077;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #343a3f;
+    border: 1px solid #a5acb3;
+    border-radius: 1px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 0 none;
+    color: #343a3f;
+    background: #f2f4f8;
+    margin: 0;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.25rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.25rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    border: 0 none;
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-listbox.p-invalid {
+    border-color: #d8222f;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    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-mention-panel .p-mention-items {
+    padding: 0.25rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #a5acb3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 1px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #1174c0;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f2f4f8;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f4f8;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.25rem 0.25rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #697077;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.125rem 0.25rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #343a3f;
+    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: #697077;
+    width: 2.357rem;
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #d8222f;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.125rem 0.25rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 0 none;
+    color: #343a3f;
+    background: #f2f4f8;
+    margin: 0;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.25rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .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: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.25rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .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.25rem 0.5rem;
+    color: #343a3f;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #d8222f;
+  }
+  .p-password-panel {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #343a3f;
+    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);
+    border-radius: 1px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #dee2e6;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #d8222f;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #f0c135;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #207f3b;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 14px;
+    height: 14px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #a5acb3;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #a5acb3;
+    background: #ffffff;
+    width: 14px;
+    height: 14px;
+    color: #343a3f;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 8px;
+    height: 8px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #1174c0;
+    background: #1174c0;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #1174c0;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #0e5d9a;
+    background: #0e5d9a;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #d8222f;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f2f4f8;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #1174c0;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f2f4f8;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0e5d9a;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f2f4f8;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #1174c0;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f2f4f8;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0e5d9a;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #343a3f;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e74c3c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #1174c0;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #1174c0;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #c0392b;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #a5acb3;
+    color: #343a3f;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #697077;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #dde1e6;
+    border-color: #a5acb3;
+    color: #343a3f;
+  }
+  .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: #697077;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #1174c0;
+    border-color: #1174c0;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #0f68ad;
+    border-color: #0f68ad;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #d8222f;
+  }
+  .p-slider {
+    background: #dee2e6;
+    border: 0 none;
+    border-radius: 1px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #1174c0;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-slider .p-slider-range {
+    background: #1174c0;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #1174c0;
+    border-color: #1174c0;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #a5acb3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #1174c0;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.25rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f2f4f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f4f8;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.25rem 0.25rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #697077;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.125rem 0.25rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #343a3f;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #697077;
+    width: 2.357rem;
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #697077;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #d8222f;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.125rem 0.25rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 0 none;
+    color: #343a3f;
+    background: #f2f4f8;
+    margin: 0;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.25rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f2f4f8;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f2f4f8;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #a5acb3;
+    border-radius: 1px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #a5acb3;
+    color: #343a3f;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #697077;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #1174c0;
+    border-color: #1174c0;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #dde1e6;
+    border-color: #a5acb3;
+    color: #343a3f;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #697077;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #0f68ad;
+    border-color: #0f68ad;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: #1174c0;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #d8222f;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #1174c0;
+    border: 1px solid #1174c0;
+    padding: 0.25rem 0.5rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #0f68ad;
+    color: #ffffff;
+    border-color: #0f68ad;
+  }
+  .p-button:not(:disabled):active {
+    background: #0e5d9a;
+    color: #ffffff;
+    border-color: #0e5d9a;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #1174c0;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(17, 116, 192, 0.04);
+    color: #1174c0;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(17, 116, 192, 0.16);
+    color: #1174c0;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #697077;
+    border-color: #697077;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #dde1e6;
+    color: #697077;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #697077;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #1174c0;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(17, 116, 192, 0.04);
+    color: #1174c0;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(17, 116, 192, 0.16);
+    color: #1174c0;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #697077;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #dde1e6;
+    color: #697077;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #697077;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #1174c0;
+    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.357rem;
+    padding: 0.25rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.21875rem 0.4375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.3125rem 0.625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #697077;
+    border: 1px solid #697077;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #5f656b;
+    color: #ffffff;
+    border-color: #5f656b;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #c2c6c9;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #545a5f;
+    color: #ffffff;
+    border-color: #545a5f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #697077;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(105, 112, 119, 0.04);
+    color: #697077;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(105, 112, 119, 0.16);
+    color: #697077;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #697077;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(105, 112, 119, 0.04);
+    border-color: transparent;
+    color: #697077;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(105, 112, 119, 0.16);
+    border-color: transparent;
+    color: #697077;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #107d79;
+    border: 1px solid #107d79;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #0e716d;
+    color: #ffffff;
+    border-color: #0e716d;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #7ceeea;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #0d6461;
+    color: #ffffff;
+    border-color: #0d6461;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #107d79;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(16, 125, 121, 0.04);
+    color: #107d79;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(16, 125, 121, 0.16);
+    color: #107d79;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #107d79;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(16, 125, 121, 0.04);
+    border-color: transparent;
+    color: #107d79;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(16, 125, 121, 0.16);
+    border-color: transparent;
+    color: #107d79;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #207f3b;
+    border: 1px solid #207f3b;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #1d7235;
+    color: #ffffff;
+    border-color: #1d7235;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #8fe3a7;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #1a662f;
+    color: #ffffff;
+    border-color: #1a662f;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #207f3b;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(32, 127, 59, 0.04);
+    color: #207f3b;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(32, 127, 59, 0.16);
+    color: #207f3b;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #207f3b;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(32, 127, 59, 0.04);
+    border-color: transparent;
+    color: #207f3b;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(32, 127, 59, 0.16);
+    border-color: transparent;
+    color: #207f3b;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #f0c135;
+    border: 1px solid #f0c135;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #eeb91a;
+    color: #212529;
+    border-color: #eeb91a;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f9e6ae;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #daa710;
+    color: #212529;
+    border-color: #daa710;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f0c135;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(240, 193, 53, 0.04);
+    color: #f0c135;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(240, 193, 53, 0.16);
+    color: #f0c135;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f0c135;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(240, 193, 53, 0.04);
+    border-color: transparent;
+    color: #f0c135;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(240, 193, 53, 0.16);
+    border-color: transparent;
+    color: #f0c135;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #8949f8;
+    border: 1px solid #8949f8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #752af7;
+    color: #ffffff;
+    border-color: #752af7;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #d0b6fc;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #610bf6;
+    color: #ffffff;
+    border-color: #610bf6;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #8949f8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(137, 73, 248, 0.04);
+    color: #8949f8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(137, 73, 248, 0.16);
+    color: #8949f8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #8949f8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(137, 73, 248, 0.04);
+    border-color: transparent;
+    color: #8949f8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(137, 73, 248, 0.16);
+    border-color: transparent;
+    color: #8949f8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d8222f;
+    border: 1px solid #d8222f;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c21f2a;
+    color: #ffffff;
+    border-color: #c21f2a;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f1a5ab;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ad1b26;
+    color: #ffffff;
+    border-color: #ad1b26;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d8222f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(216, 34, 47, 0.04);
+    color: #d8222f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(216, 34, 47, 0.16);
+    color: #d8222f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d8222f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(216, 34, 47, 0.04);
+    border-color: transparent;
+    color: #d8222f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(216, 34, 47, 0.16);
+    border-color: transparent;
+    color: #d8222f;
+  }
+  .p-button.p-button-link {
+    color: #0e5d9a;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #0e5d9a;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #0e5d9a;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 1px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #1174c0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(17, 116, 192, 0.04);
+    color: #1174c0;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(17, 116, 192, 0.16);
+    color: #1174c0;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #697077;
+    border-color: #697077;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #dde1e6;
+    color: #697077;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #697077;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #1174c0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(17, 116, 192, 0.04);
+    color: #1174c0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(17, 116, 192, 0.16);
+    color: #1174c0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #697077;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #dde1e6;
+    color: #697077;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #697077;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.21875rem 0.4375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.3125rem 0.625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #697077;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(105, 112, 119, 0.04);
+    color: #697077;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(105, 112, 119, 0.16);
+    color: #697077;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #697077;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(105, 112, 119, 0.04);
+    border-color: transparent;
+    color: #697077;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(105, 112, 119, 0.16);
+    border-color: transparent;
+    color: #697077;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #107d79;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(16, 125, 121, 0.04);
+    color: #107d79;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(16, 125, 121, 0.16);
+    color: #107d79;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #107d79;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(16, 125, 121, 0.04);
+    border-color: transparent;
+    color: #107d79;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(16, 125, 121, 0.16);
+    border-color: transparent;
+    color: #107d79;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #207f3b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(32, 127, 59, 0.04);
+    color: #207f3b;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(32, 127, 59, 0.16);
+    color: #207f3b;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #207f3b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(32, 127, 59, 0.04);
+    border-color: transparent;
+    color: #207f3b;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(32, 127, 59, 0.16);
+    border-color: transparent;
+    color: #207f3b;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f0c135;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(240, 193, 53, 0.04);
+    color: #f0c135;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(240, 193, 53, 0.16);
+    color: #f0c135;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f0c135;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(240, 193, 53, 0.04);
+    border-color: transparent;
+    color: #f0c135;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(240, 193, 53, 0.16);
+    border-color: transparent;
+    color: #f0c135;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #8949f8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(137, 73, 248, 0.04);
+    color: #8949f8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(137, 73, 248, 0.16);
+    color: #8949f8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #8949f8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(137, 73, 248, 0.04);
+    border-color: transparent;
+    color: #8949f8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(137, 73, 248, 0.16);
+    border-color: transparent;
+    color: #8949f8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d8222f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(216, 34, 47, 0.04);
+    color: #d8222f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(216, 34, 47, 0.16);
+    color: #d8222f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d8222f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(216, 34, 47, 0.04);
+    border-color: transparent;
+    color: #d8222f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(216, 34, 47, 0.16);
+    border-color: transparent;
+    color: #d8222f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 2.25rem;
+    height: 2.25rem;
+    background: #343a3f;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #21272a;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 1px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #dde1e6;
+    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: #dee2e6;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .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: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #343a3f;
+    background: #f2f4f8;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #343a3f;
+    background: #f2f4f8;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #697077;
+    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: #ffffff;
+    background: #44a1d9;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #697077;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f2f4f8;
+    color: #1174c0;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #1174c0;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #dde1e6;
+    color: #1174c0;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #1174c0;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #90c9f5;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    padding: 0.25rem 1rem;
+  }
+  .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: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #90c9f5;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #44a1d9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #44a1d9;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #90c9f5;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #90c9f5;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #1174c0;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f2f4f8;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f2f4f8;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.125rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.3125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(17, 116, 192, 0.16);
+  }
+  .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: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #dde1e6;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .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: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #343a3f;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-column-filter-clear-button {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.25rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #90c9f5;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.25rem 0.5rem;
+    border-bottom: 0 none;
+    color: #343a3f;
+    background: #f2f4f8;
+    margin: 0;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.5rem;
+    border-bottom: 1px solid #dee2e6;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    padding: 0.75rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    padding: 0.25rem 0;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.25rem 0.5rem;
+    margin: 0;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #fcfcfc;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #dde1e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #1b5c83;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    padding: 0.5rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #697077;
+    border: solid #dde1e6;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 1px;
+  }
+  .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: #697077;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .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: #dde1e6;
+    border-color: transparent;
+    color: #343a3f;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #697077;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #697077;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #44a1d9;
+    border-color: #44a1d9;
+    color: #ffffff;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #dde1e6;
+    border-color: transparent;
+    color: #343a3f;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.5rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    padding: 0.75rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.25rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    padding: 0.25rem 0;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.25rem 0.5rem;
+    margin: 0;
+    border: 0 none;
+    color: #343a3f;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #ffffff;
+    background: #44a1d9;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #1174c0;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    padding: 0.5rem;
+    border-radius: 1px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #90c9f5;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 1px;
+    transition: box-shadow 0.2s;
+    padding: 0.25rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #697077;
+  }
+  .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: #343a3f;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.25rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.25rem;
+    color: #697077;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #2785bd;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #343a3f;
+    background: #f2f4f8;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #343a3f;
+    background: #f2f4f8;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #90c9f5;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #697077;
+    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: #ffffff;
+    background: #44a1d9;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #697077;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f2f4f8;
+    color: #1174c0;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #1174c0;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dde1e6;
+    border-width: 0 0 1px 0;
+    padding: 0.25rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #343a3f;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #90c9f5;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #343a3f;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #1174c0;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f2f4f8;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.125rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.3125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1174c0;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dee2e6;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.75rem;
+    border: 1px solid #dee2e6;
+    color: #343a3f;
+    background: #f2f4f8;
+    font-weight: 600;
+    border-radius: 1px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #dde1e6;
+    border-color: #dee2e6;
+    color: #343a3f;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f2f4f8;
+    border-color: #dee2e6;
+    color: #343a3f;
+    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: #dee2e6;
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.5rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .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: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #343a3f;
+    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: 1px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .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: #697077;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    border-radius: 1px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.75rem;
+    border: 1px solid #dee2e6;
+    color: #343a3f;
+    background: #f2f4f8;
+    font-weight: 600;
+    border-radius: 1px;
+  }
+  .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: #343a3f;
+    border-radius: 1px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #dde1e6;
+    border-color: #dee2e6;
+    color: #343a3f;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.5rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 0.5rem 0;
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #dee2e6;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 0.5rem;
+    padding: 0.5rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #dee2e6;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dee2e6;
+    padding: 0.75rem;
+    background: #f2f4f8;
+    color: #343a3f;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    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: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.5rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    border-radius: 1px;
+    color: #343a3f;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f2f4f8;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dee2e6;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dee2e6;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #697077;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #343a3f;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #1174c0;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.5rem;
+    color: #343a3f;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #343a3f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #1174c0;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f2f4f8;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #697077;
+    padding: 0.75rem;
+    font-weight: 600;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #90c9f5;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #697077;
+    color: #697077;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #1174c0;
+    color: #1174c0;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #1174c0;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #90c9f5;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 0.5rem;
+    border: 0 none;
+    color: #343a3f;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-toolbar {
+    background: #f2f4f8;
+    border: 1px solid #dee2e6;
+    padding: 0.75rem;
+    border-radius: 1px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 0.5rem 0.5rem 0.5rem;
+  }
+  .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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 1px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #343a3f;
+    padding: 0.75rem;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #343a3f;
+    padding: 0 0.75rem 1rem 0.75rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #343a3f;
+    padding: 0 0.75rem 0.75rem 0.75rem;
+    text-align: right;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    border-radius: 1px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.5rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #1174c0;
+    color: #ffffff;
+    width: 1rem;
+    height: 1rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 50%;
+    position: absolute;
+    top: -0.5rem;
+    right: -0.5rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #0f68ad;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #343a3f;
+    border: 0 none;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.75rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 1rem;
+    height: 1rem;
+    color: #878d96;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #343a3f;
+    border-color: #121619;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.5rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #343a3f;
+    color: #ffffff;
+    padding: 0.25rem 0.25rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 1px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #343a3f;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #343a3f;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #343a3f;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #343a3f;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f2f4f8;
+    padding: 0.75rem;
+    border: 1px solid #dee2e6;
+    color: #343a3f;
+    border-bottom: 0 none;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dee2e6;
+    color: #343a3f;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.25rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 1px;
+    padding: 0.5rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #343a3f;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #697077;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #343a3f;
+    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);
+    border-radius: 1px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 1px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 1px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #90c9f5;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    border-radius: 1px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #343a3f;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    color: #343a3f;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 1rem;
+    height: 1rem;
+    color: #697077;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #697077;
+    background: #dde1e6;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    border-radius: 1px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .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.25rem 0.5rem;
+    color: #343a3f;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f2f4f8;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    border-radius: 1px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 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-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 1rem;
+    height: 1rem;
+    color: #697077;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #697077;
+    background: #dde1e6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 1.5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 2.5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 3.5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 4.5rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 5.5rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 1rem;
+      height: 1rem;
+      color: #697077;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #697077;
+      background: #dde1e6;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #90c9f5;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 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 #dee2e6;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #343a3f;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #343a3f;
+      padding: 0.5rem 0.5rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #343a3f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #697077;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #697077;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #343a3f;
+      background: #dde1e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #343a3f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #697077;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #dde1e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #343a3f;
+      background: #d2d6db;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #343a3f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #343a3f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #343a3f;
+      background: #dde1e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #343a3f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #697077;
+    }
+    .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: 1.5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 2.5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 3.5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 4.5rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 5.5rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dee2e6;
+    color: #343a3f;
+    background: #f2f4f8;
+    border-radius: 1px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #343a3f;
+    padding: 0.75rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #90c9f5;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #dde1e6;
+    border-color: #dee2e6;
+    color: #343a3f;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f2f4f8;
+    border-color: #dee2e6;
+    color: #343a3f;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dee2e6;
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #343a3f;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    border-radius: 1px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #dde1e6;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #343a3f;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #697077;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.5rem 0.5rem;
+    color: #343a3f;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 1px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #343a3f;
+    border: 1px solid #dde1e6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #697077;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #343a3f;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #697077;
+    padding: 0.75rem;
+    font-weight: 600;
+    border-top-right-radius: 1px;
+    border-top-left-radius: 1px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #90c9f5;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #697077;
+    color: #697077;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #1174c0;
+    color: #1174c0;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    border-radius: 1px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 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-content {
+    color: #343a3f;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #343a3f;
+    padding: 0.5rem 0.5rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #697077;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #dde1e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #343a3f;
+    background: #d2d6db;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #343a3f;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #343a3f;
+    background: #dde1e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #343a3f;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #697077;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.25rem 0.25rem;
+    margin: 0;
+    border-radius: 1px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #cdf2fb;
+    border: solid #11add3;
+    border-width: 0px;
+    color: #08576a;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #08576a;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #d7f8d3;
+    border: solid #32c620;
+    border-width: 0px;
+    color: #196310;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #196310;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fef8d6;
+    border: solid #e4c306;
+    border-width: 0px;
+    color: #726203;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #726203;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #fdded2;
+    border: solid #de450a;
+    border-width: 0px;
+    color: #6f2205;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #6f2205;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 1px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .p-message .p-message-close {
+    width: 1rem;
+    height: 1rem;
+    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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-message.p-message-info {
+    background: #cdf2fb;
+    border: solid #11add3;
+    border-width: 0 0 0 6px;
+    color: #08576a;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #08576a;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #08576a;
+  }
+  .p-message.p-message-success {
+    background: #d7f8d3;
+    border: solid #32c620;
+    border-width: 0 0 0 6px;
+    color: #196310;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #196310;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #196310;
+  }
+  .p-message.p-message-warn {
+    background: #fef8d6;
+    border: solid #e4c306;
+    border-width: 0 0 0 6px;
+    color: #726203;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #726203;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #726203;
+  }
+  .p-message.p-message-error {
+    background: #fdded2;
+    border: solid #de450a;
+    border-width: 0 0 0 6px;
+    color: #6f2205;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #6f2205;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #6f2205;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 1px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #cdf2fb;
+    border: solid #11add3;
+    border-width: 0 0 0 6px;
+    color: #08576a;
+  }
+  .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: #08576a;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #d7f8d3;
+    border: solid #32c620;
+    border-width: 0 0 0 6px;
+    color: #196310;
+  }
+  .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: #196310;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fef8d6;
+    border: solid #e4c306;
+    border-width: 0 0 0 6px;
+    color: #726203;
+  }
+  .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: #726203;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #fdded2;
+    border: solid #de450a;
+    border-width: 0 0 0 6px;
+    color: #6f2205;
+  }
+  .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: #6f2205;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f2f4f8;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f2f4f8;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f2f4f8;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 1px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f2f4f8;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f2f4f8;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #dde1e6;
+    width: 1rem;
+    height: 1rem;
+    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: #dee2e6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #44a1d9;
+    color: #ffffff;
+  }
+  .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: #44a1d9;
+    color: #ffffff;
+  }
+  .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: #f2f4f8;
+    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: #f2f4f8;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dee2e6;
+    border-radius: 1px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dee2e6;
+    color: #343a3f;
+    border-radius: 16px;
+    padding: 0 0.25rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.125rem;
+    margin-bottom: 0.125rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.75rem;
+    height: 1.75rem;
+    margin-left: -0.25rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 1px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 1px;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1rem;
+    color: #f2f4f8;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-skeleton {
+    background-color: #dde1e6;
+    border-radius: 1px;
+  }
+  .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: #1174c0;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 1px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #207f3b;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #107d79;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f0c135;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d8222f;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.25rem 0.25rem;
+    border-radius: 1px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #dde1e6;
+    color: #343a3f;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 1px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #1174c0;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #1174c0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 1px;
+    border-bottom-left-radius: 1px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 1px;
+    border-top-right-radius: 1px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 1px;
+    border-bottom-right-radius: 1px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #dee2e6;
+    border-radius: 1px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #1174c0;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #343a3f;
+    border: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #1174c0;
+    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: #697077;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #207f3b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #107d79;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f0c135;
+    color: #212529;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #d8222f;
+    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-tag {
+    background: #1174c0;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 1px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #207f3b;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #107d79;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f0c135;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d8222f;
+    color: #ffffff;
+  }
+}
+.p-selectbutton > .p-button,
+.p-togglebutton.p-button {
+  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
new file mode 100644
index 0000000000..fa9dda9134
--- /dev/null
+++ b/public/themes/nova-accent/theme.css
@@ -0,0 +1,6968 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f4f4f4;
+  --surface-c: #eaeaea;
+  --surface-d: #c8c8c8;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #333333;
+  --text-color-secondary: #848484;
+  --primary-color: #007ad9;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
+  --gray-50: #eef1f2;
+  --gray-100: #dde2e4;
+  --gray-200: #bbc5ca;
+  --gray-300: #98a8af;
+  --gray-400: #768b95;
+  --gray-500: #546e7a;
+  --gray-600: #435862;
+  --gray-700: #324249;
+  --gray-800: #222c31;
+  --gray-900: #111618;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #f4f4f4;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #c8c8c8;
+  --surface-hover: #eaeaea;
+  --focus-ring: 0 0 0 0.2rem #8dcdff;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #e02365;
+  --highlight-text-color: #ffffff;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf4f3;
+  --red-100:#f6ccc6;
+  --red-200:#eea39a;
+  --red-300:#e77b6d;
+  --red-400:#df5240;
+  --red-500:#d82a13;
+  --red-600:#b82410;
+  --red-700:#971d0d;
+  --red-800:#77170a;
+  --red-900:#561108;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff6;
+  --primary-200:#91c6ef;
+  --primary-300:#61ade7;
+  --primary-400:#3093e0;
+  --primary-500:#007ad9;
+  --primary-600:#0068b8;
+  --primary-700:#005598;
+  --primary-800:#004377;
+  --primary-900:#003157;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #007ad9;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #007ad9;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 1px solid #c8c8c8;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #333333;
+  background: #eaeaea;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #c8c8c8;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #333333;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #333333;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #333333;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #a80000;
+  }
+  .p-text-secondary {
+    color: #848484;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #e02365;
+    color: #ffffff;
+    border-radius: 3px;
+  }
+  .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: #a80000;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #333333;
+    background: #ffffff;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #007ad9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d0d0d0;
+    color: #333333;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #d8dae2;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #d8dae2;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #d8dae2;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0.25rem;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #007ad9;
+    background: #007ad9;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #212121;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #a80000;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #212121;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #bababa;
+    color: #333333;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #666666;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #848484;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #eaeaea;
+    color: #848484;
+    border-top: 1px solid #a6a6a6;
+    border-left: 1px solid #a6a6a6;
+    border-bottom: 1px solid #a6a6a6;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #a6a6a6;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #cccccc;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #007ad9;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #cccccc;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7b7b7;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #116fbf;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #a80000;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    background: #ffffff;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #212121;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #666666;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #a80000;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #666666;
+  }
+  :-moz-placeholder {
+    color: #666666;
+  }
+  ::-moz-placeholder {
+    color: #666666;
+  }
+  :-ms-input-placeholder {
+    color: #666666;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-listbox.p-invalid {
+    border-color: #a80000;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    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: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .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.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #eaeaea;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e91224;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffba01;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #34a835;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #a6a6a6;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #007ad9;
+    background: #007ad9;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #212121;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #005b9f;
+    background: #005b9f;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #a80000;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #007ad9;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #005b9f;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #007ad9;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #005b9f;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e4018d;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #007ad9;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #007ad9;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #b5019f;
+  }
+  .p-selectbutton .p-button {
+    background: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .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: #212121;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #a80000;
+  }
+  .p-slider {
+    background: #c8c8c8;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #666666;
+    border-radius: 100%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-slider .p-slider-range {
+    background: #007ad9;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: 2px solid #666666;
+    border-color: #007ad9;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #848484;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #dadada;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #212121;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #a80000;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #007ad9;
+    border: 1px solid #007ad9;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+  }
+  .p-button:not(:disabled):active {
+    background: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #848484;
+    border-color: #848484;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #848484;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #007ad9;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #607d8b;
+    border: 1px solid #607d8b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #546e7a;
+    color: #ffffff;
+    border-color: #546e7a;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #b0bec5;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #455a64;
+    color: #ffffff;
+    border-color: #455a64;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #007ad9;
+    border: 1px solid #007ad9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #34a835;
+    border: 1px solid #34a835;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #107d11;
+    color: #ffffff;
+    border-color: #107d11;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #aae5aa;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #0c6b0d;
+    color: #ffffff;
+    border-color: #0c6b0d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #34a835;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #333333;
+    background: #ffba01;
+    border: 1px solid #ffba01;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ed990b;
+    color: #333333;
+    border-color: #ed990b;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ffeab4;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #d38b10;
+    color: #333333;
+    border-color: #d38b10;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffba01;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #8e24aa;
+    color: #ffffff;
+    border-color: #8e24aa;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7b1fa2;
+    color: #ffffff;
+    border-color: #7b1fa2;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #e91224;
+    border: 1px solid #e91224;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c01120;
+    color: #ffffff;
+    border-color: #c01120;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f9b4ba;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #a90000;
+    color: #ffffff;
+    border-color: #a90000;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e91224;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-button.p-button-link {
+    color: #005b9f;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #005b9f;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #005b9f;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #848484;
+    border-color: #848484;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #34a835;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffba01;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e91224;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #324249;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #222c31;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #f4f4f4;
+    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: #eaeaea;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #007ad9;
+    color: #ffffff;
+    border: 1px solid #007ad9;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+    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: #ffffff;
+    background: #e02365;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e0e0e0;
+    color: #333333;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #333333;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #e02365;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #e02365;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #007ad9;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #007ad9;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f4f4f4;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f9f9f9;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f9f9f9;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(0, 122, 217, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #007ad9;
+    color: #ffffff;
+    border: 1px solid #007ad9;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #333333;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #007ad9;
+    color: #ffffff;
+    border: 1px solid #007ad9;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #333333;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #d8dae2;
+    border-width: 1px;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #007ad9;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #d8dae2;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #007ad9;
+    color: #ffffff;
+    border: 1px solid #007ad9;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #007ad9;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f9f9f9;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #eaeaea;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #731033;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-paginator {
+    background: #f4f4f4;
+    color: #333333;
+    border: solid #c8c8c8;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 3px;
+  }
+  .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: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #333333;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #e02365;
+    border-color: #e02365;
+    color: #ffffff;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #333333;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #007ad9;
+    color: #ffffff;
+    border: 1px solid #007ad9;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #007ad9;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #ffffff;
+    background: #e02365;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #e02365;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #848484;
+  }
+  .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: #333333;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #b61a50;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #007ad9;
+    color: #ffffff;
+    border: 1px solid #007ad9;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #8dcdff;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+    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: #ffffff;
+    background: #e02365;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e0e0e0;
+    color: #333333;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #333333;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #333333;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #333333;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #007ad9;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #007ad9;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f9f9f9;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f9f9f9;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #e02365;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #c8c8c8;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #007ad9;
+    color: #ffffff;
+    background: #007ad9;
+    font-weight: 700;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+    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: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #333333;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    border-radius: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #848484;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #007ad9;
+    color: #ffffff;
+    background: #007ad9;
+    font-weight: 700;
+    border-radius: 3px;
+  }
+  .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.857rem 1rem;
+    color: #ffffff;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .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 #c8c8c8;
+  }
+  .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 #c8c8c8;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #007ad9;
+    padding: 0.857rem 1rem;
+    background: #007ad9;
+    color: #ffffff;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    border-radius: 3px;
+    color: #333333;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #eaeaea;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #d8dae2;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #d8dae2;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f8f8;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #007ad9;
+    border-width: 1px;
+    border-color: #007ad9;
+    background: #007ad9;
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #007ad9;
+    color: #ffffff;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #007ad9;
+    border: 1px solid #007ad9;
+    padding: 0.857rem 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(200, 200, 200, 0);
+    border-bottom-color: #bebebe;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #c8c8c8;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #c8c8c8;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #007ad9;
+    background: #007ad9;
+    color: #ffffff;
+    padding: 1rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #333333;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #007ad9;
+    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: #116fbf;
+    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(200, 200, 200, 0);
+    border-bottom-color: #bebebe;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #c8c8c8;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #333333;
+    color: #ffffff;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #333333;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #333333;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #333333;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #333333;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #007ad9;
+    padding: 0.857rem 1rem;
+    border: 1px solid #007ad9;
+    color: #ffffff;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #333333;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #333333;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #8dcdff;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #ffffff;
+      border: 1px solid #c8c8c8;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #d8dae2;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #333333;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #333333;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #333333;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #333333;
+      background: #d6d6d6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #007ad9;
+    color: #ffffff;
+    background: #007ad9;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #333333;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #848484;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #333333;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #d8dae2;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #007ad9;
+    border-width: 1px;
+    border-color: #007ad9;
+    background: #007ad9;
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-message.p-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #f4f4f4;
+    width: 1rem;
+    height: 1rem;
+    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: #eaeaea;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #e02365;
+    color: #ffffff;
+  }
+  .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: #e02365;
+    color: #ffffff;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #c8c8c8;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f4f4f4;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #eaeaea;
+    border-radius: 3px;
+  }
+  .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: #007ad9;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e91224;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007ad9;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #007ad9;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #007ad9;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #007ad9;
+    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: #607d8b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e91224;
+    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-tag {
+    background: #007ad9;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e91224;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-panel .p-panel-header .p-panel-header-icon {
+    color: #ffffff;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #5ab7ff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    color: #ffffff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #5ab7ff;
+  }
+}
+.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+  background-color: #27a0ff;
+  border-color: #27a0ff;
+  color: #ffffff;
+}
+.p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+  background: #e02365;
+  border-color: #e02365;
+  color: #ffffff;
+}
+.p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+  background: #e96694;
+  border-color: #e96694;
+  color: #ffffff;
+}
+
+.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+  background-color: #27a0ff;
+  border-color: #27a0ff;
+  color: #ffffff;
+}
+
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
new file mode 100644
index 0000000000..7581fcf8e8
--- /dev/null
+++ b/public/themes/nova-alt/theme.css
@@ -0,0 +1,6967 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f4f4f4;
+  --surface-c: #eaeaea;
+  --surface-d: #c8c8c8;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #333333;
+  --text-color-secondary: #848484;
+  --primary-color: #007ad9;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
+  --gray-50: #eef1f2;
+  --gray-100: #dde2e4;
+  --gray-200: #bbc5ca;
+  --gray-300: #98a8af;
+  --gray-400: #768b95;
+  --gray-500: #546e7a;
+  --gray-600: #435862;
+  --gray-700: #324249;
+  --gray-800: #222c31;
+  --gray-900: #111618;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #f4f4f4;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #c8c8c8;
+  --surface-hover: #eaeaea;
+  --focus-ring: 0 0 0 0.2rem #8dcdff;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #007ad9;
+  --highlight-text-color: #ffffff;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf4f3;
+  --red-100:#f6ccc6;
+  --red-200:#eea39a;
+  --red-300:#e77b6d;
+  --red-400:#df5240;
+  --red-500:#d82a13;
+  --red-600:#b82410;
+  --red-700:#971d0d;
+  --red-800:#77170a;
+  --red-900:#561108;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff6;
+  --primary-200:#91c6ef;
+  --primary-300:#61ade7;
+  --primary-400:#3093e0;
+  --primary-500:#007ad9;
+  --primary-600:#0068b8;
+  --primary-700:#005598;
+  --primary-800:#004377;
+  --primary-900:#003157;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #333333;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 1px solid #c8c8c8;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #333333;
+  background: #eaeaea;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #c8c8c8;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #333333;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #333333;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #333333;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #a80000;
+  }
+  .p-text-secondary {
+    color: #848484;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #007ad9;
+    color: #ffffff;
+    border-radius: 3px;
+  }
+  .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: #a80000;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #333333;
+    background: #ffffff;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #007ad9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d0d0d0;
+    color: #333333;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #d8dae2;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #d8dae2;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #d8dae2;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0.25rem;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #007ad9;
+    background: #007ad9;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #212121;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #a80000;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #ffffff;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #212121;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #bababa;
+    color: #333333;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #666666;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #848484;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #eaeaea;
+    color: #848484;
+    border-top: 1px solid #a6a6a6;
+    border-left: 1px solid #a6a6a6;
+    border-bottom: 1px solid #a6a6a6;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #a6a6a6;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #cccccc;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #007ad9;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #cccccc;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7b7b7;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #116fbf;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #a80000;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    background: #ffffff;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #212121;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #666666;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #a80000;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #666666;
+  }
+  :-moz-placeholder {
+    color: #666666;
+  }
+  ::-moz-placeholder {
+    color: #666666;
+  }
+  :-ms-input-placeholder {
+    color: #666666;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-listbox.p-invalid {
+    border-color: #a80000;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    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: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .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.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #eaeaea;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e91224;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffba01;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #34a835;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #a6a6a6;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #007ad9;
+    background: #007ad9;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #212121;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #005b9f;
+    background: #005b9f;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #a80000;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #007ad9;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #005b9f;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #007ad9;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #005b9f;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e4018d;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #007ad9;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #007ad9;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #b5019f;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button {
+    background: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .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: #212121;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #a80000;
+  }
+  .p-slider {
+    background: #c8c8c8;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #666666;
+    border-radius: 100%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-slider .p-slider-range {
+    background: #007ad9;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: 2px solid #666666;
+    border-color: #007ad9;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #848484;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #dadada;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #212121;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #a80000;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #007ad9;
+    border: 1px solid #007ad9;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+  }
+  .p-button:not(:disabled):active {
+    background: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #848484;
+    border-color: #848484;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #848484;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #007ad9;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #607d8b;
+    border: 1px solid #607d8b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #546e7a;
+    color: #ffffff;
+    border-color: #546e7a;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #b0bec5;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #455a64;
+    color: #ffffff;
+    border-color: #455a64;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #007ad9;
+    border: 1px solid #007ad9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #34a835;
+    border: 1px solid #34a835;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #107d11;
+    color: #ffffff;
+    border-color: #107d11;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #aae5aa;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #0c6b0d;
+    color: #ffffff;
+    border-color: #0c6b0d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #34a835;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #333333;
+    background: #ffba01;
+    border: 1px solid #ffba01;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ed990b;
+    color: #333333;
+    border-color: #ed990b;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ffeab4;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #d38b10;
+    color: #333333;
+    border-color: #d38b10;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffba01;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #8e24aa;
+    color: #ffffff;
+    border-color: #8e24aa;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7b1fa2;
+    color: #ffffff;
+    border-color: #7b1fa2;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #e91224;
+    border: 1px solid #e91224;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c01120;
+    color: #ffffff;
+    border-color: #c01120;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f9b4ba;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #a90000;
+    color: #ffffff;
+    border-color: #a90000;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e91224;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-button.p-button-link {
+    color: #005b9f;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #005b9f;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #005b9f;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #848484;
+    border-color: #848484;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #34a835;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffba01;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e91224;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #324249;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #222c31;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #f4f4f4;
+    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: #eaeaea;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #333333;
+    color: #ffffff;
+    border: 1px solid #333333;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+    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: #ffffff;
+    background: #007ad9;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e0e0e0;
+    color: #333333;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #333333;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #007ad9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #007ad9;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #007ad9;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #333333;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f4f4f4;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f9f9f9;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f9f9f9;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(0, 122, 217, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #333333;
+    color: #ffffff;
+    border: 1px solid #333333;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #333333;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #333333;
+    color: #ffffff;
+    border: 1px solid #333333;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #333333;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #d8dae2;
+    border-width: 1px;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #007ad9;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #d8dae2;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #333333;
+    color: #ffffff;
+    border: 1px solid #333333;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #333333;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f9f9f9;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #eaeaea;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #00325a;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-paginator {
+    background: #f4f4f4;
+    color: #333333;
+    border: solid #c8c8c8;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 3px;
+  }
+  .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: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #333333;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #333333;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #333333;
+    color: #ffffff;
+    border: 1px solid #333333;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #333333;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #848484;
+  }
+  .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: #333333;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0062ae;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #333333;
+    color: #ffffff;
+    border: 1px solid #333333;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #8dcdff;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+    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: #ffffff;
+    background: #007ad9;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e0e0e0;
+    color: #333333;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #333333;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #333333;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #333333;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #007ad9;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #333333;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f9f9f9;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f9f9f9;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #007ad9;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #c8c8c8;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #333333;
+    color: #ffffff;
+    background: #333333;
+    font-weight: 700;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+    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: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #333333;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    border-radius: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #848484;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #333333;
+    color: #ffffff;
+    background: #333333;
+    font-weight: 700;
+    border-radius: 3px;
+  }
+  .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.857rem 1rem;
+    color: #ffffff;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .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 #c8c8c8;
+  }
+  .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 #c8c8c8;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #333333;
+    padding: 0.857rem 1rem;
+    background: #333333;
+    color: #ffffff;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    border-radius: 3px;
+    color: #333333;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #eaeaea;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #d8dae2;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #d8dae2;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f8f8;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #333333;
+    border-width: 1px;
+    border-color: #333333;
+    background: #333333;
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #007ad9;
+    color: #ffffff;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #333333;
+    border: 1px solid #333333;
+    padding: 0.857rem 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(200, 200, 200, 0);
+    border-bottom-color: #bebebe;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #c8c8c8;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #c8c8c8;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #333333;
+    background: #333333;
+    color: #ffffff;
+    padding: 1rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #333333;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #007ad9;
+    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: #116fbf;
+    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(200, 200, 200, 0);
+    border-bottom-color: #bebebe;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #c8c8c8;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #333333;
+    color: #ffffff;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #333333;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #333333;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #333333;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #333333;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #333333;
+    padding: 0.857rem 1rem;
+    border: 1px solid #333333;
+    color: #ffffff;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #333333;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #333333;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #8dcdff;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #ffffff;
+      border: 1px solid #c8c8c8;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #d8dae2;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #333333;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #333333;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #333333;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #333333;
+      background: #d6d6d6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #333333;
+    color: #ffffff;
+    background: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #333333;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #848484;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #333333;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #d8dae2;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #333333;
+    border-width: 1px;
+    border-color: #333333;
+    background: #333333;
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-message.p-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #f4f4f4;
+    width: 1rem;
+    height: 1rem;
+    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: #eaeaea;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .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: #007ad9;
+    color: #ffffff;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #c8c8c8;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f4f4f4;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #eaeaea;
+    border-radius: 3px;
+  }
+  .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: #007ad9;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e91224;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007ad9;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #007ad9;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #007ad9;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #007ad9;
+    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: #607d8b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e91224;
+    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-tag {
+    background: #007ad9;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e91224;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-panel .p-panel-header .p-panel-header-icon {
+    color: #ffffff;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #b4b4b4;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    color: #ffffff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #b4b4b4;
+  }
+}
+.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+  background-color: #494949;
+  border: 1px solid #494949;
+  color: #ffffff;
+}
+
+.p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+  background-color: #494949;
+  border-color: #494949;
+  color: #ffffff;
+}
+
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
new file mode 100644
index 0000000000..4b50ada101
--- /dev/null
+++ b/public/themes/nova/theme.css
@@ -0,0 +1,6955 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f4f4f4;
+  --surface-c: #eaeaea;
+  --surface-d: #c8c8c8;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #333333;
+  --text-color-secondary: #848484;
+  --primary-color: #007ad9;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
+  --gray-50: #eef1f2;
+  --gray-100: #dde2e4;
+  --gray-200: #bbc5ca;
+  --gray-300: #98a8af;
+  --gray-400: #768b95;
+  --gray-500: #546e7a;
+  --gray-600: #435862;
+  --gray-700: #324249;
+  --gray-800: #222c31;
+  --gray-900: #111618;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #f4f4f4;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #c8c8c8;
+  --surface-hover: #eaeaea;
+  --focus-ring: 0 0 0 0.2rem #8dcdff;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #007ad9;
+  --highlight-text-color: #ffffff;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f3f8fc;
+  --blue-100:#c6dcef;
+  --blue-200:#98c1e3;
+  --blue-300:#6ba5d7;
+  --blue-400:#3d8aca;
+  --blue-500:#106ebe;
+  --blue-600:#0e5ea2;
+  --blue-700:#0b4d85;
+  --blue-800:#093d69;
+  --blue-900:#062c4c;
+  --green-50:#f7fbf6;
+  --green-100:#d6ead1;
+  --green-200:#b6d9ad;
+  --green-300:#96c889;
+  --green-400:#76b765;
+  --green-500:#56a641;
+  --green-600:#498d37;
+  --green-700:#3c742e;
+  --green-800:#2f5b24;
+  --green-900:#22421a;
+  --yellow-50:#fffcf5;
+  --yellow-100:#fdefcd;
+  --yellow-200:#fbe3a6;
+  --yellow-300:#f9d67f;
+  --yellow-400:#f8ca57;
+  --yellow-500:#f6bd30;
+  --yellow-600:#d1a129;
+  --yellow-700:#ac8422;
+  --yellow-800:#87681a;
+  --yellow-900:#624c13;
+  --cyan-50:#f4fbfd;
+  --cyan-100:#ccebf5;
+  --cyan-200:#a4dbed;
+  --cyan-300:#7ccce5;
+  --cyan-400:#54bcdd;
+  --cyan-500:#2cacd5;
+  --cyan-600:#2592b5;
+  --cyan-700:#1f7895;
+  --cyan-800:#185f75;
+  --cyan-900:#124555;
+  --pink-50:#fdf4f9;
+  --pink-100:#f6cce0;
+  --pink-200:#eea3c7;
+  --pink-300:#e77aae;
+  --pink-400:#df5296;
+  --pink-500:#d8297d;
+  --pink-600:#b8236a;
+  --pink-700:#971d58;
+  --pink-800:#771745;
+  --pink-900:#561032;
+  --indigo-50:#f4f6fd;
+  --indigo-100:#ccd3f5;
+  --indigo-200:#a4b0ed;
+  --indigo-300:#7c8de5;
+  --indigo-400:#546add;
+  --indigo-500:#2c47d5;
+  --indigo-600:#253cb5;
+  --indigo-700:#1f3295;
+  --indigo-800:#182775;
+  --indigo-900:#121c55;
+  --teal-50:#f6fbfa;
+  --teal-100:#d1eae5;
+  --teal-200:#add9d1;
+  --teal-300:#89c8bd;
+  --teal-400:#65b7a8;
+  --teal-500:#41a694;
+  --teal-600:#378d7e;
+  --teal-700:#2e7468;
+  --teal-800:#245b51;
+  --teal-900:#1a423b;
+  --orange-50:#fff9f5;
+  --orange-100:#fde4cd;
+  --orange-200:#fbcfa6;
+  --orange-300:#f9ba7f;
+  --orange-400:#f8a457;
+  --orange-500:#f68f30;
+  --orange-600:#d17a29;
+  --orange-700:#ac6422;
+  --orange-800:#874f1a;
+  --orange-900:#623913;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dae0e3;
+  --bluegray-200:#bdc7cd;
+  --bluegray-300:#a0aeb6;
+  --bluegray-400:#8295a0;
+  --bluegray-500:#657c8a;
+  --bluegray-600:#566975;
+  --bluegray-700:#475761;
+  --bluegray-800:#38444c;
+  --bluegray-900:#283237;
+  --purple-50:#f9f8fd;
+  --purple-100:#e1dff7;
+  --purple-200:#cac5f1;
+  --purple-300:#b2abeb;
+  --purple-400:#9b92e4;
+  --purple-500:#8378de;
+  --purple-600:#6f66bd;
+  --purple-700:#5c549b;
+  --purple-800:#48427a;
+  --purple-900:#343059;
+  --red-50:#fdf4f3;
+  --red-100:#f6ccc6;
+  --red-200:#eea39a;
+  --red-300:#e77b6d;
+  --red-400:#df5240;
+  --red-500:#d82a13;
+  --red-600:#b82410;
+  --red-700:#971d0d;
+  --red-800:#77170a;
+  --red-900:#561108;
+  --primary-50:#f2f8fd;
+  --primary-100:#c2dff6;
+  --primary-200:#91c6ef;
+  --primary-300:#61ade7;
+  --primary-400:#3093e0;
+  --primary-500:#007ad9;
+  --primary-600:#0068b8;
+  --primary-700:#005598;
+  --primary-800:#004377;
+  --primary-900:#003157;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f4f4f4;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #c8c8c8;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #848484;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 1px solid #c8c8c8;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 3px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #333333;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #333333;
+  background: #eaeaea;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #c8c8c8;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #333333;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #333333;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #333333;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #333333;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+.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: #007ad9;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #a80000;
+  }
+  .p-text-secondary {
+    color: #848484;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #007ad9;
+    color: #ffffff;
+    border-radius: 3px;
+  }
+  .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: #a80000;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #333333;
+    background: #ffffff;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #007ad9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d0d0d0;
+    color: #333333;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #d8dae2;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #d8dae2;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #d8dae2;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #eaeaea;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0.25rem;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #007ad9;
+    background: #007ad9;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #212121;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #a80000;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-highlight .p-checkbox .p-checkbox-box {
+    border-color: #ffffff;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #007ad9;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #005b9f;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #212121;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #bababa;
+    color: #333333;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #666666;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #848484;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #eaeaea;
+    color: #848484;
+    border-top: 1px solid #a6a6a6;
+    border-left: 1px solid #a6a6a6;
+    border-bottom: 1px solid #a6a6a6;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #a6a6a6;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #cccccc;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #007ad9;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #cccccc;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b7b7b7;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #116fbf;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #a80000;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #333333;
+    background: #ffffff;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #212121;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #666666;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #a80000;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #666666;
+  }
+  :-moz-placeholder {
+    color: #666666;
+  }
+  ::-moz-placeholder {
+    color: #666666;
+  }
+  :-ms-input-placeholder {
+    color: #666666;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #848484;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #a6a6a6;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-listbox.p-invalid {
+    border-color: #a80000;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    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: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .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.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #a80000;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #eaeaea;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e91224;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffba01;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #34a835;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #a6a6a6;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #a6a6a6;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #007ad9;
+    background: #007ad9;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #212121;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #005b9f;
+    background: #005b9f;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #a80000;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #007ad9;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #005b9f;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #007ad9;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #005b9f;
+  }
+  .p-highlight .p-radiobutton .p-radiobutton-box {
+    border-color: #ffffff;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e4018d;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #007ad9;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #007ad9;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #b5019f;
+  }
+  .p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button {
+    background: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .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: #212121;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #a80000;
+  }
+  .p-slider {
+    background: #c8c8c8;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #666666;
+    border-radius: 100%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-slider .p-slider-range {
+    background: #007ad9;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: 2px solid #666666;
+    border-color: #007ad9;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #a6a6a6;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #212121;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #666666;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #848484;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #848484;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #a80000;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #333333;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #dadada;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #dadada;
+    border: 1px solid #dadada;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #212121;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #116fbf;
+    border-color: #116fbf;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: #007ad9;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #a80000;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #007ad9;
+    border: 1px solid #007ad9;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+  }
+  .p-button:not(:disabled):active {
+    background: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #848484;
+    border-color: #848484;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #848484;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #007ad9;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #607d8b;
+    border: 1px solid #607d8b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #546e7a;
+    color: #ffffff;
+    border-color: #546e7a;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #b0bec5;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #455a64;
+    color: #ffffff;
+    border-color: #455a64;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #007ad9;
+    border: 1px solid #007ad9;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #116fbf;
+    color: #ffffff;
+    border-color: #116fbf;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #005b9f;
+    color: #ffffff;
+    border-color: #005b9f;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #34a835;
+    border: 1px solid #34a835;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #107d11;
+    color: #ffffff;
+    border-color: #107d11;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #aae5aa;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #0c6b0d;
+    color: #ffffff;
+    border-color: #0c6b0d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #34a835;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #333333;
+    background: #ffba01;
+    border: 1px solid #ffba01;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ed990b;
+    color: #333333;
+    border-color: #ed990b;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ffeab4;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #d38b10;
+    color: #333333;
+    border-color: #d38b10;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffba01;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #8e24aa;
+    color: #ffffff;
+    border-color: #8e24aa;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7b1fa2;
+    color: #ffffff;
+    border-color: #7b1fa2;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #e91224;
+    border: 1px solid #e91224;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c01120;
+    color: #ffffff;
+    border-color: #c01120;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f9b4ba;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #a90000;
+    color: #ffffff;
+    border-color: #a90000;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e91224;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-button.p-button-link {
+    color: #005b9f;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #005b9f;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #005b9f;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #848484;
+    border-color: #848484;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #eaeaea;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #d2d2d2;
+    color: #848484;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #007ad9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(0, 122, 217, 0.04);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(0, 122, 217, 0.16);
+    border-color: transparent;
+    color: #007ad9;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #34a835;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #34a835;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(52, 168, 53, 0.04);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(52, 168, 53, 0.16);
+    border-color: transparent;
+    color: #34a835;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffba01;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffba01;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 186, 1, 0.04);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 186, 1, 0.16);
+    border-color: transparent;
+    color: #ffba01;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e91224;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e91224;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(233, 18, 36, 0.04);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(233, 18, 36, 0.16);
+    border-color: transparent;
+    color: #e91224;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #324249;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #222c31;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #f4f4f4;
+    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: #eaeaea;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+    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: #ffffff;
+    background: #007ad9;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e0e0e0;
+    color: #333333;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #333333;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #007ad9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #007ad9;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #007ad9;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f4f4f4;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f4f4f4;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f9f9f9;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f9f9f9;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(0, 122, 217, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #333333;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #333333;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #d8dae2;
+    border-width: 1px;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #007ad9;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #eaeaea;
+    color: #333333;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #d8dae2;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f9f9f9;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #eaeaea;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #00325a;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #c8c8c8;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-paginator {
+    background: #f4f4f4;
+    color: #333333;
+    border: solid #c8c8c8;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 3px;
+  }
+  .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: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #333333;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #848484;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e0e0e0;
+    border-color: transparent;
+    color: #333333;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #333333;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #ffffff;
+    background: #007ad9;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #007ad9;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #848484;
+  }
+  .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: #333333;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .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: #ffffff;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #848484;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #0062ae;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #f4f4f4;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    font-weight: 700;
+    color: #333333;
+    background: #f4f4f4;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #8dcdff;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #848484;
+    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: #ffffff;
+    background: #007ad9;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e0e0e0;
+    color: #333333;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #333333;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #333333;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #8dcdff;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #ffffff;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #333333;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #007ad9;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f4f4f4;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f9f9f9;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #ffffff;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f9f9f9;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #007ad9;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #c8c8c8;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+    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: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #333333;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    border-radius: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #848484;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-radius: 3px;
+  }
+  .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.857rem 1rem;
+    color: #333333;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .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 #c8c8c8;
+  }
+  .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 #c8c8c8;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #c8c8c8;
+    padding: 0.857rem 1rem;
+    background: #f4f4f4;
+    color: #333333;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    border-radius: 3px;
+    color: #333333;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #eaeaea;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #d8dae2;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #d8dae2;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #848484;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #333333;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #333333;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #333333;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #007ad9;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f8f8;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    border-color: #c8c8c8;
+    background: #f4f4f4;
+    color: #333333;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #007ad9;
+    color: #ffffff;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #f4f4f4;
+    border: 1px solid #c8c8c8;
+    padding: 0.857rem 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(200, 200, 200, 0);
+    border-bottom-color: #bebebe;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #c8c8c8;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #c8c8c8;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #c8c8c8;
+    background: #f4f4f4;
+    color: #333333;
+    padding: 1rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #333333;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #007ad9;
+    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: #116fbf;
+    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(200, 200, 200, 0);
+    border-bottom-color: #bebebe;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #c8c8c8;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #007ad9;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #333333;
+    color: #ffffff;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #333333;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #333333;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #333333;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #333333;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f4f4f4;
+    padding: 0.857rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #333333;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #333333;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #8dcdff;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #333333;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #333333;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #8dcdff;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #ffffff;
+      border: 1px solid #c8c8c8;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #d8dae2;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #333333;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #333333;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #333333;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #333333;
+      background: #d6d6d6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #333333;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #333333;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #333333;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #c8c8c8;
+    color: #333333;
+    background: #f4f4f4;
+    border-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #333333;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #005b9f;
+    background: #005b9f;
+    color: #ffffff;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    color: #333333;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #333333;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #333333;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #333333;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #333333;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #848484;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #333333;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #d8dae2;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #c8c8c8;
+    border-width: 1px;
+    border-color: #c8c8c8;
+    background: #f4f4f4;
+    color: #333333;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #8dcdff;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #dbdbdb;
+    border-color: #dbdbdb;
+    color: #333333;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #007ad9;
+    border-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #333333;
+    transition: background-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #333333;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #333333;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #333333;
+    background: #d6d6d6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #333333;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-message.p-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #7fbcec;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #b7d8b7;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe399;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f8b7bd;
+    border: 0 none;
+    border-width: 0;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #f4f4f4;
+    width: 1rem;
+    height: 1rem;
+    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: #eaeaea;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #007ad9;
+    color: #ffffff;
+  }
+  .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: #007ad9;
+    color: #ffffff;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #c8c8c8;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #c8c8c8;
+    color: #333333;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f4f4f4;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #eaeaea;
+    border-radius: 3px;
+  }
+  .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: #007ad9;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e91224;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #eaeaea;
+    color: #333333;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #007ad9;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #007ad9;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #eaeaea;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #007ad9;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #333333;
+    border: 1px solid #c8c8c8;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #007ad9;
+    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: #607d8b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e91224;
+    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-tag {
+    background: #007ad9;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #34a835;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #007ad9;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffba01;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e91224;
+    color: #ffffff;
+  }
+}
+@layer primereact {
+  .p-panel .p-panel-header .p-panel-header-icon {
+    color: #848484;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #333333;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    color: #848484;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #333333;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
new file mode 100644
index 0000000000..4269284317
--- /dev/null
+++ b/public/themes/rhea/theme.css
@@ -0,0 +1,6946 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f4f4f4;
+  --surface-c: #eaeaea;
+  --surface-d: #dadada;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #7b95a3;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #eef1f2;
+  --surface-100: #dde2e4;
+  --surface-200: #bbc5ca;
+  --surface-300: #98a8af;
+  --surface-400: #768b95;
+  --surface-500: #546e7a;
+  --surface-600: #435862;
+  --surface-700: #324249;
+  --surface-800: #222c31;
+  --surface-900: #111618;
+  --gray-50: #eef1f2;
+  --gray-100: #dde2e4;
+  --gray-200: #bbc5ca;
+  --gray-300: #98a8af;
+  --gray-400: #768b95;
+  --gray-500: #546e7a;
+  --gray-600: #435862;
+  --gray-700: #324249;
+  --gray-800: #222c31;
+  --gray-900: #111618;
+  --content-padding: 0.571rem 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 2px;
+  --surface-ground: #f4f4f4;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dadada;
+  --surface-hover: #eaeaea;
+  --focus-ring: 0 0 0 0.2rem #e4e9ec;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #afd3c8;
+  --highlight-text-color: #385048;
+  color-scheme: light;
+}
+
+:root {
+  --blue-50:#f6fbfe;
+  --blue-100:#d4edfb;
+  --blue-200:#b2e0f7;
+  --blue-300:#91d2f4;
+  --blue-400:#6fc4f0;
+  --blue-500:#4db6ed;
+  --blue-600:#419bc9;
+  --blue-700:#367fa6;
+  --blue-800:#2a6482;
+  --blue-900:#1f495f;
+  --green-50:#f7fcf9;
+  --green-100:#daeee4;
+  --green-200:#bce1ce;
+  --green-300:#9fd4b8;
+  --green-400:#81c7a3;
+  --green-500:#64ba8d;
+  --green-600:#559e78;
+  --green-700:#468263;
+  --green-800:#37664e;
+  --green-900:#284a38;
+  --yellow-50:#fffdf6;
+  --yellow-100:#fef4d5;
+  --yellow-200:#fdecb4;
+  --yellow-300:#fce493;
+  --yellow-400:#fbdb71;
+  --yellow-500:#fad350;
+  --yellow-600:#d5b344;
+  --yellow-700:#af9438;
+  --yellow-800:#8a742c;
+  --yellow-900:#645420;
+  --cyan-50:#f7fefe;
+  --cyan-100:#daf8fa;
+  --cyan-200:#bdf3f6;
+  --cyan-300:#a0edf2;
+  --cyan-400:#83e8ee;
+  --cyan-500:#66e2ea;
+  --cyan-600:#57c0c7;
+  --cyan-700:#479ea4;
+  --cyan-800:#387c81;
+  --cyan-900:#295a5e;
+  --pink-50:#fef8fc;
+  --pink-100:#fadeef;
+  --pink-200:#f7c4e2;
+  --pink-300:#f3a9d5;
+  --pink-400:#f08fc9;
+  --pink-500:#ec75bc;
+  --pink-600:#c963a0;
+  --pink-700:#a55284;
+  --pink-800:#824067;
+  --pink-900:#5e2f4b;
+  --indigo-50:#f7f9fe;
+  --indigo-100:#d6e4f8;
+  --indigo-200:#b6cef2;
+  --indigo-300:#96b8ec;
+  --indigo-400:#75a3e7;
+  --indigo-500:#558de1;
+  --indigo-600:#4878bf;
+  --indigo-700:#3c639e;
+  --indigo-800:#2f4e7c;
+  --indigo-900:#22385a;
+  --teal-50:#f6fbfa;
+  --teal-100:#d4ebe7;
+  --teal-200:#b2dbd4;
+  --teal-300:#90ccc1;
+  --teal-400:#6ebcae;
+  --teal-500:#4cac9b;
+  --teal-600:#419284;
+  --teal-700:#35786d;
+  --teal-800:#2a5f55;
+  --teal-900:#1e453e;
+  --orange-50:#fefbf6;
+  --orange-100:#fbebd2;
+  --orange-200:#f9dbae;
+  --orange-300:#f6cb8a;
+  --orange-400:#f3bb67;
+  --orange-500:#f0ab43;
+  --orange-600:#cc9139;
+  --orange-700:#a8782f;
+  --orange-800:#845e25;
+  --orange-900:#60441b;
+  --bluegray-50:#f9fafa;
+  --bluegray-100:#e0e5e9;
+  --bluegray-200:#c8d1d7;
+  --bluegray-300:#b0bdc5;
+  --bluegray-400:#97a8b4;
+  --bluegray-500:#7f94a2;
+  --bluegray-600:#6c7e8a;
+  --bluegray-700:#596871;
+  --bluegray-800:#465159;
+  --bluegray-900:#333b41;
+  --purple-50:#fbf8fc;
+  --purple-100:#ecddf1;
+  --purple-200:#ddc2e6;
+  --purple-300:#cea7dc;
+  --purple-400:#bf8cd1;
+  --purple-500:#b071c6;
+  --purple-600:#9660a8;
+  --purple-700:#7b4f8b;
+  --purple-800:#613e6d;
+  --purple-900:#462d4f;
+  --red-50:#fff7f5;
+  --red-100:#ffd7cf;
+  --red-200:#ffb7a8;
+  --red-300:#ff9782;
+  --red-400:#ff775b;
+  --red-500:#ff5735;
+  --red-600:#d94a2d;
+  --red-700:#b33d25;
+  --red-800:#8c301d;
+  --red-900:#662315;
+  --primary-50:#f8fafa;
+  --primary-100:#dfe6e9;
+  --primary-200:#c6d1d7;
+  --primary-300:#adbdc6;
+  --primary-400:#94a9b4;
+  --primary-500:#7b95a3;
+  --primary-600:#697f8b;
+  --primary-700:#566872;
+  --primary-800:#44525a;
+  --primary-900:#313c41;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #7b95a3;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #7b95a3;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #a6a6a6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #a6a6a6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #a6a6a6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #666666;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #666666;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #666666;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #666666;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #666666;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #666666;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 1px solid #eaeaea;
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  border-radius: 2px;
+  padding: 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #666666;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #666666;
+  background: #f4f4f4;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.429rem 0.857rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dadada;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #666666;
+  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: 2px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #666666;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #666666;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #666666;
+}
+.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: #7b95a3;
+}
+.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: #7b95a3;
+}
+.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: #7b95a3;
+}
+.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: #7b95a3;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.5;
+  }
+  .p-error {
+    color: #e7a3a3;
+  }
+  .p-text-secondary {
+    color: #a6a6a6;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 2px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.429rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.786rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #a6a6a6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.2145rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #666666;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #afd3c8;
+    color: #385048;
+    border-radius: 2px;
+  }
+  .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: #e7a3a3;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #666666;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #e7a3a3;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-datepicker {
+    padding: 0.857rem;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #dadada;
+    border-radius: 2px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #666666;
+    background: #ffffff;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #666666;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #7b95a3;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    margin-right: 0.5rem;
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.857rem 0;
+  }
+  .p-datepicker table th {
+    padding: 0.5rem;
+  }
+  .p-datepicker table th > span {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 2px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d0d0d0;
+    color: #666666;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 0.857rem 0 0.429rem 0;
+    border-top: 1px solid #dadada;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dadada;
+    padding: 0.857rem 0 0.429rem 0;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-datepicker .p-timepicker button:last-child {
+    margin-top: 0.2em;
+  }
+  .p-datepicker .p-timepicker span {
+    font-size: 1.286rem;
+  }
+  .p-datepicker .p-timepicker > div {
+    padding: 0 0.429rem;
+  }
+  .p-datepicker.p-datepicker-timeonly .p-timepicker {
+    border-top: 0 none;
+  }
+  .p-datepicker .p-monthpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.857rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dadada;
+    padding-right: 0.857rem;
+    padding-left: 0.857rem;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
+    padding-left: 0;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f4f4f4;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f4f4f4;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f4f4f4;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0.25rem;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #dadada;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #a6a6a6;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.429rem 0.429rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #a6a6a6;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #a6a6a6;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #e7a3a3;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.429rem 0.857rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 1px solid #dadada;
+    border-radius: 2px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #666666;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #666666;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #7b95a3;
+    background: #7b95a3;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #a6a6a6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #617c8a;
+    background: #617c8a;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #e7a3a3;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #7b95a3;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #617c8a;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #7b95a3;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #617c8a;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #7b95a3;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f4f4f4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #617c8a;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #a6a6a6;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.2145rem 0.429rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #dadada;
+    color: #666666;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #cbcbcb;
+    color: #666666;
+  }
+  .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.2145rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #666666;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #e7a3a3;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #dadada;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #a6a6a6;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.429rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #a6a6a6;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #a6a6a6;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #a6a6a6;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #e7a3a3;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #dadada;
+    color: #666666;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.429rem;
+    margin-right: -1.429rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #666666;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #666666;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #dbdbdb;
+    color: #666666;
+    border-top: 1px solid #dadada;
+    border-left: 1px solid #dadada;
+    border-bottom: 1px solid #dadada;
+    padding: 0.429rem 0.429rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #dadada;
+  }
+  .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: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .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: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #e7a3a3;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ffffff;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #7b95a3;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #afd3c8;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #385048;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #d8dae2;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #afd3c8;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #e7a3a3;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #666666;
+    background: #ffffff;
+    padding: 0.429rem 0.429rem;
+    border: 1px solid #dadada;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #a6a6a6;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #e7a3a3;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-float-label > label {
+    left: 0.429rem;
+    color: #a6a6a6;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #e7a3a3;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 1.858rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 1.858rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 1.858rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #a6a6a6;
+  }
+  :-moz-placeholder {
+    color: #a6a6a6;
+  }
+  ::-moz-placeholder {
+    color: #a6a6a6;
+  }
+  :-ms-input-placeholder {
+    color: #a6a6a6;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #f4f4f4;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.375375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.53625rem 0.53625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #dadada;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #dadada;
+    color: #666666;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.429rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.857rem;
+    color: #666666;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #666666;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-listbox.p-invalid {
+    border-color: #e7a3a3;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #dadada;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #a6a6a6;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #a6a6a6;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #dadada;
+    color: #666666;
+    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: #a6a6a6;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #e7a3a3;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #dadada;
+    color: #666666;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.429rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .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: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.429rem 0.857rem;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .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.857rem;
+    color: #666666;
+    background: #f4f4f4;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #666666;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #e7a3a3;
+  }
+  .p-password-panel {
+    padding: 0.571rem 1rem;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #f1f1f1;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 2px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #efefef;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f4b6b6;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe38e;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #a3e2c6;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #dadada;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #666666;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #7b95a3;
+    background: #7b95a3;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #a6a6a6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #617c8a;
+    background: #617c8a;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #e7a3a3;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #7b95a3;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #617c8a;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #7b95a3;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #617c8a;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #666666;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f3b9b9;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #7b95a3;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #7b95a3;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #d66161;
+  }
+  .p-selectbutton .p-button {
+    background: #eaeaea;
+    border: 1px solid #eaeaea;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .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: #666666;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #afd3c8;
+    border-color: #afd3c8;
+    color: #385048;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #385048;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #8dc8b5;
+    border-color: #8dc8b5;
+    color: #385048;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #385048;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #e7a3a3;
+  }
+  .p-slider {
+    background: #c4c4c4;
+    border: 0 none;
+    border-radius: 2px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.7145rem;
+    margin-left: -0.7145rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.7145rem;
+    margin-bottom: -0.7145rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.429rem;
+    width: 1.429rem;
+    background: #ffffff;
+    border: 2px solid #7f7f7f;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-slider .p-slider-range {
+    background: #7b95a3;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: 2px solid #7f7f7f;
+    border-color: #7b95a3;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #dadada;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #a6a6a6;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.429rem 0.429rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #a6a6a6;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.2145rem 0.429rem;
+    margin-right: 0.5rem;
+    background: #dadada;
+    color: #666666;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #a6a6a6;
+    width: 2.357rem;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #a6a6a6;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #e7a3a3;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.2145rem 0.429rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #dadada;
+    color: #666666;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.429rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 2.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 1.858rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.429rem 0.857rem;
+    color: #666666;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f4f4f4;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #f4f4f4;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+  }
+  .p-togglebutton .p-button {
+    background: #eaeaea;
+    border: 1px solid #eaeaea;
+    color: #333333;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #afd3c8;
+    border-color: #afd3c8;
+    color: #385048;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #385048;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #c8c8c8;
+    border-color: #c8c8c8;
+    color: #333333;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #666666;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #8dc8b5;
+    border-color: #8dc8b5;
+    color: #385048;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #385048;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: #7b95a3;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #e7a3a3;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #7b95a3;
+    border: 1px solid #7b95a3;
+    padding: 0.429rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #6c8999;
+    color: #ffffff;
+    border-color: #6c8999;
+  }
+  .p-button:not(:disabled):active {
+    background: #617c8a;
+    color: #ffffff;
+    border-color: #617c8a;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #7b95a3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(123, 149, 163, 0.04);
+    color: #7b95a3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(123, 149, 163, 0.16);
+    color: #7b95a3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #a6a6a6;
+    border-color: #a6a6a6;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f4f4f4;
+    color: #a6a6a6;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dbdbdb;
+    color: #a6a6a6;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #7b95a3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(123, 149, 163, 0.04);
+    color: #7b95a3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(123, 149, 163, 0.16);
+    color: #7b95a3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #a6a6a6;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f4f4f4;
+    color: #a6a6a6;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dbdbdb;
+    color: #a6a6a6;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #7b95a3;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.429rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #a3897b;
+    border: 1px solid #8e6f5f;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #8e6f5f;
+    color: #ffffff;
+    border-color: #7a5743;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bfaaa0;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #7a5743;
+    color: #ffffff;
+    border-color: #6e4e3c;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #a3897b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(163, 137, 123, 0.04);
+    color: #a3897b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(163, 137, 123, 0.16);
+    color: #a3897b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #a3897b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(163, 137, 123, 0.04);
+    border-color: transparent;
+    color: #a3897b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(163, 137, 123, 0.16);
+    border-color: transparent;
+    color: #a3897b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #3d4447;
+    background: #a3def8;
+    border: 1px solid #79c8eb;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #81cbec;
+    color: #3d4447;
+    border-color: #60b7de;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #d2effc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #3ea9db;
+    color: #3d4447;
+    border-color: #2987b1;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #a3def8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(163, 222, 248, 0.04);
+    color: #a3def8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(163, 222, 248, 0.16);
+    color: #a3def8;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #a3def8;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(163, 222, 248, 0.04);
+    border-color: transparent;
+    color: #a3def8;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(163, 222, 248, 0.16);
+    border-color: transparent;
+    color: #a3def8;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #323e39;
+    background: #a3e2c6;
+    border: 1px solid #80caaa;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #80caaa;
+    color: #323e39;
+    border-color: #5ea285;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #caeede;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #31b57c;
+    color: #323e39;
+    border-color: #5ea285;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #a3e2c6;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(163, 226, 198, 0.04);
+    color: #a3e2c6;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(163, 226, 198, 0.16);
+    color: #a3e2c6;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #a3e2c6;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(163, 226, 198, 0.04);
+    border-color: transparent;
+    color: #a3e2c6;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(163, 226, 198, 0.16);
+    border-color: transparent;
+    color: #a3e2c6;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #333333;
+    background: #ffe38e;
+    border: 1px solid #ffd95e;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd95e;
+    color: #333333;
+    border-color: #ffce3c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffce3c;
+    color: #333333;
+    border-color: #ffc62a;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe38e;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 227, 142, 0.04);
+    color: #ffe38e;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 227, 142, 0.16);
+    color: #ffe38e;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe38e;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 227, 142, 0.04);
+    border-color: transparent;
+    color: #ffe38e;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 227, 142, 0.16);
+    border-color: transparent;
+    color: #ffe38e;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #333333;
+    background: #e9bef1;
+    border: 1px solid #de9eea;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #de9eea;
+    color: #333333;
+    border-color: #d37de3;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f0d3f6;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #d37de3;
+    color: #333333;
+    border-color: #c85ddc;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #e9bef1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(233, 190, 241, 0.04);
+    color: #e9bef1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(233, 190, 241, 0.16);
+    color: #e9bef1;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #e9bef1;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(233, 190, 241, 0.04);
+    border-color: transparent;
+    color: #e9bef1;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(233, 190, 241, 0.16);
+    border-color: transparent;
+    color: #e9bef1;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #262222;
+    background: #f4b6b6;
+    border: 1px solid #e38787;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #ef9999;
+    color: #262222;
+    border-color: #cb5858;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fbe2e2;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #eb5656;
+    color: #262222;
+    border-color: #b73737;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f4b6b6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 182, 182, 0.04);
+    color: #f4b6b6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 182, 182, 0.16);
+    color: #f4b6b6;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f4b6b6;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 182, 182, 0.04);
+    border-color: transparent;
+    color: #f4b6b6;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 182, 182, 0.16);
+    border-color: transparent;
+    color: #f4b6b6;
+  }
+  .p-button.p-button-link {
+    color: #617c8a;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #617c8a;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #617c8a;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 2px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #7b95a3;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(123, 149, 163, 0.04);
+    color: #7b95a3;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(123, 149, 163, 0.16);
+    color: #7b95a3;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #a6a6a6;
+    border-color: #a6a6a6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f4f4f4;
+    color: #a6a6a6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dbdbdb;
+    color: #a6a6a6;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #7b95a3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(123, 149, 163, 0.04);
+    color: #7b95a3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(123, 149, 163, 0.16);
+    color: #7b95a3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #a6a6a6;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f4f4f4;
+    color: #a6a6a6;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dbdbdb;
+    color: #a6a6a6;
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.375375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.53625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a3897b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(163, 137, 123, 0.04);
+    color: #a3897b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(163, 137, 123, 0.16);
+    color: #a3897b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a3897b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(163, 137, 123, 0.04);
+    border-color: transparent;
+    color: #a3897b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(163, 137, 123, 0.16);
+    border-color: transparent;
+    color: #a3897b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a3def8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(163, 222, 248, 0.04);
+    color: #a3def8;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(163, 222, 248, 0.16);
+    color: #a3def8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a3def8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(163, 222, 248, 0.04);
+    border-color: transparent;
+    color: #a3def8;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(163, 222, 248, 0.16);
+    border-color: transparent;
+    color: #a3def8;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a3e2c6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(163, 226, 198, 0.04);
+    color: #a3e2c6;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(163, 226, 198, 0.16);
+    color: #a3e2c6;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a3e2c6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(163, 226, 198, 0.04);
+    border-color: transparent;
+    color: #a3e2c6;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(163, 226, 198, 0.16);
+    border-color: transparent;
+    color: #a3e2c6;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe38e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 227, 142, 0.04);
+    color: #ffe38e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 227, 142, 0.16);
+    color: #ffe38e;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe38e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 227, 142, 0.04);
+    border-color: transparent;
+    color: #ffe38e;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 227, 142, 0.16);
+    border-color: transparent;
+    color: #ffe38e;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e9bef1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(233, 190, 241, 0.04);
+    color: #e9bef1;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(233, 190, 241, 0.16);
+    color: #e9bef1;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e9bef1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(233, 190, 241, 0.04);
+    border-color: transparent;
+    color: #e9bef1;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(233, 190, 241, 0.16);
+    border-color: transparent;
+    color: #e9bef1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f4b6b6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 182, 182, 0.04);
+    color: #f4b6b6;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 182, 182, 0.16);
+    color: #f4b6b6;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f4b6b6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 182, 182, 0.04);
+    border-color: transparent;
+    color: #f4b6b6;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 182, 182, 0.16);
+    border-color: transparent;
+    color: #f4b6b6;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #324249;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #222c31;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 2px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #7b95a3;
+    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: #617c8a;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #7b95a3;
+    color: #ffffff;
+    border: 1px solid #7b95a3;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #dadada;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #dadada;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #666666;
+    background: #ffffff;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #dadada;
+    border-width: 1px;
+    font-weight: 700;
+    color: #666666;
+    background: #ffffff;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #666666;
+    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: #385048;
+    background: #afd3c8;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #eaeaea;
+    color: #666666;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #666666;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #385048;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #385048;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #e4e9ec;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dadada;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .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: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #e4e9ec;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #afd3c8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #afd3c8;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #666666;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #e4e9ec;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #666666;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #e4e9ec;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #eaeaea;
+    color: #666666;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #7b95a3;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #7b95a3;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #f8f8f8;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #385048;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #385048;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8f8;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.72845rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(123, 149, 163, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #7b95a3;
+    color: #ffffff;
+    border: 1px solid #7b95a3;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #666666;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #dadada;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #7b95a3;
+    color: #ffffff;
+    border: 1px solid #7b95a3;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #666666;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: 1px solid #dadada;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #dadada;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .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: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: transparent;
+    color: #666666;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    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.429rem 0.857rem;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #666666;
+    background: #f4f4f4;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e4e9ec;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.429rem 0.857rem;
+    border-bottom: 1px solid #dadada;
+    color: #666666;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 0.571rem 1rem;
+    border-bottom: 1px solid #dadada;
+  }
+  .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.571rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 0.571rem 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #7b95a3;
+    color: #ffffff;
+    border: 1px solid #7b95a3;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #7b95a3;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    padding: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f4f4f4;
+    color: #666666;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #f8f8f8;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f4f4f4;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f4f4f4;
+    color: #666666;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #5da68f;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dadada;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dadada;
+    border-color: #c8c8c8;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    padding: 0.571rem 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #666666;
+    border: solid #dadada;
+    border-width: 1px;
+    padding: 0;
+    border-radius: 2px;
+  }
+  .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: #666666;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #f4f4f4;
+    border-color: transparent;
+    color: #666666;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #666666;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #666666;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #afd3c8;
+    border-color: #afd3c8;
+    color: #385048;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f4f4f4;
+    border-color: transparent;
+    color: #666666;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 0.571rem 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #7b95a3;
+    color: #ffffff;
+    border: 1px solid #7b95a3;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 0.857rem 1rem;
+    background: #ffffff;
+    border: 1px solid #7b95a3;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.429rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    padding: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.429rem 0.857rem;
+    margin: 0;
+    border: 0 none;
+    color: #666666;
+    background: transparent;
+    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f4f4f4;
+    color: #666666;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #385048;
+    background: #afd3c8;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #aed3c7;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    padding: 0.571rem 1rem;
+    border-radius: 2px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e4e9ec;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 2px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #a6a6a6;
+  }
+  .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: #666666;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .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: #385048;
+  }
+  .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: #385048;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f4f4f4;
+    color: #666666;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f4f4f4;
+    color: #666666;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.429rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.429rem;
+    color: #a6a6a6;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #7db8a6;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 1px 0 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 1px 1px 1px;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #7b95a3;
+    color: #ffffff;
+    border: 1px solid #7b95a3;
+    border-width: 1px 1px 0 1px;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #dadada;
+    border-width: 0 1px 1px 1px;
+    padding: 0.571rem 1rem;
+    font-weight: normal;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #dadada;
+    border-width: 1px 1px 1px 1px;
+    font-weight: 700;
+    color: #666666;
+    background: #ffffff;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 0.571rem 0.857rem;
+    border: 1px solid #dadada;
+    border-width: 1px;
+    font-weight: 700;
+    color: #666666;
+    background: #ffffff;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #e4e9ec;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #666666;
+    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: #385048;
+    background: #afd3c8;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #666666;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #666666;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #385048;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dadada;
+    border-width: 1px;
+    padding: 0.571rem 0.857rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #666666;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #e4e9ec;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #385048;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #385048;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #eaeaea;
+    color: #666666;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #666666;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #7b95a3;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #7b95a3;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #f8f8f8;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #385048;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #385048;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #f8f8f8;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.749875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.48535rem 0.72845rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.48535rem 0.85rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.07125rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 0.71375rem 1.07125rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.71375rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 0 none;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #afd3c8;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #c8c8c8;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 0.857rem 1rem;
+    border: 1px solid #7b95a3;
+    color: #ffffff;
+    background: #7b95a3;
+    font-weight: 700;
+    border-radius: 2px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #617c8a;
+    border-color: #617c8a;
+    color: #ffffff;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #afd3c8;
+    border-color: #dadada;
+    color: #385048;
+    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: #8dc8b5;
+    background: #8dc8b5;
+    color: #385048;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 2px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #666666;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    border-radius: 2px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #a6a6a6;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    border-radius: 2px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 0.857rem 1rem;
+    border: 1px solid #7b95a3;
+    color: #ffffff;
+    background: #7b95a3;
+    font-weight: 700;
+    border-radius: 2px;
+  }
+  .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.857rem 1rem;
+    color: #ffffff;
+    border-radius: 2px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #617c8a;
+    border-color: #617c8a;
+    color: #ffffff;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 0.571rem 1rem;
+  }
+  .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 #dadada;
+  }
+  .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 #dadada;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #7b95a3;
+    padding: 0.857rem 1rem;
+    background: #7b95a3;
+    color: #ffffff;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    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: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 0.571rem 1rem;
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.571rem 1rem;
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dadada;
+    background: #ffffff;
+    border-radius: 2px;
+    color: #666666;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #eaeaea;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dadada;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dadada;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #a6a6a6;
+    border: 1px solid #c8c8c8;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #a6a6a6;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #666666;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #7b95a3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    color: #666666;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #c8c8c8;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #666666;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #7b95a3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f8f8;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 2px;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: 1px solid #7b95a3;
+    border-width: 1px;
+    border-color: #7b95a3;
+    background: #7b95a3;
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #617c8a;
+    border-color: #617c8a;
+    color: #ffffff;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #afd3c8;
+    border-color: #dadada;
+    color: #385048;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #afd3c8;
+    color: #385048;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #dadada;
+    color: #666666;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-toolbar {
+    background: #7b95a3;
+    border: 1px solid #7b95a3;
+    padding: 0.857rem 1rem;
+    border-radius: 2px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #f1f1f1;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 0.571rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(241, 241, 241, 0);
+    border-bottom-color: #e5e5e5;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #f1f1f1;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border: 1px solid #f1f1f1;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 1px solid #7b95a3;
+    background: #7b95a3;
+    color: #ffffff;
+    padding: 1rem;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #666666;
+    padding: 1rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    padding: 0.571rem 1rem;
+    text-align: right;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #f1f1f1;
+    border-radius: 2px;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #7b95a3;
+    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: #6c8999;
+    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(241, 241, 241, 0);
+    border-bottom-color: #e5e5e5;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #f1f1f1;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #f1f1f1;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 0.857rem 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #a6a6a6;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #666666;
+    border-color: transparent;
+    background: transparent;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 0.571rem 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #afd3c8;
+    color: #385048;
+    padding: 0.429rem 0.429rem;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 2px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #afd3c8;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #afd3c8;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #afd3c8;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #afd3c8;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #7b95a3;
+    padding: 0.857rem 1rem;
+    border: 1px solid #7b95a3;
+    color: #ffffff;
+    border-bottom: 0 none;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 0.571rem 1rem;
+    border: 1px solid #dadada;
+    color: #666666;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 0.571rem 0.857rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    border-radius: 2px;
+    padding: 0.571rem 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #666666;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #666666;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #666666;
+  }
+  .p-contextmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 2px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 2px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e4e9ec;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #c8c8c8;
+    border-radius: 2px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #666666;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #666666;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #c8c8c8;
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.857rem;
+    color: #666666;
+    background: #f4f4f4;
+    font-weight: 700;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #c8c8c8;
+    border-radius: 2px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #666666;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.571rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 4.285rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.999rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 7.713rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 9.427rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #666666;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #666666;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #e4e9ec;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0;
+      background: #ffffff;
+      border: 1px solid #eaeaea;
+      box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #dadada;
+      margin: 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #666666;
+      transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #666666;
+      padding: 0.857rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #666666;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #666666;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #666666;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #666666;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #666666;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #666666;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #666666;
+      background: #e0e0e0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #666666;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #666666;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #666666;
+      background: #eaeaea;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #666666;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #666666;
+    }
+    .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.571rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li a {
+      padding-left: 4.285rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li a {
+      padding-left: 5.999rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li a {
+      padding-left: 7.713rem;
+    }
+    .p-menubar .p-menubar-root-list ul li ul li ul li ul li ul li a {
+      padding-left: 9.427rem;
+    }
+    .p-menubar.p-menubar-mobile-active .p-menubar-root-list {
+      display: flex;
+      flex-direction: column;
+      top: 100%;
+      left: 0;
+      z-index: 1;
+    }
+  }
+  .p-panelmenu .p-panelmenu-header {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #7b95a3;
+    color: #ffffff;
+    background: #7b95a3;
+    border-radius: 2px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #617c8a;
+    border-color: #617c8a;
+    color: #ffffff;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #afd3c8;
+    border-color: #dadada;
+    color: #385048;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #8dc8b5;
+    background: #8dc8b5;
+    color: #385048;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0;
+    border: 1px solid #dadada;
+    background: #ffffff;
+    color: #666666;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 2px;
+  }
+  .p-slidemenu {
+    padding: 0;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #c8c8c8;
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #eaeaea;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #666666;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #666666;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.857rem;
+    color: #666666;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #a6a6a6;
+    border: 1px solid #c8c8c8;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #a6a6a6;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #666666;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dadada;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 0 none;
+    border-width: 1px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 2px;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: 1px solid #7b95a3;
+    border-width: 1px;
+    border-color: #7b95a3;
+    background: #7b95a3;
+    color: #ffffff;
+    padding: 0.857rem 1rem;
+    font-weight: 700;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    margin: 0 0 -1px 0;
+    height: calc(100% + 1px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #617c8a;
+    border-color: #617c8a;
+    color: #ffffff;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #afd3c8;
+    border-color: #dadada;
+    color: #385048;
+  }
+  .p-tieredmenu {
+    padding: 0;
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #c8c8c8;
+    border-radius: 2px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #666666;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #666666;
+    padding: 0.857rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #666666;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #666666;
+    background: #e0e0e0;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #666666;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem;
+    margin: 0;
+    border-radius: 2px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #a3def8;
+    border: 1px solid #79c8eb;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #a3e2c6;
+    border: 1px solid #a3e2c6;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffe277;
+    border: 1px solid #ffe277;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ff8b8b;
+    border: 1px solid #ff8b8b;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #212121;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 2px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-message.p-message-info {
+    background: #a3def8;
+    border: 1px solid #79c8eb;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-success {
+    background: #a3e2c6;
+    border: 1px solid #a3e2c6;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-warn {
+    background: #ffe277;
+    border: 1px solid #ffe277;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #212121;
+  }
+  .p-message.p-message-error {
+    background: #ff8b8b;
+    border: 1px solid #ff8b8b;
+    border-width: 1px;
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #212121;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #212121;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 2px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
+    margin: 0 0 0 0.5rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #a3def8;
+    border: 1px solid #79c8eb;
+    border-width: 1px;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #a3e2c6;
+    border: 1px solid #a3e2c6;
+    border-width: 1px;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffe277;
+    border: 1px solid #ffe277;
+    border-width: 1px;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ff8b8b;
+    border: 1px solid #ff8b8b;
+    border-width: 1px;
+    color: #212121;
+  }
+  .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: #212121;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #ebedef;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: rgba(0, 0, 0, 0.2);
+    color: #aeb6bf;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 2px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(0, 0, 0, 0.3);
+    color: #ebedef;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #ebedef;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #7b95a3;
+    width: 1rem;
+    height: 1rem;
+    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: #617c8a;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #afd3c8;
+    color: #385048;
+  }
+  .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: #afd3c8;
+    color: #385048;
+  }
+  .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: #aeb6bf;
+    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: #aeb6bf;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dadada;
+    border-radius: 2px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dadada;
+    color: #666666;
+    border-radius: 16px;
+    padding: 0 0.429rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.2145rem;
+    margin-bottom: 0.2145rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 1.929rem;
+    height: 1.929rem;
+    margin-left: -0.429rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f4f4f4;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #dadada;
+    border-radius: 2px;
+  }
+  .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: #7b95a3;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 2px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #a3e2c6;
+    color: #323e39;
+  }
+  .p-tag.p-tag-info {
+    background-color: #a3def8;
+    color: #3d4447;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe38e;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f4b6b6;
+    color: #262222;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.429rem 0.429rem;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f4f4f4;
+    color: #666666;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #efefef;
+    border-radius: 2px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #7b95a3;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 24px;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #7b95a3;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 24px;
+    background: #efefef;
+    border-radius: 2px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #7b95a3;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 24px;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #666666;
+    border: 1px solid #dadada;
+    padding: 0.571rem 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #7b95a3;
+    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: #a3897b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #a3e2c6;
+    color: #323e39;
+  }
+  .p-badge.p-badge-info {
+    background-color: #a3def8;
+    color: #3d4447;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe38e;
+    color: #333333;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f4b6b6;
+    color: #262222;
+  }
+  .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-tag {
+    background: #7b95a3;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 2px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #a3e2c6;
+    color: #323e39;
+  }
+  .p-tag.p-tag-info {
+    background-color: #a3def8;
+    color: #3d4447;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe38e;
+    color: #333333;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f4b6b6;
+    color: #262222;
+  }
+}
+@layer primereact {
+  .p-panel .p-panel-header .p-panel-header-icon {
+    color: #ffffff;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #ffffff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    color: #ffffff;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
new file mode 100644
index 0000000000..956d473952
--- /dev/null
+++ b/public/themes/saga-blue/theme.css
@@ -0,0 +1,6995 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #2196f3;
+  --primary-color-text: #ffffff;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #f8f9fa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #e9ecef;
+  --focus-ring: 0 0 0 0.2rem #a6d5fa;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #e3f2fd;
+  --highlight-text-color: #495057;
+  color-scheme: light;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#f4fafe;
+  --primary-100:#cae6fc;
+  --primary-200:#a0d2fa;
+  --primary-300:#75bef8;
+  --primary-400:#4baaf5;
+  --primary-500:#2196f3;
+  --primary-600:#1c80cf;
+  --primary-700:#1769aa;
+  --primary-800:#125386;
+  --primary-900:#0d3c61;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f8f9fa;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  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);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #495057;
+  background: #e9ecef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #495057;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #495057;
+}
+.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: #2196f3;
+}
+.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: #2196f3;
+}
+.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: #2196f3;
+}
+.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: #2196f3;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #f44336;
+  }
+  .p-text-secondary {
+    color: #6c757d;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #2196f3;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #e3f2fd;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .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: #f44336;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #2196f3;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ced4da;
+    color: #495057;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dee2e6;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #2196f3;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #2196f3;
+    background: #2196f3;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #2196f3;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #0b7ad1;
+    background: #0b7ad1;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44336;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #2196f3;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0b7ad1;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #2196f3;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0b7ad1;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #2196f3;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #0b7ad1;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #2196f3;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #ced4da;
+    color: #495057;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #2196f3;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #e9ecef;
+    color: #6c757d;
+    border-top: 1px solid #ced4da;
+    border-left: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #ced4da;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #2196f3;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b6bfc8;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #0d89ec;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44336;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #2196f3;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: #6c757d;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44336;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6c757d;
+  }
+  :-moz-placeholder {
+    color: #6c757d;
+  }
+  ::-moz-placeholder {
+    color: #6c757d;
+  }
+  :-ms-input-placeholder {
+    color: #6c757d;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44336;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #2196f3;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    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: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #dee2e6;
+  }
+  .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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #ced4da;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #2196f3;
+    background: #2196f3;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #2196f3;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #0b7ad1;
+    background: #0b7ad1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44336;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #2196f3;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0b7ad1;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #2196f3;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #0b7ad1;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e74c3c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #2196f3;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #2196f3;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #c0392b;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .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: #6c757d;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #2196f3;
+    border-color: #2196f3;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #0d89ec;
+    border-color: #0d89ec;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-slider {
+    background: #dee2e6;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #2196f3;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-slider .p-slider-range {
+    background: #2196f3;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #2196f3;
+    border-color: #2196f3;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #2196f3;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #2196f3;
+    border-color: #2196f3;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #0d89ec;
+    border-color: #0d89ec;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: #2196f3;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #2196f3;
+    border: 1px solid #2196f3;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #0d89ec;
+    color: #ffffff;
+    border-color: #0d89ec;
+  }
+  .p-button:not(:disabled):active {
+    background: #0b7ad1;
+    color: #ffffff;
+    border-color: #0b7ad1;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #2196f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #2196f3;
+    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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #607d8b;
+    border: 1px solid #607d8b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #56717d;
+    color: #ffffff;
+    border-color: #56717d;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #beccd2;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #4d646f;
+    color: #ffffff;
+    border-color: #4d646f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0288d1;
+    border: 1px solid #0288d1;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #027abc;
+    color: #ffffff;
+    border-color: #027abc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #89d4fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #026da7;
+    color: #ffffff;
+    border-color: #026da7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 1px solid #689f38;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #5e8f32;
+    color: #ffffff;
+    border-color: #5e8f32;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #c2e0a8;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #537f2d;
+    color: #ffffff;
+    border-color: #537f2d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 1px solid #fbc02d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fab710;
+    color: #212529;
+    border-color: #fab710;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde6ab;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #e8a704;
+    color: #212529;
+    border-color: #e8a704;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #8c239e;
+    color: #ffffff;
+    border-color: #8c239e;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7d1f8d;
+    color: #ffffff;
+    border-color: #7d1f8d;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 1px solid #d32f2f;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c02929;
+    color: #ffffff;
+    border-color: #c02929;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #edacac;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #aa2424;
+    color: #ffffff;
+    border-color: #aa2424;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-link {
+    color: #0b7ad1;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #0b7ad1;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #0b7ad1;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(33, 150, 243, 0.04);
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(33, 150, 243, 0.16);
+    color: #2196f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #495057;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #343a40;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #e9ecef;
+    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: #dee2e6;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #e3f2fd;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #2196f3;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #2196f3;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #2196f3;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #2196f3;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #a6d5fa;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #a6d5fa;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #e3f2fd;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #e3f2fd;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #a6d5fa;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #a6d5fa;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #2196f3;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f8f9fa;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(33, 150, 243, 0.16);
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e9ecef;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a6d5fa;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #dee2e6;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #e9ecef;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #e9ecef;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #6cbbf5;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6c757d;
+    border: solid #e9ecef;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #e3f2fd;
+    border-color: #e3f2fd;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #495057;
+    background: #e3f2fd;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(33, 150, 243, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a6d5fa;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .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: #495057;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #89c8f7;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #a6d5fa;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #e3f2fd;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #2196f3;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #2196f3;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #a6d5fa;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #2196f3;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #2196f3;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dee2e6;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    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: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #495057;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .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: #6c757d;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: #495057;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .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 #dee2e6;
+  }
+  .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 #dee2e6;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    background: #f8f9fa;
+    color: #495057;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    border-radius: 3px;
+    color: #495057;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f8f9fa;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dee2e6;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dee2e6;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #2196f3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #2196f3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f9fa;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #2196f3;
+    color: #2196f3;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #2196f3;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    border: 0 none;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #2196f3;
+    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: #0d89ec;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #495057;
+    color: #ffffff;
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #495057;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #495057;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #495057;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #495057;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f8f9fa;
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a6d5fa;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #495057;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 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-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6c757d;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6c757d;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #a6d5fa;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 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 #dee2e6;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #495057;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #495057;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6c757d;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #495057;
+      background: #dee2e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #495057;
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #495057;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6c757d;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #495057;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #2196f3;
+    color: #2196f3;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 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-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #e9ecef;
+    width: 1rem;
+    height: 1rem;
+    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: #dee2e6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #e3f2fd;
+    color: #495057;
+  }
+  .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: #e3f2fd;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dee2e6;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f8f9fa;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e9ecef;
+    border-radius: 3px;
+  }
+  .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: #2196f3;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #2196f3;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #2196f3;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #2196f3;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #2196f3;
+    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: #607d8b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0288d1;
+    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-tag {
+    background: #2196f3;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fbc02d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d32f2f;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #2196f3;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #2196f3;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #2196f3;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #2196f3;
+  }
+}
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
new file mode 100644
index 0000000000..f86f313c05
--- /dev/null
+++ b/public/themes/saga-green/theme.css
@@ -0,0 +1,6995 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #4caf50;
+  --primary-color-text: #ffffff;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #f8f9fa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #e9ecef;
+  --focus-ring: 0 0 0 0.2rem #b7e0b8;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #e8f5e9;
+  --highlight-text-color: #495057;
+  color-scheme: light;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#f6fbf6;
+  --primary-100:#d4ecd5;
+  --primary-200:#b2ddb4;
+  --primary-300:#90cd93;
+  --primary-400:#6ebe71;
+  --primary-500:#4caf50;
+  --primary-600:#419544;
+  --primary-700:#357b38;
+  --primary-800:#2a602c;
+  --primary-900:#1e4620;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f8f9fa;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  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);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #495057;
+  background: #e9ecef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #495057;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #495057;
+}
+.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: #4caf50;
+}
+.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: #4caf50;
+}
+.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: #4caf50;
+}
+.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: #4caf50;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #f44336;
+  }
+  .p-text-secondary {
+    color: #6c757d;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #4caf50;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #e8f5e9;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .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: #f44336;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #4caf50;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ced4da;
+    color: #495057;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dee2e6;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #4caf50;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #4caf50;
+    background: #4caf50;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #4caf50;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #3d8c40;
+    background: #3d8c40;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44336;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #4caf50;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3d8c40;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #4caf50;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3d8c40;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #4caf50;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3d8c40;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #4caf50;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #ced4da;
+    color: #495057;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #4caf50;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #e9ecef;
+    color: #6c757d;
+    border-top: 1px solid #ced4da;
+    border-left: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #ced4da;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #4caf50;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b6bfc8;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #449e48;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44336;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #4caf50;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: #6c757d;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44336;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6c757d;
+  }
+  :-moz-placeholder {
+    color: #6c757d;
+  }
+  ::-moz-placeholder {
+    color: #6c757d;
+  }
+  :-ms-input-placeholder {
+    color: #6c757d;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44336;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #4caf50;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    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: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #dee2e6;
+  }
+  .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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #ced4da;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #4caf50;
+    background: #4caf50;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #4caf50;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #3d8c40;
+    background: #3d8c40;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44336;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #4caf50;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #3d8c40;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #4caf50;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #3d8c40;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e74c3c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #4caf50;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #4caf50;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #c0392b;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .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: #6c757d;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #4caf50;
+    border-color: #4caf50;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #449e48;
+    border-color: #449e48;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-slider {
+    background: #dee2e6;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #4caf50;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-slider .p-slider-range {
+    background: #4caf50;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #4caf50;
+    border-color: #4caf50;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #4caf50;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #4caf50;
+    border-color: #4caf50;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #449e48;
+    border-color: #449e48;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4caf50;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #4caf50;
+    border: 1px solid #4caf50;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #449e48;
+    color: #ffffff;
+    border-color: #449e48;
+  }
+  .p-button:not(:disabled):active {
+    background: #3d8c40;
+    color: #ffffff;
+    border-color: #3d8c40;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #4caf50;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4caf50;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4caf50;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #4caf50;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4caf50;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4caf50;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #4caf50;
+    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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #607d8b;
+    border: 1px solid #607d8b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #56717d;
+    color: #ffffff;
+    border-color: #56717d;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #beccd2;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #4d646f;
+    color: #ffffff;
+    border-color: #4d646f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0288d1;
+    border: 1px solid #0288d1;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #027abc;
+    color: #ffffff;
+    border-color: #027abc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #89d4fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #026da7;
+    color: #ffffff;
+    border-color: #026da7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 1px solid #689f38;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #5e8f32;
+    color: #ffffff;
+    border-color: #5e8f32;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #c2e0a8;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #537f2d;
+    color: #ffffff;
+    border-color: #537f2d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 1px solid #fbc02d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fab710;
+    color: #212529;
+    border-color: #fab710;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde6ab;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #e8a704;
+    color: #212529;
+    border-color: #e8a704;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #8c239e;
+    color: #ffffff;
+    border-color: #8c239e;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7d1f8d;
+    color: #ffffff;
+    border-color: #7d1f8d;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 1px solid #d32f2f;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c02929;
+    color: #ffffff;
+    border-color: #c02929;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #edacac;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #aa2424;
+    color: #ffffff;
+    border-color: #aa2424;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-link {
+    color: #3d8c40;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #3d8c40;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #3d8c40;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4caf50;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4caf50;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4caf50;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4caf50;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(76, 175, 80, 0.04);
+    color: #4caf50;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(76, 175, 80, 0.16);
+    color: #4caf50;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #495057;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #343a40;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #e9ecef;
+    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: #dee2e6;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #e8f5e9;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #4caf50;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4caf50;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #4caf50;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #4caf50;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #b7e0b8;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #b7e0b8;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #e8f5e9;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #e8f5e9;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #b7e0b8;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #b7e0b8;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #4caf50;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f8f9fa;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(76, 175, 80, 0.16);
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e9ecef;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #b7e0b8;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #dee2e6;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #e9ecef;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #e9ecef;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #8fce94;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6c757d;
+    border: solid #e9ecef;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #e8f5e9;
+    border-color: #e8f5e9;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #495057;
+    background: #e8f5e9;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(76, 175, 80, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #b7e0b8;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .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: #495057;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #a6d8a9;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #b7e0b8;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #e8f5e9;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #4caf50;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4caf50;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #b7e0b8;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #4caf50;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #4caf50;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dee2e6;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    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: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #495057;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .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: #6c757d;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: #495057;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .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 #dee2e6;
+  }
+  .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 #dee2e6;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    background: #f8f9fa;
+    color: #495057;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    border-radius: 3px;
+    color: #495057;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f8f9fa;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dee2e6;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dee2e6;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #4caf50;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #4caf50;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f9fa;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #4caf50;
+    color: #4caf50;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #4caf50;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    border: 0 none;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #4caf50;
+    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: #449e48;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #495057;
+    color: #ffffff;
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #495057;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #495057;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #495057;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #495057;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f8f9fa;
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #b7e0b8;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #495057;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 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-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6c757d;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6c757d;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #b7e0b8;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 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 #dee2e6;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #495057;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #495057;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6c757d;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #495057;
+      background: #dee2e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #495057;
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #495057;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6c757d;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #495057;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #4caf50;
+    color: #4caf50;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 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-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #e9ecef;
+    width: 1rem;
+    height: 1rem;
+    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: #dee2e6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #e8f5e9;
+    color: #495057;
+  }
+  .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: #e8f5e9;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dee2e6;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f8f9fa;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e9ecef;
+    border-radius: 3px;
+  }
+  .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: #4caf50;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #4caf50;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #4caf50;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #4caf50;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #4caf50;
+    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: #607d8b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0288d1;
+    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-tag {
+    background: #4caf50;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fbc02d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d32f2f;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #4caf50;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #4caf50;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #4caf50;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #4caf50;
+  }
+}
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
new file mode 100644
index 0000000000..1e3a66adea
--- /dev/null
+++ b/public/themes/saga-orange/theme.css
@@ -0,0 +1,6995 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #ffc107;
+  --primary-color-text: #212529;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #f8f9fa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #e9ecef;
+  --focus-ring: 0 0 0 0.2rem #ffe69c;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #fff3e0;
+  --highlight-text-color: #495057;
+  color-scheme: light;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#fffcf3;
+  --primary-100:#fff0c3;
+  --primary-200:#ffe494;
+  --primary-300:#ffd965;
+  --primary-400:#ffcd36;
+  --primary-500:#ffc107;
+  --primary-600:#d9a406;
+  --primary-700:#b38705;
+  --primary-800:#8c6a04;
+  --primary-900:#664d03;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f8f9fa;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  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);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #495057;
+  background: #e9ecef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #495057;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #495057;
+}
+.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: #ffc107;
+}
+.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: #ffc107;
+}
+.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: #ffc107;
+}
+.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: #ffc107;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #f44336;
+  }
+  .p-text-secondary {
+    color: #6c757d;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ffc107;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #fff3e0;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .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: #f44336;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #ffc107;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ced4da;
+    color: #495057;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dee2e6;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ffc107;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 193, 7, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #ffc107;
+    background: #ffc107;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ffc107;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #d29d00;
+    background: #d29d00;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44336;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffc107;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #d29d00;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #ffc107;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #d29d00;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffc107;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #d29d00;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ffc107;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #ced4da;
+    color: #495057;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ffc107;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(255, 193, 7, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #e9ecef;
+    color: #6c757d;
+    border-top: 1px solid #ced4da;
+    border-left: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #ced4da;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #ffc107;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b6bfc8;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #ecb100;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44336;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ffc107;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: #6c757d;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44336;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6c757d;
+  }
+  :-moz-placeholder {
+    color: #6c757d;
+  }
+  ::-moz-placeholder {
+    color: #6c757d;
+  }
+  :-ms-input-placeholder {
+    color: #6c757d;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(255, 193, 7, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44336;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ffc107;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    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: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(255, 193, 7, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #dee2e6;
+  }
+  .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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #ced4da;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #ffc107;
+    background: #ffc107;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ffc107;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #d29d00;
+    background: #d29d00;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44336;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffc107;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #d29d00;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffc107;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #d29d00;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e74c3c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffc107;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #ffc107;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #c0392b;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .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: #6c757d;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ffc107;
+    border-color: #ffc107;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #ecb100;
+    border-color: #ecb100;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-slider {
+    background: #dee2e6;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #ffc107;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-slider .p-slider-range {
+    background: #ffc107;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ffc107;
+    border-color: #ffc107;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ffc107;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ffc107;
+    border-color: #ffc107;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #ecb100;
+    border-color: #ecb100;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: #ffc107;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-button {
+    color: #212529;
+    background: #ffc107;
+    border: 1px solid #ffc107;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #ecb100;
+    color: #212529;
+    border-color: #ecb100;
+  }
+  .p-button:not(:disabled):active {
+    background: #d29d00;
+    color: #212529;
+    border-color: #d29d00;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #ffc107;
+    background-color: #212529;
+  }
+  .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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #607d8b;
+    border: 1px solid #607d8b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #56717d;
+    color: #ffffff;
+    border-color: #56717d;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #beccd2;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #4d646f;
+    color: #ffffff;
+    border-color: #4d646f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0288d1;
+    border: 1px solid #0288d1;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #027abc;
+    color: #ffffff;
+    border-color: #027abc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #89d4fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #026da7;
+    color: #ffffff;
+    border-color: #026da7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 1px solid #689f38;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #5e8f32;
+    color: #ffffff;
+    border-color: #5e8f32;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #c2e0a8;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #537f2d;
+    color: #ffffff;
+    border-color: #537f2d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 1px solid #fbc02d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fab710;
+    color: #212529;
+    border-color: #fab710;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde6ab;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #e8a704;
+    color: #212529;
+    border-color: #e8a704;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #8c239e;
+    color: #ffffff;
+    border-color: #8c239e;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7d1f8d;
+    color: #ffffff;
+    border-color: #7d1f8d;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 1px solid #d32f2f;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c02929;
+    color: #ffffff;
+    border-color: #c02929;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #edacac;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #aa2424;
+    color: #ffffff;
+    border-color: #aa2424;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-link {
+    color: #d29d00;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #d29d00;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #d29d00;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffc107;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 193, 7, 0.04);
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 193, 7, 0.16);
+    color: #ffc107;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #495057;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #343a40;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #e9ecef;
+    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: #dee2e6;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #fff3e0;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #ffc107;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffc107;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #ffc107;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ffc107;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #ffe69c;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #ffe69c;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #fff3e0;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #fff3e0;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #ffe69c;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #ffe69c;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #ffc107;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f8f9fa;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(255, 193, 7, 0.16);
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e9ecef;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe69c;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #dee2e6;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(255, 193, 7, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #e9ecef;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #e9ecef;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #ffc261;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6c757d;
+    border: solid #e9ecef;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #fff3e0;
+    border-color: #fff3e0;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #495057;
+    background: #fff3e0;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(255, 193, 7, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe69c;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .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: #495057;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #ffce80;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #ffe69c;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #fff3e0;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #ffc107;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffc107;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #ffe69c;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #ffc107;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #ffc107;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dee2e6;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    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: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #495057;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .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: #6c757d;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: #495057;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .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 #dee2e6;
+  }
+  .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 #dee2e6;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    background: #f8f9fa;
+    color: #495057;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    border-radius: 3px;
+    color: #495057;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f8f9fa;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dee2e6;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dee2e6;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffc107;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffc107;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f9fa;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ffe69c;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #ffc107;
+    color: #ffc107;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #ffc107;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ffe69c;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    border: 0 none;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #ffc107;
+    color: #212529;
+    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: #ecb100;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #495057;
+    color: #ffffff;
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #495057;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #495057;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #495057;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #495057;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f8f9fa;
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe69c;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #495057;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 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-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6c757d;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6c757d;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #ffe69c;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 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 #dee2e6;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #495057;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #495057;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6c757d;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #495057;
+      background: #dee2e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #495057;
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ffe69c;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #495057;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6c757d;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #495057;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #ffe69c;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #ffc107;
+    color: #ffc107;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 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-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #e9ecef;
+    width: 1rem;
+    height: 1rem;
+    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: #dee2e6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #fff3e0;
+    color: #495057;
+  }
+  .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: #fff3e0;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dee2e6;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f8f9fa;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e9ecef;
+    border-radius: 3px;
+  }
+  .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: #ffc107;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffc107;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ffc107;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #ffc107;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #ffc107;
+    color: #212529;
+    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: #607d8b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0288d1;
+    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-tag {
+    background: #ffc107;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fbc02d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d32f2f;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #ffc107;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #ffc107;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ffc107;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ffc107;
+  }
+}
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
new file mode 100644
index 0000000000..54cb5299c0
--- /dev/null
+++ b/public/themes/saga-purple/theme.css
@@ -0,0 +1,6995 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #ffffff;
+  --surface-b: #f8f9fa;
+  --surface-c: #e9ecef;
+  --surface-d: #dee2e6;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #495057;
+  --text-color-secondary: #6c757d;
+  --primary-color: #9c27b0;
+  --primary-color-text: #ffffff;
+  --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;
+  --gray-50: #fafafa;
+  --gray-100: #f5f5f5;
+  --gray-200: #eeeeee;
+  --gray-300: #e0e0e0;
+  --gray-400: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #f8f9fa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dee2e6;
+  --surface-hover: #e9ecef;
+  --focus-ring: 0 0 0 0.2rem #df9eea;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #f3e5f5;
+  --highlight-text-color: #495057;
+  color-scheme: light;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#faf4fb;
+  --primary-100:#e7cbec;
+  --primary-200:#d4a2dd;
+  --primary-300:#c279ce;
+  --primary-400:#af50bf;
+  --primary-500:#9c27b0;
+  --primary-600:#852196;
+  --primary-700:#6d1b7b;
+  --primary-800:#561561;
+  --primary-900:#3e1046;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #f8f9fa;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  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);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #495057;
+  background: #e9ecef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #495057;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #495057;
+}
+.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: #9c27b0;
+}
+.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: #9c27b0;
+}
+.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: #9c27b0;
+}
+.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: #9c27b0;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #f44336;
+  }
+  .p-text-secondary {
+    color: #6c757d;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #9c27b0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #f3e5f5;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .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: #f44336;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #dee2e6;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #9c27b0;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #ced4da;
+    color: #495057;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #dee2e6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dee2e6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dee2e6;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #9c27b0;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #9c27b0;
+    background: #9c27b0;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #9c27b0;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #7d1f8d;
+    background: #7d1f8d;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f44336;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9c27b0;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #7d1f8d;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #9c27b0;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #7d1f8d;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9c27b0;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f8f9fa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #7d1f8d;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #9c27b0;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #ced4da;
+    color: #495057;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #9c27b0;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #e9ecef;
+    color: #6c757d;
+    border-top: 1px solid #ced4da;
+    border-left: 1px solid #ced4da;
+    border-bottom: 1px solid #ced4da;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #ced4da;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #9c27b0;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b6bfc8;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #8c239e;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f44336;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #495057;
+    background: #ffffff;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #9c27b0;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: #6c757d;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f44336;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #6c757d;
+  }
+  :-moz-placeholder {
+    color: #6c757d;
+  }
+  ::-moz-placeholder {
+    color: #6c757d;
+  }
+  :-ms-input-placeholder {
+    color: #6c757d;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: #6c757d;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f44336;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #9c27b0;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    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: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f44336;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #dee2e6;
+  }
+  .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 {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #ced4da;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #ced4da;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #495057;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #9c27b0;
+    background: #9c27b0;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #9c27b0;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #7d1f8d;
+    background: #7d1f8d;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f44336;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #9c27b0;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #7d1f8d;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #9c27b0;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #7d1f8d;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #e74c3c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #9c27b0;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #9c27b0;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #c0392b;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .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: #6c757d;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #9c27b0;
+    border-color: #9c27b0;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #8c239e;
+    border-color: #8c239e;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-slider {
+    background: #dee2e6;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #9c27b0;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-slider .p-slider-range {
+    background: #9c27b0;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #9c27b0;
+    border-color: #9c27b0;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #9c27b0;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #6c757d;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #6c757d;
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #6c757d;
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f44336;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #495057;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f8f9fa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #ced4da;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #ced4da;
+    color: #495057;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #9c27b0;
+    border-color: #9c27b0;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #e9ecef;
+    border-color: #ced4da;
+    color: #495057;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #6c757d;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #8c239e;
+    border-color: #8c239e;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: #9c27b0;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f44336;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #8c239e;
+    color: #ffffff;
+    border-color: #8c239e;
+  }
+  .p-button:not(:disabled):active {
+    background: #7d1f8d;
+    color: #ffffff;
+    border-color: #7d1f8d;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #9c27b0;
+    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.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #607d8b;
+    border: 1px solid #607d8b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #56717d;
+    color: #ffffff;
+    border-color: #56717d;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #beccd2;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #4d646f;
+    color: #ffffff;
+    border-color: #4d646f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #0288d1;
+    border: 1px solid #0288d1;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #027abc;
+    color: #ffffff;
+    border-color: #027abc;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #89d4fe;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #026da7;
+    color: #ffffff;
+    border-color: #026da7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #689f38;
+    border: 1px solid #689f38;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #5e8f32;
+    color: #ffffff;
+    border-color: #5e8f32;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #c2e0a8;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #537f2d;
+    color: #ffffff;
+    border-color: #537f2d;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #212529;
+    background: #fbc02d;
+    border: 1px solid #fbc02d;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #fab710;
+    color: #212529;
+    border-color: #fab710;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fde6ab;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #e8a704;
+    color: #212529;
+    border-color: #e8a704;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #9c27b0;
+    border: 1px solid #9c27b0;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #8c239e;
+    color: #ffffff;
+    border-color: #8c239e;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7d1f8d;
+    color: #ffffff;
+    border-color: #7d1f8d;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d32f2f;
+    border: 1px solid #d32f2f;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #c02929;
+    color: #ffffff;
+    border-color: #c02929;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #edacac;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #aa2424;
+    color: #ffffff;
+    border-color: #aa2424;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-button.p-button-link {
+    color: #7d1f8d;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #7d1f8d;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #7d1f8d;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #6c757d;
+    border-color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #e9ecef;
+    color: #6c757d;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dee2e6;
+    color: #6c757d;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #607d8b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(96, 125, 139, 0.04);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(96, 125, 139, 0.16);
+    border-color: transparent;
+    color: #607d8b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #0288d1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(2, 136, 209, 0.04);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(2, 136, 209, 0.16);
+    border-color: transparent;
+    color: #0288d1;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #689f38;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(104, 159, 56, 0.04);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(104, 159, 56, 0.16);
+    border-color: transparent;
+    color: #689f38;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #fbc02d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(251, 192, 45, 0.04);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(251, 192, 45, 0.16);
+    border-color: transparent;
+    color: #fbc02d;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9c27b0;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(156, 39, 176, 0.04);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(156, 39, 176, 0.16);
+    border-color: transparent;
+    color: #9c27b0;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d32f2f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(211, 47, 47, 0.04);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(211, 47, 47, 0.16);
+    border-color: transparent;
+    color: #d32f2f;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #495057;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #343a40;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #e9ecef;
+    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: #dee2e6;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #f3e5f5;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #9c27b0;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #9c27b0;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e9ecef;
+    color: #9c27b0;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #9c27b0;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #df9eea;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #df9eea;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #f3e5f5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #f3e5f5;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #df9eea;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #df9eea;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #9c27b0;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #f8f9fa;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(156, 39, 176, 0.16);
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #e9ecef;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #df9eea;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: #495057;
+    background: #f8f9fa;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #dee2e6;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #e9ecef;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #e9ecef;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #c989d2;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dee2e6;
+    border-color: #dee2e6;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #6c757d;
+    border: solid #e9ecef;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.357rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.357rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #6c757d;
+    min-width: 2.357rem;
+    height: 2.357rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #f3e5f5;
+    border-color: #f3e5f5;
+    color: #495057;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #e9ecef;
+    border-color: transparent;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #495057;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #495057;
+    background: #f3e5f5;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(156, 39, 176, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #df9eea;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #6c757d;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .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: #495057;
+  }
+  .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: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: #6c757d;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #d3a1db;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #495057;
+    background: #f8f9fa;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #df9eea;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #6c757d;
+    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: #495057;
+    background: #f3e5f5;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #6c757d;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #f8f9fa;
+    color: #9c27b0;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #9c27b0;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #495057;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #e9ecef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #df9eea;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #495057;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #9c27b0;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #f8f9fa;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #495057;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #9c27b0;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dee2e6;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    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: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #495057;
+    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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .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: #6c757d;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: #495057;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .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 #dee2e6;
+  }
+  .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 #dee2e6;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    background: #f8f9fa;
+    color: #495057;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    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: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    border-radius: 3px;
+    color: #495057;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #f8f9fa;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dee2e6;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dee2e6;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #6c757d;
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #495057;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9c27b0;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #495057;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dee2e6;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #495057;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9c27b0;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f8f9fa;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #df9eea;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #9c27b0;
+    color: #9c27b0;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #9c27b0;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #df9eea;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    border: 0 none;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #495057;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #9c27b0;
+    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: #8c239e;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #495057;
+    border: 0 none;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #495057;
+    border-color: transparent;
+    background: #e9ecef;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #495057;
+    color: #ffffff;
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #495057;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #495057;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #495057;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #495057;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #f8f9fa;
+    padding: 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #495057;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    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);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #df9eea;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #495057;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .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 1rem;
+    color: #495057;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f8f9fa;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 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-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #6c757d;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #6c757d;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.2rem #df9eea;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 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 #dee2e6;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #495057;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #495057;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #6c757d;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #495057;
+      background: #dee2e6;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #495057;
+      background: #e9ecef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #495057;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #6c757d;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dee2e6;
+    color: #495057;
+    background: #f8f9fa;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #495057;
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #df9eea;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #e9ecef;
+    border-color: #dee2e6;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #f8f9fa;
+    border-color: #dee2e6;
+    color: #495057;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dee2e6;
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #dee2e6;
+    background: #ffffff;
+    color: #495057;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #e9ecef;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #495057;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #6c757d;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #495057;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #495057;
+    border: 1px solid #e9ecef;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #6c757d;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #495057;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #dee2e6;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dee2e6 transparent;
+    background: #ffffff;
+    color: #6c757d;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.2rem #df9eea;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #6c757d;
+    color: #6c757d;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #9c27b0;
+    color: #9c27b0;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 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-content {
+    color: #495057;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #495057;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #495057;
+    background: #dee2e6;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #495057;
+    background: #e9ecef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #495057;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #6c757d;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #e9ecef;
+    width: 1rem;
+    height: 1rem;
+    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: #dee2e6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #f3e5f5;
+    color: #495057;
+  }
+  .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: #f3e5f5;
+    color: #495057;
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dee2e6;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dee2e6;
+    color: #495057;
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f8f9fa;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #e9ecef;
+    border-radius: 3px;
+  }
+  .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: #9c27b0;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    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-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #e9ecef;
+    color: #495057;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #9c27b0;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #9c27b0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #dee2e6;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #9c27b0;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #495057;
+    border: 1px solid #dee2e6;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #9c27b0;
+    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: #607d8b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #0288d1;
+    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-tag {
+    background: #9c27b0;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #689f38;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #0288d1;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #fbc02d;
+    color: #212529;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d32f2f;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #9c27b0;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #9c27b0;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #9c27b0;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #9c27b0;
+  }
+}
diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff
new file mode 100644
index 0000000000..46d4244757
Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff differ
diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2 b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2
new file mode 100644
index 0000000000..f1c62e0996
Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-300.woff2 differ
diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..e8d62dd0a3
Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff differ
diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2 b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..5ba583e88b
Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..c6d3d1d9de
Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff differ
diff --git a/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2 b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..4153a8259f
Binary files /dev/null and b/public/themes/soho-dark/fonts/lato-v17-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
new file mode 100644
index 0000000000..016ecd9a17
--- /dev/null
+++ b/public/themes/soho-dark/theme.css
@@ -0,0 +1,7019 @@
+:root {
+  font-family: Lato, Helvetica, sans-serif;
+  --font-family: Lato, Helvetica, sans-serif;
+  --surface-a: #282936;
+  --surface-b: #1d1e27;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #3e4053;
+  --surface-e: #282936;
+  --surface-f: #282936;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #b19df7;
+  --primary-color-text: hsl(234, 15%, 13%);
+  --surface-0: #1d1e27;
+  --surface-50: #34343d;
+  --surface-100: #4a4b52;
+  --surface-200: #616268;
+  --surface-300: #77787d;
+  --surface-400: #8e8f93;
+  --surface-500: #a5a5a9;
+  --surface-600: #bbbcbe;
+  --surface-700: #d2d2d4;
+  --surface-800: #e8e9e9;
+  --surface-900: #ffffff;
+  --gray-50: #e8e9e9;
+  --gray-100: #d2d2d4;
+  --gray-200: #bbbcbe;
+  --gray-300: #a5a5a9;
+  --gray-400: #8e8f93;
+  --gray-500: #77787d;
+  --gray-600: #616268;
+  --gray-700: #4a4b52;
+  --gray-800: #34343d;
+  --gray-900: #1d1e27;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #1d1e27;
+  --surface-section: #1d1e27;
+  --surface-card: #282936;
+  --surface-overlay: #282936;
+  --surface-border: #3e4053;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 1px #e0d8fc;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(177, 157, 247, 0.16);
+  --highlight-text-color: #b19df7;
+  color-scheme: dark;
+}
+
+/* lato-300 - latin-ext_latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Lato Light"), local("Lato-Light"), url("http://github.com/fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("http://github.com/fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* lato-regular - latin-ext_latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Lato Regular"), local("Lato-Regular"), url("http://github.com/fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* lato-700 - latin-ext_latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Lato Bold"), local("Lato-Bold"), url("http://github.com/fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+:root {
+  --blue-50:#f6fbfe;
+  --blue-100:#d6ecfc;
+  --blue-200:#b5ddfa;
+  --blue-300:#95cef8;
+  --blue-400:#74bff5;
+  --blue-500:#54b0f3;
+  --blue-600:#4796cf;
+  --blue-700:#3b7baa;
+  --blue-800:#2e6186;
+  --blue-900:#224661;
+  --green-50:#f4fcf8;
+  --green-100:#ccf2dc;
+  --green-200:#a3e7c1;
+  --green-300:#7adca6;
+  --green-400:#52d28a;
+  --green-500:#29c76f;
+  --green-600:#23a95e;
+  --green-700:#1d8b4e;
+  --green-800:#176d3d;
+  --green-900:#10502c;
+  --yellow-50:#fefdf6;
+  --yellow-100:#fcf4d6;
+  --yellow-200:#faebb5;
+  --yellow-300:#f8e295;
+  --yellow-400:#f5d974;
+  --yellow-500:#f3d054;
+  --yellow-600:#cfb147;
+  --yellow-700:#aa923b;
+  --yellow-800:#86722e;
+  --yellow-900:#615322;
+  --cyan-50:#f5fcfd;
+  --cyan-100:#d1f2f5;
+  --cyan-200:#ace8ed;
+  --cyan-300:#87dee6;
+  --cyan-400:#63d3de;
+  --cyan-500:#3ec9d6;
+  --cyan-600:#35abb6;
+  --cyan-700:#2b8d96;
+  --cyan-800:#226f76;
+  --cyan-900:#195056;
+  --pink-50:#fef6f7;
+  --pink-100:#fad6d6;
+  --pink-200:#f6b5b6;
+  --pink-300:#f29596;
+  --pink-400:#ee7475;
+  --pink-500:#ea5455;
+  --pink-600:#c74748;
+  --pink-700:#a43b3c;
+  --pink-800:#812e2f;
+  --pink-900:#5e2222;
+  --indigo-50:#f6f7fe;
+  --indigo-100:#d6dafc;
+  --indigo-200:#b5bcfa;
+  --indigo-300:#959ff8;
+  --indigo-400:#7481f5;
+  --indigo-500:#5464f3;
+  --indigo-600:#4755cf;
+  --indigo-700:#3b46aa;
+  --indigo-800:#2e3786;
+  --indigo-900:#222861;
+  --teal-50:#f3fcf9;
+  --teal-100:#c5f1e1;
+  --teal-200:#97e5c9;
+  --teal-300:#69dab1;
+  --teal-400:#3bce99;
+  --teal-500:#0dc381;
+  --teal-600:#0ba66e;
+  --teal-700:#09895a;
+  --teal-800:#076b47;
+  --teal-900:#054e34;
+  --orange-50:#fffaf6;
+  --orange-100:#ffe8d2;
+  --orange-200:#ffd6ae;
+  --orange-300:#ffc38a;
+  --orange-400:#ffb166;
+  --orange-500:#ff9f42;
+  --orange-600:#d98738;
+  --orange-700:#b36f2e;
+  --orange-800:#8c5724;
+  --orange-900:#66401a;
+  --bluegray-50:#f7f8fa;
+  --bluegray-100:#dbdfe8;
+  --bluegray-200:#bec5d6;
+  --bluegray-300:#a1abc4;
+  --bluegray-400:#8592b2;
+  --bluegray-500:#6878a0;
+  --bluegray-600:#586688;
+  --bluegray-700:#495470;
+  --bluegray-800:#394258;
+  --bluegray-900:#2a3040;
+  --purple-50:#f8f6fe;
+  --purple-100:#ddd6fc;
+  --purple-200:#c2b5fa;
+  --purple-300:#a895f8;
+  --purple-400:#8d74f5;
+  --purple-500:#7254f3;
+  --purple-600:#6147cf;
+  --purple-700:#503baa;
+  --purple-800:#3f2e86;
+  --purple-900:#2e2261;
+  --red-50:#fff5f6;
+  --red-100:#ffcfd4;
+  --red-200:#ffa9b2;
+  --red-300:#ff848f;
+  --red-400:#ff5e6d;
+  --red-500:#ff384b;
+  --red-600:#d93040;
+  --red-700:#b32735;
+  --red-800:#8c1f29;
+  --red-900:#66161e;
+  --primary-50:#fbfaff;
+  --primary-100:#ece7fd;
+  --primary-200:#ddd5fc;
+  --primary-300:#cfc2fa;
+  --primary-400:#c0b0f9;
+  --primary-500:#b19df7;
+  --primary-600:#9685d2;
+  --primary-700:#7c6ead;
+  --primary-800:#615688;
+  --primary-900:#473f63;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #282936;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #3e4053;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #282936;
+  border: 1px solid #3e4053;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #3e4053;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #1d1e27;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #b19df7;
+}
+.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: #b19df7;
+}
+.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: #b19df7;
+}
+.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: #b19df7;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ff9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #b19df7;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 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(177, 157, 247, 0.16);
+    color: #b19df7;
+    border-radius: 6px;
+  }
+  .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: #ff9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #333544;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ff9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #282936;
+    border: 1px solid #3e4053;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #282936;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid #3e4053;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #b19df7;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #3e4053;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #3e4053;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #3e4053;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #1d1e27;
+    border: 1px solid #3e4053;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #b19df7;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ff9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #3e4053;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #3e4053;
+    background: #1d1e27;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: hsl(234, 15%, 13%);
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #3e4053;
+    background: #1d1e27;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: hsl(234, 15%, 13%);
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #b19df7;
+    background: #b19df7;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #b19df7;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #9378f4;
+    background: #9378f4;
+    color: hsl(234, 15%, 13%);
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ff9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #b19df7;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9378f4;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #b19df7;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9378f4;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #b19df7;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #3e4053;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #9378f4;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #b19df7;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #4c4d5f;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ff9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #282936;
+    border: 1px solid #3e4053;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #1d1e27;
+    border: 1px solid #3e4053;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #b19df7;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3e4053;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ff9a9a;
+  }
+  .p-dropdown-panel {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #333544;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #3e4053;
+    border-left: 1px solid #3e4053;
+    border-bottom: 1px solid #3e4053;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #3e4053;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ff9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #3e4053;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #b19df7;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #a28af5;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ff9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1d1e27;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #3e4053;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #b19df7;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ff9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #3e4053;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #3e4053;
+  }
+  .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(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ff9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #3e4053;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #3e4053;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #3e4053;
+  }
+  .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-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #333544;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ff9a9a;
+  }
+  .p-mention-panel {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #1d1e27;
+    border: 1px solid #3e4053;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #b19df7;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #3e4053;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3e4053;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3e4053;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ff9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #333544;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ff9a9a;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #3e4053;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #eb9a9c;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffcf91;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #93deac;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #3e4053;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #3e4053;
+    background: #1d1e27;
+    width: 22px;
+    height: 22px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: hsl(234, 15%, 13%);
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #b19df7;
+    background: #b19df7;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #b19df7;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #9378f4;
+    background: #9378f4;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: hsl(234, 15%, 13%);
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ff9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #3e4053;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #b19df7;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #3e4053;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #9378f4;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #3e4053;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #b19df7;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #3e4053;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #9378f4;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #b19df7;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #b19df7;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #282936;
+    border: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #3e4053;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #b19df7;
+    border-color: #b19df7;
+    color: hsl(234, 15%, 13%);
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: hsl(234, 15%, 13%);
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #a28af5;
+    border-color: #a28af5;
+    color: hsl(234, 15%, 13%);
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: hsl(234, 15%, 13%);
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ff9a9a;
+  }
+  .p-slider {
+    background: #3e4053;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #3e4053;
+    border: 2px solid #b19df7;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-slider .p-slider-range {
+    background: #b19df7;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #b19df7;
+    border-color: #b19df7;
+  }
+  .p-treeselect {
+    background: #1d1e27;
+    border: 1px solid #3e4053;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #b19df7;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #3e4053;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #3e4053;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ff9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #3e4053;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #3e4053;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #3e4053;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #282936;
+    border: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #b19df7;
+    border-color: #b19df7;
+    color: hsl(234, 15%, 13%);
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: hsl(234, 15%, 13%);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #a28af5;
+    border-color: #a28af5;
+    color: hsl(234, 15%, 13%);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: hsl(234, 15%, 13%);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: #b19df7;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ff9a9a;
+  }
+  .p-button {
+    color: hsl(234, 15%, 13%);
+    background: #b19df7;
+    border: 1px solid #b19df7;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #a28af5;
+    color: hsl(234, 15%, 13%);
+    border-color: #a28af5;
+  }
+  .p-button:not(:disabled):active {
+    background: #9378f4;
+    color: hsl(234, 15%, 13%);
+    border-color: #9378f4;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #b19df7;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(177, 157, 247, 0.04);
+    color: #b19df7;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(177, 157, 247, 0.04);
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #b19df7;
+    background-color: hsl(234, 15%, 13%);
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #1d1e27;
+    background: #d4ea93;
+    border: 1px solid #d4ea93;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #c7e473;
+    color: #1d1e27;
+    border-color: #c7e473;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #e1f0b3;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #bbde53;
+    color: #1d1e27;
+    border-color: #bbde53;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #d4ea93;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(212, 234, 147, 0.04);
+    color: #d4ea93;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(212, 234, 147, 0.16);
+    color: #d4ea93;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #d4ea93;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(212, 234, 147, 0.04);
+    border-color: transparent;
+    color: #d4ea93;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(212, 234, 147, 0.16);
+    border-color: transparent;
+    color: #d4ea93;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #1d1e27;
+    background: #9bcaff;
+    border: 1px solid #9bcaff;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #72b4ff;
+    color: #1d1e27;
+    border-color: #72b4ff;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b9daff;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #499fff;
+    color: #1d1e27;
+    border-color: #499fff;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #9bcaff;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(155, 202, 255, 0.04);
+    color: #9bcaff;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(155, 202, 255, 0.16);
+    color: #9bcaff;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #9bcaff;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(155, 202, 255, 0.04);
+    border-color: transparent;
+    color: #9bcaff;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(155, 202, 255, 0.16);
+    border-color: transparent;
+    color: #9bcaff;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #1d1e27;
+    background: #93deac;
+    border: 1px solid #93deac;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #77d596;
+    color: #1d1e27;
+    border-color: #77d596;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #b3e8c5;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #5acd81;
+    color: #1d1e27;
+    border-color: #5acd81;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #93deac;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(147, 222, 172, 0.04);
+    color: #93deac;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(147, 222, 172, 0.16);
+    color: #93deac;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #93deac;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(147, 222, 172, 0.04);
+    border-color: transparent;
+    color: #93deac;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(147, 222, 172, 0.16);
+    border-color: transparent;
+    color: #93deac;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #1d1e27;
+    background: #ffcf91;
+    border: 1px solid #ffcf91;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffbe69;
+    color: #1d1e27;
+    border-color: #ffbe69;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffddb2;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffac41;
+    color: #1d1e27;
+    border-color: #ffac41;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffcf91;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 207, 145, 0.04);
+    color: #ffcf91;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 207, 145, 0.16);
+    color: #ffcf91;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffcf91;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 207, 145, 0.04);
+    border-color: transparent;
+    color: #ffcf91;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 207, 145, 0.16);
+    border-color: transparent;
+    color: #ffcf91;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #1d1e27;
+    background: #86e0e7;
+    border: 1px solid #86e0e7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #68d8e1;
+    color: #1d1e27;
+    border-color: #68d8e1;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #aae9ee;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #49d0db;
+    color: #1d1e27;
+    border-color: #49d0db;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #86e0e7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(134, 224, 231, 0.04);
+    color: #86e0e7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(134, 224, 231, 0.16);
+    color: #86e0e7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #86e0e7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(134, 224, 231, 0.04);
+    border-color: transparent;
+    color: #86e0e7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(134, 224, 231, 0.16);
+    border-color: transparent;
+    color: #86e0e7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #1d1e27;
+    background: #eb9a9c;
+    border: 1px solid #eb9a9c;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #e57a7c;
+    color: #1d1e27;
+    border-color: #e57a7c;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f1b8ba;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #de595c;
+    color: #1d1e27;
+    border-color: #de595c;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #eb9a9c;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(235, 154, 156, 0.04);
+    color: #eb9a9c;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(235, 154, 156, 0.16);
+    color: #eb9a9c;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #eb9a9c;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(235, 154, 156, 0.04);
+    border-color: transparent;
+    color: #eb9a9c;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(235, 154, 156, 0.16);
+    border-color: transparent;
+    color: #eb9a9c;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #1d1e27;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #d2d2d4;
+    color: #1d1e27;
+    border-color: #d2d2d4;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #bbbcbe;
+    color: #1d1e27;
+    border-color: #bbbcbe;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #b19df7;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #e0d8fc;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b19df7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(177, 157, 247, 0.04);
+    color: #b19df7;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(177, 157, 247, 0.04);
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d4ea93;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(212, 234, 147, 0.04);
+    color: #d4ea93;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(212, 234, 147, 0.16);
+    color: #d4ea93;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d4ea93;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(212, 234, 147, 0.04);
+    border-color: transparent;
+    color: #d4ea93;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(212, 234, 147, 0.16);
+    border-color: transparent;
+    color: #d4ea93;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9bcaff;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(155, 202, 255, 0.04);
+    color: #9bcaff;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(155, 202, 255, 0.16);
+    color: #9bcaff;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9bcaff;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(155, 202, 255, 0.04);
+    border-color: transparent;
+    color: #9bcaff;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(155, 202, 255, 0.16);
+    border-color: transparent;
+    color: #9bcaff;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #93deac;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(147, 222, 172, 0.04);
+    color: #93deac;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(147, 222, 172, 0.16);
+    color: #93deac;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #93deac;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(147, 222, 172, 0.04);
+    border-color: transparent;
+    color: #93deac;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(147, 222, 172, 0.16);
+    border-color: transparent;
+    color: #93deac;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffcf91;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 207, 145, 0.04);
+    color: #ffcf91;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 207, 145, 0.16);
+    color: #ffcf91;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffcf91;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 207, 145, 0.04);
+    border-color: transparent;
+    color: #ffcf91;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 207, 145, 0.16);
+    border-color: transparent;
+    color: #ffcf91;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #86e0e7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(134, 224, 231, 0.04);
+    color: #86e0e7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(134, 224, 231, 0.16);
+    color: #86e0e7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #86e0e7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(134, 224, 231, 0.04);
+    border-color: transparent;
+    color: #86e0e7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(134, 224, 231, 0.16);
+    border-color: transparent;
+    color: #86e0e7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #eb9a9c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(235, 154, 156, 0.04);
+    color: #eb9a9c;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(235, 154, 156, 0.16);
+    color: #eb9a9c;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #eb9a9c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(235, 154, 156, 0.04);
+    border-color: transparent;
+    color: #eb9a9c;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(235, 154, 156, 0.16);
+    border-color: transparent;
+    color: #eb9a9c;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #1d1e27;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #1d1e27;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #3e4053;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #b19df7;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #b19df7;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #e0d8fc;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(177, 157, 247, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(177, 157, 247, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #e0d8fc;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #e0d8fc;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #b19df7;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #282936;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #282936;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #2b2c38;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #b19df7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #b19df7;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #2b2c38;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #3e4053;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-column-filter-overlay {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #3e4053;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #282936;
+    border: 1px solid #3e4053;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(83, 39, 237, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #3e4053;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #3e4053;
+    border-color: #3e4053;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #3e4053;
+    border-color: #3e4053;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-paginator {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #3e4053;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    border-color: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #282936;
+    border: 1px solid #3e4053;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .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: #b19df7;
+  }
+  .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: #b19df7;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(118, 82, 241, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #e0d8fc;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #b19df7;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #3e4053;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #e0d8fc;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #b19df7;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #b19df7;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #b19df7;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #282936;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #2b2c38;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #b19df7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #b19df7;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #2b2c38;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #b19df7;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: hsl(234, 15%, 13%);
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #3e4053;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #282936;
+    border-color: #3e4053;
+    color: rgba(255, 255, 255, 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: #3e4053;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #282936;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #282936;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #3e4053;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #3e4053;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #3e4053;
+    padding: 1.25rem;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #3e4053;
+    background: #282936;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #3e4053;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #3e4053;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #b19df7;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #282936;
+    padding: 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #3e4053;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #b19df7;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #3e4053;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #3e4053;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #3e4053;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #3e4053 transparent;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e0d8fc;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #282936;
+    border-color: #b19df7;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #282936;
+    border-color: #b19df7;
+    color: #b19df7;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #282936;
+    color: #b19df7;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e0d8fc;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #282936;
+    padding: 1.25rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #282936;
+    border: 1px solid #3e4053;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 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 1.25rem 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(40, 41, 54, 0);
+    border-bottom-color: #282936;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(62, 64, 83, 0);
+    border-bottom-color: #3b3d4f;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #282936;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #3e4053;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #3e4053;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #b19df7;
+    color: hsl(234, 15%, 13%);
+    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: #a28af5;
+    color: hsl(234, 15%, 13%);
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(40, 41, 54, 0);
+    border-bottom-color: #282936;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(62, 64, 83, 0);
+    border-bottom-color: #3b3d4f;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #282936;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #3e4053;
+  }
+  .p-sidebar {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #3e4053;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #3e4053;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #3e4053;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #3e4053;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #282936;
+    padding: 1.25rem;
+    border: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #282936;
+    padding: 2rem 1rem;
+    border: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #333544;
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #333544;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #333544;
+    border: 1px solid #3e4053;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #e0d8fc;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #333544;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #333544;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #333544;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #333544;
+    border: 1px solid #3e4053;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #333544;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #333544;
+    border: 1px solid #3e4053;
+    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 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #333544;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #333544;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #333544;
+    border: 1px solid #3e4053;
+    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-menuitem-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #333544;
+    border: 1px solid #3e4053;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #e0d8fc;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #333544;
+      border: 1px solid #3e4053;
+      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 #3e4053;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #b19df7;
+      background: rgba(177, 157, 247, 0.16);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #b19df7;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #b19df7;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(177, 157, 247, 0.24);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    background: #282936;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e0d8fc;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #282936;
+    border-color: #3e4053;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #3e4053;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #3e4053;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #333544;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #333544;
+    border: 1px solid #3e4053;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #333544;
+    border: 1px solid #3e4053;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #b19df7;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #b19df7;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #3e4053;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #3e4053;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #3e4053;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #3e4053 transparent;
+    background: #282936;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #e0d8fc;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #282936;
+    border-color: #b19df7;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #282936;
+    border-color: #b19df7;
+    color: #b19df7;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #333544;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #333544;
+    border: 1px solid #3e4053;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #333544;
+    border: 1px solid #3e4053;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #b19df7;
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #b19df7;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #b19df7;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(177, 157, 247, 0.24);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #e9e9ff;
+    border: solid #696cff;
+    border-width: 1px;
+    color: #696cff;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #696cff;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #e4f8f0;
+    border: solid #1ea97c;
+    border-width: 1px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fff2e2;
+    border: solid #cc8925;
+    border-width: 1px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffe7e6;
+    border: solid #ff5757;
+    border-width: 1px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-message.p-message-info {
+    background: #e9e9ff;
+    border: solid #696cff;
+    border-width: 0 0 0 6px;
+    color: #696cff;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #696cff;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #696cff;
+  }
+  .p-message.p-message-success {
+    background: #e4f8f0;
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: #fff2e2;
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: #ffe7e6;
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #e9e9ff;
+    border: solid #696cff;
+    border-width: 0 0 0 6px;
+    color: #696cff;
+  }
+  .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: #696cff;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #e4f8f0;
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fff2e2;
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffe7e6;
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #3e4053;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .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(177, 157, 247, 0.16);
+    color: #b19df7;
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #3e4053;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #282936;
+  }
+  .p-chip {
+    background-color: #3e4053;
+    color: rgba(255, 255, 255, 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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(177, 157, 247, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(177, 157, 247, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #b19df7;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #b19df7;
+    color: hsl(234, 15%, 13%);
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #93deac;
+    color: #1d1e27;
+  }
+  .p-tag.p-tag-info {
+    background-color: #9bcaff;
+    color: #1d1e27;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffcf91;
+    color: #1d1e27;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #eb9a9c;
+    color: #1d1e27;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #3e4053;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #b19df7;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #b19df7;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #3e4053;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #b19df7;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: hsl(234, 15%, 13%);
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #282936;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #3e4053;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #b19df7;
+    color: hsl(234, 15%, 13%);
+    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: #d4ea93;
+    color: #1d1e27;
+  }
+  .p-badge.p-badge-success {
+    background-color: #93deac;
+    color: #1d1e27;
+  }
+  .p-badge.p-badge-info {
+    background-color: #9bcaff;
+    color: #1d1e27;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffcf91;
+    color: #1d1e27;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #eb9a9c;
+    color: #1d1e27;
+  }
+  .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-tag {
+    background: #b19df7;
+    color: hsl(234, 15%, 13%);
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #93deac;
+    color: #1d1e27;
+  }
+  .p-tag.p-tag-info {
+    background-color: #9bcaff;
+    color: #1d1e27;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffcf91;
+    color: #1d1e27;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #eb9a9c;
+    color: #1d1e27;
+  }
+}
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #b19df7;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #b19df7;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #b19df7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #b19df7;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #b19df7;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+}
diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff
new file mode 100644
index 0000000000..46d4244757
Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff differ
diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2 b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2
new file mode 100644
index 0000000000..f1c62e0996
Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-300.woff2 differ
diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..e8d62dd0a3
Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff differ
diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2 b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..5ba583e88b
Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..c6d3d1d9de
Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff differ
diff --git a/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2 b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..4153a8259f
Binary files /dev/null and b/public/themes/soho-light/fonts/lato-v17-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
new file mode 100644
index 0000000000..611ffc76f3
--- /dev/null
+++ b/public/themes/soho-light/theme.css
@@ -0,0 +1,7071 @@
+:root {
+  font-family: Lato, Helvetica, sans-serif;
+  --font-family: Lato, Helvetica, sans-serif;
+  --surface-a: #ffffff;
+  --surface-b: #eff3f8;
+  --surface-c: #f6f9fc;
+  --surface-d: #dfe7ef;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #043d75;
+  --text-color-secondary: #708da9;
+  --primary-color: #7254f3;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f1f4f6;
+  --surface-100: #e2e8ee;
+  --surface-200: #c6d1dd;
+  --surface-300: #a9bbcb;
+  --surface-400: #8da4ba;
+  --surface-500: #708da9;
+  --surface-600: #5a7187;
+  --surface-700: #435565;
+  --surface-800: #2d3844;
+  --surface-900: #161c22;
+  --gray-50: #f1f4f6;
+  --gray-100: #e2e8ee;
+  --gray-200: #c6d1dd;
+  --gray-300: #a9bbcb;
+  --gray-400: #8da4ba;
+  --gray-500: #708da9;
+  --gray-600: #5a7187;
+  --gray-700: #435565;
+  --gray-800: #2d3844;
+  --gray-900: #161c22;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #eff3f8;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #dfe7ef;
+  --surface-hover: #f6f9fc;
+  --focus-ring: 0 0 0 1px #c7bbfa;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #e2dcfc;
+  --highlight-text-color: #7254f3;
+  color-scheme: light;
+}
+
+/* lato-300 - latin-ext_latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Lato Light"), local("Lato-Light"), url("http://github.com/fonts/lato-v17-latin-ext_latin-300.woff2") format("woff2"), url("http://github.com/fonts/lato-v17-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* lato-regular - latin-ext_latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Lato Regular"), local("Lato-Regular"), url("http://github.com/fonts/lato-v17-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/fonts/lato-v17-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* lato-700 - latin-ext_latin */
+@font-face {
+  font-family: "Lato";
+  font-style: normal;
+  font-weight: 700;
+  src: local("Lato Bold"), local("Lato-Bold"), url("http://github.com/fonts/lato-v17-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/lato-v17-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+:root {
+  --blue-50:#f6fbfe;
+  --blue-100:#d6ecfc;
+  --blue-200:#b5ddfa;
+  --blue-300:#95cef8;
+  --blue-400:#74bff5;
+  --blue-500:#54b0f3;
+  --blue-600:#4796cf;
+  --blue-700:#3b7baa;
+  --blue-800:#2e6186;
+  --blue-900:#224661;
+  --green-50:#f4fcf8;
+  --green-100:#ccf2dc;
+  --green-200:#a3e7c1;
+  --green-300:#7adca6;
+  --green-400:#52d28a;
+  --green-500:#29c76f;
+  --green-600:#23a95e;
+  --green-700:#1d8b4e;
+  --green-800:#176d3d;
+  --green-900:#10502c;
+  --yellow-50:#fefdf6;
+  --yellow-100:#fcf4d6;
+  --yellow-200:#faebb5;
+  --yellow-300:#f8e295;
+  --yellow-400:#f5d974;
+  --yellow-500:#f3d054;
+  --yellow-600:#cfb147;
+  --yellow-700:#aa923b;
+  --yellow-800:#86722e;
+  --yellow-900:#615322;
+  --cyan-50:#f5fcfd;
+  --cyan-100:#d1f2f5;
+  --cyan-200:#ace8ed;
+  --cyan-300:#87dee6;
+  --cyan-400:#63d3de;
+  --cyan-500:#3ec9d6;
+  --cyan-600:#35abb6;
+  --cyan-700:#2b8d96;
+  --cyan-800:#226f76;
+  --cyan-900:#195056;
+  --pink-50:#fef6f7;
+  --pink-100:#fad6d6;
+  --pink-200:#f6b5b6;
+  --pink-300:#f29596;
+  --pink-400:#ee7475;
+  --pink-500:#ea5455;
+  --pink-600:#c74748;
+  --pink-700:#a43b3c;
+  --pink-800:#812e2f;
+  --pink-900:#5e2222;
+  --indigo-50:#f6f7fe;
+  --indigo-100:#d6dafc;
+  --indigo-200:#b5bcfa;
+  --indigo-300:#959ff8;
+  --indigo-400:#7481f5;
+  --indigo-500:#5464f3;
+  --indigo-600:#4755cf;
+  --indigo-700:#3b46aa;
+  --indigo-800:#2e3786;
+  --indigo-900:#222861;
+  --teal-50:#f3fcf9;
+  --teal-100:#c5f1e1;
+  --teal-200:#97e5c9;
+  --teal-300:#69dab1;
+  --teal-400:#3bce99;
+  --teal-500:#0dc381;
+  --teal-600:#0ba66e;
+  --teal-700:#09895a;
+  --teal-800:#076b47;
+  --teal-900:#054e34;
+  --orange-50:#fffaf6;
+  --orange-100:#ffe8d2;
+  --orange-200:#ffd6ae;
+  --orange-300:#ffc38a;
+  --orange-400:#ffb166;
+  --orange-500:#ff9f42;
+  --orange-600:#d98738;
+  --orange-700:#b36f2e;
+  --orange-800:#8c5724;
+  --orange-900:#66401a;
+  --bluegray-50:#f7f8fa;
+  --bluegray-100:#dbdfe8;
+  --bluegray-200:#bec5d6;
+  --bluegray-300:#a1abc4;
+  --bluegray-400:#8592b2;
+  --bluegray-500:#6878a0;
+  --bluegray-600:#586688;
+  --bluegray-700:#495470;
+  --bluegray-800:#394258;
+  --bluegray-900:#2a3040;
+  --purple-50:#f8f6fe;
+  --purple-100:#ddd6fc;
+  --purple-200:#c2b5fa;
+  --purple-300:#a895f8;
+  --purple-400:#8d74f5;
+  --purple-500:#7254f3;
+  --purple-600:#6147cf;
+  --purple-700:#503baa;
+  --purple-800:#3f2e86;
+  --purple-900:#2e2261;
+  --red-50:#fff5f6;
+  --red-100:#ffcfd4;
+  --red-200:#ffa9b2;
+  --red-300:#ff848f;
+  --red-400:#ff5e6d;
+  --red-500:#ff384b;
+  --red-600:#d93040;
+  --red-700:#b32735;
+  --red-800:#8c1f29;
+  --red-900:#66161e;
+  --primary-50:#f8f6fe;
+  --primary-100:#ddd6fc;
+  --primary-200:#c2b5fa;
+  --primary-300:#a895f8;
+  --primary-400:#8d74f5;
+  --primary-500:#7254f3;
+  --primary-600:#6147cf;
+  --primary-700:#503baa;
+  --primary-800:#3f2e86;
+  --primary-900:#2e2261;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #eff3f8;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dfe7ef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #708da9;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #708da9;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #708da9;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #043d75;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #043d75;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #043d75;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #043d75;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #043d75;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #043d75;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #043d75;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #043d75;
+  background: #f6f9fc;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dfe7ef;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #043d75;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #043d75;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #043d75;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #043d75;
+}
+.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: #7254f3;
+}
+.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: #7254f3;
+}
+.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: #7254f3;
+}
+.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: #7254f3;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #ff6767;
+  }
+  .p-text-secondary {
+    color: #708da9;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #7254f3;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #043d75;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e2dcfc;
+    color: #7254f3;
+    border-radius: 6px;
+  }
+  .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: #ff6767;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.75rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ff6767;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%);
+    color: #ffffff;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%);
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: transparent;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #ffffff;
+    background: linear-gradient(90deg, #7254f3 0%, #9554f3 100%);
+    font-weight: 700;
+    margin: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #ffffff;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 700;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #7254f3;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #dfe7ef;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #dfe7ef;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #dfe7ef;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d3dbe3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #7254f3;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #708da9;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #708da9;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ff6767;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 22px;
+    height: 22px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d3dbe3;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d3dbe3;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #043d75;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d3dbe3;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #043d75;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #7254f3;
+    background: #7254f3;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #7254f3;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #5935f1;
+    background: #5935f1;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ff6767;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #7254f3;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #5935f1;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #7254f3;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #5935f1;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #7254f3;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f6f9fc;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #5935f1;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #7254f3;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dfe7ef;
+    color: #043d75;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #d3dbe3;
+    color: #043d75;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #043d75;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ff6767;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #323232;
+    border: 1px solid #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 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d3dbe3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #7254f3;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f6f9fc;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f6f9fc;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #708da9;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #708da9;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #708da9;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ff6767;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #708da9;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.75rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #043d75;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f6f9fc;
+    color: #708da9;
+    border-top: 1px solid #d3dbe3;
+    border-left: 1px solid #d3dbe3;
+    border-bottom: 1px solid #d3dbe3;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d3dbe3;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ff6767;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d3dbe3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #7254f3;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b8c5d2;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #6545f2;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ff6767;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #043d75;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d3dbe3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #7254f3;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ff6767;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f6f9fc;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .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: #708da9;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ff6767;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #708da9;
+  }
+  :-moz-placeholder {
+    color: #708da9;
+  }
+  ::-moz-placeholder {
+    color: #708da9;
+  }
+  :-ms-input-placeholder {
+    color: #708da9;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f6f9fc;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f6f9fc;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #708da9;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #708da9;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #043d75;
+    border: 1px solid #d3dbe3;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #708da9;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.75rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #043d75;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ff6767;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.75rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d3dbe3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #7254f3;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f6f9fc;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f6f9fc;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #708da9;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dfe7ef;
+    color: #043d75;
+    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: #708da9;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ff6767;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #708da9;
+  }
+  .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: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.75rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .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 1.25rem;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #043d75;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ff6767;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #dfe7ef;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ea5455;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff9f42;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #29c76f;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 22px;
+    height: 22px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d3dbe3;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d3dbe3;
+    background: #ffffff;
+    width: 22px;
+    height: 22px;
+    color: #043d75;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #7254f3;
+    background: #7254f3;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #7254f3;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #5935f1;
+    background: #5935f1;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ff6767;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f6f9fc;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #7254f3;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f6f9fc;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #5935f1;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f6f9fc;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #7254f3;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f6f9fc;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #5935f1;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #043d75;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ea5455;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #7254f3;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #7254f3;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #e73d3e;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d3dbe3;
+    color: #043d75;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #708da9;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f6f9fc;
+    border-color: #d3dbe3;
+    color: #043d75;
+  }
+  .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: #708da9;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #7254f3;
+    border-color: #7254f3;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #6545f2;
+    border-color: #6545f2;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ff6767;
+  }
+  .p-slider {
+    background: #dfe7ef;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #7254f3;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-slider .p-slider-range {
+    background: #7254f3;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #7254f3;
+    border-color: #7254f3;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d3dbe3;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #7254f3;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f6f9fc;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f6f9fc;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #708da9;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #dfe7ef;
+    color: #043d75;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #708da9;
+    width: 3rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #708da9;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ff6767;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #708da9;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1.25rem;
+    color: #043d75;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f6f9fc;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f6f9fc;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d3dbe3;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d3dbe3;
+    color: #043d75;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #708da9;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #7254f3;
+    border-color: #7254f3;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f6f9fc;
+    border-color: #d3dbe3;
+    color: #043d75;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #708da9;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #6545f2;
+    border-color: #6545f2;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+    border-color: #7254f3;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ff6767;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #7254f3;
+    border: 1px solid #7254f3;
+    padding: 0.75rem 1.25rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #6545f2;
+    color: #ffffff;
+    border-color: #6545f2;
+  }
+  .p-button:not(:disabled):active {
+    background: #5935f1;
+    color: #ffffff;
+    border-color: #5935f1;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #7254f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(114, 84, 243, 0.04);
+    color: #7254f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(114, 84, 243, 0.16);
+    color: #7254f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #708da9;
+    border-color: #708da9;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f6f9fc;
+    color: #708da9;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #dfe7ef;
+    color: #708da9;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #7254f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(114, 84, 243, 0.04);
+    color: #7254f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(114, 84, 243, 0.16);
+    color: #7254f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #708da9;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f6f9fc;
+    color: #708da9;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #dfe7ef;
+    color: #708da9;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #7254f3;
+    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: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #a1c30d;
+    border: 1px solid #a1c30d;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #91b00c;
+    color: #ffffff;
+    border-color: #91b00c;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #e4f78e;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #819c0a;
+    color: #ffffff;
+    border-color: #819c0a;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #a1c30d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(161, 195, 13, 0.04);
+    color: #a1c30d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(161, 195, 13, 0.16);
+    color: #a1c30d;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #a1c30d;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(161, 195, 13, 0.04);
+    border-color: transparent;
+    color: #a1c30d;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(161, 195, 13, 0.16);
+    border-color: transparent;
+    color: #a1c30d;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #5486f3;
+    border: 1px solid #5486f3;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #3570f1;
+    color: #ffffff;
+    border-color: #3570f1;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #bbcffa;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #175bef;
+    color: #ffffff;
+    border-color: #175bef;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #5486f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(84, 134, 243, 0.04);
+    color: #5486f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(84, 134, 243, 0.16);
+    color: #5486f3;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #5486f3;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(84, 134, 243, 0.04);
+    border-color: transparent;
+    color: #5486f3;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(84, 134, 243, 0.16);
+    border-color: transparent;
+    color: #5486f3;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #29c76f;
+    border: 1px solid #29c76f;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #25b364;
+    color: #ffffff;
+    border-color: #25b364;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #a5edc5;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #219f59;
+    color: #ffffff;
+    border-color: #219f59;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #29c76f;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(41, 199, 111, 0.04);
+    color: #29c76f;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(41, 199, 111, 0.16);
+    color: #29c76f;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #29c76f;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(41, 199, 111, 0.04);
+    border-color: transparent;
+    color: #29c76f;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(41, 199, 111, 0.16);
+    border-color: transparent;
+    color: #29c76f;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #ff9f42;
+    border: 1px solid #ff9f42;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ff8f22;
+    color: #ffffff;
+    border-color: #ff8f22;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #ffd9b3;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ff7e02;
+    color: #ffffff;
+    border-color: #ff7e02;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ff9f42;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 159, 66, 0.04);
+    color: #ff9f42;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 159, 66, 0.16);
+    color: #ff9f42;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ff9f42;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 159, 66, 0.04);
+    border-color: transparent;
+    color: #ff9f42;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 159, 66, 0.16);
+    border-color: transparent;
+    color: #ff9f42;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #3ec9d6;
+    border: 1px solid #3ec9d6;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #2cbfcd;
+    color: #ffffff;
+    border-color: #2cbfcd;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #b2e9ef;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #27aab6;
+    color: #ffffff;
+    border-color: #27aab6;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #3ec9d6;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(62, 201, 214, 0.04);
+    color: #3ec9d6;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(62, 201, 214, 0.16);
+    color: #3ec9d6;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #3ec9d6;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(62, 201, 214, 0.04);
+    border-color: transparent;
+    color: #3ec9d6;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(62, 201, 214, 0.16);
+    border-color: transparent;
+    color: #3ec9d6;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ea5455;
+    border: 1px solid #ea5455;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #e73839;
+    color: #ffffff;
+    border-color: #e73839;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f7bbbb;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #e31c1d;
+    color: #ffffff;
+    border-color: #e31c1d;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ea5455;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(234, 84, 85, 0.04);
+    color: #ea5455;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(234, 84, 85, 0.16);
+    color: #ea5455;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ea5455;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(234, 84, 85, 0.04);
+    border-color: transparent;
+    color: #ea5455;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(234, 84, 85, 0.16);
+    border-color: transparent;
+    color: #ea5455;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #212529;
+    border: 1px solid #212529;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #343a40;
+    color: #ffffff;
+    border-color: #343a40;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #043d75;
+    color: #ffffff;
+    border-color: #043d75;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    color: #212529;
+    border: 1px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #212529;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(33, 37, 41, 0.04);
+    border-color: transparent;
+    color: #212529;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(33, 37, 41, 0.16);
+    border-color: transparent;
+    color: #212529;
+  }
+  .p-button.p-button-link {
+    color: #5935f1;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #5935f1;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #c7bbfa;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #5935f1;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #7254f3;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(114, 84, 243, 0.04);
+    color: #7254f3;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(114, 84, 243, 0.16);
+    color: #7254f3;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #708da9;
+    border-color: #708da9;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f6f9fc;
+    color: #708da9;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #dfe7ef;
+    color: #708da9;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #7254f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(114, 84, 243, 0.04);
+    color: #7254f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(114, 84, 243, 0.16);
+    color: #7254f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #708da9;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f6f9fc;
+    color: #708da9;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #dfe7ef;
+    color: #708da9;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 1.09375rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.5625rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a1c30d;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(161, 195, 13, 0.04);
+    color: #a1c30d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(161, 195, 13, 0.16);
+    color: #a1c30d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a1c30d;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(161, 195, 13, 0.04);
+    border-color: transparent;
+    color: #a1c30d;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(161, 195, 13, 0.16);
+    border-color: transparent;
+    color: #a1c30d;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #5486f3;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(84, 134, 243, 0.04);
+    color: #5486f3;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(84, 134, 243, 0.16);
+    color: #5486f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #5486f3;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(84, 134, 243, 0.04);
+    border-color: transparent;
+    color: #5486f3;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(84, 134, 243, 0.16);
+    border-color: transparent;
+    color: #5486f3;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #29c76f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(41, 199, 111, 0.04);
+    color: #29c76f;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(41, 199, 111, 0.16);
+    color: #29c76f;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #29c76f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(41, 199, 111, 0.04);
+    border-color: transparent;
+    color: #29c76f;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(41, 199, 111, 0.16);
+    border-color: transparent;
+    color: #29c76f;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ff9f42;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 159, 66, 0.04);
+    color: #ff9f42;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 159, 66, 0.16);
+    color: #ff9f42;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ff9f42;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 159, 66, 0.04);
+    border-color: transparent;
+    color: #ff9f42;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 159, 66, 0.16);
+    border-color: transparent;
+    color: #ff9f42;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #3ec9d6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(62, 201, 214, 0.04);
+    color: #3ec9d6;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(62, 201, 214, 0.16);
+    color: #3ec9d6;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #3ec9d6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(62, 201, 214, 0.04);
+    border-color: transparent;
+    color: #3ec9d6;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(62, 201, 214, 0.16);
+    border-color: transparent;
+    color: #3ec9d6;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ea5455;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(234, 84, 85, 0.04);
+    color: #ea5455;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(234, 84, 85, 0.16);
+    color: #ea5455;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ea5455;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(234, 84, 85, 0.04);
+    border-color: transparent;
+    color: #ea5455;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(234, 84, 85, 0.16);
+    border-color: transparent;
+    color: #ea5455;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #043d75;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #022354;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #d3dbe3;
+    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: #c6ccd7;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .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: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #708da9;
+    background: #eff3f8;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #708da9;
+    background: #eff3f8;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #708da9;
+    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: #7254f3;
+    background: #e2dcfc;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f6f9fc;
+    color: #708da9;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #708da9;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #7254f3;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #7254f3;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #043d75;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .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: 700;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #c7bbfa;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #e2dcfc;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #e2dcfc;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #c7bbfa;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #c7bbfa;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #7254f3;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #eff3f8;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #eff3f8;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #7254f3;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #7254f3;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(114, 84, 243, 0.16);
+  }
+  .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: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #dfe7ef;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.75rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.75rem 1.25rem;
+    border-bottom: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #dfe7ef;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #dfe7ef;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #708da9;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #fcfcfc;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f6f9fc;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #8167f2;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #dfe7ef;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #dfe7ef;
+    border-color: #dfe7ef;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #dfe7ef;
+    border-color: #dfe7ef;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #708da9;
+    border: solid #f6f9fc;
+    border-width: 0;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #708da9;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    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: #f6f9fc;
+    border-color: transparent;
+    color: #043d75;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #708da9;
+    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: #708da9;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 50%;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #e2dcfc;
+    border-color: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f6f9fc;
+    border-color: transparent;
+    color: #043d75;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #dfe7ef;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #708da9;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    padding: 0.75rem 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1.25rem;
+    margin: 0;
+    border: 0 none;
+    color: #043d75;
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #cbc0fa;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    padding: 1.25rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #708da9;
+  }
+  .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: #043d75;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .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: #7254f3;
+  }
+  .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: #7254f3;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .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: #708da9;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #9a85f5;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 1px 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #eff3f8;
+    color: #708da9;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 700;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #708da9;
+    background: #eff3f8;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    font-weight: 700;
+    color: #708da9;
+    background: #eff3f8;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #c7bbfa;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #708da9;
+    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: #7254f3;
+    background: #e2dcfc;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #708da9;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #708da9;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #7254f3;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #043d75;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #043d75;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #c7bbfa;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #7254f3;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #7254f3;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #043d75;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #7254f3;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #eff3f8;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #7254f3;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #7254f3;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #7254f3;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #dfe7ef;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f6f9fc;
+    border-color: #dfe7ef;
+    color: #708da9;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #eff3f8;
+    border-color: #dfe7ef;
+    color: #043d75;
+    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: #dfe7ef;
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 4px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #043d75;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #708da9;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+    border-radius: 6px;
+  }
+  .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: 1.25rem;
+    color: #708da9;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f6f9fc;
+    border-color: #dfe7ef;
+    color: #708da9;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1.25rem 0;
+    padding: 0 1.25rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #dfe7ef;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1.25rem;
+    padding: 1.25rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #dfe7ef;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #dfe7ef;
+    padding: 1.25rem;
+    background: #eff3f8;
+    color: #708da9;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    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: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #043d75;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: #eff3f8;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #dfe7ef;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #dfe7ef;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #043d75;
+    border: 1px solid #f6f9fc;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #708da9;
+    font-weight: 700;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #043d75;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #7254f3;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #043d75;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #dfe7ef;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #043d75;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #7254f3;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #eff3f8;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #dfe7ef;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dfe7ef transparent;
+    background: #ffffff;
+    color: #708da9;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #c7bbfa;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #c6ccd7;
+    color: #708da9;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #7254f3;
+    color: #7254f3;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #7254f3;
+    width: 3rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #c7bbfa;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #043d75;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #eff3f8;
+    border: 1px solid #dfe7ef;
+    padding: 1.25rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1.25rem 1.25rem 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: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #708da9;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 700;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #043d75;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #043d75;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #7254f3;
+    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: #6545f2;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #043d75;
+    border: 0 none;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #043d75;
+    border-color: transparent;
+    background: #f6f9fc;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #043d75;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #043d75;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #043d75;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #043d75;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #043d75;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #eff3f8;
+    padding: 1.25rem;
+    border: 1px solid #dfe7ef;
+    color: #708da9;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #dfe7ef;
+    color: #043d75;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #eff3f8;
+    border: 1px solid #dfe7ef;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #043d75;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #708da9;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    color: #043d75;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #c7bbfa;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #eff3f8;
+    color: #043d75;
+    border: 1px solid #dfe7ef;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #eff3f8;
+    color: #043d75;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #708da9;
+    background: #f6f9fc;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    color: #043d75;
+    border: 1px solid #dfe7ef;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-menu.p-menu-overlay {
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1.25rem;
+    color: #708da9;
+    background: #eff3f8;
+    font-weight: 700;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #eff3f8;
+    color: #043d75;
+    border: 1px solid #dfe7ef;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #708da9;
+    background: #f6f9fc;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #708da9;
+      border-radius: 50%;
+      transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #708da9;
+      background: #f6f9fc;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #c7bbfa;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #eff3f8;
+      border: 0 none;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #dfe7ef;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #043d75;
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #043d75;
+      padding: 0.75rem 1.25rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #043d75;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #708da9;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #708da9;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #7254f3;
+      background: #e2dcfc;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #7254f3;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #7254f3;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #cbc0fa;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #043d75;
+      background: #dfe7ef;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #043d75;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #043d75;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #043d75;
+      background: #f6f9fc;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #043d75;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #708da9;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #dfe7ef;
+    color: #708da9;
+    background: #eff3f8;
+    border-radius: 6px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #708da9;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #c7bbfa;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f6f9fc;
+    border-color: #dfe7ef;
+    color: #708da9;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #eff3f8;
+    border-color: #dfe7ef;
+    color: #043d75;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #dfe7ef;
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #dfe7ef;
+    background: #ffffff;
+    color: #043d75;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 4px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    color: #043d75;
+    border: 1px solid #dfe7ef;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #e2dcfc;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #7254f3;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #7254f3;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1.25rem;
+    color: #043d75;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #043d75;
+    border: 1px solid #f6f9fc;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #708da9;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 700;
+    color: #043d75;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #dfe7ef;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #dfe7ef;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #dfe7ef;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #dfe7ef transparent;
+    background: #ffffff;
+    color: #708da9;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #c7bbfa;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #c6ccd7;
+    color: #708da9;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #7254f3;
+    color: #7254f3;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    color: #043d75;
+    border: 1px solid #dfe7ef;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #043d75;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #043d75;
+    padding: 0.75rem 1.25rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #708da9;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #7254f3;
+    background: #e2dcfc;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #7254f3;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #7254f3;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #cbc0fa;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #043d75;
+    background: #dfe7ef;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #043d75;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #043d75;
+    background: #f6f9fc;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #043d75;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #708da9;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #e9e9ff;
+    border: solid #696cff;
+    border-width: 0px;
+    color: #696cff;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #696cff;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #e4f8f0;
+    border: solid #1ea97c;
+    border-width: 0px;
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #1ea97c;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fff2e2;
+    border: solid #cc8925;
+    border-width: 0px;
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #cc8925;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffe7e6;
+    border: solid #ff5757;
+    border-width: 0px;
+    color: #ff5757;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #ff5757;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-message.p-message-info {
+    background: #e9e9ff;
+    border: solid #696cff;
+    border-width: 0 0 0 6px;
+    color: #696cff;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #696cff;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #696cff;
+  }
+  .p-message.p-message-success {
+    background: #e4f8f0;
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #1ea97c;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #1ea97c;
+  }
+  .p-message.p-message-warn {
+    background: #fff2e2;
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #cc8925;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #cc8925;
+  }
+  .p-message.p-message-error {
+    background: #ffe7e6;
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #ff5757;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #ff5757;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #e9e9ff;
+    border: solid #696cff;
+    border-width: 0 0 0 6px;
+    color: #696cff;
+  }
+  .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: #696cff;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #e4f8f0;
+    border: solid #1ea97c;
+    border-width: 0 0 0 6px;
+    color: #1ea97c;
+  }
+  .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: #1ea97c;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fff2e2;
+    border: solid #cc8925;
+    border-width: 0 0 0 6px;
+    color: #cc8925;
+  }
+  .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: #cc8925;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffe7e6;
+    border: solid #ff5757;
+    border-width: 0 0 0 6px;
+    color: #ff5757;
+  }
+  .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: #ff5757;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #eff3f8;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #eff3f8;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #eff3f8;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #eff3f8;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #eff3f8;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #d3dbe3;
+    width: 1rem;
+    height: 1rem;
+    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: #c6ccd7;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #e2dcfc;
+    color: #7254f3;
+  }
+  .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: #e2dcfc;
+    color: #7254f3;
+  }
+  .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: #eff3f8;
+    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: #eff3f8;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #dfe7ef;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #dfe7ef;
+    color: #043d75;
+    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 {
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #eff3f8;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #dfe7ef;
+    border-radius: 6px;
+  }
+  .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: #7254f3;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #29c76f;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #5486f3;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ff9f42;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ea5455;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f6f9fc;
+    color: #043d75;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #dfe7ef;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #7254f3;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #7254f3;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #dfe7ef;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #7254f3;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #043d75;
+    border: 1px solid #dfe7ef;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #7254f3;
+    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: #a1c30d;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #29c76f;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #5486f3;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ff9f42;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ea5455;
+    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-tag {
+    background: #7254f3;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #29c76f;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #5486f3;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ff9f42;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ea5455;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    color: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    color: #ffffff;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button:enabled:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker .p-timepicker .p-link {
+    color: #ffffff;
+  }
+  .p-datepicker .p-timepicker .p-link:enabled:hover {
+    color: #ffffff;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  .p-datepicker table {
+    font-size: 1rem;
+    margin: 0.5rem 0;
+  }
+  .p-datepicker table th {
+    color: rgba(255, 255, 255, 0.7);
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .p-button .p-button-label {
+    font-weight: 700;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #7254f3;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #7254f3;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #7254f3;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #7254f3;
+  }
+  .p-selectbutton > .p-button,
+  .p-togglebutton.p-button {
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+}
diff --git a/public/themes/tailwind-light/fonts/Inter-Bold.woff b/public/themes/tailwind-light/fonts/Inter-Bold.woff
new file mode 100644
index 0000000000..eaf3d4bfd7
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Bold.woff differ
diff --git a/public/themes/tailwind-light/fonts/Inter-Bold.woff2 b/public/themes/tailwind-light/fonts/Inter-Bold.woff2
new file mode 100644
index 0000000000..2846f29cc8
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Bold.woff2 differ
diff --git a/public/themes/tailwind-light/fonts/Inter-Light.woff b/public/themes/tailwind-light/fonts/Inter-Light.woff
new file mode 100644
index 0000000000..c496464d02
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Light.woff differ
diff --git a/public/themes/tailwind-light/fonts/Inter-Light.woff2 b/public/themes/tailwind-light/fonts/Inter-Light.woff2
new file mode 100644
index 0000000000..bc4be6658b
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Light.woff2 differ
diff --git a/public/themes/tailwind-light/fonts/Inter-Medium.woff b/public/themes/tailwind-light/fonts/Inter-Medium.woff
new file mode 100644
index 0000000000..d546843f28
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Medium.woff differ
diff --git a/public/themes/tailwind-light/fonts/Inter-Medium.woff2 b/public/themes/tailwind-light/fonts/Inter-Medium.woff2
new file mode 100644
index 0000000000..f92498a2ec
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Medium.woff2 differ
diff --git a/public/themes/tailwind-light/fonts/Inter-Regular.woff b/public/themes/tailwind-light/fonts/Inter-Regular.woff
new file mode 100644
index 0000000000..62d3a61871
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Regular.woff differ
diff --git a/public/themes/tailwind-light/fonts/Inter-Regular.woff2 b/public/themes/tailwind-light/fonts/Inter-Regular.woff2
new file mode 100644
index 0000000000..6c2b6893d5
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-Regular.woff2 differ
diff --git a/public/themes/tailwind-light/fonts/Inter-SemiBold.woff b/public/themes/tailwind-light/fonts/Inter-SemiBold.woff
new file mode 100644
index 0000000000..a815f43a91
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-SemiBold.woff differ
diff --git a/public/themes/tailwind-light/fonts/Inter-SemiBold.woff2 b/public/themes/tailwind-light/fonts/Inter-SemiBold.woff2
new file mode 100644
index 0000000000..611e90c958
Binary files /dev/null and b/public/themes/tailwind-light/fonts/Inter-SemiBold.woff2 differ
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
new file mode 100644
index 0000000000..7b79518225
--- /dev/null
+++ b/public/themes/tailwind-light/theme.css
@@ -0,0 +1,7075 @@
+:root {
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --surface-a: #ffffff;
+  --surface-b: #fafafa;
+  --surface-c: #f4f4f5;
+  --surface-d: #e5e7eb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #3f3f46;
+  --text-color-secondary: #71717a;
+  --primary-color: #4f46e5;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #fafafa;
+  --surface-100: #f4f4f5;
+  --surface-200: #e4e4e7;
+  --surface-300: #d4d4d8;
+  --surface-400: #a1a1aa;
+  --surface-500: #71717a;
+  --surface-600: #52525b;
+  --surface-700: #3f3f46;
+  --surface-800: #27272a;
+  --surface-900: #18181b;
+  --gray-50: #fafafa;
+  --gray-100: #f4f4f5;
+  --gray-200: #e4e4e7;
+  --gray-300: #d4d4d8;
+  --gray-400: #a1a1aa;
+  --gray-500: #71717a;
+  --gray-600: #52525b;
+  --gray-700: #3f3f46;
+  --gray-800: #27272a;
+  --gray-900: #18181b;
+  --content-padding: 1.25rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 0.375rem;
+  --surface-ground: #fafafa;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #e5e7eb;
+  --surface-hover: #f4f4f5;
+  --focus-ring: 0 0 0 1px #6366f1;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #eef2ff;
+  --highlight-text-color: #312e81;
+  color-scheme: light;
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  src: local(""), url("http://github.com/fonts/Inter-Light.woff2") format("woff2"), url("http://github.com/fonts/Inter-Light.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""), url("http://github.com/fonts/Inter-Regular.woff2") format("woff2"), url("http://github.com/fonts/Inter-Regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  src: local(""), url("http://github.com/fonts/Inter-Medium.woff2") format("woff2"), url("http://github.com/fonts/Inter-Medium.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: local(""), url("http://github.com/fonts/Inter-SemiBold.woff2") format("woff2"), url("http://github.com/fonts/Inter-SemiBold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""), url("http://github.com/fonts/Inter-Bold.woff2") format("woff2"), url("http://github.com/fonts/Inter-Bold.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+:root {
+  --blue-50:#f5f9ff;
+  --blue-100:#d0e1fd;
+  --blue-200:#abc9fb;
+  --blue-300:#85b2f9;
+  --blue-400:#609af8;
+  --blue-500:#3b82f6;
+  --blue-600:#326fd1;
+  --blue-700:#295bac;
+  --blue-800:#204887;
+  --blue-900:#183462;
+  --green-50:#f4fcf7;
+  --green-100:#caf1d8;
+  --green-200:#a0e6ba;
+  --green-300:#76db9b;
+  --green-400:#4cd07d;
+  --green-500:#22c55e;
+  --green-600:#1da750;
+  --green-700:#188a42;
+  --green-800:#136c34;
+  --green-900:#0e4f26;
+  --yellow-50:#fefbf3;
+  --yellow-100:#faedc4;
+  --yellow-200:#f6de95;
+  --yellow-300:#f2d066;
+  --yellow-400:#eec137;
+  --yellow-500:#eab308;
+  --yellow-600:#c79807;
+  --yellow-700:#a47d06;
+  --yellow-800:#816204;
+  --yellow-900:#5e4803;
+  --cyan-50:#f3fbfd;
+  --cyan-100:#c3edf5;
+  --cyan-200:#94e0ed;
+  --cyan-300:#65d2e4;
+  --cyan-400:#35c4dc;
+  --cyan-500:#06b6d4;
+  --cyan-600:#059bb4;
+  --cyan-700:#047f94;
+  --cyan-800:#036475;
+  --cyan-900:#024955;
+  --pink-50:#fef6fa;
+  --pink-100:#fad3e7;
+  --pink-200:#f7b0d3;
+  --pink-300:#f38ec0;
+  --pink-400:#f06bac;
+  --pink-500:#ec4899;
+  --pink-600:#c93d82;
+  --pink-700:#a5326b;
+  --pink-800:#822854;
+  --pink-900:#5e1d3d;
+  --indigo-50:#f7f7fe;
+  --indigo-100:#dadafc;
+  --indigo-200:#bcbdf9;
+  --indigo-300:#9ea0f6;
+  --indigo-400:#8183f4;
+  --indigo-500:#6366f1;
+  --indigo-600:#5457cd;
+  --indigo-700:#4547a9;
+  --indigo-800:#363885;
+  --indigo-900:#282960;
+  --teal-50:#f3fbfb;
+  --teal-100:#c7eeea;
+  --teal-200:#9ae0d9;
+  --teal-300:#6dd3c8;
+  --teal-400:#41c5b7;
+  --teal-500:#14b8a6;
+  --teal-600:#119c8d;
+  --teal-700:#0e8174;
+  --teal-800:#0b655b;
+  --teal-900:#084a42;
+  --orange-50:#fff8f3;
+  --orange-100:#feddc7;
+  --orange-200:#fcc39b;
+  --orange-300:#fba86f;
+  --orange-400:#fa8e42;
+  --orange-500:#f97316;
+  --orange-600:#d46213;
+  --orange-700:#ae510f;
+  --orange-800:#893f0c;
+  --orange-900:#642e09;
+  --bluegray-50:#f7f8f9;
+  --bluegray-100:#dadee3;
+  --bluegray-200:#bcc3cd;
+  --bluegray-300:#9fa9b7;
+  --bluegray-400:#818ea1;
+  --bluegray-500:#64748b;
+  --bluegray-600:#556376;
+  --bluegray-700:#465161;
+  --bluegray-800:#37404c;
+  --bluegray-900:#282e38;
+  --purple-50:#fbf7ff;
+  --purple-100:#ead6fd;
+  --purple-200:#dab6fc;
+  --purple-300:#c996fa;
+  --purple-400:#b975f9;
+  --purple-500:#a855f7;
+  --purple-600:#8f48d2;
+  --purple-700:#763cad;
+  --purple-800:#5c2f88;
+  --purple-900:#432263;
+  --red-50:#fef6f6;
+  --red-100:#fbd2d2;
+  --red-200:#f8afaf;
+  --red-300:#f58b8b;
+  --red-400:#f26868;
+  --red-500:#ef4444;
+  --red-600:#cb3a3a;
+  --red-700:#a73030;
+  --red-800:#832525;
+  --red-900:#601b1b;
+  --primary-50:#f6f6fe;
+  --primary-100:#d5d3f9;
+  --primary-200:#b3aff4;
+  --primary-300:#928cef;
+  --primary-400:#7069ea;
+  --primary-500:#4f46e5;
+  --primary-600:#433cc3;
+  --primary-700:#3731a0;
+  --primary-800:#2b277e;
+  --primary-900:#201c5c;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #fafafa;
+  border-top-right-radius: 0.375rem;
+  border-top-left-radius: 0.375rem;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #71717a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #71717a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #71717a;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #3f3f46;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #3f3f46;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #3f3f46;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #3f3f46;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #3f3f46;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #3f3f46;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-radius: 0.375rem;
+  padding: 0.25rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #3f3f46;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #18181b;
+  background: #f4f4f5;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #e5e7eb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #3f3f46;
+  border-bottom-right-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #3f3f46;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #3f3f46;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #3f3f46;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+  color: #4f46e5;
+}
+.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: #4f46e5;
+}
+.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: #4f46e5;
+}
+.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: #4f46e5;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #e24c4c;
+  }
+  .p-text-secondary {
+    color: #71717a;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 0.375rem;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.75rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.375rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #d4d4d8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #3f3f46;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #eef2ff;
+    color: #312e81;
+    border-radius: 0.375rem;
+  }
+  .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: #f0a9a7;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-autocomplete-panel .p-autocomplete-items {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f0a9a7;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #3f3f46;
+    border: 1px solid #d4d4d8;
+    border-radius: 0.375rem;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #3f3f46;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #e5e7eb;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #3f3f46;
+    transition: none;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #4f46e5;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: none;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #d4d4d8;
+    color: #3f3f46;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #f3f4f6;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #f3f4f6;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .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: 0.375rem;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: none;
+    border-radius: 0.375rem;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #f3f4f6;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #f4f4f5;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #f4f4f5;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #f4f4f5;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 1px solid #d4d4d8;
+    transition: none;
+    border-radius: 0.375rem;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #d4d4d8;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.75rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #71717a;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #71717a;
+    width: 3rem;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f0a9a7;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.25rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #e0e7ff;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.75rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 16px;
+    height: 16px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #d4d4d8;
+    border-radius: 0.375rem;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d4d4d8;
+    background: #ffffff;
+    width: 16px;
+    height: 16px;
+    color: #3f3f46;
+    border-radius: 0.375rem;
+    transition: none;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 10px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 10px;
+    height: 10px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #d4d4d8;
+    background: #ffffff;
+    width: 16px;
+    height: 16px;
+    color: #3f3f46;
+    border-radius: 0.375rem;
+    transition: none;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 10px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 10px;
+    height: 10px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #4f46e5;
+    background: #4f46e5;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #d4d4d8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #4f46e5;
+    background: #4f46e5;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f0a9a7;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #4f46e5;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #4f46e5;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #4f46e5;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #4f46e5;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #4f46e5;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #fafafa;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #4f46e5;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #d4d4d8;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.375rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #3f3f46;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #d4d4d8;
+    color: #3f3f46;
+  }
+  .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: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #3f3f46;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f0a9a7;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #27272a;
+    border: 1px solid #18181b;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 1px solid #d4d4d8;
+    transition: none;
+    border-radius: 0.375rem;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #d4d4d8;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #fafafa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #fafafa;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.75rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: #71717a;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #71717a;
+    width: 3rem;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #71717a;
+    right: 3rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f0a9a7;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 0 none;
+    color: #3f3f46;
+    background: #fafafa;
+    margin: 0;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.25rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #e0e7ff;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #fafafa;
+    color: #71717a;
+    border-top: 1px solid #d4d4d8;
+    border-left: 1px solid #d4d4d8;
+    border-bottom: 1px solid #d4d4d8;
+    padding: 0.75rem 0.75rem;
+    min-width: 3rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #d4d4d8;
+  }
+  .p-inputgroup > .p-component,
+  .p-inputgroup > .p-inputwrapper > .p-inputtext,
+  .p-inputgroup > .p-float-label > .p-component {
+    border-radius: 0;
+    margin: 0;
+  }
+  .p-inputgroup > .p-component + .p-inputgroup-addon,
+  .p-inputgroup > .p-inputwrapper > .p-inputtext + .p-inputgroup-addon,
+  .p-inputgroup > .p-float-label > .p-component + .p-inputgroup-addon {
+    border-left: 0 none;
+  }
+  .p-inputgroup > .p-component:focus,
+  .p-inputgroup > .p-inputwrapper > .p-inputtext:focus,
+  .p-inputgroup > .p-float-label > .p-component:focus {
+    z-index: 1;
+  }
+  .p-inputgroup > .p-component:focus ~ label,
+  .p-inputgroup > .p-inputwrapper > .p-inputtext:focus ~ label,
+  .p-inputgroup > .p-float-label > .p-component:focus ~ label {
+    z-index: 1;
+  }
+  .p-inputgroup-addon:first-child,
+  .p-inputgroup button:first-child,
+  .p-inputgroup input:first-child,
+  .p-inputgroup > .p-inputwrapper:first-child,
+  .p-inputgroup > .p-inputwrapper:first-child > .p-inputtext {
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-inputgroup-addon:last-child,
+  .p-inputgroup button:last-child,
+  .p-inputgroup input:last-child,
+  .p-inputgroup > .p-inputwrapper:last-child,
+  .p-inputgroup > .p-inputwrapper:last-child > .p-inputtext {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 3rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f0a9a7;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #d4d4d8;
+    transition: none;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #4f46e5;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #bebec4;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #4338ca;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f0a9a7;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #3f3f46;
+    background: #ffffff;
+    padding: 0.75rem 0.75rem;
+    border: 1px solid #d4d4d8;
+    transition: none;
+    appearance: none;
+    border-radius: 0.375rem;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #d4d4d8;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f0a9a7;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #fafafa;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-float-label > label {
+    left: 0.75rem;
+    color: #71717a;
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f0a9a7;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #71717a;
+  }
+  :-moz-placeholder {
+    color: #71717a;
+  }
+  ::-moz-placeholder {
+    color: #71717a;
+  }
+  :-ms-input-placeholder {
+    color: #71717a;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #fafafa;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #fafafa;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #ffffff;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.9375rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #71717a;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 1px solid #d4d4d8;
+    border-radius: 0.375rem;
+    transition: none;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 0 none;
+    color: #3f3f46;
+    background: #fafafa;
+    margin: 0;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.75rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.25rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border: 0 none;
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #e0e7ff;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f0a9a7;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-mention-panel .p-mention-items {
+    padding: 0.25rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 1px solid #d4d4d8;
+    transition: none;
+    border-radius: 0.375rem;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #d4d4d8;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #fafafa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #fafafa;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: none;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #71717a;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #3f3f46;
+    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: #71717a;
+    width: 3rem;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f0a9a7;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 0 none;
+    color: #3f3f46;
+    background: #fafafa;
+    margin: 0;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.75rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-checkbox {
+    margin-right: 0.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close {
+    margin-left: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.25rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #e0e7ff;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .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 1rem;
+    color: #3f3f46;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f0a9a7;
+  }
+  .p-password-panel {
+    padding: 1.25rem;
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    border-radius: 0.375rem;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #e5e7eb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #ef4444;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #f59e0b;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #22c55e;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 16px;
+    height: 16px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #d4d4d8;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #d4d4d8;
+    background: #ffffff;
+    width: 16px;
+    height: 16px;
+    color: #3f3f46;
+    border-radius: 50%;
+    transition: none;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 6px;
+    height: 6px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #4f46e5;
+    background: #4f46e5;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #d4d4d8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #4f46e5;
+    background: #4f46e5;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f0a9a7;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #fafafa;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #4f46e5;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #fafafa;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #4f46e5;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #fafafa;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #4f46e5;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #fafafa;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #4f46e5;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #3f3f46;
+    transition: none;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #ef4444;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #4f46e5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #4f46e5;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #dc2626;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d4d4d8;
+    color: #3f3f46;
+    transition: none;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #71717a;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #f4f4f5;
+    border-color: #d4d4d8;
+    color: #3f3f46;
+  }
+  .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: #71717a;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #4f46e5;
+    border-color: #4f46e5;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #4338ca;
+    border-color: #4338ca;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f0a9a7;
+  }
+  .p-slider {
+    background: #e5e7eb;
+    border: 0 none;
+    border-radius: 0.375rem;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #4f46e5;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-slider .p-slider-range {
+    background: #4f46e5;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #4f46e5;
+    border-color: #4f46e5;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 1px solid #d4d4d8;
+    transition: none;
+    border-radius: 0.375rem;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #d4d4d8;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #fafafa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #fafafa;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.75rem 0.75rem;
+    transition: none;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #71717a;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.375rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #e5e7eb;
+    color: #3f3f46;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #71717a;
+    width: 3rem;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #71717a;
+    right: 3rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f0a9a7;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 0 none;
+    color: #3f3f46;
+    background: #fafafa;
+    margin: 0;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #fafafa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #fafafa;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #ffffff;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #d4d4d8;
+    border-radius: 0.375rem;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 1px solid #d4d4d8;
+    color: #3f3f46;
+    transition: none;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #71717a;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #4f46e5;
+    border-color: #4f46e5;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #f4f4f5;
+    border-color: #d4d4d8;
+    color: #3f3f46;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #71717a;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #4338ca;
+    border-color: #4338ca;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+    border-color: #4f46e5;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f0a9a7;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #4f46e5;
+    border: 1px solid #4f46e5;
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    transition: none;
+    border-radius: 0.375rem;
+  }
+  .p-button:not(:disabled):hover {
+    background: #4338ca;
+    color: #ffffff;
+    border-color: #4338ca;
+  }
+  .p-button:not(:disabled):active {
+    background: #4338ca;
+    color: #ffffff;
+    border-color: #4338ca;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #4f46e5;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(79, 70, 229, 0.04);
+    color: #4f46e5;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(79, 70, 229, 0.16);
+    color: #4f46e5;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #71717a;
+    border-color: #71717a;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #f4f4f5;
+    color: #71717a;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #71717a;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(79, 70, 229, 0.04);
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(79, 70, 229, 0.16);
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #71717a;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #f4f4f5;
+    color: #71717a;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #e5e7eb;
+    color: #71717a;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #4f46e5;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+  .p-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 3rem;
+    padding: 0.75rem 0;
+  }
+  .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: 3rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 3rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #64748b;
+    border: 1px solid #64748b;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #c0c7d2;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #475569;
+    color: #ffffff;
+    border-color: #475569;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #3b82f6;
+    border: 1px solid #3b82f6;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #2563eb;
+    color: #ffffff;
+    border-color: #2563eb;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #b1cdfb;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #2563eb;
+    color: #ffffff;
+    border-color: #2563eb;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    border-color: transparent;
+    color: #3b82f6;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    border-color: transparent;
+    color: #3b82f6;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #22c55e;
+    border: 1px solid #22c55e;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #a0efbd;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #16a34a;
+    color: #ffffff;
+    border-color: #16a34a;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #f59e0b;
+    border: 1px solid #f59e0b;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #d97706;
+    color: #ffffff;
+    border-color: #d97706;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #fbd89d;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #d97706;
+    color: #ffffff;
+    border-color: #d97706;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    border-color: transparent;
+    color: #f59e0b;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    border-color: transparent;
+    color: #f59e0b;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #a855f7;
+    border: 1px solid #a855f7;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #dcbbfc;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #9333ea;
+    color: #ffffff;
+    border-color: #9333ea;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #ef4444;
+    border: 1px solid #ef4444;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.2rem #f9b4b4;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-button.p-button-link {
+    color: #4f46e5;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.2rem #6366f1;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 0.375rem;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #4f46e5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(79, 70, 229, 0.04);
+    color: #4f46e5;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(79, 70, 229, 0.16);
+    color: #4f46e5;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #71717a;
+    border-color: #71717a;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f4f4f5;
+    color: #71717a;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #71717a;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(79, 70, 229, 0.04);
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(79, 70, 229, 0.16);
+    color: #4f46e5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #71717a;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #f4f4f5;
+    color: #71717a;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #e5e7eb;
+    color: #71717a;
+  }
+  .p-splitbutton.p-button-raised {
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  }
+  .p-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.65625rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.9375rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64748b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 116, 139, 0.04);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 116, 139, 0.16);
+    border-color: transparent;
+    color: #64748b;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #3b82f6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    color: #3b82f6;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    color: #3b82f6;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #3b82f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(59, 130, 246, 0.04);
+    border-color: transparent;
+    color: #3b82f6;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(59, 130, 246, 0.16);
+    border-color: transparent;
+    color: #3b82f6;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #22c55e;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(34, 197, 94, 0.04);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(34, 197, 94, 0.16);
+    border-color: transparent;
+    color: #22c55e;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f59e0b;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    color: #f59e0b;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    color: #f59e0b;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f59e0b;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(245, 158, 11, 0.04);
+    border-color: transparent;
+    color: #f59e0b;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(245, 158, 11, 0.16);
+    border-color: transparent;
+    color: #f59e0b;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #a855f7;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(168, 85, 247, 0.04);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(168, 85, 247, 0.16);
+    border-color: transparent;
+    color: #a855f7;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ef4444;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(239, 68, 68, 0.04);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(239, 68, 68, 0.16);
+    border-color: transparent;
+    color: #ef4444;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #3f3f46;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #27272a;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 0.375rem;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .p-carousel .p-carousel-indicators {
+    padding: 1rem;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator {
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button {
+    background-color: #f4f4f5;
+    width: 2rem;
+    height: 0.5rem;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: #e5e7eb;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-datatable .p-paginator-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: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 1px 0 1px 0;
+    padding: 1.25rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 0.75rem 1.5rem;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: #6b7280;
+    background: #fafafa;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #3f3f46;
+    background: #fafafa;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #71717a;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-badge {
+    border-radius: 50%;
+    height: 1.143rem;
+    min-width: 1.143rem;
+    line-height: 1.143rem;
+    color: #312e81;
+    background: #eef2ff;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #71717a;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #fafafa;
+    color: #4f46e5;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4f46e5;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #f4f4f5;
+    color: #4f46e5;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #4f46e5;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #6366f1;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #3f3f46;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1.5rem;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:enabled:hover,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:enabled:hover,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:enabled:hover,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
+    margin-right: 0.5rem;
+  }
+  .p-datatable .p-datatable-tbody > tr > td > .p-column-title {
+    font-weight: 500;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #6366f1;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #eef2ff;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #eef2ff;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #6366f1;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #6366f1;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #4f46e5;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #fafafa;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #fafafa;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #312e81;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #312e81;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.625rem 0.625rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.75rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.5625rem 1.5625rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 0.9375rem 1.875rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.875rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 0.9375rem 1.875rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 0.9375rem 1.875rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(79, 70, 229, 0.16);
+  }
+  .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: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 1px 0 1px 0;
+    padding: 1.25rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 1px 0 1px 0;
+    padding: 1.25rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #f4f4f5;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-column-filter-row .p-column-filter-menu-button,
+  .p-column-filter-row .p-column-filter-clear-button {
+    margin-left: 0.5rem;
+  }
+  .p-column-filter-menu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-column-filter-menu-button:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-column-filter-clear-button:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.25rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #6366f1;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 0.75rem;
+    border-bottom: 0 none;
+    color: #3f3f46;
+    background: #fafafa;
+    margin: 0;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1.25rem;
+    border-bottom: 1px solid #f3f4f6;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-matchmode-dropdown {
+    margin-bottom: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint .p-column-filter-remove-button {
+    margin-top: 0.5rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint:last-child {
+    border-bottom: 0 none;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-add-rule {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1.25rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    padding: 0.25rem 0;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.75rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #e0e7ff;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #fcfcfc;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #f4f4f5;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #6f91ff;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #e5e7eb;
+    border-color: #e5e7eb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    padding: 1.25rem;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    background: inherit;
+    color: inherit;
+    border-radius: 50%;
+  }
+  .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #71717a;
+    border: solid #f4f4f5;
+    border-width: 0;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.375rem;
+  }
+  .p-paginator .p-paginator-first,
+  .p-paginator .p-paginator-prev,
+  .p-paginator .p-paginator-next,
+  .p-paginator .p-paginator-last {
+    background-color: transparent;
+    border: 1px solid #d4d4d8;
+    color: #71717a;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0 0 0 -1px;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-first:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-prev:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-next:not(.p-disabled):not(.p-highlight):hover,
+  .p-paginator .p-paginator-last:not(.p-disabled):not(.p-highlight):hover {
+    background: #f4f4f5;
+    border-color: #d4d4d8;
+    color: #3f3f46;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 3rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 3rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 1px solid #d4d4d8;
+    color: #71717a;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0 0 0 -1px;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 1px solid #d4d4d8;
+    color: #71717a;
+    min-width: 3rem;
+    height: 3rem;
+    margin: 0 0 0 -1px;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #eef2ff;
+    border-color: #eef2ff;
+    color: #312e81;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #f4f4f5;
+    border-color: #d4d4d8;
+    color: #3f3f46;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1.25rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-bottom: 0 none;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1.25rem;
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    padding: 0.25rem 0;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.75rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: #3f3f46;
+    background: transparent;
+    transition: transform 0.2s, none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #312e81;
+    background: #eef2ff;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #e0e7ff;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    padding: 1.25rem;
+    border-radius: 0.375rem;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #6366f1;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 0.375rem;
+    transition: none;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #71717a;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox {
+    margin-right: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
+    color: #3f3f46;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler,
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon {
+    color: #312e81;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler:hover,
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-treenode-icon:hover {
+    color: #312e81;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+  .p-tree .p-tree-filter-container {
+    margin-bottom: 0.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter {
+    width: 100%;
+    padding-right: 1.75rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.75rem;
+    color: #71717a;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #8ba7ff;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .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: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 1px 0 1px 0;
+    padding: 1.25rem 1.25rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    padding: 0.75rem 1.5rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 0.75rem 1.5rem;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    font-weight: 500;
+    color: #6b7280;
+    background: #fafafa;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: #3f3f46;
+    background: #fafafa;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #6366f1;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #71717a;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-badge {
+    border-radius: 50%;
+    height: 1.143rem;
+    min-width: 1.143rem;
+    line-height: 1.143rem;
+    color: #312e81;
+    background: #eef2ff;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #71717a;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #fafafa;
+    color: #4f46e5;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #4f46e5;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #3f3f46;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #f4f4f5;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1.5rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #3f3f46;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #6366f1;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #312e81;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #312e81;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #3f3f46;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #4f46e5;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #fafafa;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #312e81;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #312e81;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 1.09375rem 1.09375rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.75rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.375rem 0.75rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.5625rem 1.5625rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 0.9375rem 1.875rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.875rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 0.9375rem 1.875rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 0.9375rem 1.875rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #4f46e5;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #e5e7eb;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-opposite,
+  .p-timeline.p-timeline-vertical .p-timeline-event-content {
+    padding: 0 1rem;
+  }
+  .p-timeline.p-timeline-vertical .p-timeline-event-connector {
+    width: 2px;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-opposite,
+  .p-timeline.p-timeline-horizontal .p-timeline-event-content {
+    padding: 1rem 0;
+  }
+  .p-timeline.p-timeline-horizontal .p-timeline-event-connector {
+    height: 2px;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #3f3f46;
+    background: #fafafa;
+    font-weight: 700;
+    border-radius: 0.375rem;
+    transition: none;
+  }
+  .p-accordion .p-accordion-header .p-accordion-header-link .p-accordion-toggle-icon {
+    margin-right: 0.5rem;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #f4f4f5;
+    border-color: #e5e7eb;
+    color: #3f3f46;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #fafafa;
+    border-color: #e5e7eb;
+    color: #3f3f46;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-color: #e5e7eb;
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-accordion .p-accordion-tab {
+    margin-bottom: 0;
+  }
+  .p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link {
+    border-radius: 0;
+  }
+  .p-accordion .p-accordion-tab .p-accordion-content {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link {
+    border-top: 0 none;
+  }
+  .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link, .p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-top: 0 none;
+  }
+  .p-accordion .p-accordion-tab:first-child .p-accordion-header .p-accordion-header-link {
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #3f3f46;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+    border-radius: 0.375rem;
+  }
+  .p-card .p-card-body {
+    padding: 1.25rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #71717a;
+  }
+  .p-card .p-card-content {
+    padding: 1.25rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1.25rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    border-radius: 0.375rem;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #3f3f46;
+    background: #fafafa;
+    font-weight: 700;
+    border-radius: 0.375rem;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 1.25rem;
+    color: #3f3f46;
+    border-radius: 0.375rem;
+    transition: none;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a .p-fieldset-toggler {
+    margin-right: 0.5rem;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #f4f4f5;
+    border-color: #e5e7eb;
+    color: #18181b;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1.25rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #ffffff;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-horizontal .p-divider-content {
+    padding: 0 0.5rem;
+  }
+  .p-divider.p-divider-vertical {
+    margin: 0 1rem;
+    padding: 1rem 0;
+  }
+  .p-divider.p-divider-vertical:before {
+    border-left: 1px #e5e7eb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    background: #fafafa;
+    color: #3f3f46;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 700;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.75rem 1.25rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.75rem 1.25rem;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    border-radius: 0.375rem;
+    color: #3f3f46;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: none;
+    background: #fafafa;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #e5e7eb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #e5e7eb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: none;
+    border-radius: 0.375rem;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #71717a;
+    font-weight: 600;
+    transition: none;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #3f3f46;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #4f46e5;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    color: #3f3f46;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #e5e7eb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: none;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #3f3f46;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #4f46e5;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #fafafa;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #71717a;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+    transition: none;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #6366f1;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #71717a;
+    color: #71717a;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #4f46e5;
+    color: #4f46e5;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #4f46e5;
+    width: 3rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #6366f1;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1.25rem;
+    border: 0 none;
+    color: #3f3f46;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-toolbar {
+    background: #fafafa;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border-radius: 0.375rem;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1.25rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 0.375rem;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #3f3f46;
+    padding: 1.5rem;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #3f3f46;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #3f3f46;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    border-radius: 0.375rem;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1.25rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #4f46e5;
+    color: #ffffff;
+    width: 2rem;
+    height: 2rem;
+    transition: none;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #4338ca;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1.25rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #18181b;
+    border-color: transparent;
+    background: #f4f4f5;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1.25rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #3f3f46;
+    color: #ffffff;
+    padding: 0.75rem 0.75rem;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    border-radius: 0.375rem;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #3f3f46;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #3f3f46;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #3f3f46;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #3f3f46;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #fafafa;
+    padding: 1.25rem;
+    border: 1px solid #e5e7eb;
+    color: #3f3f46;
+    border-bottom: 0 none;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 1px solid #e5e7eb;
+    color: #3f3f46;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1.5rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: none;
+    border-radius: 0.375rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #3f3f46;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #71717a;
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    border-radius: 0.375rem;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    border-radius: 0.375rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 0.375rem;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #6366f1;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 1rem;
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-megamenu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #71717a;
+    background: #f4f4f5;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0.375rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-menu.p-menu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-menu .p-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 1rem;
+    background: #fafafa;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0.375rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    width: 12.5rem;
+  }
+  .p-menubar .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #71717a;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #71717a;
+    background: #f4f4f5;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #71717a;
+      border-radius: 50%;
+      transition: none;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #71717a;
+      background: #f4f4f5;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #6366f1;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #ffffff;
+      border: 0 none;
+      box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      width: 100%;
+    }
+    .p-menubar .p-menubar-root-list .p-menu-separator {
+      border-top: 1px solid #f3f4f6;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #3f3f46;
+      transition: none;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #3f3f46;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #3f3f46;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #71717a;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #71717a;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #3f3f46;
+      background: #f4f4f5;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #3f3f46;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #71717a;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #f4f4f5;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #18181b;
+      background: #e5e7eb;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #18181b;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #18181b;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #18181b;
+      background: #f4f4f5;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #18181b;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #71717a;
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #e5e7eb;
+    color: #3f3f46;
+    background: #fafafa;
+    border-radius: 0.375rem;
+    transition: none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #3f3f46;
+    padding: 1.25rem;
+    font-weight: 700;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #6366f1;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #f4f4f5;
+    border-color: #e5e7eb;
+    color: #3f3f46;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #fafafa;
+    border-color: #e5e7eb;
+    color: #3f3f46;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #e5e7eb;
+    background: #f4f4f5;
+    color: #3f3f46;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #e5e7eb;
+    background: #ffffff;
+    color: #3f3f46;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #f4f4f5;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #3f3f46;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #71717a;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #3f3f46;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: none;
+    border-radius: 0.375rem;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #3f3f46;
+    border: 1px solid #f4f4f5;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #71717a;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #3f3f46;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #f3f4f6;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #e5e7eb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #e5e7eb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #e5e7eb transparent;
+    background: #ffffff;
+    color: #71717a;
+    padding: 1.25rem;
+    font-weight: 700;
+    border-top-right-radius: 0.375rem;
+    border-top-left-radius: 0.375rem;
+    transition: none;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #6366f1;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #71717a;
+    color: #71717a;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #4f46e5;
+    color: #4f46e5;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.375rem;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-tieredmenu .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content {
+    color: #3f3f46;
+    transition: none;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #3f3f46;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #71717a;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #3f3f46;
+    background: #f4f4f5;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #3f3f46;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #f4f4f5;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #18181b;
+    background: #e5e7eb;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #18181b;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #18181b;
+    background: #f4f4f5;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #18181b;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #71717a;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.75rem 0.75rem;
+    margin: 0;
+    border-radius: 0.375rem;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #eff6ff;
+    border: solid #2563eb;
+    border-width: 0px;
+    color: #2563eb;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #2563eb;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #ecfdf5;
+    border: solid #059669;
+    border-width: 0px;
+    color: #059669;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #059669;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #fef3c7;
+    border: solid #d97706;
+    border-width: 0px;
+    color: #d97706;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #d97706;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #fef3c7;
+    border: solid #dc2626;
+    border-width: 0px;
+    color: #dc2626;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #dc2626;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 0.375rem;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1.25rem 1.75rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: none;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-message.p-message-info {
+    background: #eff6ff;
+    border: solid #2563eb;
+    border-width: 0 0 0 6px;
+    color: #2563eb;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #2563eb;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #2563eb;
+  }
+  .p-message.p-message-success {
+    background: #ecfdf5;
+    border: solid #059669;
+    border-width: 0 0 0 6px;
+    color: #059669;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #059669;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #059669;
+  }
+  .p-message.p-message-warn {
+    background: #fef3c7;
+    border: solid #d97706;
+    border-width: 0 0 0 6px;
+    color: #d97706;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #d97706;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #d97706;
+  }
+  .p-message.p-message-error {
+    background: #fef3c7;
+    border: solid #dc2626;
+    border-width: 0 0 0 6px;
+    color: #dc2626;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #dc2626;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #dc2626;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    border-radius: 0.375rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
+    font-weight: 700;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
+    margin: 0.5rem 0 0 0;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: none;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #eff6ff;
+    border: solid #2563eb;
+    border-width: 0 0 0 6px;
+    color: #2563eb;
+  }
+  .p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon,
+  .p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close {
+    color: #2563eb;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #ecfdf5;
+    border: solid #059669;
+    border-width: 0 0 0 6px;
+    color: #059669;
+  }
+  .p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon,
+  .p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close {
+    color: #059669;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #fef3c7;
+    border: solid #d97706;
+    border-width: 0 0 0 6px;
+    color: #d97706;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon,
+  .p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close {
+    color: #d97706;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #fef3c7;
+    border: solid #dc2626;
+    border-width: 0 0 0 6px;
+    color: #dc2626;
+  }
+  .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
+  .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
+    color: #dc2626;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #fafafa;
+    width: 4rem;
+    height: 4rem;
+    transition: none;
+    border-radius: 50%;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fafafa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #fafafa;
+    width: 4rem;
+    height: 4rem;
+    transition: none;
+    border-radius: 0.375rem;
+    margin: 0 0.5rem;
+  }
+  .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fafafa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #fafafa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #f4f4f5;
+    width: 1rem;
+    height: 1rem;
+    transition: none;
+    border-radius: 50%;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #e5e7eb;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator {
+    margin-right: 0.5rem;
+  }
+  .p-galleria.p-galleria-indicators-left .p-galleria-indicator, .p-galleria.p-galleria-indicators-right .p-galleria-indicator {
+    margin-bottom: 0.5rem;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button {
+    background: rgba(255, 255, 255, 0.4);
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #eef2ff;
+    color: #312e81;
+  }
+  .p-galleria .p-galleria-thumbnail-container {
+    background: rgba(0, 0, 0, 0.9);
+    padding: 1rem 0.25rem;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev,
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next {
+    margin: 0.5rem;
+    background-color: transparent;
+    color: #fafafa;
+    width: 2rem;
+    height: 2rem;
+    transition: none;
+    border-radius: 50%;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-prev:hover,
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-next:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #fafafa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: none;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: none;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: none;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #e5e7eb;
+    border-radius: 0.375rem;
+  }
+  .p-avatar.p-avatar-lg {
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.5rem;
+  }
+  .p-avatar.p-avatar-lg .p-avatar-icon {
+    font-size: 1.5rem;
+  }
+  .p-avatar.p-avatar-xl {
+    width: 4rem;
+    height: 4rem;
+    font-size: 2rem;
+  }
+  .p-avatar.p-avatar-xl .p-avatar-icon {
+    font-size: 2rem;
+  }
+  .p-avatar-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #e5e7eb;
+    color: #3f3f46;
+    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 {
+    border-radius: 0.375rem;
+    transition: none;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transition: none;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #fafafa;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #f4f4f5;
+    border-radius: 0.375rem;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #4f46e5;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 0.375rem;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #3b82f6;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f59e0b;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.75rem 0.75rem;
+    border-radius: 0.375rem;
+    transition: none;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #f4f4f5;
+    color: #18181b;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #e5e7eb;
+    border-radius: 0.375rem;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #4f46e5;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #4f46e5;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 0.375rem;
+    border-top-right-radius: 0.375rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #e5e7eb;
+    border-radius: 0.375rem;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #4f46e5;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #3f3f46;
+    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #4f46e5;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    min-width: 1.5rem;
+    height: 1.5rem;
+    line-height: 1.5rem;
+  }
+  .p-badge.p-badge-secondary {
+    background-color: #64748b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #3b82f6;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #f59e0b;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-lg {
+    font-size: 1.125rem;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    line-height: 2.25rem;
+  }
+  .p-badge.p-badge-xl {
+    font-size: 1.5rem;
+    min-width: 3rem;
+    height: 3rem;
+    line-height: 3rem;
+  }
+  .p-tag {
+    background: #4f46e5;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 0.375rem;
+  }
+  .p-tag.p-tag-success {
+    background-color: #22c55e;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #3b82f6;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #f59e0b;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #ef4444;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-inputtext, .p-togglebutton, .p-selectbutton, .p-inputgroup {
+    box-shadow: 0 0 rgba(0, 0, 0, 0), 0 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  }
+  .p-inputgroup .p-inputtext, .p-inputgroup .p-togglebutton, .p-inputgroup .p-selectbutton {
+    box-shadow: none;
+  }
+  .p-inputtext.p-invalid.p-component:enabled:focus {
+    box-shadow: 0 0 0 1px #f0a9a7;
+  }
+  .p-highlight {
+    font-weight: 600;
+  }
+  .p-button-label {
+    font-weight: 500;
+  }
+  .p-inputswitch.p-focus .p-inputswitch-slider {
+    box-shadow: 0 0 0 2px #6366f1;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    margin-left: -1px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    border-color: #4f46e5;
+    margin-right: 1px;
+  }
+  .p-paginator .p-paginator-current {
+    border: 0 none;
+  }
+  .p-button:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-secondary:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #64748b, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-success:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #22c55e, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-info:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-warning:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f59e0b, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-help:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #a855f7, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-button.p-button-danger:enabled:focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #ef4444, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-checkbox .p-checkbox-box {
+    border-radius: 0.25rem;
+  }
+  .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box.p-focus {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1, 0 1px 2px 0 rgba(0, 0, 0, 0);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #4f46e5;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #4f46e5;
+  }
+}
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
new file mode 100644
index 0000000000..d5e5617e8c
--- /dev/null
+++ b/public/themes/vela-blue/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1f2d40;
+  --surface-b: #17212f;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #304562;
+  --surface-e: #1f2d40;
+  --surface-f: #1f2d40;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #64b5f6;
+  --primary-color-text: #212529;
+  --surface-0: #17212f;
+  --surface-50: #2e3744;
+  --surface-100: #454d59;
+  --surface-200: #5d646d;
+  --surface-300: #747a82;
+  --surface-400: #8b9097;
+  --surface-500: #a2a6ac;
+  --surface-600: #b9bcc1;
+  --surface-700: #d1d3d5;
+  --surface-800: #e8e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e8e9ea;
+  --gray-100: #d1d3d5;
+  --gray-200: #b9bcc1;
+  --gray-300: #a2a6ac;
+  --gray-400: #8b9097;
+  --gray-500: #747a82;
+  --gray-600: #5d646d;
+  --gray-700: #454d59;
+  --gray-800: #2e3744;
+  --gray-900: #17212f;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #17212f;
+  --surface-section: #17212f;
+  --surface-card: #1f2d40;
+  --surface-overlay: #1f2d40;
+  --surface-border: #304562;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 1px #93cbf9;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(100, 181, 246, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: light dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#f7fbff;
+  --primary-100:#daedfd;
+  --primary-200:#bcdffb;
+  --primary-300:#9fd1f9;
+  --primary-400:#81c3f8;
+  --primary-500:#64b5f6;
+  --primary-600:#559ad1;
+  --primary-700:#467fac;
+  --primary-800:#376487;
+  --primary-900:#284862;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2d40;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2d40;
+  border: 1px solid #304562;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #17212f;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #64b5f6;
+}
+.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: #64b5f6;
+}
+.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: #64b5f6;
+}
+.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: #64b5f6;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2d40;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #304562;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #64b5f6;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #304562;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #304562;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #304562;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #304562;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #64b5f6;
+    background: #64b5f6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #64b5f6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #2396f2;
+    background: #2396f2;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #64b5f6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #2396f2;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #64b5f6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #2396f2;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #64b5f6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #2396f2;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #64b5f6;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #3e526d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2d40;
+    border: 1px solid #304562;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #304562;
+    border-left: 1px solid #304562;
+    border-bottom: 1px solid #304562;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #304562;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #64b5f6;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #43a5f4;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #64b5f6;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #304562;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #304562;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #64b5f6;
+    background: #64b5f6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #64b5f6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #2396f2;
+    background: #2396f2;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #64b5f6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #2396f2;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #64b5f6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #2396f2;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #64b5f6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #64b5f6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #64b5f6;
+    border-color: #64b5f6;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #43a5f4;
+    border-color: #43a5f4;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #304562;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #304562;
+    border: 2px solid #64b5f6;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-slider .p-slider-range {
+    background: #64b5f6;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #64b5f6;
+    border-color: #64b5f6;
+  }
+  .p-treeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #64b5f6;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #64b5f6;
+    border-color: #64b5f6;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #43a5f4;
+    border-color: #43a5f4;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+    border-color: #64b5f6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #212529;
+    background: #64b5f6;
+    border: 1px solid #64b5f6;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #43a5f4;
+    color: #212529;
+    border-color: #43a5f4;
+  }
+  .p-button:not(:disabled):active {
+    background: #2396f2;
+    color: #212529;
+    border-color: #2396f2;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #64b5f6;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #64b5f6;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.1rem #93cbf9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #64b5f6;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(100, 181, 246, 0.04);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(100, 181, 246, 0.16);
+    color: #64b5f6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #17212f;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #17212f;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #304562;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #64b5f6;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(100, 181, 246, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(100, 181, 246, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #64b5f6;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2d40;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #304562;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-column-filter-overlay {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #304562;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(12, 120, 207, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-paginator {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #304562;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    border-color: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(100, 181, 246, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(35, 150, 242, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #93cbf9;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(100, 181, 246, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #64b5f6;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #64b5f6;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #93cbf9;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #64b5f6;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #64b5f6;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1f2d40;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #304562;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2d40;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #304562;
+  }
+  .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 #304562;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #304562;
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #304562;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #304562;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #64b5f6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #304562;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #64b5f6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #64b5f6;
+    color: #64b5f6;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2d40;
+    color: #64b5f6;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #304562;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #64b5f6;
+    color: #212529;
+    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: #43a5f4;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-sidebar {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #304562;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #304562;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #304562;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #304562;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2d40;
+    padding: 2rem 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #93cbf9;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #93cbf9;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1f2d40;
+      border: 1px solid #304562;
+      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 #304562;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #17212f;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #304562;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #93cbf9;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #64b5f6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #64b5f6;
+    color: #64b5f6;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #304562;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(100, 181, 246, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #304562;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2d40;
+  }
+  .p-chip {
+    background-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(100, 181, 246, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(100, 181, 246, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #64b5f6;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #64b5f6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #64b5f6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #64b5f6;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #64b5f6;
+    color: #212529;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #64b5f6;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #64b5f6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #64b5f6;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #64b5f6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #64b5f6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #64b5f6;
+  }
+}
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
new file mode 100644
index 0000000000..652b4ea69e
--- /dev/null
+++ b/public/themes/vela-green/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1f2d40;
+  --surface-b: #17212f;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #304562;
+  --surface-e: #1f2d40;
+  --surface-f: #1f2d40;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #81c784;
+  --primary-color-text: #212529;
+  --surface-0: #17212f;
+  --surface-50: #2e3744;
+  --surface-100: #454d59;
+  --surface-200: #5d646d;
+  --surface-300: #747a82;
+  --surface-400: #8b9097;
+  --surface-500: #a2a6ac;
+  --surface-600: #b9bcc1;
+  --surface-700: #d1d3d5;
+  --surface-800: #e8e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e8e9ea;
+  --gray-100: #d1d3d5;
+  --gray-200: #b9bcc1;
+  --gray-300: #a2a6ac;
+  --gray-400: #8b9097;
+  --gray-500: #747a82;
+  --gray-600: #5d646d;
+  --gray-700: #454d59;
+  --gray-800: #2e3744;
+  --gray-900: #17212f;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #17212f;
+  --surface-section: #17212f;
+  --surface-card: #1f2d40;
+  --surface-overlay: #1f2d40;
+  --surface-border: #304562;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 1px #a7d8a9;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(129, 199, 132, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: light dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#f9fcf9;
+  --primary-100:#e1f2e1;
+  --primary-200:#c9e7ca;
+  --primary-300:#b1dcb3;
+  --primary-400:#99d29b;
+  --primary-500:#81c784;
+  --primary-600:#6ea970;
+  --primary-700:#5a8b5c;
+  --primary-800:#476d49;
+  --primary-900:#345035;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2d40;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2d40;
+  border: 1px solid #304562;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #17212f;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #81c784;
+}
+.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: #81c784;
+}
+.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: #81c784;
+}
+.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: #81c784;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2d40;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #304562;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #81c784;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #304562;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #304562;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #304562;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #304562;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #81c784;
+    background: #81c784;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #81c784;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #54b358;
+    background: #54b358;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #81c784;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #54b358;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #81c784;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #54b358;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #81c784;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #54b358;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #81c784;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #3e526d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2d40;
+    border: 1px solid #304562;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #304562;
+    border-left: 1px solid #304562;
+    border-bottom: 1px solid #304562;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #304562;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #81c784;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #6abd6e;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #81c784;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #304562;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #304562;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #81c784;
+    background: #81c784;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #81c784;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #54b358;
+    background: #54b358;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #81c784;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #54b358;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #81c784;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #54b358;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #81c784;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #81c784;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #81c784;
+    border-color: #81c784;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #6abd6e;
+    border-color: #6abd6e;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #304562;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #304562;
+    border: 2px solid #81c784;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-slider .p-slider-range {
+    background: #81c784;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #81c784;
+    border-color: #81c784;
+  }
+  .p-treeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #81c784;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #81c784;
+    border-color: #81c784;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #6abd6e;
+    border-color: #6abd6e;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+    border-color: #81c784;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #212529;
+    background: #81c784;
+    border: 1px solid #81c784;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #6abd6e;
+    color: #212529;
+    border-color: #6abd6e;
+  }
+  .p-button:not(:disabled):active {
+    background: #54b358;
+    color: #212529;
+    border-color: #54b358;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #81c784;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #81c784;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.1rem #a7d8a9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81c784;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 199, 132, 0.04);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 199, 132, 0.16);
+    color: #81c784;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #17212f;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #17212f;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #304562;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #81c784;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(129, 199, 132, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(129, 199, 132, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #81c784;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2d40;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #304562;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-column-filter-overlay {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #304562;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(62, 139, 65, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-paginator {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #304562;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    border-color: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(129, 199, 132, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(84, 179, 88, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #a7d8a9;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(129, 199, 132, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #81c784;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #81c784;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #a7d8a9;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #81c784;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #81c784;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1f2d40;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #304562;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2d40;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #304562;
+  }
+  .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 #304562;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #304562;
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #304562;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #304562;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #81c784;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #304562;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #81c784;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #81c784;
+    color: #81c784;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2d40;
+    color: #81c784;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #304562;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #81c784;
+    color: #212529;
+    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: #6abd6e;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-sidebar {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #304562;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #304562;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #304562;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #304562;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2d40;
+    padding: 2rem 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #a7d8a9;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #a7d8a9;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1f2d40;
+      border: 1px solid #304562;
+      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 #304562;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #17212f;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #304562;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #a7d8a9;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #81c784;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #81c784;
+    color: #81c784;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #304562;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(129, 199, 132, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #304562;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2d40;
+  }
+  .p-chip {
+    background-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(129, 199, 132, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(129, 199, 132, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #81c784;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #81c784;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #81c784;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #81c784;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #81c784;
+    color: #212529;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #81c784;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #81c784;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #81c784;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #81c784;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #81c784;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #81c784;
+  }
+}
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
new file mode 100644
index 0000000000..71220267b0
--- /dev/null
+++ b/public/themes/vela-orange/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1f2d40;
+  --surface-b: #17212f;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #304562;
+  --surface-e: #1f2d40;
+  --surface-f: #1f2d40;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #ffd54f;
+  --primary-color-text: #212529;
+  --surface-0: #17212f;
+  --surface-50: #2e3744;
+  --surface-100: #454d59;
+  --surface-200: #5d646d;
+  --surface-300: #747a82;
+  --surface-400: #8b9097;
+  --surface-500: #a2a6ac;
+  --surface-600: #b9bcc1;
+  --surface-700: #d1d3d5;
+  --surface-800: #e8e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e8e9ea;
+  --gray-100: #d1d3d5;
+  --gray-200: #b9bcc1;
+  --gray-300: #a2a6ac;
+  --gray-400: #8b9097;
+  --gray-500: #747a82;
+  --gray-600: #5d646d;
+  --gray-700: #454d59;
+  --gray-800: #2e3744;
+  --gray-900: #17212f;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #17212f;
+  --surface-section: #17212f;
+  --surface-card: #1f2d40;
+  --surface-overlay: #1f2d40;
+  --surface-border: #304562;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 1px #ffe284;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(255, 213, 79, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: light dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#fffdf6;
+  --primary-100:#fff5d5;
+  --primary-200:#ffedb3;
+  --primary-300:#ffe592;
+  --primary-400:#ffdd70;
+  --primary-500:#ffd54f;
+  --primary-600:#d9b543;
+  --primary-700:#b39537;
+  --primary-800:#8c752b;
+  --primary-900:#665520;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2d40;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2d40;
+  border: 1px solid #304562;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #17212f;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #ffd54f;
+}
+.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: #ffd54f;
+}
+.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: #ffd54f;
+}
+.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: #ffd54f;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2d40;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #304562;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #ffd54f;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #304562;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #304562;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #304562;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #304562;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #212529;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #ffd54f;
+    background: #ffd54f;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ffd54f;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #ffc50c;
+    background: #ffc50c;
+    color: #212529;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffd54f;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffc50c;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #ffd54f;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffc50c;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ffd54f;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #ffc50c;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ffd54f;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #3e526d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2d40;
+    border: 1px solid #304562;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #304562;
+    border-left: 1px solid #304562;
+    border-bottom: 1px solid #304562;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #304562;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #ffd54f;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #ffcd2e;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ffd54f;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #304562;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #304562;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #212529;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #ffd54f;
+    background: #ffd54f;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ffd54f;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #ffc50c;
+    background: #ffc50c;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #212529;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ffd54f;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffc50c;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ffd54f;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #ffc50c;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ffd54f;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #ffd54f;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ffd54f;
+    border-color: #ffd54f;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #ffcd2e;
+    border-color: #ffcd2e;
+    color: #212529;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #212529;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #304562;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #304562;
+    border: 2px solid #ffd54f;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-slider .p-slider-range {
+    background: #ffd54f;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ffd54f;
+    border-color: #ffd54f;
+  }
+  .p-treeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ffd54f;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ffd54f;
+    border-color: #ffd54f;
+    color: #212529;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #ffcd2e;
+    border-color: #ffcd2e;
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #212529;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+    border-color: #ffd54f;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #212529;
+    background: #ffd54f;
+    border: 1px solid #ffd54f;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #ffcd2e;
+    color: #212529;
+    border-color: #ffcd2e;
+  }
+  .p-button:not(:disabled):active {
+    background: #ffc50c;
+    color: #212529;
+    border-color: #ffc50c;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #ffd54f;
+    background-color: #212529;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #ffd54f;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.1rem #ffe284;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffd54f;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 213, 79, 0.04);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 213, 79, 0.16);
+    color: #ffd54f;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #17212f;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #17212f;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #304562;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ffd54f;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(255, 213, 79, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(255, 213, 79, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #ffd54f;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2d40;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #304562;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-column-filter-overlay {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #304562;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(207, 157, 0, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-paginator {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #304562;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    border-color: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(255, 213, 79, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(255, 197, 12, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #ffe284;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 213, 79, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #ffd54f;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ffd54f;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #ffe284;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #ffd54f;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #ffd54f;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1f2d40;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #304562;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2d40;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #304562;
+  }
+  .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 #304562;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #304562;
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #304562;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #304562;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ffd54f;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #304562;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #ffd54f;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #ffd54f;
+    color: #ffd54f;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2d40;
+    color: #ffd54f;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #304562;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #ffd54f;
+    color: #212529;
+    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: #ffcd2e;
+    color: #212529;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-sidebar {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #304562;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #304562;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #304562;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #304562;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2d40;
+    padding: 2rem 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #ffe284;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #ffe284;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1f2d40;
+      border: 1px solid #304562;
+      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 #304562;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #17212f;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #304562;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #ffe284;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #ffd54f;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #ffd54f;
+    color: #ffd54f;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #304562;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(255, 213, 79, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #304562;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2d40;
+  }
+  .p-chip {
+    background-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(255, 213, 79, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(255, 213, 79, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #ffd54f;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ffd54f;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ffd54f;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #ffd54f;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #212529;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #ffd54f;
+    color: #212529;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #ffd54f;
+    color: #212529;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #ffd54f;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #ffd54f;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #ffd54f;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ffd54f;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ffd54f;
+  }
+}
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
new file mode 100644
index 0000000000..f14dd59251
--- /dev/null
+++ b/public/themes/vela-purple/theme.css
@@ -0,0 +1,6998 @@
+:root {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  	Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+  	"Segoe UI Symbol";
+  --surface-a: #1f2d40;
+  --surface-b: #17212f;
+  --surface-c: rgba(255, 255, 255, 0.03);
+  --surface-d: #304562;
+  --surface-e: #1f2d40;
+  --surface-f: #1f2d40;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #ba68c8;
+  --primary-color-text: #ffffff;
+  --surface-0: #17212f;
+  --surface-50: #2e3744;
+  --surface-100: #454d59;
+  --surface-200: #5d646d;
+  --surface-300: #747a82;
+  --surface-400: #8b9097;
+  --surface-500: #a2a6ac;
+  --surface-600: #b9bcc1;
+  --surface-700: #d1d3d5;
+  --surface-800: #e8e9ea;
+  --surface-900: #ffffff;
+  --gray-50: #e8e9ea;
+  --gray-100: #d1d3d5;
+  --gray-200: #b9bcc1;
+  --gray-300: #a2a6ac;
+  --gray-400: #8b9097;
+  --gray-500: #747a82;
+  --gray-600: #5d646d;
+  --gray-700: #454d59;
+  --gray-800: #2e3744;
+  --gray-900: #17212f;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 3px;
+  --surface-ground: #17212f;
+  --surface-section: #17212f;
+  --surface-card: #1f2d40;
+  --surface-overlay: #1f2d40;
+  --surface-border: #304562;
+  --surface-hover: rgba(255, 255, 255, 0.03);
+  --focus-ring: 0 0 0 1px #cf95d9;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(186, 104, 200, 0.16);
+  --highlight-text-color: rgba(255, 255, 255, 0.87);
+  color-scheme: light dark;
+}
+
+: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:#f6fbf6;
+  --green-100:#d4ecd5;
+  --green-200:#b2ddb4;
+  --green-300:#90cd93;
+  --green-400:#6ebe71;
+  --green-500:#4caf50;
+  --green-600:#419544;
+  --green-700:#357b38;
+  --green-800:#2a602c;
+  --green-900:#1e4620;
+  --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:#f5f6fb;
+  --indigo-100:#d1d5ed;
+  --indigo-200:#acb4df;
+  --indigo-300:#8893d1;
+  --indigo-400:#6372c3;
+  --indigo-500:#3f51b5;
+  --indigo-600:#36459a;
+  --indigo-700:#2c397f;
+  --indigo-800:#232d64;
+  --indigo-900:#192048;
+  --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:#fff8f2;
+  --orange-100:#fde0c2;
+  --orange-200:#fbc791;
+  --orange-300:#f9ae61;
+  --orange-400:#f79530;
+  --orange-500:#f57c00;
+  --orange-600:#d06900;
+  --orange-700:#ac5700;
+  --orange-800:#874400;
+  --orange-900:#623200;
+  --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:#fff5f5;
+  --red-100:#ffd1ce;
+  --red-200:#ffada7;
+  --red-300:#ff8980;
+  --red-400:#ff6459;
+  --red-500:#ff4032;
+  --red-600:#d9362b;
+  --red-700:#b32d23;
+  --red-800:#8c231c;
+  --red-900:#661a14;
+  --primary-50:#fcf7fc;
+  --primary-100:#eedbf2;
+  --primary-200:#e1bee7;
+  --primary-300:#d4a1dd;
+  --primary-400:#c785d2;
+  --primary-500:#ba68c8;
+  --primary-600:#9e58aa;
+  --primary-700:#82498c;
+  --primary-800:#66396e;
+  --primary-900:#4a2a50;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #1f2d40;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #1f2d40;
+  border: 1px solid #304562;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+  padding: 0.5rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #304562;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #17212f;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #ba68c8;
+}
+.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: #ba68c8;
+}
+.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: #ba68c8;
+}
+.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: #ba68c8;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.2s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #ef9a9a;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 3px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.5rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 2.857rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.5rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .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: #ef9a9a;
+  }
+  .p-autocomplete-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #1f2d40;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #304562;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #ba68c8;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.2s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #304562;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #304562;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .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: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #304562;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-cascadeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #304562;
+    border-radius: 3px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.2s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #ba68c8;
+    background: #ba68c8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #ba68c8;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #a241b2;
+    background: #a241b2;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #ef9a9a;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ba68c8;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a241b2;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #ba68c8;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a241b2;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #ba68c8;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #304562;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #a241b2;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #ba68c8;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.5rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #3e526d;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #1f2d40;
+    border: 1px solid #304562;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .p-dropdown.p-dropdown-clearable .p-dropdown-label {
+    padding-right: 1.5rem;
+  }
+  .p-dropdown .p-dropdown-label {
+    background: transparent;
+    border: 0 none;
+  }
+  .p-dropdown .p-dropdown-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-dropdown-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.5rem;
+    margin-right: -1.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #304562;
+    border-left: 1px solid #304562;
+    border-bottom: 1px solid #304562;
+    padding: 0.5rem 0.5rem;
+    min-width: 2.357rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 1px solid #304562;
+  }
+  .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: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 30px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 30px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 50%;
+    transition-duration: 0.2s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #ba68c8;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #b052c0;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+    padding: 0.5rem 0.5rem;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    appearance: none;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #ba68c8;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #304562;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-float-label > label {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.2s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #ef9a9a;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #304562;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.4375rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.625rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter {
+    padding-right: 1.5rem;
+  }
+  .p-listbox .p-listbox-header .p-listbox-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-listbox.p-invalid {
+    border-color: #ef9a9a;
+  }
+  .p-mention-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-multiselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-inputtext {
+    padding-right: 1.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #ef9a9a;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #304562;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #f48fb1;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe082;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #c5e1a5;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #304562;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #304562;
+    background: #17212f;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.2s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #ba68c8;
+    background: #ba68c8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #ba68c8;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #a241b2;
+    background: #a241b2;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #ef9a9a;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #ba68c8;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a241b2;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #ba68c8;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #304562;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #a241b2;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #ba68c8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #ba68c8;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f48fb1;
+  }
+  .p-selectbutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ba68c8;
+    border-color: #ba68c8;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #b052c0;
+    border-color: #b052c0;
+    color: #ffffff;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-slider {
+    background: #304562;
+    border: 0 none;
+    border-radius: 3px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #304562;
+    border: 2px solid #ba68c8;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-slider .p-slider-range {
+    background: #ba68c8;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #ba68c8;
+    border-color: #ba68c8;
+  }
+  .p-treeselect {
+    background: #17212f;
+    border: 1px solid #304562;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #ba68c8;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.5rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.357rem;
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.357rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #ef9a9a;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.5rem;
+  }
+  .p-treeselect-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #304562;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #304562;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-togglebutton .p-button {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ba68c8;
+    border-color: #ba68c8;
+    color: #ffffff;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #b052c0;
+    border-color: #b052c0;
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #ffffff;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+    border-color: #ba68c8;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #ef9a9a;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #ba68c8;
+    border: 1px solid #ba68c8;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #b052c0;
+    color: #ffffff;
+    border-color: #b052c0;
+  }
+  .p-button:not(:disabled):active {
+    background: #a241b2;
+    color: #ffffff;
+    border-color: #a241b2;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.2s;
+  }
+  .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: #ba68c8;
+    background-color: #ffffff;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.357rem;
+    padding: 0.5rem 0;
+  }
+  .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.357rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.357rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #78909c;
+    border: 1px solid #78909c;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #69838f;
+    color: #ffffff;
+    border-color: #69838f;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a1b1ba;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #5d747f;
+    color: #ffffff;
+    border-color: #5d747f;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #121212;
+    background: #81d4fa;
+    border: 1px solid #81d4fa;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #5dc8f9;
+    color: #121212;
+    border-color: #5dc8f9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #a7e1fc;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #38bbf7;
+    color: #121212;
+    border-color: #38bbf7;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #121212;
+    background: #c5e1a5;
+    border: 1px solid #c5e1a5;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #b2d788;
+    color: #121212;
+    border-color: #b2d788;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #d6eac0;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #9fce6b;
+    color: #121212;
+    border-color: #9fce6b;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #121212;
+    background: #ffe082;
+    border: 1px solid #ffe082;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd65c;
+    color: #121212;
+    border-color: #ffd65c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ffe9a8;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcd35;
+    color: #121212;
+    border-color: #ffcd35;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #121212;
+    background: #ce93d8;
+    border: 1px solid #ce93d8;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #c278ce;
+    color: #121212;
+    border-color: #c278ce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ddb3e4;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #b65ec5;
+    color: #121212;
+    border-color: #b65ec5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #121212;
+    background: #f48fb1;
+    border: 1px solid #f48fb1;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #f16c98;
+    color: #121212;
+    border-color: #f16c98;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f7b1c8;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #ed4980;
+    color: #121212;
+    border-color: #ed4980;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-button.p-button-link {
+    color: #ba68c8;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.1rem #cf95d9;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 3px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ba68c8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(186, 104, 200, 0.04);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(186, 104, 200, 0.16);
+    color: #ba68c8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #78909c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(120, 144, 156, 0.04);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(120, 144, 156, 0.16);
+    border-color: transparent;
+    color: #78909c;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #81d4fa;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 212, 250, 0.04);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 212, 250, 0.16);
+    border-color: transparent;
+    color: #81d4fa;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #c5e1a5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(197, 225, 165, 0.04);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(197, 225, 165, 0.16);
+    border-color: transparent;
+    color: #c5e1a5;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe082;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 130, 0.04);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 130, 0.16);
+    border-color: transparent;
+    color: #ffe082;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ce93d8;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 147, 216, 0.04);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 147, 216, 0.16);
+    border-color: transparent;
+    color: #ce93d8;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border: 1px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #f48fb1;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(244, 143, 177, 0.04);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(244, 143, 177, 0.16);
+    border-color: transparent;
+    color: #f48fb1;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: rgba(255, 255, 255, 0.87);
+    color: #17212f;
+  }
+  .p-speeddial-action:hover {
+    background: rgba(255, 255, 255, 0.6);
+    color: #17212f;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #304562;
+    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: rgba(255, 255, 255, 0.03);
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #ba68c8;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(186, 104, 200, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(186, 104, 200, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #ba68c8;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #1f2d40;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 1px 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 1px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #304562;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .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(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-column-filter-overlay {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    margin: 0;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #304562;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(117, 47, 129, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 1px solid #304562;
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-paginator {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #304562;
+    border-width: 1px;
+    padding: 0.5rem 1rem;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .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(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.286em;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.286em;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.286em;
+    height: 2.286em;
+    margin: 0.143rem;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    border-color: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.5rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.2s, box-shadow 0.2s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(186, 104, 200, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 3px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+    padding: 0;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .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: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 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.5rem;
+  }
+  .p-tree .p-tree-filter-container .p-tree-filter-icon {
+    right: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(162, 65, 178, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 1px 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: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #cf95d9;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: rgba(255, 255, 255, 0.87);
+    background: rgba(186, 104, 200, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #1f2d40;
+    color: #ba68c8;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #ba68c8;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 1px solid #304562;
+    border-width: 0 0 1px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #cf95d9;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #ba68c8;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #1f2d40;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #253144;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #ba68c8;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #1f2d40;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #304562;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 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: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .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: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-card {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 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: 3px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-radius: 3px;
+  }
+  .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: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #1f2d40;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #304562;
+  }
+  .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 #304562;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 1px solid #304562;
+    padding: 1rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 1px solid #304562;
+    background: #1f2d40;
+    border-radius: 3px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #304562;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #304562;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #ba68c8;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #304562;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.2s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #ba68c8;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #304562;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #ba68c8;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #1f2d40;
+    border-color: #ba68c8;
+    color: #ba68c8;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #1f2d40;
+    color: #ba68c8;
+    width: 2.357rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-toolbar {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    padding: 1rem;
+    border-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 1px solid #304562;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #ba68c8;
+    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: #b052c0;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(31, 45, 64, 0);
+    border-bottom-color: #1f2d40;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(48, 69, 98, 0);
+    border-bottom-color: #2e425d;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #1f2d40;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #304562;
+  }
+  .p-sidebar {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 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-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #304562;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #304562;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #304562;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #304562;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #1f2d40;
+    padding: 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #1f2d40;
+    padding: 2rem 1rem;
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    border-radius: 3px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 3px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 3px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #cf95d9;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.25rem 0;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.25rem 0;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #cf95d9;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.25rem 0;
+      background: #1f2d40;
+      border: 1px solid #304562;
+      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 #304562;
+      margin: 0.25rem 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.2s;
+      border-radius: 0;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #17212f;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.09);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(255, 255, 255, 0.03);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 1px solid #304562;
+    color: rgba(255, 255, 255, 0.87);
+    background: #1f2d40;
+    border-radius: 3px;
+    transition: box-shadow 0.2s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #1f2d40;
+    border-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #304562;
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.25rem 0;
+    border: 1px solid #304562;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-slidemenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #17212f;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.2s;
+    border-radius: 3px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #304562;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #304562;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #304562;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #304562 transparent;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    transition: box-shadow 0.2s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #cf95d9;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #ba68c8;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #1f2d40;
+    border-color: #ba68c8;
+    color: #ba68c8;
+  }
+  .p-tieredmenu {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    border-radius: 3px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.2s;
+    border-radius: 0;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #17212f;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.09);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.5rem;
+    margin: 0;
+    border-radius: 3px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 1px;
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #044868;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 1px;
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #224a23;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 1px;
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #6d5100;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 1px;
+    color: #73000c;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #73000c;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 3px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .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.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-message.p-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #044868;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #044868;
+  }
+  .p-message.p-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #224a23;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #224a23;
+  }
+  .p-message.p-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #6d5100;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #6d5100;
+  }
+  .p-message.p-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #73000c;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #73000c;
+  }
+  .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-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 3px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 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.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #b3e5fc;
+    border: solid #0891cf;
+    border-width: 0 0 0 6px;
+    color: #044868;
+  }
+  .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: #044868;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #c8e6c9;
+    border: solid #439446;
+    border-width: 0 0 0 6px;
+    color: #224a23;
+  }
+  .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: #224a23;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecb3;
+    border: solid #d9a300;
+    border-width: 0 0 0 6px;
+    color: #6d5100;
+  }
+  .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: #6d5100;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #ffcdd2;
+    border: solid #e60017;
+    border-width: 0 0 0 6px;
+    color: #73000c;
+  }
+  .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: #73000c;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    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 .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    border-radius: 3px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #304562;
+    width: 1rem;
+    height: 1rem;
+    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: rgba(255, 255, 255, 0.1);
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(186, 104, 200, 0.16);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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: #f8f9fa;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.2s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #304562;
+    border-radius: 3px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #1f2d40;
+  }
+  .p-chip {
+    background-color: #304562;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.5rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(186, 104, 200, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(186, 104, 200, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 3px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #ba68c8;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.5rem;
+    border-radius: 3px;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #ba68c8;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #ba68c8;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #304562;
+    border-radius: 3px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #ba68c8;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #1f2d40;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #304562;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #ba68c8;
+    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: #78909c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-badge.p-badge-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+  .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-tag {
+    background: #ba68c8;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 3px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #c5e1a5;
+    color: #121212;
+  }
+  .p-tag.p-tag-info {
+    background-color: #81d4fa;
+    color: #121212;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe082;
+    color: #121212;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #f48fb1;
+    color: #121212;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #ba68c8;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #ba68c8;
+  }
+  .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #ba68c8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ba68c8;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ba68c8;
+  }
+}
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff
new file mode 100644
index 0000000000..263ae18e74
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff differ
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2
new file mode 100644
index 0000000000..5145c1e4b2
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-300.woff2 differ
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff
new file mode 100644
index 0000000000..b33382edf7
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff differ
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2
new file mode 100644
index 0000000000..1f4ac79c5c
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-600.woff2 differ
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..2647313cdb
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff differ
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..4340e2632b
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..77049f3cec
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff differ
diff --git a/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2 b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..5643f910f2
Binary files /dev/null and b/public/themes/viva-dark/fonts/poppins-v15-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
new file mode 100644
index 0000000000..eb7c616ba1
--- /dev/null
+++ b/public/themes/viva-dark/theme.css
@@ -0,0 +1,7161 @@
+:root {
+  font-family: Poppins, sans-serif;
+  --font-family: Poppins, sans-serif;
+  --surface-a: #161d21;
+  --surface-b: #0e1315;
+  --surface-c: rgba(158, 173, 230, 0.08);
+  --surface-d: #263238;
+  --surface-e: #161d21;
+  --surface-f: #161d21;
+  --text-color: rgba(255, 255, 255, 0.87);
+  --text-color-secondary: rgba(255, 255, 255, 0.6);
+  --primary-color: #9eade6;
+  --primary-color-text: #121212;
+  --surface-0: #0e1315;
+  --surface-50: #262b2c;
+  --surface-100: #3e4244;
+  --surface-200: #565a5b;
+  --surface-300: #6e7173;
+  --surface-400: #87898a;
+  --surface-500: #9fa1a1;
+  --surface-600: #b7b8b9;
+  --surface-700: #cfd0d0;
+  --surface-800: #e7e7e8;
+  --surface-900: #ffffff;
+  --gray-50: #e7e7e8;
+  --gray-100: #cfd0d0;
+  --gray-200: #b7b8b9;
+  --gray-300: #9fa1a1;
+  --gray-400: #87898a;
+  --gray-500: #6e7173;
+  --gray-600: #565a5b;
+  --gray-700: #3e4244;
+  --gray-800: #262b2c;
+  --gray-900: #0e1315;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #0e1315;
+  --surface-section: #0e1315;
+  --surface-card: #161d21;
+  --surface-overlay: #161d21;
+  --surface-border: #263238;
+  --surface-hover: rgba($primaryColor, 0.08);
+  --focus-ring: 0 0 0 1px #9eade6;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: rgba(158, 173, 230, 0.16);
+  --highlight-text-color: #9eade6;
+  color-scheme: dark;
+}
+
+/* poppins-300 - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 300;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-regular - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-600 - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 600;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-700 - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+:root {
+  --blue-50:#f6fbfd;
+  --blue-100:#d6eaf5;
+  --blue-200:#b5d9ed;
+  --blue-300:#95c8e4;
+  --blue-400:#74b7dc;
+  --blue-500:#54a6d4;
+  --blue-600:#478db4;
+  --blue-700:#3b7494;
+  --blue-800:#2e5b75;
+  --blue-900:#224255;
+  --green-50:#f9fbf4;
+  --green-100:#e3eccc;
+  --green-200:#cddca4;
+  --green-300:#b7cd7c;
+  --green-400:#a1bd54;
+  --green-500:#8bae2c;
+  --green-600:#769425;
+  --green-700:#617a1f;
+  --green-800:#4c6018;
+  --green-900:#384612;
+  --yellow-50:#fffdf4;
+  --yellow-100:#fff4cc;
+  --yellow-200:#ffeba3;
+  --yellow-300:#ffe27b;
+  --yellow-400:#ffd952;
+  --yellow-500:#ffd02a;
+  --yellow-600:#d9b124;
+  --yellow-700:#b3921d;
+  --yellow-800:#8c7217;
+  --yellow-900:#665311;
+  --cyan-50:#f5fafc;
+  --cyan-100:#cfe9f3;
+  --cyan-200:#a8d8e9;
+  --cyan-300:#82c7df;
+  --cyan-400:#5bb5d6;
+  --cyan-500:#35a4cc;
+  --cyan-600:#2d8bad;
+  --cyan-700:#25738f;
+  --cyan-800:#1d5a70;
+  --cyan-900:#154252;
+  --pink-50:#fdf6f8;
+  --pink-100:#f5d6dd;
+  --pink-200:#edb5c2;
+  --pink-300:#e495a8;
+  --pink-400:#dc748d;
+  --pink-500:#d45472;
+  --pink-600:#b44761;
+  --pink-700:#943b50;
+  --pink-800:#752e3f;
+  --pink-900:#55222e;
+  --indigo-50:#f6f8fd;
+  --indigo-100:#d6ddf5;
+  --indigo-200:#b5c2ed;
+  --indigo-300:#95a8e4;
+  --indigo-400:#748ddc;
+  --indigo-500:#5472d4;
+  --indigo-600:#4761b4;
+  --indigo-700:#3b5094;
+  --indigo-800:#2e3f75;
+  --indigo-900:#222e55;
+  --teal-50:#f5fcfa;
+  --teal-100:#d1f0e8;
+  --teal-200:#ace3d6;
+  --teal-300:#88d7c4;
+  --teal-400:#63cbb2;
+  --teal-500:#3fbfa0;
+  --teal-600:#36a288;
+  --teal-700:#2c8670;
+  --teal-800:#236958;
+  --teal-900:#194c40;
+  --orange-50:#fffaf4;
+  --orange-100:#ffe5cc;
+  --orange-200:#ffd0a3;
+  --orange-300:#ffbb7b;
+  --orange-400:#ffa752;
+  --orange-500:#ff922a;
+  --orange-600:#d97c24;
+  --orange-700:#b3661d;
+  --orange-800:#8c5017;
+  --orange-900:#663a11;
+  --bluegray-50:#f9fafb;
+  --bluegray-100:#e1e5ea;
+  --bluegray-200:#c9d0d9;
+  --bluegray-300:#b1bbc8;
+  --bluegray-400:#99a6b7;
+  --bluegray-500:#8191a6;
+  --bluegray-600:#6e7b8d;
+  --bluegray-700:#5a6674;
+  --bluegray-800:#47505b;
+  --bluegray-900:#343a42;
+  --purple-50:#f8f6fd;
+  --purple-100:#ded6f5;
+  --purple-200:#c4b5ed;
+  --purple-300:#aa95e4;
+  --purple-400:#9074dc;
+  --purple-500:#7654d4;
+  --purple-600:#6447b4;
+  --purple-700:#533b94;
+  --purple-800:#412e75;
+  --purple-900:#2f2255;
+  --red-50:#fff7f6;
+  --red-100:#ffd8d2;
+  --red-200:#ffb9af;
+  --red-300:#ff9b8b;
+  --red-400:#ff7c68;
+  --red-500:#ff5d44;
+  --red-600:#d94f3a;
+  --red-700:#b34130;
+  --red-800:#8c3325;
+  --red-900:#66251b;
+  --primary-50:#fafbfe;
+  --primary-100:#e8ebf9;
+  --primary-200:#d5dcf4;
+  --primary-300:#c3ccf0;
+  --primary-400:#b0bdeb;
+  --primary-500:#9eade6;
+  --primary-600:#8693c4;
+  --primary-700:#6f79a1;
+  --primary-800:#575f7f;
+  --primary-900:#3f455c;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #161d21;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 2px solid #263238;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #161d21;
+  border: 1px solid #263238;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.5rem 0.5rem;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(158, 173, 230, 0.08);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 2px solid #263238;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #0e1315;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 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: #9eade6;
+}
+.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: #9eade6;
+}
+.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: #9eade6;
+}
+.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: #9eade6;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.3s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.4;
+  }
+  .p-error {
+    color: #f78c79;
+  }
+  .p-text-secondary {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.607rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #2d3e44;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+    border-radius: 6px;
+  }
+  .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: #f78c79;
+  }
+  .p-autocomplete-panel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #263238;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f78c79;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    background: #161d21;
+    border: 1px solid #263238;
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #161d21;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #263238;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #9eade6;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.3s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: transparent;
+    color: #9eade6;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #263238;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #263238;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .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: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #263238;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #0e1315;
+    border: 2px solid #263238;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #2d3e44;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #263238;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #263238;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #263238;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f78c79;
+  }
+  .p-cascadeselect-panel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #263238;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0 0 4px 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #263238;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #263238;
+    background: #0e1315;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.3s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #263238;
+    background: #0e1315;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.3s;
+    color: #121212;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #9eade6;
+    background: #9eade6;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #2d3e44;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #7f93de;
+    background: #7f93de;
+    color: #121212;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f78c79;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #263238;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9eade6;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #263238;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #7f93de;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #263238;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #9eade6;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #263238;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #7f93de;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #263238;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #9eade6;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #263238;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #7f93de;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #2d3e44;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #263238;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #2d3e44;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f78c79;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #161d21;
+    border: 1px solid #263238;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: rgba(255, 255, 255, 0.87);
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #0e1315;
+    border: 2px solid #263238;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #2d3e44;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #263238;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #263238;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #263238;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.857rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f78c79;
+  }
+  .p-dropdown-panel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #263238;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    border-top: 2px solid #263238;
+    border-left: 2px solid #263238;
+    border-bottom: 2px solid #263238;
+    padding: 0.5rem 0.75rem;
+    min-width: 2.857rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 2px solid #263238;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.857rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f78c79;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 6px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #263238;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.6);
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 6px;
+    transition-duration: 0.3s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #9eade6;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: rgba(255, 255, 255, 0.87);
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #8fa0e2;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f78c79;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #0e1315;
+    padding: 0.5rem 0.75rem;
+    border: 2px solid #263238;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #2d3e44;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f78c79;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #263238;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #263238;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #263238;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-float-label > label {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    transition-duration: 0.3s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f78c79;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  ::-moz-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  :-ms-input-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #263238;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #263238;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #263238;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0.5rem;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f78c79;
+  }
+  .p-mention-panel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #263238;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #0e1315;
+    border: 2px solid #263238;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #2d3e44;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #263238;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #263238;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #263238;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #263238;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f78c79;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #263238;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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(255, 255, 255, 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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f78c79;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #263238;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #e693a9;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ffe08a;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #cede9c;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #263238;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #263238;
+    background: #0e1315;
+    width: 20px;
+    height: 20px;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.3s;
+    background-color: #121212;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #9eade6;
+    background: #9eade6;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #2d3e44;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #7f93de;
+    background: #7f93de;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #121212;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f78c79;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #263238;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #9eade6;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #263238;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #7f93de;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #263238;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #9eade6;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #263238;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #7f93de;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #df7e6c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #9eade6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #9eade6;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f88c79;
+  }
+  .p-selectbutton .p-button {
+    background: #161d21;
+    border: 2px solid #263238;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    border-color: #263238;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    border-color: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #9eade6;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: rgba(158, 173, 230, 0.24);
+    border-color: rgba(158, 173, 230, 0.24);
+    color: #9eade6;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #9eade6;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f78c79;
+  }
+  .p-slider {
+    background: #263238;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #263238;
+    border: 2px solid #9eade6;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-slider .p-slider-range {
+    background: #9eade6;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #9eade6;
+    border-color: #9eade6;
+  }
+  .p-treeselect {
+    background: #0e1315;
+    border: 2px solid #263238;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #2d3e44;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #263238;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #263238;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #263238;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #263238;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: rgba(255, 255, 255, 0.6);
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: rgba(255, 255, 255, 0.6);
+    right: 2.857rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f78c79;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #263238;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #263238;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #263238;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #263238;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #263238;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #161d21;
+    border: 2px solid #263238;
+    color: rgba(255, 255, 255, 0.87);
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: rgba(158, 173, 230, 0.16);
+    border-color: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #9eade6;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: rgba(158, 173, 230, 0.08);
+    border-color: #263238;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: rgba(158, 173, 230, 0.24);
+    border-color: rgba(158, 173, 230, 0.24);
+    color: #9eade6;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #9eade6;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: #9eade6;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f78c79;
+  }
+  .p-button {
+    color: #121212;
+    background: #9eade6;
+    border: 2px solid #9eade6;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #8fa0e2;
+    color: #121212;
+    border-color: #8fa0e2;
+  }
+  .p-button:not(:disabled):active {
+    background: #7f93de;
+    color: #121212;
+    border-color: #7f93de;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #9eade6;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.04);
+    color: #9eade6;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #9eade6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.04);
+    color: #9eade6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.3s;
+  }
+  .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: #9eade6;
+    background-color: #121212;
+  }
+  .p-button.p-button-raised {
+    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-button.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-button.p-button-icon-only {
+    width: 2.857rem;
+    padding: 0.5rem 0;
+  }
+  .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.857rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.857rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #0e1315;
+    background: #b4bfcd;
+    border: 1px solid #b4bfcd;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #9dabbe;
+    color: #0e1315;
+    border-color: #9dabbe;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 1px #e1e5eb;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #8698ae;
+    color: #0e1315;
+    border-color: #8698ae;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #b4bfcd;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(180, 191, 205, 0.04);
+    color: #b4bfcd;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(180, 191, 205, 0.16);
+    color: #b4bfcd;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #b4bfcd;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(180, 191, 205, 0.04);
+    border-color: transparent;
+    color: #b4bfcd;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(180, 191, 205, 0.16);
+    border-color: transparent;
+    color: #b4bfcd;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #35a4cc;
+    border: 1px solid #35a4cc;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #2f94b9;
+    color: #ffffff;
+    border-color: #2f94b9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #aedbeb;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #2984a4;
+    color: #ffffff;
+    border-color: #2984a4;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #35a4cc;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #0e1315;
+    background: #cede9c;
+    border: 1px solid #cede9c;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #c0d580;
+    color: #0e1315;
+    border-color: #c0d580;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #ebf2d7;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #b2cb63;
+    color: #0e1315;
+    border-color: #b2cb63;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #cede9c;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(206, 222, 156, 0.04);
+    color: #cede9c;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(206, 222, 156, 0.16);
+    color: #cede9c;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #cede9c;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(206, 222, 156, 0.04);
+    border-color: transparent;
+    color: #cede9c;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(206, 222, 156, 0.16);
+    border-color: transparent;
+    color: #cede9c;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #0e1315;
+    background: #ffe08a;
+    border: 1px solid #ffe08a;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ffd663;
+    color: #0e1315;
+    border-color: #ffd663;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #fff3d0;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ffcb3b;
+    color: #0e1315;
+    border-color: #ffcb3b;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ffe08a;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 224, 138, 0.04);
+    color: #ffe08a;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 224, 138, 0.16);
+    color: #ffe08a;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ffe08a;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 224, 138, 0.04);
+    border-color: transparent;
+    color: #ffe08a;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 224, 138, 0.16);
+    border-color: transparent;
+    color: #ffe08a;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #0e1315;
+    background: #b09ce5;
+    border: 1px solid #b09ce5;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #987edd;
+    color: #0e1315;
+    border-color: #987edd;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #dfd7f5;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #7f5fd5;
+    color: #0e1315;
+    border-color: #7f5fd5;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #b09ce5;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(176, 156, 229, 0.04);
+    color: #b09ce5;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(176, 156, 229, 0.16);
+    color: #b09ce5;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #b09ce5;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(176, 156, 229, 0.04);
+    border-color: transparent;
+    color: #b09ce5;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(176, 156, 229, 0.16);
+    border-color: transparent;
+    color: #b09ce5;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #0e1315;
+    background: #e693a9;
+    border: 1px solid #e693a9;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #df7491;
+    color: #0e1315;
+    border-color: #df7491;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 1px #f5d4dd;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #d85678;
+    color: #0e1315;
+    border-color: #d85678;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #e693a9;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(230, 147, 169, 0.04);
+    color: #e693a9;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(230, 147, 169, 0.16);
+    color: #e693a9;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #e693a9;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(230, 147, 169, 0.04);
+    border-color: transparent;
+    color: #e693a9;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(230, 147, 169, 0.16);
+    border-color: transparent;
+    color: #e693a9;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #0e1315;
+    background: #ffffff;
+    border: 1px solid #ffffff;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #cfd0d0;
+    color: #0e1315;
+    border-color: #cfd0d0;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #b7b8b9;
+    color: #0e1315;
+    border-color: #b7b8b9;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #ffffff;
+    border: 2px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: #ffffff;
+    border: 2px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: #ffffff;
+    border: 2px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #ffffff;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    border-color: transparent;
+    color: #ffffff;
+  }
+  .p-button.p-button-link {
+    color: #7f93de;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #7f93de;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 1px #9eade6;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #7f93de;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #9eade6;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.04);
+    color: #9eade6;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+    border-color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #9eade6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.04);
+    color: #9eade6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: rgba(255, 255, 255, 0.16);
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-splitbutton.p-button-raised {
+    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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b4bfcd;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(180, 191, 205, 0.04);
+    color: #b4bfcd;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(180, 191, 205, 0.16);
+    color: #b4bfcd;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b4bfcd;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(180, 191, 205, 0.04);
+    border-color: transparent;
+    color: #b4bfcd;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(180, 191, 205, 0.16);
+    border-color: transparent;
+    color: #b4bfcd;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #35a4cc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #cede9c;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(206, 222, 156, 0.04);
+    color: #cede9c;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(206, 222, 156, 0.16);
+    color: #cede9c;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #cede9c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(206, 222, 156, 0.04);
+    border-color: transparent;
+    color: #cede9c;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(206, 222, 156, 0.16);
+    border-color: transparent;
+    color: #cede9c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ffe08a;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 138, 0.04);
+    color: #ffe08a;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 138, 0.16);
+    color: #ffe08a;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ffe08a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 224, 138, 0.04);
+    border-color: transparent;
+    color: #ffe08a;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 224, 138, 0.16);
+    border-color: transparent;
+    color: #ffe08a;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #b09ce5;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(176, 156, 229, 0.04);
+    color: #b09ce5;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(176, 156, 229, 0.16);
+    color: #b09ce5;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #b09ce5;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(176, 156, 229, 0.04);
+    border-color: transparent;
+    color: #b09ce5;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(176, 156, 229, 0.16);
+    border-color: transparent;
+    color: #b09ce5;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #e693a9;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(230, 147, 169, 0.04);
+    color: #e693a9;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(230, 147, 169, 0.16);
+    color: #e693a9;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #e693a9;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(230, 147, 169, 0.04);
+    border-color: transparent;
+    color: #e693a9;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(230, 147, 169, 0.16);
+    border-color: transparent;
+    color: #e693a9;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #1e282c;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #263238;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #263238;
+    width: 2rem;
+    height: 0.5rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 0;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: #374851;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    transition: box-shadow 0.3s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #161d21;
+    color: #9eade6;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #9eade6;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: #9eade6;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #9eade6;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #9eade6;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+  }
+  .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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .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(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #9eade6;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 rgba(158, 173, 230, 0.16);
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 rgba(158, 173, 230, 0.16);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #9eade6;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #9eade6;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #9eade6;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #161d21;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #161d21;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #1b2327;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #9eade6;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #9eade6;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1b2327;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #263238;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .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(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .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(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-column-filter-overlay {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 1px solid #263238;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #9eade6;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #263238;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0 0 4px 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.01);
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: rgba(57, 87, 204, 0.16);
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #263238;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 2px solid #263238;
+    border-color: #263238;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 2px solid #263238;
+    border-color: #263238;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-paginator {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    border: solid #263238;
+    border-width: 2px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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(255, 255, 255, 0.6);
+    min-width: 2.857rem;
+    height: 2.857rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .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(158, 173, 230, 0.08);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.857rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.857rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.857rem;
+    height: 2.857rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.6);
+    min-width: 2.857rem;
+    height: 2.857rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    border-color: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    border-color: transparent;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-picklist .p-picklist-list {
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.5rem;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0 0 4px 0;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: rgba(158, 173, 230, 0.24);
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #9eade6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .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: #9eade6;
+  }
+  .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: #9eade6;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 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(255, 255, 255, 0.6);
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: rgba(96, 121, 214, 0.16);
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    transition: box-shadow 0.3s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #9eade6;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 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: #9eade6;
+    background: rgba(158, 173, 230, 0.16);
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #161d21;
+    color: #9eade6;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #9eade6;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 2px solid #263238;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #9eade6;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #9eade6;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #9eade6;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #9eade6;
+  }
+  .p-treetable .p-treetable-scrollable-header,
+  .p-treetable .p-treetable-scrollable-footer {
+    background: #161d21;
+  }
+  .p-treetable .p-treetable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-treetable .p-treetable-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #1b2327;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #9eade6;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #9eade6;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #1b2327;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #9eade6;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #161d21;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #263238;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 2px solid #263238;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: rgba(158, 173, 230, 0.08);
+    border-color: #263238;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #161d21;
+    border-color: #263238;
+    color: rgba(255, 255, 255, 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: #263238;
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-card {
+    background: #161d21;
+    color: rgba(255, 255, 255, 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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 2px solid #263238;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+    border-radius: 6px;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: rgba(158, 173, 230, 0.08);
+    border-color: #263238;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .p-divider .p-divider-content {
+    background-color: #161d21;
+  }
+  .p-divider.p-divider-horizontal {
+    margin: 1rem 0;
+    padding: 0 1rem;
+  }
+  .p-divider.p-divider-horizontal:before {
+    border-top: 1px #263238;
+  }
+  .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 #263238;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 2px solid #263238;
+    padding: 1rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 2px solid #263238;
+    background: #161d21;
+    border-radius: 6px;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #263238;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #263238;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: transparent;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-width: 2px;
+    background: transparent;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    font-weight: 600;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #9eade6;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #161d21;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #263238;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.3s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #9eade6;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #263238;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: transparent;
+    border: 1px solid #263238;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #263238;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #263238 transparent;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.3s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #9eade6;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #161d21;
+    border-color: #9eade6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #161d21;
+    border-color: #9eade6;
+    color: #9eade6;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #161d21;
+    color: #9eade6;
+    width: 2.857rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #9eade6;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #161d21;
+    padding: 1rem;
+    border: 0 none;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #161d21;
+    border: 2px solid #263238;
+    padding: 1rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(22, 29, 33, 0);
+    border-bottom-color: #161d21;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(38, 50, 56, 0);
+    border-bottom-color: #243035;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:after {
+    border-top-color: #161d21;
+  }
+  .p-confirm-popup.p-confirm-popup-flipped:before {
+    border-top-color: #263238;
+  }
+  .p-confirm-popup .p-confirm-popup-icon {
+    font-size: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 2px solid #263238;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #9eade6;
+    color: #121212;
+    width: 2rem;
+    height: 2rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #8fa0e2;
+    color: #121212;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(22, 29, 33, 0);
+    border-bottom-color: #161d21;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(38, 50, 56, 0);
+    border-bottom-color: #243035;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #161d21;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #263238;
+  }
+  .p-sidebar {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #263238;
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.5rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #263238;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #263238;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #263238;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #263238;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #161d21;
+    padding: 1rem;
+    border: 2px solid #263238;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #161d21;
+    padding: 2rem 1rem;
+    border: 2px solid #263238;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #161d21;
+    border: 2px solid #263238;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #9eade6;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    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-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.3s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menu.p-menu-overlay {
+    background: #161d21;
+    border: 2px solid #263238;
+    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 1rem;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    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-menuitem-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.3s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.3s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: rgba(255, 255, 255, 0.6);
+      border-radius: 50%;
+      transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(158, 173, 230, 0.08);
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 1px #9eade6;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0.5rem;
+      background: #161d21;
+      border: 2px solid #263238;
+      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 #263238;
+      margin: 4px 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      transition: box-shadow 0.3s;
+      border-radius: 6px;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: rgba(255, 255, 255, 0.87);
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: rgba(255, 255, 255, 0.6);
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.6);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(158, 173, 230, 0.08);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: rgba(158, 173, 230, 0.08);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(158, 173, 230, 0.1);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: rgba(255, 255, 255, 0.87);
+      background: rgba(158, 173, 230, 0.08);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: rgba(255, 255, 255, 0.87);
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+      margin-left: auto;
+      transition: transform 0.3s;
+    }
+    .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.3s;
+      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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 2px solid #263238;
+    color: rgba(255, 255, 255, 0.87);
+    background: #161d21;
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #9eade6;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: rgba(158, 173, 230, 0.08);
+    border-color: #263238;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #161d21;
+    border-color: #263238;
+    color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #263238;
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0.5rem;
+    border: 2px solid #263238;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu.p-slidemenu-overlay {
+    background: #161d21;
+    border: 2px solid #263238;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: transparent;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    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(255, 255, 255, 0.6);
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #263238;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: transparent;
+    border: 1px solid #263238;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #263238;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #263238 transparent;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.6);
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.3s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #9eade6;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #161d21;
+    border-color: #9eade6;
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #161d21;
+    border-color: #9eade6;
+    color: #9eade6;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-tieredmenu.p-tieredmenu-overlay {
+    background: #161d21;
+    border: 2px solid #263238;
+    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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    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-content {
+    color: rgba(255, 255, 255, 0.87);
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: rgba(255, 255, 255, 0.87);
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: rgba(255, 255, 255, 0.6);
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.6);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.1);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #a3d7e6;
+    border: 4px solid #65bcd6;
+    border-width: 2px;
+    color: #0e1315;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #0e1315;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #bfd47f;
+    border: 4px solid #a2c044;
+    border-width: 2px;
+    color: #0e1315;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #0e1315;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ff9c3e;
+    border: 4px solid #ff8817;
+    border-width: 2px;
+    color: #0e1315;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #0e1315;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #e6a3b2;
+    border: 4px solid #de8499;
+    border-width: 2px;
+    color: #0e1315;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #0e1315;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-message.p-message-info {
+    background: #a3d7e6;
+    border: 4px solid #65bcd6;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #0e1315;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #0e1315;
+  }
+  .p-message.p-message-success {
+    background: #bfd47f;
+    border: 4px solid #a2c044;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #0e1315;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #0e1315;
+  }
+  .p-message.p-message-warn {
+    background: #ff9c3e;
+    border: 4px solid #ff8817;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #0e1315;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #0e1315;
+  }
+  .p-message.p-message-error {
+    background: #e6a3b2;
+    border: 4px solid #de8499;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #0e1315;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #0e1315;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: none;
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
+    font-weight: 600;
+  }
+  .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.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #a3d7e6;
+    border: 4px solid #65bcd6;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .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: #0e1315;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #bfd47f;
+    border: 4px solid #a2c044;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .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: #0e1315;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ff9c3e;
+    border: 4px solid #ff8817;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .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: #0e1315;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #e6a3b2;
+    border: 4px solid #de8499;
+    border-width: 0 0 0 6px;
+    color: #0e1315;
+  }
+  .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: #0e1315;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 50%;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f8f9fa;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f8f9fa;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f8f9fa;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #263238;
+    width: 1rem;
+    height: 1rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 50%;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #374851;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: rgba(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .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(158, 173, 230, 0.16);
+    color: #9eade6;
+  }
+  .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: #f8f9fa;
+    width: 2rem;
+    height: 2rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    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: #f8f9fa;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.3s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #263238;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #161d21;
+  }
+  .p-chip {
+    background-color: #263238;
+    color: rgba(255, 255, 255, 0.87);
+    border-radius: 16px;
+    padding: 0 0.75rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.75rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(158, 173, 230, 0.16);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(158, 173, 230, 0.3616);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #9eade6;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: rgba(255, 255, 255, 0.06);
+    border-radius: 6px;
+  }
+  .p-skeleton:after {
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0));
+  }
+  .p-tag {
+    background: #9eade6;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #cede9c;
+    color: #0e1315;
+  }
+  .p-tag.p-tag-info {
+    background-color: #35a4cc;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe08a;
+    color: #0e1315;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e693a9;
+    color: #0e1315;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: rgba(158, 173, 230, 0.08);
+    color: rgba(255, 255, 255, 0.87);
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #263238;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #9eade6;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #9eade6;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #263238;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #9eade6;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #121212;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #161d21;
+    color: rgba(255, 255, 255, 0.87);
+    border: 2px solid #263238;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #9eade6;
+    color: #121212;
+    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: #b4bfcd;
+    color: #0e1315;
+  }
+  .p-badge.p-badge-success {
+    background-color: #cede9c;
+    color: #0e1315;
+  }
+  .p-badge.p-badge-info {
+    background-color: #35a4cc;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ffe08a;
+    color: #0e1315;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #e693a9;
+    color: #0e1315;
+  }
+  .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-tag {
+    background: #9eade6;
+    color: #121212;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #cede9c;
+    color: #0e1315;
+  }
+  .p-tag.p-tag-info {
+    background-color: #35a4cc;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ffe08a;
+    color: #0e1315;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #e693a9;
+    color: #0e1315;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-button .p-button-label {
+    font-weight: 600;
+  }
+  .p-button-group .p-button-label,
+  .p-togglebutton .p-button-label {
+    font-weight: 400;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #9eade6;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #9eade6;
+  }
+  .p-panel {
+    border: 2px solid #263238;
+    border-radius: 6px;
+  }
+  .p-panel .p-panel-header {
+    border: 0 none;
+  }
+  .p-panel .p-panel-content {
+    border: 0 none;
+  }
+  .p-fieldset .p-fieldset-legend {
+    border-color: transparent;
+  }
+  .p-accordion .p-accordion-toggle-icon {
+    order: 10;
+    margin-left: auto;
+  }
+  .p-accordion .p-accordion-toggle-icon.pi-chevron-right::before {
+    content: "\e90d";
+  }
+  .p-accordion .p-accordion-toggle-icon.pi-chevron-down::before {
+    content: "\e90f";
+  }
+  .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link {
+    padding-bottom: calc(1rem + 2px);
+    border-bottom: 0 none;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-bottom: 0 none;
+  }
+  .p-inline-message.p-inline-message-info {
+    border-color: #a3d7e6;
+  }
+  .p-inline-message.p-inline-message-success {
+    border-color: #bfd47f;
+  }
+  .p-inline-message.p-inline-message-warn {
+    border-color: #ff9c3e;
+  }
+  .p-inline-message.p-inline-message-error {
+    border-color: #e6a3b2;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: none;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-orderlist .p-orderlist-list {
+    border-top: 0 none;
+  }
+  .p-picklist .p-picklist-list {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down {
+    order: 10;
+    margin-left: auto;
+  }
+  .p-panelmenu .p-panelmenu-icon.pi-chevron-right::before {
+    content: "\e90d";
+  }
+  .p-panelmenu .p-panelmenu-icon.pi-chevron-down::before {
+    content: "\e90f";
+  }
+  .p-panelmenu .p-panelmenu-header.p-highlight > a {
+    padding-bottom: calc(1rem + 2px);
+    border-bottom: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
+    padding-bottom: calc(1rem + 2px);
+    border-bottom: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #9eade6;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #9eade6;
+  }
+}
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff
new file mode 100644
index 0000000000..263ae18e74
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff differ
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2
new file mode 100644
index 0000000000..5145c1e4b2
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-300.woff2 differ
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff
new file mode 100644
index 0000000000..b33382edf7
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff differ
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2
new file mode 100644
index 0000000000..1f4ac79c5c
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-600.woff2 differ
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff
new file mode 100644
index 0000000000..2647313cdb
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff differ
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2
new file mode 100644
index 0000000000..4340e2632b
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-700.woff2 differ
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff
new file mode 100644
index 0000000000..77049f3cec
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff differ
diff --git a/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2 b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2
new file mode 100644
index 0000000000..5643f910f2
Binary files /dev/null and b/public/themes/viva-light/fonts/poppins-v15-latin-ext_latin-regular.woff2 differ
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
new file mode 100644
index 0000000000..9a36d74cea
--- /dev/null
+++ b/public/themes/viva-light/theme.css
@@ -0,0 +1,7161 @@
+:root {
+  font-family: Poppins, sans-serif;
+  --font-family: Poppins, sans-serif;
+  --surface-a: #ffffff;
+  --surface-b: #f5f5f5;
+  --surface-c: #edf0fa;
+  --surface-d: #ebebeb;
+  --surface-e: #ffffff;
+  --surface-f: #ffffff;
+  --text-color: #6c6c6c;
+  --text-color-secondary: #898989;
+  --primary-color: #5472d4;
+  --primary-color-text: #ffffff;
+  --surface-0: #ffffff;
+  --surface-50: #f1f3f5;
+  --surface-100: #e2e6eb;
+  --surface-200: #c6cdd7;
+  --surface-300: #a9b4c2;
+  --surface-400: #8d9bae;
+  --surface-500: #70829a;
+  --surface-600: #5a687b;
+  --surface-700: #434e5c;
+  --surface-800: #2d343e;
+  --surface-900: #161a1f;
+  --gray-50: #f1f3f5;
+  --gray-100: #e2e6eb;
+  --gray-200: #c6cdd7;
+  --gray-300: #a9b4c2;
+  --gray-400: #8d9bae;
+  --gray-500: #70829a;
+  --gray-600: #5a687b;
+  --gray-700: #434e5c;
+  --gray-800: #2d343e;
+  --gray-900: #161a1f;
+  --content-padding: 1rem;
+  --inline-spacing: 0.5rem;
+  --border-radius: 6px;
+  --surface-ground: #f5f5f5;
+  --surface-section: #ffffff;
+  --surface-card: #ffffff;
+  --surface-overlay: #ffffff;
+  --surface-border: #ebebeb;
+  --surface-hover: #edf0fa;
+  --focus-ring: 0 0 0 0.1rem #bbc7ee;
+  --maskbg: rgba(0, 0, 0, 0.4);
+  --highlight-bg: #ced6f1;
+  --highlight-text-color: #585858;
+  color-scheme: light;
+}
+
+/* poppins-300 - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 300;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-300.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-regular - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-regular.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-600 - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 600;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-600.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* poppins-700 - latin-ext_latin */
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""), url("http://github.com/fonts/poppins-v15-latin-ext_latin-700.woff2") format("woff2"), url("http://github.com/fonts/poppins-v15-latin-ext_latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+:root {
+  --blue-50:#f6fbfd;
+  --blue-100:#d6eaf5;
+  --blue-200:#b5d9ed;
+  --blue-300:#95c8e4;
+  --blue-400:#74b7dc;
+  --blue-500:#54a6d4;
+  --blue-600:#478db4;
+  --blue-700:#3b7494;
+  --blue-800:#2e5b75;
+  --blue-900:#224255;
+  --green-50:#f9fbf4;
+  --green-100:#e3eccc;
+  --green-200:#cddca4;
+  --green-300:#b7cd7c;
+  --green-400:#a1bd54;
+  --green-500:#8bae2c;
+  --green-600:#769425;
+  --green-700:#617a1f;
+  --green-800:#4c6018;
+  --green-900:#384612;
+  --yellow-50:#fffdf4;
+  --yellow-100:#fff4cc;
+  --yellow-200:#ffeba3;
+  --yellow-300:#ffe27b;
+  --yellow-400:#ffd952;
+  --yellow-500:#ffd02a;
+  --yellow-600:#d9b124;
+  --yellow-700:#b3921d;
+  --yellow-800:#8c7217;
+  --yellow-900:#665311;
+  --cyan-50:#f5fafc;
+  --cyan-100:#cfe9f3;
+  --cyan-200:#a8d8e9;
+  --cyan-300:#82c7df;
+  --cyan-400:#5bb5d6;
+  --cyan-500:#35a4cc;
+  --cyan-600:#2d8bad;
+  --cyan-700:#25738f;
+  --cyan-800:#1d5a70;
+  --cyan-900:#154252;
+  --pink-50:#fdf6f8;
+  --pink-100:#f5d6dd;
+  --pink-200:#edb5c2;
+  --pink-300:#e495a8;
+  --pink-400:#dc748d;
+  --pink-500:#d45472;
+  --pink-600:#b44761;
+  --pink-700:#943b50;
+  --pink-800:#752e3f;
+  --pink-900:#55222e;
+  --indigo-50:#f6f8fd;
+  --indigo-100:#d6ddf5;
+  --indigo-200:#b5c2ed;
+  --indigo-300:#95a8e4;
+  --indigo-400:#748ddc;
+  --indigo-500:#5472d4;
+  --indigo-600:#4761b4;
+  --indigo-700:#3b5094;
+  --indigo-800:#2e3f75;
+  --indigo-900:#222e55;
+  --teal-50:#f5fcfa;
+  --teal-100:#d1f0e8;
+  --teal-200:#ace3d6;
+  --teal-300:#88d7c4;
+  --teal-400:#63cbb2;
+  --teal-500:#3fbfa0;
+  --teal-600:#36a288;
+  --teal-700:#2c8670;
+  --teal-800:#236958;
+  --teal-900:#194c40;
+  --orange-50:#fffaf4;
+  --orange-100:#ffe5cc;
+  --orange-200:#ffd0a3;
+  --orange-300:#ffbb7b;
+  --orange-400:#ffa752;
+  --orange-500:#ff922a;
+  --orange-600:#d97c24;
+  --orange-700:#b3661d;
+  --orange-800:#8c5017;
+  --orange-900:#663a11;
+  --bluegray-50:#f9fafb;
+  --bluegray-100:#e1e5ea;
+  --bluegray-200:#c9d0d9;
+  --bluegray-300:#b1bbc8;
+  --bluegray-400:#99a6b7;
+  --bluegray-500:#8191a6;
+  --bluegray-600:#6e7b8d;
+  --bluegray-700:#5a6674;
+  --bluegray-800:#47505b;
+  --bluegray-900:#343a42;
+  --purple-50:#f8f6fd;
+  --purple-100:#ded6f5;
+  --purple-200:#c4b5ed;
+  --purple-300:#aa95e4;
+  --purple-400:#9074dc;
+  --purple-500:#7654d4;
+  --purple-600:#6447b4;
+  --purple-700:#533b94;
+  --purple-800:#412e75;
+  --purple-900:#2f2255;
+  --red-50:#fff7f6;
+  --red-100:#ffd8d2;
+  --red-200:#ffb9af;
+  --red-300:#ff9b8b;
+  --red-400:#ff7c68;
+  --red-500:#ff5d44;
+  --red-600:#d94f3a;
+  --red-700:#b34130;
+  --red-800:#8c3325;
+  --red-900:#66251b;
+  --primary-50:#f6f8fd;
+  --primary-100:#d6ddf5;
+  --primary-200:#b5c2ed;
+  --primary-300:#95a8e4;
+  --primary-400:#748ddc;
+  --primary-500:#5472d4;
+  --primary-600:#4761b4;
+  --primary-700:#3b5094;
+  --primary-800:#2e3f75;
+  --primary-900:#222e55;
+}
+
+.p-editor-container .p-editor-toolbar {
+  background: #ffffff;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 2px solid #ebebeb;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #898989;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #898989;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #898989;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #6c6c6c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #6c6c6c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #6c6c6c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #6c6c6c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #6c6c6c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #6c6c6c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  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);
+  border-radius: 6px;
+  padding: 0.5rem 0.5rem;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #6c6c6c;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #6c6c6c;
+  background: #edf0fa;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.5rem 1rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 2px solid #ebebeb;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #6c6c6c;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #6c6c6c;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #6c6c6c;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #6c6c6c;
+}
+.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: #5472d4;
+}
+.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: #5472d4;
+}
+.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: #5472d4;
+}
+.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: #5472d4;
+}
+
+@layer primereact {
+  * {
+    box-sizing: border-box;
+  }
+  .p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    font-weight: normal;
+  }
+  .p-component-overlay {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition-duration: 0.3s;
+  }
+  .p-disabled, .p-component:disabled {
+    opacity: 0.6;
+  }
+  .p-error {
+    color: #f88c79;
+  }
+  .p-text-secondary {
+    color: #898989;
+  }
+  .pi {
+    font-size: 1rem;
+  }
+  .p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    border-radius: 6px;
+  }
+  .p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+  }
+  .p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+  }
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+  .p-autocomplete .p-autocomplete-loader {
+    right: 0.75rem;
+  }
+  .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
+    right: 3.607rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+    border-color: #cecece;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
+    padding: 0.25rem 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #6c6c6c;
+    padding: 0;
+    margin: 0;
+  }
+  .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #ced6f1;
+    color: #585858;
+    border-radius: 6px;
+  }
+  .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: #f88c79;
+  }
+  .p-autocomplete-panel {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    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-autocomplete-panel .p-autocomplete-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-calendar.p-invalid.p-component > .p-inputtext {
+    border-color: #f88c79;
+  }
+  .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-datepicker {
+    padding: 0.5rem;
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #e1e1e1;
+    border-radius: 6px;
+  }
+  .p-datepicker:not(.p-datepicker-inline) {
+    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-datepicker:not(.p-datepicker-inline) .p-datepicker-header {
+    background: #ffffff;
+  }
+  .p-datepicker .p-datepicker-header {
+    padding: 0.5rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+    margin: 0;
+    border-bottom: 1px solid #ebebeb;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev,
+  .p-datepicker .p-datepicker-header .p-datepicker-next {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-prev:focus-visible,
+  .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title {
+    line-height: 2rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month {
+    color: #6c6c6c;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    font-weight: 600;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-year:enabled:hover,
+  .p-datepicker .p-datepicker-header .p-datepicker-title .p-datepicker-month:enabled:hover {
+    color: #5472d4;
+  }
+  .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.5rem;
+    height: 2.5rem;
+  }
+  .p-datepicker table td {
+    padding: 0.5rem;
+  }
+  .p-datepicker table td > span {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    transition: box-shadow 0.3s;
+    border: 1px solid transparent;
+  }
+  .p-datepicker table td > span.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-datepicker table td > span:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-datepicker table td.p-datepicker-today > span {
+    background: #e1e1e1;
+    color: #6c6c6c;
+    border-color: transparent;
+  }
+  .p-datepicker table td.p-datepicker-today > span.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-datepicker .p-datepicker-buttonbar {
+    padding: 1rem 0;
+    border-top: 1px solid #ebebeb;
+  }
+  .p-datepicker .p-datepicker-buttonbar .p-button {
+    width: auto;
+  }
+  .p-datepicker .p-timepicker {
+    border-top: 1px solid #ebebeb;
+    padding: 0.5rem;
+  }
+  .p-datepicker .p-timepicker button {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-datepicker .p-timepicker button:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-datepicker .p-timepicker button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .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: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-datepicker .p-yearpicker {
+    margin: 0.5rem 0;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year {
+    padding: 0.5rem;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+    border-left: 1px solid #ebebeb;
+    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;
+    border-left: 0 none;
+  }
+  .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
+    padding-right: 0;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
+    background: #edf0fa;
+  }
+  .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
+    background: #edf0fa;
+  }
+  .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
+    background: #edf0fa;
+  }
+  .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  @media screen and (max-width: 769px) {
+    .p-datepicker table th,
+    .p-datepicker table td {
+      padding: 0;
+    }
+  }
+  .p-cascadeselect {
+    background: #ffffff;
+    border: 2px solid #e1e1e1;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-cascadeselect:not(.p-disabled):hover {
+    border-color: #cecece;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-cascadeselect.p-variant-filled {
+    background-color: #f2f2f2;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:hover {
+    background-color: #f2f2f2;
+  }
+  .p-cascadeselect.p-variant-filled:enabled:focus {
+    background-color: #f2f2f2;
+  }
+  .p-cascadeselect .p-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: 0.5rem 0.75rem;
+  }
+  .p-cascadeselect .p-cascadeselect-label.p-placeholder {
+    color: #898989;
+  }
+  .p-cascadeselect .p-cascadeselect-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-cascadeselect .p-cascadeselect-trigger {
+    background: transparent;
+    color: #898989;
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-cascadeselect.p-invalid.p-component {
+    border-color: #f88c79;
+  }
+  .p-cascadeselect-panel {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    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-cascadeselect-panel .p-cascadeselect-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item {
+    margin: 0 0 4px 0;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+    padding: 0.5rem 1rem;
+  }
+  .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
+    font-size: 0.875rem;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-checkbox {
+    width: 20px;
+    height: 20px;
+  }
+  .p-checkbox .p-checkbox-input {
+    border: 2px solid #e1e1e1;
+    border-radius: 6px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #e1e1e1;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #6c6c6c;
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.3s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox .p-checkbox-box {
+    border: 2px solid #e1e1e1;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #6c6c6c;
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon {
+    transition-duration: 0.3s;
+    color: #ffffff;
+    font-size: 14px;
+  }
+  .p-checkbox .p-checkbox-box .p-checkbox-icon.p-icon {
+    width: 14px;
+    height: 14px;
+  }
+  .p-checkbox.p-highlight .p-checkbox-box {
+    border-color: #5472d4;
+    background: #5472d4;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    border-color: #cecece;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    border-color: #3c5ece;
+    background: #3c5ece;
+    color: #ffffff;
+  }
+  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-checkbox.p-invalid > .p-checkbox-box {
+    border-color: #f88c79;
+  }
+  .p-checkbox.p-variant-filled .p-checkbox-box {
+    background-color: #f2f2f2;
+  }
+  .p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #5472d4;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f2f2f2;
+  }
+  .p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3c5ece;
+  }
+  .p-input-filled .p-checkbox .p-checkbox-box {
+    background-color: #f2f2f2;
+  }
+  .p-input-filled .p-checkbox.p-highlight .p-checkbox-box {
+    background: #5472d4;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f2f2f2;
+  }
+  .p-input-filled .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3c5ece;
+  }
+  .p-checkbox {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-checkbox-input {
+    cursor: pointer;
+  }
+  .p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-tristatecheckbox.p-variant-filled .p-checkbox-box {
+    background-color: #f2f2f2;
+  }
+  .p-tristatecheckbox.p-variant-filled.p-highlight .p-checkbox-box {
+    background: #5472d4;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    background-color: #f2f2f2;
+  }
+  .p-tristatecheckbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
+    background: #3c5ece;
+  }
+  .p-chips {
+    display: inline-flex;
+  }
+  .p-chips-multiple-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .p-chips-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-chips-input-token {
+    flex: 1 1 auto;
+    display: inline-flex;
+  }
+  .p-chips-token-icon {
+    cursor: pointer;
+  }
+  .p-chips-input-token input {
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+  }
+  .p-fluid .p-chips {
+    display: flex;
+  }
+  .p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+    border-color: #cecece;
+  }
+  .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-chips .p-chips-multiple-container {
+    padding: 0.25rem 0.75rem;
+    outline-color: transparent;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #ebebeb;
+    color: #6c6c6c;
+    border-radius: 16px;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+    background: #e1e1e1;
+    color: #6c6c6c;
+  }
+  .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.25rem 0;
+  }
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #6c6c6c;
+    padding: 0;
+    margin: 0;
+  }
+  .p-chips.p-invalid.p-component > .p-inputtext {
+    border-color: #f88c79;
+  }
+  .p-colorpicker-preview {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-colorpicker-panel {
+    background: #585858;
+    border: 1px solid #585858;
+  }
+  .p-colorpicker-panel .p-colorpicker-color-handle,
+  .p-colorpicker-panel .p-colorpicker-hue-handle {
+    border-color: #ffffff;
+  }
+  .p-colorpicker-overlay-panel {
+    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-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    user-select: none;
+  }
+  .p-dropdown-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-dropdown-label {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
+    cursor: pointer;
+  }
+  .p-dropdown-label-empty {
+    overflow: hidden;
+    opacity: 0;
+  }
+  input.p-dropdown-label {
+    cursor: default;
+  }
+  .p-dropdown .p-dropdown-panel {
+    min-width: 100%;
+  }
+  .p-dropdown-panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .p-dropdown-items-wrapper {
+    overflow: auto;
+  }
+  .p-dropdown-item {
+    cursor: pointer;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+  .p-dropdown-item-group {
+    cursor: auto;
+  }
+  .p-dropdown-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-dropdown-filter {
+    width: 100%;
+  }
+  .p-dropdown-filter-container {
+    position: relative;
+  }
+  .p-dropdown-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-dropdown {
+    display: flex;
+  }
+  .p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
+  }
+  .p-dropdown {
+    background: #ffffff;
+    border: 2px solid #e1e1e1;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-dropdown:not(.p-disabled):hover {
+    border-color: #cecece;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-dropdown.p-variant-filled {
+    background: #f2f2f2;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f2f2;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f2f2f2;
+  }
+  .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext {
+    background-color: transparent;
+  }
+  .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: #898989;
+  }
+  .p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
+    outline: 0 none;
+    box-shadow: none;
+  }
+  .p-dropdown .p-dropdown-trigger {
+    background: transparent;
+    color: #898989;
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dropdown .p-dropdown-clear-icon {
+    color: #898989;
+    right: 2.857rem;
+  }
+  .p-dropdown.p-invalid.p-component {
+    border-color: #f88c79;
+  }
+  .p-dropdown-panel {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    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-dropdown-panel .p-dropdown-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: #6c6c6c;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
+    padding-right: 1.75rem;
+    margin-right: -1.75rem;
+  }
+  .p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
+    right: 0.75rem;
+    color: #898989;
+  }
+  .p-dropdown-panel .p-dropdown-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:first-child {
+    margin-top: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item .p-dropdown-check-icon {
+    position: relative;
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
+    padding: 0.5rem 1rem;
+    color: #6c6c6c;
+    background: transparent;
+  }
+  .p-inputgroup-addon {
+    background: #f5f5f5;
+    color: #898989;
+    border-top: 2px solid #e1e1e1;
+    border-left: 2px solid #e1e1e1;
+    border-bottom: 2px solid #e1e1e1;
+    padding: 0.5rem 0.75rem;
+    min-width: 2.857rem;
+  }
+  .p-inputgroup-addon:last-child {
+    border-right: 2px solid #e1e1e1;
+  }
+  .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: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:first-child input {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-inputgroup .p-float-label:last-child input {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-fluid .p-inputgroup .p-button {
+    width: auto;
+  }
+  .p-fluid .p-inputgroup .p-button.p-button-icon-only {
+    width: 2.857rem;
+  }
+  .p-inputnumber.p-invalid.p-component > .p-inputtext {
+    border-color: #f88c79;
+  }
+  .p-inputswitch {
+    position: relative;
+    display: inline-block;
+  }
+  .p-inputswitch-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    cursor: pointer;
+  }
+  .p-inputswitch-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid transparent;
+  }
+  .p-inputswitch-slider:before {
+    position: absolute;
+    content: "";
+    top: 50%;
+  }
+  .p-inputswitch {
+    width: 3rem;
+    height: 1.75rem;
+  }
+  .p-inputswitch .p-inputswitch-input {
+    border-radius: 6px;
+  }
+  .p-inputswitch .p-inputswitch-slider {
+    background: #cecece;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputswitch .p-inputswitch-slider:before {
+    background: #ffffff;
+    width: 1.25rem;
+    height: 1.25rem;
+    left: 0.25rem;
+    margin-top: -0.625rem;
+    border-radius: 6px;
+    transition-duration: 0.3s;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider {
+    background: #5472d4;
+  }
+  .p-inputswitch.p-highlight .p-inputswitch-slider:before {
+    background: #ffffff;
+    transform: translateX(1.25rem);
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover) .p-inputswitch-slider {
+    background: #b9b9b9;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:hover).p-highlight .p-inputswitch-slider {
+    background: #4868d1;
+  }
+  .p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-inputswitch.p-invalid > .p-inputswitch-slider {
+    border-color: #f88c79;
+  }
+  .p-inputtext {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    padding: 0.5rem 0.75rem;
+    border: 2px solid #e1e1e1;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    appearance: none;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-inputtext:enabled:hover {
+    border-color: #cecece;
+  }
+  .p-inputtext:enabled:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-inputtext.p-invalid.p-component {
+    border-color: #f88c79;
+  }
+  .p-inputtext.p-variant-filled {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext.p-variant-filled:enabled:hover {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext.p-variant-filled:enabled:focus {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext.p-inputtext-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext.p-inputtext-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-float-label > label {
+    left: 0.75rem;
+    color: #898989;
+    transition-duration: 0.3s;
+  }
+  .p-float-label > .p-invalid + label {
+    color: #f88c79;
+  }
+  .p-icon-field-left > .p-inputtext {
+    padding-left: 2.5rem;
+  }
+  .p-icon-field-left.p-float-label > label {
+    left: 2.5rem;
+  }
+  .p-icon-field-right > .p-inputtext {
+    padding-right: 2.5rem;
+  }
+  ::-webkit-input-placeholder {
+    color: #898989;
+  }
+  :-moz-placeholder {
+    color: #898989;
+  }
+  ::-moz-placeholder {
+    color: #898989;
+  }
+  :-ms-input-placeholder {
+    color: #898989;
+  }
+  .p-input-filled .p-inputtext {
+    background-color: #f2f2f2;
+  }
+  .p-input-filled .p-inputtext:enabled:hover {
+    background-color: #f2f2f2;
+  }
+  .p-input-filled .p-inputtext:enabled:focus {
+    background-color: #f2f2f2;
+  }
+  .p-inputtext-sm .p-inputtext {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.65625rem;
+  }
+  .p-inputtext-lg .p-inputtext {
+    font-size: 1.25rem;
+    padding: 0.625rem 0.9375rem;
+  }
+  .p-icon-field {
+    position: relative;
+  }
+  .p-icon-field > .p-input-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-fluid .p-icon-field-left,
+  .p-fluid .p-icon-field-right {
+    width: 100%;
+  }
+  .p-icon-field-left > .p-input-icon:first-of-type {
+    left: 0.75rem;
+    color: #898989;
+  }
+  .p-icon-field-right > .p-input-icon:last-of-type {
+    right: 0.75rem;
+    color: #898989;
+  }
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+  .p-listbox-list-wrapper {
+    overflow: auto;
+  }
+  .p-listbox-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+  .p-listbox-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-listbox-item-group {
+    cursor: auto;
+  }
+  .p-listbox-filter-container {
+    position: relative;
+  }
+  .p-listbox-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-listbox-filter {
+    width: 100%;
+  }
+  .p-listbox {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #e1e1e1;
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-listbox .p-listbox-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: #6c6c6c;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #898989;
+  }
+  .p-listbox .p-listbox-list {
+    padding: 0.5rem 0.5rem;
+    outline: 0 none;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:first-child {
+    margin-top: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-listbox .p-listbox-list .p-listbox-item-group {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-listbox .p-listbox-list .p-listbox-empty-message {
+    padding: 0.5rem 1rem;
+    color: #6c6c6c;
+    background: transparent;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover.p-focus {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-listbox.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-listbox.p-invalid {
+    border-color: #f88c79;
+  }
+  .p-mention-panel {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    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-mention-panel .p-mention-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-mention-panel .p-mention-items .p-mention-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-multiselect {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .p-multiselect-label-container {
+    overflow: hidden;
+    flex: 1 1 auto;
+    cursor: pointer;
+  }
+  .p-multiselect-label {
+    display: block;
+    white-space: nowrap;
+    cursor: pointer;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .p-multiselect-label-empty {
+    overflow: hidden;
+    visibility: hidden;
+  }
+  .p-multiselect-token {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+  }
+  .p-multiselect-token-icon {
+    cursor: pointer;
+  }
+  .p-multiselect .p-multiselect-panel {
+    min-width: 100%;
+  }
+  .p-multiselect-items-wrapper {
+    overflow: auto;
+  }
+  .p-multiselect-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-multiselect-item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    font-weight: normal;
+    white-space: nowrap;
+    position: relative;
+    overflow: hidden;
+  }
+  .p-multiselect-item-group {
+    cursor: auto;
+  }
+  .p-multiselect-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .p-multiselect-filter-container {
+    position: relative;
+    flex: 1 1 auto;
+  }
+  .p-multiselect-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-multiselect-filter-container .p-inputtext {
+    width: 100%;
+  }
+  .p-multiselect-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    margin-left: auto;
+  }
+  .p-fluid .p-multiselect {
+    display: flex;
+  }
+  .p-multiselect {
+    background: #ffffff;
+    border: 2px solid #e1e1e1;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    outline-color: transparent;
+  }
+  .p-multiselect:not(.p-disabled):hover {
+    border-color: #cecece;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-multiselect.p-variant-filled {
+    background: #f2f2f2;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f2f2;
+  }
+  .p-multiselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f2f2f2;
+  }
+  .p-multiselect .p-multiselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-multiselect .p-multiselect-label.p-placeholder {
+    color: #898989;
+  }
+  .p-multiselect.p-multiselect-chip .p-multiselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #ebebeb;
+    color: #6c6c6c;
+    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: #898989;
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-multiselect.p-invalid.p-component {
+    border-color: #f88c79;
+  }
+  .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-multiselect-panel {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    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-multiselect-panel .p-multiselect-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: #6c6c6c;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .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: #898989;
+  }
+  .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: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-multiselect-panel .p-multiselect-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:first-child {
+    margin-top: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:last-child {
+    margin-bottom: 0;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .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 1rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+  }
+  .p-multiselect-panel .p-multiselect-items .p-multiselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #6c6c6c;
+    background: transparent;
+  }
+  .p-password.p-invalid.p-component > .p-inputtext {
+    border-color: #f88c79;
+  }
+  .p-password-panel {
+    padding: 1rem;
+    background: #ffffff;
+    color: #6c6c6c;
+    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);
+    border-radius: 6px;
+  }
+  .p-password-panel .p-password-meter {
+    margin-bottom: 0.5rem;
+    background: #ebebeb;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.weak {
+    background: #d45472;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.medium {
+    background: #ff922a;
+  }
+  .p-password-panel .p-password-meter .p-password-strength.strong {
+    background: #8bae2c;
+  }
+  .p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-radiobutton-input {
+    cursor: pointer;
+  }
+  .p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(0.1);
+    border-radius: 50%;
+    visibility: hidden;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1, 1);
+    visibility: visible;
+  }
+  .p-radiobutton {
+    width: 20px;
+    height: 20px;
+  }
+  .p-radiobutton .p-radiobutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #e1e1e1;
+    border-radius: 50%;
+  }
+  .p-radiobutton .p-radiobutton-box {
+    border: 2px solid #e1e1e1;
+    background: #ffffff;
+    width: 20px;
+    height: 20px;
+    color: #6c6c6c;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
+    width: 12px;
+    height: 12px;
+    transition-duration: 0.3s;
+    background-color: #ffffff;
+  }
+  .p-radiobutton.p-highlight .p-radiobutton-box {
+    border-color: #5472d4;
+    background: #5472d4;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    border-color: #cecece;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    border-color: #3c5ece;
+    background: #3c5ece;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
+    background-color: #ffffff;
+  }
+  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-radiobutton.p-invalid > .p-radiobutton-box {
+    border-color: #f88c79;
+  }
+  .p-radiobutton.p-variant-filled .p-radiobutton-box {
+    background-color: #f2f2f2;
+  }
+  .p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
+    background: #5472d4;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f2f2f2;
+  }
+  .p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #3c5ece;
+  }
+  .p-input-filled .p-radiobutton .p-radiobutton-box {
+    background-color: #f2f2f2;
+  }
+  .p-input-filled .p-radiobutton.p-highlight .p-radiobutton-box {
+    background: #5472d4;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    background-color: #f2f2f2;
+  }
+  .p-input-filled .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
+    background: #3c5ece;
+  }
+  .p-rating {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .p-rating-item {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  .p-rating.p-readonly .p-rating-item {
+    cursor: default;
+  }
+  .p-rating {
+    gap: 0.5rem;
+  }
+  .p-rating .p-rating-item {
+    outline-color: transparent;
+    border-radius: 50%;
+  }
+  .p-rating .p-rating-item .p-rating-icon {
+    color: #6c6c6c;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    font-size: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-icon {
+    width: 1.143rem;
+    height: 1.143rem;
+  }
+  .p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
+    color: #df7e6c;
+  }
+  .p-rating .p-rating-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+    color: #5472d4;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
+    color: #5472d4;
+  }
+  .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
+    color: #f88c79;
+  }
+  .p-selectbutton .p-button {
+    background: #ffffff;
+    border: 2px solid #e1e1e1;
+    color: #6c6c6c;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-selectbutton .p-button .p-button-icon-left,
+  .p-selectbutton .p-button .p-button-icon-right {
+    color: #898989;
+  }
+  .p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
+    background: #edf0fa;
+    border-color: #e1e1e1;
+    color: #6c6c6c;
+  }
+  .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: #898989;
+  }
+  .p-selectbutton .p-button.p-highlight {
+    background: #ced6f1;
+    border-color: #ced6f1;
+    color: #585858;
+  }
+  .p-selectbutton .p-button.p-highlight .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight .p-button-icon-right {
+    color: #585858;
+  }
+  .p-selectbutton .p-button.p-highlight:hover {
+    background: #bdc7ec;
+    border-color: #bdc7ec;
+    color: #585858;
+  }
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
+  .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
+    color: #585858;
+  }
+  .p-selectbutton.p-invalid > .p-button {
+    border-color: #f88c79;
+  }
+  .p-slider {
+    background: #ebebeb;
+    border: 0 none;
+    border-radius: 6px;
+  }
+  .p-slider.p-slider-horizontal {
+    height: 0.286rem;
+  }
+  .p-slider.p-slider-horizontal .p-slider-handle {
+    margin-top: -0.5715rem;
+    margin-left: -0.5715rem;
+  }
+  .p-slider.p-slider-vertical {
+    width: 0.286rem;
+  }
+  .p-slider.p-slider-vertical .p-slider-handle {
+    margin-left: -0.5715rem;
+    margin-bottom: -0.5715rem;
+  }
+  .p-slider .p-slider-handle {
+    height: 1.143rem;
+    width: 1.143rem;
+    background: #ffffff;
+    border: 2px solid #5472d4;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-slider .p-slider-handle:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-slider .p-slider-range {
+    background: #5472d4;
+  }
+  .p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: #5472d4;
+    border-color: #5472d4;
+  }
+  .p-treeselect {
+    background: #ffffff;
+    border: 2px solid #e1e1e1;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-treeselect:not(.p-disabled):hover {
+    border-color: #cecece;
+  }
+  .p-treeselect:not(.p-disabled).p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-treeselect.p-treeselect-clearable .p-treeselect-label {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect.p-variant-filled {
+    background: #f2f2f2;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled):hover {
+    background-color: #f2f2f2;
+  }
+  .p-treeselect.p-variant-filled:not(.p-disabled).p-focus {
+    background-color: #f2f2f2;
+  }
+  .p-treeselect .p-treeselect-label {
+    padding: 0.5rem 0.75rem;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-treeselect .p-treeselect-label.p-placeholder {
+    color: #898989;
+  }
+  .p-treeselect.p-treeselect-chip .p-treeselect-token {
+    padding: 0.25rem 0.75rem;
+    margin-right: 0.5rem;
+    background: #ebebeb;
+    color: #6c6c6c;
+    border-radius: 16px;
+  }
+  .p-treeselect .p-treeselect-trigger {
+    background: transparent;
+    color: #898989;
+    width: 2.857rem;
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-treeselect .p-treeselect-clear-icon {
+    color: #898989;
+    right: 2.857rem;
+  }
+  .p-treeselect.p-invalid.p-component {
+    border-color: #f88c79;
+  }
+  .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
+    padding: 0.25rem 0.75rem;
+  }
+  .p-treeselect-panel {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    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-treeselect-panel .p-treeselect-header {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: #6c6c6c;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container {
+    margin-right: 0.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter {
+    padding-right: 1.75rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon {
+    right: 0.75rem;
+    color: #898989;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter {
+    padding-right: 3.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container.p-treeselect-clearable-filter .p-treeselect-filter-clear-icon {
+    right: 2.5rem;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-tree {
+    border: 0 none;
+  }
+  .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
+    padding: 0.5rem 1rem;
+    color: #6c6c6c;
+    background: transparent;
+  }
+  .p-input-filled .p-treeselect {
+    background: #f2f2f2;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled):hover {
+    background-color: #f2f2f2;
+  }
+  .p-input-filled .p-treeselect:not(.p-disabled).p-focus {
+    background-color: #f2f2f2;
+  }
+  .p-togglebutton {
+    position: relative;
+    display: inline-flex;
+    user-select: none;
+    vertical-align: bottom;
+  }
+  .p-togglebutton-input {
+    cursor: pointer;
+  }
+  .p-togglebutton .p-button {
+    flex: 1 1 auto;
+  }
+  .p-togglebutton .p-togglebutton-input {
+    appearance: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+    z-index: 1;
+    outline: 0 none;
+    border: 2px solid #e1e1e1;
+    border-radius: 6px;
+  }
+  .p-togglebutton .p-button {
+    background: #ffffff;
+    border: 2px solid #e1e1e1;
+    color: #6c6c6c;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    outline-color: transparent;
+  }
+  .p-togglebutton .p-button .p-button-icon-left,
+  .p-togglebutton .p-button .p-button-icon-right {
+    color: #898989;
+  }
+  .p-togglebutton.p-highlight .p-button {
+    background: #ced6f1;
+    border-color: #ced6f1;
+    color: #585858;
+  }
+  .p-togglebutton.p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton.p-highlight .p-button .p-button-icon-right {
+    color: #585858;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button {
+    background: #edf0fa;
+    border-color: #e1e1e1;
+    color: #6c6c6c;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover):not(.p-highlight) .p-button .p-button-icon-right {
+    color: #898989;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button {
+    background: #bdc7ec;
+    border-color: #bdc7ec;
+    color: #585858;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-left,
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:hover).p-highlight .p-button .p-button-icon-right {
+    color: #585858;
+  }
+  .p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) .p-button {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: #91a4e3;
+  }
+  .p-togglebutton.p-invalid > .p-button {
+    border-color: #f88c79;
+  }
+  .p-button {
+    color: #ffffff;
+    background: #5472d4;
+    border: 2px solid #5472d4;
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-button:not(:disabled):hover {
+    background: #4868d1;
+    color: #ffffff;
+    border-color: #4868d1;
+  }
+  .p-button:not(:disabled):active {
+    background: #3c5ece;
+    color: #ffffff;
+    border-color: #3c5ece;
+  }
+  .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #5472d4;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(84, 114, 212, 0.04);
+    color: #5472d4;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(84, 114, 212, 0.16);
+    color: #5472d4;
+    border: 2px solid;
+  }
+  .p-button.p-button-outlined.p-button-plain {
+    color: #898989;
+    border-color: #898989;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):hover {
+    background: #edf0fa;
+    color: #898989;
+  }
+  .p-button.p-button-outlined.p-button-plain:not(:disabled):active {
+    background: #ebebeb;
+    color: #898989;
+  }
+  .p-button.p-button-text {
+    background-color: transparent;
+    color: #5472d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(84, 114, 212, 0.04);
+    color: #5472d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text:not(:disabled):active {
+    background: rgba(84, 114, 212, 0.16);
+    color: #5472d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-text.p-button-plain {
+    color: #898989;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):hover {
+    background: #edf0fa;
+    color: #898989;
+  }
+  .p-button.p-button-text.p-button-plain:not(:disabled):active {
+    background: #ebebeb;
+    color: #898989;
+  }
+  .p-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-button .p-button-label {
+    transition-duration: 0.3s;
+  }
+  .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: #5472d4;
+    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.857rem;
+    padding: 0.5rem 0;
+  }
+  .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.857rem;
+  }
+  .p-button.p-button-sm {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-button.p-button-sm .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-button.p-button-lg {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-button.p-button-lg .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-left .p-button-label {
+    margin-left: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-right .p-button-label {
+    margin-right: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-top .p-button-label {
+    margin-top: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only.p-button-loading-bottom .p-button-label {
+    margin-bottom: 0.5rem;
+  }
+  .p-button.p-button-loading-label-only .p-button-loading-icon {
+    margin: 0;
+  }
+  .p-fluid .p-button {
+    width: 100%;
+  }
+  .p-fluid .p-button-icon-only {
+    width: 2.857rem;
+  }
+  .p-fluid .p-button-group {
+    display: flex;
+  }
+  .p-fluid .p-button-group .p-button {
+    flex: 1;
+  }
+  .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
+    color: #ffffff;
+    background: #8191a6;
+    border: 1px solid #8191a6;
+  }
+  .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
+    background: #70829a;
+    color: #ffffff;
+    border-color: #70829a;
+  }
+  .p-button.p-button-secondary:not(:disabled):focus, .p-button-group.p-button-secondary > .p-button:not(:disabled):focus, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-secondary:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #cdd3db;
+  }
+  .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
+    background: #62738a;
+    color: #ffffff;
+    border-color: #62738a;
+  }
+  .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
+    background-color: transparent;
+    color: #8191a6;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
+    background: rgba(129, 145, 166, 0.04);
+    color: #8191a6;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-outlined:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):active {
+    background: rgba(129, 145, 166, 0.16);
+    color: #8191a6;
+    border: 2px solid;
+  }
+  .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
+    background-color: transparent;
+    color: #8191a6;
+    border-color: transparent;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
+    background: rgba(129, 145, 166, 0.04);
+    border-color: transparent;
+    color: #8191a6;
+  }
+  .p-button.p-button-secondary.p-button-text:not(:disabled):active, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):active {
+    background: rgba(129, 145, 166, 0.16);
+    border-color: transparent;
+    color: #8191a6;
+  }
+  .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
+    color: #ffffff;
+    background: #35a4cc;
+    border: 1px solid #35a4cc;
+  }
+  .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
+    background: #2f94b9;
+    color: #ffffff;
+    border-color: #2f94b9;
+  }
+  .p-button.p-button-info:not(:disabled):focus, .p-button-group.p-button-info > .p-button:not(:disabled):focus, .p-splitbutton.p-button-info > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-info:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #aedbeb;
+  }
+  .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
+    background: #2984a4;
+    color: #ffffff;
+    border-color: #2984a4;
+  }
+  .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
+    background-color: transparent;
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-outlined:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
+    background-color: transparent;
+    color: #35a4cc;
+    border-color: transparent;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-button.p-button-info.p-button-text:not(:disabled):active, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
+    color: #ffffff;
+    background: #8bae2c;
+    border: 1px solid #8bae2c;
+  }
+  .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
+    background: #7d9d28;
+    color: #ffffff;
+    border-color: #7d9d28;
+  }
+  .p-button.p-button-success:not(:disabled):focus, .p-button-group.p-button-success > .p-button:not(:disabled):focus, .p-splitbutton.p-button-success > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-success:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #d5e7a2;
+  }
+  .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
+    background: #6f8b23;
+    color: #ffffff;
+    border-color: #6f8b23;
+  }
+  .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
+    background-color: transparent;
+    color: #8bae2c;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
+    background: rgba(139, 174, 44, 0.04);
+    color: #8bae2c;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-outlined:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):active {
+    background: rgba(139, 174, 44, 0.16);
+    color: #8bae2c;
+    border: 2px solid;
+  }
+  .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
+    background-color: transparent;
+    color: #8bae2c;
+    border-color: transparent;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
+    background: rgba(139, 174, 44, 0.04);
+    border-color: transparent;
+    color: #8bae2c;
+  }
+  .p-button.p-button-success.p-button-text:not(:disabled):active, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):active {
+    background: rgba(139, 174, 44, 0.16);
+    border-color: transparent;
+    color: #8bae2c;
+  }
+  .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning {
+    color: #ffffff;
+    background: #ff922a;
+    border: 1px solid #ff922a;
+  }
+  .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover {
+    background: #ff830c;
+    color: #ffffff;
+    border-color: #ff830c;
+  }
+  .p-button.p-button-warning:not(:disabled):focus, .p-button-group.p-button-warning > .p-button:not(:disabled):focus, .p-splitbutton.p-button-warning > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-warning:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #ffd3aa;
+  }
+  .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active {
+    background: #ee7400;
+    color: #ffffff;
+    border-color: #ee7400;
+  }
+  .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined {
+    background-color: transparent;
+    color: #ff922a;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover {
+    background: rgba(255, 146, 42, 0.04);
+    color: #ff922a;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-outlined:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):active {
+    background: rgba(255, 146, 42, 0.16);
+    color: #ff922a;
+    border: 2px solid;
+  }
+  .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text {
+    background-color: transparent;
+    color: #ff922a;
+    border-color: transparent;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover {
+    background: rgba(255, 146, 42, 0.04);
+    border-color: transparent;
+    color: #ff922a;
+  }
+  .p-button.p-button-warning.p-button-text:not(:disabled):active, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):active {
+    background: rgba(255, 146, 42, 0.16);
+    border-color: transparent;
+    color: #ff922a;
+  }
+  .p-button.p-button-help, .p-button-group.p-button-help > .p-button, .p-splitbutton.p-button-help > .p-button, .p-fileupload-choose.p-button-help {
+    color: #ffffff;
+    background: #7654d4;
+    border: 1px solid #7654d4;
+  }
+  .p-button.p-button-help:not(:disabled):hover, .p-button-group.p-button-help > .p-button:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-help:not(:disabled):hover {
+    background: #633cce;
+    color: #ffffff;
+    border-color: #633cce;
+  }
+  .p-button.p-button-help:not(:disabled):focus, .p-button-group.p-button-help > .p-button:not(:disabled):focus, .p-splitbutton.p-button-help > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-help:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #c8bbee;
+  }
+  .p-button.p-button-help:not(:disabled):active, .p-button-group.p-button-help > .p-button:not(:disabled):active, .p-splitbutton.p-button-help > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-help:not(:disabled):active {
+    background: #5530bd;
+    color: #ffffff;
+    border-color: #5530bd;
+  }
+  .p-button.p-button-help.p-button-outlined, .p-button-group.p-button-help > .p-button.p-button-outlined, .p-splitbutton.p-button-help > .p-button.p-button-outlined, .p-fileupload-choose.p-button-help.p-button-outlined {
+    background-color: transparent;
+    color: #7654d4;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):hover {
+    background: rgba(118, 84, 212, 0.04);
+    color: #7654d4;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-outlined:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-outlined:not(:disabled):active {
+    background: rgba(118, 84, 212, 0.16);
+    color: #7654d4;
+    border: 2px solid;
+  }
+  .p-button.p-button-help.p-button-text, .p-button-group.p-button-help > .p-button.p-button-text, .p-splitbutton.p-button-help > .p-button.p-button-text, .p-fileupload-choose.p-button-help.p-button-text {
+    background-color: transparent;
+    color: #7654d4;
+    border-color: transparent;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):hover, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):hover {
+    background: rgba(118, 84, 212, 0.04);
+    border-color: transparent;
+    color: #7654d4;
+  }
+  .p-button.p-button-help.p-button-text:not(:disabled):active, .p-button-group.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-help > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-help.p-button-text:not(:disabled):active {
+    background: rgba(118, 84, 212, 0.16);
+    border-color: transparent;
+    color: #7654d4;
+  }
+  .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
+    color: #ffffff;
+    background: #d45472;
+    border: 1px solid #d45472;
+  }
+  .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
+    background: #ce3c5e;
+    color: #ffffff;
+    border-color: #ce3c5e;
+  }
+  .p-button.p-button-danger:not(:disabled):focus, .p-button-group.p-button-danger > .p-button:not(:disabled):focus, .p-splitbutton.p-button-danger > .p-button:not(:disabled):focus, .p-fileupload-choose.p-button-danger:not(:disabled):focus {
+    box-shadow: 0 0 0 0.1rem #eebbc7;
+  }
+  .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
+    background: #bd3051;
+    color: #ffffff;
+    border-color: #bd3051;
+  }
+  .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
+    background-color: transparent;
+    color: #d45472;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
+    background: rgba(212, 84, 114, 0.04);
+    color: #d45472;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-outlined:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):active {
+    background: rgba(212, 84, 114, 0.16);
+    color: #d45472;
+    border: 2px solid;
+  }
+  .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
+    background-color: transparent;
+    color: #d45472;
+    border-color: transparent;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
+    background: rgba(212, 84, 114, 0.04);
+    border-color: transparent;
+    color: #d45472;
+  }
+  .p-button.p-button-danger.p-button-text:not(:disabled):active, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):active, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):active {
+    background: rgba(212, 84, 114, 0.16);
+    border-color: transparent;
+    color: #d45472;
+  }
+  .p-button.p-button-contrast, .p-button-group.p-button-contrast > .p-button, .p-splitbutton.p-button-contrast > .p-button {
+    color: #ffffff;
+    background: #3b3b3b;
+    border: 1px solid #3b3b3b;
+  }
+  .p-button.p-button-contrast:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):hover {
+    background: #585858;
+    color: #ffffff;
+    border-color: #585858;
+  }
+  .p-button.p-button-contrast:not(:disabled):focus, .p-button-group.p-button-contrast > .p-button:not(:disabled):focus, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):focus {
+    box-shadow: none;
+  }
+  .p-button.p-button-contrast:not(:disabled):active, .p-button-group.p-button-contrast > .p-button:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button:not(:disabled):active {
+    background: #6c6c6c;
+    color: #ffffff;
+    border-color: #6c6c6c;
+  }
+  .p-button.p-button-contrast.p-button-outlined, .p-button-group.p-button-contrast > .p-button.p-button-outlined, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined {
+    background-color: transparent;
+    color: #3b3b3b;
+    border: 2px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):hover {
+    background: rgba(59, 59, 59, 0.04);
+    color: #3b3b3b;
+    border: 2px solid;
+  }
+  .p-button.p-button-contrast.p-button-outlined:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-outlined:not(:disabled):active {
+    background: rgba(59, 59, 59, 0.16);
+    color: #3b3b3b;
+    border: 2px solid;
+  }
+  .p-button.p-button-contrast.p-button-text, .p-button-group.p-button-contrast > .p-button.p-button-text, .p-splitbutton.p-button-contrast > .p-button.p-button-text {
+    background-color: transparent;
+    color: #3b3b3b;
+    border-color: transparent;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):hover, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):hover {
+    background: rgba(59, 59, 59, 0.04);
+    border-color: transparent;
+    color: #3b3b3b;
+  }
+  .p-button.p-button-contrast.p-button-text:not(:disabled):active, .p-button-group.p-button-contrast > .p-button.p-button-text:not(:disabled):active, .p-splitbutton.p-button-contrast > .p-button.p-button-text:not(:disabled):active {
+    background: rgba(59, 59, 59, 0.16);
+    border-color: transparent;
+    color: #3b3b3b;
+  }
+  .p-button.p-button-link {
+    color: #3c5ece;
+    background: transparent;
+    border: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover {
+    background: transparent;
+    color: #3c5ece;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):hover .p-button-label {
+    text-decoration: underline;
+  }
+  .p-button.p-button-link:not(:disabled):focus {
+    background: transparent;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+    border-color: transparent;
+  }
+  .p-button.p-button-link:not(:disabled):active {
+    background: transparent;
+    color: #3c5ece;
+    border-color: transparent;
+  }
+  .p-splitbutton {
+    border-radius: 6px;
+  }
+  .p-splitbutton.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #5472d4;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(84, 114, 212, 0.04);
+    color: #5472d4;
+  }
+  .p-splitbutton.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(84, 114, 212, 0.16);
+    color: #5472d4;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button {
+    color: #898989;
+    border-color: #898989;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):hover {
+    background: #edf0fa;
+    color: #898989;
+  }
+  .p-splitbutton.p-button-outlined.p-button-plain > .p-button:not(:disabled):active {
+    background: #ebebeb;
+    color: #898989;
+  }
+  .p-splitbutton.p-button-text > .p-button {
+    background-color: transparent;
+    color: #5472d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(84, 114, 212, 0.04);
+    color: #5472d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(84, 114, 212, 0.16);
+    color: #5472d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button {
+    color: #898989;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):hover {
+    background: #edf0fa;
+    color: #898989;
+  }
+  .p-splitbutton.p-button-text.p-button-plain > .p-button:not(:disabled):active {
+    background: #ebebeb;
+    color: #898989;
+  }
+  .p-splitbutton.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-splitbutton.p-button-rounded {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-rounded > .p-button {
+    border-radius: 2rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button {
+    font-size: 0.875rem;
+    padding: 0.4375rem 0.875rem;
+  }
+  .p-splitbutton.p-button-sm > .p-button .p-button-icon {
+    font-size: 0.875rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button {
+    font-size: 1.25rem;
+    padding: 0.625rem 1.25rem;
+  }
+  .p-splitbutton.p-button-lg > .p-button.p-button-icon-only {
+    width: auto;
+  }
+  .p-splitbutton.p-button-lg > .p-button .p-button-icon {
+    font-size: 1.25rem;
+  }
+  .p-splitbutton .p-splitbutton-menubutton,
+  .p-splitbutton .p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+  .p-splitbutton .p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #8191a6;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(129, 145, 166, 0.04);
+    color: #8191a6;
+  }
+  .p-splitbutton.p-button-secondary.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(129, 145, 166, 0.16);
+    color: #8191a6;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button {
+    background-color: transparent;
+    color: #8191a6;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(129, 145, 166, 0.04);
+    border-color: transparent;
+    color: #8191a6;
+  }
+  .p-splitbutton.p-button-secondary.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(129, 145, 166, 0.16);
+    border-color: transparent;
+    color: #8191a6;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #35a4cc;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-info.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button {
+    background-color: transparent;
+    color: #35a4cc;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(53, 164, 204, 0.04);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-info.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(53, 164, 204, 0.16);
+    border-color: transparent;
+    color: #35a4cc;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #8bae2c;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(139, 174, 44, 0.04);
+    color: #8bae2c;
+  }
+  .p-splitbutton.p-button-success.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(139, 174, 44, 0.16);
+    color: #8bae2c;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button {
+    background-color: transparent;
+    color: #8bae2c;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(139, 174, 44, 0.04);
+    border-color: transparent;
+    color: #8bae2c;
+  }
+  .p-splitbutton.p-button-success.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(139, 174, 44, 0.16);
+    border-color: transparent;
+    color: #8bae2c;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #ff922a;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(255, 146, 42, 0.04);
+    color: #ff922a;
+  }
+  .p-splitbutton.p-button-warning.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(255, 146, 42, 0.16);
+    color: #ff922a;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button {
+    background-color: transparent;
+    color: #ff922a;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(255, 146, 42, 0.04);
+    border-color: transparent;
+    color: #ff922a;
+  }
+  .p-splitbutton.p-button-warning.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(255, 146, 42, 0.16);
+    border-color: transparent;
+    color: #ff922a;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #7654d4;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(118, 84, 212, 0.04);
+    color: #7654d4;
+  }
+  .p-splitbutton.p-button-help.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(118, 84, 212, 0.16);
+    color: #7654d4;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button {
+    background-color: transparent;
+    color: #7654d4;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(118, 84, 212, 0.04);
+    border-color: transparent;
+    color: #7654d4;
+  }
+  .p-splitbutton.p-button-help.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(118, 84, 212, 0.16);
+    border-color: transparent;
+    color: #7654d4;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button {
+    background-color: transparent;
+    color: #d45472;
+    border: 2px solid;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):hover {
+    background: rgba(212, 84, 114, 0.04);
+    color: #d45472;
+  }
+  .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
+    background: rgba(212, 84, 114, 0.16);
+    color: #d45472;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button {
+    background-color: transparent;
+    color: #d45472;
+    border-color: transparent;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):hover {
+    background: rgba(212, 84, 114, 0.04);
+    border-color: transparent;
+    color: #d45472;
+  }
+  .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active {
+    background: rgba(212, 84, 114, 0.16);
+    border-color: transparent;
+    color: #d45472;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon {
+    font-size: 1.3rem;
+  }
+  .p-speeddial-button.p-button.p-button-icon-only .p-button-icon.p-icon {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+  .p-speeddial-list {
+    outline: 0 none;
+  }
+  .p-speeddial-action {
+    width: 3rem;
+    height: 3rem;
+    background: #6c6c6c;
+    color: #fff;
+  }
+  .p-speeddial-action:hover {
+    background: #585858;
+    color: #fff;
+  }
+  .p-speeddial-direction-up .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-up .p-speeddial-item:first-child {
+    margin-bottom: 0.5rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item {
+    margin: 0.25rem;
+  }
+  .p-speeddial-direction-down .p-speeddial-item:first-child {
+    margin-top: 0.5rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-left .p-speeddial-item:first-child {
+    margin-right: 0.5rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item {
+    margin: 0 0.25rem;
+  }
+  .p-speeddial-direction-right .p-speeddial-item:first-child {
+    margin-left: 0.5rem;
+  }
+  .p-speeddial-circle .p-speeddial-item,
+  .p-speeddial-semi-circle .p-speeddial-item,
+  .p-speeddial-quarter-circle .p-speeddial-item {
+    margin: 0;
+  }
+  .p-speeddial-circle .p-speeddial-item:first-child, .p-speeddial-circle .p-speeddial-item:last-child,
+  .p-speeddial-semi-circle .p-speeddial-item:first-child,
+  .p-speeddial-semi-circle .p-speeddial-item:last-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:first-child,
+  .p-speeddial-quarter-circle .p-speeddial-item:last-child {
+    margin: 0;
+  }
+  .p-speeddial-mask {
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:enabled:hover,
+  .p-carousel .p-carousel-content .p-carousel-next:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev:focus-visible,
+  .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-carousel .p-carousel-content .p-carousel-prev,
+  .p-carousel .p-carousel-content .p-carousel-next {
+    margin: 0.5rem;
+  }
+  .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: #edf0fa;
+    width: 2rem;
+    height: 0.5rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 0;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator button:hover {
+    background: #ebebeb;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-datatable .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datatable .p-datatable-header {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-footer {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datatable .p-datatable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: #6c6c6c;
+    background: #ffffff;
+    transition: box-shadow 0.3s;
+  }
+  .p-datatable .p-datatable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: #6c6c6c;
+    background: #ffffff;
+  }
+  .p-datatable .p-sortable-column .p-sortable-column-icon {
+    color: #898989;
+    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: #585858;
+    background: #ced6f1;
+    margin-left: 0.5rem;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-datatable .p-sortable-column:not(.p-highlight):not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #898989;
+  }
+  .p-datatable .p-sortable-column.p-highlight {
+    background: #ffffff;
+    color: #5472d4;
+  }
+  .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #5472d4;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover {
+    background: #edf0fa;
+    color: #5472d4;
+  }
+  .p-datatable .p-sortable-column.p-highlight:not(.p-sortable-disabled):hover .p-sortable-column-icon {
+    color: #5472d4;
+  }
+  .p-datatable .p-sortable-column:focus-visible {
+    box-shadow: inset 0 0 0 0.15rem #bbc7ee;
+    outline: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr {
+    background: #ffffff;
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+  }
+  .p-datatable .p-datatable-tbody > tr > td {
+    text-align: left;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+  }
+  .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: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .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: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-datatable .p-datatable-tbody > tr > td .p-row-toggler:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-init:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save:focus-visible,
+  .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .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: 600;
+  }
+  .p-datatable .p-datatable-tbody > tr > td.p-highlight {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-highlight-contextmenu {
+    outline: 0.15rem solid #bbc7ee;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #ced6f1;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #ced6f1;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-datatable.p-datatable-selectable .p-datatable-tbody > tr.p-selectable-row:focus-visible {
+    outline: 0.15rem solid #bbc7ee;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:not(.p-highlight):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-datatable.p-datatable-selectable-cell .p-datatable-tbody > tr.p-selectable-row > td.p-selectable-cell:focus-visible {
+    outline: 0.15rem solid #bbc7ee;
+    outline-offset: -0.15rem;
+  }
+  .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):not(.p-datatable-emptymessage):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-datatable .p-column-resizer-helper {
+    background: #5472d4;
+  }
+  .p-datatable .p-datatable-scrollable-header,
+  .p-datatable .p-datatable-scrollable-footer {
+    background: #ffffff;
+  }
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+  .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    background-color: #ffffff;
+  }
+  .p-datatable .p-datatable-loading-icon {
+    font-size: 2rem;
+  }
+  .p-datatable .p-datatable-loading-icon.p-icon {
+    width: 2rem;
+    height: 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 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead > tr > th:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    border-width: 1px 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    border-width: 1px 1px 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    border-width: 1px 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-tfoot > tr > td:last-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    border-width: 0 0 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td:last-child {
+    border-width: 0 1px 1px 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    border-width: 0 0 0 1px;
+  }
+  .p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td:last-child {
+    border-width: 0 1px 0 1px;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #585858;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #585858;
+  }
+  .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-header {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-sm .p-datatable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable.p-datatable-lg .p-datatable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-datatable-drag-selection-helper {
+    background: rgba(84, 114, 212, 0.16);
+  }
+  .p-dataview .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-dataview .p-dataview-header {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-dataview .p-dataview-content {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-dataview .p-dataview-footer {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-dataview .p-dataview-loading-icon {
+    font-size: 2rem;
+  }
+  .p-dataview .p-dataview-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-datascroller .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-datascroller .p-datascroller-header {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-datascroller .p-datascroller-content {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    padding: 0;
+  }
+  .p-datascroller.p-datascroller-inline .p-datascroller-list > li {
+    border: solid #f5f5f5;
+    border-width: 0 0 1px 0;
+  }
+  .p-datascroller .p-datascroller-footer {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .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: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-column-filter-menu-button:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-column-filter-menu-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-column-filter-clear-button {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-column-filter-clear-button:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-column-filter-clear-button:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-column-filter-overlay {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    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);
+    min-width: 12.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item {
+    margin: 0 0 4px 0;
+    padding: 0.5rem 1rem;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #bbc7ee;
+  }
+  .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-operator {
+    padding: 0.5rem 1.5rem;
+    border-bottom: 0 none;
+    color: #6c6c6c;
+    background: #ffffff;
+    margin: 0;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-constraint {
+    padding: 1rem;
+    border-bottom: 1px solid #ebebeb;
+  }
+  .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.5rem 1rem;
+  }
+  .p-column-filter-overlay-menu .p-column-filter-buttonbar {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls {
+    padding: 1rem;
+  }
+  .p-orderlist .p-orderlist-controls .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-orderlist .p-orderlist-header {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-orderlist .p-orderlist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 2px solid #ebebeb;
+    border-bottom: 0 none;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
+    right: 0.75rem;
+    color: #898989;
+  }
+  .p-orderlist .p-orderlist-list {
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    padding: 0.5rem 0.5rem;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item {
+    padding: 0.5rem 1rem;
+    margin: 0 0 4px 0;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-focus {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even) {
+    background: #fcfcfc;
+  }
+  .p-orderlist.p-orderlist-striped .p-orderlist-list .p-orderlist-item:nth-child(even):hover {
+    background: #edf0fa;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i {
+    color: #6b83d5;
+  }
+  .p-organizationchart .p-organizationchart-line-down {
+    background: #ebebeb;
+  }
+  .p-organizationchart .p-organizationchart-line-left {
+    border-right: 2px solid #ebebeb;
+    border-color: #ebebeb;
+  }
+  .p-organizationchart .p-organizationchart-line-top {
+    border-top: 2px solid #ebebeb;
+    border-color: #ebebeb;
+  }
+  .p-organizationchart .p-organizationchart-node-content {
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    padding: 1rem;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-paginator {
+    background: #ffffff;
+    color: #898989;
+    border: solid #ebebeb;
+    border-width: 2px;
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+  }
+  .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: #898989;
+    min-width: 2.857rem;
+    height: 2.857rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .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: #edf0fa;
+    border-color: transparent;
+    color: #6c6c6c;
+  }
+  .p-paginator .p-paginator-first {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-paginator .p-paginator-last {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-paginator .p-dropdown {
+    margin-left: 0.5rem;
+    height: 2.857rem;
+  }
+  .p-paginator .p-dropdown .p-dropdown-label {
+    padding-right: 0;
+  }
+  .p-paginator .p-paginator-page-input {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-paginator .p-paginator-page-input .p-inputtext {
+    max-width: 2.857rem;
+  }
+  .p-paginator .p-paginator-current {
+    background-color: transparent;
+    border: 0 none;
+    color: #898989;
+    min-width: 2.857rem;
+    height: 2.857rem;
+    margin: 0.143rem;
+    padding: 0 0.5rem;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page {
+    background-color: transparent;
+    border: 0 none;
+    color: #898989;
+    min-width: 2.857rem;
+    height: 2.857rem;
+    margin: 0.143rem;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
+    background: #ced6f1;
+    border-color: #ced6f1;
+    color: #585858;
+  }
+  .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
+    background: #edf0fa;
+    border-color: transparent;
+    color: #6c6c6c;
+  }
+  .p-picklist .p-picklist-buttons {
+    padding: 1rem;
+  }
+  .p-picklist .p-picklist-buttons .p-button {
+    margin-bottom: 0.5rem;
+  }
+  .p-picklist .p-picklist-header {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    padding: 1rem;
+    font-weight: 600;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-picklist .p-picklist-filter-container {
+    padding: 1rem;
+    background: #ffffff;
+    border: 2px solid #ebebeb;
+    border-bottom: 0 none;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-input {
+    padding-right: 1.75rem;
+  }
+  .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
+    right: 0.75rem;
+    color: #898989;
+  }
+  .p-picklist .p-picklist-list {
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    padding: 0.5rem 0.5rem;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    outline: 0 none;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item {
+    padding: 0.5rem 1rem;
+    margin: 0 0 4px 0;
+    border: 0 none;
+    color: #6c6c6c;
+    background: transparent;
+    transition: transform 0.3s, box-shadow 0.3s;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-focus {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight {
+    color: #585858;
+    background: #ced6f1;
+  }
+  .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus {
+    background: #aebbe8;
+  }
+  .p-tree-container {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    overflow: auto;
+  }
+  .p-treenode-children {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-treenode-selectable {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-tree-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    position: relative;
+    flex-shrink: 0;
+  }
+  .p-treenode-leaf > .p-treenode-content .p-tree-toggler {
+    visibility: hidden;
+  }
+  .p-treenode-content {
+    display: flex;
+    align-items: center;
+  }
+  .p-tree-filter {
+    width: 100%;
+  }
+  .p-tree-filter-container {
+    position: relative;
+    display: block;
+    width: 100%;
+  }
+  .p-tree-filter-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+  }
+  .p-tree-loading {
+    position: relative;
+    min-height: 4rem;
+  }
+  .p-tree .p-tree-loading-overlay {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tree {
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    padding: 1rem;
+    border-radius: 6px;
+  }
+  .p-tree .p-tree-container .p-treenode {
+    padding: 0.143rem;
+    outline: 0 none;
+  }
+  .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #bbc7ee;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content {
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+    padding: 0.5rem;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler {
+    margin-right: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
+    margin-right: 0.5rem;
+    color: #898989;
+  }
+  .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: #6c6c6c;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .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: #585858;
+  }
+  .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: #585858;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-tree .p-tree-container .p-treenode .p-treenode-content.p-treenode-dragover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .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: #898989;
+  }
+  .p-tree .p-treenode-children {
+    padding: 0 0 0 1rem;
+  }
+  .p-tree .p-tree-loading-icon {
+    font-size: 2rem;
+  }
+  .p-tree .p-tree-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-tree .p-treenode-droppoint {
+    height: 0.5rem;
+  }
+  .p-tree .p-treenode-droppoint.p-treenode-droppoint-active {
+    background: #889cdd;
+  }
+  .p-treetable {
+    position: relative;
+  }
+  .p-treetable > .p-treetable-wrapper {
+    overflow: auto;
+  }
+  .p-treetable table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+  }
+  .p-treetable .p-sortable-column {
+    cursor: pointer;
+    user-select: none;
+  }
+  .p-treetable-selectable .p-treetable-tbody > tr {
+    cursor: pointer;
+  }
+  .p-treetable-toggler {
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    vertical-align: middle;
+    overflow: hidden;
+    position: relative;
+  }
+  .p-treetable-toggler + .p-checkbox {
+    vertical-align: middle;
+  }
+  .p-treetable-toggler + .p-checkbox + span {
+    vertical-align: middle;
+  }
+  /* Resizable */
+  .p-treetable-resizable > .p-treetable-wrapper {
+    overflow-x: auto;
+  }
+  .p-treetable-resizable .p-treetable-thead > tr > th,
+  .p-treetable-resizable .p-treetable-tfoot > tr > td,
+  .p-treetable-resizable .p-treetable-tbody > tr > td {
+    overflow: hidden;
+  }
+  .p-treetable-resizable .p-resizable-column {
+    background-clip: padding-box;
+    position: relative;
+  }
+  .p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
+    display: none;
+  }
+  .p-treetable .p-column-resizer {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0;
+    width: 0.5rem;
+    height: 100%;
+    padding: 0px;
+    cursor: col-resize;
+    border: 1px solid transparent;
+  }
+  .p-treetable .p-column-resizer-helper {
+    width: 1px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+  /* Scrollable */
+  .p-treetable-scrollable-wrapper {
+    position: relative;
+  }
+  .p-treetable-scrollable-header,
+  .p-treetable-scrollable-footer {
+    overflow: hidden;
+    border: 0 none;
+  }
+  .p-treetable-scrollable-body {
+    overflow: auto;
+    position: relative;
+  }
+  .p-treetable-virtual-table {
+    position: absolute;
+  }
+  /* Frozen Columns */
+  .p-treetable-frozen-view .p-treetable-scrollable-body {
+    overflow: hidden;
+  }
+  .p-treetable-unfrozen-view {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+  }
+  /* Reorder */
+  .p-treetable-reorder-indicator-up,
+  .p-treetable-reorder-indicator-down {
+    position: absolute;
+    display: none;
+  }
+  /* Loader */
+  .p-treetable .p-treetable-loading-overlay {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+  /* Alignment */
+  .p-treetable .p-treetable-thead > tr > th.p-align-left > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-left,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-right > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-right,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .p-treetable .p-treetable-thead > tr > th.p-align-center > .p-column-header-content,
+  .p-treetable .p-treetable-tbody > tr > td.p-align-center,
+  .p-treetable .p-treetable-tfoot > tr > td.p-align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .p-treetable .p-paginator-top {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-paginator-bottom {
+    border-width: 0 0 2px 0;
+    border-radius: 0;
+  }
+  .p-treetable .p-treetable-header {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-footer {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+    font-weight: 600;
+  }
+  .p-treetable .p-treetable-thead > tr > th {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: #6c6c6c;
+    background: #ffffff;
+    transition: box-shadow 0.3s;
+  }
+  .p-treetable .p-treetable-tfoot > tr > td {
+    text-align: left;
+    padding: 1rem 1rem;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    font-weight: 600;
+    color: #6c6c6c;
+    background: #ffffff;
+  }
+  .p-treetable .p-sortable-column {
+    outline-color: #bbc7ee;
+  }
+  .p-treetable .p-sortable-column .p-sortable-column-icon {
+    color: #898989;
+    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: #585858;
+    background: #ced6f1;
+    margin-left: 0.5rem;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
+    color: #898989;
+  }
+  .p-treetable .p-sortable-column.p-highlight {
+    background: #ffffff;
+    color: #5472d4;
+  }
+  .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
+    color: #5472d4;
+  }
+  .p-treetable .p-treetable-tbody > tr {
+    background: #ffffff;
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td {
+    text-align: left;
+    border: 2px solid #f5f5f5;
+    border-width: 0 0 2px 0;
+    padding: 1rem 1rem;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler {
+    margin-right: 0.5rem;
+  }
+  .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: #6c6c6c;
+  }
+  .p-treetable .p-treetable-tbody > tr:focus-visible {
+    outline: 0.15rem solid #bbc7ee;
+    outline-offset: -0.15rem;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler {
+    color: #585858;
+  }
+  .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
+    color: #585858;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-treetable.p-treetable-selectable .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler, .p-treetable.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
+    color: #6c6c6c;
+  }
+  .p-treetable .p-column-resizer-helper {
+    background: #5472d4;
+  }
+  .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-loading-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-treetable.p-treetable-gridlines .p-treetable-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-striped .p-treetable-tbody > tr.p-row-odd {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler {
+    color: #585858;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd.p-highlight .p-row-toggler:hover {
+    color: #585858;
+  }
+  .p-treetable.p-treetable-striped .p-treetable-tbody > tr.p-row-odd + .p-row-expanded {
+    background: #fcfcfc;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-header {
+    padding: 0.875rem 0.875rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-sm .p-treetable-footer {
+    padding: 0.5rem 0.5rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-header {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tbody > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-tfoot > tr > td {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-treetable.p-treetable-lg .p-treetable-footer {
+    padding: 1.25rem 1.25rem;
+  }
+  .p-timeline .p-timeline-event-marker {
+    border: 2px solid #5472d4;
+    border-radius: 50%;
+    width: 1rem;
+    height: 1rem;
+    background-color: #ffffff;
+  }
+  .p-timeline .p-timeline-event-connector {
+    background-color: #ebebeb;
+  }
+  .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-accordion .p-accordion-header .p-accordion-header-link {
+    padding: 1rem;
+    border: 2px solid #ebebeb;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
+    background: #edf0fa;
+    border-color: #ebebeb;
+    color: #6c6c6c;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
+    background: #ffffff;
+    border-color: #ebebeb;
+    color: #6c6c6c;
+    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: #ebebeb;
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-accordion .p-accordion-content {
+    padding: 1rem;
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .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: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-header-link {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-accordion .p-accordion-tab:last-child .p-accordion-header:not(.p-highlight) .p-accordion-content {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-card {
+    background: #ffffff;
+    color: #6c6c6c;
+    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: 6px;
+  }
+  .p-card .p-card-body {
+    padding: 1rem;
+  }
+  .p-card .p-card-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+  .p-card .p-card-subtitle {
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    color: #898989;
+  }
+  .p-card .p-card-content {
+    padding: 1rem 0;
+  }
+  .p-card .p-card-footer {
+    padding: 1rem 0 0 0;
+  }
+  .p-fieldset {
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    border-radius: 6px;
+  }
+  .p-fieldset .p-fieldset-legend {
+    padding: 1rem;
+    border: 2px solid #ebebeb;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+    border-radius: 6px;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend {
+    padding: 0;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
+    padding: 1rem;
+    color: #6c6c6c;
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-fieldset.p-fieldset-toggleable .p-fieldset-legend:hover {
+    background: #edf0fa;
+    border-color: #ebebeb;
+    color: #6c6c6c;
+  }
+  .p-fieldset .p-fieldset-content {
+    padding: 1rem;
+  }
+  .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 #ebebeb;
+  }
+  .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 #ebebeb;
+  }
+  .p-divider.p-divider-vertical .p-divider-content {
+    padding: 0.5rem 0;
+  }
+  .p-panel .p-panel-header {
+    border: 2px solid #ebebeb;
+    padding: 1rem;
+    background: #ffffff;
+    color: #6c6c6c;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panel .p-panel-header .p-panel-title {
+    font-weight: 600;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-panel.p-panel-toggleable .p-panel-header {
+    padding: 0.5rem 1rem;
+  }
+  .p-panel:has(> .p-panel-footer) .p-panel-content {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .p-panel .p-panel-content {
+    padding: 1rem;
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-footer {
+    padding: 0.5rem 1rem;
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    border-top: 0 none;
+  }
+  .p-splitter {
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    border-radius: 6px;
+    color: #6c6c6c;
+  }
+  .p-splitter .p-splitter-gutter {
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    background: #f5f5f5;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    background: #ebebeb;
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-splitter .p-splitter-gutter-resizing {
+    background: #ebebeb;
+  }
+  .p-stepper .p-stepper-nav {
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+  .p-stepper .p-stepper-header {
+    padding: 0.5rem;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: #ffffff;
+    outline-color: transparent;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-number {
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-width: 2px;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action .p-stepper-title {
+    margin-left: 0.5rem;
+    color: #898989;
+    font-weight: 600;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-stepper .p-stepper-header .p-stepper-action:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-number {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-stepper .p-stepper-header.p-highlight .p-stepper-title {
+    color: #6c6c6c;
+  }
+  .p-stepper .p-stepper-header:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-stepper .p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
+    background-color: #5472d4;
+  }
+  .p-stepper .p-stepper-panels {
+    background: #ffffff;
+    padding: 1rem;
+    color: #6c6c6c;
+  }
+  .p-stepper .p-stepper-separator {
+    background-color: #ebebeb;
+    width: 100%;
+    height: 2px;
+    margin-inline-start: 1rem;
+    transition: box-shadow 0.3s;
+  }
+  .p-stepper.p-stepper-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-toggleable-content {
+    display: flex;
+    flex: 1 1 auto;
+    background: #ffffff;
+    color: #6c6c6c;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel {
+    display: flex;
+    flex-direction: column;
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel.p-stepper-panel-active {
+    flex: 1 1 auto;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-header {
+    flex: initial;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-content {
+    width: 100%;
+    padding-left: 1rem;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel .p-stepper-separator {
+    flex: 0 0 auto;
+    width: 2px;
+    height: auto;
+    margin-inline-start: calc(1.75rem + 2px);
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
+    background-color: #5472d4;
+  }
+  .p-stepper.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {
+    padding-left: 3rem;
+  }
+  .p-scrollpanel .p-scrollpanel-bar {
+    background: #f5f5f5;
+    border: 0 none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-tabview-nav-container {
+    position: relative;
+  }
+  .p-tabview-scrollable .p-tabview-nav-container {
+    overflow: hidden;
+  }
+  .p-tabview-nav-content {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    overscroll-behavior: contain auto;
+    position: relative;
+  }
+  .p-tabview-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex: 1 1 auto;
+  }
+  .p-tabview-nav-link {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    overflow: hidden;
+  }
+  .p-tabview-ink-bar {
+    display: none;
+    z-index: 1;
+  }
+  .p-tabview-nav-link:focus {
+    z-index: 1;
+  }
+  .p-tabview-close {
+    z-index: 1;
+  }
+  .p-tabview-title {
+    line-height: 1;
+    white-space: nowrap;
+  }
+  .p-tabview-nav-btn {
+    position: absolute;
+    top: 0;
+    z-index: 2;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p-tabview-nav-prev {
+    left: 0;
+  }
+  .p-tabview-nav-next {
+    right: 0;
+  }
+  .p-tabview-nav-content::-webkit-scrollbar {
+    display: none;
+  }
+  .p-tabview .p-tabview-nav {
+    background: #ffffff;
+    border: 1px solid #ebebeb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabview .p-tabview-nav li {
+    margin-right: 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link {
+    border: solid #ebebeb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #ebebeb transparent;
+    background: #ffffff;
+    color: #898989;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.3s;
+    margin: 0 0 -2px 0;
+  }
+  .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #ced6f1;
+    color: #898989;
+  }
+  .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: #ffffff;
+    border-color: #5472d4;
+    color: #5472d4;
+  }
+  .p-tabview .p-tabview-close {
+    margin-left: 0.5rem;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link {
+    background: #ffffff;
+    color: #5472d4;
+    width: 2.857rem;
+    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);
+    border-radius: 0;
+  }
+  .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-tabview .p-tabview-panels {
+    background: #ffffff;
+    padding: 1rem;
+    border: 0 none;
+    color: #6c6c6c;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-toolbar {
+    background: #ffffff;
+    border: 2px solid #ebebeb;
+    padding: 1rem;
+    border-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-toolbar .p-toolbar-separator {
+    margin: 0 0.5rem;
+  }
+  .p-confirm-popup {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-confirm-popup .p-confirm-popup-content {
+    padding: 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer {
+    text-align: right;
+    padding: 0 1rem 1rem 1rem;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-confirm-popup .p-confirm-popup-footer button:last-child {
+    margin: 0;
+  }
+  .p-confirm-popup:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-confirm-popup:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .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-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-confirm-popup .p-confirm-popup-message {
+    margin-left: 1rem;
+  }
+  .p-dialog {
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+    border: 0 none;
+  }
+  .p-dialog .p-dialog-header {
+    border-bottom: 0 none;
+    background: #ffffff;
+    color: #6c6c6c;
+    padding: 1.5rem;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-header .p-dialog-title {
+    font-weight: 600;
+    font-size: 1.25rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon {
+    margin-right: 0.5rem;
+  }
+  .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
+    margin-right: 0;
+  }
+  .p-dialog .p-dialog-content {
+    background: #ffffff;
+    color: #6c6c6c;
+    padding: 0 1.5rem 2rem 1.5rem;
+  }
+  .p-dialog .p-dialog-content:last-of-type {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer {
+    border-top: 0 none;
+    background: #ffffff;
+    color: #6c6c6c;
+    padding: 0 1.5rem 1.5rem 1.5rem;
+    text-align: right;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-dialog .p-dialog-footer button {
+    margin: 0 0.5rem 0 0;
+    width: auto;
+  }
+  .p-dialog.p-dialog-maximized .p-dialog-header, .p-dialog.p-dialog-maximized .p-dialog-content:last-of-type {
+    border-radius: 0;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
+    font-size: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-dialog.p-confirm-dialog .p-confirm-dialog-message {
+    margin-left: 1rem;
+  }
+  .p-overlaypanel {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    border-radius: 6px;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-overlaypanel .p-overlaypanel-content {
+    padding: 1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close {
+    background: #5472d4;
+    color: #ffffff;
+    width: 2rem;
+    height: 2rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 50%;
+    position: absolute;
+    top: -1rem;
+    right: -1rem;
+  }
+  .p-overlaypanel .p-overlaypanel-close:enabled:hover {
+    background: #4868d1;
+    color: #ffffff;
+  }
+  .p-overlaypanel:after {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #ffffff;
+  }
+  .p-overlaypanel:before {
+    border: solid transparent;
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #f2f2f2;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:after {
+    border-top-color: #ffffff;
+  }
+  .p-overlaypanel.p-overlaypanel-flipped:before {
+    border-top-color: #ffffff;
+  }
+  .p-sidebar {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 0 none;
+    box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+  }
+  .p-sidebar .p-sidebar-header {
+    padding: 1rem;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
+    color: #6c6c6c;
+    border-color: transparent;
+    background: #edf0fa;
+  }
+  .p-sidebar .p-sidebar-header .p-sidebar-close:focus-visible,
+  .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-sidebar .p-sidebar-header + .p-sidebar-content {
+    padding-top: 0;
+  }
+  .p-sidebar .p-sidebar-content {
+    padding: 1rem;
+  }
+  .p-tooltip .p-tooltip-text {
+    background: #585858;
+    color: #ffffff;
+    padding: 0.5rem 0.75rem;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-tooltip.p-tooltip-right .p-tooltip-arrow {
+    border-right-color: #585858;
+  }
+  .p-tooltip.p-tooltip-left .p-tooltip-arrow {
+    border-left-color: #585858;
+  }
+  .p-tooltip.p-tooltip-top .p-tooltip-arrow {
+    border-top-color: #585858;
+  }
+  .p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
+    border-bottom-color: #585858;
+  }
+  .p-fileupload .p-fileupload-buttonbar {
+    background: #ffffff;
+    padding: 1rem;
+    border: 2px solid #ebebeb;
+    color: #6c6c6c;
+    border-bottom: 0 none;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    gap: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-buttonbar .p-button {
+    margin-right: 0.5rem;
+  }
+  .p-fileupload .p-fileupload-content {
+    background: #ffffff;
+    padding: 2rem 1rem;
+    border: 2px solid #ebebeb;
+    color: #6c6c6c;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-fileupload .p-progressbar {
+    height: 0.25rem;
+  }
+  .p-fileupload .p-fileupload-row > div {
+    padding: 1rem 1rem;
+  }
+  .p-fileupload.p-fileupload-advanced .p-message {
+    margin-top: 0;
+  }
+  .p-breadcrumb {
+    background: #ffffff;
+    border: 2px solid #ebebeb;
+    border-radius: 6px;
+    padding: 1rem;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link {
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+  }
+  .p-breadcrumb .p-breadcrumb-list li.p-menuitem-separator {
+    margin: 0 0.5rem 0 0.5rem;
+    color: #6c6c6c;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-breadcrumb .p-breadcrumb-list li:last-child .p-menuitem-icon {
+    color: #898989;
+  }
+  .p-contextmenu {
+    padding: 0.5rem 0.5rem;
+    background: #ffffff;
+    color: #6c6c6c;
+    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);
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-contextmenu .p-contextmenu-root-list {
+    outline: 0 none;
+  }
+  .p-contextmenu .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    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);
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-contextmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-contextmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-contextmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-contextmenu .p-menuitem-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-contextmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-contextmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-dock .p-dock-list-container {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 0.5rem 0.5rem;
+    border-radius: 0.5rem;
+  }
+  .p-dock .p-dock-list-container .p-dock-list {
+    outline: 0 none;
+  }
+  .p-dock .p-dock-item {
+    padding: 0.5rem;
+    border-radius: 6px;
+  }
+  .p-dock .p-dock-item.p-focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.15rem #bbc7ee;
+  }
+  .p-dock .p-dock-action {
+    width: 4rem;
+    height: 4rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-top .p-dock-item-second-next, .p-dock.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-bottom .p-dock-item-second-next {
+    margin: 0 0.9rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-top .p-dock-item-next, .p-dock.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-bottom .p-dock-item-next {
+    margin: 0 1.3rem;
+  }
+  .p-dock.p-dock-top .p-dock-item-current, .p-dock.p-dock-bottom .p-dock-item-current {
+    margin: 0 1.5rem;
+  }
+  .p-dock.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-left .p-dock-item-second-next, .p-dock.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-right .p-dock-item-second-next {
+    margin: 0.9rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-left .p-dock-item-next, .p-dock.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-right .p-dock-item-next {
+    margin: 1.3rem 0;
+  }
+  .p-dock.p-dock-left .p-dock-item-current, .p-dock.p-dock-right .p-dock-item-current {
+    margin: 1.5rem 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    overflow-x: auto;
+    width: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    margin: 0 auto;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container {
+    overflow-y: auto;
+    height: 100%;
+  }
+  .p-dock.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list, .p-dock.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    margin: auto 0;
+  }
+  .p-dock.p-dock-mobile .p-dock-list .p-dock-item {
+    transform: none;
+    margin: 0;
+  }
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-top .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-bottom .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-left .p-dock-item-current, .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-second-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-prev,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-next,
+  .p-dock.p-dock-mobile.p-dock-magnification.p-dock-right .p-dock-item-current {
+    transform: none;
+    margin: 0;
+  }
+  .p-megamenu {
+    padding: 0.5rem;
+    background: #f5f5f5;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-megamenu-root-list {
+    outline: 0 none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-megamenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-megamenu .p-megamenu-panel {
+    background: #ffffff;
+    color: #6c6c6c;
+    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-submenu-header {
+    margin: 0;
+    padding: 0.75rem 1rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-megamenu .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    width: 12.5rem;
+  }
+  .p-megamenu .p-submenu-list .p-menuitem-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-megamenu.p-megamenu-vertical {
+    width: 12.5rem;
+    padding: 0.5rem 0.5rem;
+  }
+  .p-megamenu .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-megamenu .p-megamenu-button:hover {
+    color: #898989;
+    background: #edf0fa;
+  }
+  .p-megamenu .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+    margin-left: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+    padding: 0.5rem 0.5rem;
+    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-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menu-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+    margin-left: auto;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list > .p-menuitem.p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list {
+    width: 100%;
+    position: static;
+    box-shadow: none;
+    border: 0 none;
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.3s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list .p-menuitem {
+    width: 100%;
+    position: static;
+  }
+  .p-menu {
+    padding: 0.5rem 0.5rem;
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-menu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-menu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .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 1rem;
+    color: #6c6c6c;
+    background: #ffffff;
+    font-weight: 600;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  .p-menu .p-menu-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-menubar {
+    padding: 0.5rem;
+    background: #f5f5f5;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list {
+    outline: 0 none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+    margin-left: 0.5rem;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menubar-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-menubar .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-menubar .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-menubar .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-menubar .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    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-menuitem-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-menubar .p-submenu-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:hover {
+    color: #898989;
+    background: #edf0fa;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list {
+    padding: 0.5rem 0.5rem;
+    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-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.3s;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.3s;
+    transform: rotate(90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li a {
+    padding-left: 2.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li a {
+    padding-left: 3.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li a {
+    padding-left: 5.25rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li a {
+    padding-left: 6.75rem;
+  }
+  .p-menubar.p-menubar-mobile .p-menubar-root-list ul li ul li ul li ul li ul li a {
+    padding-left: 8.25rem;
+  }
+  @media screen and (max-width: 960px) {
+    .p-menubar {
+      position: relative;
+    }
+    .p-menubar .p-menubar-button {
+      display: flex;
+      width: 2rem;
+      height: 2rem;
+      color: #898989;
+      border-radius: 50%;
+      transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    }
+    .p-menubar .p-menubar-button:hover {
+      color: #898989;
+      background: #edf0fa;
+    }
+    .p-menubar .p-menubar-button:focus {
+      outline: 0 none;
+      outline-offset: 0;
+      box-shadow: 0 0 0 0.1rem #bbc7ee;
+    }
+    .p-menubar .p-menubar-root-list {
+      position: absolute;
+      display: none;
+      padding: 0.5rem 0.5rem;
+      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 #ebebeb;
+      margin: 4px 0;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon {
+      font-size: 0.875rem;
+    }
+    .p-menubar .p-menubar-root-list .p-submenu-icon.p-icon {
+      width: 0.875rem;
+      height: 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 > .p-menuitem-content {
+      color: #6c6c6c;
+      transition: box-shadow 0.3s;
+      border-radius: 6px;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+      color: #6c6c6c;
+      padding: 0.75rem 1rem;
+      user-select: none;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #6c6c6c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+      color: #898989;
+      margin-right: 0.5rem;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #898989;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content {
+      color: #6c6c6c;
+      background: #edf0fa;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #6c6c6c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #898989;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+      background: #edf0fa;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+      color: #6c6c6c;
+      background: #e6e9f3;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+      color: #6c6c6c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+      color: #6c6c6c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+      color: #6c6c6c;
+      background: #edf0fa;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+      color: #6c6c6c;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+      color: #898989;
+    }
+    .p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
+      margin-left: auto;
+      transition: transform 0.3s;
+    }
+    .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.3s;
+      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 {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content {
+    border: 2px solid #ebebeb;
+    color: #6c6c6c;
+    background: #ffffff;
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link {
+    color: #6c6c6c;
+    padding: 1rem;
+    font-weight: 600;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header .p-panelmenu-header-content .p-panelmenu-header-link .p-menuitem-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
+    background: #edf0fa;
+    border-color: #ebebeb;
+    color: #6c6c6c;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight .p-panelmenu-header-content {
+    background: #ffffff;
+    border-color: #ebebeb;
+    color: #6c6c6c;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-color: #ebebeb;
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-panelmenu .p-panelmenu-content {
+    padding: 0.5rem 0.5rem;
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    color: #6c6c6c;
+    border-top: 0;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-panelmenu-root-list {
+    outline: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-panelmenu .p-panelmenu-content .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-right: 0.5rem;
+  }
+  .p-panelmenu .p-panelmenu-content .p-menuitem-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-panelmenu .p-panelmenu-content .p-submenu-list:not(.p-panelmenu-root-list) {
+    padding: 0 0 0 1rem;
+  }
+  .p-panelmenu .p-panelmenu-panel {
+    margin-bottom: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-header .p-panelmenu-header-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel .p-panelmenu-content {
+    border-radius: 0;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content, .p-panelmenu .p-panelmenu-panel:not(:first-child) .p-panelmenu-header:not(.p-disabled).p-highlight:hover .p-panelmenu-header-content {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header .p-panelmenu-header-content {
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-header:not(.p-highlight) .p-panelmenu-header-content {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-panelmenu .p-panelmenu-panel:last-child .p-panelmenu-content {
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-slidemenu {
+    padding: 0.5rem 0.5rem;
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-slidemenu .p-menuitem-link > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-slidemenu .p-menuitem-link.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-slidemenu .p-menuitem-link:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-slidemenu.p-slidemenu-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-slidemenu .p-slidemenu-list {
+    padding: 0.5rem 0.5rem;
+    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-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link {
+    background: #edf0fa;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-text {
+    color: #6c6c6c;
+  }
+  .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon, .p-slidemenu .p-slidemenu.p-slidemenu-active > .p-slidemenu-link .p-slidemenu-icon {
+    color: #898989;
+  }
+  .p-slidemenu .p-slidemenu-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-slidemenu .p-slidemenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-slidemenu .p-slidemenu-backward {
+    padding: 0.75rem 1rem;
+    color: #6c6c6c;
+  }
+  .p-steps .p-steps-item .p-menuitem-link {
+    background: transparent;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+    background: #ffffff;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-number {
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    background: #ffffff;
+    min-width: 2rem;
+    height: 2rem;
+    line-height: 2rem;
+    font-size: 1.143rem;
+    z-index: 1;
+    border-radius: 50%;
+  }
+  .p-steps .p-steps-item .p-menuitem-link .p-steps-title {
+    margin-top: 0.5rem;
+    color: #898989;
+  }
+  .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-number {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .p-steps .p-steps-item.p-highlight .p-steps-title {
+    font-weight: 600;
+    color: #6c6c6c;
+  }
+  .p-steps .p-steps-item:before {
+    content: " ";
+    border-top: 1px solid #ebebeb;
+    width: 100%;
+    top: 50%;
+    left: 0;
+    display: block;
+    position: absolute;
+    margin-top: -1rem;
+  }
+  .p-tabmenu .p-tabmenu-nav {
+    background: #ffffff;
+    border: 1px solid #ebebeb;
+    border-width: 0 0 2px 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+    margin-right: 0;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+    border: solid #ebebeb;
+    border-width: 0 0 2px 0;
+    border-color: transparent transparent #ebebeb transparent;
+    background: #ffffff;
+    color: #898989;
+    padding: 1rem;
+    font-weight: 600;
+    border-top-right-radius: 6px;
+    border-top-left-radius: 6px;
+    transition: box-shadow 0.3s;
+    margin: 0 0 -2px 0;
+    height: calc(100% + 2px);
+  }
+  .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-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+    background: #ffffff;
+    border-color: #ced6f1;
+    color: #898989;
+  }
+  .p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+    background: #ffffff;
+    border-color: #5472d4;
+    color: #5472d4;
+  }
+  .p-tieredmenu {
+    padding: 0.5rem 0.5rem;
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    border-radius: 6px;
+    width: 12.5rem;
+  }
+  .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-tieredmenu-root-list {
+    outline: 0 none;
+  }
+  .p-tieredmenu .p-submenu-list {
+    padding: 0.5rem 0.5rem;
+    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-content {
+    color: #6c6c6c;
+    transition: box-shadow 0.3s;
+    border-radius: 6px;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link {
+    color: #6c6c6c;
+    padding: 0.75rem 1rem;
+    user-select: none;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-menuitem-icon {
+    color: #898989;
+    margin-right: 0.5rem;
+  }
+  .p-tieredmenu .p-menuitem > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-tieredmenu .p-menuitem.p-highlight.p-focus > .p-menuitem-content {
+    background: #edf0fa;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content {
+    color: #6c6c6c;
+    background: #e6e9f3;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled).p-focus > .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    color: #6c6c6c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover {
+    color: #6c6c6c;
+    background: #edf0fa;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-text {
+    color: #6c6c6c;
+  }
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon,
+  .p-tieredmenu .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
+    color: #898989;
+  }
+  .p-tieredmenu .p-menuitem-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-tieredmenu .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-tieredmenu .p-submenu-icon.p-icon {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+  .p-inline-message {
+    padding: 0.5rem 0.75rem;
+    margin: 0;
+    border-radius: 6px;
+  }
+  .p-inline-message.p-inline-message-info {
+    background: #e1f2f7;
+    border: 4px solid #83c7e0;
+    border-width: 2px;
+    color: #585858;
+  }
+  .p-inline-message.p-inline-message-info .p-inline-message-icon {
+    color: #585858;
+  }
+  .p-inline-message.p-inline-message-success {
+    background: #f2f8e1;
+    border: 4px solid #c7e084;
+    border-width: 2px;
+    color: #585858;
+  }
+  .p-inline-message.p-inline-message-success .p-inline-message-icon {
+    color: #585858;
+  }
+  .p-inline-message.p-inline-message-warn {
+    background: #ffecdb;
+    border: 4px solid #ffb065;
+    border-width: 2px;
+    color: #585858;
+  }
+  .p-inline-message.p-inline-message-warn .p-inline-message-icon {
+    color: #585858;
+  }
+  .p-inline-message.p-inline-message-error {
+    background: #f7e1e6;
+    border: 4px solid #de8499;
+    border-width: 2px;
+    color: #585858;
+  }
+  .p-inline-message.p-inline-message-error .p-inline-message-icon {
+    color: #585858;
+  }
+  .p-inline-message .p-inline-message-icon {
+    font-size: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-inline-message .p-inline-message-icon.p-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+  .p-inline-message .p-inline-message-text {
+    font-size: 1rem;
+  }
+  .p-inline-message.p-inline-message-icon-only .p-inline-message-icon {
+    margin-right: 0;
+  }
+  .p-message {
+    margin: 1rem 0;
+    border-radius: 6px;
+  }
+  .p-message .p-message-wrapper {
+    padding: 1rem 1.5rem;
+  }
+  .p-message .p-message-close {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: transparent;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-message .p-message-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-message .p-message-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-message.p-message-info {
+    background: #e1f2f7;
+    border: 4px solid #83c7e0;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .p-message.p-message-info .p-message-icon {
+    color: #585858;
+  }
+  .p-message.p-message-info .p-message-close {
+    color: #585858;
+  }
+  .p-message.p-message-success {
+    background: #f2f8e1;
+    border: 4px solid #c7e084;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .p-message.p-message-success .p-message-icon {
+    color: #585858;
+  }
+  .p-message.p-message-success .p-message-close {
+    color: #585858;
+  }
+  .p-message.p-message-warn {
+    background: #ffecdb;
+    border: 4px solid #ffb065;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .p-message.p-message-warn .p-message-icon {
+    color: #585858;
+  }
+  .p-message.p-message-warn .p-message-close {
+    color: #585858;
+  }
+  .p-message.p-message-error {
+    background: #f7e1e6;
+    border: 4px solid #de8499;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .p-message.p-message-error .p-message-icon {
+    color: #585858;
+  }
+  .p-message.p-message-error .p-message-close {
+    color: #585858;
+  }
+  .p-message .p-message-text {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+  .p-message .p-message-icon {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+  }
+  .p-message .p-message-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-message .p-message-summary {
+    font-weight: 700;
+  }
+  .p-message .p-message-detail {
+    margin-left: 0.5rem;
+  }
+  .p-toast {
+    opacity: 0.9;
+  }
+  .p-toast .p-toast-message {
+    margin: 0 0 1rem 0;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+  }
+  .p-toast .p-toast-message .p-toast-message-content {
+    padding: 1rem;
+  }
+  .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-message-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
+    font-weight: 600;
+  }
+  .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.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:hover {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-toast .p-toast-message.p-toast-message-info {
+    background: #e1f2f7;
+    border: 4px solid #83c7e0;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .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: #585858;
+  }
+  .p-toast .p-toast-message.p-toast-message-success {
+    background: #f2f8e1;
+    border: 4px solid #c7e084;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .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: #585858;
+  }
+  .p-toast .p-toast-message.p-toast-message-warn {
+    background: #ffecdb;
+    border: 4px solid #ffb065;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .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: #585858;
+  }
+  .p-toast .p-toast-message.p-toast-message-error {
+    background: #f7e1e6;
+    border: 4px solid #de8499;
+    border-width: 0 0 0 6px;
+    color: #585858;
+  }
+  .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: #585858;
+  }
+  .p-galleria .p-galleria-close {
+    margin: 0.5rem;
+    background: transparent;
+    color: #f5f5f5;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 50%;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon {
+    font-size: 2rem;
+  }
+  .p-galleria .p-galleria-close .p-galleria-close-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f5f5f5;
+  }
+  .p-galleria .p-galleria-item-nav {
+    background: transparent;
+    color: #f5f5f5;
+    width: 4rem;
+    height: 4rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 6px;
+    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 .p-galleria-item-prev-icon.p-icon,
+  .p-galleria .p-galleria-item-nav .p-galleria-item-next-icon.p-icon {
+    width: 2rem;
+    height: 2rem;
+  }
+  .p-galleria .p-galleria-item-nav:not(.p-disabled):hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #f5f5f5;
+  }
+  .p-galleria .p-galleria-caption {
+    background: rgba(0, 0, 0, 0.5);
+    color: #f5f5f5;
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators {
+    padding: 1rem;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button {
+    background-color: #edf0fa;
+    width: 1rem;
+    height: 1rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    border-radius: 50%;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator button:hover {
+    background: #ebebeb;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background: #ced6f1;
+    color: #585858;
+  }
+  .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: #ced6f1;
+    color: #585858;
+  }
+  .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: #f5f5f5;
+    width: 2rem;
+    height: 2rem;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    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: #f5f5f5;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content {
+    transition: box-shadow 0.3s;
+  }
+  .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-galleria-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-mask {
+    --maskbg: rgba(0, 0, 0, 0.9);
+  }
+  .p-image-preview-indicator {
+    background-color: transparent;
+    color: #f8f9fa;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-image-preview-indicator .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-image-preview-container:hover > .p-image-preview-indicator {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .p-image-toolbar {
+    padding: 1rem;
+  }
+  .p-image-action.p-link {
+    color: #f8f9fa;
+    background-color: transparent;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    margin-right: 0.5rem;
+  }
+  .p-image-action.p-link:last-child {
+    margin-right: 0;
+  }
+  .p-image-action.p-link:hover {
+    color: #f8f9fa;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .p-image-action.p-link span {
+    font-size: 1.5rem;
+  }
+  .p-image-action.p-link .p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-avatar {
+    background-color: #ebebeb;
+    border-radius: 6px;
+  }
+  .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-circle {
+    border-radius: 50%;
+  }
+  .p-avatar-group .p-avatar {
+    border: 2px solid #ffffff;
+  }
+  .p-chip {
+    background-color: #ebebeb;
+    color: #6c6c6c;
+    border-radius: 16px;
+    padding: 0 0.75rem;
+  }
+  .p-chip .p-chip-text {
+    line-height: 1.5;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+  }
+  .p-chip .p-chip-icon {
+    margin-right: 0.5rem;
+  }
+  .p-chip img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: -0.75rem;
+    margin-right: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon {
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+    margin-left: 0.5rem;
+  }
+  .p-chip .p-chip-remove-icon:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-chip .p-chip-remove-icon:focus {
+    outline: 0 none;
+  }
+  .p-scrolltop {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    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);
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-scrolltop.p-link {
+    background: rgba(0, 0, 0, 0.7);
+  }
+  .p-scrolltop.p-link:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .p-scrolltop .p-scrolltop-icon {
+    font-size: 1.5rem;
+    color: #f5f5f5;
+  }
+  .p-scrolltop .p-scrolltop-icon.p-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .p-skeleton {
+    background-color: #ebebeb;
+    border-radius: 6px;
+  }
+  .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: #5472d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #8bae2c;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #35a4cc;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ff922a;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d45472;
+    color: #ffffff;
+  }
+  .p-tag .p-tag-icon {
+    margin-right: 0.25rem;
+    font-size: 0.75rem;
+  }
+  .p-tag .p-tag-icon.p-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+  .p-inplace .p-inplace-display {
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-inplace .p-inplace-display:not(.p-disabled):hover {
+    background: #edf0fa;
+    color: #6c6c6c;
+  }
+  .p-inplace .p-inplace-display:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-metergroup .p-metergroup-meter-container {
+    background: #ebebeb;
+    border-radius: 6px;
+  }
+  .p-metergroup .p-metergroup-meter {
+    border: 0 none;
+    background: #5472d4;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-list-item {
+    line-height: 1.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-type {
+    background: #5472d4;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label {
+    margin-right: 1rem;
+  }
+  .p-metergroup .p-metergroup-label-list .p-metergroup-label-icon {
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter-container {
+    height: 0.5rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-start {
+    margin-bottom: 1rem;
+  }
+  .p-metergroup.p-metergroup-horizontal .p-metergroup-label-list-end {
+    margin-top: 1rem;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter-container {
+    width: 0.5rem;
+    height: 100%;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+  .p-metergroup.p-metergroup-vertical .p-metergroup-label-list:not(.p-metergroup-label-list-start) {
+    margin-left: 1rem;
+  }
+  .p-progressbar {
+    border: 0 none;
+    height: 1.5rem;
+    background: #ebebeb;
+    border-radius: 6px;
+  }
+  .p-progressbar .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: #5472d4;
+  }
+  .p-progressbar .p-progressbar-label {
+    color: #ffffff;
+    line-height: 1.5rem;
+  }
+  .p-terminal {
+    background: #ffffff;
+    color: #6c6c6c;
+    border: 2px solid #ebebeb;
+    padding: 1rem;
+  }
+  .p-terminal .p-terminal-input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+  }
+  .p-badge {
+    background: #5472d4;
+    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: #8191a6;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-success {
+    background-color: #8bae2c;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-info {
+    background-color: #35a4cc;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-warning {
+    background-color: #ff922a;
+    color: #ffffff;
+  }
+  .p-badge.p-badge-danger {
+    background-color: #d45472;
+    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-tag {
+    background: #5472d4;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 0.25rem 0.4rem;
+    border-radius: 6px;
+  }
+  .p-tag.p-tag-success {
+    background-color: #8bae2c;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-info {
+    background-color: #35a4cc;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-warning {
+    background-color: #ff922a;
+    color: #ffffff;
+  }
+  .p-tag.p-tag-danger {
+    background-color: #d45472;
+    color: #ffffff;
+  }
+}
+/* Customizations to the designer theme should be defined here */
+/* Customizations to the designer theme should be defined here */
+@layer primereact {
+  .p-button .p-button-label {
+    font-weight: 600;
+  }
+  .p-button-group .p-button-label,
+  .p-togglebutton .p-button-label {
+    font-weight: 400;
+  }
+  .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button {
+    background-color: #5472d4;
+  }
+  .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button {
+    background-color: #5472d4;
+  }
+  .p-panel {
+    border: 2px solid #ebebeb;
+    border-radius: 6px;
+  }
+  .p-panel .p-panel-header {
+    border: 0 none;
+  }
+  .p-panel .p-panel-content {
+    border: 0 none;
+  }
+  .p-fieldset .p-fieldset-legend {
+    border-color: transparent;
+  }
+  .p-accordion .p-accordion-toggle-icon {
+    order: 10;
+    margin-left: auto;
+  }
+  .p-accordion .p-accordion-toggle-icon.pi-chevron-right::before {
+    content: "\e90d";
+  }
+  .p-accordion .p-accordion-toggle-icon.pi-chevron-down::before {
+    content: "\e90f";
+  }
+  .p-accordion .p-accordion-header.p-highlight .p-accordion-header-link {
+    padding-bottom: calc(1rem + 2px);
+    border-bottom: 0 none;
+  }
+  .p-accordion .p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-link {
+    border-bottom: 0 none;
+  }
+  .p-inline-message.p-inline-message-info {
+    border-color: #e1f2f7;
+  }
+  .p-inline-message.p-inline-message-success {
+    border-color: #f2f8e1;
+  }
+  .p-inline-message.p-inline-message-warn {
+    border-color: #ffecdb;
+  }
+  .p-inline-message.p-inline-message-error {
+    border-color: #f7e1e6;
+  }
+  .p-inputtext:enabled:focus {
+    box-shadow: none;
+  }
+  .p-dropdown:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-multiselect:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-cascadeselect:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-autocomplete.p-autocomplete-multiple:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+    box-shadow: none;
+  }
+  .p-orderlist .p-orderlist-list {
+    border-top: 0 none;
+  }
+  .p-picklist .p-picklist-list {
+    border-top: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-icon.pi-chevron-right, .p-panelmenu .p-panelmenu-icon.pi-chevron-down {
+    order: 10;
+    margin-left: auto;
+  }
+  .p-panelmenu .p-panelmenu-icon.pi-chevron-right::before {
+    content: "\e90d";
+  }
+  .p-panelmenu .p-panelmenu-icon.pi-chevron-down::before {
+    content: "\e90f";
+  }
+  .p-panelmenu .p-panelmenu-header.p-highlight > a {
+    padding-bottom: calc(1rem + 2px);
+    border-bottom: 0 none;
+  }
+  .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled) > a:hover {
+    padding-bottom: calc(1rem + 2px);
+    border-bottom: 0 none;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    box-shadow: inset 0 2px 0 0 #5472d4;
+  }
+  .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    box-shadow: inset 0 -2px 0 0 #5472d4;
+  }
+}
diff --git a/public/upload.php b/public/upload.php
deleted file mode 100644
index b87a10417b..0000000000
--- a/public/upload.php
+++ /dev/null
@@ -1 +0,0 @@
- <?php echo '<p>Fake Upload Process</p>'; ?> 
\ No newline at end of file
diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000000..7f5a8226da
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,406 @@
+import alias from '@rollup/plugin-alias';
+import { babel } from '@rollup/plugin-babel';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import postcss from 'rollup-plugin-postcss';
+import { terser } from 'rollup-plugin-terser';
+
+import fs from 'fs-extra';
+import path from 'path';
+
+import pkg from './package.json';
+
+let entries = [];
+
+let core = {};
+
+const NPM_LINK = process.env.NPM_LINK === 'true';
+
+// alias entries
+const ALIAS_ICON_COMPONENT_ENTRIES = [
+    { find: '../../iconbase/IconBase', replacement: 'primereact/iconbase' },
+    { find: '../icons/angledoubledown', replacement: 'primereact/icons/angledoubledown' },
+    { find: '../icons/angledoubleleft', replacement: 'primereact/icons/angledoubleleft' },
+    { find: '../icons/angledoubleright', replacement: 'primereact/icons/angledoubleright' },
+    { find: '../icons/angledoubleup', replacement: 'primereact/icons/angledoubleup' },
+    { find: '../icons/angledown', replacement: 'primereact/icons/angledown' },
+    { find: '../icons/angleleft', replacement: 'primereact/icons/angleleft' },
+    { find: '../icons/angleright', replacement: 'primereact/icons/angleright' },
+    { find: '../icons/angleup', replacement: 'primereact/icons/angleup' },
+    { find: '../icons/arrowdown', replacement: 'primereact/icons/arrowdown' },
+    { find: '../icons/arrowup', replacement: 'primereact/icons/arrowup' },
+    { find: '../icons/ban', replacement: 'primereact/icons/ban' },
+    { find: '../icons/bars', replacement: 'primereact/icons/bars' },
+    { find: '../icons/calendar', replacement: 'primereact/icons/calendar' },
+    { find: '../icons/check', replacement: 'primereact/icons/check' },
+    { find: '../icons/chevrondown', replacement: 'primereact/icons/chevrondown' },
+    { find: '../icons/chevronleft', replacement: 'primereact/icons/chevronleft' },
+    { find: '../icons/chevronright', replacement: 'primereact/icons/chevronright' },
+    { find: '../icons/chevronup', replacement: 'primereact/icons/chevronup' },
+    { find: '../icons/exclamationtriangle', replacement: 'primereact/icons/exclamationtriangle' },
+    { find: '../icons/eye', replacement: 'primereact/icons/eye' },
+    { find: '../icons/eyeslash', replacement: 'primereact/icons/eyeslash' },
+    { find: '../icons/filter', replacement: 'primereact/icons/filter' },
+    { find: '../icons/filterslash', replacement: 'primereact/icons/filterslash' },
+    { find: '../icons/infocircle', replacement: 'primereact/icons/infocircle' },
+    { find: '../icons/minus', replacement: 'primereact/icons/minus' },
+    { find: '../icons/pencil', replacement: 'primereact/icons/pencil' },
+    { find: '../icons/plus', replacement: 'primereact/icons/plus' },
+    { find: '../icons/refresh', replacement: 'primereact/icons/refresh' },
+    { find: '../icons/search', replacement: 'primereact/icons/search' },
+    { find: '../icons/searchminus', replacement: 'primereact/icons/searchminus' },
+    { find: '../icons/searchplus', replacement: 'primereact/icons/searchplus' },
+    { find: '../icons/sortalt', replacement: 'primereact/icons/sortalt' },
+    { find: '../icons/sortamountdown', replacement: 'primereact/icons/sortamountdown' },
+    { find: '../icons/sortamountupalt', replacement: 'primereact/icons/sortamountupalt' },
+    { find: '../icons/spinner', replacement: 'primereact/icons/spinner' },
+    { find: '../icons/star', replacement: 'primereact/icons/star' },
+    { find: '../icons/starfill', replacement: 'primereact/icons/starfill' },
+    { find: '../icons/thlarge', replacement: 'primereact/icons/thlarge' },
+    { find: '../icons/times', replacement: 'primereact/icons/times' },
+    { find: '../icons/timescircle', replacement: 'primereact/icons/timescircle' },
+    { find: '../icons/trash', replacement: 'primereact/icons/trash' },
+    { find: '../icons/undo', replacement: 'primereact/icons/undo' },
+    { find: '../icons/upload', replacement: 'primereact/icons/upload' },
+    { find: '../icons/windowmaximize', replacement: 'primereact/icons/windowmaximize' },
+    { find: '../icons/windowminimize', replacement: 'primereact/icons/windowminimize' }
+];
+
+const CORE_PASSTHROUGH_DEPENDENCIES = [
+    { find: '../passthrough', replacement: 'primereact/passthrough' },
+    { find: '../passthrough/tailwind', replacement: 'primereact/passthrough/tailwind' }
+];
+
+const ALIAS_COMPONENT_ENTRIES = [
+    { find: '../utils/Utils', replacement: 'primereact/utils' },
+    { find: '../api/Api', replacement: 'primereact/api' },
+    { find: '../componentbase/ComponentBase', replacement: 'primereact/componentbase' },
+    { find: '../hooks/Hooks', replacement: 'primereact/hooks' },
+    { find: '../ripple/Ripple', replacement: 'primereact/ripple' },
+    { find: '../csstransition/CSSTransition', replacement: 'primereact/csstransition' },
+    { find: '../portal/Portal', replacement: 'primereact/portal' },
+    { find: '../keyfilter/KeyFilter', replacement: 'primereact/keyfilter' },
+    ...ALIAS_ICON_COMPONENT_ENTRIES,
+    { find: '../tooltip/Tooltip', replacement: 'primereact/tooltip' },
+    { find: '../virtualscroller/VirtualScroller', replacement: 'primereact/virtualscroller' },
+    { find: '../terminalservice/TerminalService', replacement: 'primereact/terminalservice' },
+    { find: '../overlayservice/OverlayService', replacement: 'primereact/overlayservice' },
+    { find: '../checkox/Checkbox', replacement: 'primereact/checkbox' },
+    { find: '../button/Button', replacement: 'primereact/button' },
+    { find: '../inputtext/InputText', replacement: 'primereact/inputtext' },
+    { find: '../inputnumber/InputNumber', replacement: 'primereact/inputnumber' },
+    { find: '../messages/Messages', replacement: 'primereact/messages' },
+    { find: '../progressbar/ProgressBar', replacement: 'primereact/progressbar' },
+    { find: '../dropdown/Dropdown', replacement: 'primereact/dropdown' },
+    { find: '../dialog/Dialog', replacement: 'primereact/dialog' },
+    { find: '../paginator/Paginator', replacement: 'primereact/paginator' },
+    { find: '../tree/Tree', replacement: 'primereact/tree' },
+    ...CORE_PASSTHROUGH_DEPENDENCIES
+];
+
+// dependencies
+const GLOBAL_DEPENDENCIES = {
+    react: 'React',
+    'react-dom': 'ReactDOM',
+    'react-transition-group': 'ReactTransitionGroup'
+};
+
+const GLOBAL_COMPONENT_DEPENDENCIES = {
+    ...GLOBAL_DEPENDENCIES,
+    ...(NPM_LINK ? [] : ALIAS_COMPONENT_ENTRIES.reduce((acc, cur) => ({ ...acc, [cur.replacement]: cur.replacement.replaceAll('/', '.') }), {}))
+};
+
+// externals
+const EXTERNAL = ['react', 'react-dom', 'react-transition-group', '@babel/runtime', '@fullcalendar/core', 'chart.js/auto', 'quill'];
+
+const EXTERNAL_COMPONENT = [...EXTERNAL, ...(NPM_LINK ? [] : ALIAS_COMPONENT_ENTRIES.map((entries) => entries.replacement))];
+
+// plugins
+const BABEL_PLUGIN_OPTIONS = {
+    exclude: 'node_modules/**',
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'],
+    skipPreflightCheck: true,
+    babelHelpers: 'runtime',
+    babelrc: false
+};
+
+const ALIAS_PLUGIN_OPTIONS_FOR_COMPONENT = {
+    entries: ALIAS_COMPONENT_ENTRIES
+};
+
+const REPLACE_PLUGIN_OPTIONS = {
+    'process.env.NODE_ENV': JSON.stringify('production'),
+    preventAssignment: true
+};
+
+const RESOLVE_PLUGIN_OPTIONS = {
+    extensions: ['.js']
+};
+
+const COMMONJS_PLUGIN_OPTIONS = {
+    exclude: process.env.INPUT_DIR + '**',
+    sourceMap: false
+};
+
+const POSTCSS_PLUGIN_OPTIONS = {
+    sourceMap: false
+};
+
+const TERSER_PLUGIN_OPTIONS = {
+    compress: {
+        keep_infinity: true,
+        pure_getters: true,
+        reduce_funcs: false
+    }
+};
+
+const PLUGINS = [replace(REPLACE_PLUGIN_OPTIONS), resolve(RESOLVE_PLUGIN_OPTIONS), commonjs(COMMONJS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS), postcss(POSTCSS_PLUGIN_OPTIONS)];
+
+const PLUGINS_COMPONENT = NPM_LINK ? PLUGINS : [alias(ALIAS_PLUGIN_OPTIONS_FOR_COMPONENT), ...PLUGINS];
+
+function addEntry(name, input, output, isComponent = true) {
+    const exports = name === 'primereact.api' || name === 'primereact' ? 'named' : 'auto';
+    const useCorePlugin = !NPM_LINK && ALIAS_COMPONENT_ENTRIES.some((entry) => entry.replacement === name.replaceAll('.', '/'));
+    const plugins = isComponent ? PLUGINS_COMPONENT : PLUGINS;
+    const external = isComponent ? EXTERNAL_COMPONENT : EXTERNAL;
+    const inlineDynamicImports = true;
+
+    const onwarn = (warning) => {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+            return;
+        }
+    };
+
+    const getEntry = (isMinify) => {
+        return {
+            onwarn,
+            input,
+            plugins: [...plugins, isMinify && terser(TERSER_PLUGIN_OPTIONS), useCorePlugin && corePlugin()],
+            external,
+            inlineDynamicImports
+        };
+    };
+
+    const get_CJS_ESM = (isMinify) => {
+        return {
+            ...getEntry(isMinify),
+            output: [
+                ...(NPM_LINK
+                    ? []
+                    : [
+                          {
+                              format: 'cjs',
+                              file: `${output}.cjs${isMinify ? '.min' : ''}.js`,
+                              exports,
+                              banner: "'use client';" // This line is required for SSR.
+                          }
+                      ]),
+                {
+                    format: 'esm',
+                    file: `${output}.esm${isMinify ? '.min' : ''}.js`,
+                    exports,
+                    banner: "'use client';" // This line is required for SSR.
+                }
+            ]
+        };
+    };
+
+    const get_IIFE = (isMinify) => {
+        return {
+            ...getEntry(isMinify),
+            output: [
+                {
+                    format: 'iife',
+                    name,
+                    file: `${output}${isMinify ? '.min' : ''}.js`,
+                    globals: isComponent ? GLOBAL_COMPONENT_DEPENDENCIES : GLOBAL_DEPENDENCIES,
+                    exports
+                }
+            ]
+        };
+    };
+
+    entries.push(get_CJS_ESM());
+
+    if (!NPM_LINK) {
+        entries.push(get_IIFE());
+
+        // Minify
+        entries.push(get_CJS_ESM(true));
+        entries.push(get_IIFE(true));
+    }
+}
+
+function corePlugin() {
+    return {
+        name: 'corePlugin',
+        generateBundle(outputOptions, bundle) {
+            const { name, format } = outputOptions;
+
+            if (format === 'iife') {
+                Object.keys(bundle).forEach((id) => {
+                    const chunk = bundle[id];
+                    const folderName = name.replace('primereact.', '').replaceAll('.', '/');
+                    const filePath = `./dist/core/core${id.indexOf('.min.js') > 0 ? '.min.js' : '.js'}`;
+
+                    core[filePath] ? (core[filePath][folderName] = chunk.code) : (core[filePath] = { [`${folderName}`]: chunk.code });
+                });
+            }
+        }
+    };
+}
+
+function addCore() {
+    const lastEntry = entries[entries.length - 1];
+
+    lastEntry.plugins = [
+        ...lastEntry.plugins,
+        {
+            name: 'coreMergePlugin',
+            generateBundle() {
+                Object.entries(core).forEach(([filePath, value]) => {
+                    const code = ALIAS_COMPONENT_ENTRIES.reduce((val, entry) => {
+                        const name = entry.replacement.replace('primereact/', '');
+
+                        val += value[name] + '\n';
+
+                        return val;
+                    }, '');
+
+                    fs.outputFile(path.resolve(__dirname, filePath), code, {}, function (err) {
+                        if (err) {
+                            // eslint-disable-next-line no-console
+                            return console.error(err);
+                        }
+                    });
+                });
+            }
+        }
+    ];
+}
+
+function addComponent() {
+    fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR), { withFileTypes: true })
+        .filter((dir) => dir.isDirectory())
+        .forEach(({ name: folderName }) => {
+            fs.readdirSync(path.resolve(__dirname, process.env.INPUT_DIR + folderName)).forEach((file) => {
+                const name = file.split(/(.js)$/)[0].toLowerCase();
+
+                if (name === folderName) {
+                    const input = process.env.INPUT_DIR + folderName + '/' + file;
+                    const output = process.env.OUTPUT_DIR + folderName + '/' + name;
+
+                    addEntry('primereact.' + folderName, input, output, true);
+                }
+            });
+        });
+}
+
+function addIcon() {
+    const iconDir = path.resolve(__dirname, process.env.INPUT_DIR + 'icons');
+
+    fs.readdirSync(path.resolve(__dirname, iconDir), { withFileTypes: true })
+        .filter((dir) => dir.isDirectory())
+        .forEach(({ name: folderName }) => {
+            fs.readdirSync(path.resolve(__dirname, iconDir + '/' + folderName)).forEach((file) => {
+                if (/\.js$/.test(file)) {
+                    const name = file.split(/(.js)$/)[0].toLowerCase();
+                    const input = process.env.INPUT_DIR + 'icons/' + folderName + '/' + file;
+                    const output = process.env.OUTPUT_DIR + 'icons/' + folderName + '/' + name;
+
+                    addEntry('primereact.icons.' + folderName, input, output, true);
+                }
+            });
+        });
+}
+
+function addPassThrough() {
+    const inputDir = process.env.INPUT_DIR + 'passthrough';
+    const outputDir = process.env.OUTPUT_DIR + 'passthrough';
+
+    addEntry('passthrough', `${inputDir}/index.js`, `${outputDir}/index`, false);
+    addEntry('passthrough.tailwind', `${inputDir}/tailwind/index.js`, `${outputDir}/tailwind/index`, false);
+}
+
+function addPrimeReact() {
+    const input = process.env.INPUT_DIR + 'primereact.all.js';
+    const output = process.env.OUTPUT_DIR + 'primereact.all';
+
+    addEntry('primereact', input, output, false);
+}
+
+function addPackageJson() {
+    const outputDir = path.resolve(__dirname, process.env.OUTPUT_DIR);
+    const packageJson = `{
+    "name": "primereact",
+    "version": "${pkg.version}",
+    "private": false,
+    "author": "PrimeTek Informatics",
+    "description": "PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.",
+    "homepage": "https://www.primereact.org/",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/primefaces/primereact.git"
+    },
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/primefaces/primereact/issues"
+    },
+    "keywords": [
+        "primereact",
+        "react",
+        "hooks",
+        "next",
+        "nextjs",
+        "ui-kit",
+        "ui library",
+        "component library",
+        "material",
+        "material design",
+        "bootstrap",
+        "tailwind theme",
+        "dark theme",
+        "react components",
+        "responsive components"
+    ],
+    "unpkg": "primereact.all.min.js",
+    "jsdelivr": "primereact.all.min.js",
+    "main": "primereact.all.min.js",
+    "module": "primereact.all.esm.min.js",
+    "web-types": "web-types.json",
+    "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+    },
+    "peerDependenciesMeta": {
+        "@types/react": {
+            "optional": true
+        }
+    },
+    "dependencies": {
+        "@types/react-transition-group": "^4.4.1",
+        "react-transition-group": "^4.4.1"
+    },
+    "sideEffects": [
+        "**/*.css"
+    ],
+    "engines": {
+        "node": ">=14.0.0"
+    }
+}`;
+
+    !fs.existsSync(outputDir) && fs.mkdirSync(outputDir);
+    fs.writeFileSync(path.resolve(outputDir, 'package.json'), packageJson);
+}
+
+addIcon();
+addComponent();
+addPrimeReact();
+addPassThrough();
+addCore();
+addPackageJson();
+
+export default entries;
diff --git a/service/CarService.js b/service/CarService.js
new file mode 100644
index 0000000000..fb49a705c3
--- /dev/null
+++ b/service/CarService.js
@@ -0,0 +1,38 @@
+export const CarService = {
+    brands: ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'],
+
+    colors: ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'],
+
+    generateCar(id) {
+        return {
+            id,
+            vin: this.generateVin(),
+            brand: this.generateBrand(),
+            color: this.generateColor(),
+            year: this.generateYear()
+        };
+    },
+
+    generateVin() {
+        let text = '';
+        let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < 5; i++) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+
+        return text;
+    },
+
+    generateBrand() {
+        return this.brands[Math.floor(Math.random() * Math.floor(10))];
+    },
+
+    generateColor() {
+        return this.colors[Math.floor(Math.random() * Math.floor(7))];
+    },
+
+    generateYear() {
+        return 2000 + Math.floor(Math.random() * Math.floor(19));
+    }
+};
diff --git a/service/CountryService.js b/service/CountryService.js
new file mode 100644
index 0000000000..92c7fa42f6
--- /dev/null
+++ b/service/CountryService.js
@@ -0,0 +1,252 @@
+export const CountryService = {
+    getData() {
+        return [
+            { name: 'Afghanistan', code: 'AF' },
+            { name: 'Albania', code: 'AL' },
+            { name: 'Algeria', code: 'DZ' },
+            { name: 'American Samoa', code: 'AS' },
+            { name: 'Andorra', code: 'AD' },
+            { name: 'Angola', code: 'AO' },
+            { name: 'Anguilla', code: 'AI' },
+            { name: 'Antarctica', code: 'AQ' },
+            { name: 'Antigua and Barbuda', code: 'AG' },
+            { name: 'Argentina', code: 'AR' },
+            { name: 'Armenia', code: 'AM' },
+            { name: 'Aruba', code: 'AW' },
+            { name: 'Australia', code: 'AU' },
+            { name: 'Austria', code: 'AT' },
+            { name: 'Azerbaijan', code: 'AZ' },
+            { name: 'Bahamas', code: 'BS' },
+            { name: 'Bahrain', code: 'BH' },
+            { name: 'Bangladesh', code: 'BD' },
+            { name: 'Barbados', code: 'BB' },
+            { name: 'Belarus', code: 'BY' },
+            { name: 'Belgium', code: 'BE' },
+            { name: 'Belize', code: 'BZ' },
+            { name: 'Benin', code: 'BJ' },
+            { name: 'Bermuda', code: 'BM' },
+            { name: 'Bhutan', code: 'BT' },
+            { name: 'Bolivia', code: 'BO' },
+            { name: 'Bosnia and Herzegovina', code: 'BA' },
+            { name: 'Botswana', code: 'BW' },
+            { name: 'Bouvet Island', code: 'BV' },
+            { name: 'Brazil', code: 'BR' },
+            { name: 'British Indian Ocean Territory', code: 'IO' },
+            { name: 'Brunei Darussalam', code: 'BN' },
+            { name: 'Bulgaria', code: 'BG' },
+            { name: 'Burkina Faso', code: 'BF' },
+            { name: 'Burundi', code: 'BI' },
+            { name: 'Cambodia', code: 'KH' },
+            { name: 'Cameroon', code: 'CM' },
+            { name: 'Canada', code: 'CA' },
+            { name: 'Cape Verde', code: 'CV' },
+            { name: 'Cayman Islands', code: 'KY' },
+            { name: 'Central African Republic', code: 'CF' },
+            { name: 'Chad', code: 'TD' },
+            { name: 'Chile', code: 'CL' },
+            { name: 'China', code: 'CN' },
+            { name: 'Christmas Island', code: 'CX' },
+            { name: 'Cocos (Keeling) Islands', code: 'CC' },
+            { name: 'Colombia', code: 'CO' },
+            { name: 'Comoros', code: 'KM' },
+            { name: 'Congo', code: 'CG' },
+            { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+            { name: 'Cook Islands', code: 'CK' },
+            { name: 'Costa Rica', code: 'CR' },
+            { name: 'Cote D"Ivoire', code: 'CI' },
+            { name: 'Croatia', code: 'HR' },
+            { name: 'Cuba', code: 'CU' },
+            { name: 'Cyprus', code: 'CY' },
+            { name: 'Czech Republic', code: 'CZ' },
+            { name: 'Denmark', code: 'DK' },
+            { name: 'Djibouti', code: 'DJ' },
+            { name: 'Dominica', code: 'DM' },
+            { name: 'Dominican Republic', code: 'DO' },
+            { name: 'Ecuador', code: 'EC' },
+            { name: 'Egypt', code: 'EG' },
+            { name: 'El Salvador', code: 'SV' },
+            { name: 'Equatorial Guinea', code: 'GQ' },
+            { name: 'Eritrea', code: 'ER' },
+            { name: 'Estonia', code: 'EE' },
+            { name: 'Ethiopia', code: 'ET' },
+            { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+            { name: 'Faroe Islands', code: 'FO' },
+            { name: 'Fiji', code: 'FJ' },
+            { name: 'Finland', code: 'FI' },
+            { name: 'France', code: 'FR' },
+            { name: 'French Guiana', code: 'GF' },
+            { name: 'French Polynesia', code: 'PF' },
+            { name: 'French Southern Territories', code: 'TF' },
+            { name: 'Gabon', code: 'GA' },
+            { name: 'Gambia', code: 'GM' },
+            { name: 'Georgia', code: 'GE' },
+            { name: 'Germany', code: 'DE' },
+            { name: 'Ghana', code: 'GH' },
+            { name: 'Gibraltar', code: 'GI' },
+            { name: 'Greece', code: 'GR' },
+            { name: 'Greenland', code: 'GL' },
+            { name: 'Grenada', code: 'GD' },
+            { name: 'Guadeloupe', code: 'GP' },
+            { name: 'Guam', code: 'GU' },
+            { name: 'Guatemala', code: 'GT' },
+            { name: 'Guernsey', code: 'GG' },
+            { name: 'Guinea', code: 'GN' },
+            { name: 'Guinea-Bissau', code: 'GW' },
+            { name: 'Guyana', code: 'GY' },
+            { name: 'Haiti', code: 'HT' },
+            { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+            { name: 'Holy See (Vatican City State)', code: 'VA' },
+            { name: 'Honduras', code: 'HN' },
+            { name: 'Hong Kong', code: 'HK' },
+            { name: 'Hungary', code: 'HU' },
+            { name: 'Iceland', code: 'IS' },
+            { name: 'India', code: 'IN' },
+            { name: 'Indonesia', code: 'ID' },
+            { name: 'Iran, Islamic Republic Of', code: 'IR' },
+            { name: 'Iraq', code: 'IQ' },
+            { name: 'Ireland', code: 'IE' },
+            { name: 'Isle of Man', code: 'IM' },
+            { name: 'Israel', code: 'IL' },
+            { name: 'Italy', code: 'IT' },
+            { name: 'Jamaica', code: 'JM' },
+            { name: 'Japan', code: 'JP' },
+            { name: 'Jersey', code: 'JE' },
+            { name: 'Jordan', code: 'JO' },
+            { name: 'Kazakhstan', code: 'KZ' },
+            { name: 'Kenya', code: 'KE' },
+            { name: 'Kiribati', code: 'KI' },
+            { name: 'Korea, Democratic People"S Republic of', code: 'KP' },
+            { name: 'Korea, Republic of', code: 'KR' },
+            { name: 'Kuwait', code: 'KW' },
+            { name: 'Kyrgyzstan', code: 'KG' },
+            { name: 'Lao People"S Democratic Republic', code: 'LA' },
+            { name: 'Latvia', code: 'LV' },
+            { name: 'Lebanon', code: 'LB' },
+            { name: 'Lesotho', code: 'LS' },
+            { name: 'Liberia', code: 'LR' },
+            { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+            { name: 'Liechtenstein', code: 'LI' },
+            { name: 'Lithuania', code: 'LT' },
+            { name: 'Luxembourg', code: 'LU' },
+            { name: 'Macao', code: 'MO' },
+            { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+            { name: 'Madagascar', code: 'MG' },
+            { name: 'Malawi', code: 'MW' },
+            { name: 'Malaysia', code: 'MY' },
+            { name: 'Maldives', code: 'MV' },
+            { name: 'Mali', code: 'ML' },
+            { name: 'Malta', code: 'MT' },
+            { name: 'Marshall Islands', code: 'MH' },
+            { name: 'Martinique', code: 'MQ' },
+            { name: 'Mauritania', code: 'MR' },
+            { name: 'Mauritius', code: 'MU' },
+            { name: 'Mayotte', code: 'YT' },
+            { name: 'Mexico', code: 'MX' },
+            { name: 'Micronesia, Federated States of', code: 'FM' },
+            { name: 'Moldova, Republic of', code: 'MD' },
+            { name: 'Monaco', code: 'MC' },
+            { name: 'Mongolia', code: 'MN' },
+            { name: 'Montserrat', code: 'MS' },
+            { name: 'Morocco', code: 'MA' },
+            { name: 'Mozambique', code: 'MZ' },
+            { name: 'Myanmar', code: 'MM' },
+            { name: 'Namibia', code: 'NA' },
+            { name: 'Nauru', code: 'NR' },
+            { name: 'Nepal', code: 'NP' },
+            { name: 'Netherlands', code: 'NL' },
+            { name: 'Netherlands Antilles', code: 'AN' },
+            { name: 'New Caledonia', code: 'NC' },
+            { name: 'New Zealand', code: 'NZ' },
+            { name: 'Nicaragua', code: 'NI' },
+            { name: 'Niger', code: 'NE' },
+            { name: 'Nigeria', code: 'NG' },
+            { name: 'Niue', code: 'NU' },
+            { name: 'Norfolk Island', code: 'NF' },
+            { name: 'Northern Mariana Islands', code: 'MP' },
+            { name: 'Norway', code: 'NO' },
+            { name: 'Oman', code: 'OM' },
+            { name: 'Pakistan', code: 'PK' },
+            { name: 'Palau', code: 'PW' },
+            { name: 'Palestinian Territory, Occupied', code: 'PS' },
+            { name: 'Panama', code: 'PA' },
+            { name: 'Papua New Guinea', code: 'PG' },
+            { name: 'Paraguay', code: 'PY' },
+            { name: 'Peru', code: 'PE' },
+            { name: 'Philippines', code: 'PH' },
+            { name: 'Pitcairn', code: 'PN' },
+            { name: 'Poland', code: 'PL' },
+            { name: 'Portugal', code: 'PT' },
+            { name: 'Puerto Rico', code: 'PR' },
+            { name: 'Qatar', code: 'QA' },
+            { name: 'Reunion', code: 'RE' },
+            { name: 'Romania', code: 'RO' },
+            { name: 'Russian Federation', code: 'RU' },
+            { name: 'RWANDA', code: 'RW' },
+            { name: 'Saint Helena', code: 'SH' },
+            { name: 'Saint Kitts and Nevis', code: 'KN' },
+            { name: 'Saint Lucia', code: 'LC' },
+            { name: 'Saint Pierre and Miquelon', code: 'PM' },
+            { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+            { name: 'Samoa', code: 'WS' },
+            { name: 'San Marino', code: 'SM' },
+            { name: 'Sao Tome and Principe', code: 'ST' },
+            { name: 'Saudi Arabia', code: 'SA' },
+            { name: 'Senegal', code: 'SN' },
+            { name: 'Serbia and Montenegro', code: 'CS' },
+            { name: 'Seychelles', code: 'SC' },
+            { name: 'Sierra Leone', code: 'SL' },
+            { name: 'Singapore', code: 'SG' },
+            { name: 'Slovakia', code: 'SK' },
+            { name: 'Slovenia', code: 'SI' },
+            { name: 'Solomon Islands', code: 'SB' },
+            { name: 'Somalia', code: 'SO' },
+            { name: 'South Africa', code: 'ZA' },
+            { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+            { name: 'Spain', code: 'ES' },
+            { name: 'Sri Lanka', code: 'LK' },
+            { name: 'Sudan', code: 'SD' },
+            { name: 'Suriname', code: 'SR' },
+            { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+            { name: 'Swaziland', code: 'SZ' },
+            { name: 'Sweden', code: 'SE' },
+            { name: 'Switzerland', code: 'CH' },
+            { name: 'Syrian Arab Republic', code: 'SY' },
+            { name: 'Taiwan, Province of China', code: 'TW' },
+            { name: 'Tajikistan', code: 'TJ' },
+            { name: 'Tanzania, United Republic of', code: 'TZ' },
+            { name: 'Thailand', code: 'TH' },
+            { name: 'Timor-Leste', code: 'TL' },
+            { name: 'Togo', code: 'TG' },
+            { name: 'Tokelau', code: 'TK' },
+            { name: 'Tonga', code: 'TO' },
+            { name: 'Trinidad and Tobago', code: 'TT' },
+            { name: 'Tunisia', code: 'TN' },
+            { name: 'Turkey', code: 'TR' },
+            { name: 'Turkmenistan', code: 'TM' },
+            { name: 'Turks and Caicos Islands', code: 'TC' },
+            { name: 'Tuvalu', code: 'TV' },
+            { name: 'Uganda', code: 'UG' },
+            { name: 'Ukraine', code: 'UA' },
+            { name: 'United Arab Emirates', code: 'AE' },
+            { name: 'United Kingdom', code: 'GB' },
+            { name: 'United States', code: 'US' },
+            { name: 'United States Minor Outlying Islands', code: 'UM' },
+            { name: 'Uruguay', code: 'UY' },
+            { name: 'Uzbekistan', code: 'UZ' },
+            { name: 'Vanuatu', code: 'VU' },
+            { name: 'Venezuela', code: 'VE' },
+            { name: 'Viet Nam', code: 'VN' },
+            { name: 'Virgin Islands, British', code: 'VG' },
+            { name: 'Virgin Islands, U.S.', code: 'VI' },
+            { name: 'Wallis and Futuna', code: 'WF' },
+            { name: 'Western Sahara', code: 'EH' },
+            { name: 'Yemen', code: 'YE' },
+            { name: 'Zambia', code: 'ZM' },
+            { name: 'Zimbabwe', code: 'ZW' }
+        ];
+    },
+
+    getCountries() {
+        return Promise.resolve(this.getData());
+    }
+};
diff --git a/service/CustomerService.js b/service/CustomerService.js
new file mode 100644
index 0000000000..dc126103d1
--- /dev/null
+++ b/service/CustomerService.js
@@ -0,0 +1,9032 @@
+export const CustomerService = {
+    getData() {
+        return [
+            {
+                id: 1000,
+                name: 'James Butt',
+                country: {
+                    name: 'Algeria',
+                    code: 'dz'
+                },
+                company: 'Benton, John B Jr',
+                date: '2015-09-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 17,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 70663
+            },
+            {
+                id: 1001,
+                name: 'Josephine Darakjy',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Chanay, Jeffrey A Esq',
+                date: '2019-02-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82429
+            },
+            {
+                id: 1002,
+                name: 'Art Venere',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Chemel, James L Cpa',
+                date: '2017-05-13',
+                status: 'qualified',
+                verified: false,
+                activity: 63,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 28334
+            },
+            {
+                id: 1003,
+                name: 'Lenna Paprocki',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Feltz Printing Service',
+                date: '2020-09-15',
+                status: 'new',
+                verified: false,
+                activity: 37,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 88521
+            },
+            {
+                id: 1004,
+                name: 'Donette Foller',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Printing Dimensions',
+                date: '2016-05-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 93905
+            },
+            {
+                id: 1005,
+                name: 'Simona Morasca',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Chapman, Ross E Esq',
+                date: '2018-02-16',
+                status: 'qualified',
+                verified: false,
+                activity: 68,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 50041
+            },
+            {
+                id: 1006,
+                name: 'Mitsue Tollner',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Morlong Associates',
+                date: '2018-02-19',
+                status: 'renewal',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 58706
+            },
+            {
+                id: 1007,
+                name: 'Leota Dilliard',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Commercial Press',
+                date: '2019-08-13',
+                status: 'renewal',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 26640
+            },
+            {
+                id: 1008,
+                name: 'Sage Wieser',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Truhlar And Truhlar Attys',
+                date: '2018-11-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 65369
+            },
+            {
+                id: 1009,
+                name: 'Kris Marrier',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'King, Christopher A Esq',
+                date: '2015-07-07',
+                status: 'negotiation',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 63451
+            },
+            {
+                id: 1010,
+                name: 'Minna Amigon',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Dorl, James J Esq',
+                date: '2018-11-07',
+                status: 'qualified',
+                verified: false,
+                activity: 38,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 71169
+            },
+            {
+                id: 1011,
+                name: 'Abel Maclead',
+                country: {
+                    name: 'Singapore',
+                    code: 'sg'
+                },
+                company: 'Rangoni Of Florence',
+                date: '2017-03-11',
+                status: 'qualified',
+                verified: true,
+                activity: 87,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 96842
+            },
+            {
+                id: 1012,
+                name: 'Kiley Caldarera',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Feiner Bros',
+                date: '2015-10-20',
+                status: 'unqualified',
+                verified: false,
+                activity: 80,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 92734
+            },
+            {
+                id: 1013,
+                name: 'Graciela Ruta',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Buckley Miller & Wright',
+                date: '2016-07-25',
+                status: 'negotiation',
+                verified: false,
+                activity: 59,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 45250
+            },
+            {
+                id: 1014,
+                name: 'Cammy Albares',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Rousseaux, Michael Esq',
+                date: '2019-06-25',
+                status: 'new',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 30236
+            },
+            {
+                id: 1015,
+                name: 'Mattie Poquette',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Century Communications',
+                date: '2017-12-12',
+                status: 'negotiation',
+                verified: false,
+                activity: 52,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 64533
+            },
+            {
+                id: 1016,
+                name: 'Meaghan Garufi',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Bolton, Wilbur Esq',
+                date: '2018-07-04',
+                status: 'unqualified',
+                verified: false,
+                activity: 31,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 37279
+            },
+            {
+                id: 1017,
+                name: 'Gladys Rim',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'T M Byxbee Company Pc',
+                date: '2020-02-27',
+                status: 'renewal',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 27381
+            },
+            {
+                id: 1018,
+                name: 'Yuki Whobrey',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Farmers Insurance Group',
+                date: '2017-12-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 9257
+            },
+            {
+                id: 1019,
+                name: 'Fletcher Flosi',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Post Box Services Plus',
+                date: '2016-01-04',
+                status: 'renewal',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 67783
+            },
+            {
+                id: 1020,
+                name: 'Bette Nicka',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Sport En Art',
+                date: '2016-10-21',
+                status: 'renewal',
+                verified: false,
+                activity: 100,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 4609
+            },
+            {
+                id: 1021,
+                name: 'Veronika Inouye',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'C 4 Network Inc',
+                date: '2017-03-24',
+                status: 'renewal',
+                verified: false,
+                activity: 72,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 26565
+            },
+            {
+                id: 1022,
+                name: 'Willard Kolmetz',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Ingalls, Donald R Esq',
+                date: '2017-04-15',
+                status: 'renewal',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 75876
+            },
+            {
+                id: 1023,
+                name: 'Maryann Royster',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'Franklin, Peter L Esq',
+                date: '2017-03-11',
+                status: 'qualified',
+                verified: false,
+                activity: 56,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 41121
+            },
+            {
+                id: 1024,
+                name: 'Alisha Slusarski',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Wtlz Power 107 Fm',
+                date: '2018-03-27',
+                status: 'qualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 91691
+            },
+            {
+                id: 1025,
+                name: 'Allene Iturbide',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Ledecky, David Esq',
+                date: '2016-02-20',
+                status: 'qualified',
+                verified: true,
+                activity: 1,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 40137
+            },
+            {
+                id: 1026,
+                name: 'Chanel Caudy',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Professional Image Inc',
+                date: '2018-06-24',
+                status: 'new',
+                verified: true,
+                activity: 26,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21304
+            },
+            {
+                id: 1027,
+                name: 'Ezekiel Chui',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Sider, Donald C Esq',
+                date: '2016-09-24',
+                status: 'new',
+                verified: false,
+                activity: 76,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 60454
+            },
+            {
+                id: 1028,
+                name: 'Willow Kusko',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'U Pull It',
+                date: '2020-04-11',
+                status: 'qualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 17565
+            },
+            {
+                id: 1029,
+                name: 'Bernardo Figeroa',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Clark, Richard Cpa',
+                date: '2018-04-11',
+                status: 'renewal',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 17774
+            },
+            {
+                id: 1030,
+                name: 'Ammie Corrio',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Moskowitz, Barry S',
+                date: '2016-06-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 56,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 49201
+            },
+            {
+                id: 1031,
+                name: 'Francine Vocelka',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Cascade Realty Advisors Inc',
+                date: '2017-08-02',
+                status: 'qualified',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 67126
+            },
+            {
+                id: 1032,
+                name: 'Ernie Stenseth',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Knwz Newsradio',
+                date: '2018-06-06',
+                status: 'renewal',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 76017
+            },
+            {
+                id: 1033,
+                name: 'Albina Glick',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Giampetro, Anthony D',
+                date: '2019-08-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 91201
+            },
+            {
+                id: 1034,
+                name: 'Alishia Sergi',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Milford Enterprises Inc',
+                date: '2018-05-19',
+                status: 'negotiation',
+                verified: false,
+                activity: 46,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 12237
+            },
+            {
+                id: 1035,
+                name: 'Solange Shinko',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Mosocco, Ronald A',
+                date: '2015-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 34072
+            },
+            {
+                id: 1036,
+                name: 'Jose Stockham',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Tri State Refueler Co',
+                date: '2018-04-25',
+                status: 'qualified',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 94909
+            },
+            {
+                id: 1037,
+                name: 'Rozella Ostrosky',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Parkway Company',
+                date: '2016-02-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 57245
+            },
+            {
+                id: 1038,
+                name: 'Valentine Gillian',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Fbs Business Finance',
+                date: '2019-09-17',
+                status: 'qualified',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 75502
+            },
+            {
+                id: 1039,
+                name: 'Kati Rulapaugh',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Eder Assocs Consltng Engrs Pc',
+                date: '2016-12-03',
+                status: 'renewal',
+                verified: false,
+                activity: 51,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 82075
+            },
+            {
+                id: 1040,
+                name: 'Youlanda Schemmer',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Tri M Tool Inc',
+                date: '2017-12-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 19208
+            },
+            {
+                id: 1041,
+                name: 'Dyan Oldroyd',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'International Eyelets Inc',
+                date: '2017-02-02',
+                status: 'qualified',
+                verified: false,
+                activity: 5,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 50194
+            },
+            {
+                id: 1042,
+                name: 'Roxane Campain',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Rapid Trading Intl',
+                date: '2018-12-25',
+                status: 'unqualified',
+                verified: false,
+                activity: 100,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77714
+            },
+            {
+                id: 1043,
+                name: 'Lavera Perin',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Abc Enterprises Inc',
+                date: '2018-04-10',
+                status: 'qualified',
+                verified: false,
+                activity: 71,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 35740
+            },
+            {
+                id: 1044,
+                name: 'Erick Ferencz',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Cindy Turner Associates',
+                date: '2018-05-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 30790
+            },
+            {
+                id: 1045,
+                name: 'Fatima Saylors',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Stanton, James D Esq',
+                date: '2019-07-10',
+                status: 'renewal',
+                verified: true,
+                activity: 93,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 52343
+            },
+            {
+                id: 1046,
+                name: 'Jina Briddick',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Grace Pastries Inc',
+                date: '2018-02-19',
+                status: 'unqualified',
+                verified: false,
+                activity: 97,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 53966
+            },
+            {
+                id: 1047,
+                name: 'Kanisha Waycott',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Schroer, Gene E Esq',
+                date: '2019-11-27',
+                status: 'new',
+                verified: false,
+                activity: 80,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 9920
+            },
+            {
+                id: 1048,
+                name: 'Emerson Bowley',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Knights Inn',
+                date: '2018-11-24',
+                status: 'new',
+                verified: false,
+                activity: 63,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 78069
+            },
+            {
+                id: 1049,
+                name: 'Blair Malet',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Bollinger Mach Shp & Shipyard',
+                date: '2018-04-19',
+                status: 'new',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 65005
+            },
+            {
+                id: 1050,
+                name: 'Brock Bolognia',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Orinda News',
+                date: '2019-09-06',
+                status: 'renewal',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 51038
+            },
+            {
+                id: 1051,
+                name: 'Lorrie Nestle',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Ballard Spahr Andrews',
+                date: '2018-04-26',
+                status: 'renewal',
+                verified: false,
+                activity: 36,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 28218
+            },
+            {
+                id: 1052,
+                name: 'Sabra Uyetake',
+                country: {
+                    name: 'Peru',
+                    code: 'pe'
+                },
+                company: 'Lowy Limousine Service',
+                date: '2018-04-12',
+                status: 'new',
+                verified: false,
+                activity: 31,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 78527
+            },
+            {
+                id: 1053,
+                name: 'Marjory Mastella',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Vicon Corporation',
+                date: '2018-01-24',
+                status: 'negotiation',
+                verified: false,
+                activity: 89,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 23381
+            },
+            {
+                id: 1054,
+                name: 'Karl Klonowski',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Rossi, Michael M',
+                date: '2017-04-17',
+                status: 'unqualified',
+                verified: true,
+                activity: 27,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 64821
+            },
+            {
+                id: 1055,
+                name: 'Tonette Wenner',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Northwest Publishing',
+                date: '2019-04-14',
+                status: 'qualified',
+                verified: false,
+                activity: 27,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 55334
+            },
+            {
+                id: 1056,
+                name: 'Amber Monarrez',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Branford Wire & Mfg Co',
+                date: '2019-09-09',
+                status: 'new',
+                verified: false,
+                activity: 79,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 83391
+            },
+            {
+                id: 1057,
+                name: 'Shenika Seewald',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'East Coast Marketing',
+                date: '2017-02-18',
+                status: 'renewal',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 31580
+            },
+            {
+                id: 1058,
+                name: 'Delmy Ahle',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Wye Technologies Inc',
+                date: '2020-10-05',
+                status: 'unqualified',
+                verified: false,
+                activity: 55,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 11723
+            },
+            {
+                id: 1059,
+                name: 'Deeanna Juhas',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Healy, George W Iv',
+                date: '2018-09-28',
+                status: 'negotiation',
+                verified: false,
+                activity: 79,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 8454
+            },
+            {
+                id: 1060,
+                name: 'Blondell Pugh',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Alpenlite Inc',
+                date: '2016-06-16',
+                status: 'renewal',
+                verified: false,
+                activity: 49,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 99235
+            },
+            {
+                id: 1061,
+                name: 'Jamal Vanausdal',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Hubbard, Bruce Esq',
+                date: '2017-05-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 87,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 15656
+            },
+            {
+                id: 1062,
+                name: 'Cecily Hollack',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Arthur A Oliver & Son Inc',
+                date: '2020-05-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 5,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 60586
+            },
+            {
+                id: 1063,
+                name: 'Carmelina Lindall',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'George Jessop Carter Jewelers',
+                date: '2019-09-07',
+                status: 'qualified',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 86239
+            },
+            {
+                id: 1064,
+                name: 'Maurine Yglesias',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Schultz, Thomas C Md',
+                date: '2015-08-10',
+                status: 'renewal',
+                verified: false,
+                activity: 94,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 15621
+            },
+            {
+                id: 1065,
+                name: 'Tawna Buvens',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'H H H Enterprises Inc',
+                date: '2018-03-20',
+                status: 'new',
+                verified: false,
+                activity: 25,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 77248
+            },
+            {
+                id: 1066,
+                name: 'Penney Weight',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Hawaiian King Hotel',
+                date: '2020-03-03',
+                status: 'qualified',
+                verified: false,
+                activity: 96,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 478
+            },
+            {
+                id: 1067,
+                name: 'Elly Morocco',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Killion Industries',
+                date: '2018-09-18',
+                status: 'qualified',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 62505
+            },
+            {
+                id: 1068,
+                name: 'Ilene Eroman',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Robinson, William J Esq',
+                date: '2019-06-08',
+                status: 'new',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 91480
+            },
+            {
+                id: 1069,
+                name: 'Vallie Mondella',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Private Properties',
+                date: '2018-12-06',
+                status: 'new',
+                verified: false,
+                activity: 16,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 21671
+            },
+            {
+                id: 1070,
+                name: 'Kallie Blackwood',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Rowley Schlimgen Inc',
+                date: '2017-04-05',
+                status: 'unqualified',
+                verified: false,
+                activity: 25,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 13775
+            },
+            {
+                id: 1071,
+                name: 'Johnetta Abdallah',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Forging Specialties',
+                date: '2015-02-02',
+                status: 'new',
+                verified: false,
+                activity: 16,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 60253
+            },
+            {
+                id: 1072,
+                name: 'Bobbye Rhym',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Smits, Patricia Garity',
+                date: '2018-08-17',
+                status: 'qualified',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 75225
+            },
+            {
+                id: 1073,
+                name: 'Micaela Rhymes',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'H Lee Leonard Attorney At Law',
+                date: '2018-09-08',
+                status: 'renewal',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 3308
+            },
+            {
+                id: 1074,
+                name: 'Tamar Hoogland',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'A K Construction Co',
+                date: '2018-11-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 19711
+            },
+            {
+                id: 1075,
+                name: 'Moon Parlato',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Ambelang, Jessica M Md',
+                date: '2019-08-18',
+                status: 'renewal',
+                verified: false,
+                activity: 64,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 55110
+            },
+            {
+                id: 1076,
+                name: 'Laurel Reitler',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Q A Service',
+                date: '2015-04-02',
+                status: 'negotiation',
+                verified: false,
+                activity: 80,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 62392
+            },
+            {
+                id: 1077,
+                name: 'Delisa Crupi',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Wood & Whitacre Contractors',
+                date: '2017-09-15',
+                status: 'unqualified',
+                verified: false,
+                activity: 70,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 76530
+            },
+            {
+                id: 1078,
+                name: 'Viva Toelkes',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Mark Iv Press Ltd',
+                date: '2017-03-27',
+                status: 'qualified',
+                verified: false,
+                activity: 16,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 7460
+            },
+            {
+                id: 1079,
+                name: 'Elza Lipke',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Museum Of Science & Industry',
+                date: '2017-06-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 42251
+            },
+            {
+                id: 1080,
+                name: 'Devorah Chickering',
+                country: {
+                    name: 'Spain',
+                    code: 'es'
+                },
+                company: 'Garrison Ind',
+                date: '2017-03-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 36435
+            },
+            {
+                id: 1081,
+                name: 'Timothy Mulqueen',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Saronix Nymph Products',
+                date: '2018-07-09',
+                status: 'renewal',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 39197
+            },
+            {
+                id: 1082,
+                name: 'Arlette Honeywell',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Smc Inc',
+                date: '2018-09-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 72707
+            },
+            {
+                id: 1083,
+                name: 'Dominque Dickerson',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'E A I Electronic Assocs Inc',
+                date: '2017-11-12',
+                status: 'qualified',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 97965
+            },
+            {
+                id: 1084,
+                name: 'Lettie Isenhower',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Conte, Christopher A Esq',
+                date: '2016-03-01',
+                status: 'qualified',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 5823
+            },
+            {
+                id: 1085,
+                name: 'Myra Munns',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Anker Law Office',
+                date: '2016-05-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 96471
+            },
+            {
+                id: 1086,
+                name: 'Stephaine Barfield',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Beutelschies & Company',
+                date: '2016-01-22',
+                status: 'new',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 33710
+            },
+            {
+                id: 1087,
+                name: 'Lai Gato',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Fligg, Kenneth I Jr',
+                date: '2016-07-26',
+                status: 'unqualified',
+                verified: false,
+                activity: 64,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 30611
+            },
+            {
+                id: 1088,
+                name: 'Stephen Emigh',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Sharp, J Daniel Esq',
+                date: '2020-07-24',
+                status: 'renewal',
+                verified: false,
+                activity: 51,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 32960
+            },
+            {
+                id: 1089,
+                name: 'Tyra Shields',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Assink, Anne H Esq',
+                date: '2019-11-10',
+                status: 'negotiation',
+                verified: false,
+                activity: 11,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 57423
+            },
+            {
+                id: 1090,
+                name: 'Tammara Wardrip',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Jewel My Shop Inc',
+                date: '2016-06-05',
+                status: 'renewal',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 23027
+            },
+            {
+                id: 1091,
+                name: 'Cory Gibes',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Chinese Translation Resources',
+                date: '2016-02-28',
+                status: 'new',
+                verified: false,
+                activity: 44,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 84182
+            },
+            {
+                id: 1092,
+                name: 'Danica Bruschke',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Stevens, Charles T',
+                date: '2018-12-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 25237
+            },
+            {
+                id: 1093,
+                name: 'Wilda Giguere',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Mclaughlin, Luther W Cpa',
+                date: '2017-06-16',
+                status: 'new',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 87736
+            },
+            {
+                id: 1094,
+                name: 'Elvera Benimadho',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Tree Musketeers',
+                date: '2019-02-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 50,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 38674
+            },
+            {
+                id: 1095,
+                name: 'Carma Vanheusen',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Springfield Div Oh Edison Co',
+                date: '2019-11-26',
+                status: 'renewal',
+                verified: false,
+                activity: 84,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 67762
+            },
+            {
+                id: 1096,
+                name: 'Malinda Hochard',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Logan Memorial Hospital',
+                date: '2016-07-06',
+                status: 'new',
+                verified: false,
+                activity: 88,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 81299
+            },
+            {
+                id: 1097,
+                name: 'Natalie Fern',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Kelly, Charles G Esq',
+                date: '2019-10-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 44,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 64794
+            },
+            {
+                id: 1098,
+                name: 'Lisha Centini',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Industrial Paper Shredders Inc',
+                date: '2018-07-05',
+                status: 'new',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 7815
+            },
+            {
+                id: 1099,
+                name: 'Arlene Klusman',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Beck Horizon Builders',
+                date: '2018-05-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 37976
+            },
+            {
+                id: 1100,
+                name: 'Alease Buemi',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Porto Cayo At Hawks Cay',
+                date: '2018-03-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 59594
+            },
+            {
+                id: 1101,
+                name: 'Louisa Cronauer',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Pacific Grove Museum Ntrl Hist',
+                date: '2018-09-23',
+                status: 'qualified',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 92528
+            },
+            {
+                id: 1102,
+                name: 'Angella Cetta',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Bender & Hatley Pc',
+                date: '2018-04-10',
+                status: 'qualified',
+                verified: false,
+                activity: 88,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 58964
+            },
+            {
+                id: 1103,
+                name: 'Cyndy Goldammer',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Di Cristina J & Son',
+                date: '2017-09-18',
+                status: 'unqualified',
+                verified: false,
+                activity: 92,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 65860
+            },
+            {
+                id: 1104,
+                name: 'Rosio Cork',
+                country: {
+                    name: 'Singapore',
+                    code: 'sg'
+                },
+                company: 'Green Goddess',
+                date: '2017-08-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 63863
+            },
+            {
+                id: 1105,
+                name: 'Celeste Korando',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'American Arts & Graphics',
+                date: '2020-06-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 21,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 37510
+            },
+            {
+                id: 1106,
+                name: 'Twana Felger',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Opryland Hotel',
+                date: '2016-11-18',
+                status: 'negotiation',
+                verified: false,
+                activity: 97,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 63876
+            },
+            {
+                id: 1107,
+                name: 'Estrella Samu',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Marking Devices Pubg Co',
+                date: '2017-06-25',
+                status: 'unqualified',
+                verified: false,
+                activity: 27,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 93263
+            },
+            {
+                id: 1108,
+                name: 'Donte Kines',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'W Tc Industries Inc',
+                date: '2019-02-16',
+                status: 'new',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 57198
+            },
+            {
+                id: 1109,
+                name: 'Tiffiny Steffensmeier',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Whitehall Robbins Labs Divsn',
+                date: '2018-03-11',
+                status: 'new',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 89147
+            },
+            {
+                id: 1110,
+                name: 'Edna Miceli',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Sampler',
+                date: '2017-10-15',
+                status: 'renewal',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 41466
+            },
+            {
+                id: 1111,
+                name: 'Sue Kownacki',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Juno Chefs Incorporated',
+                date: '2017-03-17',
+                status: 'negotiation',
+                verified: false,
+                activity: 31,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 38918
+            },
+            {
+                id: 1112,
+                name: 'Jesusa Shin',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Carroccio, A Thomas Esq',
+                date: '2017-04-06',
+                status: 'renewal',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 11397
+            },
+            {
+                id: 1113,
+                name: 'Rolland Francescon',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Stanley, Richard L Esq',
+                date: '2019-02-03',
+                status: 'qualified',
+                verified: false,
+                activity: 45,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 40930
+            },
+            {
+                id: 1114,
+                name: 'Pamella Schmierer',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'K Cs Cstm Mouldings Windows',
+                date: '2016-09-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 40847
+            },
+            {
+                id: 1115,
+                name: 'Glory Kulzer',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Comfort Inn',
+                date: '2017-09-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 36,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 27832
+            },
+            {
+                id: 1116,
+                name: 'Shawna Palaspas',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Windsor, James L Esq',
+                date: '2017-06-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 89060
+            },
+            {
+                id: 1117,
+                name: 'Brandon Callaro',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Jackson Shields Yeiser',
+                date: '2016-07-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 52474
+            },
+            {
+                id: 1118,
+                name: 'Scarlet Cartan',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Box, J Calvin Esq',
+                date: '2018-09-13',
+                status: 'renewal',
+                verified: false,
+                activity: 1,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 19094
+            },
+            {
+                id: 1119,
+                name: 'Oretha Menter',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Custom Engineering Inc',
+                date: '2017-09-11',
+                status: 'renewal',
+                verified: false,
+                activity: 8,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 93756
+            },
+            {
+                id: 1120,
+                name: 'Ty Smith',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Bresler Eitel Framg Gllry Ltd',
+                date: '2019-07-06',
+                status: 'unqualified',
+                verified: false,
+                activity: 50,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77388
+            },
+            {
+                id: 1121,
+                name: 'Xuan Rochin',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Carol, Drake Sparks Esq',
+                date: '2018-05-22',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 48759
+            },
+            {
+                id: 1122,
+                name: 'Lindsey Dilello',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Biltmore Investors Bank',
+                date: '2017-07-18',
+                status: 'renewal',
+                verified: true,
+                activity: 65,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 37568
+            },
+            {
+                id: 1123,
+                name: 'Devora Perez',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Desco Equipment Corp',
+                date: '2017-10-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 4477
+            },
+            {
+                id: 1124,
+                name: 'Herman Demesa',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Merlin Electric Co',
+                date: '2019-05-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 10,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13764
+            },
+            {
+                id: 1125,
+                name: 'Rory Papasergi',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Bailey Cntl Co Div Babcock',
+                date: '2019-03-02',
+                status: 'qualified',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 68222
+            },
+            {
+                id: 1126,
+                name: 'Talia Riopelle',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Ford Brothers Wholesale Inc',
+                date: '2017-02-18',
+                status: 'new',
+                verified: false,
+                activity: 69,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 29164
+            },
+            {
+                id: 1127,
+                name: 'Van Shire',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Cambridge Inn',
+                date: '2020-05-12',
+                status: 'new',
+                verified: false,
+                activity: 4,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 61651
+            },
+            {
+                id: 1128,
+                name: 'Lucina Lary',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Matricciani, Albert J Jr',
+                date: '2019-11-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 11,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 79938
+            },
+            {
+                id: 1129,
+                name: 'Bok Isaacs',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Nelson Hawaiian Ltd',
+                date: '2016-11-10',
+                status: 'negotiation',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 44037
+            },
+            {
+                id: 1130,
+                name: 'Rolande Spickerman',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Neland Travel Agency',
+                date: '2016-07-11',
+                status: 'renewal',
+                verified: true,
+                activity: 84,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 89918
+            },
+            {
+                id: 1131,
+                name: 'Howard Paulas',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Asendorf, J Alan Esq',
+                date: '2017-07-17',
+                status: 'negotiation',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 32372
+            },
+            {
+                id: 1132,
+                name: 'Kimbery Madarang',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Silberman, Arthur L Esq',
+                date: '2018-08-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 46478
+            },
+            {
+                id: 1133,
+                name: 'Thurman Manno',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Honey Bee Breeding Genetics &',
+                date: '2016-05-02',
+                status: 'qualified',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 30674
+            },
+            {
+                id: 1134,
+                name: 'Becky Mirafuentes',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Wells Kravitz Schnitzer',
+                date: '2018-04-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 47714
+            },
+            {
+                id: 1135,
+                name: 'Beatriz Corrington',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Prohab Rehabilitation Servs',
+                date: '2020-01-04',
+                status: 'renewal',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 14307
+            },
+            {
+                id: 1136,
+                name: 'Marti Maybury',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Eldridge, Kristin K Esq',
+                date: '2016-02-05',
+                status: 'unqualified',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 82069
+            },
+            {
+                id: 1137,
+                name: 'Nieves Gotter',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Vlahos, John J Esq',
+                date: '2017-03-12',
+                status: 'negotiation',
+                verified: false,
+                activity: 3,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 11182
+            },
+            {
+                id: 1138,
+                name: 'Leatha Hagele',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Ninas Indian Grs & Videos',
+                date: '2019-03-27',
+                status: 'unqualified',
+                verified: false,
+                activity: 67,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 17126
+            },
+            {
+                id: 1139,
+                name: 'Valentin Klimek',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Schmid, Gayanne K Esq',
+                date: '2019-08-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 19724
+            },
+            {
+                id: 1140,
+                name: 'Melissa Wiklund',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Moapa Valley Federal Credit Un',
+                date: '2018-03-20',
+                status: 'qualified',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 91888
+            },
+            {
+                id: 1141,
+                name: 'Sheridan Zane',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Kentucky Tennessee Clay Co',
+                date: '2016-02-15',
+                status: 'qualified',
+                verified: true,
+                activity: 17,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 15016
+            },
+            {
+                id: 1142,
+                name: 'Bulah Padilla',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Admiral Party Rentals & Sales',
+                date: '2016-02-10',
+                status: 'negotiation',
+                verified: false,
+                activity: 58,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 23118
+            },
+            {
+                id: 1143,
+                name: 'Audra Kohnert',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Nelson, Karolyn King Esq',
+                date: '2019-07-16',
+                status: 'unqualified',
+                verified: false,
+                activity: 82,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 90560
+            },
+            {
+                id: 1144,
+                name: 'Daren Weirather',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Panasystems',
+                date: '2015-07-23',
+                status: 'negotiation',
+                verified: false,
+                activity: 96,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 34155
+            },
+            {
+                id: 1145,
+                name: 'Fernanda Jillson',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Shank, Edward L Esq',
+                date: '2017-07-02',
+                status: 'unqualified',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 6350
+            },
+            {
+                id: 1146,
+                name: 'Gearldine Gellinger',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Megibow & Edwards',
+                date: '2019-08-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 18,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77641
+            },
+            {
+                id: 1147,
+                name: 'Chau Kitzman',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Benoff, Edward Esq',
+                date: '2019-07-04',
+                status: 'new',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 43289
+            },
+            {
+                id: 1148,
+                name: 'Theola Frey',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Woodbridge Free Public Library',
+                date: '2020-03-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 44,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 85657
+            },
+            {
+                id: 1149,
+                name: 'Cheryl Haroldson',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'New York Life John Thune',
+                date: '2018-04-03',
+                status: 'new',
+                verified: false,
+                activity: 55,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 82733
+            },
+            {
+                id: 1150,
+                name: 'Laticia Merced',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Alinabal Inc',
+                date: '2017-03-04',
+                status: 'unqualified',
+                verified: false,
+                activity: 21,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 38004
+            },
+            {
+                id: 1151,
+                name: 'Carissa Batman',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Poletto, Kim David Esq',
+                date: '2016-05-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 29038
+            },
+            {
+                id: 1152,
+                name: 'Lezlie Craghead',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Chang, Carolyn Esq',
+                date: '2019-05-28',
+                status: 'renewal',
+                verified: false,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 75123
+            },
+            {
+                id: 1153,
+                name: 'Ozell Shealy',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Silver Bros Inc',
+                date: '2016-08-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 33214
+            },
+            {
+                id: 1154,
+                name: 'Arminda Parvis',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Newtec Inc',
+                date: '2020-02-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 80651
+            },
+            {
+                id: 1155,
+                name: 'Reita Leto',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Creative Business Systems',
+                date: '2020-04-03',
+                status: 'unqualified',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 5085
+            },
+            {
+                id: 1156,
+                name: 'Yolando Luczki',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Dal Tile Corporation',
+                date: '2015-01-27',
+                status: 'renewal',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 93021
+            },
+            {
+                id: 1157,
+                name: 'Lizette Stem',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Edward S Katz',
+                date: '2018-08-06',
+                status: 'new',
+                verified: false,
+                activity: 67,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 37287
+            },
+            {
+                id: 1158,
+                name: 'Gregoria Pawlowicz',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Oh My Goodknits Inc',
+                date: '2020-02-20',
+                status: 'renewal',
+                verified: false,
+                activity: 29,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 73070
+            },
+            {
+                id: 1159,
+                name: 'Carin Deleo',
+                country: {
+                    name: 'China',
+                    code: 'cn'
+                },
+                company: 'Redeker, Debbie',
+                date: '2015-05-28',
+                status: 'qualified',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 64422
+            },
+            {
+                id: 1160,
+                name: 'Chantell Maynerich',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Desert Sands Motel',
+                date: '2016-09-05',
+                status: 'unqualified',
+                verified: true,
+                activity: 75,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 36826
+            },
+            {
+                id: 1161,
+                name: 'Dierdre Yum',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Cummins Southern Plains Inc',
+                date: '2016-12-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 1,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 93101
+            },
+            {
+                id: 1162,
+                name: 'Larae Gudroe',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Lehigh Furn Divsn Lehigh',
+                date: '2015-11-28',
+                status: 'unqualified',
+                verified: false,
+                activity: 13,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 60177
+            },
+            {
+                id: 1163,
+                name: 'Latrice Tolfree',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'United Van Lines Agent',
+                date: '2018-11-11',
+                status: 'renewal',
+                verified: false,
+                activity: 73,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 47198
+            },
+            {
+                id: 1164,
+                name: 'Kerry Theodorov',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Capitol Reporters',
+                date: '2016-11-05',
+                status: 'unqualified',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 71305
+            },
+            {
+                id: 1165,
+                name: 'Dorthy Hidvegi',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Kwik Kopy Printing',
+                date: '2020-08-13',
+                status: 'qualified',
+                verified: true,
+                activity: 60,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 17526
+            },
+            {
+                id: 1166,
+                name: 'Fannie Lungren',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'Centro Inc',
+                date: '2015-07-06',
+                status: 'negotiation',
+                verified: true,
+                activity: 24,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 16596
+            },
+            {
+                id: 1167,
+                name: 'Evangelina Radde',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Campbell, Jan Esq',
+                date: '2020-02-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 93,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 56870
+            },
+            {
+                id: 1168,
+                name: 'Novella Degroot',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Evans, C Kelly Esq',
+                date: '2017-12-19',
+                status: 'unqualified',
+                verified: false,
+                activity: 30,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82928
+            },
+            {
+                id: 1169,
+                name: 'Clay Hoa',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Scat Enterprises',
+                date: '2016-02-22',
+                status: 'negotiation',
+                verified: false,
+                activity: 93,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 64181
+            },
+            {
+                id: 1170,
+                name: 'Jennifer Fallick',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Nagle, Daniel J Esq',
+                date: '2016-12-24',
+                status: 'unqualified',
+                verified: true,
+                activity: 88,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 30561
+            },
+            {
+                id: 1171,
+                name: 'Irma Wolfgramm',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Serendiquity Bed & Breakfast',
+                date: '2020-10-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 24617
+            },
+            {
+                id: 1172,
+                name: 'Eun Coody',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Ray Carolyne Realty',
+                date: '2018-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 77860
+            },
+            {
+                id: 1173,
+                name: 'Sylvia Cousey',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Berg, Charles E',
+                date: '2018-06-10',
+                status: 'unqualified',
+                verified: false,
+                activity: 91,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 25664
+            },
+            {
+                id: 1174,
+                name: 'Nana Wrinkles',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Ray, Milbern D',
+                date: '2017-04-11',
+                status: 'renewal',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 98113
+            },
+            {
+                id: 1175,
+                name: 'Layla Springe',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Chadds Ford Winery',
+                date: '2019-07-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 97,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 14763
+            },
+            {
+                id: 1176,
+                name: 'Joesph Degonia',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'A R Packaging',
+                date: '2020-04-23',
+                status: 'renewal',
+                verified: true,
+                activity: 56,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 31317
+            },
+            {
+                id: 1177,
+                name: 'Annabelle Boord',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Corn Popper',
+                date: '2020-09-16',
+                status: 'negotiation',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 30883
+            },
+            {
+                id: 1178,
+                name: 'Stephaine Vinning',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Birite Foodservice Distr',
+                date: '2016-05-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 93785
+            },
+            {
+                id: 1179,
+                name: 'Nelida Sawchuk',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Anchorage Museum Of Hist & Art',
+                date: '2018-06-22',
+                status: 'qualified',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 68380
+            },
+            {
+                id: 1180,
+                name: 'Marguerita Hiatt',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Haber, George D Md',
+                date: '2018-10-25',
+                status: 'qualified',
+                verified: false,
+                activity: 72,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 93454
+            },
+            {
+                id: 1181,
+                name: 'Carmela Cookey',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Royal Pontiac Olds Inc',
+                date: '2018-07-19',
+                status: 'negotiation',
+                verified: false,
+                activity: 24,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 30570
+            },
+            {
+                id: 1182,
+                name: 'Junita Brideau',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Leonards Antiques Inc',
+                date: '2015-03-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 79506
+            },
+            {
+                id: 1183,
+                name: 'Claribel Varriano',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Meca',
+                date: '2017-04-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 15,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 8654
+            },
+            {
+                id: 1184,
+                name: 'Benton Skursky',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Nercon Engineering & Mfg Inc',
+                date: '2015-02-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13368
+            },
+            {
+                id: 1185,
+                name: 'Hillary Skulski',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Replica I',
+                date: '2016-03-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 92631
+            },
+            {
+                id: 1186,
+                name: 'Merilyn Bayless',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: '20 20 Printing Inc',
+                date: '2020-10-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 4989
+            },
+            {
+                id: 1187,
+                name: 'Teri Ennaco',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Publishers Group West',
+                date: '2019-12-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 77668
+            },
+            {
+                id: 1188,
+                name: 'Merlyn Lawler',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Nischwitz, Jeffrey L Esq',
+                date: '2016-02-26',
+                status: 'renewal',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 3525
+            },
+            {
+                id: 1189,
+                name: 'Georgene Montezuma',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Payne Blades & Wellborn Pa',
+                date: '2018-10-11',
+                status: 'new',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 45838
+            },
+            {
+                id: 1190,
+                name: 'Jettie Mconnell',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Coldwell Bnkr Wright Real Est',
+                date: '2015-10-18',
+                status: 'negotiation',
+                verified: false,
+                activity: 74,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 49148
+            },
+            {
+                id: 1191,
+                name: 'Lemuel Latzke',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Computer Repair Service',
+                date: '2016-02-13',
+                status: 'negotiation',
+                verified: false,
+                activity: 79,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 96709
+            },
+            {
+                id: 1192,
+                name: 'Melodie Knipp',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Fleetwood Building Block Inc',
+                date: '2018-03-08',
+                status: 'negotiation',
+                verified: false,
+                activity: 19,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 23253
+            },
+            {
+                id: 1193,
+                name: 'Candida Corbley',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Colts Neck Medical Assocs Inc',
+                date: '2017-12-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 11,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 40836
+            },
+            {
+                id: 1194,
+                name: 'Karan Karpin',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'New England Taxidermy',
+                date: '2019-01-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 60719
+            },
+            {
+                id: 1195,
+                name: 'Andra Scheyer',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Ludcke, George O Esq',
+                date: '2016-08-14',
+                status: 'qualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 17419
+            },
+            {
+                id: 1196,
+                name: 'Felicidad Poullion',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Mccorkle, Tom S Esq',
+                date: '2016-03-05',
+                status: 'renewal',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 94052
+            },
+            {
+                id: 1197,
+                name: 'Belen Strassner',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Eagle Software Inc',
+                date: '2015-12-14',
+                status: 'qualified',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 54241
+            },
+            {
+                id: 1198,
+                name: 'Gracia Melnyk',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Juvenile & Adult Super',
+                date: '2019-06-01',
+                status: 'unqualified',
+                verified: true,
+                activity: 40,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 87668
+            },
+            {
+                id: 1199,
+                name: 'Jolanda Hanafan',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Perez, Joseph J Esq',
+                date: '2015-12-09',
+                status: 'qualified',
+                verified: true,
+                activity: 27,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 99417
+            },
+            {
+                id: 1200,
+                name: 'Barrett Toyama',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Case Foundation Co',
+                date: '2019-08-16',
+                status: 'new',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 89792
+            },
+            {
+                id: 1201,
+                name: 'Helga Fredicks',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Eis Environmental Engrs Inc',
+                date: '2018-06-20',
+                status: 'new',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 42356
+            },
+            {
+                id: 1202,
+                name: 'Ashlyn Pinilla',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Art Crafters',
+                date: '2018-04-11',
+                status: 'unqualified',
+                verified: true,
+                activity: 5,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 90979
+            },
+            {
+                id: 1203,
+                name: 'Fausto Agramonte',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Marriott Hotels Resorts Suites',
+                date: '2019-06-25',
+                status: 'new',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 45082
+            },
+            {
+                id: 1204,
+                name: 'Ronny Caiafa',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Remaco Inc',
+                date: '2020-07-21',
+                status: 'new',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 9871
+            },
+            {
+                id: 1205,
+                name: 'Marge Limmel',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Bjork, Robert D Jr',
+                date: '2015-03-12',
+                status: 'unqualified',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 47043
+            },
+            {
+                id: 1206,
+                name: 'Norah Waymire',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Carmichael, Jeffery L Esq',
+                date: '2019-06-11',
+                status: 'renewal',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 92763
+            },
+            {
+                id: 1207,
+                name: 'Aliza Baltimore',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Andrews, J Robert Esq',
+                date: '2020-11-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 18075
+            },
+            {
+                id: 1208,
+                name: 'Mozell Pelkowski',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Winship \u0026 Byrne',
+                date: '2018-04-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 34393
+            },
+            {
+                id: 1209,
+                name: 'Viola Bitsuie',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Burton \u0026 Davis',
+                date: '2018-07-07',
+                status: 'new',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 16410
+            },
+            {
+                id: 1210,
+                name: 'Franklyn Emard',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Olympic Graphic Arts',
+                date: '2018-02-25',
+                status: 'qualified',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 1017
+            },
+            {
+                id: 1211,
+                name: 'Willodean Konopacki',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Magnuson',
+                date: '2017-10-03',
+                status: 'renewal',
+                verified: false,
+                activity: 20,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 77843
+            },
+            {
+                id: 1212,
+                name: 'Beckie Silvestrini',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'A All American Travel Inc',
+                date: '2016-11-26',
+                status: 'renewal',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 30549
+            },
+            {
+                id: 1213,
+                name: 'Rebecka Gesick',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Polykote Inc',
+                date: '2019-06-22',
+                status: 'renewal',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 51738
+            },
+            {
+                id: 1214,
+                name: 'Frederica Blunk',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Jets Cybernetics',
+                date: '2019-06-07',
+                status: 'renewal',
+                verified: true,
+                activity: 56,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 13111
+            },
+            {
+                id: 1215,
+                name: 'Glen Bartolet',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Metlab Testing Services',
+                date: '2015-02-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 85802
+            },
+            {
+                id: 1216,
+                name: 'Freeman Gochal',
+                country: {
+                    name: 'Slovenia',
+                    code: 'si'
+                },
+                company: 'Kellermann, William T Esq',
+                date: '2019-08-27',
+                status: 'negotiation',
+                verified: false,
+                activity: 2,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 89221
+            },
+            {
+                id: 1217,
+                name: 'Vincent Meinerding',
+                country: {
+                    name: 'United States',
+                    code: 'us'
+                },
+                company: 'Arturi, Peter D Esq',
+                date: '2018-06-18',
+                status: 'new',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 32661
+            },
+            {
+                id: 1218,
+                name: 'Rima Bevelacqua',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Mcauley Mfg Co',
+                date: '2019-05-18',
+                status: 'new',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 18809
+            },
+            {
+                id: 1219,
+                name: 'Glendora Sarbacher',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Defur Voran Hanley Radcliff',
+                date: '2018-04-21',
+                status: 'new',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 94374
+            },
+            {
+                id: 1220,
+                name: 'Avery Steier',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Dill Dill Carr \u0026 Stonbraker Pc',
+                date: '2017-07-27',
+                status: 'negotiation',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 45436
+            },
+            {
+                id: 1221,
+                name: 'Cristy Lother',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Kleensteel',
+                date: '2018-05-19',
+                status: 'renewal',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 72645
+            },
+            {
+                id: 1222,
+                name: 'Nicolette Brossart',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Goulds Pumps Inc Slurry Pump',
+                date: '2015-05-26',
+                status: 'new',
+                verified: false,
+                activity: 25,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 61023
+            },
+            {
+                id: 1223,
+                name: 'Tracey Modzelewski',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Kansas City Insurance Report',
+                date: '2019-07-02',
+                status: 'renewal',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 13685
+            },
+            {
+                id: 1224,
+                name: 'Virgina Tegarden',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Berhanu International Foods',
+                date: '2017-10-09',
+                status: 'qualified',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 84436
+            },
+            {
+                id: 1225,
+                name: 'Tiera Frankel',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Roland Ashcroft',
+                date: '2018-03-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 61860
+            },
+            {
+                id: 1226,
+                name: 'Alaine Bergesen',
+                country: {
+                    name: 'Peru',
+                    code: 'pe'
+                },
+                company: 'Hispanic Magazine',
+                date: '2017-08-10',
+                status: 'qualified',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 76679
+            },
+            {
+                id: 1227,
+                name: 'Earleen Mai',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Little Sheet Metal Co',
+                date: '2016-06-22',
+                status: 'negotiation',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 14959
+            },
+            {
+                id: 1228,
+                name: 'Leonida Gobern',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Holmes, Armstead J Esq',
+                date: '2020-02-24',
+                status: 'renewal',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 14174
+            },
+            {
+                id: 1229,
+                name: 'Ressie Auffrey',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Faw, James C Cpa',
+                date: '2016-10-21',
+                status: 'negotiation',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 80328
+            },
+            {
+                id: 1230,
+                name: 'Justine Mugnolo',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Evans Rule Company',
+                date: '2016-02-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 56392
+            },
+            {
+                id: 1231,
+                name: 'Eladia Saulter',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Tyee Productions Inc',
+                date: '2016-03-10',
+                status: 'new',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 17176
+            },
+            {
+                id: 1232,
+                name: 'Chaya Malvin',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Dunnells \u0026 Duvall',
+                date: '2016-07-22',
+                status: 'renewal',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 90141
+            },
+            {
+                id: 1233,
+                name: 'Gwenn Suffield',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Deltam Systems Inc',
+                date: '2019-06-23',
+                status: 'qualified',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 38187
+            },
+            {
+                id: 1234,
+                name: 'Salena Karpel',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Hammill Mfg Co',
+                date: '2016-08-02',
+                status: 'renewal',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 35596
+            },
+            {
+                id: 1235,
+                name: 'Yoko Fishburne',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Sams Corner Store',
+                date: '2017-08-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 73,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 73926
+            },
+            {
+                id: 1236,
+                name: 'Taryn Moyd',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Siskin, Mark J Esq',
+                date: '2016-12-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 38375
+            },
+            {
+                id: 1237,
+                name: 'Katina Polidori',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Cape \u0026 Associates Real Estate',
+                date: '2016-08-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 37,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 35932
+            },
+            {
+                id: 1238,
+                name: 'Rickie Plumer',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Merrill Lynch',
+                date: '2018-11-04',
+                status: 'unqualified',
+                verified: true,
+                activity: 71,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 28331
+            },
+            {
+                id: 1239,
+                name: 'Alex Loader',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Sublett, Scott Esq',
+                date: '2016-01-07',
+                status: 'unqualified',
+                verified: false,
+                activity: 22,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 33549
+            },
+            {
+                id: 1240,
+                name: 'Lashon Vizarro',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Sentry Signs',
+                date: '2019-08-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 63860
+            },
+            {
+                id: 1241,
+                name: 'Lauran Burnard',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Professionals Unlimited',
+                date: '2016-04-27',
+                status: 'renewal',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 34992
+            },
+            {
+                id: 1242,
+                name: 'Ceola Setter',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Southern Steel Shelving Co',
+                date: '2017-05-13',
+                status: 'qualified',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 97068
+            },
+            {
+                id: 1243,
+                name: 'My Rantanen',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Bosco, Paul J',
+                date: '2017-09-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 60,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 2316
+            },
+            {
+                id: 1244,
+                name: 'Lorrine Worlds',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Longo, Nicholas J Esq',
+                date: '2018-05-10',
+                status: 'renewal',
+                verified: true,
+                activity: 51,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 89374
+            },
+            {
+                id: 1245,
+                name: 'Peggie Sturiale',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Henry County Middle School',
+                date: '2019-11-03',
+                status: 'renewal',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 51152
+            },
+            {
+                id: 1246,
+                name: 'Marvel Raymo',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Edison Supply \u0026 Equipment Co',
+                date: '2016-03-08',
+                status: 'renewal',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 39848
+            },
+            {
+                id: 1247,
+                name: 'Daron Dinos',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Wolf, Warren R Esq',
+                date: '2016-03-25',
+                status: 'unqualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 35060
+            },
+            {
+                id: 1248,
+                name: 'An Fritz',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Linguistic Systems Inc',
+                date: '2017-08-04',
+                status: 'negotiation',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 23037
+            },
+            {
+                id: 1249,
+                name: 'Portia Stimmel',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Peace Christian Center',
+                date: '2020-01-13',
+                status: 'qualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 35637
+            },
+            {
+                id: 1250,
+                name: 'Rhea Aredondo',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Double B Foods Inc',
+                date: '2016-06-19',
+                status: 'qualified',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 70379
+            },
+            {
+                id: 1251,
+                name: 'Benedict Sama',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Alexander \u0026 Alexander Inc',
+                date: '2018-08-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 99271
+            },
+            {
+                id: 1252,
+                name: 'Alyce Arias',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Fairbanks Scales',
+                date: '2018-09-14',
+                status: 'new',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 69658
+            },
+            {
+                id: 1253,
+                name: 'Heike Berganza',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Cali Sportswear Cutting Dept',
+                date: '2019-01-21',
+                status: 'unqualified',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 78159
+            },
+            {
+                id: 1254,
+                name: 'Carey Dopico',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Garofani, John Esq',
+                date: '2020-05-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 84097
+            },
+            {
+                id: 1255,
+                name: 'Dottie Hellickson',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Thompson Fabricating Co',
+                date: '2016-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 54606
+            },
+            {
+                id: 1256,
+                name: 'Deandrea Hughey',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Century 21 Krall Real Estate',
+                date: '2018-09-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 2730
+            },
+            {
+                id: 1257,
+                name: 'Kimberlie Duenas',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Mid Contntl Rlty \u0026 Prop Mgmt',
+                date: '2015-07-27',
+                status: 'qualified',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 71836
+            },
+            {
+                id: 1258,
+                name: 'Martina Staback',
+                country: {
+                    name: 'Luxembourg',
+                    code: 'lu'
+                },
+                company: 'Ace Signs Inc',
+                date: '2017-02-14',
+                status: 'new',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 37044
+            },
+            {
+                id: 1259,
+                name: 'Skye Fillingim',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Rodeway Inn',
+                date: '2017-02-12',
+                status: 'new',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 5990
+            },
+            {
+                id: 1260,
+                name: 'Jade Farrar',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Bonnet \u0026 Daughter',
+                date: '2017-02-23',
+                status: 'new',
+                verified: true,
+                activity: 73,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 7878
+            },
+            {
+                id: 1261,
+                name: 'Charlene Hamilton',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Oshins \u0026 Gibbons',
+                date: '2017-09-23',
+                status: 'unqualified',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 38077
+            },
+            {
+                id: 1262,
+                name: 'Geoffrey Acey',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Price Business Services',
+                date: '2019-10-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 24537
+            },
+            {
+                id: 1263,
+                name: 'Stevie Westerbeck',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Wise, Dennis W Md',
+                date: '2017-08-01',
+                status: 'renewal',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 19164
+            },
+            {
+                id: 1264,
+                name: 'Pamella Fortino',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Super 8 Motel',
+                date: '2018-09-03',
+                status: 'new',
+                verified: true,
+                activity: 100,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 21880
+            },
+            {
+                id: 1265,
+                name: 'Harrison Haufler',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'John Wagner Associates',
+                date: '2016-08-25',
+                status: 'qualified',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 14975
+            },
+            {
+                id: 1266,
+                name: 'Johnna Engelberg',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Thrifty Oil Co',
+                date: '2019-06-02',
+                status: 'renewal',
+                verified: true,
+                activity: 1,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 28001
+            },
+            {
+                id: 1267,
+                name: 'Buddy Cloney',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Larkfield Photo',
+                date: '2020-05-14',
+                status: 'qualified',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 44811
+            },
+            {
+                id: 1268,
+                name: 'Dalene Riden',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Silverman Planetarium',
+                date: '2019-08-23',
+                status: 'renewal',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 70963
+            },
+            {
+                id: 1269,
+                name: 'Jerry Zurcher',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'J \u0026 F Lumber',
+                date: '2015-05-11',
+                status: 'renewal',
+                verified: true,
+                activity: 52,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 27808
+            },
+            {
+                id: 1270,
+                name: 'Haydee Denooyer',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Cleaning Station Inc',
+                date: '2016-04-17',
+                status: 'qualified',
+                verified: true,
+                activity: 80,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 41216
+            },
+            {
+                id: 1271,
+                name: 'Joseph Cryer',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Ames Stationers',
+                date: '2019-11-26',
+                status: 'qualified',
+                verified: true,
+                activity: 53,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 8819
+            },
+            {
+                id: 1272,
+                name: 'Deonna Kippley',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Midas Muffler Shops',
+                date: '2017-08-26',
+                status: 'qualified',
+                verified: true,
+                activity: 52,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 77610
+            },
+            {
+                id: 1273,
+                name: 'Raymon Calvaresi',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Seaboard Securities Inc',
+                date: '2017-07-09',
+                status: 'qualified',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 80612
+            },
+            {
+                id: 1274,
+                name: 'Alecia Bubash',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Petersen, James E Esq',
+                date: '2016-05-19',
+                status: 'new',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 45311
+            },
+            {
+                id: 1275,
+                name: 'Ma Layous',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Development Authority',
+                date: '2016-02-11',
+                status: 'qualified',
+                verified: false,
+                activity: 2,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 88737
+            },
+            {
+                id: 1276,
+                name: 'Detra Coyier',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'Schott Fiber Optics Inc',
+                date: '2019-06-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13224
+            },
+            {
+                id: 1277,
+                name: 'Terrilyn Rodeigues',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Stuart J Agins',
+                date: '2016-08-04',
+                status: 'renewal',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 64656
+            },
+            {
+                id: 1278,
+                name: 'Salome Lacovara',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Mitsumi Electronics Corp',
+                date: '2015-06-05',
+                status: 'unqualified',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 61947
+            },
+            {
+                id: 1279,
+                name: 'Garry Keetch',
+                country: {
+                    name: 'Luxembourg',
+                    code: 'lu'
+                },
+                company: 'Italian Express Franchise Corp',
+                date: '2015-06-20',
+                status: 'unqualified',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 6380
+            },
+            {
+                id: 1280,
+                name: 'Matthew Neither',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'American Council On Sci \u0026 Hlth',
+                date: '2018-06-24',
+                status: 'qualified',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 80112
+            },
+            {
+                id: 1281,
+                name: 'Theodora Restrepo',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Kleri, Patricia S Esq',
+                date: '2017-08-15',
+                status: 'renewal',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 42038
+            },
+            {
+                id: 1282,
+                name: 'Noah Kalafatis',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Twiggs Abrams Blanchard',
+                date: '2020-06-24',
+                status: 'negotiation',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 36052
+            },
+            {
+                id: 1283,
+                name: 'Carmen Sweigard',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Maui Research \u0026 Technology Pk',
+                date: '2019-08-08',
+                status: 'new',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 51660
+            },
+            {
+                id: 1284,
+                name: 'Lavonda Hengel',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Bradley Nameplate Corp',
+                date: '2019-10-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 56142
+            },
+            {
+                id: 1285,
+                name: 'Junita Stoltzman',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Geonex Martel Inc',
+                date: '2015-03-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21631
+            },
+            {
+                id: 1286,
+                name: 'Herminia Nicolozakes',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Sea Island Div Of Fstr Ind Inc',
+                date: '2019-09-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 59171
+            },
+            {
+                id: 1287,
+                name: 'Casie Good',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Papay, Debbie J Esq',
+                date: '2016-11-27',
+                status: 'new',
+                verified: true,
+                activity: 87,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 97858
+            },
+            {
+                id: 1288,
+                name: 'Reena Maisto',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Lane Promotions',
+                date: '2016-08-22',
+                status: 'new',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 90388
+            },
+            {
+                id: 1289,
+                name: 'Mirta Mallett',
+                country: {
+                    name: 'Singapore',
+                    code: 'sg'
+                },
+                company: 'Stephen Kennerly Archts Inc Pc',
+                date: '2017-11-27',
+                status: 'renewal',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 68632
+            },
+            {
+                id: 1290,
+                name: 'Cathrine Pontoriero',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'Business Systems Of Wis Inc',
+                date: '2020-02-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 95552
+            },
+            {
+                id: 1291,
+                name: 'Filiberto Tawil',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Flash, Elena Salerno Esq',
+                date: '2018-01-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 39725
+            },
+            {
+                id: 1292,
+                name: 'Raul Upthegrove',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Neeley, Gregory W Esq',
+                date: '2019-11-16',
+                status: 'renewal',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 62251
+            },
+            {
+                id: 1293,
+                name: 'Sarah Candlish',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Alabama Educational Tv Comm',
+                date: '2019-06-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 73523
+            },
+            {
+                id: 1294,
+                name: 'Lucy Treston',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Franz Inc',
+                date: '2017-02-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 41331
+            },
+            {
+                id: 1295,
+                name: 'Judy Aquas',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Plantation Restaurant',
+                date: '2020-09-14',
+                status: 'renewal',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 24208
+            },
+            {
+                id: 1296,
+                name: 'Yvonne Tjepkema',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Radio Communications Co',
+                date: '2017-01-06',
+                status: 'renewal',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 56409
+            },
+            {
+                id: 1297,
+                name: 'Kayleigh Lace',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Dentalaw Divsn Hlth Care',
+                date: '2019-11-04',
+                status: 'negotiation',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 70025
+            },
+            {
+                id: 1298,
+                name: 'Felix Hirpara',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'American Speedy Printing Ctrs',
+                date: '2015-03-13',
+                status: 'new',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 88115
+            },
+            {
+                id: 1299,
+                name: 'Tresa Sweely',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Grayson, Grant S Esq',
+                date: '2019-12-22',
+                status: 'negotiation',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 69703
+            },
+            {
+                id: 1300,
+                name: 'Kristeen Turinetti',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Jeanerette Middle School',
+                date: '2017-09-28',
+                status: 'new',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 10718
+            },
+            {
+                id: 1301,
+                name: 'Jenelle Regusters',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Haavisto, Brian F Esq',
+                date: '2019-07-27',
+                status: 'qualified',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 29825
+            },
+            {
+                id: 1302,
+                name: 'Renea Monterrubio',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Wmmt Radio Station',
+                date: '2016-03-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 73,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 90351
+            },
+            {
+                id: 1303,
+                name: 'Olive Matuszak',
+                country: {
+                    name: 'Germany',
+                    code: 'de'
+                },
+                company: 'Colony Paints Sales Ofc \u0026 Plnt',
+                date: '2018-04-15',
+                status: 'unqualified',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 75682
+            },
+            {
+                id: 1304,
+                name: 'Ligia Reiber',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'Floral Expressions',
+                date: '2017-02-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 51,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 74935
+            },
+            {
+                id: 1305,
+                name: 'Christiane Eschberger',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Casco Services Inc',
+                date: '2018-03-27',
+                status: 'unqualified',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 5254
+            },
+            {
+                id: 1306,
+                name: 'Goldie Schirpke',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Reuter, Arthur C Jr',
+                date: '2015-04-21',
+                status: 'renewal',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 37306
+            },
+            {
+                id: 1307,
+                name: 'Loreta Timenez',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Kaminski, Katherine Andritsaki',
+                date: '2015-07-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 29,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 70520
+            },
+            {
+                id: 1308,
+                name: 'Fabiola Hauenstein',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Sidewinder Products Corp',
+                date: '2015-12-12',
+                status: 'renewal',
+                verified: true,
+                activity: 42,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 74510
+            },
+            {
+                id: 1309,
+                name: 'Amie Perigo',
+                country: {
+                    name: 'Russia',
+                    code: 'ru'
+                },
+                company: 'General Foam Corporation',
+                date: '2016-06-13',
+                status: 'new',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 74410
+            },
+            {
+                id: 1310,
+                name: 'Raina Brachle',
+                country: {
+                    name: 'Greece',
+                    code: 'gr'
+                },
+                company: 'Ikg Borden Divsn Harsco Corp',
+                date: '2016-11-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 56116
+            },
+            {
+                id: 1311,
+                name: 'Erinn Canlas',
+                country: {
+                    name: 'United Kingdom',
+                    code: 'gb'
+                },
+                company: 'Anchor Computer Inc',
+                date: '2018-12-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 89,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 46518
+            },
+            {
+                id: 1312,
+                name: 'Cherry Lietz',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Sebring \u0026 Co',
+                date: '2017-11-04',
+                status: 'qualified',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 92213
+            },
+            {
+                id: 1313,
+                name: 'Kattie Vonasek',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'H A C Farm Lines Co Optv Assoc',
+                date: '2017-02-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 58,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 6405
+            },
+            {
+                id: 1314,
+                name: 'Lilli Scriven',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Hunter, John J Esq',
+                date: '2017-04-15',
+                status: 'qualified',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 92900
+            },
+            {
+                id: 1315,
+                name: 'Whitley Tomasulo',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Freehold Fence Co',
+                date: '2017-11-16',
+                status: 'qualified',
+                verified: true,
+                activity: 6,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 86727
+            },
+            {
+                id: 1316,
+                name: 'Barbra Adkin',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Binswanger',
+                date: '2019-07-24',
+                status: 'qualified',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 48040
+            },
+            {
+                id: 1317,
+                name: 'Hermila Thyberg',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Chilton Malting Co',
+                date: '2016-11-05',
+                status: 'qualified',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 24026
+            },
+            {
+                id: 1318,
+                name: 'Jesusita Flister',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Schoen, Edward J Jr',
+                date: '2017-03-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 29,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 76388
+            },
+            {
+                id: 1319,
+                name: 'Caitlin Julia',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Helderman, Seymour Cpa',
+                date: '2018-03-13',
+                status: 'renewal',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 89068
+            },
+            {
+                id: 1320,
+                name: 'Roosevelt Hoffis',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Denbrook, Myron',
+                date: '2019-04-14',
+                status: 'new',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 12727
+            },
+            {
+                id: 1321,
+                name: 'Helaine Halter',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Lippitt, Mike',
+                date: '2019-09-28',
+                status: 'renewal',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 83411
+            },
+            {
+                id: 1322,
+                name: 'Lorean Martabano',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Hiram, Hogg P Esq',
+                date: '2017-03-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 44242
+            },
+            {
+                id: 1323,
+                name: 'France Buzick',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'In Travel Agency',
+                date: '2016-12-14',
+                status: 'renewal',
+                verified: true,
+                activity: 22,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 5644
+            },
+            {
+                id: 1324,
+                name: 'Justine Ferrario',
+                country: {
+                    name: 'Ukraine',
+                    code: 'ua'
+                },
+                company: 'Newhart Foods Inc',
+                date: '2015-09-07',
+                status: 'unqualified',
+                verified: true,
+                activity: 7,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 29321
+            },
+            {
+                id: 1325,
+                name: 'Adelina Nabours',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Courtyard By Marriott',
+                date: '2018-05-26',
+                status: 'renewal',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 13353
+            },
+            {
+                id: 1326,
+                name: 'Derick Dhamer',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Studer, Eugene A Esq',
+                date: '2020-07-04',
+                status: 'new',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 53454
+            },
+            {
+                id: 1327,
+                name: 'Jerry Dallen',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Seashore Supply Co Waretown',
+                date: '2015-10-23',
+                status: 'renewal',
+                verified: false,
+                activity: 21,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 30074
+            },
+            {
+                id: 1328,
+                name: 'Leota Ragel',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Mayar Silk Inc',
+                date: '2019-06-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 74,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 36310
+            },
+            {
+                id: 1329,
+                name: 'Jutta Amyot',
+                country: {
+                    name: 'Cameroon',
+                    code: 'cm'
+                },
+                company: 'National Medical Excess Corp',
+                date: '2019-09-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 27563
+            },
+            {
+                id: 1330,
+                name: 'Aja Gehrett',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Stero Company',
+                date: '2018-01-28',
+                status: 'qualified',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 45163
+            },
+            {
+                id: 1331,
+                name: 'Kirk Herritt',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Hasting, H Duane Esq',
+                date: '2018-10-24',
+                status: 'renewal',
+                verified: false,
+                activity: 2,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 52970
+            },
+            {
+                id: 1332,
+                name: 'Leonora Mauson',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Insty Prints',
+                date: '2019-02-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 18922
+            },
+            {
+                id: 1333,
+                name: 'Winfred Brucato',
+                country: {
+                    name: 'Austria',
+                    code: 'at'
+                },
+                company: 'Glenridge Manor Mobile Home Pk',
+                date: '2019-08-16',
+                status: 'renewal',
+                verified: true,
+                activity: 8,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 59632
+            },
+            {
+                id: 1334,
+                name: 'Tarra Nachor',
+                country: {
+                    name: 'Panama',
+                    code: 'pa'
+                },
+                company: 'Circuit Solution Inc',
+                date: '2019-07-10',
+                status: 'negotiation',
+                verified: true,
+                activity: 88,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 6733
+            },
+            {
+                id: 1335,
+                name: 'Corinne Loder',
+                country: {
+                    name: 'Brazil',
+                    code: 'br'
+                },
+                company: 'Local Office',
+                date: '2016-05-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 22704
+            },
+            {
+                id: 1336,
+                name: 'Dulce Labreche',
+                country: {
+                    name: 'South Africa',
+                    code: 'za'
+                },
+                company: 'Lee Kilkelly Paulson \u0026 Kabaker',
+                date: '2019-11-10',
+                status: 'qualified',
+                verified: true,
+                activity: 24,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82613
+            },
+            {
+                id: 1337,
+                name: 'Kate Keneipp',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Davis, Maxon R Esq',
+                date: '2019-06-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 44,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 97960
+            },
+            {
+                id: 1338,
+                name: 'Kaitlyn Ogg',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Garrison, Paul E Esq',
+                date: '2019-08-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 63123
+            },
+            {
+                id: 1339,
+                name: 'Sherita Saras',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Black History Resource Center',
+                date: '2017-06-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 38090
+            },
+            {
+                id: 1340,
+                name: 'Lashawnda Stuer',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Rodriguez, J Christopher Esq',
+                date: '2018-01-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 6,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 58826
+            },
+            {
+                id: 1341,
+                name: 'Ernest Syrop',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Grant Family Health Center',
+                date: '2016-10-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 22419
+            },
+            {
+                id: 1342,
+                name: 'Nobuko Halsey',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Goeman Wood Products Inc',
+                date: '2019-01-02',
+                status: 'unqualified',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 86006
+            },
+            {
+                id: 1343,
+                name: 'Lavonna Wolny',
+                country: {
+                    name: 'Czech Republic',
+                    code: 'cz'
+                },
+                company: 'Linhares, Kenneth A Esq',
+                date: '2019-03-09',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 40641
+            },
+            {
+                id: 1344,
+                name: 'Lashaunda Lizama',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Earnhardt Printing',
+                date: '2016-02-16',
+                status: 'negotiation',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 73493
+            },
+            {
+                id: 1345,
+                name: 'Mariann Bilden',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'H P G Industrys Inc',
+                date: '2019-12-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 20,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 87704
+            },
+            {
+                id: 1346,
+                name: 'Helene Rodenberger',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Bailey Transportation Prod Inc',
+                date: '2016-09-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 26,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 19662
+            },
+            {
+                id: 1347,
+                name: 'Roselle Estell',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Mcglynn Bliss Pc',
+                date: '2016-11-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 80,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 80534
+            },
+            {
+                id: 1348,
+                name: 'Samira Heintzman',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Mutual Fish Co',
+                date: '2019-11-26',
+                status: 'qualified',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 19473
+            },
+            {
+                id: 1349,
+                name: 'Margart Meisel',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Yeates, Arthur L Aia',
+                date: '2019-10-27',
+                status: 'negotiation',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 89796
+            },
+            {
+                id: 1350,
+                name: 'Kristofer Bennick',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Logan, Ronald J Esq',
+                date: '2016-02-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 5,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 54429
+            },
+            {
+                id: 1351,
+                name: 'Weldon Acuff',
+                country: {
+                    name: 'Estonia',
+                    code: 'ee'
+                },
+                company: 'Advantage Martgage Company',
+                date: '2019-10-22',
+                status: 'qualified',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 16134
+            },
+            {
+                id: 1352,
+                name: 'Shalon Shadrick',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Germer And Gertz Llp',
+                date: '2015-01-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 9173
+            },
+            {
+                id: 1353,
+                name: 'Denise Patak',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Spence Law Offices',
+                date: '2016-11-03',
+                status: 'qualified',
+                verified: true,
+                activity: 77,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 42857
+            },
+            {
+                id: 1354,
+                name: 'Louvenia Beech',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'John Ortiz Nts Therapy Center',
+                date: '2016-04-11',
+                status: 'renewal',
+                verified: true,
+                activity: 62,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 54300
+            },
+            {
+                id: 1355,
+                name: 'Audry Yaw',
+                country: {
+                    name: 'Portugal',
+                    code: 'pt'
+                },
+                company: 'Mike Uchrin Htg \u0026 Air Cond Inc',
+                date: '2017-11-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 94652
+            },
+            {
+                id: 1356,
+                name: 'Kristel Ehmann',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Mccoy, Joy Reynolds Esq',
+                date: '2016-06-23',
+                status: 'new',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 88295
+            },
+            {
+                id: 1357,
+                name: 'Vincenza Zepp',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Kbor 1600 Am',
+                date: '2016-01-04',
+                status: 'qualified',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 92710
+            },
+            {
+                id: 1358,
+                name: 'Elouise Gwalthney',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'Quality Inn Northwest',
+                date: '2016-04-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 25145
+            },
+            {
+                id: 1359,
+                name: 'Venita Maillard',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Wallace Church Assoc Inc',
+                date: '2016-03-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 61630
+            },
+            {
+                id: 1360,
+                name: 'Kasandra Semidey',
+                country: {
+                    name: 'Indonesia',
+                    code: 'id'
+                },
+                company: 'Can Tron',
+                date: '2015-09-03',
+                status: 'new',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 66134
+            },
+            {
+                id: 1361,
+                name: 'Xochitl Discipio',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Ravaal Enterprises Inc',
+                date: '2016-11-14',
+                status: 'qualified',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 14822
+            },
+            {
+                id: 1362,
+                name: 'Maile Linahan',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Thompson Steel Company Inc',
+                date: '2016-07-24',
+                status: 'new',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 17759
+            },
+            {
+                id: 1363,
+                name: 'Krissy Rauser',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Anderson, Mark A Esq',
+                date: '2020-03-06',
+                status: 'renewal',
+                verified: true,
+                activity: 33,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 14922
+            },
+            {
+                id: 1364,
+                name: 'Pete Dubaldi',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Womack \u0026 Galich',
+                date: '2015-11-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 96575
+            },
+            {
+                id: 1365,
+                name: 'Linn Paa',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Valerie \u0026 Company',
+                date: '2015-08-12',
+                status: 'unqualified',
+                verified: true,
+                activity: 26,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 5847
+            },
+            {
+                id: 1366,
+                name: 'Paris Wide',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Gehring Pumps Inc',
+                date: '2018-10-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 90,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 22929
+            },
+            {
+                id: 1367,
+                name: 'Wynell Dorshorst',
+                country: {
+                    name: 'Romania',
+                    code: 'ro'
+                },
+                company: 'Haehnel, Craig W Esq',
+                date: '2018-05-10',
+                status: 'new',
+                verified: true,
+                activity: 60,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 31837
+            },
+            {
+                id: 1368,
+                name: 'Quentin Birkner',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Spoor Behrins Campbell \u0026 Young',
+                date: '2019-02-03',
+                status: 'unqualified',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 27095
+            },
+            {
+                id: 1369,
+                name: 'Regenia Kannady',
+                country: {
+                    name: 'Portugal',
+                    code: 'pt'
+                },
+                company: 'Ken Jeter Store Equipment Inc',
+                date: '2018-07-13',
+                status: 'new',
+                verified: true,
+                activity: 74,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 43696
+            },
+            {
+                id: 1370,
+                name: 'Sheron Louissant',
+                country: {
+                    name: 'France',
+                    code: 'fr'
+                },
+                company: 'Potter, Brenda J Cpa',
+                date: '2017-01-04',
+                status: 'qualified',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 79897
+            },
+            {
+                id: 1371,
+                name: 'Izetta Funnell',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Baird Kurtz \u0026 Dobson',
+                date: '2019-11-05',
+                status: 'new',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 27264
+            },
+            {
+                id: 1372,
+                name: 'Rodolfo Butzen',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Minor, Cynthia A Esq',
+                date: '2020-09-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 17,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 16490
+            },
+            {
+                id: 1373,
+                name: 'Zona Colla',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Solove, Robert A Esq',
+                date: '2020-10-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 21990
+            },
+            {
+                id: 1374,
+                name: 'Serina Zagen',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Mark Ii Imports Inc',
+                date: '2018-07-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 11918
+            },
+            {
+                id: 1375,
+                name: 'Paz Sahagun',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'White Sign Div Ctrl Equip Co',
+                date: '2018-03-23',
+                status: 'negotiation',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 13268
+            },
+            {
+                id: 1376,
+                name: 'Markus Lukasik',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'M \u0026 M Store Fixtures Co Inc',
+                date: '2018-03-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 23,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 15941
+            },
+            {
+                id: 1377,
+                name: 'Jaclyn Bachman',
+                country: {
+                    name: 'Slovakia',
+                    code: 'sk'
+                },
+                company: 'Judah Caster \u0026 Wheel Co',
+                date: '2020-10-20',
+                status: 'new',
+                verified: true,
+                activity: 10,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 53132
+            },
+            {
+                id: 1378,
+                name: 'Cyril Daufeldt',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Galaxy International Inc',
+                date: '2019-02-11',
+                status: 'qualified',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 47531
+            },
+            {
+                id: 1379,
+                name: 'Gayla Schnitzler',
+                country: {
+                    name: 'Brazil',
+                    code: 'br'
+                },
+                company: 'Sigma Corp Of America',
+                date: '2017-09-15',
+                status: 'new',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 88950
+            },
+            {
+                id: 1380,
+                name: 'Erick Nievas',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Soward, Anne Esq',
+                date: '2018-10-07',
+                status: 'negotiation',
+                verified: false,
+                activity: 28,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 88497
+            },
+            {
+                id: 1381,
+                name: 'Jennie Drymon',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'Osborne, Michelle M Esq',
+                date: '2016-09-14',
+                status: 'negotiation',
+                verified: true,
+                activity: 80,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 60634
+            },
+            {
+                id: 1382,
+                name: 'Mitsue Scipione',
+                country: {
+                    name: 'Ecuador',
+                    code: 'ec'
+                },
+                company: 'Students In Free Entrprs Natl',
+                date: '2019-07-28',
+                status: 'qualified',
+                verified: true,
+                activity: 24,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21164
+            },
+            {
+                id: 1383,
+                name: 'Ciara Ventura',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Johnson, Robert M Esq',
+                date: '2018-04-02',
+                status: 'renewal',
+                verified: false,
+                activity: 24,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 83645
+            },
+            {
+                id: 1384,
+                name: 'Galen Cantres',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Del Charro Apartments',
+                date: '2020-02-16',
+                status: 'unqualified',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 32433
+            },
+            {
+                id: 1385,
+                name: 'Truman Feichtner',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Legal Search Inc',
+                date: '2019-10-16',
+                status: 'renewal',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 96983
+            },
+            {
+                id: 1386,
+                name: 'Gail Kitty',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Service Supply Co Inc',
+                date: '2020-01-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 67,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 72211
+            },
+            {
+                id: 1387,
+                name: 'Dalene Schoeneck',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Sameshima, Douglas J Esq',
+                date: '2019-11-27',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 40262
+            },
+            {
+                id: 1388,
+                name: 'Gertude Witten',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Thompson, John Randolph Jr',
+                date: '2017-08-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 40,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 91139
+            },
+            {
+                id: 1389,
+                name: 'Lizbeth Kohl',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'E T Balancing Co Inc',
+                date: '2019-04-20',
+                status: 'qualified',
+                verified: true,
+                activity: 57,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 79659
+            },
+            {
+                id: 1390,
+                name: 'Glenn Berray',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Griswold, John E Esq',
+                date: '2017-08-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 68,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 93576
+            },
+            {
+                id: 1391,
+                name: 'Lashandra Klang',
+                country: {
+                    name: 'Bulgaria',
+                    code: 'bg'
+                },
+                company: 'Acqua Group',
+                date: '2016-06-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 93576
+            },
+            {
+                id: 1392,
+                name: 'Lenna Newville',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Brooks, Morris J Jr',
+                date: '2020-09-12',
+                status: 'qualified',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 93576
+            },
+            {
+                id: 1393,
+                name: 'Laurel Pagliuca',
+                country: {
+                    name: 'Russia',
+                    code: 'ru'
+                },
+                company: 'Printing Images Corp',
+                date: '2017-05-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 21,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 2009
+            },
+            {
+                id: 1394,
+                name: 'Mireya Frerking',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'Roberts Supply Co Inc',
+                date: '2017-04-21',
+                status: 'renewal',
+                verified: true,
+                activity: 54,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 35341
+            },
+            {
+                id: 1395,
+                name: 'Annelle Tagala',
+                country: {
+                    name: 'Colombia',
+                    code: 'co'
+                },
+                company: 'Vico Products Mfg Co',
+                date: '2017-10-02',
+                status: 'negotiation',
+                verified: true,
+                activity: 53,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 13077
+            },
+            {
+                id: 1396,
+                name: 'Dean Ketelsen',
+                country: {
+                    name: 'Ivory Coast',
+                    code: 'ci'
+                },
+                company: 'J M Custom Design Millwork',
+                date: '2019-07-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 98,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 83423
+            },
+            {
+                id: 1397,
+                name: 'Levi Munis',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Farrell \u0026 Johnson Office Equip',
+                date: '2017-06-24',
+                status: 'negotiation',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 14350
+            },
+            {
+                id: 1398,
+                name: 'Sylvie Ryser',
+                country: {
+                    name: 'India',
+                    code: 'in'
+                },
+                company: 'Millers Market \u0026 Deli',
+                date: '2016-02-23',
+                status: 'unqualified',
+                verified: true,
+                activity: 89,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 98864
+            },
+            {
+                id: 1399,
+                name: 'Sharee Maile',
+                country: {
+                    name: 'Ireland',
+                    code: 'ie'
+                },
+                company: 'Holiday Inn Naperville',
+                date: '2020-07-17',
+                status: 'renewal',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 29326
+            },
+            {
+                id: 1400,
+                name: 'Cordelia Storment',
+                country: {
+                    name: 'Guatemala',
+                    code: 'gt'
+                },
+                company: 'Burrows, Jon H Esq',
+                date: '2020-02-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 81198
+            },
+            {
+                id: 1401,
+                name: 'Mollie Mcdoniel',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Dock Seal Specialty',
+                date: '2017-08-13',
+                status: 'unqualified',
+                verified: true,
+                activity: 59,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 82391
+            },
+            {
+                id: 1402,
+                name: 'Brett Mccullan',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Five Star Limousines Of Tx Inc',
+                date: '2015-05-21',
+                status: 'qualified',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 48071
+            },
+            {
+                id: 1403,
+                name: 'Teddy Pedrozo',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Barkan, Neal J Esq',
+                date: '2019-02-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 14593
+            },
+            {
+                id: 1404,
+                name: 'Tasia Andreason',
+                country: {
+                    name: 'Venezuela',
+                    code: 've'
+                },
+                company: 'Campbell, Robert A',
+                date: '2016-03-06',
+                status: 'renewal',
+                verified: true,
+                activity: 25,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 8750
+            },
+            {
+                id: 1405,
+                name: 'Hubert Walthall',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Dee, Deanna',
+                date: '2020-12-19',
+                status: 'renewal',
+                verified: true,
+                activity: 32,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 39655
+            },
+            {
+                id: 1406,
+                name: 'Arthur Farrow',
+                country: {
+                    name: 'Brazil',
+                    code: 'br'
+                },
+                company: 'Young, Timothy L Esq',
+                date: '2019-02-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 55,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 71713
+            },
+            {
+                id: 1407,
+                name: 'Vilma Berlanga',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Wells, D Fred Esq',
+                date: '2016-02-09',
+                status: 'unqualified',
+                verified: false,
+                activity: 26,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 81056
+            },
+            {
+                id: 1408,
+                name: 'Billye Miro',
+                country: {
+                    name: 'Hungary',
+                    code: 'hu'
+                },
+                company: 'Gray, Francine H Esq',
+                date: '2015-09-05',
+                status: 'new',
+                verified: true,
+                activity: 70,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 34220
+            },
+            {
+                id: 1409,
+                name: 'Glenna Slayton',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Toledo Iv Care',
+                date: '2016-03-10',
+                status: 'unqualified',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 21459
+            },
+            {
+                id: 1410,
+                name: 'Mitzie Hudnall',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Cangro Transmission Co',
+                date: '2020-05-04',
+                status: 'new',
+                verified: true,
+                activity: 19,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 51281
+            },
+            {
+                id: 1411,
+                name: 'Bernardine Rodefer',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Sat Poly Inc',
+                date: '2020-10-19',
+                status: 'negotiation',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 53841
+            },
+            {
+                id: 1412,
+                name: 'Staci Schmaltz',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Midwest Contracting \u0026 Mfg Inc',
+                date: '2018-03-14',
+                status: 'unqualified',
+                verified: true,
+                activity: 81,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 34878
+            },
+            {
+                id: 1413,
+                name: 'Nichelle Meteer',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'Print Doctor',
+                date: '2016-09-23',
+                status: 'renewal',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 85399
+            },
+            {
+                id: 1414,
+                name: 'Janine Rhoden',
+                country: {
+                    name: 'Nigeria',
+                    code: 'ng'
+                },
+                company: 'Nordic Group Inc',
+                date: '2018-08-13',
+                status: 'qualified',
+                verified: true,
+                activity: 95,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 29237
+            },
+            {
+                id: 1415,
+                name: 'Ettie Hoopengardner',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Jackson Millwork Co',
+                date: '2017-07-24',
+                status: 'renewal',
+                verified: false,
+                activity: 23,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 12179
+            },
+            {
+                id: 1416,
+                name: 'Eden Jayson',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Harris Corporation',
+                date: '2018-03-15',
+                status: 'renewal',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 27840
+            },
+            {
+                id: 1417,
+                name: 'Lynelle Auber',
+                country: {
+                    name: 'Netherlands',
+                    code: 'nl'
+                },
+                company: 'United Cerebral Palsy Of Ne Pa',
+                date: '2020-12-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 51958
+            },
+            {
+                id: 1418,
+                name: 'Merissa Tomblin',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'One Day Surgery Center Inc',
+                date: '2018-03-05',
+                status: 'new',
+                verified: true,
+                activity: 50,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 33138
+            },
+            {
+                id: 1419,
+                name: 'Golda Kaniecki',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Calaveras Prospect',
+                date: '2019-04-17',
+                status: 'negotiation',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 82539
+            },
+            {
+                id: 1420,
+                name: 'Catarina Gleich',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Terk, Robert E Esq',
+                date: '2017-01-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 5619
+            },
+            {
+                id: 1421,
+                name: 'Virgie Kiel',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Cullen, Terrence P Esq',
+                date: '2016-06-28',
+                status: 'renewal',
+                verified: true,
+                activity: 89,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 44763
+            },
+            {
+                id: 1422,
+                name: 'Jolene Ostolaza',
+                country: {
+                    name: 'Puerto Rico',
+                    code: 'pr'
+                },
+                company: 'Central Die Casting Mfg Co Inc',
+                date: '2016-08-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 97208
+            },
+            {
+                id: 1423,
+                name: 'Keneth Borgman',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Centerline Engineering',
+                date: '2019-02-04',
+                status: 'unqualified',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 93316
+            },
+            {
+                id: 1424,
+                name: 'Rikki Nayar',
+                country: {
+                    name: 'Norway',
+                    code: 'no'
+                },
+                company: 'Targan \u0026 Kievit Pa',
+                date: '2017-03-06',
+                status: 'negotiation',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 23786
+            },
+            {
+                id: 1425,
+                name: 'Elke Sengbusch',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Riley Riper Hollin \u0026 Colagreco',
+                date: '2019-05-28',
+                status: 'renewal',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 98367
+            },
+            {
+                id: 1426,
+                name: 'Hoa Sarao',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Kaplan, Joel S Esq',
+                date: '2020-08-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 0,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 68683
+            },
+            {
+                id: 1427,
+                name: 'Trinidad Mcrae',
+                country: {
+                    name: 'Burkina Faso',
+                    code: 'bf'
+                },
+                company: 'Water Office',
+                date: '2020-12-26',
+                status: 'renewal',
+                verified: true,
+                activity: 76,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 85602
+            },
+            {
+                id: 1428,
+                name: 'Mari Lueckenbach',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Westbrooks, Nelson E Jr',
+                date: '2017-10-27',
+                status: 'new',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 14402
+            },
+            {
+                id: 1429,
+                name: 'Selma Husser',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Armon Communications',
+                date: '2018-02-16',
+                status: 'negotiation',
+                verified: true,
+                activity: 84,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 81608
+            },
+            {
+                id: 1430,
+                name: 'Antione Onofrio',
+                country: {
+                    name: 'Taiwan',
+                    code: 'tw'
+                },
+                company: 'Jacobs \u0026 Gerber Inc',
+                date: '2017-11-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 37,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 15573
+            },
+            {
+                id: 1431,
+                name: 'Luisa Jurney',
+                country: {
+                    name: 'Canada',
+                    code: 'ca'
+                },
+                company: 'Forest Fire Laboratory',
+                date: '2018-06-12',
+                status: 'unqualified',
+                verified: true,
+                activity: 96,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 50121
+            },
+            {
+                id: 1432,
+                name: 'Clorinda Heimann',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Haughey, Charles Jr',
+                date: '2016-11-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 93911
+            },
+            {
+                id: 1433,
+                name: 'Dick Wenzinger',
+                country: {
+                    name: 'Mexico',
+                    code: 'mx'
+                },
+                company: 'Wheaton Plastic Products',
+                date: '2017-04-05',
+                status: 'negotiation',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 66383
+            },
+            {
+                id: 1434,
+                name: 'Ahmed Angalich',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Reese Plastics',
+                date: '2018-11-20',
+                status: 'unqualified',
+                verified: true,
+                activity: 83,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 89183
+            },
+            {
+                id: 1435,
+                name: 'Iluminada Ohms',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Nazette Marner Good Wendt',
+                date: '2015-08-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 66,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 9752
+            },
+            {
+                id: 1436,
+                name: 'Joanna Leinenbach',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Levinson Axelrod Wheaton',
+                date: '2016-02-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 64,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 2623
+            },
+            {
+                id: 1437,
+                name: 'Caprice Suell',
+                country: {
+                    name: 'Algeria',
+                    code: 'dz'
+                },
+                company: 'Egnor, W Dan Esq',
+                date: '2018-07-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 87620
+            },
+            {
+                id: 1438,
+                name: 'Stephane Myricks',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Portland Central Thriftlodge',
+                date: '2018-05-28',
+                status: 'renewal',
+                verified: true,
+                activity: 51,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 14625
+            },
+            {
+                id: 1439,
+                name: 'Quentin Swayze',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Ulbrich Trucking',
+                date: '2019-02-11',
+                status: 'negotiation',
+                verified: true,
+                activity: 37,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 39339
+            },
+            {
+                id: 1440,
+                name: 'Annmarie Castros',
+                country: {
+                    name: 'Jamaica',
+                    code: 'jm'
+                },
+                company: 'Tipiak Inc',
+                date: '2015-08-24',
+                status: 'qualified',
+                verified: true,
+                activity: 46,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 77704
+            },
+            {
+                id: 1441,
+                name: 'Shonda Greenbush',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Saint George Well Drilling',
+                date: '2018-06-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 75326
+            },
+            {
+                id: 1442,
+                name: 'Cecil Lapage',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Hawkes, Douglas D',
+                date: '2018-11-09',
+                status: 'qualified',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 71364
+            },
+            {
+                id: 1443,
+                name: 'Jeanice Claucherty',
+                country: {
+                    name: 'Lithuania',
+                    code: 'lt'
+                },
+                company: 'Accurel Systems Intrntl Corp',
+                date: '2016-06-02',
+                status: 'qualified',
+                verified: true,
+                activity: 48,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 73360
+            },
+            {
+                id: 1444,
+                name: 'Josphine Villanueva',
+                country: {
+                    name: 'Japan',
+                    code: 'jp'
+                },
+                company: 'Santa Cruz Community Internet',
+                date: '2019-11-08',
+                status: 'unqualified',
+                verified: true,
+                activity: 39,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 59442
+            },
+            {
+                id: 1445,
+                name: 'Daniel Perruzza',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Gersh \u0026 Danielson',
+                date: '2017-09-24',
+                status: 'renewal',
+                verified: true,
+                activity: 86,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 84338
+            },
+            {
+                id: 1446,
+                name: 'Cassi Wildfong',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Cobb, James O Esq',
+                date: '2015-09-08',
+                status: 'qualified',
+                verified: true,
+                activity: 85,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 72545
+            },
+            {
+                id: 1447,
+                name: 'Britt Galam',
+                country: {
+                    name: 'Poland',
+                    code: 'pl'
+                },
+                company: 'Wheatley Trucking Company',
+                date: '2020-10-26',
+                status: 'new',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 53307
+            },
+            {
+                id: 1448,
+                name: 'Adell Lipkin',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Systems Graph Inc Ab Dick Dlr',
+                date: '2017-05-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 92,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 12178
+            },
+            {
+                id: 1449,
+                name: 'Jacqueline Rowling',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'John Hancock Mutl Life Ins Co',
+                date: '2019-06-28',
+                status: 'negotiation',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 35576
+            },
+            {
+                id: 1450,
+                name: 'Lonny Weglarz',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'History Division Of State',
+                date: '2016-08-12',
+                status: 'new',
+                verified: true,
+                activity: 49,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 20507
+            },
+            {
+                id: 1451,
+                name: 'Lonna Diestel',
+                country: {
+                    name: 'Philippines',
+                    code: 'ph'
+                },
+                company: 'Dimmock, Thomas J Esq',
+                date: '2017-02-10',
+                status: 'negotiation',
+                verified: true,
+                activity: 9,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 56415
+            },
+            {
+                id: 1452,
+                name: 'Cristal Samara',
+                country: {
+                    name: 'Australia',
+                    code: 'au'
+                },
+                company: 'Intermed Inc',
+                date: '2016-08-17',
+                status: 'qualified',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 33427
+            },
+            {
+                id: 1453,
+                name: 'Kenneth Grenet',
+                country: {
+                    name: 'Croatia',
+                    code: 'hr'
+                },
+                company: 'Bank Of New York',
+                date: '2020-07-24',
+                status: 'negotiation',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 44004
+            },
+            {
+                id: 1454,
+                name: 'Elli Mclaird',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Sportmaster Intrnatl',
+                date: '2017-06-10',
+                status: 'qualified',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 37227
+            },
+            {
+                id: 1455,
+                name: 'Alline Jeanty',
+                country: {
+                    name: 'Denmark',
+                    code: 'dk'
+                },
+                company: 'W W John Holden Inc',
+                date: '2015-12-08',
+                status: 'renewal',
+                verified: true,
+                activity: 74,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 44560
+            },
+            {
+                id: 1456,
+                name: 'Sharika Eanes',
+                country: {
+                    name: 'Chile',
+                    code: 'cl'
+                },
+                company: 'Maccani \u0026 Delp',
+                date: '2018-08-16',
+                status: 'qualified',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 50922
+            },
+            {
+                id: 1457,
+                name: 'Nu Mcnease',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Amazonia Film Project',
+                date: '2018-07-03',
+                status: 'negotiation',
+                verified: true,
+                activity: 47,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 61262
+            },
+            {
+                id: 1458,
+                name: 'Daniela Comnick',
+                country: {
+                    name: 'Tunisia',
+                    code: 'tn'
+                },
+                company: 'Water \u0026 Sewer Department',
+                date: '2017-07-07',
+                status: 'negotiation',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 13459
+            },
+            {
+                id: 1459,
+                name: 'Cecilia Colaizzo',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Switchcraft Inc',
+                date: '2019-06-08',
+                status: 'negotiation',
+                verified: true,
+                activity: 21,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 52299
+            },
+            {
+                id: 1460,
+                name: 'Leslie Threets',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'C W D C Metal Fabricators',
+                date: '2016-11-26',
+                status: 'unqualified',
+                verified: true,
+                activity: 50,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 61040
+            },
+            {
+                id: 1461,
+                name: 'Nan Koppinger',
+                country: {
+                    name: 'Norway',
+                    code: 'no'
+                },
+                company: 'Shimotani, Grace T',
+                date: '2020-11-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 94,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 91297
+            },
+            {
+                id: 1462,
+                name: 'Izetta Dewar',
+                country: {
+                    name: 'Cuba',
+                    code: 'cu'
+                },
+                company: 'Lisatoni, Jean Esq',
+                date: '2019-11-22',
+                status: 'renewal',
+                verified: true,
+                activity: 41,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 39947
+            },
+            {
+                id: 1463,
+                name: 'Tegan Arceo',
+                country: {
+                    name: 'Iceland',
+                    code: 'is'
+                },
+                company: 'Ceramic Tile Sales Inc',
+                date: '2016-08-07',
+                status: 'new',
+                verified: true,
+                activity: 79,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 78224
+            },
+            {
+                id: 1464,
+                name: 'Ruthann Keener',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Maiden Craft Inc',
+                date: '2019-04-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 43,
+                representative: {
+                    name: 'Elwin Sharvill',
+                    image: 'elwinsharvill.png'
+                },
+                balance: 22727
+            },
+            {
+                id: 1465,
+                name: 'Joni Breland',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Carriage House Cllsn Rpr Inc',
+                date: '2018-07-20',
+                status: 'new',
+                verified: true,
+                activity: 18,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 70650
+            },
+            {
+                id: 1466,
+                name: 'Vi Rentfro',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Video Workshop',
+                date: '2018-10-01',
+                status: 'negotiation',
+                verified: true,
+                activity: 99,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 45956
+            },
+            {
+                id: 1467,
+                name: 'Colette Kardas',
+                country: {
+                    name: 'Honduras',
+                    code: 'hn'
+                },
+                company: 'Fresno Tile Center Inc',
+                date: '2017-08-22',
+                status: 'new',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 72627
+            },
+            {
+                id: 1468,
+                name: 'Malcolm Tromblay',
+                country: {
+                    name: 'Uruguay',
+                    code: 'uy'
+                },
+                company: 'Versatile Sash \u0026 Woodwork',
+                date: '2019-11-25',
+                status: 'renewal',
+                verified: true,
+                activity: 23,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 80176
+            },
+            {
+                id: 1469,
+                name: 'Ryan Harnos',
+                country: {
+                    name: 'Paraguay',
+                    code: 'py'
+                },
+                company: 'Warner Electric Brk \u0026 Cltch Co',
+                date: '2019-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 71,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 97227
+            },
+            {
+                id: 1470,
+                name: 'Jess Chaffins',
+                country: {
+                    name: 'Belarus',
+                    code: 'by'
+                },
+                company: 'New York Public Library',
+                date: '2017-02-12',
+                status: 'qualified',
+                verified: true,
+                activity: 91,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 63121
+            },
+            {
+                id: 1471,
+                name: 'Sharen Bourbon',
+                country: {
+                    name: 'Saudi Arabia',
+                    code: 'sa'
+                },
+                company: 'Mccaleb, John A Esq',
+                date: '2017-06-13',
+                status: 'renewal',
+                verified: true,
+                activity: 35,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 44726
+            },
+            {
+                id: 1472,
+                name: 'Nickolas Juvera',
+                country: {
+                    name: 'Finland',
+                    code: 'fi'
+                },
+                company: 'United Oil Co Inc',
+                date: '2019-01-06',
+                status: 'negotiation',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 70748
+            },
+            {
+                id: 1473,
+                name: 'Gary Nunlee',
+                country: {
+                    name: 'Turkey',
+                    code: 'tr'
+                },
+                company: 'Irving Foot Center',
+                date: '2015-07-22',
+                status: 'renewal',
+                verified: true,
+                activity: 72,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 71061
+            },
+            {
+                id: 1474,
+                name: 'Diane Devreese',
+                country: {
+                    name: 'Bolivia',
+                    code: 'bo'
+                },
+                company: 'Acme Supply Co',
+                date: '2018-05-13',
+                status: 'renewal',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 7486
+            },
+            {
+                id: 1475,
+                name: 'Roslyn Chavous',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Mcrae, James L',
+                date: '2018-03-20',
+                status: 'negotiation',
+                verified: true,
+                activity: 45,
+                representative: {
+                    name: 'Bernardo Dominic',
+                    image: 'bernardodominic.png'
+                },
+                balance: 58495
+            },
+            {
+                id: 1476,
+                name: 'Glory Schieler',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Mcgraths Seafood',
+                date: '2017-05-13',
+                status: 'negotiation',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 96252
+            },
+            {
+                id: 1477,
+                name: 'Rasheeda Sayaphon',
+                country: {
+                    name: 'Latvia',
+                    code: 'lv'
+                },
+                company: 'Kummerer, J Michael Esq',
+                date: '2017-02-21',
+                status: 'negotiation',
+                verified: true,
+                activity: 12,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 71454
+            },
+            {
+                id: 1478,
+                name: 'Alpha Palaia',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Stoffer, James M Jr',
+                date: '2017-07-21',
+                status: 'renewal',
+                verified: true,
+                activity: 4,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 81894
+            },
+            {
+                id: 1479,
+                name: 'Refugia Jacobos',
+                country: {
+                    name: 'China',
+                    code: 'cn'
+                },
+                company: 'North Central Fl Sfty Cncl',
+                date: '2020-11-25',
+                status: 'negotiation',
+                verified: true,
+                activity: 18,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 31601
+            },
+            {
+                id: 1480,
+                name: 'Shawnda Yori',
+                country: {
+                    name: 'Luxembourg',
+                    code: 'lu'
+                },
+                company: 'Fiorucci Foods Usa Inc',
+                date: '2018-05-09',
+                status: 'unqualified',
+                verified: true,
+                activity: 11,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 12090
+            },
+            {
+                id: 1481,
+                name: 'Mona Delasancha',
+                country: {
+                    name: 'Hong Kong',
+                    code: 'hk'
+                },
+                company: 'Sign All',
+                date: '2017-10-06',
+                status: 'renewal',
+                verified: true,
+                activity: 61,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 24073
+            },
+            {
+                id: 1482,
+                name: 'Gilma Liukko',
+                country: {
+                    name: 'Morocco',
+                    code: 'ma'
+                },
+                company: 'Sammys Steak Den',
+                date: '2018-10-06',
+                status: 'unqualified',
+                verified: true,
+                activity: 34,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 35129
+            },
+            {
+                id: 1483,
+                name: 'Janey Gabisi',
+                country: {
+                    name: 'Israel',
+                    code: 'il'
+                },
+                company: 'Dobscha, Stephen F Esq',
+                date: '2019-05-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 38,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 25518
+            },
+            {
+                id: 1484,
+                name: 'Lili Paskin',
+                country: {
+                    name: 'Costa Rica',
+                    code: 'cr'
+                },
+                company: 'Morgan Custom Homes',
+                date: '2018-06-11',
+                status: 'unqualified',
+                verified: true,
+                activity: 69,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 7300
+            },
+            {
+                id: 1485,
+                name: 'Loren Asar',
+                country: {
+                    name: 'Italy',
+                    code: 'it'
+                },
+                company: 'Olsen Payne \u0026 Company',
+                date: '2017-12-11',
+                status: 'unqualified',
+                verified: true,
+                activity: 16,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 82949
+            },
+            {
+                id: 1486,
+                name: 'Dorothy Chesterfield',
+                country: {
+                    name: 'Spain',
+                    code: 'es'
+                },
+                company: 'Cowan \u0026 Kelly',
+                date: '2015-08-11',
+                status: 'renewal',
+                verified: true,
+                activity: 31,
+                representative: {
+                    name: 'Anna Fali',
+                    image: 'annafali.png'
+                },
+                balance: 25044
+            },
+            {
+                id: 1487,
+                name: 'Gail Similton',
+                country: {
+                    name: 'Malaysia',
+                    code: 'my'
+                },
+                company: 'Johnson, Wes Esq',
+                date: '2016-08-10',
+                status: 'qualified',
+                verified: true,
+                activity: 63,
+                representative: {
+                    name: 'Xuxue Feng',
+                    image: 'xuxuefeng.png'
+                },
+                balance: 97553
+            },
+            {
+                id: 1488,
+                name: 'Catalina Tillotson',
+                country: {
+                    name: 'Pakistan',
+                    code: 'pk'
+                },
+                company: 'Icn Pharmaceuticals Inc',
+                date: '2018-08-04',
+                status: 'negotiation',
+                verified: true,
+                activity: 13,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 38294
+            },
+            {
+                id: 1489,
+                name: 'Lawrence Lorens',
+                country: {
+                    name: 'Egypt',
+                    code: 'eg'
+                },
+                company: 'New England Sec Equip Co Inc',
+                date: '2020-04-15',
+                status: 'negotiation',
+                verified: true,
+                activity: 82,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 56617
+            },
+            {
+                id: 1490,
+                name: 'Carlee Boulter',
+                country: {
+                    name: 'Vietnam',
+                    code: 'vn'
+                },
+                company: 'Tippett, Troy M Ii',
+                date: '2016-09-22',
+                status: 'renewal',
+                verified: true,
+                activity: 71,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 76817
+            },
+            {
+                id: 1491,
+                name: 'Thaddeus Ankeny',
+                country: {
+                    name: 'Qatar',
+                    code: 'qa'
+                },
+                company: 'Atc Contracting',
+                date: '2015-03-08',
+                status: 'unqualified',
+                verified: true,
+                activity: 78,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 80787
+            },
+            {
+                id: 1492,
+                name: 'Jovita Oles',
+                country: {
+                    name: 'Sweden',
+                    code: 'se'
+                },
+                company: 'Pagano, Philip G Esq',
+                date: '2019-07-18',
+                status: 'negotiation',
+                verified: true,
+                activity: 42,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 4158
+            },
+            {
+                id: 1493,
+                name: 'Alesia Hixenbaugh',
+                country: {
+                    name: 'Thailand',
+                    code: 'th'
+                },
+                company: 'Kwikprint',
+                date: '2017-07-24',
+                status: 'negotiation',
+                verified: false,
+                activity: 23,
+                representative: {
+                    name: 'Ivan Magalhaes',
+                    image: 'ivanmagalhaes.png'
+                },
+                balance: 66993
+            },
+            {
+                id: 1494,
+                name: 'Lai Harabedian',
+                country: {
+                    name: 'Serbia',
+                    code: 'rs'
+                },
+                company: 'Buergi \u0026 Madden Scale',
+                date: '2018-11-11',
+                status: 'new',
+                verified: true,
+                activity: 28,
+                representative: {
+                    name: 'Asiya Javayant',
+                    image: 'asiyajavayant.png'
+                },
+                balance: 53330
+            },
+            {
+                id: 1495,
+                name: 'Brittni Gillaspie',
+                country: {
+                    name: 'Senegal',
+                    code: 'sn'
+                },
+                company: 'Inner Label',
+                date: '2019-11-23',
+                status: 'renewal',
+                verified: true,
+                activity: 14,
+                representative: {
+                    name: 'Ioni Bowcher',
+                    image: 'ionibowcher.png'
+                },
+                balance: 72342
+            },
+            {
+                id: 1496,
+                name: 'Raylene Kampa',
+                country: {
+                    name: 'Belgium',
+                    code: 'be'
+                },
+                company: 'Hermar Inc',
+                date: '2020-04-22',
+                status: 'unqualified',
+                verified: true,
+                activity: 65,
+                representative: {
+                    name: 'Stephen Shaw',
+                    image: 'stephenshaw.png'
+                },
+                balance: 53660
+            },
+            {
+                id: 1497,
+                name: 'Flo Bookamer',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Simonton Howe \u0026 Schneider Pc',
+                date: '2020-08-10',
+                status: 'unqualified',
+                verified: true,
+                activity: 30,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 44528
+            },
+            {
+                id: 1498,
+                name: 'Jani Biddy',
+                country: {
+                    name: 'Switzerland',
+                    code: 'ch'
+                },
+                company: 'Warehouse Office \u0026 Paper Prod',
+                date: '2019-11-07',
+                status: 'negotiation',
+                verified: false,
+                activity: 20,
+                representative: {
+                    name: 'Onyama Limba',
+                    image: 'onyamalimba.png'
+                },
+                balance: 69613
+            },
+            {
+                id: 1499,
+                name: 'Chauncey Motley',
+                country: {
+                    name: 'Argentina',
+                    code: 'ar'
+                },
+                company: 'Affiliated With Travelodge',
+                date: '2019-04-23',
+                status: 'renewal',
+                verified: true,
+                activity: 42,
+                representative: {
+                    name: 'Amy Elsner',
+                    image: 'amyelsner.png'
+                },
+                balance: 88090
+            }
+        ];
+    },
+
+    getCustomersSmall() {
+        return Promise.resolve(this.getData().slice(0, 10));
+    },
+
+    getCustomersMedium() {
+        return Promise.resolve(this.getData().slice(0, 50));
+    },
+
+    getCustomersLarge() {
+        return Promise.resolve(this.getData().slice(0, 200));
+    },
+
+    getCustomersXLarge() {
+        return Promise.resolve(this.getData());
+    },
+
+    getCustomers(params) {
+        const queryParams = params
+            ? Object.keys(params)
+                  .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+                  .join('&')
+            : '';
+
+        return fetch('http://github.com/api/data/customers?' + queryParams).then((res) => res.json());
+    }
+};
diff --git a/service/EventService.js b/service/EventService.js
new file mode 100644
index 0000000000..243f63b44c
--- /dev/null
+++ b/service/EventService.js
@@ -0,0 +1,22 @@
+export const EventService = {
+    getData() {
+        return [
+            { id: 1, title: 'All Day Event', start: '2017-02-01' },
+            { id: 2, title: 'Long Event', start: '2017-02-07', end: '2017-02-10' },
+            { id: 3, title: 'Repeating Event', start: '2017-02-09T16:00:00' },
+            { id: 4, title: 'Repeating Event', start: '2017-02-16T16:00:00' },
+            { id: 5, title: 'Conference', start: '2017-02-11', end: '2017-02-13' },
+            { id: 6, title: 'Meeting', start: '2017-02-12T10:30:00', end: '2017-02-12T12:30:00' },
+            { id: 7, title: 'Lunch', start: '2017-02-12T12:00:00' },
+            { id: 8, title: 'Meeting', start: '2017-02-12T14:30:00' },
+            { id: 9, title: 'Happy Hour', start: '2017-02-12T17:30:00' },
+            { id: 10, title: 'Dinner', start: '2017-02-12T20:00:00' },
+            { id: 11, title: 'Birthday Party', start: '2017-02-13T07:00:00' },
+            { id: 12, title: 'Click for Google', url: 'https://www.google.com/', start: '2017-02-28' }
+        ];
+    },
+
+    getEvents() {
+        return Promise.resolve(this.getData());
+    }
+};
diff --git a/service/IconService.js b/service/IconService.js
new file mode 100644
index 0000000000..698ccff6d5
--- /dev/null
+++ b/service/IconService.js
@@ -0,0 +1,18 @@
+let icons = [];
+let selectedIcon = null;
+
+export const IconService = {
+    getIcons() {
+        return fetch('http://github.com/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
+            .then((res) => res.json())
+            .then((d) => d.icons);
+    },
+
+    getIcon(id) {
+        if (icons) {
+            selectedIcon = icons.find((x) => x.properties.id === id);
+
+            return selectedIcon;
+        }
+    }
+};
diff --git a/service/NodeService.js b/service/NodeService.js
new file mode 100644
index 0000000000..2e80fd91a9
--- /dev/null
+++ b/service/NodeService.js
@@ -0,0 +1,431 @@
+export const NodeService = {
+    getTreeNodesData() {
+        return [
+            {
+                key: '0',
+                label: 'Documents',
+                data: 'Documents Folder',
+                icon: 'pi pi-fw pi-inbox',
+                children: [
+                    {
+                        key: '0-0',
+                        label: 'Work',
+                        data: 'Work Folder',
+                        icon: 'pi pi-fw pi-cog',
+                        children: [
+                            { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
+                            { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
+                        ]
+                    },
+                    {
+                        key: '0-1',
+                        label: 'Home',
+                        data: 'Home Folder',
+                        icon: 'pi pi-fw pi-home',
+                        children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
+                    }
+                ]
+            },
+            {
+                key: '1',
+                label: 'Events',
+                data: 'Events Folder',
+                icon: 'pi pi-fw pi-calendar',
+                children: [
+                    { key: '1-0', label: 'Meeting', icon: 'pi pi-fw pi-calendar-plus', data: 'Meeting' },
+                    { key: '1-1', label: 'Product Launch', icon: 'pi pi-fw pi-calendar-plus', data: 'Product Launch' },
+                    { key: '1-2', label: 'Report Review', icon: 'pi pi-fw pi-calendar-plus', data: 'Report Review' }
+                ]
+            },
+            {
+                key: '2',
+                label: 'Movies',
+                data: 'Movies Folder',
+                icon: 'pi pi-fw pi-star-fill',
+                children: [
+                    {
+                        key: '2-0',
+                        icon: 'pi pi-fw pi-star-fill',
+                        label: 'Al Pacino',
+                        data: 'Pacino Movies',
+                        children: [
+                            { key: '2-0-0', label: 'Scarface', icon: 'pi pi-fw pi-video', data: 'Scarface Movie' },
+                            { key: '2-0-1', label: 'Serpico', icon: 'pi pi-fw pi-video', data: 'Serpico Movie' }
+                        ]
+                    },
+                    {
+                        key: '2-1',
+                        label: 'Robert De Niro',
+                        icon: 'pi pi-fw pi-star-fill',
+                        data: 'De Niro Movies',
+                        children: [
+                            { key: '2-1-0', label: 'Goodfellas', icon: 'pi pi-fw pi-video', data: 'Goodfellas Movie' },
+                            { key: '2-1-1', label: 'Untouchables', icon: 'pi pi-fw pi-video', data: 'Untouchables Movie' }
+                        ]
+                    }
+                ]
+            }
+        ];
+    },
+
+    getTreeTableNodesData() {
+        return [
+            {
+                key: '0',
+                data: {
+                    name: 'Applications',
+                    size: '100kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '0-0',
+                        data: {
+                            name: 'React',
+                            size: '25kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '0-0-0',
+                                data: {
+                                    name: 'react.app',
+                                    size: '10kb',
+                                    type: 'Application'
+                                }
+                            },
+                            {
+                                key: '0-0-1',
+                                data: {
+                                    name: 'native.app',
+                                    size: '10kb',
+                                    type: 'Application'
+                                }
+                            },
+                            {
+                                key: '0-0-2',
+                                data: {
+                                    name: 'mobile.app',
+                                    size: '5kb',
+                                    type: 'Application'
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        key: '0-1',
+                        data: {
+                            name: 'editor.app',
+                            size: '25kb',
+                            type: 'Application'
+                        }
+                    },
+                    {
+                        key: '0-2',
+                        data: {
+                            name: 'settings.app',
+                            size: '50kb',
+                            type: 'Application'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '1',
+                data: {
+                    name: 'Cloud',
+                    size: '20kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '1-0',
+                        data: {
+                            name: 'backup-1.zip',
+                            size: '10kb',
+                            type: 'Zip'
+                        }
+                    },
+                    {
+                        key: '1-1',
+                        data: {
+                            name: 'backup-2.zip',
+                            size: '10kb',
+                            type: 'Zip'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '2',
+                data: {
+                    name: 'Desktop',
+                    size: '150kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '2-0',
+                        data: {
+                            name: 'note-meeting.txt',
+                            size: '50kb',
+                            type: 'Text'
+                        }
+                    },
+                    {
+                        key: '2-1',
+                        data: {
+                            name: 'note-todo.txt',
+                            size: '100kb',
+                            type: 'Text'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '3',
+                data: {
+                    name: 'Documents',
+                    size: '75kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '3-0',
+                        data: {
+                            name: 'Work',
+                            size: '55kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '3-0-0',
+                                data: {
+                                    name: 'Expenses.doc',
+                                    size: '30kb',
+                                    type: 'Document'
+                                }
+                            },
+                            {
+                                key: '3-0-1',
+                                data: {
+                                    name: 'Resume.doc',
+                                    size: '25kb',
+                                    type: 'Resume'
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        key: '3-1',
+                        data: {
+                            name: 'Home',
+                            size: '20kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '3-1-0',
+                                data: {
+                                    name: 'Invoices',
+                                    size: '20kb',
+                                    type: 'Text'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                key: '4',
+                data: {
+                    name: 'Downloads',
+                    size: '25kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '4-0',
+                        data: {
+                            name: 'Spanish',
+                            size: '10kb',
+                            type: 'Folder'
+                        },
+                        children: [
+                            {
+                                key: '4-0-0',
+                                data: {
+                                    name: 'tutorial-a1.txt',
+                                    size: '5kb',
+                                    type: 'Text'
+                                }
+                            },
+                            {
+                                key: '4-0-1',
+                                data: {
+                                    name: 'tutorial-a2.txt',
+                                    size: '5kb',
+                                    type: 'Text'
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        key: '4-1',
+                        data: {
+                            name: 'Travel',
+                            size: '15kb',
+                            type: 'Text'
+                        },
+                        children: [
+                            {
+                                key: '4-1-0',
+                                data: {
+                                    name: 'Hotel.pdf',
+                                    size: '10kb',
+                                    type: 'PDF'
+                                }
+                            },
+                            {
+                                key: '4-1-1',
+                                data: {
+                                    name: 'Flight.pdf',
+                                    size: '5kb',
+                                    type: 'PDF'
+                                }
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                key: '5',
+                data: {
+                    name: 'Main',
+                    size: '50kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '5-0',
+                        data: {
+                            name: 'bin',
+                            size: '50kb',
+                            type: 'Link'
+                        }
+                    },
+                    {
+                        key: '5-1',
+                        data: {
+                            name: 'etc',
+                            size: '100kb',
+                            type: 'Link'
+                        }
+                    },
+                    {
+                        key: '5-2',
+                        data: {
+                            name: 'var',
+                            size: '100kb',
+                            type: 'Link'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '6',
+                data: {
+                    name: 'Other',
+                    size: '5kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '6-0',
+                        data: {
+                            name: 'todo.txt',
+                            size: '3kb',
+                            type: 'Text'
+                        }
+                    },
+                    {
+                        key: '6-1',
+                        data: {
+                            name: 'logo.png',
+                            size: '2kb',
+                            type: 'Picture'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '7',
+                data: {
+                    name: 'Pictures',
+                    size: '150kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '7-0',
+                        data: {
+                            name: 'barcelona.jpg',
+                            size: '90kb',
+                            type: 'Picture'
+                        }
+                    },
+                    {
+                        key: '7-1',
+                        data: {
+                            name: 'primeng.png',
+                            size: '30kb',
+                            type: 'Picture'
+                        }
+                    },
+                    {
+                        key: '7-2',
+                        data: {
+                            name: 'prime.jpg',
+                            size: '30kb',
+                            type: 'Picture'
+                        }
+                    }
+                ]
+            },
+            {
+                key: '8',
+                data: {
+                    name: 'Videos',
+                    size: '1500kb',
+                    type: 'Folder'
+                },
+                children: [
+                    {
+                        key: '8-0',
+                        data: {
+                            name: 'primefaces.mkv',
+                            size: '1000kb',
+                            type: 'Video'
+                        }
+                    },
+                    {
+                        key: '8-1',
+                        data: {
+                            name: 'intro.avi',
+                            size: '500kb',
+                            type: 'Video'
+                        }
+                    }
+                ]
+            }
+        ];
+    },
+
+    getTreeTableNodes() {
+        return Promise.resolve(this.getTreeTableNodesData());
+    },
+
+    getTreeNodes() {
+        return Promise.resolve(this.getTreeNodesData());
+    }
+};
diff --git a/service/PhotoService.js b/service/PhotoService.js
new file mode 100644
index 0000000000..01d565603a
--- /dev/null
+++ b/service/PhotoService.js
@@ -0,0 +1,100 @@
+export const PhotoService = {
+    getData() {
+        return [
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria1s.jpg',
+                alt: 'Description for Image 1',
+                title: 'Title 1'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria2.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria2s.jpg',
+                alt: 'Description for Image 2',
+                title: 'Title 2'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria3.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria3s.jpg',
+                alt: 'Description for Image 3',
+                title: 'Title 3'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria4.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria4s.jpg',
+                alt: 'Description for Image 4',
+                title: 'Title 4'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria5.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria5s.jpg',
+                alt: 'Description for Image 5',
+                title: 'Title 5'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria6.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria6s.jpg',
+                alt: 'Description for Image 6',
+                title: 'Title 6'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria7.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria7s.jpg',
+                alt: 'Description for Image 7',
+                title: 'Title 7'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria8.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria8s.jpg',
+                alt: 'Description for Image 8',
+                title: 'Title 8'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria9.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria9s.jpg',
+                alt: 'Description for Image 9',
+                title: 'Title 9'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria10.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria10s.jpg',
+                alt: 'Description for Image 10',
+                title: 'Title 10'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria11.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria11s.jpg',
+                alt: 'Description for Image 11',
+                title: 'Title 11'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria12.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria12s.jpg',
+                alt: 'Description for Image 12',
+                title: 'Title 12'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria13.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria13s.jpg',
+                alt: 'Description for Image 13',
+                title: 'Title 13'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria14.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria14s.jpg',
+                alt: 'Description for Image 14',
+                title: 'Title 14'
+            },
+            {
+                itemImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria15.jpg',
+                thumbnailImageSrc: 'https://primefaces.org/cdn/primereact/images/galleria/galleria15s.jpg',
+                alt: 'Description for Image 15',
+                title: 'Title 15'
+            }
+        ];
+    },
+
+    getImages() {
+        return Promise.resolve(this.getData());
+    }
+};
diff --git a/service/ProductService.js b/service/ProductService.js
new file mode 100644
index 0000000000..5119585f80
--- /dev/null
+++ b/service/ProductService.js
@@ -0,0 +1,1220 @@
+export const ProductService = {
+    getProductsData() {
+        return [
+            {
+                id: '1000',
+                code: 'f230fh0g3',
+                name: 'Bamboo Watch',
+                description: 'Product Description',
+                image: 'bamboo-watch.jpg',
+                price: 65,
+                category: 'Accessories',
+                quantity: 24,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1001',
+                code: 'nvklal433',
+                name: 'Black Watch',
+                description: 'Product Description',
+                image: 'black-watch.jpg',
+                price: 72,
+                category: 'Accessories',
+                quantity: 61,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1002',
+                code: 'zz21cz3c1',
+                name: 'Blue Band',
+                description: 'Product Description',
+                image: 'blue-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1003',
+                code: '244wgerg2',
+                name: 'Blue T-Shirt',
+                description: 'Product Description',
+                image: 'blue-t-shirt.jpg',
+                price: 29,
+                category: 'Clothing',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1004',
+                code: 'h456wer53',
+                name: 'Bracelet',
+                description: 'Product Description',
+                image: 'bracelet.jpg',
+                price: 15,
+                category: 'Accessories',
+                quantity: 73,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1005',
+                code: 'av2231fwg',
+                name: 'Brown Purse',
+                description: 'Product Description',
+                image: 'brown-purse.jpg',
+                price: 120,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4
+            },
+            {
+                id: '1006',
+                code: 'bib36pfvm',
+                name: 'Chakra Bracelet',
+                description: 'Product Description',
+                image: 'chakra-bracelet.jpg',
+                price: 32,
+                category: 'Accessories',
+                quantity: 5,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1007',
+                code: 'mbvjkgip5',
+                name: 'Galaxy Earrings',
+                description: 'Product Description',
+                image: 'galaxy-earrings.jpg',
+                price: 34,
+                category: 'Accessories',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1008',
+                code: 'vbb124btr',
+                name: 'Game Controller',
+                description: 'Product Description',
+                image: 'game-controller.jpg',
+                price: 99,
+                category: 'Electronics',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 4
+            },
+            {
+                id: '1009',
+                code: 'cm230f032',
+                name: 'Gaming Set',
+                description: 'Product Description',
+                image: 'gaming-set.jpg',
+                price: 299,
+                category: 'Electronics',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 3
+            },
+            {
+                id: '1010',
+                code: 'plb34234v',
+                name: 'Gold Phone Case',
+                description: 'Product Description',
+                image: 'gold-phone-case.jpg',
+                price: 24,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4
+            },
+            {
+                id: '1011',
+                code: '4920nnc2d',
+                name: 'Green Earbuds',
+                description: 'Product Description',
+                image: 'green-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1012',
+                code: '250vm23cc',
+                name: 'Green T-Shirt',
+                description: 'Product Description',
+                image: 'green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 74,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1013',
+                code: 'fldsmn31b',
+                name: 'Grey T-Shirt',
+                description: 'Product Description',
+                image: 'grey-t-shirt.jpg',
+                price: 48,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 3
+            },
+            {
+                id: '1014',
+                code: 'waas1x2as',
+                name: 'Headphones',
+                description: 'Product Description',
+                image: 'headphones.jpg',
+                price: 175,
+                category: 'Electronics',
+                quantity: 8,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5
+            },
+            {
+                id: '1015',
+                code: 'vb34btbg5',
+                name: 'Light Green T-Shirt',
+                description: 'Product Description',
+                image: 'light-green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 34,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1016',
+                code: 'k8l6j58jl',
+                name: 'Lime Band',
+                description: 'Product Description',
+                image: 'lime-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 12,
+                inventoryStatus: 'INSTOCK',
+                rating: 3
+            },
+            {
+                id: '1017',
+                code: 'v435nn85n',
+                name: 'Mini Speakers',
+                description: 'Product Description',
+                image: 'mini-speakers.jpg',
+                price: 85,
+                category: 'Clothing',
+                quantity: 42,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1018',
+                code: '09zx9c0zc',
+                name: 'Painted Phone Case',
+                description: 'Product Description',
+                image: 'painted-phone-case.jpg',
+                price: 56,
+                category: 'Accessories',
+                quantity: 41,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1019',
+                code: 'mnb5mb2m5',
+                name: 'Pink Band',
+                description: 'Product Description',
+                image: 'pink-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1020',
+                code: 'r23fwf2w3',
+                name: 'Pink Purse',
+                description: 'Product Description',
+                image: 'pink-purse.jpg',
+                price: 110,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4
+            },
+            {
+                id: '1021',
+                code: 'pxpzczo23',
+                name: 'Purple Band',
+                description: 'Product Description',
+                image: 'purple-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 6,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1022',
+                code: '2c42cb5cb',
+                name: 'Purple Gemstone Necklace',
+                description: 'Product Description',
+                image: 'purple-gemstone-necklace.jpg',
+                price: 45,
+                category: 'Accessories',
+                quantity: 62,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1023',
+                code: '5k43kkk23',
+                name: 'Purple T-Shirt',
+                description: 'Product Description',
+                image: 'purple-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5
+            },
+            {
+                id: '1024',
+                code: 'lm2tny2k4',
+                name: 'Shoes',
+                description: 'Product Description',
+                image: 'shoes.jpg',
+                price: 64,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1025',
+                code: 'nbm5mv45n',
+                name: 'Sneakers',
+                description: 'Product Description',
+                image: 'sneakers.jpg',
+                price: 78,
+                category: 'Clothing',
+                quantity: 52,
+                inventoryStatus: 'INSTOCK',
+                rating: 4
+            },
+            {
+                id: '1026',
+                code: 'zx23zc42c',
+                name: 'Teal T-Shirt',
+                description: 'Product Description',
+                image: 'teal-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 3,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3
+            },
+            {
+                id: '1027',
+                code: 'acvx872gc',
+                name: 'Yellow Earbuds',
+                description: 'Product Description',
+                image: 'yellow-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 35,
+                inventoryStatus: 'INSTOCK',
+                rating: 3
+            },
+            {
+                id: '1028',
+                code: 'tx125ck42',
+                name: 'Yoga Mat',
+                description: 'Product Description',
+                image: 'yoga-mat.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 15,
+                inventoryStatus: 'INSTOCK',
+                rating: 5
+            },
+            {
+                id: '1029',
+                code: 'gwuby345v',
+                name: 'Yoga Set',
+                description: 'Product Description',
+                image: 'yoga-set.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 8
+            }
+        ];
+    },
+
+    getProductsWithOrdersData() {
+        return [
+            {
+                id: '1000',
+                code: 'f230fh0g3',
+                name: 'Bamboo Watch',
+                description: 'Product Description',
+                image: 'bamboo-watch.jpg',
+                price: 65,
+                category: 'Accessories',
+                quantity: 24,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1000-0',
+                        productCode: 'f230fh0g3',
+                        date: '2020-09-13',
+                        amount: 65,
+                        quantity: 1,
+                        customer: 'David James',
+                        status: 'PENDING'
+                    },
+                    {
+                        id: '1000-1',
+                        productCode: 'f230fh0g3',
+                        date: '2020-05-14',
+                        amount: 130,
+                        quantity: 2,
+                        customer: 'Leon Rodrigues',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1000-2',
+                        productCode: 'f230fh0g3',
+                        date: '2019-01-04',
+                        amount: 65,
+                        quantity: 1,
+                        customer: 'Juan Alejandro',
+                        status: 'RETURNED'
+                    },
+                    {
+                        id: '1000-3',
+                        productCode: 'f230fh0g3',
+                        date: '2020-09-13',
+                        amount: 195,
+                        quantity: 3,
+                        customer: 'Claire Morrow',
+                        status: 'CANCELLED'
+                    }
+                ]
+            },
+            {
+                id: '1001',
+                code: 'nvklal433',
+                name: 'Black Watch',
+                description: 'Product Description',
+                image: 'black-watch.jpg',
+                price: 72,
+                category: 'Accessories',
+                quantity: 61,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1001-0',
+                        productCode: 'nvklal433',
+                        date: '2020-05-14',
+                        amount: 72,
+                        quantity: 1,
+                        customer: 'Maisha Jefferson',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1001-1',
+                        productCode: 'nvklal433',
+                        date: '2020-02-28',
+                        amount: 144,
+                        quantity: 2,
+                        customer: 'Octavia Murillo',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1002',
+                code: 'zz21cz3c1',
+                name: 'Blue Band',
+                description: 'Product Description',
+                image: 'blue-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1002-0',
+                        productCode: 'zz21cz3c1',
+                        date: '2020-07-05',
+                        amount: 79,
+                        quantity: 1,
+                        customer: 'Stacey Leja',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1002-1',
+                        productCode: 'zz21cz3c1',
+                        date: '2020-02-06',
+                        amount: 79,
+                        quantity: 1,
+                        customer: 'Ashley Wickens',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1003',
+                code: '244wgerg2',
+                name: 'Blue T-Shirt',
+                description: 'Product Description',
+                image: 'blue-t-shirt.jpg',
+                price: 29,
+                category: 'Clothing',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: []
+            },
+            {
+                id: '1004',
+                code: 'h456wer53',
+                name: 'Bracelet',
+                description: 'Product Description',
+                image: 'bracelet.jpg',
+                price: 15,
+                category: 'Accessories',
+                quantity: 73,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1004-0',
+                        productCode: 'h456wer53',
+                        date: '2020-09-05',
+                        amount: 60,
+                        quantity: 4,
+                        customer: 'Mayumi Misaki',
+                        status: 'PENDING'
+                    },
+                    {
+                        id: '1004-1',
+                        productCode: 'h456wer53',
+                        date: '2019-04-16',
+                        amount: 2,
+                        quantity: 30,
+                        customer: 'Francesco Salvatore',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1005',
+                code: 'av2231fwg',
+                name: 'Brown Purse',
+                description: 'Product Description',
+                image: 'brown-purse.jpg',
+                price: 120,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1005-0',
+                        productCode: 'av2231fwg',
+                        date: '2020-01-25',
+                        amount: 120,
+                        quantity: 1,
+                        customer: 'Isabel Sinclair',
+                        status: 'RETURNED'
+                    },
+                    {
+                        id: '1005-1',
+                        productCode: 'av2231fwg',
+                        date: '2019-03-12',
+                        amount: 240,
+                        quantity: 2,
+                        customer: 'Lionel Clifford',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1005-2',
+                        productCode: 'av2231fwg',
+                        date: '2019-05-05',
+                        amount: 120,
+                        quantity: 1,
+                        customer: 'Cody Chavez',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1006',
+                code: 'bib36pfvm',
+                name: 'Chakra Bracelet',
+                description: 'Product Description',
+                image: 'chakra-bracelet.jpg',
+                price: 32,
+                category: 'Accessories',
+                quantity: 5,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1006-0',
+                        productCode: 'bib36pfvm',
+                        date: '2020-02-24',
+                        amount: 32,
+                        quantity: 1,
+                        customer: 'Arvin Darci',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1006-1',
+                        productCode: 'bib36pfvm',
+                        date: '2020-01-14',
+                        amount: 64,
+                        quantity: 2,
+                        customer: 'Izzy Jones',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1007',
+                code: 'mbvjkgip5',
+                name: 'Galaxy Earrings',
+                description: 'Product Description',
+                image: 'galaxy-earrings.jpg',
+                price: 34,
+                category: 'Accessories',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1007-0',
+                        productCode: 'mbvjkgip5',
+                        date: '2020-06-19',
+                        amount: 34,
+                        quantity: 1,
+                        customer: 'Jennifer Smith',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1008',
+                code: 'vbb124btr',
+                name: 'Game Controller',
+                description: 'Product Description',
+                image: 'game-controller.jpg',
+                price: 99,
+                category: 'Electronics',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1008-0',
+                        productCode: 'vbb124btr',
+                        date: '2020-01-05',
+                        amount: 99,
+                        quantity: 1,
+                        customer: 'Jeanfrancois David',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1008-1',
+                        productCode: 'vbb124btr',
+                        date: '2020-01-19',
+                        amount: 198,
+                        quantity: 2,
+                        customer: 'Ivar Greenwood',
+                        status: 'RETURNED'
+                    }
+                ]
+            },
+            {
+                id: '1009',
+                code: 'cm230f032',
+                name: 'Gaming Set',
+                description: 'Product Description',
+                image: 'gaming-set.jpg',
+                price: 299,
+                category: 'Electronics',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1009-0',
+                        productCode: 'cm230f032',
+                        date: '2020-06-24',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Kadeem Mujtaba',
+                        status: 'PENDING'
+                    },
+                    {
+                        id: '1009-1',
+                        productCode: 'cm230f032',
+                        date: '2020-05-11',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Ashley Wickens',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1009-2',
+                        productCode: 'cm230f032',
+                        date: '2019-02-07',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Julie Johnson',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1009-3',
+                        productCode: 'cm230f032',
+                        date: '2020-04-26',
+                        amount: 299,
+                        quantity: 1,
+                        customer: 'Tony Costa',
+                        status: 'CANCELLED'
+                    }
+                ]
+            },
+            {
+                id: '1010',
+                code: 'plb34234v',
+                name: 'Gold Phone Case',
+                description: 'Product Description',
+                image: 'gold-phone-case.jpg',
+                price: 24,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1010-0',
+                        productCode: 'plb34234v',
+                        date: '2020-02-04',
+                        amount: 24,
+                        quantity: 1,
+                        customer: 'James Butt',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1010-1',
+                        productCode: 'plb34234v',
+                        date: '2020-05-05',
+                        amount: 48,
+                        quantity: 2,
+                        customer: 'Josephine Darakjy',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1011',
+                code: '4920nnc2d',
+                name: 'Green Earbuds',
+                description: 'Product Description',
+                image: 'green-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 23,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1011-0',
+                        productCode: '4920nnc2d',
+                        date: '2020-06-01',
+                        amount: 89,
+                        quantity: 1,
+                        customer: 'Art Venere',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1012',
+                code: '250vm23cc',
+                name: 'Green T-Shirt',
+                description: 'Product Description',
+                image: 'green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 74,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1012-0',
+                        productCode: '250vm23cc',
+                        date: '2020-02-05',
+                        amount: 49,
+                        quantity: 1,
+                        customer: 'Lenna Paprocki',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1012-1',
+                        productCode: '250vm23cc',
+                        date: '2020-02-15',
+                        amount: 49,
+                        quantity: 1,
+                        customer: 'Donette Foller',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1013',
+                code: 'fldsmn31b',
+                name: 'Grey T-Shirt',
+                description: 'Product Description',
+                image: 'grey-t-shirt.jpg',
+                price: 48,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1013-0',
+                        productCode: 'fldsmn31b',
+                        date: '2020-04-01',
+                        amount: 48,
+                        quantity: 1,
+                        customer: 'Simona Morasca',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1014',
+                code: 'waas1x2as',
+                name: 'Headphones',
+                description: 'Product Description',
+                image: 'headphones.jpg',
+                price: 175,
+                category: 'Electronics',
+                quantity: 8,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1014-0',
+                        productCode: 'waas1x2as',
+                        date: '2020-05-15',
+                        amount: 175,
+                        quantity: 1,
+                        customer: 'Lenna Paprocki',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1014-1',
+                        productCode: 'waas1x2as',
+                        date: '2020-01-02',
+                        amount: 175,
+                        quantity: 1,
+                        customer: 'Donette Foller',
+                        status: 'CANCELLED'
+                    }
+                ]
+            },
+            {
+                id: '1015',
+                code: 'vb34btbg5',
+                name: 'Light Green T-Shirt',
+                description: 'Product Description',
+                image: 'light-green-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 34,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1015-0',
+                        productCode: 'vb34btbg5',
+                        date: '2020-07-02',
+                        amount: 98,
+                        quantity: 2,
+                        customer: 'Mitsue Tollner',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1016',
+                code: 'k8l6j58jl',
+                name: 'Lime Band',
+                description: 'Product Description',
+                image: 'lime-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 12,
+                inventoryStatus: 'INSTOCK',
+                rating: 3,
+                orders: []
+            },
+            {
+                id: '1017',
+                code: 'v435nn85n',
+                name: 'Mini Speakers',
+                description: 'Product Description',
+                image: 'mini-speakers.jpg',
+                price: 85,
+                category: 'Clothing',
+                quantity: 42,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1017-0',
+                        productCode: 'v435nn85n',
+                        date: '2020-07-12',
+                        amount: 85,
+                        quantity: 1,
+                        customer: 'Minna Amigon',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1018',
+                code: '09zx9c0zc',
+                name: 'Painted Phone Case',
+                description: 'Product Description',
+                image: 'painted-phone-case.jpg',
+                price: 56,
+                category: 'Accessories',
+                quantity: 41,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1018-0',
+                        productCode: '09zx9c0zc',
+                        date: '2020-07-01',
+                        amount: 56,
+                        quantity: 1,
+                        customer: 'Abel Maclead',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1018-1',
+                        productCode: '09zx9c0zc',
+                        date: '2020-05-02',
+                        amount: 56,
+                        quantity: 1,
+                        customer: 'Minna Amigon',
+                        status: 'RETURNED'
+                    }
+                ]
+            },
+            {
+                id: '1019',
+                code: 'mnb5mb2m5',
+                name: 'Pink Band',
+                description: 'Product Description',
+                image: 'pink-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 63,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: []
+            },
+            {
+                id: '1020',
+                code: 'r23fwf2w3',
+                name: 'Pink Purse',
+                description: 'Product Description',
+                image: 'pink-purse.jpg',
+                price: 110,
+                category: 'Accessories',
+                quantity: 0,
+                inventoryStatus: 'OUTOFSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1020-0',
+                        productCode: 'r23fwf2w3',
+                        date: '2020-05-29',
+                        amount: 110,
+                        quantity: 1,
+                        customer: 'Kiley Caldarera',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1020-1',
+                        productCode: 'r23fwf2w3',
+                        date: '2020-02-11',
+                        amount: 220,
+                        quantity: 2,
+                        customer: 'Graciela Ruta',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1021',
+                code: 'pxpzczo23',
+                name: 'Purple Band',
+                description: 'Product Description',
+                image: 'purple-band.jpg',
+                price: 79,
+                category: 'Fitness',
+                quantity: 6,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1021-0',
+                        productCode: 'pxpzczo23',
+                        date: '2020-02-02',
+                        amount: 79,
+                        quantity: 1,
+                        customer: 'Cammy Albares',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1022',
+                code: '2c42cb5cb',
+                name: 'Purple Gemstone Necklace',
+                description: 'Product Description',
+                image: 'purple-gemstone-necklace.jpg',
+                price: 45,
+                category: 'Accessories',
+                quantity: 62,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1022-0',
+                        productCode: '2c42cb5cb',
+                        date: '2020-06-29',
+                        amount: 45,
+                        quantity: 1,
+                        customer: 'Mattie Poquette',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1022-1',
+                        productCode: '2c42cb5cb',
+                        date: '2020-02-11',
+                        amount: 135,
+                        quantity: 3,
+                        customer: 'Meaghan Garufi',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1023',
+                code: '5k43kkk23',
+                name: 'Purple T-Shirt',
+                description: 'Product Description',
+                image: 'purple-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 2,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 5,
+                orders: [
+                    {
+                        id: '1023-0',
+                        productCode: '5k43kkk23',
+                        date: '2020-04-15',
+                        amount: 49,
+                        quantity: 1,
+                        customer: 'Gladys Rim',
+                        status: 'RETURNED'
+                    }
+                ]
+            },
+            {
+                id: '1024',
+                code: 'lm2tny2k4',
+                name: 'Shoes',
+                description: 'Product Description',
+                image: 'shoes.jpg',
+                price: 64,
+                category: 'Clothing',
+                quantity: 0,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: []
+            },
+            {
+                id: '1025',
+                code: 'nbm5mv45n',
+                name: 'Sneakers',
+                description: 'Product Description',
+                image: 'sneakers.jpg',
+                price: 78,
+                category: 'Clothing',
+                quantity: 52,
+                inventoryStatus: 'INSTOCK',
+                rating: 4,
+                orders: [
+                    {
+                        id: '1025-0',
+                        productCode: 'nbm5mv45n',
+                        date: '2020-02-19',
+                        amount: 78,
+                        quantity: 1,
+                        customer: 'Yuki Whobrey',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1025-1',
+                        productCode: 'nbm5mv45n',
+                        date: '2020-05-21',
+                        amount: 78,
+                        quantity: 1,
+                        customer: 'Fletcher Flosi',
+                        status: 'PENDING'
+                    }
+                ]
+            },
+            {
+                id: '1026',
+                code: 'zx23zc42c',
+                name: 'Teal T-Shirt',
+                description: 'Product Description',
+                image: 'teal-t-shirt.jpg',
+                price: 49,
+                category: 'Clothing',
+                quantity: 3,
+                inventoryStatus: 'LOWSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1026-0',
+                        productCode: 'zx23zc42c',
+                        date: '2020-04-24',
+                        amount: 98,
+                        quantity: 2,
+                        customer: 'Bette Nicka',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1027',
+                code: 'acvx872gc',
+                name: 'Yellow Earbuds',
+                description: 'Product Description',
+                image: 'yellow-earbuds.jpg',
+                price: 89,
+                category: 'Electronics',
+                quantity: 35,
+                inventoryStatus: 'INSTOCK',
+                rating: 3,
+                orders: [
+                    {
+                        id: '1027-0',
+                        productCode: 'acvx872gc',
+                        date: '2020-01-29',
+                        amount: 89,
+                        quantity: 1,
+                        customer: 'Veronika Inouye',
+                        status: 'DELIVERED'
+                    },
+                    {
+                        id: '1027-1',
+                        productCode: 'acvx872gc',
+                        date: '2020-06-11',
+                        amount: 89,
+                        quantity: 1,
+                        customer: 'Willard Kolmetz',
+                        status: 'DELIVERED'
+                    }
+                ]
+            },
+            {
+                id: '1028',
+                code: 'tx125ck42',
+                name: 'Yoga Mat',
+                description: 'Product Description',
+                image: 'yoga-mat.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 15,
+                inventoryStatus: 'INSTOCK',
+                rating: 5,
+                orders: []
+            },
+            {
+                id: '1029',
+                code: 'gwuby345v',
+                name: 'Yoga Set',
+                description: 'Product Description',
+                image: 'yoga-set.jpg',
+                price: 20,
+                category: 'Fitness',
+                quantity: 25,
+                inventoryStatus: 'INSTOCK',
+                rating: 8,
+                orders: [
+                    {
+                        id: '1029-0',
+                        productCode: 'gwuby345v',
+                        date: '2020-02-14',
+                        amount: 4,
+                        quantity: 80,
+                        customer: 'Maryann Royster',
+                        status: 'DELIVERED'
+                    }
+                ]
+            }
+        ];
+    },
+
+    getProductsMini() {
+        return Promise.resolve(this.getProductsData().slice(0, 5));
+    },
+
+    getProductsSmall() {
+        return Promise.resolve(this.getProductsData().slice(0, 10));
+    },
+
+    getProducts() {
+        return Promise.resolve(this.getProductsData());
+    },
+
+    getProductsWithOrdersSmall() {
+        return Promise.resolve(this.getProductsWithOrdersData().slice(0, 10));
+    },
+
+    getProductsWithOrders() {
+        return Promise.resolve(this.getProductsWithOrdersData());
+    }
+};
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 4ca806ce11..0000000000
--- a/src/App.js
+++ /dev/null
@@ -1,320 +0,0 @@
-import React, { Component } from 'react';
-import { AppMenu } from './AppMenu';
-import {Dialog} from './components/dialog/Dialog';
-import {Button} from './components/button/Button';
-import classNames from 'classnames';
-import 'babel-polyfill';
-import './resources/style/primereact.css';
-import '@fullcalendar/core/main.css';
-import '@fullcalendar/daygrid/main.css';
-import '@fullcalendar/timegrid/main.css';
-import 'primeicons/primeicons.css';
-import 'primeflex/primeflex.css';
-import 'prismjs/themes/prism-coy.css';
-import './resources/style/flags.css';
-import './sass/App.scss';
-
-import AppRouter from './AppRouter';
-/*import AppNews from './AppNews';*/
-import AppTopbar from './AppTopbar';
-import AppFooter from './AppFooter';
-import AppConfig from './AppConfig';
-
-import axios from 'axios';
-
-import AppContentContext from './AppContentContext';
-
-export class App extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            activeTheme: 'nova-light',
-            mobileMenuActive: false,
-            themeMenuActive: false,
-            themeMenuVisited: false,
-            newsActive: sessionStorage.getItem('primenews-hidden') ? false: true,
-            configuratorActive: false,
-            changelog: null,
-            changelogActive: false,
-            totalVersion: 0,
-            prevChangelog: null,
-            currentChangelog: null,
-            nextChangelog: null,
-            filteredChangelog: null,
-            searchVal: null
-        };
-
-        this.onTopbarItemClick = this.onTopbarItemClick.bind(this);
-        this.onThemeChange = this.onThemeChange.bind(this);
-        this.onMenuButtonClick = this.onMenuButtonClick.bind(this);
-        this.onSidebarClick = this.onSidebarClick.bind(this);
-        this.onMenuItemClick = this.onMenuItemClick.bind(this);
-        this.onHideNews = this.onHideNews.bind(this);
-        this.bindDocumentClick = this.bindDocumentClick.bind(this);
-        this.onConfiguratorClick = this.onConfiguratorClick.bind(this)
-        this.toggleConfigurator = this.toggleConfigurator.bind(this);
-        this.hideConfigurator = this.hideConfigurator.bind(this);
-
-        this.showChangelogDialog = this.showChangelogDialog.bind(this);
-        this.hideChangelogDialog = this.hideChangelogDialog.bind(this);
-        this.onPrev = this.onPrev.bind(this);
-        this.onNext = this.onNext.bind(this);
-    }
-
-    onTopbarItemClick(event) {
-        this.topbarItemClick = true;
-
-        if(this.state.activeTopbarItem === event.item)
-            this.setState({activeTopbarItem: null});
-        else
-            this.setState({activeTopbarItem: event.item});
-
-        //event.originalEvent.preventDefault();
-    }
-
-    onThemeChange(event) {
-        let themeElement = document.getElementById('theme-link');
-        let urlTokens = themeElement.getAttribute('href').split('/');
-        urlTokens[urlTokens.length - 2] = event.theme;
-        let newURL = urlTokens.join('/');
-
-        this.replaceLink(themeElement, newURL);
-
-        const hasBodyDarkTheme = this.hasClass(document.body, 'dark-theme');
-        if (event.dark) {
-            if (!hasBodyDarkTheme) {
-                this.addClass(document.body, 'dark-theme');
-            }
-        }
-        else if (hasBodyDarkTheme) {
-            this.removeClass(document.body, 'dark-theme');
-        }
-
-        this.setState({
-            themeMenuActive: false,
-            activeTheme: event.theme
-        });
-        event.originalEvent.preventDefault();
-    }
-
-    replaceLink(linkElement, href) {
-        const id = linkElement.getAttribute('id');
-        const cloneLinkElement = linkElement.cloneNode(true);
-        cloneLinkElement.setAttribute('href', href);
-        cloneLinkElement.setAttribute('id', id + '-clone');
-        linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-
-        cloneLinkElement.addEventListener('load', () => {
-            linkElement.remove();
-            cloneLinkElement.setAttribute('id', id);
-        });
-    }
-
-    addClass(element, className) {
-        if (element.classList)
-            element.classList.add(className);
-        else
-            element.className += ' ' + className;
-    }
-
-    removeClass(element, className) {
-        if (element.classList)
-            element.classList.remove(className);
-        else
-            element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-    }
-
-    hasClass(element, className) {
-        if (element.classList)
-            return element.classList.contains(className);
-        else
-            return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
-    }
-
-    onMenuButtonClick() {
-        this.menuClick = true;
-        this.setState({ mobileMenuActive: !this.state.mobileMenuActive });
-    }
-
-    onSidebarClick() {
-        this.menuClick = true;
-    }
-
-    onMenuItemClick() {
-        this.setState({ mobileMenuActive: false });
-    }
-
-    bindDocumentClick() {
-        if (!this.topbarItemClick) {
-            this.setState({
-                activeTopbarItem: null,
-                topbarMenuActive: false
-            });
-        }
-
-        if (!this.menuClick) {
-            this.setState({ mobileMenuActive: false });
-        }
-
-        if (!this.configClick) {
-            this.setState({ configuratorActive: false });
-        }
-
-        this.topbarItemClick = false;
-        this.menuClick = false;
-        this.configClick = false;
-    }
-
-    onHideNews(event) {
-        this.setState({ newsActive: false });
-        sessionStorage.setItem('primenews-hidden', "true");
-        event.stopPropagation();
-    }
-
-    onConfiguratorClick() {
-        this.configClick = true;
-    }
-
-    toggleConfigurator() {
-        this.configClick = true;
-        this.setState({ configuratorActive: !this.state.configuratorActive })
-    }
-
-    hideConfigurator() {
-        this.setState({ configuratorActive: false });
-    }
-
-    getChangelog() {
-        axios.get('showcase/resources/changelog/changelog.json', { headers: { 'Cache-Control' : 'no-cache' } })
-            .then(res => res.data)
-            .then(data => this.setState({ changelog: data }));
-    }
-
-    showChangelogDialog(searchVal) {
-        const currentVersion = Object.keys(this.state.changelog)[0],
-            totalVersion = Object.keys(this.state.changelog).length;
-
-        this.setState({
-            changelogActive: true,
-            currentChangelog: { version: currentVersion, index: 0 },
-            prevChangelog: { version: Object.keys(this.state.changelog)[1], index: 1 },
-            filteredChangelog: this.state.changelog[currentVersion][searchVal.toLowerCase()],
-            totalVersion,
-            searchVal
-        });
-    }
-
-    hideChangelogDialog() {
-        this.setState({ changelogActive: false });
-    }
-
-    onPrev() {
-        let state = {
-            filteredChangelog: this.state.changelog[this.state.prevChangelog.version][this.state.searchVal.toLowerCase()],
-            prevChangelog: null,
-            currentChangelog: this.state.prevChangelog,
-            nextChangelog: this.state.currentChangelog
-        };
-
-        if (this.state.totalVersion > this.state.prevChangelog.index + 1) {
-            let prevIndex = this.state.prevChangelog.index + 1;
-            let prevVersion = Object.keys(this.state.changelog)[prevIndex];
-            state['prevChangelog'] = {
-                version: prevVersion,
-                index: prevIndex
-            }
-        }
-
-        this.setState(state);
-    }
-
-    onNext() {
-        let state = {
-            filteredChangelog: this.state.changelog[this.state.nextChangelog.version][this.state.searchVal.toLowerCase()],
-            prevChangelog: this.state.currentChangelog,
-            currentChangelog: this.state.nextChangelog,
-            nextChangelog: null
-        };
-
-        if (this.state.nextChangelog.index > 0) {
-            let nextIndex = this.state.nextChangelog.index - 1;
-            let nextVersion = Object.keys(this.state.changelog)[nextIndex];
-            state['nextChangelog'] = {
-                version: nextVersion,
-                index: nextIndex
-            }
-        }
-
-        this.setState(state);
-    }
-
-    componentDidMount() {
-        this.getChangelog();
-    }
-
-    render() {
-        const wrapperClassName = classNames('layout-wrapper', {
-            /*'layout-news-active': this.state.newsActive,*/
-            'layout-sidebar-mobile-active': this.state.mobileMenuActive,
-            'layout-config-active': this.state.configuratorActive
-        });
-
-        return (
-            <div className={wrapperClassName} onClick={this.bindDocumentClick}>
-
-                {/* <AppNews newsActive={this.state.newsActive} onHideNews={this.onHideNews}/> */}
-
-                <AppTopbar activeTopbarItem={this.state.activeTopbarItem} onMenuButtonClick={this.onMenuButtonClick}
-                    onTopbarItemClick={this.onTopbarItemClick} onThemeChange={this.onThemeChange} menuActive={this.state.mobileMenuActive}/>
-
-                <AppMenu onSidebarClick={this.onSidebarClick} onMenuItemClick={this.onMenuItemClick}/>
-
-                <div className="layout-content">
-                    <AppContentContext.Provider value={{
-                        changelogText: "VIEW CHANGELOG",
-                        onChangelogBtnClick: this.showChangelogDialog
-                    }}>
-                        <AppRouter />
-
-                    </AppContentContext.Provider>
-
-                    <Dialog header={`${this.state.searchVal} changelog`} className="layout-changelog-dialog" visible={this.state.changelogActive} style={{width: '50vw'}} onHide={this.hideChangelogDialog}>
-                        {
-                            this.state.currentChangelog && <div className="layout-changelog-current-header">
-                                    <span>
-                                        <span className="layout-changelog-version">{this.state.currentChangelog.version}</span>
-                                        { this.state.currentChangelog.index === 0 && <span className="layout-changelog-badge">current</span> }
-                                    </span>
-                                    <a href="https://github.com/primefaces/primereact/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" className="layout-changelog-full">View Full Changelog</a>
-                                </div>
-                        }
-                        <ul className="layout-changelog-container">
-                            {
-                                this.state.filteredChangelog ?
-                                    this.state.filteredChangelog.map((item, index) => {
-                                        return <li key={index}>&#9679; {item.title} <a href={item.url} target="_blank" rel="noopener noreferrer" className="layout-changelog-issue-no">#{item.number}</a></li>
-                                    })
-                                    :
-                                    <li>No Change</li>
-                            }
-                        </ul>
-                        <div className="layout-changelog-actions">
-                            { this.state.prevChangelog && <Button type="button" label={this.state.prevChangelog.version} onClick={this.onPrev} className="p-button-secondary" icon="pi pi-chevron-left" /> }
-                            { this.state.nextChangelog && <Button type="button" label={this.state.nextChangelog.version} onClick={this.onNext} className="p-button-secondary" icon="pi pi-chevron-right" iconPos="right" /> }
-                        </div>
-                    </Dialog>
-
-                    <AppFooter />
-                </div>
-
-                <AppConfig onConfiguratorClick={this.onConfiguratorClick} toggleConfigurator={this.toggleConfigurator}
-                    hideConfigurator={this.hideConfigurator} onThemeChange={this.onThemeChange} activeTheme={this.state.activeTheme}/>
-
-                { this.state.mobileMenuActive && <div className="layout-mask"></div> }
-            </div>
-        );
-    }
-}
-
-export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index b84af98d72..0000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
-});
diff --git a/src/AppConfig.js b/src/AppConfig.js
deleted file mode 100644
index 0e1c17e5ab..0000000000
--- a/src/AppConfig.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { Component } from 'react';
-
-export class AppConfig extends Component {
-
-    constructor() {
-        super();
-
-        this.onThemeChange = this.onThemeChange.bind(this);
-    }
-
-    onThemeChange(event, theme, dark) {
-        if (this.props.onThemeChange) {
-            this.props.onThemeChange({
-                originalEvent: event,
-                theme,
-                dark
-            })
-        }
-    }
-
-    render() {
-        return (
-            <div className="layout-config" onClick={this.props.onConfiguratorClick}>
-                <div className="layout-config-content-wrapper">
-                    <button type="button" className="p-link layout-config-button" onClick={this.props.toggleConfigurator}>
-                        <i className="pi pi-cog"></i>
-                    </button>
-                    <button type="button" className="p-link layout-config-close" onClick={this.props.hideConfigurator}>
-                        <i className="pi pi-times"></i>
-                    </button>
-
-                    <div className="layout-config-content">
-                        <div className="free-themes">
-                            <h1 style={{ 'marginTop': 0 }}>FREE THEMES</h1>
-                            <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primereact">PrimeReact Theme Designer</a>.</p>
-                            <div className="p-grid">
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" onClick={e => this.onThemeChange(e, 'nova-light', false)} />
-                                        {this.props.activeTheme === 'nova-light' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Nova-Light</span>
-                                </div>
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" onClick={e => this.onThemeChange(e, 'nova-dark', false)} />
-                                        {this.props.activeTheme === 'nova-dark' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Nova-Dark</span>
-                                </div>
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" onClick={e => this.onThemeChange(e, 'nova-colored', false)} />
-                                        {this.props.activeTheme === 'nova-colored' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Nova-Colored</span>
-                                </div>
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" onClick={e => this.onThemeChange(e, 'luna-amber', true)} />
-                                        {this.props.activeTheme === 'luna-amber' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Luna-Amber</span>
-                                </div>
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" onClick={e => this.onThemeChange(e, 'luna-blue', true)} />
-                                        {this.props.activeTheme === 'luna-blue' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Luna-Blue</span>
-                                </div>
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" onClick={e => this.onThemeChange(e, 'luna-green', true)} />
-                                        {this.props.activeTheme === 'luna-green' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Luna-Green</span>
-                                </div>
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" onClick={e => this.onThemeChange(e, 'luna-pink', true)} />
-                                        {this.props.activeTheme === 'luna-pink' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Luna-Pink</span>
-                                </div>
-                                <div className="p-col-3">
-                                    <button type="button" className="p-link">
-                                        <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-rhea.png" alt="Rhea" onClick={e => this.onThemeChange(e, 'rhea', false)} />
-                                        {this.props.activeTheme === 'rhea' && <i className="pi pi-check" />}
-                                    </button>
-                                    <span>Rhea</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="premium-themes">
-                            <h1>PREMIUM CREATE-REACT-APP TEMPLATES</h1>
-                            <p>Based on <a href="https://github.com/facebookincubator/create-react-app">create-react-app</a>, develop awesome applications in no time using the premium templates
-                                of PrimeReact and impress your users.</p>
-                            <div className="p-grid">
-                                <div className="p-col-12 p-md-6">
-                                    <a href="https://www.primefaces.org/layouts/sapphire-react" rel="noopener noreferrer" target="_blank">
-                                        <img alt="Sapphire" src="http://github.com/showcase/resources/images/layouts/sapphire-react.jpg" />
-                                    </a>
-                                </div>
-                                <div className="p-col-12 p-md-6">
-                                    <a href="https://www.primefaces.org/layouts/serenity-react" rel="noopener noreferrer" target="_blank">
-                                        <img alt="Serenity" src="http://github.com/showcase/resources/images/layouts/serenity-react.jpg" />
-                                    </a>
-                                </div>
-                                <div className="p-col-12 p-md-6">
-                                    <a href="https://www.primefaces.org/layouts/ultima-react" rel="noopener noreferrer" target="_blank">
-                                        <img alt="Ultima" src="http://github.com/showcase/resources/images/layouts/ultima-react.jpg" />
-                                    </a>
-                                </div>
-                                <div className="p-col-12 p-md-6">
-                                    <a href="https://www.primefaces.org/layouts/babylon-react" rel="noopener noreferrer" target="_blank">
-                                        <img alt="Babylon" src="http://github.com/showcase/resources/images/layouts/babylon-react.jpg" />
-                                    </a>
-                                </div>
-                                <div className="p-col-12 p-md-6">
-                                    <a href="https://www.primefaces.org/layouts/avalon-react" rel="noopener noreferrer" target="_blank">
-                                        <img alt="Avalon" src="http://github.com/showcase/resources/images/layouts/avalon-react.jpg" />
-                                    </a>
-                                </div>
-                                <div className="p-col-12 p-md-6">
-                                    <a href="https://www.primefaces.org/layouts/apollo-react" rel="noopener noreferrer" target="_blank">
-                                        <img alt="Apollo" src="http://github.com/showcase/resources/images/layouts/apollo-react.jpg" />
-                                    </a>
-                                </div>
-                                <div className="p-col-12 p-md-6">
-                                    <a href="https://www.primefaces.org/layouts/roma-react" rel="noopener noreferrer" target="_blank">
-                                        <img alt="Roma" src="http://github.com/showcase/resources/images/layouts/roma-react.jpg" />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default AppConfig;
diff --git a/src/AppFooter.js b/src/AppFooter.js
deleted file mode 100644
index 84e3b4ee11..0000000000
--- a/src/AppFooter.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-
-export class AppFooter extends Component {
-
-    constructor() {
-        super();
-
-        this.version = require('../package.json') && require('../package.json').version;
-    }
-
-    render() {
-        return (
-            <div className="content-section layout-footer clearfix">
-                <span>PrimeReact {this.version} by <a href="http://www.primetek.com.tr/" target="_blank" rel="noopener noreferrer">PrimeTek</a></span>
-                <div className="footer-links">
-                    <a href="https://github.com/primefaces/primereact"><i className=" icon-github fa fa-github-square"></i></a>
-                    <a href="https://twitter.com/primereact"><i className="icon-twitter fa fa-twitter-square"></i></a>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default AppFooter;
diff --git a/src/AppMenu.js b/src/AppMenu.js
deleted file mode 100644
index 5f32520e78..0000000000
--- a/src/AppMenu.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import axios from 'axios';
-import classNames from 'classnames';
-
-export class AppMenu extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            menu: null,
-            filteredMenu: []
-        };
-
-        this.onSearchInputChange = this.onSearchInputChange.bind(this);
-    }
-
-    getMenu() {
-        axios.get('showcase/resources/menu/menu.json', { headers: { 'Cache-Control' : 'no-cache' } })
-            .then(res => res.data.data)
-            .then(data => this.setState({ menu: data, filteredMenu: data }));
-    }
-
-    onSearchInputChange(event) {
-        if (!this.state.menu){
-            this.setState({ filteredMenu : [] });
-        }
-        else if (!event.target.value) {
-            this.setState({ filteredMenu : this.state.menu });
-        }
-        else if (this.state.menu) {
-            const searchVal = event.target.value && event.target.value.toLowerCase();
-            let filteredMenu = [];
-            for(let item of this.state.menu) {
-                let copyItem = {...item};
-                if (this.findFilteredItems(copyItem, searchVal) || this.isFilterMatched(copyItem, searchVal)) {
-                    filteredMenu.push(copyItem);
-                }
-            }
-
-            this.setState({ filteredMenu });
-        }
-    }
-
-    findFilteredItems(item, searchVal) {
-        if (item) {
-            let matched = false;
-            if (item.children) {
-                let childItems = [...item.children];
-                item.children = [];
-                for (let childItem of childItems) {
-                    let copyChildItem = {...childItem};
-                    if (this.isFilterMatched(copyChildItem, searchVal)) {
-                        matched = true;
-                        item.children.push(copyChildItem);
-                    }
-                }
-            }
-
-            if (matched) {
-                return true;
-            }
-        }
-    }
-
-    isFilterMatched(item, searchVal) {
-        let matched = false;
-        if(item.name.toLowerCase().indexOf(searchVal) > -1 || this.onFilterOnMeta(item, searchVal)) {
-            matched = true;
-        }
-
-        if (!matched || !(item.children && item.children.length)) {
-            matched = this.findFilteredItems(item, searchVal) || matched;
-        }
-
-        return matched;
-    }
-
-    onFilterOnMeta(item, searchVal) {
-        if (item && item.meta) {
-            return item.meta.filter(meta => meta.toLowerCase().indexOf(searchVal) > -1).length > 0
-        }
-
-        return false;
-    }
-
-    componentDidMount() {
-        this.getMenu();
-    }
-
-    renderSubmenu(menuitem, menuitemIndex) {
-        if (menuitem.children) {
-            return (
-                <ul className="layout-submenu" role="menu" aria-expanded={true}>
-                    {
-                        menuitem.children.map((item, index) => {
-                            return (
-                                <li key={`menuitem_${menuitemIndex}_${index}`} role="presentation">
-                                    <Link to={item.to} role="menuitem" onClick={this.props.onMenuItemClick}>
-                                        {item.name}
-                                        {item.badge && <span className={classNames('layout-menuitem-badge', 'layout-menuitem-badge-' + item.badge)}>{item.badge}</span> }
-                                    </Link>
-                                </li>
-                            )
-                        })
-                    }
-                </ul>
-            );
-        }
-
-        return null;
-    }
-
-    renderRootMenuItems() {
-        if (this.state.menu) {
-            return (
-                <React.Fragment>
-                    {
-                        this.state.filteredMenu && this.state.filteredMenu.map((menuitem, index) => {
-                            const submenus = this.renderSubmenu(menuitem, index);
-                            return (
-                                <li key={`menuitem_${index}`} role="presentation">
-                                    <span className="layout-menu-header" role="menuitem">
-                                        <img alt={menuitem.name} className="layout-menu-icon" src={menuitem['icon']}></img>
-                                        <span className="layout-menu-text">{menuitem.name}</span>
-                                    </span>
-                                    { submenus }
-                                </li>
-                            )
-                        })
-                    }
-                </React.Fragment>
-            );
-        }
-
-        return null;
-    }
-
-    render() {
-        const menuItems = this.renderRootMenuItems();
-
-        return (
-            <div className="layout-sidebar" role="navigation" onClick={this.props.onSidebarClick}>
-                <div className="layout-sidebar-search-wrapper">
-                    <i className="pi pi-search layout-sidebar-search-icon"></i>
-                    <input type="text" onChange={this.onSearchInputChange} placeholder="Search..." aria-label="Search input" autoComplete="off"/>
-                </div>
-
-                <ul className="layout-menu" role="menubar">
-                    { menuItems }
-                </ul>
-            </div>
-        );
-    }
-}
diff --git a/src/AppNews.js b/src/AppNews.js
deleted file mode 100644
index 4d067204c1..0000000000
--- a/src/AppNews.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-
-export class AppNews extends Component {
-
-    static defaultProps = {
-        newsActive: true
-    };
-
-    static propTypes = {
-        newsActive: PropTypes.bool
-    };
-
-    render() {
-        return (
-            <React.Fragment>
-                {
-                    this.props.newsActive && <div className="layout-news" onClick={() => window.open('https://www.primefaces.org/store', '_blank')}>
-                        <div className="layout-news-container">
-                            <img src="http://github.com/showcase/resources/images/news/topbar-easter-2020-text.png" className="layout-news-text" alt="New Year" />
-                            <img src="http://github.com/showcase/resources/images/news/topbar-easter-2020-ultima.png" className="layout-news-helper-image" alt="New Year" />
-
-                            <button type="button" className="p-link layout-news-close" onClick={this.props.onHideNews}>
-                                <i className="pi pi-times"></i>
-                            </button>
-                        </div>
-                    </div>
-                }
-            </React.Fragment>
-        );
-    }
-}
-
-export default AppNews;
diff --git a/src/AppRouter.js b/src/AppRouter.js
deleted file mode 100644
index 0a1dad9352..0000000000
--- a/src/AppRouter.js
+++ /dev/null
@@ -1,313 +0,0 @@
-import React, { Component } from 'react';
-import { Route, withRouter } from 'react-router-dom';
-
-import { AccordionDemo } from './showcase/accordion/AccordionDemo';
-import { AutoCompleteDemo } from './showcase/autocomplete/AutoCompleteDemo';
-import { ButtonDemo } from './showcase/button/ButtonDemo';
-import { CarouselDemo } from './showcase/carousel/CarouselDemo';
-import { SplitButtonDemo } from './showcase/splitbutton/SplitButtonDemo';
-import { CheckboxDemo } from './showcase/checkbox/CheckboxDemo';
-import { ChipsDemo } from './showcase/chips/ChipsDemo';
-import { DialogDemo } from './showcase/dialog/DialogDemo';
-import { DeferredContentDemo } from './showcase/deferredcontent/DeferredContentDemo';
-import { DropdownDemo } from './showcase/dropdown/DropdownDemo';
-import { FieldsetDemo } from './showcase/fieldset/FieldsetDemo';
-import { FileUploadDemo } from './showcase/fileupload/FileUploadDemo';
-import { FlexGridDemo } from './showcase/flexgrid/FlexGridDemo';
-import { GMapDemo } from './showcase/gmap/GMapDemo';
-import { GrowlDemo } from './showcase/growl/GrowlDemo';
-import { InputNumberDemo } from './showcase/inputnumber/InputNumberDemo';
-import { InputTextDemo } from './showcase/inputtext/InputTextDemo';
-import { InputTextareaDemo } from './showcase/inputtextarea/InputTextareaDemo';
-import { ListBoxDemo } from './showcase/listbox/ListBoxDemo';
-import { MessagesDemo } from './showcase/messages/MessagesDemo';
-import { MultiSelectDemo } from './showcase/multiselect/MultiSelectDemo';
-import { OverlayPanelDemo } from './showcase/overlaypanel/OverlayPanelDemo';
-import { PanelDemo } from './showcase/panel/PanelDemo';
-import { ScrollPanelDemo } from './showcase/scrollpanel/ScrollPanelDemo';
-import { ProgressBarDemo } from './showcase/progressbar/ProgressBarDemo';
-import { RadioButtonDemo } from './showcase/radiobutton/RadioButtonDemo';
-import { TabViewDemo } from './showcase/tabview/TabViewDemo';
-import { ToggleButtonDemo } from './showcase/togglebutton/ToggleButtonDemo';
-import { TriStateCheckboxDemo } from './showcase/tristatecheckbox/TriStateCheckboxDemo';
-import { SelectButtonDemo } from './showcase/selectbutton/SelectButtonDemo';
-import { InputSwitchDemo } from './showcase/inputswitch/InputSwitchDemo';
-import { SliderDemo } from './showcase/slider/SliderDemo';
-import { SpinnerDemo } from './showcase/spinner/SpinnerDemo';
-import { InputMaskDemo } from './showcase/inputmask/InputMaskDemo';
-import { CalendarDemo } from './showcase/calendar/CalendarDemo';
-import { ChartDemo } from './showcase/chart/ChartDemo';
-import { ComboChartDemo } from './showcase/chart/ComboChartDemo';
-import { PieChartDemo } from './showcase/chart/PieChartDemo';
-import { BarChartDemo } from './showcase/chart/BarChartDemo';
-import { LineChartDemo } from './showcase/chart/LineChartDemo';
-import { DoughnutChartDemo } from './showcase/chart/DoughnutChartDemo';
-import { RadarChartDemo } from './showcase/chart/RadarChartDemo';
-import { PolarAreaChartDemo } from './showcase/chart/PolarAreaChartDemo';
-import { PaginatorDemo } from './showcase/paginator/PaginatorDemo';
-import { DataTableDemo } from './showcase/datatable/DataTableDemo';
-import { DataTableBasicDemo } from './showcase/datatable/DataTableBasicDemo';
-import { DataTableDynamicDemo } from './showcase/datatable/DataTableDynamicDemo';
-import { DataTableLazyDemo } from './showcase/datatable/DataTableLazyDemo';
-import { DataTableExportDemo } from './showcase/datatable/DataTableExportDemo';
-import { DataTableCrudDemo } from './showcase/datatable/DataTableCrudDemo';
-import { DataTableTemplatingDemo } from './showcase/datatable/DataTableTemplatingDemo';
-import { DataTablePaginatorDemo } from './showcase/datatable/DataTablePaginatorDemo';
-import { DataTableSortDemo } from './showcase/datatable/DataTableSortDemo';
-import { DataTableFilterDemo } from './showcase/datatable/DataTableFilterDemo';
-import { DataTableColTogglerDemo } from './showcase/datatable/DataTableColTogglerDemo';
-import { DataTableScrollDemo } from './showcase/datatable/DataTableScrollDemo';
-import { DataTableSelectionDemo } from './showcase/datatable/DataTableSelectionDemo';
-import { DataTableColGroupDemo } from './showcase/datatable/DataTableColGroupDemo';
-import { DataTableRowExpansionDemo } from './showcase/datatable/DataTableRowExpansionDemo';
-import { DataTableColResizeDemo } from './showcase/datatable/DataTableColResizeDemo';
-import { DataTableReorderDemo } from './showcase/datatable/DataTableReorderDemo';
-import { DataTableContextMenuDemo } from './showcase/datatable/DataTableContextMenuDemo';
-import { DataTableResponsiveDemo } from './showcase/datatable/DataTableResponsiveDemo';
-import { DataTableEditDemo } from './showcase/datatable/DataTableEditDemo';
-import { DataTableRowGroupDemo } from './showcase/datatable/DataTableRowGroupDemo';
-import { DataTableStyleDemo } from './showcase/datatable/DataTableStyleDemo';
-import { DataTableStateDemo } from './showcase/datatable/DataTableStateDemo';
-import { OrderListDemo } from './showcase/orderlist/OrderListDemo';
-import { PickListDemo } from './showcase/picklist/PickListDemo';
-import { FullCalendarDemo } from './showcase/fullcalendar/FullCalendarDemo';
-import { TreeDemo } from './showcase/tree/TreeDemo';
-import { TreeSelectionDemo } from './showcase/tree/TreeSelectionDemo';
-import { TreeEventsDemo } from './showcase/tree/TreeEventsDemo';
-import { TreeLazyDemo } from './showcase/tree/TreeLazyDemo';
-import { TreeTemplatingDemo } from './showcase/tree/TreeTemplatingDemo';
-import { TreeDragDropDemo } from './showcase/tree/TreeDragDropDemo';
-import { TreeContextMenuDemo } from './showcase/tree/TreeContextMenuDemo';
-import { TreeFilterDemo } from './showcase/tree/TreeFilterDemo';
-import { TreeTableDemo } from './showcase/treetable/TreeTableDemo';
-import { TreeTableTemplatingDemo } from './showcase/treetable/TreeTableTemplatingDemo';
-import { TreeTablePageDemo } from './showcase/treetable/TreeTablePageDemo';
-import { TreeTableSortDemo } from './showcase/treetable/TreeTableSortDemo';
-import { TreeTableSelectionDemo } from './showcase/treetable/TreeTableSelectionDemo';
-import { TreeTableColGroupDemo } from './showcase/treetable/TreeTableColGroupDemo';
-import { TreeTableLazyDemo } from './showcase/treetable/TreeTableLazyDemo';
-import { TreeTableEditDemo } from './showcase/treetable/TreeTableEditDemo';
-import { TreeTableScrollDemo } from './showcase/treetable/TreeTableScrollDemo';
-import { TreeTableColResizeDemo } from './showcase/treetable/TreeTableColResizeDemo';
-import { TreeTableColReorderDemo } from './showcase/treetable/TreeTableColReorderDemo';
-import { TreeTableColTogglerDemo } from './showcase/treetable/TreeTableColTogglerDemo';
-import { TreeTableContextMenuDemo } from './showcase/treetable/TreeTableContextMenuDemo';
-import { TreeTableStyleDemo } from './showcase/treetable/TreeTableStyleDemo';
-import { TreeTableResponsiveDemo } from './showcase/treetable/TreeTableResponsiveDemo';
-import { TreeTableFilterDemo } from './showcase/treetable/TreeTableFilterDemo';
-import { CaptchaDemo } from './showcase/captcha/CaptchaDemo';
-import { ColorPickerDemo } from './showcase/colorpicker/ColorPickerDemo';
-import { PasswordDemo } from './showcase/password/PasswordDemo';
-import { HomeComponent } from './showcase/home/HomeComponent';
-import { IconsPage } from './showcase/icons/IconsPage';
-import { SetupPage } from './showcase/setup/SetupPage';
-import { SupportPage } from './showcase/support/SupportPage';
-import { RatingDemo } from './showcase/rating/RatingDemo';
-import { ToolbarDemo } from './showcase/toolbar/ToolbarDemo';
-import { InplaceDemo } from './showcase/inplace/InplaceDemo';
-import { LightboxDemo } from './showcase/lightbox/LightboxDemo';
-import { DataScrollerDemo } from './showcase/datascroller/DataScrollerDemo';
-import { DataScrollerInlineDemo } from './showcase/datascroller/DataScrollerInlineDemo';
-import { DataScrollerLoaderDemo } from './showcase/datascroller/DataScrollerLoaderDemo';
-import { MenuDemo } from './showcase/menu/MenuDemo';
-import { TabMenuDemo } from './showcase/tabmenu/TabMenuDemo';
-import { BreadcrumbDemo } from './showcase/breadcrumb/BreadcrumbDemo';
-import { TieredMenuDemo } from './showcase/tieredmenu/TieredMenuDemo';
-import { MenubarDemo } from './showcase/menubar/MenubarDemo';
-import { ContextMenuDemo } from './showcase/contextmenu/ContextMenuDemo';
-import { PanelMenuDemo } from './showcase/panelmenu/PanelMenuDemo';
-import { StepsDemo } from './showcase/steps/StepsDemo';
-import { MegaMenuDemo } from './showcase/megamenu/MegaMenuDemo';
-import { SlideMenuDemo } from './showcase/slidemenu/SlideMenuDemo';
-import { OrganizationChartDemo } from './showcase/organizationchart/OrganizationChartDemo';
-import { ThemingPage } from "./showcase/theming/ThemingPage"
-import { InputGroupDemo } from "./showcase/inputgroup/InputGroupDemo";
-import { EditorDemo } from "./showcase/editor/EditorDemo";
-import { TooltipDemo } from "./showcase/tooltip/TooltipDemo";
-import { MenuModelDemo } from "./showcase/menumodel/MenuModelDemo";
-import { SidebarDemo } from "./showcase/sidebar/SidebarDemo";
-import { ProgressSpinnerDemo } from "./showcase/progressspinner/ProgressSpinnerDemo";
-import { CardDemo } from "./showcase/card/CardDemo";
-import { KeyFilterDemo } from "./showcase/keyfilter/KeyFilterDemo";
-import { DataViewDemo } from "./showcase/dataview/DataViewDemo";
-import { DataViewLazyDemo } from "./showcase/dataview/DataViewLazyDemo";
-import { GalleriaDemo } from './showcase/galleria/GalleriaDemo';
-import { GalleriaBasicDemo } from './showcase/galleria/GalleriaBasicDemo';
-import { GalleriaCaptionDemo } from './showcase/galleria/GalleriaCaptionDemo';
-import { GalleriaIndicatorDemo } from './showcase/galleria/GalleriaIndicatorDemo';
-import { GalleriaCircularDemo } from './showcase/galleria/GalleriaCircularDemo';
-import { GalleriaResponsiveDemo } from './showcase/galleria/GalleriaResponsiveDemo';
-import { GalleriaThumbnailDemo } from './showcase/galleria/GalleriaThumbnailDemo';
-import { GalleriaPreviewDemo } from './showcase/galleria/GalleriaPreviewDemo';
-import { GalleriaFullScreenDemo } from './showcase/galleria/GalleriaFullScreenDemo';
-
-class AppRouter extends Component {
-
-    addPagePath(path) {
-        window['gtag']('config', 'UA-93461466-1', {
-            'page_path': '/primereact' + path
-        });
-    }
-
-    componentDidMount() {
-        this.addPagePath(this.props.location.pathname);
-
-        this.unlisten = this.props.history.listen((location) => {
-            if (this.props.location.pathname !== location.pathname) {
-                this.addPagePath(location.pathname);
-            }
-        });
-    }
-
-    componentWillUnmount() {
-        this.unlisten();
-    }
-
-    render() {
-        return (
-            <React.Fragment>
-                <Route exact path="/" component={HomeComponent} />
-                <Route path="/icons" component={IconsPage} />
-                <Route path="/support" component={SupportPage} />
-                <Route path="/accordion" component={AccordionDemo} />
-                <Route path="/autocomplete" component={AutoCompleteDemo} />
-                <Route path="/button" component={ButtonDemo} />
-                <Route path="/checkbox" component={CheckboxDemo} />
-                <Route path="/chips" component={ChipsDemo} />
-                <Route path="/dialog" component={DialogDemo} />
-                <Route path="/dropdown" component={DropdownDemo} />
-                <Route path="/growl" component={GrowlDemo} />
-                <Route path="/flexgrid" component={FlexGridDemo} />
-                <Route path="/fieldset" component={FieldsetDemo} />
-                <Route path="/fileupload" component={FileUploadDemo} />
-                <Route path="/inputnumber" component={InputNumberDemo} />
-                <Route path="/inputtext" component={InputTextDemo} />
-                <Route path="/inputtextarea" component={InputTextareaDemo} />
-                <Route path="/listbox" component={ListBoxDemo} />
-                <Route path="/messages" component={MessagesDemo} />
-                <Route path="/multiselect" component={MultiSelectDemo} />
-                <Route path="/overlaypanel" component={OverlayPanelDemo} />
-                <Route path="/panel" component={PanelDemo} />
-                <Route path="/progressbar" component={ProgressBarDemo} />
-                <Route path="/radiobutton" component={RadioButtonDemo} />
-                <Route path="/tabview" component={TabViewDemo} />
-                <Route path="/togglebutton" component={ToggleButtonDemo} />
-                <Route path="/tristatecheckbox" component={TriStateCheckboxDemo} />
-                <Route path="/selectbutton" component={SelectButtonDemo} />
-                <Route path="/inputswitch" component={InputSwitchDemo} />
-                <Route path="/inputmask" component={InputMaskDemo} />
-                <Route path="/slider" component={SliderDemo} />
-                <Route path="/spinner" component={SpinnerDemo} />
-                <Route path="/calendar" component={CalendarDemo} />
-                <Route path="/carousel" component={CarouselDemo} />
-                <Route path="/chartdemo" component={ChartDemo} />
-                <Route path="/combochart" component={ComboChartDemo} />
-                <Route path="/piechart" component={PieChartDemo} />
-                <Route path="/doughnutchart" component={DoughnutChartDemo} />
-                <Route path="/linechart" component={LineChartDemo} />
-                <Route path="/barchart" component={BarChartDemo} />
-                <Route path="/polarareachart" component={PolarAreaChartDemo} />
-                <Route path="/radarchart" component={RadarChartDemo} />
-                <Route path="/paginator" component={PaginatorDemo} />
-                <Route exact path="/galleria" component={GalleriaDemo} />
-                <Route path="/galleria/basic" component={GalleriaBasicDemo} />
-                <Route path="/galleria/caption" component={GalleriaCaptionDemo} />
-                <Route path="/galleria/indicator" component={GalleriaIndicatorDemo} />
-                <Route path="/galleria/circular" component={GalleriaCircularDemo} />
-                <Route path="/galleria/responsive" component={GalleriaResponsiveDemo} />
-                <Route path="/galleria/thumbnail" component={GalleriaThumbnailDemo} />
-                <Route path="/galleria/preview" component={GalleriaPreviewDemo} />
-                <Route path="/galleria/fullscreen" component={GalleriaFullScreenDemo} />
-                <Route exact path="/datatable" component={DataTableDemo} />
-                <Route path="/datatable/basic" component={DataTableBasicDemo} />
-                <Route path="/datatable/dynamiccolumns" component={DataTableDynamicDemo} />
-                <Route path="/datatable/templating" component={DataTableTemplatingDemo} />
-                <Route path="/datatable/paginator" component={DataTablePaginatorDemo} />
-                <Route path="/datatable/sort" component={DataTableSortDemo} />
-                <Route path="/datatable/filter" component={DataTableFilterDemo} />
-                <Route path="/datatable/scroll" component={DataTableScrollDemo} />
-                <Route path="/datatable/lazy" component={DataTableLazyDemo} />
-                <Route path="/datatable/selection" component={DataTableSelectionDemo} />
-                <Route path="/datatable/colgroup" component={DataTableColGroupDemo} />
-                <Route path="/datatable/contextmenu" component={DataTableContextMenuDemo} />
-                <Route path="/datatable/coltoggle" component={DataTableColTogglerDemo} />
-                <Route path="/datatable/rowexpand" component={DataTableRowExpansionDemo} />
-                <Route path="/datatable/responsive" component={DataTableResponsiveDemo} />
-                <Route path="/datatable/colresize" component={DataTableColResizeDemo} />
-                <Route path="/datatable/reorder" component={DataTableReorderDemo} />
-                <Route path="/datatable/export" component={DataTableExportDemo} />
-                <Route path="/datatable/edit" component={DataTableEditDemo} />
-                <Route path="/datatable/rowgroup" component={DataTableRowGroupDemo} />
-                <Route path="/datatable/crud" component={DataTableCrudDemo} />
-                <Route path="/datatable/style" component={DataTableStyleDemo} />
-                <Route path="/datatable/state" component={DataTableStateDemo} />
-                <Route path="/orderlist" component={OrderListDemo} />
-                <Route path="/picklist" component={PickListDemo} />
-                <Route path="/fullcalendar" component={FullCalendarDemo} />
-                <Route exact path="/tree" component={TreeDemo} />
-                <Route path="/tree/selection" component={TreeSelectionDemo} />
-                <Route path="/tree/events" component={TreeEventsDemo} />
-                <Route path="/tree/lazy" component={TreeLazyDemo} />
-                <Route path="/tree/templating" component={TreeTemplatingDemo} />
-                <Route path="/tree/dragdrop" component={TreeDragDropDemo} />
-                <Route path="/tree/contextmenu" component={TreeContextMenuDemo} />
-                <Route path="/tree/filter" component={TreeFilterDemo} />
-                <Route exact path="/treetable" component={TreeTableDemo} />
-                <Route path="/treetable/templating" component={TreeTableTemplatingDemo} />
-                <Route path="/treetable/page" component={TreeTablePageDemo} />
-                <Route path="/treetable/sort" component={TreeTableSortDemo} />
-                <Route path="/treetable/selection" component={TreeTableSelectionDemo} />
-                <Route path="/treetable/colgroup" component={TreeTableColGroupDemo} />
-                <Route path="/treetable/lazy" component={TreeTableLazyDemo} />
-                <Route path="/treetable/edit" component={TreeTableEditDemo} />
-                <Route path="/treetable/scroll" component={TreeTableScrollDemo} />
-                <Route path="/treetable/resize" component={TreeTableColResizeDemo} />
-                <Route path="/treetable/reorder" component={TreeTableColReorderDemo} />
-                <Route path="/treetable/toggle" component={TreeTableColTogglerDemo} />
-                <Route path="/treetable/style" component={TreeTableStyleDemo} />
-                <Route path="/treetable/contextmenu" component={TreeTableContextMenuDemo} />
-                <Route path="/treetable/responsive" component={TreeTableResponsiveDemo} />
-                <Route path="/treetable/filter" component={TreeTableFilterDemo} />
-                <Route path="/captcha" component={CaptchaDemo} />
-                <Route path="/colorpicker" component={ColorPickerDemo} />
-                <Route path="/password" component={PasswordDemo} />
-                <Route path="/toolbar" component={ToolbarDemo} />
-                <Route path="/lightbox" component={LightboxDemo} />
-                <Route path="/rating" component={RatingDemo} />
-                <Route exact path="/datascroller" component={DataScrollerDemo} />
-                <Route path="/datascroller/inline" component={DataScrollerInlineDemo} />
-                <Route path="/datascroller/loader" component={DataScrollerLoaderDemo} />
-                <Route exact path="/dataview" component={DataViewDemo} />
-                <Route path="/dataview/lazy" component={DataViewLazyDemo} />
-                <Route path="/menumodel" component={MenuModelDemo} />
-                <Route path="/menu" component={MenuDemo} />
-                <Route path="/tabmenu" component={TabMenuDemo} />
-                <Route path="/breadcrumb" component={BreadcrumbDemo} />
-                <Route path="/tieredmenu" component={TieredMenuDemo} />
-                <Route path="/menubar" component={MenubarDemo} />
-                <Route path="/contextmenu" component={ContextMenuDemo} />
-                <Route path="/panelmenu" component={PanelMenuDemo} />
-                <Route path="/slidemenu" component={SlideMenuDemo} />
-                <Route path="/steps" component={StepsDemo} />
-                <Route path="/megamenu" component={MegaMenuDemo} />
-                <Route path="/setup" component={SetupPage} />
-                <Route path="/splitbutton" component={SplitButtonDemo} />
-                <Route path="/organizationchart" component={OrganizationChartDemo} />
-                <Route path="/theming" component={ThemingPage} />
-                <Route path="/inputgroup" component={InputGroupDemo} />
-                <Route path="/editor" component={EditorDemo} />
-                <Route path="/tooltip" component={TooltipDemo} />
-                <Route path="/sidebar" component={SidebarDemo} />
-                <Route path="/gmap" component={GMapDemo} />
-                <Route path="/progressspinner" component={ProgressSpinnerDemo} />
-                <Route path="/scrollpanel" component={ScrollPanelDemo} />
-                <Route path="/card" component={CardDemo} />
-                <Route path="/keyfilter" component={KeyFilterDemo} />
-                <Route path="/inplace" component={InplaceDemo} />
-                <Route path="/deferredcontent" component={DeferredContentDemo} />
-            </React.Fragment>
-        );
-    }
-}
-
-export default withRouter(AppRouter);
diff --git a/src/AppTopbar.js b/src/AppTopbar.js
deleted file mode 100644
index 273768c5ef..0000000000
--- a/src/AppTopbar.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types'
-import { Link } from 'react-router-dom';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
-
-export class AppTopbar extends Component {
-
-    static defaultProps = {
-        activeTopbarItem: null,
-        menuActive: false,
-        onMenuButtonClick: null,
-        onTopbarItemClick: null,
-        onThemeChange: null,
-    }
-
-    static propTypes = {
-        activeTopbarItem: PropTypes.string,
-        menuActive: PropTypes.bool,
-        onMenuButtonClick: PropTypes.func,
-        onTopbarItemClick: PropTypes.func,
-        onThemeChange: PropTypes.func
-    }
-
-    constructor() {
-        super();
-
-        this.onMenuButtonClick = this.onMenuButtonClick.bind(this);
-        this.onTopbarItemClick = this.onTopbarItemClick.bind(this);
-        this.onThemeChange = this.onThemeChange.bind(this);
-    }
-
-    onMenuButtonClick(event) {
-        if (this.props.onMenuButtonClick) {
-            this.props.onMenuButtonClick(event);
-        }
-    }
-
-    onTopbarItemClick(event, item) {
-        if (this.onTopbarItemClick) {
-            this.props.onTopbarItemClick({
-                originalEvent: event,
-                item
-            })
-        }
-    }
-
-    onThemeChange(event, theme, dark) {
-        if (this.props.onThemeChange) {
-            this.props.onThemeChange({
-                originalEvent: event,
-                theme,
-                dark
-            })
-        }
-    }
-
-    render() {
-        return (
-            <div className="layout-topbar">
-                <div className="layout-topbar-left">
-                    <button type="button" className="p-link menu-button" onClick={this.onMenuButtonClick} aria-expanded={this.props.menuActive} aria-haspopup={true} aria-label="Menu">
-                        <i className="pi pi-bars"></i>
-                    </button>
-                    <Link to="/" className="logo" aria-label="PrimeReact logo">
-                        <img alt="logo" src="http://github.com/showcase/resources/images/primereact-logo.png" />
-                    </Link>
-                </div>
-
-                <div className="layout-topbar-right">
-                    <ul className="topbar-menu p-unselectable-text" role="menubar">
-                        <li role="none">
-                            <Link to="/setup" role="menuitem" aria-haspopup={false}>Get Started</Link>
-                        </li>
-
-                        <li role="none" className={classNames({ 'topbar-menuitem-active': this.props.activeTopbarItem === 'themes' })}
-                            onClick={(e) => this.onTopbarItemClick(e, 'themes')}>
-                            {/* eslint-disable */}
-                            <button type="button" role="menuitem" aria-haspopup={true} aria-expanded={this.props.activeTopbarItem === 'themes'} className="p-link">Themes</button>
-                            {/* eslint-enable */}
-                            <CSSTransition classNames="topbar-submenu" timeout={{ enter: 0, exit: 0 }} in={this.props.activeTopbarItem === 'themes'}>
-                                <ul role="menu" aria-label="Themes" className="topbar-submenu">
-                                    <li role="none" className="topbar-submenu-header">THEMING</li>
-                                    <li role="none"><Link to="/theming" onClick={this.onThemesMenuRouteChange} role="menuitem"><i className="pi pi-fw pi-file" /><span>Guide</span></Link></li>
-                                    <li role="none"><a href="https://www.primefaces.org/designer/primereact" role="menuitem"><i className="pi pi-fw pi-cog" /><span>Designer</span></a></li>
-                                    <li role="none"><Link to="/icons" onClick={this.onThemesMenuRouteChange} role="menuitem" className="no-border"><i className="pi pi-fw pi-search" /><span>Icons</span></Link></li>
-
-                                    <li role="none" className="topbar-submenu-header">FREE COMPONENT THEMES</li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'nova-light', false)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></button></li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'nova-dark', false)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></button></li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'nova-colored', false)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></button></li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'luna-amber', true)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></button></li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'luna-blue', true)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></button></li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'luna-green', true)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></button></li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'luna-pink', true)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" /><span>Luna Pink</span></button></li>
-                                    <li role="none"><button type="button" className="p-link" onClick={e => this.onThemeChange(e, 'rhea', false)} role="menuitem"><img src="http://github.com/showcase/resources/images/layouts/themeswitcher-rhea.png" alt="Rhea" /><span>Rhea</span></button></li>
-                                </ul>
-                            </CSSTransition>
-                        </li>
-
-                        <li role="none" className={classNames({ 'topbar-menuitem-active': this.props.activeTopbarItem === 'templates' })}
-                            onClick={(e) => this.onTopbarItemClick(e, 'templates')}>
-                            {/* eslint-disable */}
-                            <button type="button" role="menuitem" aria-haspopup={true} aria-expanded={this.props.activeTopbarItem === 'templates'} className="p-link">Templates</button>
-                            {/* eslint-enable */}
-                            <CSSTransition classNames="topbar-submenu" timeout={{ enter: 0, exit: 0 }} in={this.props.activeTopbarItem === 'templates'}>
-                                <ul role="menu" aria-label="Templates" className="topbar-submenu">
-                                    <li role="none" className="topbar-submenu-header">FREE TEMPLATES</li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/sigma-react" role="menuitem" rel="noopener noreferrer" target="_blank" className="no-border">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-sigma.png" alt="Sigma" /><span>Sigma</span>
-                                        </a>
-                                    </li>
-
-                                    <li role="none" className="topbar-submenu-header">PREMIUM TEMPLATES</li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/layouts/roma-react" role="menuitem" rel="noopener noreferrer" target="_blank">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-roma.jpg" alt="Roma" /><span>Roma</span><span className="theme-badge new">NEW</span>
-                                        </a>
-                                    </li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/layouts/sapphire-react" role="menuitem" rel="noopener noreferrer" target="_blank">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-sapphire.png" alt="Sapphire (Material)" /><span>Sapphire</span><span className="theme-badge material">MATERIAL</span>
-                                        </a>
-                                    </li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/layouts/serenity-react" role="menuitem" rel="noopener noreferrer" target="_blank">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-serenity.png" alt="Serenity (Material)" /><span>Serenity</span><span className="theme-badge material">MATERIAL</span>
-                                        </a>
-                                    </li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/layouts/ultima-react" role="menuitem" rel="noopener noreferrer" target="_blank">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-ultima.png" alt="Ultima (Material)" /><span>Ultima</span><span className="theme-badge material">MATERIAL</span>
-                                        </a>
-                                    </li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/layouts/avalon-react" role="menuitem" rel="noopener noreferrer" target="_blank">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-avalon.png" alt="Avalon (Bootstrap)" /><span>Avalon</span><span className="theme-badge bootstrap">BOOTSTRAP</span>
-                                        </a>
-                                    </li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/layouts/babylon-react" role="menuitem" rel="noopener noreferrer" target="_blank">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-babylon.png" alt="Babylon" /><span>Babylon</span>
-                                        </a>
-                                    </li>
-                                    <li role="none">
-                                        <a href="https://www.primefaces.org/layouts/apollo-react" role="menuitem" rel="noopener noreferrer" target="_blank">
-                                            <img src="http://github.com/showcase/resources/images/layouts/themeswitcher-apollo.png" alt="Apollo" /><span>Apollo</span><span className="theme-badge darkmode">DARK MODE</span>
-                                        </a>
-                                    </li>
-                                </ul>
-                            </CSSTransition>
-                        </li>
-
-                        <li role="none" className={classNames('topbar-resources-submenu', { 'topbar-menuitem-active': this.props.activeTopbarItem === 'resources' })}
-                            onClick={(e) => this.onTopbarItemClick(e, 'resources')}>
-                            {/* eslint-disable */}
-                            <button type="button" role="menuitem" aria-haspopup={true} aria-expanded={this.props.activeTopbarItem === 'resources'} className="p-link">Resources</button>
-                            {/* eslint-enable */}
-                            <CSSTransition classNames="topbar-submenu" timeout={{ enter: 0, exit: 0 }} in={this.props.activeTopbarItem === 'resources'}>
-                                <ul role="menu" aria-label="Resources" className="topbar-submenu">
-                                    <li role="none"><Link to="/support" role="menuitem"><span>Support</span></Link></li>
-                                    <li role="none"><a href="https://github.com/primefaces/primereact" role="menuitem" target="_blank" rel="noopener noreferrer"><span>Source Code</span></a></li>
-                                    <li role="none"><a href="https://www.primefaces.org/store" role="menuitem" target="_blank" rel="noopener noreferrer"><span>PrimeStore</span></a></li>
-                                    <li role="none"><a href="https://www.primefaces.org/category/primereact/" role="menuitem" target="_blank" rel="noopener noreferrer"><span>Blog</span></a></li>
-                                    <li role="none"><a href="https://twitter.com/primereact?lang=en" role="menuitem" target="_blank" rel="noopener noreferrer"><span>Twitter</span></a></li>
-                                    <li role="none"><a href="https://www.primefaces.org/whouses" role="menuitem" target="_blank" rel="noopener noreferrer"><span>Who Uses</span></a></li>
-                                    <li role="none"><a href="https://www.primefaces.org/newsletter" role="menuitem" target="_blank" rel="noopener noreferrer"><span>Newsletter</span></a></li>
-                                    <li role="none"><a href="https://www.primetek.com.tr/" role="menuitem" target="_blank" rel="noopener noreferrer"><span>About PrimeTek</span></a></li>
-                                </ul>
-                            </CSSTransition>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default AppTopbar;
diff --git a/src/components/accordion/Accordion.css b/src/components/accordion/Accordion.css
deleted file mode 100644
index 07118d9c7a..0000000000
--- a/src/components/accordion/Accordion.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.p-accordion { 
-    width: 100%; 
-}
-
-.p-accordion .p-accordion-header { 
-    cursor: pointer; 
-    position: relative; 
-    margin-top: 1px; 
-    zoom: 1; 
-}
-
-.p-accordion .p-accordion-header a { 
-    display: block; 
-    padding: .5em;
-}
-
-.p-accordion .p-accordion-toggle-icon,
-.p-accordion .p-accordion-header-text {
-    vertical-align: middle;   
-}
-
-.p-accordion .p-accordion-header a > span { 
-    display: inline-block; 
-    vertical-align: middle;
-}
-
-.p-accordion .p-accordion-content { 
-    padding: 1em;
-    border-top: 0;
-    zoom: 1;
-}
-
-.p-accordion .p-accordion-header.p-disabled, 
-.p-accordion .p-accordion-header.p-disabled a { 
-    cursor: default; 
-}
-
-.p-accordion .p-accordion-content-wrapper-collapsed {
-    overflow: hidden;
-    max-height: 0;
-    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-accordion .p-accordion-content-wrapper-expanded {
-    max-height: 1000px;
-    transition: max-height 1s ease-in-out;
-}
-
-.p-accordion .p-accordion-content-wrapper-expanding {
-    overflow: hidden;
-}
\ No newline at end of file
diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts
deleted file mode 100644
index 38c1b67319..0000000000
--- a/src/components/accordion/Accordion.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-interface AccordionTabProps {
-    header?: any;
-    disabled?: boolean;
-    headerStyle?: object;
-    headerClassName?: string;
-    contentStyle?: object;
-    contentClassName?: string;
-}
-
-export class AccordionTab extends React.Component<AccordionTabProps,any> {}
-
-interface AccordionProps {
-    id?: string;
-    activeIndex?: any;
-    className?: string;
-    style?: object;
-    multiple?: boolean;
-    onTabOpen?(e: {originalEvent: Event, index: number}): void;
-    onTabClose?(e: {originalEvent: Event, index: number}): void;
-    onTabChange?(e: {originalEvent: Event, index: number}): void;
-}
-
-// tslint:disable-next-line:max-classes-per-file
-export class Accordion extends React.Component<AccordionProps,any> {}
-
diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
deleted file mode 100644
index 3d26151ef5..0000000000
--- a/src/components/accordion/Accordion.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-import { CSSTransition } from 'react-transition-group';
-
-export class AccordionTab extends Component {
-
-    static defaultProps = {
-        header: null,
-        disabled: false,
-        headerStyle: null,
-        headerClassName: null,
-        contentStyle: null,
-        contentClassName: null
-    }
-
-    static propTypes = {
-        header: PropTypes.any,
-        disabled: PropTypes.bool,
-        headerStyle: PropTypes.object,
-        headerClassName: PropTypes.string,
-        contentStyle: PropTypes.object,
-        contentClassName: PropTypes.string
-    }
-}
-
-export class Accordion extends Component {
-
-    static defaultProps = {
-        id: null,
-        activeIndex: null,
-        className: null,
-        style: null,
-        multiple: false,
-        onTabOpen: null,
-        onTabClose: null,
-        onTabChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        activeIndex: PropTypes.any,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        multiple: PropTypes.bool,
-        onTabOpen: PropTypes.func,
-        onTabClose: PropTypes.func,
-        onTabChange: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        if (!this.props.onTabChange) {
-            this.state = {
-                activeIndex: props.activeIndex
-            };
-        }
-
-        this.contentWrappers = [];
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    onTabHeaderClick(event, tab, index) {
-        if (!tab.props.disabled) {
-            const selected = this.isSelected(index);
-            let newActiveIndex = null;
-
-            if(this.props.multiple) {
-                let indexes = (this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex) || [];
-                if(selected)
-                    indexes = indexes.filter(i => i !== index);
-                else
-                    indexes = [...indexes, index];
-
-                newActiveIndex = indexes;
-            }
-            else {
-                newActiveIndex = selected ? null : index;
-            }
-
-            let callback = selected ? this.props.onTabClose : this.props.onTabOpen;
-            if(callback) {
-                callback({originalEvent: event, index: index});
-            }
-
-            if (this.props.onTabChange) {
-                this.props.onTabChange({
-                    originalEvent: event,
-                    index: newActiveIndex
-                })
-            }
-            else {
-                this.setState({
-                    activeIndex: newActiveIndex
-                });
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    isSelected(index) {
-        const activeIndex = this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex;
-
-        return this.props.multiple ? (activeIndex && activeIndex.indexOf(index) >= 0) : activeIndex === index;
-    }
-
-    renderTabHeader(tab, selected, index) {
-        const tabHeaderClass = classNames(tab.props.headerClassName, 'p-accordion-header', {'p-highlight': selected, 'p-disabled': tab.props.disabled});
-        const id = this.id + '_header_' + index;
-        const ariaControls = this.id + '_content_' + index;
-        const tabIndex = tab.props.disabled ? -1 : null;
-
-        return (
-            <div className={tabHeaderClass} style={tab.props.headerStyle}>
-                <a href={'#' + ariaControls} id={id} aria-controls={ariaControls} role="tab" aria-expanded={selected} onClick={(event) => this.onTabHeaderClick(event, tab, index)} tabIndex={tabIndex}>
-                    <span className={classNames('p-accordion-toggle-icon pi pi-fw', { 'pi-caret-right': !selected, 'pi-caret-down': selected })}></span>
-                    <span className="p-accordion-header-text">{tab.props.header}</span>
-                </a>
-            </div>
-        );
-    }
-
-    renderTabContent(tab, selected, index) {
-        const className = classNames(tab.props.contentClassName, 'p-toggleable-content', {'p-toggleable-content-collapsed': !selected});
-        const id = this.id + '_content_' + index;
-
-        return (
-            <CSSTransition classNames="p-toggleable-content" timeout={{enter: 400, exit: 250}} in={selected}>
-                <div id={id} className={className} style={tab.props.contentStyle} role="region" aria-labelledby={this.id + '_header_' +index}>
-                    <div className="p-accordion-content">
-                        {tab.props.children}
-                    </div>
-                </div>
-            </CSSTransition>
-        );
-    }
-
-    renderTab(tab, index) {
-        const selected = this.isSelected(index);
-        const tabHeader = this.renderTabHeader(tab, selected, index);
-        const tabContent = this.renderTabContent(tab, selected, index);
-
-        return (
-            <div key={tab.props.header} className="p-accordion-tab">
-                {tabHeader}
-                {tabContent}
-            </div>
-        );
-    }
-
-    renderTabs() {
-        return (
-            React.Children.map(this.props.children, (tab, index) => {
-                return this.renderTab(tab, index);
-            })
-        )
-    }
-
-    render() {
-        const className = classNames('p-accordion p-component p-reset', this.props.className);
-        const tabs = this.renderTabs();
-
-        return (
-            <div ref={(el) => this.container = el} id={this.id} className={className} style={this.props.style}>
-                {tabs}
-            </div>
-        );
-    }
-}
diff --git a/src/components/autocomplete/AutoComplete.css b/src/components/autocomplete/AutoComplete.css
deleted file mode 100644
index 8126301a0a..0000000000
--- a/src/components/autocomplete/AutoComplete.css
+++ /dev/null
@@ -1,163 +0,0 @@
-.p-autocomplete {
-    width: auto;
-    zoom: 1;
-    cursor: pointer;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    position: relative;
-    display: inline-block;
-}
-
-.p-autocomplete .p-autocomplete-dropdown {
-    height: 100%;
-    width: 2em;
-    margin-right: 0;
-    vertical-align: top;
-}
-
-.p-autocomplete .p-autocomplete-input {
-    padding-right: 1.5em;
-}
-
-.p-autocomplete-loader {
-    position: absolute;
-    right: .25em;
-    top: 50%;
-    margin-top: -.5em;
-}
-
-.p-autocomplete-query {
-    font-weight: bold;
-}
-
-.p-autocomplete .p-autocomplete-panel {
-    min-width: 100%;
-}
-
-.p-autocomplete-panel {
-    position: absolute;
-    overflow: auto;
-    display: none;
-}
-
-.p-autocomplete-panel .p-autocomplete-list {
-    padding: 0.4em;
-    border: 0 none;
-}
-
-.p-autocomplete-panel .p-autocomplete-list-item {
-    border: 0 none;
-    cursor: pointer;
-    font-weight: normal;
-    margin: 1px 0;
-    padding: 0.186em 0.313em;
-    text-align: left;
-}
-
-.p-autocomplete .p-button-icon-only,
-.p-autocomplete .p-button-icon-only:enabled:hover,
-.p-autocomplete .p-button-icon-only:enabled:focus,
-.p-autocomplete .p-button-icon-only:enabled:active {
-    border-left: 0 none;
-}
-
-/* Multiple Selection */
-.p-autocomplete-multiple-container {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-autocomplete-multiple-container.p-inputtext {
-    clear: left;
-    cursor: text;
-    list-style-type: none;
-    margin: 0;
-    overflow: hidden;
-    padding: 0 1.5em 0 .25em;
-}
-
-.p-autocomplete-token {
-    cursor: default;
-    display: inline-block;
-    vertical-align: middle;
-    overflow: hidden;
-    padding: .125em .5em;
-    white-space: nowrap;
-    position: relative;
-    margin-right: .125em;
-    border: 0 none;
-    font-size: .9em;
-}
-
-.p-autocomplete-token-label {
-    display: block;
-    margin-right: 2em;
-}
-
-.p-autocomplete-token-icon {
-    margin-top: -.5em;
-    position: absolute;
-    right: 0.2em;
-    top: 50%;
-    cursor: pointer;
-}
-
-.p-autocomplete-input-token {
-    display: inline-block;
-    vertical-align: middle;
-    list-style-type: none;
-    margin: 0 0 0 .125em;
-    padding: .25em .25em .25em 0;
-}
-
-.p-autocomplete-input-token input {
-    border: 0 none;
-    width: 10em;
-    outline: medium none;
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-}
-
-.p-autocomplete-dd .p-autocomplete-loader {
-    right: 2.25em;
-}
-
-.p-autocomplete-dd input,
-.p-autocomplete-dd .p-autocomplete-multiple-container {
-     -moz-border-radius-topright: 0px; 
-     -webkit-border-top-right-radius: 0px;
-     border-top-right-radius: 0px;
-     -moz-border-radius-bottomright: 0px;
-     -webkit-border-bottom-right-radius: 0px;
-     border-bottom-right-radius: 0px;
- }
- 
-.p-autocomplete-dd .p-autocomplete-dropdown {
-     -moz-border-radius-topleft: 0px; 
-     -webkit-border-top-left-radius: 0px;
-     border-top-left-radius: 0px;
-     -moz-border-radius-bottomleft: 0px;
-     -webkit-border-bottom-left-radius: 0px;
-     border-bottom-left-radius: 0px;
-}
-
-/** AutoComplete **/
-.p-fluid .p-autocomplete,
-.p-fluid .p-autocomplete-input {
-    width: 100%;
-}
-
-.p-fluid .p-autocomplete.p-autocomplete-dd .p-autocomplete-input,
-.p-fluid .p-autocomplete.p-autocomplete-dd .p-autocomplete-multiple-container {
-    width: calc(100% - 2em);
-}
-
-.p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-    width: 2em;
-}
\ No newline at end of file
diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
deleted file mode 100755
index 875153eb94..0000000000
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface AutoCompleteProps {
-    id?: string;
-    value?: any;
-    name?: string;
-    type?: string;
-    suggestions?: any[];
-    field?: string;
-    scrollHeight?: string;
-    dropdown?: boolean;
-    dropdownMode?: string;
-    multiple?: boolean;
-    minLength?: number;
-    delay?: number;
-    style?: object;
-    className?: string;
-    inputId?: string;
-    inputStyle?: object;
-    inputClassName?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    disabled?: boolean;
-    maxlength?: number;
-    size?: number;
-    appendTo?: any;
-    tabindex?: number;
-    autoFocus?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    completeMethod?(e: {originalEvent: Event, query: string}): void;
-    itemTemplate?(data: any): JSX.Element | undefined;
-    selectedItemTemplate?(data: any): string;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-    onFocus?(event: Event): void;
-    onBlur?(event: Event): void;
-    onSelect?(e: {originalEvent: Event, value: any}): void;
-    onUnselect?(e: {originalEvent: Event, value: any}): void;
-    onDropdownClick?(e: {originalEvent: Event, query: string}): void;
-    onClick?(event:Event): void;
-    onDblClick?(event:Event): void;
-    onMouseDown?(event:Event): void;
-    onKeyUp?(event:Event): void;
-    onKeyPress?(event:Event): void;
-    onContextMenu?(event:Event): void;
-    onClear?(event:Event): void;
-}
-
-export class AutoComplete extends React.Component<AutoCompleteProps,any> {}
diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
deleted file mode 100644
index 8e2f6a5f58..0000000000
--- a/src/components/autocomplete/AutoComplete.js
+++ /dev/null
@@ -1,683 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import {InputText} from '../inputtext/InputText';
-import {Button} from '../button/Button';
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import {AutoCompletePanel} from './AutoCompletePanel';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-import UniqueComponentId from "../utils/UniqueComponentId";
-
-export class AutoComplete extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        name: null,
-        type: 'text',
-        suggestions: null,
-        field: null,
-        scrollHeight: '200px',
-        dropdown: false,
-        dropdownMode: 'blank',
-        multiple: false,
-        minLength: 1,
-        delay: 300,
-        style: null,
-        className: null,
-        inputId: null,
-        inputStyle: null,
-        inputClassName: null,
-        placeholder: null,
-        readonly: false,
-        disabled: false,
-        maxlength: null,
-        size: null,
-        appendTo: null,
-        tabindex: null,
-        autoFocus: false,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        completeMethod: null,
-        itemTemplate: null,
-        selectedItemTemplate: null,
-        onChange: null,
-        onFocus: null,
-        onBlur: null,
-        onSelect: null,
-        onUnselect: null,
-        onDropdownClick: null,
-        onClick: null,
-        onDblClick: null,
-        onMouseDown: null,
-        onKeyUp: null,
-        onKeyPress: null,
-        onContextMenu: null,
-        onClear: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        name: PropTypes.string,
-        type: PropTypes.string,
-        suggestions: PropTypes.array,
-        field: PropTypes.string,
-        scrollHeight: PropTypes.string,
-        dropdown: PropTypes.bool,
-        dropdownMode: PropTypes.string,
-        multiple: PropTypes.bool,
-        minLength: PropTypes.number,
-        delay: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        inputId: PropTypes.string,
-        inputStyle: PropTypes.object,
-        inputClassName: PropTypes.string,
-        placeholder: PropTypes.string,
-        readonly: PropTypes.bool,
-        disabled: PropTypes.bool,
-        maxlength: PropTypes.number,
-        size: PropTypes.number,
-        appendTo: PropTypes.any,
-        tabindex: PropTypes.number,
-        autoFocus: PropTypes.bool,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        completeMethod: PropTypes.func,
-        itemTemplate: PropTypes.func,
-        selectedItemTemplate: PropTypes.func,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        onSelect: PropTypes.func,
-        onUnselect: PropTypes.func,
-        onDropdownClick: PropTypes.func,
-        onClick: PropTypes.func,
-        onDblClick: PropTypes.func,
-        onMouseDown: PropTypes.func,
-        onKeyUp: PropTypes.func,
-        onKeyPress: PropTypes.func,
-        onContextMenu: PropTypes.func,
-        onClear: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.onInputChange = this.onInputChange.bind(this);
-        this.onInputFocus = this.onInputFocus.bind(this);
-        this.onInputBlur = this.onInputBlur.bind(this);
-        this.onInputClick = this.onInputClick.bind(this);
-        this.onInputKeyDown = this.onInputKeyDown.bind(this);
-        this.onDropdownClick = this.onDropdownClick.bind(this);
-        this.onMultiContainerClick = this.onMultiContainerClick.bind(this);
-        this.onMultiInputFocus = this.onMultiInputFocus.bind(this);
-        this.onMultiInputBlur = this.onMultiInputBlur.bind(this);
-        this.selectItem = this.selectItem.bind(this);
-
-        this.listId = UniqueComponentId() + '_list';
-    }
-
-    onInputChange(event) {
-        //Cancel the search request if user types within the timeout
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-
-        let query = event.target.value;
-        if (!this.props.multiple) {
-            this.updateModel(event, query);
-        }
-
-        if (query.length === 0) {
-            this.hidePanel();
-            if (this.props.onClear) {
-                this.props.onClear(event);
-            }
-        }
-        else {
-            if (query.length >= this.props.minLength) {
-                this.timeout = setTimeout(() => {
-                    this.search(event, query, 'input');
-                }, this.props.delay);
-            }
-            else {
-                this.hidePanel();
-            }
-        }
-    }
-
-    onInputClick(event) {
-        if (this.props.onClick) {
-            this.props.onClick(event);
-        }
-    }
-
-    search(event, query, source) {
-        //allow empty string but not undefined or null
-        if (query === undefined || query === null) {
-            return;
-        }
-
-        //do not search blank values on input change
-        if (source === 'input' && query.trim().length === 0) {
-            return;
-        }
-
-        if (this.props.completeMethod) {
-            this.searching = true;
-            this.showLoader();
-            this.props.completeMethod({
-                originalEvent: event,
-                query: query
-            });
-        }
-    }
-
-    selectItem(event, option) {
-        if (this.props.multiple) {
-            this.inputEl.value = '';
-            if (!this.isSelected(option)) {
-                let newValue = this.props.value ? [...this.props.value, option] : [option];
-                this.updateModel(event, newValue);
-            }
-        }
-        else {
-            this.updateInputField(option);
-            this.updateModel(event, option);
-        }
-
-        if (this.props.onSelect) {
-            this.props.onSelect({
-                originalEvent: event,
-                value: option
-            })
-        }
-
-        this.inputEl.focus();
-        this.hidePanel();
-    }
-
-    updateModel(event, value) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: value
-                }
-            });
-        }
-
-        this.ariaSelected = value;
-    }
-
-    formatValue(value) {
-        if (value) {
-            if (this.props.selectedItemTemplate && (this.props.multiple ? this.isSelected(value) : this.findOptionIndex(value) > -1)) {
-                const resolvedFieldData = this.props.selectedItemTemplate(value);
-                return resolvedFieldData ? resolvedFieldData : value;
-            }
-            else if (this.props.field) {
-                const resolvedFieldData = ObjectUtils.resolveFieldData(value, this.props.field);
-                return resolvedFieldData !== null && resolvedFieldData !== undefined ? resolvedFieldData : value;
-            }
-            else
-                return value;
-        }
-        else
-            return '';
-    }
-
-    updateInputField(value) {
-        const formattedValue = this.formatValue(value);
-        this.inputEl.value = formattedValue;
-    }
-
-    showPanel() {
-        if (this.focus) {
-            this.alignPanel();
-
-            if (this.panel && this.panel.element && !this.panel.element.offsetParent) {
-                this.panel.element.style.zIndex = String(DomHandler.generateZIndex());
-                this.panel.element.style.display = "block";
-
-                setTimeout(() => {
-                    if (this.panel && this.panel.element) {
-                        DomHandler.addClass(this.panel.element, 'p-input-overlay-visible');
-                        DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-                    }
-                }, 1);
-
-                this.alignPanel();
-                this.bindDocumentClickListener();
-            }
-        }
-    }
-
-    alignPanel() {
-        if (this.panel.element.offsetParent) {
-            let target = this.props.multiple ? this.multiContainer : this.inputEl;
-
-            if (this.props.appendTo) {
-                this.panel.element.style.minWidth = DomHandler.getWidth(target) + 'px';
-                DomHandler.absolutePosition(this.panel.element, target);
-            }
-            else {
-                DomHandler.relativePosition(this.panel.element, target);
-            }
-        }
-    }
-
-    hidePanel() {
-        DomHandler.addClass(this.panel.element, 'p-input-overlay-hidden');
-        DomHandler.removeClass(this.panel.element, 'p-input-overlay-visible');
-
-        setTimeout(() => {
-            if (this.panel && this.panel.element) {
-                this.panel.element.style.display = 'none';
-                DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-            }
-        }, 150);
-
-        this.unbindDocumentClickListener();
-    }
-
-    onDropdownClick(event) {
-        if (this.panel && this.panel.element && !this.panel.element.offsetParent) {
-            this.focus = true;
-            this.inputEl.focus();
-
-            if (this.props.dropdownMode === 'blank')
-                this.search(event, '', 'dropdown');
-            else if (this.props.dropdownMode === 'current')
-                this.search(event, this.inputEl.value, 'dropdown');
-
-            if (this.props.onDropdownClick) {
-                this.props.onDropdownClick({
-                    originalEvent: event,
-                    query: this.inputEl.value
-                });
-            }
-        }
-        else {
-            this.hidePanel();
-        }
-    }
-
-    removeItem(event, index) {
-        let removedValue = this.props.value[index];
-        let newValue = this.props.value.filter((val, i) => (index !== i));
-        this.updateModel(event, newValue);
-
-        if (this.props.onUnselect) {
-            this.props.onUnselect({
-                originalEvent: event,
-                value: removedValue
-            })
-        }
-    }
-
-    onInputKeyDown(event) {
-        if (this.isPanelVisible()) {
-            let highlightItem = DomHandler.findSingle(this.panel.element, 'li.p-highlight');
-
-            switch(event.which) {
-                //down
-                case 40:
-                    if (highlightItem) {
-                        let nextElement = highlightItem.nextElementSibling;
-                        if (nextElement) {
-                            DomHandler.addClass(nextElement, 'p-highlight');
-                            DomHandler.removeClass(highlightItem, 'p-highlight');
-                            DomHandler.scrollInView(this.panel.element, nextElement);
-                        }
-                    }
-                    else {
-                        DomHandler.addClass(this.panel.element.firstChild.firstChild, 'p-highlight');
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //up
-                case 38:
-                    if (highlightItem) {
-                        let previousElement = highlightItem.previousElementSibling;
-                        if (previousElement) {
-                            DomHandler.addClass(previousElement, 'p-highlight');
-                            DomHandler.removeClass(highlightItem, 'p-highlight');
-                            DomHandler.scrollInView(this.panel.element, previousElement);
-                        }
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //enter,tab
-                case 13:
-                    if (highlightItem) {
-                        this.selectItem(event, this.props.suggestions[DomHandler.index(highlightItem)]);
-                        this.hidePanel();
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //escape
-                case 27:
-                    this.hidePanel();
-                    event.preventDefault();
-                break;
-
-                //tab
-                case 9:
-                    if (highlightItem) {
-                        this.selectItem(event, this.props.suggestions[DomHandler.index(highlightItem)]);
-                    }
-
-                    this.hidePanel();
-                break;
-
-                default:
-                break;
-            }
-        }
-
-        if (this.props.multiple) {
-            switch(event.which) {
-                //backspace
-                case 8:
-                    if (this.props.value && this.props.value.length && !this.inputEl.value) {
-                        let removedValue = this.props.value[this.props.value.length - 1];
-                        let newValue = this.props.value.slice(0, -1);
-
-                        if (this.props.onUnselect) {
-                            this.props.onUnselect({
-                                originalEvent: event,
-                                value: removedValue
-                            })
-                        }
-
-                        this.updateModel(event, newValue);
-                    }
-                break;
-
-                default:
-                break;
-            }
-        }
-    }
-
-    onInputFocus(event) {
-        this.focus = true;
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-
-        DomHandler.addClass(this.container, 'p-inputwrapper-focus');
-    }
-
-    onInputBlur(event) {
-        this.focus = false;
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-
-        DomHandler.removeClass(this.container, 'p-inputwrapper-focus');
-    }
-
-    onMultiContainerClick(event) {
-        this.inputEl.focus();
-
-        if (this.props.onClick) {
-            this.props.onClick(event);
-        }
-    }
-
-    onMultiInputFocus(event) {
-        this.onInputFocus(event);
-        DomHandler.addClass(this.multiContainer, 'p-focus');
-    }
-
-    onMultiInputBlur(event) {
-        this.onInputBlur(event);
-        DomHandler.removeClass(this.multiContainer, 'p-focus');
-    }
-
-    isSelected(val) {
-        let selected = false;
-        if (this.props.value && this.props.value.length) {
-            for (let i = 0; i < this.props.value.length; i++) {
-                if (ObjectUtils.equals(this.props.value[i], val)) {
-                    selected = true;
-                    break;
-                }
-            }
-        }
-
-        return selected;
-    }
-
-    findOptionIndex(option) {
-        let index = -1;
-        if (this.props.suggestions) {
-            for (let i = 0; i < this.props.suggestions.length; i++) {
-                if (ObjectUtils.equals(option, this.props.suggestions[i])) {
-                    index = i;
-                    break;
-                }
-            }
-        }
-
-        return index;
-    }
-
-    componentDidMount() {
-        if (this.props.autoFocus && this.inputEl) {
-            this.inputEl.focus();
-        }
-
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.suggestions !== this.props.suggestions && this.searching) {
-            if (this.props.suggestions && this.props.suggestions.length)
-                this.showPanel();
-            else
-                this.hidePanel();
-
-            this.hideLoader();
-
-            this.searching = false;
-        }
-
-        if (this.inputEl && !this.props.multiple) {
-            this.updateInputField(this.props.value);
-        }
-
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    showLoader() {
-        this.loader.style.visibility = 'visible';
-    }
-
-    hideLoader() {
-        this.loader.style.visibility = 'hidden';
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    renderSimpleAutoComplete() {
-        const inputClassName = classNames('p-autocomplete-input', this.props.inputClassName, {
-            'p-autocomplete-dd-input': this.props.dropdown
-        });
-
-        return (
-            <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} id={this.props.inputId} type={this.props.type} name={this.props.name}
-                        defaultValue={this.formatValue(this.props.value)} role="searchbox" aria-autocomplete="list" aria-controls={this.listId}
-                        aria-labelledby={this.props.ariaLabelledBy} className={inputClassName} style={this.props.inputStyle} autoComplete="off"
-                        readOnly={this.props.readonly} disabled={this.props.disabled} placeholder={this.props.placeholder} size={this.props.size}
-                        maxLength={this.props.maxlength} tabIndex={this.props.tabindex}
-                        onBlur={this.onInputBlur} onFocus={this.onInputFocus} onChange={this.onInputChange}
-                        onMouseDown={this.props.onMouseDown} onKeyUp={this.props.onKeyUp} onKeyDown={this.onInputKeyDown}
-                        onKeyPress={this.props.onKeyPress} onContextMenu={this.props.onContextMenu}
-                        onClick={this.onInputClick} onDoubleClick={this.props.onDblClick} />
-        );
-    }
-
-    renderChips() {
-        if (this.props.value && this.props.value.length) {
-            return this.props.value.map((val, index) => {
-                return (
-                    <li key={index + 'multi-item'} className="p-autocomplete-token p-highlight">
-                        {!this.props.disabled && <span className="p-autocomplete-token-icon pi pi-fw pi-times" onClick={(e) => this.removeItem(e, index)}></span>}
-                        <span className="p-autocomplete-token-label">{this.formatValue(val)}</span>
-                    </li>
-                );
-            });
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMultiInput() {
-        return (
-            <li className="p-autocomplete-input-token">
-                <input ref={(el) => this.inputEl = el} type={this.props.type} disabled={this.props.disabled} placeholder={this.props.placeholder}
-                       role="searchbox" aria-autocomplete="list" aria-controls={this.listId} aria-labelledby={this.props.ariaLabelledBy}
-                       autoComplete="off" tabIndex={this.props.tabindex} onChange={this.onInputChange} id={this.props.inputId} name={this.props.name}
-                       style={this.props.inputStyle} className={this.props.inputClassName} maxLength={this.props.maxlength}
-                       onKeyUp={this.props.onKeyUp} onKeyDown={this.onInputKeyDown} onKeyPress={this.props.onKeyPress}
-                       onFocus={this.onMultiInputFocus} onBlur={this.onMultiInputBlur} />
-            </li>
-        );
-    }
-
-    renderMultipleAutoComplete() {
-        let multiContainerClass = classNames("p-autocomplete-multiple-container p-component p-inputtext", {
-            'p-disabled': this.props.disabled
-        });
-        let tokens = this.renderChips();
-        let input = this.renderMultiInput();
-
-        return (
-                <ul ref={(el) => {this.multiContainer = el}} className={multiContainerClass} onContextMenu={this.props.onContextMenu} onMouseDown={this.props.onMouseDown}
-                        onClick={this.onMultiContainerClick} onDoubleClick={this.props.onDblClick} >
-                    {tokens}
-                    {input}
-                </ul>
-        );
-    }
-
-    renderDropdown() {
-        return (
-            <Button type="button" icon="pi pi-fw pi-chevron-down" className="p-autocomplete-dropdown" disabled={this.props.disabled} onClick={this.onDropdownClick} />
-        );
-    }
-
-    renderLoader() {
-        return (
-            <i ref={(el) => this.loader = el} className="p-autocomplete-loader pi pi-spinner pi-spin" style={{visibility: 'hidden'}}></i>
-        );
-    }
-
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (event.which === 3) {
-                    return;
-                }
-
-                if (this.isOutsideClicked(event)) {
-                    this.hidePanel();
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    isPanelVisible() {
-        return this.panel.element.offsetParent != null;
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target)
-                    || (this.panel && this.panel.element && this.panel.element.contains(event.target)));
-    }
-
-    render() {
-        let input, dropdown;
-        let className = classNames('p-autocomplete p-component', this.props.className, {
-            'p-autocomplete-dd': this.props.dropdown,
-            'p-autocomplete-multiple': this.props.multiple,
-            'p-inputwrapper-filled': this.props.value,
-            'p-inputwrapper-focus': this.focus
-        });
-        let loader = this.renderLoader();
-
-        if (this.props.multiple)
-            input = this.renderMultipleAutoComplete();
-        else
-            input = this.renderSimpleAutoComplete();
-
-        if (this.props.dropdown) {
-            dropdown = this.renderDropdown();
-        }
-
-        return (
-            <span ref={(el) => this.container = el} id={this.props.id} style={this.props.style} className={className} aria-haspopup="listbox"
-                  aria-expanded={this.panel && this.isPanelVisible()} aria-owns={this.listId}>
-                {input}
-                {loader}
-                {dropdown}
-                <AutoCompletePanel ref={(el) => this.panel = el} suggestions={this.props.suggestions} field={this.props.field} listId={this.listId}
-                            appendTo={this.props.appendTo} itemTemplate={this.props.itemTemplate} onItemClick={this.selectItem} ariaSelected={this.ariaSelected}/>
-            </span>
-        );
-    }
-}
diff --git a/src/components/autocomplete/AutoCompletePanel.js b/src/components/autocomplete/AutoCompletePanel.js
deleted file mode 100644
index 164078b389..0000000000
--- a/src/components/autocomplete/AutoCompletePanel.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class AutoCompletePanel extends Component {
-
-    static defaultProps = {
-        suggestions: null,
-        field: null,
-        appendTo: null,
-        itemTemplate: null,
-        onItemClick: null,
-        scrollHeight: '200px',
-        listId: null,
-        ariaSelected: null
-    }
-
-    static propTypes = {
-        suggestions: PropTypes.array,
-        field: PropTypes.string,
-        appendTo: PropTypes.any,
-        itemTemplate: PropTypes.func,
-        onItemClick: PropTypes.func,
-        scrollHeight: PropTypes.string,
-        listId: PropTypes.any,
-        ariaSelected: PropTypes.any
-    };
-
-    renderElement() {
-        let items;
-
-        if (this.props.suggestions) {
-            items = this.props.suggestions.map((suggestion, index) => {
-                let itemContent = this.props.itemTemplate ? this.props.itemTemplate(suggestion) : this.props.field ? ObjectUtils.resolveFieldData(suggestion, this.props.field) : suggestion;
-
-                return (
-                    <li key={index + '_item'} role="option" aria-selected={this.props.ariaSelected === suggestion} className="p-autocomplete-list-item" onClick={(e) => this.props.onItemClick(e, suggestion)}>{itemContent}</li>
-                );
-            });
-        }
-
-        return (
-            <div ref={(el) => this.element = el} className="p-autocomplete-panel p-input-overlay" style={{ maxHeight: this.props.scrollHeight }}>
-                <ul className="p-autocomplete-items p-autocomplete-list p-component p-reset" role="listbox" id={this.props.listId}>
-                    {items}
-                </ul>
-            </div>
-        );
-    }
-
-    render() {
-        let element = this.renderElement();
-
-        if (this.props.appendTo) {
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        }
-        else {
-            return element;
-        }
-    }
-}
diff --git a/src/components/breadcrumb/BreadCrumb.css b/src/components/breadcrumb/BreadCrumb.css
deleted file mode 100644
index 7e81f72df3..0000000000
--- a/src/components/breadcrumb/BreadCrumb.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/** Breadcrumb **/
-.p-breadcrumb {
-    margin: 0;
-    padding: 0;
-    padding: .5em;
-}
-
-.p-breadcrumb ul {
-    margin: 0;
-    padding: 0;
-}
-
-.p-breadcrumb ul li {
-    display: inline-block;
-    margin: 0 .25em;
-}
-
-.p-breadcrumb-chevron, .p-breadcrumb-home {
-    vertical-align: middle;
-}
-
-.p-breadcrumb ul li .p-menuitem-link {
-    text-decoration: none;
-}
-
-.p-breadcrumb .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-breadcrumb .p-menuitem-text {
-    vertical-align: middle;
-}
\ No newline at end of file
diff --git a/src/components/breadcrumb/BreadCrumb.d.ts b/src/components/breadcrumb/BreadCrumb.d.ts
deleted file mode 100644
index 4adbabeaae..0000000000
--- a/src/components/breadcrumb/BreadCrumb.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-
-interface BreadCrumbProps {
-    id?: string;
-    model?: MenuItem[];
-    home?: any;
-    style?: object;
-    className?: string;
-}
-
-export class BreadCrumb extends React.Component<BreadCrumbProps,any> {}
diff --git a/src/components/breadcrumb/BreadCrumb.js b/src/components/breadcrumb/BreadCrumb.js
deleted file mode 100644
index 8a1a3f750c..0000000000
--- a/src/components/breadcrumb/BreadCrumb.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class BreadCrumb extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        home: null,
-        style: null,
-        className: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        home: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-
-    itemClick(event, item){
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-    }
-
-    renderHome() {
-        if(this.props.home) {
-            const className = classNames('p-breadcrumb-home', this.props.home.className,  {'p-disabled': this.props.home.disabled});
-
-            return (
-                <li className={className} style={this.props.home.style}>
-                    <a href={this.props.home.url || '#'} className="p-menuitem-link" target={this.props.home.target} onClick={event => this.itemClick(event, this.props.home)}>
-                        <span className={this.props.home.icon}></span>
-                    </a>
-                </li>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSeparator() {
-        return (
-            <li className="p-breadcrumb-chevron pi pi-chevron-right"></li>
-        );
-    }
-
-    renderMenuitem(item, index) {
-        const className = classNames(item.className, {'p-disabled': item.disabled});
-
-        return (
-            <li className={className} style={item.style}>
-                <a href={item.url || '#'} className="p-menuitem-link" target={item.target} onClick={event => this.itemClick(event, item)}>
-                    <span className="p-menuitem-text">{item.label}</span>
-                </a>
-            </li>
-        );
-    }
-
-    renderMenuitems() {
-        if (this.props.model) {
-            const items = this.props.model.map((item, index)=> {
-                const menuitem = this.renderMenuitem(item, index);
-                const separator = (index === this.props.model.length - 1) ? null : this.renderSeparator();
-
-                return (
-                    <React.Fragment key={item.label + '_' + index}>
-                        {menuitem}
-                        {separator}
-                    </React.Fragment>
-                );
-            });
-
-            return items;
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className=classNames('p-breadcrumb p-component', this.props.className);
-        const home = this.renderHome();
-        const items = this.renderMenuitems();
-        const separator = this.renderSeparator();
-
-        return (
-            <nav id={this.props.id} className={className} style={this.props.style} aria-label="Breadcrumb">
-                <ul>
-                    {home}
-                    {separator}
-                    {items}
-                </ul>
-            </nav>
-        );
-    }
-}
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
deleted file mode 100644
index e61039bfe8..0000000000
--- a/src/components/button/Button.css
+++ /dev/null
@@ -1,111 +0,0 @@
-/* Button */
-.p-button {
-    display: inline-block;
-    position: relative;
-    padding: 0;
-    text-decoration: none !important;
-    cursor: pointer;
-    text-align: center;
-    zoom: 1;
-    overflow: visible; /* the overflow property removes extra width in IE */
-    margin-right: 0.25em;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-}
-
-/*button text element */
-.p-button .p-button-text {
-    display: block;
-    line-height: normal;
-}
-
-.p-button-text-only .p-button-text {
-    padding: .25em 1em;
-}
-
-.p-button-icon-only .p-button-text,
-.p-button-text-empty .p-button-text {
-    padding: .25em;
-    text-indent: -9999999px;
-}
-
-.p-button-text-icon-left .p-button-text {
-    padding: .25em 1em .25em 2.1em;
-}
-
-.p-button-text-icon-right .p-button-text {
-    padding: .25em 2.1em .25em 1em;
-}
-
-/*button icon element(s) */
-.p-button-icon-only .p-button-icon-left,
-.p-button-text-icon-left .p-button-icon-left,
-.p-button-text-icon-right .p-button-icon-right {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5em;
-    height: 1em;
-}
-
-.p-button-icon-only .p-button-icon-left {
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    width: 1em;
-    height: 1em;
-}
-
-.p-button-icon-left {
-    left: .5em;
-}
-
-.p-button-icon-right {
-    right: .5em;
-}
-
-/*button sets*/
-.p-buttonset .p-button {
-    margin-left: 0;
-    margin-right: 0;
-}
-
-/* workarounds */
-button.p-button::-moz-focus-inner {
-    border: 0; padding: 0; /* reset extra padding in Firefox */
-}
-
-/** Fluid **/
-.p-fluid .p-button {
-    width: 100%;
-}
-
-.p-fluid .p-button-text-icon-left .p-button-text,
-.p-fluid .p-button-text-icon-right .p-button-text {
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-/** ButtonSet **/
-.p-fluid .p-buttonset {
-    width: 100%;
-}
-
-.p-fluid .p-buttonset.p-buttonset-1 .p-button {width: 100%;}
-.p-fluid .p-buttonset.p-buttonset-2 .p-button {width: 50%;}
-.p-fluid .p-buttonset.p-buttonset-3 .p-button {width: 33.3%;}
-.p-fluid .p-buttonset.p-buttonset-4 .p-button {width: 25%;}
-.p-fluid .p-buttonset.p-buttonset-5 .p-button {width: 20%;}
-.p-fluid .p-buttonset.p-buttonset-6 .p-button {width: 16.6%;}
-
-@media (max-width: 640px) {
-    .p-fluid .p-buttonset.p-buttonset-1 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-2 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-3 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-4 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-5 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-6 .p-button {
-        width: 100%;
-    }
-}
\ No newline at end of file
diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts
deleted file mode 100644
index 5f2faa2420..0000000000
--- a/src/components/button/Button.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import {Omit} from "../util";
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'ref'> {
-    label?: string;
-    icon?: string;
-    iconPos?: string;
-    cornerStyleClass?: string;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    [key: string]: any;
-}
-
-export class Button extends React.Component<ButtonProps,any> {}
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
deleted file mode 100644
index 049f3acefd..0000000000
--- a/src/components/button/Button.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class Button extends Component {
-
-    static defaultProps = {
-        label: null,
-        icon: null,
-        iconPos: 'left',
-        tooltip: null,
-        tooltipOptions: null
-    }
-
-    static propTypes = {
-        label: PropTypes.string,
-        icon: PropTypes.string,
-        iconPos: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object
-    };
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
- 
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
- 
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    renderIcon() {
-        if(this.props.icon) {
-            let className = classNames(this.props.icon, 'p-c', {
-                'p-button-icon-left': this.props.iconPos !== 'right',
-                'p-button-icon-right': this.props.iconPos === 'right'
-            });
-
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderLabel() {
-        const buttonLabel = this.props.label||'p-btn';
-
-        return (
-            <span className="p-button-text p-c">{buttonLabel}</span>
-        );
-    }
-
-    render() {
-        let className = classNames('p-button p-component', this.props.className, {
-                'p-button-icon-only': this.props.icon && !this.props.label,
-                'p-button-text-icon-left': this.props.icon && this.props.label && this.props.iconPos === 'left',
-                'p-button-text-icon-right': this.props.icon && this.props.label && this.props.iconPos === 'right',
-                'p-button-text-only': !this.props.icon && this.props.label,
-                'p-disabled': this.props.disabled
-        });
-        let icon = this.renderIcon();
-        let label = this.renderLabel();
-
-        let buttonProps = ObjectUtils.findDiffKeys(this.props, Button.defaultProps);
-
-        return (
-            <button ref={(el) => this.element = el} {...buttonProps} className={className}>
-                {this.props.iconPos === 'left' && icon}
-                {label}
-                {this.props.iconPos === 'right' && icon}
-                {this.props.children}
-            </button>
-        );
-    }
-}
diff --git a/src/components/calendar/Calendar.css b/src/components/calendar/Calendar.css
deleted file mode 100644
index 9e0fe2abe0..0000000000
--- a/src/components/calendar/Calendar.css
+++ /dev/null
@@ -1,286 +0,0 @@
-.p-calendar {
-    position: relative;
-    display: inline-block;
-}
-
-.p-calendar .p-calendar-button {
-    position: absolute;
-    height: 100%;
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    width: 2em;
-    border-left: 0 none;
-}
-
-.p-calendar .p-calendar-button:enabled:hover,
-.p-calendar .p-calendar-button:focus {
-    border-left: 0 none;
-}
-
-.p-calendar .p-datepicker {
-    min-width: 100%;
-}
-
-/* Fluid */
-.p-fluid .p-calendar {
-    width: 100%;
-}
-
-.p-fluid .p-calendar-button {
-    width: 2em;
-}
-
-.p-fluid .p-datepicker-buttonbar button {
-    width: auto;
-}
-
-.p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-    width: calc(100% - 2em);
-}
-
-/* Datepicker */
-.p-datepicker {
-	width: auto;
-	padding: .2em;
-	display: none;
-    position: absolute;
-}
-
-.p-datepicker.p-datepicker-inline {
-    display: inline-block;
-    position: static;
-}
-
-.p-datepicker .p-datepicker-group {
-    border-left-width: 0;
-    border-right-width: 0;
-    border-top-width: 0;
-    border-bottom-width: 0;
-}
-
-/* Header */
-.p-datepicker .p-datepicker-header {
-	position: relative;
-	padding: .5em 0;
-}
-.p-datepicker .p-datepicker-prev,
-.p-datepicker .p-datepicker-next {
-	position: absolute;
-	top: .5em;
-	width: 1.8em;
-    height: 1.8em;
-    cursor: pointer;
-}
-
-.p-datepicker .p-datepicker-prev {
-	left: .125em;
-}
-.p-datepicker .p-datepicker-next {
-	right: .125em;
-}
-
-.p-datepicker .p-datepicker-prev span,
-.p-datepicker .p-datepicker-next span {
-	display: block;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-}
-
-.p-datepicker .p-datepicker-title {
-	margin: 0 2.3em;
-	line-height: 1.8em;
-	text-align: center;
-}
-.p-datepicker .p-datepicker-title select {
-	font-size: 1em;
-	margin: .125em 0;
-    vertical-align: middle;
-}
-.p-datepicker select.p-datepicker-month {
-    margin-right: .25em;
-}
-.p-datepicker span.p-datepicker-year {
-	margin-left: .25em;
-}
-
-/* Multiple Month DatePicker */
-.p-datepicker-multiple-month .p-datepicker-group {
-    display: table-cell;
-    border-left-width: 0;
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-right-width: 1px;
-}
-
-/* DatePicker Table */
-.p-datepicker table {
-	width: 100%;
-	font-size: .9em;
-	border-collapse: collapse;
-	margin: 0 0 .4em;
-}
-.p-datepicker th {
-	padding: .5em;
-	text-align: center;
-	font-weight: bold;
-	border: 0;
-}
-.p-datepicker td {
-	border: 0;
-	padding: 0;
-}
-.p-datepicker td > span,
-.p-datepicker td > a {
-	display: block;
-	padding: .5em;
-	text-align: right;
-	text-decoration: none;
-}
-
-.p-datepicker td a {
-    cursor: pointer;
-}
-
-.p-datepicker .p-datepicker-buttonbar,
-.p-datepicker .p-datepicker-footer {
-	padding: .5em;
-}
-
-.p-datepicker .p-datepicker-buttonbar:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.p-datepicker .p-datepicker-buttonbar > button:last-child {
-    float: right;
-}
-
-.p-calendar.p-calendar-w-btn input {
-    -moz-border-radius-topright: 0px;
-    -webkit-border-top-right-radius: 0px;
-    -khtml-border-top-right-radius: 0px;
-    border-top-right-radius: 0px;
-    -moz-border-radius-bottomright: 0px;
-    -webkit-border-bottom-right-radius: 0px;
-    -khtml-border-bottom-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-
-/* Month Picker */
-.p-monthpicker .p-monthpicker-month {
-    width: 33.3%;
-    display: inline-block;
-    text-align: center;
-    padding: .5em;
-    cursor: pointer;
-}
-
-.p-datepicker-monthpicker select.p-datepicker-year {
-    width: auto;
-}
-
-/* Time Picker */
-.p-timepicker {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: .5em 0;
-}
-
-.p-timepicker > div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-left: .5em;
-    min-width: 1.5em;
-}
-
-.p-timepicker > .p-minute-picker,
-.p-timepicker > .p-second-picker,
-.p-timepicker > .p-millisecond-picker {
-    margin-left: 0;
-}
-
-.p-timepicker > .p-separator {
-    margin-left: 0px;
-    min-width: .75em;
-}
-
-.p-timepicker > .p-separator .p-separator-spacer {
-    visibility: hidden;
-    display: block;
-}
-
-.p-timepicker > .p-separator .p-separator-spacer:last-child {
-    margin-top: .3em;
-}
-
-.p-timepicker > div button {
-    display: block;
-    cursor: pointer;
-}
-
-.p-timepicker > div button:last-child {
-    margin-top: .3em;
-}
-
-input[type=text]::-ms-clear {
-    display: none;
-}
-
-/* Touch UI */
-.p-datepicker-touch-ui,
-.p-calendar .p-datepicker-touch-ui {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    min-width: 80vw;
-    transform: translate(-50%, -50%);
-}
-
-.p-datepicker-touch-ui.p-datepicker th {
-	padding: 2em 0;
-}
-.p-datepicker-touch-ui.p-datepicker td {
-	padding: 0;
-}
-.p-datepicker-touch-ui.p-datepicker td span,
-.p-datepicker-touch-ui.p-datepicker td a {
-	padding: 2em 0;
-}
-
-.p-datepicker-touch-ui .p-timepicker {
-    padding: 1em 0;
-}
-
-.p-datepicker-touch-ui .p-timepicker > div a {
-    font-size: 2em;
-}
-
-.p-datepicker-mask {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-}
-
-@media screen and (max-width: 40em) {
-    .p-datepicker-multiple-month {
-        width: 17em;
-        overflow: auto;
-    }
-
-    .p-datepicker-touch-ui.p-datepicker th {
-        padding: 1em 0;
-    }
-
-    .p-datepicker-touch-ui.p-datepicker td span,
-    .p-datepicker-touch-ui.p-datepicker td a {
-        padding: 1em 0;
-    }
-}
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
deleted file mode 100644
index aefd1cab68..0000000000
--- a/src/components/calendar/Calendar.d.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-export interface LocaleSettings {
-    firstDayOfWeek?: number;
-    dayNames: string[];
-    dayNamesShort: string[];
-    dayNamesMin: string[];
-    monthNames: string[];
-    monthNamesShort: string[];
-    today: string;
-    clear: string;
-}
-
-export interface DateMetaData {
-    day: number;
-    month: number;
-    year: number;
-    otherMonth: boolean;
-    today: boolean;
-    selectable: boolean;
-}
-
-interface CalendarProps {
-    id?: string;
-    name?: string;
-    value?: Date|Date[];
-    viewDate?: Date;
-    style?: object;
-    className?: string;
-    inline?: boolean;
-    selectionMode?: string;
-    inputId?: string;
-    inputStyle?: object;
-    inputClassName?: string;
-    required?: boolean;
-    readOnlyInput?: boolean;
-    keepInvalid?: boolean;
-    disabled?: boolean;
-    tabIndex?: string;
-    placeholder?: string;
-    showIcon?: boolean;
-    icon?: string;
-    showOnFocus?: boolean;
-    numberOfMonths?: number;
-    view?: string;
-    touchUI?: boolean;
-    showTime?: boolean;
-    timeOnly?: boolean;
-    showSeconds?: boolean;
-    showMillisec?: boolean;
-    hourFormat?: string;
-    stepHour?: number;
-    stepMinute?: number;
-    stepSecond?: number;
-    stepMillisec?: number;
-    shortYearCutoff?: string;
-    hideOnDateTimeSelect?: boolean;
-    showWeek?: boolean;
-    locale?: LocaleSettings;
-    dateFormat?: string;
-    panelStyle?: object;
-    panelClassName?: string;
-    monthNavigator?: boolean;
-    yearNavigator?: boolean;
-    disabledDates?: Date[];
-    disabledDays?: number[];
-    minDate?: Date;
-    maxDate?: Date;
-    maxDateCount?: number;
-    showOtherMonths?: boolean;
-    selectOtherMonths?: boolean;
-    showButtonBar?: boolean;
-    todayButtonClassName?: string;
-    clearButtonStyleClass?: string;
-    autoZIndex?: boolean;
-    baseZIndex?: number;
-    appendTo?: any;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    yearRange?: string;
-    dateTemplate?(dateMeta:DateMetaData): React.ReactNode;
-    headerTemplate?(): React.ReactNode;
-    footerTemplate?(): React.ReactNode;
-    onFocus?(event: Event): void;
-    onBlur?(event: Event): void;
-    onInput?(event: Event): void;
-    onSelect?(e: {originalEvent: Event, value: Date}): void;
-    onChange?(e: {originalEvent: Event, value: Date|Date[], target: {name: string, id: string, value: Date|Date[]}}): void;
-    onTodayButtonClick?(event: Event): void;
-    onClearButtonClick?(event: Event): void;
-    onViewDateChange?(e: {originalEvent: Event, value: Date}): void;
-}
-
-export class Calendar extends React.Component<CalendarProps,any> {}
diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
deleted file mode 100644
index dde91121de..0000000000
--- a/src/components/calendar/Calendar.js
+++ /dev/null
@@ -1,2876 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import {InputText} from '../inputtext/InputText';
-import {Button} from '../button/Button';
-import {CalendarPanel} from './CalendarPanel';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-
-export class Calendar extends Component {
-
-    static defaultProps = {
-        id: null,
-        name: null,
-        value: null,
-        viewDate: null,
-        style: null,
-        className: null,
-        inline: false,
-        selectionMode: 'single',
-        inputId: null,
-        inputStyle: null,
-        inputClassName: null,
-        required: false,
-        readOnlyInput: false,
-        keepInvalid: false,
-        disabled: false,
-        tabIndex: null,
-        placeholder: null,
-        showIcon: false,
-        icon: 'pi pi-calendar',
-        showOnFocus: true,
-        numberOfMonths: 1,
-        view: 'date',
-        touchUI: false,
-        showTime: false,
-        timeOnly: false,
-        showSeconds: false,
-        showMillisec: false,
-        hourFormat: '24',
-        stepHour: 1,
-        stepMinute: 1,
-        stepSecond: 1,
-        stepMillisec: 1,
-        shortYearCutoff: '+10',
-        hideOnDateTimeSelect: false,
-        showWeek: false,
-        locale: {
-            firstDayOfWeek: 0,
-            dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
-            dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-            dayNamesMin: ["Su","Mo","Tu","We","Th","Fr","Sa"],
-            monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
-            monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
-            today: 'Today',
-            clear: 'Clear',
-            weekHeader: 'Wk'
-        },
-        dateFormat: 'mm/dd/yy',
-        panelStyle: null,
-        panelClassName: null,
-        monthNavigator: false,
-        yearNavigator: false,
-        disabledDates: null,
-        disabledDays: null,
-        minDate: null,
-        maxDate: null,
-        maxDateCount: null,
-        showOtherMonths: true,
-        selectOtherMonths: false,
-        showButtonBar: false,
-        todayButtonClassName: 'p-button-secondary',
-        clearButtonStyleClass: 'p-button-secondary',
-        autoZIndex: true,
-        baseZIndex: 0,
-        appendTo: null,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        dateTemplate: null,
-        headerTemplate: null,
-        footerTemplate: null,
-        onFocus: null,
-        onBlur: null,
-        onInput: null,
-        onSelect: null,
-        onChange: null,
-        onViewDateChange: null,
-        onTodayButtonClick: null,
-        onClearButtonClick: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        name: PropTypes.string,
-        value: PropTypes.any,
-        viewDate: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        inline: PropTypes.bool,
-        selectionMode: PropTypes.string,
-        inputId: PropTypes.string,
-        inputStyle: PropTypes.object,
-        inputClassName: PropTypes.string,
-        required: PropTypes.bool,
-        readOnlyInput: PropTypes.bool,
-        keepInvalid: PropTypes.bool,
-        disabled: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        placeholder: PropTypes.string,
-        showIcon: PropTypes.bool,
-        icon: PropTypes.string,
-        showOnFocus: PropTypes.bool,
-        numberOfMonths: PropTypes.number,
-        view: PropTypes.string,
-        touchUI: PropTypes.bool,
-        showTime: PropTypes.bool,
-        timeOnly: PropTypes.bool,
-        showSeconds: PropTypes.bool,
-        showMillisec: PropTypes.bool,
-        hourFormat: PropTypes.string,
-        stepHour: PropTypes.number,
-        stepMinute: PropTypes.number,
-        stepSecond: PropTypes.number,
-        stepMillisec: PropTypes.number,
-        shortYearCutoff: PropTypes.string,
-        hideOnDateTimeSelect: PropTypes.bool,
-        showWeek: PropTypes.bool,
-        locale: PropTypes.object,
-        dateFormat: PropTypes.string,
-        panelStyle: PropTypes.object,
-        panelClassName: PropTypes.string,
-        monthNavigator: PropTypes.bool,
-        yearNavigator: PropTypes.bool,
-        disabledDates: PropTypes.array,
-        disabledDays: PropTypes.array,
-        minDate: PropTypes.any,
-        maxDate: PropTypes.any,
-        maxDateCount: PropTypes.number,
-        showOtherMonths: PropTypes.bool,
-        selectOtherMonths: PropTypes.bool,
-        showButtonBar: PropTypes.bool,
-        todayButtonClassName: PropTypes.string,
-        clearButtonStyleClass: PropTypes.string,
-        autoZIndex: PropTypes.bool,
-        baseZIndex: PropTypes.number,
-        appendTo: PropTypes.any,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        dateTemplate: PropTypes.func,
-        headerTemplate: PropTypes.func,
-        footerTemplate: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        onInput: PropTypes.func,
-        onSelect: PropTypes.func,
-        onChange: PropTypes.func,
-        onViewDateChange: PropTypes.func,
-        onTodayButtonClick: PropTypes.func,
-        onClearButtonClick: PropTypes.func,
-    }
-
-    constructor(props) {
-        super(props);
-
-        if (!this.props.onViewDateChange) {
-            let propValue = this.props.value;
-            if (Array.isArray(propValue)) {
-                propValue = propValue[0];
-            }
-
-            let viewDate = this.props.viewDate && this.isValidDate(this.props.viewDate) ?
-                            this.props.viewDate : (propValue && this.isValidDate(propValue) ? propValue : new Date());
-            this.state = {
-                viewDate
-            }
-        }
-
-        this.navigation = null;
-
-        this.onUserInput = this.onUserInput.bind(this);
-        this.onInputFocus = this.onInputFocus.bind(this);
-        this.onInputBlur = this.onInputBlur.bind(this);
-        this.onInputKeyDown = this.onInputKeyDown.bind(this);
-        this.onButtonClick = this.onButtonClick.bind(this);
-        this.onPrevButtonClick = this.onPrevButtonClick.bind(this);
-        this.onNextButtonClick = this.onNextButtonClick.bind(this);
-        this.onMonthDropdownChange = this.onMonthDropdownChange.bind(this);
-        this.onYearDropdownChange = this.onYearDropdownChange.bind(this);
-        this.onTodayButtonClick = this.onTodayButtonClick.bind(this);
-        this.onClearButtonClick = this.onClearButtonClick.bind(this);
-        this.incrementHour = this.incrementHour.bind(this);
-        this.decrementHour = this.decrementHour.bind(this);
-        this.incrementMinute = this.incrementMinute.bind(this);
-        this.decrementMinute = this.decrementMinute.bind(this);
-        this.incrementSecond = this.incrementSecond.bind(this);
-        this.decrementSecond= this.decrementSecond.bind(this);
-        this.toggleAmPm = this.toggleAmPm.bind(this);
-        this.onTimePickerElementMouseDown = this.onTimePickerElementMouseDown.bind(this);
-        this.onTimePickerElementMouseUp = this.onTimePickerElementMouseUp.bind(this);
-        this.onTimePickerElementMouseLeave = this.onTimePickerElementMouseLeave.bind(this);
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-
-        if(this.props.inline) {
-            this.initFocusableCell();
-        }
-
-        if (this.props.value) {
-            this.updateInputfield(this.props.value);
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-
-        if (!this.props.onViewDateChange && !this.viewStateChanged) {
-            let propValue = this.props.value;
-            if (Array.isArray(propValue)) {
-                propValue = propValue[0];
-            }
-
-            let prevPropValue = prevProps.value;
-            if (Array.isArray(prevPropValue)) {
-                prevPropValue = prevPropValue[0];
-            }
-
-            if ((!prevPropValue && propValue) || (propValue && propValue instanceof Date && propValue.getTime() !== prevPropValue.getTime())) {
-                let viewDate = this.props.viewDate && this.isValidDate(this.props.viewDate) ?
-                            this.props.viewDate : (propValue && this.isValidDate(propValue) ? propValue : new Date());
-
-                this.setState({
-                    viewDate
-                }, () => {
-                    this.viewStateChanged = true;
-                });
-            }
-        }
-
-        if(this.panel) {
-            this.updateFocus();
-        }
-
-        if (prevProps.value !== this.props.value && (!this.viewStateChanged || !this.panel.offsetParent)) {
-            this.updateInputfield(this.props.value);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-        }
-        if (this.mask) {
-            this.disableModality();
-            this.mask = null;
-        }
-
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.inputElement,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    onInputFocus(event) {
-        if (this.props.showOnFocus && !this.panel.offsetParent) {
-            this.showOverlay();
-        }
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-
-        DomHandler.addClass(this.container, 'p-inputwrapper-focus');
-    }
-
-    onInputBlur(event) {
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-
-        if (!this.props.keepInvalid) {
-            this.updateInputfield(this.props.value);
-        }
-
-        DomHandler.removeClass(this.container, 'p-inputwrapper-focus');
-    }
-
-    onInputKeyDown(event) {
-        this.isKeydown = true;
-
-        switch (event.which) {
-            //escape
-            case 27: {
-                this.hideOverlay();
-                break;
-            }
-
-            //tab
-            case 9: {
-                if(this.props.touchUI) {
-                    this.disableModality();
-                }
-
-                if (event.shiftKey) {
-                    this.hideOverlay();
-                }
-                break;
-            }
-
-            default:
-                //no op
-                break;
-        }
-    }
-
-    onUserInput(event) {
-        // IE 11 Workaround for input placeholder
-        if (!this.isKeydown) {
-            return;
-        }
-        this.isKeydown = false;
-
-        let rawValue = event.target.value;
-
-        try {
-            let value = this.parseValueFromString(rawValue);
-            if(this.isValidSelection(value)) {
-                this.updateModel(event, value);
-                this.updateViewDate(event, value.length ? value[0] : value);
-            }
-        }
-        catch(err) {
-            //this.updateModel(event, rawValue);
-            //invalid date
-            this.updateModel(event, null);
-        }
-
-        if (this.props.onInput) {
-            this.props.onInput(event);
-        }
-    }
-
-    isValidSelection(value) {
-        let isValid = true;
-        if (this.isSingleSelection()) {
-            if (!(this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false) && this.isSelectableTime(value))) {
-                isValid = false;
-            }
-        } else if (value.every(v => (this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false) && this.isSelectableTime(value)))) {
-            if (this.isRangeSelection()) {
-                isValid = value.length > 1 && value[1] > value[0] ? true : false;
-            }
-        }
-        return isValid;
-    }
-
-    onButtonClick(event) {
-        if (!this.panel.offsetParent) {
-            this.showOverlay();
-        }
-        else {
-            this.hideOverlay();
-        }
-    }
-
-    onPrevButtonClick(event) {
-        this.navigation = {backward: true, button: true};
-        this.navBackward(event);
-    }
-
-    onNextButtonClick(event) {
-        this.navigation = {backward: false, button: true};
-        this.navForward(event);
-    }
-
-    onContainerButtonKeydown(event) {
-        switch (event.which) {
-            //tab
-            case 9:
-                this.trapFocus(event);
-                break;
-
-            //escape
-            case 27:
-                this.hideOverlay();
-                event.preventDefault();
-                break;
-
-            default:
-                //Noop
-                break;
-        }
-    }
-
-    trapFocus(event) {
-        event.preventDefault();
-        let focusableElements = DomHandler.getFocusableElements(this.panel);
-
-        if (focusableElements && focusableElements.length > 0) {
-            if (!document.activeElement) {
-                focusableElements[0].focus();
-            }
-            else {
-                let focusedIndex = focusableElements.indexOf(document.activeElement);
-
-                if (event.shiftKey) {
-                    if (focusedIndex === -1 || focusedIndex === 0)
-                        focusableElements[focusableElements.length - 1].focus();
-                    else
-                        focusableElements[focusedIndex - 1].focus();
-                }
-                else {
-                    if (focusedIndex === -1 || focusedIndex === (focusableElements.length - 1))
-                        focusableElements[0].focus();
-                    else
-                        focusableElements[focusedIndex + 1].focus();
-                }
-            }
-        }
-    }
-
-    updateFocus() {
-        let cell;
-        if (this.navigation) {
-            if (this.navigation.button) {
-                this.initFocusableCell();
-
-                if (this.navigation.backward)
-                    DomHandler.findSingle(this.panel, '.p-datepicker-prev').focus();
-                else
-                    DomHandler.findSingle(this.panel, '.p-datepicker-next').focus();
-            }
-            else {
-                if (this.navigation.backward) {
-                    let cells = DomHandler.find(this.panel, '.p-datepicker-calendar td span:not(.p-disabled)');
-                    cell = cells[cells.length - 1];
-                }
-                else {
-                    cell = DomHandler.findSingle(this.panel, '.p-datepicker-calendar td span:not(.p-disabled)');
-                }
-
-                if (cell) {
-                    cell.tabIndex = '0';
-                    cell.focus();
-                }
-            }
-
-            this.navigation = null;
-        }
-        else {
-            this.initFocusableCell();
-        }
-    }
-
-    initFocusableCell() {
-        let cell;
-        if (this.view === 'month') {
-            let cells = DomHandler.find(this.panel, '.p-monthpicker .p-monthpicker-month');
-            let selectedCell= DomHandler.findSingle(this.panel, '.p-monthpicker .p-monthpicker-month.p-highlight');
-            cells.forEach(cell => cell.tabIndex = -1);
-            cell = selectedCell || cells[0];
-        }
-        else {
-            cell = DomHandler.findSingle(this.panel, 'span.p-highlight');
-            if (!cell) {
-                let todayCell = DomHandler.findSingle(this.panel, 'td.p-datepicker-today span:not(.p-disabled)');
-                if (todayCell)
-                    cell = todayCell;
-                else
-                    cell = DomHandler.findSingle(this.panel, '.p-datepicker-calendar td span:not(.p-disabled)');
-            }
-        }
-
-        if (cell) {
-            cell.tabIndex = '0';
-        }
-    }
-
-    navBackward(event) {
-        if(this.props.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        let newViewDate = new Date(this.getViewDate().getTime());
-
-        if (this.props.view === 'date') {
-            if(newViewDate.getMonth() === 0) {
-                newViewDate.setMonth(11);
-                newViewDate.setFullYear(newViewDate.getFullYear() - 1);
-            }
-            else {
-                newViewDate.setMonth(newViewDate.getMonth() - 1);
-            }
-        }
-        else if (this.props.view === 'month') {
-            let currentYear = newViewDate.getFullYear();
-            let newYear = currentYear - 1;
-
-            if(this.props.yearNavigator) {
-                const minYear = parseInt(this.props.yearRange.split(':')[0], 10);
-
-                if(newYear < minYear) {
-                    newYear = minYear;
-                }
-            }
-
-            newViewDate.setFullYear(newYear);
-        }
-
-        this.updateViewDate(event, newViewDate);
-
-        event.preventDefault();
-    }
-
-    navForward(event) {
-        if(this.props.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        let newViewDate = new Date(this.getViewDate().getTime());
-
-        if (this.props.view === 'date') {
-            if(newViewDate.getMonth() === 11) {
-                newViewDate.setMonth(0);
-                newViewDate.setFullYear(newViewDate.getFullYear() + 1);
-            }
-            else {
-                newViewDate.setMonth(newViewDate.getMonth() + 1);
-            }
-        }
-        else if (this.props.view === 'month') {
-            let currentYear = newViewDate.getFullYear();
-            let newYear = currentYear + 1;
-
-            if(this.props.yearNavigator) {
-                const maxYear = parseInt(this.props.yearRange.split(':')[1], 10);
-
-                if(newYear > maxYear) {
-                    newYear = maxYear;
-                }
-            }
-
-            newViewDate.setFullYear(newYear);
-        }
-
-        this.updateViewDate(event, newViewDate);
-
-        event.preventDefault();
-    }
-
-    onMonthDropdownChange(event) {
-        const currentViewDate = this.getViewDate();
-        let newViewDate = new Date(currentViewDate.getTime());
-        newViewDate.setMonth(parseInt(event.target.value, 10));
-
-        this.updateViewDate(event, newViewDate);
-    }
-
-    onYearDropdownChange(event) {
-        const currentViewDate = this.getViewDate();
-        let newViewDate = new Date(currentViewDate.getTime());
-        newViewDate.setFullYear(parseInt(event.target.value, 10));
-
-        this.updateViewDate(event, newViewDate);
-    }
-
-    onTodayButtonClick(event) {
-        const today = new Date();
-        const dateMeta = {day: today.getDate(), month: today.getMonth(), year: today.getFullYear(), today: true, selectable: true};
-        const timeMeta = {hours: today.getHours(), minutes: today.getMinutes(), seconds: today.getSeconds(), milliseconds: today.getMilliseconds()};
-
-        this.updateViewDate(event, today);
-        this.onDateSelect(event, dateMeta, timeMeta);
-
-        if (this.props.onTodayButtonClick) {
-            this.props.onTodayButtonClick(event);
-        }
-    }
-
-    onClearButtonClick(event) {
-        this.updateModel(event, null);
-        this.updateInputfield(null);
-
-        if (this.props.onClearButtonClick) {
-            this.props.onClearButtonClick(event);
-        }
-    }
-
-    onTimePickerElementMouseDown(event, type, direction) {
-        if (!this.props.disabled) {
-            this.repeat(event, null, type, direction);
-            event.preventDefault();
-        }
-    }
-
-    onTimePickerElementMouseUp() {
-        if (!this.props.disabled) {
-            this.clearTimePickerTimer();
-        }
-    }
-
-    onTimePickerElementMouseLeave() {
-        if (!this.props.disabled) {
-            this.clearTimePickerTimer();
-        }
-    }
-
-    repeat(event, interval, type, direction) {
-        event.persist();
-
-        let i = interval||500;
-
-        this.clearTimePickerTimer();
-        this.timePickerTimer = setTimeout(() => {
-            this.repeat(event, 100, type, direction);
-        }, i);
-
-        switch(type) {
-            case 0:
-                if (direction === 1)
-                    this.incrementHour(event);
-                else
-                    this.decrementHour(event);
-                break;
-
-            case 1:
-                if (direction === 1)
-                    this.incrementMinute(event);
-                else
-                    this.decrementMinute(event);
-                break;
-
-            case 2:
-                if (direction === 1)
-                    this.incrementSecond(event);
-                else
-                    this.decrementSecond(event);
-                break;
-
-            case 3:
-                if (direction === 1)
-                    this.incrementMilliSecond(event);
-                else
-                    this.decrementMilliSecond(event);
-                break;
-
-            default:
-                break;
-        }
-    }
-
-    clearTimePickerTimer() {
-        if (this.timePickerTimer) {
-            clearTimeout(this.timePickerTimer);
-        }
-    }
-
-    incrementHour(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentHour = currentTime.getHours();
-        let newHour = currentHour + this.props.stepHour;
-        newHour = (newHour >= 24) ? (newHour - 24) : newHour;
-
-        if (this.validateHour(newHour, currentTime)) {
-
-            if(this.props.maxDate && this.props.maxDate.toDateString() === currentTime.toDateString() && this.props.maxDate.getHours() === newHour) {
-                if(this.props.maxDate.getMinutes() < currentTime.getMinutes()) {
-                    if(this.props.maxDate.getSeconds() < currentTime.getSeconds()) {
-                        if(this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
-                            this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), this.props.maxDate.getMilliseconds());
-                        }
-                        else {
-                            this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), currentTime.getMilliseconds());
-                        }
-                    }
-                    else {
-                        this.updateTime(event, newHour, this.props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-                    }
-                }
-                else if(this.props.maxDate.getMinutes() === currentTime.getMinutes()) {
-                    if(this.props.maxDate.getSeconds() < currentTime.getSeconds()) {
-                        if(this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
-                            this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), this.props.maxDate.getMilliseconds());
-                        }
-                        else {
-                            this.updateTime(event, newHour, this.props.maxDate.getMinutes(), this.props.maxDate.getSeconds(), currentTime.getMilliseconds());
-                        }
-                    }
-                    else {
-                        this.updateTime(event, newHour, this.props.maxDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-                    }
-                }
-                else {
-                    this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-                }
-            }
-            else {
-                this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    decrementHour(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentHour = currentTime.getHours();
-        let newHour = currentHour - this.props.stepHour;
-        newHour = (newHour < 0) ? (newHour + 24) : newHour;
-
-        if (this.validateHour(newHour, currentTime)) {
-            if(this.props.minDate && this.props.minDate.toDateString() === currentTime.toDateString() && this.props.minDate.getHours() === newHour) {
-                if(this.props.minDate.getMinutes() > currentTime.getMinutes()) {
-                    if(this.props.minDate.getSeconds() > currentTime.getSeconds()) {
-                        if(this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
-                            this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), this.props.minDate.getMilliseconds());
-                        }
-                        else {
-                            this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), currentTime.getMilliseconds());
-                        }
-                    }
-                    else {
-                        this.updateTime(event, newHour, this.props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-                    }
-                }
-                else if(this.props.minDate.getMinutes() === currentTime.getMinutes()) {
-                    if(this.props.minDate.getSeconds() > currentTime.getSeconds()) {
-                        if(this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
-                            this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), this.props.minDate.getMilliseconds());
-                        }
-                        else {
-                            this.updateTime(event, newHour, this.props.minDate.getMinutes(), this.props.minDate.getSeconds(), currentTime.getMilliseconds());
-                        }
-                    }
-                    else {
-                        this.updateTime(event, newHour, this.props.minDate.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-                    }
-                }
-                else {
-                    this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-                }
-            }
-            else {
-                this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    incrementMinute(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentMinute = currentTime.getMinutes();
-        let newMinute = currentMinute + this.props.stepMinute;
-        newMinute = (newMinute > 59) ? (newMinute - 60) : newMinute;
-
-        if (this.validateMinute(newMinute, currentTime)) {
-            if(this.props.maxDate && this.props.maxDate.toDateString() === currentTime.toDateString() && this.props.maxDate.getMinutes() === newMinute) {
-                if(this.props.maxDate.getSeconds() < currentTime.getSeconds()) {
-                    if(this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
-                        this.updateTime(event, currentTime.getHours(), newMinute, this.props.maxDate.getSeconds(), this.props.maxDate.getMilliseconds());
-                    }
-                    else {
-                        this.updateTime(event, currentTime.getHours(), newMinute, this.props.maxDate.getSeconds(), currentTime.getMilliseconds());
-                    }
-                }
-                else {
-                    this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
-                }
-            }
-            else {
-                this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    decrementMinute(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentMinute = currentTime.getMinutes();
-        let newMinute = currentMinute - this.props.stepMinute;
-        newMinute = (newMinute < 0) ? (newMinute + 60) : newMinute;
-
-        if (this.validateMinute(newMinute, currentTime)) {
-            if(this.props.minDate && this.props.minDate.toDateString() === currentTime.toDateString() && this.props.minDate.getMinutes() === newMinute) {
-                if(this.props.minDate.getSeconds() > currentTime.getSeconds()) {
-                    if(this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
-                        this.updateTime(event, currentTime.getHours(), newMinute, this.props.minDate.getSeconds(), this.props.minDate.getMilliseconds());
-                    }
-                    else {
-                        this.updateTime(event, currentTime.getHours(), newMinute, this.props.minDate.getSeconds(), currentTime.getMilliseconds());
-                    }
-                }
-                else {
-                    this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
-                }
-            }
-            else {
-                this.updateTime(event, currentTime.getHours(), newMinute, currentTime.getSeconds(), currentTime.getMilliseconds());
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    incrementSecond(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentSecond = currentTime.getSeconds();
-        let newSecond = currentSecond + this.props.stepSecond;
-        newSecond = (newSecond > 59) ? (newSecond - 60) : newSecond;
-
-        if (this.validateSecond(newSecond, currentTime)) {
-            if(this.props.maxDate && this.props.maxDate.toDateString() === currentTime.toDateString() && this.props.maxDate.getSeconds() === newSecond) {
-                if(this.props.maxDate.getMilliseconds() < currentTime.getMilliseconds()) {
-                    this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, this.props.maxDate.getMilliseconds());
-                }
-                else {
-                    this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
-                }
-            }
-            else {
-                this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    decrementSecond(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentSecond = currentTime.getSeconds();
-        let newSecond = currentSecond - this.props.stepSecond;
-        newSecond = (newSecond < 0) ? (newSecond + 60) : newSecond;
-
-        if (this.validateSecond(newSecond, currentTime)) {
-            if(this.props.minDate && this.props.minDate.toDateString() === currentTime.toDateString() && this.props.minDate.getSeconds() === newSecond) {
-                if(this.props.minDate.getMilliseconds() > currentTime.getMilliseconds()) {
-                    this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, this.props.minDate.getMilliseconds());
-                }
-                else {
-                    this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
-                }
-            }
-            else {
-                this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), newSecond, currentTime.getMilliseconds());
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    incrementMilliSecond(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentMillisecond = currentTime.getMilliseconds();
-        let newMillisecond = currentMillisecond + this.props.stepMillisec;
-        newMillisecond = (newMillisecond > 999) ? (newMillisecond - 1000) : newMillisecond;
-
-        if (this.validateMillisecond(newMillisecond, currentTime)) {
-            this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
-        }
-
-        event.preventDefault();
-    }
-
-    decrementMilliSecond(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentMillisecond = currentTime.getMilliseconds();
-        let newMillisecond = currentMillisecond - this.props.stepMillisec;
-        newMillisecond = (newMillisecond < 0) ? (newMillisecond + 200) : newMillisecond;
-
-        if (this.validateMillisecond(newMillisecond, currentTime)) {
-            this.updateTime(event, currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), newMillisecond);
-        }
-
-        event.preventDefault();
-    }
-
-    toggleAmPm(event) {
-        const currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        const currentHour = currentTime.getHours();
-        const newHour = (currentHour >= 12) ? currentHour - 12: currentHour + 12;
-
-        this.updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
-        event.preventDefault();
-    }
-
-    getViewDate() {
-        return this.props.onViewDateChange ? this.props.viewDate : this.state.viewDate;
-    }
-
-    isValidDate(date) {
-        return date instanceof Date && !isNaN(date);
-    }
-
-    validateHour(hour, value) {
-        let valid = true;
-        let valueDateString = value ? value.toDateString() : null;
-
-        if(this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
-            if(this.props.minDate.getHours() > hour) {
-                valid = false;
-            }
-        }
-
-        if(this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
-            if(this.props.maxDate.getHours() < hour) {
-                valid = false;
-            }
-        }
-
-        return valid;
-    }
-
-    validateMinute(minute, value) {
-        let valid = true;
-        let valueDateString = value ? value.toDateString() : null;
-
-        if(this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
-            if(value.getHours() === this.props.minDate.getHours()){
-                if(this.props.minDate.getMinutes() > minute) {
-                    valid = false;
-                }
-            }
-        }
-
-        if(this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
-            if(value.getHours() === this.props.maxDate.getHours()){
-                if(this.props.maxDate.getMinutes() < minute) {
-                    valid = false;
-                }
-            }
-        }
-
-        return valid;
-    }
-
-    validateSecond(second, value) {
-        let valid = true;
-        let valueDateString = value ? value.toDateString() : null;
-
-        if(this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
-            if(value.getHours() === this.props.minDate.getHours() && value.getMinutes() === this.props.minDate.getMinutes()) {
-                if(this.props.minDate.getSeconds() > second) {
-                    valid = false;
-                }
-            }
-        }
-
-        if(this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
-            if(value.getHours() === this.props.maxDate.getHours() && value.getMinutes() === this.props.maxDate.getMinutes()){
-                if(this.props.maxDate.getSeconds() < second) {
-                    valid = false;
-                }
-            }
-        }
-
-        return valid;
-    }
-
-    validateMillisecond(millisecond, value) {
-        let valid = true;
-        let valueDateString = value ? value.toDateString() : null;
-
-        if(this.props.minDate && valueDateString && this.props.minDate.toDateString() === valueDateString) {
-            if(value.getHours() === this.props.minDate.getHours() && value.getSeconds() === this.props.minDate.getSeconds() && value.getMinutes() === this.props.minDate.getMinutes()) {
-                if(this.props.minDate.getMilliseconds() > millisecond) {
-                    valid = false;
-                }
-            }
-        }
-
-        if(this.props.maxDate && valueDateString && this.props.maxDate.toDateString() === valueDateString) {
-            if(value.getHours() === this.props.maxDate.getHours() && value.getSeconds() === this.props.maxDate.getSeconds() && value.getMinutes() === this.props.maxDate.getMinutes()){
-                if(this.props.maxDate.getMilliseconds() < millisecond) {
-                    valid = false;
-                }
-            }
-        }
-
-        return valid;
-    }
-
-    updateTime(event, hour, minute, second, millisecond) {
-        let newDateTime = (this.props.value && this.props.value instanceof Date) ? new Date(this.props.value) : new Date();
-
-        newDateTime.setHours(hour);
-        newDateTime.setMinutes(minute);
-        newDateTime.setSeconds(second);
-        newDateTime.setMilliseconds(millisecond);
-
-        this.updateModel(event, newDateTime);
-
-        if (this.props.onSelect) {
-            this.props.onSelect({
-                originalEvent: event,
-                value: newDateTime
-            });
-        }
-
-        this.updateInputfield(newDateTime);
-    }
-
-    updateViewDate(event, value) {
-        if (this.props.yearNavigator) {
-            let viewYear = value.getFullYear();
-
-            if (this.props.minDate && this.props.minDate.getFullYear() > viewYear) {
-                viewYear = this.props.minDate.getFullYear();
-            }
-            if (this.props.maxDate && this.props.maxDate.getFullYear() < viewYear) {
-                viewYear = this.props.maxDate.getFullYear();
-            }
-
-            value.setFullYear(viewYear);
-        }
-
-        if (this.props.monthNavigator && this.props.view !== 'month') {
-            let viewMonth = value.getMonth();
-            let viewMonthWithMinMax = parseInt((this.isInMinYear(value) && Math.max(this.props.minDate.getMonth(), viewMonth).toString()) || (this.isInMaxYear(value) && Math.min(this.props.maxDate.getMonth(), viewMonth).toString()) || viewMonth);
-
-            value.setMonth(viewMonthWithMinMax);
-        }
-
-        if (this.props.onViewDateChange) {
-            this.props.onViewDateChange({
-                originalEvent: event,
-                value: value
-            });
-        }
-        else {
-            this.viewStateChanged = true;
-            this.setState({
-                viewDate: value
-            });
-        }
-    }
-
-    onDateCellKeydown(event, date, groupIndex) {
-        const cellContent = event.currentTarget;
-        const cell = cellContent.parentElement;
-
-        switch (event.which) {
-            //down arrow
-            case 40: {
-                cellContent.tabIndex = '-1';
-                let cellIndex = DomHandler.index(cell);
-                let nextRow = cell.parentElement.nextElementSibling;
-                if (nextRow) {
-                    let focusCell = nextRow.children[cellIndex].children[0];
-                    if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                        this.navigation = {backward: false};
-                        this.navForward(event);
-                    }
-                    else {
-                        nextRow.children[cellIndex].children[0].tabIndex = '0';
-                        nextRow.children[cellIndex].children[0].focus();
-                    }
-                }
-                else {
-                    this.navigation = {backward: false};
-                    this.navForward(event);
-                }
-                event.preventDefault();
-                break;
-            }
-
-            //up arrow
-            case 38: {
-                cellContent.tabIndex = '-1';
-                let cellIndex = DomHandler.index(cell);
-                let prevRow = cell.parentElement.previousElementSibling;
-                if (prevRow) {
-                    let focusCell = prevRow.children[cellIndex].children[0];
-                    if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                        this.navigation = {backward: true};
-                        this.navBackward(event);
-                    }
-                    else {
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
-                    }
-                }
-                else {
-                    this.navigation = {backward: true};
-                    this.navBackward(event);
-                }
-                event.preventDefault();
-                break;
-            }
-
-            //left arrow
-            case 37: {
-                cellContent.tabIndex = '-1';
-                let prevCell = cell.previousElementSibling;
-                if (prevCell) {
-                    let focusCell = prevCell.children[0];
-                    if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                        this.navigateToMonth(true, groupIndex, event);
-                    }
-                    else {
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
-                    }
-                }
-                else {
-                    this.navigateToMonth(true, groupIndex, event);
-                }
-                event.preventDefault();
-                break;
-            }
-
-            //right arrow
-            case 39: {
-                cellContent.tabIndex = '-1';
-                let nextCell = cell.nextElementSibling;
-                if (nextCell) {
-                    let focusCell = nextCell.children[0];
-                    if (DomHandler.hasClass(focusCell, 'p-disabled')) {
-                        this.navigateToMonth(false, groupIndex, event);
-                    }
-                    else {
-                        focusCell.tabIndex = '0';
-                        focusCell.focus();
-                    }
-                }
-                else {
-                    this.navigateToMonth(false, groupIndex,event);
-                }
-                event.preventDefault();
-                break;
-            }
-
-            //enter
-            case 13: {
-                this.onDateSelect(event, date);
-                event.preventDefault();
-                break;
-            }
-
-            //escape
-            case 27: {
-                this.hideOverlay()
-                event.preventDefault();
-                break;
-            }
-
-            //tab
-            case 9: {
-                this.trapFocus(event);
-                break;
-            }
-
-            default:
-                //no op
-                break;
-        }
-    }
-
-    navigateToMonth(prev, groupIndex, event) {
-        if (prev) {
-            if (this.props.numberOfMonths === 1 || (groupIndex === 0)) {
-                this.navigation = {backward: true};
-                this.navBackward(event);
-            }
-            else {
-                let prevMonthContainer = this.panel.children[groupIndex - 1];
-                let cells = DomHandler.find(prevMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
-                let focusCell = cells[cells.length - 1];
-                focusCell.tabIndex = '0';
-                focusCell.focus();
-            }
-        }
-        else {
-            if (this.props.numberOfMonths === 1 || (groupIndex === this.props.numberOfMonths - 1)) {
-                this.navigation = {backward: false};
-                this.navForward(event);
-            }
-            else {
-                let nextMonthContainer = this.panel.children[groupIndex + 1];
-                let focusCell = DomHandler.findSingle(nextMonthContainer, '.p-datepicker-calendar td span:not(.p-disabled)');
-                focusCell.tabIndex = '0';
-                focusCell.focus();
-            }
-        }
-    }
-
-    onMonthCellKeydown(event, index) {
-        const cell = event.currentTarget;
-
-        switch (event.which) {
-            //arrows
-            case 38:
-            case 40: {
-                cell.tabIndex = '-1';
-                var cells = cell.parentElement.children;
-                var cellIndex = DomHandler.index(cell);
-                let nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex -3];
-                if (nextCell) {
-                    nextCell.tabIndex = '0';
-                    nextCell.focus();
-                }
-                event.preventDefault();
-                break;
-            }
-
-            //left arrow
-            case 37: {
-                cell.tabIndex = '-1';
-                let prevCell = cell.previousElementSibling;
-                if (prevCell) {
-                    prevCell.tabIndex = '0';
-                    prevCell.focus();
-                }
-                event.preventDefault();
-                break;
-            }
-
-            //right arrow
-            case 39: {
-                cell.tabIndex = '-1';
-                let nextCell = cell.nextElementSibling;
-                if (nextCell) {
-                    nextCell.tabIndex = '0';
-                    nextCell.focus();
-                }
-                event.preventDefault();
-                break;
-            }
-
-            //enter
-            case 13: {
-                this.onMonthSelect(event, index);
-                event.preventDefault();
-                break;
-            }
-
-            //escape
-            case 27: {
-                this.hideOverlay();
-                event.preventDefault();
-                break;
-            }
-
-            //tab
-            case 9: {
-                this.trapFocus(event);
-                break;
-            }
-
-            default:
-                //no op
-                break;
-        }
-    }
-
-    onDateSelect(event, dateMeta, timeMeta) {
-        if(this.props.disabled || !dateMeta.selectable) {
-            event.preventDefault();
-            return;
-        }
-
-        DomHandler.find(this.panel, '.p-datepicker-calendar td span:not(.p-disabled)').forEach(cell => cell.tabIndex = -1);
-        event.currentTarget.focus();
-
-        if (this.isMultipleSelection()) {
-            if (this.isSelected(dateMeta)) {
-                let value = this.props.value.filter((date, i) => {
-                    return !this.isDateEquals(date, dateMeta);
-                });
-                this.updateModel(event, value);
-            }
-            else if(!this.props.maxDateCount || !this.props.value || this.props.maxDateCount > this.props.value.length) {
-                this.selectDate(event, dateMeta, timeMeta);
-            }
-        }
-        else {
-            this.selectDate(event, dateMeta, timeMeta);
-        }
-
-        if(!this.props.inline && this.isSingleSelection() && (!this.props.showTime || this.props.hideOnDateTimeSelect)) {
-            setTimeout(() => {
-                this.hideOverlay();
-            }, 100);
-
-            if(this.mask) {
-                this.disableModality();
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    selectTime(date, timeMeta) {
-        if (this.props.showTime) {
-            let hours, minutes, seconds, milliseconds;
-
-            if (timeMeta) {
-                ({hours, minutes, seconds, milliseconds} = timeMeta);
-            }
-            else {
-                let time = (this.props.value && this.props.value instanceof Date) ? this.props.value : new Date();
-                [hours, minutes, seconds, milliseconds] = [time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()];
-            }
-
-            date.setHours(hours);
-            date.setMinutes(minutes);
-            date.setSeconds(seconds);
-            date.setMilliseconds(milliseconds);
-        }
-    }
-
-    selectDate(event, dateMeta, timeMeta) {
-        let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
-
-        this.selectTime(date, timeMeta);
-
-        if(this.props.minDate && this.props.minDate > date) {
-            date = this.props.minDate;
-        }
-
-        if(this.props.maxDate && this.props.maxDate < date) {
-            date = this.props.maxDate;
-        }
-
-        let selectedValues = date;
-
-        if (this.isSingleSelection()) {
-            this.updateModel(event, date);
-        }
-        else if(this.isMultipleSelection()) {
-            selectedValues = this.props.value ? [...this.props.value, date] : [date];
-            this.updateModel(event, selectedValues);
-        }
-        else if (this.isRangeSelection()) {
-            if (this.props.value && this.props.value.length) {
-                let startDate = this.props.value[0];
-                let endDate = this.props.value[1];
-
-                if (!endDate && date.getTime() >= startDate.getTime()) {
-                    endDate = date;
-                }
-                else {
-                    startDate = date;
-                    endDate = null;
-                }
-
-                selectedValues = [startDate, endDate];
-                this.updateModel(event, selectedValues);
-            }
-            else {
-                selectedValues = [date, null];
-                this.updateModel(event, selectedValues);
-            }
-        }
-
-        if (this.props.onSelect) {
-            this.props.onSelect({
-                originalEvent: event,
-                value: date
-            });
-        }
-
-        this.updateInputfield(selectedValues);
-    }
-
-    onMonthSelect(event, month) {
-        this.onDateSelect(event, {year: this.getViewDate().getFullYear(), month: month, day: 1, selectable: true});
-        event.preventDefault();
-    }
-
-    updateModel(event, value) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: value
-                }
-            });
-
-            this.viewStateChanged = true;
-        }
-    }
-
-    showOverlay() {
-        if (this.props.autoZIndex) {
-            this.panel.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-        }
-        this.panel.style.display = 'block';
-
-        setTimeout(() => {
-            DomHandler.addClass(this.panel, 'p-input-overlay-visible');
-            DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
-        }, 1);
-
-        this.alignPanel();
-        this.bindDocumentClickListener();
-        this.bindDocumentResizeListener();
-    }
-
-    hideOverlay() {
-        if (this.panel) {
-            DomHandler.addClass(this.panel, 'p-input-overlay-hidden');
-            DomHandler.removeClass(this.panel, 'p-input-overlay-visible');
-            this.unbindDocumentClickListener();
-            this.unbindDocumentResizeListener();
-
-            this.hideTimeout = setTimeout(() => {
-                this.panel.style.display = 'none';
-                DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
-            }, 150);
-        }
-    }
-
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (this.isOutsideClicked(event)) {
-                    this.hideOverlay();
-                }
-            };
-
-            document.addEventListener('mousedown', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            document.removeEventListener('mousedown', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    bindDocumentResizeListener() {
-        if (!this.documentResizeListener && !this.props.touchUI) {
-            this.documentResizeListener = this.onWindowResize.bind(this);
-            window.addEventListener('resize', this.documentResizeListener);
-        }
-    }
-
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.isNavIconClicked(event) ||
-            this.container.contains(event.target) || (this.panel && this.panel.contains(event.target)));
-    }
-
-    isNavIconClicked(event) {
-        return (DomHandler.hasClass(event.target, 'p-datepicker-prev') || DomHandler.hasClass(event.target, 'p-datepicker-prev-icon')
-            || DomHandler.hasClass(event.target, 'p-datepicker-next') || DomHandler.hasClass(event.target, 'p-datepicker-next-icon'));
-    }
-
-    onWindowResize() {
-        if (this.panel.offsetParent && !DomHandler.isAndroid()) {
-            this.hideOverlay();
-        }
-    }
-
-    alignPanel() {
-        if (this.props.touchUI) {
-            this.enableModality();
-        }
-        else {
-            if(this.props.appendTo) {
-                DomHandler.absolutePosition(this.panel, this.inputElement);
-                this.panel.style.minWidth = DomHandler.getWidth(this.container) + 'px';
-            }
-            else {
-                DomHandler.relativePosition(this.panel, this.inputElement);
-            }
-        }
-    }
-
-    enableModality() {
-        if (!this.mask) {
-            this.mask = document.createElement('div');
-            this.mask.style.zIndex = String(parseInt(this.panel.style.zIndex, 10) - 1);
-            DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker');
-
-            this.maskClickListener = () => {
-                this.disableModality();
-            };
-            this.mask.addEventListener('click', this.maskClickListener);
-
-            document.body.appendChild(this.mask);
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
-        }
-    }
-
-    disableModality() {
-        if (this.mask) {
-            this.mask.removeEventListener('click', this.maskClickListener);
-            this.maskClickListener = null;
-            document.body.removeChild(this.mask);
-            this.mask = null;
-
-            let bodyChildren = document.body.children;
-            let hasBlockerMasks;
-            for (let i = 0; i < bodyChildren.length; i++) {
-                let bodyChild = bodyChildren[i];
-                if(DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
-                    hasBlockerMasks = true;
-                    break;
-                }
-            }
-
-            if (!hasBlockerMasks) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            }
-
-            this.hideOverlay();
-        }
-    }
-
-    getFirstDayOfMonthIndex(month, year) {
-        let day = new Date();
-        day.setDate(1);
-        day.setMonth(month);
-        day.setFullYear(year);
-
-        let dayIndex = day.getDay() + this.getSundayIndex();
-        return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
-    }
-
-    getDaysCountInMonth(month, year) {
-        return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
-    }
-
-    getDaysCountInPrevMonth(month, year) {
-        let prev = this.getPreviousMonthAndYear(month, year);
-        return this.getDaysCountInMonth(prev.month, prev.year);
-    }
-
-    daylightSavingAdjust(date) {
-        if (!date) {
-            return null;
-        }
-
-        date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
-
-        return date;
-    }
-
-    getPreviousMonthAndYear(month, year) {
-        let m, y;
-
-        if(month === 0) {
-            m = 11;
-            y = year - 1;
-        }
-        else {
-            m = month - 1;
-            y = year;
-        }
-
-        return {'month':m, 'year':y};
-    }
-
-    getNextMonthAndYear(month, year) {
-        let m, y;
-
-        if(month === 11) {
-            m = 0;
-            y = year + 1;
-        }
-        else {
-            m = month + 1;
-            y = year;
-        }
-
-        return {'month':m,'year':y};
-    }
-
-    getSundayIndex() {
-        return this.props.locale.firstDayOfWeek > 0 ? 7 - this.props.locale.firstDayOfWeek : 0;
-    }
-
-    createWeekDays() {
-        let weekDays = [];
-        let dayIndex = this.props.locale.firstDayOfWeek;
-        for(let i = 0; i < 7; i++) {
-            weekDays.push(this.props.locale.dayNamesMin[dayIndex]);
-            dayIndex = (dayIndex === 6) ? 0 : ++dayIndex;
-        }
-
-        return weekDays;
-    }
-
-    createMonths(month, year) {
-        let months = [];
-        for (let i = 0 ; i < this.props.numberOfMonths; i++) {
-            let m = month + i;
-            let y = year;
-            if (m > 11) {
-                m = m % 11 - 1;
-                y = year + 1;
-            }
-
-            months.push(this.createMonth(m, y));
-        }
-
-        return months;
-    }
-
-    createMonth(month, year) {
-        let dates = [];
-        let firstDay = this.getFirstDayOfMonthIndex(month, year);
-        let daysLength = this.getDaysCountInMonth(month, year);
-        let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
-        let dayNo = 1;
-        let today = new Date();
-        let weekNumbers = [];
-        let monthRows = Math.ceil((daysLength + firstDay) / 7);
-
-        for(let i = 0; i < monthRows; i++) {
-            let week = [];
-
-            if(i === 0) {
-                for(let j = (prevMonthDaysLength - firstDay + 1); j <= prevMonthDaysLength; j++) {
-                    let prev = this.getPreviousMonthAndYear(month, year);
-                    week.push({day: j, month: prev.month, year: prev.year, otherMonth: true,
-                        today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true)});
-                }
-
-                let remainingDaysLength = 7 - week.length;
-                for(let j = 0; j < remainingDaysLength; j++) {
-                    week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
-                        selectable: this.isSelectable(dayNo, month, year, false)});
-                    dayNo++;
-                }
-            }
-            else {
-                for (let j = 0; j < 7; j++) {
-                    if(dayNo > daysLength) {
-                        let next = this.getNextMonthAndYear(month, year);
-                        week.push({day: dayNo - daysLength, month: next.month, year: next.year, otherMonth:true,
-                            today: this.isToday(today, dayNo - daysLength, next.month, next.year),
-                            selectable: this.isSelectable((dayNo - daysLength), next.month, next.year, true)});
-                    }
-                    else {
-                        week.push({day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year),
-                            selectable: this.isSelectable(dayNo, month, year, false)});
-                    }
-
-                    dayNo++;
-                }
-            }
-
-            if (this.props.showWeek) {
-                weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
-            }
-
-            dates.push(week);
-        }
-
-        return {
-            month: month,
-            year: year,
-            dates: dates,
-            weekNumbers: weekNumbers
-        };
-    }
-
-    getWeekNumber(date) {
-        let checkDate = new Date(date.getTime());
-        checkDate.setDate(checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ));
-        let time = checkDate.getTime();
-        checkDate.setMonth( 0 );
-        checkDate.setDate( 1 );
-        return Math.floor( Math.round((time - checkDate.getTime()) / 86400000 ) / 7 ) + 1;
-    }
-
-    isSelectable(day, month, year, otherMonth) {
-        let validMin = true;
-        let validMax = true;
-        let validDate = true;
-        let validDay = true;
-        let validMonth = true;
-
-        if (this.props.minDate) {
-            if(this.props.minDate.getFullYear() > year) {
-                validMin = false;
-            }
-            else if(this.props.minDate.getFullYear() === year) {
-                if(this.props.minDate.getMonth() > month) {
-                    validMin = false;
-                }
-                else if(this.props.minDate.getMonth() === month) {
-                    if(this.props.minDate.getDate() > day) {
-                        validMin = false;
-                    }
-                }
-            }
-        }
-
-        if (this.props.maxDate) {
-            if(this.props.maxDate.getFullYear() < year) {
-                validMax = false;
-            }
-            else if(this.props.maxDate.getFullYear() === year) {
-                if(this.props.maxDate.getMonth() < month) {
-                    validMax = false;
-                }
-                else if(this.props.maxDate.getMonth() === month) {
-                    if(this.props.maxDate.getDate() < day) {
-                        validMax = false;
-                    }
-                }
-            }
-        }
-
-        if (this.props.disabledDates) {
-            validDate = !this.isDateDisabled(day, month, year);
-        }
-
-        if (this.props.disabledDays) {
-            validDay = !this.isDayDisabled(day, month, year)
-        }
-
-        if (this.props.selectOtherMonths === false && otherMonth) {
-            validMonth = false;
-        }
-
-        return validMin && validMax && validDate && validDay && validMonth;
-    }
-
-    isSelectableTime(value){
-        let validMin = true;
-        let validMax = true;
-
-        if (this.props.minDate && this.props.minDate.toDateString() === value.toDateString()) {
-            if(this.props.minDate.getHours() > value.getHours()) {
-                validMin = false;
-            }
-            else if(this.props.minDate.getHours() === value.getHours()) {
-                if(this.props.minDate.getMinutes() > value.getMinutes()) {
-                    validMin = false;
-                }
-                else if(this.props.minDate.getMinutes() === value.getMinutes()) {
-                    if(this.props.minDate.getSeconds() > value.getSeconds()) {
-                        validMin = false;
-                    }
-                    else if(this.props.minDate.getSeconds() === value.getSeconds()) {
-                        if(this.props.minDate.getMilliseconds() > value.getMilliseconds()) {
-                            validMin = false;
-                        }
-                    }
-                }
-            }
-        }
-
-        if (this.props.maxDate && this.props.maxDate.toDateString() === value.toDateString()) {
-            if(this.props.maxDate.getHours() < value.getHours()) {
-                validMax = false;
-            }
-            else if(this.props.maxDate.getHours() === value.getHours()) {
-                if(this.props.maxDate.getMinutes() < value.getMinutes()) {
-                    validMax = false;
-                }
-                else if(this.props.maxDate.getMinutes() === value.getMinutes()) {
-                    if(this.props.maxDate.getSeconds() < value.getSeconds()) {
-                        validMax = false;
-                    }
-                    else if(this.props.maxDate.getSeconds() === value.getSeconds()) {
-                        if(this.props.maxDate.getMilliseconds() < value.getMilliseconds()) {
-                            validMax = false;
-                        }
-                    }
-                }
-            }
-        }
-
-        return validMin && validMax;
-    }
-
-    isSelected(dateMeta) {
-        if(this.props.value) {
-            if(this.isSingleSelection()) {
-                return this.isDateEquals(this.props.value, dateMeta);
-            }
-            else if(this.isMultipleSelection()) {
-                let selected = false;
-                for(let date of this.props.value) {
-                    selected = this.isDateEquals(date, dateMeta);
-                    if(selected) {
-                        break;
-                    }
-                }
-
-                return selected;
-            }
-            else if(this.isRangeSelection()) {
-                if(this.props.value[1])
-                    return this.isDateEquals(this.props.value[0], dateMeta) || this.isDateEquals(this.props.value[1], dateMeta) || this.isDateBetween(this.props.value[0], this.props.value[1], dateMeta);
-                else {
-                    return this.isDateEquals(this.props.value[0], dateMeta);
-                }
-
-            }
-        }
-        else {
-            return false;
-        }
-    }
-
-    isMonthSelected(month) {
-        const viewDate = this.getViewDate();
-
-        if(this.props.value && this.props.value instanceof Date)
-            return this.props.value.getDate() === 1 && this.props.value.getMonth() === month && this.props.value.getFullYear() === viewDate.getFullYear();
-        else
-            return false;
-    }
-
-    isDateEquals(value, dateMeta) {
-        if(value && value instanceof Date)
-            return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
-        else
-            return false;
-    }
-
-    isDateBetween(start, end, dateMeta) {
-        let between = false;
-        if(start && end) {
-            let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
-            return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
-        }
-
-        return between;
-    }
-
-    isSingleSelection() {
-        return this.props.selectionMode === 'single';
-    }
-
-    isRangeSelection() {
-        return this.props.selectionMode === 'range';
-    }
-
-    isMultipleSelection() {
-        return this.props.selectionMode === 'multiple';
-    }
-
-    isToday(today, day, month, year) {
-        return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
-    }
-
-    isDateDisabled(day, month, year) {
-        if (this.props.disabledDates) {
-            for (let i = 0 ; i < this.props.disabledDates.length; i++) {
-                let disabledDate = this.props.disabledDates[i];
-
-                if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
-    isDayDisabled(day, month, year) {
-        if(this.props.disabledDays) {
-            let weekday = new Date(year, month, day);
-            let weekdayNumber = weekday.getDay();
-
-            return this.props.disabledDays.indexOf(weekdayNumber) !== -1;
-        }
-
-        return false;
-    }
-
-    updateInputfield(value) {
-        if (!this.inputElement) {
-            return;
-        }
-
-        let formattedValue = '';
-
-        if (value) {
-            try {
-                if(this.isSingleSelection()) {
-                    formattedValue = this.isValidDate(value) ? this.formatDateTime(value) : '';
-                }
-                else if(this.isMultipleSelection()) {
-                    for(let i = 0; i < value.length; i++) {
-                        let selectedValue = value[i];
-                        let dateAsString = this.isValidDate(selectedValue) ? this.formatDateTime(selectedValue) : '';
-                        formattedValue += dateAsString;
-                        if(i !== (value.length - 1)) {
-                            formattedValue += ', ';
-                        }
-                    }
-                }
-                else if(this.isRangeSelection()) {
-                    if(value && value.length) {
-                        let startDate = value[0];
-                        let endDate = value[1];
-
-                        formattedValue = this.isValidDate(startDate) ? this.formatDateTime(startDate) : '';
-                        if(endDate) {
-                            formattedValue += (this.isValidDate(endDate) ? ' - ' + this.formatDateTime(endDate) : '');
-                        }
-                    }
-                }
-            }
-            catch(err) {
-                formattedValue = value;
-            }
-        }
-
-        this.inputElement.value = formattedValue;
-    }
-
-    formatDateTime(date) {
-        let formattedValue = null;
-        if(date) {
-            if(this.props.timeOnly) {
-                formattedValue = this.formatTime(date);
-            }
-            else {
-                formattedValue = this.formatDate(date, this.props.dateFormat);
-                if(this.props.showTime) {
-                    formattedValue += ' ' + this.formatTime(date);
-                }
-            }
-        }
-
-        return formattedValue;
-    }
-
-    formatDate(date, format) {
-        if (!date) {
-            return '';
-        }
-
-        let iFormat;
-        const lookAhead = (match) => {
-                const matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) === match);
-                if (matches) {
-                    iFormat++;
-                }
-                return matches;
-            },
-            formatNumber = (match, value, len) => {
-                let num = '' + value;
-                if (lookAhead(match)) {
-                    while (num.length < len) {
-                        num = '0' + num;
-                    }
-                }
-                return num;
-            },
-            formatName = (match, value, shortNames, longNames) => {
-                return (lookAhead(match) ? longNames[value] : shortNames[value]);
-            };
-        let output = '';
-        let literal = false;
-
-        if (date) {
-            for (iFormat = 0; iFormat < format.length; iFormat++) {
-                if (literal) {
-                    if (format.charAt(iFormat) === '\'' && !lookAhead('\'')) {
-                        literal = false;
-                    } else {
-                        output += format.charAt(iFormat);
-                    }
-                } else {
-                    switch (format.charAt(iFormat)) {
-                        case 'd':
-                            output += formatNumber('d', date.getDate(), 2);
-                            break;
-                        case 'D':
-                            output += formatName('D', date.getDay(), this.props.locale.dayNamesShort, this.props.locale.dayNames);
-                            break;
-                        case 'o':
-                            output += formatNumber('o',
-                                Math.round((
-                                    new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() -
-                                    new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
-                            break;
-                        case 'm':
-                            output += formatNumber('m', date.getMonth() + 1, 2);
-                            break;
-                        case 'M':
-                            output += formatName('M',date.getMonth(), this.props.locale.monthNamesShort, this.props.locale.monthNames);
-                            break;
-                        case 'y':
-                            output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
-                            break;
-                        case '@':
-                            output += date.getTime();
-                            break;
-                        case '!':
-                            output += date.getTime() * 10000 + this.ticksTo1970;
-                            break;
-                        case '\'':
-                            if (lookAhead('\'')) {
-                                output += '\'';
-                            } else {
-                                literal = true;
-                            }
-                            break;
-                        default:
-                            output += format.charAt(iFormat);
-                    }
-                }
-            }
-        }
-        return output;
-    }
-
-    formatTime(date) {
-        if (!date) {
-            return '';
-        }
-
-        let output = '';
-        let hours = date.getHours();
-        let minutes = date.getMinutes();
-        let seconds = date.getSeconds();
-        let milliseconds = date.getMilliseconds();
-
-        if (this.props.hourFormat === '12' && hours > 11 && hours !== 12) {
-            hours -= 12;
-        }
-
-        if (this.props.hourFormat === '12') {
-            output += hours === 0 ? 12 : (hours < 10) ? '0' + hours : hours;
-        }
-        else {
-            output += (hours < 10) ? '0' + hours : hours;
-        }
-        output += ':';
-        output += (minutes < 10) ? '0' + minutes : minutes;
-
-        if (this.props.showSeconds) {
-            output += ':';
-            output += (seconds < 10) ? '0' + seconds : seconds;
-        }
-
-        if (this.props.showMillisec) {
-            output += ':';
-            output += milliseconds < 100 ? (milliseconds < 10 ? '00' : '0') + milliseconds : milliseconds;
-        }
-
-        if (this.props.hourFormat === '12') {
-            output += date.getHours() > 11 ? ' PM' : ' AM';
-        }
-
-        return output;
-    }
-
-    parseValueFromString(text) {
-        if(!text || text.trim().length === 0) {
-            return null;
-        }
-
-        let value;
-
-        if(this.isSingleSelection()) {
-            value = this.parseDateTime(text);
-        }
-        else if(this.isMultipleSelection()) {
-            let tokens = text.split(',');
-            value = [];
-            for(let token of tokens) {
-                value.push(this.parseDateTime(token.trim()));
-            }
-        }
-        else if(this.isRangeSelection()) {
-            let tokens = text.split(' - ');
-            value = [];
-            for(let i = 0; i < tokens.length; i++) {
-                value[i] = this.parseDateTime(tokens[i].trim());
-            }
-        }
-
-        return value;
-    }
-
-    parseDateTime(text) {
-        let date;
-        let parts = text.split(' ');
-
-        if(this.props.timeOnly) {
-            date = new Date();
-            this.populateTime(date, parts[0], parts[1]);
-        }
-        else {
-            if(this.props.showTime) {
-                date = this.parseDate(parts[0], this.props.dateFormat);
-                this.populateTime(date, parts[1], parts[2]);
-            }
-            else {
-                date = this.parseDate(text, this.props.dateFormat);
-            }
-        }
-
-        return date;
-    }
-
-    populateTime(value, timeString, ampm) {
-        if(this.props.hourFormat === '12' && (ampm !== 'PM' && ampm !== 'AM')) {
-            throw new Error('Invalid Time');
-        }
-
-        let time = this.parseTime(timeString, ampm);
-        value.setHours(time.hour);
-        value.setMinutes(time.minute);
-        value.setSeconds(time.second);
-        value.setMilliseconds(time.millisecond);
-    }
-
-    parseTime(value, ampm) {
-        let tokens = value.split(':');
-        let validTokenLength = this.props.showSeconds ? 3 : 2;
-        validTokenLength = this.props.showMillisec ? validTokenLength + 1 : validTokenLength;
-
-        if(tokens.length !== validTokenLength || tokens[0].length !== 2 || tokens[1].length !== 2 ||
-            (this.props.showSeconds && tokens[2].length !== 2) ||
-            (this.props.showMillisec && tokens[3].length !== 3)) {
-            throw new Error('Invalid time');
-        }
-
-        let h = parseInt(tokens[0], 10);
-        let m = parseInt(tokens[1], 10);
-        let s = this.props.showSeconds ? parseInt(tokens[2], 10) : null;
-        let ms = this.props.showMillisec ? parseInt(tokens[3], 10) : null;
-
-        if(isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.props.hourFormat === '12' && h > 12) ||
-            (this.props.showSeconds && (isNaN(s) || s > 59)) ||
-            (this.props.showMillisec && (isNaN(s) || s > 1000))) {
-            throw new Error('Invalid time');
-        }
-        else {
-            if(this.props.hourFormat === '12' && h !== 12 && ampm === 'PM') {
-                h+= 12;
-            }
-
-            return {hour: h, minute: m, second: s, millisecond: ms};
-        }
-    }
-
-    // Ported from jquery-ui datepicker parseDate
-    parseDate(value, format) {
-        if(format == null || value == null) {
-            throw new Error('Invalid arguments');
-        }
-
-        value = (typeof value === "object" ? value.toString() : value + "");
-        if(value === "") {
-            return null;
-        }
-
-        let iFormat, dim, extra,
-            iValue = 0,
-            shortYearCutoff = (typeof this.props.shortYearCutoff !== "string" ? this.props.shortYearCutoff : new Date().getFullYear() % 100 + parseInt(this.props.shortYearCutoff, 10)),
-            year = -1,
-            month = -1,
-            day = -1,
-            doy = -1,
-            literal = false,
-            date,
-            lookAhead = (match) => {
-                let matches = (iFormat + 1 < format.length && format.charAt(iFormat + 1) === match);
-                if(matches) {
-                    iFormat++;
-                }
-                return matches;
-            },
-            getNumber = (match) => {
-                let isDoubled = lookAhead(match),
-                    size = (match === "@" ? 14 : (match === "!" ? 20 :
-                        (match === "y" && isDoubled ? 4 : (match === "o" ? 3 : 2)))),
-                    minSize = (match === "y" ? size : 1),
-                    digits = new RegExp("^\\d{" + minSize + "," + size + "}"),
-                    num = value.substring(iValue).match(digits);
-                if(!num) {
-                    throw new Error('Missing number at position ' + iValue);
-                }
-                iValue += num[ 0 ].length;
-                return parseInt(num[ 0 ], 10);
-            },
-            getName = (match, shortNames, longNames) => {
-                let index = -1;
-                let arr = lookAhead(match) ? longNames : shortNames;
-                let names = [];
-
-                for(let i = 0; i < arr.length; i++) {
-                    names.push([i,arr[i]]);
-                }
-                names.sort((a,b) => {
-                    return -(a[ 1 ].length - b[ 1 ].length);
-                });
-
-                for(let i = 0; i < names.length; i++) {
-                    let name = names[i][1];
-                    if(value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
-                        index = names[i][0];
-                        iValue += name.length;
-                        break;
-                    }
-                }
-
-                if(index !== -1) {
-                    return index + 1;
-                } else {
-                    throw new Error('Unknown name at position ' + iValue);
-                }
-            },
-            checkLiteral = () => {
-                if(value.charAt(iValue) !== format.charAt(iFormat)) {
-                    throw new Error('Unexpected literal at position ' + iValue);
-                }
-                iValue++;
-            };
-
-        if (this.props.view === 'month') {
-            day = 1;
-        }
-
-        for (iFormat = 0; iFormat < format.length; iFormat++) {
-            if(literal) {
-                if(format.charAt(iFormat) === "'" && !lookAhead("'")) {
-                    literal = false;
-                } else {
-                    checkLiteral();
-                }
-            } else {
-                switch (format.charAt(iFormat)) {
-                    case "d":
-                        day = getNumber("d");
-                        break;
-                    case "D":
-                        getName("D", this.props.locale.dayNamesShort, this.props.locale.dayNames);
-                        break;
-                    case "o":
-                        doy = getNumber("o");
-                        break;
-                    case "m":
-                        month = getNumber("m");
-                        break;
-                    case "M":
-                        month = getName("M", this.props.locale.monthNamesShort, this.props.locale.monthNames);
-                        break;
-                    case "y":
-                        year = getNumber("y");
-                        break;
-                    case "@":
-                        date = new Date(getNumber("@"));
-                        year = date.getFullYear();
-                        month = date.getMonth() + 1;
-                        day = date.getDate();
-                        break;
-                    case "!":
-                        date = new Date((getNumber("!") - this.ticksTo1970) / 10000);
-                        year = date.getFullYear();
-                        month = date.getMonth() + 1;
-                        day = date.getDate();
-                        break;
-                    case "'":
-                        if(lookAhead("'")) {
-                            checkLiteral();
-                        } else {
-                            literal = true;
-                        }
-                        break;
-                    default:
-                        checkLiteral();
-                }
-            }
-        }
-
-        if(iValue < value.length) {
-            extra = value.substr(iValue);
-            if(!/^\s+/.test(extra)) {
-                throw new Error('Extra/unparsed characters found in date: ' + extra);
-            }
-        }
-
-        if(year === -1) {
-            year = new Date().getFullYear();
-        } else if(year < 100) {
-            year += new Date().getFullYear() - new Date().getFullYear() % 100 +
-                (year <= shortYearCutoff ? 0 : -100);
-        }
-
-        if(doy > -1) {
-            month = 1;
-            day = doy;
-            do {
-                dim = this.getDaysCountInMonth(year, month - 1);
-                if(day <= dim) {
-                    break;
-                }
-                month++;
-                day -= dim;
-            } while (true);
-        }
-
-        date = this.daylightSavingAdjust(new Date(year, month - 1, day));
-        if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
-            throw new Error('Invalid date'); // E.g. 31/02/00
-        }
-
-        return date;
-    }
-
-    renderBackwardNavigator() {
-        return (
-            <button type="button" className="p-datepicker-prev p-link" onClick={this.onPrevButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                <span className="p-datepicker-prev-icon pi pi-chevron-left"></span>
-            </button>
-        );
-    }
-
-    renderForwardNavigator() {
-        return (
-            <button type="button" className="p-datepicker-next p-link" onClick={this.onNextButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                <span className="p-datepicker-next-icon pi pi-chevron-right"></span>
-            </button>
-        );
-    }
-
-    isInMinYear(viewDate) {
-        return this.props.minDate && this.props.minDate.getFullYear() === viewDate.getFullYear();
-    }
-
-    isInMaxYear(viewDate) {
-        return this.props.maxDate && this.props.maxDate.getFullYear() === viewDate.getFullYear();
-    }
-
-    renderTitleMonthElement(month) {
-        if (this.props.monthNavigator && this.props.view !== 'month') {
-            let viewDate = this.getViewDate();
-            let viewMonth = viewDate.getMonth();
-
-            return (
-                <select className="p-datepicker-month" onChange={this.onMonthDropdownChange} value={viewMonth}>
-                    {
-                        this.props.locale.monthNames.map((month, index) => {
-                            if ((!this.isInMinYear(viewDate) || index >= this.props.minDate.getMonth()) && (!this.isInMaxYear(viewDate) || index <= this.props.maxDate.getMonth())) {
-                                return <option key={month} value={index}>{month}</option>
-                            }
-                            return null;
-                        })
-                    }
-                </select>
-            );
-        }
-        else {
-            return (
-                <span className="p-datepicker-month">{this.props.locale.monthNames[month]}</span>
-            );
-        }
-    }
-
-    renderTitleYearElement(year) {
-        if (this.props.yearNavigator) {
-            let yearOptions = [];
-            const years = this.props.yearRange.split(':');
-            const yearStart = parseInt(years[0], 10);
-            const yearEnd = parseInt(years[1], 10);
-
-            for(let i = yearStart; i <= yearEnd; i++) {
-                yearOptions.push(i);
-            }
-
-            let viewDate = this.getViewDate();
-            let viewYear = viewDate.getFullYear();
-
-            return (
-                <select className="p-datepicker-year" onChange={this.onYearDropdownChange} value={viewYear}>
-                    {
-                        yearOptions.map(year => {
-                            if (!(this.props.minDate && this.props.minDate.getFullYear() > year) && !(this.props.maxDate && this.props.maxDate.getFullYear() < year)) {
-                                return <option key={year} value={year}>{year}</option>
-                            }
-                            return null;
-                        })
-                    }
-                </select>
-            );
-        }
-        else {
-            return (
-                <span className="p-datepicker-year">{year}</span>
-            );
-        }
-    }
-
-    renderTitle(monthMetaData) {
-        const month = this.renderTitleMonthElement(monthMetaData.month);
-        const year = this.renderTitleYearElement(monthMetaData.year);
-
-        return (
-            <div className="p-datepicker-title">
-                {month}
-                {year}
-            </div>
-        );
-    }
-
-    renderDayNames(weekDays) {
-        const dayNames = weekDays.map(weekDay =>
-            (
-                <th key={weekDay} scope="col">
-                    <span>{weekDay}</span>
-                </th>
-            )
-        );
-
-        if (this.props.showWeek) {
-            const weekHeader = (
-                <th scope="col" key={'wn'} className="p-datepicker-weekheader p-disabled">
-                    <span>{this.props.locale['weekHeader']}</span>
-                </th>
-            );
-
-            return [weekHeader, ...dayNames];
-        }
-        else {
-            return dayNames;
-        }
-    }
-
-    renderDateCellContent(date, className, groupIndex) {
-        const content = this.props.dateTemplate ? this.props.dateTemplate(date) : date.day;
-
-        return (
-            <span className={className} onClick={e => this.onDateSelect(e, date)} onKeyDown={e => this.onDateCellKeydown(e, date, groupIndex)}>
-                {content}
-            </span>
-        );
-    }
-
-    renderWeek(weekDates, weekNumber, groupIndex) {
-        const week = weekDates.map((date) => {
-            const selected = this.isSelected(date);
-            const cellClassName = classNames({'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today});
-            const dateClassName = classNames({'p-highlight': selected, 'p-disabled': !date.selectable});
-            const content = (date.otherMonth && !this.props.showOtherMonths) ? null : this.renderDateCellContent(date, dateClassName, groupIndex);
-
-            return (
-                <td key={date.day} className={cellClassName}>
-                    {content}
-                </td>
-            );
-        });
-
-        if (this.props.showWeek) {
-            const weekNumberCell = (
-                <td key={'wn' + weekNumber} className="p-datepicker-weeknumber">
-                    <span className="p-disabled">
-                        {weekNumber}
-                    </span>
-                </td>
-            );
-
-            return [weekNumberCell, ...week];
-        }
-        else {
-            return week;
-        }
-    }
-
-    renderDates(monthMetaData, groupIndex) {
-        return monthMetaData.dates.map((weekDates, index) => {
-            return (
-                <tr key={index}>
-                    {this.renderWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex)}
-                </tr>
-            );
-        });
-    }
-
-    renderDateViewGrid(monthMetaData, weekDays, groupIndex) {
-        const dayNames = this.renderDayNames(weekDays);
-        const dates = this.renderDates(monthMetaData, groupIndex);
-
-        return (
-            <div className="p-datepicker-calendar-container">
-                <table className="p-datepicker-calendar">
-                    <thead>
-                    <tr>
-                        {dayNames}
-                    </tr>
-                    </thead>
-                    <tbody>
-                    {dates}
-                    </tbody>
-                </table>
-            </div>
-        );
-    }
-
-    renderMonth(monthMetaData, index) {
-        const weekDays = this.createWeekDays();
-        const backwardNavigator = (index === 0) ? this.renderBackwardNavigator(): null;
-        const forwardNavigator = (this.props.numberOfMonths === 1) || (index === this.props.numberOfMonths -1) ? this.renderForwardNavigator(): null;
-        const title = this.renderTitle(monthMetaData);
-        const dateViewGrid = this.renderDateViewGrid(monthMetaData, weekDays, index);
-        const header = this.props.headerTemplate ? this.props.headerTemplate() : null;
-
-        return (
-            <div key={monthMetaData.month} className="p-datepicker-group">
-                <div className="p-datepicker-header">
-                    {header}
-                    {backwardNavigator}
-                    {forwardNavigator}
-                    {title}
-                </div>
-                {dateViewGrid}
-            </div>
-        );
-    }
-
-    renderMonths(monthsMetaData) {
-        return (
-            monthsMetaData.map((monthMetaData, index) => {
-                return this.renderMonth(monthMetaData, index);
-            })
-        );
-    }
-
-    renderDateView() {
-        let viewDate = this.getViewDate();
-        const monthsMetaData = this.createMonths(viewDate.getMonth(), viewDate.getFullYear());
-        const months = this.renderMonths(monthsMetaData);
-
-        return (
-            <React.Fragment>
-                {months}
-            </React.Fragment>
-        );
-    }
-
-    renderMonthViewMonth(index) {
-        const className = classNames('p-monthpicker-month', {'p-highlight': this.isMonthSelected(index)});
-        const monthName = this.props.locale.monthNamesShort[index];
-
-        return (
-            <span key={monthName} className={className} onClick={event => this.onMonthSelect(event, index)} onKeyDown={event => this.onMonthCellKeydown(event, index)}>
-                {monthName}
-            </span>
-        );
-    }
-
-    renderMonthViewMonths() {
-        let months = [];
-        for(let i = 0; i <= 11; i++) {
-            months.push(this.renderMonthViewMonth(i));
-        }
-
-        return months;
-    }
-
-    renderMonthView() {
-        const backwardNavigator = this.renderBackwardNavigator();
-        const forwardNavigator = this.renderForwardNavigator();
-        const yearElement = this.renderTitleYearElement(this.getViewDate().getFullYear());
-        const months = this.renderMonthViewMonths();
-
-        return (
-            <React.Fragment>
-                <div className="p-datepicker-header">
-                    {backwardNavigator}
-                    {forwardNavigator}
-                    <div className="p-datepicker-title">
-                        {yearElement}
-                    </div>
-                </div>
-                <div className="p-monthpicker">
-                    {months}
-                </div>
-            </React.Fragment>
-        );
-    }
-
-    renderDatePicker() {
-        if (!this.props.timeOnly) {
-            if (this.props.view === 'date') {
-                return this.renderDateView();
-            }
-            else if (this.props.view === 'month') {
-                return this.renderMonthView();
-            }
-            else {
-                return null;
-            }
-        }
-    }
-
-    renderHourPicker() {
-        let currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        let hour = currentTime.getHours();
-
-        if (this.props.hourFormat === '12') {
-            if (hour === 0)
-                hour = 12;
-            else if (hour > 11 && hour !== 12)
-                hour = hour - 12;
-        }
-
-        const hourDisplay = hour < 10 ? '0' + hour: hour;
-
-        return (
-            <div className="p-hour-picker">
-                <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 0, 1)} onMouseUp={this.onTimePickerElementMouseUp}
-                        onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                    <span className="pi pi-chevron-up"></span>
-                </button>
-                <span>{hourDisplay}</span>
-                <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 0, -1)} onMouseUp={this.onTimePickerElementMouseUp}
-                        onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                    <span className="pi pi-chevron-down"></span>
-                </button>
-            </div>
-        );
-    }
-
-    renderMinutePicker() {
-        let currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-        let minute = currentTime.getMinutes();
-        let minuteDisplay = minute < 10 ? '0' + minute: minute;
-
-        return (
-            <div className="p-minute-picker">
-                <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 1, 1)} onMouseUp={this.onTimePickerElementMouseUp}
-                        onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                    <span className="pi pi-chevron-up"></span>
-                </button>
-                <span>{minuteDisplay}</span>
-                <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 1, -1)} onMouseUp={this.onTimePickerElementMouseUp}
-                        onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                    <span className="pi pi-chevron-down"></span>
-                </button>
-            </div>
-        );
-    }
-
-    renderSecondPicker() {
-        if (this.props.showSeconds) {
-            let currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-            let second = currentTime.getSeconds();
-            let secondDisplay = second < 10 ? '0' + second: second;
-
-            return (
-                <div className="p-second-picker">
-                    <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 2, 1)} onMouseUp={this.onTimePickerElementMouseUp}
-                            onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                        <span className="pi pi-chevron-up"></span>
-                    </button>
-                    <span>{secondDisplay}</span>
-                    <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 2, -1)} onMouseUp={this.onTimePickerElementMouseUp}
-                            onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                        <span className="pi pi-chevron-down"></span>
-                    </button>
-                </div>
-            );
-        }
-
-        return null;
-    }
-
-    renderMiliSecondPicker() {
-        if (this.props.showMillisec) {
-            let currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-            let millisecond = currentTime.getMilliseconds();
-            let millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
-
-            return (
-                <div className="p-millisecond-picker">
-                    <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 3, 1)} onMouseUp={this.onTimePickerElementMouseUp}
-                            onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                        <span className="pi pi-chevron-up"></span>
-                    </button>
-                    <span>{millisecondDisplay}</span>
-                    <button type="button" className="p-link" onMouseDown={(e) => this.onTimePickerElementMouseDown(e, 3, -1)} onMouseUp={this.onTimePickerElementMouseUp}
-                            onMouseLeave={this.onTimePickerElementMouseLeave} onKeyDown={e => this.onContainerButtonKeydown(e)}>
-                        <span className="pi pi-chevron-down"></span>
-                    </button>
-                </div>
-            );
-        }
-
-        return null;
-    }
-
-    renderAmPmPicker() {
-        if (this.props.hourFormat === '12') {
-            let currentTime = (this.props.value && this.props.value instanceof Date) ? this.props.value : this.getViewDate();
-            let hour = currentTime.getHours();
-            let display = hour > 11 ? 'PM' : 'AM';
-
-            return (
-                <div className="p-ampm-picker">
-                    <button type="button" className="p-link" onClick={this.toggleAmPm}>
-                        <span className="pi pi-chevron-up"></span>
-                    </button>
-                    <span>{display}</span>
-                    <button type="button" className="p-link" onClick={this.toggleAmPm}>
-                        <span className="pi pi-chevron-down"></span>
-                    </button>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSeparator() {
-        return (
-            <div className="p-separator">
-                <span className="p-separator-spacer">
-                    <span className="pi pi-chevron-up"></span>
-                </span>
-                <span>:</span>
-                <span className="p-separator-spacer">
-                    <span className="pi pi-chevron-down"></span>
-                </span>
-            </div>
-        );
-    }
-
-    renderTimePicker() {
-        if (this.props.showTime || this.props.timeOnly) {
-            return (
-                <div className="p-timepicker">
-                    {this.renderHourPicker()}
-                    {this.renderSeparator()}
-                    {this.renderMinutePicker()}
-                    {this.props.showSeconds && this.renderSeparator()}
-                    {this.renderSecondPicker()}
-                    {this.props.showMillisec && this.renderSeparator()}
-                    {this.renderMiliSecondPicker()}
-                    {this.props.hourFormat === '12' && this.renderSeparator()}
-                    {this.renderAmPmPicker()}
-                </div>
-            )
-        }
-
-        return null;
-    }
-
-    renderInputElement() {
-        if (!this.props.inline) {
-            const className = classNames('p-inputtext p-component', this.props.inputClassName);
-
-            return (
-                <InputText ref={(el) => this.inputElement = ReactDOM.findDOMNode(el)} id={this.props.inputId} name={this.props.name} type="text" className={className} style={this.props.inputStyle}
-                           readOnly={this.props.readOnlyInput} disabled={this.props.disabled} required={this.props.required} autoComplete="off" placeholder={this.props.placeholder}
-                           onInput={this.onUserInput} onFocus={this.onInputFocus} onBlur={this.onInputBlur} onKeyDown={this.onInputKeyDown} aria-labelledby={this.props.ariaLabelledBy}/>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderButton() {
-        if (this.props.showIcon) {
-            return (
-                <Button type="button" icon={this.props.icon} onClick={this.onButtonClick} tabIndex="-1"
-                        disabled={this.props.disabled} className="p-datepicker-trigger p-calendar-button" />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderButtonBar() {
-        if (this.props.showButtonBar) {
-            return (
-                <div className="p-datepicker-buttonbar">
-                    <Button type="button" label={this.props.locale.today} onClick={this.onTodayButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={this.props.todayButtonClassName} />
-                    <Button type="button" label={this.props.locale.clear} onClick={this.onClearButtonClick} onKeyDown={e => this.onContainerButtonKeydown(e)} className={this.props.clearButtonStyleClass} />
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderFooter() {
-        if (this.props.footerTemplate) {
-            const content = this.props.footerTemplate();
-
-            return (
-                <div className="p-datepicker-footer">
-                    {content}
-                </div>
-            )
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-calendar', this.props.className, {
-            'p-calendar-w-btn': this.props.showIcon,
-            'p-calendar-timeonly': this.props.timeOnly,
-            'p-inputwrapper-filled': this.props.value
-        });
-        const panelClassName = classNames('p-datepicker p-component', this.props.panelClassName, {
-            'p-datepicker-inline': this.props.inline,
-            'p-input-overlay': !this.props.inline,
-            'p-shadow': !this.props.inline,
-            'p-disabled': this.props.disabled,
-            'p-datepicker-timeonly': this.props.timeOnly,
-            'p-datepicker-multiple-month': this.props.numberOfMonths > 1,
-            'p-datepicker-monthpicker': (this.props.view === 'month'),
-            'p-datepicker-touch-ui': this.props.touchUI
-        });
-        const input = this.renderInputElement();
-        const button = this.renderButton();
-        const datePicker = this.renderDatePicker();
-        const timePicker = this.renderTimePicker();
-        const buttonBar = this.renderButtonBar();
-        const footer = this.renderFooter();
-
-        return (
-            <span ref={(el) => this.container = el} id={this.props.id} className={className} style={this.props.style}>
-                {input}
-                {button}
-                <CalendarPanel ref={(el) => this.panel = ReactDOM.findDOMNode(el)} className={panelClassName} style={this.props.panelStyle}
-                               appendTo={this.props.appendTo}>
-                    {datePicker}
-                    {timePicker}
-                    {buttonBar}
-                    {footer}
-                </CalendarPanel>
-            </span>
-        );
-    }
-}
-
diff --git a/src/components/calendar/CalendarPanel.js b/src/components/calendar/CalendarPanel.js
deleted file mode 100644
index 0e17cf5fdd..0000000000
--- a/src/components/calendar/CalendarPanel.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-
-export class CalendarPanel extends Component {
-
-    static defaultProps = {
-        appendTo: null,
-        style: null,
-        className: null
-    };
-
-    static propTypes = {
-        appendTo: PropTypes.object,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-
-    renderElement() {
-        return (
-            <div ref={(el) => this.element = el} className={this.props.className} style={this.props.style}>
-                {this.props.children}
-            </div>
-        );
-    }
-
-    render() {
-        let element = this.renderElement();
-
-        if (this.props.appendTo)
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        else
-            return element;
-    }
-
-}
\ No newline at end of file
diff --git a/src/components/captcha/Captcha.d.ts b/src/components/captcha/Captcha.d.ts
deleted file mode 100644
index da1ad3b2fd..0000000000
--- a/src/components/captcha/Captcha.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-interface CaptchaProps {
-    id?: string;
-    siteKey?: string;
-    theme?: string;
-    type?: string;
-    size?: string;
-    tabIndex?: number;
-    language?: string;
-    onResponse?(response: any): void;
-    onExpire?(): void;
-}
-
-export class Captcha extends React.Component<CaptchaProps,any> {}
\ No newline at end of file
diff --git a/src/components/captcha/Captcha.js b/src/components/captcha/Captcha.js
deleted file mode 100644
index 36e835603a..0000000000
--- a/src/components/captcha/Captcha.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-
-export class Captcha extends Component {
-
-    static defaultProps = {
-        id: null,
-        siteKey: null,
-        theme: "light",
-        type: "image",
-        size: "normal",
-        tabIndex: 0,
-        language: "en",
-        onResponse: null,
-        onExpire: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        sitekey: PropTypes.string,
-        theme: PropTypes.string,
-        type: PropTypes.string,
-        size: PropTypes.string,
-        tabindex: PropTypes.number,
-        language: PropTypes.string,
-        onResponse: PropTypes.func,
-        onExpire: PropTypes.func
-    }
-
-    init() {
-        this._instance = (window).grecaptcha.render(this.targetEL, {
-            'sitekey': this.props.siteKey,
-            'theme': this.props.theme,
-            'type': this.props.type,
-            'size': this.props.size,
-            'tabindex': this.props.tabIndex,
-            'hl': this.props.language,
-            'callback': (response) => {this.recaptchaCallback(response)},
-            'expired-callback': () => {this.recaptchaExpiredCallback()}
-        });
-    }
-
-    reset() {
-        if(this._instance === null)
-            return;
-        
-        (window).grecaptcha.reset(this._instance);
-    }
-    
-    getResponse() {
-        if (this._instance === null)
-            return null;
-        
-        return (window).grecaptcha.getResponse(this._instance);
-    }
-    
-    recaptchaCallback(response) {
-        if(this.props.onResponse) {
-            this.props.onResponse({
-                response: response
-            });
-        }
-    }
-
-    recaptchaExpiredCallback() {
-        if(this.props.onExpire) {
-            this.props.onExpire();
-        }
-    }
-    
-    addRecaptchaScript() {
-        this.recaptchaScript = null;
-        if (!(window).grecaptcha) {
-            var head = document.head || document.getElementsByTagName('head')[0];
-            this.recaptchaScript = document.createElement('script');
-            this.recaptchaScript.src = "https://www.google.com/recaptcha/api.js?render=explicit";
-            this.recaptchaScript.async = true;
-            this.recaptchaScript.defer = true;
-            head.appendChild(this.recaptchaScript);
-        }
-    }
-
-    componentDidMount() {
-        this.addRecaptchaScript();
-
-        if ((window).grecaptcha) {
-            this.init(); 
-        }
-        else {
-            setTimeout(() => {
-                if (!(window).grecaptcha) {
-                    console.warn("Recaptcha is not loaded");
-                    return;
-                }
-                this.init();
-            },500);
-        }
-    }
-
-    componentWillUnmount() {
-        if(this.recaptchaScript) {
-            this.recaptchaScript.parentNode.removeChild(this.recaptchaScript);
-        }
-    }
-
-    render() {
-        return <div id={this.props.id} ref={(el) => this.targetEL = ReactDOM.findDOMNode(el)}></div>
-    }
-}
\ No newline at end of file
diff --git a/src/components/card/Card.css b/src/components/card/Card.css
deleted file mode 100644
index 2c0d223d98..0000000000
--- a/src/components/card/Card.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.p-card-header img {
-    width: 100%;
-}
-
-.p-card-body {
-    padding: 1em;
-}
-
-.p-card-title {
-    font-size: 1.5em;
-    font-weight: bold;
-    margin-bottom: .5em;
-}
-
-.p-card-subtitle {
-    opacity: .7;
-    margin-bottom: .5em;
-    margin-top: -.25em;
-    font-weight: bold;
-}
-
-.p-card-footer {
-    padding-top: 1em;
-}
\ No newline at end of file
diff --git a/src/components/card/Card.d.ts b/src/components/card/Card.d.ts
deleted file mode 100644
index be81afd8d2..0000000000
--- a/src/components/card/Card.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-interface CardProps {
-    id?: string;
-    header?: any;
-    footer?: any;
-    title?: string;
-    subTitle?: string;
-    style?: object;
-    className?: string;
-}
-
-export class Card extends React.Component<CardProps,any> {}
\ No newline at end of file
diff --git a/src/components/card/Card.js b/src/components/card/Card.js
deleted file mode 100644
index bb683772e1..0000000000
--- a/src/components/card/Card.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class Card extends Component {
-
-    static defaultProps = {
-        id: null,
-        header: null,
-        footer: null,
-        title: null,
-        subTitle: null,
-        style: null,
-        className: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        title: PropTypes.string,
-        subTitle: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-
-    renderHeader(){
-        return <div className="p-card-header">
-                    {this.props.header}
-                </div>;
-    }
-    
-    renderBody(){
-        let title, subTitle, footer, children;
-
-        if(this.props.title) {
-            title = <div className="p-card-title">{this.props.title}</div>;
-        }
-        if(this.props.subTitle) {
-            subTitle = <div className="p-card-subtitle">{this.props.subTitle}</div>;
-        }
-        if(this.props.footer) {
-            footer = <div className="p-card-footer"> {this.props.footer}</div>;
-        }
-        if(this.props.children) {
-            children = <div className="p-card-content"> {this.props.children} </div>;
-        }
-        return (
-            <div className="p-card-body">
-                {title}
-                {subTitle}
-                {children}
-                {footer}
-            </div>
-        );
-    }
-
-    render(){
-
-        let header, body;
-        let className = classNames('p-card p-component',this.props.className);
-
-        if(this.props.header) {
-            header = this.renderHeader();
-        }
-        body = this.renderBody();
-
-        return(
-            <div className={className} style={this.props.style}>
-                {header}
-                {body}
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/carousel/Carousel.css b/src/components/carousel/Carousel.css
deleted file mode 100644
index 5156314aa1..0000000000
--- a/src/components/carousel/Carousel.css
+++ /dev/null
@@ -1,92 +0,0 @@
-.p-carousel {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
-
-.p-carousel-content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    overflow: auto;
-    padding: 0 .5em;
-}
-
-.p-carousel-prev,
-.p-carousel-next {
-    align-self: center;
-    text-align: center;
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: 2.5em;
-    height: 2.5em;
-}
-
-.p-carousel-prev span,
-.p-carousel-next span {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-carousel-container {
-    display: flex;
-    flex-direction: row;
-    padding: 0 .1em;
-}
-
-.p-carousel-items-content {
-    overflow: hidden;
-    width: 100%;
-}
-
-.p-carousel-header,
-.p-carousel-footer {
-    padding: 0 .5em;
-    z-index: 1;
-}
-
-.p-carousel-items-container {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-}
-
-.p-carousel-items-container .p-carousel-item {
-    width: 100%;
-    box-sizing: border-box;
-    overflow: auto;
-}
-
-.p-carousel-dots-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin: .5em;
-}
-
-/* Vertical */
-.p-carousel-vertical .p-carousel-container {
-    flex-direction: column;
-    width: 100%;
-}
-
-.p-carousel-vertical .p-carousel-items-container {
-    flex-direction: column;
-    height: 100%;
-}
-
-.p-carousel-vertical .p-carousel-dots-container {
-    margin: .75em 0;
-}
-
-/* Keyboard Support */
-.p-items-hidden .p-carousel-item {
-    visibility: hidden;
-}
-
-.p-items-hidden .p-carousel-item.p-carousel-item-active {
-    visibility: visible;
-}
\ No newline at end of file
diff --git a/src/components/carousel/Carousel.d.ts b/src/components/carousel/Carousel.d.ts
deleted file mode 100644
index 84a6a7fb7c..0000000000
--- a/src/components/carousel/Carousel.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-interface CarouselProps {
-    id?: string;
-    value?: any;
-    page?: number;
-    header?: any;
-    footer?: any;
-    style?: object;
-    className?: string;
-    itemTemplate?: any;
-    circular?: boolean;
-    autoplayInterval?: number;
-    numVisible?: number;
-    numScroll?: number;
-    responsiveOptions?: any;
-    orientation?: string;
-    verticalViewPortHeight?: string;
-    contentClassName?: string;
-    containerClassName?: string;
-    dotsContainerClassName?: string;
-    onPageChange?(e: {page: number}): void;
-}
-
-export class Carousel extends React.Component<CarouselProps,any> {}
diff --git a/src/components/carousel/Carousel.js b/src/components/carousel/Carousel.js
deleted file mode 100644
index 96f86a246c..0000000000
--- a/src/components/carousel/Carousel.js
+++ /dev/null
@@ -1,702 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-import DomHandler from '../utils/DomHandler';
-
-class CarouselItem extends Component {
-
-    static defaultProps = {
-        template: null,
-        item: null,
-        active: false,
-        start: false,
-        end: false,
-        className: null
-    }
-
-    static propTypes = {
-        template: PropTypes.func,
-        item: PropTypes.any,
-        active: PropTypes.bool,
-        start: PropTypes.bool,
-        end: PropTypes.bool,
-        className: PropTypes.string
-    }
-
-    render() {
-        const content = this.props.template(this.props.item);
-        const itemClassName = classNames(this.props.className, 'p-carousel-item', {
-            'p-carousel-item-active': this.props.active,
-            'p-carousel-item-start': this.props.start,
-            'p-carousel-item-end': this.props.end
-        });
-
-        return (
-            <div className={itemClassName}>
-                {content}
-            </div>
-        );
-    }
-}
-
-export class Carousel extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        page: 0,
-        header: null,
-        footer: null,
-        style: null,
-        className: null,
-        itemTemplate: null,
-        circular: false,
-        autoplayInterval: 0,
-        numVisible: 1,
-        numScroll: 1,
-        responsiveOptions: null,
-        orientation: "horizontal",
-        verticalViewPortHeight: "300px",
-        contentClassName: null,
-        containerClassName: null,
-        dotsContainerClassName: null,
-        onPageChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        page: PropTypes.number,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        itemTemplate: PropTypes.any,
-        circular: PropTypes.bool,
-        autoplayInterval: PropTypes.number,
-        numVisible: PropTypes.number,
-        numScroll: PropTypes.number,
-        responsiveOptions: PropTypes.array,
-        orientation: PropTypes.string,
-        verticalViewPortHeight: PropTypes.string,
-        contentClassName: PropTypes.string,
-        containerClassName: PropTypes.string,
-        dotsContainerClassName: PropTypes.string,
-        onPageChange: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            numVisible: props.numVisible,
-            numScroll: props.numScroll,
-            totalShiftedItems: (props.page * props.numScroll) * -1
-        }
-
-        if (!this.props.onPageChange) {
-            this.state = {
-                ...this.state,
-                page: props.page
-            }
-        }
-
-        this.navBackward = this.navBackward.bind(this);
-        this.navForward = this.navForward.bind(this);
-        this.onTransitionEnd = this.onTransitionEnd.bind(this);
-        this.onTouchStart = this.onTouchStart.bind(this);
-        this.onTouchMove = this.onTouchMove.bind(this);
-        this.onTouchEnd = this.onTouchEnd.bind(this);
-        this.totalDots = 0;
-        this.remainingItems = 0;
-        this.allowAutoplay = !!this.props.autoplayInterval;
-        this.circular = this.props.circular || this.allowAutoplay;
-        this.swipeThreshold = 20;
-
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    step(dir, page) {
-        let totalShiftedItems = this.state.totalShiftedItems;
-        const isCircular = this.isCircular();
-
-        if (page != null) {
-            totalShiftedItems = (this.state.numScroll * page) * -1;
-
-            if (isCircular) {
-                totalShiftedItems -= this.state.numVisible;
-            }
-
-            this.isRemainingItemsAdded = false;
-        }
-        else {
-            totalShiftedItems += (this.state.numScroll * dir);
-            if (this.isRemainingItemsAdded) {
-                totalShiftedItems += this.remainingItems - (this.state.numScroll * dir);
-                this.isRemainingItemsAdded = false;
-            }
-
-            let originalShiftedItems = isCircular ? (totalShiftedItems + this.state.numVisible) : totalShiftedItems;
-            page = Math.abs(Math.floor(originalShiftedItems / this.state.numScroll));
-        }
-
-        if (isCircular && this.state.page === (this.totalDots - 1) && dir === -1) {
-            totalShiftedItems = -1 * (this.props.value.length + this.state.numVisible);
-            page = 0;
-        }
-        else if (isCircular && this.state.page === 0 && dir === 1) {
-            totalShiftedItems = 0;
-            page = (this.totalDots - 1);
-        }
-        else if (page === (this.totalDots - 1) && this.remainingItems > 0) {
-            totalShiftedItems += ((this.remainingItems * -1) - (this.state.numScroll * dir));
-            this.isRemainingItemsAdded = true;
-        }
-
-        if (this.itemsContainer) {
-            DomHandler.removeClass(this.itemsContainer, 'p-items-hidden');
-            this.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100/ this.state.numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.state.numVisible)}%, 0, 0)`;
-            this.itemsContainer.style.transition = 'transform 500ms ease 0s';
-        }
-
-        if (this.props.onPageChange) {
-            this.setState({
-                totalShiftedItems
-            });
-
-            this.props.onPageChange({
-                page
-            })
-        }
-        else {
-            this.setState({
-                page,
-                totalShiftedItems
-            });
-        }
-    }
-
-    calculatePosition() {
-        if (this.itemsContainer && this.responsiveOptions) {
-            let windowWidth = window.innerWidth;
-            let matchedResponsiveData = {
-                numVisible: this.props.numVisible,
-                numScroll: this.props.numScroll
-            };
-
-            for (let i = 0; i < this.responsiveOptions.length; i++) {
-                let res = this.responsiveOptions[i];
-
-                if (parseInt(res.breakpoint, 10) >= windowWidth) {
-                    matchedResponsiveData = res;
-                }
-            }
-
-            let state = {};
-            if (this.state.numScroll !== matchedResponsiveData.numScroll) {
-                let page = this.getPage();
-                page = Math.floor((page * this.state.numScroll) / matchedResponsiveData.numScroll);
-
-                let totalShiftedItems = (matchedResponsiveData.numScroll * page) * -1;
-
-                if (this.isCircular()) {
-                    totalShiftedItems -= matchedResponsiveData.numVisible;
-                }
-
-                state = {
-                    totalShiftedItems,
-                    numScroll: matchedResponsiveData.numScroll
-                };
-
-                if (this.props.onPageChange) {
-                    this.props.onPageChange({
-                        page
-                    })
-                }
-                else {
-                    state = {
-                        ...state,
-                        page
-                    };
-                }
-            }
-
-            if (this.state.numVisible !== matchedResponsiveData.numVisible) {
-                state = {
-                    ...state,
-                    numVisible: matchedResponsiveData.numVisible
-                };
-            }
-
-            if (Object.keys(state).length) {
-                this.setState(state);
-            }
-        }
-    }
-
-    navBackward(e, page) {
-        if (this.circular || this.getPage() !== 0) {
-            this.step(1, page);
-        }
-
-        this.allowAutoplay = false;
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    navForward(e, page) {
-        if (this.circular || this.getPage() < (this.totalDots - 1)) {
-            this.step(-1, page);
-        }
-
-        this.allowAutoplay = false;
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    onDotClick(e, page) {
-        let currentPage = this.getPage();
-
-        if (page > currentPage) {
-            this.navForward(e, page);
-        }
-        else if (page < currentPage) {
-            this.navBackward(e, page);
-        }
-    }
-
-    onTransitionEnd() {
-        if (this.itemsContainer) {
-            DomHandler.addClass(this.itemsContainer, 'p-items-hidden');
-            this.itemsContainer.style.transition = '';
-
-            if ((this.state.page === 0 || this.state.page === (this.totalDots - 1)) && this.isCircular()) {
-                this.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${this.state.totalShiftedItems * (100/ this.state.numVisible)}%, 0)` : `translate3d(${this.state.totalShiftedItems * (100/ this.state.numVisible)}%, 0, 0)`;
-            }
-        }
-    }
-
-    onTouchStart(e) {
-        let touchobj = e.changedTouches[0];
-
-        this.startPos = {
-            x: touchobj.pageX,
-            y: touchobj.pageY
-        };
-    }
-
-    onTouchMove(e) {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    onTouchEnd(e) {
-        let touchobj = e.changedTouches[0];
-
-        if (this.isVertical()) {
-            this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
-        }
-        else {
-            this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
-        }
-    }
-
-    changePageOnTouch(e, diff) {
-        if (Math.abs(diff) > this.swipeThreshold) {
-            if (diff < 0) {           // left
-                this.navForward(e);
-            }
-            else {                    // right
-                this.navBackward(e);
-            }
-        }
-    }
-
-    bindDocumentListeners() {
-        if (!this.documentResizeListener) {
-            this.documentResizeListener = () => {
-                this.calculatePosition();
-            };
-
-            window.addEventListener('resize', this.documentResizeListener);
-        }
-    }
-
-    unbindDocumentListeners() {
-        if(this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-
-    isVertical() {
-        return this.props.orientation === 'vertical';
-    }
-
-    isCircular() {
-        return this.circular && this.props.value.length >= this.state.numVisible;
-    }
-
-    getPage() {
-        return this.props.onPageChange ? this.props.page : this.state.page;
-    }
-
-    getTotalDots() {
-        return this.props.value ? Math.ceil((this.props.value.length - this.state.numVisible) / this.state.numScroll) + 1 : 0;
-    }
-
-    isAutoplay() {
-        return this.props.autoplayInterval && this.allowAutoplay;
-    }
-
-    startAutoplay() {
-        this.interval = setInterval(() => {
-            if(this.state.page === (this.totalDots - 1)) {
-                this.step(-1, 0);
-            }
-            else {
-                this.step(-1, this.state.page + 1);
-            }
-        },
-        this.props.autoplayInterval);
-    }
-
-    stopAutoplay() {
-        if (this.interval) {
-            clearInterval(this.interval);
-        }
-    }
-
-    createStyle() {
-        if (!this.carouselStyle) {
-            this.carouselStyle = document.createElement('style');
-            this.carouselStyle.type = 'text/css';
-            document.body.appendChild(this.carouselStyle);
-        }
-
-        let innerHTML = `
-            #${this.id} .p-carousel-item {
-                flex: 1 0 ${ (100/ this.state.numVisible) }%
-            }
-        `;
-
-        if (this.props.responsiveOptions) {
-            this.responsiveOptions = [...this.props.responsiveOptions];
-            this.responsiveOptions.sort((data1, data2) => {
-                const value1 = data1.breakpoint;
-                const value2 = data2.breakpoint;
-                let result = null;
-
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-
-                return -1 * result;
-            });
-
-            for (let i = 0; i < this.responsiveOptions.length; i++) {
-                let res = this.responsiveOptions[i];
-
-                innerHTML += `
-                    @media screen and (max-width: ${res.breakpoint}) {
-                        #${this.id} .p-carousel-item {
-                            flex: 1 0 ${ (100/ res.numVisible) }%
-                        }
-                    }
-                `
-            }
-        }
-
-        this.carouselStyle.innerHTML = innerHTML;
-    }
-
-    componentDidMount() {
-        this.createStyle();
-        this.calculatePosition();
-
-        if (this.props.responsiveOptions) {
-            this.bindDocumentListeners();
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const isCircular = this.isCircular();
-        let stateChanged = false;
-        let totalShiftedItems = this.state.totalShiftedItems;
-
-        if (this.props.autoplayInterval) {
-            this.stopAutoplay();
-        }
-
-        if (prevState.numScroll !== this.state.numScroll || prevState.numVisible !== this.state.numVisible || prevProps.value.length !== this.props.value.length) {
-            this.remainingItems = (this.props.value.length - this.state.numVisible) % this.state.numScroll;
-
-            let page = this.getPage();
-            if (this.totalDots !== 0 && page >= this.totalDots) {
-                page = this.totalDots - 1;
-
-                if (this.props.onPageChange) {
-                    this.props.onPageChange({
-                        page
-                    })
-                }
-                else {
-                    this.setState({
-                        page
-                    });
-                }
-
-                stateChanged = true;
-            }
-
-            totalShiftedItems = (page * this.state.numScroll) * -1;
-            if (isCircular) {
-                totalShiftedItems -= this.state.numVisible;
-            }
-
-            if (page === (this.totalDots - 1) && this.remainingItems > 0) {
-                totalShiftedItems += (-1 * this.remainingItems) + this.state.numScroll;
-                this.isRemainingItemsAdded = true;
-            }
-            else {
-                this.isRemainingItemsAdded = false;
-            }
-
-            if (totalShiftedItems !== this.state.totalShiftedItems) {
-                this.setState({
-                    totalShiftedItems
-                })
-
-                stateChanged = true;
-            }
-
-            this.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100/ this.state.numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.state.numVisible)}%, 0, 0)`;
-        }
-
-        if (isCircular) {
-            if (this.state.page === 0) {
-                totalShiftedItems = -1 * this.state.numVisible;
-            }
-            else if (totalShiftedItems === 0) {
-                totalShiftedItems = -1 * this.props.value.length;
-                if (this.remainingItems > 0) {
-                    this.isRemainingItemsAdded = true;
-                }
-            }
-
-            if (totalShiftedItems !== this.state.totalShiftedItems) {
-                this.setState({
-                    totalShiftedItems
-                });
-                stateChanged = true;
-            }
-        }
-
-        if (!stateChanged && this.isAutoplay()) {
-            this.startAutoplay();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.responsiveOptions) {
-            this.unbindDocumentListeners();
-        }
-
-        if (this.props.autoplayInterval) {
-            this.stopAutoplay();
-        }
-    }
-
-    renderItems() {
-        if (this.props.value && this.props.value.length) {
-            const isCircular = this.isCircular();
-            let clonedItemsForStarting = null;
-            let clonedItemsForFinishing = null;
-
-            if (isCircular) {
-                let clonedElements = null;
-
-                clonedElements = this.props.value.slice(-1 * this.state.numVisible);
-                clonedItemsForStarting = clonedElements.map((item, index) => {
-                    let isActive = (this.state.totalShiftedItems * -1) === (this.props.value.length + this.state.numVisible),
-                    start = index === 0,
-                    end = index === (clonedElements.length - 1);
-
-                    return <CarouselItem key={index + '_scloned'} className="p-carousel-item-cloned" template={this.props.itemTemplate} item={item} active={isActive} start={start} end={end}/>
-                });
-
-                clonedElements = this.props.value.slice(0, this.state.numVisible);
-                clonedItemsForFinishing = clonedElements.map((item, index) => {
-                    let isActive = this.state.totalShiftedItems === 0,
-                    start = index === 0,
-                    end = index === (clonedElements.length - 1);
-
-                    return <CarouselItem key={index + '_fcloned'} className="p-carousel-item-cloned" template={this.props.itemTemplate} item={item} active={isActive} start={start} end={end}/>
-                });
-            }
-
-            let items = this.props.value.map((item, index) => {
-                            let firstIndex = isCircular ? (-1 * (this.state.totalShiftedItems + this.state.numVisible)) : (this.state.totalShiftedItems * -1),
-                            lastIndex = firstIndex + this.state.numVisible - 1,
-                            isActive = firstIndex <= index && lastIndex >= index,
-                            start = firstIndex === index,
-                            end = lastIndex === index;
-
-                            return <CarouselItem key={index} template={this.props.itemTemplate} item={item} active={isActive} start={start} end={end}/>
-                        });
-
-            return (
-                <React.Fragment>
-                    {clonedItemsForStarting}
-                    {items}
-                    {clonedItemsForFinishing}
-                </React.Fragment>
-            );
-        }
-    }
-
-    renderHeader() {
-        if (this.props.header) {
-            return (<div className="p-carousel-header">
-                        {this.props.header}
-                    </div>);
-        }
-
-        return null;
-    }
-
-    renderFooter() {
-        if (this.props.footer) {
-            return (<div className="p-carousel-footer">
-                        {this.props.footer}
-                    </div>);
-        }
-
-        return null;
-    }
-
-    renderContent() {
-        const items = this.renderItems();
-        const height = this.isVertical() ? this.props.verticalViewPortHeight : 'auto';
-        const backwardNavigator = this.renderBackwardNavigator();
-        const forwardNavigator = this.renderForwardNavigator();
-        const containerClassName = classNames('p-carousel-container', this.props.containerClassName);
-
-        return (
-            <div className={containerClassName}>
-                {backwardNavigator}
-                <div className="p-carousel-items-content" style={{'height': height}}>
-                    <div ref={(el) => this.itemsContainer = el} className="p-carousel-items-container" onTransitionEnd={this.onTransitionEnd}
-                        onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove} onTouchEnd={this.onTouchEnd}>
-                        {items}
-                    </div>
-                </div>
-                {forwardNavigator}
-            </div>
-        );
-    }
-
-    renderBackwardNavigator() {
-        let isDisabled = (!this.circular || this.props.value.length < this.state.numVisible) && this.getPage() === 0;
-        let buttonClassName = classNames('p-carousel-prev p-button', {
-            'p-disabled': isDisabled
-        }),
-        iconClassName = classNames('p-carousel-prev-icon pi', {
-            'pi-chevron-left': !this.isVertical(),
-            'pi-chevron-up': this.isVertical()
-        });
-
-        return (
-            <button type="button" className={buttonClassName} onClick={this.navBackward} disabled={isDisabled}>
-                <span className={iconClassName}></span>
-            </button>
-        );
-    }
-
-    renderForwardNavigator() {
-        let isDisabled = (!this.circular || this.props.value.length < this.state.numVisible) && (this.getPage() === (this.totalDots - 1) || this.totalDots === 0);
-        let buttonClassName = classNames('p-carousel-next p-button', {
-            'p-disabled': isDisabled
-        }),
-        iconClassName = classNames('p-carousel-next-icon pi', {
-            'pi-chevron-right': !this.isVertical(),
-            'pi-chevron-down': this.isVertical()
-        });
-
-        return (
-            <button type="button" className={buttonClassName} onClick={this.navForward} disabled={isDisabled}>
-                <span className={iconClassName}></span>
-            </button>
-        );
-    }
-
-    renderDot(index) {
-        let isActive = this.getPage() === index,
-        dotItemClassName = classNames('p-carousel-dot-item', {
-            'p-highlight': isActive
-        }),
-        iconClassName = classNames('p-carousel-dot-icon pi', {
-            'pi-circle-on': isActive,
-            'pi-circle-off': !isActive
-        });
-
-        return (
-            <li className={dotItemClassName} key={'p-carousel-dot-' + index}>
-                <button type="button" className="p-link" onClick={(e) => this.onDotClick(e, index)}>
-                    <span className={iconClassName}></span>
-                </button>
-            </li>
-        );
-    }
-
-    renderDots() {
-        const dotsContainerClassName = classNames('p-carousel-dots-container p-reset', this.props.dotsContainerClassName);
-        let dots = [];
-
-        for (let i = 0; i < this.totalDots; i++) {
-            dots.push(this.renderDot(i));
-        }
-
-        return (
-            <ul className={dotsContainerClassName}>
-                {dots}
-            </ul>
-        );
-    }
-
-    render() {
-        const className = classNames('p-carousel p-component', {
-            'p-carousel-vertical': this.isVertical(),
-            'p-carousel-horizontal': !this.isVertical()
-        }, this.props.className);
-        const contentClassName = classNames('p-carousel-content', this.props.contentClassName);
-
-        this.totalDots = this.getTotalDots();
-        const content = this.renderContent();
-        const dots = this.renderDots();
-        const header = this.renderHeader();
-        const footer = this.renderFooter();
-
-        return (
-            <div id={this.id} className={className} style={this.props.style}>
-                {header}
-                <div className={contentClassName}>
-                    {content}
-                    {dots}
-                </div>
-                {footer}
-            </div>
-        );
-    }
-}
diff --git a/src/components/chart/Chart.css b/src/components/chart/Chart.css
deleted file mode 100644
index 4f85e1436d..0000000000
--- a/src/components/chart/Chart.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.p-chart {
-    position: relative
-}
\ No newline at end of file
diff --git a/src/components/chart/Chart.d.ts b/src/components/chart/Chart.d.ts
deleted file mode 100644
index e9a5035582..0000000000
--- a/src/components/chart/Chart.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-interface ChartProps {
-    id?: string;
-    type?: string;
-    data?: object;
-    options?: object;
-    width?: string;
-    height?: string;
-    style?: object;
-    className?: string;
-}
-
-export class Chart extends React.Component<ChartProps,any> {}
\ No newline at end of file
diff --git a/src/components/chart/Chart.js b/src/components/chart/Chart.js
deleted file mode 100644
index a1d8d8b226..0000000000
--- a/src/components/chart/Chart.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import * as ChartJS from 'chart.js';
-import classNames from 'classnames';
-
-export class Chart extends Component {
-
-    static defaultProps = {
-        id: null,
-        type: null,
-        data: null,
-        options: null,
-        width: null,
-        height: null,
-        style: null,
-        className: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        type: PropTypes.string,
-        data: PropTypes.object,
-        options: PropTypes.object,
-        width: PropTypes.string,
-        height: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-
-    initChart() {
-        this.chart = new ChartJS.Chart(this.canvas, {
-            type: this.props.type,
-            data: this.props.data,
-            options: this.props.options
-        });
-    }
-
-    getCanvas() {
-        return this.canvas;
-    }
-    
-    getBase64Image() {
-        return this.chart.toBase64Image();
-    }
-    
-    generateLegend() {
-        if(this.chart) {
-            this.chart.generateLegend();
-        }
-    }
-    
-    refresh() {
-        if(this.chart) {
-            this.chart.update();
-        }
-    }
-    
-    reinit() {
-        if(this.chart) {
-            this.chart.destroy();
-            this.initChart();
-        }
-    }
-
-    shouldComponentUpdate(nextProps){	
-        if(nextProps.data === this.props.data) {	
-            return false;	
-        }
-        return true;	
-    }
-
-    componentDidMount() {
-        this.initChart();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        this.reinit();
-    }
-
-    componentWillUnmount() {
-        if(this.chart) {
-            this.chart.destroy();
-            this.chart = null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-chart', this.props.className),
-            style = Object.assign({
-                width: this.props.width,
-                height: this.props.height
-            }, this.props.style);
-
-        return (
-            <div id={this.props.id} style={style} className={className}>
-                <canvas ref={(el) => {this.canvas = el;}} width={this.props.width} height={this.props.height}></canvas>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/checkbox/Checkbox.css b/src/components/checkbox/Checkbox.css
deleted file mode 100644
index e3546a9208..0000000000
--- a/src/components/checkbox/Checkbox.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.p-checkbox {
-    display: inline-block;
-    cursor: pointer;
-    vertical-align: middle;
-    margin-right: .25em;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-}
-
-.p-checkbox .p-checkbox-box {
-    width: 1.125em;
-    height: 1.125em;
-    line-height: 1.125em;
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    text-align: center;
-}
-
-.p-checkbox .p-checkbox-icon {
-    display: block;
-}
-
-.p-checkbox-label {
-    vertical-align: middle;  
-}
-
-.p-checkbox + label {
-    vertical-align: middle;
-}
\ No newline at end of file
diff --git a/src/components/checkbox/Checkbox.d.ts b/src/components/checkbox/Checkbox.d.ts
deleted file mode 100644
index 69f7c0af19..0000000000
--- a/src/components/checkbox/Checkbox.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface CheckboxProps {
-    id?: string;
-    inputId?: string;
-    value?: any;
-    name?: string;
-    checked?: boolean;
-    style?: object;
-    className?: string;
-    disabled?: boolean;
-    required?: boolean;
-    readOnly?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    onMouseDown?(event: Event): void;
-    onContextMenu?(event: Event): void;
-    onChange?(e: {originalEvent: Event, value: any, checked: boolean, target: {type: string, name: string, id: string, value: any, checked: boolean}}): void;
-}
-
-export class Checkbox extends React.Component<CheckboxProps,any> {}
diff --git a/src/components/checkbox/Checkbox.js b/src/components/checkbox/Checkbox.js
deleted file mode 100644
index 744c8ffbb1..0000000000
--- a/src/components/checkbox/Checkbox.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-
-export class Checkbox extends Component {
-
-    static defaultProps = {
-        id: null,
-        inputId: null,
-        value: null,
-        name: null,
-        checked: false,
-        style: null,
-        className: null,
-        disabled: false,
-        required: false,
-        readOnly: false,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null,
-        onMouseDown: null,
-        onContextMenu: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        inputId: PropTypes.string,
-        value: PropTypes.any,
-        name: PropTypes.string,
-        checked: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        required: PropTypes.bool,
-        readOnly: PropTypes.bool,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func,
-        onMouseDown: PropTypes.func,
-        onContextMenu: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-
-        this.onClick = this.onClick.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(e) {
-        if (!this.props.disabled && !this.props.readOnly && this.props.onChange) {
-            this.props.onChange({
-                originalEvent: e,
-                value: this.props.value,
-                checked: !this.props.checked,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    type: 'checkbox',
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: this.props.value,
-                    checked: !this.props.checked,
-                }
-            });
-
-            this.input.checked = !this.props.checked;
-            this.input.focus();
-
-            e.preventDefault();
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        this.input.checked = this.props.checked;
-
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    onFocus() {
-        this.setState({focused: true});
-    }
-
-    onBlur() {
-        this.setState({focused: false});
-    }
-
-    onKeyDown(event) {
-        if (event.key === 'Enter') {
-            this.onClick(event);
-            event.preventDefault();
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        let containerClass = classNames('p-checkbox p-component', this.props.className);
-        let boxClass = classNames('p-checkbox-box p-component', {'p-highlight': this.props.checked, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused});
-        let iconClass = classNames('p-checkbox-icon p-c', {'pi pi-check': this.props.checked});
-
-        return (
-            <div ref={(el) => this.element = el} id={this.props.id} className={containerClass} style={this.props.style} onClick={this.onClick} onContextMenu={this.props.onContextMenu} onMouseDown={this.props.onMouseDown}>
-                <div className="p-hidden-accessible">
-                    <input type="checkbox" aria-labelledby={this.props.ariaLabelledBy} ref={el => this.input = el} id={this.props.inputId} name={this.props.name} defaultChecked={this.props.checked}
-                             onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} readOnly={this.props.readOnly} required={this.props.required}/>
-                </div>
-                <div className={boxClass} ref={el => this.box = el} role="checkbox" aria-checked={this.props.checked}>
-                    <span className={iconClass}></span>
-                </div>
-            </div>
-        )
-    }
-}
diff --git a/src/components/chips/Chips.css b/src/components/chips/Chips.css
deleted file mode 100644
index 165f3a118e..0000000000
--- a/src/components/chips/Chips.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.p-chips {
-    display: inline-block;
-}
-
-.p-chips > ul.p-inputtext {
-    clear: left;
-    cursor: text;
-    list-style-type: none;
-    margin: 0;
-    overflow: hidden;
-    padding: 0 .25em;
-}
-
-.p-chips-token {
-    cursor: default;
-    display: inline-block;
-    vertical-align: middle;
-    overflow: hidden;
-    padding: .125em .5em;
-    white-space: nowrap;
-    position: relative;
-    margin-right: .125em;
-    border: 0 none;
-    font-size: .9em;
-}
-
-.p-chips-token .p-chips-token-label {
-    display: block;
-    margin-right: 2em;
-}
-
-.p-chips > .p-disabled .p-chips-token-label {
-    margin-right: 0;
-}
-
-.p-chips-token .p-chips-token-icon {
-    margin-top: -.5em;
-    position: absolute;
-    right: 0.2em;
-    top: 50%;
-    cursor: pointer;
-}
-
-.p-chips-input-token {
-    display: inline-block;
-    vertical-align: middle;
-    list-style-type: none;
-    margin: 0 0 0 .125em;
-    padding: .25em .25em .25em 0;
-}
-
-.p-chips-input-token .p-inputtext {
-    border: 0 none;
-    width: 10em;
-    outline: medium none;
-    background-color: transparent;
-    margin: 0;
-    padding: 0;
-    box-shadow: none;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-}
-
-.p-fluid .p-chips {
-    display: block;
-}
\ No newline at end of file
diff --git a/src/components/chips/Chips.d.ts b/src/components/chips/Chips.d.ts
deleted file mode 100755
index 7c5d9562de..0000000000
--- a/src/components/chips/Chips.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface ChipsProps {
-    id?: string;
-    name?: string;
-    placeholder?: string;
-    value?: any[];
-    max?: number;
-    disabled?: boolean;
-    style?: object;
-    className?: string;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    separator?: string;
-    allowDuplicate?: boolean;
-    itemTemplate?(item: any): JSX.Element | undefined;
-    onAdd?(e: {originalEvent: Event, value: any}): void;
-    onRemove?(e: {originalEvent: Event, value: any}): void;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-    onFocus?(event: Event): void;
-    onBlur?(event: Event): void;
-}
-
-export class Chips extends React.Component<ChipsProps,any> {}
diff --git a/src/components/chips/Chips.js b/src/components/chips/Chips.js
deleted file mode 100644
index 3218053e39..0000000000
--- a/src/components/chips/Chips.js
+++ /dev/null
@@ -1,303 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import {InputText} from '../inputtext/InputText';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-
-export class Chips extends Component {
-
-    static defaultProps = {
-        id: null,
-        name: null,
-        placeholder: null,
-        value: null,
-        max: null,
-        disabled: null,
-        style: null,
-        className: null,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        separator: null,
-        allowDuplicate: true,
-        itemTemplate: null,
-        onAdd: null,
-        onRemove: null,
-        onChange: null,
-        onFocus: null,
-        onBlur: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        name: PropTypes.string,
-        placeholder: PropTypes.string,
-        value: PropTypes.array,
-        max: PropTypes.number,
-        disabled: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        separator: PropTypes.string,
-        allowDuplicate: PropTypes.bool,
-        itemTemplate: PropTypes.func,
-        onAdd: PropTypes.func,
-        onRemove: PropTypes.func,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.focusInput = this.focusInput.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onPaste = this.onPaste.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        let isValueSame = this.props.value && prevProps.value.length === this.props.value.length;
-        if (this.props.tooltip) {
-            if (prevProps.tooltip !== this.props.tooltip) {
-                if (this.tooltip)
-                    this.tooltip.updateContent(this.props.tooltip);
-                else
-                    this.renderTooltip();
-            }
-            else if (!isValueSame && this.tooltip) {
-                this.tooltip.deactivate();
-                this.tooltip.activate();
-            }
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.inputElement,
-            targetContainer: this.listElement,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    removeItem(event, index) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        let values = [...this.props.value];
-        const removedItem = values.splice(index, 1);
-
-        if (this.props.onRemove) {
-            this.props.onRemove({
-                originalEvent: event,
-                value: removedItem
-            });
-        }
-
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: values,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value : values
-                }
-            });
-        }
-    }
-
-    addItem(event, item, preventDefault) {
-        if (item && item.trim().length) {
-            let values = this.props.value ? [...this.props.value] : [];
-
-            if (this.props.allowDuplicate || values.indexOf(item) === -1) {
-                values.push(item);
-
-                if (this.props.onAdd) {
-                    this.props.onAdd({
-                        originalEvent: event,
-                        value: item
-                    });
-                }
-            }
-            this.updateInput(event, values, preventDefault)
-        }
-
-    }
-
-    focusInput() {
-        this.inputElement.focus();
-    }
-
-    onKeyDown(event) {
-        const inputValue = event.target.value;
-
-        switch(event.which) {
-            //backspace
-            case 8:
-                if (this.inputElement.value.length === 0 && this.props.value && this.props.value.length > 0) {
-                    this.removeItem(event, this.props.value.length - 1);
-                }
-            break;
-
-            //enter
-            case 13:
-                if (inputValue && inputValue.trim().length && (!this.props.max || this.props.max > this.props.value.length)) {
-                    this.addItem(event, inputValue, true);
-                }
-            break;
-
-            default:
-                if (this.isMaxedOut()) {
-                    event.preventDefault();
-                }
-                else if (this.props.separator) {
-                    if (this.props.separator === ',' && event.which === 188) {
-                        this.addItem(event, inputValue, true);
-                    }
-                }
-            break;
-        }
-    }
-
-    updateInput(event, items, preventDefault) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: items,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value : items
-                }
-            });
-        }
-
-        this.inputElement.value = '';
-
-        if (preventDefault) {
-            event.preventDefault();
-        }
-    }
-
-    onPaste(event) {
-        if (this.props.separator) {
-            let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
-
-            if (pastedData) {
-                let values = this.props.value || [];
-                let pastedValues = pastedData.split(this.props.separator);
-                pastedValues = pastedValues.filter(val => ((this.props.allowDuplicate || values.indexOf(val) === -1) && val.trim().length));
-                values = [...values, ...pastedValues];
-
-                this.updateInput(event, values, true)
-            }
-
-        }
-    }
-
-    onFocus(event) {
-        DomHandler.addClass(this.listElement, 'p-focus');
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-    }
-
-    onBlur(event) {
-        DomHandler.removeClass(this.listElement, 'p-focus');
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-    }
-
-    isMaxedOut() {
-        return this.props.max && this.props.value && this.props.max === this.props.value.length;
-    }
-
-    renderItem(value, index) {
-        const content = this.props.itemTemplate ? this.props.itemTemplate(value) : value;
-        const icon = this.props.disabled ? null : <span className="p-chips-token-icon pi pi-fw pi-times" onClick={(event) => this.removeItem(event, index)}></span>;
-
-        return (
-            <li key={index} className="p-chips-token p-highlight">
-                {icon}
-                <span className="p-chips-token-label">{content}</span>
-            </li>
-        );
-    }
-
-    renderInputElement() {
-        return (
-            <li className="p-chips-input-token">
-                <InputText ref={(el) => this.inputElement = ReactDOM.findDOMNode(el)} placeholder={this.props.placeholder} type="text" name={this.props.name} disabled={this.props.disabled||this.isMaxedOut()}
-                            onKeyDown={this.onKeyDown} onPaste={this.onPaste} onFocus={this.onFocus} onBlur={this.onBlur} aria-labelledby={this.props.ariaLabelledBy}/>
-            </li>
-        );
-    }
-
-    renderItems() {
-        if (this.props.value) {
-            return this.props.value.map((value, index) => {
-                return this.renderItem(value, index);
-            });
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderList() {
-        const className = classNames('p-inputtext', {'p-disabled': this.props.disabled});
-        const items = this.renderItems();
-        const inputElement = this.renderInputElement();
-
-        if (this.props.value) {
-            return (
-                <ul ref={(el) => this.listElement = el} className={className} onClick={this.focusInput}>
-                    {items}
-                    {inputElement}
-                </ul>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-chips p-component', this.props.className);
-        const list = this.renderList();
-
-        return (
-            <div ref={(el) => this.element = el} id={this.props.id} className={className} style={this.props.style}>
-                {list}
-            </div>
-        );
-    }
-}
diff --git a/src/components/colorpicker/ColorPicker.css b/src/components/colorpicker/ColorPicker.css
deleted file mode 100644
index 89021ef1c5..0000000000
--- a/src/components/colorpicker/ColorPicker.css
+++ /dev/null
@@ -1,87 +0,0 @@
-.p-colorpicker {
-    display: inline-block;
-} 
-
-.p-colorpicker-dragging {
-    cursor: pointer;
-} 
-
-.p-colorpicker-overlay {
-    position: relative;
-} 
-
-.p-colorpicker-panel {
-    position: relative;
-    width: 193px;
-    height: 166px;
-    background-color: #323232;
-    border-color: #191919;
-}
-
-.p-colorpicker-overlay-panel {
-    display: none;
-    position: absolute;
-}
-
-.p-colorpicker-preview {
-    width: 2em;
-    cursor: pointer;
-}
-
-.p-colorpicker-panel .p-colorpicker-content {
-    position: relative;
-}
-
-.p-colorpicker-panel .p-colorpicker-color-selector {
-    width: 150px;
-    height: 150px;
-    top: 8px;
-    left: 8px;
-    position: absolute;
-}
-
-.p-colorpicker-panel .p-colorpicker-color {
-     width: 150px;
-     height: 150px;
-     background: transparent url("http://github.com/images/color.png") no-repeat left top; 
-}
-
-.p-colorpicker-panel .p-colorpicker-color-handle {
-     position: absolute;
-     top: 0px;
-     left: 150px;
-     border-radius: 100%;
-     width: 10px;
-     height: 10px;
-     border: 1px solid #ffffff;
-     margin: -5px 0 0 -5px;
-     cursor: pointer;
-}
-
-.p-colorpicker-panel .p-colorpicker-hue {
-    background: transparent url("http://github.com/images/hue.png") no-repeat left top; 
-    width: 17px;
-    height: 150px;
-    top: 8px;
-    left: 167px;
-    position: absolute;
-    opacity: .85;
-}
-
-.p-colorpicker-panel .p-colorpicker-hue-handle {
-     position: absolute;
-     top: 150px;
-     left: 0px;
-     width: 21px;
-     margin-left: -2px;
-     margin-top: -5px;
-     height: 10px;
-     border: 2px solid #ffffff;
-     opacity: .85;
-     cursor: pointer;
- }
- 
- .p-colorpicker-panel.p-disabled .p-colorpicker-hue-handle,
- .p-colorpicker-panel.p-disabled .p-colorpicker-color-handle  {
-      opacity: .5;
- }
\ No newline at end of file
diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
deleted file mode 100644
index 9c4d596145..0000000000
--- a/src/components/colorpicker/ColorPicker.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface ColorPickerProps {
-    id?: string;
-    value?: any;
-    style?: object;
-    className?: string;
-    defaultColor?: string;
-    inline?: boolean;
-    format?: string;
-    appendTo?: any;
-    disabled?: boolean;
-    tabindex?: string;
-    inputId?: string;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    onChange?(value: any, target: {name: string, id: string, value: any}): void;
-}
-
-export class ColorPicker extends React.Component<ColorPickerProps,any> {}
\ No newline at end of file
diff --git a/src/components/colorpicker/ColorPicker.js b/src/components/colorpicker/ColorPicker.js
deleted file mode 100644
index c502ee6440..0000000000
--- a/src/components/colorpicker/ColorPicker.js
+++ /dev/null
@@ -1,573 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-import {ColorPickerPanel} from './ColorPickerPanel';
-import Tooltip from "../tooltip/Tooltip";
-
-export class ColorPicker extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        style: null,
-        className: null,
-        defaultColor: 'ff0000',
-        inline: false,
-        format: "hex",
-        appendTo: null,
-        disabled: false,
-        tabIndex: null,
-        inputId: null,
-        tooltip: null,
-        tooltipOptions: null,
-        onChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        defaultColor: PropTypes.string,
-        inline: PropTypes.bool,
-        format: PropTypes.string,
-        appendTo: PropTypes.any,
-        disabled: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        inputId: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        onChange: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.onInputClick = this.onInputClick.bind(this);
-        this.onInputKeydown = this.onInputKeydown.bind(this);
-    }
-
-    onHueMousedown(event) {
-        if(this.props.disabled) {
-            return;
-        }
-
-        this.hueDragging = true;
-        this.bindDocumentMouseMoveListener();
-        this.bindDocumentMouseUpListener();
-        this.pickHue(event);
-        DomHandler.addClass(this.container, 'p-colorpicker-dragging');
-    }
-
-    pickHue(event) {
-        let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
-        this.hsbValue = this.validateHSB({
-            h: Math.floor(360 * (150 - Math.max(0, Math.min(150, (event.pageY - top)))) / 150),
-            s: 100,
-            b: 100
-        });
-
-        this.updateColorSelector();
-        this.updateHue();
-        this.updateModel();
-    }
-
-    onColorMousedown(event) {
-        if(this.props.disabled) {
-            return;
-        }
-
-        this.colorDragging = true;
-        this.bindDocumentMouseMoveListener();
-        this.bindDocumentMouseUpListener();
-        this.pickColor(event);
-        DomHandler.addClass(this.container, 'p-colorpicker-dragging');
-    }
-
-    pickColor(event) {
-        let rect = this.colorSelector.getBoundingClientRect();
-        let top = rect.top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
-        let left = rect.left + document.body.scrollLeft;
-        let saturation = Math.floor(100 * (Math.max(0, Math.min(150, (event.pageX - left)))) / 150);
-        let brightness = Math.floor(100 * (150 - Math.max(0, Math.min(150, (event.pageY - top)))) / 150);
-        this.hsbValue = this.validateHSB({
-            h: this.hsbValue.h,
-            s: saturation,
-            b: brightness
-        });
-
-        this.updateColorHandle();
-        this.updateInput();
-        this.updateModel();
-    }
-
-    updateModel() {
-        switch(this.props.format) {
-            case 'hex':
-                this.onChange(this.HSBtoHEX(this.hsbValue));
-            break;
-
-            case 'rgb':
-                this.onChange(this.HSBtoRGB(this.hsbValue));
-            break;
-
-            case 'hsb':
-                this.onChange(this.hsbValue);
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    toHSB(value) {
-        let hsb;
-
-        if (value) {
-            switch (this.props.format) {
-                case 'hex':
-                    hsb = this.HEXtoHSB(value);
-                    break;
-
-                case 'rgb':
-                    hsb = this.RGBtoHSB(value);
-                    break;
-
-                case 'hsb':
-                    hsb = value;
-                    break;
-
-                default:
-                    break;
-            }
-        }
-        else {
-            hsb = this.HEXtoHSB(this.props.defaultColor);
-        }
-
-        return hsb;
-    }
-
-    updateHSBValue(value) {
-        this.hsbValue = this.toHSB(value);
-    }
-
-    areHSBEqual(val1, val2) {
-        return val1.h === val2.h && val1.s === val2.s && val1.b === val2.b;
-    }
-
-    onChange(value) {
-        if(this.props.onChange) {
-            this.props.onChange({
-                value: value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: value
-                }
-            })
-        }
-    }
-
-    updateColorSelector() {
-        var hsbValue = this.validateHSB({
-            h: this.hsbValue.h,
-            s: 100,
-            b: 100
-        });
-        this.colorSelector.style.backgroundColor = '#' + this.HSBtoHEX(hsbValue);
-    }
-
-    updateColorHandle() {
-        this.colorHandle.style.left = Math.floor(150 * this.hsbValue.s / 100) + 'px';
-        this.colorHandle.style.top = Math.floor(150 * (100 - this.hsbValue.b) / 100) + 'px';
-    }
-
-    updateHue() {
-        this.hueHandle.style.top = Math.floor(150 - (150 * this.hsbValue.h / 360)) + 'px';
-    }
-
-    updateInput() {
-        if(this.input) {
-            this.input.style.backgroundColor = '#' + this.HSBtoHEX(this.hsbValue);
-        }
-    }
-
-    show() {
-        this.panel.element.style.zIndex = String(DomHandler.generateZIndex());
-        this.panel.element.style.display = 'block';
-
-        setTimeout(() => {
-            DomHandler.addClass(this.panel.element, 'p-input-overlay-visible');
-            DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-        }, 1);
-
-        this.alignPanel();
-
-        this.bindDocumentClickListener();
-    }
-
-    hide() {
-        DomHandler.addClass(this.panel.element, 'p-input-overlay-hidden');
-        DomHandler.removeClass(this.panel.element, 'p-input-overlay-visible');
-        this.unbindDocumentClickListener();
-
-        setTimeout(() => {
-            this.panel.element.style.display = 'none';
-            DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-        }, 150);
-
-    }
-
-    onInputClick() {
-        this.togglePanel();
-    }
-
-    togglePanel() {
-        if(!this.panel.element.offsetParent)
-            this.show();
-        else
-            this.hide();
-    }
-
-    onInputKeydown(event) {
-        switch(event.which) {
-            //space
-            case 32:
-                this.togglePanel();
-                event.preventDefault();
-            break;
-
-            //escape and tab
-            case 27:
-            case 9:
-                this.hide();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    bindDocumentClickListener() {
-        if(!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if(this.isOutsideClicked(event)) {
-                    this.hide();
-                    this.unbindDocumentClickListener();
-                }
-            };
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if(this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target)
-            || (this.panel && this.panel.element && this.panel.element.contains(event.target)));
-    }
-
-    bindDocumentMouseMoveListener() {
-        if(!this.documentMouseMoveListener) {
-            this.documentMouseMoveListener = this.onDocumentMouseMove.bind(this);
-            document.addEventListener('mousemove', this.documentMouseMoveListener);
-        }
-    }
-
-    onDocumentMouseMove(event) {
-        if (this.colorDragging) {
-            this.pickColor(event);
-        }
-
-        if (this.hueDragging) {
-            this.pickHue(event);
-        }
-    }
-
-    unbindDocumentMouseMoveListener() {
-        if (this.documentMouseMoveListener) {
-            document.removeEventListener('mousemove', this.documentMouseMoveListener);
-            this.documentMouseMoveListener = null;
-        }
-    }
-
-    bindDocumentMouseUpListener() {
-        if(!this.documentMouseUpListener) {
-            this.documentMouseUpListener = this.onDocumentMouseUp.bind(this);
-            document.addEventListener('mouseup', this.documentMouseUpListener);
-        }
-    }
-
-    onDocumentMouseUp() {
-        this.colorDragging = false;
-        this.hueDragging = false;
-        DomHandler.removeClass(this.container, 'p-colorpicker-dragging');
-        this.unbindDocumentMouseMoveListener();
-        this.unbindDocumentMouseUpListener();
-    }
-
-    unbindDocumentMouseUpListener() {
-        if (this.documentMouseUpListener) {
-            document.removeEventListener('mouseup', this.documentMouseUpListener);
-            this.documentMouseUpListener = null;
-        }
-    }
-
-    validateHSB(hsb) {
-        return {
-            h: Math.min(360, Math.max(0, hsb.h)),
-            s: Math.min(100, Math.max(0, hsb.s)),
-            b: Math.min(100, Math.max(0, hsb.b))
-        };
-    }
-
-    validateRGB(rgb) {
-        return {
-            r: Math.min(255, Math.max(0, rgb.r)),
-            g: Math.min(255, Math.max(0, rgb.g)),
-            b: Math.min(255, Math.max(0, rgb.b))
-        };
-    }
-
-    validateHEX(hex) {
-        var len = 6 - hex.length;
-        if (len > 0) {
-            var o = [];
-            for (var i=0; i<len; i++) {
-                o.push('0');
-            }
-            o.push(hex);
-            hex = o.join('');
-        }
-        return hex;
-    }
-
-    HEXtoRGB(hex) {
-        let hexValue = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
-        return {r: hexValue >> 16, g: (hexValue & 0x00FF00) >> 8, b: (hexValue & 0x0000FF)};
-    }
-
-    HEXtoHSB(hex) {
-        return this.RGBtoHSB(this.HEXtoRGB(hex));
-    }
-
-    RGBtoHSB(rgb) {
-        var hsb = {
-            h: 0,
-            s: 0,
-            b: 0
-        };
-        var min = Math.min(rgb.r, rgb.g, rgb.b);
-        var max = Math.max(rgb.r, rgb.g, rgb.b);
-        var delta = max - min;
-        hsb.b = max;
-        hsb.s = max !== 0 ? 255 * delta / max : 0;
-        if (hsb.s !== 0) {
-            if (rgb.r === max) {
-                hsb.h = (rgb.g - rgb.b) / delta;
-            } else if (rgb.g === max) {
-                hsb.h = 2 + (rgb.b - rgb.r) / delta;
-            } else {
-                hsb.h = 4 + (rgb.r - rgb.g) / delta;
-            }
-        } else {
-            hsb.h = -1;
-        }
-        hsb.h *= 60;
-        if (hsb.h < 0) {
-            hsb.h += 360;
-        }
-        hsb.s *= 100/255;
-        hsb.b *= 100/255;
-        return hsb;
-    }
-
-    HSBtoRGB(hsb) {
-        var rgb = {
-            r: null, g: null, b: null
-        };
-        var h = Math.round(hsb.h);
-        var s = Math.round(hsb.s*255/100);
-        var v = Math.round(hsb.b*255/100);
-        if(s === 0) {
-            rgb = {
-                r: v,
-                g: v,
-                b: v
-            }
-        }
-        else {
-            var t1 = v;
-            var t2 = (255-s)*v/255;
-            var t3 = (t1-t2)*(h%60)/60;
-            if(h===360) h = 0;
-            if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
-            else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
-            else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
-            else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
-            else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
-            else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
-            else {rgb.r=0; rgb.g=0;	rgb.b=0}
-        }
-        return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
-    }
-
-    RGBtoHEX(rgb) {
-        var hex = [
-            rgb.r.toString(16),
-            rgb.g.toString(16),
-            rgb.b.toString(16)
-        ];
-
-        for(var key in hex) {
-            if(hex[key].length === 1) {
-                hex[key] = '0' + hex[key];
-            }
-        }
-
-        return hex.join('');
-    }
-
-    HSBtoHEX(hsb) {
-        return this.RGBtoHEX(this.HSBtoRGB(hsb));
-    }
-
-    componentDidMount() {
-        this.updateHSBValue(this.props.value);
-        this.updateUI();
-
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        this.updateUI();
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-        this.unbindDocumentMouseMoveListener();
-        this.unbindDocumentMouseUpListener();
-
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    shouldComponentUpdate(nextProps) {
-        if(this.colorDragging) {
-            return false;
-        }
-        else {
-            let oldValue = this.hsbValue;
-            this.updateHSBValue(nextProps.value);
-            let newValue = this.toHSB(nextProps.value);
-            let equals = (newValue.h === oldValue.h && newValue.s === oldValue.s && newValue.b === oldValue.b);
-
-            return !equals;
-        }
-    }
-
-    updateUI() {
-        this.updateHue();
-        this.updateColorHandle();
-        this.updateInput();
-        this.updateColorSelector();
-    }
-
-    alignPanel() {
-        if (this.props.appendTo) {
-            this.panel.element.style.minWidth = DomHandler.getWidth(this.container) + 'px';
-            DomHandler.absolutePosition(this.panel.element, this.container);
-        }
-        else {
-            DomHandler.relativePosition(this.panel.element, this.container);
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    renderColorSelector() {
-        return (
-            <div ref={(el) => this.colorSelector = el} className="p-colorpicker-color-selector" onMouseDown={this.onColorMousedown.bind(this)}>
-                <div className="p-colorpicker-color">
-                    <div ref={(el) => this.colorHandle = el} className="p-colorpicker-color-handle"></div>
-                </div>
-            </div>
-        );
-    }
-
-    renderHue() {
-        return (
-            <div ref={(el) => this.hueView = el} className="p-colorpicker-hue" onMouseDown={this.onHueMousedown.bind(this)}>
-                <div ref={(el) => this.hueHandle = el} className="p-colorpicker-hue-handle"></div>
-            </div>
-        );
-    }
-
-    renderContent() {
-        let colorSelector = this.renderColorSelector();
-        let hue = this.renderHue();
-
-        return (
-            <div className="p-colorpicker-content">
-                {colorSelector}
-                {hue}
-            </div>
-        );
-    }
-
-    renderInput() {
-        if (!this.props.inline) {
-            let inputClassName = classNames('p-colorpicker-preview p-inputtext', {
-                'p-disabled': this.props.disabled
-            });
-
-            return (
-                <input ref={(el) => this.input = el} type="text" className={inputClassName} readOnly="readonly" id={this.props.inputId} tabIndex={this.props.tabIndex} disabled={this.props.disabled}
-                    onClick={this.onInputClick} onKeyDown={this.onInputKeydown} />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-colorpicker p-component', this.props.className, {'p-colorpicker-overlay': !this.props.inline});
-        let content = this.renderContent();
-        let input = this.renderInput();
-
-        return (
-            <div ref={(el) => this.container = el} id={this.props.id} style={this.props.style} className={className}>
-                {input}
-                <ColorPickerPanel ref={(el) => this.panel = el} appendTo={this.props.appendTo} inline={this.props.inline} disabled={this.props.disabled}>
-                    {content}
-                </ColorPickerPanel>
-            </div>
-        );
-    }
-}
diff --git a/src/components/colorpicker/ColorPickerPanel.d.ts b/src/components/colorpicker/ColorPickerPanel.d.ts
deleted file mode 100644
index 7971025f72..0000000000
--- a/src/components/colorpicker/ColorPickerPanel.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-interface ColorPickerPanelProps {
-    appendTo?: any;
-    inline?: boolean;
-    disabled?: string;
-    onClick?(): void;
-}
-
-export class ColorPicker extends React.Component<ColorPickerPanelProps,any> {}
\ No newline at end of file
diff --git a/src/components/colorpicker/ColorPickerPanel.js b/src/components/colorpicker/ColorPickerPanel.js
deleted file mode 100644
index 17f3d6a661..0000000000
--- a/src/components/colorpicker/ColorPickerPanel.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-
-export class ColorPickerPanel extends Component {
-
-    static defaultProps = {
-        appendTo: null,
-        inline: false,
-        disabled: false,
-        onClick: null
-    }
-
-    static propTypes = {
-        appendTo: PropTypes.any,
-        inline: PropTypes.bool,
-        disabled: PropTypes.bool,
-        onClick: PropTypes.func
-    }
-
-    renderElement() {
-        let className = classNames('p-colorpicker-panel', {
-            'p-colorpicker-overlay-panel p-input-overlay': !this.props.inline,
-            'p-disabled': this.props.disabled
-        });
-
-        return (
-            <div ref={(el) => this.element = el} className={className} onClick={this.props.onClick}>
-                {this.props.children}
-            </div>
-        );
-    }
-
-    render() {
-        let element = this.renderElement();
-
-        if (this.props.appendTo) {
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        }
-        else {
-            return element;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/components/colorpicker/images/color.png b/src/components/colorpicker/images/color.png
deleted file mode 100644
index 561cdd9c59..0000000000
Binary files a/src/components/colorpicker/images/color.png and /dev/null differ
diff --git a/src/components/colorpicker/images/hue.png b/src/components/colorpicker/images/hue.png
deleted file mode 100644
index 8efa252578..0000000000
Binary files a/src/components/colorpicker/images/hue.png and /dev/null differ
diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
deleted file mode 100644
index 9cb9d525c2..0000000000
--- a/src/components/column/Column.d.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react';
-
-interface ColumnProps {
-    columnKey?: string;
-    field?: string;
-    sortField?: string;
-    filterField?: string;
-    header?: any;
-    body?: any;
-    loadingBody?: any;
-    footer?: any;
-    sortable?: boolean;
-    filter?: boolean;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterType?: string;
-    filterMaxLength?: number;
-    filterElement?: object;
-    filterHeaderStyle?: object;
-    filterHeaderClassName?: string;
-    style?: object;
-    className?: string;
-    headerStyle?: object;
-    headerClassName?: string;
-    bodyStyle?: object;
-    bodyClassName?: string;
-    footerStyle?: object;
-    footerClassName?: string;
-    expander?: boolean;
-    frozen?: boolean;
-    selectionMode?: string;
-    colSpan?: number;
-    rowSpan?: number;
-    rowReorder?: boolean;
-    rowReorderIcon?: string;
-    editorValidatorEvent?: string;
-    rowEditor?: boolean;
-    exportable?: boolean;
-    reorderable?: boolean;
-    onEditorSubmit?(props: any): void;
-    onEditorCancel?(props: any): void;
-    excludeGlobalFilter?: boolean;
-    sortFunction?(e: {field: string, order: number}): void;
-    filterFunction?(value: any, filter: any): void;
-    editor?(props: any): JSX.Element | undefined;
-    editorValidator?(props: any): boolean;
-}
-
-export class Column extends React.Component<ColumnProps,any> {}
diff --git a/src/components/column/Column.js b/src/components/column/Column.js
deleted file mode 100644
index 1cc1f28e3a..0000000000
--- a/src/components/column/Column.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-
-export class Column extends Component {
-
-    static defaultProps = {
-        columnKey: null,
-        field: null,
-        sortField: null,
-        filterField: null,
-        header: null,
-        body: null,
-        loadingBody: null,
-        footer: null,
-        sortable: false,
-        sortFunction: null,
-        filter: false,
-        filterMatchMode: 'startsWith',
-        filterPlaceholder: null,
-        filterType: 'text',
-        filterMaxLength: null,
-        filterElement: null,
-        filterFunction: null,
-        filterHeaderStyle: null,
-        filterHeaderClassName: null,
-        style: null,
-        className: null,
-        headerStyle: null,
-        headerClassName: null,
-        bodyStyle: null,
-        bodyClassName: null,
-        footerStyle: null,
-        footerClassName: null,
-        expander: false,
-        frozen: false,
-        selectionMode: null,
-        colSpan: null,
-        rowSpan: null,
-        editor: null,
-        editorValidator: null,
-        editorValidatorEvent: 'click',
-        onEditorSubmit: null,
-        onEditorCancel: null,
-        excludeGlobalFilter: false,
-        rowReorder: false,
-        rowReorderIcon: 'pi pi-bars',
-        rowEditor: false,
-        exportable: true,
-        reorderable: true
-    }
-
-    static propTypes = {
-        columnKey: PropTypes.string,
-        field: PropTypes.string,
-        sortField: PropTypes.string,
-        filterField: PropTypes.string,
-        header: PropTypes.any,
-        body: PropTypes.any,
-        loadingBody: PropTypes.func,
-        footer: PropTypes.any,
-        sortable: PropTypes.any,
-        sortFunction: PropTypes.func,
-        filter: PropTypes.bool,
-        filterMatchMode: PropTypes.string,
-        filterPlaceholder: PropTypes.string,
-        filterType: PropTypes.string,
-        filterMaxLength: PropTypes.number,
-        filterElement: PropTypes.object,
-        filterFunction: PropTypes.func,
-        filterHeaderStyle: PropTypes.object,
-        filterHeaderClassName: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        headerStyle: PropTypes.object,
-        headerClassName: PropTypes.string,
-        bodyStyle: PropTypes.object,
-        bodyClassName: PropTypes.string,
-        footerStyle: PropTypes.object,
-        footerClassName: PropTypes.string,
-        expander: PropTypes.bool,
-        frozen: PropTypes.bool,
-        selectionMode: PropTypes.string,
-        colSpan: PropTypes.number,
-        rowSpan: PropTypes.number,
-        editor: PropTypes.func,
-        editorValidator: PropTypes.func,
-        onEditorSubmit: PropTypes.func,
-        onEditorCancel: PropTypes.func,
-        editorValidatorEvent: PropTypes.string,
-        excludeGlobalFilter: PropTypes.bool,
-        rowReorder: PropTypes.bool,
-        rowReorderIcon: PropTypes.string,
-        rowEditor: PropTypes.bool,
-        exportable: PropTypes.bool,
-        reorderable: PropTypes.bool
-    }
-}
\ No newline at end of file
diff --git a/src/components/columngroup/ColumnGroup.d.ts b/src/components/columngroup/ColumnGroup.d.ts
deleted file mode 100644
index c6a71c21af..0000000000
--- a/src/components/columngroup/ColumnGroup.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface ColumnGroupProps {
-}
-
-export class ColumnGroup extends React.Component<ColumnGroupProps,any> {}
diff --git a/src/components/columngroup/ColumnGroup.js b/src/components/columngroup/ColumnGroup.js
deleted file mode 100644
index a99fa4b7df..0000000000
--- a/src/components/columngroup/ColumnGroup.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Component } from 'react';
-
-export class ColumnGroup extends Component {
-    
-}
\ No newline at end of file
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
deleted file mode 100644
index 2a05580525..0000000000
--- a/src/components/common/Common.css
+++ /dev/null
@@ -1,200 +0,0 @@
-.p-component, .p-component * {
-    box-sizing: border-box;
-}
-.p-hidden {
-    display: none;
-}
-.p-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-.p-hidden-accessible input,
-.p-hidden-accessible select {
-    transform: scale(0);
-}
-.p-reset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    text-decoration: none;
-    font-size: 100%;
-    list-style: none;
-}
-.p-disabled {
-    cursor: default !important;
-}
-.p-disabled a {
-    cursor: default !important;
-}
-.p-component-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-.p-overflow-hidden {
-    overflow: hidden;
-}
-.p-unselectable-text {
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
-}
-.p-scrollbar-measure {
-    width: 100px;
-    height: 100px;
-    overflow: scroll;
-    position: absolute;
-    top: -9999px;
-}
-.p-clearfix:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-@-webkit-keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-@keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
-input[type="file"]::-webkit-file-upload-button,
-button {
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-}
-
-/* Overlay Animations */
-.p-input-overlay {
-    -webkit-transform: translateY(5%);
-    -ms-transform: translateY(5%);
-    transform: translateY(5%);
-    opacity: 0;
-    -webkit-transition: transform .3s, opacity .3s;
-    transition: transform .3s, opacity .3s;
-}
-
-.p-input-overlay-visible {
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-    opacity: 1;
-}
-
-.p-input-overlay-hidden {
-    opacity: 0;
-    -webkit-transform: translateY(5%);
-    -ms-transform: translateY(5%);
-    transform: translateY(5%);
-    -webkit-transition: transform .3s, opacity .15s;
-    transition: transform .3s, opacity .15s;
-}
-
-.p-menu-overlay {
-    -webkit-transform: translateY(5%);
-    -ms-transform: translateY(5%);
-    transform: translateY(5%);
-    opacity: 0;
-    -webkit-transition: transform .3s, opacity .3s;
-    transition: transform .3s, opacity .3s;
-}
-
-.p-menu-overlay-visible {
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0);
-    opacity: 1;
-}
-
-.p-menu-overlay-hidden {
-    opacity: 0;
-    -webkit-transform: translateY(5%);
-    -ms-transform: translateY(5%);
-    transform: translateY(5%);
-    -webkit-transition: transform .3s, opacity .15s;
-    transition: transform .3s, opacity .15s;
-}
-
-.p-link {
-    text-align: left;
-    background-color: transparent;
-    background: transparent;
-	margin: 0;
-	padding: 0;
-	border: none;
-	cursor: pointer;
-}
-
-/* Toggleable content with slide animation */
-.p-toggleable-content-collapsed {
-    display: none;
-}
-
-.p-toggleable-content-enter {
-    max-height: 0;
-    display: block;
-}
-
-.p-toggleable-content-enter-active {
-    max-height: 1000px;
-    overflow: hidden;
-    transition: max-height cubic-bezier(0.86, 0, 0.07, 1) 400ms;
-}
-
-.p-toggleable-content-enter-done {
-    display: block;
-}
-
-.p-toggleable-content-exit {
-    max-height: 1000px;
-    display: block;
-}
-
-.p-toggleable-content-exit-active {
-    max-height: 0;
-    display: block;
-    overflow: hidden;
-    transition: max-height cubic-bezier(0.86, 0, 0.07, 1) 250ms;
-}
-
-.p-toggleable-content-exit-done {
-    display: none;
-}
-
-/* Floating Label */
-.p-float-label {
-    display: block;
-    position:relative;
-}
-
-.p-float-label > label {
-  font-weight:normal;
-  position:absolute;
-  pointer-events:none;
-  left: .25em;
-  top: 50%;
-  margin-top: -.5em;
-  transition: 0.3s ease all;
-  -moz-transition: 0.3s ease all;
-  -webkit-transition: 0.3s ease all;
-  color: #898989;
-  line-height: 1;
-}
diff --git a/src/components/contextmenu/ContextMenu.css b/src/components/contextmenu/ContextMenu.css
deleted file mode 100644
index 0bb86d4ede..0000000000
--- a/src/components/contextmenu/ContextMenu.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.p-contextmenu {
-    width: 12.5em;
-    padding: .25em;
-    position: absolute;
-    display: none;
-}
-
-.p-contextmenu .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
-.p-contextmenu ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.p-contextmenu .p-submenu-list {
-    display: none;
-    position: absolute;
-    width: 12.5em;
-    padding: .25em;
-    z-index: 1;
-}
-
-.p-contextmenu .p-menuitem-active > .p-submenu-list {
-    display: block;
-}
-
-.p-contextmenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    position: relative;
-}
-
-.p-contextmenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-contextmenu .p-menuitem-text {
-    vertical-align: middle;
-}
-
-.p-contextmenu .p-menuitem {
-    position: relative;
-}
-
-.p-contextmenu .p-menuitem-link .p-submenu-icon {
-    position: absolute;
-    margin-top: -.5em;
-    right: 0;
-    top: 50%;
-}
-
-.p-contextmenu .p-menuitem-active > .p-submenu > .p-submenu-list {
-    display: block !important;
-}
\ No newline at end of file
diff --git a/src/components/contextmenu/ContextMenu.d.ts b/src/components/contextmenu/ContextMenu.d.ts
deleted file mode 100644
index 3ab7c144e7..0000000000
--- a/src/components/contextmenu/ContextMenu.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-import {SyntheticEvent} from "react";
-
-interface ContextMenuProps {
-    id?: string;
-    model?: MenuItem[];
-    style?: object;
-    className?: string;
-    global?: boolean;
-    autoZIndex?: boolean;
-    baseZIndex?: number;
-    appendTo?: any;
-    onShow?(e: Event): void;
-    onHide?(e: Event): void;
-}
-
-export class ContextMenu extends React.Component<ContextMenuProps,any> {
-    public show(event:SyntheticEvent):void;
-    public hide(event:SyntheticEvent):void;
-}
diff --git a/src/components/contextmenu/ContextMenu.js b/src/components/contextmenu/ContextMenu.js
deleted file mode 100644
index 39597e1d82..0000000000
--- a/src/components/contextmenu/ContextMenu.js
+++ /dev/null
@@ -1,407 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ReactDOM from 'react-dom';
-import DomHandler from '../utils/DomHandler';
-
-class ContextMenuSub extends Component {
-
-    static defaultProps = {
-        model: null,
-        root: false,
-        className: null,
-        resetMenu: false,
-        onLeafClick: null
-    };
-
-    static propTypes = {
-        model: PropTypes.any,
-        root: PropTypes.bool,
-        className: PropTypes.string,
-        resetMenu: PropTypes.bool,
-        onLeafClick: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeItem : null
-        };
-    }
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        if (nextProps.resetMenu === true) {
-            return {
-                activeItem: null
-            }
-        }
-
-        return null;
-    }
-
-    onItemMouseEnter(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        this.setState({
-            activeItem: item
-        });
-    }
-
-    onItemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (!item.items) {
-            this.props.onLeafClick(event);
-        }
-    }
-
-    componentDidUpdate() {
-        if (this.element.offsetParent) {
-            this.position();
-        }
-    }
-
-    position() {
-        const parentItem = this.element.parentElement;
-        const containerOffset = DomHandler.getOffset(this.element.parentElement)
-        const viewport = DomHandler.getViewport();
-        const sublistWidth = this.element.offsetParent ? this.element.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.element);
-        const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-
-        this.element.style.top = '0px';
-
-        if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - DomHandler.calculateScrollbarWidth())) {
-            this.element.style.left = -1 * sublistWidth + 'px';
-        }
-        else {
-            this.element.style.left = itemOuterWidth + 'px';
-        }
-    }
-
-    renderSeparator(index) {
-        return (
-            <li key={'separator_' + index} className="p-menu-separator" role="separator"></li>
-        );
-    }
-
-    renderIcon(item) {
-        const className = classNames('p-menuitem-icon', item.icon);
-        if (item.icon) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenuIcon(item) {
-        if (item.items) {
-            return (
-                <span className="p-submenu-icon pi pi-fw pi-caret-right"></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenu(item) {
-        if (item.items) {
-            return (
-                <ContextMenuSub model={item.items} resetMenu={item !== this.state.activeItem} onLeafClick={this.props.onLeafClick} />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMenuitem(item, index) {
-        const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item, 'p-disabled': item.disabled}, item.className);
-        const icon = this.renderIcon(item);
-        const submenuIcon = this.renderSubmenuIcon(item);
-        const submenu = this.renderSubmenu(item);
-
-        return (
-            <li key={item.label + '_' + index} role="none" className={className} style={item.style} onMouseEnter={(event) => this.onItemMouseEnter(event, item)}>
-                <a href={item.url || '#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.onItemClick(event, item, index)} role="menuitem"
-                   aria-haspopup={item.items != null}>
-                    {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                    {submenuIcon}
-                </a>
-                {submenu}
-            </li>
-        );
-    }
-
-    renderItem(item, index) {
-        if (item.separator)
-            return this.renderSeparator(index);
-        else
-            return this.renderMenuitem(item, index);
-    }
-
-    renderMenu() {
-        if (this.props.model) {
-            return (
-                this.props.model.map((item, index) => {
-                    return this.renderItem(item, index);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames({'p-submenu-list': !this.props.root});
-        const submenu = this.renderMenu();
-
-        return (
-            <ul ref={el => this.element = el} className={className}>
-                {submenu}
-            </ul>
-        );
-    }
- }
-
-export class ContextMenu extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        style: null,
-        className: null,
-        global: false,
-        autoZIndex: true,
-        baseZIndex: 0,
-        appendTo: null,
-        onShow: null,
-        onHide: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        global: PropTypes.bool,
-        autoZIndex: PropTypes.bool,
-        baseZIndex: PropTypes.number,
-        appendTo: PropTypes.any,
-        onShow: PropTypes.func,
-        onHide: PropTypes.func
-    };
-
-    constructor(props) {
-        super();
-        this.state = {
-            resetMenu: false
-        }
-        this.onMenuClick = this.onMenuClick.bind(this);
-        this.onLeafClick = this.onLeafClick.bind(this);
-        this.onMenuMouseEnter = this.onMenuMouseEnter.bind(this);
-    }
-
-    componentDidMount() {
-        if (this.props.global) {
-            this.bindDocumentContextMenuListener();
-        }
-    }
-
-    onMenuClick() {
-        this.setState({
-            resetMenu: false
-        });
-    }
-
-    onMenuMouseEnter() {
-        this.setState({
-            resetMenu: false
-        });
-    }
-
-    show(event) {
-        this.container.style.display = 'block';
-        this.position(event);
-        if (this.props.autoZIndex) {
-            this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-        }
-        DomHandler.fadeIn(this.container, 250);
-
-        this.bindDocumentClickListener();
-        this.bindDocumentResizeListener();
-
-        if (this.props.onShow) {
-            this.props.onShow(event);
-        }
-
-        event.stopPropagation();
-        event.preventDefault();
-    }
-
-    hide(event) {
-        if (this.container) {
-            this.container.style.display = 'none';
-        }
-
-        if (this.props.onHide) {
-            this.props.onHide(event);
-        }
-
-        this.unbindDocumentResizeListener();
-        this.unbindDocumentClickListener();
-    }
-
-    position(event) {
-        if (event) {
-            let left = event.pageX + 1;
-            let top = event.pageY + 1;
-            let width = this.container.offsetParent ? this.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.container);
-            let height = this.container.offsetParent ? this.container.offsetHeight : DomHandler.getHiddenElementOuterHeight(this.container);
-            let viewport = DomHandler.getViewport();
-
-            //flip
-            if (left + width - document.body.scrollLeft > viewport.width) {
-                left -= width;
-            }
-
-            //flip
-            if (top + height - document.body.scrollTop > viewport.height) {
-                top -= height;
-            }
-
-            //fit
-            if (left < document.body.scrollLeft) {
-                left = document.body.scrollLeft;
-            }
-
-            //fit
-            if (top < document.body.scrollTop) {
-                top = document.body.scrollTop;
-            }
-
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-
-    onLeafClick(event) {
-        this.setState({
-            resetMenu: true
-        });
-
-        this.hide(event);
-
-        event.stopPropagation();
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target));
-    }
-
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (this.isOutsideClicked(event) && event.button !== 2) {
-                    this.hide(event);
-
-                    this.setState({
-                        resetMenu: true
-                    });
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    bindDocumentContextMenuListener() {
-        if (!this.documentContextMenuListener) {
-            this.documentContextMenuListener = (event) => {
-                this.show(event);
-            };
-
-            document.addEventListener('contextmenu', this.documentContextMenuListener);
-        }
-    }
-
-    bindDocumentResizeListener() {
-        if (!this.documentResizeListener) {
-            this.documentResizeListener = (event) => {
-                if (this.container.offsetParent) {
-                    this.hide(event);
-                }
-            };
-
-            window.addEventListener('resize', this.documentResizeListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    unbindDocumentContextMenuListener() {
-        if (this.documentContextMenuListener) {
-            document.removeEventListener('contextmenu', this.documentContextMenuListener);
-            this.documentContextMenuListener = null;
-        }
-    }
-
-    unbindDocumentResizeListener() {
-        if (this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-        this.unbindDocumentContextMenuListener();
-    }
-
-    renderContextMenu() {
-        const className = classNames('p-contextmenu p-component', this.props.className);
-
-        return(
-            <div id={this.props.id} className={className} style={this.props.style} ref={el => this.container = el} onClick={this.onMenuClick} onMouseEnter={this.onMenuMouseEnter}>
-                <ContextMenuSub model={this.props.model} root={true} resetMenu={this.state.resetMenu} onLeafClick={this.onLeafClick} />
-            </div>
-        );
-    }
-
-    render() {
-        const element = this.renderContextMenu();
-
-        if (this.props.appendTo)
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        else
-            return element;
-    }
-}
diff --git a/src/components/datascroller/DataScroller.css b/src/components/datascroller/DataScroller.css
deleted file mode 100644
index f639991797..0000000000
--- a/src/components/datascroller/DataScroller.css
+++ /dev/null
@@ -1,28 +0,0 @@
-.p-datascroller {
-}
-
-.p-datascroller .p-datascroller-header {
-    text-align: center;
-	padding: .5em .75em;
-    border-bottom: 0 none;
-}
-
-.p-datascroller .p-datascroller-footer {
-    text-align: center;
-    padding: .25em .625em;
-    border-top: 0px none;
-}
-
-.p-datascroller .p-datascroller-content {
-    padding: .25em .625em;
-}
-
-.p-datascroller-inline .p-datascroller-content {
-    overflow: auto;
-}
-
-.p-datascroller .p-datascroller-list {
-    list-style-type: none; 
-    margin: 0;
-    padding: 0;
-}
\ No newline at end of file
diff --git a/src/components/datascroller/DataScroller.d.ts b/src/components/datascroller/DataScroller.d.ts
deleted file mode 100644
index 65fb74ec8c..0000000000
--- a/src/components/datascroller/DataScroller.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-interface DataScrollerProps {
-    id?: string;
-    value?: any[];
-    rows?: number;
-    inline?: boolean;
-    scrollHeight?: any;
-    loader?: any;
-    buffer?: number;
-    style?: object;
-    className?: string;
-    header?: any;
-    footer?: any;
-    lazy?: boolean;
-    onLazyLoad?(e: {first: number, rows: number}): void;
-    itemTemplate?(item: any): JSX.Element | undefined;
-}
-
-export class DataScroller extends React.Component<DataScrollerProps,any> {}
diff --git a/src/components/datascroller/DataScroller.js b/src/components/datascroller/DataScroller.js
deleted file mode 100644
index 22c703db3b..0000000000
--- a/src/components/datascroller/DataScroller.js
+++ /dev/null
@@ -1,221 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-
-export class DataScroller extends Component {
-    
-    static defaultProps = {
-        id: null,
-        value: null,
-        rows: 0,
-        inline:	false,
-        scrollHeight: null,
-        loader:	null,
-        buffer: 0.9,
-        style: null,
-        className: null,
-        onLazyLoad: null,
-        itemTemplate: null,
-        header: null,
-        footer: null,
-        lazy: false
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.array,
-        rows: PropTypes.number,
-        inline: PropTypes.bool,
-        scrollHeight: PropTypes.any,
-        loader: PropTypes.any,
-        buffer: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        onLazyLoad: PropTypes.func,
-        itemTemplate: PropTypes.func,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        lazy: PropTypes.bool
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.dataToRender = [];
-        this.value = this.props.value;
-        this.first = 0;
-    }
-
-    handleDataChange() {
-        if(this.props.lazy) {
-            this.dataToRender = this.value;
-            this.setState({ dataToRender: this.dataToRender });
-        }
-        else {
-            this.load();
-        }
-    }
-        
-    load() {
-        if(this.props.lazy) {
-            if(this.props.onLazyLoad) {
-                this.props.onLazyLoad(this.createLazyLoadMetadata());
-            }
-            
-            this.first = this.first + this.props.rows;
-        }
-        else {
-            if(this.value) {
-                for(var i = this.first; i < (this.first + this.props.rows); i++) {
-                    if(i >= this.value.length) {
-                        break;
-                    }
-
-                    this.dataToRender.push(this.value[i]);
-                }
-                
-                this.first = this.first + this.props.rows;
-                this.setState({ dataToRender: this.dataToRender });
-            }
-        }
-    }
-     
-    reset() {
-        this.first = 0;
-        this.dataToRender = [];
-        this.setState({ dataToRender: this.dataToRender });
-        this.load();
-    }
-
-    isEmpty() {
-        return !this.dataToRender||(this.dataToRender.length === 0);
-    }
-    
-    createLazyLoadMetadata() {
-        return {
-            first: this.first,
-            rows: this.props.rows
-        };
-    }
-    
-    bindScrollListener() {
-        if(this.props.inline) {
-            this.scrollFunction = () => {
-                var scrollTop = this.contentElement.scrollTop,
-                    scrollHeight = this.contentElement.scrollHeight,
-                    viewportHeight = this.contentElement.clientHeight;
-
-                if((scrollTop >= ((scrollHeight * this.props.buffer) - (viewportHeight)))) {
-                    this.load();
-                }
-            }
-            
-            this.contentElement.addEventListener('scroll', this.scrollFunction);
-        }
-        else {
-            this.scrollFunction = () => {
-                var docBody = document.body,
-                    docElement = document.documentElement,
-                    scrollTop = (window.pageYOffset||document.documentElement.scrollTop),
-                    winHeight = docElement.clientHeight,
-                    docHeight = Math.max(docBody.scrollHeight, docBody.offsetHeight, winHeight, docElement.scrollHeight, docElement.offsetHeight);
-                            
-                if(scrollTop >= ((docHeight * this.props.buffer) - winHeight)) {
-                    this.load();
-                }
-            }
-
-            window.addEventListener('scroll', this.scrollFunction);
-        } 
-    }
-
-    unbindScrollListener() {
-        if (this.scrollFunction) {
-            if(this.props.inline) {
-                this.contentElement.removeEventListener('scroll', this.scrollFunction);
-                this.contentElement = null;
-            }
-            else if(this.loader && this.isLoaded) {
-                this.loader.removeEventListener('click', this.scrollFunction);
-            }
-            else {
-                window.removeEventListener('scroll', this.scrollFunction);
-            }   
-        }
-    }
-
-    componentDidMount() {
-        this.load();
-
-        if(this.props.loader) {
-            this.scrollFunction = () => {
-                this.load();
-            }
-            this.loader = ReactDOM.findDOMNode(this.props.loader);
-            this.loader.addEventListener('click', this.scrollFunction);
-            this.isLoaded = true;
-        }
-        else {
-            this.bindScrollListener();
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        var newValue = this.props.value;
-        if (newValue && this.value !== newValue) {
-            this.value = newValue;
-            
-            this.handleDataChange();
-        } 
-
-        if(this.props.loader && !this.isLoaded) {
-            this.unbindScrollListener();
-
-            this.scrollFunction = () => {
-                this.load();
-            }
-            this.loader = ReactDOM.findDOMNode(this.props.loader);
-            this.loader.addEventListener('click', this.scrollFunction);
-            this.isLoaded = true;
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.scrollFunction) {
-            this.unbindScrollListener();
-        }
-    }
-
-    render() {
-        var className = classNames('p-datascroller p-component', this.props.className, {
-            'p-datascroller-inline': this.props.inline
-        });
-
-        var header =this.props.header && <div className="p-datascroller-header"> {this.props.header}</div>,
-            footer = this.props.footer && <div className="p-datascroller-footer"> {this.props.footer} </div>,
-            content = (
-                <div ref={(el) => this.contentElement = ReactDOM.findDOMNode(el)} className="p-datascroller-content" style={{'maxHeight': this.props.scrollHeight}}>
-                    <ul className="p-datascroller-list">
-                    {
-                        this.state.dataToRender && this.state.dataToRender.map((val, i) => {
-                            var listItemContent = this.props.itemTemplate ? this.props.itemTemplate(val) : val;
-                            return (<li key={i + '_datascrollitem'}>
-                                       {listItemContent}
-                                    </li>);
-                            })
-                    }
-                    </ul>
-                </div>
-            );
-
-        return (
-            <div id={this.props.id} className={className}>
-                {header}
-                {content}
-                {footer}
-            </div>
-        );
-    }
-
-}
diff --git a/src/components/datatable/BodyCell.d.ts b/src/components/datatable/BodyCell.d.ts
deleted file mode 100644
index 0a8c8a1b01..0000000000
--- a/src/components/datatable/BodyCell.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface BodyCellProps {
-}
-
-export class BodyCell extends React.Component<BodyCellProps,any> {}
diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js
deleted file mode 100644
index 8c5d9ad795..0000000000
--- a/src/components/datatable/BodyCell.js
+++ /dev/null
@@ -1,257 +0,0 @@
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-import {RowRadioButton} from './RowRadioButton';
-import {RowCheckbox} from './RowCheckbox';
-
-export class BodyCell extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            editing: this.props.editing
-        };
-
-        this.onExpanderClick = this.onExpanderClick.bind(this);
-        this.onClick = this.onClick.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onEditorFocus = this.onEditorFocus.bind(this);
-    }
-
-    onExpanderClick(event) {
-        if (this.props.onRowToggle) {
-            this.props.onRowToggle({
-                originalEvent: event,
-                data: this.props.rowData
-            });
-        }
-
-        event.preventDefault();
-    }
-
-    onKeyDown(event) {
-        if (this.props.editMode !== 'row') {
-            if (event.which === 13 || event.which === 9) { // tab || enter
-                this.switchCellToViewMode(true);
-            }
-            if (event.which === 27) // escape
-            {
-                this.switchCellToViewMode(false);
-            }
-        }
-    }
-
-    onClick() {
-        if (this.props.editMode !== 'row') {
-            this.editingCellClick = true;
-
-            if (this.props.editor && !this.state.editing) {
-                this.setState({
-                    editing: true
-                });
-
-                if (this.props.editorValidatorEvent === 'click') {
-                    this.bindDocumentEditListener();
-                }
-            }
-        }
-    }
-
-    onBlur() {
-        if (this.props.editMode !== 'row' && this.state.editing && this.props.editorValidatorEvent === 'blur') {
-            this.switchCellToViewMode(true);
-        }
-    }
-
-    onEditorFocus(event) {
-        this.onClick(event);
-    }
-
-    bindDocumentEditListener() {
-        if (!this.documentEditListener) {
-            this.documentEditListener = (event) => {
-                if (!this.editingCellClick) {
-                    this.switchCellToViewMode(true);
-                }
-
-                this.editingCellClick = false;
-            };
-
-            this.editingCellClick = false;
-
-            document.addEventListener('click', this.documentEditListener);
-        }
-    }
-
-    closeCell() {
-        /* When using the 'tab' key, the focus event of the next cell is not called in IE. */
-        setTimeout(() => {
-            this.setState({
-                editing: false
-            });
-        }, 1);
-
-        this.unbindDocumentEditListener();
-    }
-
-    switchCellToViewMode(submit) {
-        if (this.props.editorValidator && submit) {
-            let valid = this.props.editorValidator(this.props);
-            if (valid) {
-                if (this.props.onEditorSubmit) {
-                    this.props.onEditorSubmit(this.props)
-                }
-                this.closeCell();
-            } // as per previous version if not valid and another editor is open, keep invalid data editor open.
-        }
-        else {
-            if (submit && this.props.onEditorSubmit) {
-                this.props.onEditorSubmit(this.props)
-            }
-            else if (this.props.onEditorCancel) {
-                this.props.onEditorCancel(this.props);
-            }
-            this.closeCell();
-        }
-    }
-
-    unbindDocumentEditListener() {
-        if (this.documentEditListener) {
-            document.removeEventListener('click', this.documentEditListener);
-            this.documentEditListener = null;
-        }
-    }
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        if (nextProps.editMode === 'row' && nextProps.editing !== prevState.editing) {
-            return {
-                editing: nextProps.editing
-            }
-        }
-
-        return null;
-    }
-
-    componentDidUpdate() {
-        if (this.props.editMode !== 'row' && this.container && this.props.editor) {
-            clearTimeout(this.tabindexTimeout);
-            if (this.state.editing) {
-                let focusable = DomHandler.findSingle(this.container, 'input');
-                if (focusable && document.activeElement !== focusable && !focusable.hasAttribute('data-isCellEditing')) {
-                    focusable.setAttribute('data-isCellEditing', true);
-                    focusable.focus();
-                }
-
-                this.keyHelper.tabIndex = -1;
-            }
-            else {
-                this.tabindexTimeout = setTimeout(() => {
-                    if (this.keyHelper) {
-                        this.keyHelper.setAttribute('tabindex', 0);
-                    }
-                }, 50);
-            }
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentEditListener();
-    }
-
-    render() {
-        let content, header, editorKeyHelper;
-        let cellClassName = classNames(this.props.bodyClassName||this.props.className, {
-                                'p-selection-column': this.props.selectionMode,
-                                'p-editable-column': this.props.editor,
-                                'p-cell-editing': this.state.editing && this.props.editor
-                            });
-
-        if (this.props.expander) {
-            let iconClassName = classNames('p-row-toggler-icon pi pi-fw p-clickable', {'pi-chevron-down': this.props.expanded, 'pi-chevron-right': !this.props.expanded});
-            content = (
-                <button type="button" onClick={this.onExpanderClick} className="p-row-toggler p-link">
-                    <span className={iconClassName}></span>
-                </button>
-            );
-        }
-        else if (this.props.selectionMode) {
-            let showSelection = true;
-            if (this.props.showSelectionElement) {
-                showSelection = this.props.showSelectionElement(this.props.rowData);
-            }
-
-            if (showSelection) {
-                if (this.props.selectionMode === 'single')
-                    content = <RowRadioButton onClick={this.props.onRadioClick} rowData={this.props.rowData} selected={this.props.selected}/>;
-                else
-                    content = <RowCheckbox onClick={this.props.onCheckboxClick} rowData={this.props.rowData} selected={this.props.selected}/>;
-            }
-        }
-        else if (this.props.rowReorder) {
-            let showReorder = true;
-            if (this.props.showRowReorderElement) {
-                showReorder = this.props.showRowReorderElement(this.props.rowData);
-            }
-
-            if (showReorder) {
-                let reorderIcon = classNames('p-table-reorderablerow-handle', this.props.rowReorderIcon);
-                content = (
-                    <i className={reorderIcon}></i>
-                );
-            }
-        }
-        else if (this.props.rowEditor) {
-            if (this.state.editing) {
-                content = (
-                    <React.Fragment>
-                        <button type="button" onClick={this.props.onRowEditSave} className="p-row-editor-save p-link">
-                            <span className="p-row-editor-save-icon pi pi-fw pi-check p-clickable"></span>
-                        </button>
-                        <button type="button" onClick={this.props.onRowEditCancel} className="p-row-editor-cancel p-link">
-                            <span className="p-row-editor-cancel-icon pi pi-fw pi-times p-clickable"></span>
-                        </button>
-                    </React.Fragment>
-                );
-            }
-            else {
-                content = (
-                    <button type="button" onClick={this.props.onRowEditInit} className="p-row-editor-init p-link">
-                        <span className="p-row-editor-init-icon pi pi-fw pi-pencil p-clickable"></span>
-                    </button>
-                );
-            }
-        }
-        else {
-            if (this.state.editing && this.props.editor) {
-                content = this.props.editor(this.props);
-            }
-            else {
-                if (this.props.body)
-                    content = this.props.body(this.props.rowData, this.props);
-                else
-                    content = ObjectUtils.resolveFieldData(this.props.rowData, this.props.field);
-            }
-        }
-
-        if (this.props.responsive) {
-            header = <span className="p-column-title">{this.props.header}</span>;
-        }
-
-        if (this.props.editMode !== 'row') {
-            /* eslint-disable */
-            editorKeyHelper = this.props.editor && <a tabIndex="0" ref={(el) => {this.keyHelper = el;}} className="p-cell-editor-key-helper p-hidden-accessible" onFocus={this.onEditorFocus}><span></span></a>;
-            /* eslint-enable */
-        }
-
-        return (
-            <td ref={(el) => {this.container = el;}} className={cellClassName} style={this.props.bodyStyle||this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
-                rowSpan={this.props.rowSpan} onBlur={this.onBlur}>
-                {header}
-                {editorKeyHelper}
-                {content}
-            </td>
-        );
-    }
-}
diff --git a/src/components/datatable/BodyRow.d.ts b/src/components/datatable/BodyRow.d.ts
deleted file mode 100644
index b35a1588be..0000000000
--- a/src/components/datatable/BodyRow.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface BodyRowProps {
-}
-
-export class BodyRow extends React.Component<BodyRowProps,any> {}
diff --git a/src/components/datatable/BodyRow.js b/src/components/datatable/BodyRow.js
deleted file mode 100644
index bedab05b84..0000000000
--- a/src/components/datatable/BodyRow.js
+++ /dev/null
@@ -1,269 +0,0 @@
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import {BodyCell} from './BodyCell';
-import DomHandler from '../utils/DomHandler';
-
-export class BodyRow extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            editing: false
-        };
-
-        this.onClick = this.onClick.bind(this);
-        this.onDoubleClick = this.onDoubleClick.bind(this);
-        this.onTouchEnd = this.onTouchEnd.bind(this);
-        this.onRightClick = this.onRightClick.bind(this);
-        this.onMouseDown = this.onMouseDown.bind(this);
-        this.onDragEnd = this.onDragEnd.bind(this);
-        this.onDragOver = this.onDragOver.bind(this);
-        this.onDragLeave = this.onDragLeave.bind(this);
-        this.onDrop = this.onDrop.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onRowEditInit = this.onRowEditInit.bind(this);
-        this.onRowEditSave = this.onRowEditSave.bind(this);
-        this.onRowEditCancel = this.onRowEditCancel.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                data: this.props.rowData,
-                index: this.props.rowIndex
-            });
-        }
-    }
-
-    onDoubleClick(event) {
-        if(this.props.onDoubleClick) {
-            this.props.onDoubleClick({
-                originalEvent: event,
-                data: this.props.rowData,
-                index: this.props.rowIndex
-            });
-        }
-    }
-
-    onTouchEnd(event) {
-        if(this.props.onTouchEnd) {
-            this.props.onTouchEnd(event);
-        }
-    }
-
-    onRightClick(event) {
-        if(this.props.onRightClick) {
-            this.props.onRightClick({
-                originalEvent: event,
-                data: this.props.rowData,
-                index: this.props.rowIndex
-            });
-        }
-    }
-
-    onMouseDown(event) {
-        if (DomHandler.hasClass(event.target, 'p-table-reorderablerow-handle'))
-            event.currentTarget.draggable = true;
-        else
-            event.currentTarget.draggable = false;
-    }
-
-    onDragEnd(event) {
-        if(this.props.onDragEnd) {
-            this.props.onDragEnd(event);
-        }
-        event.currentTarget.draggable = false;
-    }
-
-    onDragOver(event) {
-        if(this.props.onDragOver) {
-            this.props.onDragOver({
-                originalEvent: event,
-                rowElement: this.container
-            });
-        }
-        event.preventDefault();
-    }
-
-    onDragLeave(event) {
-        if(this.props.onDragLeave) {
-            this.props.onDragLeave({
-                originalEvent: event,
-                rowElement: this.container
-            });
-        }
-    }
-
-    onDrop(event) {
-        if(this.props.onDrop) {
-            this.props.onDrop({
-                originalEvent: event,
-                rowElement: this.container
-            });
-        }
-        event.preventDefault();
-    }
-
-    onKeyDown(event) {
-        if (this.props.selectionMode) {
-            const row = event.target;
-
-            switch (event.which) {
-                //down arrow
-                case 40:
-                    let nextRow = this.findNextSelectableRow(row);
-                    if (nextRow) {
-                        nextRow.focus();
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //up arrow
-                case 38:
-                    let prevRow = this.findPrevSelectableRow(row);
-                    if (prevRow) {
-                        prevRow.focus();
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //enter
-                case 13:
-                    this.onClick(event);
-                break;
-
-                default:
-                    //no op
-                break;
-            }
-        }
-    }
-
-    findNextSelectableRow(row) {
-        let nextRow = row.nextElementSibling;
-        if (nextRow) {
-            if (DomHandler.hasClass(nextRow, 'p-datatable-row'))
-                return nextRow;
-            else
-                return this.findNextSelectableRow(nextRow);
-        }
-        else {
-            return null;
-        }
-    }
-
-    findPrevSelectableRow(row) {
-        let prevRow = row.previousElementSibling;
-        if (prevRow) {
-            if (DomHandler.hasClass(prevRow, 'p-datatable-row'))
-                return prevRow;
-            else
-                return this.findPrevSelectableRow(prevRow);
-        }
-        else {
-            return null;
-        }
-    }
-
-    onRowEditInit(event) {
-        if (this.props.onRowEditInit) {
-            this.props.onRowEditInit({
-                originalEvent: event,
-                data: this.props.rowData
-            });
-        }
-
-        this.setState({
-            editing: true
-        });
-
-        event.preventDefault();
-    }
-
-    onRowEditSave(event) {
-        let valid = true;
-
-        if (this.props.rowEditorValidator) {
-            valid = this.props.rowEditorValidator(this.props.rowData);
-        }
-
-        if (this.props.onRowEditSave) {
-            this.props.onRowEditSave({
-                originalEvent: event,
-                data: this.props.rowData
-            });
-        }
-
-        this.setState({
-            editing: !valid
-        });
-
-        event.preventDefault();
-    }
-
-    onRowEditCancel(event) {
-        if (this.props.onRowEditCancel) {
-            this.props.onRowEditCancel({
-                originalEvent: event,
-                data: this.props.rowData,
-                index: this.props.rowIndex
-            });
-        }
-
-        this.setState({
-            editing: false
-        });
-
-        event.preventDefault();
-    }
-
-    render() {
-        let columns = React.Children.toArray(this.props.children);
-        let conditionalClassNames = {
-            'p-highlight': this.props.selected,
-            'p-highlight-contextmenu': this.props.contextMenuSelected
-        };
-
-        if(this.props.rowClassName) {
-            let rowClassNameCondition = this.props.rowClassName(this.props.rowData);
-            conditionalClassNames = {...conditionalClassNames, ...rowClassNameCondition};
-        }
-        let className = classNames('p-datatable-row', conditionalClassNames);
-        let style = this.props.virtualScroll ? {height: this.props.virtualRowHeight} : {};
-        let hasRowSpanGrouping = this.props.rowGroupMode === 'rowspan';
-        let cells = [];
-
-        for (let i = 0; i < columns.length; i++) {
-            let column = columns[i];
-            let rowSpan;
-            if(hasRowSpanGrouping) {
-                if(this.props.sortField === column.props.field) {
-                    if(this.props.groupRowSpan) {
-                        rowSpan = this.props.groupRowSpan;
-                        className += ' p-datatable-rowspan-group'
-                    }
-                    else {
-                        continue;
-                    }
-                }
-            }
-
-            let cell = <BodyCell key={i} {...column.props} value={this.props.value} rowSpan={rowSpan} rowData={this.props.rowData} rowIndex={this.props.rowIndex} onRowToggle={this.props.onRowToggle} expanded={this.props.expanded}
-                        onRadioClick={this.props.onRadioClick} onCheckboxClick={this.props.onCheckboxClick} responsive={this.props.responsive} selected={this.props.selected}
-                        editMode={this.props.editMode} editing={this.state.editing} onRowEditInit={this.onRowEditInit} onRowEditSave={this.onRowEditSave} onRowEditCancel={this.onRowEditCancel} 
-                        showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement}/>;
-
-            cells.push(cell);
-        }
-
-        return (
-            <tr tabIndex={this.props.selectionMode ? '0' : null} ref={(el) => {this.container = el;}} className={className} onClick={this.onClick} onDoubleClick={this.onDoubleClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick} onMouseDown={this.onMouseDown}
-                onDragStart={this.props.onDragStart} onDragEnd={this.onDragEnd} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop} style={style} onKeyDown={this.onKeyDown}>
-                {cells}
-            </tr>
-        );
-    }
-}
diff --git a/src/components/datatable/DataTable.css b/src/components/datatable/DataTable.css
deleted file mode 100644
index 56254e8eba..0000000000
--- a/src/components/datatable/DataTable.css
+++ /dev/null
@@ -1,208 +0,0 @@
-.p-datatable {
-    position: relative;
-}
-
-.p-datatable table {
-    border-collapse: collapse;
-    width: 100%;
-    table-layout: fixed;
-}
-
-.p-datatable .p-datatable-thead > tr > th,
-.p-datatable .p-datatable-tbody > tr > td,
-.p-datatable .p-datatable-tfoot > tr > td {
-    padding: .25em .5em;
-}
-
-.p-datatable .p-sortable-column {
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-datatable .p-sortable-column-icon {
-    vertical-align: middle;
-}
-
-.p-datatable-auto-layout > .p-datatable-wrapper {
-    overflow-x: auto;
-}
-
-.p-datatable-auto-layout > .p-datatable-wrapper > table {
-    table-layout: auto;
-}
-
-/* Sections */
-.p-datatable-header,
-.p-datatable-footer {
-    padding: .25em .5em;
-    text-align: center;
-    font-weight: bold;
-}
-
-.p-datatable-header {
-    border-bottom: 0 none;
-}
-
-.p-datatable-footer {
-    border-top: 0 none;
-}
-
-/* Paginator */
-.p-datatable .p-paginator-top {
-    border-bottom: 0 none;
-}
-
-.p-datatable .p-paginator-bottom {
-    border-top: 0 none;
-}
-
-/* Scrollable */
-.p-datatable-scrollable-wrapper {
-    position: relative;
-}
-.p-datatable-scrollable-header,
-.p-datatable-scrollable-footer {
-    overflow: hidden;
-    border: 0 none;
-}
-
-.p-datatable-scrollable-body {
-    overflow: auto;
-    position: relative;
-}
-
-.p-datatable-scrollable-body > table > .p-datatable-tbody > tr:first-child > td {
-    border-top: 0 none;
-}
-
-.p-datatable-virtual-table {
-    position: absolute;
-}
-
-/* Frozen Columns */
-.p-datatable-frozen-view .p-datatable-scrollable-body {
-    overflow: hidden;
-}
-
-.p-datatable-frozen-view > .p-datatable-scrollable-body > table > .p-datatable-tbody > tr > td:last-child {
-    border-right: 0 none;
-}
-
-.p-datatable-unfrozen-view {
-    position: absolute;
-    top: 0px;
-}
-
-/* Filter */
-.p-column-filter {
-    width: 100%;
-}
-
-/* Resizable */
-.p-datatable-resizable > .p-datatable-wrapper {
-    overflow-x: auto;
-}
-
-.p-datatable-resizable .p-datatable-thead > tr > th,
-.p-datatable-resizable .p-datatable-tfoot > tr > td,
-.p-datatable-resizable .p-datatable-tbody > tr > td {
-    overflow: hidden;
-}
-
-.p-datatable-resizable .p-resizable-column {
-    background-clip: padding-box;
-    position: relative;
-}
-
-.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
-    display: none;
-}
-
-.p-datatable .p-column-resizer {
-    display: block;
-    position: absolute !important;
-    top: 0;
-    right: 0;
-    margin: 0;
-    width: .5em;
-    height: 100%;
-    padding: 0px;
-    cursor:col-resize;
-    border: 1px solid transparent;
-}
-
-.p-datatable .p-column-resizer-helper {
-    width: 1px;
-    position: absolute;
-    z-index: 10;
-    display: none;
-}
-
-/* Edit */
-.p-datatable .p-datatable-tbody > tr > td.p-cell-editing .p-component {
-    width: 100%;
-}
-
-/* Reorder */
-.p-datatable-reorder-indicator-up,
-.p-datatable-reorder-indicator-down {
-    position: absolute;
-    display: none;
-}
-
-/* Toggleable RowGroup */
-.p-datatable .p-rowgroup-header .p-row-toggler .p-row-toggler-icon {
-    vertical-align: text-bottom;
-}
-
-/* Responsive */
-.p-datatable-responsive .p-datatable-tbody > tr.p-datatable-row > td .p-column-title {
-    display: none;
-}
-
-@media screen and (max-width: 40em) {
-    .p-datatable-responsive .p-datatable-thead > tr > th,
-    .p-datatable-responsive .p-datatable-tfoot > tr > td {
-        display: none !important;
-    }
-
-    .p-datatable-responsive .p-datatable-tbody > tr.p-datatable-row > td {
-        text-align: left;
-        display: block;
-        border: 0 none;
-        width: 100% !important;
-		float: left;
-		clear: left;
-    }
-
-    .p-datatable-responsive .p-datatable-tbody > tr.p-datatable-row > td .p-column-title {
-        padding: .4em;
-        min-width: 30%;
-        display: inline-block;
-        margin: -.4em 1em -.4em -.4em;
-        font-weight: bold;
-    }
-}
-
-/* Loader */
-.p-datatable-loading-overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
-    z-index: 1;
-}
-
-.p-datatable-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-datatable .p-datatable-loading-icon {
-    font-size: 2em;
-}
diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
deleted file mode 100644
index 231bf58c88..0000000000
--- a/src/components/datatable/DataTable.d.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import * as React from 'react';
-
-interface DataTableProps {
-    id?: string;
-    value?: any[];
-    header?: any;
-    footer?: any;
-    style?: object;
-    className?: string;
-    tableStyle?: object;
-    tableClassName?: string;
-    paginator?: boolean;
-    paginatorPosition?: string;
-    alwaysShowPaginator?: boolean;
-    paginatorTemplate?: string;
-    paginatorLeft?: any;
-    paginatorRight?: any;
-    pageLinkSize?: number;
-    rowsPerPageOptions?: number[];
-    currentPageReportTemplate?: string;
-    first?: number;
-    rows?: number;
-    totalRecords?: number;
-    lazy?: boolean;
-    sortField?: string;
-    sortOrder?: number;
-    multiSortMeta?: any[];
-    sortMode?: string;
-    defaultSortOrder?: number;
-    removableSort?: boolean;
-    emptyMessage?: any;
-    selectionMode?: string;
-    selection?: any;
-    contextMenuSelection?: any;
-    compareSelectionBy?: string;
-    dataKey?: string;
-    metaKeySelection?: boolean;
-    headerColumnGroup?: any;
-    footerColumnGroup?: any;
-    frozenHeaderColumnGroup?: any;
-    frozenFooterColumnGroup?: any;
-    expandedRows?: any[];
-    responsive?: boolean;
-    resizableColumns?: boolean;
-    columnResizeMode?: string;
-    reorderableColumns?: boolean;
-    filters?: object;
-    globalFilter?: any;
-    filterLocale?: string;
-    scrollable?: boolean;
-    scrollHeight?: string;
-    virtualScroll?: boolean;
-    virtualScrollDelay?: number;
-    virtualRowHeight?: number;
-    frozenWidth?: string;
-    frozenValue?: any[];
-    csvSeparator?: string;
-    exportFilename?: string;
-    rowGroupMode?: string;
-    autoLayout?:boolean;
-    loading?:boolean;
-    loadingIcon?:string;
-    tabIndex?:string;
-    stateKey?:string;
-    stateStorage?:string;
-    groupField?:string;
-    editMode?:string;
-    expandableRowGroups?:boolean;
-    rowHover?:boolean;
-    showSelectionElement?(e: {data: any}): boolean;
-    showReorderElement?(e: {data: any}): boolean;
-    onSelectionChange?(e: {originalEvent: Event, value: any}): void;
-    onContextMenuSelectionChange?(e: {originalEvent: Event, value: any}): void;
-    rowExpansionTemplate?(data: any): JSX.Element | undefined;
-    onRowToggle?(e: {data: any[]}): void;
-    rowClassName?(rowData: any): object;
-    rowGroupHeaderTemplate?(data: any, index: number): React.ReactNode | undefined;
-    rowGroupFooterTemplate?(data: any, index: number): React.ReactNode | undefined;
-    onColumnResizeEnd?(e: {element: HTMLElement, delta: number}): void;
-    onSort?(e: {sortField: string, sortOrder: number, multiSortMeta: any}): void;
-    onPage?(e: {first: number, rows: number}): void;
-    onFilter?(e: {filters: any}): void;
-    onVirtualScroll?(e: {first: number, rows: number}): void;
-    onRowClick?(e: {originalEvent: Event, data: any, index: number}): void;
-    onRowDoubleClick?(e: {originalEvent: Event, data: any, index: number}): void;
-    onRowSelect?(e: {originalEvent: Event, data: any, type: string}): void;
-    onRowUnselect?(e: {originalEvent: Event, data: any, type: string}): void;
-    onRowExpand?(e: {originalEvent: Event, data: any}): void;
-    onRowCollapse?(e: {originalEvent: Event, data: any}): void;
-    onContextMenu?(e: {originalEvent: Event, data: any}): void;
-    onColReorder?(e: {originalEvent: Event, dragIndex: number, dropIndex: number, columns: any}): void;
-    onRowReorder?(e: {originalEvent: Event, value: any, dragIndex: number, dropIndex: number}): void;
-    onValueChange?(value: any[]): void;
-    rowEditorValidator?(rowData: any): boolean;
-    onRowEditInit?(e: {originalEvent: Event, data: any}): void;
-    onRowEditSave?(e: {originalEvent: Event, data: any}): void;
-    onRowEditCancel?(e: {originalEvent: Event, data: any, index: number}): void;
-    exportFunction?(e: {data: any, field: string}): any;
-}
-
-export class DataTable extends React.Component<DataTableProps,any> {
-    public reset():void;
-    public exportCSV():void;
-    public filter<T>(value:T, field:string, mode:string):void;
-    public resetColumnOrder():void;
-    public closeEditingCell():void;
-}
diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
deleted file mode 100644
index f931cc3456..0000000000
--- a/src/components/datatable/DataTable.js
+++ /dev/null
@@ -1,1470 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { Paginator } from '../paginator/Paginator';
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
-import { ScrollableView } from './ScrollableView';
-import { TableBody } from './TableBody';
-import { TableFooter } from './TableFooter';
-import { TableHeader } from './TableHeader';
-import { TableLoadingBody } from './TableLoadingBody';
-
-export class DataTable extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        header: null,
-        footer: null,
-        style: null,
-        className: null,
-        tableStyle: null,
-        tableClassName: null,
-        paginator: false,
-        paginatorPosition: 'bottom',
-        alwaysShowPaginator: true,
-        paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
-        paginatorLeft:null,
-        paginatorRight: null,
-        pageLinkSize: 5,
-        rowsPerPageOptions: null,
-        currentPageReportTemplate: '({currentPage} of {totalPages})',
-        first: null,
-        rows: null,
-        totalRecords: null,
-        lazy: false,
-        sortField: null,
-        sortOrder: null,
-        multiSortMeta: null,
-        sortMode: 'single',
-        defaultSortOrder: 1,
-        removableSort: false,
-        emptyMessage: null,
-        selectionMode: null,
-        selection: null,
-        onSelectionChange: null,
-        contextMenuSelection: null,
-        onContextMenuSelectionChange: null,
-        compareSelectionBy: 'deepEquals',
-        dataKey: null,
-        metaKeySelection: true,
-        headerColumnGroup: null,
-        footerColumnGroup: null,
-        frozenHeaderColumnGroup: null,
-        frozenFooterColumnGroup: null,
-        rowExpansionTemplate: null,
-        expandedRows: null,
-        onRowToggle: null,
-        responsive: false,
-        resizableColumns: false,
-        columnResizeMode: 'fit',
-        reorderableColumns: false,
-        filters: null,
-        globalFilter: null,
-        filterLocale: undefined,
-        scrollable: false,
-        scrollHeight: null,
-        virtualScroll: false,
-        virtualScrollDelay: 150,
-        virtualRowHeight: 28,
-        frozenWidth: null,
-        frozenValue: null,
-        csvSeparator: ',',
-        exportFilename: 'download',
-        rowGroupMode: null,
-        autoLayout: false,
-        rowClassName: null,
-        rowGroupHeaderTemplate: null,
-        rowGroupFooterTemplate: null,
-        loading: false,
-        loadingIcon: 'pi pi-spinner',
-        tabIndex: '0',
-        stateKey: null,
-        stateStorage: 'session',
-        editMode: 'cell',
-        expandableRowGroups: false,
-        rowHover: false,
-        showSelectionElement: null,
-        showRowReorderElement: null,
-        onColumnResizeEnd: null,
-        onSort: null,
-        onPage: null,
-        onFilter: null,
-        onVirtualScroll: null,
-        onRowClick: null,
-        onRowDoubleClick: null,
-        onRowSelect: null,
-        onRowUnselect: null,
-        onRowExpand: null,
-        onRowCollapse: null,
-        onContextMenu: null,
-        onColReorder: null,
-        onRowReorder: null,
-        onValueChange: null,
-        rowEditorValidator: null,
-        onRowEditInit: null,
-        onRowEditSave: null,
-        onRowEditCancel: null,
-        exportFunction: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.array,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        tableStyle: PropTypes.any,
-        tableClassName: PropTypes.string,
-        paginator: PropTypes.bool,
-        paginatorPosition: PropTypes.string,
-        alwaysShowPaginator: PropTypes.bool,
-        paginatorTemplate: PropTypes.string,
-        paginatorLeft: PropTypes.any,
-        paginatorRight: PropTypes.any,
-        pageLinkSize: PropTypes.number,
-        rowsPerPageOptions: PropTypes.array,
-        currentPageReportTemplate: PropTypes.string,
-        first: PropTypes.number,
-        rows: PropTypes.number,
-        totalRecords: PropTypes.number,
-        lazy: PropTypes.bool,
-        sortField: PropTypes.string,
-        sortOrder: PropTypes.number,
-        multiSortMeta: PropTypes.array,
-        sortMode: PropTypes.string,
-        defaultSortOrder: PropTypes.number,
-        removableSort: PropTypes.bool,
-        emptyMessage: PropTypes.any,
-        selectionMode: PropTypes.string,
-        selection: PropTypes.any,
-        onSelectionChange: PropTypes.func,
-        compareSelectionBy: PropTypes.string,
-        dataKey: PropTypes.string,
-        metaKeySelection: PropTypes.bool,
-        headerColumnGroup: PropTypes.any,
-        footerColumnGroup: PropTypes.any,
-        frozenHeaderColumnGroup: PropTypes.any,
-        frozenFooterColumnGroup: PropTypes.any,
-        rowExpansionTemplate: PropTypes.func,
-        expandedRows: PropTypes.oneOfType([PropTypes.array,PropTypes.object]),
-        onRowToggle: PropTypes.func,
-        responsive: PropTypes.bool,
-        resizableColumns: PropTypes.bool,
-        columnResizeMode: PropTypes.string,
-        reorderableColumns: PropTypes.bool,
-        filters: PropTypes.object,
-        globalFilter: PropTypes.any,
-        filterLocale: PropTypes.string,
-        scrollable: PropTypes.bool,
-        scrollHeight: PropTypes.string,
-        virtualScroll: PropTypes.bool,
-        virtualScrollDelay: PropTypes.number,
-        virtualRowHeight: PropTypes.number,
-        frozenWidth: PropTypes.string,
-        frozenValue: PropTypes.array,
-        csvSeparator: PropTypes.string,
-        exportFilename: PropTypes.string,
-        rowGroupMode: PropTypes.string,
-        autoLayout: PropTypes.bool,
-        rowClassName: PropTypes.func,
-        rowGroupHeaderTemplate: PropTypes.func,
-        rowGroupFooterTemplate: PropTypes.func,
-        loading: PropTypes.bool,
-        loadingIcon: PropTypes.string,
-        tabIndex: PropTypes.string,
-        stateKey: PropTypes.string,
-        stateStorage: PropTypes.string,
-        editMode: PropTypes.string,
-        expandableRowGroups: PropTypes.bool,
-        rowHover: PropTypes.bool,
-        showSelectionElement: PropTypes.func,
-        showRowReorderElement: PropTypes.func,
-        onColumnResizeEnd: PropTypes.func,
-        onSort: PropTypes.func,
-        onPage: PropTypes.func,
-        onFilter: PropTypes.func,
-        onVirtualScroll: PropTypes.func,
-        onRowClick: PropTypes.func,
-        onRowDoubleClick: PropTypes.func,
-        onRowSelect: PropTypes.func,
-        onRowUnselect: PropTypes.func,
-        onRowExpand: PropTypes.func,
-        onRowCollapse: PropTypes.func,
-        onContextMenu: PropTypes.func,
-        onColReorder: PropTypes.func,
-        onRowReorder: PropTypes.func,
-        onValueChange: PropTypes.func,
-        rowEditorValidator: PropTypes.func,
-        onRowEditInit: PropTypes.func,
-        onRowEditSave: PropTypes.func,
-        onRowEditCancel: PropTypes.func,
-        exportFunction: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-
-        if (!this.props.onPage) {
-            this.state.first = props.first;
-            this.state.rows = props.rows;
-        }
-
-        if (!this.props.onSort) {
-            this.state.sortField = props.sortField;
-            this.state.sortOrder = props.sortOrder;
-            this.state.multiSortMeta = props.multiSortMeta;
-        }
-
-        if (!this.props.onFilter) {
-            this.state.filters = props.filters;
-        }
-
-        if (this.isStateful()) {
-            this.restoreState(this.state);
-        }
-
-        this.onPageChange = this.onPageChange.bind(this);
-        this.onSort = this.onSort.bind(this);
-        this.onFilter = this.onFilter.bind(this);
-        this.onColumnResizeStart = this.onColumnResizeStart.bind(this);
-        this.onHeaderCheckboxClick = this.onHeaderCheckboxClick.bind(this);
-        this.onColumnDragStart = this.onColumnDragStart.bind(this);
-        this.onColumnDragOver = this.onColumnDragOver.bind(this);
-        this.onColumnDragLeave = this.onColumnDragLeave.bind(this);
-        this.onColumnDrop = this.onColumnDrop.bind(this);
-        this.onVirtualScroll = this.onVirtualScroll.bind(this);
-        this.frozenSelectionMode = null;
-    }
-
-    getFirst() {
-        return this.props.onPage ? this.props.first : this.state.first;
-    }
-
-    getRows() {
-        return this.props.onPage ? this.props.rows : this.state.rows;
-    }
-
-    getSortField() {
-        return this.props.onSort ? this.props.sortField : this.state.sortField;
-    }
-
-    getSortOrder() {
-        return this.props.onSort ? this.props.sortOrder : this.state.sortOrder;
-    }
-
-    getMultiSortMeta() {
-        return this.props.onSort ? this.props.multiSortMeta : this.state.multiSortMeta;
-    }
-
-    getFilters() {
-        return this.props.onFilter ? this.props.filters : this.state.filters;
-    }
-
-    getStorage() {
-        switch(this.props.stateStorage) {
-            case 'local':
-                return window.localStorage;
-
-            case 'session':
-                return window.sessionStorage;
-
-            default:
-                throw new Error(this.props.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
-        }
-    }
-
-    isStateful() {
-        return this.props.stateKey != null;
-    }
-
-    saveState() {
-        const storage = this.getStorage();
-        let state = {};
-
-        if (this.props.paginator) {
-            state.first = this.getFirst();
-            state.rows = this.getRows();
-        }
-
-        let sortField = this.getSortField();
-        if (sortField) {
-            state.sortField = sortField;
-            state.sortOrder = this.getSortOrder();
-        }
-
-        let multiSortMeta = this.getMultiSortMeta();
-        if (multiSortMeta) {
-            state.multiSortMeta = multiSortMeta;
-        }
-
-        if (this.hasFilter()) {
-            state.filters = this.getFilters();
-        }
-
-        if (this.props.resizableColumns) {
-            this.saveColumnWidths(state);
-        }
-
-        if (this.props.reorderableColumns) {
-            state.columnOrder = this.state.columnOrder;
-        }
-
-        if (this.props.expandedRows) {
-            state.expandedRows = this.props.expandedRows;
-        }
-
-        if (this.props.selection && this.props.onSelectionChange) {
-            state.selection = this.props.selection;
-        }
-
-        if (Object.keys(state).length) {
-            storage.setItem(this.props.stateKey, JSON.stringify(state));
-        }
-    }
-
-    clearState() {
-        const storage = this.getStorage();
-
-        if (this.props.stateKey) {
-            storage.removeItem(this.props.stateKey);
-        }
-    }
-
-    restoreState(state) {
-        const storage = this.getStorage();
-        const stateString = storage.getItem(this.props.stateKey);
-
-        if (stateString) {
-            let restoredState = JSON.parse(stateString);
-
-            if (this.props.paginator) {
-                if (this.props.onPage) {
-                    this.props.onPage({
-                        first: restoredState.first,
-                        rows: restoredState.rows
-                    });
-                }
-                else {
-                    state.first = restoredState.first;
-                    state.rows = restoredState.rows;
-                }
-            }
-
-            if (restoredState.sortField) {
-                if (this.props.onSort) {
-                    this.props.onSort({
-                        sortField: restoredState.sortField,
-                        sortOrder: restoredState.sortOrder
-                    });
-                }
-                else {
-                    state.sortField = restoredState.sortField;
-                    state.sortOrder = restoredState.sortOrder;
-                }
-            }
-
-            if (restoredState.multiSortMeta) {
-                if (this.props.onSort) {
-                    this.props.onSort({
-                        multiSortMeta: restoredState.multiSortMeta
-                    });
-                }
-                else {
-                    state.multiSortMeta = restoredState.multiSortMeta;
-                }
-            }
-
-            if (restoredState.filters) {
-                if (this.props.onFilter) {
-                    this.props.onFilter({
-                        filters: restoredState.filters
-                    });
-                }
-                else {
-                    state.filters = restoredState.filters;
-                }
-            }
-
-            if (this.props.resizableColumns) {
-                this.columnWidthsState = restoredState.columnWidths;
-                this.tableWidthState = restoredState.tableWidth;
-            }
-
-            if (this.props.reorderableColumns) {
-                state.columnOrder = restoredState.columnOrder;
-            }
-
-            if (restoredState.expandedRows && this.props.onRowToggle) {
-                this.props.onRowToggle({
-                    data: restoredState.expandedRows
-                });
-            }
-
-            if (restoredState.selection && this.props.onSelectionChange) {
-                this.props.onSelectionChange({
-                    value: restoredState.selection
-                });
-            }
-        }
-    }
-
-    saveColumnWidths(state) {
-        let widths = [];
-        let headers = DomHandler.find(this.container, '.p-datatable-thead > tr > th');
-        headers.map(header => widths.push(DomHandler.getOuterWidth(header)));
-        state.columnWidths = widths.join(',');
-
-        if (this.props.columnResizeMode === 'expand') {
-            state.tableWidth = this.props.scrollable ? DomHandler.findSingle(this.container, '.p-datatable-scrollable-header-table').style.width :
-                                                DomHandler.getOuterWidth(this.table) + 'px';
-        }
-    }
-
-    restoreColumnWidths() {
-        if (this.columnWidthsState) {
-            let widths = this.columnWidthsState.split(',');
-
-            if (this.props.columnResizeMode === 'expand' && this.tableWidthState) {
-                if (this.props.scrollable) {
-                    this.setScrollableItemsWidthOnExpandResize(null, this.tableWidthState, 0);
-                }
-                else {
-                    this.table.style.width = this.tableWidthState;
-                    this.container.style.width = this.tableWidthState;
-                }
-            }
-
-            if (this.props.scrollable) {
-                let headerCols = DomHandler.find(this.container, '.p-datatable-scrollable-header-table > colgroup > col');
-                let bodyCols = DomHandler.find(this.container, '.p-datatable-scrollable-body-table > colgroup > col');
-
-                headerCols.map((col, index) => col.style.width = widths[index] + 'px');
-                bodyCols.map((col, index) => col.style.width = widths[index] + 'px');
-            }
-            else {
-                let headers = DomHandler.find(this.table, '.p-datatable-thead > tr > th');
-                headers.map((header, index) => header.style.width = widths[index] + 'px');
-            }
-        }
-    }
-
-    onPageChange(event) {
-        if (this.props.onPage)
-            this.props.onPage(event);
-        else
-            this.setState({first: event.first, rows: event.rows});
-
-        if (this.props.onValueChange) {
-            this.props.onValueChange();
-        }
-    }
-
-    createPaginator(position, totalRecords, data) {
-        let className = 'p-paginator-' + position;
-
-        return (
-            <Paginator first={this.getFirst()} rows={this.getRows()} pageLinkSize={this.props.pageLinkSize} className={className} onPageChange={this.onPageChange} template={this.props.paginatorTemplate}
-                        totalRecords={totalRecords} rowsPerPageOptions={this.props.rowsPerPageOptions} currentPageReportTemplate={this.props.currentPageReportTemplate}
-                        leftContent={this.props.paginatorLeft} rightContent={this.props.paginatorRight} alwaysShow={this.props.alwaysShowPaginator} />
-        );
-    }
-
-    onSort(event) {
-        let sortField = event.sortField;
-        let sortOrder = this.props.defaultSortOrder;
-        let multiSortMeta;
-        let eventMeta;
-
-        this.columnSortable = event.sortable;
-        this.columnSortFunction = event.sortFunction;
-        this.columnField = event.sortField;
-
-        if (this.props.sortMode === 'multiple') {
-            let metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
-            multiSortMeta = this.getMultiSortMeta();
-
-            if (multiSortMeta && multiSortMeta instanceof Array) {
-                const sortMeta = multiSortMeta.find(sortMeta => sortMeta.field === sortField);
-                sortOrder = sortMeta ? this.getCalculatedSortOrder(sortMeta.order) : sortOrder;
-            }
-
-            const newMetaData = {field: sortField, order: sortOrder};
-
-            if (sortOrder) {
-                if(!multiSortMeta || !metaKey) {
-                    multiSortMeta = [];
-                }
-
-                this.addSortMeta(newMetaData, multiSortMeta);
-            }
-            else if (this.props.removableSort && multiSortMeta) {
-                this.removeSortMeta(newMetaData, multiSortMeta);
-            }
-
-            eventMeta = {
-                multiSortMeta: multiSortMeta
-            };
-        }
-        else {
-            sortOrder = (this.getSortField() === sortField) ? this.getCalculatedSortOrder(this.getSortOrder()) : sortOrder;
-            if (this.props.removableSort) {
-                sortField = sortOrder ? sortField : null;
-            }
-
-            eventMeta = {
-                sortField: sortField,
-                sortOrder: sortOrder
-            };
-        }
-
-        if (this.props.onSort) {
-            this.props.onSort(eventMeta);
-        }
-        else {
-            eventMeta.first = 0;
-            this.setState(eventMeta);
-        }
-
-        if (this.props.onValueChange) {
-            this.props.onValueChange(this.processData({
-                sortField: sortField,
-                sortOrder: sortOrder,
-                multiSortMeta: multiSortMeta
-            }));
-        }
-    }
-
-    getCalculatedSortOrder(currentOrder) {
-        return this.props.removableSort ? (currentOrder ? (currentOrder < 0 ? 0 : -1) : 1) : currentOrder * -1;
-    }
-
-    addSortMeta(meta, multiSortMeta) {
-        let index = -1;
-        for(let i = 0; i < multiSortMeta.length; i++) {
-            if(multiSortMeta[i].field === meta.field) {
-                index = i;
-                break;
-            }
-        }
-
-        if(index >= 0)
-            multiSortMeta[index] = meta;
-        else
-            multiSortMeta.push(meta);
-    }
-
-    removeSortMeta(meta, multiSortMeta) {
-        let index = -1;
-        for(let i = 0; i < multiSortMeta.length; i++) {
-            if(multiSortMeta[i].field === meta.field) {
-                index = i;
-                break;
-            }
-        }
-
-        if(index >= 0) {
-            multiSortMeta.splice(index, 1);
-        }
-
-        multiSortMeta = multiSortMeta.length > 0 ? multiSortMeta : null;
-    }
-
-    sortSingle(data, sortField, sortOrder) {
-        let value = [...data];
-
-        if(this.columnSortable && this.columnSortFunction) {
-            value = this.columnSortFunction({
-                field: this.getSortField(),
-                order: this.getSortOrder()
-            });
-        }
-        else {
-            value.sort((data1, data2) => {
-                const value1 = ObjectUtils.resolveFieldData(data1, sortField);
-                const value2 = ObjectUtils.resolveFieldData(data2, sortField);
-                let result = null;
-
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-
-                return (sortOrder * result);
-            });
-        }
-
-        return value;
-    }
-
-    sortMultiple(data, multiSortMeta) {
-        let value = [...data];
-
-        if (this.columnSortable && this.columnSortFunction) {
-            const meta = multiSortMeta.find(meta => meta.field === this.columnField);
-            const field = this.columnField;
-            const order = meta ? meta.order : this.defaultSortOrder;
-
-            value = this.columnSortFunction({
-                field,
-                order
-            });
-        }
-        else {
-            value.sort((data1, data2) => {
-                return this.multisortField(data1, data2, multiSortMeta, 0);
-            });
-        }
-
-        return value;
-    }
-
-    multisortField(data1, data2, multiSortMeta, index) {
-        const value1 = ObjectUtils.resolveFieldData(data1, multiSortMeta[index].field);
-        const value2 = ObjectUtils.resolveFieldData(data2, multiSortMeta[index].field);
-        let result = null;
-
-        if (typeof value1 === 'string' || value1 instanceof String) {
-            if (value1.localeCompare && (value1 !== value2)) {
-                return (multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
-            }
-        }
-        else {
-            result = (value1 < value2) ? -1 : 1;
-        }
-
-        if(value1 === value2)  {
-            return (multiSortMeta.length - 1) > (index) ? (this.multisortField(data1, data2, multiSortMeta, index + 1)) : 0;
-        }
-
-        return (multiSortMeta[index].order * result);
-    }
-
-    filter(value, field, mode) {
-        this.onFilter({
-            value: value,
-            field: field,
-            matchMode: mode
-        });
-    }
-
-    onFilter(event) {
-        let currentFilters = this.getFilters();
-        let newFilters = currentFilters ? {...currentFilters} : {};
-
-        if(!this.isFilterBlank(event.value))
-            newFilters[event.field] = {value: event.value, matchMode: event.matchMode};
-        else if(newFilters[event.field])
-            delete newFilters[event.field];
-
-        if (this.props.onFilter) {
-            this.props.onFilter({
-                filters: newFilters
-            });
-        }
-        else {
-            this.setState({
-                first: 0,
-                filters: newFilters
-            });
-        }
-
-        if (this.props.onValueChange) {
-            this.props.onValueChange(this.processData({
-                filters: newFilters
-            }));
-        }
-    }
-
-    hasFilter() {
-        let filters = this.getFilters() || this.props.globalFilter;
-
-        return filters && Object.keys(filters).length > 0;
-    }
-
-    isFilterBlank(filter) {
-        if(filter !== null && filter !== undefined) {
-            if((typeof filter === 'string' && filter.trim().length === 0) || (filter instanceof Array && filter.length === 0))
-                return true;
-            else
-                return false;
-        }
-        return true;
-    }
-
-    hasFooter() {
-        if(this.props.children) {
-            if(this.props.footerColumnGroup) {
-                return true;
-            }
-            else {
-                return this.hasChildrenFooter(this.props.children);
-            }
-        }
-        else {
-            return false;
-        }
-    }
-
-    hasChildrenFooter(children) {
-        let hasFooter = false;
-
-        if (children) {
-            if (children instanceof Array) {
-                for (let i = 0; i < children.length; i++) {
-                    hasFooter = hasFooter || this.hasChildrenFooter(children[i]);
-                }
-            }
-            else {
-                return children.props && children.props.footer !== null;
-            }
-        }
-
-        return hasFooter;
-    }
-
-    onColumnResizeStart(event) {
-        let containerLeft = DomHandler.getOffset(this.container).left;
-        this.resizeColumn = event.columnEl;
-        this.resizeColumnProps = event.columnProps;
-        this.columnResizing = true;
-        this.lastResizerHelperX = (event.originalEvent.pageX - containerLeft + this.container.scrollLeft);
-
-        this.bindColumnResizeEvents();
-    }
-
-    onColumnResize(event) {
-        let containerLeft = DomHandler.getOffset(this.container).left;
-        DomHandler.addClass(this.container, 'p-unselectable-text');
-        this.resizerHelper.style.height = this.container.offsetHeight + 'px';
-        this.resizerHelper.style.top = 0 + 'px';
-        this.resizerHelper.style.left = (event.pageX - containerLeft + this.container.scrollLeft) + 'px';
-
-        this.resizerHelper.style.display = 'block';
-    }
-
-    onColumnResizeEnd(event) {
-        let delta = this.resizerHelper.offsetLeft - this.lastResizerHelperX;
-        let columnWidth = this.resizeColumn.offsetWidth;
-        let newColumnWidth = columnWidth + delta;
-        let minWidth = this.resizeColumn.style.minWidth||15;
-
-        if(columnWidth + delta > parseInt(minWidth, 10)) {
-            if(this.props.columnResizeMode === 'fit') {
-                let nextColumn = this.resizeColumn.nextElementSibling;
-                let nextColumnWidth = nextColumn.offsetWidth - delta;
-
-                if(newColumnWidth > 15 && nextColumnWidth > 15) {
-                    if(this.props.scrollable) {
-                        let scrollableView = this.findParentScrollableView(this.resizeColumn);
-                        let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-body-table');
-                        let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-header-table');
-                        let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-footer-table');
-                        let resizeColumnIndex = DomHandler.index(this.resizeColumn);
-
-                        this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
-                        this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
-                        this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
-                    }
-                    else {
-                        this.resizeColumn.style.width = newColumnWidth + 'px';
-                        if(nextColumn) {
-                            nextColumn.style.width = nextColumnWidth + 'px';
-                        }
-                    }
-                }
-            }
-            else if(this.props.columnResizeMode === 'expand') {
-                if (this.props.scrollable) {
-                    this.setScrollableItemsWidthOnExpandResize(this.resizeColumn, newColumnWidth, delta);
-                }
-                else {
-                    this.table.style.width = this.table.offsetWidth + delta + 'px';
-                    this.resizeColumn.style.width = newColumnWidth + 'px';
-                }
-            }
-
-            if(this.props.onColumnResizeEnd) {
-                this.props.onColumnResizeEnd({
-                    element: this.resizeColumn,
-                    column: this.resizeColumnProps,
-                    delta: delta
-                });
-            }
-
-            if (this.isStateful()) {
-                this.saveState();
-            }
-        }
-
-        this.resizerHelper.style.display = 'none';
-        this.resizeColumn = null;
-        this.resizeColumnProps = null;
-        DomHandler.removeClass(this.container, 'p-unselectable-text');
-
-        this.unbindColumnResizeEvents();
-    }
-
-    setScrollableItemsWidthOnExpandResize(column, newColumnWidth, delta) {
-        let scrollableView = column ? this.findParentScrollableView(column) : this.container;
-        let scrollableBody = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-body');
-        let scrollableHeader = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-header');
-        let scrollableFooter = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-footer');
-        let scrollableBodyTable = DomHandler.findSingle(scrollableBody, 'table.p-datatable-scrollable-body-table');
-        let scrollableHeaderTable = DomHandler.findSingle(scrollableHeader, 'table.p-datatable-scrollable-header-table');
-        let scrollableFooterTable = DomHandler.findSingle(scrollableFooter, 'table.p-datatable-scrollable-footer-table');
-
-        const scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth;
-        const scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth;
-        const isContainerInViewport = this.container.offsetWidth >= scrollableBodyTableWidth;
-
-        let setWidth = (container, table, width, isContainerInViewport) => {
-            if (container && table) {
-                container.style.width = isContainerInViewport ? width + DomHandler.calculateScrollbarWidth(scrollableBody) + 'px' : 'auto'
-                table.style.width = width + 'px';
-            }
-        };
-
-        setWidth(scrollableBody, scrollableBodyTable, scrollableBodyTableWidth, isContainerInViewport);
-        setWidth(scrollableHeader, scrollableHeaderTable, scrollableHeaderTableWidth, isContainerInViewport);
-        setWidth(scrollableFooter, scrollableFooterTable, scrollableHeaderTableWidth, isContainerInViewport);
-
-        if (column) {
-            let resizeColumnIndex = DomHandler.index(column);
-
-            this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
-            this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
-            this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
-        }
-    }
-
-    findParentScrollableView(column) {
-        if (column) {
-            let parent = column.parentElement;
-            while (parent && !DomHandler.hasClass(parent, 'p-datatable-scrollable-view')) {
-                parent = parent.parentElement;
-            }
-
-            return parent;
-        }
-        else {
-            return null;
-        }
-    }
-
-    resizeColGroup(table, resizeColumnIndex, newColumnWidth, nextColumnWidth) {
-        if(table) {
-            let colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
-
-            if(colGroup) {
-                let col = colGroup.children[resizeColumnIndex];
-                let nextCol = col.nextElementSibling;
-                col.style.width = newColumnWidth + 'px';
-
-                if (nextCol && nextColumnWidth) {
-                    nextCol.style.width = nextColumnWidth + 'px';
-                }
-            }
-            else {
-                throw new Error("Scrollable tables require a colgroup to support resizable columns");
-            }
-        }
-    }
-
-    bindColumnResizeEvents() {
-        this.documentColumnResizeListener = document.addEventListener('mousemove', (event) => {
-            if(this.columnResizing) {
-                this.onColumnResize(event);
-            }
-        });
-
-        this.documentColumnResizeEndListener = document.addEventListener('mouseup', (event) => {
-            if(this.columnResizing) {
-                this.columnResizing = false;
-                this.onColumnResizeEnd(event);
-            }
-        });
-    }
-
-    unbindColumnResizeEvents() {
-        document.removeEventListener('document', this.documentColumnResizeListener);
-        document.removeEventListener('document', this.documentColumnResizeEndListener);
-    }
-
-    findParentHeader(element) {
-        if(element.nodeName === 'TH') {
-            return element;
-        }
-        else {
-            let parent = element.parentElement;
-            while(parent.nodeName !== 'TH') {
-                parent = parent.parentElement;
-                if(!parent) break;
-            }
-            return parent;
-        }
-    }
-
-    onColumnDragStart(event) {
-        if(this.columnResizing) {
-            event.preventDefault();
-            return;
-        }
-
-        this.iconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
-        this.iconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);
-
-        this.draggedColumn = this.findParentHeader(event.target);
-        event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
-    }
-
-    onColumnDragOver(event) {
-        let dropHeader = this.findParentHeader(event.target);
-        if(this.props.reorderableColumns && this.draggedColumn && dropHeader) {
-            event.preventDefault();
-            let containerOffset = DomHandler.getOffset(this.container);
-            let dropHeaderOffset = DomHandler.getOffset(dropHeader);
-
-            if(this.draggedColumn !== dropHeader) {
-                let targetLeft =  dropHeaderOffset.left - containerOffset.left;
-                //let targetTop =  containerOffset.top - dropHeaderOffset.top;
-                let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
-
-                this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.iconHeight - 1) + 'px';
-                this.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
-
-                if(event.pageX > columnCenter) {
-                    this.reorderIndicatorUp.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.iconWidth / 2)) + 'px';
-                    this.reorderIndicatorDown.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.iconWidth / 2))+ 'px';
-                    this.dropPosition = 1;
-                }
-                else {
-                    this.reorderIndicatorUp.style.left = (targetLeft - Math.ceil(this.iconWidth / 2)) + 'px';
-                    this.reorderIndicatorDown.style.left = (targetLeft - Math.ceil(this.iconWidth / 2))+ 'px';
-                    this.dropPosition = -1;
-                }
-
-                this.reorderIndicatorUp.style.display = 'block';
-                this.reorderIndicatorDown.style.display = 'block';
-            }
-        }
-    }
-
-    onColumnDragLeave(event) {
-        if(this.props.reorderableColumns && this.draggedColumn) {
-            event.preventDefault();
-            this.reorderIndicatorUp.style.display = 'none';
-            this.reorderIndicatorDown.style.display = 'none';
-        }
-    }
-
-    onColumnDrop(event) {
-        event.preventDefault();
-        if(this.draggedColumn) {
-            let dragIndex = DomHandler.index(this.draggedColumn);
-            let dropIndex = DomHandler.index(this.findParentHeader(event.target));
-            let allowDrop = (dragIndex !== dropIndex);
-            if(allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
-                allowDrop = false;
-            }
-
-            if(allowDrop) {
-                let columns = this.state.columnOrder ? this.getColumns() : React.Children.toArray(this.props.children);
-                ObjectUtils.reorderArray(columns, dragIndex, dropIndex);
-                let columnOrder = [];
-                for(let column of columns) {
-                    columnOrder.push(column.props.columnKey||column.props.field);
-                }
-
-                this.setState({
-                    columnOrder: columnOrder
-                });
-
-                if (this.props.onColReorder) {
-                    this.props.onColReorder({
-                        originalEvent: event,
-                        dragIndex: dragIndex,
-                        dropIndex: dropIndex,
-                        columns: columns
-                    });
-                }
-            }
-
-            this.reorderIndicatorUp.style.display = 'none';
-            this.reorderIndicatorDown.style.display = 'none';
-            this.draggedColumn.draggable = false;
-            this.draggedColumn = null;
-            this.dropPosition = null;
-        }
-    }
-
-    onVirtualScroll(event) {
-        if(this.virtualScrollTimer) {
-            clearTimeout(this.virtualScrollTimer);
-        }
-
-        this.virtualScrollTimer = setTimeout(() => {
-            if (this.props.onVirtualScroll) {
-                this.props.onVirtualScroll({
-                    first: (event.page - 1) * this.props.rows,
-                    rows: this.props.virtualScroll ? this.props.rows * 2 : this.props.rows
-                });
-            }
-        }, this.props.virtualScrollDelay);
-    }
-
-    exportCSV() {
-        let data = this.processData();
-        let csv = '\ufeff';
-        let columns = React.Children.toArray(this.props.children);
-
-        //headers
-        for(let i = 0; i < columns.length; i++) {
-            if(columns[i].props.field) {
-                csv += '"' + (columns[i].props.header || columns[i].props.field) + '"';
-
-                if(i < (columns.length - 1)) {
-                    csv += this.props.csvSeparator;
-                }
-            }
-        }
-
-        //body
-        data.forEach((record, i) => {
-            csv += '\n';
-            for(let i = 0; i < columns.length; i++) {
-                let column = columns[i],
-                field = column.props.field;
-
-                if (column.props.exportable && field) {
-                    let cellData = ObjectUtils.resolveFieldData(record, field);
-
-                    if (cellData != null) {
-                        if (this.props.exportFunction) {
-                            cellData = this.props.exportFunction({
-                                data: cellData,
-                                field: field
-                            });
-                        }
-                        else
-                            cellData = String(cellData).replace(/"/g, '""');
-                    }
-                    else
-                        cellData = '';
-
-                    csv += '"' + cellData + '"';
-
-                    if(i < (columns.length - 1)) {
-                        csv += this.props.csvSeparator;
-                    }
-                }
-            }
-        });
-
-        let blob = new Blob([csv],{
-            type: 'text/csv;charset=utf-8;'
-        });
-
-        if(window.navigator.msSaveOrOpenBlob) {
-            navigator.msSaveOrOpenBlob(blob, this.props.exportFilename + '.csv');
-        }
-        else {
-            let link = document.createElement("a");
-            link.style.display = 'none';
-            document.body.appendChild(link);
-            if(link.download !== undefined) {
-                link.setAttribute('href', URL.createObjectURL(blob));
-                link.setAttribute('download', this.props.exportFilename + '.csv');
-                link.click();
-            }
-            else {
-                csv = 'data:text/csv;charset=utf-8,' + csv;
-                window.open(encodeURI(csv));
-            }
-            document.body.removeChild(link);
-        }
-    }
-
-    closeEditingCell() {
-        if (this.props.editMode !== "row") {
-            document.body.click();
-        }
-    }
-
-    onHeaderCheckboxClick(event) {
-        let selection;
-
-        if(!event.checked) {
-            let visibleData = this.hasFilter() ? this.processData() : this.props.value;
-            selection = [...visibleData];
-        }
-        else {
-            selection = [];
-        }
-
-        if(this.props.onSelectionChange) {
-            const { originalEvent, ...rest } = event;
-
-            this.props.onSelectionChange({
-                originalEvent,
-                value: selection,
-                ...rest
-            });
-        }
-    }
-
-    filterLocal(value, localFilters) {
-        let filteredValue = [];
-        let filters = localFilters || this.getFilters();
-        let columns = React.Children.toArray(this.props.children);
-
-        for(let i = 0; i < value.length; i++) {
-            let localMatch = true;
-            let globalMatch = false;
-
-            for(let j = 0; j < columns.length; j++) {
-                let col = columns[j];
-                let columnField = col.props.filterField || col.props.field;
-                let filterMeta = filters ? filters[columnField] : null;
-
-                //local
-                if (filterMeta) {
-                    let filterValue = filterMeta.value;
-                    let dataFieldValue = ObjectUtils.resolveFieldData(value[i], columnField);
-                    let filterMatchMode = filterMeta.matchMode||col.props.filterMatchMode;
-                    let filterConstraint = filterMatchMode === 'custom' ? col.props.filterFunction : FilterUtils[filterMatchMode];
-
-                    if(!filterConstraint(dataFieldValue, filterValue, this.props.filterLocale)) {
-                        localMatch = false;
-                    }
-
-                    if(!localMatch) {
-                        break;
-                    }
-                }
-
-                if (!col.props.excludeGlobalFilter && this.props.globalFilter && !globalMatch) {
-                    globalMatch = FilterUtils['contains'](ObjectUtils.resolveFieldData(value[i], columnField), this.props.globalFilter, this.props.filterLocale);
-                }
-            }
-
-            let matches = localMatch;
-            if(this.props.globalFilter) {
-                matches = localMatch&&globalMatch;
-            }
-
-            if(matches) {
-                filteredValue.push(value[i]);
-            }
-        }
-
-        if(filteredValue.length === value.length) {
-            filteredValue = value;
-        }
-
-        return filteredValue;
-    }
-
-    processData(localState) {
-        let data = this.props.value;
-
-        if(!this.props.lazy) {
-            if(data && data.length) {
-                let sortField = (localState && localState.sortField) || this.getSortField();
-                let sortOrder = (localState && localState.sortOrder) || this.getSortOrder();
-                let multiSortMeta = (localState && localState.multiSortMeta) || this.getMultiSortMeta();
-
-                if(sortField || (multiSortMeta && multiSortMeta.length)) {
-                    if(this.props.sortMode === 'single')
-                        data = this.sortSingle(data, sortField, sortOrder);
-                    else if(this.props.sortMode === 'multiple')
-                        data = this.sortMultiple(data, multiSortMeta);
-                }
-
-                let localFilters = (localState && localState.filters) || this.getFilters();
-                if (localFilters || this.props.globalFilter) {
-                    data = this.filterLocal(data, localFilters);
-                }
-            }
-        }
-
-        return data;
-    }
-
-    isAllSelected() {
-        let visibleData = this.hasFilter() ? this.processData() : this.props.value;
-
-        return this.props.selection && visibleData && visibleData.length && this.props.selection.length === visibleData.length;
-    }
-
-    getFrozenColumns(columns) {
-        let frozenColumns = null;
-
-        for(let col of columns) {
-            if(col.props.frozen) {
-                frozenColumns = frozenColumns||[];
-                frozenColumns.push(col);
-            }
-        }
-
-        return frozenColumns;
-    }
-
-    getScrollableColumns(columns) {
-        let scrollableColumns = null;
-
-        for(let col of columns) {
-            if(!col.props.frozen) {
-                scrollableColumns = scrollableColumns||[];
-                scrollableColumns.push(col);
-            }
-        }
-
-        return scrollableColumns;
-    }
-
-    getFrozenSelectionModeInColumn(columns) {
-        if(Array.isArray(columns)) {
-            for(let col of columns) {
-                if(col.props.selectionMode)
-                   return col.props.selectionMode;
-            }
-        }
-
-        return null;
-    }
-
-    createTableHeader(value, columns, columnGroup) {
-        return <TableHeader value={value} onSort={this.onSort} sortField={this.getSortField()} sortOrder={this.getSortOrder()} multiSortMeta={this.getMultiSortMeta()} columnGroup={columnGroup}
-                            resizableColumns={this.props.resizableColumns} onColumnResizeStart={this.onColumnResizeStart} onFilter={this.onFilter}
-                            onHeaderCheckboxClick={this.onHeaderCheckboxClick} headerCheckboxSelected={this.isAllSelected()}
-                            reorderableColumns={this.props.reorderableColumns} onColumnDragStart={this.onColumnDragStart} filters={this.getFilters()}
-                            onColumnDragOver={this.onColumnDragOver} onColumnDragLeave={this.onColumnDragLeave} onColumnDrop={this.onColumnDrop} tabIndex={this.props.tabIndex}>
-                            {columns}
-                          </TableHeader>;
-    }
-
-    createTableBody(value, columns, frozen) {
-        return <TableBody value={value} first={this.getFirst()} rows={this.getRows()} lazy={this.props.lazy} paginator={this.props.paginator} dataKey={this.props.dataKey} compareSelectionBy={this.props.compareSelectionBy}
-                        selectionMode={this.props.selectionMode} selection={this.props.selection} metaKeySelection={this.props.metaKeySelection} frozen={frozen} frozenSelectionMode={this.frozenSelectionMode}
-                        onSelectionChange={this.props.onSelectionChange} onRowClick={this.props.onRowClick} onRowDoubleClick={this.props.onRowDoubleClick} onRowSelect={this.props.onRowSelect} onRowUnselect={this.props.onRowUnselect}
-                        contextMenuSelection={this.props.contextMenuSelection} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu}
-                        expandedRows={this.props.expandedRows} onRowToggle={this.props.onRowToggle} rowExpansionTemplate={this.props.rowExpansionTemplate}
-                        onRowExpand={this.props.onRowExpand} onRowCollapse={this.props.onRowCollapse} responsive={this.props.responsive} emptyMessage={this.props.emptyMessage}
-                        virtualScroll={this.props.virtualScroll} virtualRowHeight={this.props.virtualRowHeight} loading={this.props.loading}
-                        groupField={this.props.groupField} rowGroupMode={this.props.rowGroupMode} rowGroupHeaderTemplate={this.props.rowGroupHeaderTemplate} rowGroupFooterTemplate={this.props.rowGroupFooterTemplate}
-                        sortField={this.getSortField()} rowClassName={this.props.rowClassName} onRowReorder={this.props.onRowReorder}
-                        editMode={this.props.editMode} rowEditorValidator={this.props.rowEditorValidator} onRowEditInit={this.props.onRowEditInit} onRowEditSave={this.props.onRowEditSave} onRowEditCancel={this.props.onRowEditCancel}
-                        expandableRowGroups={this.props.expandableRowGroups} showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement}>
-                        {columns}
-                </TableBody>;
-    }
-
-    createTableLoadingBody(columns) {
-        if (this.props.virtualScroll) {
-            return <TableLoadingBody columns={columns} rows={this.getRows()}></TableLoadingBody>;
-        }
-        else {
-            return null;
-        }
-    }
-
-    createTableFooter(columns, columnGroup) {
-        if(this.hasFooter())
-            return <TableFooter columnGroup={columnGroup}>{columns}</TableFooter>;
-        else
-            return null;
-    }
-
-    createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup, totalRecords) {
-        return <ScrollableView columns={columns} header={this.createTableHeader(value, columns, headerColumnGroup)}
-                body={this.createTableBody(value, columns, frozen)} loadingBody={this.createTableLoadingBody(columns)} frozenBody={this.props.frozenValue ? this.createTableBody(this.props.frozenValue, columns, true): null}
-                footer={this.createTableFooter(columns, footerColumnGroup)} tableStyle={this.props.tableStyle} tableClassName={this.props.tableClassName}
-                scrollHeight={this.props.scrollHeight} frozen={frozen} frozenWidth={this.props.frozenWidth}
-                virtualScroll={this.props.virtualScroll} virtualRowHeight={this.props.virtualRowHeight} rows={this.props.rows} totalRecords={totalRecords}
-                onVirtualScroll={this.onVirtualScroll} loading={this.props.loading}></ScrollableView>
-    }
-
-    getColumns() {
-        let columns = React.Children.toArray(this.props.children);
-
-        if(columns && columns.length) {
-            if(this.props.reorderableColumns && this.state.columnOrder) {
-                let orderedColumns = [];
-                for(let columnKey of this.state.columnOrder) {
-                    let column = this.findColumnByKey(columns, columnKey);
-                    if (column) {
-                        orderedColumns.push(column);
-                    }
-                }
-
-                return [...orderedColumns, ...columns.filter((item) => {
-                    return orderedColumns.indexOf(item) < 0;
-                })];
-            }
-            else {
-                return columns;
-            }
-        }
-
-        return null;
-    }
-
-    findColumnByKey(columns, key) {
-        if(columns && columns.length) {
-            for(let i = 0; i < columns.length; i++) {
-                let child = columns[i];
-                if(child.props.columnKey === key || child.props.field === key) {
-                    return child;
-                }
-            }
-        }
-
-        return null;
-    }
-
-    getTotalRecords(data) {
-        return this.props.lazy ? this.props.totalRecords : data ? data.length : 0;
-    }
-
-    reset() {
-        let state = {};
-        if (!this.props.onPage) {
-            state.first = this.props.first;
-            state.rows = this.props.rows;
-        }
-
-        if (!this.props.onSort) {
-            state.sortField = this.props.sortField;
-            state.sortOrder = this.props.sortOrder;
-            state.multiSortMeta = this.props.multiSortMeta;
-        }
-
-        if (!this.props.onFilter) {
-            state.filters = this.props.filters;
-        }
-
-        this.resetColumnOrder();
-
-        if (Object.keys(state).length) {
-            this.setState(state);
-        }
-    }
-
-    resetColumnOrder() {
-        let columns = React.Children.toArray(this.props.children);
-        let columnOrder = [];
-
-        for(let column of columns) {
-            columnOrder.push(column.props.columnKey||column.props.field);
-        }
-
-        this.setState({
-            columnOrder
-        });
-    }
-
-    renderLoader() {
-        let iconClassName = classNames('p-datatable-loading-icon pi-spin', this.props.loadingIcon);
-
-        return (
-            <div className="p-datatable-loading">
-                <div className="p-datatable-loading-overlay p-component-overlay"></div>
-                <div className="p-datatable-loading-content">
-                    <i className={iconClassName}></i>
-                </div>
-            </div>
-        );
-    }
-
-    componentDidMount() {
-        if (this.isStateful() && this.props.resizableColumns) {
-            this.restoreColumnWidths();
-        }
-    }
-
-    componentDidUpdate() {
-        if (this.isStateful()) {
-            this.saveState();
-        }
-    }
-
-    render() {
-        let value = this.processData();
-        let columns = this.getColumns();
-        let totalRecords = this.getTotalRecords(value);
-        let className = classNames('p-datatable p-component', {'p-datatable-responsive': this.props.responsive,
-                        'p-datatable-resizable': this.props.resizableColumns, 'p-datatable-resizable-fit': this.props.resizableColumns && this.props.columnResizeMode === 'fit',
-                        'p-datatable-scrollable': this.props.scrollable, 'p-datatable-virtual-scrollable': this.props.virtualScroll,
-                        'p-datatable-auto-layout': this.props.autoLayout, 'p-datatable-hoverable-rows': this.props.rowHover || this.props.selectionMode}, this.props.className);
-        let paginatorTop = this.props.paginator && this.props.paginatorPosition !== 'bottom' && this.createPaginator('top', totalRecords);
-        let paginatorBottom = this.props.paginator && this.props.paginatorPosition !== 'top' && this.createPaginator('bottom', totalRecords);
-        let headerFacet = this.props.header && <div className="p-datatable-header">{this.props.header}</div>;
-        let footerFacet = this.props.footer && <div className="p-datatable-footer">{this.props.footer}</div>;
-        let resizeHelper = this.props.resizableColumns && <div ref={(el) => {this.resizerHelper = el;}} className="p-column-resizer-helper p-highlight" style={{display:'none'}}></div>;
-        let tableContent = null;
-        let resizeIndicatorUp = this.props.reorderableColumns && <span ref={(el) => {this.reorderIndicatorUp = el;}} className="pi pi-arrow-down p-datatable-reorder-indicator-up" style={{position: 'absolute', display: 'none'}} />
-        let resizeIndicatorDown = this.props.reorderableColumns && <span ref={(el) => {this.reorderIndicatorDown = el;}} className="pi pi-arrow-up p-datatable-reorder-indicator-down" style={{position: 'absolute', display: 'none'}} />;
-        let loader;
-
-        if(this.props.loading) {
-            loader = this.renderLoader();
-        }
-
-        if (Array.isArray(columns)) {
-            if (this.props.scrollable) {
-                this.frozenSelectionMode = this.frozenSelectionMode || this.getFrozenSelectionModeInColumn(columns);
-                let frozenColumns = this.getFrozenColumns(columns);
-                let scrollableColumns = frozenColumns ? this.getScrollableColumns(columns) : columns;
-                let frozenView, scrollableView;
-                if (frozenColumns) {
-                    frozenView = this.createScrollableView(value, frozenColumns, true, this.props.frozenHeaderColumnGroup, this.props.frozenFooterColumnGroup, totalRecords);
-                }
-
-                scrollableView = this.createScrollableView(value, scrollableColumns, false, this.props.headerColumnGroup, this.props.footerColumnGroup, totalRecords);
-
-                tableContent = <div className="p-datatable-scrollable-wrapper">
-                                    {frozenView}
-                                    {scrollableView}
-                            </div>;
-            }
-            else {
-                let tableHeader = this.createTableHeader(value, columns, this.props.headerColumnGroup);
-                let tableBody = this.createTableBody(value, columns, false);
-                let tableFooter = this.createTableFooter(columns, this.props.footerColumnGroup);
-
-                tableContent = <div className="p-datatable-wrapper">
-                        <table style={this.props.tableStyle} role="grid" className={this.props.tableClassName} ref={(el) => {this.table = el;}}>
-                            {tableHeader}
-                            {tableFooter}
-                            {tableBody}
-                        </table>
-                    </div>;
-            }
-        }
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style} ref={(el) => {this.container = el;}}>
-                {loader}
-                {headerFacet}
-                {paginatorTop}
-                {tableContent}
-                {paginatorBottom}
-                {footerFacet}
-                {resizeHelper}
-                {resizeIndicatorUp}
-                {resizeIndicatorDown}
-            </div>
-        );
-    }
-}
diff --git a/src/components/datatable/FooterCell.d.ts b/src/components/datatable/FooterCell.d.ts
deleted file mode 100644
index 8e07954726..0000000000
--- a/src/components/datatable/FooterCell.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface FooterCellProps {
-}
-
-export class FooterCell extends React.Component<FooterCellProps,any> {}
diff --git a/src/components/datatable/FooterCell.js b/src/components/datatable/FooterCell.js
deleted file mode 100644
index d1ef37607a..0000000000
--- a/src/components/datatable/FooterCell.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from 'react';
-
-export class FooterCell extends Component {
-
-    render() {
-        let className = this.props.footerClassName||this.props.className;
-                            
-        return (
-            <td className={className} style={this.props.footerStyle||this.props.style} 
-                colSpan={this.props.colSpan} rowSpan={this.props.rowSpan}>
-               {this.props.footer}
-            </td>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/datatable/HeaderCell.d.ts b/src/components/datatable/HeaderCell.d.ts
deleted file mode 100644
index f07f7b6d52..0000000000
--- a/src/components/datatable/HeaderCell.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface HeaderCellProps {
-}
-
-export class HeaderCell extends React.Component<HeaderCellProps,any> {}
diff --git a/src/components/datatable/HeaderCell.js b/src/components/datatable/HeaderCell.js
deleted file mode 100644
index 36e9fa0a9b..0000000000
--- a/src/components/datatable/HeaderCell.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import React, { Component } from 'react';
-import {InputText} from '../inputtext/InputText';
-import classNames from 'classnames';
-import {RowCheckbox} from './RowCheckbox';
-import DomHandler from '../utils/DomHandler';
-
-export class HeaderCell extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            filterValue: '',
-            badgeVisible: false
-        }
-
-        this.onClick = this.onClick.bind(this);
-        this.onFilterChange = this.onFilterChange.bind(this);
-        this.onMouseDown = this.onMouseDown.bind(this);
-        this.onResizerMouseDown = this.onResizerMouseDown.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(event) {
-        if (this.props.columnProps.sortable) {
-            let targetNode = event.target;
-            if(DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
-                || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
-                this.props.onSort({
-                    originalEvent: event,
-                    sortField: this.props.columnProps.sortField || this.props.columnProps.field,
-                    sortFunction: this.props.columnProps.sortFunction,
-                    sortable: this.props.columnProps.sortable
-                });
-
-                DomHandler.clearSelection();
-            }
-        }
-    }
-
-    onFilterChange(e) {
-        let filterValue = e.target.value;
-
-        if (this.props.columnProps.filter && this.props.onFilter) {
-            if(this.filterTimeout) {
-                clearTimeout(this.filterTimeout);
-            }
-
-            this.filterTimeout = setTimeout(() => {
-                this.props.onFilter({
-                    value: filterValue,
-                    field: this.props.columnProps.filterField || this.props.columnProps.field,
-                    matchMode: this.props.columnProps.filterMatchMode
-                });
-                this.filterTimeout = null;
-            }, this.filterDelay);
-        }
-
-        this.setState({ filterValue });
-    }
-
-    onResizerMouseDown(event) {
-        if(this.props.resizableColumns && this.props.onColumnResizeStart) {
-            this.props.onColumnResizeStart({
-                originalEvent: event,
-                columnEl: event.target.parentElement,
-                columnProps: this.props.columnProps
-            });
-
-            event.preventDefault();
-        }
-    }
-
-    onMouseDown(event) {
-        if (this.props.reorderableColumns && this.props.columnProps.reorderable) {
-            if (event.target.nodeName !== 'INPUT')
-                this.el.draggable = true;
-            else if (event.target.nodeName === 'INPUT')
-                this.el.draggable = false;
-        }
-    }
-
-    onKeyDown(event) {
-        if (event.key === 'Enter' && event.currentTarget === this.el) {
-            this.onClick(event);
-            event.preventDefault();
-        }
-    }
-
-    getMultiSortMetaDataIndex() {
-        if (this.props.multiSortMeta) {
-            let columnSortField = this.props.columnProps.sortField || this.props.columnProps.field;
-            for (let i = 0; i < this.props.multiSortMeta.length; i++) {
-                if (this.props.multiSortMeta[i].field === columnSortField) {
-                    return i;
-                }
-            }
-        }
-
-        return -1;
-    }
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        const filterField = nextProps.columnProps.filterField || nextProps.columnProps.field;
-        const value = nextProps.filters && nextProps.filters[filterField] ? nextProps.filters[filterField].value : null;
-
-        return {
-            filterValue: value !== null ? value : '',
-            badgeVisible: nextProps.multiSortMeta && nextProps.multiSortMeta.length > 1
-        }
-    }
-
-    getAriaSort(sorted, sortOrder) {
-        if (this.props.columnProps.sortable) {
-            let sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt': 'pi-sort-alt';
-            if (sortIcon === 'pi-sort-down')
-                return 'descending';
-            else if (sortIcon === 'pi-sort-up')
-                return 'ascending';
-            else
-                return 'none';
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSortIcon(sorted, sortOrder) {
-        if (this.props.columnProps.sortable) {
-            let sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt': 'pi-sort-alt';
-            let sortIconClassName = classNames('p-sortable-column-icon pi pi-fw', sortIcon);
-
-            return (
-                <span className={sortIconClassName}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSortBadge(sortMetaDataIndex) {
-        if (sortMetaDataIndex !== -1 && this.state.badgeVisible) {
-            return <span className="p-sortable-column-badge">{sortMetaDataIndex + 1}</span>;
-        }
-
-        return null;
-    }
-
-    render() {
-        let filterElement, headerCheckbox;
-
-        if (this.props.columnProps.filter && this.props.renderOptions.renderFilter) {
-            filterElement = this.props.columnProps.filterElement||<InputText onChange={this.onFilterChange} type={this.props.columnProps.filterType} value={this.state.filterValue}
-                        className="p-column-filter" placeholder={this.props.columnProps.filterPlaceholder} maxLength={this.props.columnProps.filterMaxLength} />;
-        }
-
-        if (this.props.columnProps.selectionMode === 'multiple' && this.props.renderOptions.renderHeaderCheckbox) {
-            headerCheckbox = <RowCheckbox onClick={this.props.onHeaderCheckboxClick} selected={this.props.headerCheckboxSelected} disabled={!this.props.value || this.props.value.length === 0} />;
-        }
-
-        if (this.props.renderOptions.filterOnly) {
-            return (
-                <th ref={(el) => this.el = el} className={classNames('p-filter-column', this.props.columnProps.filterHeaderClassName)} style={this.props.columnProps.filterHeaderStyle||this.props.columnProps.style}
-                    colSpan={this.props.columnProps.colSpan} rowSpan={this.props.columnProps.rowSpan}>
-                    {filterElement}
-                    {headerCheckbox}
-                </th>
-            );
-        }
-        else {
-            let sortMetaDataIndex = this.getMultiSortMetaDataIndex();
-            let multiSortMetaData = sortMetaDataIndex !== -1 ? this.props.multiSortMeta[sortMetaDataIndex] : null;
-            let singleSorted = this.props.sortField !== null ? (this.props.columnProps.field === this.props.sortField || this.props.columnProps.sortField === this.props.sortField) : false;
-            let multipleSorted = multiSortMetaData !== null;
-            let sortOrder = 0;
-            let resizer = this.props.resizableColumns && <span className="p-column-resizer p-clickable" onMouseDown={this.onResizerMouseDown}></span>;
-
-            if(singleSorted)
-                sortOrder = this.props.sortOrder;
-            else if(multipleSorted)
-                sortOrder = multiSortMetaData.order;
-
-            let sorted = this.props.columnProps.sortable && (singleSorted || multipleSorted);
-            let className = classNames({'p-sortable-column': this.props.columnProps.sortable,
-                            'p-highlight': sorted,
-                            'p-resizable-column': this.props.resizableColumns,
-                            'p-selection-column': this.props.columnProps.selectionMode}, this.props.columnProps.headerClassName||this.props.columnProps.className);
-
-            let sortIconElement = this.renderSortIcon(sorted, sortOrder);
-            let ariaSortData = this.getAriaSort(sorted, sortOrder);
-            let sortBadge = this.renderSortBadge(sortMetaDataIndex);
-
-            return (
-                <th ref={(el) => this.el = el} tabIndex={this.props.columnProps.sortable ? this.props.columnProps.tabIndex : null}
-                    className={className} style={this.props.columnProps.headerStyle||this.props.columnProps.style} onClick={this.onClick} onMouseDown={this.onMouseDown} onKeyDown={this.onKeyDown}
-                    colSpan={this.props.columnProps.colSpan} rowSpan={this.props.columnProps.rowSpan} aria-sort={ariaSortData}
-                    onDragStart={this.props.onDragStart} onDragOver={this.props.onDragOver} onDragLeave={this.props.onDragLeave} onDrop={this.props.onDrop}>
-                    {resizer}
-                    <span className="p-column-title">{this.props.columnProps.header}</span>
-                    {sortIconElement}
-                    {sortBadge}
-                    {filterElement}
-                    {headerCheckbox}
-                </th>
-            );
-        }
-    }
-}
diff --git a/src/components/datatable/RowCheckbox.d.ts b/src/components/datatable/RowCheckbox.d.ts
deleted file mode 100644
index bc1e215b09..0000000000
--- a/src/components/datatable/RowCheckbox.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-interface RowCheckboxProps {
-    rowData?: object;
-    onClick?(e: {originalEvent: Event, data: object, checked: boolean}): void;
-}
-
-export class RowCheckbox extends React.Component<RowCheckboxProps,any> {}
\ No newline at end of file
diff --git a/src/components/datatable/RowCheckbox.js b/src/components/datatable/RowCheckbox.js
deleted file mode 100644
index 850c397322..0000000000
--- a/src/components/datatable/RowCheckbox.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class RowCheckbox extends Component {
-
-    static defaultProps = {
-        rowData: null,
-        onClick: null,
-        disabled: false
-    }
-
-    static propTypes = {
-        rowData: PropTypes.object,
-        onClick: PropTypes.func,
-        disabled: PropTypes.bool
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-
-        this.onClick = this.onClick.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick && !this.props.disabled) {
-            this.props.onClick({
-                originalEvent: event,
-                data: this.props.rowData,
-                checked: this.props.selected
-            })
-        }
-    }
-
-    onFocus() {
-        this.setState({focused: true});
-    }
-
-    onBlur() {
-        this.setState({focused: false});
-    }
-
-    onKeyDown(event) {
-        if (event.key === 'Enter') {
-            this.onClick(event);
-            event.preventDefault();
-        }
-    }
-
-    render() {
-        let className = classNames('p-checkbox-box p-component', {'p-highlight': this.props.selected, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused});
-        let iconClassName = classNames('p-checkbox-icon p-clickable', {'pi pi-check': this.props.selected});
-
-        return <div className="p-checkbox p-component" onClick={this.onClick}>
-                 <div className="p-hidden-accessible">
-                    <input type="checkbox" defaultChecked={this.props.selected} disabled={this.props.disabled}
-                        aria-checked={this.props.selected} onKeyDown={this.onKeyDown} onFocus={this.onFocus} onBlur={this.onBlur}/>
-                </div>
-                <div className={className} role="checkbox" aria-checked={this.props.selected}>
-                    <span className={iconClassName}></span>
-                </div>
-            </div>;
-    }
-}
diff --git a/src/components/datatable/RowRadioButton.d.ts b/src/components/datatable/RowRadioButton.d.ts
deleted file mode 100644
index 43466e22e1..0000000000
--- a/src/components/datatable/RowRadioButton.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-interface RowRadioButtonProps {
-    rowData?: object;
-    selected?: boolean;
-    onClick?(e: {originalEvent: Event, data: object}): void;
-}
-
-export class RowRadioButton extends React.Component<RowRadioButtonProps,any> {}
diff --git a/src/components/datatable/RowRadioButton.js b/src/components/datatable/RowRadioButton.js
deleted file mode 100644
index 2560fbfa64..0000000000
--- a/src/components/datatable/RowRadioButton.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class RowRadioButton extends Component {
-
-    static defaultProps = {
-        rowData: null,
-        onClick: null,
-        selected: false
-    }
-
-    static propTypes = {
-        rowData: PropTypes.object,
-        onClick: PropTypes.func,
-        selected: PropTypes.bool
-    }
-
-    constructor(props) {
-        super(props);
-        this.onClick = this.onClick.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                data: this.props.rowData
-            })
-        }
-    }
-
-    render() {
-        let className = classNames('p-radiobutton-box p-component p-radiobutton-relative', {'p-highlight': this.props.selected});
-        let iconClassName = classNames('p-radiobutton-icon p-clickable', {'pi pi-circle-on': this.props.selected});
-
-        return <div className="p-radiobutton p-component">
-                    <div className="p-hidden-accessible">
-                        <input type="radio" />
-                    </div>
-                    <div className={className} onClick={this.onClick} role="checkbox" aria-checked={this.props.selected}>
-                        <span className={iconClassName}></span>
-                    </div>
-                </div>
-    }
-}
diff --git a/src/components/datatable/RowTogglerButton.d.ts b/src/components/datatable/RowTogglerButton.d.ts
deleted file mode 100644
index b1acb27073..0000000000
--- a/src/components/datatable/RowTogglerButton.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface RowTogglerButtonProps {
-}
-
-export class RowTogglerButton extends React.Component<RowTogglerButtonProps,any> {}
diff --git a/src/components/datatable/RowTogglerButton.js b/src/components/datatable/RowTogglerButton.js
deleted file mode 100644
index 48fb9035bd..0000000000
--- a/src/components/datatable/RowTogglerButton.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class RowTogglerButton extends Component {
-
-    static defaultProps = {
-        rowData: null,
-        onClick: null,
-        expanded: false
-    }
-
-    static propTypes = {
-        rowData: PropTypes.object,
-        onClick: PropTypes.func,
-        expanded: PropTypes.bool
-    }
-
-    constructor(props) {
-        super(props);
-        this.onClick = this.onClick.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                data: this.props.rowData
-            })
-        }
-    }
-
-    render() {
-        let iconClassName = classNames('p-row-toggler-icon pi pi-fw p-clickable', {
-            'pi-chevron-down': this.props.expanded,
-            'pi-chevron-right': !this.props.expanded
-        });
-
-        return  <button type="button" onClick={this.onClick} className="p-row-toggler p-link">
-                    <span className={iconClassName}></span>
-                </button>
-    }
-}
diff --git a/src/components/datatable/ScrollableView.d.ts b/src/components/datatable/ScrollableView.d.ts
deleted file mode 100644
index cae09c3fe5..0000000000
--- a/src/components/datatable/ScrollableView.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-interface ScrollableViewProps {
-    header?: any;
-    body?: any;
-    footer?: any;
-    frozen?: boolean;
-    frozenWidth?: string;
-    unfrozenWidth?: string;
-    frozenBody?: any;
-    virtualScroll?: boolean;
-    rows?: number;
-    totalRcords?: number;
-    onVirtualScroll?(page: number): void;
-}
-
-export class ScrollableView extends React.Component<ScrollableViewProps,any> {}
\ No newline at end of file
diff --git a/src/components/datatable/ScrollableView.js b/src/components/datatable/ScrollableView.js
deleted file mode 100644
index 5aef1c47fd..0000000000
--- a/src/components/datatable/ScrollableView.js
+++ /dev/null
@@ -1,259 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class ScrollableView extends Component {
-
-     static defaultProps = {
-        header: null,
-        body: null,
-        footer: null,
-        columns: null,
-        frozen: null,
-        frozenWidth: null,
-        frozenBody: null,
-        virtualScroll: false,
-        virtualRowHeight: null,
-        rows: null,
-        totalRecords: null,
-        loading: false,
-        tableStyle: null,
-        tableClassName: null,
-        onVirtualScroll: null
-     }
-
-    static propTypes = {
-        header: PropTypes.any,
-        body: PropTypes.any,
-        footer: PropTypes.any,
-        columns: PropTypes.array,
-        frozen: PropTypes.bool,
-        frozenWidth: PropTypes.string,
-        frozenBody: PropTypes.any,
-        virtualScroll: PropTypes.bool,
-        virtualRowHeight: PropTypes.number,
-        rows: PropTypes.number,
-        totalRcords: PropTypes.number,
-        loading: PropTypes.bool,
-        tableStyle: PropTypes.any,
-        tableClassName: PropTypes.string,
-        onVirtualScroll: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.onHeaderScroll = this.onHeaderScroll.bind(this);
-        this.onBodyScroll = this.onBodyScroll.bind(this);
-    }
-
-    componentDidMount() {
-        this.setScrollHeight();
-                
-        if(!this.props.frozen) {
-            this.alignScrollBar();
-        }
-        else {
-            this.scrollBody.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        if (this.props.scrollHeight !== prevProps.scrollHeight) {
-            this.setScrollHeight();
-        }
-
-        if(!this.props.frozen) {
-            this.alignScrollBar();
-            
-            if(this.props.virtualScroll) {
-                this.virtualScroller.style.height = this.props.totalRecords * this.props.virtualRowHeight + 'px';
-            }
-        }
-        
-        if(this.virtualScrollCallback && !this.props.loading) {
-            this.virtualScrollCallback();
-            this.virtualScrollCallback = null;
-        }
-    }
-    
-    setScrollHeight() {
-        if(this.props.scrollHeight) {
-            let frozenView = this.container.previousElementSibling;
-            if(frozenView) {
-                let frozenScrollBody = DomHandler.findSingle(frozenView, '.p-datatable-scrollable-body');
-                this.scrollBody.style.maxHeight = frozenScrollBody.style.maxHeight;
-            }
-            else {
-                if(this.props.scrollHeight.indexOf('%') !== -1) {
-                    let datatableContainer = this.findDataTableContainer(this.container);
-                    this.scrollBody.style.visibility = 'hidden';
-                    this.scrollBody.style.height = '100px';         //temporary height to calculate static height
-                    let containerHeight = DomHandler.getOuterHeight(datatableContainer);
-                    let relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(this.props.scrollHeight, 10) / 100;
-                    let staticHeight = containerHeight - 100;       //total height of headers, footers, paginators
-                    let scrollBodyHeight = (relativeHeight - staticHeight);
-                    
-                    if (this.props.frozen) {
-                        scrollBodyHeight -= DomHandler.calculateScrollbarWidth();
-                    }
-                    
-                    this.scrollBody.style.height = 'auto';
-                    this.scrollBody.style.maxHeight = scrollBodyHeight + 'px';
-                    this.scrollBody.style.visibility = 'visible';
-                }
-                else {
-                    this.scrollBody.style.maxHeight = this.props.scrollHeight;
-                }
-            }
-        }
-    }
-    
-    findDataTableContainer(element) {
-        if(element) {
-            let el = element;
-            while(el && !DomHandler.hasClass(el, 'p-datatable')) {
-                el = el.parentElement;
-            }
-
-            return el;
-        }
-        else {
-            return null;
-        }
-    }
-
-    onHeaderScroll() {
-        this.scrollHeader.scrollLeft = 0;
-    }
-
-    onBodyScroll() {
-        let frozenView = this.container.previousElementSibling;
-        let frozenScrollBody;
-        if(frozenView) {
-            frozenScrollBody = DomHandler.findSingle(frozenView, '.p-datatable-scrollable-body');
-        }
-        
-        this.scrollHeaderBox.style.marginLeft = -1 * this.scrollBody.scrollLeft + 'px';
-        if(this.scrollFooterBox) {
-            this.scrollFooterBox.style.marginLeft = -1 * this.scrollBody.scrollLeft + 'px';
-        }
-        
-        if(frozenScrollBody) {
-            frozenScrollBody.scrollTop = this.scrollBody.scrollTop;
-        }
-        
-        if(this.props.virtualScroll) {
-            let viewport = DomHandler.getClientHeight(this.scrollBody);
-            let tableHeight = DomHandler.getOuterHeight(this.scrollTable);
-            let pageHeight = this.props.virtualRowHeight * this.props.rows;
-            let virtualTableHeight = DomHandler.getOuterHeight(this.virtualScroller);
-            let pageCount = (virtualTableHeight / pageHeight)||1;
-            let scrollBodyTop = this.scrollTable.style.top||'0';
-            
-            if(this.scrollBody.scrollTop + viewport > parseFloat(scrollBodyTop) + tableHeight || this.scrollBody.scrollTop < parseFloat(scrollBodyTop)) {
-                if (this.loadingTable) {
-                    this.loadingTable.style.display = 'table';
-                    this.loadingTable.style.top = this.scrollBody.scrollTop + 'px';
-                }
-                
-                let page = Math.floor((this.scrollBody.scrollTop * pageCount) / (this.scrollBody.scrollHeight)) + 1;
-                if(this.props.onVirtualScroll) {
-                    this.props.onVirtualScroll({
-                        page: page
-                    });
-                    
-                    this.virtualScrollCallback = () => {
-                        if (this.loadingTable) {
-                            this.loadingTable.style.display = 'none';
-                        }
-
-                        this.scrollTable.style.top = ((page - 1) * pageHeight) + 'px';
-                    }
-                }
-            }
-        }
-    }
-
-    hasVerticalOverflow() {
-        return DomHandler.getOuterHeight(this.scrollTable) > DomHandler.getOuterHeight(this.scrollBody);
-    }
-
-    alignScrollBar() {
-        let scrollBarWidth = this.hasVerticalOverflow() ? DomHandler.calculateScrollbarWidth() : 0;
-        
-        this.scrollHeaderBox.style.marginRight = scrollBarWidth + 'px';
-        if(this.scrollFooterBox) {
-            this.scrollFooterBox.style.marginRight = scrollBarWidth + 'px';
-        }
-    }
-
-    renderColGroup() {
-        if(this.props.columns && this.props.columns.length) {
-            return (
-                <colgroup className="p-datatable-scrollable-colgroup">
-                    {this.props.columns.map((col, i) => <col key={col.props.field + '_' + i}  style={col.props.headerStyle || col.props.style}/>)}
-                </colgroup>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderLoadingTable(colGroup) {
-        if (this.props.virtualScroll) {
-            return (
-                <table ref={el => this.loadingTable = el} style={{top:'0', display: 'none'}} className="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table">
-                    {colGroup}
-                    {this.props.loadingBody}
-                </table>
-            )
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-datatable-scrollable-view', {'p-datatable-frozen-view': this.props.frozen, 'p-datatable-unfrozen-view': !this.props.frozen && this.props.frozenWidth});
-        let tableBodyClassName = classNames('p-datatable-scrollable-body-table', this.props.tableClassName, {'p-datatable-virtual-table': this.props.virtualScroll});
-        let tableHeaderClassName = classNames('p-datatable-scrollable-header-table', this.props.tableClassName);
-        let tableFooterClassName = classNames('p-datatable-scrollable-footer-table', this.props.tableClassName);
-        let tableBodyStyle = Object.assign({top:'0'}, this.props.tableStyle);
-        let width = this.props.frozen ? this.props.frozenWidth : 'calc(100% - ' + this.props.frozenWidth + ')';
-        let left = this.props.frozen ? null : this.props.frozenWidth;
-        let colGroup = this.renderColGroup();
-        let loadingTable = this.renderLoadingTable(colGroup);
-
-        return (
-            <div className={className} style={{width: width, left: left}} ref={(el) => { this.container = el; }}>
-                <div className="p-datatable-scrollable-header" ref={(el) => { this.scrollHeader= el; }} onScroll={this.onHeaderScroll}>
-                    <div className="p-datatable-scrollable-header-box" ref={(el) => { this.scrollHeaderBox = el; }}>
-                        <table className={tableHeaderClassName} style={this.props.tableStyle}>
-                            {colGroup}
-                            {this.props.header}
-                            {this.props.frozenBody}
-                        </table>
-                    </div>
-                </div>
-                <div className="p-datatable-scrollable-body" ref={(el) => { this.scrollBody = el; }} onScroll={this.onBodyScroll}>
-                    <table ref={el => this.scrollTable = el} style={tableBodyStyle} className={tableBodyClassName}>
-                        {colGroup}
-                        {this.props.body}
-                    </table>
-                    {loadingTable}
-                    <div className="p-datatable-virtual-scroller" ref={(el) => { this.virtualScroller = el; }}></div>
-                </div>
-                <div className="p-datatable-scrollable-footer" ref={(el) => { this.scrollFooter = el; }}>
-                    <div className="p-datatable-scrollable-footer-box" ref={(el) => { this.scrollFooterBox = el; }}>
-                         <table className={tableFooterClassName} style={this.props.tableStyle}>
-                            {colGroup}
-                            {this.props.footer}
-                        </table>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/datatable/TableBody.d.ts b/src/components/datatable/TableBody.d.ts
deleted file mode 100644
index d5a99d7ba7..0000000000
--- a/src/components/datatable/TableBody.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface TableBodyProps {
-}
-
-export class TableBody extends React.Component<TableBodyProps,any> {}
diff --git a/src/components/datatable/TableBody.js b/src/components/datatable/TableBody.js
deleted file mode 100644
index 0a6acfa2e6..0000000000
--- a/src/components/datatable/TableBody.js
+++ /dev/null
@@ -1,588 +0,0 @@
-import React, { Component } from 'react';
-import {BodyRow} from './BodyRow';
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import { RowTogglerButton } from './RowTogglerButton';
-
-export class TableBody extends Component {
-
-    constructor(props) {
-        super(props);
-        this.onRowClick = this.onRowClick.bind(this);
-        this.onRowRightClick = this.onRowRightClick.bind(this);
-        this.onRowTouchEnd = this.onRowTouchEnd.bind(this);
-        this.onRowToggle = this.onRowToggle.bind(this);
-        this.onRadioClick = this.onRadioClick.bind(this);
-        this.onCheckboxClick = this.onCheckboxClick.bind(this);
-        this.onRowDragEnd = this.onRowDragEnd.bind(this);
-        this.onRowDragLeave = this.onRowDragLeave.bind(this);
-        this.onRowDrop = this.onRowDrop.bind(this);
-    }
-
-    onRowClick(event) {
-        let targetNode = event.originalEvent.target.nodeName;
-        if(targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode ==='A' || (DomHandler.hasClass(event.originalEvent.target, 'p-clickable'))) {
-            return;
-        }
-
-        if(this.props.onRowClick) {
-            this.props.onRowClick(event);
-        }
-
-        if(this.props.selectionMode) {
-            let rowData = event.data;
-            let rowIndex = event.index;
-            let selection;
-
-            if(this.isMultipleSelectionMode() && event.originalEvent.shiftKey && this.anchorRowIndex !== null) {
-                DomHandler.clearSelection();
-                this.rangeRowIndex = rowIndex;
-                selection = this.selectRange(event);
-            }
-            else {
-                let selected = this.isSelected(rowData);
-                let metaSelection = this.rowTouched ? false : this.props.metaKeySelection;
-                this.anchorRowIndex = rowIndex;
-                this.rangeRowIndex = rowIndex;
-
-                if(metaSelection) {
-                    let metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
-
-                    if(selected && metaKey) {
-                        if(this.isSingleSelectionMode()) {
-                            selection = null;
-                        }
-                        else {
-                            let selectionIndex = this.findIndexInSelection(rowData);
-                            selection = this.props.selection.filter((val,i) => i !== selectionIndex);
-                        }
-
-                        if(this.props.onRowUnselect) {
-                            this.props.onRowUnselect({originalEvent: event.originalEvent, data: rowData, type: 'row'});
-                        }
-                    }
-                    else {
-                        if(this.isSingleSelectionMode()) {
-                            selection = rowData;
-                        }
-                        else if(this.isMultipleSelectionMode()) {
-                            if(metaKey)
-                                selection = this.props.selection ? [...this.props.selection] : [];
-                            else
-                                selection = [];
-
-                            selection = [...selection, rowData];
-                        }
-
-                        if(this.props.onRowSelect) {
-                            this.props.onRowSelect({originalEvent: event.originalEvent, data: rowData, type: 'row'});
-                        }
-                    }
-                }
-                else {
-                    if(this.isSingleSelectionMode()) {
-                        if(selected) {
-                            selection = null;
-                            if(this.props.onRowUnselect) {
-                                this.props.onRowUnselect({originalEvent: event.originalEvent, data: rowData, type: 'row'});
-                            }
-                        }
-                        else {
-                            selection = rowData;
-                            if(this.props.onRowSelect) {
-                                this.props.onRowSelect({originalEvent: event.originalEvent, data: rowData, type: 'row'});
-                            }
-                        }
-                    }
-                    else {
-                        if(selected) {
-                            let selectionIndex = this.findIndexInSelection(rowData);
-                            selection = this.props.selection.filter((val,i) => i !== selectionIndex);
-                            if(this.props.onRowSelect) {
-                                this.props.onRowSelect({originalEvent: event.originalEvent, data: rowData, type: 'row'});
-                            }
-                        }
-                        else {
-                            selection = [...this.props.selection||[], rowData];
-                            if(this.props.onRowSelect) {
-                                this.props.onRowSelect({originalEvent: event.originalEvent, data: rowData, type: 'row'});
-                            }
-                        }
-                    }
-                }
-            }
-
-            if(this.props.onSelectionChange) {
-                this.props.onSelectionChange({
-                    originalEvent: event.originalEvent,
-                    value: selection
-                });
-            }
-        }
-
-        this.rowTouched = false;
-    }
-
-    selectRange(event) {
-        let rangeStart, rangeEnd;
-
-        if (this.rangeRowIndex > this.anchorRowIndex) {
-            rangeStart = this.anchorRowIndex;
-            rangeEnd = this.rangeRowIndex;
-        }
-        else if(this.rangeRowIndex < this.anchorRowIndex) {
-            rangeStart = this.rangeRowIndex;
-            rangeEnd = this.anchorRowIndex;
-        }
-        else {
-            rangeStart = this.rangeRowIndex;
-            rangeEnd = this.rangeRowIndex;
-        }
-
-        if (this.props.lazy && this.props.paginator) {
-            rangeStart -= this.first;
-            rangeEnd -= this.first;
-        }
-
-        const value = this.props.value;
-        let selection = [];
-        for(let i = rangeStart; i <= rangeEnd; i++) {
-            let rangeRowData = value[i];
-            selection.push(rangeRowData);
-
-            if(this.props.onRowSelect) {
-                this.props.onRowSelect({originalEvent: event.originalEvent, data: rangeRowData, type: 'row'});
-            }
-        }
-
-        return selection;
-    }
-
-    onRowTouchEnd(event) {
-        this.rowTouched = true;
-    }
-
-    onRowRightClick(event) {
-        if (this.props.onContextMenu) {
-            DomHandler.clearSelection();
-
-            if (this.props.onContextMenuSelectionChange) {
-                this.props.onContextMenuSelectionChange({
-                    originalEvent: event.originalEvent,
-                    value: event.data
-                });
-            }
-
-            if (this.props.onContextMenu) {
-                this.props.onContextMenu({
-                    originalEvent: event.originalEvent,
-                    value: this.props.node
-                });
-            }
-
-            event.originalEvent.preventDefault();
-        }
-    }
-
-    onRadioClick(event) {
-        let rowData = event.data;
-        let selection;
-
-        if(this.isSelected(rowData)) {
-            selection = null;
-            if(this.props.onRowUnselect) {
-                this.props.onRowUnselect({originalEvent: event.originalEvent, data: rowData, type: 'radio'});
-            }
-        }
-        else {
-            selection = rowData;
-            if(this.props.onRowSelect) {
-                this.props.onRowSelect({originalEvent: event.originalEvent, data: rowData, type: 'radio'});
-            }
-        }
-
-        if(this.props.onSelectionChange) {
-            this.props.onSelectionChange({
-                originalEvent: event.originalEvent,
-                value: selection
-            });
-        }
-    }
-
-    onCheckboxClick(event) {
-        let rowData = event.data;
-        let selection;
-
-        if(this.isSelected(rowData)) {
-            let selectionIndex = this.findIndexInSelection(rowData);
-            selection = this.props.selection.filter((val,i) => i !== selectionIndex);
-            if(this.props.onRowUnselect) {
-                this.props.onRowUnselect({originalEvent: event.originalEvent, data: rowData, type: 'checkbox'});
-            }
-        }
-        else {
-            selection = [...this.props.selection||[], rowData];
-            if(this.props.onRowSelect) {
-                this.props.onRowSelect({originalEvent: event.originalEvent, data: rowData, type: 'checkbox'});
-            }
-        }
-
-        if(this.props.onSelectionChange) {
-            this.props.onSelectionChange({
-                originalEvent: event.originalEvent,
-                value: selection
-            });
-        }
-    }
-
-    isSingleSelectionMode() {
-        return this.props.selectionMode === 'single';
-    }
-
-    isMultipleSelectionMode() {
-        return this.props.selectionMode === 'multiple';
-    }
-
-    isSelected(rowData) {
-        if(rowData && this.props.selection) {
-            if(this.props.selection instanceof Array)
-                return this.findIndexInSelection(rowData) > -1;
-            else
-                return this.equals(rowData, this.props.selection);
-        }
-
-        return false;
-    }
-
-    isContextMenuSelected(rowData) {
-        if(rowData && this.props.contextMenuSelection) {
-            return this.equals(rowData, this.props.contextMenuSelection);
-        }
-
-        return false;
-    }
-
-    equals(data1, data2) {
-        return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.props.dataKey);
-    }
-
-    findIndexInSelection(rowData) {
-        let index = -1;
-        if(this.props.selection) {
-            for(let i = 0; i  < this.props.selection.length; i++) {
-                if(this.equals(rowData, this.props.selection[i])) {
-                    index = i;
-                    break;
-                }
-            }
-        }
-
-        return index;
-    }
-
-    onRowToggle(event) {
-        let expandedRows;
-        let dataKey = this.props.dataKey;
-
-        if (dataKey) {
-            let dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
-            expandedRows = this.props.expandedRows ? {...this.props.expandedRows} : {};
-
-            if (expandedRows[dataKeyValue] != null) {
-                delete expandedRows[dataKeyValue];
-                if (this.props.onRowCollapse) {
-                    this.props.onRowCollapse({originalEvent: event, data: event.data});
-                }
-            }
-            else {
-                expandedRows[dataKeyValue] = true;
-                if (this.props.onRowExpand) {
-                    this.props.onRowExpand({originalEvent: event, data: event.data});
-                }
-            }
-        }
-        else {
-            let expandedRowIndex = this.findExpandedRowIndex(event.data);
-            expandedRows = this.props.expandedRows ? [...this.props.expandedRows] : [];
-
-            if (expandedRowIndex !== -1) {
-                expandedRows = expandedRows.filter((val,i) => i !== expandedRowIndex);
-                if (this.props.onRowCollapse) {
-                    this.props.onRowCollapse({originalEvent: event, data: event.data});
-                }
-            }
-            else {
-                expandedRows.push(event.data);
-                if (this.props.onRowExpand) {
-                    this.props.onRowExpand({originalEvent: event, data: event.data});
-                }
-            }
-        }
-
-        if (this.props.onRowToggle) {
-            this.props.onRowToggle({
-                data: expandedRows
-            });
-        }
-    }
-
-    findExpandedRowIndex(row) {
-        let index = -1;
-        if(this.props.expandedRows) {
-            for(let i = 0; i < this.props.expandedRows.length; i++) {
-                if(ObjectUtils.equals(this.props.expandedRows[i], row)) {
-                    index = i;
-                    break;
-                }
-            }
-        }
-        return index;
-    }
-
-    isRowExpanded(row) {
-        let dataKey = this.props.dataKey;
-
-        if (dataKey) {
-            let dataKeyValue = String(ObjectUtils.resolveFieldData(row, dataKey));
-
-            return this.props.expandedRows && this.props.expandedRows[dataKeyValue] != null;
-        }
-        else {
-            return this.findExpandedRowIndex(row) !== -1
-        }
-    }
-
-    isSelectionEnabled() {
-        if(this.props.selectionMode || this.props.frozenSelectionMode != null) {
-            return true;
-        }
-        else {
-            if(Array.isArray(this.props.children)) {
-                for(let i = 0; i < this.props.children.length; i++) {
-                    if(this.props.children[i].props.selectionMode) {
-                        return true;
-                    }
-                }
-            }
-            else {
-                return this.props.children && this.props.children.selectionMode != null;
-            }
-        }
-
-        return false;
-    }
-
-    onRowDragStart(event, index) {
-        this.rowDragging = true;
-        this.draggedRowIndex = index;
-        event.dataTransfer.setData('text', 'b');    // For firefox
-    }
-
-    onRowDragEnd(event, index) {
-        this.rowDragging = false;
-        this.draggedRowIndex = null;
-        this.droppedRowIndex = null;
-    }
-
-    onRowDragOver(event, index) {
-        if (this.rowDragging && this.draggedRowIndex !== index) {
-            let rowElement = event.rowElement;
-            let rowY = DomHandler.getOffset(rowElement).top + DomHandler.getWindowScrollTop();
-            let pageY = event.originalEvent.pageY;
-            let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
-            let prevRowElement = rowElement.previousElementSibling;
-
-            if (pageY < rowMidY) {
-                DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
-
-                this.droppedRowIndex = index;
-                if (prevRowElement)
-                    DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
-                else
-                    DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
-            }
-            else {
-                if (prevRowElement)
-                    DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
-                else
-                    DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
-
-                this.droppedRowIndex = index + 1;
-                DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
-            }
-        }
-    }
-
-    onRowDragLeave(event) {
-        let rowElement = event.rowElement;
-        let prevRowElement = rowElement.previousElementSibling;
-        if (prevRowElement) {
-            DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
-        }
-
-        DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
-        DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
-    }
-
-    onRowDrop(event) {
-        if (this.droppedRowIndex != null) {
-            let dropIndex = (this.draggedRowIndex > this.droppedRowIndex) ? this.droppedRowIndex : (this.droppedRowIndex === 0) ? 0 : this.droppedRowIndex - 1;
-            let val = [...this.props.value];
-            ObjectUtils.reorderArray(val, this.draggedRowIndex, dropIndex);
-
-            if(this.props.onRowReorder) {
-                this.props.onRowReorder({
-                    originalEvent: event,
-                    value: val,
-                    dragIndex: this.draggedRowIndex,
-                    dropIndex: this.droppedRowIndex
-                })
-            }
-        }
-
-        //cleanup
-        this.onRowDragLeave(event);
-        this.onRowDragEnd(event);
-    }
-
-    renderRowGroupHeader(rowData, index) {
-        let content = null;
-
-        if (this.props.rowGroupMode === 'subheader' && this.props.expandableRowGroups) {
-            content = <RowTogglerButton onClick={this.onRowToggle} rowData={rowData} expanded={this.isRowExpanded(rowData)}/>
-        }
-
-        return (
-            <tr key={index + '_rowgroupheader'} className="p-rowgroup-header">
-                <td colSpan={React.Children.count(this.props.children)}>
-                    { content }
-                    <span className="p-rowgroup-header-name">
-                        {this.props.rowGroupHeaderTemplate(rowData, index)}
-                    </span>
-                </td>
-            </tr>
-        );
-    }
-
-    renderRowGroupFooter(rowData, index) {
-        return (
-            <tr key={index + '_rowgroupfooter'} className="p-rowgroup-footer">
-                {this.props.rowGroupFooterTemplate(rowData, index)}
-            </tr>
-        );
-    }
-
-    render() {
-        let rows;
-        let rpp = this.props.rows||0;
-        let first = this.props.first||0;
-        let selectionEnabled = this.isSelectionEnabled();
-        let rowGroupMode = this.props.rowGroupMode;
-        let hasSubheaderGrouping = (rowGroupMode && rowGroupMode === 'subheader');
-        let rowSpanGrouping = (rowGroupMode && rowGroupMode === 'rowspan');
-        let rowGroupHeaderExpanded = false;
-
-        if(this.props.value && this.props.value.length) {
-            rows = [];
-            let startIndex = this.props.lazy ? 0 : first;
-            let endIndex = this.props.virtualScroll ? (startIndex + rpp * 2) : (startIndex + rpp||this.props.value.length);
-
-            for(let i = startIndex; i < endIndex; i++) {
-                if(i >= this.props.value.length) {
-                    break;
-                }
-
-                let rowData = this.props.value[i];
-                let expanded = this.isRowExpanded(rowData);
-                let selected = selectionEnabled ? this.isSelected(this.props.value[i]) : false;
-                let contextMenuSelected = this.isContextMenuSelected(rowData);
-                let groupRowSpan;
-
-                //header row group
-                if(hasSubheaderGrouping) {
-                    let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.groupField);
-                    let previousRowFieldData = ObjectUtils.resolveFieldData(this.props.value[i - 1], this.props.groupField);
-
-                    if(i === 0 || (currentRowFieldData !== previousRowFieldData)) {
-                        rows.push(this.renderRowGroupHeader(rowData, i));
-                        rowGroupHeaderExpanded = expanded;
-                    }
-                }
-
-                if(rowSpanGrouping) {
-                    let rowSpanIndex = i;
-                    let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.sortField);
-                    let shouldCountRowSpan = (i === startIndex) || ObjectUtils.resolveFieldData(this.props.value[i - 1], this.props.sortField) !== currentRowFieldData ;
-
-                    if(shouldCountRowSpan) {
-                        let nextRowFieldData = currentRowFieldData;
-                        groupRowSpan = 0;
-
-                        while(currentRowFieldData === nextRowFieldData) {
-                            groupRowSpan++;
-                            let nextRowData = this.props.value[++rowSpanIndex];
-                            if(nextRowData) {
-                                nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.props.sortField);
-                            }
-                            else {
-                                break;
-                            }
-                        }
-                    }
-                }
-
-                let isRowGroupExpanded = this.props.expandableRowGroups && hasSubheaderGrouping && rowGroupHeaderExpanded;
-                if (!this.props.expandableRowGroups || isRowGroupExpanded) {
-                    //row content
-                    let bodyRow = <BodyRow key={i} value={this.props.value} rowData={rowData} rowIndex={i} onClick={this.onRowClick} onDoubleClick={this.props.onRowDoubleClick} onRightClick={this.onRowRightClick} onTouchEnd={this.onRowTouchEnd}
-                                        onRowToggle={this.onRowToggle} expanded={expanded} responsive={this.props.responsive} selectionMode={this.props.selectionMode}
-                                        onRadioClick={this.onRadioClick} onCheckboxClick={this.onCheckboxClick} selected={selected} contextMenuSelected={contextMenuSelected} rowClassName={this.props.rowClassName}
-                                        sortField={this.props.sortField} rowGroupMode={this.props.rowGroupMode} groupRowSpan={groupRowSpan}
-                                        onDragStart={(e) => this.onRowDragStart(e, i)} onDragEnd={this.onRowDragEnd} onDragOver={(e) => this.onRowDragOver(e, i)} onDragLeave={this.onRowDragLeave}
-                                        onDrop={this.onRowDrop} virtualScroll={this.props.virtualScroll} virtualRowHeight={this.props.virtualRowHeight}
-                                        editMode={this.props.editMode} rowEditorValidator={this.props.rowEditorValidator} onRowEditInit={this.props.onRowEditInit} onRowEditSave={this.props.onRowEditSave} onRowEditCancel={this.props.onRowEditCancel}
-                                        showRowReorderElement={this.props.showRowReorderElement} showSelectionElement={this.props.showSelectionElement}>
-                                        {this.props.children}
-                                </BodyRow>
-
-                    rows.push(bodyRow);
-                }
-
-                //row expansion
-                if(expanded && !(hasSubheaderGrouping && this.props.expandableRowGroups)) {
-                    let expandedRowContent = this.props.rowExpansionTemplate(rowData);
-                    let expandedRow = <tr key={i + '_expanded'}><td colSpan={this.props.children.length}>{expandedRowContent}</td></tr>
-                    rows.push(expandedRow);
-                }
-
-                //footer row group
-                if(hasSubheaderGrouping && (!this.props.expandableRowGroups || isRowGroupExpanded)) {
-                    let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.props.groupField);
-                    let nextRowFieldData = ObjectUtils.resolveFieldData(this.props.value[i + 1], this.props.groupField);
-
-                    if((i === this.props.value.length - 1) || (currentRowFieldData !== nextRowFieldData)) {
-                        rows.push(this.renderRowGroupFooter(rowData, i));
-                    }
-                }
-            }
-        }
-        else {
-            let emptyMessage = this.props.emptyMessage;
-
-            rows = !this.props.loading && emptyMessage ?
-                <tr className="p-datatable-emptymessage">
-                    <td colSpan={this.props.children.length}>
-                        {
-                            (typeof emptyMessage === 'function') ? emptyMessage(this.props.frozen) : emptyMessage
-                        }
-                        </td>
-                </tr> : null;
-        }
-
-        return (
-            <tbody className="p-datatable-tbody">
-                {rows}
-            </tbody>
-        );
-    }
-}
diff --git a/src/components/datatable/TableFooter.d.ts b/src/components/datatable/TableFooter.d.ts
deleted file mode 100644
index fb7311ba67..0000000000
--- a/src/components/datatable/TableFooter.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface TableFooterProps {
-}
-
-export class TableFooter extends React.Component<TableFooterProps,any> {}
diff --git a/src/components/datatable/TableFooter.js b/src/components/datatable/TableFooter.js
deleted file mode 100644
index 0e61ebf735..0000000000
--- a/src/components/datatable/TableFooter.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { Component } from 'react';
-import {FooterCell} from './FooterCell';
-
-export class TableFooter extends Component {
-
-    createFooterCells(root, column, i) {
-        let children = React.Children.toArray(root.props.children);
-
-        return React.Children.map(children, (column,i) => {
-            return <FooterCell key={i} {...column.props} />;
-        });
-    }
-
-    render() {
-        let content;
-        if(this.props.columnGroup) {
-            let rows = React.Children.toArray(this.props.columnGroup.props.children);
-            content = rows.map((row, i) => {
-                return <tr key={i}>{this.createFooterCells(row)}</tr>;
-            });
-        }
-        else {
-            content = <tr>{this.createFooterCells(this)}</tr>;
-        }
-
-        return (
-            <tfoot className="p-datatable-tfoot">
-                {content}
-            </tfoot>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/datatable/TableHeader.d.ts b/src/components/datatable/TableHeader.d.ts
deleted file mode 100644
index 144c4c8f67..0000000000
--- a/src/components/datatable/TableHeader.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface TableHeaderProps {
-}
-
-export class TableHeader extends React.Component<TableHeaderProps,any> {}
diff --git a/src/components/datatable/TableHeader.js b/src/components/datatable/TableHeader.js
deleted file mode 100644
index 22874087b7..0000000000
--- a/src/components/datatable/TableHeader.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Component } from 'react';
-import {HeaderCell} from './HeaderCell';
-
-export class TableHeader extends Component {
-
-    createHeaderCells(columns, renderOptions) {
-        return React.Children.map(columns, (column, i) => {
-            return <HeaderCell key={column.columnKey||column.field||i} columnProps={column.props} value={this.props.value} onSort={this.props.onSort}
-                        sortField={this.props.sortField} sortOrder={this.props.sortOrder} multiSortMeta={this.props.multiSortMeta}
-                        resizableColumns={this.props.resizableColumns} onColumnResizeStart={this.props.onColumnResizeStart}
-                        onFilter={this.props.onFilter} renderOptions={renderOptions} onHeaderCheckboxClick={this.props.onHeaderCheckboxClick} headerCheckboxSelected={this.props.headerCheckboxSelected}
-                        reorderableColumns={this.props.reorderableColumns} onDragStart={this.props.onColumnDragStart} onDragOver={this.props.onColumnDragOver}
-                        onDragLeave={this.props.onColumnDragLeave} onDrop={this.props.onColumnDrop} filters={this.props.filters} tabIndex={this.props.tabIndex} />;
-        });
-    }
-
-    hasColumnFilter(columns) {
-        if (columns) {
-            for (let col of columns) {
-                if (col.props.filter) {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
-    render() {
-        let content;
-        if (this.props.columnGroup) {
-            let rows = React.Children.toArray(this.props.columnGroup.props.children);
-            content = rows.map((row, i) => {
-                return <tr key={i}>{this.createHeaderCells(React.Children.toArray(row.props.children), {filterOnly: false, renderFilter: true, renderHeaderCheckbox: true})}</tr>;
-            });
-        }
-        else {
-            let columns = React.Children.toArray(this.props.children);
-
-            if (this.hasColumnFilter(columns)) {
-                content = (
-                    <>
-                        <tr>{this.createHeaderCells(columns, {filterOnly: false, renderFilter: false, renderHeaderCheckbox: false})}</tr>
-                        <tr>{this.createHeaderCells(columns, {filterOnly: true, renderFilter: true, renderHeaderCheckbox: true})}</tr>
-                    </>
-                );
-            }
-            else {
-                content = <tr>{this.createHeaderCells(columns, {filterOnly: false, renderFilter: false, renderHeaderCheckbox: true})}</tr>;
-            }
-        }
-
-        return (
-            <thead className="p-datatable-thead">
-                {content}
-            </thead>
-        );
-    }
-}
diff --git a/src/components/datatable/TableLoadingBody.js b/src/components/datatable/TableLoadingBody.js
deleted file mode 100644
index 6d7bf21465..0000000000
--- a/src/components/datatable/TableLoadingBody.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-
-export class TableLoadingBody extends Component {
-
-    renderRow(index) {
-        let cells = [];
-        for (let i = 0; i < this.props.columns.length; i++) {
-            cells.push(<td key={i}>{this.props.columns[i].props.loadingBody()}</td>);
-        }
-
-        return (
-            <tr key={index}>
-                {cells}
-            </tr>
-        );
-    }
-
-    renderRows() {
-        let rows = [];
-        for (let i = 0; i < this.props.rows; i++) {
-            rows.push(this.renderRow(i));
-        }
-
-        return rows;
-    }
-
-    render() {
-        const rows = this.renderRows();
-
-        return (
-            <tbody className="p-datatable-tbody">
-                {rows}
-            </tbody>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/dataview/DataView.css b/src/components/dataview/DataView.css
deleted file mode 100644
index 83e56cf377..0000000000
--- a/src/components/dataview/DataView.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.p-dataview {
-    position: relative;
-}
-
-.p-dataview .p-paginator {
-    text-align: center;
-}
-
-.p-dataview-column {
-    padding: .25em;
-}
-
-.p-dataview-content-empty {
-    padding: .25em .625em;
-}
-
-.p-dataview .p-dataview-header,
-.p-dataview .p-dataview-footer {
-    text-align: center;
-    padding: .5em .75em;
-}
-
-.p-dataview .p-dataview-header {
-    border-bottom: 0 none;
-}
-
-.p-dataview .p-dataview-footer {
-    border-top: 0 none;
-}
-
-.p-dataview .p-paginator-top {
-    border-bottom: 0 none;
-}
-
-.p-dataview .p-paginator-bottom {
-    border-top: 0 none;
-}
-
-.p-dataview.p-dataview-list > .p-dataview-content > div.p-grid > div {
-    width: 100%;
-}
-
-/* Loader */
-.p-dataview-loading-overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
-    z-index: 1;
-}
-
-.p-dataview-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-dataview .p-dataview-loading-icon {
-    font-size: 2em;
-}
diff --git a/src/components/dataview/DataView.d.ts b/src/components/dataview/DataView.d.ts
deleted file mode 100755
index 7c3c617ff5..0000000000
--- a/src/components/dataview/DataView.d.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from 'react';
-
-interface DataViewLayoutOptionsProps {
-    id?: string;
-    layout?: string;
-    style?: string;
-    className?: string;
-    onChange(e: {originalEvent: Event, value: string}): void;
-}
-
-export class DataViewLayoutOptions extends React.Component<DataViewLayoutOptionsProps,any> {}
-
-interface DataViewProps {
-    id?: string;
-    header?: JSX.Element | string;
-    footer?: JSX.Element | string;
-    value?: any[];
-    layout?: string;
-    rows?: number;
-    first?: number;
-    totalRecords?: number;
-    paginator?: boolean;
-    paginatorPosition?: string;
-    alwaysShowPaginator?: boolean;
-    paginatorTemplate?: string;
-    paginatorLeft?: any;
-    paginatorRight?: any;
-    pageLinkSize?: number;
-    rowsPerPageOptions?: number[];
-    currentPageReportTemplate?: string;
-    emptyMessage?: string;
-    sortField?: string;
-    sortOrder?: number;
-    style?: string;
-    className?: string;
-    lazy?: boolean;
-    loading?: boolean;
-    loadingIcon?: string;
-    onPage?(e: {originalEvent: Event, first: number, rows: number}): void;
-    itemTemplate?(item: any, layout: "grid" | "list"): JSX.Element | undefined;
-}
-
-// tslint:disable-next-line:max-classes-per-file
-export class DataView extends React.Component<DataViewProps,any> {}
diff --git a/src/components/dataview/DataView.js b/src/components/dataview/DataView.js
deleted file mode 100644
index 88d8c4e9a1..0000000000
--- a/src/components/dataview/DataView.js
+++ /dev/null
@@ -1,352 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {Paginator} from '../paginator/Paginator';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class DataViewLayoutOptions extends Component {
-
-    static defaultProps = {
-        id: null,
-        style: null,
-        className: null,
-        layout: null,
-        onChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        layout: PropTypes.string,
-        onChange: PropTypes.func.isRequired
-    }
-
-    constructor(props) {
-        super(props);
-        this.changeLayout = this.changeLayout.bind(this);
-    }
-
-    changeLayout(event, layoutMode) {
-        this.props.onChange({
-            originalEvent: event,
-            value: layoutMode
-        });
-        event.preventDefault();
-    }
-
-    render() {
-        const className = classNames('p-dataview-layout-options p-selectbutton p-buttonset', this.props.className);
-        const buttonListClass = classNames("p-button p-button-icon-only", {'p-highlight': this.props.layout === 'list'});
-        const buttonGridClass = classNames("p-button p-button-icon-only", {'p-highlight': this.props.layout === 'grid'});
-
-        return (
-            <div id={this.props.id} style={this.props.style} className={className}>
-                <button type="button" className={buttonListClass} onClick={(event) => this.changeLayout(event, 'list')}>
-                    <i className="pi pi-bars p-button-icon-left"></i>
-                    <span className="p-button-text p-clickable">p-btn</span>
-                </button>
-                <button type="button" className={buttonGridClass} onClick={(event) => this.changeLayout(event, 'grid')}>
-                    <i className="pi pi-th-large p-button-icon-left"></i>
-                    <span className="p-button-text p-clickable">p-btn</span>
-                </button>
-            </div>
-        );
-    }
-}
-
-class DataViewItem extends Component {
-
-    static defaultProps = {
-        template: null,
-        item: null,
-        layout: null
-    }
-
-    static propTypes = {
-        template: PropTypes.func,
-        item: PropTypes.any,
-        layout: PropTypes.string
-    }
-
-    render() {
-        return this.props.template(this.props.item, this.props.layout);
-    }
-
-}
-
-export class DataView extends Component {
-
-    static defaultProps = {
-        id: null,
-        header: null,
-        footer: null,
-        value: null,
-        layout: 'list',
-        rows: null,
-        first: 0,
-        totalRecords: null,
-        paginator: false,
-        paginatorPosition: 'bottom',
-        alwaysShowPaginator: true,
-        paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
-        paginatorLeft:null,
-        paginatorRight: null,
-        pageLinkSize: 5,
-        rowsPerPageOptions: null,
-        currentPageReportTemplate: '({currentPage} of {totalPages})',
-        emptyMessage: 'No records found',
-        sortField: null,
-        sortOrder: null,
-        style: null,
-        className: null,
-        lazy: false,
-        loading: false,
-        loadingIcon: 'pi pi-spinner',
-        itemTemplate: null,
-        onPage: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        value: PropTypes.array,
-        layout: PropTypes.string,
-        rows: PropTypes.number,
-        first: PropTypes.number,
-        totalRecords: PropTypes.number,
-        paginator: PropTypes.bool,
-        paginatorPosition: PropTypes.string,
-        alwaysShowPaginator: PropTypes.bool,
-        paginatorTemplate: PropTypes.string,
-        paginatorLeft: PropTypes.any,
-        paginatorRight: PropTypes.any,
-        pageLinkSize: PropTypes.number,
-        rowsPerPageOptions: PropTypes.array,
-        currentPageReportTemplate: PropTypes.string,
-        emptyMessage: PropTypes.string,
-        sortField: PropTypes.string,
-        sortOrder: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        lazy: PropTypes.bool,
-        loading: PropTypes.bool,
-        loadingIcon: PropTypes.string,
-        itemTemplate: PropTypes.func.isRequired,
-        onPage: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        if (!this.props.onPage) {
-            this.state = {
-                first: this.props.first,
-                rows: this.props.rows
-            };
-        }
-        this.sortChange = false;
-        this.onPageChange = this.onPageChange.bind(this)
-    }
-
-    getTotalRecords() {
-        if (this.props.totalRecords)
-            return this.props.totalRecords;
-        else
-            return this.props.value ? this.props.value.length : 0;
-    }
-
-    createPaginator(position) {
-        const className = 'p-paginator-' + position;
-        const first = this.props.onPage ? this.props.first: this.state.first;
-        const rows = this.props.onPage ? this.props.rows : this.state.rows;
-        const totalRecords = this.getTotalRecords();
-
-        return (
-            <Paginator first={first} rows={rows} pageLinkSize={this.props.pageLinkSize} className={className} onPageChange={this.onPageChange} template={this.props.paginatorTemplate}
-                        totalRecords={totalRecords} rowsPerPageOptions={this.props.rowsPerPageOptions} currentPageReportTemplate={this.props.currentPageReportTemplate}
-                        leftContent={this.props.paginatorLeft} rightContent={this.props.paginatorRight} alwaysShow={this.props.alwaysShowPaginator} />
-        );
-    }
-
-    onPageChange(event) {
-        if (this.props.onPage) {
-            this.props.onPage({
-                originalEvent: event,
-                first: event.first,
-                rows: event.rows
-            });
-        }
-        else {
-            this.setState({
-                first:event.first,
-                rows:event.rows
-            });
-        }
-    }
-
-    isEmpty() {
-        return (!this.props.value || this.props.value.length === 0);
-    }
-
-    sort() {
-        if (this.props.value) {
-            const value = [...this.props.value];
-
-            value.sort((data1, data2) => {
-                let value1 = ObjectUtils.resolveFieldData(data1, this.props.sortField);
-                let value2 = ObjectUtils.resolveFieldData(data2, this.props.sortField);
-                let result = null;
-
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-
-                return (this.props.sortOrder * result);
-            });
-
-            return value;
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderLoader() {
-        if (this.props.loading) {
-            let iconClassName = classNames('p-dataview-loading-icon pi-spin', this.props.loadingIcon);
-
-            return (
-                <div className="p-dataview-loading">
-                    <div className="p-dataview-loading-overlay p-component-overlay"></div>
-                    <div className="p-dataview-loading-content">
-                        <i className={iconClassName}></i>
-                    </div>
-                </div>
-            );
-        }
-
-        return null;
-    }
-
-    renderTopPaginator() {
-        if (this.props.paginator && (this.props.paginatorPosition !== 'bottom' || this.props.paginatorPosition === 'both')){
-            return this.createPaginator('top');
-        }
-
-        return null;
-    }
-
-    renderBottomPaginator() {
-        if (this.props.paginator && (this.props.paginatorPosition !== 'top' || this.props.paginatorPosition === 'both')) {
-            return this.createPaginator('bottom');
-        }
-
-        return null;
-    }
-
-    renderEmptyMessage() {
-        if (!this.props.loading) {
-            return <div className="p-col-12">{this.props.emptyMessage}</div>;
-        }
-
-        return null;
-    }
-
-    renderHeader() {
-        if (this.props.header) {
-            return <div className="p-dataview-header">{this.props.header}</div>;
-        }
-
-        return null;
-    }
-
-    renderFooter() {
-        if (this.props.footer) {
-            return <div className="p-dataview-footer"> {this.props.footer}</div>;
-        }
-
-        return null;
-    }
-
-    renderItems(value) {
-        if (value && value.length) {
-            if (this.props.paginator) {
-                const rows = this.props.onPage ? this.props.rows : this.state.rows;
-                const first = this.props.lazy ? 0 : this.props.onPage ? this.props.first : this.state.first;
-                const last = rows + first;
-                let items = [];
-
-                for (let i = first; i < last; i++) {
-                    items.push(<DataViewItem key={i} template={this.props.itemTemplate} layout={this.props.layout} item={value[i]} />);
-                }
-
-                return items;
-            }
-            else {
-                return (
-                    value.map((item, index) => {
-                        return <DataViewItem key={index} template={this.props.itemTemplate} layout={this.props.layout} item={item} />
-                    })
-                );
-            }
-        }
-        else {
-            return this.renderEmptyMessage();
-        }
-    }
-
-    renderContent(value) {
-        const items = this.renderItems(value);
-
-        return (
-            <div className="p-dataview-content">
-                <div className="p-grid">
-                    {items}
-                </div>
-            </div>
-        );
-    }
-
-    processData() {
-        let data = this.props.value;
-
-        if (data && data.length) {
-            if (this.props.sortField) {
-                data = this.sort();
-            }
-        }
-
-        return data;
-    }
-
-    render() {
-        const value = this.processData();
-        const className = classNames('p-dataview p-component', {'p-dataview-list': (this.props.layout === 'list'), 'p-dataview-grid': (this.props.layout === 'grid')}, this.props.className);
-        const loader = this.renderLoader();
-        const topPaginator = this.renderTopPaginator();
-        const bottomPaginator = this.renderBottomPaginator() ;
-        const header =  this.renderHeader();
-        const footer = this.renderFooter();
-        const content = this.renderContent(value);
-
-        return (
-            <div id={this.props.id} style={this.props.style} className={className}>
-                {loader}
-                {header}
-                {topPaginator}
-                {content}
-                {bottomPaginator}
-                {footer}
-            </div>
-        );
-    }
-
-}
diff --git a/src/components/deferredcontent/DeferredContent.d.ts b/src/components/deferredcontent/DeferredContent.d.ts
deleted file mode 100644
index fd494dd6fe..0000000000
--- a/src/components/deferredcontent/DeferredContent.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-interface DeferredContentProps {
-    onLoad?(event: Event): void;
-}
-
-export class DeferredContent extends React.Component<DeferredContentProps,any> {}
\ No newline at end of file
diff --git a/src/components/deferredcontent/DeferredContent.js b/src/components/deferredcontent/DeferredContent.js
deleted file mode 100644
index 33eb9ac813..0000000000
--- a/src/components/deferredcontent/DeferredContent.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, {Component} from "react";
-import PropTypes from "prop-types";
-
-export class DeferredContent extends Component {
-
-    static defaultProps = {
-        onload: null
-    }
-
-    static propTypes = {
-        onLoad: PropTypes.func
-    }
-
-    constructor() {
-        super();
-        this.state = {
-            loaded: false
-        };
-    }
-
-    componentDidMount() {
-        if (!this.state.loaded) {
-            if (this.shouldLoad())
-                this.load();
-            else
-                this.bindScrollListener();
-        }
-    }
-
-    bindScrollListener() {
-        this.documentScrollListener = () => {
-            if (this.shouldLoad()) {
-                this.load();
-                this.unbindScrollListener();
-            }
-        };
-
-        window.addEventListener('scroll', this.documentScrollListener);
-    }
-
-    unbindScrollListener() {
-        if (this.documentScrollListener) {
-            window.removeEventListener('scroll', this.documentScrollListener);
-            this.documentScrollListener = null;
-        }
-    }
-
-    shouldLoad() {
-        if (this.state.loaded) {
-            return false;
-        }
-        else {
-            let rect = this.container.getBoundingClientRect();
-            let docElement = document.documentElement;
-            let winHeight = docElement.clientHeight;
-    
-            return (winHeight >= rect.top);
-        }
-    }
-
-    load(event) {
-        this.setState({loaded:true});
-        
-        if (this.props.onLoad) {
-            this.props.onLoad(event);
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindScrollListener();
-    }
-
-    render() {
-        return (
-            <div ref={(el) => this.container = el}>
-                {this.state.loaded ? this.props.children : null}
-            </div>
-        );
-    }
-
-}
\ No newline at end of file
diff --git a/src/components/dialog/Dialog.css b/src/components/dialog/Dialog.css
deleted file mode 100644
index d15aecfc1c..0000000000
--- a/src/components/dialog/Dialog.css
+++ /dev/null
@@ -1,230 +0,0 @@
-.p-dialog-mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: none;
-    pointer-events: none;
-}
-
-.p-component-overlay {
-    pointer-events: auto;
-}
-
-.p-dialog-visible {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-dialog {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    pointer-events: auto;
-    max-height: 90%;
-}
-.p-dialog .p-dialog-titlebar {
-    padding: .5em .75em;
-    position: relative;
-    border: 0;
-    flex-shrink: 0;
-}
-.p-dialog .p-dialog-content {
-    position: relative;
-    border: 0;
-    padding: .5em .75em;
-    background: none;
-    zoom: 1;
-    overflow-y: auto;
-}
-.p-dialog-resizable .p-dialog-content {
-    overflow: auto;
-}
-.p-dialog .p-resizable-handle {
-    width: 14px;
-    height: 14px;
-    right: 3px;
-    bottom: 3px;
-    position: absolute;
-    font-size: .1px;
-    display: block;
-    cursor: se-resize;
-}
-.p-draggable .p-dialog-titlebar {
-    cursor: move;
-}
-.p-dialog .p-dialog-titlebar-icons {
-    float: right;
-}
-.p-dialog .p-dialog-titlebar-icons:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-.p-dialog .p-dialog-titlebar-icon {
-    text-decoration: none;
-    padding: .125em;
-    cursor: pointer;
-    display: inline-block;
-    vertical-align: middle;
-    border: 1px solid transparent;
-}
-.p-dialog .p-dialog-titlebar-icon span {
-    display: block;
-    margin: 0;
-}
-.p-dialog-footer {
-    padding: 1em;
-    text-align: right;
-    flex-shrink: 0;
-}
-/* ConfirmDialog */
-.p-confirmdialog {
-    width: 30em;
-}
-.p-confirmdialog.p-dialog .p-dialog-content {
-    padding: 1em 2em;
-}
-.p-confirmdialog .p-dialog-content .p-confirmdialog-icon {
-    font-size: 1.5em;
-    vertical-align: middle;
-    margin-right: .5em;
-}
-.p-confirmdialog .p-dialog-content .p-confirmdialog-message {
-    vertical-align: middle;
-}
-/* Fluid */
-.p-fluid .p-dialog-footer .p-button {
-    width: auto;
-}
-/* RTL */
-.p-rtl .p-dialog .p-dialog-titlebar-close  {
-    float: left;
-}
-.p-rtl .p-dialog .p-dialog-footer {
-    text-align: left;
-}
-@media screen and (max-width: 40em) {
-    .p-confirmdialog {
-        width: 90%;
-    }
-}
-/* Animation */
-/* Center */
-.p-dialog-enter {
-    opacity: 0;
-    transform: scale(0.7);
-}
-
-.p-dialog-enter-active {
-    opacity: 1;
-    transform: scale(1);
-    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-dialog-enter-done {
-    transform: none;
-}
-
-.p-dialog-exit-active {
-    opacity: 0;
-    transform: scale(0.7);
-    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-
-/* Top, Bottom, Left, Right, Top* and Bottom* */
-.p-dialog-top .p-dialog,
-.p-dialog-bottom .p-dialog,
-.p-dialog-left .p-dialog,
-.p-dialog-right .p-dialog,
-.p-dialog-topleft .p-dialog,
-.p-dialog-topright .p-dialog,
-.p-dialog-bottomleft .p-dialog,
-.p-dialog-bottomright .p-dialog {
-    margin: .75em;
-    transition: all .3s ease-out;
-}
-
-.p-dialog-top .p-dialog-enter,
-.p-dialog-top .p-dialog-exit-active  {
-    transform: translate3d(0px, -100%, 0px);
-}
-
-.p-dialog-bottom .p-dialog-enter,
-.p-dialog-bottom .p-dialog-exit-active {
-    transform: translate3d(0px, 100%, 0px);
-}
-
-.p-dialog-left .p-dialog-enter,
-.p-dialog-left .p-dialog-exit-active,
-.p-dialog-topleft .p-dialog-enter,
-.p-dialog-topleft .p-dialog-exit-active,
-.p-dialog-bottomleft .p-dialog-enter,
-.p-dialog-bottomleft .p-dialog-exit-active {
-    transform: translate3d(-100%, 0px, 0px);
-}
-
-.p-dialog-right .p-dialog-enter,
-.p-dialog-right .p-dialog-exit-active,
-.p-dialog-topright .p-dialog-enter,
-.p-dialog-topright .p-dialog-exit-active,
-.p-dialog-bottomright .p-dialog-enter,
-.p-dialog-bottomright .p-dialog-exit-active {
-    transform: translate3d(100%, 0px, 0px);
-}
-
-.p-dialog-top .p-dialog-enter-active,
-.p-dialog-bottom .p-dialog-enter-active,
-.p-dialog-left .p-dialog-enter-active,
-.p-dialog-topleft .p-dialog-enter-active,
-.p-dialog-bottomleft .p-dialog-enter-active,
-.p-dialog-right .p-dialog-enter-active,
-.p-dialog-topright .p-dialog-enter-active,
-.p-dialog-bottomright .p-dialog-enter-active {
-    transform: translate3d(0px, 0px, 0px);
-}
-
-/* Maximize */
-.p-dialog-maximized {
-    -webkit-transition: none;
-    transition: none;
-    transform: none;
-    width: 100vw !important;
-    max-height: 100%;
-    height: 100%;
-}
-.p-dialog-maximized .p-dialog-content {
-    flex-grow: 1;
-}
-
-/* Position */
-.p-dialog-left {
-    justify-content: flex-start;
-}
-.p-dialog-right {
-    justify-content: flex-end;
-}
-.p-dialog-top {
-    align-items: flex-start;
-}
-.p-dialog-topleft {
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-.p-dialog-topright {
-    justify-content: flex-end;
-    align-items: flex-start;
-}
-.p-dialog-bottom {
-    align-items: flex-end;
-}
-.p-dialog-bottomleft {
-    justify-content: flex-start;
-    align-items: flex-end;
-}
-.p-dialog-bottomright {
-    justify-content: flex-end;
-    align-items: flex-end;
-}
diff --git a/src/components/dialog/Dialog.d.ts b/src/components/dialog/Dialog.d.ts
deleted file mode 100644
index da260004a7..0000000000
--- a/src/components/dialog/Dialog.d.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-
-interface DialogProps {
-    id?: string;
-    header?: any;
-    footer?: any;
-    visible?: boolean;
-    position?: string;
-    modal?: boolean;
-    contentStyle?: object;
-    closeOnEscape?: boolean;
-    dismissableMask?: boolean;
-    rtl?: boolean;
-    closable?: boolean;
-    style?: object;
-    className?: string;
-    maskClassName?: string;
-    showHeader?: boolean;
-    appendTo?: HTMLElement;
-    baseZIndex?: number;
-    maximizable?: boolean;
-    blockScroll?: boolean;
-    ariaCloseIconLabel?: string;
-    focusOnShow?: boolean;
-    maximized?: boolean;
-    onMaximize?(e: {originalEvent: Event, maximized: boolean}): void;
-    onHide(): void;
-    onShow?(): void;
-    iconsTemplate?(): JSX.Element | undefined;
-}
-
-export class Dialog extends React.Component<DialogProps,any> {}
diff --git a/src/components/dialog/Dialog.js b/src/components/dialog/Dialog.js
deleted file mode 100644
index 674537b71d..0000000000
--- a/src/components/dialog/Dialog.js
+++ /dev/null
@@ -1,411 +0,0 @@
-import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-import { CSSTransition } from 'react-transition-group';
-
-export class Dialog extends Component {
-
-    static defaultProps = {
-        id: null,
-        header: null,
-        footer: null,
-        visible: false,
-        position: 'center',
-        modal: true,
-        onHide: null,
-        onShow: null,
-        contentStyle: null,
-        closeOnEscape: true,
-        dismissableMask: false,
-        rtl: false,
-        closable: true,
-        style: null,
-        className: null,
-        maskClassName: null,
-        showHeader: true,
-        appendTo: null,
-        baseZIndex: 0,
-        maximizable: false,
-        blockScroll: false,
-        iconsTemplate: null,
-        ariaCloseIconLabel: 'Close',
-        focusOnShow: true,
-        maximized: false,
-        onMaximize: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        visible: PropTypes.bool,
-        position: PropTypes.string,
-        modal: PropTypes.bool,
-        onHide: PropTypes.func.isRequired,
-        onShow: PropTypes.func,
-        contentStyle: PropTypes.object,
-        closeOnEscape: PropTypes.bool,
-        dismissableMask: PropTypes.bool,
-        rtl: PropTypes.bool,
-        closable: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        maskClassName: PropTypes.string,
-        showHeader: PropTypes.bool,
-        appendTo: PropTypes.object,
-        baseZIndex: PropTypes.number,
-        maximizable: PropTypes.bool,
-        blockScroll: PropTypes.bool,
-        iconsTemplate: PropTypes.func,
-        ariaCloseIconLabel: PropTypes.string,
-        focusOnShow: PropTypes.bool,
-        maximized: PropTypes.bool,
-        onMaximize: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            maskVisible: props.visible
-        };
-
-        if (!this.props.onMaximize) {
-            this.state.maximized = props.maximized;
-        }
-
-        this.onClose = this.onClose.bind(this);
-        this.toggleMaximize = this.toggleMaximize.bind(this);
-        this.onMaskClick = this.onMaskClick.bind(this);
-        this.onDialogClick = this.onDialogClick.bind(this);
-        this.onEntered = this.onEntered.bind(this);
-        this.onExit = this.onExit.bind(this);
-        this.onExited = this.onExited.bind(this);
-
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    onClose(event) {
-        this.props.onHide();
-        event.preventDefault();
-    }
-
-    focus() {
-        let focusable = DomHandler.findSingle(this.dialog, 'button');
-        if (focusable) {
-            focusable.focus();
-        }
-    }
-
-    onMaskClick(event) {
-        if (this.props.modal && this.props.closable && this.props.dismissableMask) {
-            this.onClose(event);
-        }
-    }
-
-    onDialogClick(event) {
-        event.stopPropagation();
-    }
-
-    toggleMaximize(event) {
-        let maximized = !this.maximized;
-
-        if (this.props.onMaximize) {
-            this.props.onMaximize({
-                originalEvent: event,
-                maximized
-            });
-        }
-        else {
-            this.setState({
-                maximized
-            }, this.changeScrollOnMaximizable);
-        }
-
-        event.preventDefault();
-    }
-
-    getPositionClass() {
-        const positions = ['center', 'left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
-        const pos = positions.find(item => item === this.props.position);
-
-        return pos ? `p-dialog-${pos}` : '';
-    }
-
-    get zIndex() {
-        return this.props.baseZIndex + DomHandler.generateZIndex();
-    }
-
-    get maximized() {
-        return this.props.onMaximize ? this.props.maximized : this.state.maximized;
-    }
-
-    onEntered() {
-        if (this.props.onShow) {
-            this.props.onShow();
-        }
-
-        if (this.props.focusOnShow) {
-            this.focus();
-        }
-
-        this.enableDocumentSettings();
-    }
-
-    onExit() {
-        this.props.onHide();
-    }
-
-    onExited() {
-        this.setState({ maskVisible: false });
-        this.disableDocumentSettings();
-    }
-
-    enableDocumentSettings() {
-        if (this.props.modal) {
-            this.bindGlobalListeners();
-        }
-
-        if (this.props.blockScroll || (this.props.maximizable && this.maximized)) {
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
-        }
-    }
-
-    disableDocumentSettings() {
-        if (this.props.modal) {
-            this.unbindGlobalListeners();
-
-            let hasBlockScroll = document.primeDialogParams && document.primeDialogParams.some(param => param.hasBlockScroll);
-            if (!hasBlockScroll) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            }
-        }
-        else if (this.props.blockScroll || (this.props.maximizable && this.maximized)) {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-        }
-    }
-
-    bindGlobalListeners() {
-        if (this.props.closeOnEscape && this.props.closable) {
-            this.bindDocumentKeyDownListener();
-        }
-    }
-
-    unbindGlobalListeners() {
-        this.unbindDocumentKeyDownListener();
-    }
-
-    bindDocumentKeyDownListener() {
-        this.documentKeyDownListener = (event) => {
-            let currentTarget = event.currentTarget;
-
-            if (currentTarget && currentTarget.primeDialogParams) {
-                let params = currentTarget.primeDialogParams;
-                let paramLength = params.length;
-                let dialogId = params[paramLength - 1].id;
-
-                if (dialogId === this.id) {
-                    let dialog = document.getElementById(dialogId);
-
-                    if (event.which === 27) {
-                        this.onClose(event);
-                        event.stopImmediatePropagation();
-
-                        params.splice(paramLength - 1, 1);
-                    }
-                    else if (event.which === 9) {
-                        event.preventDefault();
-                        let focusableElements = DomHandler.getFocusableElements(dialog);
-                        if (focusableElements && focusableElements.length > 0) {
-                            if (!document.activeElement) {
-                                focusableElements[0].focus();
-                            }
-                            else {
-                                let focusedIndex = focusableElements.indexOf(document.activeElement);
-                                if (event.shiftKey) {
-                                    if (focusedIndex === -1 || focusedIndex === 0)
-                                        focusableElements[focusableElements.length - 1].focus();
-                                    else
-                                        focusableElements[focusedIndex - 1].focus();
-                                }
-                                else {
-                                    if (focusedIndex === -1 || focusedIndex === (focusableElements.length - 1))
-                                        focusableElements[0].focus();
-                                    else
-                                        focusableElements[focusedIndex + 1].focus();
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        };
-
-        let newParam = { id: this.id, hasBlockScroll: this.props.blockScroll };
-        document.primeDialogParams = document.primeDialogParams ? [ ...document.primeDialogParams, newParam ] : [ newParam ];
-
-        document.addEventListener('keydown', this.documentKeyDownListener);
-    }
-
-    unbindDocumentKeyDownListener() {
-        if (this.documentKeyDownListener) {
-            document.removeEventListener('keydown', this.documentKeyDownListener);
-            document.primeDialogParams = document.primeDialogParams && document.primeDialogParams.filter(param => param.id !== this.id);
-            this.documentKeyDownListener = null;
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.visible) {
-            this.mask.style.zIndex = String(this.zIndex);
-            this.onEntered();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.visible && !this.state.maskVisible) {
-            this.setState({ maskVisible: true }, () => {
-                this.mask.style.zIndex = String(this.zIndex);
-            });
-        }
-
-        if (prevProps.maximized !== this.props.maximized && this.props.onMaximize) {
-            this.changeScrollOnMaximizable();
-        }
-    }
-
-    changeScrollOnMaximizable() {
-        if (!this.props.blockScroll) {
-            let funcName = this.maximized ? 'addClass' : 'removeClass';
-            DomHandler[funcName](document.body, 'p-overflow-hidden');
-        }
-    }
-
-    componentWillUnmount() {
-        this.disableDocumentSettings();
-    }
-
-    renderCloseIcon() {
-        if (this.props.closable) {
-            return (
-                <button type="button" className="p-dialog-titlebar-icon p-dialog-titlebar-close p-link" aria-label={this.props.ariaCloseIconLabel} onClick={this.onClose}>
-                    <span className="p-dialog-titlebar-close-icon pi pi-times"></span>
-                </button>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMaximizeIcon() {
-        const iconClassName = classNames('p-dialog-titlebar-maximize-icon pi', {'pi-window-maximize': !this.maximized, 'pi-window-minimize': this.maximized});
-
-        if (this.props.maximizable) {
-            return (
-                <button type="button" className="p-dialog-titlebar-icon p-dialog-titlebar-maximize p-link" onClick={this.toggleMaximize}>
-                    <span className={iconClassName}></span>
-                </button>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderIconsTemplate() {
-        if (this.props.iconsTemplate) {
-            return this.props.iconsTemplate(this);
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderHeader() {
-        if (this.props.showHeader) {
-            const closeIcon = this.renderCloseIcon();
-            const maximizeIcon = this.renderMaximizeIcon();
-            const iconsTemplate = this.renderIconsTemplate();
-
-            return (
-                <div ref={el => this.headerElement = el} className="p-dialog-titlebar">
-                    <span id={this.id + '_header'} className="p-dialog-title">{this.props.header}</span>
-                    <div className="p-dialog-titlebar-icons">
-                        {iconsTemplate}
-                        {maximizeIcon}
-                        {closeIcon}
-                    </div>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderContent() {
-        return (
-            <div ref={el => this.contentElement = el} className="p-dialog-content" style={this.props.contentStyle}>
-                {this.props.children}
-            </div>
-        );
-    }
-
-    renderFooter() {
-        if (this.props.footer) {
-            return (
-                <div ref={el => this.footerElement = el} className="p-dialog-footer">{this.props.footer}</div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderElement() {
-        const className = classNames('p-dialog p-component', this.props.className, {
-            'p-dialog-rtl': this.props.rtl,
-            'p-dialog-maximized': this.maximized
-        });
-
-        const maskClassName = classNames('p-dialog-mask', {
-            'p-component-overlay': this.props.modal,
-            'p-dialog-visible': this.state.maskVisible
-        }, this.props.maskClassName, this.getPositionClass());
-
-        const header = this.renderHeader();
-        const content = this.renderContent();
-        const footer = this.renderFooter();
-
-        let transitionTimeout = {
-            enter: this.props.position === 'center' ? 150 : 300,
-            exit: this.props.position === 'center' ? 150 : 300,
-        };
-
-        return (
-            <div ref={(el) => this.mask = el} className={maskClassName} onClick={this.onMaskClick}>
-                <CSSTransition classNames="p-dialog" timeout={transitionTimeout} in={this.props.visible} unmountOnExit
-                    onEntered={this.onEntered} onExit={this.onExit} onExited={this.onExited}>
-                    <div ref={el => this.dialog = el} id={this.id} className={className} style={this.props.style} onClick={this.onDialogClick}
-                         aria-labelledby={this.id + '_label'} role="dialog" aria-modal={this.props.model}>
-                        {header}
-                        {content}
-                        {footer}
-                    </div>
-                </CSSTransition>
-            </div>
-        );
-    }
-
-    render() {
-        const element = this.renderElement();
-
-        if (this.props.appendTo)
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        else
-            return element;
-    }
-}
diff --git a/src/components/dropdown/Dropdown.css b/src/components/dropdown/Dropdown.css
deleted file mode 100644
index cdc4af41f4..0000000000
--- a/src/components/dropdown/Dropdown.css
+++ /dev/null
@@ -1,138 +0,0 @@
-.p-dropdown {
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    vertical-align: middle;
-}
-
-.p-dropdown .p-dropdown-hidden-select {
-    bottom: 0;
-    clip: auto;
-}
-
-.p-dropdown .p-dropdown-hidden-select select {
-    -webkit-transform: none;
-    transform: none;
-    height: 1px;
-    position: absolute;
-    top: 0;
-    clip: rect(0px, 0px, 0px, 0px);
-    pointer-events: none;
-}
-
-.p-dropdown .p-dropdown-clear-icon {
-    position: absolute;
-    right: 2em;
-    top: 50%;
-    font-size: 1em;
-    height: 1em;
-    margin-top: -.5em;
-}
-
-.p-dropdown .p-dropdown-trigger {
-    border-right: none;
-    border-top: none;
-    border-bottom: none;
-    cursor: pointer;
-    width: 1.5em;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 0 .25em;
-}
-
-.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    position: absolute;
-}
-
-.p-dropdown .p-dropdown-label  {
-    display: block;
-    border: none;
-    white-space: nowrap;
-    overflow: hidden;
-    font-weight: normal;
-    width: 100%;
-    padding-right: 1.5em;
-}
-
-.p-dropdown .p-dropdown-item-empty,
-.p-dropdown .p-dropdown-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-dropdown.p-disabled .p-dropdown-trigger,
-.p-dropdown.p-disabled .p-dropdown-label {
-    cursor: default;
-}
-
-.p-dropdown label.p-dropdown-label  {
-    cursor: pointer;
-}
-
-.p-dropdown input.p-dropdown-label  {
-    cursor: default;
-}
-
-.p-dropdown .p-dropdown-panel {
-    min-width: 100%;
-}
-
-.p-dropdown-panel {
-    position: absolute;
-    height: auto;
-}
-
-.p-dropdown-panel .p-dropdown-items-wrapper {
-    overflow: auto;
-}
-
-.p-dropdown-panel .p-dropdown-item {
-    font-weight: normal;
-    border: 0 none;
-    cursor: pointer;
-    margin: 1px 0;
-    padding: .125em .25em;
-    text-align: left;
-}
-
-.p-dropdown-panel .p-dropdown-item-group {
-    font-weight: bold;
-}
-
-.p-dropdown-panel .p-dropdown-list {
-    padding: 0.4em;
-    border: 0 none;
-    margin: 0;
-    list-style-type: none;
-}
-
-.p-dropdown-panel .p-dropdown-filter {
-    width: 100%;
-    box-sizing: border-box;
-    padding-right: 1.5em;
-}
-
-.p-dropdown-panel .p-dropdown-filter-container {
-    position: relative;
-    margin: 0;
-    padding: 0.4em;
-    display: inline-block;
-}
-
-.p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
-    position: absolute;
-    top: .8em;
-    right: 1em;
-}
-
-/** Dropdown **/
-.p-fluid .p-dropdown {
-    width: 100%;
-    min-width: 100%;
-}
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
deleted file mode 100755
index c350c03f4b..0000000000
--- a/src/components/dropdown/Dropdown.d.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface DropdownProps {
-    id?: string;
-    name?: string;
-    value?: any;
-    options?: any[];
-    optionLabel?: string;
-    optionValue?: string;
-    style?: object;
-    className?: string;
-    autoWidth?: boolean;
-    scrollHeight?: string;
-    filter?: boolean;
-    filterBy?: string;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    editable?:boolean;
-    placeholder?: string;
-    required?: boolean;
-    disabled?: boolean;
-    appendTo?: any;
-    tabIndex?: number;
-    autoFocus?: boolean;
-    filterInputAutoFocus?: boolean;
-    lazy?: boolean;
-    panelClassName?: string;
-    panelStyle?: object;
-    dataKey?: string;
-    inputId?: string;
-    showClear?: boolean;
-    maxLength?: number;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabel?: string,
-    ariaLabelledBy?: string,
-    itemTemplate?(option:any): React.ReactNode;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-    onFocus?(e: Event): void;
-    onBlur?(e: Event): void;
-    onMouseDown?(event: Event): void;
-    onContextMenu?(event: Event): void;
-}
-
-export class Dropdown extends React.Component<DropdownProps,any> {}
diff --git a/src/components/dropdown/Dropdown.js b/src/components/dropdown/Dropdown.js
deleted file mode 100644
index 5b4c90d8d6..0000000000
--- a/src/components/dropdown/Dropdown.js
+++ /dev/null
@@ -1,740 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
-import classNames from 'classnames';
-import { DropdownPanel } from './DropdownPanel';
-import { DropdownItem } from './DropdownItem';
-import Tooltip from "../tooltip/Tooltip";
-
-export class Dropdown extends Component {
-
-    static defaultProps = {
-        id: null,
-        name: null,
-        value: null,
-        options: null,
-        optionLabel: null,
-        optionValue: null,
-        itemTemplate: null,
-        style: null,
-        className: null,
-        scrollHeight: '200px',
-        filter: false,
-        filterBy: null,
-        filterMatchMode: 'contains',
-        filterPlaceholder: null,
-        filterLocale: undefined,
-        editable: false,
-        placeholder:null,
-        required: false,
-        disabled: false,
-        appendTo: null,
-        tabIndex: null,
-        autoFocus: false,
-        filterInputAutoFocus: true,
-        panelClassName: null,
-        panelStyle: null,
-        dataKey: null,
-        inputId: null,
-        showClear: false,
-        maxLength: null,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabel: null,
-        ariaLabelledBy: null,
-        onChange: null,
-        onFocus: null,
-        onBlur: null,
-        onMouseDown: null,
-        onContextMenu: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        name: PropTypes.string,
-        value: PropTypes.any,
-        options: PropTypes.array,
-        optionLabel: PropTypes.string,
-        optionValue: PropTypes.string,
-        itemTemplate: PropTypes.func,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        scrollHeight: PropTypes.string,
-        filter: PropTypes.bool,
-        filterBy: PropTypes.string,
-        filterMatchMode: PropTypes.string,
-        filterPlaceholder: PropTypes.string,
-        filterLocale: PropTypes.string,
-        editable:PropTypes.bool,
-        placeholder: PropTypes.string,
-        required: PropTypes.bool,
-        disabled: PropTypes.bool,
-        appendTo: PropTypes.any,
-        tabIndex: PropTypes.number,
-        autoFocus: PropTypes.bool,
-        filterInputAutoFocus: PropTypes.bool,
-        lazy: PropTypes.bool,
-        panelClassName: PropTypes.string,
-        panelStyle: PropTypes.object,
-        dataKey: PropTypes.string,
-        inputId: PropTypes.string,
-        showClear: PropTypes.bool,
-        maxLength: PropTypes.number,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabel: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-        onMouseDown: PropTypes.func,
-        onContextMenu: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            filter: '',
-            overlayVisible: null
-        };
-
-        this.onClick = this.onClick.bind(this);
-        this.onInputFocus = this.onInputFocus.bind(this);
-        this.onInputBlur = this.onInputBlur.bind(this);
-        this.onInputKeyDown = this.onInputKeyDown.bind(this);
-        this.onEditableInputClick = this.onEditableInputClick.bind(this);
-        this.onEditableInputChange = this.onEditableInputChange.bind(this);
-        this.onEditableInputFocus = this.onEditableInputFocus.bind(this);
-        this.onOptionClick = this.onOptionClick.bind(this);
-        this.onFilterInputChange = this.onFilterInputChange.bind(this);
-        this.onFilterInputKeyDown = this.onFilterInputKeyDown.bind(this);
-        this.clear = this.clear.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.disabled) {
-            return;
-        }
-
-        if(!this.isClearClicked(event)) {
-            this.focusInput.focus();
-
-            if(this.panel.element.offsetParent) {
-                this.hide();
-            }
-            else {
-                this.show();
-
-                if (this.props.filter && this.props.filterInputAutoFocus) {
-                    setTimeout(() => {
-                        this.filterInput.focus();
-                    }, 200);
-                }
-            }
-        }
-    }
-
-    onInputFocus(event) {
-        DomHandler.addClass(this.container, 'p-focus');
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-    }
-
-    onInputBlur(event) {
-        DomHandler.removeClass(this.container, 'p-focus');
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-    }
-
-    onUpKey(event) {
-        if (this.props.options) {
-            let selectedItemIndex = this.findOptionIndex(this.props.value);
-            let prevItem = this.findPrevVisibleItem(selectedItemIndex);
-
-            if (prevItem) {
-                this.selectItem({
-                    originalEvent: event,
-                    option: prevItem
-                });
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    onDownKey(event) {
-        if (this.props.options) {
-            if (!this.panel.element.offsetParent && event.altKey) {
-                this.show();
-            }
-            else {
-                let selectedItemIndex = this.findOptionIndex(this.props.value);
-                let nextItem = this.findNextVisibleItem(selectedItemIndex);
-
-                if (nextItem) {
-                    this.selectItem({
-                        originalEvent: event,
-                        option: nextItem
-                    });
-                }
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    onInputKeyDown(event) {
-        switch(event.which) {
-            //down
-            case 40:
-                this.onDownKey(event);
-            break;
-
-            //up
-            case 38:
-                this.onUpKey(event);
-            break;
-
-            //space
-            case 32:
-                if(!this.panel.element.offsetParent){
-                    this.show();
-                    event.preventDefault();
-                }
-            break;
-
-            //enter
-            case 13:
-                this.hide();
-                event.preventDefault();
-            break;
-
-            //escape and tab
-            case 27:
-            case 9:
-                this.hide();
-            break;
-
-            default:
-                this.search(event);
-            break;
-        }
-    }
-
-    search(event) {
-        if (this.searchTimeout) {
-            clearTimeout(this.searchTimeout);
-        }
-
-        const char = String.fromCharCode(event.keyCode);
-        this.previousSearchChar = this.currentSearchChar;
-        this.currentSearchChar = char;
-
-        if (this.previousSearchChar === this.currentSearchChar)
-            this.searchValue = this.currentSearchChar;
-        else
-            this.searchValue = this.searchValue ? this.searchValue + char : char;
-
-        let searchIndex = this.props.value ? this.findOptionIndex(this.props.value) : -1;
-        let newOption = this.searchOption(++searchIndex);
-
-        if (newOption) {
-            this.selectItem({
-                originalEvent: event,
-                option: newOption
-            });
-            this.selectedOptionUpdated = true;
-        }
-
-        this.searchTimeout = setTimeout(() => {
-            this.searchValue = null;
-        }, 250);
-    }
-
-    searchOption(index) {
-        let option;
-
-        if (this.searchValue) {
-            option = this.searchOptionInRange(index, this.props.options.length);
-
-            if (!option) {
-                option = this.searchOptionInRange(0, index);
-            }
-        }
-
-        return option;
-    }
-
-    searchOptionInRange(start, end) {
-        for (let i = start; i < end; i++) {
-            let opt = this.props.options[i];
-            let label = this.getOptionLabel(opt).toString().toLocaleLowerCase(this.props.filterLocale)
-            if (label.startsWith(this.searchValue.toLocaleLowerCase(this.props.filterLocale))) {
-                return opt;
-            }
-        }
-
-        return null;
-    }
-
-    findNextVisibleItem(index) {
-        let i = index + 1;
-        if (i === this.props.options.length) {
-            return null;
-        }
-
-        let option = this.props.options[i];
-
-        if (option.disabled) {
-            return this.findNextVisibleItem(i);
-        }
-
-        if (this.hasFilter()) {
-            if (this.filter(option))
-                return option;
-            else
-                return this.findNextVisibleItem(i);
-        }
-        else {
-            return option;
-        }
-    }
-
-    findPrevVisibleItem(index) {
-        let i = index - 1;
-        if (i === -1) {
-            return null;
-        }
-
-        let option = this.props.options[i];
-
-        if (option.disabled) {
-            return this.findPrevVisibleItem(i);
-        }
-
-        if (this.hasFilter()) {
-            if (this.filter(option))
-                return option;
-            else
-                return this.findPrevVisibleItem(i);
-        }
-        else {
-            return option;
-        }
-    }
-
-    onEditableInputClick(event) {
-        this.bindDocumentClickListener();
-    }
-
-    onEditableInputChange(event) {
-        this.props.onChange({
-            originalEvent: event.originalEvent,
-            value: event.target.value,
-            stopPropagation : () =>{},
-            preventDefault : () =>{},
-            target: {
-                name: this.props.name,
-                id: this.props.id,
-                value : event.target.value,
-            }
-        });
-    }
-
-    onEditableInputFocus(event) {
-        DomHandler.addClass(this.container, 'p-focus');
-        this.hide();
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-    }
-
-    onOptionClick(event) {
-        const option = event.option;
-
-        if (!option.disabled) {
-            this.selectItem(event);
-            this.focusInput.focus();
-        }
-
-        setTimeout(() => {
-            this.hide();
-        }, 100);
-    }
-
-    onFilterInputChange(event) {
-        this.setState({filter: event.target.value});
-    }
-
-    resetFilter() {
-        this.setState({filter: ''});
-    }
-
-    onFilterInputKeyDown(event) {
-        switch (event.which) {
-            //down
-            case 40:
-                this.onDownKey(event);
-                break;
-
-            //up
-            case 38:
-                this.onUpKey(event);
-                break;
-
-            //enter
-            case 13:
-                this.hide();
-                event.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    clear(event) {
-        this.props.onChange({
-            originalEvent: event,
-            value: null,
-            stopPropagation : () =>{},
-            preventDefault : () =>{},
-            target: {
-                name: this.props.name,
-                id: this.props.id,
-                value : null
-            }
-        });
-        this.updateEditableLabel();
-    }
-
-    selectItem(event) {
-        let currentSelectedOption = this.findOption(this.props.value);
-
-        if(currentSelectedOption !== event.option) {
-            this.updateEditableLabel(event.option);
-            const optionValue = this.getOptionValue(event.option);
-
-            this.props.onChange({
-                originalEvent: event.originalEvent,
-                value: optionValue,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: optionValue
-                }
-            });
-        }
-    }
-
-    findOptionIndex(value) {
-        let index = -1;
-        if (this.props.options) {
-            for (let i = 0; i < this.props.options.length; i++) {
-                let optionValue = this.getOptionValue(this.props.options[i]);
-                if ((value === null && optionValue == null) || ObjectUtils.equals(value, optionValue, this.props.dataKey)) {
-                    index = i;
-                    break;
-                }
-            }
-        }
-
-        return index;
-    }
-
-    findOption(value) {
-        let index = this.findOptionIndex(value);
-        return (index !== -1) ? this.props.options[index] : null;
-    }
-
-    show() {
-        this.panel.element.style.zIndex = String(DomHandler.generateZIndex());
-        this.panel.element.style.display = 'block';
-
-        setTimeout(() => {
-            DomHandler.addClass(this.panel.element, 'p-input-overlay-visible');
-            DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-        }, 1);
-
-        this.alignPanel();
-        this.bindDocumentClickListener();
-        this.setState({overlayVisible: true})
-    }
-
-    hide() {
-        if (this.panel && this.panel.element && this.panel.element.offsetParent) {
-            DomHandler.addClass(this.panel.element, 'p-input-overlay-hidden');
-            DomHandler.removeClass(this.panel.element, 'p-input-overlay-visible');
-
-            this.unbindDocumentClickListener();
-
-            this.hideTimeout = setTimeout(() => {
-                this.panel.element.style.display = 'none';
-                DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-            }, 150);
-            this.setState({overlayVisible: false})
-        }
-    }
-
-    alignPanel() {
-        if(this.props.appendTo) {
-            this.panel.element.style.minWidth = DomHandler.getWidth(this.container) + 'px';
-            DomHandler.absolutePosition(this.panel.element, this.container);
-        }
-        else {
-            DomHandler.relativePosition(this.panel.element, this.container);
-        }
-    }
-
-    bindDocumentClickListener() {
-        if(!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if(this.isOutsideClicked(event)) {
-                    this.hide();
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if(this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.isClearClicked(event) || this.container.contains(event.target)
-            || (this.panel && this.panel.element && this.panel.element.contains(event.target)));
-    }
-
-    isClearClicked(event) {
-        return DomHandler.hasClass(event.target, 'p-dropdown-clear-icon')
-    }
-
-    updateEditableLabel(option) {
-        if(this.editableInput) {
-            this.editableInput.value = (option ? this.getOptionLabel(option) : this.props.value||'');
-        }
-    }
-
-    hasFilter() {
-        return this.state.filter && this.state.filter.trim().length > 0;
-    }
-
-    renderHiddenSelect(selectedOption) {
-        let placeHolderOption = <option value="">{this.props.placeholder}</option>;
-        let option = selectedOption ? <option value={selectedOption.value}>{this.getOptionLabel(selectedOption)}</option> : null;
-
-        return (
-            <div className="p-hidden-accessible p-dropdown-hidden-select">
-                <select ref={(el) => this.nativeSelect = el} required={this.props.required} name={this.props.name} tabIndex="-1" aria-hidden="true">
-                    {placeHolderOption}
-                    {option}
-                </select>
-            </div>
-        );
-    }
-
-    renderKeyboardHelper() {
-        return <div className="p-hidden-accessible">
-                    <input ref={(el) => this.focusInput = el} id={this.props.inputId} type="text" readOnly={true} aria-haspopup="listbox"
-                        onFocus={this.onInputFocus} onBlur={this.onInputBlur} onKeyDown={this.onInputKeyDown}
-                        disabled={this.props.disabled} tabIndex={this.props.tabIndex} aria-label={this.props.ariaLabel} aria-labelledby={this.props.ariaLabelledBy}/>
-                </div>;
-    }
-
-    renderLabel(label) {
-        if(this.props.editable) {
-            let value = label||this.props.value||'';
-
-            return <input ref={(el) => this.editableInput = el} type="text" defaultValue={value} className="p-dropdown-label p-inputtext" disabled={this.props.disabled}
-                          placeholder={this.props.placeholder} maxLength={this.props.maxLength} onClick={this.onEditableInputClick} onInput={this.onEditableInputChange}
-                          onFocus={this.onEditableInputFocus} onBlur={this.onInputBlur} aria-label={this.props.ariaLabel} aria-labelledby={this.props.ariaLabelledBy}
-                          aria-haspopup="listbox"/>;
-        }
-        else {
-            let className = classNames('p-dropdown-label p-inputtext', {
-                'p-placeholder': label === null && this.props.placeholder,
-                'p-dropdown-label-empty': label === null && !this.props.placeholder}
-            );
-
-            return <label className={className}>{label||this.props.placeholder||'empty'}</label>;
-        }
-    }
-
-    renderClearIcon() {
-        if(this.props.value != null && this.props.showClear && !this.props.disabled) {
-            return (
-                <i className="p-dropdown-clear-icon pi pi-times" onClick={this.clear}></i>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderDropdownIcon() {
-        return <div className="p-dropdown-trigger" role="button" aria-haspopup="listbox" aria-expanded={this.state.overlayVisible}>
-                    <span className="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span>
-                </div>;
-    }
-
-    renderItems(selectedOption) {
-        let items = this.props.options;
-
-        if (items && this.hasFilter()) {
-            let filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale);
-            let searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
-            items = FilterUtils.filter(items, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
-        }
-
-        if(items) {
-            return items.map((option) => {
-                let optionLabel = this.getOptionLabel(option);
-                return (
-                    <DropdownItem key={this.getOptionKey(option)} label={optionLabel} option={option} template={this.props.itemTemplate} selected={selectedOption === option} disabled={option.disabled} onClick={this.onOptionClick} />
-                );
-            });
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderFilter() {
-        if(this.props.filter) {
-            return <div className="p-dropdown-filter-container">
-                        <input ref={(el) => this.filterInput = el} type="text" autoComplete="off" className="p-dropdown-filter p-inputtext p-component" placeholder={this.props.filterPlaceholder}
-                            onKeyDown={this.onFilterInputKeyDown} onChange={this.onFilterInputChange} value={this.state.filter} />
-                        <span className="p-dropdown-filter-icon pi pi-search"></span>
-                   </div>;
-        }
-        else {
-            return null;
-        }
-    }
-
-    getOptionLabel(option) {
-        return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : (option['label'] !== undefined ? option['label'] : option);
-    }
-
-    getOptionValue(option) {
-        return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : (option['value'] !== undefined ? option['value'] : option);
-    }
-
-    getOptionKey(option) {
-        return this.props.dataKey ? ObjectUtils.resolveFieldData(option, this.props.dataKey) : this.getOptionLabel(option);
-    }
-
-    checkValidity() {
-        return this.nativeSelect.checkValidity();
-    }
-
-    componentDidMount() {
-        if (this.props.autoFocus && this.focusInput) {
-            this.focusInput.focus();
-        }
-
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-
-        this.nativeSelect.selectedIndex = 1;
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = null;
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (this.props.filter) {
-            this.alignPanel();
-        }
-
-        if (this.panel.element.offsetParent) {
-            let highlightItem = DomHandler.findSingle(this.panel.element, 'li.p-highlight');
-            if (highlightItem) {
-                DomHandler.scrollInView(this.panel.itemsWrapper, highlightItem);
-            }
-        }
-
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-
-        if (this.state.filter && (!this.props.options || this.props.options.length === 0)) {
-            this.setState({filter: ''});
-        }
-
-        this.nativeSelect.selectedIndex = 1;
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        let className = classNames('p-dropdown p-component', this.props.className, {'p-disabled': this.props.disabled,
-                                    'p-dropdown-clearable': this.props.showClear && !this.props.disabled});
-        let selectedOption = this.findOption(this.props.value);
-        let label = selectedOption ? this.getOptionLabel(selectedOption) : null;
-
-        let hiddenSelect = this.renderHiddenSelect(selectedOption);
-        let keyboardHelper = this.renderKeyboardHelper();
-        let labelElement = this.renderLabel(label);
-        let dropdownIcon = this.renderDropdownIcon();
-        let items = this.renderItems(selectedOption);
-        let filterElement = this.renderFilter();
-        let clearIcon = this.renderClearIcon();
-
-        if(this.props.editable && this.editableInput) {
-            let value = label||this.props.value||'';
-            this.editableInput.value = value;
-        }
-
-        return (
-            <div id={this.props.id} ref={(el) => this.container = el} className={className} style={this.props.style} onClick={this.onClick}
-                 onMouseDown={this.props.onMouseDown} onContextMenu={this.props.onContextMenu}>
-                 {keyboardHelper}
-                 {hiddenSelect}
-                 {labelElement}
-                 {clearIcon}
-                 {dropdownIcon}
-                 <DropdownPanel ref={(el) => this.panel = el} appendTo={this.props.appendTo}
-                    panelStyle={this.props.panelStyle} panelClassName={this.props.panelClassName}
-                    scrollHeight={this.props.scrollHeight} filter={filterElement}>
-                    {items}
-                 </DropdownPanel>
-            </div>
-        );
-    }
-}
diff --git a/src/components/dropdown/DropdownItem.d.ts b/src/components/dropdown/DropdownItem.d.ts
deleted file mode 100755
index ad6df72075..0000000000
--- a/src/components/dropdown/DropdownItem.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-interface DropdownItemProps {
-    option?: object;
-    selected?: boolean;
-    template?(option:any): JSX.Element | undefined;
-    onClick?(e: {originalEvent: Event, option: object}): void;
-}
-
-export class DropdownItem extends React.Component<DropdownItemProps,any> {}
diff --git a/src/components/dropdown/DropdownItem.js b/src/components/dropdown/DropdownItem.js
deleted file mode 100644
index 238138e01b..0000000000
--- a/src/components/dropdown/DropdownItem.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class DropdownItem extends Component {
-
-    static defaultProps = {
-        option: null,
-        label: null,
-        template: null,
-        selected: false,
-        disabled: false,
-        onClick: null
-    };
-
-    static propTypes = {
-        option: PropTypes.any,
-        label: PropTypes.any,
-        template: PropTypes.func,
-        selected: PropTypes.bool,
-        disabled: PropTypes.bool,
-        onClick: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.onClick = this.onClick.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                option: this.props.option
-            })
-        }
-    }
-
-    render() {
-        let className = classNames(this.props.option.className, 'p-dropdown-item', {
-            'p-highlight': this.props.selected,
-            'p-disabled': this.props.disabled,
-            'p-dropdown-item-empty': (!this.props.label || this.props.label.length === 0)
-        });
-        let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
-
-        return (
-            <li className={className} onClick={this.onClick} aria-label={this.props.label} key={this.props.label} role="option" aria-selected={this.props.selected}>
-                {content}
-            </li>
-        );
-    }
-}
-
diff --git a/src/components/dropdown/DropdownPanel.js b/src/components/dropdown/DropdownPanel.js
deleted file mode 100644
index bdd4d5f087..0000000000
--- a/src/components/dropdown/DropdownPanel.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-
-export class DropdownPanel extends Component {
-
-    static defaultProps = {
-        appendTo: null,
-        filter: null,
-        scrollHeight: null,
-        panelClassName: null,
-        panelStyle: null,
-        onClick: null
-    };
-
-    static propTypes = {
-        appendTo: PropTypes.object,
-        filter: PropTypes.any,
-        scrollHeight: PropTypes.string,
-        panelClassName: PropTypes.string,
-        panelStyle: PropTypes.object,
-        onClick: PropTypes.func
-    };
-
-    renderElement() {
-        let className = classNames('p-dropdown-panel p-hidden p-input-overlay', this.props.panelClassName);
-
-        return (
-            <div ref={(el) => this.element = el} className={className} style={this.props.panelStyle} onClick={this.props.onClick}>
-                {this.props.filter}
-                <div ref={(el) => this.itemsWrapper = el} className="p-dropdown-items-wrapper" style={{ maxHeight: this.props.scrollHeight || 'auto' }}>
-                    <ul className="p-dropdown-items p-dropdown-list p-component" role="listbox">
-                        {this.props.children}
-                    </ul>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        let element = this.renderElement();
-
-        if (this.props.appendTo) {
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        }
-        else {
-            return element;
-        }
-    }
-
-}
diff --git a/src/components/editor/Editor.d.ts b/src/components/editor/Editor.d.ts
deleted file mode 100644
index 2be0a9da33..0000000000
--- a/src/components/editor/Editor.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-interface EditorProps {
-    id?: string;
-    value?: string;
-    style?: object;
-    className?: string;
-    placeholder?: string;
-    readOnly?: boolean;
-    modules?: any;
-    formats?: any[];
-    theme?: string;
-    headerTemplate?: JSX.Element | undefined,
-    onTextChange?(e: { htmlValue: string|null, textValue: string, delta: any, source: string }): void;
-	onSelectionChange?(e: { range: any, oldRange: any, source: string }): void;
-}
-
-export class Editor extends React.Component<EditorProps, any> {
-}
diff --git a/src/components/editor/Editor.js b/src/components/editor/Editor.js
deleted file mode 100644
index 119c13c307..0000000000
--- a/src/components/editor/Editor.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Quill from "quill";
-import 'quill/dist/quill.snow.css';
-import 'quill/dist/quill.bubble.css';
-
-export class Editor extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        style: null,
-        className: null,
-        placeholder: null,
-        readOnly: false,
-        modules: null,
-        formats: null,
-        theme: 'snow',
-        headerTemplate: null,
-        onTextChange: null,
-		onSelectionChange: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        placeholder: PropTypes.string,
-        readOnly: PropTypes.bool,
-        modules: PropTypes.object,
-        formats: PropTypes.array,
-        theme: PropTypes.string,
-        headerTemplate: PropTypes.any,
-        onTextChange: PropTypes.func,
-		onSelectionChange: PropTypes.func
-    };
-
-    componentDidMount() {
-        this.quill = new Quill(this.editorElement, {
-            modules: {
-                toolbar: this.toolbarElement,
-                ...this.props.modules
-            },
-            placeholder: this.props.placeholder,
-            readOnly: this.props.readOnly,
-            theme: this.props.theme,
-            formats: this.props.formats
-        });
-
-        if (this.props.value) {
-            this.quill.pasteHTML(this.props.value);
-        }
-
-        this.quill.on('text-change', (delta, source) => {
-            let html = this.editorElement.children[0].innerHTML;
-            let text = this.quill.getText();
-            if (html === '<p><br></p>') {
-                html = null;
-            }
-
-            if (this.props.onTextChange) {
-                this.props.onTextChange({
-                    htmlValue: html,
-                    textValue: text,
-                    delta: delta,
-                    source: source
-                });
-            }
-        });
-
-        this.quill.on('selection-change', (range, oldRange, source) => {
-            if(this.props.onSelectionChange) {
-                this.props.onSelectionChange({
-                    range: range,
-                    oldRange: oldRange,
-                    source: source
-                });
-            }
-        });
-    }
-
-    componentDidUpdate(prevProps) {
-        if (this.props.value !== prevProps.value && this.quill && !this.quill.hasFocus()) {
-            if(this.props.value)
-                this.quill.pasteHTML(this.props.value);
-            else
-                this.quill.setText('');
-        }
-    }
-
-    render() {
-        let containerClass = classNames('p-component p-editor-container', this.props.className);
-        let toolbarHeader = null;
-
-        if (this.props.headerTemplate) {
-            toolbarHeader = (
-                <div ref={(el) => this.toolbarElement = el} className="p-editor-toolbar">
-                    {this.props.headerTemplate}
-                </div>
-            );
-        }
-        else {
-            toolbarHeader = (
-                <div ref={el => this.toolbarElement = el} className="p-editor-toolbar">
-                    <span className="ql-formats">
-                        <select className="ql-header" defaultValue="0">
-                          <option value="1">Heading</option>
-                          <option value="2">Subheading</option>
-                          <option value="0">Normal</option>
-                        </select>
-                        <select className="ql-font">
-                            <option ></option>
-                            <option value="serif"></option>
-                            <option value="monospace"></option>
-                        </select>
-                    </span>
-                    <span className="ql-formats">
-                        <button type="button" className="ql-bold" aria-label="Bold"></button>
-                        <button type="button" className="ql-italic" aria-label="Italic"></button>
-                        <button type="button" className="ql-underline" aria-label="Underline"></button>
-                    </span>
-                    <span className="ql-formats">
-                        <select className="ql-color"></select>
-                        <select className="ql-background"></select>
-                    </span>
-                    <span className="ql-formats">
-                        <button type="button" className="ql-list" value="ordered" aria-label="Ordered List"></button>
-                        <button type="button" className="ql-list" value="bullet" aria-label="Unordered List"></button>
-                        <select className="ql-align">
-                            <option defaultValue></option>
-                            <option value="center"></option>
-                            <option value="right"></option>
-                            <option value="justify"></option>
-                        </select>
-                    </span>
-                    <span className="ql-formats">
-                        <button type="button" className="ql-link" aria-label="Insert Link"></button>
-                        <button type="button" className="ql-image" aria-label="Insert Image"></button>
-                        <button type="button" className="ql-code-block" aria-label="Insert Code Block"></button>
-                    </span>
-                    <span className="ql-formats">
-                        <button type="button" className="ql-clean" aria-label="Remove Styles"></button>
-                    </span>
-                </div>
-            );
-        }
-
-        let content = (<div ref={(el) => this.editorElement = el} className="p-editor-content" style={this.props.style}></div>)
-
-        return (
-            <div id={this.props.id} className={containerClass}>
-                {toolbarHeader}
-                {content}
-            </div>
-        );
-    }
-}
diff --git a/src/components/fieldset/Fieldset.css b/src/components/fieldset/Fieldset.css
deleted file mode 100644
index e42ea7c5fe..0000000000
--- a/src/components/fieldset/Fieldset.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.p-fieldset, 
-.p-fieldset .p-fieldset-legend {
-    padding: 0.5em 1em;
-}
-
-.p-fieldset-toggleable .p-fieldset-legend {
-    padding: 0;
-}
-
-.p-fieldset-toggleable .p-fieldset-legend a {
-    padding: 0.5em 1em;
-    cursor:pointer;
-    white-space: nowrap;
-    display: block;
-}
-
-.p-fieldset .p-fieldset-toggler {
-    margin-right: .1em;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-fieldset .p-fieldset-legend-text {
-    vertical-align: middle;
-}
-
-.p-fieldset-content-wrapper-collapsed {
-    overflow: hidden;
-    max-height: 0;
-    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-fieldset-content-wrapper-expanded {
-    max-height: 1000px;
-    transition: max-height 1s ease-in-out;
-}
-
-.p-fieldset-content-wrapper-expanding {
-    overflow: hidden;
-}
\ No newline at end of file
diff --git a/src/components/fieldset/Fieldset.d.ts b/src/components/fieldset/Fieldset.d.ts
deleted file mode 100644
index d8d890a03a..0000000000
--- a/src/components/fieldset/Fieldset.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-interface FieldsetProps {
-    id?: string;
-    legend?: any;
-    className?: string;
-    style?: object;
-    toggleable?: boolean;
-    collapsed?: boolean;
-    onExpand?(event: Event): void;
-    onCollapse?(event: Event): void;
-    onToggle?(e:{event: Event, value: boolean}): void;
-    onClick?(event: Event): void;
-}
-
-export class Fieldset extends React.Component<FieldsetProps,any> {}
\ No newline at end of file
diff --git a/src/components/fieldset/Fieldset.js b/src/components/fieldset/Fieldset.js
deleted file mode 100644
index 4ccffa1802..0000000000
--- a/src/components/fieldset/Fieldset.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-import { CSSTransition } from 'react-transition-group';
-
-export class Fieldset extends Component {
-
-    static defaultProps = {
-        id: null,
-        legend: null,
-        className: null,
-        style: null,
-        toggleable: null,
-        collapsed: null,
-        onExpand: null,
-        onCollapse: null,
-        onToggle: null,
-        onClick: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        legend: PropTypes.any,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        toggleable: PropTypes.bool,
-        collapsed: PropTypes.bool,
-        onExpand: PropTypes.func,
-        onCollapse: PropTypes.func,
-        onToggle: PropTypes.func,
-        onClick: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        if (!this.props.onToggle) {
-            this.state = {
-                collapsed: this.props.collapsed
-            };
-        }
-
-        this.toggle = this.toggle.bind(this);
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    toggle(event) {
-        if (this.props.toggleable) {
-            const collapsed = this.props.onToggle ? this.props.collapsed : this.state.collapsed;
-
-            if(collapsed)
-                this.expand(event);
-            else
-                this.collapse(event);
-
-            if (this.props.onToggle) {
-                this.props.onToggle({
-                    originalEvent: event,
-                    value: !collapsed
-                });
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    expand(event) {
-        if (!this.props.onToggle) {
-            this.setState({collapsed: false});
-        }
-
-        if (this.props.onExpand) {
-            this.props.onExpand(event);
-        }
-    }
-
-    collapse(event) {
-        if (!this.props.onToggle) {
-            this.setState({collapsed: true});
-        }
-
-        if (this.props.onCollapse) {
-            this.props.onCollapse(event);
-        }
-    }
-
-    isCollapsed() {
-        return this.props.toggleable ? (this.props.onToggle ? this.props.collapsed : this.state.collapsed): false;
-    }
-
-    renderContent(collapsed) {
-        const className = classNames('p-toggleable-content', {'p-toggleable-content-collapsed': collapsed});
-        const id = this.id + '_content';
-
-        return (
-            <CSSTransition classNames="p-toggleable-content" timeout={{enter: 400, exit: 250}} in={!this.isCollapsed()}>
-                <div id={id} className={className} aria-hidden={collapsed} role="region" aria-labelledby={this.id + '_header'}>
-                    <div className="p-fieldset-content">
-                        {this.props.children}
-                    </div>
-                </div>
-            </CSSTransition>
-        );
-    }
-
-    renderToggleIcon(collapsed) {
-        if (this.props.toggleable) {
-            const className = classNames('p-fieldset-toggler pi', {'pi-plus': collapsed, 'pi-minus': !collapsed});
-
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderLegendContent(collapsed) {
-        if (this.props.toggleable) {
-            const toggleIcon = this.renderToggleIcon(collapsed);
-            const ariaControls = this.id + '_content';
-
-            return (
-                <a href={'#' + ariaControls} aria-controls={ariaControls} id={this.id + '_header'} aria-expanded={!collapsed} tabIndex={this.props.toggleable ? null  : -1}>
-                    {toggleIcon}
-                    <span className="p-fieldset-legend-text">{this.props.legend}</span>
-                 </a>
-            );
-        }
-        else {
-            return (
-                <span className="p-fieldset-legend-text" id={this.id + '_header'}>{this.props.legend}</span>
-            );
-        }
-    }
-
-    renderLegend(collapsed) {
-        const legendContent = this.renderLegendContent(collapsed);
-
-        return (
-            <legend className="p-fieldset-legend p-unselectable-text" onClick={this.toggle}>
-                {legendContent}
-            </legend>
-        );
-    }
-
-    render() {
-        const className = classNames('p-fieldset p-component', this.props.className, {'p-fieldset-toggleable': this.props.toggleable});
-        const collapsed = this.isCollapsed();
-        const legend = this.renderLegend(collapsed);
-        const content = this.renderContent(collapsed);
-
-        return (
-            <fieldset id={this.props.id} className={className} style={this.props.style} onClick={this.props.onClick}>
-                {legend}
-                {content}
-            </fieldset>
-        );
-    }
-}
diff --git a/src/components/fileupload/FileUpload.css b/src/components/fileupload/FileUpload.css
deleted file mode 100644
index e5f66513e4..0000000000
--- a/src/components/fileupload/FileUpload.css
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * FileUpload
- */
-.p-fileupload-buttonbar .p-fileupload-choose.p-disabled input {
-    cursor: default;
-}
-
-.p-fileupload-buttonbar {
-    padding: .5em;
-    border-bottom: 0 none;
-}
-
-.p-fileupload-buttonbar .p-button {
-    vertical-align: middle;
-    margin-right: .25em;
-}
-
-.p-fileupload-content {
-    padding: 1em;
-    position: relative;
-    transition: border-color .3s;
-}
-
-.p-fileupload-content.p-fileupload-highlight {
-    border-color: #156090;
-}
-
-.p-fileupload-files img {
-    border: none;
-}
-
-.p-fileupload-files {
-    display: table;
-}
-
-.p-fileupload-row {
-    display: table-row;
-}
-
-.p-fileupload-row > div {
-    display: table-cell;
-    padding: .5em 1em;
-    vertical-align: middle;
-}
-
-.p-fileupload-content .p-progressbar {
-    width: 100%;
-    position: absolute;
-    top: 1px;
-    left: 0;
-    height: .25em;
-    border: 0 none;
-}
-
-.p-fileupload-content .p-progressbar-value {
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    border: 0 none;
-}
-
-/* Simple */
-.p-fileupload-choose {
-    position: relative;
-    overflow: hidden;
-}
-
-.p-fileupload-choose input[type=file] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0;
-    opacity: 0;
-    min-height: 100%;
-    font-size: 100px;
-    text-align: right;
-    filter: alpha(opacity=0);
-    direction: ltr;
-    cursor: pointer;
-}
-
-.p-fileupload-choose.p-fileupload-choose-selected input[type=file] {
-    display: none;
-}
-
-/* p-fluid */
-.p-fluid .p-fileupload .p-button {
-    width: auto;
-}
-
-.p-fluid .p-fileupload-content .p-button-icon-only {
-    width: 2em;
-}
\ No newline at end of file
diff --git a/src/components/fileupload/FileUpload.d.ts b/src/components/fileupload/FileUpload.d.ts
deleted file mode 100644
index e7ebc35a5a..0000000000
--- a/src/components/fileupload/FileUpload.d.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-
-interface FileUploadProps {
-    id?: string;
-    name?: string;
-    url?: string;
-    mode?: string;
-    multiple?: boolean;
-    accept?: string;
-    disabled?: boolean;
-    auto?: boolean;
-    maxFileSize?: number;
-    invalidFileSizeMessageSummary?: string;
-    invalidFileSizeMessageDetail?: string;
-    style?: object;
-    className?: string;
-    withCredentials?: boolean;
-    previewWidth?: number;
-    chooseLabel?: string;
-    uploadLabel?: string;
-    cancelLabel?: string;
-    customUpload?: boolean;
-    onBeforeUpload?(e: { xhr: XMLHttpRequest, formData: any }): void;
-    onBeforeSend?(e: { xhr: XMLHttpRequest, formData: any }): void;
-    onUpload?(e: {xhr: XMLHttpRequest, files: any}): void;
-    onError?(e: {xhr: XMLHttpRequest, files: any}): void;
-    onClear?(): void;
-    onSelect?(e: {originalEvent: Event, files: any}): void;
-    onProgress?(e: {originalEvent: Event, progress: any}): void;
-    onValidationFail?(file: File): void;
-    uploadHandler?(e: {files: any}): void;
-    onRemove?(e: {originalEvent: Event, file: any}): void;
-}
-
-export class FileUpload extends React.Component<FileUploadProps,any> {
-    public upload():void;
-    public clear():void;
-}
diff --git a/src/components/fileupload/FileUpload.js b/src/components/fileupload/FileUpload.js
deleted file mode 100644
index 528e9909bf..0000000000
--- a/src/components/fileupload/FileUpload.js
+++ /dev/null
@@ -1,440 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {Button} from '../button/Button';
-import {Messages} from '../messages/Messages';
-import {ProgressBar} from '../progressbar/ProgressBar';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-
-export class FileUpload extends Component {
-
-    static defaultProps = {
-        id: null,
-        name: null,
-        url: null,
-        mode: 'advanced',
-        multiple: false,
-        accept: null,
-        disabled: false,
-        auto: false,
-        maxFileSize: null,
-        invalidFileSizeMessageSummary: '{0}: Invalid file size, ',
-        invalidFileSizeMessageDetail: 'maximum upload size is {0}.',
-        style: null,
-        className: null,
-        widthCredentials: false,
-        previewWidth: 50,
-        chooseLabel: 'Choose',
-        uploadLabel: 'Upload',
-        cancelLabel: 'Cancel',
-        customUpload: false,
-        onBeforeUpload: null,
-        onBeforeSend: null,
-        onUpload: null,
-        onError: null,
-        onClear: null,
-        onSelect: null,
-        onProgress: null,
-        onValidationFail: null,
-        uploadHandler: null,
-        onRemove: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        name: PropTypes.string,
-        url: PropTypes.string,
-        mode: PropTypes.string,
-        multiple: PropTypes.bool,
-        accept: PropTypes.string,
-        disabled: PropTypes.bool,
-        auto: PropTypes.bool,
-        maxFileSize: PropTypes.number,
-        invalidFileSizeMessageSummary: PropTypes.string,
-        invalidFileSizeMessageDetail: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        widthCredentials: PropTypes.bool,
-        previewWidth: PropTypes.number,
-        chooseLabel: PropTypes.string,
-        uploadLabel: PropTypes.string,
-        cancelLabel: PropTypes.string,
-        customUpload: PropTypes.bool,
-        onBeforeUpload: PropTypes.func,
-        onBeforeSend: PropTypes.func,
-        onUpload: PropTypes.func,
-        onError: PropTypes.func,
-        onClear: PropTypes.func,
-        onSelect: PropTypes.func,
-        onProgress: PropTypes.func,
-        onValidationFail: PropTypes.func,
-        uploadHandler: PropTypes.func,
-        onRemove: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            files:[],
-            msgs: []
-        };
-
-        this.upload = this.upload.bind(this);
-        this.clear = this.clear.bind(this);
-        this.onFileSelect = this.onFileSelect.bind(this);
-        this.onDragEnter = this.onDragEnter.bind(this);
-        this.onDragOver = this.onDragOver.bind(this);
-        this.onDragLeave = this.onDragLeave.bind(this);
-        this.onDrop = this.onDrop.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onSimpleUploaderClick = this.onSimpleUploaderClick.bind(this);
-
-        this.duplicateIEEvent = false;
-    }
-
-    hasFiles() {
-        return this.state.files && this.state.files.length > 0;
-    }
-
-    isImage(file) {
-        return /^image\//.test(file.type);
-    }
-
-    remove(event, index) {
-        this.clearInputElement();
-        let currentFiles = [...this.state.files];
-        let removedFile = this.state.files[index];
-
-        currentFiles.splice(index, 1);
-        this.setState({ files: currentFiles });
-
-        if (this.props.onRemove) {
-            this.props.onRemove({
-                originalEvent: event,
-                file: removedFile
-            })
-        }
-    }
-
-    clearInputElement() {
-        this.fileInput.value = '';
-        if(this.props.mode === 'basic') {
-            this.fileInput.style.display = 'inline';
-        }
-    }
-
-    clearIEInput() {
-        if (this.fileInput) {
-            this.duplicateIEEvent = true; //IE11 fix to prevent onFileChange trigger again
-            this.fileInput.value = '';
-        }
-    }
-
-    formatSize(bytes) {
-        if(bytes === 0) {
-            return '0 B';
-        }
-        let k = 1000,
-        dm = 3,
-        sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
-        i = Math.floor(Math.log(bytes) / Math.log(k));
-
-        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-    }
-
-    onFileSelect(event) {
-        if (event.type !== 'drop' && this.isIE11() && this.duplicateIEEvent) {
-            this.duplicateIEEvent = false;
-            return;
-        }
-
-        this.setState({msgs:[]});
-        this.files = this.state.files || [];
-        let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
-        for (let i = 0; i < files.length; i++) {
-            let file = files[i];
-
-            if (!this.isFileSelected(file)) {
-                if (this.validate(file)) {
-                    if (this.isImage(file)) {
-                        file.objectURL = window.URL.createObjectURL(file);
-                    }
-                    this.files.push(file);
-                }
-            }
-        }
-
-        this.setState({files: this.files}, () => {
-            if (this.hasFiles() && this.props.auto) {
-                this.upload();
-            }
-        });
-
-        if(this.props.onSelect) {
-            this.props.onSelect({originalEvent: event, files: files});
-        }
-
-        if (event.type !== 'drop' && this.isIE11()) {
-            this.clearIEInput();
-        }
-        else {
-            this.clearInputElement();
-        }
-
-        if(this.props.mode === 'basic') {
-            this.fileInput.style.display = 'none';
-        }
-    }
-
-    isFileSelected(file){
-        for (let sFile of this.state.files){
-            if ((sFile.name + sFile.type + sFile.size) === (file.name + file.type+file.size))
-                return true;
-        }
-        return false;
-    }
-
-    isIE11() {
-        return !!window['MSInputMethodContext'] && !!document['documentMode'];
-    }
-
-    validate(file) {
-        if (this.props.maxFileSize && file.size > this.props.maxFileSize) {
-            const message = {
-                severity: 'error',
-                summary: this.props.invalidFileSizeMessageSummary.replace('{0}', file.name),
-                detail: this.props.invalidFileSizeMessageDetail.replace('{0}', this.formatSize(this.props.maxFileSize))
-            };
-
-            if (this.props.mode === 'advanced') {
-                this.messagesUI.show(message);
-            }
-
-            if (this.props.onValidationFail) {
-                this.props.onValidationFail(file);
-            }
-
-            return false;
-        }
-
-        return true;
-    }
-
-    upload() {
-        if (this.props.customUpload) {
-            if (this.props.uploadHandler) {
-                this.props.uploadHandler({
-                    files: this.state.files
-                })
-            }
-        }
-        else {
-            this.setState({msgs:[]});
-            let xhr = new XMLHttpRequest();
-            let formData = new FormData();
-
-            if (this.props.onBeforeUpload) {
-                this.props.onBeforeUpload({
-                    'xhr': xhr,
-                    'formData': formData
-                });
-            }
-
-            for (let file of this.state.files) {
-                formData.append(this.props.name, file, file.name);
-            }
-
-            xhr.upload.addEventListener('progress', (event) => {
-                if (event.lengthComputable) {
-                    this.setState({progress: Math.round((event.loaded * 100) / event.total)});
-                }
-
-                if (this.props.onProgress) {
-                    this.props.onProgress({
-                        originalEvent: event,
-                        progress: this.progress
-                    });
-                };
-            });
-
-            xhr.onreadystatechange = () => {
-                if (xhr.readyState === 4) {
-                this.setState({progress: 0});
-
-                    if (xhr.status >= 200 && xhr.status < 300) {
-                        if (this.props.onUpload) {
-                            this.props.onUpload({xhr: xhr, files: this.files});
-                        }
-                    }
-                    else {
-                        if (this.props.onError) {
-                            this.props.onError({xhr: xhr, files: this.files});
-                        }
-                    }
-
-                    this.clear();
-                }
-            };
-
-            xhr.open('POST', this.props.url, true);
-
-            if(this.props.onBeforeSend) {
-                this.props.onBeforeSend({
-                    'xhr': xhr,
-                    'formData': formData
-                });
-            }
-
-            xhr.withCredentials = this.props.withCredentials;
-
-            xhr.send(formData);
-        }
-    }
-
-    clear() {
-        this.setState({files:[]});
-        if (this.props.onClear) {
-            this.props.onClear();
-        }
-        this.clearInputElement();
-    }
-
-    onFocus(event) {
-        DomHandler.addClass(event.currentTarget.parentElement, 'p-focus');
-    }
-
-    onBlur(event) {
-        DomHandler.removeClass(event.currentTarget.parentElement, 'p-focus');
-    }
-
-    onDragEnter(event) {
-        if(!this.props.disabled) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-
-    onDragOver(event) {
-        if (!this.props.disabled) {
-            DomHandler.addClass(this.content, 'p-fileupload-highlight');
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-
-    onDragLeave(event) {
-        if (!this.props.disabled) {
-            DomHandler.removeClass(this.content, 'p-fileupload-highlight');
-        }
-    }
-
-    onDrop(event) {
-        if (!this.props.disabled) {
-            DomHandler.removeClass(this.content, 'p-fileupload-highlight');
-            event.stopPropagation();
-            event.preventDefault();
-
-            let files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
-            let allowDrop = this.props.multiple||(files && files.length === 1);
-
-            if(allowDrop) {
-                this.onFileSelect(event);
-            }
-        }
-    }
-
-    onSimpleUploaderClick() {
-        if (this.hasFiles()) {
-            this.upload();
-        }
-    }
-
-    renderChooseButton() {
-        let className = classNames('p-button p-fileupload-choose p-component p-button-text-icon-left');
-
-        return (
-            <span icon="pi pi-plus" className={className}>
-                <input ref={(el) => this.fileInput = el} type="file" onChange={this.onFileSelect} onFocus={this.onFocus} onBlur={this.onBlur}
-                    multiple={this.props.multiple} accept={this.props.accept} disabled={this.props.disabled} />
-                <span className="p-button-icon p-button-icon-left p-clickable pi pi-fw pi-plus"></span>
-                <span className="p-button-text p-clickable">{this.props.chooseLabel}</span>
-            </span>
-        );
-    }
-
-    renderFiles() {
-        return (
-            <div className="p-fileupload-files">
-                {
-                    this.state.files.map((file, index) => {
-                        let preview = this.isImage(file) ? <div><img alt={file.name} role="presentation" src={file.objectURL} width={this.props.previewWidth} /></div> : null;
-                        let fileName = <div>{file.name}</div>;
-                        let size = <div>{this.formatSize(file.size)}</div>;
-                        let removeButton = <div><Button type="button" icon="pi pi-times" onClick={(e) => this.remove(e, index)} /></div>
-
-                        return <div className="p-fileupload-row" key={file.name + file.type + file.size}>
-                                 {preview}
-                                 {fileName}
-                                 {size}
-                                 {removeButton}
-                            </div>
-                    })
-                }
-            </div>
-        );
-    }
-
-    renderAdvanced() {
-        let className = classNames('p-fileupload p-component', this.props.className);
-        let uploadButton, cancelButton, filesList, progressBar;
-        let chooseButton = this.renderChooseButton();
-
-        if (!this.props.auto) {
-            uploadButton = <Button type="button" label={this.props.uploadLabel} icon="pi pi-upload" onClick={this.upload} disabled={this.props.disabled || !this.hasFiles()} />;
-            cancelButton = <Button type="button" label={this.props.cancelLabel} icon="pi pi-times" onClick={this.clear} disabled={this.props.disabled || !this.hasFiles()} />;
-        }
-
-        if (this.hasFiles()) {
-            filesList = this.renderFiles();
-            progressBar = <ProgressBar value={this.state.progress} showValue={false} />;
-        }
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style}>
-                <div className="p-fileupload-buttonbar">
-                    {chooseButton}
-                    {uploadButton}
-                    {cancelButton}
-                </div>
-                <div ref={(el) => {this.content = el;}} className="p-fileupload-content"
-                    onDragEnter={this.onDragEnter} onDragOver={this.onDragOver} onDragLeave={this.onDragLeave} onDrop={this.onDrop}>
-                    {progressBar}
-                    <Messages ref={(el) => this.messagesUI = el } />
-                    {filesList}
-                </div>
-            </div>
-        );
-    }
-
-    renderBasic() {
-        let buttonClassName = classNames('p-button p-fileupload-choose p-component p-button-text-icon-left', {'p-fileupload-choose-selected': this.hasFiles()});
-        let iconClassName = classNames('p-button-icon-left pi', {'pi-plus': !this.hasFiles() || this.props.auto, 'pi-upload': this.hasFiles() && !this.props.auto});
-
-        return (
-            <span className={buttonClassName} onMouseUp={this.onSimpleUploaderClick}>
-                <span className={iconClassName}></span>
-                <span className="p-button-text p-clickable">{this.props.auto ? this.props.chooseLabel : this.hasFiles() ? this.state.files[0].name : this.props.chooseLabel}</span>
-                <input ref={(el) => this.fileInput = el} type="file" multiple={this.props.multiple} accept={this.props.accept} disabled={this.props.disabled}
-                    onChange={this.onFileSelect} onFocus={this.onFocus} onBlur={this.onBlur} />
-             </span>
-        );
-    }
-
-    render() {
-        if (this.props.mode === 'advanced')
-            return this.renderAdvanced();
-        else if (this.props.mode === 'basic')
-            return this.renderBasic();
-    }
-}
diff --git a/src/components/fullcalendar/FullCalendar.css b/src/components/fullcalendar/FullCalendar.css
deleted file mode 100644
index 838a51d449..0000000000
--- a/src/components/fullcalendar/FullCalendar.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.ui-fluid .fc .ui-button {
-    width: auto;
-}
\ No newline at end of file
diff --git a/src/components/fullcalendar/FullCalendar.d.ts b/src/components/fullcalendar/FullCalendar.d.ts
deleted file mode 100644
index f933d42407..0000000000
--- a/src/components/fullcalendar/FullCalendar.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface FullCalendarProps {
-    id?: string;
-    events?: any[];
-    style?: object;
-    className?: string;
-    options?: object;
-}
-
-export class FullCalendar extends React.Component<FullCalendarProps,any> {}
\ No newline at end of file
diff --git a/src/components/fullcalendar/FullCalendar.js b/src/components/fullcalendar/FullCalendar.js
deleted file mode 100644
index 515ff58cf3..0000000000
--- a/src/components/fullcalendar/FullCalendar.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ObjectUtils from '../utils/ObjectUtils';
-import {Calendar} from '@fullcalendar/core';
-
-export class FullCalendar extends Component {
-
-    static defaultProps = {
-        id: null,
-        events: [],
-        style: null,
-        className: null,
-        options: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        events: PropTypes.array,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        options: PropTypes.object
-    }
-
-    componentDidMount() {
-        this.config = {
-            theme: true
-        };
-
-        if (this.props.options) {
-            for (let prop in this.props.options) {
-                this.config[prop] = this.props.options[prop];
-            }
-        }
-
-        this.initialize();
-    }
-
-    componentDidUpdate(prevProps) {
-        if (!this.calendar) {
-            this.initialize();
-        }
-        else {
-            if (!ObjectUtils.equals(prevProps.events, this.props.events)) {
-                this.calendar.removeAllEventSources();
-                this.calendar.addEventSource(this.props.events);
-            }
-
-            if (!ObjectUtils.equals(prevProps.options, this.props.options)) {
-                for (let prop in this.props.options) {
-                    let optionValue = this.props.options[prop];
-                    this.config[prop] = optionValue;
-                    this.calendar.setOption(prop, optionValue);
-                }
-            }
-        }
-    }
-
-    initialize() {
-        this.calendar = new Calendar(this.element, this.config);
-        this.calendar.render();
-
-        if (this.props.events) {
-            this.calendar.removeAllEventSources();
-            this.calendar.addEventSource(this.props.events);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.calendar) {
-            this.calendar.destroy();
-        }
-    }
-
-    render() {
-        return (
-            <div id={this.props.id} ref={(el) => this.element = el} style={this.props.style} className={this.props.className}></div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/galleria/Galleria.css b/src/components/galleria/Galleria.css
deleted file mode 100644
index 4b414812c3..0000000000
--- a/src/components/galleria/Galleria.css
+++ /dev/null
@@ -1,249 +0,0 @@
-.p-galleria-content {
-    display: flex;
-    flex-direction: column;
-}
-
-/* Preview */
-.p-galleria-preview-content {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-.p-galleria-preview-container {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-}
-.p-galleria-preview-container .p-galleria-preview-nav-button {
-    height: 3em;
-    position: absolute;
-    top: 50%;
-    margin-top: -1.5em;
-    z-index: 1;
-}
-.p-galleria-preview-prev {
-    left: .5em;
-}
-.p-galleria-preview-next {
-    right: .5em;
-}
-.p-galleria-preview-prev span,
-.p-galleria-preview-next span {
-    font-size: 2em;
-}
-.p-galleria-preview-items-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-}
-.p-galleria-preview-nav-onhover .p-galleria-preview-content .p-galleria-preview-nav-button {
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity .2s ease-in-out;
-}
-.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button {
-    pointer-events: all;
-    opacity: 1;
-}
-.p-galleria-preview-nav-onhover .p-galleria-preview-content:hover .p-galleria-preview-nav-button.p-disabled {
-    pointer-events: none;
-    opacity: .5;
-}
-.p-galleria-preview-caption {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    padding: 1em;
-    width: 100%;
-}
-.p-galleria-indicator-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding: .2em;
-}
-
-/* Thumbnails */
-.p-galleria-thumbnail-content {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    overflow: auto;
-    flex-shrink: 0;
-}
-.p-galleria-thumbnail-prev,
-.p-galleria-thumbnail-next {
-    align-self: center;
-    text-align: center;
-    flex-grow: 0;
-    flex-shrink: 0;
-    width: 2.5em;
-    height: 2.5em;
-}
-.p-galleria-thumbnail-prev span,
-.p-galleria-thumbnail-next span {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.p-galleria-thumbnail-container {
-    display: flex;
-    flex-direction: row;
-    padding: 0 .1em;
-}
-.p-galleria-thumbnail-items-content {
-    overflow: hidden;
-    width: 100%;
-}
-.p-galleria-thumbnail-items-container {
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-}
-.p-galleria-thumbnail-items-container .p-galleria-thumbnail-item {
-    width: 100%;
-    box-sizing: border-box;
-    overflow: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.p-galleria-thumbnail-item .p-galleria-thumbnail-item-content {
-    margin: .3em;
-    cursor: pointer;
-}
-
-/* Indicators */
-.p-galleria-indicator-onpreview .p-galleria-indicator-container {
-    position: absolute;
-    z-index: 1;
-}
-.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container {
-    top: 1em;
-    left: 0;
-    width: 100%;
-}
-.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container {
-    right: 1em;
-    top: 0;
-    height: 100%;
-}
-.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container {
-    bottom: 1em;
-    left: 0;
-    width: 100%;
-}
-.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container {
-    left: 1em;
-    top: 0;
-    height: 100%;
-}
-.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption,
-.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption {
-    width: calc(100% - 4em);
-}
-.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-caption,
-.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-preview-next {
-    right: 4em;
-}
-.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-caption,
-.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-preview-prev {
-    left: 4em;
-}
-
-/* Positions */
-/* Thumbnails */
-.p-galleria-thumbnails-left .p-galleria-content,
-.p-galleria-thumbnails-right .p-galleria-content {
-    flex-direction: row;
-    align-items: center;
-}
-.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
-.p-galleria-thumbnails-right .p-galleria-content .p-galleria-preview-content {
-    flex-direction: row;
-}
-.p-galleria-thumbnails-left .p-galleria-content .p-galleria-preview-content,
-.p-galleria-thumbnails-top .p-galleria-content .p-galleria-preview-content {
-    order: 2;
-}
-.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-content,
-.p-galleria-thumbnails-top .p-galleria-content .p-galleria-thumbnail-content {
-    order: 1;
-}
-.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-container,
-.p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-container {
-    flex-direction: column;
-}
-.p-galleria-thumbnails-left .p-galleria-content .p-galleria-thumbnail-items-container,
-.p-galleria-thumbnails-right .p-galleria-content .p-galleria-thumbnail-items-container {
-    flex-direction: column;
-    height: 100%;
-}
-/* Indicators */
-.p-galleria-indicators-left .p-galleria-preview-content,
-.p-galleria-indicators-right .p-galleria-preview-content {
-    flex-direction: row;
-    align-items: center;
-}
-.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-preview-container,
-.p-galleria-indicators-top .p-galleria-preview-content .p-galleria-preview-container {
-    order: 2;
-}
-.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container,
-.p-galleria-indicators-top .p-galleria-preview-content .p-galleria-indicator-container {
-    order: 1;
-}
-.p-galleria-indicators-left .p-galleria-preview-content .p-galleria-indicator-container,
-.p-galleria-indicators-right .p-galleria-preview-content .p-galleria-indicator-container {
-    flex-direction: column;
-}
-
-/* FullScreen */
-.p-galleria-mask {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-}
-.p-galleria-mask .p-galleria {
-    max-height: 90%;
-    max-width: calc(90% - 8em);
-}
-.p-galleria-close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: .5em;
-}
-.p-galleria-close span {
-    font-size: 3em;
-}
-.p-galleria-mask .p-galleria .p-galleria-preview-nav-button {
-    position: fixed;
-    top: 50%;
-    height: 20em;
-    width: 4em;
-    margin-top: -10em;
-}
-.p-galleria-mask .p-galleria .p-galleria-preview-prev {
-    left: 0;
-}
-.p-galleria-mask .p-galleria .p-galleria-preview-next {
-    right: 0;
-}
-
-/* Keyboard Support */
-.p-items-hidden .p-galleria-thumbnail-item {
-    visibility: hidden;
-}
-
-.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
-    visibility: visible;
-}
diff --git a/src/components/galleria/Galleria.d.ts b/src/components/galleria/Galleria.d.ts
deleted file mode 100644
index 3bd28a8e37..0000000000
--- a/src/components/galleria/Galleria.d.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import * as React from 'react';
-
-interface GalleriaProps {
-    id?: string;
-    value?: any[];
-    activeIndex?: number;
-    fullScreen?: boolean;
-    previewItemTemplate?: any;
-    thumbnailItemTemplate?: any;
-    indicatorItemTemplate?: any;
-    className?: string;
-    style?: object;
-    header?: any;
-    footer?: any;
-    numVisible?: number;
-    responsiveOptions?: any;
-    showPreviewNavButtons?: boolean;
-    showThumbnailNavButtons?: boolean;
-    showNavButtonsOnPreviewHover?: boolean;
-    changePreviewOnIndicatorHover?: boolean;
-    circular?: boolean;
-    autoPlay?: boolean;
-    transitionInterval?: number;
-    captionTemplate?: any;
-    showThumbnails?: boolean;
-    thumbnailsPosition?: string;
-    showIndicators?: boolean;
-    showIndicatorsOnPreview?: boolean;
-    indicatorsPosition?: string;
-    baseZIndex?: number;
-    onItemChange?(e: {index: number}): void;
-}
-
-export class Galleria extends React.Component<GalleriaProps,any> {
-    public show():void;
-    public hide():void;
-    public isAutoPlayActive():boolean;
-    public startSlideShow():void;
-    public stopSlideShow():void;
-}
diff --git a/src/components/galleria/Galleria.js b/src/components/galleria/Galleria.js
deleted file mode 100644
index d22e1c6775..0000000000
--- a/src/components/galleria/Galleria.js
+++ /dev/null
@@ -1,260 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-import { GalleriaPreview } from './GalleriaPreview';
-import { GalleriaThumbnails } from './GalleriaThumbnails';
-import DomHandler from '../utils/DomHandler';
-
-export class Galleria extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        activeIndex: 0,
-        fullScreen: false,
-        previewItemTemplate: null,
-        thumbnailItemTemplate: null,
-        indicatorItemTemplate: null,
-        className: null,
-        style: null,
-        header: null,
-        footer: null,
-        numVisible: 3,
-        responsiveOptions: null,
-        showPreviewNavButtons: false,
-        showThumbnailNavButtons: true,
-        showNavButtonsOnPreviewHover: false,
-        changePreviewOnIndicatorHover: false,
-        circular: false,
-        autoPlay: false,
-        transitionInterval: 4000,
-        captionTemplate: null,
-        showThumbnails: true,
-        thumbnailsPosition: "bottom",
-        verticalThumbnailViewPortHeight: "300px",
-        showIndicators: false,
-        showIndicatorsOnPreview: false,
-        indicatorsPosition: "bottom",
-        baseZIndex: 0,
-        onItemChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        activeIndex: PropTypes.number,
-        fullScreen: PropTypes.bool,
-        previewItemTemplate: PropTypes.any,
-        thumbnailItemTemplate: PropTypes.any,
-        indicatorItemTemplate: PropTypes.any,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        numVisible: PropTypes.number,
-        responsiveOptions: PropTypes.array,
-        showPreviewNavButtons: PropTypes.bool,
-        showThumbnailNavButtons: PropTypes.bool,
-        showNavButtonsOnPreviewHover: PropTypes.bool,
-        changePreviewOnIndicatorHover: PropTypes.bool,
-        circular: PropTypes.bool,
-        autoPlay: PropTypes.bool,
-        transitionInterval: PropTypes.number,
-        captionTemplate: PropTypes.any,
-        showThumbnails: PropTypes.bool,
-        thumbnailsPosition: PropTypes.string,
-        showIndicators: PropTypes.bool,
-        showIndicatorsOnPreview: PropTypes.bool,
-        indicatorsPosition: PropTypes.string,
-        baseZIndex: PropTypes.number,
-        onItemChange: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            visible: false,
-            slideShowActive: false
-        }
-
-        if (!this.props.onItemChange) {
-            this.state = {
-                ...this.state,
-                activeIndex: props.activeIndex
-            };
-        }
-
-        this.onActiveItemChange = this.onActiveItemChange.bind(this);
-        this.show = this.show.bind(this);
-        this.hide = this.hide.bind(this);
-        this.startSlideShow = this.startSlideShow.bind(this);
-        this.stopSlideShow = this.stopSlideShow.bind(this);
-
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    get activeItemIndex() {
-        return this.props.onItemChange ? this.props.activeIndex : this.state.activeIndex;
-    }
-
-    onActiveItemChange(event) {
-        if (this.props.onItemChange) {
-            this.props.onItemChange(event);
-        }
-        else {
-            this.setState({
-                activeIndex: event.index
-            });
-        }
-    }
-
-    show() {
-        if (this.props.fullScreen) {
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
-        }
-
-        this.setState({ visible: true }, () => {
-            if (this.mask) {
-                this.mask.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-            }
-        });
-    }
-
-    hide() {
-        if (this.props.fullScreen) {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-        }
-
-        this.setState({ visible: false });
-    }
-
-    isAutoPlayActive() {
-        return this.state.slideShowActive;
-    }
-
-    startSlideShow() {
-        this.interval = setInterval(() => {
-            let activeIndex = (this.props.circular && (this.props.value.length - 1) === this.activeItemIndex) ? 0 : (this.activeItemIndex + 1);
-            this.onActiveItemChange({index: activeIndex});
-
-        }, this.props.transitionInterval);
-
-        this.setState({ slideShowActive: true });
-    }
-
-    stopSlideShow() {
-        if (this.interval) {
-            clearInterval(this.interval);
-        }
-
-        this.setState({ slideShowActive: false });
-    }
-
-    getPositionClassName(preClassName, position) {
-        const positions = ['top', 'left', 'bottom', 'right'];
-        const pos = positions.find(item => item === position);
-
-        return pos ? `${preClassName}-${pos}` : '';
-    }
-
-    isVertical() {
-        return this.props.thumbnailsPosition === 'left' || this.props.thumbnailsPosition === 'right';
-    }
-
-    componentWillUnmount() {
-        if (this.state.slideShowActive) {
-            this.stopSlideShow();
-        }
-    }
-
-    renderHeader() {
-        if (this.props.header) {
-            return (<div className="p-galleria-header">
-                        { this.props.header }
-                    </div>);
-        }
-
-        return null;
-    }
-
-    renderFooter() {
-        if (this.props.footer) {
-            return (<div className="p-galleria-footer">
-                        { this.props.footer }
-                    </div>);
-        }
-
-        return null;
-    }
-
-    renderElement() {
-        const isVertical = this.isVertical();
-        const thumbnailsPosClassName = this.props.showThumbnails && this.getPositionClassName('p-galleria-thumbnails', this.props.thumbnailsPosition);
-        const indicatorPosClassName = this.props.showIndicators && this.getPositionClassName('p-galleria-indicators', this.props.indicatorsPosition);
-        const galleriaClassName = classNames('p-galleria p-component', this.props.className, {
-            'p-galleria-fullscreen': this.props.fullScreen,
-            'p-galleria-indicator-onpreview': this.props.showIndicatorsOnPreview,
-            'p-galleria-preview-nav-onhover': this.props.showNavButtonsOnPreviewHover && !this.props.fullScreen
-        }, thumbnailsPosClassName, indicatorPosClassName);
-
-        const closeIcon = this.props.fullScreen && (
-            <button type="button" className="p-galleria-close p-link" onClick={this.hide}>
-                <span className="p-galleria-close-icon pi pi-times"></span>
-            </button>
-        );
-
-        const header = this.renderHeader();
-        const footer = this.renderFooter();
-        const element = (
-            <div id={this.id} className={galleriaClassName} style={this.props.style}>
-                { closeIcon }
-                { header }
-                <div className="p-galleria-content">
-                    <GalleriaPreview ref={(el) => this.previewContent = ReactDOM.findDOMNode(el)} value={this.props.value} activeItemIndex={this.activeItemIndex} onActiveItemChange={this.onActiveItemChange}
-                        itemTemplate={this.props.previewItemTemplate} circular={this.props.circular} captionTemplate={this.props.captionTemplate}
-                        showIndicators={this.props.showIndicators} changePreviewOnIndicatorHover={this.props.changePreviewOnIndicatorHover} indicatorItemTemplate={this.props.indicatorItemTemplate}
-                        showPreviewNavButtons={this.props.showPreviewNavButtons} autoPlay={this.props.autoPlay} slideShowActive={this.state.slideShowActive}
-                        startSlideShow={this.startSlideShow} stopSlideShow={this.stopSlideShow}/>
-
-                    {
-                        this.props.showThumbnails && <GalleriaThumbnails containerId={this.id} value={this.props.value} activeItemIndex={this.activeItemIndex} onActiveItemChange={this.onActiveItemChange}
-                            itemTemplate={this.props.thumbnailItemTemplate} numVisible={this.props.numVisible} responsiveOptions={this.props.responsiveOptions} circular={this.props.circular}
-                            isVertical={isVertical} contentHeight={this.props.verticalThumbnailViewPortHeight} showThumbnailNavButtons={this.props.showThumbnailNavButtons}
-                            autoPlay={this.props.autoPlay} slideShowActive={this.state.slideShowActive} stopSlideShow={this.stopSlideShow} />
-                    }
-                </div>
-                { footer }
-            </div>
-        );
-
-        return element;
-    }
-
-    renderGalleria() {
-        const element = this.renderElement();
-
-        if (this.props.fullScreen) {
-            const maskClassName = classNames('p-galleria-mask p-component-overlay', {
-                'p-galleria-visible': this.state.visible
-            });
-
-            const galleriaWrapper = (
-                <div ref={(el) => this.mask = el} className={maskClassName}>
-                    { element }
-                </div>
-            );
-
-            return this.state.visible && ReactDOM.createPortal(galleriaWrapper, document.body);
-        }
-        else {
-            return element;
-        }
-    }
-
-    render() {
-        return this.props.value && this.props.value.length > 0 && this.renderGalleria();
-    }
-}
diff --git a/src/components/galleria/GalleriaPreview.d.ts b/src/components/galleria/GalleriaPreview.d.ts
deleted file mode 100644
index 610a23eaa4..0000000000
--- a/src/components/galleria/GalleriaPreview.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface GalleriaPreviewProps {
-}
-
-export class GalleriaPreview extends React.Component<GalleriaPreviewProps,any> {}
diff --git a/src/components/galleria/GalleriaPreview.js b/src/components/galleria/GalleriaPreview.js
deleted file mode 100644
index d8d505284b..0000000000
--- a/src/components/galleria/GalleriaPreview.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, { Component } from 'react';
-import classNames from 'classnames';
-
-export class GalleriaPreview extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.navForward = this.navForward.bind(this);
-        this.navBackward = this.navBackward.bind(this);
-        this.next = this.next.bind(this);
-        this.prev = this.prev.bind(this);
-    }
-
-    step(index) {
-        if (this.itemsContainer) {
-            this.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${index * 100}%, 0)` : `translate3d(${index * 100}%, 0, 0)`;
-            this.itemsContainer.style.transition = 'transform 500ms ease 0s';
-        }
-    }
-
-    next() {
-        let nextItemIndex = this.props.activeItemIndex + 1;
-
-        this.props.onActiveItemChange({
-            index: this.props.circular && (this.props.value.length - 1) === this.props.activeItemIndex ? 0 : nextItemIndex
-        });
-    }
-
-    prev() {
-        let prevItemIndex = this.props.activeItemIndex !== 0 ? this.props.activeItemIndex - 1 : 0;
-
-        this.props.onActiveItemChange({
-            index: this.props.circular && this.props.activeItemIndex === 0 ? this.props.value.length - 1 : prevItemIndex
-        });
-    }
-
-    stopSlideShow() {
-        if (this.props.slideShowActive && this.props.stopSlideShow) {
-            this.props.stopSlideShow();
-        }
-    }
-
-    navBackward(e) {
-        this.stopSlideShow();
-        this.prev();
-
-        if (e && e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    navForward(e) {
-        this.stopSlideShow();
-        this.next();
-
-        if (e && e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    onIndicatorClick(index) {
-        this.stopSlideShow();
-        this.props.onActiveItemChange({
-            index
-        });
-    }
-
-    onIndicatorMouseEnter(index) {
-        if (this.props.changePreviewOnIndicatorHover) {
-            this.stopSlideShow();
-
-            this.props.onActiveItemChange({
-                index
-            });
-        }
-    }
-
-    onIndicatorKeyDown(event, index) {
-        if (event.which === 13) {
-            this.stopSlideShow();
-
-            this.props.onActiveItemChange({
-                index
-            });
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.autoPlay) {
-            this.props.startSlideShow();
-        }
-    }
-
-    renderBackwardNavigator() {
-        if (this.props.showPreviewNavButtons) {
-            let isDisabled = !this.props.circular && this.props.activeItemIndex === 0;
-            let buttonClassName = classNames('p-galleria-preview-prev p-galleria-preview-nav-button p-button', {
-                'p-disabled': isDisabled
-            });
-
-            return (
-                <button type="button" className={buttonClassName} onClick={this.navBackward} disabled={isDisabled}>
-                    <span className="p-galleria-preview-prev-icon pi pi-chevron-left"></span>
-                </button>
-            );
-        }
-
-        return null;
-    }
-
-    renderForwardNavigator() {
-        if (this.props.showPreviewNavButtons) {
-            let isDisabled = !this.props.circular && this.props.activeItemIndex === (this.props.value.length - 1);
-            let buttonClassName = classNames('p-galleria-preview-next p-galleria-preview-nav-button p-button', {
-                'p-disabled': isDisabled
-            });
-
-            return (
-                <button type="button" className={buttonClassName} onClick={this.navForward} disabled={isDisabled}>
-                    <span className="p-galleria-preview-next-icon pi pi-chevron-right"></span>
-                </button>
-            );
-        }
-
-        return null;
-    }
-
-    renderCaption() {
-        if (this.props.captionTemplate) {
-            const content = this.props.captionTemplate(this.props.value[this.props.activeItemIndex]);
-            return (
-                <div className="p-galleria-preview-caption">
-                    { content }
-                </div>
-            );
-        }
-
-        return null;
-    }
-
-    renderIndicator(index) {
-        let indicator = this.props.indicatorItemTemplate && this.props.indicatorItemTemplate(index);
-        let isActive = this.props.activeItemIndex === index;
-        let indicatorItemClassName = classNames('p-galleria-indicator-item', {
-            'p-highlight': isActive
-        });
-
-        if (!indicator) {
-            let iconClassName = classNames('p-galleria-indicator-icon pi', {
-                'pi-circle-on': isActive,
-                'pi-circle-off': !isActive
-            });
-
-            indicator = (
-                <button type="button" tabIndex="-1" className="p-link">
-                    <span className={iconClassName}></span>
-                </button>
-            );
-        }
-
-        return (
-            <li className={indicatorItemClassName} key={'p-galleria-indicator-' + index} tabIndex={0}
-                onClick={() => this.onIndicatorClick(index)} onMouseEnter={() => this.onIndicatorMouseEnter(index)} onKeyDown={(e) => this.onIndicatorKeyDown(e, index)}>
-                { indicator }
-            </li>
-        );
-    }
-
-    renderIndicators() {
-        if (this.props.showIndicators) {
-            const dotsContainerClassName = classNames('p-galleria-indicator-container p-reset', this.props.dotsContainerClassName);
-            let indicators = [];
-
-            for (let i = 0; i < this.props.value.length; i++) {
-                indicators.push(this.renderIndicator(i));
-            }
-
-            return (
-                <ul className={dotsContainerClassName}>
-                    { indicators }
-                </ul>
-            );
-        }
-
-        return null;
-    }
-
-    render() {
-        const content = this.props.itemTemplate && this.props.itemTemplate(this.props.value[this.props.activeItemIndex]);
-        const backwardNavigator = this.renderBackwardNavigator();
-        const forwardNavigator = this.renderForwardNavigator();
-        const caption = this.renderCaption();
-        const indicators = this.renderIndicators();
-
-        return (
-            <div className="p-galleria-preview-content">
-                <div className="p-galleria-preview-container">
-                    { backwardNavigator }
-                    <div className="p-galleria-preview-items-content">
-                        { content }
-                    </div>
-                    { forwardNavigator }
-                    { caption }
-                </div>
-
-                { indicators }
-            </div>
-        );
-    }
-}
diff --git a/src/components/galleria/GalleriaThumbnails.d.ts b/src/components/galleria/GalleriaThumbnails.d.ts
deleted file mode 100644
index d43f4a737f..0000000000
--- a/src/components/galleria/GalleriaThumbnails.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as React from 'react';
-
-// tslint:disable-next-line:no-empty-interface
-interface GalleriaThumbnailsProps {
-}
-
-export class GalleriaThumbnails extends React.Component<GalleriaThumbnailsProps,any> {}
diff --git a/src/components/galleria/GalleriaThumbnails.js b/src/components/galleria/GalleriaThumbnails.js
deleted file mode 100644
index d9f319c12b..0000000000
--- a/src/components/galleria/GalleriaThumbnails.js
+++ /dev/null
@@ -1,471 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-class GalleriaThumbnailItem extends Component {
-
-    static defaultProps = {
-        index: null,
-        template: null,
-        item: null,
-        current: false,
-        active: false,
-        start: false,
-        end: false,
-        className: null,
-        onItemClick: null
-    }
-
-    static propTypes = {
-        index: PropTypes.number,
-        template: PropTypes.func,
-        item: PropTypes.any,
-        current: PropTypes.bool,
-        active: PropTypes.bool,
-        start: PropTypes.bool,
-        end: PropTypes.bool,
-        className: PropTypes.string,
-        onItemClick: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.onItemClick = this.onItemClick.bind(this);
-        this.onItemKeyDown = this.onItemKeyDown.bind(this);
-    }
-
-    onItemClick(event) {
-        this.props.onItemClick({
-            originalEvent: event,
-            index: this.props.index
-        });
-    }
-
-    onItemKeyDown(event) {
-        if (event.which === 13) {
-            this.props.onItemClick({
-                originalEvent: event,
-                index: this.props.index
-            });
-        }
-    }
-
-    render() {
-        const content = this.props.template && this.props.template(this.props.item);
-        const itemClassName = classNames(this.props.className, 'p-galleria-thumbnail-item', {
-            'p-galleria-thumbnail-item-current': this.props.current,
-            'p-galleria-thumbnail-item-active': this.props.active,
-            'p-galleria-thumbnail-item-start': this.props.start,
-            'p-galleria-thumbnail-item-end': this.props.end
-        });
-
-        return (
-            <div className={itemClassName}>
-                <div className="p-galleria-thumbnail-item-content" tabIndex={this.props.active ? 0 : null} onClick={this.onItemClick} onKeyDown={this.onItemKeyDown}>
-                    { content }
-                </div>
-            </div>
-        );
-    }
-}
-
-export class GalleriaThumbnails extends Component {
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            numVisible: props.numVisible,
-            totalShiftedItems: 0,
-            page: 0
-        }
-
-        this.navForward = this.navForward.bind(this);
-        this.navBackward = this.navBackward.bind(this);
-        this.onTransitionEnd = this.onTransitionEnd.bind(this);
-        this.onTouchStart = this.onTouchStart.bind(this);
-        this.onTouchMove = this.onTouchMove.bind(this);
-        this.onTouchEnd = this.onTouchEnd.bind(this);
-        this.onItemClick = this.onItemClick.bind(this);
-    }
-
-    step(dir) {
-        let totalShiftedItems = this.state.totalShiftedItems + dir;
-
-        if (dir < 0 && (-1 * totalShiftedItems) + this.state.numVisible > (this.props.value.length - 1)) {
-            totalShiftedItems = this.state.numVisible - this.props.value.length;
-        }
-        else if (dir > 0 && totalShiftedItems > 0) {
-            totalShiftedItems = 0;
-        }
-
-        if (this.props.circular) {
-            if (dir < 0 && this.props.value.length - 1 === this.props.activeItemIndex) {
-                totalShiftedItems = 0;
-            }
-            else if (dir > 0 && this.props.activeItemIndex === 0) {
-                totalShiftedItems = this.state.numVisible - this.props.value.length;
-            }
-        }
-
-        if (this.itemsContainer) {
-            DomHandler.removeClass(this.itemsContainer, 'p-items-hidden');
-            this.itemsContainer.style.transform = this.props.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.state.numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.state.numVisible)}%, 0, 0)`;
-            this.itemsContainer.style.transition = 'transform 500ms ease 0s';
-        }
-
-        this.setState({
-            totalShiftedItems
-        });
-    }
-
-    stopSlideShow() {
-        if (this.props.slideShowActive && this.props.stopSlideShow) {
-            this.props.stopSlideShow();
-        }
-    }
-
-    getMedianItemIndex() {
-        let index = Math.floor(this.state.numVisible / 2);
-
-        return (this.state.numVisible % 2) ? index : index - 1;
-    }
-
-    navBackward(e) {
-        this.stopSlideShow();
-
-        let prevItemIndex = this.props.activeItemIndex !== 0 ? this.props.activeItemIndex - 1 : 0;
-        let diff = prevItemIndex + this.state.totalShiftedItems;
-        if ((this.state.numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.state.totalShiftedItems) !== 0 || this.props.circular)) {
-            this.step(1);
-        }
-
-        this.props.onActiveItemChange({
-            index: this.props.circular && this.props.activeItemIndex === 0 ? this.props.value.length - 1 : prevItemIndex
-        });
-
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    navForward(e) {
-        this.stopSlideShow();
-
-        let nextItemIndex = this.props.activeItemIndex + 1;
-        if (nextItemIndex + this.state.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.state.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.props.circular)) {
-            this.step(-1);
-        }
-
-        this.props.onActiveItemChange({
-            index: this.props.circular && (this.props.value.length - 1) === this.props.activeItemIndex ? 0 : nextItemIndex
-        });
-
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    onItemClick(event) {
-        this.stopSlideShow();
-
-        let selectedItemIndex = event.index;
-        if (selectedItemIndex !== this.props.activeItemIndex) {
-            const diff = selectedItemIndex + this.state.totalShiftedItems;
-            let dir = 0;
-            if (selectedItemIndex < this.props.activeItemIndex) {
-                dir = (this.state.numVisible - diff - 1) - this.getMedianItemIndex();
-                if (dir > 0 && (-1 * this.state.totalShiftedItems) !== 0) {
-                    this.step(dir);
-                }
-            }
-            else {
-                dir = this.getMedianItemIndex() - diff;
-                if (dir < 0 && (-1 * this.state.totalShiftedItems) < this.getTotalPageNumber() - 1) {
-                    this.step(dir);
-                }
-            }
-
-            this.props.onActiveItemChange({
-                index: selectedItemIndex
-            });
-        }
-    }
-
-    onTransitionEnd() {
-        if (this.itemsContainer) {
-            DomHandler.addClass(this.itemsContainer, 'p-items-hidden');
-            this.itemsContainer.style.transition = '';
-        }
-    }
-
-    onTouchStart(e) {
-        let touchobj = e.changedTouches[0];
-
-        this.startPos = {
-            x: touchobj.pageX,
-            y: touchobj.pageY
-        };
-    }
-
-    onTouchMove(e) {
-        if (e.cancelable) {
-            e.preventDefault();
-        }
-    }
-
-    onTouchEnd(e) {
-        let touchobj = e.changedTouches[0];
-
-        if (this.props.isVertical) {
-            this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
-        }
-        else {
-            this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
-        }
-    }
-
-    changePageOnTouch(e, diff) {
-        if (diff < 0) {           // left
-            this.navForward(e);
-        }
-        else {                    // right
-            this.navBackward(e);
-        }
-    }
-
-    getTotalPageNumber() {
-        return this.props.value.length > this.state.numVisible ? (this.props.value.length - this.state.numVisible) + 1 : 0;
-    }
-
-    createStyle() {
-        if (!this.thumbnailsStyle) {
-            this.thumbnailsStyle = document.createElement('style');
-            this.thumbnailsStyle.type = 'text/css';
-            document.body.appendChild(this.thumbnailsStyle);
-        }
-
-        let innerHTML = `
-            #${this.props.containerId} .p-galleria-thumbnail-item {
-                flex: 1 0 ${ (100/ this.state.numVisible) }%
-            }
-        `;
-
-        if (this.props.responsiveOptions) {
-            this.responsiveOptions = [...this.props.responsiveOptions];
-            this.responsiveOptions.sort((data1, data2) => {
-                const value1 = data1.breakpoint;
-                const value2 = data2.breakpoint;
-                let result = null;
-
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-
-                return -1 * result;
-            });
-
-            for (let i = 0; i < this.responsiveOptions.length; i++) {
-                let res = this.responsiveOptions[i];
-
-                innerHTML += `
-                    @media screen and (max-width: ${res.breakpoint}) {
-                        #${this.props.containerId} .p-galleria-thumbnail-item {
-                            flex: 1 0 ${ (100/ res.numVisible) }%
-                        }
-                    }
-                `
-            }
-        }
-
-        this.thumbnailsStyle.innerHTML = innerHTML;
-    }
-
-    calculatePosition() {
-        if (this.itemsContainer && this.responsiveOptions) {
-            let windowWidth = window.innerWidth;
-            let matchedResponsiveData = {
-                numVisible: this.props.numVisible
-            };
-
-            for (let i = 0; i < this.responsiveOptions.length; i++) {
-                let res = this.responsiveOptions[i];
-
-                if (parseInt(res.breakpoint, 10) >= windowWidth) {
-                    matchedResponsiveData = res;
-                }
-            }
-
-            if (this.state.numVisible !== matchedResponsiveData.numVisible) {
-                this.setState({
-                    numVisible: matchedResponsiveData.numVisible
-                });
-            }
-        }
-    }
-
-    bindDocumentListeners() {
-        if (!this.documentResizeListener) {
-            this.documentResizeListener = () => {
-                this.calculatePosition();
-            };
-
-            window.addEventListener('resize', this.documentResizeListener);
-        }
-    }
-
-    unbindDocumentListeners() {
-        if(this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-
-    componentDidMount() {
-        this.createStyle();
-        this.calculatePosition();
-
-        if (this.props.responsiveOptions) {
-            this.bindDocumentListeners();
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        let totalShiftedItems = this.state.totalShiftedItems;
-
-        if (prevState.numVisible !== this.state.numVisible || prevProps.activeItemIndex !== this.props.activeItemIndex) {
-            if (this.props.activeItemIndex <= this.getMedianItemIndex()) {
-                totalShiftedItems = 0;
-            }
-            else if (this.props.value.length - this.state.numVisible + this.getMedianItemIndex() < this.props.activeItemIndex) {
-                totalShiftedItems = this.state.numVisible - this.props.value.length;
-            }
-            else if (this.props.value.length - this.state.numVisible < this.props.activeItemIndex && this.state.numVisible % 2 === 0) {
-                totalShiftedItems = (this.props.activeItemIndex * -1) + this.getMedianItemIndex() + 1;
-            }
-            else {
-                totalShiftedItems = (this.props.activeItemIndex * -1) + this.getMedianItemIndex();
-            }
-
-            if (totalShiftedItems !== this.state.totalShiftedItems) {
-                this.setState({
-                    totalShiftedItems
-                })
-            }
-
-            this.itemsContainer.style.transform = this.props.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.state.numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.state.numVisible)}%, 0, 0)`;
-
-            if (prevProps.activeItemIndex !== this.props.activeItemIndex) {
-                DomHandler.removeClass(this.itemsContainer, 'p-items-hidden');
-                this.itemsContainer.style.transition = 'transform 500ms ease 0s';
-            }
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.responsiveOptions) {
-            this.unbindDocumentListeners();
-        }
-    }
-
-    renderItems() {
-        let items = this.props.value.map((item, index) => {
-                        let firstIndex = this.state.totalShiftedItems * -1,
-                        lastIndex = firstIndex + this.state.numVisible - 1,
-                        isActive = firstIndex <= index && lastIndex >= index,
-                        start = firstIndex === index,
-                        end = lastIndex === index,
-                        current = this.props.activeItemIndex === index;
-
-                        return <GalleriaThumbnailItem key={index} index={index} template={this.props.itemTemplate} item={item} active={isActive} start={start} end={end}
-                            onItemClick={this.onItemClick} current={current}/>
-                    });
-
-        return (
-            <React.Fragment>
-                { items }
-            </React.Fragment>
-        );
-    }
-
-    renderBackwardNavigator() {
-        if (this.props.showThumbnailNavButtons) {
-            let isDisabled = (!this.props.circular && this.props.activeItemIndex === 0) || (this.props.value.length <= this.state.numVisible);
-            let buttonClassName = classNames('p-galleria-thumbnail-prev p-button', {
-                'p-disabled': isDisabled
-            }),
-            iconClassName = classNames('p-galleria-thumbnail-prev-icon pi', {
-                'pi-chevron-left': !this.props.isVertical,
-                'pi-chevron-up': this.props.isVertical
-            });
-
-            return (
-                <button className={buttonClassName} onClick={this.navBackward} disabled={isDisabled}>
-                    <span className={iconClassName}></span>
-                </button>
-            );
-        }
-
-        return null;
-    }
-
-    renderForwardNavigator() {
-        if (this.props.showThumbnailNavButtons) {
-            let isDisabled = (!this.props.circular && this.props.activeItemIndex === (this.props.value.length - 1)) || (this.props.value.length <= this.state.numVisible);
-            let buttonClassName = classNames('p-galleria-thumbnail-next p-button', {
-                'p-disabled': isDisabled
-            }),
-            iconClassName = classNames('p-galleria-thumbnail-next-icon pi', {
-                'pi-chevron-right': !this.props.isVertical,
-                'pi-chevron-down': this.props.isVertical
-            });
-
-            return (
-                <button className={buttonClassName} onClick={this.navForward} disabled={isDisabled}>
-                    <span className={iconClassName}></span>
-                </button>
-            );
-        }
-
-        return null;
-    }
-
-    renderContent() {
-        const items = this.renderItems();
-        const height = this.props.isVertical ? this.props.contentHeight : '';
-        const backwardNavigator = this.renderBackwardNavigator();
-        const forwardNavigator = this.renderForwardNavigator();
-
-        return (
-            <div className="p-galleria-thumbnail-container">
-                { backwardNavigator }
-                <div className="p-galleria-thumbnail-items-content" style={{'height': height}}>
-                    <div ref={(el) => this.itemsContainer = el} className="p-galleria-thumbnail-items-container" onTransitionEnd={this.onTransitionEnd}
-                        onTouchStart={this.onTouchStart} onTouchMove={this.onTouchMove} onTouchEnd={this.onTouchEnd}>
-                        { items }
-                    </div>
-                </div>
-                { forwardNavigator }
-            </div>
-        );
-    }
-
-    render() {
-        const content = this.renderContent();
-
-        return (
-            <div className="p-galleria-thumbnail-content">
-                { content }
-            </div>
-        );
-    }
-}
diff --git a/src/components/gmap/GMap.d.ts b/src/components/gmap/GMap.d.ts
deleted file mode 100644
index 1af7e9d5d4..0000000000
--- a/src/components/gmap/GMap.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-interface GMapProps {
-    options?: object;
-    overlays?: any[];
-    style?: object;
-    className?: string;
-    onMapReady?(map: any): void;
-    onMapClick?(event: Event): void;
-    onMapDragEnd?(): void;
-    onZoomChanged?(): void;
-    onOverlayDragStart?(event: Event): void;
-    onOverlayDrag?(event: Event): void;
-    onOverlayDragEnd?(event: Event): void;
-    onOverlayClick?(e: {originalEvent: Event, overlay: any, map: any}): void;
-}
-
-export class GMap extends React.Component<GMapProps,any> {}
diff --git a/src/components/gmap/GMap.js b/src/components/gmap/GMap.js
deleted file mode 100644
index 9d4b822a2a..0000000000
--- a/src/components/gmap/GMap.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/*global google*/
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-export class GMap extends Component {
-
-    static defaultProps = {
-        options: null,
-        overlays: null,
-        style: null,
-        className: null,
-        onMapReady: null,
-        onMapClick: null,
-        onMapDragEnd: null,
-        onZoomChanged: null,
-        onOverlayDragStart: null,
-        onOverlayDrag: null,
-        onOverlayDragEnd: null,
-        onOverlayClick: null
-    }
-
-    static propTypes = {
-        options: PropTypes.object,
-        overlays: PropTypes.array,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        onMapReady: PropTypes.func,
-        onMapClick: PropTypes.func,
-        onMapDragEnd: PropTypes.func,
-        onZoomChanged: PropTypes.func,
-        onOverlayDragStart: PropTypes.func,
-        onOverlayDrag: PropTypes.func,
-        onOverlayDragEnd: PropTypes.func,
-        onOverlayClick: PropTypes.func
-    };
-        
-    initMap() {
-        this.map = new google.maps.Map(this.container, this.props.options);
-        
-        if(this.props.onMapReady) {
-            this.props.onMapReady({
-                map: this.map
-            });
-        } 
-        
-        this.initOverlays(this.props.overlays);
-        
-        this.bindMapEvent('click', this.props.onMapClick);
-        this.bindMapEvent('dragend', this.props.onMapDragEnd);
-        this.bindMapEvent('zoom_changed', this.props.onZoomChanged);
-    }
-    
-    initOverlays(overlays) {
-        if(overlays) {
-            for(let overlay of overlays) {
-                overlay.setMap(this.map);
-                this.bindOverlayEvents(overlay);
-            }
-        }
-    }
-    
-    bindOverlayEvents(overlay) {
-        overlay.addListener('click', (event) => {
-            if(this.props.onOverlayClick) {
-                this.props.onOverlayClick({
-                    originalEvent: event,
-                    overlay: overlay,
-                    map: this.map
-                });
-            }
-        });
-        
-        if(overlay.getDraggable()) {
-            this.bindDragEvents(overlay);
-        }
-    }
-    
-    bindDragEvents(overlay) {
-        this.bindDragEvent(overlay, 'dragstart', this.props.onOverlayDragStart);
-        this.bindDragEvent(overlay, 'drag', this.props.onOverlayDrag);
-        this.bindDragEvent(overlay, 'dragend', this.props.onOverlayDragEnd);
-    }
-    
-    bindMapEvent(eventName, callback) {
-        this.map.addListener(eventName, (event) => {
-            if(callback) {
-                callback(event);
-            }
-        });
-    }
-    
-    bindDragEvent(overlay, eventName, callback) {
-        overlay.addListener(eventName, (event) => {
-            if(callback) {
-                callback({
-                    originalEvent: event,
-                    overlay: overlay,
-                    map: this.map
-                });
-            }
-        });
-    }
-    
-    getMap() {
-        return this.map;
-    }
-    
-    componentDidUpdate(prevProps, prevState, snapshot) {
-        if(prevProps.overlays !== this.props.overlays) {
-            if(prevProps.overlays) {
-                for(let overlay of prevProps.overlays) {
-                    google.maps.event.clearInstanceListeners(overlay);
-                    overlay.setMap(null);
-                }
-            }
-            
-            this.initOverlays(this.props.overlays);
-        }
-    }
-    
-    componentDidMount() {
-        this.initMap();
-    }
-    
-    render() {
-        return (
-            <div ref={(el) => this.container = el} style={this.props.style} className={this.props.className}></div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/growl/Growl.css b/src/components/growl/Growl.css
deleted file mode 100644
index e4be9a8024..0000000000
--- a/src/components/growl/Growl.css
+++ /dev/null
@@ -1,96 +0,0 @@
-.p-growl {
-    position:fixed;
-	width: 20em;
-}
-
-.p-growl.p-growl-topright {
-	top: 20px;
-	bottom: auto;
-	right: 20px;
-}
-
-.p-growl.p-growl-topleft {
-	top: 20px;
-	bottom: auto;
-	left: 20px;
-}
-
-.p-growl.p-growl-bottomleft {
-	top: auto;
-	bottom: 20px;
-	left: 20px;
-}
-
-.p-growl.p-growl-bottomright {
-	top: auto;
-	bottom: 20px;
-	right: 20px;
-}
-
-.p-growl-item-container {
-	position:relative;
-	margin:0 0 10px 0;
-}
-
-.p-growl-item {
-	position: relative;
-    padding: .5em 1em;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-}
-
-.p-growl-item p {
-	padding: 0;
-	margin: 0;
-}
-
-.p-growl-icon-close {
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	cursor: pointer;
-}
-
-.p-growl-title {
-	font-weight: bold;
-	display: block;
-}
-
-.p-growl-details {
-    margin-top: .5em;
-}
-
-.p-growl-image {
-	font-size: 2em;
-}
-
-.p-growl-message {
-    margin-left: 1em;
-    align-self: center;
-}
-
-.p-growl-message p {
-	font-weight: normal;
-}
-
-/* Animations */
-.p-growl-enter {
-    opacity: 0.01;
-}
-
-.p-growl-enter.p-growl-enter-active {
-    opacity: 1;
-    transition: opacity 250ms ease-in;
-}
-
-.p-growl-exit {
-	max-height: 500px;
-}
-
-.p-growl-exit.p-growl-exit-active {
-	max-height: 0;
-	overflow: hidden;
-	margin-bottom: 0;
-	transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), margin-bottom 0.5s cubic-bezier(0, 1, 0, 1);
-}
diff --git a/src/components/growl/Growl.d.ts b/src/components/growl/Growl.d.ts
deleted file mode 100644
index 2e4b11bae4..0000000000
--- a/src/components/growl/Growl.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-export interface GrowlMessage {
-    severity?: 'success' | 'info' | 'warn' | 'error',
-    summary?: React.ReactNode;
-    detail?: React.ReactNode;
-    closable?: boolean;
-    sticky?: boolean;
-    life?: number;
-}
-
-interface GrowlProps {
-    id?: string;
-    className?: string;
-    style?: object;
-    baseZIndex?: number;
-    position?: string;
-    onClick?(message: GrowlMessage): void;
-    onClose?(message: GrowlMessage): void;
-    onRemove?(message: GrowlMessage): void;
-}
-
-export class Growl extends React.Component<GrowlProps, any> {
-    public show(message: GrowlMessage | GrowlMessage[]): void;
-    public clear():void;
-}
diff --git a/src/components/growl/Growl.js b/src/components/growl/Growl.js
deleted file mode 100644
index ff01a15a10..0000000000
--- a/src/components/growl/Growl.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {GrowlMessage} from './GrowlMessage';
-import DomHandler from '../utils/DomHandler';
-import {CSSTransition, TransitionGroup} from 'react-transition-group';
-
-var messageIdx = 0;
-
-export class Growl extends Component {
-
-    static defaultProps = {
-        id: null,
-        className: null,
-        style: null,
-        baseZIndex: 0,
-        position: 'topright',
-        onClick: null,
-        onRemove: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        baseZIndex: PropTypes.number,
-        position: PropTypes.string,
-        onClick: PropTypes.func,
-        onRemove: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props)
-        this.state = {
-            messages: [] 
-        };
-
-        this.onClose = this.onClose.bind(this);
-    }
-
-    show(value) {
-        if (value) {
-            let newMessages;
-
-            if (Array.isArray(value)) {
-                for (let i = 0; i < value.length; i++) {
-                    value[i].id = messageIdx++;
-                    newMessages = [...this.state.messages, ...value];
-                }
-            }
-            else {
-                value.id = messageIdx++;
-                newMessages = this.state.messages ? [...this.state.messages, value] : [value];
-            }
-
-            this.setState({
-                messages: newMessages
-            });
-
-            this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-        }
-    }
-
-    clear() {
-        this.setState({
-            messages: []
-        })
-    }
-    
-    onClose(message) {
-        let newMessages = this.state.messages.filter(msg => msg.id !== message.id);
-        this.setState({
-            messages: newMessages
-        });
-
-        if (this.props.onRemove) {
-            this.props.onRemove(message);
-        }
-    }
- 
-    render() {
-        let className = classNames('p-growl p-component p-growl-' + this.props.position, this.props.className);
-
-        return (
-            <div ref={(el) => { this.container = el; }} id={this.props.id} className={className} style={this.props.style}>
-                <TransitionGroup>
-                    {this.state.messages.map((message) =>
-                        <CSSTransition key={message.id} classNames="p-growl"
-                            timeout={{ enter: 250, exit: 500 }}>
-                            <GrowlMessage message={message} onClick={this.props.onClick} onClose={this.onClose} />
-                        </CSSTransition>
-                    )}
-                </TransitionGroup>
-            </div>
-        );  
-    }
-}
\ No newline at end of file
diff --git a/src/components/growl/GrowlMessage.js b/src/components/growl/GrowlMessage.js
deleted file mode 100644
index 738ab58272..0000000000
--- a/src/components/growl/GrowlMessage.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class GrowlMessage extends Component {
-
-    static defaultProps = {
-        message: null,
-        onClose: null,
-        onClick: null
-    }
-
-    static propTypes = {
-        message: PropTypes.object,
-        onClose: PropTypes.func,
-        onClick: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.onClick = this.onClick.bind(this);
-        this.onClose = this.onClose.bind(this);
-    }
-
-    componentWillUnmount() {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-    }
-
-    componentDidMount() {
-        if (!this.props.message.sticky) {
-            this.timeout = setTimeout(() => {
-                this.onClose(null);
-            }, this.props.message.life||3000);
-        }
-    }
-
-    onClose() {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-
-        if (this.props.onClose) {
-            this.props.onClose(this.props.message);
-        }
-    }
-
-    onClick(event) {
-        if (this.props.onClick && !(DomHandler.hasClass(event.target, 'p-growl-icon-close') || DomHandler.hasClass(event.target, 'p-growl-icon-close-icon'))) {
-            this.props.onClick(this.props.message);
-        }
-    }
-
-    renderCloseIcon() {
-        if (this.props.message.closable !== false) {
-            return (
-                <button type="button" className="p-growl-icon-close p-link" onClick={this.onClose}>
-                    <span className="p-growl-icon-close-icon pi pi-times"></span>
-                </button>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-growl-item-container p-highlight', {
-            'p-growl-message-info': this.props.message.severity === 'info',
-            'p-growl-message-warn': this.props.message.severity === 'warn',
-            'p-growl-message-error': this.props.message.severity === 'error',
-            'p-growl-message-success': this.props.message.severity === 'success'
-        });
-
-        let iconClassName = classNames('p-growl-image pi', {
-            'pi-info-circle': this.props.message.severity === 'info',
-            'pi-exclamation-triangle': this.props.message.severity === 'warn',
-            'pi-times': this.props.message.severity === 'error',
-            'pi-check': this.props.message.severity === 'success'
-        });
-
-        let closeIcon = this.renderCloseIcon();
-
-        return (
-            <div ref={(el) => { this.element = el; }} className={className} aria-live="polite" onClick={this.onClick}>
-                <div className="p-growl-item" role="alert" aria-live="assertive" aria-atomic="true">
-                    {closeIcon}
-                    <span className={iconClassName}></span>
-                    <div className="p-growl-message">
-                        <span className="p-growl-title">{this.props.message.summary}</span>
-                        { this.props.message.detail && <div className="p-growl-details">{this.props.message.detail}</div> }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/components/inplace/Inplace.css b/src/components/inplace/Inplace.css
deleted file mode 100644
index d86c62a93d..0000000000
--- a/src/components/inplace/Inplace.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.p-inplace .p-inplace-display {
-    display: inline;
-    cursor: pointer;
-    border: 0 none;
-    padding: .25em;
-    font-weight: normal;
-}
-
-.p-inplace .p-inplace-content {
-    display: inline;
-}
\ No newline at end of file
diff --git a/src/components/inplace/Inplace.d.ts b/src/components/inplace/Inplace.d.ts
deleted file mode 100644
index dd8996529f..0000000000
--- a/src/components/inplace/Inplace.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-interface InplaceProps {
-    style?: object;
-    className?: string;
-    active?: boolean;
-    closable?: boolean;
-    disabled?: boolean;
-    tabIndex?: string;
-    onOpen?(event: Event): void;
-    onClose?(event: Event): void;
-    onToggle?(e:{originalEvent: Event, value: boolean}): void;
-}
-
-export class Inplace extends React.Component<InplaceProps,any> {}
-
-// tslint:disable-next-line:max-classes-per-file
-export class InplaceDisplay extends React.Component{}
-
-// tslint:disable-next-line:max-classes-per-file
-export class InplaceContent extends React.Component {}
diff --git a/src/components/inplace/Inplace.js b/src/components/inplace/Inplace.js
deleted file mode 100644
index 27483efa48..0000000000
--- a/src/components/inplace/Inplace.js
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {Button} from '../button/Button';
-
-export class InplaceDisplay extends Component {
-
-    render() {
-        return (
-            <React.Fragment>
-                {this.props.children}
-            </React.Fragment>
-        )
-    }
-
-}
-
-export class InplaceContent extends Component {
-
-    render() {
-        return (
-            <React.Fragment>
-                {this.props.children}
-            </React.Fragment>
-        )
-    }
-
-}
-
-export class Inplace extends Component {
-
-    static defaultProps = {
-        style: null,
-        className: null,
-        active: false,
-        closable: false,
-        disabled: false,
-        tabIndex: '0',
-        onOpen: null,
-        onClose: null,
-        onToggle: null
-    };
-
-    static propTypes = {
-        style: PropTypes.object,
-        className: PropTypes.string,
-        active: PropTypes.bool,
-        closable: PropTypes.bool,
-        disabled: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        onOpen: PropTypes.func,
-        onClose: PropTypes.func,
-        onToggle: PropTypes.func,
-    };
-    
-    constructor(props) {
-        super(props);
-        if (!this.props.onToggle) {
-            this.state = {
-                active: false
-            }
-        }
-        
-        this.open = this.open.bind(this);
-        this.close = this.close.bind(this);
-        this.onDisplayKeyDown = this.onDisplayKeyDown.bind(this);
-    }
-
-    open(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        if(this.props.onOpen) {
-            this.props.onOpen(event);
-        }
-        if (this.props.onToggle) {
-            this.props.onToggle({
-                originalEvent: event,
-                value: true
-            });
-        }
-        else {
-            this.setState({
-                active: true
-            });
-        }
-    }
-
-    close(event) {
-        if (this.props.onClose) {
-            this.props.onClose(event);
-        }
-
-        if (this.props.onToggle) {
-            this.props.onToggle({
-                originalEvent: event,
-                value: false
-            });
-        }
-        else {
-            this.setState({
-                active: false
-            });
-        }
-    }
-
-    onDisplayKeyDown(event) {
-        if (event.key === 'Enter') {
-            this.open(event);
-            event.preventDefault();
-        }
-    }
-
-    isActive() {
-        return this.props.onToggle ? this.props.active: this.state.active;
-    }
-
-    renderDisplay(content) {
-        const className = classNames('p-inplace-display', {'p-disabled': this.props.disabled});
-
-        return (
-            <div className={className} onClick={this.open} onKeyDown={this.onDisplayKeyDown} tabIndex={this.props.tabIndex} >
-                {content}
-            </div>
-        );
-    }
-    
-    renderCloseButton() {
-        if (this.props.closable) {
-            return (
-                <Button type="button" icon="pi pi-times" onClick={this.close} />
-            )
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderContent(content) {
-        const closeButton = this.renderCloseButton();
-
-        return (
-            <div className="p-inplace-content">
-                {content}
-                {closeButton}
-            </div>
-        );
-    }
-
-    renderChildren() {
-        const active = this.isActive();
-
-        return (
-            React.Children.map(this.props.children, (child, i) => {
-                if (active && child.type === InplaceContent) {
-                    return this.renderContent(child);
-                }
-                else if (!active && child.type === InplaceDisplay) {
-                    return this.renderDisplay(child);
-                }
-            })
-        );
-    }
-
-    render() {
-        const className = classNames('p-inplace p-component', {'p-inplace-closable': this.props.closable}, this.props.className);
-
-        return (
-            <div className={className}>
-                {this.renderChildren()}
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/inputmask/InputMask.d.ts b/src/components/inputmask/InputMask.d.ts
deleted file mode 100644
index 8cc0f2a84a..0000000000
--- a/src/components/inputmask/InputMask.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface InputMaskProps {
-    id?: string;
-    value?: string;
-    type?: string;
-    mask?: string;
-    slotChar?: string;
-    autoClear?: boolean;
-    unmask?: boolean;
-    style?: object;
-    className?: string;
-    placeholder?: string;
-    size?: number;
-    maxlength?: number;
-    tabindex?: number;
-    disabled?: boolean;
-    readonly?: boolean;
-    name?: string;
-    required?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    onComplete?(e: {originalEvent: Event, value: any}): void;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-}
-
-export class InputMask extends React.Component<InputMaskProps,any> {}
diff --git a/src/components/inputmask/InputMask.js b/src/components/inputmask/InputMask.js
deleted file mode 100644
index 9eaa2dc2d1..0000000000
--- a/src/components/inputmask/InputMask.js
+++ /dev/null
@@ -1,600 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import DomHandler from '../utils/DomHandler';
-import { InputText } from '../inputtext/InputText';
-import Tooltip from "../tooltip/Tooltip";
-
-export class InputMask extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        type: 'text',
-        mask: null,
-        slotChar: '_',
-        autoClear: true,
-        unmask: false,
-        style: null,
-        className: null,
-        placeholder: null,
-        size: null,
-        maxlength: null,
-        tabindex: null,
-        disabled: false,
-        readonly: false,
-        name: null,
-        required: false,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onComplete: null,
-        onChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.string,
-        type: PropTypes.string,
-        mask: PropTypes.string,
-        slotChar: PropTypes.string,
-        autoClear: PropTypes.bool,
-        unmask: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        placeholder: PropTypes.string,
-        size: PropTypes.number,
-        maxlength: PropTypes.number,
-        tabindex: PropTypes.number,
-        disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
-        name: PropTypes.string,
-        required: PropTypes.bool,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onComplete: PropTypes.func,
-        onChange: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onKeyPress = this.onKeyPress.bind(this);
-        this.onInput = this.onInput.bind(this);
-        this.handleInputChange = this.handleInputChange.bind(this);
-    }
-
-    caret(first, last) {
-        let range, begin, end;
-
-        if (!this.input.offsetParent || this.input !== document.activeElement) {
-            return;
-        }
-
-        if (typeof first === 'number') {
-            begin = first;
-            end = (typeof last === 'number') ? last : begin;
-            if (this.input.setSelectionRange) {
-                this.input.setSelectionRange(begin, end);
-            }
-            else if (this.input['createTextRange']) {
-                range = this.input['createTextRange']();
-                range.collapse(true);
-                range.moveEnd('character', end);
-                range.moveStart('character', begin);
-                range.select();
-            }
-        }
-        else {
-            if (this.input.setSelectionRange) {
-                begin = this.input.selectionStart;
-                end = this.input.selectionEnd;
-            }
-            else if (document['selection'] && document['selection'].createRange) {
-                range = document['selection'].createRange();
-                begin = 0 - range.duplicate().moveStart('character', -100000);
-                end = begin + range.text.length;
-            }
-
-            return { begin: begin, end: end };
-        }
-    }
-
-    isCompleted() {
-        for (let i = this.firstNonMaskPos; i <= this.lastRequiredNonMaskPos; i++) {
-            if (this.tests[i] && this.buffer[i] === this.getPlaceholder(i)) {
-                return false;
-            }
-        }
-
-        return true;
-    }
-
-    getPlaceholder(i) {
-        if (i < this.props.slotChar.length) {
-            return this.props.slotChar.charAt(i);
-        }
-        return this.props.slotChar.charAt(0);
-    }
-
-    getValue() {
-        return this.props.unmask ? this.getUnmaskedValue() : this.input && this.input.value;
-    }
-
-    seekNext(pos) {
-        while (++pos < this.len && !this.tests[pos]);
-        return pos;
-    }
-
-    seekPrev(pos) {
-        while (--pos >= 0 && !this.tests[pos]);
-        return pos;
-    }
-
-    shiftL(begin, end) {
-        let i, j;
-
-        if (begin < 0) {
-            return;
-        }
-
-        for (i = begin, j = this.seekNext(end); i < this.len; i++) {
-            if (this.tests[i]) {
-                if (j < this.len && this.tests[i].test(this.buffer[j])) {
-                    this.buffer[i] = this.buffer[j];
-                    this.buffer[j] = this.getPlaceholder(j);
-                } else {
-                    break;
-                }
-
-                j = this.seekNext(j);
-            }
-        }
-        this.writeBuffer();
-        this.caret(Math.max(this.firstNonMaskPos, begin));
-    }
-
-    shiftR(pos) {
-        let i, c, j, t;
-
-        for (i = pos, c = this.getPlaceholder(pos); i < this.len; i++) {
-            if (this.tests[i]) {
-                j = this.seekNext(i);
-                t = this.buffer[i];
-                this.buffer[i] = c;
-                if (j < this.len && this.tests[j].test(t)) {
-                    c = t;
-                } else {
-                    break;
-                }
-            }
-        }
-    }
-
-    handleAndroidInput(e) {
-        var curVal = this.input.value;
-        var pos = this.caret();
-        if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
-            // a deletion or backspace happened
-            this.checkVal(true);
-            while (pos.begin > 0 && !this.tests[pos.begin - 1])
-                pos.begin--;
-            if (pos.begin === 0) {
-                while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin])
-                    pos.begin++;
-            }
-            this.caret(pos.begin, pos.begin);
-        } else {
-            this.checkVal(true);
-            while (pos.begin < this.len && !this.tests[pos.begin])
-                pos.begin++;
-
-            this.caret(pos.begin, pos.begin);
-        }
-
-        if (this.props.onComplete && this.isCompleted()) {
-            this.props.onComplete({
-                originalEvent: e,
-                value: this.getValue()
-            });
-        }
-    }
-
-    onBlur(e) {
-        this.focus = false;
-        this.checkVal();
-        this.updateModel(e);
-        this.updateFilledState();
-
-        if (this.input.value !== this.focusText) {
-            let event = document.createEvent('HTMLEvents');
-            event.initEvent('change', true, false);
-            this.input.dispatchEvent(event);
-        }
-    }
-
-    onKeyDown(e) {
-        if (this.props.readonly) {
-            return;
-        }
-
-        let k = e.which || e.keyCode,
-            pos,
-            begin,
-            end;
-        let iPhone = /iphone/i.test(DomHandler.getUserAgent());
-        this.oldVal = this.input.value;
-
-        //backspace, delete, and escape get special treatment
-        if (k === 8 || k === 46 || (iPhone && k === 127)) {
-            pos = this.caret();
-            begin = pos.begin;
-            end = pos.end;
-
-
-            if (end - begin === 0) {
-                begin = k !== 46 ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
-                end = k === 46 ? this.seekNext(end) : end;
-            }
-
-            this.clearBuffer(begin, end);
-            this.shiftL(begin, end - 1);
-            this.updateModel(e);
-
-            e.preventDefault();
-        } else if (k === 13) { // enter
-            this.onBlur(e);
-            this.updateModel(e);
-        } else if (k === 27) { // escape
-            this.input.value = this.focusText;
-            this.caret(0, this.checkVal());
-            this.updateModel(e);
-            e.preventDefault();
-        }
-    }
-
-    onKeyPress(e) {
-        if (this.props.readonly) {
-            return;
-        }
-
-        var k = e.which || e.keyCode,
-            pos = this.caret(),
-            p,
-            c,
-            next,
-            completed;
-
-        if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore
-            return;
-        } else if (k && k !== 13) {
-            if (pos.end - pos.begin !== 0) {
-                this.clearBuffer(pos.begin, pos.end);
-                this.shiftL(pos.begin, pos.end - 1);
-            }
-
-            p = this.seekNext(pos.begin - 1);
-            if (p < this.len) {
-                c = String.fromCharCode(k);
-                if (this.tests[p].test(c)) {
-                    this.shiftR(p);
-
-                    this.buffer[p] = c;
-                    this.writeBuffer();
-                    next = this.seekNext(p);
-
-                    if (/android/i.test(DomHandler.getUserAgent())) {
-                        //Path for CSP Violation on FireFox OS 1.1
-                        let proxy = () => {
-                            this.caret(next);
-                        };
-
-                        setTimeout(proxy, 0);
-                    } else {
-                        this.caret(next);
-                    }
-                    if (pos.begin <= this.lastRequiredNonMaskPos) {
-                        completed = this.isCompleted();
-                    }
-                }
-            }
-            e.preventDefault();
-        }
-
-        this.updateModel(e);
-
-        if (this.props.onComplete && completed) {
-            this.props.onComplete({
-                originalEvent: e,
-                value: this.getValue()
-            });
-        }
-    }
-
-    clearBuffer(start, end) {
-        let i;
-        for (i = start; i < end && i < this.len; i++) {
-            if (this.tests[i]) {
-                this.buffer[i] = this.getPlaceholder(i);
-            }
-        }
-    }
-
-    writeBuffer() {
-        this.input.value = this.buffer.join('');
-    }
-
-    checkVal(allow) {
-        this.isValueChecked = true;
-        //try to place characters where they belong
-        let test = this.input.value,
-            lastMatch = -1,
-            i,
-            c,
-            pos;
-
-        for (i = 0, pos = 0; i < this.len; i++) {
-            if (this.tests[i]) {
-                this.buffer[i] = this.getPlaceholder(i);
-                while (pos++ < test.length) {
-                    c = test.charAt(pos - 1);
-                    if (this.tests[i].test(c)) {
-                        this.buffer[i] = c;
-                        lastMatch = i;
-                        break;
-                    }
-                }
-                if (pos > test.length) {
-                    this.clearBuffer(i + 1, this.len);
-                    break;
-                }
-            } else {
-                if (this.buffer[i] === test.charAt(pos)) {
-                    pos++;
-                }
-                if (i < this.partialPosition) {
-                    lastMatch = i;
-                }
-            }
-        }
-        if (allow) {
-            this.writeBuffer();
-        } else if (lastMatch + 1 < this.partialPosition) {
-            if (this.props.autoClear || this.buffer.join('') === this.defaultBuffer) {
-                // Invalid value. Remove it and replace it with the
-                // mask, which is the default behavior.
-                if (this.input.value) this.input.value = '';
-                this.clearBuffer(0, this.len);
-            } else {
-                // Invalid value, but we opt to show the value to the
-                // user and allow them to correct their mistake.
-                this.writeBuffer();
-            }
-        } else {
-            this.writeBuffer();
-            this.input.value = this.input.value.substring(0, lastMatch + 1);
-        }
-        return (this.partialPosition ? i : this.firstNonMaskPos);
-    }
-
-    onFocus(event) {
-        if (this.props.readonly) {
-            return;
-        }
-
-        this.focus = true;
-
-        clearTimeout(this.caretTimeoutId);
-        let pos;
-
-        this.focusText = this.input.value;
-
-        pos = this.checkVal();
-
-        this.caretTimeoutId = setTimeout(() => {
-            if (this.input !== document.activeElement) {
-                return;
-            }
-            this.writeBuffer();
-            if (pos === this.props.mask.replace("?", "").length) {
-                this.caret(0, pos);
-            } else {
-                this.caret(pos);
-            }
-            this.updateFilledState();
-        }, 10);
-    }
-
-    onInput(event) {
-        if (this.androidChrome)
-            this.handleAndroidInput(event);
-        else
-            this.handleInputChange(event);
-    }
-
-    handleInputChange(e) {
-        if (this.props.readonly) {
-            return;
-        }
-
-        var pos = this.checkVal(true);
-        this.caret(pos);
-        this.updateModel(e);
-        if (this.props.onComplete && this.isCompleted()) {
-            this.props.onComplete({
-                originalEvent: e,
-                value: this.getValue()
-            });
-        }
-    }
-
-    getUnmaskedValue() {
-        let unmaskedBuffer = [];
-        for (let i = 0; i < this.buffer.length; i++) {
-            let c = this.buffer[i];
-            if (this.tests[i] && c !== this.getPlaceholder(i)) {
-                unmaskedBuffer.push(c);
-            }
-        }
-
-        return unmaskedBuffer.join('');
-    }
-
-    updateModel(e) {
-        if (this.props.onChange) {
-            var val = this.props.unmask ? this.getUnmaskedValue() : e && e.target.value;
-            this.props.onChange({
-                originalEvent: e,
-                value: (this.defaultBuffer !== val) ? val : '',
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value : (this.defaultBuffer !== val) ? val : '',
-                }
-            })
-        }
-    }
-
-    updateFilledState() {
-        if (this.input && this.input.value && this.input.value.length > 0)
-            DomHandler.addClass(this.input, 'p-filled');
-        else
-            DomHandler.removeClass(this.input, 'p-filled');
-    }
-
-    updateValue() {
-        if (this.input) {
-            if (this.props.value == null) {
-                this.input.value = '';
-            }
-            else {
-                this.input.value = this.props.value;
-                this.checkVal();
-
-                setTimeout(() => {
-                    if(this.input) {
-                        this.writeBuffer();
-                        this.checkVal();
-                    }
-                }, 10);
-            }
-
-            this.focusText = this.input.value;
-        }
-
-        this.updateFilledState();
-    }
-
-    isValueUpdated() {
-        return this.props.unmask ?
-                        (this.props.value !== this.getUnmaskedValue()) :
-                        (this.defaultBuffer !== this.input.value && this.input.value !== this.props.value);
-    }
-
-    init() {
-        this.tests = [];
-        this.partialPosition = this.props.mask.length;
-        this.len = this.props.mask.length;
-        this.firstNonMaskPos = null;
-        this.defs = {
-            '9': '[0-9]',
-            'a': '[A-Za-z]',
-            '*': '[A-Za-z0-9]'
-        };
-
-        let ua = DomHandler.getUserAgent();
-        this.androidChrome = /chrome/i.test(ua) && /android/i.test(ua);
-
-        let maskTokens = this.props.mask.split('');
-        for (let i = 0; i < maskTokens.length; i++) {
-            let c = maskTokens[i];
-            if (c === '?') {
-                this.len--;
-                this.partialPosition = i;
-            }
-            else if (this.defs[c]) {
-                this.tests.push(new RegExp(this.defs[c]));
-                if (this.firstNonMaskPos === null) {
-                    this.firstNonMaskPos = this.tests.length - 1;
-                }
-                if (i < this.partialPosition) {
-                    this.lastRequiredNonMaskPos = this.tests.length - 1;
-                }
-            }
-            else {
-                this.tests.push(null);
-            }
-        }
-
-        this.buffer = [];
-        for (let i = 0; i < maskTokens.length; i++) {
-            let c = maskTokens[i];
-            if (c !== '?') {
-                if (this.defs[c])
-                    this.buffer.push(this.getPlaceholder(i));
-                else
-                    this.buffer.push(c);
-            }
-        }
-        this.defaultBuffer = this.buffer.join('');
-    }
-
-    componentDidMount() {
-        this.init();
-        this.updateValue();
-
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-
-        if (this.isValueUpdated()) {
-            this.updateValue();
-        }
-
-        if (prevProps.mask !== this.props.mask) {
-            this.init();
-            this.updateValue();
-            this.updateModel();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.input,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        return (
-            <InputText id={this.props.id} ref={(el) => this.input = ReactDOM.findDOMNode(el)} type={this.props.type} name={this.props.name} style={this.props.style} className={this.props.className} placeholder={this.props.placeholder}
-                size={this.props.size} maxLength={this.props.maxlength} tabIndex={this.props.tabindex} disabled={this.props.disabled} readOnly={this.props.readonly}
-                onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} onKeyPress={this.onKeyPress}
-                onInput={this.onInput} onPaste={this.handleInputChange} required={this.props.required} aria-labelledby={this.props.ariaLabelledBy} />
-        );
-    }
-
-}
diff --git a/src/components/inputnumber/InputNumber.css b/src/components/inputnumber/InputNumber.css
deleted file mode 100644
index ca98f850af..0000000000
--- a/src/components/inputnumber/InputNumber.css
+++ /dev/null
@@ -1,101 +0,0 @@
-.p-inputnumber {
-    display: inline-flex;
-}
-
-.p-inputnumber-button-up,
-.p-inputnumber-button-down {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex: 0 0 auto;
-}
-
-.p-inputnumber-input {
-    flex: 1 1 auto;
-}
-
-.p-inputnumber-buttons-stacked .p-inputnumber-button-up {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-inputnumber-buttons-stacked .p-inputnumber-input {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-inputnumber-buttons-stacked .p-inputnumber-button-down {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-inputnumber-button {
-    flex: 1 1 auto;
-}
-
-.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-inputnumber-button .p-inputnumber-button-icon {
-    font-size: inherit;
-}
-
-.p-inputnumber-buttons-horizontal .p-inputnumber-button-up {
-    order: 3;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-inputnumber-buttons-horizontal .p-inputnumber-input {
-    order: 2;
-    border-radius: 0;
-}
-
-.p-inputnumber-buttons-horizontal .p-inputnumber-button-down {
-    order: 1;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-inputnumber-buttons-vertical {
-    flex-direction: column;
-}
-
-.p-inputnumber-buttons-vertical .p-inputnumber-button-up {
-    order: 1;
-    flex: 1 1 auto;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    width: auto;
-}
-
-.p-inputnumber-buttons-vertical .p-inputnumber-input {
-    order: 2;
-    border-radius: 0;
-    text-align: center;
-}
-
-.p-inputnumber-buttons-vertical .p-inputnumber-button-down {
-    order: 3;
-    flex: 1 1 auto;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    width: auto;
-}
-
-.p-fluid .p-inputnumber {
-    width: 100%;
-}
-
-.p-fluid .p-inputnumber .p-inputnumber-input {
-    width: 1%;
-}
-
-.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input,
-.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-button {
-    width: 100%;
-}
\ No newline at end of file
diff --git a/src/components/inputnumber/InputNumber.d.ts b/src/components/inputnumber/InputNumber.d.ts
deleted file mode 100644
index 1fb4e30081..0000000000
--- a/src/components/inputnumber/InputNumber.d.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface InputNumberProps {
-    value?: number;
-    format?: boolean;
-    showButtons?: boolean;
-    buttonLayout?: string;
-    incrementButtonClassName?: string;
-    decrementButtonClassName?: string;
-    incrementButtonIcon?: string;
-    decrementButtonIcon?: string;
-    locale?: string;
-    localeMatcher?: string;
-    mode?: string;
-    suffix?: string;
-    prefix?: string;
-    currency?: string;
-    currencyDisplay?: string;
-    useGrouping?: boolean;
-    minFractionDigits?: number;
-    maxFractionDigits?: number;
-    id?: string;
-    name?: string;
-    type?: string;
-    step?: number;
-    min?: number;
-    max?: number;
-    disabled?: boolean;
-    required?: boolean;
-    tabIndex?: number;
-    pattern?: string;
-    inputMode?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    size?: number;
-    style?: object;
-    className?: string;
-    inputId?: string;
-    inputStyle?: object;
-    inputClassName?: string;
-    tooltip?: string;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-    onBlur?(e: Event): void;
-    onFocus?(e: Event): void;
-}
-
-export class InputNumber extends React.Component<InputNumberProps,any> {}
diff --git a/src/components/inputnumber/InputNumber.js b/src/components/inputnumber/InputNumber.js
deleted file mode 100644
index c8d6d423bd..0000000000
--- a/src/components/inputnumber/InputNumber.js
+++ /dev/null
@@ -1,777 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import {InputText} from '../inputtext/InputText';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-import DomHandler from '../utils/DomHandler';
-
-export class InputNumber extends Component {
-
-    static defaultProps = {
-        value: null,
-        format: true,
-        showButtons: false,
-        buttonLayout: 'stacked',
-        incrementButtonClassName: null,
-        decrementButtonClassName: null,
-        incrementButtonIcon: 'pi pi-caret-up',
-        decrementButtonIcon: 'pi pi-caret-down',
-        locale: undefined,
-        localeMatcher: undefined,
-        mode: 'decimal',
-        suffix: null,
-        prefix: null,
-        currency: undefined,
-        currencyDisplay: undefined,
-        useGrouping: true,
-        minFractionDigits: undefined,
-        maxFractionDigits: undefined,
-        id: null,
-        name: null,
-        type: 'text',
-        step: 1,
-        min: null,
-        max: null,
-        disabled: false,
-        required: false,
-        tabIndex: null,
-        pattern: null,
-        inputMode: null,
-        placeholder: null,
-        readonly: false,
-        size: null,
-        style: null,
-        className: null,
-        inputId: null,
-        inputStyle: null,
-        inputClassName: null,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null,
-        onBlur: null,
-        onFocus: null
-    }
-
-    static propTypes = {
-        value: PropTypes.number,
-        format: PropTypes.bool,
-        showButtons: PropTypes.bool,
-        buttonLayout: PropTypes.string,
-        incrementButtonClassName: PropTypes.string,
-        decrementButtonClassName: PropTypes.string,
-        incrementButtonIcon: PropTypes.string,
-        decrementButtonIcon: PropTypes.string,
-        locale: PropTypes.string,
-        localeMatcher: PropTypes.string,
-        mode: PropTypes.string,
-        suffix: PropTypes.string,
-        prefix: PropTypes.string,
-        currency: PropTypes.string,
-        currencyDisplay: PropTypes.string,
-        useGrouping: PropTypes.bool,
-        minFractionDigits: PropTypes.number,
-        maxFractionDigits: PropTypes.number,
-        id: PropTypes.string,
-        name: PropTypes.string,
-        type: PropTypes.string,
-        step: PropTypes.number,
-        min: PropTypes.number,
-        max: PropTypes.number,
-        disabled: PropTypes.bool,
-        required: PropTypes.bool,
-        tabIndex: PropTypes.number,
-        pattern: PropTypes.string,
-        inputMode: PropTypes.string,
-        placeholder: PropTypes.string,
-        readonly: PropTypes.bool,
-        size: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        inputId: PropTypes.string,
-        inputStyle: PropTypes.object,
-        inputClassName: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func,
-        onBlur: PropTypes.func,
-        onFocus: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.constructParser();
-
-        this.onInput = this.onInput.bind(this);
-        this.onInputKeyDown = this.onInputKeyDown.bind(this);
-        this.onInputKeyPress = this.onInputKeyPress.bind(this);
-        this.onInputClick = this.onInputClick.bind(this);
-        this.onInputBlur = this.onInputBlur.bind(this);
-        this.onInputFocus = this.onInputFocus.bind(this);
-        this.onPaste = this.onPaste.bind(this);
-
-        this.onUpButtonMouseLeave = this.onUpButtonMouseLeave.bind(this);
-        this.onUpButtonMouseDown = this.onUpButtonMouseDown.bind(this);
-        this.onUpButtonMouseUp = this.onUpButtonMouseUp.bind(this);
-        this.onUpButtonKeyDown = this.onUpButtonKeyDown.bind(this);
-        this.onUpButtonKeyUp = this.onUpButtonKeyUp.bind(this);
-
-        this.onDownButtonMouseLeave = this.onDownButtonMouseLeave.bind(this);
-        this.onDownButtonMouseDown = this.onDownButtonMouseDown.bind(this);
-        this.onDownButtonMouseUp = this.onDownButtonMouseUp.bind(this);
-        this.onDownButtonKeyDown = this.onDownButtonKeyDown.bind(this);
-        this.onDownButtonKeyUp = this.onDownButtonKeyUp.bind(this);
-    }
-
-    getOptions() {
-        return {
-            localeMatcher: this.props.localeMatcher,
-            style: this.props.mode,
-            currency: this.props.currency,
-            currencyDisplay: this.props.currencyDisplay,
-            useGrouping: this.props.useGrouping,
-            minimumFractionDigits: this.props.minFractionDigits,
-            maximumFractionDigits: this.props.maxFractionDigits
-        };
-    }
-
-    constructParser() {
-        this.numberFormat = new Intl.NumberFormat(this.props.locale, this.getOptions());
-        const numerals = [...new Intl.NumberFormat(this.props.locale, {useGrouping: false}).format(9876543210)].reverse();
-        const index = new Map(numerals.map((d, i) => [d, i]));
-        this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
-        this._decimal = this.getDecimalExpression();
-        this._group = this.getGroupingExpression();
-        this._minusSign = this.getMinusSignExpression();
-        this._currency = this.getCurrencyExpression();
-        this._suffix = new RegExp(`[${this.props.suffix||''}]`, 'g');
-        this._prefix = new RegExp(`[${this.props.prefix||''}]`, 'g');
-        this._index = d => index.get(d);
-    }
-
-    getDecimalExpression() {
-        const formatter = new Intl.NumberFormat(this.props.locale, {useGrouping: false});
-        return new RegExp(`[${formatter.format(1.1).trim().replace(this._numeral, '')}]`, 'g');
-    }
-
-    getGroupingExpression() {
-        const formatter = new Intl.NumberFormat(this.props.locale, {useGrouping: true});
-        return new RegExp(`[${formatter.format(1000).trim().replace(this._numeral, '')}]`, 'g');
-    }
-
-    getMinusSignExpression() {
-        const formatter = new Intl.NumberFormat(this.props.locale, {useGrouping: false});
-        return new RegExp(`[${formatter.format(-1).trim().replace(this._numeral, '')}]`, 'g');
-    }
-
-    getCurrencyExpression() {
-        if (this.props.currency) {
-            const formatter = new Intl.NumberFormat(this.props.locale, {style: 'currency', currency: this.props.currency, currencyDisplay: this.props.currencyDisplay});
-            return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._decimal, '').replace(this._group, '')}]`, 'g');
-        }
-        else {
-            return new RegExp(`[]`,'g');
-        }
-    }
-
-    formatValue(value) {
-        if (value != null) {
-            if (this.props.format) {
-                let formatter = new Intl.NumberFormat(this.props.locale, this.getOptions());
-                let formattedValue = formatter.format(value);
-                if (this.props.prefix) {
-                    formattedValue = this.props.prefix + formattedValue;
-                }
-
-                if (this.props.suffix) {
-                    formattedValue = formattedValue + this.props.suffix;
-                }
-
-                return formattedValue;
-            }
-
-            return value;
-        }
-
-        return '';
-    }
-
-    parseValue(text) {
-        let filteredText = text.trim()
-                            .replace(/\s/g, '')
-                            .replace(this._currency, '')
-                            .replace(this._group, '')
-                            .replace(this._suffix, '')
-                            .replace(this._prefix, '')
-                            .replace(this._minusSign, '-')
-                            .replace(this._decimal, '.')
-                            .replace(this._numeral, this._index);
-
-        if (filteredText) {
-            let parsedValue = +filteredText;
-            return isNaN(parsedValue) ? null : parsedValue;
-        }
-        else {
-            return null;
-        }
-    }
-
-    repeat(event, interval, dir) {
-        let i = interval || 500;
-
-        this.clearTimer();
-        this.timer = setTimeout(() => {
-            this.repeat(event, 40, dir);
-        }, i);
-
-        this.spin(event, dir);
-    }
-
-    spin(event, dir) {
-        let step = this.props.step * dir;
-        let currentValue = this.props.value || 0;
-        let newValue = currentValue + step;
-
-        if (this.props.min !== null && newValue < this.props.min) {
-            newValue = this.props.min;
-        }
-
-        if (this.props.max !== null && newValue > this.props.max) {
-            newValue = this.props.max;
-        }
-
-        this.updateInput(newValue, 'spin');
-        this.updateModel(event, newValue);
-    }
-
-    onUpButtonMouseDown(event) {
-        if (!this.props.disabled) {
-            this.inputEl.focus();
-            this.repeat(event, null, 1);
-            event.preventDefault();
-        }
-    }
-
-    onUpButtonMouseUp() {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onUpButtonMouseLeave() {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onUpButtonKeyUp() {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onUpButtonKeyDown(event) {
-        if (event.keyCode === 32 || event.keyCode === 13) {
-            this.repeat(event, null, 1);
-        }
-    }
-
-    onDownButtonMouseDown(event, focusInput) {
-        if (!this.props.disabled) {
-            this.inputEl.focus();
-            this.repeat(event, null, -1);
-
-            event.preventDefault();
-        }
-    }
-
-    onDownButtonMouseUp() {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onDownButtonMouseLeave() {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onDownButtonKeyUp() {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onDownButtonKeyDown(event) {
-        if (event.keyCode === 32 || event.keyCode === 13) {
-            this.repeat(event, null, -1);
-        }
-    }
-
-    onInput(event) {
-        if (this.isSpecialChar) {
-            event.target.value = this.lastValue;
-        }
-        this.isSpecialChar = false;
-    }
-
-    onInputKeyDown(event) {
-        this.lastValue = event.target.value;
-        if (event.shiftKey || event.altKey) {
-            this.isSpecialChar = true;
-            return;
-        }
-
-        let selectionStart = event.target.selectionStart;
-        let selectionEnd = event.target.selectionEnd;
-        let inputValue = event.target.value;
-
-        if (event.altKey) {
-            event.preventDefault();
-        }
-
-        switch (event.which) {
-            //up
-            case 38:
-                this.spin(event, 1);
-                event.preventDefault();
-            break;
-
-            //down
-            case 40:
-                this.spin(event, -1);
-                event.preventDefault();
-            break;
-
-            //left
-            case 37:
-                let prevChar = inputValue.charAt(selectionStart - 1);
-                if (!this.isNumeralChar(prevChar)) {
-                    event.preventDefault();
-                }
-            break;
-
-            //right
-            case 39:
-                let currentChar = inputValue.charAt(selectionStart);
-                if (!this.isNumeralChar(currentChar)) {
-                    event.preventDefault();
-                }
-            break;
-
-            //backspace
-            case 8:
-                event.preventDefault();
-                let newValueStr = null;
-
-                if (selectionStart === selectionEnd) {
-                    let deleteChar = inputValue.charAt(selectionStart - 1);
-                    let decimalCharIndex = inputValue.search(this._decimal);
-                    this._decimal.lastIndex = 0;
-
-                    if (this.isNumeralChar(deleteChar)) {
-                        if (this._group.test(deleteChar)) {
-                            this._group.lastIndex = 0;
-                            newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
-                        }
-                        else if (this._decimal.test(deleteChar)) {
-                            this._decimal.lastIndex = 0;
-                            this.inputEl.setSelectionRange(selectionStart - 1, selectionStart - 1);
-                        }
-                        else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-                            newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
-                        }
-                        else {
-                            newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
-                        }
-                    }
-
-                    if (newValueStr != null) {
-                        this.updateValue(event, newValueStr, 'delete-single');
-                    }
-                }
-                else {
-                    newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
-                    this.updateValue(event, newValueStr, 'delete-range');
-                }
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    onInputKeyPress(event) {
-        event.preventDefault();
-        let code = event.which || event.keyCode;
-        let char = String.fromCharCode(code);
-
-        if ((48 <= code && code <= 57) || this.isMinusSign(char)) {
-            this.insert(event, char);
-        }
-    }
-
-    onPaste(event) {
-        event.preventDefault();
-        let data = (event.clipboardData || window['clipboardData']).getData('Text');
-        if (data) {
-            let filteredData = this.parseValue(data);
-            if (filteredData != null) {
-                this.insert(event, filteredData.toString());
-            }
-        }
-    }
-
-    isMinusSign(char) {
-        if (this._minusSign.test(char)) {
-            this._minusSign.lastIndex = 0;
-            return true;
-        }
-
-        return false;
-    }
-
-    insert(event, text) {
-        let selectionStart = this.inputEl.selectionStart;
-        let selectionEnd = this.inputEl.selectionEnd;
-        let inputValue = this.inputEl.value.trim();
-        let maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
-        let newValueStr;
-        let decimalCharIndex = inputValue.search(this._decimal);
-        this._decimal.lastIndex = 0;
-
-        if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
-            if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) {
-                newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length);
-                this.updateValue(event, newValueStr, 'insert');
-            }
-        }
-        else {
-            newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
-            this.updateValue(event, newValueStr, 'insert');
-        }
-    }
-
-    insertText(value, text, start, end) {
-        let newValueStr;
-
-        if ((end - start) === value.length)
-            newValueStr = text;
-        else if (start === 0)
-            newValueStr = text + value.slice(end);
-        else if (end === value.length)
-            newValueStr = value.slice(0, start) + text;
-        else
-            newValueStr = value.slice(0, start) + text + value.slice(end);
-
-        return newValueStr;
-    }
-
-    deleteRange(value, start, end) {
-        let newValueStr;
-
-        if ((end - start) === value.length)
-            newValueStr = '';
-        else if (start === 0)
-            newValueStr = value.slice(end);
-        else if (end === value.length)
-            newValueStr = value.slice(0, start);
-        else
-            newValueStr = value.slice(0, start) + value.slice(end);
-
-        return newValueStr;
-    }
-
-    initCursor() {
-        let selectionStart = this.inputEl.selectionStart;
-        let inputValue = this.inputEl.value;
-        let valueLength = inputValue.length;
-        let index = null;
-
-        let char = inputValue.charAt(selectionStart);
-        if (this.isNumeralChar(char)) {
-            return;
-        }
-
-        //left
-        let i = selectionStart - 1;
-        while (i >= 0) {
-            char = inputValue.charAt(i);
-            if (this.isNumeralChar(char)) {
-                index = i;
-                break;
-            }
-            else {
-                i--;
-            }
-        }
-
-        if (index !== null) {
-            this.inputEl.setSelectionRange(index + 1, index + 1);
-        }
-        else {
-            i = selectionStart + 1;
-            while (i < valueLength) {
-                char = inputValue.charAt(i);
-                if (this.isNumeralChar(char)) {
-                    index = i;
-                    break;
-                }
-                else {
-                    i++;
-                }
-            }
-
-            if (index !== null) {
-                this.inputEl.setSelectionRange(index, index);
-            }
-        }
-    }
-
-    onInputClick() {
-        this.initCursor();
-    }
-
-    isNumeralChar(char) {
-        if (char.length === 1 && (this._numeral.test(char) || this._decimal.test(char) || this._group.test(char) || this._minusSign.test(char))) {
-            this.resetRegex();
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-
-    resetRegex() {
-        this._numeral.lastIndex =  0;
-        this._decimal.lastIndex =  0;
-        this._group.lastIndex =  0;
-        this._minusSign.lastIndex =  0;
-    }
-
-    updateValue(event, valueStr, operation) {
-        if (valueStr != null) {
-            let newValue = this.parseValue(valueStr);
-            let valid = this.isWithinRange(newValue);
-
-            if (valid) {
-                this.updateInput(newValue, operation);
-                this.updateModel(event, newValue);
-            }
-        }
-    }
-
-    isWithinRange(value) {
-        return value == null || ((this.props.min == null || value > this.props.min) && (this.props.max == null || value < this.props.max));
-    }
-
-    updateInput(value, operation) {
-        let currentLength = this.inputEl.value.length;
-
-        if (currentLength === 0) {
-            this.inputEl.value = this.formatValue(value);
-            this.inputEl.setSelectionRange(0, 0);
-            this.initCursor();
-            this.inputEl.setSelectionRange(this.inputEl.selectionStart + 1, this.inputEl.selectionStart + 1);
-        }
-        else {
-            let selectionStart = this.inputEl.selectionEnd;
-            let selectionEnd = this.inputEl.selectionEnd;
-            this.inputEl.value = this.formatValue(value);
-            let newLength = this.inputEl.value.length;
-
-            if (newLength === currentLength) {
-                if (operation === 'insert')
-                    this.inputEl.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
-                else if (operation === 'delete-single')
-                    this.inputEl.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
-                else if (operation === 'delete-range')
-                    this.inputEl.setSelectionRange(selectionStart, selectionStart);
-                else if (operation === 'spin')
-                    this.inputEl.setSelectionRange(selectionStart, selectionEnd);
-            }
-            else {
-                selectionEnd = selectionEnd + (newLength - currentLength);
-                this.inputEl.setSelectionRange(selectionEnd, selectionEnd);
-            }
-        }
-
-        this.inputEl.setAttribute('aria-valuenow', value);
-    }
-
-    updateModel(event, value) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: value
-                }
-            });
-        }
-    }
-
-    onInputFocus(event) {
-        DomHandler.addClass(this.element, 'p-inputwrapper-focus');
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-    }
-
-    onInputBlur(event) {
-        DomHandler.removeClass(this.element, 'p-inputwrapper-focus');
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-    }
-
-    clearTimer() {
-        if (this.timer) {
-            clearInterval(this.timer);
-        }
-    }
-
-    isStacked() {
-        return this.props.showButtons && this.props.buttonLayout === 'stacked';
-    }
-
-    isHorizontal() {
-        return this.props.showButtons && this.props.buttonLayout === 'horizontal';
-    }
-
-    isVertical() {
-        return this.props.showButtons && this.props.buttonLayout === 'vertical';
-    }
-
-    getInputMode() {
-        return this.props.inputMode || ((this.props.mode === 'decimal' && !this.props.minFractionDigits) ? 'numeric' : 'decimal');
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-
-        const formattedValue = this.formatValue(this.props.value);
-        if (this.inputEl.value !== formattedValue) {
-            this.inputEl.value = formattedValue;
-            this.inputEl.setAttribute('aria-valuenow', this.props.value);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    renderInputElement() {
-        const className = classNames('p-inputnumber-input', this.props.inputClassName);
-        const valueToRender = this.formatValue(this.props.value);
-
-        return (
-            <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} id={this.props.inputId} style={this.props.inputStyle} role="spinbutton"
-                       className={className} defaultValue={valueToRender} type={this.props.type} size={this.props.size} tabIndex={this.props.tabIndex} inputMode={this.getInputMode()}
-                       maxLength={this.props.maxlength} disabled={this.props.disabled} required={this.props.required} pattern={this.props.pattern}
-                       placeholder={this.props.placeholder} readOnly={this.props.readonly} name={this.props.name}
-                       onKeyDown={this.onInputKeyDown} onKeyPress={this.onInputKeyPress} onInput={this.onInput} onClick={this.onInputClick}
-                       onBlur={this.onInputBlur} onFocus={this.onInputFocus} onPaste={this.onPaste}
-                       aria-valuemin={this.props.min} aria-valuemax={this.props.max} aria-valuenow={this.props.value} aria-labelledby={this.props.ariaLabelledBy} />
-        );
-    }
-
-    renderUpButton() {
-        const className = classNames("p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component", this.props.incrementButtonClassName, {
-            'p-disabled': this.props.disabled
-        });
-        const icon = classNames('p-inputnumber-button-icon', this.props.incrementButtonIcon);
-
-        return (
-            <button type="button" className={className} onMouseLeave={this.onUpButtonMouseLeave} onMouseDown={this.onUpButtonMouseDown} onMouseUp={this.onUpButtonMouseUp}
-                onKeyDown={this.onUpButtonKeyDown} onKeyUp={this.onUpButtonKeyUp} disabled={this.props.disabled} tabIndex="-1">
-                <span className={icon}></span>
-            </button>
-        );
-    }
-
-    renderDownButton() {
-        const className = classNames("p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component", this.props.decrementButtonClassName, {
-            'p-disabled': this.props.disabled
-        });
-        const icon = classNames('p-inputnumber-button-icon', this.props.decrementButtonIcon);
-
-        return (
-            <button type="button" className={className} onMouseLeave={this.onDownButtonMouseLeave} onMouseDown={this.onDownButtonMouseDown} onMouseUp={this.onDownButtonMouseUp}
-                onKeyDown={this.onDownButtonKeyDown} onKeyUp={this.onDownButtonKeyUp} disabled={this.props.disabled} tabIndex="-1">
-                <span className={icon}></span>
-            </button>
-        );
-    }
-
-    renderButtonGroup() {
-        const upButton = this.props.showButtons && this.renderUpButton();
-        const downButton = this.props.showButtons && this.renderDownButton();
-
-        if (this.isStacked()) {
-            return (
-                <span className="p-inputnumber-button-group">
-                    {upButton}
-                    {downButton}
-                </span>
-            )
-        }
-
-        return (
-            <React.Fragment>
-                {upButton}
-                {downButton}
-            </React.Fragment>
-        )
-    }
-
-    render() {
-        const className = classNames('p-inputnumber p-component', this.props.className, {
-                'p-inputwrapper-filled': this.props.value != null,
-                'p-inputnumber-buttons-stacked': this.isStacked(),
-                'p-inputnumber-buttons-horizontal': this.isHorizontal(),
-                'p-inputnumber-buttons-vertical': this.isVertical()
-        });
-        const inputElement = this.renderInputElement();
-        const buttonGroup = this.renderButtonGroup();
-
-        return (
-            <span ref={(el) => this.element = el} id={this.props.id} className={className} style={this.props.style}>
-                {inputElement}
-                {buttonGroup}
-            </span>
-        );
-    }
-}
diff --git a/src/components/inputswitch/InputSwitch.css b/src/components/inputswitch/InputSwitch.css
deleted file mode 100644
index 0854112ca2..0000000000
--- a/src/components/inputswitch/InputSwitch.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.p-inputswitch {
-    position: relative;
-    display: inline-block;
-    width: 3em;
-    height: 1.75em;
-}
-
-.p-inputswitch-slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-transition: .3s;
-    transition: .3s;
-    border-radius: 30px;
-}
-
-.p-inputswitch-slider:before {
-    position: absolute;
-    content: "";
-    height: 1.250em;
-    width: 1.250em;
-    left: .25em;
-    bottom: .25em;
-    border-radius: 50%;
-    -webkit-transition: .3s;
-    transition: .3s;
-}
-
-.p-inputswitch-checked .p-inputswitch-slider:before {
-    -webkit-transform: translateX(1.250em);
-    -ms-transform: translateX(1.250em);
-    transform: translateX(1.250em);
-}
\ No newline at end of file
diff --git a/src/components/inputswitch/InputSwitch.d.ts b/src/components/inputswitch/InputSwitch.d.ts
deleted file mode 100644
index cd676bb0b6..0000000000
--- a/src/components/inputswitch/InputSwitch.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface InputSwitchProps {
-    id?: string;
-    offLabel?: string;
-    onLabel?: string;
-    style?: object;
-    className?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string,
-    onChange?(e: {originalEvent: Event, value: boolean, target: {name: string, id: string, value: boolean}}): void;
-    onFocus?(event: Event): void;
-    onBlur?(event: Event): void;
-}
-
-export class InputSwitch extends React.Component<InputSwitchProps,any> {}
diff --git a/src/components/inputswitch/InputSwitch.js b/src/components/inputswitch/InputSwitch.js
deleted file mode 100644
index ae55b9852c..0000000000
--- a/src/components/inputswitch/InputSwitch.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames'
-import Tooltip from "../tooltip/Tooltip";
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class InputSwitch extends Component {
-
-    static defaultProps = {
-        id: null,
-        style: null,
-        className: null,
-        inputId: null,
-        name: null,
-        checked: false,
-        disabled: false,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null,
-        onFocus: null,
-        onBlur: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        inputId: PropTypes.string,
-        name: PropTypes.string,
-        checked: PropTypes.bool,
-        disabled: PropTypes.bool,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.onClick = this.onClick.bind(this);
-        this.toggle = this.toggle.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        this.toggle(event);
-        this.input.focus();
-    }
-
-    toggle(event) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: !this.props.checked,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: !this.props.checked,
-                }
-            });
-        }
-    }
-
-    onFocus(event) {
-        this.setState({focused: true});
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-    }
-
-    onBlur(event) {
-        this.setState({focused: false});
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-    }
-
-    onKeyDown(event) {
-        if (event.key === 'Enter') {
-            this.onClick(event);
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        const className = classNames('p-inputswitch p-component', this.props.className, {
-            'p-inputswitch-checked': this.props.checked,
-            'p-disabled': this.props.disabled,
-            'p-inputswitch-focus': this.state.focused
-        });
-
-        let inputSwitchProps = ObjectUtils.findDiffKeys(this.props, InputSwitch.defaultProps);
-
-        return (
-            <div ref={el => this.container = el} id={this.props.id} className={className} style={this.props.style} onClick={this.onClick}
-                role="checkbox" aria-checked={this.props.checked} {...inputSwitchProps}>
-                <div className="p-hidden-accessible">
-                    <input ref={el => this.input = el} type="checkbox" id={this.props.inputId} name={this.props.name} checked={this.props.checked} onChange={this.toggle}
-                        onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown} disabled={this.props.disabled}  role="switch" aria-checked={this.props.checked}
-                        aria-labelledby={this.props.ariaLabelledBy}/>
-                </div>
-                <span className="p-inputswitch-slider"></span>
-            </div>
-        );
-    }
-
-}
diff --git a/src/components/inputtext/InputText.css b/src/components/inputtext/InputText.css
deleted file mode 100644
index f12613ca24..0000000000
--- a/src/components/inputtext/InputText.css
+++ /dev/null
@@ -1,103 +0,0 @@
-.p-inputtext {
-    margin: 0;
-    outline: medium none;
-    padding: .25em;
-    font-weight: normal;
-}
-
-.p-fluid .p-inputtext {
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
-}
-
-.p-inputgroup {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-}
-
-.p-inputgroup .p-inputgroup-addon {
-    display: inline-block;
-    text-align: center;
-    min-width: 1.5em;
-    padding: .25em;
-    border-width: 1px;
-    border-style: solid;
-}
-
-.p-inputgroup .p-inputgroup-addon + .p-inputgroup-addon {
-    border-left: 0 none;
-}
-
-.p-inputgroup .p-inputtext {
-    padding-left: .5em;
-}
-
-.p-inputgroup > .p-inputtext:not(:first-child),
-.p-inputgroup > .p-inputtextarea:not(:first-child),
-.p-inputgroup > .p-calendar:not(:first-child) > .p-inputtext,
-.p-inputgroup > .p-chips:not(:first-child) > .p-inputtext,
-.p-inputgroup > .p-dropdown:not(:first-child),
-.p-inputgroup > .p-multiselect:not(:first-child),
-.p-inputgroup > .p-selectbutton:not(:first-child) > .p-button,
-.p-inputgroup > .p-autocomplete:not(:first-child) > .p-autocomplete-input,
-.p-inputgroup > .p-spinner:not(:first-child),
-.p-inputgroup > .p-spinner:not(:first-child) > .p-spinner-input {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 0 none;
-}
-
-.p-inputgroup > .p-inputtext:not(:last-child),
-.p-inputgroup > .p-inputtextarea:not(:last-child),
-.p-inputgroup > .p-calendar:not(:last-child) > .p-inputtext,
-.p-inputgroup > .p-chips:not(:last-child) > .p-inputtext,
-.p-inputgroup > .p-dropdown:not(:last-child),
-.p-inputgroup > .p-multiselect:not(:last-child),
-.p-inputgroup > .p-selectbutton:not(:last-child) > .p-button,
-.p-inputgroup > .p-autocomplete:not(:last-child) > .p-autocomplete-input,
-.p-inputgroup > .p-spinner:not(:last-child),
-.p-inputgroup > .p-spinner:not(:last-child) > .p-spinner-input,
-.p-inputgroup > .p-spinner:not(:last-child) > .p-spinner-button {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0 none;
-}
-
-.p-inputgroup .p-button {
-    margin-right: 0;
-    border-radius: 0;
-}
-
-.p-fluid .p-inputgroup .p-button {
-    width: auto;
-}
-
-.p-fluid .p-inputgroup .p-inputtext {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 1 auto;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-}
-
-.p-inputgroup .p-checkbox, 
-.p-inputgroup .p-radiobutton {
-    margin-right: 0;
-    vertical-align: bottom;
-}
-
-/* Floating Label */
-.p-float-label > input:focus ~ label,
-.p-float-label > input.p-filled ~ label,
-.p-float-label > .p-inputwrapper-focus ~ label,
-.p-float-label > .p-inputwrapper-filled ~ label {
-  top:-.75em;
-  font-size:12px;
-}
-
-.p-float-label > input:-webkit-autofill ~ label {
-  top:-.75em;
-  font-size:12px;
-}
\ No newline at end of file
diff --git a/src/components/inputtext/InputText.d.ts b/src/components/inputtext/InputText.d.ts
deleted file mode 100644
index 7adb1f4295..0000000000
--- a/src/components/inputtext/InputText.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface InputTextProps extends React.HTMLProps<HTMLInputElement> {
-    [key: string]: any;
-    keyfilter?: any;
-    validateOnly?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    onInput?(event: React.FormEvent<HTMLInputElement>): void;
-    onKeyPress?(event: React.KeyboardEvent<HTMLInputElement>): void;
-}
-
-export class InputText extends React.Component<InputTextProps,any> {}
diff --git a/src/components/inputtext/InputText.js b/src/components/inputtext/InputText.js
deleted file mode 100644
index f0ad88b742..0000000000
--- a/src/components/inputtext/InputText.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import KeyFilter from "../keyfilter/KeyFilter";
-import Tooltip from "../tooltip/Tooltip";
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class InputText extends Component {
-
-    static defaultProps = {
-        onInput: null,
-        onKeyPress: null,
-        keyfilter: null,
-        validateOnly: false,
-        tooltip: null,
-        tooltipOptions: null
-    };
-
-    static propTypes = {
-        onInput: PropTypes.func,
-        onKeyPress: PropTypes.func,
-        keyfilter: PropTypes.any,
-        validateOnly: PropTypes.bool,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object
-    };
-
-    constructor(props) {
-        super(props);
-        this.onInput = this.onInput.bind(this);
-        this.onKeyPress = this.onKeyPress.bind(this);
-    }
-
-    onKeyPress(event) {
-        if (this.props.onKeyPress) {
-            this.props.onKeyPress(event);
-        }
-
-        if (this.props.keyfilter) {
-            KeyFilter.onKeyPress(event, this.props.keyfilter, this.props.validateOnly)
-        }
-    }
-
-    onInput(event) {
-        let validatePattern = true;
-        if (this.props.keyfilter && this.props.validateOnly) {
-            validatePattern = KeyFilter.validate(event, this.props.keyfilter);
-        }
-
-        if (this.props.onInput) {
-            this.props.onInput(event, validatePattern);
-        }
-
-        if (!this.props.onChange) {
-            if (event.target.value.length > 0)
-                DomHandler.addClass(event.target, 'p-filled');
-            else
-                DomHandler.removeClass(event.target, 'p-filled');
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        const className = classNames('p-inputtext p-component', this.props.className, {
-            'p-disabled': this.props.disabled,
-            'p-filled': (this.props.value != null && this.props.value.toString().length > 0) || (this.props.defaultValue != null && this.props.defaultValue.toString().length > 0)
-        });
-
-        let inputProps = ObjectUtils.findDiffKeys(this.props, InputText.defaultProps);
-
-        return <input ref={(el) => this.element = el} {...inputProps} className={className} onInput={this.onInput} onKeyPress={this.onKeyPress}/>;
-    }
-}
\ No newline at end of file
diff --git a/src/components/inputtextarea/InputTextarea.css b/src/components/inputtextarea/InputTextarea.css
deleted file mode 100644
index da3a754767..0000000000
--- a/src/components/inputtextarea/InputTextarea.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.p-inputtextarea-resizable {
-    overflow: hidden;
-    resize: none;
-}
-
-.p-fluid .p-inputtextarea {
-    width: 100%;
-}
-
-/* Floating Label */
-.p-float-label > textarea ~ label {
-  left: .25em;
-  top: .75em;
-}
-
-.p-float-label > textarea:focus ~ label,
-.p-float-label > textarea.p-filled ~ label {
-  top:-.75em;
-  font-size:12px;
-}
-
-.p-float-label > textarea:-webkit-autofill ~ label {
-  top:-.75em;
-  font-size:12px;
-}
\ No newline at end of file
diff --git a/src/components/inputtextarea/InputTextarea.d.ts b/src/components/inputtextarea/InputTextarea.d.ts
deleted file mode 100644
index d4912cd52d..0000000000
--- a/src/components/inputtextarea/InputTextarea.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface InputTextareaProps extends React.HTMLProps<HTMLTextAreaElement> {
-    autoResize?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    [key: string]: any;
-}
-
-export class InputTextarea extends React.Component<InputTextareaProps,any> {}
\ No newline at end of file
diff --git a/src/components/inputtextarea/InputTextarea.js b/src/components/inputtextarea/InputTextarea.js
deleted file mode 100644
index 066a938f3e..0000000000
--- a/src/components/inputtextarea/InputTextarea.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class InputTextarea extends Component {
-
-    static defaultProps = {
-        autoResize: false,
-        onInput: null,
-        tooltip: null,
-        tooltipOptions: null
-    };
-
-    static propTypes = {
-        autoResize: PropTypes.bool,
-        onInput: PropTypes.func,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object
-    };
-
-    constructor(props) {
-        super(props);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyUp = this.onKeyUp.bind(this);
-        this.onInput = this.onInput.bind(this);
-    }
-
-    onFocus(e) {
-        if (this.props.autoResize) {
-            this.resize();
-        }
-
-        if (this.props.onFocus) {
-            this.props.onFocus(e);
-        }
-    }
-
-    onBlur(e) {
-        if (this.props.autoResize) {
-            this.resize();
-        }
-
-        if (this.props.onBlur) {
-            this.props.onBlur(e);
-        }
-    }
-
-    onKeyUp(e) {
-        if (this.props.autoResize) {
-            this.resize();
-        }
-
-        if (this.props.onKeyUp) {
-            this.props.onKeyUp(e);
-        }
-    }
-
-    onInput(e) {
-        if (this.props.autoResize) {
-            this.resize();
-        }
-
-        if (!this.props.onChange) {
-            if (e.target.value.length > 0)
-                DomHandler.addClass(e.target, 'p-filled');
-            else
-                DomHandler.removeClass(e.target, 'p-filled');
-        }
-
-        if (this.props.onInput) {
-            this.props.onInput(e);
-        }
-    }
-
-    resize() {
-        if (DomHandler.isVisible(this.element)) {
-            if (!this.cachedScrollHeight) {
-                this.cachedScrollHeight = this.element.scrollHeight;
-                this.element.style.overflow = "hidden";
-            }
-
-            if (this.cachedScrollHeight !== this.element.scrollHeight) {
-                this.element.style.height = ''
-                this.element.style.height = this.element.scrollHeight + 'px';
-
-                if (parseFloat(this.element.style.height) >= parseFloat(this.element.style.maxHeight)) {
-                    this.element.style.overflowY = "scroll";
-                    this.element.style.height = this.element.style.maxHeight;
-                }
-                else {
-                    this.element.style.overflow = "hidden";
-                }
-
-                this.cachedScrollHeight = this.element.scrollHeight;
-            }
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-
-        if (this.props.autoResize) {
-            this.resize();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-
-        if (this.props.autoResize) {
-            this.resize();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        const className = classNames('p-inputtext p-inputtextarea p-component', this.props.className, {
-            'p-disabled': this.props.disabled,
-            'p-filled': (this.props.value != null && this.props.value.toString().length > 0) || (this.props.defaultValue != null && this.props.defaultValue.toString().length > 0),
-            'p-inputtextarea-resizable': this.props.autoResize
-        });
-
-        let textareaProps = ObjectUtils.findDiffKeys(this.props, InputTextarea.defaultProps);
-
-        return (
-            <textarea {...textareaProps} className={className} ref={input => this.element = input}
-                onFocus={this.onFocus} onBlur={this.onBlur} onKeyUp={this.onKeyUp} onInput={this.onInput}></textarea>
-        );
-    }
-}
diff --git a/src/components/keyfilter/KeyFilter.js b/src/components/keyfilter/KeyFilter.js
deleted file mode 100644
index da683ed7c7..0000000000
--- a/src/components/keyfilter/KeyFilter.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import DomHandler from '../utils/DomHandler';
-
-export default class KeyFilter {
-
-    /* eslint-disable */
-    static DEFAULT_MASKS = {
-        pint: /[\d]/,
-        int: /[\d\-]/,
-        pnum: /[\d\.]/,
-        money: /[\d\.\s,]/,
-        num: /[\d\-\.]/,
-        hex: /[0-9a-f]/i,
-        email: /[a-z0-9_\.\-@]/i,
-        alpha: /[a-z_]/i,
-        alphanum: /[a-z0-9_]/i
-    };
-    /* eslint-enable */
-
-    static KEYS = {
-        TAB: 9,
-        RETURN: 13,
-        ESC: 27,
-        BACKSPACE: 8,
-        DELETE: 46
-    };
-
-    static SAFARI_KEYS = {
-        63234: 37, // left
-        63235: 39, // right
-        63232: 38, // up
-        63233: 40, // down
-        63276: 33, // page up
-        63277: 34, // page down
-        63272: 46, // delete
-        63273: 36, // home
-        63275: 35  // end
-    };
-
-    static isNavKeyPress(e) {
-        let k = e.keyCode;
-        k = DomHandler.getBrowser().safari ? (KeyFilter.SAFARI_KEYS[k] || k) : k;
-
-        return (k >= 33 && k <= 40) || k === KeyFilter.KEYS.RETURN || k === KeyFilter.KEYS.TAB || k === KeyFilter.KEYS.ESC;
-    }
-
-    static isSpecialKey(e) {
-        let k = e.keyCode;
-
-        return k === 9 || k === 13 || k === 27 || k === 16 || k === 17 ||(k >= 18 && k <= 20) ||
-            (DomHandler.getBrowser().opera && !e.shiftKey && (k === 8 || (k >= 33 && k <= 35) || (k >= 36 && k <= 39) || (k >= 44 && k <= 45)));
-    }
-
-    static getKey(e) {
-        let k = e.keyCode || e.charCode;
-        return DomHandler.getBrowser().safari ? (KeyFilter.SAFARI_KEYS[k] || k) : k;
-    }
-
-    static getCharCode(e) {
-        return e.charCode || e.keyCode || e.which;
-    }
-
-    static onKeyPress(e, keyfilter, validateOnly) {
-        if(validateOnly) {
-            return;
-        }
-
-        const regex = KeyFilter.DEFAULT_MASKS[keyfilter]? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
-        const browser = DomHandler.getBrowser();
-
-        if (e.ctrlKey || e.altKey) {
-            return;
-        }
-
-        const k = this.getKey(e);
-        if (browser.mozilla && (this.isNavKeyPress(e) || k === KeyFilter.KEYS.BACKSPACE || (k === KeyFilter.KEYS.DELETE && e.charCode === 0))) {
-            return;
-        }
-
-        const c = this.getCharCode(e);
-        const cc = String.fromCharCode(c);
-
-        if (browser.mozilla && (this.isSpecialKey(e) || !cc)) {
-            return;
-        }
-
-        if (!regex.test(cc)) {
-            e.preventDefault();
-        }
-    }
-
-    static validate(e, keyfilter) {
-        let value = e.target.value,
-        validatePattern = true;
-            
-        if (value && !keyfilter.test(value)) {
-            validatePattern = false;
-        }
-
-        return validatePattern;
-    }
-}
\ No newline at end of file
diff --git a/src/components/lightbox/Lightbox.css b/src/components/lightbox/Lightbox.css
deleted file mode 100644
index 3909aea9ad..0000000000
--- a/src/components/lightbox/Lightbox.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.p-lightbox {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-}
-
-.p-lightbox-content-wrapper {
-    position: relative;
-}
-
-.p-lightbox-content {
-    position: relative;
-    margin: 0;
-    padding: 0;
-    background-color: #000000;
-    -webkit-transition-property: width, height;
-    -moz-transition-property: width, height;
-    -ms-transition-property: width, height;
-    -o-transition-property: width, height;
-    transition-property: width, height;
-}
-
-.p-lightbox-nav-right, .p-lightbox-nav-left {
-   position: absolute;
-   top: 50%;
-   cursor: pointer;
-   z-index: 1;
-}
-
-.p-lightbox-nav-left {
-   left: 0;
-}
-
-.p-lightbox-nav-right {
-   right: 0;
-}
-
-.p-lightbox-loading .p-lightbox-content {
-    background: url("http://github.com/images/loading.gif") #000000 center center no-repeat;
-}
-
-.p-lightbox-caption {
-    padding: 0.2em 0.4em;
-    display: none;
-}
-
-.p-lightbox-caption-text {
-    margin: 0.3em 0 0.1em 0;
-    float:left;
-}
-
-.p-lightbox-close {
-    float:right;
-    margin: 0;
-    padding: .125em;
-}
-
-.p-lightbox-close.p-state-hover {
-    padding: 0;
-}
-
-.p-lightbox-nav-left, .p-lightbox-nav-right {
-    opacity: .5;
-}
-
-.p-lightbox-nav-left:hover, .p-lightbox-nav-right:hover{
-    opacity: 1;
-}
\ No newline at end of file
diff --git a/src/components/lightbox/Lightbox.d.ts b/src/components/lightbox/Lightbox.d.ts
deleted file mode 100644
index 23bc9c781b..0000000000
--- a/src/components/lightbox/Lightbox.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-interface LightboxProps {
-    id?: string;
-    images?: any[];
-    target?: string;
-    style?: object;
-    className?: string;
-    easing?: string;
-    effectDuration?: string;
-}
-
-export class Lightbox extends React.Component<LightboxProps,any> {}
diff --git a/src/components/lightbox/Lightbox.js b/src/components/lightbox/Lightbox.js
deleted file mode 100644
index 89bce7c938..0000000000
--- a/src/components/lightbox/Lightbox.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-
-export class Lightbox extends Component {
-
-    static defaultProps = {
-        id: null,
-        images: null,
-        target: null,
-        style: null,
-        className: null,
-        easing: 'ease-out',
-        effectDuration: '500ms'
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        images: PropTypes.array,
-        target: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        easing: PropTypes.string,
-        effectDuration: PropTypes.string
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            visible: false,
-            currentImage: null
-        };
-
-        this.next = this.next.bind(this);
-        this.prev = this.prev.bind(this);
-        this.onImageLoad = this.onImageLoad.bind(this);
-        this.onTargetClick = this.onTargetClick.bind(this);
-    }
-
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (this.panel && !this.panel.contains(event.target)) {
-                    this.hide();
-                }
-            };
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-    }
-
-    onImageClick(event, image, i) {
-        this.index = i;
-        this.setState({loading:true});
-        this.content.style.width = 32 + 'px';
-        this.content.style.height = 32 + 'px';
-        this.show();
-        this.displayImage(image);
-        this.preventDocumentClickListener = true;
-        event.preventDefault();
-    }
-
-    onTargetClick(event) {
-        this.show();
-        event.preventDefault();
-    }
-
-    show() {
-        this.mask = document.createElement('div');
-        this.mask.style.zIndex = String(DomHandler.generateZIndex());
-        DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-dialog-mask');
-        document.body.appendChild(this.mask);
-        this.panel.style.zIndex = String(DomHandler.generateZIndex());
-        this.setState({visible:true});
-        this.bindDocumentClickListener();
-    }
-
-    hide() {
-        this.index = null;
-        this.setState({currentImage:null})
-        if(this.mask) {
-            document.body.removeChild(this.mask);
-            this.mask = null;
-        }
-
-        this.setState({visible:false});
-        this.unbindDocumentClickListener();
-    }
-
-
-    displayImage(image){
-        setTimeout(() => {
-            this.setState({currentImage: image});
-        }, 1000);
-    }
-
-    prev() {
-        this.setState({loading:true});
-        if(this.index > 0) {
-            this.displayImage(this.props.images[--this.index]);
-        }
-    }
-
-    next() {
-        this.setState({loading:true});
-        if(this.index <= (this.props.images.length - 1)) {
-            this.displayImage(this.props.images[++this.index]);
-        }
-    }
-
-    onImageLoad(event){
-        let image = event.target;
-        image.style.visibility = 'hidden';
-        image.style.display = 'block';
-        let imageWidth = DomHandler.getOuterWidth(image);
-        let imageHeight = DomHandler.getOuterHeight(image);
-        image.style.display = 'none';
-        image.style.visibility = 'visible';
-
-        this.content.style.width = imageWidth + 'px';
-        this.content.style.height = imageHeight + 'px';
-        this.panel.style.left = parseInt(this.panel.style.left,10) + (DomHandler.getOuterWidth(this.panel) - imageWidth) / 2 + 'px';
-        this.panel.style.top = parseInt(this.panel.style.top,10) + (DomHandler.getOuterHeight(this.panel) - imageHeight) / 2 + 'px';
-
-        setTimeout(() => {
-            DomHandler.fadeIn(image, 500);
-            image.style.display = 'block';
-            this.setState({loading:false});
-        }, parseInt(this.props.effectDuration, 10));
-    }
-
-    renderLeftNav() {
-        const className = classNames('p-lightbox-nav-left p-link', {'p-hidden': !(this.props.images && this.props.images.length && this.index !== 0 && this.state.currentImage)});
-
-        return (
-            <button type="button" className={className} onClick={this.prev}>
-                <span className="p-lightbox-nav-icon pi pi-chevron-left"></span>
-            </button>
-        );
-    }
-
-    renderRightNav() {
-        const className = classNames('p-lightbox-nav-right p-link', {'p-hidden': !(this.props.images && this.props.images.length && this.index < (this.props.images.length - 1) && this.state.currentImage)});
-
-        return (
-            <button type="button" className={className} onClick={this.next}>
-                <span className="p-lightbox-nav-icon pi pi-chevron-right"></span>
-            </button>
-        )
-    }
-
-    renderImages() {
-        return (
-            <div style={this.props.style} className={this.props.className}>{
-                this.props.images && this.props.images.map((image,index)=>{
-                    var imageItem =
-                        <a href={image.source} onClick={event=>this.onImageClick(event,image,index)} key={index} className="p-lightbox-image-target">
-                            <img src={image.thumbnail} title={image.title} alt={image.alt}/>
-                        </a>
-                    ;
-                    return imageItem;
-                })}
-            </div>
-        );
-    }
-
-    renderTarget() {
-        if (this.props.target) {
-            return (
-                <span onClick={this.onTargetClick}>
-                    {this.props.target}
-                </span>
-            );
-        }
-        else {
-            return this.renderImages();
-        }
-    }
-
-    renderContent() {
-        let content;
-
-        if (this.state.visible) {
-            if (this.props.target)
-                content = this.props.children;
-            else
-                content = <img src={this.state.currentImage ? this.state.currentImage.source : null} onLoad={this.onImageLoad} alt="" style={{display: this.state.loading ? 'none': 'inline'}} />;
-        }
-
-        return (
-            <div className="p-lightbox-content" ref={el => this.content = el} style={{transitionDuration:this.props.effectDuration, transitionTimingFunction: this.props.easing}}>
-                {content}
-            </div>
-        );
-    }
-
-    render() {
-        const leftButton = this.renderLeftNav();
-        const rightButton = this.renderRightNav();
-        const target = this.renderTarget();
-        const content = this.renderContent();
-        const containerClassName = classNames('p-lightbox p-component p-hidden', {'p-lightbox-loading': this.state.loading});
-
-        return (
-            <div id={this.props.id}>
-                {target}
-                <div className={containerClassName} style={{transitionProperty:'all', transitionDuration:this.props.effectDuration, transitionTimingFunction: this.props.easing, display: this.state.visible ? 'block': 'none'}}
-                    ref={el => this.panel = el}>
-                    <div className="p-lightbox-content-wrapper">
-                        {leftButton}
-                        {content}
-                        {rightButton}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/components/lightbox/images/loading.gif b/src/components/lightbox/images/loading.gif
deleted file mode 100644
index 19c67bbd04..0000000000
Binary files a/src/components/lightbox/images/loading.gif and /dev/null differ
diff --git a/src/components/listbox/ListBox.css b/src/components/listbox/ListBox.css
deleted file mode 100644
index 82bc81aa23..0000000000
--- a/src/components/listbox/ListBox.css
+++ /dev/null
@@ -1,68 +0,0 @@
-.p-listbox {
-    padding: .25em;
-    width: 10em;
-}
-
-.p-listbox .p-listbox-list-wrapper {
-    overflow:auto;
-}
-
-.p-listbox .p-listbox-list {
-    list-style-type: none; 
-    margin: 0;
-    padding: 0;
-}
-
-.p-listbox .p-listbox-item {
-    padding: .25em;
-    border: 0 none;
-    cursor: pointer;
-    font-weight: normal;
-    margin-bottom: 1px;
-}
-
-.p-listbox .p-listbox-item > span {
-    vertical-align: middle;
-}
-
-.p-listbox .p-listbox-item:last-child {
-    margin-bottom: 0;
-}
-
-.p-listbox.p-disabled .p-listbox-item {
-    cursor: default;
-}
-
-.p-listbox-header {
-    margin-bottom: 0.3em;
-    padding: .125em .2em;
-    position: relative;
-}
-
-.p-listbox-header .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-}
-
-.p-listbox-header .p-listbox-filter-container {
-    display: inline-block;
-    vertical-align: middle;
-    position: relative;
-    width: 100%;
-}
-
-.p-listbox-header.p-listbox-header-w-checkbox .p-listbox-filter-container {
-    width: calc(100% - 2em);
-}
-
-.p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
-    position: absolute;
-    top: .25em;
-    left: .25em;
-}
-
-.p-listbox-header .p-inputtext {
-    padding: .125em .125em .125em 1.25em;
-    width: 100%;
-}
\ No newline at end of file
diff --git a/src/components/listbox/ListBox.d.ts b/src/components/listbox/ListBox.d.ts
deleted file mode 100755
index b74bb97348..0000000000
--- a/src/components/listbox/ListBox.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface ListBoxProps {
-    id?: string;
-    value?: any;
-    options?: any[];
-    optionLabel?: string;
-    optionValue?: string;
-    style?: object;
-    listStyle?: object;
-    className?: string;
-    disabled?: boolean;
-    dataKey?: string;
-    multiple?: boolean;
-    metaKeySelection?: boolean;
-    filter?: boolean;
-    filterBy?: string;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    tabIndex?:string;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string,
-    itemTemplate?(item: any): JSX.Element | undefined;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-}
-
-export class ListBox extends React.Component<ListBoxProps,any> {}
diff --git a/src/components/listbox/ListBox.js b/src/components/listbox/ListBox.js
deleted file mode 100644
index 2528add91a..0000000000
--- a/src/components/listbox/ListBox.js
+++ /dev/null
@@ -1,304 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
-import {ListBoxItem} from './ListBoxItem';
-import {ListBoxHeader} from './ListBoxHeader';
-import Tooltip from "../tooltip/Tooltip";
-
-export class ListBox extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        options: null,
-        optionLabel: null,
-        optionValue: null,
-        itemTemplate: null,
-        style: null,
-        listStyle: null,
-        className: null,
-        disabled: null,
-        dataKey: null,
-        multiple: false,
-        metaKeySelection: false,
-        filter: false,
-        filterBy: null,
-        filterMatchMode: 'contains',
-        filterPlaceholder: null,
-        filterLocale: undefined,
-        tabIndex: '0',
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        options: PropTypes.array,
-        optionLabel: PropTypes.string,
-        optionValue: PropTypes.string,
-        itemTemplate: PropTypes.func,
-        style: PropTypes.object,
-        listStyle: PropTypes.object,
-        className: PropTypes.string,
-        dataKey: PropTypes.string,
-        multiple: PropTypes.bool,
-        metaKeySelection: PropTypes.bool,
-        filter: PropTypes.bool,
-        filterBy: PropTypes.string,
-        filterMatchMode: PropTypes.string,
-        filterPlaceholder: PropTypes.string,
-        filterLocale: PropTypes.string,
-        tabIndex: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func
-    };
-
-    constructor() {
-        super();
-        this.state = {
-            filter: ''
-        }
-
-        this.onFilter = this.onFilter.bind(this);
-        this.onOptionClick = this.onOptionClick.bind(this);
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    onOptionClick(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        if (this.props.multiple)
-            this.onOptionClickMultiple(event.originalEvent, event.option);
-        else
-            this.onOptionClickSingle(event.originalEvent, event.option);
-
-        this.optionTouched = false;
-    }
-
-    onOptionTouchEnd() {
-        if (this.props.disabled) {
-            return;
-        }
-
-        this.optionTouched = true;
-    }
-
-    onOptionClickSingle(event, option) {
-        let selected = this.isSelected(option);
-        let valueChanged = false;
-        let value = null;
-        let metaSelection = this.optionTouched ? false : this.props.metaKeySelection;
-
-        if (metaSelection) {
-            let metaKey = (event.metaKey || event.ctrlKey);
-
-            if (selected) {
-                if (metaKey) {
-                    value = null;
-                    valueChanged = true;
-                }
-            }
-            else {
-                value = this.getOptionValue(option);
-                valueChanged = true;
-            }
-        }
-        else {
-            value = selected ? null : this.getOptionValue(option);
-            valueChanged = true;
-        }
-
-        if (valueChanged) {
-            this.updateModel(event, value);
-        }
-    }
-
-    onOptionClickMultiple(event, option) {
-        let selected = this.isSelected(option);
-        let valueChanged = false;
-        let value = null;
-        let metaSelection = this.optionTouched ? false : this.props.metaKeySelection;
-
-        if (metaSelection) {
-            let metaKey = (event.metaKey || event.ctrlKey);
-
-            if (selected) {
-                if (metaKey)
-                    value = this.removeOption(option);
-                else
-                    value = [this.getOptionValue(option)];
-
-                valueChanged = true;
-            }
-            else {
-                value = (metaKey) ? this.props.value || [] : [];
-                value = [...value, this.getOptionValue(option)];
-                valueChanged = true;
-            }
-        }
-        else {
-            if (selected)
-                value = this.removeOption(option);
-            else
-                value = [...this.props.value || [], this.getOptionValue(option)];
-
-            valueChanged = true;
-        }
-
-        if (valueChanged) {
-            this.props.onChange({
-                originalEvent: event,
-                value: value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: value
-                }
-            });
-        }
-    }
-
-    onFilter(event) {
-        this.setState({filter: event.query});
-    }
-
-    updateModel(event, value) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: value
-                }
-            });
-        }
-    }
-
-    removeOption(option) {
-        return this.props.value.filter(val => !ObjectUtils.equals(val, this.getOptionValue(option), this.props.dataKey));
-    }
-
-    isSelected(option) {
-        let selected = false;
-        let optionValue = this.getOptionValue(option);
-
-        if (this.props.multiple) {
-            if (this.props.value) {
-                for (let val of this.props.value) {
-                    if (ObjectUtils.equals(val, optionValue, this.props.dataKey)) {
-                        selected = true;
-                        break;
-                    }
-                }
-            }
-        }
-        else {
-            selected = ObjectUtils.equals(this.props.value, optionValue, this.props.dataKey);
-        }
-
-        return selected;
-    }
-
-    filter(option) {
-        let filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale);
-        let optionLabel = this.getOptionLabel(option).toLocaleLowerCase(this.props.filterLocale);
-
-        return optionLabel.indexOf(filterValue) > -1;
-    }
-
-    hasFilter() {
-        return this.state.filter && this.state.filter.trim().length > 0;
-    }
-
-    getOptionLabel(option) {
-        return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : (option['label'] !== undefined ? option['label'] : option);
-    }
-
-    getOptionValue(option) {
-        return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : (option['value'] !== undefined ? option['value'] : option);
-    }
-
-    render() {
-        let className = classNames('p-listbox p-inputtext p-component', this.props.className, {
-            'p-disabled': this.props.disabled
-        });
-        let items = this.props.options;
-        let header;
-
-        if (this.props.options) {
-            if (this.hasFilter()) {
-                let filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale)
-                let searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
-                items = FilterUtils.filter(items, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
-            }
-
-            items = items.map((option, index) => {
-                let optionLabel = this.getOptionLabel(option);
-
-                return (
-                    <ListBoxItem key={optionLabel} label={optionLabel} option={option} template={this.props.itemTemplate} selected={this.isSelected(option)}
-                        onClick={this.onOptionClick} onTouchEnd={(e) => this.onOptionTouchEnd(e, option, index)} tabIndex={this.props.tabIndex} />
-                );
-            });
-        }
-
-        if (this.props.filter) {
-            header = <ListBoxHeader filter={this.state.filter} onFilter={this.onFilter} disabled={this.props.disabled} filterPlaceholder={this.props.filterPlaceholder} />
-        }
-
-        return (
-            <div ref={(el) => this.element = el} id={this.props.id} className={className} style={this.props.style}>
-                {header}
-                <div className="p-listbox-list-wrapper" style={this.props.listStyle}>
-                    <ul className="p-listbox-list" role="listbox" aria-multiselectable={this.props.multiple}>
-                        {items}
-                    </ul>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/components/listbox/ListBoxHeader.d.ts b/src/components/listbox/ListBoxHeader.d.ts
deleted file mode 100644
index 1eaa4f63b4..0000000000
--- a/src/components/listbox/ListBoxHeader.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-interface ListBoxHeaderProps {
-    filter?: string;
-    disabled?: boolean;
-    onFilter?(e: {originalEvent: Event, value: any}): void;
-}
-
-export class ListBoxHeader extends React.Component<ListBoxHeaderProps,any> {}
\ No newline at end of file
diff --git a/src/components/listbox/ListBoxHeader.js b/src/components/listbox/ListBoxHeader.js
deleted file mode 100644
index 97fa4893db..0000000000
--- a/src/components/listbox/ListBoxHeader.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {InputText} from '../inputtext/InputText';
-
-export class ListBoxHeader extends Component {
-
-    static defaultProps = {
-        filter: null,
-        filterPlaceholder: null,
-        disabled: false,
-        onFilter: null
-    }
-
-    static propTypes = {
-        filter: PropTypes.string,
-        filterPlaceholder: PropTypes.string,
-        disabled: PropTypes.bool,
-        onFilter: PropTypes.func
-    }
-
-    constructor() {
-        super();
-        this.onFilter = this.onFilter.bind(this);
-    }
-
-    onFilter(event) {
-        if(this.props.onFilter) {
-            this.props.onFilter({
-                originalEvent: event,
-                query: event.target.value
-            });
-        }
-    }
-
-    render() {
-        return (
-                <div className="p-listbox-header">
-                    <div className="p-listbox-filter-container">
-                        <InputText type="text" value={this.props.filter} onChange={this.onFilter} disabled={this.props.disabled} placeholder={this.props.filterPlaceholder} />
-                        <span className="p-listbox-filter-icon pi pi-search"></span>
-                    </div>
-                </div>
-        );
-    }
-}
diff --git a/src/components/listbox/ListBoxItem.d.ts b/src/components/listbox/ListBoxItem.d.ts
deleted file mode 100755
index a9a41f5411..0000000000
--- a/src/components/listbox/ListBoxItem.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface ListBoxItemProps {
-    option?: any;
-    selected?: boolean;
-    onClick?(e: {originalEvent: Event, option: any}): void;
-    onTouchEnd?(e: {originalEvent: Event, option: any}): void;
-    template?(item: any): JSX.Element | undefined;
-}
-
-export class ListBoxItem extends React.Component<ListBoxItemProps,any> {}
\ No newline at end of file
diff --git a/src/components/listbox/ListBoxItem.js b/src/components/listbox/ListBoxItem.js
deleted file mode 100644
index 0ba7311b41..0000000000
--- a/src/components/listbox/ListBoxItem.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class ListBoxItem extends Component {
-
-    static defaultProps = {
-        option: null,
-        label: null,
-        selected: false,
-        tabIndex: null,
-        onClick: null,
-        onTouchEnd: null,
-        template: null,
-    }
-
-    static propTypes = {
-        option: PropTypes.any,
-        label: PropTypes.string,
-        selected: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        onClick: PropTypes.func,
-        onTouchEnd: PropTypes.func,
-        template: PropTypes.func
-    }
-
-    constructor() {
-        super();
-        this.onClick = this.onClick.bind(this);
-        this.onTouchEnd = this.onTouchEnd.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                option: this.props.option
-            });
-        }
-
-        event.preventDefault();
-    }
-
-    onTouchEnd(event) {
-        if(this.props.onTouchEnd) {
-            this.props.onTouchEnd({
-                originalEvent: event,
-                option: this.props.option
-            });
-        }
-    }
-
-    onKeyDown(event) {
-        let item = event.currentTarget;
-
-        switch(event.which) {
-            //down
-            case 40:
-                var nextItem = this.findNextItem(item);
-                if(nextItem) {
-                    nextItem.focus();
-                }
-
-                event.preventDefault();
-            break;
-
-            //up
-            case 38:
-                var prevItem = this.findPrevItem(item);
-                if(prevItem) {
-                    prevItem.focus();
-                }
-
-                event.preventDefault();
-            break;
-
-            //enter
-            case 13:
-                this.onClick(event);
-                event.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-disabled') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-
-        if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-
-    render() {
-        let className = classNames(this.props.option.className, 'p-listbox-item', {'p-highlight': this.props.selected});
-        let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
-
-        return (
-            <li className={className} onClick={this.onClick} onTouchEnd={this.onTouchEnd} onKeyDown={this.onKeyDown} tabIndex={this.props.tabIndex}
-                aria-label={this.props.label} key={this.props.label} role="option" aria-selected={this.props.selected}>
-                {content}
-            </li>
-        );
-    }
-}
diff --git a/src/components/megamenu/MegaMenu.css b/src/components/megamenu/MegaMenu.css
deleted file mode 100644
index 8cfb6f8984..0000000000
--- a/src/components/megamenu/MegaMenu.css
+++ /dev/null
@@ -1,96 +0,0 @@
-.p-megamenu {
-    padding: .25em;
-}
-
-.p-megamenu-root-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.p-megamenu-root-list > .p-menuitem {
-    position: relative;
-}
-
-.p-megamenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    text-decoration: none;
-}
-
-.p-megamenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-megamenu .p-menuitem-text {
-    vertical-align: middle;
-}
-
-.p-megamenu-panel {
-    display: none;
-    position: absolute;
-    width: auto;
-    z-index: 1;
-}
-
-.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
-    display: block;
-}
-
-.p-megamenu-panel .p-menuitem {
-    margin: .125em 0;
-}
-
-.p-megamenu-submenu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    width: 12.5em;
-}
-
-.p-megamenu-submenu-header {
-    padding: .25em;
-}
-
-/* Horizontal */
-.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem {
-    display: inline-block;
-}
-
-.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-    vertical-align: middle;
-    margin-left: .25em;
-}
-
-/* Vertical */
-.p-megamenu-vertical {
-    width: 12.5em;
-}
-
-.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem {
-    display: block;
-}
-
-.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link {
-    position: relative;
-}
-
-.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
-    left: 100%;
-    top: 0;
-}
-
-.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-    position: absolute;
-    width: 1em;
-    height: 1em;
-    top: 50%;
-    right: 0;
-    margin-top: -.5em;
-}
-
-.p-megamenu .p-grid {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
-}
\ No newline at end of file
diff --git a/src/components/megamenu/MegaMenu.d.ts b/src/components/megamenu/MegaMenu.d.ts
deleted file mode 100644
index 615b259ce4..0000000000
--- a/src/components/megamenu/MegaMenu.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-
-interface MegaMenuProps {
-    id?: string;
-    model?: MenuItem[];
-    style?: object;
-    className?: string;
-    orientation?: string;
-}
-
-export class MegaMenu extends React.Component<MegaMenuProps,any> {}
diff --git a/src/components/megamenu/MegaMenu.js b/src/components/megamenu/MegaMenu.js
deleted file mode 100644
index 483cd24c6b..0000000000
--- a/src/components/megamenu/MegaMenu.js
+++ /dev/null
@@ -1,420 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class MegaMenu extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        style: null,
-        className: null,
-        orientation: 'horizontal'
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        orientation: PropTypes.string
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeItem: null
-        }
-        this.onLeafClick = this.onLeafClick.bind(this);
-    }
-
-    onLeafClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        this.setState({
-            activeItem: null
-        });
-    }
-
-    componentDidMount() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (this.container && !this.container.contains(event.target)) {
-                    this.setState({activeItem: null});
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    onCategoryMouseEnter(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (this.state.activeItem) {
-            this.setState({
-                activeItem: item
-            });
-        }
-    }
-
-    onCategoryClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: this.props.item
-            });
-        }
-
-        if (item.items) {
-            if (this.state.activeItem && this.state.activeItem === item) {
-                this.setState({
-                    activeItem: null
-                });
-            }
-            else {
-                this.setState({
-                    activeItem: item
-                });
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    onCategoryKeyDown(event, item) {
-        let listItem = event.currentTarget.parentElement;
-
-        switch(event.which) {
-            //down
-            case 40:
-                if (this.isHorizontal())
-                    this.expandMenu(item);
-                else
-                    this.navigateToNextItem(listItem);
-
-                event.preventDefault();
-            break;
-
-            //up
-            case 38:
-                if (this.isVertical())
-                    this.navigateToPrevItem(listItem);
-                else if (item.items && item === this.state.activeItem)
-                    this.collapseMenu();
-
-                event.preventDefault();
-            break;
-
-            //right
-            case 39:
-                if (this.isHorizontal())
-                    this.navigateToNextItem(listItem);
-                else
-                    this.expandMenu(item);
-
-                event.preventDefault()
-            break;
-
-            //left
-            case 37:
-                if (this.isHorizontal())
-                    this.navigateToPrevItem(listItem);
-                else if (item.items && item === this.state.activeItem)
-                    this.collapseMenu();
-
-                event.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    expandMenu(item) {
-        if (item.items) {
-            this.setState({
-                activeItem: item
-            });
-        }
-    }
-
-    collapseMenu(item) {
-        this.setState({
-            activeItem: null
-        });
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-
-        if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-
-    navigateToNextItem(listItem) {
-        var nextItem = this.findNextItem(listItem);
-        if (nextItem) {
-            nextItem.children[0].focus();
-        }
-    }
-
-    navigateToPrevItem(listItem) {
-        var prevItem = this.findPrevItem(listItem);
-        if (prevItem) {
-            prevItem.children[0].focus();
-        }
-    }
-
-    isHorizontal() {
-        return this.props.orientation === 'horizontal';
-    }
-
-    isVertical() {
-        return this.props.orientation === 'vertical';
-    }
-
-    getColumnClassName(category) {
-        let length = category.items ? category.items.length: 0;
-        let columnClass;
-
-        switch(length) {
-            case 2:
-                columnClass= 'p-col-6';
-            break;
-
-            case 3:
-                columnClass= 'p-col-4';
-            break;
-
-            case 4:
-                columnClass= 'p-col-3';
-            break;
-
-            case 6:
-                columnClass= 'p-col-2';
-            break;
-
-            default:
-                columnClass= 'p-col-12';
-            break;
-        }
-
-        return columnClass;
-    }
-
-    renderSeparator(index) {
-        return (
-            <li key={'separator_' + index} className="p-menu-separator"></li>
-        );
-    }
-
-    renderSubmenuIcon(item) {
-        if (item.items) {
-            const className = classNames('p-submenu-icon pi pi-fw', {'pi-caret-down': this.isHorizontal(),'pi-caret-right': this.isVertical()});
-
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenuItem(item, index) {
-        if (item.separator) {
-            return (
-                <li key={'separator_' + index} className="p-menu-separator" role="separator"></li>
-            );
-        }
-        else {
-            const className = classNames('p-menuitem', item.className, {'p-disabled': item.disabled});
-            const iconClassName = classNames(item.icon, 'p-menuitem-icon');
-            const icon = item.icon ? <span className={iconClassName}></span>: null;
-
-            return (
-                <li key={item.label + '_' + index} className={className} style={item.style} role="none">
-                    <a href={item.url || '#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.onLeafClick(event, item)} role="menuitem">
-                        {icon}
-                        <span className="p-menuitem-text">{item.label}</span>
-                    </a>
-                </li>
-            );
-        }
-    }
-
-    renderSubmenu(submenu) {
-        const className = classNames('p-megamenu-submenu-header', submenu.className, {'p-disabled': submenu.disabled});
-        const items = submenu.items.map((item, index) => {
-            return this.renderSubmenuItem(item, index);
-        });
-
-        return (
-            <React.Fragment key={submenu.label}>
-                <li className={className} style={submenu.style} role="presentation">{submenu.label}</li>
-                {items}
-            </React.Fragment>
-        );
-    }
-
-    renderSubmenus(column) {
-        return (
-            column.map((submenu, index) => {
-                return this.renderSubmenu(submenu, index);
-            })
-        );
-    }
-
-    renderColumn(category, column, index, columnClassName) {
-        const submenus = this.renderSubmenus(column);
-
-        return (
-            <div key={category.label + '_column_' + index} className={columnClassName}>
-                <ul className="p-megamenu-submenu" role="menu">
-                    {submenus}
-                </ul>
-            </div>
-        );
-    }
-
-    renderColumns(category) {
-        if (category.items) {
-            const columnClassName = this.getColumnClassName(category);
-
-            return (
-                category.items.map((column, index) => {
-                    return this.renderColumn(category, column, index, columnClassName);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderCategoryPanel(category) {
-        if (category.items) {
-            const columns = this.renderColumns(category);
-
-            return (
-                <div className="p-megamenu-panel">
-                    <div className="p-grid">
-                        {columns}
-                    </div>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderCategory(category, index) {
-        const className = classNames('p-menuitem', {'p-menuitem-active': category === this.state.activeItem, 'p-disabled': category.disabled}, category.className);
-        const iconClassName = classNames(category.icon, 'p-menuitem-icon');
-        const icon = category.icon ? <span className={iconClassName}></span>: null;
-        const submenuIcon = this.renderSubmenuIcon(category);
-        const panel = this.renderCategoryPanel(category);
-
-        return (
-            <li key={category.label + '_' + index} className={className} style={category.style} onMouseEnter={e => this.onCategoryMouseEnter(e, category)} role="none">
-                <a href={category.url || '#'} className="p-menuitem-link" target={category.target} onClick={e => this.onCategoryClick(e, category)} onKeyDown={e => this.onCategoryKeyDown(e, category)}
-                   role="menuitem" aria-haspopup={category.items != null}>
-                    {icon}
-                    <span className="p-menuitem-text">{category.label}</span>
-                    {submenuIcon}
-                </a>
-                {panel}
-            </li>
-        );
-    }
-
-    renderMenu() {
-        if (this.props.model) {
-            return (
-                this.props.model.map((item, index) => {
-                    return this.renderCategory(item, index, true);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderCustomContent() {
-        if(this.props.children) {
-            return (
-                <div className="p-megamenu-custom">
-                    {this.props.children}
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-megamenu p-component',
-                {'p-megamenu-horizontal': this.props.orientation === 'horizontal',
-                'p-megamenu-vertical': this.props.orientation === 'vertical'}, this.props.className);
-        const menu = this.renderMenu();
-        const customContent = this.renderCustomContent();
-
-        return (
-            <div ref={el => this.container = el} id={this.props.id} className={className} style={this.props.style}>
-                <ul className="p-megamenu-root-list" role="menubar">
-                    {menu}
-                </ul>
-                {customContent}
-            </div>
-        );
-    }
-}
diff --git a/src/components/menu/Menu.css b/src/components/menu/Menu.css
deleted file mode 100644
index d3dce4ce11..0000000000
--- a/src/components/menu/Menu.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.p-menu {
-    width: 12.5em;
-    padding: .25em;
-}
-
-.p-menu.p-menu-dynamic {
-    position: absolute;
-    display: none;
-}
-
-.p-menu .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
-.p-menu ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.p-menu .p-submenu-header {
-    padding: .25em .5em;
-    margin: .125em 0;
-}
-
-.p-menu .p-menuitem {
-    margin: .125em 0;
-}
-
-.p-menu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    text-decoration: none;
-}
-
-.p-menu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-menu .p-menuitem-text {
-    vertical-align: middle;
-}
\ No newline at end of file
diff --git a/src/components/menu/Menu.d.ts b/src/components/menu/Menu.d.ts
deleted file mode 100644
index cdee6cb426..0000000000
--- a/src/components/menu/Menu.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-import {SyntheticEvent} from "react";
-
-interface MenuProps {
-    id?: string;
-    model?: MenuItem[];
-    popup?: boolean;
-    style?: object;
-    className?: string;
-    autoZIndex?: boolean;
-    bazeZIndex?: number;
-    appendTo?: any;
-    onShow?(e: Event): void;
-    onHide?(e: Event): void;
-}
-
-export class Menu extends React.Component<MenuProps ,any> {
-    public toggle(event:SyntheticEvent):void;
-}
diff --git a/src/components/menu/Menu.js b/src/components/menu/Menu.js
deleted file mode 100644
index a5e1005da3..0000000000
--- a/src/components/menu/Menu.js
+++ /dev/null
@@ -1,273 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-
-export class Menu extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        popup: false,
-        style: null,
-        className: null,
-        autoZIndex: true,
-        baseZIndex: 0,
-        appendTo: null,
-        onShow: null,
-        onHide: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        popup: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        autoZIndex: PropTypes.bool,
-        baseZIndex: PropTypes.number,
-        appendTo: PropTypes.any,
-        onShow: PropTypes.func,
-        onHide: PropTypes.func
-    };
-
-    onItemClick(event, item){
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (this.props.popup) {
-            this.hide(event);
-        }
-    }
-
-    onItemKeyDown(event, item) {
-        let listItem = event.currentTarget.parentElement;
-
-        switch(event.which) {
-            //down
-            case 40:
-                var nextItem = this.findNextItem(listItem);
-                if(nextItem) {
-                    nextItem.children[0].focus();
-                }
-
-                event.preventDefault();
-            break;
-
-            //up
-            case 38:
-                var prevItem = this.findPrevItem(listItem);
-                if(prevItem) {
-                    prevItem.children[0].focus();
-                }
-
-                event.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-
-        if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-
-    toggle(event) {
-        if (this.props.popup) {
-            if (this.container.offsetParent)
-                this.hide(event);
-            else
-                this.show(event);
-        }
-    }
-
-    show(event) {
-        this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-        this.container.style.display = 'block';
-
-        setTimeout(() => {
-            DomHandler.addClass(this.container, 'p-menu-overlay-visible');
-            DomHandler.removeClass(this.container, 'p-menu-overlay-hidden');
-        }, 1);
-
-        DomHandler.absolutePosition(this.container,  event.currentTarget);
-        this.bindDocumentListeners();
-
-        if (this.props.onShow) {
-            this.props.onShow(event);
-        }
-    }
-
-    hide(event) {
-        if (this.container) {
-            DomHandler.addClass(this.container, 'p-menu-overlay-hidden');
-            DomHandler.removeClass(this.container, 'p-menu-overlay-visible');
-
-            setTimeout(() => {
-                if (this.container) {
-                    this.container.style.display = 'none';
-                    DomHandler.removeClass(this.container, 'p-menu-overlay-hidden');
-                }
-            }, 150);
-        }
-
-        if (this.props.onHide) {
-            this.props.onHide(event);
-        }
-
-        this.unbindDocumentListeners();
-    }
-
-    bindDocumentListeners() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if(this.isOutsideClicked(event)) {
-                    this.hide();
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-
-        if (!this.documentResizeListener) {
-            this.documentResizeListener = (event) => {
-                if(this.container.offsetParent) {
-                    this.hide(event);
-                }
-            };
-
-            window.addEventListener('resize', this.documentResizeListener);
-        }
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target));
-    }
-
-    unbindDocumentListeners() {
-        if(this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-
-        if(this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentListeners();
-    }
-
-    renderSubmenu(submenu, index) {
-        const className = classNames('p-submenu-header', submenu.className,  {'p-disabled': submenu.disabled});
-        const items = submenu.items.map((item, index)=> {
-            return this.renderMenuitem(item, index);
-        });
-
-        return (
-            <React.Fragment key={submenu.label + '_' + index}>
-                <li className={className} style={submenu.style} role="presentation">{submenu.label}</li>
-                {items}
-            </React.Fragment>
-        );
-    }
-
-    renderSeparator(index) {
-        return (
-            <li key={'separator_' + index} className="p-menu-separator" role="separator"></li>
-        );
-    }
-
-    renderMenuitem(item, index) {
-        const className = classNames('p-menuitem', item.className, {'p-disabled': item.disabled});
-        const iconClassName = classNames(item.icon, 'p-menuitem-icon');
-        const icon = item.icon ? <span className={iconClassName}></span>: null;
-
-        return (
-            <li key={item.label + '_' + index} className={className} style={item.style} role="none">
-                <a href={item.url||'#'} className="p-menuitem-link" role="menuitem" target={item.target} onClick={e => this.onItemClick(e, item)} onKeyDown={e => this.onItemKeyDown(e, item)}>
-                    {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                </a>
-            </li>
-        );
-    }
-
-    renderItem(item, index) {
-        if (item.separator) {
-            return this.renderSeparator(index);
-        }
-        else {
-            if (item.items)
-                return this.renderSubmenu(item, index);
-            else
-                return this.renderMenuitem(item, index);
-        }
-    }
-
-    renderMenu() {
-        return (
-            this.props.model.map((item, index) => {
-                return this.renderItem(item, index);
-            })
-        );
-    }
-
-    renderElement() {
-        if (this.props.model) {
-            const className = classNames('p-menu p-component', this.props.className, {'p-menu-dynamic p-menu-overlay': this.props.popup});
-            const menuitems = this.renderMenu();
-
-            return (
-                <div id={this.props.id} className={className} style={this.props.style} ref={el => this.container = el}>
-                    <ul className="p-menu-list p-reset" role="menu">
-                        {menuitems}
-                    </ul>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const element = this.renderElement();
-
-        if (this.props.appendTo)
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        else
-            return element;
-    }
-}
diff --git a/src/components/menubar/Menubar.css b/src/components/menubar/Menubar.css
deleted file mode 100644
index c0285fb50e..0000000000
--- a/src/components/menubar/Menubar.css
+++ /dev/null
@@ -1,100 +0,0 @@
-.p-menubar {
-    padding: .25em;
-}
-
-.p-menubar .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
-.p-menubar:after {
-    content: "";
-    clear: both;
-    display: table;
-}
-
-.p-menubar ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.p-menubar .p-menuitem-link {
-    display: block;
-    padding: .25em;
-    position: relative;
-    text-decoration: none;
-}
-
-.p-menubar .p-menuitem-icon {
-    margin-right: .25em;
-}
-
-.p-menubar .p-menubar-root-list {
-    display: inline-block;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem {
-    display: inline-block;
-    position: relative;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-    padding: .5em;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-    vertical-align: middle;
-    margin-left: .25em;
-}
-
-.p-menubar .p-menubar-root-list > li ul {
-    display: none;
-    z-index: 1;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
-    display: block;
-}
-
-.p-menubar .p-submenu-list {
-    display: none;
-    position: absolute;
-    min-width: 12.5em;
-    padding: .25em;
-}
-
-.p-menubar .p-submenu-list .p-menuitem {
-    margin: .125em 0;
-    position: relative;
-}
-
-.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list  {
-    display: block;
-    left: 100%;
-    top: 0;
-}
-
-.p-menubar .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-menubar .p-menuitem-text {
-    vertical-align: middle;
-}
-
-.p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon {
-    position: absolute;
-    margin-top: -.5em;
-    right: 0;
-    top: 50%;
-}
-
-.p-menubar .p-menuitem-active > .p-submenu > .p-submenu-list {
-    display: block;
-}
-
-.p-menubar .p-menubar-custom {
-    float: right;
-    padding: .25em;
-}
\ No newline at end of file
diff --git a/src/components/menubar/Menubar.d.ts b/src/components/menubar/Menubar.d.ts
deleted file mode 100644
index 1f8707c782..0000000000
--- a/src/components/menubar/Menubar.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-
-interface MenubarProps {
-    id?: string;
-    model?: MenuItem[];
-    style?: object;
-    className?: string;
-}
-
-export class Menubar extends React.Component<MenubarProps,any> {}
diff --git a/src/components/menubar/Menubar.js b/src/components/menubar/Menubar.js
deleted file mode 100644
index 0675ba9522..0000000000
--- a/src/components/menubar/Menubar.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {MenubarSub} from './MenubarSub';
-
-export class Menubar extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        style: null,
-        className: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        style: PropTypes.object,
-        className: PropTypes.string,
-    };
-
-    renderCustomContent() {
-        if (this.props.children) {
-            return (
-                <div className="p-menubar-custom">
-                    {this.props.children}
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-menubar p-component', this.props.className);
-        const customContent = this.renderCustomContent();
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style}>
-                <MenubarSub model={this.props.model} root={true} />
-                {customContent}
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/menubar/MenubarSub.js b/src/components/menubar/MenubarSub.js
deleted file mode 100644
index 0891449335..0000000000
--- a/src/components/menubar/MenubarSub.js
+++ /dev/null
@@ -1,348 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class MenubarSub extends Component {
-
-    static defaultProps = {
-        model: null,
-        root: false,
-        className: null,
-        popup: false,
-        onLeafClick: null,
-        onKeyDown: null,
-        parentActive: false
-    };
-
-    static propTypes = {
-        model: PropTypes.any,
-        root: PropTypes.bool,
-        className: PropTypes.string,
-        popup: PropTypes.bool,
-        onLeafClick: PropTypes.func,
-        onKeyDown: PropTypes.func,
-        parentActive: PropTypes.bool
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeItem: null
-        };
-
-        this.onLeafClick = this.onLeafClick.bind(this);
-        this.onChildItemKeyDown = this.onChildItemKeyDown.bind(this);
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.parentActive && !this.props.parentActive) {
-            this.setState({
-                activeItem: null
-            });
-        }
-    }
-
-    componentDidMount() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (this.element && !this.element.contains(event.target)) {
-                    this.setState({activeItem: null});
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    onItemMouseEnter(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (this.props.root) {
-            if (this.state.activeItem || this.props.popup) {
-                this.setState({
-                    activeItem: item
-                });
-            }
-        }
-        else {
-            this.setState({
-                activeItem: item
-            });
-        }
-    }
-
-    onItemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (this.props.root) {
-            if (item.items) {
-                if (this.state.activeItem && item === this.state.activeItem) {
-                    this.setState({
-                        activeItem: null
-                    });
-                }
-                else {
-                    this.setState({
-                        activeItem: item
-                    });
-                }
-            }
-        }
-
-        if (!item.items) {
-            this.onLeafClick();
-        }
-    }
-
-    onItemKeyDown(event, item) {
-        let listItem = event.currentTarget.parentElement;
-
-        switch(event.which) {
-            //down
-            case 40:
-                if (this.props.root) {
-                    if (item.items) {
-                        this.expandSubmenu(item, listItem);
-                    }
-                }
-                else {
-                    this.navigateToNextItem(listItem);
-                }
-
-                event.preventDefault();
-            break;
-
-            //up
-            case 38:
-                if (!this.props.root) {
-                    this.navigateToPrevItem(listItem);
-                }
-
-                event.preventDefault();
-            break;
-
-            //right
-            case 39:
-                if (this.props.root) {
-                    var nextItem = this.findNextItem(listItem);
-                    if (nextItem) {
-                        nextItem.children[0].focus();
-                    }
-                }
-                else {
-                    if (item.items) {
-                        this.expandSubmenu(item, listItem);
-                    }
-                }
-
-                event.preventDefault();
-            break;
-
-            //left
-            case 37:
-                if (this.props.root) {
-                    this.navigateToPrevItem(listItem);
-                }
-
-                event.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown(event, listItem);
-        }
-    }
-
-    onChildItemKeyDown(event, childListItem) {
-        if (this.props.root) {
-            //up
-            if (event.which === 38 && childListItem.previousElementSibling == null) {
-                this.collapseMenu(childListItem);
-            }
-        }
-        else {
-            //left
-            if (event.which === 37) {
-                this.collapseMenu(childListItem);
-            }
-        }
-    }
-
-    expandSubmenu(item, listItem) {
-        this.setState({
-            activeItem: item
-        });
-
-        setTimeout(() => {
-            listItem.children[1].children[0].children[0].focus();
-        }, 50);
-    }
-
-    collapseMenu(listItem) {
-        this.setState({activeItem: null});
-        listItem.parentElement.previousElementSibling.focus();
-    }
-
-    navigateToNextItem(listItem) {
-        var nextItem = this.findNextItem(listItem);
-        if (nextItem) {
-            nextItem.children[0].focus();
-        }
-    }
-
-    navigateToPrevItem(listItem) {
-        var prevItem = this.findPrevItem(listItem);
-        if (prevItem) {
-            prevItem.children[0].focus();
-        }
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-
-        if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-
-    onLeafClick() {
-        this.setState({
-            activeItem: null
-        });
-
-        if (this.props.onLeafClick) {
-            this.props.onLeafClick();
-        }
-    }
-
-    renderSeparator(index) {
-        return (
-            <li key={'separator_' + index} className="p-menu-separator" role="separator"></li>
-        );
-    }
-
-    renderIcon(item) {
-        const className = classNames('p-menuitem-icon', item.icon);
-
-        if (item.icon) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenuIcon(item) {
-        const icon = classNames('p-submenu-icon pi pi-fw', {'pi-caret-down': this.props.root, 'pi-caret-right': !this.props.root});
-
-        if (item.items) {
-            return (
-                <span className={icon}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenu(item) {
-        if(item.items) {
-            return (
-                <MenubarSub model={item.items} onLeafClick={this.onLeafClick} onKeyDown={this.onChildItemKeyDown} parentActive={item === this.state.activeItem} />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMenuitem(item, index) {
-        const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item, 'p-disabled': item.disabled}, item.className);
-        const icon = this.renderIcon(item);
-        const submenuIcon = this.renderSubmenuIcon(item);
-        const submenu = this.renderSubmenu(item);
-
-        return (
-            <li key={item.label + '_' + index} role="none" className={className} style={item.style} onMouseEnter={(event) => this.onItemMouseEnter(event, item)}>
-                <a href={item.url || '#'} role="menuitem" className="p-menuitem-link" target={item.target} aria-haspopup={item.items != null}
-                    onClick={(event) => this.onItemClick(event, item)} onKeyDown={(event) => this.onItemKeyDown(event, item)}>
-                    {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                    {submenuIcon}
-                </a>
-                {submenu}
-            </li>
-        );
-    }
-
-    renderItem(item, index) {
-        if (item.separator)
-            return this.renderSeparator(index);
-        else
-            return this.renderMenuitem(item, index);
-    }
-
-    renderMenu() {
-        if (this.props.model) {
-            return (
-                this.props.model.map((item, index) => {
-                    return this.renderItem(item, index);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames({'p-submenu-list': !this.props.root, 'p-menubar-root-list': this.props.root});
-        const submenu = this.renderMenu();
-
-        return (
-            <ul ref={el => this.element = el} className={className} role={this.props.root ? 'menubar' : 'menu'}>
-                {submenu}
-            </ul>
-        );
-    }
-}
diff --git a/src/components/menuitem/MenuItem.d.ts b/src/components/menuitem/MenuItem.d.ts
deleted file mode 100644
index 849af4d9be..0000000000
--- a/src/components/menuitem/MenuItem.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface MenuItem {
-    label?: string;
-    icon?: string;
-    url?: string;
-    items?: MenuItem[]|MenuItem[][];
-    disabled?: boolean;
-    target?: string;
-    separator?: boolean;
-    style?: any;
-    className?: string;
-    command?(e: {originalEvent: Event, item: MenuItem}): void;
-}
diff --git a/src/components/message/Message.css b/src/components/message/Message.css
deleted file mode 100644
index 6db039aaee..0000000000
--- a/src/components/message/Message.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.p-message {
-    border: 1px solid;
-    margin: 0px .25em;
-    padding: .25em .5em;
-    display: inline-block;
-    vertical-align: top;
-}
-
-.p-message .p-message-icon,
-.p-message .p-message-text {
-    vertical-align: middle;
-}
-
-.p-fluid .p-message {
-    display: block;
-}
\ No newline at end of file
diff --git a/src/components/message/Message.d.ts b/src/components/message/Message.d.ts
deleted file mode 100644
index 953dd39153..0000000000
--- a/src/components/message/Message.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface MessageProps {
-    id?: string;
-    className?: string;
-    style?: object;
-    text?: string;
-    severity?: string
-}
-
-export class Message extends React.Component<MessageProps,any> {}
\ No newline at end of file
diff --git a/src/components/message/Message.js b/src/components/message/Message.js
deleted file mode 100644
index 85f2c71ac7..0000000000
--- a/src/components/message/Message.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class Message extends Component {
-
-    static defaultProps = {
-        id: null,
-        className: null,
-        style: null,
-        text: null,
-        severity: 'info'
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        text: PropTypes.string,
-        severity: PropTypes.string
-    };
-
-    render() {
-        let className = classNames('p-message p-component', {
-            'p-message-info': this.props.severity === 'info',
-            'p-message-warn': this.props.severity === 'warn',
-            'p-message-error': this.props.severity === 'error',
-            'p-message-success': this.props.severity === 'success',
-            'p-message-icon-only': !this.props.text
-        }, this.props.className);
-
-        let icon = classNames('p-message-icon pi pi-fw', {
-            'pi-info-circle': this.props.severity === 'info',
-            'pi-exclamation-triangle': this.props.severity === 'warn',
-            'pi-times': this.props.severity === 'error',
-            'pi-check': this.props.severity === 'success',
-        });
-
-        return <div id={this.props.id} aria-live="polite" className={className} style={this.props.style} role="alert">
-            <span className={icon}></span>
-            <span className="p-message-text">{this.props.text}</span>
-        </div>;
-    }
-}
diff --git a/src/components/messages/Messages.css b/src/components/messages/Messages.css
deleted file mode 100644
index 261052cf64..0000000000
--- a/src/components/messages/Messages.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.p-messages {
-    position: relative;
-}
-
-.p-messages .p-messages-wrapper {
-    padding: 1em;	
-}
-
-.p-messages .p-messages-icon {
-    display:inline-block;
-    padding: 0;
-    vertical-align: middle;
-    font-size: 2em;
-}
-
-.p-messages .p-messages-summary {
-    font-weight: bold;
-    margin-left: .25em;
-}
-
-.p-messages .p-messages-detail {
-    margin-left: .25em;
-}
-
-.p-messages ul {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-messages.p-messages-noicon ul {
-    margin: 0 1.5em 0 0;
-}
-
-.p-messages .p-messages-close {
-    cursor: pointer;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-}
-
-.p-messages-exit .p-messages-close {
-    display: none;
-}
-
-/* Animations */	
-.p-messages-enter {	
-    opacity: 0.01;	
-}
-.p-messages-enter-active {	
-    opacity: 1;
-    transition: opacity 250ms ease-in;	
-}	
-.p-messages-exit {	
-    max-height: 500px;	
-}	
-.p-messages-exit.p-messages-exit-active {	
-    max-height: 0;	
-    overflow: hidden;	
-    margin-bottom: 0;	
-    transition: max-height 500ms cubic-bezier(0, 1, 0, 1), margin-bottom 500ms cubic-bezier(0, 1, 0, 1);	
-} 
\ No newline at end of file
diff --git a/src/components/messages/Messages.d.ts b/src/components/messages/Messages.d.ts
deleted file mode 100644
index a0fb871b84..0000000000
--- a/src/components/messages/Messages.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-interface Message {
-    id?: string;
-    severity?: 'success' | 'info' | 'warn' | 'error',
-    summary?: React.ReactNode;
-    detail?: React.ReactNode;
-    closable?: boolean;
-    sticky?: boolean;
-    life?: number;
-}
-
-interface MessagesProps {
-    id?: string;
-    className?: string;
-    style?: object;
-    onRemove?(message: Message): void;
-    onClick?(message: Message): void;
-}
-
-export class Messages extends React.Component<MessagesProps, any> {
-    public show(message: Message | Message[]): void;
-    public clear(): void;
-    public replace(message: Message | Message[]): void;
-}
diff --git a/src/components/messages/Messages.js b/src/components/messages/Messages.js
deleted file mode 100644
index 6e787e18eb..0000000000
--- a/src/components/messages/Messages.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { UIMessage } from './UIMessage';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-
-var messageIdx = 0;
-
-export class Messages extends Component {
-
-    static defaultProps = {
-        id: null,
-        className: null,
-        style: null,
-        onRemove: null,
-        onClick: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        onRemove: PropTypes.func,
-        onClick: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            messages: []
-        }
-
-        this.onClose = this.onClose.bind(this);
-    }
-
-    show(value) {
-        if (value) {
-            let newMessages = [];
-
-            if (Array.isArray(value)) {
-                for (let i = 0; i < value.length; i++) {
-                    value[i].id = messageIdx++;
-                    newMessages = [...this.state.messages, ...value];
-                }
-            }
-            else {
-                value.id = messageIdx++;
-                newMessages = this.state.messages ? [...this.state.messages, value] : [value];
-            }
-
-            this.setState({
-                messages: newMessages
-            });
-        }
-    }
-
-    clear() {
-        this.setState({
-            messages: []
-        })
-    }
-
-    replace(value) {
-        this.setState({
-            messages: [],
-        }, () => this.show(value));
-    }
-
-    onClose(message) {
-        let newMessages = this.state.messages.filter(msg => msg.id !== message.id);
-        this.setState({
-            messages: newMessages
-        });
-
-        if (this.props.onRemove) {
-            this.props.onRemove(message);
-        }
-    }
-
-    render() {
-        return (
-            <div id={this.props.id} className={this.props.className} style={this.props.style}>
-                <TransitionGroup >
-                    {this.state.messages.map((message, index) =>
-                        <CSSTransition key={message.id} classNames="p-messages"
-                            timeout={{ enter: 250, exit: 500 }}>
-                            <UIMessage message={message} onClick={this.props.onClick} onClose={this.onClose} />
-                        </CSSTransition>
-                    )}
-                </TransitionGroup>
-            </div>
-        );  
-    }
-}
diff --git a/src/components/messages/UIMessage.js b/src/components/messages/UIMessage.js
deleted file mode 100644
index 872fda668f..0000000000
--- a/src/components/messages/UIMessage.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class UIMessage extends Component {
-
-    static defaultProps = {
-        message: null,
-        onClose: null,
-        onClick: null
-    }
-
-    static propTypes = {
-        message: PropTypes.object,
-        onClose: PropTypes.func,
-        onClick: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.onClick = this.onClick.bind(this);
-        this.onClose = this.onClose.bind(this);
-    }
-
-    componentDidMount() {
-        if (!this.props.message.sticky) {
-            this.timeout = setTimeout(() => {
-                this.onClose(null);
-            }, this.props.message.life || 3000);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-    }
-
-    onClose(event) {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-
-        if (this.props.onClose) {
-            this.props.onClose(this.props.message);
-        }
-
-        if (event) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-
-    onClick() {
-        if (this.props.onClick) {
-            this.props.onClick(this.props.message);
-        }
-    }
-
-    renderCloseIcon() {
-        if (this.props.message.closable !== false) {
-            return (
-                <button type="button" className="p-messages-close p-link" onClick={this.onClose}>
-                    <i className="p-messages-close-icon pi pi-times"></i>
-                </button>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMessages() {
-        if(this.props.message) {
-            return (
-                <ul>
-                    <li key={this.props.message.id}>
-                        <span className="p-messages-summary">{this.props.message.summary}</span>
-                        <span className="p-messages-detail">{this.props.message.detail}</span>
-                    </li>
-                </ul>
-            )
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let className = 'p-messages p-component p-messages-' + this.props.message.severity;
-        let icon = classNames('p-messages-icon pi ', {
-            'pi-info-circle': this.props.message.severity === 'info',
-            'pi-exclamation-triangle': this.props.message.severity === 'warn',
-            'pi-times': this.props.message.severity === 'error',
-            'pi-check': this.props.message.severity === 'success',
-        });
-        let closeIcon = this.renderCloseIcon();
-        let messages = this.renderMessages();
-
-        return (
-            <div ref={(el) => { this.container = el; }} className={className} onClick={this.onClick}>
-                <div className="p-messages-wrapper">
-                    {closeIcon}
-                    <span className={icon}></span>
-                    {messages}
-                </div>
-            </div>
-        );
-
-    }
-}
diff --git a/src/components/multiselect/MultiSelect.css b/src/components/multiselect/MultiSelect.css
deleted file mode 100644
index 187c43b7de..0000000000
--- a/src/components/multiselect/MultiSelect.css
+++ /dev/null
@@ -1,152 +0,0 @@
-/** MultiSelect **/
-.p-multiselect {
-    display: inline-block;
-    position: relative;
-    width: auto;
-    cursor: pointer;
-}
-
-.p-multiselect .p-multiselect-trigger {
-    border-right: none;
-    border-top: none;
-    border-bottom: none;
-    cursor: pointer;
-    width: 1.5em;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 0 .25em;
-}
-
-.p-multiselect .p-multiselect-trigger .p-multiselect-trigger-icon {
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    position: absolute;
-}
-
-.p-multiselect .p-multiselect-label-container  {
-    overflow: hidden;
-}
-
-.p-multiselect .p-multiselect-label  {
-    display: block;
-    padding: .25em 2em .25em .25em;
-    width: auto;
-    border: none;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.p-multiselect .p-multiselect-label-empty {
-    overflow: hidden;
-    visibility: hidden;
-}
-
-.p-multiselect.p-disabled .p-multiselect-trigger,
-.p-multiselect.p-disabled .p-multiselect-label {
-    cursor: auto
-}
-
-.p-multiselect-panel {
-    padding: 0.2em;
-    position: absolute;
-    min-width: 10em;
-}
-
-.p-multiselect .p-multiselect-panel {
-    min-width: 100%;
-}
-
-.p-multiselect-panel .p-multiselect-items-wrapper {
-    overflow: auto;
-    position: relative;
-    padding: 0.2em 0;
-}
-
-.p-multiselect-panel .p-multiselect-list {
-    border: 0 none;
-    margin: 0;
-    list-style-type: none;
-}
-
-.p-multiselect-panel .p-multiselect-item {
-    border: 0 none;
-    cursor: pointer;
-    font-weight: normal;
-    margin: 1px 0;
-    padding: .125em .25em;
-    text-align: left;
-    white-space: nowrap;
-    display: block;
-    position: relative;
-}
-
-.p-multiselect-panel .p-multiselect-item .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-multiselect-panel .p-multiselect-item label {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-multiselect-header {
-    margin-bottom: 0.3em;
-    padding: .25em;
-    position: relative;
-    text-align: left;
-}
-
-.p-multiselect-header .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-    cursor:pointer;
-}
-
-.p-multiselect-header .p-multiselect-filter-container {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    width: 65%;
-}
-
-.p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
-    position: absolute;
-    top: .25em;
-    left: .125em;
-}
-
-.p-multiselect-header .p-inputtext {
-    padding: .125em .125em .125em 1.25em;
-    width: 100%;
-}
-
-.p-multiselect-header .p-multiselect-close {
-    position: absolute;
-    right: .375em;
-    top: .375em;
-    display: block;
-    border: 0 none;
-}
-
-.p-multiselect-header a.p-multiselect-all,
-.p-multiselect-header a.p-multiselect-none {
-    float:left;
-    margin-right: 10px;
-    display: block;
-}
-
-.p-multiselect-header .p-multiselect-close.p-state-hover {
-    padding:0px;
-}
-
-.p-fluid .p-multiselect {
-    width: 100%;
-    box-sizing: border-box;
-}
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
deleted file mode 100755
index f540eaf762..0000000000
--- a/src/components/multiselect/MultiSelect.d.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface MultiSelectProps {
-    id?: string;
-    name?: string;
-    value?: any;
-    options?: any[];
-    optionLabel?: string;
-    optionValue?: string;
-    style?: object;
-    className?: string;
-    scrollHeight?: string;
-    placeholder?: string;
-    fixedPlaceholder?: boolean;
-    disabled?: boolean;
-    filter?: boolean;
-    filterBy?: string;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    tabIndex?: boolean;
-    dataKey?: string;
-    inputId?: string;
-    required?: boolean;
-    appendTo?: HTMLElement;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    maxSelectedLabels?: number;
-    selectedItemsLabel?: string;
-    itemTemplate?(item: any): JSX.Element | undefined;
-    selectedItemTemplate?(value: any): JSX.Element | undefined;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-    onFocus?(event: Event): void;
-    onBlur?(event: Event): void;
-}
-
-export class MultiSelect extends React.Component<MultiSelectProps,any> {}
diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
deleted file mode 100644
index c1ec5f0c68..0000000000
--- a/src/components/multiselect/MultiSelect.js
+++ /dev/null
@@ -1,537 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
-import classNames from 'classnames';
-import { MultiSelectPanel } from './MultiSelectPanel';
-import { MultiSelectItem } from './MultiSelectItem';
-import { MultiSelectHeader } from './MultiSelectHeader';
-import Tooltip from "../tooltip/Tooltip";
-
-export class MultiSelect extends Component {
-
-    static defaultProps = {
-        id: null,
-        name: null,
-        value: null,
-        options: null,
-        optionLabel: null,
-        optionValue: null,
-        style: null,
-        className: null,
-        scrollHeight: '200px',
-        placeholder: null,
-        fixedPlaceholder: false,
-        disabled: false,
-        filter: false,
-        filterBy: null,
-        filterMatchMode: 'contains',
-        filterPlaceholder: null,
-        filterLocale: undefined,
-        tabIndex: '0',
-        dataKey: null,
-        inputId: null,
-        required: false,
-        appendTo: null,
-        tooltip: null,
-        tooltipOptions: null,
-        maxSelectedLabels: 3,
-        selectedItemsLabel: '{0} items selected',
-        ariaLabelledBy: null,
-        itemTemplate: null,
-        selectedItemTemplate: null,
-        onChange: null,
-        onFocus: null,
-        onBlur: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        name: PropTypes.string,
-        value: PropTypes.any,
-        options: PropTypes.array,
-        optionLabel: PropTypes.string,
-        optionValue: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        scrollHeight: PropTypes.string,
-        placeholder: PropTypes.string,
-        fixedPlaceholder: PropTypes.bool,
-        disabled: PropTypes.bool,
-        filter: PropTypes.bool,
-        filterBy: PropTypes.string,
-        filterMatchMode: PropTypes.string,
-        filterPlaceholder: PropTypes.string,
-        filterLocale: PropTypes.string,
-        tabIndex: PropTypes.string,
-        dataKey: PropTypes.string,
-        inputId: PropTypes.string,
-        required: PropTypes.bool,
-        appendTo: PropTypes.object,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        maxSelectedLabels: PropTypes.number,
-        selectedItemsLabel: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        itemTemplate: PropTypes.func,
-        selectedItemTemplate: PropTypes.func,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            filter: ''
-        };
-
-        this.onClick = this.onClick.bind(this);
-        this.onOptionClick = this.onOptionClick.bind(this);
-        this.onOptionKeyDown = this.onOptionKeyDown.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onFilter = this.onFilter.bind(this);
-        this.onCloseClick = this.onCloseClick.bind(this);
-        this.onToggleAll = this.onToggleAll.bind(this);
-    }
-
-    onOptionClick(event) {
-        let optionValue = this.getOptionValue(event.option);
-        let selectionIndex = this.findSelectionIndex(optionValue);
-        let newValue;
-
-        if(selectionIndex !== -1)
-            newValue = this.props.value.filter((val, i) => i !== selectionIndex);
-        else
-            newValue = [...this.props.value || [], optionValue];
-
-        this.updateModel(event.originalEvent, newValue);
-    }
-
-    onOptionKeyDown(event) {
-        let listItem = event.originalEvent.currentTarget;
-
-        switch(event.originalEvent.which) {
-            //down
-            case 40:
-                var nextItem = this.findNextItem(listItem);
-                if (nextItem) {
-                    nextItem.focus();
-                }
-
-                event.originalEvent.preventDefault();
-            break;
-
-            //up
-            case 38:
-                var prevItem = this.findPrevItem(listItem);
-                if (prevItem) {
-                    prevItem.focus();
-                }
-
-                event.originalEvent.preventDefault();
-            break;
-
-            //enter
-            case 13:
-                this.onOptionClick(event);
-                event.originalEvent.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return !DomHandler.hasClass(nextItem, 'p-multiselect-item') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-
-        if (prevItem)
-            return !DomHandler.hasClass(prevItem, 'p-multiselect-item') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-
-    onClick(event) {
-        if(this.props.disabled) {
-            return;
-        }
-
-        if(!this.isPanelClicked(event)) {
-            if(this.panel.element.offsetParent) {
-                this.hide();
-            }
-            else {
-                this.focusInput.focus();
-                this.show();
-            }
-        }
-    }
-
-    onToggleAll(event) {
-        let newValue;
-
-        if(event.checked) {
-            newValue = [];
-        }
-        else {
-            let options = this.hasFilter() ? this.filterOptions(this.props.options) : this.props.options;
-            if(options) {
-                newValue = [];
-                for(let option of options) {
-                    newValue.push(this.getOptionValue(option));
-                }
-            }
-        }
-
-        this.updateModel(event.originalEvent, newValue);
-    }
-
-    updateModel(event, value) {
-        if(this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: value
-                }
-            });
-        }
-    }
-
-    onFilter(event) {
-        this.setState({filter: event.query});
-    }
-
-    show() {
-        if(this.props.options && this.props.options.length) {
-            this.panel.element.style.zIndex = String(DomHandler.generateZIndex());
-            this.panel.element.style.display = 'block';
-
-            setTimeout(() => {
-                DomHandler.addClass(this.panel.element, 'p-input-overlay-visible');
-                DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-            }, 1);
-
-            this.alignPanel();
-            this.bindDocumentClickListener();
-        }
-    }
-
-    hide() {
-        DomHandler.addClass(this.panel.element, 'p-input-overlay-hidden');
-        DomHandler.removeClass(this.panel.element, 'p-input-overlay-visible');
-        this.unbindDocumentClickListener();
-
-        setTimeout(() => {
-            this.panel.element.style.display = 'none';
-            DomHandler.removeClass(this.panel.element, 'p-input-overlay-hidden');
-        }, 150);
-    }
-
-    alignPanel() {
-        if (this.props.appendTo) {
-            this.panel.element.style.minWidth = DomHandler.getWidth(this.container) + 'px';
-            DomHandler.absolutePosition(this.panel.element, this.container);
-        }
-        else {
-            DomHandler.relativePosition(this.panel.element, this.container);
-        }
-    }
-
-    onCloseClick(event) {
-        this.hide();
-        event.preventDefault();
-        event.stopPropagation();
-    }
-
-    findSelectionIndex(value) {
-        let index = -1;
-
-        if (this.props.value) {
-            for (let i = 0; i < this.props.value.length; i++) {
-                if (ObjectUtils.equals(this.props.value[i], value, this.props.dataKey)) {
-                    index = i;
-                    break;
-                }
-            }
-        }
-
-        return index;
-    }
-
-    isSelected(option) {
-        return this.findSelectionIndex(this.getOptionValue(option)) !== -1;
-    }
-
-    findLabelByValue(val) {
-        let label = null;
-
-        for (let i = 0; i < this.props.options.length; i++) {
-            let option = this.props.options[i];
-            let optionValue = this.getOptionValue(option);
-
-            if (ObjectUtils.equals(optionValue, val)) {
-                label = this.getOptionLabel(option);
-                break;
-            }
-        }
-
-        return label;
-    }
-
-    onFocus(event) {
-        DomHandler.addClass(this.container, 'p-focus');
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-    }
-
-    onBlur(event) {
-        DomHandler.removeClass(this.container, 'p-focus');
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-    }
-
-    bindDocumentClickListener() {
-        if(!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if(this.isOutsideClicked(event)) {
-                    this.hide();
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target)
-            || (this.panel && this.panel.element && this.panel.element.contains(event.target)));
-    }
-
-    isPanelClicked(event) {
-        return this.panel && this.panel.element && this.panel.element.contains(event.target);
-    }
-
-    unbindDocumentClickListener() {
-        if(this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    hasFilter() {
-        return this.state.filter && this.state.filter.trim().length > 0;
-    }
-
-    isAllChecked(visibleOptions) {
-        if(this.hasFilter())
-            return this.props.value && visibleOptions && visibleOptions.length&&(this.props.value.length === visibleOptions.length);
-        else
-            return this.props.value && this.props.options && (this.props.value.length === this.props.options.length);
-    }
-
-    filterOptions(options) {
-        let filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale);
-        let searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
-        return FilterUtils.filter(options, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
-    }
-
-    getOptionLabel(option) {
-        return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : (option['label'] !== undefined ? option['label'] : option);
-    }
-
-    getOptionValue(option) {
-        return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : (option['value'] !== undefined ? option['value'] : option);
-    }
-
-    isEmpty() {
-        return !this.props.value || this.props.value.length === 0;
-    }
-
-    checkValidity() {
-        return this.nativeSelect.checkValidity();
-    }
-
-    getSelectedItemsLabel() {
-        let pattern = /{(.*?)}/;
-        if (pattern.test(this.props.selectedItemsLabel)) {
-            return this.props.selectedItemsLabel.replace(this.props.selectedItemsLabel.match(pattern)[0], this.props.value.length + '');
-        }
-
-        return this.props.selectedItemsLabel;
-    }
-
-    getLabel() {
-        let label;
-
-        if (!this.isEmpty() && !this.props.fixedPlaceholder) {
-            label = '';
-            for(let i = 0; i < this.props.value.length; i++) {
-                if(i !== 0) {
-                    label += ',';
-                }
-                label += this.findLabelByValue(this.props.value[i]);
-            }
-
-            if (this.props.value.length <= this.props.maxSelectedLabels) {
-                return label;
-            }
-            else {
-                return this.getSelectedItemsLabel();
-            }
-        }
-
-        return label;
-    }
-
-    getLabelContent() {
-        if (this.props.selectedItemTemplate) {
-            if (!this.isEmpty()) {
-                if (this.props.value.length <= this.props.maxSelectedLabels) {
-                    return this.props.value.map((val, index) => {
-                        return (
-                            <React.Fragment key={index}>{this.props.selectedItemTemplate(val)}</React.Fragment>
-                        );
-                    });
-                }
-                else {
-                    return this.getSelectedItemsLabel();
-                }
-            }
-            else {
-                return this.props.selectedItemTemplate();
-            }
-        }
-        else {
-            return this.getLabel();
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    renderHeader(items) {
-        return (
-            <MultiSelectHeader filter={this.props.filter} filterValue={this.state.filter} onFilter={this.onFilter} filterPlaceholder={this.props.filterPlaceholder}
-                onClose={this.onCloseClick} onToggleAll={this.onToggleAll} allChecked={this.isAllChecked(items)} />
-        );
-    }
-
-    renderLabel() {
-        const empty = this.isEmpty();
-        const content = this.getLabelContent();
-        const className = classNames('p-multiselect-label', {
-            'p-placeholder': empty && this.props.placeholder,
-            'p-multiselect-label-empty': empty && !this.props.placeholder && !this.props.selectedItemTemplate}
-        );
-
-        return (
-            <div className="p-multiselect-label-container">
-                <label className={className}>{content||this.props.placeholder||'empty'}</label>
-            </div>
-        );
-    }
-
-    renderHiddenSelect() {
-        let selectedOptions = this.props.value ? this.props.value.map((option,index) => <option key={this.getOptionLabel(option) + '_' + index} value={this.getOptionValue(option)}></option>): null;
-
-        return (
-            <div className="p-hidden-accessible p-multiselect-hidden-select">
-                <select ref={(el) => this.nativeSelect = el} required={this.props.required} name={this.props.name} tabIndex="-1" aria-hidden="true" multiple>
-                    {selectedOptions}
-                </select>
-            </div>
-        );
-    }
-
-    render() {
-        let className = classNames('p-multiselect p-component', this.props.className, {'p-disabled': this.props.disabled});
-        let label = this.renderLabel();
-        let hiddenSelect = this.renderHiddenSelect();
-        let items = this.props.options;
-
-        if (items) {
-            if (this.hasFilter()) {
-                items = this.filterOptions(items);
-            }
-
-            items = items.map((option, index) => {
-                let optionLabel = this.getOptionLabel(option);
-
-                return (
-                    <MultiSelectItem key={optionLabel + '_' + index} label={optionLabel} option={option} template={this.props.itemTemplate}
-                    selected={this.isSelected(option)} onClick={this.onOptionClick} onKeyDown={this.onOptionKeyDown} tabIndex={this.props.tabIndex} />
-                );
-            });
-        }
-
-        let header = this.renderHeader(items);
-
-        return (
-            <div id={this.props.id} className={className} onClick={this.onClick} ref={el => this.container = el} style={this.props.style}>
-                {hiddenSelect}
-                <div className="p-hidden-accessible">
-                    <input readOnly type="text" onFocus={this.onFocus} onBlur={this.onBlur} ref={el => this.focusInput = el} aria-haspopup="listbox"
-                           aria-labelledby={this.props.ariaLabelledBy} id={this.props.inputId} />
-                </div>
-                {label}
-                <div className="p-multiselect-trigger">
-                    <span className="p-multiselect-trigger-icon pi pi-chevron-down p-c"></span>
-                </div>
-                <MultiSelectPanel ref={el => this.panel = el} header={header} appendTo={this.props.appendTo}
-                    scrollHeight={this.props.scrollHeight}>
-                    {items}
-                </MultiSelectPanel>
-            </div>
-        );
-    }
-}
diff --git a/src/components/multiselect/MultiSelectHeader.js b/src/components/multiselect/MultiSelectHeader.js
deleted file mode 100644
index 24ec44d2d4..0000000000
--- a/src/components/multiselect/MultiSelectHeader.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {InputText} from '../inputtext/InputText';
-import {Checkbox} from '../checkbox/Checkbox';
-
-export class MultiSelectHeader extends Component {
-
-    static defaultProps = {
-        filter: false,
-        filterValue: null,
-        filterPlaceholder: null,
-        onFilter: null,
-        onClose: null,
-        onToggleAll: null,
-        allChecked: false
-    }
-
-    static propTypes = {
-        filter: PropTypes.bool,
-        filterValue: PropTypes.string,
-        filterPlaceholder: PropTypes.string,
-        allChecked: PropTypes.bool,
-        onFilter: PropTypes.func,
-        onClose: PropTypes.func,
-        onToggleAll: PropTypes.func
-    }
-
-    constructor() {
-        super();
-        this.onFilter = this.onFilter.bind(this);
-        this.onToggleAll = this.onToggleAll.bind(this);
-    }
-
-    onFilter(event) {
-        if(this.props.onFilter) {
-            this.props.onFilter({
-                originalEvent: event,
-                query: event.target.value
-            });
-        }
-    }
-
-    onToggleAll(event) {
-        if(this.props.onToggleAll) {
-            this.props.onToggleAll({
-                originalEvent: event,
-                checked: this.props.allChecked
-            });
-        }
-    }
-
-    renderFilterElement() {
-        if (this.props.filter) {
-            return (
-                <div className="p-multiselect-filter-container">
-                    <InputText type="text" role="textbox" value={this.props.filterValue} onChange={this.onFilter}
-                                className="p-inputtext p-component" placeholder={this.props.filterPlaceholder}/>
-                    <span className="p-multiselect-filter-icon pi pi-search"></span>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let filterElement = this.renderFilterElement();
-
-        return (
-                <div className="p-multiselect-header">
-                    <Checkbox checked={this.props.allChecked} onChange={this.onToggleAll} role="checkbox" aria-checked={this.props.allChecked}/>
-                    {filterElement}
-                    <button type="button" className="p-multiselect-close p-link" onClick={this.props.onClose}>
-                        <span className="p-multiselect-close-icon pi pi-times"></span>
-                    </button>
-                </div>
-        );
-    }
-}
diff --git a/src/components/multiselect/MultiSelectItem.js b/src/components/multiselect/MultiSelectItem.js
deleted file mode 100644
index e41bdda779..0000000000
--- a/src/components/multiselect/MultiSelectItem.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class MultiSelectItem extends Component {
-
-    static defaultProps = {
-        option: null,
-        label: null,
-        selected: false,
-        tabIndex: null,
-        template: null,
-        onClick: null,
-        onKeyDown: null,
-    };
-
-    static propTypes = {
-        option: PropTypes.object,
-        label: PropTypes.string,
-        selected: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        template: PropTypes.func,
-        onClick: PropTypes.func,
-        onKeyDown: PropTypes.func,
-    };
-
-    constructor() {
-        super();
-        this.onClick = this.onClick.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                option: this.props.option
-            });
-        }
-
-        event.preventDefault();
-    }
-
-    onKeyDown(event) {
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown({
-                originalEvent: event,
-                option: this.props.option
-            });
-        }
-    }
-
-    render() {
-        const className = classNames(this.props.option.className, 'p-multiselect-item', {'p-highlight': this.props.selected});
-        const checkboxClassName = classNames('p-checkbox-box p-component', {'p-highlight': this.props.selected});
-        const checkboxIcon = classNames('p-checkbox-icon p-c', {'pi pi-check': this.props.selected});
-        const content = this.props.template ? this.props.template(this.props.option) : this.props.label;
-
-        return (
-            <li className={className} onClick={this.onClick} tabIndex={this.props.tabIndex} onKeyDown={this.onKeyDown} role="option" aria-selected={this.props.selected}>
-                <div className="p-checkbox p-component">
-                    <div className={checkboxClassName}>
-                        <span className={checkboxIcon}></span>
-                    </div>
-                </div>
-                <label>{content}</label>
-            </li>
-        );
-    }
-
-}
diff --git a/src/components/multiselect/MultiSelectPanel.js b/src/components/multiselect/MultiSelectPanel.js
deleted file mode 100644
index baa0c086c2..0000000000
--- a/src/components/multiselect/MultiSelectPanel.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-
-export class MultiSelectPanel extends Component {
-
-    static defaultProps = {
-        appendTo: null,
-        header: null,
-        onClick: null,
-        scrollHeight: null
-    };
-
-    static propTypes = {
-        appendTo: PropTypes.object,
-        header: PropTypes.any,
-        onClick: PropTypes.func,
-        scrollHeight: PropTypes.string
-    };
-
-    renderElement() {
-        return (
-            <div className="p-multiselect-panel p-hidden p-input-overlay"
-                ref={(el) => this.element = el} onClick={this.props.onClick}>
-                {this.props.header}
-                <div className="p-multiselect-items-wrapper" style={{ maxHeight: this.props.scrollHeight }}>
-                    <ul className="p-multiselect-items p-multiselect-list p-component" role="listbox" aria-multiselectable={true}>
-                        {this.props.children}
-                    </ul>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        let element = this.renderElement();
-
-        if (this.props.appendTo) {
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        }
-        else {
-            return element;
-        }
-    }
-
-}
diff --git a/src/components/orderlist/OrderList.css b/src/components/orderlist/OrderList.css
deleted file mode 100644
index d2c5e4a6ce..0000000000
--- a/src/components/orderlist/OrderList.css
+++ /dev/null
@@ -1,119 +0,0 @@
-.p-orderlist {
-    display: table;
-}
-
-.p-orderlist .p-orderlist-controls {
-    height: 12.5em;
-    padding: 0 .25em;
-    vertical-align: middle;
-    display: table-cell;
-}
-
-.p-orderlist .p-orderlist-controls .p-button {
-    display: block;
-    margin-bottom: 0.25em;
-}
-
-.p-orderlist .p-orderlist-list-container {
-    display: table-cell;
-    vertical-align: top;
-}
-
-.p-orderlist .p-orderlist-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow:auto;
-    height: 12.5em;
-    width: 12.5em;
-}
-
-.p-orderlist .p-orderlist-caption {
-    text-align: center;
-    padding: .5em .75em;
-    border-bottom: 0 none;
-}
-
-.p-orderlist .p-orderlist-list .p-orderlist-item {
-    margin: 1px;
-    padding: .125em;
-    cursor: pointer;
-    border: 0 none;
-    font-weight: inherit;
-}
-
-.p-orderlist .p-orderlist-filter-container {
-    position: relative;
-    width: 100%;
-    padding: .5em .6em;
-    border-bottom: 0 none;
-}
-
-.p-orderlist .p-orderlist-filter-container .p-inputtext {
-    text-indent: 1.1em;
-    width: 100%;
-}
-
-.p-orderlist .p-orderlist-filter-container .p-orderlist-filter-icon {
-    position: absolute;
-    top: 50%;
-    left: 1em;
-    margin-top: -.6em;
-}
-
-.p-orderlist.p-disabled .p-orderlist-item,
-.p-orderlist.p-disabled .p-button {
-    cursor: default;
-}
-
-.p-orderlist.p-disabled .p-orderlist-list {
-    overflow:hidden;
-}
-
-/* Responsive */
-.p-orderlist.p-orderlist-responsive {
-    width: 100%;
-}
-
-.p-orderlist.p-orderlist-responsive .p-orderlist-controls {
-    width: 16.66666%;
-    padding-right: .5em;
-}
-
-.p-orderlist.p-orderlist-responsive .p-orderlist-list-container {
-    width: 83.33333%;
-}
-
-.p-orderlist.p-orderlist-responsive .p-orderlist-list,
-.p-orderlist.p-orderlist-responsive .p-orderlist-caption {
-    width: 100%;
-}
-
-.p-orderlist.p-orderlist-responsive .p-orderlist-controls > .p-button {
-    width: 100%;
-}
-
-.p-orderlist .p-orderlist-droppoint {
-    height: 6px;
-    list-style-type: none;
-}
-
-@media (max-width: 40em) {
-    .p-orderlist.p-orderlist-responsive .p-orderlist-controls {
-        text-align: center;
-        width: 100%;
-        display: block;
-        height: auto;
-    }
-
-    .p-orderlist.p-orderlist-responsive .p-orderlist-controls .p-button {
-        display: inline-block;
-        width: 20%;
-        margin-right: .25em;
-    }
-
-    .p-orderlist.p-orderlist-responsive .p-orderlist-list-container {
-        width: 100%;
-        display: block;
-    }
-}
\ No newline at end of file
diff --git a/src/components/orderlist/OrderList.d.ts b/src/components/orderlist/OrderList.d.ts
deleted file mode 100755
index 27de429cdf..0000000000
--- a/src/components/orderlist/OrderList.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-interface OrderListProps {
-    id?: string;
-    value?: any[];
-    header?: any;
-    style?: object;
-    className?: string;
-    listStyle?: object;
-    responsive?: boolean;
-    dragdrop?: boolean;
-    tabIndex?: string;
-    onChange?(e: {originalEvent: Event, value: any}): void;
-    itemTemplate?(item: any): JSX.Element | undefined;
-}
-
-export class OrderList extends React.Component<OrderListProps,any> {}
diff --git a/src/components/orderlist/OrderList.js b/src/components/orderlist/OrderList.js
deleted file mode 100644
index cab7f0e64f..0000000000
--- a/src/components/orderlist/OrderList.js
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import {OrderListControls} from './OrderListControls';
-import {OrderListSubList} from './OrderListSubList';
-import DomHandler from '../utils/DomHandler';
-import ObjectUtils from '../utils/ObjectUtils';
-import classNames from 'classnames'
-
-export class OrderList extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        header: null,
-        style: null,
-        className: null,
-        listStyle: null,
-        responsive: false,
-        dragdrop: false,
-        tabIndex: '0',
-        onChange: null,
-        itemTemplate: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.array,
-        header: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        listStyle: PropTypes.object,
-        responsive: PropTypes.bool,
-        dragdrop: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        onChange: PropTypes.func,
-        itemTemplate: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            selection: []
-        };
-
-        this.onItemClick = this.onItemClick.bind(this);
-        this.onItemKeyDown = this.onItemKeyDown.bind(this);
-        this.onReorder = this.onReorder.bind(this);
-    }
-
-    onItemClick(event) {
-        let metaKey = (event.originalEvent.metaKey || event.originalEvent.ctrlKey);
-        let index = ObjectUtils.findIndexInList(event.value, this.state.selection);
-        let selected = (index !== -1);
-        let selection;
-        
-        if (selected) {
-            if (metaKey)
-                selection = this.state.selection.filter((val, i) => i !== index);
-            else
-                selection = [event.value];
-        }
-        else {
-            if (metaKey)
-                selection = [...this.state.selection, event.value];
-            else
-                selection = [event.value];
-        }
-            
-        this.setState({selection: selection});
-    }
-
-    onItemKeyDown(event) {
-        let listItem = event.originalEvent.currentTarget;
-        
-        switch(event.originalEvent.which) {
-            //down
-            case 40:
-                var nextItem = this.findNextItem(listItem);
-                if (nextItem) {
-                    nextItem.focus();
-                }
-                
-                event.originalEvent.preventDefault();
-            break;
-            
-            //up
-            case 38:
-                var prevItem = this.findPrevItem(listItem);
-                if (prevItem) {
-                    prevItem.focus();
-                }
-                
-                event.originalEvent.preventDefault();
-            break;
-            
-            //enter
-            case 13:
-                this.onItemClick(event);
-                event.originalEvent.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return !DomHandler.hasClass(nextItem, 'p-orderlist-item') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-        
-        if (prevItem)
-            return !DomHandler.hasClass(prevItem, 'p-orderlist-item') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    } 
-
-    onReorder(event) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                event: event.originalEvent,
-                value: event.value
-            });
-        }
-
-        this.reorderDirection = event.direction;
-    }
-
-    componentDidUpdate() {
-        if(this.reorderDirection) {
-            this.updateListScroll();
-            this.reorderDirection = null;
-        }
-    }
-
-    updateListScroll() {
-        let listItems = DomHandler.find(this.subList.listElement, '.p-orderlist-item.p-highlight');
-
-        if(listItems && listItems.length) {
-            switch(this.reorderDirection) {
-                case 'up':
-                    DomHandler.scrollInView(this.subList.listElement, listItems[0]);
-                break;
-                
-                case 'top':
-                    this.subList.listElement.scrollTop = 0;
-                break;
-                
-                case 'down':
-                    DomHandler.scrollInView(this.subList.listElement, listItems[listItems.length - 1]);
-                break;
-                
-                case 'bottom':
-                    this.subList.listElement.scrollTop = this.subList.listElement.scrollHeight;
-                break;
-                
-                default:
-                break;
-            }
-        }
-    }
-
-    render() {
-        let className = classNames('p-orderlist p-component', this.props.className, {
-            'p-orderlist-responsive': this.props.responsive
-        });
-
-        return (
-            <div ref={(el) => this.element = el} id={this.props.id} className={className} style={this.props.style}>
-                <OrderListControls value={this.props.value} selection={this.state.selection} onReorder={this.onReorder} />
-                <OrderListSubList ref={(el) => this.subList = el} value={this.props.value} selection={this.state.selection} onItemClick={this.onItemClick} onItemKeyDown={this.onItemKeyDown} 
-                            itemTemplate={this.props.itemTemplate} header={this.props.header} listStyle={this.props.listStyle}
-                            dragdrop={this.props.dragdrop} onDragStart={this.onDragStart} onDragEnter={this.onDragEnter} onDragEnd={this.onDragEnd} onDragLeave={this.onDragEnter} onDrop={this.onDrop}
-                            onChange={this.props.onChange} tabIndex={this.props.tabIndex} />
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/orderlist/OrderListControls.js b/src/components/orderlist/OrderListControls.js
deleted file mode 100644
index 3594592fe1..0000000000
--- a/src/components/orderlist/OrderListControls.js
+++ /dev/null
@@ -1,150 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import { Button } from '../button/Button';
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class OrderListControls extends Component {
-    
-    static defaultProps = {
-        value: null,
-        selection: null,
-        onReorder: null
-    }
-
-    static propTypes = {
-        value: PropTypes.array,
-        selection: PropTypes.array,
-        onReorder: PropTypes.func
-    }
-    
-    constructor() {
-        super();
-        this.moveUp = this.moveUp.bind(this);
-        this.moveTop = this.moveTop.bind(this);
-        this.moveDown = this.moveDown.bind(this);
-        this.moveBottom = this.moveBottom.bind(this);
-    }
-
-    moveUp(event) {
-        if(this.props.selection) {
-            let value = [...this.props.value];
-            
-            for (let i = 0; i < this.props.selection.length; i++) {
-                let selectedItem = this.props.selection[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                if(selectedItemIndex !== 0) {
-                    let movedItem = value[selectedItemIndex];
-                    let temp = value[selectedItemIndex - 1];
-                    value[selectedItemIndex - 1] = movedItem;
-                    value[selectedItemIndex] = temp;
-                }
-                else {
-                    break;
-                }
-            }
-                        
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: value,
-                    direction: 'up'
-                })
-            }
-        }
-    }
-
-    moveTop(event) {
-        if(this.props.selection) {
-            let value = [...this.props.value];
-            
-            for (let i = 0; i < this.props.selection.length; i++) {
-                let selectedItem = this.props.selection[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                if (selectedItemIndex !== 0) {
-                    let movedItem = value.splice(selectedItemIndex, 1)[0];
-                    value.unshift(movedItem);
-                }
-                else {
-                    break;
-                }
-            }
-
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: value,
-                    direction: 'top'
-                })
-            }
-        }
-    }
-
-    moveDown(event) {
-        if(this.props.selection) {
-            let value = [...this.props.value];
-            
-            for (let i = this.props.selection.length - 1; i >= 0; i--) {
-                let selectedItem = this.props.selection[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                if (selectedItemIndex !== (value.length - 1)) {
-                    let movedItem = value[selectedItemIndex];
-                    let temp = value[selectedItemIndex + 1];
-                    value[selectedItemIndex + 1] = movedItem;
-                    value[selectedItemIndex] = temp;
-                }
-                else {
-                    break;
-                }
-            }
-            
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: value,
-                    direction: 'down'
-                })
-            }
-        }
-    }
-
-    moveBottom(event) {        
-        if(this.props.selection) {
-            let value = [...this.props.value];
-            
-            for (let i = this.props.selection.length - 1; i >= 0; i--) {
-                let selectedItem = this.props.selection[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                if (selectedItemIndex !== (value.length - 1)) {
-                    let movedItem = value.splice(selectedItemIndex, 1)[0];
-                    value.push(movedItem);
-                }
-                else {
-                    break;
-                }
-            }
-
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: value,
-                    direction: 'bottom'
-                })
-            }
-        }
-    }
-        
-    render() {        
-        return (
-            <div className="p-orderlist-controls">
-                <Button type="button" icon="pi pi-angle-up" onClick={this.moveUp}></Button>
-                <Button type="button" icon="pi pi-angle-double-up" onClick={this.moveTop}></Button>
-                <Button type="button" icon="pi pi-angle-down" onClick={this.moveDown}></Button>
-                <Button type="button" icon="pi pi-angle-double-down" onClick={this.moveBottom}></Button>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/orderlist/OrderListSubList.js b/src/components/orderlist/OrderListSubList.js
deleted file mode 100644
index 9961c4b378..0000000000
--- a/src/components/orderlist/OrderListSubList.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-
-export class OrderListSubList extends Component {
-
-    static defaultProps = {
-        value: null,
-        selection: null,
-        header: null,
-        listStyle: null,
-        itemTemplate: null,
-        dragdrop: false,
-        tabIndex: null,
-        onItemClick: null,
-        onItemKeyDown: null,
-        onChange: null
-    }
-
-    static propTypes = {
-        value: PropTypes.array,
-        selection: PropTypes.array,
-        header: PropTypes.string,
-        listStyle: PropTypes.object,
-        itemTemplate: PropTypes.func,
-        dragdrop: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        onItemClick: PropTypes.func,
-        onItemKeyDown: PropTypes.func,
-        onChange: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.onDragEnd = this.onDragEnd.bind(this);
-        this.onDragLeave = this.onDragLeave.bind(this);
-        this.onDrop = this.onDrop.bind(this);
-        this.onListMouseMove = this.onListMouseMove.bind(this);
-    }
-
-    isSelected(item) {
-        return ObjectUtils.findIndexInList(item, this.props.selection) !== -1;
-    }
-
-    onDragStart(event, index) {
-        this.dragging = true;
-        this.draggedItemIndex = index;
-        if(this.props.dragdropScope) {
-            event.dataTransfer.setData('text', 'orderlist');
-        }
-    }
-
-    onDragOver(event, index) {
-        if(this.draggedItemIndex !== index && this.draggedItemIndex + 1 !== index) {
-            this.dragOverItemIndex = index;
-            DomHandler.addClass(event.target, 'p-orderlist-droppoint-highlight');
-            event.preventDefault();
-        }
-    }
-
-    onDragLeave(event) {
-        this.dragOverItemIndex = null;
-        DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
-    }
-
-    onDrop(event) {
-        let dropIndex = (this.draggedItemIndex > this.dragOverItemIndex) ? this.dragOverItemIndex : (this.dragOverItemIndex === 0) ? 0 : this.dragOverItemIndex - 1;
-        let value = [...this.props.value];
-        ObjectUtils.reorderArray(value, this.draggedItemIndex, dropIndex);
-        this.dragOverItemIndex = null;
-        DomHandler.removeClass(event.target, 'p-orderlist-droppoint-highlight');
-
-        if(this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: value
-            })
-        }
-    }
-
-    onDragEnd(event) {
-        this.dragging = false;
-    }
-
-    onListMouseMove(event) {
-        if(this.dragging) {
-            let offsetY = this.listElement.getBoundingClientRect().top + DomHandler.getWindowScrollTop();
-            let bottomDiff = (offsetY + this.listElement.clientHeight) - event.pageY;
-            let topDiff = (event.pageY - offsetY);
-
-            if(bottomDiff < 25 && bottomDiff > 0)
-                this.listElement.scrollTop += 15;
-            else if(topDiff < 25 && topDiff > 0)
-                this.listElement.scrollTop -= 15;
-        }
-    }
-
-    renderDropPoint(index, key) {
-        return (
-            <li key={key} className="p-orderlist-droppoint"
-                            onDragOver={(e) => this.onDragOver(e, index + 1)} onDragLeave={this.onDragLeave} onDrop={this.onDrop}></li>
-        );
-    }
-
-    render() {
-        let header = null;
-        let items = null;
-
-        if (this.props.header) {
-            header = <div className="p-orderlist-caption">{this.props.header}</div>
-        }
-
-        if (this.props.value) {
-            items = this.props.value.map((item, i) => {
-                let content = this.props.itemTemplate ? this.props.itemTemplate(item) : item;
-                let itemClassName = classNames('p-orderlist-item', this.props.className, {'p-highlight': this.isSelected(item)});
-                let key = JSON.stringify(item);
-
-                if(this.props.dragdrop) {
-                    let items = [
-                        this.renderDropPoint(i, key + '_droppoint'),
-                        <li key={key} className={itemClassName} onClick={(e) => this.props.onItemClick({originalEvent: e, value: item, index: i})}
-                            onKeyDown={(e) => this.props.onItemKeyDown({originalEvent: e, value: item, index: i})} role="option" aria-selected={this.isSelected(item)}
-                            draggable="true" onDragStart={(e) => this.onDragStart(e, i)} onDragEnd={this.onDragEnd} tabIndex={this.props.tabIndex}>{content}</li>
-                    ];
-
-                    if(i === this.props.value.length - 1) {
-                        items.push(this.renderDropPoint(item, i, key + '_droppoint_end'));
-                    }
-
-                    return items;
-                }
-                else {
-                    return (
-                        <li key={JSON.stringify(item)} className={itemClassName} role="option" aria-selected={this.isSelected(item)}
-                            onClick={(e) => this.props.onItemClick({originalEvent: e, value: item, index: i})}
-                            onKeyDown={(e) => this.props.onItemKeyDown({originalEvent: e, value: item, index: i})}
-                            tabIndex={this.props.tabIndex}>{content}</li>
-                    );
-                }
-            });
-        }
-
-        return (
-            <div className="p-orderlist-list-container">
-                {header}
-                <ul ref={(el) => this.listElement = el} className="p-orderlist-list" style={this.props.listStyle} onDragOver={this.onListMouseMove} role="listbox" aria-multiselectable={true}>
-                    {items}
-                </ul>
-            </div>
-        );
-    }
-}
diff --git a/src/components/organizationchart/OrganizationChart.css b/src/components/organizationchart/OrganizationChart.css
deleted file mode 100644
index 5c661651ff..0000000000
--- a/src/components/organizationchart/OrganizationChart.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.p-organizationchart .p-organizationchart-table {
-    border-spacing: 0;
-    border-collapse: separate;
-    margin: 0 auto;
-}
-
-.p-organizationchart .p-organizationchart-table > tbody > tr > td {
-    text-align: center;
-    vertical-align: top;
-    padding: 0;
-    padding: 0 .75em;
-}
-
-.p-organizationchart .p-organizationchart-node-content {
-    padding: .5em .75em;
-    display: inline-block;
-    position: relative;
-}
-
-.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
-    position: absolute;
-    bottom: -9px;
-    margin-left: -8px;
-    z-index: 2;
-    left: 50%;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-}
-
-.p-organizationchart .p-organizationchart-line-down {
-    margin: 0 auto;
-    height: 20px;
-    width: 1px;
-    float: none;
-}
-
-.p-organizationchart .p-organizationchart-line-right {
-    float: none;
-    border-radius: 0px;
-}
-
-.p-organizationchart .p-organizationchart-line-left {
-    float: none;
-    border-radius: 0;
-}
-
-.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node {
-    cursor: pointer;
-}
\ No newline at end of file
diff --git a/src/components/organizationchart/OrganizationChart.d.ts b/src/components/organizationchart/OrganizationChart.d.ts
deleted file mode 100644
index 75387aada9..0000000000
--- a/src/components/organizationchart/OrganizationChart.d.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as React from 'react';
-
-export interface OrganizationChartNodeData {
-    className?: string,
-    expanded?: boolean,
-    children?: OrganizationChartNodeData[]
-    selectable?: boolean
-    label?: string,
-}
-
-interface OrganizationChartProps {
-    id?: string;
-    value?: OrganizationChartNodeData[];
-    style?: object;
-    className?: string;
-    selectionMode?: string;
-    selection?: any;
-    nodeTemplate?(node: OrganizationChartNodeData): React.ReactNode;
-    selectionChange?(data: any): void;
-    onNodeSelect?(e: { originalEvent: Event, node: any }): void;
-    onNodeUnselect?(e: { originalEvent: Event, node: any }): void;
-}
-
-export class OrganizationChart extends React.Component<OrganizationChartProps, any> {
-}
diff --git a/src/components/organizationchart/OrganizationChart.js b/src/components/organizationchart/OrganizationChart.js
deleted file mode 100644
index d519c72bdf..0000000000
--- a/src/components/organizationchart/OrganizationChart.js
+++ /dev/null
@@ -1,246 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class OrganizationChartNode extends Component {
-
-    static defaultProps = {
-        node: null,
-        nodeTemplate: null,
-        root: false,
-        first: false,
-        last: false,
-        selectionMode: null,
-        onNodeClick: null,
-        isSelected: null
-    }
-
-    static propTypes = {
-        node: PropTypes.any,
-        nodeTemplate: PropTypes.any,
-        root: PropTypes.bool,
-        first: PropTypes.bool,
-        last: PropTypes.bool,
-        selectionMode: PropTypes.string,
-        onNodeClick: PropTypes.func,
-        isSelected: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.node = this.props.node;
-        this.state = {expanded: this.node.expanded};
-    }
-
-    getLeaf() {
-        return this.node.leaf === false ? false : !(this.node.children&&this.node.children.length);
-    }
-
-    getColspan() {
-        return (this.node.children && this.node.children.length) ? this.node.children.length * 2: null;
-    }
-
-    onNodeClick(event, node) {
-        this.props.onNodeClick(event, node)
-    }
-
-    toggleNode(event, node) {
-        let _expanded = !this.state.expanded;
-        this.setState({expanded: _expanded});
-        event.preventDefault();
-    }
-
-    isSelected() {
-        return this.props.isSelected(this.node);
-    }
-
-    render() {
-        this.node = this.props.node;
-
-        var colspan = this.getColspan();
-        let nodeStyleClass = classNames('p-organizationchart-node-content', this.node.className, {
-                'p-organizationchart-selectable-node': this.props.selectionMode && this.node.selectable !== false,
-                'p-highlight': this.isSelected()
-            }),
-            nodeLabel = (this.props.nodeTemplate && this.props.nodeTemplate(this.node)) ? <div>{this.props.nodeTemplate(this.node)}</div> : <div>{this.node.label}</div>,
-            toggleIcon = classNames('p-node-toggler-icon', {'pi pi-chevron-down': this.state.expanded, 'pi pi-chevron-up': !this.state.expanded}),
-            nodeContent = (<tr>
-                <td colSpan={colspan}>
-                    <div className={nodeStyleClass} onClick={(e) => this.onNodeClick(e,this.node)}>
-                        {nodeLabel}
-                        {
-                            !this.getLeaf() && <button type="button" className="p-node-toggler p-link" onClick={(e) => this.toggleNode(e, this.node)}>
-                                <i className={toggleIcon}></i>
-                            </button>
-                        }
-                    </div>
-                </td>
-            </tr>);
-
-        let _visibility = (!this.getLeaf() && this.state.expanded) ? 'inherit' : 'hidden',
-            linesDown = (<tr style={{visibility: _visibility}} className="p-organizationchart-lines">
-                <td colSpan={colspan}>
-                    <div className="p-organizationchart-line-down"></div>
-                </td>
-            </tr>),
-            nodeChildLength = this.node.children && this.node.children.length,
-            linesMiddle = (<tr style={{visibility: _visibility}} className="p-organizationchart-lines">
-                {
-                    this.node.children && this.node.children.map((item, index) => {
-                        let leftClass = classNames('p-organizationchart-line-left', {'p-organizationchart-line-top': index !== 0}),
-                        rightClass = classNames('p-organizationchart-line-right', {'p-organizationchart-line-top': index !== nodeChildLength - 1});
-
-                        return [<td key={index + '_lineleft'} className={leftClass}>&nbsp;</td>, <td key={index + '_lineright'} className={rightClass}>&nbsp;</td>];
-                    })
-                }
-            </tr>),
-            childNodes = (<tr style={{visibility: _visibility}} className="p-organizationchart-nodes">
-                    {
-                        this.node.children && this.node.children.map((child, index) => {
-                            return (<td key={index} colSpan="2">
-                                    <OrganizationChartNode node={child} nodeTemplate={this.props.nodeTemplate} selectionMode={this.props.selectionMode}
-                                        onNodeClick={this.props.onNodeClick} isSelected={this.props.isSelected}/>
-                                </td>)
-                        })
-                    }
-            </tr>);
-
-
-        return (
-            <table className="p-organizationchart-table">
-                <tbody>
-                    {nodeContent}
-                    {linesDown}
-                    {linesMiddle}
-                    {childNodes}
-                </tbody>
-            </table>
-        );
-    }
-
-}
-
-export class OrganizationChart extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        style: null,
-        className: null,
-        selectionMode: null,
-        selection: null,
-        nodeTemplate: null,
-        onSelectionChange: null,
-        onNodeSelect: null,
-        onNodeUnselect: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        selectionMode: PropTypes.string,
-        selection: PropTypes.any,
-        nodeTemplate: PropTypes.any,
-        onSelectionChange: PropTypes.func,
-        onNodeSelect: PropTypes.func,
-        onNodeUnselect: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.root = this.props.value && this.props.value.length ? this.props.value[0] : null;
-        this.onNodeClick = this.onNodeClick.bind(this);
-        this.isSelected = this.isSelected.bind(this);
-    }
-
-    onNodeClick(event, node) {
-        if (this.props.selectionMode) {
-            let eventTarget = (event.target);
-            if (eventTarget.className && (eventTarget.className.indexOf('p-node-toggler') !== -1 || eventTarget.className.indexOf('p-node-toggler-icon') !== -1)) {
-                return;
-            }
-
-            if (node.selectable === false) {
-                return;
-            }
-
-            let index = this.findIndexInSelection(node);
-            let selected = (index >= 0);
-            let selection;
-
-            if (this.props.selectionMode === 'single') {
-                if (selected) {
-                    selection = null;
-                    if (this.props.onNodeUnselect) {
-                        this.props.onNodeUnselect({originalEvent: event, node: node});
-                    }
-                }
-                else {
-                    selection = node;
-                    if (this.props.onNodeSelect) {
-                        this.props.onNodeSelect({originalEvent: event, node: node});
-                    }
-                }
-            }
-            else if (this.props.selectionMode === 'multiple') {
-                if (selected) {
-                    selection = this.props.selection.filter((val,i) => i !== index);
-                    if (this.props.onNodeUnselect) {
-                        this.props.onNodeUnselect({originalEvent: event, node: node});
-                    }
-                }
-                else {
-                    selection = [...this.props.selection||[], node];
-                    if(this.props.onNodeSelect) {
-                        this.props.onNodeSelect({originalEvent: event, node: node});
-                    }
-                }
-            }
-
-            if (this.props.onSelectionChange) {
-                this.props.onSelectionChange({
-                    originalEvent: event,
-                    data: selection
-                });
-            }
-        }
-    }
-
-    findIndexInSelection(node) {
-        let index = -1;
-
-        if(this.props.selectionMode && this.props.selection) {
-            if(this.props.selectionMode === 'single') {
-                index = (this.props.selection === node) ? 0 : - 1;
-            }
-            else if(this.props.selectionMode === 'multiple') {
-                for(let i = 0; i  < this.props.selection.length; i++) {
-                    if(this.props.selection[i] === node) {
-                        index = i;
-                        break;
-                    }
-                }
-            }
-        }
-
-        return index;
-    }
-
-    isSelected(node) {
-        return this.findIndexInSelection(node) !== -1;
-    }
-
-    render() {
-        this.root = this.props.value && this.props.value.length ? this.props.value[0] : null;
-
-        var className = classNames('p-organizationchart p-component', this.props.className);
-        return (
-            <div id={this.props.id} style={this.props.style} className={className}>
-                <OrganizationChartNode node={this.root} nodeTemplate={this.props.nodeTemplate} selectionMode={this.props.selectionMode}
-                        onNodeClick={this.onNodeClick} isSelected={this.isSelected}/>
-            </div>
-        );
-    }
-}
diff --git a/src/components/overlaypanel/OverlayPanel.css b/src/components/overlaypanel/OverlayPanel.css
deleted file mode 100644
index 9631cc8e04..0000000000
--- a/src/components/overlaypanel/OverlayPanel.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.p-overlaypanel {
-    padding: 0;
-    margin: 0;
-    position: absolute;
-    display: none;
-    margin-top: 10px;
-}
-
-.p-overlaypanel-flipped {
-    margin-top: 0;
-    margin-bottom: 10px;
-}
-
-.p-overlaypanel-content {
-    padding: 0.5em 1em;
-}
-
-.p-overlaypanel-close {
-    position: absolute;
-    top: -1em;
-    right: -1em;
-    width: 2em;
-    height: 2em;
-    line-height: 2em;
-    text-align: center;
-    -moz-border-radius: 100%;
-    -webkit-border-radius: 100%;
-    border-radius: 100%;
-}
-
-.p-overlaypanel-close-icon {
-    line-height: inherit;
-}
-
-.p-overlaypanel:after, .p-overlaypanel:before {
-	bottom: 100%;
-	left: 1.25em;
-	border: solid transparent;
-	content: " ";
-	height: 0;
-	width: 0;
-	position: absolute;
-	pointer-events: none;
-}
-
-.p-overlaypanel:after {
-	border-width: 8px;
-	margin-left: -8px;
-}
-
-.p-overlaypanel:before {
-	border-width: 10px;
-	margin-left: -10px;
-}
-
-.p-overlaypanel-flipped:after, .p-overlaypanel-flipped:before {
-    bottom: auto;
-    top: 100%;
-}
-
-.p-overlaypanel.p-overlaypanel-flipped:after {
-    border-bottom-color: transparent;
-}
-
-.p-overlaypanel.p-overlaypanel-flipped:before {
-    border-bottom-color: transparent
-}
\ No newline at end of file
diff --git a/src/components/overlaypanel/OverlayPanel.d.ts b/src/components/overlaypanel/OverlayPanel.d.ts
deleted file mode 100644
index c48b144468..0000000000
--- a/src/components/overlaypanel/OverlayPanel.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react';
-import {SyntheticEvent} from "react";
-
-interface OverlayPanelProps {
-    id?: string;
-    dismissable?: boolean;
-    showCloseIcon?: boolean;
-    style?: object;
-    className?: string;
-    appendTo?: any;
-    ariaCloseLabel?: string;
-    onHide?(): void;
-}
-
-export class OverlayPanel extends React.Component<OverlayPanelProps,any> {
-    public toggle(event:SyntheticEvent):void;
-    public show(event:SyntheticEvent,target:EventTarget):void;
-    public hide():void;
-}
diff --git a/src/components/overlaypanel/OverlayPanel.js b/src/components/overlaypanel/OverlayPanel.js
deleted file mode 100644
index 50d5245a74..0000000000
--- a/src/components/overlaypanel/OverlayPanel.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class OverlayPanel extends Component {
-
-    static defaultProps = {
-        id: null,
-        dismissable: true,
-        showCloseIcon: false,
-        style: null,
-        className: null,
-        appendTo: null,
-        ariaCloseLabel: 'close',
-        onHide: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        dismissable: PropTypes.bool,
-        showCloseIcon: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        appendTo: PropTypes.any,
-        ariaCloseLabel: PropTypes.string,
-        onHide: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.onCloseClick = this.onCloseClick.bind(this);
-    }
-
-    bindDocumentClickListener() {
-        if(!this.documentClickListener && this.props.dismissable) {
-            this.documentClickListener = (event) => {
-                if(this.isOutsideClicked(event)) {
-                    this.hide();
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if(this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    isOutsideClicked(event) {
-        return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target));
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-    }
-
-    onCloseClick(event) {
-        this.hide();
-
-        event.preventDefault();
-    }
-
-    toggle(event, target) {
-        if (this.isVisible()) {
-            this.hide();
-
-            if (this.hasTargetChanged(event, target)) {
-                this.target = target||event.currentTarget||event.target;
-
-                setTimeout(() => {
-                    this.show(event, this.target);
-                }, 200);
-            }
-        }
-        else {
-            this.show(event, target);
-        }
-    }
-
-    show(event, target) {
-        this.target = target||event.currentTarget||event.target;
-
-        this.bindDocumentClickListener();
-
-        this.container.style.zIndex = String(DomHandler.generateZIndex());
-
-        if(this.isVisible()) {
-            this.align();
-        }
-        else {
-            this.container.style.display = 'block';
-            this.align();
-            DomHandler.fadeIn(this.container, 250);
-        }
-    }
-
-    align() {
-        if (this.target) {
-            DomHandler.absolutePosition(this.container, this.target);
-
-            if (DomHandler.getOffset(this.container).top < DomHandler.getOffset(this.target).top) {
-                DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
-            }
-        }
-    }
-
-    hide() {
-        if (this.isVisible()) {
-            this.container.style.display = 'none';
-            DomHandler.removeClass(this.container, 'p-overlaypanel-flipped');
-            this.unbindDocumentClickListener();
-
-            if (this.props.onHide) {
-                this.props.onHide();
-            }
-        }
-    }
-
-    isVisible() {
-        return this.container && this.container.offsetParent;
-    }
-
-    hasTargetChanged(event, target) {
-        return this.target != null && this.target !== (target||event.currentTarget||event.target);
-    }
-
-    renderCloseIcon() {
-        if(this.props.showCloseIcon) {
-            return (
-                <button type="button" className="p-overlaypanel-close p-link" onClick={this.onCloseClick} aria-label={this.props.ariaCloseLabel}>
-                    <span className="p-overlaypanel-close-icon pi pi-times"></span>
-                </button>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderElement() {
-        let className = classNames('p-overlaypanel p-component', this.props.className);
-        let closeIcon = this.renderCloseIcon();
-
-        return (
-            <div ref={el => this.container = el} id={this.props.id} className={className} style={this.props.style}>
-                <div className="p-overlaypanel-content">
-                    {this.props.children}
-                </div>
-                {closeIcon}
-            </div>
-        );
-    }
-
-    render() {
-        let element = this.renderElement();
-
-        if (this.props.appendTo) {
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        }
-        else {
-            return element;
-        }
-    }
-}
diff --git a/src/components/paginator/CurrentPageReport.js b/src/components/paginator/CurrentPageReport.js
deleted file mode 100644
index 5e86f813d5..0000000000
--- a/src/components/paginator/CurrentPageReport.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-export class CurrentPageReport extends Component {
-
-    static defaultProps = {
-        pageCount: null,
-        page: null,
-        first: null,
-        rows: null,
-        totalRecords: null,
-        template: '({currentPage} of {totalPages})'
-    }
-
-    static propTypes = {
-        pageCount: PropTypes.number,
-        page: PropTypes.number,
-        first: PropTypes.number,
-        rows: PropTypes.number,
-        totalRecords: PropTypes.number,
-        template: PropTypes.string
-    }
-
-    render() {
-        let text = this.props.template
-            .replace("{currentPage}", this.props.page + 1)
-            .replace("{totalPages}", this.props.pageCount)
-            .replace("{first}", this.props.first + 1)
-            .replace("{last}", Math.min(this.props.first + this.props.rows, this.props.totalRecords))
-            .replace("{rows}", this.props.rows)
-            .replace("{totalRecords}", this.props.totalRecords);
-
-        return <span className="p-paginator-current">{text}</span>
-    }
-}
diff --git a/src/components/paginator/FirstPageLink.js b/src/components/paginator/FirstPageLink.js
deleted file mode 100644
index 159717c5af..0000000000
--- a/src/components/paginator/FirstPageLink.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class FirstPageLink extends Component {
-
-    static defaultProps = {
-        disabled: false,
-        onClick: null
-    }
-
-    static propTypes = {
-        disabled: PropTypes.bool,
-        onClick: PropTypes.func
-    }
-
-    render() {
-        let className = classNames('p-paginator-first p-paginator-element p-link', {'p-disabled': this.props.disabled});
-
-        return (
-            <button type="button" className={className} onClick={this.props.onClick} disabled={this.props.disabled}>
-                <span className="p-paginator-icon pi pi-step-backward"></span>
-            </button>
-        );
-    }
-}
diff --git a/src/components/paginator/LastPageLink.js b/src/components/paginator/LastPageLink.js
deleted file mode 100644
index fccccefd2e..0000000000
--- a/src/components/paginator/LastPageLink.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class LastPageLink extends Component {
-
-    static defaultProps = {
-        disabled: false,
-        onClick: null
-    }
-
-    static propTypes = {
-        disabled: PropTypes.bool,
-        onClick: PropTypes.func
-    }
-
-    render() {
-        let className = classNames('p-paginator-last p-paginator-element p-link', {'p-disabled': this.props.disabled});
-
-        return (
-            <button type="button" className={className} onClick={this.props.onClick} disabled={this.props.disabled}>
-                <span className="p-paginator-icon pi pi-step-forward"></span>
-            </button>
-        );
-    }
-}
diff --git a/src/components/paginator/NextPageLink.d.ts b/src/components/paginator/NextPageLink.d.ts
deleted file mode 100644
index 1b32b28a75..0000000000
--- a/src/components/paginator/NextPageLink.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-interface NextPageLinkProps {
-    disabled?: boolean;
-    onClick?(): void;
-}
-
-export class NextPageLink extends React.Component<NextPageLinkProps,any> {}
\ No newline at end of file
diff --git a/src/components/paginator/NextPageLink.js b/src/components/paginator/NextPageLink.js
deleted file mode 100644
index 58fce1f428..0000000000
--- a/src/components/paginator/NextPageLink.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class NextPageLink extends Component {
-
-    static defaultProps = {
-        disabled: false,
-        onClick: null
-    }
-
-    static propTypes = {
-        disabled: PropTypes.bool,
-        onClick: PropTypes.func
-    }
-
-    render() {
-        let className = classNames('p-paginator-next p-paginator-element p-link', {'p-disabled': this.props.disabled});
-
-        return (
-            <button type="button" className={className} onClick={this.props.onClick} disabled={this.props.disabled}>
-                <span className="p-paginator-icon pi pi-caret-right"></span>
-            </button>
-        );
-    }
-}
diff --git a/src/components/paginator/PageLinks.js b/src/components/paginator/PageLinks.js
deleted file mode 100644
index 92e48c85c0..0000000000
--- a/src/components/paginator/PageLinks.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class PageLinks extends Component {
-
-    static defaultProps = {
-        value: null,
-        page: null,
-        links: null
-    }
-
-    static propTypes = {
-        value: PropTypes.array,
-        page: PropTypes.number,
-        onClick: PropTypes.func
-    }
-
-    onPageLinkClick(event, pageLink) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                value: pageLink
-            });
-        }
-
-        event.preventDefault();
-    }
-
-    render() {
-        let elements = this.props.value.map((pageLink, i) => {
-            let pageClassName = classNames('p-paginator-page p-paginator-element p-link', {
-                'p-highlight': ((pageLink - 1) === this.props.page)
-            });
-
-            return (
-                <button type="button" key={pageLink} className={pageClassName} onClick={(e) => this.onPageLinkClick(e, pageLink)}>{pageLink}</button>
-            );
-        });
-
-        return <span className="p-paginator-pages">{elements}</span>;
-    }
-}
diff --git a/src/components/paginator/Paginator.css b/src/components/paginator/Paginator.css
deleted file mode 100644
index c45f0d814e..0000000000
--- a/src/components/paginator/Paginator.css
+++ /dev/null
@@ -1,99 +0,0 @@
-.p-paginator {
-    margin: 0;
-    text-align: center;
-    padding: .125em;
-}
-
-.p-paginator .p-paginator-top {
-    border-bottom: 0 none;
-}
-
-.p-paginator .p-paginator-bottom {
-    border-top:0 none;
-}
-
-.p-paginator .p-paginator-left-content {
-    float: left;
-}
-
-.p-paginator .p-paginator-right-content {
-    float: right;
-}
-
-.p-paginator .p-paginator-page,
-.p-paginator .p-paginator-pages,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last,
-.p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev,
-.p-paginator .p-paginator-current {
-    display: inline-block;
-    width: 1.5em;
-    height: 1.5em;
-    line-height: 1.5em;
-	zoom: 1;
-	margin-left: .063em;
-	margin-right: .063em;
-	text-decoration: none;
-    vertical-align: middle;
-    text-align: center;
-    position: relative;
-}
-
-.p-paginator .p-paginator-pages {
-    width: auto;
-    line-height: 1;
-}
-
-.p-paginator .p-paginator-icon {
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 1em;
-    height: 1em;
-    margin-top: -.5em;
-    margin-left: -.5em;
-}
-
-.p-paginator .p-paginator-page,
-.p-paginator .p-paginator-next,
-.p-paginator .p-paginator-last,
-.p-paginator .p-paginator-first,
-.p-paginator .p-paginator-prev{
-    cursor: pointer;
-}
-
-.p-paginator .p-paginator-current,
-.p-paginator .p-paginator-rpp-options {
-	margin-left: 1em;
-	margin-right: 1em;
-    background-image: none;
-}
-
-.p-paginator .p-paginator-jtp-select option,
-.p-paginator .p-paginator-rpp-options option {
-    background-image: none;
-    border: 0 none;
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-}
-
-.p-paginator a.p-disabled {
-    outline: 0 none;
-}
-
-.p-paginator .p-dropdown {
-    min-width: 4em;
-    margin-left: .375em;
-}
-
-.p-fluid .p-paginator .p-dropdown {
-    width: auto;
-}
-
-.p-paginator .p-paginator-current {
-    width: auto;
-    height: auto;
-}
\ No newline at end of file
diff --git a/src/components/paginator/Paginator.d.ts b/src/components/paginator/Paginator.d.ts
deleted file mode 100644
index 57ab8fa5fd..0000000000
--- a/src/components/paginator/Paginator.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-export interface PageState{
-    first: number,
-    rows: number,
-    page: number,
-    pageCount: number
-}
-
-interface PaginatorProps {
-    totalRecords?: number;
-    rows?: number;
-    first?: number;
-    pageLinkSize?: number;
-    rowsPerPageOptions?: any[];
-    alwaysShow?: boolean;
-    style?: object;
-    className?: string;
-    template?: string;
-    leftContent?: JSX.Element | undefined;
-    rightContent?: JSX.Element | undefined;
-    currentPageReportTemplate?: string;
-    onPageChange?(event: PageState): void;
-}
-
-export class Paginator extends React.Component<PaginatorProps,any> {}
diff --git a/src/components/paginator/Paginator.js b/src/components/paginator/Paginator.js
deleted file mode 100644
index d37e8f3fab..0000000000
--- a/src/components/paginator/Paginator.js
+++ /dev/null
@@ -1,214 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {FirstPageLink} from './FirstPageLink';
-import {NextPageLink} from './NextPageLink';
-import {PrevPageLink} from './PrevPageLink';
-import {LastPageLink} from './LastPageLink';
-import {PageLinks} from './PageLinks';
-import {RowsPerPageDropdown} from './RowsPerPageDropdown';
-import {CurrentPageReport} from './CurrentPageReport';
-
-export class Paginator extends Component {
-
-    static defaultProps = {
-        totalRecords: 0,
-        rows: 0,
-        first: 0,
-        pageLinkSize: 5,
-        rowsPerPageOptions: null,
-        style: null,
-        className: null,
-        template: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
-        onPageChange: null,
-        leftContent: null,
-        rightContent: null,
-        currentPageReportTemplate: '({currentPage} of {totalPages})',
-        alwaysShow: true
-    }
-
-    static propTypes = {
-        totalRecords: PropTypes.number,
-        rows: PropTypes.number,
-        first: PropTypes.number,
-        pageLinkSize: PropTypes.number,
-        rowsPerPageOptions: PropTypes.array,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        template: PropTypes.string,
-        onPageChange: PropTypes.func,
-        leftContent: PropTypes.any,
-        rightContent: PropTypes.any,
-        currentPageReportTemplate: PropTypes.any,
-        alwaysShow: PropTypes.bool
-    }
-
-    constructor(props) {
-        super(props);
-        this.changePageToFirst = this.changePageToFirst.bind(this);
-        this.changePageToPrev = this.changePageToPrev.bind(this);
-        this.changePageToNext = this.changePageToNext.bind(this);
-        this.changePageToLast = this.changePageToLast.bind(this);
-        this.onRowsChange = this.onRowsChange.bind(this);
-        this.onPageLinkClick = this.onPageLinkClick.bind(this);
-    }
-
-    isFirstPage() {
-        return this.getPage() === 0;
-    }
-
-    isLastPage() {
-        return this.getPage() === this.getPageCount() - 1;
-    }
-
-    getPageCount() {
-        return Math.ceil(this.props.totalRecords / this.props.rows) || 1;
-    }
-
-    calculatePageLinkBoundaries() {
-        var numberOfPages = this.getPageCount();
-        var visiblePages = Math.min(this.props.pageLinkSize, numberOfPages);
-
-        //calculate range, keep current in middle if necessary
-        var start = Math.max(0, Math.ceil(this.getPage() - ((visiblePages) / 2)));
-        var end = Math.min(numberOfPages - 1, start + visiblePages - 1);
-
-        //check when approaching to last page
-        var delta = this.props.pageLinkSize - (end - start + 1);
-        start = Math.max(0, start - delta);
-
-        return [start, end];
-    }
-
-    updatePageLinks() {
-        var pageLinks = [];
-        var boundaries = this.calculatePageLinkBoundaries();
-        var start = boundaries[0];
-        var end = boundaries[1];
-
-        for(var i = start; i <= end; i++) {
-            pageLinks.push(i + 1);
-        }
-
-        return pageLinks;
-    }
-
-    changePage(first, rows) {
-        var pc = this.getPageCount();
-        var p = Math.floor(first / rows);
-
-        if(p >= 0 && p < pc) {
-            var newPageState = {
-                first: first,
-                rows: rows,
-                page: p,
-                pageCount: pc
-            };
-
-            if(this.props.onPageChange) {
-                this.props.onPageChange(newPageState);
-            }
-        }
-    }
-
-    getPage() {
-        return Math.floor(this.props.first / this.props.rows);
-    }
-
-    changePageToFirst(event) {
-        this.changePage(0, this.props.rows);
-        event.preventDefault();
-    }
-
-    changePageToPrev(event) {
-        this.changePage(this.props.first - this.props.rows, this.props.rows);
-        event.preventDefault();
-    }
-
-    onPageLinkClick(event) {
-        this.changePage((event.value - 1) * this.props.rows, this.props.rows);
-    }
-
-    changePageToNext(event) {
-        this.changePage(this.props.first + this.props.rows, this.props.rows);
-        event.preventDefault();
-    }
-
-    changePageToLast(event) {
-        this.changePage((this.getPageCount() - 1) * this.props.rows, this.props.rows);
-        event.preventDefault();
-    }
-
-    onRowsChange(event) {
-        this.changePage(0, event.value);
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (this.getPage() > 0 && prevProps.totalRecords !== this.props.totalRecords && this.props.first >= this.props.totalRecords) {
-            this.changePage((this.getPageCount() - 1) * this.props.rows, this.props.rows);
-        }
-    }
-
-    render() {
-        if (!this.props.alwaysShow && this.getPageCount() === 1) {
-            return null;
-        }
-        else {
-            let className = classNames('p-paginator p-component p-unselectable-text', this.props.className);
-
-            let paginatorElements = this.props.template.split(' ').map((value) => {
-                let key = value.trim();
-                let element;
-
-                switch(key) {
-                    case 'FirstPageLink':
-                        element = <FirstPageLink key={key} onClick={this.changePageToFirst} disabled={this.isFirstPage()} />;
-                    break;
-
-                    case 'PrevPageLink':
-                        element = <PrevPageLink key={key} onClick={this.changePageToPrev} disabled={this.isFirstPage()} />;
-                    break;
-
-                    case 'NextPageLink':
-                        element = <NextPageLink key={key} onClick={this.changePageToNext} disabled={this.isLastPage()} />;
-                    break;
-
-                    case 'LastPageLink':
-                        element = <LastPageLink key={key} onClick={this.changePageToLast} disabled={this.isLastPage()} />;
-                    break;
-
-                    case 'PageLinks':
-                        element = <PageLinks key={key} value={this.updatePageLinks()} page={this.getPage()} onClick={this.onPageLinkClick} />;
-                    break;
-
-                    case 'RowsPerPageDropdown':
-                        element = <RowsPerPageDropdown key={key} value={this.props.rows} options={this.props.rowsPerPageOptions} onChange={this.onRowsChange} />;
-                    break;
-
-                    case 'CurrentPageReport':
-                        element = <CurrentPageReport template={this.props.currentPageReportTemplate} key={key} 
-                                page={this.getPage()} pageCount={this.getPageCount()} first={this.props.first}
-                                rows={this.props.rows} totalRecords={this.props.totalRecords} />;
-                    break;
-
-                    default:
-                        element = null;
-                    break;
-                }
-
-                return element;
-            });
-
-            let leftContent = this.props.leftContent && <div className="p-paginator-left-content" >{this.props.leftContent}</div>;
-            let rightContent = this.props.rightContent && <div className="p-paginator-right-content" >{this.props.rightContent}</div>
-
-            return (
-                <div className={className} style={this.props.style}>
-                    {leftContent}
-                    {paginatorElements}
-                    {rightContent}
-                </div>
-            );
-        }
-    }
-}
diff --git a/src/components/paginator/PrevPageLink.js b/src/components/paginator/PrevPageLink.js
deleted file mode 100644
index 4ef66c7046..0000000000
--- a/src/components/paginator/PrevPageLink.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class PrevPageLink extends Component {
-
-    static defaultProps = {
-        disabled: false,
-        onClick: null
-    }
-
-    static propTypes = {
-        disabled: PropTypes.bool,
-        onClick: PropTypes.func
-    }
-
-    render() {
-        let className = classNames('p-paginator-prev p-paginator-element p-link', {'p-disabled': this.props.disabled});
-
-        return (
-            <button type="button" className={className} onClick={this.props.onClick} disabled={this.props.disabled}>
-                <span className="p-paginator-icon pi pi-caret-left"></span>
-            </button>
-        );
-    }
-}
diff --git a/src/components/paginator/RowsPerPageDropdown.js b/src/components/paginator/RowsPerPageDropdown.js
deleted file mode 100644
index 1980aa216e..0000000000
--- a/src/components/paginator/RowsPerPageDropdown.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {Dropdown} from '../dropdown/Dropdown';
-
-export class RowsPerPageDropdown extends Component {
-
-    static defaultProps = {
-        options: null,
-        value: null,
-        onChange: null
-    }
-
-    static propTypes = {
-        options: PropTypes.array,
-        value: PropTypes.number,
-        onChange: PropTypes.func
-    }
-    
-    render() {
-        if(this.props.options) {
-            let options = this.props.options.map((opt, i) => {
-                return {label: String(opt), value: opt};
-            });
-            
-            return (
-                <Dropdown value={this.props.value} options={options} onChange={this.props.onChange} />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/components/panel/Panel.css b/src/components/panel/Panel.css
deleted file mode 100644
index 0cfe8a2757..0000000000
--- a/src/components/panel/Panel.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.p-panel {
-	padding: 0.2em;
-}
-
-.p-panel .p-panel-titlebar {
-	padding: .5em .75em;
-}
-
-.p-panel .p-panel-titlebar-icon {
-	float: right;
-    cursor: pointer;
-    height: 1.25em;
-    width: 1.25em;
-    line-height: 1.25em;
-    text-align: center;
-}
-
-.p-panel .p-panel-titlebar-icon span {
-    line-height: inherit;
-    margin-top: -1px;
-}
-
-.p-panel .p-panel-content {
-	border: 0;
-    background: none;
-    padding: .5em .75em;
-}
-
-.p-panel .p-panel-footer {
-	border-width: 1px 0 0;
-	padding: .25em .5em;
-	text-align:left;
-}
\ No newline at end of file
diff --git a/src/components/panel/Panel.d.ts b/src/components/panel/Panel.d.ts
deleted file mode 100644
index 68820b27a5..0000000000
--- a/src/components/panel/Panel.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-interface PanelProps {
-    id?: string;
-    header?: any;
-    toggleable?: boolean;
-    style?: object;
-    className?: string;
-    collapsed?: boolean;
-    expandIcon?: string,
-    collapseIcon?: string,
-    onExpand?(event: Event): void;
-    onCollapse?(event: Event): void;
-    onToggle?(e: {event: Event, value: boolean}): void;
-}
-
-export class Panel extends React.Component<PanelProps,any> {}
\ No newline at end of file
diff --git a/src/components/panel/Panel.js b/src/components/panel/Panel.js
deleted file mode 100644
index 28ce995ef3..0000000000
--- a/src/components/panel/Panel.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-import { CSSTransition } from 'react-transition-group';
-
-export class Panel extends Component {
-
-    static defaultProps = {
-        id: null,
-        header: null,
-        toggleable: null,
-        style: null,
-        className: null,
-        collapsed: null,
-        expandIcon: 'pi pi-plus',
-        collapseIcon: 'pi pi-minus',
-        onExpand: null,
-        onCollapse: null,
-        onToggle: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        header: PropTypes.any,
-        toggleable: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        collapsed: PropTypes.bool,
-        expandIcon: PropTypes.string,
-        collapseIcon: PropTypes.string,
-        onExpand: PropTypes.func,
-        onCollapse: PropTypes.func,
-        onToggle: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        if (!this.props.onToggle) {
-            this.state = {
-                collapsed: this.props.collapsed
-            };
-        }
-
-        this.toggle = this.toggle.bind(this);
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    toggle(event) {
-        if (this.props.toggleable) {
-            const collapsed = this.props.onToggle ? this.props.collapsed : this.state.collapsed;
-
-            if(collapsed)
-                this.expand(event);
-            else
-                this.collapse(event);
-
-            if (this.props.onToggle) {
-                this.props.onToggle({
-                    originalEvent: event,
-                    value: !collapsed
-                });
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    expand(event) {
-        if (!this.props.onToggle) {
-            this.setState({collapsed: false});
-        }
-
-        if (this.props.onExpand) {
-            this.props.onExpand(event);
-        }
-    }
-
-    collapse(event) {
-        if (!this.props.onToggle) {
-            this.setState({collapsed: true});
-        }
-
-        if (this.props.onCollapse) {
-            this.props.onCollapse(event);
-        }
-    }
-
-    isCollapsed() {
-        return this.props.toggleable ? (this.props.onToggle ? this.props.collapsed : this.state.collapsed): false;
-    }
-
-    renderToggleIcon(collapsed) {
-        if (this.props.toggleable) {
-            const id = this.id + '_label';
-            const ariaControls = this.id + '_content';
-            const toggleIcon = collapsed ? this.props.expandIcon : this.props.collapseIcon;
-
-            return (
-                <a href={'#' + ariaControls} className="p-panel-titlebar-icon p-panel-titlebar-toggler" onClick={this.toggle}
-                    id={id} aria-controls={ariaControls} aria-expanded={!collapsed} role="tab">
-                   <span className={toggleIcon}></span>
-                </a>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderHeader(collapsed) {
-        if (this.props.header || this.props.toggleable) {
-            const toggleIcon = this.renderToggleIcon(collapsed);
-
-            return (
-                <div className="p-panel-titlebar">
-                    <span className="p-panel-title" aria-label={this.id + '_header'}>{this.props.header}</span>
-                    {toggleIcon}
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderContent(collapsed) {
-        const className = classNames('p-toggleable-content', {'p-toggleable-content-collapsed': collapsed});
-        const id = this.id + '_content';
-
-        return (
-            <CSSTransition classNames="p-toggleable-content" timeout={{enter: 400, exit: 250}} in={!this.isCollapsed()}>
-                <div className={className} aria-hidden={collapsed} role="region" id={id} aria-labelledby={this.id + '_header'}>
-                    <div className="p-panel-content">
-                        {this.props.children}
-                    </div>
-                </div>
-            </CSSTransition>
-        );
-    }
-
-    render() {
-        const className = classNames('p-panel p-component', this.props.className);
-        const collapsed = this.isCollapsed();
-        const header = this.renderHeader(collapsed);
-        const content = this.renderContent(collapsed);
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style}>
-                {header}
-                {content}
-            </div>
-        );
-    }
-}
diff --git a/src/components/panelmenu/PanelMenu.css b/src/components/panelmenu/PanelMenu.css
deleted file mode 100644
index a389a14952..0000000000
--- a/src/components/panelmenu/PanelMenu.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.p-panelmenu {
-    width: auto;
-}
-
-.p-panelmenu .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
-.p-panelmenu .p-panelmenu-content-wrapper {
-    overflow: hidden;
-}
-
-.p-panelmenu .p-panelmenu-header {
-    margin: -1px 0 0 0;
-    zoom: 1;
-}
-
-.p-panelmenu .p-panelmenu-header-link {
-    padding: .5em;
-    display: block;
-    text-decoration: none;
-}
-
-.p-panelmenu .p-panelmenu-icon {
-    vertical-align: middle;
-}
-
-.p-panelmenu .p-menuitem-text {
-    vertical-align: middle;
-}
-
-.p-panelmenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-panelmenu .p-panelmenu-content {
-    padding: 0.25em;
-    border-top: 0;
-    margin-bottom: 1px;
-}
-
-.p-panelmenu .p-submenu-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    margin-left: 1.5em;
-}
-
-.p-panelmenu .p-panelmenu-content > .p-panelmenu-root-submenu.p-submenu-list {
-    margin-left: 0;
-}
-
-.p-panelmenu .p-menuitem {
-    overflow: hidden;
-    margin: .125em 0;
-}
-
-.p-panelmenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    text-decoration: none;
-}
\ No newline at end of file
diff --git a/src/components/panelmenu/PanelMenu.d.ts b/src/components/panelmenu/PanelMenu.d.ts
deleted file mode 100644
index 8854eae0a7..0000000000
--- a/src/components/panelmenu/PanelMenu.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-
-interface PanelMenuProps {
-    id?: string;
-    model?: MenuItem[];
-    style?: object;
-    className?: string;
-}
-
-export class PanelMenu extends React.Component<PanelMenuProps,any> {}
diff --git a/src/components/panelmenu/PanelMenu.js b/src/components/panelmenu/PanelMenu.js
deleted file mode 100644
index b4bac847a8..0000000000
--- a/src/components/panelmenu/PanelMenu.js
+++ /dev/null
@@ -1,283 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
-
-class PanelMenuSub extends Component {
-
-    static defaultProps = {
-        model: null
-    };
-
-    static propTypes = {
-        model: PropTypes.any
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeItem: null
-        };
-    }
-
-    onItemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (this.state.activeItem && this.state.activeItem === item) {
-            this.setState({
-                activeItem: null
-            });
-        }
-        else {
-            this.setState({
-                activeItem: item
-            });
-        }
-    }
-
-    renderSeparator(index) {
-        return (
-            <li key={'separator_' + index} className="p-menu-separator"></li>
-        );
-    }
-
-    renderIcon(item) {
-        const className = classNames('p-menuitem-icon', item.icon);
-
-        if (item.icon) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenuIcon(item, active) {
-        const className = classNames('p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active, 'pi-caret-down': active});
-
-        if (item.items) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenu(item, active) {
-        const submenuWrapperClassName = classNames('p-toggleable-content', {'p-toggleable-content-collapsed': !active});
-
-        if (item.items) {
-            return (
-                <CSSTransition classNames="p-toggleable-content" timeout={{enter: 400, exit: 250}} in={active}>
-                    <div className={submenuWrapperClassName}>
-                        <PanelMenuSub model={item.items} />
-                    </div>
-                </CSSTransition>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMenuitem(item, index) {
-        const active = this.state.activeItem === item;
-        const className = classNames('p-menuitem', item.className, {'p-disabled': item.disabled});
-        const icon = this.renderIcon(item, active);
-        const submenuIcon = this.renderSubmenuIcon(item, active);
-        const submenu = this.renderSubmenu(item, active);
-
-        return (
-            <li key={item.label + '_' + index} className={className} style={item.style} role="none">
-                <a href={item.url || '#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.onItemClick(event, item, index)} role="menuitem">
-                    {submenuIcon}
-                    {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                </a>
-                {submenu}
-            </li>
-        );
-    }
-
-    renderItem(item, index) {
-        if (item.separator)
-            return this.renderSeparator(index);
-        else
-            return this.renderMenuitem(item, index);
-    }
-
-    renderMenu() {
-        if (this.props.model) {
-            return (
-                this.props.model.map((item, index) => {
-                    return this.renderItem(item, index);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-submenu-list', this.props.className);
-        const menu = this.renderMenu();
-
-        return (
-            <ul className={className} role="tree">
-               {menu}
-            </ul>
-        );
-    }
- }
-
-export class PanelMenu extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        style: null,
-        className: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeItem: null
-        }
-    }
-
-    onItemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (this.state.activeItem && this.state.activeItem === item) {
-            this.setState({
-                activeItem: null
-            });
-        }
-        else {
-            this.setState({
-                activeItem: item
-            });
-        }
-    }
-
-    renderPanelIcon(item) {
-        const className = classNames('p-menuitem-icon', item.icon);
-
-        if (item.icon) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderPanelToggleIcon(item, active) {
-        const className = classNames('p-panelmenu-icon pi pi-fw', {'pi-caret-right': !active,' pi-caret-down': active});
-
-        if (item.items) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderPanel(item, index) {
-        const active = this.state.activeItem === item;
-        const className = classNames('p-panelmenu-panel', item.className, {'p-disabled': item.disabled});
-        const headerClassName = classNames('p-component p-panelmenu-header', {'p-highlight': active});
-        const toggleIcon = this.renderPanelToggleIcon(item, active);
-        const itemIcon = this.renderPanelIcon(item);
-        const contentWrapperClassName = classNames('p-toggleable-content', {'p-toggleable-content-collapsed': !active});
-
-        return (
-            <div key={item.label + '_' + index} className={className} style={item.style}>
-                <div className={headerClassName} style={item.style}>
-                    <a href={item.url || '#'} className="p-panelmenu-header-link" onClick={(e) => this.onItemClick(e, item)} aria-expanded={this.state.activeItem === item}
-                       id={this.id + '_header'} aria-controls={this.id + 'content'}>
-                        {toggleIcon}
-                        {itemIcon}
-                        <span className="p-menuitem-text">{item.label}</span>
-                    </a>
-                </div>
-                <CSSTransition classNames="p-toggleable-content" timeout={{enter: 400, exit: 250}} in={active}>
-                    <div className={contentWrapperClassName} role="region" id={this.id + '_content'} aria-labelledby={this.id + '_header'}>
-                        <div className="p-panelmenu-content">
-                            <PanelMenuSub model={item.items} className="p-panelmenu-root-submenu" />
-                        </div>
-                    </div>
-                </CSSTransition>
-
-            </div>
-        );
-    }
-
-    renderPanels() {
-        if (this.props.model) {
-            return (
-                this.props.model.map((item, index) => {
-                    return this.renderPanel(item, index);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-panelmenu p-component', this.props.className);
-        const panels = this.renderPanels();
-
-        return(
-            <div id={this.props.id} className={className} style={this.props.style}>
-                {panels}
-            </div>
-        );
-    }
-}
diff --git a/src/components/password/Password.css b/src/components/password/Password.css
deleted file mode 100644
index 84ca6ce44e..0000000000
--- a/src/components/password/Password.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.p-password-panel {
-    padding: .25em .5em;
-    margin-top: 2px;
-}
- 
-.p-password-panel .p-password-meter {
-    height: 10px;
-    background:transparent url("http://github.com/images/password-meter.png") no-repeat left top;
-    padding: 0;
-    margin: 0;
-}
- 
-.p-password-info {
-    margin-top: .25em;
-}
- 
-.p-password-panel-overlay {
-    position: absolute;
-} 
\ No newline at end of file
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
deleted file mode 100644
index a50c7e3b13..0000000000
--- a/src/components/password/Password.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface PasswordProps extends React.HTMLProps<HTMLInputElement> {
-    promptLabel?: string;
-    weakLabel?: string;
-    mediumLabel?: string;
-    strongLabel?: string;
-    feedback?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    [key: string]: any;
-}
-
-export class Password extends React.Component<PasswordProps,any> {}
\ No newline at end of file
diff --git a/src/components/password/Password.js b/src/components/password/Password.js
deleted file mode 100644
index cd63fd36b5..0000000000
--- a/src/components/password/Password.js
+++ /dev/null
@@ -1,202 +0,0 @@
-import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
-import {InputText} from '../inputtext/InputText';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import Tooltip from "../tooltip/Tooltip";
-import ObjectUtils from '../utils/ObjectUtils';
- 
-export class Password extends Component {
- 
-    static defaultProps = {
-        promptLabel: 'Enter a password',
-        weakLabel: 'Weak',
-        mediumLabel: 'Medium',
-        strongLabel: 'Strong',
-        feedback: true,
-        tooltip: null,
-        tooltipOptions: null
-    };
-
-    static propTypes = {
-        promptLabel: PropTypes.string,
-        weakLabel: PropTypes.string,
-        mediumLabel: PropTypes.string,
-        strongLabel:PropTypes.string,
-        feedback: PropTypes.bool,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyup = this.onKeyup.bind(this);
-    }
-
-    onFocus(e) {
-        if (this.props.feedback) {
-            if (!this.panel) {
-                this.createPanel();
-            }
-            
-            this.panel.style.zIndex = String(DomHandler.generateZIndex());
-            this.panel.style.display = 'block';
-            setTimeout(() => {
-                DomHandler.addClass(this.panel, 'p-input-overlay-visible');
-                DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
-            }, 1);
-            DomHandler.absolutePosition(this.panel, this.inputEl);
-        }
-        
-        if (this.props.onFocus) {
-            this.props.onFocus(e);
-        }
-    }
-  
-    onBlur(e) {
-        if (this.props.feedback) {
-            DomHandler.addClass(this.panel, 'p-input-overlay-hidden');
-            DomHandler.removeClass(this.panel, 'p-input-overlay-visible');
-
-            setTimeout(() => {
-                this.panel.style.display = 'none';
-                DomHandler.removeClass(this.panel, 'p-input-overlay-hidden');
-            }, 150);
-        }
-
-        if (this.props.onBlur) {
-            this.props.onBlur(e);
-        }
-    }
-
-    onKeyup(e) {
-        if(this.props.feedback) {
-            let value = e.target.value,
-            label = null,
-            meterPos = null;
-
-            if(value.length === 0) {
-                label = this.props.promptLabel;
-                meterPos = '0px 0px';
-            }
-            else {
-                var score = this.testStrength(value);
-
-                if(score < 30) {
-                    label = this.props.weakLabel;
-                    meterPos = '0px -10px';
-                }
-                else if(score >= 30 && score < 80) {
-                    label = this.props.mediumLabel;
-                    meterPos = '0px -20px';
-                } 
-                else if(score >= 80) {
-                    label = this.props.strongLabel;
-                    meterPos = '0px -30px';
-                }
-            }
-
-            this.meter.style.backgroundPosition = meterPos;
-            this.info.textContent = label;
-        }
-
-        if (this.props.onKeyUp) {
-            this.props.onKeyUp(e);
-        }
-    }
-    
-    testStrength(str) {
-        let grade = 0;
-        let val;
-
-        val = str.match('[0-9]');
-        grade += this.normalize(val ? val.length : 1/4, 1) * 25;
-
-        val = str.match('[a-zA-Z]');
-        grade += this.normalize(val ? val.length : 1/2, 3) * 10;
-
-        val = str.match('[!@#$%^&*?_~.,;=]');
-        grade += this.normalize(val ? val.length : 1/6, 1) * 35;
-
-        val = str.match('[A-Z]');
-        grade += this.normalize(val ? val.length : 1/6, 1) * 30;
-
-        grade *= str.length / 8;
-
-        return grade > 100 ? 100 : grade;
-    }
-    
-    normalize(x, y) {
-        let diff = x - y;
-
-        if(diff <= 0)
-            return x / y;
-        else
-            return 1 + 0.5 * (x / (x + y/4));
-    }
-
-    createPanel() {
-        this.panel = document.createElement('div');
-        this.panel.className = 'p-password-panel p-component p-highlight p-hidden p-password-panel-overlay p-input-overlay';
-        this.meter = document.createElement('div');
-        this.meter.className = 'p-password-meter';
-        this.info = document.createElement('div');
-        this.info.className = 'p-password-info';
-        this.info.textContent = this.props.promptLabel;
-
-        this.panel.style.minWidth = DomHandler.getOuterWidth(this.inputEl) + 'px';
-        this.panel.appendChild(this.meter);
-        this.panel.appendChild(this.info);
-        document.body.appendChild(this.panel);
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.feedback && this.panel) {
-            this.panel.removeChild(this.meter);
-            this.panel.removeChild(this.info);
-            document.body.removeChild(this.panel);
-            this.panel = null;
-            this.meter = null;
-            this.info = null;
-        }
-
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.inputEl,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        let inputProps = ObjectUtils.findDiffKeys(this.props, Password.defaultProps);
-
-        return (
-            <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} {...inputProps} type="password" onFocus={this.onFocus} onBlur={this.onBlur} onKeyUp={this.onKeyup} />
-        );
-    }
-} 
\ No newline at end of file
diff --git a/src/components/password/images/password-meter.png b/src/components/password/images/password-meter.png
deleted file mode 100644
index ddb456d3f8..0000000000
Binary files a/src/components/password/images/password-meter.png and /dev/null differ
diff --git a/src/components/picklist/PickList.css b/src/components/picklist/PickList.css
deleted file mode 100644
index 3b90d69c02..0000000000
--- a/src/components/picklist/PickList.css
+++ /dev/null
@@ -1,187 +0,0 @@
-.p-picklist > div {
-    float: left;
-}
-
-.p-picklist .p-picklist-buttons {
-    height: 12.5em;
-    padding: 0 .25em;
-}
-
-.p-picklist .p-picklist-list {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    overflow:auto;
-    height: 12.5em;
-    width: 12.5em;
-}
-
-.p-picklist .p-picklist-list li {
-    margin: 1px;
-    padding: .125em;
-}
-
-.p-picklist .p-button {
-    display:block;
-    margin-bottom: 0.25em;
-}
-
-.p-picklist .p-button-text-icon-left {
-    width: 100%;
-}
-
-.p-picklist .p-picklist-item {
-    cursor: pointer;
-    border: 0 none;
-    font-weight: inherit;
-}
-
-.p-picklist .p-picklist-caption {
-    text-align: center;
-    padding: .5em .75em;
-    border-bottom:0 none;
-}
-
-.p-picklist table {
-    width: 100%;
-    border-collapse:collapse;
-}
-
-.p-picklist .p-picklist-filter-container {
-    position: relative;
-    width: 100%;
-    padding: .5em .6em;
-    border-bottom: 0 none;
-}
-
-.p-picklist .p-picklist-filter-container .p-picklist-filter {
-    text-indent: 1.1em;
-    width: 100%;
-}
-
-.p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
-    position: absolute;
-    top: 50%;
-    left: 1em;
-    margin-top: -.6em;
-}
-
-.p-picklist {
-    display: table;
-}
-
-.p-picklist > div {
-    float: none;
-    display: table-cell;
-    vertical-align: top;
-}
-
-.p-picklist .p-picklist-buttons {
-    vertical-align: middle;
-}
-
-/* Vertical */
-.p-picklist.p-picklist-vertical {
-    display: table;
-}
-
-.p-picklist.p-picklist-vertical > div {
-    float: none;
-    display: table-row;
-    vertical-align: top;
-}
-
-.p-picklist.p-picklist-vertical .p-picklist-buttons {
-    text-align:center;
-    height: auto;
-}
-
-.p-picklist.p-picklist-vertical .p-picklist-buttons .p-button {
-    display: inline-block;
-}
-
-.p-picklist.p-picklist-vertical .p-button {
-    margin-top: 0.25em;
-}
-
-.p-picklist-outline {
-    outline: 1px dotted black;
-    z-index: 1;
-}
-
-.p-picklist .p-picklist-droppoint {
-    height: 6px;
-    list-style-type: none;
-}
-
-.p-picklist .p-picklist-list .p-picklist-droppoint-empty {
-    height: 100%;
-    list-style-type: none;
-}
-
-.p-picklist-list.p-picklist-source,
-.p-picklist-list.p-picklist-target {
-    outline: none;
-}
-
-/* Responsive */
-.p-picklist.p-picklist-responsive * {
-    box-sizing: border-box;
-}
-
-.p-picklist.p-picklist-responsive {
-    width: 100%;
-}
-
-.p-picklist.p-picklist-responsive .p-picklist-listwrapper {
-    width: 35%;
-}
-
-.p-picklist.p-picklist-responsive .p-picklist-listwrapper.p-picklist-listwrapper-nocontrols {
-    width: 45%;
-}
-
-.p-picklist.p-picklist-responsive .p-picklist-buttons {
-    width: 10%;
-}
-
-.p-picklist.p-picklist-responsive .p-picklist-buttons button {
-    width: 100%;
-}
-
-.p-picklist.p-picklist-responsive .p-picklist-list {
-    width: auto;
-}
-
-/* Responsive */
-@media (max-width: 40em) {
-    .p-picklist.p-picklist-responsive {
-        display: block;
-    }
-
-    .p-picklist.p-picklist-responsive > div {
-        display: block;
-        width: 100% !important;
-    }
-
-    .p-picklist.p-picklist-responsive .p-picklist-buttons {
-        text-align: center;
-        height: auto;
-        padding: .4em 0;
-    }
-
-    .p-picklist.p-picklist-responsive .p-picklist-buttons button {
-        display: inline-block;
-        width: 20%;
-        margin-bottom: 0;
-        margin-right: .25em;
-    }
-
-    .p-picklist.p-picklist-responsive .p-picklist-source-controls.p-picklist-buttons {
-        padding-bottom: .4em;
-    }
-
-    .p-picklist.p-picklist-responsive .p-picklist-target-controls.p-picklist-buttons {
-        padding-top: .4em;
-    }
-}
diff --git a/src/components/picklist/PickList.d.ts b/src/components/picklist/PickList.d.ts
deleted file mode 100755
index c0d5ec108c..0000000000
--- a/src/components/picklist/PickList.d.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react';
-
-interface PickListProps {
-    id?: string;
-    source?: any[];
-    target?: any[];
-    sourceHeader?: any;
-    targetHeader?: any;
-    style?: object;
-    className?: string;
-    sourceStyle?: object;
-    targetStyle?: object;
-    responsive?: boolean;
-    showSourceControls?: boolean;
-    showTargetControls?: boolean;
-    metaKeySelection?: boolean;
-    tabIndex?: string;
-    itemTemplate?(item: any): JSX.Element | undefined;
-    onChange?(e: {event: Event, source: any, target: any}): void;
-    onMoveToSource?(e: {originalEvent: Event, value: any}): void;
-    onMoveAllToSource?(e: {originalEvent: Event, value: any}): void;
-    onMoveToTarget?(e: {originalEvent: Event, value: any}): void;
-    onMoveAllToTarget?(e: {originalEvent: Event, value: any}): void;
-    onSourceSelect?(e: {originalEvent: Event, value: any}): void;
-    onTargetSelect?(e: {originalEvent: Event, value: any}): void;
-}
-
-export class PickList extends React.Component<PickListProps,any> {}
\ No newline at end of file
diff --git a/src/components/picklist/PickList.js b/src/components/picklist/PickList.js
deleted file mode 100644
index e878f61b4f..0000000000
--- a/src/components/picklist/PickList.js
+++ /dev/null
@@ -1,222 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-import {PickListSubList} from './PickListSubList';
-import {PickListControls} from './PickListControls';
-import {PickListTransferControls} from './PickListTransferControls';
-
-export class PickList extends Component {
-
-    static defaultProps = {
-        id: null,
-        source: null,
-        target: null,
-        sourceHeader: null,
-        targetHeader: null,
-        style: null,
-        className: null,
-        sourceStyle: null,
-        targetStyle: null,
-        responsive: false,
-        showSourceControls: true,
-        showTargetControls: true,
-        metaKeySelection: true,
-        tabIndex: '0',
-        itemTemplate: null,
-        onChange: null,
-        onMoveToSource: null,
-        onMoveAllToSource: null,
-        onMoveToTarget: null,
-        onMoveAllToTarget: null,
-        onSourceSelect: null,
-        onTargetSelect: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        source: PropTypes.array,
-        target: PropTypes.array,
-        sourceHeader: PropTypes.string,
-        targetHeader: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        sourcestyle: PropTypes.object,
-        targetstyle: PropTypes.object,
-        responsive: PropTypes.bool,
-        showSourceControls: PropTypes.bool,
-        showTargetControls: PropTypes.bool,
-        metaKeySelection: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        itemTemplate: PropTypes.func,
-        onChange: PropTypes.func,
-        onMoveToSource: PropTypes.func,
-        onMoveAllToSource: PropTypes.func,
-        onMoveToTarget: PropTypes.func,
-        onMoveAllToTarget: PropTypes.func,
-        onSourceSelect: PropTypes.func,
-        onTargetSelect: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            selectedItemsSource: [], 
-            selectedItemsTarget: []
-        };
-        
-        this.onSourceReorder = this.onSourceReorder.bind(this);
-        this.onTargetReorder = this.onTargetReorder.bind(this);
-        this.onTransfer = this.onTransfer.bind(this);
-    }
-    
-    onSourceReorder(event) {
-        this.handleChange(event, event.value, this.props.target);
-        this.reorderedListElement = this.sourceListElement;
-        this.reorderDirection = event.direction;
-    }
-    
-    onTargetReorder(event) {
-        this.handleChange(event, this.props.source, event.value);
-        this.reorderedListElement = this.targetListElement;
-        this.reorderDirection = event.direction;
-    }
-        
-    handleScrollPosition(listElement, direction) {
-        switch(direction) {
-            case 'up':
-                this.scrollInView(listElement, -1);
-            break;
-            
-            case 'top':
-                listElement.scrollTop = 0;
-            break;
-            
-            case 'down':
-                this.scrollInView(listElement, 1);
-            break;
-            
-            case 'bottom':
-                listElement.scrollTop = listElement.scrollHeight;
-            break;
-            
-            default:
-            break;
-        }
-    }
-    
-    handleChange(event, source, target) {
-        if(this.props.onChange) {
-            this.props.onChange({
-                event: event.originalEvent,
-                source: source,
-                target: target,
-            });
-        }
-    }
-    
-    onTransfer(event) {        
-        switch(event.direction) {
-            case 'toTarget':
-                if(this.props.onMoveToTarget) {
-                    this.props.onMoveToTarget({
-                        originalEvent: event.originalEvent,
-                        value: this.state.selectedItemsSource
-                    })
-                }
-            break;
-            
-            case 'allToTarget':
-                if(this.props.onMoveAllToTarget) {
-                    this.props.onMoveAllToTarget({
-                        originalEvent: event.originalEvent,
-                        value: this.props.source
-                    })
-                }
-            break;
-            
-            case 'toSource':
-                if(this.props.onMoveToSource) {
-                    this.props.onMoveToSource({
-                        originalEvent: event.originalEvent,
-                        value: this.state.selectedItemsTarget
-                    })
-                }
-            break;
-            
-            case 'allToSource':
-                if(this.props.onMoveAllToSource) {
-                    this.props.onMoveAllToSource({
-                        originalEvent: event.originalEvent,
-                        value: this.props.target
-                    })
-                }
-            break;
-            
-            default:
-            break;
-        }
-        
-        this.setState({
-            selectedItemsSource: [], 
-            selectedItemsTarget: []
-        });
-        this.handleChange(event, event.source, event.target);
-    }
-        
-    scrollInView(listElement, direction) {
-        let listContainer = DomHandler.findSingle(listElement, '.p-picklist-list');
-        let listItems = listContainer.getElementsByClassName('p-highlight');
-        let listItem;
-        
-        if(direction === -1)
-            listItem = listItems[0];
-        else if(direction === 1)
-            listItem = listItems[listItems.length - 1];
-            
-        DomHandler.scrollInView(listContainer, listItem);
-    }
-
-    onSelectionChange(e, stateKey, callback) {
-        this.setState({[stateKey]: e.value});
-
-        if (callback) {
-            callback(e);
-        }
-    }
-    
-    componentDidUpdate() {
-        if(this.reorderedListElement) {
-            this.handleScrollPosition(this.reorderedListElement, this.reorderDirection);
-            this.reorderedListElement = null;
-            this.reorderDirection = null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-picklist p-component', this.props.className, {
-            'p-picklist-responsive': this.props.responsive
-        });
-        
-        return (
-            <div id={this.props.id} className={className} style={this.props.style}>
-                {this.props.showSourceControls && <PickListControls list={this.props.source} selection={this.state.selectedItemsSource} 
-                            onReorder={this.onSourceReorder} className="p-picklist-source-controls" />}
-                
-                <PickListSubList ref={(el) => this.sourceListElement = ReactDOM.findDOMNode(el)} list={this.props.source} selection={this.state.selectedItemsSource} onSelectionChange={(e) => this.onSelectionChange(e, 'selectedItemsSource', this.props.onSourceSelect)} itemTemplate={this.props.itemTemplate} 
-                    header={this.props.sourceHeader} style={this.props.sourceStyle} className="p-picklist-source-wrapper" listClassName="p-picklist-source" metaKeySelection={this.props.metaKeySelection} tabIndex={this.props.tabIndex}/>
-                
-                <PickListTransferControls onTransfer={this.onTransfer} source={this.props.source} target={this.props.target} 
-                    sourceSelection={this.state.selectedItemsSource} targetSelection={this.state.selectedItemsTarget} />
-                
-                <PickListSubList ref={(el) => this.targetListElement = ReactDOM.findDOMNode(el)} list={this.props.target} selection={this.state.selectedItemsTarget} onSelectionChange={(e) => this.onSelectionChange(e, 'selectedItemsTarget', this.props.onTargetSelect)}  itemTemplate={this.props.itemTemplate} 
-                    header={this.props.targetHeader} style={this.props.targetStyle} className="p-picklist-target-wrapper" listClassName="p-picklist-targe" metaKeySelection={this.props.metaKeySelection} tabIndex={this.props.tabIndex}/>
-                
-                {this.props.showTargetControls && <PickListControls list={this.props.target} selection={this.state.selectedItemsTarget} 
-                            onReorder={this.onTargetReorder} className="p-picklist-target-controls" />}
-            
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/picklist/PickListControls.d.ts b/src/components/picklist/PickListControls.d.ts
deleted file mode 100644
index 21a8afcd49..0000000000
--- a/src/components/picklist/PickListControls.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-
-interface PickListControlsProps {
-    className?: string;
-    list?: any[];
-    selection?: any[];
-    onReorder?(e: {originalEvent: Event, value: any, direction: string}): void;
-}
-
-export class PickListControls extends React.Component<PickListControlsProps,any> {}
diff --git a/src/components/picklist/PickListControls.js b/src/components/picklist/PickListControls.js
deleted file mode 100644
index 42256b26a2..0000000000
--- a/src/components/picklist/PickListControls.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types';
-import {Button} from '../button/Button';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class PickListControls extends Component {
-    
-    static defaultProps = {
-        className: null,
-        list: null,
-        selection: null,
-        onReorder: null
-    }
-
-    static propTypes = {
-        className: PropTypes.string,
-        list: PropTypes.array,
-        selection: PropTypes.array,
-        onReorder: PropTypes.func
-    }
-    
-    constructor() {
-        super();
-        this.moveUp = this.moveUp.bind(this);
-        this.moveTop = this.moveTop.bind(this);
-        this.moveDown = this.moveDown.bind(this);
-        this.moveBottom = this.moveBottom.bind(this);
-    }
-    
-    moveUp(event) {
-        let selectedItems = this.props.selection;
-        
-        if(selectedItems && selectedItems.length) {
-            let list = [...this.props.list];
-
-            for(let i = 0; i < selectedItems.length; i++) {
-                let selectedItem = selectedItems[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
-
-                if(selectedItemIndex !== 0) {
-                    let movedItem = list[selectedItemIndex];
-                    let temp = list[selectedItemIndex - 1];
-                    list[selectedItemIndex - 1] = movedItem;
-                    list[selectedItemIndex] = temp;
-                }
-                else {
-                    break;
-                }
-            }
-            
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: list,
-                    direction: 'up'
-                });
-            }
-        }
-    }
-
-    moveTop(event) {
-        let selectedItems = this.props.selection;
-        
-        if(selectedItems && selectedItems.length) {
-            let list = [...this.props.list];
-
-            for(let i = 0; i < selectedItems.length; i++) {
-                let selectedItem = selectedItems[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
-
-                if(selectedItemIndex !== 0) {
-                    let movedItem = list.splice(selectedItemIndex,1)[0];
-                    list.unshift(movedItem);
-                }
-                else {
-                    break;
-                }
-            }
-
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: list,
-                    direction: 'top'
-                });
-            }
-        }
-    }
-
-    moveDown(event) {
-        let selectedItems = this.props.selection;
-        
-        if(selectedItems && selectedItems.length) {
-            let list = [...this.props.list];
-
-            for(let i = selectedItems.length - 1; i >= 0; i--) {
-                let selectedItem = selectedItems[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
-
-                if(selectedItemIndex !== (list.length - 1)) {
-                    let movedItem = list[selectedItemIndex];
-                    let temp = list[selectedItemIndex+1];
-                    list[selectedItemIndex+1] = movedItem;
-                    list[selectedItemIndex] = temp;
-                }
-                else {
-                    break;
-                }
-            }
-
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: list,
-                    direction: 'down'
-                });
-            }
-            
-            this.movedDown = true;
-        }
-    }
-
-    moveBottom(event) {
-        let selectedItems = this.props.selection;
-        
-        if(selectedItems && selectedItems.length) {
-            let list = [...this.props.list];
-
-            for(let i = selectedItems.length - 1; i >= 0; i--) {
-                let selectedItem = selectedItems[i];
-                let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, list);
-
-                if(selectedItemIndex !== (list.length - 1)) {
-                    let movedItem = list.splice(selectedItemIndex,1)[0];
-                    list.push(movedItem);
-                }
-                else {
-                    break;
-                }
-            }
-
-            if(this.props.onReorder) {
-                this.props.onReorder({
-                    originalEvent: event,
-                    value: list,
-                    direction: 'bottom'
-                });
-            }
-        }
-    }
-    
-    render() {
-        let className = classNames('p-picklist-buttons', this.props.className);
-        
-        return <div className={className}>
-                    <div className="p-picklist-buttons-cell">
-                        <Button type="button" icon="pi pi-angle-up" onClick={this.moveUp}></Button>
-                        <Button type="button" icon="pi pi-angle-double-up" onClick={this.moveTop}></Button>
-                        <Button type="button" icon="pi pi-angle-down" onClick={this.moveDown}></Button>
-                        <Button type="button" icon="pi pi-angle-double-down" onClick={this.moveBottom}></Button>
-                    </div>
-                </div>;
-    }
-}
\ No newline at end of file
diff --git a/src/components/picklist/PickListItem.d.ts b/src/components/picklist/PickListItem.d.ts
deleted file mode 100755
index 72ecab03f4..0000000000
--- a/src/components/picklist/PickListItem.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface PickListItemProps {
-    value?: any;
-    className?: string;
-    selected?: boolean;
-    template?(item: any): JSX.Element | undefined;
-    onClick?(e: {originalEvent: Event, value: any}): void;
-}
-
-export class PickListItem extends React.Component<PickListItemProps,any> {}
diff --git a/src/components/picklist/PickListItem.js b/src/components/picklist/PickListItem.js
deleted file mode 100644
index 2f3ac8656f..0000000000
--- a/src/components/picklist/PickListItem.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class PickListItem extends Component {
-
-    static defaultProps = {
-        value: null,
-        className: null,
-        template: null,
-        selected: false,
-        tabIndex: null,
-        onClick: null,
-        onKeyDown: null
-    }
-
-    static propTypes = {
-        value: PropTypes.any,
-        className: PropTypes.string,
-        template: PropTypes.func,
-        selected: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        onClick: PropTypes.func,
-        onKeyDown: PropTypes.func
-    }
-
-    constructor() {
-        super();
-        this.onClick = this.onClick.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(event) {
-        if(this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                value: this.props.value
-            });
-        }
-    }
-
-    onKeyDown(event) {
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown({
-                originalEvent: event,
-                value: this.props.value
-            });
-        }
-    }
-
-    render() {
-        let content = this.props.template ? this.props.template(this.props.value) : this.props.value;
-        let className = classNames('p-picklist-item', this.props.className, {'p-highlight': this.props.selected});
-
-        return <li className={className} onClick={this.onClick} onKeyDown={this.onKeyDown} tabIndex={this.props.tabIndex} role="option" aria-selected={this.props.selected}>
-                  {content}
-               </li>;
-    }
-}
diff --git a/src/components/picklist/PickListSubList.d.ts b/src/components/picklist/PickListSubList.d.ts
deleted file mode 100755
index ac100629fe..0000000000
--- a/src/components/picklist/PickListSubList.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-interface PickListSubListProps {
-    list?: any[];
-    selection?: any[];
-    header?: string;
-    className?: string;
-    listClassName?: string;
-    style?: object;
-    showControls?: boolean;
-    metaKeySelection?: boolean;
-    itemTemplate?(item: any): JSX.Element | undefined;
-    onItemClick?(): void;
-    onSelectionChange?(e: {event: Event, value: any}): void;
-}
-
-export class PickListSubList extends React.Component<PickListSubListProps,any> {}
diff --git a/src/components/picklist/PickListSubList.js b/src/components/picklist/PickListSubList.js
deleted file mode 100644
index 1c11889a0a..0000000000
--- a/src/components/picklist/PickListSubList.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import ObjectUtils from '../utils/ObjectUtils';
-import { PickListItem } from './PickListItem';
-import DomHandler from '../utils/DomHandler';
-
-export class PickListSubList extends Component {
-
-    static defaultProps = {
-        list: null,
-        selection: null,
-        header: null,
-        className: null,
-        listClassName: null,
-        style: null,
-        showControls: true,
-        metaKeySelection: true,
-        tabIndex: null,
-        itemTemplate: null,
-        onItemClick: null,
-        onSelectionChange: null
-    }
-
-    static propTypes = {
-        list: PropTypes.array,
-        selection: PropTypes.array,
-        header: PropTypes.string,
-        className: PropTypes.string,
-        listClassName: PropTypes.string,
-        style: PropTypes.object,
-        showControls: PropTypes.bool,
-        metaKeySelection: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        itemTemplate: PropTypes.func,
-        onItemClick: PropTypes.func,
-        onSelectionChange: PropTypes.func
-    }
-
-    constructor() {
-        super();
-        this.onItemClick = this.onItemClick.bind(this);
-        this.onItemKeyDown = this.onItemKeyDown.bind(this);
-    }
-
-    onItemClick(event) {
-        let originalEvent = event.originalEvent;
-        let item = event.value;
-        let selection = [...this.props.selection];
-        let index = ObjectUtils.findIndexInList(item, selection);
-        let selected = (index !== -1);
-        let metaSelection = this.props.metaKeySelection;
-
-        if(metaSelection) {
-            let metaKey = (originalEvent.metaKey||originalEvent.ctrlKey);
-
-            if(selected && metaKey) {
-                selection.splice(index, 1);
-            }
-            else {
-                if(!metaKey) {
-                    selection.length = 0;
-                }
-                selection.push(item);
-            }
-        }
-        else {
-            if(selected)
-                selection.splice(index, 1);
-            else
-                selection.push(item);
-        }
-
-        if(this.props.onSelectionChange) {
-            this.props.onSelectionChange({
-                event: originalEvent,
-                value: selection
-            })
-        }
-    }
-
-    onItemKeyDown(event) {
-        let listItem = event.originalEvent.currentTarget;
-
-        switch(event.originalEvent.which) {
-            //down
-            case 40:
-                var nextItem = this.findNextItem(listItem);
-                if (nextItem) {
-                    nextItem.focus();
-                }
-
-                event.originalEvent.preventDefault();
-            break;
-
-            //up
-            case 38:
-                var prevItem = this.findPrevItem(listItem);
-                if (prevItem) {
-                    prevItem.focus();
-                }
-
-                event.originalEvent.preventDefault();
-            break;
-
-            //enter
-            case 13:
-                this.onItemClick(event);
-                event.originalEvent.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return !DomHandler.hasClass(nextItem, 'p-picklist-item') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-
-        if (prevItem)
-            return !DomHandler.hasClass(prevItem, 'p-picklist-item') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-
-    isSelected(item) {
-        return ObjectUtils.findIndexInList(item, this.props.selection) !== -1;
-    }
-
-    render() {
-        let header = null;
-        let items = null;
-        let wrapperClassName = classNames('p-picklist-listwrapper', this.props.className, {
-            'p-picklist-listwrapper-nocontrols': !this.props.showControls
-        });
-        let listClassName = classNames('p-picklist-list', this.props.listClassName);
-
-        if(this.props.header) {
-            header = <div className="p-picklist-caption">{this.props.header}</div>
-        }
-
-        if(this.props.list) {
-            items = this.props.list.map((item, i) => {
-                return <PickListItem key={JSON.stringify(item)} value={item} template={this.props.itemTemplate}
-                    selected={this.isSelected(item)} onClick={this.onItemClick} onKeyDown={this.onItemKeyDown} tabIndex={this.props.tabIndex} />
-            });
-        }
-
-        return <div className={wrapperClassName}>
-                    {header}
-                    <ul className={listClassName} style={this.props.style} role="listbox" aria-multiselectable={true}>
-                        {items}
-                    </ul>
-                 </div>;
-    }
-}
diff --git a/src/components/picklist/PickListTransferControls.d.ts b/src/components/picklist/PickListTransferControls.d.ts
deleted file mode 100644
index 4dd0e4524a..0000000000
--- a/src/components/picklist/PickListTransferControls.d.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-interface PickListTransferControlsProps {
-    source?: any[];
-    target?: any[];
-    sourceSelection?: any[];
-    targetSelection?: any[];
-    onTransfer?(e: {originalEvent: Event, source: any[], target: any[], direction: string}): void;
-}
-
-export class PickListTransferControls extends React.Component<PickListTransferControlsProps,any> {}
diff --git a/src/components/picklist/PickListTransferControls.js b/src/components/picklist/PickListTransferControls.js
deleted file mode 100644
index 02b8d17aa1..0000000000
--- a/src/components/picklist/PickListTransferControls.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {Button} from '../button/Button';
-import ObjectUtils from '../utils/ObjectUtils';
-
-export class PickListTransferControls extends Component {
-    
-    static defaultProps = {
-        source: null,
-        target: null,
-        sourceSelection: null,
-        targetSelection: null,
-        onTransfer: null
-    }
-
-    static propTypes = {
-        source: PropTypes.array,
-        target: PropTypes.array,
-        sourceSelection: PropTypes.array,
-        targetSelection: PropTypes.array,
-        onTransfer: PropTypes.func
-    }
-        
-    constructor() {
-        super();
-        this.moveRight = this.moveRight.bind(this);
-        this.moveAllRight = this.moveAllRight.bind(this);
-        this.moveLeft = this.moveLeft.bind(this);
-        this.moveAllLeft = this.moveAllLeft.bind(this);
-    }
-    
-    moveRight(event) {
-        let selection = this.props.sourceSelection;
-        
-        if(selection && selection.length) {
-            let targetList = [...this.props.target];
-            let sourceList = [...this.props.source];
-
-            for(let i = 0; i < selection.length; i++) {
-                let selectedItem = selection[i];
-                
-                if(ObjectUtils.findIndexInList(selectedItem, targetList) === -1) {
-                    targetList.push(sourceList.splice(ObjectUtils.findIndexInList(selectedItem, sourceList), 1)[0]);
-                }
-            }
-            
-            if(this.props.onTransfer) {
-                this.props.onTransfer({
-                    originalEvent: event,
-                    source: sourceList,
-                    target: targetList,
-                    direction: 'toTarget'
-                })
-            }
-        }
-    }
-
-    moveAllRight(event) {
-        if(this.props.source) {
-            let targetList = [...this.props.target, ...this.props.source];
-            let sourceList = [];
-
-            if(this.props.onTransfer) {
-                this.props.onTransfer({
-                    originalEvent: event,
-                    source: sourceList,
-                    target: targetList,
-                    direction: 'allToTarget'
-                })
-            }
-        }
-    }
-
-    moveLeft(event) {
-        let selection = this.props.targetSelection;
-        
-        if(selection && selection.length) {
-            let targetList = [...this.props.target];
-            let sourceList = [...this.props.source];
-
-            for(let i = 0; i < selection.length; i++) {
-                let selectedItem = selection[i];
-                
-                if(ObjectUtils.findIndexInList(selectedItem, sourceList) === -1) {
-                    sourceList.push(targetList.splice(ObjectUtils.findIndexInList(selectedItem, targetList), 1)[0]);
-                }
-            }
-
-            if(this.props.onTransfer) {
-                this.props.onTransfer({
-                    originalEvent: event,
-                    source: sourceList,
-                    target: targetList,
-                    direction: 'toSource'
-                })
-            }
-        }
-    }
-
-    moveAllLeft(event) {
-        if(this.props.source) {
-            let sourceList = [...this.props.source, ...this.props.target];
-            let targetList = [];
-
-            if(this.props.onTransfer) {
-                this.props.onTransfer({
-                    originalEvent: event,
-                    source: sourceList,
-                    target: targetList,
-                    direction: 'allToSource'
-                })
-            }
-        }
-    }
-    
-    render() {
-        let className = classNames('p-picklist-buttons', this.props.className);
-        
-        return <div className={className}>
-                    <div className="p-picklist-buttons-cell">
-                        <Button type="button" icon="pi pi-angle-right" onClick={this.moveRight}></Button>
-                        <Button type="button" icon="pi pi-angle-double-right" onClick={this.moveAllRight}></Button>
-                        <Button type="button" icon="pi pi-angle-left" onClick={this.moveLeft}></Button>
-                        <Button type="button" icon="pi pi-angle-double-left" onClick={this.moveAllLeft}></Button>
-                    </div>
-                </div>;
-    }
-}
\ No newline at end of file
diff --git a/src/components/progressbar/ProgressBar.css b/src/components/progressbar/ProgressBar.css
deleted file mode 100644
index d48f10a671..0000000000
--- a/src/components/progressbar/ProgressBar.css
+++ /dev/null
@@ -1,109 +0,0 @@
-.p-progressbar { 
-    height: 1.2em; 
-    text-align: left; 
-    position: relative;
-    overflow: hidden;
-}
-
-.p-progressbar-determinate .p-progressbar-value {
-    height: 100%;
-    width: 0%;
-    position: absolute;
-    display: none;
-    border: 0 none;
-}
-
-.p-progressbar-determinate .p-progressbar-value-animate {
-    -webkit-transition: width 1s ease-in-out;
-    -moz-transition: width 1s ease-in-out;
-    -o-transition: width 1s ease-in-out;
-    transition: width 1s ease-in-out;
-}
-
-.p-progressbar-determinate .p-progressbar-label {
-    text-align: center;
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    font-weight: bold;
-}
-
-.p-progressbar-indeterminate {
-    height: .5em;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value {
-    border: 0 none;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::before {
-      content: '';
-      position: absolute;
-      background-color: inherit;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      will-change: left, right;
-      -webkit-animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-              animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-}
-
-.p-progressbar-indeterminate .p-progressbar-value::after {
-    content: '';
-    position: absolute;
-    background-color: inherit;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    will-change: left, right;
-    -webkit-animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-            animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-    -webkit-animation-delay: 1.15s;
-            animation-delay: 1.15s;
-}
-    
-@-webkit-keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; } 
-}
-@keyframes p-progressbar-indeterminate-anim {
-  0% {
-    left: -35%;
-    right: 100%; }
-  60% {
-    left: 100%;
-    right: -90%; }
-  100% {
-    left: 100%;
-    right: -90%; } 
-}
-
-@-webkit-keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; } 
-}
-@keyframes p-progressbar-indeterminate-anim-short {
-  0% {
-    left: -200%;
-    right: 100%; }
-  60% {
-    left: 107%;
-    right: -8%; }
-  100% {
-    left: 107%;
-    right: -8%; } 
-}
\ No newline at end of file
diff --git a/src/components/progressbar/ProgressBar.d.ts b/src/components/progressbar/ProgressBar.d.ts
deleted file mode 100644
index 94291a8a28..0000000000
--- a/src/components/progressbar/ProgressBar.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-interface ProgressBarProps {
-    id?: string;
-    value?: number;
-    showValue?: boolean;
-    unit?: string;
-    style?: object;
-    className?: string;
-    mode?: string;
-    displayValueTemplate?(value: any): JSX.Element;
-}
-
-export class ProgressBar extends React.Component<ProgressBarProps,any> {}
\ No newline at end of file
diff --git a/src/components/progressbar/ProgressBar.js b/src/components/progressbar/ProgressBar.js
deleted file mode 100644
index 0aef96ab96..0000000000
--- a/src/components/progressbar/ProgressBar.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class ProgressBar extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        showValue: true,
-        unit: '%',
-        style: null,
-        className: null,
-        mode: 'determinate',
-        displayValueTemplate: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        showValue: PropTypes.bool,
-        unit: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        mode: PropTypes.string,
-        displayValueTemplate: PropTypes.func
-    };
-
-    renderLabel() {
-        if (this.props.showValue && this.props.value != null) {
-            let label = this.props.displayValueTemplate ? this.props.displayValueTemplate(this.props.value) : this.props.value + this.props.unit;
-            return (
-                <div className="p-progressbar-label">{label}</div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderDeterminate() {
-        let className = classNames('p-progressbar p-component p-progressbar-determinate', this.props.className);
-        let label = this.renderLabel();
-
-        return (
-            <div  role="progressbar" id={this.props.id} className={className} style={this.props.style} aria-valuemin="0" aria-valuenow={this.props.value} aria-valuemax="100" aria-label={this.props.value}>
-                <div className="p-progressbar-value p-progressbar-value-animate" style={{width: this.props.value + '%', display: 'block'}}></div>
-                {label}
-            </div>
-        );
-    }
-
-    renderIndeterminate() {
-        let className = classNames('p-progressbar p-component p-progressbar-indeterminate', this.props.className);
-
-        return (
-            <div role="progressbar" id={this.props.id} className={className} style={this.props.style}>
-                <div className="p-progressbar-indeterminate-container">
-                    <div className="p-progressbar-value p-progressbar-value-animate"></div>
-                </div>
-            </div>
-        )
-    }
-
-    render() {
-        if (this.props.mode === 'determinate')
-            return this.renderDeterminate();
-        else if (this.props.mode === 'indeterminate')
-            return this.renderIndeterminate();
-        else
-            throw new Error(this.props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
-    }
-
-}
\ No newline at end of file
diff --git a/src/components/progressspinner/ProgressSpinner.css b/src/components/progressspinner/ProgressSpinner.css
deleted file mode 100644
index 087a8d4692..0000000000
--- a/src/components/progressspinner/ProgressSpinner.css
+++ /dev/null
@@ -1,72 +0,0 @@
-.p-progress-spinner {
-    position: relative;
-    margin: 0 auto;
-    width: 100px;
-    height: 100px;
-    display: inline-block;
-}
-
-.p-progress-spinner::before {
-     content: '';
-     display: block;
-     padding-top: 100%;
-}
-
-.p-progress-spinner-svg {
-    animation: p-progress-spinner-rotate 2s linear infinite;
-    height: 100%;
-    transform-origin: center center;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-}
-
-.p-progress-spinner-circle {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: 0;
-    stroke: #d62d20;
-    animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
-    stroke-linecap: round;
-}
-
-@keyframes p-progress-spinner-rotate {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes p-progress-spinner-dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-@keyframes p-progress-spinner-color {
-    100%,
-    0% {
-        stroke: #d62d20;
-    }
-    40% {
-        stroke: #0057e7;
-    }
-    66% {
-        stroke: #008744;
-    }
-    80%,
-    90% {
-        stroke: #ffa700;
-    }
-}
diff --git a/src/components/progressspinner/ProgressSpinner.d.ts b/src/components/progressspinner/ProgressSpinner.d.ts
deleted file mode 100644
index a662841d81..0000000000
--- a/src/components/progressspinner/ProgressSpinner.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react';
-
-interface ProgressSpinnerProps {
-    id?: string;
-    style?: object;
-    className?: string;
-    strokeWidth?: string;
-    fill?: string;
-    animationDuration?: string
-}
-
-export class ProgressSpinner extends React.Component<ProgressSpinnerProps,any> {}
\ No newline at end of file
diff --git a/src/components/progressspinner/ProgressSpinner.js b/src/components/progressspinner/ProgressSpinner.js
deleted file mode 100644
index d9265bcccd..0000000000
--- a/src/components/progressspinner/ProgressSpinner.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class ProgressSpinner extends Component {
-
-    static defaultProps = {
-        id: null,
-        style: null,
-        className: null,
-        strokeWidth: "2",
-        fill: "none",
-        animationDuration: "2s"
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        strokeWidth: PropTypes.string,
-        fill: PropTypes.string,
-        animationDuration: PropTypes.string
-    };
-
-    render() {
-        let spinnerClass = classNames('p-progress-spinner',this.props.className);
-
-        return <div id={this.props.id} style={this.props.style} className={spinnerClass} role="alert" aria-busy={true}>
-            <svg className="p-progress-spinner-svg" viewBox="25 25 50 50" style={{animationDuration: this.props.animationDuration}}>
-                <circle className="p-progress-spinner-circle" cx="50" cy="50" r="20" fill={this.props.fill}
-                        strokeWidth={this.props.strokeWidth} strokeMiterlimit="10"/>
-            </svg>
-        </div>;
-    }
-}
diff --git a/src/components/radiobutton/RadioButton.css b/src/components/radiobutton/RadioButton.css
deleted file mode 100644
index 4f71c4fae1..0000000000
--- a/src/components/radiobutton/RadioButton.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.p-radiobutton {
-    display:inline-block;
-    cursor: pointer;
-    vertical-align: middle;
-    margin-right: .25em;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-}
-
-.p-radiobutton .p-radiobutton-box {
-    width: 1.125em;
-    height: 1.125em;
-    line-height: 1.125em;
-    -moz-border-radius: 100%;
-    -webkit-border-radius: 100%;
-    border-radius: 100%;
-    text-align: center;
-    position: relative;
-}
-
-.p-radiobutton .p-radiobutton-icon {
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 1em;
-    height: 1em;
-    margin-top: -.5em;
-    margin-left: -.5em;
-}
- 
-.p-radiobutton + label {
-    vertical-align: middle;
-}
\ No newline at end of file
diff --git a/src/components/radiobutton/RadioButton.d.ts b/src/components/radiobutton/RadioButton.d.ts
deleted file mode 100644
index 9c902392ef..0000000000
--- a/src/components/radiobutton/RadioButton.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface RadioButtonProps {
-    id?: string;
-    inputId?: string;
-    name?: string;
-    value?: any;
-    checked?: boolean;
-    style?: object;
-    className?: string;
-    disabled?: boolean;
-    required?: boolean;
-    tabIndex?: number;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    onChange?(e: {originalEvent: Event, value: any, checked: boolean, target: {type: string, name: string, id: string, value: any, checked: boolean}}): void;
-}
-
-export class RadioButton extends React.Component<RadioButtonProps,any> {}
diff --git a/src/components/radiobutton/RadioButton.js b/src/components/radiobutton/RadioButton.js
deleted file mode 100644
index f1789d496b..0000000000
--- a/src/components/radiobutton/RadioButton.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-
-export class RadioButton extends Component {
-
-    static defaultProps = {
-        id: null,
-        inputId: null,
-        name: null,
-        value: null,
-        checked: false,
-        style: null,
-        className: null,
-        disabled: false,
-        required: false,
-        tabIndex: null,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        inputId: PropTypes.string,
-        value: PropTypes.any,
-        checked: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        required: PropTypes.bool,
-        tabIndex: PropTypes.number,
-        onChange: PropTypes.func,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-
-        this.onClick = this.onClick.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-    }
-
-    select(e) {
-        this.input.checked = true;
-        this.onClick(e);
-    }
-
-    onClick(e) {
-        if(!this.props.disabled && this.props.onChange) {
-            this.props.onChange({
-                originalEvent: e,
-                value: this.props.value,
-                checked: !this.props.checked,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value:  this.props.value,
-                    checked: !this.props.checked
-                }
-            });
-
-            this.input.checked = !this.props.checked;
-            this.input.focus();
-        }
-    }
-
-    onFocus() {
-        this.setState({focused: true});
-    }
-
-    onBlur() {
-        this.setState({focused: false});
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        if(this.input) {
-            this.input.checked = this.props.checked;
-        }
-
-        let containerClass = classNames('p-radiobutton p-component', this.props.className);
-        let boxClass = classNames('p-radiobutton-box p-component', {'p-highlight': this.props.checked, 'p-disabled': this.props.disabled, 'p-focus': this.state.focused});
-        let iconClass = classNames('p-radiobutton-icon p-c', { 'pi pi-circle-on': this.props.checked });
-
-        return (
-            <div ref={(el) => this.element = el} id={this.props.id} className={containerClass} style={this.props.style} onClick={this.onClick}>
-                <div className="p-hidden-accessible">
-                    <input id={this.props.inputId} ref={(el) => this.input = el} type="radio" aria-labelledby={this.props.ariaLabelledBy} name={this.props.name} defaultChecked={this.props.checked}
-                        onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} required={this.props.required} tabIndex={this.props.tabIndex}/>
-                </div>
-                <div className={boxClass} ref={(el) => { this.box = el; }} role="radio" aria-checked={this.props.checked}>
-                    <span className={iconClass}></span>
-                </div>
-            </div>
-        )
-    }
-}
diff --git a/src/components/rating/Rating.css b/src/components/rating/Rating.css
deleted file mode 100644
index 2fb626700d..0000000000
--- a/src/components/rating/Rating.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.p-rating .p-rating-icon {
-    cursor: pointer;
-}
-
-.p-rating {
-    font-size: 1.25em;
-}
-
-.p-rating.p-disabled .p-rating-icon,
-.p-rating.p-rating-readonly .p-rating-icon {
-    cursor: default;
-}
\ No newline at end of file
diff --git a/src/components/rating/Rating.d.ts b/src/components/rating/Rating.d.ts
deleted file mode 100644
index 75fff75b1d..0000000000
--- a/src/components/rating/Rating.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface RatingProps {
-    id?: string;
-    value?: number;
-    disabled?: boolean;
-    readonly?: boolean;
-    stars?: number;
-    cancel?: boolean;
-    style?: object;
-    className?: string;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    onChange?(e: {originalEvent: Event, value: number, target: {name: string, id: string, value: number}}): void;
-}
-
-export class Rating extends React.Component<RatingProps,any> {}
diff --git a/src/components/rating/Rating.js b/src/components/rating/Rating.js
deleted file mode 100644
index d4ee62c7d4..0000000000
--- a/src/components/rating/Rating.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-
-export class Rating extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        disabled: false,
-        readonly: false,
-        stars: 5,
-        cancel: true,
-        style: null,
-        className: null,
-        tooltip: null,
-        tooltipOptions: null,
-        onChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.number,
-        disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
-        stars: PropTypes.number,
-        cancel: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        onChange: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.clear = this.clear.bind(this);
-        this.onStarKeyDown = this.onStarKeyDown.bind(this);
-        this.onCancelKeyDown = this.onCancelKeyDown.bind(this);
-    }
-
-    rate(event, i) {
-        if (!this.props.readonly && !this.props.disabled && this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: i,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: i
-                }
-            });
-        }
-        
-        event.preventDefault();        
-    }
-    
-    clear(event) {
-        if (!this.props.readonly && !this.props.disabled && this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: null,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: null
-                }
-            });
-        }
-        
-        event.preventDefault();
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        if (nextProps.value === this.props.value && nextProps.disabled === this.props.disabled) {
-            return false;
-        }
-
-        return true;
-    }
-
-    onStarKeyDown(event, value) {
-        if (event.key === 'Enter') {
-            this.rate(event, value);
-        }
-    }
-
-    onCancelKeyDown(event) {
-        if (event.key === 'Enter') {
-            this.clear(event);
-        }
-    }
-
-    renderStars() {
-        let starsArray = [];
-        for (var i = 0; i < this.props.stars; i++) {
-            starsArray[i] = i + 1;
-        }
-
-        let stars = starsArray.map((value) => {
-            let iconClass = classNames('p-rating-icon pi', {
-                'pi-star-o': (!this.props.value || value > this.props.value),
-                'pi-star': (value <= this.props.value)
-            });
-            
-            return (
-                <span className={iconClass} onClick={(e) => this.rate(e, value)} key={value} tabIndex={this.props.disabled||this.props.readonly ? null : '0'} onKeyDown={(e) => this.onStarKeyDown(e, value)}></span>
-            );
-        });
-
-        return stars;
-    }
-
-    renderCancelIcon() {
-        if (this.props.cancel) {
-            return (
-                <span className="p-rating-icon p-rating-cancel pi pi-ban" onClick={this.clear} tabIndex={this.props.disabled||this.props.readonly ? null : '0'}   onKeyDown={this.onCancelKeyDown}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        let className = classNames('p-rating', this.props.className, {'p-disabled': this.props.disabled, 'p-rating-readonly': this.props.readonly});
-        let cancelIcon = this.renderCancelIcon();        
-        let stars = this.renderStars();
-                        
-        return (
-            <div ref={(el) => this.element = el} id={this.props.id} className={className} style={this.props.style}>
-                {cancelIcon}
-                {stars}
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/row/Row.d.ts b/src/components/row/Row.d.ts
deleted file mode 100644
index 299b1e4160..0000000000
--- a/src/components/row/Row.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-
-interface RowProps {
-    style?: object;
-    className?: string;
-}
-
-export class Row extends React.Component<RowProps,any> {}
\ No newline at end of file
diff --git a/src/components/row/Row.js b/src/components/row/Row.js
deleted file mode 100644
index f7bf53d779..0000000000
--- a/src/components/row/Row.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-export class Row extends Component {
-
-    static defaultProps = {
-        style: null,
-        className: null
-    }
-
-    static propTypes = {
-        style: PropTypes.object,
-        className: PropTypes.string
-    }
-
-    render() {
-        return <tr>{this.props.children}</tr>;
-    }
-}
\ No newline at end of file
diff --git a/src/components/scrollpanel/ScrollPanel.css b/src/components/scrollpanel/ScrollPanel.css
deleted file mode 100644
index 80ee14086c..0000000000
--- a/src/components/scrollpanel/ScrollPanel.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.p-scrollpanel-wrapper {
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    z-index: 1;
-    float: left;
-}
-
-.p-scrollpanel-content {
-    height: calc(100% + 18px);
-    width: calc(100% + 18px);
-    padding: 0 18px 18px 0;
-    position: relative;
-    overflow: auto;
-    box-sizing: border-box;
-}
-
-.p-scrollpanel-bar {
-    position: relative;
-    background: #c1c1c1;
-    border-radius: 3px;
-    z-index: 2;
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 0.25s linear;
-}
-
-.p-scrollpanel-bar-y {
-    width: 9px;
-    top: 0;
-}
-
-.p-scrollpanel-bar-x {
-    height: 9px;
-    bottom: 0;
-}
-
-.p-scrollpanel-hidden {
-    visibility: hidden;
-}
-
-.p-scrollpanel:hover .p-scrollpanel-bar,
-.p-scrollpanel:active .p-scrollpanel-bar {
-    opacity: 1;
-}
-
-.p-scrollpanel-grabbed {
-    -o-user-select: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
\ No newline at end of file
diff --git a/src/components/scrollpanel/ScrollPanel.d.ts b/src/components/scrollpanel/ScrollPanel.d.ts
deleted file mode 100644
index 9cad26bc9a..0000000000
--- a/src/components/scrollpanel/ScrollPanel.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-interface ScrollPanelProps {
-    id?: string;
-    style?: object;
-    className?: string;
-}
-
-export class ScrollPanel extends React.Component<ScrollPanelProps,any> {}
\ No newline at end of file
diff --git a/src/components/scrollpanel/ScrollPanel.js b/src/components/scrollpanel/ScrollPanel.js
deleted file mode 100644
index f719b60beb..0000000000
--- a/src/components/scrollpanel/ScrollPanel.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames';
-
-export class ScrollPanel extends Component {
-
-    static defaultProps = {
-        id: null,
-        style: null,
-        className: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.moveBar = this.moveBar.bind(this);
-        this.onXBarMouseDown = this.onXBarMouseDown.bind(this);
-        this.onYBarMouseDown = this.onYBarMouseDown.bind(this);
-
-        this.onDocumentMouseMove = this.onDocumentMouseMove.bind(this);
-        this.onDocumentMouseUp = this.onDocumentMouseUp.bind(this);
-    }
-
-    calculateContainerHeight() {
-        let containerStyles = getComputedStyle(this.container),
-        xBarStyles = getComputedStyle(this.xBar),
-        pureContainerHeight = DomHandler.getHeight(this.container) - parseInt(xBarStyles['height'], 10);
-
-        if (containerStyles['max-height'] !== "none" && pureContainerHeight === 0) {
-            if(this.content.offsetHeight + parseInt(xBarStyles['height'], 10) > parseInt(containerStyles['max-height'], 10)) {
-                this.container.style.height = containerStyles['max-height'];
-            }
-            else {
-                this.container.style.height = this.content.offsetHeight + parseFloat(containerStyles.paddingTop) + parseFloat(containerStyles.paddingBottom) + parseFloat(containerStyles.borderTopWidth) + parseFloat(containerStyles.borderBottomWidth) + "px";
-            }
-        }
-    }
-
-    moveBar() {
-        /* horizontal scroll */
-        let totalWidth = this.content.scrollWidth;
-        let ownWidth = this.content.clientWidth;
-        let bottom = (this.container.clientHeight - this.xBar.clientHeight) * -1;
-
-        this.scrollXRatio = ownWidth / totalWidth;
-
-        /* vertical scroll */
-        let totalHeight = this.content.scrollHeight;
-        let ownHeight = this.content.clientHeight;
-        let right = (this.container.clientWidth - this.yBar.clientWidth) * -1;
-
-        this.scrollYRatio = ownHeight / totalHeight;
-
-        this.frame = this.requestAnimationFrame(() => {
-            if (this.scrollXRatio >= 1) {
-                DomHandler.addClass(this.xBar, 'p-scrollpanel-hidden');
-            }
-            else {
-                DomHandler.removeClass(this.xBar, 'p-scrollpanel-hidden');
-                this.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
-            }
-
-            if (this.scrollYRatio >= 1) {
-                DomHandler.addClass(this.yBar, 'p-scrollpanel-hidden');
-            }
-            else {
-                DomHandler.removeClass(this.yBar, 'p-scrollpanel-hidden');
-                this.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.content.scrollTop / totalHeight) * 100 + '% - ' + this.xBar.clientHeight + 'px);right:' + right + 'px;';
-            }
-        });
-    }
-
-    onYBarMouseDown(e) {
-        this.isYBarClicked = true;
-        this.lastPageY = e.pageY;
-        DomHandler.addClass(this.yBar, 'p-scrollpanel-grabbed');
-        DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
-
-        document.addEventListener('mousemove', this.onDocumentMouseMove);
-        document.addEventListener('mouseup', this.onDocumentMouseUp);
-        e.preventDefault();
-    }
-
-    onXBarMouseDown(e) {
-        this.isXBarClicked = true;
-        this.lastPageX = e.pageX;
-        DomHandler.addClass(this.xBar, 'p-scrollpanel-grabbed');
-        DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
-
-        document.addEventListener('mousemove', this.onDocumentMouseMove);
-        document.addEventListener('mouseup', this.onDocumentMouseUp);
-        e.preventDefault();
-    }
-
-    onDocumentMouseMove(e) {
-        if(this.isXBarClicked) {
-            this.onMouseMoveForXBar(e);
-        }
-        else if(this.isYBarClicked) {
-            this.onMouseMoveForYBar(e);
-        }
-        else {
-            this.onMouseMoveForXBar(e);
-            this.onMouseMoveForYBar(e);
-        }
-        
-    }
-
-    onMouseMoveForXBar(e) {
-        let deltaX = e.pageX - this.lastPageX;
-        this.lastPageX = e.pageX;
-
-        this.frame = this.requestAnimationFrame(() => {
-            this.content.scrollLeft += deltaX / this.scrollXRatio;
-        });
-    }
-
-    onMouseMoveForYBar(e) {
-        let deltaY = e.pageY - this.lastPageY;
-        this.lastPageY = e.pageY;
-
-        this.frame = this.requestAnimationFrame(() => {
-            this.content.scrollTop += deltaY / this.scrollYRatio;
-        });
-    }
-
-    onDocumentMouseUp(e) {
-        DomHandler.removeClass(this.yBar, 'p-scrollpanel-grabbed');
-        DomHandler.removeClass(this.xBar, 'p-scrollpanel-grabbed');
-        DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
-
-        document.removeEventListener('mousemove', this.onDocumentMouseMove);
-        document.removeEventListener('mouseup', this.onDocumentMouseUp);
-        this.isXBarClicked = false;
-        this.isYBarClicked = false;
-    }
-
-    requestAnimationFrame(f) {
-        let frame = window.requestAnimationFrame || this.timeoutFrame;
-        return frame(f);
-    }
-
-    refresh() {
-        this.moveBar();
-    }
-
-    componentDidMount() {
-        this.moveBar();
-        this.moveBar = this.moveBar.bind(this);
-
-        window.addEventListener('resize', this.moveBar);
-        
-        this.calculateContainerHeight();
-        this.initialized = true;
-    }
-
-    componentWillUnmount() {
-        if (this.initialized) {
-            window.removeEventListener('resize', this.moveBar);
-        }
-
-        if (this.frame) {
-            window.cancelAnimationFrame(this.frame);
-        }
-    }
-
-    render() {
-        let className = classNames('p-scrollpanel p-component', this.props.className);
-
-        return (
-            <div ref={(el) => { this.container = el; }} id={this.props.id} className={className} style={this.props.style}>
-                <div className="p-scrollpanel-wrapper">
-                    <div ref={(el) => { this.content = el; }} className="p-scrollpanel-content" onScroll={this.moveBar} onMouseEnter={this.moveBar}>
-                        {this.props.children}
-                    </div>
-                </div>
-                <div ref={(el) => { this.xBar = el; }} className="p-scrollpanel-bar p-scrollpanel-bar-x" onMouseDown={this.onXBarMouseDown}></div>
-                <div ref={(el) => { this.yBar = el; }} className="p-scrollpanel-bar p-scrollpanel-bar-y" onMouseDown={this.onYBarMouseDown}></div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/selectbutton/SelectButton.css b/src/components/selectbutton/SelectButton.css
deleted file mode 100644
index 89f65efd61..0000000000
--- a/src/components/selectbutton/SelectButton.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.p-selectbutton{
-    display: inline-block;
-}
-            
-.p-selectbutton.p-state-error {
-    padding: 0;
-}
-
-.p-selectbutton .p-button.p-state-focus{
-    outline: none;
-}
\ No newline at end of file
diff --git a/src/components/selectbutton/SelectButton.d.ts b/src/components/selectbutton/SelectButton.d.ts
deleted file mode 100644
index be4ff9cfa8..0000000000
--- a/src/components/selectbutton/SelectButton.d.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface SelectButtonProps {
-    id?: string;
-    value?: any;
-    options?: any[];
-    optionLabel?: string;
-    optionValue?: string;
-    tabIndex?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    style?: object;
-    className?: string;
-    dataKey?: string;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    itemTemplate?(option:any): React.ReactNode;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-}
-
-export class SelectButton extends React.Component<SelectButtonProps,any> {}
diff --git a/src/components/selectbutton/SelectButton.js b/src/components/selectbutton/SelectButton.js
deleted file mode 100644
index d6c0deb1b4..0000000000
--- a/src/components/selectbutton/SelectButton.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-import {SelectButtonItem} from './SelectButtonItem';
-import Tooltip from "../tooltip/Tooltip";
-
-export class SelectButton extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        options: null,
-        optionLabel: null,
-        optionValue: null,
-        tabIndex: null,
-        multiple: null,
-        disabled: null,
-        style: null,
-        className: null,
-        dataKey: null,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        itemTemplate: null,
-        onChange: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        options: PropTypes.array,
-        optionLabel: PropTypes.string,
-        optionValue: PropTypes.string,
-        tabIndex: PropTypes.string,
-        multiple: PropTypes.bool,
-        disabled: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        dataKey: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        itemTemplate: PropTypes.func,
-        onChange: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.onOptionClick = this.onOptionClick.bind(this);
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    onOptionClick(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        let selected = this.isSelected(event.option);
-        let optionValue = this.getOptionValue(event.option);
-        let newValue;
-
-        if (this.props.multiple) {
-            let currentValue = this.props.value ? [...this.props.value] : [];
-
-            if (selected)
-                newValue = currentValue.filter((val) => !ObjectUtils.equals(val, optionValue, this.props.dataKey));
-            else
-                newValue = [...currentValue, optionValue];
-        }
-        else {
-            if (selected)
-                newValue = null;
-            else
-                newValue = optionValue;
-        }
-
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event.originalEvent,
-                value: newValue,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: newValue,
-                }
-            });
-        }
-    }
-
-    getOptionLabel(option) {
-        return this.props.optionLabel ? ObjectUtils.resolveFieldData(option, this.props.optionLabel) : (option['label'] !== undefined ? option['label'] : option);
-    }
-
-    getOptionValue(option) {
-        return this.props.optionValue ? ObjectUtils.resolveFieldData(option, this.props.optionValue) : (option['value'] !== undefined ? option['value'] : option);
-    }
-
-    isSelected(option) {
-        let selected = false;
-        let optionValue = this.getOptionValue(option);
-
-        if (this.props.multiple) {
-            if (this.props.value && this.props.value.length) {
-                for (let val of this.props.value) {
-                    if (ObjectUtils.equals(val, optionValue, this.props.dataKey)) {
-                        selected = true;
-                        break;
-                    }
-                }
-            }
-        }
-        else {
-            selected = ObjectUtils.equals(this.props.value, optionValue, this.props.dataKey);
-        }
-
-        return selected;
-    }
-
-    renderItems() {
-        if (this.props.options && this.props.options.length) {
-            return this.props.options.map((option, index) => {
-                let optionLabel = this.getOptionLabel(option);
-
-                return <SelectButtonItem key={optionLabel} label={optionLabel} className={option.className} option={option} onClick={this.onOptionClick} template={this.props.itemTemplate}
-                            selected={this.isSelected(option)} tabIndex={this.props.tabIndex} disabled={this.props.disabled} ariaLabelledBy={this.props.ariaLabelledBy}/>;
-            });
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-selectbutton p-buttonset p-component p-buttonset-3', this.props.className);
-        let items = this.renderItems();
-
-        return (
-            <div id={this.props.id} ref={(el) => this.element = el} role="group">
-                <div className={className} style={this.props.style}>
-                    {items}
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/components/selectbutton/SelectButtonItem.js b/src/components/selectbutton/SelectButtonItem.js
deleted file mode 100644
index b3a4e029ca..0000000000
--- a/src/components/selectbutton/SelectButtonItem.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class SelectButtonItem extends Component {
-
-    static defaultProps = {
-        option: null,
-        label: null,
-        className: null,
-        selected: null,
-        tabIndex: null,
-        ariaLabelledBy: null,
-        template: null,
-        onClick: null
-    };
-
-    static propTypes = {
-        option: PropTypes.object,
-        label: PropTypes.string,
-        className: PropTypes.string,
-        selected: PropTypes.bool,
-        tabIndex: PropTypes.number,
-        ariaLabelledBy: PropTypes.string,
-        template: PropTypes.func,
-        onClick: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.onClick = this.onClick.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    onClick(event) {
-        if (this.props.onClick) {
-            this.props.onClick({
-                originalEvent: event,
-                option: this.props.option
-            });
-
-            this.input.focus();
-        }
-    }
-
-    onFocus() {
-        this.setState({focused: true});
-    }
-
-    onBlur() {
-        this.setState({focused: false});
-    }
-
-    onKeyDown(event) {
-        if (event.key === 'Enter') {
-            this.onClick(event);
-            event.preventDefault();
-        }
-    }
-
-    componentDidUpdate() {
-        this.input.checked = this.props.selected;
-    }
-
-    renderContent() {
-        if (this.props.template) {
-            return this.props.template(this.props.option);
-        }
-        else {
-            return (
-                <span className="p-button-text p-c">{this.props.label}</span>
-            );
-        }
-    }
-
-    render() {
-        const className = classNames(this.props.option.className, 'p-button p-component p-button-text-only', this.props.className, {
-            'p-highlight': this.props.selected,
-            'p-disabled': this.props.disabled,
-            'p-focus': this.state.focused
-        });
-        const content = this.renderContent();
-
-        return (
-            <div ref={(el) => this.el = el} className={className} onClick={this.onClick} role="button" aria-pressed={this.props.selected} aria-labelledby={this.props.ariaLabelledBy}>
-                {content}
-                <div className="p-hidden-accessible">
-                    <input ref={(el) => this.input = el} type="checkbox" defaultChecked={this.props.selected} onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}
-                        tabIndex={this.props.tabIndex} disabled={this.props.disabled} value={this.props.label}/>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/components/selectitem/SelectItem.d.ts b/src/components/selectitem/SelectItem.d.ts
deleted file mode 100644
index 9c7e3f1783..0000000000
--- a/src/components/selectitem/SelectItem.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface SelectItem {
-    label?: string;
-    value: any;
-    className?: string;
-    icon?: string;
-    title?: string;
-    disabled?: boolean;
-}
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.css b/src/components/sidebar/Sidebar.css
deleted file mode 100644
index aa267bee09..0000000000
--- a/src/components/sidebar/Sidebar.css
+++ /dev/null
@@ -1,125 +0,0 @@
-.p-sidebar {
-    position: fixed;
-    padding: .5em 1em;
-    -webkit-transition: transform .3s;
-    transition: transform .3s;
-}
-
-.p-sidebar-left {
-    top: 0;
-    left: 0;
-    width: 20em;
-    height: 100%;
-    -webkit-transform: translateX(-100%);
-    -ms-transform: translateX(-100%);
-    transform: translateX(-100%);
-}
-
-.p-sidebar-right {
-    top: 0;
-    right: 0;
-    width: 20em;
-    height: 100%;
-    -webkit-transform: translateX(100%);
-    -ms-transform: translateX(100%);
-    transform: translateX(100%);
-}
-
-.p-sidebar-top {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 10em;
-    -webkit-transform: translateY(-100%);
-    -ms-transform: translateY(-100%);
-    transform: translateY(-100%);
-}
-
-.p-sidebar-bottom {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 10em;
-    -webkit-transform: translateY(100%);
-    -ms-transform: translateY(100%);
-    transform: translateY(100%);
-}
-
-.p-sidebar-full {
-    width: 100%;
-    height: 100%;
-    left: 0;
-    -webkit-transition: transform 0s;
-    transition: transform 0s;
-}
-
-.p-sidebar-full.p-sidebar-active {
-    animation: p-fadein .25s;
-    -moz-animation: p-fadein .25s; /* Firefox */
-    -webkit-animation: p-fadein .25s; /* Safari and Chrome */
-    -o-animation: p-fadein .25s; /* Opera */
-}
-
-.p-sidebar-left.p-sidebar-active,
-.p-sidebar-right.p-sidebar-active {
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0)
-}
-
-.p-sidebar-left.p-sidebar-sm,
-.p-sidebar-right.p-sidebar-sm {
-    width: 20em;
-}
-
-.p-sidebar-left.p-sidebar-md,
-.p-sidebar-right.p-sidebar-md {
-    width: 40em;
-}
-
-.p-sidebar-left.p-sidebar-lg,
-.p-sidebar-right.p-sidebar-lg {
-    width: 60em;
-}
-
-.p-sidebar-top.p-sidebar-active,
-.p-sidebar-bottom.p-sidebar-active {
-    -webkit-transform: translateY(0);
-    -ms-transform: translateY(0);
-    transform: translateY(0)
-}
-
-.p-sidebar-top.p-sidebar-sm,
-.p-sidebar-bottom.p-sidebar-sm {
-    height: 10em;
-}
-
-.p-sidebar-top.p-sidebar-md,
-.p-sidebar-bottom.p-sidebar-md {
-    height: 20em;
-}
-
-.p-sidebar-top.p-sidebar-lg,
-.p-sidebar-bottom.p-sidebar-lg {
-    height: 30em;
-}
-
-.p-sidebar-mask {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-}
-
-.p-sidebar-close {
-    float: right;
-    cursor: pointer;
-}
-
-@media screen and (max-width: 64em) {
-    .p-sidebar-left.p-sidebar-lg,
-    .p-sidebar-left.p-sidebar-md,
-    .p-sidebar-right.p-sidebar-lg,
-    .p-sidebar-right.p-sidebar-md {
-        width: 20em;
-    }
-}
\ No newline at end of file
diff --git a/src/components/sidebar/Sidebar.d.ts b/src/components/sidebar/Sidebar.d.ts
deleted file mode 100644
index cbb887f189..0000000000
--- a/src/components/sidebar/Sidebar.d.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-
-interface SidebarProps {
-    id?: string;
-    style?: object;
-    className?: string;
-    visible?: boolean;
-    position?: string;
-    fullScreen?: boolean;
-    blockScroll?: boolean;
-    baseZIndex?: number;
-    dismissable?: boolean;
-    showCloseIcon?: boolean;
-    ariaCloseLabel?: string;
-    closeOnEscape?: boolean;
-    iconsTemplate?(): JSX.Element | undefined;
-    modal?: boolean;
-    onShow?(): void;
-    onHide(): void;
-}
-
-export class Sidebar extends React.Component<SidebarProps,any> {}
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
deleted file mode 100644
index f194cdfb36..0000000000
--- a/src/components/sidebar/Sidebar.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class Sidebar extends Component {
-
-    static defaultProps = {
-        id: null,
-        style: null,
-        className: null,
-        visible: false,
-        position: 'left',
-        fullScreen: false,
-        blockScroll: false,
-        baseZIndex: 0,
-        dismissable: true,
-        showCloseIcon: true,
-        ariaCloseLabel: 'close',
-        closeOnEscape: true,
-        iconsTemplate: null,
-        modal: true,
-        onShow: null,
-        onHide: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        visible: PropTypes.bool,
-        position: PropTypes.string,
-        fullScreen: PropTypes.bool,
-        blockScroll: PropTypes.bool,
-        baseZIndex: PropTypes.number,
-        dismissable: PropTypes.bool,
-        showCloseIcon: PropTypes.bool,
-        ariaCloseLabel: PropTypes.string,
-        closeOnEscape: PropTypes.bool,
-        iconsTemplate: PropTypes.func,
-        modal: PropTypes.bool,
-        onShow: PropTypes.func,
-        onHide: PropTypes.func.isRequired
-    };
-
-    constructor(props) {
-        super(props);
-        this.onCloseClick = this.onCloseClick.bind(this);
-    }
-
-    componentDidMount() {
-        if (this.props.visible) {
-            this.onShow();
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindMaskClickListener();
-        this.disableModality();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevProps.visible !== this.props.visible) {
-            if (this.props.visible)
-                this.onShow();
-            else
-                this.onHide();
-        }
-
-        if (this.mask && prevProps.dismissable !== this.props.dismissable) {
-            if (this.props.dismissable) {
-                this.bindMaskClickListener();
-            }
-            else {
-                this.unbindMaskClickListener();
-            }
-        }
-    }
-
-    onShow() {
-        this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-
-        if (this.props.modal) {
-            this.enableModality();
-        }
-
-        if (this.props.closeOnEscape) {
-            this.bindDocumentEscapeListener();
-        }
-
-        if (this.closeIcon) {
-            this.closeIcon.focus();
-        }
-
-        if (this.props.onShow) {
-            this.props.onShow();
-        }
-    }
-
-    enableModality() {
-        if (!this.mask) {
-            this.mask = document.createElement('div');
-            this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
-            let maskStyleClass = 'p-component-overlay p-sidebar-mask';
-            if(this.props.blockScroll) {
-                maskStyleClass += ' p-sidebar-mask-scrollblocker';
-            }
-            DomHandler.addMultipleClasses(this.mask, maskStyleClass);
-
-            if (this.props.dismissable) {
-                this.bindMaskClickListener();
-            }
-
-            document.body.appendChild(this.mask);
-
-            if (this.props.blockScroll) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-            }
-        }
-    }
-
-    disableModality() {
-        if (this.mask) {
-            this.unbindMaskClickListener();
-            document.body.removeChild(this.mask);
-
-            if (this.props.blockScroll) {
-                let bodyChildren = document.body.children;
-                let hasBlockerMasks;
-                for (let i = 0; i < bodyChildren.length; i++) {
-                    let bodyChild = bodyChildren[i];
-                    if (DomHandler.hasClass(bodyChild, 'p-sidebar-mask-scrollblocker')) {
-                        hasBlockerMasks = true;
-                        break;
-                    }
-                }
-
-                if (!hasBlockerMasks) {
-                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                }
-            }
-            this.mask = null;
-        }
-    }
-
-    onCloseClick(event) {
-        this.props.onHide();
-        event.preventDefault();
-    }
-
-    onHide() {
-        this.unbindMaskClickListener();
-        this.unbindDocumentEscapeListener();
-
-        if (this.props.modal) {
-            this.disableModality();
-        }
-    }
-
-    bindDocumentEscapeListener() {
-        this.documentEscapeListener = (event) => {
-            if (event.which === 27) {
-                if (parseInt(this.container.style.zIndex, 10) === (DomHandler.getCurrentZIndex() + this.props.baseZIndex)) {
-                    this.onCloseClick(event);
-                }
-            }
-        };
-        document.addEventListener('keydown', this.documentEscapeListener);
-    }
-
-    unbindDocumentEscapeListener() {
-        if (this.documentEscapeListener) {
-            document.removeEventListener('keydown', this.documentEscapeListener);
-            this.documentEscapeListener = null;
-        }
-    }
-
-    bindMaskClickListener() {
-        if (!this.maskClickListener) {
-            this.maskClickListener = (event) => {
-                this.onCloseClick(event);
-            };
-            this.mask.addEventListener('click', this.maskClickListener);
-        }
-    }
-
-    unbindMaskClickListener() {
-        if (this.maskClickListener) {
-            this.mask.removeEventListener('click', this.maskClickListener);
-            this.maskClickListener = null;
-        }
-    }
-
-    renderCloseIcon() {
-        if (this.props.showCloseIcon) {
-            return (
-                <button type="button" ref={el => this.closeIcon = el} className="p-sidebar-close p-link" onClick={this.onCloseClick} aria-label={this.props.ariaCloseLabel}>
-                    <span className="p-sidebar-close-icon pi pi-times"/>
-                </button>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderIconsTemplate() {
-        if (this.props.iconsTemplate) {
-            return this.props.iconsTemplate(this);
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-sidebar p-component', this.props.className, 'p-sidebar-' + this.props.position,
-                                       {'p-sidebar-active': this.props.visible, 'p-sidebar-full': this.props.fullScreen});
-        const closeIcon = this.renderCloseIcon();
-        const iconsTemplate = this.renderIconsTemplate();
-
-        return (
-            <div ref={(el) => this.container=el} id={this.props.id} className={className} style={this.props.style} role="complementary">
-                {closeIcon}
-                {iconsTemplate}
-                {this.props.children}
-            </div>
-        );
-    }
-}
diff --git a/src/components/slidemenu/SlideMenu.css b/src/components/slidemenu/SlideMenu.css
deleted file mode 100644
index 1246ec43e0..0000000000
--- a/src/components/slidemenu/SlideMenu.css
+++ /dev/null
@@ -1,95 +0,0 @@
-.p-slidemenu {
-    width: 12.5em;
-    padding: .25em;
-}
-
-.p-slidemenu.p-slidemenu-dynamic {
-    position: absolute;
-    display: none;
-}
-
-.p-slidemenu .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
-.p-slidemenu ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.p-slidemenu .p-slidemenu-rootlist {
-    position: absolute;
-    top: 0;
-}
-
-.p-slidemenu .p-submenu-list {
-    display: none;
-    position: absolute;
-    top: 0;
-    width: 12.5em;
-    padding: .25em;
-}
-
-.p-slidemenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    position: relative;
-    text-decoration: none;
-}
-
-.p-slidemenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-slidemenu .p-menuitem-text {
-    vertical-align: middle;
-}
-
-.p-slidemenu .p-menuitem {
-    position: relative;
-    margin: .125em 0;
-}
-
-.p-slidemenu .p-menuitem-link .p-submenu-icon {
-    position: absolute;
-    margin-top: -.5em;
-    right: 0;
-    top: 50%;
-}
-
-.p-slidemenu .p-slidemenu-wrapper {
-    position: relative;
-}
-
-.p-slidemenu .p-slidemenu-content {
-    overflow-x: hidden;
-    overflow-y: auto;
-    position: relative;
-    height: 100%;
-}
-
-.p-slidemenu-backward {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    padding: 0.25em;
-    cursor: pointer;
-}
-
-.p-slidemenu-backward .p-slidemenu-backward-icon {
-    vertical-align: middle;
-}
-
-.p-slidemenu-backward span {
-    vertical-align: middle;
-}
-
-.p-slidemenu .p-menuitem-active {
-    position: static;
-}
-
-.p-slidemenu .p-menuitem-active > .p-submenu-list {
-    display: block;
-}
diff --git a/src/components/slidemenu/SlideMenu.d.ts b/src/components/slidemenu/SlideMenu.d.ts
deleted file mode 100644
index f6f3de0588..0000000000
--- a/src/components/slidemenu/SlideMenu.d.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-import {SyntheticEvent} from "react";
-
-interface SlideMenuProps {
-    id?: string;
-    model?: MenuItem[];
-    popup?: boolean;
-    style?: object;
-    className?: string;
-    easing?: string;
-    effectDuration?: number;
-    backLabel?: string;
-    menuWidth?: number;
-    viewportHeight?: number;
-    autoZIndex?: boolean;
-    baseZIndex?: number;
-    appendTo?: any;
-    onShow?(e: Event): void;
-    onHide?(e: Event): void;
-}
-
-export class SlideMenu extends React.Component<SlideMenuProps,any> {
-    public show(event:SyntheticEvent):void;
-    public hide(event:SyntheticEvent):void;
-    public toggle(event:SyntheticEvent):void;
-}
diff --git a/src/components/slidemenu/SlideMenu.js b/src/components/slidemenu/SlideMenu.js
deleted file mode 100644
index f1f9e53dd5..0000000000
--- a/src/components/slidemenu/SlideMenu.js
+++ /dev/null
@@ -1,376 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class SlideMenuSub extends Component {
-
-    static defaultProps = {     
-        model: null,
-        level: 0,
-        easing: 'ease-out',
-        effectDuration: 250,
-        menuWidth: 190,
-        parentActive: false,
-        onForward: null
-    }
-
-    static propTypes = {
-        model: PropTypes.any,
-        level: PropTypes.number,
-        easing: PropTypes.string,
-        effectDuration: PropTypes.number,
-        menuWidth: PropTypes.number,
-        parentActive: PropTypes.bool,
-        onForward: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeItem: null
-        };
-    }
-
-    onItemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (item.items) {
-            this.setState({
-                activeItem: item
-            });
-            this.props.onForward();
-        }
-    }
-
-    renderSeparator(index) {
-        return (
-            <li key={'separator_' + index} className="p-menu-separator"></li>
-        );
-    }
-    
-    renderIcon(item) {
-        const className = classNames('p-menuitem-icon', item.icon);
-        if (item.icon) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenuIcon(item) {
-        if (item.items) {
-            return (
-                <span className="p-submenu-icon pi pi-fw pi-caret-right"></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenu(item) {
-        if(item.items) {
-            return (
-                <SlideMenuSub model={item.items} index={this.props.index + 1} menuWidth={this.props.menuWidth} effectDuration={this.props.effectDuration}
-                    onForward={this.props.onForward} parentActive={item === this.state.activeItem} />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMenuitem(item, index) {
-        const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item, 'p-disabled': item.disabled}, item.className);
-        const icon = this.renderIcon(item);
-        const submenuIcon = this.renderSubmenuIcon(item);
-        const submenu = this.renderSubmenu(item);
-
-        return (
-            <li key={item.label + '_' + index} className={className} style={item.style}>
-                <a href={item.url || '#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.onItemClick(event, item, index)}>
-                    {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                    {submenuIcon}
-                </a>
-                {submenu}
-            </li>
-        );
-    }
-
-    renderItem(item, index) {
-        if (item.separator)
-            return this.renderSeparator(index);
-        else 
-            return this.renderMenuitem(item, index);
-    }
-
-    renderItems() {
-        if (this.props.model) {
-            return (
-                this.props.model.map((item, index) => {
-                    return this.renderItem(item, index);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-    
-    render() {
-        const className = classNames({'p-slidemenu-rootlist': this.props.root, 'p-submenu-list': !this.props.root, 'p-active-submenu': this.props.parentActive});
-        const style = {
-            width: this.props.menuWidth + 'px',
-            left: this.props.root ? (-1 * this.props.level * this.props.menuWidth) + 'px' : this.props.menuWidth + 'px',
-            transitionProperty: this.props.root ? 'left' : 'none',
-            transitionDuration: this.props.effectDuration + 'ms',
-            transitionTimingFunction: this.props.easing
-        };
-        const items = this.renderItems();
-
-        return (
-            <ul className={className} style={style}>
-                {items}
-            </ul>
-        );   
-    }
-}
-
-export class SlideMenu extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        popup: false,
-        style: null,
-        className: null,
-        easing: 'ease-out',
-        effectDuration: 250,
-        backLabel: 'Back',
-        menuWidth: 190,
-        viewportHeight: 175,
-        autoZIndex: true,
-        baseZIndex: 0,
-        appendTo: null,
-        onShow: null,
-        onHide: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        popup: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        easing: PropTypes.string,
-        effectDuration: PropTypes.number,
-        backLabel: PropTypes.string,
-        menuWidth: PropTypes.number,
-        viewportHeight: PropTypes.number,
-        autoZIndex: PropTypes.bool,
-        baseZIndex: PropTypes.number,
-        appendTo: PropTypes.any,
-        onShow: PropTypes.func,
-        onHide: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            level: 0
-        };
-        this.onMenuClick = this.onMenuClick.bind(this);
-        this.navigateBack = this.navigateBack.bind(this);
-        this.navigateForward = this.navigateForward.bind(this);
-    }
-
-    onMenuClick(event) {
-        this.selfClick = true;
-    }
-
-    navigateForward() {
-        this.setState({
-            level: this.state.level + 1 
-        });
-    }
-
-    navigateBack() {
-        this.setState({
-            level: this.state.level - 1 
-        });
-    }
-
-    renderBackward() {
-        const className = classNames('p-slidemenu-backward', {'p-hidden': this.state.level === 0});
-
-        return (
-            <div ref={el => this.backward = el} className={className} onClick={this.navigateBack}>
-                <span className="p-slidemenu-backward-icon pi pi-fw pi-caret-left"></span>
-                <span>{this.props.backLabel}</span>
-            </div>
-        );
-    }
-
-    componentDidMount() {
-        if (this.props.popup) {
-            this.bindDocumentClickListener();
-        }
-    }
-
-    toggle(event) {
-        if (this.props.popup) {
-            this.selfClick = true;
-
-            if (this.container.offsetParent)
-                this.hide(event);
-            else
-                this.show(event);
-        }
-    }
-
-    show(event) {
-        if (this.props.autoZIndex) {
-            this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-        }
-        this.container.style.display = 'block';
-
-        setTimeout(() => {
-            DomHandler.addClass(this.container, 'p-menu-overlay-visible');
-            DomHandler.removeClass(this.container, 'p-menu-overlay-hidden');
-        }, 1);
-
-        DomHandler.absolutePosition(this.container,  event.currentTarget);
-        this.bindDocumentResizeListener();
-        
-        if (this.props.onShow) {
-            this.props.onShow(event);
-        }
-    }
-
-    hide(event) {
-        if (this.container) {
-            DomHandler.addClass(this.container, 'p-menu-overlay-hidden');
-            DomHandler.removeClass(this.container, 'p-menu-overlay-visible');
-
-            setTimeout(() => {
-                if (this.container) {
-                    this.container.style.display = 'none';
-                    DomHandler.removeClass(this.container, 'p-menu-overlay-hidden');
-                }
-            }, 150);
-        }
-            
-        if (this.props.onHide) {
-            this.props.onHide(event);
-        }
-
-        this.unbindDocumentResizeListener();
-    }
-
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (!this.selfClick && this.container.offsetParent) {
-                    this.hide(event);
-                }
-
-                this.selfClick = false;
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    onLeafClick(event) {
-        this.setState({
-            resetMenu: true
-        });
-
-        event.stopPropagation();
-    }
-
-    bindDocumentResizeListener() {
-        if (!this.documentResizeListener) {
-            this.documentResizeListener = (event) => {
-                if(this.container.offsetParent) {
-                    this.hide(event);
-                }
-            };
-
-            window.addEventListener('resize', this.documentResizeListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if(this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    unbindDocumentResizeListener() {
-        if(this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (this.props.model !== prevProps.model) {
-            this.setState({ 
-                level: 0
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-    }
-    
-    renderElement() {
-        const className = classNames('p-slidemenu p-component', {'p-slidemenu-dynamic p-menu-overlay': this.props.popup});
-        const backward = this.renderBackward();
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style} ref={el => this.container = el} onClick={this.onMenuClick}>
-                <div className="p-slidemenu-wrapper" style={{height: this.props.viewportHeight + 'px'}}>
-                    <div className="p-slidemenu-content" ref={el => this.slideMenuContent = el}>
-                        <SlideMenuSub model={this.props.model} root={true} index={0} menuWidth={this.props.menuWidth} effectDuration={this.props.effectDuration} 
-                                level={this.state.level} parentActive={this.state.level === 0} onForward={this.navigateForward} />
-                    </div>
-                    {backward}
-                 </div>
-            </div>
-        );
-    }
-
-    render() {
-        const element = this.renderElement();
-        
-        if (this.props.appendTo)
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        else
-            return element;
-    }
-}
\ No newline at end of file
diff --git a/src/components/slider/Slider.css b/src/components/slider/Slider.css
deleted file mode 100644
index 391689d71c..0000000000
--- a/src/components/slider/Slider.css
+++ /dev/null
@@ -1,50 +0,0 @@
-.p-slider {
-	position: relative;
-	text-align: left;
-}
-.p-slider .p-slider-handle {
-	position: absolute;
-	width: 1.2em;
-	height: 1.2em;
-	cursor: default;
-	-ms-touch-action: none;
-    touch-action: none;
-    z-index: 1;
-}
-.p-slider .p-slider-range {
-	position: absolute;
-	font-size: .7em;
-	display: block;
-	border: 0;
-	background-position: 0 0;
-}
-
-.p-slider .p-slider-handle.p-slider-handle-active {
-    z-index: 2;
-}
-
-.p-slider-horizontal {
-	height: .8em;
-}
-.p-slider-horizontal .p-slider-handle {
-	top: -.3em;
-	margin-left: -.6em;
-}
-.p-slider-horizontal .p-slider-range {
-	top: 0;
-	height: 100%;
-}
-.p-slider-vertical {
-	width: .8em;
-	height: 100px;
-}
-.p-slider-vertical .p-slider-handle {
-	left: -.3em;
-	margin-left: 0;
-	margin-bottom: -.6em;
-}
-.p-slider-vertical .p-slider-range {
-	left: 0;
-    width: 100%;
-    bottom: 0;
-}
diff --git a/src/components/slider/Slider.d.ts b/src/components/slider/Slider.d.ts
deleted file mode 100644
index ef2bddabaf..0000000000
--- a/src/components/slider/Slider.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-interface SliderProps {
-    id?: string;
-    value?: number|[number, number];
-    min?: number;
-    max?: number;
-    orientation?: string;
-    step?: number;
-    range?: boolean;
-    style?: object;
-    className?: string;
-    disabled?: boolean;
-    tabIndex?:string;
-    ariaLabelledBy?: string;
-    onChange?(e: {originalEvent: Event, value: number|[number, number]}): void;
-    onSlideEnd?(e: {originalEvent: Event, value: number|[number, number]}): void;
-}
-
-export class Slider extends React.Component<SliderProps,any> {}
diff --git a/src/components/slider/Slider.js b/src/components/slider/Slider.js
deleted file mode 100644
index ad1228b7e5..0000000000
--- a/src/components/slider/Slider.js
+++ /dev/null
@@ -1,306 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types';
-import DomHandler from '../utils/DomHandler';
-import classNames from 'classnames'
-
-export class Slider extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        min: 0,
-        max: 100,
-        orientation: "horizontal",
-        step: null,
-        range: false,
-        style: null,
-        className: null,
-        disabled: false,
-        tabIndex: '0',
-        ariaLabelledBy: null,
-        onChange: null,
-        onSlideEnd: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        min: PropTypes.number,
-        max: PropTypes.number,
-        orientation: PropTypes.string,
-        step: PropTypes.number,
-        range: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        tabIndex: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func,
-        onSlideEnd: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.onBarClick = this.onBarClick.bind(this);
-
-        this.handleIndex = 0;
-    }
-
-    componentWillUnmount() {
-        this.unbindDragListeners();
-        this.unbindTouchListeners();
-    }
-
-    onDragStart(event, index) {
-        if (this.disabled) {
-            return;
-        }
-
-        this.dragging = true;
-        this.updateDomData();
-        this.sliderHandleClick = true;
-        this.handleIndex = index;
-        event.preventDefault();
-    }
-
-    onMouseDown(event, index) {
-        this.bindDragListeners();
-        this.onDragStart(event, index);
-    }
-
-    onTouchStart(event, index) {
-        this.bindTouchListeners();
-        this.onDragStart(event, index);
-    }
-
-    onBarClick(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        if (!this.sliderHandleClick) {
-            this.updateDomData();
-            this.setValue(event);
-        }
-
-        this.sliderHandleClick = false;
-    }
-
-    onDrag(event) {
-        if (this.dragging) {
-            this.setValue(event);
-            event.preventDefault();
-        }
-    }
-
-    onDragEnd(event) {
-        if (this.dragging) {
-            this.dragging = false;
-
-            if (this.props.onSlideEnd) {
-                if (this.props.range)
-                    this.props.onSlideEnd({originalEvent: event, values: this.props.value});
-                else
-                    this.props.onSlideEnd({originalEvent: event, value: this.props.value});
-            }
-
-            this.unbindDragListeners();
-            this.unbindTouchListeners();
-        }
-    }
-
-    bindDragListeners() {
-        if (!this.dragListener) {
-            this.dragListener = this.onDrag.bind(this);
-            document.addEventListener('mousemove', this.dragListener);
-        }
-
-        if (!this.dragEndListener) {
-            this.dragEndListener = this.onDragEnd.bind(this);
-            document.addEventListener('mouseup', this.dragEndListener);
-        }
-    }
-
-    unbindDragListeners() {
-        if (this.dragListener) {
-            document.removeEventListener('mousemove', this.dragListener);
-            this.dragListener = null;
-        }
-
-        if (this.dragEndListener) {
-            document.removeEventListener('mouseup', this.dragEndListener)
-            this.dragEndListener = null;
-        }
-    }
-
-    bindTouchListeners() {
-        if (!this.dragListener) {
-            this.dragListener = this.onDrag.bind(this);
-            document.addEventListener('touchmove', this.dragListener);
-        }
-
-        if (!this.dragEndListener) {
-            this.dragEndListener = this.onDragEnd.bind(this);
-            document.addEventListener('touchend', this.dragEndListener);
-        }
-    }
-
-    unbindTouchListeners() {
-        if (this.dragListener) {
-            document.removeEventListener('touchmove', this.dragListener);
-            this.dragListener = null;
-        }
-
-        if (this.dragEndListener) {
-            document.removeEventListener('touchend', this.dragEndListener)
-            this.dragEndListener = null;
-        }
-    }
-
-    updateDomData() {
-        let rect = this.el.getBoundingClientRect();
-        this.initX = rect.left + DomHandler.getWindowScrollLeft();
-        this.initY = rect.top + DomHandler.getWindowScrollTop();
-        this.barWidth = this.el.offsetWidth;
-        this.barHeight = this.el.offsetHeight;
-    }
-
-    setValue(event) {
-        let handleValue;
-        let pageX = event.touches ? event.touches[0].pageX : event.pageX;
-
-        if(this.props.orientation === 'horizontal')
-            handleValue = ((pageX - this.initX) * 100) / (this.barWidth);
-        else
-            handleValue = (((this.initY + this.barHeight) - event.pageY) * 100) / (this.barHeight);
-
-        let newValue = (this.props.max - this.props.min) * (handleValue / 100) + this.props.min;
-
-        if(this.props.step) {
-            const oldValue = this.props.range ? this.props.value[this.handleIndex] : this.props.value;
-            const diff = (newValue - oldValue);
-
-            if(diff < 0)
-                newValue = oldValue + Math.ceil(newValue / this.props.step - oldValue / this.props.step) * this.props.step;
-            else if(diff > 0)
-                newValue = oldValue + Math.floor(newValue / this.props.step - oldValue / this.props.step) * this.props.step;
-        }
-
-        this.updateValue(event, newValue);
-    }
-
-    updateValue(event, value) {
-        if(this.props.range) {
-            let newValue = value;
-
-            if (this.handleIndex === 0) {
-                if (newValue < this.props.min)
-                    newValue = this.props.min;
-                else if (newValue > this.props.value[1])
-                    newValue = this.props.value[1];
-            }
-            else {
-                if(newValue > this.props.max)
-                    newValue = this.props.max;
-                else if (newValue < this.props.value[0])
-                    newValue = this.props.value[0];
-            }
-
-            let newValues = [...this.props.value];
-            newValues[this.handleIndex] = Math.floor(newValue);
-
-            if (this.props.onChange) {
-                this.props.onChange({
-                    originalEvent: event,
-                    value: newValues
-                });
-            }
-        }
-        else {
-            let newValue = value;
-
-            if (newValue < this.props.min)
-                newValue = this.props.min;
-            else if (newValue > this.props.max)
-                newValue = this.props.max;
-
-            if (this.props.onChange) {
-                this.props.onChange({
-                    originalEvent: event,
-                    value: Math.floor(newValue)
-                });
-            }
-        }
-    }
-
-    renderHandle(leftValue, bottomValue, index) {
-        const handleClassName = classNames('p-slider-handle', {
-            'p-slider-handle-start': index === 0,
-            'p-slider-handle-end': index === 1,
-            'p-slider-handle-active': this.handleIndex === index
-        });
-
-        return (
-            <span onMouseDown={event => this.onMouseDown(event, index)} onTouchStart={event => this.onTouchStart(event, index)} tabIndex={this.props.tabIndex}
-                  className={handleClassName}  style={{transition: this.dragging ? 'none' : null, left: leftValue + '%', bottom: bottomValue + '%'}}
-                  role="slider" aria-valuemin={this.props.min} aria-valuemax={this.props.max} aria-valuenow={this.props.value} aria-labelledby={this.props.ariaLabelledBy}></span>
-        );
-    }
-
-    renderRangeSlider() {
-        let values = this.props.value||[0,0];
-        let horizontal = (this.props.orientation === 'horizontal');
-        const handleValueStart = (values[0] < this.props.min ? 0 : values[0] - this.props.min) * 100 / (this.props.max - this.props.min);
-        const handleValueEnd = (values[1] > this.props.max ? 100 : values[1] - this.props.min) * 100 / (this.props.max - this.props.min);
-        const rangeStartHandle = horizontal ? this.renderHandle(handleValueStart, 'auto', 0) : this.renderHandle('auto', handleValueStart, 0);
-        const rangeEndHandle = horizontal ? this.renderHandle(handleValueEnd, 'auto', 1) : this.renderHandle('auto', handleValueEnd, 1);
-        const rangeStyle = horizontal ? {left: handleValueStart + '%', width: (handleValueEnd - handleValueStart) + '%'} : {bottom: handleValueStart + '%', height: (handleValueEnd - handleValueStart) + '%'};
-
-        return (
-            <React.Fragment>
-                <span className="p-slider-range" style={rangeStyle}></span>
-                {rangeStartHandle}
-                {rangeEndHandle}
-            </React.Fragment>
-        )
-    }
-
-    renderSingleSlider() {
-        let value = this.props.value||0;
-        let handleValue;
-
-        if (value < this.props.min)
-            handleValue = 0;
-        else if(value > this.props.max)
-            handleValue = 100;
-        else
-            handleValue = (value - this.props.min) * 100 / (this.props.max - this.props.min);
-
-        const rangeStyle = this.props.orientation === 'horizontal' ? {width: handleValue + '%'} : {height: handleValue + '%'};
-        const handle = this.props.orientation === 'horizontal' ? this.renderHandle(handleValue, 'auto', null) : this.renderHandle('auto', handleValue, null);
-
-        return (
-            <React.Fragment>
-                <span className="p-slider-range p-slider-range-min ui-widget-header ui-corner-all" style={rangeStyle}></span>
-                {handle}
-            </React.Fragment>
-        );
-    }
-
-    render() {
-        const className = classNames('p-slider p-component', this.props.className, {
-            'p-disabled': this.props.disabled,
-            'p-slider-horizontal': this.props.orientation === 'horizontal',
-            'p-slider-vertical': this.props.orientation === 'vertical'
-        });
-
-        const content = this.props.range ? this.renderRangeSlider() : this.renderSingleSlider();
-
-        return (
-            <div id={this.props.id} ref={el => this.el = el} style={this.props.style} className={className} onClick={this.onBarClick}>
-                {content}
-            </div>
-        );
-    }
-
-}
diff --git a/src/components/spinner/Spinner.css b/src/components/spinner/Spinner.css
deleted file mode 100644
index 09424d0868..0000000000
--- a/src/components/spinner/Spinner.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.p-spinner {
-    display: inline-block;
-    overflow: visible;
-    padding: 0;
-    position: relative;
-    vertical-align: middle;
-}
-.p-spinner-input {
-    vertical-align: middle;
-    padding-right: 1.5em;
-}
-.p-spinner-button {
-    cursor: default;
-    display: block;
-    height: 50%;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    vertical-align: middle;
-    width: 1.5em;
-}
-.p-spinner .p-spinner-button-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    width: 1em;
-}
-.p-spinner-button-up {
-    top: 0;
-}
-.p-spinner-button-down {
-    bottom: 0;
-}
-
-/* Fluid */
-.p-fluid .p-spinner {
-    width: 100%;
-}
-.p-fluid .p-spinner .p-spinner-input {
-    padding-right: 2em;
-    width: 100%;
-}
-.p-fluid .p-spinner .p-spinner-button {
-    width: 1.5em;
-}
-.p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
-    left: .375em;
-}
\ No newline at end of file
diff --git a/src/components/spinner/Spinner.d.ts b/src/components/spinner/Spinner.d.ts
deleted file mode 100644
index a34bb3bfff..0000000000
--- a/src/components/spinner/Spinner.d.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface SpinnerProps {
-    id?: string;
-    value?: number;
-    name?: string;
-    step?: number;
-    min?: number;
-    max?: number;
-    formatInput?: boolean;
-    decimalSeparator?: string;
-    thousandSeparator?: string;
-    disabled?: boolean;
-    required?: boolean;
-    tabIndex?: number;
-    pattern?: string;
-    placeholder?: string;
-    readonly?: boolean;
-    maxlength?: number;
-    size?: number;
-    style?: object;
-    className?: string;
-    inputId?: string;
-    inputStyle?: object;
-    inputClassName?: string;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    onChange?(e: {originalEvent: Event, value: number, target: {name: string, id: string, value: number}}): void;
-    onBlur?(e: Event): void;
-}
-
-export class Spinner extends React.Component<SpinnerProps,any> {}
diff --git a/src/components/spinner/Spinner.js b/src/components/spinner/Spinner.js
deleted file mode 100644
index deb70ab7bf..0000000000
--- a/src/components/spinner/Spinner.js
+++ /dev/null
@@ -1,447 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import {InputText} from '../inputtext/InputText';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-import DomHandler from '../utils/DomHandler';
-
-export class Spinner extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        name: null,
-        step: 1,
-        min: null,
-        max: null,
-        formatInput: false,
-        decimalSeparator: null,
-        thousandSeparator: null,
-        disabled: false,
-        required: false,
-        tabIndex: null,
-        pattern: null,
-        placeholder: null,
-        readonly: false,
-        maxlength: null,
-        size: null,
-        style: null,
-        className: null,
-        inputId: null,
-        inputStyle: null,
-        inputClassName: null,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null,
-        onBlur: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        name: PropTypes.string,
-        step: PropTypes.number,
-        min: PropTypes.number,
-        max: PropTypes.number,
-        formatInput: PropTypes.bool,
-        decimalSeparator: PropTypes.string,
-        thousandSeparator: PropTypes.string,
-        disabled: PropTypes.bool,
-        required: PropTypes.bool,
-        tabIndex: PropTypes.number,
-        pattern: PropTypes.string,
-        placeholder: PropTypes.string,
-        readonly: PropTypes.bool,
-        maxlength: PropTypes.number,
-        size: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        inputId: PropTypes.string,
-        inputStyle: PropTypes.object,
-        inputClassName: PropTypes.string,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func,
-        onBlur: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        if(this.props.value && this.props.value.toString().indexOf('.') > 0) {
-            this.precision = this.props.value.toString().split(/[.]/)[1].length;
-        }
-        else if(this.props.step % 1 !== 0) {
-            // If step is not an integer then extract the length of the decimal part
-            this.precision = this.props.step.toString().split(/[,]|[.]/)[1].length;
-        }
-
-        if (this.props.formatInput) {
-            this.localeDecimalSeparator = (1.1).toLocaleString().substring(1, 2);
-            this.localeThousandSeparator = (1000).toLocaleString().substring(1, 2);
-            this.thousandRegExp = new RegExp(`[${this.props.thousandSeparator || this.localeThousandSeparator}]`, 'gim');
-
-            if (this.props.decimalSeparator && this.props.thousandSeparator && this.props.decimalSeparator === this.props.thousandSeparator) {
-                console.warn("thousandSeparator and decimalSeparator cannot have the same value.");
-            }
-        }
-
-        this.formatValue(this.props.value);
-
-        this.onInputKeyDown = this.onInputKeyDown.bind(this);
-        this.onInputChange = this.onInputChange.bind(this);
-        this.onInputBlur = this.onInputBlur.bind(this);
-        this.onInputFocus = this.onInputFocus.bind(this);
-
-        this.onUpButtonMouseLeave = this.onUpButtonMouseLeave.bind(this);
-        this.onUpButtonMouseDown = this.onUpButtonMouseDown.bind(this);
-        this.onUpButtonMouseUp = this.onUpButtonMouseUp.bind(this);
-        this.onUpButtonKeyDown = this.onUpButtonKeyDown.bind(this);
-        this.onUpButtonKeyUp = this.onUpButtonKeyUp.bind(this);
-
-        this.onDownButtonMouseLeave = this.onDownButtonMouseLeave.bind(this);
-        this.onDownButtonMouseDown = this.onDownButtonMouseDown.bind(this);
-        this.onDownButtonMouseUp = this.onDownButtonMouseUp.bind(this);
-        this.onDownButtonKeyDown = this.onDownButtonKeyDown.bind(this);
-        this.onDownButtonKeyUp = this.onDownButtonKeyUp.bind(this);
-    }
-
-    repeat(event, interval, dir) {
-        let i = interval || 500;
-
-        this.clearTimer();
-        this.timer = setTimeout(() => {
-            this.repeat(event, 40, dir);
-        }, i);
-
-        this.spin(event, dir);
-    }
-
-    spin(event, dir) {
-        let step = this.props.step * dir;
-        let currentValue;
-        let newValue;
-
-        if (this.props.value)
-            currentValue = (typeof this.props.value === 'string') ? this.parseValue(this.props.value) : this.props.value;
-        else
-            currentValue = 0;
-
-        if (this.precision)
-            newValue = parseFloat(this.toFixed(currentValue + step, this.precision));
-        else
-            newValue = currentValue + step;
-
-        if (this.props.maxlength !== null && this.props.value.toString().length > this.props.maxlength) {
-            newValue = currentValue;
-        }
-
-        if (this.props.min !== null && newValue < this.props.min) {
-            newValue = this.props.min;
-        }
-
-        if (this.props.max !== null && newValue > this.props.max) {
-            newValue= this.props.max;
-        }
-
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: newValue,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: newValue
-                }
-            });
-        }
-    }
-
-    toFixed(value, precision) {
-        let power = Math.pow(10, precision || 0);
-        return String(Math.round(value * power) / power);
-    }
-
-    onUpButtonMouseDown(event) {
-        if (!this.props.disabled) {
-            this.inputEl.focus();
-            this.repeat(event, null, 1);
-            event.preventDefault();
-        }
-    }
-
-    onUpButtonMouseUp(event) {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onUpButtonMouseLeave(event) {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onUpButtonKeyUp(event) {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onUpButtonKeyDown(event) {
-        if (event.keyCode === 32 || event.keyCode === 13) {
-            this.repeat(event, null, 1);
-        }
-    }
-
-    onDownButtonMouseDown(event, focusInput) {
-        if (!this.props.disabled) {
-            this.inputEl.focus();
-            this.repeat(event, null, -1);
-
-            event.preventDefault();
-        }
-    }
-
-    onDownButtonMouseUp(event) {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onDownButtonMouseLeave(event) {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onDownButtonKeyUp(event) {
-        if (!this.props.disabled) {
-            this.clearTimer();
-        }
-    }
-
-    onDownButtonKeyDown(event) {
-        if (event.keyCode === 32 || event.keyCode === 13) {
-            this.repeat(event, null, -1);
-        }
-    }
-
-    onInputKeyDown(event) {
-        if (event.which === 38) {
-            this.spin(event, 1);
-            event.preventDefault();
-        }
-        else if (event.which === 40) {
-            this.spin(event, -1);
-            event.preventDefault();
-        }
-    }
-
-    parseValue(val) {
-        let value = val.trim();
-
-        if (val === '') {
-            value = this.props.min != null ? this.props.min : null;
-        }
-        else {
-            if (this.props.formatInput) {
-                val = val.replace(this.thousandRegExp, '');
-            }
-
-            if (this.precision) {
-                val = this.props.formatInput ? val.replace(this.props.decimalSeparator || this.localeDecimalSeparator, '.') : val.replace(',', '.');
-                value = parseFloat(val);
-            }
-            else {
-                value = parseInt(val, 10);
-            }
-
-            if (!isNaN(value)) {
-                if (this.props.max !== null && value > this.props.max) {
-                    value = this.props.max;
-                }
-
-                if (this.props.min !== null && value < this.props.min) {
-                    value = this.props.min;
-                }
-            }
-            else {
-                value = null;
-            }
-        }
-
-        return value;
-    }
-
-    onInputFocus(event) {
-        DomHandler.addClass(this.element, 'p-inputwrapper-focus');
-    }
-
-    onInputChange(event) {
-        if (this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: event.target.value,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: event.target.value
-                }
-            });
-        }
-    }
-
-    onInputBlur(event) {
-        DomHandler.removeClass(this.element, 'p-inputwrapper-focus');
-
-        if (this.props.onChange) {
-            const parsedValue =  this.parseValue(event.target.value);
-            this.props.onChange({
-                originalEvent: event,
-                value: parsedValue,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: parsedValue,
-                }
-            });
-        }
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-    }
-
-    formatValue(value) {
-        if (value != null) {
-            if (this.props.formatInput) {
-                value = value.toLocaleString(undefined, {maximumFractionDigits: 20});
-
-                if (this.props.decimalSeparator && this.props.thousandSeparator) {
-                    value = value.split(this.localeDecimalSeparator);
-
-                    if (this.precision && value[1]) {
-                        value[1] = (this.props.decimalSeparator || this.localeDecimalSeparator) + value[1];
-                    }
-
-                    if (this.props.thousandSeparator && value[0].length > 3) {
-                        value[0] = value[0].replace(new RegExp(`[${this.localeThousandSeparator}]`, 'gim'), this.props.thousandSeparator);
-                    }
-
-                    value = value.join('');
-                }
-            }
-
-            this.formattedValue = value.toString();
-        }
-    }
-
-    clearTimer() {
-        if (this.timer) {
-            clearInterval(this.timer);
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    shouldComponentUpdate(nextProps) {
-        if (this.props.value !== nextProps.value) {
-            this.formatValue(nextProps.value);
-        }
-
-        return true;
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    renderInputElement() {
-        const className = classNames('p-spinner-input', this.props.inputClassName);
-
-        return (
-            <InputText ref={(el) => this.inputEl = ReactDOM.findDOMNode(el)} id={this.props.inputId} style={this.props.inputStyle}
-                       className={className} value={this.formattedValue||''} type="text" size={this.props.size} tabIndex={this.props.tabIndex}
-                       maxLength={this.props.maxlength} disabled={this.props.disabled} required={this.props.required} pattern={this.props.pattern}
-                       placeholder={this.props.placeholder} readOnly={this.props.readonly} name={this.props.name} onKeyDown={this.onInputKeyDown}
-                       onBlur={this.onInputBlur} onChange={this.onInputChange} onFocus={this.onInputFocus} aria-valuemin={this.props.min} aria-valuemax={this.props.max}
-                       aria-valuenow={this.formattedValue||''} aria-labelledby={this.props.ariaLabelledBy}
-            />
-        );
-    }
-
-    renderUpButton() {
-        let className = classNames("p-spinner-button p-spinner-button-up p-button p-component", {
-            'p-disabled': this.props.disabled
-        });
-
-        return (
-            <button type="button" className={className} onMouseLeave={this.onUpButtonMouseLeave} onMouseDown={this.onUpButtonMouseDown} onMouseUp={this.onUpButtonMouseUp}
-                onKeyDown={this.onUpButtonKeyDown} onKeyUp={this.onUpButtonKeyUp} disabled={this.props.disabled} tabIndex={this.props.tabIndex}>
-                <span className="p-spinner-button-icon pi pi-caret-up"></span>
-            </button>
-        );
-    }
-
-    renderDownButton() {
-        let className = classNames("p-spinner-button p-spinner-button-down p-button p-component", {
-            'p-disabled': this.props.disabled
-        });
-
-        return (
-            <button type="button" className={className} onMouseLeave={this.onDownButtonMouseLeave} onMouseDown={this.onDownButtonMouseDown} onMouseUp={this.onDownButtonMouseUp}
-                onKeyDown={this.onDownButtonKeyDown} onKeyUp={this.onDownButtonKeyUp} disabled={this.props.disabled} tabIndex={this.props.tabIndex}>
-                <span className="p-spinner-button-icon pi pi-caret-down"></span>
-            </button>
-        );
-    }
-
-    render() {
-        let className = classNames("p-spinner p-component", this.props.className, {'p-inputwrapper-filled': this.props.value != null});
-        let inputElement = this.renderInputElement();
-        let upButton = this.renderUpButton();
-        let downButton = this.renderDownButton();
-
-        return (
-            <span ref={(el) => this.element = el} id={this.props.id} className={className} style={this.props.style}>
-                {inputElement}
-                {upButton}
-                {downButton}
-            </span>
-        );
-    }
-}
diff --git a/src/components/splitbutton/SplitButton.css b/src/components/splitbutton/SplitButton.css
deleted file mode 100644
index e4ba2cf1de..0000000000
--- a/src/components/splitbutton/SplitButton.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.p-splitbutton {
-    position: relative;
-    display: inline-block;
-    zoom: 1;
-}
-
-.p-splitbutton .p-button.p-splitbutton-menubutton {
-    width: 2em;
-    vertical-align: top;
-}
-
-.p-splitbutton.p-disabled button {
-    cursor: default;
-}
-
-.p-fluid .p-splitbutton {
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
-}
-
-.p-fluid .p-splitbutton .p-button:first-child {
-    width: calc(100% - 2em);
-}
-
-.p-fluid .p-splitbutton .p-button.p-splitbutton-menubutton {
-    width: 2em;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
-}
-
-.p-splitbutton.p-button-secondary .p-button:first-child {
-    border-right: 0 none;
-}
\ No newline at end of file
diff --git a/src/components/splitbutton/SplitButton.d.ts b/src/components/splitbutton/SplitButton.d.ts
deleted file mode 100644
index 11a11a62b1..0000000000
--- a/src/components/splitbutton/SplitButton.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface SplitButtonProps {
-    id?: string;
-    label?: string;
-    icon?: string;
-    model?: any[];
-    disabled?: boolean;
-    style?: object;
-    className?: string;
-    menuStyle?: object;
-    menuClassName?: string;
-    tabIndex?: string;
-    appendTo?: HTMLElement;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    onClick?(event: Event): void;
-}
-
-export class SplitButton extends React.Component<SplitButtonProps,any> {}
diff --git a/src/components/splitbutton/SplitButton.js b/src/components/splitbutton/SplitButton.js
deleted file mode 100644
index c647ef5bfc..0000000000
--- a/src/components/splitbutton/SplitButton.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import {Button} from '../button/Button';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-import { SplitButtonItem } from './SplitButtonItem';
-import { SplitButtonPanel } from './SplitButtonPanel';
-import Tooltip from "../tooltip/Tooltip";
-import UniqueComponentId from "../utils/UniqueComponentId";
-
-export class SplitButton extends Component {
-
-    static defaultProps = {
-        id: null,
-        label: null,
-        icon: null,
-        model: null,
-        disabled: null,
-        style: null,
-        className: null,
-        menuStyle: null,
-        menuClassName: null,
-        tabIndex: null,
-        onClick: null,
-        appendTo: null,
-        tooltip: null,
-        tooltipOptions: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        label: PropTypes.string,
-        icon: PropTypes.string,
-        model: PropTypes.array,
-        disabled: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        menustyle: PropTypes.object,
-        menuClassName: PropTypes.string,
-        tabIndex: PropTypes.string,
-        onClick: PropTypes.func,
-        appendTo: PropTypes.object,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            overlayVisible: null
-        };
-
-        this.onDropdownButtonClick = this.onDropdownButtonClick.bind(this);
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    onDropdownButtonClick(event) {
-        if(this.documentClickListener) {
-            this.dropdownClick = true;
-        }
-
-        if(this.panel.element.offsetParent)
-            this.hide();
-        else
-            this.show();
-    }
-
-    show() {
-        this.panel.element.style.zIndex = String(DomHandler.generateZIndex());
-        this.panel.element.style.display = 'block';
-
-        setTimeout(() => {
-            DomHandler.addClass(this.panel.element, 'p-menu-overlay-visible');
-            DomHandler.removeClass(this.panel.element, 'p-menu-overlay-hidden');
-        }, 1);
-
-        this.alignPanel();
-        this.bindDocumentListener();
-        this.setState({overlayVisible: true})
-    }
-
-    hide() {
-        if (this.panel && this.panel.element) {
-            DomHandler.addClass(this.panel.element, 'p-menu-overlay-hidden');
-            DomHandler.removeClass(this.panel.element, 'p-menu-overlay-visible');
-
-            setTimeout(() => {
-                if (this.panel && this.panel.element) {
-                    this.panel.element.style.display = 'none';
-                    DomHandler.removeClass(this.panel.element, 'p-menu-overlay-hidden');
-                }
-            }, 150);
-            this.setState({overlayVisible: false})
-        }
-
-        this.unbindDocumentListener();
-        this.dropdownClick = false;
-    }
-
-    alignPanel() {
-        if (this.props.appendTo) {
-            this.panel.element.style.minWidth = DomHandler.getWidth(this.container) + 'px';
-            DomHandler.absolutePosition(this.panel.element, this.container);
-        }
-        else {
-            DomHandler.relativePosition(this.panel.element, this.container);
-        }
-    }
-
-    bindDocumentListener() {
-        if(!this.documentClickListener) {
-            this.documentClickListener = () => {
-                if(this.dropdownClick)
-                    this.dropdownClick = false;
-                else
-                    this.hide();
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentListener() {
-        if(this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentListener();
-
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    renderItems() {
-        if (this.props.model) {
-            return this.props.model.map((menuitem, index) => {
-                return <SplitButtonItem menuitem={menuitem} key={index} />
-            });
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-splitbutton p-buttonset p-component', this.props.className, {'p-disabled': this.props.disabled});
-        let items = this.renderItems();
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style}  ref={el => this.container = el}>
-                <Button type="button" icon={this.props.icon} label={this.props.label} onClick={this.props.onClick} disabled={this.props.disabled} tabIndex={this.props.tabIndex}/>
-                <Button type="button" className="p-splitbutton-menubutton" icon="pi pi-caret-down" onClick={this.onDropdownButtonClick} disabled={this.props.disabled}
-                        aria-expanded={this.state.overlayVisible} aria-haspopup={true} aria-owns={this.id + '_overlay'}/>
-                <SplitButtonPanel ref={(el) => this.panel = el} appendTo={this.props.appendTo} id={this.id + '_overlay'}
-                                menuStyle={this.props.menuStyle} menuClassName={this.props.menuClassName}>
-                    {items}
-                </SplitButtonPanel>
-            </div>
-        );
-    }
-}
diff --git a/src/components/splitbutton/SplitButtonItem.js b/src/components/splitbutton/SplitButtonItem.js
deleted file mode 100644
index 0317fe3722..0000000000
--- a/src/components/splitbutton/SplitButtonItem.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class SplitButtonItem extends Component {
-
-    static defaultProps = {
-        menuitem: null
-    }
-
-    static propTypes = {
-        menuitem: PropTypes.any
-    }
-
-    constructor(props) {
-        super(props);
-        this.onClick = this.onClick.bind(this);
-    }
-
-    onClick(e) {
-        if (this.props.menuitem.command) {
-            this.props.menuitem.command({ originalEvent: e, item: this.props.menuitem });
-        }
-        e.preventDefault();
-    }
-
-    render() {
-        var className = classNames('p-menuitem-link', { 'p-disabled': this.props.menuitem.disabled });
-        var icon = this.props.menuitem.icon ? <span className={classNames('p-menuitem-icon', this.props.menuitem.icon)}></span> : null;
-        var label = <span className="p-menuitem-text">{this.props.menuitem.label}</span>;
-
-        return (
-            <li className="p-menuitem" role="none">
-                <a href={this.props.menuitem.url || '#'} role="menuitem" className={className} target={this.props.menuitem.target} onClick={this.onClick}>
-                    {icon}
-                    {label}
-                </a>
-            </li>
-        );
-    }
-}
diff --git a/src/components/splitbutton/SplitButtonPanel.js b/src/components/splitbutton/SplitButtonPanel.js
deleted file mode 100644
index baa2ab5d9b..0000000000
--- a/src/components/splitbutton/SplitButtonPanel.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-
-export class SplitButtonPanel extends Component {
-
-    static defaultProps = {
-        appendTo: null,
-        menuStyle: null,
-        menuClassName: null,
-        id: null
-    };
-
-    static propTypes = {
-        appendTo: PropTypes.object,
-        menustyle: PropTypes.object,
-        menuClassName: PropTypes.string,
-        id: PropTypes.any
-    };
-
-    renderElement() {
-        let className = classNames('p-menu p-menu-dynamic p-menu-overlay p-component', this.props.menuClassName);
-
-        return (
-            <div className={className} style={this.props.menuStyle} id={this.props.id} ref={(el) => { this.element = el; }}>
-                <ul className="p-menu-list p-reset" role="menu">
-                    {this.props.children}
-                </ul>
-            </div>
-        );
-    }
-
-    render() {
-        let element = this.renderElement();
-
-        if (this.props.appendTo) {
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        }
-        else {
-            return element;
-        }
-    }
-
-}
diff --git a/src/components/steps/Steps.css b/src/components/steps/Steps.css
deleted file mode 100644
index 309912edeb..0000000000
--- a/src/components/steps/Steps.css
+++ /dev/null
@@ -1,56 +0,0 @@
-.p-steps ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
-}
-
-.p-steps .p-steps-item {
-    width: 100%;
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    justify-content: center;
-}
-
-.p-steps.p-steps-readonly .p-steps-item,
-.p-steps .p-steps-item.p-disabled {
-    cursor: auto;
-    pointer-events: none;
-}
-
-.p-steps .p-steps-item .p-menuitem-link {
-    text-decoration: none;
-    padding: 1em;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.p-steps .p-steps-item.p-steps-current .p-menuitem-link,
-.p-steps .p-steps-item.p-disabled .p-menuitem-link {
-    cursor: default;
-}
-
-.p-steps .p-steps-number {
-    font-size: 2em;
-    display: block;
-}
-
-.p-steps .p-steps-title {
-    display: block;
-    white-space: nowrap;
-}
-
-/* Responsive */
-@media (max-width: 40em) {
-    .p-steps ul {
-        flex-wrap: wrap;
-    }
-
-    .p-steps .p-steps-item .p-menuitem-link {
-        padding: 0.5em;
-    }
-}
diff --git a/src/components/steps/Steps.d.ts b/src/components/steps/Steps.d.ts
deleted file mode 100644
index 36ddb53d43..0000000000
--- a/src/components/steps/Steps.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-
-interface StepsProps {
-    id?: string;
-    model: MenuItem[];
-    activeIndex?:  number;
-    readOnly?: boolean;
-    style?: object;
-    className?: string;
-    onSelect?(e: {originalEvent: Event, item: MenuItem, index: number}): void;
-}
-
-export class Steps extends React.Component<StepsProps,any> {}
diff --git a/src/components/steps/Steps.js b/src/components/steps/Steps.js
deleted file mode 100644
index 8ec37c8a9d..0000000000
--- a/src/components/steps/Steps.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-
-export class Steps extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        activeIndex: 0,
-        readOnly: true,
-        style: null,
-        className: null,
-        onSelect: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array.isRequired,
-        activeIndex: PropTypes.number,
-        readOnly: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        onSelect: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    itemClick(event, item, index) {
-        if (this.props.readOnly || item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (this.props.onSelect){
-            this.props.onSelect({
-                originalEvent: event,
-                item: item,
-                index: index
-            });
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item,
-                index: index
-            });
-        }
-    }
-
-    createStyle() {
-        if (!this.stepsStyle) {
-            this.stepsStyle = document.createElement('style');
-            this.stepsStyle.type = 'text/css';
-            document.body.appendChild(this.stepsStyle);
-        }
-
-        let innerHTML = `
-            #${this.id} .p-steps-item {
-                flex: 1 0 ${ (100/ this.props.model.length) }%
-            }
-        `;
-
-        this.stepsStyle.innerHTML = innerHTML;
-    }
-
-    componentDidMount() {
-        this.createStyle();
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.model !== this.props.model) {
-            this.createStyle();
-        }
-    }
-
-    renderItem(item, index) {
-        const isDisabled = (item.disabled || (index !== this.props.activeIndex && this.props.readOnly))
-        const className = classNames('p-steps-item', item.className, {
-                'p-highlight p-steps-current': (index === this.props.activeIndex),
-                'p-state-default': (index !== this.props.activeIndex),
-                'p-disabled': isDisabled
-            });
-
-        return (
-            <li key={item.label + '_' + index} className={className} style={item.style} role="tab" aria-selected={index === this.props.activeIndex} aria-expanded={index === this.props.activeIndex}>
-                <a href={item.url || '#'} className="p-menuitem-link" role="presentation" target={item.target} onClick={event => this.itemClick(event, item, index)} tabIndex={isDisabled ? -1 : ''}>
-                    <span className="p-steps-number">{index + 1}</span>
-                    <span className="p-steps-title">{item.label}</span>
-                </a>
-            </li>
-        );
-    }
-
-    renderItems() {
-        if (this.props.model) {
-            const items = this.props.model.map((item, index) => {
-                return this.renderItem(item, index);
-            });
-
-            return (
-                <ul role="tablist">
-                    {items}
-                </ul>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-steps p-component', this.props.className, {'p-steps-readonly': this.props.readonly});
-        const items = this.renderItems();
-
-        return (
-            <div id={this.id} className={className} style={this.props.style}>
-                {items}
-            </div>
-        );
-    }
-}
diff --git a/src/components/tabmenu/TabMenu.css b/src/components/tabmenu/TabMenu.css
deleted file mode 100644
index 326f3df541..0000000000
--- a/src/components/tabmenu/TabMenu.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/** TabMenu **/
-.p-tabmenu .p-tabmenu-nav { 
-    margin: 0;
-    padding: .25em .5em 0 .25em; 
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem { 
-    list-style: none; 
-    float: left; 
-    position: relative; 
-    margin: 0 .2em 1px 0;  
-    padding: 0; 
-    white-space: nowrap;
-    display: block;
-    border-bottom: 0;
-    top: 1px; 
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem a { 
-    float: left; 
-    padding: 0.5em 1em;
-    text-decoration: none; 
-}
-
-.p-tabmenu .p-tabmenu-nav a { 
-    padding: 0.5em 1em;
-}
-
-.p-tabmenu .p-menuitem-icon  { 
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-tabmenu .p-menuitem-text  { 
-    vertical-align: middle;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-disabled a {
-     cursor: default;
-}
\ No newline at end of file
diff --git a/src/components/tabmenu/TabMenu.d.ts b/src/components/tabmenu/TabMenu.d.ts
deleted file mode 100644
index 473c99cce7..0000000000
--- a/src/components/tabmenu/TabMenu.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-
-interface TabMenuProps {
-    id?: string;
-    model?: MenuItem[];
-    activeItem?: any;
-    style?: any;
-    className?: string;
-    onTabChange?(e: { originalEvent: Event, value: any}): void;
-}
-
-export class TabMenu extends React.Component<TabMenuProps,any> {}
diff --git a/src/components/tabmenu/TabMenu.js b/src/components/tabmenu/TabMenu.js
deleted file mode 100644
index 940ea28e61..0000000000
--- a/src/components/tabmenu/TabMenu.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class TabMenu extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        activeItem: null,
-        style: null,
-        className: null,
-        onTabChange: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        activeItem: PropTypes.any,
-        style: PropTypes.any,
-        className: PropTypes.string,
-        onTabChange: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        if (!this.props.onTabChange) {
-            this.state = {
-                activeItem: props.activeItem
-            };
-        }
-    }
-
-    itemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (this.props.onTabChange) {
-            this.props.onTabChange({
-                originalEvent: event,
-                value: item
-            });
-        }
-        else {
-            this.setState({
-                activeItem: item
-            });
-        }
-    }
-
-    renderMenuItem(item, index) {
-        const activeItem = this.props.onTabChange ? this.props.activeItem : this.state.activeItem;
-        const className = classNames('p-tabmenuitem', item.className, {'p-highlight': activeItem ? activeItem === item : index === 0, 'p-disabled': item.disabled});
-        const iconClassName = classNames(item.icon, 'p-menuitem-icon');
-        const icon = item.icon ? <span className={iconClassName}></span>: null;
-
-        return (
-            <li key={item.label + '_' + index} className={className} style={item.style} role="tab" aria-selected={activeItem ? activeItem === item : index === 0} aria-expanded={activeItem ? activeItem === item : index === 0}>
-                 <a href={item.url||'#'} className="p-menuitem-link" target={item.target} onClick={(event) => this.itemClick(event, item)} role="presentation">
-                    {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                </a>
-            </li>
-        );
-    }
-
-    renderItems() {
-        return (
-            this.props.model.map((item, index) => {
-                return this.renderMenuItem(item, index);
-            })
-        );
-    }
-
-    render() {
-        if (this.props.model) {
-            const className = classNames('p-tabmenu p-component', this.props.className);
-            const items = this.renderItems();
-
-            return (
-                <div id={this.props.id} className={className} style={this.props.style}>
-                    <ul className="p-tabmenu-nav p-reset" role="tablist">
-                        {items}
-                    </ul>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-}
diff --git a/src/components/tabview/TabView.css b/src/components/tabview/TabView.css
deleted file mode 100644
index 04cbf6d959..0000000000
--- a/src/components/tabview/TabView.css
+++ /dev/null
@@ -1,147 +0,0 @@
-.p-tabview {
-    padding: .25em; 
-}
-
-.p-tabview .p-tabview-nav { 
-    margin: 0;
-}
-
-.p-tabview .p-tabview-nav:after { 
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.p-tabview .p-tabview-nav li { 
-    list-style: none; 
-    float: left; 
-    position: relative; 
-    margin: 0 .125em 1px 0;  
-    padding: 0; 
-    white-space: nowrap; 
-}
-
-.p-tabview .p-tabview-nav li a { 
-    float: left; 
-    padding: .5em 1em; 
-    text-decoration: none; 
-}
-
-.p-tabview .p-tabview-nav li.p-tabview-selected a, 
-.p-tabview .p-tabview-nav li.p-disabled a, 
-.p-tabview .p-tabview-nav li.p-state-processing a { 
-    cursor: text; 
-}
-
-.p-tabview .p-tabview-nav li a, 
-.p-tabview.p-tabview-collapsible .p-tabview-nav li.p-tabview-selected a { 
-    cursor: pointer; 
-}
-
-.p-tabview .p-tabview-panel { 
-    border-width: 0; 
-    padding: 1em; 
-    background: none; 
-}
-
-.p-tabview .p-tabview-nav li { 
-    display: block; 
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-left-icon,
-.p-tabview .p-tabview-nav li .p-tabview-right-icon,
-.p-tabview .p-tabview-nav li .p-tabview-title {
-    vertical-align: middle;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-left-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-right-icon {
-    margin-left: .25em;
-    vertical-align: middle;
-}
-
-.p-tabview .p-tabview-nav li .p-tabview-close { 
-    margin: 0.5em 0.3em 0 0; 
-    cursor: pointer; 
-}
-
-/* per orientation settings */
-/* top and bottom */
-.p-tabview.p-tabview-top > .p-tabview-nav li { 
-    border-bottom: 0;
-    top: 1px; 
-}
-
-.p-tabview.p-tabview-top > .p-tabview-nav { 
-    padding: .2em .2em 0; 
-}
-
-.p-tabview.p-tabview-bottom > .p-tabview-nav { 
-    padding: 0 .2em .2em; 
-}
-
-.p-tabview.p-tabview-bottom > .p-tabview-nav li { 
-    border-top: 0;
-}
-
-/* left and right*/
-.p-tabview-left:after,
-.p-tabview-right:after {
-    clear:both;
-    content: ".";
-    display: block;
-    height: 0;
-    visibility: hidden;
-}
-
-.p-tabview-left > .p-tabview-nav {
-    float:left;
-    width: 25%;
-    height: 300px;
-    background-image: none;
-    padding-top: 1px;
-}
-
-.p-tabview-left > .p-tabview-panels {
-    float:right;
-    width: 75%;
-}
-
-.p-tabview.p-tabview-left > .p-tabview-nav li,
-.p-tabview.p-tabview-right > .p-tabview-nav li{
-    display: block;
-    float: right;
-    white-space: normal;
-    width: 99%;
-}
-
-.p-tabview.p-tabview-left > .p-tabview-nav li {
-    margin: 0 0 1px 0;
-    border-right:0 none;
-}
-
-.p-tabview.p-tabview-right > .p-tabview-nav {
-    float:right;
-    width: 25%;
-    height: 300px;
-    background-image: none;
-    padding-top: 1px;
-}
-
-.p-tabview.p-tabview-right > .p-tabview-panels {
-    float:left;
-    width: 75%;
-}
-
-.p-tabview.p-tabview-right > .p-tabview-nav li {
-    margin: 0 0 1px 0;
-    border-left:0 none;
-}
-/* RTL */
-.p-rtl .p-tabview .p-tabview-nav li {
-    float: right;
-}
\ No newline at end of file
diff --git a/src/components/tabview/TabView.d.ts b/src/components/tabview/TabView.d.ts
deleted file mode 100644
index d82de677d1..0000000000
--- a/src/components/tabview/TabView.d.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import * as React from 'react';
-
-interface TabPanelProps {
-    header?: any;
-    leftIcon?: string;
-    rightIcon?: string;
-    disabled?: boolean;
-    headerStyle?: any;
-    headerClassName?: string;
-    contentStyle?: any;
-    contentClassName?: string;
-}
-
-export class TabPanel extends React.Component<TabPanelProps,any> {}
-
-interface TabViewProps {
-    id?: string;
-    activeIndex?: number;
-    style?: any;
-    className?: string;
-    renderActiveOnly?: boolean;
-    onTabChange?(e: {originalEvent: Event, index: number}): void;
-}
-
-// tslint:disable-next-line:max-classes-per-file
-export class TabView extends React.Component<TabViewProps,any> {}
diff --git a/src/components/tabview/TabView.js b/src/components/tabview/TabView.js
deleted file mode 100644
index 24f75a8e18..0000000000
--- a/src/components/tabview/TabView.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import UniqueComponentId from '../utils/UniqueComponentId';
-
-export class TabPanel extends Component {
-
-    static defaultProps = {
-        header: null,
-        leftIcon: null,
-        rightIcon: null,
-        disabled: false,
-        headerStyle: null,
-        headerClassName: null,
-        contentStyle: null,
-        contentClassName: null
-    }
-
-    static propTypes = {
-        header: PropTypes.any,
-        leftIcon: PropTypes.string,
-        rightIcon: PropTypes.string,
-        disabled: PropTypes.bool,
-        headerStyle: PropTypes.object,
-        headerClassName: PropTypes.string,
-        contentStyle: PropTypes.object,
-        contentClassName: PropTypes.string
-    };
-
-}
-
-export class TabView extends Component {
-
-    static defaultProps = {
-        id: null,
-        activeIndex: 0,
-        style: null,
-        className: null,
-        renderActiveOnly: true,
-        onTabChange: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        activeIndex: PropTypes.number,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        renderActiveOnly: PropTypes.bool,
-        onTabChange: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        if (!this.props.onTabChange) {
-            this.state = {
-                activeIndex: this.props.activeIndex
-            };
-        }
-
-        this.id = this.props.id || UniqueComponentId();
-    }
-
-    isSelected(index) {
-        const activeIndex = this.props.onTabChange ? this.props.activeIndex : this.state.activeIndex;
-
-        return (activeIndex === index);
-    }
-
-    onTabHeaderClick(event, tab, index) {
-        if (!tab.props.disabled) {
-            if (this.props.onTabChange) {
-                this.props.onTabChange({originalEvent: event, index: index});
-            }
-            else {
-                this.setState({
-                    activeIndex: index
-                });
-            }
-        }
-
-        event.preventDefault();
-    }
-
-    renderTabHeader(tab, index) {
-        const selected = this.isSelected(index);
-        const className = classNames(tab.props.headerClassName, 'p-unselectable-text', {'p-tabview-selected p-highlight': selected, 'p-disabled': tab.props.disabled});
-        const id = this.id + '_header_' + index;
-        const ariaControls = this.id + '_content_' + index;
-        const tabIndex = tab.props.disabled ? '-1' : null;
-
-        return (
-            <li className={className} style={tab.props.headerStyle} role="presentation" >
-                <a role="tab" href={'#' + ariaControls} onClick={(event) => this.onTabHeaderClick(event, tab, index)} id={id}
-                    aria-controls={ariaControls} aria-selected={selected} tabIndex={tabIndex}>
-                    {tab.props.leftIcon && <span className={classNames('p-tabview-left-icon ', tab.props.leftIcon)}></span>}
-                    <span className="p-tabview-title">{tab.props.header}</span>
-                    {tab.props.rightIcon && <span className={classNames('p-tabview-right-icon ', tab.props.rightIcon)}></span>}
-                </a>
-            </li>
-        );
-    }
-
-    renderTabHeaders() {
-        return (
-            React.Children.map(this.props.children, (tab, index) => {
-                return this.renderTabHeader(tab, index);
-            })
-        );
-    }
-
-    renderNavigator() {
-        const headers = this.renderTabHeaders();
-
-        return (
-            <ul className="p-tabview-nav p-reset" role="tablist">
-                {headers}
-            </ul>
-        );
-    }
-
-    renderContent() {
-        const contents = React.Children.map(this.props.children, (tab, index) => {
-            if (!this.props.renderActiveOnly || this.isSelected(index)) {
-                return this.createContent(tab,index);
-            }
-        })
-
-        return (
-            <div className="p-tabview-panels">
-                {contents}
-            </div>
-        );
-    }
-
-    createContent(tab, index) {
-        const selected = this.isSelected(index);
-        const className = classNames(tab.props.contentClassName, 'p-tabview-panel', {'p-hidden': !selected});
-        const id = this.id + '_content_' + index;
-        const ariaLabelledBy = this.id + '_header_' + index;
-
-        return (
-            <div id={id} aria-labelledby={ariaLabelledBy} aria-hidden={!selected} className={className}
-                 style={tab.props.contentStyle} role="tabpanel">
-                {!this.props.renderActiveOnly ? tab.props.children : (selected && tab.props.children)}
-            </div>
-        );
-    }
-
-    render() {
-        const className = classNames('p-tabview p-component p-tabview-top', this.props.className)
-        const navigator = this.renderNavigator();
-        const content = this.renderContent();
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style}>
-                {navigator}
-                {content}
-            </div>
-        );
-    }
-}
diff --git a/src/components/tieredmenu/TieredMenu.css b/src/components/tieredmenu/TieredMenu.css
deleted file mode 100644
index 251b924959..0000000000
--- a/src/components/tieredmenu/TieredMenu.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.p-tieredmenu {
-    width: 12.5em;
-    padding: .25em;
-}
-
-.p-tieredmenu.p-tieredmenu-dynamic {
-    position: absolute;
-    display: none;
-}
-
-.p-tieredmenu .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
-.p-tieredmenu ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.p-tieredmenu .p-submenu-list {
-    display: none;
-    position: absolute;
-    width: 12.5em;
-    padding: .25em;
-    z-index: 1;
-}
-
-.p-tieredmenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    position: relative;
-    text-decoration: none;
-}
-
-.p-tieredmenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-tieredmenu .p-menuitem-text {
-    vertical-align: middle;
-}
-
-.p-tieredmenu .p-menuitem {
-    position: relative;
-    margin: .125em 0;
-}
-
-.p-tieredmenu .p-menuitem-link .p-submenu-icon {
-    position: absolute;
-    margin-top: -.5em;
-    right: 0;
-    top: 50%;
-}
-
-.p-tieredmenu .p-menuitem-active > .p-submenu-list {
-    display: block;
-    left: 100%;
-    top: 0;
-}
\ No newline at end of file
diff --git a/src/components/tieredmenu/TieredMenu.d.ts b/src/components/tieredmenu/TieredMenu.d.ts
deleted file mode 100644
index a91da27af0..0000000000
--- a/src/components/tieredmenu/TieredMenu.d.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react';
-import {MenuItem} from '../menuitem/MenuItem';
-import {SyntheticEvent} from "react";
-
-interface TieredMenuProps {
-    id?: string;
-    model?: MenuItem[];
-    popup?: boolean;
-    style?: object;
-    className?: string;
-    autoZIndex?: boolean;
-    bazeZIndex?: number;
-    appendTo?: any;
-    onShow?(e: Event): void;
-    onHide?(e: Event): void;
-}
-
-export class TieredMenu extends React.Component<TieredMenuProps, any> {
-    public toggle(event: SyntheticEvent): void;
-}
diff --git a/src/components/tieredmenu/TieredMenu.js b/src/components/tieredmenu/TieredMenu.js
deleted file mode 100644
index f4bc40ad8d..0000000000
--- a/src/components/tieredmenu/TieredMenu.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-import {TieredMenuSub} from './TieredMenuSub';
-
-export class TieredMenu extends Component {
-
-    static defaultProps = {
-        id: null,
-        model: null,
-        popup: false,
-        style: null,
-        className: null,
-        autoZIndex: true,
-        baseZIndex: 0,
-        appendTo: null,
-        onShow: null,
-        onHide: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        model: PropTypes.array,
-        popup: PropTypes.bool,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        autoZIndex: PropTypes.bool,
-        baseZIndex: PropTypes.number,
-        appendTo: PropTypes.any,
-        onShow: PropTypes.func,
-        onHide: PropTypes.func
-    };
-
-    toggle(event) {
-        if (this.props.popup) {
-            if (this.container.offsetParent)
-                this.hide(event);
-            else
-                this.show(event);
-        }
-    }
-
-    show(event) {
-        if (this.props.autoZIndex) {
-            this.container.style.zIndex = String(this.props.baseZIndex + DomHandler.generateZIndex());
-        }
-        this.container.style.display = 'block';
-        
-        setTimeout(() => {
-            DomHandler.addClass(this.container, 'p-menu-overlay-visible');
-            DomHandler.removeClass(this.container, 'p-menu-overlay-hidden');
-        }, 1);
-
-        DomHandler.absolutePosition(this.container,  event.currentTarget);
-        this.bindDocumentListeners();
-        
-        if (this.props.onShow) {
-            this.props.onShow(event);
-        }
-    }
-
-    hide(event) {
-        if (this.container) {
-            DomHandler.addClass(this.container, 'p-menu-overlay-hidden');
-            DomHandler.removeClass(this.container, 'p-menu-overlay-visible');
-
-            setTimeout(() => {
-                if (this.container) {
-                    this.container.style.display = 'none';
-                    DomHandler.removeClass(this.container, 'p-menu-overlay-hidden');
-                }
-            }, 150);
-        }
-
-        if (this.props.onHide) {
-            this.props.onHide(event);
-        }
-
-        this.unbindDocumentListeners();
-    }
-
-    bindDocumentListeners() {
-        this.bindDocumentClickListener();
-        this.bindDocumentResizeListener();
-    }
-    
-    unbindDocumentListeners() {
-        this.unbindDocumentClickListener();
-        this.unbindDocumentResizeListener();
-    }
-
-    bindDocumentClickListener() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (this.props.popup && !this.container.contains(event.target)) {
-                    this.hide(event);
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    unbindDocumentClickListener() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    bindDocumentResizeListener() {
-        if (!this.documentResizeListener) {
-            this.documentResizeListener = (event) => {
-                if (this.container.offsetParent) {
-                    this.hide(event);
-                }
-            };
-
-            window.addEventListener('resize', this.documentResizeListener);
-        }
-    }
-
-    unbindDocumentResizeListener() {
-        if(this.documentResizeListener) {
-            window.removeEventListener('resize', this.documentResizeListener);
-            this.documentResizeListener = null;
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentListeners();
-    }
-
-    renderElement() {
-        const className = classNames('p-tieredmenu p-component', {'p-tieredmenu-dynamic p-menu-overlay': this.props.popup}, this.props.className);
-
-        return(
-            <div ref={el => this.container = el} id={this.props.id} className={className} style={this.props.style}>
-                <TieredMenuSub model={this.props.model} root={true} popup={this.props.popup} />
-            </div>
-        );
-    }
-
-    render() {
-        const element = this.renderElement();
-        
-        if (this.props.appendTo)
-            return ReactDOM.createPortal(element, this.props.appendTo);
-        else
-            return element;
-    }
-}
\ No newline at end of file
diff --git a/src/components/tieredmenu/TieredMenuSub.js b/src/components/tieredmenu/TieredMenuSub.js
deleted file mode 100644
index 299a6fffc4..0000000000
--- a/src/components/tieredmenu/TieredMenuSub.js
+++ /dev/null
@@ -1,296 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class TieredMenuSub extends Component {
-
-    static defaultProps = {
-        model: null,
-        root: false,
-        className: null,
-        popup: false,
-        onLeafClick: null,
-        onKeyDown: null,
-        parentActive: false
-    };
-
-    static propTypes = {
-        model: PropTypes.any,
-        root: PropTypes.bool,
-        className: PropTypes.string,
-        popup: PropTypes.bool,
-        onLeafClick: PropTypes.func,
-        onKeyDown: PropTypes.func,
-        parentActive: PropTypes.bool
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeItem: null
-        };
-
-        this.onLeafClick = this.onLeafClick.bind(this);
-        this.onChildItemKeyDown = this.onChildItemKeyDown.bind(this);
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.parentActive && !this.props.parentActive) {
-            this.setState({
-                activeItem: null
-            });
-        }
-    }
-
-    componentDidMount() {
-        if (!this.documentClickListener) {
-            this.documentClickListener = (event) => {
-                if (this.element && !this.element.contains(event.target)) {
-                    this.setState({activeItem: null});
-                }
-            };
-
-            document.addEventListener('click', this.documentClickListener);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
-            this.documentClickListener = null;
-        }
-    }
-
-    onItemMouseEnter(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (this.props.root) {
-            if (this.state.activeItem || this.props.popup) {
-                this.setState({
-                    activeItem: item
-                });
-            }
-        }
-        else {
-            this.setState({
-                activeItem: item
-            });
-        }
-    }
-
-    onItemClick(event, item) {
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-
-        if (!item.url) {
-            event.preventDefault();
-        }
-
-        if (item.command) {
-            item.command({
-                originalEvent: event,
-                item: item
-            });
-        }
-
-        if (this.props.root) {
-            if (item.items) {
-                if (this.state.activeItem && item === this.state.activeItem) {
-                    this.setState({
-                        activeItem: null
-                    });
-                }
-                else {
-                    this.setState({
-                        activeItem: item
-                    });
-                }
-            }
-        }
-
-        if (!item.items) {
-            this.onLeafClick();
-        }
-    }
-
-    onItemKeyDown(event, item) {
-        let listItem = event.currentTarget.parentElement;
-
-        switch(event.which) {
-            //down
-            case 40:
-                var nextItem = this.findNextItem(listItem);
-                if (nextItem) {
-                    nextItem.children[0].focus();
-                }
-
-                event.preventDefault();
-            break;
-
-            //up
-            case 38:
-                var prevItem = this.findPrevItem(listItem);
-                if (prevItem) {
-                    prevItem.children[0].focus();
-                }
-
-                event.preventDefault();
-            break;
-
-            //right
-            case 39:
-                if (item.items) {
-                    this.setState({
-                        activeItem: item
-                    });
-
-                    setTimeout(() => {
-                        listItem.children[1].children[0].children[0].focus();
-                    }, 50);
-                }
-
-                event.preventDefault();
-            break;
-
-            default:
-            break;
-        }
-
-        if (this.props.onKeyDown) {
-            this.props.onKeyDown(event, listItem);
-        }
-    }
-
-    onChildItemKeyDown(event, childListItem) {
-        //left
-        if (event.which === 37) {
-            this.setState({activeItem: null});
-            childListItem.parentElement.previousElementSibling.focus();
-        }
-    }
-
-    findNextItem(item) {
-        let nextItem = item.nextElementSibling;
-
-        if (nextItem)
-            return DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-        else
-            return null;
-    }
-
-    findPrevItem(item) {
-        let prevItem = item.previousElementSibling;
-
-        if (prevItem)
-            return DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-        else
-            return null;
-    }
-
-    onLeafClick() {
-        this.setState({
-            activeItem: null
-        });
-
-        if (this.props.onLeafClick) {
-            this.props.onLeafClick();
-        }
-    }
-
-    renderSeparator(index) {
-        return (
-            <li key={'separator_' + index} className="p-menu-separator" role="separator"></li>
-        );
-    }
-
-    renderIcon(item) {
-        const className = classNames('p-menuitem-icon', item.icon);
-
-        if (item.icon) {
-            return (
-                <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenuIcon(item) {
-        if (item.items) {
-            return (
-                <span className="p-submenu-icon pi pi-fw pi-caret-right"></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSubmenu(item) {
-        if(item.items) {
-            return (
-                <TieredMenuSub model={item.items} onLeafClick={this.onLeafClick} popup={this.props.popup} onKeyDown={this.onChildItemKeyDown} parentActive={item === this.state.activeItem} />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderMenuitem(item, index) {
-        const className = classNames('p-menuitem', {'p-menuitem-active': this.state.activeItem === item, 'p-disabled': item.disabled}, item.className);
-        const icon = this.renderIcon(item);
-        const submenuIcon = this.renderSubmenuIcon(item);
-        const submenu = this.renderSubmenu(item);
-
-        return (
-            <li key={item.label + '_' + index} className={className} style={item.style} onMouseEnter={(event) => this.onItemMouseEnter(event, item)} role="none">
-                <a href={item.url || '#'} className="p-menuitem-link" target={item.target} role="menuitem" aria-haspopup={item.items != null}
-                    onClick={(event) => this.onItemClick(event, item)} onKeyDown={(event) => this.onItemKeyDown(event, item)}>
-                    {icon}
-                    <span className="p-menuitem-text">{item.label}</span>
-                    {submenuIcon}
-                </a>
-                {submenu}
-            </li>
-        );
-    }
-
-    renderItem(item, index) {
-        if (item.separator)
-            return this.renderSeparator(index);
-        else
-            return this.renderMenuitem(item, index);
-    }
-
-    renderMenu() {
-        if (this.props.model) {
-            return (
-                this.props.model.map((item, index) => {
-                    return this.renderItem(item, index);
-                })
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames({'p-submenu-list': !this.props.root});
-        const submenu = this.renderMenu();
-
-        return (
-            <ul ref={el => this.element = el} className={className} role={this.props.root ? 'menubar' : 'menu'} aria-orientation="horizontal">
-                {submenu}
-            </ul>
-        );
-    }
-}
diff --git a/src/components/togglebutton/ToggleButton.d.ts b/src/components/togglebutton/ToggleButton.d.ts
deleted file mode 100644
index 2f68491db9..0000000000
--- a/src/components/togglebutton/ToggleButton.d.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface ToggleButtonProps {
-    id?: string;
-    onIcon?: string;
-    offIcon?: string;
-    onLabel?: string;
-    offLabel?: string;
-    style?: object;
-    className?: string;
-    checked?: boolean;
-    tabIndex?: number;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?:string;
-    onChange?(e: {originalEvent: Event, value: boolean, target: {type: string, name: string, id: string, value: boolean}}): void;
-    onFocus?(event: Event): void;
-    onBlur?(event: Event): void;
-}
-
-export class ToggleButton extends React.Component<ToggleButtonProps,any> {}
diff --git a/src/components/togglebutton/ToggleButton.js b/src/components/togglebutton/ToggleButton.js
deleted file mode 100644
index 66f84069d6..0000000000
--- a/src/components/togglebutton/ToggleButton.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Tooltip from "../tooltip/Tooltip";
-
-export class ToggleButton extends Component {
-
-    static defaultProps = {
-        id: null,
-        onIcon: null,
-        offIcon: null,
-        onLabel: 'Yes',
-        offLabel: 'No',
-        style: null,
-        className: null,
-        checked: false,
-        tabIndex: 0,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null,
-        onFocus: null,
-        onBlur: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        onIcon: PropTypes.string,
-        offIcon: PropTypes.string,
-        onLabel: PropTypes.string,
-        offLabel: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        checked: PropTypes.bool,
-        tabIndex: PropTypes.number,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {};
-        this.toggle = this.toggle.bind(this);
-        this.onInputFocus = this.onInputFocus.bind(this);
-        this.onInputBlur = this.onInputBlur.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    toggle(e) {
-        if (!this.props.disabled && this.props.onChange) {
-            this.props.onChange({
-                originalEvent: e,
-                value: !this.props.checked,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: !this.props.checked,
-                }
-            });
-
-            this.input.focus();
-        }
-    }
-
-    onInputFocus(event) {
-        this.setState({focused: true});
-
-        if (this.props.onFocus) {
-            this.props.onFocus(event);
-        }
-    }
-
-    onInputBlur(event) {
-        this.setState({focused: false});
-
-        if (this.props.onBlur) {
-            this.props.onBlur(event);
-        }
-    }
-
-    onKeyDown(event) {
-        if (event.key === 'Enter') {
-            this.toggle(event);
-            event.preventDefault();
-        }
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.container,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        let className = classNames('p-button p-togglebutton p-component', this.props.className, {
-            'p-button-text-icon-left': (this.props.onIcon && this.props.offIcon),
-            'p-button-text-only': (!this.props.onIcon && !this.props.offIcon) && (this.props.onLabel || this.props.offLabel),
-            'p-highlight': this.props.checked,
-            'p-disabled': this.props.disabled,
-            'p-focus': this.state.focused
-        }),
-        iconStyleClass = null;
-
-        if (this.props.onIcon || this.props.offIcon) {
-            iconStyleClass = classNames('p-c' , this.props.checked ? this.props.onIcon : this.props.offIcon , {
-                'p-button-icon-only': (this.props.onIcon && this.props.offIcon) && (!this.props.onLabel || !this.props.offLabel),
-                'p-button-icon-left': (this.props.onIcon && this.props.offIcon)
-            });
-        }
-
-        return (
-           <div ref={(el) => this.container = el} id={this.props.id} className={className} style={this.props.style} onClick={this.toggle}>
-                <div className="p-hidden-accessible">
-                    <input ref={(el) => this.input = el} type="checkbox" onFocus={this.onInputFocus} onBlur={this.onInputBlur} onKeyDown={this.onKeyDown} tabIndex={this.props.tabIndex}
-                           role="button" aria-pressed={this.props.checked} aria-labelledby={this.props.ariaLabelledBy} disabled={this.props.disabled} />
-                </div>
-                {(this.props.onIcon && this.props.offIcon) && <span className={iconStyleClass}></span>}
-                <span className="p-button-text p-unselectable-text">{this.props.checked ? this.props.onLabel : this.props.offLabel}</span>
-            </div>
-        );
-    }
-}
diff --git a/src/components/toolbar/Toolbar.css b/src/components/toolbar/Toolbar.css
deleted file mode 100644
index 1d75836217..0000000000
--- a/src/components/toolbar/Toolbar.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.p-toolbar {
-    padding: .25em .5em;
-}
-
-.p-toolbar:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.p-toolbar-group-left {
-    float:left
-}
-
-.p-toolbar-group-right {
-    float:right
-}
\ No newline at end of file
diff --git a/src/components/toolbar/Toolbar.d.ts b/src/components/toolbar/Toolbar.d.ts
deleted file mode 100644
index 0ad504df26..0000000000
--- a/src/components/toolbar/Toolbar.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-interface ToolbarProps {
-    id?: string;
-    style?: object;
-    className?: string;
-}
-
-export class Toolbar extends React.Component<ToolbarProps,any> {}
\ No newline at end of file
diff --git a/src/components/toolbar/Toolbar.js b/src/components/toolbar/Toolbar.js
deleted file mode 100644
index 67a5ae708f..0000000000
--- a/src/components/toolbar/Toolbar.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-
-export class Toolbar extends Component {
-
-    static defaultProps = {
-        id: null,
-        style: null,
-        className:null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string
-    };
-
-    render() {
-        let toolbarClass = classNames('p-toolbar p-component', this.props.className)
-        return (
-            <div id={this.props.id} className={toolbarClass} style={this.props.style} role="toolbar">
-                {this.props.children}
-            </div>
-        );
-    }
-}
diff --git a/src/components/tooltip/Tooltip.css b/src/components/tooltip/Tooltip.css
deleted file mode 100644
index 04d93b735f..0000000000
--- a/src/components/tooltip/Tooltip.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.p-tooltip {
-    position:absolute;
-    display:none;
-    padding: .25em .5em;
-    max-width: 12.5em;
-}
-
-.p-tooltip.p-tooltip-right,
-.p-tooltip.p-tooltip-left {
-    padding: 0 .25em;
-}
-
-.p-tooltip.p-tooltip-top,
-.p-tooltip.p-tooltip-bottom {
-    padding:.25em 0;
-}
-
-.p-tooltip .p-tooltip-text {
-   padding: .125em .5em;
-   background-color: rgb(76, 76, 76);
-   color: #ffffff;
-   white-space: pre-line;
-}
-
-.p-tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-}
-
-.p-tooltip-right .p-tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: -.25em;
-    border-width: .25em .25em .25em 0;
-    border-right-color: rgb(76, 76, 76);
-}
-
-.p-tooltip-left .p-tooltip-arrow {
-    top: 50%;
-    right: 0;
-    margin-top: -.25em;
-    border-width: .25em 0 .25em .25em;
-    border-left-color: rgb(76, 76, 76);
-}
-
-.p-tooltip.p-tooltip-top {
-    padding: .25em 0;
-}
-
-.p-tooltip-top .p-tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    margin-left: -.25em;
-    border-width: .25em .25em 0;
-    border-top-color: rgb(76, 76, 76);
-}
-
-.p-tooltip-bottom .p-tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -.25em;
-    border-width: 0 .25em .25em;
-    border-bottom-color: rgb(76, 76, 76);
-}
\ No newline at end of file
diff --git a/src/components/tooltip/Tooltip.js b/src/components/tooltip/Tooltip.js
deleted file mode 100644
index 61e731a4ed..0000000000
--- a/src/components/tooltip/Tooltip.js
+++ /dev/null
@@ -1,297 +0,0 @@
-import DomHandler from '../utils/DomHandler';
-
-export default class Tooltip  {
-
-    constructor(props) {
-        this.target = props.target;
-        this.targetContainer = props.targetContainer;
-        this.content = props.content;
-        this.options = props.options || {};
-        this.options.event = this.options.event || 'hover';
-        this.options.position = this.options.position || 'right';
-
-        this.bindEvents();
-    }
-
-    bindEvents() {
-        if (this.options.event === 'hover') {
-            this.mouseEnterListener = this.onMouseEnter.bind(this);
-            this.mouseLeaveListener = this.onMouseLeave.bind(this);
-            this.clickListener = this.onClick.bind(this);
-            this.target.addEventListener('mouseenter', this.mouseEnterListener);
-            this.target.addEventListener('mouseleave', this.mouseLeaveListener);
-            this.target.addEventListener('click', this.clickListener);
-        }
-        else if (this.options.event === 'focus') {
-            this.focusListener = this.onFocus.bind(this);
-            this.blurListener = this.onBlur.bind(this);
-            this.target.addEventListener('focus', this.focusListener);
-            this.target.addEventListener('blur', this.blurListener);
-        }
-    }
-
-    unbindEvents() {
-        if (this.options.event === 'hover') {
-            this.target.removeEventListener('mouseenter', this.mouseEnterListener);
-            this.target.removeEventListener('mouseleave', this.mouseLeaveListener);
-            this.target.removeEventListener('click', this.clickListener);
-        }
-        else if (this.options.event === 'focus') {
-            this.target.removeEventListener('focus', this.focusListener);
-            this.target.removeEventListener('blur', this.blurListener);
-        }
-
-        this.unbindDocumentResizeListener();
-    }
-
-    onMouseEnter() {
-        if (!this.container && !this.showTimeout) {
-            this.activate();
-        }
-    }
-    
-    onMouseLeave() {
-        this.deactivate();
-    }
-    
-    onFocus() {
-        this.activate();
-    }
-    
-    onBlur() {
-        this.deactivate();
-    }
-  
-    onClick() {
-        this.deactivate();
-    }
-
-    activate() {
-        this.clearHideTimeout();
-
-        if (this.options.showDelay)
-            this.showTimeout = setTimeout(() => { this.show() }, this.options.showDelay);
-        else
-            this.show();
-    }
-
-    deactivate() {
-        this.clearShowTimeout();
-
-        if (this.options.hideDelay)
-            this.hideTimeout = setTimeout(() => { this.hide() }, this.options.hideDelay);
-        else
-            this.hide();
-    }
-
-    clearShowTimeout() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = null;
-        }
-    }
-
-    clearHideTimeout() {
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = null;
-        }
-    }
-
-    clearTimeouts() {
-        this.clearShowTimeout();
-        this.clearHideTimeout();
-    }
-
-    updateContent(content) {
-        this.content = content;
-    }
-
-    show() {
-        if (!this.content) {
-            return;
-        }
-
-        this.create();
-        this.align();
-        DomHandler.fadeIn(this.container, 250);
-        this.container.style.zIndex = ++DomHandler.zindex;
-
-        this.bindDocumentResizeListener();
-    }
-
-    hide() {
-        this.remove();
-    }
-
-    create() {
-        this.container = document.createElement('div');
-
-        let tooltipArrow = document.createElement('div');
-        tooltipArrow.className = 'p-tooltip-arrow';
-        this.container.appendChild(tooltipArrow);
-
-        this.tooltipText = document.createElement('div');
-        this.tooltipText.className = 'p-tooltip-text';
-
-        //todo: JSX support
-        this.tooltipText.innerHTML = this.content;
-
-        this.container.appendChild(this.tooltipText);
-        document.body.appendChild(this.container);
-
-        this.container.style.display = 'inline-block';
-    }
-
-    remove() {
-        if (this.container && this.container.parentElement) {
-            document.body.removeChild(this.container);
-        }
-
-        this.unbindDocumentResizeListener();
-        this.clearTimeouts();
-        this.container = null;
-    }
-
-    align() {
-        switch (this.options.position) {
-            case 'top':
-                this.alignTop();
-                if (this.isOutOfBounds()) {
-                    this.alignBottom();
-                }
-                break;
-
-            case 'bottom':
-                this.alignBottom();
-                if (this.isOutOfBounds()) {
-                    this.alignTop();
-                }
-                break;
-
-            case 'left':
-                this.alignLeft();
-                if (this.isOutOfBounds()) {
-                    this.alignRight();
-
-                    if (this.isOutOfBounds()) {
-                        this.alignTop();
-
-                        if (this.isOutOfBounds()) {
-                            this.alignBottom();
-                        }
-                    }
-                }
-                break;
-
-            case 'right':
-                this.alignRight();
-                if (this.isOutOfBounds()) {
-                    this.alignLeft();
-
-                    if (this.isOutOfBounds()) {
-                        this.alignTop();
-
-                        if (this.isOutOfBounds()) {
-                            this.alignBottom();
-                        }
-                    }
-                }
-                break;
-
-            default:
-                throw new Error('Invalid position:' + this.options.position);
-        }
-    }
-
-    getHostOffset() {
-        let target = this.targetContainer || this.target;
-        let offset = target.getBoundingClientRect();
-        let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
-        let targetTop = offset.top + DomHandler.getWindowScrollTop();
-    
-        return { left: targetLeft, top: targetTop };
-    }
-
-    alignRight() {
-        this.preAlign('right');
-        let target = this.targetContainer || this.target;
-        let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + DomHandler.getOuterWidth(target);
-        let top = hostOffset.top + (DomHandler.getOuterHeight(target) - DomHandler.getOuterHeight(this.container)) / 2;
-        this.container.style.left = left + 'px';
-        this.container.style.top = top + 'px';
-    }
-
-    alignLeft() {
-        this.preAlign('left');
-        let target = this.targetContainer || this.target;
-        let hostOffset = this.getHostOffset();
-        let left = hostOffset.left - DomHandler.getOuterWidth(this.container);
-        let top = hostOffset.top + (DomHandler.getOuterHeight(target) - DomHandler.getOuterHeight(this.container)) / 2;
-        this.container.style.left = left + 'px';
-        this.container.style.top = top + 'px';
-    }
-
-    alignTop() {
-        this.preAlign('top');
-        let target = this.targetContainer || this.target;
-        let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + (DomHandler.getOuterWidth(target) - DomHandler.getOuterWidth(this.container)) / 2;
-        let top = hostOffset.top - DomHandler.getOuterHeight(this.container);
-        this.container.style.left = left + 'px';
-        this.container.style.top = top + 'px';
-    }
-
-    alignBottom() {
-        this.preAlign('bottom');
-        let target = this.targetContainer || this.target;
-        let hostOffset = this.getHostOffset();
-        let left = hostOffset.left + (DomHandler.getOuterWidth(target) - DomHandler.getOuterWidth(this.container)) / 2;
-        let top = hostOffset.top + DomHandler.getOuterHeight(target);
-        this.container.style.left = left + 'px';
-        this.container.style.top = top + 'px';
-    }
-
-    preAlign(position) {
-        this.container.style.left = -999 + 'px';
-        this.container.style.top = -999 + 'px';
-
-        let defaultClassName = 'p-tooltip p-component p-tooltip-' + position;
-        this.container.className = this.options.className ? defaultClassName + ' ' + this.options.className : defaultClassName;
-    }
-
-    isOutOfBounds() {
-        let offset = this.container.getBoundingClientRect();
-        let targetTop = offset.top;
-        let targetLeft = offset.left;
-        let width = DomHandler.getOuterWidth(this.container);
-        let height = DomHandler.getOuterHeight(this.container);
-        let viewport = DomHandler.getViewport();
-
-        return (targetLeft + width > viewport.width) || (targetLeft < 0) || (targetTop < 0) || (targetTop + height > viewport.height);
-    }
-
-    bindDocumentResizeListener() {
-        this.resizeListener = this.onWindowResize.bind(this);
-        window.addEventListener('resize', this.resizeListener);
-    }
-
-    unbindDocumentResizeListener() {
-        if (this.resizeListener) {
-            window.removeEventListener('resize', this.resizeListener);
-            this.resizeListener = null;
-        }
-    }
-
-    onWindowResize() {
-        this.hide();
-    }
-
-    destroy() {
-        this.unbindEvents();
-        this.remove();
-        this.target = null;
-        this.targetContainer = null;
-    }
- }
diff --git a/src/components/tooltip/TooltipOptions.d.ts b/src/components/tooltip/TooltipOptions.d.ts
deleted file mode 100644
index c4238e9801..0000000000
--- a/src/components/tooltip/TooltipOptions.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default interface TooltipOptions {
-    event?: string;
-    position?: string;
-    showDelay?: number;
-    hideDelay?: number;
-	  className?: string;
-}
\ No newline at end of file
diff --git a/src/components/tree/Tree.css b/src/components/tree/Tree.css
deleted file mode 100644
index b18c022029..0000000000
--- a/src/components/tree/Tree.css
+++ /dev/null
@@ -1,210 +0,0 @@
-.p-tree {
-    width: 24em;
-}
-
-.p-tree .p-treenode-selectable.p-treenode-content {
-    cursor: pointer;
-}
-
-.p-tree .p-tree-container {
-    height: 100%;
-    margin: 0;
-    overflow: auto;
-    padding: .25em;
-    white-space: nowrap;
-}
-
-.p-tree .p-treenode-children {
-    margin: 0;
-    padding: 0 0 0 1em;
-}
-
-.p-tree .p-treenode {
-    background-attachment: scroll;
-    background-color: transparent;
-    background-image: none;
-    background-position: 0 0;
-    background-repeat: repeat-y;
-    list-style: none outside none;
-    margin: 0;
-    padding: .125em 0 0 0;
-}
-
-.p-tree .p-treenode-droppoint {
-    height: 4px;
-    list-style-type: none;
-}
-
-.p-tree .p-treenode-droppoint-active {
-    border: 0 none;
-}
-
-.p-tree .p-tree-toggler {
-    cursor: pointer;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-tree .p-tree-toggler .p-tree-toggler-icon {
-    vertical-align: middle;
-}
-
-.p-tree .p-treenode-icon {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-tree .p-treenode-label {
-    display: inline-block;
-    padding: 0 .25em;
-    vertical-align: middle;
-}
-
-.p-tree .p-treenode.p-treenode-leaf > .p-treenode-content > .p-tree-toggler {
-    visibility: hidden;
-}
-
-.p-tree .p-checkbox-box {
-    cursor: pointer;
-}
-
-.p-tree .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-tree .p-checkbox .p-checkbox-icon {
-    margin-left: 1px;
-}
-
-.p-tree .p-tree-filter {
-    width: 100%;
-    box-sizing: border-box;
-    padding-right: 1.5em;
-}
-
-.p-tree .p-tree-filter-container {
-    position: relative;
-    margin: 0;
-    padding: 0.4em;
-    display: inline-block;
-    width: 100%;
-}
-
-.p-tree .p-tree-filter-container .p-tree-filter-icon {
-    position: absolute;
-    top: .8em;
-    right: 1em;
-}
-
-.p-tree.p-disabled .p-treenode-selectable.p-treenode-content,
-.p-tree.p-disabled .p-tree-toggler,
-.p-tree.p-disabled .p-checkbox-box {
-    cursor: default;
-}
-
-/** Fluid **/
-.p-fluid .p-tree {
-    width: 100%;
-}
-
-/** Horizontal Tree **/
-.p-tree-horizontal {
-    width:auto;
-    padding: .5em 0;
-    overflow:auto;
-}
-
-.p-tree.p-tree-horizontal table,
-.p-tree.p-tree-horizontal tr,
-.p-tree.p-tree-horizontal td {
-    border-collapse: collapse;
-    margin: 0;
-    padding: 0;
-    vertical-align: middle;
-}
-
-.p-tree.p-tree-horizontal .p-tree-toggler {
-    vertical-align: middle;
-    margin: 0;
-}
-
-.p-tree-horizontal .p-treenode-content {
-    font-weight: normal;
-    padding: 0.4em 1em 0.4em 0.2em;
-}
-
-.p-tree.p-tree-horizontal .p-tree-node-label {
-    margin: 0;
-}
-
-.p-tree-horizontal .p-treenode-parent .p-treenode-content {
-    font-weight: normal;
-    white-space: nowrap;
-}
-
-.p-tree.p-tree-horizontal .p-treenode {
-    background: url("http://github.com/images/line.gif") repeat-x scroll center center transparent;
-    padding: .25em 2.5em;
-}
-
-.p-tree.p-tree-horizontal .p-treenode.p-treenode-leaf,
-.p-tree.p-tree-horizontal .p-treenode.p-treenode-collapsed {
-    padding-right: 0;
-}
-
-.p-tree.p-tree-horizontal .p-treenode-children {
-    padding: 0;
-    margin: 0;
-}
-
-.p-tree.p-tree-horizontal .p-treenode-connector {
-    width: 1px;
-}
-
-.p-tree.p-tree-horizontal .p-treenode-connector-table {
-    height: 100%;
-    width: 1px;
-}
-
-.p-tree.p-tree-horizontal .p-treenode-connector-line {
-    background: url("http://github.com/images/line.gif") repeat-y scroll 0 0 transparent;
-    width: 1px;
-}
-
-.p-tree.p-tree-horizontal table {
-	height: 0;
-}
-
-.p-tree.p-tree-horizontal .p-checkbox {
-    vertical-align: bottom;
-    margin-right: .25em;
-}
-
-/** Loading **/
-.p-tree.p-tree-loading {
-    position: relative;
-    min-height: 4em;
-}
-
-.p-tree .p-tree-loading-mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
-    z-index: 1;
-}
-
-.p-tree .p-tree-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-tree .p-tree-loading-content .p-tree-loading-icon {
-    font-size: 2em;
-} 
diff --git a/src/components/tree/Tree.d.ts b/src/components/tree/Tree.d.ts
deleted file mode 100644
index 0e7aab7e9f..0000000000
--- a/src/components/tree/Tree.d.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import TreeNode from "../treenode/TreeNode";
-
-interface TreeProps {
-    id?: string;
-    value?: TreeNode[];
-    disabled?: boolean;
-    selectionMode?: string;
-    selectionKeys?: any;
-    onSelectionChange?(e: {originalEvent: Event, value: any}): void;
-    contextMenuSelectionKey?: any;
-    onContextMenuSelectionChange?(e: {originalEvent: Event, value: any}): void;
-    expandedKeys?: any;
-    style?: object;
-    className?: string;
-    contentStyle?: object;
-    contentClassName?: string;
-    metaKeySelection?: boolean;
-    propagateSelectionUp?: boolean;
-    propagateSelectionDown?: boolean;
-    loading?: boolean;
-    loadingIcon?: string;
-    dragdropScope?: string;
-    filter?: boolean;
-    filterBy?: any;
-    filterMode?: string;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    nodeTemplate?(node: any): JSX.Element;
-    onSelect?(e: {originalEvent: Event, node: TreeNode}): void;
-    onUnselect?(e: {originalEvent: Event, node: TreeNode}): void;
-    onExpand?(e: {originalEvent: Event, node: TreeNode}): void;
-    onCollapse?(e: {originalEvent: Event, node: TreeNode}): void;
-    onToggle?(e: {originalEvent: Event, value: any}): void;
-    onDragDrop?(e: {originalEvent: Event, value: any}): void;
-    onContextMenu?(e: {originalEvent: Event, node: TreeNode}): void;
-}
-
-export class Tree extends React.Component<TreeProps,any> {}
diff --git a/src/components/tree/Tree.js b/src/components/tree/Tree.js
deleted file mode 100644
index 2588ef2aec..0000000000
--- a/src/components/tree/Tree.js
+++ /dev/null
@@ -1,440 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-import {UITreeNode} from './UITreeNode';
-
-export class Tree extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        disabled: false,
-        selectionMode: null,
-        selectionKeys: null,
-        onSelectionChange: null,
-        contextMenuSelectionKey: null,
-        onContextMenuSelectionChange: null,
-        expandedKeys: null,
-        style: null,
-        className: null,
-        contentStyle: null,
-        contentClassName: null,
-        metaKeySelection: true,
-        propagateSelectionUp: true,
-        propagateSelectionDown: true,
-        loading: false,
-        loadingIcon: 'pi pi-spinner',
-        dragdropScope: null,
-        filter: false,
-        filterBy: 'label',
-        filterMode: 'lenient',
-        filterPlaceholder: null,
-        filterLocale: undefined,
-        nodeTemplate: null,
-        onSelect: null,
-        onUnselect: null,
-        onExpand: null,
-        onCollapse: null,
-        onToggle: null,
-        onDragDrop: null,
-        onContextMenu: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        disabled: PropTypes.bool,
-        selectionMode: PropTypes.string,
-        selectionKeys: PropTypes.any,
-        onSelectionChange: PropTypes.func,
-        contextMenuSelectionKey: PropTypes.any,
-        onContextMenuSelectionChange: PropTypes.func,
-        expandedKeys: PropTypes.object,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        contentStyle: PropTypes.object,
-        contentClassName: PropTypes.string,
-        metaKeySelection: PropTypes.bool,
-        propagateSelectionUp: PropTypes.bool,
-        propagateSelectionDown: PropTypes.bool,
-        loading: PropTypes.bool,
-        loadingIcon: PropTypes.string,
-        dragdropScope: PropTypes.string,
-        filter: PropTypes.bool,
-        filterBy: PropTypes.any,
-        filterMode: PropTypes.string,
-        filterPlaceholder: PropTypes.string,
-        filterLocale: PropTypes.string,
-        nodeTemplate: PropTypes.func,
-        onSelect: PropTypes.func,
-        onUnselect: PropTypes.func,
-        onExpand: PropTypes.func,
-        onCollapse: PropTypes.func,
-        onToggle: PropTypes.func,
-        onDragDrop: PropTypes.func,
-        onContextMenu: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        if (!this.props.onToggle) {
-            this.state = {
-                expandedKeys: this.props.expandedKeys,
-                filter: ''
-            };
-        }
-
-        this.isNodeLeaf = this.isNodeLeaf.bind(this);
-        this.onToggle = this.onToggle.bind(this);
-        this.onDragStart = this.onDragStart.bind(this);
-        this.onDragEnd = this.onDragEnd.bind(this);
-        this.onDrop = this.onDrop.bind(this);
-        this.onDropPoint = this.onDropPoint.bind(this);
-        this.onFilterInputChange = this.onFilterInputChange.bind(this);
-        this.onFilterInputKeyDown = this.onFilterInputKeyDown.bind(this);
-    }
-
-    getExpandedKeys() {
-        return this.props.onToggle ? this.props.expandedKeys : this.state.expandedKeys;
-    }
-
-    getRootNode() {
-        return (this.props.filter && this.filteredNodes) ? this.filteredNodes : this.props.value;
-    }
-
-    onToggle(event) {
-        if (this.props.onToggle) {
-            this.props.onToggle(event);
-        }
-        else {
-            this.setState({
-                expandedKeys: event.value
-            });
-        }
-    }
-
-    onDragStart(event) {
-        this.dragState = {
-            path: event.path,
-            index: event.index
-        }
-    }
-
-    onDragEnd() {
-        this.dragState = null;
-    }
-
-    onDrop(event) {
-        if (this.validateDropNode(this.dragState.path, event.path)) {
-            let value = JSON.parse(JSON.stringify(this.props.value));
-            let dragPaths = this.dragState.path.split('-');
-            dragPaths.pop();
-            let dragNodeParent = this.findNode(value, dragPaths);
-            let dragNode = dragNodeParent ? dragNodeParent.children[this.dragState.index] : value[this.dragState.index];
-            let dropNode = this.findNode(value, event.path.split('-'));
-
-            if (dropNode.children)
-                dropNode.children.push(dragNode);
-            else
-                dropNode.children = [dragNode];
-
-            if (dragNodeParent)
-                dragNodeParent.children.splice(this.dragState.index, 1);
-            else
-                value.splice(this.dragState.index, 1);
-
-            if (this.props.onDragDrop) {
-                this.props.onDragDrop({
-                    originalEvent: event.originalEvent,
-                    value: value
-                });
-            }
-        }
-    }
-
-    onDropPoint(event) {
-        if (this.validateDropPoint(event)) {
-            let value = JSON.parse(JSON.stringify(this.props.value));
-            let dragPaths = this.dragState.path.split('-');
-            dragPaths.pop();
-            let dropPaths = event.path.split('-');
-            dropPaths.pop();
-            let dragNodeParent = this.findNode(value, dragPaths);
-            let dropNodeParent = this.findNode(value, dropPaths);
-            let dragNode = dragNodeParent ? dragNodeParent.children[this.dragState.index] : value[this.dragState.index];
-            let siblings = this.areSiblings(this.dragState.path, event.path);
-
-            if (dragNodeParent)
-                dragNodeParent.children.splice(this.dragState.index, 1);
-            else
-                value.splice(this.dragState.index, 1);
-
-            if (event.position < 0) {
-                let dropIndex = (siblings) ? (this.dragState.index > event.index) ? event.index : event.index - 1 : event.index;
-
-                if (dropNodeParent)
-                    dropNodeParent.children.splice(dropIndex, 0, dragNode);
-                else
-                    value.splice(dropIndex, 0, dragNode);
-            }
-            else {
-                if (dropNodeParent)
-                    dropNodeParent.children.push(dragNode);
-                else
-                    value.push(dragNode);
-            }
-
-            if (this.props.onDragDrop) {
-                this.props.onDragDrop({
-                    originalEvent: event.originalEvent,
-                    value: value
-                });
-            }
-        }
-    }
-
-    validateDrop(dragPath, dropPath) {
-        if (!dragPath) {
-            return false;
-        }
-        else {
-            //same node
-            if (dragPath === dropPath) {
-                return false;
-            }
-
-            //parent dropped on an descendant
-            if (dropPath.indexOf(dragPath) === 0) {
-                return false;
-            }
-
-            return true;
-        }
-    }
-
-    validateDropNode(dragPath, dropPath) {
-        let validateDrop = this.validateDrop(dragPath, dropPath);
-        if (validateDrop) {
-            //child dropped on parent
-            if (dragPath.indexOf('-') > 0 && dragPath.substring(0, dragPath.lastIndexOf('-')) === dropPath) {
-                return false;
-            }
-
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-
-    validateDropPoint(event) {
-        let validateDrop = this.validateDrop(this.dragState.path, event.path);
-        if (validateDrop) {
-            //child dropped to next sibling's drop point
-            if (event.position === -1 && this.areSiblings(this.dragState.path, event.path) && (this.dragState.index +1 === event.index)) {
-                return false;
-            }
-
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-
-    areSiblings(path1, path2) {
-        if (path1.length === 1 && path2.length === 1)
-            return true;
-        else
-            return path1.substring(0, path1.lastIndexOf('-')) === path2.substring(0, path2.lastIndexOf('-'));
-    }
-
-    findNode(value, path) {
-        if (path.length === 0) {
-            return null;
-        }
-        else {
-            const index = parseInt(path[0], 10);
-            const nextSearchRoot = value.children ? value.children[index] : value[index];
-
-            if (path.length === 1) {
-                return nextSearchRoot;
-            }
-            else {
-                path.shift();
-                return this.findNode(nextSearchRoot, path);
-            }
-        }
-    }
-
-    isNodeLeaf(node) {
-        return node.leaf === false ? false : !(node.children && node.children.length);
-    }
-
-    onFilterInputKeyDown(event) {
-        //enter
-        if (event.which === 13) {
-            event.preventDefault();
-        }
-    }
-
-    onFilterInputChange(event) {
-        this.filterChanged = true;
-        this.setState({filter: event.target.value});
-    }
-
-    filter() {
-        if (!this.filterChanged) {
-            return;
-        }
-
-        if (this.state.filter === '') {
-            this.filteredNodes = this.props.value;
-        }
-        else {
-            this.filteredNodes = [];
-            const searchFields = this.props.filterBy.split(',');
-            const filterText = this.state.filter.toLocaleLowerCase(this.props.filterLocale);
-            const isStrictMode = this.props.filterMode === 'strict';
-            for(let node of this.props.value) {
-                let copyNode = {...node};
-                let paramsWithoutNode = {searchFields, filterText, isStrictMode};
-                if ((isStrictMode && (this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
-                    (!isStrictMode && (this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
-                    this.filteredNodes.push(copyNode);
-                }
-            }
-        }
-
-        this.filterChanged = false;
-    }
-
-    findFilteredNodes(node, paramsWithoutNode) {
-        if (node) {
-            let matched = false;
-            if (node.children) {
-                let childNodes = [...node.children];
-                node.children = [];
-                for (let childNode of childNodes) {
-                    let copyChildNode = {...childNode};
-                    if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
-                        matched = true;
-                        node.children.push(copyChildNode);
-                    }
-                }
-            }
-
-            if (matched) {
-                return true;
-            }
-        }
-    }
-
-    isFilterMatched(node, {searchFields, filterText, isStrictMode}) {
-        let matched = false;
-        for(let field of searchFields) {
-            let fieldValue = String(ObjectUtils.resolveFieldData(node, field)).toLocaleLowerCase(this.props.filterLocale);
-            if(fieldValue.indexOf(filterText) > -1) {
-                matched = true;
-            }
-        }
-
-        if (!matched || (isStrictMode && !this.isNodeLeaf(node))) {
-            matched = this.findFilteredNodes(node, {searchFields, filterText, isStrictMode}) || matched;
-        }
-
-        return matched;
-    }
-
-    renderRootChild(node, index, last) {
-        return (
-            <UITreeNode key={node.key||node.label} node={node} index={index} last={last} path={String(index)} disabled={this.props.disabled} selectionMode={this.props.selectionMode}
-                    selectionKeys={this.props.selectionKeys} onSelectionChange={this.props.onSelectionChange} metaKeySelection={this.props.metaKeySelection}
-                    contextMenuSelectionKey={this.props.contextMenuSelectionKey} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu}
-                    propagateSelectionDown={this.props.propagateSelectionDown} propagateSelectionUp={this.props.propagateSelectionUp}
-                    onExpand={this.props.onExpand} onCollapse={this.props.onCollapse} onSelect={this.props.onSelect} onUnselect={this.props.onUnselect}
-                    expandedKeys={this.getExpandedKeys()} onToggle={this.onToggle} nodeTemplate={this.props.nodeTemplate} isNodeLeaf={this.isNodeLeaf}
-                    dragdropScope={this.props.dragdropScope} onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} onDrop={this.onDrop} onDropPoint={this.onDropPoint}  />
-        );
-    }
-
-    renderRootChildren() {
-        if (this.props.filter) {
-            this.filterChanged = true;
-            this.filter();
-        }
-
-        const value = this.getRootNode();
-        return (
-            value.map((node, index) => this.renderRootChild(node, index, (index === value.length - 1)))
-        );
-    }
-
-    renderModel() {
-        if (this.props.value) {
-            const rootNodes = this.renderRootChildren();
-            let contentClass = classNames('p-tree-container', this.props.contentClassName);
-
-            return (
-                <ul className={contentClass} role="tree" aria-label={this.props.ariaLabel} aria-labelledby={this.props.ariaLabelledBy} style={this.props.contentStyle}>
-                    {rootNodes}
-                </ul>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderLoader() {
-        if (this.props.loading) {
-            let icon = classNames('p-tree-loading-icon pi-spin', this.props.loadingIcon);
-
-            return (
-                <React.Fragment>
-                    <div className="p-tree-loading-mask p-component-overlay"></div>
-                    <div className="p-tree-loading-content">
-                        <i className={icon} />
-                    </div>
-                </React.Fragment>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderFilter() {
-        if (this.props.filter) {
-            return <div className="p-tree-filter-container">
-                        <input type="text" autoComplete="off" className="p-tree-filter p-inputtext p-component" placeholder={this.props.filterPlaceholder}
-                            onKeyDown={this.onFilterInputKeyDown} onChange={this.onFilterInputChange} disabled={this.props.disabled}/>
-                        <span className="p-tree-filter-icon pi pi-search"></span>
-                   </div>;
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const className = classNames('p-tree p-component', this.props.className, {
-            'p-tree-selectable': this.props.selectionMode,
-            'p-tree-loading': this.props.loading,
-            'p-disabled': this.props.disabled
-        });
-        const loader = this.renderLoader();
-        const content = this.renderModel();
-        const filter = this.renderFilter();
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style}>
-                {loader}
-                {filter}
-                {content}
-            </div>
-        );
-    }
-}
diff --git a/src/components/tree/UITreeNode.js b/src/components/tree/UITreeNode.js
deleted file mode 100644
index 95551899db..0000000000
--- a/src/components/tree/UITreeNode.js
+++ /dev/null
@@ -1,771 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class UITreeNode extends Component {
-
-    static defaultProps = {
-        node: null,
-        index: null,
-        last: null,
-        parent: null,
-        path: null,
-        disabled: false,
-        selectionMode: null,
-        selectionKeys: null,
-        contextMenuSelectionKey: null,
-        metaKeySelection: true,
-        expandedKeys: null,
-        propagateSelectionUp: true,
-        propagateSelectionDown: true,
-        dragdropScope: null,
-        ariaLabel: null,
-        ariaLabelledBy: null,
-        nodeTemplate: null,
-        isNodeLeaf: null,
-        onSelect: null,
-        onUnselect: null,
-        onExpand: null,
-        onCollapse: null,
-        onToggle: null,
-        onSelectionChange: null,
-        onContextMenuSelectionChange: null,
-        onPropagateUp: null,
-        onDragStart: null,
-        onDragEnd: null,
-        onDrop: null,
-        onDropPoint: null,
-        onContextMenu: null
-    }
-
-    static propTypes = {
-        node: PropTypes.object,
-        index: PropTypes.number,
-        last: PropTypes.bool,
-        parent: PropTypes.object,
-        path: PropTypes.string,
-        disabled: PropTypes.bool,
-        selectionMode: PropTypes.string,
-        selectionKeys: PropTypes.any,
-        contextMenuSelectionKey: PropTypes.any,
-        metaKeySelection: PropTypes.bool,
-        expandedKeys: PropTypes.object,
-        propagateSelectionUp: PropTypes.bool,
-        propagateSelectionDown: PropTypes.bool,
-        dragdropScope: PropTypes.string,
-        ariaLabel: PropTypes.string,
-        ariaLabelledBy: PropTypes.string,
-        nodeTemplate: PropTypes.func,
-        isNodeLeaf: PropTypes.func,
-        onSelect: PropTypes.func,
-        onUnselect: PropTypes.func,
-        onExpand: PropTypes.func,
-        onCollapse: PropTypes.func,
-        onToggle: PropTypes.func,
-        onSelectionChange: PropTypes.func,
-        onContextMenuSelectionChange: PropTypes.func,
-        onPropagateUp: PropTypes.func,
-        onDragStart: PropTypes.func,
-        onDragEnd: PropTypes.func,
-        onDrop: PropTypes.func,
-        onDropPoint: PropTypes.func,
-        onContextMenu: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.onClick = this.onClick.bind(this);
-        this.onRightClick = this.onRightClick.bind(this);
-        this.onTouchEnd = this.onTouchEnd.bind(this);
-        this.onTogglerClick = this.onTogglerClick.bind(this);
-        this.onNodeKeyDown = this.onNodeKeyDown.bind(this);
-        this.propagateUp = this.propagateUp.bind(this);
-
-        this.onDrop = this.onDrop.bind(this);
-        this.onDragOver = this.onDragOver.bind(this);
-        this.onDragEnter = this.onDragEnter.bind(this);
-        this.onDragLeave = this.onDragLeave.bind(this);
-        this.onDragStart = this.onDragStart.bind(this);
-        this.onDragEnd = this.onDragEnd.bind(this);
-        this.onDropPointDragOver = this.onDropPointDragOver.bind(this);
-        this.onDropPointDragEnter = this.onDropPointDragEnter.bind(this);
-        this.onDropPointDragLeave = this.onDropPointDragLeave.bind(this);
-    }
-
-    isLeaf() {
-        return this.props.isNodeLeaf(this.props.node);
-    }
-
-    expand(event) {
-        let expandedKeys = this.props.expandedKeys ? {...this.props.expandedKeys} : {};
-        expandedKeys[this.props.node.key] = true;
-
-        this.props.onToggle({
-            originalEvent: event,
-            value: expandedKeys
-        });
-
-        this.invokeToggleEvents(event, true);
-    }
-
-    collapse(event) {
-        let expandedKeys = {...this.props.expandedKeys};
-        delete expandedKeys[this.props.node.key];
-
-        this.props.onToggle({
-            originalEvent: event,
-            value: expandedKeys
-        });
-
-        this.invokeToggleEvents(event, false);
-    }
-
-    onTogglerClick(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        if (this.isExpanded())
-            this.collapse(event);
-        else
-            this.expand(event);
-    }
-
-    invokeToggleEvents(event, expanded) {
-        if (expanded) {
-            if (this.props.onExpand) {
-                this.props.onExpand({
-                    originalEvent: event,
-                    node: this.props.node
-                });
-            }
-        }
-        else {
-            if (this.props.onCollapse) {
-                this.props.onCollapse({
-                    originalEvent: event,
-                    node: this.props.node
-                });
-            }
-        }
-    }
-
-    isExpanded() {
-        return this.props.expandedKeys ? this.props.expandedKeys[this.props.node.key] !== undefined : false;
-    }
-
-    onNodeKeyDown(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        const nodeElement = event.target.parentElement;
-
-        switch (event.which) {
-            //down arrow
-            case 40:
-                const listElement = nodeElement.children[1];
-                if (listElement) {
-                    this.focusNode(listElement.children[0]);
-                }
-                else {
-                    const nextNodeElement = nodeElement.nextElementSibling;
-                    if (nextNodeElement) {
-                        this.focusNode(nextNodeElement);
-                    }
-                    else {
-                        let nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);
-                        if (nextSiblingAncestor) {
-                            this.focusNode(nextSiblingAncestor);
-                        }
-                    }
-                }
-
-                event.preventDefault();
-            break;
-
-            //up arrow
-            case 38:
-                if (nodeElement.previousElementSibling) {
-                    this.focusNode(this.findLastVisibleDescendant(nodeElement.previousElementSibling));
-                }
-                else {
-                    let parentNodeElement = this.getParentNodeElement(nodeElement);
-                    if (parentNodeElement) {
-                        this.focusNode(parentNodeElement);
-                    }
-                }
-
-                event.preventDefault();
-            break;
-
-            //right arrow
-            case 39:
-                if (!this.isExpanded()) {
-                    this.expand(event);
-                }
-
-                event.preventDefault();
-            break;
-
-            //left arrow
-            case 37:
-                if (this.isExpanded()) {
-                    this.collapse(event);
-                }
-
-                event.preventDefault();
-            break;
-
-            //enter
-            case 13:
-                this.onClick(event);
-                event.preventDefault();
-            break;
-
-            default:
-                //no op
-            break;
-        }
-    }
-
-    findNextSiblingOfAncestor(nodeElement) {
-        let parentNodeElement = this.getParentNodeElement(nodeElement);
-        if (parentNodeElement) {
-            if (parentNodeElement.nextElementSibling)
-                return parentNodeElement.nextElementSibling;
-            else
-                return this.findNextSiblingOfAncestor(parentNodeElement);
-        }
-        else {
-            return null;
-        }
-    }
-
-    findLastVisibleDescendant(nodeElement) {
-        const childrenListElement = nodeElement.children[1];
-        if (childrenListElement) {
-            const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
-
-            return this.findLastVisibleDescendant(lastChildElement);
-        }
-        else {
-            return nodeElement;
-        }
-    }
-
-    getParentNodeElement(nodeElement) {
-        const parentNodeElement = nodeElement.parentElement.parentElement;
-
-        return DomHandler.hasClass(parentNodeElement, 'p-treenode') ? parentNodeElement : null;
-    }
-
-    focusNode(element) {
-        element.children[0].focus();
-    }
-
-    onClick(event) {
-        if ((event.target.className && event.target.className.constructor === String && event.target.className.indexOf('p-tree-toggler') === 0) || this.props.disabled) {
-            return;
-        }
-
-        if (this.props.selectionMode && this.props.node.selectable !== false) {
-            let selectionKeys;
-
-            if (this.isCheckboxSelectionMode()) {
-                const checked = this.isChecked();
-                selectionKeys = this.props.selectionKeys ? {...this.props.selectionKeys} : {};
-
-                if (checked) {
-                    if (this.props.propagateSelectionDown)
-                        this.propagateDown(this.props.node, false, selectionKeys);
-                    else
-                        delete selectionKeys[this.props.node.key];
-
-                    if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
-                        this.props.onPropagateUp({
-                            originalEvent: event,
-                            check: false,
-                            selectionKeys: selectionKeys
-                        });
-                    }
-
-                    if (this.props.onUnselect) {
-                        this.props.onUnselect({
-                            originalEvent: event,
-                            node: this.props.node
-                        });
-                    }
-                }
-                else {
-                    if (this.props.propagateSelectionDown)
-                        this.propagateDown(this.props.node, true, selectionKeys);
-                    else
-                        selectionKeys[this.props.node.key] = {checked: true};
-
-                        if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
-                            this.props.onPropagateUp({
-                                originalEvent: event,
-                                check: true,
-                                selectionKeys: selectionKeys
-                            });
-                        }
-
-                    if (this.props.onSelect) {
-                        this.props.onSelect({
-                            originalEvent: event,
-                            node: this.props.node
-                        });
-                    }
-                }
-            }
-            else {
-                const selected = this.isSelected();
-                const metaSelection = this.nodeTouched ? false : this.props.metaKeySelection;
-
-                if (metaSelection) {
-                    let metaKey = (event.metaKey||event.ctrlKey);
-
-                    if (selected && metaKey) {
-                        if (this.isSingleSelectionMode()) {
-                            selectionKeys = null;
-                        }
-                        else {
-                            selectionKeys = {...this.props.selectionKeys};
-                            delete selectionKeys[this.props.node.key];
-                        }
-
-                        if (this.props.onUnselect) {
-                            this.props.onUnselect({
-                                originalEvent: event,
-                                node: this.props.node
-                            });
-                        }
-                    }
-                    else {
-                        if (this.isSingleSelectionMode()) {
-                            selectionKeys = this.props.node.key;
-                        }
-                        else if (this.isMultipleSelectionMode()) {
-                            selectionKeys = !metaKey ? {} : (this.props.selectionKeys ? {...this.props.selectionKeys} : {});
-                            selectionKeys[this.props.node.key] = true;
-                        }
-
-                        if (this.props.onSelect) {
-                            this.props.onSelect({
-                                originalEvent: event,
-                                node: this.props.node
-                            });
-                        }
-                    }
-                }
-                else {
-                    if (this.isSingleSelectionMode()) {
-                        if (selected) {
-                            selectionKeys = null;
-
-                            if (this.props.onUnselect) {
-                                this.props.onUnselect({
-                                    originalEvent: event,
-                                    node: this.props.node
-                                });
-                            }
-                        }
-                        else {
-                            selectionKeys = this.props.node.key;
-
-                            if (this.props.onSelect) {
-                                this.props.onSelect({
-                                    originalEvent: event,
-                                    node: this.props.node
-                                });
-                            }
-                        }
-                    }
-                    else {
-                        if (selected) {
-                            selectionKeys = {...this.props.selectionKeys};
-                            delete selectionKeys[this.props.node.key];
-
-                            if (this.props.onUnselect) {
-                                this.props.onUnselect({
-                                    originalEvent: event,
-                                    node: this.props.node
-                                });
-                            }
-                        }
-                        else {
-                            selectionKeys = this.props.selectionKeys ? {...this.props.selectionKeys} : {};
-                            selectionKeys[this.props.node.key] = true;
-
-                            if (this.props.onSelect) {
-                                this.props.onSelect({
-                                    originalEvent: event,
-                                    node: this.props.node
-                                });
-                            }
-                        }
-                    }
-                }
-            }
-
-            if (this.props.onSelectionChange) {
-                this.props.onSelectionChange({
-                    originalEvent: event,
-                    value: selectionKeys
-                })
-            }
-        }
-
-        this.nodeTouched = false;
-    }
-
-    onRightClick(event) {
-        if (this.props.disabled) {
-            return;
-        }
-
-        DomHandler.clearSelection();
-
-        if (this.props.onContextMenuSelectionChange) {
-            this.props.onContextMenuSelectionChange({
-                originalEvent: event,
-                value: this.props.node.key
-            })
-        }
-
-        if (this.props.onContextMenu) {
-            this.props.onContextMenu({
-                originalEvent: event,
-                node: this.props.node
-            });
-        }
-    }
-
-    propagateUp(event) {
-        let check = event.check;
-        let selectionKeys = event.selectionKeys;
-        let checkedChildCount = 0;
-        let childPartialSelected = false;
-
-        for(let child of this.props.node.children) {
-            if(selectionKeys[child.key] && selectionKeys[child.key].checked)
-                checkedChildCount++;
-            else if(selectionKeys[child.key] && selectionKeys[child.key].partialChecked)
-                childPartialSelected = true;
-        }
-
-        if(check && checkedChildCount === this.props.node.children.length) {
-            selectionKeys[this.props.node.key] = {checked: true, partialChecked: false};
-        }
-        else {
-            if (!check) {
-                delete selectionKeys[this.props.node.key];
-            }
-
-            if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.props.node.children.length))
-                selectionKeys[this.props.node.key] = {checked: false, partialChecked: true};
-            else
-                selectionKeys[this.props.node.key] = {checked: false, partialChecked: false};
-        }
-
-        if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
-            this.props.onPropagateUp(event);
-        }
-    }
-
-    propagateDown(node, check, selectionKeys) {
-        if(check)
-            selectionKeys[node.key] = {checked: true, partialChecked: false};
-        else
-            delete selectionKeys[node.key];
-
-        if (node.children && node.children.length) {
-            for (let i = 0; i < node.children.length; i++) {
-                this.propagateDown(node.children[i], check, selectionKeys);
-            }
-        }
-    }
-
-    isSelected() {
-        if (this.props.selectionMode && this.props.selectionKeys)
-            return this.isSingleSelectionMode() ? this.props.selectionKeys === this.props.node.key : this.props.selectionKeys[this.props.node.key] !== undefined;
-        else
-            return false;
-    }
-
-    isChecked() {
-        return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].checked: false;
-    }
-
-    isPartialChecked() {
-        return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].partialChecked: false;
-    }
-
-    isSingleSelectionMode() {
-        return this.props.selectionMode && this.props.selectionMode === 'single';
-    }
-
-    isMultipleSelectionMode() {
-        return this.props.selectionMode && this.props.selectionMode === 'multiple';
-    }
-
-    isCheckboxSelectionMode() {
-        return this.props.selectionMode && this.props.selectionMode === 'checkbox';
-    }
-
-    onTouchEnd() {
-        this.nodeTouched = true;
-    }
-
-    onDropPoint(event, position) {
-        event.preventDefault();
-
-        if (this.props.node.droppable !== false) {
-            DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
-
-            if (this.props.onDropPoint) {
-                this.props.onDropPoint({
-                    originalEvent: event,
-                    path: this.props.path,
-                    index: this.props.index,
-                    position: position
-                });
-            }
-        }
-    }
-
-    onDropPointDragOver(event) {
-        if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase()) {
-            event.dataTransfer.dropEffect = 'move';
-            event.preventDefault();
-        }
-    }
-
-    onDropPointDragEnter(event) {
-        if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase()) {
-            DomHandler.addClass(event.target, 'p-treenode-droppoint-active');
-        }
-    }
-
-    onDropPointDragLeave(event) {
-        if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase()) {
-            DomHandler.removeClass(event.target, 'p-treenode-droppoint-active');
-        }
-    }
-
-    onDrop(event) {
-        if (this.props.dragdropScope && this.props.node.droppable !== false) {
-            DomHandler.removeClass(this.contentElement, 'p-treenode-dragover');
-            event.preventDefault();
-            event.stopPropagation();
-
-            if (this.props.onDrop) {
-                this.props.onDrop({
-                    originalEvent: event,
-                    path: this.props.path
-                });
-            }
-        }
-    }
-
-    onDragOver(event) {
-        if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase() && this.props.node.droppable !== false) {
-            event.dataTransfer.dropEffect = 'move';
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-
-    onDragEnter(event) {
-        if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase() && this.props.node.droppable !== false) {
-            DomHandler.addClass(this.contentElement, 'p-treenode-dragover');
-        }
-    }
-
-    onDragLeave(event) {
-        if (event.dataTransfer.types[1] === this.props.dragdropScope.toLocaleLowerCase() && this.props.node.droppable !== false) {
-            let rect = event.currentTarget.getBoundingClientRect();
-            if (event.nativeEvent.x > rect.left + rect.width || event.nativeEvent.x < rect.left || event.nativeEvent.y >= Math.floor(rect.top + rect.height) || event.nativeEvent.y < rect.top) {
-                DomHandler.removeClass(this.contentElement, 'p-treenode-dragover');
-            }
-        }
-    }
-
-    onDragStart(event) {
-        event.dataTransfer.setData("text", this.props.dragdropScope);
-        event.dataTransfer.setData(this.props.dragdropScope, this.props.dragdropScope);
-
-        if (this.props.onDragStart) {
-            this.props.onDragStart({
-                originalEvent: event,
-                path: this.props.path,
-                index: this.props.index
-            });
-        }
-    }
-
-    onDragEnd(event) {
-        if (this.props.onDragEnd) {
-            this.props.onDragEnd({
-                originalEvent: event
-            });
-        }
-    }
-
-    renderLabel() {
-        const label = this.props.nodeTemplate ? this.props.nodeTemplate(this.props.node) : this.props.node.label;
-
-        return (
-            <span className="p-treenode-label">
-                {label}
-            </span>
-        );
-    }
-
-    renderCheckbox() {
-        if (this.isCheckboxSelectionMode() && this.props.node.selectable !== false) {
-            const checked = this.isChecked();
-            const partialChecked = this.isPartialChecked();
-            const className = classNames('p-checkbox-box', {'p-highlight': checked, 'p-disabled': this.props.disabled});
-            const icon = classNames('p-checkbox-icon p-c', {'pi pi-check': checked, 'pi pi-minus': partialChecked});
-
-            return (
-                <div className="p-checkbox p-component">
-                    <div className={className} role="checkbox" aria-checked={checked}>
-                        <span className={icon}></span>
-                    </div>
-                </div>
-            )
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderIcon(expanded) {
-        let icon = this.props.node.icon || (expanded  ? this.props.node.expandedIcon : this.props.node.collapsedIcon);
-
-        if (icon) {
-            let className = classNames('p-treenode-icon', icon);
-
-            return (
-               <span className={className}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderToggler(expanded) {
-        const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', {'pi-caret-right': !expanded, 'pi-caret-down': expanded});
-
-        return (
-            <span className="p-tree-toggler p-unselectable-text p-link" onClick={this.onTogglerClick}>
-                <span className={iconClassName}></span>
-            </span>
-        );
-    }
-
-    renderDropPoint(position) {
-        if (this.props.dragdropScope) {
-            return (
-                <li className="p-treenode-droppoint" onDrop={event => this.onDropPoint(event, position)} onDragOver={this.onDropPointDragOver}
-                        onDragEnter={this.onDropPointDragEnter} onDragLeave={this.onDropPointDragLeave}></li>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderContent() {
-        const selected = this.isSelected();
-        const checked = this.isChecked();
-        const className = classNames('p-treenode-content', this.props.node.className, {
-                'p-treenode-selectable': (this.props.selectionMode && this.props.node.selectable !== false),
-                'p-highlight': this.isCheckboxSelectionMode() ? checked : selected,
-                'p-highlight-contextmenu': (this.props.contextMenuSelectionKey && this.props.contextMenuSelectionKey === this.props.node.key),
-                'p-disabled': this.props.disabled
-            });
-        const expanded = this.isExpanded();
-        const toggler = this.renderToggler(expanded);
-        const checkbox = this.renderCheckbox();
-        const icon = this.renderIcon(expanded);
-        const label = this.renderLabel();
-        const tabIndex = this.props.disabled ? undefined : '0';
-
-        return (
-            <div ref={(el) => this.contentElement = el} className={className} style={this.props.node.style} onClick={this.onClick} onContextMenu={this.onRightClick} onTouchEnd={this.onTouchEnd} draggable={this.props.dragdropScope && this.props.node.draggable !== false && !this.props.disabled}
-                onDrop={this.onDrop} onDragOver={this.onDragOver} onDragEnter={this.onDragEnter} onDragLeave={this.onDragLeave}
-                onDragStart={this.onDragStart} onDragEnd={this.onDragEnd} tabIndex={tabIndex} onKeyDown={this.onNodeKeyDown}
-                role="treeitem" aria-posinset={this.props.index + 1} aria-expanded={this.isExpanded()} aria-selected={checked || selected}>
-                {toggler}
-                {checkbox}
-                {icon}
-                {label}
-            </div>
-        );
-    }
-
-    renderChildren() {
-        if (this.props.node.children && this.props.node.children.length && this.isExpanded()) {
-            return (
-                <ul className="p-treenode-children" role="group">
-                    {
-                        this.props.node.children.map((childNode, index) => {
-                            return (
-                                <UITreeNode key={childNode.key||childNode.label} node={childNode} parent={this.props.node} index={index} last={index === this.props.node.children.length - 1} path={this.props.path + '-' + index} disabled={this.props.disabled}
-                                    selectionMode={this.props.selectionMode} selectionKeys={this.props.selectionKeys} onSelectionChange={this.props.onSelectionChange} metaKeySelection={this.props.metaKeySelection}
-                                    propagateSelectionDown={this.props.propagateSelectionDown} propagateSelectionUp={this.props.propagateSelectionUp}
-                                    contextMenuSelectionKey={this.props.contextMenuSelectionKey} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu}
-                                    onExpand={this.props.onExpand} onCollapse={this.props.onCollapse} onSelect={this.props.onSelect} onUnselect={this.props.onUnselect}
-                                    expandedKeys={this.props.expandedKeys} onToggle={this.props.onToggle} onPropagateUp={this.propagateUp} nodeTemplate={this.props.nodeTemplate} isNodeLeaf={this.props.isNodeLeaf}
-                                    dragdropScope={this.props.dragdropScope} onDragStart={this.props.onDragStart} onDragEnd={this.props.onDragEnd} onDrop={this.props.onDrop} onDropPoint={this.props.onDropPoint} />
-                            );
-                        })
-                    }
-                </ul>
-            )
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderNode() {
-        const className = classNames('p-treenode', this.props.node.className, {'p-treenode-leaf': this.isLeaf()})
-        const content = this.renderContent();
-        const children = this.renderChildren();
-
-        return (
-            <li className={className} style={this.props.node.style}>
-                {content}
-                {children}
-            </li>
-        );
-    }
-
-    render() {
-        const node = this.renderNode();
-
-        if (this.props.dragdropScope && !this.props.disabled) {
-            const beforeDropPoint = this.renderDropPoint(-1);
-            const afterDropPoint = this.props.last ? this.renderDropPoint(1) : null;
-
-            return (
-                <React.Fragment>
-                    {beforeDropPoint}
-                    {node}
-                    {afterDropPoint}
-                </React.Fragment>
-            );
-        }
-        else {
-            return node;
-        }
-    }
-}
diff --git a/src/components/treenode/TreeNode.d.ts b/src/components/treenode/TreeNode.d.ts
deleted file mode 100644
index 7344db0782..0000000000
--- a/src/components/treenode/TreeNode.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default interface TreeNode {
-    key?: any;
-    label?: string;
-    data?: any;
-    icon?: string;
-    children: TreeNode[];
-    style?: object;
-    className?: string;
-    droppable?: boolean;
-    draggable?: boolean;
-    selectable?: boolean;
-    leaf?: boolean;
-}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTable.css b/src/components/treetable/TreeTable.css
deleted file mode 100644
index 7a84f544ba..0000000000
--- a/src/components/treetable/TreeTable.css
+++ /dev/null
@@ -1,188 +0,0 @@
-.p-treetable {
-    position: relative;
-}
-
-.p-treetable table {
-    border-collapse: collapse;
-    width: 100%;
-    table-layout: fixed;
-}
-
-.p-treetable-toggler {
-    cursor: pointer;
-    display: inline-block;
-}
-
-.p-treetable .p-treetable-thead > tr > th,
-.p-treetable .p-treetable-tbody > tr > td,
-.p-treetable .p-treetable-tfoot > tr > td {
-    padding: .25em .5em;
-}
-
-.p-treetable .p-treetable-thead > tr > th .p-column-title {
-    vertical-align: middle;
-}
-
-.p-treetable .p-sortable-column {
-    cursor: pointer;
-}
-
-.p-treetable .p-sortable-column-icon {
-    vertical-align: middle;
-}
-
-.p-treetable-auto-layout > .p-treetable-wrapper {
-    overflow-x: auto;
-}
-
-.p-treetable-auto-layout > .p-treetable-wrapper > table {
-    table-layout: auto;
-}
-
-/* Sections */
-.p-treetable-header,
-.p-treetable-footer {
-    padding: .25em .5em;
-    text-align: center;
-    font-weight: bold;
-}
-
-.p-treetable-header {
-    border-bottom: 0 none;
-}
-
-.p-treetable-footer {
-    border-top: 0 none;
-}
-
-/* Paginator */
-.p-treetable .p-paginator-top {
-    border-bottom: 0 none;
-}
-
-.p-treetable .p-paginator-bottom {
-    border-top: 0 none;
-}
-
-/* Scrollable */
-.p-treetable-scrollable-wrapper {
-    position: relative;
-}
-.p-treetable-scrollable-header,
-.p-treetable-scrollable-footer {
-    overflow: hidden;
-    border: 0 none;
-}
-
-.p-treetable-scrollable-body {
-    overflow: auto;
-    position: relative;
-}
-
-.p-treetable-scrollable-body > table > .p-treetable-tbody > tr:first-child > td {
-    border-top: 0 none;
-}
-
-.p-treetable-virtual-table {
-    position: absolute;
-}
-
-/* Frozen Columns */
-.p-treetable-frozen-view .p-treetable-scrollable-body {
-    overflow: hidden;
-}
-
-.p-treetable-frozen-view > .p-treetable-scrollable-body > table > .p-treetable-tbody > tr > td:last-child {
-    border-right: 0 none;
-}
-
-.p-treetable-unfrozen-view {
-    position: absolute;
-    top: 0px;
-}
-
-/* Filter */
-.p-column-filter {
-    width: 100%;
-}
-
-/* Resizable */
-.p-treetable-resizable > .p-treetable-tablewrapper {
-    overflow-x: auto;
-}
-
-.p-treetable-resizable .p-treetable-thead > tr > th,
-.p-treetable-resizable .p-treetable-tfoot > tr > td,
-.p-treetable-resizable .p-treetable-tbody > tr > td {
-    overflow: hidden;
-}
-
-.p-treetable-resizable .p-resizable-column {
-    background-clip: padding-box;
-    position: relative;
-}
-
-.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
-    display: none;
-}
-
-.p-treetable .p-column-resizer {
-    display: block;
-    position: absolute !important;
-    top: 0;
-    right: 0;
-    margin: 0;
-    width: .5em;
-    height: 100%;
-    padding: 0px;
-    cursor:col-resize;
-    border: 1px solid transparent;
-}
-
-.p-treetable .p-column-resizer-helper {
-    width: 1px;
-    position: absolute;
-    z-index: 10;
-    display: none;
-}
-
-/* Selection */
-.p-treetable .p-treetable-checkbox {
-    margin: 0 .5em 0 .25em;
-    vertical-align: middle;
-}
-
-/* Edit */
-.p-treetable .p-treetable-tbody > tr > td.p-cell-editing .p-component {
-    width: 100%;
-}
-
-/* Reorder */
-.p-treetable-reorder-indicator-up,
-.p-treetable-reorder-indicator-down {
-    position: absolute;
-    display: none;
-}
-
-/* Loader */
-.p-treetable-loading-overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
-    opacity: 0.1;
-    z-index: 1;
-}
-
-.p-treetable-loading-content {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    z-index: 2;
-    margin-top: -1em;
-    margin-left: -1em;
-}
-
-.p-treetable .p-treetable-loading-icon {
-    font-size: 2em;
-}
diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
deleted file mode 100644
index 7a8b07a890..0000000000
--- a/src/components/treetable/TreeTable.d.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import * as React from 'react';
-import TreeNode from "../treenode/TreeNode";
-
-interface TreeTableProps {
-    id?: string;
-    value?: TreeNode[];
-    header?: any;
-    footer?: any;
-    style?: object;
-    className?: string;
-    tableStyle?: object;
-    tableClassName?: string;
-    expandedKeys?: any;
-    paginator?: boolean;
-    paginatorPosition?: string;
-    alwaysShowPaginator?: boolean;
-    paginatorTemplate?: string;
-    paginatorLeft?: any;
-    paginatorRight?: any;
-    pageLinkSize?: number;
-    rowsPerPageOptions?: number[];
-    currentPageReportTemplate?: string;
-    first?: number;
-    rows?: number;
-    totalRecords?: number;
-    lazy?: boolean;
-    sortField?: string;
-    sortOrder?: number;
-    multiSortMeta?: any[];
-    sortMode?: string;
-    defaultSortOrder?: number;
-    selectionMode?: string;
-    selectionKeys?: any;
-    contextMenuSelectionKey?: any;
-    metaKeySelection?: boolean;
-    propagateSelectionUp?: boolean;
-    propagateSelectionDown?: boolean;
-    autoLayout?:boolean;
-    rowClassName?(rowData: any): object;
-    loading?: boolean;
-    loadingIcon?: string;
-    tabIndex?:string;
-    scrollable?: boolean;
-    scrollHeight?: string;
-    reorderableColumns?: boolean;
-    headerColumnGroup?: any;
-    footerColumnGroup?: any;
-    frozenHeaderColumnGroup?: any;
-    frozenFooterColumnGroup?: any;
-    frozenWidth?: string;
-    resizableColumns?: boolean;
-    columnResizeMode?: string;
-    emptyMessage?: string;
-    filters?: object;
-    globalFilter?: any;
-    filterMode?: string;
-    filterLocale?: string;
-    onFilter?(filters: any[]): void;
-    onExpand?(e: {originalEvent: Event, node: TreeNode}): void;
-    onCollapse?(e: {originalEvent: Event, node: TreeNode}): void;
-    onToggle?(e: {originalEvent: Event, value: any}): void;
-    onPage?(e: {first: number, rows: number}): void;
-    onSort?(e: {sortField: string, sortOrder: number, multiSortMeta: any}): void;
-    onSelect?(e: {originalEvent: Event, node: TreeNode}): void;
-    onUnselect?(e: {originalEvent: Event, node: TreeNode}): void;
-    onRowClick?(e: {originalEvent: Event, node: TreeNode}): void;
-    onSelectionChange?(e: {originalEvent: Event, value: any}): void;
-    onContextMenuSelectionChange?(e: {originalEvent: Event, value: any}): void;
-    onColumnResizeEnd?(e: {element: HTMLElement, delta: number}): void;
-    onColReorder?(e: {dragIndex: number, dropIndex: number, columns: any}): void;
-    onContextMenu?(e: {originalEvent: Event, node: any}): void;
-}
-
-export class TreeTable extends React.Component<TreeTableProps, any> {
-}
diff --git a/src/components/treetable/TreeTable.js b/src/components/treetable/TreeTable.js
deleted file mode 100644
index dda399369c..0000000000
--- a/src/components/treetable/TreeTable.js
+++ /dev/null
@@ -1,1025 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
-import DomHandler from '../utils/DomHandler';
-import { Paginator } from '../paginator/Paginator';
-import { TreeTableHeader } from './TreeTableHeader';
-import { TreeTableBody } from './TreeTableBody';
-import { TreeTableFooter } from './TreeTableFooter';
-import { TreeTableScrollableView} from './TreeTableScrollableView';
-
-export class TreeTable extends Component {
-
-    static defaultProps = {
-        id: null,
-        value: null,
-        header: null,
-        footer: null,
-        style: null,
-        className: null,
-        tableStyle: null,
-        tableClassName: null,
-        expandedKeys: null,
-        paginator: false,
-        paginatorPosition: 'bottom',
-        alwaysShowPaginator: true,
-        paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
-        paginatorLeft:null,
-        paginatorRight: null,
-        pageLinkSize: 5,
-        rowsPerPageOptions: null,
-        currentPageReportTemplate: '({currentPage} of {totalPages})',
-        first: null,
-        rows: null,
-        totalRecords: null,
-        lazy: false,
-        sortField: null,
-        sortOrder: null,
-        multiSortMeta: null,
-        sortMode: 'single',
-        defaultSortOrder: 1,
-        selectionMode: null,
-        selectionKeys: null,
-        contextMenuSelectionKey: null,
-        metaKeySelection: true,
-        propagateSelectionUp: true,
-        propagateSelectionDown: true,
-        autoLayout: false,
-        rowClassName: null,
-        loading: false,
-        loadingIcon: 'pi pi-spinner',
-        tabIndex: '0',
-        scrollable: false,
-        scrollHeight: null,
-        reorderableColumns: false,
-        headerColumnGroup: null,
-        footerColumnGroup: null,
-        frozenHeaderColumnGroup: null,
-        frozenFooterColumnGroup: null,
-        frozenWidth: null,
-        resizableColumns: false,
-        columnResizeMode: 'fit',
-        emptyMessage: "No records found",
-        filters: null,
-        globalFilter: null,
-        filterMode: 'lenient',
-        filterLocale: undefined,
-        onFilter: null,
-        onExpand: null,
-        onCollapse: null,
-        onToggle: null,
-        onPage: null,
-        onSort: null,
-        onSelect: null,
-        onUnselect: null,
-        onRowClick: null,
-        onSelectionChange: null,
-        onContextMenuSelectionChange: null,
-        onColumnResizeEnd: null,
-        onColReorder: null,
-        onContextMenu: null
-    }
-
-    static propTypes = {
-        id: PropTypes.string,
-        value: PropTypes.any,
-        header: PropTypes.any,
-        footer: PropTypes.any,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        tableStyle: PropTypes.any,
-        tableClassName: PropTypes.string,
-        expandedKeys: PropTypes.object,
-        paginator: PropTypes.bool,
-        paginatorPosition: PropTypes.string,
-        alwaysShowPaginator: PropTypes.bool,
-        paginatorTemplate: PropTypes.string,
-        paginatorLeft: PropTypes.any,
-        paginatorRight: PropTypes.any,
-        pageLinkSize: PropTypes.number,
-        rowsPerPageOptions: PropTypes.array,
-        currentPageReportTemplate: PropTypes.string,
-        first: PropTypes.number,
-        rows: PropTypes.number,
-        totalRecords: PropTypes.number,
-        lazy: PropTypes.bool,
-        sortField: PropTypes.string,
-        sortOrder: PropTypes.number,
-        multiSortMeta: PropTypes.array,
-        sortMode: PropTypes.string,
-        defaultSortOrder: PropTypes.number,
-        selectionMode: PropTypes.string,
-        selectionKeys: PropTypes.any,
-        contextMenuSelectionKey: PropTypes.any,
-        metaKeySelection: PropTypes.bool,
-        propagateSelectionUp: PropTypes.bool,
-        propagateSelectionDown: PropTypes.bool,
-        autoLayout: PropTypes.bool,
-        rowClassName: PropTypes.func,
-        loading: PropTypes.bool,
-        loadingIcon: PropTypes.string,
-        tabIndex: PropTypes.string,
-        scrollable: PropTypes.bool,
-        scrollHeight: PropTypes.string,
-        reorderableColumns: PropTypes.bool,
-        headerColumnGroup: PropTypes.any,
-        footerColumnGroup: PropTypes.any,
-        frozenHeaderColumnGroup: PropTypes.any,
-        frozenFooterColumnGroup: PropTypes.any,
-        frozenWidth: PropTypes.string,
-        resizableColumns: PropTypes.bool,
-        columnResizeMode: PropTypes.string,
-        emptyMessage: PropTypes.string,
-        filters: PropTypes.object,
-        globalFilter: PropTypes.any,
-        filterMode: PropTypes.string,
-        filterLocale: PropTypes.string,
-        onFilter: PropTypes.func,
-        onExpand: PropTypes.func,
-        onCollapse: PropTypes.func,
-        onToggle: PropTypes.func,
-        onPage: PropTypes.func,
-        onSort: PropTypes.func,
-        onSelect: PropTypes.func,
-        onUnselect: PropTypes.func,
-        onRowClick: PropTypes.func,
-        onSelectionChange: PropTypes.func,
-        onContextMenuSelectionChange: PropTypes.func,
-        onColumnResizeEnd: PropTypes.func,
-        onColReorder: PropTypes.func,
-        onContextMenu: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        let state = {};
-
-        if (!this.props.onToggle) {
-            this.state = {
-                expandedKeys: this.props.expandedKeys
-            };
-        }
-
-        if (!this.props.onPage) {
-            state.first = props.first;
-            state.rows = props.rows;
-        }
-
-        if (!this.props.onSort) {
-            state.sortField = props.sortField;
-            state.sortOrder = props.sortOrder;
-            state.multiSortMeta = props.multiSortMeta;
-        }
-
-        if (!this.props.onFilter) {
-            state.filters = props.filters;
-        }
-
-        if (Object.keys(state).length) {
-            this.state = state;
-        }
-
-        this.onToggle = this.onToggle.bind(this);
-        this.onPageChange = this.onPageChange.bind(this);
-        this.onSort = this.onSort.bind(this);
-        this.onFilter = this.onFilter.bind(this);
-        this.onColumnResizeStart = this.onColumnResizeStart.bind(this);
-        this.onColumnDragStart = this.onColumnDragStart.bind(this);
-        this.onColumnDragOver = this.onColumnDragOver.bind(this);
-        this.onColumnDragLeave = this.onColumnDragLeave.bind(this);
-        this.onColumnDrop = this.onColumnDrop.bind(this);
-    }
-
-    onToggle(event) {
-        if (this.props.onToggle) {
-            this.props.onToggle(event);
-        }
-        else {
-            this.setState({
-                expandedKeys: event.value
-            });
-        }
-    }
-
-    onPageChange(event) {
-        if (this.props.onPage)
-            this.props.onPage(event);
-        else
-            this.setState({first: event.first, rows: event.rows});
-    }
-
-    onSort(event) {
-        let sortField = event.sortField;
-        let sortOrder = (this.getSortField() === event.sortField) ? this.getSortOrder() * -1 : this.props.defaultSortOrder;
-        let multiSortMeta;
-
-        this.columnSortable = event.sortable;
-        this.columnSortFunction = event.sortFunction;
-
-        if (this.props.sortMode === 'multiple') {
-            let metaKey = event.originalEvent.metaKey || event.originalEvent.ctrlKey;
-            multiSortMeta = this.getMultiSortMeta();
-            if (!multiSortMeta || !metaKey) {
-                multiSortMeta = [];
-            }
-
-            multiSortMeta = this.addSortMeta({field: sortField, order: sortOrder}, multiSortMeta);
-        }
-
-        if (this.props.onSort) {
-            this.props.onSort({
-                sortField: sortField,
-                sortOrder: sortOrder,
-                multiSortMeta: multiSortMeta
-            });
-        }
-        else {
-            this.setState({
-                sortField: sortField,
-                sortOrder: sortOrder,
-                first: 0,
-                multiSortMeta: multiSortMeta
-            });
-        }
-    }
-
-    addSortMeta(meta, multiSortMeta) {
-        let index = -1;
-        for (let i = 0; i < multiSortMeta.length; i++) {
-            if (multiSortMeta[i].field === meta.field) {
-                index = i;
-                break;
-            }
-        }
-
-        let value = [...multiSortMeta];
-        if(index >= 0)
-            value[index] = meta;
-        else
-            value.push(meta);
-
-        return value;
-    }
-
-    sortSingle(data) {
-        return this.sortNodes(data);
-    }
-
-    sortNodes(data) {
-        let value = [...data];
-
-        if(this.columnSortable && this.columnSortable === 'custom' && this.columnSortFunction) {
-            value = this.columnSortFunction({
-                field: this.getSortField(),
-                order: this.getSortOrder()
-            });
-        }
-        else {
-            value.sort((node1, node2) => {
-                const sortField = this.getSortField();
-                const value1 = ObjectUtils.resolveFieldData(node1.data, sortField);
-                const value2 = ObjectUtils.resolveFieldData(node2.data, sortField);
-                let result = null;
-
-                if (value1 == null && value2 != null)
-                    result = -1;
-                else if (value1 != null && value2 == null)
-                    result = 1;
-                else if (value1 == null && value2 == null)
-                    result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string')
-                    result = value1.localeCompare(value2, undefined, { numeric: true });
-                else
-                    result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
-
-                return (this.getSortOrder() * result);
-            });
-
-            for (let i = 0; i < value.length; i++) {
-                if (value[i].children && value[i].children.length) {
-                    value[i].children = this.sortNodes(value[i].children);
-                }
-            }
-        }
-
-        return value;
-    }
-
-    sortMultiple(data) {
-        let multiSortMeta = this.getMultiSortMeta();
-
-        if (multiSortMeta)
-            return this.sortMultipleNodes(data, multiSortMeta);
-        else
-            return data;
-    }
-
-    sortMultipleNodes(data, multiSortMeta) {
-        let value = [...data];
-        value.sort((node1, node2) => {
-            return this.multisortField(node1, node2, multiSortMeta, 0);
-        });
-
-        for (let i = 0; i < value.length; i++) {
-            if (value[i].children && value[i].children.length) {
-                value[i].children = this.sortMultipleNodes(value[i].children, multiSortMeta);
-            }
-        }
-
-        return value;
-    }
-
-    multisortField(node1, node2, multiSortMeta, index) {
-        const value1 = ObjectUtils.resolveFieldData(node1.data, multiSortMeta[index].field);
-        const value2 = ObjectUtils.resolveFieldData(node2.data, multiSortMeta[index].field);
-        let result = null;
-
-        if (value1 == null && value2 != null)
-            result = -1;
-        else if (value1 != null && value2 == null)
-            result = 1;
-        else if (value1 == null && value2 == null)
-            result = 0;
-        else {
-            if (value1 === value2)  {
-                return (multiSortMeta.length - 1) > (index) ? (this.multisortField(node1, node2, multiSortMeta, index + 1)) : 0;
-            }
-            else {
-                if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String))
-                    return (multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true }));
-                else
-                    result = (value1 < value2) ? -1 : 1;
-            }
-        }
-
-        return (multiSortMeta[index].order * result);
-    }
-
-    filter(value, field, mode) {
-        this.onFilter({
-            value: value,
-            field: field,
-            matchMode: mode
-        });
-    }
-
-    onFilter(event) {
-        let currentFilters = this.getFilters();
-        let newFilters = currentFilters ? {...currentFilters} : {};
-
-        if(!this.isFilterBlank(event.value))
-            newFilters[event.field] = {value: event.value, matchMode: event.matchMode};
-        else if(newFilters[event.field])
-            delete newFilters[event.field];
-
-        if (this.props.onFilter) {
-            this.props.onFilter({
-                filters: newFilters
-            });
-        }
-        else {
-            this.setState({
-                first: 0,
-                filters: newFilters
-            });
-        }
-    }
-
-    hasFilter() {
-        let filters = this.getFilters();
-
-        return filters && Object.keys(filters).length > 0;
-    }
-
-    isFilterBlank(filter) {
-        if(filter !== null && filter !== undefined) {
-            if((typeof filter === 'string' && filter.trim().length === 0) || (filter instanceof Array && filter.length === 0))
-                return true;
-            else
-                return false;
-        }
-        return true;
-    }
-
-    onColumnResizeStart(event) {
-        let containerLeft = DomHandler.getOffset(this.container).left;
-        this.resizeColumn = event.columnEl;
-        this.resizeColumnProps = event.column;
-        this.columnResizing = true;
-        this.lastResizerHelperX = (event.originalEvent.pageX - containerLeft + this.container.scrollLeft);
-
-        this.bindColumnResizeEvents();
-    }
-
-    onColumnResize(event) {
-        let containerLeft = DomHandler.getOffset(this.container).left;
-        DomHandler.addClass(this.container, 'p-unselectable-text');
-        this.resizerHelper.style.height = this.container.offsetHeight + 'px';
-        this.resizerHelper.style.top = 0 + 'px';
-        this.resizerHelper.style.left = (event.pageX - containerLeft + this.container.scrollLeft) + 'px';
-
-        this.resizerHelper.style.display = 'block';
-    }
-
-    onColumnResizeEnd(event) {
-        let delta = this.resizerHelper.offsetLeft - this.lastResizerHelperX;
-        let columnWidth = this.resizeColumn.offsetWidth;
-        let newColumnWidth = columnWidth + delta;
-        let minWidth = this.resizeColumn.style.minWidth||15;
-
-        if(columnWidth + delta > parseInt(minWidth, 10)) {
-            if(this.props.columnResizeMode === 'fit') {
-                let nextColumn = this.resizeColumn.nextElementSibling;
-                let nextColumnWidth = nextColumn.offsetWidth - delta;
-
-                if(newColumnWidth > 15 && nextColumnWidth > 15) {
-                    if(this.props.scrollable) {
-                        let scrollableView = this.findParentScrollableView(this.resizeColumn);
-                        let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-body-table');
-                        let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table');
-                        let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table');
-                        let resizeColumnIndex = DomHandler.index(this.resizeColumn);
-
-                        this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
-                        this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
-                        this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
-                    }
-                    else {
-                        this.resizeColumn.style.width = newColumnWidth + 'px';
-                        if(nextColumn) {
-                            nextColumn.style.width = nextColumnWidth + 'px';
-                        }
-                    }
-                }
-            }
-            else if(this.props.columnResizeMode === 'expand') {
-                if (this.props.scrollable) {
-                    let scrollableView = this.findParentScrollableView(this.resizeColumn);
-                    let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-body-table');
-                    let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-header-table');
-                    let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-treetable-scrollable-footer-table');
-                    scrollableBodyTable.style.width = scrollableBodyTable.offsetWidth + delta + 'px';
-                    scrollableHeaderTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
-                    if(scrollableFooterTable) {
-                        scrollableFooterTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
-                    }
-                    let resizeColumnIndex = DomHandler.index(this.resizeColumn);
-
-                    this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
-                    this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
-                    this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
-                }
-                else {
-                    this.table.style.width = this.table.offsetWidth + delta + 'px';
-                    this.resizeColumn.style.width = newColumnWidth + 'px';
-                }
-            }
-
-            if(this.props.onColumnResizeEnd) {
-                this.props.onColumnResizeEnd({
-                    element: this.resizeColumn,
-                    column: this.resizeColumnProps,
-                    delta: delta
-                });
-            }
-        }
-
-        this.resizerHelper.style.display = 'none';
-        this.resizeColumn = null;
-        this.resizeColumnProps = null;
-        DomHandler.removeClass(this.container, 'p-unselectable-text');
-
-        this.unbindColumnResizeEvents();
-    }
-
-    findParentScrollableView(column) {
-        if (column) {
-            let parent = column.parentElement;
-            while (parent && !DomHandler.hasClass(parent, 'p-treetable-scrollable-view')) {
-                parent = parent.parentElement;
-            }
-
-            return parent;
-        }
-        else {
-            return null;
-        }
-    }
-
-    resizeColGroup(table, resizeColumnIndex, newColumnWidth, nextColumnWidth) {
-        if(table) {
-            let colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
-
-            if(colGroup) {
-                let col = colGroup.children[resizeColumnIndex];
-                let nextCol = col.nextElementSibling;
-                col.style.width = newColumnWidth + 'px';
-
-                if (nextCol && nextColumnWidth) {
-                    nextCol.style.width = nextColumnWidth + 'px';
-                }
-            }
-            else {
-                throw new Error("Scrollable tables require a colgroup to support resizable columns");
-            }
-        }
-    }
-
-    bindColumnResizeEvents() {
-        this.documentColumnResizeListener = document.addEventListener('mousemove', (event) => {
-            if(this.columnResizing) {
-                this.onColumnResize(event);
-            }
-        });
-
-        this.documentColumnResizeEndListener = document.addEventListener('mouseup', (event) => {
-            if(this.columnResizing) {
-                this.columnResizing = false;
-                this.onColumnResizeEnd(event);
-            }
-        });
-    }
-
-    unbindColumnResizeEvents() {
-        document.removeEventListener('document', this.documentColumnResizeListener);
-        document.removeEventListener('document', this.documentColumnResizeEndListener);
-    }
-
-    onColumnDragStart(event) {
-        if(this.columnResizing) {
-            event.preventDefault();
-            return;
-        }
-
-        this.iconWidth = DomHandler.getHiddenElementOuterWidth(this.reorderIndicatorUp);
-        this.iconHeight = DomHandler.getHiddenElementOuterHeight(this.reorderIndicatorUp);
-
-        this.draggedColumn = this.findParentHeader(event.target);
-        event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
-    }
-
-    onColumnDragOver(event) {
-        let dropHeader = this.findParentHeader(event.target);
-        if(this.props.reorderableColumns && this.draggedColumn && dropHeader) {
-            event.preventDefault();
-            let containerOffset = DomHandler.getOffset(this.container);
-            let dropHeaderOffset = DomHandler.getOffset(dropHeader);
-
-            if(this.draggedColumn !== dropHeader) {
-                let targetLeft =  dropHeaderOffset.left - containerOffset.left;
-                //let targetTop =  containerOffset.top - dropHeaderOffset.top;
-                let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
-
-                this.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.iconHeight - 1) + 'px';
-                this.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
-
-                if(event.pageX > columnCenter) {
-                    this.reorderIndicatorUp.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.iconWidth / 2)) + 'px';
-                    this.reorderIndicatorDown.style.left = (targetLeft + dropHeader.offsetWidth - Math.ceil(this.iconWidth / 2))+ 'px';
-                    this.dropPosition = 1;
-                }
-                else {
-                    this.reorderIndicatorUp.style.left = (targetLeft - Math.ceil(this.iconWidth / 2)) + 'px';
-                    this.reorderIndicatorDown.style.left = (targetLeft - Math.ceil(this.iconWidth / 2))+ 'px';
-                    this.dropPosition = -1;
-                }
-
-                this.reorderIndicatorUp.style.display = 'block';
-                this.reorderIndicatorDown.style.display = 'block';
-            }
-        }
-    }
-
-    onColumnDragLeave(event) {
-        if(this.props.reorderableColumns && this.draggedColumn) {
-            event.preventDefault();
-            this.reorderIndicatorUp.style.display = 'none';
-            this.reorderIndicatorDown.style.display = 'none';
-        }
-    }
-
-    onColumnDrop(event) {
-        event.preventDefault();
-        if(this.draggedColumn) {
-            let dragIndex = DomHandler.index(this.draggedColumn);
-            let dropIndex = DomHandler.index(this.findParentHeader(event.target));
-            let allowDrop = (dragIndex !== dropIndex);
-            if(allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
-                allowDrop = false;
-            }
-
-            if(allowDrop) {
-                let columns = this.state.columnOrder ? this.getColumns() : React.Children.toArray(this.props.children);
-                ObjectUtils.reorderArray(columns, dragIndex, dropIndex);
-                let columnOrder = [];
-                for(let column of columns) {
-                    columnOrder.push(column.props.columnKey||column.props.field);
-                }
-
-                this.setState({
-                    columnOrder: columnOrder
-                });
-
-                if (this.props.onColReorder) {
-                    this.props.onColReorder({
-                        dragIndex: dragIndex,
-                        dropIndex: dropIndex,
-                        columns: columns
-                    });
-                }
-            }
-
-            this.reorderIndicatorUp.style.display = 'none';
-            this.reorderIndicatorDown.style.display = 'none';
-            this.draggedColumn.draggable = false;
-            this.draggedColumn = null;
-            this.dropPosition = null;
-        }
-    }
-
-    findParentHeader(element) {
-        if(element.nodeName === 'TH') {
-            return element;
-        }
-        else {
-            let parent = element.parentElement;
-            while(parent.nodeName !== 'TH') {
-                parent = parent.parentElement;
-                if(!parent) break;
-            }
-            return parent;
-        }
-    }
-
-    getExpandedKeys() {
-        return this.props.onToggle ? this.props.expandedKeys : this.state.expandedKeys;
-    }
-
-    getFirst() {
-        return this.props.onPage ? this.props.first : this.state.first;
-    }
-
-    getRows() {
-        return this.props.onPage ? this.props.rows : this.state.rows;
-    }
-
-    getSortField() {
-        return this.props.onSort ? this.props.sortField : this.state.sortField;
-    }
-
-    getSortOrder() {
-        return this.props.onSort ? this.props.sortOrder : this.state.sortOrder;
-    }
-
-    getMultiSortMeta() {
-        return this.props.onSort ? this.props.multiSortMeta : this.state.multiSortMeta;
-    }
-
-    getFilters() {
-        return this.props.onFilter ? this.props.filters : this.state.filters;
-    }
-
-    findColumnByKey(columns, key) {
-        if(columns && columns.length) {
-            for(let i = 0; i < columns.length; i++) {
-                let child = columns[i];
-                if(child.props.columnKey === key || child.props.field === key) {
-                    return child;
-                }
-            }
-        }
-
-        return null;
-    }
-
-    getColumns() {
-        let columns = React.Children.toArray(this.props.children);
-
-        if(this.props.reorderableColumns && this.state.columnOrder) {
-            let orderedColumns = [];
-            for(let i = 0; i < this.state.columnOrder.length; i++) {
-                orderedColumns.push(this.findColumnByKey(columns, this.state.columnOrder[i]));
-            }
-
-            return orderedColumns;
-        }
-        else {
-            return columns;
-        }
-    }
-
-    getTotalRecords(data) {
-        return this.props.lazy ? this.props.totalRecords : data ? data.length : 0;
-    }
-
-    isSingleSelectionMode() {
-        return this.props.selectionMode && this.props.selectionMode === 'single';
-    }
-
-    isMultipleSelectionMode() {
-        return this.props.selectionMode && this.props.selectionMode === 'multiple';
-    }
-
-    isRowSelectionMode() {
-        return this.isSingleSelectionMode() || this.isMultipleSelectionMode();
-    }
-
-    getFrozenColumns(columns) {
-        let frozenColumns = null;
-
-        for(let col of columns) {
-            if(col.props.frozen) {
-                frozenColumns = frozenColumns||[];
-                frozenColumns.push(col);
-            }
-        }
-
-        return frozenColumns;
-    }
-
-    getScrollableColumns(columns) {
-        let scrollableColumns = null;
-
-        for(let col of columns) {
-            if(!col.props.frozen) {
-                scrollableColumns = scrollableColumns||[];
-                scrollableColumns.push(col);
-            }
-        }
-
-        return scrollableColumns;
-    }
-
-    filterLocal(value) {
-        let filteredNodes = [];
-        let filters = this.getFilters();
-        let columns = React.Children.toArray(this.props.children);
-        const isStrictMode = this.props.filterMode === 'strict';
-        let isValueChanged = false;
-
-        for (let node of value) {
-            let copyNode = {...node};
-            let localMatch = true;
-            let globalMatch = false;
-
-            for (let j = 0; j < columns.length; j++) {
-                let col = columns[j];
-                let filterMeta = filters ? filters[col.props.field] : null;
-                let filterField = col.props.field;
-                let filterValue, filterConstraint, paramsWithoutNode;
-
-                //local
-                if (filterMeta) {
-                    let filterMatchMode = filterMeta.matchMode || col.props.filterMatchMode;
-                    filterValue = filterMeta.value;
-                    filterConstraint = filterMatchMode === 'custom' ? col.props.filterFunction : FilterUtils[filterMatchMode];
-                    paramsWithoutNode = {filterField, filterValue, filterConstraint, isStrictMode};
-                    if ((isStrictMode && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
-                        (!isStrictMode && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
-                            localMatch = false;
-                    }
-
-                    if (!localMatch) {
-                        break;
-                    }
-                }
-
-                //global
-                if (this.props.globalFilter && !globalMatch) {
-                    let copyNodeForGlobal = {...copyNode};
-                    filterValue = this.props.globalFilter;
-                    filterConstraint = FilterUtils['contains'];
-                    paramsWithoutNode = {filterField, filterValue, filterConstraint, isStrictMode};
-                    if ((isStrictMode && (this.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, paramsWithoutNode))) ||
-                        (!isStrictMode && (this.isFilterMatched(copyNodeForGlobal, paramsWithoutNode) || this.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode)))) {
-                            globalMatch = true;
-                            copyNode = copyNodeForGlobal;
-                    }
-                }
-            }
-
-            let matches = localMatch;
-            if (this.props.globalFilter) {
-                matches = localMatch && globalMatch;
-            }
-
-            if (matches) {
-                filteredNodes.push(copyNode);
-            }
-
-            isValueChanged = isValueChanged || !localMatch || globalMatch;
-        }
-
-        return isValueChanged ? filteredNodes : value;
-    }
-
-    findFilteredNodes(node, paramsWithoutNode) {
-        if (node) {
-            let matched = false;
-            if (node.children) {
-                let childNodes = [...node.children];
-                node.children = [];
-                for (let childNode of childNodes) {
-                    let copyChildNode = {...childNode};
-                    if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
-                        matched = true;
-                        node.children.push(copyChildNode);
-                    }
-                }
-            }
-
-            if (matched) {
-                return true;
-            }
-        }
-    }
-
-    isFilterMatched(node, {filterField, filterValue, filterConstraint, isStrictMode}) {
-        let matched = false;
-        let dataFieldValue = ObjectUtils.resolveFieldData(node.data, filterField);
-        if (filterConstraint(dataFieldValue, filterValue, this.props.filterLocale)) {
-            matched = true;
-        }
-
-        if (!matched || (isStrictMode && !this.isNodeLeaf(node))) {
-            matched = this.findFilteredNodes(node, {filterField, filterValue, filterConstraint, isStrictMode}) || matched;
-        }
-
-        return matched;
-    }
-
-    isNodeLeaf(node) {
-        return node.leaf === false ? false : !(node.children && node.children.length);
-    }
-
-    processValue() {
-        let data = this.props.value;
-
-        if (!this.props.lazy) {
-            if(data && data.length) {
-                if(this.getSortField() || this.getMultiSortMeta()) {
-                    if(this.props.sortMode === 'single')
-                        data = this.sortSingle(data);
-                    else if(this.props.sortMode === 'multiple')
-                        data = this.sortMultiple(data);
-                }
-
-                let localFilters = this.getFilters();
-                if (localFilters || this.props.globalFilter) {
-                    data = this.filterLocal(data, localFilters);
-                }
-            }
-        }
-
-        return data;
-    }
-
-    createTableHeader(columns, columnGroup) {
-        return (
-            <TreeTableHeader columns={columns} columnGroup={columnGroup} tabIndex={this.props.tabIndex}
-                        onSort={this.onSort} sortField={this.getSortField()} sortOrder={this.getSortOrder()} multiSortMeta={this.getMultiSortMeta()}
-                        resizableColumns={this.props.resizableColumns} onResizeStart={this.onColumnResizeStart}
-                        reorderableColumns={this.props.reorderableColumns} onDragStart={this.onColumnDragStart}
-                        onDragOver={this.onColumnDragOver} onDragLeave={this.onColumnDragLeave} onDrop={this.onColumnDrop}
-                        onFilter={this.onFilter} filters={this.getFilters()}/>
-        );
-    }
-
-    createTableFooter(columns, columnGroup) {
-        return (
-            <TreeTableFooter columns={columns} columnGroup={columnGroup} />
-        );
-    }
-
-    createTableBody(value, columns) {
-        return (
-            <TreeTableBody value={value} columns={columns} expandedKeys={this.getExpandedKeys()}
-                        onToggle={this.onToggle} onExpand={this.props.onExpand} onCollapse={this.props.onCollapse}
-                        paginator={this.props.paginator} first={this.getFirst()} rows={this.getRows()}
-                        selectionMode={this.props.selectionMode} selectionKeys={this.props.selectionKeys} onSelectionChange={this.props.onSelectionChange}
-                        metaKeySelection={this.props.metaKeySelection} onRowClick={this.props.onRowClick} onSelect={this.props.onSelect} onUnselect={this.props.onUnselect}
-                        propagateSelectionUp={this.props.propagateSelectionUp} propagateSelectionDown={this.props.propagateSelectionDown}
-                        lazy={this.props.lazy} rowClassName={this.props.rowClassName} emptyMessage={this.props.emptyMessage} loading={this.props.loading}
-                        contextMenuSelectionKey={this.props.contextMenuSelectionKey} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu}/>
-        );
-    }
-
-    createPaginator(position, totalRecords) {
-        const className = 'p-paginator-' + position;
-
-        return (
-            <Paginator first={this.getFirst()} rows={this.getRows()} pageLinkSize={this.props.pageLinkSize} className={className}
-                    onPageChange={this.onPageChange} template={this.props.paginatorTemplate}
-                    totalRecords={totalRecords} rowsPerPageOptions={this.props.rowsPerPageOptions} currentPageReportTemplate={this.props.currentPageReportTemplate}
-                    leftContent={this.props.paginatorLeft} rightContent={this.props.paginatorRight} alwaysShow={this.props.alwaysShowPaginator} />
-        )
-    }
-
-    createScrollableView(value, columns, frozen, headerColumnGroup, footerColumnGroup) {
-        const header = this.createTableHeader(columns, headerColumnGroup);
-        const footer = this.createTableFooter(columns, footerColumnGroup);
-        const body = this.createTableBody(value, columns);
-
-        return (
-            <TreeTableScrollableView columns={columns} header={header} body={body} footer={footer}
-                scrollHeight={this.props.scrollHeight} frozen={frozen} frozenWidth={this.props.frozenWidth} />
-        );
-    }
-
-    renderScrollableTable(value) {
-        const columns = this.getColumns();
-        let frozenColumns = this.getFrozenColumns(columns);
-        let scrollableColumns = frozenColumns ? this.getScrollableColumns(columns) : columns;
-        let frozenView, scrollableView;
-        if (frozenColumns) {
-            frozenView = this.createScrollableView(value, frozenColumns, true, this.props.frozenHeaderColumnGroup, this.props.frozenFooterColumnGroup);
-        }
-
-        scrollableView = this.createScrollableView(value, scrollableColumns, false, this.props.headerColumnGroup, this.props.footerColumnGroup);
-
-        return (
-            <div className="p-treetable-scrollable-wrapper">
-                {frozenView}
-                {scrollableView}
-            </div>
-        );
-    }
-
-    renderRegularTable(value) {
-        const columns = this.getColumns();
-        const header = this.createTableHeader(columns, this.props.headerColumnGroup);
-        const footer = this.createTableFooter(columns, this.props.footerColumnGroup);
-        const body = this.createTableBody(value, columns);
-
-        return (
-            <div className="p-treetable-tablewrapper">
-                <table style={this.props.tableStyle} className={this.props.tableClassName}  ref={el => this.table = el}>
-                    {header}
-                    {footer}
-                    {body}
-                </table>
-            </div>
-        );
-    }
-
-    renderTable(value) {
-        if (this.props.scrollable)
-            return this.renderScrollableTable(value);
-        else
-            return this.renderRegularTable(value);
-    }
-
-    renderLoader() {
-        if (this.props.loading) {
-            const iconClassName = classNames('p-treetable-loading-icon pi-spin', this.props.loadingIcon);
-
-            return (
-                <div className="p-treetable-loading">
-                    <div className="p-treetable-loading-overlay p-component-overlay"></div>
-                    <div className="p-treetable-loading-content">
-                        <i className={iconClassName}></i>
-                    </div>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const value = this.processValue();
-        const className = classNames('p-treetable p-component', {
-            'p-treetable-hoverable-rows': this.isRowSelectionMode(),
-            'p-treetable-resizable': this.props.resizableColumns,
-            'p-treetable-resizable-fit': (this.props.resizableColumns && this.props.columnResizeMode === 'fit'),
-            'p-treetable-auto-layout': this.props.autoLayout
-        });
-        const table = this.renderTable(value);
-        const totalRecords = this.getTotalRecords(value);
-        const headerFacet = this.props.header && <div className="p-treetable-header">{this.props.header}</div>;
-        const footerFacet = this.props.footer && <div className="p-treetable-footer">{this.props.footer}</div>;
-        const paginatorTop = this.props.paginator && this.props.paginatorPosition !== 'bottom' && this.createPaginator('top', totalRecords);
-        const paginatorBottom = this.props.paginator && this.props.paginatorPosition !== 'top' && this.createPaginator('bottom', totalRecords);
-        const loader = this.renderLoader();
-        const resizeHelper = this.props.resizableColumns && <div ref={(el) => {this.resizerHelper = el;}} className="p-column-resizer-helper" style={{display:'none'}}></div>;
-        const reorderIndicatorUp = this.props.reorderableColumns && <span ref={el => this.reorderIndicatorUp = el} className="pi pi-arrow-down p-datatable-reorder-indicator-up" style={{position: 'absolute', display: 'none'}} />
-        const reorderIndicatorDown = this.props.reorderableColumns && <span ref={el => this.reorderIndicatorDown = el} className="pi pi-arrow-up p-datatable-reorder-indicator-down" style={{position: 'absolute', display: 'none'}} />;
-
-        return (
-            <div id={this.props.id} className={className} style={this.props.style} ref={el => this.container = el}>
-                {loader}
-                {headerFacet}
-                {paginatorTop}
-                {table}
-                {paginatorBottom}
-                {footerFacet}
-                {resizeHelper}
-                {reorderIndicatorUp}
-                {reorderIndicatorDown}
-            </div>
-        );
-    }
-}
diff --git a/src/components/treetable/TreeTableBody.js b/src/components/treetable/TreeTableBody.js
deleted file mode 100644
index a38d3be5f8..0000000000
--- a/src/components/treetable/TreeTableBody.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { TreeTableRow } from './TreeTableRow'; 
-
-export class TreeTableBody extends Component {
-
-    static defaultProps = {
-        value: null,
-        columns: null,
-        expandedKeys: null,
-        contextMenuSelectionKey: null,
-        paginator: false,
-        first: null,
-        rows: null,
-        selectionMode: null,
-        selectionKeys: null,
-        metaKeySelection: true,
-        propagateSelectionUp: true,
-        propagateSelectionDown: true,
-        lazy: false,
-        rowClassName: null,
-        emptyMessage: "No records found",
-        loading: false,
-        onExpand: null,
-        onCollapse: null,
-        onToggle: null,
-        onRowClick: null,
-        onSelect: null,
-        onUnselect: null,
-        onSelectionChange: null,
-        onContextMenuSelectionChange: null,
-        onContextMenu: null
-    }
-
-    static propTypes = {
-        value: PropTypes.array,
-        columns: PropTypes.array,
-        expandedKeys: PropTypes.object,
-        contextMenuSelectionKey: PropTypes.any,
-        paginator: PropTypes.bool,
-        first: PropTypes.number,
-        rows: PropTypes.number,
-        selectionMode: PropTypes.string,
-        selectionKeys: PropTypes.any,
-        metaKeySelection: PropTypes.bool,
-        propagateSelectionUp: PropTypes.bool,
-        propagateSelectionDown: PropTypes.bool,
-        lazy: PropTypes.bool,
-        rowClassName: PropTypes.func,
-        emptyMessage: PropTypes.string,
-        loading: PropTypes.bool,
-        onExpand: PropTypes.func,
-        onCollapse: PropTypes.func,
-        onToggle: PropTypes.func,
-        onRowClick: PropTypes.func,
-        onSelect: PropTypes.func,
-        onUnselect: PropTypes.func,
-        onSelectionChange: PropTypes.func,
-        onContextMenuSelectionChange: PropTypes.func,
-        onContextMenu: PropTypes.func
-    }
-
-    createRow(node) {
-        return (
-            <TreeTableRow key={node.key||JSON.stringify(node.data)} level={0}
-                            node={node} columns={this.props.columns} expandedKeys={this.props.expandedKeys} 
-                            onToggle={this.props.onToggle} onExpand={this.props.onExpand} onCollapse={this.props.onCollapse}
-                            selectionMode={this.props.selectionMode} selectionKeys={this.props.selectionKeys} onSelectionChange={this.props.onSelectionChange}
-                            metaKeySelection={this.props.metaKeySelection} onRowClick={this.props.onRowClick} onSelect={this.props.onSelect} onUnselect={this.props.onUnselect}
-                            propagateSelectionUp={this.props.propagateSelectionUp} propagateSelectionDown={this.props.propagateSelectionDown}
-                            rowClassName={this.props.rowClassName}
-                            contextMenuSelectionKey={this.props.contextMenuSelectionKey} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu} />
-        );
-    }
-
-    renderRows() {
-        if (this.props.paginator && !this.props.lazy) {
-            let rpp = this.props.rows||0;
-            let startIndex = this.props.first||0;
-            let endIndex = (startIndex + rpp);
-            let rows = [];
-
-            for (let i = startIndex; i < endIndex; i++) {
-                let rowData = this.props.value[i];
-                if (rowData)
-                    rows.push(this.createRow(this.props.value[i]));
-                else
-                    break;
-            }
-
-            return rows;
-        }
-        else {
-            return this.props.value.map(node => this.createRow(node));
-        } 
-    }
-
-    renderEmptyMessage() {
-        if (this.props.loading) {
-            return null;
-        }
-        else {
-            const colSpan = this.props.columns ? this.props.columns.length : null;
-            return (
-                <tr>
-                    <td className="p-treetable-emptymessage" colSpan={colSpan}>{this.props.emptyMessage}</td>
-                </tr>
-            );
-        }
-    }
-
-    render() {
-        const content = (this.props.value && this.props.value.length) ? this.renderRows() : this.renderEmptyMessage();
-
-        return (
-            <tbody className="p-treetable-tbody">
-                {content}
-            </tbody>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableBodyCell.js b/src/components/treetable/TreeTableBodyCell.js
deleted file mode 100644
index da01472cf6..0000000000
--- a/src/components/treetable/TreeTableBodyCell.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import React, { Component } from 'react';
-import classNames from 'classnames';
-import ObjectUtils from '../utils/ObjectUtils';
-import DomHandler from '../utils/DomHandler';
-
-export class TreeTableBodyCell extends Component {
-    
-    constructor(props) {
-        super(props);
-
-        if (this.props.editor) {
-            this.state = {};
-        }
-
-        this.onClick = this.onClick.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-        this.onEditorFocus = this.onEditorFocus.bind(this);
-    }
-
-    onClick() {
-        if (this.props.editor) {
-            this.setState({
-                editing: true
-            });
-            
-            if(this.documentEditListener)
-                this.cellClick = true;
-            else
-                this.bindDocumentEditListener();
-        }
-    }
-
-    onKeyDown(event) {
-        if(event.which === 13 || event.which === 9) {
-            this.switchCellToViewMode();
-        }
-    }
-
-    bindDocumentEditListener() {
-        if(!this.documentEditListener) {
-            this.documentEditListener = (event) => {
-                if(!this.cellClick) {
-                    this.switchCellToViewMode();
-                }
-                
-                this.cellClick = false;
-            };
-            
-            document.addEventListener('click', this.documentEditListener);
-        }
-    }
-
-    unbindDocumentEditListener() {
-        if(this.documentEditListener) {
-            document.removeEventListener('click', this.documentEditListener);
-            this.documentEditListener = null;
-        }
-    }
-
-    closeCell() {
-        this.setState({
-            editing: false
-        });
-        this.unbindDocumentEditListener();
-    }
-
-    onEditorFocus(event) {
-        this.onClick(event);
-    }
-
-    switchCellToViewMode() {
-        if (this.props.editorValidator) {
-            let valid = this.props.editorValidator(this.props);
-            if(valid) {
-                this.closeCell();
-            }
-        }
-        else {
-            this.closeCell();
-        }
-    }
-
-    componentDidUpdate() {
-        if (this.container && this.props.editor) {
-            if (this.state && this.state.editing) {
-                let focusable = DomHandler.findSingle(this.container, 'input');
-                if(focusable) {
-                    focusable.setAttribute('data-isCellEditing', true);
-                    focusable.focus();
-                }
-                
-                this.keyHelper.tabIndex = -1;
-            }
-            else {
-                setTimeout(() => {
-                    if (this.keyHelper) {
-                        this.keyHelper.removeAttribute('tabindex');
-                    }
-                }, 50);
-            }    
-        }
-    }
-
-    render() {
-        const className = classNames(this.props.bodyClassName||this.props.className, {
-            'p-editable-column': this.props.editor,
-            'p-cell-editing': this.props.editor ? this.state.editing : false
-        });
-        const style = this.props.bodyStyle || this.props.style
-        let content;
-
-        if(this.state && this.state.editing) {
-            if(this.props.editor)
-                content = this.props.editor(this.props);
-            else
-                throw new Error("Editor is not found on column.");
-        }
-        else {
-            if (this.props.body)
-                content = this.props.body(this.props.node, this.props.column);
-            else
-                content = ObjectUtils.resolveFieldData(this.props.node.data, this.props.field);
-        }
-
-        /* eslint-disable */
-        const editorKeyHelper = this.props.editor && <a tabIndex="0" ref={(el) => {this.keyHelper = el;}} className="p-cell-editor-key-helper p-hidden-accessible" onFocus={this.onEditorFocus}><span></span></a>;
-        /* eslint-enable */
-
-        return (
-            <td ref={el => this.container = el} className={className} style={style} onClick={this.onClick} onKeyDown={this.onKeyDown}>
-                {this.props.children}
-                {editorKeyHelper}
-                {content}
-            </td>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableFooter.js b/src/components/treetable/TreeTableFooter.js
deleted file mode 100644
index 6b074c7e17..0000000000
--- a/src/components/treetable/TreeTableFooter.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-export class TreeTableFooter extends Component {
-
-    static defaultProps = {
-        columns: null,
-        columnGroup: null
-    }
-
-    static propTypes = {
-        columns: PropTypes.array,
-        columnGroup: PropTypes.any
-    }
-
-    renderFooterCell(column, index) {
-        return (
-            <td key={column.field||index} className={column.props.footerClassName||column.props.className} style={column.props.footerStyle||column.props.style}
-                rowSpan={column.props.rowSpan} colSpan={column.props.colSpan}>
-                {column.props.footer}
-            </td>
-        );
-    }
-
-    renderFooterRow(row, index) {
-        const rowColumns = React.Children.toArray(row.props.children);
-        const rowFooterCells = rowColumns.map((col, index) => this.renderFooterCell(col, index));
-        
-        return (
-            <tr key={index}>{rowFooterCells}</tr>
-        )
-    }
-
-    renderColumnGroup() {
-        let rows = React.Children.toArray(this.props.columnGroup.props.children);
-
-        return (
-            rows.map((row, i) => this.renderFooterRow(row, i))
-        );
-    }
-
-    renderColumns(columns) {
-        if (columns) {
-            const headerCells = columns.map((col, index) => this.renderFooterCell(col, index));
-            return (
-                <tr>{headerCells}</tr>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-
-    hasFooter() {
-        if(this.props.columnGroup) {
-            return true;
-        }
-        else {
-            for (let i = 0; i < this.props.columns.length; i++) {
-                if (this.props.columns[i].props.footer) {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
-    render() {
-        let content = this.props.columnGroup ? this.renderColumnGroup() : this.renderColumns(this.props.columns);
-
-        if (this.hasFooter()) {
-            return (
-                <tfoot className="p-treetable-tfoot">
-                    {content}
-                </tfoot>
-            );
-        } 
-        else {
-            return null;
-        }
-        
-    }
-}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableHeader.js b/src/components/treetable/TreeTableHeader.js
deleted file mode 100644
index 21de041557..0000000000
--- a/src/components/treetable/TreeTableHeader.js
+++ /dev/null
@@ -1,296 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-import {InputText} from '../inputtext/InputText';
-
-export class TreeTableHeader extends Component {
-
-    static defaultProps = {
-        columns: null,
-        columnGroup: null,
-        sortField: null,
-        sortOrder: null,
-        multiSortMeta: null,
-        resizableColumns: false,
-        reorderableColumns: false,
-        onSort: null,
-        onResizeStart: null,
-        onDragStart: null,
-        onDragOver: null,
-        onDragLeave: null,
-        onDrop: null,
-        onFilter: null
-    }
-
-    static propTypes = {
-        columns: PropTypes.array,
-        columnGroup: PropTypes.any,
-        sortField: PropTypes.string,
-        sortOrder: PropTypes.number,
-        multiSortMeta: PropTypes.array,
-        resizableColumns: PropTypes.bool,
-        reorderableColumns: PropTypes.bool,
-        onSort: PropTypes.func,
-        onResizeStart: PropTypes.func,
-        onDragStart: PropTypes.func,
-        onDragOver: PropTypes.func,
-        onDragLeave: PropTypes.func,
-        onDrop: PropTypes.func,
-        onFilter: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            badgeVisible: false
-        }
-
-        this.onFilterInput = this.onFilterInput.bind(this);
-    }
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-        return {
-            badgeVisible: nextProps.multiSortMeta && nextProps.multiSortMeta.length > 1
-        }
-    }
-
-    onHeaderClick(event, column) {
-        if (column.props.sortable) {
-            const targetNode = event.target;
-            if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
-                || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
-
-                this.props.onSort({
-                    originalEvent: event,
-                    sortField: column.props.field,
-                    sortFunction: column.props.sortFunction,
-                    sortable: column.props.sortable
-                });
-
-                DomHandler.clearSelection();
-            }
-        }
-    }
-
-    onHeaderMouseDown(event, column) {
-        if (this.props.reorderableColumns && column.props.reorderable) {
-            if (event.target.nodeName !== 'INPUT')
-                event.currentTarget.draggable = true;
-            else if (event.target.nodeName === 'INPUT')
-                event.currentTarget.draggable = false;
-        }
-    }
-
-    onHeaderKeyDown(event, column) {
-        if (event.key === 'Enter') {
-            this.onHeaderClick(event, column);
-            event.preventDefault();
-        }
-    }
-
-    getMultiSortMetaDataIndex(column) {
-        if(this.props.multiSortMeta) {
-            for(let i = 0; i < this.props.multiSortMeta.length; i++) {
-                if(this.props.multiSortMeta[i].field === column.props.field) {
-                    return i;
-                }
-            }
-        }
-
-        return -1;
-    }
-
-    onResizerMouseDown(event, column) {
-        if(this.props.resizableColumns && this.props.onResizeStart) {
-            this.props.onResizeStart({
-                originalEvent: event,
-                columnEl: event.target.parentElement,
-                column: column
-            });
-        }
-    }
-
-    onFilterInput(e, column) {
-        if(column.props.filter && this.props.onFilter) {
-            if(this.filterTimeout) {
-                clearTimeout(this.filterTimeout);
-            }
-
-            let filterValue = e.target.value;
-            this.filterTimeout = setTimeout(() => {
-                this.props.onFilter({
-                    value: filterValue,
-                    field: column.props.field,
-                    matchMode: column.props.filterMatchMode
-                });
-                this.filterTimeout = null;
-            }, this.filterDelay);
-        }
-    }
-
-    hasColumnFilter(columns) {
-        if (columns) {
-            for (let col of columns) {
-                if (col.props.filter) {
-                    return true;
-                }
-            }
-        }
-
-        return false;
-    }
-
-    renderSortIcon(column, sorted, sortOrder) {
-        if (column.props.sortable) {
-            const sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt': 'pi-sort-alt';
-            const sortIconClassName = classNames('p-sortable-column-icon', 'pi pi-fw', sortIcon);
-
-            return (
-                <span className={sortIconClassName}></span>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderResizer(column) {
-        if (this.props.resizableColumns) {
-            return (
-                <span className="p-column-resizer p-clickable" onMouseDown={e => this.onResizerMouseDown(e, column)} />
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    getAriaSort(column, sorted, sortOrder) {
-        if (column.props.sortable) {
-            let sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-down' : 'pi-sort-up': 'pi-sort';
-            if (sortIcon === 'pi-sort-down')
-                return 'descending';
-            else if (sortIcon === 'pi-sort-up')
-                return 'ascending';
-            else
-                return 'none';
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderSortBadge(sortMetaDataIndex) {
-        if (sortMetaDataIndex !== -1 && this.state.badgeVisible) {
-            return <span className="p-sortable-column-badge">{sortMetaDataIndex + 1}</span>;
-        }
-
-        return null;
-    }
-
-    renderHeaderCell(column, options) {
-        let filterElement;
-
-        if (column.props.filter && options.renderFilter) {
-            filterElement = column.props.filterElement||<InputText onInput={(e) => this.onFilterInput(e, column)} type={this.props.filterType} defaultValue={this.props.filters && this.props.filters[column.props.field] ? this.props.filters[column.props.field].value : null}
-                    className="p-column-filter" placeholder={column.props.filterPlaceholder} maxLength={column.props.filterMaxLength}/>;
-        }
-
-        if (options.filterOnly) {
-            return (
-                <th key={column.props.columnKey||column.props.field||options.index} className={classNames('p-filter-column', column.props.filterHeaderClassName)} style={column.props.filterHeaderStyle||column.props.style}
-                    rowSpan={column.props.rowSpan} colSpan={column.props.colSpan}>
-                    {filterElement}
-                </th>
-            );
-        }
-        else {
-            const sortMetaDataIndex = this.getMultiSortMetaDataIndex(column);
-            const multiSortMetaData = sortMetaDataIndex !== -1 ? this.props.multiSortMeta[sortMetaDataIndex] : null;
-            const singleSorted = (column.props.field === this.props.sortField);
-            const multipleSorted = multiSortMetaData !== null;
-            const sorted = column.props.sortable && (singleSorted || multipleSorted);
-            let sortOrder = 0;
-
-            if(singleSorted)
-                sortOrder = this.props.sortOrder;
-            else if(multipleSorted)
-                sortOrder = multiSortMetaData.order;
-
-            const sortIconElement = this.renderSortIcon(column, sorted, sortOrder);
-            let ariaSortData = this.getAriaSort(column, sorted, sortOrder);
-            let sortBadge = this.renderSortBadge(sortMetaDataIndex);
-
-            const className = classNames(column.props.headerClassName||column.props.className, {
-                'p-sortable-column': column.props.sortable,
-                'p-highlight': sorted,
-                'p-resizable-column': this.props.resizableColumns
-            });
-
-            const resizer = this.renderResizer(column);
-
-            return (
-                <th key={column.columnKey||column.field||options.index} className={className} style={column.props.headerStyle||column.props.style} tabIndex={column.props.sortable ? this.props.tabIndex: null}
-                    onClick={e => this.onHeaderClick(e, column)} onMouseDown={e => this.onHeaderMouseDown(e, column)} onKeyDown={e => this.onHeaderKeyDown(e, column)}
-                    rowSpan={column.props.rowSpan} colSpan={column.props.colSpan} aria-sort={ariaSortData}
-                    onDragStart={this.props.onDragStart} onDragOver={this.props.onDragOver} onDragLeave={this.props.onDragLeave} onDrop={this.props.onDrop}>
-                    {resizer}
-                    <span className="p-column-title">{column.props.header}</span>
-                    {sortIconElement}
-                    {sortBadge}
-                    {filterElement}
-                </th>
-            );
-        }
-    }
-
-    renderHeaderRow(row, index) {
-        const rowColumns = React.Children.toArray(row.props.children);
-        const rowHeaderCells = rowColumns.map((col, i) => this.renderHeaderCell(col, {index: i, filterOnly: false, renderFilter: true}));
-
-        return (
-            <tr key={index}>{rowHeaderCells}</tr>
-        )
-    }
-
-    renderColumnGroup() {
-        let rows = React.Children.toArray(this.props.columnGroup.props.children);
-
-        return (
-            rows.map((row, i) => this.renderHeaderRow(row, i))
-        );
-    }
-
-    renderColumns(columns) {
-        if (columns) {
-            if (this.hasColumnFilter(columns)) {
-                return (
-                    <>
-                        <tr>{columns.map((col, i) => this.renderHeaderCell(col, {index: i, filterOnly: false, renderFilter: false}))}</tr>
-                        <tr>{columns.map((col, i) => this.renderHeaderCell(col, {index: i, filterOnly: true, renderFilter: true}))}</tr>
-                    </>
-                );
-            }
-            else {
-                return (
-                    <tr>{columns.map((col, i) => this.renderHeaderCell(col, {index: i, filterOnly: false, renderFilter: false}))}</tr>
-                );
-            }            
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const content = this.props.columnGroup ? this.renderColumnGroup() : this.renderColumns(this.props.columns);
-
-        return (
-            <thead className="p-treetable-thead">
-                {content}
-            </thead>
-        );
-    }
-}
diff --git a/src/components/treetable/TreeTableNode.js b/src/components/treetable/TreeTableNode.js
deleted file mode 100644
index 9c66655e31..0000000000
--- a/src/components/treetable/TreeTableNode.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export class UITreeTableNode extends Component {
-    
-    static defaultProps = {
-        node: null,
-        index: null
-    }
-
-    static propTypes = {
-        node: PropTypes.object,
-        index: PropTypes.number
-    }
-
-    render() {
-        return (
-            <React.Fragment>
-                
-            </React.Fragment>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/treetable/TreeTableRow.js b/src/components/treetable/TreeTableRow.js
deleted file mode 100644
index ecd1b2454d..0000000000
--- a/src/components/treetable/TreeTableRow.js
+++ /dev/null
@@ -1,551 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-import { TreeTableBodyCell } from './TreeTableBodyCell';
-
-export class TreeTableRow extends Component {
-
-    static defaultProps = {
-        node: null,
-        level: null,
-        columns: null,
-        expandedKeys: null,
-        contextMenuSelectionKey: null,
-        selectionMode: null,
-        selectionKeys: null,
-        metaKeySelection: true,
-        propagateSelectionUp: true,
-        propagateSelectionDown: true,
-        rowClassName: null,
-        onExpand: null,
-        onCollapse: null,
-        onToggle: null,
-        onRowClick: null,
-        onSelect: null,
-        onUnselect: null,
-        onSelectionChange: null,
-        onPropagateUp: null,
-        onContextMenuSelectionChange: null,
-        onContextMenu: null
-    }
-
-    static propTypes = {
-        node: PropTypes.any,
-        level: PropTypes.number,
-        columns: PropTypes.array,
-        expandedKeys: PropTypes.object,
-        contextMenuSelectionKey: PropTypes.any,
-        selectionMode: PropTypes.string,
-        selectionKeys: PropTypes.any,
-        metaKeySelection: PropTypes.bool,
-        propagateSelectionUp: PropTypes.bool,
-        propagateSelectionDown: PropTypes.bool,
-        rowClassName: PropTypes.func,
-        onExpand: PropTypes.func,
-        onCollapse: PropTypes.func,
-        onToggle: PropTypes.func,
-        onRowClick: PropTypes.func,
-        onSelect: PropTypes.func,
-        onUnselect: PropTypes.func,
-        onSelectionChange: PropTypes.func,
-        onPropagateUp: PropTypes.func,
-        onContextMenuSelectionChange: PropTypes.func,
-        onContextMenu: PropTypes.func,
-    }
-
-    constructor(props) {
-        super(props);
-
-        this.onTogglerClick = this.onTogglerClick.bind(this);
-        this.onClick = this.onClick.bind(this);
-        this.onTouchEnd = this.onTouchEnd.bind(this);
-        this.propagateUp = this.propagateUp.bind(this);
-        this.onCheckboxChange = this.onCheckboxChange.bind(this);
-        this.onCheckboxFocus = this.onCheckboxFocus.bind(this);
-        this.onCheckboxBlur = this.onCheckboxBlur.bind(this);
-        this.onRightClick = this.onRightClick.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-
-    isLeaf() {
-        return this.props.node.leaf === false ? false : !(this.props.node.children && this.props.node.children.length);
-    }
-
-    onTogglerClick(event) {
-        if (this.isExpanded())
-            this.collapse(event);
-        else
-            this.expand(event);
-
-        event.preventDefault();
-        event.stopPropagation();
-    }
-
-    expand(event) {
-        let expandedKeys = this.props.expandedKeys ? {...this.props.expandedKeys} : {};
-        expandedKeys[this.props.node.key] = true;
-
-        this.props.onToggle({
-            originalEvent: event,
-            value: expandedKeys
-        });
-
-        this.invokeToggleEvents(event, true);
-    }
-
-    collapse(event) {
-        let expandedKeys = {...this.props.expandedKeys};
-        delete expandedKeys[this.props.node.key];
-
-        this.props.onToggle({
-            originalEvent: event,
-            value: expandedKeys
-        });
-
-        this.invokeToggleEvents(event, false);
-    }
-
-    invokeToggleEvents(event, expanded) {
-        if (expanded) {
-            if (this.props.onExpand) {
-                this.props.onExpand({
-                    originalEvent: event,
-                    node: this.props.node
-                });
-            }
-        }
-        else {
-            if (this.props.onCollapse) {
-                this.props.onCollapse({
-                    originalEvent: event,
-                    node: this.props.node
-                });
-            }
-        }
-    }
-
-    onClick(event) {
-        if (this.props.onRowClick) {
-            this.props.onRowClick({
-                originalEvent: event,
-                node: this.props.node
-            });
-        }
-
-        let targetNode = event.target.nodeName;
-        if (targetNode === 'INPUT' || targetNode === 'BUTTON' || targetNode === 'A' || DomHandler.hasClass(event.target, 'p-clickable')
-            || DomHandler.hasClass(event.target, 'p-treetable-toggler') || DomHandler.hasClass(event.target.parentElement, 'p-treetable-toggler')) {
-            return;
-        }
-
-        if ((this.isSingleSelectionMode() || this.isMultipleSelectionMode()) && this.props.node.selectable !== false) {
-            let selectionKeys;
-            const selected = this.isSelected();
-            const metaSelection = this.nodeTouched ? false : this.props.metaKeySelection;
-
-            if (metaSelection) {
-                let metaKey = (event.metaKey||event.ctrlKey);
-
-                if (selected && metaKey) {
-                    if (this.isSingleSelectionMode()) {
-                        selectionKeys = null;
-                    }
-                    else {
-                        selectionKeys = {...this.props.selectionKeys};
-                        delete selectionKeys[this.props.node.key];
-                    }
-
-                    if (this.props.onUnselect) {
-                        this.props.onUnselect({
-                            originalEvent: event,
-                            node: this.props.node
-                        });
-                    }
-                }
-                else {
-                    if (this.isSingleSelectionMode()) {
-                        selectionKeys = this.props.node.key;
-                    }
-                    else if (this.isMultipleSelectionMode()) {
-                        selectionKeys = !metaKey ? {} : (this.props.selectionKeys ? {...this.props.selectionKeys} : {});
-                        selectionKeys[this.props.node.key] = true;
-                    }
-
-                    if (this.props.onSelect) {
-                        this.props.onSelect({
-                            originalEvent: event,
-                            node: this.props.node
-                        });
-                    }
-                }
-            }
-            else {
-                if (this.isSingleSelectionMode()) {
-                    if (selected) {
-                        selectionKeys = null;
-
-                        if (this.props.onUnselect) {
-                            this.props.onUnselect({
-                                originalEvent: event,
-                                node: this.props.node
-                            });
-                        }
-                    }
-                    else {
-                        selectionKeys = this.props.node.key;
-
-                        if (this.props.onSelect) {
-                            this.props.onSelect({
-                                originalEvent: event,
-                                node: this.props.node
-                            });
-                        }
-                    }
-                }
-                else {
-                    if (selected) {
-                        selectionKeys = {...this.props.selectionKeys};
-                        delete selectionKeys[this.props.node.key];
-
-                        if (this.props.onUnselect) {
-                            this.props.onUnselect({
-                                originalEvent: event,
-                                node: this.props.node
-                            });
-                        }
-                    }
-                    else {
-                        selectionKeys = this.props.selectionKeys ? {...this.props.selectionKeys} : {};
-                        selectionKeys[this.props.node.key] = true;
-
-                        if (this.props.onSelect) {
-                            this.props.onSelect({
-                                originalEvent: event,
-                                node: this.props.node
-                            });
-                        }
-                    }
-                }
-            }
-
-            if (this.props.onSelectionChange) {
-                this.props.onSelectionChange({
-                    originalEvent: event,
-                    value: selectionKeys
-                })
-            }
-        }
-
-        this.nodeTouched = false;
-    }
-
-    onTouchEnd() {
-        this.nodeTouched = true;
-    }
-
-    onCheckboxChange(event) {
-        const checked = this.isChecked();
-        let selectionKeys = this.props.selectionKeys ? {...this.props.selectionKeys} : {};
-
-        if (checked) {
-            if (this.props.propagateSelectionDown)
-                this.propagateDown(this.props.node, false, selectionKeys);
-            else
-                delete selectionKeys[this.props.node.key];
-
-            if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
-                this.props.onPropagateUp({
-                    originalEvent: event,
-                    check: false,
-                    selectionKeys: selectionKeys
-                });
-            }
-
-            if (this.props.onUnselect) {
-                this.props.onUnselect({
-                    originalEvent: event,
-                    node: this.props.node
-                });
-            }
-        }
-        else {
-            if (this.props.propagateSelectionDown)
-                this.propagateDown(this.props.node, true, selectionKeys);
-            else
-                selectionKeys[this.props.node.key] = {checked: true};
-
-                if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
-                    this.props.onPropagateUp({
-                        originalEvent: event,
-                        check: true,
-                        selectionKeys: selectionKeys
-                    });
-                }
-
-            if (this.props.onSelect) {
-                this.props.onSelect({
-                    originalEvent: event,
-                    node: this.props.node
-                });
-            }
-        }
-
-        if (this.props.onSelectionChange) {
-            this.props.onSelectionChange({
-                originalEvent: event,
-                value: selectionKeys
-            })
-        }
-
-        DomHandler.clearSelection();
-    }
-
-    onCheckboxFocus() {
-        DomHandler.addClass(this.checkboxBox, 'p-focus');
-    }
-
-    onCheckboxBlur() {
-        DomHandler.removeClass(this.checkboxBox, 'p-focus');
-    }
-
-    propagateUp(event) {
-        let check = event.check;
-        let selectionKeys = event.selectionKeys;
-        let checkedChildCount = 0;
-        let childPartialSelected = false;
-
-        for(let child of this.props.node.children) {
-            if(selectionKeys[child.key] && selectionKeys[child.key].checked)
-                checkedChildCount++;
-            else if(selectionKeys[child.key] && selectionKeys[child.key].partialChecked)
-                childPartialSelected = true;
-        }
-
-        if(check && checkedChildCount === this.props.node.children.length) {
-            selectionKeys[this.props.node.key] = {checked: true, partialChecked: false};
-        }
-        else {
-            if (!check) {
-                delete selectionKeys[this.props.node.key];
-            }
-
-            if(childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== this.props.node.children.length))
-                selectionKeys[this.props.node.key] = {checked: false, partialChecked: true};
-            else
-                selectionKeys[this.props.node.key] = {checked: false, partialChecked: false};
-        }
-
-        if (this.props.propagateSelectionUp && this.props.onPropagateUp) {
-            this.props.onPropagateUp(event);
-        }
-    }
-
-    propagateDown(node, check, selectionKeys) {
-        if(check)
-            selectionKeys[node.key] = {checked: true, partialChecked: false};
-        else
-            delete selectionKeys[node.key];
-
-        if (node.children && node.children.length) {
-            for (let i = 0; i < node.children.length; i++) {
-                this.propagateDown(node.children[i], check, selectionKeys);
-            }
-        }
-    }
-
-    onRightClick(event) {
-        DomHandler.clearSelection();
-
-        if (this.props.onContextMenuSelectionChange) {
-            this.props.onContextMenuSelectionChange({
-                originalEvent: event,
-                value: this.props.node.key
-            });
-        }
-
-        if (this.props.onContextMenu) {
-            this.props.onContextMenu({
-                originalEvent: event,
-                node: this.props.node
-            });
-        }
-    }
-
-    onKeyDown(event) {
-        if (event.target === this.container) {
-            const rowElement = event.currentTarget;
-
-            switch (event.which) {
-                //down arrow
-                case 40:
-                    const nextRow = rowElement.nextElementSibling;
-                    if (nextRow) {
-                        nextRow.focus();
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //up arrow
-                case 38:
-                    const previousRow = rowElement.previousElementSibling;
-                    if (previousRow) {
-                        previousRow.focus();
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //right arrow
-                case 39:
-                    if (!this.isExpanded()) {
-                        this.expand(event);
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //left arrow
-                case 37:
-                    if (this.isExpanded()) {
-                        this.collapse(event);
-                    }
-
-                    event.preventDefault();
-                break;
-
-                //enter
-                case 13:
-                    this.onClick(event);
-                    event.preventDefault();
-                break;
-
-                default:
-                    //no op
-                break;
-            }
-        }
-    }
-
-    isSingleSelectionMode() {
-        return this.props.selectionMode && this.props.selectionMode === 'single';
-    }
-
-    isMultipleSelectionMode() {
-        return this.props.selectionMode && this.props.selectionMode === 'multiple';
-    }
-
-    isExpanded() {
-        return this.props.expandedKeys ? this.props.expandedKeys[this.props.node.key] !== undefined : false;
-    }
-
-    isSelected() {
-        if ((this.props.selectionMode === 'single' || this.props.selectionMode === 'multiple') && this.props.selectionKeys)
-            return (this.props.selectionMode === 'single') ? this.props.selectionKeys === this.props.node.key : this.props.selectionKeys[this.props.node.key] !== undefined;
-        else
-            return false;
-    }
-
-    isChecked() {
-        return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].checked: false;
-    }
-
-    isPartialChecked() {
-        return this.props.selectionKeys ? this.props.selectionKeys[this.props.node.key] && this.props.selectionKeys[this.props.node.key].partialChecked: false;
-    }
-
-    renderToggler() {
-        const expanded = this.isExpanded();
-        const iconClassName = classNames('"p-treetable-toggler-icon pi pi-fw', {'pi-chevron-right': !expanded, 'pi-chevron-down': expanded});
-        const style = {marginLeft: this.props.level * 16 + 'px', visibility: (this.props.node.leaf === false || (this.props.node.children && this.props.node.children.length)) ? 'visible' : 'hidden'};
-
-        return (
-            <span className="p-treetable-toggler p-unselectable-text" onClick={this.onTogglerClick} style={style}>
-                <i className={iconClassName} ></i>
-            </span>
-        );
-    }
-
-    renderCheckbox() {
-        if (this.props.selectionMode === 'checkbox' && this.props.node.selectable !== false) {
-            const checked = this.isChecked();
-            const partialChecked = this.isPartialChecked();
-            const className = classNames('p-checkbox-box', {'p-highlight': checked});
-            const icon = classNames('p-checkbox-icon p-c', {'pi pi-check': checked, 'pi pi-minus': partialChecked});
-
-            return (
-                <div className="p-checkbox p-treetable-checkbox p-component" onClick={this.onCheckboxChange} role="checkbox" aria-checked={checked}>
-                    <div className="p-hidden-accessible">
-                        <input type="checkbox" onFocus={this.onCheckboxFocus} onBlur={this.onCheckboxBlur} />
-                    </div>
-                    <div className={className} ref={el => this.checkboxBox = el}>
-                        <span className={icon}></span>
-                    </div>
-                </div>
-            )
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderCell(column) {
-        let toggler, checkbox;
-
-        if (column.props.expander) {
-            toggler = this.renderToggler();
-            checkbox = this.renderCheckbox();
-        }
-
-        return (
-            <TreeTableBodyCell key={column.props.columnKey||column.props.field} {...column.props} node={this.props.node}>
-                {toggler}
-                {checkbox}
-            </TreeTableBodyCell>
-        );
-    }
-
-    renderChildren() {
-        if (this.isExpanded() && this.props.node.children) {
-            return this.props.node.children.map(childNode => {
-                return (
-                    <TreeTableRow key={childNode.key||JSON.stringify(childNode.data)} level={this.props.level + 1}
-                        node={childNode} columns={this.props.columns} expandedKeys={this.props.expandedKeys}
-                        onToggle={this.props.onToggle} onExpand={this.props.onExpand} onCollapse={this.props.onCollapse}
-                        selectionMode={this.props.selectionMode} selectionKeys={this.props.selectionKeys} onSelectionChange={this.props.onSelectionChange}
-                        metaKeySelection={this.props.metaKeySelection} onRowClick={this.props.onRowClick} onSelect={this.props.onSelect} onUnselect={this.props.onUnselect}
-                        propagateSelectionUp={this.props.propagateSelectionUp} propagateSelectionDown={this.props.propagateSelectionDown} onPropagateUp={this.propagateUp}
-                        rowClassName={this.props.rowClassName}
-                        contextMenuSelectionKey={this.props.contextMenuSelectionKey} onContextMenuSelectionChange={this.props.onContextMenuSelectionChange} onContextMenu={this.props.onContextMenu} />
-                );
-            });
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        const cells = this.props.columns.map(col => this.renderCell(col));
-        const children =  this.renderChildren();
-        let className = {
-            'p-highlight': this.isSelected(),
-            'p-highlight-contextmenu': (this.props.contextMenuSelectionKey && this.props.contextMenuSelectionKey === this.props.node.key)
-        };
-
-        if (this.props.rowClassName) {
-            let rowClassName = this.props.rowClassName(this.props.node);
-            className = {...className, ...rowClassName};
-        }
-
-        className = classNames(className, this.props.node.className);
-
-        return (
-            <React.Fragment>
-                <tr ref={el => this.container = el} tabIndex="0" className={className} style={this.props.node.style} onClick={this.onClick} onTouchEnd={this.onTouchEnd} onContextMenu={this.onRightClick} onKeyDown={this.onKeyDown}>{cells}</tr>
-                {children}
-            </React.Fragment>
-        );
-    }
-}
diff --git a/src/components/treetable/TreeTableScrollableView.js b/src/components/treetable/TreeTableScrollableView.js
deleted file mode 100644
index f013075853..0000000000
--- a/src/components/treetable/TreeTableScrollableView.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-
-export class TreeTableScrollableView extends Component {
-
-     static defaultProps = {
-        header: null,
-        body: null,
-        footer: null,
-        columns: null,
-        frozen: null,
-        frozenWidth: null,
-        frozenBody: null
-     }
-
-    static propTypes = {
-        header: PropTypes.any,
-        body: PropTypes.any,
-        footer: PropTypes.any,
-        columns: PropTypes.array,
-        frozen: PropTypes.bool,
-        frozenWidth: PropTypes.string,
-        frozenBody: PropTypes.any
-    }
-
-    constructor(props) {
-        super(props);
-        this.onHeaderScroll = this.onHeaderScroll.bind(this);
-        this.onBodyScroll = this.onBodyScroll.bind(this);
-    }
-
-    componentDidMount() {
-        this.setScrollHeight();
-                
-        if(!this.props.frozen) {
-            this.alignScrollBar();
-        }
-        else {
-            this.scrollBody.style.paddingBottom = DomHandler.calculateScrollbarWidth() + 'px';
-        }
-    }
-
-    componentDidUpdate() {
-        if(!this.props.frozen) {
-            this.alignScrollBar();
-        }
-    }
-    
-    setScrollHeight() {
-        if(this.props.scrollHeight) {
-            if(this.props.scrollHeight.indexOf('%') !== -1) {
-                let datatableContainer = this.findDataTableContainer(this.container);
-                this.scrollBody.style.visibility = 'hidden';
-                this.scrollBody.style.height = '100px';         //temporary height to calculate static height
-                let containerHeight = DomHandler.getOuterHeight(datatableContainer);
-                let relativeHeight = DomHandler.getOuterHeight(datatableContainer.parentElement) * parseInt(this.props.scrollHeight, 10) / 100;
-                let staticHeight = containerHeight - 100;       //total height of headers, footers, paginators
-                let scrollBodyHeight = (relativeHeight - staticHeight);
-                
-                this.scrollBody.style.height = 'auto';
-                this.scrollBody.style.maxHeight = scrollBodyHeight + 'px';
-                this.scrollBody.style.visibility = 'visible';
-            }
-            else {
-                this.scrollBody.style.maxHeight = this.props.scrollHeight;
-            }
-        }
-    }
-    
-    findDataTableContainer(element) {
-        if(element) {
-            let el = element;
-            while(el && !DomHandler.hasClass(el, 'p-treetable')) {
-                el = el.parentElement;
-            }
-
-            return el;
-        }
-        else {
-            return null;
-        }
-    }
-
-    onHeaderScroll() {
-        this.scrollHeader.scrollLeft = 0;
-    }
-
-    onBodyScroll() {
-        let frozenView = this.container.previousElementSibling;
-        let frozenScrollBody;
-        if(frozenView) {
-            frozenScrollBody = DomHandler.findSingle(frozenView, '.p-treetable-scrollable-body');
-        }
-        
-        this.scrollHeaderBox.style.marginLeft = -1 * this.scrollBody.scrollLeft + 'px';
-        if(this.scrollFooterBox) {
-            this.scrollFooterBox.style.marginLeft = -1 * this.scrollBody.scrollLeft + 'px';
-        }
-        
-        if(frozenScrollBody) {
-            frozenScrollBody.scrollTop = this.scrollBody.scrollTop;
-        }
-    }
-
-    hasVerticalOverflow() {
-        return DomHandler.getOuterHeight(this.scrollTable) > DomHandler.getOuterHeight(this.scrollBody);
-    }
-
-    alignScrollBar() {
-        let scrollBarWidth = this.hasVerticalOverflow() ? DomHandler.calculateScrollbarWidth() : 0;
-        
-        this.scrollHeaderBox.style.marginRight = scrollBarWidth + 'px';
-        if(this.scrollFooterBox) {
-            this.scrollFooterBox.style.marginRight = scrollBarWidth + 'px';
-        }
-    }
-    
-    calculateRowHeight() {
-        let row = DomHandler.findSingle(this.scrollTable, 'tr:not(.p-treetable-emptymessage-row)');
-        if(row) {
-            this.rowHeight = DomHandler.getOuterHeight(row);
-        }
-    }
-
-    renderColGroup() {
-        if(this.props.columns && this.props.columns.length) {
-            return (
-                <colgroup className="p-treetable-scrollable-colgroup">
-                    {this.props.columns.map((col, i) => <col key={col.field + '_' + i} />)}
-                </colgroup>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    render() {
-        let className = classNames('p-treetable-scrollable-view', {'p-treetable-frozen-view': this.props.frozen, 'p-treetable-unfrozen-view': !this.props.frozen && this.props.frozenWidth});
-        let width = this.props.frozen ? this.props.frozenWidth : 'calc(100% - ' + this.props.frozenWidth + ')';
-        let left = this.props.frozen ? null : this.props.frozenWidth;
-        let colGroup = this.renderColGroup();
-
-        return (
-            <div className={className} style={{width: width, left: left}} ref={(el) => { this.container = el; }}>
-                <div className="p-treetable-scrollable-header" ref={(el) => { this.scrollHeader= el; }} onScroll={this.onHeaderScroll}>
-                    <div className="p-treetable-scrollable-header-box" ref={(el) => { this.scrollHeaderBox = el; }}>
-                        <table className="p-treetable-scrollable-header-table">
-                            {colGroup}
-                            {this.props.header}
-                        </table>
-                    </div>
-                </div>
-                <div className="p-treetable-scrollable-body" ref={(el) => { this.scrollBody = el; }} onScroll={this.onBodyScroll}>
-                    <table ref={(el) => { this.scrollTable = el; }} style={{top:'0'}} className="p-treetable-scrollable-body-table">
-                        {colGroup}
-                        {this.props.body}
-                    </table>
-                </div>
-                <div className="p-treetable-scrollable-footer" ref={(el) => { this.scrollFooter = el; }}>
-                    <div className="p-treetable-scrollable-footer-box" ref={(el) => { this.scrollFooterBox = el; }}>
-                         <table className="p-treetable-scrollable-footer-table">
-                            {colGroup}
-                            {this.props.footer}
-                        </table>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/tristatecheckbox/TriStateCheckbox.d.ts b/src/components/tristatecheckbox/TriStateCheckbox.d.ts
deleted file mode 100644
index adef62d9ba..0000000000
--- a/src/components/tristatecheckbox/TriStateCheckbox.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react';
-import TooltipOptions from '../tooltip/TooltipOptions';
-
-interface TriStateCheckboxProps {
-    id?: string;
-    inputId?: string;
-    value?: boolean | null;
-    name?: string;
-    style?: object;
-    className?: string;
-    disabled?: boolean;
-    tooltip?: any;
-    tooltipOptions?: TooltipOptions;
-    ariaLabelledBy?: string;
-    onChange?(e: {originalEvent: Event, value: any, target: {name: string, id: string, value: any}}): void;
-}
-
-export class TriStateCheckbox extends React.Component<TriStateCheckboxProps,any> {}
diff --git a/src/components/tristatecheckbox/TriStateCheckbox.js b/src/components/tristatecheckbox/TriStateCheckbox.js
deleted file mode 100644
index 76d769468d..0000000000
--- a/src/components/tristatecheckbox/TriStateCheckbox.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import DomHandler from '../utils/DomHandler';
-import Tooltip from "../tooltip/Tooltip";
-
-export class TriStateCheckbox extends Component {
-
-    static defaultProps = {
-        id: null,
-        inputId: null,
-        value: null,
-        name: null,
-        style: null,
-        className: null,
-        disabled: false,
-        tooltip: null,
-        tooltipOptions: null,
-        ariaLabelledBy: null,
-        onChange: null
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        inputId: PropTypes.string,
-        value: PropTypes.bool,
-        name: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        tooltip: PropTypes.string,
-        tooltipOptions: PropTypes.object,
-        ariaLabelledBy: PropTypes.string,
-        onChange: PropTypes.func
-    }
-
-    constructor(props) {
-        super(props);
-        this.onClick = this.onClick.bind(this);
-        this.onFocus = this.onFocus.bind(this);
-        this.onBlur = this.onBlur.bind(this);
-    }
-
-    onClick(event) {
-        if (!this.props.disabled) {
-            this.toggle(event);
-            this.inputEL.focus();
-        }
-    }
-
-    toggle(event) {
-        var newValue;
-        if(this.props.value === null || this.props.value === undefined)
-            newValue = true;
-        else if(this.props.value === true)
-            newValue = false;
-        else if(this.props.value === false)
-            newValue = null;
-
-        if(this.props.onChange) {
-            this.props.onChange({
-                originalEvent: event,
-                value: newValue,
-                stopPropagation : () =>{},
-                preventDefault : () =>{},
-                target: {
-                    name: this.props.name,
-                    id: this.props.id,
-                    value: newValue
-                }
-            })
-        }
-    }
-
-    onFocus(event) {
-        DomHandler.addClass(this.box, 'p-focus');
-    }
-
-    onBlur(event) {
-        DomHandler.removeClass(this.box, 'p-focus');
-    }
-
-    componentDidMount() {
-        if (this.props.tooltip && !this.props.disabled) {
-            this.renderTooltip();
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.tooltip !== this.props.tooltip) {
-            if (this.tooltip)
-                this.tooltip.updateContent(this.props.tooltip);
-            else
-                this.renderTooltip();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.tooltip) {
-            this.tooltip.destroy();
-            this.tooltip = null;
-        }
-    }
-
-    renderTooltip() {
-        this.tooltip = new Tooltip({
-            target: this.element,
-            content: this.props.tooltip,
-            options: this.props.tooltipOptions
-        });
-    }
-
-    render() {
-        let containerClass = classNames('p-checkbox p-tristatecheckbox p-component', this.props.className);
-        let boxClass = classNames('p-checkbox-box p-component', {'p-highlight':(this.props.value || !this.props.value) && this.props.value !== null, 'p-disabled': this.props.disabled});
-        let iconClass = classNames('p-checkbox-icon p-c', {'pi pi-check': this.props.value === true, 'pi pi-times': this.props.value === false});
-
-        return (
-            <div ref={el => this.element = el} id={this.props.id} className={containerClass} style={this.props.style} onClick={this.onClick}>
-                <div className="p-hidden-accessible">
-                    <input ref={(el) => this.inputEL = el} type="checkbox" aria-labelledby={this.props.ariaLabelledBy} id={this.props.inputId} name={this.props.name}
-                           onFocus={this.onFocus} onBlur={this.onBlur} disabled={this.props.disabled} />
-                </div>
-                <div className={boxClass} ref={el => this.box = el} role="checkbox" aria-checked={this.props.value === true}>
-                    <span className={iconClass}></span>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/components/util.d.ts b/src/components/util.d.ts
deleted file mode 100644
index 3e4c505231..0000000000
--- a/src/components/util.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
deleted file mode 100644
index 09663ed0d5..0000000000
--- a/src/components/utils/DomHandler.js
+++ /dev/null
@@ -1,487 +0,0 @@
-export default class DomHandler {
-
-    static innerWidth(el) {
-        if (el) {
-            let width = el.offsetWidth;
-            let style = getComputedStyle(el);
-
-            width += parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
-            return width;
-        }
-        return 0;
-    }
-
-    static width(el) {
-        if (el) {
-            let width = el.offsetWidth;
-            let style = getComputedStyle(el);
-
-            width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
-            return width;
-        }
-        return 0;
-    }
-
-    static getWindowScrollTop() {
-        let doc = document.documentElement;
-        return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
-    }
-
-    static getWindowScrollLeft() {
-        let doc = document.documentElement;
-        return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
-    }
-
-    static getOuterWidth(el, margin) {
-        if (el) {
-            let width = el.offsetWidth;
-
-            if (margin) {
-                let style = getComputedStyle(el);
-                width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
-            }
-
-            return width;
-        }
-        return 0;
-    }
-
-    static getOuterHeight(el, margin) {
-        if (el) {
-            let height = el.offsetHeight;
-
-            if (margin) {
-                let style = getComputedStyle(el);
-                height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
-            }
-
-            return height;
-        }
-        return 0;
-    }
-
-	static getClientHeight(el, margin) {
-        if (el) {
-            let height = el.clientHeight;
-
-            if (margin) {
-                let style = getComputedStyle(el);
-                height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
-            }
-
-            return height;
-        }
-        return 0;
-    }
-
-    static getViewport() {
-        let win = window,
-            d = document,
-            e = d.documentElement,
-            g = d.getElementsByTagName('body')[0],
-            w = win.innerWidth || e.clientWidth || g.clientWidth,
-            h = win.innerHeight || e.clientHeight || g.clientHeight;
-
-        return {width: w, height: h};
-    }
-
-    static getOffset(el) {
-        if (el) {
-            let rect = el.getBoundingClientRect();
-
-            return {
-                top: rect.top + document.body.scrollTop,
-                left: rect.left + document.body.scrollLeft
-            };
-        }
-        return {
-            top: 'auto',
-            left: 'auto'
-        };
-    }
-
-    static generateZIndex() {
-        this.zindex = this.zindex||999;
-        return ++this.zindex;
-    }
-
-    static getCurrentZIndex() {
-        return this.zindex;
-    }
-
-    static index(element) {
-        if (element) {
-            let children = element.parentNode.childNodes;
-            let num = 0;
-            for (var i = 0; i < children.length; i++) {
-                if (children[i] === element) return num;
-                if (children[i].nodeType === 1) num++;
-            }
-        }
-        return -1;
-    }
-
-    static addMultipleClasses(element, className) {
-        if (element) {
-            if (element.classList) {
-                let styles = className.split(' ');
-                for (let i = 0; i < styles.length; i++) {
-                    element.classList.add(styles[i]);
-                }
-
-            }
-            else {
-                let styles = className.split(' ');
-                for (let i = 0; i < styles.length; i++) {
-                    element.className += ' ' + styles[i];
-                }
-            }
-        }
-    }
-
-    static addClass(element, className) {
-        if (element) {
-            if (element.classList)
-                element.classList.add(className);
-            else
-                element.className += ' ' + className;
-        }
-    }
-
-    static removeClass(element, className) {
-        if (element) {
-            if (element.classList)
-                element.classList.remove(className);
-            else
-                element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-        }
-    }
-
-    static hasClass(element, className) {
-        if (element) {
-            if (element.classList)
-                return element.classList.contains(className);
-            else
-                return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
-        }
-    }
-
-    static find(element, selector) {
-        return element ? Array.from(element.querySelectorAll(selector)) : [];
-    }
-
-    static findSingle(element, selector) {
-        if (element) {
-            return element.querySelector(selector);
-        }
-        return null;
-    }
-
-    static getHeight(el) {
-        if (el) {
-            let height = el.offsetHeight;
-            let style = getComputedStyle(el);
-
-            height -= parseFloat(style.paddingTop) + parseFloat(style.paddingBottom) + parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-
-            return height;
-        }
-        return 0;
-    }
-
-    static getWidth(el) {
-        if (el) {
-            let width = el.offsetWidth;
-            let style = getComputedStyle(el);
-
-            width -= parseFloat(style.paddingLeft) + parseFloat(style.paddingRight) + parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
-
-            return width;
-        }
-        return 0;
-    }
-
-    static absolutePosition(element, target) {
-        if (element) {
-            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element)
-            let elementOuterHeight = elementDimensions.height;
-            let elementOuterWidth = elementDimensions.width;
-            let targetOuterHeight = target.offsetHeight;
-            let targetOuterWidth = target.offsetWidth;
-            let targetOffset = target.getBoundingClientRect();
-            let windowScrollTop = this.getWindowScrollTop();
-            let windowScrollLeft = this.getWindowScrollLeft();
-            let viewport = this.getViewport();
-            let top, left;
-
-            if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
-                top = targetOffset.top + windowScrollTop - elementOuterHeight;
-                if(top < 0) {
-                    top = windowScrollTop;
-                }
-            }
-            else {
-                top = targetOuterHeight + targetOffset.top + windowScrollTop;
-            }
-
-            if (targetOffset.left + targetOuterWidth + elementOuterWidth > viewport.width)
-                left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
-            else
-                left = targetOffset.left + windowScrollLeft;
-
-            element.style.top = top + 'px';
-            element.style.left = left + 'px';
-        }
-    }
-
-    static relativePosition(element, target) {
-        if (element) {
-            let elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
-            const targetHeight = target.offsetHeight;
-            const targetOffset = target.getBoundingClientRect();
-            const viewport = this.getViewport();
-            let top, left;
-
-            if ((targetOffset.top + targetHeight + elementDimensions.height) > viewport.height) {
-                top = -1 * (elementDimensions.height);
-                if (targetOffset.top + top < 0) {
-                    top = -1 * targetOffset.top;
-                }
-            }
-            else {
-                top = targetHeight;
-            }
-
-            if (elementDimensions.width > viewport.width) {
-                // element wider then viewport and cannot fit on screen (align at left side of viewport)
-                left = targetOffset.left * -1;
-            }
-            else if ((targetOffset.left + elementDimensions.width) > viewport.width) {
-                // element wider then viewport but can be fit on screen (align at right side of viewport)
-                left = (targetOffset.left + elementDimensions.width - viewport.width) * -1;
-            }
-            else {
-                // element fits on screen (align with target)
-                left = 0;
-            }
-
-            element.style.top = top + 'px';
-            element.style.left = left + 'px';
-        }
-    }
-
-    static getHiddenElementOuterHeight(element) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.display = 'block';
-            let elementHeight = element.offsetHeight;
-            element.style.display = 'none';
-            element.style.visibility = 'visible';
-
-            return elementHeight;
-        }
-        return 0;
-    }
-
-    static getHiddenElementOuterWidth(element) {
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.display = 'block';
-            let elementWidth = element.offsetWidth;
-            element.style.display = 'none';
-            element.style.visibility = 'visible';
-
-            return elementWidth;
-        }
-        return 0;
-    }
-
-    static getHiddenElementDimensions(element) {
-        let dimensions = {};
-        if (element) {
-            element.style.visibility = 'hidden';
-            element.style.display = 'block';
-            dimensions.width = element.offsetWidth;
-            dimensions.height = element.offsetHeight;
-            element.style.display = 'none';
-            element.style.visibility = 'visible';
-        }
-        return dimensions;
-    }
-
-    static fadeIn(element, duration) {
-        if (element) {
-            element.style.opacity = 0;
-
-            let last = +new Date();
-            let opacity = 0;
-            let tick = function () {
-                opacity = +element.style.opacity + (new Date().getTime() - last) / duration;
-                element.style.opacity = opacity;
-                last = +new Date();
-
-                if (+opacity < 1) {
-                    (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
-                }
-            };
-
-            tick();
-        }
-    }
-
-    static fadeOut(element, ms) {
-        if (element) {
-            let opacity = 1,
-                interval = 50,
-                duration = ms,
-                gap = interval / duration;
-
-            let fading = setInterval(() => {
-                opacity -= gap;
-
-                if (opacity <= 0) {
-                    opacity = 0;
-                    clearInterval(fading);
-                }
-
-                element.style.opacity = opacity;
-            }, interval);
-        }
-    }
-
-    static getUserAgent() {
-        return navigator.userAgent;
-    }
-
-    static isIOS() {
-        return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window['MSStream'];
-    }
-
-    static isAndroid() {
-        return /(android)/i.test(navigator.userAgent);
-    }
-
-    static appendChild(element, target) {
-        if(this.isElement(target))
-            target.appendChild(element);
-        else if(target.el && target.el.nativeElement)
-            target.el.nativeElement.appendChild(element);
-        else
-            throw new Error('Cannot append ' + target + ' to ' + element);
-    }
-
-    static scrollInView(container, item) {
-        let borderTopValue = getComputedStyle(container).getPropertyValue('borderTopWidth');
-        let borderTop = borderTopValue ? parseFloat(borderTopValue) : 0;
-        let paddingTopValue = getComputedStyle(container).getPropertyValue('paddingTop');
-        let paddingTop = paddingTopValue ? parseFloat(paddingTopValue) : 0;
-        let containerRect = container.getBoundingClientRect();
-        let itemRect = item.getBoundingClientRect();
-        let offset = (itemRect.top + document.body.scrollTop) - (containerRect.top + document.body.scrollTop) - borderTop - paddingTop;
-        let scroll = container.scrollTop;
-        let elementHeight = container.clientHeight;
-        let itemHeight = this.getOuterHeight(item);
-
-        if (offset < 0) {
-            container.scrollTop = scroll + offset;
-        }
-        else if ((offset + itemHeight) > elementHeight) {
-            container.scrollTop = scroll + offset - elementHeight + itemHeight;
-        }
-    }
-
-    static clearSelection() {
-        if(window.getSelection) {
-            if(window.getSelection().empty) {
-                window.getSelection().empty();
-            } else if(window.getSelection().removeAllRanges && window.getSelection().rangeCount > 0 && window.getSelection().getRangeAt(0).getClientRects().length > 0) {
-                window.getSelection().removeAllRanges();
-            }
-        }
-        else if(document['selection'] && document['selection'].empty) {
-            try {
-                document['selection'].empty();
-            } catch(error) {
-                //ignore IE bug
-            }
-        }
-    }
-
-    static calculateScrollbarWidth(el) {
-        if (el) {
-            let style = getComputedStyle(el);
-            return (el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth));
-        }
-        else {
-            if(this.calculatedScrollbarWidth != null)
-                return this.calculatedScrollbarWidth;
-
-            let scrollDiv = document.createElement("div");
-            scrollDiv.className = "p-scrollbar-measure";
-            document.body.appendChild(scrollDiv);
-
-            let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-            document.body.removeChild(scrollDiv);
-
-            this.calculatedScrollbarWidth = scrollbarWidth;
-
-            return scrollbarWidth;
-        }
-    }
-
-    static getBrowser() {
-        if(!this.browser) {
-            let matched = this.resolveUserAgent();
-            this.browser = {};
-
-            if (matched.browser) {
-                this.browser[matched.browser] = true;
-                this.browser['version'] = matched.version;
-            }
-
-            if (this.browser['chrome']) {
-                this.browser['webkit'] = true;
-            } else if (this.browser['webkit']) {
-                this.browser['safari'] = true;
-            }
-        }
-
-        return this.browser;
-    }
-
-    static resolveUserAgent() {
-        let ua = navigator.userAgent.toLowerCase();
-        let match = /(chrome)[ ]([\w.]+)/.exec(ua) ||
-            /(webkit)[ ]([\w.]+)/.exec(ua) ||
-            /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) ||
-            /(msie) ([\w.]+)/.exec(ua) ||
-            (ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua)) ||
-            [];
-
-        return {
-            browser: match[1] || "",
-            version: match[2] || "0"
-        };
-    }
-
-    static isVisible(element) {
-        return element && element.offsetParent != null;
-    }
-
-    static getFocusableElements(element) {
-        let focusableElements = DomHandler.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
-                [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
-                input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
-                textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), 
-                [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])`
-        );
-
-        let visibleFocusableElements = [];
-        for (let focusableElement of focusableElements) {
-            if (getComputedStyle(focusableElement).display !== "none" && getComputedStyle(focusableElement).visibility !== "hidden")
-                visibleFocusableElements.push(focusableElement);
-        }
-
-        return visibleFocusableElements;
-    }
-}
diff --git a/src/components/utils/FilterUtils.js b/src/components/utils/FilterUtils.js
deleted file mode 100644
index bc1e7e36f6..0000000000
--- a/src/components/utils/FilterUtils.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import ObjectUtils from './ObjectUtils';
-
-export default class FilterUtils {
-
-    static filter(value, fields, filterValue, filterMatchMode, filterLocale) {
-        let filteredItems  = [];
-        let filterText = ObjectUtils.removeAccents(filterValue).toLocaleLowerCase(filterLocale);
-
-        if (value) {
-            for (let item of value) {
-                for (let field of fields) {
-                    let fieldValue = ObjectUtils.removeAccents(String(ObjectUtils.resolveFieldData(item, field))).toLocaleLowerCase(filterLocale);
-
-                    if (FilterUtils[filterMatchMode](fieldValue,filterText, filterLocale)) {
-                        filteredItems.push(item);
-                        break;
-                    }
-                }
-            }
-        }
-
-        return filteredItems;
-    }
-
-    static startsWith(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || filter.trim() === '') {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-        let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
-
-        return stringValue.slice(0, filterValue.length) === filterValue;
-    }
-
-    static contains(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-        let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
-
-        return stringValue.indexOf(filterValue) !== -1;
-    }
-
-    static endsWith(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || filter.trim() === '') {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        let filterValue = ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-        let stringValue = ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale);
-
-        return stringValue.indexOf(filterValue, stringValue.length - filterValue.length) !== -1;
-    }
-
-    static equals(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        if (value.getTime && filter.getTime)
-            return value.getTime() === filter.getTime();
-        else
-            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) === ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-    }
-
-    static notEquals(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
-            return false;
-        }
-
-        if (value === undefined || value === null) {
-            return true;
-        }
-
-        if (value.getTime && filter.getTime)
-            return value.getTime() !== filter.getTime();
-        else
-            return ObjectUtils.removeAccents(value.toString()).toLocaleLowerCase(filterLocale) !== ObjectUtils.removeAccents(filter.toString()).toLocaleLowerCase(filterLocale);
-    }
-
-    static in(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || filter.length === 0) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        for (let i = 0; i < filter.length; i++) {
-            if (ObjectUtils.equals(value, filter[i])) {
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    static lt(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        if (value.getTime && filter.getTime)
-            return value.getTime() < filter.getTime();
-        else
-            return value < parseFloat(filter);
-    }
-
-    static lte(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        if (value.getTime && filter.getTime)
-            return value.getTime() <= filter.getTime();
-        else
-            return value <= parseFloat(filter);
-    }
-
-    static gt(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        if (value.getTime && filter.getTime)
-            return value.getTime() > filter.getTime();
-        else
-            return value > parseFloat(filter);
-    }
-
-    static gte(value, filter, filterLocale) {
-        if (filter === undefined || filter === null || (filter.trim && filter.trim().length === 0)) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        if (value.getTime && filter.getTime)
-            return value.getTime() >= filter.getTime();
-        else
-            return value >= parseFloat(filter);
-    }
-
-}
diff --git a/src/components/utils/ObjectUtils.js b/src/components/utils/ObjectUtils.js
deleted file mode 100644
index 0c47439521..0000000000
--- a/src/components/utils/ObjectUtils.js
+++ /dev/null
@@ -1,157 +0,0 @@
-export default class ObjectUtils {
-
-    static equals(obj1, obj2, field) {
-        if(field && obj1 && typeof obj1 === 'object' && obj2 && typeof obj2 === 'object')
-            return (this.resolveFieldData(obj1, field) === this.resolveFieldData(obj2, field));
-        else
-            return this.deepEquals(obj1, obj2);
-    }
-
-    static deepEquals(a, b) {
-        if (a === b) return true;
-
-        if (a && b && typeof a == 'object' && typeof b == 'object') {
-            var arrA = Array.isArray(a)
-                , arrB = Array.isArray(b)
-                , i
-                , length
-                , key;
-
-            if (arrA && arrB) {
-                length = a.length;
-                if (length !== b.length) return false;
-                for (i = length; i-- !== 0;)
-                    if (!this.deepEquals(a[i], b[i])) return false;
-                return true;
-            }
-
-            if (arrA !== arrB) return false;
-
-            var dateA = a instanceof Date
-                , dateB = b instanceof Date;
-            if (dateA !== dateB) return false;
-            if (dateA && dateB) return a.getTime() === b.getTime();
-
-            var regexpA = a instanceof RegExp
-                , regexpB = b instanceof RegExp;
-            if (regexpA !== regexpB) return false;
-            if (regexpA && regexpB) return a.toString() === b.toString();
-
-            var keys = Object.keys(a);
-            length = keys.length;
-
-            if (length !== Object.keys(b).length)
-                return false;
-
-            for (i = length; i-- !== 0;)
-                if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-
-            for (i = length; i-- !== 0;) {
-                key = keys[i];
-                if (!this.deepEquals(a[key], b[key])) return false;
-            }
-
-            return true;
-        }
-
-        /*eslint no-self-compare: "off"*/
-        return a !== a && b !== b;
-    }
-
-    static resolveFieldData(data, field) {
-        if(data && field) {
-            if (this.isFunction(field)) {
-                return field(data);
-            }
-            else if(field.indexOf('.') === -1) {
-                return data[field];
-            }
-            else {
-                let fields = field.split('.');
-                let value = data;
-                for(var i = 0, len = fields.length; i < len; ++i) {
-                    if (value == null) {
-                        return null;
-                    }
-                    value = value[fields[i]];
-                }
-                return value;
-            }
-        }
-        else {
-            return null;
-        }
-    }
-
-    static isFunction(obj) {
-        return !!(obj && obj.constructor && obj.call && obj.apply);
-    }
-
-    static findDiffKeys(obj1, obj2) {
-        if (!obj1 || !obj2) {
-            return {};
-        }
-
-        return Object.keys(obj1).filter(key => !obj2.hasOwnProperty(key)).reduce((result, current) => {
-            result[current] = obj1[current];
-            return result;
-        }, {});
-    }
-
-    static reorderArray(value, from, to) {
-        let target;
-        if(value && (from !== to)) {
-            if(to >= value.length) {
-                target = to - value.length;
-                while((target--) + 1) {
-                    value.push(undefined);
-                }
-            }
-            value.splice(to, 0, value.splice(from, 1)[0]);
-        }
-    }
-
-    static findIndexInList(value, list) {
-        let index = -1;
-
-        if(list) {
-            for(let i = 0; i < list.length; i++) {
-                if(list[i] === value) {
-                    index = i;
-                    break;
-                }
-            }
-        }
-
-        return index;
-    }
-
-    static removeAccents(str) {
-        if (str && str.search(/[\xC0-\xFF]/g) > -1) {
-            str = str
-                    .replace(/[\xC0-\xC5]/g, "A")
-                    .replace(/[\xC6]/g, "AE")
-                    .replace(/[\xC7]/g, "C")
-                    .replace(/[\xC8-\xCB]/g, "E")
-                    .replace(/[\xCC-\xCF]/g, "I")
-                    .replace(/[\xD0]/g, "D")
-                    .replace(/[\xD1]/g, "N")
-                    .replace(/[\xD2-\xD6\xD8]/g, "O")
-                    .replace(/[\xD9-\xDC]/g, "U")
-                    .replace(/[\xDD]/g, "Y")
-                    .replace(/[\xDE]/g, "P")
-                    .replace(/[\xE0-\xE5]/g, "a")
-                    .replace(/[\xE6]/g, "ae")
-                    .replace(/[\xE7]/g, "c")
-                    .replace(/[\xE8-\xEB]/g, "e")
-                    .replace(/[\xEC-\xEF]/g, "i")
-                    .replace(/[\xF1]/g, "n")
-                    .replace(/[\xF2-\xF6\xF8]/g, "o")
-                    .replace(/[\xF9-\xFC]/g, "u")
-                    .replace(/[\xFE]/g, "p")
-                    .replace(/[\xFD\xFF]/g, "y");
-        }
-
-        return str;
-    }
-}
diff --git a/src/components/utils/UniqueComponentId.js b/src/components/utils/UniqueComponentId.js
deleted file mode 100644
index 88d86f507a..0000000000
--- a/src/components/utils/UniqueComponentId.js
+++ /dev/null
@@ -1,6 +0,0 @@
-var lastId = 0;
-
-export default function (prefix = 'pr_id_') {
-    lastId++;
-    return `${prefix}${lastId}`;
-}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 24d9e05733..0000000000
--- a/src/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import 'react-app-polyfill/ie9';
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-import ScrollToTop from './showcase/scrolltotop/ScrollToTop';
-import { HashRouter } from 'react-router-dom';
-
-ReactDOM.render(
-    <HashRouter>
-        <ScrollToTop>
-            <App></App>
-        </ScrollToTop>
-    </HashRouter>,
-    document.getElementById('root')
-);
\ No newline at end of file
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 6b60c1042f..0000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>
diff --git a/src/resources/images/flags_responsive.png b/src/resources/images/flags_responsive.png
deleted file mode 100755
index e93d295be0..0000000000
Binary files a/src/resources/images/flags_responsive.png and /dev/null differ
diff --git a/src/resources/images/news/bg-endofyear-2019.jpg b/src/resources/images/news/bg-endofyear-2019.jpg
deleted file mode 100644
index f8ed57b928..0000000000
Binary files a/src/resources/images/news/bg-endofyear-2019.jpg and /dev/null differ
diff --git a/src/resources/images/news/snow.png b/src/resources/images/news/snow.png
deleted file mode 100644
index b91dc3fe8a..0000000000
Binary files a/src/resources/images/news/snow.png and /dev/null differ
diff --git a/src/resources/images/news/topbar-easter-2020-bg.jpg b/src/resources/images/news/topbar-easter-2020-bg.jpg
deleted file mode 100644
index e7e169614d..0000000000
Binary files a/src/resources/images/news/topbar-easter-2020-bg.jpg and /dev/null differ
diff --git a/src/resources/images/news/topbar-easter-2020-text.png b/src/resources/images/news/topbar-easter-2020-text.png
deleted file mode 100644
index 54a0496ec3..0000000000
Binary files a/src/resources/images/news/topbar-easter-2020-text.png and /dev/null differ
diff --git a/src/resources/images/news/topbar-easter-2020-ultima.png b/src/resources/images/news/topbar-easter-2020-ultima.png
deleted file mode 100644
index f4a5a54803..0000000000
Binary files a/src/resources/images/news/topbar-easter-2020-ultima.png and /dev/null differ
diff --git a/src/resources/images/primereact-slider-bg.jpg b/src/resources/images/primereact-slider-bg.jpg
deleted file mode 100644
index 73a7ba6ebe..0000000000
Binary files a/src/resources/images/primereact-slider-bg.jpg and /dev/null differ
diff --git a/src/resources/style/flags.css b/src/resources/style/flags.css
deleted file mode 100755
index a95236b8ab..0000000000
--- a/src/resources/style/flags.css
+++ /dev/null
@@ -1 +0,0 @@
-span.flag{width:44px;height:30px;display:inline-block;}img.flag{width:30px}.flag{background:url(http://github.com/images/flags_responsive.png) no-repeat;background-size:100%;vertical-align: middle;}.flag-ad{background-position:0 .413223%}.flag-ae{background-position:0 .826446%}.flag-af{background-position:0 1.239669%}.flag-ag{background-position:0 1.652893%}.flag-ai{background-position:0 2.066116%}.flag-al{background-position:0 2.479339%}.flag-am{background-position:0 2.892562%}.flag-an{background-position:0 3.305785%}.flag-ao{background-position:0 3.719008%}.flag-aq{background-position:0 4.132231%}.flag-ar{background-position:0 4.545455%}.flag-as{background-position:0 4.958678%}.flag-at{background-position:0 5.371901%}.flag-au{background-position:0 5.785124%}.flag-aw{background-position:0 6.198347%}.flag-az{background-position:0 6.61157%}.flag-ba{background-position:0 7.024793%}.flag-bb{background-position:0 7.438017%}.flag-bd{background-position:0 7.85124%}.flag-be{background-position:0 8.264463%}.flag-bf{background-position:0 8.677686%}.flag-bg{background-position:0 9.090909%}.flag-bh{background-position:0 9.504132%}.flag-bi{background-position:0 9.917355%}.flag-bj{background-position:0 10.330579%}.flag-bm{background-position:0 10.743802%}.flag-bn{background-position:0 11.157025%}.flag-bo{background-position:0 11.570248%}.flag-br{background-position:0 11.983471%}.flag-bs{background-position:0 12.396694%}.flag-bt{background-position:0 12.809917%}.flag-bv{background-position:0 13.22314%}.flag-bw{background-position:0 13.636364%}.flag-by{background-position:0 14.049587%}.flag-bz{background-position:0 14.46281%}.flag-ca{background-position:0 14.876033%}.flag-cc{background-position:0 15.289256%}.flag-cd{background-position:0 15.702479%}.flag-cf{background-position:0 16.115702%}.flag-cg{background-position:0 16.528926%}.flag-ch{background-position:0 16.942149%}.flag-ci{background-position:0 17.355372%}.flag-ck{background-position:0 17.768595%}.flag-cl{background-position:0 18.181818%}.flag-cm{background-position:0 18.595041%}.flag-cn{background-position:0 19.008264%}.flag-co{background-position:0 19.421488%}.flag-cr{background-position:0 19.834711%}.flag-cu{background-position:0 20.247934%}.flag-cv{background-position:0 20.661157%}.flag-cx{background-position:0 21.07438%}.flag-cy{background-position:0 21.487603%}.flag-cz{background-position:0 21.900826%}.flag-de{background-position:0 22.31405%}.flag-dj{background-position:0 22.727273%}.flag-dk{background-position:0 23.140496%}.flag-dm{background-position:0 23.553719%}.flag-do{background-position:0 23.966942%}.flag-dz{background-position:0 24.380165%}.flag-ec{background-position:0 24.793388%}.flag-ee{background-position:0 25.206612%}.flag-eg{background-position:0 25.619835%}.flag-eh{background-position:0 26.033058%}.flag-er{background-position:0 26.446281%}.flag-es{background-position:0 26.859504%}.flag-et{background-position:0 27.272727%}.flag-fi{background-position:0 27.68595%}.flag-fj{background-position:0 28.099174%}.flag-fk{background-position:0 28.512397%}.flag-fm{background-position:0 28.92562%}.flag-fo{background-position:0 29.338843%}.flag-fr{background-position:0 29.752066%}.flag-ga{background-position:0 30.165289%}.flag-gd{background-position:0 30.578512%}.flag-ge{background-position:0 30.991736%}.flag-gf{background-position:0 31.404959%}.flag-gh{background-position:0 31.818182%}.flag-gi{background-position:0 32.231405%}.flag-gl{background-position:0 32.644628%}.flag-gm{background-position:0 33.057851%}.flag-gn{background-position:0 33.471074%}.flag-gp{background-position:0 33.884298%}.flag-gq{background-position:0 34.297521%}.flag-gr{background-position:0 34.710744%}.flag-gs{background-position:0 35.123967%}.flag-gt{background-position:0 35.53719%}.flag-gu{background-position:0 35.950413%}.flag-gw{background-position:0 36.363636%}.flag-gy{background-position:0 36.77686%}.flag-hk{background-position:0 37.190083%}.flag-hm{background-position:0 37.603306%}.flag-hn{background-position:0 38.016529%}.flag-hr{background-position:0 38.429752%}.flag-ht{background-position:0 38.842975%}.flag-hu{background-position:0 39.256198%}.flag-id{background-position:0 39.669421%}.flag-ie{background-position:0 40.082645%}.flag-il{background-position:0 40.495868%}.flag-in{background-position:0 40.909091%}.flag-io{background-position:0 41.322314%}.flag-iq{background-position:0 41.735537%}.flag-ir{background-position:0 42.14876%}.flag-is{background-position:0 42.561983%}.flag-it{background-position:0 42.975207%}.flag-jm{background-position:0 43.38843%}.flag-jo{background-position:0 43.801653%}.flag-jp{background-position:0 44.214876%}.flag-ke{background-position:0 44.628099%}.flag-kg{background-position:0 45.041322%}.flag-kh{background-position:0 45.454545%}.flag-ki{background-position:0 45.867769%}.flag-km{background-position:0 46.280992%}.flag-kn{background-position:0 46.694215%}.flag-kp{background-position:0 47.107438%}.flag-kr{background-position:0 47.520661%}.flag-kw{background-position:0 47.933884%}.flag-ky{background-position:0 48.347107%}.flag-kz{background-position:0 48.760331%}.flag-la{background-position:0 49.173554%}.flag-lb{background-position:0 49.586777%}.flag-lc{background-position:0 50%}.flag-li{background-position:0 50.413223%}.flag-lk{background-position:0 50.826446%}.flag-lr{background-position:0 51.239669%}.flag-ls{background-position:0 51.652893%}.flag-lt{background-position:0 52.066116%}.flag-lu{background-position:0 52.479339%}.flag-lv{background-position:0 52.892562%}.flag-ly{background-position:0 53.305785%}.flag-ma{background-position:0 53.719008%}.flag-mc{background-position:0 54.132231%}.flag-md{background-position:0 54.545455%}.flag-me{background-position:0 54.958678%}.flag-mg{background-position:0 55.371901%}.flag-mh{background-position:0 55.785124%}.flag-mk{background-position:0 56.198347%}.flag-ml{background-position:0 56.61157%}.flag-mm{background-position:0 57.024793%}.flag-mn{background-position:0 57.438017%}.flag-mo{background-position:0 57.85124%}.flag-mp{background-position:0 58.264463%}.flag-mq{background-position:0 58.677686%}.flag-mr{background-position:0 59.090909%}.flag-ms{background-position:0 59.504132%}.flag-mt{background-position:0 59.917355%}.flag-mu{background-position:0 60.330579%}.flag-mv{background-position:0 60.743802%}.flag-mw{background-position:0 61.157025%}.flag-mx{background-position:0 61.570248%}.flag-my{background-position:0 61.983471%}.flag-mz{background-position:0 62.396694%}.flag-na{background-position:0 62.809917%}.flag-nc{background-position:0 63.22314%}.flag-ne{background-position:0 63.636364%}.flag-nf{background-position:0 64.049587%}.flag-ng{background-position:0 64.46281%}.flag-ni{background-position:0 64.876033%}.flag-nl{background-position:0 65.289256%}.flag-no{background-position:0 65.702479%}.flag-np{background-position:0 66.115702%}.flag-nr{background-position:0 66.528926%}.flag-nu{background-position:0 66.942149%}.flag-nz{background-position:0 67.355372%}.flag-om{background-position:0 67.768595%}.flag-pa{background-position:0 68.181818%}.flag-pe{background-position:0 68.595041%}.flag-pf{background-position:0 69.008264%}.flag-pg{background-position:0 69.421488%}.flag-ph{background-position:0 69.834711%}.flag-pk{background-position:0 70.247934%}.flag-pl{background-position:0 70.661157%}.flag-pm{background-position:0 71.07438%}.flag-pn{background-position:0 71.487603%}.flag-pr{background-position:0 71.900826%}.flag-pt{background-position:0 72.31405%}.flag-pw{background-position:0 72.727273%}.flag-py{background-position:0 73.140496%}.flag-qa{background-position:0 73.553719%}.flag-re{background-position:0 73.966942%}.flag-ro{background-position:0 74.380165%}.flag-rs{background-position:0 74.793388%}.flag-ru{background-position:0 75.206612%}.flag-rw{background-position:0 75.619835%}.flag-sa{background-position:0 76.033058%}.flag-sb{background-position:0 76.446281%}.flag-sc{background-position:0 76.859504%}.flag-sd{background-position:0 77.272727%}.flag-se{background-position:0 77.68595%}.flag-sg{background-position:0 78.099174%}.flag-sh{background-position:0 78.512397%}.flag-si{background-position:0 78.92562%}.flag-sj{background-position:0 79.338843%}.flag-sk{background-position:0 79.752066%}.flag-sl{background-position:0 80.165289%}.flag-sm{background-position:0 80.578512%}.flag-sn{background-position:0 80.991736%}.flag-so{background-position:0 81.404959%}.flag-sr{background-position:0 81.818182%}.flag-ss{background-position:0 82.231405%}.flag-st{background-position:0 82.644628%}.flag-sv{background-position:0 83.057851%}.flag-sy{background-position:0 83.471074%}.flag-sz{background-position:0 83.884298%}.flag-tc{background-position:0 84.297521%}.flag-td{background-position:0 84.710744%}.flag-tf{background-position:0 85.123967%}.flag-tg{background-position:0 85.53719%}.flag-th{background-position:0 85.950413%}.flag-tj{background-position:0 86.363636%}.flag-tk{background-position:0 86.77686%}.flag-tl{background-position:0 87.190083%}.flag-tm{background-position:0 87.603306%}.flag-tn{background-position:0 88.016529%}.flag-to{background-position:0 88.429752%}.flag-tp{background-position:0 88.842975%}.flag-tr{background-position:0 89.256198%}.flag-tt{background-position:0 89.669421%}.flag-tv{background-position:0 90.082645%}.flag-tw{background-position:0 90.495868%}.flag-ty{background-position:0 90.909091%}.flag-tz{background-position:0 91.322314%}.flag-ua{background-position:0 91.735537%}.flag-ug{background-position:0 92.14876%}.flag-gb,.flag-uk{background-position:0 92.561983%}.flag-um{background-position:0 92.975207%}.flag-us{background-position:0 93.38843%}.flag-uy{background-position:0 93.801653%}.flag-uz{background-position:0 94.214876%}.flag-va{background-position:0 94.628099%}.flag-vc{background-position:0 95.041322%}.flag-ve{background-position:0 95.454545%}.flag-vg{background-position:0 95.867769%}.flag-vi{background-position:0 96.280992%}.flag-vn{background-position:0 96.694215%}.flag-vu{background-position:0 97.107438%}.flag-wf{background-position:0 97.520661%}.flag-ws{background-position:0 97.933884%}.flag-ye{background-position:0 98.347107%}.flag-za{background-position:0 98.760331%}.flag-zm{background-position:0 99.173554%}.flag-zr{background-position:0 99.586777%}.flag-zw{background-position:0 100%}
\ No newline at end of file
diff --git a/src/resources/style/primereact.css b/src/resources/style/primereact.css
deleted file mode 100644
index fb0fb9f22b..0000000000
--- a/src/resources/style/primereact.css
+++ /dev/null
@@ -1,64 +0,0 @@
-@import 'http://github.com/components/common/Common.css';
-@import 'http://github.com/components/accordion/Accordion.css';
-@import 'http://github.com/components/autocomplete/AutoComplete.css';
-@import 'http://github.com/components/breadcrumb/BreadCrumb.css';
-@import 'http://github.com/components/button/Button.css';
-@import 'http://github.com/components/calendar/Calendar.css';
-@import 'http://github.com/components/carousel/Carousel.css';
-@import 'http://github.com/components/galleria/Galleria.css';
-@import 'http://github.com/components/card/Card.css';
-@import 'http://github.com/components/checkbox/Checkbox.css';
-@import 'http://github.com/components/chips/Chips.css';
-@import 'http://github.com/components/colorpicker/ColorPicker.css';
-@import 'http://github.com/components/contextmenu/ContextMenu.css';
-@import 'http://github.com/components/datascroller/DataScroller.css';
-@import 'http://github.com/components/datatable/DataTable.css';
-@import 'http://github.com/components/dataview/DataView.css';
-@import 'http://github.com/components/dialog/Dialog.css';
-@import 'http://github.com/components/dropdown/Dropdown.css';
-@import 'http://github.com/components/fieldset/Fieldset.css';
-@import 'http://github.com/components/fileupload/FileUpload.css';
-@import 'http://github.com/components/fullcalendar/FullCalendar.css';
-@import 'http://github.com/components/growl/Growl.css';
-@import 'http://github.com/components/inplace/Inplace.css';
-@import 'http://github.com/components/inputnumber/InputNumber.css';
-@import 'http://github.com/components/inputswitch/InputSwitch.css';
-@import 'http://github.com/components/inputtext/InputText.css';
-@import 'http://github.com/components/inputtextarea/InputTextarea.css';
-@import 'http://github.com/components/inplace/Inplace.css';
-@import 'http://github.com/components/lightbox/Lightbox.css';
-@import 'http://github.com/components/listbox/ListBox.css';
-@import 'http://github.com/components/menu/Menu.css';
-@import 'http://github.com/components/megamenu/MegaMenu.css';
-@import 'http://github.com/components/menubar/Menubar.css';
-@import 'http://github.com/components/message/Message.css';
-@import 'http://github.com/components/messages/Messages.css';
-@import 'http://github.com/components/multiselect/MultiSelect.css';
-@import 'http://github.com/components/orderlist/OrderList.css';
-@import 'http://github.com/components/organizationchart/OrganizationChart.css';
-@import 'http://github.com/components/overlaypanel/OverlayPanel.css';
-@import 'http://github.com/components/paginator/Paginator.css';
-@import 'http://github.com/components/panel/Panel.css';
-@import 'http://github.com/components/panelmenu/PanelMenu.css';
-@import 'http://github.com/components/password/Password.css';
-@import 'http://github.com/components/picklist/PickList.css';
-@import 'http://github.com/components/progressbar/ProgressBar.css';
-@import 'http://github.com/components/progressspinner/ProgressSpinner.css';
-@import 'http://github.com/components/radiobutton/RadioButton.css';
-@import 'http://github.com/components/rating/Rating.css';
-@import 'http://github.com/components/scrollpanel/ScrollPanel.css';
-@import 'http://github.com/components/selectbutton/SelectButton.css';
-@import 'http://github.com/components/sidebar/Sidebar.css';
-@import 'http://github.com/components/slidemenu/SlideMenu.css';
-@import 'http://github.com/components/slider/Slider.css';
-@import 'http://github.com/components/spinner/Spinner.css';
-@import 'http://github.com/components/splitbutton/SplitButton.css';
-@import 'http://github.com/components/steps/Steps.css';
-@import 'http://github.com/components/tabmenu/TabMenu.css';
-@import 'http://github.com/components/tabview/TabView.css';
-/*@import 'http://github.com/components/terminal/Terminal.css';*/
-@import 'http://github.com/components/tieredmenu/TieredMenu.css';
-@import 'http://github.com/components/toolbar/Toolbar.css';
-@import 'http://github.com/components/tooltip/Tooltip.css';
-@import 'http://github.com/components/tree/Tree.css';
-@import 'http://github.com/components/treetable/TreeTable.css';
diff --git a/src/sass/App.scss b/src/sass/App.scss
deleted file mode 100644
index 014482c8b7..0000000000
--- a/src/sass/App.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@charset "UTF-8";
-
-/* includes body style, variables and layout styles(news, topbar, sidebar, content, footer, config) */
-@import "http://github.com/layout/_layout";
-
-/* Home Page */
-
-
-/* Demo */
\ No newline at end of file
diff --git a/src/sass/layout/_changelog.scss b/src/sass/layout/_changelog.scss
deleted file mode 100644
index 19c0e6ce60..0000000000
--- a/src/sass/layout/_changelog.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-body {
-    .layout-changelog-button {
-        padding: 1em;
-        font-weight: 700;
-        border-radius: 3px;
-        margin-top: 8px;
-        background-color: rgba(255,255,255,0.16);
-        color: white;
-        border: 0 none;
-        letter-spacing: 0.2px;
-        cursor: pointer;
-        @include transition(background-color .2s);
-
-        &:hover {
-            background-color: rgba(255,255,255,0.32);
-            box-shadow: 0 3px 10px rgba(255,255,255,0.1);
-        }
-
-        &:focus {
-            z-index: 1;
-            outline: 0 none;
-            @include transition(box-shadow .3s);
-            @include shadow(0 0 0 0.2em #00c4e8);
-        }
-    }
-
-    .layout-changelog-dialog {
-        &.p-dialog {
-            .p-dialog-titlebar {
-                .p-dialog-title {
-                    text-transform: capitalize;
-                }
-            }
-
-            .p-dialog-content {
-                padding-top: 14px;
-
-                .layout-changelog-current-header {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-
-                    > span {
-                        display: flex;
-                        align-items: center;
-
-                        .layout-changelog-version {
-                            font-size: 1.17em;
-                            font-weight: bold;
-                        }
-
-                        .layout-changelog-badge {
-                            padding: 2px 4px;
-                            border-radius: 3px;
-                            color: #ffffff;
-                            font-weight: 700;
-                            font-size: 11px;
-                            margin-left: 8px;
-                            background-color: #484848;
-                            letter-spacing: 0.2px;
-                        }
-                    }
-
-                    .layout-changelog-full {
-                        display: flex;
-                        align-items: center;
-                        padding-right: 8px;
-                        font-weight: 700;
-                    }
-                }
-
-                .layout-changelog-container {
-                    list-style-type: none;
-                    padding: 0;
-                    margin: 14px 0 0;
-
-                    > li {
-                        border: 1px solid #cdced2;
-                        border-bottom: 0;
-                        padding: 8px 50px 8px 8px;
-                        position: relative;
-
-                        &:first-child {
-                            border-top-left-radius: 2px;
-                            border-top-right-radius: 2px;
-                        }
-
-                        &:last-child {
-                            border-bottom: 1px solid #cdced2;
-                            border-bottom-left-radius: 2px;
-                            border-bottom-right-radius: 2px;
-                        }
-
-                        .layout-changelog-issue-no {
-                            position: absolute;
-                            width: 50px;
-                            height: 100%;
-                            padding-right: 8px;
-                            top: 0;
-                            right: 0;
-                            display: flex;
-                            align-items: center;
-                            justify-content: flex-end;
-                            font-weight: 700;
-                        }
-                    }
-                }
-
-                .layout-changelog-actions {
-                    display: flex;
-                    justify-content: space-between;
-                    margin-top: 30px;
-
-                    button {
-                        font-weight: 700;
-
-                        .pi {
-                            font-size: 1em;
-                            margin-top: -.46em;
-                            height: .75em;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/sass/layout/_config.scss b/src/sass/layout/_config.scss
deleted file mode 100644
index 2ba749d67f..0000000000
--- a/src/sass/layout/_config.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-.layout-wrapper {
-    .layout-config {
-        position: fixed;
-        padding: 0;
-        top: 70px;
-        display: block;
-        right: 0;
-        width: 550px;
-        z-index: 996;
-        height: calc(100% - 70px);
-        @include transition(transform .3s);
-        transform: translate3d(550px,0,0);
-        background-color: #ffffff;
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
-
-        .layout-config-content-wrapper {
-            position: relative;
-            height: 100%;
-            padding: 0;
-            @include shadow(0 2px 10px 0 rgba(0, 0, 0, 0.24));
-
-            .layout-config-button {
-                display: block;
-                position: absolute;
-                width: 52px;
-                height: 52px;
-                line-height: 52px;
-                background-color: #fe8702;
-                text-align: center;
-                color: #ffffff;
-                top: 200px;
-                left: -51px;
-                z-index: -1;
-                overflow: hidden;
-                cursor: pointer;
-                @include border-radius-left(3px);
-                @include transition(background-color .2s, box-shadow .2s);
-                box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
-                            0 5px 22px 4px rgba(0, 0, 0, 0.12),
-                            0 12px 17px 2px rgba(0, 0, 0, 0.14);
-
-                i {
-                    font-size: 42px;
-                    line-height: inherit;
-                    cursor: pointer;
-                    @include rotate(0deg);
-                    @include transition(transform 1s);
-                }
-
-                &:hover {
-                    background-color: #C56A05;
-                }
-            }
-        }
-
-        a {
-            color: #03c4e8;
-            font-weight: 700;
-            @include transition(color .2s);
-
-            &:hover {
-                color: darken(#03c4e8, 10%);
-            }
-        }
-
-        .layout-config-content {
-            overflow: auto;
-            height: 100%;
-            background-color: #ffffff;
-        }
-
-        .layout-config-close {
-            position: absolute;
-            width: 25px;
-            height: 25px;
-            line-height: 25px;
-            text-align: center;
-            right: 20px;
-            top: 20px;
-            z-index: 999;
-            background-color: #20272b;
-            @include border-radius(50%);
-            @include transition(background-color .2s, box-shadow .2s);
-
-            i {
-                color: #ffffff;
-                line-height: inherit;
-                font-size: 16px;
-            }
-
-            &:hover {
-                background-color: lighten(#20272b, 15%);
-            }
-
-            @include focus();
-        }
-
-        h1 {
-            font-size: 18px;
-            letter-spacing: .1px;
-            margin: 0 0 .5em 0;
-        }
-
-        .p-grid > div {
-            padding: 1em;
-            text-align: center;
-
-            span {
-                display: block;
-            }
-        }
-
-        p {
-            margin: 0 0 2em 0;
-        }
-
-        .free-themes {
-            padding: 2em;
-            color: #484848;
-            background-color: #ffffff;
-
-            p {
-                color: #727272;
-            }
-
-            button {
-                text-align: center;
-                position: relative;
-                @include transition(box-shadow .2s);
-                overflow: visible;
-
-                i {
-                    line-height: inherit;
-                    font-size: 28px;
-                    color: #03c4e8;
-                    position: absolute;
-                    top: 0;
-                    left: 50%;
-                    margin-left: -18px;
-                    margin-top: -18px;
-                    padding: .18em;
-                    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
-                    background-color: #ffffff;
-                    border-radius: 50%;
-                    width: 36px;
-                    height: 36px;
-                }
-
-                @include focus();
-            }
-        }
-
-        img {
-            width: 100%;
-        }
-
-        .premium-themes {
-            padding: 2em;
-            background-color: #2c3135;
-            color: #ffffff;
-
-            p {
-                color: #d8d8d8;
-            }
-        }
-    }
-
-    &.layout-config-active {
-        .layout-config {
-            transform: translate3d(0,0,0);
-
-            .layout-config-content-wrapper {
-                .layout-config-button {
-                    i {
-                        @include rotate(360deg);
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: $tabletBreakpoint) {
-        .layout-config {
-            top: 110px;
-            height: calc(100% - 110px);
-            transform: translate3d(100%,0,0);
-
-            .layout-config-button {
-                left: auto;
-                right: -52px;
-            }
-        }
-
-        &.layout-config-active {
-            .layout-config {
-                width: 100%;
-                transform: translate3d(0,0,0);
-            }
-        }
-    }
-}
diff --git a/src/sass/layout/_content.scss b/src/sass/layout/_content.scss
deleted file mode 100644
index 85313630e0..0000000000
--- a/src/sass/layout/_content.scss
+++ /dev/null
@@ -1,1217 +0,0 @@
-.layout-wrapper {
-    .layout-content {
-        margin-left: 300px;
-        padding-top: 70px;
-
-        .link-button {
-            font-weight: bold;
-            text-align: center;
-            color: #ffffff;
-            background-color: #fe8702;
-            padding: 10px 24px 9px 24px;
-            border-radius: 3px;
-            @include transition(background-color .2s);
-
-            &:hover {
-                background-color: #C56A05;
-                color: #ffffff;
-            }
-        }
-
-        .link-button2 {
-            font-weight: bold;
-            text-align: center;
-            color: #8C6816 !important;;
-            background-color: #FFCB54;
-            padding: 10px 24px 9px 24px;
-            border-radius: 3px;
-            @include transition(background-color .2s);
-            display: inline-block;
-
-            &:hover {
-                background-color: #E5AF36;
-                color: #8C6816 !important;
-            }
-        }
-
-        .content-section {
-            display: block;
-            padding: 30px;
-            background-color: #f5f7f8;
-
-            &:first-of-type > div > span {
-                line-height: 1.5em;
-            }
-
-            h2 {
-                margin-top: 0;
-            }
-
-            &.introduction {
-                @include background-gradient-left2right(#008fba, #03c4e8);
-                color: #ffffff;
-
-                .feature-intro {
-                    h1 {
-                        font-size: 28px;
-                        margin: 0 0 20px 0;
-                        display: block;
-                        text-align: left;
-                        color: #ffffff;
-                        font-weight: normal;
-                    }
-
-                    p {
-                        margin: 0;
-                        line-height: 2em;
-                        font-size: 16px;
-                    }
-
-                    a {
-                        border-radius: 3px;
-                        background-color: #b2ddea;
-                        color: #00475d;
-                        padding: 2px 4px;
-                        @include transition(background-color .2s);
-
-                        &:hover {
-                            background-color: #d8eef4;
-                        }
-                    }
-                }
-            }
-
-            &.implementation {
-                background-color: #ffffff;
-
-                > hr {
-                    margin-top: 24px;
-                    opacity: .3;
-                }
-
-                > h3 {
-                    font-weight: 400;
-                    margin-top: 30px;
-                    font-size: 18px;
-
-                    &:first-child {
-                        margin-top: 0px;
-                    }
-                }
-
-                h2 {
-                    font-weight: 400;
-                }
-
-                .p-col-12 > h3 {
-                    font-weight: 400;
-                    margin-top: 30px;
-                    font-size: 18px;
-                }
-
-                h3.first {
-                    margin-top: 0px;
-                }
-
-                &.implementation-charts {
-                    background-color: #FFFFFF;
-                }
-
-                p {
-                    margin: 0;
-                    line-height: 1.5;
-                }
-            }
-
-            &.content-submenu {
-                background-color: #20272a;
-                padding: 15px 30px;
-                border-bottom: 1px solid #1b81d7;
-                @include clearfix();
-
-                ul {
-                    margin: 0;
-                    padding: 0;
-                    width: 100%;
-
-                    li {
-                        list-style: none;
-                        width: 20%;
-                        display: inline-block;
-                        margin-top: 5px;
-
-                        a {
-                            color: #cac6c6;
-                            display: block;
-                            width: 90%;
-                            border: 1px solid transparent;
-                            padding: 6px 12px;
-                            border-radius: 3px;
-                            @include transition(border-color .1s);
-
-                            &:hover {
-                                border: 1px solid #ffffff;
-                                color: #ffffff;
-                            }
-
-                            &:focus {
-                                outline: 0 none;
-                                transition: box-shadow .3s;
-                                box-shadow: 0 0 0 0.2em #00c4e8;
-                            }
-                        }
-                    }
-                }
-            }
-
-            &.documentation {
-                h3 {
-                    color:  #333333;
-                    margin-top: 25px;
-                    margin-bottom: 0px;
-                    font-size: 22px;
-                    font-weight: normal;
-                }
-
-                h4 {
-                    text-align: center;
-                    font-weight: 700;
-                    font-size: 16px;
-                }
-
-                p {
-                    color:  #333333;
-                    line-height: 24px;
-                    margin: 10px 0;
-                }
-
-                .doc-tablewrapper {
-                    margin: 10px 0;
-                }
-
-                a {
-                    color: #2f4054;
-                    font-weight: bold;
-                }
-
-                .btn-viewsource {
-                    background-color: #444;
-                    padding: .5em;
-                    border-radius: 2px;
-                    color: #fff;
-                    font-weight: 700;
-                    margin: .5em 0;
-                    display: inline-block;
-                    @include transition(background-color .2s);
-
-                    &:hover {
-                        background-color: #595959;
-                    }
-
-                    i {
-                        margin-right: .25em;
-                        background-color: transparent;
-                        font-family: 'FontAwesome';
-                    }
-                }
-
-                i:not([class~="pi"]) {
-                    background-color: #fcf2a7;
-                    font-family: monaco, Consolas, Lucida Console, monospace;
-                    font-weight: bold;
-                    font-style: normal;
-                    font-size: 14px;
-                    padding: 2px;
-                }
-
-                /* Demo Tabs Source */
-                .p-tabview.p-tabview-top {
-                    background: none;
-                    border: 0 none;
-
-                    .p-tabview-nav {
-                        border-radius: 3px 3px 0 0;
-                        padding: 4px 4px 0px 4px;
-                        @include background-gradient-left2right(#008fba, #03c4e8);
-
-                        li {
-                            a {
-                                border: 0 none;
-                                margin-right: 4px;
-                                color: #ffffff;
-                                text-shadow: none;
-                                height: inherit;
-                                background-color: transparent;
-                                padding-top: 8px;
-                                @include border-radius-top(3px);
-                                @include transition(background-color .2s);
-                            }
-
-                            &.tab-doc {
-                                margin-right: 0;
-                            }
-
-                            &.p-highlight a {
-                                background: #f5f7f8;
-                                color: #333333;
-                            }
-
-                            &:not(.p-highlight) a:hover {
-                                background-color: #0080a7;
-                                color: #ffffff;
-                                border: 0 none;
-                            }
-
-                            &:hover {
-                                a {
-                                    border: 0 none;
-                                }
-                            }
-                        }
-                    }
-
-                    .p-tabview-panels {
-                        background: transparent;
-                        border: 0 none;
-                        color: #333333;
-                    }
-                }
-            }
-
-            &.support {
-                .support-image {
-                    background-color: #906C90;
-                    padding: 30px;
-                    color: #ffffff;
-                    text-align: left;
-
-                    .p-md-6:last-child {
-                        text-align: right;
-                    }
-
-                    h3, p {
-                        color: #ffffff;
-                    }
-                }
-
-                li {
-                    line-height: 1.5;
-                }
-            }
-
-            .doc-table {
-                border-collapse: collapse;
-                width: 100%;
-
-                th {
-                    background-color: #cce8f1;
-                    padding: 10px 14px;
-                    text-align: left;
-                    border: solid 1px #b7d0d8;
-                }
-
-                tbody{
-                    td {
-                        padding: 10px 14px;
-                        border: 1px solid #d4e1e3;
-                    }
-
-                    tr{
-                        &:nth-child(even) {
-                            background-color: #f3fbfc;
-                        }
-                        &:nth-child(odd) {
-                            background-color: #ffffff;
-                        }
-                    }
-                }
-            }
-        }
-
-        .layout-content-link {
-            color: #2f4054;
-            font-weight: bold;
-        }
-
-        /* Home Component */
-        .home {
-            p {
-                line-height: 22px;
-            }
-
-            /* Introduction */
-            .introduction {
-                background-color: #1976d2;
-                background: url('http://github.com/resources/images/primereact-slider-bg.jpg');
-                background-repeat: no-repeat;
-                background-size: cover;
-                color: #ffffff;
-                padding: 80px 30px 100px 50px;
-
-                h1 {
-                    font-weight: normal;
-                    margin-bottom: 5px;
-                    font-size: 24px;
-                }
-
-                h2 {
-                    font-weight: bold;
-                    margin-bottom: 40px;
-                    margin-top: 0;
-                    font-size: 24px;
-                }
-
-                > div {
-                    padding: 100px 100px 0 100px;
-                    height: 200px;
-                }
-            }
-
-            /* Features */
-            .features {
-                background-color: #f5f7f8;
-                text-align: center;
-                padding: 30px;
-
-                .feature-card {
-                    background-color: #ffffff;
-                    @include shadow(0 0.8px 1.7px rgba(0, 0, 0, 0.008), 0 1.9px 4.2px rgba(0, 0, 0, 0.012),0 3.6px 7.9px rgba(0, 0, 0, 0.015),0 6.5px 14.1px rgba(0, 0, 0, 0.018),0 12.1px 26.3px rgba(0, 0, 0, 0.022),0 29px 63px rgba(0, 0, 0, 0.03));
-                    height: 100%;
-                    border-radius: 4px;
-
-                    .feature-card-detail {
-                        padding: 0 16px 16px 16px;
-                    }
-                }
-
-                h3 {
-                    font-size:24px;
-                    color: #333333;
-                    margin-bottom: 25px;
-                }
-
-                .feature-name {
-                    display: block;
-                    font-weight: bold;
-                    font-size: 16px;
-                    margin-top: 1em;
-                    color: #20272a;
-                }
-
-                img {
-                    width: 100%;;
-                }
-
-                .p-g{
-                    p {
-                        color: #20272a;
-                        margin-bottom: 30px;
-                    }
-
-                    > div {
-                        padding: .5em 2em;
-                    }
-                }
-
-                p {
-                    margin-bottom: 30px;
-
-                    &.features-tagline {
-                        color: #333333;
-                        margin-bottom: 0;
-                        margin-top: -5px;
-                    }
-
-                    &.features-description {
-                        color: #333333;
-                        text-align: left;
-
-
-                    }
-
-                    > a {
-                        font-weight: bold;
-                    }
-                }
-            }
-
-            /* Who Uses */
-            .whouses {
-                background-color: #222222;
-                color: #ffffff;
-                text-align: center;
-                padding: 30px;
-
-                h3 {
-                    margin-bottom: 10px;
-                }
-
-                img {
-                    height: 30px;
-                    width: 100%;
-                }
-
-                .p-g > div {
-                    padding: 1em .5em;
-                }
-
-                p {
-                    margin-bottom: 30px;
-
-                    >a {
-                        font-weight: bold;
-                        color: #03c4e8;
-                    }
-                }
-            }
-
-            .templates {
-                background-color: #f5f7f8;
-                text-align: center;
-                padding: 30px;
-                border-bottom: 1px solid #c4c5c6;
-
-                h3 {
-                    font-size:24px;
-                    color: #333333;
-                    margin-bottom: 14px;
-                }
-
-                h4 {
-                    font-size: 16px;
-                    font-weight: 700;
-                }
-
-                img {
-                    width: 100%;
-                }
-
-                p {
-                    margin-bottom: 25px;
-                }
-            }
-
-            /* PRO */
-            .prosupport {
-                border-bottom: 1px solid #dcdedf;
-                background-color: #f5f7f8;
-                padding: 30px;
-                color: #222222;
-
-                p {
-                    line-height: 22px;
-                    margin-bottom: 1em;
-                }
-
-                h3 {
-                    font-size: 24px;
-                }
-
-                img {
-                    margin-top: 10px;
-                }
-
-                .p-md-6:last-child {
-                    text-align: center;
-                }
-            }
-
-            /* DESIGNER */
-            .primereact-designer {
-                background-color: #ffffff;
-                padding: 30px;
-                h3 {
-                    margin: 10px 0 20px 0;
-                    display: block;
-                    text-align: center;
-                    font-size: 24px;
-                }
-                img {
-                    width: 100%;
-                    margin-bottom: 30px;
-                }
-            }
-
-            /* Templates */
-            .templates-grid {
-                text-align: center;
-
-                a img {
-                    @include transition(all .5s);
-                }
-
-                a:hover img {
-                    -webkit-transform: scale(1.02);
-                    -moz-transform: scale(1.02);
-                    -o-transform: scale(1.02);
-                    -ms-transform: scale(1.02);
-                    transform: scale(1.02);
-                }
-
-                h4 {
-                    margin: 16px 0;
-                    font-weight: normal;
-                }
-            }
-        }
-
-        .theming {
-            img {
-                width: 100%;
-            }
-        }
-
-        /* Primeicons */
-        .icons-page {
-            .icons-list {
-                text-align: center;
-            }
-
-            .icons-list i {
-                font-size: 2em;
-            }
-
-            .icons-list .p-md-2 {
-                padding-bottom: 2em;
-            }
-        }
-
-        /* CodeHighlighter */
-        pre[class*="language-"] {
-            border-left: 10px solid #b2e0e8 !important;
-            box-shadow: -1px 0px 0px 0px #b2e0e8, 0px 0px 0px 1px #dfdfdf !important;
-            webkit-box-shadow: -1px 0px 0px 0px #b2e0e8, 0px 0px 0px 1px #dfdfdf !important;
-            background: #ffffff !important;
-
-            code {
-                font-size: 14px;
-
-                .token {
-                    &.tag {
-                        color: #d57935;
-                    }
-
-                    &.attr-value {
-                        color: #308eea;
-                    }
-
-                    &.language-javascript {
-                        color: #1990b8;
-                    }
-
-                    &.operator {
-                        background: transparent;
-                    }
-                }
-            }
-        }
-
-        /* Demos */
-        .dataview-demo {
-            .car-details {
-                @include flex();
-                justify-content: space-between;
-                align-items: center;
-                padding: 2em;
-                border-bottom: 1px solid #d9dad9;
-
-                & > div {
-                    display: flex;
-                    align-items: center;
-
-                    img {
-                        margin-right: 14px;
-                    }
-                }
-            }
-
-            .car-detail {
-                padding: 0 1em 1em 1em;
-                border-bottom: 1px solid #d9dad9;
-                margin: 1em;
-            }
-
-            .p-panel-content {
-                padding: 1em;
-            }
-        }
-
-        .loading-text {
-            display: block;
-            background-color: #f1f1f1;
-            min-height: 19px;
-            animation: pulse 1s infinite ease-in-out;
-            text-indent: -99999px;
-            overflow: hidden;
-        }
-
-        .inputnumber-demo {
-            .p-inputnumber {
-                margin-top: 1em;
-            }
-        }
-
-        .carousel-demo {
-            .p-carousel {
-                .p-carousel-content {
-                    .p-carousel-item {
-                        .car-details {
-                            > .p-grid {
-                                border: 1px solid #b3c2ca;
-                                border-radius: 3px;
-                                margin: .3em;
-                                text-align: center;
-                                padding: 2em 0 2.25em 0;
-                            }
-                        }
-
-                        .car-data {
-                            .car-title {
-                                font-weight: 700;
-                                font-size: 20px;
-                                margin-top: 24px;
-                            }
-
-                            .car-subtitle {
-                                margin: .25em 0 2em 0;
-                            }
-
-                            button {
-                                margin-left: .5em;
-
-                                &:first-child {
-                                    margin-left: 0;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                &.custom-carousel {
-                    .p-carousel-dot-icon  {
-                        width: 16px !important;
-                        height: 16px !important;
-                        border-radius: 50%;
-                    }
-                }
-
-                &.p-carousel-horizontal {
-                    .p-carousel-content {
-                        .p-carousel-item {
-                            &.p-carousel-item-start {
-                                .car-details {
-                                    > .p-grid {
-                                        margin-left: .6em;
-                                    }
-                                }
-                            }
-
-                            &.p-carousel-item-end {
-                                .car-details {
-                                    > .p-grid {
-                                        margin-right: .6em;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        .datatable-paginator-demo {
-            .p-paginator-current {
-                float: right
-            }
-        }
-
-        .lightbox-demo {
-            .p-lightbox-image-target {
-                margin-right: .5em;
-            }
-        }
-
-        .inputgrid-demo {
-            padding-top: 0 !important;
-        }
-
-        .treetableedit-demo {
-            .p-treetable tr {
-                outline: 0 none;
-            }
-        }
-
-        .flexgrid-demo {
-            .box,
-            .sample-layout > div {
-                background-color: #cce4f7;
-                text-align: center;
-                padding-top: 1em;
-                padding-bottom: 1em;
-                border-radius: 4px;
-            }
-
-            .box-stretched {
-                height: 100%;
-            }
-
-            .sample-layout {
-                margin: 0;
-            }
-
-            .sample-layout > div {
-                border: 1px solid #ffffff;
-            }
-
-            .vertical-container {
-                margin: 0;
-                height: 200px;
-                background: #efefef;
-                border-radius: 4px;
-            }
-
-            .nested-grid .p-col-4 {
-                padding-bottom: 1em;
-            }
-        }
-
-        .scrollpanel-demo {
-            .custombar1 .p-scrollpanel-wrapper {
-                border-right: 9px solid #f4f4f4;
-            }
-
-            .custombar1 .p-scrollpanel-bar {
-                background-color: #007ad9;
-                opacity: 1;
-                @include transition(background-color .2s);
-            }
-
-            .custombar1 .p-scrollpanel-bar:hover {
-                background-color: #007ad9;
-            }
-
-            .custombar2 .p-scrollpanel-wrapper {
-                border-right: 9px solid #f4f4f4;
-                border-bottom: 9px solid #f4f4f4;
-            }
-
-            .custombar2 .p-scrollpanel-bar {
-                background-color: #cce4f7;
-                border-radius: 0;
-                opacity: 1;
-                @include transition(background-color .2s);
-            }
-
-            .custombar2:hover .p-scrollpanel-bar {
-                background-color: #99c9ef;
-            }
-        }
-
-        .p-growl {
-            top:100px !important;
-        }
-
-        .button-demo {
-            button {
-                margin-right: .5em;
-            }
-        }
-
-        .splitbutton-demo {
-            .p-splitbutton {
-                margin-right: .5em;
-            }
-        }
-
-        .organizationchart-demo {
-            .company.p-organizationchart .p-organizationchart-node-content.p-person {
-                padding: 0;
-                border: 0 none;
-            }
-
-            .node-header, .node-content {
-                padding: .5em .7em;
-            }
-
-            .node-header {
-                background-color: #495ebb;
-                color: #ffffff;
-            }
-
-            .node-content {
-                text-align: center;
-                border: 1px solid #495ebb;
-            }
-
-            .node-content img {
-                border-radius: 50%;
-            }
-
-            .department-cfo {
-                background-color: #7247bc;
-                color: #ffffff;
-            }
-
-            .department-coo {
-                background-color: #a534b6;
-                color: #ffffff;
-            }
-
-            .department-cto {
-                background-color: #e9286f;
-                color: #ffffff;
-            }
-
-            .p-organizationchart .p-highlight {
-                background-color: orange;
-            }
-
-            .p-person .p-node-toggler {
-                color: #495ebb !important;
-            }
-
-            .department-cto .p-node-toggler {
-                color: #8a0a39 !important;
-            }
-        }
-
-        /*MultiSelect */
-        .multiselect-demo {
-            .my-multiselected-item-token, .my-multiselected-empty-token {
-                padding: 2px 4px;
-                margin: 0 0.286em 0 0;
-                display: inline-block;
-                vertical-align:middle;
-                height: 1.857em;
-                border-radius: 3px;
-            }
-
-            .my-multiselected-item-token {
-                background: #007ad9;
-                color: #ffffff;
-            }
-
-            .my-multiselected-empty-token {
-                background: #1dcbb3;
-                color: #ffffff;
-                width: 100%;
-            }
-
-        }
-
-        /* Galleria */
-        .galleria-demo {
-            .custom-indicator-galleria {
-                &.p-galleria-indicators-left {
-                    .p-galleria-preview-content {
-                        .p-galleria-indicator-container {
-                            display: flex;
-                            justify-content: space-between;
-                            padding: 0;
-
-                            .p-galleria-indicator-item {
-                                margin-left: 0;
-                                height: 100%;
-                                padding-left: .5em;
-                                padding-right: .5em;
-                                background-color: rgba(0, 0, 0, 0.6);
-                                color: #ffffff;
-                                border-top-width: 0 !important;
-                                border-radius: 0;
-                                min-width: 40px;
-                                @include flex-center();
-                                cursor: pointer;
-                                @include transition(all .2s);
-
-                                &:first-child {
-                                    border-top-width: 1px !important;
-                                }
-
-                                &.p-highlight {
-                                    color: var(--primaryTextColor);
-                                    background-color: var(--primaryColor);
-                                    border-color: var(--primaryColor);
-                                }
-                            }
-                        }
-                    }
-                }
-
-                &:not(.p-galleria-indicator-onpreview) {
-                    &.p-galleria-indicators-left {
-                        .p-galleria-preview-content {
-                            align-items: stretch;
-
-                            .p-galleria-preview-container {
-                                border: 1px solid #c8c8c8; /* for IE */
-                                border: var(--panelContentBorder);
-                                border-left-width: 0;
-                            }
-
-                            .p-galleria-indicator-container {
-                                .p-galleria-indicator-item {
-                                    background-color: #ffffff;
-                                    border: 1px solid #c8c8c8; /* for IE */
-                                    border: var(--panelContentBorder);
-                                    color: #333333;
-
-                                    &.p-highlight {
-                                        color: var(--primaryTextColor);
-                                        background-color: var(--primaryColor);
-                                        border-color: var(--primaryColor);
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .custom-indicator-galleria2 {
-                &.p-galleria-indicators-left {
-                    .p-galleria-content {
-                        .p-galleria-preview-content {
-                            .p-galleria-indicator-container {
-                                .p-galleria-indicator-item {
-                                    padding-right: 0;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .custom-galleria {
-                .p-galleria-content {
-                    height: 95%;
-                    overflow: hidden;
-                    position: relative;
-
-                    .p-galleria-thumbnail-content {
-                        position: absolute;
-                        width: 100%;
-                        bottom: 0;
-                        background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
-
-                        .p-galleria-thumbnail-container {
-                            .p-galleria-thumbnail-prev,
-                            .p-galleria-thumbnail-next {
-                                background-color: transparent;
-                                color: #ffffff;
-                                border: 0 none;
-                                font-size: 1.2em;
-
-                                &:hover {
-                                    color: var(--primaryColor);
-                                }
-                            }
-
-                            .p-galleria-thumbnail-items-content {
-                                .p-galleria-thumbnail-items-container {
-                                    .p-galleria-thumbnail-item {
-                                        opacity: .6;
-
-                                        &.p-galleria-thumbnail-item-current {
-                                            opacity: 1;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .p-galleria-footer {
-                    padding: 0;
-                    background-color: rgba(0, 0, 0, .9);
-                    border: rgba(0, 0, 0, .9);
-
-                    .custom-galleria-footer {
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: stretch;
-                        color: #ffffff;
-
-                        > button {
-                            background-color: transparent;
-                            padding: .1em .4em;
-                            border: 0 none;
-                            border-radius: 0;
-                            color: #ffffff;
-
-                            &:hover {
-                                background-color: transparent;
-                            }
-                        }
-
-                        > span {
-                            flex-grow: 1;
-
-                            > span {
-                                font-size: .9em;
-                                padding-left: .829em;
-
-                                &.title {
-                                    font-weight: bold;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                &.preview-fullscreen {
-                    .p-galleria-preview-container {
-                        .p-galleria-preview-nav-button {
-                            top: 50%;
-                            height: 20em;
-                            width: 4em;
-                            margin-top: -10em;
-                        }
-                    }
-                }
-            }
-        }
-
-        /* Dialog */
-        .dialog-demo {
-            > .p-button,
-            .p-grid .p-button {
-                margin: .5em .5em .5em 0;
-                width: 140px;
-            }
-
-            .p-dialog {
-                .p-dialog-content {
-                    line-height: 1.5;
-                }
-            }
-        }
-
-        /* Responsive Tables */
-        .p-col-d {
-            display: table-cell;
-        }
-
-        .p-col-m {
-            display: none;
-        }
-    }
-
-    @media screen and (max-width: $tabletBreakpoint) {
-        .layout-content {
-            margin-left: 0;
-            padding-top: 110px;
-
-            .content-section {
-                &.submenu ul li,
-                &.content-submenu ul li {
-                    width: 50%;
-                }
-
-                .doc-table {
-                    tbody{
-                        td {
-                            word-break: break-word;
-                        }
-                    }
-                }
-            }
-
-            .home {
-                .introduction,
-                .features,
-                .whouses,
-                .prosupport {
-                    > div {
-                        width: 100%;
-                    }
-                }
-            }
-
-            .dataview-demo {
-                .p-dataview {
-                    .car-details {
-
-                        img {
-                            width: 75px;
-                        }
-                    }
-                }
-            }
-
-            .p-col-d {
-                display: none;
-            }
-
-            .p-col-m {
-                display: inline-block;
-            }
-        }
-    }
-
-    @media screen and (max-width: $mobileBreakpoint) {
-        .layout-content {
-            .dataview-demo {
-                .car-details, .search-icon {
-                    text-align: center;
-                    margin-top: 0;
-                }
-
-                .filter-container {
-                    text-align: left;
-                }
-            }
-
-            .datascroll-demo {
-                .car-item {
-                    text-align: center;
-                }
-            }
-        }
-    }
-}
-
-/* Dark Theme such as luna-amber, luna-blue, luna-green and luna-pink */
-.dark-theme {
-    .layout-content {
-        .content-section {
-            &.implementation {
-                background-color: #3f3f3f !important;
-                color: #dedede !important;
-
-                > h3,
-                > h4 {
-                    color: #dedede !important
-                }
-            }
-        }
-
-        .carousel-demo {
-            .p-carousel {
-                .p-carousel-content {
-                    .p-carousel-item {
-                        .car-details {
-                            > .p-grid {
-                                border: 1px solid #191919;
-                                background-color: #323232;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        .dataview-demo {
-            .p-dataview {
-                .car-details {
-                    border-bottom-color: #191919;
-                }
-
-                .car-detail {
-                    border-bottom: 1px solid #191919;
-                }
-            }
-        }
-    }
-}
diff --git a/src/sass/layout/_footer.scss b/src/sass/layout/_footer.scss
deleted file mode 100644
index e7cdb99085..0000000000
--- a/src/sass/layout/_footer.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.layout-wrapper {
-    .layout-footer {
-        font-size: 14px;
-
-        span a {
-            margin-left: 0;
-        }
-
-        .footer-links {
-            float: right;
-            font-size: 24px;
-        }
-
-        a {
-            margin-left: 16px;
-            color: #2f4054;
-            font-weight: bold;
-        }
-
-        .icon-github {
-            width: 29.1px;
-            height: 29.1px;
-            color:#20272a
-        }
-
-        .icon-twitter {
-            width: 29.1px;
-            height: 29.1px;
-            color:#20272a
-        }
-    }
-}
diff --git a/src/sass/layout/_layout.scss b/src/sass/layout/_layout.scss
deleted file mode 100644
index 5c3cea9b00..0000000000
--- a/src/sass/layout/_layout.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-#root, body, html {
-    height: 100%;
-}
-
-body {
-    margin: 0px;
-    min-height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    background-color: #f6f6f6;
-    font-family: "Open Sans", "Helvetica Neue", sans-serif;
-    font-weight: normal;
-    color: #333333;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-size: 14px;
-}
-
-.layout-wrapper {
-    min-height: 100%;
-}
-
-/* Variables */
-$tabletBreakpoint: 1024px;
-$mobileBreakpoint: 640px;
-
-/* Styles */
-@import "http://github.com/_mixins";
-@import "http://github.com/_news";
-@import "http://github.com/_topbar";
-@import "http://github.com/_sidebar";
-@import "http://github.com/_content";
-@import "http://github.com/_footer";
-@import "http://github.com/_mask";
-@import "http://github.com/_config";
-@import "http://github.com/_changelog";
diff --git a/src/sass/layout/_mask.scss b/src/sass/layout/_mask.scss
deleted file mode 100644
index 6e1097a409..0000000000
--- a/src/sass/layout/_mask.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.layout-wrapper {
-    .layout-mask {
-        display: none;
-        z-index: 998;
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 110px;
-        left: 0;
-        opacity: .7;
-        background-color: #333333;
-        @include animation(layoutMaskFade .3s);
-    }
-
-    @media screen and (max-width: $tabletBreakpoint) {
-        &.layout-sidebar-mobile-active {
-            .layout-mask {
-                display: block;
-            }
-        }
-    }
-}
-
-@include keyframes(layoutMaskFade) {
-    from {
-        opacity: 0;
-        -webkit-transform: translate3d(0, -20px, 0);
-        transform: translate3d(0, -20px, 0);
-    }
-
-    to {
-        opacity: .7;
-        -webkit-transform: none;
-        transform: none;
-    }
-}
diff --git a/src/sass/layout/_mixins.scss b/src/sass/layout/_mixins.scss
deleted file mode 100644
index 379546a08c..0000000000
--- a/src/sass/layout/_mixins.scss
+++ /dev/null
@@ -1,211 +0,0 @@
-@mixin border-radius($val) {
-    -moz-border-radius: $val;
-    -webkit-border-radius: $val;
-    border-radius: $val;
-}
-
-@mixin border-radius-top($val) {
-    -moz-border-radius-topleft: $val;
-    -webkit-border-top-left-radius: $val;
-    border-top-left-radius: $val;
-    -moz-border-radius-topright: $val;
-    -webkit-border-top-right-radius: $val;
-    border-top-right-radius: $val;
-}
-
-@mixin border-radius-left($val) {
-    -moz-border-radius-topleft: $val;
-    -webkit-border-top-left-radius: $val;
-    border-top-left-radius: $val;
-    -moz-border-radius-bottomleft: $val;
-    -webkit-border-bottom-left-radius: $val;
-    border-bottom-left-radius: $val;
-}
-
-@mixin background-gradient-left2right($start-color, $end-color) {
-    background-color: $start-color;
-    background-image: -webkit-linear-gradient(left, $start-color, $end-color);
-    background-image: -moz-linear-gradient(left, $start-color, $end-color);
-    background-image: -ms-linear-gradient(left, $start-color, $end-color);
-    background-image: -o-linear-gradient(left, $start-color, $end-color);
-    background-image: linear-gradient(to right, $start-color, $end-color);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start-color}', endColorStr='#{$end-color}', gradientType='1');
-}
-
-@mixin background-gradient-top2bottom($start-color, $end-color) {
-    background-color: $start-color;
-    background-image: -webkit-gradient(linear, left top, left bottom, from($start-color), to($end-color));
-    background-image: -webkit-linear-gradient(top, $start-color, $end-color);
-    background-image:    -moz-linear-gradient(top, $start-color, $end-color);
-    background-image:     -ms-linear-gradient(top, $start-color, $end-color);
-    background-image:      -o-linear-gradient(top, $start-color, $end-color);
-    background-image:         linear-gradient(to bottom, $start-color, $end-color);
-    filter:            progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}');
-}
-
-@mixin rotate($deg) {
-    -webkit-transform: rotate($deg);
-    -moz-transform: rotate($deg);
-    -o-transform: rotate($deg);
-    -ms-transform: rotate($deg);
-    transform: rotate($deg);
-}
-
-@mixin transition($transition...) {
-    -moz-transition:    $transition;
-    -o-transition:      $transition;
-    -webkit-transition: $transition;
-    transition:         $transition;
-}
-
-@mixin transform($transform...) {
-    -webkit-transform: $transform;
-    -ms-transform:     $transform;
-    transform:         $transform;
-}
-
-@mixin animation($animation...) {
-  -webkit-animation: $animation;
-  animation: $animation;
-}
-
-@mixin keyframes($name) {
-  @-webkit-keyframes #{$name} {
-    @content;
-  }
-  @-moz-keyframes #{$name} {
-    @content;
-  }
-  @-ms-keyframes #{$name} {
-    @content;
-  }
-  @keyframes #{$name} {
-    @content;
-  }
-}
-
-@keyframes pulse {
-    0% {
-        background-color: rgba(165, 165, 165, 0.1)
-    }
-    50% {
-        background-color: rgba(165, 165, 165, 0.3)
-    }
-    100% {
-        background-color: rgba(165, 165, 165, 0.1)
-    }
-}
-
-@mixin clearfix() {
-    &:before,
-    &:after {
-        content: "";
-        display: table;
-    }
-    &:after {
-        clear: both;
-    }
-}
-
-@mixin shadow($value...) {
-    -webkit-box-shadow: $value;
-    -moz-box-shadow: $value;
-    box-shadow: $value;
-}
-
-@mixin user-select($value...) {
-    -webkit-user-select: $value;
-    -moz-user-select: $value;
-    -ms-user-select: $value;
-    user-select: $value;
-}
-
-/* Flex */
-@mixin flex() {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-
-@mixin flex-direction-row() {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-@mixin flex-direction-column() {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-@mixin flex-justify-center() {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-@mixin flex-justify-between() {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
-@mixin flex-align-center() {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-@mixin flex-align-start() {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-}
-
-@mixin flex-align-end() {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-    align-items: flex-end;
-}
-
-@mixin flex-justify-start() {
-  -webkit-box-pack: start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-}
-
-@mixin flex-justify-end() {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-}
-
-@mixin flex-center() {
-    @include flex();
-    @include flex-align-center();
-    @include flex-justify-center();
-}
-
-@mixin focus() {
-    &:focus {
-        z-index: 1;
-        outline: 0 none;
-        @include transition(box-shadow .3s);
-        @include shadow(inset 0 0 0 0.2em #00c4e8);
-    }
-}
-
-@mixin link($hasChildSelector: false) {
-    @if $hasChildSelector {
-        > a, > .p-link {
-            @content;
-        }
-    } @else {
-        a, .p-link {
-            @content;
-        }
-    }
-}
diff --git a/src/sass/layout/_news.scss b/src/sass/layout/_news.scss
deleted file mode 100644
index 22a27234a8..0000000000
--- a/src/sass/layout/_news.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-.layout-wrapper {
-    .layout-news {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 999;
-        overflow: hidden;
-        width: 100%;
-        height: 70px;
-        background-image: url("http://github.com/resources/images/news/topbar-easter-2020-bg.jpg");
-        @include flex();
-        @include flex-justify-center();
-        @include flex-align-center();
-        cursor: pointer;
-
-        .layout-news-container {
-            @include flex();
-            @include flex-align-center();
-            @include flex-justify-center();
-            height: 100%;
-
-            .layout-news-text {
-                height: 60px;
-                z-index: 1;
-            }
-
-            .layout-news-helper-image {
-                height: 70px;
-                position: absolute;
-                right: 52px;
-            }
-
-            .layout-news-button {
-                border: 1px solid #ffffff;
-                color: #ffffff;
-                font-size: 15px;
-                padding: .3em .3em .5em 1em;
-                font-weight: bold;
-                border-radius: 3px;
-                transition: background-color .15s;
-                margin-left: 2em;
-                position: relative;
-                z-index: 1;
-                @include flex();
-                @include flex-align-center();
-                @include flex-justify-center();
-                flex-shrink: 0;
-
-                i {
-                    font-size: 1.5em;
-                }
-
-                &:hover {
-                    background-color: rgba(255, 255, 255, .25);
-                }
-            }
-
-            .layout-news-close {
-                color: #ffffff;
-                position: absolute;
-                right: 28px;
-                z-index: 2;
-                background-color: rgba(0,0,0,.3);
-                border-radius: 50%;
-                width: 23px;
-                height: 23px;
-                cursor: pointer;
-                @include flex();
-                @include flex-align-center();
-                @include flex-justify-center();
-
-                i {
-                    font-size: 1.5em;
-                }
-            }
-        }
-    }
-
-    &.layout-news-active {
-        .layout-topbar {
-            top: 70px;
-        }
-
-        .layout-sidebar {
-            top: 140px;
-            height: calc(100% - 140px);
-        }
-
-        .layout-content {
-            padding-top: 140px;
-        }
-
-        .layout-config {
-            top: 140px;
-            height: calc(100% - 140px);
-        }
-
-        .layout-mask {
-            top: 140px;
-        }
-    }
-
-    @media screen and (max-width: $tabletBreakpoint) {
-        .layout-news {
-            display: block;
-
-            .layout-news-container {
-                background-image: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, #FFFFFF 100%);
-
-                .layout-news-helper-image {
-                    display: none;
-                }
-
-                .layout-news-button {
-                    opacity: 0;
-                    position: absolute;
-                    z-index: 1;
-                    width: 100%;
-                    height: 100%;
-                    margin: 0;
-                    top: 0;
-                    left: 0;
-                }
-
-                .layout-news-close {
-                    top: 50%;
-                    margin-top: -.65em;
-                }
-            }
-        }
-
-        &.layout-news-active {
-            .layout-sidebar {
-                top: 180px;
-                height: calc(100% - 180px);
-            }
-
-            .layout-content {
-                padding-top: 180px;
-            }
-
-            .layout-config {
-                top: 180px;
-                height: calc(100% - 180px);
-            }
-
-            .layout-mask {
-                top: 180px;
-            }
-        }
-    }
-
-    @media screen and (max-width: $mobileBreakpoint) {
-        &.layout-news-active {
-            .layout-topbar {
-                .layout-topbar-right {
-                    .topbar-menu {
-                        > li {
-                            > ul {
-                                top: 180px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@include keyframes(snowSlide) {
-    from { background-position: 0 0; }
-    to { background-position: 0 400px; }
-}
-
-@include keyframes(customSlide) {
-    0% { left: 0; bottom:-40%; }
-    20% { left: 20%; bottom:-20%; }
-    40% { left: 40%; bottom:0%; }
-    60% { left: 60%; bottom:20%; }
-    80% { left: 80%; bottom:40%; }
-    100% { left: 100%; bottom: 60%; }
-}
diff --git a/src/sass/layout/_sidebar.scss b/src/sass/layout/_sidebar.scss
deleted file mode 100644
index 2faebe8676..0000000000
--- a/src/sass/layout/_sidebar.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-.layout-wrapper {
-    .layout-sidebar {
-        position: fixed;
-        left: 0;
-        top: 70px;
-        height: calc(100% - 70px);
-        background-color: #fff;
-        width: 300px;
-        overflow: auto;
-        @include shadow(0 0 10px 0 rgba(0,0,0,.2));
-
-        .layout-sidebar-search-wrapper {
-            padding: 24px;
-            position: relative;
-
-            .layout-sidebar-search-icon {
-                position: absolute;
-                color: #484848;
-                top: 50%;
-                left: 28px;
-                font-size: 16px;
-                margin-top: -8px;
-            }
-
-            input {
-                color: #484848;
-                padding: 8px 0 8px 24px;
-                width: 100%;
-                border-radius: 2px;
-                font-size: 14px;
-                background-color: #ffffff;
-                border: solid 1px #cfd4d5;
-
-                @include focus();
-            }
-        }
-
-        .layout-menu {
-            margin: 0;
-            padding: 0;
-            list-style: none;
-            padding-bottom: 24px;
-
-            ul {
-                overflow: hidden;
-                margin: 0;
-                padding: 10px 18px;
-                list-style-type: none;
-            }
-
-            > li {
-                .layout-menu-header {
-                    width: 100%;
-                    padding: 15px 24px;
-                    font-weight: 700;
-                    text-transform: uppercase;
-                    color: #767676;
-                    text-align: left;
-                    background-color: #f4f4f4;
-                    @include flex();
-                    @include flex-align-center();
-                    @include user-select(none);
-
-                    .layout-menu-icon {
-                        width: 20px;
-                    }
-
-                    .layout-menu-text {
-                        margin-left: 8px;
-                    }
-                }
-
-                > .layout-submenu {
-                    li {
-                        > a {
-                            display: inline-block;
-                            width: 100%;
-                            padding: 6px;
-                            cursor: pointer;
-                            font-size: 14px;
-                            color: #484848;
-                            @include border-radius(4px);
-                            @include transition(background-color .2s);
-
-                            @include focus();
-
-                            &:hover {
-                                background-color: #eeeeee;
-                            }
-
-                            .layout-menuitem-badge {
-                                padding: 2px 4px;
-                                border-radius: 3px;
-                                font-weight: 700;
-                                font-size: 11px;
-                                margin-left: 8px;
-                                background-color: #dee2e6;
-                                color: #6c757d;
-                                letter-spacing: 0.2px;
-                                text-transform: uppercase;
-
-                                &.layout-menuitem-badge-new {
-                                    background-color: #008fba;
-                                    color: #ffffff;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: $tabletBreakpoint) {
-        .layout-sidebar {
-            top: 110px;
-            left: -300px;
-            height: calc(100% - 110px);
-            z-index: 999;
-            @include transition(left .2s);
-        }
-
-        &.layout-sidebar-mobile-active {
-            .layout-sidebar {
-                left: 0;
-            }
-        }
-    }
-}
diff --git a/src/sass/layout/_topbar.scss b/src/sass/layout/_topbar.scss
deleted file mode 100644
index 680c40033c..0000000000
--- a/src/sass/layout/_topbar.scss
+++ /dev/null
@@ -1,286 +0,0 @@
-.layout-wrapper {
-    .layout-topbar {
-        background-color: #20272a;
-        padding: 0 45px;
-        height: 70px;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        z-index: 999;
-        @include shadow(0 2px 5px 0 rgba(0, 0, 0, 0.3));
-        @include flex();
-        @include flex-justify-between();
-        @include flex-direction-row();
-
-        .layout-topbar-left {
-            @include flex();
-            @include flex-align-center();
-            @include flex-justify-start();
-            flex-grow: 1;
-
-            .menu-button {
-                display: none;
-                color: #ffffff;
-                font-size: 24px;
-                width: 70px;
-                height: 100%;
-                cursor: pointer;
-                overflow: hidden;
-                @include transition(background-color .2s);
-
-                &:hover {
-                    background-color: #363c3f;
-                }
-
-                i {
-                    line-height: inherit;
-                }
-
-                @include focus();
-            }
-
-            .logo {
-                height: 100%;
-                @include flex();
-                @include flex-align-center();
-                @include focus();
-
-                img {
-                    width: 210px;
-                }
-            }
-        }
-
-        .layout-topbar-right {
-            .topbar-menu {
-                list-style-type: none;
-                padding: 0;
-                margin: 0;
-                height: 100%;
-                @include flex();
-                @include flex-direction-row();
-
-                > li {
-                    height: 100%;
-                    position: relative;
-
-                    @include link(true) {
-                        height: 100%;
-                        color: #ffffff;
-                        background-color: transparent;
-                        padding: 1em;
-                        font-size: 16px;
-                        @include flex-center();
-                        @include transition(background-color .2s);
-                        @include focus();
-                    }
-
-                    &:hover {
-                        background-color: #4a4f52;
-                    }
-
-                    > ul {
-                        position: absolute;
-                        top: 70px;
-                        right: 0;
-                        width: 275px;
-                        max-height: 400px;
-                        background-color: #fff;
-                        overflow: auto;
-                        list-style-type: none;
-                        padding: 6px 12px;
-                        margin: 0;
-                        border-radius: 3px;
-                        @include shadow(0 0 10px 0 rgba(0,0,0,.3));
-                        opacity: 0;
-                        @include transform(translateY(5%));
-                        @include transition(transform .3s, opacity .15s);
-                        display: none;
-
-                        &.topbar-submenu-enter {
-                            display: block;
-                            opacity: 0;
-                            @include transform(translateY(5%));
-                        }
-
-                        &.topbar-submenu-enter-active {
-                            @include transition(transform .3s, opacity .15s);
-                        }
-
-                        &.topbar-submenu-enter-done {
-                            display: block;
-                            opacity: 1;
-                            @include transform(translateY(0%));
-                        }
-
-                        &.topbar-submenu-exit {
-                            display: none;
-                            opacity: 0;
-                            @include transform(translateY(5%));
-                            @include transition(transform .3s, opacity .15s);
-                        }
-
-                        &.topbar-submenu-exit-active {
-                            @include transition(transform .3s, opacity .15s);
-                        }
-
-                        > li {
-                            &.topbar-submenu-header {
-                                padding: 6px 12px;
-                                font-weight: 700;
-                                text-align: left;
-                                margin-top: 18px;
-
-                                &:first-child {
-                                    margin-top: 6px;
-                                }
-                            }
-
-                            &:last-child {
-                                @include link() {
-                                    border-bottom: none;
-                                }
-                            }
-                        }
-
-                        @include link() {
-                            display: block;
-                            text-decoration: none;
-                            color: #484848;
-                            padding: 6px 12px;
-                            width: 100%;
-                            @include transition(background-color .2s);
-                            @include user-select(none);
-
-                            &:not(.no-border) {
-                                border-bottom: 1px solid #f4f4f4;
-                            }
-
-                            i {
-                                vertical-align: middle;
-                                font-size: 24px;
-                                margin-right: 12px;
-                            }
-
-                            img {
-                                width: 32px;
-                                vertical-align: middle;
-                                margin-right: 12px;
-                            }
-
-                            &:hover {
-                                background-color: #eee;
-                            }
-
-                            @include focus();
-                        }
-                    }
-
-                    &.topbar-resources-submenu {
-                        > ul {
-                            @include link() {
-                                padding: 12px 6px;
-
-                                &:before {
-                                    content: "\25CF";
-                                    margin-right: 8px;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .theme-badge {
-                    padding: 2px 4px;
-                    border-radius: 3px;
-                    color: #ffffff;
-                    font-weight: 700;
-                    font-size: 11px;
-                    margin-left: 8px;
-                    letter-spacing: 0.2px;
-
-                    &.new {
-                        @include background-gradient-top2bottom(#96c93d, #00b09b);
-                    }
-
-                    &.material {
-                        @include background-gradient-top2bottom(#2196f3, #2196f3);
-                    }
-
-                    &.bootstrap {
-                        @include background-gradient-top2bottom(#563d7c, #966bd8);
-                    }
-
-                    &.darkmode {
-                        @include background-gradient-top2bottom(#141d26, #5a6067);
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: $tabletBreakpoint) {
-        .layout-topbar {
-            padding: 0;
-            height: 110px;
-            @include flex-direction-column();
-
-            .layout-topbar-left {
-                .menu-button {
-                    @include flex-center();
-                }
-
-                .logo {
-                    width: calc(100% - 70px);
-                    @include flex-justify-center();
-                }
-            }
-
-            .layout-topbar-right {
-                .topbar-menu {
-                    background-color: #327187;
-                    height: 40px;
-                    width: 100%;
-
-                    > li {
-                        @include flex();
-                        flex-grow: 1;
-                        @include flex-justify-center();
-
-                        @include link(true) {
-                            padding: 0 .1em;
-                            width: 100%;
-                        }
-
-                        &:hover {
-                            background-color: #285a6c;
-                        }
-
-                        > ul {
-                            top: 40px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: $mobileBreakpoint) {
-        .layout-topbar {
-            .layout-topbar-right {
-                .topbar-menu {
-                    > li {
-                        > ul {
-                            position: fixed;
-                            top: 110px;
-                            right: auto;
-                            left: 0;
-                            width: 100vw;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/showcase/accordion/AccordionDemo.js b/src/showcase/accordion/AccordionDemo.js
deleted file mode 100644
index bbccb5937c..0000000000
--- a/src/showcase/accordion/AccordionDemo.js
+++ /dev/null
@@ -1,410 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Accordion,AccordionTab} from '../../components/accordion/Accordion';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class AccordionDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Accordion</h1>
-                        <p>Accordion groups a collection of contents in tabs.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("accordion")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Default</h3>
-                    <Accordion>
-                        <AccordionTab header="Godfather I">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
-                            Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
-                            of the family, kind and benevolent to those who give respect,
-                            but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather II">
-                            <p>Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
-                            Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
-                            the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
-                            Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
-                            Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather III">
-                            <p>After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
-                            third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
-                            now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.</p>
-                        </AccordionTab>
-                    </Accordion>
-
-                    <h3>Multiple</h3>
-                    <Accordion multiple={true}>
-                        <AccordionTab header="Godfather I">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
-                            Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
-                            of the family, kind and benevolent to those who give respect,
-                            but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather II">
-                            <p>Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
-                            Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
-                            the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
-                            Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
-                            Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather III">
-                            <p>After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
-                            third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
-                            now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather IV" disabled={true}></AccordionTab>
-                    </Accordion>
-                </div>
-
-                <AccordionDoc></AccordionDoc>
-            </div>
-        )
-    }
-}
-
-export class AccordionDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Accordion,AccordionTab} from 'primereact/accordion';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Accordion element consists of one or more AccordionTab elements and can either be used as a Controlled or Uncontrolled component.</p>
-
-            <h3>Controlled Component</h3>
-            <p>In controlled mode, <i>activeIndex</i> and <i>onTabChange</i> properties need to be defined to control the state.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Accordion activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: e.index})}>
-    <AccordionTab header="Header I">
-        Content I
-    </AccordionTab>
-    <AccordionTab header="Header II">
-        Content II
-    </AccordionTab>
-    <AccordionTab header="Header III">
-        Content III
-    </AccordionTab>
-</Accordion>
-
-`}
-</CodeHighlight>
-
-            <h3>Uncontrolled</h3>
-            <p>In uncontrolled mode, no additional properties are required. Initial active tab can be provided using the <i>activeIndex</i> property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
-                need to update the active tab, prefer to use the component as controlled.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Accordion>
-    <AccordionTab header="Header I">
-        Content I
-    </AccordionTab>
-    <AccordionTab header="Header II">
-        Content II
-    </AccordionTab>
-    <AccordionTab header="Header III">
-        Content III
-    </AccordionTab>
-</Accordion>
-
-`}
-</CodeHighlight>
-
-             <h3>Multiple</h3>
-            <p>By default only one tab at a time can be active, enabling <i>multiple</i> property changes this behavior to allow multiple tabs be active at the same time.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Accordion multiple={true}>
-    <AccordionTab header="Header I">
-        Content I
-    </AccordionTab>
-    <AccordionTab header="Header II">
-        Content II
-    </AccordionTab>
-    <AccordionTab header="Header III">
-        Content III
-    </AccordionTab>
-</Accordion>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties For AccordionTab</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Orientation of tab headers.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the tab is disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>headerStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>activeIndex</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Active index or indexes of the element. Use an array of numbers for multiple indexes. the "multiple" prop must be set to true in order to specify multiple indexes.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, multiple tabs can be activated at the same time.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onTabOpen</td>
-                            <td>event.originalEvent: browser event  <br/>
-                                event.index: Index or indexes of the tab (number or array of numbers).
-                            </td>
-                            <td>Callback to invoke when a tab gets expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>onTabClose</td>
-                            <td>event.originalEvent: browser event  <br/>
-                                event.index: Index of the tab
-                            </td>
-                            <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
-                        </tr>
-                        <tr>
-                            <td>onTabChange</td>
-                            <td>event.originalEvent: browser event  <br/>
-                                event.index: Index of the tab
-                            </td>
-                            <td>Callback to invoke when state of the accordion changes.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-accordion</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-accordion-header</td>
-                            <td>Header of a tab.</td>
-                        </tr>
-                        <tr>
-                            <td>p-accordion-content</td>
-                            <td>Container of a tab.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/accordion" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Accordion,AccordionTab} from 'accordion/accordion';
-
-export class AccordionDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Accordion</h1>
-                        <p>Accordion groups a collection of contents in tabs.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Default</h3>
-                    <Accordion>
-                        <AccordionTab header="Godfather I">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
-                            Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
-                            of the family, kind and benevolent to those who give respect,
-                            but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather II">
-                            <p>Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
-                            Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
-                            the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
-                            Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
-                            Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather III">
-                            <p>After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
-                            third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
-                            now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.</p>
-                        </AccordionTab>
-                    </Accordion>
-
-                    <h3>Multiple</h3>
-                    <Accordion multiple={true}>
-                        <AccordionTab header="Godfather I">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughters wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his fathers business.
-                            Through Michaels life the nature of the family business becomes clear. The business of the family is just like the head
-                            of the family, kind and benevolent to those who give respect,
-                            but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather II">
-                            <p>Francis Ford Coppolas legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young
-                            Vito Corleone's rise with his son Michael's spiritual fall, deepening The_Godfathers depiction of the dark side of
-                            the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills his family.
-                            Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy, killing the local Black Hand
-                            Fanucci after he demands his customary cut of the tyro's business. With Fanucci gone, Vito's communal stature grows.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather III">
-                            <p>After a break of more than 15 years, director Francis Ford Coppola and writer Mario Puzo returned to the well for this
-                            third and final story of the fictional Corleone crime family. Two decades have passed, and crime kingpin Michael Corleone,
-                            now divorced from his wife Kay has nearly succeeded in keeping his promise that his family would one day be completely legitimate.</p>
-                        </AccordionTab>
-                        <AccordionTab header="Godfather IV" disabled={true}></AccordionTab>
-                    </Accordion>
-                </div>
-
-                <AccordionDoc></AccordionDoc>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/autocomplete/AutoCompleteDemo.js b/src/showcase/autocomplete/AutoCompleteDemo.js
deleted file mode 100644
index d04130df65..0000000000
--- a/src/showcase/autocomplete/AutoCompleteDemo.js
+++ /dev/null
@@ -1,684 +0,0 @@
-import React, {Component} from 'react';
-import {AutoComplete} from '../../components/autocomplete/AutoComplete';
-import {CountryService} from '../service/CountryService';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class AutoCompleteDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            countriesData: [],
-            filteredCountriesSingle: null,
-            filteredBrands: null,
-            filteredCountriesMultiple: null
-        };
-
-        this.filterCountrySingle = this.filterCountrySingle.bind(this);
-        this.filterBrands = this.filterBrands.bind(this);
-        this.filterCountryMultiple = this.filterCountryMultiple.bind(this);
-        this.countryservice = new CountryService();
-    }
-
-    componentDidMount() {
-        this.countriesData = this.countryservice.getCountries(this);
-        this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo'];
-    }
-
-    filterCountrySingle(event) {
-        setTimeout(() => {
-            var results = this.state.countriesData.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-            this.setState({ filteredCountriesSingle: results });
-        }, 250);
-    }
-
-    filterBrands(event) {
-        setTimeout(() => {
-            let results;
-
-            if (event.query.length === 0) {
-                results = [...this.brands];
-            }
-            else {
-                results = this.brands.filter((brand) => {
-                    return brand.toLowerCase().startsWith(event.query.toLowerCase());
-                });
-            }
-
-            this.setState({ filteredBrands: results });
-        }, 250);
-    }
-
-    filterCountryMultiple(event) {
-        setTimeout(() => {
-            let results = this.state.countriesData.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-
-            this.setState({ filteredCountriesMultiple: results });
-        }, 250);
-    }
-
-    itemTemplate(brand) {
-        return (
-            <div className="p-clearfix">
-                <img alt={brand} src={`showcase/resources/demo/images/car/${brand}.png`} style={{ width: '32px', display: 'inline-block', margin: '5px 0 2px 5px' }} />
-                <div style={{ fontSize: '16px', float: 'right', margin: '10px 10px 0 0' }}>{brand}</div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>AutoComplete</h1>
-                        <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("autocomplete")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <AutoComplete value={this.state.country} suggestions={this.state.filteredCountriesSingle} completeMethod={this.filterCountrySingle} field="name"
-                        size={30} placeholder="Countries" minLength={1} onChange={(e) => this.setState({country: e.value})} />
-                    <span style={{ marginLeft: '10px' }}>Country: {this.state.country ? this.state.country.name || this.state.country : 'none'}</span>
-
-                    <h3>Advanced</h3>
-                    <AutoComplete value={this.state.brand} suggestions={this.state.filteredBrands} completeMethod={this.filterBrands} size={30} minLength={1}
-                        placeholder="Hint: type 'v' or 'f'" dropdown={true} itemTemplate={this.itemTemplate.bind(this)} onChange={(e) => this.setState({brand: e.value})} />
-                    <span style={{ marginLeft: '50px' }}>Brand: {this.state.brand || 'none'}</span>
-
-                    <h3>Multiple</h3>
-                    <span className="p-fluid">
-                        <AutoComplete value={this.state.countries} suggestions={this.state.filteredCountriesMultiple} completeMethod={this.filterCountryMultiple}
-                            minLength={1} placeholder="Countries" field="name" multiple={true} onChange={(e) => this.setState({countries: e.value})} />
-                    </span>
-                </div>
-
-                <AutoCompleteDoc />
-            </div>
-        )
-    }
-}
-
-class AutoCompleteDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {AutoComplete} from 'primereact/autocomplete';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>AutoComplete is used as a controlled component with <i>value</i> and <i>onChange</i> properties. In addition, the component
-                            requires a list of <i>suggestions</i> and a <i>completeMethod</i> to query the results.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<AutoComplete value={this.state.brand} onChange={(e) => this.setState({brand: e.value})}
-            suggestions={this.state.brandSuggestions} completeMethod={this.suggestBrands.bind(this)} />
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-constructor() {
-    super();
-    this.state = {
-        brandSuggestions: null
-    };
-    this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo'];
-}
-
-suggestBrands(event) {
-    let results = this.brands.filter((brand) => {
-         return brand.toLowerCase().startsWith(event.query.toLowerCase());
-    });
-
-    this.setState({ brandSuggestions: results });
-}
-
-render() {
-    return (
-        <AutoComplete value={this.state.brand} onChange={(e) => this.setState({brand: e.value})}
-                    suggestions={this.state.brandSuggestions} completeMethod={this.suggestBrands.bind(this)} />
-    );
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Dropdown</h3>
-                        <p>Enabling <i>dropdown</i> property displays a button next to the input field where click behavior of the button is defined using
-                            dropdownMode property that takes "blank" or "current" as possible values.
-                            "blank" is the default mode to send a query with an empty string whereas
-                            "current" setting sends a query with the current value of the input.</p>
-
-                        <CodeHighlight className="language-jsx">
-{`
-<AutoComplete dropdown={true} value={this.state.brand} onChange={(e) => this.setState({brand: e.value})}
-            suggestions={this.state.brandSuggestions} completeMethod={this.suggestBrands.bind(this)} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Multiple Mode</h3>
-                        <p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
-                        <CodeHighlight className="language-jsx">
-{`
-<AutoComplete multiple={true} value={this.state.brands} onChange={(e) => this.setState({brands: e.value})}
-            suggestions={this.state.brandSuggestions} completeMethod={this.suggestBrands.bind(this)} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Objects</h3>
-                        <p>AutoComplete can also work with objects using the  <i>field</i> property that defines the label to display
-                        as a suggestion. The value passed to the model would still be the object instance of a suggestion.
-                        Here is an example with a Country object that has name and code fields such as &#123;name:"United States",code:"USA"&#125;.</p>
-
-                        <CodeHighlight className="language-jsx">
-{`
-<AutoComplete field="name" value={this.state.brands} onChange={(e) => this.setState({brands: e.value})}
-            suggestions={this.state.brandSuggestions} completeMethod={this.suggestBrands.bind(this)} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Templating</h3>
-                        <p>Custom content can be displayed using <i>itemTemplate</i> property that references a function which gets
-                        the suggestion option and returns an element. Similarly <i>selectedItemTemplate</i> property is available
-                        to customize the chips in multiple mode using the same approach.</p>
-
-                        <CodeHighlight className="language-jsx">
-{`
-<AutoComplete itemTemplate="this.brandTemplate" value={this.state.brand} onChange={(e) => this.setState({brand: e.value})}
-            suggestions={this.state.brandSuggestions} completeMethod={this.suggestBrands.bind(this)} />
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-{`
-brandTemplate(brand) {
-    //return custom element
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Value of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>name</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the input element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>type</td>
-                                        <td>string</td>
-                                        <td>text</td>
-                                        <td>Type of the input element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>suggestions</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of suggestions to display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>field</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Field of a suggested object to resolve and display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>scrollHeight</td>
-                                        <td>string</td>
-                                        <td>200px</td>
-                                        <td>Maximum height of the suggestions panel.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>dropdown</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Displays a button next to the input field when enabled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>dropdownMode</td>
-                                        <td>string</td>
-                                        <td>blank</td>
-                                        <td>Specifies the behavior dropdown button. Default "blank" mode sends an empty string and "current" mode sends the input value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>multiple</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Specifies if multiple values can be selected.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>minLength</td>
-                                        <td>number</td>
-                                        <td>1</td>
-                                        <td>Minimum number of characters to initiate a search.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>delay</td>
-                                        <td>number</td>
-                                        <td>300</td>
-                                        <td>Delay between keystrokes to wait before sending a query.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>inputId</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Identifier of the input element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>inputStyle</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the input field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>inputClassName</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the input field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>placeholder</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Hint text for the input field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>readonly</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the input cannot be typed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>disabled</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the component should be disabled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>maxlength</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Maximum number of character allows in the input field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>size</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Size of the input field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>DOM element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the overlay panel should be mounted.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tabindex</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Index of the element in tabbing order.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>autoFocus</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the component should automatically get focus on load.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>ariaLabelledBy</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>itemTemplate</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Template function to return the content of a list item.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>selectedItemTemplate</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Template function to return the content of a selected item.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>completeMethod</td>
-                                        <td>
-                                            event.originalEvent: browser event <br />
-                                            event.query: Value to search with
-                                        </td>
-                                        <td>Callback to invoke to search for suggestions.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onChange</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.value: Value of the component</td>
-                                        <td>Callback to invoke when autocomplete value changes.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onFocus</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke when autocomplete gets focus.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onBlur</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke when autocomplete loses focus.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onSelect</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.value: Value of the component</td>
-                                        <td>Callback to invoke when a suggestion is selected.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onUnselect</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.value: Value of the component</td>
-                                        <td>Callback to invoke when a selected value is removed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onDropdownClick</td>
-                                        <td>
-                                            event.originalEvent: browser event <br />
-                                            event.query: Current value of the input field
-                                        </td>
-                                        <td>Callback to invoke to when dropdown button is clicked.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onClick</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke on click.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onDblClick</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke on double click.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onMouseDown</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke to when a mouse button is pressed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onKeyUp</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke to when a key is released.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onKeyPress</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke to when a key is pressed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onContextMenu</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke on right-click.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onClear</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke when input is cleared by the user.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-autocomplete</td>
-                                        <td>Container element</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-autocomplete-panel</td>
-                                        <td>Overlay panel of suggestions.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-autocomplete-items</td>
-                                        <td>List container of suggestions.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-autocomplete-item</td>
-                                        <td>List item of a suggestion.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-autocomplete-token</td>
-                                        <td>Element of a selected item in multiple mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-autocomplete-token-icon</td>
-                                        <td>Close icon element of a selected item in multiple mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-autocomplete-token-label</td>
-                                        <td>Label of a selected item in multiple mode.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/autocomplete" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {AutoComplete} from 'primereact/autocomplete';
-import {CountryService} from '../service/CountryService';
-
-export class AutoCompleteDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            countriesData: [],
-            filteredCountriesSingle: null,
-            filteredBrands: null,
-            filteredCountriesMultiple: null
-        };
-
-        this.filterCountrySingle = this.filterCountrySingle.bind(this);
-        this.filterBrands = this.filterBrands.bind(this);
-        this.filterCountryMultiple = this.filterCountryMultiple.bind(this);
-        this.countryservice = new CountryService();
-    }
-
-    componentDidMount() {
-        this.countriesData = this.countryservice.getCountries(this);
-        this.brands = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo'];
-    }
-
-    filterCountrySingle(event) {
-        setTimeout(() => {
-            var results = this.state.countriesData.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-            this.setState({ filteredCountriesSingle: results });
-        }, 250);
-    }
-
-    filterBrands(event) {
-        setTimeout(() => {
-            let results;
-
-            if (event.query.length === 0) {
-                results = [...this.brands];
-            }
-            else {
-                results = this.brands.filter((brand) => {
-                    return brand.toLowerCase().startsWith(event.query.toLowerCase());
-                });
-            }
-
-            this.setState({ filteredBrands: results });
-        }, 250);
-    }
-
-    filterCountryMultiple(event) {
-        setTimeout(() => {
-            let results = this.state.countriesData.filter((country) => {
-                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
-            });
-
-            this.setState({ filteredCountriesMultiple: results });
-        }, 250);
-    }
-
-    itemTemplate(brand) {
-        return (
-            <div className="p-clearfix">
-                <img alt={brand} src={'showcase/resources/demo/images/car/\${brand}.png'} style={{ width: '32px', display: 'inline-block', margin: '5px 0 2px 5px' }} />
-                <div style={{ fontSize: '16px', float: 'right', margin: '10px 10px 0 0' }}>{brand}</div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>AutoComplete</h1>
-                        <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <AutoComplete value={this.state.country} suggestions={this.state.filteredCountriesSingle} completeMethod={this.filterCountrySingle} field="name"
-                        size={30} placeholder="Countries" minLength={1} onChange={(e) => this.setState({country: e.value})} />
-                    <span style={{ marginLeft: '10px' }}>Country: {this.state.country ? this.state.country.name || this.state.country : 'none'}</span>
-
-                    <h3>Advanced</h3>
-                    <AutoComplete value={this.state.brand} suggestions={this.state.filteredBrands} completeMethod={this.filterBrands} size={30} minLength={1}
-                        placeholder="Hint: type 'v' or 'f'" dropdown={true} itemTemplate={this.itemTemplate.bind(this)} onChange={(e) => this.setState({brand: e.value})} />
-                    <span style={{ marginLeft: '50px' }}>Brand: {this.state.brand || 'none'}</span>
-
-                    <h3>Multiple</h3>
-                    <span className="p-fluid">
-                        <AutoComplete value={this.state.countries} suggestions={this.state.filteredCountriesMultiple} completeMethod={this.filterCountryMultiple}
-                            minLength={1} placeholder="Countries" field="name" multiple={true} onChange={(e) => this.setState({countries: e.value})} />
-                    </span>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView >
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/breadcrumb/BreadcrumbDemo.js b/src/showcase/breadcrumb/BreadcrumbDemo.js
deleted file mode 100644
index 9d8774f1c8..0000000000
--- a/src/showcase/breadcrumb/BreadcrumbDemo.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {BreadCrumb} from '../../components/breadcrumb/BreadCrumb';
-
-export class BreadcrumbDemo extends Component {
-
-    render() {
-        const items = [
-            {label:'Categories'},
-            {label:'Sports'},
-            {label:'Football'},
-            {label:'Countries'},
-            {label:'Spain'},
-            {label:'F.C. Barcelona'},
-            {label:'Squad'},
-            {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
-        ];
-
-        const home = {icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact'}
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Breadcrumb</h1>
-                        <p>Breadcrumb provides contextual information about page hierarchy.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("breadcrumb")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <BreadCrumb model={items} home={home} />
-                </div>
-
-                <BreadCrumbDoc/>
-
-            </div>
-        );
-    }
-}
-
-class BreadCrumbDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Breadcrumb} from 'primereact/breadcrumb';
-
-`}</CodeHighlight>
-
-                        <h3>MenuModel API</h3>
-                        <p>BreadCrumb uses the common menumodel api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>BreadCrumb requires a collection of menuitems as its model.</p>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-const items = [
-    {label:'Categories'},
-    {label:'Sports'},
-    {label:'Football'},
-    {label:'Countries'},
-    {label:'Spain'},
-    {label:'F.C. Barcelona'},
-    {label:'Squad'},
-    {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
-];
-
-const home = {icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact'}
-
-`}
-</CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<BreadCrumb model={items} home="home"/>
-
-`}
-                        </CodeHighlight>
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>id</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>model</td>
-                                    <td>array</td>
-                                    <td>null</td>
-                                    <td>An array of menuitems.</td>
-                                </tr>
-                                <tr>
-                                    <td>home</td>
-                                    <td>MenuItem</td>
-                                    <td>null</td>
-                                    <td>MenuItem configuration for the home icon.</td>
-                                </tr>
-                                <tr>
-                                    <td>style</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Inline style of the component.</td>
-                                </tr>
-                                <tr>
-                                    <td>className</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the component.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-breadcrumb</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem</td>
-                                        <td>Menuitem element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-text</td>
-                                        <td>Label of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-breadcrumb-chevron</td>
-                                        <td>Chevron element.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/breadcrumb" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {BreadCrumb} from 'primereact/breadcrumb';
-
-export class BreadcrumbDemo extends Component {
-
-    render() {
-        const items = [
-            {label:'Categories'},
-            {label:'Sports'},
-            {label:'Football'},
-            {label:'Countries'},
-            {label:'Spain'},
-            {label:'F.C. Barcelona'},
-            {label:'Squad'},
-            {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
-        ];
-
-        const home = {icon: 'pi pi-home', url: 'https://www.primefaces.org/primereact'}
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Breadcrumb</h1>
-                        <p>Breadcrumb provides contextual information about page hierarchy.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <BreadCrumb model={items} home={home} />
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/button/ButtonDemo.js b/src/showcase/button/ButtonDemo.js
deleted file mode 100644
index 5b4a7ea608..0000000000
--- a/src/showcase/button/ButtonDemo.js
+++ /dev/null
@@ -1,313 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ButtonDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Button</h1>
-                        <p>Button is an extension to standard input element with icons and theming.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("button")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation button-demo">
-                    <h3 className="first">Basic</h3>
-                    <Button label="Click" />
-                    <Button label="Click" icon="pi pi-check" />
-                    <Button label="Click" icon="pi pi-check" iconPos="right" />
-                    <Button icon="pi pi-check" />
-                    <Button label="Click" disabled="disabled" />
-
-                    <h3>Severities</h3>
-                    <Button label="Primary" />
-                    <Button label="Secondary" className="p-button-secondary" />
-                    <Button label="Success" className="p-button-success" />
-                    <Button label="Info" className="p-button-info" />
-                    <Button label="Warning" className="p-button-warning" />
-                    <Button label="Danger" className="p-button-danger" />
-
-                    <h3>Raised Buttons</h3>
-                    <Button label="Primary" className="p-button-raised" />
-                    <Button label="Secondary" className="p-button-raised p-button-secondary" />
-                    <Button label="Success" className="p-button-raised p-button-success" />
-                    <Button label="Info" className="p-button-raised p-button-info" />
-                    <Button label="Warning" className="p-button-raised p-button-warning" />
-                    <Button label="Danger" className="p-button-raised p-button-danger" />
-
-                    <h3>Rounded Buttons</h3>
-                    <Button label="Primary" className="p-button-rounded" />
-                    <Button label="Secondary" className="p-button-rounded p-button-secondary" />
-                    <Button label="Success" className="p-button-rounded p-button-success" />
-                    <Button label="Info" className="p-button-rounded p-button-info" />
-                    <Button label="Warning" className="p-button-rounded p-button-warning" />
-                    <Button label="Danger" className="p-button-rounded p-button-danger" />
-                </div>
-
-                <ButtonDoc />
-            </div>
-        )
-    }
-}
-
-class ButtonDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Button} from 'primereact/button';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Button is created using the Button element.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Button />
-
-`}
-</CodeHighlight>
-
-                        <h3>Label</h3>
-                        <p>Text of the button is defined using the <i>label</i> property.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Button label="Save" />
-
-`}
-</CodeHighlight>
-
-                        <h3>Icons</h3>
-                        <p>Icon on a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute. Default
-                        icon position is "left" and alternative is "right". To display only an icon, leave label as undefined.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Button label="Click" icon="pi pi-check" />
-<Button label="Click" icon="pi pi-check" iconPos="right" />
-<Button icon="pi pi-check" iconPos="right" />
-
-`}
-</CodeHighlight>
-
-                        <h3>Events</h3>
-                        <p>Events are defined with the standard notation.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Button label="Click" onClick={this.handleClick} />
-
-`}
-</CodeHighlight>
-
-
-
-                        <h3>Severity</h3>
-                        <p>Different color options are available as severity levels.</p>
-
-                        <ul>
-                            <li>.p-button-secondary</li>
-                            <li>.p-button-success</li>
-                            <li>.p-button-info</li>
-                            <li>.p-button-warning</li>
-                            <li>.p-button-danger</li>
-                        </ul>
-
-<CodeHighlight className="language-jsx">
-{`
-<Button label="Primary" />
-<Button label="Secondary" className="p-button-secondary" />
-<Button label="Success" className="p-button-success" />
-<Button label="Info" className="p-button-info" />
-<Button label="Warning" className="p-button-warning" />
-<Button label="Danger" className="p-button-danger" />
-
-`}
-</CodeHighlight>
-
-                        <h3>Raised and Rounded Buttons</h3>
-                        <p>A button can be raised by having "p-button-raised" style class and similarly borders can be made rounded using "p-button-rounded" class.</p>
-                        <CodeHighlight className="language-jsx">
-{`
-<Button label="Proceed" className="p-button-raised p-button-rounded" />
-
-`}
-</CodeHighlight>
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>label</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Text of the button.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>icon</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the icon.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>iconPos</td>
-                                        <td>string</td>
-                                        <td>left</td>
-                                        <td>Position of the icon, valid values are "left" and "right".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-button</td>
-                                        <td>Button element</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-button-icon</td>
-                                        <td>Icon element</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-button-text</td>
-                                        <td>Label element of the button</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/button" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Button} from 'primereact/button';
-
-export class ButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            count: 0
-        };
-        this.increment = this.increment.bind(this);
-    }
-
-    increment() {
-        this.setState((prevState, props) => ({
-            count: prevState.count + 1
-        }));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Button</h1>
-                        <p>Button is an extension to standard input element with icons and theming.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation button-demo">
-                    <h3 className="first">Basic</h3>
-                    <Button label="Click" />
-                    <Button label="Click" icon="pi pi-check" />
-                    <Button label="Click" icon="pi pi-check" iconPos="right" />
-                    <Button icon="pi pi-check" />
-                    <Button label="Click" disabled="disabled" />
-
-                    <h3>Severities</h3>
-                    <Button label="Primary" />
-                    <Button label="Secondary" className="p-button-secondary" />
-                    <Button label="Success" className="p-button-success" />
-                    <Button label="Info" className="p-button-info" />
-                    <Button label="Warning" className="p-button-warning" />
-                    <Button label="Danger" className="p-button-danger" />
-
-                    <h3>Raised Buttons</h3>
-                    <Button label="Primary" className="p-button-raised" />
-                    <Button label="Secondary" className="p-button-raised p-button-secondary" />
-                    <Button label="Success" className="p-button-raised p-button-success" />
-                    <Button label="Info" className="p-button-raised p-button-info" />
-                    <Button label="Warning" className="p-button-raised p-button-warning" />
-                    <Button label="Danger" className="p-button-raised p-button-danger" />
-
-                    <h3>Rounded Buttons</h3>
-                    <Button label="Primary" className="p-button-rounded" />
-                    <Button label="Secondary" className="p-button-rounded p-button-secondary" />
-                    <Button label="Success" className="p-button-rounded p-button-success" />
-                    <Button label="Info" className="p-button-rounded p-button-info" />
-                    <Button label="Warning" className="p-button-rounded p-button-warning" />
-                    <Button label="Danger" className="p-button-rounded p-button-danger" />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView >
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/calendar/CalendarDemo.js b/src/showcase/calendar/CalendarDemo.js
deleted file mode 100644
index 47325b4d6f..0000000000
--- a/src/showcase/calendar/CalendarDemo.js
+++ /dev/null
@@ -1,1039 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Calendar} from '../../components/calendar/Calendar';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class CalendarDemo extends Component {
-
-    constructor() {
-        super();
-
-        let today = new Date();
-        let month = today.getMonth();
-        let year = today.getFullYear();
-        let prevMonth = (month === 0) ? 11 : month - 1;
-        let prevYear = (prevMonth === 11) ? year - 1 : year;
-        let nextMonth = (month === 11) ? 0 : month + 1;
-        let nextYear = (nextMonth === 0) ? year + 1 : year;
-
-        let minDate = new Date();
-        minDate.setMonth(prevMonth);
-        minDate.setFullYear(prevYear);
-        let maxDate = new Date();
-        maxDate.setMonth(nextMonth);
-        maxDate.setFullYear(nextYear);
-
-        this.state = {
-            date1: null,
-            date2: null,
-            date3: null,
-            date4: null,
-            date5: null,
-            date6: null,
-            date7: null,
-            date8: null,
-            date9: null,
-            date10: null,
-            date11: null,
-            date12: null,
-            date13: null,
-            dates1: null,
-            dates2: null,
-            minDate: minDate,
-            maxDate: maxDate,
-            invalidDates: [today]
-        };
-
-        this.dateTemplate = this.dateTemplate.bind(this);
-    }
-
-    dateTemplate(date) {
-        if (date.day > 10 && date.day < 15) {
-            return (
-                <div style={{backgroundColor: '#1dcbb3', color: '#ffffff', fontWeight: 'bold', borderRadius: '50%', width: '2em', height: '2em', lineHeight: '2em', padding: 0}}>{date.day}</div>
-            );
-        }
-        else {
-            return date.day;
-        }
-    }
-
-    render() {
-        const es = {
-            firstDayOfWeek: 1,
-            dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
-            dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
-            dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
-            monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
-            monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Calendar</h1>
-                        <p>Calendar is a form component to work with dates.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("calendar")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation inputgrid-demo">
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <h3>Basic</h3>
-                            <Calendar value={this.state.date1} onChange={(e) => this.setState({date1: e.value})} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Spanish</h3>
-                            <Calendar value={this.state.date2} onChange={(e) => this.setState({date2: e.value})} locale={es} dateFormat="dd/mm/yy" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Icon</h3>
-                            <Calendar value={this.state.date3} onChange={(e) => this.setState({date3: e.value})} showIcon={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Min-Max</h3>
-                            <Calendar value={this.state.date4} onChange={(e) => this.setState({date4: e.value})} minDate={this.state.minDate} maxDate={this.state.maxDate} readOnlyInput={true}/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Disabled Days</h3>
-                            <Calendar value={this.state.date5} onChange={(e) => this.setState({date5: e.value})} disabledDates={this.state.invalidDates} disabledDays={[0,6]} readOnlyInput={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Navigators</h3>
-                            <Calendar value={this.state.date6} onChange={(e) => this.setState({date6: e.value})} monthNavigator={true} yearNavigator={true} yearRange="2010:2030"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Multiple Selection</h3>
-                            <Calendar value={this.state.dates1} onChange={(e) => this.setState({dates1: e.value})} selectionMode="multiple" readOnlyInput={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Range Selection</h3>
-                            <Calendar value={this.state.dates2} onChange={(e) => this.setState({dates2: e.value})} selectionMode="range" readOnlyInput={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Button Bar</h3>
-                            <Calendar value={this.state.date7} onChange={(e) => this.setState({date7: e.value})} showButtonBar={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Time / 24h</h3>
-                            <Calendar value={this.state.date8} onChange={(e) => this.setState({date8: e.value})} showTime={true} showSeconds={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Time Only / 12h</h3>
-                            <Calendar value={this.state.date9} onChange={(e) => this.setState({date9: e.value})} timeOnly={true} hourFormat="12" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Date Template</h3>
-                            <Calendar value={this.state.date10} onChange={(e) => this.setState({date10: e.value})} dateTemplate={this.dateTemplate} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Multiple Months</h3>
-                            <Calendar value={this.state.date11} onChange={(e) => this.setState({date11: e.value})} numberOfMonths={3} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Month/Year Picker</h3>
-                            <Calendar value={this.state.date12} onChange={(e) => this.setState({date12: e.value})} view="month" dateFormat="mm/yy" yearNavigator={true} yearRange="2010:2030"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Touch UI</h3>
-                            <Calendar value={this.state.date13} onChange={(e) => this.setState({date13: e.value})} touchUI={true} />
-                        </div>
-                    </div>
-
-                    <h3>Inline</h3>
-                    <Calendar value={this.state.date14} onChange={(e) => this.setState({date14: e.value})} inline={true} showWeek={true} />
-                </div>
-
-                <CalendarDoc></CalendarDoc>
-            </div>
-        );
-    }
-}
-
-export class CalendarDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Calendar} from 'primereact/calendar';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Calendar is used a controlled input component with <i>value</i> and <i>onChange</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>Popup and Inline</h3>
-            <p>Calendar is displayed in a popup by default whereas <i>inline</i> property needs to be enabled for inline mode.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Calendar inline={true} value={this.state.date} onChange={(e) => this.setState({date: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>View Date</h3>
-            <p><i>viewDate</i> defines the date whose month and year are used to display the calendar. By default calendar uses value to render the view and falls back to today's date when value is not defined. In case you'd like
-            to display a different month/year use <i>viewDate</i>. The usage of this property can either be controlled or uncontrolled. In controlled mode, <i>onViewDateChange</i> is required to manage the viewDate whereas in
-            uncontrolled mode, viewDate is used only once in initial rendering and ignored in updates. If you'd like to change the displayed month/year programmatically, use the viewChange in controlled mode.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.dates} onChange={(e) => this.setState({date: e.value})} viewDate={this.state.viewDate} onViewDateChange={(e) => this.setState({viewDate: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>Selection Mode</h3>
-            <p>Calendar offers "single" (default), "multiple" and "range" selection types controlled via the <i>selectionMode</i> property. In single, mode the bound value should be an array whereas in multiple
-            case an array is required. Third alternative is the range mode that allows selecting a range based on an array of two values where first value is the start date and second value
-            is the end date. Note that time picker is not currently supported in multiple and range modes.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Calendar selectionMode="multiple" value={this.state.dates} onChange={(e) => this.setState({dates: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>DateFormat</h3>
-            <p>Default date format is "mm/dd/yy" which can be customized using the <i>dateFormat</i> property.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Calendar dateFormat="dd/mm/yy" value={this.state.date} onChange={(e) => this.setState({date: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <p>Following options can be a part of the format.</p>
-            <ul>
-    			<li>d - day of month (no leading zero)</li>
-    			<li>dd - day of month (two digit)</li>
-    			<li>o - day of the year (no leading zeros)</li>
-    			<li>oo - day of the year (three digit)</li>
-    			<li>D - day name short</li>
-    			<li>DD - day name long</li>
-    			<li>m - month of year (no leading zero)</li>
-    			<li>mm - month of year (two digit)</li>
-    			<li>M - month name short</li>
-    			<li>MM - month name long</li>
-    			<li>y - year (two digit)</li>
-    			<li>yy - year (four digit)</li>
-    			<li>@ - Unix timestamp (ms since 01/01/1970)</li>
-    			<li> ! - Windows ticks (100ns since 01/01/0001)</li>
-    			<li>'...' - literal text</li>
-    			<li>'' - single quote</li>
-    			<li>anything else - literal text</li>
-		    </ul>
-
-            <h3>Time</h3>
-            <p>TimePicker is enabled with <i>showTime</i> property and <i>hourFormat</i> is used to select the 24 (default) or 12 hour mode. Optionally enabling <i>timeOnly</i>
-                displays a calendare with time controls only.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Calendar showTime={true} hourFormat="12" value={this.state.date1} onChange={(e) => this.setState({date1: e.value})}></Calendar>
-<Calendar showTime={true} hourFormat="24" value={this.state.date2} onChange={(e) => this.setState({date2: e.value})}></Calendar>
-<Calendar timeOnly={true} showTime={true} hourFormat="24" value={this.state.date3} onChange={(e) => this.setState({date3: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>Date Restriction</h3>
-            <p>To disable entering dates manually, set <i>readOnlyInput</i> to true and to restrict selectable date ranges use <i>minDate</i> and <i>maxDate</i> options.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Calendar minDate={minDate} maxDate={maxDate} readOnlyInput={true} value={this.state.date} onChange={(e) => this.setState({date: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>Disable specific dates and/or days</h3>
-            <p>Specific dates or days can be disabled as well, in this case set <i>readOnlyInput</i> to true and to restrict selectable dates use <i>disabledDates</i> and/or <i>disabledDays</i> options. <i>disabledDates</i>
-            property should be an array of dates and <i>disabledDays</i> should be an array of disabled weekdays.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Calendar disabledDates={invalidDates}" disabledDays={[0,6]} readOnlyInput={true} value={this.state.date} onChange={(e) => this.setState({date: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>Button Bar</h3>
-            <p>Button bar displays today and clear buttons and activated using the <i>showButtonBar</i> property.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})} showButtonBar={true}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>Multiple Months</h3>
-            <p>Displaying multiple months is enabled by setting <i>numberOfMonths</i> property to a value greater than 1.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})} numberOfMonths={3}></Calendar>
-
-`}
-</CodeHighlight>
-
-            <h3>Localization</h3>
-            <p>Localization for different languages and formats is defined by binding the locale settings object to the <i>locale</i> property. Following is a Spanish calendar.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Calendar locale={es} dateFormat="dd/mm/yy" value={this.state.date} onChange={(e) => this.setState({date: e.value})}></Calendar>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-let es = {
-    firstDayOfWeek: 1,
-    dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
-    dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
-    dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
-    monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
-    monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"],
-    today: 'Hoy',
-    clear: 'Limpiar',
-    dateFormat: 'dd/mm/yy',
-    weekHeader: 'Sm'
-};
-
-`}
-</CodeHighlight>
-
-            <h3>Date Template</h3>
-            <p>Date cell contents can be templated using the <i>dateTemplate</i> property that returns the content of a cell. This is a handy feature to highlight specific dates. Note that the
-            variable passed to the template is not a date instance but a metadata object to represent a Date with "day", "month", "year", "otherMonth", "today" and "selectable" properties to represent the date. Example below changes the styling of dates between 10 and 15.</p>
-
-            <CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})} dateTemplate={this.dateTemplate} />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-dateTemplate(date) {
-    if (date.day > 10 && date.day < 15) {
-        return (
-            <div style={{backgroundColor: '#1dcbb3', color: '#ffffff', fontWeight: 'bold', borderRadius: '50%', width: '2em', height: '2em', lineHeight: '2em', padding: 0}}>{date.day}</div>
-        );
-    }
-    else {
-        return date.day;
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Header and Footer</h3>
-            <p><i>headerTemplate</i> and <i>footerTemplate</i> properties are available to place custom content at these sections.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})} headerTemplate={<Button label="Custom Button" />} footerTemplate={<div>Footer Content</div>} />
-
-`}
-</CodeHighlight>
-
-            <h3>Month and Year Navigator</h3>
-            <p>Navigators are used to quickly change the displayed month and year using dropdowns. Enabling <i>monthNavigator</i> displays a dropdown with months whereas <i>yearNavigator</i> along with <i>yearRange</i> displays
-            available years. Format of the <i>yearRange</i> is "startYear:endYear".</p>
-
-            <CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})} monthNavigator={true} yearNavigator={true} yearRange="2010:2030" />
-
-`}
-</CodeHighlight>
-
-            <h3>Month Picker</h3>
-            <p>Month picker is used to select month and year only without the date, set <i>view</i> mode as "month" to activate month picker.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})} view="month" dateFormat="mm/yy" yearNavigator={true} yearRange="2010:2030"/>
-
-`}
-</CodeHighlight>
-
-            <h3>Touch UI</h3>
-            <p>Touch UI mode displays the calendar overlay at the center of the screen as optimized for touch devices.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Calendar value={this.state.date} onChange={(e) => this.setState({date: e.value})} touchUI={true} />
-
-`}
-</CodeHighlight>
-
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>viewDate</td>
-                            <td>date</td>
-                            <td>null</td>
-                            <td>Date instance whose month and year are used to display the calendar.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>inline</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, displays the calendar as inline instead of an overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
-                        </tr>
-                        <tr>
-                            <td>readOnlyInput</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>When specified, prevents entering the date manually with keyboard.</td>
-                        </tr>
-                        <tr>
-                            <td>keepInvalid</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Keep invalid value when input blur.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, disables the component.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text for the input.</td>
-                        </tr>
-                        <tr>
-                            <td>showIcon</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, displays a button with icon next to input.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>pi pi-calendar</td>
-                            <td>Icon of the calendar button.</td>
-                        </tr>
-                        <tr>
-                            <td>showOnFocus</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>When disabled, datepicker will not be visible with input focus.</td>
-                        </tr>
-                        <tr>
-                            <td>numberOfMonths</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of months to display.</td>
-                        </tr>
-                        <tr>
-                            <td>view</td>
-                            <td>string</td>
-                            <td>date</td>
-                            <td>Type of view to display, valid valids are "date" for datepicker and "month" for month picker.</td>
-                        </tr>
-                        <tr>
-                            <td>touchUI</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, calendar overlay is displayed as optimized for touch devices.</td>
-                        </tr>
-                        <tr>
-                            <td>showTime</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display timepicker.</td>
-                        </tr>
-                        <tr>
-                            <td>timeOnly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display timepicker only.</td>
-                        </tr>
-                        <tr>
-                            <td>showSeconds</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to show the seconds in time picker.</td>
-                        </tr>
-                        <tr>
-                            <td>showMillisec</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to show the milliseconds in time picker.</td>
-                        </tr>
-                        <tr>
-                            <td>hourFormat</td>
-                            <td>string</td>
-                            <td>24</td>
-                            <td>Specifies 12 or 24 hour format.</td>
-                        </tr>
-                        <tr>
-                            <td>stepHour</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Hours to change per step.</td>
-                        </tr>
-                        <tr>
-                            <td>stepMinute</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Minutes to change per step.</td>
-                        </tr>
-                        <tr>
-                            <td>stepSecond</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Seconds to change per step.</td>
-                        </tr>
-                        <tr>
-                            <td>stepMillisec</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Milliseconds to change per step.</td>
-                        </tr>
-                        <tr>
-                            <td>shortYearCutoff</td>
-                            <td>string</td>
-                            <td>+10</td>
-                            <td>The cutoff year for determining the century for a date.</td>
-                        </tr>
-                        <tr>
-                            <td>hideOnDateTimeSelect</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to hide the overlay on date selection when showTime is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>showWeek</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, calendar will show week numbers.</td>
-                        </tr>
-                        <tr>
-                            <td>dateFormat</td>
-                            <td>string</td>
-                            <td>mm/dd/yy</td>
-                            <td>Format of the date.</td>
-                        </tr>
-                        <tr>
-                            <td>panelStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the datetimepicker panel.</td>
-                        </tr>
-                        <tr>
-                            <td>panelClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the datetimepicker panel.</td>
-                        </tr>
-                        <tr>
-                            <td>monthNavigator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the month should be rendered as a dropdown instead of text.</td>
-                        </tr>
-                        <tr>
-                            <td>yearNavigator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the year should be rendered as a dropdown instead of text.</td>
-                        </tr>
-                        <tr>
-                            <td>disabledDates</td>
-                            <td>array;</td>
-                            <td>null</td>
-                            <td>Array with dates to disable.</td>
-                        </tr>
-                        <tr>
-                            <td>disabledDays</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array with disabled weekday numbers.</td>
-                        </tr>
-                        <tr>
-                            <td>minDate</td>
-                            <td>Date</td>
-                            <td>null</td>
-                            <td>The minimum selectable date.</td>
-                        </tr>
-                        <tr>
-                            <td>maxDate</td>
-                            <td>Date</td>
-                            <td>null</td>
-                            <td>The maximum selectable date.</td>
-                        </tr>
-                        <tr>
-                            <td>maxDateCount</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of selectable dates in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>showOtherMonths</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.</td>
-                        </tr>
-                        <tr>
-                            <td>selectOtherMonths</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.</td>
-                        </tr>
-                        <tr>
-                            <td>showButtonBar</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display today and clear buttons at the footer</td>
-                        </tr>
-                        <tr>
-                            <td>todayButtonClassName</td>
-                            <td>string</td>
-                            <td>p-secondary-button</td>
-                            <td>Style class of the today button.</td>
-                        </tr>
-                        <tr>
-                            <td>clearButtonClassName</td>
-                            <td>string</td>
-                            <td>p-secondary-button</td>
-                            <td>Style class of the clear button.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>autoZIndex</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to automatically manage layering.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>DOM element</td>
-                            <td>null</td>
-                            <td>DOM element instance where the dialog should be mounted.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                        <tr>
-                            <td>dateTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets a date information and returns the cell content in datepicker.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onFocus</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on focus event of input field.</td>
-                        </tr>
-                        <tr>
-                            <td>onBlur</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on blur event of input field.</td>
-                        </tr>
-                        <tr>
-                            <td>onInput</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke on input event of input field.</td>
-                        </tr>
-                        <tr>
-                            <td>onSelect</td>
-                            <td>originalEvent: Browser event <br />
-                                value: Selected date</td>
-                            <td>Callback to invoke when a date is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>onChange</td>
-                            <td>originalEvent: Browser event <br />
-                                value: New date</td>
-                            <td>Callback to invoke when value changes.</td>
-                        </tr>
-                        <tr>
-                            <td>onTodayButtonClick</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when today button is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>onClearButtonClick</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when clear button is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>onViewChange</td>
-                            <td>originalEvent: Browser event <br />
-                                value: New date</td>
-                            <td>Callback to invoke when the displayed month/year is changed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-calendar</td>
-                            <td>Main container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-calendar-w-btn</td>
-                            <td>Main container element when button is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>p-calendar-timeonly</td>
-                            <td>Main container element in time picker only mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputtext</td>
-                            <td>Input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker</td>
-                            <td>Datepicker element</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-inline</td>
-                            <td>Datepicker element in inline mode</td>
-                        </tr>
-                        <tr>
-                            <td>p-monthpicker</td>
-                            <td>Datepicker element in month view.</td>
-                        </tr>
-                        <tr>
-                            <td>p-monthpicker-month</td>
-                            <td>Month cell in month view mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-touch-ui</td>
-                            <td>Datepicker element in touch ui mode.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-calendar</td>
-                            <td>Table containing dates of a month.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-current-day</td>
-                            <td>Cell of selected date.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datepicker-today</td>
-                            <td>Cell of today's date.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/calendar" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Calendar} from 'primereact/calendar';
-
-export class CalendarDemo extends Component {
-
-    constructor() {
-        super();
-
-        let today = new Date();
-        let month = today.getMonth();
-        let year = today.getFullYear();
-        let prevMonth = (month === 0) ? 11 : month - 1;
-        let prevYear = (prevMonth === 11) ? year - 1 : year;
-        let nextMonth = (month === 11) ? 0 : month + 1;
-        let nextYear = (nextMonth === 0) ? year + 1 : year;
-
-        let minDate = new Date();
-        minDate.setMonth(prevMonth);
-        minDate.setFullYear(prevYear);
-        let maxDate = new Date();
-        maxDate.setMonth(nextMonth);
-        maxDate.setFullYear(nextYear);
-
-        this.state = {
-            date1: null,
-            date2: null,
-            date3: null,
-            date4: null,
-            date5: null,
-            date6: null,
-            date7: null,
-            date8: null,
-            date9: null,
-            date10: null,
-            date11: null,
-            date12: null,
-            date13: null,
-            dates1: null,
-            dates2: null,
-            minDate: minDate,
-            maxDate: maxDate,
-            invalidDates: [today]
-        };
-
-        this.dateTemplate = this.dateTemplate.bind(this);
-    }
-
-    dateTemplate(date) {
-        if (date.day > 10 && date.day < 15) {
-            return (
-                <div style={{backgroundColor: '#1dcbb3', color: '#ffffff', fontWeight: 'bold', borderRadius: '50%', width: '2em', height: '2em', lineHeight: '2em', padding: 0}}>{date.day}</div>
-            );
-        }
-        else {
-            return date.day;
-        }
-    }
-
-    render() {
-        const es = {
-            firstDayOfWeek: 1,
-            dayNames: ["domingo", "lunes", "martes", "miércoles", "jueves", "viernes", "sábado"],
-            dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
-            dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
-            monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
-            monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Calendar</h1>
-                        <p>Calendar is an input component to select a date.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation inputgrid-demo">
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <h3>Basic</h3>
-                            <Calendar value={this.state.date1} onChange={(e) => this.setState({date1: e.value})} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Spanish</h3>
-                            <Calendar value={this.state.date2} onChange={(e) => this.setState({date2: e.value})} locale={es} dateFormat="dd/mm/yy" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Icon</h3>
-                            <Calendar value={this.state.date3} onChange={(e) => this.setState({date3: e.value})} showIcon={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Min-Max</h3>
-                            <Calendar value={this.state.date4} onChange={(e) => this.setState({date4: e.value})} minDate={this.state.minDate} maxDate={this.state.maxDate} readOnlyInput={true}/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Disabled Days</h3>
-                            <Calendar value={this.state.date5} onChange={(e) => this.setState({date5: e.value})} disabledDates={this.state.invalidDates} disabledDays={[0,6]} readOnlyInput={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Navigators</h3>
-                            <Calendar value={this.state.date6} onChange={(e) => this.setState({date6: e.value})} monthNavigator={true} yearNavigator={true} yearRange="2010:2030"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Multiple Selection</h3>
-                            <Calendar value={this.state.dates1} onChange={(e) => this.setState({dates1: e.value})} selectionMode="multiple" readOnlyInput={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Range Selection</h3>
-                            <Calendar value={this.state.dates2} onChange={(e) => this.setState({dates2: e.value})} selectionMode="range" readOnlyInput={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Button Bar</h3>
-                            <Calendar value={this.state.date7} onChange={(e) => this.setState({date9: e.value})} showButtonBar={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Time / 24h</h3>
-                            <Calendar value={this.state.date8} onChange={(e) => this.setState({date8: e.value})} showTime={true} showSeconds={true} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Time Only / 12h</h3>
-                            <Calendar value={this.state.date9} onChange={(e) => this.setState({date9: e.value})} timeOnly={true} hourFormat="12" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Date Template</h3>
-                            <Calendar value={this.state.date10} onChange={(e) => this.setState({date10: e.value})} dateTemplate={this.dateTemplate} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Multiple Months</h3>
-                            <Calendar value={this.state.date11} onChange={(e) => this.setState({date11: e.value})} numberOfMonths={3} />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Month/Year Picker</h3>
-                            <Calendar value={this.state.date12} onChange={(e) => this.setState({date12: e.value})} view="month" dateFormat="mm/yy" yearNavigator={true} yearRange="2010:2030"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <h3>Touch UI</h3>
-                            <Calendar value={this.state.date13} onChange={(e) => this.setState({date13: e.value})} touchUI={true} />
-                        </div>
-                    </div>
-
-                    <h3>Inline</h3>
-                    <Calendar value={this.state.date14} onChange={(e) => this.setState({date14: e.value})} inline={true} showWeek={true} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/captcha/CaptchaDemo.js b/src/showcase/captcha/CaptchaDemo.js
deleted file mode 100644
index 70304a8972..0000000000
--- a/src/showcase/captcha/CaptchaDemo.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, {Component} from 'react';
-import {Captcha} from '../../components/captcha/Captcha';
-import {Growl} from '../../components/growl/Growl';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class CaptchaDemo extends Component {
-
-    constructor() {
-        super();
-        this.showResponse = this.showResponse.bind(this);
-    }
-
-    showResponse() {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'User Responded'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Captcha</h1>
-                        <p>Captcha is a form validation component based on Recaptcha.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("captcha")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation button-demo">
-                    <Growl ref={(el) => this.growl = el}></Growl>
-
-                    <Captcha siteKey="6Lf2XQkTAAAAANcvOwYqPxWL4iZDksFqHpS39GDA" onResponse={this.showResponse} />
-                </div>
-
-                <CaptchaDoc />
-            </div>
-        )
-    }
-}
-
-class CaptchaDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Captcha} from 'primereact/captcha';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Captcha is used with a siteKey and a callback to verify the response.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Captcha siteKey="YOUR_SITE_KEY" onResponse={this.showResponse}></Captcha>
-
-`}
-</CodeHighlight>
-
-                        <h3>Verification</h3>
-                        <p>In order to ensure if a response token is valid, verification against recaptcha api needs to be done at backend. <a href="https://developers.google.com/recaptcha/docs/verify">Read more</a> at
-                        official documentation.</p>
-<CodeHighlight className="language-javascript">
-{`
-showResponse(response) {
-    //call to a backend to verify against recaptcha with private key
-}
-
-`}
-</CodeHighlight>
-
-                        <p>In addition, include the captcha widget resource to your page.</p>
-<CodeHighlight className="language-jsx">
-{`
-<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
-
-`}
-</CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>siteKey</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Public sitekey.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>theme</td>
-                                        <td>string</td>
-                                        <td>light</td>
-                                        <td>The color scheme of the widget.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>type</td>
-                                        <td>string</td>
-                                        <td>image</td>
-                                        <td>The type of CAPTCHA to serve.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>size</td>
-                                        <td>string</td>
-                                        <td>normal</td>
-                                        <td>The size of the widget.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tabIndex</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>The tabindex of the widget and challenge.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>language</td>
-                                        <td>string</td>
-                                        <td>en</td>
-                                        <td>Language of the widget.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onResponse</td>
-                                        <td>event.response: The user response token.</td>
-                                        <td>The callback function to be executed when the user submits a successful CAPTCHA response.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onExpire</td>
-                                        <td>-</td>
-                                        <td>The callback function to be executed when the recaptcha response expires and the user needs to solve a new CAPTCHA.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Methods</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>reset</td>
-                                        <td>-</td>
-                                        <td>Resets the reCAPTCHA widget.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>getResponse</td>
-                                        <td>-</td>
-                                        <td>Gets the response for the reCAPTCHA widget.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>Google Recaptcha V2</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/captcha" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Captcha} from '../../components/captcha/Captcha';
-import {Growl} from '../../components/growl/Growl';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class CaptchaDemo extends Component {
-
-    constructor() {
-        super();
-        this.showResponse = this.showResponse.bind(this);
-    }
-
-    showResponse() {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'User Responded'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Captcha</h1>
-                        <p>Captcha is a form validation component based on Recaptcha.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation button-demo">
-                    <Growl ref={(el) => this.growl = el}></Growl>
-
-                    <Captcha siteKey="YOUR_SITE_KEY" onResponse={this.showResponse} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView >
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/card/CardDemo.js b/src/showcase/card/CardDemo.js
deleted file mode 100644
index 2920690922..0000000000
--- a/src/showcase/card/CardDemo.js
+++ /dev/null
@@ -1,266 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Card} from '../../components/card/Card';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class CardDemo extends Component {
-
-    render() {
-        const header = (
-            <img alt="Card" src='http://github.com/showcase/resources/demo/images/usercard.png'/>
-        );
-        const footer = (
-            <span>
-                <Button label="Save" icon="pi pi-check" style={{marginRight: '.25em'}} />
-                <Button label="Cancel" icon="pi pi-times" className="p-button-secondary" />
-            </span>
-        );
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Card</h1>
-                        <p>Card is a flexible container component.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("card")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Card title="Simple Card" style={{width: '360px'}}>
-                        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-                            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</div>
-                    </Card>
-
-                    <br/><br/>
-
-                    <Card title="Advanced Card" subTitle="Subtitle" style={{width: '360px'}} className="ui-card-shadow" footer={footer} header={header}>
-                        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-                            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</div>
-                    </Card>
-                </div>
-
-                <CardDoc />
-            </div>
-        )
-    }
-}
-
-class CardDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Card} from 'primereact/card';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Card is used as a container.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Card>
-    Content
-</Card>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Title</h3>
-                        <p>Title text of the card is provided using the <i>title</i> property whereas <strong>subTitle</strong> property is available for additional information about the card. Both of these properties accept JSX as well.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Card title="Title" subTitle="SubTitle">
-    Content
-</Card>
-`}
-                        </CodeHighlight>
-
-                        <h3>Header and Footer</h3>
-                        <p>Header and Footer sections are defined using the properties of the same name.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-const header = <img alt="Card" src='http://github.com/showcase/resources/demo/images/usercard.png'/>;
-const footer = <span>
-                <Button label="Save" icon="pi pi-check" style={{marginRight: '.25em'}}/>
-                <Button label="Cancel" icon="pi pi-times" className="p-button-secondary"/>
-             </span>;
-
-<Card footer={footer} header={header}>
-    Content
-</Card>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>header</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Header of the card.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>footer</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Footer of the card.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>title</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Title of the card.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>subTitle</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Secondary title of the card.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming">theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-card</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-card-title</td>
-                                    <td>Title element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-card-subtitle</td>
-                                    <td>Subtitle element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-card-content</td>
-                                    <td>Content of the card.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-card-footer</td>
-                                    <td>Footer of the card.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/card" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Card} from 'primereact/card';
-import {Button} from 'primereact/button';
-
-export class CardDemo extends Component {
-
-    render() {
-        const header = (
-            <img alt="Card" src='http://github.com/showcase/resources/demo/images/usercard.png'/>
-        );
-        const footer = (
-            <span>
-                <Button label="Save" icon="pi pi-check"/>
-                <Button label="Cancel" icon="pi pi-times" className="p-button-secondary"/>
-            </span>
-        );
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Card</h1>
-                        <p>Card is a flexible container component.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Card title="Simple Card" style={{width: '360px'}}>
-                        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-                            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</div>
-                    </Card>
-
-                    <br/><br/>
-
-                    <Card title="Advanced Card" subTitle="Subtitle" style={{width: '360px'}} className="ui-card-shadow" footer={footer} header={header}>
-                        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
-                            quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</div>
-                    </Card>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/carousel/CarouselDemo.js b/src/showcase/carousel/CarouselDemo.js
deleted file mode 100644
index 71831307d7..0000000000
--- a/src/showcase/carousel/CarouselDemo.js
+++ /dev/null
@@ -1,535 +0,0 @@
-import React, {Component} from 'react';
-import {Carousel} from '../../components/carousel/Carousel';
-import {CarService} from '../service/CarService';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Button} from '../../components/button/Button';
-
-export class CarouselDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 3,
-                numScroll: 3
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 2,
-                numScroll: 2
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1,
-                numScroll: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        return (
-            <div className="car-details">
-                <div className="p-grid p-nogutter">
-                    <div className="p-col-12">
-                        <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand} />
-                    </div>
-                    <div className="p-col-12 car-data">
-                        <div className="car-title">{car.brand}</div>
-                        <div className="car-subtitle">{car.year} | {car.color}</div>
-
-                        <div className="car-buttons">
-                            <Button icon="pi pi-search" className="p-button-secondary" />
-                            <Button icon="pi pi-star" className="p-button-secondary" />
-                            <Button icon="pi pi-cog" className="p-button-secondary" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const basicHeader = <h2>Basic</h2>;
-        const customHeader = <h2>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h2>
-        const verticalHeader = <h2>Vertical</h2>
-
-        return (
-            <div className="carousel-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Carousel</h1>
-                        <p>Carousel is a content slider featuring various customization options.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("carousel")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Carousel value={this.state.cars} itemTemplate={this.carTemplate} numVisible={4} numScroll={3}
-                        header={basicHeader} responsiveOptions={this.responsiveOptions}></Carousel>
-
-                    <Carousel value={this.state.cars} itemTemplate={this.carTemplate} numVisible={3} numScroll={1} className="custom-carousel"
-                        responsiveOptions={this.responsiveOptions} header={customHeader} circular={true} autoplayInterval={3000}></Carousel>
-
-                    <Carousel value={this.state.cars} itemTemplate={this.carTemplate} orientation="vertical" style={{maxWidth: '400px', marginTop: '2em'}}
-                        numVisible={1} numScroll={1} verticalViewPortHeight="330px" header={verticalHeader}></Carousel>
-                </div>
-
-                <CarouselDoc />
-            </div>
-        );
-    }
-}
-
-export class CarouselDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Carousel} from 'primereact/carousel';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Carousel requires a collection of items as its value along with a template to render each item.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Carousel value={this.state.cars} itemTemplate={this.carTemplate}></Carousel>
-
-`}
-</CodeHighlight>
-<CodeHighlight className="language-javascript">
-{`
-constructor() {
-    super();
-    this.state = {
-        cars: []
-    };
-    this.carservice = new CarService();
-    this.carTemplate = this.carTemplate.bind(this);
-}
-
-componentDidMount() {
-    this.carservice.getCars().then(data => this.setState({cars: data}));
-}
-
-carTemplate(car) {
-    // return content;
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Items per page and Scroll Items</h3>
-            <p>Number of items per page is defined using the <i>numVisible</i> property whereas number of items to scroll is defined with the <i>numScroll</i> property.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Carousel value={this.state.cars} itemTemplate={this.carTemplate} numVisible={3} numScroll={1}></Carousel>
-
-`}
-</CodeHighlight>
-
-            <h3>Responsive</h3>
-            <p>For responsive design, <i>numVisible</i> and <i>numScroll</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
-            objects whose breakpoint defines the max-width to apply the settings.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Carousel value={this.state.cars} itemTemplate={this.carTemplate} numVisible={3} numScroll={1} responsiveOptions={responsiveOptions}></Carousel>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-const responsiveOptions = [
-    {
-        breakpoint: '1024px',
-        numVisible: 3,
-        numScroll: 3
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 2,
-        numScroll: 2
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1,
-        numScroll: 1
-    }
-];
-
-`}
-</CodeHighlight>
-
-            <h3>Header and Footer</h3>
-            <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Carousel value={this.state.cars} itemTemplate={this.carTemplate} header={<h1>Header</h1>}></Carousel>
-
-`}
-</CodeHighlight>
-
-            <h3>Orientation</h3>
-            <p>Default layout of the Carousel is horizontal, other possible option is the vertical mode that is configured with the <i>orientation</i> property.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Carousel value={this.state.cars} itemTemplate={this.carTemplate} orientation="vertical"></Carousel>
-
-`}
-</CodeHighlight>
-
-            <h3>AutoPlay and Circular</h3>
-            <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
-
-            <h3>Controlled vs Uncontrolled</h3>
-            <p>In controlled mode, <i>page</i> and <i>onPageChange</i> properties need to be defined to control the first visible item.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Carousel value={this.state.cars} itemTemplate={this.carTemplate} page={this.state.page} onPageChange={(e) => this.setState({page: e.page})}></Carousel>
-
-`}
-</CodeHighlight>
-
-            <h3>Uncontrolled</h3>
-            <p>In uncontrolled mode, no additional properties are required. Initial page can be provided using the <i>page</i> property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
-                need to update the first visible item index, prefer to use the component as controlled.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Carousel value={this.state.cars} itemTemplate={this.carTemplate}></Carousel>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>page</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the first item.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Label of header.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Label of footer.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the value and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>circular</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if scrolling would be infinite.</td>
-                        </tr>
-                        <tr>
-                            <td>autoplayInterval</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Time in milliseconds to scroll items automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>numVisible</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of items per page.</td>
-                        </tr>
-                        <tr>
-                            <td>numScroll</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Number of items to scroll.</td>
-                        </tr>
-                        <tr>
-                            <td>responsiveOptions</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>An array of options for responsive design.</td>
-                        </tr>
-                        <tr>
-                            <td>orientation</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Specifies the layout of the component, valid values are "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>verticalViewPortHeight</td>
-                            <td>string</td>
-                            <td>300px</td>
-                            <td>Height of the viewport in vertical layout.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of main content.</td>
-                        </tr>
-                        <tr>
-                            <td>containerClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the viewport container.</td>
-                        </tr>
-                        <tr>
-                            <td>dotsContainerClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the paginator items.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onPageChange</td>
-                            <td>event.page = Value of the new page.</td>
-                            <td>Callback to invoke after scroll.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Element</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-carousel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-content</td>
-                            <td>Main content element. It contains the container of the viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-container</td>
-                            <td>Container of the viewport. It contains navigation buttons and viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-items-content</td>
-                            <td>Viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-dots-container</td>
-                            <td>Container of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-dot-item</td>
-                            <td>Paginator element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-carousel-dot-icon</td>
-                            <td>Paginator element icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/carousel" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Carousel} from 'primereact/carousel';
-import {Button} from 'primereact/button';
-import {CarService} from '../service/CarService';
-
-export class CarouselDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-
-        this.responsiveSettings = [
-            {
-                breakpoint: '1024px',
-                numVisible: 3,
-                numScroll: 3
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 2,
-                numScroll: 2
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1,
-                numScroll: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        return (
-            <div className="car-details">
-                <div className="p-grid p-nogutter">
-                    <div className="p-col-12">
-                        <img src={\`showcase/resources/demo/images/car/\${car.brand}.png\`} alt={car.brand} />
-                    </div>
-                    <div className="p-col-12 car-data">
-                        <div className="car-title">{car.brand}</div>
-                        <div className="car-subtitle">{car.year} | {car.color}</div>
-
-                        <div className="car-buttons">
-                            <Button icon="pi pi-search" className="p-button-secondary" />
-                            <Button icon="pi pi-star" className="p-button-secondary" />
-                            <Button icon="pi pi-cog" className="p-button-secondary" />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const basicHeader = <h2>Basic</h2>;
-        const customHeader = <h2>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h2>
-        const verticalHeader = <h2>Vertical</h2>
-
-        return (
-            <div className="carousel-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Carousel</h1>
-                        <p>Carousel is a content slider featuring various customization options.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Carousel value={this.state.cars} itemTemplate={this.carTemplate} numVisible={4} numScroll={3}
-                        header={basicHeader} responsive={this.responsiveSettings}></Carousel>
-
-                    <Carousel value={this.state.cars} itemTemplate={this.carTemplate} numVisible={3} numScroll={1} className="custom-carousel"
-                        responsive={this.responsiveSettings} header={customHeader} circular={true} autoplayInterval={3000}></Carousel>
-
-                    <Carousel value={this.state.cars} itemTemplate={this.carTemplate} orientation="vertical" style={{width: '400px', marginTop: '2em'}}
-                        numVisible={1} numScroll={1} responsive={this.responsiveSettings} verticalViewPortHeight="330px" header={verticalHeader}></Carousel>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/chart/BarChartDemo.js b/src/showcase/chart/BarChartDemo.js
deleted file mode 100644
index e66ebe8968..0000000000
--- a/src/showcase/chart/BarChartDemo.js
+++ /dev/null
@@ -1,360 +0,0 @@
-import React, {Component} from 'react';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Chart} from '../../components/chart/Chart';
-
-export class BarChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-                {
-                    label: 'My First dataset',
-                    backgroundColor: '#42A5F5',
-                    data: [65, 59, 80, 81, 56, 55, 40]
-                },
-                {
-                    label: 'My Second dataset',
-                    backgroundColor: '#9CCC65',
-                    data: [28, 48, 40, 19, 86, 27, 90]
-                }
-            ]
-        };
-
-        const multiAxisData = {
-			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-				label: 'Dataset 1',
-				backgroundColor: [
-					'#EC407A',
-                    '#AB47BC',
-                    '#42A5F5',
-                    '#7E57C2',
-                    '#66BB6A',
-                    '#FFCA28',
-                    '#26A69A'
-				],
-				yAxisID: 'y-axis-1',
-				data: [65, 59, 80, 81, 56, 55, 10]
-			}, {
-				label: 'Dataset 2',
-				backgroundColor: '#78909C',
-				yAxisID: 'y-axis-2',
-				data: [28, 48, 40, 19, 86, 27, 90]
-			}]
-        };
-
-        const multiAxisOptions = {
-            responsive: true,
-            tooltips: {
-                mode: 'index',
-                intersect: true
-            },
-            scales: {
-                yAxes: [{
-                    type: 'linear',
-                    display: true,
-                    position: 'left',
-                    id: 'y-axis-1',
-                    ticks: {
-                        min: 0,
-                        max: 100
-                    }
-                },
-                {
-                    type: 'linear',
-                    display: true,
-                    position: 'right',
-                    id: 'y-axis-2',
-                    gridLines: {
-                        drawOnChartArea: false
-                    },
-                    ticks: {
-                        min: 0,
-                        max: 100
-                    }
-                }]
-            }
-        }
-
-        const stackedData = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-				type: 'bar',
-                label: 'Dataset 1',
-                backgroundColor: '#66BB6A',
-				data: [
-					50,
-					25,
-					12,
-					48,
-					90,
-					76,
-					42
-				]
-			}, {
-				type: 'bar',
-				label: 'Dataset 2',
-				backgroundColor: '#FFCA28',
-				data: [
-					21,
-					84,
-					24,
-					75,
-					37,
-					65,
-                    34
-                ]
-			}, {
-				type: 'bar',
-				label: 'Dataset 3',
-				backgroundColor: '#42A5F5',
-				data: [
-					41,
-					52,
-					24,
-					74,
-					23,
-					21,
-					32
-				]
-            }]
-        };
-
-        const stackedOptions = {
-            tooltips: {
-                mode: 'index',
-                intersect: false
-            },
-            responsive: true,
-            scales: {
-                xAxes: [{
-                    stacked: true,
-                }],
-                yAxes: [{
-                    stacked: true
-                }]
-            }
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>BarChart</h1>
-                        <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Vertical</h3>
-                    <Chart type="bar" data={data} />
-
-                    <h3>Horizontal</h3>
-                    <Chart type="horizontalBar" data={data} />
-
-                    <h3>Multi Axis</h3>
-                    <Chart type="bar" data={multiAxisData} options={multiAxisOptions} />
-
-                    <h3>Stacked</h3>
-                    <Chart type="bar" data={stackedData} options={stackedOptions} />
-                </div>
-
-                <BarChartDemoDoc></BarChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-export class BarChartDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Chart} from 'primereact/chart';
-
-export class BarChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-                {
-                    label: 'My First dataset',
-                    backgroundColor: '#42A5F5',
-                    data: [65, 59, 80, 81, 56, 55, 40]
-                },
-                {
-                    label: 'My Second dataset',
-                    backgroundColor: '#9CCC65',
-                    data: [28, 48, 40, 19, 86, 27, 90]
-                }
-            ]
-        };
-
-        const multiAxisData = {
-			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-				label: 'Dataset 1',
-				backgroundColor: [
-					'#EC407A',
-                    '#AB47BC',
-                    '#42A5F5',
-                    '#7E57C2',
-                    '#66BB6A',
-                    '#FFCA28',
-                    '#26A69A'
-				],
-				yAxisID: 'y-axis-1',
-				data: [65, 59, 80, 81, 56, 55, 10]
-			}, {
-				label: 'Dataset 2',
-				backgroundColor: '#78909C',
-				yAxisID: 'y-axis-2',
-				data: [28, 48, 40, 19, 86, 27, 90]
-			}]
-        };
-
-        const multiAxisOptions = {
-            responsive: true,
-            tooltips: {
-                mode: 'index',
-                intersect: true
-            },
-            scales: {
-                yAxes: [{
-                    type: 'linear',
-                    display: true,
-                    position: 'left',
-                    id: 'y-axis-1',
-                    ticks: {
-                        min: 0,
-                        max: 100
-                    }
-                },
-                {
-                    type: 'linear',
-                    display: true,
-                    position: 'right',
-                    id: 'y-axis-2',
-                    gridLines: {
-                        drawOnChartArea: false
-                    },
-                    ticks: {
-                        min: 0,
-                        max: 100
-                    }
-                }]
-            }
-        }
-
-        const stackedData = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-				type: 'bar',
-                label: 'Dataset 1',
-                backgroundColor: '#66BB6A',
-				data: [
-					50,
-					25,
-					12,
-					48,
-					90,
-					76,
-					42
-				]
-			}, {
-				type: 'bar',
-				label: 'Dataset 2',
-				backgroundColor: '#FFCA28',
-				data: [
-					21,
-					84,
-					24,
-					75,
-					37,
-					65,
-                    34
-                ]
-			}, {
-				type: 'bar',
-				label: 'Dataset 3',
-				backgroundColor: '#42A5F5',
-				data: [
-					41,
-					52,
-					24,
-					74,
-					23,
-					21,
-					32
-				]
-            }]
-        };
-
-        const stackedOptions = {
-            tooltips: {
-                mode: 'index',
-                intersect: false
-            },
-            responsive: true,
-            scales: {
-                xAxes: [{
-                    stacked: true,
-                }],
-                yAxes: [{
-                    stacked: true
-                }]
-            }
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>BarChart</h1>
-                        <p>A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Vertical</h3>
-                    <Chart type="bar" data={data} />
-
-                    <h3>Horizontal</h3>
-                    <Chart type="horizontalBar" data={data} />
-
-                    <h3>Multi Axis</h3>
-                    <Chart type="bar" data={multiAxisData} options={multiAxisOptions} />
-
-                    <h3>Stacked</h3>
-                    <Chart type="bar" data={stackedData} options={stackedOptions} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chart/ChartDemo.js b/src/showcase/chart/ChartDemo.js
deleted file mode 100644
index 96169ae0b2..0000000000
--- a/src/showcase/chart/ChartDemo.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import React, {Component} from 'react';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ChartDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Charts</h1>
-                        <p>Chart components are based on <a style={{color:'black'}} href="http://www.chartjs.org/">Charts.js</a>, an open source HTML5 based charting library.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <ChartDoc />
-            </div>
-        )
-    }
-}
-
-class ChartDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Chart} from 'primereact/chart';
-
-`}
-</CodeHighlight>
-
-                <h3>Chart Types</h3>
-                <p>Chart type is defined using the <i>type</i> property. Currently there are 6 options available; "pie", "doughtnut", "line", "bar", "radar" and "polarArea".</p>
-
-                <h3>Data</h3>
-                <p>Data of a chart is provided using a binding to the <i>data</i> property, each type has its own format of data. Here is an example of a line chart.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Chart type="line" data={data} />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-jsx">
-{`
-const data = {
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [
-        {
-            label: 'First Dataset',
-            data: [65, 59, 80, 81, 56, 55, 40],
-            fill: false,
-            borderColor: '#4bc0c0'
-        },
-        {
-            label: 'Second Dataset',
-            data: [28, 48, 40, 19, 86, 27, 90],
-            fill: false,
-            borderColor: '#565656'
-        }
-    ]
-};
-
-`}
-</CodeHighlight>
-
-<h3>Options</h3>
-<p>While a series can be customized per dataset, general chart options are defined with options property.
-    Example below adds a title and customizes the legend position of the chart. For all available options refer to the charts.js documentation.</p>
-
-    <CodeHighlight className="language-jsx">
-{`
-<Chart type="line" data={data} options={options} />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-const options = {
-        title: {
-            display: true,
-            text: 'My Title',
-            fontSize: 16
-        },
-        legend: {
-            position: 'bottom'
-        }
-    };
-}
-
-`}
-</CodeHighlight>
-
-                <h3>Properties</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>id</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Unique identifier of the element.</td>
-                            </tr>
-                            <tr>
-                                <td>type</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Type of the chart.</td>
-                            </tr>
-                            <tr>
-                                <td>data</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Data to display.</td>
-                            </tr>
-                            <tr>
-                                <td>options</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>Options to customize the chart.</td>
-                            </tr>
-                            <tr>
-                                <td>width</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Width of the chart in non-responsive mode.</td>
-                            </tr>
-                            <tr>
-                                <td>height</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Height of the chart in non-responsive mode.</td>
-                            </tr>
-                            <tr>
-                                <td>style</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Inline style of the element.</td>
-                            </tr>
-                            <tr>
-                                <td>className</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the element.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3>Methods</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Parameters</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>refresh</td>
-                                <td>-</td>
-                                <td>Redraws the graph.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chart/ComboChartDemo.js b/src/showcase/chart/ComboChartDemo.js
deleted file mode 100644
index 8c0c983b29..0000000000
--- a/src/showcase/chart/ComboChartDemo.js
+++ /dev/null
@@ -1,198 +0,0 @@
-import React, {Component} from 'react';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Chart} from '../../components/chart/Chart';
-
-export class ComboChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-				type: 'line',
-				label: 'Dataset 1',
-				borderColor: '#2196F3',
-				borderWidth: 2,
-				fill: false,
-				data: [
-					50,
-					25,
-					12,
-					48,
-					56,
-					76,
-					42
-				]
-			}, {
-				type: 'bar',
-				label: 'Dataset 2',
-				backgroundColor: '#4CAF50',
-				data: [
-					21,
-					84,
-					24,
-					75,
-					37,
-					65,
-                    34
-                ],
-				borderColor: 'white',
-				borderWidth: 2
-			}, {
-				type: 'bar',
-				label: 'Dataset 3',
-				backgroundColor: '#FFC107',
-				data: [
-					41,
-					52,
-					24,
-					74,
-					23,
-					21,
-					32
-				]
-            }]
-        };
-
-        const options = {
-            responsive: true,
-            title: {
-                display: true,
-                text: 'Combo Bar Line Chart'
-            },
-            tooltips: {
-                mode: 'index',
-                intersect: true
-            }
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Combo Chart</h1>
-                        <p>Different chart types can be combined in the same graph.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Combo Chart</h3>
-                    <Chart type="bar" data={data} options={options} />
-                </div>
-
-                <ComboChartDemoDoc></ComboChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-export class ComboChartDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Chart} from 'primereact/chart';
-
-export class PieChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-				type: 'line',
-				label: 'Dataset 1',
-				borderColor: '#2196F3',
-				borderWidth: 2,
-				fill: false,
-				data: [
-					50,
-					25,
-					12,
-					48,
-					56,
-					76,
-					42
-				]
-			}, {
-				type: 'bar',
-				label: 'Dataset 2',
-				backgroundColor: '#4CAF50',
-				data: [
-					21,
-					84,
-					24,
-					75,
-					37,
-					65,
-                    34
-                ],
-				borderColor: 'white',
-				borderWidth: 2
-			}, {
-				type: 'bar',
-				label: 'Dataset 3',
-				backgroundColor: '#FFC107',
-				data: [
-					41,
-					52,
-					24,
-					74,
-					23,
-					21,
-					32
-				]
-            }]
-        };
-
-        const options = {
-            responsive: true,
-            title: {
-                display: true,
-                text: 'Combo Bar Line Chart'
-            },
-            tooltips: {
-                mode: 'index',
-                intersect: true
-            }
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Combo Chart</h1>
-                        <p>Different chart types can be combined in the same graph.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Combo Chart</h3>
-                    <Chart type="bar" data={data} options={options} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chart/DoughnutChartDemo.js b/src/showcase/chart/DoughnutChartDemo.js
deleted file mode 100644
index bb1889db80..0000000000
--- a/src/showcase/chart/DoughnutChartDemo.js
+++ /dev/null
@@ -1,114 +0,0 @@
-import React, {Component} from 'react';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Chart} from '../../components/chart/Chart';
-
-export class DoughnutChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['A','B','C'],
-            datasets: [
-                {
-                    data: [300, 50, 100],
-                    backgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ],
-                    hoverBackgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ]
-                }]
-            };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DoughnutChart</h1>
-                        <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="doughnut" data={data} />
-                </div>
-
-                <DoughnutChartDemoDoc></DoughnutChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-export class DoughnutChartDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Chart} from 'primereact/chart';
-
-export class DoughnutChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['A','B','C'],
-            datasets: [
-                {
-                    data: [300, 50, 100],
-                    backgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ],
-                    hoverBackgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ]
-                }]
-            };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DoughnutChart</h1>
-                        <p>A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="doughnut" data={data} />
-                </div>
-
-                <DoughnutChartDemoDoc></DoughnutChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chart/LineChartDemo.js b/src/showcase/chart/LineChartDemo.js
deleted file mode 100644
index 62b3bb047c..0000000000
--- a/src/showcase/chart/LineChartDemo.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import React, {Component} from 'react';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Chart} from '../../components/chart/Chart';
-
-export class LineChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-                {
-                    label: 'First Dataset',
-                    data: [65, 59, 80, 81, 56, 55, 40],
-                    fill: false,
-                    backgroundColor: '#42A5F5',
-                    borderColor: '#42A5F5'
-                },
-                {
-                    label: 'Second Dataset',
-                    data: [28, 48, 40, 19, 86, 27, 90],
-                    fill: false,
-                    backgroundColor: '#66BB6A',
-                    borderColor: '#66BB6A'
-                }
-            ]
-        };
-
-        const multiAxisData = {
-			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-                label: 'Dataset 1',
-                fill: false,
-				backgroundColor: '#42A5F5',
-                borderColor: '#42A5F5',
-				yAxisID: 'y-axis-1',
-				data: [65, 59, 80, 81, 56, 55, 10]
-			}, {
-                label: 'Dataset 2',
-                fill: false,
-				backgroundColor: '#66BB6A',
-                borderColor: '#66BB6A',
-				yAxisID: 'y-axis-2',
-				data: [28, 48, 40, 19, 86, 27, 90]
-			}]
-        };
-
-        const multiAxisOptions = {
-            responsive: true,
-            hoverMode: 'index',
-            stacked: false,
-            scales: {
-                yAxes: [{
-                    type: 'linear',
-                    display: true,
-                    position: 'left',
-                    id: 'y-axis-1',
-                }, {
-                    type: 'linear',
-                    display: true,
-                    position: 'right',
-                    id: 'y-axis-2',
-                    gridLines: {
-                        drawOnChartArea: false
-                    }
-                }]
-            }
-        }
-
-        const lineStylesData = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-                {
-                    label: 'First Dataset',
-                    data: [65, 59, 80, 81, 56, 55, 40],
-                    fill: false,
-                    borderColor: '#42A5F5'
-                },
-                {
-                    label: 'Second Dataset',
-                    data: [28, 48, 40, 19, 86, 27, 90],
-                    fill: false,
-                    borderDash: [5, 5],
-                    borderColor: '#66BB6A'
-                },
-                {
-                    label: 'Third Dataset',
-                    data: [12, 51, 62, 33, 21, 62, 45],
-                    fill: true,
-                    borderColor: '#FFA726',
-                    backgroundColor: '#FFCC80'
-                }
-            ]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>LineChart</h1>
-                        <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Chart type="line" data={data} />
-
-                    <h3>Multi Axis</h3>
-                    <Chart type="line" data={multiAxisData} options={multiAxisOptions} />
-
-                    <h3>Line Styles</h3>
-                    <Chart type="line" data={lineStylesData}  />
-                </div>
-
-                <LineChartDemoDoc></LineChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-export class LineChartDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Chart} from 'primereact/chart';
-
-export class LineChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-                {
-                    label: 'First Dataset',
-                    data: [65, 59, 80, 81, 56, 55, 40],
-                    fill: false,
-                    backgroundColor: '#42A5F5',
-                    borderColor: '#42A5F5'
-                },
-                {
-                    label: 'Second Dataset',
-                    data: [28, 48, 40, 19, 86, 27, 90],
-                    fill: false,
-                    backgroundColor: '#66BB6A',
-                    borderColor: '#66BB6A'
-                }
-            ]
-        };
-
-        const multiAxisData = {
-			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			datasets: [{
-                label: 'Dataset 1',
-                fill: false,
-				backgroundColor: '#42A5F5',
-                borderColor: '#42A5F5',
-				yAxisID: 'y-axis-1',
-				data: [65, 59, 80, 81, 56, 55, 10]
-			}, {
-                label: 'Dataset 2',
-                fill: false,
-				backgroundColor: '#66BB6A',
-                borderColor: '#66BB6A',
-				yAxisID: 'y-axis-2',
-				data: [28, 48, 40, 19, 86, 27, 90]
-			}]
-        };
-
-        const multiAxisOptions = {
-            responsive: true,
-            hoverMode: 'index',
-            stacked: false,
-            scales: {
-                yAxes: [{
-                    type: 'linear',
-                    display: true,
-                    position: 'left',
-                    id: 'y-axis-1',
-                }, {
-                    type: 'linear',
-                    display: true,
-                    position: 'right',
-                    id: 'y-axis-2',
-                    gridLines: {
-                        drawOnChartArea: false
-                    }
-                }]
-            }
-        }
-
-        const lineStylesData = {
-            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-            datasets: [
-                {
-                    label: 'First Dataset',
-                    data: [65, 59, 80, 81, 56, 55, 40],
-                    fill: false,
-                    borderColor: '#42A5F5'
-                },
-                {
-                    label: 'Second Dataset',
-                    data: [28, 48, 40, 19, 86, 27, 90],
-                    fill: false,
-                    borderDash: [5, 5],
-                    borderColor: '#66BB6A'
-                },
-                {
-                    label: 'Third Dataset',
-                    data: [12, 51, 62, 33, 21, 62, 45],
-                    fill: true,
-                    borderColor: '#FFA726',
-                    backgroundColor: '#FFCC80'
-                }
-            ]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>LineChart</h1>
-                        <p>A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Chart type="line" data={data} />
-
-                    <h3>Multi Axis</h3>
-                    <Chart type="line" data={multiAxisData} options={multiAxisOptions} />
-
-                    <h3>Line Styles</h3>
-                    <Chart type="line" data={lineStylesData}  />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chart/PieChartDemo.js b/src/showcase/chart/PieChartDemo.js
deleted file mode 100644
index eeb1ade279..0000000000
--- a/src/showcase/chart/PieChartDemo.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, {Component} from 'react';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Chart} from '../../components/chart/Chart';
-
-export class PieChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['A','B','C'],
-            datasets: [
-                {
-                    data: [300, 50, 100],
-                    backgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ],
-                    hoverBackgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ]
-                }]
-            };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PieChart</h1>
-                        <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="pie" data={data} />
-                </div>
-
-                <PieChartDemoDoc></PieChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-export class PieChartDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Chart} from 'primereact/chart';
-
-export class PieChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['A','B','C'],
-            datasets: [
-                {
-                    data: [300, 50, 100],
-                    backgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ],
-                    hoverBackgroundColor: [
-                        "#FF6384",
-                        "#36A2EB",
-                        "#FFCE56"
-                    ]
-                }]
-            };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PieChart</h1>
-                        <p>A pie chart is a circular statistical graphic, which is divided into slices to illustrate numerical proportion.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="pie" data={data} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chart/PolarAreaChartDemo.js b/src/showcase/chart/PolarAreaChartDemo.js
deleted file mode 100644
index d9b1fbec01..0000000000
--- a/src/showcase/chart/PolarAreaChartDemo.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, {Component} from 'react';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Chart} from '../../components/chart/Chart';
-
-export class PolarAreaChartDemo extends Component {
-
-    render() {
-        const data = {
-            datasets: [{
-                data: [
-                    11,
-                    16,
-                    7,
-                    3,
-                    14
-                ],
-                backgroundColor: [
-                    "#FF6384",
-                    "#4BC0C0",
-                    "#FFCE56",
-                    "#E7E9ED",
-                    "#36A2EB"
-                ],
-                label: 'My dataset'
-            }],
-            labels: [
-                "Red",
-                "Green",
-                "Yellow",
-                "Grey",
-                "Blue"
-            ]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PolarAreaChart</h1>
-                        <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="polarArea" data={data} />
-                </div>
-
-                <PolarAreaChartDemoDoc></PolarAreaChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-export class PolarAreaChartDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Chart} from 'primereact/chart';
-
-export class PolarAreaChartDemo extends Component {
-
-    render() {
-        const data = {
-            datasets: [{
-                data: [
-                    11,
-                    16,
-                    7,
-                    3,
-                    14
-                ],
-                backgroundColor: [
-                    "#FF6384",
-                    "#4BC0C0",
-                    "#FFCE56",
-                    "#E7E9ED",
-                    "#36A2EB"
-                ],
-                label: 'My dataset'
-            }],
-            labels: [
-                "Red",
-                "Green",
-                "Yellow",
-                "Grey",
-                "Blue"
-            ]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PolarAreaChart</h1>
-                        <p>Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="polarArea" data={data} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chart/RadarChartDemo.js b/src/showcase/chart/RadarChartDemo.js
deleted file mode 100644
index b310602358..0000000000
--- a/src/showcase/chart/RadarChartDemo.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import React, {Component} from 'react';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Chart} from '../../components/chart/Chart';
-
-export class RadarChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-            datasets: [
-                {
-                    label: 'My First dataset',
-                    backgroundColor: 'rgba(179,181,198,0.2)',
-                    borderColor: 'rgba(179,181,198,1)',
-                    pointBackgroundColor: 'rgba(179,181,198,1)',
-                    pointBorderColor: '#fff',
-                    pointHoverBackgroundColor: '#fff',
-                    pointHoverBorderColor: 'rgba(179,181,198,1)',
-                    data: [65, 59, 90, 81, 56, 55, 40]
-                },
-                {
-                    label: 'My Second dataset',
-                    backgroundColor: 'rgba(255,99,132,0.2)',
-                    borderColor: 'rgba(255,99,132,1)',
-                    pointBackgroundColor: 'rgba(255,99,132,1)',
-                    pointBorderColor: '#fff',
-                    pointHoverBackgroundColor: '#fff',
-                    pointHoverBorderColor: 'rgba(255,99,132,1)',
-                    data: [28, 48, 40, 19, 96, 27, 100]
-                }
-            ]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>RadarChart</h1>
-                        <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="radar" data={data} />
-                </div>
-
-                <RadarChartDemoDoc></RadarChartDemoDoc>
-            </div>
-        )
-    }
-}
-
-export class RadarChartDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Chart} from '../../components/chart/Chart';
-
-export class RadarChartDemo extends Component {
-
-    render() {
-        const data = {
-            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
-            datasets: [
-                {
-                    label: 'My First dataset',
-                    backgroundColor: 'rgba(179,181,198,0.2)',
-                    borderColor: 'rgba(179,181,198,1)',
-                    pointBackgroundColor: 'rgba(179,181,198,1)',
-                    pointBorderColor: '#fff',
-                    pointHoverBackgroundColor: '#fff',
-                    pointHoverBorderColor: 'rgba(179,181,198,1)',
-                    data: [65, 59, 90, 81, 56, 55, 40]
-                },
-                {
-                    label: 'My Second dataset',
-                    backgroundColor: 'rgba(255,99,132,0.2)',
-                    borderColor: 'rgba(255,99,132,1)',
-                    pointBackgroundColor: 'rgba(255,99,132,1)',
-                    pointBorderColor: '#fff',
-                    pointHoverBackgroundColor: '#fff',
-                    pointHoverBorderColor: 'rgba(255,99,132,1)',
-                    data: [28, 48, 40, 19, 96, 27, 100]
-                }
-            ]
-        };
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>RadarChart</h1>
-                        <p>A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Chart type="radar" data={data} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/checkbox/CheckboxDemo.js b/src/showcase/checkbox/CheckboxDemo.js
deleted file mode 100644
index d269e5d151..0000000000
--- a/src/showcase/checkbox/CheckboxDemo.js
+++ /dev/null
@@ -1,379 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Checkbox} from '../../components/checkbox/Checkbox';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class CheckboxDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            checked: false,
-            cities: []
-        };
-        this.onCityChange = this.onCityChange.bind(this);
-    }
-
-    onCityChange(e) {
-        let selectedCities = [...this.state.cities];
-
-        if(e.checked)
-            selectedCities.push(e.value);
-        else
-            selectedCities.splice(selectedCities.indexOf(e.value), 1);
-
-        this.setState({cities: selectedCities});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Checkbox</h1>
-                        <p>Checkbox is an extension to standard checkbox element with skinning capabilities.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("checkbox")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Single</h3>
-                    <Checkbox checked={this.state.checked} onChange={e => this.setState({checked: e.checked})} />
-                    <p>Checked: <span style={{fontWeight: 'bold'}}>{this.state.checked ? 'true' : 'false'}</span></p>
-
-                    <h3>Multiple</h3>
-                    <div className="p-grid" style={{width:'250px'}}>
-                        <div className="p-col-12">
-                            <Checkbox inputId="cb1" value="New York" onChange={this.onCityChange} checked={this.state.cities.indexOf('New York') !== -1}></Checkbox>
-                            <label htmlFor="cb1" className="p-checkbox-label">New York</label>
-                        </div>
-                        <div className="p-col-12">
-                            <Checkbox inputId="cb2" value="San Francisco" onChange={this.onCityChange} checked={this.state.cities.indexOf('San Francisco') !== -1}></Checkbox>
-                            <label htmlFor="cb2" className="p-checkbox-label">San Francisco</label>
-                        </div>
-                        <div className="p-col-12">
-                            <Checkbox inputId="cb3" value="Los Angeles" onChange={this.onCityChange} checked={this.state.cities.indexOf('Los Angeles') !== -1}></Checkbox>
-                            <label htmlFor="cb3" className="p-checkbox-label">Los Angeles</label>
-                        </div>
-                    </div>
-                    <p>Selected Cities : {this.state.cities.map((city) => <span style={{fontWeight: 'bold'}} key={city}>{city} </span>)}</p>
-                </div>
-
-                <CheckboxDoc />
-            </div>
-        )
-    }
-}
-
-class CheckboxDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Checkbox} from 'primereact/checkbox';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Checkbox is used as a controlled input with <i>checked</i> and <i>onChange</i> properties.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Checkbox onChange={e => this.setState({checked: e.checked})} checked={this.state.checked}></Checkbox>
-
-`}
-</CodeHighlight>
-
-                        <h3>Multiple Values</h3>
-                        <p>Multiple checkboxes can be grouped using a list of values.</p>
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-col-12">
-    <Checkbox inputId="cb1" value="New York" onChange={this.onCityChange} checked={this.state.cities.includes('New York')}></Checkbox>
-    <label htmlFor="cb1" className="p-checkbox-label">New York</label>
-</div>
-<div className="p-col-12">
-    <Checkbox inputId="cb2" value="San Francisco" onChange={this.onCityChange} checked={this.state.cities.includes('San Francisco')}></Checkbox>
-    <label htmlFor="cb2" className="p-checkbox-label">San Francisco</label>
-</div>
-<div className="p-col-12">
-    <Checkbox inputId="cb3" value="Los Angeles" onChange={this.onCityChange} checked={this.state.cities.includes('Los Angeles')}></Checkbox>
-    <label htmlFor="cb3" className="p-checkbox-label">Los Angeles</label>
-</div>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-constructor() {
-    super();
-    this.state = {
-        cities: []
-    };
-    this.onCityChange = this.onCityChange.bind(this);
-}
-
-onCityChange(e) {
-    let selectedCities = [...this.state.cities];
-    if(e.checked)
-        selectedCities.push(e.value);
-    else
-        selectedCities.splice(selectedCities.indexOf(e.value), 1);
-
-    this.setState({cities: selectedCities});
-}
-
-`}
-</CodeHighlight>
-
-                    <h3>Properties</h3>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>id</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>inputId</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the inner native radiobutton.</td>
-                                </tr>
-                                <tr>
-                                    <td>value</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Value of the checkbox.</td>
-                                </tr>
-                                <tr>
-                                    <td>name</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Name of the checkbox element .</td>
-                                </tr>
-                                <tr>
-                                    <td>checked</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Specifies whether a checkbox should be checked or not.</td>
-                                </tr>
-                                <tr>
-                                    <td>style</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Inline style of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>className</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>disabled</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When present, it specifies that the element value cannot be altered.</td>
-                                </tr>
-                                <tr>
-                                    <td>required</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
-                                </tr>
-                                <tr>
-                                    <td>readOnly</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When present, it specifies that the element cannot be typed.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltip</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Content of the tooltip.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltipOptions</td>
-                                    <td>object</td>
-                                    <td>null</td>
-                                    <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                </tr>
-                                <tr>
-                                    <td>ariaLabelledBy</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Events</h3>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>onChange</td>
-                                    <td>event.originalEvent: Original event <br />
-                                        event.value: Value of the checkbox <br />
-                                        event.checked: Checked state as a boolean.</td>
-                                    <td>Callback to invoke on value change</td>
-                                </tr>
-                                <tr>
-                                    <td>onMouseDown</td>
-                                    <td>event: Browser event</td>
-                                    <td>Callback to invoke to when a mouse button is pressed.</td>
-                                </tr>
-                                <tr>
-                                    <td>onContextMenu</td>
-                                    <td>event: Browser event</td>
-                                    <td>Callback to invoke on right-click.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Styling</h3>
-                    <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming">theming</Link> page.</p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-chkbox</td>
-                                    <td>Container element</td>
-                                </tr>
-                                <tr>
-                                    <td>p-chkbox-box</td>
-                                    <td>Container of icon.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-chkbox-icon</td>
-                                    <td>Icon element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-chkbox-label</td>
-                                    <td>Label element.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Dependencies</h3>
-                    <p>None.</p>
-                </TabPanel>
-                <TabPanel header="Source">
-                    <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/checkbox" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Checkbox} from 'primereact/checkbox';
-
-export class CheckboxDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            checked: false,
-            cities: []
-        };
-        this.onCityChange = this.onCityChange.bind(this);
-    }
-
-    onCityChange(e) {
-        let selectedCities = [...this.state.cities];
-
-        if(e.checked)
-            selectedCities.push(e.value);
-        else
-            selectedCities.splice(selectedCities.indexOf(e.value), 1);
-
-        this.setState({cities: selectedCities});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Checkbox</h1>
-                        <p>Checkbox is an extension to standard checkbox element with skinning capabilities.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Single</h3>
-                    <Checkbox checked={this.state.checked} onChange={e => this.setState({checked: e.checked})} />
-                    <p>Checked: <span style={{fontWeight: 'bold'}}>{this.state.checked ? 'true' : 'false'}</span></p>
-
-                    <h3>Multiple</h3>
-                    <div className="p-grid" style={{width:'250px'}}>
-                        <div className="p-col-12">
-                            <Checkbox inputId="cb1" value="New York" onChange={this.onCityChange} checked={this.state.cities.indexOf('New York') !== -1}></Checkbox>
-                            <label htmlFor="cb1" className="p-checkbox-label">New York</label>
-                        </div>
-                        <div className="p-col-12">
-                            <Checkbox inputId="cb2" value="San Francisco" onChange={this.onCityChange} checked={this.state.cities.indexOf('San Francisco') !== -1}></Checkbox>
-                            <label htmlFor="cb2" className="p-checkbox-label">San Francisco</label>
-                        </div>
-                        <div className="p-col-12">
-                            <Checkbox inputId="cb3" value="Los Angeles" onChange={this.onCityChange} checked={this.state.cities.indexOf('Los Angeles') !== -1}></Checkbox>
-                            <label htmlFor="cb3" className="p-checkbox-label">Los Angeles</label>
-                        </div>
-                    </div>
-                    <p>Selected Cities : {this.state.cities.map((city) => <span style={{fontWeight: 'bold'}} key={city}>{city} </span>)}</p>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/chips/ChipsDemo.js b/src/showcase/chips/ChipsDemo.js
deleted file mode 100644
index 049c5015af..0000000000
--- a/src/showcase/chips/ChipsDemo.js
+++ /dev/null
@@ -1,349 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Chips} from '../../components/chips/Chips';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ChipsDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            values1: [],
-            values2: [],
-            values3: []
-        };
-    }
-
-    customChip(item) {
-        return (
-            <div>
-                <span>{item} - (active) </span>
-                <i className="pi pi-user-plus" style={{fontSize: '14px'}}></i>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Chips</h1>
-                        <p>Chips is used to enter multiple values on an input field.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("chips")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation p-fluid">
-                    <h3>Basic</h3>
-                    <Chips value={this.state.values1} onChange={(e) => this.setState({values1: e.value})}></Chips>
-
-                    <h3>Comma Separator</h3>
-                    <Chips value={this.state.values2} onChange={(e) =>{ this.setState({values2: e.value});}} separator=','></Chips>
-
-                    <h3>Template</h3>
-                    <Chips value={this.state.values3} onChange={(e) => this.setState({values3: e.value})} max={5} itemTemplate={this.customChip}></Chips>
-                </div>
-
-                <ChipsDoc/>
-            </div>
-        )
-    }
-}
-
-class ChipsDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Chips} from 'primereact/chips';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Chips requires an array as its <i>value</i> and <i>onChange</i> callback to update the model.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Chips value={this.state.value} onChange={(e) => this.setState({value: e.value})}></Chips>
-
-`}
-</CodeHighlight>
-
-            <h3>Custom Content</h3>
-            <p>A chip is customized using <i>itemTemplate</i> function where value is passed to return JSX.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Chips value={this.state.value} onChange={(e) => this.setState({value: e.value})} itemTemplate={this.customChip}></Chips>
-
-`}
-</CodeHighlight>
-<CodeHighlight className="language-javascript">
-{`
-customChip(item) {
-    return (
-        <div>
-            <span>{item} - (active) </span>
-            <i className="pi pi-user-plus"></i>
-        </div>
-    );
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Advisory information to display on input.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of entries allowed.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                        <tr>
-                            <td>allowDuplicate</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to allow duplicate values or not.</td>
-                        </tr>
-                        <tr>
-                            <td>separator</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Separator char to add an item when pressed in addition to the enter key. Currently only possible value is ","</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Template function to return the content of a chip.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>originalEvent: Browser event <br/>
-                                value: New value of the component</td>
-                            <td>Callback to invoke when a chip is added or removed.</td>
-                        </tr>
-                        <tr>
-                            <td>onAdd</td>
-                            <td>originalEvent: Browser event <br/>
-                                value: Added item value</td>
-                            <td>Callback to invoke when a chip is added.</td>
-                        </tr>
-                        <tr>
-                            <td>onRemove</td>
-                            <td>originalEvent: Browser event <br/>
-                                value: Removed item value</td>
-                            <td>Callback to invoke when a chip is removed.</td>
-                        </tr>
-                        <tr>
-                            <td>onFocus</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when the component gets focus.</td>
-                        </tr>
-                        <tr>
-                            <td>onBlur</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when the component loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-chips</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token</td>
-                            <td>Chip element container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token-icon</td>
-                            <td>Icon of a chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-token-label</td>
-                            <td>label of a chip.</td>
-                        </tr>
-                        <tr>
-                            <td>p-chips-input-token</td>
-                            <td>Container of input element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/chips" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Chips} from 'primereact/chips';
-
-export class ChipsDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            values1: [],
-            values2: []
-        };
-    }
-
-    customChip(item) {
-        return (
-            <div>
-                <span>{item} - (active) </span>
-                <i className="pi pi-user-plus" style={{fontSize: '14px'}}></i>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Chips</h1>
-                        <p>Chips is used to enter multiple values on an input field.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation p-fluid">
-                    <h3>Basic</h3>
-                    <Chips value={this.state.values1} onChange={(e) => this.setState({values1: e.value})}></Chips>
-
-                    <h3>Template</h3>
-                    <Chips value={this.state.values2} onChange={(e) => this.setState({values2: e.value})} max={5} itemTemplate={this.customChip}></Chips>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/codehighlight/CodeHighlight.js b/src/showcase/codehighlight/CodeHighlight.js
deleted file mode 100644
index 116a38e711..0000000000
--- a/src/showcase/codehighlight/CodeHighlight.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import Prism from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-markup';
-import 'prismjs/components/prism-jsx';
-import 'prismjs/components/prism-javascript';
-
-export class CodeHighlight extends Component {
-    
-    static defaultProps = {
-        className: null,
-        style: null
-    };
-
-    static propTypes = {
-        className: PropTypes.string,
-        style: PropTypes.object
-    };
-
-    componentDidMount() {
-        this.highlightCode();
-    }
-
-    componentDidUpdate() {
-        this.highlightCode();
-    }
-
-    highlightCode() {
-        if(Prism) {
-            Prism.highlightElement(this.codeElement);
-        }
-    }
-
-    render() {
-        return (
-            <pre style={this.props.style}>
-                <code ref={el => this.codeElement = el} className={this.props.className}>
-                    {this.props.children}
-                </code>
-            </pre>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/colorpicker/ColorPickerDemo.js b/src/showcase/colorpicker/ColorPickerDemo.js
deleted file mode 100644
index 7896600a8d..0000000000
--- a/src/showcase/colorpicker/ColorPickerDemo.js
+++ /dev/null
@@ -1,314 +0,0 @@
-import React, {Component} from 'react';
-import {ColorPicker} from '../../components/colorpicker/ColorPicker';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ColorPickerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            color1: null,
-            color2: '1976D2'
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ColorPicker</h1>
-                        <p>ColorPicker is an input component to select a color.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("colorPicker")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Inline</h3>
-                    <ColorPicker inline={true} value={this.state.color1} onChange={(e) => this.setState({ color1: e.value })}></ColorPicker>
-                    <p style={{'marginTop':'.5em'}}>Selected Color: <span style={{'display':'inline-block','width':'32px','height':'32px','verticalAlign':'middle','backgroundColor': '#' + this.state.color1}}></span> {this.state.color1} </p>
-
-                    <h3>Overlay</h3>
-                    <ColorPicker value={this.state.color2} onChange={(e) => this.setState({ color2: e.value })}></ColorPicker>
-                    <p style={{'marginTop':'.5em'}}>Selected Color: <span style={{'color':'#' + this.state.color2}}>{this.state.color2}</span></p>
-                </div>
-
-                <ColorPickerDoc />
-            </div>
-        )
-    }
-}
-
-class ColorPickerDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {ColorPicker} from 'primereact/colorpicker';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>ColorPicker is used as a controlled input component with <i>value</i> and <i>onChange</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<ColorPicker value={this.state.color} onChange={(e) => this.setState({color: e.value})} />
-
-`}
-</CodeHighlight>
-
-                        <h3>Formats</h3>
-                        <p>Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<ColorPicker value={this.state.color1} onChange={(e) => this.setState({color1: e.value})} />
-
-<ColorPicker format="rgb" value={this.state.color2} onChange={(e) => this.setState({color2: e.value})} />
-
-<ColorPicker format="hsb" value={this.state.color3} onChange={(e) => this.setState({color3: e.value})}/>
-
-`}
-</CodeHighlight>
-
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Value of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>defaultColor</td>
-                                        <td>string</td>
-                                        <td>ff0000</td>
-                                        <td>Default color to display when value is null.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>inline</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Whether to display as an overlay or not.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>format</td>
-                                        <td>string</td>
-                                        <td>hex</td>
-                                        <td>Format to use in value binding, supported formats are "hex", "rgb" and "hsb".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>DOM element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the dialog should be mounted.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>disabled</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the component should be disabled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tabIndex</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Index of the element in tabbing order.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>inputId</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Identifier of the focus input to match a label defined for the dropdown.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onChange</td>
-                                        <td>value: Selected color value whose type depends on the format.</td>
-                                        <td>Callback to invoke when a color is selected.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-colorpicker</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-overlay</td>
-                                        <td>Container element in overlay mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-preview </td>
-                                        <td>Preview input in overlay mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-panel</td>
-                                        <td>Panel element of the colorpicker.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-content</td>
-                                        <td>Wrapper that contains color and hue sections.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-color-selector</td>
-                                        <td>Color selector container.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-color</td>
-                                        <td>Color element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-color-handle</td>
-                                        <td>Handle of the color element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-hue</td>
-                                        <td>Hue slider.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-colorpicker-hue-handle</td>
-                                        <td>Handle of the hue slider.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/colorpicker" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {ColorPicker} from 'primereact/colorpicker';
-
-export class ColorPickerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            color1: null,
-            color2: '1976D2'
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ColorPicker</h1>
-                        <p>ColorPicker is an input component to select a color.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Inline</h3>
-                    <ColorPicker inline="true" value={this.state.color1} onChange={(e) => this.setState({ color1: e.value })}></ColorPicker>
-                    <p style={{'marginTop':'.5em'}}>Selected Color: <span style={{'display':'inline-block','width':'32px','height':'32px','verticalAlign':'middle','backgroundColor': '#' + this.state.color1}}></span> {this.state.color1} </p>
-
-                    <h3>Overlay</h3>
-                    <ColorPicker value={this.state.color2} onChange={(e) => this.setState({ color2: e.value })}></ColorPicker>
-                    <p style={{'marginTop':'.5em'}}>Selected Color: <span style={{'color':'#' + this.state.color2}}>{this.state.color2}</span></p>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/contextmenu/ContextMenuDemo.js b/src/showcase/contextmenu/ContextMenuDemo.js
deleted file mode 100644
index d7997a35dc..0000000000
--- a/src/showcase/contextmenu/ContextMenuDemo.js
+++ /dev/null
@@ -1,693 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {ContextMenu} from '../../components/contextmenu/ContextMenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ContextMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ContextMenu</h1>
-                        <p>ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("contextMenu")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <ContextMenu model={this.state.items} ref={el => this.cm = el}></ContextMenu>
-
-                    <img src="http://github.com/showcase/resources/images/logo.png" alt="Logo" style={{width: '80px'}} onContextMenu={(e) => this.cm.show(e)} aria-haspopup={true}/>
-                </div>
-
-                <ContextMenuDoc/>
-            </div>
-        );
-    }
-}
-
-class ContextMenuDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {ContextMenu} from 'primereact/contextmenu';
-
-`}</CodeHighlight>
-                        <h3>MenuItem API</h3>
-                        <p>ContextMenu uses the common menu item api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>Menu requires a collection of menuitems as its model.</p>
-                        <CodeHighlight className="language-javascript">
-                            {`
-const items:[
-    {
-       label:'File',
-       icon:'pi pi-fw pi-file',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-plus',
-             items:[
-                {
-                   label:'Bookmark',
-                   icon:'pi pi-fw pi-bookmark'
-                },
-                {
-                   label:'Video',
-                   icon:'pi pi-fw pi-video'
-                },
-
-             ]
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-trash'
-          },
-          {
-             separator:true
-          },
-          {
-             label:'Export',
-             icon:'pi pi-fw pi-external-link'
-          }
-       ]
-    },
-    {
-       label:'Edit',
-       icon:'pi pi-fw pi-pencil',
-       items:[
-          {
-             label:'Left',
-             icon:'pi pi-fw pi-align-left'
-          },
-          {
-             label:'Right',
-             icon:'pi pi-fw pi-align-right'
-          },
-          {
-             label:'Center',
-             icon:'pi pi-fw pi-align-center'
-          },
-          {
-             label:'Justify',
-             icon:'pi pi-fw pi-align-justify'
-          },
-
-       ]
-    },
-    {
-       label:'Users',
-       icon:'pi pi-fw pi-user',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-user-plus',
-
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-user-minus',
-
-          },
-          {
-             label:'Search',
-             icon:'pi pi-fw pi-users',
-             items:[
-                {
-                   label:'Filter',
-                   icon:'pi pi-fw pi-filter',
-                   items:[
-                      {
-                         label:'Print',
-                         icon:'pi pi-fw pi-print'
-                      }
-                   ]
-                },
-                {
-                   icon:'pi pi-fw pi-bars',
-                   label:'List'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       label:'Events',
-       icon:'pi pi-fw pi-calendar',
-       items:[
-          {
-             label:'Edit',
-             icon:'pi pi-fw pi-pencil',
-             items:[
-                {
-                   label:'Save',
-                   icon:'pi pi-fw pi-calendar-plus'
-                },
-                {
-                   label:'Delete',
-                   icon:'pi pi-fw pi-calendar-minus'
-                },
-
-             ]
-          },
-          {
-             label:'Archieve',
-             icon:'pi pi-fw pi-calendar-times',
-             items:[
-                {
-                   label:'Remove',
-                   icon:'pi pi-fw pi-calendar-minus'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       separator:true
-    },
-    {
-       label:'Quit',
-       icon:'pi pi-fw pi-power-off'
-    }
- ];
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<ContextMenu model={items}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Document Menu</h3>
-                        <p>Setting global property attaches the context menu to the document.
-                        </p>
-
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<ContextMenu global={true} model={items}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Element Menu</h3>
-                        <p>ContextMenu is attached to a custom element manually using the reference and calling the show(event) method.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<ContextMenu model={this.state.imageItems} ref={el => this.cm = el}></ContextMenu>
-<img src="http://github.com/showcase/resources/images/logo.png" alt="Logo" style={{width: '80px'}} onContextMenu={(e) => this.cm.show(e)}/>
-
-`}
-                        </CodeHighlight>
-
-
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>global</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Attaches the menu to document instead of a particular item.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>baseZIndex</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Base zIndex value to use in layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>autoZIndex</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to automatically manage layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>Dom Element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the menu should be mounted.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Methods</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>show</td>
-                                        <td>event: browser event</td>
-                                        <td>Displays the popup menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>hide</td>
-                                        <td>event: browser event</td>
-                                        <td>Hides the popup menu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onShow</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is shown.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onHide</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is hidden.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-contextmenu</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menu-list</td>
-                                    <td>List element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem</td>
-                                    <td>Menuitem element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem-text</td>
-                                    <td>Label of a menuitem.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem-icon</td>
-                                    <td>Icon of a menuitem.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-submenu-icon</td>
-                                    <td>Arrow icon of a submenu.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/contextmenu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {ContextMenu} from 'primereact/contextmenu';
-
-export class ContextMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ContextMenu</h1>
-                        <p>ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration.</p>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <ContextMenu model={this.state.items} ref={el => this.cm = el}></ContextMenu>
-
-                    <img src="http://github.com/showcase/resources/images/logo.png" alt="Logo" style={{width: '80px'}} onContextMenu={(e) => this.cm.show(e)}  aria-haspopup={true}/>
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/datascroller/DataScrollerDemo.js b/src/showcase/datascroller/DataScrollerDemo.js
deleted file mode 100644
index 64beb7467c..0000000000
--- a/src/showcase/datascroller/DataScrollerDemo.js
+++ /dev/null
@@ -1,387 +0,0 @@
-import React, {Component} from 'react';
-import {DataScroller} from '../../components/datascroller/DataScroller';
-import {CarService} from '../service/CarService';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {DataScrollerSubmenu} from '../../showcase/datascroller/DataScrollerSubmenu';
-
-export class DataScrollerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        if (!car) {
-            return;
-        }
-
-        return (
-            <div className="car-details">
-                <div>
-                    <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand}/>
-                    <div className="p-grid">
-                        <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                        <div className="p-col-12">Year: <b>{car.year}</b></div>
-                        <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                        <div className="p-col-12">Color: <b>{car.color}</b></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div className="dataview-demo">
-                <DataScrollerSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataScroller</h1>
-                        <p>DataScroller displays data with on demand loading using scroll.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataScroller")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    Demo is at the bottom of this page.
-                </div>
-
-                <DataScrollerDoc />
-
-                <div className="content-section implementation">
-                    <DataScroller value={this.state.cars} itemTemplate={this.carTemplate}
-                            rows={10} buffer={0.4} header="List of Cars" />
-                </div>
-
-            </div>
-        );
-    }
-}
-
-export class DataScrollerDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {DataScroller} from 'primereact/datascroller';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>DataScroller requires a collection of items as its value, number of rows to load and a template content to display. Here is a sample DataScroller that displays a
-                list of cars where each load event adds 10 more rows if available.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataScroller value={this.state.cars} itemTemplate={carTemplate} rows={10}></DataScroller>
-
-`}
-</CodeHighlight>
-<CodeHighlight className="language-javascript">
-{`
-constructor() {
-    super();
-    this.state = {
-        cars: []
-    };
-    this.carservice = new CarService();
-    this.carTemplate = this.carTemplate.bind(this);
-}
-
-componentDidMount() {
-    this.carservice.getCars().then(data => this.setState({cars: data}));
-}
-
-carTemplate(car) {
-    // return content;
-}
-
-`}
-</CodeHighlight>
-
-
-            <h3>Inline</h3>
-            <p>By default DataScroller listens to the scroll event of window, the alternative is the inline mode where container of the DataScroller element itself is used as the event target. Set <i>inline</i> option to true to enable this mode.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataScroller value={this.state.cars} itemTemplate={carTemplate} rows={10} inline={true}></DataScroller>
-
-`}
-</CodeHighlight>
-
-            <h3>Lazy Loading</h3>
-            <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking
-             onLazyLoad callback everytime paging happens. To implement lazy loading,
-            enable <i>lazy</i> property and provide a method callback using <i>onLazyLoad</i> that actually loads the data from a remote datasource. onLazyLoad gets an event object
-            that contains information about what to load.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataScroller value={this.state.cars} itemTemplate={carTemplate} rows={10} lazy={true} onLazyLoad={this.loadData}></DataScroller>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-loadData(event) {
-    //event.first = First row offset
-    //event.rows = Number of rows per page
-    //add more records to the cars array
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of rows to fetch in a load event.</td>
-                        </tr>
-                        <tr>
-                            <td>inline</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if the event target to listen the scroll event is the element itself.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Max height of the content area in inline mode.</td>
-                        </tr>
-                        <tr>
-                            <td>loader</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Reference of the target element whose click event loads the data instead of scrolling.</td>
-                        </tr>
-                        <tr>
-                            <td>buffer</td>
-                            <td>number</td>
-                            <td>0.9</td>
-                            <td>Number of buffer size.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the value and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Label of header.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Label of footer.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onLazyLoad</td>
-                            <td>event.first = First row offset <br />
-                                event.rows = Number of rows per page <br /></td>
-                            <td>Callback to invoke in lazy mode to load new data.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Element</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-datascroller</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datascroller-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datascroller-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datascroller-content</td>
-                            <td>Wrapper of item container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datascroller-list</td>
-                            <td>Item container element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/datascroller" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {DataScroller} from 'primereact/datascroller';
-import {CarService} from '../service/CarService';
-
-export class DataScrollerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        if (!car) {
-            return;
-        }
-
-        return (
-            <div className="car-details">
-                <div>
-                    <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
-                    <div className="p-grid">
-                        <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                        <div className="p-col-12">Year: <b>{car.year}</b></div>
-                        <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                        <div className="p-col-12">Color: <b>{car.color}</b></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div className="dataview-demo">
-                <DataScrollerSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataScroller</h1>
-                        <p>DataScroller displays data with on demand loading using scroll.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    Demo is at the bottom of this page.
-                </div>
-
-                <div className="content-section implementation">
-                    <DataScroller value={this.state.cars} itemTemplate={this.carTemplate}
-                            rows={10} buffer={0.4} header="List of Cars" />
-                </div>
-
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/datascroller/DataScrollerInlineDemo.js b/src/showcase/datascroller/DataScrollerInlineDemo.js
deleted file mode 100644
index f1784240dc..0000000000
--- a/src/showcase/datascroller/DataScrollerInlineDemo.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, {Component} from 'react';
-import {DataScroller} from '../../components/datascroller/DataScroller';
-import {CarService} from '../service/CarService';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {DataScrollerSubmenu} from '../../showcase/datascroller/DataScrollerSubmenu';
-
-export class DataScrollerInlineDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        if (!car) {
-            return;
-        }
-
-        return (
-            <div className="car-details">
-                <div>
-                    <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand}/>
-                    <div className="p-grid">
-                        <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                        <div className="p-col-12">Year: <b>{car.year}</b></div>
-                        <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                        <div className="p-col-12">Color: <b>{car.color}</b></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div className="dataview-demo">
-                <DataScrollerSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataScroller - Inline</h1>
-                        <p>DataScroller can listen scroll event of itself rather than document in inline mode.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataScroller")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataScroller value={this.state.cars} itemTemplate={this.carTemplate} rows={10} inline={true} scrollHeight="500px" header="Scroll Down to Load More" />
-                </div>
-
-                <DataScrollerInlineDoc></DataScrollerInlineDoc>
-            </div>
-        );
-    }
-}
-
-export class DataScrollerInlineDoc extends Component {
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                    <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/datascroller" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {DataScroller} from 'primereact/datascroller';
-import {CarService} from '../service/CarService';
-
-export class DataScrollerInlineDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        if (!car) {
-            return;
-        }
-
-        return (
-            <div className="car-details">
-                <div>
-                    <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
-                    <div className="p-grid">
-                        <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                        <div className="p-col-12">Year: <b>{car.year}</b></div>
-                        <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                        <div className="p-col-12">Color: <b>{car.color}</b></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div className="dataview-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataScroller - Inline</h1>
-                        <p>DataScroller can listen scroll event of itself rather than document in inline mode.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataScroller value={this.state.cars} itemTemplate={this.carTemplate} rows={10} inline={true} scrollHeight="500px" header="Scroll Down to Load More" />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/datascroller/DataScrollerLoaderDemo.js b/src/showcase/datascroller/DataScrollerLoaderDemo.js
deleted file mode 100644
index b78a98b803..0000000000
--- a/src/showcase/datascroller/DataScrollerLoaderDemo.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, {Component} from 'react';
-import {DataScroller} from '../../components/datascroller/DataScroller';
-import {Button} from '../../components/button/Button';
-import {CarService} from '../service/CarService';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {DataScrollerSubmenu} from '../../showcase/datascroller/DataScrollerSubmenu';
-
-export class DataScrollerLoaderDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        if (!car) {
-            return;
-        }
-
-        return (
-            <div className="car-details">
-                <div>
-                    <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand}/>
-                    <div className="p-grid">
-                        <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                        <div className="p-col-12">Year: <b>{car.year}</b></div>
-                        <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                        <div className="p-col-12">Color: <b>{car.color}</b></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const footer = <Button ref={(el) => this.loadButton = el} type="text" icon="pi pi-plus" label="Load" />;
-
-        return (
-            <div className="dataview-demo">
-                <DataScrollerSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataScroller - Loader</h1>
-                        <p>Instead of scrolling, a custom element can be used to load data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataScroller")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataScroller value={this.state.cars} itemTemplate={this.carTemplate} rows={5}
-                        loader={this.loadButton} footer={footer} header="Click Load Button at Footer to Load More"/>
-                </div>
-
-                <DataScrollerLoaderDoc />
-            </div>
-        );
-    }
-}
-
-export class DataScrollerLoaderDoc extends Component {
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {DataScroller} from 'primereact/datascroller';
-import {Button} from 'primereact/button';
-import {CarService} from '../service/CarService';
-
-export class DataScrollerLoaderDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-    
-    carTemplate(car) {
-        if (!car) {
-            return;
-        }
-
-        return (
-            <div className="car-details">
-                <div>
-                    <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
-                    <div className="p-grid">
-                        <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                        <div className="p-col-12">Year: <b>{car.year}</b></div>
-                        <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                        <div className="p-col-12">Color: <b>{car.color}</b></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const footer = <Button ref={(el) => this.loadButton = el} type="text" icon="pi pi-plus" label="Load" />;
-
-        return (
-            <div className="dataview-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataScroller - Loader</h1>
-                        <p>Instead of scrolling, a custom element can be used to load data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataScroller value={this.state.cars} itemTemplate={this.carTemplate} rows={5}
-                        loader={this.loadButton} footer={footer} header="Click Load Button at Footer to Load More"/>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/datascroller/DataScrollerSubmenu.js b/src/showcase/datascroller/DataScrollerSubmenu.js
deleted file mode 100644
index e534c525b8..0000000000
--- a/src/showcase/datascroller/DataScrollerSubmenu.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-
-export class DataScrollerSubmenu extends Component {
-    render() {
-        return (
-            <div className="content-section content-submenu p-clearfix">
-                <ul>
-                    <li><Link to="/datascroller">&#9679; Window</Link></li>
-                    <li><Link to="/datascroller/inline">&#9679; Inline</Link></li>
-                    <li><Link to="/datascroller/loader">&#9679; Loader</Link></li>
-                </ul>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/datatable/DataTableBasicDemo.js b/src/showcase/datatable/DataTableBasicDemo.js
deleted file mode 100644
index e98dc32113..0000000000
--- a/src/showcase/datatable/DataTableBasicDemo.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableBasicDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null
-        };
-
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Basic</h1>
-                        <p>DataTable requires a collection to display along with column components for the representation of the data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableBasicDemoDoc></DataTableBasicDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableBasicDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-
-export class DataTableBasicDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null
-        };
-
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Basic</h1>
-                        <p>DataTable requires a collection to display along with column components for the representation of the data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableColGroupDemo.js b/src/showcase/datatable/DataTableColGroupDemo.js
deleted file mode 100644
index a74e0a3842..0000000000
--- a/src/showcase/datatable/DataTableColGroupDemo.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {ColumnGroup} from '../../components/columngroup/ColumnGroup';
-import {Row} from '../../components/row/Row';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableColGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            sales: [
-                {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-                {brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122'},
-                {brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500'},
-                {brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,'},
-                {brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332'},
-                {brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005'},
-                {brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214'},
-                {brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322'},
-                {brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'},
-                {brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'}
-            ]
-        };
-    }
-
-    render() {
-        let headerGroup = <ColumnGroup>
-                            <Row>
-                                <Column header="Brand" rowSpan={3} />
-                                <Column header="Sale Rate" colSpan={4} />
-                            </Row>
-                            <Row>
-                                <Column header="Sales" colSpan={2} />
-                                <Column header="Profits" colSpan={2} />
-                            </Row>
-                            <Row>
-                                <Column header="Last Year" />
-                                <Column header="This Year" />
-                                <Column header="Last Year" />
-                                <Column header="This Year" />
-                            </Row>
-                        </ColumnGroup>;
-
-       let footerGroup = <ColumnGroup>
-                            <Row>
-                                <Column footer="Totals:" colSpan={3} />
-                                <Column footer="$506,202" />
-                                <Column footer="$531,020" />
-                            </Row>
-                         </ColumnGroup>;
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Column Grouping</h1>
-                        <p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components that both define an array of columns each having colspan and rowspan.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.sales} headerColumnGroup={headerGroup}
-                                                        footerColumnGroup={footerGroup}>
-                        <Column field="brand" />
-                        <Column field="lastYearSale" />
-                        <Column field="thisYearSale" />
-                        <Column field="lastYearProfit" />
-                        <Column field="thisYearProfit" />
-                    </DataTable>
-                </div>
-
-                <DataTableColGroupDemoDoc></DataTableColGroupDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableColGroupDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {ColumnGroup} from 'primereact/columngroup';
-import {Row} from 'primereact/row';
-
-export class DataTableColGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            sales: [
-                {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-                {brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122'},
-                {brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500'},
-                {brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,'},
-                {brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332'},
-                {brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005'},
-                {brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214'},
-                {brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322'},
-                {brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'},
-                {brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'}
-            ]
-        };
-    }
-
-    render() {
-        let headerGroup = <ColumnGroup>
-                            <Row>
-                                <Column header="Brand" rowSpan={3} />
-                                <Column header="Sale Rate" colSpan={4} />
-                            </Row>
-                            <Row>
-                                <Column header="Sales" colSpan={2} />
-                                <Column header="Profits" colSpan={2} />
-                            </Row>
-                            <Row>
-                                <Column header="Last Year" />
-                                <Column header="This Year" />
-                                <Column header="Last Year" />
-                                <Column header="This Year" />
-                            </Row>
-                        </ColumnGroup>;
-
-       let footerGroup = <ColumnGroup>
-                            <Row>
-                                <Column footer="Totals:" colSpan={3} />
-                                <Column footer="$506,202" />
-                                <Column footer="$531,020" />
-                            </Row>
-                         </ColumnGroup>;
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Column Grouping</h1>
-                        <p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components that both define an array of columns each having colspan and rowspan.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.sales} headerColumnGroup={headerGroup}
-                                                        footerColumnGroup={footerGroup}>
-                        <Column field="brand" />
-                        <Column field="lastYearSale" />
-                        <Column field="thisYearSale" />
-                        <Column field="lastYearProfit" />
-                        <Column field="thisYearProfit" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableColResizeDemo.js b/src/showcase/datatable/DataTableColResizeDemo.js
deleted file mode 100644
index d964128049..0000000000
--- a/src/showcase/datatable/DataTableColResizeDemo.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableColResizeDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars1: [],
-            cars2: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars1: data}));
-        this.carservice.getCarsMedium().then(data => this.setState({cars2: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Column Resize</h1>
-                        <p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
-                            In "expand" mode, table width also changes along with the column width. onColumnResize is a callback that passes the resized column header as a parameter.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Fit Mode</h3>
-                    <DataTable value={this.state.cars1} resizableColumns={true} columnResizeMode="fit">
-                        <Column field="vin" header="Vin" style={{width:'20%'}}/>
-                        <Column field="year" header="Year" style={{width:'40%'}}/>
-                        <Column field="brand" header="Brand" style={{width:'20%'}}/>
-                        <Column field="color" header="Color" style={{width:'20%'}}/>
-                    </DataTable>
-
-                    <h3>Expand Mode</h3>
-                    <DataTable value={this.state.cars1} resizableColumns={true} columnResizeMode="expand">
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <h3>Scrollable Mode</h3>
-                    <DataTable value={this.state.cars2} resizableColumns={true} scrollable={true} scrollHeight="200px">
-                        <Column field="vin" header="Vin" style={{width:'20%'}}/>
-                        <Column field="year" header="Year" style={{width:'40%'}}/>
-                        <Column field="brand" header="Brand" style={{width:'20%'}}/>
-                        <Column field="color" header="Color" style={{width:'20%'}}/>
-                    </DataTable>
-                </div>
-
-                <DataTableColResizeDemoDoc></DataTableColResizeDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableColResizeDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableColResizeDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars1: [],
-            cars2: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars1: data}));
-        this.carservice.getCarsMedium().then(data => this.setState({cars2: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <h3>Fit Mode</h3>
-                <DataTable value={this.state.cars1} resizableColumns={true} columnResizeMode="fit">
-                    <Column field="vin" header="Vin" style={{width:'20%'}}/>
-                    <Column field="year" header="Year" style={{width:'40%'}}/>
-                    <Column field="brand" header="Brand" style={{width:'20%'}}/>
-                    <Column field="color" header="Color" style={{width:'20%'}}/>
-                </DataTable>
-
-                <h3>Expand Mode</h3>
-                <DataTable value={this.state.cars1} resizableColumns={true} columnResizeMode="expand">
-                    <Column field="vin" header="Vin" />
-                    <Column field="year" header="Year" />
-                    <Column field="brand" header="Brand" />
-                    <Column field="color" header="Color" />
-                </DataTable>
-
-                <h3>Scrollable Mode</h3>
-                <DataTable value={this.state.cars2} resizableColumns={true} scrollable={true} scrollHeight="200px">
-                    <Column field="vin" header="Vin" style={{width:'20%'}}/>
-                    <Column field="year" header="Year" style={{width:'40%'}}/>
-                    <Column field="brand" header="Brand" style={{width:'20%'}}/>
-                    <Column field="color" header="Color" style={{width:'20%'}}/>
-                </DataTable>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableColTogglerDemo.js b/src/showcase/datatable/DataTableColTogglerDemo.js
deleted file mode 100644
index e97e1c3514..0000000000
--- a/src/showcase/datatable/DataTableColTogglerDemo.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {MultiSelect} from '../../components/multiselect/MultiSelect';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableColTogglerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            columns: [
-                {field: 'vin', header: 'Vin'},
-                {field: 'year', header: 'Year'},
-                {field: 'brand', header: 'Brand'},
-                {field: 'color', header: 'Color'}
-            ],
-            selectedColumns: []
-        }
-        this.carservice = new CarService();
-        this.onColumnToggle = this.onColumnToggle.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-        this.setState({selectedColumns: this.state.columns});
-    }
-
-    onColumnToggle(event) {
-        let selectedColumns = event.value;
-        let orderedSelectedColumns = this.state.columns.filter(col => selectedColumns.includes(col));
-        this.setState({selectedColumns: orderedSelectedColumns});
-    }
-
-    render() {
-        const header = (
-            <div style={{textAlign:'left'}}>
-                <MultiSelect value={this.state.selectedColumns} options={this.state.columns} optionLabel="field" onChange={this.onColumnToggle} style={{width:'250px'}}/>
-            </div>
-        );
-
-        const columnComponents = this.state.selectedColumns.map(col=> {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Column Toggler</h1>
-                        <p>MultiSelect component can be used to implement column toggler functionality.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} header={header}>
-                        {columnComponents}
-                    </DataTable>
-                </div>
-
-                <DataTableColTogglerDemoDoc></DataTableColTogglerDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableColTogglerDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-import {MultiSelect} from 'primereact/multiselect';
-
-export class DataTableColTogglerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            columns: [
-                {field: 'vin', header: 'Vin'},
-                {field: 'year', header: 'Year'},
-                {field: 'brand', header: 'Brand'},
-                {field: 'color', header: 'Color'}
-            ],
-            selectedColumns: []
-        }
-        this.carservice = new CarService();
-        this.onColumnToggle = this.onColumnToggle.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-        this.setState({selectedColumns: this.state.columns});
-    }
-
-    onColumnToggle(event) {
-        let selectedColumns = event.value;
-        let orderedSelectedColumns = this.state.columns.filter(col => selectedColumns.includes(col));
-        this.setState({selectedColumns: orderedSelectedColumns});
-    }
-
-    render() {
-        const header = (
-            <div style={{textAlign:'left'}}>
-                <MultiSelect value={this.state.selectedColumns} options={this.state.columns} optionLabel="field" onChange={this.onColumnToggle} style={{width:'250px'}}/>
-            </div>
-        );
-
-        const columnComponents = this.state.selectedColumns.map(col=> {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Column Toggler</h1>
-                        <p>MultiSelect component can be used to implement column toggler functionality.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} header={header}>
-                        {columnComponents}
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableContextMenuDemo.js b/src/showcase/datatable/DataTableContextMenuDemo.js
deleted file mode 100644
index 9e8afc6df6..0000000000
--- a/src/showcase/datatable/DataTableContextMenuDemo.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {ContextMenu} from '../../components/contextmenu/ContextMenu';
-import {Growl} from '../../components/growl/Growl';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableContextMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            menu: [
-                {label: 'View', icon: 'pi pi-fw pi-search', command: (event) => this.viewCar(this.state.selectedCar)},
-                {label: 'Delete', icon: 'pi pi-fw pi-times', command: (event) => this.deleteCar(this.state.selectedCar)}
-            ]
-        };
-        this.carservice = new CarService();
-        this.viewCar = this.viewCar.bind(this);
-        this.deleteCar = this.deleteCar.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    viewCar(car) {
-        this.growl.show({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
-    }
-
-    deleteCar(car) {
-        let carsList = [...this.state.cars];
-        carsList = carsList.filter((c) => c.vin !== car.vin);
-
-        this.growl.show({severity: 'info', summary: 'Car Delete', detail: car.vin + ' - ' + car.brand});
-        this.setState({
-            cars: carsList
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - ContextMenu</h1>
-                        <p>DataTable has exclusive integration with ContextMenu.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => { this.growl = el; }}></Growl>
-
-                    <ContextMenu model={this.state.menu} ref={el => this.cm = el} onHide={() => this.setState({selectedCar: null})}/>
-
-                    <DataTable value={this.state.cars} header="Right Click"
-                        contextMenuSelection={this.state.selectedCar} onContextMenuSelectionChange={e => this.setState({selectedCar: e.value})}
-                        onContextMenu={e => this.cm.show(e.originalEvent)}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableContextMenuDemoDoc></DataTableContextMenuDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableContextMenuDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {ContextMenu} from 'primereact/contextmenu';
-import {Growl} from 'primereact/growl';
-import {CarService} from '../service/CarService';
-
-export class DataTableContextMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            menu: [
-                {label: 'View', icon: 'pi pi-fw pi-search', command: (event) => this.viewCar(this.state.selectedCar)},
-                {label: 'Delete', icon: 'pi pi-fw pi-times', command: (event) => this.deleteCar(this.state.selectedCar)}
-            ]
-        };
-        this.carservice = new CarService();
-        this.viewCar = this.viewCar.bind(this);
-        this.deleteCar = this.deleteCar.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    viewCar(car) {
-        this.growl.show({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
-    }
-
-    deleteCar(car) {
-        let carsList = [...this.state.cars];
-        carsList = carsList.filter((c) => c.vin !== car.vin);
-
-        this.growl.show({severity: 'info', summary: 'Car Delete', detail: car.vin + ' - ' + car.brand});
-        this.setState({
-            cars: carsList
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - ContextMenu</h1>
-                        <p>DataTable has exclusive integration with ContextMenu.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => { this.growl = el; }}></Growl>
-
-                    <ContextMenu model={this.state.menu} ref={el => this.cm = el} onHide={() => this.setState({selectedCar: null})}/>
-
-                    <DataTable value={this.state.cars} header="Right Click"
-                        contextMenuSelection={this.state.selectedCar} onContextMenuSelectionChange={e => this.setState({selectedCar: e.value})}
-                        onContextMenu={e => this.cm.show(e.originalEvent)}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableCrudDemo.js b/src/showcase/datatable/DataTableCrudDemo.js
deleted file mode 100644
index aa580a5369..0000000000
--- a/src/showcase/datatable/DataTableCrudDemo.js
+++ /dev/null
@@ -1,298 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Button} from "../../components/button/Button";
-import {Dialog} from "../../components/dialog/Dialog";
-import {InputText} from "../../components/inputtext/InputText";
-
-export class DataTableCrudDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.save = this.save.bind(this);
-        this.delete = this.delete.bind(this);
-        this.onCarSelect = this.onCarSelect.bind(this);
-        this.addNew = this.addNew.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    save() {
-        let cars = [...this.state.cars];
-        if(this.newCar)
-            cars.push(this.state.car);
-        else
-            cars[this.findSelectedCarIndex()] = this.state.car;
-
-        this.setState({cars:cars, selectedCar:null, car: null, displayDialog:false});
-    }
-
-    delete() {
-        let index = this.findSelectedCarIndex();
-        this.setState({
-            cars: this.state.cars.filter((val,i) => i !== index),
-            selectedCar: null,
-            car: null,
-            displayDialog: false});
-    }
-
-    findSelectedCarIndex() {
-        return this.state.cars.indexOf(this.state.selectedCar);
-    }
-
-    updateProperty(property, value) {
-        let car = this.state.car;
-        car[property] = value;
-        this.setState({car: car});
-    }
-
-    onCarSelect(e){
-        this.newCar = false;
-        this.setState({
-            displayDialog:true,
-            car: Object.assign({}, e.data)
-        });
-    }
-
-    addNew() {
-        this.newCar = true;
-        this.setState({
-            car: {vin:'', year: '', brand: '', color: ''},
-            displayDialog: true
-        });
-    }
-
-    render() {
-        let header = <div className="p-clearfix" style={{lineHeight:'1.87em'}}>CRUD for Cars </div>;
-
-        let footer = <div className="p-clearfix" style={{width:'100%'}}>
-            <Button style={{float:'left'}} label="Add" icon="pi pi-plus" onClick={this.addNew}/>
-        </div>;
-
-        let dialogFooter = <div className="ui-dialog-buttonpane p-clearfix">
-                <Button label="Delete" icon="pi pi-times" onClick={this.delete}/>
-                <Button label="Save" icon="pi pi-check" onClick={this.save}/>
-            </div>;
-
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable</h1>
-                        <p>This samples demonstrates a CRUD implementation using various PrimeReact components.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} rows={15}  header={header} footer={footer}
-                               selectionMode="single" selection={this.state.selectedCar} onSelectionChange={e => this.setState({selectedCar: e.value})}
-                               onRowSelect={this.onCarSelect}>
-                        <Column field="vin" header="Vin" sortable={true} />
-                        <Column field="year" header="Year" sortable={true} />
-                        <Column field="brand" header="Brand" sortable={true} />
-                        <Column field="color" header="Color" sortable={true} />
-                    </DataTable>
-
-                    <Dialog visible={this.state.displayDialog} style={{width: '300px'}} header="Car Details" modal={true} footer={dialogFooter} onHide={() => this.setState({displayDialog: false})}
-                        blockScroll={false}>
-                        {
-                            this.state.car &&
-
-                            <div className="p-grid p-fluid">
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="vin">Vin</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="vin" onChange={(e) => {this.updateProperty('vin', e.target.value)}} value={this.state.car.vin}/>
-                                </div>
-
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="year">Year</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="year" onChange={(e) => {this.updateProperty('year', e.target.value)}} value={this.state.car.year}/>
-                                </div>
-
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="brand">Brand</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="brand" onChange={(e) => {this.updateProperty('brand', e.target.value)}} value={this.state.car.brand}/>
-                                </div>
-
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="color">Color</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="color" onChange={(e) => {this.updateProperty('color', e.target.value)}} value={this.state.car.color}/>
-                                </div>
-                            </div>
-                        }
-                    </Dialog>
-                </div>
-
-                <DataTableCrudDoc/>
-
-            </div>
-        );
-    }
-}
-
-export class DataTableCrudDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-export class DataTableCrudDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.save = this.save.bind(this);
-        this.delete = this.delete.bind(this);
-        this.onCarSelect = this.onCarSelect.bind(this);
-        this.addNew = this.addNew.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    save() {
-        let cars = [...this.state.cars];
-        if(this.newCar)
-            cars.push(this.state.car);
-        else
-            cars[this.findSelectedCarIndex()] = this.state.car;
-
-        this.setState({cars:cars, selectedCar:null, car: null, displayDialog:false});
-    }
-
-    delete() {
-        let index = this.findSelectedCarIndex();
-        this.setState({
-            cars: this.state.cars.filter((val,i) => i !== index),
-            selectedCar: null,
-            car: null,
-            displayDialog: false});
-    }
-
-    findSelectedCarIndex() {
-        return this.state.cars.indexOf(this.state.selectedCar);
-    }
-
-    updateProperty(property, value) {
-        let car = this.state.car;
-        car[property] = value;
-        this.setState({car: car});
-    }
-
-    onCarSelect(e){
-        this.newCar = false;
-        this.setState({
-            displayDialog:true,
-            car: Object.assign({}, e.data)
-        });
-    }
-
-    addNew() {
-        this.newCar = true;
-        this.setState({
-            car: {vin:'', year: '', brand: '', color: ''},
-            displayDialog: true
-        });
-    }
-
-    render() {
-        let header = <div className="p-clearfix" style={{lineHeight:'1.87em'}}>CRUD for Cars </div>;
-
-        let footer = <div className="p-clearfix" style={{width:'100%'}}>
-            <Button style={{float:'left'}} label="Add" icon="pi pi-plus" onClick={this.addNew}/>
-        </div>;
-
-        let dialogFooter = <div className="ui-dialog-buttonpane p-clearfix">
-                <Button label="Delete" icon="pi pi-times" onClick={this.delete}/>
-                <Button label="Save" icon="pi pi-check" onClick={this.save}/>
-            </div>;
-
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable</h1>
-                        <p>This samples demonstrates a CRUD implementation using various PrimeReact components.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} rows={15}  header={header} footer={footer}
-                               selectionMode="single" selection={this.state.selectedCar} onSelectionChange={e => this.setState({selectedCar: e.value})}
-                               onRowSelect={this.onCarSelect}>
-                        <Column field="vin" header="Vin" sortable={true} />
-                        <Column field="year" header="Year" sortable={true} />
-                        <Column field="brand" header="Brand" sortable={true} />
-                        <Column field="color" header="Color" sortable={true} />
-                    </DataTable>
-
-                    <Dialog visible={this.state.displayDialog} width="300px" header="Car Details" modal={true} footer={dialogFooter} onHide={() => this.setState({displayDialog: false})}>
-                        {
-                            this.state.car &&
-
-                            <div className="p-grid p-fluid">
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="vin">Vin</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="vin" onChange={(e) => {this.updateProperty('vin', e.target.value)}} value={this.state.car.vin}/>
-                                </div>
-
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="year">Year</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="year" onChange={(e) => {this.updateProperty('year', e.target.value)}} value={this.state.car.year}/>
-                                </div>
-
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="brand">Brand</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="brand" onChange={(e) => {this.updateProperty('brand', e.target.value)}} value={this.state.car.brand}/>
-                                </div>
-
-                                <div className="p-col-4" style={{padding:'.75em'}}><label htmlFor="color">Color</label></div>
-                                <div className="p-col-8" style={{padding:'.5em'}}>
-                                    <InputText id="color" onChange={(e) => {this.updateProperty('color', e.target.value)}} value={this.state.car.color}/>
-                                </div>
-                            </div>
-                        }
-                    </Dialog>
-                </div>
-
-                <DataTableCrudDoc/>
-
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableDemo.js b/src/showcase/datatable/DataTableDemo.js
deleted file mode 100644
index b3d9c858c2..0000000000
--- a/src/showcase/datatable/DataTableDemo.js
+++ /dev/null
@@ -1,3066 +0,0 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {InputText} from '../../components/inputtext/InputText';
-import {Button} from '../../components/button/Button';
-import {CustomerService} from '../service/CustomerService';
-import {Dropdown} from '../../components/dropdown/Dropdown';
-import {Calendar} from '../../components/calendar/Calendar';
-import {MultiSelect} from '../../components/multiselect/MultiSelect';
-import {ProgressBar} from '../../components/progressbar/ProgressBar';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import classNames from 'classnames';
-import "./DataTableDemo.scss"
-
-export class DataTableDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            customers: null,
-            selectedCustomers: null,
-            globalFilter: null,
-            selectedRepresentatives: null,
-            representatives: [
-                {name: "Amy Elsner", image: 'amyelsner.png'},
-                {name: "Anna Fali", image: 'annafali.png'},
-                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
-                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
-                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
-                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
-                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
-                {name: "Onyama Limba", image: 'onyamalimba.png'},
-                {name: "Stephen Shaw", image: 'stephenshaw.png'},
-                {name: "XuXue Feng", image: 'xuxuefeng.png'}
-            ],
-            dateFilter: null,
-            selectedStatus: null,
-            statuses: [
-                'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
-            ]
-        };
-
-        this.customerService = new CustomerService();
-
-        //body cells
-        this.countryBodyTemplate = this.countryBodyTemplate.bind(this);
-        this.representativeBodyTemplate = this.representativeBodyTemplate.bind(this);
-        this.statusBodyTemplate = this.statusBodyTemplate.bind(this);
-        this.activityBodyTemplate = this.activityBodyTemplate.bind(this);
-        this.actionBodyTemplate = this.actionBodyTemplate.bind(this);
-
-        //filters
-        this.representativeItemTemplate = this.representativeItemTemplate.bind(this);
-        this.onRepresentativeFilterChange = this.onRepresentativeFilterChange.bind(this);
-        this.onDateFilterChange = this.onDateFilterChange.bind(this);
-        this.filterDate = this.filterDate.bind(this);       //custom filter function
-        this.statusItemTemplate = this.statusItemTemplate.bind(this);
-        this.onStatusFilterChange = this.onStatusFilterChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.customerService.getCustomersLarge().then(data => this.setState({customers: data}));
-    }
-
-    renderHeader() {
-        return (
-            <div>
-                List of Customers
-                <div  className="p-datatable-globalfilter-container">
-                    <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" />
-                </div>
-            </div>
-        );
-    }
-
-    activityBodyTemplate(rowData) {
-        return <ProgressBar value={rowData.activity} showValue={false} />;
-    }
-
-    actionBodyTemplate() {
-        return (
-            <Button type="button" icon="pi pi-cog" className="p-button-secondary"></Button>
-        );
-    }
-
-    statusBodyTemplate(rowData) {
-        return <span className={classNames('customer-badge', 'status-' + rowData.status)}>{rowData.status}</span>;
-    }
-
-    countryBodyTemplate(rowData) {
-        let { name, code } = rowData.country;
-
-        return (
-            <>
-                <img src="http://github.com/showcase/resources/demo/images/flag_placeholder.png" alt={name} className={classNames('flag', 'flag-' + code)} />
-                <span style={{verticalAlign: 'middle', marginLeft: '.5em'}}>{name}</span>
-            </>
-        );
-    }
-
-    representativeBodyTemplate(rowData) {
-        const src = "showcase/resources/demo/images/avatar/" + rowData.representative.image;
-
-        return (
-            <>
-                <img alt={rowData.representative.name} src={src} width="32" style={{verticalAlign: 'middle'}} />
-                <span style={{verticalAlign: 'middle', marginLeft: '.5em'}}>{rowData.representative.name}</span>
-            </>
-        );
-    }
-
-    renderRepresentativeFilter() {
-        return (
-            <MultiSelect className="p-column-filter" value={this.state.selectedRepresentatives} options={this.state.representatives}
-                onChange={this.onRepresentativeFilterChange} itemTemplate={this.representativeItemTemplate} placeholder="All" optionLabel="name" optionValue="name" />
-        );
-    }
-
-    representativeItemTemplate(option) {
-        const src = "showcase/resources/demo/images/avatar/" + option.image;
-
-        return (
-            <div className="p-multiselect-representative-option">
-                <img alt={option.name} src={src} width="32" style={{verticalAlign: 'middle'}} />
-                <span style={{verticalAlign: 'middle', marginLeft: '.5em'}}>{option.name}</span>
-            </div>
-        );
-    }
-
-    onRepresentativeFilterChange(event) {
-        this.dt.filter(event.value, 'representative.name', 'in');
-        this.setState({selectedRepresentatives: event.value});
-    }
-
-    renderDateFilter() {
-        return (
-            <Calendar value={this.state.dateFilter} onChange={this.onDateFilterChange} placeholder="Registration Date" dateFormat="yy-mm-dd" className="p-column-filter" />
-        );
-    }
-
-    onDateFilterChange(event) {
-        if (event.value !== null)
-            this.dt.filter(this.formatDate(event.value), 'date', 'equals');
-        else
-            this.dt.filter(null, 'date', 'equals');
-
-        this.setState({dateFilter: event.value});
-    }
-
-    filterDate(value, filter) {
-        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        return value === this.formatDate(filter);
-    }
-
-    formatDate(date) {
-        let month = date.getMonth() + 1;
-        let day = date.getDate();
-
-        if (month < 10) {
-            month = '0' + month;
-        }
-
-        if (day < 10) {
-            day = '0' + day;
-        }
-
-        return date.getFullYear() + '-' + month + '-' + day;
-    }
-
-    renderStatusFilter() {
-        return (
-            <Dropdown value={this.state.selectedStatus} options={this.state.statuses} onChange={this.onStatusFilterChange}
-                        itemTemplate={this.statusItemTemplate} showClear={true} placeholder="Select a Status" className="p-column-filter"/>
-        );
-    }
-
-    statusItemTemplate(option) {
-        return (
-            <span className={classNames('customer-badge', 'status-' + option)}>{option}</span>
-        );
-    }
-
-    onStatusFilterChange(event) {
-        this.dt.filter(event.value, 'status', 'equals');
-        this.setState({selectedStatus: event.value});
-    }
-
-    render() {
-        const header = this.renderHeader();
-        const representativeFilter = this.renderRepresentativeFilter();
-        const dateFilter = this.renderDateFilter();
-        const statusFilter = this.renderStatusFilter();
-
-        return (
-            <div className="datatable-doc-demo">
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable</h1>
-                        <p>DataTable displays data in tabular format.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable ref={(el) => this.dt = el} value={this.state.customers}
-                        header={header} responsive className="p-datatable-customers" dataKey="id" rowHover globalFilter={this.state.globalFilter}
-                        selection={this.state.selectedCustomers} onSelectionChange={e => this.setState({selectedCustomers: e.value})}
-                        paginator rows={10} emptyMessage="No customers found" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" rowsPerPageOptions={[10,25,50]}>
-                        <Column selectionMode="multiple" style={{width:'3em'}}/>
-                        <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" />
-                        <Column sortField="country.name" filterField="country.name" header="Country" body={this.countryBodyTemplate} sortable filter filterMatchMode="contains" filterPlaceholder="Search by country"/>
-                        <Column sortField="representative.name" filterField="representative.name" header="Representative" body={this.representativeBodyTemplate} sortable filter filterElement={representativeFilter} />
-                        <Column field="date" header="Date" sortable filter filterMatchMode="custom" filterFunction={this.filterDate} filterElement={dateFilter} />
-                        <Column field="status" header="Status" body={this.statusBodyTemplate} sortable filter filterElement={statusFilter} />
-                        <Column field="activity" header="Activity" body={this.activityBodyTemplate} sortable filter filterMatchMode="gte" filterPlaceholder="Minimum" />
-                        <Column body={this.actionBodyTemplate} headerStyle={{width: '8em', textAlign: 'center'}} bodyStyle={{textAlign: 'center', overflow: 'visible'}} />
-                    </DataTable>
-                </div>
-
-                <DataTableDoc></DataTableDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {DataTable} from 'primereact/datatable';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>DataTable requires a value as an array of objects and columns defined with Column component. Throughout the samples, a car interface having vin, brand, year and color properties is used to define an object to be displayed by the datatable. Cars are loaded by a CarService that connects to a server to fetch the cars with a axios.
-                Note that this is only for demo purposes, DataTable does not have any restrictions on how data is provided.
-            </p>
-
-<CodeHighlight className="language-javascript">
-{`
-import axios from 'axios';
-
-export class CarService {
-
-    getCarsSmall() {
-        return axios.get('showcase/resources/demo/data/cars-small.json')
-                .then(res => res.data.data);
-    }
-
-    getCarsMedium() {
-        return axios.get('showcase/resources/demo/data/cars-medium.json')
-                .then(res => res.data.data);
-    }
-
-    getCarsLarge() {
-        return axios.get('showcase/resources/demo/data/cars-large.json')
-                .then(res => res.data.data);
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>Following sample datatable has 4 columns and retrieves the data from a service on componentDidMount.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>Dynamic columns are also possible by creating the column component dynamically.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        let cols = [
-            {field: 'vin', header: 'Vin'},
-            {field: 'year', header: 'Year'},
-            {field: 'brand', header: 'Brand'},
-            {field: 'color', header: 'Color'}
-        ];
-
-        let dynamicColumns = cols.map((col,i) => {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <DataTable value={this.state.cars}>
-                {dynamicColumns}
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Column Component</h3>
-            <p>Column component defines various options to specify corresponding features.</p>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>columnKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of a column if field property is not defined. Only utilized by reorderableColumns feature at the moment.</td>
-                        </tr>
-                        <tr>
-                            <td>field</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property of a row data.</td>
-                        </tr>
-                        <tr>
-                            <td>sortField</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property of a row data used for sorting, defaults to field.</td>
-                        </tr>
-                        <tr>
-                            <td>filterField</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Property of a row data used for filtering, defaults to field.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Header content of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>body</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Body content of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingBody</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function to return the body content of the column to display when virtual scroll loads the new data.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Footer content of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>sortable</td>
-                            <td>any</td>
-                            <td>false</td>
-                            <td>Defines if a column is sortable.</td>
-                        </tr>
-                        <tr>
-                            <td>sortFunction</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Sort function for custom sorting.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if a column can be filtered.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMatchMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom".</td>
-                        </tr>
-                        <tr>
-                            <td>filterType</td>
-                            <td>string</td>
-                            <td>text</td>
-                            <td>Type of the filter input field.</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines placeholder of the input fields.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMaxlength</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Specifies the maximum number of characters allowed in the filter element.</td>
-                        </tr>
-                        <tr>
-                            <td>filterElement</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Element for custom filtering.</td>
-                        </tr>
-                        <tr>
-                            <td>filterFunction</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Custom filter function.</td>
-                        </tr>
-                        <tr>
-                            <td>excludeGlobalFilter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to exclude from global filtering or not.</td>
-                        </tr>
-                        <tr>
-                            <td>filterHeaderStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the filter header.</td>
-                        </tr>
-                        <tr>
-                            <td>filterHeaderClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the filter header.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the column.</td>
-                        </tr>
-                        <tr>
-                            <td>headerStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the header.</td>
-                        </tr>
-                        <tr>
-                            <td>bodyStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the body.</td>
-                        </tr>
-                        <tr>
-                            <td>bodyClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the body.</td>
-                        </tr>
-                        <tr>
-                            <td>footerStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the footer.</td>
-                        </tr>
-                        <tr>
-                            <td>footerClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the footer.</td>
-                        </tr>
-                        <tr>
-                            <td>expander</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays an icon to toggle row expansion.</td>
-                        </tr>
-                        <tr>
-                            <td>frozen</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the column is fixed in horizontal scrolling or not.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines column based selection mode, options are "single" and "multiple".</td>
-                        </tr>
-                        <tr>
-                            <td>colSpan</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of columns to span for grouping.</td>
-                        </tr>
-                        <tr>
-                            <td>rowSpan</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of rows to span for grouping.</td>
-                        </tr>
-                        <tr>
-                            <td>editor</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function to provide the cell editor input.</td>
-                        </tr>
-                        <tr>
-                            <td>editorValidator</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Validator function to validate the cell input value.</td>
-                        </tr>
-                        <tr>
-                            <td>editorValidatorEvent</td>
-                            <td>string</td>
-                            <td>click</td>
-                            <td>Event to trigger the validation, possible values are "click" and "blur".</td>
-                        </tr>
-                        <tr>
-                            <td>onEditorSubmit</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Callback to execute when editor is submitted.</td>
-                        </tr>
-                        <tr>
-                            <td>onEditorCancel</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Callback to execute when editor is cancelled.</td>
-                        </tr>
-                        <tr>
-                            <td>rowReorder</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether this column displays an icon to reorder the rows.</td>
-                        </tr>
-                        <tr>
-                            <td>rowReorderIcon</td>
-                            <td>string</td>
-                            <td>pi pi-bars</td>
-                            <td>Icon of the drag handle to reorder rows.</td>
-                        </tr>
-                        <tr>
-                            <td>rowEditor</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays icons to edit row.</td>
-                        </tr>
-                        <tr>
-                            <td>exportable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defines whether the column is exported or not.</td>
-                        </tr>
-                        <tr>
-                            <td>reorderable</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Table Layout</h3>
-            <p>Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents
-                set <i>autoLayout</i> property to true. Note that Scrollable and/or Resizable tables do not support auto layout due to technical limitations.
-            </p>
-
-            <h3>Templates</h3>
-            <p>Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating where current row data and column properties are passed to the body template.
-                On the other hand, <i>header</i> and <i>footer</i> properties of a column are used to define the content of these sections by accepting either simple string values or JSX for advanced content. Similarly DataTable itself
-                also provides <i>header</i> and <i>footer</i> properties for the main header and footer of the table.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableTemplatingDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.brandTemplate = this.brandTemplate.bind(this);
-        this.colorTemplate = this.colorTemplate.bind(this);
-        this.actionBodyTemplate = this.actionBodyTemplate.bind(this);
-    }
-
-    colorTemplate(rowData, column) {
-        return <span style={{color: rowData['color']}}>{rowData['color']}</span>;
-    }
-
-    brandTemplate(rowData, column) {
-        var src = "showcase/resources/demo/images/car/" + rowData.brand + ".png";
-        return <img src={src} alt={rowData.brand}/>;
-    }
-
-    actionTemplate(rowData, column) {
-        return <div>
-            <Button type="button" icon="pi pi-search" className="p-button-success"></Button>
-            <Button type="button" icon="pi pi-pencil" className="p-button-warning"></Button>
-        </div>;
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        var carCount = this.state.cars ? this.state.cars.length: 0;
-        var header = <div className="p-clearfix" style={{'lineHeight':'1.87em'}}>List of Cars <Button icon="pi pi-refresh" style={{'float':'right'}}/></div>;
-        var footer = "There are " + carCount + ' cars';
-
-        return (
-            <DataTable value={this.state.cars} header={header} footer={footer}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" body={this.brandTemplate} style={{textAlign:'center'}}/>
-                <Column field="color" header="Color" body={this.colorTemplate} />
-                <Column body={this.actionTemplate} style={{textAlign:'center', width: '6em'}}/>
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Column Group</h3>
-            <p>Columns can be grouped at header and footer sections by defining a ColumnGroup component as the <i>headerColumnGroup</i> and <i>footerColumnGroup</i> properties.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {ColumnGroup} from 'primereact/columngroup';
-import {Row} from 'primereact/row';
-
-export class DataTableColGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            sales: [
-                {brand: 'Apple', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-                {brand: 'Samsung', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122'},
-                {brand: 'Microsoft', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500'},
-                {brand: 'Philips', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323,'},
-                {brand: 'Song', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332'},
-                {brand: 'LG', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005'},
-                {brand: 'Sharp', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214'},
-                {brand: 'Panasonic', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322'},
-                {brand: 'HTC', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232'},
-                {brand: 'Toshiba', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533'}
-            ]
-        };
-    }
-
-    render() {
-        let headerGroup = <ColumnGroup>
-                            <Row>
-                                <Column header="Brand" rowSpan={3} />
-                                <Column header="Sale Rate" colSpan={4} />
-                            </Row>
-                            <Row>
-                                <Column header="Sales" colSpan={2} />
-                                <Column header="Profits" colSpan={2} />
-                            </Row>
-                            <Row>
-                                <Column header="Last Year" />
-                                <Column header="This Year" />
-                                <Column header="Last Year" />
-                                <Column header="This Year" />
-                            </Row>
-                        </ColumnGroup>;
-
-       let footerGroup = <ColumnGroup>
-                            <Row>
-                                <Column footer="Totals:" colSpan={3} />
-                                <Column footer="$506,202" />
-                                <Column footer="$531,020" />
-                            </Row>
-                         </ColumnGroup>;
-        return (
-            <DataTable value={this.state.sales} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup}>
-                <Column field="brand" />
-                <Column field="lastYearSale" />
-                <Column field="thisYearSale" />
-                <Column field="lastYearProfit" />
-                <Column field="thisYearProfit" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>When using sorting with column groups, define sort properties like sortable at columns inside column groups not at the direct children of DataTable component.</p>
-
-            <h3>Pagination</h3>
-            <p>Pagination is enabled by setting <i>paginator</i> property to true, <i>rows</i> property defines the number of rows per page and optionally <i>pageLinks</i> specify the the number of page links to display.
-            See <Link to="/paginator">paginator</Link> component for more information about further customization options such as <i>paginator template</i>.</p>
-
-            <p>Pagination can either be used in <b>Controlled</b> or <b>Uncontrolled</b> manner. In controlled mode, <i>first</i> and <i>onPage</i> properties need to be defined to control the paginator state.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTablePaginatorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} paginator={true} rows={10} first={this.state.first} onPage={(e) => this.setState({first: e.first})}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>In uncontrolled mode, only <i>paginator</i> and <i>rows</i> need to be enabled. Index of the first record can be still be provided using the <i>first</i> property in uncontrolled mode however
-            it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the paginator state, prefer to use the component as controlled.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTablePaginatorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} paginator={true} rows={10}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>Elements of the paginator can be customized using the <i>paginatorTemplate</i> by the DataTable. Refer to the template section of the <Link to="/paginator"> paginator documentation</Link> for further options.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} paginator={true} rows={10} first={start}
-    paginatorTemplate="RowsPerPageDropdown PageLinks FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Sorting</h3>
-            <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is <i>field</i> by default and can be customized using <i>sortField</i>.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Column field="vin" header="Vin" sortable={true}/>
-
-`}
-</CodeHighlight>
-
-            <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} sortMode="multiple">
-
-`}
-</CodeHighlight>
-
-
-            <p>In case you'd like to display the table as sorted per a single column by default on mount, use <i>sortField</i> and <i>sortOrder</i> properties in <b>Controlled</b> or <b>Uncontrolled</b> manner.
-            In controlled mode, <i>sortField</i>, <i>sortOrder</i> and <i>onSort</i> properties need to be defined to control the sorting state.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} sortField={this.state.sortField} sortOrder={this.state.sortOrder} onSort={(e) => this.setState({sortField: e.sortField, sortOrder: e.sortOrder})}>
-    <Column field="vin" header="Vin" sortable={true}/>
-    <Column field="year" header="Year" sortable={true}/>
-    <Column field="brand" header="Brand" sortable={true}/>
-    <Column field="color" header="Color" sortable={true}/>
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} multiSortMeta={multiSortMeta} onSort={(e) => this.setState({multiSortMeta: e.multiSortMeta})}>
-    <Column field="vin" header="Vin" sortable={true}/>
-    <Column field="year" header="Year" sortable={true}/>
-    <Column field="brand" header="Brand" sortable={true}/>
-    <Column field="color" header="Color" sortable={true}/>
-</DataTable>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-let multiSortMeta = [];
-multiSortMeta.push({field: 'year', order: 1});
-multiSortMeta.push({field: 'brand', order: -1});
-
-`}
-</CodeHighlight>
-
-            <p>In uncontrolled mode, no additional properties need to be enabled. Initial sort field can be still be provided using the <i>sortField</i> property in uncontrolled mode however
-            it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the sorting state, prefer to use the component as controlled.</p>
-
-            <CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} sortField="year" sortOrder={1}>
-    <Column field="vin" header="Vin" sortable={true}/>
-    <Column field="year" header="Year" sortable={true}/>
-    <Column field="brand" header="Brand" sortable={true}/>
-    <Column field="color" header="Color" sortable={true}/>
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>To customize sorting algorithm, define a sortFunction that sorts the list.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} >
-    <Column field="vin" header="Vin" sortable={true}/>
-    <Column field="year" header="Year" sortable={true} sortFunction={this.mysort}/>
-    <Column field="brand" header="Brand" sortable={true}/>
-    <Column field="color" header="Color" sortable={true}/>
-</DataTable>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-mysort(event) {
-    //event.field = Field to sort
-    //event.order = Sort order
-}
-
-`}
-</CodeHighlight>
-
-            <p>Getting access to the sorted data is provided by the <i>onValueChange</i> callback.</p>
-            <CodeHighlight className="language-javascript">
-{`
-<DataTable value={this.state.cars} onValueChange={sortedData => console.log(sortedData)}>
-    <Column field="vin" header="Vin" sortable={true} />
-    <Column field="year" header="Year" sortable={true} />
-    <Column field="brand" header="Brand" sortable={true} />
-    <Column field="color" header="Color" sortable={true} />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Filtering</h3>
-            <p>Filtering is enabled by setting the <i>filter</i> property as true on a column. Default match mode is "startsWith" and this can be configured using <i>filterMatchMode</i> property that also accepts                 "contains", "endsWith", "equals", "notEquals", "in", "lt", "lte", "gt", "gte" and "custom" as available modes.</p>
- <CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars}>
-    <Column field="vin" header="Vin" filter={true} />
-    <Column field="year" header="Year" filter={true} filterPlaceholder="Search" />
-    <Column field="brand" header="Brand" filter={true} filterMatchMode="contains"/>
-    <Column field="color" header="Color" filter={true} filterMatchMode="endsWith"/>
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>An optional global filter feature is available to search all fields with the same keyword,
-                to implement this place an input component whose value is bound to the globalFilter property of the DataTable.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableFilterDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            globalFilter: null
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        let header = (
-            <div style={{'textAlign':'left'}}>
-                <i className="pi pi-search" style={{margin:'4px 4px 0 0'}}></i>
-                <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/>
-            </div>
-        );
-
-        return (
-            <DataTable value={this.state.cars} paginator={true} rows={10} header={header} globalFilter={this.state.globalFilter}>
-                <Column field="vin" header="Vin" filter={true} />
-                <Column field="year" header="Year" filter={true} />
-                <Column field="brand" header="Brand" filter={true} />
-                <Column field="color" header="Color" filter={true}  />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>By default, input fields are used as filter elements and this can be customized using the <i>filterElement</i> property of the Column that calls the filter function of the table instance by passing the value, field and the match mode.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableCustomFilterDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            brand: null,
-            colors: null
-        };
-        this.carservice = new CarService();
-        this.onBrandChange = this.onBrandChange.bind(this);
-        this.onColorChange = this.onColorChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    onBrandChange(event) {
-        this.dt.filter(event.value, 'brand', 'equals');
-        this.setState({brand: event.value});
-    }
-
-    onColorChange(event) {
-        this.dt.filter(event.value, 'color', 'in');
-        this.setState({colors: event.value});
-    }
-
-    render() {
-        let brands = [
-                {label: 'All Brands', value: null},
-                {label: 'Audi', value: 'Audi'},
-                {label: 'BMW', value: 'BMW'},
-                {label: 'Fiat', value: 'Fiat'},
-                {label: 'Honda', value: 'Honda'},
-                {label: 'Jaguar', value: 'Jaguar'},
-                {label: 'Mercedes', value: 'Mercedes'},
-                {label: 'Renault', value: 'Renault'},
-                {label: 'VW', value: 'VW'},
-                {label: 'Volvo', value: 'Volvo'}
-            ];
-
-        let brandFilter = <Dropdown style={{width: '100%'}} className="ui-column-filter"
-                value={this.state.brand} options={brands} onChange={this.onBrandChange}/>
-
-        let colors = [
-            {label: 'White', value: 'White'},
-            {label: 'Green', value: 'Green'},
-            {label: 'Silver', value: 'Silver'},
-            {label: 'Black', value: 'Black'},
-            {label: 'Red', value: 'Red'},
-            {label: 'Maroon', value: 'Maroon'},
-            {label: 'Brown', value: 'Brown'},
-            {label: 'Orange', value: 'Orange'},
-            {label: 'Blue', value: 'Blue'}
-        ];
-
-        let colorFilter = <MultiSelect style={{width:'100%'}} className="ui-column-filter"
-            value={this.state.colors} options={colors} onChange={this.onColorChange}/>
-
-        return (
-            <DataTable ref={(el) => this.dt = el} value={this.state.cars}>
-                <Column field="vin" header="Vin" filter={true} />
-                <Column field="year" header="Year" filter={true} />
-                <Column field="brand" header="Brand" filter={true} filterElement={brandFilter} />
-                <Column field="color" header="Color" filter={true} filterElement={colorFilter} />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>In case you'd like to display the table as filtered by default on mount, use <i>filters</i> property in <b>Controlled</b> or <b>Uncontrolled</b> manner.
-            In controlled mode, <i>filters</i> and <i>onFilter</i> properties need to be defined to control the filtering state.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableDefaultFilteredDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            filters: {
-                'brand': {
-                    value: 'BMW'
-                }
-            }
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} filters={this.state.filters} onFilter={(e) => this.setState({filters: e.filters})}>
-                <Column field="vin" header="Vin" filter={true} />
-                <Column field="year" header="Year" filter={true} />
-                <Column field="brand" header="Brand" filter={true} />
-                <Column field="color" header="Color" filter={true}  />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>In uncontrolled filtering, no additional properties need to be enabled. Initial filtering can be still be provided using the <i>filters</i> property in uncontrolled mode however
-            it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the filtering state, prefer to use the component as controlled.</p>
-
-            <CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars}>
-    <Column field="vin" header="Vin" filter={true} />
-    <Column field="year" header="Year" filter={true} />
-    <Column field="brand" header="Brand" filter={true} />
-    <Column field="color" header="Color" filter={true}  />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>Custom filtering is implemented by setting the <i>filterMatchMode</i> property as "custom" and providing a function that takes the data value along with the filter value to return a boolean.</p>
-            <CodeHighlight className="language-javascript">
-{`
-export class DataTableFilterDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.yearFilter = this.yearFilter.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    yearFilter(value, filter) {
-        return filter > value;
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars}>
-                <Column field="vin" header="Vin" filter={true} />
-                <Column field="year" header="Year" filter={true} filterMatchMode="custom" filterFunction={this.yearFilter}/>
-                <Column field="brand" header="Brand" filter={true} />
-                <Column field="color" header="Color" filter={true}  />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>Getting access to the filtered data is provided by the <i>onValueChange</i> callback.</p>
-            <CodeHighlight className="language-javascript">
-{`
-<DataTable value={this.state.cars} onValueChange={filteredData => console.log(filteredData)}>
-    <Column field="vin" header="Vin" filter={true} />
-    <Column field="year" header="Year" filter={true} />
-    <Column field="brand" header="Brand" filter={true} />
-    <Column field="color" header="Color" filter={true}  />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Selection</h3>
-            <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property for reading and updated using <i>onSelectionChange</i> callback.
-                Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition <i>onRowSelect</i>-<i>onRowUnselect</i> events are provided as optional callbacks.</p>
-
-            <p>In single mode, selection binding is an object reference.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableSelectionDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} selectionMode="single"
-                selection={this.state.selectedCar1} onSelectionChange={e => this.setState({selectedCar1: e.value})}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>In multiple mode, selection binding should be an array and multiple items can either be selected using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default.
-                On touch enabled devices metaKeySelection is turned off automatically. Additionally ShiftKey is supported for range selection.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableSelectionDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} selectionMode="multiple"
-                selection={this.state.selectedCars} onSelectionChange={e => this.setState({selectedCars: e.value})}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <p>If you prefer a radioButton or a checkbox instead of a row click, use the <i>selectionMode</i> of a column instead.
-                 Following datatable displays a checkbox at the first column of each row and automatically adds a header checkbox to toggle selection of all rows.</p>
-            <p>Tip: Use <i>showSelectionElement</i> function in case you need to hide selection element for a particular row.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} selection={this.state.selectedCars} onSelectionChange={e => this.setState({selectedCars: e.value})}>
-    <Column selectionMode="multiple" />
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Cell Editing</h3>
-            <p>Incell editing feature provides a way to quickly edit data inside the table. A cell editor is defined using the <i>editor</i> property
-            that refers to a function to return an input element for the editing.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars}>
-    <Column field="vin" header="Vin" editor={this.vinEditor} />
-    <Column field="brand" header="Brand" editor={this.brandEditor}/>
-    <Column field="saleDate" header="Sale Date" editor={this.saleDateEditor} >
-</DataTable>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-onEditorValueChange(props, value) {
-    let updatedCars = [...this.state.cars];
-    updatedCars[props.rowIndex][props.field] = value;
-    this.setState({cars: updatedCars});
-}
-
-vinEditor(props) {
-    return <InputText type="text" value={this.state.cars[props.rowIndex]['vin']} onChange={(e) => this.onEditorValueChange(props, e.target.value)} />;
-}
-
-brandEditor(props) {
-    let brands = [
-        {label: 'Audi', value: 'Audi'},
-        {label: 'BMW', value: 'BMW'},
-        {label: 'Fiat', value: 'Fiat'},
-        {label: 'Ford', value: 'Ford'},
-        {label: 'Honda', value: 'Honda'},
-        {label: 'Jaguar', value: 'Jaguar'},
-        {label: 'Mercedes', value: 'Mercedes'},
-        {label: 'Renault', value: 'Renault'},
-        {label: 'VW', value: 'VW'},
-        {label: 'Volvo', value: 'Volvo'}
-    ];
-
-    return (
-        <Dropdown value={this.state.cars[props.rowIndex].brand} options={brands}
-                onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} placeholder="Select a City"/>
-    );
-}
-
-saleDateEditor(props) {
-    return (
-        <Calendar value={this.state.cars[props.rowIndex].saleDate}
-                onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} />
-    );
-}
-
-`}
-</CodeHighlight>
-
-            <p>Clicking outside the cell or hitting enter key closes the cell, however this may not be desirable if the input is invalid. In order
-            to decide whether to keep the cell open or not, provide a <i>editorValidator</i> function that validates the value. Optionally <i>onEditorSubmit</i> and <i>onEditorCancel</i>
-            events are available at the column component to provide callbacks whenever an editor is submitted or cancelled.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars}>
-    <Column field="vin" header="Vin" editor={this.vinEditor} editorValidator={this.requiredValidator} />
-    <Column field="brand" header="Brand" editor={this.brandEditor}/>
-    <Column field="saleDate" header="Sale Date" editor={this.saleDateEditor} >
-</DataTable>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-requiredValidator(props) {
-    let value = props.rowData[props.field];
-    return value && value.length > 0;
-}
-`}
-</CodeHighlight>
-
-            <h3>Row Editing</h3>
-            <p>Row editing toggles the visibility of the all editors in the row at once and provides additional options to save and cancel editing.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} editMode="row">
-    <Column field="vin" header="Vin" />
-    <Column field="brand" header="Brand" editor={this.brandEditor} onRowEditorValidator={this.onRowEditorValidator}/>
-    <Column field="saleDate" header="Sale Date" editor={this.saleDateEditor} >
-    <Column rowEditor={true} />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-onEditorValueChange(props, value) {
-    let updatedCars = [...this.state.cars];
-    updatedCars[props.rowIndex][props.field] = value;
-    this.setState({cars: updatedCars});
-}
-
-brandEditor(props) {
-    let brands = [
-        {label: 'Audi', value: 'Audi'},
-        {label: 'BMW', value: 'BMW'},
-        {label: 'Fiat', value: 'Fiat'},
-        {label: 'Ford', value: 'Ford'},
-        {label: 'Honda', value: 'Honda'},
-        {label: 'Jaguar', value: 'Jaguar'},
-        {label: 'Mercedes', value: 'Mercedes'},
-        {label: 'Renault', value: 'Renault'},
-        {label: 'VW', value: 'VW'},
-        {label: 'Volvo', value: 'Volvo'}
-    ];
-
-    return (
-        <Dropdown value={this.state.cars[props.rowIndex].brand} options={brands}
-                onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} placeholder="Select a City"/>
-    );
-}
-
-saleDateEditor(props) {
-    return (
-        <Calendar value={this.state.cars[props.rowIndex].saleDate}
-                onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} />
-    );
-}
-
-onRowEditorValidator(rowData) {
-    let value = rowData['brand'];
-    return value.length > 0;
-}
-
-onRowEditInit(event) {
-    this.clonedCars[event.data.vin] = {...event.data};
-}
-
-onRowEditSave(event) {
-    if (this.onRowEditorValidator(event.data)) {
-        delete this.clonedCars[event.data.vin];
-        // Success message
-    }
-    else {
-        // Error message
-    }
-}
-
-onRowEditCancel(event) {
-    let cars = [...this.state.cars];
-    cars[event.index] = this.clonedCars[event.data.vin];
-    delete this.clonedCars[event.data.vin];
-    this.setState({
-        cars
-    })
-}
-
-`}
-</CodeHighlight>
-
-            <h3>ContextMenu</h3>
-            <p>DataTable provides exclusive integration with ContextMenu.  <i>contextMenuSelection</i> and <i>onContextMenuSelectionChange</i> are used to get a reference of the the selected row
-            and <i>onContextMenu</i> callback is utilized to display a particular context menu.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableContextMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            menu: [
-                {label: 'View', icon: 'pi pi-fw pi-search', command: (event) => this.viewCar(this.state.selectedCar)},
-                {label: 'Delete', icon: 'pi pi-fw pi-times', command: (event) => this.deleteCar(this.state.selectedCar)}
-            ]
-        };
-        this.carservice = new CarService();
-        this.viewCar = this.viewCar.bind(this);
-        this.deleteCar = this.deleteCar.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    viewCar(car) {
-        this.growl.show({severity: 'info', summary: 'Car Selected', detail: car.vin + ' - ' + car.brand});
-    }
-
-    deleteCar(car) {
-        let carsList = [...this.state.cars];
-        carsList = carsList.filter((c) => c.vin !== car.vin);
-
-        this.growl.show({severity: 'info', summary: 'Car Delete', detail: car.vin + ' - ' + car.brand});
-        this.setState({
-            cars: carsList
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <Growl ref={(el) => { this.growl = el; }}></Growl>
-
-                <ContextMenu model={this.state.menu} ref={el => this.cm = el} onHide={() => this.setState({selectedCar: null})}/>
-
-                <DataTable value={this.state.cars} header="Right Click"
-                    contextMenuSelection={this.state.selectedCar} onContextMenuSelectionChange={e => this.setState({selectedCar: e.value})}
-                    onContextMenu={e => this.cm.show(e.originalEvent)}>
-                    <Column field="vin" header="Vin" />
-                    <Column field="year" header="Year" />
-                    <Column field="brand" header="Brand" />
-                    <Column field="color" header="Color" />
-                </DataTable>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-
-            <h3>Expandable Rows</h3>
-            <p>Row expansion allows displaying detailed content for a particular row. To use this feature, add an <i>expander</i> column, define a <i>rowExpansionTemplate</i> as a function to return the expanded content and bind to
-                <i>expandedRows</i> property to read the expanded rows along with the <i>onRowToggle</i> property to update it. <i>expandedRows</i> property either accepts an array of row data or a map whose key is the dataKey of the record.
-                Using expandable rows with a dataKey is suggested for better performance.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableRowExpansionDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null,
-            expandedRows: null
-        };
-        this.carservice = new CarService();
-        this.rowExpansionTemplate = this.rowExpansionTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    rowExpansionTemplate(data) {
-        var src = "showcase/resources/demo/images/car/" + data.brand + ".png";
-
-        return  <div className="p-grid p-fluid">
-                    <div className="p-col-12 p-md-3" style={{textAlign:'center', borderRight: '1px solid #cccccc'}}>
-                        <img src={src} alt={data.brand}/>
-                    </div>
-                     <div className="p-col-12 p-md-9">
-                       <div className="p-grid">
-                          <div className="p-md-2">Vin: </div>
-                          <div className="p-md-10" style={{fontWeight:'bold'}}>{data.vin}</div>
-
-                          <div className="p-md-2">Year: </div>
-                          <div className="p-md-10" style={{fontWeight:'bold'}}>{data.year}</div>
-
-                          <div className="p-md-2">Brand: </div>
-                          <div className="p-md-10" style={{fontWeight:'bold'}}>{data.brand}</div>
-
-                          <div className="p-md-2">Color: </div>
-                          <div className="p-md-10" style={{fontWeight:'bold'}}>{data.color}</div>
-                       </div>
-                    </div>
-                </div>;
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}
-                    rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin">
-                <Column expander={true} style={{width: '2em'}} />
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Column Resize</h3>
-            <p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
-                In "expand" mode, table width also changes along with the column width. <i>onColumnResizeEnd</i> is a callback that passes the resized column header as a parameter.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} resizableColumns={true}>
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} resizableColumns={true}>
-    <Column field="vin" header="Vin" style={{width:'20%'}}/>
-    <Column field="year" header="Year" style={{width:'40%'}}/>
-    <Column field="brand" header="Brand" style={{width:'20%'}}/>
-    <Column field="color" header="Color" style={{width:'20%'}}/>
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Column Reorder</h3>
-            <p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>onColReorder</i> is a callback that is invoked when a column is reordered.
-            DataTable keeps the column order state internally using keys that identifies a column using the <i>field</i> property. If the column has no field, use columnKey instead.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} reorderableColumns={true}>
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Row Reorder</h3>
-            <p>Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle. <i>onRowReorder</i> is a callback that is invoked when a column is reordered, use
-                this callback to update the new order. The reorder icon can be customized using <i>rowReorderIcon</i> of the column component.</p>
-            <p>Tip: Use <i>showRowReorderElement</i> function in case you need to hide selection element for a particular row.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} reorderableColumns={true} onRowReorder={(e) => this.setState({cars: e.value})}>
-    <Column rowReorder={true} style={{width: '2em'}} />
-    <Column columnKey="vin" field="vin" header="Vin"/>
-    <Column columnKey="year" field="year" header="Year" />
-    <Column columnKey="brand" field="brand" header="Brand" />
-    <Column columnKey="color" field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Data Export</h3>
-            <p>DataTable can export its data in CSV format using exportCSV() method.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableExportDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.export = this.export.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    export() {
-        this.dt.exportCSV();
-    }
-
-    render() {
-        var header = <div style={{textAlign:'left'}}><Button type="button" icon="pi pi-external-link" iconPos="left" label="CSV" onClick={this.export}></Button></div>;
-
-        return (
-            <DataTable value={this.state.cars} header={header} ref={(el) => { this.dt = el; }}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>RowGrouping</h3>
-            <p>RowGrouping has two modes defined be the <i>rowGroupMode</i> property, in "subheader" option rows are grouped by a groupField and in "rowspan" mode grouping
-            is done based on the sort field. In both cases, data should be sorted initally using the properties such as sortField and sortOrder. In "subheader" mode,
-            <i>rowGroupHeaderTemplate</i> property should be defined to provide the content of the header and optionally <i>rowGroupFooterTemplate</i> is available to provide a footer
-            for the group.</p>
-
-            <CodeHighlight className="language-javascript">
-            {`
-export class DataTableRowGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            car: null
-        };
-
-        this.carservice = new CarService()
-        this.headerTemplate = this.headerTemplate.bind(this);
-        this.footerTemplate = this.footerTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsMedium().then(data => this.setState({cars: data}));
-    }
-
-    headerTemplate(data) {
-        return data.brand;
-    }
-
-    footerTemplate(data, index) {
-        return ([
-                    <td key={data.brand + '_footerTotalLabel'} colSpan="3" style={{textAlign: 'right'}}>Total Price</td>,
-                    <td key={data.brand + '_footerTotalValue'}>{this.calculateGroupTotal(data.brand)}</td>
-            ]
-        );
-    }
-
-    calculateGroupTotal(brand) {
-        let total = 0;
-
-        if(this.state.cars) {
-            for(let car of this.state.cars) {
-                if(car.brand === brand) {
-                    total += car.price;
-                }
-            }
-        }
-
-        return total;
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTable header="SubHeader" value={this.state.cars} rowGroupMode="subheader" sortField="brand" sortOrder={1} groupField="brand"
-                    rowGroupHeaderTemplate={this.headerTemplate} rowGroupFooterTemplate={this.footerTemplate}>
-                    <Column field="vin" header="Vin" />
-                    <Column field="year" header="Year" />
-                    <Column field="color" header="Color" />
-                    <Column field="price" header="Price" />
-                </DataTable>
-
-                <DataTable header="RowSpan" value={this.state.cars} rowGroupMode="rowspan" sortField="brand" sortOrder={1} groupField="brand"
-                    style={{marginTop:'30px'}}>
-                    <Column field="brand" header="Brand" />
-                    <Column field="year" header="Year" />
-                    <Column field="color" header="Color" />
-                    <Column field="vin" header="Vin" />
-                </DataTable>
-            </div>
-        );
-    }
-}
-
-            `}
-            </CodeHighlight>
-
-            <h3>Scrolling</h3>
-            <p>DataTable supports both horizontal and vertical scrolling as well as frozen columns and rows. Scrollable DataTable is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} scrollable={true} scrollHeight="200px">
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>Horizontal Scrolling requires a width of DataTable to be defined and explicit widths on columns.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '600px'}}>
-    <Column field="vin" header="Vin" style={{width:'250px'}} />
-    <Column field="year" header="Year" style={{width:'250px'}} />
-    <Column field="brand" header="Brand" style={{width:'250px'}} />
-    <Column field="color" header="Color" style={{width:'250px'}} />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. Widths of the frozen section is specified by the <i>frozenWidth</i> property.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '800px'}} frozenWidth="200px">
-    <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
-    <Column field="year" header="Year" style={{width:'250px'}} />
-    <Column field="brand" header="Brand" style={{width:'250px'}} />
-    <Column field="color" header="Color" style={{width:'250px'}} />
-    <Column field="owner" header="Owner" style={{width:'250px'}} />
-    <Column field="tyre" header="Tyre" style={{width:'250px'}} />
-    <Column field="capacity" header="Capacity" style={{width:'250px'}} />
-    <Column field="engine" header="Engine" style={{width:'250px'}} />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>Note that frozen columns are enabled, frozen and scrollable cells may have content with varying height which leads to misalignment. Provide fixed height to cells to avoid alignment issues.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} scrollable={true} scrollHeight="200px" style={{width: '800px'}} frozenWidth="200px">
-    <Column field="vin" header="Vin" style={{width:'250px', height: '25px'}} frozen={true} />
-    <Column field="year" header="Year" style={{width:'250px', height: '25px'}} />
-    <Column field="brand" header="Brand" style={{width:'250px', height: '25px'}} />
-    <Column field="color" header="Color" style={{width:'250px', height: '25px'}} />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>One or more rows can be displayed as fixed using the <i>frozenValue</i> property.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable header="Frozen Rows" value={this.state.cars} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px'}}>
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <p>When using frozen columns with column grouping, use <i>frozenHeaderColumnGroup</i> and <i>frozenFooterColumnGroup</i> properties along with
-            <i>headerColumnGroup</i> and <i>footerColumnGroup</i>.</p>
-
-            <p>Virtual scrolling is enabled using <i>virtualScroll</i> and <i>onVirtualScroll</i> properties combined with lazy loading so that data is loaded on the fly during scrolling.
-            For smooth scrolling twice the amount of rows property is loaded on a lazy load event. In addition, to avoid performance problems row height is not calculated automatically and
-            should be provided using <i>virtualRowHeight</i> property which defaults to 28px. View the <Link to="/datatable/scroll">scrolling demo</Link> for a sample implementation.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true}
-    rows={10} totalRecords={this.state.lazyTotalRecords} lazy={true} onVirtualScroll={this.loadCarsLazy} style={{marginTop:'30px'}}>
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Lazy Loading</h3>
-            <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates
-            lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming
-            there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
-
-            <p>In lazy mode, pagination, sorting and filtering must be used in controlled mode in addition to enabling <i>lazy</i> property. Here is a sample paging implementation with in memory data.</p>
-<CodeHighlight className="language-jsx">
-{`
-export class DataTableLazyDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            loading: true,
-            first: 0,
-            rows: 10,
-            totalRecords: 0
-        };
-        this.carservice = new CarService();
-        this.onPage = this.onPage.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => {
-            this.datasource = data;
-            this.setState({
-                totalRecords: data.length,
-                cars: this.datasource.slice(0, this.state.rows),
-                loading: false
-            });
-        });
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            const startIndex = event.first;
-            const endIndex = event.first + this.state.rows;
-
-            this.setState({
-                first: startIndex,
-                cars: this.datasource.slice(startIndex, endIndex),
-                loading: false
-            });
-        }, 250);
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} paginator={true} rows={this.state.rows} totalRecords={this.state.totalRecords}
-                lazy={true} first={this.state.first} onPage={this.onPage} loading={this.state.loading}>
-                <Column field="vin" header="Vin" />
-                <Column field="year" header="Year" />
-                <Column field="brand" header="Brand" />
-                <Column field="color" header="Color" />
-            </DataTable>
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>TableState</h3>
-            <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again,
-                table would render the data using its last settings. Enabling state is easy as defining a unique <i>stateKey</i>, the storage to keep the state is defined with the <i>stateStorage</i> property that accepts session for sessionStorage and local for localStorage.
-                Currently following features are supported by TableState; paging, sorting, filtering, column resizing, column reordering, row expansion and row selection.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-export class DataTableStateDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <DataTable value={this.state.cars} selectionMode="multiple" resizableColumns={true}
-                        selection={this.state.selectedCars} onSelectionChange={e => this.setState({selectedCars: e.value})}
-                        paginator={true} rows={10} stateKey="tablestatedemo-session">
-                <Column field="vin" header="Vin" sortable={true} filter={true}/>
-                <Column field="year" header="Year" sortable={true} filter={true}/>
-                <Column field="brand" header="Brand" sortable={true} filter={true}/>
-                <Column field="color" header="Color" sortable={true} filter={true}/>
-            </DataTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Responsive</h3>
-            <p>DataTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value. This feature is enabled by setting responsive to true.</p>
-<CodeHighlight className="language-jsx">
-{`
-<DataTable value={this.state.cars} responsive={true}>
-    <Column field="vin" header="Vin" />
-    <Column field="year" header="Year" />
-    <Column field="brand" header="Brand" />
-    <Column field="color" header="Color" />
-</DataTable>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Header content of the table.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Footer content of the table.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>tableStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the table element.</td>
-                        </tr>
-                        <tr>
-                            <td>tableClassName</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Style class of the table element.</td>
-                        </tr>
-                        <tr>
-                            <td>paginator</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified as true, enables the pagination.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorPosition</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of the paginator, options are "top","bottom" or "both".</td>
-                        </tr>
-                        <tr>
-                            <td>alwaysShowPaginator</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show it even there is only one page.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorTemplate</td>
-                            <td>string</td>
-                            <td>FirstPageLink PrevPageLink PageLinks <br /> NextPageLink LastPageLink RowsPerPageDropdown</td>
-                            <td>Template of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorLeft</td>
-                            <td>Element</td>
-                            <td>null</td>
-                            <td>Content for the left side of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>paginatorRight</td>
-                            <td>Element</td>
-                            <td>null</td>
-                            <td>Content for the right side of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>pageLinkSize</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Number of page links to display.</td>
-                        </tr>
-                        <tr>
-                            <td>rowsPerPageOptions</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array of integer values to display inside rows per page dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>currentPageReportTemplate</td>
-                            <td>string</td>
-                            <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
-                            <td>Template of the current page report element. Available placeholders are
-                                &123;currentPage&125;,&123;totalPages&125;,&123;rows&125;,&123;first&125;,&123;last&125; and &123;totalRecords&125;
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>first</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the first row to be displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of rows to display per page.</td>
-                        </tr>
-                        <tr>
-                            <td>totalRecords</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Number of total records, defaults to length of value when not defined.</td>
-                        </tr>
-                        <tr>
-                            <td>lazy</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                        </tr>
-                        <tr>
-                            <td>sortField</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the field to sort data by default.</td>
-                        </tr>
-                        <tr>
-                            <td>sortOrder</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Order to sort the data by default.</td>
-                        </tr>
-                        <tr>
-                            <td>multiSortMeta</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of SortMeta objects to sort the data by default in multiple sort mode.</td>
-                        </tr>
-                        <tr>
-                            <td>sortMode</td>
-                            <td>string</td>
-                            <td>single</td>
-                            <td>Defines whether sorting works on single column or on multiple columns.</td>
-                        </tr>
-                        <tr>
-                            <td>defaultSortOrder</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Default sort order of an unsorted column.</td>
-                        </tr>
-                        <tr>
-                            <td>removableSort</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, columns can have an un-sorted state.</td>
-                        </tr>
-                        <tr>
-                            <td>emptyMessage</td>
-                            <td>any</td>
-                            <td>No records found</td>
-                            <td>Text to display when there is no data.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Specifies the selection mode, valid values are "single" and "multiple".</td>
-                        </tr>
-                        <tr>
-                            <td>selection</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Selected row in single mode or an array of values in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>contextMenuSelection</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Selected row in single mode or an array of values in multiple mode.</td>
-                        </tr>
-                        <tr>
-                            <td>compareSelectionBy</td>
-                            <td>string</td>
-                            <td>deepEquals</td>
-                            <td>Algorithm to define if a row is selected, valid values are "equals" that compares by reference and <br/> "deepEquals" that compares all fields.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely identify a record in data.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defines whether metaKey is requred or not for the selection. <br/>
-                                When true metaKey needs to be pressed to select or unselect an item and <br/>
-                                when set to false selection of each item
-                                can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>headerColumnGroup</td>
-                            <td>ColumnGroup</td>
-                            <td>null</td>
-                            <td>ColumnGroup component for header.</td>
-                        </tr>
-                        <tr>
-                            <td>footerColumnGroup</td>
-                            <td>ColumnGroup</td>
-                            <td>null</td>
-                            <td>ColumnGroup component for footer.</td>
-                        </tr>
-                        <tr>
-                            <td>frozenHeaderColumnGroup</td>
-                            <td>ColumnGroup</td>
-                            <td>null</td>
-                            <td>ColumnGroup component for header of frozen columns.</td>
-                        </tr>
-                        <tr>
-                            <td>frozenFooterColumnGroup</td>
-                            <td>ColumnGroup</td>
-                            <td>null</td>
-                            <td>ColumnGroup component for footer of frozen columns.</td>
-                        </tr>
-                        <tr>
-                            <td>rowExpansionTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that receives the row data as the parameter and returns the expanded row content.</td>
-                        </tr>
-                        <tr>
-                            <td>expandedRows</td>
-                            <td>array/object</td>
-                            <td>null</td>
-                            <td>A collection of rows or a map object row data keys that are expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>responsive</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if the columns should be stacked in smaller screens.</td>
-                        </tr>
-                        <tr>
-                            <td>resizableColumns</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, columns can be resized using drag and drop.</td>
-                        </tr>
-                        <tr>
-                            <td>columnResizeMode</td>
-                            <td>string</td>
-                            <td>fit</td>
-                            <td>Defines whether the overall table width should change on column resize, <br/> valid values are "fit" and "expand".</td>
-                        </tr>
-                        <tr>
-                            <td>reorderableColumns</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, columns can be reordered using drag and drop.</td>
-                        </tr>
-                        <tr>
-                            <td>filters</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of FilterMetadata objects to provide external filters.</td>
-                        </tr>
-                        <tr>
-                            <td>globalFilter</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the global filter to use in filtering.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, enables horizontal and/or vertical scrolling.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Height of the scroll viewport.</td>
-                        </tr>
-                        <tr>
-                            <td>virtualScroll</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the data should be loaded on demand during scroll.</td>
-                        </tr>
-                        <tr>
-                            <td>virtualScrollDelay</td>
-                            <td>number</td>
-                            <td>250</td>
-                            <td>Delay in virtual scroll before doing a call to lazy load.</td>
-                        </tr>
-                        <tr>
-                            <td>virtualRowHeight</td>
-                            <td>number</td>
-                            <td>28</td>
-                            <td>Height of a row to use in calculations of virtual scrolling.</td>
-                        </tr>
-                        <tr>
-                            <td>frozenWidth</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Width of the frozen part in scrollable DataTable.</td>
-                        </tr>
-                        <tr>
-                            <td>frozenValue</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Items of the frozen part in scrollable DataTable.</td>
-                        </tr>
-                        <tr>
-                            <td>csvSeparator</td>
-                            <td>string</td>
-                            <td>,</td>
-                            <td>Character to use as the csv separator.</td>
-                        </tr>
-                        <tr>
-                            <td>exportFilename</td>
-                            <td>string</td>
-                            <td>download</td>
-                            <td>Name of the exported file.</td>
-                        </tr>
-                        <tr>
-                            <td>rowGroupMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the row grouping mode, valid values are "subheader" and "rowgroup".</td>
-                        </tr>
-                        <tr>
-                            <td>autoLayout</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the cell widths scale according to their content or not.</td>
-                        </tr>
-                        <tr>
-                            <td>rowClassName</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that takes the row data and <br/> returns an object in "&#123;'styleclass' : condition&#125;" format to define a classname for a particular now.</td>
-                        </tr>
-                        <tr>
-                            <td>rowGroupHeaderTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function to provide the content of row group header.</td>
-                        </tr>
-                        <tr>
-                            <td>rowGroupFooterTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function to provide the content of row group footer.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays a loader to indicate data load is in progress.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spinner</td>
-                            <td>The icon to show while indicating data load is in progress.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>stateKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of a stateful table to use in state storage.</td>
-                        </tr>
-                        <tr>
-                            <td>stateStorage</td>
-                            <td>string</td>
-                            <td>session</td>
-                            <td>Defines where a stateful table keeps its state, <br/> valid values are "session" for sessionStorage and "local" for localStorage.</td>
-                        </tr>
-                        <tr>
-                            <td>editMode</td>
-                            <td>string</td>
-                            <td>cell</td>
-                            <td>Defines editing mode, options are "cell" and "row".</td>
-                        </tr>
-                        <tr>
-                            <td>exportFunction</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>A function to implement custom export. Need to return string value. <br />
-                                event.data: Field data. <br />
-                                event.rows: Column field.</td>
-                        </tr>
-                        <tr>
-                            <td>expandableRowGroups</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Makes row groups toggleable, default is false.</td>
-                        </tr>
-                        <tr>
-                            <td>rowHover</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, background of the rows change on hover..</td>
-                        </tr>
-                        <tr>
-                            <td>showSelectionElement</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that returns a boolean by passing the row data to decide if the radio or checkbox should be displayed per row.</td>
-                        </tr>
-                        <tr>
-                            <td>showRowReorderElement</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that returns a boolean by passing the row data to decide if the row reorder element should be displayed per row.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onSelectionChange</td>
-                            <td>event.originalEvent: Browser event <br/>
-                                event.value: Selection object
-                            </td>
-                            <td>Callback to invoke when selection changes.</td>
-                        </tr>
-                        <tr>
-                            <td>onContextMenuSelectionChange</td>
-                            <td>event.originalEvent: Browser event <br/>
-                                event.value: Selection object
-                            </td>
-                            <td>Callback to invoke when a row selected with right click.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowToggle</td>
-                            <td>event.data: Expanded rows</td>
-                            <td>Callback to invoke when a row is toggled or collapsed.</td>
-                        </tr>
-                        <tr>
-                            <td>onColumnResizeEnd</td>
-                            <td>event.element: DOM element of the resized column.
-                                event.column: Properties of the resized column.<br />
-                                event.delta: Change in column width</td>
-                            <td>Callback to invoke when a column is resized.</td>
-                        </tr>
-                        <tr>
-                            <td>onSort</td>
-                            <td>event.sortField: Field to sort against. <br />
-                                event.sortOrder: Sort order as integer. <br />
-                                event.multiSortMeta: MultiSort metadata.</td>
-                            <td>Callback to invoke on sort.</td>
-                        </tr>
-                        <tr>
-                            <td>onPage</td>
-                            <td>event.first: Index of the first row. <br />
-                                event.rows: Rows per page.</td>
-                            <td>Callback to invoke on pagination.</td>
-                        </tr>
-                        <tr>
-                            <td>onFilter</td>
-                            <td>event.filters: Collection of active filters.</td>
-                            <td>Callback to invoke on filtering.</td>
-                        </tr>
-                        <tr>
-                            <td>onVirtualScroll</td>
-                            <td>event.first: Index of the first row. <br />
-                                event.rows: Rows per page.</td>
-                            <td>Callback to invoke during virtual scrolling.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowClick</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.data: Clicked row data <br />
-                                event.index: Clicked row data index</td>
-                            <td>Callback to invoke when a row is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowDoubleClick</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.data: Clicked row data <br />
-                                event.index: Clicked row data index</td>
-                            <td>Callback to invoke when a row is double clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowSelect</td>
-                            <td>event.originalEvent: Browser event. <br />
-                                event.data: Selected row data. <br />
-                                event.type: Type of the selection, valid values are "row", "radio" or "checkbox".</td>
-                            <td>Callback to invoke when a row is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowUnselect</td>
-                            <td>event.originalEvent: Browser event. <br />
-                                event.data: Unselected row data. <br />
-                                event.type: Type of the selection, valid values are "row", "radio" or "checkbox".</td>
-                            <td>Callback to invoke when a row is unselected.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowExpand</td>
-                            <td>event.originalEvent: Browser event. <br />
-                                event.data: Expanded row data.</td>
-                            <td>Callback to invoke when a row is expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowCollapse</td>
-                            <td>event.originalEvent: Browser event. <br />
-                                event.data: Collapsed row data.</td>
-                            <td>Callback to invoke when a row is collapsed.</td>
-                        </tr>
-                        <tr>
-                            <td>onContextMenu</td>
-                            <td>event.originalEvent: Original event instance. <br />
-                                event.data: Collapsed row data</td>
-                            <td>Callback to invoke when a context menu is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>onColReorder</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.dragIndex: Index of the dragged column <br />
-                                event.dropIndex: Index of the dropped column <br />
-                                event.columns: Columns array after reorder.</td>
-                            <td>Callback to invoke when a column is reordered.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowOrder</td>
-                            <td>event.originalEvent: Browser event. <br />
-                                event.value: New value after reorder <br />
-                                event.dragIndex: Index of the dragged row <br />
-                                event.dropIndex: Index of the drop location</td>
-                            <td>Callback to invoke when a row is reordered.</td>
-                        </tr>
-                        <tr>
-                            <td>onValueChange</td>
-                            <td>value: Value displayed by the table.</td>
-                            <td>Callback to invoke after filtering and sorting to pass the rendered value.</td>
-                        </tr>
-                        <tr>
-                            <td>rowEditorValidator</td>
-                            <td>data: Editing row data</td>
-                            <td>Callback to invoke to validate the editing row when the save icon is clicked on row editing mode.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowEditInit</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.data: Editing row data </td>
-                            <td>Callback to invoke when the editing icon is clicked on row editing mode.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowEditSave</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.data: Editing row data</td>
-                            <td>Callback to invoke when the save icon is clicked on row editing mode.</td>
-                        </tr>
-                        <tr>
-                            <td>onRowEditCancel</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.data: Editing row data <br />
-                                event.index: Editing row data index</td>
-                            <td>Callback to invoke when the cancel icon is clicked on row editing mode.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Methods</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>reset</td>
-                            <td>-</td>
-                            <td>Resets sort, filter, paginator and columnorder state.</td>
-                        </tr>
-                        <tr>
-                            <td>exportCSV</td>
-                            <td>-</td>
-                            <td>Exports the data to CSV format.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>value: the filter value <br />
-                                field: the filter field <br />
-                                mode: filter match mode.
-                            </td>
-                            <td>Filters the data.</td>
-                        </tr>
-                        <tr>
-                            <td>closeEditingCell</td>
-                            <td>-</td>
-                            <td>Closes the current editing cell when incell editing is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>resetColumnOrder</td>
-                            <td>-</td>
-                            <td>Resets column order when reorderableColumns is enabled.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-datatable</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datatable-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datatable-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-column-title</td>
-                            <td>Title of a column.</td>
-                        </tr>
-                        <tr>
-                            <td>p-sortable-column</td>
-                            <td>Sortable column header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-column-filter</td>
-                            <td>Filter element in header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datatable-scrollable-header</td>
-                            <td>Container of header in a scrollable table.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datatable-scrollable-body</td>
-                            <td>Container of body in a scrollable table.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datatable-scrollable-footer</td>
-                            <td>Container of footer in a scrollable table.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datatable-responsive</td>
-                            <td>Container element of a responsive datatable.</td>
-                        </tr>
-                        <tr>
-                            <td>p-datatable-emptymessage</td>
-                            <td>Cell containing the empty message.</td>
-                        </tr>
-                        <tr>
-                            <td>p-rowgroup-header</td>
-                            <td>Header of a rowgroup.</td>
-                        </tr>
-                        <tr>
-                            <td>p-rowgroup-footer</td>
-                            <td>Footer of a rowgroup.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/datatable" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-
-                <p>DataTableDemo.css</p>
-<CodeHighlight className="language-javascript">
-{`
-.datatable-doc-demo {
-    .customer-badge {
-        border-radius: 2px;
-        padding: .25em .5em;
-        text-transform: uppercase;
-        font-weight: 700;
-        font-size: 12px;
-        letter-spacing: .3px;
-
-        &.status-qualified {
-            background-color: #C8E6C9;
-            color: #256029;
-        }
-
-        &.status-unqualified {
-            background-color: #FFCDD2;
-            color: #C63737;
-        }
-
-        &.status-negotiation {
-            background-color: #FEEDAF;
-            color: #8A5340;
-        }
-
-        &.status-new {
-            background-color: #B3E5FC;
-            color: #23547B;
-        }
-
-        &.status-renewal {
-            background-color: #ECCFFF;
-            color: #694382;
-        }
-
-        &.status-proposal {
-            background-color: #FFD8B2;
-            color: #805B36;
-        }
-    }
-
-    .p-multiselect-representative-option {
-        display: inline-block;
-        vertical-align: middle;
-
-        img {
-            vertical-align: middle;
-            width: 24px;
-        }
-
-        span {
-            margin-top: .125em;
-        }
-    }
-
-    .p-paginator {
-        .p-dropdown {
-            float: left;
-        }
-
-        .p-paginator-current {
-            float: right;
-        }
-    }
-
-    .p-progressbar {
-        height: 8px;
-        background-color: #D8DADC;
-
-        .p-progressbar-value {
-            background-color: #00ACAD;
-            transition: none;
-        }
-    }
-
-    .p-column-filter {
-        display: block;
-
-        input {
-            width: 100%;
-        }
-    }
-
-    .p-datatable-globalfilter-container {
-        float: right;
-
-        input {
-            width: 200px;
-        }
-    }
-
-    .p-datepicker {
-        min-width: 25em;
-
-        td {
-            font-weight: 400;
-        }
-    }
-
-    .p-datatable.p-datatable-customers {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-
-        .p-datatable-header {
-            border: 0 none;
-            padding: 12px;
-            text-align: left;
-            font-size: 20px;
-        }
-
-        .p-paginator {
-            border: 0 none;
-            padding: 1em;
-        }
-
-        .p-datatable-thead > tr > th {
-            border: 0 none;
-            text-align: left;
-
-            &.p-filter-column {
-                border-top: 1px solid #c8c8c8;
-            }
-        }
-
-        .p-datatable-tbody > tr > td {
-            border: 0 none;
-            cursor: auto;
-        }
-
-        .p-dropdown-label:not(.p-placeholder) {
-            text-transform: uppercase;
-        }
-    }
-}
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {InputText} from '../../components/inputtext/InputText';
-import {Button} from '../../components/button/Button';
-import {CustomerService} from '../service/CustomerService';
-import {Dropdown} from '../../components/dropdown/Dropdown';
-import {Calendar} from '../../components/calendar/Calendar';
-import {MultiSelect} from '../../components/multiselect/MultiSelect';
-import {ProgressBar} from '../../components/progressbar/ProgressBar';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import classNames from 'classnames';
-import "./DataTableDemo.scss"
-
-export class DataTableDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            customers: null,
-            selectedCustomers: null,
-            globalFilter: null,
-            selectedRepresentatives: null,
-            representatives: [
-                {name: "Amy Elsner", image: 'amyelsner.png'},
-                {name: "Anna Fali", image: 'annafali.png'},
-                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
-                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
-                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
-                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
-                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
-                {name: "Onyama Limba", image: 'onyamalimba.png'},
-                {name: "Stephen Shaw", image: 'stephenshaw.png'},
-                {name: "XuXue Feng", image: 'xuxuefeng.png'}
-            ],
-            dateFilter: null,
-            selectedStatus: null,
-            statuses: [
-                'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
-            ]
-        };
-
-        this.customerService = new CustomerService();
-
-        //body cells
-        this.countryBodyTemplate = this.countryBodyTemplate.bind(this);
-        this.representativeBodyTemplate = this.representativeBodyTemplate.bind(this);
-        this.statusBodyTemplate = this.statusBodyTemplate.bind(this);
-        this.activityBodyTemplate = this.activityBodyTemplate.bind(this);
-        this.actionBodyTemplate = this.actionBodyTemplate.bind(this);
-
-        //filters
-        this.representativeItemTemplate = this.representativeItemTemplate.bind(this);
-        this.onRepresentativeFilterChange = this.onRepresentativeFilterChange.bind(this);
-        this.onDateFilterChange = this.onDateFilterChange.bind(this);
-        this.filterDate = this.filterDate.bind(this);       //custom filter function
-        this.statusItemTemplate = this.statusItemTemplate.bind(this);
-        this.onStatusFilterChange = this.onStatusFilterChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.customerService.getCustomersLarge().then(data => this.setState({customers: data}));
-    }
-
-    renderHeader() {
-        return (
-            <div>
-                List of Customers
-                <div  className="p-datatable-globalfilter-container">
-                    <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" />
-                </div>
-            </div>
-        );
-    }
-
-    activityBodyTemplate(rowData) {
-        return <ProgressBar value={rowData.activity} showValue={false} />;
-    }
-
-    actionBodyTemplate() {
-        return (
-            <Button type="button" icon="pi pi-cog" className="p-button-secondary"></Button>
-        );
-    }
-
-    statusBodyTemplate(rowData) {
-        return <span className={classNames('customer-badge', 'status-' + rowData.status)}>{rowData.status}</span>;
-    }
-
-    countryBodyTemplate(rowData) {
-        return (
-            <>
-                <img src="http://github.com/showcase/resources/demo/images/flag_placeholder.png" className={classNames('flag', 'flag-' + rowData.country.code)} />
-                <span style={{verticalAlign: 'middle', marginLeft: '.5em'}}>{rowData.country.name}</span>
-            </>
-        );
-    }
-
-    representativeBodyTemplate(rowData) {
-        const src = "showcase/resources/demo/images/avatar/" + rowData.representative.image;
-
-        return (
-            <>
-                <img alt={rowData.representative.name} src={src} width="32" style={{verticalAlign: 'middle'}} />
-                <span style={{verticalAlign: 'middle', marginLeft: '.5em'}}>{rowData.representative.name}</span>
-            </>
-        );
-    }
-
-    renderRepresentativeFilter() {
-        return (
-            <MultiSelect className="p-column-filter" value={this.state.selectedRepresentatives} options={this.state.representatives}
-                onChange={this.onRepresentativeFilterChange} itemTemplate={this.representativeItemTemplate} placeholder="All" optionLabel="name" optionValue="name" />
-        );
-    }
-
-    representativeItemTemplate(option) {
-        const src = "showcase/resources/demo/images/avatar/" + option.image;
-
-        return (
-            <div className="p-multiselect-representative-option">
-                <img alt={option.name} src={src} width="32" style={{verticalAlign: 'middle'}} />
-                <span style={{verticalAlign: 'middle', marginLeft: '.5em'}}>{option.name}</span>
-            </div>
-        );
-    }
-
-    onRepresentativeFilterChange(event) {
-        this.dt.filter(event.value, 'representative.name', 'in');
-        this.setState({selectedRepresentatives: event.value});
-    }
-
-    renderDateFilter() {
-        return (
-            <Calendar value={this.state.dateFilter} onChange={this.onDateFilterChange} placeholder="Registration Date" dateFormat="yy-mm-dd" className="p-column-filter" />
-        );
-    }
-
-    onDateFilterChange(event) {
-        if (event.value !== null)
-            this.dt.filter(this.formatDate(event.value), 'date', 'equals');
-        else
-            this.dt.filter(null, 'date', 'equals');
-
-        this.setState({dateFilter: event.value});
-    }
-
-    filterDate(value, filter) {
-        if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
-            return true;
-        }
-
-        if (value === undefined || value === null) {
-            return false;
-        }
-
-        return value === this.formatDate(filter);
-    }
-
-    formatDate(date) {
-        let month = date.getMonth() + 1;
-        let day = date.getDate();
-
-        if (month < 10) {
-            month = '0' + month;
-        }
-
-        if (day < 10) {
-            day = '0' + day;
-        }
-
-        return date.getFullYear() + '-' + month + '-' + day;
-    }
-
-    renderStatusFilter() {
-        return (
-            <Dropdown value={this.state.selectedStatus} options={this.state.statuses} onChange={this.onStatusFilterChange}
-                        itemTemplate={this.statusItemTemplate} showClear={true} placeholder="Select a Status" className="p-column-filter"/>
-        );
-    }
-
-    statusItemTemplate(option) {
-        return (
-            <span className={classNames('customer-badge', 'status-' + option)}>{option}</span>
-        );
-    }
-
-    onStatusFilterChange(event) {
-        this.dt.filter(event.value, 'status', 'equals');
-        this.setState({selectedStatus: event.value});
-    }
-
-    render() {
-        const header = this.renderHeader();
-        const representativeFilter = this.renderRepresentativeFilter();
-        const dateFilter = this.renderDateFilter();
-        const statusFilter = this.renderStatusFilter();
-
-        return (
-            <div className="datatable-doc-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable</h1>
-                        <p>DataTable displays data in tabular format.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable ref={(el) => this.dt = el} value={this.state.customers}
-                        header={header} responsive className="p-datatable-customers" dataKey="id" rowHover globalFilter={this.state.globalFilter}
-                        selection={this.state.selectedCustomers} onSelectionChange={e => this.setState({selectedCustomers: e.value})}
-                        paginator rows={10} emptyMessage="No customers found" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" rowsPerPageOptions={[10,25,50]}>
-                        <Column selectionMode="multiple" style={{width:'3em'}}/>
-                        <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" />
-                        <Column sortField="country.name" filterField="country.name" header="Country" body={this.countryBodyTemplate} sortable filter filterMatchMode="contains" filterPlaceholder="Search by country"/>
-                        <Column sortField="representative.name" filterField="representative.name" header="Representative" body={this.representativeBodyTemplate} sortable filter filterElement={representativeFilter} />
-                        <Column field="date" header="Date" sortable filter filterMatchMode="custom" filterFunction={this.filterDate} filterElement={dateFilter} />
-                        <Column field="status" header="Status" body={this.statusBodyTemplate} sortable filter filterElement={statusFilter} />
-                        <Column field="activity" header="Activity" body={this.activityBodyTemplate} sortable filter filterMatchMode="gte" filterPlaceholder="Minimum" />
-                        <Column body={this.actionBodyTemplate} headerStyle={{width: '8em', textAlign: 'center'}} bodyStyle={{textAlign: 'center', overflow: 'visible'}} />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/datatable/DataTableDemo.scss b/src/showcase/datatable/DataTableDemo.scss
deleted file mode 100644
index 7735751180..0000000000
--- a/src/showcase/datatable/DataTableDemo.scss
+++ /dev/null
@@ -1,157 +0,0 @@
-.datatable-doc-demo {
-    .customer-badge {
-        border-radius: 2px;
-        padding: .25em .5em;
-        text-transform: uppercase;
-        font-weight: 700;
-        font-size: 12px;
-        letter-spacing: .3px;
-
-        &.status-qualified {
-            background-color: #C8E6C9;
-            color: #256029;
-        }
-
-        &.status-unqualified {
-            background-color: #FFCDD2;
-            color: #C63737;
-        }
-
-        &.status-negotiation {
-            background-color: #FEEDAF;
-            color: #8A5340;
-        }
-
-        &.status-new {
-            background-color: #B3E5FC;
-            color: #23547B;
-        }
-
-        &.status-renewal {
-            background-color: #ECCFFF;
-            color: #694382;
-        }
-
-        &.status-proposal {
-            background-color: #FFD8B2;
-            color: #805B36;
-        }
-    }
-
-    .p-multiselect-representative-option {
-        display: inline-block;
-        vertical-align: middle;
-
-        img {
-            vertical-align: middle;
-            width: 24px;
-        }
-
-        span {
-            margin-top: .125em;
-        }
-    }
-
-    .p-paginator {
-        .p-dropdown {
-            float: left;
-        }
-
-        .p-paginator-current {
-            float: right;
-        }
-    }
-
-    .p-progressbar {
-        height: 8px;
-        background-color: #D8DADC;
-
-        .p-progressbar-value {
-            background-color: #00ACAD;
-            transition: none;
-        }
-    }
-
-    .p-column-filter {
-        display: block;
-
-        input {
-            width: 100%;
-        }
-    }
-
-    .p-datatable-globalfilter-container {
-        float: right;
-
-        input {
-            width: 200px;
-        }
-    }
-
-    .p-datepicker {
-        min-width: 25em;
-
-        td {
-            font-weight: 400;
-        }
-    }
-
-    .p-datatable.p-datatable-customers {
-        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
-        
-        .p-datatable-header {
-            border: 0 none;
-            padding: 12px;
-            font-size: 20px;
-
-            > div {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                flex-wrap: wrap;
-
-                .p-datatable-globalfilter-container {
-                    float: none;
-                }
-            }
-
-            @media screen and (max-width: 40em) {
-              > div {
-                justify-content: center;
-
-                .p-datatable-globalfilter-container {
-                    margin-top: .5em;
-                    width: 100%;
-
-                    .p-inputtext {
-                        width: 100%;
-                    }
-                }
-              }
-            }
-        }
-
-        .p-paginator {
-            border: 0 none;
-            padding: 1em;
-        }
-
-        .p-datatable-thead > tr > th {
-            border: 0 none;
-            text-align: left;
-
-            &.p-filter-column {
-                border-top: 1px solid #c8c8c8;
-            }
-        }
-
-        .p-datatable-tbody > tr > td {
-            border: 0 none;
-            cursor: auto;
-        }
-
-        .p-dropdown-label:not(.p-placeholder) {
-            text-transform: uppercase;
-        }
-    }
-}
diff --git a/src/showcase/datatable/DataTableDynamicDemo.js b/src/showcase/datatable/DataTableDynamicDemo.js
deleted file mode 100644
index 539e8f9cf6..0000000000
--- a/src/showcase/datatable/DataTableDynamicDemo.js
+++ /dev/null
@@ -1,135 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableDynamicDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null
-        };
-
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        const columns = [
-            {field: 'vin', header: 'Vin'},
-            {field: 'year', header: 'Year'},
-            {field: 'brand', header: 'Brand'},
-            {field: 'color', header: 'Color'}
-        ];
-
-        const dynamicColumns = columns.map((col,i) => {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Dynamic Columns</h1>
-                        <p>Columns can be defined dynamically.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars}>
-                        {dynamicColumns}
-                    </DataTable>
-                </div>
-
-                <DataTableDynamicDemoDoc></DataTableDynamicDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableDynamicDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-
-export class DataTableDynamicDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null
-        };
-
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        const columns = [
-            {field: 'vin', header: 'Vin'},
-            {field: 'year', header: 'Year'},
-            {field: 'brand', header: 'Brand'},
-            {field: 'color', header: 'Color'}
-        ];
-
-        const dynamicColumns = columns.map((col,i) => {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Dynamic Columns</h1>
-                        <p>Columns can be defined dynamically.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars}>
-                        {dynamicColumns}
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableEditDemo.js b/src/showcase/datatable/DataTableEditDemo.js
deleted file mode 100644
index 4fdf3b097c..0000000000
--- a/src/showcase/datatable/DataTableEditDemo.js
+++ /dev/null
@@ -1,352 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {InputText} from '../../components/inputtext/InputText';
-import {Dropdown} from '../../components/dropdown/Dropdown';
-import {Growl} from '../../components/growl/Growl';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableEditDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars1: null,
-            cars2: null
-        };
-        this.clonedCars = {};
-        this.carservice = new CarService();
-
-        this.vinEditor = this.vinEditor.bind(this);
-        this.yearEditor = this.yearEditor.bind(this);
-        this.brandEditor = this.brandEditor.bind(this);
-        this.colorEditor = this.colorEditor.bind(this);
-        this.requiredValidator = this.requiredValidator.bind(this);
-
-        this.editorForRowEditing = this.editorForRowEditing.bind(this);
-        this.onRowEditorValidator = this.onRowEditorValidator.bind(this);
-        this.onRowEditInit = this.onRowEditInit.bind(this);
-        this.onRowEditSave = this.onRowEditSave.bind(this);
-        this.onRowEditCancel = this.onRowEditCancel.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars1: data}));
-        this.carservice.getCarsSmall().then(data => this.setState({cars2: data}));
-    }
-
-    /* Cell Editing */
-    onEditorValueChange(props, value) {
-        let updatedCars = [...props.value];
-        updatedCars[props.rowIndex][props.field] = value;
-        this.setState({cars1: updatedCars});
-    }
-
-    inputTextEditor(props, field) {
-        return <InputText type="text" value={props.rowData[field]} onChange={(e) => this.onEditorValueChange(props, e.target.value)} />;
-    }
-
-    vinEditor(props) {
-        return this.inputTextEditor(props, 'vin');
-    }
-
-    yearEditor(props) {
-        return this.inputTextEditor(props, 'year');
-    }
-
-    brandEditor(props) {
-        let brands = [
-            {label: 'Audi', value: 'Audi'},
-            {label: 'BMW', value: 'BMW'},
-            {label: 'Fiat', value: 'Fiat'},
-            {label: 'Ford', value: 'Ford'},
-            {label: 'Honda', value: 'Honda'},
-            {label: 'Jaguar', value: 'Jaguar'},
-            {label: 'Mercedes', value: 'Mercedes'},
-            {label: 'Renault', value: 'Renault'},
-            {label: 'VW', value: 'VW'},
-            {label: 'Volvo', value: 'Volvo'}
-        ];
-
-        return (
-            <Dropdown value={props.value[props.rowIndex].brand} options={brands}
-                    onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} placeholder="Select a City"/>
-        );
-    }
-
-    colorEditor(props) {
-        return this.inputTextEditor(props, 'color');
-    }
-
-    requiredValidator(props) {
-        let value = props.rowData[props.field];
-        return value && value.length > 0;
-    }
-
-    /* Row Editing */
-    onEditorValueChangeForRowEditing(props, value) {
-        let updatedCars = [...props.value];
-        updatedCars[props.rowIndex][props.field] = value;
-        this.setState({cars2: updatedCars});
-    }
-
-    editorForRowEditing(props, field) {
-        return <InputText type="text" value={props.rowData[field]} onChange={(e) => this.onEditorValueChangeForRowEditing(props, e.target.value)} />;
-    }
-
-    onRowEditorValidator(rowData) {
-        let value = rowData['brand'];
-        return value.length > 0;
-    }
-
-    onRowEditInit(event) {
-        this.clonedCars[event.data.vin] = {...event.data};
-    }
-
-    onRowEditSave(event) {
-        if (this.onRowEditorValidator(event.data)) {
-            delete this.clonedCars[event.data.vin];
-            this.growl.show({severity: 'success', summary: 'Success', detail: 'Car is updated'});
-        }
-        else {
-            this.growl.show({severity: 'error', summary: 'Error', detail: 'Brand is required'});
-        }
-    }
-
-    onRowEditCancel(event) {
-        let cars = [...this.state.cars2];
-        cars[event.index] = this.clonedCars[event.data.vin];
-        delete this.clonedCars[event.data.vin];
-        this.setState({
-            cars2: cars
-        })
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Edit</h1>
-                        <p>Cell and Row editing provides a rapid and user friendly way to manipulate data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3>Cell Editing</h3>
-                    <DataTable value={this.state.cars1} editable={true}>
-                        <Column field="vin" header="Vin" editor={this.vinEditor} editorValidator={this.requiredValidator} style={{height: '3.5em'}}/>
-                        <Column field="year" header="Year" editor={this.yearEditor} style={{height: '3.5em'}}/>
-                        <Column field="brand" header="Brand" editor={this.brandEditor} style={{height: '3.5em'}}/>
-                        <Column field="color" header="Color" editor={this.colorEditor} style={{height: '3.5em'}}/>
-                    </DataTable>
-
-                    <h3>Row Editing</h3>
-                    <DataTable value={this.state.cars2} editMode="row" rowEditorValidator={this.onRowEditorValidator} onRowEditInit={this.onRowEditInit} onRowEditSave={this.onRowEditSave} onRowEditCancel={this.onRowEditCancel}>
-                        <Column field="vin" header="Vin" style={{height: '3.5em'}}/>
-                        <Column field="year" header="Year" editor={(props) => this.editorForRowEditing(props, 'year')} style={{height: '3.5em'}}/>
-                        <Column field="brand" header="Brand" editor={(props) => this.editorForRowEditing(props, 'brand')} style={{height: '3.5em'}}/>
-                        <Column field="color" header="Color" editor={(props) => this.editorForRowEditing(props, 'color')} style={{height: '3.5em'}}/>
-                        <Column rowEditor={true} style={{'width': '70px', 'textAlign': 'center'}}></Column>
-                    </DataTable>
-                </div>
-
-                <DataTableEditDemoDoc></DataTableEditDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableEditDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {InputText} from 'primereact/inputtext';
-import {Dropdown} from 'primereact/dropdown';
-import {Growl} from 'primereact/growl';
-import {CarService} from '../service/CarService';
-
-export class DataTableEditDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars1: null,
-            cars2: null
-        };
-        this.clonedCars = {};
-        this.carservice = new CarService();
-
-        this.vinEditor = this.vinEditor.bind(this);
-        this.yearEditor = this.yearEditor.bind(this);
-        this.brandEditor = this.brandEditor.bind(this);
-        this.colorEditor = this.colorEditor.bind(this);
-        this.requiredValidator = this.requiredValidator.bind(this);
-
-        this.editorForRowEditing = this.editorForRowEditing.bind(this);
-        this.onRowEditorValidator = this.onRowEditorValidator.bind(this);
-        this.onRowEditInit = this.onRowEditInit.bind(this);
-        this.onRowEditSave = this.onRowEditSave.bind(this);
-        this.onRowEditCancel = this.onRowEditCancel.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars1: data}));
-        this.carservice.getCarsSmall().then(data => this.setState({cars2: data}));
-    }
-
-    /* Cell Editing */
-    onEditorValueChange(props, value) {
-        let updatedCars = [...props.value];
-        updatedCars[props.rowIndex][props.field] = value;
-        this.setState({cars1: updatedCars});
-    }
-
-    inputTextEditor(props, field) {
-        return <InputText type="text" value={props.rowData[field]} onChange={(e) => this.onEditorValueChange(props, e.target.value)} />;
-    }
-
-    vinEditor(props) {
-        return this.inputTextEditor(props, 'vin');
-    }
-
-    yearEditor(props) {
-        return this.inputTextEditor(props, 'year');
-    }
-
-    brandEditor(props) {
-        let brands = [
-            {label: 'Audi', value: 'Audi'},
-            {label: 'BMW', value: 'BMW'},
-            {label: 'Fiat', value: 'Fiat'},
-            {label: 'Ford', value: 'Ford'},
-            {label: 'Honda', value: 'Honda'},
-            {label: 'Jaguar', value: 'Jaguar'},
-            {label: 'Mercedes', value: 'Mercedes'},
-            {label: 'Renault', value: 'Renault'},
-            {label: 'VW', value: 'VW'},
-            {label: 'Volvo', value: 'Volvo'}
-        ];
-
-        return (
-            <Dropdown value={props.value[props.rowIndex].brand} options={brands}
-                    onChange={(e) => this.onEditorValueChange(props, e.value)} style={{width:'100%'}} placeholder="Select a City"/>
-        );
-    }
-
-    colorEditor(props) {
-        return this.inputTextEditor(props, 'color');
-    }
-
-    requiredValidator(props) {
-        let value = props.rowData[props.field];
-        return value && value.length > 0;
-    }
-
-    /* Row Editing */
-    onEditorValueChangeForRowEditing(props, value) {
-        let updatedCars = [...props.value];
-        updatedCars[props.rowIndex][props.field] = value;
-        this.setState({cars2: updatedCars});
-    }
-
-    editorForRowEditing(props, field) {
-        return <InputText type="text" value={props.rowData[field]} onChange={(e) => this.onEditorValueChangeForRowEditing(props, e.target.value)} />;
-    }
-
-    onRowEditorValidator(rowData) {
-        let value = rowData['brand'];
-        return value.length > 0;
-    }
-
-    onRowEditInit(event) {
-        this.clonedCars[event.data.vin] = {...event.data};
-    }
-
-    onRowEditSave(event) {
-        if (this.onRowEditorValidator(event.data)) {
-            delete this.clonedCars[event.data.vin];
-            this.growl.show({severity: 'success', summary: 'Success', detail: 'Car is updated'});
-        }
-        else {
-            this.growl.show({severity: 'error', summary: 'Error', detail: 'Brand is required'});
-        }
-    }
-
-    onRowEditCancel(event) {
-        let cars = [...this.state.cars2];
-        cars[event.index] = this.clonedCars[event.data.vin];
-        delete this.clonedCars[event.data.vin];
-        this.setState({
-            cars2: cars
-        })
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Edit</h1>
-                        <p>Cell and Row editing provides a rapid and user friendly way to manipulate data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3>Cell Editing</h3>
-                    <DataTable value={this.state.cars1} editable={true}>
-                        <Column field="vin" header="Vin" editor={this.vinEditor} editorValidator={this.requiredValidator} style={{height: '3.5em'}}/>
-                        <Column field="year" header="Year" editor={this.yearEditor} style={{height: '3.5em'}}/>
-                        <Column field="brand" header="Brand" editor={this.brandEditor} style={{height: '3.5em'}}/>
-                        <Column field="color" header="Color" editor={this.colorEditor} style={{height: '3.5em'}}/>
-                    </DataTable>
-
-                    <h3>Row Editing</h3>
-                    <DataTable value={this.state.cars2} editMode="row" rowEditorValidator={this.onRowEditorValidator} onRowEditInit={this.onRowEditInit} onRowEditSave={this.onRowEditSave} onRowEditCancel={this.onRowEditCancel}>
-                        <Column field="vin" header="Vin" style={{height: '3.5em'}}/>
-                        <Column field="year" header="Year" editor={(props) => this.editorForRowEditing(props, 'year')} style={{height: '3.5em'}}/>
-                        <Column field="brand" header="Brand" editor={(props) => this.editorForRowEditing(props, 'brand')} style={{height: '3.5em'}}/>
-                        <Column field="color" header="Color" editor={(props) => this.editorForRowEditing(props, 'color')} style={{height: '3.5em'}}/>
-                        <Column rowEditor={true} style={{'width': '70px', 'textAlign': 'center'}}></Column>
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableExportDemo.js b/src/showcase/datatable/DataTableExportDemo.js
deleted file mode 100644
index 15fba90af8..0000000000
--- a/src/showcase/datatable/DataTableExportDemo.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {Button} from '../../components/button/Button';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableExportDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.export = this.export.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    export() {
-        this.dt.exportCSV();
-    }
-
-    render() {
-        let header = <div style={{textAlign:'left'}}><Button type="button" icon="pi pi-external-link" iconPos="left" label="CSV" onClick={this.export}></Button></div>;
-
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Export</h1>
-                        <p>DataTable can export its data to CSV format.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} header={header} ref={(el) => { this.dt = el; }}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableExportDemoDoc></DataTableExportDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableExportDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {Button} from 'primereact/button';
-import {CarService} from '../service/CarService';
-
-export class DataTableExportDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.export = this.export.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    export() {
-        this.dt.exportCSV();
-    }
-
-    render() {
-        var header = <div style={{textAlign:'left'}}><Button type="button" icon="pi pi-external-link" iconPos="left" label="CSV" onClick={this.export}></Button></div>;
-
-        return (
-            <div>
-                <div className="content-section">
-                    <div className="feature-intro">
-                        <h1>DataTable - Export</h1>
-                        <p>DataTable can export its data to CSV format.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} header={header} ref={(el) => { this.dt = el; }}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableFilterDemo.js b/src/showcase/datatable/DataTableFilterDemo.js
deleted file mode 100644
index f66e2942ea..0000000000
--- a/src/showcase/datatable/DataTableFilterDemo.js
+++ /dev/null
@@ -1,224 +0,0 @@
-import React, {Component} from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {InputText} from '../../components/inputtext/InputText';
-import {CarService} from '../service/CarService';
-import {Dropdown} from '../../components/dropdown/Dropdown';
-import {MultiSelect} from '../../components/multiselect/MultiSelect';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableFilterDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            selectedBrand: null,
-            selectedColors: null,
-            brands: [
-                {label: 'Audi', value: 'Audi'},
-                {label: 'BMW', value: 'BMW'},
-                {label: 'Fiat', value: 'Fiat'},
-                {label: 'Honda', value: 'Honda'},
-                {label: 'Jaguar', value: 'Jaguar'},
-                {label: 'Mercedes', value: 'Mercedes'},
-                {label: 'Renault', value: 'Renault'},
-                {label: 'VW', value: 'VW'},
-                {label: 'Volvo', value: 'Volvo'}
-            ],
-            colors: [
-                {label: 'White', value: 'White'},
-                {label: 'Green', value: 'Green'},
-                {label: 'Silver', value: 'Silver'},
-                {label: 'Black', value: 'Black'},
-                {label: 'Red', value: 'Red'},
-                {label: 'Maroon', value: 'Maroon'},
-                {label: 'Brown', value: 'Brown'},
-                {label: 'Orange', value: 'Orange'},
-                {label: 'Blue', value: 'Blue'}
-            ]
-        };
-        this.carservice = new CarService();
-        this.onBrandChange = this.onBrandChange.bind(this);
-        this.onColorChange = this.onColorChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    onBrandChange(event) {
-        this.dt.filter(event.value, 'brand', 'equals');
-        this.setState({selectedBrand: event.value});
-    }
-
-    onColorChange(event) {
-        this.dt.filter(event.value, 'color', 'in');
-        this.setState({selectedColors: event.value});
-    }
-
-    render() {
-        const header = (
-            <div style={{'textAlign':'left'}}>
-                <i className="pi pi-search" style={{margin:'4px 4px 0 0'}}></i>
-                <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/>
-            </div>
-        );
-
-        const brandFilter = <Dropdown style={{width: '100%'}} placeholder="Select a Brand" value={this.state.selectedBrand} options={this.state.brands} onChange={this.onBrandChange} showClear />;
-        const colorFilter = <MultiSelect style={{width:'100%'}} placeholder="Select Colors" value={this.state.selectedColors} options={this.state.colors} onChange={this.onColorChange} />;
-
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Filter</h1>
-                        <p>Filtering is enabled by setting the filter property as true in column object. Default match mode is "startsWith" and this can be configured using filterMatchMode
-                            property of column object that also accepts "contains", "endsWith", "equals", "in" and "custom". An optional global filter feature is available to search all fields with a keyword.
-                            By default input fields are generated as filter elements and using templating any component can be used as a filter.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable ref={(el) => this.dt = el} value={this.state.cars} paginator={true} rows={10} header={header}
-                        globalFilter={this.state.globalFilter} emptyMessage="No records found">
-                        <Column field="vin" header="Vin" filter={true} filterPlaceholder="Vin starts with"/>
-                        <Column field="year" header="Year" filter={true} filterPlaceholder="Year contains" filterMatchMode="contains" />
-                        <Column field="brand" header="Brand" filter={true} filterElement={brandFilter} />
-                        <Column field="color" header="Color" filter={true} filterElement={colorFilter} />
-                    </DataTable>
-                </div>
-
-                <DataTableFilterDemoDoc></DataTableFilterDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableFilterDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {InputText} from 'primereact/inputtext';
-import {CarService} from '../service/CarService';
-import {Dropdown} from 'primereact/dropdown';
-import {MultiSelect} from 'primereact/multiselect';
-
-export class DataTableFilterDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            selectedBrand: null,
-            selectedColors: null,
-            brands: [
-                {label: 'Audi', value: 'Audi'},
-                {label: 'BMW', value: 'BMW'},
-                {label: 'Fiat', value: 'Fiat'},
-                {label: 'Honda', value: 'Honda'},
-                {label: 'Jaguar', value: 'Jaguar'},
-                {label: 'Mercedes', value: 'Mercedes'},
-                {label: 'Renault', value: 'Renault'},
-                {label: 'VW', value: 'VW'},
-                {label: 'Volvo', value: 'Volvo'}
-            ],
-            colors: [
-                {label: 'White', value: 'White'},
-                {label: 'Green', value: 'Green'},
-                {label: 'Silver', value: 'Silver'},
-                {label: 'Black', value: 'Black'},
-                {label: 'Red', value: 'Red'},
-                {label: 'Maroon', value: 'Maroon'},
-                {label: 'Brown', value: 'Brown'},
-                {label: 'Orange', value: 'Orange'},
-                {label: 'Blue', value: 'Blue'}
-            ]
-        };
-        this.carservice = new CarService();
-        this.onBrandChange = this.onBrandChange.bind(this);
-        this.onColorChange = this.onColorChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    onBrandChange(event) {
-        this.dt.filter(event.value, 'brand', 'equals');
-        this.setState({selectedBrand: event.value});
-    }
-
-    onColorChange(event) {
-        this.dt.filter(event.value, 'color', 'in');
-        this.setState({selectedColors: event.value});
-    }
-
-    render() {
-        const header = (
-            <div style={{'textAlign':'left'}}>
-                <i className="pi pi-search" style={{margin:'4px 4px 0 0'}}></i>
-                <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/>
-            </div>
-        );
-
-        const brandFilter = <Dropdown style={{width: '100%'}} placeholder="Select a Brand" value={this.state.selectedBrand} options={this.state.brands} onChange={this.onBrandChange} showClear />;
-        const colorFilter = <MultiSelect style={{width:'100%'}} placeholder="Select Colors" value={this.state.selectedColors} options={this.state.colors} onChange={this.onColorChange} />;
-
-        return (
-            <div>
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Filter</h1>
-                        <p>Filtering is enabled by setting the filter property as true in column object. Default match mode is "startsWith" and this can be configured using filterMatchMode
-                            property of column object that also accepts "contains", "endsWith", "equals", "in" and "custom". An optional global filter feature is available to search all fields with a keyword.
-                            By default input fields are generated as filter elements and using templating any component can be used as a filter.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable ref={(el) => this.dt = el} value={this.state.cars} paginator={true} rows={10} header={header}
-                        globalFilter={this.state.globalFilter} emptyMessage="No records found">
-                        <Column field="vin" header="Vin" filter={true} filterPlaceholder="Vin starts with"/>
-                        <Column field="year" header="Year" filter={true} filterPlaceholder="Year contains" filterMatchMode="contains" />
-                        <Column field="brand" header="Brand" filter={true} filterElement={brandFilter} />
-                        <Column field="color" header="Color" filter={true} filterElement={colorFilter} />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableLazyDemo.js b/src/showcase/datatable/DataTableLazyDemo.js
deleted file mode 100644
index 6631f62b2c..0000000000
--- a/src/showcase/datatable/DataTableLazyDemo.js
+++ /dev/null
@@ -1,191 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableLazyDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            loading: true,
-            first: 0,
-            rows: 10,
-            totalRecords: 0
-        };
-        this.carservice = new CarService();
-        this.onPage = this.onPage.bind(this);
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.carservice.getCarsLarge().then(data => {
-                this.datasource = data;
-                this.setState({
-                    totalRecords: data.length,
-                    cars: this.datasource.slice(0, this.state.rows),
-                    loading: false
-                });
-            });
-        }, 1000);
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            const startIndex = event.first;
-            const endIndex = event.first + this.state.rows;
-
-            this.setState({
-                first: startIndex,
-                cars: this.datasource.slice(startIndex, endIndex),
-                loading: false
-            });
-        }, 1000);
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Lazy</h1>
-                        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates
-                            lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming
-                            there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} rows={this.state.rows} totalRecords={this.state.totalRecords}
-                        lazy={true} first={this.state.first} onPage={this.onPage} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableLazyDemoDoc></DataTableLazyDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableLazyDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableLazyDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            loading: true,
-            first: 0,
-            rows: 10,
-            totalRecords: 0
-        };
-        this.carservice = new CarService();
-        this.onPage = this.onPage.bind(this);
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.carservice.getCarsLarge().then(data => {
-                this.datasource = data;
-                this.setState({
-                    totalRecords: data.length,
-                    cars: this.datasource.slice(0, this.state.rows),
-                    loading: false
-                });
-            });
-        }, 1000);
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            const startIndex = event.first;
-            const endIndex = event.first + this.state.rows;
-
-            this.setState({
-                first: startIndex,
-                cars: this.datasource.slice(startIndex, endIndex),
-                loading: false
-            });
-        }, 250);
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Lazy</h1>
-                        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates
-                            lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming
-                            there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} rows={this.state.rows} totalRecords={this.state.totalRecords}
-                        lazy={true} first={this.state.first} onPage={this.onPage} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTablePaginatorDemo.js b/src/showcase/datatable/DataTablePaginatorDemo.js
deleted file mode 100644
index 5ec2d10077..0000000000
--- a/src/showcase/datatable/DataTablePaginatorDemo.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Button} from "../../components/button/Button";
-
-export class DataTablePaginatorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        const paginatorLeft = <Button icon="pi pi-refresh"/>;
-
-        return (
-            <div className="datatable-paginator-demo">
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Paginator</h1>
-                        <p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} paginatorLeft={paginatorLeft}  
-                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" rows={10} rowsPerPageOptions={[5,10,20]} >
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTablePaginatorDemoDoc></DataTablePaginatorDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTablePaginatorDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTablePaginatorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        const paginatorLeft = <Button icon="pi pi-refresh"/>;
-
-        return (
-            <div className="datatable-paginator-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Paginator</h1>
-                        <p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number of page links to display.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} paginator={true} paginatorLeft={paginatorLeft}  
-                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
-                        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" rows={10} rowsPerPageOptions={[5,10,20]} >
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableReorderDemo.js b/src/showcase/datatable/DataTableReorderDemo.js
deleted file mode 100644
index 8b3768dc0d..0000000000
--- a/src/showcase/datatable/DataTableReorderDemo.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableReorderDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Reorder</h1>
-                        <p>Order of the columns and rows can be changed using drag and drop.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} reorderableColumns={true} onRowReorder={(e) => this.setState({cars: e.value})}>
-                        <Column rowReorder={true} style={{width: '3em'}} />
-                        <Column columnKey="vin" field="vin" header="Vin"/>
-                        <Column columnKey="year" field="year" header="Year" />
-                        <Column columnKey="brand" field="brand" header="Brand" />
-                        <Column columnKey="color" field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableColReorderDemoDoc />
-            </div>
-        );
-    }
-}
-
-export class DataTableColReorderDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableColReorderDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Column Reorder</h1>
-                        <p>Columns can be reordered using drag drop by setting the reorderableColumns to true. onColReorder is a callback that is invoked when a column is reordered.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} reorderableColumns={true}
-                        reorderableRows={true} onRowReorder={(e) => this.setState({cars: e.value})}>
-                        <Column rowReorder={true} style={{width: '3em'}} />
-                        <Column columnKey="vin" field="vin" header="Vin"/>
-                        <Column columnKey="year" field="year" header="Year" />
-                        <Column columnKey="brand" field="brand" header="Brand" />
-                        <Column columnKey="color" field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableResponsiveDemo.js b/src/showcase/datatable/DataTableResponsiveDemo.js
deleted file mode 100644
index 9186418925..0000000000
--- a/src/showcase/datatable/DataTableResponsiveDemo.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableResponsiveDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Responsive</h1>
-                        <p>DataTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} responsive={true} header="Responsive">
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableResponsiveDemoDoc></DataTableResponsiveDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableResponsiveDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableResponsiveDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Responsive</h1>
-                        <p>DataTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} responsive={true} header="Responsive">
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableRowExpansionDemo.js b/src/showcase/datatable/DataTableRowExpansionDemo.js
deleted file mode 100644
index d6168d75b8..0000000000
--- a/src/showcase/datatable/DataTableRowExpansionDemo.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableRowExpansionDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            expandedRows: null
-        };
-        this.carservice = new CarService();
-        this.rowExpansionTemplate = this.rowExpansionTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    rowExpansionTemplate(data) {
-        const src = "showcase/resources/demo/images/car/" + data.brand + ".png";
-
-        return  (
-            <div className="p-grid p-fluid" style={{padding: '2em 1em 1em 1em'}}>
-                <div className="p-col-12 p-md-3" style={{textAlign:'center'}}>
-                    <img src={src} alt={data.brand}/>
-                </div>
-                    <div className="p-col-12 p-md-9">
-                    <div className="p-grid">
-                        <div className="p-md-2">Vin: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.vin}</div>
-
-                        <div className="p-md-2">Year: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.year}</div>
-
-                        <div className="p-md-2">Brand: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.brand}</div>
-
-                        <div className="p-md-2">Color: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.color}</div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Row Expansion</h1>
-                        <p>A row can be expanded to display extra content by enabling expandableRows property and providing a row ng-template.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}
-                            rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin">
-                        <Column expander={true} style={{width: '3em'}} />
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableRowExpansionDemoDoc></DataTableRowExpansionDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableRowExpansionDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableRowExpansionDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            expandedRows: null
-        };
-        this.carservice = new CarService();
-        this.rowExpansionTemplate = this.rowExpansionTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    rowExpansionTemplate(data) {
-        const src = "showcase/resources/demo/images/car/" + data.brand + ".png";
-
-        return  (
-            <div className="p-grid p-fluid" style={{padding: '2em 1em 1em 1em'}}>
-                <div className="p-col-12 p-md-3" style={{textAlign:'center'}}>
-                    <img src={src} alt={data.brand}/>
-                </div>
-                    <div className="p-col-12 p-md-9">
-                    <div className="p-grid">
-                        <div className="p-md-2">Vin: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.vin}</div>
-
-                        <div className="p-md-2">Year: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.year}</div>
-
-                        <div className="p-md-2">Brand: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.brand}</div>
-
-                        <div className="p-md-2">Color: </div>
-                        <div className="p-md-10" style={{fontWeight:'bold'}}>{data.color}</div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Row Expansion</h1>
-                        <p>A row can be expanded to display extra content by enabling expandableRows property and providing a row ng-template.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}
-                            rowExpansionTemplate={this.rowExpansionTemplate} dataKey="vin">
-                        <Column expander={true} style={{width: '2em'}} />
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableRowGroupDemo.js b/src/showcase/datatable/DataTableRowGroupDemo.js
deleted file mode 100644
index 7e094aa4d3..0000000000
--- a/src/showcase/datatable/DataTableRowGroupDemo.js
+++ /dev/null
@@ -1,217 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableRowGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            car: null,
-            expandedRows: null
-        };
-
-        this.carservice = new CarService();
-        this.headerTemplate = this.headerTemplate.bind(this);
-        this.footerTemplate = this.footerTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsMedium().then(data => this.setState({cars: data}));
-    }
-
-    headerTemplate(data) {
-        return data.brand;
-    }
-
-    footerTemplate(data, index) {
-        return (
-            <React.Fragment>
-                <td key={data.brand + '_footerTotalLabel'} colSpan="3" style={{textAlign: 'right'}}>Total Price</td>
-                <td key={data.brand + '_footerTotalValue'}>{this.calculateGroupTotal(data.brand)}</td>
-            </React.Fragment>
-        );
-    }
-
-    calculateGroupTotal(brand) {
-        let total = 0;
-
-        if(this.state.cars) {
-            for(let car of this.state.cars) {
-                if(car.brand === brand) {
-                    total += car.price;
-                }
-            }
-        }
-
-        return total;
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Row Grouping</h1>
-                        <p>Rows can either be grouped by a separate grouping row or using rowspan.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable header="Toggleable Row Groups" value={this.state.cars} rowGroupMode="subheader" sortField="brand" sortOrder={1} groupField="brand"
-                        rowGroupHeaderTemplate={this.headerTemplate} rowGroupFooterTemplate={this.footerTemplate}
-                        expandableRowGroups={true} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="color" header="Color" />
-                        <Column field="price" header="Price" />
-                    </DataTable>
-
-                    <DataTable header="SubHeader" value={this.state.cars} rowGroupMode="subheader" sortField="brand" sortOrder={1} groupField="brand"
-                        rowGroupHeaderTemplate={this.headerTemplate} rowGroupFooterTemplate={this.footerTemplate} style={{marginTop:'30px'}}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="color" header="Color" />
-                        <Column field="price" header="Price" />
-                    </DataTable>
-
-                    <DataTable header="RowSpan" value={this.state.cars} rowGroupMode="rowspan" sortField="brand" sortOrder={1} groupField="brand"
-                        style={{marginTop:'30px'}}>
-                        <Column field="brand" header="Brand" />
-                        <Column field="year" header="Year" />
-                        <Column field="color" header="Color" />
-                        <Column field="vin" header="Vin" />
-                    </DataTable>
-                </div>
-
-                <DataTableColGroupDemoDoc></DataTableColGroupDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableColGroupDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'components/components/datatable/DataTable';
-import {Column} from 'components/components/column/Column';
-import {CarService} from '../service/CarService';
-
-export class DataTableRowGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            car: null,
-            expandedRows: null
-        };
-
-        this.carservice = new CarService()
-        this.headerTemplate = this.headerTemplate.bind(this);
-        this.footerTemplate = this.footerTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsMedium().then(data => this.setState({cars: data}));
-    }
-
-    headerTemplate(data) {
-        return data.brand;
-    }
-
-    footerTemplate(data, index) {
-        return (
-            <React.Fragment>
-                <td key={data.brand + '_footerTotalLabel'} colSpan="3" style={{textAlign: 'right'}}>Total Price</td>
-                <td key={data.brand + '_footerTotalValue'}>{this.calculateGroupTotal(data.brand)}</td>
-            </React.Fragment>
-        );
-    }
-
-    calculateGroupTotal(brand) {
-        let total = 0;
-
-        if(this.state.cars) {
-            for(let car of this.state.cars) {
-                if(car.brand === brand) {
-                    total += car.price;
-                }
-            }
-        }
-
-        return total;
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Row Grouping</h1>
-                        <p>Rows can either be grouped by a separate grouping row or using rowspan. Additional optional features are toggleable groups and footer rows.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable header="Toggleable Row Groups" value={this.state.cars} rowGroupMode="subheader" sortField="brand" sortOrder={1} groupField="brand"
-                        rowGroupHeaderTemplate={this.headerTemplate} rowGroupFooterTemplate={this.footerTemplate}
-                        expandableRowGroups={true} expandedRows={this.state.expandedRows} onRowToggle={(e) => this.setState({expandedRows:e.data})}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="color" header="Color" />
-                        <Column field="price" header="Price" />
-                    </DataTable>
-
-                    <DataTable header="SubHeader" value={this.state.cars} rowGroupMode="subheader" sortField="brand" sortOrder={1} groupField="brand"
-                        rowGroupHeaderTemplate={this.headerTemplate} rowGroupFooterTemplate={this.footerTemplate} style={{marginTop:'30px'}}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="color" header="Color" />
-                        <Column field="price" header="Price" />
-                    </DataTable>
-
-                    <DataTable header="RowSpan" value={this.state.cars} rowGroupMode="rowspan" sortField="brand" sortOrder={1} groupField="brand"
-                        style={{marginTop:'30px'}}>
-                        <Column field="brand" header="Brand" />
-                        <Column field="year" header="Year" />
-                        <Column field="color" header="Color" />
-                        <Column field="vin" header="Vin" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableScrollDemo.js b/src/showcase/datatable/DataTableScrollDemo.js
deleted file mode 100644
index ebb9c49349..0000000000
--- a/src/showcase/datatable/DataTableScrollDemo.js
+++ /dev/null
@@ -1,393 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableScrollDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            loading: true,
-            cars: null,
-            lazyCars: null,
-            lazyTotalRecords: 0,
-            frozenCars: null
-        };
-
-        this.carservice = new CarService();
-        this.onVirtualScroll = this.onVirtualScroll.bind(this);
-    }
-
-    componentDidMount() {
-        this.inmemoryData = [
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"},
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"},
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"},
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"}
-        ];
-
-        this.carservice.getCarsLarge().then(data => {
-            this.setState({
-                cars: data,
-                lazyCars: this.loadChunk(0, 40),
-                lazyTotalRecords: 250000,
-                frozenCars: [
-                    {"brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23"},
-                    {"brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23"}
-                ],
-                loading: false
-            });
-        });
-    }
-
-    loadChunk(index, length) {
-        let chunk = [];
-        for (let i = 0; i < length; i++) {
-            chunk[i] = {...this.inmemoryData[i], ...{vin: (index + i)}};
-        }
-
-        return chunk;
-    }
-
-    onVirtualScroll(event) {
-        //for demo purposes keep loading the same dataset
-        //in a real production application, this data should come from server by building the query with LazyLoadEvent options
-        setTimeout(() => {
-            //last chunk
-            if (event.first === 249980) {
-                this.setState({
-                    lazyCars: this.loadChunk(event.first, 20)
-                });
-            }
-            else {
-                this.setState({
-                    lazyCars: this.loadChunk(event.first, event.rows)
-                });
-            }
-        }, 250);
-    }
-
-    loadingText() {
-        return <span className="loading-text"></span>;
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Scroll</h1>
-                        <p>Data scrolling with fixed header is available horizontally, vertically or both. ScrollHeight and ScrollWidth values can either be fixed pixels or percentages. Certain columns can be fixed as well.
-                            Virtual Scrolling mode is available to deal with large datasets by loading data on demand during scrolling.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                   <DataTable header="Vertical" value={this.state.cars} scrollable={true} scrollHeight="200px" loading={this.state.loading}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} virtualRowHeight={30}
-                        rows={20} totalRecords={this.state.lazyTotalRecords} lazy={true} onVirtualScroll={this.onVirtualScroll} style={{marginTop:'30px'}} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" loadingBody={this.loadingText} />
-                        <Column field="year" header="Year" loadingBody={this.loadingText} />
-                        <Column field="brand" header="Brand" loadingBody={this.loadingText} />
-                        <Column field="color" header="Color" loadingBody={this.loadingText} />
-                    </DataTable>
-
-                    <DataTable header="Horizontal and Vertical" value={this.state.cars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '600px'}} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" style={{width:'250px'}} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                    </DataTable>
-
-                    <DataTable header="Frozen Rows" value={this.state.cars} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px'}} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <DataTable header="Frozen Columns" value={this.state.cars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} frozenWidth="200px" unfrozenWidth="600px" loading={this.state.loading}>
-                        <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                        <Column field="vin" header="Vin" style={{width:'250px'}} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                    </DataTable>
-
-                    <DataTable header="Frozen Rows and Columns" value={this.state.cars} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} 
-                        frozenWidth="200px" unfrozenWidth="600px" loading={this.state.loading}>
-                        <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                        <Column field="vin" header="Vin" style={{width:'250px'}} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                    </DataTable>
-                </div>
-
-                <DataTableScrollDemoDoc></DataTableScrollDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableScrollDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableScrollDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            loading: true,
-            cars: null,
-            lazyCars: null,
-            lazyTotalRecords: 0,
-            frozenCars: null
-        };
-
-        this.carservice = new CarService();
-        this.onVirtualScroll = this.onVirtualScroll.bind(this);
-    }
-
-    componentDidMount() {
-        this.inmemoryData = [
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"},
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"},
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"},
-            {"brand": "VW", "year": 2012, "color": "Orange"},
-            {"brand": "Audi", "year": 2011, "color": "Black"},
-            {"brand": "Renault", "year": 2005, "color": "Gray"},
-            {"brand": "BMW", "year": 2003, "color": "Blue"},
-            {"brand": "Mercedes", "year": 1995, "color": "Orange"},
-            {"brand": "Volvo", "year": 2005, "color": "Black"},
-            {"brand": "Honda", "year": 2012, "color": "Yellow"},
-            {"brand": "Jaguar", "year": 2013, "color": "Orange"},
-            {"brand": "Ford", "year": 2000, "color": "Black"},
-            {"brand": "Fiat", "year": 2013, "color": "Red"}
-        ];
-
-        this.carservice.getCarsLarge().then(data => {
-            this.setState({
-                cars: data,
-                lazyCars: this.loadChunk(0, 40),
-                lazyTotalRecords: 250000,
-                frozenCars: [
-                    {"brand": "BMW", "year": 2013, "color": "Grey", "vin": "fh2uf23"},
-                    {"brand": "Chevrolet", "year": 2011, "color": "Black", "vin": "4525g23"}
-                ],
-                loading: true
-            });
-        });
-    }
-
-    loadChunk(index, length) {
-        let chunk = [];
-        for (let i = 0; i < length; i++) {
-            chunk[i] = {...this.inmemoryData[i], ...{vin: (index + i)}};
-        }
-
-        return chunk;
-    }
-
-    onVirtualScroll(event) {
-        //for demo purposes keep loading the same dataset
-        //in a real production application, this data should come from server by building the query with LazyLoadEvent options
-        setTimeout(() => {
-            //last chunk
-            if (event.first === 249980) {
-                this.setState({
-                    lazyCars: this.loadChunk(event.first, 20)
-                });
-            }
-            else {
-                this.setState({
-                    lazyCars: this.loadChunk(event.first, event.rows)
-                });
-            }
-        }, 250);
-    }
-
-    loadingText() {
-        return <span className="loading-text"></span>;
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Scroll</h1>
-                        <p>Data scrolling with fixed header is available horizontally, vertically or both. ScrollHeight and ScrollWidth values can either be fixed pixels or percentages. Certain columns can be fixed as well.
-                            Virtual Scrolling mode is available to deal with large datasets by loading data on demand during scrolling.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                   <DataTable header="Vertical" value={this.state.cars} scrollable={true} scrollHeight="200px" loading={this.state.loading}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <DataTable header="VirtualScroll with Lazy Loading" value={this.state.lazyCars} scrollable={true} scrollHeight="200px" virtualScroll={true} virtualRowHeight={30}
-                        rows={20} totalRecords={this.state.lazyTotalRecords} lazy={true} onVirtualScroll={this.onVirtualScroll} style={{marginTop:'30px'}} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" loadingBody={this.loadingText} />
-                        <Column field="year" header="Year" loadingBody={this.loadingText} />
-                        <Column field="brand" header="Brand" loadingBody={this.loadingText} />
-                        <Column field="color" header="Color" loadingBody={this.loadingText} />
-                    </DataTable>
-
-                    <DataTable header="Horizontal and Vertical" value={this.state.cars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '600px'}} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" style={{width:'250px'}} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                    </DataTable>
-
-                    <DataTable header="Frozen Rows" value={this.state.cars} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px'}} loading={this.state.loading}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <DataTable header="Frozen Columns" value={this.state.cars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} frozenWidth="200px" unfrozenWidth="600px" loading={this.state.loading}>
-                        <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                        <Column field="vin" header="Vin" style={{width:'250px'}} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                    </DataTable>
-
-                    <DataTable header="Frozen Rows and Columns" value={this.state.cars} frozenValue={this.state.frozenCars} scrollable={true} scrollHeight="200px" style={{marginTop:'30px', width: '800px'}} 
-                        frozenWidth="200px" unfrozenWidth="600px" loading={this.state.loading}>
-                        <Column field="vin" header="Vin" style={{width:'250px'}} frozen={true} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                        <Column field="vin" header="Vin" style={{width:'250px'}} />
-                        <Column field="year" header="Year" style={{width:'250px'}} />
-                        <Column field="brand" header="Brand" style={{width:'250px'}} />
-                        <Column field="color" header="Color" style={{width:'250px'}} />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableSelectionDemo.js b/src/showcase/datatable/DataTableSelectionDemo.js
deleted file mode 100644
index 8353c1a3cd..0000000000
--- a/src/showcase/datatable/DataTableSelectionDemo.js
+++ /dev/null
@@ -1,230 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableSelectionDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    displaySelection(data) {
-        if(!data || data.length === 0) {
-            return <div style={{textAlign: 'left'}}>No Selection</div>;
-        }
-        else {
-            if(data instanceof Array)
-                return <ul style={{textAlign: 'left', margin: 0}}>{data.map((car,i) => <li key={car.vin}>{car.vin + ' - ' + car.year + ' - ' + car.brand + ' - ' + car.color}</li>)}</ul>;
-            else
-                return <div style={{textAlign: 'left'}}>Selected Car: {data.vin + ' - ' + data.year + ' - ' + data.brand + ' - ' + data.color}</div>
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Selection</h1>
-                        <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the selection property and onRowSelect-onRowUnselect
-                            events are provided as optional callbacks. In addition built-in radio button and checkbox based selections are available as alternatives.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single</h3>
-                    <p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
-                    <DataTable value={this.state.cars} selectionMode="single" header="Single Selection" footer={this.displaySelection(this.state.selectedCar1)}
-                        selection={this.state.selectedCar1} onSelectionChange={e => this.setState({selectedCar1: e.value})}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <h3>Multiple</h3>
-                    <p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
-                        Setting metaKeySelection property as false enables multiple selection without meta key.
-                    </p>
-                    <DataTable value={this.state.cars} selectionMode="multiple" header="Multiple Selection with MetaKey" footer={this.displaySelection(this.state.selectedCars1)}
-                        selection={this.state.selectedCars1} onSelectionChange={e => this.setState({selectedCars1: e.value})}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <DataTable value={this.state.cars} selectionMode="multiple" header="Multiple Selection without MetaKey" footer={this.displaySelection(this.state.selectedCars2)}
-                        selection={this.state.selectedCars2} onSelectionChange={e => this.setState({selectedCars2: e.value})} style={{marginTop: '2em'}} metaKeySelection={false}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <h3>RadioButton</h3>
-                    <p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
-                    <DataTable value={this.state.cars} header="Single Selection" footer={this.displaySelection(this.state.selectedCar2)}
-                        selection={this.state.selectedCar2} onSelectionChange={e => this.setState({selectedCar2: e.value})}>
-                        <Column selectionMode="single" style={{width:'3em'}}/>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <h3>Checkbox</h3>
-                    <p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p>
-                    <DataTable value={this.state.cars} header="Single Selection" footer={this.displaySelection(this.state.selectedCars3)}
-                        selection={this.state.selectedCars3} onSelectionChange={e => this.setState({selectedCars3: e.value})}>
-                        <Column selectionMode="multiple" style={{width:'3em'}}/>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableSelectionDemoDoc></DataTableSelectionDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableSelectionDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableSelectionDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    displaySelection(data) {
-        if(!data || data.length === 0) {
-            return <div style={{textAlign: 'left'}}>No Selection</div>;
-        }
-        else {
-            if(data instanceof Array)
-                return <ul style={{textAlign: 'left', margin: 0}}>{data.map((car,i) => <li key={car.vin}>{car.vin + ' - ' + car.year + ' - ' + car.brand + ' - ' + car.color}</li>)}</ul>;
-            else
-                return <div style={{textAlign: 'left'}}>Selected Car: {data.vin + ' - ' + data.year + ' - ' + data.brand + ' - ' + data.color}</div>
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable</h1>
-                        <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the selection property and onRowSelect-onRowUnselect
-                            events are provided as optional callbacks. In addition built-in radio button and checkbox based selections are available as alternatives.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single</h3>
-                    <p>In single mode, a row is selected on click event of a row. If the row is already selected then the row gets unselected.</p>
-                    <DataTable value={this.state.cars} selectionMode="single" header="Single Selection" footer={this.displaySelection(this.state.selectedCar1)}
-                        selection={this.state.selectedCar1} onSelectionChange={e => this.setState({selectedCar1: e.value})}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <h3>Multiple</h3>
-                    <p>In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required.
-                        Setting metaKeySelection property as false enables multiple selection without meta key.
-                    </p>
-                    <DataTable value={this.state.cars} selectionMode="multiple" header="Multiple Selection with MetaKey" footer={this.displaySelection(this.state.selectedCars1)}
-                        selection={this.state.selectedCars1} onSelectionChange={e => this.setState({selectedCars1: e.value})}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <DataTable value={this.state.cars} selectionMode="multiple" header="Multiple Selection without MetaKey" footer={this.displaySelection(this.state.selectedCars2)}
-                        selection={this.state.selectedCars2} onSelectionChange={e => this.setState({selectedCars2: e.value})} style={{marginTop: '2em'}} metaKeySelection={false}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <h3>RadioButton</h3>
-                    <p>Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".</p>
-                    <DataTable value={this.state.cars} header="Single Selection" footer={this.displaySelection(this.state.selectedCar2)}
-                        selection={this.state.selectedCar2} onSelectionChange={e => this.setState({selectedCar2: e.value})}>
-                        <Column selectionMode="single" style={{width:'2em'}}/>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-
-                    <h3>Checkbox</h3>
-                    <p>Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".</p>
-                    <DataTable value={this.state.cars} header="Single Selection" footer={this.displaySelection(this.state.selectedCars3)}
-                        selection={this.state.selectedCars3} onSelectionChange={e => this.setState({selectedCars3: e.value})}>
-                        <Column selectionMode="multiple" style={{width:'2em'}}/>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableSortDemo.js b/src/showcase/datatable/DataTableSortDemo.js
deleted file mode 100644
index 94a71b525a..0000000000
--- a/src/showcase/datatable/DataTableSortDemo.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableSortDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Sort</h1>
-                        <p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and
-                            used with metaKey.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single Column</h3>
-                    <DataTable value={this.state.cars}>
-                        <Column field="vin" header="Vin" sortable={true}/>
-                        <Column field="year" header="Year" sortable={true}/>
-                        <Column field="brand" header="Brand" sortable={true}/>
-                        <Column field="color" header="Color" sortable={true}/>
-                    </DataTable>
-
-                    <h3>Multiple Columns</h3>
-                    <DataTable value={this.state.cars} sortMode="multiple">
-                        <Column field="vin" header="Vin" sortable={true}/>
-                        <Column field="year" header="Year" sortable={true}/>
-                        <Column field="brand" header="Brand" sortable={true}/>
-                        <Column field="color" header="Color" sortable={true}/>
-                    </DataTable>
-
-                    <h3>Removable Sort</h3>
-                    <DataTable value={this.state.cars} removableSort={true} sortMode="multiple">
-                        <Column field="vin" header="Vin" sortable={true}/>
-                        <Column field="year" header="Year" sortable={true}/>
-                        <Column field="brand" header="Brand" sortable={true}/>
-                        <Column field="color" header="Color" sortable={true}/>
-                    </DataTable>
-                </div>
-
-                <DataTableSortDemoDoc></DataTableSortDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableSortDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableSortDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Sort</h1>
-                        <p>Enabling sortable property on a column is enough to make a column sortable. Multiple column sorting is enabled using sortMode property and
-                            used with metaKey.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single Column</h3>
-                    <DataTable value={this.state.cars}>
-                        <Column field="vin" header="Vin" sortable={true}/>
-                        <Column field="year" header="Year" sortable={true}/>
-                        <Column field="brand" header="Brand" sortable={true}/>
-                        <Column field="color" header="Color" sortable={true}/>
-                    </DataTable>
-
-                    <h3>Multiple Columns</h3>
-                    <DataTable value={this.state.cars} sortMode="multiple">
-                        <Column field="vin" header="Vin" sortable={true}/>
-                        <Column field="year" header="Year" sortable={true}/>
-                        <Column field="brand" header="Brand" sortable={true}/>
-                        <Column field="color" header="Color" sortable={true}/>
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableStateDemo.js b/src/showcase/datatable/DataTableStateDemo.js
deleted file mode 100644
index dd0eb79688..0000000000
--- a/src/showcase/datatable/DataTableStateDemo.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableStateDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsMedium().then(data => this.setState({cars1: data, cars2: data}));
-    }
-
-    displaySelection(data) {
-        if(!data || data.length === 0) {
-            return <div style={{textAlign: 'left'}}>No Selection</div>;
-        }
-        else {
-            if(data instanceof Array)
-                return <ul style={{textAlign: 'left', margin: 0}}>{data.map((car,i) => <li key={car.vin}>{car.vin + ' - ' + car.year + ' - ' + car.brand + ' - ' + car.color}</li>)}</ul>;
-            else
-                return <div style={{textAlign: 'left'}}>Selected Car: {data.vin + ' - ' + data.year + ' - ' + data.brand + ' - ' + data.color}</div>
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - State</h1>
-                        <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again,
-                            table would render the data using its last settings.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Session Storage</h3>
-                    <DataTable value={this.state.cars1} selectionMode="multiple" resizableColumns={true} footer={this.displaySelection(this.state.selectedCars1)}
-                        selection={this.state.selectedCars1} onSelectionChange={e => this.setState({selectedCars1: e.value})} paginator={true} rows={10} stateKey="tablestatedemo-session">
-                        <Column field="vin" header="Vin" sortable={true} filter={true}/>
-                        <Column field="year" header="Year" sortable={true} filter={true}/>
-                        <Column field="brand" header="Brand" sortable={true} filter={true}/>
-                        <Column field="color" header="Color" sortable={true} filter={true}/>
-                    </DataTable>
-
-                    <h3>Local Storage</h3>
-                    <DataTable value={this.state.cars2} selectionMode="multiple" resizableColumns={true} footer={this.displaySelection(this.state.selectedCars2)}
-                        selection={this.state.selectedCars2} onSelectionChange={e => this.setState({selectedCars2: e.value})} paginator={true} rows={10}
-                        stateStorage="local" stateKey="tablestatedemo-local">
-                        <Column field="vin" header="Vin" sortable={true} filter={true}/>
-                        <Column field="year" header="Year" sortable={true} filter={true}/>
-                        <Column field="brand" header="Brand" sortable={true} filter={true}/>
-                        <Column field="color" header="Color" sortable={true} filter={true}/>
-                    </DataTable>
-
-                </div>
-
-                <DataTableStateDemoDoc></DataTableStateDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableStateDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableStateDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsMedium().then(data => this.setState({cars1: data, cars2: data}));
-    }
-
-    displaySelection(data) {
-        if(!data || data.length === 0) {
-            return <div style={{textAlign: 'left'}}>No Selection</div>;
-        }
-        else {
-            if(data instanceof Array)
-                return <ul style={{textAlign: 'left', margin: 0}}>{data.map((car,i) => <li key={car.vin}>{car.vin + ' - ' + car.year + ' - ' + car.brand + ' - ' + car.color}</li>)}</ul>;
-            else
-                return <div style={{textAlign: 'left'}}>Selected Car: {data.vin + ' - ' + data.year + ' - ' + data.brand + ' - ' + data.color}</div>
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - State</h1>
-                        <p>Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again,
-                            table would render the data using its last settings.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Session Storage</h3>
-                    <DataTable value={this.state.cars1} selectionMode="multiple" resizableColumns={true} footer={this.displaySelection(this.state.selectedCars1)}
-                        selection={this.state.selectedCars1} onSelectionChange={e => this.setState({selectedCars1: e.value})} paginator={true} rows={10} stateKey="tablestatedemo-session">
-                        <Column field="vin" header="Vin" sortable={true} filter={true}/>
-                        <Column field="year" header="Year" sortable={true} filter={true}/>
-                        <Column field="brand" header="Brand" sortable={true} filter={true}/>
-                        <Column field="color" header="Color" sortable={true} filter={true}/>
-                    </DataTable>
-
-                    <h3>Local Storage</h3>
-                    <DataTable value={this.state.cars2} selectionMode="multiple" resizableColumns={true} footer={this.displaySelection(this.state.selectedCars2)}
-                        selection={this.state.selectedCars2} onSelectionChange={e => this.setState({selectedCars2: e.value})} paginator={true} rows={10}
-                        stateStorage="local" stateKey="tablestatedemo-local">
-                        <Column field="vin" header="Vin" sortable={true} filter={true}/>
-                        <Column field="year" header="Year" sortable={true} filter={true}/>
-                        <Column field="brand" header="Brand" sortable={true} filter={true}/>
-                        <Column field="color" header="Color" sortable={true} filter={true}/>
-                    </DataTable>
-
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableStyleDemo.js b/src/showcase/datatable/DataTableStyleDemo.js
deleted file mode 100644
index c7e5f1b91a..0000000000
--- a/src/showcase/datatable/DataTableStyleDemo.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableStyleDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.yearTemplate = this.yearTemplate.bind(this);
-        this.rowClassName = this.rowClassName.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    yearTemplate(rowData) {
-        let year = rowData.year;
-        let fontWeight = year > 2010 ? 'bold' : 'normal';
-
-        return <span style={{fontWeight: fontWeight}}>{rowData.year}</span>;
-    }
-
-    rowClassName(rowData) {
-        let brand = rowData.brand;
-
-        return {'p-highlight' : (brand === 'Jaguar')};
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Styling</h1>
-                        <p>Particular rows and cells can be styled based on data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <p>This datatable highlights cell with a bolder font weight whose year value is greater than 2010 and highlights rows whose brand is a Jaguar.</p>
-                    <DataTable value={this.state.cars} rowClassName={this.rowClassName}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" body={this.yearTemplate} />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-
-                <DataTableStyleDemoDoc></DataTableStyleDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableStyleDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class DataTableStyleDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-        this.carservice = new CarService();
-        this.yearTemplate = this.yearTemplate.bind(this);
-        this.rowClassName = this.rowClassName.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    yearTemplate(rowData, column) {
-        let year = rowData.year;
-        let fontWeight = year > 2010 ? 'bold' : 'normal';
-
-        return <span style={{fontWeight: fontWeight}}>{rowData.year}</span>;
-    }
-
-    rowClassName(rowData) {
-        let brand = rowData.brand;
-
-        return {'p-highlight' : (brand === 'Jaguar')};
-    }
-
-    render() {
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Styling</h1>
-                        <p>Particular rows and cells can be styled based on data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <p>This datatable highlights cells with a bolder font weight whose year value is greater than 2010 and highlights rows whose brand is a Jaguar.</p>
-                    <DataTable value={this.state.cars} rowClassName={this.rowClassName}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" body={this.yearTemplate} />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/datatable/DataTableSubmenu.js b/src/showcase/datatable/DataTableSubmenu.js
deleted file mode 100644
index aa3a92d203..0000000000
--- a/src/showcase/datatable/DataTableSubmenu.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-
-export class DataTableSubmenu extends Component {
-
-    render() {
-        return (
-            <div className="content-section content-submenu p-clearfix">
-                <ul>
-                    <li><Link to="/datatable">&#9679; Documentation</Link></li>
-                    <li><Link to="/datatable/basic">&#9679; Basic</Link></li>
-                    <li><Link to="/datatable/dynamiccolumns">&#9679; Dynamic</Link></li>
-                    <li><Link to="/datatable/templating">&#9679; Templating</Link></li>
-                    <li><Link to="/datatable/paginator">&#9679; Paginator</Link></li>
-                    <li><Link to="/datatable/sort">&#9679; Sort</Link></li>
-                    <li><Link to="/datatable/filter">&#9679; Filter</Link></li>
-                    <li><Link to="/datatable/selection">&#9679; Selection</Link></li>
-                    <li><Link to="/datatable/edit">&#9679; Edit</Link></li>
-                    <li><Link to="/datatable/lazy">&#9679; Lazy</Link></li>
-                    <li><Link to="/datatable/scroll">&#9679; Scroll</Link></li>
-                    <li><Link to="/datatable/colgroup">&#9679; ColGroup</Link></li>
-                    <li><Link to="/datatable/rowgroup">&#9679; RowGroup</Link></li>
-                    <li><Link to="/datatable/rowexpand">&#9679; Expand</Link></li>
-                    <li><Link to="/datatable/responsive">&#9679; Responsive</Link></li>
-                    <li><Link to="/datatable/style">&#9679; Style</Link></li>
-                    <li><Link to="/datatable/colresize">&#9679; ColResize</Link></li>
-                    <li><Link to="/datatable/reorder">&#9679; Reorder</Link></li>
-                    <li><Link to="/datatable/coltoggle">&#9679; ColToggle</Link></li>
-                    <li><Link to="/datatable/export">&#9679; Export</Link></li>
-                    <li><Link to="/datatable/contextmenu">&#9679; ContextMenu</Link></li>
-                    <li><Link to="/datatable/crud">&#9679; Crud</Link></li>
-                    <li><Link to="/datatable/state">&#9679; State</Link></li>
-                </ul>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/datatable/DataTableTemplatingDemo.js b/src/showcase/datatable/DataTableTemplatingDemo.js
deleted file mode 100644
index 8d0b8e4441..0000000000
--- a/src/showcase/datatable/DataTableTemplatingDemo.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { Component } from 'react';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-import {Button} from '../../components/button/Button';
-import {DataTableSubmenu} from '../../showcase/datatable/DataTableSubmenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataTableTemplatingDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.brandTemplate = this.brandTemplate.bind(this);
-        this.colorTemplate = this.colorTemplate.bind(this);
-        this.actionTemplate = this.actionTemplate.bind(this);
-    }
-
-    colorTemplate(rowData, column) {
-        return <span style={{color: rowData['color']}}>{rowData['color']}</span>;
-    }
-
-    brandTemplate(rowData, column) {
-        var src = "showcase/resources/demo/images/car/" + rowData.brand + ".png";
-        return <img src={src} alt={rowData.brand} width="48px" />;
-    }
-
-    actionTemplate(rowData, column) {
-        return <div>
-            <Button type="button" icon="pi pi-search" className="p-button-success" style={{marginRight: '.5em'}}></Button>
-            <Button type="button" icon="pi pi-pencil" className="p-button-warning"></Button>
-        </div>;
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        var carCount = this.state.cars ? this.state.cars.length: 0;
-        var header = <div className="p-clearfix" style={{'lineHeight':'1.87em'}}>List of Cars <Button icon="pi pi-refresh" style={{'float':'right'}}/></div>;
-        var footer = "There are " + carCount + ' cars';
-
-        return (
-            <div>
-                <DataTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Templating</h1>
-                        <p>Custom content at header, body and footer sections are supported via templating.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} header={header} footer={footer}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" body={this.brandTemplate} style={{textAlign:'center'}}/>
-                        <Column field="color" header="Color" body={this.colorTemplate} />
-                        <Column body={this.actionTemplate} style={{textAlign:'center', width: '8em'}}/>
-                    </DataTable>
-                </div>
-
-                <DataTableTemplatingDemoDoc></DataTableTemplatingDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataTableTemplatingDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {Button} from 'primereact/button';
-import {CarService} from '../service/CarService';
-
-export class DataTableTemplatingDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.brandTemplate = this.brandTemplate.bind(this);
-        this.colorTemplate = this.colorTemplate.bind(this);
-        this.actionTemplate = this.actionTemplate.bind(this);
-    }
-
-    colorTemplate(rowData, column) {
-        return <span style={{color: rowData['color']}}>{rowData['color']}</span>;
-    }
-
-    brandTemplate(rowData, column) {
-        var src = "showcase/resources/demo/images/car/" + rowData.brand + ".png";
-        return <img src={src} alt={rowData.brand} width="48px" />;
-    }
-
-    actionTemplate(rowData, column) {
-        return <div>
-            <Button type="button" icon="pi pi-search" className="p-button-success" style={{marginRight: '.5em'}}></Button>
-            <Button type="button" icon="pi pi-pencil" className="p-button-warning"></Button>
-        </div>;
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        var carCount = this.state.cars ? this.state.cars.length: 0;
-        var header = <div className="p-clearfix" style={{'lineHeight':'1.87em'}}>List of Cars <Button icon="pi pi-refresh" style={{'float':'right'}}/></div>;
-        var footer = "There are " + carCount + ' cars';
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataTable - Templating</h1>
-                        <p>Custom content at header, body and footer sections are supported via templating.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataTable value={this.state.cars} header={header} footer={footer}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" body={this.brandTemplate} style={{textAlign:'center'}/>
-                        <Column field="color" header="Color" body={this.colorTemplate} />
-                        <Column body={this.actionTemplate} style={{textAlign:'center', width: '8em'}}/>
-                    </DataTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/dataview/DataViewDemo.js b/src/showcase/dataview/DataViewDemo.js
deleted file mode 100644
index d7c0d12f01..0000000000
--- a/src/showcase/dataview/DataViewDemo.js
+++ /dev/null
@@ -1,795 +0,0 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import { Dialog } from '../../components/dialog/Dialog';
-import { Panel } from '../../components/panel/Panel';
-import { CarService } from '../service/CarService';
-import { DataViewSubmenu } from '../../showcase/dataview/DataViewSubmenu';
-import { TabView,TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import { DataView, DataViewLayoutOptions } from "../../components/dataview/DataView";
-import { Button } from "../../components/button/Button";
-import { Dropdown } from "../../components/dropdown/Dropdown";
-
-export class DataViewDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            layout: 'list',
-            selectedCar: null,
-            visible: false,
-            sortKey: null,
-            sortOrder: null
-        };
-        this.carservice = new CarService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.onSortChange = this.onSortChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    onSortChange(event) {
-        const value = event.value;
-
-        if (value.indexOf('!') === 0) {
-            this.setState({
-                sortOrder: -1,
-                sortField: value.substring(1, value.length),
-                sortKey: value
-            });
-        }
-        else {
-            this.setState({
-                sortOrder: 1,
-                sortField: value,
-                sortKey: value
-            });
-        }
-    }
-
-    renderListItem(car) {
-        return (
-            <div className="p-col-12">
-                <div className="car-details">
-                    <div>
-                        <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand}/>
-                        <div className="p-grid">
-                            <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                            <div className="p-col-12">Year: <b>{car.year}</b></div>
-                            <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                            <div className="p-col-12">Color: <b>{car.color}</b></div>
-                        </div>
-                    </div>
-                    <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
-                </div>
-            </div>
-        );
-    }
-
-    renderGridItem(car) {
-        return (
-            <div style={{ padding: '.5em' }} className="p-col-12 p-md-3">
-                <Panel header={car.vin} style={{ textAlign: 'center' }}>
-                    <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand} />
-                    <div className="car-detail">{car.year} - {car.color}</div>
-                    <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
-                </Panel>
-            </div>
-        );
-    }
-
-    itemTemplate(car, layout) {
-        if (!car) {
-            return;
-        }
-
-        if (layout === 'list')
-            return this.renderListItem(car);
-        else if (layout === 'grid')
-            return this.renderGridItem(car);
-    }
-
-    renderCarDialogContent() {
-        if (this.state.selectedCar) {
-            return (
-                <div className="p-grid" style={{fontSize: '16px', textAlign: 'center', padding: '20px'}}>
-                    <div className="p-col-12" style={{textAlign: 'center'}}>
-                        <img src={`showcase/resources/demo/images/car/${this.state.selectedCar.brand}.png`} alt={this.state.selectedCar.brand} />
-                    </div>
-
-                    <div className="p-col-4">Vin: </div>
-                    <div className="p-col-8">{this.state.selectedCar.vin}</div>
-
-                    <div className="p-col-4">Year: </div>
-                    <div className="p-col-8">{this.state.selectedCar.year}</div>
-
-                    <div className="p-col-4">Brand: </div>
-                    <div className="p-col-8">{this.state.selectedCar.brand}</div>
-
-                    <div className="p-col-4">Color: </div>
-                    <div className="p-col-8">{this.state.selectedCar.color}</div>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderHeader() {
-        const sortOptions = [
-            {label: 'Newest First', value: '!year'},
-            {label: 'Oldest First', value: 'year'},
-            {label: 'Brand', value: 'brand'}
-        ];
-
-        return (
-            <div className="p-grid">
-                <div className="p-col-6" style={{textAlign: 'left'}}>
-                    <Dropdown options={sortOptions} value={this.state.sortKey} placeholder="Sort By" onChange={this.onSortChange} style={{width: '12em'}} />
-                </div>
-                <div className="p-col-6" style={{textAlign: 'right'}}>
-                    <DataViewLayoutOptions layout={this.state.layout} onChange={(e) => this.setState({layout: e.value})} />
-                </div>
-             </div>
-        );
-    }
-
-    render() {
-        const header = this.renderHeader();
-
-        return (
-            <div>
-                <DataViewSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataView</h1>
-                        <p>DataView displays data in grid or list layout with pagination and sorting features.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dataView")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation dataview-demo">
-                    <DataView value={this.state.cars} layout={this.state.layout} header={header}
-                            itemTemplate={this.itemTemplate} paginatorPosition={'both'} paginator={true} rows={20}
-                            sortOrder={this.state.sortOrder} sortField={this.state.sortField} />
-
-                    <Dialog header="Car Details" visible={this.state.visible} width="225px" modal={true} onHide={() => this.setState({visible: false})}>
-                        {this.renderCarDialogContent()}
-                    </Dialog>
-                </div>
-
-                <DataViewDoc/>
-            </div>
-        );
-    }
-}
-
-export class DataViewDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {DataView, DataViewLayoutOptions} from 'primereact/dataview';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Layout of the DataView is managed by the <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> that can be downloaded from npm.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-npm install primeflex --save
-
-`}
-</CodeHighlight>
-
-                        <p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. <i>list</i> and <i>grid</i>. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview.
-                            Cars are loaded by a CarService that connects to a server to fetch the cars.</p>
-
-                        <p>DataView has two layout modes; <i>list</i> and <i>grid</i> where <i>itemTemplate</i> function is called by passing the item to render along with the layout mode.</p>
-                            <CodeHighlight className="language-javascript">
-{`
-constructor() {
-    super();
-    this.state = {
-        cars: [],
-        layout: 'list'
-    };
-    this.carservice = new CarService();
-    this.itemTemplate = this.itemTemplate.bind(this);
-}
-
-componentDidMount() {
-    this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-}
-
-itemTemplate(car, layout) {
-    if (layout === 'list') {
-        return (
-            <div className="p-grid">
-                <div>{car.brand}</div>
-            </div>
-        );
-    }
-    if (layout === 'grid') {
-        return (
-            <div className="p-col-12 p-md-3">
-                <div>{car.brand}</div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<DataView value={this.state.cars} layout={this.state.layout} itemTemplate={this.itemTemplate}></DataView>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>DataViewLayoutOptions</h3>
-                        <p>DataViewLayoutOptions is a helper component to choose between layout modes. This component is used in controlled manner to manage the state of layout orientation.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<DataViewLayoutOptions layout={this.state.layout} onChange={(e) => this.setState({layout: e.value})} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties of DataViewLayoutOptions</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>layout</td>
-                                        <td>string</td>
-                                        <td>list</td>
-                                        <td>Layout of the items, valid values are "list" and "grid".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the element.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events of DataViewLayoutOptions</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onChange</td>
-                                        <td>event.originalEvent:  browser event  <br/>
-                                            event.value = layout mode e.g. "list" or "grid"
-                                        </td>
-                                        <td>Callback to invoke when layout mode is changed.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Paginator</h3>
-                        <p>Pagination is enabled by setting paginator property to true, rows attribute defines the number of rows per page and pageLinks specify the the number
-                            of page links to display. Visit the <Link to="/paginator"> paginator</Link> paginator component for more information about the available properties.</p>
-
-                        <p>Pagination can either be used in Controlled or Uncontrolled manner. In controlled mode, <i>first</i> and <i>onPage</i> properties needs to be defined to control the pagination state.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<DataView value={this.state.cars} layout={this.state.layout} itemTemplate={this.itemTemplate} paginator={true} rows={10} first={this.state.first} onPage={(e) => this.setState({first: e.first})}></DataView>
-
-`}
-                        </CodeHighlight>
-
-                        <p>In uncontrolled mode, only <i>paginator</i> property needs to be enabled. Initial page state can be still be provided using the <i>first</i> property in uncontrolled mode however
-                        it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the paginator, prefer to use the component as controlled.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<DataView value={this.state.cars} layout={this.state.layout} itemTemplate={this.itemTemplate} paginator={true} rows={10}></DataView>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Sorting</h3>
-                        <p><i>sortField</i> and <i>sortOrder</i> properties are available for sorting functionality, for flexibility there is no built-in UI available so that a custom UI can be used for the sorting element.
-                            Here is an example that uses a dropdown where simply updating the sortField-sortOrder bindings of the DataView initiates sorting.</p>
-
-                        <CodeHighlight className="language-javascript">
-                        {`
-const sortOptions = [
-    {label: 'Newest First', value: '!year'},
-    {label: 'Oldest First', value: 'year'},
-    {label: 'Brand', value: 'brand'}
-];
-
-const header = (
-    <div className="p-grid">
-        <div className="p-col-12 p-md-4">
-            <Dropdown options={sortOptions} value={this.state.sortKey} placeholder="Sort By" onChange={this.onSortChange} />
-        </div>
-    </div>
-);
-
-<DataView value={this.state.cars} header={header} sortOrder={this.state.sortOrder} sortField={this.state.sortField} />
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="-html5">
-                            {`
-onSortChange(event) {
-    let value = event.value;
-
-    if (value.indexOf('!') === 0) {
-        this.setState({sortOrder: -1, sortField:value.substring(1, value.length), sortKey: value});
-    }
-    else {
-        this.setState({sortOrder: 1, sortField:value, sortKey: value});
-    }
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Lazy Loading</h3>
-                        <p>Lazy loading is useful to deal with huge datasets, in order to implement lazy loading use the pagination in controlled mode and utilize the <i>onPage</i> callback to load your data from the backend.
-                        Pagination in this case needs to display the logical number of records so bind this value to the <i>totalRecords</i> property so that paginator can display itself according to the total records although you'd only
-                        need to load the data of the current page. Refer to <Link to="/datatable/lazy">DataTable</Link> lazy loading for a sample implementation.</p>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>header</td>
-                                        <td>JSX or string</td>
-                                        <td>null</td>
-                                        <td>Header content of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>footer</td>
-                                        <td>JSX or string</td>
-                                        <td>null</td>
-                                        <td>Footer content of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of objects to display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>layout</td>
-                                        <td>string</td>
-                                        <td>list</td>
-                                        <td>Layout of the items, valid values are "list" and "grid".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>rows</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Number of rows to display per page.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>first</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Index of the first record to render.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>totalRecords</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Number of total records, defaults to length of value when not defined.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginator</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When specified as true, enables the pagination.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorPosition</td>
-                                        <td>string</td>
-                                        <td>bottom</td>
-                                        <td>Position of the paginator, options are "top","bottom" or "both".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>alwaysShowPaginator</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to show it even there is only one page.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorTemplate</td>
-                                        <td>string</td>
-                                        <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                                        <td>Template of the paginator.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorLeft</td>
-                                        <td>Element</td>
-                                        <td>null</td>
-                                        <td>Content for the left side of the paginator.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorRight</td>
-                                        <td>Element</td>
-                                        <td>null</td>
-                                        <td>Content for the right side of the paginator.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>pageLinkSize</td>
-                                        <td>number</td>
-                                        <td>5</td>
-                                        <td>Number of page links to display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>rowsPerPageOptions</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>Array of integer values to display inside rows per page dropdown.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>currentPageReportTemplate</td>
-                                        <td>string</td>
-                                        <td>(&123;currentPage&125; of &123;totalPages&125;)</td>
-                                        <td>Template of the current page report element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>emptyMessage</td>
-                                        <td>string</td>
-                                        <td>No records found.</td>
-                                        <td>Text to display when there is no data.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortField</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the field to sort data by default.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortOrder</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Order to sort the data by default.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>lazy</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>itemTemplate</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Function that gets the option along with the layout mdoe and returns the content.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onPage</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.first: Index of the first records on page. <br />
-                                            event.rows: Number of records to display per page.></td>
-                                        <td>Callback to invoke on pagination.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-dataview</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-dataview-list</td>
-                                        <td>Container element in list layout.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-dataview-grid</td>
-                                        <td>Container element in grid layout.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-dataview-header</td>
-                                        <td>Header section.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-dataview-footer</td>
-                                        <td>Footer section.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-dataview-content</td>
-                                        <td>Container of items.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-
-                            <h3>Dependencies</h3>
-                            <p>None.</p>
-                        </div>
-
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/dataview" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Dialog} from 'primereact/dialog';
-import {Panel} from 'primereact/panel';
-import {CarService} from '../service/CarService';
-import {DataView, DataViewLayoutOptions} from "primereact/dataview";
-import {Button} from "primereact/button";
-import {Dropdown} from "primereact/dropdown";
-
-export class DataViewDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            layout: 'list',
-            selectedCar: null,
-            visible: false,
-            sortKey: null,
-            sortOrder: null
-        };
-        this.carservice = new CarService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.onSortChange = this.onSortChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsLarge().then(data => this.setState({cars: data}));
-    }
-
-    onSortChange(event) {
-        const value = event.value;
-
-        if (value.indexOf('!') === 0) {
-            this.setState({
-                sortOrder: -1,
-                sortField: value.substring(1, value.length),
-                sortKey: value
-            });
-        }
-        else {
-            this.setState({
-                sortOrder: 1,
-                sortField: value,
-                sortKey: value
-            });
-        }
-    }
-
-    renderListItem(car) {
-        return (
-            <div className="p-col-12">
-                <div className="car-details">
-                    <div>
-                        <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
-                        <div className="p-grid">
-                            <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                            <div className="p-col-12">Year: <b>{car.year}</b></div>
-                            <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                            <div className="p-col-12">Color: <b>{car.color}</b></div>
-                        </div>
-                    </div>
-                    <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
-                </div>
-            </div>
-        );
-    }
-
-    renderGridItem(car) {
-        return (
-            <div style={{ padding: '.5em' }} className="p-col-12 p-md-3">
-                <Panel header={car.vin} style={{ textAlign: 'center' }}>
-                    <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand} />
-                    <div className="car-detail">{car.year} - {car.color}</div>
-                    <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
-                </Panel>
-            </div>
-        );
-    }
-
-    itemTemplate(car, layout) {
-        if (!car) {
-            return;
-        }
-
-        if (layout === 'list')
-            return this.renderListItem(car);
-        else if (layout === 'grid')
-            return this.renderGridItem(car);
-    }
-
-    renderCarDialogContent() {
-        if (this.state.selectedCar) {
-            return (
-                <div className="p-grid" style={{fontSize: '16px', textAlign: 'center', padding: '20px'}}>
-                    <div className="p-col-12" style={{textAlign: 'center'}}>
-                        <img src={'showcase/resources/demo/images/car/\${this.state.selectedCar.brand}.png'} alt={this.state.selectedCar.brand} />
-                    </div>
-
-                    <div className="p-col-4">Vin: </div>
-                    <div className="p-col-8">{this.state.selectedCar.vin}</div>
-
-                    <div className="p-col-4">Year: </div>
-                    <div className="p-col-8">{this.state.selectedCar.year}</div>
-
-                    <div className="p-col-4">Brand: </div>
-                    <div className="p-col-8">{this.state.selectedCar.brand}</div>
-
-                    <div className="p-col-4">Color: </div>
-                    <div className="p-col-8">{this.state.selectedCar.color}</div>
-                </div>
-            );
-        }
-        else {
-            return null;
-        }
-    }
-
-    renderHeader() {
-        const sortOptions = [
-            {label: 'Newest First', value: '!year'},
-            {label: 'Oldest First', value: 'year'},
-            {label: 'Brand', value: 'brand'}
-        ];
-
-        return (
-            <div className="p-grid">
-                <div className="p-col-6" style={{textAlign: 'left'}}>
-                    <Dropdown options={sortOptions} value={this.state.sortKey} placeholder="Sort By" onChange={this.onSortChange} />
-                </div>
-                <div className="p-col-6" style={{textAlign: 'right'}}>
-                    <DataViewLayoutOptions layout={this.state.layout} onChange={(e) => this.setState({layout: e.value})} />
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const header = this.renderHeader();
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataView</h1>
-                        <p>DataView displays data in grid or list layout with pagination, sorting and filtering features.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <DataView value={this.state.cars} layout={this.state.layout} header={header}
-                            itemTemplate={this.itemTemplate} paginatorPosition={'both'} paginator={true} rows={20}
-                            sortOrder={this.state.sortOrder} sortField={this.state.sortField} />
-
-                    <Dialog header="Car Details" visible={this.state.visible} width="225px" modal={true} onHide={() => this.setState({visible: false})}>
-                        {this.renderCarDialogContent()}
-                    </Dialog>
-                </div>
-
-                <DataViewDoc/>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/dataview/DataViewLazyDemo.js b/src/showcase/dataview/DataViewLazyDemo.js
deleted file mode 100644
index 6f1a2e78a1..0000000000
--- a/src/showcase/dataview/DataViewLazyDemo.js
+++ /dev/null
@@ -1,306 +0,0 @@
-import React, { Component } from 'react';
-import { DataView, DataViewLayoutOptions } from '../../components/dataview/DataView';
-import { Panel } from '../../components/panel/Panel';
-import { CarService } from '../service/CarService';
-import { DataViewSubmenu } from '../../showcase/dataview/DataViewSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DataViewLazyDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            layout: 'list',
-            loading: true,
-            first: 0,
-            rows: 6,
-            totalRecords: 0
-        };
-        this.carservice = new CarService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.onPage = this.onPage.bind(this);
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.carservice.getCarsLarge().then(data => {
-                this.datasource = data;
-                this.setState({
-                    totalRecords: data.length,
-                    cars: this.datasource.slice(0, this.state.rows),
-                    loading: false
-                });
-            });
-        }, 1000);
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            const startIndex = event.first;
-            const endIndex = event.first + this.state.rows;
-
-            this.setState({
-                first: startIndex,
-                cars: this.datasource.slice(startIndex, endIndex),
-                loading: false
-            });
-        }, 1000);
-    }
-
-    renderListItem(car) {
-        return (
-            <div className="p-col-12">
-                <div className="car-details">
-                    <div>
-                        <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand} />
-                        <div className="p-grid">
-                            <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                            <div className="p-col-12">Year: <b>{car.year}</b></div>
-                            <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                            <div className="p-col-12">Color: <b>{car.color}</b></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    renderGridItem(car) {
-        return (
-            <div style={{ padding: '.5em' }} className="p-col-12 p-md-4">
-                <Panel header={car.vin} style={{ textAlign: 'center' }}>
-                    <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand} />
-                    <div className="car-detail">{car.year} - {car.color}</div>
-                </Panel>
-            </div>
-        );
-    }
-
-    itemTemplate(car, layout) {
-        if (!car) {
-            return;
-        }
-
-        if (layout === 'list')
-            return this.renderListItem(car);
-        else if (layout === 'grid')
-            return this.renderGridItem(car);
-    }
-
-    renderHeader() {
-        let onOptionChange = (e) => {
-            this.setState({ loading: true }, () => {
-                setTimeout(() => {
-                    this.setState({
-                        loading: false,
-                        layout: e.value
-                    });
-                }, 1000);
-            });
-        };
-
-        return (
-            <div style={{textAlign: 'left'}}>
-                <DataViewLayoutOptions layout={this.state.layout} onChange={onOptionChange} />
-            </div>
-        );
-    }
-
-    render() {
-        const header = this.renderHeader();
-
-        return (
-            <div>
-                <DataViewSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataView - Lazy</h1>
-                        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates
-                        lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming
-                            there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("dataView")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation dataview-demo">
-                    <DataView value={this.state.cars} layout={this.state.layout} header={header} itemTemplate={this.itemTemplate}
-                        lazy paginator paginatorPosition={'both'} rows={this.state.rows} totalRecords={this.state.totalRecords}
-                        first={this.state.first} onPage={this.onPage} loading={this.state.loading} />
-                </div>
-
-                <DataViewLazyDemoDoc></DataViewLazyDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class DataViewLazyDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-{`
-
-import React, { Component } from 'react';
-import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
-import { Panel } from 'primereact/panel';
-import { CarService } from '../service/CarService';
-
-export class DataViewLazyDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: [],
-            layout: 'list',
-            loading: true,
-            first: 0,
-            rows: 6,
-            totalRecords: 0
-        };
-        this.carservice = new CarService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.onPage = this.onPage.bind(this);
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.carservice.getCarsLarge().then(data => {
-                this.datasource = data;
-                this.setState({
-                    totalRecords: data.length,
-                    cars: this.datasource.slice(0, this.state.rows),
-                    loading: false
-                });
-            });
-        }, 1000);
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            const startIndex = event.first;
-            const endIndex = event.first + this.state.rows;
-
-            this.setState({
-                first: startIndex,
-                cars: this.datasource.slice(startIndex, endIndex),
-                loading: false
-            });
-        }, 1000);
-    }
-
-    renderListItem(car) {
-        return (
-            <div className="p-col-12">
-                <div className="car-details">
-                    <div>
-                        <img src={\`showcase/resources/demo/images/car/\${car.brand}.png\`} alt={car.brand} />
-                        <div className="p-grid">
-                            <div className="p-col-12">Vin: <b>{car.vin}</b></div>
-                            <div className="p-col-12">Year: <b>{car.year}</b></div>
-                            <div className="p-col-12">Brand: <b>{car.brand}</b></div>
-                            <div className="p-col-12">Color: <b>{car.color}</b></div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    renderGridItem(car) {
-        return (
-            <div style={{ padding: '.5em' }} className="p-col-12 p-md-4">
-                <Panel header={car.vin} style={{ textAlign: 'center' }}>
-                    <img src={\`showcase/resources/demo/images/car/\${car.brand}.png\`} alt={car.brand} />
-                    <div className="car-detail">{car.year} - {car.color}</div>
-                </Panel>
-            </div>
-        );
-    }
-
-    itemTemplate(car, layout) {
-        if (!car) {
-            return;
-        }
-
-        if (layout === 'list')
-            return this.renderListItem(car);
-        else if (layout === 'grid')
-            return this.renderGridItem(car);
-    }
-
-    renderHeader() {
-        let onOptionChange = (e) => {
-            this.setState({ loading: true }, () => {
-                setTimeout(() => {
-                    this.setState({
-                        loading: false,
-                        layout: e.value
-                    });
-                }, 1000);
-            });
-        };
-
-        return (
-            <div style={{textAlign: 'left'}}>
-                <DataViewLayoutOptions layout={this.state.layout} onChange={onOptionChange} />
-            </div>
-        );
-    }
-
-    render() {
-        const header = this.renderHeader();
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DataView - Lazy</h1>
-                        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering happens. Sample belows imitates
-                        lazy paging by using an in memory list. It is also important to assign the logical number of rows to totalRecords by doing a projection query for paginator configuration so that paginator displays the UI assuming
-                            there are actually records of totalRecords size although in reality they aren't as in lazy mode, only the records that are displayed on the current page exist.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation dataview-demo">
-                    <DataView value={this.state.cars} layout={this.state.layout} header={header} itemTemplate={this.itemTemplate}
-                        lazy paginator paginatorPosition={'both'} rows={this.state.rows} totalRecords={this.state.totalRecords}
-                        first={this.state.first} onPage={this.onPage} loading={this.state.loading} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/dataview/DataViewSubmenu.js b/src/showcase/dataview/DataViewSubmenu.js
deleted file mode 100644
index b4fc1cfe85..0000000000
--- a/src/showcase/dataview/DataViewSubmenu.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-
-export class DataViewSubmenu extends Component {
-
-    render() {
-        return (
-            <div className="content-section content-submenu p-clearfix">
-                <ul>
-                    <li><Link to="/dataview">&#9679; Documentation</Link></li>
-                    <li><Link to="/dataview/lazy">&#9679; Lazy</Link></li>
-                </ul>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/deferredcontent/DeferredContentDemo.js b/src/showcase/deferredcontent/DeferredContentDemo.js
deleted file mode 100644
index c5b933ad67..0000000000
--- a/src/showcase/deferredcontent/DeferredContentDemo.js
+++ /dev/null
@@ -1,233 +0,0 @@
-import React, {Component} from 'react';
-import {DeferredContent} from '../../components/deferredcontent/DeferredContent';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {CarService} from "../service/CarService";
-import {DataTable} from "../../components/datatable/DataTable";
-import {Column} from "../../components/column/Column";
-import {Growl} from "../../components/growl/Growl";
-
-export class DeferredContentDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.onImageLoad = this.onImageLoad.bind(this);
-        this.onDataLoad = this.onDataLoad.bind(this);
-    }
-
-    onImageLoad() {
-        this.growl.show({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
-    }
-
-    onDataLoad() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-        this.growl.show({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DeferredContent</h1>
-                        <p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll. </p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("deferredContent")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-                    <div style={{height:'800px'}}>
-                        Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
-                    </div>
-                    <DeferredContent onLoad={this.onImageLoad}>
-                        <img src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" alt="prime"/>
-                    </DeferredContent>
-
-                    <div style={{height:'500px'}}>
-                    </div>
-                    <DeferredContent onLoad={this.onDataLoad}>
-                        <DataTable value={this.state.cars}>
-                            <Column field="vin" header="Vin" />
-                            <Column field="year" header="Year" />
-                            <Column field="brand" header="Brand" />
-                            <Column field="color" header="Color" />
-                        </DataTable>
-                    </DeferredContent>
-                </div>
-
-                <DeferredContentDoc/>
-            </div>
-        )
-    }
-}
-
-export class DeferredContentDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-{`
-import {DeferredContent} from 'primereact/DeferredContent';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>DeferredContent is used as a wrapper element of its content.</p>
-                        <CodeHighlight className="language-jsx">
-{`
-<DeferredContent>
-    <DataTable value={this.state.cars}>
-        <Column field="vin" header="Vin" />
-        <Column field="year" header="Year" />
-        <Column field="brand" header="Brand" />
-        <Column field="color" header="Color" />
-    </DataTable>
-</DeferredContent>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Callback</h3>
-                        <p><i>onLoad</i> callback is useful to initialize the content when it becomes visible on scroll such as loading data.</p>
-                        <CodeHighlight className="language-jsx">
-{`
-<DeferredContent onLoad={this.initCars}>
-    <DataTable value={this.state.cars}>
-        <Column field="vin" header="Vin" />
-        <Column field="year" header="Year" />
-        <Column field="brand" header="Brand" />
-        <Column field="color" header="Color" />
-    </DataTable>
-</DeferredContent>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            Component has no attributes.
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onLoad</td>
-                                        <td>event: Event object</td>
-                                        <td>Callback to invoke when deferred content is loaded.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <div className="doc-tablewrapper">
-                            Component does not apply any styling.
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/DeferredContent" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {DeferredContent} from 'primereact/deferredcontent';
-import {CarService} from "../service/CarService";
-import {DataTable} from "primereact/datatable";
-import {Column} from "primereact/column";
-import {Growl} from "primereact/growl";
-
-export class DeferredContentDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-        this.onImageLoad = this.onImageLoad.bind(this);
-        this.onDataLoad = this.onDataLoad.bind(this);
-    }
-
-    onImageLoad() {
-        this.growl.show({severity: 'success', summary: 'Image Initialized', detail: 'Scroll down to load the datatable'});
-    }
-
-    onDataLoad() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-        this.growl.show({severity: 'success', summary: 'Data Initialized', detail: 'Render Completed'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>DeferredContent</h1>
-                        <p>DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll. </p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-                    <div style={{height:'800px'}}>
-                        Scroll down to lazy load an image and the DataTable which initiates a query that is not executed on initial page load to speed up load performance.
-                    </div>
-                    <DeferredContent onLoad={this.onImageLoad}>
-                        <img src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" alt="prime"/>
-                    </DeferredContent>
-
-                    <div style={{height:'500px'}}>
-                    </div>
-                    <DeferredContent onLoad={this.onDataLoad}>
-                        <DataTable value={this.state.cars}>
-                            <Column field="vin" header="Vin" />
-                            <Column field="year" header="Year" />
-                            <Column field="brand" header="Brand" />
-                            <Column field="color" header="Color" />
-                        </DataTable>
-                    </DeferredContent>
-                </div>
-            </div>
-        )
-    }
-}
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/dialog/DialogDemo.js b/src/showcase/dialog/DialogDemo.js
deleted file mode 100644
index ad8d365655..0000000000
--- a/src/showcase/dialog/DialogDemo.js
+++ /dev/null
@@ -1,615 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Dialog} from '../../components/dialog/Dialog';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DialogDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            displayBasic: false,
-            displayBasic2: false,
-            displayBlockScroll: false,
-            displayModal: false,
-            displayMaximizable: false,
-            displayPosition: false,
-            position: 'center'
-        };
-
-        this.onClick = this.onClick.bind(this);
-        this.onHide = this.onHide.bind(this);
-    }
-
-    onClick(name, position) {
-        let state = {
-            [`${name}`]: true
-        };
-
-        if (position) {
-            state = {
-                ...state,
-                position
-            }
-        }
-
-        this.setState(state);
-    }
-
-    onHide(name) {
-        this.setState({
-            [`${name}`]: false
-        });
-    }
-
-    renderFooter(name) {
-        return (
-            <div>
-                <Button label="Yes" icon="pi pi-check" onClick={() => this.onHide(name)} />
-                <Button label="No" icon="pi pi-times" onClick={() => this.onHide(name)} className="p-button-secondary"/>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Dialog</h1>
-                        <p>Dialog is a container to display content in an overlay window.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dialog")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation dialog-demo">
-                    <h3>Basic</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayBasic')} />
-                    <Dialog header="Godfather I" visible={this.state.displayBasic} style={{width: '50vw'}} onHide={() => this.onHide('displayBasic')} footer={this.renderFooter('displayBasic')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <Button label="Long Content" icon="pi pi-external-link" onClick={() => this.onClick('displayBasic2')} />
-                    <Dialog header="Godfather Casting" visible={this.state.displayBasic2} style={{width: '50vw'}} onHide={() => this.onHide('displayBasic2')} blockScroll footer={this.renderFooter('displayBasic2')}>
-                        Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
-                        <br/><br/>
-                        After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
-                        <br/><br/>
-                        From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
-                        <br/><br/>
-                        Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
-                        <br/><br/>
-                        Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
-                        <br/><br/>
-                        Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
-                        <br/><br/>
-                    </Dialog>
-
-                    <h3>BlockScroll</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayBlockScroll')} />
-                    <Dialog header="Godfather I" visible={this.state.displayBlockScroll} style={{width: '50vw'}} onHide={() => this.onHide('displayBlockScroll')} blockScroll
-                        footer={this.renderFooter('displayBlockScroll')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <h3>Without Modal</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayModal')} />
-                    <Dialog header="Godfather I" visible={this.state.displayModal} style={{width: '50vw'}} onHide={() => this.onHide('displayModal')} modal={false}
-                        footer={this.renderFooter('displayModal')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <h3>Maximizable</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayMaximizable')} />
-                    <Dialog header="Godfather I" visible={this.state.displayMaximizable} style={{width: '50vw'}} onHide={() => this.onHide('displayMaximizable')} maximizable blockScroll
-                        footer={this.renderFooter('displayMaximizable')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <h3>Position</h3>
-                    <div className="p-grid p-dir-col">
-                        <div className="p-col">
-                            <Button label="Left" icon="pi pi-arrow-right" onClick={() => this.onClick('displayPosition', 'left')} className="p-button-warning" />
-                            <Button label="Right" icon="pi pi-arrow-left" onClick={() => this.onClick('displayPosition', 'right')} className="p-button-warning" />
-                        </div>
-                        <div className="p-col">
-                            <Button label="Top" icon="pi pi-arrow-down" onClick={() => this.onClick('displayPosition', 'top')} className="p-button-warning" />
-                            <Button label="TopLeft" icon="pi pi-arrow-down" onClick={() => this.onClick('displayPosition', 'topleft')} className="p-button-warning" />
-                            <Button label="TopRight" icon="pi pi-arrow-down" onClick={() => this.onClick('displayPosition', 'topright')} className="p-button-warning" />
-                        </div>
-                        <div className="p-col">
-                            <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => this.onClick('displayPosition', 'bottom')} className="p-button-warning" />
-                            <Button label="BottomLeft" icon="pi pi-arrow-up" onClick={() => this.onClick('displayPosition', 'bottomleft')} className="p-button-warning" />
-                            <Button label="BottomRight" icon="pi pi-arrow-up" onClick={() => this.onClick('displayPosition', 'bottomright')} className="p-button-warning" />
-                        </div>
-                    </div>
-
-                    <Dialog header="Godfather I" visible={this.state.displayPosition} style={{width: '50vw'}} onHide={() => this.onHide('displayPosition')}
-                        position={this.state.position} blockScroll footer={this.renderFooter('displayPosition')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-                </div>
-
-                <DialogDoc></DialogDoc>
-            </div>
-        )
-    }
-}
-
-export class DialogDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Dialog} from 'primereact/dialog';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Dialog is used as a container and visibility is managed with <i>visible</i> property where <i>onHide</i> event is required to update the visibility state.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Dialog header="Godfather I" visible={this.state.visible} style={{width: '50vw'}} modal={true} onHide={() => this.setState({visible: false})}>
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</Dialog>
-
-<Button label="Show" icon="pi pi-info-circle" onClick={(e) => this.setState({visible: true})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Header and Footer</h3>
-            <p>Header and Footer sections are defined using properties with the same name that accept simple strings or JSX for custom content. In addition <i>iconsTemplate</i> property enables
-            adding more icons at the header section.</p>
-<CodeHighlight className="language-jsx">
-{`
-const footer = (
-    <div>
-        <Button label="Yes" icon="pi pi-check" onClick={this.onHide} />
-        <Button label="No" icon="pi pi-times" onClick={this.onHide} />
-    </div>
-);
-
-const myIcon = (
-    <button className="p-dialog-titlebar-icon p-link">
-        <span className="pi pi-search"></span>
-    </button>
-)
-
-<Dialog header="Header Text" footer={footer} iconsTemplate={myIcon} visible={this.state.visible} style={{width: '50vw'}} modal={true} onHide={this.onHide}>
-    Content
-</Dialog>
-
-`}
-</CodeHighlight>
-
-            <h3>Dynamic Content</h3>
-            <p>Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via <i>contentStyle</i> so longer content displays a scrollbar.</p>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Title content of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Footer content of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>visible</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies the visibility of the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>center</td>
-                            <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
-                        </tr>
-                        <tr>
-                            <td>modal</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defines if background should be blocked when dialog is displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Style of the content section.</td>
-                        </tr>
-                        <tr>
-                            <td>closeOnEscape</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Specifices if pressing escape key should hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>dismissableMask</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifices if clicking the modal background should hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>rtl</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled dialog is displayed in RTL direction.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Adds a close icon to the header to hide the dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>maskClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the mask.</td>
-                        </tr>
-                        <tr>
-                            <td>showHeader</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show the header or not.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>DOM element</td>
-                            <td>null</td>
-                            <td>DOM element instance where the dialog should be mounted.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                        <tr>
-                            <td>maximizable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the dialog can be displayed full screen.</td>
-                        </tr>
-                        <tr>
-                            <td>blockScroll</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether background scroll should be blocked when dialog is visible.</td>
-                        </tr>
-                        <tr>
-                            <td>iconsTemplate</td>
-                            <td>Element</td>
-                            <td>null</td>
-                            <td>Custom icons template for the header.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaCloseIconLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines a string that labels the close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>focusOnShow</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>When enabled, first button receives focus on show.</td>
-                        </tr>
-                        <tr>
-                            <td>maximized</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, the dialog is initially displayed full screen.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onHide</td>
-                            <td>null</td>
-                            <td>Callback to invoke when dialog is hidden (Required).</td>
-                        </tr>
-                        <tr>
-                            <td>onShow</td>
-                            <td>null</td>
-                            <td>Callback to invoke when dialog is showed.</td>
-                        </tr>
-                        <tr>
-                            <td>onMaximize</td>
-                            <td>event.originalEvent: Browser event  <br/>
-                                event.maximized: Whether to show the dialog or not on fullscreen.
-                            </td>
-                            <td>Callback to invoke when toggle maximize icon is clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-dialog</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar</td>
-                            <td>Container of header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-title</td>
-                            <td>Header element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar-icon</td>
-                            <td>Icon container inside header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-titlebar-close</td>
-                            <td>Close icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-dialog-content</td>
-                            <td>Content element</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/dialog" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Dialog} from '../../components/dialog/Dialog';
-import {Button} from '../../components/button/Button';
-
-export class DialogDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            displayBasic: false,
-            displayBasic2: false,
-            displayBlockScroll: false,
-            displayModal: false,
-            displayMaximizable: false,
-            displayPosition: false,
-            position: 'center'
-        };
-
-        this.onClick = this.onClick.bind(this);
-        this.onHide = this.onHide.bind(this);
-    }
-
-    onClick(name, position) {
-        let state = {
-            [\`\${name}\`]: true
-        };
-
-        if (position) {
-            state = {
-                ...state,
-                position
-            }
-        }
-
-        this.setState(state);
-    }
-
-    onHide(name) {
-        this.setState({
-            [\`\${name}\`]: false
-        });
-    }
-
-    renderFooter(name) {
-        return (
-            <div>
-                <Button label="Yes" icon="pi pi-check" onClick={() => this.onHide(name)} />
-                <Button label="No" icon="pi pi-times" onClick={() => this.onHide(name)} className="p-button-secondary"/>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Dialog</h1>
-                        <p>Dialog is a container to display content in an overlay window.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation dialog-demo">
-                    <h3>Basic</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayBasic')} />
-                    <Dialog header="Godfather I" visible={this.state.displayBasic} style={{width: '50vw'}} onHide={() => this.onHide('displayBasic')} footer={this.renderFooter('displayBasic')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <Button label="Long Content" icon="pi pi-external-link" onClick={() => this.onClick('displayBasic2')} />
-                    <Dialog header="Godfather Casting" visible={this.state.displayBasic2} style={{width: '50vw'}} onHide={() => this.onHide('displayBasic2')} blockScroll footer={this.renderFooter('displayBasic2')}>
-                        Puzo was first to show interest in having Marlon Brando portray Don Vito Corleone by sending a letter to Brando in which he stated Brando was the "only actor who can play the Godfather." Despite Puzo's wishes, the executives at Paramount were against having Brando, partly due to the poor performance of his recent films and also his short temper. Coppola favored Brando or Laurence Olivier for the role, but Olivier's agent refused the role claiming Olivier was sick; however, Olivier went on to star in Sleuth later that year. The studio mainly pushed for Ernest Borgnine to receive the part. Other considerations were George C. Scott, Richard Conte, Anthony Quinn, and Orson Welles.
-                        <br/><br/>
-                        After months of debate between Coppola and Paramount over Brando, the two finalists for the role were Borgnine and Brando, the latter of whom Paramount president Stanley Jaffe required to perform a screen test. Coppola did not want to offend Brando and stated that he needed to test equipment in order to set up the screen test at Brando's California residence. For make-up, Brando stuck cotton balls in his cheeks, put shoe polish in his hair to darken it, and rolled his collar. Coppola placed Brando's audition tape in the middle of the videos of the audition tapes as the Paramount executives watched them. The executives were impressed with Brando's efforts and allowed Coppola to cast Brando for the role if Brando accepted a lower salary and put up a bond to ensure he would not cause any delays in production. Brando earned $1.6 million from a net participation deal.
-                        <br/><br/>
-                        From the start of production, Coppola wanted Robert Duvall to play the part of Tom Hagen. After screen testing several other actors, Coppola eventually got his wish and Duvall was awarded the part of Tom Hagen. Al Martino, a then famed singer in nightclubs, was notified of the character Johnny Fontane by a friend who read the eponymous novel and felt Martino represented the character of Johnny Fontane. Martino then contacted producer Albert S. Ruddy, who gave him the part. However, Martino was stripped of the part after Coppola became director and then awarded the role to singer Vic Damone. According to Martino, after being stripped of the role, he went to Russell Bufalino, his godfather and a crime boss, who then orchestrated the publication of various news articles that claimed Coppola was unaware of Ruddy giving Martino the part. Damone eventually dropped the role because he did not want to provoke the mob, in addition to being paid too little. Ultimately, the part of Johnny Fontane was given to Martino.
-                        <br/><br/>
-                        Robert De Niro originally was given the part of Paulie Gatto. A spot in The Gang That Couldn't Shoot Straight opened up after Al Pacino quit the project in favor of The Godfather, which led De Niro to audition for the role and leave The Godfather after receiving the part. After De Niro quit, Johnny Martino was given the role of Gatto. Coppola cast Diane Keaton for the role of Kay Adams due to her reputation for being eccentric. John Cazale was given the part of Fredo Corleone after Coppola saw him perform in an Off Broadway production. Gianni Russo was given the role of Carlo Rizzi after he was asked to perform a screen test in which he acted out the fight between Rizzi and Connie.
-                        <br/><br/>
-                        Nearing the start of filming on March 29, Michael Corleone had yet to be cast. Paramount executives wanted a popular actor, either Warren Beatty or Robert Redford. Producer Robert Evans wanted Ryan O'Neal to receive the role in part due to his recent success in Love Story. Pacino was Coppola's favorite for the role as he could picture him roaming the Sicilian countryside, and wanted an unknown actor who looked like an Italian-American. However, Paramount executives found Pacino to be too short to play Michael. Dustin Hoffman, Martin Sheen, and James Caan also auditioned. Caan was well received by the Paramount executives and was given the part of Michael initially, while the role of Sonny Corleone was awarded to Carmine Caridi. Coppola still pushed for Pacino to play Michael after the fact and Evans eventually conceded, allowing Pacino to have the role of Michael as long as Caan played Sonny. Evans preferred Caan over Caridi because Caan was seven inches shorter than Caridi, which was much closer to Pacino's height. Despite agreeing to play Michael Corleone, Pacino was contracted to star in MGM's The Gang That Couldn't Shoot Straight, but the two studios agreed on a settlement and Pacino was signed by Paramount three weeks before shooting began.
-                        <br/><br/>
-                        Coppola gave several roles in the film to family members. He gave his sister, Talia Shire, the role of Connie Corleone. His daughter Sofia played Michael Francis Rizzi, Connie's and Carlo's newborn son. Carmine Coppola, his father, appeared in the film as an extra playing a piano during a scene. Coppola's wife, mother, and two sons all appeared as extras in the picture. Several smaller roles, like Luca Brasi, were cast after the filming had started.
-                        <br/><br/>
-                    </Dialog>
-
-                    <h3>BlockScroll</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayBlockScroll')} />
-                    <Dialog header="Godfather I" visible={this.state.displayBlockScroll} style={{width: '50vw'}} onHide={() => this.onHide('displayBlockScroll')} blockScroll
-                        footer={this.renderFooter('displayBlockScroll')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <h3>Without Modal</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayModal')} />
-                    <Dialog header="Godfather I" visible={this.state.displayModal} style={{width: '50vw'}} onHide={() => this.onHide('displayModal')} modal={false}
-                        footer={this.renderFooter('displayModal')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <h3>Maximizable</h3>
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.onClick('displayMaximizable')} />
-                    <Dialog header="Godfather I" visible={this.state.displayMaximizable} style={{width: '50vw'}} onHide={() => this.onHide('displayMaximizable')} maximizable blockScroll
-                        footer={this.renderFooter('displayMaximizable')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-
-                    <h3>Position</h3>
-                    <div className="p-grid p-dir-col">
-                        <div className="p-col">
-                            <Button label="Left" icon="pi pi-arrow-right" onClick={() => this.onClick('displayPosition', 'left')} className="p-button-warning" />
-                            <Button label="Right" icon="pi pi-arrow-left" onClick={() => this.onClick('displayPosition', 'right')} className="p-button-warning" />
-                        </div>
-                        <div className="p-col">
-                            <Button label="Top" icon="pi pi-arrow-down" onClick={() => this.onClick('displayPosition', 'top')} className="p-button-warning" />
-                            <Button label="TopLeft" icon="pi pi-arrow-down" onClick={() => this.onClick('displayPosition', 'topleft')} className="p-button-warning" />
-                            <Button label="TopRight" icon="pi pi-arrow-down" onClick={() => this.onClick('displayPosition', 'topright')} className="p-button-warning" />
-                        </div>
-                        <div className="p-col">
-                            <Button label="Bottom" icon="pi pi-arrow-up" onClick={() => this.onClick('displayPosition', 'bottom')} className="p-button-warning" />
-                            <Button label="BottomLeft" icon="pi pi-arrow-up" onClick={() => this.onClick('displayPosition', 'bottomleft')} className="p-button-warning" />
-                            <Button label="BottomRight" icon="pi pi-arrow-up" onClick={() => this.onClick('displayPosition', 'bottomright')} className="p-button-warning" />
-                        </div>
-                    </div>
-
-                    <Dialog header="Godfather I" visible={this.state.displayPosition} style={{width: '50vw'}} onHide={() => this.onHide('displayPosition')}
-                        position={this.state.position} blockScroll footer={this.renderFooter('displayPosition')}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                            His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                            Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                            kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Dialog>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/dropdown/DropdownDemo.js b/src/showcase/dropdown/DropdownDemo.js
deleted file mode 100644
index b0210ba808..0000000000
--- a/src/showcase/dropdown/DropdownDemo.js
+++ /dev/null
@@ -1,711 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Dropdown} from '../../components/dropdown/Dropdown';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class DropdownDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            city: null,
-            car: null,
-            car2: 'BMW',
-            cities: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
-            ],
-            cars: [
-                {label: 'Audi', value: 'Audi'},
-                {label: 'BMW', value: 'BMW'},
-                {label: 'Fiat', value: 'Fiat'},
-                {label: 'Honda', value: 'Honda'},
-                {label: 'Jaguar', value: 'Jaguar'},
-                {label: 'Mercedes', value: 'Mercedes'},
-                {label: 'Renault', value: 'Renault'},
-                {label: 'VW', value: 'VW'},
-                {label: 'Volvo', value: 'Volvo'}
-            ]
-        };
-
-        this.onCityChange = this.onCityChange.bind(this);
-        this.onCarChange = this.onCarChange.bind(this);
-        this.onCarChange2 = this.onCarChange2.bind(this);
-    }
-
-    onCityChange(e) {
-        this.setState({city: e.value});
-    }
-
-    onCarChange(e) {
-        this.setState({car: e.value});
-    }
-
-    onCarChange2(e) {
-        this.setState({car2: e.value});
-    }
-
-    carTemplate(option) {
-        if(!option.value) {
-            return option.label;
-        }
-        else {
-            var logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-            return (
-                <div className="p-clearfix">
-                    <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} width="24"/>
-                    <span style={{float:'right',margin:'.5em .25em 0 0'}}>{option.label}</span>
-                </div>
-            );
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Dropdown</h1>
-                        <p>Dropdown is used to select an item from a collection of options.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("dropdown")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Dropdown value={this.state.city} options={this.state.cities} ariaLabel="Test" onChange={this.onCityChange} placeholder="Select a City" optionLabel="name" style={{width: '12em'}}/>
-                    <div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city.name : 'No city selected'}</div>
-
-                    <h3>Editable</h3>
-                    <Dropdown value={this.state.car} options={this.state.cars} onChange={this.onCarChange}  style={{width: '12em'}}
-                              editable={true} placeholder="Select a Brand" />
-                    <div style={{marginTop: '.5em'}}>{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}</div>
-
-                    <h3>Advanced</h3>
-                    <Dropdown value={this.state.car2} options={this.state.cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate}  style={{width: '12em'}}
-                              filter={true} filterPlaceholder="Select Car" filterBy="label,value" showClear={true}/>
-                    <div style={{marginTop: '.5em'}}>{this.state.car2 ? 'Selected Car: ' + this.state.car2 : 'No car selected'}</div>
-                </div>
-
-                <DropdownDoc />
-            </div>
-        );
-    }
-}
-
-class DropdownDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Dropdown} from 'primereact/dropdown';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>SelectButton is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
-                        of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
-                        whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. In addition,
-                        options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>
-
-                        <p><b>Options as SelectItems</b></p>
-                        <CodeHighlight className="language-javascript">
-                            {`
-const citySelectItems = [
-    {label: 'New York', value: 'NY'},
-    {label: 'Rome', value: 'RM'},
-    {label: 'London', value: 'LDN'},
-    {label: 'Istanbul', value: 'IST'},
-    {label: 'Paris', value: 'PRS'}
-];
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Dropdown value={this.state.city} options={citySelectItems} onChange={(e) => {this.setState({city: e.value})}} placeholder="Select a City"/>
-
-`}
-                        </CodeHighlight>
-
-                        <p><b>Options as any type</b></p>
-                        <CodeHighlight className="language-javascript">
-                            {`
-const cities = [
-    {name: 'New York', code: 'NY'},
-    {name: 'Rome', code: 'RM'},
-    {name: 'London', code: 'LDN'},
-    {name: 'Istanbul', code: 'IST'},
-    {name: 'Paris', code: 'PRS'}
-];
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Dropdown optionLabel="name" value={this.state.city} options={cities} onChange={(e) => {this.setState({city: e.value})}} placeholder="Select a City"/>
-<Dropdown optionLabel="name" optionValue="code" value={this.state.city} options={cities} onChange={(e) => {this.setState({city: e.value})}} placeholder="Select a City"/>
-
-`}
-                        </CodeHighlight>
-                        <p>When <i>optionValue</i> is not defined, value of an option refers to the option object itself.</p>
-
-                        <h3>Placeholder</h3>
-                        <p>Common pattern is providing an empty option as the placeholder when using native selects, however Dropdown has built-in support using the placeholder option so it is suggested to use it instead of creating an empty option.</p>
-
-                        <h3>Filtering</h3>
-                        <p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property. By default filtering is done against
-                            label of the items and <i>filterBy</i> property is available to choose one or more properties of the options. In addition <i>filterMatchMode</i> can be utilized
-                            to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Dropdown value={this.state.car} options={cars} onChange={(e) => {this.setState({city: e.value})}} filter={true} filterPlaceholder="Select Car" filterBy="label,value" placeholder="Select a Car"/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Custom Content</h3>
-                        <p>Label of an option is used as the display text of an item by default, for custom content support define an <i>itemTemplate</i> function that gets the option instance as a parameter and returns the content.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Dropdown value={this.state.car} options={cars} onChange={(e) => {this.setState({city: e.value})}} itemTemplate={this.carTemplate} placeholder="Select a Car"/>
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-carTemplate(option) {
-    if (!option.value) {
-        return option.label;
-    }
-    else {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} width="24"/>
-                <span style={{float:'right', margin:'.5em .25em 0 0'}}>{option.label}</span>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>SelectItem API</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>label</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Label of the option.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Value of the option.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>ClassName of the option.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>title</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Tooltip text of the option. (Not supported)</td>
-                                    </tr>
-                                    <tr>
-                                        <td>disabled</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Whether the option is disabled or not.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>name</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the input element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Value of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>options</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of selectitems to display as the available options.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>optionLabel</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the label field of an option when arbitrary objects are used as options instead of SelectItems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>optionValue</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>itemTemplate</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Function that gets the option and returns the content.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>scrollHeight</td>
-                                        <td>string</td>
-                                        <td>200px</td>
-                                        <td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filter</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When specified, displays an input field to filter the items on keyup.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterBy</td>
-                                        <td>string</td>
-                                        <td>label</td>
-                                        <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterMatchMode</td>
-                                        <td>string</td>
-                                        <td>contains</td>
-                                        <td>Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterPlaceholder</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Placeholder text to show when filter input is empty.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterLocale</td>
-                                        <td>string</td>
-                                        <td>undefined</td>
-                                        <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>editable</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, custom value instead of predefined options can be entered using the editable input field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>placeholder</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Default text to display when no option is selected.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>required</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>disabled</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the component should be disabled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>DOM element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the dialog should be mounted.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tabIndex</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Index of the element in tabbing order.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>autoFocus</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the component should automatically get focus on load.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterInputAutoFocus</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>When the panel is opened, it specifies that the filter input should focus automatically.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>panelClassName</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the overlay panel element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>panelStyle</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the overlay panel element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>dataKey</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>A property to uniquely match the value in options for better performance.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>inputId</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Identifier of the focusable input.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>showClear</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When enabled, a clear icon is displayed to clear the value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>maxLength</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Maximum number of characters to be typed on an editable input.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>ariaLabel</td>
-                                        <td>string</td>
-                                        <td>false</td>
-                                        <td>Used to define a string that labels the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>ariaLabelledBy</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Contains the element IDs of labels.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onChange</td>
-                                        <td>event.originalEvent: Original event <br />
-                                            event.value: Value of the checkbox </td>
-                                        <td>Callback to invoke on value change</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onMouseDown</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke to when a mouse button is pressed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onContextMenu</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke on right-click.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onFocus</td>
-                                        <td>event: Browser event.</td>
-                                        <td>Callback to invoke when the element receives focus.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onBlur</td>
-                                        <td>event: Browser event.</td>
-                                        <td>Callback to invoke when the element loses focus.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Methods</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>checkValidity</td>
-                                        <td>-</td>
-                                        <td>Checks whether the native hidden select element has any constraints and returns a boolean for the result.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>resetFilter</td>
-                                        <td>-</td>
-                                        <td>Reset the options filter.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-dropdown</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-label</td>
-                                    <td>Element to display label of selected option.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-trigger</td>
-                                    <td>Icon element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-panel</td>
-                                    <td>Icon element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-items-wrapper</td>
-                                    <td>Wrapper element of items list.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-items</td>
-                                    <td>List element of items.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-item</td>
-                                    <td>An item in the list.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-filter-container</td>
-                                    <td>Container of filter input.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-filter</td>
-                                    <td>Filter element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-dropdown-open</td>
-                                    <td>Container element when overlay is visible.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/dropdown" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Dropdown} from 'primereact/dropdown';
-
-export class DropdownDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            city: null,
-            car: null,
-            car2: 'BMW',
-            cities: [
-                {name: 'New York', code: 'NY'},
-                {name: 'Rome', code: 'RM'},
-                {name: 'London', code: 'LDN'},
-                {name: 'Istanbul', code: 'IST'},
-                {name: 'Paris', code: 'PRS'}
-            ],
-            cars: [
-                {label: 'Audi', value: 'Audi'},
-                {label: 'BMW', value: 'BMW'},
-                {label: 'Fiat', value: 'Fiat'},
-                {label: 'Honda', value: 'Honda'},
-                {label: 'Jaguar', value: 'Jaguar'},
-                {label: 'Mercedes', value: 'Mercedes'},
-                {label: 'Renault', value: 'Renault'},
-                {label: 'VW', value: 'VW'},
-                {label: 'Volvo', value: 'Volvo'}
-            ]
-        };
-
-        this.onCityChange = this.onCityChange.bind(this);
-        this.onCarChange = this.onCarChange.bind(this);
-        this.onCarChange2 = this.onCarChange2.bind(this);
-    }
-
-    onCityChange(e) {
-        this.setState({city: e.value});
-    }
-
-    onCarChange(e) {
-        this.setState({car: e.value});
-    }
-
-    onCarChange2(e) {
-        this.setState({car2: e.value});
-    }
-
-    carTemplate(option) {
-        if(!option.value) {
-            return option.label;
-        }
-        else {
-            var logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-            return (
-                <div className="p-clearfix">
-                    <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} width="24"/>
-                    <span style={{float:'right',margin:'.5em .25em 0 0'}}>{option.label}</span>
-                </div>
-            );
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Dropdown</h1>
-                        <p>Dropdown is used to select an item from a collection of options.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Dropdown value={this.state.city} options={this.state.cities} ariaLabel="Test" onChange={this.onCityChange} placeholder="Select a City" optionLabel="name" style={{width: '12em'}}/>
-                    <div style={{marginTop: '.5em'}}>{this.state.city ? 'Selected City: ' + this.state.city.name : 'No city selected'}</div>
-
-                    <h3>Editable</h3>
-                    <Dropdown value={this.state.car} options={this.state.cars} onChange={this.onCarChange}  style={{width: '12em'}}
-                              editable={true} placeholder="Select a Brand" />
-                    <div style={{marginTop: '.5em'}}>{this.state.car ? 'Selected Car: ' + this.state.car : 'No car selected'}</div>
-
-                    <h3>Advanced</h3>
-                    <Dropdown value={this.state.car2} options={this.state.cars} onChange={this.onCarChange2} itemTemplate={this.carTemplate}  style={{width: '12em'}}
-                              filter={true} filterPlaceholder="Select Car" filterBy="label,value" showClear={true}/>
-                    <div style={{marginTop: '.5em'}}>{this.state.car2 ? 'Selected Car: ' + this.state.car2 : 'No car selected'}</div>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/editor/EditorDemo.js b/src/showcase/editor/EditorDemo.js
deleted file mode 100644
index 0f08b080a5..0000000000
--- a/src/showcase/editor/EditorDemo.js
+++ /dev/null
@@ -1,321 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Editor} from "../../components/editor/Editor";
-import {Button} from "../../components/button/Button";
-
-export class EditorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            text1 : '<div>Hello World!</div><div>PrimeReact <b>Editor</b> Rocks</div><div><br></div>',
-            text2 : ''
-        };
-    }
-
-    renderHeader() {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold"></button>
-                <button className="ql-italic" aria-label="Italic"></button>
-                <button className="ql-underline" aria-label="Underline"></button>
-            </span>
-        );
-    }
-
-    render() {
-        const header = this.renderHeader();
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Editor</h1>
-                        <p>Editor is rich text editor component based on Quill.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("editor")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Default</h3>
-                    <Editor style={{height:'320px'}} value={this.state.text1} onTextChange={(e)=>this.setState({text1:e.htmlValue})}/>
-                    <p>Value: {this.state.text1 ||'empty'}</p>
-                    <Button label="Clear" icon="pi pi-times" onClick={()=> this.setState({text1:''})}/>
-
-                    <hr/>
-
-                    <h3 className="first">Custom Toolbar</h3>
-                    <Editor headerTemplate={header} style={{height:'320px'}} value={this.state.text2} onTextChange={(e)=>this.setState({text2:e.htmlValue})}/>
-                    <p>Value: {this.state.text2 ||'empty'}</p>
-                    <Button label="Clear" icon="pi pi-times" onClick={() => this.setState({text2:''})}/>
-                </div>
-
-                <EditorDoc/>
-
-            </div>
-        );
-    }
-}
-
-class EditorDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Editor} from 'primereact/editor';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Editor is used as a controlled component with <i>value</i> and <i>onTextChange</i> properties.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Editor style={{height:'320px'}} value={this.state.text} onTextChange={(e) => this.setState({text: e.htmlValue})} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Toolbar</h3>
-                        <p>Editor provides a default toolbar with common options, to customize it define your elements with the <i>headerTemplate</i>. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-const header = (
-    <span className="ql-formats">
-        <button className="ql-bold" aria-label="Bold"></button>
-        <button className="ql-italic" aria-label="Italic"></button>
-        <button className="ql-underline" aria-label="Underline"></button>
-    </span>
-);
-
-<Editor style={{height:'320px'}} value={this.state.text} onTextChange={(e) => this.setState({text: e.htmlValue})} headerTemplate={header}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Value of the content.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the container.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the container.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>placeholder</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Placeholder text to show when editor is empty.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>readOnly</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Whether to instantiate the editor to read-only mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>modules</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>formats</td>
-                                        <td>string[]</td>
-                                        <td>null</td>
-                                        <td>Whitelist of formats to display, see <a href="http://quilljs.com/docs/formats/">here</a> for available options.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>headerTemplate</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Style and modules of the toolbar.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>onTextChange</td>
-                                    <td>event.delta: Representation of the change.<br/>
-                                        event.source: Source of change. Will be either "user" or "api".<br/>
-                                        event.htmlValue: Current value as html.<br/>
-                                        event.textValue: Current value as text.<br/></td>
-                                    <td>Callback to invoke when text of editor changes.</td>
-                                </tr>
-                                <tr>
-                                    <td>onSelectionChange</td>
-                                    <td>event.range: Object with index and length keys indicating where the selection exists.<br/>
-                                        event.oldRange: Object with index and length keys indicating where the previous selection was.<br/>
-                                        event.source: Source of change. Will be either "user" or "api".</td>
-                                    <td>Callback to invoke when selected text of editor changes.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <p>Refer to <a href="http://beta.quilljs.com/docs/api/#events">Quill documentation</a> for more information.</p>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-editor-container</td>
-                                    <td>Container element</td>
-                                </tr>
-                                <tr>
-                                    <td>p-editor-toolbar</td>
-                                    <td>Toolbar of the editor</td>
-                                </tr>
-                                <tr>
-                                    <td>p-editor-content</td>
-                                    <td>Editable area</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-
-                        <h3>Dependencies</h3>
-                        <p><a href="http://quilljs.com/">Quill</a> Editor 1.3+.</p>
-                        <p>Resources of quill needs to be added to your application.</p>
-                        <CodeHighlight className="language-javascript">
-                            {`
-npm install quill --save
-
-`}
-                            </CodeHighlight>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/editor" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Editor} from "primereact/editor";
-import {Button} from "primereact/button";
-
-export class EditorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            text1 : '<div>Hello World!</div><div>PrimeReact <b>Editor</b> Rocks</div><div><br></div>',
-            text2 : ''
-        };
-    }
-
-    renderHeader() {
-        return (
-            <span className="ql-formats">
-                <button className="ql-bold" aria-label="Bold"></button>
-                <button className="ql-italic" aria-label="Italic"></button>
-                <button className="ql-underline" aria-label="Underline"></button>
-            </span>
-        );
-    }
-
-    render() {
-        const header = this.renderHeader();
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Editor</h1>
-                        <p>Editor is rich text editor component based on Quill.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Default</h3>
-                    <Editor style={{height:'320px'}} value={this.state.text1} onTextChange={(e)=>this.setState({text1:e.htmlValue})}/>
-                    <p>Value: {this.state.text1 ||'empty'}</p>
-                    <Button label="Clear" icon="pi pi-times" onClick={()=> this.setState({text1:''})}/>
-
-                    <hr/>
-
-                    <h3 className="first">Custom Toolbar</h3>
-                    <Editor headerTemplate={header} style={{height:'320px'}} value={this.state.text2} onTextChange={(e)=>this.setState({text2:e.htmlValue})}/>
-                    <p>Value: {this.state.text2 ||'empty'}</p>
-                    <Button label="Clear" icon="pi pi-times" onClick={() => this.setState({text2:''})}/>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/fieldset/FieldsetDemo.js b/src/showcase/fieldset/FieldsetDemo.js
deleted file mode 100644
index 13db0494f6..0000000000
--- a/src/showcase/fieldset/FieldsetDemo.js
+++ /dev/null
@@ -1,286 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Fieldset} from '../../components/fieldset/Fieldset';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class FieldsetDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Fieldset</h1>
-                        <p>Fieldset is a grouping component with a content toggle feature.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("fieldset")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Fieldset legend="Godfather I">
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Fieldset>
-
-                    <br />
-
-                    <Fieldset legend="Godfather I" toggleable={true}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Fieldset>
-                </div>
-                <FieldsetDoc></FieldsetDoc>
-            </div>
-        )
-    }
-}
-
-export class FieldsetDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Fieldset} from 'primereact/fieldset';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Panel is a container component that accepts content as its children.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Fieldset legend="Godfather I">
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</Fieldset>
-
-`}
-</CodeHighlight>
-
-            <p>Instead of simple strings, <i>legend</i> propery also can be used to provide custom content as JSX.</p>
-
-             <h3>Toggleable</h3>
-             <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option. A toggleable fieldset can either be used as a Controlled or Uncontrolled component.</p>
-
-             <p>In controlled mode, <i>collapsed</i> and <i>onToggle</i> properties need to be defined to control the collapsed state.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Fieldset legend="Godfather I" toggleable={true} collapsed={this.state.panelCollapsed} onToggle={(e) => this.setState({panelCollapsed: e.value})}>
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</Fieldset>
-
-`}
-</CodeHighlight>
-
- <p>In uncontrolled mode, only <i>toggleable</i> property needs to be enabled. Initial state can be still be provided using the <i>collapsed</i> property in uncontrolled mode however
-            it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the collapsed state, prefer to use the component as controlled.</p>
-
-            <CodeHighlight className="language-jsx">
-{`
-<Fieldset legend="Godfather I" toggleable={true} >
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</Fieldset>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>legend</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Header text of the fieldset.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, content can toggled by clicking the legend.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsed</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines the default visibility state of the content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onCollapse</td>
-                            <td>event.originalEvent: Browser event </td>
-                            <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
-                        </tr>
-                        <tr>
-                            <td>onExpand</td>
-                            <td>event.originalEvent: Browser event </td>
-                            <td>Callback to invoke when a tab gets expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>onToggle</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.value: Collapsed state as a boolean
-                            </td>
-                            <td>Callback to invoke when a tab gets expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>onClick</td>
-                            <td>event Browser event </td>
-                            <td>Callback to invoke when fieldset is clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-fieldset</td>
-                            <td>Fieldset element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-toggleable</td>
-                            <td>Toggleable fieldset element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-legend</td>
-                            <td>Legend element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fieldset-content</td>
-                            <td>Content element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/fieldset" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Fieldset} from 'primereact/fieldset';
-
-export class FieldsetDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Fieldset</h1>
-                        <p>Fieldset is a grouping component with a content toggle feature.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Fieldset legend="Godfather I">
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Fieldset>
-
-                   <Fieldset legend="Godfather I" toggleable={true}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Fieldset>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/fileupload/FileUploadDemo.js b/src/showcase/fileupload/FileUploadDemo.js
deleted file mode 100644
index d5d99f345f..0000000000
--- a/src/showcase/fileupload/FileUploadDemo.js
+++ /dev/null
@@ -1,503 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Growl} from '../../components/growl/Growl';
-import {FileUpload} from '../../components/fileupload/FileUpload';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class FileUploadDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.onUpload = this.onUpload.bind(this);
-        this.onBasicUpload = this.onBasicUpload.bind(this);
-        this.onBasicUploadAuto = this.onBasicUploadAuto.bind(this);
-    }
-
-    onUpload(event) {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
-    }
-
-    onBasicUpload(event) {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode'});
-    }
-
-    onBasicUploadAuto(event) {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'File Uploaded with Auto Mode'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>FileUpload</h1>
-                        <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("fileUpload")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Advanced</h3>
-                    <FileUpload name="demo[]" url="./upload.php" onUpload={this.onUpload}
-                                multiple={true} accept="image/*" maxFileSize={1000000} />
-
-                    <h3>Basic</h3>
-                    <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize={1000000} onUpload={this.onBasicUpload} />
-
-                    <h3>Basic with Auto</h3>
-                    <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize={1000000} onUpload={this.onBasicUploadAuto} auto={true} chooseLabel="Browse" />
-
-                    <Growl ref={(el) => { this.growl = el; }}></Growl>
-                </div>
-
-                <FileUploadDoc></FileUploadDoc>
-            </div>
-        )
-    }
-}
-
-export class FileUploadDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {FileUpload} from 'primereact/fileupload';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>FileUpload requires a <i>url</i> property as the upload target and a <i>name</i> to identify the files at backend.</p>
-<CodeHighlight className="language-jsx">
-{`
-<FileUpload name="demo" url="./upload"></FileUpload>
-
-`}
-</CodeHighlight>
-
-            <h3>Multiple Uploads</h3>
-            <p>Only one file can be selected at a time by default, to allow selecting multiple files at once enable <i>multiple</i> option.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<FileUpload name="demo[]" url="./upload" multiple={true} />
-
-`}
-</CodeHighlight>
-
-            <h3>DragDrop</h3>
-            <p>File selection can also be done by dragging and dropping from the filesystem to the content section of the component.</p>
-
-            <h3>Auto Uploads</h3>
-            <p>When <i>auto</i> property is enabled, upload begins as soon as file selection is completed or a file is dropped on the drop area.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<FileUpload name="demo" url="./upload" auto={true} />
-
-`}
-</CodeHighlight>
-
-            <h3>File Types</h3>
-            <p>Selectable file types can be restricted with <i>accept</i> property, example below only allows images to be uploaded. Read more about other possible values <a href="https://www.w3schools.com/tags/att_input_accept.asp"> here</a>.</p>
-<CodeHighlight className="language-jsx">
-{`
-<FileUpload name="demo[]" url="./upload" multiple={true} accept="image/*" />
-
-`}
-</CodeHighlight>
-
-            <h3>File Size</h3>
-            <p>Maximium file size can be restricted using <i>maxFileSize</i> property defined in bytes.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<FileUpload name="demo" url="./upload" maxFileSize="1000000" />
-
-`}
-</CodeHighlight>
-
-            <p>In order to customize the default messages use <i>invalidFileSizeMessageSummary</i> and <i>invalidFileSizeMessageDetail</i> options. In summary messages, {0} placeholder refers to the filename and in detail message, the file size.</p>
-            <ul>
-                <li>
-                    invalidFileSizeMessageSummary: '{0}: Invalid file size, '
-                </li>
-                <li>
-                    invalidFileSizeMessageDetail: string = 'maximum upload size is {0}.'
-                </li>
-            </ul>
-
-            <h3>Request Customization</h3>
-            <p>XHR request to upload the files can be customized using the onBeforeUpload callback that passes the xhr instance and FormData object as event parameters.</p>
-
-            <h3>Basic UI</h3>
-            <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<FileUpload name="demo" url="./upload" mode="basic" />
-
-`}
-</CodeHighlight>
-
-            <h3>Custom Upload</h3>
-            <p>Uploading implementation can be overriden by enabling customUpload property and defining a custom upload handler event.</p>
-<CodeHighlight className="language-jsx">
-{`
-<FileUpload name="demo[]" url="./upload" customUpload={true} uploadHandler={this.myUploader} />
-
-`}
-</CodeHighlight>
-<CodeHighlight className="language-javascript">
-{`
-myUploader(event) {
-    //event.files == files to upload
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the request parameter to identify the files at backend.</td>
-                        </tr>
-                        <tr>
-                            <td>url</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Remote url to upload the files.</td>
-                        </tr>
-                        <tr>
-                            <td>mode</td>
-                            <td>string</td>
-                            <td>advanced</td>
-                            <td>Defines the UI of the component, possible values are "advanced" and "basic".</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Used to select multiple files at once from file dialog.</td>
-                        </tr>
-                        <tr>
-                            <td>accept</td>
-                            <td>string</td>
-                            <td>false</td>
-                            <td>Pattern to restrict the allowed file types such as "image/*".</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Disables the upload functionality.</td>
-                        </tr>
-                        <tr>
-                            <td>auto</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, upload begins automatically after selection is completed.</td>
-                        </tr>
-                        <tr>
-                            <td>maxFileSize</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum file size allowed in bytes.</td>
-                        </tr>
-                        <tr>
-                            <td>invalidFileSizeMessageSummary</td>
-                            <td>string</td>
-                            <td>"&#123;0&#125;: Invalid file size, "</td>
-                            <td>Summary message of the invalid fize size.</td>
-                        </tr>
-                        <tr>
-                            <td>invalidFileSizeMessageDetail</td>
-                            <td>string</td>
-                            <td>"maximum upload size is &#123;0&#125;."</td>
-                            <td>Detail message of the invalid fize size.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>withCredentials</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates.</td>
-                        </tr>
-                        <tr>
-                            <td>previewWidth</td>
-                            <td>number</td>
-                            <td>50</td>
-                            <td>Width of the image thumbnail in pixels.</td>
-                        </tr>
-                        <tr>
-                            <td>chooseLabel</td>
-                            <td>string</td>
-                            <td>Choose</td>
-                            <td>Label of the choose button.</td>
-                        </tr>
-                        <tr>
-                            <td>uploadLabel</td>
-                            <td>string</td>
-                            <td>Upload</td>
-                            <td>Label of the upload button.</td>
-                        </tr>
-                        <tr>
-                            <td>cancelLabel</td>
-                            <td>string</td>
-                            <td>Cancel</td>
-                            <td>Label of the cancel button.</td>
-                        </tr>
-                        <tr>
-                            <td>customUpload</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to use the default upload or a manual implementation defined in uploadHandler callback.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onBeforeUpload</td>
-                            <td>event.xhr: XmlHttpRequest instance. <br/>
-                                event.formData: FormData object.</td>
-                            <td>Callback to invoke before file upload begins to customize the request
-                                such as post parameters before the files.</td>
-                        </tr>
-						<tr>
-                            <td>onBeforeSend</td>
-                            <td>event.xhr: XmlHttpRequest instance. <br/>
-                                event.formData: FormData object.</td>
-                            <td>Callback to invoke before file send begins to customize the request
-                                such as adding headers.</td>
-                        </tr>
-                        <tr>
-                            <td>onUpload</td>
-                            <td>event.xhr: XmlHttpRequest instance.<br />
-                                event.files: Uploaded files.</td>
-                            <td>Callback to invoke when file upload is complete.</td>
-                        </tr>
-                        <tr>
-                            <td>onError</td>
-                            <td>event.xhr: XmlHttpRequest instance.<br />
-                                event.files: Files that are not uploaded.</td>
-                            <td>Callback to invoke if file upload fails.</td>
-                        </tr>
-                        <tr>
-                            <td>onClear</td>
-                            <td>-.</td>
-                            <td>Callback to invoke when files in queue are removed without uploading.</td>
-                        </tr>
-                        <tr>
-                            <td>onSelect</td>
-                            <td>event.originalEvent: Original browser event. <br />
-                                event.files: List of selected files.</td>
-                            <td>Callback to invoke when file upload is complete.</td>
-                        </tr>
-                        <tr>
-                            <td>onProgress</td>
-                            <td>event.originalEvent: Original browser event. <br />
-                                event.progress: Calculated progress value.</td>
-                            <td>Callback to invoke when files are selected.</td>
-                        </tr>
-                        <tr>
-                            <td>onValidationFail</td>
-                            <td>file: Invalid file.</td>
-                            <td>Callback to invoke when a validation file fails.</td>
-                        </tr>
-                        <tr>
-                            <td>uploadHandler</td>
-                            <td>event.files: List of selected files.</td>
-                            <td>Callback to invoke in custom upload mode to upload the files manually.</td>
-                        </tr>
-                        <tr>
-                            <td>onRemove</td>
-                            <td>event.originalEvent: Original browser event. <br />
-                                event.file: Selected file.</td>
-                            <td>Callback to invoke when a file is removed without uploading using clear button of a file.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Methods</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>upload</td>
-                            <td>-</td>
-                            <td>Uploads the selected files.</td>
-                        </tr>
-                        <tr>
-                            <td>clear</td>
-                            <td>-</td>
-                            <td>Clears the files list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-fileupload</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-buttonbar</td>
-                            <td>Header containing the buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-fileupload-content</td>
-                            <td>Content section.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                 <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/fileupload" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                     <span>View on GitHub</span>
-                 </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Growl} from 'primereact/growl';
-import {FileUpload} from 'primereact/fileupload';;
-
-export class FileUploadDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.onUpload = this.onUpload.bind(this);
-        this.onBasicUpload = this.onBasicUpload.bind(this);
-        this.onBasicUploadAuto = this.onBasicUploadAuto.bind(this);
-    }
-
-    onUpload(event) {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'File Uploaded'});
-    }
-
-    onBasicUpload(event) {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode'});
-    }
-
-    onBasicUploadAuto(event) {
-        this.growl.show({severity: 'info', summary: 'Success', detail: 'File Uploaded with Auto Mode'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>FileUpload</h1>
-                        <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Advanced</h3>
-                    <FileUpload name="demo[]" url="./upload.php" onUpload={this.onUpload}
-                                multiple={true} accept="image/*" maxFileSize={1000000} />
-
-                    <h3>Basic</h3>
-                    <FileUpload mode="basic" name="demo[]" url="./upload.php" accept="image/*" maxFileSize={1000000} onUpload={this.onBasicUpload} />
-
-                    <h3>Basic with Auto</h3>
-                    <FileUpload mode="basic" name="demo[]" uurl="./upload.php" accept="image/*" maxFileSize={1000000} onUpload={this.onBasicUploadAuto} auto={true} chooseLabel="Browse" />
-
-                    <Growl ref={(el) => { this.growl = el; }}></Growl>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/flexgrid/FlexGridDemo.js b/src/showcase/flexgrid/FlexGridDemo.js
deleted file mode 100644
index da7c2aa3b2..0000000000
--- a/src/showcase/flexgrid/FlexGridDemo.js
+++ /dev/null
@@ -1,1549 +0,0 @@
-import React, {Component} from 'react';
-import {Button} from '../../components/button/Button';
-import {Panel} from '../../components/panel/Panel';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class FlexGridDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            columns: [0, 1, 2, 3, 4, 5]
-        };
-
-        this.addColumn = this.addColumn.bind(this);
-        this.removeColumn = this.removeColumn.bind(this);
-    }
-
-    addColumn() {
-        this.setState({
-            columns: [...this.state.columns, this.state.columns.length]
-        });
-    }
-
-    removeColumn() {
-        let cols = [...this.state.columns];
-        cols.splice(-1, 1);
-        this.setState({
-            columns: cols
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Flex Grid</h1>
-                        <p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. Flex Grid CSS is not included
-                            in PrimeReact as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> , a shared grid library between PrimeFaces, PrimeNG and PrimeReact projects.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("flexGrid")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation flexgrid-demo">
-                    <h3 className="first">Basic</h3>
-                    <div className="p-grid">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>Dynamic</h3>
-                    <Button type="button" icon="pi pi-plus" title="Add Column" onClick={this.addColumn} disabled={this.state.columns.length === 20} style={{marginRight: '.5em'}} />
-                    <Button type="button" icon="pi pi-minus" title="Remove Column" onClick={this.removeColumn} disabled={this.state.columns.length === 1} />
-
-                    <div className="p-grid" style={{marginTop: '.5em'}}>
-                        {
-                            this.state.columns.map(col =>
-                                <div key={col} className="p-col">
-                                    <div className="box">{col}</div>
-                                </div>
-                            )
-                        }
-                    </div>
-
-                    <h3>Reverse Direction</h3>
-                    <div className="p-grid p-dir-rev">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>Column Direction</h3>
-                    <div className="p-grid p-dir-col">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>Reverse Column Direction</h3>
-                    <div className="p-grid p-dir-col-rev">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>12 Column Grid</h3>
-                    <div className="p-grid">
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                    </div>
-
-                    <div className="p-grid">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <div className="p-grid">
-                        <div className="p-col-8">
-                            <div className="box">8</div>
-                        </div>
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                    </div>
-
-                    <h3>MultiLine</h3>
-                    <div className="p-grid">
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                    </div>
-
-                    <h3>Fixed Width Column</h3>
-                    <div className="p-grid">
-                        <div className="p-col-fixed" style={{width:'100px'}}>
-                            <div className="box">100px</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">auto</div>
-                        </div>
-                    </div>
-
-                    <h3>Responsive</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Start</h3>
-                    <div className="p-grid p-justify-start">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - End</h3>
-                    <div className="p-grid p-justify-end">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Center</h3>
-                    <div className="p-grid p-justify-center">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Between</h3>
-                    <div className="p-grid p-justify-between">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Around</h3>
-                    <div className="p-grid p-justify-around">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Even</h3>
-                    <div className="p-grid p-justify-even">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Start</h3>
-                    <div className="p-grid p-align-start vertical-container">
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - End</h3>
-                    <div className="p-grid p-align-end vertical-container">
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Center</h3>
-                    <div className="p-grid p-align-center vertical-container">
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Stretch</h3>
-                    <div className="p-grid p-align-stretch vertical-container">
-                        <div className="p-col">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Per Column</h3>
-                    <div className="p-grid vertical-container">
-                        <div className="p-col p-col-align-start">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col p-col-align-center">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col p-col-align-end">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Offset</h3>
-                    <div className="p-grid">
-                        <div className="p-col-6 p-offset-3">
-                            <div className="box">6</div>
-                        </div>
-                    </div>
-
-                    <div className="p-grid">
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col-4 p-offset-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Nested</h3>
-                    <div className="p-grid nested-grid">
-                        <div className="p-col-8">
-                            <div className="p-grid">
-                                <div className="p-col-6">
-                                    <div className="box">6</div>
-                                </div>
-                                <div className="p-col-6">
-                                    <div className="box">6</div>
-                                </div>
-                                <div className="p-col-12">
-                                    <div className="box">12</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Panel Integration</h3>
-                    <div className="p-grid">
-                        <div className="p-col">
-                            <Panel header="Godfather">
-                                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-                            </Panel>
-                        </div>
-                        <div className="p-col">
-                            <Panel header="Godfather">
-                                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-                            </Panel>
-                        </div>
-                        <div className="p-col">
-                            <Panel header="Godfather">
-                                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-                            </Panel>
-                        </div>
-                    </div>
-
-                    <h3>Sample Layout</h3>
-                    <div className="p-grid sample-layout">
-                        <div className="p-col-12 p-md-2">
-                            Menu
-                        </div>
-                        <div className="p-col-12 p-md-10 p-col-nogutter">
-                            <div className="p-col-12 p-col-nogutter">
-                                Top Bar
-                            </div>
-                            <div className="p-col-12">
-                                <div className="p-grid">
-                                    <div className="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
-                                        dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
-                                        In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
-                                    <div className="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
-                                        tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
-                                        at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
-                                        nulla nec, rutrum sapien.</div>
-                                    <div className="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
-                                        sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
-                                        Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
-                                        condimentum eget hendrerit sit amet.</div>
-
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 1" src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" style={{width:'100%'}} /></div>
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 2" src="http://github.com/showcase/resources/demo/images/galleria/galleria2.jpg" style={{width:'100%'}} /></div>
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 3" src="http://github.com/showcase/resources/demo/images/galleria/galleria3.jpg" style={{width:'100%'}} /></div>
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 4" src="http://github.com/showcase/resources/demo/images/galleria/galleria4.jpg" style={{width:'100%'}} /></div>
-
-                                    <div className="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
-                                        facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
-                                        neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
-                                    <div className="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
-                                        ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
-                                        pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12">
-                            Footer
-                        </div>
-                    </div>
-                </div>
-
-                <FlexGridDoc />
-            </div>
-        );
-    }
-}
-
-export class FlexGridDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation flexgrid-demo">
-                <TabView>
-                    <TabPanel header="Documentation">
-
-                    <h3>Getting Started</h3>
-                    <p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
-                    a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col">1</div>
-    <div className="p-col">2</div>
-    <div className="p-col">3</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid">
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">2</div>
-    </div>
-    <div className="p-col">
-        <div className="box">3</div>
-    </div>
-</div>
-
-                    <h3>Direction</h3>
-                    <p>Default direction is <b>row</b> and <i>p-dir-*</i> class at the container defines the other possible directions which can be <b>row reverse</b>, <b>column</b> and <b>column reverse</b></p>
-<CodeHighlight className="language-jsx">
-{`
-<!-- Row Reverse -->
-<div className="p-grid p-dir-rev">
-    <div className="p-col">1</div>
-    <div className="p-col">2</div>
-    <div className="p-col">3</div>
-</div>
-
-<!-- Column -->
-<div className="p-grid p-dir-col">
-    <div className="p-col">1</div>
-    <div className="p-col">2</div>
-    <div className="p-col">3</div>
-</div>
-
-<!-- Column Reverse -->
-<div className="p-grid p-dir-col-rev">
-    <div className="p-col">1</div>
-    <div className="p-col">2</div>
-    <div className="p-col">3</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid p-dir-rev">
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">2</div>
-    </div>
-    <div className="p-col">
-        <div className="box">3</div>
-    </div>
-</div>
-
-<div className="p-grid p-dir-col">
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">2</div>
-    </div>
-    <div className="p-col">
-        <div className="box">3</div>
-    </div>
-</div>
-
-<div className="p-grid p-dir-col-rev">
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">2</div>
-    </div>
-    <div className="p-col">
-        <div className="box">3</div>
-    </div>
-</div>
-                <h3>12 Column Grid</h3>
-                <p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.</p>
-
-                <p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col-4">4</div>
-    <div className="p-col">1 </div>
-    <div className="p-col">1 </div>
-    <div className="p-col">1 </div>
-    <div className="p-col">1 </div>
-    <div className="p-col">1 </div>
-    <div className="p-col">1 </div>
-    <div className="p-col">1 </div>
-    <div className="p-col">1 </div>
-</div>
-
-<div className="p-grid">
-    <div className="p-col-2">2</div>
-    <div className="p-col-6">6</div>
-    <div className="p-col-4">4</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid">
-    <div className="p-col-4">
-        <div className="box">4</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col">
-        <div className="box">1</div>
-    </div>
-</div>
-
-<div className="p-grid">
-    <div className="p-col-2">
-        <div className="box">2</div>
-    </div>
-    <div className="p-col-6">
-        <div className="box">6</div>
-    </div>
-    <div className="p-col-4">
-        <div className="box">4</div>
-    </div>
-</div>
-
-                    <h3>MultiLine</h3>
-                    <p>When the number of columns exceed 12, columns wrap to a new line.</p>
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col-6">6</div>
-    <div className="p-col-6">6</div>
-    <div className="p-col-6">6</div>
-    <div className="p-col-6">6</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid">
-    <div className="p-col-6">
-        <div className="box">6</div>
-    </div>
-    <div className="p-col-6">
-        <div className="box">6</div>
-    </div>
-    <div className="p-col-6">
-        <div className="box">6</div>
-    </div>
-    <div className="p-col-6">
-        <div className="box">6</div>
-    </div>
-</div>
-                    <h3>Fixed Width Column</h3>
-                    <p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col-fixed" style={{width:'100px'}}>Fixed</div>
-    <div className="p-col">Auto</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid">
-    <div className="p-col-fixed" style={{width:'100px'}}>
-        <div className="box">100px</div>
-    </div>
-    <div className="p-col">
-        <div className="box">auto</div>
-    </div>
-</div>
-                    <h3>Responsive</h3>
-                    <p>Responsive layout is achieved by applying breakpoint specific classes to the columns whereas <i>p-col-*</i> define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.</p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Prefix</th>
-                                    <th>Devices</th>
-                                    <th>Media Query</th>
-                                    <th>Example</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-sm-*</td>
-                                    <td>Small devices</td>
-                                    <td>min-width: 576px</td>
-                                    <td>p-sm-6, p-sm-4</td>
-                                </tr>
-                                <tr>
-                                    <td>p-md-*</td>
-                                    <td>Medium sized devices such as tablets</td>
-                                    <td>min-width: 768px</td>
-                                    <td>p-md-2, p-md-8</td>
-                                </tr>
-                                <tr>
-                                    <td>p-lg-*</td>
-                                    <td>Devices with large screen like desktops</td>
-                                    <td>min-width: 992px</td>
-                                    <td>p-lg-6, p-lg-12</td>
-                                </tr>
-                                <tr>
-                                    <td>p-xl-*</td>
-                                    <td>Big screen monitors</td>
-                                    <td>min-width: 1200px</td>
-                                    <td>p-xl-2, ui-xl-10</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col-12 p-md-6 p-lg-3">A</div>
-    <div className="p-col-12 p-md-6 p-lg-3">B</div>
-    <div className="p-col-12 p-md-6 p-lg-3">C</div>
-    <div className="p-col-12 p-md-6 p-lg-3">D</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid">
-    <div className="p-col-12 p-md-6 p-lg-3">
-        <div className="box">A</div>
-    </div>
-    <div className="p-col-12 p-md-6 p-lg-3">
-        <div className="box">B</div>
-    </div>
-    <div className="p-col-12 p-md-6 p-lg-3">
-        <div className="box">C</div>
-    </div>
-    <div className="p-col-12 p-md-6 p-lg-3">
-        <div className="box">D</div>
-    </div>
-</div>
-
-
-                        <h3>Horizontal Alignment</h3>
-                        <p><i>p-justify-*</i> classes are used on the container element to define the alignment along the main axis.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Class</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-justify-start (default)</td>
-                                        <td>Items are packed toward the start line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-justify-end</td>
-                                        <td>Items are packed toward to end line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-justify-center</td>
-                                        <td>Items are centered along the line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-justify-between</td>
-                                        <td>Items are evenly distributed in the line; first item is on the start line, last item on the end line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-justify-around</td>
-                                        <td>Items are evenly distributed in the line with equal space around them.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-justify-even</td>
-                                        <td>Items are distributed so that the spacing between any two items (and the space to the edges) is equal.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid p-justify-between">
-    <div className="p-col-2">2 </div>
-    <div className="p-col-1">1</div>
-    <div className="p-col-4">4</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid p-justify-between">
-    <div className="p-col-2">
-        <div className="box">2</div>
-    </div>
-    <div className="p-col-1">
-        <div className="box">1</div>
-    </div>
-    <div className="p-col-4">
-        <div className="box">4</div>
-    </div>
-</div>
-
-                        <h3>Vertical Alignment</h3>
-                        <p><i>p-align-*</i> classes are used on the container element to define the alignment along the cross axis.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Class</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-align-stretch (default)</td>
-                                        <td>Stretch to fill the container.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-align-start</td>
-                                        <td>Cross-start margin edge of the items is placed on the cross-start line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-align-end</td>
-                                        <td>Cross-end margin edge of the items is placed on the cross-end line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-align-center</td>
-                                        <td>Items are centered in the cross-axis</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-align-baseline</td>
-                                        <td>Items are aligned such as their baselines align</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid p-align-center">
-    <div className="p-col">4</div>
-    <div className="p-col">4</div>
-    <div className="p-col">4</div>
-</div>
-
-`}
-</CodeHighlight>
-
- <div className="p-grid p-align-center vertical-container">
-    <div className="p-col">
-        <div className="box">4</div>
-    </div>
-    <div className="p-col">
-        <div className="box">4</div>
-    </div>
-    <div className="p-col">
-        <div className="box">4</div>
-    </div>
-</div>
-                        <p>Vertical alignment can also be defined at column level with the <i>p-align-col-*</i> classes.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Class</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-col-align-stretch</td>
-                                        <td>Stretch to fill the container.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-col-align-start</td>
-                                        <td>Cross-start margin edge of the items is placed on the cross-start line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-col-align-end</td>
-                                        <td>Cross-end margin edge of the items is placed on the cross-end line</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-col-align-center</td>
-                                        <td>Items are centered in the cross-axis</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-col-align-baseline</td>
-                                        <td>Items are aligned such as their baselines align</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col p-col-align-start">4</div>
-    <div className="p-col p-col-align-center">4</div>
-    <div className="p-col p-col-align-end">4</div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid vertical-container">
-    <div className="p-col p-col-align-start">
-        <div className="box">4</div>
-    </div>
-    <div className="p-col p-col-align-center">
-        <div className="box">4</div>
-    </div>
-    <div className="p-col p-col-align-end">
-        <div className="box">4</div>
-    </div>
-</div>
-
-                        <h3>Offset</h3>
-                        <p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col-6 p-offset-3">6</div>
-</div>
-
-<div className="p-grid">
-    <div className="p-col-4">4 </div>
-    <div className="p-col-4 p-offset-4">4</div>
-</div>
-
-`}
-</CodeHighlight>
-
- <div className="p-grid">
-    <div className="p-col-6 p-offset-3">
-        <div className="box">6</div>
-    </div>
-</div>
-
-<div className="p-grid">
-    <div className="p-col-4">
-        <div className="box">4</div>
-    </div>
-    <div className="p-col-4 p-offset-4">
-        <div className="box">4</div>
-    </div>
-</div>
-
-                        <p>The list of offset classes varying within a range of 1 to 12.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Prefix</th>
-                                        <th>Devices</th>
-                                        <th>Media Query</th>
-                                        <th>Example</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-col-offset-*</td>
-                                        <td>All devices</td>
-                                        <td>All screens</td>
-                                        <td>p-col-offset-6, p-col-offset-4</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sm-offset-*</td>
-                                        <td>Small devices</td>
-                                        <td>min-width: 576px</td>
-                                        <td>p-sm-offset-6, p-sm-offset-4</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-md-offset-*</td>
-                                        <td>Medium sized devices such as tablets</td>
-                                        <td>min-width: 768px</td>
-                                        <td>p-md-offset-6, p-md-offset-4</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-lg-offset-*</td>
-                                        <td>Devices with large screen like desktops</td>
-                                        <td>min-width: 992px</td>
-                                        <td>p-lg-offset-6, p-lg-offset-4</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-xl-offset-*</td>
-                                        <td>Big screen monitors</td>
-                                        <td>min-width: 1200px</td>
-                                        <td>p-xl-offset-6, p-xl-offset-4</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Nested</h3>
-                        <p>Columns can be nested to create more complex layouts.</p>
-<CodeHighlight className="language-jsx">
-{`
-<div className="p-grid">
-    <div className="p-col-8">
-        <div className="p-grid">
-            <div className="p-col-6">
-                6
-            </div>
-            <div className="p-col-6">
-                6
-            </div>
-            <div className="p-col-12">
-                12
-            </div>
-        </div>
-    </div>
-    <div className="p-col-4">
-        4
-    </div>
-</div>
-
-`}
-</CodeHighlight>
-
-<div className="p-grid nested-grid">
-    <div className="p-col-8">
-        <div className="p-grid">
-            <div className="p-col-6">
-                <div className="box">6</div>
-            </div>
-            <div className="p-col-6">
-                <div className="box">6</div>
-            </div>
-            <div className="p-col-12">
-                <div className="box">12</div>
-            </div>
-        </div>
-    </div>
-    <div className="p-col-4">
-        <div className="box box-stretched">4</div>
-    </div>
-</div>
-
-                        <h3>Gutter</h3>
-                        <p>A .5 em padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply
-                        <i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
-                        </p>
-
-        <CodeHighlight className="language-jsx">
-{`
-<div className="p-grid p-nogutter">
-    <div className="p-col">1</div>
-    <div className="p-col p-nogutter">2</div>
-    <div className="p-col">3</div>
-</div>
-
-`}
-</CodeHighlight>
-
-                        <h3>Customization</h3>
-                        <p>PrimeFlex allows customization of breakpoints and gutters via SASS variables, visit the <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> repository to get access to the primeflex.scss file to build your own customized Grid.</p>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/grid" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Button} from 'primereact/button';
-import {Panel} from 'primereact/panel';
-
-export class FlexGridDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            columns: [0, 1, 2, 3, 4, 5]
-        };
-
-        this.addColumn = this.addColumn.bind(this);
-        this.removeColumn = this.removeColumn.bind(this);
-    }
-
-    addColumn() {
-        this.setState({
-            columns: [...this.state.columns, this.state.columns.length]
-        });
-    }
-
-    removeColumn() {
-        let cols = [...this.state.columns];
-        cols.splice(-1, 1);
-        this.setState({
-            columns: cols
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Flex Grid</h1>
-                        <p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. Flex Grid CSS is not included
-                            in PrimeNG as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>, a shared grid library between PrimeFaces, PrimeNG and PrimeReact projects.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation flexgrid-demo">
-                    <h3 className="first">Basic</h3>
-                    <div className="p-grid">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>Dynamic</h3>
-                    <Button type="button" icon="pi pi-plus" title="Add Column" onClick={this.addColumn} disabled={this.state.columns.length === 20} style={{marginRight: '.5em'}} />
-                    <Button type="button" icon="pi pi-minus" title="Remove Column" onClick={this.removeColumn} disabled={this.state.columns.length === 1} />
-
-                    <div className="p-grid" style={{marginTop: '.5em'}}>
-                        {
-                            this.state.columns.map(col =>
-                                <div key={col} className="p-col">
-                                    <div className="box">{col}</div>
-                                </div>
-                            )
-                        }
-                    </div>
-
-                    <h3>Reverse Direction</h3>
-                    <div className="p-grid p-dir-rev">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>Column Direction</h3>
-                    <div className="p-grid p-dir-col">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>Reverse Column Direction</h3>
-                    <div className="p-grid p-dir-col-rev">
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">3</div>
-                        </div>
-                    </div>
-
-                    <h3>12 Column Grid</h3>
-                    <div className="p-grid">
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">1</div>
-                        </div>
-                    </div>
-
-                    <div className="p-grid">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <div className="p-grid">
-                        <div className="p-col-8">
-                            <div className="box">8</div>
-                        </div>
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                    </div>
-
-                    <h3>MultiLine</h3>
-                    <div className="p-grid">
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                        <div className="p-col-6">
-                            <div className="box">6</div>
-                        </div>
-                    </div>
-
-                    <h3>Fixed Width Column</h3>
-                    <div className="p-grid">
-                        <div className="p-col-fixed" style={{width:'100px'}}>
-                            <div className="box">100px</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">auto</div>
-                        </div>
-                    </div>
-
-                    <h3>Responsive</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                        <div className="p-col-12 p-md-6 p-lg-3">
-                            <div className="box">p-col-12 p-md-6 p-lg-3</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Start</h3>
-                    <div className="p-grid p-justify-start">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - End</h3>
-                    <div className="p-grid p-justify-end">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Center</h3>
-                    <div className="p-grid p-justify-center">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Between</h3>
-                    <div className="p-grid p-justify-between">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Around</h3>
-                    <div className="p-grid p-justify-around">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Horizontal Alignment - Even</h3>
-                    <div className="p-grid p-justify-even">
-                        <div className="p-col-2">
-                            <div className="box">2</div>
-                        </div>
-                        <div className="p-col-1">
-                            <div className="box">1</div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Start</h3>
-                    <div className="p-grid p-align-start vertical-container">
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - End</h3>
-                    <div className="p-grid p-align-end vertical-container">
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Center</h3>
-                    <div className="p-grid p-align-center vertical-container">
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Stretch</h3>
-                    <div className="p-grid p-align-stretch vertical-container">
-                        <div className="p-col">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                        <div className="p-col">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Vertical Alignment - Per Column</h3>
-                    <div className="p-grid vertical-container">
-                        <div className="p-col p-col-align-start">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col p-col-align-center">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col p-col-align-end">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Offset</h3>
-                    <div className="p-grid">
-                        <div className="p-col-6 p-offset-3">
-                            <div className="box">6</div>
-                        </div>
-                    </div>
-
-                    <div className="p-grid">
-                        <div className="p-col-4">
-                            <div className="box">4</div>
-                        </div>
-                        <div className="p-col-4 p-offset-4">
-                            <div className="box">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Nested</h3>
-                    <div className="p-grid nested-grid">
-                        <div className="p-col-8">
-                            <div className="p-grid">
-                                <div className="p-col-6">
-                                    <div className="box">6</div>
-                                </div>
-                                <div className="p-col-6">
-                                    <div className="box">6</div>
-                                </div>
-                                <div className="p-col-12">
-                                    <div className="box">12</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-4">
-                            <div className="box box-stretched">4</div>
-                        </div>
-                    </div>
-
-                    <h3>Panel Integration</h3>
-                    <div className="p-grid">
-                        <div className="p-col">
-                            <Panel header="Godfather">
-                                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-                            </Panel>
-                        </div>
-                        <div className="p-col">
-                            <Panel header="Godfather">
-                                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-                            </Panel>
-                        </div>
-                        <div className="p-col">
-                            <Panel header="Godfather">
-                                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                                His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                                Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                                kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-                            </Panel>
-                        </div>
-                    </div>
-
-                    <h3>Sample Layout</h3>
-                    <div className="p-grid sample-layout">
-                        <div className="p-col-12 p-md-2">
-                            Menu
-                        </div>
-                        <div className="p-col-12 p-md-10 p-col-nogutter">
-                            <div className="p-col-12 p-col-nogutter">
-                                Top Bar
-                            </div>
-                            <div className="p-col-12">
-                                <div className="p-grid">
-                                    <div className="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
-                                        dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
-                                        In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
-                                    <div className="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
-                                        tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
-                                        at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
-                                        nulla nec, rutrum sapien.</div>
-                                    <div className="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
-                                        sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
-                                        Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
-                                        condimentum eget hendrerit sit amet.</div>
-
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 1" src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" style={{width:'100%'}} /></div>
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 2" src="http://github.com/showcase/resources/demo/images/galleria/galleria2.jpg" style={{width:'100%'}} /></div>
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 3" src="http://github.com/showcase/resources/demo/images/galleria/galleria3.jpg" style={{width:'100%'}} /></div>
-                                    <div className="p-col-6 p-md-3"><img alt="Galleria 4" src="http://github.com/showcase/resources/demo/images/galleria/galleria4.jpg" style={{width:'100%'}} /></div>
-
-                                    <div className="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
-                                        facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
-                                        neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
-                                    <div className="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
-                                        ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
-                                        pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12">
-                            Footer
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/fullcalendar/FullCalendarDemo.js b/src/showcase/fullcalendar/FullCalendarDemo.js
deleted file mode 100644
index 653437c2e3..0000000000
--- a/src/showcase/fullcalendar/FullCalendarDemo.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import React, {Component} from 'react';
-import {FullCalendar} from '../../components/fullcalendar/FullCalendar';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {EventService} from '../service/EventService';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import timeGridPlugin from '@fullcalendar/timegrid';
-import interactionPlugin from '@fullcalendar/interaction';
-
-export class FullCalendarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            events: [],
-            options: {
-                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
-                defaultView: 'dayGridMonth',
-                defaultDate: '2017-02-01',
-                header: {
-                    left: 'prev,next',
-                    center: 'title',
-                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
-                },
-                editable: true
-            }
-        };
-        this.eventService = new EventService();
-    }
-
-    componentDidMount() {
-        this.eventService.getEvents().then(data => this.setState({events: data}));
-    }
-
-    render() {
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>FullCalendar</h1>
-                        <p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("fullCalendar")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <FullCalendar  events={this.state.events} options={this.state.options} />
-                </div>
-
-                <FullCalendarDoc/>
-            </div>
-        );
-    }
-}
-
-export class FullCalendarDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-{`
-import {FullCalendar} from 'primereact/fullcalendar';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.1+</a> so fullcalendar core needs to be included in your project.
-                        For a complete documentation and samples please refer to the <a href="https://fullcalendar.io/">fullcalendar website</a>.</p>
-
-                        <CodeHighlight className="language-javascript">
-{`
-npm install @fullcalendar/core --save
-
-`}
-                        </CodeHighlight>
-
-                        <p>FullCalendar is plugin based so install the plugins you require and define them with the options property.</p>
-<CodeHighlight className="language-javascript">
-{`
-npm install @fullcalendar/daygrid --save
-npm install @fullcalendar/timegrid --save
-npm install @fullcalendar/interaction --save
-
-`}
-</CodeHighlight>
-
-                        <p>FullCalendar properties are defined with the <i>options</i> property and the events to display with the <i>events</i> property which should be an array and defined using the events property. Refer to <a href="https://fullcalendar.io/docs/event-object">Event API</a> for more information.</p>
-
-                        <CodeHighlight className="language-javascript">
-{`
-export class FullCalendarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            events: [],
-            options: {
-                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
-                defaultView: 'dayGridMonth',
-                defaultDate: '2017-02-01',
-                header: {
-                    left: 'prev,next',
-                    center: 'title',
-                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
-                },
-                editable: true
-            }
-        };
-        this.eventService = new EventService();
-    }
-
-    componentDidMount() {
-        this.eventService.getEvents().then(data => this.setState({events: data}));
-    }
-
-	render() {
-		return (
-			<FullCalendar events={this.state.events} options={this.state.options} />
-		);
-	}
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Callbacks</h3>
-                        <p>Callbacks of the FullCalendar such as dateClick are also defined with the options property.</p>
-
-                        <CodeHighlight className="language-javascript">
-{`
-let options: {
-    defaultDate: '2017-02-01',
-    header: {
-        left: 'prev,next',
-        center: 'title',
-        right: 'month,agendaWeek,agendaDay'
-    },
-    editable: true,
-    dateClick: (e) =>  {
-        //handle date click
-    }
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Methods</h3>
-                        <p>Methods of the underlying calendar instance is accessible using the reference of the components calendar API.</p>
-
-                        <CodeHighlight className="language-jsx">
-{`
-<FullCalendar ref={(el) => this.fc = el} events={this.state.events} options={this.state.options} />
-
-`}
-                        </CodeHighlight>
-                        <CodeHighlight className="language-javascript">
-{`
-this.fc.calendar.nextYear();
-
-`}
-                        </CodeHighlight>
-
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>events</td>
-                                        <td>array</td>
-                                        <td>An array of events to display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>ClassName of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>options</td>
-                                        <td>Object</td>
-                                        <td>A configuration object to define properties of FullCalendar.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>
-                            <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.1+</a>
-                        </p>
-
-
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/fullcalendar" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {FullCalendar} from 'primereact/fullcalendar';
-import {EventService} from '../service/EventService';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import timeGridPlugin from '@fullcalendar/timegrid';
-import interactionPlugin from '@fullcalendar/interaction';
-
-export class FullCalendarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            events: [],
-            options: {
-                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
-                defaultView: 'dayGridMonth',
-                defaultDate: '2017-02-01',
-                header: {
-                    left: 'prev,next',
-                    center: 'title',
-                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
-                },
-                editable: true
-            }
-        };
-        this.eventService = new EventService();
-    }
-
-    componentDidMount() {
-        this.eventService.getEvents().then(data => this.setState({events: data}));
-    }
-
-    render() {
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>FullCalendar</h1>
-                        <p>An event calendar based on the <a href="https://fullcalendar.io/">FullCalendar</a> library.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <FullCalendar  events={this.state.events} options={this.state.options} />
-                </div>
-
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/galleria/GalleriaBasicDemo.js b/src/showcase/galleria/GalleriaBasicDemo.js
deleted file mode 100644
index 7426b90279..0000000000
--- a/src/showcase/galleria/GalleriaBasicDemo.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaBasicDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            activeIndex: 2
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.onItemChange = this.onItemChange.bind(this)
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    onItemChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Basic</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Uncontrolled</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} style={{ maxWidth: '520px' }} />
-
-                    <h3>Controlled</h3>
-                    <Galleria value={this.state.images} activeIndex={this.state.activeIndex} onItemChange={this.onItemChange}
-                        responsiveOptions={this.responsiveOptions} numVisible={5} previewItemTemplate={this.previewTemplate}
-                        thumbnailItemTemplate={this.itemTemplate} style={{ maxWidth: '520px' }} />
-                </div>
-
-                <GalleriaBasicDemoDoc></GalleriaBasicDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaBasicDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaBasicDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            activeIndex: 2
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.onItemChange = this.onItemChange.bind(this)
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    onItemChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Basic</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Uncontrolled</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} style={{ maxWidth: '520px' }} />
-
-                    <h3>Controlled</h3>
-                    <Galleria value={this.state.images} activeIndex={this.state.activeIndex} onItemChange={this.onItemChange}
-                        responsiveOptions={this.responsiveOptions} numVisible={5} previewItemTemplate={this.previewTemplate}
-                        thumbnailItemTemplate={this.itemTemplate} style={{ maxWidth: '520px' }} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/galleria/GalleriaCaptionDemo.js b/src/showcase/galleria/GalleriaCaptionDemo.js
deleted file mode 100644
index d96d37d092..0000000000
--- a/src/showcase/galleria/GalleriaCaptionDemo.js
+++ /dev/null
@@ -1,195 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaCaptionDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.captionTemplate = this.captionTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    captionTemplate(item) {
-        return (
-            <React.Fragment>
-                <h4 style={{marginBottom: '.5em'}}>{item.title}</h4>
-                <p>{item.alt}</p>
-            </React.Fragment>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Caption</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        captionTemplate={this.captionTemplate} style={{maxWidth: '520px'}} />
-                </div>
-
-                <GalleriaCaptionDemoDoc></GalleriaCaptionDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaCaptionDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaCaptionDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.captionTemplate = this.captionTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    captionTemplate(item) {
-        return (
-            <React.Fragment>
-                <h4 style={{marginBottom: '.5em'}}>{item.title}</h4>
-                <p>{item.alt}</p>
-            </React.Fragment>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Caption</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        captionTemplate={this.captionTemplate} style={{maxWidth: '520px'}} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/galleria/GalleriaCircularDemo.js b/src/showcase/galleria/GalleriaCircularDemo.js
deleted file mode 100644
index 341ddd1d31..0000000000
--- a/src/showcase/galleria/GalleriaCircularDemo.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaCircularDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Circular</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} style={{maxWidth: '520px'}} />
-
-                    <h3>AutoPlay</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} autoPlay={true} transitionInterval={2000} style={{maxWidth: '520px'}} />
-                </div>
-
-                <GalleriaCircularDemoDoc></GalleriaCircularDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaCircularDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaCircularDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Circular</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} style={{maxWidth: '520px'}} />
-
-                    <h3>AutoPlay</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} autoPlay={true} transitionInterval={2000} style={{maxWidth: '520px'}} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/galleria/GalleriaDemo.js b/src/showcase/galleria/GalleriaDemo.js
deleted file mode 100644
index 45d5f06208..0000000000
--- a/src/showcase/galleria/GalleriaDemo.js
+++ /dev/null
@@ -1,910 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import { GalleriaService } from '../service/GalleriaService';
-import { Button } from '../../components/button/Button';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView,TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            activeIndex: 0,
-            showThumbnails: false,
-            isAutoPlayActive: true,
-            isPreviewFullScreen: false
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.onThumbnailChange = this.onThumbnailChange.bind(this);
-        this.onItemChange = this.onItemChange.bind(this);
-        this.onFullScreenChange = this.onFullScreenChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-        this.bindDocumentListeners();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.isAutoPlayActive !== this.galleria.isAutoPlayActive()) {
-            this.setState({
-                isAutoPlayActive: this.galleria.isAutoPlayActive()
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentListeners();
-    }
-
-    onThumbnailChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    onItemChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    toggleFullScreen() {
-        if (this.state.isPreviewFullScreen) {
-            this.closePreviewFullScreen();
-        }
-        else {
-            this.openPreviewFullScreen();
-        }
-    }
-
-    onFullScreenChange() {
-        this.setState({ isPreviewFullScreen: !this.state.isPreviewFullScreen });
-    }
-
-    openPreviewFullScreen() {
-        let elem = ReactDOM.findDOMNode(this.galleria);
-        if (elem.requestFullscreen) {
-            elem.requestFullscreen();
-        }
-        else if (elem.mozRequestFullScreen) { /* Firefox */
-            elem.mozRequestFullScreen();
-        }
-        else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
-            elem.webkitRequestFullscreen();
-        }
-        else if (elem.msRequestFullscreen) { /* IE/Edge */
-            elem.msRequestFullscreen();
-        }
-    }
-
-    closePreviewFullScreen() {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        }
-        else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        }
-        else if (document.webkitExitFullscreen) {
-            document.webkitExitFullscreen();
-        }
-        else if (document.msExitFullscreen) {
-            document.msExitFullscreen();
-        }
-    }
-
-    bindDocumentListeners() {
-        document.addEventListener("fullscreenchange", this.onFullScreenChange);
-        document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
-        document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
-        document.addEventListener("msfullscreenchange", this.onFullScreenChange);
-    }
-
-    unbindDocumentListeners() {
-        document.removeEventListener("fullscreenchange", this.onFullScreenChange);
-        document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
-        document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
-        document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        if (this.state.isPreviewFullScreen) {
-            return <img src={`${item.previewImageSrc}`} alt={item.alt} />
-        }
-
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    renderFooter() {
-        let autoPlayClassName = classNames('pi', {
-            'pi-play': !this.state.isAutoPlayActive,
-            'pi-pause': this.state.isAutoPlayActive
-        });
-
-        let fullScreenClassName = classNames('pi', {
-            'pi-window-maximize': !this.state.isPreviewFullScreen,
-            'pi-window-minimize': this.state.isPreviewFullScreen
-        });
-
-        return (
-            <div className="custom-galleria-footer">
-                <Button icon="pi pi-list" onClick={() => this.setState({ showThumbnails: !this.state.showThumbnails })} />
-                <Button icon={autoPlayClassName} onClick={() => {
-                    if (!this.state.isAutoPlayActive) {
-                        this.galleria.startSlideShow();
-                        this.setState({ isAutoPlayActive: true });
-                    }
-                    else {
-                        this.galleria.stopSlideShow();
-                        this.setState({ isAutoPlayActive: false });
-                    }
-                }} />
-                {
-                    this.state.images && (
-                        <span>
-                            <span>{this.state.activeIndex + 1}/{this.state.images.length}</span>
-                            <span className="title">{this.state.images[this.state.activeIndex].title}</span>
-                            <span>{this.state.images[this.state.activeIndex].alt}</span>
-                        </span>
-                    )
-                }
-                <Button icon={fullScreenClassName} onClick={() => this.toggleFullScreen()} />
-            </div>
-        );
-    }
-
-    render() {
-        const footer = this.renderFooter();
-        const galleriaClassName = classNames('custom-galleria', {
-            'preview-fullscreen': this.state.isPreviewFullScreen
-        });
-
-        return (
-            <div className="galleria-demo">
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria</h1>
-                        <p>Galleria is a content gallery component.</p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Galleria ref={(el) => this.galleria = el} value={this.state.images} activeIndex={this.state.activeIndex} onItemChange={this.onItemChange}
-                        showThumbnails={this.state.showThumbnails} showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true}
-                        numVisible={5} circular={true} autoPlay={true} transitionInterval={3000}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} footer={footer}
-                        style={{ maxWidth: '520px' }} className={galleriaClassName} />
-                </div>
-
-                <GalleriaDoc />
-            </div>
-        );
-    }
-}
-
-export class GalleriaDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Galleria} from 'primereact/galleria';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Galleria requires a value as an array of objects and can either be used as a Controlled or Uncontrolled component.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Galleria value={this.state.images} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}></Galleria>
-
-`}
-</CodeHighlight>
-<CodeHighlight className="language-javascript">
-{`
-constructor() {
-    super();
-
-    this.state = {
-        images: null
-    };
-
-    this.galleriaService = new GalleriaService();
-    this.itemTemplate = this.itemTemplate.bind(this);
-    this.previewTemplate = this.previewTemplate.bind(this);
-    this.onItemChange = this.onItemChange.bind(this)
-}
-
-componentDidMount() {
-    this.galleriaService.getImages().then(data => this.setState({ images: data }));
-}
-
-onItemChange(event) {
-    this.setState({ activeIndex: event.index });
-}
-
-itemTemplate(item) {
-    return (
-        <div className="p-grid p-nogutter p-justify-center">
-            <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} />
-        </div>
-    );
-}
-
-previewTemplate(item) {
-    return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%' }} />
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Items per page</h3>
-            <p>Number of items per page is defined using the <i>numVisible</i> property.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Galleria value={this.state.images} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-    numVisible={5}></Galleria>
-
-`}
-</CodeHighlight>
-
-            <h3>Responsive</h3>
-            <p>For responsive design, <i>numVisible</i> can be defined using the <i>responsiveOptions</i> property that should be an array of
-            objects whose breakpoint defines the max-width to apply the settings.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Galleria value={this.state.images} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-    numVisible={5} responsiveOptions={responsiveOptions}></Galleria>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-const responsiveOptions = [
-    {
-        breakpoint: '1024px',
-        numVisible: 5
-    },
-    {
-        breakpoint: '768px',
-        numVisible: 3
-    },
-    {
-        breakpoint: '560px',
-        numVisible: 1
-    }
-];
-
-`}
-</CodeHighlight>
-
-            <h3>Header and Footer</h3>
-            <p>Custom content projection is available using the <i>header</i> and <i>footer</i> properties.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Galleria value={this.state.images} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-    header={<h1>Header</h1>}></Galleria>
-
-`}
-</CodeHighlight>
-
-            <h3>Controlled vs Uncontrolled</h3>
-            <p>In controlled mode, <i>activeIndex</i> and <i>onItemChange</i> properties need to be defined to control the first visible item.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Galleria value={this.state.images} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-    activeIndex={this.state.activeIndex} onItemChange={(e) => this.setState({ activeIndex: e.index })}></Galleria>
-
-`}
-</CodeHighlight>
-
-            <h3>Uncontrolled</h3>
-            <p>In uncontrolled mode, no additional properties are required. Initial item can be provided using the <i>activeItemIndex</i> property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
-                need to update the first visible item index, prefer to use the component as controlled.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Galleria value={this.state.images} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}></Galleria>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display.</td>
-                        </tr>
-                        <tr>
-                            <td>activeIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the first item.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Label of header.</td>
-                        </tr>
-                        <tr>
-                            <td>footer</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Label of footer.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>previewItemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the value and returns the content for preview item.</td>
-                        </tr>
-                        <tr>
-                            <td>thumbnailItemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the value and returns the content for thumbnail item.</td>
-                        </tr>
-                        <tr>
-                            <td>indicatorItemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the value and returns the content for indicator item.</td>
-                        </tr>
-                        <tr>
-                            <td>captionTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the value and returns the content for caption item.</td>
-                        </tr>
-                        <tr>
-                            <td>circular</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if scrolling would be infinite.</td>
-                        </tr>
-                        <tr>
-                            <td>autoPlay</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Items are displayed with a slideshow in autoPlay mode.</td>
-                        </tr>
-                        <tr>
-                            <td>transitionInterval</td>
-                            <td>number</td>
-                            <td>4000</td>
-                            <td>Time in milliseconds to scroll items.</td>
-                        </tr>
-                        <tr>
-                            <td>numVisible</td>
-                            <td>number</td>
-                            <td>3</td>
-                            <td>Number of items per page.</td>
-                        </tr>
-                        <tr>
-                            <td>responsiveOptions</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>An array of options for responsive design.</td>
-                        </tr>
-                        <tr>
-                            <td>thumbnailsPosition</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of thumbnails. Valid values are "bottom", "top", "left" and "right".</td>
-                        </tr>
-                        <tr>
-                            <td>indicatorsPosition</td>
-                            <td>string</td>
-                            <td>bottom</td>
-                            <td>Position of indicators. Valid values are "bottom", "top", "left" and "right".</td>
-                        </tr>
-                        <tr>
-                            <td>verticalThumbnailViewPortHeight</td>
-                            <td>string</td>
-                            <td>300px</td>
-                            <td>Height of the viewport in vertical thumbnail.</td>
-                        </tr>
-                        <tr>
-                            <td>showPreviewNavButtons</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display navigation buttons in preview container.</td>
-                        </tr>
-                        <tr>
-                            <td>showThumbnailNavButtons</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display navigation buttons in thumbnail container.</td>
-                        </tr>
-                        <tr>
-                            <td>showThumbnails</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to display thumbnail container.</td>
-                        </tr>
-                        <tr>
-                            <td>showIndicators</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display indicator container.</td>
-                        </tr>
-                        <tr>
-                            <td>showIndicatorsOnPreview</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, indicator container is displayed on preview container.</td>
-                        </tr>
-                        <tr>
-                            <td>showNavButtonsOnPreviewHover</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display navigation buttons on preview container's hover.</td>
-                        </tr>
-                        <tr>
-                            <td>changePreviewOnIndicatorHover</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, preview item is changed on indicator item's hover.</td>
-                        </tr>
-                        <tr>
-                            <td>fullScreen</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display the component on fullscreen.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to use in layering.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onItemChange</td>
-                            <td>event.index = index of the new item.</td>
-                            <td>Callback to invoke after changing item.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Element</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-galleria</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-header</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-footer</td>
-                            <td>Footer section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-preview-content</td>
-                            <td>Preview content element. It contains preview and indicator containers.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-preview-container</td>
-                            <td>Container of the preview content. It contains navigation buttons, preview item and caption content.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-indicator-container</td>
-                            <td>Container of the indicators. It contains indicator items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-thumbnail-content</td>
-                            <td>Thumbnail content element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-thumbnail-container</td>
-                            <td>Container of the thumbnail content. It contains navigation buttons and thumbnail items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-galleria-preview-caption</td>
-                            <td>Content of the preview caption.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/galleria" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import classNames from 'classnames';
-import { GalleriaService } from '../service/GalleriaService';
-import { Button } from '../../components/button/Button';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            activeIndex: 0,
-            showThumbnails: false,
-            isAutoPlayActive: true,
-            isPreviewFullScreen: false
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.onThumbnailChange = this.onThumbnailChange.bind(this);
-        this.onItemChange = this.onItemChange.bind(this);
-        this.onFullScreenChange = this.onFullScreenChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-        this.bindDocumentListeners();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        if (prevState.isAutoPlayActive !== this.galleria.isAutoPlayActive()) {
-            this.setState({
-                isAutoPlayActive: this.galleria.isAutoPlayActive()
-            });
-        }
-    }
-
-    componentWillUnmount() {
-        this.unbindDocumentListeners();
-    }
-
-    onThumbnailChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    onItemChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    toggleFullScreen() {
-        if (this.state.isPreviewFullScreen) {
-            this.closePreviewFullScreen();
-        }
-        else {
-            this.openPreviewFullScreen();
-        }
-    }
-
-    onFullScreenChange() {
-        this.setState({ isPreviewFullScreen: !this.state.isPreviewFullScreen });
-    }
-
-    openPreviewFullScreen() {
-        let elem = ReactDOM.findDOMNode(this.galleria);
-        if (elem.requestFullscreen) {
-            elem.requestFullscreen();
-        }
-        else if (elem.mozRequestFullScreen) { /* Firefox */
-            elem.mozRequestFullScreen();
-        }
-        else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
-            elem.webkitRequestFullscreen();
-        }
-        else if (elem.msRequestFullscreen) { /* IE/Edge */
-            elem.msRequestFullscreen();
-        }
-    }
-
-    closePreviewFullScreen() {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-        }
-        else if (document.mozCancelFullScreen) {
-            document.mozCancelFullScreen();
-        }
-        else if (document.webkitExitFullscreen) {
-            document.webkitExitFullscreen();
-        }
-        else if (document.msExitFullscreen) {
-            document.msExitFullscreen();
-        }
-    }
-
-    bindDocumentListeners() {
-        document.addEventListener("fullscreenchange", this.onFullScreenChange);
-        document.addEventListener("mozfullscreenchange", this.onFullScreenChange);
-        document.addEventListener("webkitfullscreenchange", this.onFullScreenChange);
-        document.addEventListener("msfullscreenchange", this.onFullScreenChange);
-    }
-
-    unbindDocumentListeners() {
-        document.removeEventListener("fullscreenchange", this.onFullScreenChange);
-        document.removeEventListener("mozfullscreenchange", this.onFullScreenChange);
-        document.removeEventListener("webkitfullscreenchange", this.onFullScreenChange);
-        document.removeEventListener("msfullscreenchange", this.onFullScreenChange);
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        if (this.state.isPreviewFullScreen) {
-            return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} />
-        }
-
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    renderFooter() {
-        let autoPlayClassName = classNames('pi', {
-            'pi-play': !this.state.isAutoPlayActive,
-            'pi-pause': this.state.isAutoPlayActive
-        });
-
-        let fullScreenClassName = classNames('pi', {
-            'pi-window-maximize': !this.state.isPreviewFullScreen,
-            'pi-window-minimize': this.state.isPreviewFullScreen
-        });
-
-        return (
-            <div className="custom-galleria-footer">
-                <Button icon="pi pi-list" onClick={() => this.setState({ showThumbnails: !this.state.showThumbnails })} />
-                <Button icon={autoPlayClassName} onClick={() => {
-                    if (!this.state.isAutoPlayActive) {
-                        this.galleria.startSlideShow();
-                        this.setState({ isAutoPlayActive: true });
-                    }
-                    else {
-                        this.galleria.stopSlideShow();
-                        this.setState({ isAutoPlayActive: false });
-                    }
-                }} />
-                {
-                    this.state.images && (
-                        <span>
-                            <span>{this.state.activeIndex + 1}/{this.state.images.length}</span>
-                            <span className="title">{this.state.images[this.state.activeIndex].title}</span>
-                            <span>{this.state.images[this.state.activeIndex].alt}</span>
-                        </span>
-                    )
-                }
-                <Button icon={fullScreenClassName} onClick={() => this.toggleFullScreen()} />
-            </div>
-        );
-    }
-
-    render() {
-        const footer = this.renderFooter();
-        const galleriaClassName = classNames('custom-galleria', {
-            'preview-fullscreen': this.state.isPreviewFullScreen
-        });
-
-        return (
-            <div className="galleria-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria</h1>
-                        <p>Galleria is a content gallery component.</p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Galleria ref={(el) => this.galleria = el} value={this.state.images} activeIndex={this.state.activeIndex} onItemChange={this.onItemChange}
-                        showThumbnails={this.state.showThumbnails} showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true}
-                        numVisible={5} circular={true} autoPlay={true} transitionInterval={3000}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} footer={footer}
-                        style={{ maxWidth: '520px' }} className={galleriaClassName} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-// SCSS codes
-
-.custom-galleria {
-    .p-galleria-content {
-        height: 95%;
-        overflow: hidden;
-        position: relative;
-
-        .p-galleria-thumbnail-content {
-            position: absolute;
-            width: 100%;
-            bottom: 0;
-            background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.50) 70%);
-
-            .p-galleria-thumbnail-container {
-                .p-galleria-thumbnail-prev,
-                .p-galleria-thumbnail-next {
-                    background-color: transparent;
-                    color: #ffffff;
-                    border: 0 none;
-                    font-size: 1.2em;
-
-                    &:hover {
-                        color: var(--primaryColor);
-                    }
-                }
-
-                .p-galleria-thumbnail-items-content {
-                    .p-galleria-thumbnail-items-container {
-                        .p-galleria-thumbnail-item {
-                            opacity: .6;
-
-                            &.p-galleria-thumbnail-item-current {
-                                opacity: 1;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .p-galleria-footer {
-        padding: 0;
-        background-color: rgba(0, 0, 0, .9);
-        border: rgba(0, 0, 0, .9);
-
-        .custom-galleria-footer {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: stretch;
-            color: #ffffff;
-
-            > button {
-                background-color: transparent;
-                padding: .1em .4em;
-                border: 0 none;
-                border-radius: 0;
-                color: #ffffff;
-
-                &:hover {
-                    background-color: transparent;
-                }
-            }
-
-            > span {
-                flex-grow: 1;
-
-                > span {
-                    font-size: .9em;
-                    padding-left: .829em;
-
-                    &.title {
-                        font-weight: bold;
-                    }
-                }
-            }
-        }
-    }
-
-    &.preview-fullscreen {
-        .p-galleria-preview-container {
-            .p-galleria-preview-nav-button {
-                top: 50%;
-                height: 20em;
-                width: 4em;
-                margin-top: -10em;
-            }
-        }
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/galleria/GalleriaFullScreenDemo.js b/src/showcase/galleria/GalleriaFullScreenDemo.js
deleted file mode 100644
index 662f3f1d94..0000000000
--- a/src/showcase/galleria/GalleriaFullScreenDemo.js
+++ /dev/null
@@ -1,291 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { Button } from '../../components/button/Button';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaFullScreenDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            activeIndex: 0
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.onItemChange = this.onItemChange.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-
-        this.responsiveOptions2 = [
-            {
-                breakpoint: '1500px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '1024px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 2
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    onItemChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - FullScreen</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria ref={(el) => this.galleria1 = el} value={this.state.images} responsiveOptions={this.responsiveOptions2} numVisible={9}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} fullScreen={true} showPreviewNavButtons={true} style={{maxWidth: '50%'}} />
-
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.galleria1.show()} />
-
-                    <h3>Without Thumbnails</h3>
-                    <Galleria ref={(el) => this.galleria2 = el} value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={7}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} fullScreen={true} showPreviewNavButtons={true} showThumbnails={false} style={{maxWidth: '850px'}} />
-
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.galleria2.show()} />
-
-                    <h3>Custom Contents</h3>
-                    <Galleria ref={(el) => this.galleria3 = el} value={this.state.images} activeIndex={this.state.activeIndex} onItemChange={this.onItemChange}
-                        responsiveOptions={this.responsiveOptions} numVisible={7} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} fullScreen={true} showPreviewNavButtons={true} showThumbnails={false} style={{maxWidth: '850px'}} />
-
-                    <div className="p-grid" style={{maxWidth: '400px'}}>
-                    {
-                        this.state.images && this.state.images.map((image, index) => {
-                            let imgEl = <img src={`${image.thumbnailImageSrc}`} alt={image.alt} style={{cursor: 'pointer'}} onClick={() => {
-                                this.setState({ activeIndex: index }, () => this.galleria3.show());
-                            }}/>
-
-                            return (
-                                <div className="p-col-3" key={index}>
-                                    {imgEl}
-                                </div>
-                            )
-                        })
-                    }
-                    </div>
-                </div>
-
-                <GalleriaFullScreenDemoDoc></GalleriaFullScreenDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaFullScreenDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { Button } from '../../components/button/Button';
-
-export class GalleriaFullScreenDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            activeIndex: 0
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.onItemChange = this.onItemChange.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-
-        this.responsiveOptions2 = [
-            {
-                breakpoint: '1500px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '1024px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 2
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    onItemChange(event) {
-        this.setState({ activeIndex: event.index });
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - FullScreen</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria ref={(el) => this.galleria1 = el} value={this.state.images} responsiveOptions={this.responsiveOptions2} numVisible={9}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} fullScreen={true} showPreviewNavButtons={true} style={{maxWidth: '50%'}} />
-
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.galleria1.show()} />
-
-                    <h3>Without Thumbnails</h3>
-                    <Galleria ref={(el) => this.galleria2 = el} value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={7}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} fullScreen={true} showPreviewNavButtons={true} showThumbnails={false} style={{maxWidth: '850px'}} />
-
-                    <Button label="Show" icon="pi pi-external-link" onClick={() => this.galleria2.show()} />
-
-                    <h3>Custom Contents</h3>
-                    <Galleria ref={(el) => this.galleria3 = el} value={this.state.images} activeIndex={this.state.activeIndex} onItemChange={this.onItemChange}
-                        responsiveOptions={this.responsiveOptions} numVisible={7} previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} fullScreen={true} showPreviewNavButtons={true} showThumbnails={false} style={{maxWidth: '850px'}} />
-
-                    <div className="p-grid" style={{maxWidth: '400px'}}>
-                    {
-                        this.state.images && this.state.images.map((image, index) => {
-                            let imgEl = <img src={\`\${image.thumbnailImageSrc}\`} alt={image.alt} style={{cursor: 'pointer'}} onClick={() => {
-                                this.setState({ activeIndex: index }, () => this.galleria3.show());
-                            }}/>
-
-                            return (
-                                <div className="p-col-3" key={index}>
-                                    {imgEl}
-                                </div>
-                            )
-                        })
-                    }
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/galleria/GalleriaIndicatorDemo.js b/src/showcase/galleria/GalleriaIndicatorDemo.js
deleted file mode 100644
index b9c65e6ccf..0000000000
--- a/src/showcase/galleria/GalleriaIndicatorDemo.js
+++ /dev/null
@@ -1,341 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaIndicatorDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            images2: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.indicatorItemTemplate = this.indicatorItemTemplate.bind(this);
-        this.indicatorItemTemplate2 = this.indicatorItemTemplate2.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({
-            images: data,
-            images2: data.slice(0, 5)
-        }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="car-details">
-                <div className="p-grid p-nogutter p-justify-center">
-                    <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }}/>
-                </div>
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    indicatorItemTemplate(index) {
-        return (
-            <div>
-                {index + 1}
-            </div>
-        )
-    }
-
-    indicatorItemTemplate2(index) {
-        let item = this.state.images2[index];
-        return (
-            <div style={{padding: '.2em', cursor: 'pointer'}}>
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }}/>
-            </div>
-        )
-    }
-
-    render() {
-        return (
-            <div className="galleria-demo">
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Indicator</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} style={{maxWidth: '520px'}} />
-
-                    <hr />
-
-                    <h3>Change Preview On Indicator Hover</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} style={{maxWidth: '520px'}} />
-
-                    <hr />
-
-                    <h3>Show Indicator On Preview</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} style={{maxWidth: '520px'}} />
-
-                    <hr />
-
-                    <h3>Position</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="bottom"
-                        style={{maxWidth: '520px'}} header="Bottom" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="top"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Top" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="left"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Left" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="right"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Right" />
-
-                    <hr />
-
-                    <h3>Template</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        indicatorItemTemplate={this.indicatorItemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="left"
-                        style={{maxWidth: '520px'}} className="custom-indicator-galleria"/>
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        indicatorItemTemplate={this.indicatorItemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} indicatorsPosition="left"
-                        style={{maxWidth: '520px', marginTop: '2em'}} className="custom-indicator-galleria"/>
-
-                    <Galleria value={this.state.images2} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        indicatorItemTemplate={this.indicatorItemTemplate2} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} indicatorsPosition="left"
-                        style={{maxWidth: '520px', marginTop: '2em'}} className="custom-indicator-galleria2" />
-                </div>
-
-                <GalleriaIndicatorDemoDoc></GalleriaIndicatorDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaIndicatorDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaIndicatorDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null,
-            images2: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.indicatorItemTemplate = this.indicatorItemTemplate.bind(this);
-        this.indicatorItemTemplate2 = this.indicatorItemTemplate2.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({
-            images: data,
-            images2: data.slice(0, 5)
-        }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }}/>
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    indicatorItemTemplate(index) {
-        return (
-            <div>
-                {index + 1}
-            </div>
-        )
-    }
-
-    indicatorItemTemplate2(index) {
-        let item = this.state.images2[index];
-        return (
-            <div style={{padding: '.2em', cursor: 'pointer'}}>
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }}/>
-            </div>
-        )
-    }
-
-    render() {
-        return (
-            <div className="galleria-demo">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Indicator</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} style={{maxWidth: '520px'}} />
-
-                    <hr />
-
-                    <h3>Change Preview On Indicator Hover</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} style={{maxWidth: '520px'}} />
-
-                    <hr />
-
-                    <h3>Show Indicator On Preview</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} style={{maxWidth: '520px'}} />
-
-                    <hr />
-
-                    <h3>Position</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="bottom"
-                        style={{maxWidth: '520px'}} header="Bottom" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="top"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Top" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="left"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Left" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="right"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Right" />
-
-                    <hr />
-
-                    <h3>Template</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        indicatorItemTemplate={this.indicatorItemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} showIndicatorsOnPreview={true} indicatorsPosition="left"
-                        style={{maxWidth: '520px'}} className="custom-indicator-galleria"/>
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        indicatorItemTemplate={this.indicatorItemTemplate} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} indicatorsPosition="left"
-                        style={{maxWidth: '520px', marginTop: '2em'}} className="custom-indicator-galleria"/>
-
-                    <Galleria value={this.state.images2} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        indicatorItemTemplate={this.indicatorItemTemplate2} showThumbnails={false}
-                        showIndicators={true} changePreviewOnIndicatorHover={true} indicatorsPosition="left"
-                        style={{width: '520px', marginTop: '2em'}} className="custom-indicator-galleria2" />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/galleria/GalleriaPreviewDemo.js b/src/showcase/galleria/GalleriaPreviewDemo.js
deleted file mode 100644
index 23c7e266a4..0000000000
--- a/src/showcase/galleria/GalleriaPreviewDemo.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaPreviewDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Preview</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} style={{maxWidth: '520px'}} />
-
-                    <h3>Navigation Buttons</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} style={{maxWidth: '520px'}} header="With Thumbnails"/>
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showThumbnails={false} style={{maxWidth: '520px', marginTop: '2em'}} header="Without Thumbnails"/>
-
-                    <h3>Show Navigation Buttons on Preview Hover</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true} style={{maxWidth: '520px'}} header="With Thumbnails" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true} showThumbnails={false}
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Without Thumbnails"/>
-
-                    <h3>Advanced</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true} showThumbnails={false}
-                        showIndicators={true} showIndicatorsOnPreview={true} changePreviewOnIndicatorHover={true}
-                        style={{maxWidth: '520px'}}/>
-                </div>
-
-                <GalleriaPreviewDemoDoc></GalleriaPreviewDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaPreviewDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaPreviewDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="car-details">
-                <div className="p-grid p-nogutter p-justify-center">
-                    <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }} />
-                </div>
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Preview</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate} style={{maxWidth: '520px'}} />
-
-                    <h3>Navigation Buttons</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} style={{maxWidth: '520px'}} header="With Thumbnails"/>
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showThumbnails={false} style={{maxWidth: '520px', marginTop: '2em'}} header="Without Thumbnails"/>
-
-                    <h3>Show Navigation Buttons on Preview Hover</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true} style={{maxWidth: '520px'}} header="With Thumbnails" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true} showThumbnails={false}
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Without Thumbnails"/>
-
-                    <h3>Advanced</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5} circular={true}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        showPreviewNavButtons={true} showNavButtonsOnPreviewHover={true} showThumbnails={false}
-                        showIndicators={true} showIndicatorsOnPreview={true} changePreviewOnIndicatorHover={true}
-                        style={{maxWidth: '520px'}}/>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/galleria/GalleriaResponsiveDemo.js b/src/showcase/galleria/GalleriaResponsiveDemo.js
deleted file mode 100644
index 0849a712d7..0000000000
--- a/src/showcase/galleria/GalleriaResponsiveDemo.js
+++ /dev/null
@@ -1,183 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaResponsiveDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '960px',
-                numVisible: 4
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Responsive</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={7}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} style={{maxWidth: '800px'}} />
-                </div>
-
-                <GalleriaResponsiveDemoDoc></GalleriaResponsiveDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaResponsiveDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaResponsiveDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '960px',
-                numVisible: 4
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ display: 'block' }} />
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Responsive</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={7}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        circular={true} style={{maxWidth: '800px'}} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/galleria/GalleriaSubmenu.js b/src/showcase/galleria/GalleriaSubmenu.js
deleted file mode 100644
index 2f530ef654..0000000000
--- a/src/showcase/galleria/GalleriaSubmenu.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-
-export class GalleriaSubmenu extends Component {
-
-    render() {
-        return (
-            <div className="content-section content-submenu p-clearfix">
-                <ul>
-                    <li><Link to="/galleria">&#9679; Documentation</Link></li>
-                    <li><Link to="/galleria/basic">&#9679; Basic</Link></li>
-                    <li><Link to="/galleria/indicator">&#9679; Indicator</Link></li>
-                    <li><Link to="/galleria/thumbnail">&#9679; Thumbnail</Link></li>
-                    <li><Link to="/galleria/preview">&#9679; Preview</Link></li>
-                    <li><Link to="/galleria/responsive">&#9679; Responsive</Link></li>
-                    <li><Link to="/galleria/fullscreen">&#9679; FullScreen</Link></li>
-                    <li><Link to="/galleria/circular">&#9679; Circular</Link></li>
-                    <li><Link to="/galleria/caption">&#9679; Caption</Link></li>
-                </ul>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/galleria/GalleriaThumbnailDemo.js b/src/showcase/galleria/GalleriaThumbnailDemo.js
deleted file mode 100644
index 93c880e84c..0000000000
--- a/src/showcase/galleria/GalleriaThumbnailDemo.js
+++ /dev/null
@@ -1,261 +0,0 @@
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-import { GalleriaSubmenu } from './GalleriaSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GalleriaThumbnailDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.captionTemplate = this.captionTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-
-        this.responsiveOptions2 = [
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={`${item.thumbnailImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }}/>
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={`${item.previewImageSrc}`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    captionTemplate(item) {
-        return (
-            <React.Fragment>
-                <h4>{item.title}</h4>
-                <p>{item.alt}</p>
-            </React.Fragment>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <GalleriaSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Thumbnail</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        style={{maxWidth: '520px'}} />
-
-                    <h3>Position</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions2} numVisible={4}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="left"
-                        style={{maxWidth: '610px', marginTop: '2em'}} header="Left" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions2} numVisible={4}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="right"
-                        style={{maxWidth: '610px', marginTop: '2em'}} header="Right" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="top"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Top" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="bottom"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Bottom" />
-                </div>
-
-                <GalleriaThumbnailDemoDoc></GalleriaThumbnailDemoDoc>
-            </div>
-        );
-    }
-}
-
-export class GalleriaThumbnailDemoDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { GalleriaService } from '../service/GalleriaService';
-import { Galleria } from '../../components/galleria/Galleria';
-
-export class GalleriaThumbnailDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            images: null
-        };
-
-        this.galleriaService = new GalleriaService();
-        this.itemTemplate = this.itemTemplate.bind(this);
-        this.previewTemplate = this.previewTemplate.bind(this);
-        this.captionTemplate = this.captionTemplate.bind(this);
-
-        this.responsiveOptions = [
-            {
-                breakpoint: '1024px',
-                numVisible: 5
-            },
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-
-        this.responsiveOptions2 = [
-            {
-                breakpoint: '768px',
-                numVisible: 3
-            },
-            {
-                breakpoint: '560px',
-                numVisible: 1
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.galleriaService.getImages().then(data => this.setState({ images: data }));
-    }
-
-    itemTemplate(item) {
-        return (
-            <div className="p-grid p-nogutter p-justify-center">
-                <img src={\`\${item.thumbnailImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }}/>
-            </div>
-        );
-    }
-
-    previewTemplate(item) {
-        return <img src={\`\${item.previewImageSrc}\`} alt={item.alt} style={{ width: '100%', display: 'block' }} />
-    }
-
-    captionTemplate(item) {
-        return (
-            <React.Fragment>
-                <h4>{item.title}</h4>
-                <p>{item.alt}</p>
-            </React.Fragment>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Galleria - Thumbnail</h1>
-                        <p></p>
-
-                        <AppContentContext.Consumer>
-                            {context => <button onClick={() => context.onChangelogBtnClick("galleria")} className="layout-changelog-button">{context.changelogText}</button>}
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        style={{maxWidth: '520px'}} />
-
-                    <h3>Position</h3>
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions2} numVisible={4}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="left"
-                        style={{maxWidth: '610px', marginTop: '2em'}} header="Left" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions2} numVisible={4}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="right"
-                        style={{maxWidth: '610px', marginTop: '2em'}} header="Right" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={5}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="top"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Top" />
-
-                    <Galleria value={this.state.images} responsiveOptions={this.responsiveOptions} numVisible={4}
-                        previewItemTemplate={this.previewTemplate} thumbnailItemTemplate={this.itemTemplate}
-                        thumbnailsPosition="bottom"
-                        style={{maxWidth: '520px', marginTop: '2em'}} header="Bottom" />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/gmap/GMapDemo.js b/src/showcase/gmap/GMapDemo.js
deleted file mode 100644
index 2a9b3d2bf9..0000000000
--- a/src/showcase/gmap/GMapDemo.js
+++ /dev/null
@@ -1,567 +0,0 @@
-/*global google*/
-import React, {Component} from 'react';
-import {GMap} from '../../components/gmap/GMap';
-import {Dialog} from '../../components/dialog/Dialog';
-import {InputText} from '../../components/inputtext/InputText';
-import {Button} from '../../components/button/Button';
-import {Checkbox} from '../../components/checkbox/Checkbox';
-import {Growl} from '../../components/growl/Growl';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {loadGoogleMaps, removeGoogleMaps} from '../load/GoogleMaps';
-
-export class GMapDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            googleMapsReady: false,
-            dialogVisible: false,
-            markerTitle: '',
-            draggableMarker: false,
-            overlays: null,
-            selectedPosition: null
-        };
-
-        this.onMapClick = this.onMapClick.bind(this);
-        this.onOverlayClick = this.onOverlayClick.bind(this);
-        this.handleDragEnd = this.handleDragEnd.bind(this);
-        this.onMapReady = this.onMapReady.bind(this);
-        this.onHide = this.onHide.bind(this);
-        this.addMarker = this.addMarker.bind(this);
-    }
-
-    componentDidMount() {
-        loadGoogleMaps(() => {
-            this.setState({ googleMapsReady: true });
-        });
-    }
-
-    componentWillUnmount() {
-        removeGoogleMaps();
-    }
-
-    onMapClick(event) {
-        this.setState({
-            dialogVisible: true,
-            selectedPosition: event.latLng
-        });
-    }
-
-    onOverlayClick(event) {
-        let isMarker = event.overlay.getTitle !== undefined;
-
-        if(isMarker) {
-            let title = event.overlay.getTitle();
-            this.infoWindow = this.infoWindow||new google.maps.InfoWindow();
-            this.infoWindow.setContent('<div>' + title + '</div>');
-            this.infoWindow.open(event.map, event.overlay);
-            event.map.setCenter(event.overlay.getPosition());
-
-            this.growl.show({severity:'info', summary:'Marker Selected', detail: title});
-        }
-        else {
-            this.growl.show({severity:'info', summary:'Shape Selected', detail: ''});
-        }
-    }
-
-    handleDragEnd(event) {
-        this.growl.show({severity:'info', summary:'Marker Dragged', detail: event.overlay.getTitle()});
-    }
-
-    addMarker() {
-        let newMarker = new google.maps.Marker({
-                            position: {
-                                lat: this.state.selectedPosition.lat(),
-                                lng: this.state.selectedPosition.lng()
-                            },
-                            title: this.state.markerTitle,
-                            draggable: this.state.draggableMarker
-                        });
-
-        this.setState({
-            overlays: [...this.state.overlays, newMarker],
-            dialogVisible: false,
-            draggableMarker: false,
-            markerTitle: ''
-        });
-    }
-
-    onMapReady(event) {
-        this.setState({
-            overlays: [
-                new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
-                new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
-                new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
-                new google.maps.Polygon({paths: [
-                    {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
-                ], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
-                }),
-                new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
-                new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
-            ]
-        })
-    }
-
-    onHide(event) {
-        this.setState({dialogVisible: false});
-    }
-
-    render() {
-        const options = {
-            center: {lat: 36.890257, lng: 30.707417},
-            zoom: 12
-        };
-
-        const footer = <div>
-            <Button label="Yes" icon="pi pi-check" onClick={this.addMarker} />
-            <Button label="No" icon="pi pi-times" onClick={this.onHide} />
-        </div>;
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>GMap</h1>
-                        <p>GMap component provides integration with Google Maps API. This sample demontrates
-                        various uses cases like binding, overlays and events. Click the map to add a new item.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("gMap")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => { this.growl = el; }}></Growl>
-
-                    {
-                        this.state.googleMapsReady && <GMap overlays={this.state.overlays} options={options} style={{width: '100%', minHeight: '320px'}} onMapReady={this.onMapReady}
-                                                            onMapClick={this.onMapClick} onOverlayClick={this.onOverlayClick} onOverlayDragEnd={this.handleDragEnd} />
-                    }
-
-                    <Dialog header="New Location" visible={this.state.dialogVisible} width="300px" modal={true} footer={footer} onHide={this.onHide}>
-                        <div className="p-grid p-fluid">
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}><label htmlFor="title">Label</label></div>
-                            <div className="p-col-10"><InputText type="text" id="title" value={this.state.markerTitle} onChange={(e) => this.setState({markerTitle: e.target.value})} /></div>
-
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}>Lat</div>
-                            <div className="p-col-10"><InputText readOnly value={this.state.selectedPosition ? this.state.selectedPosition.lat() : ''} /></div>
-
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}>Lng</div>
-                            <div className="p-col-10"><InputText readOnly value={this.state.selectedPosition ? this.state.selectedPosition.lng() : ''} /></div>
-
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}><label htmlFor="drg">Drag</label></div>
-                            <div className="p-col-10"><Checkbox checked={this.state.draggableMarker} onChange={(event) => this.setState({draggableMarker: event.checked})}/></div>
-                        </div>
-                    </Dialog>
-                </div>
-
-                <GMapDoc />
-            </div>
-        );
-    }
-}
-
-
-export class GMapDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {GMap} from 'primereact/gmap';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>A map is initialized with options and dimensions. Refer to the google maps api for the list of available options.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-render() {
-    const options = {
-        center: {lat: 36.890257, lng: 30.707417},
-        zoom: 12
-    };
-
-    return (
-        <GMap options={options} style={{width: '100%', minHeight: '320px'}} />
-    )
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Overlays</h3>
-            <p>GMap can display any type of overlay such as markers, polygons and circles. Overlay instances are bound using the overlays property array. Overlays are aware
-            of binding so whenever the array changes, gmap updates itself.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-render() {
-    const options = {
-        center: {lat: 36.890257, lng: 30.707417},
-        zoom: 12
-    };
-
-    const overlays = [
-                new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
-                new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
-                new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
-                new google.maps.Polygon({paths: [
-                    {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
-                ], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
-                }),
-                new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
-                new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
-            ];
-
-    return (
-        <GMap overlays={overlays} options={options} style={{width: '100%', minHeight: '320px'}} />
-    )
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Events</h3>
-            <p>GMap provides common callbacks to hook into events including map click, overlay click and overlay dragging.</p>
-<CodeHighlight className="language-javascript">
-{`
-
-constructor() {
-    super();
-    this.onMapReady = this.onMapReady.bind(this);
-    this.onMapClick = this.onMapClick.bind(this);
-}
-
-onMapClick(event) {
-    //event: MouseEvent of Google Maps api
-}
-
-onMapReady(map) {
-    //map: Map instance
-}
-
-render() {
-    const options = {
-        center: {lat: 36.890257, lng: 30.707417},
-        zoom: 12
-    };
-
-    let overlays = [
-                new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
-                new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
-                new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
-                new google.maps.Polygon({paths: [
-                    {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
-                ], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
-                }),
-                new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
-                new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
-            ]
-
-    return (
-        <GMap overlays={overlays} options={options} style={{width: '100%', minHeight: '320px'}} onMapReady={this.onMapReady} onMapClick={this.onMapClick} />
-    )
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Google Maps API</h3>
-            <p>In case you need to access the map instance directly, use the getMap() method. In the following example, this.gmap.getMap() will provide the map instance. Alternative
-            is using onMapReady event as it passes the map instance as a parameter.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-render() {
-    const options = {
-        center: {lat: 36.890257, lng: 30.707417},
-        zoom: 12
-    };
-
-    return (
-        <GMap ref={(el) => this.gmap = el} options={options} style={{width: '100%', minHeight: '320px'}} />
-    )
-}
-
-`}
-</CodeHighlight>
-
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                        <tbody>
-                        <tr>
-                            <td>options</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Google Maps API configuration object.</td>
-                        </tr>
-                        <tr>
-                            <td>overlays</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of overlays to display.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onMapClick</td>
-                            <td>event: Google Maps MouseEvent</td>
-                            <td>Callback to invoke when map is clicked except markers.</td>
-                        </tr>
-                        <tr>
-                            <td>onMapDragEnd</td>
-                            <td>-</td>
-                            <td>Callback to invoke when map drag (i.e. pan) has ended.</td>
-                        </tr>
-                        <tr>
-                            <td>onMapReady</td>
-                            <td>event.map: Google Maps Instance</td>
-                            <td>Callback to invoke when the map is ready to be used.</td>
-                        </tr>
-                        <tr>
-                            <td>onOverlayClick</td>
-                            <td>originalEvent: Google Maps MouseEvent <br />
-                                overlay: Clicked overlay <br />
-                                map: Map instance <br /></td>
-                            <td>Callback to invoke when an overlay is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>onOverlayDragStart</td>
-                            <td>event: Google Maps MouseEvent</td>
-                            <td>Callback to invoke when an overlay drag starts.</td>
-                        </tr>
-                        <tr>
-                            <td>onOverlayDrag</td>
-                            <td>event: Google Maps MouseEvent</td>
-                            <td>Callback to invoke when an overlay is being dragged.</td>
-                        </tr>
-                        <tr>
-                            <td>onOverlayDragEnd</td>
-                            <td>event: Google Maps MouseEvent</td>
-                            <td>Callback to invoke when an overlay drag ends.</td>
-                        </tr>
-                        <tr>
-                            <td>onZoomChanged</td>
-                            <td>-</td>
-                            <td>Callback to invoke when zoom level has changed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Component does not apply any styling.</p>
-
-
-            <h3>Dependencies</h3>
-            <p>Google Maps script.</p>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/gmap" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-/*global google*/
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {GMap} from 'primereact/gmap';
-import {Dialog} from 'primereact/dialog';
-import {InputText} from 'primereact/inputtext';
-import {Button} from 'primereact/button';
-import {Checkbox} from 'primereact/checkbox';
-import {Growl} from 'primereact/growl';
-
-export class GMapDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            dialogVisible: false,
-            markerTitle: '',
-            draggableMarker: false,
-            overlays: null,
-            selectedPosition: null
-        };
-
-        this.onMapClick = this.onMapClick.bind(this);
-        this.onOverlayClick = this.onOverlayClick.bind(this);
-        this.handleDragEnd = this.handleDragEnd.bind(this);
-        this.onMapReady = this.onMapReady.bind(this);
-        this.onHide = this.onHide.bind(this);
-        this.addMarker = this.addMarker.bind(this);
-    }
-
-    onMapClick(event) {
-        this.setState({
-            dialogVisible: true,
-            selectedPosition: event.latLng
-        });
-    }
-
-    onOverlayClick(event) {
-        let isMarker = event.overlay.getTitle !== undefined;
-
-        if(isMarker) {
-            let title = event.overlay.getTitle();
-            this.infoWindow = this.infoWindow||new google.maps.InfoWindow();
-            this.infoWindow.setContent('<div>' + title + '</div>');
-            this.infoWindow.open(event.map, event.overlay);
-            event.map.setCenter(event.overlay.getPosition());
-
-            this.growl.show({severity:'info', summary:'Marker Selected', detail: title});
-        }
-        else {
-            this.growl.show({severity:'info', summary:'Shape Selected', detail: ''});
-        }
-    }
-
-    handleDragEnd(event) {
-        this.growl.show({severity:'info', summary:'Marker Dragged', detail: event.overlay.getTitle()});
-    }
-
-    addMarker() {
-        let newMarker = new google.maps.Marker({
-                            position: {
-                                lat: this.state.selectedPosition.lat(),
-                                lng: this.state.selectedPosition.lng()
-                            },
-                            title: this.state.markerTitle,
-                            draggable: this.state.draggableMarker
-                        });
-
-        this.setState({
-            overlays: [...this.state.overlays, newMarker],
-            dialogVisible: false,
-            draggableMarker: false,
-            markerTitle: ''
-        });
-    }
-
-    onMapReady(event) {
-        this.setState({
-            overlays: [
-                new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}),
-                new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}),
-                new google.maps.Marker({position: {lat: 36.885233, lng: 30.702323}, title:"Oldtown"}),
-                new google.maps.Polygon({paths: [
-                    {lat: 36.9177, lng: 30.7854},{lat: 36.8851, lng: 30.7802},{lat: 36.8829, lng: 30.8111},{lat: 36.9177, lng: 30.8159}
-                ], strokeOpacity: 0.5, strokeWeight: 1, fillColor: '#1976D2', fillOpacity: 0.35
-                }),
-                new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}),
-                new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2})
-            ]
-        })
-    }
-
-    onHide(event) {
-        this.setState({dialogVisible: false});
-    }
-
-    render() {
-        const options = {
-            center: {lat: 36.890257, lng: 30.707417},
-            zoom: 12
-        };
-
-        const footer = <div>
-            <Button label="Yes" icon="pi pi-check" onClick={this.addMarker} />
-            <Button label="No" icon="pi pi-times" onClick={this.onHide} />
-        </div>;
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>GMap</h1>
-                        <p>GMap component provides integration with Google Maps API. This sample demontrates
-                        various uses cases like binding, overlays and events. Click the map to add a new item.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => { this.growl = el; }}></Growl>
-
-                    <GMap overlays={this.state.overlays} options={options} style={{width: '100%', minHeight: '320px'}} onMapReady={this.onMapReady}
-                        onMapClick={this.onMapClick} onOverlayClick={this.onOverlayClick} onOverlayDragEnd={this.handleDragEnd} />
-
-                    <Dialog header="New Location" visible={this.state.dialogVisible} width="300px" modal={true} footer={footer} onHide={this.onHide}>
-                        <div className="p-grid p-fluid">
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}><label htmlFor="title">Label</label></div>
-                            <div className="p-col-10"><InputText type="text" id="title" value={this.state.markerTitle} onChange={(e) => this.setState({markerTitle: e.target.value})} /></div>
-
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}>Lat</div>
-                            <div className="p-col-10"><InputText readOnly value={this.state.selectedPosition ? this.state.selectedPosition.lat() : ''} /></div>
-
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}>Lng</div>
-                            <div className="p-col-10"><InputText readOnly value={this.state.selectedPosition ? this.state.selectedPosition.lng() : ''} /></div>
-
-                            <div className="p-col-2" style={{paddingTop:'.75em'}}><label htmlFor="drg">Drag</label></div>
-                            <div className="p-col-10"><Checkbox checked={this.state.draggableMarker} onChange={(event) => this.setState({draggableMarker: event.checked})}/></div>
-                        </div>
-                    </Dialog>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/growl/GrowlDemo.js b/src/showcase/growl/GrowlDemo.js
deleted file mode 100644
index 7749896b8d..0000000000
--- a/src/showcase/growl/GrowlDemo.js
+++ /dev/null
@@ -1,552 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Growl} from '../../components/growl/Growl';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class GrowlDemo extends Component {
-
-    constructor() {
-        super();
-        this.showSuccess = this.showSuccess.bind(this);
-        this.showInfo = this.showInfo.bind(this);
-        this.showWarn = this.showWarn.bind(this);
-        this.showError = this.showError.bind(this);
-        this.showMultiple = this.showMultiple.bind(this);
-        this.showSticky = this.showSticky.bind(this);
-        this.showCustom = this.showCustom.bind(this);
-        this.clear = this.clear.bind(this);
-    }
-
-    showSuccess() {
-        this.growl.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
-    }
-
-    showInfo() {
-        this.growl.show({severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks'});
-    }
-
-    showWarn() {
-        this.growl.show({severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
-    }
-
-    showError() {
-        this.growl.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-    }
-
-    showSticky() {
-        this.growl.show({severity: 'info', summary: 'Sticky Message', detail: 'You need to close Me', sticky: true});
-    }
-
-    showCustom() {
-        const summary = <span><i className="pi pi-check" /> <strong>PrimeReact</strong></span>;
-        const detail = <img alt="PrimeReact" src="http://github.com/showcase/resources/images/logo.png" width="80px" style={{backgroundColor: '#212121', marginLeft: '22px'}} />
-
-        this.growl.show({severity: 'info', summary: summary, detail: detail, sticky: true });
-    }
-
-    showMultiple() {
-        this.growl.show([
-            {severity:'info', summary:'Message 1', detail:'PrimeReact rocks'},
-            {severity:'info', summary:'Message 2', detail:'PrimeReact rocks'},
-            {severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
-        ]);
-    }
-
-    clear() {
-        this.growl.clear();
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction growl-demo">
-                    <div className="feature-intro">
-                        <h1>Growl</h1>
-                        <p>Growl is used to display messages in an overlay.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("growl")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation p-fluid">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3 style={{marginTop: 0}}>Severities</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showSuccess} label="Success" className="p-button-success" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showInfo} label="Info" className="p-button-info" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showWarn} label="Warn" className="p-button-warning" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showError} label="Error" className="p-button-danger" />
-                        </div>
-                    </div>
-
-                    <h3>Options</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showMultiple} label="Multiple" className="p-button-warning" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showSticky} label="Sticky" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showCustom} label="Custom" className="p-button-success" />
-                        </div>
-                    </div>
-
-                    <h3>Remove All</h3>
-                    <Button onClick={this.clear} label="Clear" style={{width: 'auto', marginLeft: '.5em'}}/>
-                </div>
-
-                <GrowlDoc></GrowlDoc>
-            </div>
-        )
-    }
-}
-
-export class GrowlDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Growl} from 'primereact/growl';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>A single message is represented by the Message interface in PrimeReact that defines various properties such as severity,
-               summary and detail. Messages are displayed by using the <i>show</i> method on the ref of the Growl instance.</p>
-
-            <p>Note that for animations, growl requires react-transition-group package.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Growl ref={(el) => this.growl = el} />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-this.growl.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
-
-`}
-</CodeHighlight>
-
-            <h3>Message API</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Severity of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>summary</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>Summary content of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>detail</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>Detail content of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the message can be closed manually using the close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>sticky</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>When enabled, message is not removed automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>life</td>
-                            <td>number</td>
-                            <td>3000</td>
-                            <td>Delay in milliseconds to close the message automatically.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Severities</h3>
-            <p>There are four possible values for the severity of a message.</p>
-
-            <ul>
-                <li>success</li>
-                <li>info</li>
-                <li>warn</li>
-                <li>error</li>
-            </ul>
-
-            <h3>Showing Messages</h3>
-            <p>Show method accepts either a single message or an array of messages.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Growl ref={(el) => this.growl = el}></Growl>
-
-<Button onClick={this.showSuccess} label="Success" className="p-button-success" />
-<Button onClick={this.showInfo} label="Info" className="p-button-info" />
-<Button onClick={this.showWarn} label="Warn" className="p-button-warning" />
-<Button onClick={this.showError} label="Error" className="p-button-danger" />
-<Button onClick={this.showMultiple} label="Multiple" />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-showSuccess() {
-    this.growl.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
-}
-
-showInfo() {
-    this.growl.show({severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks'});
-}
-
-showWarn() {
-    this.growl.show({severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
-}
-
-showError() {
-    this.growl.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-}
-
-showMultiple() {
-    this.growl.show([
-        {severity:'info', summary:'Message 1', detail:'PrimeReact rocks'},
-        {severity:'info', summary:'Message 2', detail:'PrimeReact rocks'},
-        {severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
-    ]);
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Closable</h3>
-            <p>Growls are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-this.growl.show({closable: false, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-
-`}
-</CodeHighlight>
-
-            <h3>Sticky</h3>
-            <p>Messages are cleared automatically after the timeout defined by <i>life</i> property which is 3 seconds by default. Use <i>sticky</i> mode to make them stay until
-            they are manually removed.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-//sticky
-this.growl.show({sticky: true, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-
-//automatically removed after 5 seconds
-this.growl.show({life: 5000, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-
-`}
-</CodeHighlight>
-
-            <h3>Position</h3>
-            <p>There are four positions available for the growl container defined by the <i>position</i> property that defaults to "topright". Other
-                valid values are "topleft", "bottomleft" and "bottomright"
-            </p>
-
-<CodeHighlight className="language-jsx">
-            {`
-<Growl ref={(el) => this.growl = el} position="topleft"></Growl>
-
-`}
-            </CodeHighlight>
-
-            <h3>Clearing Messages</h3>
-            <p><i>clear()</i> method removes all messages from Growl.</p>
-
-            <CodeHighlight className="language-jsx">
-                {`
-this.growl.clear();
-
-`}
-            </CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>baseZIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Base zIndex value to add to initial layering of PrimeReact components which start from 1000.</td>
-                        </tr>
-                        <tr>
-                            <td>position</td>
-                            <td>string</td>
-                            <td>topright</td>
-                            <td>Position of the growl in viewport, valid values are "topright", "topleft", "bottomleft" and "bottomright".</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onRemove</td>
-                            <td>message: Removed message </td>
-                            <td>Callback to invoke when a message is removed.</td>
-                        </tr>
-                        <tr>
-                            <td>onClick</td>
-                            <td>message: Clicked message </td>
-                            <td>Callback to invoke when a message gets clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-growl</td>
-                            <td>Main container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-growl-container</td>
-                            <td>Container of a message item.</td>
-                        </tr>
-                        <tr>
-                            <td>p-growl-item</td>
-                            <td>Message element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-growl-icon-close</td>
-                            <td>Close icon of a message.</td>
-                        </tr>
-                        <tr>
-                            <td>p-growl-image</td>
-                            <td>Severity icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-growl-message</td>
-                            <td>Container of message texts.</td>
-                        </tr>
-                        <tr>
-                            <td>p-growl-title</td>
-                            <td>Summary of the message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <ul>
-                    <li>react-transition-group</li>
-                </ul>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/growl" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Growl} from 'primereact/growl';
-import {Button} from 'primereact/button';
-
-export class GrowlDemo extends Component {
-
-    constructor() {
-        super();
-        this.showSuccess = this.showSuccess.bind(this);
-        this.showInfo = this.showInfo.bind(this);
-        this.showWarn = this.showWarn.bind(this);
-        this.showError = this.showError.bind(this);
-        this.showMultiple = this.showMultiple.bind(this);
-        this.showSticky = this.showSticky.bind(this);
-        this.showCustom = this.showCustom.bind(this);
-        this.clear = this.clear.bind(this);
-    }
-
-    showSuccess() {
-        this.growl.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
-    }
-
-    showInfo() {
-        this.growl.show({severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks'});
-    }
-
-    showWarn() {
-        this.growl.show({severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
-    }
-
-    showError() {
-        this.growl.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-    }
-
-    showSticky() {
-        this.growl.show({severity: 'info', summary: 'Sticky Message', detail: 'You need to close Me', sticky: true});
-    }
-
-    showCustom() {
-        const summary = <span><i className="pi pi-check" /> <strong>PrimeReact</strong></span>;
-        const detail = <img alt="PrimeReact" src="http://github.com/showcase/resources/images/logo.png" width="80px" style={{backgroundColor: '#212121', marginLeft: '22px'}} />
-
-        this.growl.show({severity: 'info', summary: summary, detail: detail, sticky: true });
-    }
-
-    showMultiple() {
-        this.growl.show([
-            {severity:'info', summary:'Message 1', detail:'PrimeReact rocks'},
-            {severity:'info', summary:'Message 2', detail:'PrimeReact rocks'},
-            {severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
-        ]);
-    }
-
-    clear() {
-        this.growl.clear();
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction growl-demo">
-                    <div className="feature-intro">
-                        <h1>Growl</h1>
-                        <p>Growl is used to display messages in an overlay.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation p-fluid">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3>Severities</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showSuccess} label="Success" className="p-button-success" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showInfo} label="Info" className="p-button-info" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showWarn} label="Warn" className="p-button-warning" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showError} label="Error" className="p-button-danger" />
-                        </div>
-                    </div>
-
-                    <h3>Options</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showMultiple} label="Multiple" className="p-button-warning" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showSticky} label="Sticky" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showCustom} label="Custom" className="p-button-success" />
-                        </div>
-                    </div>
-
-                    <h3>Remove All</h3>
-                    <Button onClick={this.clear} label="Clear" style={{width: 'auto', marginLeft: '.5em'}}/>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/home/HomeComponent.js b/src/showcase/home/HomeComponent.js
deleted file mode 100644
index 8696a31c6c..0000000000
--- a/src/showcase/home/HomeComponent.js
+++ /dev/null
@@ -1,213 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-
-export class HomeComponent extends Component {
-
-    render() {
-        return (
-            <div className="home">
-                <div className="introduction">
-                    <h1>The Most Complete UI Framework</h1>
-                    <h2>for REACT</h2>
-
-                    <Link to="/setup" className="link-button">Get Started</Link>
-                </div>
-                <div className="features">
-                    <h3>Why PrimeReact?</h3>
-                    <p className="features-tagline">Congratulations! <span role="img" aria-label="celebrate">🎉</span> Your quest to find the UI library for React is complete.</p>
-
-                    <p className="features-description">PrimeReact is a collection of rich UI components for React. All widgets are open source and free to use under MIT License. PrimeReact is developed by PrimeTek Informatics,
-                        a vendor with years of expertise in developing open source UI solutions. For project news and updates, please <a href="https://twitter.com/primereact" className="layout-content-link">follow us on twitter</a> and <a href="https://www.primefaces.org/category/primereact/" className="layout-content-link">visit our blog</a>.</p>
-
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="components" src="http://github.com/showcase/resources/images/home/react-components.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">70+ COMPONENTS</span>
-                                    <p>The most complete set of native widgets featuring 70+ easy to use components for all your UI requirements.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="opensource" src="http://github.com/showcase/resources/images/home/react-opensource.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">OPEN SOURCE</span>
-                                    <p>Hosted at <a href="https://github.com/primefaces/primereact" className="layout-content-link">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="themes" src="http://github.com/showcase/resources/images/home/react-themes.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">THEMES</span>
-                                    <p>Don’t get tied up in just one look&feel. Choose from a variety of options including material and bootstrap design.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="templates" src="http://github.com/showcase/resources/images/home/react-templates.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">TEMPLATES</span>
-                                    <p>Professionally designed highly customizable PrimeReact application templates to get started in no time.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="accesibility" src="http://github.com/showcase/resources/images/home/react-accesibility.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">ACCESSIBILITY</span>
-                                    <p>Fully accessible and in compliance with Section 508 standards.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="pro" src="http://github.com/showcase/resources/images/home/react-pro.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">PRO SUPPORT</span>
-                                    <p>With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="productivity" src="http://github.com/showcase/resources/images/home/react-productivity.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">PRODUCTIVITY</span>
-                                    <p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="community" src="http://github.com/showcase/resources/images/home/react-community.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">COMMUNITY</span>
-                                    <p>Join PrimeReact community to become a part of an active, vibrant and growing open source foundation.</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <div className="feature-card">
-                                <img alt="mobile" src="http://github.com/showcase/resources/images/home/react-mobile.png" />
-                                <div className="feature-card-detail">
-                                    <span className="feature-name">MOBILE</span>
-                                    <p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="whouses">
-                    <h3>Key Users</h3>
-                    <p>Open source products of <a href="http://www.primetek.com.tr/">PrimeTek</a> are used all around the world by 1M+ developers in Fortune 500 companies, corporations, government and educational
-                        institutions.</p>
-                    <div className="p-grid">
-                        <div className="p-col-6 p-md-2"><img alt="airbus" src="http://github.com/showcase/resources/images/home/airbus.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="amex" src="http://github.com/showcase/resources/images/home/amex.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="bmw" src="http://github.com/showcase/resources/images/home/bmw.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="ebay" src="http://github.com/showcase/resources/images/home/ebay.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="ford" src="http://github.com/showcase/resources/images/home/ford.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="fox" src="http://github.com/showcase/resources/images/home/fox.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="lufthansa" src="http://github.com/showcase/resources/images/home/lufthansa.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="mercedes" src="http://github.com/showcase/resources/images/home/mercedes.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="sap" src="http://github.com/showcase/resources/images/home/sap.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="unicredit" src="http://github.com/showcase/resources/images/home/unicredit.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="verizon" src="http://github.com/showcase/resources/images/home/verizon.svg"/></div>
-                        <div className="p-col-6 p-md-2"><img alt="viacom" src="http://github.com/showcase/resources/images/home/viacom.svg"/></div>
-                    </div>
-                </div>
-                <div className="templates">
-                    <h3>Free Application Template for PrimeReact</h3>
-                    <p>Sigma is a free and open source admin template based on <a href="https://github.com/facebookincubator/create-react-app" className="layout-content-link">create-react-app</a>.</p>
-
-                    <div className="p-grid">
-                        <div className="p-col-12">
-                            <a href="https://www.primefaces.org/sigma-react">
-                                <img alt="Sigma" src="http://github.com/showcase/resources/images/layouts/sigma-biggest.jpg" />
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div className="templates">
-
-                    <h3>Premium Application Templates for PrimeReact</h3>
-                    <p>Based on <a href="https://github.com/facebookincubator/create-react-app" className="layout-content-link">create-react-app</a>, develop awesome applications in no time using the premium templates
-                        of PrimeReact and impress your users.</p>
-
-                    <div className="p-grid templates-grid">
-                        <div className="p-col-12 p-md-4">
-							<a href="https://www.primefaces.org/layouts/sapphire-react">
-								<img alt="Sapphire" src="http://github.com/showcase/resources/images/layouts/sapphire-react.jpg" />
-							</a>
-						</div>
-                        <div className="p-col-12 p-md-4">
-                            <a href="https://www.primefaces.org/layouts/serenity-react">
-                                <img alt="Serenity" src="http://github.com/showcase/resources/images/layouts/serenity-react.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <a href="https://www.primefaces.org/layouts/ultima-react">
-                                <img alt="Ultima" src="http://github.com/showcase/resources/images/layouts/ultima-react.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-							<a href="https://www.primefaces.org/layouts/babylon-react">
-								<img alt="Babylon" src="http://github.com/showcase/resources/images/layouts/babylon-react.jpg" />
-							</a>
-						</div>
-                        <div className="p-col-12 p-md-4">
-                            <a href="https://www.primefaces.org/layouts/avalon-react">
-                                <img alt="Avalon" src="http://github.com/showcase/resources/images/layouts/avalon-react.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <a href="https://www.primefaces.org/layouts/apollo-react">
-                                <img alt="Apollo" src="http://github.com/showcase/resources/images/layouts/apollo-react.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-							<a href="https://www.primefaces.org/layouts/roma-react">
-								<img alt="Roma" src="http://github.com/showcase/resources/images/layouts/roma-react.jpg" />
-							</a>
-						</div>
-                    </div>
-                </div>
-
-                <div className="primereact-designer">
-                    <h3>PrimeReact Designer API</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12">
-                            <img alt="PrimeReact Designer" src="http://github.com/showcase/resources/images/primereact-designer.jpg" />
-                            <p><a href="https://www.primefaces.org/designer/primereact">Designer API</a> is a SASS based theme engine to create PrimeReact themes easily featuring over 500 variables,
-                                a demo application and a base sample theme. Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>
-
-                            <p>Visit <a href="https://www.primefaces.org/designer/primereact">Designer API HomePage</a> for more information, live demos and access to a trial version.</p>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="prosupport">
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-6">
-                            <h3>PrimeReact PRO Support</h3>
-                            <p>With PrimeReact PRO, it is easy to support, tune and add features to PrimeReact as if it were an in-house framework.</p>
-                            <p>PrimeReact PRO is a term based commercial support service. With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
-                            <a className="link-button2" href="/service/mailto:contact@primetek.com.tr">
-                                Get a Quote
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-6">
-                            <img alt="PRO" src="http://github.com/showcase/resources/images/home/icon-pro.svg"></img>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/icons/IconsPage.js b/src/showcase/icons/IconsPage.js
deleted file mode 100644
index 8ddbfa22e4..0000000000
--- a/src/showcase/icons/IconsPage.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, {Component} from 'react';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import {InputText} from "../../components/inputtext/InputText";
-import {IconService} from '../service/IconService';
-
-export class IconsPage extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            icons: [],
-            filteredIcons: []
-        };
-
-        this.iconService = new IconService();
-        this.onFilter = this.onFilter.bind(this);
-    }
-    componentDidMount() {
-        this.getIcons();
-    }
-
-    getIcons() {
-        this.iconService.getIcons().then(data => this.setState({icons: data,filteredIcons: data}));
-    }
-
-    onFilter(event) {
-        if( !this.state.icons){
-            this.setState({ filteredIcons : [] })
-        }
-
-        if (!event.target.value) {
-            this.setState({ filteredIcons : this.icons })
-        }
-        if(this.state.icons) {
-            let filtered = this.state.icons.filter( it => it.icon.tags[0].indexOf(event.target.value) !== -1);
-
-            this.setState({
-                filteredIcons :filtered
-            })
-        }
-    }
-
-    render() {
-        return (
-            <div className="icons-page">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Icons</h1>
-                        <p>PrimeReact components internally use <a href="https://github.com/primefaces/primeicons">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr/">PrimeTek</a>.</p>
-                    </div>
-                </div>
-
-                <div className="content-section documentation">
-                    <h3 style={{marginTop:0}}>Download</h3>
-                    <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
-<CodeHighlight className="language-javascript">
-{`npm install primeicons --save
-`}
-</CodeHighlight>
-
-                    <h3>Getting Started</h3>
-                    <p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
-                    A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
-
-<CodeHighlight className="language-jsx">
-{`<i className="pi pi-check"></i>
-<i className="pi pi-times"></i>
-`}
-</CodeHighlight>
-
-<i className="pi pi-check"></i>
-<i className="pi pi-times"></i>
-
-                    <h3>Size</h3>
-                    <p>Size of the icons can easily be changed using font-size property.</p>
-
-<CodeHighlight className="language-jsx">
-{`<i className="pi pi-check"></i>
-`}
-</CodeHighlight>
-
-                    <i className="pi pi-check"></i>
-
-<CodeHighlight className="language-jsx">
-{`<i className="pi pi-check" style={{'fontSize': '3em'}}></i>
-`}
-</CodeHighlight>
-
-                    <i className="pi pi-check" style={{'fontSize': '3em'}}></i>
-
-                    <h3>Spinning Animation</h3>
-                    <p>Special pi-spin class applies infinite rotate to an icon.</p>
-<CodeHighlight className="language-jsx">
-{`<i className="pi pi-spin pi-spinner" style={{'fontSize': '3em'}}></i>
-`}
-</CodeHighlight>
-
-                    <i className="pi pi-spin pi-spinner" style={{'fontSize': '3em'}}></i>
-
-                    <h3>List of Icons</h3>
-                    <p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
-
-                    <InputText className="icon-filter" placeholder="Search an icon" onChange={this.onFilter}
-                               style={{width: '100%', padding: '1em', margin: '16px 0 26px 0'}}/>
-
-                    <div className="p-grid icons-list">
-                        {
-                            this.state.filteredIcons && this.state.filteredIcons.map((icon, index)=>{
-                                return (
-                                    <div className="p-col-12 p-md-2" key={index}>
-                                        <i className={"pi pi-"+ icon.properties.name}></i>
-                                        <div>pi-{icon.properties.name}</div>
-                                    </div>
-                                );
-                            })
-                        }
-                    </div>
-
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/inplace/InplaceDemo.js b/src/showcase/inplace/InplaceDemo.js
deleted file mode 100644
index 94027177c0..0000000000
--- a/src/showcase/inplace/InplaceDemo.js
+++ /dev/null
@@ -1,411 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Inplace,InplaceDisplay,InplaceContent} from '../../components/inplace/Inplace';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {InputText} from '../../components/inputtext/InputText';
-import {DataTable} from '../../components/datatable/DataTable';
-import {Column} from '../../components/column/Column';
-import {CarService} from '../service/CarService';
-
-export class InplaceDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-
-        this.onOpen = this.onOpen.bind(this);
-    }
-
-    onOpen() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Inplace</h1>
-                        <p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("inplace")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Input</h3>
-                    <Inplace closable={true}>
-                        <InplaceDisplay>
-                            Click to Edit
-                        </InplaceDisplay>
-                        <InplaceContent>
-                            <InputText autoFocus />
-                        </InplaceContent>
-                    </Inplace>
-
-                    <h3>Image</h3>
-                    <Inplace>
-                        <InplaceDisplay>
-                            <span className="pi pi-search" style={{verticalAlign: 'middle'}}></span>
-                            <span style={{marginLeft:'.5em', verticalAlign: 'middle'}}>View Picture</span>
-                        </InplaceDisplay>
-                        <InplaceContent>
-                            <img src="http://github.com/showcase/resources/demo/images/galleria/galleria5.jpg" alt="Nature" />
-                        </InplaceContent>
-                    </Inplace>
-
-                    <h3>Lazy Data</h3>
-                    <Inplace onOpen={this.onOpen}>
-                        <InplaceDisplay>
-                            View Data
-                        </InplaceDisplay>
-                        <InplaceContent>
-                            <DataTable value={this.state.cars}>
-                                <Column field="vin" header="Vin" />
-                                <Column field="year" header="Year" />
-                                <Column field="brand" header="Brand" />
-                                <Column field="color" header="Color" />
-                            </DataTable>
-                        </InplaceContent>
-                    </Inplace>
-                </div>
-
-                <InplaceDoc></InplaceDoc>
-            </div>
-        )
-    }
-}
-
-export class InplaceDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Inplace} from 'primereact/inplace';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Inplace requires InplaceDisplay and InplaceContent component as children to define the content to display in each state. Active state of the inplace
-                can either be managed as a Controlled or Uncontrolled component.</p>
-
-            <p>In controlled mode, <i>active</i> and <i>onToggle</i> properties need to be defined to control the active state.</p>
-                <CodeHighlight className="language-jsx">
-{`
-<Inplace active={this.state.active} onToggle={(e) => this.setState({active: e.value})}>
-    <InplaceDisplay>
-        Click to Edit
-    </InplaceDisplay>
-    <InplaceContent>
-        <InputText />
-    </InplaceContent>
-</Inplace>
-
-`}
-</CodeHighlight>
-
-                <p>In uncontrolled mode, no additional properties are required. Initial state can be still be provided using the <i>active</i> property in uncontrolled mode however
-                it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the active state, prefer to use the component as controlled.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Inplace>
-    <InplaceDisplay>
-        Click to Edit
-    </InplaceDisplay>
-    <InplaceContent>
-        <InputText autoFocus />
-    </InplaceContent>
-</Inplace>
-
-`}
-</CodeHighlight>
-
-            <h3>Closable</h3>
-            <p><i>closable</i> property is handy within forms as it enables to get back to output mode after editing is completed using a button displayed next to the form field.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Inplace closable={true}>
-    <InplaceDisplay>
-        Click to Edit
-    </InplaceDisplay>
-    <InplaceContent>
-        <InputText autoFocus />
-    </InplaceContent>
-</Inplace>
-
-`}
-</CodeHighlight>
-
-            <h3>Lazy Loading</h3>
-            <p>Inplace allows lazy loading content so that the content gets initialized after getting opened instead of on load. Here is an example that loads, data of a table
-                if the user decides to open the inplace.
-            </p>
-            <CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Inplace,InplaceDisplay,InplaceContent} from '../../components/inplace/Inplace';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class InplaceDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-
-        this.onOpen = this.onOpen.bind(this);
-    }
-
-    onOpen() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <Inplace onOpen={this.onOpen}>
-                <InplaceDisplay>
-                    View Data
-                </InplaceDisplay>
-                <InplaceContent>
-                    <DataTable value={this.state.cars}>
-                        <Column field="vin" header="Vin" />
-                        <Column field="year" header="Year" />
-                        <Column field="brand" header="Brand" />
-                        <Column field="color" header="Color" />
-                    </DataTable>
-                </InplaceContent>
-            </Inplace>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>active</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the content is displayed or not.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays a button to switch back to display mode.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onOpen</td>
-                            <td>event: browser event </td>
-                            <td>Callback to invoke when inplace is opened.</td>
-                        </tr>
-                        <tr>
-                            <td>onClose</td>
-                            <td>event: browser event </td>
-                            <td>Callback to invoke when inplace is closed.</td>
-                        </tr>
-                        <tr>
-                            <td>onToggle</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.value: active state as a boolean
-                            </td>
-                            <td>Callback to invoke when inplace is opened or closed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inplace</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inplace-display</td>
-                            <td>Display container</td>
-                        </tr>
-                        <tr>
-                            <td>p-inplace-content</td>
-                            <td>Content container</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/fieldset" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Inplace,InplaceDisplay,InplaceContent} from '../../components/inplace/Inplace';
-import {InputText} from 'primereact/inputtext';
-import {DataTable} from 'primereact/datatable';
-import {Column} from 'primereact/column';
-import {CarService} from '../service/CarService';
-
-export class InplaceDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-        this.carservice = new CarService();
-
-        this.onOpen = this.onOpen.bind(this);
-    }
-
-    onOpen() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Inplace</h1>
-                        <p>Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Input</h3>
-                    <Inplace closable={true}>
-                        <InplaceDisplay>
-                            Click to Edit
-                        </InplaceDisplay>
-                        <InplaceContent>
-                            <InputText autoFocus />
-                        </InplaceContent>
-                    </Inplace>
-
-                    <h3>Image</h3>
-                    <Inplace>
-                        <InplaceDisplay>
-                            <span className="pi pi-search" style={{verticalAlign: 'middle'}}></span>
-                            <span style={{marginLeft:'.5em', verticalAlign: 'middle'}}>View Picture</span>
-                        </InplaceDisplay>
-                        <InplaceContent>
-                            <img src="http://github.com/showcase/resources/demo/images/galleria/galleria5.jpg" alt="Nature" />
-                        </InplaceContent>
-                    </Inplace>
-
-                    <h3>Lazy Data</h3>
-                    <Inplace onOpen={this.onOpen}>
-                        <InplaceDisplay>
-                            View Data
-                        </InplaceDisplay>
-                        <InplaceContent>
-                            <DataTable value={this.state.cars}>
-                                <Column field="vin" header="Vin" />
-                                <Column field="year" header="Year" />
-                                <Column field="brand" header="Brand" />
-                                <Column field="color" header="Color" />
-                            </DataTable>
-                        </InplaceContent>
-                    </Inplace>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/inputgroup/InputGroupDemo.js b/src/showcase/inputgroup/InputGroupDemo.js
deleted file mode 100644
index a0717abed8..0000000000
--- a/src/showcase/inputgroup/InputGroupDemo.js
+++ /dev/null
@@ -1,309 +0,0 @@
-import React, { Component } from 'react';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {InputText} from "../../components/inputtext/InputText";
-import {Button} from "../../components/button/Button";
-import {Checkbox} from "../../components/checkbox/Checkbox";
-import {RadioButton} from "../../components/radiobutton/RadioButton";
-
-export class InputGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            username: null,
-            price: null,
-            website1: null,
-            website2: null
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputGroup</h1>
-                        <p>Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside
-                            .p-inputgroup element. Multiple addons can be used within the same group as well.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("inputGroup")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Addons</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <i className="pi pi-user"></i>
-                                </span>
-                                <InputText placeholder="Username" />
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">$</span>
-                                <InputText placeholder="Price" />
-                                <span className="p-inputgroup-addon">.00</span>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">W</span>
-                                <InputText placeholder="Website" />
-                            </div>
-                        </div>
-                    </div>
-
-
-                    <h3>Multiple Addons</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <i className="pi pi-clock"></i>
-                                </span>
-                                <span className="p-inputgroup-addon">
-                                    <i className="pi pi-star"></i>
-                                </span>
-                                <InputText placeholder="Price" />
-                                <span className="p-inputgroup-addon">$</span>
-                                <span className="p-inputgroup-addon">.00</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h3>Button Addons</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <Button label="Search"/>
-                                <InputText placeholder="Keyword"/>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <InputText placeholder="Keyword"/>
-                                <Button icon="pi pi-search" className="p-button-warning"/>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <Button icon="pi pi-check" className="p-button-success"/>
-                                <InputText placeholder="Vote"/>
-                                <Button icon="pi pi-times" className="p-button-danger"/>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h3>Checkbox and RadioButton</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <Checkbox checked={this.state.username} onChange={(e) => this.setState({username: !this.state.username})} />
-                                </span>
-                                <InputText placeholder="Username"/>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <InputText placeholder="Price"/>
-                                <span className="p-inputgroup-addon">
-                                    <RadioButton checked={this.state.price} value="price" onChange={(e) => this.setState({price: e.value})} />
-                                </span>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <Checkbox checked={this.state.website1} onChange={(e) => this.setState({website1: !this.state.website1})} />
-                                </span>
-                                <InputText placeholder="Website"/>
-                                <span className="p-inputgroup-addon">
-                                    <RadioButton checked={this.state.website2} value="price" onChange={(e) => this.setState({website2: e.value})} />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <InputGroupDoc/>
-            </div>
-        );
-    }
-}
-
-class InputGroupDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/inputgroup" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import {InputText} from "primereact/inputtext";
-import {Button} from "primereact/button";
-import {Checkbox} from "primereact/checkbox";
-import {RadioButton} from "primereact/radiobutton";
-
-export class InputGroupDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            username: null,
-            price: null,
-            website1: null,
-            website2: null
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputGroup</h1>
-                        <p>Text, icon, buttons and other content can be grouped next to an input by wrapping the addons and input inside
-                            .p-inputgroup element. Multiple addons can be used within the same group as well.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Addons</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <i className="pi pi-user"></i>
-                                </span>
-                                <InputText placeholder="Username" />
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">$</span>
-                                <InputText placeholder="Price" />
-                                <span className="p-inputgroup-addon">.00</span>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">W</span>
-                                <InputText placeholder="Website" />
-                            </div>
-                        </div>
-                    </div>
-
-
-                    <h3>Multiple Addons</h3>
-                    <div className="p-grid">
-                        <div className="p-col-12">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <i className="pi pi-clock"></i>
-                                </span>
-                                <span className="p-inputgroup-addon">
-                                    <i className="pi pi-star"></i>
-                                </span>
-                                <InputText placeholder="Price" />
-                                <span className="p-inputgroup-addon">$</span>
-                                <span className="p-inputgroup-addon">.00</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h3>Button Addons</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <Button label="Search"/>
-                                <InputText placeholder="Keyword"/>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <InputText placeholder="Keyword"/>
-                                <Button icon="pi pi-search" className="p-button-warning"/>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <Button icon="pi pi-check" className="p-button-success"/>
-                                <InputText placeholder="Vote"/>
-                                <Button icon="pi pi-times" className="p-button-danger"/>
-                            </div>
-                        </div>
-                    </div>
-
-                    <h3>Checkbox and RadioButton</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <Checkbox checked={this.state.username} onChange={(e) => this.setState({username: !this.state.username})} />
-                                </span>
-                                <InputText placeholder="Username"/>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <InputText placeholder="Price"/>
-                                <span className="p-inputgroup-addon">
-                                    <RadioButton checked={this.state.price} value="price" onChange={(e) => this.setState({price: e.value})} />
-                                </span>
-                            </div>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <div className="p-inputgroup">
-                                <span className="p-inputgroup-addon">
-                                    <Checkbox checked={this.state.website1} onChange={(e) => this.setState({website1: !this.state.website1})} />
-                                </span>
-                                <InputText placeholder="Website"/>
-                                <span className="p-inputgroup-addon">
-                                    <RadioButton checked={this.state.website2} value="price" onChange={(e) => this.setState({website2: e.value})} />
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/inputmask/InputMaskDemo.js b/src/showcase/inputmask/InputMaskDemo.js
deleted file mode 100644
index 44402ecf1d..0000000000
--- a/src/showcase/inputmask/InputMaskDemo.js
+++ /dev/null
@@ -1,391 +0,0 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import {InputMask} from '../../components/inputmask/InputMask';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class InputMaskDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            val1: null,
-            val2: null,
-            val3: null,
-            val4: null,
-            val5: null,
-            val6: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputMask</h1>
-                        <p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("inputMask")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation inputgrid-demo">
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <h3>Basic {this.state.val1}</h3>
-                            <InputMask mask="99-999999" value={this.state.val1} placeholder="99-999999" onChange={(e) => this.setState({val1: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>SSN {this.state.val2}</h3>
-                            <InputMask mask="999-99-9999" value={this.state.val2} placeholder="999-99-9999" onChange={(e) => this.setState({val2: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Date {this.state.val3}</h3>
-                            <InputMask mask="99/99/9999" value={this.state.val3} placeholder="99/99/9999" slotChar="mm/dd/yyyy" onChange={(e) => this.setState({val3: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Phone {this.state.val4}</h3>
-                            <InputMask mask="(999) 999-9999" value={this.state.val4} placeholder="(999) 999-9999" onChange={(e) => this.setState({val4: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Phone Ext {this.state.val5}</h3>
-                            <InputMask mask="(999) 999-9999? x99999" value={this.state.val5} placeholder="(999) 999-9999? x99999" onChange={(e) => this.setState({val5: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Serial Number {this.state.val6}</h3>
-                            <InputMask mask="a*-999-a999" value={this.state.val6} placeholder="a*-999-a999" onChange={(e) => this.setState({val6: e.value})}></InputMask>
-                        </div>
-                    </div>
-                </div>
-                <InputMaskDoc></InputMaskDoc>
-            </div>
-        );
-    }
-}
-
-class InputMaskDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {InputMask} from 'primereact/inputmask';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>InputMask is used as a controlled component with <i>value</i> and <i>onChange</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<InputMask mask="99-999999" value={this.state.value} onChange={(e) => this.setState({value: e.value})}></InputMask>
-
-`}
-</CodeHighlight>
-
-            <h3>Mask</h3>
-            <p>Mask format can be a combination of the the following built-in definitions.</p>
-
-            <ul>
-                <li>
-                    a - Alpha character (A-Z,a-z)
-                </li>
-                <li>
-                    9 - Numeric character (0-9)
-                </li>
-                <li>
-                    * - Alpha numberic character (A-Z,a-z,0-9)
-                </li>
-            </ul>
-
-<CodeHighlight className="language-jsx">
-{`
-<InputMask mask="a*-999-a999" value={this.state.value} onChange={(e) => this.setState({value: e.value})}></InputMask>
-
-`}
-</CodeHighlight>
-
-            <h3>SlotChar</h3>
-            <p>Underscore is the default placeholder for a mask and this can be customized using <i>slotChart</i> option.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<InputMask mask="99/99/9999" value={this.state.value} slotChar="mm/dd/yyyy" onChange={(e) => this.setState({value: e.value})}></InputMask>
-
-`}
-</CodeHighlight>
-
-            <h3>Optional Values</h3>
-            <p>If the input does not complete the mask definition, it is cleared by default.
-               Use <i>autoClear</i> property to control this behavior. In addition, certain part of
-               a mask can be made optional by using ? symbol where anything after the question
-               mark becomes optional.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<InputMask mask="(999) 999-9999? x99999" value={this.state.value} onChange={(e) => this.setState({value: e.value})}></InputMask>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                         <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                         </tr>
-                         <tr>
-                            <td>value</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                         </tr>
-                         <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>text</td>
-                            <td>HTML5 input type</td>
-                        </tr>
-                        <tr>
-                            <td>mask</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Mask pattern.</td>
-                        </tr>
-                        <tr>
-                            <td>slotChar</td>
-                            <td>string</td>
-                            <td>-</td>
-                            <td>Placeholder character in mask, default is underscore.</td>
-                        </tr>
-                        <tr>
-                            <td>autoClear</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Clears the incomplete value on blur.</td>
-                        </tr>
-                        <tr>
-                            <td>unmask</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if model sets the raw unmasked value to bound value or the formatted mask value.</td>
-                        </tr>
-                         <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Advisory information to display on input.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Size of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>maxlength</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of character allows in the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Specifies tab order of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element value cannot be altered.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field is read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input field.</td>
-                        </tr>
-                        <tr>
-                             <td>required</td>
-                             <td>boolean</td>
-                             <td>false</td>
-                             <td>When present, it specifies that the element must be filled out before submitting the form.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onComplete</td>
-                            <td>event: Browser event<br/>
-                                value: New value of the component</td>
-                            <td>Callback to invoke on when user completes the mask pattern.</td>
-                        </tr>
-                        <tr>
-                            <td>onChange</td>
-                            <td>originalEvent: Browser event <br/>
-                                value: New value of the component</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Styling is same as <Link to="/inputtext"> inputtext component</Link>, for theming classes visit <Link to="/theming"> theming page.</Link></p>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/inputmask" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {InputMask} from 'primereact/inputmask';
-
-export class InputMaskDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            val1: null,
-            val2: null,
-            val3: null,
-            val4: null,
-            val5: null,
-            val6: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputMask</h1>
-                        <p>InputMask component is used to enter input in a certain format such as numeric, date, currency, email and phone.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation inputgrid-demo">
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <h3>Basic {this.state.val1}</h3>
-                            <InputMask mask="99-999999" value={this.state.val1} placeholder="99-999999" onChange={(e) => this.setState({val1: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>SSN {this.state.val2}</h3>
-                            <InputMask mask="999-99-9999" value={this.state.val2} placeholder="999-99-9999" onChange={(e) => this.setState({val2: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Date {this.state.val3}</h3>
-                            <InputMask mask="99/99/9999" value={this.state.val3} placeholder="99/99/9999" slotChar="mm/dd/yyyy" onChange={(e) => this.setState({val3: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Phone {this.state.val4}</h3>
-                            <InputMask mask="(999) 999-9999" value={this.state.val4} placeholder="(999) 999-9999" onChange={(e) => this.setState({val4: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Phone Ext {this.state.val5}</h3>
-                            <InputMask mask="(999) 999-9999? x99999" value={this.state.val5} placeholder="(999) 999-9999? x99999" onChange={(e) => this.setState({val5: e.value})}></InputMask>
-                        </div>
-
-                        <div className="p-col-12 p-md-4">
-                            <h3>Serial Number {this.state.val6}</h3>
-                            <InputMask mask="a*-999-a999" value={this.state.val6} placeholder="a*-999-a999" onChange={(e) => this.setState({val6: e.value})}></InputMask>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/inputnumber/InputNumberDemo.js b/src/showcase/inputnumber/InputNumberDemo.js
deleted file mode 100644
index 1397cae996..0000000000
--- a/src/showcase/inputnumber/InputNumberDemo.js
+++ /dev/null
@@ -1,809 +0,0 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import {InputNumber} from '../../components/inputnumber/InputNumber';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class InputNumberDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value1: 42723,
-            value2: 58151,
-            value3: 2351.35,
-            value4: 50,
-            value5: 151351,
-            value6: 115744,
-            value7: 635524,
-            value8: 732762,
-            value9: 1500,
-            value10: 2500,
-            value11: 4250,
-            value12: 5002,
-            value13: 20,
-            value14: 50,
-            value15: 10,
-            value16: 20,
-            value17: 20,
-            value18: 10.50,
-            value19: 25,
-            value20: 50
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputNumber</h1>
-                        <p>InputNumber is an input component to provide numerical input.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("inputNumber")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation inputnumber-demo">
-                    <h3>Numerals</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            Integer Only
-                            <InputNumber value={this.state.value1} onChange={(e) => this.setState({value1: e.value})} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Without Grouping
-                            <InputNumber value={this.state.value2} onChange={(e) => this.setState({value2: e.value})} mode="decimal" useGrouping={false} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Min-Max Fraction Digits
-                            <InputNumber value={this.state.value3} onChange={(e) => this.setState({value3: e.value})} mode="decimal" minFractionDigits={2} maxFractionDigits={5} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Min-Max Boundaries
-                            <InputNumber value={this.state.value4} onChange={(e) => this.setState({value4: e.value})} mode="decimal" min={0} max={100} />
-                        </div>
-
-                        <div className="p-col-12 p-md-3">
-                            User Locale
-                            <InputNumber value={this.state.value5} onChange={(e) => this.setState({value5: e.value})} mode="decimal" minFractionDigits={2} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            United State Locale
-                            <InputNumber value={this.state.value6} onChange={(e) => this.setState({value6: e.value})} mode="decimal" locale="en-US" minFractionDigits={2}/>
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            German Locale
-                            <InputNumber value={this.state.value7} onChange={(e) => this.setState({value7: e.value})} mode="decimal" locale="de-DE" minFractionDigits={2}/>
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Indian Locale
-                            <InputNumber value={this.state.value8} onChange={(e) => this.setState({value8: e.value})} mode="decimal" locale="en-IN" minFractionDigits={2} />
-                        </div>
-                    </div>
-
-                    <h3>Currency</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            United States
-                            <InputNumber value={this.state.value9} onChange={(e) => this.setState({value9: e.value})} mode="currency" currency="USD" locale="en-US" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Germany
-                            <InputNumber value={this.state.value10} onChange={(e) => this.setState({value10: e.value})} mode="currency" currency="EUR" locale="de-DE" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            India
-                            <InputNumber value={this.state.value11} onChange={(e) => this.setState({value11: e.value})} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN"/>
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Japan
-                            <InputNumber value={this.state.value12} onChange={(e) => this.setState({value12: e.value})} mode="currency" currency="JPY" locale="jp-JP"/>
-                        </div>
-                    </div>
-
-                    <h3>Prefix and Suffix</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            Mile
-                            <InputNumber value={this.state.value13} onChange={(e) => this.setState({value13: e.value})} suffix=" mi" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Percent
-                            <InputNumber value={this.state.value14} onChange={(e) => this.setState({value14: e.value})} prefix="%" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Expiry
-                            <InputNumber value={this.state.value15} onChange={(e) => this.setState({value15: e.value})}  prefix="Expires in " suffix=" days" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Temperature
-                            <InputNumber value={this.state.value16} onChange={(e) => this.setState({value16: e.value})} prefix="&uarr; " suffix="℃" min={0} max={40} />
-                        </div>
-                    </div>
-
-                    <h3>Buttons</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            Stacked
-                            <InputNumber value={this.state.value17} onChange={(e) => this.setState({value17: e.value})} showButtons mode="currency" currency="USD" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            Horizontal with Step
-                            <InputNumber value={this.state.value18} onChange={(e) => this.setState({value18: e.value})} showButtons buttonLayout="horizontal" spinnerMode="horizontal" step={0.25}
-                                decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"/>
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <div>Vertical</div>
-                            <InputNumber value={this.state.value19} onChange={(e) => this.setState({value19: e.value})} mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
-                                decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                             Min-Max Boundaries
-                            <InputNumber value={this.state.value20} onChange={(e) => this.setState({value20: e.value})} mode="decimal" showButtons min={0} max={100} />
-                        </div>
-                    </div>
-
-                </div>
-
-                <InputNumberDoc />
-            </div>
-        );
-    }
-}
-
-class InputNumberDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {InputNumber} from 'primereact/inputnumber';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>InputNumber is used as a controlled input with <i>value</i> and <i>onChange</i> properties. Component always provides a number type although formatting on the input is a string.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<InputNumber value={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Decimal Mode</h3>
-            <p>Format is defined using the <i>mode</i> property, "decimal" is the default value allowing only integers when there is no other configuration.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputNumber value={this.state.value} onChange={(e) => this.setState({value: e.value})} mode="decimal" />
-
-`}
-</CodeHighlight>
-
-            <p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputNumber value={this.state.value1} onChange={(e) => this.setState({value1: e.value})} mode="decimal" minFractionDigits={2} />
-<InputNumber value={this.state.value2} onChange={(e) => this.setState({value2: e.value})} mode="decimal" minFractionDigits={2} maxFracionDigits={2} />
-
-`}
-</CodeHighlight>
-
-            <p><i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per <a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.</p>
-            <CodeHighlight className="language-jsx">
-{`
-User Locale
-<InputNumber value={this.state.value1} onChange={(e) => this.setState({value1: e.value})} mode="decimal" minFractionDigits={2} />
-
-United State Locale
-<InputNumber value={this.state.value2} onChange={(e) => this.setState({value2: e.value})} mode="decimal" locale="en-US" minFractionDigits={2}/>
-
-German Locale
-<InputNumber value={this.state.value3} onChange={(e) => this.setState({value3: e.value})} mode="decimal" locale="de-DE" minFractionDigits={2}/>
-
-Indian Locale
-<InputNumber value={this.state.value4} onChange={(e) => this.setState({value4: e.value})} mode="decimal" locale="en-IN" minFractionDigits={2} />
-`}
-</CodeHighlight>
-
-            <h3>Currency</h3>
-            <p>Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option
-            allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
-            <CodeHighlight className="language-jsx">
-{`
-United States
-<InputNumber value={this.state.value1} onChange={(e) => this.setState({value1: e.value})} mode="currency" currency="USD" locale="en-US" />
-
-Germany
-<InputNumber value={this.state.value2} onChange={(e) => this.setState({value2: e.value})} mode="currency" currency="EUR" locale="de-DE" />
-
-India
-<InputNumber value={this.state.value3} onChange={(e) => this.setState({value3: e.value})} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN"/>
-
-Japan
-<InputNumber value={this.state.value4} onChange={(e) => this.setState({value4: e.value})} mode="currency" currency="JPY" locale="jp-JP"/>
-`}
-</CodeHighlight>
-
-            <h3>Prefix and Suffix</h3>
-            <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
-<CodeHighlight className="language-jsx">
-{`
-Mile
-<InputNumber value={this.state.value1} onChange={(e) => this.setState({value1: e.value})} suffix=" mi" />
-
-Percent
-<InputNumber value={this.state.value2} onChange={(e) => this.setState({value2: e.value})} prefix="%" />
-
-Expiry
-<InputNumber value={this.state.value3} onChange={(e) => this.setState({value3: e.value})}  prefix="Expires in " suffix=" days" />
-
-Temperature
-<InputNumber value={this.state.value4} onChange={(e) => this.setState({value4: e.value})} prefix="&uarr; " suffix="℃" min={0} max={40} />
-`}
-</CodeHighlight>
-
-            <h3>Buttons</h3>
-            <p>Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas
-            "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down arrow keys can be used to spin the values with keyboard.</p>
-<CodeHighlight className="language-jsx">
-{`
-Stacked
-<InputNumber value={this.state.value1} onChange={(e) => this.setState({value1: e.value})} showButtons mode="currency" currency="USD" />
-
-Horizontal
-<InputNumber value={this.state.value2} onChange={(e) => this.setState({value2: e.value})} showButtons buttonLayout="horizontal" spinnerMode="horizontal"
-    decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"/>
-
-Vertical
-<InputNumber value={this.state.value3} onChange={(e) => this.setState({value3: e.value})} mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical" style={{width: '6em'}}
-    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
-
-`}
-</CodeHighlight>
-
-            <h3>Step</h3>
-            <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputNumber value={this.state.value} onChange={(e) => this.setState({value: e.value})} step={0.25} />
-
-`}
-</CodeHighlight>
-
-
-            <h3>Min and Max Boundaries</h3>
-            <p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputNumber value={this.state.value} onChange={(e) => this.setState({value: e.value})} min={0} max={100} />
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>value</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>format</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to format the value.</td>
-                        </tr>
-                        <tr>
-                            <td>showButtons</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Displays spinner buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>buttonLayout</td>
-                            <td>string</td>
-                            <td>stacked</td>
-                            <td>Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".</td>
-                        </tr>
-                        <tr>
-                            <td>incrementButtonClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the increment button.</td>
-                        </tr>
-                        <tr>
-                            <td>decrementButtonClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the decrement button.</td>
-                        </tr>
-                        <tr>
-                            <td>incrementButtonIcon</td>
-                            <td>string</td>
-                            <td>pi pi-caret-up</td>
-                            <td>Style class of the increment button.</td>
-                        </tr>
-                        <tr>
-                            <td>decrementButtonIcon</td>
-                            <td>string</td>
-                            <td>pi pi-caret-down</td>
-                            <td>Style class of the decrement button.</td>
-                        </tr>
-                        <tr>
-                            <td>locale</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Locale to be used in formatting.</td>
-                        </tr>
-                        <tr>
-                            <td>localeMatcher</td>
-                            <td>string</td>
-                            <td>best fit</td>
-                            <td>The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit".
-                                See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">Locale Negotation</a> for details.
-                            </td>
-                        </tr>
-                        <tr>
-                            <td>mode</td>
-                            <td>string</td>
-                            <td>decimal</td>
-                            <td>Defines the behavior of the component, valid values are "decimal" and "currency".</td>
-                        </tr>
-                        <tr>
-                            <td>prefix</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text to display before the value.</td>
-                        </tr>
-                        <tr>
-                            <td>suffix</td>
-                            <td>string</td>
-                            <td>decimal</td>
-                            <td>Text to display after the value.</td>
-                        </tr>
-                        <tr>
-                            <td>currency</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, 
-                                such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB.
-                                There is no default value; if the style is "currency", the currency property must be provided.</td>
-                        </tr>
-                        <tr>
-                            <td>currencyDisplay</td>
-                            <td>string</td>
-                            <td>symbol</td>
-                            <td>How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, 
-                                ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".</td>
-                        </tr>
-                        <tr>
-                            <td>useGrouping</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.</td>
-                        </tr>
-                        <tr>
-                            <td>minFractionDigits</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of 
-                                minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).</td>
-                        </tr>
-                        <tr>
-                            <td>maxFractionDigits</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain 
-                                number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting 
-                                is the larger of minimumFractionDigits and the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> 
-                                 (2 if the list doesn't provide that information).</td>
-                        </tr>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>type</td>
-                            <td>string</td>
-                            <td>text</td>
-                            <td>Type of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>step</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Step factor to increment/decrement the value.</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Mininum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum boundary value.</td>
-                        </tr>
-                        <tr>
-                           <td>disabled</td>
-                           <td>boolean</td>
-                           <td>false</td>
-                           <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
-                        </tr>
-                        <tr>
-                            <td>tabindex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>pattern</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>The pattern attribute specifies a regular expression that the element's value is checked against on form submission.</td>
-                        </tr>
-                        <tr>
-                            <td>inputmode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>The inputmode attribute provides a hint to browsers for devices with onscreen keyboards to help them decide which keyboard to display.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Hint text for the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the input cannot be typed.</td>
-                        </tr>
-                        <tr>
-                            <td>readonly</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be read-only.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Size of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: New value</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>onFocus</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when input receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>onBlur</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when input loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inputnumber</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-stacked</td>
-                            <td>Container element with stacked buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-horizontal</td>
-                            <td>Container element with horizontal buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-vertical</td>
-                            <td>Container element with vertical buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-input</td>
-                            <td>Input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button</td>
-                            <td>Input element</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button-up</td>
-                            <td>Increment button</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button-down</td>
-                            <td>Decrement button</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputnumber-button-icon</td>
-                            <td>Button icon</td>
-                        </tr>
-                        
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/inputnumber" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import {InputNumber} from '../../components/inputnumber/InputNumber';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class InputNumberDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value1: 42723,
-            value2: 58151,
-            value3: 2351.35,
-            value4: 50,
-            value5: 151351,
-            value6: 115744,
-            value7: 635524,
-            value8: 732762,
-            value9: 1500,
-            value10: 2500,
-            value11: 4250,
-            value12: 5002,
-            value13: 20,
-            value14: 50,
-            value15: 10,
-            value16: 20,
-            value17: 20,
-            value18: 10.50,
-            value19: 25,
-            value20: 50
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <h3>Numerals</h3>
-                <div className="p-grid p-fluid">
-                    <div className="p-col-12 p-md-3">
-                        Integer Only
-                        <InputNumber value={this.state.value1} onChange={(e) => this.setState({value1: e.value})} />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Without Grouping
-                        <InputNumber value={this.state.value2} onChange={(e) => this.setState({value2: e.value})} mode="decimal" useGrouping={false} />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Min-Max Fraction Digits
-                        <InputNumber value={this.state.value3} onChange={(e) => this.setState({value3: e.value})} mode="decimal" minFractionDigits={2} maxFractionDigits={5} />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Min-Max Boundaries
-                        <InputNumber value={this.state.value4} onChange={(e) => this.setState({value4: e.value})} mode="decimal" min={0} max={100} />
-                    </div>
-                    
-                    <div className="p-col-12 p-md-3">
-                        User Locale
-                        <InputNumber value={this.state.value5} onChange={(e) => this.setState({value5: e.value})} mode="decimal" minFractionDigits={2} />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        United State Locale
-                        <InputNumber value={this.state.value6} onChange={(e) => this.setState({value6: e.value})} mode="decimal" locale="en-US" minFractionDigits={2}/>
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        German Locale
-                        <InputNumber value={this.state.value7} onChange={(e) => this.setState({value7: e.value})} mode="decimal" locale="de-DE" minFractionDigits={2}/>
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Indian Locale
-                        <InputNumber value={this.state.value8} onChange={(e) => this.setState({value8: e.value})} mode="decimal" locale="en-IN" minFractionDigits={2} />
-                    </div>
-                </div>
-
-                <h3>Currency</h3>
-                <div className="p-grid p-fluid">
-                    <div className="p-col-12 p-md-3">
-                        United States
-                        <InputNumber value={this.state.value9} onChange={(e) => this.setState({value9: e.value})} mode="currency" currency="USD" locale="en-US" />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Germany
-                        <InputNumber value={this.state.value10} onChange={(e) => this.setState({value10: e.value})} mode="currency" currency="EUR" locale="de-DE" />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        India
-                        <InputNumber value={this.state.value11} onChange={(e) => this.setState({value11: e.value})} mode="currency" currency="INR" currencyDisplay="code" locale="en-IN"/>
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Japan
-                        <InputNumber value={this.state.value12} onChange={(e) => this.setState({value12: e.value})} mode="currency" currency="JPY" locale="jp-JP"/>
-                    </div>
-                </div>
-
-                <h3>Prefix and Suffix</h3>
-                <div className="p-grid p-fluid">
-                    <div className="p-col-12 p-md-3">
-                        Mile
-                        <InputNumber value={this.state.value13} onChange={(e) => this.setState({value17: e.value})} suffix=" mi" />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Percent
-                        <InputNumber value={this.state.value14} onChange={(e) => this.setState({value18: e.value})} prefix="%" />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Expiry
-                        <InputNumber value={this.state.value15} onChange={(e) => this.setState({value19: e.value})}  prefix="Expires in " suffix=" days" />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Temperature
-                        <InputNumber value={this.state.value16} onChange={(e) => this.setState({value20: e.value})} prefix="&uarr; " suffix="℃" min={0} max={40} />
-                    </div>
-                </div>
-
-                <h3>Buttons</h3>
-                <div className="p-grid p-fluid">
-                    <div className="p-col-12 p-md-3">
-                        Stacked
-                        <InputNumber value={this.state.value17} onChange={(e) => this.setState({value17: e.value})} showButtons mode="currency" currency="USD" />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        Horizontal with Step
-                        <InputNumber value={this.state.value18} onChange={(e) => this.setState({value18: e.value})} showButtons buttonLayout="horizontal" spinnerMode="horizontal" step={0.25}
-                            decrementButtonClassName="p-button-danger" incrementButtonClassName="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR"/>
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                        <div>Vertical</div>
-                        <InputNumber value={this.state.value19} onChange={(e) => this.setState({value19: e.value})} mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
-                            decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
-                    </div>
-                    <div className="p-col-12 p-md-3">
-                            Min-Max Boundaries
-                        <InputNumber value={this.state.value20} onChange={(e) => this.setState({value20: e.value})} mode="decimal" showButtons min={0} max={100} />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/inputswitch/InputSwitchDemo.js b/src/showcase/inputswitch/InputSwitchDemo.js
deleted file mode 100644
index 4318b61fc5..0000000000
--- a/src/showcase/inputswitch/InputSwitchDemo.js
+++ /dev/null
@@ -1,261 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {InputSwitch} from '../../components/inputswitch/InputSwitch';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class InputSwitchDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            checked1: false,
-            checked2: true
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputSwitch</h1>
-                        <p>InputSwitch is used to select a boolean value.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("inputSwitch")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <InputSwitch checked={this.state.checked1} onChange={(e) => this.setState({checked1: e.value})} />
-
-                    <h3>Default Value</h3>
-                    <InputSwitch checked={this.state.checked2} onChange={(e) => this.setState({checked2: e.value})} />
-                </div>
-
-                <InputSwitchDoc></InputSwitchDoc>
-            </div>
-        );
-    }
-}
-
-class InputSwitchDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {InputSwitch} from 'primereact/inputswitch';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>InputSwitch is used as a controlled input with <i>checked</i> and <i>onChange</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<InputSwitch checked={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                        <tr>
-                             <td>checked</td>
-                             <td>boolean</td>
-                             <td>false</td>
-                             <td>Specifies whether a inputswitch should be checked or not.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: Checked state as a boolean.</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>onFocus</td>
-                            <td>event: Browser event.</td>
-                            <td>Callback to invoke when the element receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>onBlur</td>
-                            <td>event: Browser event.</td>
-                            <td>Callback to invoke when the element loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Element</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-inputswitch</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputswitch-checked</td>
-                            <td>Container element in active state.</td>
-                        </tr>
-                        <tr>
-                            <td>p-inputswitch-slider</td>
-                            <td>Slider element behind the handle.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/inputswitch" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {InputSwitch} from 'primereact/inputswitch';
-
-export class InputSwitchDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            checked1: false,
-            checked2: true
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputSwitch</h1>
-                        <p>InputSwitch is used to select a boolean value.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <InputSwitch checked={this.state.checked1} onChange={(e) => this.setState({checked1: e.value})} />
-
-                    <h3>Default Value</h3>
-                    <InputSwitch checked={this.state.checked2} onChange={(e) => this.setState({checked2: e.value})}/>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/inputtext/InputTextDemo.js b/src/showcase/inputtext/InputTextDemo.js
deleted file mode 100644
index 16fb1adbc6..0000000000
--- a/src/showcase/inputtext/InputTextDemo.js
+++ /dev/null
@@ -1,227 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {InputText} from '../../components/inputtext/InputText';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class InputTextDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value1: '',
-            value2: '',
-            value3: ''
-        };
-    }
-
-    toggle() {
-        this.setState({disabled: !this.state.disabled});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputText</h1>
-                        <p>InputText is an extension to standard input element with theming and keyfiltering.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("inputText")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Basic</h3>
-                    <InputText value={this.state.value1} onChange={(e) => this.setState({value1: e.target.value})} />
-                    <span style={{marginLeft:'.5em'}}>{this.state.value1}</span>
-
-                    <h3>Floating Label</h3>
-                    <span className="p-float-label">
-                        <InputText id="float-input" type="text" size="30" value={this.state.value2} onChange={(e) => this.setState({value2: e.target.value})} />
-                        <label htmlFor="float-input">Username</label>
-                    </span>
-
-                    <h3>KeyFilter - Positive Number Only</h3>
-                    <InputText type="text" keyfilter="pint" value={this.state.value3} onChange={(e) => this.setState({value3: e.target.value})} />
-                </div>
-
-                <InputTextDoc />
-            </div>
-        )
-    }
-}
-
-class InputTextDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {InputText} from 'primereact/inputtext';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>InputText is used as a controlled input with <i>value</i> and <i>onChange</i> properties.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputText value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
-
-`}
-</CodeHighlight>
-
-                        <h3>Float Label</h3>
-                        <p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<span className="p-float-label">
-    <InputText id="in" value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
-    <label htmlFor="in">Username</label>
-</span>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>KeyFilter</h3>
-                        <p>InputText has built-in key filtering support to block certain keys, refer to <Link to="/keyfilter">keyfilter</Link> page for more information.</p>
-
-                        <h3>Properties</h3>
-                        <p>InputText passes any valid attribute to the underlying input element. Extended properties are as follows;</p>
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>keyfilter</td>
-                                        <td>string/regex</td>
-                                        <td>null</td>
-                                        <td>Format definition of the keys to block.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>validateOnly</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When enabled, instead of blocking keys, input is validated internally to test against the regular expression.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming">theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-inputtext</td>
-                                        <td>Input element</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/inputtext" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {InputText} from 'primereact/inputtext';
-
-export class InputTextDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value: null
-        };
-    }
-
-    toggle() {
-        this.setState({disabled: !this.state.disabled});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputText</h1>
-                        <p>InputText is an extension to standard input element with theming and keyfiltering.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <div className="content-section implementation">
-                        <h3 className="first">Basic</h3>
-                        <InputText value={this.state.value1} onChange={(e) => this.setState({value1: e.target.value})} />
-                        <span style={{marginLeft:'.5em'}}>{this.state.value1}</span>
-
-                        <h3>Floating Label</h3>
-                        <span className="p-float-label">
-                            <InputText id="float-input" type="text" size="30" value={this.state.value2} onChange={(e) => this.setState({value2: e.target.value})} />
-                            <label htmlFor="float-input">Username</label>
-                        </span>
-
-                        <h3>KeyFilter - Positive Number Only</h3>
-                        <InputText type="text" keyfilter="pint" value={this.state.value3} onChange={(e) => this.setState({value3: e.target.value})} />
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/inputtextarea/InputTextareaDemo.js b/src/showcase/inputtextarea/InputTextareaDemo.js
deleted file mode 100644
index 2764643f11..0000000000
--- a/src/showcase/inputtextarea/InputTextareaDemo.js
+++ /dev/null
@@ -1,197 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {InputTextarea} from '../../components/inputtextarea/InputTextarea';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class InputTextareaDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value: 'Welcome to PrimeLand!'
-        };
-    }
-
-    handleChange(e) {
-        this.setState({value: e.target.value});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputTextarea</h1>
-                        <p>Inputtextarea add styling and autoResize functionality to standard textarea element.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("inputTextarea")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Default</h3>
-                    <InputTextarea value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} rows={5} cols={30}></InputTextarea>
-                    <div>{this.state.value}</div>
-
-                    <h3>AutoResize</h3>
-                    <InputTextarea rows={5} cols={30} autoResize={true}></InputTextarea>
-                </div>
-
-                <InputTextareaDoc />
-            </div>
-        )
-    }
-}
-
-class InputTextareaDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {InputTextarea} from 'primereact/inputtextarea';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Textarea is used as a controlled input with <i>value</i> and <i>onChange</i> properties.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputTextarea rows={5} cols={30} value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
-
-`}
-</CodeHighlight>
-
-                        <h3>AutoResize</h3>
-                        <p>In auto resize mode, textarea grows instead of displaying a scrollbar.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputTextarea rows={5} cols={30} value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} autoResize={true} />
-
-`}
-</CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <p>InputTextarea passes any attribute to the underlying textarea element, additional attributes are as follows;</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>autoResize</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, height of textarea changes as being typed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming">theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-inputtextarea</td>
-                                        <td>Textarea element</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/inputtextarea" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {InputTextarea} from 'primereact/inputtextarea';
-
-export class InputTextareaDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value: 'Welcome to PrimeLand!'
-        };
-    }
-
-    handleChange(e) {
-        this.setState({value: e.target.value});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>InputTextarea</h1>
-                        <p>Inputtextarea add styling and autoResize functionality to standard textarea element.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Default</h3>
-                    <InputTextarea value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} rows={5} cols={30}></InputTextarea>
-                    <div>{this.state.value}</div>
-
-                    <h3>AutoResize</h3>
-                    <InputTextarea rows={5} cols={30} autoResize={true}></InputTextarea>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/keyfilter/KeyFilterDemo.js b/src/showcase/keyfilter/KeyFilterDemo.js
deleted file mode 100644
index daa7b23fab..0000000000
--- a/src/showcase/keyfilter/KeyFilterDemo.js
+++ /dev/null
@@ -1,177 +0,0 @@
-import React, {Component} from 'react';
-import {InputText} from '../../components/inputtext/InputText';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class KeyFilterDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>KeyFilter</h1>
-                        <p>KeyFilter feature restricts user input based on a regular expression.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("keyFilter")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Filtering</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="int" placeholder="Integers"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="num" placeholder="Numbers"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="money" placeholder="Money"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="hex" placeholder="Hex"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="alpha" placeholder="Alphabetic"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="alphanum" placeholder="Alphanumberic"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter={/^[^<>*!]+$/} placeholder="Block < > * !"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter={/[^\s]/} placeholder="Block space key"/>
-                        </div>
-                    </div>
-                </div>
-
-                <KeyFilterDoc />
-            </div>
-        )
-    }
-}
-
-class KeyFilterDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {InputText} from 'primereact/inputtext';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>KeyFilter property is integrated in input components such as InputText using the <i>keyfilter</i> property. The value of the filter
-                            can either a built-in regular expression or a custom one. Following input only accepts integers.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<InputText keyfilter="int" />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Built-in Filters</h3>
-                        <p>Commonly used cases have their own built-in shortcuts.</p>
-                        <ul>
-                            <li>pint: Positive integers</li>
-                            <li>int: Integers</li>
-                            <li>pnum: Positive numbers</li>
-                            <li>num: Numbers</li>
-                            <li>hex: Hexadecimal</li>
-                            <li>email: Email</li>
-                            <li>alpha: Alphabetic</li>
-                            <li>alphanum: Alphanumeric</li>
-                        </ul>
-
-                        <h3>Custom Filter</h3>
-                        <p>A custom filter is enabled by binding a regular expression, an example that blocks special characters would be;</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<InputText keyfilter={/^[^#<>*!]+$/}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/keyfilter" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {InputText} from 'primereact/inputtext';
-
-export class KeyFilterDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>KeyFilter</h1>
-                        <p>KeyFilter feature restricts user input based on a regular expression.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Filtering</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="int" placeholder="Integers"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="num" placeholder="Numbers"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="money" placeholder="Money"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="hex" placeholder="Hex"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="alpha" placeholder="Alphabetic"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter="alphanum" placeholder="Alphanumberic"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter={/^[^<>*!]+$/} placeholder="Block < > * !"/>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <InputText keyfilter={/[^\\s]/} placeholder="Block space key"/>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/lightbox/LightboxDemo.js b/src/showcase/lightbox/LightboxDemo.js
deleted file mode 100644
index 45b414fe42..0000000000
--- a/src/showcase/lightbox/LightboxDemo.js
+++ /dev/null
@@ -1,301 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Lightbox} from '../../components/lightbox/Lightbox';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class LightboxDemo extends Component {
-
-    render() {
-        const images = [
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos1.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos1_small.jpg',
-                title:'Sopranos 1'
-            },
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos2.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos2_small.jpg',
-                title:'Sopranos 2'
-            },
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos3.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos3_small.jpg',
-                title:'Sopranos 3'
-            },
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos4.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos4_small.jpg',
-                title:'Sopranos 4'
-            }
-        ];
-
-        const videoTarget = (
-            <button className="p-link">Watch a Video</button>
-        );
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Lightbox - (Deprecated in favor of Galleria)</h1>
-                        <p>LightBox is a modal overlay component to display images, videos and inline content.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("lightbox")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation lightbox-demo">
-                    <h3 className="first">Basic</h3>
-                    <Lightbox type="images" images={images} />
-
-                    <h3>Content</h3>
-                    <Lightbox type="content" target={videoTarget}>
-                        <iframe title="Video" width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameBorder="0" allowFullScreen></iframe>
-                    </Lightbox>
-                </div>
-
-                <LightboxDoc/>
-            </div>
-        );
-    }
-}
-
-class LightboxDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Lightbox} from 'primereact/lightbox';
-
-`}</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Lightbox has two modes; image and custom content. In image mode a collection of images are required to display
-                        where an image object in the collection defines the source of the original image, thumbnail image and the title.</p>
-
-                        <CodeHighlight className="language-javascript">
-{`
-var images=[
-    {source:'showcase/resources/demo/images/sopranos/sopranos1.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos1_small.jpg', title:'Sopranos 1'},
-    {source:'showcase/resources/demo/images/sopranos/sopranos2.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos2_small.jpg', title:'Sopranos 2'},
-    {source:'showcase/resources/demo/images/sopranos/sopranos3.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos3_small.jpg', title:'Sopranos 3'},
-    {source:'showcase/resources/demo/images/sopranos/sopranos4.jpg', thumbnail:'showcase/resources/demo/images/sopranos/sopranos4_small.jpg', title:'Sopranos 4'}
-];
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Lightbox type="images" images={images} />
-
-`}
-                        </CodeHighlight>
-
-                        <p>Content mode is enabled by defining <i>target</i> property as the trigger to display the lightbox. In this setting, children of the component would be displayed inside the overlay</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Lightbox target={<a>Watch Video</a>}>
-    <iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameBorder="0" allowFullScreen></iframe>
-</Lightbox>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Effects</h3>
-                        <p>The easing function to use between image transitions is "ease-out" by default and this can be customized using <i>easing</i> property. See <a href="http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp">here</a> for possible alternative values. Duration of the effect can be changed using effectDuration option.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Lightbox type="images" images={images} easing="ease-in" effectDuration="1500ms" />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>images</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of images to display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>target</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Target element to show the Lightbox in content mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>easing</td>
-                                        <td>string</td>
-                                        <td>ease-out</td>
-                                        <td>Easing to use for transition between images.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>effectDuration</td>
-                                        <td>string</td>
-                                        <td>500ms</td>
-                                        <td>Duration of the transition between the images.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-lightbox</td>
-                                        <td>Container element</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-lightbox-content</td>
-                                        <td>Content element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-lightbox-nav-right</td>
-                                        <td>Element to navigate to next image.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-lightbox-nav-left</td>
-                                        <td>Element to navigate to previous image.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-lightbox-caption</td>
-                                        <td>Caption element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-lightbox-caption-text</td>
-                                        <td>Text of caption.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-lightbox-close</td>
-                                        <td>Close icon.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/lightbox" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Lightbox} from 'primereact/lightbox';
-
-export class LightboxDemo extends Component {
-
-    render() {
-        const images = [
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos1.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos1_small.jpg',
-                title:'Sopranos 1'
-            },
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos2.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos2_small.jpg',
-                title:'Sopranos 2'
-            },
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos3.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos3_small.jpg',
-                title:'Sopranos 3'
-            },
-            {
-                source:'showcase/resources/demo/images/sopranos/sopranos4.jpg',
-                thumbnail:'showcase/resources/demo/images/sopranos/sopranos4_small.jpg',
-                title:'Sopranos 4'
-            }
-        ];
-
-        const videoTarget = (
-            <button className="p-link">Watch a Video</button>
-        );
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Lightbox</h1>
-                        <p>LightBox is a modal overlay component to display images, videos and inline content.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Basic</h3>
-                    <Lightbox type="images" images={images} />
-
-                    <h3>Content</h3>
-                    <Lightbox type="content" target={videoTarget}>
-                        <iframe title="Video" width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameBorder="0" allowFullScreen></iframe>
-                    </Lightbox>
-                </div>
-            </div>
-        );
-    }
-} }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/listbox/ListBoxDemo.js b/src/showcase/listbox/ListBoxDemo.js
deleted file mode 100644
index e0d13dfe93..0000000000
--- a/src/showcase/listbox/ListBoxDemo.js
+++ /dev/null
@@ -1,536 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {ListBox} from '../../components/listbox/ListBox';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ListBoxDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            city: null,
-            cities: null,
-            car: 'BMW'
-        };
-    }
-
-    carTemplate(option) {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px',width:48}} />
-                <span style={{fontSize:'1em',float:'right',margin:'1em .5em 0 0'}}>{option.label}</span>
-            </div>
-        );
-    }
-
-    render() {
-        const cities = [
-            {name: 'New York', code: 'NY'},
-            {name: 'Rome', code: 'RM'},
-            {name: 'London', code: 'LDN'},
-            {name: 'Istanbul', code: 'IST'},
-            {name: 'Paris', code: 'PRS'}
-        ];
-
-        const cars = [
-            {label: 'Audi', value: 'Audi'},
-            {label: 'BMW', value: 'BMW'},
-            {label: 'Fiat', value: 'Fiat'},
-            {label: 'Honda', value: 'Honda'},
-            {label: 'Jaguar', value: 'Jaguar'},
-            {label: 'Mercedes', value: 'Mercedes'},
-            {label: 'Renault', value: 'Renault'},
-            {label: 'VW', value: 'VW'},
-            {label: 'Volvo', value: 'Volvo'}
-        ];
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ListBox</h1>
-                        <p>ListBox is used to select one or more values from a list of items.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("listBox")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Single</h3>
-                    <ListBox value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} optionLabel="name"/>
-
-                    <h3>Multiple</h3>
-                    <ListBox value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} multiple={true} optionLabel="name"/>
-
-                    <h3>Advanced</h3>
-                    <ListBox value={this.state.car} filter={true} filterPlaceholder="Search" options={cars} onChange={(e) => this.setState({car: e.value})} itemTemplate={this.carTemplate}
-                                    style={{width: '15em'}} listStyle={{maxHeight: '250px'}}  />
-                </div>
-
-                <ListboxDoc></ListboxDoc>
-            </div>
-        );
-    }
-}
-
-class ListboxDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {ListBox} from 'primereact/listbox';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Listbox is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
-                of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
-                whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair.
-                In addition, options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>
-
-            <p><b>Options as SelectItems</b></p>
-            <CodeHighlight className="language-javascript">
-{`
-const citySelectItems = [
-    {label: 'New York', value: 'NY'},
-    {label: 'Rome', value: 'RM'},
-    {label: 'London', value: 'LDN'},
-    {label: 'Istanbul', value: 'IST'},
-    {label: 'Paris', value: 'PRS'}
-];
-
-`}
-            </CodeHighlight>
-
-            <CodeHighlight className="language-jsx">
-{`
-<Listbox value={this.state.city} options={citySelectItems} onChange={(e) => this.setState({city: e.value})} />
-
-`}
-            </CodeHighlight>
-
-            <p><b>Options as any type</b></p>
-            <CodeHighlight className="language-javascript">
-{`
-const cities = [
-    {name: 'New York', code: 'NY'},
-    {name: 'Rome', code: 'RM'},
-    {name: 'London', code: 'LDN'},
-    {name: 'Istanbul', code: 'IST'},
-    {name: 'Paris', code: 'PRS'}
-];
-
-`}
-            </CodeHighlight>
-
-            <CodeHighlight className="language-jsx">
-{`
-<Listbox optionLabel="name" value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} />
-<Listbox optionLabel="name" optionValue="code" value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} />
-
-
-`}
-            </CodeHighlight>
-            <p>When <i>optionValue</i> is not defined, value of an option refers to the option object itself.</p>
-
-            <h3>Selection</h3>
-            <p>Listbox allows selection of either single or multiple items. In single case, model should be a single object reference whereas in multiple case should be an array. Multiple items can either be selected
-                using metaKey or toggled individually depending on the value of <i>metaKeySelection</i> property value which is true by default. On touch enabled
-                devices metaKeySelection is turned off automatically.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Listbox value={this.state.cities} options={cities} onChange={(e) => this.setState({city: e.value})} multiple={true}/>
-
-`}
-</CodeHighlight>
-
-            <h3>Custom Content</h3>
-            <p>Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option as a parameter and returns the content.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Listbox value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} itemTemplate={this.carTemplate} />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-carTemplate(option) {
-    const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-    return (
-        <div className="p-clearfix">
-            <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} />
-            <span style={{fontSize:'1em',float:'right',margin:'1em .5em 0 0'}}>{option.label}</span>
-        </div>
-    );
-}
-
-`}
-</CodeHighlight>
-            <h3>Filtering</h3>
-            <p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property. By default filtering is done against
-            label of the items and <i>filterBy</i> property is available to choose one or more properties of the options. In addition <i>filterMatchMode</i> can be utilized
-            to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Listbox value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} filter={true} />
-
-`}
-</CodeHighlight>
-
-            <h3>SelectItem API</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>ClassName of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Tooltip text of the option. (Not supported)</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the option is disabled or not. (Not supported)</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Selected value to display.</td>
-                        </tr>
-                         <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionValue</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets the option and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>listStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of inner list element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, disables the component.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>false</td>
-                            <td>A property to uniquely match the value in options for better performance.</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, allows selecting multiple values.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
-                            can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, displays a filter input at header.</td>
-                        </tr>
-                        <tr>
-                            <td>filterBy</td>
-                            <td>string</td>
-                            <td>label</td>
-                            <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMatchMode</td>
-                            <td>string</td>
-                            <td>contains</td>
-                            <td>Defines how the items are filtered, valid values are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when filter input is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Browser event <br/>
-                                event.value: Single value or an array of values depending on the selection mode <br/>
-                            </td>
-                            <td>Callback to invoke when value of listbox changes.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-listbox</td>
-                            <td>Main container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-header</td>
-                            <td>Header element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-list-wrapper</td>
-                            <td>Container of list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-list</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-listbox-item</td>
-                            <td>An item in the list element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/listbox" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {ListBox} from 'primereact/listbox';
-
-export class ListBoxDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            city: null,
-            cities: null,
-            car: 'BMW'
-        };
-    }
-
-    carTemplate(option) {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px',width:48}} />
-                <span style={{fontSize:'1em',float:'right',margin:'1em .5em 0 0'}}>{option.label}</span>
-            </div>
-        );
-    }
-
-    render() {
-        const cities = [
-            {name: 'New York', code: 'NY'},
-            {name: 'Rome', code: 'RM'},
-            {name: 'London', code: 'LDN'},
-            {name: 'Istanbul', code: 'IST'},
-            {name: 'Paris', code: 'PRS'}
-        ];
-
-        const cars = [
-            {label: 'Audi', value: 'Audi'},
-            {label: 'BMW', value: 'BMW'},
-            {label: 'Fiat', value: 'Fiat'},
-            {label: 'Honda', value: 'Honda'},
-            {label: 'Jaguar', value: 'Jaguar'},
-            {label: 'Mercedes', value: 'Mercedes'},
-            {label: 'Renault', value: 'Renault'},
-            {label: 'VW', value: 'VW'},
-            {label: 'Volvo', value: 'Volvo'}
-        ];
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ListBox</h1>
-                        <p>ListBox is used to select one or more values from a list of items.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Single</h3>
-                    <ListBox value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})} optionLabel="name"/>
-
-                    <h3>Multiple</h3>
-                    <ListBox value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} multiple={true} optionLabel="name"/>
-
-                    <h3>Advanced</h3>
-                    <ListBox value={this.state.car} filter={true} filterPlaceholder="Search" options={cars} onChange={(e) => this.setState({car: e.value})} itemTemplate={this.carTemplate}
-                                    style={{width: '15em'}} listStyle={{maxHeight: '250px'}}/>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/load/GoogleMaps.js b/src/showcase/load/GoogleMaps.js
deleted file mode 100644
index ce8acc20fc..0000000000
--- a/src/showcase/load/GoogleMaps.js
+++ /dev/null
@@ -1,37 +0,0 @@
-export const loadGoogleMaps = (callback) => {
-    const existingScript = document.getElementById('googleMaps');
-
-    if (!existingScript) {
-      const script = document.createElement('script');
-      script.src = 'https://maps.google.com/maps/api/js?key=AIzaSyA6Ar0UymhiklJBzEPLKKn2QHwbjdz3XV0';
-      script.id = 'googleMaps';
-      script.async = true;
-      script.defer = true;
-      document.body.appendChild(script);
-
-      script.onload = () => {
-        if (callback) callback();
-      };
-    }
-
-    if (existingScript && callback) callback();
-};
-
-export const removeGoogleMaps = () => {
-    const mapScript = document.getElementById('googleMaps');
-
-    if (mapScript) {
-        mapScript.parentNode.removeChild(mapScript);
-
-        const head = document.getElementsByTagName('head')[0];
-        const scripts = head.getElementsByTagName('script');
-        for (let i = 0; i < scripts.length; i++) {
-            let script = scripts[i];
-            let src = script.src;
-
-            if (src.startsWith('https://maps.google.com/maps')) {
-                head.removeChild(script);
-            }
-        }
-    }
-};
diff --git a/src/showcase/megamenu/MegaMenuDemo.js b/src/showcase/megamenu/MegaMenuDemo.js
deleted file mode 100644
index d8883fd240..0000000000
--- a/src/showcase/megamenu/MegaMenuDemo.js
+++ /dev/null
@@ -1,583 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {MegaMenu} from '../../components/megamenu/MegaMenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class MegaMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {
-                    label: 'Videos', icon: 'pi pi-fw pi-video',
-                    items: [
-                        [
-                            {
-                                label: 'Video 1',
-                                items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Video 3',
-                                items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
-                            },
-                            {
-                                label: 'Video 4',
-                                items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Users', icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
-                            },
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events', icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings', icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
-                            }
-                        ]
-                    ]
-                }
-            ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>MegaMenu</h1>
-                        <p>MegaMenu is navigation component that displays submenus together.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("megaMenu")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Horizontal</h3>
-                    <MegaMenu model={this.state.items}/>
-
-                    <h3>Vertical</h3>
-                    <MegaMenu model={this.state.items} orientation="vertical"/>
-                </div>
-
-                <MegaMenuDoc/>
-            </div>
-        );
-    }
-}
-
-class MegaMenuDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {MegaMenu} from 'primereact/megamenu';
-
-`}</CodeHighlight>
-
-                        <h3>MenuItem API</h3>
-                        <p>MegaMenu uses the common menu item api to define its items, visit <Link to="/menumodel">  MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>Layout of the MegaMenu is managed by the <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> that can be downloaded from npm.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-npm install primeflex --save
-
-`}
-</CodeHighlight>
-
-                        <p>MegaMenu requires a collection of menuitems as its model.</p>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-const items: [
-    {
-        label: 'Videos', icon: 'pi pi-fw pi-video',
-        items: [
-            [
-                {
-                    label: 'Video 1',
-                    items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
-                },
-                {
-                    label: 'Video 2',
-                    items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
-                }
-            ],
-            [
-                {
-                    label: 'Video 3',
-                    items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
-                },
-                {
-                    label: 'Video 4',
-                    items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Users', icon: 'pi pi-fw pi-users',
-        items: [
-            [
-                {
-                    label: 'User 1',
-                    items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
-                },
-                {
-                    label: 'User 2',
-                    items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
-                },
-            ],
-            [
-                {
-                    label: 'User 3',
-                    items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
-                },
-                {
-                    label: 'User 4',
-                    items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
-                }
-            ],
-            [
-                {
-                    label: 'User 5',
-                    items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
-                },
-                {
-                    label: 'User 6',
-                    items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Events', icon: 'pi pi-fw pi-calendar',
-        items: [
-            [
-                {
-                    label: 'Event 1',
-                    items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
-                },
-                {
-                    label: 'Event 2',
-                    items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
-                }
-            ],
-            [
-                {
-                    label: 'Event 3',
-                    items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
-                },
-                {
-                    label: 'Event 4',
-                    items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
-                }
-            ]
-        ]
-    },
-    {
-        label: 'Settings', icon: 'pi pi-fw pi-cog',
-        items: [
-            [
-                {
-                    label: 'Setting 1',
-                    items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
-                },
-                {
-                    label: 'Setting 2',
-                    items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
-                },
-                {
-                    label: 'Setting 3',
-                    items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
-                }
-            ],
-            [
-                {
-                    label: 'Technology 4',
-                    items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
-                }
-            ]
-        ]
-    }
-]
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<MegaMenu model={items} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Orientation</h3>
-                        <p>Default orientation is "horizontal" with "vertical" as the alternative.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<MegaMenu model={items} orientation="vertical"/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Custom Content</h3>
-                        <p>Any content inside the megamenu will be displayed on the right side by default. You may use ".ui-megamenu-custom" style class to change the location of the content.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<MegaMenu model={items}>
-    <InputText placeholder="Search" type="text"/>
-    <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-</MegaMenu>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>orientation</td>
-                                        <td>string</td>
-                                        <td>horizontal</td>
-                                        <td>Defines the orientation, valid values are horizontal and vertical.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-megamenu</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menu-list</td>
-                                        <td>List element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem</td>
-                                        <td>Menuitem element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-text</td>
-                                        <td>Label of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-icon</td>
-                                        <td>Icon of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-submenu-icon</td>
-                                        <td>Arrow icon of a submenu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/megamenu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {MegaMenu} from 'primereact/megamenu';
-
-export class MegaMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {
-                    label: 'Videos', icon: 'pi pi-fw pi-video',
-                    items: [
-                        [
-                            {
-                                label: 'Video 1',
-                                items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
-                            },
-                            {
-                                label: 'Video 2',
-                                items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Video 3',
-                                items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
-                            },
-                            {
-                                label: 'Video 4',
-                                items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Users', icon: 'pi pi-fw pi-users',
-                    items: [
-                        [
-                            {
-                                label: 'User 1',
-                                items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
-                            },
-                            {
-                                label: 'User 2',
-                                items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
-                            },
-                        ],
-                        [
-                            {
-                                label: 'User 3',
-                                items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
-                            },
-                            {
-                                label: 'User 4',
-                                items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'User 5',
-                                items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
-                            },
-                            {
-                                label: 'User 6',
-                                items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Events', icon: 'pi pi-fw pi-calendar',
-                    items: [
-                        [
-                            {
-                                label: 'Event 1',
-                                items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
-                            },
-                            {
-                                label: 'Event 2',
-                                items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Event 3',
-                                items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
-                            },
-                            {
-                                label: 'Event 4',
-                                items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
-                            }
-                        ]
-                    ]
-                },
-                {
-                    label: 'Settings', icon: 'pi pi-fw pi-cog',
-                    items: [
-                        [
-                            {
-                                label: 'Setting 1',
-                                items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
-                            },
-                            {
-                                label: 'Setting 2',
-                                items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
-                            },
-                            {
-                                label: 'Setting 3',
-                                items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
-                            }
-                        ],
-                        [
-                            {
-                                label: 'Technology 4',
-                                items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
-                            }
-                        ]
-                    ]
-                }
-            ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>MegaMenu</h1>
-                        <p>MegaMenu is navigation component that displays submenus together.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Horizontal</h3>
-                    <MegaMenu model={this.state.items}/>
-
-                    <h3>Vertical</h3>
-                    <MegaMenu model={this.state.items} orientation="vertical"/>
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/menu/MenuDemo.js b/src/showcase/menu/MenuDemo.js
deleted file mode 100644
index cabc8db0df..0000000000
--- a/src/showcase/menu/MenuDemo.js
+++ /dev/null
@@ -1,350 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Menu} from '../../components/menu/Menu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Button} from "../../components/button/Button";
-
-export class MenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {
-                    label: 'Options',
-                    items: [{label: 'Upload', icon: 'pi pi-fw pi-upload', command:()=>{ window.location.hash="/fileupload"; }},
-                            {label: 'Home', icon: 'pi pi-fw pi-home', url: 'http://primetek.com.tr/'}]
-                },
-                {
-                    label: 'Account',
-                    items: [{label: 'Components', icon: 'pi pi-fw pi-cog', command:()=>{ window.location.hash="/"; }},
-                            {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
-                }
-            ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Menu</h1>
-                        <p>Menu is a navigation/command component that supports dynamic and static positioning.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("menu")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation button-demo">
-                    <h3 className="first">Basic</h3>
-                    <Menu model={this.state.items}/>
-
-                    <h3>Popup</h3>
-                    <Menu model={this.state.items} popup={true} ref={el => this.menu = el} id="popup_menu"/>
-                    <Button label="Show" icon="pi pi-bars" onClick={(event) => this.menu.toggle(event)} aria-controls="popup_menu" aria-haspopup={true}/>
-                </div>
-
-                <MenuDoc/>
-
-            </div>
-        )
-    }
-}
-
-class MenuDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Menu} from 'primereact/menu';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>MenuModel API</h3>
-                        <p>Menu uses the common menumodel api to define its items, visit <Link to="/menumodel"> MenuModel API</Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>Menu requires a collection of menuitems as its model.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Menu model={items} />
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-let items = [
-    {label: 'New', icon: 'pi pi-fw pi-plus'},
-    {label: 'Delete', icon: 'pi pi-fw pi-trash'}
-];
-
-`}
-                        </CodeHighlight>
-
-                        <h3>SubMenus</h3>
-                        <p>Menu supports one level of nesting via subitems of an item.</p>
-                        <CodeHighlight className="language-javascript">
-                            {`
-let items: [
-    {
-        label: 'Options',
-        items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
-                {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr/'}]
-    },
-    {
-        label: 'Account',
-        items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
-                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
-    }
-]
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Popup Mode</h3>
-                        <p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Menu model={items} popup={true} ref={el => this.menu=el} />
-<Button label="Show" icon="pi pi-bars" onClick={(event)=>this.menu.toggle(event)}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>popup</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Defines if menu would displayed as a popup.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>baseZIndex</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Base zIndex value to use in layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>autoZIndex</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to automatically manage layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>DOM element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the dialog should be mounted.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Methods</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                    </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>toggle</td>
-                                        <td>event: Browser event</td>
-                                        <td>Toggles the visibility of the popup menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>show</td>
-                                        <td>event: Browser event</td>
-                                        <td>Displays the popup menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>hide</td>
-                                        <td>event: Browser event</td>
-                                        <td>Hides the popup menu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onShow</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is shown.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onHide</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is hidden.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-menu</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menu-list</td>
-                                        <td>List element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem</td>
-                                        <td>Menuitem element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-text</td>
-                                        <td>Label of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-icon</td>
-                                        <td>Icon of a menuitem.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/menu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Menu} from 'primereact/menu';
-
-export class MenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {
-                    label: 'Options',
-                    items: [{label: 'Upload', icon: 'pi pi-fw pi-upload', command:()=>{ window.location.hash="/fileupload"; }},
-                            {label: 'Home', icon: 'pi pi-fw pi-home', url: 'http://primetek.com.tr/'}]
-                },
-                {
-                    label: 'Account',
-                    items: [{label: 'Components', icon: 'pi pi-fw pi-cog', command:()=>{ window.location.hash="/"; }},
-                            {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
-                }
-            ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section">
-                    <div className="feature-intro">
-                        <h1>Menu</h1>
-                        <p>Menu is a navigation/command component that supports dynamic and static positioning.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation button-demo">
-                    <h3 className="first">Basic</h3>
-                    <Menu model={this.state.items}/>
-
-                    <h3>Popup</h3>
-                    <Menu model={this.state.items} popup={true} ref={el => this.menu = el} id="popup_menu"/>
-                    <Button label="Show" icon="pi pi-bars" onClick={(event) => this.menu.toggle(event)} aria-controls="popup_menu" aria-haspopup={true}/>
-                </div>
-
-                <MenuDoc/>
-
-            </div>
-        )
-    }
-}
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView >
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/menubar/MenubarDemo.js b/src/showcase/menubar/MenubarDemo.js
deleted file mode 100644
index 868950591c..0000000000
--- a/src/showcase/menubar/MenubarDemo.js
+++ /dev/null
@@ -1,608 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Menubar} from '../../components/menubar/Menubar';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {InputText} from "../../components/inputtext/InputText";
-
-export class MenubarDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Menubar</h1>
-                        <p>Menubar is a horizontal menu component.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("menubar")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <Menubar model={this.state.items}>
-                        <InputText placeholder="Search" type="text"/>
-                        <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-                    </Menubar>
-                </div>
-
-                <MenubarDoc/>
-
-            </div>
-        );
-    }
-}
-
-class MenubarDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Menubar} from 'primereact/menubar';
-
-`}</CodeHighlight>
-
-                        <h3>MenuItem API</h3>
-                        <p>Menubar uses the common menu item api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>Menubar requires nested menuitems as its model.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Menubar model={items}/>
-
-`}</CodeHighlight>
-                        <CodeHighlight className="language-javascript">
-                            {`
-const items:[
-    {
-       label:'File',
-       icon:'pi pi-fw pi-file',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-plus',
-             items:[
-                {
-                   label:'Bookmark',
-                   icon:'pi pi-fw pi-bookmark'
-                },
-                {
-                   label:'Video',
-                   icon:'pi pi-fw pi-video'
-                },
-
-             ]
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-trash'
-          },
-          {
-             separator:true
-          },
-          {
-             label:'Export',
-             icon:'pi pi-fw pi-external-link'
-          }
-       ]
-    },
-    {
-       label:'Edit',
-       icon:'pi pi-fw pi-pencil',
-       items:[
-          {
-             label:'Left',
-             icon:'pi pi-fw pi-align-left'
-          },
-          {
-             label:'Right',
-             icon:'pi pi-fw pi-align-right'
-          },
-          {
-             label:'Center',
-             icon:'pi pi-fw pi-align-center'
-          },
-          {
-             label:'Justify',
-             icon:'pi pi-fw pi-align-justify'
-          },
-
-       ]
-    },
-    {
-       label:'Users',
-       icon:'pi pi-fw pi-user',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-user-plus',
-
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-user-minus',
-
-          },
-          {
-             label:'Search',
-             icon:'pi pi-fw pi-users',
-             items:[
-                {
-                   label:'Filter',
-                   icon:'pi pi-fw pi-filter',
-                   items:[
-                      {
-                         label:'Print',
-                         icon:'pi pi-fw pi-print'
-                      }
-                   ]
-                },
-                {
-                   icon:'pi pi-fw pi-bars',
-                   label:'List'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       label:'Events',
-       icon:'pi pi-fw pi-calendar',
-       items:[
-          {
-             label:'Edit',
-             icon:'pi pi-fw pi-pencil',
-             items:[
-                {
-                   label:'Save',
-                   icon:'pi pi-fw pi-calendar-plus'
-                },
-                {
-                   label:'Delete',
-                   icon:'pi pi-fw pi-calendar-minus'
-                },
-
-             ]
-          },
-          {
-             label:'Archieve',
-             icon:'pi pi-fw pi-calendar-times',
-             items:[
-                {
-                   label:'Remove',
-                   icon:'pi pi-fw pi-calendar-minus'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       label:'Quit',
-       icon:'pi pi-fw pi-power-off'
-    }
- ];
-
-`}</CodeHighlight>
-
-                        <h3>Custom Content</h3>
-                        <p>Any content inside the menubar will be displayed on the right side by default. You may use ".ui-menubar-custom" style class to change the location of the content.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Menubar model={items}>
-    <InputText placeholder="Search" type="text"/>
-    <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-</Menubar>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-menubar</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menu-list</td>
-                                        <td>List element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem</td>
-                                        <td>Menuitem element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-text</td>
-                                        <td>Label of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-icon</td>
-                                        <td>Icon of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-submenu-icon</td>
-                                        <td>Arrow icon of a submenu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/menubar" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Menubar} from 'primereact/menubar';
-import {Button} from 'primereact/button';
-import {InputText} from "primereact/inputtext";
-
-export class MenubarDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Menubar</h1>
-                        <p>Menubar is a horizontal menu component.</p>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <Menubar model={this.state.items}>
-                        <InputText placeholder="Search" type="text"/>
-                        <Button label="Logout" icon="pi pi-power-off" style={{marginLeft:4}}/>
-                    </Menubar>
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/menumodel/MenuModelDemo.js b/src/showcase/menumodel/MenuModelDemo.js
deleted file mode 100644
index e80195abb3..0000000000
--- a/src/showcase/menumodel/MenuModelDemo.js
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, {Component} from 'react';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-
-export class MenuModelDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>MenuModel API</h1>
-                        <p>PrimeReact menus components share a common api to specify the menuitems and submenus.</p>
-                    </div>
-                </div>
-
-                <MenuModelDoc/>
-
-            </div>
-        )
-    }
-}
-
-class MenuModelDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <h3 style={{marginTop: 0}}>MenuItem</h3>
-                <p>Core of the API is the MenuItem class that defines various options such as the label, icon and children of an item in a menu.</p>
-                <CodeHighlight className="language-javascript">
-                    {`
-const items: [
-    {
-        label: 'Options',
-        items: [{label: 'New', icon: 'pi pi-fw pi-plus',command:()=>{ window.location.hash="/fileupload"; }},
-                {label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr/'}]
-    },
-    {
-        label: 'Account',
-        items: [{label: 'Options', icon: 'pi pi-fw pi-cog',command:()=>{ window.location.hash="/"; }},
-                {label: 'Sign Out', icon: 'pi pi-fw pi-power-off'} ]
-    }
-]
-
-`}
-                </CodeHighlight>
-
-                <p>MenuItem provides the following properties. Note that not all of them may be utilized by the corresponding menu component.</p>
-
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>label</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Text of the item.</td>
-                            </tr>
-                            <tr>
-                                <td>icon</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Icon of the item.</td>
-                            </tr>
-                            <tr>
-                                <td>command</td>
-                                <td>function</td>
-                                <td>null</td>
-                                <td>Callback to execute when item is clicked.</td>
-                            </tr>
-                            <tr>
-                                <td>url</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>External link to navigate when item is clicked.</td>
-                            </tr>
-                            <tr>
-                                <td>items</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>An array of children menuitems.</td>
-                            </tr>
-                            <tr>
-                                <td>disabled</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>When set as true, disables the menuitem.</td>
-                            </tr>
-                            <tr>
-                                <td>target</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Specifies where to open the linked document.</td>
-                            </tr>
-                            <tr>
-                                <td>separator</td>
-                                <td>boolean</td>
-                                <td>false</td>
-                                <td>Defines the item as a separator.</td>
-                            </tr>
-                            <tr>
-                                <td>style</td>
-                                <td>object</td>
-                                <td>null</td>
-                                <td>Inline style of the menuitem.</td>
-                            </tr>
-                            <tr>
-                                <td>className</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the menuitem.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3>Command</h3>
-                <p>The function to invoke when an item is clicked is defined using the command property.</p>
-<CodeHighlight className="language-javascript">
-    {`
-const items =
-[
-    {
-        label: 'New',
-        icon: 'pi pi-plus',
-        command: (event) => {
-            // event.originalEvent: Browser event
-            // event.item: MenuItem instance
-        }
-    }
-];
-
-`}
-</CodeHighlight>
-
-                <h3>Navigation</h3>
-                <p>Navigation is specified using url property for external links or using command function for internal router.</p>
-                <CodeHighlight className="language-javascript">
-                    {`
-const items =
-[
-    {
-        label: 'New',
-        icon: 'pi pi-plus',
-        command: (event) => {
-            window.location.hash = "/fileupload";
-        }
-    },
-    {
-        label: 'Link',
-        icon: 'pi pi-check',
-        url: 'https://www.primefaces.org/primereact'
-    }
-];
-
-`}
-                </CodeHighlight>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/messages/MessagesDemo.js b/src/showcase/messages/MessagesDemo.js
deleted file mode 100644
index 01d1e11a00..0000000000
--- a/src/showcase/messages/MessagesDemo.js
+++ /dev/null
@@ -1,643 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Messages} from '../../components/messages/Messages';
-import {Message} from '../../components/message/Message';
-import {InputText} from '../../components/inputtext/InputText';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class MessagesDemo extends Component {
-
-    constructor() {
-        super();
-        this.showSuccess = this.showSuccess.bind(this);
-        this.showInfo = this.showInfo.bind(this);
-        this.showWarn = this.showWarn.bind(this);
-        this.showError = this.showError.bind(this);
-        this.showMultiple = this.showMultiple.bind(this);
-        this.showSticky = this.showSticky.bind(this);
-        this.clear = this.clear.bind(this);
-    }
-
-    showSuccess() {
-        this.messages.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
-    }
-
-    showInfo() {
-        this.messages.show({severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks'});
-    }
-
-    showWarn() {
-        this.messages.show({severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
-    }
-
-    showError() {
-        this.messages.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-    }
-
-    showSticky() {
-        this.messages.show({severity: 'info', summary: 'Sticky Message', detail: 'You need to close Me', sticky: true});
-    }
-
-    showMultiple() {
-        this.messages.show([
-            {severity: 'info', summary: 'Message 1', detail: 'PrimeReact rocks'},
-            {severity: 'info', summary: 'Message 2', detail: 'PrimeReact rocks'},
-            {severity: 'info', summary: 'Message 3', detail: 'PrimeFaces rocks'}
-        ]);
-    }
-
-    clear() {
-        this.messages.clear();
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Messages</h1>
-                        <p>Messages is used to display inline messages with various severities.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("messages")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Messages ref={(el) => this.messages = el} />
-
-                    <h3 style={{marginTop: 0}}>Severities</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showSuccess} label="Success" className="p-button-success" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showInfo} label="Info" className="p-button-info" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showWarn} label="Warn" className="p-button-warning" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showError} label="Error" className="p-button-danger" />
-                        </div>
-                    </div>
-
-                    <h3>Options</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showMultiple} label="Multiple" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showSticky} label="Sticky" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.clear} icon="pi pi-times" style={{float: 'right'}} label="Clear" />
-                        </div>
-                    </div>
-
-                    <h3>Inline Message CSS</h3>
-                    <p>CSS helpers to display inline messages mostly within forms.</p>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="info" text="PrimeReact Rocks" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="success" text="Record Saved" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="warn" text="Are you sure?" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="error" text="Field is required" />
-                        </div>
-                    </div>
-
-                    <div style={{ marginTop: '30px', paddingLeft: '.5em' }}>
-                        <InputText placeholder="Username" className="p-error" style={{marginRight: '.25em'}} />
-                        <Message severity="error" text="Field is required" />
-                    </div>
-                    <div style={{ marginTop: '30px', paddingLeft: '.5em' }}>
-                        <InputText placeholder="Email" className="p-error" style={{marginRight: '.25em'}} />
-                        <Message severity="error" />
-                    </div>
-                </div>
-
-                <MessagesDoc></MessagesDoc>
-            </div>
-        )
-    }
-}
-
-export class MessagesDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Messages} from 'primereact/messages';
-import {Message} from 'primereact/message';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>A single message is specified by the Message interface in PrimeReact that defines various properties such as severity,
-               summary and detail. Messages are displayed by using the <i>show</i> method on the ref of the Messages instance.</p>
-
-            <p>Note that for animations, messages requires react-transition-group package.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Messages ref={(el) => this.messages = el}></Messages>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-this.messages.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
-
-`}
-</CodeHighlight>
-
-            <h3>Message API</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Severity of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>summary</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>Summary content of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>detail</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>Detail content of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>closable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the message can be closed manually using the close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>sticky</td>
-                            <td>element</td>
-                            <td>null</td>
-                            <td>When enabled, message is not removed automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>life</td>
-                            <td>number</td>
-                            <td>3000</td>
-                            <td>Delay in milliseconds to close the message automatically.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Severities</h3>
-            <p>There are four possible values for the severity of a message.</p>
-
-            <ul>
-                <li>success</li>
-                <li>info</li>
-                <li>warn</li>
-                <li>error</li>
-            </ul>
-
-            <h3>Showing Messages</h3>
-            <p>Show method accepts either a single message or an array of messages.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Messages ref={(el) => this.messages = el}></Messages>
-
-<Button onClick={this.showSuccess} label="Success" className="p-button-success" />
-<Button onClick={this.showInfo} label="Info" className="p-button-info" />
-<Button onClick={this.showWarn} label="Warn" className="p-button-warning" />
-<Button onClick={this.showError} label="Error" className="p-button-danger" />
-<Button onClick={this.showMultiple} label="Multiple" />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-showSuccess() {
-    this.messages.show({ severity: 'success', summary: 'Success Message', detail: 'Order submitted' });
-}
-
-showInfo() {
-    this.messages.show({ severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks' });
-}
-
-showWarn() {
-    this.messages.show({ severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes' });
-}
-
-showError() {
-    this.messages.show({ severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
-}
-
-showMultiple() {
-    this.messages.show([
-        {severity:'info', summary:'Message 1', detail:'PrimeReact rocks'},
-        {severity:'info', summary:'Message 2', detail:'PrimeReact rocks'},
-        {severity:'info', summary:'Message 3', detail:'PrimeFaces rocks'}
-    ]);
-}
-
-`}
-                </CodeHighlight>
-
-                <h3>Clearing Messages</h3>
-                <p><i>clear()</i> method removes all messages.</p>
-
-                <CodeHighlight className="language-jsx">
-{`
-this.messages.clear();
-
-`}
-</CodeHighlight>
-
-                <h3>Replacing Messages</h3>
-                <p><i>replace(newMessages)</i> method adds new messages after removing all old messages.</p>
-
-                <CodeHighlight className="language-jsx">
-{`
-this.messages.replace(newMessages);
-
-`}
-</CodeHighlight>
-
-                <h3>Closable</h3>
-                <p>Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set <i>closable</i> to false.</p>
-
-                <CodeHighlight className="language-javascript">
-{`
-this.messages.show({closable: false, severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-
-`}
-                </CodeHighlight>
-
-                <h3>Sticky</h3>
-                <p>Messages are cleared automatically after the timeout defined by <i>life</i> property which is 3 seconds by default. Use <i>sticky</i> mode to make them stay until
-                they are manually removed.</p>
-
-<CodeHighlight className="language-javascript">
-    {`
-//sticky
-this.messages.show({ sticky: true, severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
-
-//automatically removed after 5 seconds
-this.messages.show({ life: 5000, severity: 'error', summary: 'Error Message', detail: 'Validation failed' });
-
-`}
-</CodeHighlight>
-
-
-                <h3>Message Component</h3>
-                <p>Message component is useful in cases where a single message needs to be displayed related to an element such as forms. It has two properties, <i>severity</i> and <i>text</i> of the message.</p>
-<CodeHighlight className="language-jsx">
-{`
-<h3>Inline Message CSS</h3>
-<p>CSS helpers to display inline messages mostly within forms.</p>
-<Message severity="info" text="PrimeNG Rocks"></Message>
-<Message severity="success" text="Record Saved"></Message>
-<Message severity="warn" text="Are you sure?"></Message>
-<Message severity="error" text="Field is required"></Message>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties of Message</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>severity</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Severity level of the message.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Message text.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Properties of Messages</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events of Messages</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onRemove</td>
-                            <td>message: Removed message </td>
-                            <td>Callback to invoke when a message is removed.</td>
-                        </tr>
-                        <tr>
-                            <td>onClick</td>
-                            <td>message: Clicked message </td>
-                            <td>Callback to invoke when a message gets clicked.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-messages</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-info</td>
-                            <td>Container element when displaying info messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-warn</td>
-                            <td>Container element when displaying warning messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-error</td>
-                            <td>Container element when displaying error messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-success</td>
-                            <td>Container element when displaying success messages.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-close</td>
-                            <td>Close icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-icon</td>
-                            <td>Severity icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-summary</td>
-                            <td>Summary of a message.</td>
-                        </tr>
-                        <tr>
-                            <td>p-messages-detail</td>
-                            <td>Detail of a message.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <ul>
-                    <li>react-transition-group</li>
-                </ul>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/messages" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Messages} from 'primereact/messages';
-import {Message} from 'primereact/components/message';
-import {InputText} from 'primereact/components/inputtext';
-import {Button} from 'primereact/components/button';
-
-export class MessagesDemo extends Component {
-
-    constructor() {
-        super();
-        this.showSuccess = this.showSuccess.bind(this);
-        this.showInfo = this.showInfo.bind(this);
-        this.showWarn = this.showWarn.bind(this);
-        this.showError = this.showError.bind(this);
-        this.showMultiple = this.showMultiple.bind(this);
-        this.showSticky = this.showSticky.bind(this);
-        this.clear = this.clear.bind(this);
-    }
-
-    showSuccess() {
-        this.messages.show({severity: 'success', summary: 'Success Message', detail: 'Order submitted'});
-    }
-
-    showInfo() {
-        this.messages.show({severity: 'info', summary: 'Info Message', detail: 'PrimeReact rocks'});
-    }
-
-    showWarn() {
-        this.messages.show({severity: 'warn', summary: 'Warn Message', detail: 'There are unsaved changes'});
-    }
-
-    showError() {
-        this.messages.show({severity: 'error', summary: 'Error Message', detail: 'Validation failed'});
-    }
-
-    showSticky() {
-        this.messages.show({severity: 'info', summary: 'Sticky Message', detail: 'You need to close Me', sticky: true});
-    }
-
-    showMultiple() {
-        this.messages.show([
-            {severity: 'info', summary: 'Message 1', detail: 'PrimeReact rocks'},
-            {severity: 'info', summary: 'Message 2', detail: 'PrimeReact rocks'},
-            {severity: 'info', summary: 'Message 3', detail: 'PrimeFaces rocks'}
-        ]);
-    }
-
-    clear() {
-        this.messages.clear();
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Messages</h1>
-                        <p>Messages is used to display inline messages with various severities.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Messages ref={(el) => this.messages = el} />
-
-                    <h3>Severities</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showSuccess} label="Success" className="p-button-success" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showInfo} label="Info" className="p-button-info" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showWarn} label="Warn" className="p-button-warning" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Button onClick={this.showError} label="Error" className="p-button-danger" />
-                        </div>
-                    </div>
-
-                    <h3>Options</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showMultiple} label="Multiple" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.showSticky} label="Sticky" />
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <Button onClick={this.clear} icon="pi pi-times" style={{ float: 'right' }} label="Clear" />
-                        </div>
-                    </div>
-
-                    <h3>Inline Message CSS</h3>
-                    <p>CSS helpers to display inline messages mostly within forms.</p>
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="info" text="PrimeReact Rocks" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="success" text="Record Saved" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="warn" text="Are you sure?" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <Message severity="error" text="Field is required" />
-                        </div>
-                    </div>
-
-                    <div style={{ marginTop: '30px', paddingLeft: '.5em' }}>
-                        <InputText placeholder="Username" className="p-error" style={{marginRight: '.25em'}} />
-                        <Message severity="error" text="Field is required" />
-                    </div>
-                    <div style={{ marginTop: '30px', paddingLeft: '.5em' }}>
-                        <InputText placeholder="Email" className="p-error" style={{marginRight: '.25em'}} />
-                        <Message severity="error" />
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/multiselect/MultiSelectDemo.js b/src/showcase/multiselect/MultiSelectDemo.js
deleted file mode 100644
index aedeee5332..0000000000
--- a/src/showcase/multiselect/MultiSelectDemo.js
+++ /dev/null
@@ -1,651 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {MultiSelect} from '../../components/multiselect/MultiSelect';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class MultiSelectDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars1: [],
-            cars2: []
-        };
-        this.carTemplate = this.carTemplate.bind(this);
-        this.selectedCarTemplate = this.selectedCarTemplate.bind(this);
-    }
-
-    carTemplate(option) {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img alt={option.label} src={logoPath} style={{width:'24px', verticalAlign:'middle'}} />
-                <span style={{fontSize:'1em',float:'right',marginTop:'4px'}}>{option.label}</span>
-            </div>
-        );
-    }
-
-    selectedCarTemplate(value) {
-        if (value) {
-            const logoPath = 'showcase/resources/demo/images/car/' + value + '.png';
-
-            return (
-                <div className="my-multiselected-item-token">
-                    <img alt={value} src={logoPath} style={{width:'20px', verticalAlign:'middle', marginRight:'.5em'}} />
-                    <span>{value}</span>
-                </div>
-            );
-        }
-        else {
-            return <span className="my-multiselected-empty-token">Choose</span>
-        }
-    }
-
-    render() {
-        const cars = [
-            {label: 'Audi', value: 'Audi'},
-            {label: 'BMW', value: 'BMW'},
-            {label: 'Fiat', value: 'Fiat'},
-            {label: 'Honda', value: 'Honda'},
-            {label: 'Jaguar', value: 'Jaguar'},
-            {label: 'Mercedes', value: 'Mercedes'},
-            {label: 'Renault', value: 'Renault'},
-            {label: 'VW', value: 'VW'},
-            {label: 'Volvo', value: 'Volvo'}
-        ];
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>MultiSelect</h1>
-                        <p>MultiSelect is used to select multiple items from a collection.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("multiSelect")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation multiselect-demo">
-                    <h3>Basic</h3>
-                    <MultiSelect value={this.state.cars1} options={cars} onChange={(e) => this.setState({cars1: e.value})}
-                            style={{minWidth:'15em'}} filter={true} filterPlaceholder="Search" placeholder="Choose" />
-
-                    <h3>Templating</h3>
-                    <MultiSelect value={this.state.cars2} options={cars} onChange={(e) => this.setState({cars2: e.value})}
-                                 style={{minWidth:'15em'}} filter={true} filterPlaceholder="Search" itemTemplate={this.carTemplate} selectedItemTemplate={this.selectedCarTemplate} />
-                </div>
-
-                <MultiSelectDoc />
-            </div>
-        );
-    }
-}
-
-export class MultiSelectDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {MultiSelect} from 'primereact/multiselect';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>MultiSelect is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
-            of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
-            whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. In addition,
-            options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>
-
-            <p><b>Options as SelectItems</b></p>
-            <CodeHighlight className="language-javascript">
-{`
-const citySelectItems = [
-    {label: 'New York', value: 'NY'},
-    {label: 'Rome', value: 'RM'},
-    {label: 'London', value: 'LDN'},
-    {label: 'Istanbul', value: 'IST'},
-    {label: 'Paris', value: 'PRS'}
-];
-
-`}
-            </CodeHighlight>
-
-            <CodeHighlight className="language-jsx">
-{`
-<MultiSelect value={this.state.cities} options={citySelectItems} onChange={(e) => this.setState({cities: e.value})} />
-
-`}
-            </CodeHighlight>
-
-            <p><b>Options as any type</b></p>
-<CodeHighlight className="language-javascript">
-{`
-const cities = [
-    {name: 'New York', code: 'NY'},
-    {name: 'Rome', code: 'RM'},
-    {name: 'London', code: 'LDN'},
-    {name: 'Istanbul', code: 'IST'},
-    {name: 'Paris', code: 'PRS'}
-];
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-jsx">
-{`
-<MultiSelect optionLabel="name" value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} />
-<MultiSelect optionLabel="name" optionValue="code" value={this.state.cities} options={cities} onChange={(e) => this.setState({cities: e.value})} />
-
-`}
-</CodeHighlight>
-            <p>When <i>optionValue</i> is not defined, value of an option refers to the option object itself.</p>
-
-            <h3>Custom Content</h3>
-            <p>Label of an option is used as the display text of an item by default, for custom content support define an itemTemplate function that gets the option as a parameter and returns the content.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<MultiSelect value={this.state.cars} options={cars} onChange={(e) => this.setState({cars: e.value})} itemTemplate={this.carTemplate} />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-carTemplate(option) {
-    const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-    return (
-        <div className="p-clearfix">
-            <img alt={option.label} src={logoPath} style={{display:'inline-block',margin:'5px 0 0 5px'}} />
-            <span style={{fontSize:'1em',float:'right',margin:'1em .5em 0 0'}}>{option.label}</span>
-        </div>
-    );
-}
-
-`}
-</CodeHighlight>
-                        <p>In addition <i>selectedItemTemplate</i> can be used to customize the selected values display instead of the default comma separated list.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<MultiSelect value={this.state.cars} options={cars} onChange={(e) => this.setState({cars: e.value})} selectedItemTemplate={this.selectedCarTemplate} />
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-
-selectedCarTemplate(option) {
-
-    if(option) {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-        return (
-            <div className="my-multiselected-item-token">
-                <img alt={option.label} src={logoPath} style={{width:'20px', verticalAlign:'middle', marginRight:'.5em'}} />
-                <span>{option.label}</span>
-            </div>
-        );
-    }
-    else {
-        return <span className="my-multiselected-empty-token">Choose</span>
-    }
-}
-
-`}
-                        </CodeHighlight>
-
-            <h3>Filtering</h3>
-            <p>Options can be filtered using an input field in the overlay by enabling the <i>filter</i> property. By default filtering is done against
-                label of the items and <i>filterBy</i> property is available to choose one or more properties of the options. In addition <i>filterMatchMode</i> can be utilized
-                to define the filtering algorithm, valid options are "contains" (default), "startsWith", "endsWith", "equals" and "notEquals".</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<MultiSelect value={this.state.cars} options={cars} onChange={(e) => this.setState({cars: e.value})} filter={true}/>
-
-`}
-</CodeHighlight>
-
-            <h3>SelectItem API</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>ClassName of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Tooltip text of the option. (Not supported)</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the option is disabled or not. (Not supported)</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of selectitems to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>scrollHeight</td>
-                            <td>string</td>
-                            <td>200px</td>
-                            <td>Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.</td>
-                        </tr>
-                        <tr>
-                            <td>placeholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label to display when there are no selections.</td>
-                        </tr>
-                        <tr>
-                            <td>fixedPlaceholder</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display selected items in the label section or always display the placeholder as the default label.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>When specified, displays an input field to filter the items on keyup.</td>
-                        </tr>
-                        <tr>
-                            <td>filterBy</td>
-                            <td>string</td>
-                            <td>label</td>
-                            <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMatchMode</td>
-                            <td>string</td>
-                            <td>contains</td>
-                            <td>Defines how the items are filtered, valid values are "contains", (default) "startsWith", "endsWith", "equals" and "notEquals".</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when filter input is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely match the value in options for better performance.</td>
-                        </tr>
-                        <tr>
-                            <td>required</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the focusable input.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets the option and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>selectedItemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the value and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>DOM element</td>
-                            <td>null</td>
-                            <td>DOM element instance where the dialog should be mounted.</td>
-                        </tr>
-                        <tr>
-                            <td>maxSelectedLabels</td>
-                            <td>number</td>
-                            <td>3</td>
-                            <td>Decides how many selected item labels to show at most.</td>
-                        </tr>
-                        <tr>
-                            <td>selectedItemsLabel</td>
-                            <td>string</td>
-                            <td>&#123;0&#125; items selected</td>
-                            <td>Label to display after exceeding max selected labels.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Browser event<br />
-                                event.value: Current selected values<br />
-                            </td>
-                            <td>Callback to invoke when value changes.</td>
-                        </tr>
-                        <tr>
-                            <td>onFocus</td>
-                            <td>event: Browser event.</td>
-                            <td>Callback to invoke when the element receives focus.</td>
-                        </tr>
-                        <tr>
-                            <td>onBlur</td>
-                            <td>event: Browser event.</td>
-                            <td>Callback to invoke when the element loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Methods</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>checkValidity</td>
-                            <td>-</td>
-                            <td>Checks whether the native hidden select element has any constraints and returns a boolean for the result.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-multiselect</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-label-container</td>
-                            <td>Container of the label to display selected items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-label-container</td>
-                            <td>Label to display selected items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-trigger</td>
-                            <td>Dropdown button.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-filter-container</td>
-                            <td>Container of filter input.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-panel</td>
-                            <td>Overlay panel for items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-items</td>
-                            <td>List container of items.</td>
-                        </tr>
-                        <tr>
-                            <td>p-multiselect-item</td>
-                            <td>An item in the list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/multiselect" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {MultiSelect} from 'primereact/multiselect';
-
-export class MultiSelectDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars1: [],
-            cars2: []
-        };
-        this.carTemplate = this.carTemplate.bind(this);
-        this.selectedCarTemplate = this.selectedCarTemplate.bind(this);
-    }
-
-    carTemplate(option) {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img alt={option.label} src={logoPath} style={{width:'24px', verticalAlign:'middle'}} />
-                <span style={{fontSize:'1em',float:'right',marginTop:'4px'}}>{option.label}</span>
-            </div>
-        );
-    }
-
-    selectedCarTemplate(value) {
-        if (value) {
-            const logoPath = 'showcase/resources/demo/images/car/' + value + '.png';
-
-            return (
-                <div className="my-multiselected-item-token">
-                    <img alt={value} src={logoPath} style={{width:'20px', verticalAlign:'middle', marginRight:'.5em'}} />
-                    <span>{value}</span>
-                </div>
-            );
-        }
-        else {
-            return <span className="my-multiselected-empty-token">Choose</span>
-        }
-    }
-
-    render() {
-        const cars = [
-            {label: 'Audi', value: 'Audi'},
-            {label: 'BMW', value: 'BMW'},
-            {label: 'Fiat', value: 'Fiat'},
-            {label: 'Honda', value: 'Honda'},
-            {label: 'Jaguar', value: 'Jaguar'},
-            {label: 'Mercedes', value: 'Mercedes'},
-            {label: 'Renault', value: 'Renault'},
-            {label: 'VW', value: 'VW'},
-            {label: 'Volvo', value: 'Volvo'}
-        ];
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>MultiSelect</h1>
-                        <p>MultiSelect is used to select multiple items from a collection.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation multiselect-demo">
-                    <h3>Basic</h3>
-                    <MultiSelect value={this.state.cars1} options={cars} onChange={(e) => this.setState({cars1: e.value})}
-                            style={{minWidth:'12em'}} filter={true} filterPlaceholder="Search" placeholder="Choose" />
-
-                    <h3>Templating</h3>
-                    <MultiSelect value={this.state.cars2} options={cars} onChange={(e) => this.setState({cars2: e.value})}
-                                 style={{minWidth:'12em'}} filter={true} filterPlaceholder="Search" itemTemplate={this.carTemplate} selectedItemTemplate={this.selectedCarTemplate} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/orderlist/OrderListDemo.js b/src/showcase/orderlist/OrderListDemo.js
deleted file mode 100644
index 1b5a484a98..0000000000
--- a/src/showcase/orderlist/OrderListDemo.js
+++ /dev/null
@@ -1,330 +0,0 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import {OrderList} from '../../components/orderlist/OrderList';
-import {CarService} from '../service/CarService';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class OrderListDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: []
-        };
-
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        const imageSource = 'showcase/resources/demo/images/car/' + car.brand + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img src={imageSource} alt={car.brand} style={{ display: 'inline-block', margin: '2px 0 2px 2px', width:48 }} />
-                <div style={{ fontSize: '14px', float: 'right', margin: '15px 5px 0 0' }}>{car.brand} - {car.year} - {car.color}</div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>OrderList</h1>
-                        <p>OrderList is used to sort a collection.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("orderList")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-6">
-                            <OrderList value={this.state.cars} dragdrop={true} itemTemplate={this.carTemplate}
-                                responsive={true} header="List of Cars" listStyle={{height: '20em'}}
-                                onChange={(e) => this.setState({cars: e.value})} />
-                        </div>
-                        <div className="p-col-12 p-md-6">
-                            <ul>
-                                {this.state.cars.map(car => <li key={car.vin}>{car.brand} - {car.year} - {car.color}</li>)}
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-
-                <OrderListDoc></OrderListDoc>
-            </div>
-        );
-    }
-}
-
-export class OrderListDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {OrderList} from 'primereact/orderlist';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>OrderList requires an array as its value, a template for its content where each item in the array can be accessed inside the template and <i>onChange</i>
-                    callback to update the value after reorder.
-            </p>
-<CodeHighlight className="language-jsx">
-{`
-<OrderList value={this.state.cars} itemTemplate={this.carTemplate} header="Responsive Cars" onChange={(e) => this.setState({cars: e.value})}></OrderList>
-
-`}
-</CodeHighlight>
-
-            <h3>DragDrop</h3>
-            <p>Items can be reordered using drag and drop by enabling <i>dragdrop</i> property.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<OrderList value={this.state.cars} itemTemplate={this.carTemplate} dragdrop={true} onChange={(e) => this.setState({cars: e.value})}></OrderList>
-
-`}
-</CodeHighlight>
-
-            <h3>Responsive</h3>
-            <p>In responsive mode, orderlist adjusts its controls based on screen size. To activate this mode, set responsive as true.</p>
-<CodeHighlight className="language-jsx">
-{`
-<OrderList value={this.state.cars} itemTemplate={this.carTemplate} responsive={true}
-        onChange={(e) => this.setState({cars: e.value})}></OrderList>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to reorder.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text for the caption</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>listStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the list element.</td>
-                        </tr>
-                        <tr>
-                            <td>responsive</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled orderlist adjusts its controls based on screen size.</td>
-                        </tr>
-                        <tr>
-                            <td>dragdrop</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to enable dragdrop based reordering.</td>
-                        </tr>
-                        <tr>
-                            <td>dragdropScope</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique key of drag drop events to avoid conflict with other drag drop events on the page.</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets an item in the list and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: Reordered list</td>
-                            <td>Callback to invoke when list is reordered.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-orderlist</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-orderlist-list</td>
-                            <td>List container.</td>
-                        </tr>
-                        <tr>
-                            <td>p-orderlist-item</td>
-                            <td>An item in the list</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/orderlist" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {OrderList} from 'primereact/orderlist';
-import {CarService} from '../service/CarService';
-
-export class OrderListDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            cars: null
-        };
-
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({cars: data}));
-    }
-
-    carTemplate(car) {
-        const imageSource = 'showcase/resources/demo/images/car/' + car.brand + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img src={imageSource} alt={car.brand} style={{ display: 'inline-block', margin: '2px 0 2px 2px', width:48 }} />
-                <div style={{ fontSize: '14px', float: 'right', margin: '15px 5px 0 0' }}>{car.brand} - {car.year} - {car.color}</div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>OrderList</h1>
-                        <p>OrderList is used to sort a collection.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-6">
-                            <OrderList value={this.state.cars} dragdrop={true} itemTemplate={this.carTemplate}
-                                responsive={true} header="List of Cars" listStyle={{height: '20em'}}
-                                onChange={(e) => this.setState({cars: e.value})} />
-                        </div>
-                        <div className="p-col-12 p-md-6">
-                            <ul>
-                                {this.state.cars.map(car => <li key={car.vin}>{car.brand} - {car.year} - {car.color}</li>)}
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/organizationchart/OrganizationChartDemo.js b/src/showcase/organizationchart/OrganizationChartDemo.js
deleted file mode 100644
index 4c284dfe61..0000000000
--- a/src/showcase/organizationchart/OrganizationChartDemo.js
+++ /dev/null
@@ -1,638 +0,0 @@
-import React, {Component} from 'react';
-import {OrganizationChart} from '../../components/organizationchart/OrganizationChart';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class OrganizationChartDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            data1: [{
-                label: 'CEO',
-                type: 'person',
-                className: 'p-person',
-                expanded: true,
-                data: {name:'Walter White', 'avatar': 'walter.jpg'},
-                children: [
-                    {
-                        label: 'CFO',
-                        type: 'person',
-                        className: 'p-person',
-                        expanded: true,
-                        data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
-                        children:[{
-                            label: 'Tax',
-                            className: 'department-cfo'
-                        },
-                        {
-                            label: 'Legal',
-                            className: 'department-cfo'
-                        }],
-                    },
-                    {
-                        label: 'COO',
-                        type: 'person',
-                        className: 'p-person',
-                        expanded: true,
-                        data: {name:'Mike E.', 'avatar': 'mike.jpg'},
-                        children:[{
-                            label: 'Operations',
-                            className: 'department-coo'
-                        }]
-                    },
-                    {
-                        label: 'CTO',
-                        type: 'person',
-                        className: 'p-person',
-                        expanded: true,
-                        data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
-                        children:[{
-                            label: 'Development',
-                            className: 'department-cto',
-                            expanded: true,
-                            children:[{
-                                label: 'Analysis',
-                                className: 'department-cto'
-                            },
-                            {
-                                label: 'Front End',
-                                className: 'department-cto'
-                            },
-                            {
-                                label: 'Back End',
-                                className: 'department-cto'
-                            }]
-                        },
-                        {
-                            label: 'QA',
-                            className: 'department-cto'
-                        },
-                        {
-                            label: 'R&D',
-                            className: 'department-cto'
-                        }]
-                    }
-                ]
-            }],
-            data2 : [{
-                label: 'F.C Barcelona',
-                expanded: true,
-                children: [
-                    {
-                        label: 'F.C Barcelona',
-                        expanded: true,
-                        children: [
-                            {
-                                label: 'Chelsea FC'
-                            },
-                            {
-                                label: 'F.C. Barcelona'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Real Madrid',
-                        expanded: true,
-                        children: [
-                            {
-                                label: 'Bayern Munich'
-                            },
-                            {
-                                label: 'Real Madrid'
-                            }
-                        ]
-                    }
-                ]
-            }],
-            selection: []
-        };
-
-        this.nodeTemplate = this.nodeTemplate.bind(this);
-    }
-
-    nodeTemplate(node) {
-        if (node.type === "person") {
-            return (
-                <div>
-                    <div className="node-header">{node.label}</div>
-                    <div className="node-content">
-                        <img alt={node.data.avatar} src={`showcase/resources/demo/images/organization/${node.data.avatar}`} style={{ width: '32px' }}/>
-                        <div>{node.data.name}</div>
-                    </div>
-                </div>
-            );
-        }
-
-        if (node.type === "department") {
-            return node.label;
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>OrganizationChart</h1>
-                        <p>OrganizationChart visualizes hierarchical organization data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("organizationChart")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation organizationchart-demo">
-                    <h3>Advanced</h3>
-                    <OrganizationChart value={this.state.data1} nodeTemplate={this.nodeTemplate} selection={this.state.selection} selectionMode="multiple"
-                        onSelectionChange={event => this.setState({selection: event.data})} className="company"></OrganizationChart>
-
-                    <h3>Basic</h3>
-                    <OrganizationChart value={this.state.data2}></OrganizationChart>
-                </div>
-
-                <OrganizationChartDoc></OrganizationChartDoc>
-            </div>
-        )
-    }
-}
-
-export class OrganizationChartDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-{`
-import {OrganizationChart} from 'primereact/organizationchart';
-
-`}
-</CodeHighlight>
-
-
-            <h3>Getting Started</h3>
-            <p>OrganizationChart requires a model of TreeNode as its value.</p>
-            <CodeHighlight className="language-javascript">
-{`
-export class OrganizationChartDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            data: [{
-                label: 'F.C Barcelona',
-                expanded: true,
-                children: [
-                    {
-                        label: 'F.C Barcelona',
-                        expanded: true,
-                        children: [
-                            {
-                                label: 'Chelsea FC'
-                            },
-                            {
-                                label: 'F.C. Barcelona'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Real Madrid',
-                        expanded: true,
-                        children: [
-                            {
-                                label: 'Bayern Munich'
-                            },
-                            {
-                                label: 'Real Madrid'
-                            }
-                        ]
-                    }
-                ]
-            }]
-        };
-    }
-
-    render() {
-        return (
-            <OrganizationChart value={this.state.data}></OrganizationChart>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Templating</h3>
-            <p>Label of the treenode is displayed inside the node content by default and templating enables further customization.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<OrganizationChart value={this.state.data} nodeTemplate={this.nodeTemplate}></OrganizationChart>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-
-nodeTemplate(node) {
-    if (node.type === "person") {
-        return (
-            <div>
-                <div className="node-header">{node.label}</div>
-                    <div className="node-content">
-                        <img alt={node.data.avatar} src={\`showcase/resources/demo/images/organization/\${node.data.avatar}\`} style={{ width: '32px' }}/>
-                    <div>{node.data.name}</div>
-                </div>
-            </div>
-        );
-    }
-
-    if (node.type === "department") {
-        return node.label;
-    }
-}
-`}
-</CodeHighlight>
-
-            <h3>Expand/Collapse State</h3>
-            <p>In order to display a treenode as expanded by default, set "expanded" property as true in your model.</p>
-
-            <h3>Selection</h3>
-            <p>OrganizationChart supports two selection methods; single or multiple. Selection is enabled by setting <i>selectionMode</i> property to the corresponding mode, defining <i>selection</i> property along with <i>selectionChange</i> callback.</p>
-<CodeHighlight className="language-jsx">
-{`
-<OrganizationChart value={this.state.data} selectionMode="single" selection={this.state.selectedNode} onSelectionChange={event => this.setState({selectedNode: event.data})}></OrganizationChart>
-
-`}
-</CodeHighlight>
-
-                <h3>Properties</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Type</th>
-                                <th>Default</th>
-                                <th>Description</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>id</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Unique identifier of the element.</td>
-                            </tr>
-                            <tr>
-                                <td>value</td>
-                                <td>array</td>
-                                <td>null</td>
-                                <td>An array of nested TreeNodes.</td>
-                            </tr>
-                            <tr>
-                                <td>style</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Inline style of the component.</td>
-                            </tr>
-                            <tr>
-                                <td>className</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Style class of the component.</td>
-                            </tr>
-                            <tr>
-                                <td>selectionMode</td>
-                                <td>string</td>
-                                <td>null</td>
-                                <td>Defines the selection mode, valid values "single" and "multiple".</td>
-                            </tr>
-                            <tr>
-                                <td>selection</td>
-                                <td>any</td>
-                                <td>null</td>
-                                <td>A single treenode instance or an array to refer to the selections.</td>
-                            </tr>
-                            <tr>
-                                <td>nodeTemplate</td>
-                                <td>function</td>
-                                <td>null</td>
-                                <td>Template function that gets a node as a parameter and returns a content.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3>Events</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>onNodeSelect</td>
-                                <td>event.originalEvent: browser event <br />
-                                    event.node: Selected node instance.</td>
-                                <td>Callback to invoke when a node is selected.</td>
-                            </tr>
-                            <tr>
-                                <td>onNodeUnselect</td>
-                                <td>event.originalEvent: browser event <br />
-                                    event.node: Unselected node instance.</td>
-                                <td>Callback to invoke when a node is unselected.</td>
-                            </tr>
-                            <tr>
-                                <td>onSelectionChange</td>
-                                <td>event.originalEvent: browser event <br />
-                                    event.data: New selection.</td>
-                                <td>Callback to invoke when node selection changes.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3>Styling</h3>
-                <p>Following is the list of structural style classes.</p>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Name</th>
-                                <th>Element</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>p-organizationchart</td>
-                                <td>Container element.</td>
-                            </tr>
-                            <tr>
-                                <td>p-organizationchart-table</td>
-                                <td>Table container of a node.</td>
-                            </tr>
-                            <tr>
-                                <td>p-organizationchart-lines</td>
-                                <td>Connector lines container.</td>
-                            </tr>
-                            <tr>
-                                <td>p-organizationchart-nodes</td>
-                                <td>Contained of node children.</td>
-                            </tr>
-                            <tr>
-                                <td>p-organizationchart-line-right</td>
-                                <td>Right side line of a node connector.</td>
-                            </tr>
-                            <tr>
-                                <td>p-organizationchart-line-left</td>
-                                <td>Left side line of a node connector.</td>
-                            </tr>
-                            <tr>
-                                <td>p-organizationchart-line-top</td>
-                                <td>Top side line of a node connector.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/organizationchart" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {OrganizationChart} from 'primereact/organizationchart';
-import './OrganizationChartCustomStyle.css';
-
-export class OrganizationChartDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            data1: [{
-                label: 'CEO',
-                type: 'person',
-                className: 'p-person',
-                expanded: true,
-                data: {name:'Walter White', 'avatar': 'walter.jpg'},
-                children: [
-                    {
-                        label: 'CFO',
-                        type: 'person',
-                        className: 'p-person',
-                        expanded: true,
-                        data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
-                        children:[{
-                            label: 'Tax',
-                            className: 'department-cfo'
-                        },
-                        {
-                            label: 'Legal',
-                            className: 'department-cfo'
-                        }],
-                    },
-                    {
-                        label: 'COO',
-                        type: 'person',
-                        className: 'p-person',
-                        expanded: true,
-                        data: {name:'Mike E.', 'avatar': 'mike.jpg'},
-                        children:[{
-                            label: 'Operations',
-                            className: 'department-coo'
-                        }]
-                    },
-                    {
-                        label: 'CTO',
-                        type: 'person',
-                        className: 'p-person',
-                        expanded: true,
-                        data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
-                        children:[{
-                            label: 'Development',
-                            className: 'department-cto',
-                            expanded: true,
-                            children:[{
-                                label: 'Analysis',
-                                className: 'department-cto'
-                            },
-                            {
-                                label: 'Front End',
-                                className: 'department-cto'
-                            },
-                            {
-                                label: 'Back End',
-                                className: 'department-cto'
-                            }]
-                        },
-                        {
-                            label: 'QA',
-                            className: 'department-cto'
-                        },
-                        {
-                            label: 'R&D',
-                            className: 'department-cto'
-                        }]
-                    }
-                ]
-            }],
-            data2 : [{
-                label: 'F.C Barcelona',
-                expanded: true,
-                children: [
-                    {
-                        label: 'F.C Barcelona',
-                        expanded: true,
-                        children: [
-                            {
-                                label: 'Chelsea FC'
-                            },
-                            {
-                                label: 'F.C. Barcelona'
-                            }
-                        ]
-                    },
-                    {
-                        label: 'Real Madrid',
-                        expanded: true,
-                        children: [
-                            {
-                                label: 'Bayern Munich'
-                            },
-                            {
-                                label: 'Real Madrid'
-                            }
-                        ]
-                    }
-                ]
-            }],
-            selection: []
-        };
-
-        this.nodeTemplate = this.nodeTemplate.bind(this);
-    }
-
-    nodeTemplate(node) {
-        if (node.type === "person") {
-            return (
-                <div>
-                    <div className="node-header">{node.label}</div>
-                    <div className="node-content">
-                        <img alt={node.data.avatar} src={'showcase/resources/demo/images/organization/\${node.data.avatar}'} style={{ width: '32px' }}/>
-                        <div>{node.data.name}</div>
-                    </div>
-                </div>
-            );
-        }
-
-        if (node.type === "department") {
-            return node.label;
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>OrganizationChart</h1>
-                        <p>OrganizationChart visualized hierarchical organization data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation organizationchart-demo">
-                    <h3>Advanced</h3>
-                    <OrganizationChart value={this.state.data1} nodeTemplate={this.nodeTemplate} selection={this.state.selection} selectionMode="multiple"
-                        onSelectionChange={event => this.setState({selection: event.data})} className="company"></OrganizationChart>
-
-                    <h3>Basic</h3>
-                    <OrganizationChart value={this.state.data2}></OrganizationChart>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-.company.p-organizationchart .p-organizationchart-node-content.p-person {
-    padding: 0;
-    border: 0 none;
-}
-
-.node-header, .node-content {
-    padding: .5em .7em;
-}
-
-.node-header {
-    background-color: #495ebb;
-    color: #ffffff;
-}
-
-.node-content {
-    text-align: center;
-    border: 1px solid #495ebb;
-}
-
-.node-content img {
-    border-radius: 50%;
-}
-
-.department-cfo {
-    background-color: #7247bc;
-    color: #ffffff;
-}
-
-.department-coo {
-    background-color: #a534b6;
-    color: #ffffff;
-}
-
-.department-cto {
-    background-color: #e9286f;
-    color: #ffffff;
-}
-
-.p-organizationchart .p-highlight {
-    background-color: orange;
-}
-
-.p-person .p-node-toggler {
-    color: #495ebb !important;
-}
-
-.department-cto .p-node-toggler {
-    color: #8a0a39 !important;
-}
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/overlaypanel/OverlayPanelDemo.js b/src/showcase/overlaypanel/OverlayPanelDemo.js
deleted file mode 100644
index 79caa130d2..0000000000
--- a/src/showcase/overlaypanel/OverlayPanelDemo.js
+++ /dev/null
@@ -1,265 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {OverlayPanel} from '../../components/overlaypanel/OverlayPanel';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class OverlayPanelDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>OverlayPanel</h1>
-                        <p>OverlayPanel is a container component that can overlay other components on page.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("overlayPanel")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation" aria-controls="overlay_panel" aria-haspopup={true}>
-                    <Button type="button" label="Toggle" onClick={(e) => this.op.toggle(e)}/>
-
-                    <OverlayPanel ref={(el) => this.op = el} id="overlay_panel" showCloseIcon={true} >
-                        <img src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" alt="Galleria 1" />
-                    </OverlayPanel>
-                </div>
-
-                <OverlayPanelDoc></OverlayPanelDoc>
-            </div>
-        )
-    }
-}
-
-export class OverlayPanelDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {OverlayPanel} from 'primereact/overlaypanel';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>OverlayPanel is accessed via its reference where visibility is controlled using toggle, show and hide methods.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Button type="button" label="Basic" onClick={(e) => this.op.toggle(e)} />
-
-<OverlayPanel ref={(el) => this.op = el}>
-    <img src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" alt="Galleria 1" />
-</OverlayPanel>
-
-`}
-</CodeHighlight>
-
-            <h3>Dismissable and CloseIcon</h3>
-            <p>Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior.
-               Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<OverlayPanel ref={(el) => {this.op = el;}} showCloseIcon={true} dismissable={true}>
-    <img src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" alt="Galleria 1" />
-</OverlayPanel>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>dismissable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Enables to hide the overlay when outside is clicked.</td>
-                        </tr>
-                        <tr>
-                            <td>showCloseIcon</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, displays a close icon at top right corner.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>appendTo</td>
-                            <td>DOM element</td>
-                            <td>null</td>
-                            <td>DOM element instance where the dialog should be mounted.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaCloseLabel</td>
-                            <td>string</td>
-                            <td>close</td>
-                            <td>Aria label of the close icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onHide</td>
-                            <td>-</td>
-                            <td>Callback to invoke when overlay gets hidden.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Methods</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>toggle</td>
-                            <td>event: Browser event</td>
-                            <td>Toggles the visiblity of the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>show</td>
-                            <td>event: Browser event <br />
-                                target: Optional target if event.target should not be used</td>
-                            <td>Shows the overlay.</td>
-                        </tr>
-                        <tr>
-                            <td>hide</td>
-                            <td>-</td>
-                            <td>Hides the overlay.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-overlaypanel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlaypanel-content</td>
-                            <td>Content of the panel.</td>
-                        </tr>
-                        <tr>
-                            <td>p-overlaypanel-close</td>
-                            <td>Close icon.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/overlaypanel" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {OverlayPanel} from 'primereact/overlaypanel';
-
-export class OverlayPanelDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>OverlayPanel</h1>
-                        <p>OverlayPanel is a container component that can overlay other components on page.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Button type="button" label="Toggle" onClick={(e) => this.op.toggle(e)} aria-controls="overlay_panel" aria-haspopup={true}/>
-
-                    <OverlayPanel ref={(el) => this.op = el} id="overlay_panel" showCloseIcon={true} >
-                        <img src="http://github.com/showcase/resources/demo/images/galleria/galleria1.jpg" alt="Galleria 1" />
-                    </OverlayPanel>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/paginator/PaginatorDemo.js b/src/showcase/paginator/PaginatorDemo.js
deleted file mode 100644
index 572d9a7e4f..0000000000
--- a/src/showcase/paginator/PaginatorDemo.js
+++ /dev/null
@@ -1,371 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Paginator} from '../../components/paginator/Paginator';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class PaginatorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            first: 0,
-            rows: 10,
-            first2: 0,
-            rows2: 10
-        };
-
-        this.onPageChange = this.onPageChange.bind(this);
-        this.onPageChange2 = this.onPageChange2.bind(this);
-    }
-
-    onPageChange(event) {
-        this.setState({
-            first: event.first,
-            rows: event.rows
-        });
-    }
-
-    onPageChange2(event) {
-        this.setState({
-            first2: event.first,
-            rows2: event.rows
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Paginator</h1>
-                        <p>Paginator is a generic widget to display content in paged format.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("paginator")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Default</h3>
-                    <Paginator first={this.state.first} rows={this.state.rows} totalRecords={120} rowsPerPageOptions={[10,20,30]} onPageChange={this.onPageChange}></Paginator>
-
-                    <h3>Custom Template</h3>
-                    <Paginator first={this.state.first2} rows={this.state.rows2} totalRecords={120} rowsPerPageOptions={[10,20,30]} onPageChange={this.onPageChange2}
-                        template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
-                </div>
-
-                <PaginatorDoc></PaginatorDoc>
-            </div>
-        );
-    }
-}
-
-export class PaginatorDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Paginator} from 'primereact/paginator';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Paginator is used as a controlled component with <i>first</i>, <i>rows</i> (optional) and <i>onPageChange</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Paginator first={this.state.first} rows={this.state.rows} onPageChange={(e) => this.setState({first: e.first})}></Paginator>
-
-`}
-</CodeHighlight>
-
-            <h3>Rows and TotalRecords</h3>
-            <p>Rows and TotalRecords define how many pages the paginator should display. Paginator below will have 10 pages.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Paginator rows={10} totalRecords={120} first={this.state.first} onPageChange={(e) => this.setState({first: e.first})}></Paginator>
-
-`}
-</CodeHighlight>
-
-            <h3>Rows Per Page</h3>
-            <p>Number of items per page can be changed by the user using a dropdown if you define rowsPerPageOptions as an array of possible values. In this case,
-                rows property should also be updated
-            </p>
-<CodeHighlight className="language-jsx">
-{`
-<Paginator first={this.state.first} rows={this.state.rows} totalRecords={120} rowsPerPageOptions={[10,20,30]} onPageChange={(e) => this.setState({first: e.first, rows: e.rows})}></Paginator>
-
-`}
-</CodeHighlight>
-
-            <h3>Template</h3>
-            <p>Paginator elements can be customized using the template property using the predefined keys, default value is
-            "FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
-            can be placed inside a paginator.</p>
-
-            <ul>
-                <li>FirstPageLink</li>
-                <li>PrevPageLink</li>
-                <li>PageLinks</li>
-                <li>NextPageLink</li>
-                <li>LastPageLink</li>
-                <li>RowsPerPageDropdown</li>
-                <li>CurrentPageReport</li>
-            </ul>
-
-            <h3>CurrentPageReport</h3>
-            <p>Current page report item in the itemplate displays information about the pagination state. Default value is (&#123;currentPage&#125; of &#123;totalPages&#125;)
-                whereas available placeholders are the following;</p>
-            <ul>
-                <li>&#123;currentPage&#125;</li>
-                <li>&#123;totalPages&#125;</li>
-                <li>&#123;rows&#125;</li>
-                <li>&#123;first&#125;</li>
-                <li>&#123;last&#125;</li>
-                <li>&#123;totalRecords&#125;</li>
-            </ul>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>totalRecords</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Number of total records.</td>
-                        </tr>
-                        <tr>
-                            <td>rows</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Data count to display per page.</td>
-                        </tr>
-                        <tr>
-                            <td>first</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Zero-relative number of the first row to be displayed.</td>
-                        </tr>
-                        <tr>
-                            <td>pageLinkSize</td>
-                            <td>number</td>
-                            <td>5</td>
-                            <td>Number of page links to display.</td>
-                        </tr>
-                        <tr>
-                            <td>rowsPerPageOptions</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>Array of integer values to display inside rows per page dropdown.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>template</td>
-                            <td>string</td>
-                            <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                            <td>Template of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>leftContent</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content to inject into the left side of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>rightContent</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content to inject into the right side of the paginator.</td>
-                        </tr>
-                        <tr>
-                            <td>currentPageReportTemplate</td>
-                            <td>string</td>
-                            <td>(&#123;currentPage&#125; of &#123;totalPages&#125;)</td>
-                            <td>Template of the current page report element. Available placeholders are
-                                &#123;currentPage&#125;,&#123;totalPages&#125;,&#123;rows&#125;,&#123;first&#125;,&#123;last&#125; and &#123;totalRecords&#125;
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onPageChange</td>
-                            <td>event.page: New page number <br/>
-                                event.first: Index of first record <br/>
-                                event.rows: Number of rows to display in new page <br/>
-                                event.page: Index of the new page <br/>
-                                event.pageCount: Total number of pages
-                            </td>
-                            <td>Callback to invoke when page changes, the event object contains information about the new state.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-paginator</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-first</td>
-                            <td>First page element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-prev</td>
-                            <td>Previous page element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-pages</td>
-                            <td>Container of page links.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-page</td>
-                            <td>A page link.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-next</td>
-                            <td>Next pge element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-last</td>
-                            <td>Last page element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-paginator-rpp-options</td>
-                            <td>Rows per page dropdown.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/paginator" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Paginator} from 'primereact/paginator';
-
-export class PaginatorDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            first: 0,
-            rows: 10,
-            first2: 0,
-            rows2: 10
-        };
-
-        this.onPageChange = this.onPageChange.bind(this);
-        this.onPageChange2 = this.onPageChange2.bind(this);
-    }
-
-    onPageChange(event) {
-        this.setState({
-            first: event.first,
-            rows: event.rows
-        });
-    }
-
-    onPageChange2(event) {
-        this.setState({
-            first2: event.first,
-            rows2: event.rows
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Paginator</h1>
-                        <p>Paginator is a generic widget to display content in paged format.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Default</h3>
-                    <Paginator first={this.state.first} rows={this.state.rows} totalRecords={120} rowsPerPageOptions={[10,20,30]} onPageChange={this.onPageChange}></Paginator>
-
-                    <h3>Custom Template</h3>
-                    <Paginator first={this.state.first2} rows={this.state.rows2} totalRecords={120} rowsPerPageOptions={[10,20,30]} onPageChange={this.onPageChange2}
-                        template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/panel/PanelDemo.js b/src/showcase/panel/PanelDemo.js
deleted file mode 100644
index e14b83ae4d..0000000000
--- a/src/showcase/panel/PanelDemo.js
+++ /dev/null
@@ -1,287 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Panel} from '../../components/panel/Panel';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class PanelDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Panel</h1>
-                        <p>Panel is a grouping component providing with content toggle feature.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("panel")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Panel header="Godfather I">
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Panel>
-
-                     <Panel header="Godfather I" style={{marginTop:'2em'}} toggleable={true}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Panel>
-                </div>
-
-                <PanelDoc></PanelDoc>
-            </div>
-        )
-    }
-}
-
-export class PanelDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Panel} from 'primereact/panel';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Panel is a container component that accepts content as its children.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Panel header="Godfather I">
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</Panel>
-
-`}
-</CodeHighlight>
-
-            <p>Instead of simple strings, <i>header</i> propery also can be used to provide custom content as JSX.</p>
-
-            <h3>Toggleable</h3>
-            <p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option. A toggleable panel can either be used as a Controlled or Uncontrolled component.</p>
-
-            <p>In controlled mode, <i>collapsed</i> and <i>onToggle</i> properties needs to be defined to control the collapsed state.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Panel header="Godfather I" style={{marginTop:'2em'}} toggleable={true} collapsed={this.state.panelCollapsed} onToggle={(e) => this.setState({panelCollapsed: e.value})}>
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</Panel>
-
-`}
-</CodeHighlight>
-
-            <p>In uncontrolled mode, only <i>toggleable</i> property needs to be enabled. Initial state can be still be provided using the <i>collapsed</i> property in uncontrolled mode however
-            it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the collapsed state, prefer to use the component as controlled.</p>
-
-            <CodeHighlight className="language-jsx">
-{`
-<Panel header="Godfather I" style={{marginTop:'2em'}} toggleable={true}>
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</Panel>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>header</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Header text of the panel.</td>
-                        </tr>
-                        <tr>
-                            <td>toggleable</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines if content of panel can be expanded and collapsed.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>collapsed</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Defines the initial state of panel content, supports one or two-way binding as well.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onCollapse</td>
-                            <td>event.originalEvent: browser event </td>
-                            <td>Callback to invoke when an active tab is collapsed by clicking on the header.</td>
-                        </tr>
-                        <tr>
-                            <td>onExpand</td>
-                            <td>event.originalEvent: browser event </td>
-                            <td>Callback to invoke when a tab gets expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>onToggle</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.value: collapsed state as a boolean
-                             </td>
-                            <td>Callback to invoke when a tab gets expanded.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-panel</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-titlebar</td>
-                            <td>Header section.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-title</td>
-                            <td>Title text of panel.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-titlebar-toggler</td>
-                            <td>Toggle icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-panel-content</td>
-                            <td>Content of panel.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <ul>
-                    <li>react-transition-group</li>
-                </ul>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/panel" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Panel} from 'primereact/panel';
-
-export class PanelDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Panel</h1>
-                        <p>Panel is a grouping component providing with content toggle feature.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Panel header="Godfather I">
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Panel>
-
-                     <Panel header="Godfather I" style={{marginTop:'2em'}} toggleable={true}>
-                        <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-                        His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-                        Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-                        kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                    </Panel>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/panelmenu/PanelMenuDemo.js b/src/showcase/panelmenu/PanelMenuDemo.js
deleted file mode 100644
index 85795ac86d..0000000000
--- a/src/showcase/panelmenu/PanelMenuDemo.js
+++ /dev/null
@@ -1,561 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {PanelMenu} from '../../components/panelmenu/PanelMenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class PanelMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            }
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      }
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus'
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus'
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                }
-             ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PanelMenu</h1>
-                        <p>PanelMenu is a hybrid of accordion-tree components.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("panelMenu")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <PanelMenu model={this.state.items} style={{width:'300px'}}/>
-                </div>
-
-                <PanelMenuDoc/>
-            </div>
-        );
-    }
-}
-
-class PanelMenuDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {PanelMenu} from 'primereact/panelmenu';
-
-`}</CodeHighlight>
-                        <h3>MenuItem API</h3>
-                        <p>PanelMenu uses the common menu item api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>PanelMenu requires a collection of menuitems as its model.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<PanelMenu model={items} style={{width:'300px'}}/>
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-const items:[
-    {
-       label:'File',
-       icon:'pi pi-fw pi-file',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-plus',
-             items:[
-                {
-                   label:'Bookmark',
-                   icon:'pi pi-fw pi-bookmark'
-                },
-                {
-                   label:'Video',
-                   icon:'pi pi-fw pi-video'
-                }
-             ]
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-trash'
-          },
-          {
-             label:'Export',
-             icon:'pi pi-fw pi-external-link'
-          }
-       ]
-    },
-    {
-       label:'Edit',
-       icon:'pi pi-fw pi-pencil',
-       items:[
-          {
-             label:'Left',
-             icon:'pi pi-fw pi-align-left'
-          },
-          {
-             label:'Right',
-             icon:'pi pi-fw pi-align-right'
-          },
-          {
-             label:'Center',
-             icon:'pi pi-fw pi-align-center'
-          },
-          {
-             label:'Justify',
-             icon:'pi pi-fw pi-align-justify'
-          },
-
-       ]
-    },
-    {
-       label:'Users',
-       icon:'pi pi-fw pi-user',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-user-plus'
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-user-minus'
-          },
-          {
-             label:'Search',
-             icon:'pi pi-fw pi-users',
-             items:[
-                {
-                   label:'Filter',
-                   icon:'pi pi-fw pi-filter',
-                   items:[
-                      {
-                         label:'Print',
-                         icon:'pi pi-fw pi-print'
-                      }
-                   ]
-                },
-                {
-                   icon:'pi pi-fw pi-bars',
-                   label:'List'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       label:'Events',
-       icon:'pi pi-fw pi-calendar',
-       items:[
-          {
-             label:'Edit',
-             icon:'pi pi-fw pi-pencil',
-             items:[
-                {
-                   label:'Save',
-                   icon:'pi pi-fw pi-calendar-plus'
-                },
-                {
-                   label:'Delete',
-                   icon:'pi pi-fw pi-calendar-minus'
-                }
-             ]
-          },
-          {
-             label:'Archieve',
-             icon:'pi pi-fw pi-calendar-times',
-             items:[
-                {
-                   label:'Remove',
-                   icon:'pi pi-fw pi-calendar-minus'
-                }
-             ]
-          }
-       ]
-    }
- ];
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-panelmenu</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-panelmenu-header</td>
-                                        <td>Accordion header of root submenu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-panelmenu-content</td>
-                                        <td>Accordion content of root submenu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-submenu-list</td>
-                                        <td>List element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem</td>
-                                        <td>Menuitem element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-text</td>
-                                        <td>Label of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-icon</td>
-                                        <td>Icon of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-panelmenu-icon</td>
-                                        <td>Arrow icon of an accordion header.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/panelmenu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {PanelMenu} from 'primereact/panelmenu';
-
-export class PanelMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                }
-             ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PanelMenu</h1>
-                        <p>PanelMenu is a hybrid of accordion-tree components.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <PanelMenu model={this.state.items} style={{width:'300px'}}/>
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/password/PasswordDemo.js b/src/showcase/password/PasswordDemo.js
deleted file mode 100644
index f634603e04..0000000000
--- a/src/showcase/password/PasswordDemo.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Password} from '../../components/password/Password';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class PasswordDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Password</h1>
-                        <p>Password displays strength indicator for password fields.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("password")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Password</h3>
-                    <Password/>
-                </div>
-
-                <PasswordDoc />
-            </div>
-        );
-    }
-}
-
-class PasswordDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                        {`
-import {Password} from 'primereact/password';
-
-`}</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Password is used as a controlled component with <i>value</i> and <i>onChange</i> properties.</p>
-                        <CodeHighlight className="language-jsx">
-                        {`
-<Password value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <p>Password accepts all valid properties of an input element in addition the the custom properties below.</p>
-
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>promptLabel</td>
-                                        <td>string</td>
-                                        <td>Please enter a password</td>
-                                        <td>Text to prompt password entry.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>weakLabel</td>
-                                        <td>string</td>
-                                        <td>Weak</td>
-                                        <td>Text for a weak password.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>mediumLabel</td>
-                                        <td>string</td>
-                                        <td>Medium</td>
-                                        <td>Text for a medium password.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>strongLabel</td>
-                                        <td>string</td>
-                                        <td>Strong</td>
-                                        <td>Text for a strong password.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>feedback</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to show the strength indicator or not.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-password-panel</td>
-                                        <td>Container of password panel</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-password-meter</td>
-                                        <td>Meter element of password strength</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-password-info</td>
-                                        <td>Text to display strength</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/password" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Password} from 'primereact/password';
-
-export class PasswordDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Password</h1>
-                        <p>Password displays strength indicator for password fields.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Password</h3>
-                    <Password/>
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                    </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/picklist/PickListDemo.js b/src/showcase/picklist/PickListDemo.js
deleted file mode 100644
index 2333e1905a..0000000000
--- a/src/showcase/picklist/PickListDemo.js
+++ /dev/null
@@ -1,407 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {PickList} from '../../components/picklist/PickList';
-import {CarService} from '../service/CarService';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class PickListDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            source: [],
-            target: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-        this.onChange = this.onChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({source: data}));
-    }
-
-    onChange(event) {
-        this.setState({
-            source: event.source,
-            target: event.target
-        });
-    }
-
-    carTemplate(car) {
-        var imageSource = 'showcase/resources/demo/images/car/' + car.brand + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img src={imageSource} alt={car.brand} style={{display: 'inline-block', margin: '2px 0 2px 2px',width:48}} />
-                <div style={{fontSize: '14px', float: 'right', margin: '15px 5px 0 0'}}>{car.brand} - {car.year} - {car.color}</div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PickList</h1>
-                        <p>PickList is used to reorder items between different lists.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("pickList")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <PickList source={this.state.source} target={this.state.target} itemTemplate={this.carTemplate}
-                        sourceHeader="Available" targetHeader="Selected" responsive={true}
-                        sourceStyle={{height: '300px'}} targetStyle={{height: '300px'}}
-                        onChange={this.onChange}></PickList>
-                </div>
-
-                <PickListDoc/>
-            </div>
-        );
-    }
-}
-
-export class PickListDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {PickList} from 'primereact/picklist';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>PickList requires two arrays as <i>source</i> and <i>target</i> lists, an <i>itemTemplate</i> for the item content and <i>onChange</i> callback to update the value after reorder or transfer.</p>
-<CodeHighlight className="language-jsx">
-{`
-<PickList source={this.state.cars} target={this.state.targetCars} itemTemplate={this.carTemplate}
-    onChange={(e) => this.setState({source: e.source, target: e.target})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Responsive</h3>
-            <p>In responsive mode, picklist adjusts its controls based on screen size. To activate this mode, set responsive as true.</p>
-<CodeHighlight className="language-jsx">
-{`
-<PickList source={this.state.cars} target={this.state.targetCars} itemTemplate={this.carTemplate}
-    onChange={(e) => this.setState({source: e.source, target: e.target})} responsive={true} />
-
-`}
-</CodeHighlight>
-
-            <h3>Headers</h3>
-            <p><i>sourceHeader</i> and <i>targetHeader</i> properties are used to define captions for the lists that accept simple strings or JSX for custom content.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<PickList source={this.state.cars} target={this.state.targetCars} itemTemplate={this.carTemplate}
-    onChange={(e) => this.setState({source: e.source, target: e.target})} sourceHeader="Available" targetHeader="Seleced"/>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>source</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects for the source list.</td>
-                        </tr>
-                        <tr>
-                            <td>target</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects for the target list.</td>
-                        </tr>
-                        <tr>
-                            <td>sourceHeader</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text for the source list caption.</td>
-                        </tr>
-                        <tr>
-                            <td>targetHeader</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Text for the target list caption.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>sourceStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the source list element.</td>
-                        </tr>
-                        <tr>
-                            <td>targetStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the target list element.</td>
-                        </tr>
-                        <tr>
-                            <td>responsive</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled orderlist adjusts its controls based on screen size.</td>
-                        </tr>
-                        <tr>
-                            <td>showSourceControls</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show buttons of source list.</td>
-                        </tr>
-                         <tr>
-                            <td>showTargetControls</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to show buttons of target list.</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets the option and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
-                            can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.source: Source list  <br />
-                                event.target: Target list </td>
-                            <td>Callback to invoke when items are moved from source to target.</td>
-                        </tr>
-                        <tr>
-                            <td>onMoveToSource</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: Moved items</td>
-                            <td>Callback to invoke when items are moved from target to source.</td>
-                        </tr>
-                        <tr>
-                            <td>onMoveAllToSource</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: Moved items</td>
-                            <td>Callback to invoke when all items are moved from target to source.</td>
-                        </tr>
-                        <tr>
-                            <td>onMoveToTarget</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: Moved items</td>
-                            <td>Callback to invoke when items are moved from source to target.</td>
-                        </tr>
-                        <tr>
-                            <td>onMoveAllToTarget</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: Moved items</td>
-                            <td>Callback to invoke when all items are moved from source to target.</td>
-                        </tr>
-                        <tr>
-                            <td>onSourceSelect</td>
-                            <td>event.originalEvent: Browser event <br />
-                                items: Selected items array</td>
-                            <td>Callback to invoke when items are selected within source list.</td>
-                        </tr>
-                        <tr>
-                            <td>onTargetSelect</td>
-                            <td>event.originalEvent: Browser event <br />
-                                items: Selected items array</td>
-                            <td>Callback to invoke when items are selected within target list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-picklist</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-source-controls</td>
-                            <td>Container of source list buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-target-controls</td>
-                            <td>Container of target list buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-buttons</td>
-                            <td>Container of buttons.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-listwrapper</td>
-                            <td>Parent of a list element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-list</td>
-                            <td>List element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-picklist-item</td>
-                            <td>An item in the list.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/picklist" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {PickList} from 'primereact/picklist';
-import {CarService} from '../service/CarService';
-
-export class PickListDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            source: [],
-            target: []
-        };
-        this.carservice = new CarService();
-        this.carTemplate = this.carTemplate.bind(this);
-        this.onChange = this.onChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.carservice.getCarsSmall().then(data => this.setState({source: data}));
-    }
-
-    onChange(event) {
-        this.setState({
-            source: event.source,
-            target: event.target
-        });
-    }
-
-    carTemplate(car) {
-        var imageSource = 'showcase/resources/demo/images/car/' + car.brand + '.png';
-
-        return (
-            <div className="p-clearfix">
-                <img src={imageSource} alt={car.brand} style={{ display: 'inline-block', margin: '2px 0 2px 2px',width:48 }} />
-                <div style={{ fontSize: '14px', float: 'right', margin: '15px 5px 0 0' }}>{car.brand} - {car.year} - {car.color}</div>
-            </div>
-        );
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>PickList</h1>
-                        <p>PickList is used to reorder items between differents lists.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <PickList source={this.state.source} target={this.state.target} itemTemplate={this.carTemplate}
-                    sourceHeader="Available" targetHeader="Selected" responsive={true}
-                    sourceStyle={{height: '300px'}} targetStyle={{height: '300px'}}
-                    onChange={this.onChange}></PickList>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/progressbar/ProgressBarDemo.js b/src/showcase/progressbar/ProgressBarDemo.js
deleted file mode 100644
index 068202459d..0000000000
--- a/src/showcase/progressbar/ProgressBarDemo.js
+++ /dev/null
@@ -1,319 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {ProgressBar} from '../../components/progressbar/ProgressBar';
-import {Growl} from '../../components/growl/Growl';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ProgressBarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value1: 0,
-            value2: 50,
-            value3: 40
-        };
-
-        this.displayValueTemplate = this.displayValueTemplate.bind(this);
-    }
-
-    displayValueTemplate(value) {
-        return (
-            <React.Fragment>
-                {value}/<b>100</b>
-            </React.Fragment>
-        );
-    }
-
-    componentDidMount() {
-        this.interval = setInterval(() => {
-            let val = this.state.value1;
-            val += Math.floor(Math.random() * 10) + 1;
-
-            if(val >= 100) {
-                val = 100;
-                this.growl.show({severity: 'info', summary: 'Success', detail: 'Process Completed'});
-                clearInterval(this.interval);
-            }
-
-            this.setState({
-                value1: val
-            });
-        }, 2000);
-    }
-
-    componentWillUnmount () {
-        if (this.interval) {
-            clearInterval(this.interval);
-            this.interval = null;
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ProgressBar</h1>
-                        <p>ProgressBar is a process status indicator</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("progressBar")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el}></Growl>
-
-                    <h3 className="first">Dynamic</h3>
-                    <ProgressBar value={this.state.value1}></ProgressBar>
-
-                    <h3>Static</h3>
-                    <ProgressBar value={this.state.value2}></ProgressBar>
-
-                    <h3>Custom display value</h3>
-                    <ProgressBar value={this.state.value3} displayValueTemplate={this.displayValueTemplate}></ProgressBar>
-
-                    <h3>Indeterminate</h3>
-                    <ProgressBar mode="indeterminate" style={{height: '6px'}}></ProgressBar>
-                </div>
-                <ProgressBarDoc></ProgressBarDoc>
-            </div>
-        );
-    }
-}
-
-export class ProgressBarDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {ProgressBar} from 'primereact/progressbar';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
-<CodeHighlight className="language-jsx">
-{`
-<ProgressBar value={this.state.value} />
-
-`}
-</CodeHighlight>
-                        <p>Indeterminate is simplly enabled using <i>mode</i> property.</p>
-            <CodeHighlight className="language-jsx">
-                            {`
-<ProgressBar mode="indeterminate" />
-
-`}
-</CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Current value of the progress.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>showValue</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Show or hide progress bar value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>unit</td>
-                                        <td>string</td>
-                                        <td>%</td>
-                                        <td>Unit sign appended to the value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>mode</td>
-                                        <td>string</td>
-                                        <td>determinate</td>
-                                        <td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>displayValueTemplate</td>
-                                        <td>Element</td>
-                                        <td>null</td>
-                                        <td>Custom display value template</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-progressbar</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-progressbar-determinate</td>
-                                        <td>Container element of a determinate progressbar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-progressbar-indeterminate</td>
-                                        <td>Container element of an indeterminate progressbar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-progressbar-value</td>
-                                        <td>Element whose width changes according to value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-progressbar-label</td>
-                                        <td>Label element that displays the current value.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-
-                            <h3>Dependencies</h3>
-                            <p>None.</p>
-                        </div>
-                </TabPanel>
-
-                <TabPanel header="Source">
-                    <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/progressbar" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {ProgressBar} from 'primereact/progressbar';
-import {Growl} from 'primereact/growl';
-
-export class ProgressBarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value1: 0,
-            value2: 50,
-            value3: 40
-        };
-
-        this.displayValueTemplate = this.displayValueTemplate.bind(this);
-    }
-
-    displayValueTemplate(value) {
-        return (
-            <React.Fragment>
-                {value}/<b>100</b>
-            </React.Fragment>
-        );
-    }
-
-    componentDidMount() {
-        this.interval = setInterval(() => {
-            let val = this.state.value1;
-            val += Math.floor(Math.random() * 10) + 1;
-
-            if(val >= 100) {
-                val = 100;
-                this.growl.show({severity: 'info', summary: 'Success', detail: 'Process Completed'});
-                clearInterval(this.interval);
-            }
-
-            this.setState({
-                value1: val
-            });
-        }, 2000);
-    }
-
-    componentWillUnmount () {
-        if (this.interval) {
-            clearInterval(this.interval);
-            this.interval = null;
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ProgressBar</h1>
-                        <p>ProgressBar is a process status indicator</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el}></Growl>
-
-                    <h3>Dynamic</h3>
-                    <ProgressBar value={this.state.value1}></ProgressBar>
-
-                    <h3>Static</h3>
-                    <ProgressBar value={this.state.value2}></ProgressBar>
-
-                    <h3>Custom display value</h3>
-                    <ProgressBar value={this.state.value3} displayValueTemplate={this.props.displayValueTemplate}></ProgressBar>
-
-                    <h3>Indeterminate</h3>
-                    <ProgressBar mode="indeterminate" style={{height: '6px'}}></ProgressBar>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/progressspinner/ProgressSpinnerDemo.js b/src/showcase/progressspinner/ProgressSpinnerDemo.js
deleted file mode 100644
index 1f3aa46f65..0000000000
--- a/src/showcase/progressspinner/ProgressSpinnerDemo.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {ProgressSpinner} from '../../components/progressspinner/ProgressSpinner';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ProgressSpinnerDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ProgressSpinner</h1>
-                        <p>ProgressSpinner is a process status indicator.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("progressSpinner")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <ProgressSpinner/>
-
-                    <h3>Custom</h3>
-                    <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
-                </div>
-
-                <ProgressSpinnerDoc/>
-            </div>
-        );
-    }
-}
-
-class ProgressSpinnerDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {ProgressSpinner} from 'primereact/progressspinner';
-
-`}</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>ProgressSpinner is defined using ProgressSpinner element.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<ProgressSpinner/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Colors</h3>
-                        <p>Colors of the spinner can be changed by overriding the keyframes animation</p>
-                        <CodeHighlight className="language-markup">
-                            {`
-@keyframes ui-progress-spinner-color {
-    100%,
-    0% {
-        stroke: #d62d20;
-    }
-    40% {
-        stroke: #0057e7;
-    }
-    66% {
-        stroke: #008744;
-    }
-    80%,
-    90% {
-        stroke: #ffa700;
-    }
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>strokeWidth</td>
-                                        <td>string</td>
-                                        <td>2</td>
-                                        <td>Width of the circle stroke.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>fill</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Color for the background of the circle.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>animationDuration</td>
-                                        <td>string</td>
-                                        <td>2s</td>
-                                        <td>Duration of the rotate animation.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-progress-spinner</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-progress-circle</td>
-                                        <td>SVG element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-progress-path</td>
-                                        <td>Circle element.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/progressspinner" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {ProgressSpinner} from 'primereact/progressspinner';
-
-export class ProgressSpinnerDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ProgressSpinner</h1>
-                        <p>ProgressSpinner is a process status indicator.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <ProgressSpinner/>
-
-                    <h3>Custom</h3>
-                    <ProgressSpinner style={{width: '50px', height: '50px'}} strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/radiobutton/RadioButtonDemo.js b/src/showcase/radiobutton/RadioButtonDemo.js
deleted file mode 100644
index 96eb8de5db..0000000000
--- a/src/showcase/radiobutton/RadioButtonDemo.js
+++ /dev/null
@@ -1,285 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {RadioButton} from '../../components/radiobutton/RadioButton';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class RadioButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            city: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>RadioButton</h1>
-                        <p>RadioButton is an extension to standard radio button element with skinning capabilities.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("radioButton")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <div className="p-grid" style={{width:'250px',marginBottom:'10px'}}>
-                        <div className="p-col-12">
-                            <RadioButton inputId="rb1" name="city" value="New York" onChange={(e) => this.setState({city: e.value})} checked={this.state.city === 'New York'} />
-                            <label htmlFor="rb1" className="p-radiobutton-label">New York</label>
-                        </div>
-                        <div className="p-col-12">
-                            <RadioButton inputId="rb2" name="city" value="San Francisco" onChange={(e) => this.setState({city: e.value})} checked={this.state.city === 'San Francisco'} />
-                            <label htmlFor="rb2" className="p-radiobutton-label">San Francisco</label>
-                        </div>
-                        <div className="p-col-12">
-                            <RadioButton inputId="rb3" name="city" value="Los Angeles" onChange={(e) => this.setState({city: e.value})} checked={this.state.city === 'Los Angeles'} />
-                            <label htmlFor="rb3" className="p-radiobutton-label">Los Angeles</label>
-                        </div>
-                    </div>
-                    Selected City : {this.state.city}
-                </div>
-
-                <RadioButtonDoc></RadioButtonDoc>
-            </div>
-        )
-    }
-}
-
-class RadioButtonDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {RadioButton} from 'primereact/radiobutton';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>RadioButton is used as a controlled input with checked and onChange properties.</p>
-<CodeHighlight className="language-jsx">
-{`
-<RadioButton value="val1" name="city" onChange={(e) => this.setState({value: e.value})} checked={this.state.value === 'val1'} />
-<RadioButton value="val2" name="city" onChange={(e) => this.setState({value: e.value})} checked={this.state.value === 'val1'} />
-
-`}
-</CodeHighlight>
-
-                    <h3>Properties</h3>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>id</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>inputId</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the inner native radiobutton.</td>
-                                </tr>
-                                <tr>
-                                    <td>name</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Name of the checkbox element .</td>
-                                </tr>
-                                <tr>
-                                    <td>value</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Value of the radiobutton.</td>
-                                </tr>
-                                <tr>
-                                    <td>checked</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>Specifies whether a radiobutton should be checked or not.</td>
-                                </tr>
-                                <tr>
-                                    <td>style</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Inline style of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>className</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>disabled</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When present, it specifies that the element value cannot be altered.</td>
-                                </tr>
-                                <tr>
-                                    <td>required</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When present, it specifies that an input field must be filled out before submitting the form.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltip</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Content of the tooltip.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltipOptions</td>
-                                    <td>object</td>
-                                    <td>null</td>
-                                    <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                </tr>
-                                <tr>
-                                    <td>ariaLabelledBy</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Events</h3>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>onChange</td>
-                                    <td>event.originalEvent: Original event <br />
-                                        event.value: Value of the radiobutton <br />
-                                        event.checked: Checked state as a boolean.</td>
-                                    <td>Callback to invoke on radio button click.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Styling</h3>
-                    <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming">theming</Link> page.</p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-radiobutton</td>
-                                    <td>Container element</td>
-                                </tr>
-                                <tr>
-                                    <td>p-radiobutton-box</td>
-                                    <td>Container of icon.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-radiobutton-icon</td>
-                                    <td>Icon element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-radiobutton-label</td>
-                                    <td>Label element.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Dependencies</h3>
-                    <p>None.</p>
-                </TabPanel>
-                <TabPanel header="Source">
-                    <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/radiobutton" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {RadioButton} from 'primereact/radiobutton';
-
-export class RadioButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            city: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>RadioButton</h1>
-                        <p>RadioButton is an extension to standard radio button element with skinning capabilities.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <div className="p-grid" style={{width:'250px',marginBottom:'10px'}}>
-                        <div className="p-col-12">
-                            <RadioButton inputId="rb1" name="city" value="New York" onChange={(e) => this.setState({city: e.value})} checked={this.state.city === 'New York'} />
-                            <label htmlFor="rb1" className="p-radiobutton-label">New York</label>
-                        </div>
-                        <div className="p-col-12">
-                            <RadioButton inputId="rb2" name="city" value="San Francisco" onChange={(e) => this.setState({city: e.value})} checked={this.state.city === 'San Francisco'} />
-                            <label htmlFor="rb2" className="p-radiobutton-label">San Francisco</label>
-                        </div>
-                        <div className="p-col-12">
-                            <RadioButton inputId="rb3" name="city" value="Los Angeles" onChange={(e) => this.setState({city: e.value})} checked={this.state.city === 'Los Angeles'} />
-                            <label htmlFor="rb3" className="p-radiobutton-label">Los Angeles</label>
-                        </div>
-                    </div>
-                    Selected City : {this.state.city}
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/rating/RatingDemo.js b/src/showcase/rating/RatingDemo.js
deleted file mode 100644
index 3736edda29..0000000000
--- a/src/showcase/rating/RatingDemo.js
+++ /dev/null
@@ -1,287 +0,0 @@
-import React, { Component } from 'react';
-import { Rating } from '../../components/rating/Rating'
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class RatingDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            val1: null,
-            val2: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Rating</h1>
-                        <p>Rating componentsis a star based selection input.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("rating")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Basic {this.state.val1}</h3>
-                    <Rating value={this.state.val1} onChange={(e) => this.setState({val1: e.value})} />
-
-                    <h3>No Cancel {this.state.val2}</h3>
-                    <Rating value={this.state.val2} cancel={false} onChange={(e) => this.setState({val2: e.value})} />
-
-                    <h3>ReadOnly</h3>
-                    <Rating value={5} readonly={true} stars={10} cancel={false} />
-
-                    <h3>Disabled</h3>
-                    <Rating value={8} disabled={true} stars={10} />
-                </div>
-
-                <RatingDoc />
-            </div>
-        )
-    }
-}
-
-class RatingDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Rating} from 'primereact/rating';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Rating is used a controlled input component with <i>value</i> and <i>onChange</i> properties.</p>
-
-                        <CodeHighlight className="language-jsx">
-{`
-<Rating value={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Number of Stars</h3>
-                        <p>Number of stars to display is defined with <i>stars</i> property, default is 5.</p>
-
-                        <CodeHighlight className="language-jsx">
-{`
-<Rating value={this.state.value} onChange={(e) => this.setState({value: e.value})} stars={5} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Cancel</h3>
-                        <p>A cancel icon is displayed to reset the value by default, set <i>cancel</i> as false to remove this option.</p>
-
-                        <CodeHighlight className="language-jsx">
-{`
-<Rating value={this.state.value} onChange={(e) => this.setState({value: e.value})} cancel={5} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Value of the rating.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>disabled</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the element should be disabled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>readonly</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, changing the value is not possible.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>stars</td>
-                                        <td>number</td>
-                                        <td>5</td>
-                                        <td>Number of stars.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>cancel</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>When specified a cancel icon is displayed to allow removing the value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>ClassName of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onChange</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.value: selected value
-                                        </td>
-                                        <td>Callback to invoke on value change.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-rating</td>
-                                        <td>Container element</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-rating-star</td>
-                                        <td>Star element</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-rating-star-on</td>
-                                        <td>Selected star element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-rating-cancel</td>
-                                        <td>Cancel icon.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/rating" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Rating} from 'primereact/rating';
-
-export class RatingDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            val1: null,
-            val2: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Rating</h1>
-                        <p>Rating components is a star based selection input.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Basic {this.state.val1}</h3>
-                    <Rating value={this.state.val1} onChange={(e) => this.setState({val1: e.value})} />
-
-                    <h3>No Cancel {this.state.val2}</h3>
-                    <Rating value={this.state.val2} cancel={false} onChange={(e) => this.setState({val2: e.value})} />
-
-                    <h3>ReadOnly</h3>
-                    <Rating value={5} readonly={true} stars={10} cancel={false} />
-
-                    <h3>Disabled</h3>
-                    <Rating value={8} disabled={true} stars={10} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView >
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/scrollpanel/ScrollPanelDemo.js b/src/showcase/scrollpanel/ScrollPanelDemo.js
deleted file mode 100644
index 12d9d242de..0000000000
--- a/src/showcase/scrollpanel/ScrollPanelDemo.js
+++ /dev/null
@@ -1,332 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { ScrollPanel } from '../../components/scrollpanel/ScrollPanel';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ScrollPanelDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ScrollPanel</h1>
-                        <p>ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("scrollPanel")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation scrollpanel-demo">
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-4">
-                            <ScrollPanel style={{width: '100%', height: '200px'}}>
-                                <div style={{padding:'1em', lineHeight:'1.5'}}>
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through
-                                    Michael's life the nature of the family business becomes clear. The business of the family is just like the head
-                                    of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands
-                                    against the good of the family.
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
-                                    life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind
-                                    and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the
-                                    family.
-                                </div>
-                            </ScrollPanel>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <ScrollPanel style={{width: '100%', height: '200px'}} className="custombar1">
-                                <div style={{ padding: '1em', lineHeight: '1.5' }}>
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through
-                                    Michael's life the nature of the family business becomes clear. The business of the family is just like the head
-                                    of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands
-                                    against the good of the family.
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
-                                    life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind
-                                    and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the
-                                    family.
-                                </div>
-                            </ScrollPanel>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <ScrollPanel style={{width: '100%', height: '200px'}} className="custombar2">
-                                <div style={{padding: '1em', lineHeight: '1.5', width: '600px' }}>
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through
-                                    Michael's life the nature of the family business becomes clear. The business of the family is just like the head
-                                    of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands
-                                    against the good of the family.
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
-                                    life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind
-                                    and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the
-                                    family.
-                                </div>
-                            </ScrollPanel>
-                        </div>
-                    </div>
-                </div>
-
-                <ScrollPanelDoc></ScrollPanelDoc>
-            </div>
-        )
-    }
-}
-
-export class ScrollPanelDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {ScrollPanel} from 'primereact/scrollpanel';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>ScrollPanel is defined using dimensions for the scrollable viewport.</p>
-                        <CodeHighlight className="language-markup">
-                            {`
-<ScrollPanel style={{width: '100%', height: '200px'}}">
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</ScrollPanel>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Customization</h3>
-                        <p>Look and feel can easily be customized, here is an example with a custom handle.</p>
-                        <CodeHighlight className="language-markup">
-                            {`
-<ScrollPanel style={{width: '100%', height: '200px'}}" className="custom">
-    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-    His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-    Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-    kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-</ScrollPanel>
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-markup">
-                            {`
-.custom .p-scrollpanel-wrapper {
-    border-right: 9px solid #f4f4f4;
-}
-
-.custom .p-scrollpanel-bar {
-    background-color: #1976d2;
-    opacity: 1;
-    transition: background-color .3s;
-}
-
-.custom .p-scrollpanel-bar:hover {
-    background-color: #135ba1;
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>styleClass</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Methods</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>refresh</td>
-                                        <td>-</td>
-                                        <td>Refreshes the position and size of the scrollbar.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-scrollpanel</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-scrollpanel-wrapper</td>
-                                        <td>Wrapper of content section.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-scrollpanel-content</td>
-                                        <td>Content section.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-scrollpanel-bar</td>
-                                        <td>Scrollbar handle.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-scrollpanel-bar-x</td>
-                                        <td>Scrollbar handle of a horizontal bar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-scrollpanel-bar-y</td>
-                                        <td>Scrollbar handle of a vertical bar</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-
-                            <h3>Dependencies</h3>
-                            <p>None.</p>
-                        </div>
-
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/scrollpanel" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {ScrollPanel} from 'primereact/scrollpanel';
-
-export class ScrollPanelDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ScrollPanel</h1>
-                        <p>ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation scrollpanel-demo">
-                    <div className="p-grid">
-                        <div className="p-col-12 p-md-4">
-                            <ScrollPanel style={{width: '100%', height: '200px'}}>
-                                <div style={{padding:'1em', lineHeight:'1.5'}}>
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through
-                                    Michael's life the nature of the family business becomes clear. The business of the family is just like the head
-                                    of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands
-                                    against the good of the family.
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
-                                    life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind
-                                    and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the
-                                    family.
-                                </div>
-                            </ScrollPanel>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <ScrollPanel style={{width: '100%', height: '200px'}} className="custombar1">
-                                <div style={{ padding: '1em', lineHeight: '1.5' }}>
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through
-                                    Michael's life the nature of the family business becomes clear. The business of the family is just like the head
-                                    of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands
-                                    against the good of the family.
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
-                                    life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind
-                                    and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the
-                                    family.
-                                </div>
-                            </ScrollPanel>
-                        </div>
-                        <div className="p-col-12 p-md-4">
-                            <ScrollPanel style={{width: '100%', height: '200px'}} className="custombar2">
-                                <div style={{padding: '1em', lineHeight: '1.5', width: '600px' }}>
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through
-                                    Michael's life the nature of the family business becomes clear. The business of the family is just like the head
-                                    of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands
-                                    against the good of the family.
-                                    The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
-                                    son Michael has just come home from the war, but does not intend to become part of his father's business. Through Michael's
-                                    life the nature of the family business becomes clear. The business of the family is just like the head of the family, kind
-                                    and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the
-                                    family.
-                                </div>
-                            </ScrollPanel>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/scrolltotop/ScrollToTop.js b/src/showcase/scrolltotop/ScrollToTop.js
deleted file mode 100644
index dd9e874f91..0000000000
--- a/src/showcase/scrolltotop/ScrollToTop.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Component} from 'react';
-import {withRouter } from 'react-router-dom';
-
-class ScrollToTop extends Component {
-    componentDidUpdate(prevProps) {
-        if (this.props.location !== prevProps.location) {
-            window.scrollTo(0, 0)
-        }
-    }
-
-    render() {
-        return this.props.children
-    }
-}
-
-export default withRouter(ScrollToTop);
\ No newline at end of file
diff --git a/src/showcase/selectbutton/SelectButtonDemo.js b/src/showcase/selectbutton/SelectButtonDemo.js
deleted file mode 100644
index 25d3993c22..0000000000
--- a/src/showcase/selectbutton/SelectButtonDemo.js
+++ /dev/null
@@ -1,431 +0,0 @@
-import React, {Component} from 'react';
-import {SelectButton} from '../../components/selectbutton/SelectButton';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class SelectButtonDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            value1: null,
-            value2: ['Apartment', 'Studio'],
-            value3: null,
-            options: [
-                {label: 'Apartment', value: 'Apartment'},
-                {label: 'House', value: 'House'},
-                {label: 'Studio', value: 'Studio'}
-            ],
-            cars: [
-				{brand: 'Audi', key: 'A'},
-				{brand: 'BMW', key: 'B'},
-				{brand: 'Mercedes', key: 'M'}
-			]
-        };
-    }
-
-    carTemplate(option) {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.brand + '.png';
-
-        return (
-            <div style={{textAlign: 'center', padding: '1em', width: '125px'}}>
-                <img alt={option.brand} src={logoPath} style={{width: '48px'}} />
-                <div style={{marginTop: '1em'}}>{option.brand}</div>
-            </div>
-        )
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>SelectButton</h1>
-                        <p>SelectButton is used to choose single or multiple items from a list using buttons.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("selectButton")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single</h3>
-                    <SelectButton value={this.state.value1} options={this.state.options} onChange={(e) => this.setState({value1: e.value})} />
-                    <br />
-                    <p>Selected Value: <span style={{fontWeight: 'bold'}}>{this.state.value1}</span></p>
-
-                    <h3>Multiple</h3>
-                    <SelectButton value={this.state.value2} multiple={true} options={this.state.options} onChange={(e) => this.setState({value2: e.value})} />
-                    <br />
-                    <p>Selected Values: <span style={{fontWeight: 'bold'}}>{this.state.value2 && this.state.value2.map((val) => val + " ")}</span></p>
-
-                    <h3>Custom Content</h3>
-                    <SelectButton value={this.state.value3} options={this.state.cars} onChange={(e) => this.setState({value3: e.value})} itemTemplate={this.carTemplate} optionLabel="brand" optionValue="brand" />
-                    <br />
-                    <p>Selected Value: <span style={{fontWeight: 'bold'}}>{this.state.value3}</span></p>
-                </div>
-
-                <SelectButtonDoc></SelectButtonDoc>
-            </div>
-        );
-    }
-}
-
-class SelectButtonDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {SelectButton} from 'primereact/selectbutton';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Dropdown is used as a controlled component with <i>value</i> and <i>onChange</i> properties along with the options collection. There are two alternatives
-            of how to define the options property; One way is providing a collection of <i>SelectItem</i> instances having label-value pairs
-            whereas other way is providing an array of arbitrary objects along with the <i>optionLabel</i> and <i>optionValue</i> properties to specify the label/value field pair. In addition, 
-            options can be simple primitive values such as a string array, in this case no optionLabel or optionValue is necessary.</p>
-
-            <p><b>Options as SelectItems</b></p>
-            <CodeHighlight className="language-javascript">
-                {`
-const citySelectItems = [
-    {label: 'New York', value: 'NY'},
-    {label: 'Rome', value: 'RM'},
-    {label: 'London', value: 'LDN'},
-    {label: 'Istanbul', value: 'IST'},
-    {label: 'Paris', value: 'PRS'}
-];
-
-`}
-            </CodeHighlight>
-
-<CodeHighlight className="language-jsx">
-{`
-<SelectButton value={this.state.city} options={citySelectItems} onChange={(e) => this.setState({city: e.value})}></SelectButton>
-
-`}
-</CodeHighlight>
-
-            <p><b>Options as any type</b></p>
-            <CodeHighlight className="language-javascript">
-{`
-const cities = [
-    {name: 'New York', code: 'NY'},
-    {name: 'Rome', code: 'RM'},
-    {name: 'London', code: 'LDN'},
-    {name: 'Istanbul', code: 'IST'},
-    {name: 'Paris', code: 'PRS'}
-];
-
-`}
-</CodeHighlight>
-
-            <CodeHighlight className="language-jsx">
-{`
-<SelectButton optionLabel="name" value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})}></SelectButton>
-<SelectButton optionLabel="name" optionValue="code" value={this.state.city} options={cities} onChange={(e) => this.setState({city: e.value})}></SelectButton>
-
-`}
-            </CodeHighlight>
-            <p>When <i>optionValue</i> is not defined, value of an option refers to the option object itself.</p>
-
-            <h3>Multiple</h3>
-            <p>SelectButton allows selecting only one item by default and setting <i>multiple</i> option enables choosing more than one item. In multiple case, model property should be an array.</p>
-
-            <h3>Custom Content</h3>
-            <p>Options support templating using the <i>itemTemplate</i> property that references a function to render the content. Notice
-            the usage of optionLabel, although it is not rendered visually, it is still required to be used as the list key.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<SelectButton value={this.state.value} options={this.state.cars} onChange={(e) => this.setState({value: e.value})} itemTemplate={this.carTemplate} optionLabel="brand" optionValue="brand" />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-carTemplate(option) {
-    const logoPath = 'showcase/resources/demo/images/car/' + option.brand + '.png';
-
-    return (
-        <div style={{textAlign: 'center', padding: '1em', width: '125px'}}>
-            <img alt={option.brand} src={logoPath} style={{width: '48px'}} />
-            <div style={{marginTop: '1em'}}>{option.brand}</div>
-        </div>
-    )
-}
-
-`}
-</CodeHighlight>
-
-            <h3>SelectItem API</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>ClassName of the option.</td>
-                        </tr>
-                        <tr>
-                            <td>title</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Tooltip text of the option. (Not supported)</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the option is disabled or not. (Not supported)</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>options</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of objects to display as the available options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionLabel</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the label field of an option when an arbitrary objects instead of SelectItems are used as options.</td>
-                        </tr>
-                        <tr>
-                            <td>optionValue</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the value field of an option when arbitrary objects are used as options instead of SelectItems.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>multiple</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, allows selecting multiple values.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the element should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>dataKey</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>A property to uniquely match the value in options for better performance.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                        <tr>
-                            <td>itemTemplate</td>
-                            <td>function</td>
-                            <td>null</td>
-                            <td>Function that gets the option and returns the content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.value: Single value or an array of values that are selected.</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/selectbutton" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {SelectButton} from 'primereact/selectbutton';
-
-export class SelectButtonDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            value1: null,
-            value2: ['Apartment', 'Studio'],
-            value3: null,
-            options: [
-                {label: 'Apartment', value: 'Apartment'},
-                {label: 'House', value: 'House'},
-                {label: 'Studio', value: 'Studio'}
-            ],
-            cars: [
-				{brand: 'Audi', key: 'A'},
-				{brand: 'BMW', key: 'B'},
-				{brand: 'Mercedes', key: 'M'}
-			]
-        };
-    }
-
-    carTemplate(option) {
-        const logoPath = 'showcase/resources/demo/images/car/' + option.brand + '.png';
-
-        return (
-            <div style={{textAlign: 'center', padding: '1em', width: '125px'}}>
-                <img alt={option.brand} src={logoPath} style={{width: '48px'}} />
-                <div style={{marginTop: '1em'}}>{option.brand}</div>
-            </div>
-        )
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>SelectButton</h1>
-                        <p>SelectButton is used to choose single or multiple items from a list using buttons.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single</h3>
-                    <SelectButton value={this.state.value1} options={this.state.options} onChange={(e) => this.setState({value1: e.value})} />
-                    <br />
-                    <p>Selected Value: <span style={{fontWeight: 'bold'}}>{this.state.value1}</span></p>
-
-                    <h3>Multiple</h3>
-                    <SelectButton value={this.state.value2} multiple={true} options={this.state.options} onChange={(e) => this.setState({value2: e.value})} />
-                    <br />
-                    <p>Selected Values: <span style={{fontWeight: 'bold'}}>{this.state.value2 && this.state.value2.map((val) => val + " ")}</span></p>
-
-                    <h3>Custom Content</h3>
-                    <SelectButton value={this.state.value3} options={this.state.cars} onChange={(e) => this.setState({value3: e.value})} itemTemplate={this.carTemplate} optionLabel="brand" optionValue="brand" />
-                    <br />
-                    <p>Selected Value: <span style={{fontWeight: 'bold'}}>{this.state.value3}</span></p>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/service/CarService.js b/src/showcase/service/CarService.js
deleted file mode 100644
index 8732993199..0000000000
--- a/src/showcase/service/CarService.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import axios from 'axios';
-
-export class CarService {
-    
-    getCarsSmall() {
-        return axios.get('showcase/resources/demo/data/cars-small.json')
-                .then(res => res.data.data);
-    }
-
-    getCarsMedium() {
-        return axios.get('showcase/resources/demo/data/cars-medium.json')
-                .then(res => res.data.data);
-    }
-
-    getCarsLarge() {
-        return axios.get('showcase/resources/demo/data/cars-large.json')
-                .then(res => res.data.data);
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/service/CountryService.js b/src/showcase/service/CountryService.js
deleted file mode 100644
index 8e0d7dc471..0000000000
--- a/src/showcase/service/CountryService.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import axios from 'axios'
-
-export class CountryService {
-    
-    getCountries(_this) {
-        axios.get('showcase/resources/demo/data/countries.json')
-            .then(res => res.data.data)
-            .then(data => { 
-                _this.setState({ countriesData: data });
-                return data; 
-            });
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/service/CustomerService.js b/src/showcase/service/CustomerService.js
deleted file mode 100644
index 6c729e1bc0..0000000000
--- a/src/showcase/service/CustomerService.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import axios from 'axios';
-
-export class CustomerService {
-    
-    getCustomersSmall() {
-        return axios.get('showcase/resources/demo/data/customers-small.json')
-                .then(res => res.data.data);
-    }
-
-    getCustomersMedium() {
-        return axios.get('showcase/resources/demo/data/customers-medium.json')
-                .then(res => res.data.data);
-    }
-
-    getCustomersLarge() {
-        return axios.get('showcase/resources/demo/data/customers-large.json')
-                .then(res => res.data.data);
-    }
-
-    getCustomersXLarge() {
-        return axios.get('showcase/resources/demo/data/customers-xlarge.json')
-                .then(res => res.data.data);
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/service/EventService.js b/src/showcase/service/EventService.js
deleted file mode 100644
index 6e940e6603..0000000000
--- a/src/showcase/service/EventService.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import axios from 'axios';
-
-export class EventService {
-    
-    getEvents() {
-        return axios.get('showcase/resources/demo/data/events.json')
-                .then(res => res.data.data);
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/service/GalleriaService.js b/src/showcase/service/GalleriaService.js
deleted file mode 100644
index 80d8a2201c..0000000000
--- a/src/showcase/service/GalleriaService.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import axios from 'axios';
-
-export class GalleriaService {
-
-    getImages() {
-        return axios.get('showcase/resources/demo/data/galleria.json')
-                .then(res => res.data.data);
-    }
-}
diff --git a/src/showcase/service/IconService.js b/src/showcase/service/IconService.js
deleted file mode 100644
index 8e7817747a..0000000000
--- a/src/showcase/service/IconService.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import axios from 'axios';
-
-export class IconService {
-
-    constructor() {
-        this.icons = [];
-        this.selectedIcon = null;
-    }
-
-    getIcons() {
-        return axios.get('showcase/resources/demo/data/icons.json', { headers: { 'Cache-Control' : 'no-cache' } })
-            .then(res => res.data.icons);
-    }
-
-    getIcon(id){
-        if (this.icons) {
-            this.selectedIcon=this.icons.find(x => x.properties.id === id);
-            return this.selectedIcon;
-        }
-    }
-}
diff --git a/src/showcase/service/NodeService.js b/src/showcase/service/NodeService.js
deleted file mode 100644
index 2c0249cf12..0000000000
--- a/src/showcase/service/NodeService.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import axios from 'axios';
-
-export class NodeService {
-    
-    getTreeTableNodes() {
-        return axios.get('showcase/resources/demo/data/treetablenodes.json')
-                .then(res => res.data.root);
-    }
-
-    getTreeNodes() {
-        return axios.get('showcase/resources/demo/data/treenodes.json')
-                .then(res => res.data.root);
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/setup/SetupPage.js b/src/showcase/setup/SetupPage.js
deleted file mode 100644
index 50e5236a54..0000000000
--- a/src/showcase/setup/SetupPage.js
+++ /dev/null
@@ -1,136 +0,0 @@
-import React, { Component } from 'react';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-
-export class SetupPage extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Setup</h1>
-                        <p>PrimeReact is a rich set of open source native components for React.</p>
-                    </div>
-                </div>
-
-                <div className="content-section documentation">
-                    <h3 style={{margin:'0'}}>Download</h3>
-                    <p>PrimeReact is available at npm, if you have an existing application run the following commands to download PrimeReact and PrimeIcons to your project.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-npm install primereact --save
-npm install primeicons --save
-
-`}
-</CodeHighlight>
-
-                    <h3>Import</h3>
-                    <p>Path of each component is available at the "import" section of a component documentation.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-//import {ComponentName} from 'primereact/{componentname}';
-import {Dialog} from 'primereact/dialog';
-import {Accordion,AccordionTab} from 'primereact/accordion';
-
-`}
-</CodeHighlight>
-
-                    <h3>Dependencies</h3>
-                    <p>Majority of PrimeReact components (95%) are native and there are some exceptions having 3rd party dependencies such as Google Maps for GMap.</p>
-                    <p>In addition, components require PrimeIcons library for icons, <a href="https://www.npmjs.com/package/classnames" className="layout-content-link">classNames</a> package to manage style classes and
-                         <a href="https://www.npmjs.com/package/react-transition-group" className="layout-content-link"> react-transition-group</a> for animations.</p>
-
-<CodeHighlight className="json">
-{`
-dependencies: {
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "react-transition-group": "^2.5.1"
-    "classnames": "^2.2.6",
-    "primeicons": "^1.0.0"
-}
-
-`}
-</CodeHighlight>
-
-                    <p>Here is the list of components with 3rd party dependencies.</p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Component</th>
-                                    <th>Dependency</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>Charts</td>
-                                    <td>Charts.js 2.1.x</td>
-                                </tr>
-                                <tr>
-                                    <td>GMap</td>
-                                    <td>Google Maps</td>
-                                </tr>
-                                <tr>
-                                    <td>Editor</td>
-                                    <td>Quill.js</td>
-                                </tr>
-                                <tr>
-                                    <td>FullCalendar</td>
-                                    <td>FullCalendar 4.0 Alpha.2+.</td>
-                                </tr>
-                                <tr>
-                                    <td>PrimeFlex</td>
-                                    <td>DataView and MegaMenu components.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Styles</h3>
-                    <p>The css dependencies are as follows, note that you may change the theme with another one of your choice.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-primereact/resources/themes/nova-light/theme.css
-primereact/resources/primereact.min.css
-primeicons/primeicons.css
-
-`}
-</CodeHighlight>
-
-                    <p>If you are using a bundler such as webpack with a css loader you may also import them to your main application component, an example from create-react-app would be.</p>
-<CodeHighlight className="language-javascript">
-{`
-import 'primereact/resources/themes/nova-light/theme.css';
-import 'primereact/resources/primereact.min.css';
-import 'primeicons/primeicons.css';
-
-`}
-</CodeHighlight>
-
-                    <h3>Quickstart</h3>
-                    <p>An example application based on create-react-app is available at <a href="https://github.com/primefaces/primereact-quickstart" className="layout-content-link">github</a>.</p>
-
-                    <h3>Typescript</h3>
-                    <p>Typescript is fully supported as type definition files are provided in the npm package of PrimeReact. A sample typescript-primereact application
-                    is available as well at <a href="https://github.com/primefaces/primereact-typescript-quickstart" className="layout-content-link">github</a>.</p>
-
-                    <p>Note: A shorthand API is available to import APIs such as MenuModel and SelectItem.</p>
-                    <CodeHighlight className="language-javascript">
-{`
-import {SelectItem} from 'primereact/api';
-import {MenuItem} from 'primereact/api';
-
-`}
-</CodeHighlight>
-
-					<h3>Next.js</h3>
-					<p>A sample next.js-primereact application is available as well at <a href="https://github.com/primefaces/primereact-nextjs-quickstart" className="layout-content-link">github</a>.</p>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/sidebar/SidebarDemo.js b/src/showcase/sidebar/SidebarDemo.js
deleted file mode 100644
index a90c029c04..0000000000
--- a/src/showcase/sidebar/SidebarDemo.js
+++ /dev/null
@@ -1,465 +0,0 @@
-import React, {Component} from 'react';
-import {Sidebar} from "../../components/sidebar/Sidebar";
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class SidebarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            visibleLeft: false,
-            visibleRight: false,
-            visibleTop:false,
-            visibleBottom: false,
-            visibleFullScreen: false,
-            visibleCustomToolbar: false
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Sidebar</h1>
-                        <p>Sidebar is a panel component displayed as an overlay.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("sidebar")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Sidebar visible={this.state.visibleLeft} baseZIndex={1000000} onHide={(e) => this.setState({visibleLeft: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Left Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleLeft: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleLeft: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleRight} position="right" baseZIndex={1000000} onHide={(e) => this.setState({visibleRight: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Right Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleRight: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleRight: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleTop} position="top" baseZIndex={1000000} onHide={(e) => this.setState({visibleTop: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Top Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleTop: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleTop: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleBottom} position="bottom" baseZIndex={1000000} onHide={(e) => this.setState({visibleBottom: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Bottom Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleBottom: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleBottom: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleFullScreen} fullScreen={true} baseZIndex={1000000} onHide={(e) => this.setState({visibleFullScreen: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Full Screen Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleFullScreen: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleFullScreen: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleCustomToolbar} baseZIndex={1000000} onHide={(e) => this.setState({visibleCustomToolbar: false})} iconsTemplate={() => (
-                        <React.Fragment>
-                            <button className="p-sidebar-close p-link">
-                                <span className="p-sidebar-close-icon pi pi-print"/>
-                            </button>
-                            <button className="p-sidebar-close p-link">
-                                <span className="p-sidebar-close-icon pi pi-arrow-right"/>
-                            </button>
-                        </React.Fragment>
-                    )}>
-                        <h1 style={{fontWeight:'normal'}}>Sidebar with custom icons</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleCustomToolbar: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleCustomToolbar: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Button icon="pi pi-arrow-right" onClick={(e) => this.setState({visibleLeft:true})}  style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-arrow-left" onClick={(e) => this.setState({visibleRight:true})}  style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-arrow-down" onClick={(e) => this.setState({visibleTop:true})}  style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-arrow-up" onClick={(e) => this.setState({visibleBottom:true})}  style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-th-large" onClick={(e) => this.setState({visibleFullScreen:true})}  style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-plus" onClick={(e) => this.setState({visibleCustomToolbar:true})} />
-                </div>
-
-                <SidebarDoc/>
-
-            </div>
-        )
-    }
-}
-
-class SidebarDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Sidebar} from 'primereact/sidebar';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Sidebar is used as a container and visibility is controlled with <i>visible</i> property.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Sidebar visible={this.state.visible} onHide={(e) => this.setState({visible:false})}>
-    Content
-</Sidebar>
-
-<Button icon="pi pi-arrow-right" onClick={(e) => this.setState({visible:true})}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Position</h3>
-                        <p>Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the <i>position</i> property.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Sidebar visible={this.state.visible} position="right" onHide={(e) => this.setState({visible:false})}>
-    Content
-</Sidebar>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Size</h3>
-                        <p>Sidebar size can be changed using a fixed value or using one of the three predefined ones.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Sidebar visible={this.state.visible} position="right" className="ui-sidebar-sm" onHide={(e) => this.setState({visible:false})}</Sidebar>
-<Sidebar visible={this.state.visible} position="right" className="ui-sidebar-md" onHide={(e) => this.setState({visible:false})}></Sidebar>
-<Sidebar visible={this.state.visible} position="right" className="ui-sidebar-lg" onHide={(e) => this.setState({visible:false})}></Sidebar>
-<Sidebar visible={this.state.visible} position="right" style={{width:'30em'}} onHide={(e) => this.setState({visible:false})}></Sidebar>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Full Screen</h3>
-                        <p>Full screen mode allows the sidebar to cover whole screen.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Sidebar visible={this.state.visible} fullScreen={true} onHide={(e) => this.setState({visible:false})}>
-    Content
-</Sidebar>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Custom toolbar</h3>
-                        <p>Additional content can be provided using the <i>iconsTemplate</i> property.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Sidebar visible={this.state.visibleCustomToolbar} onHide={(e) => this.setState({visibleCustomToolbar: false})} iconsTemplate={() => (
-    <React.Fragment>
-        <button className="p-sidebar-close p-link">
-            <span className="p-sidebar-close-icon pi pi-print"/>
-        </button>
-        <button className="p-sidebar-close p-link">
-            <span className="p-sidebar-close-icon pi pi-arrow-right"/>
-        </button>
-    </React.Fragment>
-)}>
-    <h1 style={{fontWeight:'normal'}}>Sidebar with custom icons</h1>
-    <Button type="button" onClick={(e) => this.setState({visibleCustomToolbar: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-    <Button type="button" onClick={(e) => this.setState({visibleCustomToolbar: false})} label="Cancel" className="p-button-secondary"/>
-</Sidebar>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>visible</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Specifies the visibility of the dialog.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>position</td>
-                                        <td>string</td>
-                                        <td>left</td>
-                                        <td>Specifies the position of the sidebar, valid values are "left" and "right".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>fullScreen</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Adds a close icon to the header to hide the dialog.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>blockScroll</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Whether to block scrolling of the document when sidebar is active.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>baseZIndex</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Base zIndex value to use in layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>dismissable</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether clicking outside closes the panel.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>showCloseIcon</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to display a close icon inside the panel.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>ariaCloseLabel</td>
-                                        <td>string</td>
-                                        <td>close</td>
-                                        <td>Aria label of the close icon.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>iconsTemplate</td>
-                                        <td>Element</td>
-                                        <td>null</td>
-                                        <td>Custom icons template for the header.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>modal</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to a modal layer behind the sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>closeOnEscape</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Specifices if pressing escape key should hide the sidebar.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onHide</td>
-                                        <td>-</td>
-                                        <td>Callback to invoke when sidebar gets hidden.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onShow</td>
-                                        <td>-</td>
-                                        <td>Callback to invoke when sidebar gets shown.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-sidebar</td>
-                                        <td>Container element</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-left</td>
-                                        <td>Container element of left sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-right</td>
-                                        <td>Container element of right sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-top</td>
-                                        <td>Container element of top sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-bottom</td>
-                                        <td>Container element of bottom sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-full</td>
-                                        <td>Container element of a full screen sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-active</td>
-                                        <td>Container element when sidebar is visible.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-close</td>
-                                        <td>Close anchor element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-sm</td>
-                                        <td>Small sized sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-md</td>
-                                        <td>Medium sized sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-lg</td>
-                                        <td>Large sized sidebar.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sidebar-mask</td>
-                                        <td>Modal layer of the sidebar.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/sidebar" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Sidebar} from 'primereact/sidebar';
-import {Button} from 'primereact/button';
-
-export class SidebarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            visibleLeft: false,
-            visibleRight: false,
-            visibleTop:false,
-            visibleBottom: false,
-            visibleFullScreen: false
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Sidebar</h1>
-                        <p>Sidebar is a panel component displayed as an overlay.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Sidebar visible={this.state.visibleLeft} baseZIndex={1000000} onHide={(e) => this.setState({visibleLeft: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Left Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleLeft: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleLeft: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleRight} position="right" baseZIndex={1000000} onHide={(e) => this.setState({visibleRight: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Right Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleRight: false})} label="Save" className="p-button-success"  style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleRight: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleTop} position="top" baseZIndex={1000000} onHide={(e) => this.setState({visibleTop: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Top Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleTop: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleTop: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleBottom} position="bottom" baseZIndex={1000000} onHide={(e) => this.setState({visibleBottom: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Bottom Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleBottom: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleBottom: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Sidebar visible={this.state.visibleFullScreen} fullScreen={true} baseZIndex={1000000} onHide={(e) => this.setState({visibleFullScreen: false})}>
-                        <h1 style={{fontWeight:'normal'}}>Full Screen Sidebar</h1>
-                        <Button type="button" onClick={(e) => this.setState({visibleFullScreen: false})} label="Save" className="p-button-success" style={{marginRight:'.25em'}} />
-                        <Button type="button" onClick={(e) => this.setState({visibleFullScreen: false})} label="Cancel" className="p-button-secondary"/>
-                    </Sidebar>
-
-                    <Button icon="pi pi-arrow-right" onClick={(e) => this.setState({visibleLeft:true})} style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-arrow-left" onClick={(e) => this.setState({visibleRight:true})} style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-arrow-down" onClick={(e) => this.setState({visibleTop:true})} style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-arrow-up" onClick={(e) => this.setState({visibleBottom:true})} style={{marginRight:'.25em'}} />
-                    <Button icon="pi pi-th-large" onClick={(e) => this.setState({visibleFullScreen:true})} />
-                </div>
-
-                <SidebarDoc/>
-
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/slidemenu/SlideMenuDemo.js b/src/showcase/slidemenu/SlideMenuDemo.js
deleted file mode 100644
index 6c93180bdf..0000000000
--- a/src/showcase/slidemenu/SlideMenuDemo.js
+++ /dev/null
@@ -1,751 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {SlideMenu} from '../../components/slidemenu/SlideMenu';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class SlideMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Slide Menu</h1>
-                        <p>SlideMenu displays submenus with a slide animation.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("slideMenu")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <SlideMenu model={this.state.items} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
-
-                    <h3>Popup</h3>
-                    <SlideMenu ref={(el) => this.menu = el} model={this.state.items} popup={true} viewportHeight={250} style={{width: '13.5em'}}></SlideMenu>
-                    <Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => this.menu.toggle(event)}></Button>
-                </div>
-
-                <SlideMenuDoc />
-            </div>
-        )
-    }
-}
-
-class SlideMenuDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {SlideMenu} from 'primereact/slidemenu';
-
-`}
-</CodeHighlight>
-
-                        <h3>MenuItem API</h3>
-                        <p>Menu uses the common menumodel api to define its items, visit <Link to="/menumodel"> MenuModel API</Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>Menu requires a collection of menuitems as its model.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-const items:[
-    {
-       label:'File',
-       icon:'pi pi-fw pi-file',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-plus',
-             items:[
-                {
-                   label:'Bookmark',
-                   icon:'pi pi-fw pi-bookmark'
-                },
-                {
-                   label:'Video',
-                   icon:'pi pi-fw pi-video'
-                },
-
-             ]
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-trash'
-          },
-          {
-             separator:true
-          },
-          {
-             label:'Export',
-             icon:'pi pi-fw pi-external-link'
-          }
-       ]
-    },
-    {
-       label:'Edit',
-       icon:'pi pi-fw pi-pencil',
-       items:[
-          {
-             label:'Left',
-             icon:'pi pi-fw pi-align-left'
-          },
-          {
-             label:'Right',
-             icon:'pi pi-fw pi-align-right'
-          },
-          {
-             label:'Center',
-             icon:'pi pi-fw pi-align-center'
-          },
-          {
-             label:'Justify',
-             icon:'pi pi-fw pi-align-justify'
-          },
-
-       ]
-    },
-    {
-       label:'Users',
-       icon:'pi pi-fw pi-user',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-user-plus',
-
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-user-minus',
-
-          },
-          {
-             label:'Search',
-             icon:'pi pi-fw pi-users',
-             items:[
-                {
-                   label:'Filter',
-                   icon:'pi pi-fw pi-filter',
-                   items:[
-                      {
-                         label:'Print',
-                         icon:'pi pi-fw pi-print'
-                      }
-                   ]
-                },
-                {
-                   icon:'pi pi-fw pi-bars',
-                   label:'List'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       label:'Events',
-       icon:'pi pi-fw pi-calendar',
-       items:[
-          {
-             label:'Edit',
-             icon:'pi pi-fw pi-pencil',
-             items:[
-                {
-                   label:'Save',
-                   icon:'pi pi-fw pi-calendar-plus'
-                },
-                {
-                   label:'Delete',
-                   icon:'pi pi-fw pi-calendar-minus'
-                },
-
-             ]
-          },
-          {
-             label:'Archieve',
-             icon:'pi pi-fw pi-calendar-times',
-             items:[
-                {
-                   label:'Remove',
-                   icon:'pi pi-fw pi-calendar-minus'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       separator:true
-    },
-    {
-       label:'Quit',
-       icon:'pi pi-fw pi-power-off'
-    }
- ];
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-jsx">
-{`
-<SlideMenu model={items} />
-
-`}
-</CodeHighlight>
-
-
-                        <h3>Popup Mode</h3>
-                        <p>SlideMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
-<CodeHighlight className="language-jsx">
-{`
-<SlideMenu ref={(el) => this.menu = el} model={items} popup={true} />
-
-<Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => this.menu.toggle(event)}></Button>
-
-`}
-</CodeHighlight>
-
-                        <h3>Effects</h3>
-                        <p>The easing function to use is "ease-out" by default which can be customized using easing property.
-                            See <a href="http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp">here</a> for possible alternative values.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<SlideMenu model={this.items} effectDuration={1000} easing="ease-in" />
-
-`}
-</CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>popup</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Defines if menu would displayed as a popup.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>easing</td>
-                                        <td>string</td>
-                                        <td>ease-out</td>
-                                        <td>Easing animation to use for sliding.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>effectDuration</td>
-                                        <td>any</td>
-                                        <td>250</td>
-                                        <td>Duration of the sliding animation in milliseconds.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>backLabel</td>
-                                        <td>string</td>
-                                        <td>Back</td>
-                                        <td>Label of element to navigate back.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>menuWidth</td>
-                                        <td>number</td>
-                                        <td>190</td>
-                                        <td>Width of the submenus.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>viewportHeight</td>
-                                        <td>number</td>
-                                        <td>175</td>
-                                        <td>Height of the scrollable area, a scrollbar appears if a menu height is longer than this value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>baseZIndex</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Base zIndex value to use in layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>autoZIndex</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to automatically manage layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>DOM element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the dialog should be mounted.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                       <h3>Methods</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>toggle</td>
-                                        <td>event: Browser event</td>
-                                        <td>Toggles the visibility of the popup menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>show</td>
-                                        <td>event: Browser event</td>
-                                        <td>Displays the popup menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>hide</td>
-                                        <td>event: Browser event</td>
-                                        <td>Hides the popup menu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onShow</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is shown.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onHide</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is hidden.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-slidemenu</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-slidemenu-wrapper</td>
-                                        <td>Wrapper of content.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-slidemenu-content</td>
-                                        <td>Content element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-slidemenu-backward</td>
-                                        <td>Element to navigate to previous menu on click.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menu-list</td>
-                                        <td>List element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem</td>
-                                        <td>Menuitem element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-text</td>
-                                        <td>Label of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menuitem-icon</td>
-                                        <td>Icon of a menuitem.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-submenu-icon</td>
-                                        <td>Arrow icon of a submenu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/slidemenu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {SlideMenu} from 'primereact/slidemenu';
-import {Button} from 'primereact/button';
-
-export class SlideMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Slide Menu</h1>
-                        <p>SlideMenu displays submenus with a slide animation.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <SlideMenu model={this.state.items}></SlideMenu>
-
-                    <h3>Popup</h3>
-                    <SlideMenu ref={(el) => this.menu = el} model={this.state.items} popup={true}></SlideMenu>
-                    <Button type="button" icon="pi pi-bars" label="Show" onClick={(event) => this.menu.toggle(event)}></Button>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/slider/SliderDemo.js b/src/showcase/slider/SliderDemo.js
deleted file mode 100644
index cb598782cc..0000000000
--- a/src/showcase/slider/SliderDemo.js
+++ /dev/null
@@ -1,385 +0,0 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import { Slider } from '../../components/slider/Slider';
-import { InputText } from '../../components/inputtext/InputText';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class SliderDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            val1: null,
-            val2: 50,
-            val3: null,
-            val4: null,
-            rangeValues: [20, 80]
-        };
-        this.onChangeSlider1 = this.onChangeSlider1.bind(this);
-        this.onChangeSlider2 = this.onChangeSlider2.bind(this);
-        this.onChangeSlider3 = this.onChangeSlider3.bind(this);
-        this.onChangeSlider4 = this.onChangeSlider4.bind(this);
-        this.onChangeRangeSlider = this.onChangeRangeSlider.bind(this);
-    }
-
-    onChangeSlider1(e) {
-        this.setState({ val1: e.value });
-    }
-
-    onChangeSlider2(e) {
-        var newValue;
-        if (e.target && e.target.nodeName === "INPUT") {
-            newValue = e.target.value;
-        }
-        else {
-            newValue = e.value;
-        }
-
-        this.setState({ val2: newValue });
-    }
-
-    onChangeSlider3(e) {
-        this.setState({ val3: e.value });
-    }
-
-    onChangeSlider4(e) {
-        this.setState({ val4: e.value });
-    }
-
-    onChangeRangeSlider(e) {
-        this.setState({ rangeValues: e.value });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Slider</h1>
-                        <p>Slider is a component to provide input using dragging of a handle.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("slider")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic: {this.state.val1}</h3>
-                    <Slider value={this.state.val1} onChange={this.onChangeSlider1} style={{width: '14em'}}  />
-
-                    <h3>Input: {this.state.val2}</h3>
-                    <InputText value={this.state.val2} style={{width: '14em'}} type="number" onChange={this.onChangeSlider2} />
-                    <Slider value={this.state.val2} onChange={this.onChangeSlider2} style={{width: '14em'}} />
-
-                    <h3>Step: {this.state.val3}</h3>
-                    <Slider value={this.state.val3} onChange={this.onChangeSlider3} step={20} style={{width: '14em'}} />
-
-                    <h3>Range: {this.state.rangeValues[0]},{this.state.rangeValues[1]}</h3>
-                    <Slider value={this.state.rangeValues} onChange={this.onChangeRangeSlider} range={true} style={{width: '14em'}} />
-
-                    <h3>Vertical: {this.state.val4}</h3>
-                    <Slider value={this.state.val4} onChange={this.onChangeSlider4} orientation="vertical" style={{height: '14em'}} />
-                </div>
-
-                <SliderDoc></SliderDoc>
-            </div>
-        );
-    }
-}
-
-class SliderDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Slider} from 'primereact/slider';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Slider is used as a controlled input with <i>value</i> and <i>onChange</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Slider value={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Range</h3>
-            <p>Range slider provides two handles to define two values. Enable <i>range</i> property and bind an array to implement a range slider.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Slider value={this.state.rangeValues} onChange={(e) => this.setState({rangeValues: e.value})} range={true} />
-
-`}
-</CodeHighlight>
-
-            <h3>Orientation</h3>
-            <p>Default layout of slider is horizontal, use <i>orientation</i> property for the alternative vertical mode.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<Slider value={this.state.value} onChange={(e) => this.setState({value: e.value})} orientation="vertical" />
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Value of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>animate</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When enabled, displays an animation on click of the slider bar.</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Mininum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>100</td>
-                            <td>Maximum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>orientation</td>
-                            <td>string</td>
-                            <td>horizontal</td>
-                            <td>Orientation of the slider, valid values are horizontal and vertical.</td>
-                        </tr>
-                        <tr>
-                           <td>step</td>
-                           <td>number</td>
-                           <td>1</td>
-                           <td>Step factor to increment/decrement the value.</td>
-                         </tr>
-                        <tr>
-                           <td>range</td>
-                           <td>boolean</td>
-                           <td>false</td>
-                           <td>When speficed, allows two boundary values to be picked.</td>
-                         </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Slide event <br />
-                                event.value: New value.
-                            </td>
-                            <td>Callback to invoke on value change via slide.</td>
-                        </tr>
-                        <tr>
-                            <td>onSlideEnd</td>
-                            <td>event.originalEvent: Slide event <br />
-                                event.value: New value.
-                            </td>
-                            <td>Callback to invoke when slide ends.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-slider</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-slider-handle</td>
-                            <td>Handle element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/slider" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Slider} from 'primereact/slider';
-import {InputText} from 'primereact/inputtext';
-
-export class SliderDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            val1: null,
-            val2: 50,
-            val3: null,
-            val4: null,
-            rangeValues: [20, 80]
-        };
-        this.onChangeSlider1 = this.onChangeSlider1.bind(this);
-        this.onChangeSlider2 = this.onChangeSlider2.bind(this);
-        this.onChangeSlider3 = this.onChangeSlider3.bind(this);
-        this.onChangeSlider4 = this.onChangeSlider4.bind(this);
-        this.onChangeRangeSlider = this.onChangeRangeSlider.bind(this);
-    }
-
-    onChangeSlider1(e) {
-        this.setState({ val1: e.value });
-    }
-
-    onChangeSlider2(e) {
-        var newValue;
-        if (e.target && e.target.nodeName === "INPUT") {
-            newValue = e.target.value;
-        }
-        else {
-            newValue = e.value;
-        }
-
-        this.setState({ val2: newValue });
-    }
-
-    onChangeSlider3(e) {
-        this.setState({ val3: e.value });
-    }
-
-    onChangeSlider4(e) {
-        this.setState({ val4: e.value });
-    }
-
-    onChangeRangeSlider(e) {
-        this.setState({ rangeValues: e.value });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Slider</h1>
-                        <p>Slider is a component to provide input using dragging of a handle.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic: {this.state.val1}</h3>
-                    <Slider value={this.state.val1} onChange={this.onChangeSlider1} style={{width: '14em'}}  />
-
-                    <h3>Input: {this.state.val2}</h3>
-                    <InputText value={this.state.val2} style={{width: '14em'}} type="number" onChange={this.onChangeSlider2} />
-                    <Slider value={this.state.val2} onChange={this.onChangeSlider2} style={{width: '14em'}} />
-
-                    <h3>Step: {this.state.val3}</h3>
-                    <Slider value={this.state.val3} onChange={this.onChangeSlider3} step={20} style={{width: '14em'}} />
-
-                    <h3>Range: {this.state.rangeValues[0]},{this.state.rangeValues[1]}</h3>
-                    <Slider value={this.state.rangeValues} onChange={this.onChangeRangeSlider} range={true} style={{width: '14em'}} />
-
-                    <h3>Vertical: {this.state.val4}</h3>
-                    <Slider value={this.state.val4} onChange={this.onChangeSlider4} orientation="vertical" style={{height: '14em'}} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/spinner/SpinnerDemo.js b/src/showcase/spinner/SpinnerDemo.js
deleted file mode 100644
index efa0b2d78d..0000000000
--- a/src/showcase/spinner/SpinnerDemo.js
+++ /dev/null
@@ -1,357 +0,0 @@
-import React, { Component } from 'react';
-import {Link} from 'react-router-dom';
-import {Spinner} from '../../components/spinner/Spinner';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class SpinnerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value1: null,
-            value2: null,
-            value3: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Spinner - Deprecated</h1>
-                        <p>Spinner is deprecated in favor of <Link to="/inputnumber">InputNumber</Link>.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("spinner")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Spinner value={this.state.value1} size={30} onChange={(e) => this.setState({value1: e.value})} />
-
-                    <h3>Min/Max</h3>
-                    <Spinner value={this.state.value2} size={30} onChange={(e) => this.setState({value2: e.value})} min={0} max={100} />
-
-                    <h3>Step</h3>
-                    <Spinner value={this.state.value3} size={30} onChange={(e) => this.setState({value3: e.value})} step={0.25} />
-
-                    <h3>Disabled</h3>
-                    <Spinner value={this.state.value4} size={30} disabled={true} />
-                </div>
-
-                <SpinnerDoc></SpinnerDoc>
-            </div>
-        );
-    }
-}
-
-class SpinnerDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Spinner} from 'primereact/spinner';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Spinner is used as a controlled input with <i>value</i> and <i>onChange</i> properties. Note that onChange is triggered on blur instead of on key input</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Spinner value={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Min-Max</h3>
-            <p>Boundaries are specified with <i>min</i> and <i>max</i> attributes.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Spinner value={this.state.value} onChange={(e) => this.setState({value: e.value})} min={0} max={100} />
-
-`}
-</CodeHighlight>
-
-            <h3>Step</h3>
-            <p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
-<CodeHighlight className="language-jsx">
-{`
-<Spinner value={this.state.value} onChange={(e) => this.setState({value: e.value})} step={0.25} />
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>value</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Value of the component.</td>
-                         </tr>
-                         <tr>
-                            <td>name</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Name of the input element.</td>
-                        </tr>
-                         <tr>
-                            <td>step</td>
-                            <td>number</td>
-                            <td>1</td>
-                            <td>Step factor to increment/decrement the value.</td>
-                        </tr>
-                        <tr>
-                            <td>min</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Mininum boundary value.</td>
-                        </tr>
-                        <tr>
-                            <td>max</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum boundary value.</td>
-                        </tr>
-                        <tr>
-                           <td>disabled</td>
-                           <td>boolean</td>
-                           <td>false</td>
-                           <td>When present, it specifies that the element should be disabled.</td>
-                         </tr>
-                        <tr>
-                           <td>readonly</td>
-                           <td>boolean</td>
-                           <td>false</td>
-                           <td>When present, it specifies that the element should be read-only.</td>
-                         </tr>
-                         <tr>
-                            <td>maxlength</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Maximum number of character allows in the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>size</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Size of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputId</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Identifier of the input element.</td>
-                        </tr>
-                        <tr>
-                            <td>inputStyle</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>inputClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the input field.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>decimalSeparator</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Separator character for decimals, defaults to settings at user locale.</td>
-                        </tr>
-                        <tr>
-                            <td>thousandSeparator</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Separator character for thousands, defaults to settings at user locale.</td>
-                        </tr>
-                        <tr>
-                            <td>formatInput</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, formats the user input at blur event.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.value: New value</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>onBlur</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when Spinner loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-spinner</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-spinner-up</td>
-                            <td>Up icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-spinner-down</td>
-                            <td>Down icon.</td>
-                        </tr>
-                        <tr>
-                            <td>p-spinner-input</td>
-                            <td>Input element</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/spinner" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Spinner} from 'primereact/spinner';
-
-export class SpinnerDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            value1: null,
-            value2: null,
-            value3: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Spinner</h1>
-                        <p>Spinner is an input component to provide a numerical input.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <Spinner value={this.state.value1} size={30} onChange={(e) => this.setState({value1: e.value})} />
-
-                    <h3>Min/Max</h3>
-                    <Spinner value={this.state.value2} size={30} onChange={(e) => this.setState({value2: e.value})} min={0} max={100} />
-
-                    <h3>Step</h3>
-                    <Spinner value={this.state.value3} size={30} onChange={(e) => this.setState({value3: e.value})} step={0.25} />
-
-                    <h3>Disabled</h3>
-                    <Spinner value={this.state.value4} size={30} disabled={true} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/splitbutton/SplitButtonDemo.js b/src/showcase/splitbutton/SplitButtonDemo.js
deleted file mode 100644
index 86335fed55..0000000000
--- a/src/showcase/splitbutton/SplitButtonDemo.js
+++ /dev/null
@@ -1,418 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {SplitButton} from '../../components/splitbutton/SplitButton';
-import {Growl} from '../../components/growl/Growl';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class SplitButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: (e) => {
-                        this.growl.show({severity:'success', summary:'Updated', detail:'Data Updated'});
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: (e) => {
-                        this.growl.show({ severity: 'success', summary: 'Delete', detail: 'Data Deleted' });
-                    }
-                },
-                {
-                    label: 'React Website',
-                    icon: 'pi pi-external-link',
-                    command:(e) => {
-                        window.location.href = 'https://facebook.github.io/react/'
-                    }
-                },
-                {   label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command:(e) => {
-                        window.location.hash = "/fileupload"
-                    }
-                }
-            ]
-        }
-
-        this.save = this.save.bind(this);
-    }
-
-    save() {
-        this.growl.show({severity: 'success', summary: 'Success', detail: 'Data Saved'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>SplitButton</h1>
-                        <p>SplitButton groups a set of commands in an overlay with a default command.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("splitButton")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation splitbutton-demo">
-                    <Growl ref={(el) => this.growl = el}></Growl>
-
-                    <h3 className="first">Basic</h3>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items}></SplitButton>
-
-                    <h3>Severities</h3>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-secondary"></SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-success" style={{marginRight: '.25em'}}></SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-info" style={{marginRight: '.25em'}}></SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-warning" style={{marginRight: '.25em'}}></SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-danger" style={{marginRight: '.25em'}}></SplitButton>
-                </div>
-
-                <SplitButtonDoc />
-            </div>
-        )
-    }
-}
-
-class SplitButtonDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {SplitButton} from 'primereact/splitbutton';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>SplitButton has a default command button and a collection of additional options defined by the <i>model</i> property.</p>
-                        <CodeHighlight className="language-javascript">
-{`
-export class SplitButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: (e) => {
-                        this.growl.show({severity:'success', summary:'Updated', detail:'Data Updated'});
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: (e) => {
-                        this.growl.show({ severity: 'success', summary: 'Delete', detail: 'Data Deleted' });
-                    }
-                },
-                {
-                    label: 'React Website',
-                    icon: 'pi pi-external-link',
-                    command:(e) => {
-                        window.location.href = 'https://facebook.github.io/react/'
-                    }
-                },
-                {   label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command:(e) => {
-                        window.location.hash = "/fileupload"
-                    }
-                }
-            ]
-        }
-
-        this.save = this.save.bind(this);
-    }
-
-    save() {
-        this.growl.show({severity: 'success', summary: 'Success', detail: 'Data Saved'});
-    }
-
-    render() {
-        return (
-            <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items}></SplitButton>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>MenuModel API</h3>
-                        <p>SplitButton uses the common MenuModel API to define the items, visit <Link to="/menumodel">MenuModel API</Link> for details.</p>
-
-                        <h3>Severity</h3>
-                        <p>Different color options are available as severity levels.</p>
-
-                        <ul>
-                            <li>.p-button-secondary</li>
-                            <li>.p-button-success</li>
-                            <li>.p-button-info</li>
-                            <li>.p-button-warning</li>
-                            <li>.p-button-danger</li>
-                        </ul>
-
-<CodeHighlight className="language-jsx">
-{`
-<SplitButton label="Primary" />
-<SplitButton label="Secondary" className="p-button-secondary" model={this.state.items} />
-<SplitButton label="Success" className="p-button-success" model={this.state.items} />
-<SplitButton label="Info" className="p-button-info" model={this.state.items} />
-<SplitButton label="Warning" className="p-button-warning" model={this.state.items} />
-<SplitButton label="Danger" className="p-button-danger" model={this.state.items} />
-
-`}
-</CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Identifier of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>label</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Text of the button.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>icon</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the icon.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>MenuModel instance to define the overlay items.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>disabled</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When present, it specifies that the component should be disabled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>ClassName of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>menuStyle</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the overlay menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>menuStyleClass</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>ClassName class of the overlay menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tabIndex</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Index of the element in tabbing order.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>DOM element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the dialog should be mounted.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltip</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Content of the tooltip.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tooltipOptions</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onClick</td>
-                                        <td>event: Browser event</td>
-                                        <td>Callback to invoke when main button is clicked.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-splitbutton</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-splitbutton-button</td>
-                                        <td>Dropdown button.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-menu</td>
-                                        <td>Overlay menu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {SplitButton} from 'primereact/splitbutton';
-import {Growl} from 'primereact/growl';
-
-export class SplitButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {
-                    label: 'Update',
-                    icon: 'pi pi-refresh',
-                    command: (e) => {
-                        this.growl.show({severity:'success', summary:'Updated', detail:'Data Updated'});
-                    }
-                },
-                {
-                    label: 'Delete',
-                    icon: 'pi pi-times',
-                    command: (e) => {
-                        this.growl.show({ severity: 'success', summary: 'Delete', detail: 'Data Deleted' });
-                    }
-                },
-                {
-                    label: 'React Website',
-                    icon: 'pi pi-external-link',
-                    command:(e) => {
-                        window.location.href = 'https://facebook.github.io/react/'
-                    }
-                },
-                {   label: 'Upload',
-                    icon: 'pi pi-upload',
-                    command:(e) => {
-                        window.location.hash = "/fileupload"
-                    }
-                }
-            ]
-        }
-
-        this.save = this.save.bind(this);
-    }
-
-    save() {
-        this.growl.show({severity: 'success', summary: 'Success', detail: 'Data Saved'});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>SplitButton</h1>
-                        <p>SplitButton groups a set of commands in an overlay with a default command.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation splitbutton-demo">
-                    <Growl ref={(el) => this.growl = el}></Growl>
-
-                    <h3 className="first">Basic</h3>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items}></SplitButton>
-
-                    <h3>Severities</h3>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-secondary" style={{marginRight: '.25em'}}></SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-success" style={{marginRight: '.25em'}}></SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-info"> style={{marginRight: '.25em'}}</SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-warning" style={{marginRight: '.25em'}}></SplitButton>
-                    <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.state.items} className="p-button-danger"></SplitButton>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView >
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/steps/StepsDemo.css b/src/showcase/steps/StepsDemo.css
deleted file mode 100644
index 7f628541cc..0000000000
--- a/src/showcase/steps/StepsDemo.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.ui-steps.steps-custom {
-    margin-bottom: 30px;
-}
-
-.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
-    height: 10px;
-    padding: 0 1em;
-    overflow: visible;
-}
-
-.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
-    background-color: #0081c2;
-    color: #FFFFFF;
-    display: inline-block;
-    width: 36px;
-    border-radius: 50%;
-    margin-top: -14px;
-    margin-bottom: 10px;
-}
-
-.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
-    color: #555555;
-}
\ No newline at end of file
diff --git a/src/showcase/steps/StepsDemo.js b/src/showcase/steps/StepsDemo.js
deleted file mode 100644
index 6d9d20beba..0000000000
--- a/src/showcase/steps/StepsDemo.js
+++ /dev/null
@@ -1,386 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Steps} from '../../components/steps/Steps';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Growl} from "../../components/growl/Growl";
-import "./StepsDemo.css"
-
-export class StepsDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeIndex: 1
-        };
-
-        this.items = [
-            {
-                label: 'Personal',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'First Step', detail: event.item.label});
-                }
-            },
-            {
-                label: 'Seat',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'Seat Selection', detail: event.item.label});
-                }
-            },
-            {
-                label: 'Payment',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'Pay with CC', detail: event.item.label});
-                }
-            },
-            {
-                label: 'Confirmation',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'Last Step', detail: event.item.label});
-                }
-            }
-        ];
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Steps</h1>
-                        <p>Steps component is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("steps")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => {this.growl = el}}></Growl>
-
-                    <h3>Basic</h3>
-                    <Steps model={this.items} />
-
-                    <h3>Interactive</h3>
-                    <Steps model={this.items} activeIndex={this.state.activeIndex} onSelect={(e) => this.setState({activeIndex: e.index})} readOnly={false} />
-
-                    <h3>Custom Style</h3>
-                    <Steps model={this.items} className="steps-custom" />
-                </div>
-
-                <StepsDoc/>
-
-            </div>
-        );
-    }
-}
-
-class StepsDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Steps} from 'primereact/steps';
-
-`}</CodeHighlight>
-                        <h3>MenuItem API</h3>
-                        <p>Steps uses the common menu item api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>TabMenu requires a collection of menuitems as its model.</p>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-const items = [
-    {label: 'Personal'},
-    {label: 'Seat'},
-    {label: 'Payment'},
-    {label: 'Confirmation'}
-];
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Steps model={items} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>interactive</h3>
-                        <p>Items are readonly by default, if you'd like to make them interactive then disable readonly, use command handlers of menuitem to respond to selection events and define activeIndex property along with the
-                            onSelect event to use it as a controlled component.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<Steps model={interactiveItems} activeIndex={this.state.activeIndex} onSelect={(e) => this.setState({activeIndex: e.index})} readOnly={false} />
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-const interactiveItems = [{
-    label: 'Personal',
-    command: (event) => {
-        this.growl.show({severity:'info', summary:'First Step', detail: event.item.label});
-    }
-},
-{
-    label: 'Seat',
-    command: (event) => {
-        this.growl.show({severity:'info', summary:'Seat Selection', detail: event.item.label});
-    }
-},
-{
-    label: 'Payment',
-    command: (event) => {
-        this.growl.show({severity:'info', summary:'Pay with CC', detail: event.item.label});
-    }
-},
-{
-    label: 'Confirmation',
-    command: (event) => {
-        this.growl.show({severity:'info', summary:'Last Step', detail: event.item.label});
-    }
-}
-];
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>activeIndex</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Index of the active item.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>readOnly</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether the items are clickable or not.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>onSelect</td>
-                                    <td>event.originalEvent: Browser event<br/>
-                                        event.item: Selected item instance<br/>
-                                        event.index: Index of selected item instance</td>
-                                    <td>Callback to invoke when the new step is selected.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-steps</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-steps-item</td>
-                                    <td>Menuitem element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-steps-number</td>
-                                    <td>Number of menuitem.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-steps-title</td>
-                                    <td>Label of menuitem.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/steps" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-
-                        <p>StepsDemo.css</p>
-                        <CodeHighlight className="language-javascript">
-                            {`
-.ui-steps.steps-custom {
-    margin-bottom: 30px;
-}
-
-.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
-    height: 10px;
-    padding: 0 1em;
-    overflow: visible;
-}
-
-.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
-    background-color: #0081c2;
-    color: #FFFFFF;
-    display: inline-block;
-    width: 36px;
-    border-radius: 50%;
-    margin-top: -14px;
-    margin-bottom: 10px;
-}
-
-.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
-    color: #555555;
-}
-                        `}
-                        </CodeHighlight>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {Steps} from 'primereact/steps';
-import {Growl} from "primereact/growl";
-import "./StepsDemo.css"
-
-export class StepsDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            activeIndex: 1
-        };
-
-        this.items = [
-            {
-                label: 'Personal',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'First Step', detail: event.item.label});
-                }
-            },
-            {
-                label: 'Seat',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'Seat Selection', detail: event.item.label});
-                }
-            },
-            {
-                label: 'Payment',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'Pay with CC', detail: event.item.label});
-                }
-            },
-            {
-                label: 'Confirmation',
-                command: (event) => {
-                    this.growl.show({severity:'info', summary:'Last Step', detail: event.item.label});
-                }
-            }
-        ];
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Steps</h1>
-                        <p>Steps component is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => {this.growl = el}}></Growl>
-
-                    <h3>Basic</h3>
-                    <Steps model={items} />
-
-                    <h3>Clickable</h3>
-                    <Steps model={items} activeIndex={this.state.activeIndex} onSelect={(e) => this.setState({activeIndex: e.index})} readOnly={false} />
-
-                    <h3>Custom Style</h3>
-                    <Steps model={items} className="steps-custom" />
-                </div>
-
-                <StepsDoc/>
-
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/support/SupportPage.js b/src/showcase/support/SupportPage.js
deleted file mode 100644
index 93dcb28deb..0000000000
--- a/src/showcase/support/SupportPage.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import React, {Component} from 'react';
-
-export class SupportPage extends Component {
-
-    render() {
-        return (
-            <div className="icons-page">
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Support</h1>
-                        <span>Professional support for the open source innovation</span>
-                    </div>
-                </div>
-
-                <div className="content-section support documentation">
-                    <div className="support-image">
-                        <div className="p-grid">
-                            <div className="p-col-12 p-md-6">
-                                <h3>PrimeReact PRO Support</h3>
-                                <p>With PrimeReact PRO, it's easy to support, tune and add features to PrimeReact as if it were an in-house framework.</p>
-                                <a className="link-button2" href="/service/mailto:PrimeReact@primetek.com.tr">GET A QUOTE</a>
-                            </div>
-                            <div className="p-col-12 p-md-6">
-                                <img alt="PRO" src="http://github.com/showcase/resources/images/home/icon-pro-white.svg"></img>
-                            </div>
-                        </div>
-                    </div>
-    
-                    <p>PrimeReact PRO is a term based commercial support service. With the exclusive services of Pro account, 
-                                    you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
-                                    
-                    <h3>Standard PRO Services</h3>
-                    <ul>
-                        <li>Access to pro.primefaces.org</li>
-                        <li>Response within 1 business day.</li>
-                        <li>Defect patches.</li>
-                        <li>Private branch management in case you need.</li>
-                        <li>Customized builds.</li>
-                        <li>Unlimited number of cases.</li>
-                        <li>Remote desktop connection.</li>
-                        <li>Conference calls for discussions.</li>
-                        <li>High priority to your issues.</li>
-                        <li>Notifications about security updates.</li>
-                    </ul>
-                                
-                    <h3>New Features (Optional)</h3>			
-                                
-                    <p>New feature and enhancement requests are not available in core services and provided via an hour based model instead.  When you have a feature request we provide an estimate, if you confirm we deliver your request within an estimated timeframe and deduct the amount of work from your hours. These requests can be;</p>
-
-                    <ul>
-                        <li>New components.</li>
-                        <li>New functionality to existing components.</li>
-                        <li>Changing the way a certain functionality is implemented.</li>
-                        <li>Accessibility improvements.</li>
-                        <li>Proof of Concept implementations of a use case.</li>
-                        <li>Code reviews to offer best practices.</li>
-                    </ul>
-                    
-                    <p>You can purchase additional hours along with the subscription and also anytime during your subscription period. If your subscription term ends with unused hours, they will be added to your new subscription term in case you extend.</p>    
-
-                    <h3 style={{marginTop:0}}>Community Support</h3>
-                    <p><a href="https://forum.primefaces.org/viewforum.php?f=57">Forum</a> is where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
-                    guarantee response at forum although it is monitored and maintained by our staff. If you need to secure our response within 1 business day, you may consider PrimeReact PRO support.</p>
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tabmenu/TabMenuDemo.js b/src/showcase/tabmenu/TabMenuDemo.js
deleted file mode 100644
index efbb5f2972..0000000000
--- a/src/showcase/tabmenu/TabMenuDemo.js
+++ /dev/null
@@ -1,268 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {TabMenu} from '../../components/tabmenu/TabMenu';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TabMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {label: 'Home', icon: 'pi pi-fw pi-home'},
-                {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
-                {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-                {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-                {label: 'Settings', icon: 'pi pi-fw pi-cog'}
-            ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TabMenu</h1>
-                        <p>Menu is a navigation/command component that displays items as tab headers.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tabMenu")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TabMenu model={this.state.items} />
-                </div>
-
-                <TabMenuDoc/>
-            </div>
-        );
-    }
-}
-
-class TabMenuDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {TabMenu} from 'primereact/tabmenu';
-
-`}</CodeHighlight>
-                        <h3>MenuModel API</h3>
-                        <p>TabMenu uses the common menumodel api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>TabMenu requires a collection of menuitems as its model and can either be used as a Controlled or Uncontrolled component.</p>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-constructor() {
-    super();
-    this.state = {
-        items: [
-            {label: 'Home', icon: 'pi pi-fw pi-home'},
-            {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
-            {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-            {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-            {label: 'Settings', icon: 'pi pi-fw pi-cog'}
-        ]
-    };
-}
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Controlled Component</h3>
-                        <p>In controlled mode, <i>activeItem</i> and <i>onTabChange</i> properties must be defined along with the model.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<TabMenu model={this.state.items} activeItem={this.state.activeItem} onTabChange={(e) => this.setState({activeItem: e.value})}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Uncontrolled</h3>
-                        <p>In uncontrolled mode, only <i>model</i> is required. Initial active item can be provided using the activeItem property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
-                            need to update the active item, prefer to use the component as controlled.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<TabMenu model={this.state.items} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>activeItem</td>
-                                        <td>MenuItem</td>
-                                        <td>null</td>
-                                        <td>Defines the default active menuitem</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                    </thead>
-                                    <tbody>
-                                    <tr>
-                                        <td>onTabChange</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.value: Selected menuitem </td>
-                                        <td>Callback to invoke when active tab changes.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-tabmenu</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-tabmenu-nav</td>
-                                    <td>List element of headers.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-tabmenuitem</td>
-                                    <td>Menuitem element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem-link</td>
-                                    <td>Link inside a menuitem.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem-text</td>
-                                    <td>Label of a menuitem.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem-icon</td>
-                                    <td>Icon of a menuitem.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/tabmenu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {TabMenu} from 'primereact/tabmenu';
-
-export class TabMenuDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            items: [
-                {label: 'Home', icon: 'pi pi-fw pi-home'},
-                {label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
-                {label: 'Edit', icon: 'pi pi-fw pi-pencil'},
-                {label: 'Documentation', icon: 'pi pi-fw pi-file'},
-                {label: 'Settings', icon: 'pi pi-fw pi-cog'}
-            ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TabMenu</h1>
-                        <p>Menu is a navigation component that displays items as tab headers.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TabMenu model={this.state.items} />
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/tabview/TabViewDemo.js b/src/showcase/tabview/TabViewDemo.js
deleted file mode 100644
index dd2f80c3e7..0000000000
--- a/src/showcase/tabview/TabViewDemo.js
+++ /dev/null
@@ -1,393 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TabViewDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            activeIndex: 1
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TabView</h1>
-                        <p>TabView is a container component to group content with tabs.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tabView")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Uncontrolled</h3>
-                    <TabView renderActiveOnly={false}>
-                        <TabPanel header="Godfather I" leftIcon="pi pi-calendar">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
-                            but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
-                            just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather II" rightIcon="pi pi-user">
-                            <p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
-                            deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
-                            his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather III" leftIcon="pi pi-search" rightIcon="pi pi-check">
-                            <p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
-                            interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
-                            A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather IV" disabled={true}>
-
-                        </TabPanel>
-                    </TabView>
-
-                    <h3>Controlled</h3>
-                    <TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: e.index})}>
-                        <TabPanel header="Godfather I" leftIcon="pi pi-calendar">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
-                            but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
-                            just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather II" rightIcon="pi pi-user">
-                            <p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
-                            deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
-                            his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather III" leftIcon="pi pi-search" rightIcon="pi pi-check">
-                            <p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
-                            interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
-                            A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather IV" disabled={true}>
-
-                        </TabPanel>
-                    </TabView>
-                </div>
-                <TabViewDoc></TabViewDoc>
-            </div>
-        )
-    }
-}
-
-export class TabViewDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {TabView,TabPanel} from 'primereact/tabview';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Tabview element consists of one or more TabPanel elements and can either be used as a Controlled or Uncontrolled component.</p>
-
-            <h3>Controlled Component</h3>
-            <p>In controlled mode, <i>activeIndex</i> and <i>onTabChange</i> properties need to be defined to control the state.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: e.index})}>
-    <TabPanel header="Header I">
-        Content I
-    </TabPanel>
-    <TabPanel header="Header II">
-        Content II
-    </TabPanel>
-    <TabPanel header="Header III">
-        Content III
-    </TabPanel>
-</TabView>
-
-`}
-</CodeHighlight>
-
-            <h3>Uncontrolled</h3>
-            <p>In uncontrolled mode, no additional properties are required. Initial active tab can be provided using the <i>activeIndex</i> property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically
-                need to update the active tab, prefer to use the component as controlled.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<TabView>
-    <TabPanel header="Header I">
-        Content I
-    </TabPanel>
-    <TabPanel header="Header II">
-        Content II
-    </TabPanel>
-    <TabPanel header="Header III">
-        Content III
-    </TabPanel>
-</TabView>
-
-`}
-</CodeHighlight>
-
-            <h3>Properties For TabPanel</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>header</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Orientation of tab headers.</td>
-                        </tr>
-                        <tr>
-                            <td>leftIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icons can be placed at left of a header.</td>
-                        </tr>
-                        <tr>
-                            <td>rightIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icons can be placed at right of a header.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether the tab is disabled.</td>
-                        </tr>
-                        <tr>
-                            <td>headerStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>headerClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the tab content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tab content.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Properties For TabView</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Type</th>
-                        <th>Default</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>activeIndex</td>
-                            <td>number</td>
-                            <td>null</td>
-                            <td>Active index of the TabView.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the tabview.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tabview.</td>
-                        </tr>
-                        <tr>
-                            <td>renderActiveOnly</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether to render the contents of the selected tab or all tabs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                    <tr>
-                        <th>Name</th>
-                        <th>Parameters</th>
-                        <th>Description</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onTabChange</td>
-                            <td>event.originalEvent: Browser event  <br/>
-                                event.index: Index of the selected tab
-                            </td>
-                            <td>Callback to invoke when an active tab is changed.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tabview</td>
-                            <td>Container element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-nav</td>
-                            <td>Container of headers.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-selected</td>
-                            <td>Selected tab header.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-panels</td>
-                            <td>Container panels.</td>
-                        </tr>
-                        <tr>
-                            <td>p-tabview-panel</td>
-                            <td>Content of a tab.</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/tabview" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {TabView,TabPanel} from 'primereact/tabview';
-
-export class TabViewDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TabView</h1>
-                        <p>TabView is a container component to group content with tabs.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TabView renderActiveOnly={false}>
-                        <TabPanel header="Godfather I" leftIcon="pi pi-calendar">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
-                            but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
-                            just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather II" rightIcon="pi pi-user">
-                            <p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
-                            deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
-                            his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather III" leftIcon="pi pi-search" rightIcon="pi pi-check">
-                            <p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
-                            interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
-                            A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather IV" disabled={true}>
-
-                        </TabPanel>
-                    </TabView>
-
-                    <h3>Controlled</h3>
-                    <TabView activeIndex={this.state.activeIndex} onTabChange={(e) => this.setState({activeIndex: e.index})}>
-                        <TabPanel header="Godfather I" leftIcon="pi pi-calendar">
-                            <p>The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. His beloved son ichael has just come home from the war,
-                            but does not intend to become part of his father's business. Through Michael's life the nature of the family business becomes clear. The business of the family is
-                            just like the head of the family, kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather II" rightIcon="pi pi-user">
-                            <p>Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito Corleone's rise with his son Michael's spiritual fall,
-                            deepening The_Godfather's depiction of the dark side of the American dream. In the early 1900s, the child Vito flees his Sicilian village for America after the local Mafia kills
-                            his family. Vito struggles to make a living, legally or illegally, for his wife and growing brood in Little Italy.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather III" leftIcon="pi pi-search" rightIcon="pi pi-check">
-                            <p>The Godfather Part III is set in 1979 and 1980. Michael has moved back to New York and taken great strides to remove the family from crime. He turns over his New York criminal
-                            interests to longtime enforcer Joey Zasa. He uses his wealth in an attempt to rehabilitate his reputation through numerous philanthropic acts, administered by a foundation named after his father.
-                            A decade earlier, he gave custody of his two children to Kay, who has since remarried.</p>
-                        </TabPanel>
-                        <TabPanel header="Godfather IV" disabled={true}>
-
-                        </TabPanel>
-                    </TabView>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/theming/ThemingPage.js b/src/showcase/theming/ThemingPage.js
deleted file mode 100644
index 055f1dada2..0000000000
--- a/src/showcase/theming/ThemingPage.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, {Component} from 'react';
-
-export class ThemingPage extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Theming</h1>
-                        <p>Choose from a variety of premium themes or develop your own theme using PrimeReact Theme Designer API.</p>
-                    </div>
-                </div>
-
-                <div className="content-section documentation">
-                    <h3 style={{marginTop: 0}}>Theme Designer API</h3>
-                    <p><a href="https://www.primefaces.org/designer/primereact">Designer API</a> is the ultimate tool to create your own PrimeReact experience powered by a SASS based theme engine
-                        with 500+ variables and a demo application. In addition, PrimeReact only ships the generated CSS of Nova, Luna and Rhea themes whereas Designer provides
-                        full access to the whole SASS structure and the variables of these pre-built themes.</p>
-
-                    <p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>
-
-                    <p>Visit <a href="https://www.primefaces.org/designer/primereact">Designer API HomePage</a> for more information, live demos and access to a trial version.</p>
-                    <a href="http://www.primefaces.org/designer/primereact">
-                        <img alt="PrimeReact Designer" src="http://github.com/showcase/resources/images/primereact-designer.jpg" style={{width: '100%'}} />
-                    </a>
-
-                    <h3>Styled Components</h3>
-                    <p>All PrimeReact components support className property and are compatible with Styled Components.</p>
-
-                    <h3>Premium Templates</h3>
-                    <p>Powered by create-react-app, create awesome applications in no time using the premium templates of PrimeReact and impress your users.</p>
-                    <p>Premium Templates are advanced create-react-app based applications featuring a full application layout with various menu orientations, templates pages such as landing, login and
-                        premium themes that share the same design language of the layout for a unified look.</p>
-
-                    <div className="p-grid theming">
-                        <div className="p-col-12">
-                            <a href="https://www.primefaces.org/layouts/sapphire-react" rel="noopener noreferrer" target="_blank">
-                                <img alt="Sapphire" src="http://github.com/showcase/resources/images/layouts/sapphire-biggest-react.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-6">
-                            <a href="https://www.primefaces.org/layouts/serenity-react" rel="noopener noreferrer" target="_blank">
-                                <img alt="Serenity" src="http://github.com/showcase/resources/images/layouts/serenity-react-sqr.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-6">
-                            <a href="https://www.primefaces.org/layouts/ultima-react" rel="noopener noreferrer" target="_blank">
-                                <img alt="Ultima" src="http://github.com/showcase/resources/images/layouts/ultima-react-sqr.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12">
-                            <a href="https://www.primefaces.org/layouts/babylon-react" rel="noopener noreferrer" target="_blank">
-                                <img alt="Babylon" src="http://github.com/showcase/resources/images/layouts/babylon-biggest-react.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-6">
-                            <a href="https://www.primefaces.org/layouts/avalon-react" rel="noopener noreferrer" target="_blank">
-                                <img alt="Avalon" src="http://github.com/showcase/resources/images/layouts/avalon-react-sqr.jpg" />
-                            </a>
-                        </div>
-                        <div className="p-col-12 p-md-6">
-                            <a href="https://www.primefaces.org/layouts/apollo-react" rel="noopener noreferrer" target="_blank">
-                                <img alt="Apollo" src="http://github.com/showcase/resources/images/layouts/apollo-react-sqr.png" />
-                            </a>
-                        </div>
-                        <div className="p-col-12">
-                            <a href="https://www.primefaces.org/layouts/roma-react" rel="noopener noreferrer" target="_blank">
-                                <img alt="Roma" src="http://github.com/showcase/resources/images/layouts/roma-biggest-react.jpg" />
-                            </a>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tieredmenu/TieredMenuDemo.js b/src/showcase/tieredmenu/TieredMenuDemo.js
deleted file mode 100644
index eb05e7ddc0..0000000000
--- a/src/showcase/tieredmenu/TieredMenuDemo.js
+++ /dev/null
@@ -1,695 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {TieredMenu} from '../../components/tieredmenu/TieredMenu';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TieredMenuDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tiered Menu</h1>
-                        <p>TieredMenu displays submenus in nested overlays.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tieredMenu")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <h3 className="first">Inline</h3>
-                    <TieredMenu model={this.state.items} />
-
-                    <h3>Popup</h3>
-                    <TieredMenu model={this.state.items} popup={true} ref={el => this.menu = el} id="overlay_tmenu" />
-                    <Button label="Show" icon="pi pi-bars" onClick={(event)=>this.menu.toggle(event)} aria-haspopup={true} aria-controls="overlay_tmenu"/>
-                </div>
-
-                <TieredMenuDoc/>
-
-            </div>
-        );
-    }
-}
-
-class TieredMenuDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {TieredMenu} from 'primereact/tieredmenu';
-
-`}</CodeHighlight>
-                        <h3>MenuItem API</h3>
-                        <p>TieredMenu uses the common menu item api to define its items, visit <Link to="/menumodel"> MenuModel </Link> for details.</p>
-
-                        <h3>Getting Started</h3>
-                        <p>Menu requires a collection of menuitems as its model.</p>
-                        <CodeHighlight className="language-javascript">
-                            {`
-const items:[
-    {
-       label:'File',
-       icon:'pi pi-fw pi-file',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-plus',
-             items:[
-                {
-                   label:'Bookmark',
-                   icon:'pi pi-fw pi-bookmark'
-                },
-                {
-                   label:'Video',
-                   icon:'pi pi-fw pi-video'
-                },
-
-             ]
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-trash'
-          },
-          {
-             separator:true
-          },
-          {
-             label:'Export',
-             icon:'pi pi-fw pi-external-link'
-          }
-       ]
-    },
-    {
-       label:'Edit',
-       icon:'pi pi-fw pi-pencil',
-       items:[
-          {
-             label:'Left',
-             icon:'pi pi-fw pi-align-left'
-          },
-          {
-             label:'Right',
-             icon:'pi pi-fw pi-align-right'
-          },
-          {
-             label:'Center',
-             icon:'pi pi-fw pi-align-center'
-          },
-          {
-             label:'Justify',
-             icon:'pi pi-fw pi-align-justify'
-          },
-
-       ]
-    },
-    {
-       label:'Users',
-       icon:'pi pi-fw pi-user',
-       items:[
-          {
-             label:'New',
-             icon:'pi pi-fw pi-user-plus',
-
-          },
-          {
-             label:'Delete',
-             icon:'pi pi-fw pi-user-minus',
-
-          },
-          {
-             label:'Search',
-             icon:'pi pi-fw pi-users',
-             items:[
-                {
-                   label:'Filter',
-                   icon:'pi pi-fw pi-filter',
-                   items:[
-                      {
-                         label:'Print',
-                         icon:'pi pi-fw pi-print'
-                      }
-                   ]
-                },
-                {
-                   icon:'pi pi-fw pi-bars',
-                   label:'List'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       label:'Events',
-       icon:'pi pi-fw pi-calendar',
-       items:[
-          {
-             label:'Edit',
-             icon:'pi pi-fw pi-pencil',
-             items:[
-                {
-                   label:'Save',
-                   icon:'pi pi-fw pi-calendar-plus'
-                },
-                {
-                   label:'Delete',
-                   icon:'pi pi-fw pi-calendar-minus'
-                },
-
-             ]
-          },
-          {
-             label:'Archieve',
-             icon:'pi pi-fw pi-calendar-times',
-             items:[
-                {
-                   label:'Remove',
-                   icon:'pi pi-fw pi-calendar-minus'
-                }
-             ]
-          }
-       ]
-    },
-    {
-       separator:true
-    },
-    {
-       label:'Quit',
-       icon:'pi pi-fw pi-power-off'
-    }
- ];
-
-`}
-                        </CodeHighlight>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<TieredMenu model={items} />
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Popup Mode</h3>
-                        <p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
-
-                        <CodeHighlight className="language-jsx">
-                            {`
-<TieredMenu model={items} popup={true} ref={el => this.menu = el} />
-<Button label="Show" icon="pi pi-bars" onClick={(event) => this.menu.toggle(event)}/>
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>model</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of menuitems.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>popup</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Defines if menu would displayed as a popup.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>baseZIndex</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Base zIndex value to use in layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>autoZIndex</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to automatically manage layering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>appendTo</td>
-                                        <td>DOM element</td>
-                                        <td>null</td>
-                                        <td>DOM element instance where the dialog should be mounted.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Methods</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>toggle</td>
-                                        <td>event: browser event</td>
-                                        <td>Toggles the visibility of the popup menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>show</td>
-                                        <td>event: browser event</td>
-                                        <td>Displays the popup menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>hide</td>
-                                        <td>event: browser event</td>
-                                        <td>Hides the popup menu.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onShow</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is shown.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onHide</td>
-                                        <td>event: Browser event </td>
-                                        <td>Callback to invoke when a popup menu is hidden.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-tieredmenu</td>
-                                    <td>Container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menu-list</td>
-                                    <td>List element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem</td>
-                                    <td>Menuitem element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem-text</td>
-                                    <td>Label of a menuitem.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-menuitem-icon</td>
-                                    <td>Icon of a menuitem.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-submenu-icon</td>
-                                    <td>Arrow icon of a submenu.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/tieredmenu" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, {Component} from 'react';
-import {TieredMenu} from 'primereact/tieredmenu';
-import {Button} from 'primereact/button';
-
-export class TieredMenuDemo extends Component {
-
-    constructor() {
-        super();
-
-        this.state = {
-            items:[
-                {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
-                },
-                {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
-                },
-                {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
-
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
-                },
-                {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
-                }
-             ]
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tiered Menu</h1>
-                        <p>TieredMenu displays submenus in nested overlays.</p>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <h3 className="first">Inline</h3>
-                    <TieredMenu model={this.state.items} />
-
-                    <h3>Popup</h3>
-                    <TieredMenu model={this.state.items} popup={true} ref={el => this.menu = el} id="overlay_tmenu" />
-                    <Button label="Show" icon="pi pi-bars" onClick={(event)=>this.menu.toggle(event)} aria-haspopup={true} aria-controls="overlay_tmenu"/>
-                </div>
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/togglebutton/ToggleButtonDemo.js b/src/showcase/togglebutton/ToggleButtonDemo.js
deleted file mode 100644
index 5bf0b983cf..0000000000
--- a/src/showcase/togglebutton/ToggleButtonDemo.js
+++ /dev/null
@@ -1,290 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {ToggleButton} from '../../components/togglebutton/ToggleButton';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class ToggleButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            checked1: false,
-            checked2: false
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ToggleButton</h1>
-                        <p>ToggleButton is used to select a boolean value using a button.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("toggleButton")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <ToggleButton style={{width:'150px'}} checked={this.state.checked1} onChange={(e) => this.setState({checked1: e.value})} />
-                    <p>Selected Value: {this.state.checked1 ? 'true' : 'false'}</p>
-
-                    <h3>Custom</h3>
-                    <ToggleButton style={{width:'150px'}} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times"
-                                checked={this.state.checked2} onChange={(e) => this.setState({checked2: e.value})} />
-                    <p>Selected Value: {this.state.checked2 ? 'true' : 'false'}</p>
-                </div>
-
-                <ToggleButtonDoc />
-            </div>
-        );
-    }
-}
-
-class ToggleButtonDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-    <TabView effect="fade">
-        <TabPanel header="Documentation">
-            <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {ToggleButton} from 'primereact/togglebutton';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>ToggleButton is used as a controlled input with <i>checked</i> and <i>onChange</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<ToggleButton checked={this.state.checked1} onChange={(e) => this.setState({checked1: e.value})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Labels and Icons</h3>
-            <p>Icons and Labels can be customized using <i>onLabel</i>, <i>offLabel</i>, <i>onIcon</i> and <i>offIcon</i> properties.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times"
-                                checked={this.state.checked2} onChange={(e) => this.setState({checked2: e.value})} />
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>onIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon for the on state.</td>
-                        </tr>
-                        <tr>
-                            <td>offIcon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon for the off state.</td>
-                        </tr>
-                        <tr>
-                            <td>onLabel</td>
-                            <td>string</td>
-                            <td>yes</td>
-                            <td>Label for the on state.</td>
-                        </tr>
-                        <tr>
-                            <td>offLabel</td>
-                            <td>string</td>
-                            <td>no</td>
-                            <td>Label for the off state.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the element.</td>
-                        </tr>
-                        <tr>
-                            <td>checked</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Specifies the on/off state of the button.</td>
-                        </tr>
-                        <tr>
-                            <td>tabIndex</td>
-                            <td>number</td>
-                            <td>0</td>
-                            <td>Index of the element in tabbing order.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltip</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Content of the tooltip.</td>
-                        </tr>
-                        <tr>
-                            <td>tooltipOptions</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onChange</td>
-                            <td>event.originalEvent: Browser event <br />
-                                event.value: Value as the checked state.</td>
-                            <td>Callback to invoke on value change.</td>
-                        </tr>
-                        <tr>
-                            <td>onFocus</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when autocomplete gets focus.</td>
-                        </tr>
-                        <tr>
-                            <td>onBlur</td>
-                            <td>event: Browser event</td>
-                            <td>Callback to invoke when autocomplete loses focus.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-togglebutton</td>
-                            <td>Container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-icon-left</td>
-                            <td>Icon element.</td>
-                        </tr>
-                        <tr>
-                            <td>p-button-text</td>
-                            <td>Label element.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Dependencies</h3>
-            <p>None.</p>
-        </TabPanel>
-
-        <TabPanel header="Source">
-            <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/togglebutton" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                <span>View on GitHub</span>
-            </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {ToggleButton} from 'primereact/togglebutton';
-
-export class ToggleButtonDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            checked1: false,
-            checked2: false
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>ToggleButton</h1>
-                        <p>ToggleButton is used to select a boolean value using a button.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Basic</h3>
-                    <ToggleButton style={{width:'150px'}} checked={this.state.checked1} onChange={(e) => this.setState({checked1: e.value})} />
-                    <p>Selected Value: {this.state.checked1 ? 'true' : 'false'}</p>
-
-                    <h3>Custom</h3>
-                    <ToggleButton style={{width:'150px'}} onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times"
-                                checked={this.state.checked2} onChange={(e) => this.setState({checked2: e.value})} />
-                    <p>Selected Value: {this.state.checked2 ? 'true' : 'false'}</p>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-        </TabPanel>
-    </TabView>
-</div>
-        );
-    }
-}
diff --git a/src/showcase/toolbar/ToolbarDemo.js b/src/showcase/toolbar/ToolbarDemo.js
deleted file mode 100644
index d3f9bb4e07..0000000000
--- a/src/showcase/toolbar/ToolbarDemo.js
+++ /dev/null
@@ -1,206 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {Toolbar} from '../../components/toolbar/Toolbar';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-import {Button} from "../../components/button/Button";
-
-export class ToolbarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Toolbar</h1>
-                        <p>Toolbar is a grouping component for buttons and other content.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("toolbar")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <Toolbar>
-                        <div className="p-toolbar-group-left">
-                            <Button label="New" icon="pi pi-plus" style={{marginRight:'.25em'}} />
-                            <Button label="Upload" icon="pi pi-upload" className="p-button-success" />
-                            <i className="pi pi-bars p-toolbar-separator" style={{marginRight:'.25em'}} />
-                            <Button label="Save" icon="pi pi-check" className="p-button-warning" />
-                        </div>
-                        <div className="p-toolbar-group-right">
-                            <Button icon="pi pi-search" style={{marginRight:'.25em'}} />
-                            <Button icon="pi pi-calendar" className="p-button-success" style={{marginRight:'.25em'}} />
-                            <Button icon="pi pi-times" className="p-button-danger" />
-                        </div>
-                    </Toolbar>
-                </div>
-
-                <ToolbarDoc/>
-
-            </div>
-        );
-    }
-}
-
-class ToolbarDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView effect="fade">
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {Toolbar} from 'primereact/toolbar';
-
-`}</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>Toolbar is a container component defined using Toolbar element. Left aligned content is placed inside a div having .p-toolbar-group-left class and similarly .p-toolbar-group-right for right alignment.</p>
-                        <CodeHighlight className="language-jsx">
-                            {`
- <Toolbar>
-    <div className="p-toolbar-group-left">
-        <Button label="New" icon="pi pi-plus" style={{marginRight:'.25em'}} />
-        <Button label="Upload" icon="pi pi-upload" className="p-button-success" />
-        <i className="pi pi-bars p-toolbar-separator" style={{marginRight:'.25em'}} />
-        <Button label="Save" icon="pi pi-check" className="p-button-warning" />
-    </div>
-    <div className="p-toolbar-group-right">
-        <Button icon="pi pi-search" style={{marginRight:'.25em'}} />
-        <Button icon="pi pi-calendar" className="p-button-success" style={{marginRight:'.25em'}} />
-        <Button icon="pi pi-times" className="p-button-danger" />
-    </div>
-</Toolbar>
-
-`}
-                        </CodeHighlight>
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>id</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>style</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Inline style of the component.</td>
-                                </tr>
-                                <tr>
-                                    <td>className</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the component.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                <tr>
-                                    <td>p-toolbar</td>
-                                    <td>Main container element.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-toolbar-group-left</td>
-                                    <td>Left content container.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-toolbar-group-right</td>
-                                    <td>Right content container.</td>
-                                </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/toolbar" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                            <span>View on GitHub</span>
-                        </a>
-                        <CodeHighlight className="language-javascript">
-                            {`
-export class ToolbarDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {};
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section">
-                    <div className="feature-intro">
-                        <h1>Toolbar</h1>
-                        <p>Toolbar is a grouping component for buttons and other content.</p>
-                    </div>
-                </div>
-                <div className="content-section implementation">
-                    <Toolbar>
-                        <div className="p-toolbar-group-left">
-                            <Button label="New" icon="pi pi-plus" style={{marginRight:'.25em'}} />
-                            <Button label="Upload" icon="pi pi-upload" className="p-button-success" />
-                            <i className="pi pi-bars p-toolbar-separator" style={{marginRight:'.25em'}} />
-                            <Button label="Save" icon="pi pi-check" className="p-button-warning" />
-                        </div>
-                        <div className="p-toolbar-group-right">
-                            <Button icon="pi pi-search" style={{marginRight:'.25em'}} />
-                            <Button icon="pi pi-calendar" className="p-button-success" style={{marginRight:'.25em'}} />
-                            <Button icon="pi pi-times" className="p-button-danger" />
-                        </div>
-                    </Toolbar>
-                </div>
-
-                <ToolbarDoc/>
-
-            </div>
-        );
-    }
-}
-                        `}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-
-}
diff --git a/src/showcase/tooltip/TooltipDemo.js b/src/showcase/tooltip/TooltipDemo.js
deleted file mode 100644
index d648e29ee3..0000000000
--- a/src/showcase/tooltip/TooltipDemo.js
+++ /dev/null
@@ -1,265 +0,0 @@
-import React, {Component} from 'react';
-import {InputText} from '../../components/inputtext/InputText';
-import {Button} from '../../components/button/Button';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TooltipDemo extends Component {
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tooltip</h1>
-                        <p>Tooltip functionality is integrated within various PrimeReact components.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tooltip")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Positions</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Right" tooltip="Enter your username" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
-                        </div>
-                    </div>
-
-                    <h3>Focus and Blur</h3>
-                    <InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{event: 'focus'}} />
-
-                    <h3>Button</h3>
-                    <Button type="button" label="Save" icon="pi pi-check" tooltip="Click to proceed" />
-                </div>
-
-                <TooltipDoc />
-            </div>
-        )
-    }
-}
-
-class TooltipDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Getting Started</h3>
-                        <p>Tooltip functionality is integrated within the the components that have support such as inputtext or buttons. Content is defined with the <i>tooltip</i> property.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<InputText type="text" placeholder="Right" tooltip="Enter your username" />
-<Button type="button" label="Save" icon="pi pi-check" tooltip="Click to proceed" />
-
-`}
-</CodeHighlight>
-
-                        <h3>Position</h3>
-                        <p>There are four choices to position the tooltip, default value is "right" and alternatives are "top", "bottom", "left". Position is
-                        specified using <i>tooltipOptions</i> property.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputText type="text" placeholder="Right" tooltip="Enter your username" tooltipOptions={{position: 'right'}}/>
-
-`}
-</CodeHighlight>
-
-                        <h3>Events</h3>
-                        <p>Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputText type="text" placeholder="Right" tooltip="Enter your username" tooltipOptions={{event: 'right'}}/>
-
-`}
-</CodeHighlight>
-
-                        <h3>Delay</h3>
-                        <p>Tooltip is displayed or hidden instantly by default however you may add delays using <i>showDelay</i> and <i>hideDelay</i> properties which accept a number value in terms of milliseconds.</p>
-<CodeHighlight className="language-jsx">
-{`
-<InputText type="text" placeholder="Right" tooltip="Enter your username" tooltipOptions={{showDelay: 1000, hideDelay: 300}}/>
-
-`}
-</CodeHighlight>
-
-                    <h3>Tooltip Options</h3>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>position</td>
-                                    <td>string</td>
-                                    <td>right</td>
-                                    <td>Position of the tooltip, valid values are right, left, top and bottom.</td>
-                                </tr>
-                                <tr>
-                                    <td>event</td>
-                                    <td>string</td>
-                                    <td>hover</td>
-                                    <td>Event to show the tooltip, valid values are hover and focus.</td>
-                                </tr>
-                                <tr>
-                                    <td>hideDelay</td>
-                                    <td>null</td>
-                                    <td>number</td>
-                                    <td>Delay to hide the tooltip in milliseconds.</td>
-                                </tr>
-                                <tr>
-                                    <td>showDelay</td>
-                                    <td>number</td>
-                                    <td>null</td>
-                                    <td>Delay to show the tooltip in milliseconds.</td>
-                                </tr>
-                                <tr>
-                                    <td>className</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the tooltip.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Styling</h3>
-                    <p>Following is the list of structural style classes</p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-tooltip</td>
-                                    <td>Container element</td>
-                                </tr>
-                                <tr>
-                                    <td>p-tooltip-arrow</td>
-                                    <td>Arrow of the tooltip</td>
-                                </tr>
-                                <tr>
-                                    <td>p-tooltip-text</td>
-                                    <td>Text of the tooltip</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Dependencies</h3>
-                    <p>None.</p>
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {InputText} from 'primereact/inputtext';
-
-export class TooltipDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {title: null, tooltipPosition: 'right'};
-        this.onTooltipPosition = this.onTooltipPosition.bind(this);
-    }
-
-    onTooltipPosition(e) {
-        let element = e.target;
-
-        switch(element.id) {
-            case "username":
-                this.setState({title: "Enter your username", tooltipPosition: 'right'});
-            break;
-
-            case "surname":
-                this.setState({title: "Enter your surname", tooltipPosition: 'top'});
-            break;
-
-            case "age":
-                this.setState({title: "Enter your age", tooltipPosition: 'bottom'});
-            break;
-
-            case "email":
-                this.setState({title: "Enter your email", tooltipPosition: 'left'});
-            break;
-
-            default:
-            break;
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tooltip</h1>
-                        <p>Tooltip functionality is integrated within various PrimeReact components.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Positions</h3>
-                    <div className="p-grid p-fluid">
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Right" tooltip="Enter your username" />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Top" tooltip="Enter your username" tooltipOptions={{position: 'top'}} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Bottom" tooltip="Enter your username" tooltipOptions={{position: 'bottom'}} />
-                        </div>
-                        <div className="p-col-12 p-md-3">
-                            <InputText type="text" placeholder="Left" tooltip="Enter your username" tooltipOptions={{position: 'left'}} />
-                        </div>
-                    </div>
-
-                    <h3>Focus and Blur</h3>
-                    <InputText type="text" placeholder="Focus" tooltip="Enter your username" tooltipOptions={{event: 'focus'} />
-
-                    <h3>Button</h3>
-                    <Button type="button" label="Save" icon="pi pi-check" tooltip="Click to proceed" />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/tree/TreeContextMenuDemo.js b/src/showcase/tree/TreeContextMenuDemo.js
deleted file mode 100644
index 67c3f77113..0000000000
--- a/src/showcase/tree/TreeContextMenuDemo.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { Component } from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {ContextMenu} from '../../components/contextmenu/ContextMenu';
-import {Growl} from '../../components/growl/Growl';
-import {NodeService} from '../service/NodeService';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeContextMenuDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            expandedKeys: {},
-            selectedNodeKey: null,
-            menu: [
-                {
-                    label: 'View Key',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.growl.show({severity: 'success', summary: 'Node Key', detail: this.state.selectedNodeKey});
-                    }
-                },
-                {
-                    label: 'Toggle',
-                    icon: 'pi pi-cog',
-                    command: () => {
-                        let expandedKeys = {...this.state.expandedKeys};
-                        if (expandedKeys[this.state.selectedNodeKey])
-                            delete expandedKeys[this.state.selectedNodeKey];
-                        else
-                            expandedKeys[this.state.selectedNodeKey] = true;
-
-                        this.setState({expandedKeys: expandedKeys});
-                    }
-                }
-            ]
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - ContextMenu</h1>
-                        <p>Tree has exclusive integration with the ContextMenu component with support for different menus depending on the node.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <ContextMenu model={this.state.menu} ref={el => this.cm = el} onHide={() => this.setState({selectedNodeKey: null})}/>
-
-                    <Tree value={this.state.nodes} expandedKeys={this.state.expandedKeys} onToggle={e => this.setState({expandedKeys: e.value})}
-                        contextMenuSelectionKey={this.state.selectedNodeKey} onContextMenuSelectionChange={event => this.setState({selectedNodeKey: event.value})}
-                        onContextMenu={event => this.cm.show(event.originalEvent)} />
-                </div>
-
-                <TreeContextMenuDemoDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeContextMenuDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {Tree} from 'primereact/tree'
-import {ContextMenu} from 'primereact/contextmenu';
-import {Growl} from 'primereact/growl';
-import {NodeService} from '../service/NodeService';
-
-export class TreeContextMenuDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            expandedKeys: {},
-            selectedNodeKey: null,
-            menu: [
-                {
-                    label: 'View Key',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.growl.show({severity: 'success', summary: 'Node Key', detail: this.state.selectedNodeKey});
-                    }
-                },
-                {
-                    label: 'Toggle',
-                    icon: 'pi pi-cog',
-                    command: () => {
-                        let expandedKeys = {...this.state.expandedKeys};
-                        if (expandedKeys[this.state.selectedNodeKey])
-                            delete expandedKeys[this.state.selectedNodeKey];
-                        else
-                            expandedKeys[this.state.selectedNodeKey] = true;
-
-                        this.setState({expandedKeys: expandedKeys});
-                    }
-                }
-            ]
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - ContextMenu</h1>
-                        <p>Tree has exclusive integration with the ContextMenu component with support for different menus depending on the node.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <ContextMenu model={this.state.menu} ref={el => this.cm = el} />
-
-                    <Tree value={this.state.nodes} expandedKeys={this.state.expandedKeys} onToggle={e => this.setState({expandedKeys: e.value})}
-                        onContextMenuSelectionChange={event => this.setState({selectedNodeKey: event.value})}
-                        onContextMenu={event => this.cm.show(event.originalEvent)} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tree/TreeDemo.js b/src/showcase/tree/TreeDemo.js
deleted file mode 100644
index 9d25517e6e..0000000000
--- a/src/showcase/tree/TreeDemo.js
+++ /dev/null
@@ -1,973 +0,0 @@
-import React, {Component} from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {Button} from '../../components/button/Button';
-import {NodeService} from '../service/NodeService';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            expandedKeys: {}
-        };
-
-        this.nodeService = new NodeService();
-        this.toggleMovies = this.toggleMovies.bind(this);
-    }
-
-    toggleMovies() {
-        let expandedKeys = {...this.state.expandedKeys};
-        if (expandedKeys['2'])
-            delete expandedKeys['2'];
-        else
-            expandedKeys['2'] = true;
-
-        this.setState({expandedKeys: expandedKeys});
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree</h1>
-                        <p>Tree is used to display hierarchical data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Uncontrolled</h3>
-                    <Tree value={this.state.nodes} />
-
-                    <h3>Controlled</h3>
-                    <Button onClick={this.toggleMovies} label="Toggle Movies" />
-                    <Tree value={this.state.nodes} expandedKeys={this.state.expandedKeys}
-                        onToggle={e => this.setState({expandedKeys: e.value})} style={{marginTop: '.5em'}} />
-                </div>
-
-                <TreeDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {Tree} from 'primereact/tree';
-
-`}
-</CodeHighlight>
-
-            <h3>Getting Started</h3>
-            <p>Tree component requires an array of TreeNode objects as its <i>value</i>.</p>
-
-            <h3>TreeNode API</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>key</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Unique key of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>label</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Label of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>data</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>Data represented by the node.</td>
-                        </tr>
-                        <tr>
-                            <td>icon</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Icon of the node to display next to content.</td>
-                        </tr>
-                        <tr>
-                            <td>children</td>
-                            <td>TreeNode[]</td>
-                            <td>null</td>
-                            <td>An array of treenodes as children.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Inline style of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the node.</td>
-                        </tr>
-                        <tr>
-                            <td>draggable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the node is draggable when dragdrop is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>droppable</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether the node is droppable when dragdrop is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>selectable</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Whether the node is selectable when selection mode is enabled.</td>
-                        </tr>
-                        <tr>
-                            <td>leaf</td>
-                            <td>boolean</td>
-                            <td>null</td>
-                            <td>Specifies if the node has children. Used in lazy loading.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <CodeHighlight className="language-jsx">
-{`
-<Tree value={data} />
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-const data: [
-    {
-        "key": "0",
-        "label": "Documents",
-        "data": "Documents Folder",
-        "icon": "pi pi-fw pi-inbox",
-        "children": [{
-            "key": "0-0",
-            "label": "Work",
-            "data": "Work Folder",
-            "icon": "pi pi-fw pi-cog",
-            "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
-        },
-        {
-            "key": "0-1",
-            "label": "Home",
-            "data": "Home Folder",
-            "icon": "pi pi-fw pi-home",
-            "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
-        }]
-    },
-    {
-        "key": "1",
-        "label": "Events",
-        "data": "Events Folder",
-        "icon": "pi pi-fw pi-calendar",
-        "children": [
-            { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
-            { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
-            { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
-    },
-    {
-        "key": "2",
-        "label": "Movies",
-        "data": "Movies Folder",
-        "icon": "pi pi-fw pi-star",
-        "children": [{
-            "key": "2-0",
-            "icon": "pi pi-fw pi-star",
-            "label": "Al Pacino",
-            "data": "Pacino Movies",
-            "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
-        },
-        {
-            "key": "2-1",
-            "label": "Robert De Niro",
-            "icon": "pi pi-fw pi-star",
-            "data": "De Niro Movies",
-            "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
-        }]
-    }
-]
-
-`}
-</CodeHighlight>
-
-            <h3>Controlled vs Uncontrolled</h3>
-            <p>Tree expansion state is managed in two ways, in uncontrolled mode only initial expanded state of a node can be defined using <i>expandedKeys</i> property whereas in controlled mode <i>expandedKeys</i>
-            property along with <i>onToggle</i> properties are used for full control over the state. If you need to expand or collapse the state of nodes programmatically then controlled mode should be used. Example below demonstrates
-            both cases;</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {Button} from 'primereact/button';
-import {NodeService} from '../service/NodeService';
-
-export class TreeDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            expandedKeys: {}
-        };
-
-        this.nodeService = new NodeService();
-        this.toggleMovies = this.toggleMovies.bind(this);
-    }
-
-    toggleMovies() {
-        let expandedKeys = {...this.state.expandedKeys};
-        if (expandedKeys['2'])
-            delete expandedKeys['2'];
-        else
-            expandedKeys['2'] = true;
-
-        this.setState({expandedKeys: expandedKeys});
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <h3 className="first">Uncontrolled</h3>
-                <Tree value={this.state.nodes} />
-
-                <h3>Controlled</h3>
-                <Button onClick={this.toggleMovies} label="Toggle Movies" />
-                <Tree value={this.state.nodes} expandedKeys={this.state.expandedKeys}
-                    onToggle={e => this.setState({expandedKeys: e.value})} style={{marginTop: '.5em'}} />
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Selection</h3>
-            <p>Tree supports single, multiple and checkbox selection modes. Define <i>selectionMode</i>, <i>selectionKeys</i> and <i>onSelectionChange</i> properties to control the selection. In single mode, selectionKeys should
-            be a single value whereas in multiple or checkbox modes an array is required. By default in multiple selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that
-            in touch enabled devices, Tree does not require metaKey.</p>
-            <CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {NodeService} from '../service/NodeService';
-
-export class TreeSelectionDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            selectedNodeKey: null,
-            selectedNodeKeys1: null,
-            selectedNodeKeys2: null,
-            selectedNodeKeys3: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <h3>Single Selection</h3>
-                <Tree value={this.state.nodes} selectionMode="single" selectionKeys={this.state.selectedNodeKey} onSelectionChange={e => this.setState({selectedNodeKey: e.value})} />
-
-                <h3>Multiple Selection with MetaKey</h3>
-                <Tree value={this.state.nodes} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys1} onSelectionChange={e => this.setState({selectedNodeKeys1: e.value})} />
-
-                <h3>Multiple Selection without MetaKey</h3>
-                <Tree value={this.state.nodes} selectionMode="multiple" metaKeySelection={false} selectionKeys={this.state.selectedNodeKeys2} onSelectionChange={e => this.setState({selectedNodeKeys2: e.value})} />
-
-                <h3>Checkbox Selection</h3>
-                <Tree value={this.state.nodes} selectionMode="checkbox" selectionKeys={this.state.selectedNodeKeys3} onSelectionChange={e => this.setState({selectedNodeKeys3: e.value})} />
-            </div>
-        )
-    }
-}
-
-
-`}
-</CodeHighlight>
-
-            <h3>Lazy</h3>
-            <p>Lazy loading is implemented using the <i>onExpand</i> event by adding children to the expanded node. <i>leaf</i> property should be enabled to indicate the node has children but not yet loaded. Here is a in-memory demo
-            that loads generated nodes on expand event to imitate a remote call with a timeout. Notice the usage of <i>loading</i> property as well to give users a feedback about the loading process.</p>
-            <CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {NodeService} from '../service/NodeService';
-
-export class TreeLazyDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            loading: true,
-        };
-
-        this.nodeService = new NodeService();
-
-        this.loadOnExpand = this.loadOnExpand.bind(this);
-    }
-
-    loadOnExpand(event) {
-        if (!event.node.children) {
-            this.setState({
-                loading: true
-            });
-
-            setTimeout(() => {
-                let node = {...event.node};
-                node.children = [];
-
-                for (let i = 0; i < 3; i++) {
-                    node.children.push({
-                        key: node.key + '-' + i,
-                        label: 'Lazy ' + node.label + '-' + i
-                    });
-                }
-
-                let value = [...this.state.nodes];
-                value[parseInt(event.node.key, 10)] = node;
-                this.setState({
-                    nodes: value,
-                    loading: false
-                });
-            }, 500);
-        }
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.nodeService.getTreeNodes().then(data => this.setState(
-                {
-                    nodes: data,
-                    loading: false
-                }
-            ));
-        }, 2000);
-    }
-
-    render() {
-        return (
-            <Tree value={this.state.nodes} onExpand={this.loadOnExpand} loading={this.state.loading} />
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Templating</h3>
-            <p><i>label</i> property of a node is used to display as the content by default. Templating is supported as well with the <i>nodeTemplate</i> callback that gets the ndoe instance and returns JSX. Example
-            below is a sample tree based navigation of React docs.</p>
-            <CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-
-export class TreeTemplatingDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: this.createNavigation()
-        };
-
-        this.nodeTemplate = this.nodeTemplate.bind(this);
-    }
-
-    createNavigation() {
-        return [
-            {
-                label: 'Insallation',
-                children: [
-                    {label: 'Getting Started', url:'https://reactjs.org/docs/getting-started.html'},
-                    {label: 'Add React', url: 'https://reactjs.org/docs/add-react-to-a-website.html'},
-                    {label: 'Create an App', url:'https://reactjs.org/docs/create-a-new-react-app.html'},
-                    {label: 'CDN Links', url: 'https://reactjs.org/docs/cdn-links.html'}
-                ]
-            },
-            {
-                label: 'Main Concepts',
-                children: [
-                    {label: 'Hello World', url: 'https://reactjs.org/docs/hello-world.html'},
-                    {label: 'Introducing JSX', url: 'https://reactjs.org/docs/introducing-jsx.html'},
-                    {label: 'Rendering Elements', url: 'https://reactjs.org/docs/rendering-elements.html'},
-                    {label: 'Components and Props', url: 'https://reactjs.org/docs/components-and-props.html'},
-                    {label: 'State and LifeCycle', url: 'https://reactjs.org/docs/state-and-lifecycle.html'},
-                    {label: 'Handling Events', url: 'https://reactjs.org/docs/handling-events.html'}
-                ]
-            }
-        ];
-    }
-
-    nodeTemplate(node) {
-        if (node.url) {
-            return (
-                <a href={node.url}>{node.label}</a>
-            )
-        }
-        else {
-            return (
-                <b>{node.label}</b>
-            )
-        }
-    }
-
-    render() {
-        return (
-            <Tree value={this.state.nodes} nodeTemplate={this.nodeTemplate} />
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>DragDrop</h3>
-            <p>Tree nodes can be reordered using dragdrop by setting <i>dragdropScope</i> property to a unique variable and updating the new value at <i>onDragDrop</i> callback. The value of the dragdropScope must be unique to provide
-            intervention from other draggable elements on the page.</p>
-            <CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {NodeService} from '../service/NodeService';
-
-export class TreeDragDropDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <Tree value={this.state.nodes} dragdropScope="demo" onDragDrop={event => this.setState({nodes: event.value})} />
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Filtering</h3>
-            <p>Filtering is enabled by setting the <i>filter</i> property to true, by default label property of a node
-            is used to compare against the value in the text field, in order to customize which field(s) should be used during search define <i>filterBy</i> property.</p>
-
-            <p>In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand,
-                 in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-<Tree value={this.state.nodes} filter={true} />
-
-<Tree value={this.state.nodes} filter={true} filterBy="data.name,data.age" />
-
-<Tree value={this.state.nodes} filter={true} filterMode="strict" />
-
-`}
-</CodeHighlight>
-
-            <h3>ContextMenu</h3>
-            <p>One or more ContextMenu instances can be attached to nodes. Similar to selection, separate <i>contextMenuSelectionKey</i> and <i>onContextMenuSelectionChange</i> properties are necesary to manage the selected node with
-            right click. In addition, a context menu can either be displayed at <i>onContextMenu</i> event. Since this event also passes the node instance, you may choose to display a different context menu for a particular node.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import {Tree} from 'primereact/tree'
-import {ContextMenu} from 'primereact/contextmenu';
-import {Growl} from 'primereact/growl';
-import {NodeService} from '../service/NodeService';
-
-export class TreeContextMenuDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            expandedKeys: {},
-            selectedNodeKey: null,
-            menu: [
-                {
-                    label: 'View Key',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.growl.show({severity: 'success', summary: 'Node Key', detail: this.state.selectedNodeKey});
-                    }
-                },
-                {
-                    label: 'Toggle',
-                    icon: 'pi pi-cog',
-                    command: () => {
-                        let expandedKeys = {...this.state.expandedKeys};
-                        if (expandedKeys[this.state.selectedNodeKey])
-                            delete expandedKeys[this.state.selectedNodeKey];
-                        else
-                            expandedKeys[this.state.selectedNodeKey] = true;
-
-                        this.setState({expandedKeys: expandedKeys});
-                    }
-                }
-            ]
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <Growl ref={(el) => this.growl = el} />
-
-                <ContextMenu model={this.state.menu} ref={el => this.cm = el} />
-
-                <Tree value={this.state.nodes} expandedKeys={this.state.expandedKeys} onToggle={e => this.setState({expandedKeys: e.value})}
-                    onContextMenuSelectionChange={event => this.setState({selectedNodeKey: event.value})}
-                    onContextMenu={event => this.cm.show(event.originalEvent)} />
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-            <h3>Properties</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Type</th>
-                            <th>Default</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>id</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Unique identifier of the element.</td>
-                        </tr>
-                         <tr>
-                            <td>value</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of treenodes.</td>
-                        </tr>
-                        <tr>
-                            <td>selectionMode</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
-                        </tr>
-                        <tr>
-                            <td>selectionKeys</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>A single or an array of keys to control the selection state.</td>
-                        </tr>
-                        <tr>
-                            <td>contextMenuSelectionKey</td>
-                            <td>any</td>
-                            <td>null</td>
-                            <td>A single key to control the selection with the context menu.</td>
-                        </tr>
-                        <tr>
-                            <td>expandedKeys</td>
-                            <td>array</td>
-                            <td>null</td>
-                            <td>An array of keys to represent the state of the tree expansion state in controlled mode.</td>
-                        </tr>
-                        <tr>
-                            <td>style</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>className</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the component.</td>
-                        </tr>
-                        <tr>
-                            <td>contentStyle</td>
-                            <td>object</td>
-                            <td>null</td>
-                            <td>Inline style of the tree content.</td>
-                        </tr>
-                        <tr>
-                            <td>contentClassName</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Style class of the tree content.</td>
-                        </tr>
-                        <tr>
-                            <td>metaKeySelection</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
-                                can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
-                        </tr>
-                        <tr>
-                            <td>propagateSelectionUp</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether checkbox selections propagate to ancestor nodes.</td>
-                        </tr>
-                        <tr>
-                            <td>propagateSelectionDown</td>
-                            <td>boolean</td>
-                            <td>true</td>
-                            <td>Whether checkbox selections propagate to descendant nodes.</td>
-                        </tr>
-                        <tr>
-                            <td>loading</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>Whether to display loading indicator.</td>
-                        </tr>
-                        <tr>
-                            <td>loadingIcon</td>
-                            <td>string</td>
-                            <td>pi pi-spin</td>
-                            <td>Icon to display when tree is loading.</td>
-                        </tr>
-                        <tr>
-                            <td>dragdropScope</td>
-                            <td>string</td>
-                            <td>false</td>
-                            <td>Unique key to enable dragdrop functionality.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabel</td>
-                            <td>string</td>
-                            <td>false</td>
-                            <td>Used to define a string that labels the component.</td>
-                        </tr>
-                        <tr>
-                            <td>ariaLabelledBy</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Contains the element IDs of labels.</td>
-                        </tr>
-                        <tr>
-                            <td>nodeTemplate</td>
-                            <td>function</td>
-                            <td>false</td>
-                            <td>Function that gets a TreeNode instance and returns the content for it.</td>
-                        </tr>
-                        <tr>
-                            <td>filter</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When specified, displays an input field to filter the items.</td>
-                        </tr>
-                        <tr>
-                            <td>filterBy</td>
-                            <td>string</td>
-                            <td>label</td>
-                            <td>When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.</td>
-                        </tr>
-                        <tr>
-                            <td>filterMode</td>
-                            <td>string</td>
-                            <td>lenient</td>
-                            <td>Mode for filtering valid values are "lenient" and "strict". Default is lenient.</td>
-                        </tr>
-                        <tr>
-                            <td>filterPlaceholder</td>
-                            <td>string</td>
-                            <td>null</td>
-                            <td>Placeholder text to show when filter input is empty.</td>
-                        </tr>
-                        <tr>
-                            <td>filterLocale</td>
-                            <td>string</td>
-                            <td>undefined</td>
-                            <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                        </tr>
-                        <tr>
-                            <td>disabled</td>
-                            <td>boolean</td>
-                            <td>false</td>
-                            <td>When present, it specifies that the component should be disabled.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Events</h3>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Parameters</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>onSelect</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.node: Selected node instance.</td>
-                            <td>Callback to invoke when a node is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>onUnselect</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.node: Unselected node instance.</td>
-                            <td>Callback to invoke when a node is unselected.</td>
-                        </tr>
-                        <tr>
-                            <td>onExpand</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.node: Expanded node instance.</td>
-                            <td>Callback to invoke when a node is expanded.</td>
-                        </tr>
-                        <tr>
-                            <td>onCollapse</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.node: Collapsed node instance.</td>
-                            <td>Callback to invoke when a node is collapsed.</td>
-                        </tr>
-                        <tr>
-                            <td>onSelectionChange</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.value: Selected node key(s).</td>
-                            <td>Callback to invoke when selection changes.</td>
-                        </tr>
-                        <tr>
-                            <td>onContextMenuSelectionChange</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.value: Selected node key.</td>
-                            <td>Callback to invoke when selection changes with a context menu.</td>
-                        </tr>
-                        <tr>
-                            <td>onToggle</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.node: Toggled node instance.</td>
-                            <td>Callback to invoke when a node is toggled.</td>
-                        </tr>
-                        <tr>
-                            <td>onDragDrop</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.value: New value after the dragdrop.</td>
-                            <td>Callback to invoke when a node is selected.</td>
-                        </tr>
-                        <tr>
-                            <td>onContextMenu</td>
-                            <td>event.originalEvent: browser event <br />
-                                event.node: Selected node instance.</td>
-                            <td>Callback to invoke when a node is selected with a context menu.</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-
-            <h3>Styling</h3>
-            <p>Following is the list of structural style classes</p>
-            <div className="doc-tablewrapper">
-                <table className="doc-table">
-                    <thead>
-                        <tr>
-                            <th>Name</th>
-                            <th>Element</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>p-tree</td>
-                            <td>Main container element</td>
-                        </tr>
-                        <tr>
-                            <td>p-tree-horizontal</td>
-                            <td>Main container element in horizontal mode</td>
-                        </tr>
-                        <tr>
-                            <td>p-tree-container</td>
-                            <td>Container of nodes</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode</td>
-                            <td>A treenode element</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-content</td>
-                            <td>Content of a treenode</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-toggler</td>
-                            <td>Toggle element</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-toggler-icon</td>
-                            <td>Toggle icon</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-icon</td>
-                            <td>Icon of a treenode</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-label</td>
-                            <td>Label of a treenode</td>
-                        </tr>
-                        <tr>
-                            <td>p-treenode-children</td>
-                            <td>Container element for node children</td>
-                        </tr>
-                    </tbody>
-                </table>
-
-                <h3>Dependencies</h3>
-                <p>None.</p>
-            </div>
-
-            </TabPanel>
-
-            <TabPanel header="Source">
-                <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/tree" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                    <span>View on GitHub</span>
-                </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {Button} from 'primereact/button';
-import {NodeService} from '../service/NodeService';
-
-export class TreeDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            expandedKeys: {}
-        };
-
-        this.nodeService = new NodeService();
-        this.toggleMovies = this.toggleMovies.bind(this);
-    }
-
-    toggleMovies() {
-        let expandedKeys = {...this.state.expandedKeys};
-        if (expandedKeys['2'])
-            delete expandedKeys['2'];
-        else
-            expandedKeys['2'] = true;
-
-        this.setState({expandedKeys: expandedKeys});
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree</h1>
-                        <p>Tree is used to display hierarchical data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Uncontrolled</h3>
-                    <Tree value={this.state.nodes} />
-
-                    <h3>Controlled</h3>
-                    <Button onClick={this.toggleMovies} label="Toggle Movies" />
-                    <Tree value={this.state.nodes} expandedKeys={this.state.expandedKeys}
-                        onToggle={e => this.setState({expandedKeys: e.value})} style={{marginTop: '.5em'}} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tree/TreeDragDropDemo.js b/src/showcase/tree/TreeDragDropDemo.js
deleted file mode 100644
index bbc953c9fa..0000000000
--- a/src/showcase/tree/TreeDragDropDemo.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React, {Component} from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {NodeService} from '../service/NodeService';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeDragDropDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - DragDrop</h1>
-                        <p>Nodes can be reordered using drag and drop.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Tree value={this.state.nodes} dragdropScope="demo" onDragDrop={event => this.setState({nodes: event.value})} />
-                </div>
-
-                <TreeDragDropDemoDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeDragDropDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {NodeService} from '../service/NodeService';
-
-export class TreeDragDropDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - DragDrop</h1>
-                        <p>Nodes can be reordered using drag and drop.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Tree value={this.state.nodes} dragdropScope="demo" onDragDrop={event => this.setState({nodes: event.value})} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tree/TreeEventsDemo.js b/src/showcase/tree/TreeEventsDemo.js
deleted file mode 100644
index 5788bb7682..0000000000
--- a/src/showcase/tree/TreeEventsDemo.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, {Component} from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {Growl} from '../../components/growl/Growl';
-import {NodeService} from '../service/NodeService';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeEventsDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            selectedNodeKey: null
-        };
-
-        this.nodeService = new NodeService();
-
-        this.onExpand = this.onExpand.bind(this);
-        this.onCollapse = this.onCollapse.bind(this);
-        this.onSelect = this.onSelect.bind(this);
-        this.onUnselect = this.onUnselect.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onExpand(event) {
-        this.growl.show({severity: 'success', summary: 'Node Expanded', detail: event.node.label});
-    }
-
-    onCollapse(event) {
-        this.growl.show({severity: 'success', summary: 'Node Collapsed', detail: event.node.label});
-    }
-
-    onSelect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Selected', detail: event.node.label});
-    }
-
-    onUnselect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Unselected', detail: event.node.label});
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Events</h1>
-                        <p>An event is provided each type of user interaction such as expand, collapse and selection.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3 className="first">Events</h3>
-                    <Tree value={this.state.nodes} selectionMode="single" selectionKeys={this.state.selectedNodeKey} onSelectionChange={e => this.setState({selectedNodeKey: e.value})}
-                            onExpand={this.onExpand} onCollapse={this.onCollapse} onSelect={this.onSelect} onUnselect={this.onUnselect} />
-                </div>
-
-                <TreeEventsDemoDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeEventsDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {Growl} from 'primereact/growl';
-import {NodeService} from '../service/NodeService';
-
-export class TreeEventsDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            selectedNodeKey: null
-        };
-
-        this.nodeService = new NodeService();
-
-        this.onExpand = this.onExpand.bind(this);
-        this.onCollapse = this.onCollapse.bind(this);
-        this.onSelect = this.onSelect.bind(this);
-        this.onUnselect = this.onUnselect.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onExpand(event) {
-        this.growl.show({severity: 'success', summary: 'Node Expanded', detail: event.node.label});
-    }
-
-    onCollapse(event) {
-        this.growl.show({severity: 'success', summary: 'Node Collapsed', detail: event.node.label});
-    }
-
-    onSelect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Selected', detail: event.node.label});
-    }
-
-    onUnselect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Unselected', detail: event.node.label});
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Events</h1>
-                        <p>An event is provided each type of user interaction such as expand, collapse and selection.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3 className="first">Events</h3>
-                    <Tree value={this.state.nodes} selectionMode="single" selectionKeys={this.state.selectedNodeKey} onSelectionChange={e => this.setState({selectedNodeKey: e.value})}
-                            onExpand={this.onExpand} onCollapse={this.onCollapse} onSelect={this.onSelect} onUnselect={this.onUnselect} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tree/TreeFilterDemo.js b/src/showcase/tree/TreeFilterDemo.js
deleted file mode 100644
index 797bec1750..0000000000
--- a/src/showcase/tree/TreeFilterDemo.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, {Component} from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {NodeService} from '../service/NodeService';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeFilterDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes1: null,
-            nodes2: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes1: data, nodes2: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Filter</h1>
-                        <p>Filtering updates the node based on the constraints.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Lenient Filter Mode</h3>
-                    <Tree value={this.state.nodes1} filter={true} />
-
-                    <h3>Strict Filter Mode</h3>
-                    <Tree value={this.state.nodes2} filter={true} filterMode="strict" />
-                </div>
-
-                <TreeFilterDemoDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeFilterDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {NodeService} from '../service/NodeService';
-
-export class TreeFilterDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes1: null,
-            nodes2: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes1: data, nodes2: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Filter</h1>
-                        <p>Filtering updates the node based on the constraints.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Lenient Filter Mode</h3>
-                    <Tree value={this.state.nodes1} filter={true} />
-
-                    <h3>Strict Filter Mode</h3>
-                    <Tree value={this.state.nodes2} filter={true} filterMode="strict" />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tree/TreeLazyDemo.js b/src/showcase/tree/TreeLazyDemo.js
deleted file mode 100644
index 0d3eeaa253..0000000000
--- a/src/showcase/tree/TreeLazyDemo.js
+++ /dev/null
@@ -1,226 +0,0 @@
-import React, {Component} from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {NodeService} from '../service/NodeService';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeLazyDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            loading: true,
-        };
-
-        this.nodeService = new NodeService();
-
-        this.loadOnExpand = this.loadOnExpand.bind(this);
-    }
-
-    createLazyNodes() {
-        return [
-            {
-                key: '0',
-                label: 'Node 0',
-                leaf: false
-            },
-            {
-                key: '1',
-                label: 'Node 1',
-                leaf: false
-            },
-            {
-                key: '2',
-                label: 'Node 2',
-                leaf: false
-            }
-        ];
-    }
-
-    loadOnExpand(event) {
-        if (!event.node.children) {
-            this.setState({
-                loading: true
-            });
-
-            setTimeout(() => {
-                let node = {...event.node};
-                node.children = [];
-
-                for (let i = 0; i < 3; i++) {
-                    node.children.push({
-                        key: node.key + '-' + i,
-                        label: 'Lazy ' + node.label + '-' + i
-                    });
-                }
-
-                let value = [...this.state.nodes];
-                value[parseInt(event.node.key, 10)] = node;
-                this.setState({
-                    nodes: value,
-                    loading: false
-                });
-            }, 500);
-        }
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.nodeService.getTreeNodes().then(data => this.setState(
-                {
-                    nodes: this.createLazyNodes(),
-                    loading: false
-                }
-            ));
-        }, 2000);
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Lazy</h1>
-                        <p>Lazy loading is useful when dealing with huge datasets.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Lazy Loading</h3>
-                    <Tree value={this.state.nodes} onExpand={this.loadOnExpand} loading={this.state.loading} />
-                </div>
-
-                <TreeLazyDemoDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeLazyDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {NodeService} from '../service/NodeService';
-
-export class TreeLazyDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            loading: true,
-        };
-
-        this.nodeService = new NodeService();
-
-        this.loadOnExpand = this.loadOnExpand.bind(this);
-    }
-
-    createLazyNodes() {
-        return [
-            {
-                key: '0',
-                label: 'Node 0',
-                leaf: false
-            },
-            {
-                key: '1',
-                label: 'Node 1',
-                leaf: false
-            },
-            {
-                key: '2',
-                label: 'Node 2',
-                leaf: false
-            }
-        ];
-    }
-
-    loadOnExpand(event) {
-        if (!event.node.children) {
-            this.setState({
-                loading: true
-            });
-
-            setTimeout(() => {
-                let node = {...event.node};
-                node.children = [];
-
-                for (let i = 0; i < 3; i++) {
-                    node.children.push({
-                        key: node.key + '-' + i,
-                        label: 'Lazy ' + node.label + '-' + i
-                    });
-                }
-
-                let value = [...this.state.nodes];
-                value[parseInt(event.node.key, 10)] = node;
-                this.setState({
-                    nodes: value,
-                    loading: false
-                });
-            }, 500);
-        }
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.nodeService.getTreeNodes().then(data => this.setState(
-                {
-                    nodes: this.createLazyNodes(),
-                    loading: false
-                }
-            ));
-        }, 2000);
-    }
-
-    render() {
-        return (
-            <div>
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Lazy</h1>
-                        <p>Lazy loading is useful when dealing with huge datasets.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Lazy Loading</h3>
-                    <Tree value={this.state.nodes} onExpand={this.loadOnExpand} loading={this.state.loading} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tree/TreeSelectionDemo.js b/src/showcase/tree/TreeSelectionDemo.js
deleted file mode 100644
index f581ade4fb..0000000000
--- a/src/showcase/tree/TreeSelectionDemo.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, {Component} from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {NodeService} from '../service/NodeService';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeSelectionDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            selectedNodeKey: null,
-            selectedNodeKeys1: null,
-            selectedNodeKeys2: null,
-            selectedNodeKeys3: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Selection</h1>
-                        <p>Tree supports "single", "multiple" and "checkbox" as selection modes.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single Selection</h3>
-                    <Tree value={this.state.nodes} selectionMode="single" selectionKeys={this.state.selectedNodeKey} onSelectionChange={e => this.setState({selectedNodeKey: e.value})} />
-
-                    <h3>Multiple Selection with MetaKey</h3>
-                    <Tree value={this.state.nodes} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys1} onSelectionChange={e => this.setState({selectedNodeKeys1: e.value})} />
-
-                    <h3>Multiple Selection without MetaKey</h3>
-                    <Tree value={this.state.nodes} selectionMode="multiple" metaKeySelection={false} selectionKeys={this.state.selectedNodeKeys2} onSelectionChange={e => this.setState({selectedNodeKeys2: e.value})} />
-
-                    <h3>Checkbox Selection</h3>
-                    <Tree value={this.state.nodes} selectionMode="checkbox" selectionKeys={this.state.selectedNodeKeys3} onSelectionChange={e => this.setState({selectedNodeKeys3: e.value})} />
-                </div>
-
-                <TreeSelectionDemoDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeSelectionDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-import {NodeService} from '../service/NodeService';
-
-export class TreeSelectionDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: null,
-            selectedNodeKey: null,
-            selectedNodeKeys1: null,
-            selectedNodeKeys2: null,
-            selectedNodeKeys3: null
-        };
-
-        this.nodeService = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeService.getTreeNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Selection</h1>
-                        <p>Tree supports "single", "multiple" and "checkbox" as selection modes.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single Selection</h3>
-                    <Tree value={this.state.nodes} selectionMode="single" selectionKeys={this.state.selectedNodeKey} onSelectionChange={e => this.setState({selectedNodeKey: e.value})} />
-
-                    <h3>Multiple Selection with MetaKey</h3>
-                    <Tree value={this.state.nodes} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys1} onSelectionChange={e => this.setState({selectedNodeKeys1: e.value})} />
-
-                    <h3>Multiple Selection without MetaKey</h3>
-                    <Tree value={this.state.nodes} selectionMode="multiple" metaKeySelection={false} selectionKeys={this.state.selectedNodeKeys2} onSelectionChange={e => this.setState({selectedNodeKeys2: e.value})} />
-
-                    <h3>Checkbox Selection</h3>
-                    <Tree value={this.state.nodes} selectionMode="checkbox" selectionKeys={this.state.selectedNodeKeys3} onSelectionChange={e => this.setState({selectedNodeKeys3: e.value})} />
-                </div>
-            </div>
-        )
-    }
-}
-
-
-`}
-</CodeHighlight>
-
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/tree/TreeSubmenu.js b/src/showcase/tree/TreeSubmenu.js
deleted file mode 100644
index ec64e13bb9..0000000000
--- a/src/showcase/tree/TreeSubmenu.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-
-export class TreeSubmenu extends Component {
-
-    render() {
-        return (
-            <div className="content-section content-submenu p-clearfix">
-                <ul>
-                    <li><Link to="/tree">&#9679; Documentation</Link></li>
-                    <li><Link to="/tree/selection">&#9679; Selection</Link></li>
-                    <li><Link to="/tree/events">&#9679; Events</Link></li>
-                    <li><Link to="/tree/lazy">&#9679; Lazy</Link></li>
-                    <li><Link to="/tree/templating">&#9679; Templating</Link></li>
-                    <li><Link to="/tree/dragdrop">&#9679; DragDrop</Link></li>
-                    <li><Link to="/tree/contextmenu">&#9679; ContextMenu</Link></li>
-                    <li><Link to="/tree/filter">&#9679; Filter</Link></li>
-                </ul>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/tree/TreeTemplatingDemo.js b/src/showcase/tree/TreeTemplatingDemo.js
deleted file mode 100644
index 8229bf3966..0000000000
--- a/src/showcase/tree/TreeTemplatingDemo.js
+++ /dev/null
@@ -1,181 +0,0 @@
-import React, {Component} from 'react';
-import {Tree} from '../../components/tree/Tree';
-import {TreeSubmenu} from './TreeSubmenu';
-import {TabView, TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTemplatingDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: this.createNavigation()
-        };
-
-        this.nodeTemplate = this.nodeTemplate.bind(this);
-    }
-
-    createNavigation() {
-        return [
-            {
-                key: "0",
-                label: 'Installation',
-                children: [
-                    {key: "0-0", label: 'Getting Started', url:'https://reactjs.org/docs/getting-started.html'},
-                    {key: "0-1", label: 'Add React', url: 'https://reactjs.org/docs/add-react-to-a-website.html'},
-                    {key: "0-2", label: 'Create an App', url:'https://reactjs.org/docs/create-a-new-react-app.html'},
-                    {key: "0-3", label: 'CDN Links', url: 'https://reactjs.org/docs/cdn-links.html'}
-                ]
-            },
-            {
-                key: "1",
-                label: 'Main Concepts',
-                children: [
-                    {key: "1-0", label: 'Hello World', url: 'https://reactjs.org/docs/hello-world.html'},
-                    {key: "1-1", label: 'Introducing JSX', url: 'https://reactjs.org/docs/introducing-jsx.html'},
-                    {key: "1-2", label: 'Rendering Elements', url: 'https://reactjs.org/docs/rendering-elements.html'},
-                    {key: "1-3", label: 'Components and Props', url: 'https://reactjs.org/docs/components-and-props.html'},
-                    {key: "1-4", label: 'State and LifeCycle', url: 'https://reactjs.org/docs/state-and-lifecycle.html'},
-                    {key: "1-5", label: 'Handling Events', url: 'https://reactjs.org/docs/handling-events.html'}
-                ]
-            }
-        ];
-    }
-
-    nodeTemplate(node) {
-        if (node.url) {
-            return (
-                <a href={node.url}>{node.label}</a>
-            )
-        }
-        else {
-            return (
-                <b>{node.label}</b>
-            )
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Templating</h1>
-                        <p>Tree nodes can be customized to display custom content.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("tree")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Navigation</h3>
-                    <Tree value={this.state.nodes} nodeTemplate={this.nodeTemplate} />
-                </div>
-
-                <TreeTemplatingDemoDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeTemplatingDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {Tree} from 'primereact/tree';
-
-export class TreeTemplatingDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: this.createNavigation()
-        };
-
-        this.nodeTemplate = this.nodeTemplate.bind(this);
-    }
-
-    createNavigation() {
-        return [
-            {
-                key: "0",
-                label: 'Installation',
-                children: [
-                    {key: "0-0", label: 'Getting Started', url:'https://reactjs.org/docs/getting-started.html'},
-                    {key: "0-1", label: 'Add React', url: 'https://reactjs.org/docs/add-react-to-a-website.html'},
-                    {key: "0-2", label: 'Create an App', url:'https://reactjs.org/docs/create-a-new-react-app.html'},
-                    {key: "0-3", label: 'CDN Links', url: 'https://reactjs.org/docs/cdn-links.html'}
-                ]
-            },
-            {
-                key: "1",
-                label: 'Main Concepts',
-                children: [
-                    {key: "1-0", label: 'Hello World', url: 'https://reactjs.org/docs/hello-world.html'},
-                    {key: "1-1", label: 'Introducing JSX', url: 'https://reactjs.org/docs/introducing-jsx.html'},
-                    {key: "1-2", label: 'Rendering Elements', url: 'https://reactjs.org/docs/rendering-elements.html'},
-                    {key: "1-3", label: 'Components and Props', url: 'https://reactjs.org/docs/components-and-props.html'},
-                    {key: "1-4", label: 'State and LifeCycle', url: 'https://reactjs.org/docs/state-and-lifecycle.html'},
-                    {key: "1-5", label: 'Handling Events', url: 'https://reactjs.org/docs/handling-events.html'}
-                ]
-            }
-        ];
-    }
-
-    nodeTemplate(node) {
-        if (node.url) {
-            return (
-                <a href={node.url}>{node.label}</a>
-            )
-        }
-        else {
-            return (
-                <b>{node.label}</b>
-            )
-        }
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>Tree - Templating</h1>
-                        <p>Tree nodes can be customized to display custom content.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Navigation</h3>
-                    <Tree value={this.state.nodes} nodeTemplate={this.nodeTemplate} />
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
diff --git a/src/showcase/treetable/TreeTableColGroupDemo.js b/src/showcase/treetable/TreeTableColGroupDemo.js
deleted file mode 100644
index cb0457f36c..0000000000
--- a/src/showcase/treetable/TreeTableColGroupDemo.js
+++ /dev/null
@@ -1,495 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { ColumnGroup } from '../../components/columngroup/ColumnGroup';
-import { Row } from '../../components/row/Row';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableColGroupDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    getSales() {
-        return [
-            {
-                key: '0',
-                data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-                children: [
-                    {
-                        key: '0-0',
-                        data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' },
-                        children: [
-                            {
-                                key: '0-0-0',
-                                data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' },
-                            },
-                            {
-                                key: '0-0-1',
-                                data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' },
-                            }
-                        ]
-                    },
-                    {
-                        key: '0-1',
-                        data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' },
-                    }
-                ]
-            },
-            {
-                key: '1',
-                data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
-                children: [
-                    {
-                        key: '1-0',
-                        data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' },
-                    },
-                    {
-                        key: '1-1',
-                        data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' },
-                    }
-                ]
-            },
-            {
-                key: '2',
-                data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
-                children: [
-                    {
-                        key: '2-0',
-                        data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' },
-                    },
-                    {
-                        key: '2-1',
-                        data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' },
-                    }
-                ]
-            },
-            {
-                key: '3',
-                data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
-                children: [
-                    {
-                        key: '3-0',
-                        data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' },
-                    },
-                    {
-                        key: '3-1',
-                        data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' },
-                    }
-                ]
-            },
-            {
-                key: '4',
-                data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
-                children: [
-                    {
-                        key: '4-0',
-                        data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' },
-                    },
-                    {
-                        key: '4-1',
-                        data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' },
-                    }
-                ]
-            },
-            {
-                key: '5',
-                data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
-                children: [
-                    {
-                        key: '5-0',
-                        data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' },
-                    },
-                    {
-                        key: '5-1',
-                        data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' },
-                    }
-                ]
-            },
-            {
-                key: '6',
-                data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
-                children: [
-                    {
-                        key: '6-0',
-                        data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' },
-                    },
-                    {
-                        key: '6-1',
-                        data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' },
-                    }
-                ]
-            },
-            {
-                key: '7',
-                data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
-                children: [
-                    {
-                        key: '7-0',
-                        data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' },
-                    },
-                    {
-                        key: '7-1',
-                        data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' },
-                    }
-                ]
-            },
-            {
-                key: '8',
-                data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
-                children: [
-                    {
-                        key: '8-0',
-                        data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' },
-                    },
-                    {
-                        key: '8-1',
-                        data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' },
-                    }
-                ]
-            },
-            {
-                key: '9',
-                data:  { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
-                children: [
-                    {
-                        key: '9-0',
-                        data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' },
-                    },
-                    {
-                        key: '9-1',
-                        data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' },
-                    }
-                ]
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.setState({
-            nodes: this.getSales()
-        });
-    }
-
-    render() {
-        const headerGroup = (
-            <ColumnGroup>
-                <Row>
-                    <Column header="Brand" rowSpan={3} />
-                    <Column header="Sale Rate" colSpan={4} />
-                </Row>
-                <Row>
-                    <Column header="Sales" colSpan={2} />
-                    <Column header="Profits" colSpan={2} />
-                </Row>
-                <Row>
-                    <Column header="Last Year" />
-                    <Column header="This Year" />
-                    <Column header="Last Year" />
-                    <Column header="This Year" />
-                </Row>
-            </ColumnGroup>
-        );
-
-        const footerGroup = (
-            <ColumnGroup>
-                <Row>
-                    <Column footer="Totals:" colSpan={3} />
-                    <Column footer="$506,202" />
-                    <Column footer="$531,020" />
-                </Row>
-            </ColumnGroup>
-        );
-
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Grouping</h1>
-                        <p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components that both define an array of columns each having colspan and rowspan.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup}>
-                        <Column field="brand" expander />
-                        <Column field="lastYearSale" />
-                        <Column field="thisYearSale" />
-                        <Column field="lastYearProfit" />
-                        <Column field="thisYearProfit" />
-                    </TreeTable>
-                </div>
-
-                <TreeTableColGroupDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableColGroupDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { ColumnGroup } from 'primereact/columngroup';
-import { Row } from 'primereact/row';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableColGroupDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    getSales() {
-        return [
-            {
-                key: '0',
-                data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-                children: [
-                    {
-                        key: '0-0',
-                        data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' },
-                        children: [
-                            {
-                                key: '0-0-0',
-                                data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' },
-                            },
-                            {
-                                key: '0-0-1',
-                                data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' },
-                            }
-                        ]
-                    },
-                    {
-                        key: '0-1',
-                        data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' },
-                    }
-                ]
-            },
-            {
-                key: '1',
-                data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
-                children: [
-                    {
-                        key: '1-0',
-                        data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' },
-                    },
-                    {
-                        key: '1-1',
-                        data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' },
-                    }
-                ]
-            },
-            {
-                key: '2',
-                data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
-                children: [
-                    {
-                        key: '2-0',
-                        data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' },
-                    },
-                    {
-                        key: '2-1',
-                        data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' },
-                    }
-                ]
-            },
-            {
-                key: '3',
-                data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
-                children: [
-                    {
-                        key: '3-0',
-                        data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' },
-                    },
-                    {
-                        key: '3-1',
-                        data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' },
-                    }
-                ]
-            },
-            {
-                key: '4',
-                data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
-                children: [
-                    {
-                        key: '4-0',
-                        data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' },
-                    },
-                    {
-                        key: '4-1',
-                        data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' },
-                    }
-                ]
-            },
-            {
-                key: '5',
-                data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
-                children: [
-                    {
-                        key: '5-0',
-                        data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' },
-                    },
-                    {
-                        key: '5-1',
-                        data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' },
-                    }
-                ]
-            },
-            {
-                key: '6',
-                data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
-                children: [
-                    {
-                        key: '6-0',
-                        data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' },
-                    },
-                    {
-                        key: '6-1',
-                        data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' },
-                    }
-                ]
-            },
-            {
-                key: '7',
-                data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
-                children: [
-                    {
-                        key: '7-0',
-                        data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' },
-                    },
-                    {
-                        key: '7-1',
-                        data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' },
-                    }
-                ]
-            },
-            {
-                key: '8',
-                data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
-                children: [
-                    {
-                        key: '8-0',
-                        data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' },
-                    },
-                    {
-                        key: '8-1',
-                        data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' },
-                    }
-                ]
-            },
-            {
-                key: '9',
-                data:  { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
-                children: [
-                    {
-                        key: '9-0',
-                        data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' },
-                    },
-                    {
-                        key: '9-1',
-                        data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' },
-                    }
-                ]
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.setState({
-            nodes: this.getSales()
-        });
-    }
-
-    render() {
-        const headerGroup = (
-            <ColumnGroup>
-                <Row>
-                    <Column header="Brand" rowSpan={3} />
-                    <Column header="Sale Rate" colSpan={4} />
-                </Row>
-                <Row>
-                    <Column header="Sales" colSpan={2} />
-                    <Column header="Profits" colSpan={2} />
-                </Row>
-                <Row>
-                    <Column header="Last Year" />
-                    <Column header="This Year" />
-                    <Column header="Last Year" />
-                    <Column header="This Year" />
-                </Row>
-            </ColumnGroup>
-        );
-
-        const footerGroup = (
-            <ColumnGroup>
-                <Row>
-                    <Column footer="Totals:" colSpan={3} />
-                    <Column footer="$506,202" />
-                    <Column footer="$531,020" />
-                </Row>
-            </ColumnGroup>
-        );
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Grouping</h1>
-                        <p>Columns can be grouped at header and footer using headerColumnGroup and footerColumnGroup components that both define an array of columns each having colspan and rowspan.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup}>
-                        <Column field="brand" expander />
-                        <Column field="lastYearSale" />
-                        <Column field="thisYearSale" />
-                        <Column field="lastYearProfit" />
-                        <Column field="thisYearProfit" />
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableColReorderDemo.js b/src/showcase/treetable/TreeTableColReorderDemo.js
deleted file mode 100644
index fbd77822c8..0000000000
--- a/src/showcase/treetable/TreeTableColReorderDemo.js
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableColReorderDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Reorder</h1>
-                        <p>Order of the columns can be changed using drag and drop.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} reorderableColumns>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableColReorderDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableColReorderDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableColReorderDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Reorder</h1>
-                        <p>Order of the columns can be changed using drag and drop.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} reorderableColumns>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableColResizeDemo.js b/src/showcase/treetable/TreeTableColResizeDemo.js
deleted file mode 100644
index 3848493fda..0000000000
--- a/src/showcase/treetable/TreeTableColResizeDemo.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableColResizeDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Resize</h1>
-                        <p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand".
-                            Fit is the default one and the overall table width does not change when a column is resized whereas in "expand" mode, table width also changes along with the column width.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Fit Mode</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} columnResizeMode="fit">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Expand Mode</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} columnResizeMode="expand">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Scrollable</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} scrollable={true} scrollHeight="200px">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Scrollable with Variable Width</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} scrollable={true} scrollHeight="200px">
-                        <Column field="name" header="Name" expander style={{width:'50%'}}></Column>
-                        <Column field="size" header="Size" style={{width:'30%'}}></Column>
-                        <Column field="type" header="Type" style={{width:'20%'}}></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableColResizeDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableColResizeDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableColResizeDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Resize</h1>
-                        <p>Columns can be resized using drag drop by setting the resizableColumns to true. There are two resize modes; "fit" and "expand".
-                            Fit is the default one and the overall table width does not change when a column is resized whereas in "expand" mode, table width also changes along with the column width.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Fit Mode</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} columnResizeMode="fit">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Expand Mode</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} columnResizeMode="expand">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Scrollable</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} scrollable={true} scrollHeight="200px">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Scrollable with Variable Width</h3>
-                    <TreeTable value={this.state.nodes} resizableColumns={true} scrollable={true} scrollHeight="200px">
-                        <Column field="name" header="Name" expander style={{width:'50%'}}></Column>
-                        <Column field="size" header="Size" style={{width:'30%'}}></Column>
-                        <Column field="type" header="Type" style={{width:'20%'}}></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableColTogglerDemo.js b/src/showcase/treetable/TreeTableColTogglerDemo.js
deleted file mode 100644
index b7ec9c8fd7..0000000000
--- a/src/showcase/treetable/TreeTableColTogglerDemo.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { MultiSelect } from '../../components/multiselect/MultiSelect';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableColTogglerDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        let columns = [
-            {field: 'size', header: 'Size'},
-            {field: 'type', header: 'Type'}
-        ];
-
-        let colOptions = [];
-        for(let col of columns) {
-            colOptions.push({label: col.header, value: col});
-        }
-
-        this.state = {
-            nodes: [],
-            cols: columns,
-            colOptions: colOptions
-        };
-
-        this.nodeservice = new NodeService();
-        this.onColumnToggle = this.onColumnToggle.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onColumnToggle(event) {
-        this.setState({cols: event.value});
-    }
-
-    render() {
-        const header = (
-            <div style={{textAlign:'left'}}>
-                <MultiSelect value={this.state.cols} options={this.state.colOptions} onChange={this.onColumnToggle}
-                        style={{width:'250px'}}/>
-            </div>
-        );
-
-        const columns = this.state.cols.map((col, i) => {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Toggler</h1>
-                        <p>MultiSelect component can be used to implement column toggler functionality.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} header={header}>
-                        <Column key="name" field="name" header="Name" expander />
-                        {columns}
-                    </TreeTable>
-                </div>
-
-                <TreeTableColTogglerDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableColTogglerDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { MultiSelect } from 'primereact/multiselect';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableColTogglerDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        let columns = [
-            {field: 'size', header: 'Size'},
-            {field: 'type', header: 'Type'}
-        ];
-
-        let colOptions = [];
-        for(let col of columns) {
-            colOptions.push({label: col.header, value: col});
-        }
-
-        this.state = {
-            nodes: [],
-            cols: columns,
-            colOptions: colOptions
-        };
-
-        this.nodeservice = new NodeService();
-        this.onColumnToggle = this.onColumnToggle.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onColumnToggle(event) {
-        this.setState({cols: event.value});
-    }
-
-    render() {
-        const header = (
-            <div style={{textAlign:'left'}}>
-                <MultiSelect value={this.state.cols} options={this.state.colOptions} onChange={this.onColumnToggle}
-                        style={{width:'250px'}}/>
-            </div>
-        );
-
-        const columns = this.state.cols.map((col, i) => {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Column Toggler</h1>
-                        <p>MultiSelect component can be used to implement column toggler functionality.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} header={header}>
-                        <Column key="name" field="name" header="Name" expander />
-                        {columns}
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableContextMenuDemo.js b/src/showcase/treetable/TreeTableContextMenuDemo.js
deleted file mode 100644
index c3a0a764aa..0000000000
--- a/src/showcase/treetable/TreeTableContextMenuDemo.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { ContextMenu } from '../../components/contextmenu/ContextMenu';
-import { Growl } from '../../components/growl/Growl';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableContextMenuDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: {},
-            selectedNodeKey: null,
-            menu: [
-                {
-                    label: 'View Key',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.growl.show({severity: 'success', summary: 'Node Key', detail: this.state.selectedNodeKey});
-                    }
-                },
-                {
-                    label: 'Toggle',
-                    icon: 'pi pi-cog',
-                    command: () => {
-                        let expandedKeys = {...this.state.expandedKeys};
-                        if (expandedKeys[this.state.selectedNodeKey])
-                            delete expandedKeys[this.state.selectedNodeKey];
-                        else
-                            expandedKeys[this.state.selectedNodeKey] = true;
-
-                        this.setState({expandedKeys: expandedKeys});
-                    }
-                }
-            ]
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - ContextMenu</h1>
-                        <p>TreeTable has exclusive integration with ContextMenu.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <ContextMenu model={this.state.menu} ref={el => this.cm = el} onHide={() => this.setState({selectedNodeKey: null})}/>
-
-                    <TreeTable value={this.state.nodes}  expandedKeys={this.state.expandedKeys} onToggle={e => this.setState({expandedKeys: e.value})}
-                        contextMenuSelectionKey={this.state.selectedNodeKey} onContextMenuSelectionChange={event => this.setState({selectedNodeKey: event.value})}
-                        onContextMenu={event => this.cm.show(event.originalEvent)}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableContextMenuDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableContextMenuDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { ContextMenu } from 'primereact/contextmenu';
-import { Growl } from 'primereact/growl';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableContextMenuDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: {},
-            selectedNodeKey: null,
-            menu: [
-                {
-                    label: 'View Key',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.growl.show({severity: 'success', summary: 'Node Key', detail: this.state.selectedNodeKey});
-                    }
-                },
-                {
-                    label: 'Toggle',
-                    icon: 'pi pi-cog',
-                    command: () => {
-                        let expandedKeys = {...this.state.expandedKeys};
-                        if (expandedKeys[this.state.selectedNodeKey])
-                            delete expandedKeys[this.state.selectedNodeKey];
-                        else
-                            expandedKeys[this.state.selectedNodeKey] = true;
-
-                        this.setState({expandedKeys: expandedKeys});
-                    }
-                }
-            ]
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - ContextMenu</h1>
-                        <p>TreeTable has exclusive integration with ContextMenu.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <ContextMenu model={this.state.menu} ref={el => this.cm = el} onHide={() => this.setState({selectedNodeKey: null})}/>
-
-                    <TreeTable value={this.state.nodes}  expandedKeys={this.state.expandedKeys} onToggle={e => this.setState({expandedKeys: e.value})}
-                        contextMenuSelectionKey={this.state.selectedNodeKey} onContextMenuSelectionChange={event => this.setState({selectedNodeKey: event.value})}
-                        onContextMenu={event => this.cm.show(event.originalEvent)}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableDemo.js b/src/showcase/treetable/TreeTableDemo.js
deleted file mode 100644
index d58d95433b..0000000000
--- a/src/showcase/treetable/TreeTableDemo.js
+++ /dev/null
@@ -1,2717 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { Button } from '../../components/button/Button';
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: {}
-        };
-        this.nodeservice = new NodeService();
-        this.toggleApplications = this.toggleApplications.bind(this);
-    }
-
-    toggleApplications() {
-        let expandedKeys = {...this.state.expandedKeys};
-        if (expandedKeys['0'])
-            delete expandedKeys['0'];
-        else
-            expandedKeys['0'] = true;
-
-        this.setState({expandedKeys: expandedKeys});
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable</h1>
-                        <p>TreeTable is used to display hierarchical data in tabular format.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Uncontrolled</h3>
-                    <TreeTable value={this.state.nodes}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Controlled</h3>
-                    <Button onClick={this.toggleApplications} label="Toggle Applications" />
-                    <TreeTable value={this.state.nodes} expandedKeys={this.state.expandedKeys}
-                        onToggle={e => this.setState({expandedKeys: e.value})} style={{marginTop: '.5em'}}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableDoc />
-            </div>
-        )
-    }
-}
-
-export class TreeTableDoc extends Component {
-
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-                        <CodeHighlight className="language-javascript">
-                            {`
-import {TreeTable} from 'primereact/treetable';
-
-`}
-                        </CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>TreeTable component requires an array of TreeNode objects as its <i>value</i> and columns defined with one or more Column components.</p>
-
-                        <h3>TreeNode API</h3>
-                        <p>Following properties of the API are currently utilized by the TreeTable.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>key</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Unique key of the node.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>data</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Data represented by the node.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>children</td>
-                                        <td>TreeNode[]</td>
-                                        <td>null</td>
-                                        <td>An array of treenodes as children.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Inline style of the node.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the node.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>selectable</td>
-                                        <td>boolean</td>
-                                        <td>null</td>
-                                        <td>Whether the node is selectable when selection mode is enabled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>leaf</td>
-                                        <td>boolean</td>
-                                        <td>null</td>
-                                        <td>Specifies if the node has children. Used in lazy loading.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <p>Here is a sample json response to serve as the datasource of the TreeTable.</p>
-<div style={{height: '400px', overflow: 'auto'}}>
-<CodeHighlight className="language-javascript">
-{`
-{
-    "root":
-    [
-        {
-            "key": "0",
-            "data":{
-                "name":"Applications",
-                "size":"100kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "0-0",
-                    "data":{
-                        "name":"React",
-                        "size":"25kb",
-                        "type":"Folder"
-                    },
-                    "children":[
-                        {
-                            "key": "0-0-0",
-                            "data":{
-                                "name":"react.app",
-                                "size":"10kb",
-                                "type":"Application"
-                            }
-                        },
-                        {
-                            "key": "0-0-1",
-                            "data":{
-                                "name":"native.app",
-                                "size":"10kb",
-                                "type":"Application"
-                            }
-                        },
-                        {
-                            "key": "0-0-2",
-                            "data":{
-                                "name":"mobile.app",
-                                "size":"5kb",
-                                "type":"Application"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "key": "0-1",
-                    "data":{
-                        "name":"editor.app",
-                        "size":"25kb",
-                        "type":"Application"
-                    }
-                },
-                {
-                    "key": "0-2",
-                    "data":{
-                        "name":"settings.app",
-                        "size":"50kb",
-                        "type":"Application"
-                    }
-                }
-            ]
-        },
-        {
-            "key": "1",
-            "data":{
-                "name":"Cloud",
-                "size":"20kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "1-0",
-                    "data":{
-                        "name":"backup-1.zip",
-                        "size":"10kb",
-                        "type":"Zip"
-                    }
-                },
-                {
-                    "key": "1-1",
-                    "data":{
-                        "name":"backup-2.zip",
-                        "size":"10kb",
-                        "type":"Zip"
-                    }
-                }
-            ]
-        },
-        {
-            "key": "2",
-            "data": {
-                "name":"Desktop",
-                "size":"150kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "2-0",
-                    "data":{
-                        "name":"note-meeting.txt",
-                        "size":"50kb",
-                        "type":"Text"
-                    }
-                },
-                {
-                    "key": "2-1",
-                    "data":{
-                        "name":"note-todo.txt",
-                        "size":"100kb",
-                        "type":"Text"
-                    }
-                }
-            ]
-        },
-        {
-            "key": "3",
-            "data":{
-                "name":"Documents",
-                "size":"75kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "3-0",
-                    "data":{
-                        "name":"Work",
-                        "size":"55kb",
-                        "type":"Folder"
-                    },
-                    "children":[
-                        {
-                            "key": "3-0-0",
-                            "data":{
-                                "name":"Expenses.doc",
-                                "size":"30kb",
-                                "type":"Document"
-                            }
-                        },
-                        {
-                            "key": "3-0-1",
-                            "data":{
-                                "name":"Resume.doc",
-                                "size":"25kb",
-                                "type":"Resume"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "key": "3-1",
-                    "data":{
-                        "name":"Home",
-                        "size":"20kb",
-                        "type":"Folder"
-                    },
-                    "children":[
-                        {
-                            "key": "3-1-0",
-                            "data":{
-                                "name":"Invoices",
-                                "size":"20kb",
-                                "type":"Text"
-                            }
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            "key": "4",
-            "data": {
-                "name":"Downloads",
-                "size":"25kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "4-0",
-                    "data": {
-                        "name":"Spanish",
-                        "size":"10kb",
-                        "type":"Folder"
-                    },
-                    "children":[
-                        {
-                            "key": "4-0-0",
-                            "data":{
-                                "name":"tutorial-a1.txt",
-                                "size":"5kb",
-                                "type":"Text"
-                            }
-                        },
-                        {
-                            "key": "4-0-1",
-                            "data":{
-                                "name":"tutorial-a2.txt",
-                                "size":"5kb",
-                                "type":"Text"
-                            }
-                        }
-                    ]
-                },
-                {
-                    "key": "4-1",
-                    "data":{
-                        "name":"Travel",
-                        "size":"15kb",
-                        "type":"Text"
-                    },
-                    "children":[
-                        {
-                            "key": "4-1-0",
-                            "data":{
-                                "name":"Hotel.pdf",
-                                "size":"10kb",
-                                "type":"PDF"
-                            }
-                        },
-                        {
-                            "key": "4-1-1",
-                            "data":{
-                                "name":"Flight.pdf",
-                                "size":"5kb",
-                                "type":"PDF"
-                            }
-                        }
-                    ]
-                }
-            ]
-        },
-        {
-            "key": "5",
-            "data": {
-                "name":"Main",
-                "size":"50kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "5-0",
-                    "data":{
-                        "name":"bin",
-                        "size":"50kb",
-                        "type":"Link"
-                    }
-                },
-                {
-                    "key": "5-1",
-                    "data":{
-                        "name":"etc",
-                        "size":"100kb",
-                        "type":"Link"
-                    }
-                },
-                {
-                    "key": "5-2",
-                    "data":{
-                        "name":"var",
-                        "size":"100kb",
-                        "type":"Link"
-                    }
-                }
-            ]
-        },
-        {
-            "key": "6",
-            "data":{
-                "name":"Other",
-                "size":"5kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "6-0",
-                    "data":{
-                        "name":"todo.txt",
-                        "size":"3kb",
-                        "type":"Text"
-                    }
-                },
-                {
-                    "key": "6-1",
-                    "data":{
-                        "name":"logo.png",
-                        "size":"2kb",
-                        "type":"Picture"
-                    }
-                }
-            ]
-        },
-        {
-            "key": "7",
-            "data":{
-                "name":"Pictures",
-                "size":"150kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "7-0",
-                    "data":{
-                        "name":"barcelona.jpg",
-                        "size":"90kb",
-                        "type":"Picture"
-                    }
-                },
-                {
-                    "key": "7-1",
-                    "data":{
-                        "name":"primeng.png",
-                        "size":"30kb",
-                        "type":"Picture"
-                    }
-                },
-                {
-                    "key": "7-2",
-                    "data":{
-                        "name":"prime.jpg",
-                        "size":"30kb",
-                        "type":"Picture"
-                    }
-                }
-            ]
-        },
-        {
-            "key": "8",
-            "data":{
-                "name":"Videos",
-                "size":"1500kb",
-                "type":"Folder"
-            },
-            "children":[
-                {
-                    "key": "8-0",
-                    "data":{
-                        "name":"primefaces.mkv",
-                        "size":"1000kb",
-                        "type":"Video"
-                    }
-                },
-                {
-                    "key": "8-1",
-                    "data":{
-                        "name":"intro.avi",
-                        "size":"500kb",
-                        "type":"Video"
-                    }
-                }
-            ]
-        }
-    ]
-}
-
-`}
-</CodeHighlight>
-</div>
-
-                        <p>Throughout the samples, a NodeService would be used to connect to a server to fetch the nodes with axios.
-                        Note that this is only for demo purposes, TreeTable does not have any restrictions on how data is provided.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import axios from 'axios';
-
-export class NodeService {
-
-    getTreeTableNodes() {
-        return axios.get('showcase/resources/demo/data/treetablenodes.json')
-                .then(res => res.data.root);
-    }
-
-}
-
-`}
-</CodeHighlight>
-
-                        <p>Following sample TreeTable has 3 columns and retrieves the data from the service on componentDidMount. Notice the <i>expander</i> property
-                        in the name column to indicate that this column displays an icon to toggle the child nodes.</p>
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.nodes}>
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <p>Dynamic columns are also possible by creating the column component dynamically.</p>
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        let cols = [
-            {field: 'name', header: 'Name'},
-            {field: 'size', header: 'Size'},
-            {field: 'type', header: 'Type'}
-        ];
-
-        let dynamicColumns = cols.map((col,i) => {
-            return <Column key={col.field} field={col.field} header={col.header} />;
-        });
-
-        return (
-            <TreeTable value={this.state.nodes}>
-                {dynamicColumns}
-            </TreeTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                        <h3>Column Component</h3>
-                        <p>Column component defines various options that are utilized by the TreeTable to specify corresponding features.</p>
-
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Type</th>
-                                        <th>Default</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>columnKey</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Identifier of a column if field property is not defined. Only utilized by reorderableColumns feature at the moment.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>field</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Property of a row data.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortField</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Property of a row data used for sorting, defaults to field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>header</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Header content of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>body</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Body content of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>footer</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Footer content of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortable</td>
-                                        <td>any</td>
-                                        <td>false</td>
-                                        <td>Defines if a column is sortable.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortFunction</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Sort function for custom sorting.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filter</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Defines if a column can be filtered.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterMatchMode</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Defines filterMatchMode; "startsWith", "contains", "endsWidth", "equals", "notEquals", "in" and "custom".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterType</td>
-                                        <td>string</td>
-                                        <td>text</td>
-                                        <td>Type of the filter input field.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterPlaceholder</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Defines placeholder of the input fields.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterLocale</td>
-                                        <td>string</td>
-                                        <td>undefined</td>
-                                        <td>Locale to use in filtering. The default locale is the host environment's current locale.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterMaxlength</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Specifies the maximum number of characters allowed in the filter element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterElement</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Element for custom filtering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterFunction</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Custom filter function.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterHeaderStyle</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the filter column header.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterHeaderClassName</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the filter header column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>headerStyle</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>headerClassName</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>bodyStyle</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>bodyClassName</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>footerStyle</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>footerClassName</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Style class of the column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>expander</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Displays an icon to toggle expansion of children.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>frozen</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Whether the column is fixed in horizontal scrolling or not.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>colSpan</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Number of columns to span for grouping.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>rowSpan</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Number of rows to span for grouping.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>editor</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Function to provide the cell editor input.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>editorValidator</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Validator function to validate the cell input value.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>reorderable</td>
-                                        <td>boolean</td>
-                                        <td>null</td>
-                                        <td>Used to defined reorderableColumns per column when reorderableColumns of table is enabled, defaults to value of reorderableColumns.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Controlled vs Uncontrolled</h3>
-                        <p>Expansion state is managed in two ways, in uncontrolled mode only initial expanded state of a node can be defined using <i>expandedKeys</i> property whereas in controlled mode <i>expandedKeys</i>
-                        property along with <i>onToggle</i> properties are used for full control over the state. If you need to expand or collapse the state of nodes programmatically then controlled mode should be used. Example below demonstrates
-                        both cases;</p>
-
-                    <CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { Button } from 'primereact/button';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: []
-        };
-        this.nodeservice = new NodeService();
-        this.toggleApplications = this.toggleApplications.bind(this);
-    }
-
-    toggleApplications() {
-        let expandedKeys = {...this.state.expandedKeys};
-        if (expandedKeys['0'])
-            delete expandedKeys['0'];
-        else
-            expandedKeys['0'] = true;
-
-        this.setState({expandedKeys: expandedKeys});
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <h3>Uncontrolled</h3>
-                <TreeTable value={this.state.nodes}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
-                </TreeTable>
-
-                <h3>Controlled</h3>
-                <Button onClick={this.toggleApplications} label="Toggle Applications" />
-                <TreeTable value={this.state.nodes} expandedKeys={this.state.expandedKeys}
-                    onToggle={e => this.setState({expandedKeys: e.value})} style={{marginTop: '.5em'}}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
-                </TreeTable>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Table Layout</h3>
-                        <p>Default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents
-                            set <i>autoLayout</i> property to true. Note that auto layout cannot be supported in Scrollable or Resizable columns.
-                        </p>
-
-                        <h3>Templates</h3>
-                        <p>Field data of a corresponding row is displayed as the cell content by default, this can be customized using templating where current row data and column properties are passed to the body template.
-                            On the other hand, <i>header</i> and <i>footer</i> properties of a column are used to define the content of these sections by accepting either simple string values or JSX for advanced content. Similarly TreeTable itself
-                            also provides <i>header</i> and <i>footer</i> properties for the main header and footer of the table.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { Button } from 'primereact/button';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableTemplatingDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.actionTemplate = this.actionTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    actionTemplate(node, column) {
-        return <div>
-            <Button type="button" icon="pi pi-search" className="p-button-success" style={{marginRight: '.5em'}}></Button>
-            <Button type="button" icon="pi pi-pencil" className="p-button-warning"></Button>
-        </div>;
-    }
-
-    render() {
-        const header = "File Viewer";
-        const footer = <div style={{textAlign:'left'}}><Button icon="pi pi-refresh" tooltip="Reload"/></div>;
-
-        return (
-            <TreeTable value={this.state.nodes} header={header} footer={footer}>
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-                <Column body={this.actionTemplate} style={{textAlign:'center', width: '8em'}}/>
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Column Group</h3>
-                        <p>Columns can be grouped at header and footer sections by defining a ColumnGroup component as the <i>headerColumnGroup</i> and <i>footerColumnGroup</i> properties.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { ColumnGroup } from 'primereact/columngroup';
-import { Row } from 'primereact/row';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableColGroupDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    getSales() {
-        return [
-            {
-                key: '0',
-                data: { brand: 'Bliss', lastYearSale: '51%', thisYearSale: '40%', lastYearProfit: '$54,406.00', thisYearProfit: '$43,342'},
-                children: [
-                    {
-                        key: '0-0',
-                        data: { brand: 'Product A', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$34,406.00', thisYearProfit: '$23,342' },
-                        children: [
-                            {
-                                key: '0-0-0',
-                                data: { brand: 'Product A-1', lastYearSale: '20%', thisYearSale: '10%', lastYearProfit: '$24,406.00', thisYearProfit: '$13,342' },
-                            },
-                            {
-                                key: '0-0-1',
-                                data: { brand: 'Product A-2', lastYearSale: '5%', thisYearSale: '10%', lastYearProfit: '$10,000.00', thisYearProfit: '$10,000' },
-                            }
-                        ]
-                    },
-                    {
-                        key: '0-1',
-                        data: { brand: 'Product B', lastYearSale: '26%', thisYearSale: '20%', lastYearProfit: '$24,000.00', thisYearProfit: '$23,000' },
-                    }
-                ]
-            },
-            {
-                key: '1',
-                data: { brand: 'Fate', lastYearSale: '83%', thisYearSale: '96%', lastYearProfit: '$423,132', thisYearProfit: '$312,122' },
-                children: [
-                    {
-                        key: '1-0',
-                        data: { brand: 'Product X', lastYearSale: '50%', thisYearSale: '40%', lastYearProfit: '$223,132', thisYearProfit: '$156,061' },
-                    },
-                    {
-                        key: '1-1',
-                        data: { brand: 'Product Y', lastYearSale: '33%', thisYearSale: '56%', lastYearProfit: '$200,000', thisYearProfit: '$156,061' },
-                    }
-                ]
-            },
-            {
-                key: '2',
-                data: { brand: 'Ruby', lastYearSale: '38%', thisYearSale: '5%', lastYearProfit: '$12,321', thisYearProfit: '$8,500' },
-                children: [
-                    {
-                        key: '2-0',
-                        data: { brand: 'Product M', lastYearSale: '18%', thisYearSale: '2%', lastYearProfit: '$10,300', thisYearProfit: '$5,500' },
-                    },
-                    {
-                        key: '2-1',
-                        data: { brand: 'Product N', lastYearSale: '20%', thisYearSale: '3%', lastYearProfit: '$2,021', thisYearProfit: '$3,000' },
-                    }
-                ]
-            },
-            {
-                key: '3',
-                data: { brand: 'Sky', lastYearSale: '49%', thisYearSale: '22%', lastYearProfit: '$745,232', thisYearProfit: '$650,323' },
-                children: [
-                    {
-                        key: '3-0',
-                        data: { brand: 'Product P', lastYearSale: '20%', thisYearSale: '16%', lastYearProfit: '$345,232', thisYearProfit: '$350,000' },
-                    },
-                    {
-                        key: '3-1',
-                        data: { brand: 'Product R', lastYearSale: '29%', thisYearSale: '6%', lastYearProfit: '$400,009', thisYearProfit: '$300,323' },
-                    }
-                ]
-            },
-            {
-                key: '4',
-                data: { brand: 'Comfort', lastYearSale: '17%', thisYearSale: '79%', lastYearProfit: '$643,242', thisYearProfit: '500,332' },
-                children: [
-                    {
-                        key: '4-0',
-                        data: { brand: 'Product S', lastYearSale: '10%', thisYearSale: '40%', lastYearProfit: '$243,242', thisYearProfit: '$100,000' },
-                    },
-                    {
-                        key: '4-1',
-                        data: { brand: 'Product T', lastYearSale: '7%', thisYearSale: '39%', lastYearProfit: '$400,00', thisYearProfit: '$400,332' },
-                    }
-                ]
-            },
-            {
-                key: '5',
-                data: { brand: 'Merit', lastYearSale: '52%', thisYearSale: ' 65%', lastYearProfit: '$421,132', thisYearProfit: '$150,005' },
-                children: [
-                    {
-                        key: '5-0',
-                        data: { brand: 'Product L', lastYearSale: '20%', thisYearSale: '40%', lastYearProfit: '$121,132', thisYearProfit: '$100,000' },
-                    },
-                    {
-                        key: '5-1',
-                        data: { brand: 'Product G', lastYearSale: '32%', thisYearSale: '25%', lastYearProfit: '$300,000', thisYearProfit: '$50,005' },
-                    }
-                ]
-            },
-            {
-                key: '6',
-                data: { brand: 'Violet', lastYearSale: '82%', thisYearSale: '12%', lastYearProfit: '$131,211', thisYearProfit: '$100,214' },
-                children: [
-                    {
-                        key: '6-0',
-                        data: { brand: 'Product SH1', lastYearSale: '30%', thisYearSale: '6%', lastYearProfit: '$101,211', thisYearProfit: '$30,214' },
-                    },
-                    {
-                        key: '6-1',
-                        data: { brand: 'Product SH2', lastYearSale: '52%', thisYearSale: '6%', lastYearProfit: '$30,000', thisYearProfit: '$70,000' },
-                    }
-                ]
-            },
-            {
-                key: '7',
-                data: { brand: 'Dulce', lastYearSale: '44%', thisYearSale: '45%', lastYearProfit: '$66,442', thisYearProfit: '$53,322' },
-                children: [
-                    {
-                        key: '7-0',
-                        data: { brand: 'Product PN1', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$20,000' },
-                    },
-                    {
-                        key: '7-1',
-                        data: { brand: 'Product PN2', lastYearSale: '22%', thisYearSale: '25%', lastYearProfit: '$33,221', thisYearProfit: '$33,322' },
-                    }
-                ]
-            },
-            {
-                key: '8',
-                data: { brand: 'Solace', lastYearSale: '90%', thisYearSale: '56%', lastYearProfit: '$765,442', thisYearProfit: '$296,232' },
-                children: [
-                    {
-                        key: '8-0',
-                        data: { brand: 'Product HT1', lastYearSale: '60%', thisYearSale: '36%', lastYearProfit: '$465,000', thisYearProfit: '$150,653' },
-                    },
-                    {
-                        key: '8-1',
-                        data: { brand: 'Product HT2', lastYearSale: '30%', thisYearSale: '20%', lastYearProfit: '$300,442', thisYearProfit: '$145,579' },
-                    }
-                ]
-            },
-            {
-                key: '9',
-                data:  { brand: 'Essence', lastYearSale: '75%', thisYearSale: '54%', lastYearProfit: '$21,212', thisYearProfit: '$12,533' },
-                children: [
-                    {
-                        key: '9-0',
-                        data: { brand: 'Product TS1', lastYearSale: '50%', thisYearSale: '34%', lastYearProfit: '$11,000', thisYearProfit: '$8,562' },
-                    },
-                    {
-                        key: '9-1',
-                        data: { brand: 'Product TS2', lastYearSale: '25%', thisYearSale: '20%', lastYearProfit: '$11,212', thisYearProfit: '$3,971' },
-                    }
-                ]
-            }
-        ];
-    }
-
-    componentDidMount() {
-        this.setState({
-            nodes: this.getSales()
-        });
-    }
-
-    render() {
-        const headerGroup = (
-            <ColumnGroup>
-                <Row>
-                    <Column header="Brand" rowSpan={3} />
-                    <Column header="Sale Rate" colSpan={4} />
-                </Row>
-                <Row>
-                    <Column header="Sales" colSpan={2} />
-                    <Column header="Profits" colSpan={2} />
-                </Row>
-                <Row>
-                    <Column header="Last Year" />
-                    <Column header="This Year" />
-                    <Column header="Last Year" />
-                    <Column header="This Year" />
-                </Row>
-            </ColumnGroup>
-        );
-
-        const footerGroup = (
-            <ColumnGroup>
-                <Row>
-                    <Column footer="Totals:" colSpan={3} />
-                    <Column footer="$506,202" />
-                    <Column footer="$531,020" />
-                </Row>
-            </ColumnGroup>
-        );
-
-        return (
-            <TreeTable value={this.state.nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup}>
-                <Column field="brand" expander />
-                <Column field="lastYearSale" />
-                <Column field="thisYearSale" />
-                <Column field="lastYearProfit" />
-                <Column field="thisYearProfit" />
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Pagination</h3>
-                        <p>Pagination is enabled by setting <i>paginator</i> property to true, <i>rows</i> property defines the number of rows per page and optionally <i>pageLinks</i> specify the the number of page links to display.
-                        See <Link to="/paginator">paginator</Link> component for more information about further customization options such as <i>paginatorTemplate</i>.</p>
-
-                        <p>Pagination can either be used in <b>Controlled</b> or <b>Uncontrolled</b> manner. In controlled mode, <i>first</i> and <i>onPage</i> properties need to be defined to control the paginator state.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-
-export class TreeTablePageDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            first: 0
-        };
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.nodes} paginator={true} rows={10}
-                first={this.state.first} onPage={e => this.setState({first: e.first})}>
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <p>In uncontrolled mode, only <i>paginator</i> and <i>rows</i> need to be enabled. Index of the first record can be still be provided using the <i>first</i> property in uncontrolled mode however
-                        it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the paginator state, prefer to use the component as controlled.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-
-export class TreeTablePageDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.nodes} paginator={true} rows={10}>
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <p>Elements of the paginator can be customized using the <i>paginatorTemplate</i> by the TreeTable. Refer to the template section of the <Link to="/paginator"> paginator documentation</Link> for further options.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} paginator={true} rows={10}
-    paginatorTemplate="RowsPerPageDropdown PageLinks FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <h3>Sorting</h3>
-                        <p>Enabling <i>sortable</i> property at column component would be enough to make a column sortable. The property to use when sorting is <i>field</i> by default and can be customized using <i>sortField</i>.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<Column field="vin" header="Vin" sortable />
-
-`}
-</CodeHighlight>
-
-                        <p>By default sorting is executed on the clicked column only. To enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} sortMode="multiple">
-
-`}
-</CodeHighlight>
-
-                        <p>In case you'd like to display the table as sorted per a single column by default on mount, use <i>sortField</i> and <i>sortOrder</i> properties in <b>Controlled</b> or <b>Uncontrolled</b> manner.
-                        In controlled mode, <i>sortField</i>, <i>sortOrder</i> and <i>onSort</i> properties need to be defined to control the sorting state.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} sortField={this.state.sortField} sortOrder={this.state.sortOrder} onSort={(e) => this.setState({sortField: e.sortField, sortOrder: e.sortOrder})}>
-    <Column field="name" header="Name" expander sortable></Column>
-    <Column field="size" header="Size" sortable></Column>
-    <Column field="type" header="Type" sortable></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>In multiple mode, use the <i>multiSortMeta</i> property and bind an array of SortMeta objects instead.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} multiSortMeta={multiSortMeta} onSort={(e) => this.setState({multiSortMeta: e.multiSortMeta})}>
-    <Column field="name" header="Name" expander sortable></Column>
-    <Column field="size" header="Size" sortable></Column>
-    <Column field="type" header="Type" sortable></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-let multiSortMeta = [];
-multiSortMeta.push({field: 'year', order: 1});
-multiSortMeta.push({field: 'brand', order: -1});
-
-`}
-</CodeHighlight>
-
-                        <p>In uncontrolled mode, no additional properties need to be enabled. Initial sort field can be still be provided using the <i>sortField</i> property in uncontrolled mode however
-                        it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the sorting state, prefer to use the component as controlled.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} sortField="year">
-    <Column field="name" header="Name" expander sortable></Column>
-    <Column field="size" header="Size" sortable></Column>
-    <Column field="type" header="Type" sortable></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>To customize sorting algorithm, set sortable option to custom and define a sortFunction that sorts the list.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} sortField="year">
-    <Column field="name" header="Name" expander sortable></Column>
-    <Column field="size" header="Size" sortable="custom" sortFunction={this.mysort}></Column>
-    <Column field="type" header="Type" sortable></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-mysort(event) {
-    //event.field = Field to sort
-    //event.order = Sort order
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Filtering</h3>
-                        <p>Filtering is enabled by setting the <i>filter</i> property on a column. <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand,
-                        in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-<TreeTable value={this.state.nodes}>
-    <Column field="name" header="Name" expander filter={true}></Column>
-    <Column field="size" header="Size" filter={true}></Column>
-    <Column field="type" header="Type" filter={true}></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>An optional global filter feature is available to search all fields with the same keyword,
-                                        to implement this place an input component whose value is bound to the globalFilter property of the TreeTable.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class TreeTableFilterDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            globalFilter: null
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        let header = <div style={{'textAlign':'left'}}>
-                        <i className="pi pi-search" style={{margin:'4px 4px 0 0'}}></i>
-                        <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/>
-                    </div>;
-
-        return (
-            <TreeTable value={this.state.nodes} globalFilter={this.state.globalFilter} header={header}>
-                <Column field="name" header="Name" expander filter={true}></Column>
-                <Column field="size" header="Size" filter={true}></Column>
-                <Column field="type" header="Type" filter={true}></Column>
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <p>By default, input fields are used as filter elements and this can be customized using the <i>filterElement</i> property of the Column that calls the filter function of the table instance by passing the value, field and the match mode.</p>
-<CodeHighlight className="language-javascript">
-{`
-export class TreeTableCustomFilterDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            nodes: [],
-            brand: null,
-            colors: null
-        };
-        this.nodeservice = new NodeService();
-        this.onBrandChange = this.onBrandChange.bind(this);
-        this.onColorChange = this.onColorChange.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onBrandChange(event) {
-        this.tt.filter(event.value, 'brand', 'equals');
-        this.setState({brand: event.value});
-    }
-
-    onColorChange(event) {
-        this.tt.filter(event.value, 'color', 'in');
-        this.setState({colors: event.value});
-    }
-
-    render() {
-        let brands = [
-                {label: 'All Brands', value: null},
-                {label: 'Audi', value: 'Audi'},
-                {label: 'BMW', value: 'BMW'},
-                {label: 'Fiat', value: 'Fiat'},
-                {label: 'Honda', value: 'Honda'},
-                {label: 'Jaguar', value: 'Jaguar'},
-                {label: 'Mercedes', value: 'Mercedes'},
-                {label: 'Renault', value: 'Renault'},
-                {label: 'VW', value: 'VW'},
-                {label: 'Volvo', value: 'Volvo'}
-            ];
-
-        let brandFilter = <Dropdown style={{width: '100%'}} className="ui-column-filter"
-                value={this.state.brand} options={brands} onChange={this.onBrandChange}/>
-
-        let colors = [
-            {label: 'White', value: 'White'},
-            {label: 'Green', value: 'Green'},
-            {label: 'Silver', value: 'Silver'},
-            {label: 'Black', value: 'Black'},
-            {label: 'Red', value: 'Red'},
-            {label: 'Maroon', value: 'Maroon'},
-            {label: 'Brown', value: 'Brown'},
-            {label: 'Orange', value: 'Orange'},
-            {label: 'Blue', value: 'Blue'}
-        ];
-
-        let colorFilter = <MultiSelect style={{width:'100%'}} className="ui-column-filter"
-            value={this.state.colors} options={colors} onChange={this.onColorChange}/>
-
-        return (
-            <TreeTable ref={(el) => this.tt = el} value={this.state.nodes}>
-                <Column field="vin" header="Vin" filter={true} expander />
-                <Column field="year" header="Year" filter={true} />
-                <Column field="brand" header="Brand" filter={true} filterElement={brandFilter} />
-                <Column field="color" header="Color" filter={true} filterElement={colorFilter} />
-            </TreeTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <p>In case you'd like to display the table as filtered by default on mount, use <i>filters</i> property in <b>Controlled</b> or <b>Uncontrolled</b> manner.
-                                    In controlled mode, <i>filters</i> and <i>onFilter</i> properties need to be defined to control the filtering state.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-export class TreeTableDefaultFilteredDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            nodes: [],
-            filters: {
-                'brand': {
-                    value: 'BMW'
-                }
-            }
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.nodes} filters={this.state.filters} onFilter={(e) => this.setState({filters: e.filters})}>
-                <Column field="vin" header="Vin" filter={true} expander />
-                <Column field="year" header="Year" filter={true} />
-                <Column field="brand" header="Brand" filter={true} />
-                <Column field="color" header="Color" filter={true}  />
-            </TreeTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    <p>In uncontrolled filtering, no additional properties need to be enabled. Initial filtering can be still be provided using the <i>filters</i> property in uncontrolled mode however
-                                it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the filtering state, prefer to use the component as controlled.</p>
-
-                    <p>Custom filtering is implemented by setting the <i>filterMatchMode</i> property as "custom" and providing a function that takes the data value along with the filter value to return a boolean.</p>
-            <CodeHighlight className="language-javascript">
-{`
-export class TreeTableFilterDemo extends Component {
-
-    constructor() {
-        super();
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.yearFilter = this.yearFilter.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    yearFilter(value, filter) {
-        return filter > value;
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.cars}>
-                <Column field="vin" header="Vin" filter={true} expander />
-                <Column field="year" header="Year" filter={true} filterMatchMode="custom" filterFunction={this.yearFilter}/>
-                <Column field="brand" header="Brand" filter={true} />
-                <Column field="color" header="Color" filter={true}  />
-            </TreeTable>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-
-
-                        <h3>Selection</h3>
-                        <p>TreeTable supports single, multiple and checkbox selection modes. Define <i>selectionMode</i>, <i>selectionKeys</i> and <i>onSelectionChange</i> properties to control the selection. In single mode, selectionKeys should
-                        be a single value whereas in multiple or checkbox modes an array is required. By default in multiple selection mode, metaKey is necessary to add to existing selections however this can be configured with <i>metaKeySelection</i> property. Note that
-                        in touch enabled devices, TreeTable does not require metaKey.</p>
-
-                        <p>Example below demonstrates all cases along with the available callbacks to listen events such as node selection.</p>
-
-                        <CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { Growl } from 'primereact/growl';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableSelectionDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes1: [],
-            nodes2: [],
-            nodes3: [],
-            nodes4: [],
-            nodes5: [],
-            selectedNodeKey1: null,
-            selectedNodeKey2: null,
-            selectedNodeKeys1: [],
-            selectedNodeKeys2: [],
-            selectedNodeKeys3: []
-        };
-
-        this.nodeservice = new NodeService();
-        this.onSelect = this.onSelect.bind(this);
-        this.onUnselect = this.onUnselect.bind(this);
-    }
-
-    onSelect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Selected', detail: event.node.data.name});
-    }
-
-    onUnselect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Unselected', detail: event.node.data.name});
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes1: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes2: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes3: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes4: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes5: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Selection</h1>
-                        <p>TreeTable supports single, multiple and checkbox based selection modes.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3 className="first">Single</h3>
-                    <TreeTable value={this.state.nodes1} selectionMode="single" selectionKeys={this.state.selectedNodeKey1} onSelectionChange={e => this.setState({selectedNodeKey1: e.value})}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Multiple</h3>
-                    <TreeTable value={this.state.nodes2} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys1} onSelectionChange={e => this.setState({selectedNodeKeys1: e.value})} metaKeySelection={false}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Multiple with MetaKey</h3>
-                    <TreeTable value={this.state.nodes3} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys2} onSelectionChange={e => this.setState({selectedNodeKeys2: e.value})} metaKeySelection={true}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Events</h3>
-                    <TreeTable value={this.state.nodes4} selectionMode="single" selectionKeys={this.state.selectedNodeKey2} onSelectionChange={e => this.setState({selectedNodeKey2: e.value})}
-                        onSelect={this.onSelect} onUnselect={this.onUnselect}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Checkbox</h3>
-                    <TreeTable value={this.state.nodes5} selectionMode="checkbox" selectionKeys={this.state.selectedNodeKeys3} onSelectionChange={e => this.setState({selectedNodeKeys3: e.value})}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Lazy</h3>
-                        <p>Lazy loading is implemented using the <i>onExpand</i> event by adding children to the expanded node. <i>leaf</i> property should be enabled to indicate the node has children but not yet loaded. Here is a in-memory demo
-                        that loads generated nodes on expand event to imitate a remote call with a timeout. Notice the usage of <i>loading</i> property as well to give users a feedback about the loading process.</p>
-
-                        <CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-
-export class TreeTableLazyDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            first: 0,
-            rows: 10,
-            totalRecords: 0,
-            loading: true
-        };
-
-        this.onPage = this.onPage.bind(this);
-        this.onExpand = this.onExpand.bind(this);
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.setState({
-                loading: false,
-                nodes: this.loadNodes(this.state.first, this.state.first + this.state.rows),
-                totalRecords: 1000
-            });
-        }, 1000);
-    }
-
-    loadNodes(start, end) {
-        let nodes = [];
-
-        for(let i = start; i < end; i++) {
-            let node = {
-                key: i,
-                data: {
-                    name: 'Item ' + (start + i),
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + (start + i)
-                },
-                leaf: false
-            };
-
-            nodes.push(node);
-        }
-
-        return nodes;
-    }
-
-    onExpand(event) {
-        if (!event.node.children) {
-            this.setState({
-                loading: true
-            });
-
-            setTimeout(() => {
-                this.loading = false;
-                let lazyNode = {...event.node};
-
-                lazyNode.children = [
-                    {
-                        data: {
-                            name: lazyNode.data.name + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'File'
-                        },
-                    },
-                    {
-                        data: {
-                            name: lazyNode.data.name + ' - 1',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'File'
-                        }
-                    }
-                ];
-
-                let nodes = [...this.state.nodes];
-                nodes[event.node.key] = lazyNode;
-
-                this.setState({
-                    loading: false,
-                    nodes: nodes
-                });
-            }, 250);
-        }
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            this.setState({
-                first: event.first,
-                rows: event.rows,
-                nodes: this.loadNodes(event.first, event.first + event.rows),
-                loading: false
-            });
-        }, 1000);
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.nodes} lazy={true} paginator={true} totalRecords={this.state.totalRecords}
-                first={this.state.first} rows={this.state.rows} onPage={this.onPage} onExpand={this.onExpand} loading={this.state.loading}>
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Incell Editing</h3>
-                        <p>Incell editing feature provides a way to quickly edit data inside the table. A cell editor is defined using the <i>editor</i> property
-                        that refers to a function to return an input element for the editing. Clicking outside the cell or hitting enter key closes the cell, however this may not be desirable if the input is invalid. In order
-                        to decide whether to keep the cell open or not, provide a <i>editorValidator</i> function that validates the value.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { InputText } from 'primereact/inputtext;
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableEditDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-
-        this.sizeEditor = this.sizeEditor.bind(this);
-        this.typeEditor = this.typeEditor.bind(this);
-        this.requiredValidator = this.requiredValidator.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onEditorValueChange(props, value) {
-        let newNodes = JSON.parse(JSON.stringify(this.state.nodes));
-        let editedNode = this.findNodeByKey(newNodes, props.node.key);
-        editedNode.data[props.field] = value;
-
-        this.setState({
-            nodes: newNodes
-        });
-    }
-
-    findNodeByKey(nodes, key) {
-        let path = key.split('-');
-        let node;
-
-        while (path.length) {
-            let list = node ? node.children : nodes;
-            node = list[parseInt(path[0], 10)];
-            path.shift();
-        }
-
-        return node;
-    }
-
-    inputTextEditor(props, field, width) {
-        return (
-            <InputText type="text" value={props.node.data[field]} style={{'width': width, 'padding': 0}}
-                    onChange={(e) => this.onEditorValueChange(props, e.target.value)} />
-        );
-    }
-
-    sizeEditor(props) {
-        return this.inputTextEditor(props, 'size', '100%');
-    }
-
-    typeEditor(props) {
-        return this.inputTextEditor(props, 'type', '100%');
-    }
-
-    requiredValidator(props) {
-        let value = props.node.data[props.field];
-
-        return value && value.length > 0;
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.nodes}>
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size" editor={this.sizeEditor} editorValidator={this.requiredValidator}></Column>
-                <Column field="type" header="Type" editor={this.typeEditor}></Column>
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>ContextMenu</h3>
-                        <p>One or more ContextMenu instances can be attached to nodes. Similar to selection, separate <i>contextMenuSelectionKey</i> and <i>onContextMenuSelectionChange</i> properties are necesary to manage the selected node with
-                        right click. In addition, a context menu can either be displayed at <i>onContextMenu</i> event. Since this event also passes the node instance, you may choose to display a different context menu for a particular node.</p>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { ContextMenu } from 'primereact/contextmenu';
-import { Growl } from 'primereact/growl';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableContextMenuDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: {},
-            selectedNodeKey: null,
-            menu: [
-                {
-                    label: 'View Key',
-                    icon: 'pi pi-search',
-                    command: () => {
-                        this.growl.show({severity: 'success', summary: 'Node Key', detail: this.state.selectedNodeKey});
-                    }
-                },
-                {
-                    label: 'Toggle',
-                    icon: 'pi pi-cog',
-                    command: () => {
-                        let expandedKeys = {...this.state.expandedKeys};
-                        if (expandedKeys[this.state.selectedNodeKey])
-                            delete expandedKeys[this.state.selectedNodeKey];
-                        else
-                            expandedKeys[this.state.selectedNodeKey] = true;
-
-                        this.setState({expandedKeys: expandedKeys});
-                    }
-                }
-            ]
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <Growl ref={(el) => this.growl = el} />
-
-                <ContextMenu model={this.state.menu} ref={el => this.cm = el} onHide={() => this.setState({selectedNodeKey: null})}/>
-
-                <TreeTable value={this.state.nodes}  expandedKeys={this.state.expandedKeys} onToggle={e => this.setState({expandedKeys: e.value})}
-                    contextMenuSelectionKey={this.state.selectedNodeKey} onContextMenuSelectionChange={event => this.setState({selectedNodeKey: event.value})}
-                    onContextMenu={event => this.cm.show(event.originalEvent)}>
-                    <Column field="name" header="Name" expander></Column>
-                    <Column field="size" header="Size"></Column>
-                    <Column field="type" header="Type"></Column>
-                </TreeTable>
-        </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Column Resize</h3>
-                        <p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to true. There are two resize modes; "fit" and "expand". Fit is the default one and the overall table width does not change when a column is resized.
-                            In "expand" mode, table width also changes along with the column width. <i>onColumnResizeEnd</i> is a callback that passes the resized column header as a parameter.</p>
-<CodeHighlight className="language-jsx">
-{`
-<h3>Fit Mode</h3>
-<TreeTable value={this.state.nodes} resizableColumns={true} columnResizeMode="fit">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-
-<h3>Expand Mode</h3>
-<TreeTable value={this.state.nodes} resizableColumns={true} columnResizeMode="expand">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>It is important to note that when you need to change column widths, since table width is 100%, giving fixed pixel widths does not work well as browsers scale them, instead give percentage widths.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} resizableColumns={true}>
-    <Column field="name" header="Name" expander style={{width:'50%'}}></Column>
-    <Column field="size" header="Size" style={{width:'30%'}}></Column>
-    <Column field="type" header="Type" style={{width:'20%'}}></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <h3>Column Reorder</h3>
-                        <p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>onColReorder</i> is a callback that is invoked when a column is reordered.
-                        TreeTable keeps the column order state internally using keys that identifies a column using the <i>field</i> property. If the column has no field, use columnKey instead.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} reorderableColumns>
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <h3>Scrolling</h3>
-                        <p>TreeTable supports both horizontal and vertical scrolling as well as frozen columns. Vertical scrolling is enabled using <i>scrollable</i> property and <i>scrollHeight</i> to define the viewport height.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} scrollable scrollHeight="200px">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>Horizontal Scrolling requires a width of DataTable to be defined and explicit widths on columns.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} scrollable style={{width: '600px'}}>
-    <Column field="name" header="Name" expander style={{width:'350px'}}></Column>
-    <Column field="size" header="Size" style={{width:'350px'}}></Column>
-    <Column field="type" header="Type" style={{width:'350px'}}></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>Certain columns can be frozen by using the <i>frozen</i> property of the column component. Widths of the frozen section is specified by the <i>frozenWidth</i> property.</p>
-
-<CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} scrollable frozenWidth="200px" scrollHeight="250px">
-    <Column field="name" header="Name" expander frozen style={{width:'250px'}}></Column>
-    <Column field="size" header="Size" style={{width:'250px'}}></Column>
-    <Column field="type" header="Type" style={{width:'250px'}}></Column>
-    <Column field="size" header="Size" style={{width:'250px'}}></Column>
-    <Column field="type" header="Type" style={{width:'250px'}}></Column>
-    <Column field="size" header="Size" style={{width:'250px'}}></Column>
-    <Column field="type" header="Type" style={{width:'250px'}}></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>Note that frozen columns are enabled, frozen and scrollable cells may have content with varying height which leads to misalignment. Provide fixed height to cells to avoid alignment issues.</p>
-            <CodeHighlight className="language-jsx">
-{`
-<TreeTable value={this.state.nodes} scrollable frozenWidth="200px" scrollHeight="250px">
-    <Column field="name" header="Name" expander frozen style={{width:'250px', height: '25px'}}></Column>
-    <Column field="size" header="Size" style={{width:'250px', height: '25px'}}></Column>
-    <Column field="type" header="Type" style={{width:'250px', height: '25px'}}></Column>
-</TreeTable>
-
-`}
-</CodeHighlight>
-
-                        <p>When using frozen columns with column grouping, use <i>frozenHeaderColumnGroup</i> and <i>frozenFooterColumnGroup</i> properties along with
-                        <i>headerColumnGroup</i> and <i>footerColumnGroup</i>.</p>
-
-                        <h3>Responsive</h3>
-                        <p>TreeTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value. Here is a sample implementation;</p>
-
-<CodeHighlight className="language-css">
-{`
-.p-col-d {
-    display: table-cell;
-}
-
-.p-col-m {
-    display: none;
-}
-
-@media screen and (max-width: 64em) {
-    .p-col-d {
-        display: none;
-    }
-
-    .p-col-m {
-        display: inline-block;
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableResponsiveDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.nameTemplate = this.nameTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    nameTemplate(node) {
-        return (
-            <React.Fragment>
-                <span>{node.data.name}</span>
-                <span className="p-col-m">, {node.data.size}</span>
-                <span className="p-col-m">, {node.data.type}</span>
-            </React.Fragment>
-        )
-    }
-
-    render() {
-        return (
-            <TreeTable value={this.state.nodes} header="Responsive TreeTable">
-                <Column field="name" header="Name" body={this.nameTemplate} expander headerClassName="p-col-d"></Column>
-                <Column field="size" header="Size" className="p-col-d"></Column>
-                <Column field="type" header="Type" className="p-col-d"></Column>
-            </TreeTable>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-
-                        <h3>Properties</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>id</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Unique identifier of the element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>value</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of treenodes to display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>header</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Header content of the table.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>footer</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Footer content of the table.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>style</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>className</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Style class of the component.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tableStyle</td>
-                                        <td>object</td>
-                                        <td>null</td>
-                                        <td>Inline style of the table element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tableClassName</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Style class of the table element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>expandedKeys</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of keys to represent the state of the tree expansion state in controlled mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginator</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When specified as true, enables the pagination.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorPosition</td>
-                                        <td>string</td>
-                                        <td>bottom</td>
-                                        <td>Position of the paginator, options are "top","bottom" or "both".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>alwaysShowPaginator</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether to show it even there is only one page.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorTemplate</td>
-                                        <td>string</td>
-                                        <td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
-                                        <td>Template of the paginator.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorLeft</td>
-                                        <td>Element</td>
-                                        <td>null</td>
-                                        <td>Content for the left side of the paginator.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>paginatorRight</td>
-                                        <td>Element</td>
-                                        <td>null</td>
-                                        <td>Content for the right side of the paginator.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>pageLinkSize</td>
-                                        <td>number</td>
-                                        <td>5</td>
-                                        <td>Number of page links to display.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>rowsPerPageOptions</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>Array of integer values to display inside rows per page dropdown.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>currentPageReportTemplate</td>
-                                        <td>string</td>
-                                        <td>(&123;currentPage&125; of &123;totalPages&125;)</td>
-                                        <td>Template of the current page report element. Available placeholders are
-                                        &123;currentPage&125;,&123;totalPages&125;,&123;rows&125;,&123;first&125;,&123;last&125; and &123;totalRecords&125;
-                                    </td>
-                                    </tr>
-                                    <tr>
-                                        <td>first</td>
-                                        <td>number</td>
-                                        <td>0</td>
-                                        <td>Index of the first row to be displayed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>rows</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Number of rows to display per page.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>totalRecords</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Number of total records, defaults to length of value when not defined.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>lazy</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Defines if data is loaded and interacted with in lazy manner.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortField</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Name of the field to sort data by default.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortOrder</td>
-                                        <td>number</td>
-                                        <td>null</td>
-                                        <td>Order to sort the data by default.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>multiSortMeta</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of SortMeta objects to sort the data by default in multiple sort mode.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>sortMode</td>
-                                        <td>string</td>
-                                        <td>single</td>
-                                        <td>Defines whether sorting works on single column or on multiple columns.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>defaultSortOrder</td>
-                                        <td>number</td>
-                                        <td>1</td>
-                                        <td>Default sort order of an unsorted column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>selectionMode</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Defines the selection mode, valid values "single", "multiple", and "checkbox".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>selectionKeys</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>A single or an array of keys to control the selection state.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>contextMenuSelectionKey</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>A single key to control the selection with the context menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>metaKeySelection</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Defines whether metaKey is requred or not for the selection. When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
-                                            can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>propagateSelectionUp</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether checkbox selections propagate to ancestor nodes.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>propagateSelectionDown</td>
-                                        <td>boolean</td>
-                                        <td>true</td>
-                                        <td>Whether checkbox selections propagate to descendant nodes.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>autoLayout</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Whether the cell widths scale according to their content or not.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>rowClassName</td>
-                                        <td>function</td>
-                                        <td>null</td>
-                                        <td>Function that takes the row data and returns an object in "&#123;'styleclass' : condition&#125;" format to define a classname for a particular now.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>loading</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>Displays a loader to indicate data load is in progress.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>loadingIcon</td>
-                                        <td>string</td>
-                                        <td>pi pi-spinner</td>
-                                        <td>The icon to show while indicating data load is in progress.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>tabIndex</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Index of the element in tabbing order.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>scrollable</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When specified, enables horizontal and/or vertical scrolling.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>scrollHeight</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Height of the scroll viewport.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>reorderableColumns</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When enabled, columns can be reordered using drag and drop.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filters</td>
-                                        <td>array</td>
-                                        <td>null</td>
-                                        <td>An array of FilterMetadata objects to provide external filters.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>globalFilter</td>
-                                        <td>any</td>
-                                        <td>null</td>
-                                        <td>Value of the global filter to use in filtering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>filterMode</td>
-                                        <td>string</td>
-                                        <td>lenient</td>
-                                        <td>Mode for filtering valid values are lenient and strict. Default is lenient.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>headerColumnGroup</td>
-                                        <td>ColumnGroup</td>
-                                        <td>null</td>
-                                        <td>ColumnCroup component for header.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>footerColumnGroup</td>
-                                        <td>ColumnGroup</td>
-                                        <td>null</td>
-                                        <td>ColumnCroup component for footer.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>frozenHeaderColumnGroup</td>
-                                        <td>ColumnGroup</td>
-                                        <td>null</td>
-                                        <td>ColumnCroup component for header of frozen columns.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>frozenFooterColumnGroup</td>
-                                        <td>ColumnGroup</td>
-                                        <td>null</td>
-                                        <td>ColumnCroup component for footer of frozen columns.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>frozenWidth</td>
-                                        <td>string</td>
-                                        <td>null</td>
-                                        <td>Width of the frozen part in scrollable DataTable.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>resizableColumns</td>
-                                        <td>boolean</td>
-                                        <td>false</td>
-                                        <td>When enabled, columns can be resized using drag and drop.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>columnResizeMode</td>
-                                        <td>string</td>
-                                        <td>fit</td>
-                                        <td>Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".</td>
-                                    </tr>
-                                    <tr>
-                                        <td>emptyMessage</td>
-                                        <td>string</td>
-                                        <td>No records found</td>
-                                        <td>Text to display when there is no data.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Events</h3>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Parameters</th>
-                                        <th>Description</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>onExpand</td>
-                                        <td>event.originalEvent: browser event <br />
-                                            event.node: Expanded node instance.</td>
-                                        <td>Callback to invoke when a node is expanded.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onCollapse</td>
-                                        <td>event.originalEvent: browser event <br />
-                                            event.node: Collapsed node instance.</td>
-                                        <td>Callback to invoke when a node is collapsed.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onToggle</td>
-                                        <td>event.originalEvent: browser event <br />
-                                            event.node: Toggled node instance.</td>
-                                        <td>Callback to invoke when a node is toggled.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onPage</td>
-                                        <td>event.first: Index of the first row. <br />
-                                            event.rows: Rows per page.</td>
-                                        <td>Callback to invoke on pagination.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onSort</td>
-                                        <td>event.sortField: Field to sort against. <br />
-                                            event.sortOrder: Sort order as integer. <br />
-                                            event.multiSortMeta: MultiSort metadata.</td>
-                                        <td>Callback to invoke on sort.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onFilter</td>
-                                        <td>event.filters: Collection of active filters.</td>
-                                        <td>Callback to invoke on filtering.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onSelect</td>
-                                        <td>event.originalEvent: browser event <br />
-                                            event.node: Selected node instance.</td>
-                                        <td>Callback to invoke when a node is selected.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onUnselect</td>
-                                        <td>event.originalEvent: browser event <br />
-                                            event.node: Unselected node instance.</td>
-                                        <td>Callback to invoke when a node is unselected.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onRowClick</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.data: Clicked row data</td>
-                                        <td>Callback to invoke when a row is clicked.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onSelectionChange</td>
-                                        <td>event.originalEvent: browser event <br />
-                                            event.value: Selected node key(s).</td>
-                                        <td>Callback to invoke when selection changes.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onContextMenuSelectionChange</td>
-                                        <td>event.originalEvent: browser event <br />
-                                            event.value: Selected node key.</td>
-                                        <td>Callback to invoke when selection changes with a context menu.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onColumnResizeEnd</td>
-                                        <td>event.element: DOM element of the resized column.
-                                            event.column: Properties of the resized column.<br />
-                                            event.delta: Change in column width</td>
-                                        <td>Callback to invoke when a column is resized.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onColReorder</td>
-                                        <td>event.originalEvent: Browser event <br />
-                                            event.dragIndex: Index of the dragged column <br />
-                                            event.dropIndex: Index of the dropped column <br />
-                                            event.columns: Columns array after reorder.</td>
-                                        <td>Callback to invoke when a column is reordered.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>onContextMenu</td>
-                                        <td>event.originalEvent: Original event instance. <br />
-                                            event.data: Collapsed row data</td>
-                                        <td>Callback to invoke when a context menu is clicked.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Styling</h3>
-                        <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming"> theming</Link> page.</p>
-                        <div className="doc-tablewrapper">
-                            <table className="doc-table">
-                                <thead>
-                                    <tr>
-                                        <th>Name</th>
-                                        <th>Element</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>p-treetable</td>
-                                        <td>Container element.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-treetable-header</td>
-                                        <td>Header section.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-treetable-footer</td>
-                                        <td>Footer section.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-column-title</td>
-                                        <td>Title of a column.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-sortable-column</td>
-                                        <td>Sortable column header.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-treetable-scrollable-header</td>
-                                        <td>Container of header in a scrollable table.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-treetable-scrollable-body</td>
-                                        <td>Container of body in a scrollable table.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-treetable-scrollable-footer</td>
-                                        <td>Container of footer in a scrollable table.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-treetable-emptymessage</td>
-                                        <td>Cell containing the empty message.</td>
-                                    </tr>
-                                    <tr>
-                                        <td>p-treetable-toggler</td>
-                                        <td>Toggler icon.</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <h3>Dependencies</h3>
-                        <p>None.</p>
-
-                    </TabPanel>
-
-                    <TabPanel header="Source">
-                        <CodeHighlight className="language-javascript">
-                            {`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { Button } from 'primereact/button';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            expandedKeys: {}
-        };
-        this.nodeservice = new NodeService();
-        this.toggleApplications = this.toggleApplications.bind(this);
-    }
-
-    toggleApplications() {
-        let expandedKeys = {...this.state.expandedKeys};
-        if (expandedKeys['0'])
-            delete expandedKeys['0'];
-        else
-            expandedKeys['0'] = true;
-
-        this.setState({expandedKeys: expandedKeys});
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable</h1>
-                        <p>TreeTable is used to display hierarchical data in tabular format.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Uncontrolled</h3>
-                    <TreeTable value={this.state.nodes}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Controlled</h3>
-                    <Button onClick={this.toggleApplications} label="Toggle Applications" />
-                    <TreeTable value={this.state.nodes} expandedKeys={this.state.expandedKeys}
-                        onToggle={e => this.setState({expandedKeys: e.value})} style={{marginTop: '.5em'}}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-                        </CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        );
-    }
-}
-
diff --git a/src/showcase/treetable/TreeTableEditDemo.js b/src/showcase/treetable/TreeTableEditDemo.js
deleted file mode 100644
index 7dd63c32a7..0000000000
--- a/src/showcase/treetable/TreeTableEditDemo.js
+++ /dev/null
@@ -1,213 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { InputText } from '../../components/inputtext/InputText';
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableEditDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-
-        this.sizeEditor = this.sizeEditor.bind(this);
-        this.typeEditor = this.typeEditor.bind(this);
-        this.requiredValidator = this.requiredValidator.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onEditorValueChange(props, value) {
-        let newNodes = JSON.parse(JSON.stringify(this.state.nodes));
-        let editedNode = this.findNodeByKey(newNodes, props.node.key);
-        editedNode.data[props.field] = value;
-
-        this.setState({
-            nodes: newNodes
-        });
-    }
-
-    findNodeByKey(nodes, key) {
-        let path = key.split('-');
-        let node;
-
-        while (path.length) {
-            let list = node ? node.children : nodes;
-            node = list[parseInt(path[0], 10)];
-            path.shift();
-        }
-
-        return node;
-    }
-
-    inputTextEditor(props, field) {
-        return (
-            <InputText type="text" value={props.node.data[field]}
-                    onChange={(e) => this.onEditorValueChange(props, e.target.value)} />
-        );
-    }
-
-    sizeEditor(props) {
-        return this.inputTextEditor(props, 'size');
-    }
-
-    typeEditor(props) {
-        return this.inputTextEditor(props, 'type');
-    }
-
-    requiredValidator(props) {
-        let value = props.node.data[props.field];
-
-        return value && value.length > 0;
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction treetableeditdemo">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Edit</h1>
-                        <p>Incell editing provides a quick and user friendly way to manipulate data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation treetableedit-demo">
-                    <TreeTable value={this.state.nodes}>
-                        <Column field="name" header="Name" expander style={{height: '3.5em'}}></Column>
-                        <Column field="size" header="Size" editor={this.sizeEditor} editorValidator={this.requiredValidator} style={{height: '3.5em'}}></Column>
-                        <Column field="type" header="Type" editor={this.typeEditor} style={{height: '3.5em'}}></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableEditDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableEditDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { InputText } from 'primereact/inputtext;
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableEditDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-
-        this.sizeEditor = this.sizeEditor.bind(this);
-        this.typeEditor = this.typeEditor.bind(this);
-        this.requiredValidator = this.requiredValidator.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    onEditorValueChange(props, value) {
-        let newNodes = JSON.parse(JSON.stringify(this.state.nodes));
-        let editedNode = this.findNodeByKey(newNodes, props.node.key);
-        editedNode.data[props.field] = value;
-
-        this.setState({
-            nodes: newNodes
-        });
-    }
-
-    findNodeByKey(nodes, key) {
-        let path = key.split('-');
-        let node;
-
-        while (path.length) {
-            let list = node ? node.children : nodes;
-            node = list[parseInt(path[0], 10)];
-            path.shift();
-        }
-
-        return node;
-    }
-
-    inputTextEditor(props, field) {
-        return (
-            <InputText type="text" value={props.node.data[field]}}
-                    onChange={(e) => this.onEditorValueChange(props, e.target.value)} />
-        );
-    }
-
-    sizeEditor(props) {
-        return this.inputTextEditor(props, 'size');
-    }
-
-    typeEditor(props) {
-        return this.inputTextEditor(props, 'type');
-    }
-
-    requiredValidator(props) {
-        let value = props.node.data[props.field];
-
-        return value && value.length > 0;
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Edit</h1>
-                        <p>Incell editing provides a quick and user friendly way to manipulate data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes}>
-                        <Column field="name" header="Name" expander style={{height: '3.5em'}}></Column>
-                        <Column field="size" header="Size" editor={this.sizeEditor} editorValidator={this.requiredValidator} style={{height: '3.5em'}}></Column>
-                        <Column field="type" header="Type" editor={this.typeEditor} style={{height: '3.5em'}}></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableFilterDemo.js b/src/showcase/treetable/TreeTableFilterDemo.js
deleted file mode 100644
index 05dedd6940..0000000000
--- a/src/showcase/treetable/TreeTableFilterDemo.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from '../../components/column/Column';
-import { InputText } from '../../components/inputtext/InputText';
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableFilterDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            globalFilter: null
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        let header = <div style={{'textAlign':'left'}}>
-                        <i className="pi pi-search" style={{margin:'4px 4px 0 0'}}></i>
-                        <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/>
-                    </div>;
-
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Filter</h1>
-                        <p>Filtering is enabled by setting the filter property as true in column object. Default match mode is "startsWith" and this can be configured using filterMatchMode
-                            property of column object that also accepts "contains", "endsWith", "equals", "in" and "custom". An optional global filter feature is available to search all fields with a keyword.
-                            By default input fields are generated as filter elements and using templating any component can be used as a filter.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} globalFilter={this.state.globalFilter} header={header}>
-                        <Column field="name" header="Name" expander filter={true}></Column>
-                        <Column field="size" header="Size" filter={true}></Column>
-                        <Column field="type" header="Type" filter={true}></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableFilterDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableFilterDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from 'primereact/column';
-import { InputText } from 'primereact/inputtext';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableFilterDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            globalFilter: null
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        let header = <div style={{'textAlign':'left'}}>
-                        <i className="pi pi-search" style={{margin:'4px 4px 0 0'}}></i>
-                        <InputText type="search" onInput={(e) => this.setState({globalFilter: e.target.value})} placeholder="Global Search" size="50"/>
-                    </div>;
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Filter</h1>
-                        <p>Filtering is enabled by setting the filter property as true in column object. Default match mode is "startsWith" and this can be configured using filterMatchMode
-                            property of column object that also accepts "contains", "endsWith", "equals", "in" and "custom". An optional global filter feature is available to search all fields with a keyword.
-                            By default input fields are generated as filter elements and using templating any component can be used as a filter.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} globalFilter={this.state.globalFilter} header={header}>
-                        <Column field="name" header="Name" expander filter={true}></Column>
-                        <Column field="size" header="Size" filter={true}></Column>
-                        <Column field="type" header="Type" filter={true}></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableLazyDemo.js b/src/showcase/treetable/TreeTableLazyDemo.js
deleted file mode 100644
index 2c54d87889..0000000000
--- a/src/showcase/treetable/TreeTableLazyDemo.js
+++ /dev/null
@@ -1,299 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableLazyDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            first: 0,
-            rows: 10,
-            totalRecords: 0,
-            loading: true
-        };
-
-        this.onPage = this.onPage.bind(this);
-        this.onExpand = this.onExpand.bind(this);
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.setState({
-                loading: false,
-                nodes: this.loadNodes(this.state.first, this.state.rows),
-                totalRecords: 1000
-            });
-        }, 1000);
-    }
-
-    loadNodes(first, rows) {
-        let nodes = [];
-
-        for(let i = 0; i < rows; i++) {
-            let node = {
-                key: (first + i),
-                data: {
-                    name: 'Item ' + (first + i),
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + (first + i)
-                },
-                leaf: false
-            };
-
-            nodes.push(node);
-        }
-
-        return nodes;
-    }
-
-    onExpand(event) {
-        if (!event.node.children) {
-            this.setState({
-                loading: true
-            });
-
-            setTimeout(() => {
-                this.loading = false;
-                let lazyNode = {...event.node};
-
-                lazyNode.children = [
-                    {
-                        data: {
-                            name: lazyNode.data.name + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'File'
-                        },
-                    },
-                    {
-                        data: {
-                            name: lazyNode.data.name + ' - 1',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'File'
-                        }
-                    }
-                ];
-
-                let nodes = this.state.nodes.map(node => {
-                    if (node.key === event.node.key) {
-                        node = lazyNode;
-                    }
-
-                    return node;
-                });
-
-                this.setState({
-                    loading: false,
-                    nodes: nodes
-                });
-            }, 250);
-        }
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            this.setState({
-                first: event.first,
-                rows: event.rows,
-                nodes: this.loadNodes(event.first, event.rows),
-                loading: false
-            });
-        }, 1000);
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Lazy</h1>
-                        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging or sorting.
-                            In addition, children of a node can be loaded on demand at onNodeExpand event as well. Sample belows imitates lazy paging by using an in memory list.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} lazy={true} paginator={true} totalRecords={this.state.totalRecords}
-                        first={this.state.first} rows={this.state.rows} onPage={this.onPage} onExpand={this.onExpand} loading={this.state.loading}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableLazyDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableLazyDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-
-export class TreeTableLazyDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: [],
-            first: 0,
-            rows: 10,
-            totalRecords: 0,
-            loading: true
-        };
-
-        this.onPage = this.onPage.bind(this);
-        this.onExpand = this.onExpand.bind(this);
-    }
-
-    componentDidMount() {
-        setTimeout(() => {
-            this.setState({
-                loading: false,
-                nodes: this.loadNodes(this.state.first, this.state.rows),
-                totalRecords: 1000
-            });
-        }, 1000);
-    }
-
-    loadNodes(first, rows) {
-        let nodes = [];
-
-        for(let i = 0; i < rows; i++) {
-            let node = {
-                key: (first + i),
-                data: {
-                    name: 'Item ' + (first + i),
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + (first + i)
-                },
-                leaf: false
-            };
-
-            nodes.push(node);
-        }
-
-        return nodes;
-    }
-
-    onExpand(event) {
-        if (!event.node.children) {
-            this.setState({
-                loading: true
-            });
-
-            setTimeout(() => {
-                this.loading = false;
-                let lazyNode = {...event.node};
-
-                lazyNode.children = [
-                    {
-                        data: {
-                            name: lazyNode.data.name + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'File'
-                        },
-                    },
-                    {
-                        data: {
-                            name: lazyNode.data.name + ' - 1',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'File'
-                        }
-                    }
-                ];
-
-                let nodes = this.state.nodes.map(node => {
-                    if (node.key === event.node.key) {
-                        node = lazyNode;
-                    }
-
-                    return node;
-                });
-
-                this.setState({
-                    loading: false,
-                    nodes: nodes
-                });
-            }, 250);
-        }
-    }
-
-    onPage(event) {
-        this.setState({
-            loading: true
-        });
-
-        //imitate delay of a backend call
-        setTimeout(() => {
-            this.setState({
-                first: event.first,
-                rows: event.rows,
-                nodes: this.loadNodes(event.first, event.rows),
-                loading: false
-            });
-        }, 1000);
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Lazy</h1>
-                        <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging or sorting.
-                            In addition, children of a node can be loaded on demand at onNodeExpand event as well. Sample belows imitates lazy paging by using an in memory list.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} lazy={true} paginator={true} totalRecords={this.state.totalRecords}
-                        first={this.state.first} rows={this.state.rows} onPage={this.onPage} onExpand={this.onExpand} loading={this.state.loading}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTablePageDemo.js b/src/showcase/treetable/TreeTablePageDemo.js
deleted file mode 100644
index 25e59d4fb8..0000000000
--- a/src/showcase/treetable/TreeTablePageDemo.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTablePageDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-    }
-
-    componentDidMount() {
-        let files = [];
-        for(let i = 0; i < 50; i++) {
-            let node = {
-                key: i,
-                data: {
-                    name: 'Item ' + i,
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                },
-                children: [
-                    {
-                        key: i + ' - 0',
-                        data: {
-                            name: 'Item ' + i + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'Type ' + i
-                        }
-                    }
-                ]
-            };
-
-            files.push(node);
-        }
-
-        this.setState({
-            nodes: files
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Page</h1>
-                        <p>Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} paginator={true} rows={10}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTablePageDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTablePageDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-
-export class TreeTablePageDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-    }
-
-    componentDidMount() {
-        let files = [];
-        for(let i = 0; i < 50; i++) {
-            let node = {
-                key: i,
-                data: {
-                    name: 'Item ' + i,
-                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                    type: 'Type ' + i
-                },
-                children: [
-                    {
-                        key: i + ' - 0',
-                        data: {
-                            name: 'Item ' + i + ' - 0',
-                            size: Math.floor(Math.random() * 1000) + 1 + 'kb',
-                            type: 'Type ' + i
-                        }
-                    }
-                ]
-            };
-
-            files.push(node);
-        }
-
-        this.setState({
-            nodes: files
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Page</h1>
-                        <p>Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} paginator={true} rows={10}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableResponsiveDemo.js b/src/showcase/treetable/TreeTableResponsiveDemo.js
deleted file mode 100644
index cd2437671f..0000000000
--- a/src/showcase/treetable/TreeTableResponsiveDemo.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableResponsiveDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.nameTemplate = this.nameTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    nameTemplate(node) {
-        return (
-            <React.Fragment>
-                <span>{node.data.name}</span>
-                <span className="p-col-m">, {node.data.size}</span>
-                <span className="p-col-m">, {node.data.type}</span>
-            </React.Fragment>
-        )
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Responsive</h1>
-                        <p>TreeTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} header="Responsive TreeTable">
-                        <Column field="name" header="Name" body={this.nameTemplate} expander headerClassName="p-col-d"></Column>
-                        <Column field="size" header="Size" className="p-col-d"></Column>
-                        <Column field="type" header="Type" className="p-col-d"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableResponsiveDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableResponsiveDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-css">
-{`
-.p-col-d {
-    display: table-cell;
-}
-
-.p-col-m {
-    display: none;
-}
-
-@media screen and (max-width: 64em) {
-    .p-col-d {
-        display: none;
-    }
-
-    .p-col-m {
-        display: inline-block;
-    }
-}
-
-`}
-</CodeHighlight>
-
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableResponsiveDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.nameTemplate = this.nameTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    nameTemplate(node) {
-        return (
-            <React.Fragment>
-                <span>{node.data.name}</span>
-                <span className="p-col-m">, {node.data.size}</span>
-                <span className="p-col-m">, {node.data.type}</span>
-            </React.Fragment>
-        )
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Responsive</h1>
-                        <p>TreeTable columns are displayed as stacked in responsive mode if the screen size becomes smaller than a certain breakpoint value.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} header="Responsive TreeTable">
-                        <Column field="name" header="Name" body={this.nameTemplate} expander headerClassName="p-col-d"></Column>
-                        <Column field="size" header="Size" className="p-col-d"></Column>
-                        <Column field="type" header="Type" className="p-col-d"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableScrollDemo.js b/src/showcase/treetable/TreeTableScrollDemo.js
deleted file mode 100644
index 690700cb1d..0000000000
--- a/src/showcase/treetable/TreeTableScrollDemo.js
+++ /dev/null
@@ -1,167 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from './TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableScrollDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Scroll</h1>
-                        <p>Scrolling data is available horizontally, vertically or both with optional support for frozen columns.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Vertical</h3>
-                    <TreeTable value={this.state.nodes} scrollable scrollHeight="200px">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Horizontal</h3>
-                    <TreeTable value={this.state.nodes} scrollable style={{width: '600px'}}>
-                        <Column field="name" header="Name" expander style={{width:'350px'}}></Column>
-                        <Column field="size" header="Size" style={{width:'350px'}}></Column>
-                        <Column field="type" header="Type" style={{width:'350px'}}></Column>
-                    </TreeTable>
-
-                    <h3>Horizontal and Vertical</h3>
-                    <TreeTable value={this.state.nodes} scrollable style={{width: '600px'}} scrollHeight="200px">
-                        <Column field="name" header="Name" expander style={{width:'350px'}}></Column>
-                        <Column field="size" header="Size" style={{width:'350px'}}></Column>
-                        <Column field="type" header="Type" style={{width:'350px'}}></Column>
-                    </TreeTable>
-
-                    <h3>Frozen Columns</h3>
-                    <TreeTable value={this.state.nodes} scrollable frozenWidth="200px" scrollHeight="250px">
-                        <Column field="name" header="Name" expander frozen style={{width:'250px', height: '36px'}}></Column>
-                        <Column field="size" header="Size" style={{width:'250px', height: '36px'}} columnKey="size_0"></Column>
-                        <Column field="type" header="Type" style={{width:'250px', height: '36px'}} columnKey="type_0"></Column>
-                        <Column field="size" header="Size" style={{width:'250px', height: '36px'}} columnKey="size_1"></Column>
-                        <Column field="type" header="Type" style={{width:'250px', height: '36px'}} columnKey="type_1"></Column>
-                        <Column field="size" header="Size" style={{width:'250px', height: '36px'}} columnKey="size_2"></Column>
-                        <Column field="type" header="Type" style={{width:'250px', height: '36px'}} columnKey="type_2"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableScrollDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableScrollDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableScrollDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Scroll</h1>
-                        <p>Scrolling data is available horizontally, vertically or both with optional support for frozen columns.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Vertical</h3>
-                    <TreeTable value={this.state.nodes} scrollable scrollHeight="200px">
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Horizontal</h3>
-                    <TreeTable value={this.state.nodes} scrollable style={{width: '600px'}}>
-                        <Column field="name" header="Name" expander style={{width:'350px'}}></Column>
-                        <Column field="size" header="Size" style={{width:'350px'}}></Column>
-                        <Column field="type" header="Type" style={{width:'350px'}}></Column>
-                    </TreeTable>
-
-                    <h3>Horizontal and Vertical</h3>
-                    <TreeTable value={this.state.nodes} scrollable style={{width: '600px'}} scrollHeight="200px">
-                        <Column field="name" header="Name" expander style={{width:'350px'}}></Column>
-                        <Column field="size" header="Size" style={{width:'350px'}}></Column>
-                        <Column field="type" header="Type" style={{width:'350px'}}></Column>
-                    </TreeTable>
-
-                    <h3>Frozen Columns</h3>
-                    <TreeTable value={this.state.nodes} scrollable frozenWidth="200px" scrollHeight="250px">
-                        <Column field="name" header="Name" expander frozen style={{width:'250px', height: '36px'}}></Column>
-                        <Column field="size" header="Size" style={{width:'250px', height: '36px'}} columnKey="size_0"></Column>
-                        <Column field="type" header="Type" style={{width:'250px', height: '36px'}} columnKey="type_0"></Column>
-                        <Column field="size" header="Size" style={{width:'250px', height: '36px'}} columnKey="size_1"></Column>
-                        <Column field="type" header="Type" style={{width:'250px', height: '36px'}} columnKey="type_1"></Column>
-                        <Column field="size" header="Size" style={{width:'250px', height: '36px'}} columnKey="size_2"></Column>
-                        <Column field="type" header="Type" style={{width:'250px', height: '36px'}} columnKey="type_2"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableSelectionDemo.js b/src/showcase/treetable/TreeTableSelectionDemo.js
deleted file mode 100644
index 0d07970955..0000000000
--- a/src/showcase/treetable/TreeTableSelectionDemo.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Growl } from '../../components/growl/Growl';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableSelectionDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes1: [],
-            nodes2: [],
-            nodes3: [],
-            nodes4: [],
-            nodes5: [],
-            selectedNodeKey1: null,
-            selectedNodeKey2: null,
-            selectedNodeKeys1: [],
-            selectedNodeKeys2: [],
-            selectedNodeKeys3: []
-        };
-
-        this.nodeservice = new NodeService();
-        this.onSelect = this.onSelect.bind(this);
-        this.onUnselect = this.onUnselect.bind(this);
-    }
-
-    onSelect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Selected', detail: event.node.data.name});
-    }
-
-    onUnselect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Unselected', detail: event.node.data.name});
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes1: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes2: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes3: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes4: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes5: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Selection</h1>
-                        <p>TreeTable supports single, multiple and checkbox based selection modes.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3 className="first">Single</h3>
-                    <TreeTable value={this.state.nodes1} selectionMode="single" selectionKeys={this.state.selectedNodeKey1} onSelectionChange={e => this.setState({selectedNodeKey1: e.value})}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Multiple</h3>
-                    <TreeTable value={this.state.nodes2} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys1} onSelectionChange={e => this.setState({selectedNodeKeys1: e.value})} metaKeySelection={false}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Multiple with MetaKey</h3>
-                    <TreeTable value={this.state.nodes3} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys2} onSelectionChange={e => this.setState({selectedNodeKeys2: e.value})} metaKeySelection={true}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Events</h3>
-                    <TreeTable value={this.state.nodes4} selectionMode="single" selectionKeys={this.state.selectedNodeKey2} onSelectionChange={e => this.setState({selectedNodeKey2: e.value})}
-                        onSelect={this.onSelect} onUnselect={this.onUnselect}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Checkbox</h3>
-                    <TreeTable value={this.state.nodes5} selectionMode="checkbox" selectionKeys={this.state.selectedNodeKeys3} onSelectionChange={e => this.setState({selectedNodeKeys3: e.value})}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableSelectionDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableSelectionDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { Growl } from 'primereact/growl';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableSelectionDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes1: [],
-            nodes2: [],
-            nodes3: [],
-            nodes4: [],
-            nodes5: [],
-            selectedNodeKey1: null,
-            selectedNodeKey2: null,
-            selectedNodeKeys1: [],
-            selectedNodeKeys2: [],
-            selectedNodeKeys3: []
-        };
-
-        this.nodeservice = new NodeService();
-        this.onSelect = this.onSelect.bind(this);
-        this.onUnselect = this.onUnselect.bind(this);
-    }
-
-    onSelect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Selected', detail: event.node.data.name});
-    }
-
-    onUnselect(event) {
-        this.growl.show({severity: 'info', summary: 'Node Unselected', detail: event.node.data.name});
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes1: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes2: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes3: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes4: data}));
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes5: data}));
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Selection</h1>
-                        <p>TreeTable supports single, multiple and checkbox based selection modes.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <Growl ref={(el) => this.growl = el} />
-
-                    <h3 className="first">Single</h3>
-                    <TreeTable value={this.state.nodes1} selectionMode="single" selectionKeys={this.state.selectedNodeKey1} onSelectionChange={e => this.setState({selectedNodeKey1: e.value})}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Multiple</h3>
-                    <TreeTable value={this.state.nodes2} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys1} onSelectionChange={e => this.setState({selectedNodeKeys1: e.value})} metaKeySelection={false}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Multiple with MetaKey</h3>
-                    <TreeTable value={this.state.nodes3} selectionMode="multiple" selectionKeys={this.state.selectedNodeKeys2} onSelectionChange={e => this.setState({selectedNodeKeys2: e.value})} metaKeySelection={true}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Events</h3>
-                    <TreeTable value={this.state.nodes4} selectionMode="single" selectionKeys={this.state.selectedNodeKey2} onSelectionChange={e => this.setState({selectedNodeKey2: e.value})}
-                        onSelect={this.onSelect} onUnselect={this.onUnselect}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-
-                    <h3>Checkbox</h3>
-                    <TreeTable value={this.state.nodes5} selectionMode="checkbox" selectionKeys={this.state.selectedNodeKeys3} onSelectionChange={e => this.setState({selectedNodeKeys3: e.value})}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableSortDemo.js b/src/showcase/treetable/TreeTableSortDemo.js
deleted file mode 100644
index b54649226b..0000000000
--- a/src/showcase/treetable/TreeTableSortDemo.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from '../../components/column/Column';
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableSortDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes1: [],
-            nodes2: []
-        };
-
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes1: data}));
-        this.nodeservice.getTreeTableNodes().then(data => {
-            let nodes2 = data;
-            nodes2.push({
-                data: {
-                    name: 'Documents',
-                    size: '100kb',
-                    type: 'Link'
-                }
-            });
-
-            this.setState({
-                nodes2: nodes2
-            });
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Sort</h1>
-                        <p>TreeTable supports both single column and multiple column sorting.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single Column Sorting</h3>
-                    <TreeTable value={this.state.nodes1} defaultSortOrder={-1}>
-                        <Column field="name" header="Name" expander sortable></Column>
-                        <Column field="size" header="Size" sortable></Column>
-                        <Column field="type" header="Type" sortable></Column>
-                    </TreeTable>
-
-                    <h3>Multiple Column Sorting</h3>
-                    <TreeTable value={this.state.nodes2} sortMode="multiple" defaultSortOrder={-1}>
-                        <Column field="name" header="Name" expander sortable></Column>
-                        <Column field="size" header="Size" sortable></Column>
-                        <Column field="type" header="Type" sortable></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableSortDemoDoc />
-            </div>
-        );
-    }
-}
-
-class TreeTableSortDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableSortDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes1: [],
-            nodes2: []
-        };
-
-        this.nodeservice = new NodeService();
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes1: data}));
-        this.nodeservice.getTreeTableNodes().then(data => {
-            let nodes2 = data;
-            nodes2.push({
-                data: {
-                    name: 'Documents',
-                    size: '100kb',
-                    type: 'Link'
-                }
-            });
-
-            this.setState({
-                nodes2: nodes2
-            });
-        });
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Sort</h1>
-                        <p>TreeTable supports both single column and multiple column sorting.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3>Single Column Sorting</h3>
-                    <TreeTable value={this.state.nodes1} defaultSortOrder={-1}>
-                        <Column field="name" header="Name" expander sortable></Column>
-                        <Column field="size" header="Size" sortable></Column>
-                        <Column field="type" header="Type" sortable></Column>
-                    </TreeTable>
-
-                    <h3>Multiple Column Sorting</h3>
-                    <TreeTable value={this.state.nodes2} sortMode="multiple" defaultSortOrder={-1}>
-                        <Column field="name" header="Name" expander sortable></Column>
-                        <Column field="size" header="Size" sortable></Column>
-                        <Column field="type" header="Type" sortable></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableStyleDemo.js b/src/showcase/treetable/TreeTableStyleDemo.js
deleted file mode 100644
index 04f691521f..0000000000
--- a/src/showcase/treetable/TreeTableStyleDemo.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableStyleDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.sizeTemplate = this.sizeTemplate.bind(this);
-        this.rowClassName = this.rowClassName.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    sizeTemplate(node) {
-        let size = node.data.size;
-        let fontWeight = parseInt(size, 10) > 75 ? 'bold' : 'normal';
-
-        return <span style={{fontWeight: fontWeight}}>{size}</span>;
-    }
-
-    rowClassName(node) {
-        return {'p-highlight' : (node.children && node.children.length === 3)};
-    }
-
-    render() {
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Styling</h1>
-                        <p>Particular rows and cells can be styled based on data.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <p>This treetable highlights cells with a bolder font weight whose size value is greater than 75kb and highlights rows who has at 3 child rows.</p>
-                    <TreeTable value={this.state.nodes} rowClassName={this.rowClassName}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size" body={this.sizeTemplate}></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-
-                <TreeTableStyleDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableStyleDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableStyleDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.sizeTemplate = this.sizeTemplate.bind(this);
-        this.rowClassName = this.rowClassName.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    sizeTemplate(node) {
-        let size = node.data.size;
-        let fontWeight = parseInt(size, 10) > 75 ? 'bold' : 'normal';
-
-        return <span style={{fontWeight: fontWeight}}>{size}</span>;
-    }
-
-    rowClassName(node) {
-        return {'p-highlight' : (node.children && node.children.length === 3)};
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Styling</h1>
-                        <p>Particular rows and cells can be styled based on data.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <p>This treetable highlights cells with a bolder font weight whose size value is greater than 75kb and highlights rows who has at 3 child rows.</p>
-                    <TreeTable value={this.state.nodes} rowClassName={this.rowClassName}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size" body={this.sizeTemplate}></Column>
-                        <Column field="type" header="Type"></Column>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/treetable/TreeTableSubmenu.js b/src/showcase/treetable/TreeTableSubmenu.js
deleted file mode 100644
index b0893402df..0000000000
--- a/src/showcase/treetable/TreeTableSubmenu.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-
-export class TreeTableSubmenu extends Component {
-
-    render() {
-        return (
-            <div className="content-section content-submenu p-clearfix">
-                <ul>
-                    <li><Link to="/treetable">&#9679; Documentation</Link></li>
-                    <li><Link to="/treetable/templating">&#9679; Templating</Link></li>
-                    <li><Link to="/treetable/page">&#9679; Page</Link></li>
-                    <li><Link to="/treetable/sort">&#9679; Sort</Link></li>
-                    <li><Link to="/treetable/selection">&#9679; Selection</Link></li>
-                    <li><Link to="/treetable/colgroup">&#9679; ColGroup</Link></li>
-                    <li><Link to="/treetable/lazy">&#9679; Lazy</Link></li>
-                    <li><Link to="/treetable/edit">&#9679; Edit</Link></li>
-                    <li><Link to="/treetable/scroll">&#9679; Scroll</Link></li>
-                    <li><Link to="/treetable/resize">&#9679; Resize</Link></li>
-                    <li><Link to="/treetable/reorder">&#9679; Reorder</Link></li>
-                    <li><Link to="/treetable/toggle">&#9679; Toggle</Link></li>
-                    <li><Link to="/treetable/style">&#9679; Style</Link></li>
-                    <li><Link to="/treetable/contextmenu">&#9679; ContextMenu</Link></li>
-                    <li><Link to="/treetable/responsive">&#9679; Responsive</Link></li>
-                    <li><Link to="/treetable/filter">&#9679; Filter</Link></li>
-                </ul>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/showcase/treetable/TreeTableTemplatingDemo.js b/src/showcase/treetable/TreeTableTemplatingDemo.js
deleted file mode 100644
index c4525d6127..0000000000
--- a/src/showcase/treetable/TreeTableTemplatingDemo.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { Component } from 'react';
-import { TreeTable } from '../../components/treetable/TreeTable';
-import { Column } from "../../components/column/Column";
-import { Button } from '../../components/button/Button';
-import { NodeService } from '../service/NodeService';
-import { TreeTableSubmenu } from '../../showcase/treetable/TreeTableSubmenu';
-import { TabView, TabPanel } from '../../components/tabview/TabView';
-import { CodeHighlight } from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TreeTableTemplatingDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.actionTemplate = this.actionTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    actionTemplate(node, column) {
-        return <div>
-            <Button type="button" icon="pi pi-search" className="p-button-success" style={{marginRight: '.5em'}}></Button>
-            <Button type="button" icon="pi pi-pencil" className="p-button-warning"></Button>
-        </div>;
-    }
-
-    render() {
-        const header = "File Viewer";
-        const footer = <div style={{textAlign:'left'}}><Button icon="pi pi-refresh" tooltip="Reload"/></div>;
-
-        return (
-            <div>
-                <TreeTableSubmenu />
-
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Templating</h1>
-                        <p>Custom content at header, body and footer sections are supported via templating.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("treeTable")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} header={header} footer={footer}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                        <Column body={this.actionTemplate} style={{textAlign:'center', width: '8em'}}/>
-                    </TreeTable>
-                </div>
-
-                <TreeTableTemplatingDemoDoc />
-            </div>
-        )
-    }
-}
-
-class TreeTableTemplatingDemoDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Source">
-<CodeHighlight className="language-javascript">
-{`
-import React, { Component } from 'react';
-import { TreeTable } from 'primereact/treetable';
-import { Column } from "primereact/column";
-import { Button } from 'primereact/button';
-import { NodeService } from '../service/NodeService';
-
-export class TreeTableTemplatingDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            nodes: []
-        };
-        this.nodeservice = new NodeService();
-        this.actionTemplate = this.actionTemplate.bind(this);
-    }
-
-    componentDidMount() {
-        this.nodeservice.getTreeTableNodes().then(data => this.setState({nodes: data}));
-    }
-
-    actionTemplate(node, column) {
-        return <div>
-            <Button type="button" icon="pi pi-search" className="p-button-success" style={{marginRight: '.5em'}}></Button>
-            <Button type="button" icon="pi pi-pencil" className="p-button-warning"></Button>
-        </div>;
-    }
-
-    render() {
-        const header = "File Viewer";
-        const footer = <div style={{textAlign:'left'}}><Button icon="pi pi-refresh" tooltip="Reload"/></div>;
-
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TreeTable - Templating</h1>
-                        <p>Custom content at header, body and footer sections are supported via templating.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <TreeTable value={this.state.nodes} header={header} footer={footer}>
-                        <Column field="name" header="Name" expander></Column>
-                        <Column field="size" header="Size"></Column>
-                        <Column field="type" header="Type"></Column>
-                        <Column body={this.actionTemplate} style={{textAlign:'center', width: '8em'}}/>
-                    </TreeTable>
-                </div>
-            </div>
-        )
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/src/showcase/tristatecheckbox/TriStateCheckboxDemo.js b/src/showcase/tristatecheckbox/TriStateCheckboxDemo.js
deleted file mode 100644
index 91da01b30e..0000000000
--- a/src/showcase/tristatecheckbox/TriStateCheckboxDemo.js
+++ /dev/null
@@ -1,246 +0,0 @@
-import React, {Component} from 'react';
-import {Link} from 'react-router-dom';
-import {TriStateCheckbox} from '../../components/tristatecheckbox/TriStateCheckbox';
-import {TabView,TabPanel} from '../../components/tabview/TabView';
-import {CodeHighlight} from '../codehighlight/CodeHighlight';
-import AppContentContext from '../../AppContentContext';
-
-export class TriStateCheckboxDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TriStateCheckbox</h1>
-                        <p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
-
-                        <AppContentContext.Consumer>
-                            { context => <button onClick={() => context.onChangelogBtnClick("triStateCheckbox")} className="layout-changelog-button">{context.changelogText}</button> }
-                        </AppContentContext.Consumer>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Value: {this.state.value + ''}</h3>
-                    <TriStateCheckbox value={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-                </div>
-
-                <TriStateCheckboxDoc></TriStateCheckboxDoc>
-            </div>
-        );
-    }
-}
-
-class TriStateCheckboxDoc extends Component {
-
-    shouldComponentUpdate(){
-        return false;
-    }
-
-    render() {
-        return (
-            <div className="content-section documentation">
-                <TabView>
-                    <TabPanel header="Documentation">
-                        <h3>Import</h3>
-<CodeHighlight className="language-javascript">
-{`
-import {TriStateCheckbox} from 'primereact/tristatecheckbox';
-
-`}
-</CodeHighlight>
-
-                        <h3>Getting Started</h3>
-                        <p>TriStateCheckbox is used as a controlled input with <i>checked</i> and <i>onChange</i> properties.</p>
-<CodeHighlight className="language-jsx">
-{`
-<TriStateCheckbox value={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-
-`}
-</CodeHighlight>
-
-                    <h3>Properties</h3>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th>Default</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>id</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>inputId</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Unique identifier of the native checkbox element.</td>
-                                </tr>
-                                <tr>
-                                    <td>value</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Value of the TriStateCheckbox.</td>
-                                </tr>
-                                <tr>
-                                    <td>name</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Name of the checkbox element .</td>
-                                </tr>
-                                <tr>
-                                    <td>style</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Inline style of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>className</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Style class of the element.</td>
-                                </tr>
-                                <tr>
-                                    <td>disabled</td>
-                                    <td>boolean</td>
-                                    <td>false</td>
-                                    <td>When present, it specifies that the element value cannot be altered.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltip</td>
-                                    <td>any</td>
-                                    <td>null</td>
-                                    <td>Content of the tooltip.</td>
-                                </tr>
-                                <tr>
-                                    <td>tooltipOptions</td>
-                                    <td>object</td>
-                                    <td>null</td>
-                                    <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
-                                </tr>
-                                <tr>
-                                    <td>ariaLabelledBy</td>
-                                    <td>string</td>
-                                    <td>null</td>
-                                    <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Events</h3>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Parameters</th>
-                                    <th>Description</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>onChange</td>
-                                    <td>event.originalEvent: Browser event <br />
-                                        event.value: Current Value
-                                    </td>
-                                    <td>Callback to invoke on value change</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Styling</h3>
-                    <p>Following is the list of structural style classes, for theming classes visit <Link to="/theming">theming</Link> page.</p>
-                    <div className="doc-tablewrapper">
-                        <table className="doc-table">
-                            <thead>
-                                <tr>
-                                    <th>Name</th>
-                                    <th>Element</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-chkbox</td>
-                                    <td>Container element</td>
-                                </tr>
-                                <tr>
-                                    <td>p-tristatechkbox</td>
-                                    <td>Container element</td>
-                                </tr>
-                                <tr>
-                                    <td>p-chkbox-box</td>
-                                    <td>Container of icon.</td>
-                                </tr>
-                                <tr>
-                                    <td>p-chkbox-icon</td>
-                                    <td>Icon element.</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-
-                    <h3>Dependencies</h3>
-                    <p>None.</p>
-                </TabPanel>
-                <TabPanel header="Source">
-                    <a href="https://github.com/primefaces/primereact/tree/master/src/showcase/tristatecheckbox" className="btn-viewsource" target="_blank" rel="noopener noreferrer">
-                        <span>View on GitHub</span>
-                    </a>
-<CodeHighlight className="language-javascript">
-{`
-import React, {Component} from 'react';
-import {TriStateCheckbox} from 'primereact/tristatecheckbox';
-
-export class TriStateCheckboxDemo extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            value: null
-        };
-    }
-
-    render() {
-        return (
-            <div>
-                <div className="content-section introduction">
-                    <div className="feature-intro">
-                        <h1>TriStateCheckbox</h1>
-                        <p>TriStateCheckbox is used to select either "true", "false" or "null" as the value.</p>
-                    </div>
-                </div>
-
-                <div className="content-section implementation">
-                    <h3 className="first">Value: {this.state.value + ''}</h3>
-                    <TriStateCheckbox value={this.state.value} onChange={(e) => this.setState({value: e.value})} />
-                </div>
-            </div>
-        );
-    }
-}
-
-`}
-</CodeHighlight>
-                    </TabPanel>
-                </TabView>
-            </div>
-        )
-    }
-}
diff --git a/styles/demo/_common.scss b/styles/demo/_common.scss
new file mode 100644
index 0000000000..7324fd59a7
--- /dev/null
+++ b/styles/demo/_common.scss
@@ -0,0 +1,4 @@
+.mypanel .p-panel-header {
+    background-color: #07c4e8;
+    color: #ffffff;
+}
\ No newline at end of file
diff --git a/styles/demo/_datatable.scss b/styles/demo/_datatable.scss
new file mode 100644
index 0000000000..3408488c33
--- /dev/null
+++ b/styles/demo/_datatable.scss
@@ -0,0 +1,9 @@
+.p-datatable .p-datatable-tbody > tr > td.p-cell-editing,
+.p-treetable .p-treetable-tbody > tr > td.p-cell-editing {
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.p-datatable-frozen-tbody > tr {
+    font-weight: 700;
+}
\ No newline at end of file
diff --git a/styles/demo/_dock.scss b/styles/demo/_dock.scss
new file mode 100644
index 0000000000..b3b935af22
--- /dev/null
+++ b/styles/demo/_dock.scss
@@ -0,0 +1,109 @@
+.dock-demo {
+    .dock-window {
+        width: 100%;
+        height: 450px;
+        position: relative;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+
+    .p-dock {
+        z-index: 1000;
+    }
+
+    .dock-advanced {
+        .p-dialog-mask,
+        .p-galleria-mask,
+        .p-galleria-mask .p-galleria-item-nav,
+        .p-toast {
+            position: absolute;
+        }
+
+        .p-dialog {
+            .p-dialog-header {
+                padding: .2rem;
+            }
+
+            .p-dialog-content {
+                padding: 0;
+            }
+
+            p {
+                margin-top: 0;
+            }
+
+            .p-terminal {
+                background-color: #212121;
+                color: #ffffff;
+                border: 0 none;
+                min-height: 18rem;
+                height: 100%;
+
+                .p-terminal-command {
+                    color: #80CBC4;
+                }
+
+                .p-terminal-prompt {
+                    color: #FFD54F;
+                }
+
+                .p-terminal-response {
+                    color: #9FA8DA;
+                }
+            }
+
+            .p-tree {
+                height: 100%;
+                border-radius: 0;
+                border-left-width: 0;
+                border-right-width: 0;
+                border-bottom-width: 0;
+            }
+        }
+
+        .p-toast {
+            top: 20px;
+        }
+    }
+
+    .p-menubar {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-radius: 0;
+
+        .menubar-root {
+            font-weight: bold;
+            padding: 0 1rem;
+        }
+
+        .p-menuitem-link {
+            padding: 0.5rem .75rem;
+        }
+
+        .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
+            padding: 0.5rem .75rem;
+
+            > .p-submenu-icon {
+                display: none;
+            }
+        }
+
+        .p-menubar-end {
+            span, i {
+                padding: 0 .75rem;
+            }
+        }
+    }
+}
+
+.dark-tooltip {
+    .p-tooltip {
+        .p-tooltip-arrow {
+            border-top-color: var(--surface-900);
+        }
+
+        .p-tooltip-text {
+            background-color: var(--surface-900);
+        }
+    }
+}
diff --git a/styles/demo/_galleria.scss b/styles/demo/_galleria.scss
new file mode 100644
index 0000000000..5d3210f7df
--- /dev/null
+++ b/styles/demo/_galleria.scss
@@ -0,0 +1,62 @@
+.galleria-demo {
+    .custom-galleria {
+        &.fullscreen {
+            display: flex;
+            flex-direction: column;
+
+            .p-galleria-content {
+                flex-grow: 1;
+                justify-content: center;
+            }
+        }
+
+        .p-galleria-content {
+            position: relative;
+        }
+
+        .p-galleria-thumbnail-wrapper {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+        }
+
+        .p-galleria-thumbnail-items-container {
+            width: 100%;
+        }
+
+        .custom-galleria-footer {
+            display: flex;
+            align-items: center;
+            background-color: rgba(0, 0, 0, .9);
+            color: #ffffff;
+
+            > button {
+                background-color: transparent;
+                color: #ffffff;
+                border: 0 none;
+                border-radius: 0;
+                margin: .2rem 0;
+
+                &.fullscreen-button {
+                    margin-left: auto;
+                }
+
+                &:hover {
+                    background-color: rgba(255, 255, 255, 0.1);
+                }
+            }
+        }
+
+        .title-container {
+            > span {
+                font-size: .9rem;
+                padding-left: .829rem;
+
+                &.title {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+}
diff --git a/styles/demo/_organizationchart.scss b/styles/demo/_organizationchart.scss
new file mode 100644
index 0000000000..5a57b13e39
--- /dev/null
+++ b/styles/demo/_organizationchart.scss
@@ -0,0 +1,41 @@
+.organizationchart-demo {
+    .p-organizationchart {
+        .p-person {
+            padding: 0;
+            border: 0 none;
+        }
+
+        .node-header, .node-content {
+            padding: .5em .7rem;
+        }
+
+        .node-header {
+            background-color: #495ebb;
+            color: #ffffff;
+        }
+
+        .node-content {
+            text-align: center;
+            border: 1px solid #495ebb;
+        }
+
+        .node-content img {
+            border-radius: 50%;
+        }
+
+        .department-cfo {
+            background-color: #7247bc;
+            color: #ffffff;
+        }
+
+        .department-coo {
+            background-color: #a534b6;
+            color: #ffffff;
+        }
+
+        .department-cto {
+            background-color: #e9286f;
+            color: #ffffff;
+        }
+    }
+}
diff --git a/styles/demo/_scrollpanel.scss b/styles/demo/_scrollpanel.scss
new file mode 100644
index 0000000000..7a3d30491d
--- /dev/null
+++ b/styles/demo/_scrollpanel.scss
@@ -0,0 +1,33 @@
+.scrollpanel-demo {
+    .p-scrollpanel {
+        &.custombar1 {
+            .p-scrollpanel-wrapper {
+                border-right: 10px solid var(--surface-ground);
+            }
+
+            .p-scrollpanel-bar {
+                background-color: var(--primary-300);
+                opacity: 1;
+                transition: background-color .3s;
+
+                &:hover {
+                    background-color: var(--primary-400);
+                }
+            }
+        }
+
+        &.custombar2 {
+            .p-scrollpanel-wrapper {
+                border-right: 10px solid var(--surface-50);
+                border-bottom: 10px solid var(--surface-50);
+            }
+
+            .p-scrollpanel-bar {
+                background-color: var(--surface-200);
+                border-radius: 0;
+                opacity: 1;
+                transition: background-color .3s;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/demo/_timeline.scss b/styles/demo/_timeline.scss
new file mode 100644
index 0000000000..a6ee1c7c9f
--- /dev/null
+++ b/styles/demo/_timeline.scss
@@ -0,0 +1,19 @@
+@media screen and (max-width: 991px) {
+    .customized-timeline {
+        .p-timeline-event:nth-child(even) {
+            flex-direction: row !important;
+
+            .p-timeline-event-content {
+                text-align: left !important;
+            }
+        }
+
+        .p-timeline-event-opposite {
+            flex: 0;
+        }
+
+        .p-card {
+            margin-top: 1rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/demo/demo.scss b/styles/demo/demo.scss
new file mode 100644
index 0000000000..d534cc96f5
--- /dev/null
+++ b/styles/demo/demo.scss
@@ -0,0 +1,7 @@
+@import "http://github.com/_common";
+@import "http://github.com/_datatable";
+@import "http://github.com/_dock";
+@import "http://github.com/_galleria";
+@import "http://github.com/_organizationchart";
+@import "http://github.com/_scrollpanel";
+@import "http://github.com/_timeline";
diff --git a/styles/doc/index.css b/styles/doc/index.css
new file mode 100644
index 0000000000..7374b7eee1
--- /dev/null
+++ b/styles/doc/index.css
@@ -0,0 +1,4 @@
+.tsd-panel.tsd-comment:has(img),
+.tsd-comment img {
+    display: none !important;
+}
diff --git a/styles/layout/_code.scss b/styles/layout/_code.scss
new file mode 100644
index 0000000000..28663ba977
--- /dev/null
+++ b/styles/layout/_code.scss
@@ -0,0 +1,143 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    background: none;
+    font-family: ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,Liberation Mono,monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+
+div.code-toolbar > .toolbar {
+    display: none;
+}
+
+
+pre[class*="language-"] {
+    position: relative;
+    background: transparent;
+    margin: 0;
+    padding: 0;
+    max-height: 40rem;
+    overflow: auto;
+    color-scheme: dark;
+
+    &:before, &:after {
+        display: none !important;
+    }
+
+    code {
+        border-left: 1rem solid transparent;
+        box-shadow: none;
+        margin: 0;
+        font-size: 14px;
+        border-radius: 10px;
+        color: #ffffff;
+        max-height: inherit;
+        height: inherit;
+        padding: 0 1rem;
+        display: block;
+        overflow: auto;
+        
+        .token.comment,
+        .token.block-comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #bbf7d0;
+        }
+
+        .token.punctuation {
+            color: #bfdbfe;
+        }
+
+        .token.property,
+        .token.tag,
+        .token.boolean,
+        .token.number,
+        .token.function-name,
+        .token.constant,
+        .token.symbol,
+        .token.deleted {
+            color: #93c5fd;
+        }
+
+        .token.selector,
+        .token.attr-name,
+        .token.string,
+        .token.char,
+        .token.function,
+        .token.builtin,
+        .token.inserted {
+            color: #eff6ff;
+        }
+
+        .token.operator,
+        .token.entity,
+        .token.url,
+        .token.variable {
+            color: #ffffff;
+        }
+
+        .token.atrule,
+        .token.attr-value,
+        .token.keyword,
+        .token.class-name {
+            color: #bbf7d0;
+        }
+
+        .token.regex,
+        .token.important {
+            color: #fde68a;
+        }
+
+        .language-css .token.string,
+        .style .token.string {
+            color: #fde68a;
+        }
+
+        .token.important {
+            font-weight: normal;
+        }
+
+        .token.bold {
+            font-weight: bold;
+        }
+        .token.italic {
+            font-style: italic;
+        }
+
+        .token.entity {
+            cursor: help;
+        }
+    }
+}
+
+.copy-to-clipboard-button {
+    display: none;
+}
+
+pre[class*="language-"] {    
+    code {
+        background: var(--demo-code-bg);
+    }
+}
+
+.layout-light {
+    &[data-p-theme^="md"] {
+        pre[class*="language-"] {    
+            code {
+                background: var(--surface-900);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/_config.scss b/styles/layout/_config.scss
new file mode 100644
index 0000000000..87ed2e2442
--- /dev/null
+++ b/styles/layout/_config.scss
@@ -0,0 +1,52 @@
+.layout-config {
+    backdrop-filter: blur(20px);
+    background-color: var(--mobile-menu-bg);
+
+    .p-selectbutton {
+        .p-button {
+            padding: 0.5rem 1rem;
+
+            &:first-child {
+                border-top-left-radius: 30px;
+                border-bottom-left-radius: 30px;
+            }
+    
+            &:last-child {
+                border-top-right-radius: 30px;
+                border-bottom-right-radius: 30px;
+            }
+        }
+    }
+
+    button {
+        &:focus-visible {
+            outline: 0 none;
+            border-color: var(--surface-500) !important;
+        }
+    }
+
+    .grid {
+        > div {
+            padding: 1rem;
+        }
+    }
+
+    .p-inputswitch {
+        .p-inputswitch-slider {
+            border-radius: 30px;
+            
+            &:before {
+                border-radius: 30px;
+            }
+        }
+    }
+
+    &.layout-light {
+        background: var(--surface-overlay);
+    }
+
+    &.layout-dark {
+        background: var(rgba(0,0,0,.3));
+        border: 0 none;
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/_content.scss b/styles/layout/_content.scss
new file mode 100644
index 0000000000..d60687945a
--- /dev/null
+++ b/styles/layout/_content.scss
@@ -0,0 +1,18 @@
+.layout-content {
+    padding: 6rem 4rem 0 4rem;
+    display: flex;
+
+    .layout-content-slot {
+        flex: 1 1 auto;
+        width: 1%;
+        padding-top: .5rem;
+    }
+}
+
+.card {
+    background: var(--surface-card);
+    border: var(--card-border);
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}
diff --git a/styles/layout/_core.scss b/styles/layout/_core.scss
new file mode 100644
index 0000000000..ab819c5a2f
--- /dev/null
+++ b/styles/layout/_core.scss
@@ -0,0 +1,107 @@
+html {
+    font-size: 14px;
+}
+
+body {
+    margin: 0px;
+    min-height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background-color: var(--surface-ground);
+    font-weight: normal;
+    color: var(--text-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.layout-wrapper {
+    background-color: var(--surface-ground);
+}
+
+a {
+    text-decoration: none;
+}
+
+::selection {
+    background-color: var(--highlight-bg);
+    color: var(--highlight-text-color);
+} 
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 1.5rem 0 1rem 0;
+    font-family: inherit;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--surface-900);
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+h1 {
+    font-size: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+}
+
+h3 {
+    font-size: 1.25rem;
+}
+
+h4 {
+    font-size: 1.125rem;
+}
+
+h5 {
+    font-size: 1rem;
+}
+
+h6 {
+    font-size: .875rem;
+}
+
+p {
+    line-height: 1.75;
+    margin: 0 0 1rem 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
+
+.p-toast.p-toast-top-right,
+.p-toast.p-toast-top-left {
+    top: 7rem;
+}
+
+.px-link {
+    font-size: 1rem;
+    border-radius: var(--border-radius);
+    text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+
+    @include focus-visible();
+}
+
+.px-link:disabled {
+	cursor: default;
+}
+
+button {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings);
+}
\ No newline at end of file
diff --git a/styles/layout/_doc.scss b/styles/layout/_doc.scss
new file mode 100644
index 0000000000..f6504b3a54
--- /dev/null
+++ b/styles/layout/_doc.scss
@@ -0,0 +1,452 @@
+.doc-tabmenu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    margin-bottom: 2rem;
+    overflow: auto;
+    position: relative;
+
+    &:after {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        border-bottom: 1px solid var(--surface-border);
+        content: '';
+    }
+
+    li {
+        position: relative;
+        z-index: 1;
+
+        button {
+            background-color: transparent;
+            border: 0 none;
+            display: block;
+            padding: 0 2rem 1rem 2rem;
+            text-align: center;
+            color: var(--surface-700);
+            font-size: 1rem;
+            letter-spacing: 1px;
+            cursor: pointer;
+            margin: 0;
+            transition: all 0.2s;
+            border-bottom: 1px solid transparent;
+            border-top-right-radius: var(--border-round);
+            border-top-left-radius: var(--border-round);
+            white-space: nowrap;
+
+            &:hover {
+                border-bottom-color: var(--surface-500);
+            }
+
+            &:focus {
+                outline: 0 none;
+            }
+
+            @include focus-visible();
+        }
+
+        &.doc-tabmenu-active {
+            button {
+                border-bottom-color: var(--primary-color);
+                color: var(--primary-color);
+            }
+        }
+    }
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+.deferred-demo-loading {
+    border-radius: 10px;
+    height: 350px;
+    position: relative;
+    overflow: hidden;
+}
+
+.deferred-demo-loading::after {
+    content: '';
+    animation: deferred-demo-loading 1.2s infinite;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    transform: translateX(-100%);
+    z-index: 1;
+    border-radius: 10px;
+    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--surface-100), rgba(255, 255, 255, 0));
+}
+
+@keyframes deferred-demo-loading {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+.doc-tabpanel,
+.doc {
+    display: flex;
+}
+
+.doc-main {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    min-width: 0;
+}
+
+.doc-intro {
+    margin-bottom: 1.5rem;
+
+    p {
+        font-size: 1.125rem;
+        color: var(--surface-900);
+        margin: 0;
+    }
+}
+
+.doc-section-label {
+    display: flex;
+    align-items: center;
+    scroll-margin-top: 6.5rem;
+
+    > a {
+        color: var(--primary-color);
+        opacity: 0.7;
+        margin-left: 1rem;
+        display: none;
+        transition: all .2s;
+        border-radius: var(--border-radius);
+        @include focus-visible();
+    }
+
+    &:hover {
+        > a {
+            display: block;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.doc-section-description {
+    > p {
+        font-size: 1.125rem;
+        color: var(--surface-900);
+
+        i {
+            border-radius: 6px;
+            padding: 2px 6px;
+            font-size: 1rem;
+            font-weight: 500;
+            font-style: normal;
+            background-color: var(--doc-highlight-text-bg);
+            color: var(--doc-highlight-text-color);
+        }
+
+        a {
+            color: var(--primary-color);
+            font-weight: 500;
+            transition: all .2s;
+            border-radius: var(--border-radius);
+            @include focus-visible();
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+    }
+
+    .notification {
+        line-height: 1.5;
+        padding: 1rem;
+        font-weight: 500;
+        border-radius: 10px;
+        background-color: var(--doc-highlight-text-bg);
+        color: var(--doc-highlight-text-color);
+    }
+}
+
+.doc-section-nav-container {
+    position: sticky;
+    top: 6rem;
+    right: 0;
+    width: 14rem;
+    margin: 0;
+    padding-block: 0.25rem;
+    padding-inline: 0;
+    margin-inline-start: 4rem;
+    display: flex;
+    flex-direction: column;
+    align-self: flex-start;
+    max-height: calc(100vh - 14rem);
+}
+
+.doc-section-nav {
+    list-style: none;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    padding: 0;
+
+    >.navbar-item {
+        .navbar-item-content {
+            border-left: 1px solid var(--surface-border);
+            padding-left: .25rem;
+            transition: all .2s;
+
+            &:hover {
+                border-left-color: var(--surface-500);
+            }
+        }
+    }
+
+    .navbar-item {
+        >.navbar-item-content {
+            display: flex;
+
+            .px-link {
+                padding: 0.25rem 1rem 0.25rem 1rem;
+                color: var(--surface-800);
+                font-weight: 400;
+                white-space: nowrap;
+                min-width: 0;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                transition: all .2s;
+            }
+
+            &:hover {
+                .px-link {
+                    color: var(--surface-900);
+                }
+            }
+        }
+
+        &.active-navbar-item {
+            > .navbar-item-content {
+                border-color: var(--primary-color);
+
+                .px-link {
+                    color: var(--primary-color);
+                }
+            }
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            .navbar-item {
+                .navbar-item-content {
+                    padding-left: 1rem;
+                }
+            }
+        }
+    }
+}
+
+.doc-section-code {
+    position: relative;
+
+    div {
+        &::-webkit-scrollbar {
+            width: 5px;
+        }
+    }
+
+    &:not(:last-child) {
+        margin-bottom: 1rem;
+    }
+
+    &:hover {
+        .doc-section-code-buttons {
+            display: flex;
+        }
+    }
+}
+
+.doc-section-code-buttons {
+    position: absolute;
+    align-items: center;
+    justify-content: end;
+    z-index: 1;
+    top: .75rem;
+    right: .75rem;
+    gap: .5rem;
+    display: none;
+    background: rgba(255,255,255,.05);
+    border-radius: 10px;
+    padding: 2px;
+    backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, .1);
+
+    button {
+        outline: 0 none;
+        border-radius: 8px;
+        outline-offset: 0;
+        background-color: transparent;
+        transition: background-color .2s, box-shadow .2s;
+        border: 0 none;
+        color: var(--demo-code-button-color);
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--demo-code-button-hover-bg);
+            color: var(--demo-code-button-hover-color);
+        }
+
+        &.code-active {
+            color: #bbf7d0;
+        }
+    }
+}
+
+.doc-section-code-tooltip .p-tooltip-text {
+    padding: 0.5rem;
+    font-size: 11px;
+}
+
+
+
+.doc-tablewrapper {
+    overflow: auto;
+}
+
+.doc-table {
+    border-collapse: collapse;
+    width: 100%;
+    min-width: 960px;
+    margin-bottom: 1.5rem;
+
+    th {
+        border-bottom: 1px solid var(--surface-border);
+        padding: .75rem 1rem;
+        text-align: left;
+        text-transform: capitalize;
+    }
+
+    tbody {
+        tr:hover {
+            background: var(--surface-hover);
+        }
+
+        td {
+            padding: .75rem 1rem;
+            border-bottom: 1px solid var(--surface-border);
+            white-space: pre-line;
+            line-height: 1.5;
+            scroll-margin-top: 6.5rem;
+
+            &:first-child {
+                color: var(--primary-color);
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 600;
+            }
+
+            .doc-option-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-500);
+                font-weight: 500;
+
+                .doc-option-type-options-container {
+                    display: flex;
+                    align-items: center;
+                }
+
+                span.doc-option-type-options {
+                    color: var(--primary-700);
+                }
+
+                &.doc-option-link {
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+
+            .doc-option-name,
+            > i:not(.pi) {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                position: relative;
+                scroll-margin-top: 6.5rem;
+                background-color: var(--doc-highlight-text-bg);
+                color: var(--doc-highlight-text-color);
+                border-radius: 6px;
+                padding: 2px 6px;
+                font-weight: 600;
+                font-style: normal;
+                white-space: nowrap;
+
+                .doc-option-link {
+                    position: absolute;
+                    top: 0;
+                    right: -1.5rem;
+                    color: var(--primary-color);
+                    opacity: 0.7;
+                    display: none;
+                    transition: opacity 0.3s, colors 0.3s;
+                }
+            }
+
+            &:hover {
+                .doc-option-name {
+                    .doc-option-link {
+                        display: inline;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+
+            .doc-option-default,
+            .doc-option-returnType {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 400;
+                font-style: normal;
+                display: flex;
+                border-width: 1px;
+                border-style: solid;
+                border-radius: 6px;
+                padding: 2px 6px;
+                max-width: min-content;
+            }
+
+            .doc-option-parameter-name {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-700);
+            }
+
+            .doc-option-parameter-type {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                color: var(--primary-500);
+            }
+
+            .doc-option-params {
+                font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+            }
+
+            .doc-option-light {
+                background: var(--bluegray-50);
+                border-color: var(--bluegray-100);
+            }
+
+            .doc-option-dark {
+                background: var(--bluegray-800);
+                border-color: var(--bluegray-800);
+            }
+        }
+    }
+}
diff --git a/styles/layout/_docsearch.scss b/styles/layout/_docsearch.scss
new file mode 100644
index 0000000000..772aa1b9cc
--- /dev/null
+++ b/styles/layout/_docsearch.scss
@@ -0,0 +1,149 @@
+.DocSearch-Button {
+    border-radius: var(--border-radius);
+    border: 1px solid var(--surface-border);
+    height: 2rem;
+    background-color: var(--surface-card);
+    margin: 0;
+    transition: all .3s;
+    padding: 0 .5rem;
+    @include focus-visible();
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+
+    &:hover {
+        border-color: var(--primary-color);
+        box-shadow: none;
+    }
+
+    .DocSearch-Search-Icon {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .DocSearch-Button-Keys {
+        overflow: hidden;
+        min-width: auto;
+        height: auto;
+        background: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: auto;
+        padding: 0;
+        gap: 2px;
+
+        .DocSearch-Button-Key {
+            background: transparent;
+            display: flex;
+            padding: 0;
+            margin: 0;
+            top: 0;
+            border-radius: 0;
+            height: auto;
+            width: auto;
+            font-family: var(--font-family);
+
+            &:first-child {
+                font-size: 0.75rem;
+                line-height: normal;
+            }
+
+            &:last-child {
+                justify-content: start;
+                align-items: center;
+                font-size: 0.75rem;
+                position: relative;
+                
+                &::before {
+                    content: "\e90d";
+                    display: flex;
+                    color: var(--text-color);
+                    font-family: "primeicons";
+                    font-size: .4rem;
+                    opacity: .7;
+                    margin-right: 2px;
+                    height: 13.5px;
+                    align-items: center;
+                    font-weight: 700;
+
+                }
+            }
+        }        
+    }
+}
+
+.DocSearch-Container {
+    z-index: 1101;
+}
+
+.DocSearch-Modal {
+    border: 1px solid var(--surface-border);
+    box-shadow: none;
+}
+
+.DocSearch-Footer {
+    box-shadow: none;
+    border-top: 1px solid var(--surface-border);
+    background-color: var(--surface-overlay);
+}
+
+.DocSearch-Form {
+    background: var(--surface-card);
+    box-shadow: none;
+    border: 1px solid var(--surface-border);
+    border-radius: var(--border-radius);
+    transition: border-color .3s;
+
+    &:hover {
+        border-color: var(--primary-color);
+    }
+
+    .DocSearch-MagnifierLabel, .DocSearch-Reset {
+        color: var(--text-color);
+    }
+}
+
+.DocSearch-Hit {
+    border-bottom: 1px solid var(--surface-border);
+    padding-bottom: 0;
+    margin-bottom: .25rem;
+}
+
+.DocSearch-Hit-source {
+    color: var(--primary-color);
+}
+
+.DocSearch-Logo .cls-1, .DocSearch-Logo .cls-2 {
+    fill: var(--primary-color);
+}
+
+.DocSearch-Prefill {
+    color: var(--primary-color);
+}
+
+.DocSearch-Button-Placeholder {
+    text-align: center;
+    display: inline-block;
+    font-size: .875rem;
+}
+
+:root {
+    --docsearch-searchbox-focus-background: var(--surface-card);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-muted-color: var(--text-color);
+    --docsearch-searchbox-background: var(--surface-card);
+    --docsearch-text-color: var(--text-color);
+    --docsearch-modal-background: var(--surface-overlay);
+    --docsearch-key-gradient: var(--surface-ground);
+    --docsearch-key-shadow: none;
+    --docsearch-container-background: var(--maskbg);
+    --docsearch-hit-background: var(--surface-overlay);
+    --docsearch-hit-shadow: none;
+    --docsearch-spacing: 1rem;
+    --docsearch-hit-color: var(--text-color);
+    --docsearch-highlight-color: var(--primary-color);
+    --docsearch-hit-active-color: var(--primary-color-text);
+}
+
diff --git a/styles/layout/_footer.scss b/styles/layout/_footer.scss
new file mode 100644
index 0000000000..0eb285db1f
--- /dev/null
+++ b/styles/layout/_footer.scss
@@ -0,0 +1,25 @@
+.layout-footer {
+    padding: 2rem 4rem;
+    margin-top: 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    font-weight: 500;
+    color: var(--text-800);
+    border-top: 1px solid var(--surface-border);
+
+    a {
+        color: var(--primary-color);
+        font-weight: 700;
+        transition: all .3s;
+        border-radius: var(--border-radius);
+
+        @include focus-visible();
+
+        &:hover {
+            text-decoration: underline;
+        }
+        
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/_glow.scss b/styles/layout/_glow.scss
new file mode 100644
index 0000000000..f2e2895b15
--- /dev/null
+++ b/styles/layout/_glow.scss
@@ -0,0 +1,7 @@
+.landing, .layout-wrapper {
+    background-image: var(--glow-image);
+    background-blend-mode: var(--glow-blend);
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: auto 20rem;
+}
\ No newline at end of file
diff --git a/styles/layout/_mixins.scss b/styles/layout/_mixins.scss
new file mode 100644
index 0000000000..6c13e91b11
--- /dev/null
+++ b/styles/layout/_mixins.scss
@@ -0,0 +1,13 @@
+@mixin focus-visible($type: null) {
+    &:focus-visible {
+        outline: 0 none;
+        outline-offset: 0;
+        box-shadow: $type var(--focus-ring);
+    }
+}
+
+@mixin mobile {
+    @media (max-width: 900px) {
+        @content;
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/_news.scss b/styles/layout/_news.scss
new file mode 100644
index 0000000000..f2d4686349
--- /dev/null
+++ b/styles/layout/_news.scss
@@ -0,0 +1,92 @@
+.layout-news {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1100;
+    width: 100%;
+    height: 2rem;
+    padding: 0 2rem;
+    background-color: var(--primary-color);
+
+    .layout-news-container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: calc(100% - var(--scrollbar-width, 0px));
+        height: 100%;
+    }
+
+    .layout-news-content {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 0%;
+    }
+
+    .layout-news-text {
+        line-height: 1.5;
+        display: block;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        min-width: 0%;
+        font-weight: 500;
+        color: var(--primary-color-text);
+    }
+
+    .layout-news-link {
+        margin-left: 0.5rem;
+        line-height: 1.5;
+        white-space: nowrap;
+    }
+
+    .layout-news-link,
+    .layout-news-link:visited,
+    .layout-news-link:active {
+        color:var(--primary-color-text);
+        font-weight:700;
+    }
+    .layout-news-link:hover {
+        text-decoration: underline;
+    }
+
+    .layout-news-close {
+        line-height: 1.5;
+        cursor: pointer;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        width: 1.5rem;
+        height: 1.5rem;
+        transition: background-color 0.3s;
+        margin-left: 0.5rem;
+        color: var(--primary-color-text);
+
+        &:hover {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+}
+
+.layout-news-active {
+    .layout-topbar {
+        top: 2rem;
+    }
+
+    .layout-sidebar,
+    .doc-section-nav {
+        top: 8rem;
+    }
+
+    .layout-content {
+        padding-top: 8rem;
+    }
+
+    .doc-section-label,
+    .doc-table tbody td .doc-option-name,
+    .doc-table tbody td > i {
+        scroll-margin-top: 8.5rem;
+    }
+}
diff --git a/styles/layout/_responsive.scss b/styles/layout/_responsive.scss
new file mode 100644
index 0000000000..e46a70ded5
--- /dev/null
+++ b/styles/layout/_responsive.scss
@@ -0,0 +1,177 @@
+@media screen and (min-width: 1920px) {
+    .layout-content {
+        max-width: 1728px;
+        margin: 0 auto;
+    }
+
+    .layout-topbar-inner,
+    .layout-footer {
+        max-width: 1728px;
+        margin: 0 auto;
+    }
+
+}
+
+@media screen and (max-width: 1199px) {
+    .layout-topbar-inner {
+        padding-left: 2rem;
+        padding-right: 2rem;
+
+        .menu-button {
+            display: block;
+        }
+
+        .layout-topbar-logo-container {
+            width: auto;
+            margin-right: 0;
+        }
+
+        .DocSearch-Button {
+            width: 2rem;
+            height: 2rem;
+            overflow: hidden;
+            padding: 0;
+            justify-content: center;
+            align-items: center;
+
+            .DocSearch-Search-Icon {
+                width: 1rem;
+                height: 1rem;
+            }
+
+            .DocSearch-Button-Placeholder,
+            .DocSearch-Button-Keys {
+                display: none;
+            }
+        }
+    }
+
+    .layout-sidebar {
+        top: 0;
+        left: 0;
+        position: fixed;
+        z-index: 1102;
+        height: 100%;
+        transform: translateX(-100%);
+        background-color: var(--mobile-menu-bg);
+        backdrop-filter: blur(20px);
+        width: 300px;
+        opacity: 0;
+
+        nav {
+            padding: 1rem 1rem;
+        }
+
+        &.active {
+            opacity: 1;
+            transform: translateX(0);
+        }
+    }
+
+    .layout-news-active {
+        .layout-sidebar {
+            top: 0;
+        }
+    }
+
+    .layout-mask {
+        background-color: rgba(0, 0, 0, 0.1);
+
+        &.layout-mask-active {
+            z-index: 1101;
+            width: 100%;
+            height: 100%;
+            position: fixed;
+            top: 0;
+            left: 0;
+            background-color: rgba(0, 0, 0, 0.4);
+            transition: background-color .5s;
+        }
+    }
+
+    .doc-section-nav-container {
+        display: none;
+    }
+
+    .video-container {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-bottom: 56.25%;
+
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .layout-content {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .layout-footer {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .blocked-scroll {
+        overflow: hidden;
+        padding-right: var(--scrollbar-width);
+    }
+}
+
+@media (max-width: 768px) {
+    .DocSearch-Container {
+        position: fixed !important;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .layout-topbar-inner {
+        padding-left: 1rem;
+        padding-right: 1rem;
+
+        .layout-topbar-logo {
+            display: none;
+        }
+
+        .layout-topbar-icon {
+            display: inline-flex;
+        }
+    }
+
+    .layout-content {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .layout-footer {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    .doc-tabmenu {
+        li {
+            flex: 1 1 0;
+
+            button {
+                width: 100%;
+                min-width: auto;
+            }
+        }
+    }
+
+    .layout-news {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        font-size: 12px;
+
+        > i {
+            display: none;
+        }
+    }
+}
diff --git a/styles/layout/_sidebar.scss b/styles/layout/_sidebar.scss
new file mode 100644
index 0000000000..d512bb1757
--- /dev/null
+++ b/styles/layout/_sidebar.scss
@@ -0,0 +1,154 @@
+.layout-sidebar {
+    position: sticky;
+    left: 0;
+    top: 6rem;
+    height: calc(100vh - 9rem);
+    user-select: none;
+    transition: transform .4s cubic-bezier(.05,.74,.2,.99), opacity .3s;
+    display: flex;
+    flex-direction: column;
+    padding: 0 0 0 0;
+    flex: 0 0 250px;
+    margin-right: 4rem;
+    overflow: auto;
+
+    .logo {
+        display: flex;
+        justify-content: center;
+    }
+
+    nav {
+        padding: 0 1rem 0 0;
+        margin: 0;
+        flex-grow: 1;
+    }
+
+    .layout-menu {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        > li {
+            margin-bottom: .25rem;
+            
+            > button, 
+            > a {
+                display: flex;
+                width: 100%;
+                align-items: center;
+                padding: .5rem 0;
+                color: var(--surface-900);
+                font-weight: 600;
+                transition: all .2s;
+                border-radius: var(--border-radius);
+
+                .menu-icon {
+                    width: 2rem;
+                    height: 2rem;
+                    border-radius: var(--border-radius);
+                    margin-right: .5rem;
+                    border: 1px solid var(--surface-border);
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    transition: all .2s;
+    
+                    i {
+                        color: var(--surface-700);
+                        transition: all .2s;
+                    }
+                }
+    
+                .menu-toggle-icon {
+                    color: var(--surface-700);
+                    margin-left: auto;
+                }
+
+                &:hover {
+                    .menu-icon {
+                        i {
+                            color: var(--primary-color);
+                        }
+                    }
+
+                    .menu-toggle-icon {
+                        color: var(--surface-900);
+                    }
+                }
+
+                &.router-link-active {
+                    color: var(--primary-color);
+        
+                    > .menu-icon {
+                        i {
+                            color: var(--primary-color);
+                        }
+                    }
+                }
+
+                @include focus-visible(inset);
+            }
+            
+            > div {
+                ol {
+                    margin: 0 0 0 1rem;
+                    padding: .25rem 0;
+                    list-style: none;
+
+                    li {
+                        a {
+                            color: var(--surface-700);
+                            border-left: 1px solid var(--surface-border);
+                            transition: all .2s;
+                            font-weight: 450;
+                            display: flex;
+                            padding: .5rem .5rem .5rem 1rem;
+                            color: var(--surface-700);
+                            transition: all .2s;
+
+                            &:focus-visible {
+                                outline: 0 none;
+                                box-shadow: inset var(--focus-ring);
+                            }
+            
+                            &:hover {
+                                color: var(--surface-900);
+                                border-left-color: var(--surface-500);
+                            }
+
+                            &.router-link-active {
+                                color: var(--primary-color);
+                                border-left-color: var(--primary-color);
+                            }
+                        }
+
+                        ol {
+                            margin: 0;
+                            padding: 0;
+                        }
+
+
+
+                        &:has(.menu-child-category) {
+                            margin-top: 1rem;
+                        }
+
+                        &:has(.menu-child-category):first-child {
+                            margin-top: 0rem;
+                        }
+                    }
+                }
+            }
+        }
+
+        .menu-child-category {
+            display: flex;
+            padding: .5rem .5rem .5rem 0;
+            font-size: .875rem;
+            font-weight: 600;
+            letter-spacing: 1px;
+            color: var(--surface-900);
+            margin-bottom: .25rem;
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/_topbar.scss b/styles/layout/_topbar.scss
new file mode 100644
index 0000000000..bafd71ff3d
--- /dev/null
+++ b/styles/layout/_topbar.scss
@@ -0,0 +1,54 @@
+.layout-topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100% - var(--scrollbar-width, 0px));
+    z-index: 1100;
+    transition: background-color .5s, border-color .5s;
+    border-bottom: 1px solid transparent;
+
+    &.layout-topbar-sticky {
+        border-bottom: 1px solid var(--surface-border);
+        background-color: var(--topbar-sticky-bg);
+        backdrop-filter: blur(8px);
+    }
+}
+
+.layout-topbar-inner {
+    height: 4rem;
+    padding: 0 4rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .layout-topbar-logo-container {
+        width: 250px;
+        margin-right: 4rem;
+    }
+
+    .layout-topbar-logo,
+    .layout-topbar-icon {
+        border-radius: var(--border-radius);
+        @include focus-visible();
+    }
+
+    .layout-topbar-logo {
+        display: inline-flex;
+
+        svg {
+            width: 165px;
+        }
+    }
+
+    .layout-topbar-icon {
+        display: none;
+
+        svg {
+            width: 36px;
+        }
+    }
+    
+    .menu-button {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_blocks.scss b/styles/layout/landing/_blocks.scss
new file mode 100644
index 0000000000..69a76d68fb
--- /dev/null
+++ b/styles/layout/landing/_blocks.scss
@@ -0,0 +1,222 @@
+.landing-blocks {
+    * {
+        box-sizing: content-box;
+    }
+
+    background: var(--home-blocks-bg);
+
+    .prime-blocks {
+        transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
+        margin: -12rem 0;
+
+        &.blocks-animation {
+            .prime-block {
+                .block-sidebar, 
+                .block-header, 
+                .block-sidebar-list,
+                .block-content {
+                    opacity: 1;
+                    visibility: visible;
+                    transform: scale(1);
+                }
+            }
+        }
+
+        .prime-block {
+            background: var(--home-blocks-block-bg);
+            box-shadow:var(--home-blocks-block-shadow);
+            border-left: var(--home-blocks-border-left);
+            border-bottom: var(--home-blocks-border-bottom);
+            border-radius: 10px;
+            height: 300px;
+            width: 600px;
+            position: relative;
+            z-index: 1;
+            margin: 15px;
+            transition: opacity 1.3s, transform 1.3s;
+
+            .block-sidebar, 
+            .block-header, 
+            .block-sidebar-list, 
+            .block-content {
+                transition: opacity 1.3s, transform 1.3s;
+                opacity: 0;
+                visibility: hidden;
+                transform: scale(0.9);
+            }
+
+            &:before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left:0;
+                right:0;
+                bottom: 0;
+                border-radius: 6px;
+                border: var(--home-blocks-border)
+            }
+            
+            .block-sidebar,
+            .block-header {
+                background: var(--home-blocks-sidebar-bg);
+                border-radius: 6px;
+            }
+
+            .block-sidebar-list {
+                background: var(--home-blocks-list-bg);
+            }
+            
+            .block-content {
+                .block-main {
+                    border: var(--home-blocks-main-border);
+                    border-radius: 13px;
+                    background: var(--home-blocks-main-bg);
+                }
+            }
+        }
+
+        .block-item {
+            background: var(--home-blocks-item-bg);
+            border-radius: 6px;
+            padding: 1rem;
+            transition: transform 1s, box-shadow 1s;
+            overflow: hidden;
+            transform: translateY(0);
+
+            .box {
+                border-radius: 4px;
+                width: 14px;
+                height: 14px;
+                
+                &.box-orange{
+                    background-color: #F57C00;
+                }
+
+                &.box-pink{
+                    background-color: #E91E63;
+                }
+
+                &.box-green {
+                    background-color: #4CAF50;
+                }
+
+                &.box-blue{
+                    background-color: #2196F3;
+                }
+            }
+            
+            .block-image {
+                background-color: var(--home-blocks-image-bg);
+                height: 44px;
+            }
+
+            .text {
+                display: block;
+                font-size: 24px;
+                font-weight: 700;
+                color: var(--home-blocks-text-color);
+            }
+
+            &.block-item-active {
+                box-shadow: var(--home-blocks-active-shadow);
+                border-radius: 6px;
+                border-top: var(--home-blocks-active-border-top);
+                border-right: var(--home-blocks-active-border-right);
+                border-bottom: var(--home-blocks-active-border-bottom);
+                border-left: var(--home-blocks-active-border-left);
+                position: relative;
+                z-index: 5;
+                animation: block-animation 1500ms ease-in-out alternate infinite;
+
+                &.animation-2{
+                    animation-delay: 1s;
+                }
+                
+                &.animation-3{
+                    animation-delay: 1.5s;
+                }
+            }
+
+            &.block-item-col {
+                background: none !important;
+                border: none;
+                padding: 12px 0;
+            }
+
+            &.block-item-table {
+                border-radius: 100px;
+                padding: 10px;
+                
+                .bar{
+                    background: var(--home-blocks-tablebar-bg);
+                }
+            }
+        }
+
+        .bar {
+            background: var(--home-blocks-bar-bg);
+            height: 6px;
+            border-radius: 10px;
+
+            &.bar-highlight {
+                background: var(--home-highlight-color);
+
+                &:before {
+                    background: var(--home-highlight-fore-color) !important ;
+                }
+            }
+
+            &.bar-button {
+                height: 16px;
+                position: relative;
+                
+                &:before {
+                    content: '';
+                    position: absolute;
+                    top: 6px;
+                    left: 10px;
+                    right: 10px;
+                    bottom: 6px;
+                    height: 3px;
+                    border-radius: 6px;
+                    background: var(--home-blocks-bar-button-bg);
+                }
+            }
+        }
+
+        .circle {
+            width: 18px;
+            height: 18px;
+            border-radius: 100%;
+            background: var(--home-blocks-circle-bg);
+
+            &.circle-small {
+                width: 8px;
+                height: 8px;
+            }
+
+            &.circle-medium {
+                width: 14px;
+                height: 14px;
+            }
+
+            &.circle-highlight {
+                background: var(--home-highlight-color);
+            }
+        }
+    }
+}
+
+@media screen and (max-width: $landingBreakpointXL) {
+    .landing-blocks .prime-blocks {
+        margin: -24rem 0;
+        transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg) scale(0.6);
+    }
+}
+
+@keyframes block-animation {
+    to {
+        transform: translateY(-10px) translateX(10px) scale(1.02);
+        box-shadow: var(--home-blocks-animation-shadow);
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_features.scss b/styles/layout/landing/_features.scss
new file mode 100644
index 0000000000..219b064760
--- /dev/null
+++ b/styles/layout/landing/_features.scss
@@ -0,0 +1,10 @@
+.landing-features {
+    .box {
+        box-shadow: var(--home-features-card-shadow);
+    }
+    .features-container{
+        max-width: 1250px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_footer.scss b/styles/layout/landing/_footer.scss
new file mode 100644
index 0000000000..3b97a5c680
--- /dev/null
+++ b/styles/layout/landing/_footer.scss
@@ -0,0 +1,5 @@
+.landing-footer {
+    a {
+        @include focus-visible();
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_getstarted.scss b/styles/layout/landing/_getstarted.scss
new file mode 100644
index 0000000000..f3d55c3468
--- /dev/null
+++ b/styles/layout/landing/_getstarted.scss
@@ -0,0 +1,11 @@
+.landing-getstarted {
+    .download-icon {
+        color: var(--home-highlight-color);
+    }
+
+    .download-box {
+        span {
+            color: var(--home-primary-text-color);
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_hero.scss b/styles/layout/landing/_hero.scss
new file mode 100644
index 0000000000..60a6db5fbc
--- /dev/null
+++ b/styles/layout/landing/_hero.scss
@@ -0,0 +1,22 @@
+.landing-hero {
+    .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+        background: transparent;
+    }
+
+    .box {
+        box-shadow: var(--home-card-shadow);
+    }
+
+    .p-datepicker, .p-datepicker-header {
+        background: transparent;
+        border-color: transparent;
+    }
+}
+
+@media screen and (min-width: 1660px) {
+    .landing-hero {
+        width: 1504px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_landing.scss b/styles/layout/landing/_landing.scss
new file mode 100644
index 0000000000..a02515e118
--- /dev/null
+++ b/styles/layout/landing/_landing.scss
@@ -0,0 +1,14 @@
+$landingBreakpointMD: 767px;
+$landingBreakpointLG: 991px;
+$landingBreakpointXL: 1199px;
+
+@import 'http://github.com/_mixins';
+@import 'http://github.com/_main';
+@import 'http://github.com/_hero';
+@import 'http://github.com/_users';
+@import 'http://github.com/_getstarted';
+@import 'http://github.com/_themes';
+@import 'http://github.com/_blocks';
+@import 'http://github.com/_templates';
+@import 'http://github.com/_features';
+@import 'http://github.com/_footer';
diff --git a/styles/layout/landing/_main.scss b/styles/layout/landing/_main.scss
new file mode 100644
index 0000000000..2d88aaa389
--- /dev/null
+++ b/styles/layout/landing/_main.scss
@@ -0,0 +1,182 @@
+.landing {
+    background-color: var(--home-bg);
+    scroll-behavior: smooth;
+    padding-top: 4rem;
+
+    .box {
+        border: 1px solid var(--home-border-color);
+        border-radius: 10px;
+        background-color: var(--home-box-bg);
+        position: relative;
+        z-index: 0;
+        
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            right: -2px;
+            bottom: -2px;
+            border: 2px solid var(--home-box-ring-color);
+            transition: all .5s;
+            animation: clippath 3s infinite linear;
+            border-radius: 10px;
+            opacity: 0;
+            z-index: -1;
+        }
+        
+        &::after {
+            animation: clippath 3s infinite -1.5s linear;
+        }
+
+        &:hover {
+            &::before,
+            &::after {
+                opacity: 1;
+            }
+        }
+    }
+
+    @keyframes clippath {
+        0%,
+        100% {
+            clip-path: inset(0 0 98% 0);
+        }
+        
+        25% {
+            clip-path: inset(0 98% 0 0);
+        }
+        50% {
+            clip-path: inset(98% 0 0 0);
+        }
+        75% {
+            clip-path: inset(0 0 0 98%);
+        }
+    }
+
+    .linkbox {
+        transition: background-color .2s, border-color .2s;
+        display: inline-flex;
+        align-items: center;
+        color: var(--home-linkbox-text-color);
+        padding: 0.5rem 1rem;
+        border: var(--home-linkbox-border);
+        background-color: var(--home-linkbox-bg);
+        border-radius: 10px;
+        cursor: pointer;
+        
+        @include focus-visible();
+
+        &:hover {
+            background: var(--home-linkbox-hover-bg);
+        }
+
+        &.active {
+            background: var(--home-highlight-color);
+            color: var(--home-highlight-fore-color);
+
+            &:hover {
+                background: var(--home-highlight-darker-color);
+            }
+        }
+    }
+
+    .section-header {
+        font-size: 2rem;
+        color: var(--home-primary-text-color);
+        font-weight: 700;
+        text-align: center;
+        padding: 0 2rem;
+    }
+
+    .section-detail {
+        text-align: center;
+        color: var(--home-secondary-text-color);
+        font-weight: 500;
+        font-size: 1.25rem;
+        margin: 1.5rem 0 0 0;
+        padding: 0 2rem;
+    }
+
+    .section-divider {
+        border: 1px solid var(--home-border-color);
+        height: 1px;
+        border-bottom: 0 none;
+        overflow: hidden;
+    }
+
+    &.layout-news-active {
+        padding-top: 6rem;
+    }
+}
+
+.text-secondary {
+    color: var(--home-secondary-text-color);
+}
+
+.hover\:surface-hover:hover {
+    background-color: var(--surface-hover);
+}
+
+.landing-footer-container {
+    max-width: 1250px !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
+}
+
+.animated-text {
+    position: relative;
+    color: var(--home-text-color);
+    padding: 0.25rem 0.5rem;
+    border-radius: var(--border-radius);
+    display: inline-block;
+    width: 14.45rem;
+
+    &::before {
+        border-radius: var(--border-radius);
+        animation: color-animation 2s linear infinite;
+        background-size: auto auto;
+        background-clip: border-box;
+        background-size: 200% auto;
+        content: "";
+        width: 14.45rem;
+        height: 1.5rem;
+        position: absolute;
+        z-index: 0;
+        background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
+        filter: blur(24px);
+        opacity: 0.6;
+    }
+
+    > span {
+        position: relative;
+        z-index: 3;
+        background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
+        animation: color-animation 2s linear infinite;
+        background-size: auto auto;
+        background-clip: border-box;
+        background-size: 200% auto;
+        background-clip: text;
+        text-fill-color: transparent;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
+
+@keyframes color-animation {
+    40%,
+    100% {
+        background-position: -200% center;
+    }
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateX(0%);
+    }
+
+    100% {
+        transform: translateX(calc(-100% - 3rem));
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_templates.scss b/styles/layout/landing/_templates.scss
new file mode 100644
index 0000000000..b83757e2f1
--- /dev/null
+++ b/styles/layout/landing/_templates.scss
@@ -0,0 +1,251 @@
+.landing-templates {
+    overflow: hidden;
+    background: var(--home-templates-bg);
+
+    .templates {
+        transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
+        position: relative;
+        z-index: 1;
+        
+        .template-block {
+            width: 504px;
+            height: 257px;
+            background-size: cover;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow: var(--home-templates-block-shadow);
+            border-left: var(--home-templates-block-border-left);
+            border-bottom: var(--home-templates-block-border-bottom);
+            position: relative;
+            z-index: 1;
+            transition: 1.5s;
+            opacity:0;
+            visibility: hidden;
+
+            &.block-1 {
+                animation: animated-block-1 2s ease-in-out alternate infinite;
+            }
+
+            &.block-2 {
+                animation: animated-block-2 2s 0.2s ease-in-out alternate infinite;
+            }
+            
+            &.block-middle {
+                transform: scale(0.9);
+            }
+
+            &.block-3 {
+                animation: animated-block-1 2s 0.4s ease-in-out alternate infinite;
+            }
+
+            &.block-4 {
+                animation: animated-block-2 2s 0.6s ease-in-out alternate infinite;
+            }
+
+            &.block-5 {
+                animation: animated-block-1 2s 0.8s ease-in-out alternate infinite;
+            }
+
+            &.block-6 {
+                animation: animated-block-2 2s 1s ease-in-out alternate infinite;
+            }
+
+            &:hover {
+                &:before {
+                    opacity: 1;
+                }
+
+                .templates-btn {
+                    transform: scale(1);
+                    opacity: 1;
+                    visibility: visible;
+                }
+            }
+
+            &:before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                z-index: -1;
+                transition: 0.4s;
+                opacity: 0;
+                background-color: var(--home-templates-block-hover-bg);
+            }
+
+            .templates-btn {
+                transition: 0.4s;
+                opacity: 0;
+                visibility: hidden;
+                transform: scale(0.4);
+                background: var(--home-templates-btn-bg);
+                border-radius: 30px;
+                padding: 8px 10px;
+                color: var(--home-templates-btn-text-color);
+                font-size: 14px;
+                text-decoration: none;
+                box-shadow: var(--home-templates-btn-shadow);
+                border-top: var(--home-templates-btn-border-top);
+                border-right: var(--home-templates-btn-border-right);
+                border-left: var(--home-templates-btn-border-left);
+                border-bottom: var(--home-templates-btn-border-bottom);
+            }
+
+            &.border-none {
+                box-shadow: none;
+
+                &:before {
+                    display: none;
+                }
+            }
+
+            .img-1 {
+                opacity: 0;
+                visibility: hidden;
+                transition: 1s;
+                transform: scale(0.4);
+                transition-delay: 0.8s;
+            }
+
+            .img-2 {
+                opacity: 0;
+                visibility: hidden;
+                transition: 1s;
+                transform: scale(0.4);
+                transition-delay: 1.1s;
+            }
+        }
+
+        .lines {
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 0%;
+            height: 100%;
+            z-index: -1;
+            transition: 2s;
+
+            .top {
+                position: absolute;
+                top: 0;
+                left: 50%;
+                transform: translate(-50%, -25%);
+                z-index: -1;
+                display: flex;
+                width: 800px;
+                height: 200%;
+                align-items: center;
+                justify-content: space-between;
+
+                span {
+                    display: block;
+                    width: 1px;
+                    height: 100%;
+                    background: var(--home-templates-line);
+                }
+            }
+            
+            .left {
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                z-index: -1;
+                width: 100%;
+                height: 800px;
+                display: flex;
+                align-items: center;
+                flex-direction: column;
+                justify-content: space-between;
+
+                span {
+                    display: block;
+                    width: 100%;
+                    height: 1px;
+                    background: var(--home-templates-line);
+                }
+            }
+        }
+
+        &.templates-animation {
+            .template-block {
+                opacity:1;
+                visibility: visible;
+                transition: none !important;
+            }
+
+            .block-middle {
+                .theme-mode, img {
+                    opacity: 1;
+                    visibility: visible;
+                    transform: scale(1);
+                    transition: none !important;
+                }
+            }
+            
+            .lines {
+                opacity: 0.5;
+                width: 100%;
+            }
+        }
+    }
+}
+@media screen and (max-width: $landingBreakpointXL) {
+    .landing-templates {
+        .templates {
+            .template-block {
+                width: 336px;
+                height: 171px;
+                border: none !important;
+            }
+        }
+    }
+}
+
+@media screen and (max-width: $landingBreakpointLG) {
+    .landing-templates {
+        .templates {
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            .template-block {
+                width: 336px;
+                height: 171px;
+                border: none !important;
+                animation: none !important;
+                margin-right: 0 !important;
+                margin-left: 0 !important;
+            }
+            .lines {
+                display: none;
+            }
+        }
+    }
+}
+@media screen and (max-width: $landingBreakpointMD) {
+    .landing-templates {
+        .templates {
+            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
+            .template-block {
+                width: 354px;
+                height: 180px;
+                
+            }
+        }
+    }
+}
+
+
+@keyframes animated-block-1 {
+    to {
+        transform:  translateX(-10px);
+    }
+}
+
+@keyframes animated-block-2 {
+    to {
+        transform:  translateX(10px);
+    }
+}
+
diff --git a/styles/layout/landing/_themes.scss b/styles/layout/landing/_themes.scss
new file mode 100644
index 0000000000..2c0657dfe3
--- /dev/null
+++ b/styles/layout/landing/_themes.scss
@@ -0,0 +1,6 @@
+.landing-themes {
+    .table-container {
+        width: 1250px;
+        box-shadow: var(--home-card-shadow);
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/landing/_users.scss b/styles/layout/landing/_users.scss
new file mode 100644
index 0000000000..5ebda5eafe
--- /dev/null
+++ b/styles/layout/landing/_users.scss
@@ -0,0 +1,49 @@
+.landing-users {
+    .fade-right {
+        background: linear-gradient(to left, var(--home-bg), transparent);
+    }
+    .fade-left {
+        background: linear-gradient(to right, var(--home-bg), transparent);
+    }
+    .section-detail {
+        max-width: 1250px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+    .users-container {
+        max-width: 1250px !important;
+        margin-left: auto !important;
+        margin-right: auto !important;
+
+        .marquee-wrapper {
+            user-select: none;
+            gap: 3rem;
+            justify-content: center;
+            align-items: center;
+            flex-shrink: 0;
+        }
+        .marquee {
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            gap: 3rem;
+            min-width: 100%;
+            animation: scroll 30s linear infinite;
+
+            > div {
+                max-width: clamp(10rem, 1rem + 28vmin, 20rem);
+                aspect-ratio: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 8rem;
+            }
+
+            &.marquee-reverse{
+                animation-direction: reverse;
+                animation-delay: calc(30s / -2);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/layout.scss b/styles/layout/layout.scss
new file mode 100644
index 0000000000..5e8ef06211
--- /dev/null
+++ b/styles/layout/layout.scss
@@ -0,0 +1,31 @@
+@charset 'UTF-8';
+
+@import 'http://github.com/variables/_variables';
+@import 'http://github.com/_mixins';
+@import 'http://github.com/_core';
+@import 'http://github.com/_glow';
+@import 'http://github.com/_topbar';
+@import 'http://github.com/_sidebar';
+@import 'http://github.com/_content';
+@import 'http://github.com/_news';
+@import 'http://github.com/_footer';
+@import 'http://github.com/_config';
+@import 'http://github.com/_code';
+@import 'http://github.com/_doc';
+@import 'http://github.com/_docsearch';
+@import 'http://github.com/_responsive';
+@import 'http://github.com/landing/_landing';
+@import 'http://github.com/templates/_apollo';
+@import 'http://github.com/templates/_atlantis';
+@import 'http://github.com/templates/_ultima';
+@import 'http://github.com/templates/_freya';
+@import 'http://github.com/templates/_verona';
+@import 'http://github.com/templates/_diamond';
+@import 'http://github.com/templates/_genesis';
+@import 'http://github.com/templates/_avalon';
+@import 'http://github.com/templates/_poseidon';
+@import 'http://github.com/templates/_babylon';
+@import 'http://github.com/templates/_california';
+@import 'http://github.com/templates/_sakai';
+@import 'http://github.com/templates/_roma';
+@import 'http://github.com/templates/_templates';
\ No newline at end of file
diff --git a/styles/layout/templates/_apollo.scss b/styles/layout/templates/_apollo.scss
new file mode 100644
index 0000000000..f513607b68
--- /dev/null
+++ b/styles/layout/templates/_apollo.scss
@@ -0,0 +1,32 @@
+.apollo {
+    .template {
+        &-hero {
+
+            &-pattern {
+                width: 96rem;
+                height: auto;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 6;
+                mix-blend-mode: overlay;
+            }
+        }
+    }
+
+}
+
+@media only screen and (max-width: 768px) {
+    .apollo {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 90rem;
+                    bottom: 20rem;
+                }
+
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_atlantis.scss b/styles/layout/templates/_atlantis.scss
new file mode 100644
index 0000000000..91cfbdb8c8
--- /dev/null
+++ b/styles/layout/templates/_atlantis.scss
@@ -0,0 +1,49 @@
+.atlantis {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 50rem;
+                height: auto;
+                position: absolute;
+                bottom: -7rem;
+                left: -7rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                border-radius: 1.12rem;
+            }
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1200px) {
+    .atlantis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 45rem;
+                    bottom: -5.75rem;
+                    left: -9.5rem;
+                }
+            }
+        }
+
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .atlantis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 50rem;
+                    bottom: 16.75rem;
+                    left: -10.5rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_avalon.scss b/styles/layout/templates/_avalon.scss
new file mode 100644
index 0000000000..9cd421985b
--- /dev/null
+++ b/styles/layout/templates/_avalon.scss
@@ -0,0 +1,60 @@
+.avalon {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 56rem;
+                height: auto;
+                position: absolute;
+                bottom: 0px;
+                left: -3.06;
+                z-index: 6;
+
+                
+            }
+            &-rectangle{
+                opacity: 0.5;
+            }
+            &-light{
+                opacity: 0.75;
+            }
+        }
+        &-separator {
+            &-icon {
+                width: 7rem;
+                height: 3.5rem; 
+                border-radius: 99px;
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .avalon {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 68rem;
+                    height: auto;
+                    bottom: -8rem;
+                    left: -12rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .avalon {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 88rem;
+                    height: auto;
+                    bottom: 0rem;
+                    left: -16rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_babylon.scss b/styles/layout/templates/_babylon.scss
new file mode 100644
index 0000000000..a53e9f3dfb
--- /dev/null
+++ b/styles/layout/templates/_babylon.scss
@@ -0,0 +1,49 @@
+.babylon {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 100.3125rem;
+                height: auto;
+                position: absolute;
+                bottom: -23rem;
+                left: -15rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                width: 40rem;
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .babylon {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 72rem;
+                    height: auto;
+                    bottom: -16rem;
+                    left: -20rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .babylon {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 100rem;
+                    height: auto;
+                    bottom: -21rem;
+                    left: -24rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_california.scss b/styles/layout/templates/_california.scss
new file mode 100644
index 0000000000..43f665a70f
--- /dev/null
+++ b/styles/layout/templates/_california.scss
@@ -0,0 +1,49 @@
+.california {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 70.3125rem;
+                height: auto;
+                position: absolute;
+                bottom: -1.2rem;
+                left: -8.65rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                width: 40rem;
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .california {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 64rem;
+                    height: auto;
+                    bottom: -1.2rem;
+                    left: -10rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .california {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 92rem;
+                    height: auto;
+                    bottom: -1.2rem;
+                    left: -16rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_diamond.scss b/styles/layout/templates/_diamond.scss
new file mode 100644
index 0000000000..029f436cc0
--- /dev/null
+++ b/styles/layout/templates/_diamond.scss
@@ -0,0 +1,45 @@
+.diamond {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 62.3125rem;
+                height: 44.8125rem;
+                position: absolute;
+                top: -3.62;
+                left: -3.06;
+                z-index: 6;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    .diamond {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 60rem;
+                    height: auto;
+                    bottom: -8rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .diamond {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 64rem;
+                    height: auto;
+                    bottom: 2rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_freya.scss b/styles/layout/templates/_freya.scss
new file mode 100644
index 0000000000..8bc3734f64
--- /dev/null
+++ b/styles/layout/templates/_freya.scss
@@ -0,0 +1,33 @@
+.freya {
+    .template {
+        &-hero {
+
+            &-pattern {
+                height: auto;
+                width: 45rem;
+                position: absolute;
+                bottom: -9rem;
+                left: 0rem;
+                z-index: 6;
+            }
+        }
+    }
+
+}
+
+@media only screen and (max-width: 768px) {
+    .freya {
+        .template {
+            &-hero {
+
+                &-pattern {
+                    width: 55rem;
+                    height: auto;
+                    bottom: -2rem;
+                    left: 0;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_genesis.scss b/styles/layout/templates/_genesis.scss
new file mode 100644
index 0000000000..2cbe8c208e
--- /dev/null
+++ b/styles/layout/templates/_genesis.scss
@@ -0,0 +1,45 @@
+.genesis {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 62.3125rem;
+                height: 44.8125rem;
+                position: absolute;
+                top: -3.62;
+                left: -3.06;
+                z-index: 6;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    .genesis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 60rem;
+                    height: auto;
+                    bottom: -8rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .genesis {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 64rem;
+                    height: auto;
+                    bottom: 2rem;
+                    left: -8rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_poseidon.scss b/styles/layout/templates/_poseidon.scss
new file mode 100644
index 0000000000..0434c062e7
--- /dev/null
+++ b/styles/layout/templates/_poseidon.scss
@@ -0,0 +1,47 @@
+.poseidon {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 102.3125rem;
+                height: auto;
+                position: absolute;
+                bottom: 0rem;
+                left: -26rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                width: 45rem;
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .poseidon {
+        .template{
+            &-hero {
+                &-pattern {
+                    height: auto;
+                    bottom: 0rem;
+                    left: -34rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .poseidon {
+        .template{
+            &-hero {
+                &-pattern {
+                    height: auto;
+                    bottom: 21rem;
+                    left: -35rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_roma.scss b/styles/layout/templates/_roma.scss
new file mode 100644
index 0000000000..16b194cb2d
--- /dev/null
+++ b/styles/layout/templates/_roma.scss
@@ -0,0 +1,60 @@
+.roma {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 56rem;
+                height: auto;
+                position: absolute;
+                bottom: -0.5rem;
+                left: -4.06rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                width: 42rem;
+            }
+        }
+        &-separator {
+            &-icon {
+                width: 6rem;
+                height: 2.5rem;
+                border-radius: 99px;
+                svg{
+                    width: 4.2rem;
+                    height: 4.2rem;
+                }
+            }
+        }
+    }
+
+}
+@media only screen and (max-width: 1200px) {
+    .roma {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 68rem;
+                    height: auto;
+                    bottom: -8rem;
+                    left: -12rem;
+                }
+            }
+        }
+
+    }
+}
+@media only screen and (max-width: 768px) {
+    .roma {
+        .template{
+            &-hero {
+                &-pattern {
+                    width: 88rem;
+                    height: auto;
+                    bottom: 0rem;
+                    left: -16rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_sakai.scss b/styles/layout/templates/_sakai.scss
new file mode 100644
index 0000000000..fc75a58801
--- /dev/null
+++ b/styles/layout/templates/_sakai.scss
@@ -0,0 +1,54 @@
+.sakai {
+    .template {
+        &-hero {
+            &-pattern {
+                width: 72.3125rem;
+                height: auto;
+                position: absolute;
+                bottom: -1rem;
+                left: -1rem;
+                z-index: 6;
+            }
+            &-dashboard1,
+            &-dashboard2{
+                width: 42rem;
+            }
+        }
+        &-features-horizontal-card{
+            width: 30rem;
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1200px) {
+    .sakai {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 72.3125rem;
+                    height: auto;
+                    bottom: -1rem;
+                    left: -2rem;
+                }
+            }
+        }
+
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .sakai {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 64.3125rem;
+                    height: auto;
+                    bottom: 20rem;
+                    left: -2rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_templates.scss b/styles/layout/templates/_templates.scss
new file mode 100644
index 0000000000..522fb1acf9
--- /dev/null
+++ b/styles/layout/templates/_templates.scss
@@ -0,0 +1,1550 @@
+.template {
+    display: flex;
+    flex-direction: column;
+    gap: 2.19rem;
+}
+
+// TEMPLATE YOUTUBE
+.template {
+    &-youtube {
+        &-wrapper {
+            padding: 5rem 0;
+            background-color: var(--surface-card);
+            border-radius: 2rem;
+        }
+
+        &-title {
+            h2 {
+                margin: 0;
+                text-align: center;
+                font-size: 3rem;
+                font-weight: 600;
+                color: var(--surface-900);
+
+                @include mobile {
+                    font-size: 1.5rem;
+                }
+            }
+        }
+
+        &-video {
+            position: relative;
+            padding-bottom: 56.25%;
+            height: 100%;
+            overflow: hidden;
+
+            iframe {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 0.5rem;
+            }
+        }
+
+        &-description {
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.25rem;
+            text-align: center;
+            color: var(--surface-900);
+            width: 45rem;
+            margin: 1.25rem auto 0;
+
+            @include mobile {
+                font-size: 1rem;
+                line-height: 1.25rem;
+                width: 96%;
+            }
+        }
+
+        &-screen {
+            margin: 3rem auto 0;
+            width: 75%;
+            max-width: 70rem;
+            box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.02);
+            cursor: pointer;
+            position: relative;
+            background-color: var(--primary-100);
+            padding: 1.88rem 1.88rem 0;
+            border-radius: 1.5rem;
+            overflow: hidden;
+
+            &-blur {
+                width: 100%;
+                position: absolute;
+                height: 100%;
+                top: 0;
+                left: 0;
+                z-index: 4;
+                backdrop-filter: blur(1.4px);
+                background: rgba(255, 255, 255, 0.06);
+                border-radius: inherit;
+            }
+
+            &:hover &-play svg {
+                transform: scale(1.6);
+            }
+
+            &-play {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translateX(-50%) translateY(-50%);
+                z-index: 5;
+                transform-origin: center;
+
+                svg {
+                    width: 180px;
+                    height: 180px;
+                    transition: all 0.2s ease;
+                }
+            }
+
+            img {
+                width: 100%;
+                height: auto;
+                border-top-right-radius: 1rem;
+                border-top-left-radius: 1rem;
+                margin-bottom: -0.25rem;
+                box-shadow: 0px 0px 120px 0px rgba(0, 0, 0, 0.08);
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-youtube {
+            &-wrapper {
+                padding: 3rem 0 1.5rem;
+                border-radius: 1.25rem;
+            }
+
+            &-title {
+                h2 {
+                    @include mobile {
+                        font-size: 1.5rem;
+                    }
+                }
+            }
+
+            &-description {
+                @include mobile {
+                    font-size: 1rem;
+                    line-height: 1.25rem;
+                    width: 90%;
+                }
+            }
+
+            &-screen {
+                width: 90%;
+                padding: 1.25rem 1.25rem 0;
+                border-radius: 1rem;
+
+                &-blur {
+                    backdrop-filter: blur(0.5px);
+                }
+
+                &-play {
+                    svg {
+                        width: 100px;
+                        height: 100px;
+                    }
+                }
+
+                img {
+                    border-top-right-radius: 0.5rem;
+                    border-top-left-radius: 0.5rem;
+                }
+            }
+        }
+    }
+}
+
+// TEMPLATE FEATURES TYPE 1
+.template {
+    &-features-horizontal {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 1.5rem;
+        margin: 0 auto;
+        width: fit-content;
+
+        &-card {
+            width: 21.125rem;
+            padding: 1.25rem;
+            border-radius: 1.3125rem;
+            border: 1px solid var(--surface-border, #EEE);
+            background: var(--surface-0, #FFF);
+
+            &-top {
+                width: 100%;
+                margin-bottom: 1.25rem;
+                background: var(--surface-100, #FFF);
+                border-radius: 0.65625rem;
+                overflow: hidden;
+                display: flex;
+
+                img {
+                    width: 100%;
+                    border-radius: inherit;
+                }
+            }
+
+            &-bottom {
+                &-title {
+                    color: var(--surface-900);
+                    font-size: 1.09375rem;
+                    font-weight: 600;
+                    line-height: 1.5;
+                    margin-top: 0;
+                    margin-bottom: 0.75rem;
+                }
+
+                &-description {
+                    color: var(--surface-600);
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.5;
+                    margin: 0;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-features-horizontal {
+            &-wrapper {
+                padding: 2rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+
+            &-card {
+                padding: 1rem;
+                border-radius: 1rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-features-horizontal {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            width: 98%;
+
+            &-card {
+                width: 100%;
+            }
+        }
+    }
+}
+
+// TEMPLATE FEATURES TYPE 2
+.template {
+    &-features-vertical {
+        &-wrapper {
+            padding: 7rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        margin: 0 auto;
+        width: 70%;
+        max-width: 52.75rem;
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 1.5rem;
+
+        &-col {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            flex: 1;
+
+            &:last-child {
+                margin-top: 7.5rem;
+            }
+        }
+
+        &-card {
+            width: 100%;
+            padding: 1.25rem;
+            border-radius: 1.3125rem;
+            border: 1px solid var(--surface-border);
+            background: var(--surface-0);
+
+            &-image {
+                width: auto;
+                background: var(--surface-100);
+                border-radius: 0.65625rem;
+                display: flex;
+
+                img {
+                    border-radius: inherit;
+                    width: 100%;
+                    height: auto;
+                }
+            }
+
+            h2 {
+                margin: 1.25rem 0 0;
+                color: var(--surface-900, var(--surface-900, #212121));
+                font-size: 1.09375rem;
+                font-weight: 600;
+                line-height: 1.5;
+            }
+
+            p {
+                margin: 0.75rem 0 0;
+                color: var(--surface-600, #757575);
+                font-size: 1rem;
+                font-weight: 400;
+                line-height: 1.5;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-features-vertical {
+            &-wrapper {
+                padding: 2.5rem 1rem;
+                border-radius: 1.25rem;
+            }
+
+            max-width: 100%;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+
+            &-card {
+                padding: 1rem;
+                border-radius: 1rem;
+
+                &-img {
+                    height: auto;
+                    width: 100%;
+                    border-radius: 0.5rem;
+                }
+
+                &-withMargin {
+                    margin-top: 0rem;
+                }
+
+                &-withoutMargin {
+                    margin-top: 0rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .template {
+        &-features-vertical {
+            width: 70%;
+            flex-direction: column;
+
+            &-col {
+                &:last-child {
+                    margin-top: 0rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-features-vertical {
+            flex-direction: column;
+            width: 100%;
+        }
+    }
+}
+
+// TEMPLATE RELATED
+.template {
+    &-related {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        &-title {
+            text-align: center;
+            color: var(--surface-900);
+            font-size: 3rem;
+            font-weight: 600;
+        }
+
+        &-slide {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            width: fit-content;
+            margin: 3rem auto 0;
+            gap: 1.5rem;
+
+            &-card {
+                border-radius: 1.3125rem;
+                border: 1px solid var(--surface-border, #EEE);
+                background: var(--surface-0, #FFF);
+                padding: 1.25rem;
+                display: flex;
+                img {
+                    width: 18.625rem;
+                    height: auto;
+                    border-radius: 0.65625rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-related {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+
+            &-title {
+                padding-top: 1.5rem;
+                font-size: 1.5rem;
+            }
+
+            &-slide {
+                gap: 2rem;
+
+                width: 90%;
+                margin: 2rem auto 0;
+
+                &-card {
+                    border-radius: 1rem;
+                    padding: 1rem;
+                    max-width: 24rem;
+
+                    img {
+                        width: 100%;
+                        height: auto;
+                        border-radius: 0.5rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-related {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            &-slide {
+                width: 98%;
+                max-width: 100%;
+                margin: 2rem auto 0;
+
+                &-card {
+                    max-width: 100%;
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+
+// TEMPLATE CONFIGURATION
+.layout-dark {
+    .template {
+        &-configuration {
+            &-screen {
+                &-bottom {
+                    background: var(--surface-card) !important;
+
+                    p {
+                        color: var(--surface-900);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.template {
+    &-configuration {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        padding: 2rem;
+        border-radius: 1.75rem;
+        border: 1px solid var(--surface-border, #EEE);
+        background: var(--surface-0, #FFF);
+        width: 49.25rem;
+        margin: 0 auto;
+
+        &-title {
+            font-size: 1.53125rem;
+            font-weight: 700;
+            line-height: 1.8125rem;
+            color: var(--surface-900, var(--surface-900, #212121));
+        }
+
+        &-description {
+            color: var(--surface-600, #757575);
+            font-size: 1.09375rem;
+            font-weight: 400;
+            line-height: 1.64375rem;
+            margin: 0.75rem 0 0;
+        }
+
+        &-screen {
+            border-radius: 0.875rem;
+            border: 1px solid var(--surface-border, #DFE7EF);
+
+            &-top {
+                border-radius: 0.75rem 0.75rem 0rem 0rem;
+                background: var(--surface-0, #FFF);
+                padding: 0.25rem 1.5rem;
+                height: 3.5rem;
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+
+                &-circle {
+                    width: 0.75rem;
+                    height: 0.75rem;
+                    border-radius: 999px;
+                }
+
+                &-close {
+                    background-color: #ED6B5D;
+                }
+
+                &-minimize {
+                    background-color: #F4BE50;
+                }
+
+                &-zoom {
+                    background-color: #61C554;
+                }
+            }
+
+            &-bottom {
+                padding: 1.5rem;
+                background: var(--surface-900);
+                border-bottom-left-radius: inherit;
+                border-bottom-right-radius: inherit;
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                position: relative;
+
+                p {
+                    color: var(--surface-0);
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.0625rem;
+                    margin: 0;
+                }
+
+                &-logo {
+                    width: 7.5rem;
+                    height: 7.5rem;
+                    position: absolute;
+                    right: 1.5rem;
+                    bottom: 1.38rem;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-configuration {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+
+            &-title {
+                font-size: 1.25rem;
+            }
+
+            &-description {
+                font-size: 0.85rem;
+                line-height: 1.25rem;
+            }
+
+            width: 80%;
+            padding: 1rem;
+            border-radius: 1rem;
+
+            &-screen {
+                border-radius: 0.5rem;
+
+                &-top {
+                    border-radius: 0.5rem 0.5rem 0rem 0rem;
+                }
+
+                &-bottom {
+                    border-radius: 0rem 0rem 0.5rem 0.5rem;
+
+
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-configuration {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            width: 98%;
+
+            &-screen {
+                &-bottom {
+                    &-logo {
+                        width: 5.25rem;
+                        height: 5.25rem;
+                        right: 0.88rem;
+                        bottom: 0.88rem;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// TEMPLATE FEATURES ANIMATION
+.template {
+    &-features-animation {
+        &-wrapper {
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+            padding: 5rem 2rem;
+        }
+
+        &-title {
+            max-width: 45rem;
+            margin: 0 auto 3rem;
+
+            h2 {
+                margin: 0;
+                color: var(--surface-900);
+                text-align: center;
+                font-size: 3rem;
+                font-weight: 600;
+                text-align: center;
+            }
+        }
+
+        display: flex;
+        gap: 2.5rem;
+        width: fit-content;
+        margin: 0 auto;
+        padding: 1.75rem;
+        border-radius: 1.75rem;
+        border: 1px solid var(--surface-border, #EEE);
+
+        &-left {
+            width: 100%;
+            max-width: 30rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+
+            &-card {
+                padding: 1rem;
+                display: flex;
+                align-items: flex-start;
+                gap: 1.5rem;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &-active {
+                    border-radius: 0.75rem;
+                    background: var(--surface-100, #F5F5F5);
+                    transition: all 0.2s ease;
+                }
+
+                &:hover {
+                    border-radius: 0.75rem;
+                    background: var(--surface-100, #F5F5F5);
+                }
+
+                &:hover &-order {
+
+                    div {
+                        &:nth-child(2) {
+                            color: var(--surface-100);
+
+                        }
+
+                        &:nth-child(3) {
+                            animation: FeaturesOrderAnimation 2.5s ease-in-out;
+                            color: var(--primary-400);
+                        }
+                    }
+                }
+
+                &-active &-order {
+                    div {
+                        &:nth-child(2) {
+                            color: var(--surface-100);
+
+                        }
+
+                        &:nth-child(3) {
+                            animation: FeaturesOrderAnimation 2.5s ease-in-out;
+                            color: var(--primary-400);
+                        }
+                    }
+                }
+
+                &-order {
+                    width: 3.5rem;
+                    height: 100%;
+                    margin-top: -0.25rem;
+                    position: relative;
+                    transition: all 0.2s ease;
+
+                    div {
+                        font-size: 2.5rem;
+                        font-weight: 700;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+
+                        &:nth-child(1) {
+                            color: var(--primary-400);
+                            -webkit-text-stroke: 1.2px var(--primary-400);
+                        }
+
+                        &:nth-child(2) {
+                            color: var(--surface-card);
+                            transition: all 0.2s ease;
+                        }
+
+                        &:nth-child(3) {
+                            color: transparent;
+                        }
+                    }
+                }
+
+
+
+                &-content {
+                    flex: 1;
+
+                    h5 {
+                        color: var(--surface-900, var(--color-surface-900, #212121));
+                        font-size: 1.09375rem;
+                        font-weight: 600;
+                        line-height: 1.5;
+                        margin: 0;
+                    }
+
+                    p {
+                        color: var(--surface-600, #757575);
+                        font-size: 1rem;
+                        font-weight: 400;
+                        line-height: 1.5;
+                        margin: 0.38rem 0 0;
+
+                        a {
+                            color: var(--primary-400);
+                            font-weight: 600;
+
+                            &:hover {
+                                text-decoration: underline;
+                            }
+                        }
+                    }
+
+                }
+            }
+        }
+
+        &-right {
+            width: 30rem;
+            height: fit-content;
+            border-radius: 0.875rem;
+            background-color: var(--surface-100);
+            display: flex;
+            overflow: hidden;
+            img {
+                width: 100%;
+                height: auto;
+            }
+
+            &-inline {
+                width: 100%;
+                padding: 2rem 0;
+                border-radius: 0.75rem;
+                background: var(--surface-100);
+                position: relative;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                &-image {
+                    width: 90%;
+                    overflow: hidden;
+                    position: relative;
+                    display: flex;
+                    margin-top: 1.25rem;
+                    border-radius: 0.5rem;
+                    box-shadow: 0px 0px 48px 0px rgba(0, 0, 0, 0.08);
+
+                    img {
+                        max-height: 24rem;
+                    }
+                }
+
+                &-tabs {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.25rem;
+                    border-radius: 2.5rem;
+                    border: 1px solid var(--surface-border);
+                    background: var(--surface-0);
+                    padding: 0.25rem;
+                    width: 90%;
+                    overflow: auto;
+
+                    button {
+                        flex: 1;
+                        width: 100%;
+                        padding: 0.21875rem 0.5rem;
+                        border-radius: 2.25rem;
+                        color: var(--surface-900);
+                        background: var(--surface-0);
+                        border: none;
+                        outline: none;
+                        font-size: 0.75rem;;
+                        font-weight: 500;
+                        line-height: 1rem;
+                        letter-spacing: -0.015rem;
+                        cursor: pointer;
+                        transition: all 0.15s ease;
+
+                        &:hover {
+                            background: var(--surface-100);
+                        }
+
+
+                    }
+
+                    &-btnActive {
+                        background: var(--surface-100) !important;
+
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes FeaturesOrderAnimation {
+    0% {
+        clip-path: polygon(0% 100%, 15% 100%, 32% 100%, 54% 100%, 70% 100%, 84% 100%, 100% 100%,
+                100% 100%, 0% 100%);
+    }
+
+    20% {
+        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%,
+                100% 100%, 0% 100%);
+    }
+
+    40% {
+        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
+    }
+
+    60% {
+        clip-path: polygon(0 51%, 14% 31%, 33% 42%, 49% 53%, 68% 55%, 85% 50%, 100% 60%, 100% 100%, 0 100%);
+    }
+
+    100% {
+        clip-path: polygon(0 0, 18% 0, 39% 0, 53% 0, 62% 0, 87% 0, 100% 0, 100% 100%, 0 100%);
+    }
+}
+
+@media only screen and (max-width: 1440px) {
+    .template {
+        &-features-animation {
+
+            &-left {
+                flex: 0.4;
+            }
+
+            &-right {
+                flex: 0.6;
+                &-inline {
+                    &-image {
+                        width: 92%;
+                    }
+
+                    &-tabs {
+                        width: 92%;
+
+                        button {
+                            padding: 0.21875rem 0.25rem;
+                        }
+                    }
+                }
+            }
+
+
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-features-animation {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+            }
+
+            &-title {
+                padding-top: 1.5rem;
+
+                h2 {
+                    font-size: 1.5rem;
+                }
+            }
+
+            flex-direction: column-reverse;
+            gap: 1.31rem;
+            padding: 1rem;
+            border-radius: 1rem;
+            width: 70%;
+
+            &-left {
+                width: 100%;
+                max-width: 100%;
+            }
+
+            &-right {
+                border-radius: 0.75rem;
+                width: 100%;
+                min-width: 0rem;
+                max-width: 100%;
+
+                &-inline {
+                    height: fit-content;
+                    padding: 2rem 0;
+
+                    &-image {
+                        width: 90%;
+                        margin: 0;
+                        height: auto;
+                    }
+
+                    &-tabs {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-features-animation {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            width: 98%;
+
+
+        }
+    }
+}
+
+// TEMPLATE HERO
+.template {
+    display: flex;
+    flex-direction: column;
+    gap: 2.19rem;
+
+    &-hero {
+        width: 100%;
+        height: 36.25rem;
+        background: var(--primary-500);
+        border-radius: 2rem;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        &-card {
+            position: relative;
+            z-index: 15;
+            width: 29rem;
+            margin-left: 10rem;
+            
+            border-radius: 1.5rem;
+            border: 1px solid rgba(255, 255, 255, 0.24);
+            background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--primary-400)/0.8 100%), rgba(255, 255, 255, 0.10);
+            box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 48px 80px 0px rgba(0, 0, 0, 0.08), 0px -5px 13px -2px rgba(255, 255, 255, 0.55) inset;
+            backdrop-filter: blur(2px);
+            padding: 2.25rem 1.75rem;
+
+
+            &-logo {
+                height: 2.5rem;
+
+                svg {
+                    height: 100%;
+                    width: auto;
+                }
+                &-row{
+                    display: flex;
+                    align-items: center;
+                    gap: 1rem;
+                    &-multipurpose{
+                        padding: 0.25rem 0.5rem;
+                        font-weight: 500;
+                        color: var(--surface-900);
+                        background: var(--surface-0);
+                        border-radius: 0.5rem;
+                        line-height: 1.5rem;
+                    }
+                }
+            }
+
+            p {
+                font-size: 1rem;
+                font-weight: 400;
+                line-height: 1.5;
+                margin: 1rem 0 0;
+                color: var(--surface-0);
+            }
+
+            &-buttons {
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+                margin-top: 2rem;
+
+                a {
+                    text-decoration: none;
+                    height: 2.5rem;
+                    flex: 1;
+                    border-radius: 3rem;
+
+                    font-size: 1rem;
+                    font-weight: 700;
+                    line-height: 1.0625rem;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &-btn1 {
+                    border: 1px solid #212121;
+                    background: #212121;
+                    color: white;
+
+                    &:hover {
+                        border-color: #444444;
+                        background-color: #444444;
+                    }
+                }
+
+                &-btn2 {
+                    background-color: var(--primary-600);
+                    border-color: var(--primary-600);
+
+                    &:hover {
+                        background-color: var(--primary-700);
+                        border-color: var(--primary-700);
+                    }
+                }
+
+            }
+
+            &-links {
+                margin-top: 1rem;
+                display: flex;
+                align-items: center;
+                gap: 1rem;
+
+                a {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    color: var(--surface-0);
+
+                    span {
+                        font-size: 1rem;;
+                        line-height: normal;
+                    
+                        &:hover {
+                            text-decoration-line: underline;
+                        }
+                    }
+                }
+            }
+        }
+
+        &-rectangle {
+            position: absolute;
+            top: 0rem;
+            left: -8rem;
+            z-index: 4;
+            height: 100%;
+            width: auto;
+        }
+
+        &-light {
+            position: absolute;
+            top: -4rem;
+            left: 6rem;
+            z-index: 5;
+
+        }
+
+        &-dashboard1 {
+            z-index: 9;
+            position: absolute;
+            top: 2.02rem;
+            left: 60rem;
+            width: 37.875rem;
+            filter: drop-shadow(0px 0px 43.65px rgba(0, 0, 0, 0.12));
+            border-radius: 0.25rem;
+        }
+
+        &-dashboard2 {
+            z-index: 8;
+            position: absolute;
+            top: 2.02rem;
+            left: 42rem;
+            width: 37.875rem;
+            filter: drop-shadow(0px 0px 43.65px rgba(0, 0, 0, 0.12));
+            border-radius: 0.25rem;
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1440px) {
+    .template {
+        &-hero {
+            height: 32.25rem;
+
+            &-card {
+                margin-left: 3.5rem;
+                padding: 2rem 1.5rem;
+                border-radius: 1.25rem;
+                width: 26.25rem;
+            }
+
+            &-rectangle {
+                left: -8rem;
+            }
+
+            &-light {
+                left: 2rem;
+            }
+
+            &-dashboard1 {
+                top: 2.5rem;
+                left: 44rem;
+                width: 36rem;
+            }
+
+            &-dashboard2 {
+                top: 2.5rem;
+                left: 32rem;
+                width: 36rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .template {
+        &-hero {
+            height: 53.25rem;
+            padding: 7.5rem 1.25rem 1.25rem;
+            border-radius: 1rem;
+            align-items: baseline;
+            &-card {
+                width: 100%;
+                margin-left: 0rem;
+                padding: 2rem 1.5rem;
+                border-radius: 1.25rem;
+                margin-top: -4rem;
+                &-links {
+                    justify-content: center;
+                }
+            }
+
+            &-rectangle {
+                left: -2rem;
+                height: auto;
+                width: 80rem;
+            }
+
+            &-light {
+                left: 50%;
+                transform: translateX(-50%);
+            }
+
+            &-dashboard1 {
+                top: 28.5rem;
+                left: 12rem;
+                width: 80%;
+            }
+
+            &-dashboard2 {
+                top: 28.5rem;
+                left: 1.5rem;
+                width: 80%;
+            }
+
+        }
+
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-hero {
+            &-rectangle {
+                left: -10rem;
+            }
+
+            &-dashboard1 {
+                width: 36rem;
+            }
+
+            &-dashboard2 {
+                width: 36rem;
+            }
+        }
+
+    }
+}
+
+//TEMPLATE INTRO
+.template {
+    &-intro {
+        border-radius: 2rem;
+        background: var(--surface-card, #FFF);
+        padding: 5rem 2rem;
+
+        h2 {
+            color: var(--surface-900);
+            text-align: center;
+            font-size: 3.42857rem;
+            font-weight: 600;
+            line-height: 4rem;
+            margin: 0;
+        }
+
+        p {
+            color: var(--surface-900);
+            text-align: center;
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5rem;
+            max-width: 50rem;
+            margin: 1.5rem auto 0;
+        }
+
+        &-image {
+            position: relative;
+            background-color: var(--primary-600);
+            max-width: 75rem;
+            margin: 3.5rem auto 0;
+            border-radius: 1.15rem;
+            display: flex;
+
+            &::after {
+                content: '';
+                position: absolute;
+                inset: 0;
+                z-index: 5;
+                background-color: var(--primary-100);
+                opacity: 0.15;
+                border-radius: inherit;
+            }
+
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+}
+
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-intro {
+            padding: 2.5rem 1.25rem;
+
+            h2 {
+                font-size: 1.5rem;
+                line-height: normal;
+            }
+
+            p {
+                line-height: 1.5;
+                margin: 1rem auto 0;
+                font-size: 1rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-intro {
+            padding: 3rem 1rem;
+
+            h2 {
+                font-size: 1.5rem;
+            }
+
+            &-image {
+                margin: 1.5rem auto 0;
+            }
+        }
+    }
+}
+
+
+// TEMPALTE SEPARATOR
+.template {
+    &-separator {
+        gap: 1.5rem;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &::before {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background-color: var(--surface-border)
+        }
+
+        &::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background-color: var(--surface-border)
+        }
+
+        &-icon {
+            width: 3rem;
+            height: 3rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid var(--surface-border);
+            border-radius: 100%;
+            background-color: var(--surface-card);
+        }
+    }
+
+
+}
+
+//TEMPLATE LICENCE
+
+.template {
+    &-license {
+        &-wrapper {
+            padding: 5rem 2rem;
+            border-radius: 2rem;
+            background: var(--surface-card, #FFF);
+        }
+
+        &-cards {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-start;
+            justify-content: center;
+            gap: 1.5rem;
+        }
+
+        &-card {
+            width: 21.25rem;
+            padding: 1.5rem;
+            border-radius: 1rem;
+            border: 1px solid var(--surface-200);
+            background-color: var(--surface-card);
+            span {
+                color: var(--surface-900);
+                font-weight: 600;
+                line-height: 1.5rem;
+            }
+
+            h2 {
+                color: var(--surface-900);
+                font-size: 2.5rem;
+                font-weight: 600;
+                line-height: 3rem;
+                letter-spacing: -0.025rem;
+                margin: 1rem 0 1.25rem;
+            }
+
+            .discount {
+                color: var(--text-color-secondary);
+                text-decoration: line-through;
+            }
+
+            button {
+                padding: 0.25rem 0.75rem;
+                border-radius: 0.375rem;
+                background: var(--surface-900);
+                text-align: center;
+                width: 100%;
+                outline: none;
+                border: none;
+                min-height: 2rem;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &:hover {
+                    background: var(--surface-700);
+                }
+
+                color: var(--surface-0);
+                text-align: center;
+                font-size: 1rem;
+                font-weight: 500;
+                line-height: 1.5rem;
+                letter-spacing: -0.00875rem;
+            }
+
+            &-included {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+                margin-bottom: 1.25rem;
+
+                p {
+                    color: var(--surface-500);
+                    font-size: 1rem;
+                    font-weight: 400;
+                    line-height: 1.5rem;
+                    letter-spacing: -0.00875rem;
+                    margin: 0;
+                }
+            }
+        }
+
+        &-description {
+            color: var(--surface-500);
+            text-align: center;
+            font-size: 1rem;
+            line-height: 1.5rem;
+            letter-spacing: -0.00875rem;
+            max-width: 46.75rem;
+            margin: 1.5rem auto 0;
+        }
+
+        &-visit {
+            font-size: 1rem;
+            font-weight: 400;
+            line-height: 1.5rem;
+            letter-spacing: -0.00875rem;
+            text-align: center;
+            margin: 1.5rem auto 0;
+
+            a {
+                color: var(--primary-500);
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &:hover {
+                    text-decoration-line: underline;
+                }
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 992px) {
+    .template {
+        &-license {
+            &-wrapper {
+                padding: 2.5rem 1.25rem;
+                border-radius: 1.25rem;
+            }
+            &-description{
+                max-width: 36.5rem;
+            }
+        }
+    }
+}
+@media only screen and (max-width: 721px) {
+    .template {
+        &-license {
+            &-card {
+                width: 80%;
+            }
+            &-description{
+                max-width: 32rem;
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 576px) {
+    .template {
+        &-license {
+            &-wrapper {
+                padding: 1.5rem 1rem;
+            }
+
+            &-card {
+                width: 100%;
+                padding: 1.25rem;
+                border-radius: 0.75rem;
+            }
+        }
+    }
+}
diff --git a/styles/layout/templates/_ultima.scss b/styles/layout/templates/_ultima.scss
new file mode 100644
index 0000000000..ca1c94d1db
--- /dev/null
+++ b/styles/layout/templates/_ultima.scss
@@ -0,0 +1,39 @@
+.ultima {
+    .template {
+        &-hero {
+
+            &-pattern {
+                width: 80rem;
+                height: auto;
+                position: absolute;
+                bottom: -26rem;
+                left: -22.5rem;
+                z-index: 6;
+                mix-blend-mode: overlay;
+            }
+
+            &-dashboard1,
+            &-dashboard2{
+                border-radius: 0.42857rem;
+            }
+
+        }
+    }
+
+}
+
+@media only screen and (max-width: 768px) {
+    .ultima {
+        .template {
+            &-hero {
+
+                &-pattern {
+                    width: 90rem;
+                    left: -25rem;
+                    bottom: -10rem;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/templates/_verona.scss b/styles/layout/templates/_verona.scss
new file mode 100644
index 0000000000..d0c05d2402
--- /dev/null
+++ b/styles/layout/templates/_verona.scss
@@ -0,0 +1,48 @@
+.verona {
+    .template {
+        &-hero {
+
+            &-pattern {
+                width: 110rem;
+                height: auto;
+                position: absolute;
+                bottom: -2rem;
+                left: -1rem;
+                z-index: 6;
+            }
+
+        }
+    }
+
+}
+
+@media only screen and (max-width: 1200px) {
+    .verona {
+        .template {
+            &-hero {
+                &-pattern {
+                    width: 120rem;
+                    left: -7.5rem;
+                    bottom: -10rem;
+                }
+            }
+        }
+
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .verona {
+        .template {
+            &-hero {
+
+                &-pattern {
+                    width: 124rem;
+                    left: -8.5rem;
+                    bottom: 0;
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/styles/layout/variables/_variables.scss b/styles/layout/variables/_variables.scss
new file mode 100644
index 0000000000..82efa8da7d
--- /dev/null
+++ b/styles/layout/variables/_variables.scss
@@ -0,0 +1,4 @@
+@import 'http://github.com/landing/_light';
+@import 'http://github.com/landing/_dark';
+@import 'http://github.com/main/_light';
+@import 'http://github.com/main/_dark';
\ No newline at end of file
diff --git a/styles/layout/variables/landing/_dark.scss b/styles/layout/variables/landing/_dark.scss
new file mode 100644
index 0000000000..ac227326bf
--- /dev/null
+++ b/styles/layout/variables/landing/_dark.scss
@@ -0,0 +1,54 @@
+.landing.layout-dark {
+    --home-highlight-color:#22d3ee;
+    --home-highlight-darker-color:#67e8f9;
+    --home-highlight-fore-color:#030712;
+    --home-bg:#111827;
+    --home-border-color:#424b57;
+    --home-primary-text-color:#ffffff;
+    --home-secondary-text-color:rgba(255,255,255,.6);
+    --home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
+    --home-box-bg:#1f2937;
+    --home-linkbox-bg:rgba(255, 255, 255, .05);
+    --home-linkbox-border:1px solid rgba(255, 255, 255, .1);
+    --home-linkbox-text-color:#ffffff;
+    --home-linkbox-hover-bg:rgba(255, 255, 255, .1);
+    --home-blocks-bg:transparent;
+    --home-blocks-block-bg:#111827;
+    --home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
+    --home-blocks-border-left:5px solid #1f2937;
+    --home-blocks-border-bottom:7px solid #1f2937;
+    --home-blocks-border:1px solid #424b57;
+    --home-blocks-sidebar-bg:#1f2937;
+    --home-blocks-list-bg:#28323f;
+    --home-blocks-main-bg:#111827;
+    --home-blocks-main-border:1px solid #424b57;
+    --home-blocks-item-bg:#1f2937;
+    --home-blocks-image-bg:#28323f;
+    --home-blocks-text-color:#4b5563;
+    --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, 0.25);
+    --home-blocks-active-border-top:1px solid #424b57;
+    --home-blocks-active-border-right:1px solid #424b57;
+    --home-blocks-active-border-bottom:6px solid #424b57;
+    --home-blocks-active-border-left:4px solid #424b57;
+    --home-blocks-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25);
+    --home-blocks-tablebar-bg:#4b5563;
+    --home-blocks-bar-bg:#4b5563;
+    --home-blocks-bar-button-bg:#ffffff;
+    --home-blocks-circle-bg:#4b5563;
+    --home-templates-bg:transparent;
+    --home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25);
+    --home-templates-block-border-left:5px solid #424b57;
+    --home-templates-block-border-bottom:7px solid #424b57;
+    --home-templates-line:rgba(255,255,255,.1);
+    --home-templates-block-hover-bg:rgba(255,255,255,.1);
+    --home-templates-btn-bg:#1f2937;
+    --home-templates-btn-text-color:#ffffff;
+    --home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.25);
+    --home-templates-btn-border-top:1px solid #424b57;
+    --home-templates-btn-border-right:1px solid #424b57;
+    --home-templates-btn-border-bottom:4px solid #424b57;
+    --home-templates-btn-border-left:3px solid #424b57;
+    --home-features-card-shadow: none;
+    --home-box-ring-color: rgba(34, 211, 238, .3)
+
+}
\ No newline at end of file
diff --git a/styles/layout/variables/landing/_light.scss b/styles/layout/variables/landing/_light.scss
new file mode 100644
index 0000000000..d2f9b82f9d
--- /dev/null
+++ b/styles/layout/variables/landing/_light.scss
@@ -0,0 +1,53 @@
+.landing.layout-light {
+    --home-highlight-color:#06b6d4;
+    --home-highlight-darker-color:#0891b2;
+    --home-highlight-fore-color:#ffffff;
+    --home-bg:#F9FAFB;
+    --home-border-color:rgba(0,0,0,.1);
+    --home-primary-text-color:#030712;
+    --home-secondary-text-color:#6b7280;
+    --home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
+    --home-box-bg:#ffffff;
+    --home-linkbox-bg:#ffffff;
+    --home-linkbox-border:1px solid rgba(0,0,0,.1);
+    --home-linkbox-text-color:#030712;
+    --home-linkbox-hover-bg:#e5e7eb;
+    --home-blocks-bg:transparent;
+    --home-blocks-block-bg:#ffffff;
+    --home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
+    --home-blocks-border-left:5px solid rgba(0,0,0,.1);
+    --home-blocks-border-bottom:7px solid rgba(0,0,0,.1);
+    --home-blocks-border:1px solid rgba(0,0,0,.1);
+    --home-blocks-sidebar-bg:#f3f4f6;
+    --home-blocks-list-bg:#f9fafb;
+    --home-blocks-main-bg:#ffffff;
+    --home-blocks-main-border:1px solid rgba(0,0,0,.1);
+    --home-blocks-item-bg:#f4f5f7;
+    --home-blocks-image-bg:#e5e7eb;
+    --home-blocks-text-color:#d1d5db;
+    --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
+    --home-blocks-active-border-top:1px solid rgba(0,0,0,.07);
+    --home-blocks-active-border-right:1px solid rgba(0,0,0,.07);
+    --home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07);
+    --home-blocks-active-border-left:4px solid rgba(0,0,0,.07);
+    --home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
+    --home-blocks-tablebar-bg:#d1d5db;
+    --home-blocks-bar-bg:#d1d5db;
+    --home-blocks-bar-button-bg:#ffffff;
+    --home-blocks-circle-bg:#c7cad0;
+    --home-templates-bg:transparent;
+    --home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1);
+    --home-templates-block-border-left:5px solid #d1d5db;
+    --home-templates-block-border-bottom:7px solid #d1d5db;
+    --home-templates-line:rgba(0,0,0,.1);
+    --home-templates-block-hover-bg:rgba(0, 0, 0, 0.2);
+    --home-templates-btn-bg:rgba(0, 0, 0, 0.5);
+    --home-templates-btn-text-color:#ffffff;
+    --home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.5);
+    --home-templates-btn-border-top:1px solid rgba(0,0,0,.1);
+    --home-templates-btn-border-right:1px solid rgba(0,0,0,.1);
+    --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
+    --home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
+    --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
+    --home-box-ring-color: var(--primary-200);
+}
\ No newline at end of file
diff --git a/styles/layout/variables/main/_dark.scss b/styles/layout/variables/main/_dark.scss
new file mode 100644
index 0000000000..f108b9bf5b
--- /dev/null
+++ b/styles/layout/variables/main/_dark.scss
@@ -0,0 +1,15 @@
+.layout-dark {
+    --topbar-sticky-bg:rgba(0,0,0,.3);
+    --card-border: 0 none;
+    --card-bg: var(--surface-card);
+    --glow-image: url(https://www.primefaces.org/cdn/primereact/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--primary-color) 0%, #000000 100%);
+    --glow-blend: hard-light, color-dodge;
+    --topbar-border: var(--surface-border);
+    --mobile-menu-bg: rgba(0,0,0,.3);
+    --demo-code-bg: var(--surface-card);
+    --demo-code-button-color: var(--surface-500);
+    --demo-code-button-hover-bg: rgba(255,255,255,.1);
+    --demo-code-button-hover-color: var(--surface-700);
+    --doc-highlight-text-bg: var(--highlight-bg);
+    --doc-highlight-text-color: var(--highlight-text-color);
+}
\ No newline at end of file
diff --git a/styles/layout/variables/main/_light.scss b/styles/layout/variables/main/_light.scss
new file mode 100644
index 0000000000..1af90c7aea
--- /dev/null
+++ b/styles/layout/variables/main/_light.scss
@@ -0,0 +1,15 @@
+.layout-light {
+    --topbar-sticky-bg:rgba(255,255,255,.7);
+    --card-border: 1px solid var(--surface-border);
+    --card-bg: var(--surface-card);
+    --glow-image: url(https://www.primefaces.org/cdn/primereact/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%);
+    --glow-blend: hard-light, multiply;
+    --topbar-border: rgba(0,0,0,.05);
+    --mobile-menu-bg: var(--surface-overlay);
+    --demo-code-bg: var(--surface-700);
+    --demo-code-button-color: var(--surface-300);
+    --demo-code-button-hover-bg: rgba(255,255,255,.1);
+    --demo-code-button-hover-color: var(--surface-100);
+    --doc-highlight-text-bg: var(--primary-100);
+    --doc-highlight-text-color: var(--primary-900);
+}
\ No newline at end of file
diff --git a/styles/primereact.css b/styles/primereact.css
new file mode 100644
index 0000000000..0311d30612
--- /dev/null
+++ b/styles/primereact.css
@@ -0,0 +1,3 @@
+/**
+ * The primereact[.min].css has been deprecated. In order not to break existing projects, it is currently included in the build as an empty file.
+ */
\ No newline at end of file